\r\n
\r\n );\r\n }\r\n\r\n}\r\n\r\nconst mapStateToProps = (store) => {\r\n const {activeTheme, visualizersLoaded} = store.serverState;\r\n const {loaderOpened, loaderTitle, loaderText, loaderFullScreen} = store.loaderState;\r\n const {lookOpened, lookOverlayOpened} = store.lookState;\r\n return {\r\n activeTheme,\r\n visualizersLoaded,\r\n loaderOpened,\r\n loaderTitle,\r\n loaderText,\r\n loaderFullScreen,\r\n lookOpened,\r\n lookOverlayOpened,\r\n };\r\n};\r\n\r\nexport default connect(mapStateToProps, {})(LoaderView);\r\n\r\nexport function loaderEnable(loaderText = \"loader.defaultText\", loaderTitle = \"loader.defaultTitle\") {\r\n //null value is passed, and not defaulted with the above, so the below 2 lines handle if null or other falsey value is passed\r\n loaderText = loaderText || \"loader.defaultText\";\r\n loaderTitle = loaderTitle || \"loader.defaultTitle\";\r\n store.dispatch(showLoading());\r\n store.dispatch(toggleLoader(true, loaderText, loaderTitle));\r\n}\r\n\r\nexport function loaderDisable() {\r\n store.dispatch(hideLoading());\r\n store.dispatch(toggleLoader(false));\r\n}\r\n","import groupBy from \"lodash/groupBy\";\r\nimport isEqual from \"lodash/isEqual\";\r\n\r\nimport {getFilterGroupValue, getFilterGroupValues, s3FilterImagePath} from \"../../../misc/utils\";\r\nimport {getCurrentLayout, getCurrentRoomType} from \"../../appLayout\";\r\nimport {\r\n ALL_CONTEXT_MENU,\r\n CONTEXT_MENU_BATHTUB_BUTTONS,\r\n CONTEXT_MENU_SHOWER_ALL,\r\n CONTEXT_MENU_SHOWER_OTHER,\r\n CONTEXT_MENU_SPLIT_WALL,\r\n CONTEXT_MENU_VANITY_BUTTONS,\r\n POSSIBLE_ONE_POSITION,\r\n VANITY_TYPES,\r\n LOOK_ROOM_TYPES,\r\n ALL_CONTEXT_MENU_KITCHEN,\r\n CONTEXT_MENU_KITCHEN_CENTER_ISLAND,\r\n CONTEXT_MENU_KITCHEN_COUNTERTOPS,\r\n CONTEXT_MENU_VANITY_ONLY, CONTEXT_MENU_SHOWER_ACCESSORIES, METADATA\r\n} from \"../core/constants\";\r\nimport {getCartItemObject, getFeatureIsLocked} from \"../../../misc/helpers\";\r\nimport {getBundledFeatures, hardCodelyRemovedClicking} from \"./lookFunctions2\";\r\nimport {isVisibleForNavigation} from \"../../../misc/displayLogic\";\r\nimport {allowCheckForCollection} from \"../grohe/groheNavigation/groheFunctions\";\r\nimport {CART_ITEM_ADDED_BY} from \"../../shoppingCart/cartItemInterface\";\r\nimport {getCommonVisualizerType, IS_PRODUCT_JOURNEY, IS_QKB_UI} from \"../../../config\";\r\nimport {GROHE_CONFIG} from \"../grohe/groheConfig\";\r\nimport {addLayoutHistory} from \"../../../actions/actionFunctions\";\r\nimport store from \"../../../store\";\r\nimport {getExistingWizardForGroups} from \"./lookMain/lookWizard/lookWizardFunctions\";\r\nimport {getColorFilterValue} from \"../../../misc/filtersFunctions\";\r\nimport {getFeatureCropCoors} from \"../../../misc/metaDataFunctions\";\r\n\r\n\r\n/**\r\n * Checks available color options for reature\r\n * @param lookActiveFeature {object}\r\n * @param filterGroups {array}\r\n * @param returnAllFeatures {boolean}\r\n * @param fromNavItemOptions {array}\r\n * @returns {array} array of objects\r\n */\r\nexport const getFeatureOptions = (lookActiveFeature, filterGroups, returnAllFeatures = false, fromNavItemOptions = null) => {\r\n if (!lookActiveFeature) {\r\n return null\r\n }\r\n\r\n const colorFilterGroup = filterGroups.find(group => group.name === \"Color\");\r\n\r\n if (!colorFilterGroup) {\r\n return null\r\n }\r\n\r\n const activeFeatureValues = getFilterGroupValues(lookActiveFeature, colorFilterGroup);\r\n\r\n // console.log(\"activeFeatureValues\", activeFeatureValues);\r\n\r\n if (!Array.isArray(activeFeatureValues) || !activeFeatureValues.length) {\r\n return null\r\n }\r\n\r\n const parent = lookActiveFeature.getParent();\r\n const activeFeatureValue = getFilterGroupValue(activeFeatureValues[0], colorFilterGroup);\r\n\r\n let optionFeatures = activeFeatureValue ? [{\r\n feature: lookActiveFeature,\r\n colorValue: activeFeatureValue\r\n }] : [];\r\n\r\n if (fromNavItemOptions) {\r\n // console.log(\"optionFeatures\", optionFeatures);\r\n return activeFeatureValue && fromNavItemOptions.some(option => option.colorValue.id === activeFeatureValue.id)\r\n ? fromNavItemOptions\r\n : [...optionFeatures, ...fromNavItemOptions]\r\n }\r\n\r\n const layout = getCurrentLayout();\r\n let navItems;\r\n if (returnAllFeatures) {\r\n const layout = getCurrentLayout();\r\n const forSpecificLayout = lookActiveFeature.metaData[\"RoomLayout\"] ? lookActiveFeature.metaData[\"RoomLayout\"][0] : null;\r\n if (forSpecificLayout && (+(forSpecificLayout.replace(\"Layout\", \"\")) !== layout.type)) {\r\n navItems = parent.getFeaturesForNavigationFrom({\r\n returnAllFeatures,\r\n forSpecificLayout: lookActiveFeature.metaData[\"RoomLayout\"] ? lookActiveFeature.metaData[\"RoomLayout\"][0] : null,\r\n forSpecificScene: lookActiveFeature.metaData[\"RoomScene\"] ? lookActiveFeature.metaData[\"RoomScene\"][0] : null\r\n })\r\n } else {\r\n navItems = layout.designNavigationItems({part: parent}, {}, \"\", lookActiveFeature, false)\r\n }\r\n } else {\r\n navItems = layout.designNavigationItems({part: parent}, {}, \"\", lookActiveFeature, false)\r\n }\r\n\r\n optionFeatures = getOptionsFromNavItemsForFeature(lookActiveFeature, navItems, filterGroups, optionFeatures);\r\n return optionFeatures\r\n};\r\n\r\nexport const getOptionsFromNavItemsForFeature = (lookActiveFeature, navItems, filterGroups, optionFeatures = []) => {\r\n const activeFeatureCollectionName = lookActiveFeature.getCollectionName(filterGroups);\r\n const matchingOptionsName = lookActiveFeature.getMatchingOptionsName();\r\n const matchingFeatureProperty = lookActiveFeature.useMatchingFeatureReplacement || \"MatchingFeature\";\r\n\r\n for (let i = 0; i < navItems.length; i++) {\r\n const checkFeature = navItems[i].part || navItems[i];\r\n if (checkFeature.dbFeature.id === lookActiveFeature.dbFeature.id) {\r\n continue\r\n }\r\n if (checkFeature.getMatchingOptionsName() !== matchingOptionsName) {\r\n continue\r\n }\r\n // console.log(\"checkFeature\", checkFeature);\r\n const filterValue = getColorFilterValue(checkFeature, filterGroups);\r\n if (!filterValue) {\r\n continue\r\n }\r\n if (lookActiveFeature.metaData[matchingFeatureProperty] && !isEqual(lookActiveFeature.metaData[matchingFeatureProperty], checkFeature.metaData[matchingFeatureProperty])) {\r\n continue\r\n }\r\n if (document.kvConfig.visualizerType === \"bvLook\") {\r\n if (allowCheckForCollection(checkFeature) && (checkFeature.getCollectionName(filterGroups) !== activeFeatureCollectionName)) {\r\n continue\r\n }\r\n if (lookActiveFeature.partId !== \"vanity_sink\" && (lookActiveFeature.dbFeature.lixilProductSubCategory !== checkFeature.dbFeature.lixilProductSubCategory)) {\r\n continue\r\n }\r\n if (lookActiveFeature.partId === \"vanity_cabinet\" && lookActiveFeature.dbFeature.metaData[\"VanitySize\"]\r\n && !isEqual(lookActiveFeature.metaData[\"VanitySize\"], checkFeature.metaData[\"VanitySize\"])) {\r\n continue\r\n }\r\n }\r\n if (optionFeatures.every(optFeature => optFeature.colorValue.id !== filterValue.id)) {\r\n optionFeatures.push({\r\n feature: checkFeature,\r\n colorValue: filterValue\r\n })\r\n } else if (lookActiveFeature.partId === \"vanity_sink\" && (document.kvConfig.visualizerType === \"bvLook\")) {\r\n const alreadyAddedOptionIndex = optionFeatures.findIndex(optFeature => optFeature.colorValue.id === filterValue.id);\r\n if (alreadyAddedOptionIndex > -1\r\n && !isEqual(optionFeatures[alreadyAddedOptionIndex].feature.metaData[\"MountHoles\"], lookActiveFeature.metaData[\"MountHoles\"])\r\n && isEqual(checkFeature.metaData[\"MountHoles\"], lookActiveFeature.metaData[\"MountHoles\"])) {\r\n optionFeatures.splice(alreadyAddedOptionIndex, 1, {\r\n feature: checkFeature,\r\n colorValue: filterValue\r\n })\r\n }\r\n }\r\n }\r\n return optionFeatures\r\n}\r\n\r\n\r\n/**\r\n * returns matching color feature depending on the feature passed\r\n * @param activeFeature {featureInterface}\r\n * @param notMatchingFeature {featureInterface}\r\n * @param filterGroups {array}\r\n * @returns featureFound {featureInterface}\r\n */\r\nexport const getMatchingColorFeature = (activeFeature, notMatchingFeature, filterGroups) => {\r\n if (activeFeature) { //just in case\r\n const colorFilterValue = getColorFilterValue(activeFeature, filterGroups);\r\n const currentCollectionName = notMatchingFeature.getCollectionName(filterGroups);\r\n const currentFeatureName = activeFeature.getSplittedFeatureName();\r\n const parent = notMatchingFeature.getParent();\r\n const navItems = parent.navigationSubItems({}, \"\", notMatchingFeature);\r\n\r\n let featureFound = null;\r\n let featureFoundItems = navItems.filter((navItem) => { // 2) match by color filter\r\n const colorValue = getColorFilterValue(navItem.part, filterGroups);\r\n return !!(colorValue && colorFilterValue && (\r\n (colorValue.id === colorFilterValue.id)\r\n || [colorValue,colorFilterValue].every(filterValue => filterValue.displayText && filterValue.displayText.toLowerCase().includes(\"chrome\"))\r\n ));\r\n });\r\n if (featureFoundItems.length) {\r\n featureFound =\r\n featureFoundItems.find(navItem => navItem.part.getSplittedFeatureName() === currentFeatureName) // 2) match by sku\r\n || featureFoundItems.find(navItem => navItem.part.getCollectionName(filterGroups) === currentCollectionName) // 3) match by collection\r\n || featureFoundItems[0]; // 4) return at least something\r\n } else {\r\n featureFound = navItems.find(navItem => {\r\n return navItem.part.getSplittedFeatureName() === currentFeatureName // 2) match by sku\r\n });\r\n }\r\n return featureFound\r\n }\r\n return null\r\n};\r\n\r\n/**\r\n * returns same color features but different feature groups\r\n * @param lookActiveFeature {featureInterface}\r\n * @param filterGroups {array}\r\n * @param sameColorOnly {boolean}\r\n * @returns sameColorFeatures {array}\r\n */\r\nexport const getSameColorFeatures = (lookActiveFeature, filterGroups, sameColorOnly = true) => {\r\n let sameColorFeatures = [];\r\n let differentColorFeatures = [];\r\n const doNotShowStylePopupFor = [\"bathtub_body\", \"vanity_cabinet\", \"vanity_middle\", \"shower_pan_combo\", \"replacement_tub\"];\r\n const isAsBathroom = getCurrentRoomType() === LOOK_ROOM_TYPES.as;\r\n\r\n if (lookActiveFeature && (doNotShowStylePopupFor.includes(lookActiveFeature.partId)) && isAsBathroom) {\r\n return {sameColorFeatures, differentColorFeatures}\r\n }\r\n\r\n const featureGroups = getLookList(true);\r\n if (featureGroups) {\r\n const activeFilterGroupValue = getColorFilterValue(lookActiveFeature, filterGroups);\r\n featureGroups.forEach(parentObject => {\r\n if (activeFilterGroupValue && parentObject.cartFeature && (parentObject.cartFeature.partId !== lookActiveFeature.partId)) {\r\n const colorValue = getColorFilterValue(parentObject.cartFeature, filterGroups);\r\n if (colorValue && (colorValue.id !== activeFilterGroupValue.id)) {\r\n const sameFeatureAsActive = getMatchingColorFeature(lookActiveFeature, parentObject.cartFeature, filterGroups);\r\n const bathroomShowerPanExclude = isAsBathroom\r\n && (sameFeatureAsActive && sameFeatureAsActive.part.partId === \"shower_pan_combo\")\r\n && sameFeatureAsActive.part.getParent().getParent().layout.parts[\"Shower Tub Combo\"]\r\n && sameFeatureAsActive.part.getParent().getParent().layout.parts[\"Shower Tub Combo\"].showerTubComboIsActive;\r\n if (sameFeatureAsActive && !bathroomShowerPanExclude) {\r\n sameColorFeatures.push(sameFeatureAsActive.part);\r\n differentColorFeatures.push(parentObject.cartFeature);\r\n } else if (IS_PRODUCT_JOURNEY && !sameColorOnly) {\r\n differentColorFeatures.push(parentObject.cartFeature);\r\n }\r\n } else if (IS_PRODUCT_JOURNEY && !sameColorOnly) {\r\n differentColorFeatures.push(parentObject.cartFeature);\r\n }\r\n }\r\n })\r\n }\r\n // console.log(\"sameColorFeatures\", sameColorFeatures);\r\n // console.log(\"differentColorFeatures\", differentColorFeatures);\r\n return {sameColorFeatures, differentColorFeatures}\r\n};\r\n\r\n/**\r\n * returns same color features but different feature groups\r\n * @param lookActiveFeature {featureInterface}\r\n * @param fromArray {array}\r\n * @param filterGroups {array}\r\n * @returns displayFeatures {array}\r\n */\r\nexport const getDisplaySameColorGroups = (lookActiveFeature, fromArray, filterGroups) => {\r\n\r\n if (!lookActiveFeature || !fromArray.length || !filterGroups) {\r\n return []\r\n }\r\n\r\n // const activeFilterGroupValue = getColorFilterValue(lookActiveFeature, filterGroups);\r\n const activeCollectionFilterGroupValue = lookActiveFeature.getCollectionName(filterGroups);\r\n\r\n let displayFeatures = [];\r\n let otherGroup = {\r\n colName: \"other\",\r\n features: []\r\n }\r\n let currentColGroup = {\r\n colName: activeCollectionFilterGroupValue,\r\n features: []\r\n }\r\n if (activeCollectionFilterGroupValue) {\r\n displayFeatures.push(currentColGroup)\r\n }\r\n displayFeatures.push(otherGroup);\r\n\r\n\r\n fromArray.forEach(feature => {\r\n if (displayFeatures.some(sameColorObject => sameColorObject.features.some(addedFeature => addedFeature.partId === feature.partId))) {\r\n return false\r\n }\r\n\r\n const currentCollectionValue = feature.getCollectionName(filterGroups);\r\n\r\n if (currentCollectionValue && activeCollectionFilterGroupValue && (currentCollectionValue === activeCollectionFilterGroupValue)) {\r\n currentColGroup.features.push(feature)\r\n } else {\r\n otherGroup.features.push(feature)\r\n }\r\n });\r\n displayFeatures = displayFeatures\r\n .filter(sameColorObject => sameColorObject.features.length)\r\n .sort((a,b) => (a.colName === \"other\") - (b.colName === \"other\"));\r\n\r\n // console.log(\"displayFeatures\", displayFeatures);\r\n\r\n return displayFeatures\r\n};\r\n\r\n\r\n/**\r\n * returns a list needed for integration\r\n * @param checkFeature {object}\r\n * @param filterGroups {array}\r\n * @returns {array}\r\n */\r\nexport const getSimilarItemsList = (checkFeature, filterGroups) => {\r\n if (!checkFeature) {\r\n return []\r\n }\r\n const featureGroups = getLookList();\r\n if (!featureGroups) {\r\n return []\r\n }\r\n let matchingFeatures = [];\r\n const activeFilterGroupValue = getColorFilterValue(checkFeature, filterGroups);\r\n const collectionName = checkFeature.getCollectionName(filterGroups);\r\n featureGroups.forEach(parentObject => {\r\n if (parentObject.partId === checkFeature.partId) {\r\n return\r\n }\r\n const navItems = parentObject.featureGroup.navigationSubItems({}, \"\", checkFeature)\r\n const sameColorItems = navItems.filter((navItem) => { // 2) match by color filter\r\n const colorValue = getColorFilterValue(navItem.part, filterGroups);\r\n return colorValue && activeFilterGroupValue && (colorValue.id === activeFilterGroupValue.id)\r\n });\r\n if (sameColorItems.length) {\r\n const sameCollectionFeature = sameColorItems.find(navItem => {\r\n return navItem.part.getCollectionName(filterGroups) === collectionName\r\n });\r\n matchingFeatures.push(sameCollectionFeature ? sameCollectionFeature.part : sameColorItems[0].part);\r\n } else if (parentObject.cartFeature) {\r\n // tubs, toilets and shower pans? for now let's push all\r\n matchingFeatures.push(parentObject.cartFeature);\r\n }\r\n })\r\n return matchingFeatures\r\n}\r\n\r\nconst setLayerPosition = (position, featureGroup) => {\r\n const sameFeature = featureGroup.getMatchingPositionFeature(position, featureGroup.activeFeature);\r\n // console.log(\"sameFeature\", sameFeature);\r\n if (sameFeature) {\r\n featureGroup.activeFeature = sameFeature;\r\n }\r\n featureGroup.layerPositions[position] = sameFeature || null; // if no feature found - erase previous\r\n}\r\n\r\nconst updateMirrorAndWallsCrop = (feature) => {\r\n const layout = getCurrentLayout();\r\n const vanityParent = layout.parts[\"Vanity\"];\r\n if (!vanityParent || !vanityParent.mirror || !vanityParent.relatedItems || !vanityParent.relatedItems.some(relItem => relItem.partId === feature.partId)) {\r\n return\r\n }\r\n vanityParent.mirror.setLayers(layout);\r\n const wallsParent = layout.parts[\"Walls\"];\r\n if (wallsParent && wallsParent.relatedItems) {\r\n wallsParent.relatedItems.forEach(wallFeatureGroup => {\r\n if (wallFeatureGroup.hasAdditionalParts) {\r\n wallFeatureGroup.checkIfFeaturePartIsMatching(); // update crops after mirror change\r\n }\r\n })\r\n }\r\n}\r\n\r\n/**\r\n * Updates Vanity related items sides\r\n * @param feature {featureInterface}\r\n * @param oldActiveFeature {featureInterface}\r\n */\r\nexport const updateVanitySides = (feature, oldActiveFeature = null) => {\r\n const layout = getCurrentLayout();\r\n const currentSideMeta = oldActiveFeature ? oldActiveFeature.metaData.layerPosition : null;\r\n const nextSideMeta = feature.metaData.layerPosition;\r\n const vanityParent = layout.parts[\"Vanity\"];\r\n if (!vanityParent || !vanityParent.relatedItems || !vanityParent.relatedItems.some(relItem => relItem.partId === feature.partId)\r\n || feature.partId === \"vanity_mirror\") { // vanity mirror is independent! it has Vanity Size and mirror shape meta\r\n return\r\n }\r\n\r\n if (feature.partId === \"vanity_cabinet\") {\r\n const nextVanityIsDouble = vanityParent.isDoubleVanity(feature);\r\n vanityParent.relatedItems.forEach(featureGroup => {\r\n if (feature.partId === featureGroup.partId || featureGroup.partId === \"vanity_mirror\") {\r\n // feature is already applied, no need to do anything\r\n return\r\n }\r\n if (featureGroup.layerPositions) {\r\n const isCountertopOrBacksplash = featureGroup.partId === \"vanity_countertop\" || featureGroup.partId === \"vanity_backsplash\";\r\n\r\n Object.keys(featureGroup.layerPositions).forEach(position => {\r\n if (isCountertopOrBacksplash) {\r\n if (position === feature.metaData.layerPosition || (position !== \"C\" && feature.metaData.layerPosition !== \"C\")) {\r\n setLayerPosition(position, featureGroup);\r\n } else {\r\n featureGroup.layerPositions[position] = null; // erase sibling positions\r\n }\r\n } else {\r\n if (position === \"C\" && (nextVanityIsDouble && feature.metaData.layerPosition === \"C\"\r\n || (!nextVanityIsDouble && nextSideMeta !== \"C\"))) {\r\n featureGroup.layerPositions[position] = null; // erase sibling positions\r\n } else if (position !== \"C\" && !nextVanityIsDouble && feature.metaData.layerPosition === \"C\") {\r\n featureGroup.layerPositions[position] = null; // erase sibling positions\r\n } else {\r\n setLayerPosition(position, featureGroup);\r\n }\r\n }\r\n })\r\n }\r\n })\r\n return\r\n }\r\n\r\n if (nextSideMeta === currentSideMeta) {\r\n return\r\n }\r\n if (!((currentSideMeta !== \"C\" && nextSideMeta === \"C\") || (nextSideMeta !== \"C\" && currentSideMeta === \"C\"))) {\r\n return // no need to change anything\r\n }\r\n\r\n vanityParent.relatedItems.forEach(featureGroup => {\r\n if (feature.partId === featureGroup.partId) {\r\n // feature is already applied, no need to do anything\r\n return\r\n }\r\n if (featureGroup.layerPositions) {\r\n Object.keys(featureGroup.layerPositions).forEach(position => {\r\n if ((position !== \"C\" && feature.metaData.layerPosition === \"C\") || (feature.metaData.layerPosition !== \"C\" && position === \"C\")) {\r\n if (featureGroup.getParent().vanity_type === \"vanity_cabinet\"\r\n && (featureGroup.partId === \"vanity_cabinet\")\r\n && (feature.metaData.layerPosition !== \"C\" && position === \"C\")\r\n && (featureGroup.layerPositions[\"C\"] && !featureGroup.layerPositions[\"L\"] && !featureGroup.layerPositions[\"R\"])\r\n && featureGroup.layerPositions[\"C\"].metaData[\"MatchingFeature\"]\r\n && featureGroup.layerPositions[\"C\"].metaData[\"MatchingFeature\"].includes(METADATA.NO)\r\n && featureGroup.layerPositions[\"C\"].metaData[\"VanityWidth\"]\r\n && featureGroup.layerPositions[\"C\"].metaData[\"VanityWidth\"] === 64) {\r\n return; // do not erase 64 vanity if we are trying to apply L sink, it can be used with 64 vanity size\r\n }\r\n featureGroup.layerPositions[position] = null; // erase sibling positions\r\n } else {\r\n if (nextSideMeta === position && featureGroup.layerPositions[position]) {\r\n // feature is already applied, no need to search for it\r\n return\r\n }\r\n setLayerPosition(position, featureGroup);\r\n }\r\n })\r\n }\r\n })\r\n}\r\n\r\n/**\r\n * Simple navigation feature click\r\n * @param feature {object}\r\n * @param updateLocalStorage {boolean}\r\n * @param forceClick {boolean}\r\n * @param updateVanityPositions {boolean}\r\n // * @param fromUrl {boolean}\r\n * @returns {boolean}\r\n */\r\nexport const navFeatureCLick = (feature, updateLocalStorage = true, forceClick = false, updateVanityPositions = true) => {\r\n const parent = feature.getParent();\r\n const featureIsLocked = getFeatureIsLocked(feature);\r\n if (featureIsLocked && !forceClick) {\r\n feature.handleClick(forceClick); // update active locked feature or active not in visualizer feature\r\n return false\r\n }\r\n\r\n const currentActiveFeature = parent.activeFeature;\r\n const asBathroom = getCurrentRoomType() === LOOK_ROOM_TYPES.as;\r\n if (asBathroom) {\r\n if (feature.partId === \"vanity_sink\" && (document.kvConfig.visualizerType === \"bvLook\")) {\r\n feature.handleClick(forceClick, true);\r\n } else if (feature.partId === \"vanity_cabinet\" && (document.kvConfig.visualizerType === \"bvLook\") && !updateVanityPositions) {\r\n feature.handleClick(forceClick, false); // do not click again on the sink, we came from the sink click\r\n } else {\r\n feature.handleClick(forceClick); // first set custom types (for vanity)\r\n }\r\n }\r\n if (!feature.notAvailableInVisualizer && parent.layerPositions && feature.metaData.layerPosition) { // prevent clicking on disabled item if same sku is opened for enabled feature\r\n // if (fromUrl && Object.keys(parent.layerPositions).some(layerPosition => !parent.layerPositions[layerPosition])) {\r\n // return false\r\n // }\r\n Object.keys(parent.layerPositions).forEach(position => {\r\n if (position === feature.metaData.layerPosition) {\r\n parent.layerPositions[position] = feature\r\n } else if ((position !== \"C\" && feature.metaData.layerPosition === \"C\") || (feature.metaData.layerPosition !== \"C\" && position === \"C\")) {\r\n parent.layerPositions[position] = null; // erase sibling positions\r\n } else {\r\n const sameFeature = parent.getMatchingPositionFeature(position, feature, null, parent.getActiveFeatureConditions(feature));\r\n // console.log(\"sameFeature\", sameFeature);\r\n parent.layerPositions[position] = sameFeature || null; // if no feature found - erase previous\r\n }\r\n });\r\n }\r\n if (parent.disabled) {\r\n parent.disabled = false;\r\n parent.disabledClick();\r\n }\r\n\r\n if (feature.partId === \"vanity_cabinet\" && (document.kvConfig.visualizerType === \"bvLook\") && !updateVanityPositions) {\r\n feature.handleClick(forceClick, false); // do not click again on the sink, we came from the sink click\r\n } else {\r\n feature.handleClick(forceClick); // update active feature or active not in visualizer feature\r\n }\r\n\r\n if (updateLocalStorage) {\r\n const layout = getCurrentLayout();\r\n store.dispatch(addLayoutHistory(layout.getActiveFeaturesAsObject(false, false, true)))\r\n }\r\n if (parent.layerPositions && feature.metaData.layerPosition && updateVanityPositions && !feature.notAvailableInVisualizer) {\r\n updateVanitySides(feature, currentActiveFeature);\r\n updateMirrorAndWallsCrop(feature);\r\n }\r\n}\r\n\r\n/**\r\n * For delete buttons\r\n * @param feature {object}\r\n * @param featureParent {object}\r\n * @param checkDisabledOnly {boolean}\r\n * @returns {boolean}\r\n */\r\nexport const checkIfFeatureDisabled = (feature, featureParent, checkDisabledOnly = false) => {\r\n if (!featureParent) {\r\n featureParent = feature.getParent();\r\n }\r\n const isDisabled = featureParent.layerPositions\r\n ? Object.keys(featureParent.layerPositions).every(pos => !featureParent.layerPositions[pos])\r\n : featureParent.disabled;\r\n return checkDisabledOnly ? isDisabled : isDisabled && featureParent.canBeDisabled\r\n}\r\n\r\n/**\r\n * Returns active features list for\r\n * @param withLayerPositions {boolean} return all positions features\r\n * @param withDisabled {boolean} return feature positions even disabled\r\n * @param showAllGroups {boolean} returns all layout feature groups\r\n * @param showAllQtCategories {boolean} returns quotingTool featureGroups\r\n * @param displayInMenu {boolean} whether to display in look menu\r\n * @returns {array} array of objects\r\n */\r\nexport const getLookList = (withLayerPositions = false,\r\n withDisabled = false,\r\n showAllGroups = false,\r\n showAllQtCategories = false,\r\n displayInMenu = false) => {\r\n const layout = getCurrentLayout();\r\n\r\n let featureGroups = [];\r\n\r\n if (showAllGroups) {\r\n layout.getFeatures().forEach(parent => {\r\n parent.relatedItems.forEach(featureGroup => {\r\n if (!featureGroup.activeFeature) {\r\n featureGroup.setDefault(layout, true);\r\n }\r\n if (!featureGroup.activeFeature) {\r\n return\r\n }\r\n featureGroups.push({\r\n selectionGroup: parent.partName,\r\n partId: featureGroup.partId,\r\n quantity: 0,\r\n cartFeature: featureGroup.activeFeature,\r\n featureGroup,\r\n })\r\n })\r\n });\r\n return featureGroups\r\n }\r\n\r\n if (((document.kvConfig.toolVersion !== 6 || showAllQtCategories) && layout.qtCategories)) {\r\n layout.qtCategories.forEach((qtCategory) => {\r\n qtCategory.defaultSubParts.forEach(subPart => {\r\n if (document.kvConfig.visualizerType === \"kvScene\") {\r\n if ((subPart.part.partId === \"center_island_edge\" && layout.type === 3)\r\n || (subPart.part.partId === \"crown_molding\" && (layout.type !== 1 && layout.type !== 4))) {\r\n return\r\n }\r\n }\r\n if (!featureGroups.some(parentObject => parentObject.partId === subPart.part.partId)) {\r\n featureGroups.push({\r\n selectionGroup: subPart.part.getParent().partName,\r\n partId: subPart.part.partId,\r\n quantity: 0,\r\n cartFeature: subPart.part.activeFeature, // it can be null here! it's ok since we need to show featureGroups from another layouts (for shop)\r\n featureGroup: subPart.part\r\n })\r\n }\r\n })\r\n })\r\n return featureGroups\r\n }\r\n\r\n let featureGroupsObjects = layout.getActiveFeatures(false, withLayerPositions, withDisabled);\r\n // console.log(\"parentGroups before wizard clean\", featureGroupsObjects);\r\n\r\n if (displayInMenu) {\r\n const {wizardList} = store.getState().wizardState;\r\n if (Array.isArray(wizardList) && wizardList.length) {\r\n wizardList.forEach(wizardItem => {\r\n if (wizardItem.hideItems && Array.isArray(wizardItem.wizardGroups) && wizardItem.wizardGroups.length) {\r\n featureGroupsObjects = featureGroupsObjects.filter(parentObject => {\r\n return wizardItem.wizardGroups.every(wizardGroup => {\r\n return (parentObject.featureGroup.dbName || parentObject.featureGroup.partName) !== wizardGroup.groupName\r\n })\r\n })\r\n }\r\n })\r\n }\r\n }\r\n\r\n const parentGroups = groupBy(featureGroupsObjects, 'selectionGroup');\r\n // console.log(\"parentGroups\", parentGroups);\r\n\r\n if (!Object.keys(parentGroups).length) {\r\n return null\r\n }\r\n\r\n const visType = getCommonVisualizerType();\r\n const sortByParents = visType === \"bathroom\"\r\n ? [\"Vanity\", \"Shower\", \"Shower Tub Combo\", \"Shower Accessories\", \"Bathtub\", \"Toilet\", \"Floor\", \"Walls\", \"Window\"]\r\n : visType === \"kitchen\"\r\n ? [\"Countertop\", \"CenterIsland\", \"Cabinet\", \"Appliances\", \"Walls\", \"Floor\"]\r\n : Object.keys(parentGroups);\r\n\r\n sortByParents.forEach(parentKey => {\r\n featureGroups = [...featureGroups, ...(parentGroups[parentKey] || [])]\r\n });\r\n\r\n if (getCurrentRoomType(layout) === LOOK_ROOM_TYPES.as) {\r\n const vanityParent = layout.parts[\"Vanity\"];\r\n featureGroups = featureGroups.filter(parentObject => {\r\n if (parentObject.partId === \"vanity_ws_towel_bar\" && vanityParent.vanity_type !== VANITY_TYPES.vanity_washstand) {\r\n return false\r\n } else if ((parentObject.partId === \"vanity_middle\" || parentObject.partId === \"vanity_legs\") && vanityParent.vanity_type !== VANITY_TYPES.vanity_cabinet) {\r\n return false\r\n }\r\n return !(vanityParent && Object.keys(VANITY_TYPES).includes(parentObject.partId) && vanityParent.vanity_type !== parentObject.partId);\r\n })\r\n }\r\n // console.log(\"featureGroups\", featureGroups);\r\n\r\n // simple hardcoded sort\r\n return featureGroups.filter(parentObject => parentObject.cartFeature)\r\n}\r\n\r\n/**\r\n * Returns look navigation list height\r\n * @param lmFeatureParent {object}\r\n * @param lookViewType {number}\r\n * @param lookParentKeys {array}\r\n * @returns {number}\r\n */\r\nexport const getLookListHeight = (lmFeatureParent, lookViewType, lookParentKeys) => {\r\n const opened = lookParentKeys.includes(lmFeatureParent.partId);\r\n // const featuresLength = parentGroups[parentKey].length;\r\n let featuresLength = 1;\r\n if (lmFeatureParent.layerPositions) {\r\n if (POSSIBLE_ONE_POSITION.includes(lmFeatureParent.partId)) {\r\n featuresLength = 0;\r\n Object.keys(lmFeatureParent.layerPositions).forEach(position => {\r\n if (lmFeatureParent.getMatchingPositionFeature(position)) {\r\n featuresLength += 1;\r\n }\r\n });\r\n } else {\r\n featuresLength = Object.keys(lmFeatureParent.layerPositions).length\r\n }\r\n }\r\n let listHeight = 0;\r\n const styleNotificationIsVisible = getStyleAlertIsVisibleForGroup(lmFeatureParent);\r\n if (opened) {\r\n switch (lookViewType) {\r\n case 1:\r\n default:\r\n listHeight = 104 * featuresLength; // feature height 88 + feature margin 16\r\n break;\r\n case 2:\r\n listHeight = (172 + 22) * Math.ceil(featuresLength / 2); // feature height 156 + feature margin 16 + featureName 22\r\n break;\r\n case 3:\r\n listHeight = (280 + 22 + 16) * featuresLength; // feature height 280 + feature margin 16 + featureName 22\r\n break;\r\n }\r\n if (styleNotificationIsVisible) {\r\n listHeight += 96 // 80 + 8 + 8 margins\r\n }\r\n }\r\n return listHeight\r\n}\r\n\r\nconst disallowedSkus = [\"athtub\"];\r\n\r\n/**\r\n * @param feature {featureInterface}\r\n * @returns {boolean}\r\n */\r\nexport const checkIfFeatureCanBeAddedToTheCart = (feature) => {\r\n return (document.kvConfig.visualizerOnly || isVisibleForNavigation(feature, true)) && !disallowedSkus.some(sku => feature.dbFeature.sharedFeatureName.includes(sku))\r\n}\r\n\r\n/**\r\n * Creates cart items list depending on quotingTool features\r\n * @param qtActiveCategory {string} current active quote category name\r\n * @param loadByTheDefault {object} loadByTheDefault object from localstorage\r\n * @returns {array} array of cart items\r\n */\r\nexport const createCartList = (qtActiveCategory, loadByTheDefault = null) => {\r\n const featureGroups = getLookList(true);\r\n let cartItems = [];\r\n if (featureGroups && featureGroups.length) {\r\n featureGroups.forEach(featureGroup => {\r\n if ((getCurrentRoomType() === LOOK_ROOM_TYPES.as) && featureGroup.featureGroup.hideLayerCondition && featureGroup.featureGroup.hideLayerCondition()) {\r\n return\r\n }\r\n const existingCartItem = cartItems.find(cItem => {\r\n if (!featureGroup.cartFeature) {\r\n return null\r\n }\r\n return (cItem.partId === featureGroup.cartFeature.partId)\r\n && cItem.cartFeature.dbFeature.sharedFeatureName && featureGroup.cartFeature.dbFeature.sharedFeatureName\r\n && (cItem.cartFeature.dbFeature.sharedFeatureName === featureGroup.cartFeature.dbFeature.sharedFeatureName)\r\n });\r\n let quantity = 1;\r\n let loadByTheDefaultCItem = null;\r\n if (loadByTheDefault && loadByTheDefault.cartState && Array.isArray(loadByTheDefault.cartState.cartItems)){\r\n loadByTheDefaultCItem = loadByTheDefault.cartState.cartItems.find(cItem => {\r\n const foundFeature = featureGroup.featureGroup.getFeatureById(cItem.cartFeature.dbFeatureId, true)\r\n if (foundFeature) {\r\n return foundFeature.dbFeature.sharedFeatureName && featureGroup.cartFeature.dbFeature.sharedFeatureName\r\n && (foundFeature.dbFeature.sharedFeatureName === featureGroup.cartFeature.dbFeature.sharedFeatureName)\r\n }\r\n return cItem.cartFeature.dbFeatureId === featureGroup.cartFeature.dbFeature.id\r\n })\r\n if (loadByTheDefaultCItem) {\r\n quantity = loadByTheDefaultCItem.quantity;\r\n } else {\r\n quantity = 0\r\n }\r\n }\r\n\r\n if (existingCartItem && quantity) {\r\n if (!loadByTheDefaultCItem) {\r\n existingCartItem.quantity += quantity;\r\n }\r\n } else if (featureGroup.cartFeature && checkIfFeatureCanBeAddedToTheCart(featureGroup.cartFeature) && quantity) {\r\n const newCartItem = getCartItemObject(featureGroup.cartFeature, quantity, qtActiveCategory);\r\n newCartItem.addedBy = CART_ITEM_ADDED_BY.auto;\r\n cartItems.push(newCartItem);\r\n const relatedFeatures = getBundledFeatures(featureGroup.cartFeature);\r\n relatedFeatures.forEach((relatedFeature) => {\r\n let relatedItemQuantity = 1;\r\n if (loadByTheDefault && loadByTheDefault.cartState && Array.isArray(loadByTheDefault.cartState.cartItems)) {\r\n const alreadyAddedRelatedFeature = loadByTheDefault.cartState.cartItems.find(cartItem => {\r\n return cartItem.cartFeature.dbFeatureId === relatedFeature.dbFeature.id\r\n });\r\n if (alreadyAddedRelatedFeature) {\r\n relatedItemQuantity = alreadyAddedRelatedFeature.quantity\r\n }\r\n }\r\n const cartItem = getCartItemObject(relatedFeature, relatedItemQuantity, qtActiveCategory);\r\n cartItem.relatedProductParent = featureGroup.cartFeature;\r\n cartItem.addedBy = CART_ITEM_ADDED_BY.auto;\r\n cartItems.push(cartItem);\r\n })\r\n }\r\n })\r\n }\r\n return cartItems\r\n}\r\n\r\n/**\r\n * Returns layer center\r\n * @param coords {object} metadata object // {min_x: 0.2109375, min_y: 1.3685185185185185, max_x: 1.9994791666666667, max_y: 2}\r\n * @param canvasElement {$ElementType} canvas\r\n * @param isMobile {boolean} on mobile we have different menu position\r\n * @returns {object}\r\n */\r\nexport const getLayerCenter = (coords, canvasElement, isMobile = false) => {\r\n if (!coords) {\r\n return null\r\n }\r\n let {clientWidth, clientHeight} = canvasElement;\r\n const COORDS_MAX = 1;\r\n // const openedMenuWidth = 712;\r\n // console.log(\"clientWidth\", clientWidth);\r\n // console.log(\"clientWidth - openedMenuWidth\", openedMenuWidth);\r\n // const threeQuater = clientWidth - (clientWidth / 4);\r\n // const featureViewWidth = (clientWidth - openedMenuWidth) / 2;\r\n let centerXPercentage = ((coords.min_x + ((coords.max_x - coords.min_x) / 2)) * 100) / COORDS_MAX;\r\n const centerYPercentage = ((coords.min_y + ((coords.max_y - coords.min_y) / 2)) * 100) / COORDS_MAX; // 1.5 ⋅ 100 : 2 = 75%\r\n // console.log(\"centerXPercentage\", centerXPercentage);\r\n // let scrollPercentage = 0;\r\n let x = 0;\r\n // if (isMobile) {\r\n //\r\n // const menuWidth = 320;\r\n // const shiftX = clientWidth - (clientWidth * centerXPercentage / 100);\r\n // const containerScrolled = shiftX < menuWidth;\r\n //\r\n // const startZeroPosition = IS_PRODUCT_JOURNEY ? 15 : 13;\r\n //\r\n // scrollPercentage = centerXPercentage < startZeroPosition\r\n // ? 0\r\n // : centerXPercentage > 54\r\n // ? centerXPercentage - ((100 - centerXPercentage) / 3) // 80 + 5 = 85\r\n // // ? centerXPercentage // 80 + 5 = 85\r\n // : centerXPercentage - ((35 - centerXPercentage) - ((centerXPercentage / 100) * (35 - centerXPercentage))) // 1) calculate percent of scroll from 75 2) 61 - 12%;\r\n // if (containerScrolled && (centerXPercentage > 50) && (centerXPercentage < 60)) {\r\n // scrollPercentage = centerXPercentage - ((100 - centerXPercentage) / 5)\r\n // }\r\n // x = (clientWidth * scrollPercentage) / 100;\r\n // } else {\r\n const zoomPercentage = 75;\r\n if (centerXPercentage < zoomPercentage) {\r\n\r\n const openedMenuWidth = IS_PRODUCT_JOURNEY ? 412 : 360;\r\n // const featureViewWidth = IS_PRODUCT_JOURNEY ? clientWidth - openedMenuWidth : (clientWidth - openedMenuWidth - 64); // 64 is sidebar\r\n const featureMinX = (clientWidth * (coords.min_x * 100 / COORDS_MAX)) / 100;\r\n const featureMaxX = (clientWidth * (coords.max_x * 100 / COORDS_MAX)) / 100;\r\n const featureCenter = featureMinX + (featureMaxX - featureMinX) / 2;\r\n // console.log(\"clientWidth\", clientWidth);\r\n // console.log(\"featureViewWidth\", featureViewWidth);\r\n // console.log(\"centerXPercentage\", centerXPercentage);\r\n // console.log(\"centerXPercentage\", centerXPercentage);\r\n // console.log(\"featureMinX\", featureMinX);\r\n // console.log(\"featureMaxX\", featureMaxX);\r\n const gPointPercent = 40; // don't ask me why, just because it is magic number\r\n const shiftX = clientWidth - (clientWidth * centerXPercentage / 100);\r\n if (IS_PRODUCT_JOURNEY && isMobile && (shiftX > GROHE_CONFIG.sidebarWidth.mobile)) {\r\n x = featureCenter - (clientWidth * (gPointPercent - centerXPercentage)) / 100;\r\n } else {\r\n x = featureCenter - (clientWidth * (gPointPercent - centerXPercentage)) / 100 - (openedMenuWidth / 2);\r\n }\r\n } else {\r\n x = clientWidth;\r\n }\r\n // }\r\n // console.log(\"scrollPercentage\", scrollPercentage);\r\n\r\n const y = (clientHeight * centerYPercentage) / 100; // 1920 ⋅ 75 : 100\r\n\r\n // console.log(\"getLayerCenter\", {x, y});\r\n // console.log(\"getLayerCenter\", {x, y, isMobile, featureX: centerXPercentage, clientWidth});\r\n return {x, y, isMobile, featureX: centerXPercentage, clientWidth}\r\n}\r\n\r\n/**\r\n * Returns layer center\r\n * @param coords {object} metadata object // {min_x: 0.2109375, min_y: 1.3685185185185185, max_x: 1.9994791666666667, max_y: 2}\r\n * @param canvasElement {$ElementType} canvas\r\n * @returns {object}\r\n */\r\nexport const getCoordsCenter = (coords, canvasElement) => {\r\n let {clientWidth, clientHeight} = canvasElement;\r\n const COORDS_MAX = 1;\r\n let centerXPercentage = ((coords.min_x + ((coords.max_x - coords.min_x) / 2)) * 100) / COORDS_MAX;\r\n const centerYPercentage = ((coords.min_y + ((coords.max_y - coords.min_y) / 2)) * 100) / COORDS_MAX; // 1.5 ⋅ 100 : 2 = 75%\r\n\r\n const x = (clientWidth * centerXPercentage) / 100;\r\n const y = (clientHeight * centerYPercentage) / 100; // 1920 ⋅ 75 : 100\r\n\r\n // console.log(\"getLayerCenter\", {x, y});\r\n return {x, y}\r\n}\r\n\r\n/**\r\n * Returns layer center\r\n * @returns {object}\r\n */\r\nexport const getCropCoordsCenter = (feature) => {\r\n if (feature.metaData[\"CropCoords\"]) {\r\n const parsedCoords = getFeatureCropCoors(feature);\r\n // const {clientWidth, clientHeight} = canvasElement;\r\n const clientWidth = 1920;\r\n const clientHeight = 1080;\r\n\r\n const changed = {\r\n min_x: parsedCoords[0] / clientWidth,\r\n min_y: parsedCoords[1] / clientHeight,\r\n max_x: parsedCoords[2] / clientWidth,\r\n max_y: parsedCoords[3] / clientHeight,\r\n }\r\n // if (feature.partId) {\r\n // console.log(\"original\", feature.metaData[\"Coords\"]);\r\n // console.log(\"changed\", changed);\r\n // }\r\n return changed\r\n }\r\n return feature.metaData[\"Coords\"]\r\n}\r\n\r\n/**\r\n * Returns bool\r\n * @param lookFeature {object} feature\r\n * @param fromStyleAlertIcon {boolean}\r\n * @returns {array} not matching features\r\n */\r\nexport const getStyleAlertNotMatchingFeatures = (lookFeature, fromStyleAlertIcon = false) => {\r\n let notMatchingFeatures = [];\r\n if (lookFeature) {\r\n const featureGroup = lookFeature.getParent();\r\n\r\n if (fromStyleAlertIcon && !featureGroup.confirmedChange) {\r\n return notMatchingFeatures\r\n }\r\n\r\n const currentFeatureName = lookFeature.getSplittedFeatureName();\r\n // console.log(\"currentFeatureName\", currentFeatureName);\r\n const wallsPartIds = [\"left_wall\", \"front_wall\", \"right_wall\"];\r\n if (wallsPartIds.includes(lookFeature.partId)) {\r\n const layout = getCurrentLayout();\r\n wallsPartIds.forEach(wallPartId => {\r\n const wallGroup = layout.getFeatureGroupByPartId(wallPartId);\r\n if (wallGroup && wallGroup.activeFeature && (wallGroup.activeFeature.getSplittedFeatureName() !== currentFeatureName)) {\r\n // console.log(\"wallGroup.activeFeature.getSplittedFeatureName()\", wallGroup.activeFeature.getSplittedFeatureName());\r\n\r\n notMatchingFeatures.push(wallGroup.activeFeature);\r\n }\r\n })\r\n } else if (featureGroup.layerPositions && lookFeature.metaData.layerPosition) {\r\n Object.keys(featureGroup.layerPositions).forEach(position => {\r\n const feature = featureGroup.layerPositions[position];\r\n if (feature && (feature.dbFeature.id !== lookFeature.dbFeature.id)\r\n && (feature.getSplittedFeatureName() !== currentFeatureName)) {\r\n notMatchingFeatures.push(feature)\r\n }\r\n })\r\n }\r\n }\r\n return notMatchingFeatures\r\n}\r\n\r\n/**\r\n * Returns bool\r\n * @param featureGroup {object} featureGroup\r\n * @returns {boolean}\r\n */\r\nexport const getStyleAlertIsVisibleForGroup = (featureGroup) => {\r\n let alertIsVisible = false;\r\n if (featureGroup.layerPositions) {\r\n let names = [];\r\n Object.keys(featureGroup.layerPositions).forEach(position => {\r\n const feature = featureGroup.layerPositions[position];\r\n if (feature) {\r\n const featureName = feature.getSplittedFeatureName();\r\n names.push(featureName)\r\n }\r\n });\r\n alertIsVisible = Object.keys(featureGroup.layerPositions).some(position => {\r\n const feature = featureGroup.layerPositions[position];\r\n if (feature) {\r\n const featureName = feature.getSplittedFeatureName();\r\n return names.some(name => name !== featureName)\r\n }\r\n return false\r\n })\r\n }\r\n return alertIsVisible\r\n}\r\n\r\n/**\r\n * Returns array of not matched features partIds\r\n * @returns {array}\r\n */\r\nexport const getAllNotMatchingPartIds = () => {\r\n const layout = getCurrentLayout();\r\n const allFeatures = layout.getActiveFeatures(false);\r\n return allFeatures\r\n .filter(feature => getStyleAlertNotMatchingFeatures(feature.cartFeature).length)\r\n .map(feature => feature.partId);\r\n}\r\n\r\n/**\r\n * @param key {string} key\r\n * @param value {any}\r\n */\r\nexport const setLocalStorageItem = (key, value) => {\r\n try {\r\n window.localStorage.setItem(key, value);\r\n } catch (ex) { console.log(\"localStorage exception\", ex); }\r\n}\r\n\r\nexport const getLocalStorageItem = (key) => {\r\n let item = null;\r\n try {\r\n item = JSON.parse(window.localStorage.getItem(key));\r\n } catch (ex) { console.log(\"localStorage exception\", ex); }\r\n return item\r\n}\r\n\r\n/**\r\n * zooms canvas to default position\r\n * @param imageCanvas {object}\r\n * @param setCanvasScale {function}\r\n */\r\nexport const zoomCanvasOut = (imageCanvas, setCanvasScale) => {\r\n if (imageCanvas && imageCanvas.current && imageCanvas.current.pinchZoom) {\r\n imageCanvas.current.pinchZoom.zoomToCenter(null, 1);\r\n // removed as we don't see crown molding on unzoom, decided not to unzoom to floor\r\n // const scrollCheck = document.body.scrollHeight - document.body.clientHeight;\r\n // if (!scrollCheck || (scrollCheck > (document.documentElement.scrollTop + 1))) {\r\n // $(\"html, body\").animate({scrollTop: document.body.scrollHeight}, 1000);\r\n // }\r\n setCanvasScale(1);\r\n }\r\n}\r\n\r\n/**\r\n * creates all available rooms and room scenes\r\n * @param returnAllLayouts {boolean}\r\n * @returns objects {array}\r\n */\r\nexport const getRoomLayouts = (returnAllLayouts = false) => {\r\n const newLooks = [];\r\n const layout = getCurrentLayout();\r\n const layoutNames = Object.keys(layout.layoutNames).filter(key => key !== \"All\");\r\n const parents = layout.getFeatures();\r\n const isAsBathroom = getCurrentRoomType() === LOOK_ROOM_TYPES.as;\r\n parents.forEach(parent => {\r\n parent.relatedItems.forEach(relItem => {\r\n layoutNames.forEach(layoutName => {\r\n const features = relItem.featuresList[layoutName];\r\n for (let i = 0; i < features.length; i++) {\r\n const feature = features[i];\r\n const roomLayout = feature.dbFeature.metaData[\"RoomLayout\"];\r\n const roomScene = feature.dbFeature.metaData[\"RoomScene\"];\r\n if (document.kvConfig.toolVersion === 4) {\r\n if (feature.dbFeature.s3Bindings && Array.isArray(roomLayout) && !newLooks.some(look => look.lookLayout === layoutName)) {\r\n newLooks.push({\r\n lookLayout: layoutName,\r\n lookScene: \"1\",\r\n })\r\n }\r\n } else if (feature.dbFeature.s3Bindings && Array.isArray(roomLayout) && Array.isArray(roomScene) && roomLayout.length && roomScene.length) {\r\n if (!newLooks.some(look => (look.lookLayout === roomLayout[0]) && (look.lookScene === roomScene[0]))\r\n && (!isAsBathroom || (roomScene[0] === \"1\"))) {\r\n newLooks.push({\r\n lookLayout: roomLayout[0],\r\n lookScene: roomScene[0],\r\n })\r\n }\r\n }\r\n }\r\n })\r\n })\r\n });\r\n console.log(\"newLooks\", newLooks);\r\n if (returnAllLayouts || (document.kvConfig.toolVersion === 4) || (\r\n document.kvConfig.userId === 140000\r\n || document.kvConfig.userId === 140001\r\n || window.location.href.includes(\"quote_bathroom_2022\")\r\n || window.location.href.includes(\"qc_main_bathroom_set_2022\"))) {\r\n return newLooks\r\n }\r\n const currentName = layout.getCurrentLayoutName();\r\n // if (getCurrentRoomType() === LOOK_ROOM_TYPES.as) {\r\n // return newLooks\r\n // }\r\n return newLooks.filter(look => look.lookLayout === currentName)\r\n}\r\n\r\n/**\r\n * parses passed URL, and returns look ID, look category and sku\r\n * @param checkURL {string}\r\n * @returns parsedUrl {object}\r\n */\r\nexport const getParsedLookUrl = (checkURL = window.location.href) => {\r\n const regexForRoomPreset = /\\/look(.*?)$/;\r\n let lookIdFromUrl = checkURL.includes(\"/look\") ? checkURL.match(regexForRoomPreset)[1] : null;\r\n\r\n if (!lookIdFromUrl) {\r\n return {}\r\n }\r\n\r\n let featureGroupFromUrl = \"\";\r\n let skuFromUrl = \"\";\r\n\r\n let splittedLookPath = lookIdFromUrl.split(\"/\");\r\n if (lookIdFromUrl && splittedLookPath.length) {\r\n lookIdFromUrl = +splittedLookPath[0].replace(\"-\", \"\");\r\n featureGroupFromUrl = splittedLookPath[2] ? splittedLookPath[1] : null;\r\n skuFromUrl = splittedLookPath[2] || splittedLookPath[1];\r\n }\r\n // console.log(\"{lookIdFromUrl, featureGroupFromUrl, skuFromUrl}\", {lookIdFromUrl, featureGroupFromUrl, skuFromUrl});\r\n\r\n return {lookIdFromUrl, featureGroupFromUrl, skuFromUrl}\r\n}\r\n\r\n/**\r\n * compares currect and common coords - gives max & min values\r\n * @param currentCoords {object}\r\n * @param commonCoords {object}\r\n * @returns {object}\r\n */\r\nexport const compareCoords = (currentCoords, commonCoords) => {\r\n if (currentCoords) {\r\n [\"min_x\",\"min_y\",].forEach(coordProp => {\r\n if (!commonCoords[coordProp] || (commonCoords[coordProp] > currentCoords[coordProp])) {\r\n commonCoords[coordProp] = currentCoords[coordProp];\r\n }\r\n });\r\n [\"max_x\", \"max_y\"].forEach(coordProp => {\r\n if (!commonCoords[coordProp] || (commonCoords[coordProp] < currentCoords[coordProp])) {\r\n commonCoords[coordProp] = currentCoords[coordProp];\r\n }\r\n });\r\n }\r\n return commonCoords\r\n}\r\n\r\n/**\r\n * compares currect and common coords - gives max & min values\r\n * @param feature {featureInterface}\r\n * @param isWizard {boolean}\r\n * @returns {object}\r\n */\r\nexport const getFeatureCoords = (feature, isWizard = false) => {\r\n if (document.kvConfig.visualizerType === \"kvScene\"\r\n && feature.metaData[\"RoomLayout\"] && feature.metaData[\"RoomLayout\"].includes('Layout1')\r\n && feature.metaData[\"RoomScene\"] && feature.metaData[\"RoomScene\"].includes('1')) {\r\n if ((feature.partId === \"top_cabinet\" || feature.partId === \"bottom_cabinet\")) {\r\n return feature.metaData[\"Coords\"]\r\n ? Object.assign({}, feature.metaData[\"Coords\"], {max_x: 0.2}) // do not zoom to right part of it\r\n : {min_x: 0, min_y: 0, max_x: 0.2, max_y: 0.38}\r\n } else if (feature.partId === \"crown_molding\") {\r\n return isWizard\r\n ? {min_x: 0.5, min_y: 0, max_x: 0.7, max_y: 0.1}\r\n : {min_x: 0.4, min_y: 0, max_x: 0.6, max_y: 0.1} // do not zoom to left part of it\r\n }\r\n\r\n }\r\n if (document.kvConfig.visualizerType === \"bvLook\" && feature.metaData[\"Coords\"]) {\r\n\r\n if (feature.partId === \"shower_wall\") {\r\n if (feature.metaData[\"RoomLayout\"] && feature.metaData[\"RoomLayout\"].includes('Layout18')) {\r\n return Object.assign({}, feature.metaData[\"Coords\"], {max_x: feature.metaData[\"Coords\"].max_x / 1.8})\r\n }\r\n }\r\n }\r\n return feature.metaData[\"Coords\"]\r\n}\r\n\r\n/**\r\n * parses passed URL, and returns look ID, look category and sku\r\n * @param featureGroup {object}\r\n * @param clickedFeature {object}\r\n * @param canvasElement {$ElementType} canvas\r\n * @param layerPosition {string}\r\n * @returns parsedUrl {object}\r\n */\r\nexport const getCommonCoords = (featureGroup, clickedFeature = null, canvasElement = null, layerPosition = \"\") => {\r\n\r\n const layout = getCurrentLayout();\r\n let zoomFeatureGroup;\r\n switch (featureGroup.partId) {\r\n case \"edge_profile\":\r\n zoomFeatureGroup = layout.getFeatureGroupByPartId(\"countertop\") || featureGroup;\r\n break;\r\n case \"center_island_edge\":\r\n zoomFeatureGroup = layout.getFeatureGroupByPartId(\"center_island_countertop\") || featureGroup;\r\n break;\r\n default:\r\n zoomFeatureGroup = featureGroup\r\n break;\r\n }\r\n\r\n let commonCoords = clickedFeature ? clickedFeature.metaData.Coords || {} : {};\r\n if (!clickedFeature && layerPosition) {\r\n clickedFeature = zoomFeatureGroup.getMatchingPositionFeature(layerPosition);\r\n }\r\n\r\n const navItems = layout.designNavigationItems({part: zoomFeatureGroup}, {}, \"\", clickedFeature, true);\r\n\r\n for (let i = 0; i < navItems.length; i++) {\r\n const currentFeature = navItems[i].part;\r\n let currentCoords = getCropCoordsCenter(currentFeature, canvasElement);\r\n commonCoords = compareCoords(currentCoords, commonCoords);\r\n }\r\n if ((getCurrentRoomType() === LOOK_ROOM_TYPES.as) && [\"front_wall\", \"right_wall\"].some(partId => zoomFeatureGroup.partId === partId)) {\r\n commonCoords.min_x = 0.8 // because of the reflection in mirror, it sets min_x to 0.1, so the menu is not scrolling on open\r\n }\r\n return commonCoords\r\n}\r\n\r\n/**\r\n * toggles array val\r\n * @param array {array}\r\n * @param value {any}\r\n * @returns array {array}\r\n */\r\nexport const toggleArrayValue = (array, value) => {\r\n let newArray = [...array];\r\n let index = newArray.indexOf(value);\r\n (index >= 0) ? newArray.splice(index, 1) : newArray.push(value);\r\n return newArray;\r\n};\r\n\r\n/**\r\n * Checks if it is needed to show a context menu\r\n * @param partId {string}\r\n * @param layerPosition {string}\r\n * @param fabricatorData {object}\r\n * @returns object\r\n */\r\nexport const checkForContextMenuCommon = (partId, layerPosition, fabricatorData) => {\r\n const returnObject = {\r\n allButtons: [], // {partId: \"\", translateId: \"\", isWizard: true, wizardId: sting|number, hasSubMenu: false}\r\n showButtons: [] // {partId: \"\", translateId: \"\", isWizard: true, wizardId: sting|number, hasSubMenu: false}\r\n }\r\n if (!partId) {\r\n return returnObject\r\n }\r\n const isBathroom = getCommonVisualizerType() === \"bathroom\";\r\n if (isBathroom && (fabricatorData && fabricatorData.isEncore)) {\r\n return returnObject\r\n }\r\n const allContextMenus = isBathroom ? ALL_CONTEXT_MENU : ALL_CONTEXT_MENU_KITCHEN;\r\n if (!allContextMenus.includes(partId)) {\r\n return returnObject\r\n }\r\n // if (imageCanvas.current && imageCanvas.current.setHoveredLayer) {\r\n // imageCanvas.current.renderGreenLayerByZindex(hoveredLayer.zIndex);\r\n\r\n let whereToCheck = isBathroom\r\n ? [CONTEXT_MENU_VANITY_BUTTONS, CONTEXT_MENU_BATHTUB_BUTTONS, CONTEXT_MENU_SPLIT_WALL, CONTEXT_MENU_SHOWER_ALL,\r\n CONTEXT_MENU_SHOWER_OTHER]\r\n : [CONTEXT_MENU_KITCHEN_CENTER_ISLAND, CONTEXT_MENU_KITCHEN_COUNTERTOPS];\r\n\r\n if (isBathroom && IS_QKB_UI) {\r\n whereToCheck.push(CONTEXT_MENU_SHOWER_ACCESSORIES);\r\n }\r\n\r\n let checkArray = whereToCheck.find(contextMenuArray => contextMenuArray.includes(partId)) || [];\r\n\r\n if (!checkArray.length) {\r\n return returnObject\r\n }\r\n\r\n const layout = getCurrentLayout();\r\n checkArray.forEach(checkPartId => {\r\n if (checkPartId === \"vanity_legs\" && layout.parts[\"Vanity\"] && layout.parts[\"Vanity\"].vanity_type !== VANITY_TYPES.vanity_cabinet) {\r\n return\r\n } else if (document.kvConfig.visualizerType === \"kvScene\" && checkPartId === \"center_island_edge\" && layout.type === 3) {\r\n return\r\n }\r\n if (layout.disabledClickablePartIds.includes(checkPartId) || hardCodelyRemovedClicking(checkPartId, layout)) {\r\n return;\r\n }\r\n const featureGroup = layout.getFeatureGroupByPartId(checkPartId);\r\n\r\n if (!isBathroom) {\r\n if (featureGroup && featureGroup.features.length > 0) {\r\n returnObject.allButtons.push({\r\n partId: featureGroup.partId,\r\n translateId: featureGroup.translateId,\r\n });\r\n }\r\n return;\r\n }\r\n\r\n const forFeature = featureGroup && layerPosition && featureGroup.layerPositions && featureGroup.layerPositions[layerPosition]\r\n ? featureGroup.layerPositions[layerPosition]\r\n : null;\r\n const withQuotingToolFeatures = layout.partIdExistInQtCategory(checkPartId);\r\n if (featureGroup && layout.hasNavItemsLength({part: featureGroup}, {}, \"\", forFeature, withQuotingToolFeatures)\r\n && ((featureGroup.partId !== \"vanity_countertop\") || featureGroup.activeFeature)) {\r\n returnObject.allButtons.push({\r\n partId: featureGroup.partId,\r\n translateId: featureGroup.translateId,\r\n });\r\n }\r\n });\r\n\r\n if (!returnObject.allButtons.length) {\r\n return returnObject\r\n }\r\n\r\n // wizard item check\r\n const {wizardState, bathroomVisualizerState, fabricatorState} = store.getState();\r\n const {wizardList, wizardIsActive} = wizardState;\r\n const {activePreset} = bathroomVisualizerState;\r\n\r\n returnObject.showButtons = returnObject.allButtons.sort((a) => partId === a.partId ? -1 : 1);\r\n\r\n const activeVanityType = layout.parts[\"Vanity\"] && layout.parts[\"Vanity\"].vanity_type ? layout.parts[\"Vanity\"].vanity_type : VANITY_TYPES.vanity_cabinet;\r\n const isVanity = isBathroom && CONTEXT_MENU_VANITY_BUTTONS.includes(partId);\r\n const isShower = isBathroom && (CONTEXT_MENU_SHOWER_ALL.includes(partId) || CONTEXT_MENU_SHOWER_OTHER.includes(partId));\r\n const isCenterIsland = !isBathroom && CONTEXT_MENU_KITCHEN_CENTER_ISLAND.includes(partId);\r\n let existingWizardItem = null;\r\n\r\n if (isVanity && (getCurrentRoomType(layout) === LOOK_ROOM_TYPES.as)) {\r\n returnObject.showButtons = returnObject.allButtons.filter(button => {\r\n return !CONTEXT_MENU_VANITY_ONLY.includes(button.partId) || CONTEXT_MENU_VANITY_ONLY.includes(button.partId) && button.partId === partId\r\n });\r\n if (!returnObject.showButtons.some(testBtn => CONTEXT_MENU_VANITY_ONLY.includes(testBtn.partId))) {\r\n returnObject.showButtons.push({\r\n partId: activeVanityType,\r\n translateId: activeVanityType === \"vanity_cabinet\" ? \"visualizer.bathroom.vanity.vanity\" : \"visualizer.bathroom.vanity.\" + activeVanityType,\r\n hasSubMenu: true,\r\n });\r\n }\r\n if (!IS_QKB_UI) {\r\n const sinkIndex = returnObject.showButtons.findIndex(button => button.partId === \"vanity_sink\");\r\n if (sinkIndex > -1) {\r\n const sinkParent = layout.getFeatureGroupByPartId(\"vanity_sink\");\r\n const isPedestal = sinkParent.activeFeature && sinkParent.activeFeature.metaData[\"MountType\"] && sinkParent.activeFeature.metaData[\"MountType\"].includes(\"ST\");\r\n returnObject.showButtons.splice(isPedestal ? sinkIndex : sinkIndex + 1, 0, {\r\n partId: \"vanity_pedestal_sink\",\r\n translateId: \"visualizer.bathroom.vanity.vanity_pedestal_sink\",\r\n });\r\n }\r\n }\r\n const backsplashIndex = returnObject.showButtons.findIndex(button => button.partId === \"vanity_backsplash\");\r\n if (backsplashIndex > -1) {\r\n const backsplashParent = layout.getFeatureGroupByPartId(\"vanity_backsplash\");\r\n // console.log(\"backsplashParent\", backsplashParent);\r\n if (backsplashParent && backsplashParent.hideLayerCondition()) {\r\n returnObject.showButtons.splice(backsplashIndex, 1);\r\n }\r\n }\r\n\r\n if (Array.isArray(wizardList) && wizardList.length && (!IS_QKB_UI || wizardIsActive)) {\r\n existingWizardItem = getExistingWizardForGroups(CONTEXT_MENU_VANITY_ONLY, wizardList, activePreset);\r\n if (existingWizardItem) {\r\n const vanityButtonIndex = returnObject.showButtons.findIndex(button => CONTEXT_MENU_VANITY_ONLY.includes(button.partId));\r\n if (vanityButtonIndex > -1) {\r\n const vanityWizardButton = {\r\n partId: \"vanity_wizard-\" + existingWizardItem.id,\r\n translateId: activeVanityType === \"vanity_cabinet\" ? \"visualizer.bathroom.vanity.vanity\" : \"visualizer.bathroom.vanity.\" + activeVanityType,\r\n isWizard: true,\r\n wizardId: existingWizardItem.id,\r\n };\r\n fabricatorState.isAmericanStandard\r\n ? returnObject.showButtons.splice(vanityButtonIndex, 1, vanityWizardButton)\r\n : returnObject.showButtons.unshift(vanityWizardButton)\r\n }\r\n if (fabricatorState.isAmericanStandard) {\r\n returnObject.showButtons = returnObject.showButtons.filter(button => !button.partId.includes(\"sink\")) //LX-791\r\n }\r\n }\r\n }\r\n\r\n } else if (isShower && Array.isArray(wizardList) && wizardList.length) {\r\n existingWizardItem = getExistingWizardForGroups([...CONTEXT_MENU_SHOWER_ALL, ...CONTEXT_MENU_SHOWER_OTHER], wizardList, activePreset);\r\n if (existingWizardItem) {\r\n const showerWizardButton = {\r\n partId: \"shower_wizard-\" + existingWizardItem.id,\r\n translateId: \"visualizer.bathroom.shower.shower\",\r\n isWizard: true,\r\n wizardId: existingWizardItem.id,\r\n };\r\n if (fabricatorState.isLixil) {\r\n returnObject.showButtons = [showerWizardButton]\r\n } else {\r\n returnObject.showButtons.push(showerWizardButton)\r\n }\r\n }\r\n } else if (isCenterIsland && Array.isArray(wizardList) && wizardList.length) {\r\n existingWizardItem = getExistingWizardForGroups(CONTEXT_MENU_KITCHEN_CENTER_ISLAND, wizardList, activePreset);\r\n if (existingWizardItem) {\r\n const counteropWizardButton = {\r\n partId: \"counterop_wizard-\" + existingWizardItem.id,\r\n translateId: \"wizard.contextMenu.wizardBuild\",\r\n isWizard: true,\r\n wizardId: existingWizardItem.id,\r\n };\r\n returnObject.showButtons.push(counteropWizardButton)\r\n }\r\n }\r\n\r\n if (isBathroom && isShower && IS_QKB_UI && CONTEXT_MENU_SHOWER_ACCESSORIES.some(accPartId => {\r\n const accFg = layout.getFeatureGroupByPartId(accPartId);\r\n return accFg && layout.hasNavItemsLength({part: accFg})\r\n })) {\r\n const accessoriesButton = {\r\n partId: \"accessories\",\r\n translateId: \"visualizer.bathroom.accessories\",\r\n hasSubMenu: true,\r\n };\r\n returnObject.showButtons.push(accessoriesButton);\r\n }\r\n\r\n if (IS_QKB_UI && document.kvConfig.visualizerOnly) {\r\n // remove wizard, as we can't jump to the quotingtool\r\n returnObject.showButtons = returnObject.showButtons.filter(button => !button.isWizard)\r\n } else if (existingWizardItem && existingWizardItem.hideContext) {\r\n returnObject.showButtons = returnObject.showButtons.filter(button => button.isWizard) // wizard only\r\n }\r\n\r\n return returnObject;\r\n};\r\n\r\nexport const getOptionStyles = (filterValue) => { // we have the logic with additionalImages in the FeatureWizardBody component\r\n let styles = {};\r\n let thumbnail = (Array.isArray(filterValue.additionalImages) && filterValue.additionalImages.length)\r\n ? filterValue.additionalImages[0].imageUrl\r\n : s3FilterImagePath(filterValue.icon);\r\n if (thumbnail) {\r\n styles.backgroundImage = \"url(\" + thumbnail + \")\";\r\n }\r\n if (!thumbnail) {\r\n styles.backgroundColor =\r\n filterValue.value && filterValue.value.includes(\"BLACK\")\r\n ? \"black\"\r\n : filterValue.value && filterValue.value.includes(\"BRONZE\")\r\n ? \"#3f270f\"\r\n : filterValue.value && filterValue.value.includes(\"NICKEL\")\r\n ? \"#727472\"\r\n : filterValue.value;\r\n }\r\n return styles\r\n};\r\n","import PropTypes from \"prop-types\";\r\n\r\nexport const dbFeatureInterface = {\r\n id: PropTypes.number, // unique id fro every feature\r\n price: PropTypes.number, // retail price\r\n cost: PropTypes.number, // fabricator price\r\n shippingCost: PropTypes.number, // shippingCost\r\n fabricatorCost: PropTypes.number, // discount price\r\n}\r\n\r\nexport const featureInterface = {\r\n metaData: PropTypes.object,\r\n dbFeature: PropTypes.shape(dbFeatureInterface),\r\n};\r\n\r\nexport const featureCollectionInterface = {\r\n id: PropTypes.number.isRequired,\r\n features: PropTypes.arrayOf(PropTypes.shape(featureInterface)),\r\n};\r\n\r\nexport const featureGroupInterface = {\r\n partName: PropTypes.string.isRequired,\r\n};\r\n\r\nexport const navItemInterface = {\r\n part: PropTypes.shape(featureInterface).isRequired,\r\n}\r\n","import invert from 'lodash/invert';\r\nimport uniqBy from 'lodash/uniqBy';\r\n\r\nimport {getFilterGroupValues, splitFeatureName} from \"../../../misc/utils\";\r\nimport DesignNavigationItem from \"../../visComponents/designNavigationItem\";\r\nimport {Part} from \"./part\";\r\nimport store from '../../../store';\r\nimport {LayoutAbbreviation, LayoutType} from \"./constants\";\r\nimport {getFeatureIsLocked} from \"../../../misc/helpers\";\r\n\r\n/**\r\n * Used for Complex parts such as Vanity, to perform some base functionality for related items\r\n */\r\nexport class IntermediatePart extends Part {\r\n\r\n constructor(isChild) {\r\n super(false, isChild);\r\n this.disabled = false;\r\n this.defaultDisabled = false; // used after reset click\r\n this.canBeDisabled = false;\r\n }\r\n\r\n /**\r\n * This will be called on feature creation\r\n * @param dbFeature\r\n */\r\n load(dbFeature) {\r\n if (dbFeature.metaData[\"Part\"]) {\r\n const partNumber = +dbFeature.metaData[\"Part\"][0];\r\n return this.load_(dbFeature, new this.constructor(false, partNumber), true, partNumber === 1 ? 'features' : 'featuresParts');\r\n }\r\n return this.load_(dbFeature, new this.constructor());\r\n }\r\n\r\n /**\r\n * This will be called by the underlying vanity feature with a concrete instance of the part\r\n * @param dbFeature\r\n * @param part {Part}\r\n * @param setParent {boolean}\r\n * @param features\r\n */\r\n load_(dbFeature, part, setParent = true, features = 'features') {\r\n\r\n if (!dbFeature.s3Bindings && features === \"featuresParts\") { // keep not-in-visualizer features in the main list\r\n features = \"features\"\r\n }\r\n\r\n const featureList = features + \"List\";\r\n\r\n const {displayName} = dbFeature;\r\n let {featureName} = splitFeatureName(displayName, dbFeature.groupName);\r\n if (!featureName && dbFeature.groupName && dbFeature.displayName) {\r\n featureName = dbFeature.displayName.replace(dbFeature.groupName + \" - \", \"\")\r\n }\r\n // console.log('displayName:', displayName);\r\n\r\n if (setParent) {\r\n part.getParent = () => this;\r\n if (dbFeature.galleryImages) {\r\n const featured = dbFeature.galleryImages.find(galImage => galImage.featured);\r\n if (featured) {\r\n this.featuredImage = featured.url\r\n }\r\n dbFeature.galleryImages = dbFeature.galleryImages.sort((a, b) => b.default - a.default)\r\n }\r\n }\r\n\r\n if (!dbFeature.sharedFeatureName) {\r\n console.error(\"No sharedFeatureName property:\", dbFeature);\r\n }\r\n\r\n part.partName = featureName;\r\n part.metaData = dbFeature.metaData || {};\r\n\r\n if (dbFeature.s3Bindings && dbFeature.s3Bindings.length) {\r\n // dbFeature.s3Bindings = dbFeature.s3Bindings.filter(binding => binding.visualizer === \"KitchenV5\")\r\n if (!dbFeature.metaData[\"CropCoords\"]) {\r\n dbFeature.s3Bindings = dbFeature.s3Bindings.map(object => {\r\n object.path = object.path.replace(\"-copy\", \"\");\r\n return object\r\n })\r\n }\r\n }\r\n\r\n part.dbFeature = dbFeature || {};\r\n if (!part.dbFeature.filterValueIDs) {\r\n part.dbFeature.filterValueIDs = {}\r\n }\r\n part.notAvailableInVisualizer = !dbFeature.s3Bindings || !dbFeature.s3Bindings.length;\r\n\r\n let someLayoutFound = false;\r\n if (part.metaData.RoomLayout) {\r\n const roomLayout = part.metaData.RoomLayout;\r\n if (roomLayout.includes(LayoutAbbreviation.All)) {\r\n Object.keys(LayoutType).forEach(layoutName => {\r\n this[featureList][layoutName].push(part);\r\n })\r\n } else if (Array.isArray(roomLayout) && roomLayout.length) {\r\n roomLayout.forEach(roomLayoutAbbreviation => {\r\n const layoutName = invert(LayoutAbbreviation)[roomLayoutAbbreviation];\r\n if (layoutName) { // Prevent bad roomLayout Metadata\r\n if (!someLayoutFound) {\r\n someLayoutFound = true;\r\n }\r\n this[featureList][layoutName].push(part);\r\n }\r\n });\r\n } else { // single value\r\n const layoutName = invert(LayoutAbbreviation)[roomLayout];\r\n if (layoutName) {\r\n someLayoutFound = true;\r\n this[featureList][layoutName].push(part);\r\n }\r\n }\r\n }\r\n\r\n if (part.notAvailableInVisualizer || !part.metaData.RoomLayout || !someLayoutFound) {\r\n part.notAvailableInVisualizer = true;\r\n if (!someLayoutFound) {\r\n // remove old version layers so the feature will be as simple not-in-visualizer feature\r\n part.metaData.RoomLayout = null;\r\n part.dbFeature.metaData.RoomLayout = null;\r\n part.dbFeature.s3Bindings = null;\r\n }\r\n Object.keys(LayoutType).forEach(layoutName => {\r\n this[featureList][layoutName].push(part);\r\n })\r\n }\r\n\r\n // Object.keys(LayoutType).forEach(layoutName => {\r\n // this[features+\"List\"][layoutName].push(part);\r\n // });\r\n\r\n this.loadFeatureCommon(part);\r\n\r\n return part\r\n }\r\n\r\n getActiveFeatureConditions() {\r\n return this.getArrayOfConditions()\r\n }\r\n\r\n // navigationSubItems(filters, searchText, forFeature, filterGroups, firstOpenedFeature, firstOpenedConditions) { // to do\r\n navigationSubItems(filters, searchText, forFeature, filterGroups, restOptions = {}) {\r\n // const {firstOpenedFeature, firstOpenedConditions, returnAllFeatures} = restOptions;\r\n const {returnAllFeatures} = restOptions;\r\n const featuresList = this.getFeaturesForNavigationFrom(restOptions);\r\n\r\n // const featuresList = (forFeature && forFeature.metaData.layerPosition === SIDE_POSITIONS[1]) ? this.featuresParts : this.features;\r\n const filteredAvailableFeatures = this.getFeaturesBySearchText(this.getFilteredFeaturesByFilters(filters, featuresList), searchText);\r\n let featuresToDisplay = returnAllFeatures\r\n ? filteredAvailableFeatures\r\n : this.navigationSubItemsWithFilterMultipleConditions(this.getArrayOfConditions(true), filteredAvailableFeatures);\r\n // console.log(\"filterGroups\", filterGroups);\r\n if (returnAllFeatures) {\r\n featuresToDisplay = uniqBy(featuresToDisplay, (feature) => feature.dbFeature.sharedFeatureName);\r\n }\r\n return this.navigationItemsWithOptions(filters, forFeature, filterGroups, featuresToDisplay)\r\n }\r\n\r\n navigationSubItemsWithFilter(propName, propValue, featuresToCheck = this.features) {\r\n return featuresToCheck.filter((feature) => {\r\n return feature.matchesMetaForCondition(propName, propValue);\r\n }).map(_ => new DesignNavigationItem(_.featureName, _));\r\n }\r\n\r\n navigationSubItemsWithFilterMultipleConditions(arrayOfConditions, featuresToCheck = this.features) {\r\n // console.log('arrayOfConditions', arrayOfConditions);\r\n // console.log('featuresToCheck', featuresToCheck);\r\n return featuresToCheck.filter((feature) => {\r\n return feature.notAvailableInVisualizer || arrayOfConditions.every((conditionObject) => {\r\n const {propName, propValue} = conditionObject;\r\n return feature.matchesMetaForCondition(propName, propValue);\r\n });\r\n })\r\n }\r\n\r\n setDefault(layout, setNotInVisFeature = this.hasNoVisualizerLayers) {\r\n this.setFeatureGroupDefault(layout, setNotInVisFeature)\r\n }\r\n\r\n setLayerPositions = (activeFeature = this.activeFeature) => {\r\n if (!activeFeature) {\r\n return\r\n }\r\n const layout = this.getParent().layout;\r\n const conditions = this.getArrayOfConditions();\r\n if (layout && this.defaultLayerLayoutPositions && this.defaultLayerLayoutPositions[layout.type]) {\r\n Object.keys(this.layerPositions).forEach(key => {\r\n if (this.defaultLayerLayoutPositions[layout.type] === key\r\n && (!this.layerPositions[key] || !this.layerPositions[key].matchesMetaForArrayOfConditions(conditions))) {\r\n this.layerPositions[key] = activeFeature;\r\n } else if (activeFeature.dbFeature.metaData[\"layerPosition\"] !== key) {\r\n this.layerPositions[key] = null;\r\n }\r\n })\r\n } else {\r\n Object.keys(this.layerPositions).forEach(key => {\r\n if (layout.initialized) {\r\n if ((activeFeature.dbFeature.metaData[\"layerPosition\"] === key)\r\n && (this.layerPositions[key] && !this.layerPositions[key].matchesMetaForArrayOfConditions(conditions))) {\r\n this.layerPositions[key] = activeFeature;\r\n // } else if (this.setAllLayerPositions) {\r\n } else if (this.layerPositions[key]) { // here we have to change vanity cabinet to console for example\r\n const matchingPositionFeature = this.getMatchingPositionFeature(key);\r\n if (matchingPositionFeature) {\r\n this.layerPositions[key] = matchingPositionFeature;\r\n }\r\n }\r\n } else { // first time we should set everything by the default! // missing layers issue\r\n if ((activeFeature.dbFeature.metaData[\"layerPosition\"] === key)\r\n && (!this.layerPositions[key] || !this.layerPositions[key].matchesMetaForArrayOfConditions(conditions))) {\r\n this.layerPositions[key] = activeFeature;\r\n // } else if (this.setAllLayerPositions) {\r\n } else {\r\n const matchingPositionFeature = this.getMatchingPositionFeature(key);\r\n if (matchingPositionFeature) {\r\n this.layerPositions[key] = matchingPositionFeature;\r\n }\r\n }\r\n }\r\n })\r\n }\r\n }\r\n\r\n toggleLayerPositions() {\r\n Object.keys(this.layerPositions).forEach(key => {\r\n this.layerPositions[key] = this.disabled ? null : this.getMatchingPositionFeature(key)\r\n })\r\n }\r\n\r\n getMatchingPositionFeature = (position = \"\", fromFeature = this.activeFeature, fromLayout = null) => {\r\n if (fromFeature) { //just in case\r\n const name1 = fromFeature.getSplittedFeatureName();\r\n let arrayOfConditions = this.getArrayOfConditions();\r\n if (fromFeature.metaData[\"SkuName\"]) {\r\n arrayOfConditions.push({\r\n propName: \"SkuName\",\r\n propValue: fromFeature.metaData[\"SkuName\"]\r\n })\r\n }\r\n if (fromLayout) {\r\n let roomLayoutMeta = arrayOfConditions.find(condition => condition.propName === \"RoomLayout\");\r\n let roomSceneMeta = arrayOfConditions.find(condition => condition.propName === \"RoomScene\");\r\n if (roomLayoutMeta) {\r\n roomLayoutMeta.propValue = fromLayout.getCurrentLayoutAbbreviation();\r\n }\r\n if (roomSceneMeta) {\r\n roomSceneMeta.propValue = fromLayout.scene;\r\n }\r\n }\r\n const skuNamesPartIds = [\"shower_door\", \"walk_in_tub\", \"shower_pan_combo\"];\r\n const whereToFind = (!this.layerPositions || (position === Object.keys(this.layerPositions)[0])) ? this.features : this.featuresParts;\r\n return whereToFind.find((feature) => {\r\n return (skuNamesPartIds.includes(this.partId) || name1 === feature.getSplittedFeatureName())\r\n && feature.matchesMetaForArrayOfConditions(arrayOfConditions) && feature.metaData[\"layerPosition\"] === position\r\n });\r\n }\r\n return null\r\n };\r\n\r\n getArrayOfConditions() {\r\n const layout = this.getParent().layout;\r\n return [{\r\n propName: 'RoomLayout',\r\n propValue: layout.getCurrentLayoutAbbreviation()\r\n }, {\r\n propName: 'RoomScene',\r\n propValue: layout.scene\r\n }];\r\n }\r\n\r\n setLayers(layout) {\r\n if (this.hideLayerCondition && this.hideLayerCondition()) {\r\n this.hideLayers();\r\n return;\r\n }\r\n if (this.activeFeature && (this.activeFeature.matchesMetaForArrayOfConditions(this.getArrayOfConditions()))) {\r\n if (this.hasAdditionalParts) {\r\n this.checkIfFeaturePartIsMatching();\r\n }\r\n return this._setLayers(layout);\r\n }\r\n this.setDefault(layout);\r\n return this._setLayers(layout);\r\n }\r\n\r\n showLayerPositionsModal() {\r\n return false\r\n }\r\n\r\n clickFromAllWalls(ignoreLocked) {\r\n if (this && this.dbFeature && this.dbFeature.sharedFeatureName) {\r\n console.log(`${this.partId}:`, this.dbFeature.sharedFeatureName);\r\n }\r\n this.handleClick(ignoreLocked, \"all_walls\");\r\n }\r\n\r\n /**\r\n * @param ignoreLocked {boolean} // false by the default, is used by wizard ONLY\r\n * @param clickFrom {string} // is used for countertop and cabinet switchers, and walls\r\n */\r\n handleClick(ignoreLocked = false, clickFrom = \"\") {\r\n const parent = this.getParent();\r\n if (clickFrom !== \"all_walls\") {\r\n const {activeQuoteIndex} = store.getState().quotesState;\r\n parent.firstClick[activeQuoteIndex] = true; // allow to show active item\r\n }\r\n const featureIsLocked = getFeatureIsLocked(this, ignoreLocked);\r\n if (featureIsLocked) {\r\n parent.activeLockedFeature = this;\r\n } else {\r\n if (parent.activeLockedFeature) {\r\n parent.activeLockedFeature = null;\r\n }\r\n this.featureClick();\r\n }\r\n }\r\n\r\n featureClick() {\r\n const parent = this.getParent();\r\n parent.placeholderChanged = true;\r\n if (this.notAvailableInVisualizer) {\r\n parent.activeNotInVisualizerFeature = this; // do not change the activeFeature (in order to keep the layer)\r\n } else if (parent.activeNotInVisualizerFeature) {\r\n parent.activeNotInVisualizerFeature = null; // remove it from other searches and so on\r\n parent.activeFeature = this;\r\n } else {\r\n parent.activeFeature = this;\r\n }\r\n this.featureClicked();\r\n }\r\n\r\n hideLayers() {\r\n if (this.activeFeature) {\r\n this.activeFeature.layer.src = '';\r\n }\r\n if (Array.isArray(this.activeFeatureParts) && this.activeFeatureParts.length) {\r\n this.activeFeatureParts.forEach((activeFeaturePart) => {\r\n if (activeFeaturePart && activeFeaturePart.layer) {\r\n activeFeaturePart.layer.src = '';\r\n }\r\n })\r\n }\r\n if (this.placeholderFeature) {\r\n this.placeholderFeature.layer.src = '';\r\n }\r\n if (this.layerPositions) {\r\n Object.keys(this.layerPositions).forEach(key => {\r\n if (this.layerPositions[key]) {\r\n this.layerPositions[key].layer.src = '';\r\n }\r\n })\r\n }\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n\r\n const getZIndex = (feature, partId = null) => {\r\n return feature.metaData[\"ZSorting\"] ? feature.metaData[\"ZSorting\"] * 1000 : zIndexes[partId || this.partId];\r\n }\r\n\r\n if (this.layerPositions) {\r\n Object.keys(this.layerPositions).forEach((key, keyIndex) => {\r\n const feature = this.layerPositions[key];\r\n if (feature) {\r\n feature.layer.zIndex = getZIndex(feature) + keyIndex*10;\r\n }\r\n })\r\n } else if (zIndexes && this.activeFeature) {\r\n this.activeFeature.layer.zIndex = getZIndex(this.activeFeature);\r\n if (this.hasAdditionalParts && this.activeFeatureParts && this.activeFeatureParts.length) {\r\n this.activeFeatureParts.forEach((activeFeaturePart, keyIndex) => {\r\n activeFeaturePart.layer.zIndex = getZIndex(activeFeaturePart, this.additionalPartPartId);\r\n if (this.partId === \"bottom_cabinet\" || this.partId === \"bottom_handle\" || (this.activeFeatureParts.length > 3)) {\r\n activeFeaturePart.layer.zIndex = activeFeaturePart.layer.zIndex + (keyIndex + 1);\r\n return\r\n }\r\n activeFeaturePart.layer.zIndex = activeFeaturePart.layer.zIndex + ((keyIndex + 1) * 10);\r\n });\r\n }\r\n }\r\n }\r\n\r\n removeEdgeFromPartName(partName) {\r\n const filterGroups = store.getState().filterState.filterGroups;\r\n const edgeFilterGroup = filterGroups.find(group => group.name === \"Edge\" || group.name === \"Edge Profile\");\r\n if (edgeFilterGroup && edgeFilterGroup.values && edgeFilterGroup.values.length) {\r\n const edgeFilterGroupValues = edgeFilterGroup.values.sort((a,b) => {\r\n return a.value && b.value && (b.value.length - a.value.length)\r\n }); // 1st should be \"Full Bullnose\", then simple \"Bullnose\"\r\n edgeFilterGroupValues.forEach((filterGroupValue) => { // arrayOf {id: 293, value: \"Eased\", displayText: \"Eased\", parent_id: null, icon: \"\", …}\r\n partName = partName.split(\" \"+filterGroupValue.value).join(\"\");\r\n });\r\n }\r\n return partName\r\n }\r\n\r\n getCountertopGroupsSplittedFeatureName = () => {\r\n if (this._countertopGroupsCustomDisplayName == null) {\r\n this._countertopGroupsCustomDisplayName = this.dbFeature.sharedFeatureName || \"\";\r\n }\r\n return this._countertopGroupsCustomDisplayName\r\n };\r\n\r\n getSplittedFeatureName = () => {\r\n if (this._customDisplayName == null || this.dbFeature.wasUpdatedFromAnotherResponse) {\r\n this._customDisplayName = this.dbFeature.sharedFeatureName || this.partName || \"\";\r\n switch (this.partId) {\r\n case \"center_island_countertop\": {\r\n this._customDisplayName = this._customDisplayName\r\n .replace(/2 0 /g, \"\")\r\n .replace(/Center Island Countertop 1 /g, \"\");\r\n const manufacturerFilter = getFilterGroupValues(this, {id: 35});\r\n if (Array.isArray(manufacturerFilter)) {\r\n this._customDisplayName = this._customDisplayName + manufacturerFilter[0]\r\n }\r\n break;\r\n }\r\n case \"countertop\":\r\n case \"backsplash\": {\r\n const manufacturerFilter = getFilterGroupValues(this, {id: 35});\r\n if (Array.isArray(manufacturerFilter)) {\r\n this._customDisplayName = this._customDisplayName + manufacturerFilter[0]\r\n }\r\n break;\r\n }\r\n case \"sink\":\r\n case \"center_island_sink\": {\r\n this._customDisplayName = this._customDisplayName\r\n .replace(/ D/g, \"\")\r\n .replace(/ Countertop/g, \"\")\r\n .replace(/ Island/g, \"\")\r\n break;\r\n }\r\n case \"hood\": {\r\n // cases when LG LSHD3089SS and LG LSHD3089DS should match\r\n this._customDisplayName = this._customDisplayName.substring(0, this._customDisplayName.length - 2);\r\n break;\r\n }\r\n default:\r\n break;\r\n }\r\n }\r\n if (this.dbFeature.wasUpdatedFromAnotherResponse) {\r\n this.dbFeature.wasUpdatedFromAnotherResponse = false;\r\n }\r\n return this._customDisplayName\r\n };\r\n\r\n getMatchingFeatureName = () => {\r\n return this.getSplittedFeatureName()\r\n };\r\n\r\n getModuleFeatureName = () => {\r\n // return this.partName.split(\" M_\")[0];\r\n return this.partName.split(\" M\")[0];\r\n };\r\n\r\n featureIsMatchingFilters(currentFeature, activeFilters, filters = []) {\r\n return filters.every(filter => {\r\n return activeFilters[filter.id]\r\n && currentFeature.dbFeature.filterValueIDs[filter.id]\r\n && currentFeature.dbFeature.filterValueIDs[filter.id].includes(activeFilters[filter.id][0])\r\n })\r\n }\r\n\r\n getActiveFeaturePartsAccordingToActiveFeature(fromFeature = this.activeFeature, activeFeatureConditions = []) {\r\n let activeFeatureParts = [];\r\n if (fromFeature && Number.isInteger(fromFeature.partNumber)) {\r\n let activeFeaturePart;\r\n const name1 = fromFeature.getSplittedFeatureName();\r\n // console.log(\"name1\", name1);\r\n let arrayOfConditions = activeFeatureConditions.length\r\n ? activeFeatureConditions\r\n : this.getActiveFeatureConditions(fromFeature);\r\n // if (this.partId === \"right_wall\") {\r\n // arrayOfConditions = arrayOfConditions.filter(condition => condition.propName !== \"MirrorSize\");\r\n // }\r\n activeFeatureParts = this.featuresParts.filter((feature) => name1 === feature.getSplittedFeatureName());\r\n // console.log(\"this.featuresParts\", this.featuresParts);\r\n // console.log(\"activeFeatureParts\", activeFeatureParts);\r\n if (activeFeatureParts.length) {\r\n activeFeaturePart = activeFeatureParts.find((feature) => {\r\n return feature.matchesMetaForArrayOfConditions(arrayOfConditions)\r\n });\r\n if (!activeFeaturePart) {\r\n activeFeaturePart = activeFeatureParts[0];\r\n }\r\n }\r\n activeFeatureParts = activeFeaturePart ? [activeFeaturePart] : [];\r\n activeFeatureParts.forEach((activeFeaturePart) => {\r\n activeFeaturePart.disabled = this.disabled\r\n });\r\n }\r\n return activeFeatureParts\r\n }\r\n\r\n checkIfFeaturePartIsMatching() {\r\n if (this.activeFeatureParts && this.activeFeatureParts.length) {\r\n const activeFeatureConditions = this.getActiveFeatureConditions();\r\n const name1 = this.activeFeature.getSplittedFeatureName();\r\n const activeFeaturePart = this.activeFeatureParts[0];\r\n if (!(activeFeaturePart.matchesMetaForArrayOfConditions(activeFeatureConditions)\r\n && name1 === activeFeaturePart.getSplittedFeatureName())) {\r\n this.activeFeatureParts = this.setActiveFeatureParts(this.activeFeature, activeFeatureConditions);\r\n }\r\n } else {\r\n this.activeFeatureParts = this.setActiveFeatureParts();\r\n }\r\n }\r\n\r\n setActiveFeatureParts(fromFeature = this.activeFeature, activeFeatureConditions = []) {\r\n return this.getActiveFeaturePartsAccordingToActiveFeature(fromFeature, activeFeatureConditions);\r\n }\r\n\r\n}\r\n","import invert from 'lodash/invert';\r\n\r\nimport {splitFeatureName} from \"../../../misc/utils\";\r\nimport DesignNavigationItem from \"../../visComponents/designNavigationItem\";\r\nimport {Part} from \"./part\";\r\nimport store from '../../../store';\r\nimport {LayoutAbbreviation, LayoutType, LayoutAbbreviationsToRemove, SIDE_POSITIONS, PAN_POSITIONS} from \"./constants\";\r\nimport {getFeatureIsLocked} from \"../../../misc/helpers\";\r\nimport {IS_BATHROOM_OLD_BV_SCENE} from \"../../../config\";\r\n\r\n/**\r\n * Used for Complex parts such as Vanity, to perform some base functionality for related items\r\n */\r\nexport class IntermediatePart extends Part {\r\n\r\n constructor(isChild) {\r\n super(false, isChild);\r\n this.disabled = false;\r\n this.defaultDisabled = false; // used after reset click\r\n this.canBeDisabled = false;\r\n }\r\n\r\n load(dbFeature) {\r\n return this.load_(dbFeature, new this.constructor());\r\n }\r\n\r\n /**\r\n * This will be called by the underlying vanity feature with a concrete instance of the part\r\n * @param dbFeature\r\n * @param part {Part}\r\n * @param setParent {boolean}\r\n * @param features\r\n */\r\n load_(dbFeature, part, setParent = true, features = 'features') {\r\n\r\n const featureList = features + \"List\";\r\n\r\n const {displayName} = dbFeature;\r\n let {featureName} = splitFeatureName(displayName);\r\n if (!featureName && dbFeature.groupName && dbFeature.displayName) {\r\n featureName = dbFeature.displayName.replace(dbFeature.groupName + \" - \", \"\")\r\n }\r\n // console.log('displayName:', displayName);\r\n\r\n if (setParent) {\r\n part.getParent = () => this;\r\n if (dbFeature.galleryImages) {\r\n const featured = dbFeature.galleryImages.find(galImage => galImage.featured);\r\n if (featured) {\r\n this.featuredImage = featured.url\r\n }\r\n dbFeature.galleryImages = dbFeature.galleryImages.sort((a, b) => b.default - a.default)\r\n }\r\n }\r\n\r\n if (!dbFeature.sharedFeatureName) {\r\n console.error(\"No sharedFeatureName property:\", dbFeature);\r\n }\r\n\r\n part.partName = featureName;\r\n part.metaData = dbFeature.metaData || {};\r\n\r\n if (dbFeature.s3Bindings && dbFeature.s3Bindings.length) {\r\n // dbFeature.s3Bindings = dbFeature.s3Bindings.filter(binding => binding.visualizer === \"BathroomV5\")\r\n }\r\n\r\n part.dbFeature = dbFeature || {};\r\n if (!part.dbFeature.filterValueIDs) {\r\n part.dbFeature.filterValueIDs = {}\r\n }\r\n part.notAvailableInVisualizer = !dbFeature.s3Bindings || !dbFeature.s3Bindings.length;\r\n\r\n if (part.metaData.RoomLayout) {\r\n const roomLayout = part.metaData.RoomLayout;\r\n if (roomLayout.includes(LayoutAbbreviation.All)) {\r\n Object.keys(LayoutType).forEach(layoutName => {\r\n this[featureList][layoutName].push(part);\r\n })\r\n } else if (Array.isArray(roomLayout) && roomLayout.length) {\r\n roomLayout.forEach(roomLayoutAbbreviation => {\r\n const layoutName = invert(LayoutAbbreviation)[roomLayoutAbbreviation];\r\n if (layoutName) { // Prevent bad roomLayout Metadata\r\n this[featureList][layoutName].push(part);\r\n }\r\n });\r\n } else { // single value\r\n const layoutName = invert(LayoutAbbreviation)[roomLayout];\r\n if(layoutName) {\r\n this[featureList][layoutName].push(part);\r\n }\r\n }\r\n }\r\n\r\n if (part.notAvailableInVisualizer || !part.metaData.RoomLayout) {\r\n part.notAvailableInVisualizer = true;\r\n Object.keys(LayoutType).forEach(layoutName => {\r\n this[featureList][layoutName].push(part);\r\n })\r\n }\r\n\r\n // Object.keys(LayoutType).forEach(layoutName => {\r\n // this[features+\"List\"][layoutName].push(part);\r\n // });\r\n\r\n this.loadFeatureCommon(part);\r\n\r\n return part\r\n }\r\n\r\n getActiveFeatureConditions() {\r\n return this.getArrayOfConditions()\r\n }\r\n\r\n navigationSubItems(filters, searchText) {\r\n const filteredAvailableFeatures = this.getFeaturesBySearchText(this.getFilteredFeaturesByFilters(filters), searchText);\r\n const featuresToDisplay = this.navigationSubItemsWithFilterMultipleConditions(this.getArrayOfConditions(), filteredAvailableFeatures);\r\n return this.returnUniqueNavFeatures(featuresToDisplay)\r\n }\r\n\r\n navigationSubItemsWithSides(filters, searchText) {\r\n const filteredAvailableFeatures = this.getFeaturesBySearchText(this.getFilteredFeaturesByFilters(filters), searchText);\r\n const featuresToDisplay = this.navigationSubItemsWithFilterMultipleConditions(this.getArrayOfConditions(true), filteredAvailableFeatures);\r\n\r\n let navFeatures = [];\r\n const activePosition = this.activeFeature && this.activeFeature.dbFeature.metaData[\"layerPosition\"]\r\n ? this.activeFeature.dbFeature.metaData[\"layerPosition\"]\r\n : SIDE_POSITIONS[0];\r\n navFeatures = featuresToDisplay.filter(feature => {\r\n return feature.dbFeature.metaData[\"layerPosition\"] === activePosition\r\n })\r\n featuresToDisplay.forEach(feature => {\r\n const skuName = feature.metaData[\"SkuName\"] ? feature.metaData[\"SkuName\"][0] : null;\r\n if ((IS_BATHROOM_OLD_BV_SCENE && !skuName) || (skuName && navFeatures.every(navFeature => {\r\n const skuName2 = navFeature.metaData[\"SkuName\"] ? navFeature.metaData[\"SkuName\"][0] : null;\r\n return skuName2 && (skuName2 !== skuName)\r\n }))) {\r\n navFeatures.push(feature)\r\n }\r\n })\r\n return this.returnUniqueNavFeatures(navFeatures)\r\n }\r\n\r\n navigationSubItemsWithFilter(propName, propValue, featuresToCheck = this.features) {\r\n return featuresToCheck.filter((feature) => {\r\n return feature.matchesMetaForCondition(propName, propValue);\r\n }).map(_ => new DesignNavigationItem(_.featureName, _));\r\n }\r\n\r\n navigationSubItemsWithFilterMultipleConditions(arrayOfConditions, featuresToCheck = this.features) {\r\n // console.log('arrayOfConditions', arrayOfConditions);\r\n // console.log('featuresToCheck', featuresToCheck);\r\n return featuresToCheck.filter((feature) => {\r\n return feature.notAvailableInVisualizer || arrayOfConditions.every((conditionObject) => {\r\n const {propName, propValue} = conditionObject;\r\n return feature.matchesMetaForCondition(propName, propValue);\r\n });\r\n })\r\n }\r\n\r\n setDefault(layout, setNotInVisFeature = false) {\r\n this.setFeatureGroupDefault(layout, setNotInVisFeature)\r\n }\r\n\r\n setLayerPositions = (activeFeature = this.activeFeature) => {\r\n if (!activeFeature) {\r\n return\r\n }\r\n const layout = this.getParent().layout;\r\n const conditions = this.getArrayOfConditions();\r\n if (layout && this.defaultLayerLayoutPositions && this.defaultLayerLayoutPositions[layout.type]) {\r\n Object.keys(this.layerPositions).forEach(key => {\r\n if (this.defaultLayerLayoutPositions[layout.type] === key\r\n && (!this.layerPositions[key] || !this.layerPositions[key].matchesMetaForArrayOfConditions(conditions))) {\r\n this.layerPositions[key] = activeFeature;\r\n } else if (activeFeature.dbFeature.metaData[\"layerPosition\"] !== key) {\r\n this.layerPositions[key] = null;\r\n }\r\n })\r\n } else {\r\n Object.keys(this.layerPositions).forEach(key => {\r\n if ((activeFeature.dbFeature.metaData[\"layerPosition\"] === key)\r\n && (!this.layerPositions[key] || !this.layerPositions[key].matchesMetaForArrayOfConditions(conditions))) {\r\n this.layerPositions[key] = activeFeature;\r\n }\r\n })\r\n }\r\n }\r\n\r\n getMatchingPositionFeature = (position = \"\", fromFeature = this.activeFeature) => {\r\n if (fromFeature) { //just in case\r\n const name1 = fromFeature.getSplittedFeatureName();\r\n let arrayOfConditions = this.getArrayOfConditions();\r\n if (fromFeature.metaData[\"SkuName\"]) {\r\n arrayOfConditions.push({\r\n propName: \"SkuName\",\r\n propValue: fromFeature.metaData[\"SkuName\"]\r\n })\r\n }\r\n const skuNamesPartIds = [\"shower_door\", \"walk_in_tub\", \"shower_pan_combo\", \"replacement_tub\"];\r\n const whereToFind = (!this.layerPositions || (position === Object.keys(this.layerPositions)[0])) ? this.features : this.featuresParts;\r\n return whereToFind.find((feature) => {\r\n return (skuNamesPartIds.includes(this.partId) || name1 === feature.getSplittedFeatureName())\r\n && feature.matchesMetaForArrayOfConditions(arrayOfConditions) && feature.metaData[\"layerPosition\"] === position\r\n });\r\n }\r\n return null\r\n };\r\n\r\n getArrayOfConditions() {\r\n const layout = this.getParent().layout;\r\n const conditions = [{\r\n propName: 'RoomLayout',\r\n propValue: layout.getCurrentLayoutAbbreviation()\r\n }];\r\n if (document.kvConfig.userId === 140045) { // new_bathroom_2021.quotesflooring.com\r\n conditions.push({\r\n propName: 'RoomScene',\r\n propValue: layout.scene\r\n })\r\n }\r\n return conditions;\r\n }\r\n\r\n setLayers(layout) {\r\n if (this.activeFeature && (this.activeFeature.matchesMetaForArrayOfConditions(this.getArrayOfConditions()))) {\r\n if (this.hasAdditionalParts) {\r\n this.checkIfFeaturePartIsMatching();\r\n }\r\n return this._setLayers(layout);\r\n }\r\n this.setDefault(layout);\r\n return this._setLayers(layout);\r\n }\r\n\r\n\r\n showLayerPositionsModal(forFeature) {\r\n const checkSidesFeatureGroups = [\"shower_door\", \"shower_fixture\", \"grab_bar\", \"large_corner_seat\",\r\n \"replacement_tub\", \"shower_pan_combo\", \"corner_caddie\", \"large_corner_caddie\", \"soap_dish\", \"walk_in_tub\",\r\n \"shower_seats\"];\r\n if (checkSidesFeatureGroups.includes(this.partId)) {\r\n const positionsAvailable = PAN_POSITIONS.filter(position => {\r\n return !!this.getMatchingPositionFeature(position, forFeature);\r\n });\r\n return positionsAvailable.length > 1\r\n }\r\n return false\r\n }\r\n\r\n clickFromAllWalls(ignoreLocked) {\r\n if (this && this.dbFeature && this.dbFeature.sharedFeatureName) {\r\n console.log(`${this.partId}:`, this.dbFeature.sharedFeatureName);\r\n }\r\n this.handleClick(ignoreLocked, \"all_walls\");\r\n }\r\n\r\n /**\r\n * @param ignoreLocked {boolean} // false by the default, is used by wizard ONLY\r\n */\r\n handleClick(ignoreLocked = false) {\r\n const parent = this.getParent();\r\n const {activeQuoteIndex} = store.getState().quotesState;\r\n parent.firstClick[activeQuoteIndex] = true; // allow to show active item\r\n const featureIsLocked = getFeatureIsLocked(this, ignoreLocked);\r\n if (featureIsLocked) {\r\n parent.activeLockedFeature = this;\r\n } else {\r\n if (parent.activeLockedFeature) {\r\n parent.activeLockedFeature = null;\r\n }\r\n this.featureClick();\r\n }\r\n }\r\n\r\n featureClick() {\r\n const parent = this.getParent();\r\n parent.placeholderChanged = true;\r\n if (this.notAvailableInVisualizer) {\r\n parent.activeNotInVisualizerFeature = this; // do not change the activeFeature (in order to keep the layer)\r\n } else if (parent.activeNotInVisualizerFeature) {\r\n parent.activeNotInVisualizerFeature = null; // remove it from other searches and so on\r\n parent.activeFeature = this;\r\n } else {\r\n parent.activeFeature = this;\r\n }\r\n this.featureClicked();\r\n }\r\n\r\n hideLayers() {\r\n if (this.activeFeature) {\r\n this.activeFeature.layer.src = '';\r\n }\r\n if (Array.isArray(this.activeFeatureParts) && this.activeFeatureParts.length) {\r\n this.activeFeatureParts.forEach((activeFeaturePart) => {\r\n if (activeFeaturePart && activeFeaturePart.layer) {\r\n activeFeaturePart.layer.src = '';\r\n }\r\n })\r\n }\r\n if (this.placeholderFeature) {\r\n this.placeholderFeature.layer.src = '';\r\n }\r\n if (this.layerPositions) {\r\n Object.keys(this.layerPositions).forEach(key => {\r\n if (this.layerPositions[key]) {\r\n this.layerPositions[key].layer.src = '';\r\n }\r\n })\r\n }\r\n }\r\n\r\n removeLayoutFromPartName(partName) {\r\n LayoutAbbreviationsToRemove.forEach(abbr => {\r\n const spaceWithLayoutName = \" \"+abbr;\r\n partName = partName.replace(spaceWithLayoutName + \" \", \" \"); // 1) replace \" Agra S Some edge name\" -> \" Agra Some edge name\"\r\n if (partName.slice(-spaceWithLayoutName.length) === spaceWithLayoutName) {\r\n partName = partName.substring(0, partName.length - spaceWithLayoutName.length); // 2) replace \" Agra Some edge name S\" -> \" Agra Some edge name\"\r\n }\r\n });\r\n partName = partName.replace(\" Backsplash\", \"\");\r\n return partName\r\n }\r\n\r\n removeEdgeFromPartName(partName) {\r\n const filterGroups = store.getState().filterState.filterGroups;\r\n const edgeFilterGroup = filterGroups.find(group => group.name === \"Edge\" || group.name === \"Edge Profile\");\r\n if (edgeFilterGroup && edgeFilterGroup.values && edgeFilterGroup.values.length) {\r\n const edgeFilterGroupValues = edgeFilterGroup.values.sort((a,b) => {\r\n return a.value && b.value && (b.value.length - a.value.length)\r\n }); // 1st should be \"Full Bullnose\", then simple \"Bullnose\"\r\n edgeFilterGroupValues.forEach((filterGroupValue) => { // arrayOf {id: 293, value: \"Eased\", displayText: \"Eased\", parent_id: null, icon: \"\", …}\r\n partName = partName.split(\" \"+filterGroupValue.value).join(\"\");\r\n });\r\n }\r\n return partName\r\n }\r\n\r\n getCountertopGroupsSplittedFeatureName = () => {\r\n if (this._countertopGroupsCustomDisplayName == null) {\r\n this._countertopGroupsCustomDisplayName = this.dbFeature.sharedFeatureName;\r\n }\r\n return this._countertopGroupsCustomDisplayName\r\n };\r\n\r\n getSplittedFeatureName = () => {\r\n if (this._customDisplayName == null) {\r\n this._customDisplayName = this.dbFeature.sharedFeatureName || this.partName;\r\n if (this.partId ===\"vanity_sink\" || this.partId ===\"vanity_faucet\") {\r\n this._customDisplayName = this._customDisplayName.replace(/ D/g, \"\")\r\n } else if (this.partId === \"shower_interior_wall\") {\r\n // White Acrylic 30in 1 Moment Flat -> White Acrylic\r\n // Grey Garden 48in 1 Solid Surface -> Grey Garden\r\n this._customDisplayName = this._customDisplayName.replace(/ 60in/g, \"\").replace(/ 48in/g, \"\").replace(/ 30in/g, \"\").split(\" 1 \")[0]\r\n } else if (this.partId === \"shower_pan_combo\" && Array.isArray(this.metaData[\"SkuName\"]) && this.metaData[\"SkuName\"][0]) {\r\n this._customDisplayName = this.metaData[\"SkuName\"][0]\r\n }\r\n }\r\n return this._customDisplayName\r\n };\r\n\r\n getMatchingFeatureName = () => {\r\n return this.getSplittedFeatureName()\r\n };\r\n\r\n getModuleFeatureName = () => {\r\n // return this.partName.split(\" M_\")[0];\r\n return this.partName.split(\" M\")[0];\r\n };\r\n\r\n featureIsMatchingFilters(currentFeature, activeFilters, filters = []) {\r\n return filters.every(filter => {\r\n return activeFilters[filter.id]\r\n && currentFeature.dbFeature.filterValueIDs[filter.id]\r\n && currentFeature.dbFeature.filterValueIDs[filter.id].includes(activeFilters[filter.id][0])\r\n })\r\n }\r\n\r\n getActiveFeaturePartsAccordingToActiveFeature(fromFeature = this.activeFeature, activeFeatureConditions = []) {\r\n let activeFeatureParts = [];\r\n if (fromFeature && fromFeature.partNumber) {\r\n let activeFeaturePart;\r\n const name1 = fromFeature.getSplittedFeatureName();\r\n // console.log(\"name1\", name1);\r\n let arrayOfConditions = activeFeatureConditions.length\r\n ? activeFeatureConditions\r\n : this.getActiveFeatureConditions(fromFeature);\r\n if (this.partId === \"right_wall\") {\r\n arrayOfConditions = arrayOfConditions.filter(condition => condition.propName !== \"MirrorSize\");\r\n }\r\n activeFeatureParts = this.featuresParts.filter((feature) => name1 === feature.getSplittedFeatureName());\r\n // console.log(\"this.featuresParts\", this.featuresParts);\r\n // console.log(\"activeFeatureParts\", activeFeatureParts);\r\n if (activeFeatureParts.length) {\r\n activeFeaturePart = activeFeatureParts.find((feature) => {\r\n return feature.matchesMetaForArrayOfConditions(arrayOfConditions)\r\n });\r\n if (!activeFeaturePart) {\r\n activeFeaturePart = activeFeatureParts[0];\r\n }\r\n }\r\n activeFeatureParts = activeFeaturePart ? [activeFeaturePart] : [];\r\n activeFeatureParts.forEach((activeFeaturePart) => {\r\n activeFeaturePart.disabled = this.disabled\r\n });\r\n }\r\n return activeFeatureParts\r\n }\r\n\r\n checkIfFeaturePartIsMatching() {\r\n if (this.activeFeatureParts && this.activeFeatureParts.length) {\r\n const activeFeatureConditions = this.getActiveFeatureConditions();\r\n const name1 = this.activeFeature.getSplittedFeatureName();\r\n const activeFeaturePart = this.activeFeatureParts[0];\r\n if (!(activeFeaturePart.matchesMetaForArrayOfConditions(activeFeatureConditions)\r\n && name1 === activeFeaturePart.getSplittedFeatureName())) {\r\n this.activeFeatureParts = this.setActiveFeatureParts(this.activeFeature, activeFeatureConditions);\r\n }\r\n } else {\r\n this.activeFeatureParts = this.setActiveFeatureParts();\r\n }\r\n }\r\n\r\n\r\n // OLD SHOWER LOGIC\r\n\r\n rememberPreviousSelection(shower, currentActiveFeature) {\r\n const layoutAbbr = shower.layout.getCurrentLayoutAbbreviation();\r\n const currentShowerBodyId = IntermediatePart.getCurrentShowerBodyId(shower);\r\n const wallConfiguration = shower.layout.parts[\"Shower Tub Combo\"] && shower.layout.parts[\"Shower Tub Combo\"].wallConfiguration;\r\n if (this.currentShowerBodyId !== currentShowerBodyId && currentActiveFeature && !currentActiveFeature.partName.includes(\"laceholder\")) {\r\n if (!this.previouslySelectedFeatures[layoutAbbr]) {\r\n this.previouslySelectedFeatures[layoutAbbr] = {}\r\n }\r\n this.previouslySelectedFeatures[layoutAbbr][this.currentShowerBodyId] = currentActiveFeature; // remember previous active item\r\n if (wallConfiguration\r\n && wallConfiguration.features.some(feature => feature.showerBodyId === this.currentShowerBodyId)) {\r\n wallConfiguration.features.forEach((wallConfigurationFeature) => { // remember previous active item for all wall conf\r\n this.previouslySelectedFeatures[layoutAbbr][wallConfigurationFeature.showerBodyId] = currentActiveFeature;\r\n })\r\n }\r\n }\r\n this.currentShowerBodyId = currentShowerBodyId; // set new shower type\r\n }\r\n\r\n setDefaultAccordingToPreviousSelect(shower, filteredFeatures, hardCodedDefaultName, placeholderDefaultName = \"laceholder\") {\r\n const layoutAbbr = shower.layout.getCurrentLayoutAbbreviation();\r\n const currentShowerBodyId = IntermediatePart.getCurrentShowerBodyId(shower);\r\n // console.log('currentShowerBodyId', currentShowerBodyId);\r\n // console.log('this.previouslySelectedFeatures', this.previouslySelectedFeatures);\r\n\r\n if (this.currentShowerBodyId !== currentShowerBodyId\r\n && this.previouslySelectedFeatures[layoutAbbr]\r\n && this.previouslySelectedFeatures[layoutAbbr][currentShowerBodyId]\r\n && filteredFeatures.some(f => f.dbFeature.id === this.previouslySelectedFeatures[layoutAbbr][currentShowerBodyId].dbFeature.id)) {\r\n this.activeFeature = this.previouslySelectedFeatures[layoutAbbr][currentShowerBodyId]; // restore from previous chosen\r\n } else {\r\n const hardCodedDefault = hardCodedDefaultName && filteredFeatures.find((feature) => {\r\n return !feature.notAvailableInVisualizer && feature.dbFeature.displayName && feature.dbFeature.displayName.includes(hardCodedDefaultName);\r\n });\r\n this.activeFeature = hardCodedDefault || filteredFeatures[0];\r\n }\r\n const placeholderDefault = filteredFeatures.find((feature) => {\r\n return !feature.notAvailableInVisualizer && feature.dbFeature.displayName\r\n && feature.dbFeature.displayName.includes(placeholderDefaultName);\r\n });\r\n this.placeholderFeature = placeholderDefault || null;\r\n }\r\n\r\n /** shower door, fixture methods **/\r\n static getCurrentShowerBodyId(shower) {\r\n let currentShowerBodyId = \"\";\r\n const showerTubComboIsActive = shower.showerTubComboIsActive();\r\n if (!showerTubComboIsActive && shower.showerBody && shower.showerBody.activeFeature) {\r\n currentShowerBodyId = shower.showerBody.activeFeature.showerBodyId;\r\n } else if (showerTubComboIsActive && shower.layout.parts[\"Shower Tub Combo\"]\r\n && shower.layout.parts[\"Shower Tub Combo\"].wallConfiguration\r\n && shower.layout.parts[\"Shower Tub Combo\"].wallConfiguration.activeFeature) {\r\n currentShowerBodyId = shower.layout.parts[\"Shower Tub Combo\"].wallConfiguration.activeFeature.showerBodyId;\r\n }\r\n return currentShowerBodyId\r\n }\r\n\r\n\r\n}\r\n","import {useEffect} from \"react\";\r\n\r\nimport {compareCoords, getCommonCoords, getFeatureCoords} from \"../../lookFunctions\";\r\nimport {getCurrentLayout} from \"../../../../appLayout\";\r\nimport {featureHasSelectedFilters, s3FilterImagePath} from \"../../../../../misc/utils\";\r\nimport {WIZARD_GROUP_TYPES} from \"../../../../../interfaces/wizardItemInterface\";\r\nimport Misc from \"../../../../../misc/misc\";\r\nimport {getCompressedFeature} from \"../../../../../misc/backendFunctions\";\r\nimport {getBvFeatures} from \"../../../../../api/server-api\";\r\nimport store from \"../../../../../store\";\r\nimport {setWizardMissingFeatures} from \"../../../../../actions/wizardFunctions\";\r\nimport {getFeatureGroupFeaturesQuantity} from \"../../lookNavigationFunctions\";\r\nimport {AVAILABLE_VISUALIZER_TYPES, getCommonVisualizerType} from \"../../../../../config\";\r\nimport {isSameVisualizerWizard, selectedWizardGroupIsNotInCurrentStepAnymore} from \"./lookWizardFunctions2\";\r\n\r\nconst regexForWizardId = /\\/wizard\\/(.*?)$/;\r\n\r\n/**\r\n * returns current wizard list for visualizer\r\n * @param wizardList {[wizardItemInterface]}\r\n * @param activePreset {string|number}\r\n * @returns {wizardItemInterface[]}\r\n */\r\nexport const getCurrentWizardList = (wizardList, activePreset) => {\r\n return wizardList.filter(wizardItem => !wizardIsDisabled(wizardItem, activePreset))\r\n}\r\n\r\n/**\r\n * returns current wizard step section items\r\n * @param wizardItem {wizardItemInterface}\r\n * @param activePreset {string|number}\r\n * @returns {boolean}\r\n */\r\nexport const wizardIsDisabled = (wizardItem, activePreset) => {\r\n if (!isSameVisualizerWizard(wizardItem)) {\r\n return true\r\n }\r\n return !wizardItem.disabledScenes || (typeof activePreset !== \"undefined\" && wizardItem.disabledScenes.includes(activePreset))\r\n}\r\n\r\n/**\r\n * checks if we need to show the wizard in the project scope and shoppingcart for the QuotingTool\r\n * @param wizardList {[wizardItemInterface]}\r\n * @param wizardIsActive {boolean}\r\n * @returns {boolean}\r\n */\r\nexport const showWizardInsteadOfQT = (wizardList, wizardIsActive) => {\r\n return wizardIsActive && wizardList.length\r\n}\r\n\r\n/**\r\n * returns current wizard step section items\r\n * @param wizardList {[wizardItemInterface]}\r\n * @param location {object}\r\n * @returns wizardActiveItem {wizardItemInterface}\r\n */\r\nexport const getActiveWizardItem = (wizardList, location) => {\r\n if (!Array.isArray(wizardList) || !location) {\r\n return null\r\n }\r\n const match = location.pathname.match(regexForWizardId);\r\n if (!Array.isArray(match) || !match[1]) {\r\n return null\r\n }\r\n const stringId = +match[1];\r\n return wizardList.find(wizItem => wizItem.id === stringId);\r\n}\r\n\r\n\r\n/**\r\n * returns layout's featureGroup\r\n * @param wizardGroup {wizardGroupInterface}\r\n * @param layout {object}\r\n * @returns featureGroup {featureGroupInterface}\r\n */\r\nexport const getFeatureGroupFromWizardGroup = (wizardGroup, layout = getCurrentLayout()) => {\r\n if (!wizardGroup) {\r\n return null\r\n }\r\n if (layout.visualizerType === AVAILABLE_VISUALIZER_TYPES.Kitchen || layout.visualizerType === AVAILABLE_VISUALIZER_TYPES.kvScene) {\r\n switch (wizardGroup.groupName) {\r\n case \"Edge Profile\":\r\n return layout.getFeatureGroupByPartId(wizardGroup.isCenterIslandGroup ? \"center_island_edge\" : \"edge_profile\")\r\n case \"Sink\":\r\n return layout.getFeatureGroupByPartId(wizardGroup.isCenterIslandGroup ? \"center_island_sink\" : \"sink\")\r\n case \"Faucet\":\r\n return layout.getFeatureGroupByPartId(wizardGroup.isCenterIslandGroup ? \"center_island_faucet\" : \"faucet\")\r\n default:\r\n break;\r\n }\r\n }\r\n return layout.getFeatureGroupByGroupName(wizardGroup.groupName)\r\n}\r\n\r\n/**\r\n * returns current wizard step section items\r\n * @param wizardList {[wizardItemInterface]}\r\n * @param partId {string}\r\n * @param activePreset {number|string} // check\r\n * @param firstOnly {boolean} // determines if we need to check only first step featureGroups or all\r\n * @returns wizardActiveItem {wizardItemInterface}\r\n */\r\nexport const categoryIsInTheWizard = (wizardList, partId = \"\", activePreset, firstOnly = true) => {\r\n if (!Array.isArray(wizardList) || !partId) {\r\n return null\r\n }\r\n return wizardList.find(wizItem => {\r\n if (wizardIsDisabled(wizItem, activePreset)) {\r\n return false\r\n }\r\n let lookWhere = firstOnly ? getCurrentGroupsFromSource(\"0\", wizItem) : wizItem.wizardGroups;\r\n if (firstOnly && Array.isArray(lookWhere) && lookWhere.length && lookWhere.every(wizGroup => wizGroup.nodeType === \"custom\")) {\r\n lookWhere = lookWhere.reduce((total, wizGroup) => {\r\n return [...total, ...getCurrentGroupsFromSource(wizGroup.id, wizItem)]\r\n }, []);\r\n }\r\n return lookWhere.some(wizardGroup => {\r\n if (wizardGroup.nodeType !== \"group\") {\r\n return false;\r\n }\r\n const featureGroup = getFeatureGroupFromWizardGroup(wizardGroup);\r\n if (!featureGroup) {\r\n return false\r\n }\r\n return featureGroup.partId === partId\r\n })\r\n })\r\n}\r\n\r\n/**\r\n * returns current wizard step section items\r\n * @param wizardList {[wizardItemInterface]}\r\n * @param params {object}\r\n * @returns wizardActiveItem {wizardItemInterface}\r\n */\r\nexport const getMaterialsWizardItem = (wizardList, params) => {\r\n if (!Array.isArray(wizardList) || !params) {\r\n return null\r\n }\r\n return wizardList.find(wizItem => {\r\n if (!isSameVisualizerWizard(wizItem)) {\r\n return false\r\n }\r\n return (Misc.getUrlFromString(wizItem.name) === params.partName || wizItem.id === +params.partName)\r\n }) || getDefaultMaterialsWizardItem()\r\n}\r\n\r\n/**\r\n * returns default wizard on switch to page\r\n * @returns wizardActiveItem {wizardItemInterface}\r\n */\r\nexport const getDefaultMaterialsWizardItem = () => {\r\n const {quotesState, wizardState} = store.getState();\r\n const {wizardList, allWizardsValues, wizardActiveItem} = wizardState;\r\n const {activeQuoteIndex} = quotesState;\r\n if (!Array.isArray(wizardList)) {\r\n return null\r\n }\r\n const currentVisType = getCommonVisualizerType();\r\n const lastSelectedWizardInThisQuote = Array.isArray(allWizardsValues) ? allWizardsValues.find(wizItem => {\r\n return wizItem.quoteIndex === activeQuoteIndex && wizItem.isLastActiveWizard\r\n && isSameVisualizerWizard(wizItem, currentVisType)\r\n }) : null;\r\n if (lastSelectedWizardInThisQuote) {\r\n const foundWizItem = wizardList.find(wizItem => wizItem.id === lastSelectedWizardInThisQuote.wizardItemId);\r\n if (foundWizItem) {\r\n return foundWizItem\r\n }\r\n }\r\n if (wizardActiveItem && isSameVisualizerWizard(wizardActiveItem, currentVisType)) {\r\n return wizardActiveItem\r\n }\r\n return wizardList.find(wizItem => isSameVisualizerWizard(wizItem, currentVisType)) || wizardList[0]\r\n}\r\n\r\nlet cachedSiblingFeatures = []; // {wizardId: number, groups: [{}, {}], totalFeatures: [] }\r\n\r\n/**\r\n * returns current wizard step section items\r\n * @param source {string}\r\n * @param wizardActiveItem {wizardItemInterface}\r\n * @returns array {[wizardGroupInterface]}\r\n */\r\nexport const getCurrentGroupsFromSource = (source, wizardActiveItem) => {\r\n if (!wizardActiveItem) {\r\n return []\r\n }\r\n const siblingGroups = wizardActiveItem.wizardGroups.filter(wizGroup => {\r\n return wizardActiveItem.wizardEdges.some(wizEdge => wizEdge.source === source && wizEdge.target === wizGroup.id)\r\n });\r\n // console.log(\"siblingGroups\", siblingGroups);\r\n const areSameSiblingGroups = siblingGroups.length > 1 && siblingGroups.every(siblingGroup => {\r\n return (siblingGroup.nodeType === WIZARD_GROUP_TYPES.group) && (siblingGroup.groupName === siblingGroups[0].groupName)\r\n });\r\n if (areSameSiblingGroups) {\r\n // console.log(\"cachedSiblingFeatures\", cachedSiblingFeatures);\r\n\r\n if (siblingGroups.every(wizardGroup => wizardGroup.useIncluded && wizardGroup.featuresIncluded)) { // new logic\r\n let featuresIncluded = [];\r\n const alreadyCached = cachedSiblingFeatures.find(cacheObject => {\r\n return (cacheObject.wizardId === wizardActiveItem.id) && (cacheObject.groups.every((wGroup, wGroupIndex) => {\r\n return siblingGroups[wGroupIndex] && (wGroup.id === siblingGroups[wGroupIndex].id)\r\n }))\r\n })\r\n // console.log(\"alreadyCached\", alreadyCached);\r\n if (alreadyCached) {\r\n featuresIncluded = alreadyCached.totalFeatures;\r\n } else {\r\n featuresIncluded = siblingGroups.reduce((total, wizardGroup) => {\r\n wizardGroup.featuresIncluded.forEach(included => {\r\n if (!total.some(exclObj => (exclObj.featureDefinitionId === included.featureDefinitionId))) {\r\n total.push(included)\r\n }\r\n })\r\n return total\r\n }, []);\r\n cachedSiblingFeatures.push({\r\n wizardId: wizardActiveItem.id,\r\n groups: siblingGroups,\r\n totalFeatures: featuresIncluded\r\n })\r\n }\r\n const newGroup = Object.assign({}, siblingGroups[0], {\r\n mergedGroups: siblingGroups,\r\n featuresExcluded: [], // not sure if we need it\r\n featuresIncluded\r\n })\r\n return [newGroup]\r\n }\r\n\r\n const allFeaturesExcluded = siblingGroups.reduce((total, wizardGroup) => {\r\n wizardGroup.featuresExcluded.forEach(excluded => {\r\n if (!excluded) {\r\n return\r\n }\r\n if (typeof excluded === \"object\") { // new logic for excluded\r\n if (!total.some(exclObj => (typeof exclObj === \"object\") && (exclObj.featureDefinitionId === excluded.featureDefinitionId))) {\r\n total.push(excluded)\r\n }\r\n } else if (!total.includes(excluded)) {\r\n total.push(excluded)\r\n }\r\n })\r\n return total\r\n }, []);\r\n const featuresExcluded = allFeaturesExcluded.filter(exclFeature => {\r\n return siblingGroups.every(siblingGroup => {\r\n if (typeof exclFeature === \"object\") {\r\n return siblingGroup.featuresExcluded.some(exclObj => {\r\n return (exclObj !== null)\r\n && (typeof exclObj === \"object\")\r\n && (exclObj.featureDefinitionId === exclFeature.featureDefinitionId)\r\n })\r\n }\r\n return siblingGroup.featuresExcluded.includes(exclFeature) // reaally old support\r\n })\r\n })\r\n const newGroup = Object.assign({}, siblingGroups[0], {\r\n mergedGroups: siblingGroups,\r\n featuresExcluded\r\n })\r\n return [newGroup]\r\n }\r\n return siblingGroups\r\n}\r\n\r\nexport const getCorrectedWizardGroupId = (stepGroups, stepSelectedValue) => {\r\n if ((stepGroups.length === 1) && stepGroups[0].mergedGroups && stepSelectedValue && stepSelectedValue.wizardGroup\r\n && (stepSelectedValue.wizardGroup.groupName === stepGroups[0].groupName)\r\n && stepGroups[0].mergedGroups.some(wizG => wizG.id === stepSelectedValue.wizardGroup.id)) {\r\n const correctedWizG = Object.assign({}, stepGroups[0], {\r\n id: stepSelectedValue.wizardGroup.id\r\n });\r\n return [correctedWizG]\r\n }\r\n return stepGroups\r\n}\r\n\r\n/**\r\n * returns fixed wizard group for merged groups\r\n * @param wizardGroup {wizardGroupInterface}\r\n * @param feature {featureInterface}\r\n * @returns {wizardGroupInterface}\r\n */\r\nexport const getCorrectedWizardGroupForFeature = (wizardGroup, feature) => {\r\n if (wizardGroup.mergedGroups && feature) {\r\n const realWizardGroup = wizardGroup.mergedGroups.find(wizG => !navItemIsExcluded({part: feature}, wizG));\r\n if (realWizardGroup && (realWizardGroup.id !== wizardGroup.id)) {\r\n return Object.assign({}, wizardGroup, {\r\n id: realWizardGroup.id\r\n })\r\n }\r\n }\r\n return wizardGroup\r\n}\r\n\r\n/**\r\n * returns current wizard step section items\r\n * @param wizardActiveItem {wizardItemInterface}\r\n * @param wizardActiveStep {number}\r\n * @param wizardSelectedValues {object}\r\n * @param prevStepGroups {[wizardGroupInterface]}\r\n * @param additionalWizardValuesToCheck {object}\r\n * @returns {array}\r\n */\r\nexport const getCurrentGroups = (wizardActiveItem,\r\n wizardActiveStep,\r\n wizardSelectedValues,\r\n prevStepGroups = [],\r\n additionalWizardValuesToCheck= null) => {\r\n if (!wizardActiveItem || wizardActiveStep < 0) {\r\n return []\r\n }\r\n const stepStr = \"\" + wizardActiveStep;\r\n\r\n const toCheckValue = wizardSelectedValues[wizardActiveStep] || (additionalWizardValuesToCheck\r\n ? additionalWizardValuesToCheck[wizardActiveStep] : null);\r\n\r\n if (wizardActiveStep === 0) {\r\n return getCorrectedWizardGroupId(\r\n getCurrentGroupsFromSource(stepStr, wizardActiveItem),\r\n toCheckValue\r\n )\r\n }\r\n\r\n const selectedPrevStep = wizardSelectedValues[wizardActiveStep - 1];\r\n if (!selectedPrevStep || !selectedPrevStep.wizardGroup\r\n || (prevStepGroups.length && selectedWizardGroupIsNotInCurrentStepAnymore(selectedPrevStep, prevStepGroups))) {\r\n if (prevStepGroups.length && prevStepGroups[0].id) {\r\n if (additionalWizardValuesToCheck) { // here we check also previously selected values to make steps similar to prev choices\r\n let foundPreviouslySelectedGroup = null;\r\n if (prevStepGroups.every(wg => wg.nodeType === \"custom\")) {\r\n Object.keys(additionalWizardValuesToCheck).forEach(key => {\r\n if ((key > Object.keys(wizardSelectedValues).length)\r\n && !additionalWizardValuesToCheck[key].partId\r\n && additionalWizardValuesToCheck[key].wizardGroup) {\r\n prevStepGroups.forEach(wg => {\r\n if (wg.id === additionalWizardValuesToCheck[key].wizardGroup.id) {\r\n foundPreviouslySelectedGroup = wg;\r\n }\r\n });\r\n }\r\n });\r\n } else {\r\n // here we can add simple feature group, but no need for now\r\n }\r\n if (foundPreviouslySelectedGroup) {\r\n return getCorrectedWizardGroupId(\r\n getCurrentGroupsFromSource(foundPreviouslySelectedGroup.id, wizardActiveItem),\r\n toCheckValue\r\n )\r\n }\r\n }\r\n const suggestedStepGroups = getCurrentGroupsFromSource(prevStepGroups[0].id, wizardActiveItem);\r\n if ((suggestedStepGroups.length === 1 && (suggestedStepGroups[0].nodeType === \"group\") && suggestedStepGroups[0].mergedGroups && suggestedStepGroups[0].mergedGroups.length)\r\n && additionalWizardValuesToCheck && Object.keys(additionalWizardValuesToCheck).length) {\r\n // here we check if there are selections in the old flow that might actually help to select current product\r\n if (toCheckValue && toCheckValue.wizardGroup\r\n && (toCheckValue.wizardGroup.groupName === suggestedStepGroups[0].groupName)\r\n && toCheckValue.selectedFeature\r\n && suggestedStepGroups[0].mergedGroups.some(wizG => !navItemIsExcluded({part: toCheckValue.selectedFeature}, wizG))) {\r\n return [getCorrectedWizardGroupForFeature(\r\n suggestedStepGroups[0],\r\n toCheckValue.selectedFeature\r\n )]\r\n } else if (!toCheckValue || !toCheckValue.wizardGroup || (toCheckValue.wizardGroup.groupName !== suggestedStepGroups[0].groupName)) {\r\n // here we check if there are selections in the old flow that might actually help to select current product\r\n for (let key = Object.keys(wizardSelectedValues).length + 1; key < Object.keys(additionalWizardValuesToCheck).length; key++) {\r\n if (key && (key > Object.keys(wizardSelectedValues).length)\r\n && additionalWizardValuesToCheck[key]\r\n && additionalWizardValuesToCheck[key].wizardGroup\r\n && additionalWizardValuesToCheck[key].selectedFeature\r\n && (additionalWizardValuesToCheck[key].wizardGroup.groupName === suggestedStepGroups[0].groupName)\r\n && suggestedStepGroups[0].mergedGroups.some(wizG => !navItemIsExcluded({part: additionalWizardValuesToCheck[key].selectedFeature}, wizG))) {\r\n return [getCorrectedWizardGroupForFeature(\r\n suggestedStepGroups[0],\r\n additionalWizardValuesToCheck[key].selectedFeature\r\n )]\r\n }\r\n }\r\n }\r\n }\r\n return getCorrectedWizardGroupId(\r\n suggestedStepGroups,\r\n toCheckValue\r\n )\r\n }\r\n // console.log(\"Previous step is not selected! Check selected values --> \", wizardSelectedValues);\r\n return []\r\n }\r\n\r\n if (selectedPrevStep && selectedPrevStep.wizardGroup && selectedPrevStep.wizardGroup.mergedGroups && selectedPrevStep.selectedFeature) {\r\n const wizardGroupWithSelectedFeature = selectedPrevStep.wizardGroup.mergedGroups.find(wizGroup => {\r\n return !navItemIsExcluded({part: selectedPrevStep.selectedFeature}, wizGroup)\r\n });\r\n if (wizardGroupWithSelectedFeature) {\r\n return getCorrectedWizardGroupId(\r\n getCurrentGroupsFromSource(wizardGroupWithSelectedFeature.id, wizardActiveItem),\r\n toCheckValue\r\n )\r\n }\r\n }\r\n\r\n // const prevStepStr = \"\" + (wizardActiveStep - 1);\r\n // const prevGroups = getCurrentGroupsFromSource(prevStepStr, wizardActiveItem);\r\n // if (prevGroups.length > 1 && wizardActiveStep > 0) {\r\n // return [selectedPrevStep.wizardGroup]\r\n // }\r\n\r\n return getCorrectedWizardGroupId(\r\n getCurrentGroupsFromSource(selectedPrevStep.wizardGroup.id, wizardActiveItem),\r\n toCheckValue\r\n )\r\n}\r\n\r\n/**\r\n * returns current wizard step section items\r\n * @param wizardActiveItem {wizardItemInterface}\r\n * @param wizardSelectedValues {object}\r\n * @param returnAllSteps {boolean}\r\n * @param additionalWizardValuesToCheck {object}\r\n * @returns {array}\r\n */\r\nexport const getAvailableSteps = (wizardActiveItem, wizardSelectedValues, returnAllSteps, additionalWizardValuesToCheck = null) => {\r\n if (!wizardActiveItem || !wizardActiveItem.wizardGroups || !wizardActiveItem.wizardEdges) {\r\n return []\r\n }\r\n\r\n const maxWizardSteps = 50;\r\n\r\n let stepsArray = [{\r\n stepIndex: 0,\r\n stepGroups: getCorrectedWizardGroupId(getCurrentGroupsFromSource(\"0\", wizardActiveItem), wizardSelectedValues[0]),\r\n }];\r\n\r\n for (let i = 1; i <= maxWizardSteps; i++) {\r\n const prevStepGroups = returnAllSteps && stepsArray[i - 1] ? stepsArray[i - 1].stepGroups : [];\r\n const currentGroups = getCurrentGroups(wizardActiveItem, i, wizardSelectedValues, prevStepGroups, additionalWizardValuesToCheck)\r\n if (!currentGroups.length) {\r\n break;\r\n }\r\n stepsArray.push({\r\n stepIndex: i,\r\n stepGroups: currentGroups\r\n })\r\n }\r\n\r\n return stepsArray\r\n}\r\n\r\n/**\r\n * returns current wizard step section items\r\n * @param currentGroups {[wizardGroupInterface]}\r\n * @returns {array}\r\n */\r\nexport const getWizardStepCommonCoords = (currentGroups) => {\r\n if (!currentGroups.length) {\r\n return []\r\n }\r\n let commonCoords = {};\r\n for (let i = 0; i < currentGroups.length; i++) {\r\n const wizardGroup = currentGroups[i];\r\n const featureGroup = getFeatureGroupFromWizardGroup(wizardGroup);\r\n if (!featureGroup) {\r\n continue\r\n }\r\n const currentCoords = featureGroup.activeFeature ? getFeatureCoords(featureGroup.activeFeature) : getCommonCoords(featureGroup);\r\n commonCoords = compareCoords(currentCoords, currentCoords);\r\n }\r\n\r\n return commonCoords\r\n}\r\n\r\n/**\r\n * returns closest wizard group with nodeType === group\r\n * @param wizardGroup {wizardGroupInterface}\r\n * @param wizardActiveItem {wizardItemInterface}\r\n * @returns {array}\r\n */\r\nexport const findParentWizardFeatureGroup = (wizardGroup, wizardActiveItem) => {\r\n if (!wizardGroup || !wizardActiveItem) {\r\n return null\r\n }\r\n let wizardFeatureParentGroup = null;\r\n\r\n let maxStack = 5;\r\n let currentTry = 0;\r\n const recursiveFindParent = (checkWizardGroup) => {\r\n const sourceEdge = wizardActiveItem.wizardEdges.find(wizEdge => wizEdge.target === checkWizardGroup.id);\r\n const nextToCheckWizardGroup = wizardActiveItem.wizardGroups.find(wizGroup => wizGroup.id === sourceEdge.source);\r\n if (nextToCheckWizardGroup && nextToCheckWizardGroup.nodeType === \"group\") {\r\n wizardFeatureParentGroup = nextToCheckWizardGroup;\r\n } else if (nextToCheckWizardGroup && currentTry < maxStack) {\r\n currentTry++;\r\n recursiveFindParent(nextToCheckWizardGroup)\r\n }\r\n }\r\n recursiveFindParent(wizardGroup)\r\n\r\n return wizardFeatureParentGroup\r\n}\r\n/**\r\n * returns closest wizard group with nodeType === group\r\n * @param featureGroup {featureGroupInterface}\r\n * @param selectedFilters {array}\r\n * @returns {featureInterface}\r\n */\r\nexport const findFeatureBySelectedFilters = (featureGroup, selectedFilters) => {\r\n if (!featureGroup || !selectedFilters) {\r\n return null\r\n }\r\n if (featureGroup.activeFeature && featureHasSelectedFilters(featureGroup.activeFeature, selectedFilters)) {\r\n return featureGroup.activeFeature\r\n }\r\n const layout = getCurrentLayout();\r\n const navItems = layout.designNavigationItems({part: featureGroup}, selectedFilters);\r\n if (!navItems.length) {\r\n return null\r\n }\r\n if (navItems.length > 1 && featureGroup.activeFeature && featureGroup.activeFeature.dbFeature.sharedFeatureName.includes(\".\")) {\r\n const skuColor = \".\" + featureGroup.activeFeature.dbFeature.sharedFeatureName.split(\".\")[1];\r\n const sameColor = navItems.find(navItem => navItem.part.dbFeature.sharedFeatureName.includes(skuColor));\r\n if (sameColor) {\r\n return sameColor.part\r\n }\r\n }\r\n return navItems[0].part\r\n}\r\n\r\n/**\r\n * @param currentFilterValue {object} filterValueInterface\r\n * @param filterGroup {object} filterGroupInterface\r\n * @returns {object}\r\n */\r\nexport const getFilterValueThumbnailAndStyles = (currentFilterValue, filterGroup) => {\r\n\r\n const getFilterItemThumbnail = () => {\r\n const additionalImages = currentFilterValue.additionalImages;\r\n if (Array.isArray(additionalImages) && additionalImages.length) {\r\n return additionalImages[0].imageUrl\r\n }\r\n return s3FilterImagePath(currentFilterValue.icon);\r\n }\r\n\r\n let thumbnail = getFilterItemThumbnail();\r\n const isColor = (filterGroup.name || \"\").toLowerCase().includes(\"color\");\r\n\r\n const styles = {\r\n backgroundSize: isColor ? \"cover\" : \"contain\",\r\n backgroundRepeat: \"no-repeat\",\r\n backgroundPosition: \"center\",\r\n };\r\n if (thumbnail) {\r\n styles.backgroundImage = \"url(\" + thumbnail + \")\";\r\n }\r\n if (!thumbnail && currentFilterValue && isColor) {\r\n styles.backgroundColor = currentFilterValue.value;\r\n }\r\n\r\n return {thumbnail, styles}\r\n}\r\n\r\n/**\r\n * @param navItem {navItemInterface}\r\n * @param wizardGroup {wizardGroupInterface}\r\n * @returns {boolean}\r\n */\r\nexport const navItemIsExcluded = (navItem, wizardGroup) => {\r\n const {sku, featureDefinitionID, customDisplayName} = navItem.part.dbFeature;\r\n const {partName} = navItem.part; // it replaces the {groupName + \"-\"} from the name, same logic as we have in the dashboard\r\n // if (customDisplayName === \"Only Front Edge\") {\r\n // console.log(\"checking excluded from wizardGroup\", wizardGroup);\r\n // debugger;//eslint-disable-line\r\n // }\r\n if (wizardGroup.useIncluded && wizardGroup.featuresIncluded) {\r\n return !wizardGroup.featuresIncluded.some(includedFeature => {\r\n return (includedFeature.sharedFeatureName && (includedFeature.sharedFeatureName === navItem.part.getLowerCasedSharedFeatureName()))\r\n || (includedFeature.featureDefinitionId === featureDefinitionID)\r\n || (!includedFeature.sharedFeatureName && (includedFeature.name === customDisplayName))\r\n || (includedFeature.sku && sku && (includedFeature.sku === sku))\r\n })\r\n }\r\n for (let excluded of wizardGroup.featuresExcluded) {\r\n if (excluded && (typeof excluded === \"object\")) {\r\n if (\r\n (excluded.sharedFeatureName && (excluded.sharedFeatureName === navItem.part.getLowerCasedSharedFeatureName()))\r\n || (excluded.featureDefinitionId === featureDefinitionID)\r\n || (excluded.name === customDisplayName)\r\n || (excluded.sku && sku && (excluded.sku === sku))\r\n ) {\r\n return true\r\n }\r\n // if (excluded.name === customDisplayName || excluded.name === sharedFeatureName || (excluded.sku && sku && (excluded.sku === sku))) {\r\n } else if (excluded) {\r\n // if (excluded === sku || excluded === sharedFeatureName || excluded === partName || excluded === featureDefinitionID) {\r\n if (excluded === sku || excluded === partName || excluded === featureDefinitionID) {\r\n return true\r\n }\r\n }\r\n }\r\n return false\r\n}\r\n\r\n/**\r\n * @param navItems {[navItemInterface]}\r\n * @param wizardGroup {wizardGroupInterface}\r\n * @returns {[navItemInterface]}\r\n */\r\nexport const filterWizardNavItems = (navItems, wizardGroup) => {\r\n if (!wizardGroup.useIncluded && (!Array.isArray(wizardGroup.featuresExcluded) || !wizardGroup.featuresExcluded.length)) {\r\n return navItems\r\n }\r\n // console.log(\"navItems to filter\", navItems);\r\n return navItems.filter(navItem => !navItemIsExcluded(navItem, wizardGroup));\r\n}\r\n\r\n/**\r\n * @param wizardSelectedValues {object} // selected wizard steps values\r\n * @param wizardActiveStep {number} wizardActiveStep\r\n * @param wizardActiveItem {wizardItemInterface} wizardItemInterface\r\n * @param wizardGroup {wizardGroupInterface} wizardGroupInterface\r\n * @param featureGroup {featureGroupInterface} featureGroupInterface\r\n * @param filterGroups {[filterGroupInterface]}\r\n * @param searchText {string}\r\n * @param filters {object}\r\n * @param shopPageOpened {boolean}\r\n * @param showPrevStepsColorFirst {boolean}\r\n * @returns {array}\r\n */\r\nexport const getCurrentWizardNavItems = (wizardSelectedValues,\r\n wizardActiveStep,\r\n wizardActiveItem,\r\n wizardGroup,\r\n featureGroup = null,\r\n filterGroups = [],\r\n searchText = \"\",\r\n filters = [],\r\n shopPageOpened = false,\r\n showPrevStepsColorFirst = false) => {\r\n\r\n const layout = getCurrentLayout();\r\n featureGroup = featureGroup || getFeatureGroupFromWizardGroup(wizardGroup);\r\n if (!featureGroup) {\r\n return []\r\n }\r\n\r\n const selectedStepsReversed = Object.keys(wizardSelectedValues).reverse() // is needed to take last selected steps first\r\n\r\n selectedStepsReversed.forEach(selectedStep => {\r\n const {selectedFilter} = wizardSelectedValues[selectedStep];\r\n if (!selectedFilter || +selectedStep >= wizardActiveStep) {\r\n return\r\n }\r\n const parentWizardGroup = findParentWizardFeatureGroup(wizardSelectedValues[selectedStep].wizardGroup, wizardActiveItem);\r\n if (!parentWizardGroup) {\r\n return null\r\n }\r\n const parentFeatureGroup = getFeatureGroupFromWizardGroup(parentWizardGroup);\r\n if (parentFeatureGroup && parentFeatureGroup.partId === featureGroup.partId) {\r\n filters.push({\r\n filterId: selectedFilter.id,\r\n filterGroupId: selectedFilter.filterGroup_id,\r\n })\r\n }\r\n });\r\n\r\n let navItems = layout.designNavigationItems(\r\n {part: featureGroup},\r\n filters,\r\n searchText,\r\n featureGroup.activeFeature,\r\n \"all\",\r\n filterGroups,\r\n {returnAllFeatures: shopPageOpened}\r\n );\r\n\r\n navItems = filterWizardNavItems(navItems, wizardGroup);\r\n\r\n if (featureGroup.partId === \"vanity_sink\") {\r\n const selectedPrevStep = wizardSelectedValues[wizardActiveStep - 1];\r\n if (selectedPrevStep && selectedPrevStep.partId === \"vanity_faucet\" && selectedPrevStep.selectedFeature) {\r\n const faucetParent = selectedPrevStep.selectedFeature.getParent();\r\n if (selectedPrevStep.selectedFeature.matchesMetaForArrayOfConditions(faucetParent.getArrayOfConditions())) {\r\n const selectedFaucetConditions = faucetParent.getActiveFeatureConditions(selectedPrevStep.selectedFeature)\r\n const filteredNavItems = navItems.filter(navItem => {\r\n return selectedFaucetConditions.every(condition => navItem.part.matchesMetaForCondition(condition.propName, condition.propValue))\r\n });\r\n // console.log(\"navItems left\", filteredNavItems);\r\n return filteredNavItems\r\n }\r\n }\r\n }\r\n\r\n if (showPrevStepsColorFirst && !wizardSelectedValues[wizardActiveStep]) {\r\n const allSelectedColors = selectedStepsReversed.reduce((total, selectedStep) => {\r\n if (wizardSelectedValues[selectedStep] && wizardSelectedValues[selectedStep].selectedFeature) {\r\n const colorName = wizardSelectedValues[selectedStep].selectedFeature.getColorName(filterGroups);\r\n if (colorName && !total.includes(colorName)) {\r\n total.push(colorName)\r\n }\r\n }\r\n return total\r\n }, []);\r\n // console.log(\"navItems222\", navItems);\r\n // console.log(\"allSelectedColors\", allSelectedColors);\r\n // console.log(\"wizardGroup\", wizardGroup);\r\n if (allSelectedColors.length) {\r\n navItems = navItems.map(navItem => {\r\n if (navItem.colorOptions && navItem.colorOptions.length) {\r\n const currentColorOption = navItem.part.getColorName(filterGroups);\r\n if (currentColorOption !== allSelectedColors[0]) {\r\n let optionMatchForPrevSelectedColor = null;\r\n allSelectedColors.forEach(selectedColor => {\r\n if (!optionMatchForPrevSelectedColor && (currentColorOption !== selectedColor)) {\r\n optionMatchForPrevSelectedColor = navItem.colorOptions.find(option => {\r\n return option.feature.getColorName(filterGroups) === selectedColor\r\n })\r\n }\r\n })\r\n if (optionMatchForPrevSelectedColor) {\r\n // console.log(\"replaced! from\", navItem);\r\n // console.log(\"replaced! to\", {part: optionMatchForPrevSelectedColor});\r\n return {part: optionMatchForPrevSelectedColor.feature}\r\n }\r\n }\r\n }\r\n return navItem\r\n })\r\n }\r\n }\r\n\r\n\r\n return navItems\r\n}\r\n\r\n/**\r\n * is used for context menu, to detect vanity wizard or shower wizard\r\n * @param partIdGroups {[string]}\r\n * @param wizardList {[wizardItemInterface]}\r\n * @param activePreset {string|number}\r\n * @returns {wizardItemInterface}\r\n */\r\nexport const getExistingWizardForGroups = (partIdGroups, wizardList, activePreset) => {\r\n return wizardList.find(wizardItem => {\r\n if (wizardIsDisabled(wizardItem, activePreset)) {\r\n return false\r\n }\r\n // const currentGroups = getCurrentGroups(wizardItem, 0, {});\r\n // // console.log(\"currentGroups\", currentGroups);\r\n // if (!currentGroups || !currentGroups.length) {\r\n // return false\r\n // }\r\n return wizardItem.wizardGroups.some(wizardGroup => {\r\n const featureGroup = getFeatureGroupFromWizardGroup(wizardGroup)\r\n return featureGroup && partIdGroups.includes(featureGroup.partId)\r\n })\r\n });\r\n}\r\n\r\n/**\r\n * is used for removing the layers from the canvas which are not selected in the wizard\r\n * @param wizardActiveItem {wizardItemInterface}\r\n * @param wizardSelectedValues {object}\r\n * @param layers {[]}\r\n * @returns partIdGroups {[string]}\r\n */\r\nexport const getFilteredLayersForActiveWizard = (wizardActiveItem, wizardSelectedValues, layers) => {\r\n if (!wizardActiveItem || !wizardActiveItem.hideItems) {\r\n return layers\r\n }\r\n wizardActiveItem.wizardGroups.forEach(wizardGroup => {\r\n const featureGroup = getFeatureGroupFromWizardGroup(wizardGroup);\r\n if (featureGroup && !Object.keys(wizardSelectedValues).some(stepIndex => {\r\n return wizardSelectedValues[stepIndex].partId === featureGroup.partId && wizardSelectedValues[stepIndex].selectedFeature\r\n })) {\r\n layers = layers.filter(layer => layer.partId !== featureGroup.partId) // if there is a step and it is not selected - remove it\r\n }\r\n })\r\n return layers\r\n}\r\n\r\n/**\r\n * is used for removing the feature groups to prevent them appear after the wizard is finished\r\n * @param wizardActiveItem {wizardItemInterface}\r\n * @param wizardSelectedValues {object}\r\n */\r\nexport const disableNotSelectedFeatureGroups = (wizardActiveItem, wizardSelectedValues) => {\r\n wizardActiveItem.wizardGroups.forEach(wizardGroup => {\r\n const featureGroup = getFeatureGroupFromWizardGroup(wizardGroup);\r\n if (featureGroup && !Object.keys(wizardSelectedValues).some(stepIndex => {\r\n return wizardSelectedValues[stepIndex].partId === featureGroup.partId && wizardSelectedValues[stepIndex].selectedFeature\r\n })) {\r\n featureGroup.disabled = true;\r\n if (featureGroup.layerPositions) { // we need it here to prevent adding to the cart through restore cart on item change\r\n Object.keys(featureGroup.layerPositions).forEach(position => {\r\n featureGroup.layerPositions[position] = null;\r\n })\r\n }\r\n if (featureGroup.disabledClick) {\r\n featureGroup.disabledClick()\r\n }\r\n }\r\n })\r\n}\r\n\r\n/**\r\n * is used to compress the data that will be passed in the job data back and force\r\n * @param allWizardsValues {array}\r\n * @param allWizardsValues {array}\r\n */\r\nexport const getCompressedAllWizardValues = (allWizardsValues) => {\r\n const allWizardsValuesToSave = allWizardsValues.map(newWizObject => {\r\n let wizValues = {};\r\n Object.keys(newWizObject.wizardSelectedValues).forEach(stepIndex => {\r\n wizValues[stepIndex] = Object.assign({}, newWizObject.wizardSelectedValues[stepIndex])\r\n if (newWizObject.wizardSelectedValues[stepIndex].wizardGroup) {\r\n wizValues[stepIndex].wizardGroup = Object.assign(\r\n {},\r\n newWizObject.wizardSelectedValues[stepIndex].wizardGroup,\r\n {featuresExcluded: [], featuresIncluded: []} // to keep clean in json\r\n )\r\n if (wizValues[stepIndex].wizardGroup.mergedGroups) {\r\n wizValues[stepIndex].wizardGroup.mergedGroups = wizValues[stepIndex].wizardGroup.mergedGroups.map(wizGroup => {\r\n return {id: wizGroup.id, groupName: wizGroup.groupName}\r\n });\r\n }\r\n }\r\n if (newWizObject.wizardSelectedValues[stepIndex].selectedFeature) {\r\n wizValues[stepIndex].selectedFeature = getCompressedFeature(\r\n null,\r\n newWizObject.wizardSelectedValues[stepIndex].selectedFeature,\r\n newWizObject.quoteIndex\r\n ); // to keep clean in json\r\n }\r\n })\r\n return Object.assign({}, newWizObject, {wizardSelectedValues: wizValues})\r\n });\r\n // console.log(\"allWizardsValues to save ->\", allWizardsValuesToSave);\r\n return allWizardsValuesToSave\r\n}\r\n\r\n/**\r\n * checks if the following step is disabled\r\n * @param stepIndex {number}\r\n * @param wizardSelectedValues {object}\r\n * @param wizardSteps {array}\r\n * @returns {boolean}\r\n */\r\nexport const getWizardStepIsDisabled = (stepIndex, wizardSelectedValues, wizardSteps) => {\r\n if (stepIndex === 0) {\r\n return false\r\n }\r\n if (wizardSelectedValues[stepIndex - 1] && wizardSelectedValues[stepIndex - 1].wizardGroup) {\r\n return false // prev step is selected, current is not disabled\r\n }\r\n const prevWizardGroup = wizardSelectedValues[stepIndex - 1]\r\n ? wizardSelectedValues[stepIndex - 1].wizardGroup\r\n : wizardSteps[stepIndex - 1] && wizardSteps[stepIndex - 1].stepGroups\r\n ? wizardSteps[stepIndex - 1].stepGroups[0]\r\n : null;\r\n if (prevWizardGroup && prevWizardGroup.notRequired && (stepIndex === 1 || wizardSelectedValues[stepIndex - 2])) {\r\n // added logic for cases when not required goes after not required so you can't jump in the end of the wizard\r\n // you have to have prev prev step selected to jump\r\n return false // if prev is not required - return false, otherwise true\r\n }\r\n return true\r\n}\r\n\r\nexport const getWizardProductGroupName = (wizardGroup) => {\r\n return wizardGroup.productCartTitle || wizardGroup.title || wizardGroup.groupName || \"\"\r\n}\r\n\r\n/**\r\n * checks if we need to request sharedFeatureNames from backend instead of the regular request\r\n * @param wizardGroup {wizardGroupInterface}\r\n * @param featureGroup {featureGroupInterface}\r\n * @returns {boolean}\r\n */\r\nexport const shouldUseNewWizardFeaturesRequestsLogic = (wizardGroup, featureGroup) => {\r\n if (!wizardGroup || !wizardGroup.useIncluded || !wizardGroup.featuresIncluded || !wizardGroup.featuresIncluded.length\r\n || !featureGroup) {\r\n return false\r\n }\r\n return featureGroup.counts && Object.keys(featureGroup.counts).some(layoutType => {\r\n // if less - we will request features with regular request cause it is faster\r\n // we are checking in all layouts case they might be not uploaded(need to change after feature overhaul)\r\n return featureGroup.counts[layoutType] > 1000\r\n })\r\n}\r\n\r\n\r\n/**\r\n * checks if the following step is disabled\r\n * @param currentNavItems {[navItemInterface]}\r\n * @param wizardGroup {wizardGroupInterface}\r\n * @param featureGroup {featureGroupInterface}\r\n * @returns {boolean}\r\n */\r\nexport const getMissingWizardFeatures = async (currentNavItems,\r\n wizardGroup,\r\n featureGroup) => {\r\n\r\n if (featureGroup.requestInProgress) {\r\n // we will request features with regular request cause it is faster\r\n return false\r\n }\r\n\r\n const {wizardMissingFeatures} = store.getState().wizardState;\r\n\r\n if (wizardMissingFeatures[wizardGroup.groupName] && !wizardMissingFeatures[wizardGroup.groupName].length) {\r\n // already received everything\r\n return false\r\n }\r\n\r\n const missingSkus = (wizardGroup.featuresIncluded || [])\r\n .filter(feature => {\r\n return !currentNavItems.some(navItem => navItem.part.getLowerCasedSharedFeatureName() === feature.sharedFeatureName)\r\n })\r\n .map(feature => feature.sharedFeatureName); // convert to names only array\r\n\r\n console.log(\"current missing skus\", missingSkus);\r\n\r\n if (!missingSkus.length) { // first time we create it with requested features // small chances but let it be\r\n store.dispatch(setWizardMissingFeatures(wizardGroup.groupName, missingSkus));\r\n return\r\n }\r\n\r\n const slicedArray = missingSkus.slice(0, 100); // take first 100 features\r\n const stillMissingArray = missingSkus.slice(100); // from 100 to the end\r\n\r\n // 2) get missing features from the backend;\r\n console.log(\"request more missingSkus\", slicedArray);\r\n console.log(\"stillMissingArray\", stillMissingArray);\r\n // loaderEnable();\r\n featureGroup.requestInProgress = true;\r\n const missingSkusResponse = await getBvFeatures(null, slicedArray, true);\r\n featureGroup.requestInProgress = false;\r\n\r\n store.dispatch(setWizardMissingFeatures(wizardGroup.groupName, stillMissingArray)); // set features that left\r\n\r\n if (missingSkusResponse && missingSkusResponse.data) {\r\n console.log(\"missingSkusResponse\", missingSkusResponse.data);\r\n const layout = getCurrentLayout();\r\n layout.loadNewFeatures(missingSkusResponse.data);\r\n return true\r\n }\r\n\r\n // loaderDisable();\r\n return false\r\n}\r\n\r\n/**\r\n * this hook is disabling feature groups for hide items wizards because they should not be added to the cart\r\n * @param wizardActiveItem {wizardItemInterface}\r\n * @param visualizersLoadedLength {number}\r\n * @param wizardSelectedValues {object}\r\n * @param updateLookCartItem {function}\r\n * @returns {boolean}\r\n */\r\nexport const useHideItemsDisabledfeatureGroups = (wizardActiveItem, visualizersLoadedLength, wizardSelectedValues, updateLookCartItem = null) => {\r\n useEffect(() => {\r\n if (wizardActiveItem && wizardActiveItem.hideItems && visualizersLoadedLength) {\r\n wizardActiveItem.wizardGroups.forEach(wizardGroup => {\r\n if (Object.keys(wizardSelectedValues).some(key => wizardSelectedValues[key].wizardGroup.groupName === wizardGroup.groupName)) {\r\n return // do not disable already selected in wizard groups (restoring logic)\r\n }\r\n const featureGroup = getFeatureGroupFromWizardGroup(wizardGroup);\r\n if (featureGroup) {\r\n featureGroup.disabled = true;\r\n if (featureGroup.layerPositions) {\r\n Object.keys(featureGroup.layerPositions).forEach(position => {\r\n featureGroup.layerPositions[position] = null;\r\n })\r\n }\r\n console.log(\"featureGroup disabled\", featureGroup);\r\n }\r\n })\r\n }\r\n if (updateLookCartItem) {\r\n updateLookCartItem();\r\n }\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [visualizersLoadedLength]);\r\n}\r\n\r\nexport const getNextWizardStepQuantity = (currentGroups, wizardSelectedValues, wizardActiveStep, fromFeature, wizardSqftCartItems = []) => {\r\n let newQuantity = 1\r\n if (currentGroups.length === 1) {\r\n const featureGroup = getFeatureGroupFromWizardGroup(currentGroups[0]);\r\n if (wizardSelectedValues[wizardActiveStep] && Number.isInteger(wizardSelectedValues[wizardActiveStep].quantity)) {\r\n newQuantity = wizardSelectedValues[wizardActiveStep].quantity;\r\n } else if (wizardSqftCartItems.length && (fromFeature || featureGroup)) {\r\n const groupName = fromFeature ? fromFeature.dbFeature.groupName : (featureGroup.dbName || featureGroup.partName);\r\n const addedCartItems = wizardSqftCartItems.filter(cItem => cItem.cartFeature && cItem.cartFeature.dbFeature.groupName === groupName);\r\n // console.log(\"addedCartItems\", addedCartItems);\r\n if (addedCartItems.length) {\r\n newQuantity = addedCartItems.reduce((total, cItem) => total + cItem.quantity, 0);\r\n } else {\r\n newQuantity = getFeatureGroupFeaturesQuantity(fromFeature, featureGroup);\r\n }\r\n } else {\r\n newQuantity = getFeatureGroupFeaturesQuantity(fromFeature, featureGroup);\r\n }\r\n }\r\n return newQuantity\r\n}\r\n\r\n/**\r\n * this returns on qkb wizard custom groups or feature groups as features\r\n * @param currentGroups {[wizardGroupInterface]}\r\n * @returns {boolean}\r\n */\r\nexport const displayMaterialsWizardGroupAsFeature = (currentGroups) => {\r\n return currentGroups.length > 1 || (currentGroups.length === 1 && currentGroups[0].nodeType === WIZARD_GROUP_TYPES.custom)\r\n}\r\n\r\n/**\r\n * this returns on qkb wizard wizardGroup from current steps\r\n * @param wizardItem {wizardItemInterface}\r\n * @param wizardValues {object}\r\n * @param neededWizardGroupId {string}\r\n * @returns {object}\r\n */\r\nexport const getWizardGroupFromCurrentSteps = (wizardItem, wizardValues, neededWizardGroupId) => {\r\n let neededStep, neededWizardGroup;\r\n if (!wizardItem || !wizardValues || !neededWizardGroupId) {\r\n return {neededStep, neededWizardGroup}\r\n }\r\n getAvailableSteps(wizardItem, wizardValues, true).forEach(step => {\r\n if (neededStep) {\r\n return\r\n }\r\n step.stepGroups.forEach(wizGroup => {\r\n if (wizGroup.id === neededWizardGroupId) {\r\n neededStep = step;\r\n neededWizardGroup = wizGroup;\r\n } else if (wizGroup.mergedGroups) {\r\n wizGroup.mergedGroups.forEach(mergedGroup => {\r\n if (mergedGroup.id === neededWizardGroupId) {\r\n neededStep = step;\r\n neededWizardGroup = mergedGroup;\r\n }\r\n })\r\n }\r\n })\r\n });\r\n return {neededStep, neededWizardGroup}\r\n}\r\n","export const LayoutType = {\r\n Layout1: 1,\r\n Layout4: 4,\r\n};\r\n\r\nexport const LayoutAbbreviation = {\r\n All: \"ALL\",\r\n Layout1: \"Layout1\",\r\n Layout4: \"Layout4\",\r\n};\r\n\r\nexport const LayoutAbbreviations = [\r\n \"Layout1\",\r\n \"Layout4\",\r\n];\r\nexport const LayoutAbbreviationsToRemove = [\r\n \"Layout4\",\r\n \"Layout1\",\r\n];\r\n\r\nexport const METADATA = {\r\n ALL: \"ALL\",\r\n LeftSide: \"L\", // used as side for shower grab bars\r\n RightSide: \"R\", // used as side for shower grab bars\r\n Inner: \"Inner\", // used for sinks & faucets\r\n Outer: \"Outer\", // used for sinks & faucets\r\n};\r\n\r\nexport const ShowerComboTubType = {\r\n bathtub_liner: \"bathtub_liner\",\r\n replacement_tub: \"replacement_tub\",\r\n walk_in_tub: \"walk_in_tub\",\r\n jetted_tub: \"jetted_tub\",\r\n};\r\n\r\nexport const CountsType = {\r\n allLayoutFeaturesCount: \"All\", // not used\r\n largeLayoutFeaturesCount: \"Large\",\r\n smallLayoutFeaturesCount: \"Small\",\r\n totalFeaturesCount: \"Total\" // not used\r\n};\r\n\r\nexport const BathTubType = {\r\n Custom60in: 'Custom60in',\r\n FreeStanding: 'BathTubFreeStanding'\r\n};\r\n\r\nexport const VanityTypes = {\r\n Complete: 'Complete',\r\n Custom: 'Custom'\r\n};\r\n\r\nexport const ShowerBodyType = {\r\n Glass: 0,\r\n Door: 1\r\n};\r\n\r\nexport const PartMenuType = {\r\n Simple: 0, // i.e. Toilet - doesn't have any sub-items\r\n Complex: 1, // i.e. Vanity - has sub-menu items, Sink, Faucet Mirror\r\n};\r\n\r\nexport function bathTubTypeToString(bathTypeType) {\r\n switch (bathTypeType) {\r\n case BathTubType.Custom60in:\r\n return 'Custom';\r\n case BathTubType.FreeStanding:\r\n return 'Complete';\r\n }\r\n}\r\nexport function bathTubStringToType(bathtubString) {\r\n switch (bathtubString) {\r\n case 'custom':\r\n return BathTubType.Custom60in;\r\n case 'complete':\r\n return BathTubType.FreeStanding;\r\n }\r\n}\r\n\r\nexport const vanityWizardFilters = [\"Size\", \"DoorStyle\", \"Material\", \"Color\"];\r\n\r\nexport const showerWizardFilters = [\"Material\", \"DuraBathColor\", \"SlabColor\", \"TileColor\", \"TilePattern\", \"AcrylicPattern\", \"AcrylicColor\"];\r\n\r\nexport const NotQCVanityDoorStylesFilters = [\"Centennial\", \"Hudson\", \"Northbrook\", \"Osage\", \"Quebec\", \"Riverside\", \"Villager\", \"Zurich\"];\r\n\r\nexport const COUNTERTOP_GROUP_BATHROOM = [\"vanity_countertop\", \"vanity_backsplash\"];\r\n\r\nexport const CABINET_GROUP_BATHROOM = [\"vanity_cabinet\", \"vanity_mirror\"];\r\n\r\nexport const HANDLES_GROUP_BATHROOM = [\"door_handle\", \"drawer_handle\"];\r\n\r\nexport const SHOWER_FLOOR_GROUP_BATHROOM = [\"shower_floor\", \"shower_curb\"];\r\n\r\nexport const CORNER_SHELVES_POSITIONS = [\"L1\",\"L2\",\"L3\",\"R1\",\"R2\",\"R3\"];\r\n\r\nexport const SIDE_POSITIONS = [\"L\",\"R\"];\r\n\r\nexport const PAN_POSITIONS = [\"L\",\"C\",\"R\"];\r\n","import invert from 'lodash/invert';\r\n\r\nimport {splitFeatureName} from \"../../../misc/utils\";\r\nimport DesignNavigationItem from \"../../visComponents/designNavigationItem\";\r\nimport {Part} from \"./part\";\r\nimport store from '../../../store';\r\nimport {LayoutAbbreviation, LayoutType, LayoutAbbreviationsToRemove, COUNTERTOP_GROUP} from \"./constants\";\r\nimport {getFeatureIsLocked} from \"../../../misc/helpers\";\r\n\r\n/**\r\n * Used for Complex parts such as Vanity, to perform some base functionality for related items\r\n */\r\nexport class IntermediatePart extends Part {\r\n\r\n constructor(isChild) {\r\n super(false, isChild);\r\n this.disabled = false;\r\n this.defaultDisabled = false; // used after reset click\r\n this.canBeDisabled = false;\r\n }\r\n\r\n /**\r\n * This will be called by the underlying vanity feature with a concrete instance of the part\r\n * @param dbFeature\r\n * @param part {Part}\r\n * @param setParent {boolean}\r\n * @param features\r\n */\r\n load_(dbFeature, part, setParent = true, features = 'features') {\r\n\r\n const featureList = features + \"List\";\r\n\r\n const {displayName} = dbFeature;\r\n let {featureName} = splitFeatureName(displayName);\r\n if (!featureName && dbFeature.groupName && dbFeature.displayName) {\r\n featureName = dbFeature.displayName.replace(dbFeature.groupName + \" - \", \"\")\r\n }\r\n // console.log('displayName:', displayName);\r\n\r\n if (setParent) {\r\n part.getParent = () => this;\r\n if (dbFeature.galleryImages) {\r\n const featured = dbFeature.galleryImages.find(galImage => galImage.featured);\r\n if (featured) {\r\n this.featuredImage = featured.url\r\n }\r\n dbFeature.galleryImages = dbFeature.galleryImages.sort((a, b) => b.default - a.default)\r\n }\r\n }\r\n\r\n if (!dbFeature.sharedFeatureName) {\r\n console.error(\"No sharedFeatureName property:\", dbFeature);\r\n if (!featureName) {\r\n return false\r\n }\r\n }\r\n\r\n part.partName = featureName;\r\n part.metaData = dbFeature.metaData || {};\r\n\r\n if (dbFeature.s3Bindings && dbFeature.s3Bindings.length) {\r\n dbFeature.s3Bindings = dbFeature.s3Bindings.filter(binding => binding.visualizer === \"Kitchen\")\r\n }\r\n\r\n part.dbFeature = dbFeature || {};\r\n if (!part.dbFeature.filterValueIDs) {\r\n part.dbFeature.filterValueIDs = {}\r\n }\r\n part.notAvailableInVisualizer = !dbFeature.s3Bindings || !dbFeature.s3Bindings.length;\r\n\r\n if (part.metaData.RoomLayout) {\r\n const roomLayout = part.metaData.RoomLayout;\r\n if (roomLayout.includes(LayoutAbbreviation.All)) {\r\n Object.keys(LayoutType).forEach(layoutName => {\r\n this[featureList][layoutName].push(part);\r\n })\r\n } else if (Array.isArray(roomLayout) && roomLayout.length) {\r\n roomLayout.forEach(roomLayoutAbbreviation => {\r\n const layoutName = invert(LayoutAbbreviation)[roomLayoutAbbreviation];\r\n if (layoutName) { // Prevent bad roomLayout Metadata\r\n this[featureList][layoutName].push(part);\r\n }\r\n });\r\n } else { // single value\r\n const layoutName = invert(LayoutAbbreviation)[roomLayout];\r\n if(layoutName) {\r\n this[featureList][layoutName].push(part);\r\n }\r\n }\r\n } if (part.notAvailableInVisualizer || !part.metaData.RoomLayout) {\r\n part.notAvailableInVisualizer = true;\r\n Object.keys(LayoutType).forEach(layoutName => {\r\n if(!this[featureList][layoutName].some(t => t.dbFeature.sharedFeatureName == part.dbFeature.sharedFeatureName)) {\r\n this[featureList][layoutName].push(part);\r\n }\r\n })\r\n }\r\n\r\n // Object.keys(LayoutType).forEach(layoutName => {\r\n // this[features+\"List\"][layoutName].push(part);\r\n // });\r\n\r\n this.loadFeatureCommon(part);\r\n\r\n return part\r\n }\r\n\r\n navigationSubItemsWithFilter(propName, propValue, featuresToCheck = this.features) {\r\n return featuresToCheck.filter((feature) => {\r\n return feature.matchesMetaForCondition(propName, propValue);\r\n }).map(_ => new DesignNavigationItem(_.featureName, _));\r\n }\r\n\r\n navigationSubItemsWithFilterMultipleConditions(arrayOfConditions, featuresToCheck = this.features) {\r\n // console.log('arrayOfConditions', arrayOfConditions);\r\n // console.log('featuresToCheck', featuresToCheck);\r\n return featuresToCheck.filter((feature) => {\r\n return feature.notAvailableInVisualizer || arrayOfConditions.every((conditionObject) => {\r\n const {propName, propValue} = conditionObject;\r\n return feature.matchesMetaForCondition(propName, propValue);\r\n });\r\n })\r\n }\r\n\r\n setDefault(layout, setNotInVisFeature = false) {\r\n this.setFeatureGroupDefault(layout, setNotInVisFeature)\r\n }\r\n\r\n setLayers(layout) {\r\n if (!this.disabled) {\r\n if (!this.activeFeature) {\r\n this.setDefault(layout);\r\n }\r\n if (this.activeFeature && !this.activeFeature.notAvailableInVisualizer) {\r\n this.setFeatureLayer(this.activeFeature, layout);\r\n if (Array.isArray(this.activeFeatureParts) && this.activeFeatureParts.length) {\r\n this.activeFeatureParts.forEach((activeFeaturePart) => {\r\n this.setFeatureLayer(activeFeaturePart, layout);\r\n })\r\n }\r\n }\r\n if (this.placeholderFeature) {\r\n this.setFeatureLayer(this.placeholderFeature, layout);\r\n }\r\n if (this.shadowFeature) {\r\n this.setFeatureLayer(this.shadowFeature, layout);\r\n }\r\n } else {\r\n this.hideLayers();\r\n }\r\n }\r\n\r\n clickFromAllWalls(ignoreLocked) {\r\n if (this && this.dbFeature && this.dbFeature.sharedFeatureName) {\r\n console.log(`${this.partId}:`, this.dbFeature.sharedFeatureName);\r\n }\r\n this.handleClick(ignoreLocked, \"all_walls\");\r\n }\r\n\r\n /**\r\n * @param ignoreLocked {boolean} // false by the default, is used by wizard ONLY\r\n * @param clickFrom {string} // is used for countertop and cabinet switchers, and walls\r\n */\r\n handleClick(ignoreLocked = false, clickFrom = \"\") {\r\n const parent = this.getParent();\r\n if (clickFrom !== \"all_walls\") {\r\n const {activeQuoteIndex} = store.getState().quotesState;\r\n parent.firstClick[activeQuoteIndex] = true; // allow to show active item\r\n }\r\n const featureIsLocked = getFeatureIsLocked(this, ignoreLocked);\r\n if (featureIsLocked) {\r\n parent.activeLockedFeature = this;\r\n } else {\r\n if (parent.activeLockedFeature) {\r\n parent.activeLockedFeature = null;\r\n }\r\n this.featureClick();\r\n }\r\n }\r\n\r\n featureClick() {\r\n const parent = this.getParent();\r\n parent.placeholderChanged = true;\r\n if (this.notAvailableInVisualizer) {\r\n parent.activeNotInVisualizerFeature = this; // do not change the activeFeature (in order to keep the layer)\r\n } else if (parent.activeNotInVisualizerFeature) {\r\n parent.activeNotInVisualizerFeature = null; // remove it from other searches and so on\r\n parent.activeFeature = this;\r\n } else {\r\n parent.activeFeature = this;\r\n }\r\n this.featureClicked();\r\n }\r\n\r\n hideLayers() {\r\n if (this.activeFeature) {\r\n this.activeFeature.layer.src = '';\r\n }\r\n if (Array.isArray(this.activeFeatureParts) && this.activeFeatureParts.length) {\r\n this.activeFeatureParts.forEach((activeFeaturePart) => {\r\n if (activeFeaturePart && activeFeaturePart.layer) {\r\n activeFeaturePart.layer.src = '';\r\n }\r\n })\r\n }\r\n if (this.placeholderFeature) {\r\n this.placeholderFeature.layer.src = '';\r\n }\r\n if (this.shadowFeature) {\r\n this.shadowFeature.layer.src = '';\r\n }\r\n }\r\n\r\n removeLayoutFromPartName(partName) {\r\n LayoutAbbreviationsToRemove.forEach(abbr => {\r\n const spaceWithLayoutName = \" \"+abbr;\r\n partName = partName.replace(spaceWithLayoutName + \" \", \" \"); // 1) replace \" Agra S Some edge name\" -> \" Agra Some edge name\"\r\n if (partName.slice(-spaceWithLayoutName.length) === spaceWithLayoutName) {\r\n partName = partName.substring(0, partName.length - spaceWithLayoutName.length); // 2) replace \" Agra Some edge name S\" -> \" Agra Some edge name\"\r\n }\r\n });\r\n partName = partName.replace(\" Backsplash\", \"\");\r\n return partName\r\n }\r\n\r\n removeCountertopFromPartName(partName) {\r\n partName = partName.replace(\"Countertop - \", \"\");\r\n return partName\r\n }\r\n\r\n removeBacksplashFromPartName(partName) {\r\n partName = partName.replace(\"Backsplash - \", \"\");\r\n return partName\r\n }\r\n\r\n removeCabinetLayoutFromPartName(partName) {\r\n const possibleLayouts = [\" Layout 1\",\" Layout 2\",\" Layout 3\",\" Layout 4\",\" Layout 5\",\" Layout 6\",\" Layout 7\",\" Layout 8\",\" 1\",\" 2\",\" 3\",\" 4\",\" 5\",\" 6\",\" 7\",\" 8\"];\r\n possibleLayouts.forEach(cabinetLayout => {\r\n partName = partName.replace(cabinetLayout,\"\")\r\n });\r\n return partName\r\n }\r\n\r\n removeEdgeFromPartName(partName) {\r\n const filterGroups = store.getState().filterState.filterGroups;\r\n const edgeFilterGroup = filterGroups.find(group => group.name === \"Edge\" || group.name === \"Edge Profile\");\r\n if (edgeFilterGroup && edgeFilterGroup.values && edgeFilterGroup.values.length) {\r\n const edgeFilterGroupValues = edgeFilterGroup.values.sort((a,b) => {\r\n return a.value && b.value && (b.value.length - a.value.length)\r\n }); // 1st should be \"Full Bullnose\", then simple \"Bullnose\"\r\n edgeFilterGroupValues.forEach((filterGroupValue) => { // arrayOf {id: 293, value: \"Eased\", displayText: \"Eased\", parent_id: null, icon: \"\", …}\r\n partName = partName.split(\" \"+filterGroupValue.value).join(\"\");\r\n });\r\n }\r\n return partName\r\n }\r\n\r\n getCountertopGroupsSplittedFeatureName = () => {\r\n if (this._countertopGroupsCustomDisplayName == null) {\r\n this._countertopGroupsCustomDisplayName = this.dbFeature.sharedFeatureName;\r\n if (!this._countertopGroupsCustomDisplayName) {\r\n this._countertopGroupsCustomDisplayName = this.partName || \"\";\r\n this._countertopGroupsCustomDisplayName = this.removeCabinetLayoutFromPartName(this._countertopGroupsCustomDisplayName); // remove 1 2\r\n this._countertopGroupsCustomDisplayName = this.removeLayoutFromPartName(this._countertopGroupsCustomDisplayName); // remove SP SPNI\r\n this._countertopGroupsCustomDisplayName = this.removeEdgeFromPartName(this._countertopGroupsCustomDisplayName); // remove Bullnose\r\n } else {\r\n this._countertopGroupsCustomDisplayName = this.removeLayoutFromPartName(this._countertopGroupsCustomDisplayName); // remove SP SPNI\r\n this._countertopGroupsCustomDisplayName = this._countertopGroupsCustomDisplayName.replace(\" PartN\", \"\");\r\n this._countertopGroupsCustomDisplayName = this.removeEdgeFromPartName(this._countertopGroupsCustomDisplayName); // remove Bullnose\r\n }\r\n if (this.partId === \"backsplash\" && this.removeBacksplashTypeFromPartName) {\r\n this._countertopGroupsCustomDisplayName = this.removeBacksplashTypeFromPartName(this._countertopGroupsCustomDisplayName);\r\n // this._countertopGroupsCustomDisplayName = this.removeCabinetLayoutFromPartName(this._countertopGroupsCustomDisplayName); // remove 1 2\r\n }\r\n }\r\n return this._countertopGroupsCustomDisplayName\r\n };\r\n\r\n getSplittedFeatureName = () => {\r\n const cabinetsGroup = [\"top_cabinet\", \"bottom_cabinet\", \"center_island_cabinet\"];\r\n if(this._customDisplayName == null) {\r\n this._customDisplayName = this.dbFeature.sharedFeatureName || this.partName;\r\n if (cabinetsGroup.includes(this.partId)) {\r\n this._customDisplayName = this.removeCabinetLayoutFromPartName(this._customDisplayName)\r\n .replace(/ Microwave/g, \"\")\r\n .replace(/ Hood/g, \"\")\r\n .replace(/ Layout/g, \"\")\r\n .replace(/ Part2/g, \"\")\r\n }\r\n this._customDisplayName = this.removeLayoutFromPartName(this._customDisplayName);\r\n this._customDisplayName = this.removeEdgeFromPartName(this._customDisplayName);\r\n this._customDisplayName = this.removeCountertopFromPartName(this._customDisplayName);\r\n this._customDisplayName = this.removeBacksplashFromPartName(this._customDisplayName);\r\n }\r\n return this._customDisplayName\r\n };\r\n\r\n getMatchingFeatureName = () => {\r\n return COUNTERTOP_GROUP.includes(this.partId)\r\n ? this.getCountertopGroupsSplittedFeatureName()\r\n : this.getSplittedFeatureName()\r\n };\r\n\r\n getModuleFeatureName = () => {\r\n // return this.partName.split(\" M_\")[0];\r\n return this.partName.split(\" M\")[0];\r\n };\r\n\r\n featureIsMatchingFilters(currentFeature, activeFilters, filters = []) {\r\n return filters.every(filter => {\r\n return activeFilters[filter.id]\r\n && currentFeature.dbFeature.filterValueIDs[filter.id]\r\n && currentFeature.dbFeature.filterValueIDs[filter.id].includes(activeFilters[filter.id][0])\r\n })\r\n }\r\n\r\n getActiveFeaturePartsAccordingToActiveFeature(fromFeature = this.activeFeature, activeFeatureConditions = []) {\r\n let activeFeatureParts = [];\r\n if (fromFeature && fromFeature.partNumber) {\r\n let activeFeaturePart;\r\n const name1 = fromFeature.getSplittedFeatureName();\r\n const arrayOfConditions = activeFeatureConditions.length\r\n ? activeFeatureConditions\r\n : this.getActiveFeatureConditions(fromFeature);\r\n activeFeatureParts = this.featuresParts.filter((feature) => name1 === feature.getSplittedFeatureName());\r\n if (activeFeatureParts.length) {\r\n activeFeaturePart = activeFeatureParts.find((feature) => {\r\n return feature.matchesMetaForArrayOfConditions(arrayOfConditions)\r\n });\r\n if (!activeFeaturePart) {\r\n activeFeaturePart = activeFeatureParts[0];\r\n }\r\n }\r\n activeFeatureParts = activeFeaturePart ? [activeFeaturePart] : [];\r\n activeFeatureParts.forEach((activeFeaturePart) => {\r\n activeFeaturePart.disabled = this.disabled\r\n });\r\n }\r\n return activeFeatureParts\r\n }\r\n\r\n checkIfFeaturePartIsMatching() {\r\n if (this.activeFeatureParts && this.activeFeatureParts.length) {\r\n const activeFeatureConditions = this.getActiveFeatureConditions();\r\n const name1 = this.activeFeature.getSplittedFeatureName();\r\n const activeFeaturePart = this.activeFeatureParts[0];\r\n if (!(activeFeaturePart.matchesMetaForArrayOfConditions(activeFeatureConditions)\r\n && name1 === activeFeaturePart.getSplittedFeatureName())) {\r\n this.activeFeatureParts = this.setActiveFeatureParts(this.activeFeature, activeFeatureConditions);\r\n }\r\n } else {\r\n this.activeFeatureParts = this.setActiveFeatureParts();\r\n }\r\n }\r\n\r\n}\r\n","//********* SQFT *********//\r\nimport * as types from \"./actionTypes\";\r\n\r\nexport const enableSquareFootage = (isSquareFootageEnabled) => ({\r\n type: types.ENABLE_SQUARE_FOOTAGE,\r\n payload: {isSquareFootageEnabled}\r\n});\r\n\r\nexport const setSquareFootageGroup = (SQFTGroup) => ({\r\n type: types.SET_SQUARE_FOOTAGE_GROUP,\r\n payload: {SQFTGroup}\r\n});\r\n\r\nexport const setSQFTGroup = (SQFTGroup) => ({\r\n type: types.SET_SQUARE_FOOTAGE_GROUP,\r\n payload: {SQFTGroup}\r\n});\r\n\r\nexport const setSQFTViewMode = (SQFTViewMode) => ({\r\n type: types.SET_SQFT_VIEW_MODE,\r\n payload: {SQFTViewMode}\r\n});\r\n\r\nexport const loadSQFT = () => ({\r\n type: types.LOAD_SQFT,\r\n payload: {sqftLoaded: true}\r\n});\r\n\r\nexport const updateSQFT = (sqftUpdateType) => ({\r\n type: types.UPDATE_SQFT,\r\n payload: {sqftUpdateType}\r\n});\r\n\r\nexport const updateSQFTCalculations = (updateCalculations) => ({\r\n type: types.UPDATE_SQFT_CALCULATIONS,\r\n payload: {updateCalculations}\r\n});\r\n\r\nexport const setSquareFeet = (squareFeet) => ({\r\n type: types.SET_SQFT_SQUARE_FEET,\r\n payload: {squareFeet}\r\n});\r\n\r\nexport const toggleChangeLayoutPopup = (changeLayoutPopupOpened = false, layoutToApply = \"\", applyLayoutOnSqft = false) => ({\r\n type: types.TOGGLE_CHANGE_LAYOUT_POPUP,\r\n payload: {changeLayoutPopupOpened, layoutToApply, applyLayoutOnSqft}\r\n});\r\n\r\nexport const sendLayoutChangeOnSqft = (setNewLayoutOnSqft) => ({\r\n type: types.SET_NEW_LAYOUT_ON_SQFT,\r\n payload: {setNewLayoutOnSqft}\r\n});\r\n\r\nexport const setSqftMeasureUnit = (measureUnit) => ({\r\n type: types.SET_SQFT_MEASURE_UNIT,\r\n payload: {measureUnit}\r\n});\r\n\r\nexport const changeSqftFeaturesPopup = (sqftFeaturesPopup) => ({\r\n type: types.CHANGE_SQFT_FEATURES_POPUP,\r\n payload: {sqftFeaturesPopup}\r\n});\r\n\r\nexport const setSqftFromFeature = (sqftFromFeature) => ({\r\n type: types.SQT_SQFT_FROM_FEATURE,\r\n payload: {sqftFromFeature}\r\n});\r\n\r\nexport const setSqftCabinetsGlb = (cabinetsGlb) => ({\r\n type: types.SET_CABINETS_GLB,\r\n payload: {cabinetsGlb}\r\n});\r\n\r\nexport const setCabinetsARBlobUrl = (cabinetsARBlobUrl) => ({\r\n type: types.SET_CABINETS_AR_BLOB_URL,\r\n payload: {cabinetsARBlobUrl}\r\n});\r\n\r\nexport const setAPIErrorMessage = (apiErrorMessage) => ({\r\n type: types.SET_API_ERROR_MESSAGE,\r\n payload: {apiErrorMessage}\r\n});\r\n","import {baseNewImagesPath, baseDashboardImagesPath} from \"../../assets\";\r\n\r\nexport const bathTubThumbnail = `${baseNewImagesPath}images/bv_icons_new/Icons_Bathtub.svg`;\r\nexport const ceilingThumbnail = `${baseNewImagesPath}images/bv_icons_new/Icons_Ceiling.svg`;\r\nexport const floorThumbnail = `${baseNewImagesPath}images/bv_icons_new/Icons_Floor.svg`;\r\nexport const showerThumbnail = `${baseNewImagesPath}images/bv_icons_new/shower_icon_new.svg`;\r\nexport const showerAccessoriesThumbnail = `${baseNewImagesPath}images/bv_icons_new/accesories.svg`;\r\nexport const showerOLDThumbnail = `${baseNewImagesPath}images/bv_icons_new/Icons_Shower.svg`;\r\nexport const showerTubComboThumbnail = `${baseNewImagesPath}images/bv_icons_new/shower-tub_icon.svg`;\r\nexport const custom60in30X8Shower = `${baseNewImagesPath}images/bv_icons_new/custom-a-60in-30x8.svg`;\r\nexport const custom30in30X8Shower = `${baseNewImagesPath}images/bv_icons_new/custom-a-30in-30x8.svg`;\r\nexport const custom60in15X4Shower = `${baseNewImagesPath}images/bv_icons_new/custom-b-60in-15x4.svg`;\r\nexport const custom30in15X4Shower = `${baseNewImagesPath}images/bv_icons_new/custom-b-30in-15x4.svg`;\r\nexport const custom60inPonyShower = `${baseNewImagesPath}images/bv_icons_new/custom-c-60in-pony.svg`;\r\nexport const custom30inPonyShower = `${baseNewImagesPath}images/bv_icons_new/custom-c-30in-pony.svg`;\r\nexport const toiletThumbnail = `${baseNewImagesPath}images/bv_icons_new/toilet_backend.svg`;\r\nexport const vanityThumbnail = `${baseNewImagesPath}images/bv_icons_new/Icons_Vanity-05.svg`;\r\nexport const wallsThumbnail = `${baseNewImagesPath}images/bv_icons_new/Icons_Wall.svg`;\r\nexport const windowThumbnail = `${baseNewImagesPath}images/bathroom-icons/Window_Coverings.svg`;\r\nexport const largeLayout = `${baseNewImagesPath}images/bv-assets/thumbnail-config01.png`;\r\nexport const smallLayout = `${baseNewImagesPath}images/bv-assets/thumbnail-config02.png`;\r\nexport const largeLayoutShadow = `${baseNewImagesPath}images/bv-assets/Lg-Global-Shadow.png`;\r\nexport const smallLayoutShadow = `${baseNewImagesPath}images/bv-assets/Sm-Global-Shadow.png`;\r\nexport const shower30inWallShadow = `${baseNewImagesPath}images/bv-assets/Lg-Ex R-Shadow Overlay 30X45[For=LG-Ex-R].png`;\r\nexport const floorPlaceholder = `${baseNewImagesPath}images/bv-assets/placeholders/All-Floor-Placeholder.png`;\r\nexport const ceilingPlaceholder = `${baseNewImagesPath}images/bv-assets/placeholders/All-Ceiling-Placeholder.png`;\r\n\r\nexport const showerWallSmallRoomPlaceholder = `${baseNewImagesPath}images/bv-assets/placeholders/SM-Shower Wall-Placeholder[For=Shower=(Custom_Kit1_Kit3_Steam)=ShowerSize=30in].png`;\r\nexport const showerWallSmallRoomPlaceholder60in = `${baseNewImagesPath}images/bv-assets/placeholders/SM-Shower Wall-Placeholder[For=Shower=(Custom_Kit1_Kit3_Steam)=ShowerSize=60in].png`;\r\nexport const showerFloorSmallRoomPlaceholder = `${baseNewImagesPath}images/bv-assets/placeholders/SM-ShowerFloor-Placeholder[For=Shower=(Custom)=ShowerSize=30in].png`;\r\nexport const showerFloorSmallRoomPlaceholder60in = `${baseNewImagesPath}images/bv-assets/placeholders/SM-ShowerFloor-Placeholder[For=Shower=(Custom)=ShowerSize=60in].png`;\r\nexport const showerPanSmallRoomPlaceholder = `${baseNewImagesPath}images/bv-assets/placeholders/SM-ShowerPan-Placeholder[For=Shower=(Custom)=ShowerSize=30in].png`;\r\nexport const showerPanSmallRoomPlaceholder60in = `${baseNewImagesPath}images/bv-assets/placeholders/SM-ShowerPan-Placeholder[For=Shower=(Custom)=ShowerSize=60in].png`;\r\n\r\nexport const LayoutThumbnails = {\r\n Large: largeLayout,\r\n Small: smallLayout,\r\n};\r\n\r\nexport const homePage = {\r\n vanity_cabinet: `${baseNewImagesPath}images/home/section-images/vanity-bases.jpg`,\r\n vanity: `${baseNewImagesPath}images/home/section-images/vanity-bases.jpg`,\r\n vanity_countertop: `${baseNewImagesPath}images/home/section-images/countertops.jpg`,\r\n vanity_sink: `${baseNewImagesPath}images/home/section-images/sinks.jpg`,\r\n vanity_faucet: `${baseNewImagesPath}images/home/section-images/faucets.jpg`,\r\n vanity_mirror: `${baseNewImagesPath}images/home/section-images/mirrors.jpg`,\r\n vanity_backsplash: `${baseNewImagesPath}images/home/section-images/backsplash.png`,\r\n vanity_handle: `${baseNewImagesPath}images/home/section-images/handle.png`,\r\n shower_body: `${baseNewImagesPath}images/home/section-images/shower-glass.jpg`,\r\n shower_fixture: `${baseNewImagesPath}images/home/section-images/shower-fixtures.jpg`,\r\n shower_interior_wall: `${baseNewImagesPath}images/home/section-images/shower-wall.jpg`,\r\n shower_interior_wall_accent: `${baseNewImagesPath}images/home/section-images/shower-accent.png`,\r\n shower_floor: `${baseNewImagesPath}images/home/section-images/shower-flooring.jpg`,\r\n shower_door: `${baseNewImagesPath}images/home/section-images/shower-door.png`,\r\n shower_pan: `${baseNewImagesPath}images/home/section-images/shower-pan.png`,\r\n shower_pan_combo: `${baseNewImagesPath}images/home/section-images/shower-pan.png`,\r\n shower_door_handle: `${baseNewImagesPath}images/home/section-images/shower-handles.jpg`,\r\n threshold: `${baseNewImagesPath}images/home/section-images/threshold.png`,\r\n bathtub: `${baseNewImagesPath}images/home/section-images/bathtubs.jpg`,\r\n bathtub_fixture: `${baseNewImagesPath}images/home/section-images/bathtub-fixtures.jpg`,\r\n toilet: `${baseNewImagesPath}images/home/section-images/toilets.jpg`,\r\n floor: `${baseNewImagesPath}images/home/section-images/flooring.jpg`,\r\n ceiling: `${baseNewImagesPath}images/home/section-images/ceilings.jpg`,\r\n window: `${baseNewImagesPath}images/home/section-images/window-coverings.jpg`,\r\n lighting: `${baseNewImagesPath}images/home/section-images/lighting-fixtures.jpg`,\r\n towel: `${baseNewImagesPath}images/home/section-images/towel-racks.jpg`,\r\n wall_a: `${baseNewImagesPath}images/home/section-images/walls.jpg`,\r\n wall_b: `${baseNewImagesPath}images/home/section-images/walls.jpg`,\r\n wall_c: `${baseNewImagesPath}images/home/section-images/walls.jpg`,\r\n left_shower_wall: `${baseNewImagesPath}images/home/section-images/walls.jpg`,\r\n right_shower_wall: `${baseNewImagesPath}images/home/section-images/walls.jpg`,\r\n accent_wall: `${baseNewImagesPath}images/home/section-images/walls.jpg`,\r\n pony_wall: `${baseNewImagesPath}images/home/section-images/walls.jpg`,\r\n walls: `${baseNewImagesPath}images/home/section-images/walls.jpg`,\r\n wall: `${baseNewImagesPath}images/home/section-images/walls.jpg`,\r\n jetted_tub: `${baseNewImagesPath}images/home/section-images/jetted-tub.png`,\r\n replacement_tub: `${baseNewImagesPath}images/home/section-images/replacement-tub.png`,\r\n bathtub_liner: `${baseNewImagesPath}images/home/section-images/tub-liner.png`,\r\n walk_in_tub: `${baseNewImagesPath}images/home/section-images/walk-in-tub.png`,\r\n //kitchen\r\n dishwasher: `${baseNewImagesPath}images/home/section-images/dishwasher.png`,\r\n hood: `${baseNewImagesPath}images/home/section-images/hood.png`,\r\n fridge: `${baseNewImagesPath}images/home/section-images/fridge.png`,\r\n range: `${baseNewImagesPath}images/home/section-images/range.png`,\r\n microwave: `${baseNewImagesPath}images/home/section-images/microwave.png`,\r\n crown_molding: `${baseNewImagesPath}images/home/section-images/crown-molding.png`,\r\n left_wall: `${baseNewImagesPath}images/home/section-images/walls.jpg`,\r\n right_wall: `${baseNewImagesPath}images/home/section-images/walls.jpg`,\r\n popout_wall: `${baseNewImagesPath}images/home/section-images/walls.jpg`,\r\n backsplash: `${baseNewImagesPath}images/home/section-images/backsplash.png`,\r\n sink: `${baseNewImagesPath}images/home/section-images/sinks.jpg`,\r\n faucet: `${baseNewImagesPath}images/home/section-images/faucets.jpg`,\r\n countertop: `${baseNewImagesPath}images/home/section-images/countertops.jpg`,\r\n center_island_countertop: `${baseNewImagesPath}images/home/section-images/countertops.jpg`,\r\n center_island_sink: `${baseNewImagesPath}images/home/section-images/sinks.jpg`,\r\n center_island_faucet: `${baseNewImagesPath}images/home/section-images/faucets.jpg`,\r\n center_island_cabinet: `${baseNewImagesPath}images/home/section-images/vanity-bases.jpg`,\r\n center_island_handle: `${baseNewImagesPath}images/home/section-images/handle-kitchen.png`,\r\n center_island_chairs: `${baseNewImagesPath}images/home/section-images/chairs.png`,\r\n top_handle: `${baseNewImagesPath}images/home/section-images/handle-kitchen.png`,\r\n bottom_handle: `${baseNewImagesPath}images/home/section-images/handle-kitchen.png`,\r\n top_cabinet: `${baseNewImagesPath}images/home/section-images/icon-cabinet-upper.png`,\r\n bottom_cabinet: `${baseNewImagesPath}images/home/section-images/icon-cabinet-lower.png`,\r\n cutout: `${baseNewImagesPath}images/home/section-images/cutout.png`,\r\n cutouts: `${baseNewImagesPath}images/home/section-images/cutout.png`,\r\n edge_profile: `${baseNewImagesPath}images/home/section-images/edge.png`,\r\n edge_profiles: `${baseNewImagesPath}images/home/section-images/edge.png`,\r\n edge: `${baseNewImagesPath}images/home/section-images/edge.png`,\r\n center_island_edge: `${baseNewImagesPath}images/home/section-images/edge.png`,\r\n room: `${baseNewImagesPath}images/home/section-images/room.png`,\r\n kitchen_floor: `${baseNewImagesPath}images/home/section-images/flooring.jpg`,\r\n walls_ceiling: `${baseNewImagesPath}images/home/section-images/ceilings.jpg`,\r\n};\r\n\r\nexport const shareImage = {\r\n Bathroom: \"https://qc-cdn.s3.amazonaws.com/social-networks/BathRoomVisualizer_Facebook_QC.jpeg\",\r\n bvLook: \"https://qc-cdn.s3.amazonaws.com/social-networks/BathRoomVisualizer_Facebook_Lixil.jpg\",\r\n Kitchen: \"https://s3.amazonaws.com/qc-cdn/fabricator-presets-screenshots/cd49f0acc72e40f1a912830cf0385b83.png\"\r\n};\r\nexport const shareImageRebath = \"https://qc-cdn.s3.amazonaws.com/social-networks/BathRoomVisualizer_Facebook_ReBath.jpeg\";\r\n\r\nconst normalizeIconFileName = (featureGroupName) => {\r\n return ((featureGroupName || ''))\r\n .toLowerCase()\r\n .replace(/\\s/g, '-')\r\n .replace(\".svg\", \"\") + '.svg';\r\n};\r\n\r\nconst featureGroupNameToIcon = {\r\n '10 year sealer': 'sealer.svg',\r\n 'cabinet': 'cabinets.svg',\r\n 'top mount sink cutout': 'topmount-sink-cutout.svg',\r\n 'under mount sink cutout': 'undermount-sink-cutout.svg',\r\n 'counter top removal': 'countertop-removal.svg',\r\n 'cooktop cutout': 'range-top-cutout.svg',\r\n 'cutout': 'cutouts.svg',\r\n 'faucet': 'faucets.svg',\r\n 'floor': 'flooring.svg',\r\n 'shower-walls': 'shower-wall.svg',\r\n 'shower walls': 'shower-wall.svg',\r\n 'fixture': 'shower-fixture.svg',\r\n 'range-hood-x': 'range-hood.svg',\r\n 'range-hood-z': 'range-hood.svg',\r\n 'refridgerator': 'refrigerator.svg',\r\n 'removal': 'countertop-removal.svg',\r\n 'room(s) installed': 'room.svg',\r\n 'sink': 'sinks.svg',\r\n 'backsplash-thickness': 'slabs.svg',\r\n 'backsplash thickness': 'slabs.svg',\r\n 'edge': 'edge-profile.svg',\r\n 'island countertop': 'center-island-countertop.svg',\r\n 'hook bag': 'garage-hook.svg',\r\n 'slatwall': 'slat_wall.svg',\r\n 'overhead rack': 'overhead_rack.svg',\r\n 'cabinet leg': 'cabinet_leg.svg',\r\n};\r\n\r\nexport function getFeatureGroupIconURL(featureGroupName) {\r\n const name = ((featureGroupName || '')).toLowerCase();\r\n return (name in featureGroupNameToIcon)\r\n ? baseDashboardImagesPath + featureGroupNameToIcon[name]\r\n : baseDashboardImagesPath + normalizeIconFileName(name);\r\n}\r\n\r\nexport function getFeatureGroupIconStyles(featureGroup, activeTheme) {\r\n let\r\n backgroundImage = \"\",\r\n backgroundSize = \"150%\",\r\n backgroundPosition = \"\";\r\n\r\n if (!featureGroup.customImageUrl) {\r\n backgroundImage = getFeatureGroupIconURL(featureGroup.partName, activeTheme);\r\n } else {\r\n backgroundImage = featureGroup.customImageUrl;\r\n if (featureGroup.customImageUrl.includes(\"backsplash-new\")) {\r\n backgroundSize = \"80%\";\r\n backgroundPosition = \"left 25% center\";\r\n } else if (featureGroup.customImageUrl.includes(\"enabled/countertop.svg\")) {\r\n backgroundSize = \"\" // auto\r\n }\r\n }\r\n if (activeTheme === \"caes\" || activeTheme === \"moderno\" || activeTheme === \"as\"|| activeTheme === \"nhance\") {\r\n backgroundImage = getDashboardThemeIcon(backgroundImage, activeTheme);\r\n }\r\n if (backgroundImage.includes(\"enabled/top-cabinet.svg\")) {\r\n backgroundSize = \"60%\"\r\n } else if (backgroundImage.includes(\"enabled/bottom-cabinet.svg\")) {\r\n backgroundSize = \"80%\"\r\n } else if (backgroundImage.includes(\"enabled/slabs.svg\")) {\r\n backgroundSize = \"90%\"\r\n } else if (backgroundImage.includes(\"enabled/center-island-countertop.svg\")) {\r\n backgroundSize = \"95%\"\r\n } else if (backgroundImage.includes(\"enabled/garage-hook.svg\")) {\r\n backgroundSize = \"65%\"\r\n }\r\n switch (featureGroup.partId) {\r\n case \"cabinet_leg\":\r\n case \"hook_bag\":\r\n case \"overhead_rack\":\r\n case \"slat_wall\":\r\n backgroundSize = null; // we set it in scss\r\n break;\r\n default:\r\n break;\r\n }\r\n return {\r\n backgroundImage: `url(${backgroundImage})`,\r\n backgroundSize,\r\n backgroundPosition,\r\n }\r\n}\r\n\r\nexport function getDashboardThemeIcon(backgroundImage, activeTheme) {\r\n const imageSplitted = backgroundImage.split(\"enabled/\");\r\n if (imageSplitted[1]) {\r\n backgroundImage = `${baseNewImagesPath}images-${activeTheme}/dashboard-icons/${imageSplitted[1]}`\r\n }\r\n return backgroundImage\r\n}\r\n\r\n\r\n","import flatMap from \"lodash/flatMap\";\r\nimport lastIndexOf from \"lodash/lastIndexOf\";\r\nimport trim from \"lodash/trim\";\r\n\r\nimport JsonApi from \"./jsonApi\";\r\nimport store from \"../store\";\r\nimport {\r\n capitalizeFirstLetters,\r\n getQuotePriceWithTaxes,\r\n getTotalPrice,\r\n} from \"../misc/helpers\";\r\nimport {\r\n setJobId,\r\n setDefaultInstallations,\r\n setFabricatorData,\r\n loadFilters,\r\n setStonePricing,\r\n setBathroomVisualizerPresets,\r\n setProjectDocumentsIds,\r\n loadMobileNav,\r\n setFabricatorTaxes, setLoadedPresets, toggleUseFabricatorCostPrices\r\n} from \"../actions/actionFunctions\";\r\n\r\nimport {renderErrorPopup} from \"./api-popups\";\r\nimport {loaderDisable} from \"../bvcomponents/ui/loaderView\";\r\nimport {QuoteRequestType} from \"../bvcomponents/visComponents/constants\";\r\nimport * as actionTypes from '../actions/actionTypes';\r\nimport Config, {getCommonVisualizerType, IS_OFFLINE_MODE, IS_QKB_UI} from \"../config\";\r\nimport {setFabricatorSubscriptions} from \"../actions/initialFlowFunctions\";\r\nimport {setDiscountSections} from \"../actions/priceWorksheetActions\";\r\nimport {getCurrentReceipt, setReceiptUrl} from \"../actions/printFunctions\";\r\nimport {getEmployees} from \"./user-api\";\r\n// import {getParsedLookUrl} from \"../bvcomponents/look/lookNavigation/lookFunctions\";\r\nimport {setWizardList} from \"../actions/wizardFunctions\";\r\nimport {setAllFeaturesLoaded} from \"../actions/serverFunctions\";\r\nimport {updatePresetsArray} from \"../misc/presetsFunctions\";\r\nimport {getCompressedCartItem} from \"../misc/backendFunctions\";\r\nimport {updateCurrentQuote} from \"../misc/quotesFunctions\";\r\nimport {getParsedWizardList} from \"../bvcomponents/look/lookNavigation/lookMain/lookWizard/lookWizardFunctions2\";\r\nimport {setMarkUpLogic} from \"../actions/shoppingCartFunctions\";\r\nimport {parseMarkUp} from \"../misc/priceFunctions\";\r\nimport {getMarkUpForFeatures} from \"./features-api\";\r\nimport {setResponseFeaturesMarkUp} from \"../misc/markUpFunctions\";\r\nimport {shouldUseContractSigning} from \"../bvcomponents/popups/contractSign/contractsFunctions\";\r\nimport {\r\n getCustomDepositAmount,\r\n getPriceWorkSheetSaveValues,\r\n isSaveOnlyDiscount\r\n} from \"../bvcomponents/priceWorksheet/discountFunctions\";\r\n\r\n\r\nexport const getSaveQuoteFastData = async (forTempSave = false) => {\r\n const state = store.getState();\r\n const {userState, quotesState, instState, serverState, priceWorksheetState, cartState, printState,\r\n contractSigningState, fabricatorState} = state;\r\n let needToRevertBackCostPrices = fabricatorState.settings.useFabricatorCostPrices;\r\n if (needToRevertBackCostPrices) {\r\n store.dispatch(toggleUseFabricatorCostPrices(false)); // always use retail prices\r\n }\r\n const updatedQuotes = await updateCurrentQuote();\r\n const totalPrice = getTotalPrice();\r\n const grandTotal = getQuotePriceWithTaxes(totalPrice);\r\n const records = updatedQuotes.map((quoteObject, quoteIndex) => {\r\n let record = Object.assign({}, quoteObject);\r\n record.bvImage = record.staticCanvasImage || record.bvImage;\r\n let recordData = Object.assign({}, quoteObject.data, {\r\n activeQuoteIndex: quotesState.activeQuoteIndex,\r\n contractSigningValues: contractSigningState.pagesCustomFieldsValue,\r\n contractsValues: contractSigningState.contractsValues,\r\n savedInvoiceNumberOfPages: contractSigningState.savedInvoiceNumberOfPages,\r\n needToUpdateContract: contractSigningState.needToUpdateContract,\r\n receiptSignature: printState.receiptSignature,\r\n priceWorkSheetLogic: getPriceWorkSheetSaveValues(priceWorksheetState),\r\n })\r\n record.data = forTempSave ? recordData : JSON.stringify(recordData);\r\n record.sqFtCalcImage = quoteObject.sqFtCalcData ? quoteObject.sqFtCalcData.canvasImage : null;\r\n record.sFtCalcDataJson = quoteObject.sqFtCalcData ? JSON.stringify(\r\n Object.assign({}, quoteObject.sqFtCalcData, {\r\n canvasImage: undefined // remove canvasImage as we don't need to pass it twice\r\n })\r\n ) : null;\r\n delete record.sqFtCalcData;\r\n delete record.quoteId;\r\n const recordCartItems = [...cartState.cartItems.filter(ci => ci.cartFeature && ci.cartFeature.dbFeature && (ci.currentQuote === quoteIndex))]\r\n // record.cartItems = recordCartItems; // why do we need it here ??? that doesnt make any sense\r\n record.features = recordCartItems.map(ci => getCompressedCartItem(ci));\r\n if (forTempSave) {\r\n delete record.bvImage\r\n }\r\n return record\r\n });\r\n const discountSections = [...priceWorksheetState.discountSections.map(discountSection => Object.assign({}, discountSection))]\r\n .filter(discountSection => {\r\n discountSection.discounts = [...discountSection.discounts]\r\n .filter(discount => discount.selected)\r\n .map(discount => Object.assign({}, discount, { oldDeleted: undefined }));\r\n return discountSection.discounts.some(discount => discount.selected);\r\n });\r\n const total = {\r\n materialCost: totalPrice.materialPrice,\r\n installationCost: totalPrice.installationPrice,\r\n installationTaxes: totalPrice.installationTaxes, // installation tax amount\r\n materialTaxes: totalPrice.materialTaxes, // material tax amount\r\n priceTaxes: totalPrice.priceTaxes, // all tax amount\r\n totalWithTaxes: getQuotePriceWithTaxes(totalPrice),\r\n customDeposit: getCustomDepositAmount(priceWorksheetState.discountSections, grandTotal),\r\n }\r\n if (needToRevertBackCostPrices) {\r\n store.dispatch(toggleUseFabricatorCostPrices(true)); // revert back\r\n }\r\n return {\r\n jobId: document.kvConfig.jobId || serverState.jobId,\r\n fromBV: true,\r\n fabricatorId: document.kvConfig.userId,\r\n notes: [],\r\n documents: [],\r\n employeeId: +userState.userInfo.employeeId,\r\n shareUrl: serverState.shareUrl,\r\n discountSections,\r\n installations: flatMap(instState.instList, i => i.services.filter(service => service.selected)),\r\n subId: document.subId && document.subId.toString ? document.subId.toString() : null,\r\n total,\r\n records\r\n };\r\n};\r\n\r\nexport const saveQuoteFast = async () => {\r\n if (document.kvConfig.canSaveQuote === false || document.kvConfig.devMode || window.postMessageIsExecuting) {\r\n return null;\r\n }\r\n const savedFastData = await getSaveQuoteFastData();\r\n //console.log(\"save quote fast request\", savedFastData);\r\n return JsonApi.saveQuoteFast(savedFastData)\r\n};\r\n\r\n/**\r\n * Saves the quote\r\n * @param submit {boolean}\r\n * @param yesNoConsultationRequest {boolean}\r\n * @param quoteRequestType {string}\r\n * @param fromCheckOutPage {boolean}\r\n * @param assignQuotePopupCustomer {object}\r\n * @param assignQuotePopupEmployee {object}\r\n * @param showContractSignOnError {boolean}\r\n * @param showReceipt {boolean}\r\n * @return {*}\r\n */\r\nexport const saveQuote = async ({\r\n submit,\r\n yesNoConsultationRequest = false,\r\n quoteRequestType = QuoteRequestType.RegularDesign,\r\n fromCheckOutPage = false,\r\n assignQuotePopupCustomer = null,\r\n assignQuotePopupEmployee = null,\r\n showContractSignOnError = false,\r\n showReceipt = true,\r\n }) => {\r\n if (document.kvConfig.canSaveQuote === false) {\r\n return null;\r\n }\r\n const formData = new FormData();\r\n const state = store.getState();\r\n const {userState, serverState, fabricatorState, cartState, contractSigningState, unlockCalculationsState} = state;\r\n const {fabricatorTaxes} = fabricatorState;\r\n const fabricatorSettings = fabricatorState.settings;\r\n let needToRevertBackCostPrices = fabricatorSettings.useFabricatorCostPrices;\r\n if (needToRevertBackCostPrices) {\r\n store.dispatch(toggleUseFabricatorCostPrices(false)); // always use retail prices\r\n }\r\n const savedFastData = await getSaveQuoteFastData();\r\n if (assignQuotePopupEmployee) {\r\n savedFastData.employeeId = assignQuotePopupEmployee.id;\r\n }\r\n const sendConsumerEmail = serverState.agreeEmailCheckbox && (!fabricatorSettings.sureTax || userState.isPhoneNumberValidated);\r\n const data = {\r\n ...savedFastData,\r\n yesNoConsultationRequest,\r\n submit,\r\n fromCheckOutPage,\r\n sendConsumerEmail,\r\n customerEmail: (assignQuotePopupCustomer ? assignQuotePopupCustomer.email : null) || userState.email || userState.userInfo.email,\r\n salesPerson: assignQuotePopupEmployee ? assignQuotePopupEmployee.fullName : userState.userInfo.salesPersonFullName,\r\n salesPersonEmail: userState.userInfo.salesPersonEmail,\r\n leadOriginatorId: (window.salesPerson ? window.salesPerson.rawVal / ( Math.floor(Math.PI * 1000)) : 0),\r\n postalCode: userState.userInfo.postal,\r\n isNewUser: !(document.kvConfig.jobId || serverState.jobId),\r\n state: cartState.state,\r\n fromTool: getCommonVisualizerType() === \"kitchen\"\r\n ? document.kvConfig.toolVersion === 5 || document.kvConfig.toolVersion === 6 ? \"KV5\" : \"KV4\"\r\n : document.kvConfig.toolVersion === 5 || document.kvConfig.toolVersion === 6 ? \"BV5\" :\"BV\",\r\n toolVersion: document.kvConfig.toolVersion,\r\n visualizerType: capitalizeFirstLetters(getCommonVisualizerType()),\r\n navigationType: document.kvConfig.navigationType,\r\n quoteRequestType,\r\n currency: fabricatorSettings.currency,\r\n installationTaxesRate: (fabricatorTaxes && fabricatorTaxes.laborRate) || 0,\r\n materialTaxesRate: (fabricatorTaxes && fabricatorTaxes.materialRate) || 0,\r\n notes: [],\r\n fromDashboard: document.kvConfig.isBackend,\r\n callFabricator: document.kvConfig.callFabricatorOnSave || false,\r\n language: serverState.language,\r\n documents: serverState.documents.filter(doc => !doc.uploaded).map((d) => {\r\n return {\r\n documentId: d.documentId || 0, // database ID\r\n name: d.name,\r\n text: d.text,\r\n created: d.created,\r\n uid: d.uid,\r\n fileContent: Config.kioskStandAlone ? d.file.dataUri : null\r\n };\r\n }),\r\n markUpLogic: JSON.stringify(cartState.markUpLogic),\r\n };\r\n document.kvConfig.callFabricatorOnSave = false;\r\n\r\n if (Config.isDevMode()) {\r\n console.log(\"saveQuote request data:\", data);\r\n }\r\n\r\n serverState.documents.forEach(doc => {\r\n formData.append(\"files\", doc.file, doc.name);\r\n });\r\n\r\n formData.append('json', JSON.stringify(data));\r\n\r\n let employeeSelected = null;\r\n if (data.employeeId) {\r\n const employeesList = userState.employeesListReceived\r\n ? userState.employeesList\r\n : await getEmployees(false) || []; // just in case, we should never reach here, because requests are in both user popups\r\n employeeSelected = employeesList.find(emp => +emp.id === data.employeeId);\r\n }\r\n let receipt = null, receiptCost = null;\r\n if (!document.kvConfig.visualizerOnly) {\r\n const pdfReceipt = await getCurrentReceipt(assignQuotePopupCustomer, employeeSelected);\r\n receipt = await pdfReceipt.toBlob();\r\n formData.append(\"receipt\", receipt);\r\n }\r\n if (needToRevertBackCostPrices) {\r\n store.dispatch(toggleUseFabricatorCostPrices(true)); // revert back\r\n const pdfReceipt2 = await getCurrentReceipt(assignQuotePopupCustomer, employeeSelected);\r\n receiptCost = await pdfReceipt2.toBlob();\r\n formData.append(\"receiptCost\", receiptCost);\r\n }\r\n\r\n return JsonApi.saveQuote(document.kvConfig.kioskMode ? data : formData)\r\n .then(async (response) => {\r\n const responseData = typeof response.data === 'object' ? response.data : JSON.parse(response.data);\r\n store.dispatch(setJobId(responseData.jobId));\r\n if (responseData.documents && responseData.documents.length) {\r\n store.dispatch(setProjectDocumentsIds(responseData.documents));\r\n }\r\n\r\n const showContractSignPopup = shouldUseContractSigning(fabricatorSettings, contractSigningState.contractsList);\r\n\r\n const showLeadCaptureShoppingCart = fabricatorSettings.leadCaptureShoppingCart && !unlockCalculationsState.unlockCalculationsTutorialIsFinished;\r\n const showDepositPopup = fabricatorSettings.enableDeposit && (!fabricatorSettings.leadCaptureShoppingCart || unlockCalculationsState.unlockCalculationsTutorialIsFinished)\r\n\r\n let receiptUrl = \"\";\r\n if (receipt) {\r\n const pdfReceipt = await getCurrentReceipt(assignQuotePopupCustomer, employeeSelected);\r\n receipt = await pdfReceipt.toBlob();\r\n receiptUrl = URL.createObjectURL(receipt);\r\n }\r\n\r\n if (receipt && showReceipt && !showDepositPopup && !showLeadCaptureShoppingCart\r\n && (!showContractSignPopup || contractSigningState.signedDocumentUrl) && !fabricatorSettings.hasPaymentGateway) {\r\n window.open(receiptUrl, \"_blank\");\r\n responseData.receiptPrinted = true;\r\n }\r\n store.dispatch(setReceiptUrl(receiptUrl)); // always remember the URL (in case it is needed)\r\n\r\n responseData.total = data.total;\r\n\r\n return responseData;\r\n })\r\n .catch(error => {\r\n const retryFunction = saveQuote.bind(this, {\r\n submit,\r\n yesNoConsultationRequest,\r\n quoteRequestType,\r\n fromCheckOutPage,\r\n assignQuotePopupCustomer,\r\n assignQuotePopupEmployee,\r\n });\r\n renderErrorPopup(\"Server \"+new Error(error), \"\", retryFunction, showContractSignOnError);\r\n loaderDisable();\r\n throw new Error(error);\r\n })\r\n};\r\n\r\nexport const loadFiltersOnly = async () => {\r\n const response = await JsonApi.getFilterGroups();\r\n if (response && Array.isArray(response.data)) {\r\n store.dispatch(loadFilters(response.data));\r\n }\r\n return Promise.resolve()\r\n}\r\n\r\nexport const getBathroomVisualizerData = (featuresCount = 30, loadVisualizerOnly = false, forVisualizer) => {\r\n const featuresToReceive = IS_OFFLINE_MODE ? 100000 : featuresCount;\r\n return JsonApi.getBathroomVisualizerData(featuresToReceive, forVisualizer)\r\n .then(responseData => {\r\n // console.log('responseData', responseData.data);\r\n if (!responseData.data || responseData.data.error) {\r\n const errorMessage = !responseData.data ? \"No response data received\" : responseData.data.error;\r\n renderErrorPopup(\"Server error: \"+errorMessage);\r\n loaderDisable();\r\n throw new Error(errorMessage);\r\n } else {\r\n if (!loadVisualizerOnly) {\r\n store.dispatch(loadFilters(responseData.data.filterGroups || []));\r\n // store.dispatch(setFabricatorData(responseData.data.fabricatorData)); // we set it in the subscriptions response\r\n store.dispatch(setDefaultInstallations(responseData.data.installations));\r\n }\r\n store.dispatch(setStonePricing(responseData.data.stonePricing));\r\n if (responseData.data.defaults) {\r\n responseData.data.defaults = updatePresetsArray(responseData.data.defaults, forVisualizer);\r\n // const {lookIdFromUrl} = getParsedLookUrl(); // why do we need that?? set the same lookId on each preset? really?\r\n // if (lookIdFromUrl) {\r\n // presets = presets.map(preset => {\r\n // preset.lookId = lookIdFromUrl;\r\n // return preset\r\n // })\r\n // }\r\n store.dispatch(setBathroomVisualizerPresets(responseData.data.defaults, forVisualizer));\r\n }\r\n if (responseData.data.wizardData || responseData.data.wizardDataV2) {\r\n const wizardList = getParsedWizardList(responseData.data, false, forVisualizer);\r\n store.dispatch(setWizardList(wizardList));\r\n }\r\n //store.dispatch(setBathroomVisualizerFeatures(responseData.data.features));\r\n // this causes bathroomVisualizer to be super slow.... how to store huge arrays in redux store? No answer for now\r\n // for now, features are kept in layout dataObject.... sad, but at least it works much faster\r\n\r\n if (featuresCount === 100000) {\r\n store.dispatch(setAllFeaturesLoaded(document.kvConfig.visualizerType));\r\n store.dispatch(setLoadedPresets(responseData.data.defaults.map(preset => preset.id)));\r\n }\r\n\r\n return responseData.data\r\n }\r\n })\r\n .catch((error) => {\r\n loaderDisable();\r\n console.log('getBathroomVisualizerData', error);\r\n });\r\n};\r\n\r\nexport const getBvPresets = () => {\r\n return JsonApi.getDisplayRoom()\r\n .then(responseData => {\r\n // console.log('getBvPresets:', responseData);\r\n if (!responseData.data || responseData.data.error) {\r\n store.dispatch(setBathroomVisualizerPresets([]));\r\n console.error(\"get bvPresets error: No response data received\");\r\n return [];\r\n } else {\r\n const bvPresets = JSON.parse(responseData.data);\r\n store.dispatch(setBathroomVisualizerPresets(bvPresets));\r\n return bvPresets\r\n }\r\n })\r\n .catch((error) => {\r\n loaderDisable();\r\n console.log('getDisplayRoom', error);\r\n });\r\n};\r\n\r\nexport const getJobIdPreset = (jobId, editToken) => {\r\n return JsonApi.getBVJobData(jobId, editToken);\r\n};\r\n\r\nconst skipRequestsFor = [\"Attachment\", \"Decor\", \"Decore\"];\r\n\r\nconst updateFeaturesWithMarkUp = async (featuresResponse) => {\r\n const {fabricatorState} = store.getState();\r\n if (fabricatorState.settings.useMarkUpFeaturesRequests && featuresResponse\r\n && Array.isArray(featuresResponse) && featuresResponse.length) {\r\n if (skipRequestsFor.some(groupName => {\r\n return featuresResponse.every(dbFeature => dbFeature.groupName === groupName)\r\n })) {\r\n return featuresResponse\r\n }\r\n const markUpResponse = await getMarkUpForFeatures(featuresResponse);\r\n setResponseFeaturesMarkUp(featuresResponse, markUpResponse);\r\n }\r\n return featuresResponse\r\n}\r\n\r\nexport const getBvFeatures = async (arrayOfIds, arrayOfSkus = null, requestSharedFeatureNames = false, forVisualizer) => {\r\n const featuresResponse = await JsonApi.getBathroomVisualizerFeatures(arrayOfIds, arrayOfSkus, requestSharedFeatureNames, forVisualizer);\r\n await updateFeaturesWithMarkUp(featuresResponse ? featuresResponse.data : [])\r\n return featuresResponse\r\n};\r\n\r\nexport const getBvGroups = (visualizerType) => {\r\n return JsonApi.getBathroomVisualizerGroups(visualizerType)\r\n};\r\n\r\n/**\r\n * Main request to get features for feature group\r\n * @param groupName {string}\r\n * @param page {number}\r\n * @param pageSize {number}\r\n * @param filterValues {array}\r\n * @param searchText {string}\r\n * @param layoutAbbreviation {string}\r\n * @param axiosController {object}\r\n * @param requestOldFeatures {boolean}\r\n * @param visualizerType {string}\r\n * @returns {Promise<{data: []}>}\r\n */\r\nexport const getBvGroupFeatures = async (groupName, page, pageSize, filterValues, searchText = \"\", layoutAbbreviation, axiosController, requestOldFeatures, visualizerType) => {\r\n const featuresResponse = await JsonApi.getBathroomVisualizerGroupFeatures(groupName, page, pageSize, filterValues, searchText, layoutAbbreviation, axiosController, requestOldFeatures, visualizerType)\r\n await updateFeaturesWithMarkUp(featuresResponse);\r\n return featuresResponse\r\n};\r\nexport const getBvGroupFilterValues = async (groupName, filterId, withStoneFilters) => {\r\n const filterResponse = await JsonApi.getBathroomVisualizerGroupFilterValues(groupName, filterId, withStoneFilters);\r\n console.log(\"filterResponse\", filterResponse);\r\n if (filterResponse.data.error) {\r\n const {error} = filterResponse.data;\r\n renderErrorPopup(error);\r\n return {data: []}\r\n }\r\n return filterResponse\r\n};\r\n\r\nexport const submitPayment = (paymentInfo, useNewHoc = false) => { // submit is used in the WithPaymentSubmit HOC, all info is there\r\n const state = store.getState();\r\n const {serverState} = state;\r\n return JsonApi.submitPayment(useNewHoc ? paymentInfo : {\r\n ...paymentInfo,\r\n country: paymentInfo.country.name,\r\n fabricatorId: document.kvConfig.userId,\r\n jobId: document.kvConfig.jobId || serverState.jobId\r\n })\r\n .then(response => {\r\n store.dispatch({\r\n type: actionTypes.SUBMIT_PAYMENT_RESPONSE, // why do we need it? not used at all\r\n payload: response.data\r\n });\r\n if (useNewHoc) {\r\n const res = response.data;\r\n if (res.transactionResponse && res.transactionResponse.responseCode === '1') {\r\n // showQuoteSavedNotification();\r\n window.checkoutSuccess = true;\r\n const receiptUrl = store.getState().printState.receiptUrl;\r\n if (receiptUrl) {\r\n window.open(receiptUrl, \"_blank\");\r\n }\r\n } else {\r\n let msg = '';\r\n if (res && (res.transactionResponse && res.transactionResponse.errors && res.transactionResponse.errors.length > 0) || res.error) {\r\n msg = res.transactionResponse.errors[0].errorText || res.error;\r\n } else if (res && res.message && res.message.messageDetails.length > 0) {\r\n msg = res.message.messageDetails[0].text;\r\n }\r\n\r\n let sepIdx = lastIndexOf(msg, '-');\r\n if (sepIdx >= 0) {\r\n msg = trim(msg.substr(sepIdx + 1));\r\n }\r\n\r\n renderErrorPopup(msg, \"Card Error\");\r\n }\r\n }\r\n return response.data;\r\n })\r\n .catch(error => {\r\n renderErrorPopup(\"Server \"+new Error(error));\r\n loaderDisable();\r\n throw new Error(error);\r\n })\r\n};\r\n\r\nexport const getQtCategories = (layoutName, visualizerType) => {\r\n return JsonApi.getQtCategories(layoutName, visualizerType)\r\n .then(response => {\r\n if (!response.data || response.data.error || !Array.isArray(response.data)) {\r\n // store.dispatch(setQtCategories([]));\r\n console.error(\"get bvPresets error: No response data received\");\r\n return [];\r\n } else {\r\n const qtCategories = response.data.filter(qtCategory => {\r\n if (qtCategory.useWizard && IS_QKB_UI) {\r\n return true\r\n }\r\n return (qtCategory.name !== \"All\") && Array.isArray(qtCategory.featureGroups) && qtCategory.featureGroups.length\r\n });\r\n if (Config.isDevMode()) {\r\n console.log('qtCategories-->', qtCategories);\r\n }\r\n // store.dispatch(setQtCategories(qtCategories)); // with features inside featureGroups it becomes HUUUGE\r\n return qtCategories\r\n }\r\n })\r\n .catch(error => {\r\n renderErrorPopup(\"Server \"+new Error(error));\r\n loaderDisable();\r\n throw new Error(error);\r\n })\r\n};\r\n\r\nexport const getFabricatorSubscriptions = (fabricatorId = document.kvConfig.userId) => {\r\n return JsonApi.getFabricatorSubscriptions(fabricatorId)\r\n .then(response => {\r\n if (!response || !response.data || response.data.error) {\r\n console.error(\"getFabricatorSubscriptions error: No response data received\");\r\n } else {\r\n // console.log(\"response getFabricatorSubscriptions\", response);\r\n if (Array.isArray(response.data.subscriptions)) {\r\n store.dispatch(setFabricatorSubscriptions(response.data.subscriptions));\r\n }\r\n if (response.data.fabricatorTaxes) {\r\n store.dispatch(setFabricatorTaxes(response.data.fabricatorTaxes));\r\n }\r\n if (document.kvConfig.isCaesarStone && response.data.fabricatorData\r\n && response.data.fabricatorData.fabricatorName === \"QC Master Account CAN\") {\r\n response.data.fabricatorData.wasCreatedFromFabricator = \"QC Master Account CAN\";\r\n }\r\n const globalMarkUp = response.data.fabricatorData && response.data.fabricatorData.globalMarkUp\r\n ? parseMarkUp(response.data.fabricatorData.globalMarkUp)\r\n : \"\";\r\n if (globalMarkUp) {\r\n store.dispatch(setMarkUpLogic(globalMarkUp)) // also it can be restored with the cartState on job open\r\n }\r\n store.dispatch(setFabricatorData(response.data.fabricatorData));\r\n }\r\n })\r\n .catch(error => {\r\n // console.error(+new Error(error));\r\n renderErrorPopup(\"Server Error. Check Subscription Status\", \"\", getFabricatorSubscriptions.bind(this, fabricatorId));\r\n loaderDisable();\r\n throw new Error(error);\r\n })\r\n};\r\n\r\nexport const getDiscounts = (fabricatorId = document.kvConfig.userId) => {\r\n return JsonApi.getFabricatorDiscounts(fabricatorId)\r\n .then(response => {\r\n if (!response || !response.data || response.data.error) {\r\n console.error(\"getFabricatorDiscounts error: No response data received\");\r\n } else {\r\n console.log(\"response getFabricatorDiscounts\", response);\r\n if (Array.isArray(response.data)) {\r\n const discountSections = response.data\r\n .map(discountSection => {\r\n discountSection.discounts = Array.isArray(discountSection.discounts)\r\n ? discountSection.discounts.filter(dis => dis.enabled)\r\n : [];\r\n discountSection.discounts = discountSection.discounts.map(discount => {\r\n if (isSaveOnlyDiscount(discount)) {\r\n discount.selected = true;\r\n }\r\n return discount\r\n })\r\n return discountSection\r\n })\r\n .filter(discountSection => discountSection.discounts.length)\r\n store.dispatch(setDiscountSections(discountSections));\r\n }\r\n }\r\n });\r\n};\r\n\r\nexport const getNavigationButtons = (testConnection = false) => {\r\n let forTool = \"\";\r\n switch(document.kvConfig.visualizerType) {\r\n case \"Bathroom\":\r\n case \"BV\":\r\n case \"bvScene\":\r\n case \"bvLook\":\r\n forTool = \"bv\";\r\n break;\r\n case \"Kitchen\":\r\n case \"kvScene\":\r\n forTool = \"kv\";\r\n break;\r\n default:\r\n forTool = document.kvConfig.visualizerType;\r\n break;\r\n }\r\n return JsonApi.getMenuNavigation(forTool, testConnection)\r\n .then(menuData => {\r\n if (document.kvConfig.kioskMode || testConnection) {\r\n return false\r\n }\r\n store.dispatch(loadMobileNav(menuData.data));\r\n return menuData\r\n })\r\n .catch(error => {\r\n if (testConnection) {\r\n renderErrorPopup(error, \"\", getNavigationButtons.bind(this, true));\r\n }\r\n return error\r\n });\r\n};\r\n\r\nexport const copySqftImagesToAnotherJob = (fabricatorId = document.kvConfig.userId, postData) => {\r\n return JsonApi.copySqftImages(fabricatorId, postData)\r\n .then(response => response.data)\r\n .catch(error => {\r\n renderErrorPopup(\"Server \"+new Error(error));\r\n loaderDisable();\r\n throw new Error(error);\r\n })\r\n};\r\n","export const COLORS = {\r\n red: \"#d0021b\",\r\n // red: \"#FF0012\",\r\n gray: \"#9b9b9b\",\r\n gray2: \"#979797\",\r\n gray3: \"#b8b8b8\",\r\n gray4: \"#5e5e5e\",\r\n light: \"#e1e1e1\",\r\n white: \"#ffffff\",\r\n grohe: \"#292929\",\r\n};\r\n\r\nconst COLOR_THEMES = {\r\n \"qc\": {\r\n primary: \"#4A90E2\",\r\n primary_hover: \"#3483de\", //darken(#4A90E2, 5%),\r\n active: \"#9FC522\",\r\n active_hover: \"#8daf1e\", //darken(#9FC522, 5%),\r\n assetsPath: \"../images\",\r\n },\r\n \"caes\": {\r\n primary: \"#58595b\",\r\n primary_hover: \"#4b4c4e\", //darken(#58595b, 5%),\r\n active: \"#f46c42\",\r\n active_hover: \"#f3592a\", //darken(#f46c42, 5%),\r\n assetsPath: \"../images-caes\",\r\n },\r\n // \"as\": {\r\n // primary: \"#36919B\",\r\n // primary_hover: \"#4CABB5\", //darken(#58595b, 5%),\r\n // active: \"#004D58\",\r\n // active_hover: \"#4CABB5\", //darken(#f46c42, 5%),\r\n // assetsPath: \"../images-caes\",\r\n // },\r\n \"moderno\": {\r\n primary: \"#343434\",\r\n primary_hover: \"#1b1b1b\", //darken(#58595b, 5%),\r\n active: \"#d0021b\",\r\n active_hover: \"#9d0214\", //darken(#f46c42, 5%),\r\n assetsPath: \"../images-moderno\",\r\n },\r\n \"look\": {\r\n primary: \"#000000\",\r\n primary_hover: \"#0b1f37\", //darken(#58595b, 5%),\r\n active: \"#3984BE\",\r\n active_hover: \"#3376aa\", //darken(#f46c42, 5%),\r\n assetsPath: \"../images\",\r\n },\r\n \"grohe\": {\r\n primary: \"#000000\", // \"#0F2B4C\",\r\n primary_hover: \"#0b1f37\", //darken(#58595b, 5%),\r\n active: \"#3984BE\",\r\n active_hover: \"#3376aa\", //darken(#f46c42, 5%),\r\n assetsPath: \"../images\",\r\n },\r\n \"as\": {\r\n primary: \"#000000\", // \"#0F2B4C\",\r\n primary_hover: \"#0b1f37\", //darken(#58595b, 5%),\r\n active: \"#E70026\",\r\n active_hover: \"#ce0022\", //darken(#f46c42, 5%),\r\n assetsPath: \"../images-as\",\r\n },\r\n \"nhance\": {\r\n primary: \"#000000\", // \"#0F2B4C\",\r\n primary_hover: \"#0b1f37\", //darken(#58595b, 5%),\r\n active: \"#ef7038\",\r\n active_hover: \"#ed5f20\", //darken(#f46c42, 5%),\r\n assetsPath: \"../images-nhance\",\r\n },\r\n}\r\n\r\nexport const GROHE_FILTER_COLORS = {\r\n \"GROHE CHROME\": \"#f4f4f3\", // R:244 G:244 B:243\r\n \"GROHE POLISHED NICKEL\": \"#e4e0cb\", // R:228 B:224 G:203\r\n \"GROHE HARD GRAPHITE\": \"#605754\", // R:96 G:87 B:84\r\n \"GROHE BRUSHED NICKEL\": \"#c8beb1\", // R:200 G:190 B:177\r\n \"GROHE BRUSHED COOL SUNRISE\": \"#bb9759\" // R:187 G:151 B:89\r\n};\r\n\r\nexport default COLOR_THEMES\r\n","export const LayoutType = {\r\n Small: 0,\r\n Large: 1\r\n};\r\n\r\nexport const LayoutAbbreviation = {\r\n All: \"ALL\",\r\n Small: \"SM\",\r\n Large: \"LG\"\r\n};\r\n\r\nexport const CountsType = {\r\n allLayoutFeaturesCount: \"All\", // not used\r\n largeLayoutFeaturesCount: \"Large\",\r\n smallLayoutFeaturesCount: \"Small\",\r\n totalFeaturesCount: \"Total\" // not used\r\n};\r\n\r\nexport const BathTubType = {\r\n Custom60in: 'Custom60in',\r\n FreeStanding: 'BathTubFreeStanding'\r\n};\r\n\r\nexport const VanityTypes = {\r\n Complete: 'Complete',\r\n Custom: 'Custom'\r\n};\r\n\r\nexport const ShowerType = {\r\n Custom: 0,\r\n Complete: 1\r\n};\r\n\r\nexport const ShowerBodyType = {\r\n Glass: 0,\r\n Door: 1\r\n};\r\n\r\nexport const ShowerTypes = {\r\n Custom: 'Custom',\r\n Complete: 'Complete',\r\n All: 'All'\r\n};\r\n\r\nexport const PartMenuType = {\r\n Simple: 0, // i.e. Toilet - doesn't have any sub-items\r\n Complex: 1, // i.e. Vanity - has sub-menu items, Sink, Faucet Mirror\r\n};\r\n\r\nexport function bathTubTypeToString(bathTypeType) {\r\n switch (bathTypeType) {\r\n case BathTubType.Custom60in:\r\n return 'Custom';\r\n case BathTubType.FreeStanding:\r\n return 'Complete';\r\n }\r\n}\r\nexport function bathTubStringToType(bathtubString) {\r\n switch (bathtubString) {\r\n case 'custom':\r\n return BathTubType.Custom60in;\r\n case 'complete':\r\n return BathTubType.FreeStanding;\r\n }\r\n}\r\n\r\nexport const ShowerComboTubType = {\r\n bathtub_liner: \"bathtub_liner\",\r\n replacement_tub: \"replacement_tub\",\r\n walk_in_tub: \"walk_in_tub\",\r\n jetted_tub: \"jetted_tub\",\r\n};\r\n\r\nexport const vanityWizardFilters = [\"Size\", \"DoorStyle\", \"Material\", \"Color\"];\r\n\r\nexport const showerWizardFilters = [\"Material\", \"DuraBathColor\", \"SlabColor\", \"TileColor\", \"TilePattern\", \"AcrylicPattern\", \"AcrylicColor\"];\r\n\r\nexport const NotQCVanityDoorStylesFilters = [\"Centennial\", \"Hudson\", \"Northbrook\", \"Osage\", \"Quebec\", \"Riverside\", \"Villager\", \"Zurich\"];\r\n","const ActionTypes = {\r\n GET_CANVAS_SCALE: \"GET_CANVAS_SCALE\",\r\n CANVAS_SCALE_CHANGED: \"CANVAS_SCALE_CHANGED\",\r\n RESET_CANVAS: \"RESET_CANVAS\",\r\n ENABLE_PINCH_ZOOM: \"ENABLE_PINCH_ZOOM\",\r\n DISABLE_PINCH_ZOOM: \"DISABLE_PINCH_ZOOM\",\r\n CHANGE_LAYOUT: \"CHANGE_LAYOUT\",\r\n UPDATE_ALL_ITEMS: \"UPDATE_ALL_ITEMS\",\r\n USER_IS_LOGGED_IN: \"USER_IS_LOGGED_IN\",\r\n USER_POPUP_CLOSED: \"USER_POPUP_CLOSED\",\r\n REMOVE_GREEN_ZONE_ON_CANVAS: \"REMOVE_GREEN_ZONE_ON_CANVAS\",\r\n FEATURE_IS_CLICKED: \"FEATURE_IS_CLICKED\",\r\n OPEN_MOBILE_NAVIGATION: \"OPEN_MOBILE_NAVIGATION\",\r\n CHANGE_MOBILE_MENU_CONTENT_TYPE: \"CHANGE_MOBILE_MENU_CONTENT_TYPE\",\r\n UPDATE_QUOTING_TOOL: \"UPDATE_QUOTING_TOOL\",\r\n /*** OLD QT ACTIONS***/\r\n SHOW_NUMERIC_KBD: \"SHOW_NUMERIC_KBD\",\r\n OVERLAY_CLICK: \"OVERLAY_CLICK\",\r\n SHOW_SUMMARY: null,\r\n SHOW_DOCUSIGN: 'SHOW_DOCUSIGN'\r\n}\r\nexport default ActionTypes;\r\n","import {getCurrentLayout} from \"../../appLayout\";\r\nimport {\r\n getDistanceFromPointToInfiniteLine,\r\n getDistanceFromPointToLine,\r\n getIntersectCords,\r\n getMidPoint,\r\n getPointDistance,\r\n getPointField, isPointInsideShape,\r\n orientation\r\n} from \"./sqftHelper\";\r\nimport workspace from \"../components/canvas/core/workspace\";\r\nimport sqftShape from \"../components/canvas/core/shapes/sqftShape\";\r\nimport sqftConfig from \"../components/canvas/store/sqftConfig\";\r\nimport store from \"../../../store\";\r\nimport {SHAPE_PART_ID} from \"../constants\";\r\nimport {getRoomName} from \"../../../misc/helpers\";\r\nimport NumberText from \"../components/canvas/core/workspace/text/numberText\";\r\nimport SqftStore from \"../components/canvas/store/sqftStore\";\r\nimport workspaceControllers from \"../components/canvas/store/workspaceControllers\";\r\nimport Wall from \"../components/canvas/core/shapes/wall\";\r\nimport sqftImageManager from \"../components/canvas/store/sqftImageManager\";\r\nimport {getNavItemsFromTheWizard} from \"./sqftHelperUi\";\r\nimport {getIntersectionCordsV2} from \"./coordinatesHelper\";\r\nimport sqftEventManager from \"../components/canvas/store/sqftEventManager\";\r\nimport {getFontSizeFromContext} from \"../components/canvas/store/canvasHelper\";\r\nimport EventManager from \"../components/canvas/store/sqftEventManager\";\r\n\r\nexport const DIRECTIONS = {\r\n EAST: \"east\",\r\n WEST: \"west\",\r\n NORTH: \"north\",\r\n SOUTH: \"south\",\r\n NORTHEAST: \"northeast\",\r\n NORTHWEST: \"northwest\",\r\n SOUTHEAST: \"southeast\",\r\n SOUTHWEST: \"southwest\",\r\n UNDEFINED: \"undefined\"\r\n};\r\n\r\nexport default class ShapeHelper {\r\n\r\n /**\r\n * @param {sqftShape} activeShape\r\n * @return {object} {sqftShape.id: [intersectionPoints]}\r\n */\r\n static getIntersectionsWithOtherShapes(activeShape) {\r\n let activeShapeLines = activeShape.getLines();\r\n let shapes = workspace.getShapes();\r\n let intersectionPoints = {};\r\n activeShapeLines.forEach((activeShapeLine) => {\r\n shapes.forEach(function(shape) {\r\n if (shape instanceof sqftShape && !shape.isHidden && shape.id !== activeShape.id) {\r\n let testShapeLines = shape.getLines();\r\n testShapeLines.forEach((testShapeLine) => {\r\n let pointFieldActiveShapeLineFrom = getPointField(activeShapeLine.from.x, activeShapeLine.from.y, activeShapeLine);\r\n let pointFieldActiveShapeLineTo = getPointField(activeShapeLine.to.x, activeShapeLine.to.y, activeShapeLine);\r\n let pointFieldTestShapeLineFrom = getPointField(testShapeLine.from.x, testShapeLine.from.y, testShapeLine);\r\n let pointFieldTestShapeLineTo = getPointField(testShapeLine.to.x, testShapeLine.to.y, testShapeLine);\r\n\r\n let intersectionCords = getIntersectCords(\r\n pointFieldActiveShapeLineFrom.x, pointFieldActiveShapeLineFrom.y,\r\n pointFieldActiveShapeLineTo.x, pointFieldActiveShapeLineTo.y,\r\n pointFieldTestShapeLineFrom.x, pointFieldTestShapeLineFrom.y,\r\n pointFieldTestShapeLineTo.x, pointFieldTestShapeLineTo.y,\r\n false\r\n );\r\n\r\n if (intersectionCords) {\r\n // ctx.beginPath();\r\n // ctx.arc(intersectionCords.x, intersectionCords.y, 10, 0, 2 * Math.PI);\r\n // ctx.stroke();\r\n //debugger // eslint-disable-line no-debugger\r\n (intersectionPoints[shape.id] = intersectionPoints[shape.id] || []).push(intersectionCords);\r\n }\r\n });\r\n }\r\n });\r\n });\r\n\r\n return intersectionPoints;\r\n }\r\n\r\n /**\r\n * @param {sqftShape} shape1\r\n * @param {sqftShape} shape2\r\n * @return {object} {sqftShape.id: [intersectionPoints]}\r\n */\r\n static getTwoShapesIntersections(shape1, shape2 ) {\r\n let activeShapeLines = shape1.getLines();\r\n let intersectionPoints = {};\r\n let testShapeLines = shape2.getLines();\r\n activeShapeLines.forEach((activeShapeLine) => {\r\n testShapeLines.forEach((testShapeLine) => {\r\n let pointFieldActiveShapeLineFrom = getPointField(activeShapeLine.from.x, activeShapeLine.from.y, activeShapeLine);\r\n let pointFieldActiveShapeLineTo = getPointField(activeShapeLine.to.x, activeShapeLine.to.y, activeShapeLine);\r\n let pointFieldTestShapeLineFrom = getPointField(testShapeLine.from.x, testShapeLine.from.y, testShapeLine);\r\n let pointFieldTestShapeLineTo = getPointField(testShapeLine.to.x, testShapeLine.to.y, testShapeLine);\r\n\r\n let intersectionCords = getIntersectionCordsV2(\r\n pointFieldActiveShapeLineFrom.x, pointFieldActiveShapeLineFrom.y,\r\n pointFieldActiveShapeLineTo.x, pointFieldActiveShapeLineTo.y,\r\n pointFieldTestShapeLineFrom.x, pointFieldTestShapeLineFrom.y,\r\n pointFieldTestShapeLineTo.x, pointFieldTestShapeLineTo.y,\r\n false\r\n );\r\n\r\n if (intersectionCords) {\r\n // const ctx = sqftEventManager.getCtx();\r\n // ctx.beginPath();\r\n // ctx.arc(intersectionCords.x, intersectionCords.y, 10, 0, 2 * Math.PI);\r\n // ctx.stroke();\r\n //debugger // eslint-disable-line no-debugger\r\n (intersectionPoints[shape2.id] = intersectionPoints[shape2.id] || []).push(intersectionCords);\r\n }\r\n });\r\n });\r\n\r\n return intersectionPoints;\r\n }\r\n\r\n static checkIfShapeContainsAnother(shape1, shape2) {\r\n let shape1Pos = shape1.getCenter();\r\n let shape1PosField = getPointField(shape1Pos.x, shape1Pos.y, shape1);\r\n // here will will check only shape center point\r\n for (let vertex of [shape1PosField]) {\r\n if (isPointInsideShape(vertex, shape2)) {\r\n return true;\r\n }\r\n }\r\n return false;\r\n }\r\n\r\n /**\r\n * @param {sqftShape} activeShape\r\n * @return {object} {sqftShape.id: {lineDirection: [{point: point, distance: int}]}}\r\n */\r\n static getDistancesToShapes(activeShape) {\r\n let activeShapeLines = activeShape.getLines();\r\n let shapes = workspace.getShapes();\r\n let distances = {};\r\n activeShapeLines.forEach((activeShapeLine) => {\r\n let pointFieldActiveShapeLineFrom = getPointField(activeShapeLine.from.x, activeShapeLine.from.y, activeShapeLine);\r\n\r\n shapes.forEach(function(shape) {\r\n if (shape instanceof sqftShape && !shape.isHidden && shape.id !== activeShape.id) {\r\n let testShapeLines = shape.getLines();\r\n testShapeLines.forEach((testShapeLine) => {\r\n let pointFieldTestShapeLineFrom = getPointField(testShapeLine.from.x, testShapeLine.from.y, testShapeLine);\r\n let pointFieldTestShapeLineTo = getPointField(testShapeLine.to.x, testShapeLine.to.y, testShapeLine);\r\n\r\n let distance = getDistanceFromPointToLine(\r\n pointFieldActiveShapeLineFrom.x, pointFieldActiveShapeLineFrom.y,\r\n pointFieldTestShapeLineFrom.x, pointFieldTestShapeLineFrom.y,\r\n pointFieldTestShapeLineTo.x, pointFieldTestShapeLineTo.y\r\n );\r\n\r\n if (distance || distance === 0) {\r\n let lineDirection = shape.getAngleDirection(testShapeLine);\r\n let diff = Math.abs(distance);\r\n\r\n if (diff < sqftConfig.SNAP_OFFSET) {\r\n let lineMidPoint = getMidPoint(pointFieldTestShapeLineFrom, pointFieldTestShapeLineTo);\r\n let result = {\r\n shape: shape,\r\n line: activeShapeLine,\r\n point: pointFieldActiveShapeLineFrom,\r\n distance,\r\n diff,\r\n diffX: pointFieldActiveShapeLineFrom.x - lineMidPoint.x,\r\n diffY: pointFieldActiveShapeLineFrom.y - lineMidPoint.y,\r\n }\r\n distances[shape.id] = distances[shape.id] || {};\r\n (distances[shape.id][lineDirection.orientation] = distances[shape.id][lineDirection.orientation] || []).push(result);\r\n }\r\n }\r\n });\r\n }\r\n });\r\n });\r\n\r\n return distances;\r\n }\r\n\r\n /**\r\n * @param {sqftShape} activeShape\r\n * @return {object} {sqftShape.id: {lineDirection: [{point: point, distance: int}]}}\r\n */\r\n static getDistancesToWalls(activeShape) {\r\n let activeShapeLines = activeShape.getLines();\r\n let walls = workspaceControllers.walls.getResources();\r\n let distances = {};\r\n activeShapeLines.forEach((activeShapeLine) => {\r\n let pointFieldActiveShapeLineFrom = getPointField(activeShapeLine.from.x, activeShapeLine.from.y, activeShapeLine);\r\n\r\n walls.forEach(function(wall) {\r\n if (wall instanceof Wall) {\r\n //todo\r\n let testShapeLines = wall.getBordersOfWallLines();\r\n //let testShapeLines = wall.getLines();\r\n //console.log(\"testShapeLines\", testShapeLines);\r\n activeShape.testShapeLines = testShapeLines;\r\n\r\n testShapeLines.forEach((testShapeLine) => {\r\n let pointFieldTestShapeLineFrom = testShapeLine.from.getPointField();\r\n let pointFieldTestShapeLineTo = testShapeLine.to.getPointField();\r\n\r\n let distance = getDistanceFromPointToLine(\r\n pointFieldActiveShapeLineFrom.x, pointFieldActiveShapeLineFrom.y,\r\n pointFieldTestShapeLineFrom.x, pointFieldTestShapeLineFrom.y,\r\n pointFieldTestShapeLineTo.x, pointFieldTestShapeLineTo.y\r\n );\r\n\r\n if (distance) {\r\n const lineOrientation = ShapeHelper.getLineOrientation(testShapeLine.from, testShapeLine.to, true);\r\n //console.log(\"lineOrientation\",lineOrientation);\r\n let diff = Math.abs(distance);\r\n\r\n if (diff < sqftConfig.SNAP_OFFSET) {\r\n let lineMidPoint = getMidPoint(pointFieldTestShapeLineFrom, pointFieldTestShapeLineTo);\r\n let result = {\r\n shape: wall,\r\n line: activeShapeLine,\r\n point: pointFieldActiveShapeLineFrom,\r\n distance,\r\n diff,\r\n diffX: pointFieldActiveShapeLineFrom.x - lineMidPoint.x,\r\n diffY: pointFieldActiveShapeLineFrom.y - lineMidPoint.y,\r\n }\r\n distances[wall.id] = distances[wall.id] || {};\r\n (distances[wall.id][lineOrientation] = distances[wall.id][lineOrientation] || []).push(result);\r\n //console.log(\"diff\", diff);\r\n }\r\n }\r\n });\r\n }\r\n });\r\n });\r\n\r\n return distances;\r\n }\r\n\r\n /**\r\n * @param {object} pointFieldActivePoint {x, y}\r\n * @return {object} {sqftShape.id: {lineDirection: [{point: point, distance: int}]}}\r\n */\r\n static getDistancesToPoint(pointFieldActivePoint) {\r\n let shapes = workspace.getShapes();\r\n let distances = {};\r\n //let pointFieldActivePoint = getPointField(activePoint.x, activePoint.y);\r\n shapes.forEach(function(shape) {\r\n if (shape instanceof sqftShape && !shape.isHidden) {\r\n let testShapeLines = shape.getLines();\r\n testShapeLines.forEach((testShapeLine) => {\r\n let pointFieldTestShapeLineFrom = getPointField(testShapeLine.from.x, testShapeLine.from.y, testShapeLine);\r\n let pointFieldTestShapeLineTo = getPointField(testShapeLine.to.x, testShapeLine.to.y, testShapeLine);\r\n\r\n let distance = getDistanceFromPointToInfiniteLine(\r\n pointFieldActivePoint.x, pointFieldActivePoint.y,\r\n pointFieldTestShapeLineFrom.x, pointFieldTestShapeLineFrom.y,\r\n pointFieldTestShapeLineTo.x, pointFieldTestShapeLineTo.y\r\n );\r\n\r\n if (distance) {\r\n let lineDirection = shape.getAngleDirection(testShapeLine);\r\n let diff = distance;\r\n switch (lineDirection.orientation) {\r\n case 'vertical':\r\n diff = pointFieldActivePoint.x > pointFieldTestShapeLineFrom.x ? distance : -distance\r\n break;\r\n case 'horizontal':\r\n diff = pointFieldActivePoint.y > pointFieldTestShapeLineFrom.y ? distance : -distance\r\n break;\r\n //todo rotated - set diff distance from tested point to line(beam)\r\n default:\r\n break;\r\n }\r\n\r\n if (distance < sqftConfig.SNAP_OFFSET) {\r\n let result = {\r\n shape: shape,\r\n line: testShapeLine,\r\n point: pointFieldActivePoint,\r\n distance,\r\n diff,\r\n }\r\n distances[shape.id] = distances[shape.id] || {};\r\n (distances[shape.id][lineDirection.orientation] = distances[shape.id][lineDirection.orientation] || []).push(result);\r\n }\r\n }\r\n });\r\n }\r\n });\r\n\r\n return distances;\r\n }\r\n\r\n /**\r\n * @param {sqftShape} activeShape\r\n * @return {object} {sqftShape.id: {lineDirection: [{point: point, distance: int}]}}\r\n */\r\n static getDistancesToSlabImages(activeShape) {\r\n let activeShapeLines = activeShape.getLines();\r\n let croppedSlabImages = store.getState().sqftSlabState.croppedSlabImages;\r\n let distances = {};\r\n activeShapeLines.forEach((activeShapeLine) => {\r\n let pointFieldActiveShapeLineFrom = getPointField(activeShapeLine.from.x, activeShapeLine.from.y, activeShapeLine);\r\n\r\n croppedSlabImages.forEach(function(movableImage) {\r\n if (!movableImage.isHidden) {\r\n let testImagePoints = movableImage.getLinePointsPointField();\r\n for (let i = 0; i <= testImagePoints.length - 1; i++) {\r\n let from = testImagePoints[i];\r\n let to = testImagePoints[i === testImagePoints.length - 1 ? 0 : i + 1] ;\r\n let distance = getDistanceFromPointToLine(\r\n pointFieldActiveShapeLineFrom.x, pointFieldActiveShapeLineFrom.y,\r\n from.x, from.y,\r\n to.x, to.y,\r\n );\r\n const lineOrientation = ShapeHelper.getLineOrientation(from, to);\r\n let diff = Math.abs(distance);\r\n\r\n if (diff < sqftConfig.SNAP_OFFSET) {\r\n let lineMidPoint = getMidPoint(from, to);\r\n let result = {\r\n shape: movableImage,\r\n line: activeShapeLine,\r\n point: pointFieldActiveShapeLineFrom,\r\n distance,\r\n diff,\r\n diffX: pointFieldActiveShapeLineFrom.x - lineMidPoint.x,\r\n diffY: pointFieldActiveShapeLineFrom.y - lineMidPoint.y,\r\n }\r\n distances[movableImage.id] = distances[movableImage.id] || {};\r\n (distances[movableImage.id][lineOrientation] = distances[movableImage.id][lineOrientation] || []).push(result);\r\n }\r\n }\r\n }\r\n });\r\n });\r\n\r\n return distances;\r\n }\r\n\r\n /**\r\n * @param {sqftShape} activeShape\r\n * @return {object} {sqftShape.id: {lineDirection: [{point: point, distance: int}]}}\r\n */\r\n static getDistancesToImages(activeShape) {\r\n let activeShapeLines = activeShape.getLines();\r\n let appliances = sqftImageManager.getAppliances();\r\n let slabImages = sqftImageManager.getSlabImages();\r\n const images = slabImages.concat(appliances);\r\n let distances = {};\r\n activeShapeLines.forEach((activeShapeLine) => {\r\n let pointFieldActiveShapeLineFrom = getPointField(activeShapeLine.from.x, activeShapeLine.from.y, activeShapeLine);\r\n\r\n images.forEach(function(movableImage) {\r\n if (!movableImage.isHidden && movableImage.id !== activeShape.id) {\r\n let testImagePoints = movableImage.getLinePointsPointField();\r\n for (let i = 0; i <= testImagePoints.length - 1; i++) {\r\n let from = testImagePoints[i];\r\n let to = testImagePoints[i === testImagePoints.length - 1 ? 0 : i + 1] ;\r\n let distance = getDistanceFromPointToLine(\r\n pointFieldActiveShapeLineFrom.x, pointFieldActiveShapeLineFrom.y,\r\n from.x, from.y,\r\n to.x, to.y,\r\n );\r\n const lineOrientation = ShapeHelper.getLineOrientation(from, to);\r\n let diff = Math.abs(distance);\r\n\r\n if (diff < sqftConfig.SNAP_OFFSET) {\r\n let lineMidPoint = getMidPoint(from, to);\r\n let result = {\r\n shape: movableImage,\r\n line: activeShapeLine,\r\n point: pointFieldActiveShapeLineFrom,\r\n distance,\r\n diff,\r\n diffX: pointFieldActiveShapeLineFrom.x - lineMidPoint.x,\r\n diffY: pointFieldActiveShapeLineFrom.y - lineMidPoint.y,\r\n }\r\n distances[movableImage.id] = distances[movableImage.id] || {};\r\n (distances[movableImage.id][lineOrientation] = distances[movableImage.id][lineOrientation] || []).push(result);\r\n }\r\n }\r\n }\r\n });\r\n });\r\n\r\n return distances;\r\n }\r\n\r\n static getLineOrientation(point1, point2, usePointsV2 = false) {\r\n const x1 = usePointsV2 ? point1.modelCorePoint.getPosX() : point1.x\r\n const x2 = usePointsV2 ? point2.modelCorePoint.getPosX() : point2.x\r\n const y1 = usePointsV2 ? point1.modelCorePoint.getPosY() : point1.y\r\n const y2 = usePointsV2 ? point2.modelCorePoint.getPosY() : point2.y\r\n let slope = (y1 - y2) / (x1 - x2);\r\n let xDiff = Math.round(Math.abs(x2 - x1));\r\n let yDiff = Math.round(Math.abs(y2 - y1));\r\n if (xDiff === 0) {\r\n return \"vertical\";\r\n } else if (yDiff === 0) {\r\n return \"horizontal\";\r\n } else {\r\n if (slope >= 0) { //southeast and northwest\r\n if (x2 > x1) {\r\n return \"SOUTHEAST\";\r\n } else {\r\n return \"NORTHWEST\";\r\n }\r\n } else {\r\n if (x2 > x1) {\r\n return \"NORTHEAST\";\r\n } else {\r\n return \"SOUTHWEST\";\r\n }\r\n }\r\n }\r\n }\r\n\r\n /**\r\n * find all snapping possibilities\r\n * @param {object} itemBounds\r\n * @return {object} {sqftShape.id: [intersectionPoints]}\r\n */\r\n static getSnappingPossibilities(itemBounds) {\r\n if (Object.keys(itemBounds).length === 0) {\r\n return []\r\n }\r\n let resultV = [], resultH = [];\r\n for (let i in itemBounds) {\r\n if (itemBounds[i].vertical) {\r\n itemBounds[i].vertical.forEach((itemBound) => {\r\n resultV.push({\r\n shape: itemBound.shape,\r\n line: itemBound.line,\r\n point: itemBound.point,\r\n offset: itemBound.distance,\r\n diff: itemBound.diffX,\r\n orientation: \"vertical\",\r\n });\r\n });\r\n }\r\n if (itemBounds[i].horizontal) {\r\n itemBounds[i].horizontal.forEach((itemBound) => {\r\n resultH.push({\r\n shape: itemBound.shape,\r\n line: itemBound.line,\r\n point: itemBound.point,\r\n offset: itemBound.distance,\r\n diff: itemBound.diffY,\r\n orientation: \"horizontal\",\r\n });\r\n });\r\n }\r\n }\r\n\r\n let guides = [];\r\n\r\n // find closest snap\r\n let minV = resultV.sort((a, b) => a.diff - b.diff)[0];\r\n let minH = resultH.sort((a, b) => a.diff - b.diff)[0];\r\n if (minV) {\r\n guides.push(minV);\r\n }\r\n if (minH) {\r\n guides.push(minH);\r\n }\r\n if (guides.length > 0) {\r\n //debugger // eslint-disable-line no-debugger\r\n }\r\n return guides;\r\n }\r\n\r\n /**\r\n * Find all snapping possibilities for the same part ID\r\n * @param {object} itemBounds\r\n * @param partId\r\n * @return {object} {sqftShape.id: [intersectionPoints]}\r\n */\r\n static getItemBoundsForTheSamePartIdIfExist(itemBounds, partId) {\r\n if (Object.keys(itemBounds).length === 0) {\r\n return {};\r\n }\r\n\r\n const newItemBounds = {};\r\n\r\n for (let key in itemBounds) {\r\n if (itemBounds.hasOwnProperty(key)) {\r\n let verticalElements = [];\r\n let horizontalElements = [];\r\n\r\n if (itemBounds[key].vertical) {\r\n verticalElements = itemBounds[key].vertical.filter(verticalElement => verticalElement.shape.partId === partId);\r\n }\r\n\r\n if (itemBounds[key].horizontal) {\r\n horizontalElements = itemBounds[key].horizontal.filter(horizontalElement => horizontalElement.shape.partId === partId);\r\n }\r\n\r\n if (verticalElements.length > 0 || horizontalElements.length > 0) {\r\n newItemBounds[key] = {\r\n vertical: verticalElements.length > 0 ? verticalElements : undefined,\r\n horizontal: horizontalElements.length > 0 ? horizontalElements : undefined\r\n };\r\n }\r\n }\r\n }\r\n\r\n return newItemBounds;\r\n }\r\n\r\n /**\r\n * find all snapping possibilities\r\n * @param {object} itemBounds\r\n * @return {object} {sqftShape.id: [intersectionPoints]}\r\n */\r\n static getSnappingPossibilitiesToLines(itemBounds) {\r\n if (Object.keys(itemBounds).length === 0) {\r\n return []\r\n }\r\n let resultV = [], resultH = [];\r\n for (let i in itemBounds) {\r\n if (itemBounds[i].vertical) {\r\n itemBounds[i].vertical.forEach((itemBound) => {\r\n resultV.push({\r\n line: itemBound.line,\r\n point: itemBound.point,\r\n distance: itemBound.distance,\r\n diff: itemBound.diff,\r\n orientation: \"vertical\",\r\n });\r\n });\r\n }\r\n if (itemBounds[i].horizontal) {\r\n itemBounds[i].horizontal.forEach((itemBound) => {\r\n resultH.push({\r\n line: itemBound.line,\r\n point: itemBound.point,\r\n diff: itemBound.diff,\r\n orientation: \"horizontal\",\r\n });\r\n });\r\n }\r\n }\r\n\r\n let guides = [];\r\n\r\n // find closest snap\r\n let minV = resultV.sort((a, b) => a.distance - b.distance)[0];\r\n let minH = resultH.sort((a, b) => a.distance - b.distance)[0];\r\n if (minV) {\r\n guides.push(minV);\r\n }\r\n if (minH) {\r\n guides.push(minH);\r\n }\r\n\r\n if (guides.length > 0) {\r\n //debugger // eslint-disable-line no-debugger\r\n }\r\n return guides;\r\n }\r\n\r\n static getMinLengthToPoints(shape, points) {\r\n let shapeLines = shape.getLines();\r\n let minLength = null;\r\n let pointDistances = [];\r\n points.forEach(function(point) {\r\n shapeLines.forEach(function(line) {\r\n let pointField = getPointField(line.from.x, line.from.y, line)\r\n let pointDistance = getPointDistance(pointField, point);\r\n\r\n pointDistances.push(pointDistance);\r\n if (minLength === null || pointDistance < minLength) {\r\n minLength = pointDistance\r\n }\r\n })\r\n })\r\n pointDistances.sort((a, b) => a - b);\r\n //console.log(\"pointDistances\", pointDistances);\r\n\r\n return pointDistances ? pointDistances : null\r\n }\r\n\r\n static getInnerCornerPoints(shape) {\r\n let lines = shape.getLines(),\r\n points = [];\r\n\r\n for (let i = 0; i < lines.length; i++) {\r\n if (lines[i].to.angle > 0 || lines[i].to.arcLength > 0) {\r\n let dir = shape.getAngleDirection(lines[i]);\r\n if (this.isAngleInner(dir)) {\r\n points.push(lines[i].to);\r\n }\r\n }\r\n }\r\n\r\n return points\r\n }\r\n\r\n static isAngleInner(dir) {\r\n let isInner = false;\r\n switch(dir.facing) {\r\n case \"nw\":\r\n if (dir.orientation === \"horizontal\") {\r\n isInner = true\r\n }\r\n break;\r\n case \"ne\":\r\n if (dir.orientation === \"vertical\") {\r\n isInner = true\r\n }\r\n break;\r\n case \"se\":\r\n if (dir.orientation === \"horizontal\") {\r\n isInner = true\r\n }\r\n break;\r\n case \"sw\":\r\n if (dir.orientation === \"vertical\") {\r\n isInner = true\r\n }\r\n\r\n break;\r\n }\r\n\r\n return isInner;\r\n }\r\n\r\n //deprecated (old rotation function) use getCenterPoint\r\n static getShapeCenter(lines, isSlabMode) {\r\n let max_x = 0, min_x = 0, max_y = 0, min_y = 0;\r\n for(let i = 0; i < lines.length; i++) {\r\n let rotatePointX = isSlabMode ? lines[i].from.posSlab.x : lines[i].from.x;\r\n let rotatePointY = isSlabMode ? lines[i].from.posSlab.y : lines[i].from.y;\r\n if (max_x < rotatePointX)\r\n max_x = rotatePointX;\r\n if (min_x > rotatePointX)\r\n min_x = rotatePointX;\r\n if (max_y < rotatePointY)\r\n max_y = rotatePointY;\r\n if (min_y > rotatePointY)\r\n min_y = rotatePointY;\r\n }\r\n\r\n return {x: ((max_x - min_x) / 2) + min_x, y: ((max_y - min_y) / 2) + min_y};\r\n }\r\n\r\n static getCenterPoint(points) {\r\n let xCords = points.map (point => point.x);\r\n let yCords = points.map (point => point.y);\r\n let cx = (Math.min (...xCords) + Math.max (...xCords)) / 2;\r\n let cy = (Math.min (...yCords) + Math.max (...yCords)) / 2;\r\n\r\n return {x: cx, y: cy};\r\n }\r\n\r\n static getAbsolutePosFromSnapPossibilities = (snapPossibilities, pos) => {\r\n if (snapPossibilities.length > 0) {\r\n let scale = sqftConfig.scale;\r\n let absolutePos = {...pos};\r\n let snapWithShape = null;\r\n snapPossibilities.forEach((snap) => {\r\n switch (snap.orientation) {\r\n case \"horizontal\":\r\n absolutePos.y -= snap.diff / scale\r\n break;\r\n case \"vertical\":\r\n absolutePos.x -= snap.diff / scale\r\n break;\r\n }\r\n snapWithShape = snap.shape;\r\n })\r\n return [absolutePos, snapWithShape]\r\n }\r\n return [null, null]\r\n }\r\n}\r\n\r\n/**\r\n * get line length number text from 2 point\r\n */\r\nexport const getLineLengthNumberText = (pointFrom, pointTo, parent, changeValueCallback) => {\r\n const midPoint = getMidPoint(pointFrom.getPosition(), pointTo.getPosition()),\r\n lineOrientation = getLineOrientation(pointFrom, pointTo),\r\n //todo line direction\r\n lineDirection = {newDirection: \"west\"},//getPointDirection(pointFrom, pointTo, nextPoint, prevPoint),\r\n distance = getPointDistance(pointFrom, pointTo);\r\n\r\n let yOffset = 0,\r\n xOffset = 0;\r\n\r\n switch (lineOrientation) {\r\n case orientation.HORIZONTAL: {\r\n yOffset = lineDirection.newDirection === \"west\" ? 36 + 10 : -36;\r\n break;\r\n }\r\n case orientation.VERTICAL: {\r\n xOffset = (lineDirection.newDirection === \"south\" ? 36 + 10 : -36 - 10);\r\n break;\r\n }\r\n //TODO rotation\r\n case orientation.NORTHWEST: { break; }\r\n case orientation.NORTHEAST: { break; }\r\n case orientation.SOUTHWEST: { break; }\r\n case orientation.SOUTHEAST: { break; }\r\n default: break;\r\n }\r\n\r\n let pos = {\r\n x: midPoint.x,\r\n y: midPoint.y,\r\n xOffset: xOffset,\r\n yOffset: yOffset,\r\n orientation: lineOrientation,\r\n betweenPoints: {\r\n pointFrom: pointFrom,\r\n pointTo: pointTo,\r\n }\r\n };\r\n\r\n let design = {\r\n shouldRenderFrameBorder: true,\r\n isLength: true\r\n };\r\n\r\n return new NumberText(distance, pos, design, parent, changeValueCallback);\r\n}\r\n\r\nexport const getPointDirection = (aP, bP, cP, lineBeforeFrom) => { // line1.from , line1.to, line2.to, lineBefore.from\r\n var\r\n mAC = getMidPoint(aP, cP),\r\n vDir,\r\n hDir,\r\n orientation = ShapeHelper.getLineOrientation(aP,bP),\r\n newDirection = '',\r\n cornerMargins = {\r\n fromTop : 0,\r\n fromLeft : 0,\r\n fromRight : 0,\r\n fromBottom : 0,\r\n },\r\n dirX = 'forward',\r\n dirY = 'forward';\r\n\r\n if (aP.x > bP.x) {\r\n dirX = 'backward';\r\n }\r\n if (aP.y < bP.y) {\r\n dirY = 'backward';\r\n }\r\n if (bP.y >= mAC.y) {\r\n vDir = \"n\";\r\n } else {\r\n vDir = \"s\";\r\n }\r\n if (bP.x >= mAC.x) { // 155 - 118\r\n hDir = \"w\";\r\n } else {\r\n hDir = \"e\";\r\n }\r\n\r\n var point1X = aP.x - (aP.x % 1),\r\n point1Y = aP.y - (aP.y % 1),\r\n point2X = bP.x - (bP.x % 1),\r\n point2Y = bP.y - (bP.y % 1),\r\n point3X = cP.x - (cP.x % 1),\r\n point3Y = cP.y - (cP.y % 1),\r\n pointBeforeX = lineBeforeFrom.x - (lineBeforeFrom.x % 1),\r\n pointBeforeY = lineBeforeFrom.y - (lineBeforeFrom.y % 1); // remove all after dot for proper compare\r\n\r\n if (orientation === \"horizontal\") {\r\n newDirection = (point1X > point2X) ? \"west\" : \"east\"\r\n }\r\n\r\n if (orientation === \"vertical\") {\r\n newDirection = (point1Y > point2Y) ? \"north\" : \"south\"\r\n }\r\n\r\n if ((point1X === point2X) && (point2Y === point3Y) && (point1X < pointBeforeX) && (newDirection === \"south\")\r\n || (point1X === point2X) && (point2Y === point3Y) && (point2X > cP.x) && (newDirection === \"north\")) {\r\n cornerMargins.fromTop = true\r\n }\r\n if ((point1Y === point2Y) && (point2X === point3X) && (point3Y > point2Y) && (point1X > point2X)\r\n ||(point1Y === point2Y) && (pointBeforeX === point1X) && (pointBeforeY < point1Y) && (point2X > point1X)) {\r\n cornerMargins.fromLeft = true\r\n }\r\n if ((point1Y === point2Y) && (point1X === pointBeforeX) && (pointBeforeY > point1Y) && (point1X > point2X)\r\n ||(point1Y === point2Y) && (point2X === point3X) && (point2Y > point3Y) && (point2X > point1X)) {\r\n cornerMargins.fromRight = true\r\n }\r\n if ((point1X === point2X) && (point2Y === point3Y) && (point1Y < point2Y) && (point3X > point2X)\r\n ||(point1X === point2X) && (point1Y === pointBeforeY) && (point1X > pointBeforeX) && (point1Y > point2Y)) {\r\n cornerMargins.fromBottom = true\r\n }\r\n\r\n return {\r\n facing: vDir + hDir,\r\n direction: {x: dirX, y: dirY},\r\n cornerMargins : cornerMargins,\r\n orientation : orientation,\r\n newDirection : newDirection\r\n }\r\n\r\n}\r\n\r\n/**\r\n * get line length number text from 2 point\r\n */\r\nexport const getLineLengthNumberTextV2 = (pointFrom, pointTo, parent, changeValueCallback) => {\r\n const midPoint = getMidPoint(pointFrom.getPosition(), pointTo.getPosition()),\r\n lineOrientation = getLineOrientation(pointFrom, pointTo),\r\n lineDirection = getLineDirection(pointFrom, pointTo),\r\n distance = getPointDistance(pointFrom, pointTo);\r\n\r\n let yOffset = 0,\r\n xOffset = 0;\r\n\r\n switch (lineOrientation) {\r\n case orientation.HORIZONTAL: {\r\n const ctx = sqftEventManager.getCtx();\r\n const fontSize = getFontSizeFromContext(ctx);\r\n yOffset = lineDirection === DIRECTIONS.WEST ? fontSize : -fontSize;\r\n\r\n break;\r\n }\r\n case orientation.VERTICAL: {\r\n xOffset = (lineDirection === DIRECTIONS.SOUTH ? + 10 : - 10);\r\n break;\r\n }\r\n //TODO rotation\r\n case orientation.NORTHWEST: { break; }\r\n case orientation.NORTHEAST: { break; }\r\n case orientation.SOUTHWEST: { break; }\r\n case orientation.SOUTHEAST: { break; }\r\n default: break;\r\n }\r\n\r\n let pos = {\r\n x: midPoint.x,\r\n y: midPoint.y,\r\n xOffset: xOffset,\r\n yOffset: yOffset,\r\n orientation: lineOrientation,\r\n betweenPoints: {\r\n pointFrom: pointFrom,\r\n pointTo: pointTo,\r\n }\r\n };\r\n\r\n let design = {\r\n shouldRenderFrameBorder: false,\r\n isLength: true,\r\n priority: EventManager.priorities.SEGMENT\r\n };\r\n\r\n return new NumberText(distance, pos, design, parent, changeValueCallback);\r\n}\r\n\r\n/**\r\n * get line length number text from 2 point\r\n */\r\nexport const getLineLengthNumberTextV2ForTheImage = (pointFrom, pointTo, parent, changeValueCallback) => {\r\n const midPoint = getMidPoint(pointFrom.getPosition(), pointTo.getPosition()),\r\n lineOrientation = getLineOrientation(pointFrom, pointTo),\r\n lineDirection = getLineDirection(pointFrom, pointTo),\r\n distance = getPointDistance(pointFrom, pointTo);\r\n\r\n let yOffset = 0,\r\n xOffset = 0;\r\n const ctx = sqftEventManager.getCtx();\r\n const fontSize = getFontSizeFromContext(ctx);\r\n\r\n switch (lineOrientation) {\r\n case orientation.HORIZONTAL: {\r\n yOffset = lineDirection === DIRECTIONS.WEST ? fontSize : fontSize;\r\n\r\n break;\r\n }\r\n case orientation.VERTICAL: {\r\n xOffset = (lineDirection === DIRECTIONS.SOUTH ? - 0 : 0);\r\n yOffset = lineDirection === DIRECTIONS.WEST ? fontSize : fontSize;\r\n\r\n break;\r\n }\r\n //TODO rotation\r\n case orientation.NORTHWEST: { break; }\r\n case orientation.NORTHEAST: { break; }\r\n case orientation.SOUTHWEST: { break; }\r\n case orientation.SOUTHEAST: { break; }\r\n default: break;\r\n }\r\n\r\n let pos = {\r\n x: midPoint.x,\r\n y: midPoint.y,\r\n xOffset: xOffset,\r\n yOffset: yOffset,\r\n orientation: lineOrientation,\r\n betweenPoints: {\r\n pointFrom: pointFrom,\r\n pointTo: pointTo,\r\n }\r\n };\r\n\r\n let design = {\r\n shouldRenderFrameBorder: false,\r\n isLength: true,\r\n eventsPriority: EventManager.priorities.IMAGE_LINE\r\n };\r\n\r\n return new NumberText(distance, pos, design, parent, changeValueCallback);\r\n}\r\n\r\nexport const getLineDirection = (pointA, pointB, shouldRound = false) => {\r\n let deltaX, deltaY;\r\n if (shouldRound) {\r\n deltaX = Math.round10(pointB.x, -1) - Math.round10(pointA.x, -1);\r\n deltaY = Math.round10(pointB.y, -1) - Math.round10(pointA.y, -1);\r\n } else {\r\n deltaX = pointB.x - pointA.x;\r\n deltaY = pointB.y - pointA.y;\r\n }\r\n\r\n if (deltaX > 0 && deltaY === 0) {\r\n return DIRECTIONS.EAST;\r\n } else if (deltaX < 0 && deltaY === 0) {\r\n return DIRECTIONS.WEST;\r\n } else if (deltaY > 0 && deltaX === 0) {\r\n return DIRECTIONS.SOUTH;\r\n } else if (deltaY < 0 && deltaX === 0) {\r\n return DIRECTIONS.NORTH;\r\n } else if (deltaX > 0 && deltaY < 0) {\r\n return DIRECTIONS.NORTHEAST;\r\n } else if (deltaX < 0 && deltaY < 0) {\r\n return DIRECTIONS.NORTHWEST;\r\n } else if (deltaX > 0 && deltaY > 0) {\r\n return DIRECTIONS.SOUTHEAST;\r\n } else if (deltaX < 0 && deltaY > 0) {\r\n return DIRECTIONS.SOUTHWEST;\r\n } else {\r\n return DIRECTIONS.UNDEFINED;\r\n }\r\n}\r\n\r\n/**\r\n * @Deprecated. Use getLineDirection instead\r\n */\r\nexport const getLineOrientation = (pointFrom, pointTo) => {\r\n let slope = getSlope(pointFrom, pointTo),\r\n xDiff = Math.round(Math.abs(pointTo.x - pointFrom.x)),\r\n yDiff = Math.round(Math.abs(pointTo.y - pointFrom.y));\r\n\r\n if (xDiff === 0) {\r\n return orientation.VERTICAL;\r\n } else if (yDiff === 0) {\r\n return orientation.HORIZONTAL;\r\n } else {\r\n if (slope >= 0) { //southeast and northwest\r\n if (pointTo.x > pointFrom.x) {\r\n return orientation.SOUTHEAST;\r\n } else {\r\n return orientation.NORTHWEST;\r\n }\r\n } else {\r\n if (pointTo.x > pointFrom.x) {\r\n return orientation.NORTHEAST;\r\n } else {\r\n return orientation.SOUTHWEST;\r\n }\r\n }\r\n }\r\n}\r\n\r\nexport const getSlope = (pointFrom, pointTo) => {\r\n let x1 = pointFrom.x,\r\n x2 = pointTo.x,\r\n y1 = pointFrom.y,\r\n y2 = pointTo.y;\r\n\r\n return (y1 - y2) / (x1 - x2);\r\n}\r\n\r\nexport const getSlopeV2 = (pointFrom, pointTo) => {\r\n if (pointTo.x - pointFrom.x !== 0) {\r\n return (pointTo.y - pointFrom.y) / (pointTo.x - pointFrom.x);\r\n }\r\n return Number.MAX_VALUE;\r\n}\r\n\r\n/**\r\n * @param {{from: {x:number, y: number}, to: {x:number, y: number}}} line1\r\n * @param {{from: {x:number, y: number}, to: {x:number, y: number}}} line2\r\n * get angle between two lines https://www.geeksforgeeks.org/angle-between-a-pair-of-lines/\r\n */\r\nexport const getAngleBetweenTwoLines = (line1, line2) => {\r\n const slopeLine1 = getSlopeV2(line1.from, line1.to);\r\n const slopeLine2 = getSlopeV2(line2.from, line2.to);\r\n\r\n return getAngleBetweenTwoSlopes(slopeLine1, slopeLine2);\r\n}\r\n\r\nexport const getAngleBetweenTwoSlopes = (M1, M2) => {\r\n // Store the tan value of the angle\r\n let angle = Math.abs((M2 - M1) / (1 + M1 * M2));\r\n\r\n // Calculate tan inverse of the angle\r\n let ret = Math.atan(angle);\r\n\r\n // Convert the angle from\r\n // radian to degree\r\n\r\n return (ret * 180) / Math.PI;\r\n}\r\n\r\n/**\r\n * @param {{x:number, y: number}} point1\r\n * @param {{x:number, y: number}} point2\r\n */\r\nexport const getVectorByPoints = (point1, point2) => {\r\n return {x: point2.x - point1.x, y: point2.y - point1.y}\r\n}\r\n\r\n/**\r\n * @param {{from: {x:number, y: number}, to: {x:number, y: number}}} line1\r\n * @param {{from: {x:number, y: number}, to: {x:number, y: number}}} line2\r\n */\r\nexport const getAngleBetweenTwoLinesV2 = (line1, line2) => {\r\n const vector1 = getVectorByPoints(line1.to, line1.from);\r\n const vector2 = getVectorByPoints(line2.from, line2.to);\r\n //const pointDistance = Math.sqrt(Math.pow(vectorLine2.x - vectorLine1.x, 2) + Math.pow(vectorLine2.y - vectorLine1.y, 2));\r\n const cosAngle = (vector1.x + vector2.x + vector1.y + vector2.y)\r\n / Math.sqrt(Math.pow(vector1.x, 2) + Math.pow(vector1.y, 2))\r\n * Math.sqrt(Math.pow(vector2.x, 2) + Math.pow(vector2.y, 2));\r\n\r\n //todo\r\n //console.log(\"cosAngle\", cosAngle);\r\n return Math.acos (cosAngle)\r\n}\r\n\r\n/**\r\n * Calculates the angle ABC ()\r\n *\r\n * A first point, ex: {x: 0, y: 0}\r\n * C second point\r\n * B center point\r\n **/\r\nexport const getAngleBetween3Points = (A, B, C) => {\r\n let AB = Math.sqrt(Math.pow(B.x - A.x,2)+ Math.pow(B.y - A.y,2));\r\n let BC = Math.sqrt(Math.pow(B.x - C.x,2)+ Math.pow(B.y - C.y,2));\r\n let AC = Math.sqrt(Math.pow(C.x - A.x,2)+ Math.pow(C.y - A.y,2));\r\n const angleInRadians = Math.acos((BC*BC+AB*AB-AC*AC)/(2*BC*AB));\r\n\r\n return (angleInRadians * 180) / Math.PI\r\n}\r\n\r\nexport const getEdgeFeatureGroup = () => {\r\n if (!SqftStore.edgeFeatureGroups) {\r\n SqftStore.edgeFeatureGroups = {};\r\n }\r\n\r\n const visualizerType = document.kvConfig.visualizerType;\r\n\r\n // Check if the edgeFeatureGroup for the current visualizerType is already cached\r\n if (!SqftStore.edgeFeatureGroups[visualizerType]) {\r\n const mainNeeded = \"edge_profile\";\r\n const oppositeNeeded = \"center_island_edge\";\r\n const layout = getCurrentLayout(visualizerType);\r\n\r\n let featureGroup = layout.getSubPartFromQtCategories(mainNeeded);\r\n if (!featureGroup) {\r\n featureGroup = layout.getSubPartFromQtCategories(oppositeNeeded);\r\n }\r\n if (!featureGroup) {\r\n featureGroup = layout.parts[\"Countertop\"] && layout.parts[\"Countertop\"].edge\r\n ? { part: layout.parts[\"Countertop\"].edge }\r\n : null;\r\n }\r\n if (!featureGroup) {\r\n let fg = layout.getFeatureGroupByPartId(\"edge_profile\");\r\n if (fg) {\r\n featureGroup = {part: fg};\r\n }\r\n }\r\n\r\n // Cache the result for the current visualizerType\r\n SqftStore.edgeFeatureGroups[visualizerType] = featureGroup;\r\n }\r\n\r\n return SqftStore.edgeFeatureGroups[visualizerType];\r\n};\r\n\r\nexport const getEdgeFeatures = (edgeFeatureGroup) => {\r\n if (!edgeFeatureGroup) {\r\n edgeFeatureGroup = getEdgeFeatureGroup();\r\n }\r\n if (!edgeFeatureGroup) {\r\n return []\r\n }\r\n const state = store.getState();\r\n const {wizardIsActive} = state.wizardState;\r\n\r\n if (SqftStore.edgeFeatures.length === 0) {\r\n let navItems\r\n\r\n if (wizardIsActive) {\r\n navItems = getNavItemsFromTheWizard(edgeFeatureGroup);\r\n } else {\r\n const layout = getCurrentLayout();\r\n navItems = layout.designNavigationItems(edgeFeatureGroup,\r\n {},\r\n \"\",\r\n false,\r\n \"all\",\r\n [],\r\n { firstFeature: null, firstConditions: null },\r\n )\r\n }\r\n\r\n SqftStore.edgeFeatures = edgeFeatureGroup\r\n ? navItems\r\n : [];\r\n }\r\n\r\n return SqftStore.edgeFeatures\r\n};\r\n\r\n\r\n/**\r\n * countertopPartName will be center_island_countertop if it not exists in the room or at all in qtCategories the same\r\n * for center_island_countertop, it will return countertop if center_island_countertop not exists\r\n * @returns {[string, string]} countertopPartName, centerIslandPartName\r\n */\r\nexport const getCountertopPartNames = (intl = null) => {\r\n const state = store.getState();\r\n const {quotes, activeQuoteIndex} = state.quotesState;\r\n const fabricatorData = state.fabricatorState;\r\n const activeRoomId = state.sqftMenuState.activeRoomId;\r\n const cartItems = state.cartState.cartItems;\r\n intl = intl ? intl : workspace.intl;\r\n const roomName = getRoomName(activeQuoteIndex, cartItems, quotes, intl.messages, intl.locale, fabricatorData);\r\n void roomName; //todo remove\r\n const room = activeRoomId ? activeRoomId : document.kvConfig.visualizerType\r\n const layout = getCurrentLayout();\r\n\r\n let countertopNavItem = layout.getSubPartFromQtCategories(SHAPE_PART_ID.countertop, room);\r\n let centerIslandNavItem = layout.getSubPartFromQtCategories(SHAPE_PART_ID.center_island_countertop, room);\r\n\r\n if (!countertopNavItem && !centerIslandNavItem) {\r\n countertopNavItem = layout.getSubPartFromQtCategories(SHAPE_PART_ID.countertop);\r\n centerIslandNavItem = layout.getSubPartFromQtCategories(SHAPE_PART_ID.center_island_countertop);\r\n }\r\n\r\n //try to assign vanity countertop if countertop or center_island_countertop not exist\r\n if (!countertopNavItem && !centerIslandNavItem) {\r\n countertopNavItem = centerIslandNavItem = layout.getSubPartFromQtCategories(SHAPE_PART_ID.vanity_countertop);\r\n }\r\n\r\n const countertopPartName = countertopNavItem ? countertopNavItem.part.partId : SHAPE_PART_ID.center_island_countertop;\r\n const centerIslandPartName = centerIslandNavItem ? centerIslandNavItem.part.partId : SHAPE_PART_ID.countertop;\r\n\r\n return [countertopPartName, centerIslandPartName];\r\n}\r\n\r\n/**\r\n * Test if shape part ids are equal, parentPartId is added for the spacers\r\n * @param shape\r\n * @param testShape\r\n * @return {boolean}\r\n */\r\nexport const canShapeBeAutoShifted = (shape, testShape) => {\r\n const isTestShapePlacedOnTheFloor = getIsShapePlacedOnTheFloor(testShape);\r\n const isTestShapePlacedOnTheWall = getIsShapePlacedOnTheWall(testShape);\r\n\r\n return (shape.id !== testShape.id &&\r\n ((shape.partId === SHAPE_PART_ID.upper_cabinet_boxes && isTestShapePlacedOnTheWall)\r\n || (shape.parentPartId === SHAPE_PART_ID.upper_cabinet_boxes && isTestShapePlacedOnTheWall)\r\n || (shape.partId === SHAPE_PART_ID.lower_cabinet_boxes && isTestShapePlacedOnTheFloor)\r\n || (shape.parentPartId === SHAPE_PART_ID.lower_cabinet_boxes && isTestShapePlacedOnTheFloor)\r\n || (shape.partId === SHAPE_PART_ID.tall_cabinet_boxes && isTestShapePlacedOnTheFloor)\r\n || (shape.parentPartId === SHAPE_PART_ID.tall_cabinet_boxes && isTestShapePlacedOnTheFloor)))\r\n}\r\n\r\nexport const getIsShapePlacedOnTheFloor = (shape) => {\r\n return (shape.partId === SHAPE_PART_ID.tall_cabinet_boxes\r\n || shape.parentPartId === SHAPE_PART_ID.tall_cabinet_boxes\r\n || shape.partId === SHAPE_PART_ID.lower_cabinet_boxes\r\n || shape.parentPartId === SHAPE_PART_ID.lower_cabinet_boxes\r\n)}\r\n\r\nexport const getIsShapePlacedOnTheWall = (shape) => {\r\n return (shape.partId === SHAPE_PART_ID.upper_cabinet_boxes\r\n || shape.parentPartId === SHAPE_PART_ID.upper_cabinet_boxes\r\n)}\r\n","import React from \"react\";\r\n\r\nexport const SaveIcon = () => {\r\n return (\r\n \r\n )\r\n};\r\n\r\nexport const ProductsIconAnimated = () => (\r\n \r\n);\r\n\r\nexport const TimingIconAnimated = () => (\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n
: null}*/}\r\n {/*{fabricatorData.received ?
\r\n \r\n \r\n \r\n : null}\r\n \r\n
\r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = (store) => ({\r\n fabricatorData: store.fabricatorState,\r\n selectedFilters: store.filterState.selectedFilters,\r\n filtersVisible: store.filterState.showFilters,\r\n filterGroups: store.filterState.filterGroups,\r\n bvPresets: store.bathroomVisualizerState.bvPresets,\r\n userPopupOpened: store.userState.userPopupOpened,\r\n activeNavigationFilter: store.navigationState.activeNavigationFilter,\r\n countertopNavigationFilterCompleted: store.navigationState.countertopNavigationFilterCompleted,\r\n newLayoutType: store.sqftState.newLayoutType,\r\n activeQuoteIndex: store.quotesState.activeQuoteIndex,\r\n});\r\n\r\nconst mapDispatchToProps = {\r\n setNavigationViewType,\r\n setModuleContextMenuType,\r\n setDefaultSelectionGroup,\r\n changeActivePartRelatedItemIndex,\r\n setActiveNavigationFilter,\r\n setActiveNavigationFilterStepIndex,\r\n setModuleContextMenuModule,\r\n setNavigationLoading\r\n};\r\n\r\nexport default injectIntl(\r\n connect(mapStateToProps, mapDispatchToProps)(MobileNavigation)\r\n);\r\n","import {LayoutType} from \"./constants\";\r\nimport {UseFullSizeImages} from \"../../../config\";\r\nimport {getCurrentLayout} from \"../../appLayout\";\r\n\r\nlet layouts = {};\r\nObject.keys(LayoutType).forEach(layoutName => {\r\n layouts[layoutName] = {\r\n center_island_sink: 3100,\r\n walls_ceiling: 50900,\r\n kitchen_floor: 50025,\r\n // slat_wall: 50020,\r\n shower_wall_mirror: 50050,\r\n back_wall: 50100,\r\n front_wall: 50200,\r\n left_wall: 50500,\r\n right_wall: 54000,\r\n background_bg: 70000,\r\n };\r\n});\r\n\r\nconst getLayerDimensions = (layer, currentLayout, canvasDimensions) => {\r\n const fullImagesFactor = UseFullSizeImages ? 177.77 : 100;\r\n const sizeFactor = fullImagesFactor / 100;\r\n const {coords} = layer;\r\n\r\n if (!coords) {\r\n return null\r\n }\r\n\r\n const COORDS_MAX = 1;\r\n\r\n const x1Percentage = (coords.min_x * 100) / COORDS_MAX;\r\n const x2Percentage = (coords.max_x * 100) / COORDS_MAX;\r\n const y1Percentage = (coords.min_y * 100) / COORDS_MAX;\r\n const y2Percentage = (coords.max_y * 100) / COORDS_MAX;\r\n let x1 = sizeFactor*((canvasDimensions.width * x1Percentage) / 100);\r\n let x2 = sizeFactor*((canvasDimensions.width * x2Percentage) / 100);\r\n let y1 = sizeFactor*((canvasDimensions.height * y1Percentage) / 100);\r\n let y2 = sizeFactor*((canvasDimensions.height * y2Percentage) / 100);\r\n return {\r\n polygonArray: [[x1, y1], [x2, y1], [x2, y2], [x1, y2]],\r\n width: (x2 - x1),\r\n height:(y2 - y1)\r\n };\r\n};\r\n\r\nconst getMenuByHoveredLayer = (layer) => {\r\n const layout = getCurrentLayout();\r\n const featureGroup = layout.getFeatureGroupByPartId(layer.partId);\r\n if (featureGroup) {\r\n return {\r\n parent: featureGroup.getParent().partName,\r\n child: featureGroup.partName\r\n }\r\n }\r\n return \"\"\r\n};\r\n\r\nexport default {\r\n layouts,\r\n getMenuByHoveredLayer,\r\n getLayerDimensions\r\n}\r\n\r\n\r\n","import snakeCase from \"lodash/snakeCase\";\r\nimport {Part} from \"../part\";\r\nimport {PartMenuType} from \"../../../visComponents/constants\";\r\nimport DesignNavigationItem from \"../../../visComponents/designNavigationItem\";\r\nimport NonVisualizerSubPart from \"../subparts/nonVisualizerSubPart\";\r\n\r\nexport default class Other extends Part {\r\n static id = 'Other';\r\n constructor() {\r\n super(true, false, PartMenuType.Complex);\r\n\r\n this.menuType = PartMenuType.Complex;\r\n this.partName = 'Other';\r\n this.categoryEnabled = false;\r\n }\r\n\r\n load(dbFeature) {\r\n // console.log(\"load other\", dbFeature.groupName);\r\n const partId = snakeCase(dbFeature.groupName);\r\n let relatedItem = this.relatedItems.find(relatedItem => relatedItem.partId === partId);\r\n if (!relatedItem) {\r\n relatedItem = new NonVisualizerSubPart(true, partId, dbFeature.groupName);\r\n this.relatedItems.push(relatedItem);\r\n }\r\n relatedItem.getParent = () => this;\r\n relatedItem.load(dbFeature);\r\n return true\r\n }\r\n\r\n navigationItem() {\r\n return new DesignNavigationItem('Other', this);\r\n }\r\n\r\n isSubTypeWithItems() {\r\n return false;\r\n }\r\n\r\n handleSubPartClick() {\r\n\r\n }\r\n\r\n}\r\n","import {Part} from \"../part\";\r\nimport {PartMenuType} from \"../../../visComponents/constants\";\r\nimport DesignNavigationItem from \"../../../visComponents/designNavigationItem\";\r\nimport BackgroundBG from \"../subparts/backgrounds/BackgroundBG\";\r\n\r\nexport default class Background extends Part {\r\n static id = 'Background';\r\n constructor() {\r\n super(true, false, PartMenuType.Complex);\r\n\r\n this.menuType = PartMenuType.Complex;\r\n this.partName = 'Background';\r\n this.categoryEnabled = false;\r\n }\r\n\r\n load(dbFeature) {\r\n let relatedItemName = \"\",\r\n RelatedItemClass = null;\r\n switch (dbFeature.groupName) {\r\n case \"BG\":\r\n relatedItemName = \"backgroundBG\";\r\n RelatedItemClass = BackgroundBG;\r\n break;\r\n default:\r\n break;\r\n }\r\n if (relatedItemName) {\r\n if (!this[relatedItemName]) {\r\n this[relatedItemName] = new RelatedItemClass(true);\r\n this.relatedItems.push(this[relatedItemName]);\r\n }\r\n if (!this.categoryEnabled) {\r\n this.categoryEnabled = true\r\n }\r\n this[relatedItemName].getParent = () => this;\r\n this[relatedItemName].load(dbFeature);\r\n return true\r\n }\r\n return false\r\n }\r\n\r\n navigationItem() {\r\n return new DesignNavigationItem(\"Background\", this);\r\n }\r\n\r\n isSubTypeWithItems() {\r\n return false;\r\n }\r\n\r\n handleSubPartClick() {\r\n\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\n\r\nexport default class BackgroundBG extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'background_bg';\r\n this.partName = 'Background BG';\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new BackgroundBG());\r\n }\r\n}\r\n","import {Part} from \"../part\";\r\nimport {PartMenuType} from \"../../../visComponents/constants\";\r\nimport {floorThumbnail} from \"../../../kvComponent/core/assets\";\r\n\r\nimport {IntermediatePart} from \"../intermediatePart\";\r\nimport DesignNavigationItem from \"../../../visComponents/designNavigationItem\";\r\n\r\nexport default class Floor extends Part {\r\n static id = 'Floor';\r\n\r\n constructor() {\r\n super(true, false, PartMenuType.Complex);\r\n this.partId = 'parent_floor';\r\n this.menuType = PartMenuType.Complex;\r\n this.partName = 'Floor';\r\n this.translateId = \"visualizer.kitchen.kitchen_floor\";\r\n this.partThumbnail = floorThumbnail;\r\n }\r\n\r\n load(dbFeature) {\r\n let relatedItemName = \"\",\r\n RelatedItemClass = null;\r\n switch (dbFeature.groupName) {\r\n case \"Flor\":\r\n case \"Floor\":\r\n relatedItemName = \"floorBody\";\r\n RelatedItemClass = FloorBody;\r\n break;\r\n }\r\n if (relatedItemName) {\r\n if (!this[relatedItemName]) {\r\n this[relatedItemName] = new RelatedItemClass(true);\r\n if (relatedItemName !== \"shadows\") {\r\n this.relatedItems.push(this[relatedItemName]);\r\n }\r\n }\r\n if (!this.categoryEnabled) {\r\n this.categoryEnabled = true\r\n }\r\n this[relatedItemName].getParent = () => this;\r\n this[relatedItemName].load(dbFeature);\r\n return true\r\n }\r\n return false\r\n }\r\n\r\n navigationItem() {\r\n return new DesignNavigationItem('Floor', this);\r\n }\r\n\r\n}\r\n\r\nclass FloorBody extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'kitchen_floor';\r\n this.partName = 'Floor';\r\n this.translateId = \"visualizer.kitchen.kitchen_floor\";\r\n this.isStoneFeature = true;\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new FloorBody());\r\n }\r\n}\r\n\r\n\r\n","import {Part} from \"../part\";\r\nimport {PartMenuType} from \"../../../visComponents/constants\";\r\nimport DesignNavigationItem from \"../../../visComponents/designNavigationItem\";\r\n\r\nimport LeftWall from \"../subparts/walls/leftWall\";\r\nimport RightWall from \"../subparts/walls/rightWall\";\r\nimport CenterWall from \"../subparts/walls/centerWall\";\r\nimport FrontWall from \"../subparts/walls/frontWall\";\r\n\r\nexport default class Walls extends Part {\r\n static id = 'Walls';\r\n constructor() {\r\n super(true, false, PartMenuType.Complex);\r\n\r\n this.menuType = PartMenuType.Complex;\r\n this.partName = 'Walls';\r\n this.partThumbnail = \"\";\r\n this.translateId = \"visualizer.kitchen.walls\";\r\n\r\n // related items\r\n this.leftWall = null;\r\n this.rightWall = null;\r\n this.centerWall = null;\r\n this.frontWall = null;\r\n this.ceiling = null;\r\n this.backsplash = null;\r\n }\r\n\r\n load(dbFeature) {\r\n let relatedItemName = \"\",\r\n RelatedItemClass = null;\r\n switch (dbFeature.groupName) {\r\n case \"Left Wall\":\r\n relatedItemName = \"leftWall\";\r\n RelatedItemClass = LeftWall;\r\n break;\r\n case \"Right Wall\":\r\n relatedItemName = \"rightWall\";\r\n RelatedItemClass = RightWall;\r\n break;\r\n case \"Center Wall\":\r\n relatedItemName = \"centerWall\";\r\n RelatedItemClass = CenterWall;\r\n break;\r\n case \"Front Wall\":\r\n relatedItemName = \"frontWall\";\r\n RelatedItemClass = FrontWall;\r\n break;\r\n // case \"Shower Shadow\":\r\n // if (\r\n // dbFeature.displayName.includes(\"Shower Shadow - Divider Wall\")\r\n // || dbFeature.displayName.includes(\"Shower Shadow - EX L\")\r\n // || dbFeature.displayName.includes(\"Shower Shadow - EX R\")\r\n // || dbFeature.displayName.includes(\"Shower Shadow - Popout\")\r\n // || dbFeature.displayName.includes(\"Shower Shadow - Pony Wall\")\r\n // ) {\r\n // relatedItemName = \"shadows\";\r\n // RelatedItemClass = Shadow;\r\n // }\r\n // break;\r\n }\r\n if (relatedItemName) {\r\n if (!this[relatedItemName]) {\r\n this[relatedItemName] = new RelatedItemClass(true);\r\n if (relatedItemName !== \"shadows\") {\r\n this.relatedItems.push(this[relatedItemName]);\r\n }\r\n }\r\n if (!this.categoryEnabled) {\r\n this.categoryEnabled = true\r\n }\r\n this[relatedItemName].getParent = () => this;\r\n this[relatedItemName].load(dbFeature);\r\n return true\r\n }\r\n return false\r\n }\r\n\r\n navigationItem() {\r\n return new DesignNavigationItem('Walls', this);\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\n\r\nexport default class LeftWall extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'left_wall';\r\n this.partName = 'Left Wall';\r\n this.translateId = \"visualizer.kitchen.walls.left_wall\";\r\n this.activeFeatureBeforeAllWalls = null;\r\n this.allWallsApplied = true;\r\n this.isStoneFeature = true;\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new LeftWall());\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\n\r\nexport default class RightWall extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'right_wall';\r\n this.partName = 'Right Wall';\r\n this.translateId = \"visualizer.kitchen.walls.right_wall\";\r\n this.activeFeatureBeforeAllWalls = null;\r\n this.allWallsApplied = true;\r\n this.isStoneFeature = true;\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new RightWall());\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\n\r\nexport default class CenterWall extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'center_wall';\r\n this.partName = 'Center Wall';\r\n this.translateId = \"visualizer.bathroom.walls.center_wall\";\r\n this.activeFeatureBeforeAllWalls = null;\r\n this.allWallsApplied = true;\r\n this.isStoneFeature = true;\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new CenterWall());\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\n\r\nexport default class FrontWall extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'front_wall';\r\n this.partName = 'Front Wall';\r\n this.translateId = \"visualizer.bathroom.walls.front_wall\";\r\n this.activeFeatureBeforeAllWalls = null;\r\n this.allWallsApplied = true;\r\n this.isStoneFeature = true;\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new FrontWall());\r\n }\r\n\r\n}\r\n","import {Part} from \"../part\";\r\nimport {wallsThumbnail} from \"../../../bvComponent/core/assets\";\r\nimport {PartMenuType} from \"../../../visComponents/constants\";\r\n\r\nimport Decor from \"../subparts/globals/decor\";\r\nimport {DECORS_MAX} from \"../constants\";\r\nimport Basket from \"../subparts/globals/basket\";\r\n\r\nconst compareMountPosition = (checkFeature, dbFeatureLoading) => {\r\n return checkFeature.metaData[\"MountPosition\"] && checkFeature.matchesMetaForCondition(\"MountPosition\", dbFeatureLoading.metaData[\"MountPosition\"])\r\n}\r\n\r\nconst checkForExistingDecor = (currentDecorFeatureGroup, dbFeature) => {\r\n if (!currentDecorFeatureGroup) { // we skipped all decors, but didn't find the same\r\n return true\r\n }\r\n if (dbFeature.sharedFeatureName === currentDecorFeatureGroup.decorName) { // decors are matching by name\r\n return true\r\n }\r\n if (dbFeature.metaData[\"MountPosition\"]) {\r\n if (Array.isArray(dbFeature.metaData[\"RoomLayout\"])) {\r\n return dbFeature.metaData[\"RoomLayout\"].some(layoutName => {\r\n return currentDecorFeatureGroup.featuresList && Array.isArray(currentDecorFeatureGroup.featuresList[layoutName])\r\n && currentDecorFeatureGroup.featuresList[layoutName].some(feature => compareMountPosition(feature, dbFeature))\r\n })\r\n } else {\r\n return currentDecorFeatureGroup.some(feature => compareMountPosition(feature, dbFeature))\r\n }\r\n }\r\n return false\r\n}\r\n\r\nexport default class Globals extends Part {\r\n static id = \"Globals\";\r\n constructor() {\r\n super(true, false, PartMenuType.Complex);\r\n\r\n this.menuType = PartMenuType.Complex;\r\n this.partName = \"Globals\";\r\n this.partThumbnail = wallsThumbnail;\r\n\r\n // related items\r\n this.decor1 = null; // can be up to 10\r\n this.basket = null; // can be up to 10\r\n }\r\n\r\n load(dbFeature) {\r\n let\r\n relatedItemName = \"\",\r\n decorCount = 0,\r\n RelatedItemClass = null;\r\n switch (dbFeature.groupName) {\r\n case \"Decor\":\r\n case \"Decore\": {\r\n for (let i = 1; i <= DECORS_MAX; i++) {\r\n const currentDecorFeatureGroup = this[\"decor\" + i];\r\n if (checkForExistingDecor(currentDecorFeatureGroup, dbFeature)) {\r\n relatedItemName = \"decor\" + i;\r\n decorCount = i;\r\n break;\r\n }\r\n }\r\n break;\r\n }\r\n // case \"Attachment\": {\r\n // relatedItemName = \"attachment\";\r\n // RelatedItemClass = Attachment;\r\n // break;\r\n // }\r\n case \"Basket\": {\r\n relatedItemName = \"basket\";\r\n RelatedItemClass = Basket;\r\n break;\r\n }\r\n }\r\n if (relatedItemName) {\r\n if (!this[relatedItemName]) {\r\n if (dbFeature.groupName === \"Decor\" || dbFeature.groupName === \"Decore\") {\r\n this[relatedItemName] = new Decor(true, decorCount);\r\n this[relatedItemName].decorName = dbFeature.sharedFeatureName;\r\n } else {\r\n this[relatedItemName] = new RelatedItemClass(true);\r\n }\r\n this.relatedItems.push(this[relatedItemName]);\r\n }\r\n if (!this.categoryEnabled) {\r\n this.categoryEnabled = true\r\n }\r\n this[relatedItemName].getParent = () => this;\r\n this[relatedItemName].load(dbFeature);\r\n return true\r\n }\r\n return false\r\n }\r\n\r\n isSubTypeWithItems() {\r\n return false;\r\n }\r\n\r\n handleSubPartClick() {}\r\n\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nexport default class Decor extends IntermediatePart {\r\n constructor(isChild, decorCount) {\r\n super(isChild);\r\n this.decorCount = decorCount;\r\n this.partId = \"decor_\" + decorCount;\r\n this.partName = \"Decor \" + decorCount;\r\n }\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new Decor(false, this.decorCount));\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\n\r\nexport default class Basket extends IntermediatePart {\r\n\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'basket';\r\n this.partName = 'Basket';\r\n this.translateId = \"visualizer.bathroom.basket\";\r\n this.canBeDisabled = true;\r\n }\r\n\r\n}\r\n","import {Part} from \"../part\";\r\nimport {PartMenuType} from \"../../../visComponents/constants\";\r\nimport DesignNavigationItem from \"../../../visComponents/designNavigationItem\";\r\n\r\nimport CabinetLeg from \"../subparts/cabinet/cabinetLeg\";\r\nimport Countertop from \"../subparts/cabinet/countertop\";\r\nimport Hook from \"../subparts/cabinet/hook\";\r\nimport CabinetGroup from \"../subparts/cabinet/cabinetGroup\";\r\nimport Slatwall from \"../subparts/cabinet/slatwall\";\r\nimport OverheadRack from \"../subparts/cabinet/overheadRack\";\r\nimport BottomCabinet from \"../subparts/cabinet/bottomCabinet\";\r\nimport TopCabinet from \"../subparts/cabinet/topCabinet\";\r\nimport TallCabinet from \"../subparts/cabinet/tallCabinet\";\r\nimport TallHandle from \"../subparts/cabinet/tallHandle\";\r\nimport TallCabinetLeg from \"../subparts/cabinet/tallCabinetLeg\";\r\nimport TopHandle from \"../subparts/cabinet/topHandle\";\r\nimport BottomHandle from \"../subparts/cabinet/bottomHandle\";\r\nimport BottomCabinetLeg from \"../subparts/cabinet/bottomCabinetLeg\";\r\n\r\nexport default class Cabinet extends Part {\r\n static id = 'Cabinet';\r\n constructor() {\r\n super(true, false, PartMenuType.Complex);\r\n\r\n this.menuType = PartMenuType.Complex;\r\n this.partName = 'Cabinet';\r\n this.partThumbnail = \"\";\r\n this.translateId = \"visualizer.kitchen.cabinet\";\r\n\r\n // related items\r\n this.worktop = null;\r\n this.cabinetLeg = null;\r\n this.hook = null;\r\n this.slatWall = null;\r\n this.tallCabinet = null;\r\n this.tallHandle = null;\r\n this.tallCabinetLeg = null;\r\n this.relatedGroupNames = [\"Countertop\", \"Bottom Handle\", \"Top Handle\", \"Bottom Cabinet\", \"Top Cabinet\",\r\n \"Bottom Cabinet Leg\", \"Tall Cabinet\", \"Tall Cabinet Leg\", \"Tall Handle\"];\r\n }\r\n\r\n load(dbFeature) {\r\n let relatedItemName = \"\",\r\n RelatedItemClass = null;\r\n switch (dbFeature.groupName) {\r\n case \"Worktop\":\r\n case \"Countertop\":\r\n relatedItemName = \"countertop\";\r\n RelatedItemClass = Countertop;\r\n break;\r\n case \"Cabinet Leg\":\r\n relatedItemName = \"cabinetLeg\";\r\n RelatedItemClass = CabinetLeg;\r\n break;\r\n case \"Bottom Cabinet Leg\":\r\n relatedItemName = \"bottomCabinetLeg\";\r\n RelatedItemClass = BottomCabinetLeg;\r\n break;\r\n case \"Cabinet\":\r\n relatedItemName = \"cabinetGroup\";\r\n RelatedItemClass = CabinetGroup;\r\n break;\r\n case \"Hook\":\r\n case \"Double Hook\":\r\n case \"Kayak Hook\":\r\n case \"Single Hook\":\r\n case \"Vertical Bike Hook\":\r\n relatedItemName = \"hook\";\r\n RelatedItemClass = Hook;\r\n break;\r\n case \"Slatwall\":\r\n case \"Slat Wall\":\r\n relatedItemName = \"slatWall\";\r\n RelatedItemClass = Slatwall;\r\n break;\r\n case \"Overhead Rack\":\r\n relatedItemName = \"Overhead Rack\";\r\n RelatedItemClass = OverheadRack;\r\n break;\r\n case \"Bottom Cabinet\":\r\n relatedItemName = \"bottomCabinet\";\r\n RelatedItemClass = BottomCabinet;\r\n break;\r\n case \"Top Cabinet\":\r\n relatedItemName = \"topCabinet\";\r\n RelatedItemClass = TopCabinet;\r\n break;\r\n case \"Tall Cabinet\":\r\n relatedItemName = \"tallCabinet\";\r\n RelatedItemClass = TallCabinet;\r\n break;\r\n case \"Tall Handle\":\r\n case \"Tall Cabinet Handle\":\r\n relatedItemName = \"tallHandle\";\r\n RelatedItemClass = TallHandle;\r\n break;\r\n case \"Tall Cabinet Leg\":\r\n relatedItemName = \"tallCabinetLeg\";\r\n RelatedItemClass = TallCabinetLeg;\r\n break;\r\n case \"Top Handle\":\r\n relatedItemName = \"topHandle\";\r\n RelatedItemClass = TopHandle;\r\n break;\r\n case \"Bottom Handle\":\r\n relatedItemName = \"bottomHandle\";\r\n RelatedItemClass = BottomHandle;\r\n break;\r\n }\r\n if (relatedItemName) {\r\n if (!this[relatedItemName]) {\r\n this[relatedItemName] = new RelatedItemClass(true);\r\n if (relatedItemName !== \"shadows\") {\r\n this.relatedItems.push(this[relatedItemName]);\r\n }\r\n }\r\n if (!this.categoryEnabled) {\r\n this.categoryEnabled = true\r\n }\r\n this[relatedItemName].getParent = () => this;\r\n this[relatedItemName].load(dbFeature);\r\n return true\r\n }\r\n return false\r\n }\r\n\r\n navigationItem() {\r\n return new DesignNavigationItem('Cabinet', this);\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\n\r\nexport default class CabinetLeg extends IntermediatePart {\r\n\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'cabinet_leg';\r\n this.partName = 'Cabinet Leg';\r\n this.translateId = \"visualizer.laundryRoom.cabinetLeg\";\r\n this.canBeDisabled = true;\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\n\r\nexport default class Countertop extends IntermediatePart {\r\n\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'countertop';\r\n this.partName = 'Countertop';\r\n this.translateId = \"visualizer.kitchen.countertop.countertop\";\r\n this.isStoneFeature = true;\r\n this.canBeDisabled = true;\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\n\r\nexport default class Hook extends IntermediatePart {\r\n\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'hook';\r\n this.partName = 'Hook';\r\n this.translateId = \"visualizer.laundryRoom.hook\";\r\n this.canBeDisabled = true;\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\n\r\nexport default class CabinetGroup extends IntermediatePart {\r\n\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'cabinet_group';\r\n this.partName = 'Cabinet';\r\n this.translateId = \"visualizer.kitchen.cabinet\";\r\n this.canBeDisabled = true;\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport {SLAT_WALL_POSITIONS} from \"../../constants\";\r\n\r\nexport default class SlatWall extends IntermediatePart {\r\n constructor(isChild, partNumber = 0) {\r\n super(isChild);\r\n this.partNumber = partNumber;\r\n this.partId = 'slat_wall';\r\n this.partName = 'Slatwall';\r\n this.translateId = \"visualizer.kitchen.walls.slat_wall\";\r\n this.activeFeatureBeforeAllWalls = null;\r\n this.allWallsApplied = true;\r\n this.isStoneFeature = true;\r\n this.slatWallType = SLAT_WALL_POSITIONS[0];\r\n this.hasAdditionalParts = true;\r\n }\r\n\r\n load(dbFeature) {\r\n if (!dbFeature.metaData[\"Part\"]) {\r\n dbFeature.metaData[\"Part\"] = [\"2\"];\r\n }\r\n if (!dbFeature.metaData[\"Height\"]) {\r\n dbFeature.metaData[\"Height\"] = [\"2\"];\r\n }\r\n const isMainFeature = (dbFeature.metaData[\"Part\"][0] === \"2\") && (dbFeature.metaData[\"Height\"][0] === \"2\");\r\n return super.load_(dbFeature, new SlatWall(false, SlatWall),\r\n true, isMainFeature ? 'features' : 'featuresParts');\r\n }\r\n\r\n setActiveFeatureParts(fromFeature = this.activeFeature, activeFeatureConditions = []) {\r\n if (!fromFeature) {\r\n return []\r\n }\r\n const currentConditions = activeFeatureConditions || this.getArrayOfConditions();\r\n const name1 = fromFeature.getSplittedFeatureName();\r\n const parts = this.featuresParts.filter(attFeature => {\r\n if (!attFeature.matchesMetaForArrayOfConditions(currentConditions) || (name1 !== attFeature.getSplittedFeatureName())) {\r\n return false\r\n }\r\n switch (this.slatWallType) {\r\n case SLAT_WALL_POSITIONS[0]: // center horizontal\r\n return (attFeature.matchesMetaForCondition(\"Part\", \"1\") && attFeature.matchesMetaForCondition(\"Height\", \"2\"))\r\n || (attFeature.matchesMetaForCondition(\"Part\", \"3\") && attFeature.matchesMetaForCondition(\"Height\", \"2\"))\r\n case SLAT_WALL_POSITIONS[1]:\r\n return false // only one center feature\r\n case SLAT_WALL_POSITIONS[2]: // center vertical\r\n return (attFeature.matchesMetaForCondition(\"Part\", \"2\") && attFeature.matchesMetaForCondition(\"Height\", \"1\"))\r\n || (attFeature.matchesMetaForCondition(\"Part\", \"2\") && attFeature.matchesMetaForCondition(\"Height\", \"3\"))\r\n case SLAT_WALL_POSITIONS[3]:\r\n return true // full wall, all are matching\r\n }\r\n });\r\n console.log(\"parts\", name1, parts);\r\n return parts\r\n }\r\n\r\n showLayerPositionsModal() {\r\n return true\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\n\r\nexport default class OverheadRack extends IntermediatePart {\r\n\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'overhead_rack';\r\n this.partName = 'Overhead Rack';\r\n this.translateId = \"visualizer.laundryRoom.overheadRack\";\r\n this.canBeDisabled = true;\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\n\r\nexport default class BottomCabinet extends IntermediatePart {\r\n constructor(isChild, partNumber = 0) {\r\n super(isChild);\r\n this.partNumber = partNumber;\r\n this.partId = 'bottom_cabinet';\r\n this.partName = 'Bottom Cabinet';\r\n this.translateId = \"visualizer.kitchen.cabinet.bottom_cabinet\";\r\n this.hasAdditionalParts = true;\r\n this.layerPriority = 4;\r\n this.allWallsCanBeApplied = true;\r\n this.canBeDisabled = true;\r\n }\r\n\r\n load(dbFeature) {\r\n const partNumber = (dbFeature.metaData[\"Part\"] && +dbFeature.metaData[\"Part\"][0]) === 1 ? 1 : 2;\r\n return super.load_(dbFeature, new BottomCabinet(false, partNumber), true, partNumber === 1 ? 'features' : 'featuresParts');\r\n }\r\n\r\n disabledClick() {\r\n const cabinetParent = this.getParent();\r\n if (cabinetParent.cabinetLeg) {\r\n cabinetParent.cabinetLeg.disabled = this.disabled;\r\n }\r\n if (cabinetParent.countertop) {\r\n cabinetParent.countertop.disabled = this.disabled;\r\n }\r\n if (cabinetParent.bottomHandle) {\r\n cabinetParent.bottomHandle.disabled = this.disabled;\r\n }\r\n this.activeFeatureParts.forEach((activeFeaturePart) => {\r\n activeFeaturePart.disabled = this.disabled\r\n });\r\n }\r\n\r\n handleClick(ignoreLocked, clickFrom = \"\") {\r\n const parent = this.getParent();\r\n if (parent.getParent && parent.getParent()) {\r\n super.handleClick(ignoreLocked, clickFrom);\r\n parent.activeFeatureParts = parent.setActiveFeatureParts();\r\n } else {\r\n parent.bottomCabinet.activeFeature = this;\r\n }\r\n this.featureClicked();\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\n\r\nexport default class TopCabinet extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'top_cabinet';\r\n this.partName = 'Top Cabinet';\r\n this.translateId = \"visualizer.kitchen.cabinet.top_cabinet\";\r\n this.hasAdditionalParts = true;\r\n this.layerPriority = 1;\r\n this.allWallsCanBeApplied = true;\r\n this.canBeDisabled = true;\r\n }\r\n\r\n disabledClick() {\r\n const cabinetParent = this.getParent();\r\n if (cabinetParent.topHandle) {\r\n cabinetParent.topHandle.disabled = this.disabled;\r\n }\r\n }\r\n\r\n}\r\n\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\n\r\nexport default class TallCabinet extends IntermediatePart {\r\n constructor(isChild, partNumber = 0) {\r\n super(isChild);\r\n this.partNumber = partNumber;\r\n this.partId = 'tall_cabinet';\r\n this.partName = 'Tall Cabinet';\r\n this.translateId = \"visualizer.kitchen.cabinet.tall_cabinet\";\r\n this.hasAdditionalParts = true;\r\n this.canBeDisabled = true;\r\n }\r\n\r\n load(dbFeature) {\r\n const partNumber = (dbFeature.metaData[\"Part\"] && +dbFeature.metaData[\"Part\"][0]) === 1 ? 1 : 2;\r\n return super.load_(dbFeature, new TallCabinet(false, partNumber), true, partNumber === 1 ? 'features' : 'featuresParts');\r\n }\r\n\r\n handleClick(ignoreLocked, clickFrom = \"\") {\r\n const parent = this.getParent();\r\n if (parent.getParent && parent.getParent()) {\r\n super.handleClick(ignoreLocked, clickFrom);\r\n parent.activeFeatureParts = parent.setActiveFeatureParts();\r\n } else {\r\n parent.bottomCabinet.activeFeature = this;\r\n }\r\n this.featureClicked();\r\n }\r\n\r\n disabledClick() {\r\n const cabinetParent = this.getParent();\r\n if (cabinetParent.tallCabinetLeg) {\r\n cabinetParent.tallCabinetLeg.disabled = this.disabled;\r\n }\r\n if (cabinetParent.tallHandle) {\r\n cabinetParent.tallHandle.disabled = this.disabled;\r\n }\r\n this.activeFeatureParts.forEach((activeFeaturePart) => {\r\n activeFeaturePart.disabled = this.disabled\r\n });\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\n\r\nexport default class TallHandle extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'tall_handle';\r\n this.partName = 'Tall Handle';\r\n this.translateId = \"visualizer.kitchen.cabinet.tall_handle\";\r\n this.hasAdditionalParts = true;\r\n this.canBeDisabled = true;\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\n\r\nexport default class TallCabinetLeg extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'tall_cabinet_leg';\r\n this.partName = 'Tall Cabinet Leg';\r\n this.translateId = \"visualizer.kitchen.cabinet.tall_cabinet_leg\";\r\n this.hasAdditionalParts = true;\r\n this.canBeDisabled = true;\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\n\r\nexport default class TopHandle extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'top_handle';\r\n this.partName = 'Top Handle';\r\n this.translateId = \"visualizer.kitchen.cabinet.top_handle\";\r\n this.hasAdditionalParts = true;\r\n this.canBeDisabled = true;\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\n\r\nexport default class BottomHandle extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'bottom_handle';\r\n this.partName = 'Bottom Handle';\r\n this.translateId = \"visualizer.kitchen.cabinet.bottom_handle\";\r\n this.hasAdditionalParts = true;\r\n this.canBeDisabled = true;\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\n\r\nexport default class BottomCabinetLeg extends IntermediatePart {\r\n\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'bottom_cabinet_leg';\r\n this.partName = 'Bottom Cabinet Leg';\r\n this.translateId = \"visualizer.kitchen.cabinet.bottom_cabinet_leg\";\r\n this.canBeDisabled = true;\r\n }\r\n\r\n}\r\n","import {Part} from \"../part\";\r\nimport {PartMenuType} from \"../../../visComponents/constants\";\r\n\r\nimport Attachment from \"../subparts/globals/attachment\";\r\nimport {DECORS_MAX} from \"../constants\";\r\nimport DesignNavigationItem from \"../../../visComponents/designNavigationItem\";\r\n\r\nconst compareMountPosition = (checkFeature, dbFeatureLoading) => {\r\n return checkFeature.metaData[\"MatchingFeature\"] && checkFeature.matchesMetaForCondition(\"MatchingFeature\", dbFeatureLoading.metaData[\"MatchingFeature\"])\r\n}\r\n\r\nconst checkForExistingDecor = (currentDecorFeatureGroup, dbFeature) => {\r\n if (!currentDecorFeatureGroup) { // we skipped all decors, but didn't find the same\r\n return true\r\n }\r\n if (dbFeature.sharedFeatureName === currentDecorFeatureGroup.decorName) { // decors are matching by name\r\n return true\r\n }\r\n if (dbFeature.metaData[\"MountPosition\"]) {\r\n if (Array.isArray(dbFeature.metaData[\"RoomLayout\"])) {\r\n return dbFeature.metaData[\"RoomLayout\"].some(layoutName => {\r\n return currentDecorFeatureGroup.featuresList && Array.isArray(currentDecorFeatureGroup.featuresList[layoutName])\r\n && currentDecorFeatureGroup.featuresList[layoutName].some(feature => compareMountPosition(feature, dbFeature))\r\n })\r\n } else {\r\n return currentDecorFeatureGroup.some(feature => compareMountPosition(feature, dbFeature))\r\n }\r\n }\r\n return false\r\n}\r\n\r\nexport default class Accessories extends Part {\r\n static id = \"Accessories\";\r\n constructor() {\r\n super(true, false, PartMenuType.Complex);\r\n\r\n this.menuType = PartMenuType.Complex;\r\n this.partName = 'Accessories';\r\n this.partThumbnail = \"\";\r\n this.translateId = \"visualizer.bathroom.accessories2\";\r\n\r\n // related items\r\n this.attachment1 = null; // can be up to 10\r\n }\r\n\r\n load(dbFeature) {\r\n let\r\n relatedItemName = \"\",\r\n decorCount = 0,\r\n RelatedItemClass = null;\r\n switch (dbFeature.groupName) {\r\n case \"Attachment\": {\r\n for (let i = 1; i <= DECORS_MAX; i++) {\r\n const currentDecorFeatureGroup = this[\"attachment\" + i];\r\n if (checkForExistingDecor(currentDecorFeatureGroup, dbFeature)) {\r\n relatedItemName = \"attachment\" + i;\r\n decorCount = i;\r\n break;\r\n }\r\n }\r\n break;\r\n }\r\n }\r\n if (relatedItemName) {\r\n if (!this[relatedItemName]) {\r\n if (dbFeature.groupName === \"Attachment\") {\r\n this[relatedItemName] = new Attachment(true, decorCount);\r\n this[relatedItemName].decorName = dbFeature.sharedFeatureName;\r\n } else {\r\n this[relatedItemName] = new RelatedItemClass(true);\r\n }\r\n this.relatedItems.push(this[relatedItemName]);\r\n }\r\n if (!this.categoryEnabled) {\r\n this.categoryEnabled = true\r\n }\r\n this[relatedItemName].getParent = () => this;\r\n this[relatedItemName].load(dbFeature);\r\n return true\r\n }\r\n return false\r\n }\r\n\r\n navigationItem() {\r\n return new DesignNavigationItem('Accessories', this);\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\n\r\nexport default class Attachment extends IntermediatePart {\r\n\r\n constructor(isChild, decorCount) {\r\n super(isChild);\r\n this.decorCount = decorCount;\r\n this.partId = \"attachment_\" + decorCount;\r\n this.partName = \"Attachment \" + decorCount;\r\n this.translateId = \"visualizer.bathroom.accessories2\";\r\n this.canBeDisabled = true;\r\n }\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new Attachment(false, this.decorCount));\r\n }\r\n\r\n setLayers(layout) {\r\n const activeFeatures = layout.getActiveFeatures(true, true);\r\n if (this.activeFeature\r\n && this.activeFeature.metaData[\"MatchingFeature\"]\r\n && !activeFeatures.some(cartItem => cartItem.cartFeature.metaData[\"MatchingFeature\"]\r\n && cartItem.cartFeature.metaData[\"MatchingFeature\"][0] === this.activeFeature.metaData[\"MatchingFeature\"][0])) {\r\n return this.hideLayers();\r\n }\r\n return super.setLayers(layout);\r\n }\r\n\r\n}\r\n","import $ from 'jquery';\r\nimport * as types from '../actions/actionTypes';\r\nimport {IS_LIXIL_UI, UseFullSizeImages} from \"../config\";\r\nimport {LAYERS_SIZES} from \"../misc/utils\";\r\n\r\nconst initialState = {\r\n bvOpened: IS_LIXIL_UI,\r\n bvVisited: false,\r\n canvasId: \"\",\r\n bvFeatures: [],\r\n bvPresets: [],\r\n allVisualizersPresets: {},\r\n activePreset: 0,\r\n loadedPresets: [], // array of id's of already loaded presets (in order not to download them twice)\r\n presetWasChangedByUser: null, // preset id that user has clicked\r\n firstLoadedPreset: null, // the one that was loaded first (from url or job id, etc.)\r\n showRestorePopup: true,\r\n canvasDimensions: LAYERS_SIZES.normal,\r\n staticCanvasImage: window.location.href.includes(\"formwood_industries\")\r\n ? \"https://qc-static.s3.us-west-1.amazonaws.com/fabricator-static-files/Formwood+Stagnate+Vis.jpg\"\r\n : \"\",\r\n canvasCount: 0,\r\n canvasScale: 1,\r\n};\r\n\r\nexport default function(state = initialState, action) {\r\n\r\n switch(action.type) {\r\n\r\n case types.TOGGLE_BATHROOM_VISUALIZER_OPEN:\r\n if (action.payload.bvOpened) {\r\n setTimeout(() => { // set timeout is needed because of BV menu wrapper blur click\r\n document.body.classList.add('body--bv');\r\n $(window).trigger('resize');\r\n }, 0);\r\n } else {\r\n setTimeout(() => { // set timeout is needed because of BV menu wrapper blur click\r\n document.body.classList.remove('body--bv');\r\n }, 0)\r\n }\r\n\r\n return Object.assign({}, state, {\r\n bvOpened: action.payload.bvOpened,\r\n bvVisited: true\r\n });\r\n case types.SET_BV_CANVAS_ID:\r\n return {...state, canvasId: action.payload.id};\r\n case types.SET_BV_FEATURES:\r\n case types.TOGGLE_SHOW_RESTORE_POPUP:\r\n case types.SET_BATHROOM_VISUALIZER_VISITED:\r\n case types.SET_STATIC_CANVAS_IMAGE:\r\n case types.SET_PRESET_WAS_CHANGED_BY_USER:\r\n case types.SET_FIRST_LOADED_PRESET:\r\n case types.SET_CANVAS_SCALE:\r\n case types.SET_LOADED_PRESETS:\r\n return Object.assign({}, state, {\r\n ...action.payload\r\n })\r\n case types.SET_BV_PRESETS:\r\n return Object.assign({}, state, {\r\n ...action.payload,\r\n allVisualizersPresets: Object.assign({}, state.allVisualizersPresets, {\r\n [action.payload.visualizerType || document.kvConfig.visualizerType]: action.payload.bvPresets\r\n })\r\n })\r\n case types.UPDATE_FABRICATOR_SETTINGS: // update when visualizer is changed\r\n return Object.assign({}, state, {\r\n bvPresets: state.allVisualizersPresets[document.kvConfig.visualizerType] || []\r\n })\r\n case types.SET_ACTIVE_PRESET: {\r\n const loadedPresets = state.loadedPresets.includes(action.payload.activePreset)\r\n ? state.loadedPresets\r\n : [...state.loadedPresets, action.payload.activePreset];\r\n return Object.assign({}, state, {\r\n loadedPresets,\r\n ...action.payload\r\n })\r\n }\r\n case types.UPDATE_CANVAS_COUNT:\r\n return Object.assign({}, state, {\r\n canvasCount: state.canvasCount + 1\r\n })\r\n case types.SET_CANVAS_DIMENSIONS:\r\n // eslint-disable-next-line no-case-declarations\r\n const canvasDimensions = action.payload.canvasDimensions\r\n ? Object.assign({}, action.payload.canvasDimensions)\r\n : document.kvConfig.layersSize === \"full_hd\"\r\n ? UseFullSizeImages ? LAYERS_SIZES.full_hd_large : LAYERS_SIZES.full_hd\r\n : UseFullSizeImages ? LAYERS_SIZES.large : LAYERS_SIZES.normal\r\n if (canvasDimensions && canvasDimensions.width) {\r\n switch (canvasDimensions.width) {\r\n case LAYERS_SIZES.large.width:\r\n case LAYERS_SIZES.full_hd_large.width: {\r\n document.body.classList.add('bv--full-size');\r\n break;\r\n }\r\n case LAYERS_SIZES.full_hd.width: {\r\n document.body.classList.add('bv--full-hd');\r\n break;\r\n }\r\n default:\r\n break;\r\n }\r\n }\r\n return Object.assign({}, state, {canvasDimensions})\r\n }\r\n\r\n return state;\r\n\r\n}\r\n","import * as types from '../actions/actionTypes';\r\n\r\nconst initialState = {\r\n loaderOpened: false,\r\n loaderTitle: \"loader.defaultTitle\",\r\n loaderText: \"loader.defaultText\",\r\n loaderFullScreen: false,\r\n multiLoader: {\r\n visible: true,\r\n activeStep: 0,\r\n renderSteps: [\r\n {icon: \"doorStyle\", text: \"doorStyle\"},\r\n {icon: \"color\", text: \"color\"},\r\n {icon: \"layout\", text: \"layout\"},\r\n {icon: \"design1\", text: \"design1\"},\r\n {icon: \"4kOutput\", text: \"4kOutput\"},\r\n {icon: \"lighting\", text: \"lighting\"},\r\n {icon: \"design1\", text: \"design2\"},\r\n ]\r\n }\r\n};\r\n\r\nexport default function(state = initialState, action) {\r\n switch(action.type) {\r\n case types.TOGGLE_LOADER:\r\n return Object.assign({}, state, {\r\n ...action.payload\r\n });\r\n case types.SET_MULTI_LOADER:\r\n return Object.assign({}, state, {\r\n multiLoader: {...state.multiLoader, ...action.payload}\r\n });\r\n\r\n }\r\n\r\n return state;\r\n}\r\n","import merge from 'lodash/merge';\r\nimport * as types from '../actions/actionTypes';\r\nimport Analytics from './../analytics';\r\nimport {UserPopupTypes, ConfirmPopupTypes, UserPopupContent} from \"../bvcomponents/visComponents/constants\";\r\nimport {parseQuery} from \"../misc/helpers\";\r\nimport {\r\n parseFabricatorSettings\r\n} from \"./fabricatorReducer\";\r\nimport {PREFERRED_COMMUNICATION_METHODS} from \"../bvcomponents/popups/assignQuotePopup/assignQuoteConstants\";\r\nimport Config from \"../config\";\r\nimport {hardCodeIsCaesarStone, hardCodeIsGraniteTransformationUK, hardCodeIsLowes} from \"../misc/fabricatorHardcode\";\r\n\r\nconst dashboardFramed = Config.isVisualizerManagement();\r\nconst parsedUrl = parseQuery();\r\n\r\nexport const countries = {\r\n \"GBP\": {\r\n name: \"United Kingdom\",\r\n iso2: \"gb\",\r\n dialCode: \"44\",\r\n priority: 0,\r\n areaCodes: null,\r\n },\r\n \"USD\": {\r\n areaCodes: null,\r\n dialCode: \"1\",\r\n iso2: \"us\",\r\n name: \"United States\",\r\n priority: 0\r\n },\r\n \"CAD\": {\r\n areaCodes: null,\r\n dialCode: \"1\",\r\n iso2: \"ca\",\r\n name: \"Canada\",\r\n priority: 1\r\n },\r\n \"AUS\": {\r\n areaCodes: null,\r\n dialCode: \"61\",\r\n iso2: \"au\",\r\n name: \"Australia\",\r\n priority: 0\r\n },\r\n \"PAB\": {\r\n areaCodes: null,\r\n dialCode: \"507\",\r\n iso2: \"pa\",\r\n name: \"Panama\",\r\n priority: 0\r\n },\r\n \"SPN\": {\r\n areaCodes: null,\r\n dialCode: \"37\",\r\n iso2: \"es\",\r\n name: \"Spain\",\r\n priority: 0\r\n },\r\n \"PLN\": {\r\n name: \"Poland (Polska)\",\r\n iso2: \"pl\",\r\n dialCode: \"48\",\r\n priority: 0,\r\n areaCodes: null,\r\n },\r\n};\r\n\r\nexport const getDefaultCountry = (fabricatorSettings) => {\r\n if (fabricatorSettings.currency === \"GBP\" || hardCodeIsGraniteTransformationUK()) {\r\n return countries.GBP\r\n } if (fabricatorSettings.currency === \"PLN\") {\r\n return countries.PLN\r\n } else if (hardCodeIsLowes()) {\r\n return countries.CAD\r\n }\r\n // const {intl} = this.props;\r\n // if (intl.locale === \"en-AU\" || this.props.fabricatorData.isCaesarStone) {\r\n // if (fabricatorState.isCaesarStone) {\r\n // return countries.AUS\r\n // }\r\n const currency = fabricatorSettings.currency === \"AUD\" ? \"AUS\" : fabricatorSettings.currency;\r\n return countries[currency] || countries.USD\r\n};\r\n\r\nconst initialState = {\r\n userPopupOpened: false,\r\n userPopupType: UserPopupTypes.Unlock,\r\n saveQuoteAfterLogin: false,\r\n userIsLoggedIn: dashboardFramed,\r\n userSchedulerOpened: false,\r\n checkout: false,\r\n userInfo: {\r\n phone: \"\",\r\n email: \"\",\r\n password: \"\",\r\n firstName: \"\",\r\n phoneNumber: \"\",\r\n postal: \"\",\r\n salesPersonEmail: (window.salesPerson ? window.salesPerson.email : \"\"),\r\n salesPersonFullName: (window.salesPerson ? window.salesPerson.name : \"\"),\r\n isNew: true,\r\n fabricatorId: document.kvConfig.userId || 61986,\r\n employeeId: window.salesPerson\r\n ? window.salesPerson.rawVal / ( Math.floor(Math.PI * 1000))\r\n : (parsedUrl && parsedUrl.p) ? +parsedUrl.p.split(\"/\")[0] : \"\",\r\n lastName: \"\",\r\n phone2: \"\",\r\n address1: \"\",\r\n address2: \"\",\r\n city: \"\",\r\n state: \"\",\r\n preferredCommunicationMethod: \"\", // (I assume it will be constants - email or phone)\r\n howDidYouHearAboutUs: \"\", // (probably constants too, it is a select in the design)\r\n country: countries.USD, // should be set as an object! from Countries list\r\n provence: \"\", // can be received from getCustomerById response\r\n shipping: {}, // address can be received from getCustomerById response\r\n agreedToTerms: false,\r\n subscribeToNewsletter: true,\r\n },\r\n editToken: ((parsedUrl && parsedUrl.edittoken) ? parsedUrl.edittoken : null),\r\n userInfoErrors: {}, // {\"fullName\": [\"too short\"]}, {\"phoneNumber\": [\"this field is required\"]}, etc.\r\n showAdditionalFields: false,\r\n employeesList: [],\r\n employeesListReceived: false,\r\n isPhoneNumberValidated: dashboardFramed,\r\n // clickLeadCapture: false,\r\n confirmPopupOpened: false,\r\n confirmPopupType: ConfirmPopupTypes.ConsultationRequest,\r\n confirmPopupTag: {}, // object - is used for passing data in the confirm popup\r\n showPrivacyPolicy: false,\r\n alreadyRegisteredUserInfo: {\r\n //... other fields from userLogin response\r\n userId: \"\", // custom field // this will be passed in register response\r\n assignQuote: false, // custom field // if it was clicked from assign quote popup\r\n withCheckoutLogic: false, // custom field // if it was clicked from assign quote popup and with checkout logic\r\n confirmedAssign: false // custom field // if it was confirmed from user (he wants to assign quote on already registered user) - is changing in confirm popup\r\n },\r\n userPopupContent: UserPopupContent.register,\r\n leadCaptureClickCount: 0,\r\n userTwoFa: {\r\n twoFALoading: false,\r\n twoFAToken: \"\",\r\n },\r\n optIn: false\r\n};\r\n\r\nexport default function (state = initialState, action) {\r\n switch (action.type) {\r\n case types.TOGGLE_USER_POPUP:\r\n Analytics.sendEvent(\"user-popup\", action.payload.userPopupOpened ? \"Opened\" : \"Closed\");\r\n return {\r\n ...merge(state, action.payload), // deep merge, otherwise userInfo gets overwritten.\r\n userPopupType: action.payload.userPopupType || UserPopupTypes.Unlock,\r\n saveQuoteAfterLogin: action.payload.saveQuoteAfterLogin || false,\r\n checkout: typeof(action.payload.checkout) === 'undefined' ? state.checkout : action.payload.checkout\r\n };\r\n case types.TOGGLE_ADDITIONAL_FIELDS:\r\n case types.TOGGLE_CONFIRM_POPUP:\r\n case types.SET_USER_POPUP_CONTENT:\r\n case types.SET_LEAD_CAPTURE_CLICK_COUNT:\r\n case types.SET_USER_OPT_IN:\r\n return {...state, ...action.payload};\r\n case types.SET_ALREADY_REGISTERED_USER:\r\n return {...state, alreadyRegisteredUserInfo: {...state.alreadyRegisteredUserInfo, ...action.payload.alreadyRegisteredUserInfo}};\r\n case types.CHANGE_USER_INFO: {\r\n let {userInfo} = state;\r\n userInfo = {...userInfo, ...action.payload.userInfo};\r\n return {...state, userInfo};\r\n }\r\n case types.CHANGE_USER_INFO_ERRORS: {\r\n let {userInfoErrors} = state;\r\n userInfoErrors = {...userInfoErrors, ...action.payload.userInfoErrors};\r\n return {...state, userInfoErrors};\r\n }\r\n case types.SET_USER_TWO_FA: {\r\n let {userTwoFa} = state;\r\n userTwoFa = {...userTwoFa, ...action.payload.userTwoFa};\r\n return {...state, userTwoFa};\r\n }\r\n case types.SET_EMPLOYEES_LIST:\r\n // console.log('action.payload', action.payload);\r\n return Object.assign({}, state, action.payload, {employeesListReceived: true});\r\n case types.SET_USER_PHONE_NUMBER_VALIDATED:\r\n return {...state, isPhoneNumberValidated: action.payload.isPhoneNumberValidated};\r\n case types.RESTORE_USER_STATE:\r\n if (action.payload.userInfo) {\r\n if (!action.payload.userInfo.country || !action.payload.userInfo.country.dialCode) {\r\n action.payload.userInfo.country = state.userInfo.country\r\n }\r\n if (action.payload.userInfo.firstName === \"N/A\") {\r\n action.payload.userInfo.firstName = \"\";\r\n }\r\n if (action.payload.userInfo.lastName === \"N/A\") {\r\n action.payload.userInfo.lastName = \"\";\r\n }\r\n }\r\n return {\r\n ...state,\r\n ...action.payload,\r\n userPopupOpened: false,\r\n userPopup2FAOpened: false,\r\n confirmPopupOpened: false,\r\n userIsLoggedIn: true,\r\n };\r\n case types.SHOW_SCHEDULER:\r\n action.payload.show\r\n ? document.body.classList.add(\"body--shedule\")\r\n : document.body.classList.remove(\"body--shedule\");\r\n return {...state, userSchedulerOpened: action.payload.show};\r\n case types.SET_FABRICATOR_DATA: {\r\n const userInfo = {...state.userInfo};\r\n const {settings} = parseFabricatorSettings(action.payload);\r\n userInfo.country = getDefaultCountry(settings);\r\n if (hardCodeIsCaesarStone() && settings.currency === \"USD\") {\r\n userInfo.preferredCommunicationMethod = PREFERRED_COMMUNICATION_METHODS[0]\r\n }\r\n return {...state, userInfo};\r\n }\r\n }\r\n return state;\r\n}\r\n","import * as types from '../actions/actionTypes';\r\n\r\nconst initialState = {\r\n visible: false,\r\n message: '',\r\n error: '',\r\n title: \"\",\r\n inline: false,\r\n newStyles: false,\r\n buttons: [],\r\n click: null,\r\n // type: null, // added for look // not used\r\n};\r\n\r\nexport default function(state = initialState, action) {\r\n\r\n switch(action.type) {\r\n\r\n case types.CHANGE_MESSAGE_BOX:\r\n return Object.assign({}, state, {\r\n ...action.payload\r\n });\r\n\r\n }\r\n\r\n return state;\r\n\r\n}\r\n","import * as types from '../actions/actionTypes';\r\nimport cloneDeep from \"lodash/cloneDeep\";\r\nimport find from \"lodash/find\";\r\n\r\nconst initialState = {\r\n filterGroups: [],\r\n selectedFilters: [],\r\n expandedFilters: [],\r\n showFilters: false,\r\n filterVisible: '',\r\n filterId: \"\",\r\n availableFilterValues: {}, // { filterGroupId: arrayOf(filterValues) }\r\n filtersCount: 0, // to update component when filters received\r\n};\r\n\r\nfunction loadFilterGroups(filterGroups) {\r\n filterGroups.forEach(fg => {\r\n for(let i = fg.values.length - 1; i>= 0; i--) {\r\n let value = fg.values[i];\r\n if(value.parent_id) {\r\n let parent = find(fg.values, v => v.id == value.parent_id);\r\n parent.items = parent.items || [];\r\n parent.items.push(fg.values.splice(i, 1)[0]);\r\n }\r\n }\r\n });\r\n return filterGroups;\r\n}\r\n\r\nexport default function(state = initialState, action) {\r\n let newState = {...state};\r\n switch(action.type) {\r\n case types.LOAD_FILTERS:\r\n newState.filterGroups = loadFilterGroups(cloneDeep(action.payload));\r\n break;\r\n case types.SET_SELECTED_FILTERS:\r\n newState.selectedFilters = [...action.payload];\r\n break;\r\n case types.SET_EXPANDED_FILTERS:\r\n newState.expandedFilters = [...action.payload];\r\n break;\r\n case types.SHOW_FILTERS:\r\n newState.showFilters = action.payload.show;\r\n newState.filterId = action.payload.filterId;\r\n newState.filterVisible = \"Others\";\r\n break;\r\n case types.SHOW_FILTERS_IF_NOT_VISIBLE:\r\n if(!newState.showFilters) {\r\n newState.showFilters = true;\r\n newState.filterId = action.payload;\r\n newState.filterVisible = \"Others\";\r\n }\r\n break;\r\n case types.SET_FILTER_VISIBLE:\r\n newState.filterVisible = action.payload;\r\n break;\r\n case types.SET_AVAILABLE_FILTER_VALUES:\r\n return Object.assign({}, state, {\r\n availableFilterValues: Object.assign({}, state.availableFilterValues, action.payload.availableFilterValues)\r\n });\r\n case types.UPDATE_FILTERS_COUNT:\r\n return Object.assign({}, state, {\r\n filtersCount: state.filtersCount + 1\r\n })\r\n case types.SET_COUNTERTOP_FILTERS_RECEIVED:\r\n return Object.assign({}, state, {\r\n ...action.payload\r\n });\r\n case types.SET_LOOK_OPENED:\r\n if (!action.payload.lookOpened) {\r\n return Object.assign({}, state, { selectedFilters: [] });\r\n }\r\n break;\r\n case types.SET_LOOK_ACTIVE_CATEGORY:\r\n if (!action.payload.lookActiveCategory) {\r\n return Object.assign({}, state, { selectedFilters: [] });\r\n }\r\n break;\r\n case types.SET_SHOP_PAGE_OPENED:\r\n if (!action.payload.shopPageOpened) {\r\n return Object.assign({}, state, { selectedFilters: [] });\r\n }\r\n break;\r\n case types.SET_WIZARD_ACTIVE_STEP:\r\n if (state.selectedFilters.length) {\r\n return Object.assign({}, state, { selectedFilters: [] }); // always remove it on step change\r\n }\r\n break;\r\n }\r\n return newState;\r\n}\r\n","import $ from \"jquery\";\r\nimport * as types from '../actions/actionTypes';\r\nimport {\r\n MODULE_CONTEXT_MENU_TYPES,\r\n MODULE_CONTEXT_MENU_DIRECTIONS,\r\n CABINET_WIZARD_BUTTONS,\r\n COUNTERTOP_WIZARD_BUTTONS,\r\n CABINET_GROUP, COUNTERTOP_GROUP, EDGE_GROUP\r\n}\r\n from \"../bvcomponents/kvComponent/core/constants\";\r\nimport {\r\n COUNTERTOP_GROUP_BATHROOM,\r\n HANDLES_GROUP_BATHROOM,\r\n SHOWER_FLOOR_GROUP_BATHROOM\r\n} from \"../bvcomponents/bvSceneComponent/core/constants\";\r\n\r\nconst isNewBathroomOrKitchen = document.kvConfig.toolVersion >= 5;\r\n\r\nconst initialState = {\r\n mobileNav: [],\r\n desktopNavigationOpened: false,\r\n navigationViewType: 3,\r\n activeNavigationParentName: \"\",\r\n activeNavigationChildName: \"\",\r\n navigationLoadingActive: false, // to show when features are already downloaded\r\n moduleContextMenuType: MODULE_CONTEXT_MENU_TYPES.Filters,\r\n moduleContextMenuDirection: MODULE_CONTEXT_MENU_DIRECTIONS.Vertical,\r\n moduleContextMenuModule: null,\r\n moduleContextMenuModulePart: null,\r\n // cabinet module filters\r\n activeNavigationFilter: CABINET_WIZARD_BUTTONS[0].buttonId,\r\n activeNavigationFilterStepIndex: 0,\r\n cabinetNavigationFilterCompleted: false,\r\n countertopNavigationFilterCompleted: false,\r\n counterTopWizard: { // not needed for now, but probably we would need this logic in future\r\n [COUNTERTOP_WIZARD_BUTTONS[0].buttonId]: \"All\",\r\n [COUNTERTOP_WIZARD_BUTTONS[1].buttonId]: \"All\",\r\n },\r\n edgesApplyTo: EDGE_GROUP,\r\n cabinetsApplyTo: CABINET_GROUP,\r\n cabinetsApplyToBathroom: isNewBathroomOrKitchen ? [] : [\"vanity_cabinet\", \"vanity_mirror\"], // porselanosa enable matching countertops\r\n countertopsApplyToArray: COUNTERTOP_GROUP, // is used on lixil UI\r\n countertopsApplyToArrayBathroom: COUNTERTOP_GROUP_BATHROOM, // is used on lixil UI\r\n handlesApplyToBathroom: HANDLES_GROUP_BATHROOM,\r\n showerFloorApplyToBathroom: SHOWER_FLOOR_GROUP_BATHROOM,\r\n countertopsApplyTo: {\r\n \"countertop\": [\"center_island_countertop\", \"backsplash\"],\r\n \"center_island_countertop\": [\"countertop\", \"backsplash\"],\r\n \"backsplash\": [\"center_island_countertop\", \"countertop\"]\r\n },\r\n countertopsApplyToBathroom: {\r\n \"vanity_countertop\": [\"vanity_backsplash\"],\r\n \"vanity_backsplash\": [\"vanity_countertop\"]\r\n },\r\n useFeaturesLightRequest: {\r\n countertops: true,\r\n cabinets: true,\r\n },\r\n updateDisableFeatureGroupRadio: false,\r\n navItemPositionModal: {\r\n popupOpened: false,\r\n popupPosition: {},\r\n activePartId: \"\"\r\n }\r\n};\r\n\r\nexport default function(state = initialState, action) {\r\n let newState = {...state};\r\n switch(action.type) {\r\n case types.LOAD_MOBILE_NAV:\r\n newState.mobileNav = [...action.payload];\r\n break;\r\n case types.SET_ACTIVE_NAVIGATION_NAMES:\r\n if (action.payload.activeNavigationParentName === \"walls\"\r\n || action.payload.activeNavigationParentName === \"cabinet\") {\r\n switch (action.payload.activeNavigationChildName) {\r\n case \"ceiling\":\r\n case \"right_wall\":\r\n case \"popout_wall\":\r\n case \"left_wall\":\r\n case \"crown_molding\":\r\n case \"top_cabinet\":\r\n $('html, body').animate({scrollTop: 0}, 500);\r\n break;\r\n }\r\n }\r\n return Object.assign({}, state, {\r\n ...action.payload\r\n });\r\n case types.TOGGLE_DESKTOP_NAVIGATION:\r\n case types.SET_NAVIGATION_VIEW_TYPE:\r\n case types.SET_MODULE_CONTEXT_MENU_TYPE:\r\n case types.SET_MODULE_CONTEXT_MENU_DIRECTION:\r\n case types.SET_MODULE_CONTEXT_MENU_MODULE:\r\n case types.SET_MODULE_CONTEXT_MENU_MODULE_PART:\r\n case types.SET_ACTIVE_NAVIGATION_FILTER:\r\n case types.SET_ACTIVE_NAVIGATION_FILTER_STEP_INDEX:\r\n case types.SET_CABINET_NAVIGATION_FILTER_COMPLETED:\r\n case types.SET_COUNTERTOP_NAVIGATION_FILTER_COMPLETED:\r\n case types.SET_NAVIGATION_LOADING:\r\n case types.UPDATE_DISABLE_FEATURE_GROUP_RADIO:\r\n case types.SET_APPLY_TO_COMMON:\r\n return Object.assign({}, state, {\r\n ...action.payload\r\n });\r\n case types.SET_COUNTERTOP_WIZARD:\r\n return Object.assign({}, state, {\r\n counterTopWizard: Object.assign({}, state.counterTopWizard, action.payload.countertopWizard)\r\n });\r\n case types.SET_CABINETS_APPLY_TO:\r\n return Object.assign({}, state, {\r\n cabinetsApplyTo: [...action.payload.cabinetsApplyTo]\r\n });\r\n case types.SET_EDGES_APPLY_TO:\r\n return Object.assign({}, state, {\r\n edgesApplyTo: [...action.payload.edgesApplyTo]\r\n });\r\n case types.SET_CABINETS_APPLY_TO_BATHROOM:\r\n return Object.assign({}, state, {\r\n cabinetsApplyToBathroom: [...action.payload.cabinetsApplyToBathroom]\r\n });\r\n case types.SET_COUNTERTOPS_APPLY_TO:\r\n if (action.payload.newArrayLogic) {\r\n return Object.assign({}, state, {\r\n countertopsApplyToArray: [...action.payload.countertopsApplyTo]\r\n });\r\n }\r\n return Object.assign({}, state, {\r\n countertopsApplyTo: Object.assign({}, state.countertopsApplyTo, action.payload.countertopsApplyTo)\r\n });\r\n case types.SET_COUNTERTOPS_APPLY_TO_BATHROOM:\r\n if (action.payload.newArrayLogic) {\r\n return Object.assign({}, state, {\r\n countertopsApplyToArrayBathroom: [...action.payload.countertopsApplyToBathroom]\r\n });\r\n }\r\n return Object.assign({}, state, {\r\n countertopsApplyToBathroom: Object.assign({}, state.countertopsApplyToBathroom, action.payload.countertopsApplyToBathroom)\r\n });\r\n case types.TOGGLE_NAV_ITEM_POSITION_MODAL:\r\n return Object.assign({}, state, {\r\n navItemPositionModal: Object.assign({}, state.navItemPositionModal, action.payload.navItemPositionModal)\r\n });\r\n case types.SET_USE_FEATURES_LIGHT_REQUEST:\r\n return Object.assign({}, state, {\r\n countertopsApplyToArray: !action.payload.useFeaturesLightRequest.countertops ? [] : state.countertopsApplyToArray,\r\n cabinetsApplyTo: !action.payload.useFeaturesLightRequest.cabinets ? [] : state.cabinetsApplyTo,\r\n useFeaturesLightRequest: Object.assign({}, state.useFeaturesLightRequest, action.payload.useFeaturesLightRequest)\r\n });\r\n }\r\n return newState;\r\n}\r\n","import * as types from '../actions/actionTypes';\r\nimport {SQFT_MEASURE_UNIT, SQFT_VIEW_MODE} from \"../bvcomponents/sqft/constants\";\r\n\r\nconst initialState = {\r\n isSquareFootageEnabled: false,\r\n SQFTGroup: null, // used to display different sqft types ( like cabinets, area, etc..)\r\n SQFTViewMode: SQFT_VIEW_MODE.twoDMode, // used to display 2d - 3d view\r\n sqftLoaded: false,\r\n sqftUpdateType: null,\r\n squareFeet: 0,\r\n changeLayoutPopupOpened: false,\r\n layoutToApply: \"\",\r\n sqftFromFeature: null, // feature from SQFT was opened\r\n applyLayoutOnSqft: false, // this is needed to remember to change layout on popup ok click\r\n setNewLayoutOnSqft: false, // this is needed for change layout popup - after ok click - it send a postMessage to SQFT\r\n sqftFeaturesPopup: {\r\n enabled: true,\r\n opened: false,\r\n visited: false,\r\n sqftPassedData: null, // object passed from calculator\r\n previouslyAddedSqftFeatures: [] // remember previous selections to parse properly data\r\n },\r\n measureUnit: SQFT_MEASURE_UNIT.imperial,\r\n updateCalculations: false, // update sqft calculations\r\n // todo move this to new reducer\r\n abortRequestController: null,\r\n selectedCountertop: null,\r\n cabinetsGlb: null,\r\n cabinetsARBlobUrl: null,\r\n apiErrorMessage: null,\r\n};\r\n\r\nexport default function(state = initialState, action) {\r\n\r\n switch(action.type) {\r\n\r\n case types.ENABLE_SQUARE_FOOTAGE:\r\n case types.SET_SQUARE_FOOTAGE_GROUP:\r\n case types.SET_SQFT_VIEW_MODE:\r\n case types.LOAD_SQFT:\r\n case types.UPDATE_SQFT:\r\n case types.UPDATE_SQFT_CALCULATIONS:\r\n case types.SET_SQFT_SQUARE_FEET:\r\n case types.SET_NEW_LAYOUT_ON_SQFT:\r\n case types.SET_SQFT_MEASURE_UNIT:\r\n case types.SQT_SQFT_FROM_FEATURE:\r\n case types.SET_CABINETS_GLB:\r\n case types.SET_CABINETS_AR_BLOB_URL:\r\n case types.SET_API_ERROR_MESSAGE:\r\n case types.SET_SELECTED_COUNTERTOP:\r\n case types.SET_ABORT_CONTROLLER:\r\n return Object.assign({}, state, {\r\n ...action.payload\r\n });\r\n case types.TOGGLE_CHANGE_LAYOUT_POPUP:\r\n return Object.assign({}, state, {\r\n changeLayoutPopupOpened: action.payload.changeLayoutPopupOpened,\r\n layoutToApply: action.payload.layoutToApply || state.layoutToApply,\r\n applyLayoutOnSqft: action.payload.applyLayoutOnSqft,\r\n });\r\n case types.CHANGE_SQFT_FEATURES_POPUP:\r\n state = {...state, sqftFeaturesPopup: Object.assign({}, state.sqftFeaturesPopup, action.payload.sqftFeaturesPopup)};\r\n break;\r\n }\r\n\r\n return state;\r\n\r\n}\r\n","import {SHOW_DOCUSIGN} from \"../actions/actionTypes\";\r\n\r\nconst initialState = {\r\n show: false,\r\n callback: null\r\n}\r\n\r\nexport default function (state = initialState, {type, payload} = {}) {\r\n if (type === SHOW_DOCUSIGN) {\r\n return {...state, show: payload.show, callback: payload.callback}\r\n }\r\n return state;\r\n}\r\n\r\n","import * as types from '../actions/actionTypes';\r\n\r\nconst initialState = {\r\n qtCategoriesLoaded: [], // includes visualizers\r\n qtCategoriesRequested: [], // includes visualizers\r\n qtActiveCategory: \"\", //string!! look for all the category here: layout.qtCategories.find(qtCategory => qtCategory.name === this.props.qtActiveCategory);\r\n};\r\n\r\nexport default function (state = initialState, action) {\r\n\r\n switch (action.type) {\r\n\r\n case types.SET_QT_CATEGORIES_LOADED:\r\n return Object.assign({}, state, {\r\n qtCategoriesLoaded: [...state.qtCategoriesLoaded, action.payload.qtCategoriesLoaded]\r\n });\r\n case types.SET_QT_CATEGORIES_REQUESTED:\r\n return Object.assign({}, state, {\r\n qtCategoriesRequested: [...state.qtCategoriesRequested, action.payload.qtCategoriesRequested]\r\n });\r\n case types.SET_QT_ACTIVE_CATEGORY:\r\n return Object.assign({}, state, {\r\n ...action.payload\r\n });\r\n }\r\n\r\n return state;\r\n\r\n}\r\n","import * as types from '../actions/actionTypes';\r\nimport Config from \"../config\";\r\nimport {parseFabricatorSettings} from \"./fabricatorReducer\";\r\n\r\nconst removeTutorial = Config.isVisualizerManagement();\r\n\r\nconst initialState = {\r\n materialsTutorialIsOpened: false,\r\n materialsTutorialStep: 0,\r\n materialsTutorialFinished: removeTutorial,\r\n visualizerTutorialIsOpened: false,\r\n visualizerTutorialStep: 1,\r\n visualizerTutorialFinished: removeTutorial,\r\n materialsAgentTutorialIsOpened: false,\r\n materialsAgentTutorialFinished: false,\r\n};\r\n\r\nexport default function(state = initialState, action) {\r\n\r\n switch(action.type) {\r\n\r\n case types.SHOW_MATERIALS_TUTORIAL:\r\n case types.SET_MATERIALS_TUTORIAL_STEP:\r\n case types.SET_MATERIALS_TUTORIAL_FINISHED:\r\n case types.SHOW_MATERIALS_AGENT_TUTORIAL:\r\n case types.SET_MATERIALS_AGENT_TUTORIAL_FINISHED:\r\n case types.SHOW_VISUALIZER_TUTORIAL:\r\n case types.SET_VISUALIZER_TUTORIAL_STEP:\r\n case types.SET_VISUALIZER_TUTORIAL_FINISHED:\r\n return Object.assign({}, state, {\r\n ...action.payload\r\n });\r\n case types.SET_FABRICATOR_DATA: {\r\n if (action.payload && action.payload.settings) {\r\n const {settings} = parseFabricatorSettings(action.payload);\r\n if (!settings.showVisualizerTutorial) {\r\n return Object.assign({}, state, {\r\n materialsTutorialFinished: true,\r\n visualizerTutorialFinished: true\r\n });\r\n }\r\n }\r\n return Object.assign({}, state);\r\n }\r\n\r\n }\r\n\r\n return state;\r\n\r\n}\r\n","import uuid from \"uuid\";\r\n\r\nimport {\r\n ADD_TO_CART,\r\n REMOVE_FROM_CART,\r\n CONTRACT_SIGNING_JOB_DOCUMENT,\r\n CONTRACT_SIGNING_POST_SIGNATURE,\r\n CONTRACT_SIGNING_SET_CONTRACTS_VALUES,\r\n CONTRACT_SIGNING_SET_STEP,\r\n CONTRACT_SIGNING_SHOW_SIGNATURE_PAD,\r\n SET_AFTER_CONTRACT_SIGN_CALLBACK,\r\n SET_CONTRACT_BLOB,\r\n SHOW_CONTRACT_SIGNING,\r\n CHANGE_CART_FEATURE,\r\n CHANGE_CART_QUANTITY,\r\n CONTRACT_SIGNING_RESTORE_VALUES,\r\n SET_WIZARD_SELECTED_VALUES,\r\n CHANGE_ALL_CART_ITEMS,\r\n SET_CART_ITEMS_ADDED_TO_PARENT_CART,\r\n TOGGLE_PRICE_WORKSHEET_OPENED,\r\n CONTRACT_SIGNING_SET_CONTRACTS_LIST,\r\n} from \"../actions/actionTypes\";\r\n\r\nconst initialState = {\r\n firstName: '',\r\n lastName: '',\r\n step: 1,\r\n isVisible: false,\r\n callback: null,\r\n signedDocumentUrl: null,\r\n jobDocumentUrl: null,\r\n isSignaturePadVisible: false,\r\n signaturePadTag: null,\r\n invoiceNumberOfPages: null,\r\n savedInvoiceNumberOfPages: null, // is used to update filled in fields when invoice is changed and we need to update the fields\r\n pagesCustomFieldsValue: {}, // old support\r\n afterContractSignCallback: null,\r\n contractBlob: null,\r\n contractLoading: false,\r\n needToUpdateContract: false, // it is a detection for if job was updated!! then we need a new contract\r\n contractId: uuid.v4(), // it is a cached id, so contract is refreshed every time it needs to be changed\r\n contractsList: [], // [contractInterface]\r\n contractsReceived: false,\r\n contractsValues: {}, // here we store all customer signs and contract data, it will be restored {contract.id: {}}\r\n}\r\n\r\nexport default function(state = initialState, action){\r\n switch (action.type) {\r\n case SHOW_CONTRACT_SIGNING:\r\n return _show(state, action.payload);\r\n case CONTRACT_SIGNING_SET_STEP:\r\n return {...state, step: action.payload.step};\r\n case CONTRACT_SIGNING_POST_SIGNATURE:\r\n case SET_AFTER_CONTRACT_SIGN_CALLBACK:\r\n case SET_CONTRACT_BLOB:\r\n case CONTRACT_SIGNING_RESTORE_VALUES:\r\n case CONTRACT_SIGNING_SET_CONTRACTS_VALUES:\r\n return {...state, ...action.payload};\r\n case CONTRACT_SIGNING_SET_CONTRACTS_LIST:\r\n if (!state.contractsReceived && Object.keys(state.pagesCustomFieldsValue).length && document.kvConfig.jobId\r\n && !Object.keys(state.contractsValues).length && action.payload.contractsList\r\n && action.payload.contractsList.length) { // old support\r\n // here we have an old response logic with one contract restored, we need to restore contract fields to the\r\n // first contract found once the contracts are received (they are received later than the job restored)\r\n if (state.savedInvoiceNumberOfPages) {\r\n Object.keys(state.pagesCustomFieldsValue).forEach(oldPage => {\r\n // we were saving page id after the contract? now lets reve contract, so the page goes without the contract\r\n state.pagesCustomFieldsValue[oldPage - state.savedInvoiceNumberOfPages] = state.pagesCustomFieldsValue[oldPage];\r\n delete state.pagesCustomFieldsValue[oldPage]; // erase so new page is not filled with old page values\r\n });\r\n }\r\n return {...state, ...action.payload, contractsReceived: true, contractsValues: {\r\n [action.payload.contractsList[0].id]: state.pagesCustomFieldsValue,\r\n }, pagesCustomFieldsValue: {}} // we don't need them anymore\r\n }\r\n return {...state, ...action.payload, contractsReceived: true};\r\n case CONTRACT_SIGNING_SHOW_SIGNATURE_PAD:\r\n return {...state, isSignaturePadVisible: action.payload.show, signaturePadTag: action.payload.tag};\r\n case ADD_TO_CART:\r\n case REMOVE_FROM_CART:\r\n case CHANGE_CART_FEATURE:\r\n case CHANGE_CART_QUANTITY:\r\n case TOGGLE_PRICE_WORKSHEET_OPENED: // only if they opened, we cant set here set discount sections, because when restoring this is fired\r\n case SET_WIZARD_SELECTED_VALUES:\r\n case CHANGE_ALL_CART_ITEMS:\r\n case SET_CART_ITEMS_ADDED_TO_PARENT_CART:\r\n if (action.type === ADD_TO_CART && action.payload.cartItems.every(cItem => {\r\n return cItem.cartFeature && cItem.cartFeature.dbFeature.autoAddToCart\r\n })) {\r\n return state\r\n }\r\n if (!state.needToUpdateContract) {\r\n return {...state, needToUpdateContract: true, contractId: uuid.v4()};\r\n }\r\n return state\r\n case CONTRACT_SIGNING_JOB_DOCUMENT:\r\n if (Number.isInteger(action.payload.invoiceNumberOfPages)\r\n && Number.isInteger(state.savedInvoiceNumberOfPages)\r\n && (action.payload.invoiceNumberOfPages !== state.savedInvoiceNumberOfPages)\r\n && (Object.keys(state.pagesCustomFieldsValue).length)) {\r\n // on document load we are checking old receipt pages and new receipt pages, and then we update each selected value page\r\n console.log(\"receipt was changed, updating values... old pages and new pages:\", state.savedInvoiceNumberOfPages, action.payload.invoiceNumberOfPages);\r\n let newValues = {};\r\n Object.keys(state.pagesCustomFieldsValue).forEach(oldPage => {\r\n // for example, if filled in page was 5 and there were 3 pages in receipt, and now receipt has 1 page - 5-3+1 = 3 page new\r\n const originalContractPage = oldPage - state.savedInvoiceNumberOfPages;\r\n const newPage = originalContractPage + action.payload.invoiceNumberOfPages;\r\n newValues[newPage] = state.pagesCustomFieldsValue[oldPage];\r\n });\r\n return {...state,\r\n ...action.payload,\r\n needToUpdateContract: false,\r\n pagesCustomFieldsValue: newValues,\r\n savedInvoiceNumberOfPages: action.payload.invoiceNumberOfPages, // update with new number, for the next time we open\r\n };\r\n }\r\n return {\r\n ...state,\r\n ...action.payload,\r\n needToUpdateContract: false,\r\n savedInvoiceNumberOfPages: action.payload.invoiceNumberOfPages // update with current invoice pages count\r\n };\r\n }\r\n return state;\r\n}\r\n\r\n\r\nfunction _show(state, {show, callback}) {\r\n if (!show) {\r\n return {...state, isVisible: false, step: 1, firstName: '', lastName: ''};\r\n }\r\n\r\n return {...state, isVisible: true, callback};\r\n}\r\n\r\n","import * as types from '../actions/actionTypes';\r\n\r\nconst initialState = {\r\n priceWorksheetOpened: false,\r\n discountsReceived: false,\r\n discountSections: [],\r\n customAddedDiscounts: [], // same as discountInterface[], but also {categoryId, uuid}\r\n financePercentage: \"\", // %\r\n allFinanceOptionsPopupVisible: false,\r\n financeCellsVisible: false, // boolean\r\n};\r\n\r\nexport default function(state = initialState, action) {\r\n\r\n switch(action.type) {\r\n\r\n case types.TOGGLE_PRICE_WORKSHEET_OPENED:\r\n case types.SET_CUSTOM_ADDED_DISCOUNTS:\r\n case types.SET_FINANCE_PERCENTAGE:\r\n case types.SET_ALL_FINANCE_OPTIONS_POPUP_VISIBLE:\r\n case types.SET_DISCOUNT_FINANCE_CELLS_VISIBLE:\r\n return Object.assign({}, state, {\r\n ...action.payload\r\n });\r\n case types.SET_DISCOUNT_SECTIONS:\r\n return Object.assign({}, state, {\r\n ...action.payload,\r\n discountsReceived: true\r\n });\r\n }\r\n\r\n return state;\r\n}\r\n","import $ from \"jquery\";\r\n\r\nimport * as types from '../actions/actionTypes';\r\nimport {LOOK_OVERLAYS} from \"../bvcomponents/look/core/constants\";\r\n\r\nconst initialState = {\r\n showUnlockCalculations: false,\r\n unlockCalculationsStep: 0,\r\n showCartItems: [],\r\n showTotalItems: [], // \"tax\", \"total\"\r\n showUnlockCalculationsTutorial: false,\r\n unlockCalculationsTutorialIsFinished: false,\r\n unlockCalculationsTutorialStep: 0,\r\n};\r\n\r\nexport default function(state = initialState, action) {\r\n\r\n switch(action.type) {\r\n\r\n case types.SET_SHOW_UNLOCK_CALCULATIONS:\r\n case types.SET_UNLOCK_CALCULATIONS_STEP:\r\n case types.SHOW_UNLOCK_CALCULATIONS_CART_ITEM:\r\n case types.SHOW_UNLOCK_CALCULATIONS_TOTAL_ITEM:\r\n case types.SHOW_UNLOCK_CALCULATIONS_TUTORIAL:\r\n case types.SET_UNLOCK_CALCULATIONS_TUTORIAL_STEP:\r\n case types.SET_UNLOCK_CALCULATIONS_TUTORIAL_FINISHED:\r\n return Object.assign({}, state, {\r\n ...action.payload\r\n });\r\n case types.SET_LOOK_OVERLAY_OPENED:\r\n if ((action.payload.lookOverlayOpened === LOOK_OVERLAYS.leadCapture) && state.showUnlockCalculations && (state.unlockCalculationsStep !== 4)) {\r\n const overlayElement = document.querySelector(\".look-overlay--style\");\r\n if (overlayElement) {\r\n $(overlayElement).fadeIn(300);\r\n }\r\n return Object.assign({}, state, {\r\n unlockCalculationsStep: 4\r\n });\r\n }\r\n }\r\n\r\n return state;\r\n\r\n}\r\n","import * as types from '../actions/actionTypes';\r\n\r\nconst initialState = {\r\n quotes: [\r\n {}\r\n ],\r\n activeQuoteIndex: 0,\r\n};\r\n\r\nexport default function(state = initialState, action) {\r\n let updatedQuotes;\r\n switch(action.type) {\r\n case types.ADD_NEW_QUOTE:\r\n case types.SET_QUOTES:\r\n case types.SET_ACTIVE_QUOTE_INDEX:\r\n return Object.assign({}, state, {\r\n ...action.payload\r\n });\r\n case types.UPDATE_QUOTE:\r\n updatedQuotes = [...state.quotes];\r\n updatedQuotes[updatedQuotes.findIndex(item => item === action.payload.quote)] = action.payload.updatedQuote\r\n return Object.assign({}, state, {quotes: updatedQuotes});\r\n }\r\n\r\n return state;\r\n\r\n}\r\n","import * as types from '../actions/actionTypes';\r\n\r\nconst initialState = {\r\n showAdvancedQuoting: false,\r\n activeQuoteIndex: 0,\r\n advancedQuotingSearchItem: null, // is needed for materials page (item that was clicked to change)\r\n};\r\n\r\nexport default function(state = initialState, action) {\r\n\r\n switch(action.type) {\r\n\r\n case types.TOGGLE_SHOW_ADVANCED_QUOTING:\r\n case types.SET_ADVANCED_QUOTING_SEARCH_ITEM:\r\n return Object.assign({}, state, {\r\n ...action.payload\r\n });\r\n }\r\n\r\n return state;\r\n\r\n}\r\n","import * as types from '../actions/actionTypes';\r\n\r\nconst initialState = {\r\n showAssignQuotePopup: false,\r\n assignQuotePopupSearchText: \"\",\r\n assignQuotePopupEmployee: null,\r\n assignQuotePopupCustomer: null,\r\n assignQuotePopupSuccessText: \"\",\r\n assignQuoteCloneMode: false,\r\n assignQuoteOfflineCustomers: [],\r\n assignQuoteOfflineEmployees: [],\r\n assignQuotePopupSaveButtons: \"all\", // save or checkout or updateTax\r\n};\r\n\r\nexport default function(state = initialState, action) {\r\n\r\n switch(action.type) {\r\n\r\n case types.TOGGLE_SHOW_ASSIGN_QUOTE_POPUP:\r\n case types.SET_ASSIGN_QUOTE_POPUP_SEARCH_TEXT:\r\n case types.SET_ASSIGN_QUOTE_POPUP_EMPLOYEE:\r\n case types.SET_ASSIGN_QUOTE_POPUP_CUSTOMER:\r\n case types.SET_ASSIGN_QUOTE_POPUP_SUCCESS_TEXT:\r\n case types.SET_ASSIGN_QUOTE_CLONE_MODE:\r\n case types.SET_ASSIGN_QUOTE_OFFLINE_DATA:\r\n return Object.assign({}, state, {\r\n ...action.payload\r\n });\r\n }\r\n\r\n return state;\r\n\r\n}\r\n","import * as types from '../actions/actionTypes';\r\n\r\nconst initialState = {\r\n receiptUrl: \"\",\r\n receiptSignature: \"\", // pngBase64\r\n};\r\n\r\nexport default function (state = initialState, action) {\r\n\r\n switch (action.type) {\r\n\r\n case types.SET_RECEIPT_URL:\r\n case types.SET_RECEIPT_SIGNATURE:\r\n return Object.assign({}, state, {\r\n ...action.payload\r\n });\r\n }\r\n\r\n return state;\r\n\r\n}\r\n","import * as types from '../actions/actionTypes';\r\n\r\nconst initialState = {\r\n attachedToLine: [],\r\n waterfallSectionsData: [],\r\n underlaymentSections: [],\r\n\r\n selectedFeature: null,\r\n selectedPartIds: [],\r\n resourceTypes: []\r\n};\r\n\r\nexport default function(state = {...initialState}, action) {\r\n let filteredResource;\r\n let resourceTypes;\r\n let newState;\r\n switch(action.type) {\r\n case types.SET_SELECTED_FEATURE:\r\n case types.SET_SELECTED_PART_IDS:\r\n return Object.assign({}, state, {\r\n ...action.payload\r\n });\r\n case types.SET_RESOURCES:\r\n state = {...state, [action.payload.resourceType]: action.payload.resources};\r\n break;\r\n case types.ADD_RESOURCE:\r\n newState = {\r\n [action.payload.resourceType]: [...state[action.payload.resourceType], action.payload.resource],\r\n }\r\n if (!state.resourceTypes.includes(action.payload.resourceType)) {\r\n newState.resourceTypes = [...state.resourceTypes, action.payload.resourceType]\r\n }\r\n return Object.assign({}, state, newState);\r\n case types.CHANGE_RESOURCE:\r\n filteredResource = state[action.payload.resourceType].map((item) => {\r\n if (item.id !== action.payload.resource.id) { return item }\r\n\r\n return {\r\n ...item,\r\n ...action.payload.resource\r\n }\r\n })\r\n\r\n return Object.assign({}, state, {[action.payload.resourceType]: filteredResource });\r\n\r\n case types.DELETE_RESOURCE:\r\n filteredResource = state[action.payload.resourceType].filter((row) => row.id !== action.payload.id);\r\n\r\n return Object.assign({}, state, {[action.payload.resourceType]: filteredResource });\r\n case types.DELETE_RESOURCE_ATTACHED_TO:\r\n filteredResource = state[action.payload.resourceType].filter((row) => row.attachedToId !== action.payload.attachedTo.id);\r\n\r\n return Object.assign({}, state, {[action.payload.resourceType]: filteredResource });\r\n case types.DELETE_ALL_RESOURCES:\r\n resourceTypes = {}\r\n for (const resourceType of state.resourceTypes) {\r\n resourceTypes[resourceType] = [];\r\n }\r\n return Object.assign({}, state, resourceTypes);\r\n }\r\n\r\n return state;\r\n}\r\n","import * as types from '../actions/actionTypes';\r\n\r\nconst initialState = {\r\n miteredSections: [],\r\n};\r\n\r\nexport default function(state = initialState, action) {\r\n let filteredMiteredSections;\r\n switch(action.type) {\r\n case types.SHOW_SLAB_TOOL:\r\n return Object.assign({}, state, {\r\n ...action.payload\r\n });\r\n case types.SET_MITERED_SECTIONS:\r\n state = {...state, miteredSections: action.payload.miteredSections};\r\n break;\r\n case types.ADD_MITERED_SECTION:\r\n return Object.assign({}, state, {\r\n miteredSections: [...state.miteredSections, action.payload]\r\n });\r\n case types.CHANGE_MITERED_SECTION:\r\n filteredMiteredSections = state.miteredSections.map((item) => {\r\n if (item.id !== action.payload.id) { return item }\r\n\r\n return {\r\n ...item,\r\n ...action.payload\r\n }\r\n })\r\n\r\n return Object.assign({}, state, { miteredSections: filteredMiteredSections });\r\n\r\n case types.DELETE_MITERED_SECTION:\r\n if (state.miteredSections.length === 0) {\r\n return state\r\n }\r\n\r\n filteredMiteredSections = state.miteredSections.filter((row) => row.id !== action.payload.id);\r\n\r\n return Object.assign({}, state, { miteredSections: filteredMiteredSections });\r\n case types.DELETE_ALL_MITERED_SECTIONS:\r\n return Object.assign({}, state, { miteredSections: []});\r\n }\r\n\r\n return state;\r\n}\r\n","import $ from \"jquery\";\r\n\r\nimport * as types from '../actions/actionTypes';\r\nimport {LOOK_FEATURE_CONTENT, LOOK_WALLS_ONLY} from \"../bvcomponents/look/core/constants\";\r\nimport {IS_PRODUCT_JOURNEY} from \"../config\";\r\nimport {hardCodeIsEncore} from \"../misc/fabricatorHardcode\";\r\n\r\nconst defaultCompatabilityObject = {\r\n visible: false,\r\n compatabilityLogic: [],\r\n clickedFeature: null,\r\n applyFunction: null\r\n};\r\n\r\nconst defaultLockedTutorialObject = {\r\n visible: false,\r\n step: 0,\r\n anchorDbFeatureId: null,\r\n finished: false,\r\n withGrid: false,\r\n firstLockedIndex: null,\r\n firstUnlockedIndex: null,\r\n};\r\n\r\nconst defaultAllWallsTutorialObject = {\r\n visible: false,\r\n lookFeature: null,\r\n finished: false,\r\n withGrid: false,\r\n left: 0,\r\n top: 0,\r\n height: 0,\r\n // featureIndex: null,\r\n};\r\n\r\nconst initialState = {\r\n lookOpened: false,\r\n lookExpanded: false,\r\n lookParentKeys: [],\r\n lookViewType: 1,\r\n lookViewTypeWasChanged: false,\r\n // wishlistPopupOpened: false,\r\n sidebarModalOpened: false,\r\n lookActiveFeature: null,\r\n lookActiveFeatureStockCount: 0, // to update not in stock\r\n lookActiveCategory: \"\", //partId\r\n moreInfoOpened: \"\", // main or select\r\n moreInfoContent: LOOK_FEATURE_CONTENT.info, // main or select,\r\n lookPageOpened: \"\",\r\n lookOverlayOpened: \"\", // overlay type from constant\r\n lookOverlayAction: \"\", // overlay sub type (added for sharing text)\r\n lookViewChangeOptions: {\r\n newLayoutType: 1,\r\n newScene: 1,\r\n itemsToRemove: [],\r\n }, // overlay type from constant\r\n lookStylePopup: {\r\n notMatchingFeatures: [],\r\n colors: []\r\n }, // overlay type from constant\r\n // lookRemovePopup: {\r\n // fromFeature: null,\r\n // }, // overlay type from constant\r\n introStep: 0,\r\n introHidden: true,\r\n contextMenu: {\r\n opened: false,\r\n partId: \"\",\r\n layerPosition: \"\",\r\n position: {x: 0, y: 0},\r\n clickedOnItem: \"\",\r\n },\r\n lookWallsApplyTo: hardCodeIsEncore() ? [...LOOK_WALLS_ONLY] : [],\r\n lookAllWallsOpened: false,\r\n lookReturnAction: \"\",\r\n lookDemoPointsClicked: false,\r\n lookActiveFeaturePositionInList: null, // is used for navigation only to prevent jumping (null || number)\r\n navigationCount: 0,\r\n featureGroupCount: 0, // is used when feature group receives its features, to update other components\r\n lookCompatabilityAlert: Object.assign({}, defaultCompatabilityObject),\r\n lookRestoreState: null,\r\n lookLockedTutorial: Object.assign({}, defaultLockedTutorialObject),\r\n lookAllWallsTutorial: Object.assign({}, defaultAllWallsTutorialObject),\r\n};\r\n\r\nconst removeMenuFromState = (state, payload) => {\r\n if (state.lookExpanded) {\r\n payload.lookExpanded = false;\r\n }\r\n // if (state.lookActiveFeature) {\r\n // payload.lookActiveFeature = null;\r\n // }\r\n if (state.moreInfoOpened) {\r\n payload.moreInfoOpened = \"\";\r\n }\r\n if (state.lookAllWallsOpened) {\r\n payload.lookAllWallsOpened = false;\r\n }\r\n if (state.contextMenu.clickedOnItem) {\r\n state.contextMenu.clickedOnItem = \"\";\r\n }\r\n // if (state.lookActiveCategory) {\r\n // payload.lookActiveCategory = \"\";\r\n // }\r\n if (document.body.style.overflow === \"hidden\") {\r\n document.body.style.overflow = \"\";\r\n }\r\n return payload\r\n}\r\n\r\nexport default function(state = initialState, action) {\r\n let newState = {...state};\r\n switch(action.type) {\r\n case types.SET_LOOK_OPENED:\r\n if (!action.payload.lookOpened) {\r\n action.payload = removeMenuFromState(state, action.payload);\r\n } else if (action.payload.isMobile) {\r\n document.body.style.overflow = \"hidden\";\r\n }\r\n return Object.assign({}, state, {\r\n ...action.payload\r\n });\r\n case types.SET_LOOK_ACTIVE_FEATURE:\r\n if (!action.payload.lookActiveFeature) {\r\n if (state.moreInfoOpened) {\r\n action.payload.moreInfoOpened = \"\";\r\n }\r\n if (state.lookRestoreState && !action.payload.isMobile) {\r\n action.payload.lookRestoreState = null;\r\n }\r\n }\r\n if (!IS_PRODUCT_JOURNEY) {\r\n action.payload.lookActiveCategory = action.payload.lookActiveFeature ? action.payload.lookActiveFeature.partId : \"\"\r\n }\r\n if (state.lookOpened && state.lookExpanded) {\r\n action.payload.lookExpanded = false;\r\n }\r\n if (state.lookOpened && state.lookExpanded) {\r\n action.payload.lookExpanded = false;\r\n }\r\n action.payload.lookCompatabilityAlert = Object.assign({}, defaultCompatabilityObject);\r\n return Object.assign({}, state, {\r\n ...action.payload\r\n });\r\n case types.SET_LOOK_ACTIVE_CATEGORY:\r\n if (state.moreInfoOpened) {\r\n action.payload.moreInfoOpened = \"\";\r\n }\r\n if (!action.payload.lookActiveCategory && state.lookRestoreState) {\r\n action.payload.lookRestoreState = null;\r\n }\r\n if (state.contextMenu.clickedOnItem\r\n && (!action.payload.lookActiveCategory || (action.payload.lookActiveCategory !== \"vanity_sink\"))) {\r\n state.contextMenu.clickedOnItem = \"\";\r\n }\r\n if (action.payload.lookActiveCategory && (action.payload.lookActiveCategory.includes(\"floor\"))) {\r\n $(\"html, body\").animate({scrollTop: document.body.scrollHeight}, 500);\r\n }\r\n action.payload.lookCompatabilityAlert = Object.assign({}, defaultCompatabilityObject);\r\n return Object.assign({}, state, {\r\n ...action.payload\r\n });\r\n case types.SET_LOOK_EXPANDED:\r\n case types.SET_LOOK_PARENT_KEYS:\r\n case types.SET_WISHLIST_POPUP_OPENED:\r\n case types.SET_SIDEBAR_MODAL_OPENED:\r\n case types.SET_LOOK_MORE_INFO_OPENED:\r\n case types.SET_LOOK_PAGE_OPENED:\r\n case types.SET_LOOK_OVERLAY_OPENED:\r\n case types.SET_LOOK_INTRO_STEP:\r\n case types.SET_LOOK_INTRO_HIDDEN:\r\n case types.SET_LOOK_WALLS_APPLY_TO:\r\n case types.SET_LOOK_ALL_WALLS_OPENED:\r\n case types.SET_LOOK_RETURN_ACTION:\r\n case types.SET_LOOK_DEMO_POINTS_CLICKED:\r\n case types.SET_LOOK_RESTORE_STATE:\r\n return Object.assign({}, state, {\r\n ...action.payload\r\n });\r\n case types.SET_LOOK_VIEW_TYPE:\r\n return Object.assign({}, state, {\r\n ...action.payload, lookViewTypeWasChanged: true\r\n });\r\n case types.SET_LOOK_VIEW_CHANGE_OPTIONS:\r\n return Object.assign({}, state, {\r\n lookViewChangeOptions: Object.assign({}, state.lookViewChangeOptions, action.payload.lookViewChangeOptions)\r\n });\r\n case types.SET_LOOK_STYLE_POPUP:\r\n return Object.assign({}, state, {\r\n lookStylePopup: Object.assign({}, state.lookStylePopup, action.payload.lookStylePopup)\r\n });\r\n case types.SET_LOOK_REMOVE_POPUP:\r\n return Object.assign({}, state, {\r\n lookRemovePopup: Object.assign({}, state.lookRemovePopup, action.payload.lookRemovePopup)\r\n });\r\n case types.SET_LOOK_CONTEXT_MENU:\r\n return Object.assign({}, state, {\r\n contextMenu: Object.assign({}, state.contextMenu, action.payload.contextMenu)\r\n });\r\n case types.SET_LOOK_COMPATABILITY_ALERT:\r\n return Object.assign({}, state, {\r\n lookCompatabilityAlert: Object.assign({}, state.lookCompatabilityAlert, action.payload.lookCompatabilityAlert)\r\n });\r\n case types.SET_LOOK_LOCK_TUTORIAL:\r\n return Object.assign({}, state, {\r\n lookLockedTutorial: Object.assign({}, state.lookLockedTutorial, action.payload.lookLockedTutorial)\r\n });\r\n case types.SET_LOOK_ALL_WALLS_TUTORIAL:\r\n return Object.assign({}, state, {\r\n lookAllWallsTutorial: Object.assign({}, state.lookAllWallsTutorial, action.payload.lookAllWallsTutorial)\r\n });\r\n case types.UPDATE_LOOK_NAVIGATION_COUNT:\r\n return Object.assign({}, state, {\r\n navigationCount: state.navigationCount + 1\r\n });\r\n case types.UPDATE_LOOK_ACTIVE_FEATURE_STOCK_COUNT:\r\n return Object.assign({}, state, {\r\n lookActiveFeatureStockCount: state.lookActiveFeatureStockCount + 1\r\n });\r\n case types.SET_WIZARD_ACTIVE_ITEM:\r\n if (!state.lookOpened && action.payload.wizardActiveItem) {\r\n return Object.assign({}, state, {\r\n lookOpened: true,\r\n });\r\n }\r\n break;\r\n case types.SET_WIZARD_ACTIVE_STEP:\r\n return Object.assign({}, state, {\r\n moreInfoOpened: false,\r\n lookActiveFeaturePositionInList: null,\r\n });\r\n default:\r\n break;\r\n }\r\n return newState;\r\n}\r\n","import * as types from '../actions/actionTypes';\r\nimport {getFeatureGroupFeaturesQuantity} from \"../bvcomponents/look/lookNavigation/lookNavigationFunctions\";\r\n\r\nconst initialState = {\r\n filtersOpened: false,\r\n similarFeature: null,\r\n similarProductsOpened: false,\r\n requiredButNotIncludedFeature: null,\r\n groheFiltersSearchText: \"\",\r\n lastOpenedFeature: null,\r\n lastOpenedCategory: null,\r\n subCategoryOpened: \"\",\r\n showAddedToTheCartSuccess: false,\r\n groheActiveFeatureQuantity: 1,\r\n groheShareButtonsOpened: false,\r\n groheSameColorActiveFeature: null,\r\n groheSameColorSectionOpened: false,\r\n groheSameColorCheckboxApplied: false,\r\n exisingTempId: \"\",\r\n};\r\n\r\nexport default function(state = initialState, action){\r\n switch (action.type) {\r\n case types.SET_GROHE_FILTERS_OPENED:\r\n case types.SET_GROHE_SIMILAR_FEATURE:\r\n case types.SET_GROHE_SIMILAR_PRODUCTS_OPENED:\r\n case types.SET_GROHE_REQUIRED_BUT_NOT_INCLUDED_FEATURE:\r\n case types.SET_GROHE_FILTERS_SEARCH_TEXT:\r\n case types.SET_GROHE_LAST_OPENED_CATEGORY:\r\n case types.SET_GROHE_SUB_CATEGORY_OPENED:\r\n case types.SET_GROHE_SHOW_ADDED_TO_THE_CART_SUCCESS:\r\n case types.SET_GROHE_ACTIVE_FEATURE_QUANTITY:\r\n case types.SET_GROHE_SHARE_BUTTONS_OPENED:\r\n case types.SET_GROHE_SAME_COLOR_SECTION_OPENED:\r\n case types.SET_GROHE_SAME_COLOR_CHECKBOX_APPLIED:\r\n case types.SET_GROHE_SAME_COLOR_ACTIVE_FEATURE:\r\n case types.SET_GROHE_EXISTING_TEMP_ID:\r\n return Object.assign({}, state, {\r\n ...action.payload\r\n });\r\n case types.SET_LOOK_ACTIVE_FEATURE: {\r\n return Object.assign({}, state, {\r\n lastOpenedFeature: action.payload.lookActiveFeature || state.lastOpenedFeature,\r\n subCategoryOpened: action.payload.lookActiveFeature ? \"\" : state.subCategoryOpened,\r\n groheActiveFeatureQuantity: getFeatureGroupFeaturesQuantity(action.payload.lookActiveFeature),\r\n });\r\n }\r\n case types.SET_LOOK_ACTIVE_CATEGORY: {\r\n return Object.assign({}, state, {\r\n lastOpenedCategory: action.payload.lookActiveCategory || state.lastOpenedCategory,\r\n filtersOpened: !action.payload.lookActiveCategory && state.filtersOpened ? false : state.filtersOpened,\r\n groheFiltersSearchText: !action.payload.lookActiveCategory && state.groheFiltersSearchText ? \"\" : state.groheFiltersSearchText, // always remove it on open/close\r\n });\r\n }\r\n case types.SET_LOOK_OPENED: {\r\n return Object.assign({}, state, {\r\n lastOpenedFeature: (!action.payload.lookOpened && state.lastOpenedFeature) ? null : state.lastOpenedFeature,\r\n lastOpenedCategory: (!action.payload.lookOpened && state.lastOpenedCategory) ? null : state.lastOpenedCategory,\r\n subCategoryOpened: \"\", // always remove it on open/close\r\n similarProductsOpened: false, // always remove it on open/close\r\n requiredButNotIncludedFeature: null, // always remove it on open/close\r\n groheActiveFeatureQuantity: !action.payload.lookOpened ? 1 : state.groheActiveFeatureQuantity,\r\n groheFiltersSearchText: \"\", // always remove it on open/close\r\n });\r\n }\r\n case types.SET_LOOK_PAGE_OPENED: {\r\n return Object.assign({}, state, {\r\n groheSameColorActiveFeature: (action.payload.lookPageOpened && state.groheSameColorActiveFeature) ? null : state.groheSameColorActiveFeature,\r\n });\r\n }\r\n case types.SET_WIZARD_ACTIVE_ITEM: {\r\n return Object.assign({}, state, {\r\n subCategoryOpened: \"\",\r\n groheFiltersSearchText: \"\", // always remove it on open/close\r\n });\r\n }\r\n case types.SET_WIZARD_ACTIVE_STEP: {\r\n if (state.groheFiltersSearchText) {\r\n return Object.assign({}, state, {\r\n groheFiltersSearchText: \"\", // always remove it on step change\r\n });\r\n }\r\n }\r\n }\r\n return state;\r\n}\r\n","import * as types from '../actions/actionTypes';\r\n\r\nconst initialState = {\r\n iframeIntegrationRequest: {},\r\n iframeIntegrationResponse: {},\r\n};\r\n\r\nexport default function(state = initialState, action) {\r\n let newState = {...state};\r\n switch(action.type) {\r\n case types.SET_IFRAME_INTEGRATION_REQUEST:\r\n return Object.assign({}, state, {\r\n iframeIntegrationRequest: {...action.payload.iframeIntegrationRequest}\r\n });\r\n case types.SET_IFRAME_INTEGRATION_RESPONSE:\r\n return Object.assign({}, state, {\r\n iframeIntegrationResponse: {...action.payload.iframeIntegrationResponse}\r\n });\r\n }\r\n return newState;\r\n}\r\n","import * as types from '../actions/actionTypes';\r\n\r\nconst initialState = {\r\n wizardOpened: false,\r\n wizardName: \"\",\r\n wizardStep: -1,\r\n};\r\n\r\nexport default function(state = initialState, action){\r\n switch (action.type) {\r\n case types.SET_GROHE_WIZARD_NAME:\r\n case types.SET_GROHE_WIZARD_OPENED:\r\n case types.SET_GROHE_WIZARD_STEP:\r\n return Object.assign({}, state, {\r\n ...action.payload\r\n });\r\n }\r\n return state;\r\n}\r\n","import * as types from '../actions/actionTypes';\r\n\r\nconst initialState = {\r\n cardInfo: {\r\n cardNumber: \"\", // ccNum\r\n cardName: \"\", // name\r\n expMonth: \"\",\r\n expYear: \"\",\r\n cvv: \"\",\r\n country: \"USA\",\r\n // zipCode: \"\",\r\n // country: defaultCountryValue,\r\n },\r\n cardErrors: {}, // {\"cardName\": [\"too short\"]}, {\"phoneNumber\": [\"this field is required\"]}, etc.\r\n shippingErrors: {}, // {\"postal\": [\"too short\"]}, {\"phoneNumber\": [\"this field is required\"]}, etc.\r\n selectedShippingAddressIndex: 0, // not used anymore, we can't select shipping addresses\r\n selectedBillingAddressIndex: 0, // not used anymore, we can't select shipping addresses\r\n shippingAddress: {\r\n fullName: \"\", // name\r\n address1: \"\",\r\n address2: \"\",\r\n city: \"\",\r\n state: \"\",\r\n stateShort: \"\", // used in google maps submit\r\n postal: \"\" // zip\r\n },\r\n billingAddress: {\r\n fullName: \"\", // name\r\n address1: \"\",\r\n address2: \"\",\r\n city: \"\",\r\n state: \"\",\r\n stateShort: \"\", // used in google maps submit\r\n postal: \"\" // zip\r\n },\r\n billingSameAsShipping: false,\r\n};\r\n\r\nexport default function(state = initialState, action){\r\n switch (action.type) {\r\n case types.SET_PAYMENT_INFO:\r\n return Object.assign({}, state, {\r\n [action.payload.name]: action.payload.value\r\n });\r\n case types.SET_SHIPPING_INFO:\r\n return Object.assign({}, state, {\r\n shippingAddress: {\r\n ...state.shippingAddress, ...{[action.payload.name]: action.payload.value}\r\n }\r\n });\r\n case types.SET_BILLING_INFO:\r\n return Object.assign({}, state, {\r\n billingAddress: {\r\n ...state.billingAddress, ...{[action.payload.name]: action.payload.value}\r\n }\r\n });\r\n case types.SET_CARD_INFO:\r\n return Object.assign({}, state, {\r\n cardInfo: {\r\n ...state.cardInfo, ...{[action.payload.name]: action.payload.value}\r\n }\r\n })\r\n case types.SET_CARD_ERRORS:\r\n return Object.assign({}, state, {\r\n cardErrors: {...state.cardErrors, ...action.payload.cardErrors}\r\n })\r\n case types.SET_SHIPPING_ERRORS:\r\n return Object.assign({}, state, {\r\n shippingErrors: {...state.shippingErrors, ...action.payload.shippingErrors}\r\n })\r\n case types.RESTORE_PAYMENT_INFO:\r\n return Object.assign({}, state, Object.assign({}, action.payload))\r\n }\r\n return state;\r\n}\r\n","import * as types from '../actions/actionTypes';\r\n\r\nconst initialState = {\r\n layoutHistory: [],\r\n};\r\n\r\nexport default function(state = initialState, action) {\r\n\r\n switch(action.type) {\r\n\r\n case types.ADD_LAYOUT_HISTORY: {\r\n const lastState = state.layoutHistory[state.layoutHistory.length - 1];\r\n if (lastState) {\r\n if (JSON.stringify(lastState) !== JSON.stringify(action.payload.layoutState)) {\r\n state.layoutHistory.push(action.payload.layoutState)\r\n }\r\n } else {\r\n state.layoutHistory.push(action.payload.layoutState)\r\n }\r\n return Object.assign({}, state, {\r\n layoutHistory: state.layoutHistory\r\n })\r\n }\r\n case types.SET_LAYOUT_HISTORY:\r\n return Object.assign({}, state, {\r\n ...action.payload\r\n })\r\n }\r\n\r\n return state;\r\n\r\n}\r\n","import * as types from '../actions/actionTypes';\r\nimport {ROUTES} from \"../routes\";\r\nimport {getCurrentLayout} from \"../bvcomponents/appLayout\";\r\n\r\nconst initialState = {\r\n shopPageLoaded: false,\r\n shopPageOpened: false,\r\n shopLastPageVisited: ROUTES.shop,\r\n shopPageLeaved: false,\r\n // shopActiveCategory: \"\",\r\n // shopActiveFeature: \"\",\r\n};\r\n\r\nconst getLastVisitedShopPage = (partId, withFeature = null, currentPage = \"\") => {\r\n const layout = getCurrentLayout();\r\n if (!layout.partIdExistInQtCategory(partId, true)) {\r\n return ROUTES.shop\r\n }\r\n if (withFeature) {\r\n return `${ROUTES.shop}/${partId}/${withFeature.dbFeature.sku || withFeature.dbFeature.sharedFeatureName}`\r\n }\r\n if (currentPage && currentPage.includes(partId + \"/\")) { // + \"/\" - we are checking if there is anything more (feature opened)\r\n return currentPage\r\n }\r\n return `${ROUTES.shop}/${partId}`\r\n}\r\n\r\nexport default function (state = initialState, action) {\r\n\r\n switch (action.type) {\r\n\r\n case types.SET_SHOP_PAGE_LOADED:\r\n case types.SET_SHOP_PAGE_OPENED:\r\n case types.SET_SHOP_LAST_PAGE_VISITED:\r\n case types.SET_SHOP_PAGE_LEAVED:\r\n // case types.SET_SHOP_ACTIVE_CATEGORY:\r\n // case types.SET_SHOP_ACTIVE_FEATURE:\r\n return Object.assign({}, state, {\r\n ...action.payload\r\n });\r\n case types.SET_LOOK_ACTIVE_CATEGORY: {\r\n if (!state.shopPageOpened && action.payload.lookActiveCategory) {\r\n const shopLastPageVisited = getLastVisitedShopPage(action.payload.lookActiveCategory, null, state.shopLastPageVisited);\r\n if (shopLastPageVisited !== state.shopLastPageVisited) {\r\n return Object.assign({}, state, {\r\n shopLastPageVisited\r\n });\r\n }\r\n }\r\n return state;\r\n }\r\n case types.SET_LOOK_ACTIVE_FEATURE: {\r\n if (!state.shopPageOpened && action.payload.lookActiveFeature) {\r\n const shopLastPageVisited = getLastVisitedShopPage(action.payload.lookActiveFeature.partId, action.payload.lookActiveFeature, state.shopLastPageVisited);\r\n if (shopLastPageVisited !== state.shopLastPageVisited) {\r\n return Object.assign({}, state, {\r\n shopLastPageVisited\r\n });\r\n }\r\n }\r\n break;\r\n }\r\n // case types.SET_SHOP_ACTIVE_FEATURE:\r\n }\r\n\r\n return state;\r\n\r\n}\r\n","import * as types from '../actions/actionTypes';\r\n\r\nconst initialState = {\r\n isSwitching : false,\r\n activeStep: 0,\r\n};\r\n\r\nexport default function(state = initialState, action) {\r\n\r\n switch(action.type) {\r\n\r\n case types.SET_SQFT_TUTORIAL_STEP:\r\n if (state.isSwitching) {\r\n return Object.assign({}, state) // don't do anything until animation will finish\r\n }\r\n\r\n return Object.assign({}, state, {\r\n activeStep: action.payload.activeStep <= 0 ? 0 : action.payload.activeStep\r\n });\r\n\r\n case types.SET_SQFT_TUTORIAL_SWITCHING:\r\n return Object.assign({}, state, {\r\n ...action.payload\r\n });\r\n\r\n }\r\n\r\n return state;\r\n\r\n}\r\n","import React from \"react\";\r\nimport {FormattedMessage, injectIntl} from \"react-intl\";\r\nimport {connect} from \"react-redux\";\r\nimport PropTypes from \"prop-types\";\r\n\r\nconst UserFieldErrors = (props) => {\r\n\r\n const {property, userInfoErrors} = props;\r\n\r\n const errorsExist = Array.isArray(userInfoErrors[property]) && userInfoErrors[property].length;\r\n if (!errorsExist) {\r\n return null\r\n }\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n);\r\n\r\n\r\nexport const LookExitIcon = (props) => (\r\n \r\n \r\n \r\n);\r\n\r\nexport const LookCoBrowseIcon = (props) => (\r\n \r\n \r\n \r\n \r\n \r\n);\r\n\r\nexport const LookShareIcons = {\r\n facebook: ,\r\n pinterest: (\r\n \r\n \r\n \r\n \r\n ),\r\n // twitter: \r\n);\r\n\r\nexport const LookMinimizeIcon = () => (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n);\r\n\r\nexport const Look3DIcon = () => (\r\n \r\n \r\n);\r\n\r\nexport const LookAugmentRealityIcon = () => (\r\n \r\n \r\n \r\n \r\n);\r\n\r\nexport const LookIconHover = () => (\r\n \r\n);\r\n\r\nexport const LookIconNavigate = () => (\r\n \r\n \r\n);\r\n\r\nexport const LookIntroIcon = () => (\r\n \r\n \r\n)\r\n\r\nexport const groheIcon = (\r\n \r\n)\r\n\r\nexport const AmericanStandardIcon = (\r\n \r\n)\r\n\r\nexport const GroheListIcon = () => (\r\n \r\n \r\n \r\n)\r\n\r\nexport const GroheGridIcon = () => (\r\n \r\n)\r\n\r\nexport const GroheArchitectureIcon = () => (\r\n \r\n \r\n \r\n)\r\n\r\nexport const GroheLockIcon = () => (\r\n // \r\n)\r\n\r\nexport const GroheLockIconSmall = () => (\r\n // \r\n)\r\nexport const GroheNoteAddIcon = () => (\r\n \r\n \r\n \r\n)\r\n\r\nexport const GroheBoxIcon = () => (\r\n \r\n \r\n \r\n \r\n \r\n)\r\n\r\nexport const GroheVehicleIcon = () => (\r\n \r\n)\r\n\r\nexport const GroheDownloadIcon = () => (\r\n \r\n \r\n \r\n \r\n \r\n \r\n)\r\n\r\nexport const GroheSQFTIcon = () => (\r\n \r\n)\r\nexport const GroheInkPenIcon = () => (\r\n \r\n)\r\n","import * as types from \"./actionTypes\";\r\nimport {getCurrentLayout} from \"../bvcomponents/appLayout\";\r\nimport {getBvFeatures} from \"../api/server-api\";\r\nimport {IS_QKB_UI} from \"../config\";\r\nimport {\r\n changeWizardValuesToUseNewGroups,\r\n getConflictingWizardSteps, getNextWizardSteps,\r\n getWizardVisualizerType, isSameVisualizerWizard, switchCartItemsToNewWizardGroups\r\n} from \"../bvcomponents/look/lookNavigation/lookMain/lookWizard/lookWizardFunctions2\";\r\nimport {getUpdatedAllWizardValues} from \"../reducers/wizardReducer\";\r\nimport {changeAllCartItems} from \"./shoppingCartFunctions\";\r\nimport {navItemIsExcluded} from \"../bvcomponents/look/lookNavigation/lookMain/lookWizard/lookWizardFunctions\";\r\n\r\nexport const setWizardIsActive = (wizardIsActive, visualizerType) => ({\r\n type: types.SET_WIZARD_IS_ACTIVE,\r\n payload: {wizardIsActive, visualizerType}\r\n});\r\n\r\nexport const setWizardConfig = (wizardConfig) => ({\r\n type: types.SET_WIZARD_CONFIG,\r\n payload: {wizardConfig}\r\n});\r\n\r\nexport const setWizardList = (wizardList) => ({\r\n type: types.SET_WIZARD_LIST,\r\n payload: {wizardList}\r\n});\r\n\r\nexport const setWizardActiveItem = (wizardActiveItem, quoteIndex = null) => {\r\n return (dispatch, getState) => {\r\n const {quotesState} = getState();\r\n\r\n dispatch({\r\n type: types.SET_WIZARD_ACTIVE_ITEM,\r\n payload: {\r\n wizardActiveItem,\r\n quoteIndex: Number.isInteger(quoteIndex) ? quoteIndex : quotesState.activeQuoteIndex,\r\n }\r\n })\r\n }\r\n};\r\n\r\nexport const setWizardShowFeatureSection = (wizardShowFeatureSection) => ({\r\n type: types.SET_WIZARD_SHOW_FEATURE_SECTION,\r\n payload: {wizardShowFeatureSection}\r\n});\r\n\r\nexport const setWizardActiveStep = (wizardActiveStep, currentWizardItem = null, currentQuoteIndex = null) => {\r\n return (dispatch, getState) => {\r\n const {quotesState, wizardState} = getState();\r\n\r\n const quoteIndex = Number.isInteger(currentQuoteIndex) ? currentQuoteIndex : quotesState.activeQuoteIndex;\r\n const wizardItem = currentWizardItem || wizardState.wizardActiveItem;\r\n\r\n let wizardConflictingSteps = wizardState.wizardConflictingSteps;\r\n let newWizValues = Object.assign({}, wizardState.wizardSelectedValues);\r\n if (!IS_QKB_UI) {\r\n Object.keys(wizardState.wizardSelectedValues).reverse().forEach(selectedKeyNumber => { // erase conflicting selected steps!\r\n if (selectedKeyNumber > wizardActiveStep) {\r\n delete newWizValues[selectedKeyNumber]\r\n }\r\n });\r\n }\r\n if (wizardState.wizardConflictingSteps.length) {\r\n wizardConflictingSteps = [];\r\n }\r\n let allWizardsValues = wizardState.allWizardsValues;\r\n if (wizardItem) {\r\n allWizardsValues = wizardState.allWizardsValues.map(wizObject => {\r\n if (wizObject.wizardItemId === wizardItem.id && wizObject.quoteIndex === quoteIndex\r\n && isSameVisualizerWizard(wizObject)) {\r\n wizObject.lastVisitedStep = wizardActiveStep // keep it up to date to be able to restore\r\n if (wizardState.wizardConflictingSteps.length) {\r\n wizObject.wizardSelectedValues = Object.assign({}, newWizValues)\r\n }\r\n }\r\n return wizObject\r\n })\r\n }\r\n\r\n dispatch({\r\n type: types.SET_WIZARD_ACTIVE_STEP,\r\n payload: {\r\n wizardActiveStep,\r\n wizardSelectedValues: newWizValues,\r\n wizardConflictingSteps,\r\n allWizardsValues,\r\n quoteIndex,\r\n }\r\n })\r\n }\r\n}\r\n\r\nexport const clearWizardSelectedValue = (neededStep, currentWizardItem = null, currentQuoteIndex = null) => {\r\n return (dispatch, getState) => {\r\n const {quotesState, wizardState} = getState();\r\n\r\n const quoteIndex = Number.isInteger(currentQuoteIndex) ? currentQuoteIndex : quotesState.activeQuoteIndex;\r\n const wizardItem = currentWizardItem || wizardState.wizardActiveItem;\r\n\r\n let newWizValues = Object.assign({}, wizardState.wizardSelectedValues);\r\n Object.keys(wizardState.wizardSelectedValues).forEach(selectedKeyNumber => { // erase conflicting selected steps!\r\n if (+selectedKeyNumber === +neededStep) {\r\n delete newWizValues[selectedKeyNumber]\r\n }\r\n });\r\n let allWizardsValues = wizardState.allWizardsValues;\r\n if (wizardItem) {\r\n allWizardsValues = wizardState.allWizardsValues.map(wizObject => {\r\n if (wizObject.wizardItemId === wizardItem.id && wizObject.quoteIndex === quoteIndex\r\n && isSameVisualizerWizard(wizObject)) {\r\n if (wizardState.wizardConflictingSteps.length) {\r\n wizObject.wizardSelectedValues = Object.assign({}, newWizValues)\r\n }\r\n }\r\n return wizObject\r\n })\r\n }\r\n\r\n dispatch({\r\n type: types.SET_WIZARD_SELECTED_VALUES,\r\n payload: {\r\n wizardSelectedValues: newWizValues,\r\n allWizardsValues,\r\n quoteIndex,\r\n wizardConflictingSteps: wizardState.wizardConflictingSteps\r\n }\r\n })\r\n }\r\n}\r\n\r\nexport const setWizardSelectedValues = (wizardSelectedValues, direct = false, wizardItem = null, currentQuoteIndex = null) => {\r\n return (dispatch, getState) => {\r\n const {quotesState, wizardState, cartState, fabricatorState} = getState();\r\n const {cartItems} = cartState;\r\n const wizardActiveItem = wizardItem || wizardState.wizardActiveItem;\r\n const quoteIndex = Number.isInteger(currentQuoteIndex) ? currentQuoteIndex : quotesState.activeQuoteIndex;\r\n\r\n let wizardConflictingSteps = wizardState.wizardConflictingSteps;\r\n\r\n if (!direct && Object.keys(wizardSelectedValues).length === 1) {\r\n const currentStep = Object.keys(wizardSelectedValues)[0];\r\n if (currentStep) {\r\n const wizardGroup = wizardSelectedValues[currentStep].wizardGroup;\r\n const selectedFeature = wizardSelectedValues[currentStep].selectedFeature;\r\n if (wizardGroup && wizardGroup.mergedGroups && selectedFeature) {\r\n const realWizardGroup = wizardGroup.mergedGroups.find(wizG => !navItemIsExcluded({part: selectedFeature}, wizG));\r\n if (realWizardGroup) {\r\n if ((realWizardGroup.id !== wizardSelectedValues[currentStep].wizardGroup.id)) {\r\n wizardSelectedValues[currentStep].wizardGroup = Object.assign({}, wizardGroup, {\r\n id: realWizardGroup.id\r\n });\r\n // console.log(\"accurateWizardGroup!\", wizardSelectedValues[currentStep].wizardGroup);\r\n }\r\n } else {\r\n console.log(\"how is that possible? wizardGroup.mergedGroups\", wizardGroup.mergedGroups, selectedFeature);\r\n }\r\n }\r\n }\r\n }\r\n\r\n let newWizValues = direct\r\n ? Object.assign({}, wizardSelectedValues)\r\n : Object.assign({}, wizardState.wizardSelectedValues, wizardSelectedValues);\r\n\r\n // console.log(\"newWizValues\", newWizValues);\r\n\r\n if (IS_QKB_UI && fabricatorState.settings.checkout && cartItems.length && !direct\r\n && wizardSelectedValues && Object.keys(wizardSelectedValues).length === 1) {\r\n\r\n const currentStep = +Object.keys(wizardSelectedValues)[0];\r\n const commonObject = {wizardActiveItem, quoteIndex, wizardSelectedValues};\r\n let newWizardSteps = getNextWizardSteps(wizardActiveItem, currentStep, newWizValues);\r\n\r\n // console.log(\"newWizardSteps\", newWizardSteps);\r\n // here we replace cartItems to match new selections! to prevent conflicting\r\n let {updatedWizardValues, shouldReassignValues} = changeWizardValuesToUseNewGroups(newWizValues, newWizardSteps);\r\n if (shouldReassignValues) {\r\n newWizValues = updatedWizardValues;\r\n // create new steps according to new values\r\n newWizardSteps = getNextWizardSteps(wizardActiveItem, currentStep, newWizValues);\r\n // console.log(\"newWizardSteps2!\", newWizardSteps);\r\n }\r\n // here we replace cartItems to match new selections! to prevent conflicting\r\n let {newCartItems, shouldReassign} = switchCartItemsToNewWizardGroups(\r\n newWizardSteps,\r\n commonObject,\r\n cartItems,\r\n );\r\n if (shouldReassign) {\r\n dispatch(changeAllCartItems([...newCartItems]))\r\n }\r\n\r\n wizardConflictingSteps = getConflictingWizardSteps(\r\n newWizValues,\r\n commonObject,\r\n newCartItems,\r\n newWizardSteps,\r\n );\r\n }\r\n\r\n if (wizardActiveItem) {\r\n // console.log(\"wizardConflictingSteps\", action.payload.wizardConflictingSteps);\r\n // this works for QKB UI only for now, we are not using it on lixil\r\n const allWizardsValues = wizardConflictingSteps.length // do not change them to be able to restore when wizard is closed\r\n ? wizardState.allWizardsValues\r\n : getUpdatedAllWizardValues(wizardState, quoteIndex, wizardActiveItem.id, newWizValues);\r\n\r\n dispatch({\r\n type: types.SET_WIZARD_SELECTED_VALUES,\r\n payload: {\r\n quoteIndex,\r\n wizardSelectedValues: newWizValues,\r\n allWizardsValues,\r\n wizardConflictingSteps\r\n }\r\n });\r\n\r\n return;\r\n }\r\n\r\n dispatch({\r\n type: types.SET_WIZARD_SELECTED_VALUES,\r\n payload: {\r\n wizardSelectedValues: newWizValues,\r\n wizardConflictingSteps,\r\n // direct,\r\n quoteIndex,\r\n // wizardActiveItem: wizardItem || wizardState.wizardActiveItem,\r\n // fabricatorState,\r\n // cartItems: cartState.cartItems\r\n }\r\n })\r\n }\r\n}\r\n\r\nexport const setAllWizardSelectedValues = (wizardSelectedValues, quoteIndex, wizardItemId) => ({\r\n type: types.SET_ALL_WIZARD_SELECTED_VALUES,\r\n payload: {wizardSelectedValues, quoteIndex, wizardItemId}\r\n});\r\n\r\nconst getMissingWizardValuesFeatures = async (compressedAllWizardsValues) => {\r\n\r\n const missingFeatures = {};\r\n\r\n // 1) find missing features;\r\n compressedAllWizardsValues.forEach(wizardObject => {\r\n\r\n const visualizerType = getWizardVisualizerType(wizardObject, true);\r\n const layout = getCurrentLayout(visualizerType);\r\n\r\n if (!missingFeatures[visualizerType]) {\r\n missingFeatures[visualizerType] = [];\r\n }\r\n\r\n Object.keys(wizardObject.wizardSelectedValues).forEach(stepIndex => {\r\n const compressedFeature = wizardObject.wizardSelectedValues[stepIndex].selectedFeature;\r\n if (compressedFeature) {\r\n const featureGroup = layout.getFeatureGroupByPartId(compressedFeature.partId);\r\n if (!featureGroup && !missingFeatures[visualizerType].includes(compressedFeature.dbFeatureId)) {\r\n missingFeatures[visualizerType].push(compressedFeature.dbFeatureId);\r\n return\r\n }\r\n const loadedFeature = layout.getLoadedFeatureById(compressedFeature.dbFeatureId, featureGroup);\r\n if (!loadedFeature && !missingFeatures[visualizerType].includes(compressedFeature.dbFeatureId)) {\r\n missingFeatures[visualizerType].push(compressedFeature.dbFeatureId);\r\n }\r\n }\r\n });\r\n })\r\n\r\n // 2) get missing features from the backend;\r\n for (let visualizerType of Object.keys(missingFeatures)) {\r\n if (missingFeatures[visualizerType].length) {\r\n // loaderEnable();\r\n const featuresFromJob = await getBvFeatures(missingFeatures[visualizerType]);\r\n if (featuresFromJob && featuresFromJob.data) {\r\n // console.log(\"featuresFromJob\", featuresFromJob.data);\r\n const layout = getCurrentLayout(visualizerType);\r\n layout.loadNewFeatures(featuresFromJob.data);\r\n }\r\n // loaderDisable();\r\n }\r\n }\r\n return Promise.resolve()\r\n}\r\nconst getRestoredWizardValues = (compressedAllWizardsValues, wizardList) => {\r\n\r\n // 3) now we can set the values\r\n let allWizardsValues = [];\r\n compressedAllWizardsValues.forEach(wizardObject => {\r\n let wizardValues = {};\r\n const wizardItem = wizardList.find(wizItem => wizItem.id === wizardObject.wizardItemId);\r\n if (!wizardItem) {\r\n console.log(\"hmmm, it looks like the wizard was deleted, but it was active in the job\", wizardObject);\r\n return\r\n }\r\n\r\n const visualizerType = getWizardVisualizerType(wizardObject, true);\r\n const layout = getCurrentLayout(visualizerType);\r\n\r\n Object.keys(wizardObject.wizardSelectedValues).forEach(stepIndex => {\r\n\r\n const selectedWizardObject = Object.assign({}, wizardObject.wizardSelectedValues[stepIndex]);\r\n\r\n //3.1) copy all other values\r\n wizardValues[stepIndex] = selectedWizardObject.wizardGroup ? Object.assign({}, selectedWizardObject, {\r\n wizardGroup: Object.assign({}, selectedWizardObject.wizardGroup, {\r\n mergedGroups: selectedWizardObject.wizardGroup.mergedGroups ? [] : null\r\n })\r\n }) : Object.assign({}, selectedWizardObject)\r\n\r\n //3.2) update wizardGroup with all excluded features\r\n if (selectedWizardObject.wizardGroup) {\r\n const realWizardGroup = wizardItem.wizardGroups.find(wizGroup => wizGroup.id === selectedWizardObject.wizardGroup.id);\r\n if (realWizardGroup) {\r\n wizardValues[stepIndex].wizardGroup = realWizardGroup;\r\n } else {\r\n console.log(\"wizard was changed, wizard group not found\", selectedWizardObject.wizardGroup);\r\n wizardValues[stepIndex] = {};\r\n }\r\n if (selectedWizardObject.wizardGroup.mergedGroups && realWizardGroup) {\r\n selectedWizardObject.wizardGroup.mergedGroups.forEach(compressedWG => {\r\n const foundWg = wizardItem.wizardGroups.find(wizGroup => {\r\n return wizGroup.id === compressedWG.id && wizGroup.groupName === compressedWG.groupName\r\n });\r\n if (foundWg) {\r\n if (!wizardValues[stepIndex].wizardGroup.mergedGroups) {\r\n wizardValues[stepIndex].wizardGroup.mergedGroups = [];\r\n }\r\n wizardValues[stepIndex].wizardGroup.mergedGroups.push(Object.assign({}, foundWg, {mergedGroups: null})); // to prevent circular\r\n } else {\r\n console.log(\"WIZARD WAS CHANGED, merged wizard group can't be found!\", );\r\n }\r\n })\r\n }\r\n }\r\n\r\n //3.3) update selectedFeature\r\n if (selectedWizardObject.selectedFeature) {\r\n const featureGroup = layout.getFeatureGroupByPartId(selectedWizardObject.selectedFeature.partId);\r\n wizardValues[stepIndex].selectedFeature = featureGroup\r\n ? layout.getLoadedFeatureById(selectedWizardObject.selectedFeature.dbFeatureId, featureGroup)\r\n : null;\r\n }\r\n });\r\n allWizardsValues.push(Object.assign({}, wizardObject, {wizardSelectedValues: wizardValues}));\r\n })\r\n console.log(\"restoring allWizardsValues:\", allWizardsValues);\r\n return allWizardsValues\r\n}\r\n\r\nexport const updateAllWizardValues = (allWizardsValues) => ({\r\n type: types.RESTORE_ALL_WIZARD_SELECTED_VALUES,\r\n payload: {allWizardsValues}\r\n})\r\n\r\nexport const restoreAllWizardSelectedValues = (compressedAllWizardsValues) => {\r\n return async (dispatch, getState) => {\r\n const {wizardState} = getState();\r\n await getMissingWizardValuesFeatures(compressedAllWizardsValues);\r\n const valuesToRestore = getRestoredWizardValues(compressedAllWizardsValues, wizardState.wizardList);\r\n dispatch(updateAllWizardValues(valuesToRestore));\r\n }\r\n}\r\n\r\nexport const setWizardMissingFeatures = (groupName = \"\", wizardMissingFeatures = []) => ({\r\n type: types.SET_WIZARD_MISSING_FEATURES,\r\n payload: {\r\n groupName,\r\n wizardMissingFeatures\r\n }\r\n});\r\n\r\nexport const setWizardConflictPopupOpened = (wizardConflictPopupOpened) => ({\r\n type: types.SET_WIZARD_CONFLICT_POPUP_OPENED,\r\n payload: {wizardConflictPopupOpened}\r\n});\r\n\r\nexport const setWizardConflictSteps = (wizardConflictingSteps) => ({\r\n type: types.SET_WIZARD_CONFLICT_STEPS,\r\n payload: {wizardConflictingSteps}\r\n});\r\n\r\nexport const setWizardSqftCartItems = (wizardSqftCartItems) => ({\r\n type: types.SET_WIZARD_SQFT_CART_ITEMS,\r\n payload: {wizardSqftCartItems}\r\n});\r\n","import isEqual from \"lodash/isEqual\";\r\n\r\nimport {getFeatureIsActive, getFeatureParent, getSkuWithoutDot, isInStock} from \"./lookFunctions2\";\r\nimport {LOOK_NAVIGATION_LIST_TYPES, LOOK_WALLS_ONLY, METADATA} from \"../core/constants\";\r\nimport {getCurrentLayout} from \"../../appLayout\";\r\nimport {getFeatureCost, getFeatureIsLocked, isIframe} from \"../../../misc/helpers\";\r\nimport store from \"../../../store\";\r\nimport {getFilterGroupValue, getFilterGroupValues} from \"../../../misc/utils\";\r\nimport {getFeatureOptions} from \"./lookFunctions\";\r\nimport {Vanity} from \"../core/parts/vanity\";\r\nimport {setLookWallsApplyTo} from \"../../../actions/lookFunctions\";\r\nimport {CABINET_GROUP, COUNTERTOP_GROUP, EDGE_GROUP} from \"../../kvComponent/core/constants\";\r\nimport {\r\n setCabinetsApplyTo, setCabinetsApplyToBathroom,\r\n setCountertopsApplyTo,\r\n setCountertopsApplyToBathroom, setEdgesApplyTo, setApplyToCommon\r\n} from \"../../../actions/navigationFunctions\";\r\nimport CountertopSwitchers from \"../../kvComponent/navigation/countertopSwitchers\";\r\nimport CabinetSwitchers from \"../../kvComponent/navigation/cabinetSwitchers\";\r\nimport Config, {getCommonVisualizerType} from \"../../../config\";\r\nimport {\r\n CABINET_GROUP_BATHROOM,\r\n COUNTERTOP_GROUP_BATHROOM,\r\n HANDLES_GROUP_BATHROOM, SHOWER_FLOOR_GROUP_BATHROOM\r\n} from \"../../bvSceneComponent/core/constants\";\r\nimport {loaderDisable, loaderEnable} from \"../../ui/loaderView\";\r\nimport {updateCanvasCount} from \"../../../actions/actionFunctions\";\r\nimport {getBvGroupFeatures} from \"../../../api/server-api\";\r\nimport {getAdditionalFeaturesOnScroll} from \"../../../api/look-api\";\r\n\r\nconst getFeaturePropertyToSort = (navItem, property) => {\r\n if (property === \"name\") {\r\n return navItem.part.getFeatureName()\r\n }\r\n if (property === \"SortPositionNum\") {\r\n return navItem.part.metaData[property] || 99999;\r\n }\r\n return navItem.part[property];\r\n}\r\n\r\nconst getNavItemsSortedByProperty = (navItems, property, property2) => {\r\n const order = \"asc\";\r\n // console.log(\"navItems - navItems\", navItems);\r\n navItems = navItems.sort((a,b) => {\r\n let prop1 = getFeaturePropertyToSort(a, property);\r\n let prop2 = getFeaturePropertyToSort(b, property);\r\n let prop3 = getFeaturePropertyToSort(a, property2);\r\n let prop4 = getFeaturePropertyToSort(b, property2);\r\n return order === \"asc\"\r\n ? (prop1 > prop2) ? 1 : (prop1 < prop2) ? -1 : (prop3 > prop4) ? 1 : (prop3 < prop4) ? -1 : 0\r\n : (prop1 < prop2) ? 1 : (prop1 > prop2) ? -1 : (prop3 < prop4) ? 1 : (prop3 > prop4) ? -1 : 0\r\n })\r\n // console.log(\"navItems\", navItems);\r\n return navItems\r\n};\r\n\r\n/**\r\n * sorts navItems\r\n * @param navItems {[object]}\r\n * @param isQuotingTool {boolean}\r\n * @returns {[object]}\r\n */\r\nexport const getSortedNavItems = (navItems, isQuotingTool = false) => {\r\n const {fabricatorState, userState} = store.getState();\r\n const {isPhoneNumberValidated} = userState;\r\n const fabricatorSettings = fabricatorState.settings;\r\n\r\n if ((fabricatorSettings.leadCapture && !(document.kvConfig.isBackend && document.kvConfig.jobId && document.kvConfig.canSaveQuote)) && !isPhoneNumberValidated) {\r\n const unLockedFeatures = navItems\r\n .filter(navItem => !getFeatureIsLocked(navItem.part))\r\n .map(navItem => {\r\n navItem.part.featurePrice = getFeatureCost(navItem.part, 1);\r\n return navItem\r\n })\r\n const lockedFeatures = navItems\r\n .filter(navItem => getFeatureIsLocked(navItem.part))\r\n .map(navItem => {\r\n navItem.part.featurePrice = getFeatureCost(navItem.part, 1);\r\n return navItem\r\n })\r\n navItems = fabricatorSettings.showPricing ? [\r\n ...getNavItemsSortedByProperty(unLockedFeatures, \"featurePrice\", \"name\"),\r\n ...getNavItemsSortedByProperty(lockedFeatures, \"featurePrice\", \"name\")\r\n ] : [...unLockedFeatures, ...lockedFeatures];\r\n } else if (navItems[0] && navItems[0].part.partId === \"crown_molding\" && navItems[0].part.getParent().sortNavigationItems) {\r\n navItems = navItems[0].part.getParent().sortNavigationItems(navItems);\r\n } else if (fabricatorSettings.showPricing && !fabricatorState.hideCheckoutBreakdownCost && !fabricatorState.hidePricesFromUser) {\r\n navItems = navItems.map(navItem => {\r\n navItem.part.featurePrice = getFeatureCost(navItem.part, 1);\r\n return navItem\r\n })\r\n navItems = getNavItemsSortedByProperty(navItems, \"featurePrice\", \"name\")\r\n } else {\r\n const propertyToSort = navItems.some(navItem => navItem.part.metaData[\"SortPositionNum\"]) ? \"SortPositionNum\" : \"name\";\r\n navItems = getNavItemsSortedByProperty(navItems, propertyToSort, \"\");\r\n navItems = navItems.sort((a, b) => isInStock(b.part) - isInStock(a.part));\r\n if (!isQuotingTool && navItems.some(navItem => navItem.part.useMatchesFailedNavigation)) {\r\n navItems = getNavItemsSortedByProperty(navItems, \"matchesMetaFailed\");\r\n }\r\n }\r\n if (isQuotingTool) {\r\n // navItems = getNavItemsSortedByProperty(navItems, \"notAvailableInVisualizer\", \"_customDisplayName\")\r\n const inVisFeatures = navItems.filter(navFeature => !navFeature.part.notAvailableInVisualizer);\r\n const notInVisFeatures = navItems.filter(navFeature => navFeature.part.notAvailableInVisualizer);\r\n navItems = [\r\n ...inVisFeatures,\r\n // ...getNavItemsSortedByProperty(notInVisFeatures, \"featurePrice\", \"name\")\r\n ...notInVisFeatures\r\n ];\r\n }\r\n return navItems\r\n};\r\n\r\n/**\r\n * reorder features, places selected and similar walls on the beginning\r\n * @param navItems {[object]}\r\n * @param lookActiveFeature {featureInterface}\r\n * @param lookActiveCategory {string}\r\n * @param featureGroup {featureGroupInterface}\r\n * @param isQuotingTool {boolean}\r\n * @param needToReplaceActiveFeature {boolean}\r\n * @returns {[object]}\r\n */\r\nexport const getReorderedItems = (\r\n navItems,\r\n lookActiveFeature,\r\n lookActiveCategory,\r\n featureGroup,\r\n isQuotingTool,\r\n needToReplaceActiveFeature = true\r\n) => {\r\n\r\n navItems = navItems.filter(feature => feature)//todo not sure why, but we in some cases have [undefined, item, item, item, undefined, undefined] etc... //need to fix this\r\n\r\n // let activeNavItem, activeNavItemIndex;\r\n const parentFeatureGroup = featureGroup || getFeatureParent(lookActiveFeature, lookActiveCategory);\r\n if (!parentFeatureGroup) {\r\n return navItems\r\n }\r\n const navItemsToChange = [];\r\n if (needToReplaceActiveFeature) {\r\n const activeNavItem = navItems.find(navItem => {\r\n if (!navItem) {\r\n return false\r\n }\r\n return getFeatureIsActive(navItem.part, lookActiveFeature, lookActiveCategory, featureGroup)\r\n })\r\n if (activeNavItem) {\r\n navItemsToChange.push(activeNavItem);\r\n }\r\n }\r\n const isWalls = LOOK_WALLS_ONLY.includes(parentFeatureGroup.partId);\r\n if (isWalls) {\r\n const layout = getCurrentLayout();\r\n const stoneFeatures = layout.getStonesActiveFeatures();\r\n // console.log(\"stoneFeatures\", stoneFeatures);\r\n\r\n stoneFeatures.forEach(cartItem => { // yes, the getStonesActiveFeatures method returns cat item objects for some reason :facepalm:\r\n if (cartItem && cartItem.cartFeature) {\r\n const stoneName = cartItem.cartFeature.getSplittedFeatureName();\r\n if (!navItemsToChange.some(navItem => navItem.part.getSplittedFeatureName() === stoneName)) {\r\n const existingInNavItems = navItems.find(navItem => navItem.part.getSplittedFeatureName() === stoneName);\r\n if (existingInNavItems) {\r\n navItemsToChange.unshift(existingInNavItems) // push to beginning\r\n }\r\n }\r\n }\r\n })\r\n }\r\n // console.log(\"navItemsToChange\", navItemsToChange);\r\n const sorted = getSortedNavItems(navItems, isQuotingTool);\r\n navItemsToChange.forEach((nItemToChange) => {\r\n const currentIndex = sorted.findIndex(navItem => navItem.part.dbFeature.id === nItemToChange.part.dbFeature.id)\r\n if (currentIndex > -1) {\r\n sorted.splice(currentIndex, 1);\r\n sorted.splice(0, 0, nItemToChange);\r\n }\r\n });\r\n // console.log(\"sorted\", sorted);\r\n return sorted\r\n\r\n};\r\n\r\n/**\r\n * Checks if list feature is currently active\r\n * @param navItems {[navItemInterface]}\r\n // * @param filterGroups {[filterGroupInterface]}\r\n * @returns {[navItemInterface]}\r\n */\r\nexport const getReplacedNavItemsWithUnlockedFeatures = (navItems) => {\r\n const {pricingLocked} = pricingIsLocked();\r\n if (!pricingLocked) {\r\n return navItems\r\n }\r\n\r\n return navItems.map(navItem => {\r\n if (!getFeatureIsLocked(navItem.part)) {\r\n return navItem\r\n }\r\n // const colorOptions = getFeatureOptions(navItem.part, filterGroups); // removed to optimize running getNavItems function multiple times\r\n // if needed - we can pass navItems to this function\r\n if (!navItem.colorOptions) {\r\n return navItem\r\n }\r\n const unlockedOption = navItem.colorOptions.find(option => {\r\n if (!option.feature) {\r\n return false\r\n }\r\n if (option.feature.dbFeature.id === navItem.part.dbFeature.id) {\r\n return false\r\n }\r\n return !getFeatureIsLocked(option.feature)\r\n })\r\n if (unlockedOption && !navItems.some(nItem => nItem.part.dbFeature.id === navItem.part.dbFeature.id)) {\r\n return {part: unlockedOption.feature}\r\n }\r\n return navItem\r\n })\r\n}\r\n\r\n/**\r\n * Checks if list feature is currently active\r\n * @param navItems {[navItemInterface]}\r\n * @returns {array}\r\n */\r\nexport const getDesignRecommendedNavItems = (navItems) => {\r\n\r\n const {filterState, bathroomVisualizerState} = store.getState();\r\n const {filterGroups} = filterState;\r\n const {activePreset} = bathroomVisualizerState;\r\n\r\n const desRecFilterGroup = filterGroups.find(group => group.name === \"Designer Recommended\");\r\n\r\n if (!desRecFilterGroup) {\r\n return []\r\n }\r\n\r\n return navItems.filter(navItem => {\r\n // if (navItem.part.dbFeature.sharedFeatureName === \"23486BEA\") {\r\n // debugger;//eslint-disable-line\r\n // }\r\n const desRecFeature = getFilterGroupValues(navItem.part, desRecFilterGroup);\r\n const desRecColorFeatures = getFeatureOptions(navItem.part, filterGroups, false, navItem.colorOptions || []);\r\n const desRecValues = [\r\n ...(desRecFeature || []),\r\n ...(desRecColorFeatures || []).map(colorOption => {\r\n return getFilterGroupValues(colorOption.feature, desRecFilterGroup)\r\n })\r\n ];\r\n return desRecValues && desRecValues.some(desRecValue => {\r\n if (Array.isArray(desRecValue)) {\r\n return desRecValue.some(filterId => {\r\n const filterValueObject = getFilterGroupValue(filterId, desRecFilterGroup);\r\n return filterValueObject && (+filterValueObject.value === activePreset)\r\n })\r\n }\r\n const filterValueObject = getFilterGroupValue(desRecValue, desRecFilterGroup);\r\n return filterValueObject && (+filterValueObject.value === activePreset)\r\n })\r\n });\r\n}\r\n\r\n/**\r\n * reorder features, places selected and similar walls on the beginning\r\n * @param navItems {[navItemInterface]}\r\n * @param lookActiveFeature {featureInterface}\r\n * @returns {[navItemsListInterface]}\r\n */\r\nexport const getNavigationItemsLists = (navItems, lookActiveFeature) => {\r\n\r\n if (!navItems.length) {\r\n return [{\r\n type: LOOK_NAVIGATION_LIST_TYPES.regular,\r\n navItems: [],\r\n }]\r\n }\r\n\r\n let navItemsList = [];\r\n\r\n const designRecommended = getDesignRecommendedNavItems(navItems);\r\n if (designRecommended.length) {\r\n navItemsList.push({\r\n type: LOOK_NAVIGATION_LIST_TYPES.designRec,\r\n navItems: getSortedNavItems(designRecommended),\r\n })\r\n }\r\n\r\n const others = designRecommended.length ? navItems.filter(navItem => {\r\n return designRecommended.every(designNavItem => designNavItem.part.dbFeature.id !== navItem.part.dbFeature.id)\r\n }) : navItems;\r\n\r\n if (!navItems[0]) { // some unexpected case\r\n return navItemsList\r\n }\r\n\r\n const featureGroup = navItems[0].part.getParent();\r\n\r\n switch (featureGroup.partId) {\r\n case \"vanity_faucet\": {\r\n const regularFeatures = {\r\n type: LOOK_NAVIGATION_LIST_TYPES.regular,\r\n navItems: [],\r\n };\r\n const vanityParent = featureGroup.getParent();\r\n const sinkParent = vanityParent.sink;\r\n\r\n others.forEach(navItem => {\r\n if (!sinkParent || !sinkParent.activeFeature || !navItem.part.metaData.MountHoles\r\n || (lookActiveFeature && isEqual(navItem.part.metaData.MountHoles, lookActiveFeature.metaData.MountHoles))) {\r\n if (!regularFeatures.navTranslate && navItem.part.metaData.MountHoles) {\r\n regularFeatures.navTranslate = \"look.features.other.faucet.\" + navItem.part.metaData.MountHoles[0]\r\n }\r\n regularFeatures.navItems.push(navItem);\r\n } else if (navItem.part.metaData.MountHoles) {\r\n const existingNonMatchingList = navItemsList.find(navItemsObject => {\r\n return navItemsObject.type === LOOK_NAVIGATION_LIST_TYPES.notMatchingMeta && navItemsObject.notMatchingMetaName === navItem.part.metaData.MountHoles[0];\r\n });\r\n if (existingNonMatchingList) {\r\n existingNonMatchingList.navItems.push(navItem)\r\n } else {\r\n navItemsList.push({\r\n type: LOOK_NAVIGATION_LIST_TYPES.notMatchingMeta,\r\n notMatchingMetaName: navItem.part.metaData.MountHoles[0],\r\n navItems: [navItem],\r\n navTranslate: \"look.features.other.faucet.\" + navItem.part.metaData.MountHoles[0]\r\n });\r\n }\r\n }\r\n })\r\n navItemsList.push(regularFeatures);\r\n break;\r\n }\r\n default: {\r\n navItemsList.push({\r\n type: LOOK_NAVIGATION_LIST_TYPES.regular,\r\n navItems: others,\r\n });\r\n break;\r\n }\r\n }\r\n\r\n return navItemsList\r\n};\r\n\r\nconst getSinksWidth = (nextSink) => {\r\n let maxWidth = 0;\r\n let maxTotalWidth = 0;\r\n if (nextSink.metaData[\"MatchingFeature\"].includes(METADATA.NO)) {\r\n const parent = nextSink.getParent();\r\n Object.keys(parent.layerPositions).forEach(position => {\r\n const positionFeature = parent.layerPositions[position];\r\n if (positionFeature && positionFeature.metaData[\"SinkWidth\"]) {\r\n maxTotalWidth += positionFeature.metaData[\"SinkWidth\"];\r\n }\r\n });\r\n if (nextSink.metaData[\"SinkWidth\"]) {\r\n maxWidth = nextSink.metaData[\"SinkWidth\"]\r\n }\r\n }\r\n // console.log(\"maxWidth\", maxWidth, maxTotalWidth);\r\n return {maxWidth, maxTotalWidth}\r\n}\r\n\r\nexport const findNextVanityTypeFeature = (nextSink, nextFeatureGroup) => {\r\n if (!nextSink.metaData[\"MatchingFeature\"] || nextSink.notAvailableInVisualizer) {\r\n return null\r\n }\r\n const nextSinkSku = getSkuWithoutDot(nextSink.dbFeature.sharedFeatureName);\r\n if (nextFeatureGroup && nextFeatureGroup.activeFeature\r\n && nextSink.metaData[\"MatchingFeature\"].includes(getSkuWithoutDot(nextFeatureGroup.activeFeature.dbFeature.sharedFeatureName))) { // it is already matching! return it\r\n // cases when vanity MatchingFeature - ['0328001', '0328004', '0328008'] and sink - '0329008'\r\n if (!nextFeatureGroup.activeFeature.metaData[\"MatchingFeature\"]\r\n || (nextFeatureGroup.activeFeature.metaData[\"MatchingFeature\"]\r\n && nextFeatureGroup.activeFeature.metaData[\"MatchingFeature\"].includes(nextSinkSku))) {\r\n return nextFeatureGroup.activeFeature\r\n }\r\n }\r\n\r\n const isQCSink = nextSink.metaData[\"MatchingFeature\"].includes(METADATA.NO);\r\n const {maxWidth, maxTotalWidth} = getSinksWidth(nextSink);\r\n\r\n const allVanities = [...nextFeatureGroup.features, ...nextFeatureGroup.featuresParts];\r\n let matchingVanities = allVanities.filter(testFeature => {\r\n if (!testFeature.metaData[\"MatchingFeature\"]) {\r\n return false\r\n }\r\n if (isQCSink) {\r\n if (!testFeature.metaData[\"MatchingFeature\"].includes(METADATA.NO)) {\r\n return false\r\n }\r\n if (!testFeature.metaData[\"VanityWidth\"]) {\r\n return true // just in case\r\n }\r\n if (nextSink.metaData.layerPosition !== \"C\") { // L or R should be only on double vanity or two separate\r\n return testFeature.metaData[\"VanityWidth\"] === 64\r\n || (testFeature.metaData[\"VanityWidth\"] === 24 && testFeature.metaData[\"VanityWidth\"] > maxWidth\r\n && (testFeature.metaData[\"layerPosition\"] !== \"C\"))\r\n }\r\n if (!maxWidth) {\r\n return true\r\n }\r\n return testFeature.metaData[\"VanityWidth\"] > maxWidth\r\n }\r\n return nextSink.metaData[\"MatchingFeature\"].includes(getSkuWithoutDot(testFeature.dbFeature.sharedFeatureName))\r\n && testFeature.metaData[\"MatchingFeature\"].includes(nextSinkSku)\r\n });\r\n // console.log(\"matchingVanities\", matchingVanities);\r\n if (matchingVanities.length > 1 && nextFeatureGroup.activeFeature) {\r\n // console.log(\"matchingVanities\", matchingVanities);\r\n const currentActiveFeature = matchingVanities.find(feature => feature.dbFeature.id === nextFeatureGroup.activeFeature.dbFeature.id);\r\n if (currentActiveFeature) {\r\n return currentActiveFeature\r\n }\r\n const currentSkuFeature = matchingVanities.find(feature => feature.dbFeature.sharedFeatureName === nextFeatureGroup.activeFeature.dbFeature.sharedFeatureName);\r\n if (currentSkuFeature) {\r\n return currentSkuFeature // to test\r\n }\r\n let currentSideFeatures = matchingVanities.filter(feature => isEqual(feature.metaData[\"Side\"], nextSink.metaData[\"Side\"]));\r\n if (!currentSideFeatures.length) {\r\n currentSideFeatures = matchingVanities.filter(feature => isEqual(feature.metaData[\"Side\"], nextFeatureGroup.activeFeature.metaData[\"Side\"]));\r\n }\r\n if (isQCSink && !currentSideFeatures.length && nextSink.metaData[\"Side\"]) {\r\n if (nextSink.metaData[\"Side\"][0] === \"C\") {\r\n console.log(\"NO VANITY FEATURES WITH C METADATA FOUND\", );\r\n } else if (maxTotalWidth) {\r\n currentSideFeatures = matchingVanities.filter(feature => {\r\n return feature.metaData[\"VanityWidth\"] && feature.metaData[\"VanityWidth\"] > maxTotalWidth\r\n });\r\n console.log(\"currentSideFeatures\", currentSideFeatures);\r\n }\r\n }\r\n const sameColors = currentSideFeatures.filter(feature => feature.getColorName() === nextFeatureGroup.activeFeature.getColorName());\r\n return sameColors[0] || currentSideFeatures[0] || matchingVanities[0]\r\n }\r\n return matchingVanities[0];\r\n}\r\n\r\nconst updateNonCompatibleListWithVanity = (nextSink, nonCompatibleList = []) => {\r\n const layout = getCurrentLayout();\r\n const vanityParent = layout.parts[Vanity.id];\r\n const currentVanityTypeFeatureGroup = vanityParent.relatedItems.find(relItem => relItem.partId === vanityParent.vanity_type);\r\n\r\n if (nextSink.metaData[\"CustomVanityType\"] && nextSink.metaData[\"CustomVanityType\"].includes(vanityParent.vanity_type)) {\r\n // for example currently we have Studio S vanity Cabinet, but it will be changed to Townsend\r\n if (currentVanityTypeFeatureGroup && currentVanityTypeFeatureGroup.activeFeature && nextSink.metaData[\"MatchingFeature\"]\r\n && !nextSink.metaData[\"MatchingFeature\"].includes(getSkuWithoutDot(currentVanityTypeFeatureGroup.activeFeature.dbFeature.sharedFeatureName))) {\r\n const nextVanity = findNextVanityTypeFeature(nextSink, currentVanityTypeFeatureGroup)\r\n // console.log(\"nextVanity\", nextVanity);\r\n if (nextVanity && currentVanityTypeFeatureGroup.activeFeature.dbFeature.id !== nextVanity.dbFeature.id) {\r\n nonCompatibleList.push({\r\n from: currentVanityTypeFeatureGroup.activeFeature,\r\n to: nextVanity,\r\n })\r\n }\r\n }\r\n } else {\r\n // console.log(\"next sink is not compatible, pls check\");\r\n if (nextSink.metaData[\"MountType\"].includes(\"ST\")) {\r\n if (!nonCompatibleList.some(fromToObject => fromToObject.to && fromToObject.to.dbFeature.id === nextSink.dbFeature.id)) {\r\n nonCompatibleList.push({\r\n from: currentVanityTypeFeatureGroup ? currentVanityTypeFeatureGroup.activeFeature : nextSink.getParent().activeFeature,\r\n to: nextSink,\r\n })\r\n }\r\n } else if (nextSink.metaData[\"CustomVanityType\"]) {\r\n const nextFeatureGroup = vanityParent.relatedItems.find(relItem => relItem.partId === nextSink.metaData[\"CustomVanityType\"][0]);\r\n if (nextFeatureGroup) {\r\n const nextVanity = findNextVanityTypeFeature(nextSink, nextFeatureGroup)\r\n // console.log(\"nextVanity\", nextVanity);\r\n const fromFeature = currentVanityTypeFeatureGroup\r\n ? currentVanityTypeFeatureGroup.activeFeature\r\n : nextSink.getParent().activeFeature; // if no vanity_type - it means that standalone sink is selected\r\n if (nextVanity) {\r\n nonCompatibleList.push({\r\n from: fromFeature,\r\n to: nextVanity,\r\n })\r\n }\r\n }\r\n }\r\n }\r\n return nonCompatibleList\r\n}\r\n\r\n/**\r\n * * when clicked on feature - search for same MountHoles sink (to keep selected faucet)\r\n * @param feature {featureInterface}\r\n * @returns {featureInterface}\r\n */\r\nexport const getNextSinkOnWashstandOrConsoleChange = (feature) => {\r\n const layout = getCurrentLayout();\r\n const vanityParent = layout.parts[Vanity.id];\r\n const sinkParent = vanityParent.sink;\r\n const isQcSink = sinkParent && sinkParent.activeFeature && sinkParent.activeFeature.metaData[\"MatchingFeature\"].includes(METADATA.NO)\r\n const forSinkConditions = [{\r\n propName: \"MatchingFeature\",\r\n propValue: isQcSink ? METADATA.NO : getSkuWithoutDot(feature.dbFeature.sharedFeatureName)\r\n }, {\r\n propName: \"FeatureSku\",\r\n propValue: isQcSink ? METADATA.NO : feature.metaData[\"MatchingFeature\"]\r\n }];\r\n if (isQcSink && feature.metaData[\"VanityWidth\"]) {\r\n // QC sink, we should check width\r\n forSinkConditions.push({\r\n propName: \"SinkWidth\",\r\n propValue: feature.metaData[\"VanityWidth\"],\r\n // propData: {\r\n // layerPosition: feature.metaData.layerPosition\r\n // }\r\n })\r\n }\r\n if (sinkParent && sinkParent.activeFeature && !sinkParent.activeFeature.matchesMetaForArrayOfConditions(forSinkConditions)) {\r\n const layout = getCurrentLayout();\r\n const navItems = layout.designNavigationItems({part: sinkParent}, [], \"\", sinkParent.activeFeature);\r\n const nextAvailableSinks = navItems.filter(navItem => navItem.part.matchesMetaForArrayOfConditions(forSinkConditions));\r\n const conditionsToMatch = [{\r\n propName: \"MountHoles\",\r\n propValue: sinkParent.activeFeature.metaData[\"MountHoles\"]\r\n }];\r\n return nextAvailableSinks.length\r\n ? nextAvailableSinks.find(navItem => navItem.part.matchesMetaForArrayOfConditions(conditionsToMatch)) || nextAvailableSinks[0]\r\n : null;\r\n }\r\n return null\r\n}\r\n\r\n/**\r\n * when clicked on washstand or console - search for the same MountHoles sink (to keep selected faucet)\r\n * @param feature {featureInterface}\r\n */\r\nexport const updateSinkWithNewFeature = (feature) => {\r\n const layout = getCurrentLayout();\r\n const vanityParent = layout.parts[Vanity.id];\r\n const sinkParent = vanityParent.sink;\r\n\r\n if (sinkParent && sinkParent.activeFeature) {\r\n const nextSink = getNextSinkOnWashstandOrConsoleChange(feature);\r\n if (nextSink) {\r\n const sinkFeature = nextSink.part;\r\n if (sinkParent.layerPositions && nextSink.part.metaData.layerPosition) {\r\n Object.keys(sinkParent.layerPositions).forEach(position => {\r\n if (position === sinkFeature.metaData.layerPosition) {\r\n sinkParent.layerPositions[position] = sinkFeature\r\n } else if (sinkParent.layerPositions[position]) { // only replace existing\r\n const sameFeature = sinkParent.getMatchingPositionFeature(position, sinkFeature);\r\n sinkParent.layerPositions[position] = sameFeature || null; // if no feature found - erase previous\r\n }\r\n })\r\n }\r\n sinkParent.activeFeature = sinkFeature;\r\n }\r\n }\r\n}\r\n\r\n/**\r\n * checks if feature needs a compatability alert\r\n * @param feature {featureInterface}\r\n * @returns {array}\r\n */\r\nexport const checkForCompatabilityAlert = (feature) => {\r\n if (feature.notAvailableInVisualizer) {\r\n return []\r\n }\r\n if (document.kvConfig.visualizerType !== \"bvLook\") {\r\n if (getCommonVisualizerType() === \"kitchen\") {\r\n switch (feature.partId) {\r\n case \"edge_profile\":\r\n case \"center_island_edge\": {\r\n const matchCounterTopObject = feature.getParent().getMatchingCounterTop(feature);\r\n if (matchCounterTopObject.matchingFeature && !matchCounterTopObject.hasSameName) {\r\n const countertopParent = feature.getParent().getParent().countertop;\r\n return [{\r\n from: countertopParent.activeFeature,\r\n to: matchCounterTopObject.matchingFeature,\r\n }]\r\n }\r\n return []\r\n }\r\n default:\r\n return []\r\n }\r\n }\r\n return []\r\n }\r\n const layout = getCurrentLayout();\r\n const vanityParent = layout.parts[Vanity.id];\r\n const faucetParent = vanityParent.faucet;\r\n const sinkParent = vanityParent.sink;\r\n let nonCompatibleList = [];\r\n\r\n switch (feature.partId) {\r\n case \"vanity_faucet\": {\r\n if (!sinkParent.activeFeature || !sinkParent.activeFeature.matchesMetaForArrayOfConditions(faucetParent.getActiveFeatureConditions(feature))) {\r\n const nextSink = feature.getSinkToClickFromMatchingSinks(sinkParent.activeFeature);\r\n if (nextSink) {\r\n // console.log(\"sink nextSink\", nextSink);\r\n nonCompatibleList.push({\r\n from: sinkParent.activeFeature,\r\n to: nextSink,\r\n });\r\n nonCompatibleList = updateNonCompatibleListWithVanity(nextSink, nonCompatibleList);\r\n return nonCompatibleList\r\n }\r\n }\r\n return []\r\n }\r\n case \"vanity_sink\": {\r\n const clickedSinkConditions = sinkParent.getActiveFeatureConditions(feature);\r\n if (!faucetParent.activeFeature || !faucetParent.activeFeature.matchesMetaForArrayOfConditions(clickedSinkConditions)) {\r\n const navItems = layout.designNavigationItems({part: faucetParent}, [], \"\", faucetParent.activeFeature);\r\n const nextFaucet = navItems.find(navItem => {\r\n return navItem.part.matchesMetaForArrayOfConditions(clickedSinkConditions);\r\n });\r\n console.log(\"nextFaucet\", nextFaucet);\r\n if (nextFaucet) {\r\n nonCompatibleList.push({\r\n from: faucetParent.activeFeature,\r\n to: nextFaucet.part,\r\n });\r\n }\r\n }\r\n nonCompatibleList = updateNonCompatibleListWithVanity(feature, nonCompatibleList);\r\n return nonCompatibleList\r\n }\r\n case \"vanity_cabinet\":\r\n case \"vanity_console\":\r\n case \"vanity_washstand\": {\r\n const nextSink = getNextSinkOnWashstandOrConsoleChange(feature);\r\n if (!sinkParent.activeFeature || (nextSink && nextSink.part.dbFeature.id !== sinkParent.activeFeature.dbFeature.id)) {\r\n if (nextSink) {\r\n // console.log(\"sink nextSink\", nextSink);\r\n nonCompatibleList.push({\r\n from: sinkParent.activeFeature,\r\n to: nextSink.part,\r\n });\r\n const clickedSinkConditions = sinkParent.getActiveFeatureConditions(nextSink.part);\r\n if (!faucetParent.activeFeature || !faucetParent.activeFeature.matchesMetaForArrayOfConditions(clickedSinkConditions)) {\r\n const navItems = layout.designNavigationItems({part: faucetParent}, [], \"\", faucetParent.activeFeature);\r\n const nextFaucet = navItems.find(navItem => {\r\n return navItem.part.matchesMetaForArrayOfConditions(clickedSinkConditions);\r\n });\r\n console.log(\"nextFaucet\", nextFaucet);\r\n if (nextFaucet) {\r\n nonCompatibleList.push({\r\n from: faucetParent.activeFeature,\r\n to: nextFaucet.part,\r\n });\r\n }\r\n }\r\n }\r\n }\r\n return nonCompatibleList\r\n }\r\n case \"shower_arm\": {\r\n const showerArmFeatureGroup = feature.getParent();\r\n const showerParent = showerArmFeatureGroup.getParent();\r\n const showerHeadParent = showerParent.showerHead;\r\n if (!showerHeadParent || !feature.metaData[\"MountPosition\"]) {\r\n return nonCompatibleList\r\n }\r\n const clickedArmConditions = showerArmFeatureGroup.getArrayOfConditions().map(condition => {\r\n if (condition.propName === \"MountPosition\") {\r\n return {\r\n propName: \"MountPosition\",\r\n propValue: feature.metaData[\"MountPosition\"],\r\n }\r\n }\r\n return condition\r\n })\r\n if (!showerHeadParent.activeFeature || !showerHeadParent.activeFeature.matchesMetaForArrayOfConditions(clickedArmConditions)) {\r\n const navItems = layout.designNavigationItems({part: showerHeadParent}, [], \"\", showerHeadParent.activeFeature);\r\n const nextFaucet = navItems.find(navItem => {\r\n return navItem.part.matchesMetaForArrayOfConditions(clickedArmConditions);\r\n });\r\n console.log(\"next shower head\", nextFaucet);\r\n if (nextFaucet) {\r\n nonCompatibleList.push({\r\n from: showerHeadParent.activeFeature,\r\n to: nextFaucet.part,\r\n });\r\n }\r\n }\r\n return nonCompatibleList\r\n }\r\n default:\r\n return nonCompatibleList\r\n }\r\n};\r\n\r\n/**\r\n * returns fabricator settings price logic\r\n * @returns {object}\r\n */\r\nexport const pricingIsLocked = () => {\r\n const {isBackend, jobId, canSaveQuote} = document.kvConfig;\r\n const {fabricatorState, userState} = store.getState();\r\n const {isPhoneNumberValidated} = userState;\r\n const fabricatorSettings = fabricatorState.settings;\r\n\r\n return {\r\n showPrice: fabricatorSettings.showPricing && !fabricatorState.hideCheckoutBreakdownCost && !fabricatorState.hidePricesFromUser,\r\n pricingLocked: fabricatorSettings.leadCapture && !(isBackend && jobId && canSaveQuote) && !isPhoneNumberValidated,\r\n clickLeadCapture: fabricatorSettings.clickLeadCapture,\r\n isLixil: isIframe() && fabricatorState.isLixil\r\n }\r\n}\r\n\r\n\r\n\r\n/**\r\n * checks features and downloads by name if they are missing\r\n * @param missingFeatures {array}\r\n * @param updateCanvas {boolean}\r\n * @param originalPartId {string}\r\n */\r\nexport const getMissingFeaturesAndClickThem = async (missingFeatures = [], updateCanvas = false, originalPartId = \"\") => {\r\n if (!missingFeatures.length) {\r\n return Promise.resolve()\r\n }\r\n window.requestInProcess = true;\r\n loaderEnable();\r\n const layout = getCurrentLayout();\r\n const wallParent = layout.parts[\"Walls\"];\r\n\r\n const pageSize = 9999;\r\n for (let missingFeatureObject of missingFeatures) {\r\n const {relatedItem, navigationItemName, requestFromBackendName} = missingFeatureObject;\r\n const dbName = relatedItem.dbName || relatedItem.partName;\r\n if (relatedItem.additionalPartPartId && wallParent && wallParent.relatedItems.some(relItem => relItem.partId === relatedItem.partId)) {\r\n const cropResponse = await getBvGroupFeatures(dbName + \" Crop\", 0, pageSize, [], requestFromBackendName || navigationItemName);\r\n if (Array.isArray(cropResponse)) {\r\n relatedItem.setGroupFeatures(cropResponse, pageSize, false, \"\", null, true, false);\r\n }\r\n }\r\n if (relatedItem.partId !== originalPartId) { // we need to check crop for current wall! but no need to request the wall itself\r\n const response = await getBvGroupFeatures(dbName, 0, pageSize, [], requestFromBackendName || navigationItemName);\r\n relatedItem.setGroupFeatures(response, pageSize, false, \"\", null, true, false);\r\n }\r\n }\r\n for (let missingFeatureObject of missingFeatures) {\r\n const {relatedItem, navigationItemName, setCurrentFeature, requestFromBackendName} = missingFeatureObject;\r\n const featureFound = layout.designNavigationItems({part: relatedItem}).find(navItem => {\r\n return navItem.part.getSplittedFeatureName() === navigationItemName\r\n });\r\n if (featureFound) {\r\n if (setCurrentFeature) {\r\n relatedItem.activeFeatureBeforeAllWalls = relatedItem.activeFeature;\r\n }\r\n featureFound.part.clickFromAllWalls(true)\r\n }\r\n if (relatedItem.partId !== originalPartId) {\r\n if (!relatedItem.alreadyRequestedFeatureNames) {\r\n relatedItem.alreadyRequestedFeatureNames = [];\r\n }\r\n relatedItem.alreadyRequestedFeatureNames.push(requestFromBackendName || navigationItemName);\r\n }\r\n }\r\n\r\n window.requestInProcess = false;\r\n loaderDisable();\r\n if (updateCanvas) {\r\n store.dispatch(updateCanvasCount());\r\n }\r\n return Promise.resolve()\r\n}\r\n\r\nexport const getShowMatchRadio = (lookFeature) => {\r\n if (LOOK_WALLS_ONLY.includes(lookFeature.partId)) {\r\n return true\r\n }\r\n switch (getCommonVisualizerType()) {\r\n case \"kitchen\":\r\n case \"laundryroom\": {\r\n if (EDGE_GROUP.includes(lookFeature.partId)) {\r\n if (lookFeature.partId === \"edge_profile\") { // back countertop\r\n const layout = getCurrentLayout();\r\n return layout.parts[\"CenterIsland\"] && layout.parts[\"CenterIsland\"].countertop\r\n && !layout.parts[\"CenterIsland\"].countertop.disabled\r\n }\r\n return true\r\n }\r\n if (COUNTERTOP_GROUP.includes(lookFeature.partId) && !CountertopSwitchers.checkForTileBacksplash(lookFeature)) {\r\n return true\r\n }\r\n return CABINET_GROUP.includes(lookFeature.partId)\r\n }\r\n case \"bathroom\":\r\n return CABINET_GROUP_BATHROOM.includes(lookFeature.partId)\r\n || COUNTERTOP_GROUP_BATHROOM.includes(lookFeature.partId)\r\n || HANDLES_GROUP_BATHROOM.includes(lookFeature.partId)\r\n || SHOWER_FLOOR_GROUP_BATHROOM.includes(lookFeature.partId)\r\n default:\r\n return false\r\n }\r\n}\r\n\r\n/**\r\n * returns fabricator settings price logic\r\n * @param lookFeature {featureInterface}\r\n * @returns {allWallsLogicInterface} object\r\n */\r\nexport const getApplyToLogic = (lookFeature) => {\r\n if (!lookFeature || lookFeature.notAvailableInVisualizer) {\r\n return null\r\n }\r\n if (LOOK_WALLS_ONLY.includes(lookFeature.partId)) {\r\n const {lookState} = store.getState();\r\n return {\r\n type: \"walls\",\r\n translateId: \"look.allWalls\",\r\n setApplyToFunction: setLookWallsApplyTo,\r\n applyToArrayAll: LOOK_WALLS_ONLY,\r\n currentApplyToArray: lookState.lookWallsApplyTo,\r\n }\r\n }\r\n switch (getCommonVisualizerType()) {\r\n case \"kitchen\":\r\n case \"laundryroom\": {\r\n if (CABINET_GROUP.includes(lookFeature.partId)) {\r\n const {navigationState} = store.getState();\r\n return {\r\n type: \"cabinets\",\r\n translateId: \"look.allCabinets\",\r\n setApplyToFunction: setCabinetsApplyTo,\r\n applyToArrayAll: CABINET_GROUP,\r\n currentApplyToArray: navigationState.cabinetsApplyTo,\r\n }\r\n } else if (COUNTERTOP_GROUP.includes(lookFeature.partId)) {\r\n const {navigationState} = store.getState();\r\n return {\r\n type: \"countertops\",\r\n translateId: \"look.allCountertops\",\r\n setApplyToFunction: setCountertopsApplyTo,\r\n applyToArrayAll: COUNTERTOP_GROUP,\r\n currentApplyToArray: navigationState.countertopsApplyToArray,\r\n }\r\n } else if (EDGE_GROUP.includes(lookFeature.partId)) {\r\n const {navigationState} = store.getState();\r\n return {\r\n type: \"edges\",\r\n translateId: \"look.allCountertops\",\r\n setApplyToFunction: setEdgesApplyTo,\r\n applyToArrayAll: EDGE_GROUP,\r\n currentApplyToArray: navigationState.edgesApplyTo,\r\n }\r\n }\r\n break;\r\n }\r\n case \"bathroom\": {\r\n if (CABINET_GROUP_BATHROOM.includes(lookFeature.partId) && (document.kvConfig.visualizerType !== \"bvLook\")) {\r\n const {navigationState} = store.getState();\r\n return {\r\n type: \"cabinets\",\r\n translateId: \"look.allCabinets\",\r\n setApplyToFunction: setCabinetsApplyToBathroom,\r\n applyToArrayAll: CABINET_GROUP,\r\n currentApplyToArray: navigationState.cabinetsApplyToBathroom,\r\n }\r\n } else if (COUNTERTOP_GROUP_BATHROOM.includes(lookFeature.partId)) {\r\n const {navigationState} = store.getState();\r\n return {\r\n type: \"countertops\",\r\n translateId: \"look.allCountertops\",\r\n setApplyToFunction: setCountertopsApplyToBathroom,\r\n applyToArrayAll: COUNTERTOP_GROUP_BATHROOM,\r\n currentApplyToArray: navigationState.countertopsApplyToArrayBathroom,\r\n }\r\n } else if (HANDLES_GROUP_BATHROOM.includes(lookFeature.partId)) {\r\n const {navigationState} = store.getState();\r\n return {\r\n type: \"handles\",\r\n translateId: \"look.allCountertops\",\r\n setApplyToFunction: setApplyToCommon,\r\n applyToArrayAll: HANDLES_GROUP_BATHROOM,\r\n currentApplyToArray: navigationState.handlesApplyToBathroom,\r\n }\r\n } else if (SHOWER_FLOOR_GROUP_BATHROOM.includes(lookFeature.partId)) {\r\n const {navigationState} = store.getState();\r\n return {\r\n type: \"showerFloor\",\r\n translateId: \"look.allCountertops\",\r\n setApplyToFunction: setApplyToCommon,\r\n applyToArrayAll: SHOWER_FLOOR_GROUP_BATHROOM,\r\n currentApplyToArray: navigationState.showerFloorApplyToBathroom,\r\n }\r\n }\r\n break;\r\n }\r\n }\r\n\r\n return null\r\n}\r\n\r\n/**\r\n * returns fabricator settings price logic\r\n * @param wallFeature {featureInterface}\r\n * @param applyToLogic {allWallsLogicInterface}\r\n * @param setCurrentFeature {boolean}\r\n */\r\nexport const clickOnSimilarFeatures = async (wallFeature, applyToLogic, setCurrentFeature = false) => {\r\n const layout = getCurrentLayout();\r\n let {type, applyToArrayAll} = applyToLogic;\r\n\r\n const {navigationState, fabricatorState} = store.getState();\r\n if ((type === \"countertops\" && !navigationState.useFeaturesLightRequest.countertops)\r\n || (type === \"cabinets\" && !navigationState.useFeaturesLightRequest.cabinets)) {\r\n if (setCurrentFeature && !fabricatorState.isSolidSurface) {\r\n store.dispatch(applyToLogic.setApplyToFunction([], true, type));\r\n return Promise.resolve()\r\n }\r\n }\r\n\r\n if (type === \"countertops\") {\r\n const featureIsLocked = getFeatureIsLocked(wallFeature);\r\n return CountertopSwitchers.applyAllCountertops(wallFeature, !featureIsLocked, applyToArrayAll, setCurrentFeature);\r\n } else if (type === \"cabinets\") {\r\n const featureIsLocked = getFeatureIsLocked(wallFeature);\r\n return CabinetSwitchers.applyClickTo(wallFeature, !featureIsLocked, applyToArrayAll, setCurrentFeature)\r\n } else {\r\n const navigationItemName = wallFeature.getSplittedFeatureName();\r\n const requestFromBackendName = layout.isNewLayout ? wallFeature.getCountertopGroupsSplittedFeatureName() : wallFeature.getSplittedFeatureName();\r\n // we are looking and matching splitted feature name, because it includes filters, but we request original sharedFeatureName\r\n let missingFeatures = [];\r\n applyToArrayAll.forEach(wallPartId => {\r\n const subPart = layout.getSubPartByPartId(wallPartId);\r\n if (!subPart || (subPart.part.partId === wallFeature.partId)) {\r\n return null\r\n }\r\n const featureFound = layout.designNavigationItems(subPart).find(navItem => {\r\n return navItem.part.getSplittedFeatureName() === navigationItemName\r\n });\r\n if (featureFound) {\r\n if (setCurrentFeature) {\r\n subPart.part.activeFeatureBeforeAllWalls = subPart.part.activeFeature;\r\n }\r\n featureFound.part.clickFromAllWalls(true)\r\n } else if (!subPart.part.alreadyRequestedFeatureNames || !subPart.part.alreadyRequestedFeatureNames.includes(requestFromBackendName)) {\r\n // @param missingFeaturesArray {featureGroupInterface}\r\n // @param navigationItemName {string}\r\n // @param setCurrentFeature {boolean}\r\n missingFeatures.push({relatedItem: subPart.part, navigationItemName, setCurrentFeature, requestFromBackendName})\r\n }\r\n });\r\n if (missingFeatures.length) {\r\n missingFeatures.push({relatedItem: wallFeature.getParent(), navigationItemName, setCurrentFeature, requestFromBackendName})\r\n // we need to check crop for current wall! but no need to request the wall itself\r\n await getMissingFeaturesAndClickThem(missingFeatures, false, wallFeature.partId)\r\n }\r\n return Promise.resolve()\r\n }\r\n}\r\n\r\n/**\r\n * returns fabricator settings price logic\r\n * @param applyToArray {array}\r\n * @param onlyForOneFeatureGroup {object}\r\n */\r\nexport const setActiveFeaturesBeforeAllWalls = (applyToArray = [], onlyForOneFeatureGroup = null) => {\r\n if (onlyForOneFeatureGroup && onlyForOneFeatureGroup.activeFeature) {\r\n onlyForOneFeatureGroup.activeFeatureBeforeAllWalls = onlyForOneFeatureGroup.activeFeature;\r\n return\r\n }\r\n const layout = getCurrentLayout();\r\n applyToArray.forEach(partId => {\r\n const featureGroup = layout.getFeatureGroupByPartId(partId);\r\n if (featureGroup && featureGroup.activeFeature) {\r\n featureGroup.activeFeatureBeforeAllWalls = featureGroup.activeFeature;\r\n }\r\n })\r\n}\r\n\r\nexport const requestAfterRoomChange = async (layout) => {\r\n let promises = [];\r\n const layoutName = layout.getCurrentLayoutAbbreviation();\r\n layout.getFeatures().forEach(parent => {\r\n if (!Array.isArray(parent.relatedItems) || !parent.relatedItems.length) {\r\n return\r\n }\r\n parent.relatedItems.forEach(featureGroup => {\r\n if (featureGroup.allFeaturesReceived\r\n && featureGroup.nextFeaturesPageToLoadArray\r\n && featureGroup.nextFeaturesPageToLoadArray[layoutName]\r\n && !featureGroup.nextFeaturesPageToLoadArray[layoutName].page) {\r\n promises.push(getAdditionalFeaturesOnScroll(featureGroup))\r\n }\r\n })\r\n });\r\n return Promise.all(promises)\r\n}\r\n\r\n\r\n/**\r\n * returns fabricator settings price logic\r\n * @param roomPreset {object}\r\n * @param loadedPresets {array}\r\n */\r\nexport const applyNewPreset = async (roomPreset, loadedPresets) => {\r\n const layout = getCurrentLayout();\r\n if (loadedPresets.includes(roomPreset.id)) {\r\n layout.setActiveFeaturesFromObject(roomPreset, false, false, true, false);\r\n await requestAfterRoomChange(layout);\r\n } else {\r\n await layout.setItemsFromBvState(roomPreset); // requestAfterRoomChange inside\r\n }\r\n return Promise.resolve()\r\n}\r\n\r\nexport const isRoomLayoutsVisible = () => {\r\n return Config.isVisualizerManagement() || Config.isDevMode()\r\n}\r\n\r\n/**\r\n * returns feature group current items quantity depending on layer positions\r\n * @param lookActiveFeature {featureInterface}\r\n * @param featureGroup {featureGroupInterface}\r\n * @return number {number}\r\n */\r\nexport const getFeatureGroupFeaturesQuantity = (lookActiveFeature, featureGroup = null) => {\r\n let featureQuantity = 1;\r\n if (!featureGroup && lookActiveFeature && lookActiveFeature.getParent) {\r\n featureGroup = lookActiveFeature.getParent()\r\n }\r\n if (featureGroup) {\r\n const currentActiveFeature = lookActiveFeature || featureGroup.activeFeature || featureGroup.activeNotInVisualizerFeature\r\n if (currentActiveFeature && currentActiveFeature.dbFeature.defaultQuantity && currentActiveFeature.dbFeature.defaultQuantity !== 1) {\r\n featureQuantity = currentActiveFeature.dbFeature.defaultQuantity;\r\n } else if (featureGroup.layerPositions && (!currentActiveFeature || !currentActiveFeature.notAvailableInVisualizer)) {\r\n // if feature is not available in visualizer > set at least 1 instead of 0 (missing sink in the cart in solid surface wizard issue)\r\n featureQuantity = Object.keys(featureGroup.layerPositions)\r\n .filter(position => !!featureGroup.layerPositions[position]).length\r\n }\r\n }\r\n return featureQuantity\r\n}\r\n","import {Part} from \"./part\";\r\nimport DesignNavigationItem from \"../../../visComponents/designNavigationItem\";\r\nimport {PartMenuType} from \"../../../visComponents/constants\";\r\nimport {LayoutType, ShowerComboTubType} from \"../constants\";\r\nimport { showerTubComboThumbnail, custom60inPonyShower, custom60in30X8Shower } from '../assets';\r\n\r\nimport BathTubLiner from \"../subparts/showerTubCombo/bathtubLiner\";\r\nimport ReplacementTub from \"../subparts/showerTubCombo/replacementTub\";\r\nimport WalkInTub from \"../subparts/showerTubCombo/walkInTub\";\r\nimport JettedTub from \"../subparts/showerTubCombo/jettedTub\";\r\nimport WallConfiguration from \"../subparts/showerTubCombo/wallConfiguration\";\r\nimport {fixDbFeatureProperties} from \"../../../../misc/helpers\";\r\n\r\nexport class ShowerTubCombo extends Part {\r\n static id = 'Shower Tub Combo';\r\n\r\n constructor() {\r\n super(true, false, PartMenuType.Complex);\r\n\r\n this.showerTubComboIsActive = false; // param needed to check if shower is still active or not\r\n this.menuType = PartMenuType.Complex;\r\n this.partThumbnail = showerTubComboThumbnail;\r\n this.partName = 'Shower Tub Combo';\r\n this.translateId = \"visualizer.bathroom.shower_tub_combo\";\r\n this.relatedItems = [];\r\n this.wallConfiguration = null;\r\n this.bathTubLiner = null;\r\n this.replacementTub = null;\r\n this.walkInTub = null;\r\n this.jettedTub = null;\r\n\r\n // Kohler hardcode, they don't have bathtub_liner\r\n this.bottomTub = (document.kvConfig && (document.kvConfig.userId === 133439))\r\n ? ShowerComboTubType.replacement_tub\r\n : ShowerComboTubType.bathtub_liner;\r\n this.leftShowerWallType = 'Pony';\r\n this.showerComboSize = '60in';\r\n\r\n }\r\n\r\n load(dbFeature) {\r\n let relatedItemName = \"\",\r\n RelatedItemClass = null;\r\n switch (dbFeature.groupName) {\r\n case \"Bathtub Liner\":\r\n relatedItemName = \"bathTubLiner\";\r\n RelatedItemClass = BathTubLiner;\r\n break;\r\n case \"Replacement Tub\":\r\n relatedItemName = \"replacementTub\";\r\n RelatedItemClass = ReplacementTub;\r\n break;\r\n case \"Walk In Tub\":\r\n relatedItemName = \"walkInTub\";\r\n RelatedItemClass = WalkInTub;\r\n break;\r\n case \"Jetted Tub\":\r\n relatedItemName = \"jettedTub\";\r\n RelatedItemClass = JettedTub;\r\n break;\r\n }\r\n if (relatedItemName) {\r\n if (!this[relatedItemName]) {\r\n this[relatedItemName] = new RelatedItemClass(true);\r\n this.relatedItems.push(this[relatedItemName]);\r\n }\r\n if (!this.categoryEnabled) {\r\n this.categoryEnabled = true\r\n }\r\n this[relatedItemName].getParent = () => this;\r\n this[relatedItemName].load(dbFeature);\r\n return true\r\n }\r\n return false\r\n }\r\n\r\n setSpecificRules() {\r\n if (!this.wallConfiguration) {\r\n this.wallConfiguration = new WallConfiguration(true);\r\n this.wallConfiguration.counts = {\r\n allLayoutFeaturesCount: 0,\r\n largeLayoutFeaturesCount: 0,\r\n smallLayoutFeaturesCount: 0\r\n };\r\n this.relatedItems.unshift(this.wallConfiguration);\r\n this.wallConfiguration.getParent = () => this;\r\n }\r\n const wallConfigurations = [\r\n ShowerTubCombo.createCustomWallConfiguration(\r\n custom60inPonyShower,\r\n \"Pony Wall 60in\",\r\n \"Pony\",\r\n \"60in\",\r\n {\r\n \"ShowerSize\": ['60in'],\r\n \"CountertopSize\": [\"20in\", \"24in\", \"30in\", \"36in\", \"48in\", \"60in\", \"72in\"],\r\n },\r\n this,\r\n 100000\r\n ),\r\n ShowerTubCombo.createCustomWallConfiguration(\r\n custom60in30X8Shower,\r\n \"Full Wall 60in\",\r\n \"30X8\",\r\n \"60in\",\r\n {\r\n \"ShowerSize\": ['60in'],\r\n \"CountertopSize\": [\"20in\", \"24in\", \"30in\", \"36in\", \"48in\", \"60in\", \"72in\"],\r\n },\r\n this,\r\n 100001\r\n ),\r\n ];\r\n Object.keys(LayoutType).forEach(layoutType => {\r\n this.wallConfiguration.featuresList[layoutType] = wallConfigurations;\r\n this.wallConfiguration.counts[layoutType.toLowerCase() + \"LayoutFeaturesCount\"]++;\r\n });\r\n }\r\n\r\n static createCustomWallConfiguration(customThumbnail, name, leftShowerWallType, showerComboSize, metaData, parent, id) {\r\n const conf = new WallConfiguration();\r\n conf.partName = name;\r\n conf.showerBodyId = name.toLowerCase().replace(/ /gi, \"-\");\r\n conf.dbFeature = {};\r\n conf.featureName = name;\r\n conf.groupName = \"Wall Configuration\";\r\n conf.showerComboSize = showerComboSize;\r\n // conf.parent = parent;\r\n conf.getParent = () => parent.wallConfiguration;\r\n conf.metaData = metaData;\r\n conf.leftShowerWallType = leftShowerWallType;\r\n conf.customThumbnail = customThumbnail;\r\n conf.dbFeature = fixDbFeatureProperties({\r\n metaData,\r\n id,\r\n unlocked: true\r\n });\r\n return conf;\r\n }\r\n\r\n setLayers(layout, placeholdersNeeded) {\r\n\r\n if (!this.showerTubComboIsActive) {\r\n return null\r\n }\r\n\r\n let res = [];\r\n this.getRelatedItems().forEach(relatedItem => {\r\n relatedItem.setLayers(layout);\r\n (placeholdersNeeded && !relatedItem.placeholderChanged && relatedItem.placeholderFeature)\r\n ? relatedItem.placeholderFeature.layer.addTo(res)\r\n : relatedItem.activeFeature ? relatedItem.activeFeature.layer.addTo(res) : null;\r\n });\r\n\r\n return res.length ? res : null;\r\n }\r\n\r\n navigationItem() {\r\n return new DesignNavigationItem('Shower Tub Combo', this)\r\n }\r\n\r\n subParts() {\r\n\r\n let subParts = [\r\n ...this.getRelatedItems().filter(item => item.visible).map(_ => new DesignNavigationItem(_.partName, _)),\r\n ...this.layout.parts.Shower.subParts().filter(subPart => {\r\n return (subPart.text === \"Fixture\")\r\n || (subPart.text === \"Shower Head\")\r\n || (subPart.text === \"Shower Walls\")\r\n || (subPart.text === \"Shower Walls Accent\")\r\n || (subPart.text === \"Shower Door\")\r\n || (subPart.text === \"Handle\")\r\n || (subPart.text === \"Pony Wall\")\r\n || (subPart.text === \"Pony Wall Cap\")\r\n || (subPart.text === \"Pony Wall Glass\")\r\n })\r\n ];\r\n\r\n if (this.bottomTub === ShowerComboTubType.walk_in_tub) {\r\n subParts = subParts.filter(subPart => {\r\n return subPart.part.partId !== \"shower_door\" && subPart.part.partId !== \"shower_door_handle\" && subPart.part.partId !== \"shower_fixture\"\r\n })\r\n }\r\n\r\n return subParts\r\n }\r\n\r\n getShowerRelatedItems() {\r\n return this.layout.parts.Shower.getRelatedItems().filter(relItem => {\r\n return (relItem.partId === \"shower_fixture\")\r\n || (relItem.partId === \"shower_head\")\r\n || (relItem.partId === \"shower_interior_wall\")\r\n || (relItem.partId === \"shower_interior_wall_accent\")\r\n || (relItem.partId === \"shower_door\")\r\n || (relItem.partId === \"shower_door_handle\")\r\n || (relItem.partId === \"pony_wall\")\r\n || (relItem.partId === \"pony_wall_cap\")\r\n || (relItem.partId === \"pony_wall_glass\")\r\n })\r\n }\r\n\r\n setShowerTubCombo() {\r\n this.showerTubComboIsActive = true;\r\n if (this.layout.type === LayoutType.Small) {\r\n const showerParent = this.layout.parts.Shower;\r\n if (showerParent.showerBody && showerParent.showerBody.disabled) { // switch on all Shower features\r\n showerParent.showerBody.disabled = false;\r\n showerParent.showerBody.disabledClick();\r\n this.showerTubComboIsActive = true;\r\n }\r\n }\r\n }\r\n\r\n isSubTypeWithItems() {\r\n return false\r\n }\r\n\r\n handleSubPartClick() {}\r\n\r\n setZIndex(zIndexes) {\r\n if (!this.showerTubComboIsActive) {\r\n return null\r\n }\r\n\r\n if(zIndexes)\r\n this.relatedItems.forEach(_ => _.setZIndex(zIndexes));\r\n }\r\n\r\n setActiveTub(bottomTub) {\r\n this.bottomTub = bottomTub;\r\n }\r\n\r\n showerSize() {\r\n return this.showerComboSize\r\n }\r\n\r\n showerDimensions() {\r\n return this.leftShowerWallType\r\n }\r\n\r\n setShowerSize(leftShowerWallType, showerComboSize) {\r\n this.leftShowerWallType = leftShowerWallType;\r\n this.showerComboSize = showerComboSize;\r\n }\r\n\r\n setDefault() {\r\n // this.relatedItems.forEach(relatedItem => relatedItem.setDefault(layout));\r\n }\r\n\r\n}\r\n","// import $ from \"jquery\";\r\n// import sqftShape from \"./../core/shapes/sqftShape\";\r\nimport sqftConfig from \"./../store/sqftConfig\";\r\nimport sqftStore from \"./sqftStore\";\r\nimport workspace from \"../core/workspace\";\r\nimport {\r\n BACKSPLASH_LABELS,\r\n COUNTERTOP_LABELS,\r\n isDisabledInPopupShouldBeHidden,\r\n MOVABLE_IMAGE_TYPES,\r\n RESOURCE_ATTACHED_TO_TYPE,\r\n SHAPE_PART_ID,\r\n SIDEBAR_NAVIGATION_BUTTONS,\r\n SQFT_CHILD_FEATURE_GROUP_PART_IDS,\r\n SQFT_SHAPES_THAT_ADD_OVERHANG\r\n} from \"../../../constants\";\r\nimport sqftShape from \"../core/shapes/sqftShape\";\r\nimport MovableImage from \"../core/shapes/movableImage\";\r\nimport slabWorkspace from \"../core/slab/slabWorkspace\";\r\nimport {getPointField} from \"../../../helpers/sqftHelper\";\r\nimport ShapeRotatable from \"../core/shapes/shapeParts/shapeRotatable\";\r\nimport ChangeValuePopup from \"../../popup/parts/ChangeValuePopup\";\r\nimport {\r\n addChangeValuePopup,\r\n changeValuePopup,\r\n deleteChangeValuePopup,\r\n //setSQFTActiveButton,\r\n //setSQFTMenuOpened\r\n} from \"../../../../../actions/sqftMenuFunctions\";\r\nimport store from \"../../../../../store\";\r\nimport SqftStore from \"./sqftStore\";\r\nimport {updateSQFTCalculations} from \"../../../../../actions/sqftFunctions\";\r\nimport {isSFTCabinetsGroup} from \"../../../helpers/sqftNavigationHelper\";\r\nimport Rectangle from \"../core/shapes/layouts/rectangle\";\r\nimport {initTitle} from \"../core/controls/labels/labelsHelper\";\r\nimport {SLAB_IMAGE_TYPES} from \"../../../../../reducers/sqftSlabReducer\";\r\nimport sqftShapeIntersectionsManager from \"./sqftShapeIntersectionsManager\";\r\nimport {getCurrentLayout} from \"../../../../appLayout\";\r\nimport {SHAPE_PART_IDS_VISIBLE_ONLY_IN_THE_SLAB_MODE} from \"../../../constantsFeature\";\r\nimport {\r\n areCollinearAndOverlap,\r\n convexHull, removeConsecutiveDuplicates,\r\n roundShapePoints,\r\n unifyShapePoints\r\n} from \"../../../helpers/coordinatesHelper\";\r\n\r\nconst sqftShapeManager = {\r\n shapes: [],\r\n objIds: 0,\r\n addShape: function(segments, shapeType, historyPosition, partId, fromLayout = null, shapeParams = {}) {\r\n const shapeId = workspace.addShape(segments, shapeType, historyPosition, partId, fromLayout, shapeParams);\r\n\r\n const state = store.getState();\r\n const updateCalculations = state.sqftState.updateCalculations;\r\n store.dispatch(updateSQFTCalculations(updateCalculations + 1));\r\n\r\n return shapeId\r\n },\r\n addPlaceholderShape: function(width, height) {\r\n const state = store.getState();\r\n const shouldUseSlabPricing = state.sqftSlabState.isSlabPricingEnabled;\r\n const shapeSegments = new Rectangle(width, height);\r\n const shapeId = sqftShapeManager.addShape(shapeSegments, 'square', null, SHAPE_PART_ID.slabPlaceHolder);\r\n const shape = sqftShapeManager.getShapeById(shapeId);\r\n sqftShapeIntersectionsManager.updateShapesIntersections();\r\n sqftShapeIntersectionsManager.updateSlabPlaceholderFeatureId();\r\n shape.deregisterLineEvents();\r\n shape.setSlabPricing(shouldUseSlabPricing);\r\n initTitle('PLACEHOLDER', SLAB_IMAGE_TYPES.placeholder, shape);\r\n },\r\n getShapeById: function(shapeId) {\r\n return workspace.getShapeById(shapeId);\r\n },\r\n getShapeByIds: function(ids) {\r\n return workspace.getShapes().filter(shape => ids.includes(shape.id));\r\n },\r\n hasSameFeatureId(shapes) {\r\n if (shapes.length === 0) return true;\r\n\r\n const firstFeatureId = shapes[0].featureId;\r\n for (let obj of shapes) {\r\n if (obj.featureId !== firstFeatureId) {\r\n return false;\r\n }\r\n }\r\n\r\n return true;\r\n },\r\n hasSameSharedFeatureName(shapes) {\r\n if (shapes.length === 0) return true;\r\n\r\n const firstFeatureId = shapes[0].featureId;\r\n const layout = getCurrentLayout();\r\n const currentShapeFeature = layout.getFeatureById(firstFeatureId, true);\r\n if (currentShapeFeature) {\r\n const currentShapeFeatureSharedName = currentShapeFeature.dbFeature.sharedFeatureName;\r\n for (let testShape of shapes) {\r\n const testShapeFeature = layout.getFeatureById(testShape.featureId, true);\r\n if (testShapeFeature && testShapeFeature.dbFeature.sharedFeatureName !== currentShapeFeatureSharedName) {\r\n return false;\r\n }\r\n }\r\n }\r\n\r\n return true;\r\n },\r\n removeShapeById: function(shapeId) {\r\n return workspace.removeShapeById(shapeId);\r\n },\r\n setShapeFeature: function (shapeId, visualizerFeature) {\r\n if (visualizerFeature && visualizerFeature.dbFeature) {\r\n let shape = workspace.getShapeById(shapeId);\r\n\r\n if (shape instanceof sqftShape || shape instanceof MovableImage) {\r\n shape.setFeatureId(visualizerFeature.dbFeature.id);\r\n } else if (shape && shape.type === RESOURCE_ATTACHED_TO_TYPE.backsplash) {\r\n const sqftShape = workspace.getShapeById(shape.attachedToParentId);\r\n const line = sqftShape.getLineById(shape.attachedToId);\r\n if (line) {\r\n line.setBacksplashFeatureId(visualizerFeature.dbFeature.id);\r\n }\r\n }\r\n }\r\n },\r\n setShapeFeatureId: function (shapeId, featureId) {\r\n let shape = workspace.getShapeById(shapeId);\r\n\r\n if (shape instanceof sqftShape || shape instanceof MovableImage) {\r\n shape.setFeatureId(featureId);\r\n }\r\n },\r\n setShapeRelatedParentFeatureId: function (shapeId, featureId) {\r\n let shape = workspace.getShapeById(shapeId);\r\n\r\n if (shape instanceof sqftShape || shape instanceof MovableImage) {\r\n shape.relatedParentFeatureId = featureId;\r\n }\r\n },\r\n getCounterTopShapes() {\r\n const shapes = workspace.getShapes();\r\n\r\n return shapes.filter(function(shape) {\r\n const counterTopLabel = Object.keys(COUNTERTOP_LABELS).find(cLabel => cLabel === shape.type);\r\n if (counterTopLabel) {\r\n return true\r\n }\r\n return !shape.type\r\n && !SHAPE_PART_IDS_VISIBLE_ONLY_IN_THE_SLAB_MODE.includes(shape.partId)\r\n });\r\n },\r\n getBacksplashLabeledShapes() {\r\n const shapes = workspace.getShapes();\r\n\r\n return shapes.filter(shp => Object.keys(BACKSPLASH_LABELS).includes(shp.partId));\r\n },\r\n hideSeamShapes: function() {\r\n let shapes = workspace.getShapes();\r\n shapes.forEach(shape => {\r\n if (\r\n shape.isWithShapePieces !== undefined\r\n && shape.isWithShapePieces()\r\n && (isDisabledInPopupShouldBeHidden() ? !shape.isDisabledInPopup : true)\r\n ) {\r\n shape.hideShapePieces()\r\n }\r\n })\r\n },\r\n restoreSeamShapes: function() {\r\n let shapes = workspace.getShapes();\r\n shapes.forEach(shape => {\r\n if (shape.isWithShapePieces !== undefined\r\n && !shape.isWithShapePieces()\r\n && shape.isHidden\r\n && (isDisabledInPopupShouldBeHidden() ? !shape.isDisabledInPopup : true)\r\n ) {\r\n shape.reInitEvents()\r\n }\r\n })\r\n },\r\n hideSlabShapes: function() {\r\n let shapes = workspace.getShapes();\r\n shapes.forEach(shape => {\r\n if (shape.partId === SHAPE_PART_ID.slabPlaceHolder) {\r\n shape.deregisterEvents();\r\n }\r\n })\r\n },\r\n restoreSlabShapes: function() {\r\n let shapes = workspace.getShapes();\r\n shapes.forEach(shape => {\r\n if (shape.partId === SHAPE_PART_ID.slabPlaceHolder) {\r\n shape.reInitEvents();\r\n shape.deregisterLineEvents();\r\n shape.reInitLineTitleEvents();\r\n }\r\n })\r\n },\r\n hideMiteredSections: function() {\r\n const lines = workspace.getLines();\r\n for (const line of lines) {\r\n if (line.isWithMitered()) {\r\n line.miteredOverlay.deregisterEvents();\r\n }\r\n }\r\n },\r\n restoreMiteredSections: function() {\r\n const lines = workspace.getLines();\r\n for (const line of lines) {\r\n if (line.isWithMitered()) {\r\n line.miteredOverlay.reInitEvents();\r\n }\r\n }\r\n },\r\n resetShapeChangesInTheSlabMode: function (shape) {\r\n shape.updateSlabPoints();\r\n shape.removeShapePieces();\r\n shape.setShapePieces([]);\r\n shape.shapeSlab.setRotationDegreesSlab(0);\r\n slabWorkspace.slabAdditionalShapes.removeAllActiveBacksplashesAttachedToShape(shape);\r\n },\r\n checkForUpdateSlabPoints: function() {\r\n let shapes = workspace.getShapes();\r\n shapes.forEach(shape => {\r\n if (shape instanceof sqftShape\r\n && ![SHAPE_PART_ID.seamPiece, SHAPE_PART_ID.slabPlaceHolder].includes(shape.partId)\r\n ) {\r\n if (shape.isPointsChanged) {\r\n shape.isPointsChanged = false;\r\n sqftShapeManager.resetShapeChangesInTheSlabMode(shape);\r\n }\r\n }\r\n })\r\n },\r\n checkForUpdateSlabPosition: function() {\r\n let shapes = workspace.getShapes();\r\n shapes.forEach(shape => {\r\n if (shape instanceof sqftShape\r\n && ![SHAPE_PART_ID.seamPiece, SHAPE_PART_ID.slabPlaceHolder].includes(shape.partId)\r\n ) {\r\n if (shape.isPositionChanged) {\r\n shape.updateSlabPosition();\r\n shape.isPositionChanged = false;\r\n slabWorkspace.slabAdditionalShapes.removeAllActiveBacksplashesAttachedToShape(shape);\r\n }\r\n }\r\n })\r\n },\r\n hideCorePieceShapes: function() {\r\n let shapes = workspace.getShapes();\r\n shapes.forEach(shape => {\r\n if (shape.isWithShapePieces !== undefined\r\n && shape.isWithShapePieces()\r\n && !shape.isHidden\r\n && ![SHAPE_PART_ID.seamPiece, SHAPE_PART_ID.slabPlaceHolder].includes(shape.partId)\r\n && (isDisabledInPopupShouldBeHidden() ? !shape.isDisabledInPopup : true)\r\n ) {\r\n shape.deregisterEvents()\r\n }\r\n })\r\n },\r\n restoreCorePieceShapes: function() {\r\n let shapes = workspace.getShapes();\r\n shapes.forEach(shape => {\r\n if (shape.isWithShapePieces !== undefined\r\n && shape.isWithShapePieces()\r\n && shape.isHidden\r\n && ![SHAPE_PART_ID.seamPiece, SHAPE_PART_ID.slabPlaceHolder].includes(shape.partId)\r\n && (isDisabledInPopupShouldBeHidden() ? !shape.isDisabledInPopup : true)\r\n ) {\r\n shape.reInitEvents()\r\n }\r\n })\r\n },\r\n hideShapeParts: function(shouldSkipSlabPlaceHolders = true) {\r\n let shapes = workspace.getShapes();\r\n shapes.forEach(shape => {\r\n if (shape instanceof sqftShape\r\n && (isDisabledInPopupShouldBeHidden() ? !shape.isDisabledInPopup : true)\r\n && (shouldSkipSlabPlaceHolders && shape.partId !== SHAPE_PART_ID.slabPlaceHolder)\r\n ) {\r\n shape.deregisterPartEvents()\r\n }\r\n })\r\n },\r\n restoreShapeParts: function() {\r\n let shapes = workspace.getShapes();\r\n shapes.forEach(shape => {\r\n if (shape instanceof sqftShape\r\n && ![SHAPE_PART_ID.seamPiece, SHAPE_PART_ID.slabPlaceHolder].includes(shape.partId)\r\n && (isDisabledInPopupShouldBeHidden() ? !shape.isDisabledInPopup : true)\r\n ) {\r\n shape.reInitPartEvents()\r\n }\r\n })\r\n },\r\n // reInitMeasurementsInTheSlabMode: function() {\r\n // const state = store.getState();\r\n // const isMeasurementVisibleInSlabMode = state.sqftSlabState.isMeasurementVisibleInSlabMode;\r\n // if (isMeasurementVisibleInSlabMode) {\r\n // initAllLineLength()\r\n // }\r\n // },\r\n undoSeam: function() {\r\n let seamHistory = sqftStore.getSeamHistory();\r\n if (seamHistory.length <= 0) {\r\n return\r\n }\r\n let latestShape = seamHistory.pop();\r\n for (let i = latestShape.shapePieces.length - 1; i >= 0; i--) {\r\n let shp = workspace.getShapeById(latestShape.shapePieces[i]);\r\n workspace.removeShape(shp);\r\n }\r\n latestShape.setShapePieces([]);\r\n latestShape.reInitEvents();\r\n },\r\n resetAllSeams: function() {\r\n this.restoreCorePieceShapes();\r\n this.hideShapeParts();\r\n let shapes = workspace.getShapes();\r\n for (let i = shapes.length - 1; i >= 0; i--) {\r\n if (shapes[i] instanceof sqftShape) {\r\n if (shapes[i].partId === SHAPE_PART_ID.seamPiece) {\r\n workspace.removeShape(shapes[i]);\r\n } else if (shapes[i].isWithShapePieces()) {\r\n shapes[i].setShapePieces([])\r\n }\r\n }\r\n }\r\n sqftStore.setSeamHistory([])\r\n },\r\n getVisibleCenter: function () {\r\n // console.log('sqftStore.ctxCenter', sqftStore.ctxCenter);\r\n // console.log('sqftStore.canvas', sqftStore.canvas);\r\n // console.log('sqftStore.scale', sqftConfig.scale);\r\n return {\r\n x: (sqftStore.ctxCenter.x + (sqftStore.canvas.width / 2)) / sqftConfig.scale,\r\n y: (sqftStore.ctxCenter.y + (sqftStore.canvas.height / 2)) / sqftConfig.scale\r\n }\r\n },\r\n getMinMax: (segments) => {\r\n let minX = null, maxX = 0;\r\n let minY = null, maxY = 0;\r\n for (let i = 0; i < segments.length; i++) {\r\n let s = segments[i];\r\n if (minX === null || s.from.x < minX)\r\n minX = s.from.x;\r\n if (s.from.x > maxX)\r\n maxX = s.from.x;\r\n if (minY === null || s.from.y < minY)\r\n minY = s.from.y;\r\n if (s.from.y > maxY)\r\n maxY = s.from.y\r\n }\r\n return {\r\n width: maxX - minX,\r\n height: maxY - minY,\r\n x: {\r\n min: minX,\r\n max: maxX\r\n },\r\n y: {\r\n min: minY,\r\n max: maxY\r\n }\r\n };\r\n },\r\n getMinMaxWorkspacePoints: (workspace, isIncludeBumpout = true) => {\r\n let from;\r\n let to;\r\n let minX = null;\r\n let maxX = null;\r\n let minY = null;\r\n let maxY = null;\r\n let offset = workspace.getOffset();\r\n let shapes = workspace.getShapes();\r\n for (let i = 0; i < shapes.length; i++) {\r\n let shape = shapes[i];\r\n if (shape.getLines) {\r\n let lines = shape.getLines();\r\n for (let n = 0; n < lines.length; n++) {\r\n from = lines[n].from.getPointField();\r\n to = lines[n].to.getPointField();\r\n\r\n if (minX === null) {\r\n minX = from.x < to.x ? from.x : to.x;\r\n maxX = from.x > to.x ? from.x : to.x;\r\n minY = from.y < to.y ? from.y : to.y;\r\n maxY = from.y > to.y ? from.y : to.y;\r\n }\r\n\r\n if (isIncludeBumpout && lines[n].isWithBumpout && lines[n].isWithBumpout()) {\r\n [minX, maxX, minY, maxY] = sqftShapeManager.getMinMaxBumpoutPoints(lines[n], minX, maxX, minY, maxY);\r\n }\r\n\r\n minX = from.x < minX ? from.x : minX;\r\n maxX = from.x > maxX ? from.x : maxX;\r\n minX = to.x < minX ? to.x : minX;\r\n maxX = to.x > maxX ? to.x : maxX;\r\n\r\n minY = from.y < minY ? from.y : minY;\r\n maxY = from.y > maxY ? from.y : maxY;\r\n minY = to.y < minY ? to.y : minY;\r\n maxY = to.y > maxY ? to.y : maxY;\r\n }\r\n }\r\n }\r\n\r\n return {\r\n minX : minX - offset.x,\r\n maxX : maxX - offset.x,\r\n minY : minY - offset.y,\r\n maxY : maxY - offset.y\r\n }\r\n },\r\n disableRotatableStateForAllShapes: () => {\r\n const shapes = workspace.getShapes();\r\n for (const shape of shapes) {\r\n if (shape instanceof sqftShape && shape.shapeRotatable) {\r\n sqftShapeManager.disableRotatableState(shape);\r\n }\r\n }\r\n },\r\n canShapeBeRotated: (shape) => {\r\n const isShapeCanBeRotated = shape instanceof sqftShape\r\n && shape.shapePieces.length === 0\r\n && !shape.isDisabledInPopup\r\n && !(shape.isWithBumpout() || shape.isWithMitered())\r\n ;\r\n const isMovableImageCanBeRotated = shape instanceof MovableImage && shape.type !== MOVABLE_IMAGE_TYPES.slabImage;\r\n return isShapeCanBeRotated || isMovableImageCanBeRotated\r\n },\r\n closeRotatablePopups: () => {\r\n const shapes = workspace.getShapes();\r\n shapes.forEach(shape => {\r\n if (shape.getIsRotatable && shape.getIsRotatable()) {\r\n sqftShapeManager.disableRotatableState(shape);\r\n }\r\n })\r\n },\r\n disableRotatableState: (shape) => {\r\n shape.setIsRotatable(false);\r\n shape.shapeRotatable.reInitShapePoints();\r\n shape.shapeRotatable.destroy();\r\n shape.shapeRotatable = null;\r\n store.dispatch(deleteChangeValuePopup('shape' + shape.id));\r\n },\r\n setShapeAsRotatable: (shape) => {\r\n const isSlabMode = SqftStore.isSlabMode();\r\n // todo fix rotation of slab images in slab mode\r\n if (shape instanceof MovableImage && shape.type === MOVABLE_IMAGE_TYPES.slabImage && isSlabMode) {\r\n return\r\n }\r\n shape.shapeRotatable = new ShapeRotatable(shape);\r\n shape.setIsRotatable(true);\r\n const shapeOffset = shape.getOffset();\r\n const isCabinet = isSFTCabinetsGroup();\r\n let changeValuePopupPosition;\r\n if (isCabinet) {\r\n const shapeHeight = shape instanceof MovableImage ? shape.getHeight(): shape.shapeCabinet.getShapeHeight();\r\n const shapeWidth = shape instanceof MovableImage ? shape.getWidth() : shape.shapeCabinet.getShapeWidth();\r\n changeValuePopupPosition = {left: shapeOffset.x, top: shapeOffset.y - (shapeHeight + shapeWidth) * sqftConfig.scale / 2}\r\n } else {\r\n changeValuePopupPosition = {left: shapeOffset.x, top: shapeOffset.y}\r\n }\r\n\r\n const changeRotatedDegreeValuePopup = new ChangeValuePopup(\r\n 'shape' + shape.id,\r\n 0,\r\n 360,\r\n () => {\r\n sqftConfig.workspace.menuItemActive = SIDEBAR_NAVIGATION_BUTTONS.move\r\n sqftShapeManager.disableRotatableState(shape);\r\n //store.dispatch(setSQFTMenuOpened(''));\r\n //store.dispatch(setSQFTActiveButton(SIDEBAR_NAVIGATION_BUTTONS.rotate));\r\n },\r\n () => {\r\n const state = store.getState();\r\n const valuePopup = state.sqftMenuState.changeValuePopups.find(valuePopup => valuePopup.id === 'shape' + shape.id);\r\n shape.rotate(1, shape.Direction.LEFT, isSlabMode);\r\n const newValuePopup = {...valuePopup, value: isSlabMode ? shape.rotatedDegreesSlab : shape.rotatedDegrees};\r\n store.dispatch(changeValuePopup(newValuePopup));\r\n },\r\n () => {\r\n const state = store.getState();\r\n const valuePopup = state.sqftMenuState.changeValuePopups.find(valuePopup => valuePopup.id === 'shape' + shape.id);\r\n const value = (isSlabMode ? shape.rotatedDegreesSlab : shape.rotatedDegrees) - 1 < 0 ? 359 : -1 ;\r\n shape.rotate(value, shape.Direction.LEFT, isSlabMode);\r\n store.dispatch(changeValuePopup({...valuePopup, value: isSlabMode ? shape.rotatedDegreesSlab : shape.rotatedDegrees}));\r\n },\r\n (e) => {\r\n const state = store.getState();\r\n const valuePopup = state.sqftMenuState.changeValuePopups.find(valuePopup => valuePopup.id === 'shape' + shape.id);\r\n const value = parseInt(e.target.value);\r\n if (Number.isInteger(value) && 359 > value > 0) {\r\n shape.rotate(value - (isSlabMode ? shape.rotatedDegreesSlab : shape.rotatedDegrees), shape.Direction.LEFT, isSlabMode);\r\n isSlabMode ? shape.rotatedDegreesSlab = value : shape.rotatedDegrees = value;\r\n store.dispatch(changeValuePopup({...valuePopup, value: value}));\r\n }\r\n },\r\n isSlabMode ? shape.rotatedDegreesSlab : shape.rotatedDegrees,\r\n changeValuePopupPosition\r\n );\r\n store.dispatch(addChangeValuePopup(changeRotatedDegreeValuePopup));\r\n },\r\n\r\n rotateShapeTo90Deg: (shape) => {\r\n // Check if the slab mode is active\r\n const isSlabMode = SqftStore.isSlabMode();\r\n const state = store.getState();\r\n\r\n // Find the corresponding popup for changing shape values\r\n const valuePopup = state.sqftMenuState.changeValuePopups.find(valuePopup => valuePopup.id === 'shape' + shape.id);\r\n\r\n // Determine the current rotation angle\r\n const currentRotation = isSlabMode ? shape.rotatedDegreesSlab : shape.rotatedDegrees;\r\n\r\n\r\n if ([0, 90, 180, 270, 360].includes(currentRotation)) {\r\n // Calculate the new rotation angle, adding 90 degrees and ensuring it wraps around after 360\r\n const newRotation = (currentRotation + 90) % 360;\r\n\r\n // Rotate the shape by the difference between the new and current rotation angles\r\n shape.rotate(newRotation - currentRotation, shape.Direction.LEFT, isSlabMode);\r\n\r\n // Update the shape's rotation angle based on whether slab mode is active\r\n if (isSlabMode) {\r\n shape.rotatedDegreesSlab = newRotation;\r\n } else {\r\n shape.rotatedDegrees = newRotation;\r\n }\r\n\r\n store.dispatch(changeValuePopup({...valuePopup, value: newRotation}));\r\n }\r\n },\r\n\r\n getShapeCornerPoints: () => {\r\n //todo\r\n },\r\n getMinMaxBumpoutPoints: (line, minX, maxX, minY, maxY, isPointOnField) => {\r\n let bumpoutPoints = line.bumpoutOverlay.getBumpoutPoints();\r\n let pointField;\r\n if (isPointOnField) {\r\n pointField = getPointField(bumpoutPoints.dragPoint.x, bumpoutPoints.dragPoint.y, line.getParent())\r\n } else {\r\n pointField = bumpoutPoints.dragPoint\r\n }\r\n minX = pointField.x < minX ? pointField.x : minX;\r\n maxX = pointField.x > maxX ? pointField.x : maxX;\r\n minY = pointField.y < minY ? pointField.y : minY;\r\n maxY = pointField.y > maxY ? pointField.y : maxY;\r\n\r\n return [minX, maxX, minY, maxY]\r\n },\r\n getMinMaxShapesPointsOnWorkspace: (shapes, shouldGetRegularPosition = false) => {\r\n if (shapes.length > 0) {\r\n let shapesPoints = [];\r\n shapes.forEach(shp => {\r\n if (shp.getPointsPosOnWorkspace) {\r\n shapesPoints.push(...shp.getPointsPosOnWorkspace(shouldGetRegularPosition));\r\n }\r\n });\r\n let pointsMinMax = sqftShapeManager.getMinMaxPoints(shapesPoints, false);\r\n\r\n //console.log(\"shapesMinMax\", pointsMinMax);\r\n\r\n return [\r\n {x: pointsMinMax.minX, y: pointsMinMax.minY},\r\n {x: pointsMinMax.maxX, y: pointsMinMax.minY},\r\n {x: pointsMinMax.maxX, y: pointsMinMax.maxY},\r\n {x: pointsMinMax.minX, y: pointsMinMax.maxY}\r\n ];\r\n }\r\n return []\r\n },\r\n getShapesConvexHullPointsOnWorkspace: (shapes) => {\r\n if (shapes.length > 0) {\r\n let shapesPoints = [];\r\n shapes.forEach(shp => {\r\n shapesPoints.push(...shp.getPointsPosOnWorkspace());\r\n });\r\n return convexHull(shapesPoints);\r\n }\r\n return []\r\n },\r\n getShapesConvexHullPointsPointField: (shapes) => {\r\n if (shapes.length > 0) {\r\n let shapesPoints = [];\r\n shapes.forEach(shp => {\r\n shapesPoints.push(...shp.getPointsPointField());\r\n });\r\n return convexHull(shapesPoints);\r\n }\r\n return []\r\n },\r\n getShapesContourPointsOnWorkspace: (shapes, shoudRemoveRepeatingPoints = true) => {\r\n if (shapes.length > 0) {\r\n const shapesPointsOnWorkspace = shapes.map(shp => {\r\n return shp.getPointsPosOnWorkspace();\r\n });\r\n const unifiedPoints = unifyShapePoints(shapesPointsOnWorkspace);\r\n if (shoudRemoveRepeatingPoints) {\r\n removeConsecutiveDuplicates(unifiedPoints);\r\n }\r\n return unifiedPoints\r\n }\r\n return []\r\n },\r\n getShapesOverhangOnWorkspace: (contourPoints, snappedShapes, minOverlap = 2) => {\r\n const shapes = workspace.getShapes();\r\n const overhangShapes = shapes.filter(shp => {\r\n const canShapeCreateOverhang = SQFT_SHAPES_THAT_ADD_OVERHANG.includes(shp.subType) || SQFT_SHAPES_THAT_ADD_OVERHANG.includes(shp.partId);\r\n const isShapeInsideSnappedShapes = snappedShapes.includes(shp);\r\n return canShapeCreateOverhang && !isShapeInsideSnappedShapes\r\n }\r\n );\r\n let results = new Array(contourPoints.length ? contourPoints.length - 1 : 0).fill(true);\r\n\r\n if (overhangShapes.length > 0) {\r\n for (const overhangShape of overhangShapes) {\r\n const pointsPosOnWorkspace = overhangShape.getPointsPosOnWorkspace();\r\n const roundedPoints = roundShapePoints(pointsPosOnWorkspace);\r\n roundedPoints.push(roundedPoints[0]); //close polygon\r\n\r\n for (let i = 0; i < contourPoints.length - 1; i++) {\r\n const cp1 = contourPoints[i];\r\n const cp2 = contourPoints[i + 1];\r\n for (let j = 0; j < roundedPoints.length - 1; j++) {\r\n const rp1 = roundedPoints[j];\r\n const rp2 = roundedPoints[j + 1];\r\n if (areCollinearAndOverlap(cp1, cp2, rp1, rp2, minOverlap)) {\r\n results[i] = false;\r\n break;\r\n }\r\n }\r\n }\r\n }\r\n }\r\n //debugger // eslint-disable-line no-debugger\r\n return results\r\n },\r\n getShapesContourPointsPointField: (shapes) => {\r\n if (shapes.length > 0) {\r\n const shapesPointField = shapes.map(shp => {\r\n return shp.getPointsPointField();\r\n });\r\n return unifyShapePoints(shapesPointField);\r\n }\r\n return []\r\n },\r\n getMinMaxShapePoints: (shape, isIncludeBumpout = true, isPointOnField = true) => {\r\n let from;\r\n let to;\r\n let minX = null;\r\n let maxX = null;\r\n let minY = null;\r\n let maxY = null;\r\n let lines = shape.getLines();\r\n //let offset = workspace.getOffset();\r\n\r\n for (let n = 0; n < lines.length; n++) {\r\n if (isPointOnField) {\r\n from = getPointField(lines[n].from.x, lines[n].from.y, shape);\r\n to = getPointField(lines[n].to.x, lines[n].to.y, shape);\r\n } else {\r\n from = lines[n].from;\r\n to = lines[n].to;\r\n }\r\n\r\n if (minX === null) {\r\n minX = from.x < to.x ? from.x : to.x;\r\n maxX = from.x > to.x ? from.x : to.x;\r\n minY = from.y < to.y ? from.y : to.y;\r\n maxY = from.y > to.y ? from.y : to.y;\r\n }\r\n\r\n if (isIncludeBumpout && lines[n].isWithBumpout()) {\r\n [minX, maxX, minY, maxY] = sqftShapeManager.getMinMaxBumpoutPoints(lines[n], minX, maxX, minY, maxY , isPointOnField);\r\n }\r\n\r\n minX = from.x < minX ? from.x : minX;\r\n maxX = from.x > maxX ? from.x : maxX;\r\n minX = to.x < minX ? to.x : minX;\r\n maxX = to.x > maxX ? to.x : maxX;\r\n\r\n minY = from.y < minY ? from.y : minY;\r\n maxY = from.y > maxY ? from.y : maxY;\r\n minY = to.y < minY ? to.y : minY;\r\n maxY = to.y > maxY ? to.y : maxY;\r\n }\r\n\r\n return {\r\n minX : minX,\r\n maxX : maxX,\r\n minY : minY,\r\n maxY : maxY\r\n }\r\n },\r\n getMinMaxPoints: (points, isPointOnField = true) => {\r\n let point;\r\n let minX = null;\r\n let maxX = null;\r\n let minY = null;\r\n let maxY = null;\r\n\r\n for (let n = 0; n < points.length; n++) {\r\n if (isPointOnField) {\r\n point = getPointField(points[n].x, points[n].y, points[n].getGrandParent ? points[n].getGrandParent(): workspace);\r\n } else {\r\n point = points[n];\r\n }\r\n\r\n if (minX === null) {\r\n minX = point.x;\r\n maxX = point.x;\r\n minY = point.y;\r\n maxY = point.y;\r\n }\r\n\r\n minX = point.x < minX ? point.x : minX;\r\n maxX = point.x > maxX ? point.x : maxX;\r\n minY = point.y < minY ? point.y : minY;\r\n maxY = point.y > maxY ? point.y : maxY;\r\n }\r\n\r\n return {\r\n minX : minX,\r\n maxX : maxX,\r\n minY : minY,\r\n maxY : maxY\r\n }\r\n },\r\n setIsDisabledShapeInPopup: (id, isDisabledInPopup) => {\r\n let shape = sqftShapeManager.getShapeById(id);\r\n if (shape) {\r\n shape.isDisabledInPopup = isDisabledInPopup;\r\n if (isDisabledInPopupShouldBeHidden()) {\r\n if (isDisabledInPopup && shape.deregisterEvents) {\r\n shape.deregisterEvents()\r\n shape.shapeSlab.resetShapeSeams();\r\n } else if (shape.reInitEvents) {\r\n shape.reInitEvents();\r\n }\r\n }\r\n }\r\n },\r\n getSnappedShapes: (snappedShapeGroup) => {\r\n const shapes = workspace.getShapes();\r\n return shapes.filter(shp => {\r\n return !!(shp.shapeAbsolute && (shp.shapeAbsolute.getSnappedShapeGroup() === snappedShapeGroup))\r\n })\r\n },\r\n\r\n changeShapesFeatureIDIfColorWasChanged: (feature) => {\r\n if (feature && feature.partId) {\r\n const shapes = workspace.getShapes();\r\n const partId = Object.keys(SQFT_CHILD_FEATURE_GROUP_PART_IDS).includes(feature.partId)\r\n ? SQFT_CHILD_FEATURE_GROUP_PART_IDS[feature.partId]\r\n : feature.partId;\r\n\r\n //also include spacers\r\n const filteredShapes = shapes.filter(shape => shape.partId === partId || shape.parentPartId === partId );\r\n filteredShapes.forEach((shape) => {\r\n if (shape instanceof sqftShape) {\r\n shape.changeFeatureIdIfColorWasChanged(feature);\r\n }\r\n })\r\n }\r\n },\r\n updateShapeColorSet: (shapeId) => {\r\n const shape = workspace.getShapeById(shapeId);\r\n if (shape instanceof sqftShape) {\r\n shape.updateColorSet();\r\n }\r\n },\r\n updateMinMaxMiteredPoints: (shape) => {\r\n const lines = shape.getLines();\r\n for (const line of lines) {\r\n if (line.isWithMitered()) {\r\n line.miteredOverlay.updateMinMaxPoints();\r\n }\r\n }\r\n }\r\n};\r\n\r\nexport default sqftShapeManager\r\n","//********* NAVIGATION *********//\r\nimport * as types from \"./actionTypes\";\r\n\r\nexport const toggleDesktopNavigation = (desktopNavigationOpened = false) => ({\r\n type: types.TOGGLE_DESKTOP_NAVIGATION,\r\n payload: {desktopNavigationOpened}\r\n});\r\n\r\nexport const setNavigationViewType = (navigationViewType = 3) => ({\r\n type: types.SET_NAVIGATION_VIEW_TYPE,\r\n payload: {navigationViewType}\r\n});\r\n\r\nexport const setActiveNavigationNames = (activeNavigationParentName, activeNavigationChildName) => ({\r\n type: types.SET_ACTIVE_NAVIGATION_NAMES,\r\n payload: {activeNavigationParentName, activeNavigationChildName}\r\n});\r\n\r\nexport const setNavigationLoading = (navigationLoadingActive) => ({\r\n type: types.SET_NAVIGATION_LOADING,\r\n payload: {navigationLoadingActive}\r\n});\r\n\r\n// MODULE\r\nexport const setModuleContextMenuType = (moduleContextMenuType) => ({\r\n type: types.SET_MODULE_CONTEXT_MENU_TYPE,\r\n payload: {moduleContextMenuType}\r\n});\r\nexport const setModuleContextMenuDirection = (moduleContextMenuDirection) => ({\r\n type: types.SET_MODULE_CONTEXT_MENU_DIRECTION,\r\n payload: {moduleContextMenuDirection}\r\n});\r\nexport const setModuleContextMenuModule = (moduleContextMenuModule) => ({\r\n type: types.SET_MODULE_CONTEXT_MENU_MODULE,\r\n payload: {moduleContextMenuModule}\r\n});\r\nexport const setModuleContextMenuModulePart = (moduleContextMenuModulePart) => ({\r\n type: types.SET_MODULE_CONTEXT_MENU_MODULE_PART,\r\n payload: {moduleContextMenuModulePart}\r\n});\r\n\r\n// CABINET MODULE FILTERS\r\nexport const setActiveNavigationFilter = (activeNavigationFilter) => ({\r\n type: types.SET_ACTIVE_NAVIGATION_FILTER,\r\n payload: {activeNavigationFilter}\r\n});\r\nexport const setActiveNavigationFilterStepIndex = (activeNavigationFilterStepIndex) => ({\r\n type: types.SET_ACTIVE_NAVIGATION_FILTER_STEP_INDEX,\r\n payload: {activeNavigationFilterStepIndex}\r\n});\r\nexport const setCabinetNavigationFilterCompleted = (cabinetNavigationFilterCompleted) => ({\r\n type: types.SET_CABINET_NAVIGATION_FILTER_COMPLETED,\r\n payload: {cabinetNavigationFilterCompleted}\r\n});\r\n\r\n//COUNTERTOP WIZARD\r\nexport const setCountertopNavigationFilterCompleted = (countertopNavigationFilterCompleted) => ({\r\n type: types.SET_COUNTERTOP_NAVIGATION_FILTER_COMPLETED,\r\n payload: {countertopNavigationFilterCompleted}\r\n});\r\nexport const setCountertopWizard = (countertopWizard) => ({\r\n type: types.SET_COUNTERTOP_WIZARD,\r\n payload: {countertopWizard}\r\n});\r\nexport const setCabinetsApplyTo = (cabinetsApplyTo) => ({\r\n type: types.SET_CABINETS_APPLY_TO,\r\n payload: {cabinetsApplyTo}\r\n});\r\nexport const setCabinetsApplyToBathroom = (cabinetsApplyToBathroom) => ({\r\n type: types.SET_CABINETS_APPLY_TO_BATHROOM,\r\n payload: {cabinetsApplyToBathroom}\r\n});\r\nexport const setCountertopsApplyTo = (countertopsApplyTo, newArrayLogic = false) => ({\r\n type: types.SET_COUNTERTOPS_APPLY_TO,\r\n payload: {countertopsApplyTo, newArrayLogic}\r\n});\r\nexport const setCountertopsApplyToBathroom = (countertopsApplyToBathroom, newArrayLogic = false) => ({\r\n type: types.SET_COUNTERTOPS_APPLY_TO_BATHROOM,\r\n payload: {countertopsApplyToBathroom, newArrayLogic}\r\n});\r\nexport const setApplyToCommon = (arrayToChange, isNewNotUsed, type) => {\r\n let arrayPropertyToChange = \"test\";\r\n switch (type) {\r\n case \"handles\":\r\n arrayPropertyToChange = \"handlesApplyToBathroom\";\r\n break;\r\n case \"showerFloor\":\r\n arrayPropertyToChange = \"showerFloorApplyToBathroom\";\r\n break;\r\n default:\r\n console.error(\"setApplyTo function no type passed\", type);\r\n break;\r\n }\r\n return {\r\n type: types.SET_APPLY_TO_COMMON,\r\n payload: {\r\n [arrayPropertyToChange]: arrayToChange,\r\n }\r\n }\r\n};\r\nexport const setEdgesApplyTo = (edgesApplyTo) => ({\r\n type: types.SET_EDGES_APPLY_TO,\r\n payload: {edgesApplyTo}\r\n});\r\n\r\n// TOGGLE DISABLED RADIO\r\nexport const toggleUpdateDisableFeatureGroupRadio = (updateDisableFeatureGroupRadio) => ({\r\n type: types.UPDATE_DISABLE_FEATURE_GROUP_RADIO,\r\n payload: {updateDisableFeatureGroupRadio}\r\n});\r\n\r\n// TOGGLE DISABLED RADIO\r\nexport const toggleNavItemPositionModal = (navItemPositionModal) => ({\r\n type: types.TOGGLE_NAV_ITEM_POSITION_MODAL,\r\n payload: {navItemPositionModal}\r\n});\r\n\r\nexport const setUseFeaturesLightRequest = (useFeaturesLightRequest) => ({\r\n type: types.SET_USE_FEATURES_LIGHT_REQUEST,\r\n payload: {useFeaturesLightRequest}\r\n});\r\n","import {getFeatureCost, isIE} from \"./helpers\";\r\nimport Config, {IS_LIXIL_SERVERS} from \"../config\";\r\nimport graniteTransformationUkSubDomains from \"./graniteTransformationUkSubDomains\";\r\n\r\nexport const LOWES_DISCLAIMER_EN = \"This cost includes your selection of material, edge profile, faucet cut-outs, templating, installation plus any other options you have selected. All quotes are subject to changes. No quote shall be final until the time of template. Quotes only reflect the selections, information and the amount of materials you have entered in the estimator tool. After your purchase a certified Contractor will go on site to verify all dimensions and details of your order. Price adjustments will be possible thereafter. All expenses not covered in this quote, like possible extra trip charges, 2nd story fees, oversize piece/difficult access charges,high rise installation charge which are out of program installation costs, permit fees or any other expense not captured in this quote will be added at time of template. Projects under 27 SF incur a surcharge. All quotes are valid for 30 days. ALL 3D DESIGN IMAGES ARE FOR INSPIRATIONAL PURPOSES ONLY. See a kitchen associate or Call 1-844-454-1454 to finalize your purchase.\"\r\n\r\nexport const getFabricatorLogo = (fabricatorData) => {\r\n const hardCodedLogo = `https://qc-cdn.s3.amazonaws.com/Logos/Quote-Kitchen-and-Bath.jpg`;\r\n const hardCodedLowesLogo = `https://qc-cdn.s3.amazonaws.com/Logos/lowes.png`;\r\n const hardCodedRenoDepotLogo = `https://qc-cdn.s3.amazonaws.com/Logos/reno-depot.png`;\r\n const hardCodedRonaLogo = `https://qc-cdn.s3.amazonaws.com/Logos/rona.png`;\r\n\r\n if (isIE()) {\r\n if (fabricatorData.isRenoDepot) {\r\n return hardCodedRenoDepotLogo\r\n } else if (fabricatorData.isRona) {\r\n return hardCodedRonaLogo\r\n } else if (fabricatorData.isLowes) {\r\n return hardCodedLowesLogo\r\n }\r\n return hardCodedLogo\r\n }\r\n\r\n if (Config.isDevMode() && fabricatorData.logoUrl && !fabricatorData.logoUrl.includes(\"http\") && document.kvConfig.domain) {\r\n return document.kvConfig.domain + fabricatorData.logoUrl\r\n }\r\n\r\n return fabricatorData.logoUrl || hardCodedLogo\r\n}\r\n\r\nexport const hardCodeIsLowes = () => {\r\n const subDomains = [\"mdp_surfaces\", \"lowes_\", \"/rona.\", \"rona_\", \"rnodpt\", \"reno_depot\"];\r\n if (Config.isDevMode() && (document.kvConfig.userId === 139043)) {\r\n return true;\r\n }\r\n return subDomains.some(subDomain => window.location.href.includes(subDomain))\r\n};\r\n\r\nexport const hardCodeIsAmericanImport = () => {\r\n const subDomains = ['americanimport', 'americanstandard2020'];\r\n if (Config.isDevMode() && (document.kvConfig.userId === 140460 || document.kvConfig.userId === 155479)) { //American Import //American Standard 2020\r\n return true;\r\n }\r\n return subDomains.some(subDomain => window.location.href.includes(subDomain));\r\n};\r\n\r\nexport const hardCodeIsAmericanStandard = () => {\r\n const subDomains = ['americanstandard'];\r\n if (Config.isDevMode() && (document.kvConfig.userId === 139882 || document.kvConfig.userId === 251108)) { //American Standard 2020 // Cory\r\n return true;\r\n }\r\n return subDomains.some(subDomain => window.location.href.includes(subDomain));\r\n};\r\n\r\nexport const hardCodeIsRona = () => {\r\n const subDomains = [\"/rona.\", \"rona_\"];\r\n return subDomains.some(subDomain => window.location.href.includes(subDomain))\r\n};\r\n\r\nexport const hardCodeIsRenoDepot = () => {\r\n const subDomains = [\"rnodpt\", \"reno_depot\"];\r\n return subDomains.some(subDomain => window.location.href.includes(subDomain))\r\n};\r\n\r\nexport const hardCodeIsCaesarStone = () => {\r\n const domains = [\"quotetops.com\", \"quotekitchencountertops.com\"];\r\n return document.kvConfig.isCaesarStone || domains.some(domain => window.location.href.includes(domain))\r\n};\r\n\r\nexport const hardCodeIsModerno = () => {\r\n const subDomains = [\"moderno\"];\r\n return subDomains.some(subDomain => window.location.href.toLowerCase().includes(subDomain))\r\n};\r\n\r\nexport const hardCodeIsPorcelanosa = () => {\r\n const subDomains = [\"porcelanosa\"];\r\n return subDomains.some(subDomain => window.location.href.toLowerCase().includes(subDomain))\r\n};\r\n\r\nexport const hardCodeIsMcDermott = () => {\r\n const subDomains = [\"mcdermott_\", \"mts_\"];\r\n return subDomains.some(subDomain => window.location.href.includes(subDomain))\r\n};\r\n\r\nexport const hardCodeIsFlexFinish = () => {\r\n const subDomains = [\"flexfinish\", \"flexfinish2\", \"flex_finish\"];\r\n return subDomains.some(subDomain => window.location.href.includes(subDomain))\r\n};\r\n\r\nexport const hardCodeIsGraniteTransformation = () => {\r\n const subDomains = [\"granite_transformations\", \"trend_transformations\"];\r\n return subDomains.some(subDomain => window.location.href.includes(subDomain))\r\n};\r\n\r\nexport const hardCodeIsGraniteTransformationUK = () => {\r\n return graniteTransformationUkSubDomains.some(subDomain => window.location.href.includes(subDomain))\r\n};\r\n\r\nexport const hardCodeIsLixil = () => {\r\n return [139247, 139616, 139882].some(userId => document.kvConfig.userId === userId) || [\"grohe\", \"grohe2\", \"americanstandard\"].some(subDomain => {\r\n return window.location.host && window.location.host.split && (window.location.host.split('.')[0] === subDomain)\r\n })\r\n}\r\n\r\nexport const hardCodeIsAgent = () => {\r\n return document.kvConfig.userId === 140203 || (\r\n window.location.host && window.location.host.split && (window.location.host.split('.')[0] === \"agent\")\r\n )\r\n}\r\n\r\nexport const hardCodeIsTorrco = () => {\r\n return document.kvConfig.userId === 140298 || document.kvConfig.userId === 140299 || (\r\n window.location.host && window.location.host.includes && window.location.host.includes(\"torrco\")\r\n )\r\n}\r\n\r\nexport const hardCodeIsCoburn = () => {\r\n return document.kvConfig.userId === 140590 || document.kvConfig.userId === 140558 || (\r\n window.location.host && window.location.host.includes && window.location.host.includes(\"coburns_\")\r\n )\r\n}\r\n\r\nexport const hardCodeIsSolidSurface = () => {\r\n return document.kvConfig.userId === 245802 || (\r\n window.location.host && window.location.host.includes && window.location.host.includes(\"solidsurface\")\r\n )\r\n}\r\n\r\nexport const hardCodeIsLakesideSurfaces = () => {\r\n return document.kvConfig.userId === 252014 || (\r\n window.location.host && window.location.host.includes && window.location.host.includes(\"lakeside_surfaces\")\r\n )\r\n}\r\n\r\nexport const hardCodeIsDeStefano = () => {\r\n return document.kvConfig.userId === 260280 || (\r\n window.location.host && window.location.host.includes && window.location.host.includes(\"de_stefano\")\r\n ) || window.location.href.includes(\"fab_subdomain=de_stefano\")\r\n}\r\n\r\nexport const hardCodeIsNhance = () => {\r\n return document.kvConfig.userId === 268895 || (\r\n window.location.host && window.location.host.includes && window.location.host.includes(\"nhance\")\r\n ) || window.location.href.includes(\"fab_subdomain=nhance\")\r\n}\r\n\r\nexport const hardCodeIsEncore = () => {\r\n return document.kvConfig.userId === 267710 || (\r\n window.location.host && window.location.host.includes && window.location.host.includes(\"encore\")\r\n ) || window.location.href.includes(\"fab_subdomain=encore\")\r\n}\r\n\r\nexport const isEncore = hardCodeIsEncore();\r\n\r\nexport const hardCodeIsFloform = () => {\r\n const subDomains = [\"floform\"];\r\n return subDomains.some(subDomain => window.location.href.toLowerCase().includes(subDomain))\r\n}\r\n\r\nexport const hardCodeIsDeluxegarage = () => {\r\n const subDomains = [\"deluxegarage\"];\r\n return subDomains.some(subDomain => window.location.href.includes(subDomain))\r\n}\r\n\r\nexport const hardCodeIsRenuit = () => {\r\n const subDomains = [\"renuit\"];\r\n return subDomains.some(subDomain => window.location.href.includes(subDomain))\r\n}\r\n\r\nexport const isCabinetsFabricator = () => {\r\n return [256713, 246203, 256713].some(userId => document.kvConfig.userId === userId)\r\n}\r\n\r\nexport const isProd = () => {\r\n const subDomains = [\"quotekitchenandbath\", \"quotekitchencountertops\"];\r\n return subDomains.some(subDomain => window.location.href.includes(subDomain))\r\n}\r\n\r\nexport const getHardCodedFloFormShopCartCost = (cartItems) => {\r\n let materialTotalCost = 0;\r\n cartItems\r\n .filter(cartItem => {\r\n return cartItem.partId === \"center_island_countertop\"\r\n || cartItem.partId === \"countertop\"\r\n || (cartItem.partId === \"backsplash\" && (\r\n (cartItem.fromWizardGroupId === \"18\")\r\n || (cartItem.fromWizardGroupId === \"12\")\r\n || (cartItem.fromWizardGroupId === \"11\")\r\n || (cartItem.fromWizardGroupId === \"187\")\r\n || (cartItem.fromWizardGroupId === \"196\")\r\n || (cartItem.fromWizardGroupId === \"206\")\r\n ))\r\n })\r\n .forEach(cartItem => {\r\n materialTotalCost += getFeatureCost(cartItem.cartFeature, cartItem.quantity, cartItem.fromQtCategory);\r\n });\r\n // console.log(\"materialTotalCost\", materialTotalCost);\r\n return materialTotalCost * 0.1;\r\n}\r\n\r\nexport const isCafeCountetops = document.kvConfig.userId === 264613 || (\r\n window.location.host && window.location.host.includes && window.location.host.includes(\"cafecounterops\")\r\n);\r\n\r\nexport const hardCodeIsFabricator = (subDomain = \"\", fabId = null) => {\r\n if (!subDomain && !fabId) {\r\n return false\r\n }\r\n return (fabId && (document.kvConfig.userId === fabId)) || (\r\n window.location.host && window.location.host.includes && window.location.host.includes(subDomain)\r\n ) || window.location.href.includes(\"fab_subdomain=\" + subDomain)\r\n}\r\n\r\n\r\nexport const fabricatorsHardcodeObject = {\r\n // isRebath: document.kvConfig.userId === 71520 // removed as we don't use rebath at all\r\n // || window.location.href.includes(\"rebath\")\r\n // || window.location.href.includes(\"re-bath\"),\r\n // isRebath: window.location.href.includes(\"rebath\")\r\n // || window.location.href.includes(\"re-bath\")\r\n // || (action.payload.companyName && (action.payload.companyName.toLowerCase().includes(\"rebath\")\r\n // || action.payload.companyName.toLowerCase().includes(\"re-bath\")))\r\n // || (action.payload.name && (action.payload.name.toLowerCase().includes(\"rebath\")\r\n // || action.payload.name.toLowerCase().includes(\"re-bath\"))),\r\n isLowes: hardCodeIsLowes(),\r\n isRona: hardCodeIsRona(),\r\n isRenoDepot: hardCodeIsRenoDepot(),\r\n isAmericanImport: hardCodeIsAmericanImport(),\r\n isAmericanStandard: hardCodeIsAmericanStandard(),\r\n isCaesarStone: hardCodeIsCaesarStone(),\r\n isGraniteTransformation: hardCodeIsGraniteTransformation(),\r\n isGraniteTransformationUK: hardCodeIsGraniteTransformationUK(),\r\n isModerno: hardCodeIsModerno(),\r\n isMcDermott: hardCodeIsMcDermott(),\r\n isFlexFinish: hardCodeIsFlexFinish(),\r\n isLixil: hardCodeIsLixil(),\r\n isTorrco: hardCodeIsTorrco(),\r\n isCoburn: hardCodeIsCoburn(),\r\n isSolidSurface: hardCodeIsSolidSurface(),\r\n isLakesideSurfaces: hardCodeIsLakesideSurfaces(),\r\n isDeStefano: hardCodeIsDeStefano(),\r\n isNhance: hardCodeIsNhance(),\r\n isEncore: hardCodeIsEncore(),\r\n isGrohe: IS_LIXIL_SERVERS && hardCodeIsFabricator(\"grohe\", 139247),\r\n}\r\n","import {useCallback, useEffect, useMemo, useRef, useState} from \"react\";\r\nimport sqftEventManager from \"../bvcomponents/sqft/components/canvas/store/sqftEventManager\";\r\nimport {checkIfLookFeaturesReceived} from \"../api/look-api\";\r\nimport store from \"../store\";\r\nimport {updateNavigationCount} from \"../actions/lookFunctions\";\r\nimport Config from \"../config\";\r\nimport {getRoomLayouts} from \"../bvcomponents/look/lookNavigation/lookFunctions\";\r\nimport {isProd} from \"./fabricatorHardcode\";\r\n\r\nexport const usePrevious = (value) => {\r\n const ref = useRef();\r\n useEffect(() => {\r\n ref.current = value;\r\n });\r\n return ref.current;\r\n}\r\n\r\nexport const useIsMounted = () => {\r\n const isMountedRef = useRef(true);\r\n const isMounted = useCallback(() => isMountedRef.current, []);\r\n\r\n useEffect(() => {\r\n return () => void (isMountedRef.current = false);\r\n }, []);\r\n\r\n return isMounted;\r\n}\r\n\r\nexport const IsMountedComponent = (props) => {\r\n const {children} = props;\r\n const isMountedComponent = useIsMounted();\r\n return typeof children === 'function' ? children(isMountedComponent) : children;\r\n}\r\n\r\nexport const useOutsideClick = (ref, callback, useSQFTCanvas = false) => {\r\n const handleClick = e => {\r\n if (ref.current && !ref.current.contains(e.target)) {\r\n callback(e);\r\n }\r\n };\r\n\r\n const handleClickThroughCanvasEvents = (mousePos, e) => {\r\n if (ref.current && !ref.current.contains(e.target)) {\r\n callback(e);\r\n }\r\n return false;\r\n };\r\n\r\n useEffect(() => {\r\n if (useSQFTCanvas) {\r\n const objectName = { name: 'helperOutsideClickHook' };\r\n\r\n document.addEventListener(sqftEventManager.events.CLICK, handleClick);\r\n //document.addEventListener(sqftEventManager.events.TOUCH_START, handleClick);\r\n sqftEventManager.addEvent(\r\n sqftEventManager.events.MOUSE_DOWN,\r\n handleClickThroughCanvasEvents,\r\n objectName,\r\n sqftEventManager.priorities.OVERALL\r\n );\r\n\r\n return () => {\r\n document.removeEventListener(sqftEventManager.events.CLICK, handleClick);\r\n //document.removeEventListener(sqftEventManager.events.TOUCH_START, handleClick);\r\n sqftEventManager.removeEvent(objectName);\r\n };\r\n }\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [ref, callback, useSQFTCanvas]);\r\n};\r\n\r\nexport const useOutsideClickSimple = (ref, callback, excludedClassNames = null) => {\r\n const handleClick = event => {\r\n if (ref.current && !ref.current.contains(event.target)) {\r\n if (excludedClassNames && excludedClassNames.some(className => {\r\n return event.target.classList.contains(className) || event.target.closest(\".\"+className)\r\n })) {\r\n return\r\n }\r\n callback(event);\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n document.addEventListener(\"click\", handleClick);\r\n\r\n return () => {\r\n document.removeEventListener(\"click\", handleClick);\r\n };\r\n });\r\n};\r\n\r\nexport const useProgressiveImage = (imageUrl) => {\r\n\r\n const [thumbnailLoaded, setThumbnailLoaded] = useState(false)\r\n const isMounted = useIsMounted();\r\n\r\n useEffect(() => {\r\n const image = new Image();\r\n image.onload = () => {\r\n if (isMounted()) {\r\n setThumbnailLoaded(true)\r\n }\r\n };\r\n image.onerror = () => {\r\n if (isMounted()) {\r\n setThumbnailLoaded(true)\r\n }\r\n };\r\n try {\r\n image.src = imageUrl;\r\n if (image.complete) {\r\n if (isMounted()) {\r\n setThumbnailLoaded(true)\r\n }\r\n }\r\n } catch (e) {\r\n if (isMounted()) {\r\n setThumbnailLoaded(true)\r\n }\r\n }\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [imageUrl])\r\n\r\n return thumbnailLoaded\r\n}\r\n\r\nlet requestInProgressTimeoutId = null;\r\n\r\nexport const useFeaturesChecker = (featureGroup, visualizersLoadedLength) => {\r\n\r\n const [featuresLoaded, setFeaturesLoaded] = useState(featureGroup ? featureGroup.allFeaturesReceived : false)\r\n const isMounted = useIsMounted();\r\n\r\n const checkFeatures = () => {\r\n if (!featureGroup.allFeaturesReceived) {\r\n if (featureGroup.requestInProgress) {\r\n const callRecursiveFeaturesCheck = () => {\r\n console.log(\"callRecursiveFeaturesCheck\", featureGroup);\r\n if (featureGroup.allFeaturesReceived) {\r\n clearTimeout(requestInProgressTimeoutId);\r\n store.dispatch(updateNavigationCount());\r\n if (isMounted()) {\r\n setFeaturesLoaded(true)\r\n }\r\n return\r\n }\r\n requestInProgressTimeoutId = setTimeout(callRecursiveFeaturesCheck, 1000); // check every second for response\r\n };\r\n setTimeout(callRecursiveFeaturesCheck, 1000); // first time\r\n } else {\r\n checkIfLookFeaturesReceived(featureGroup).then(() => {\r\n // store.dispatch(updateFeatureGroupCount());\r\n store.dispatch(updateNavigationCount());\r\n if (isMounted()) {\r\n setFeaturesLoaded(true)\r\n }\r\n })\r\n }\r\n }\r\n }\r\n\r\n useEffect(() => {\r\n if (!featureGroup || !visualizersLoadedLength) {\r\n return false\r\n }\r\n if (!featureGroup.allFeaturesReceived) {\r\n checkFeatures()\r\n }\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [featureGroup, visualizersLoadedLength])\r\n\r\n return featuresLoaded\r\n}\r\n\r\nexport const useShowRoomLayoutsButton = (activePreset, isMobile, visualizersLoadedLength) => {\r\n return useMemo(() => {\r\n if (!visualizersLoadedLength) {\r\n return false\r\n }\r\n if (isMobile) {\r\n return false\r\n }\r\n if (Config.isVisualizerManagement()) {\r\n return true\r\n }\r\n if (isProd()) { // hided room scenes for production URLs\r\n return false\r\n }\r\n return getRoomLayouts().length > 1\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [activePreset, visualizersLoadedLength, isMobile])\r\n};\r\n","import invert from 'lodash/invert';\r\n\r\nimport {splitFeatureName} from \"../../../misc/utils\";\r\nimport DesignNavigationItem from \"../../visComponents/designNavigationItem\";\r\nimport {Part} from \"./part\";\r\nimport store from '../../../store';\r\nimport {LayoutAbbreviation, LayoutType} from \"./constants\";\r\nimport {getFeatureIsLocked} from \"../../../misc/helpers\";\r\nimport {SIDE_POSITIONS} from \"../../look/core/constants\";\r\n\r\n/**\r\n * Used for Complex parts such as Vanity, to perform some base functionality for related items\r\n */\r\nexport class IntermediatePart extends Part {\r\n\r\n constructor(isChild) {\r\n super(false, isChild);\r\n this.disabled = false;\r\n this.defaultDisabled = false; // used after reset click\r\n this.canBeDisabled = false;\r\n }\r\n\r\n /**\r\n * This will be called on feature creation\r\n * @param dbFeature\r\n */\r\n load(dbFeature) {\r\n if (this.layerPositions) {\r\n dbFeature.metaData[\"layerPosition\"] = dbFeature.metaData[\"Side\"] && dbFeature.metaData[\"Side\"][0] !== \"0\"\r\n ? dbFeature.metaData[\"Side\"][0]\r\n : SIDE_POSITIONS[0];\r\n const partNumber = dbFeature.metaData[\"layerPosition\"] === SIDE_POSITIONS[0] ? 1 : 2;\r\n const instance = new this.constructor(false, partNumber);\r\n return this.load_(dbFeature, instance, true, partNumber === 1 ? 'features' : 'featuresParts');\r\n }\r\n return this.load_(dbFeature, new this.constructor());\r\n }\r\n\r\n /**\r\n * This will be called by the underlying vanity feature with a concrete instance of the part\r\n * @param dbFeature\r\n * @param part {Part}\r\n * @param setParent {boolean}\r\n * @param features\r\n */\r\n load_(dbFeature, part, setParent = true, features = 'features') {\r\n\r\n const featureList = features + \"List\";\r\n\r\n const {displayName} = dbFeature;\r\n let {featureName} = splitFeatureName(displayName);\r\n if (!featureName && dbFeature.groupName && dbFeature.displayName) {\r\n featureName = dbFeature.displayName.replace(dbFeature.groupName + \" - \", \"\")\r\n }\r\n // console.log('displayName:', displayName);\r\n\r\n if (setParent) {\r\n part.getParent = () => this;\r\n if (dbFeature.galleryImages) {\r\n const featured = dbFeature.galleryImages.find(galImage => galImage.featured);\r\n if (featured) {\r\n this.featuredImage = featured.url\r\n }\r\n dbFeature.galleryImages = dbFeature.galleryImages.sort((a, b) => b.default - a.default)\r\n }\r\n }\r\n\r\n if (!dbFeature.sharedFeatureName) {\r\n console.error(\"No sharedFeatureName property:\", dbFeature);\r\n }\r\n\r\n part.partName = featureName;\r\n part.metaData = dbFeature.metaData || {};\r\n\r\n if (dbFeature.s3Bindings && dbFeature.s3Bindings.length) {\r\n // dbFeature.s3Bindings = dbFeature.s3Bindings.filter(binding => binding.visualizer === \"Fireplace\")\r\n }\r\n\r\n part.dbFeature = dbFeature || {};\r\n if (!part.dbFeature.filterValueIDs) {\r\n part.dbFeature.filterValueIDs = {}\r\n }\r\n part.notAvailableInVisualizer = !dbFeature.s3Bindings || !dbFeature.s3Bindings.length;\r\n\r\n if (part.metaData.RoomLayout) {\r\n const roomLayout = part.metaData.RoomLayout;\r\n if (roomLayout.includes(LayoutAbbreviation.All)) {\r\n Object.keys(LayoutType).forEach(layoutName => {\r\n this[featureList][layoutName].push(part);\r\n })\r\n } else if (Array.isArray(roomLayout) && roomLayout.length) {\r\n roomLayout.forEach(roomLayoutAbbreviation => {\r\n const layoutName = invert(LayoutAbbreviation)[roomLayoutAbbreviation];\r\n if (layoutName) { // Prevent bad roomLayout Metadata\r\n this[featureList][layoutName].push(part);\r\n }\r\n });\r\n } else { // single value\r\n const layoutName = invert(LayoutAbbreviation)[roomLayout];\r\n if(layoutName) {\r\n this[featureList][layoutName].push(part);\r\n }\r\n }\r\n }\r\n\r\n if (part.notAvailableInVisualizer || !part.metaData.RoomLayout) {\r\n part.notAvailableInVisualizer = true;\r\n Object.keys(LayoutType).forEach(layoutName => {\r\n this[featureList][layoutName].push(part);\r\n })\r\n }\r\n\r\n // Object.keys(LayoutType).forEach(layoutName => {\r\n // this[features+\"List\"][layoutName].push(part);\r\n // });\r\n\r\n this.loadFeatureCommon(part);\r\n\r\n return part\r\n }\r\n\r\n getActiveFeatureConditions() {\r\n return this.getArrayOfConditions()\r\n }\r\n\r\n // navigationSubItems(filters, searchText, forFeature, filterGroups, firstOpenedFeature, firstOpenedConditions) { // to do\r\n navigationSubItems(filters, searchText) {\r\n // const featuresList = (forFeature && forFeature.metaData.layerPosition === SIDE_POSITIONS[1]) ? this.featuresParts : this.features;\r\n const filteredAvailableFeatures = this.getFeaturesBySearchText(this.getFilteredFeaturesByFilters(filters, this.features), searchText);\r\n let featuresToDisplay = this.navigationSubItemsWithFilterMultipleConditions(this.getArrayOfConditions(true), filteredAvailableFeatures);\r\n // console.log(\"filterGroups\", filterGroups);\r\n return this.returnUniqueNavFeatures(featuresToDisplay)\r\n }\r\n\r\n navigationSubItemsWithFilter(propName, propValue, featuresToCheck = this.features) {\r\n return featuresToCheck.filter((feature) => {\r\n return feature.matchesMetaForCondition(propName, propValue);\r\n }).map(_ => new DesignNavigationItem(_.featureName, _));\r\n }\r\n\r\n navigationSubItemsWithFilterMultipleConditions(arrayOfConditions, featuresToCheck = this.features) {\r\n // console.log('arrayOfConditions', arrayOfConditions);\r\n // console.log('featuresToCheck', featuresToCheck);\r\n return featuresToCheck.filter((feature) => {\r\n return feature.notAvailableInVisualizer || arrayOfConditions.every((conditionObject) => {\r\n const {propName, propValue} = conditionObject;\r\n return feature.matchesMetaForCondition(propName, propValue);\r\n });\r\n })\r\n }\r\n\r\n setDefault(layout, setNotInVisFeature = false) {\r\n this.setFeatureGroupDefault(layout, setNotInVisFeature)\r\n }\r\n\r\n setLayerPositions = (activeFeature = this.activeFeature) => {\r\n if (!activeFeature) {\r\n return\r\n }\r\n const layout = this.getParent().layout;\r\n const conditions = this.getArrayOfConditions();\r\n if (layout && this.defaultLayerLayoutPositions && this.defaultLayerLayoutPositions[layout.type]) {\r\n Object.keys(this.layerPositions).forEach(key => {\r\n if (this.defaultLayerLayoutPositions[layout.type] === key\r\n && (!this.layerPositions[key] || !this.layerPositions[key].matchesMetaForArrayOfConditions(conditions))) {\r\n this.layerPositions[key] = activeFeature;\r\n } else if (activeFeature.dbFeature.metaData[\"layerPosition\"] !== key) {\r\n this.layerPositions[key] = null;\r\n }\r\n })\r\n } else {\r\n Object.keys(this.layerPositions).forEach(key => {\r\n if (layout.initialized) {\r\n if ((activeFeature.dbFeature.metaData[\"layerPosition\"] === key)\r\n && (this.layerPositions[key] && !this.layerPositions[key].matchesMetaForArrayOfConditions(conditions))) {\r\n this.layerPositions[key] = activeFeature;\r\n // } else if (this.setAllLayerPositions) {\r\n } else if (this.layerPositions[key]) { // here we have to change vanity cabinet to console for example\r\n const matchingPositionFeature = this.getMatchingPositionFeature(key);\r\n if (matchingPositionFeature) {\r\n this.layerPositions[key] = matchingPositionFeature;\r\n }\r\n }\r\n } else { // first time we should set everything by the default! // missing layers issue\r\n if ((activeFeature.dbFeature.metaData[\"layerPosition\"] === key)\r\n && (!this.layerPositions[key] || !this.layerPositions[key].matchesMetaForArrayOfConditions(conditions))) {\r\n this.layerPositions[key] = activeFeature;\r\n // } else if (this.setAllLayerPositions) {\r\n } else {\r\n const matchingPositionFeature = this.getMatchingPositionFeature(key);\r\n if (matchingPositionFeature) {\r\n this.layerPositions[key] = matchingPositionFeature;\r\n }\r\n }\r\n }\r\n })\r\n }\r\n }\r\n\r\n toggleLayerPositions() {\r\n Object.keys(this.layerPositions).forEach(key => {\r\n this.layerPositions[key] = this.disabled ? null : this.getMatchingPositionFeature(key)\r\n })\r\n }\r\n\r\n getMatchingPositionFeature = (position = \"\", fromFeature = this.activeFeature, fromLayout = null) => {\r\n if (fromFeature) { //just in case\r\n const name1 = fromFeature.getSplittedFeatureName();\r\n let arrayOfConditions = this.getArrayOfConditions();\r\n if (fromFeature.metaData[\"SkuName\"]) {\r\n arrayOfConditions.push({\r\n propName: \"SkuName\",\r\n propValue: fromFeature.metaData[\"SkuName\"]\r\n })\r\n }\r\n if (fromLayout) {\r\n let roomLayoutMeta = arrayOfConditions.find(condition => condition.propName === \"RoomLayout\");\r\n let roomSceneMeta = arrayOfConditions.find(condition => condition.propName === \"RoomScene\");\r\n if (roomLayoutMeta) {\r\n roomLayoutMeta.propValue = fromLayout.getCurrentLayoutAbbreviation();\r\n }\r\n if (roomSceneMeta) {\r\n roomSceneMeta.propValue = fromLayout.scene;\r\n }\r\n }\r\n const skuNamesPartIds = [\"shower_door\", \"walk_in_tub\", \"shower_pan_combo\"];\r\n const whereToFind = (!this.layerPositions || (position === Object.keys(this.layerPositions)[0])) ? this.features : this.featuresParts;\r\n return whereToFind.find((feature) => {\r\n return (skuNamesPartIds.includes(this.partId) || name1 === feature.getSplittedFeatureName())\r\n && feature.matchesMetaForArrayOfConditions(arrayOfConditions) && feature.metaData[\"layerPosition\"] === position\r\n });\r\n }\r\n return null\r\n };\r\n\r\n getArrayOfConditions() {\r\n const layout = this.getParent().layout;\r\n return [{\r\n propName: 'RoomLayout',\r\n propValue: layout.getCurrentLayoutAbbreviation()\r\n }, {\r\n propName: 'RoomScene',\r\n propValue: layout.scene\r\n }];\r\n }\r\n\r\n setLayers(layout) {\r\n if (this.activeFeature && (this.activeFeature.matchesMetaForArrayOfConditions(this.getArrayOfConditions()))) {\r\n if (this.hasAdditionalParts) {\r\n this.checkIfFeaturePartIsMatching();\r\n }\r\n return this._setLayers(layout);\r\n }\r\n this.setDefault(layout);\r\n return this._setLayers(layout);\r\n }\r\n showLayerPositionsModal() {\r\n return false\r\n }\r\n\r\n clickFromAllWalls(ignoreLocked) {\r\n if (this && this.dbFeature && this.dbFeature.sharedFeatureName) {\r\n console.log(`${this.partId}:`, this.dbFeature.sharedFeatureName);\r\n }\r\n this.handleClick(ignoreLocked, \"all_walls\");\r\n }\r\n\r\n tryToSetTheSameFeature(filteredFeatures = [], partName = \"\") {\r\n if (this.activeFeature && this.activeFeature.partName) {\r\n let splittedFromTheLayoutName = partName\r\n ? this.removeLayoutFromPartName(partName)\r\n : this.activeFeature.getMatchingFeatureName();\r\n this.activeFeature = filteredFeatures.find(feature => {\r\n return feature.getMatchingFeatureName() === splittedFromTheLayoutName\r\n });\r\n if (this.activeFeature) {\r\n return true\r\n }\r\n }\r\n return false\r\n }\r\n\r\n /**\r\n * @param ignoreLocked {boolean} // false by the default, is used by wizard ONLY\r\n */\r\n handleClick(ignoreLocked = false) {\r\n const parent = this.getParent();\r\n const {activeQuoteIndex} = store.getState().quotesState;\r\n parent.firstClick[activeQuoteIndex] = true; // allow to show active item\r\n const featureIsLocked = getFeatureIsLocked(this, ignoreLocked);\r\n if (featureIsLocked) {\r\n parent.activeLockedFeature = this;\r\n } else {\r\n if (parent.activeLockedFeature) {\r\n parent.activeLockedFeature = null;\r\n }\r\n this.featureClick();\r\n }\r\n }\r\n\r\n featureClick() {\r\n const parent = this.getParent();\r\n parent.placeholderChanged = true;\r\n if (this.notAvailableInVisualizer) {\r\n parent.activeNotInVisualizerFeature = this; // do not change the activeFeature (in order to keep the layer)\r\n } else if (parent.activeNotInVisualizerFeature) {\r\n parent.activeNotInVisualizerFeature = null; // remove it from other searches and so on\r\n parent.activeFeature = this;\r\n } else {\r\n parent.activeFeature = this;\r\n }\r\n this.featureClicked();\r\n }\r\n\r\n hideLayers() {\r\n if (this.activeFeature) {\r\n this.activeFeature.layer.src = '';\r\n }\r\n if (Array.isArray(this.activeFeatureParts) && this.activeFeatureParts.length) {\r\n this.activeFeatureParts.forEach((activeFeaturePart) => {\r\n if (activeFeaturePart && activeFeaturePart.layer) {\r\n activeFeaturePart.layer.src = '';\r\n }\r\n })\r\n }\r\n if (this.placeholderFeature) {\r\n this.placeholderFeature.layer.src = '';\r\n }\r\n if (this.layerPositions) {\r\n Object.keys(this.layerPositions).forEach(key => {\r\n if (this.layerPositions[key]) {\r\n this.layerPositions[key].layer.src = '';\r\n }\r\n })\r\n }\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n\r\n const getZIndex = (feature, partId = null) => {\r\n return feature.metaData[\"ZSorting\"] ? feature.metaData[\"ZSorting\"] * 1000 : zIndexes[partId || this.partId];\r\n }\r\n\r\n if (this.layerPositions) {\r\n Object.keys(this.layerPositions).forEach((key, keyIndex) => {\r\n const feature = this.layerPositions[key];\r\n if (feature) {\r\n feature.layer.zIndex = getZIndex(feature) + keyIndex*10;\r\n }\r\n })\r\n } else if (zIndexes && this.activeFeature) {\r\n this.activeFeature.layer.zIndex = getZIndex(this.activeFeature);\r\n if (this.hasAdditionalParts && this.activeFeatureParts && this.activeFeatureParts.length) {\r\n this.activeFeatureParts.forEach((activeFeaturePart, keyIndex) => {\r\n activeFeaturePart.layer.zIndex = getZIndex(activeFeaturePart, this.additionalPartPartId) + (keyIndex + 1) * 10;\r\n });\r\n }\r\n }\r\n }\r\n\r\n removeEdgeFromPartName(partName) {\r\n const filterGroups = store.getState().filterState.filterGroups;\r\n const edgeFilterGroup = filterGroups.find(group => group.name === \"Edge\" || group.name === \"Edge Profile\");\r\n if (edgeFilterGroup && edgeFilterGroup.values && edgeFilterGroup.values.length) {\r\n const edgeFilterGroupValues = edgeFilterGroup.values.sort((a,b) => {\r\n return a.value && b.value && (b.value.length - a.value.length)\r\n }); // 1st should be \"Full Bullnose\", then simple \"Bullnose\"\r\n edgeFilterGroupValues.forEach((filterGroupValue) => { // arrayOf {id: 293, value: \"Eased\", displayText: \"Eased\", parent_id: null, icon: \"\", …}\r\n partName = partName.split(\" \"+filterGroupValue.value).join(\"\");\r\n });\r\n }\r\n return partName\r\n }\r\n\r\n getCountertopGroupsSplittedFeatureName = () => {\r\n if (this._countertopGroupsCustomDisplayName == null) {\r\n this._countertopGroupsCustomDisplayName = this.dbFeature.sharedFeatureName;\r\n }\r\n return this._countertopGroupsCustomDisplayName\r\n };\r\n\r\n getSplittedFeatureName = () => {\r\n if (this._customDisplayName == null) {\r\n this._customDisplayName = this.dbFeature.sharedFeatureName || this.partName || \"\";\r\n }\r\n return this._customDisplayName\r\n };\r\n\r\n getMatchingFeatureName = () => {\r\n return this.getSplittedFeatureName()\r\n };\r\n\r\n getModuleFeatureName = () => {\r\n // return this.partName.split(\" M_\")[0];\r\n return this.partName.split(\" M\")[0];\r\n };\r\n\r\n featureIsMatchingFilters(currentFeature, activeFilters, filters = []) {\r\n return filters.every(filter => {\r\n return activeFilters[filter.id]\r\n && currentFeature.dbFeature.filterValueIDs[filter.id]\r\n && currentFeature.dbFeature.filterValueIDs[filter.id].includes(activeFilters[filter.id][0])\r\n })\r\n }\r\n\r\n getActiveFeaturePartsAccordingToActiveFeature(fromFeature = this.activeFeature, activeFeatureConditions = []) {\r\n let activeFeatureParts = [];\r\n if (fromFeature && fromFeature.partNumber) {\r\n let activeFeaturePart;\r\n const name1 = fromFeature.getSplittedFeatureName();\r\n // console.log(\"name1\", name1);\r\n let arrayOfConditions = activeFeatureConditions.length\r\n ? activeFeatureConditions\r\n : this.getActiveFeatureConditions(fromFeature);\r\n // if (this.partId === \"right_wall\") {\r\n // arrayOfConditions = arrayOfConditions.filter(condition => condition.propName !== \"MirrorSize\");\r\n // }\r\n if (this.getAdditionalPartsConditions) {\r\n arrayOfConditions = this.getAdditionalPartsConditions(arrayOfConditions); // modify or extend parts conditions\r\n }\r\n activeFeatureParts = this.featuresParts.filter((feature) => name1 === feature.getSplittedFeatureName());\r\n // console.log(\"this.featuresParts\", this.featuresParts);\r\n // console.log(\"activeFeatureParts\", activeFeatureParts);\r\n if (activeFeatureParts.length) {\r\n activeFeaturePart = activeFeatureParts.find((feature) => {\r\n return feature.matchesMetaForArrayOfConditions(arrayOfConditions)\r\n });\r\n if (!activeFeaturePart) {\r\n activeFeaturePart = activeFeatureParts[0];\r\n }\r\n }\r\n activeFeatureParts = activeFeaturePart ? [activeFeaturePart] : [];\r\n activeFeatureParts.forEach((activeFeaturePart) => {\r\n activeFeaturePart.disabled = this.disabled\r\n });\r\n }\r\n return activeFeatureParts\r\n }\r\n\r\n checkIfFeaturePartIsMatching() {\r\n if (this.activeFeatureParts && this.activeFeatureParts.length) {\r\n const activeFeatureConditions = this.getActiveFeatureConditions();\r\n const name1 = this.activeFeature.getSplittedFeatureName();\r\n const activeFeaturePart = this.activeFeatureParts[0];\r\n if (!(activeFeaturePart.matchesMetaForArrayOfConditions(activeFeatureConditions)\r\n && name1 === activeFeaturePart.getSplittedFeatureName())) {\r\n this.activeFeatureParts = this.setActiveFeatureParts(this.activeFeature, activeFeatureConditions);\r\n }\r\n } else {\r\n this.activeFeatureParts = this.setActiveFeatureParts();\r\n }\r\n }\r\n\r\n setActiveFeatureParts(fromFeature = this.activeFeature, activeFeatureConditions = []) {\r\n return this.getActiveFeaturePartsAccordingToActiveFeature(fromFeature, activeFeatureConditions);\r\n }\r\n\r\n}\r\n","import React from 'react';\r\nimport {connect} from \"react-redux\";\r\nimport PropTypes from \"prop-types\";\r\n\r\nimport CircularProgress from \"@mui/material/CircularProgress\";\r\n\r\nimport COLOR_THEMES from \"../../colorThemes\";\r\nimport LoadingBar from '../../lib/react-redux-loading-bar';\r\n\r\nconst MaterialSpinner = (props) => {\r\n const {activeTheme, color, size, withCounter} = props;\r\n\r\n const style = {'color': color || COLOR_THEMES[activeTheme].active}\r\n\r\n if (size) { // in order not to break others with size auto\r\n return (\r\n }\r\n */\r\n addTo(ar) {\r\n if (this.src)\r\n ar.push(this);\r\n }\r\n}\r\n\r\n\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport {Shower} from \"../../parts/shower\";\r\nimport {Vanity} from \"../../parts/vanity\";\r\nimport {getCurrentRoomType} from \"../../../../appLayout\";\r\nimport {LOOK_ROOM_TYPES} from \"../../constants\";\r\n\r\nconst splitWallPartIds = [\"left_wall\", \"right_wall\", \"split_wall\", \"left_wall_splitter\"];\r\nconst shouldCheckAdditionalPartsConditions = [\"front_wall\", \"right_wall\", \"left_wall\"];\r\n\r\nexport default class WallCommon extends IntermediatePart {\r\n\r\n constructor(props) {\r\n super(props);\r\n }\r\n\r\n getArrayOfConditions() {\r\n const conditions = super.getArrayOfConditions();\r\n const showerParent = this.getParent().layout.parts[Shower.id];\r\n const showerSize = showerParent ? showerParent.showerSize() : null;\r\n if (showerSize) {\r\n conditions.push({\r\n propName: \"ShowerSize\",\r\n propValue: showerSize\r\n })\r\n }\r\n\r\n if (getCurrentRoomType(showerParent.layout) === LOOK_ROOM_TYPES.as && splitWallPartIds.every(partId => this.partId !== partId)) {\r\n const wallParent = this.getParent();\r\n if (wallParent && wallParent.splitWall) {\r\n conditions.push({\r\n propName: \"SplitWallType\",\r\n propValue: wallParent.getSplitWallType()\r\n })\r\n }\r\n }\r\n return conditions\r\n }\r\n\r\n getAdditionalPartsConditions(arrayOfConditions = []) {\r\n if (shouldCheckAdditionalPartsConditions.every(partId => this.partId !== partId)) {\r\n return arrayOfConditions\r\n }\r\n const layout = this.getParent().layout;\r\n if (!layout) {\r\n return arrayOfConditions\r\n }\r\n const vanityParent = layout.parts[Vanity.id];\r\n if (!vanityParent) {\r\n return arrayOfConditions\r\n }\r\n // if (!arrayOfConditions.some(condition => condition.propName === \"VanitySize\")) {\r\n // const vanitySize = vanityParent.counterTopSize(this);\r\n // if (vanitySize) {\r\n // arrayOfConditions.push({\r\n // propName: \"VanitySize\",\r\n // propValue: vanitySize\r\n // })\r\n // }\r\n // }\r\n if (!arrayOfConditions.some(condition => condition.propName === \"MirrorShape\")) {\r\n const mirror = vanityParent.mirror;\r\n if (mirror && mirror.activeFeature && !mirror.disabled && mirror.activeFeature.metaData[\"MirrorShape\"]) {\r\n arrayOfConditions.push({\r\n propName: \"MirrorShape\",\r\n propValue: mirror.activeFeature.metaData[\"MirrorShape\"]\r\n })\r\n }\r\n }\r\n return arrayOfConditions\r\n }\r\n\r\n}\r\n","import {Shower} from \"../../parts/shower\";\r\nimport {IntermediatePart} from \"../../intermediatePart\";\r\nimport {SIDE_POSITIONS} from \"../../constants\";\r\n// import {SIDE_POSITIONS} from \"../../constants\";\r\n\r\nexport default class AccessoryCommon extends IntermediatePart {\r\n\r\n constructor(props) {\r\n super(props);\r\n }\r\n\r\n getArrayOfConditions() {\r\n let conditions = super.getArrayOfConditions(); //roomLayout\r\n const layout = this.getParent().layout;\r\n const showerParent = layout.parts[Shower.id];\r\n const showerSize = showerParent.showerSize();\r\n if (showerParent && showerSize) {\r\n conditions.push({\r\n propName: \"ShowerSize\",\r\n propValue: showerSize\r\n });\r\n }\r\n return conditions\r\n }\r\n\r\n checkRelatedFeatureGroupPositions(position) {\r\n const accessoriesParent = this.getParent();\r\n const showerParent = accessoriesParent.layout.parts[Shower.id]; // no need for another check\r\n const showerSize = showerParent.showerSize();\r\n let otherFeatureGroup = null;\r\n switch (this.partId) {\r\n case \"grab_bar\":\r\n otherFeatureGroup = accessoriesParent.soapDish;\r\n break;\r\n case \"soap_dish\":\r\n otherFeatureGroup = accessoriesParent.grabBar;\r\n break;\r\n case \"shower_seats\":\r\n otherFeatureGroup = accessoriesParent.largeCornerSeat;\r\n break;\r\n case \"large_corner_seat\":\r\n otherFeatureGroup = accessoriesParent.seats;\r\n break;\r\n default:\r\n break;\r\n }\r\n if (showerSize === \"30\") {\r\n Object.keys(otherFeatureGroup.layerPositions).forEach(key => {\r\n otherFeatureGroup.layerPositions[key] = null\r\n })\r\n } else {\r\n if (this.layerPositions[position] && otherFeatureGroup && otherFeatureGroup.layerPositions[position] && !otherFeatureGroup.disabled) {\r\n const newPosition = position === SIDE_POSITIONS[0] ? SIDE_POSITIONS[1] : SIDE_POSITIONS[0];\r\n if (!this.layerPositions[newPosition]) {\r\n const matchingPositionFeature = otherFeatureGroup.getMatchingPositionFeature(newPosition, otherFeatureGroup.layerPositions[position]);\r\n if (matchingPositionFeature) {\r\n otherFeatureGroup.layerPositions[newPosition] = matchingPositionFeature;\r\n }\r\n }\r\n otherFeatureGroup.layerPositions[position] = null; //2) remove old soap dish position\r\n }\r\n }\r\n }\r\n\r\n}\r\n","import React, {Component} from 'react';\r\nimport {connect} from 'react-redux';\r\nimport PropTypes from 'prop-types';\r\nimport findIndex from \"lodash/findIndex\";\r\nimport {FormattedMessage} from \"react-intl\";\r\n\r\nimport * as actions from '../../../../actions/actionFunctions';\r\n\r\n// import {DesignNavigationItem, Layout} from \"../core/layout\";\r\n\r\nexport const toggleFilterArrayValue = (array, {filterId, filterGroupId}) => {\r\n let index = findIndex(array, {filterGroupId});\r\n if (index >= 0) {\r\n array[index].filterId === filterId ? array.splice(index, 1) : array.splice(index, 1, {filterId, filterGroupId})\r\n } else {\r\n array.push({filterId, filterGroupId});\r\n }\r\n return array;\r\n};\r\n\r\nexport const replaceFilterArrayValue = (array, {filterId, filterGroupId}) => {\r\n let index = findIndex(array, {filterGroupId});\r\n if (index >= 0) {\r\n array.splice(index, 1, {filterId, filterGroupId})\r\n } else {\r\n array.push({filterId, filterGroupId});\r\n }\r\n return array;\r\n};\r\n\r\nconst setDefaultFilterArrayValue = (array, filterGroupId) => {\r\n let index = findIndex(array, {filterGroupId});\r\n if (index >= 0) {\r\n array.splice(index, 1);\r\n }\r\n return array;\r\n};\r\n\r\nclass FilterSwitchers extends Component {\r\n\r\n static propTypes = {\r\n // layout: PropTypes.instanceOf(Layout),\r\n isMobile: PropTypes.bool,\r\n activePart: PropTypes.object.isRequired,\r\n filterGroupName: PropTypes.string.isRequired\r\n };\r\n\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n availableFilterValues: [],\r\n filterGroup: {}\r\n };\r\n }\r\n\r\n componentDidMount() {\r\n this.setAvailableFiltersValues(this.props);\r\n }\r\n\r\n componentWillReceiveProps(nextProps) {\r\n if (nextProps.activePart && this.props.activePart && nextProps.activePart.partName !== this.props.activePart.partName) {\r\n this.setAvailableFiltersValues(nextProps);\r\n }\r\n }\r\n\r\n componentWillUnmount() {\r\n this.setDefaultFilterValue();\r\n }\r\n\r\n setAvailableFiltersValues(nextProps = this.props) {\r\n const availableFilterValues = [];\r\n const filterGroup = nextProps.filterGroups.find(group => group.name === nextProps.filterGroupName);\r\n const fabricatorData = this.props.fabricatorData;\r\n if (filterGroup) {\r\n nextProps.activePart.features.forEach((feature) => {\r\n if (feature.dbFeature.filterValueIDs[filterGroup.id]) {\r\n feature.dbFeature.filterValueIDs[filterGroup.id].forEach((filterValue) => {\r\n if (!availableFilterValues.includes(filterValue)) {\r\n const fValue = filterGroup.values.find(val => val.id === filterValue);\r\n if (fValue.value === \"Slab\") { // we need to look for existing DuraBath Natural Stone features filter\r\n if (!fabricatorData || (fabricatorData && !fabricatorData.isRebath)) {\r\n availableFilterValues.push(filterValue)\r\n }\r\n } else if (fValue.value === \"DuraBath Natural Stone\") {\r\n if (!fabricatorData || (fabricatorData && fabricatorData.isRebath)) {\r\n availableFilterValues.push(filterValue)\r\n }\r\n } else {\r\n availableFilterValues.push(filterValue)\r\n }\r\n }\r\n })\r\n }\r\n });\r\n this.setState({\r\n availableFilterValues,\r\n filterGroup\r\n })\r\n }\r\n }\r\n\r\n setActiveFilterValue = (filterId, filterGroupId) => {\r\n this.props.setSelectedFilters(toggleFilterArrayValue([...this.props.selectedFilters], {filterId, filterGroupId}));\r\n };\r\n\r\n setDefaultFilterValue = () => {\r\n this.props.setSelectedFilters(setDefaultFilterArrayValue([...this.props.selectedFilters], this.state.filterGroup.id));\r\n };\r\n\r\n render() {\r\n\r\n // console.log('parentItem', this.props.parentItem);\r\n // console.log('activePart', this.props.activePart);\r\n // console.log('selectedFilters', this.props.selectedFilters);\r\n // console.log('availableFilterValues:', this.state.availableFilterValues);\r\n let activeFilterValueId = null;\r\n if (this.state.availableFilterValues.length && this.state.filterGroup && this.props.selectedFilters.length) {\r\n const appliedFilter = this.props.selectedFilters.find(filterObj => filterObj.filterGroupId === this.state.filterGroup.id);\r\n if (appliedFilter) {\r\n activeFilterValueId = appliedFilter.filterId\r\n }\r\n }\r\n\r\n return this.state.availableFilterValues.length ? (\r\n this.props.isMobile ? (\r\n \r\n } else {\r\n return \r\n }\r\n } else {\r\n if (this.props.windowWidth < 620) {\r\n return \r\n } else if (this.props.windowWidth < 680) {\r\n return \r\n } else {\r\n return \r\n }\r\n }\r\n };\r\n\r\n buttonIsDisabled = (partId) => {\r\n const layout = getCurrentLayout();\r\n return this.props.activeSubPart.partId === partId\r\n || (document.kvConfig.visualizerType === \"Kitchen\" && partId === \"center_island_countertop\"\r\n && !layout.getCurrentLayoutAbbreviation().includes(\"I\"));\r\n }\r\n\r\n renderDropDown = () => {\r\n const isBathroom = getIsBathroom();\r\n const COUNTERTOPGROUPS = isBathroom ? COUNTERTOP_GROUP_BATHROOM : COUNTERTOP_GROUP;\r\n const applyTo = isBathroom ? this.props.countertopsApplyToBathroom : this.props.countertopsApplyTo;\r\n const countertopsApplyTo = applyTo[this.props.activeSubPart.partId];\r\n\r\n if (!countertopsApplyTo) {\r\n return null\r\n }\r\n\r\n const layout = getCurrentLayout();\r\n\r\n return (\r\n \r\n {COUNTERTOPGROUPS.map(partId => {\r\n const disabledButton = this.buttonIsDisabled(partId);\r\n return (\r\n \r\n disabledButton ? false : this.toggleCountertopsApplyTo(partId)}/>\r\n disabledButton ? false : this.toggleCountertopsApplyTo(partId)}>\r\n {this.getButtonName(partId, layout)}\r\n \r\n \r\n )\r\n })}\r\n \r\n )\r\n };\r\n\r\n render() {\r\n\r\n if (this.props.showAsDropdown) {\r\n return this.renderDropDown()\r\n }\r\n\r\n const isBathroom = getIsBathroom();\r\n const COUNTERTOPGROUPS = isBathroom ? COUNTERTOP_GROUP_BATHROOM : COUNTERTOP_GROUP;\r\n const applyTo = isBathroom ? this.props.countertopsApplyToBathroom : this.props.countertopsApplyTo;\r\n const countertopsApplyTo = applyTo[this.props.activeSubPart.partId];\r\n const layout = getCurrentLayout();\r\n\r\n return (\r\n \r\n }\r\n\r\n return (\r\n \r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = (store) => {\r\n const {updateDisableFeatureGroupRadio} = store.navigationState;\r\n const {windowWidth} = store.serverState;\r\n const {canvasCount} = store.bathroomVisualizerState; // to update component when feature is changed\r\n\r\n return {\r\n updateDisableFeatureGroupRadio,\r\n windowWidth,\r\n canvasCount,\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = {\r\n updateCanvasCount,\r\n};\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(BodyPanelRadio);\r\n\r\n","import {hashHistory} from \"react-router\";\r\nimport {changeQTRoutePath} from \"../../misc/changeRoutePath\";\r\nimport {getCurrentLayout} from \"../appLayout\";\r\nimport store from \"./../../store\";\r\nimport {\r\n changeActivePartRelatedItemIndex, setCameFromPage,\r\n setQtActiveCategory,\r\n toggleBathroomVisualizerOpen,\r\n toggleSelectionWindow\r\n} from \"../../actions/actionFunctions\";\r\nimport Config from \"../../config\";\r\nimport {switchToWizardItem} from \"../qkbPages/materialsWizard/useChangeWizardStepRoute\";\r\n\r\nexport default (cameFromPage, firstCat = false, subPart = null, qtCategoryName = \"\", wizardAllObject = null, stepIndex = 0) => {\r\n const layout = getCurrentLayout();\r\n const state = store.getState();\r\n const {selectionGroup, activePartRelatedItemIndex} = state.selectionState;\r\n const layoutParts = state.stepsState.layoutParts;\r\n const qtActiveCategory = qtCategoryName || (subPart && subPart.part ? subPart.part.qtCategoryName : state.qtState.qtActiveCategory);\r\n\r\n store.dispatch(toggleSelectionWindow(true, selectionGroup || layoutParts[0]));\r\n store.dispatch(toggleBathroomVisualizerOpen(false));\r\n store.dispatch(setCameFromPage(cameFromPage));\r\n\r\n const {wizardList, wizardIsActive} = state.wizardState;\r\n if (wizardAllObject) {\r\n const {wizardItemId, quoteIndex} = wizardAllObject;\r\n const wizardItem = wizardList.find(wizItem => wizItem.id === wizardItemId); // if not found - set default\r\n switchToWizardItem(wizardItem, stepIndex, quoteIndex);\r\n return\r\n } else if (wizardIsActive) {\r\n switchToWizardItem();\r\n return\r\n }\r\n\r\n if (layout.qtCategories) { // set default if index is not matching\r\n let currentActiveCategory = layout.qtCategories.find(qtCat => qtCat.name === qtActiveCategory);\r\n if (subPart) {\r\n if (!currentActiveCategory) { // edge profile cases\r\n currentActiveCategory = layout.qtCategories.find(qtCat => qtCat.subParts.some(sPart => sPart.part.partId === subPart.part.partId));\r\n }\r\n if (!currentActiveCategory) { // edge profile cases\r\n if (Config.isDevMode()) {\r\n console.log(\"NO CATEGORY for feature\", );\r\n }\r\n if (layout.qtCategories.length) {\r\n store.dispatch(setQtActiveCategory(layout.qtCategories[0].name));\r\n store.dispatch(changeActivePartRelatedItemIndex(0));\r\n changeQTRoutePath(layout.qtCategories[0].name, 0);\r\n } else {\r\n if (!window.location.href.includes('materials')) {\r\n hashHistory.push('materials');\r\n }\r\n }\r\n return;\r\n }\r\n const relatedItemIndex = currentActiveCategory.subParts.findIndex(subPartItem => {\r\n return subPartItem.part.partId === subPart.part.partId\r\n });\r\n store.dispatch(setQtActiveCategory(currentActiveCategory.name));\r\n store.dispatch(changeActivePartRelatedItemIndex(relatedItemIndex > -1 ? relatedItemIndex : 0));\r\n changeQTRoutePath(currentActiveCategory.name, relatedItemIndex);\r\n } else if (!currentActiveCategory || !currentActiveCategory.subParts[activePartRelatedItemIndex] || firstCat) {\r\n const qtCategory = layout.qtCategories[0];\r\n store.dispatch(setQtActiveCategory(qtCategory.name));\r\n store.dispatch(changeActivePartRelatedItemIndex(0));\r\n changeQTRoutePath(qtCategory.name, 0);\r\n }\r\n }\r\n\r\n if (!window.location.href.includes('materials')) {\r\n hashHistory.push('materials');\r\n }\r\n\r\n};\r\n","import {PartMenuType} from \"../../visComponents/constants\";\r\nimport {iCmp} from \"../../../misc/utils\";\r\nimport Layer from \"../../visComponents/layer\";\r\nimport {LayoutType, METADATA} from \"./constants\";\r\nimport PartCommon from \"../../visComponents/partCommon\";\r\n\r\nexport class Part extends PartCommon {\r\n\r\n constructor(isParent, isChild, menuType) {\r\n super();\r\n if (isChild || (isParent && menuType === PartMenuType.Simple)) {\r\n this.featuresList = {};\r\n this.featuresPartsList = {};\r\n this.modulePartsList = {};\r\n Object.keys(LayoutType).forEach(layoutName => {\r\n this.featuresList[layoutName] = [];\r\n this.featuresPartsList[layoutName] = [];\r\n this.modulePartsList[layoutName] = [];\r\n });\r\n this.allFeaturesReceived = false;\r\n this.realFeaturesReceived = false; // this prop is need on Scroll (if features count more that 1000)\r\n this.nextFeaturesPageToLoad = 0;\r\n this.activeFeature = null;\r\n this.placeholderFeature = null;\r\n this.shadowFeature = null;\r\n this.placeholderChanged = false;\r\n this.firstClick = {\r\n \"0\": false\r\n };\r\n this.activeLockedFeature = null;\r\n this.activeNotInVisualizerFeature = null; // is needed to display in the QT selected activeNotInVisualizerFeature, but render proper activeFeature layer(for example, countertop)\r\n // name = \"\";\r\n this.visible = true;\r\n this.categoryEnabled = false;\r\n this.layout = null;\r\n this.featureGroupVisible = true; // dashboard's feature group eye ball logic\r\n this.featureGroupEnabled = true; // dashboard's feature group checkbox logic\r\n this.selectedFeaturesHistory = []; // array of strings(names). updated every time item is selected\r\n this.filtersReceived = null; // array of filters values, comes from BE, for ex [1221, 347, 1124]\r\n }\r\n if (isParent) {\r\n this.partThumbnail = '';\r\n this.relatedItems = [];\r\n }\r\n if (!isChild && !isParent) {\r\n this.dbFeature = null;\r\n this.layer = new Layer();\r\n this._customDisplayName = null;\r\n this.notesList = {};\r\n }\r\n this.partName = \"\";\r\n }\r\n\r\n set features(featuresList) {\r\n // features can't be set directly, we need to change featuresList array\r\n }\r\n get features() {\r\n const layout = this.layout || this.getParent().layout;\r\n return this.featuresList[layout.getCurrentLayoutName()]\r\n }\r\n set featuresParts(featuresList) {\r\n // featuresParts can't be set directly, we need to change featuresPartsList array\r\n }\r\n get featuresParts() {\r\n const layout = this.layout || this.getParent().layout;\r\n return this.featuresPartsList[layout.getCurrentLayoutName()]\r\n }\r\n get moduleParts() {\r\n const layout = this.layout || this.getParent().layout;\r\n return this.modulePartsList[layout.getCurrentLayoutName()]\r\n }\r\n\r\n /**\r\n * Checks whether a given for condition matches the needed value (or array of values)\r\n * @param name {string}\r\n * @param value {string || array}\r\n * @returns {int} -1 - no such for condition, 0 - no match, 1 - matches\r\n */\r\n matchesMetaForCondition(name, value) {\r\n return this.metaData[name] && this.metaData[name].some(condValue => {\r\n return condValue === METADATA.ALL || (Array.isArray(value) ? value.some(val => iCmp(condValue, val)) : iCmp(condValue, value))\r\n });\r\n }\r\n\r\n matchesMetaForArrayOfConditions(arrayOfConditions) {\r\n return arrayOfConditions.every((condition) => {\r\n return this.matchesMetaForCondition(condition.propName, condition.propValue);\r\n })\r\n }\r\n}\r\n\r\n\r\n","import * as types from \"./actionTypes\";\r\n\r\n//********** CONTRACT SIGNING *************/\r\nexport const showContractSigning = (show, callback = null) => ({\r\n type: types.SHOW_CONTRACT_SIGNING,\r\n payload: {show, callback}\r\n});\r\n\r\nexport const setAfterContractSignCallback = (afterContractSignCallback) => ({\r\n type: types.SET_AFTER_CONTRACT_SIGN_CALLBACK,\r\n payload: {afterContractSignCallback}\r\n});\r\n\r\nexport const contractSignPostSignature = (contractSignData) => ({\r\n type: types.CONTRACT_SIGNING_POST_SIGNATURE,\r\n payload: contractSignData\r\n});\r\n\r\nexport const showSignaturePad = (show, tag) => ({\r\n type: types.CONTRACT_SIGNING_SHOW_SIGNATURE_PAD,\r\n payload: {show, tag}\r\n});\r\n\r\nexport const setContractsValues = ({contractId, pageIndex, fieldIndex, name, value}) => {\r\n return (dispatch, getState) => {\r\n let {contractsValues} = getState().contractSigningState;\r\n if (!contractId) {\r\n return\r\n }\r\n if (!contractsValues[contractId]) {\r\n contractsValues[contractId] = {}\r\n }\r\n if (!contractsValues[contractId][pageIndex]) {\r\n contractsValues[contractId][pageIndex] = {}\r\n }\r\n contractsValues[contractId][pageIndex][fieldIndex] = {name, value};\r\n dispatch({\r\n type: types.CONTRACT_SIGNING_SET_CONTRACTS_VALUES,\r\n payload: {\r\n contractsValues: {...contractsValues}\r\n }\r\n })\r\n }\r\n};\r\n\r\nexport const setContractSigningStep = step => ({\r\n type: types.CONTRACT_SIGNING_SET_STEP,\r\n payload: {step}\r\n});\r\n\r\nexport const setContractDocumentForJob = (documentData) => ({\r\n type: types.CONTRACT_SIGNING_JOB_DOCUMENT,\r\n payload: {...documentData}\r\n});\r\n\r\nexport const setContractBlob = (contractBlob) => ({\r\n type: types.SET_CONTRACT_BLOB,\r\n payload: {contractBlob}\r\n});\r\n\r\nexport const restoreContractValues = (pagesCustomFieldsValue, savedInvoiceNumberOfPages, needToUpdateContract, contractsValues = {}) => ({\r\n type: types.CONTRACT_SIGNING_RESTORE_VALUES,\r\n payload: {pagesCustomFieldsValue, savedInvoiceNumberOfPages, needToUpdateContract, contractsValues}\r\n});\r\n\r\nexport const setContractsList = (contractsList) => ({\r\n type: types.CONTRACT_SIGNING_SET_CONTRACTS_LIST,\r\n payload: {contractsList}\r\n});\r\n","import JsonApi from \"../../../api/jsonApi\";\r\nimport {getLocalStorageItem} from \"../../look/lookNavigation/lookFunctions\";\r\nimport store from \"../../../store\";\r\nimport {setContractsList} from \"../../../actions/contractsActions\";\r\n\r\nexport const getContracts = async () => {\r\n const {contractSigningState, fabricatorState} = store.getState();\r\n if (contractSigningState.contractsReceived || !fabricatorState.settings.useContractSigning) {\r\n if (!contractSigningState.contractsReceived) {\r\n store.dispatch(setContractsList([])); // set received property true\r\n }\r\n return\r\n }\r\n try {\r\n const response = await JsonApi.getContractDocuments();\r\n console.log(\"response\", response);\r\n if (response && Array.isArray(response.data)) {\r\n const savedContracts = getLocalStorageItem(\"activeContracts\");\r\n let newOrderedList = response.data\r\n .sort((a, b) => (a.order > b.order) ? 1 : -1)\r\n .map((contract, contractIndex) => {\r\n contract.selected = false; // this is used in the checkbox\r\n contract.order = contractIndex;\r\n if (document.kvConfig.isBackend) {\r\n const fabId = document.kvConfig.userId || \"noFabUser\";\r\n if (savedContracts && savedContracts[fabId] && Array.isArray(savedContracts[fabId])\r\n && savedContracts[fabId].length > 0 && savedContracts[fabId].includes(contract.id)) {\r\n contract.selected = true;\r\n }\r\n } else if (contract.isDefault) { // default is for customer, if it is unchecked - then do not use contract at all\r\n contract.selected = true;\r\n }\r\n if (response.data.length === 1 || (fabricatorState.isAmericanStandard && contractIndex === 0)) {\r\n // We need to always have the spec sheet loading for American standard as the first doc without selecting it\r\n // If there is only one contract - it should be selected by the default\r\n contract.selected = true;\r\n }\r\n return contract;\r\n });\r\n store.dispatch(setContractsList(newOrderedList))\r\n return newOrderedList\r\n } else {\r\n store.dispatch(setContractsList([])); // set received property true\r\n return []\r\n }\r\n } catch (error) {\r\n console.log(\"error\", error);\r\n store.dispatch(setContractsList([])); // set received property true\r\n return []\r\n }\r\n};\r\n\r\nexport const getSelectedContracts = (contractsList) => {\r\n if (!Array.isArray(contractsList) || !contractsList.length) {\r\n return []\r\n }\r\n return contractsList.filter(contract => contract.selected)\r\n}\r\n\r\nexport const shouldUseContractSigning = (fabricatorSettings, allContractsList, withoutContractsCheck = false) => {\r\n if (!fabricatorSettings.useContractSigning) {\r\n return false;\r\n }\r\n if (withoutContractsCheck) {\r\n return true\r\n }\r\n if (!allContractsList) {\r\n const {contractsList} = store.getState().contractSigningState;\r\n allContractsList = contractsList;\r\n }\r\n return getSelectedContracts(allContractsList).length\r\n}\r\n\r\nexport const setContractBlobs = async (contractsList, receiptPagesLength = 0, isOfflineFirstLoad = false) => {\r\n let pagesCount = receiptPagesLength || 1; // start from 1 if receipt is broken\r\n let updatedContractsList = contractsList;\r\n for (const contract of updatedContractsList) {\r\n contract.pagesFrom = 0;\r\n contract.pagesTo = 0;\r\n if (contract.selected || isOfflineFirstLoad) {\r\n const useDocument = contract.documentWithoutTagsUrl || contract.documentUrl; // use without tags! but if not at least something\r\n if (useDocument && !contract.blobUrl) {\r\n const responseFetch = await fetch(useDocument);\r\n const blob = await responseFetch.blob();\r\n contract.blobUrl = URL.createObjectURL(blob);\r\n }\r\n contract.pagesFrom = pagesCount + (receiptPagesLength ? 1 : 0);\r\n pagesCount = pagesCount + contract.pagesCount;\r\n contract.pagesTo = pagesCount + (receiptPagesLength ? 1 : 0);\r\n }\r\n }\r\n if (isOfflineFirstLoad) {\r\n store.dispatch(setContractsList(updatedContractsList))\r\n }\r\n // console.log(\"contractsList\", contractsList);\r\n return {updatedContractsList, totalPages: pagesCount}\r\n}\r\n\r\nexport const getActiveContract = (contractsList, globalContractPage) => {\r\n return contractsList.find(contract => {\r\n return globalContractPage >=contract.pagesFrom && globalContractPage < contract.pagesTo\r\n })\r\n}\r\n\r\nexport const getAllContractsValues = (contractsList, context) => {\r\n const selectedContracts = getSelectedContracts(contractsList);\r\n const activeContract = getActiveContract(selectedContracts, context.globalContractPage);\r\n const activeContractPage = activeContract\r\n ? context.globalContractPage + 1 - activeContract.pagesFrom\r\n : 1;\r\n return {\r\n ...context,\r\n selectedContracts,\r\n activeContract,\r\n activeContractPage\r\n }\r\n}\r\n\r\nexport const changeContractsPage = (newPage, contractsList, context, changeContext) => {\r\n const {receiptPages, activeContract, globalContractPage} = context;\r\n const allValues = getAllContractsValues(contractsList, {...context, globalContractPage: newPage});\r\n // here we set false to show loader while the blob is reloading\r\n const showPage = (allValues.activeContract && activeContract && (allValues.activeContract.blobUrl === activeContract.blobUrl))\r\n || (receiptPages && (newPage <= receiptPages) && (globalContractPage <= receiptPages));\r\n\r\n changeContext({...context, globalContractPage: newPage, showPage});\r\n}\r\n","import $ from \"jquery\";\r\n\r\nimport store from \"../store\";\r\nimport {getCurrentLayout} from \"../bvcomponents/appLayout\";\r\nimport {\r\n addToCart, removeFromCart,\r\n setCanvasDimensions,\r\n setDefaultSelectionGroup,\r\n setLayoutDataParts,\r\n updateFabricatorSettings\r\n} from \"../actions/actionFunctions\";\r\nimport ActionTypes from \"./actionTypes\";\r\nimport {AVAILABLE_VISUALIZER_TYPES, getCommonVisualizerType, IS_BATHROOM_OLD_BV_SCENE} from \"../config\";\r\nimport {setVisualizerIsChanging} from \"../actions/serverFunctions\";\r\nimport {\r\n getCurrentQuoteRoomCartItem,\r\n getRoomCartItemForCategoryName,\r\n getRoomNameToCompare\r\n} from \"./categorySwitchingFunctions\";\r\nimport {updateCurrentQuote} from \"./quotesFunctions\";\r\nimport loadVisualizer from \"./loadVisualizer\";\r\nimport {loaderDisable, loaderEnable} from \"../bvcomponents/ui/loaderView\";\r\nimport {\r\n getCorrectedWizardGroupForFeature,\r\n getCurrentGroups,\r\n getDefaultMaterialsWizardItem, getFeatureGroupFromWizardGroup,\r\n showWizardInsteadOfQT\r\n} from \"../bvcomponents/look/lookNavigation/lookMain/lookWizard/lookWizardFunctions\";\r\nimport {setWizardActiveItem, setWizardIsActive, setWizardSelectedValues} from \"../actions/wizardFunctions\";\r\nimport {setActiveQuoteIndex, setQuotes} from \"../actions/roomsFunctions\";\r\nimport {getCartItemObject} from \"./helpers\";\r\n\r\nexport const fixVisualizerType = () => {\r\n if (document.kvConfig.toolVersion > 4 || IS_BATHROOM_OLD_BV_SCENE || (document.kvConfig.visualizerType === \"Fireplace\")) {\r\n document.kvConfig.layersSize = \"full_hd\";\r\n switch (document.kvConfig.visualizerType) {\r\n case \"Bathroom\":\r\n document.kvConfig.visualizerType = document.kvConfig.toolVersion === 6 ? \"bvLook\" : \"bvScene\";\r\n break;\r\n case \"Kitchen\":\r\n document.kvConfig.visualizerType = \"kvScene\";\r\n break;\r\n default:\r\n break;\r\n }\r\n } else {\r\n document.kvConfig.layersSize = \"normal\";\r\n }\r\n}\r\n\r\nexport const hasSubscriptionForRoom = (room) => {\r\n const {fabricatorState} = store.getState();\r\n const neededSubscriptionName = getCommonVisualizerType(room);\r\n return fabricatorState.fabricatorSubscriptions\r\n && fabricatorState.fabricatorSubscriptions.find(subscription => subscription && subscription.service.toLowerCase() === neededSubscriptionName);\r\n}\r\n\r\n/**\r\n * @param newVisualizerType {string}\r\n * @param subscription {object} // subscriptionInterface\r\n * @returns number {number}\r\n */\r\nexport const getToolVersionByVisualizerType = (newVisualizerType, subscription = null) => {\r\n if (newVisualizerType === AVAILABLE_VISUALIZER_TYPES.Fireplace) {\r\n return 5\r\n }\r\n if (subscription && Number.isInteger(subscription.toolVersion)) {\r\n return subscription.toolVersion\r\n }\r\n switch (newVisualizerType) {\r\n case AVAILABLE_VISUALIZER_TYPES.Bathroom:\r\n case AVAILABLE_VISUALIZER_TYPES.Kitchen: {\r\n return 4\r\n }\r\n case AVAILABLE_VISUALIZER_TYPES.bvScene:\r\n case AVAILABLE_VISUALIZER_TYPES.kvScene: {\r\n return 5\r\n }\r\n case AVAILABLE_VISUALIZER_TYPES.bvLook: {\r\n return 6\r\n }\r\n default:\r\n return 4\r\n }\r\n}\r\n\r\n\r\n/**\r\n * @param room {string} roomName\r\n * @param disableLoader {boolean} whether to remove loader or wait on anything else\r\n */\r\nexport const switchToNewVisualizerType = async (room, disableLoader = true) => {\r\n const {fabricatorState, serverState, quotesState, wizardState} = store.getState();\r\n if (!fabricatorState.settings.allowVisualizerSwitching) {\r\n return false\r\n }\r\n const {visualizersLoaded} = serverState;\r\n\r\n const existingSubscription = hasSubscriptionForRoom(room);\r\n if (!existingSubscription) {\r\n return false\r\n }\r\n let oldLayout = getCurrentLayout();\r\n oldLayout.initialized = false; // stop updating old canvas!\r\n loaderEnable();\r\n\r\n const newVisualizerType = getVisualizerTypeFromSubscription(existingSubscription);\r\n\r\n store.dispatch(setVisualizerIsChanging(true));\r\n\r\n await updateCurrentQuote(quotesState.activeQuoteIndex, newVisualizerType, false); // create quote with correct room before switching\r\n\r\n console.log(\"newVisualizerType\", newVisualizerType);\r\n\r\n if (!visualizersLoaded.includes(newVisualizerType)) {\r\n const loaded = await loadVisualizer(newVisualizerType, true);\r\n if (!loaded) {\r\n return false\r\n }\r\n }\r\n if (wizardState.wizardIsActiveObject.hasOwnProperty(newVisualizerType)\r\n && (wizardState.wizardIsActiveObject[newVisualizerType] !== wizardState.wizardIsActive)) {\r\n store.dispatch(setWizardIsActive(wizardState.wizardIsActiveObject[newVisualizerType]));\r\n }\r\n\r\n document.kvConfig.visualizerType = newVisualizerType;\r\n document.kvConfig.toolVersion = getToolVersionByVisualizerType(newVisualizerType, existingSubscription);\r\n fixVisualizerType(); // set new bathroom or kitchen\r\n store.dispatch(setCanvasDimensions()); // update canvas height and width (version 4 <> 5 switch)\r\n\r\n const layout = getCurrentLayout();\r\n if (!layout.initialized) {\r\n layout.initialized = true; // start updating the canvas in if was stopped earlier\r\n }\r\n const layoutParts = layout.getFeatures()\r\n .filter(parentGroup => parentGroup.categoryEnabled)\r\n .map((parentGroup) => parentGroup.partName);\r\n\r\n const roomFeatureGroup = layout.getFeatureGroupByPartId(\"room\");\r\n if (roomFeatureGroup) {\r\n const newActiveFeature = roomFeatureGroup.features.find(feature => getRoomNameToCompare(feature).toLowerCase() === existingSubscription.service);\r\n if (newActiveFeature) {\r\n roomFeatureGroup.activeFeature = newActiveFeature; // set it because it will be set in the materials page after switch\r\n\r\n const {quotesState, wizardState, advancedQuotingState, cartState} = store.getState();\r\n const {wizardList, wizardIsActive, allWizardsValues, wizardActiveItem} = wizardState;\r\n const {showAdvancedQuoting} = advancedQuotingState;\r\n const {cartItems} = cartState;\r\n\r\n if (showWizardInsteadOfQT(wizardList, wizardIsActive)) {\r\n const nextWizard = getDefaultMaterialsWizardItem();\r\n if (nextWizard) {\r\n if (!wizardActiveItem || (wizardActiveItem.id !== nextWizard.id)) {\r\n store.dispatch(setWizardActiveItem(nextWizard, quotesState.activeQuoteIndex));\r\n }\r\n const lastSelectedWizardInThisQuote = allWizardsValues.find(wizObject => {\r\n return wizObject.quoteIndex === quotesState.activeQuoteIndex && wizObject.isLastActiveWizard\r\n && nextWizard.id === wizObject.wizardItemId\r\n });\r\n if (!lastSelectedWizardInThisQuote || (Object.keys(lastSelectedWizardInThisQuote.wizardSelectedValues).length <= 1)) {\r\n const wizardActiveStep = 0;\r\n const currentGroups = getCurrentGroups(nextWizard, wizardActiveStep, {});\r\n if (currentGroups[0]) {\r\n const featureGroup = getFeatureGroupFromWizardGroup(currentGroups[0]);\r\n if (featureGroup && (featureGroup.partId === \"room\")) {\r\n store.dispatch(setWizardSelectedValues({\r\n [wizardActiveStep]: {\r\n wizardGroup: getCorrectedWizardGroupForFeature(currentGroups[0], newActiveFeature),\r\n selectedFeature: newActiveFeature,\r\n partId: \"room\",\r\n }\r\n }, quotesState.activeQuoteIndex, nextWizard.id));\r\n if (showAdvancedQuoting) {\r\n const selectedQuoteRoomCartItem = getCurrentQuoteRoomCartItem(cartItems, quotesState.activeQuoteIndex);\r\n if (selectedQuoteRoomCartItem) {\r\n store.dispatch(removeFromCart(selectedQuoteRoomCartItem));\r\n }\r\n const roomCartItem = getCartItemObject(newActiveFeature, 1, \"\");\r\n roomCartItem.currentQuote = quotesState.activeQuoteIndex;\r\n roomCartItem.fromWizardId = nextWizard.id;\r\n roomCartItem.fromWizardStep = wizardActiveStep;\r\n roomCartItem.fromWizardGroupId = currentGroups[0].id;\r\n store.dispatch(addToCart([roomCartItem]));\r\n }\r\n }\r\n }\r\n }\r\n }\r\n }\r\n }\r\n }\r\n\r\n store.dispatch(setLayoutDataParts(layoutParts));\r\n store.dispatch(setDefaultSelectionGroup(layoutParts[0]));\r\n store.dispatch(updateFabricatorSettings());\r\n\r\n $(window).trigger(ActionTypes.UPDATE_ALL_ITEMS);\r\n\r\n console.log(\"finish visualizer change\", document.kvConfig.visualizerType);\r\n\r\n setTimeout(() => {\r\n store.dispatch(setVisualizerIsChanging(false));\r\n }, 300) // prevent materials page canvas jumping\r\n\r\n if (disableLoader) {\r\n loaderDisable();\r\n } // else we wait in server reducer, when it is added to loaded\r\n return true\r\n}\r\n\r\nexport const getVisualizerTypeFromSubscription = (subscription) => {\r\n const toolVersionToCheck = subscription.toolVersion || 4;\r\n switch (subscription.service) {\r\n case \"Bathroom\":\r\n case \"bathroom\":\r\n return toolVersionToCheck === 6\r\n ? \"bvLook\"\r\n : toolVersionToCheck === 5 ? \"bvScene\" : \"Bathroom\"\r\n case \"Kitchen\":\r\n case \"kitchen\":\r\n return toolVersionToCheck === 5 ? \"kvScene\" : \"Kitchen\"\r\n case \"Fireplace\":\r\n case \"fireplace\":\r\n return \"Fireplace\"\r\n default:\r\n return subscription.service\r\n }\r\n}\r\n\r\n/**\r\n * @param quoteIndex {number}\r\n * @param nextVisualizerType {string}\r\n * @returns {string}\r\n */\r\nexport const getQuoteVisualizerType = (quoteIndex, nextVisualizerType) => {\r\n const {quotesState, cartState, fabricatorState, serverState} = store.getState();\r\n const {cartItems} = cartState;\r\n const {quotes, activeQuoteIndex} = quotesState;\r\n\r\n if (fabricatorState.settings.allowVisualizerSwitching) {\r\n const roomCartItem = getCurrentQuoteRoomCartItem(cartItems, quoteIndex);\r\n if (roomCartItem) {\r\n const existingSubscription = hasSubscriptionForRoom(getRoomNameToCompare(roomCartItem.cartFeature));\r\n if (existingSubscription) {\r\n return getVisualizerTypeFromSubscription(existingSubscription);\r\n }\r\n }\r\n const quoteCartItems = cartItems.filter(cartItem => {\r\n return (cartItem.currentQuote === quoteIndex) && !(cartItem.cartFeature && cartItem.cartFeature.dbFeature.autoAddToCart)\r\n && !(cartItem.cartFeature\r\n && cartItem.cartFeature.dbFeature.displayLogic\r\n && Array.isArray(cartItem.cartFeature.dbFeature.displayRules)\r\n && cartItem.cartFeature.dbFeature.displayRules.some(rule => rule))\r\n });\r\n if (quoteCartItems.length && quoteCartItems[0].fromVisualizerType\r\n && quoteCartItems.every(cartItem => cartItem.fromVisualizerType === quoteCartItems[0].fromVisualizerType)) {\r\n return quoteCartItems[0].fromVisualizerType\r\n }\r\n if (nextVisualizerType) { // if we don't have any cart items or room cart item and we are switching visualizer -> set it's type\r\n return nextVisualizerType\r\n }\r\n if (quoteIndex === activeQuoteIndex && !serverState.visualizerIsChanging) {\r\n return document.kvConfig.visualizerType\r\n }\r\n }\r\n if (quotes && quotes[quoteIndex] && quotes[quoteIndex].room) {\r\n return quotes[quoteIndex].room\r\n }\r\n return document.kvConfig.visualizerType\r\n}\r\n\r\n\r\n/**\r\n * @param featureClicked {featureInterface}\r\n * @param roomName {string}\r\n * @param fabricatorSettings {object}\r\n * @param visualizerIsChanging {boolean}\r\n * @returns {string|boolean}\r\n */\r\nexport const shouldSwitchVisualizer = (featureClicked, roomName, fabricatorSettings, visualizerIsChanging) => {\r\n if (!fabricatorSettings.allowVisualizerSwitching || visualizerIsChanging) {\r\n return false\r\n }\r\n\r\n let room = roomName || getRoomNameToCompare(featureClicked);\r\n\r\n // 2) if user clicked on unavailable visualizer -> go and set initial visualizer!\r\n const hasSubscription = hasSubscriptionForRoom(room);\r\n\r\n // 3) set main config visualizer type\r\n const newVisualizerType = hasSubscription ? getVisualizerTypeFromSubscription(hasSubscription) : null;\r\n if (newVisualizerType && (document.kvConfig.visualizerType !== newVisualizerType)) {\r\n return newVisualizerType\r\n }\r\n return false\r\n}\r\n\r\n\r\n/**\r\n * not used for now! but let it be\r\n * @param newRoomName {string}\r\n * @param needToAddRoomToCart {boolean}\r\n * @returns {Promise}\r\n */\r\nexport const createNewQuoteAfterVisualizerChange = async (newRoomName = \"\", needToAddRoomToCart = true) => {\r\n const {fabricatorState, quotesState} = store.getState();\r\n const {quotes, activeQuoteIndex} = quotesState;\r\n\r\n const currentQuote = await updateCurrentQuote(activeQuoteIndex);\r\n const newQuotes = [...currentQuote, {}];\r\n const newActiveQuoteIndex = quotes.length; // for example, if length is 2 (we are adding 2 index(0 and 1 already exist))\r\n store.dispatch(setQuotes(newQuotes));\r\n store.dispatch(setActiveQuoteIndex(newActiveQuoteIndex));\r\n if (needToAddRoomToCart) {\r\n const roomCartItem = getRoomCartItemForCategoryName(newRoomName, fabricatorState.settings);\r\n if (roomCartItem) {\r\n const newRoomCartItem = Object.assign({}, roomCartItem, {\r\n currentQuote: newActiveQuoteIndex\r\n })\r\n store.dispatch(addToCart([newRoomCartItem]));\r\n }\r\n }\r\n return Promise.resolve(true)\r\n}\r\n","export const replaceIncorrectSymbols = (string) => {\r\n return string.replace(/â€\\x9D/, \"\").replace(/\\//, \"\").replace(\"”\", \"\")\r\n}\r\n\r\n/**\r\n * @param value {number}\r\n * @param percent {number}\r\n * @returns {number}\r\n */\r\nexport const getPercentage = (value, percent) => {\r\n return (value / 100) * percent;\r\n}\r\n\r\n/**\r\n * @param value {number}\r\n * @param fromTotal {number}\r\n * @returns {number} %\r\n */\r\nexport const getPercentAmount = (value, fromTotal) => {\r\n if (!value) {\r\n return 0\r\n }\r\n return (fromTotal / value) * 100;\r\n}\r\n\r\n/**\r\n * common func for checking if need to show\r\n * @param fabricatorSettings {object}\r\n * @param forCartItems {array}\r\n * @return {array} // {currency: \"USD\", cartItems: []}\r\n */\r\nexport const getDifferentCurrencyCartItems = (fabricatorSettings, forCartItems = []) => {\r\n let totalArray = [];\r\n if (!fabricatorSettings.useDifferentCurrencies || !forCartItems.length) {\r\n return totalArray\r\n }\r\n forCartItems.forEach(cartItem => {\r\n if (cartItem.cartFeature && cartItem.cartFeature.getFeatureCurrency) {\r\n const featureCurrency = cartItem.cartFeature.getFeatureCurrency();\r\n if (featureCurrency && (featureCurrency !== fabricatorSettings.currency)) {\r\n const existingGroup = totalArray.find(filterGroupObject => {\r\n return filterGroupObject.currency === featureCurrency\r\n });\r\n if (existingGroup) {\r\n existingGroup.cartItems.push(cartItem);\r\n } else {\r\n totalArray.push({\r\n currency: featureCurrency,\r\n cartItems: [cartItem]\r\n })\r\n }\r\n }\r\n }\r\n });\r\n // console.log(\"totalArray\", totalArray);\r\n return totalArray\r\n}\r\n","import EventManager from \"../../store/sqftEventManager\";\r\nimport workspace from \"../workspace\";\r\nimport config from \"../../store/sqftConfig\";\r\nimport store from \"./../../../../../../store\";\r\nimport {\r\n setSQFTActiveButton, setSQFTActiveLevel3Button, setSQFTActiveSubMenuButton, setSQFTContextMenu,\r\n setSQFTMenuOpened,\r\n setSQFTMenuOpenedLock, setSQFTSystemDeleteMessage\r\n} from \"../../../../../../actions/sqftMenuFunctions\";\r\nimport {\r\n SIDEBAR_SHAPE_BUTTONS,\r\n SIDEBAR_NAVIGATION_BUTTONS,\r\n SIDEBAR_NAVIGATION_CABINET_BUTTONS,\r\n SIDEBAR_SLAB_BUTTONS, SHAPE_PART_ID,\r\n} from \"../../../../constants\";\r\nimport {getMousePositionOnField} from \"../../../../helpers/sqftHelper\";\r\nimport TextBox from \"./textBox\";\r\nimport sqftEventManager from \"../../store/sqftEventManager\";\r\nimport sqftConfig from \"../../store/sqftConfig\";\r\nimport {clearRotateAngles} from \"../../store/canvasHelper\";\r\nimport {updateSQFTCalculations} from \"../../../../../../actions/sqftFunctions\";\r\nimport FreeDraw from \"../controls/freeDraw\";\r\nimport Duplicate from \"../controls/duplicate\";\r\nimport sqftShape from \"../shapes/sqftShape\";\r\nimport MovableImage from \"../shapes/movableImage\";\r\nimport sqftShapeManager from \"../../store/sqftShapeManager\";\r\nimport workspaceControllers from \"../../store/workspaceControllers\";\r\nimport MiteredController from \"../controls/mitered\";\r\nimport {showFilters} from \"../../../../../../actions/actionFunctions\";\r\nimport {setGroheFiltersSearchText} from \"../../../../../../actions/groheFunctions\";\r\n\r\nconst WorkspaceEvents = function() {\r\n let self = this;\r\n this.workspace_onClick = (mousePos) => {\r\n let tookAction = false;\r\n const state = store.getState();\r\n const activeButton = state.sqftMenuState.activeButton;\r\n const isShowSlabTool = state.sqftSlabState.isShowSlabTool;\r\n const isWallsLockMode = state.sqftMenuState.isWallsLockMode;\r\n const isITextEditing = state.sqftMenuState.isITextEditing;\r\n //const shapes = workspace.getShapes();\r\n const shape = workspace.getHoverShape();\r\n const bumpoutLine = workspace.getHoverBumpout();\r\n const textBoxes = workspace.textBoxManager.getTextBoxes();\r\n let cursor = EventManager.getCursor();\r\n\r\n if (activeButton === SIDEBAR_SHAPE_BUTTONS.freeDraw\r\n && !workspace.getHoverPoint()\r\n ) {\r\n FreeDraw.initDraw(isWallsLockMode);\r\n FreeDraw.drawShape(mousePos);\r\n return false;\r\n }\r\n\r\n if (workspaceControllers.spacer.isJustCreated) {\r\n workspaceControllers.spacer.setIsJustCreated(false);\r\n return false;\r\n }\r\n\r\n if (shape || workspace.getLineWithMovingBumpout()) {\r\n const sideOpened = state.sqftMenuState.menuOpened;\r\n\r\n if (!sideOpened\r\n && !isShowSlabTool\r\n && activeButton !== \"move\"\r\n && activeButton !== \"label\"\r\n && activeButton !== \"rotate\"\r\n && activeButton !== \"angle\"\r\n && activeButton !== \"freeDraw\"\r\n && activeButton !== \"resize\"\r\n && activeButton !== \"waterfall\"\r\n && cursor && (cursor[0] === \"move\" || cursor[0] === \"grab\")\r\n ) {\r\n store.dispatch(setSQFTMenuOpened(\"move\"));\r\n store.dispatch(setSQFTActiveButton(\"move\"));\r\n resetEvents();\r\n config.workspace.menuItemActive = \"move\";\r\n //this.sideBarButtonClick(nodes.sidebar.mainNavButton, !config.highlight.rotateAngle);\r\n }\r\n store.dispatch(setSQFTMenuOpenedLock(true));\r\n } else {\r\n //1) close opened menus\r\n // todo sqft-react\r\n // this.hideSidebarSide();\r\n // this.hideSideBarContent();\r\n this.hideAngleTooltip();\r\n //2) remove active class from main button\r\n\r\n // todo sqft-react\r\n //this.removeActiveClassFromMainButton()\r\n //nodes.sidebar.mainNavButton.classList.remove(classes.buttonActiveClass);\r\n }\r\n\r\n if (activeButton) { //if (config.workspace.menuItemActive) {\r\n //tookAction = true;\r\n let resetCursor = false;\r\n if (shape) {\r\n let line;\r\n switch(activeButton) { // switch(config.workspace.menuItemActive) {\r\n case \"delete\":\r\n //todo priority\r\n if (textBoxes.length > 0) {\r\n for (let textBox of textBoxes) {\r\n if (textBox.box.mixin.movable.state.hovering) {\r\n //box.delete();\r\n return;\r\n }\r\n }\r\n }\r\n if (shape.type === \"appliances\") {\r\n workspace.removeShape(shape);\r\n } else if (shape.type === \"slabImage\" || shape.partId === SHAPE_PART_ID.slabPlaceHolder) {\r\n workspace.updateRemovedFeatures(shape);\r\n workspace.removeSlabImage(shape);\r\n } else {\r\n const line = shape.getHoverSegment() || shape.getHoverSegmentOutlineCorner();\r\n const point = shape.getHoverPointOnClick(mousePos);\r\n const cornerLine = shape.getHoverSegmentCorner();\r\n const miteredPoint = shape.getHoverMiteredPoint();\r\n const label = shape.getHoverLabel();\r\n\r\n if (cornerLine) {\r\n if (cornerLine.getAttachedItems()) {\r\n cornerLine.deleteAttachedItem();\r\n } else {\r\n cornerLine.line.to.removeAttachedItem();\r\n }\r\n } else if (point && (point.getArcLength() || point.getAngle() || point.getMiteredFeatureId())) {\r\n point.removeAttachedItem();\r\n tookAction = false;\r\n } else if (miteredPoint && line) {\r\n line.miteredOverlay.deletePoint(miteredPoint);\r\n line.miteredOverlay.resetHoveredPoint();\r\n } else if (line && line.getAttachedItems()) {\r\n //workspace.removeShape(line.getAttachedShape());\r\n line.deleteAttachedItem();\r\n } else if (label) {\r\n const lineWithTheLabel = label.getParent();\r\n lineWithTheLabel.labelOverlay.destroy();\r\n lineWithTheLabel.labelOverlay = null;\r\n } else if (!isShowSlabTool) {\r\n // shapeToDelete = shape;\r\n // self.callConfirmPopup(mousePos);\r\n store.dispatch(setSQFTSystemDeleteMessage({isOpened: true, shape: shape}));\r\n tookAction = false;\r\n } else {\r\n tookAction = false;\r\n }\r\n }\r\n //config.controls.delete.removeClass(config.activeClass);\r\n //nodes.designPatterns.delete.removeClass(config.activeClass);\r\n break;\r\n case \"flip-h\":\r\n shape.flip(shape.FlipDirection.HORIZONTAL);\r\n config.controls.flipH.removeClass(config.activeClass);\r\n resetCursor = true;\r\n break;\r\n case \"flip-v\":\r\n shape.flip(shape.FlipDirection.VERTICAL);\r\n config.controls.flipV.removeClass(config.activeClass);\r\n resetCursor = true;\r\n break;\r\n case \"rotate-right\":\r\n // rotate v1 disabled\r\n // shape.rotate(90, shape.Direction.RIGHT);\r\n //config.controls.rotateRight.removeClass(config.activeClass);\r\n //nodes.designPatterns.rotateRight.removeClass(config.activeClass);\r\n break;\r\n case \"rotate-left\":\r\n // activated from activeButton\r\n //shape.rotate(90, shape.Direction.LEFT);\r\n\r\n //config.controls.rotateLeft.removeClass(config.activeClass);\r\n //nodes.designPatterns.rotateLeft.removeClass(config.activeClass);\r\n break;\r\n case SIDEBAR_NAVIGATION_BUTTONS.label:\r\n EventManager.stealCursor(true);\r\n EventManager.resetCursor(self);\r\n\r\n if (store.getState().sqftMenuState.contextMenu.isOpened) {\r\n store.dispatch(setSQFTContextMenu({isOpened: false}));\r\n }\r\n store.dispatch(setSQFTContextMenu({isOpened: true, activeMenu: \"labels\", pos: mousePos, parent: shape}));\r\n tookAction = false;\r\n\r\n break;\r\n default:\r\n tookAction = false;\r\n break;\r\n }\r\n switch(activeButton) {\r\n case SIDEBAR_SLAB_BUTTONS.rotate:\r\n //rotate in slab and regular mode\r\n //rotate v2\r\n //shape.rotate(90, shape.Direction.LEFT, isShowSlabTool);\r\n //todo shape rotation with bumpout disabled\r\n if (sqftShapeManager.canShapeBeRotated(shape)) {\r\n if (!shape.getIsRotatable()) {\r\n sqftShapeManager.closeRotatablePopups(shape);\r\n sqftShapeManager.setShapeAsRotatable(shape);\r\n sqftShapeManager.rotateShapeTo90Deg(shape);\r\n } else {\r\n sqftShapeManager.disableRotatableState(shape);\r\n }\r\n }\r\n tookAction = false;\r\n break;\r\n case SIDEBAR_NAVIGATION_BUTTONS.duplicate:\r\n if (shape instanceof sqftShape && !isShowSlabTool\r\n || shape instanceof sqftShape && shape.partId === SHAPE_PART_ID.slabPlaceHolder\r\n ) {\r\n Duplicate.cloneShape(shape);\r\n } else if (shape instanceof MovableImage) {\r\n Duplicate.cloneMovableImage(shape);\r\n }\r\n\r\n tookAction = false;\r\n\r\n break;\r\n case SIDEBAR_NAVIGATION_CABINET_BUTTONS.crown:\r\n //crown molding displayed as edges and backsplashes\r\n //shape.addCrownMolding();\r\n break\r\n case SIDEBAR_NAVIGATION_CABINET_BUTTONS.end_panel:\r\n case SIDEBAR_NAVIGATION_BUTTONS.end_cap:\r\n //crown molding displayed as edges and backsplashes\r\n //shape.addCrownMolding();\r\n break;\r\n case SIDEBAR_NAVIGATION_CABINET_BUTTONS.spacer:\r\n //line = shape.getHoverSegment(true);\r\n line = workspace.getHoveredLine();\r\n if (line) {\r\n workspaceControllers.spacer.createSpacer(line.from, line.to, shape.getPosition());\r\n line.resetState();\r\n shape.resetState();\r\n tookAction = false // see QCDES-4731 we need to call mouseUp on each shape\r\n }\r\n //store.dispatch(setSQFTActiveButton(SIDEBAR_NAVIGATION_CABINET_BUTTONS.spacer));\r\n //store.dispatch(setSQFTMenuOpened(false));\r\n\r\n break;\r\n default:\r\n break;\r\n }\r\n } else if (bumpoutLine) {\r\n switch(activeButton) {\r\n case \"delete\":\r\n //workspace.removeShape(bumpoutLine.getAttachedShape());\r\n bumpoutLine.deleteAttachedItem();\r\n tookAction = false;\r\n break;\r\n default:\r\n break;\r\n }\r\n } else {\r\n if (activeButton === \"rotate-left\") {\r\n //EventManager.stealCursor(true);\r\n //EventManager.setCursor(\"rotate-left\", self, true);\r\n } else if (activeButton === \"delete\") {\r\n EventManager.stealCursor(true);\r\n EventManager.setCursor(\"delete\", self, true);\r\n } else if (activeButton === SIDEBAR_NAVIGATION_BUTTONS.text) {\r\n if (!workspace.textBoxManager.isBoxActive()\r\n && !isITextEditing\r\n ) {\r\n let pos = getMousePositionOnField(mousePos.x, mousePos.y);\r\n let textBox = new TextBox(pos);\r\n textBox.init();\r\n\r\n console.log(config.workspace.menuItemActive);\r\n\r\n //this.navButtonClick(nodes.sidebar.navButtons[0]); // change icon\r\n config.workspace.menuItemActive = null; // reset action\r\n }\r\n }\r\n tookAction = false;\r\n resetCursor = false;\r\n //$('#design-default').click();\r\n }\r\n const state = store.getState();\r\n const updateCalculations = state.sqftState.updateCalculations;\r\n store.dispatch(updateSQFTCalculations(updateCalculations + 1));\r\n if (resetCursor) {\r\n EventManager.resetCursor(self);\r\n config.workspace.menuItemActive = null;\r\n }\r\n }\r\n\r\n return tookAction;\r\n };\r\n\r\n this.init = () => {\r\n EventManager.addEvent(\r\n EventManager.events.MOUSE_UP,\r\n self.workspace_onClick,\r\n self,\r\n EventManager.priorities.OVERALL\r\n );\r\n };\r\n\r\n this.hideAngleTooltip = () => {\r\n // const input = document.getElementById(\"angle_input\");\r\n const angleTooltip = document.getElementById(\"angle-tooltip\");\r\n const inputArrows = [].slice.call(document.querySelectorAll(\"#angle-tooltip [data-action]\"));\r\n const inputSubmit = [].slice.call(document.querySelectorAll('[data-action=\"angle-input-submit\"]'));\r\n\r\n if (angleTooltip) {\r\n angleTooltip.style.display = \"none\";\r\n inputArrows.forEach(function (elem) {\r\n elem.parentNode.replaceChild(elem.cloneNode(true), elem);\r\n });\r\n inputSubmit[0].removeEventListener('click', self.deActivateRotateAngle);\r\n }\r\n }\r\n};\r\n\r\n//todo\r\nconst resetEvents = function () {\r\n EventManager.stealCursor(true);\r\n EventManager.resetCursor(self);\r\n workspace.setAllowEdges(false);\r\n workspace.setAllowBumpoutEdges(false);\r\n config.workspace.menuItemActive = null\r\n};\r\n\r\nexport const clearAllMenusEvents = () => {\r\n sqftEventManager.stealCursor(true); // making cursor default\r\n sqftEventManager.resetCursor(sqftEventManager.currentCursorOwner); // ??\r\n sqftConfig.workspace.menuItemActive = null; // out of resize, rotate, delete\r\n // let zz= sqftEventManager;\r\n // console.log(zz)\r\n // debugger // eslint-disable-line no-debugger\r\n\r\n workspace.setAllowEdges(false); // removing sizing lines\r\n workspace.setAllowBumpoutEdges(false); // removing sizing lines\r\n workspace.setAllowMiteredEdges(false); // removing mitered lines\r\n\r\n if (workspace.miteredController instanceof MiteredController) {\r\n workspace.miteredController.deregisterEvents();\r\n }\r\n clearRotateAngles();\t// remove rotateAngle\r\n sqftConfig.highlight.points = false;\t// remove radiuses\r\n sqftConfig.highlight.lines = false; // disable lines highlighting\r\n sqftConfig.highlight.type = ''; // disable lines highlighting\r\n sqftConfig.highlight.id = null; // disable lines highlighting\r\n sqftEventManager.removeStuckCursorEvents();\r\n\r\n store.dispatch(setSQFTContextMenu({isOpened: false}));\r\n store.dispatch(setSQFTActiveButton(\"\"));\r\n store.dispatch(setSQFTActiveSubMenuButton(\"\"));\r\n store.dispatch(setSQFTActiveLevel3Button(null));\r\n store.dispatch(setGroheFiltersSearchText(\"\"));\r\n store.dispatch(showFilters(false));\r\n FreeDraw.drawFinish();\r\n FreeDraw.destroy();\r\n sqftShapeManager.disableRotatableStateForAllShapes();\r\n};\r\n\r\n\r\n\r\nexport default new WorkspaceEvents();\r\n","import React, {Component} from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport {connect} from \"react-redux\";\r\nimport {FormattedMessage, injectIntl} from \"react-intl\";\r\n\r\nclass FeatureWizardSteps extends Component {\r\n\r\n static propTypes = {\r\n availableSteps: PropTypes.array,\r\n featureWizardStep: PropTypes.number,\r\n setFeatureWizardStep: PropTypes.func,\r\n exitFeatureWizard: PropTypes.func,\r\n getFilterDisplayName: PropTypes.func.isRequired,\r\n toggleWizardFilterSelection: PropTypes.func,\r\n allProducts: PropTypes.bool,\r\n allStepsCompleted: PropTypes.bool,\r\n finishClicked: PropTypes.bool,\r\n showFeatureWizard: PropTypes.bool,\r\n };\r\n\r\n setFeatureWizardStep = (nextStep, disabled) => {\r\n\r\n if (disabled) {\r\n return false;\r\n }\r\n\r\n switch (nextStep) {\r\n case \"back\":\r\n nextStep = this.props.featureWizardStep === 0 ? 0 : this.props.featureWizardStep - 1;\r\n break;\r\n case \"next\":\r\n if (this.props.featureWizardStep === (this.props.availableSteps.length - 1)) {\r\n this.props.exitFeatureWizard(this.props.availableSteps);\r\n return;\r\n } else {\r\n nextStep = this.props.featureWizardStep + 1;\r\n }\r\n break;\r\n default:\r\n break;\r\n }\r\n const currentStep = this.props.availableSteps[nextStep - 1];\r\n const fabricatorSettings = this.props.fabricatorSettings;\r\n if ((nextStep > this.props.featureWizardStep) && currentStep && !this.props.allStepsCompleted\r\n && (!currentStep.selectedValueId || (fabricatorSettings.leadCapture && currentStep.selectedItemIsLocked && !this.props.isPhoneNumberValidated))) {\r\n return\r\n }\r\n if (this.props.showFeatureWizard) {\r\n this.props.setFeatureWizardStep(nextStep);\r\n if (nextStep === 0) {\r\n this.props.toggleWizardFilterSelection(false);\r\n }\r\n } else {\r\n this.props.enableFeatureWizard(nextStep);\r\n }\r\n };\r\n\r\n render() {\r\n // console.log('features top', this.props.features);\r\n const currentStep = this.props.availableSteps[this.props.featureWizardStep];\r\n // const nextStep = this.props.availableSteps[this.props.featureWizardStep + 1];\r\n const isLastStep = this.props.featureWizardStep === this.props.availableSteps.length - 1;\r\n\r\n const fabricatorSettings = this.props.fabricatorSettings;\r\n const nextStepIsLocked = currentStep && !this.props.allStepsCompleted && fabricatorSettings.leadCapture && currentStep.selectedItemIsLocked && !this.props.isPhoneNumberValidated;\r\n\r\n const lastStepIsDisabled = currentStep && (!currentStep.selectedValueId || nextStepIsLocked);\r\n\r\n return (\r\n \r\n } else if (this.props.windowWidth < 800) {\r\n return \r\n } else {\r\n return \r\n }\r\n };\r\n\r\n buttonIsDisabled = (partId) => {\r\n const layout = getCurrentLayout();\r\n return this.props.activeSubPart.partId === partId\r\n || (document.kvConfig.visualizerType === \"Kitchen\" && partId === \"center_island_cabinet\"\r\n && !layout.getCurrentLayoutAbbreviation().includes(\"I\"));\r\n }\r\n\r\n renderDropDown = () => {\r\n const CABINETGROUPS = this.getCabinetGroups();\r\n const cabinetsApplyTo = this.getCabinetsApplyTo();\r\n const layout = getCurrentLayout();\r\n\r\n return (\r\n \r\n {CABINETGROUPS.map(partId => {\r\n const disabledButton = this.buttonIsDisabled(partId);\r\n return (\r\n \r\n disabledButton ? false : this.toggleCabinetsApplyTo(partId)}/>\r\n disabledButton ? false : this.toggleCabinetsApplyTo(partId)}>\r\n {this.getButtonName(partId, layout)}\r\n \r\n \r\n )\r\n })}\r\n \r\n )\r\n };\r\n\r\n getCabinetGroups = () => {\r\n if (document.kvConfig.visualizerType === \"bvScene\") {\r\n return CABINET_GROUP_BATHROOM\r\n }\r\n return [...CABINET_GROUP].filter(partId => partId !== \"fridge_enclosure\");\r\n };\r\n\r\n getCabinetsApplyTo = () => {\r\n return document.kvConfig.visualizerType === \"bvScene\" ? this.props.cabinetsApplyToBathroom : this.props.cabinetsApplyTo;\r\n };\r\n\r\n getSetCabinetsApplyTo = () => {\r\n return document.kvConfig.visualizerType === \"bvScene\" ? this.props.setCabinetsApplyToBathroom : this.props.setCabinetsApplyTo;\r\n };\r\n\r\n render() {\r\n const CABINETGROUPS = this.getCabinetGroups();\r\n if (this.props.showAsDropdown) {\r\n return this.renderDropDown()\r\n }\r\n const cabinetsApplyTo = this.getCabinetsApplyTo();\r\n const layout = getCurrentLayout();\r\n return (\r\n }\r\n */\r\n navigationSubItems(filters, searchText) {\r\n return this.getFeaturesBySearchText(this.getFilteredFeaturesByFilters(filters), searchText)\r\n .map(_ => new DesignNavigationItem(_.featureName, _)); // 1) filter them by filters 2) filter them by search\r\n }\r\n\r\n navigationSubItemsWithFilterWithInactive(propName, propValue, featuresToCheck = this.features) {\r\n const refactoredArray = featuresToCheck.map((feature) => {\r\n feature.matchesMetaFailed = !(feature.matchesMetaForCondition(propName, propValue));\r\n return feature\r\n });\r\n return refactoredArray.map(_ => new DesignNavigationItem(_.featureName, _));\r\n }\r\n\r\n /**\r\n * Called before setLayers, so that each Feature can set the zIndex for its layers\r\n * @param zIndexes {object}\r\n */\r\n setZIndex(zIndexes) {\r\n if(zIndexes) {\r\n this.getRelatedItems().forEach(_ => _.setZIndex(zIndexes));\r\n }\r\n }\r\n\r\n /**\r\n * Each feature will load its data from teh data object which comes from REST\r\n * @param dbFeature {object}\r\n * @return boolean // needed for break logic\r\n */\r\n load(dbFeature) {\r\n console.log('exception load', this, dbFeature);\r\n Exception.NotImplementedBaseClass();\r\n }\r\n\r\n /**\r\n * Will return the list of sub-parts if any, i.e. for Vanity it will be Mirror, Toilet, Sink, ...\r\n * !@param withHidden {boolean}\r\n * @returns {Array.}\r\n */\r\n subParts(withHidden = true) {\r\n return this.getRelatedItems()\r\n .filter(item => this.filterRelatedItem(item, withHidden))\r\n .map(_ => new DesignNavigationItem(_.partName, _));\r\n }\r\n\r\n filterRelatedItem(relatedItem, withHidden) {\r\n return withHidden\r\n ? relatedItem.visible && relatedItem.featureGroupEnabled\r\n : relatedItem.visible\r\n && relatedItem.featureGroupEnabled\r\n && (relatedItem.featureGroupVisible || (!relatedItem.featureGroupVisible && document.kvConfig.isBackend))\r\n }\r\n\r\n /**\r\n * Returns the navigation item to be displayed in navigation bar\r\n */\r\n navigationItem() {\r\n Exception.NotImplementedBaseClass(this);\r\n }\r\n\r\n /**\r\n * In case of Vanity is Custom & Complete.\r\n * Usually called for Complex parts, such as Vanities\r\n */\r\n subTypes() {\r\n // Exception.NotImplementedBaseClass(this);\r\n return []\r\n }\r\n\r\n /**\r\n * Converts a given sub-type to string\r\n // * @param subType\r\n * @returns {null}\r\n */\r\n subTypeToString() {\r\n return null;\r\n }\r\n\r\n /**\r\n * Checked whether the given sub-type has items, i.e. Vanity.Complete has\r\n */\r\n isSubTypeWithItems() {\r\n Exception.NotImplementedBaseClass(this);\r\n }\r\n\r\n activeSubType() {\r\n Exception.NotImplementedBaseClass(this);\r\n }\r\n\r\n getFilteredFeaturesByFilters(filters, featuresArray = this.features) {\r\n return !isEmpty(filters) ? filterFeaturesByValues(featuresArray, filters) : (featuresArray || []);\r\n }\r\n\r\n getFeaturesBySearchText(arrayToFilter, searchText) {\r\n if (!searchText) {\r\n return arrayToFilter\r\n }\r\n if (IS_LIXIL_UI) {\r\n return this.getFeaturesBySearchTextLixil(arrayToFilter, searchText)\r\n }\r\n const filterGroups = store.getState().filterState.filterGroups;\r\n return arrayToFilter.filter(feature => {\r\n const _searchText = trim(searchText.toLowerCase());\r\n let res = (!!feature);\r\n if (res) {\r\n const featureFilterValueIds = Object.assign(feature.dbFeature.filterValueIDs, feature.dbFeature.fabFilterValueIDs);\r\n let isPartName = feature.getFeatureName && feature.getFeatureName().toLowerCase().includes(_searchText);\r\n let isFilterName = false;\r\n\r\n if(!isPartName) {\r\n for(let filterGroupId in featureFilterValueIds) {\r\n let filterGroupIds = featureFilterValueIds[filterGroupId];\r\n for(let filterIndex in filterGroupIds) {\r\n let filterId = filterGroupIds[filterIndex];\r\n if(filterGroups[filterGroupId] && filterGroups[filterGroupId].values) {\r\n let filterGroup = filterGroups.find(fg => fg.id === filterGroupId);\r\n if (filterGroup && filterGroup.values) {\r\n let filter = filterGroup.values.find( fgv => fgv.id === filterId);\r\n if (filter) {\r\n isFilterName = (isFilterName || filter.displayText.toLowerCase().includes(_searchText) || filter.value.toLowerCase().includes(_searchText));\r\n }\r\n }\r\n }\r\n }\r\n }\r\n }\r\n\r\n res = isPartName || isFilterName;\r\n }\r\n return res;\r\n })\r\n }\r\n\r\n getFeaturesBySearchTextLixil(arrayToFilter, searchText) {\r\n const filterGroups = store.getState().filterState.filterGroups;\r\n const collectionFilterGroup = filterGroups.find(group => group.name === \"Collection\");\r\n const _searchText = searchText.trim().toLowerCase();\r\n\r\n return arrayToFilter.filter(feature => {\r\n const featureFilterValueIds = getAllFeatureFilters(feature);\r\n const sku = (feature.getSplittedFeatureName() || \"\").toLowerCase();\r\n const customDisplayName = (feature.dbFeature.customDisplayName || \"\").toLowerCase();\r\n\r\n let res = (!!feature);\r\n if (res) {\r\n let matchByName = (sku && sku.includes(_searchText)) || (customDisplayName && customDisplayName.includes(_searchText));\r\n let isFilterName = false;\r\n\r\n if (!matchByName && collectionFilterGroup && Array.isArray(featureFilterValueIds[collectionFilterGroup.id])) {\r\n matchByName = featureFilterValueIds[collectionFilterGroup.id].some(filterId => {\r\n return collectionFilterGroup.values.some(fValue => {\r\n return (fValue.id === filterId) && fValue.displayText && fValue.displayText.toLowerCase().includes(_searchText)\r\n })\r\n })\r\n }\r\n\r\n if (!matchByName) {\r\n for(let filterGroupId in featureFilterValueIds) {\r\n let filterGroupIds = featureFilterValueIds[filterGroupId];\r\n for(let filterIndex in filterGroupIds) {\r\n let filterId = filterGroupIds[filterIndex];\r\n if(filterGroups[filterGroupId] && filterGroups[filterGroupId].values) {\r\n let filterGroup = filterGroups.find(fg => fg.id === filterGroupId);\r\n if (filterGroup && filterGroup.values) {\r\n let filter = filterGroup.values.find(fgv => fgv.id === filterId);\r\n if (filter) {\r\n isFilterName = (isFilterName || filter.displayText.toLowerCase().includes(_searchText) || filter.value.toLowerCase().includes(_searchText));\r\n }\r\n }\r\n }\r\n }\r\n }\r\n }\r\n\r\n res = matchByName || isFilterName;\r\n }\r\n return res;\r\n })\r\n }\r\n\r\n /**\r\n * Returns the fabricator feature id\r\n * @returns {int}\r\n */\r\n id() {\r\n return this.dbFeature.id;\r\n }\r\n\r\n /**\r\n * Returns the fabricator feature id\r\n * @param featureId {number}\r\n * @param partsToo {boolean}\r\n * @returns {feature}\r\n */\r\n getFeatureById(featureId, partsToo = false) {\r\n const neededId = +featureId;\r\n if (!this.features && (!partsToo || !this.featuresParts)) {\r\n console.error(\"This featureGroup has no features array:\", this)\r\n return null\r\n }\r\n // if (partsToo) {\r\n // return this.features.find(f => f.dbFeature.id === neededId) || this.featuresParts.find(f => f.dbFeature.id === neededId)\r\n // }\r\n // return this.features.find(f => f.dbFeature.id === neededId)\r\n const allFeatures = partsToo ? [...this.features, ...this.featuresParts] : this.features;\r\n for (let i = 0; i < allFeatures.length; i++) {\r\n if (allFeatures[i].dbFeature.id === neededId) {\r\n return allFeatures[i];\r\n }\r\n }\r\n return null\r\n }\r\n\r\n getFeatureByPartName(partName, inParts = false) {\r\n if (!partName) {\r\n return null\r\n }\r\n partName = partName.split(\" \").join(\"\").toLowerCase(); // for example, \"Natural Stone Sofitel Gold\" & \"Natural Stone Sofitel Gold\" - different names\r\n const arrayToFind = inParts && this.featureParts ? this.featureParts.map(feature => { return {part: feature} }) : this.navigationSubItems();\r\n const matchingItem = arrayToFind.find(navFeature => {\r\n const feature = navFeature.part;\r\n if (!feature.partName || feature.notAvailableInVisualizer) {\r\n return false\r\n }\r\n if (!feature._partNameWithoutSpaces) {\r\n feature._partNameWithoutSpaces = feature.getMatchingFeatureName().split(\" \").join(\"\").toLowerCase();\r\n }\r\n return partName === feature._partNameWithoutSpaces\r\n });\r\n return matchingItem ? matchingItem.part : null\r\n }\r\n\r\n getDefaultFeature() {\r\n\r\n }\r\n\r\n /**\r\n * Returns the active feature id\r\n * @param placeholdersNeeded\r\n * @returns {int}\r\n */\r\n activeFeatureId(placeholdersNeeded = false) {\r\n return placeholdersNeeded && this.placeholderFeature && !this.placeholderChanged\r\n ? this.placeholderFeature.dbFeature.id\r\n : this.activeFeature.dbFeature.id\r\n }\r\n\r\n /**\r\n * @param feature {Part}\r\n * @returns {*}\r\n */\r\n featureDefinitionId(feature = null) {\r\n const dbFeature = feature ? feature.dbFeature : this.dbFeature;\r\n return dbFeature.featureDefinitionID;\r\n }\r\n\r\n handleClick() {}\r\n\r\n disabledClick() {}\r\n\r\n /**\r\n * Used for metaData conditions\r\n * @returns Array\r\n */\r\n getArrayOfConditions() {\r\n return []\r\n }\r\n\r\n updateLocalStorage() {\r\n const layout = this.layout || this.getParent().layout || this.getParent().getParent().layout;\r\n layout.updateLocalStorage();\r\n }\r\n\r\n /**\r\n * Used for complex parts, i.e. Vanity - Complex, Custom\r\n // * @param subType\r\n */\r\n handleSubTypeClick() {\r\n Exception.NotImplementedBaseClass();\r\n }\r\n\r\n /**\r\n * Handles the click on sub-part buttons, i.e. for Vanity on its buttons such as Toilet, Sink...\r\n // * @param subPart\r\n */\r\n handleSubPartClick() {\r\n // Exception.NotImplementedBaseClass();\r\n }\r\n\r\n /**\r\n * Returns first value Id from a specific group\r\n * @param groupId\r\n */\r\n filterValue(groupId) {\r\n return this.dbFeature.filterValueIDs[groupId][0];\r\n }\r\n\r\n /**\r\n * Do something specific after layer changes\r\n // * @param layoutType\r\n */\r\n changeLayout() {\r\n\r\n }\r\n\r\n /**\r\n * Do something specific after Type Changed (returns null by default for all Parts)\r\n */\r\n setDefaultPartAfterSubTypeClick() {\r\n return null\r\n }\r\n\r\n getRelatedItems() {\r\n return this.relatedItems\r\n }\r\n\r\n /**\r\n * Set default layer for each relatedItem of the group.\r\n * @param layout {Layout}\r\n */\r\n setDefault(layout) {\r\n this.relatedItems.forEach(relatedItem => relatedItem.setDefault(layout));\r\n }\r\n\r\n setFeatureGroupDefault(layout, setNotInVisFeature = this.hasNoVisualizerLayers) {\r\n const conditions = this.getArrayOfConditions ? this.getArrayOfConditions() : null;\r\n let filteredFeatures = conditions ? this.features.filter(feature => {\r\n return setNotInVisFeature\r\n ? feature.matchesMetaForArrayOfConditions(conditions)\r\n : feature.dbFeature.s3Bindings && feature.matchesMetaForArrayOfConditions(conditions)\r\n }) : this.features;\r\n\r\n if (document.kvConfig.visualizerType === \"bvLook\" && !filteredFeatures.length\r\n && (getCurrentRoomType(layout) === LOOK_ROOM_TYPES.as) && !(this.partId.includes(\"_wall\") && this.hasAdditionalParts)) {\r\n filteredFeatures = this.getArrayOfConditions\r\n ? this.featuresParts.filter(f => f.dbFeature.s3Bindings && f.matchesMetaForArrayOfConditions(conditions))\r\n : this.featuresParts;\r\n }\r\n\r\n const matchingFeatureExist = this.tryToSetTheSameFeature(filteredFeatures, null);\r\n if (!matchingFeatureExist) {\r\n this.activeFeature = filteredFeatures[0];\r\n }\r\n const features = this.features;\r\n if (IS_LIXIL_UI && !this.activeFeature && !this.activeNotInVisualizerFeature && Array.isArray(features)\r\n && features.length && features.every(feature => feature.notAvailableInVisualizer)) {\r\n this.activeNotInVisualizerFeature = features[0];\r\n }\r\n // this.placeholderFeature = this.features.find((feature) => {\r\n // return feature.dbFeature.displayName && feature.dbFeature.displayName.includes(\"laceholder\");\r\n // });\r\n if (this.hasAdditionalParts) {\r\n this.activeFeatureParts = this.setActiveFeatureParts();\r\n }\r\n if (this.layerPositions) {\r\n if (this.activeFeature) {\r\n this.setLayerPositions()\r\n } else {\r\n Object.keys(this.layerPositions).forEach(key => {\r\n this.layerPositions[key] = null;\r\n })\r\n }\r\n }\r\n }\r\n\r\n tryToSetTheSameFeature(filteredFeatures = [], partName = \"\") {\r\n const currentActiveFeature = this.activeFeature;\r\n if (currentActiveFeature && currentActiveFeature.partName) {\r\n let splittedFromTheLayoutName = partName && this.removeLayoutFromPartName\r\n ? this.removeLayoutFromPartName(partName)\r\n : this.activeFeature.getMatchingFeatureName();\r\n this.activeFeature = filteredFeatures.find(feature => {\r\n return feature.getMatchingFeatureName() === splittedFromTheLayoutName\r\n });\r\n if (!this.activeFeature) {\r\n const filterGroups = store.getState().filterState.filterGroups;\r\n const colorFilterValue = getColorFilterValue(currentActiveFeature, filterGroups);\r\n if (colorFilterValue) {\r\n this.activeFeature = filteredFeatures.find(feature => {\r\n const currentColorFilterValue = getColorFilterValue(feature, filterGroups);\r\n return currentColorFilterValue && currentColorFilterValue.id === colorFilterValue.id\r\n });\r\n }\r\n }\r\n }\r\n if (!this.activeFeature && this.selectedFeaturesHistory) {\r\n for (let featureName of this.selectedFeaturesHistory.slice(0, 5)) { // check first five, no need to go further\r\n const foundFeature = this.getFeatureByPartName(featureName);\r\n if (foundFeature) {\r\n const prevFeatureMatchingName = foundFeature.getMatchingFeatureName();\r\n const foundFinally = filteredFeatures.find(feature => {\r\n return feature.getMatchingFeatureName() === prevFeatureMatchingName\r\n });\r\n if (foundFinally) {\r\n this.activeFeature = foundFinally;\r\n break;\r\n }\r\n }\r\n }\r\n }\r\n return !!this.activeFeature\r\n }\r\n\r\n getFeatureName = () => {\r\n const originalName = this.metaData.ActualDisplayedName\r\n ? this.dbFeature.customDisplayName && (this.dbFeature.customDisplayName !== this.dbFeature.sharedFeatureName)\r\n ? this.dbFeature.customDisplayName\r\n : this.metaData.ActualDisplayedName[0]\r\n : this.dbFeature.customDisplayName || this.partName || \"\";\r\n const checkedCatName = checkIfInCatProperty(this, \"inCatName\", originalName) || originalName || \"\";\r\n const parent = this.getParent();\r\n return checkedCatName.replace((this.dbFeature.customGroupName || parent.dbName || parent.partName) + \" - \", \"\");\r\n };\r\n\r\n getLowerCasedCustomDisplayName = () => {\r\n if (!this._lowercaseCustomDisplayName) {\r\n this._lowercaseCustomDisplayName = (this.dbFeature.customDisplayName || this.partName || '')\r\n .trim()\r\n .toLowerCase()\r\n .replace('room - ', '')\r\n }\r\n return this._lowercaseCustomDisplayName;\r\n };\r\n\r\n getLowerCasedSharedFeatureName = () => {\r\n if (!this._lowercaseSharedFeatureName) {\r\n this._lowercaseSharedFeatureName = (this.dbFeature.sharedFeatureName || this.partName || '')\r\n .trim()\r\n .toLowerCase()\r\n .replace('room - ', '')\r\n }\r\n return this._lowercaseSharedFeatureName;\r\n };\r\n\r\n /**\r\n * @param dbFeaturesArray {[dbFeatureInterface]}\r\n * @param pageSize {number}\r\n * @param setNextPage {boolean}\r\n * @param layoutAbbr {string}\r\n * @param loadedPage {number|null}\r\n * @param fromSearch {boolean}\r\n * @param setCustomConfigurationsAfter {boolean}\r\n */\r\n setGroupFeatures(dbFeaturesArray,\r\n pageSize = 1000,\r\n setNextPage = true,\r\n layoutAbbr = \"\",\r\n loadedPage = null,\r\n fromSearch = false,\r\n setCustomConfigurationsAfter = true) {\r\n\r\n const layout = this.layout || this.getParent().layout;\r\n const layoutToSet = layoutAbbr || layout.getCurrentLayoutAbbreviation();\r\n\r\n if (setNextPage) {\r\n // this.nextFeaturesPageToLoad += 1;\r\n let nextFeaturesPageToLoad = 1;\r\n const addFromPageSize = pageSize === 6000 ? 3 : 1;\r\n if (this.nextFeaturesPageToLoadArray) {\r\n nextFeaturesPageToLoad = Number.isInteger(loadedPage)\r\n ? this.nextFeaturesPageToLoadArray[layoutToSet].page + addFromPageSize\r\n : this.nextFeaturesPageToLoadArray[layoutToSet].page + 1\r\n } else {\r\n nextFeaturesPageToLoad = Number.isInteger(loadedPage)\r\n ? this.nextFeaturesPageToLoad + addFromPageSize\r\n : this.nextFeaturesPageToLoad + 1;\r\n }\r\n // let nextFeaturesPageToLoad = Number.isInteger(loadedPage)\r\n // ? this.nextFeaturesPageToLoad + (pageSize === 6000 ? 3 : 1)\r\n // : this.nextFeaturesPageToLoadArray ? this.nextFeaturesPageToLoadArray[layoutToSet].page + 1 : this.nextFeaturesPageToLoad + 1;\r\n // if ((pageSize / 1000 - 1) === 1) {\r\n // nextFeaturesPageToLoad += 1\r\n // }\r\n this.nextFeaturesPageToLoad = nextFeaturesPageToLoad;\r\n if (this.nextFeaturesPageToLoadArray) {\r\n this.nextFeaturesPageToLoadArray[layoutToSet].page = nextFeaturesPageToLoad;\r\n }\r\n this.allFeaturesReceived = true;\r\n }\r\n if (!fromSearch) {\r\n if (this.nextFeaturesPageToLoadArray) {\r\n this.nextFeaturesPageToLoadArray[layoutToSet].allReceived = dbFeaturesArray.length < pageSize;\r\n const {bvPresets} = store.getState().bathroomVisualizerState;\r\n if (bvPresets && bvPresets.length) {\r\n const uniqueLayoutsTypes = bvPresets.reduce((total, preset) => {\r\n if (!total.some(layoutType => layoutType === preset.layout_type)) {\r\n total.push(preset.layout_type)\r\n }\r\n return total\r\n }, []);\r\n this.realFeaturesReceived = uniqueLayoutsTypes.every(layoutNumber => {\r\n const layoutName = layout.getCurrentLayoutName(layoutNumber);\r\n return this.nextFeaturesPageToLoadArray[layoutName] && this.nextFeaturesPageToLoadArray[layoutName].allReceived\r\n });\r\n } else {\r\n this.realFeaturesReceived = dbFeaturesArray.length < pageSize;\r\n }\r\n } else {\r\n this.realFeaturesReceived = dbFeaturesArray.length < pageSize;\r\n }\r\n }\r\n\r\n layout.loadNewFeatures(dbFeaturesArray, this, setCustomConfigurationsAfter);\r\n\r\n }\r\n\r\n getRealFeaturesReceivedProperty = () => {\r\n const layout = this.layout || this.getParent().layout;\r\n const currentLayoutAbbr = layout.getCurrentLayoutAbbreviation();\r\n return this.nextFeaturesPageToLoadArray\r\n ? this.nextFeaturesPageToLoadArray[currentLayoutAbbr].allReceived\r\n : this.realFeaturesReceived\r\n }\r\n\r\n getNextPageToLoad = (currentLayoutAbbr) => {\r\n // intermediatePart\r\n if (this.nextFeaturesPageToLoadArray) {\r\n if (!currentLayoutAbbr) {\r\n const layout = this.layout || this.getParent().layout;\r\n currentLayoutAbbr = layout.getCurrentLayoutAbbreviation();\r\n }\r\n return this.nextFeaturesPageToLoadArray[currentLayoutAbbr].page\r\n }\r\n return this.nextFeaturesPageToLoad\r\n }\r\n\r\n getCollectionName = (filterGroups) => {\r\n if (this._collectionName) {\r\n return this._collectionName\r\n }\r\n const collectionFg = filterGroups ? filterGroups.find(fGroup => fGroup.name === \"Collection\") : null;\r\n if (collectionFg) {\r\n const featureCollectionValue = getFilterGroupValues(this, collectionFg);\r\n if (Array.isArray(featureCollectionValue)) {\r\n const featureCollectionValueObject = getFilterGroupValue(featureCollectionValue[0], collectionFg);\r\n if (featureCollectionValueObject) {\r\n this._collectionName = capitalizeFirstLetters(featureCollectionValueObject.displayText);\r\n return this._collectionName\r\n }\r\n }\r\n }\r\n return \"\"\r\n }\r\n\r\n getColorName = (filterGroups) => {\r\n if (this._colorName) {\r\n return this._colorName\r\n }\r\n const colorFilterGroup = filterGroups ? filterGroups.find(fGroup => fGroup.name === \"Color\") : null;\r\n\r\n if (colorFilterGroup) {\r\n const featureCollectionValue = getFilterGroupValues(this, colorFilterGroup);\r\n if (Array.isArray(featureCollectionValue)) {\r\n const featureCollectionValueObject = getFilterGroupValue(featureCollectionValue[0], colorFilterGroup);\r\n if (featureCollectionValueObject) {\r\n this._colorName = capitalizeFirstLetters(featureCollectionValueObject.displayText);\r\n return this._colorName\r\n }\r\n }\r\n }\r\n return \"\"\r\n }\r\n\r\n getCustomFullDisplayName = () => {\r\n return this.getSplittedFeatureName() // is different in bvLook visualizer\r\n }\r\n\r\n getMatchingOptionsName = () => {\r\n return this.getSplittedFeatureName() // is different in bvLook visualizer\r\n }\r\n\r\n /**\r\n * Update visibility for all layers.\r\n * Each feature decides on its own what layers are needed.\r\n * In case when feature must be invisible it must return null, not an empty array\r\n * @param layout {Layout}\r\n * @param placeholdersNeeded {boolean}\r\n */\r\n setLayers(layout, placeholdersNeeded) {\r\n let layers = [];\r\n this.getRelatedItems()\r\n .filter(relItem => relItem.featureGroupEnabled)\r\n .forEach(relatedItem => {\r\n relatedItem.setLayers(layout);\r\n let activeFeatures = [];\r\n if (relatedItem.layerPositions) {\r\n Object.keys(relatedItem.layerPositions).forEach(key => {\r\n if (relatedItem.layerPositions[key]) {\r\n activeFeatures.push(relatedItem.layerPositions[key])\r\n }\r\n })\r\n } else {\r\n if (placeholdersNeeded && !relatedItem.placeholderChanged && relatedItem.placeholderFeature) {\r\n activeFeatures.push(relatedItem.placeholderFeature)\r\n } else if (relatedItem.activeFeature && relatedItem.partId !== \"attachment\") {\r\n activeFeatures.push(relatedItem.activeFeature)\r\n }\r\n }\r\n if (relatedItem.activeFeatureParts && relatedItem.activeFeatureParts.length) {\r\n activeFeatures = [...activeFeatures, ...relatedItem.activeFeatureParts]\r\n }\r\n activeFeatures.forEach((activeFeaturePart) => {\r\n if (activeFeaturePart && activeFeaturePart.layer.src) {\r\n // cabinetActiveFeature.layer.partId = cabinetActiveFeature.partId;\r\n activeFeaturePart.layer.coords = activeFeaturePart.metaData[\"Coords\"];\r\n activeFeaturePart.layer.partId = activeFeaturePart.partId;\r\n activeFeaturePart.layer.layerPosition = activeFeaturePart.metaData.layerPosition;\r\n activeFeaturePart.layer.cropCoords = getFeatureCropCoors(activeFeaturePart);\r\n layers.push(activeFeaturePart.layer);\r\n }\r\n });\r\n });\r\n return layers.length ? layers : null;\r\n }\r\n\r\n // setPrevioslySelected(featureGroup) { // featureGroup is current active featureGroup from the click\r\n setPrevioslySelected() { // parent scope\r\n this.relatedItems.forEach(relatedItem => {\r\n relatedItem.activeFeatureBeforeAllWalls = !relatedItem.placeholderChanged\r\n ? \"placeholder\"\r\n : relatedItem.activeFeature;\r\n });\r\n }\r\n\r\n getFeaturesFromLayout = (layoutName, forSpecificScene, allFeatures) => {\r\n let currentLayoutFeatures = this.layerPositions\r\n ? [...(this.featuresList[layoutName] || []), ...(this.featuresPartsList[layoutName] || [])]\r\n : (this.featuresList[layoutName] || []);\r\n for (let i = 0; i < currentLayoutFeatures.length; i++) {\r\n const feature = currentLayoutFeatures[i];\r\n if (forSpecificScene && feature.metaData[\"RoomScene\"] && !feature.metaData[\"RoomScene\"].includes(forSpecificScene)) {\r\n continue\r\n }\r\n const featureName = feature.getSplittedFeatureName();\r\n if (!allFeatures.some(addedFeature => addedFeature.getSplittedFeatureName() === featureName)) {\r\n allFeatures.push(feature);\r\n }\r\n }\r\n return allFeatures\r\n }\r\n\r\n getFeaturesForNavigationFrom = (restOptions = {}) => {\r\n const {returnAllFeatures, forSpecificLayout, forSpecificScene} = restOptions;\r\n if (returnAllFeatures) {\r\n const layout = this.getParent().layout;\r\n let allFeatures = [];\r\n // 1) first add current layout features or specific layout features\r\n allFeatures = this.getFeaturesFromLayout(forSpecificLayout || (\"Layout\" + layout.type), forSpecificScene, allFeatures)\r\n if (forSpecificLayout) {\r\n return allFeatures\r\n }\r\n // 2) if we need all features - check another layouts\r\n const {bvPresets} = store.getState().bathroomVisualizerState;\r\n // const checkLayouts = layoutNames.filter(layoutName => {\r\n // if (forSpecificLayout) {\r\n // return forSpecificLayout === layoutName\r\n // }\r\n // return bvPresets.some(bvPreset => bvPreset.layout_type === +(layoutName.replace(\"Layout\", \"\")))\r\n // })\r\n\r\n // 2) next popular rooms are 11 for AS and 3 for grohe, check them\r\n if (layout.type !== 11 && (document.kvConfig.visualizerType === \"bvLook\")) {\r\n allFeatures = this.getFeaturesFromLayout(\"Layout11\", \"1\", allFeatures);\r\n }\r\n // if (layout.type !== 3) {\r\n // allFeatures = this.getFeaturesFromLayout(\"Layout3\", \"1\", allFeatures);\r\n // }\r\n // 3) select all features from scene 1\r\n bvPresets.forEach(bvPreset => {\r\n if (bvPreset.layout_type === layout.type) {\r\n return;\r\n }\r\n const stringifiedLayout = \"Layout\" + bvPreset.layout_type;\r\n allFeatures = this.getFeaturesFromLayout(stringifiedLayout, \"1\", allFeatures);\r\n });\r\n // 4) check skipped layouts to get all other features another room scenes features\r\n const layoutNames = Object.keys(layout.layoutNames).filter(key => key !== \"All\");\r\n layoutNames.forEach((layoutType) => {\r\n allFeatures = this.getFeaturesFromLayout(layoutType, null, allFeatures);\r\n });\r\n // console.log(\"allFeatures\", allFeatures);\r\n return allFeatures\r\n }\r\n return this.layerPositions ? [...this.features, ...this.featuresParts] : this.features\r\n }\r\n\r\n checkAutoAddToCart = (feature) => {\r\n //intermediatePart\r\n if (!feature.dbFeature.autoAddToCart) {\r\n return;\r\n }\r\n const parentGroup = this.getParent ? this.getParent() : null;// parent, for ex. \"Appliance\"\r\n if (parentGroup && parentGroup.layout && parentGroup.layout.isFakeLayout) {\r\n return;\r\n }\r\n const cartItem = {\r\n selectionGroup: (parentGroup && parentGroup.menuType) ? parentGroup.partName : this.partName,\r\n quantity: 1,\r\n partId: this.partId,\r\n cartFeature: feature\r\n };\r\n if (feature.dbFeature.displayLogic) {\r\n const storeState = store.getState();\r\n const {quantity, isMatching} = featureIsMatchingDisplayLogic(\r\n feature,\r\n storeState.cartState.cartItems,\r\n storeState.quotesState.activeQuoteIndex,\r\n storeState.wizardState.allWizardsValues\r\n );\r\n if (isMatching && (!storeState.cartState.cartItems.some(cItem => {\r\n return cItem.cartFeature && cItem.cartFeature.dbFeature && (cItem.cartFeature.dbFeature.id === feature.dbFeature.id)\r\n }))) {\r\n cartItem.quantity = quantity;\r\n store.dispatch(addToCart([cartItem]));\r\n }\r\n store.dispatch(addDisplayLogicCartItem(cartItem, this.getParent().layout.visualizerType));\r\n } else {\r\n store.dispatch(addToCart([cartItem]));\r\n }\r\n }\r\n\r\n loadFeatureCommon = (feature) => { // other logic\r\n this.checkAutoAddToCart(feature);\r\n if (feature.dbFeature.groupName === \"Room\") {\r\n feature = setRoomNotInVisualizerProperty(feature);\r\n }\r\n if (IS_LIXIL_UI && !feature.dbFeature.clickable) {\r\n const layout = this.getParent().layout;\r\n if (layout && layout.disabledClickablePartIds && !layout.disabledClickablePartIds.includes(this.partId)) {\r\n layout.disabledClickablePartIds.push(this.partId);\r\n }\r\n }\r\n // const layout = this.getParent().layout;\r\n // if (feature.dbFeature.isRelatedDbFeature) {\r\n // if (!Array.isArray(layout.allRelatedDbFeatures)) {\r\n // layout.allRelatedDbFeatures = [];\r\n // }\r\n // if (!layout.allRelatedDbFeatures.some(addedDbFeature => addedDbFeature.id === feature.dbFeature.id)) {\r\n // layout.allRelatedDbFeatures.push(feature.dbFeature);\r\n // }\r\n // }\r\n // loadRelatedFeatures(feature.dbFeature, layout);\r\n };\r\n\r\n _setLayers(layout) {\r\n //intermediatePart\r\n if (!this.disabled) {\r\n if (!this.activeFeature) {\r\n this.setDefault(layout);\r\n }\r\n if (this.layerPositions) {\r\n Object.keys(this.layerPositions).forEach(key => {\r\n if (this.layerPositions[key]) {\r\n if (this.layerPositions[key].matchesMetaForArrayOfConditions(this.getArrayOfConditions())) {\r\n this.setFeatureLayer(this.layerPositions[key], layout);\r\n } else {\r\n this.layerPositions[key].layer.src = '';\r\n }\r\n }\r\n })\r\n } else if (this.activeFeature && !this.activeFeature.notAvailableInVisualizer) {\r\n if (this.partId !== \"attachment\") { // remove activeFeature layer to prevent duplicate, it has parts\r\n this.setFeatureLayer(this.activeFeature, layout);\r\n }\r\n if (this.hasAdditionalParts && (document.kvConfig.visualizerType === \"kvScene\")) {\r\n this.activeFeatureParts = this.setActiveFeatureParts(); // we have to set them each time because we need to react on disabled clicks (bottom cabinet - appliances)\r\n }\r\n if (Array.isArray(this.activeFeatureParts) && this.activeFeatureParts.length) {\r\n this.activeFeatureParts.forEach((activeFeaturePart) => {\r\n this.setFeatureLayer(activeFeaturePart, layout);\r\n })\r\n }\r\n }\r\n if (this.placeholderFeature) {\r\n this.setFeatureLayer(this.placeholderFeature, layout);\r\n }\r\n } else {\r\n this.hideLayers();\r\n }\r\n }\r\n\r\n setFeatureLayer(currentFeature, layout) {\r\n //intermediatePart\r\n // console.log('currentFeature', currentFeature);\r\n const layoutAbr = layout.getCurrentLayoutAbbreviation();\r\n if (!currentFeature || !currentFeature.dbFeature || !currentFeature.dbFeature.s3Bindings\r\n || (!(currentFeature.dbFeature.metaData[\"RoomLayout\"]) || !currentFeature.dbFeature.metaData[\"RoomLayout\"].includes(layoutAbr))) {\r\n if (currentFeature) {\r\n currentFeature.layer.src = \"\";\r\n }\r\n return;\r\n }\r\n const s3Binding = currentFeature.dbFeature.s3Bindings.find(binding => binding.visualizer === layout.layersBinding);\r\n currentFeature.layer.src = s3Binding ? s3Binding.path : null;\r\n currentFeature.layer.bucketName = s3Binding ? s3Binding.bucketName : null;\r\n }\r\n\r\n featureClicked() {\r\n const featuresHistory = this.activeFeature ? this.selectedFeaturesHistory : this.getParent().selectedFeaturesHistory;\r\n const partName = this.activeFeature ? this.activeFeature.partName : this.partName;\r\n if (Array.isArray(featuresHistory) && (featuresHistory[0] !== partName)) {\r\n featuresHistory.unshift(partName); // add in the beggining\r\n if (featuresHistory.length > 10) {\r\n featuresHistory.pop() // remove last element, no need to keep huge arrays\r\n }\r\n }\r\n this.updateLocalStorage();\r\n // other specific events, for ex. Google Analytics, etc.\r\n }\r\n\r\n\r\n // navigationSubItems(filters, searchText, forFeature, filterGroups, restOptions) { // to do\r\n navigationItemsWithOptions(filters, forFeature, filterGroups, featuresToDisplay) {\r\n // intermediate part\r\n let newFeatures = [];\r\n let navItems = [];\r\n const matchingFeatureProperty = this.useMatchingFeatureReplacement || \"MatchingFeature\";\r\n\r\n if (filterGroups && filterGroups.length && (!filters || !Object.keys(filters).length)) {\r\n // console.log(\"filteredAvailableFeatures\", filteredAvailableFeatures);\r\n // console.log(\"featuresToDisplay\", featuresToDisplay);\r\n for (let i = 0; i < featuresToDisplay.length; i++) { // 1) take all others\r\n const currentFeature = featuresToDisplay[i];\r\n const colorName = currentFeature.getColorName(filterGroups);\r\n const matchingOptionsName = currentFeature.getMatchingOptionsName();\r\n let conditionPassed = !colorName\r\n || !newFeatures.some(feature => feature.getMatchingOptionsName() === matchingOptionsName)\r\n || (currentFeature.metaData[matchingFeatureProperty] && !newFeatures.some(feature => feature.metaData[matchingFeatureProperty]\r\n && isEqual(feature.metaData[matchingFeatureProperty], currentFeature.metaData[matchingFeatureProperty])))\r\n if (conditionPassed) {\r\n newFeatures.push(currentFeature);\r\n }\r\n }\r\n navItems = this.returnUniqueNavFeatures(this.getNavItemsWithOptions(forFeature, newFeatures, featuresToDisplay, filterGroups).map(featureObject => {\r\n return new DesignNavigationItem(featureObject.mainFeature.featureName, featureObject.mainFeature, featureObject.otherOptions)\r\n }), false);\r\n }\r\n if (!navItems.length) {\r\n navItems = this.returnUniqueNavFeatures(featuresToDisplay)\r\n }\r\n // if (this.filterNavigationItems && forFeature) {\r\n // navItems = this.filterNavigationItems(navItems, forFeature)\r\n // }\r\n return navItems\r\n }\r\n\r\n /**\r\n * this is almost the same as feature options, it is replacing next nav items with the needed color feature\r\n * @param forFeature {featureInterface} featureInterface\r\n * @param newFeatures {[featureInterface]}\r\n * @param allFeatures {[featureInterface]}\r\n * @param filterGroups {[filterGroupInterface]}\r\n * @returns {array}\r\n */\r\n getNavItemsWithOptions = (forFeature= null,\r\n newFeatures = [],\r\n allFeatures = [],\r\n filterGroups) => {\r\n\r\n const matchingFeatureProperty = this.useMatchingFeatureReplacement || \"MatchingFeature\";\r\n const neededColorName = forFeature ? forFeature.getColorName(filterGroups) : \"\";\r\n\r\n return newFeatures.map(currentFeature => {\r\n const filterValue = getColorFilterValue(currentFeature, filterGroups);\r\n let otherOptions = getOptionsFromNavItemsForFeature(currentFeature, allFeatures, filterGroups);\r\n\r\n const currentFeatureColor = currentFeature.getColorName(filterGroups);\r\n const customFullDisplayName = currentFeature.getMatchingOptionsName();\r\n\r\n if (forFeature && (currentFeature.dbFeature.id === forFeature.dbFeature.id || (\r\n (customFullDisplayName === forFeature.getMatchingOptionsName())\r\n && (!forFeature.metaData[matchingFeatureProperty] || isEqual(forFeature.metaData[matchingFeatureProperty], currentFeature.metaData[matchingFeatureProperty]))\r\n && (currentFeatureColor && forFeature.getColorName(filterGroups) && (currentFeatureColor !== forFeature.getColorName(filterGroups)))\r\n ))) {\r\n if (filterValue && !otherOptions.some(option => option.colorValue.id === filterValue.id)) {\r\n otherOptions.push({feature: currentFeature, colorValue: filterValue})\r\n }\r\n return {\r\n mainFeature: forFeature,\r\n otherOptions: otherOptions.filter(option => option.feature.dbFeature.id !== forFeature.dbFeature.id)\r\n };\r\n } else {\r\n if (!filterValue) {\r\n return {mainFeature: currentFeature, otherOptions: []}\r\n }\r\n const allOptions = [{feature: currentFeature, colorValue: filterValue}, ...otherOptions];\r\n const mainOption = (forFeature && neededColorName && allOptions.find(option => option.feature.getColorName(filterGroups) === neededColorName))\r\n // console.log(\"mainOption\", mainOption);\r\n if (mainOption) {\r\n return {\r\n mainFeature: mainOption.feature,\r\n otherOptions: allOptions.filter(option => option.feature.dbFeature.id !== mainOption.feature.dbFeature.id)\r\n }\r\n }\r\n return {mainFeature: currentFeature, otherOptions}\r\n }\r\n });\r\n }\r\n\r\n returnUniqueNavFeatures(featuresToDisplay, createNavItems = true) {\r\n const navItems = createNavItems ? this.returnNavItemsFromFeatures(featuresToDisplay) : featuresToDisplay;\r\n if (document.kvConfig.visualizerType === \"bvScene\" && (this.partId ===\"sink\" || this.partId ===\"center_island_sink\"\r\n || this.partId ===\"vanity_sink\" || this.partId ===\"vanity_faucet\")) {\r\n return uniqBy(navItems, (navItem) => navItem.part.dbFeature.id && navItem.part.getSplittedFeatureName());\r\n }\r\n if (document.kvConfig.toolVersion >= 5) { // not sure if we can do that for old visualizers\r\n return uniqBy(navItems, (navItem) => navItem.part.dbFeature.id && navItem.part.dbFeature.sharedFeatureName);\r\n }\r\n return uniqBy(navItems, (navItem) => navItem.part.dbFeature.id);\r\n }\r\n\r\n returnNavItemsFromFeatures(featuresToDisplay) {\r\n return featuresToDisplay.map(_ => new DesignNavigationItem(_.featureName, _));\r\n }\r\n\r\n}\r\n\r\nPartCommon.prototype.getFeatureCurrency = function (propsFilterGroups) {\r\n if (Object.hasOwnProperty(this._useCurrency)) {\r\n return this._useCurrency\r\n }\r\n this._useCurrency = null;\r\n const filterGroups = propsFilterGroups || store.getState().filterState.filterGroups;\r\n const filterGroup = filterGroups.find(group => group.name === \"Currency\");\r\n if (!filterGroup) {\r\n return this._useCurrency\r\n }\r\n const featureCollectionValue = getFilterGroupValues(this, filterGroup);\r\n if (Array.isArray(featureCollectionValue)) {\r\n const featureCollectionValueObject = getFilterGroupValue(featureCollectionValue[0], filterGroup);\r\n if (featureCollectionValueObject) {\r\n this._useCurrency = featureCollectionValueObject.value\r\n }\r\n }\r\n return this._useCurrency\r\n}\r\n\r\nPartCommon.prototype.getFeatureRelatedFeatures = function () {\r\n if (!this._relatedFeaturesSet) {\r\n // console.log(\"loadRelatedFeatures\", this.dbFeature);\r\n loadRelatedFeatures(this.dbFeature, this.getParent().getParent().layout);\r\n this._relatedFeaturesSet = true;\r\n }\r\n return this.dbFeature.relatedFeatures\r\n}\r\n","import {Component} from 'react';\r\nimport invert from \"lodash/invert\";\r\n\r\nimport {getCurrentLayout} from \"../../appLayout\";\r\nimport {getBvGroupFeatures, getBvGroupFilterValues} from \"../../../api/server-api\";\r\nimport {loaderDisable, loaderEnable} from \"../../ui/loaderView\";\r\nimport {IS_OFFLINE_MODE, USE_SERVER_CACHING} from \"../../../config\";\r\nimport {\r\n COUNTERTOP_GROUP,\r\n LayoutAbbreviations,\r\n LayoutType as LayoutTypes\r\n} from \"../../kvComponent/core/constants\";\r\nimport {setActivePartFilterValues} from \"../../../misc/filtersFunctions\";\r\nimport {checkIfLookFeaturesReceived, getAdditionalFeaturesOnScroll, getFeaturesPageSize} from \"../../../api/look-api\";\r\nimport store from \"../../../store\";\r\nimport {updateCanvasCount} from \"../../../actions/actionFunctions\";\r\n\r\nexport default class NavigationRequests extends Component {\r\n\r\n getBvPartFeatures = async (item, navigationItem, callBack = null) => {\r\n if (!item.part.createdManually && !item.part.requestInProgress) {\r\n const itemPart = item.part;\r\n const layout = itemPart && itemPart.getParent\r\n ? itemPart.getParent().layout || getCurrentLayout()\r\n : getCurrentLayout();\r\n let responseArray;\r\n if (layout.isNewLayout) {\r\n responseArray = await getAdditionalFeaturesOnScroll(itemPart, false);\r\n } else {\r\n const pageSize = getFeaturesPageSize(itemPart);\r\n const layoutAbbr = layout.getCurrentLayoutAbbreviation();\r\n const nextFeaturesPage = itemPart.getNextPageToLoad(layoutAbbr);\r\n itemPart.requestInProgress = true;\r\n const response = await getBvGroupFeatures(itemPart.dbName || itemPart.partName, nextFeaturesPage, pageSize);\r\n\r\n responseArray = Array.isArray(response) ? response : [];\r\n\r\n itemPart.requestInProgress = false;\r\n // if (location.port === '9007' || document.kvConfig.kioskMode) {\r\n // console.log('response', response.data);\r\n // }\r\n itemPart.setGroupFeatures(responseArray, pageSize, true, layoutAbbr, nextFeaturesPage);\r\n }\r\n if (navigationItem) {\r\n this.setState({\r\n [navigationItem]: item,\r\n render: false,\r\n showFilterSelection: true\r\n }, () => {\r\n this.setState({\r\n render: true,\r\n });\r\n this.forceUpdate()\r\n });\r\n }\r\n if (callBack) {\r\n callBack()\r\n }\r\n if (this._isMounted) {\r\n this.forceUpdate()\r\n }\r\n\r\n return responseArray\r\n }\r\n };\r\n\r\n getRelatedItemFeatures = (relatedItem) => {\r\n return this.getBvPartFeatures({\r\n part: relatedItem,\r\n text: relatedItem.partName\r\n }, \"\");\r\n };\r\n\r\n checkIfAllFeaturesReceived = (item, navigationItem, callBack, materialsPage) => {\r\n if (IS_OFFLINE_MODE) {\r\n return false\r\n }\r\n const itemPart = item.part;\r\n const layout = itemPart && itemPart.getParent\r\n ? itemPart.getParent().layout || getCurrentLayout()\r\n : getCurrentLayout();\r\n const layoutAbbr = layout.getCurrentLayoutAbbreviation();\r\n if (!(layout.isNewLayout && (itemPart && (itemPart.partId === \"range\" || itemPart.partId === \"stove\")))\r\n && (!itemPart.allFeaturesReceived || (itemPart.nextFeaturesPageToLoadArray && !itemPart.nextFeaturesPageToLoadArray[layoutAbbr].page))) {\r\n this.getBvPartFeatures(item, navigationItem, callBack);\r\n }\r\n if (layout.isNewLayout) {\r\n checkIfLookFeaturesReceived(itemPart, true).then(() => {\r\n if (materialsPage) {\r\n if (this._isMounted) {\r\n this.forceUpdate()\r\n }\r\n } else {\r\n callBack ? callBack() : this.forceUpdate();\r\n }\r\n }); // it has all needed feature groups already there\r\n }\r\n const showerParent = layout.parts[\"Shower\"];\r\n const wallParent = layout.parts[\"Walls\"];\r\n const showerComboParent = layout.parts[\"Shower Tub Combo\"];\r\n const cabinetParent = layout.parts[\"Cabinet\"];\r\n const centerIslandParent = layout.parts[\"CenterIsland\"];\r\n const countertopParent = layout.parts[\"Countertop\"];\r\n const applianceParent = layout.parts[\"Appliances\"];\r\n\r\n if (this.isWallItem(itemPart)) {\r\n wallParent.relatedItems.forEach(relatedItem => {\r\n if (relatedItem.partId !== itemPart.partId && !relatedItem.allFeaturesReceived) {\r\n this.getRelatedItemFeatures(relatedItem);\r\n }\r\n });\r\n } else if (itemPart.partId === \"vanity_cabinet\") {\r\n const vanityParent = itemPart.getParent();\r\n vanityParent.relatedItems.forEach(relatedItem => {\r\n if (relatedItem.partId !== itemPart.partId && !relatedItem.allFeaturesReceived) {\r\n this.getRelatedItemFeatures(relatedItem);\r\n }\r\n });\r\n if (!layout.isNewLayout) {\r\n const navItem = {\r\n part: showerParent.showerBody,\r\n text: showerParent.showerBody.partName\r\n };\r\n this.checkIfAllFeaturesReceived(navItem, \"\");\r\n if (wallParent.vanityAccent && !wallParent.vanityAccent.allFeaturesReceived) {\r\n this.getRelatedItemFeatures(wallParent.vanityAccent);\r\n }\r\n }\r\n } else if (itemPart.partId === \"shower_door\") {\r\n if (showerParent && showerParent.showerDoorHandle && !showerParent.showerDoorHandle.allFeaturesReceived) {\r\n this.getRelatedItemFeatures(showerParent.showerDoorHandle);\r\n }\r\n } else if (itemPart.partId === \"top_cabinet\") { /*** KITCHEN TOP CABINETS REQUIRE CROWN_MOLDING AND HOOD AND HANDLES AND CABINETS***/\r\n if (cabinetParent && cabinetParent.crownMolding && !cabinetParent.crownMolding.allFeaturesReceived) {\r\n this.getRelatedItemFeatures(cabinetParent.crownMolding);\r\n }\r\n if (cabinetParent && cabinetParent.topHandle && !cabinetParent.topHandle.allFeaturesReceived) {\r\n this.getRelatedItemFeatures(cabinetParent.topHandle);\r\n }\r\n if (cabinetParent && cabinetParent.bottomCabinet && !cabinetParent.bottomCabinet.allFeaturesReceived) {\r\n this.getRelatedItemFeatures(cabinetParent.bottomCabinet);\r\n }\r\n if (centerIslandParent && centerIslandParent.cabinet && !centerIslandParent.cabinet.allFeaturesReceived) {\r\n this.getRelatedItemFeatures(centerIslandParent.cabinet);\r\n }\r\n if (applianceParent && applianceParent.hood && !applianceParent.hood.allFeaturesReceived) {\r\n this.getRelatedItemFeatures(applianceParent.hood);\r\n }\r\n } else if (itemPart.partId === \"bottom_cabinet\") { /*** KITCHEN BOTTOM CABINETS REQUIRE TOP CABINETS & CENTER ISLAND ***/\r\n if (cabinetParent && cabinetParent.topCabinet && !cabinetParent.topCabinet.allFeaturesReceived) {\r\n this.getRelatedItemFeatures(cabinetParent.topCabinet);\r\n }\r\n if (centerIslandParent && centerIslandParent.cabinet && !centerIslandParent.cabinet.allFeaturesReceived) {\r\n this.getRelatedItemFeatures(centerIslandParent.cabinet);\r\n }\r\n if (cabinetParent && cabinetParent.bottomHandle && !cabinetParent.bottomHandle.allFeaturesReceived) {\r\n this.getRelatedItemFeatures(cabinetParent.bottomHandle);\r\n }\r\n } else if (itemPart.partId === \"center_island_cabinet\") { /*** KITCHEN CENTER ISLAND CABINETS REQUIRE TOP CABINETS & BOTTOM CABINETS***/\r\n if (cabinetParent && cabinetParent.topCabinet && !cabinetParent.topCabinet.allFeaturesReceived) {\r\n this.getRelatedItemFeatures(cabinetParent.topCabinet);\r\n }\r\n if (cabinetParent && cabinetParent.bottomCabinet && !cabinetParent.bottomCabinet.allFeaturesReceived) {\r\n this.getRelatedItemFeatures(cabinetParent.bottomCabinet);\r\n }\r\n } else if (itemPart.partId === \"countertop\") {\r\n if (centerIslandParent && centerIslandParent.countertop && !centerIslandParent.countertop.allFeaturesReceived) {\r\n this.getRelatedItemFeatures(centerIslandParent.countertop);\r\n }\r\n if (wallParent && wallParent.backsplash && !wallParent.backsplash.allFeaturesReceived) {\r\n this.getRelatedItemFeatures(wallParent.backsplash);\r\n }\r\n } else if (itemPart.partId === \"center_island_countertop\") {\r\n if (countertopParent && countertopParent.countertop && (!countertopParent.countertop.allFeaturesReceived\r\n || !(centerIslandParent.countertop && !centerIslandParent.countertop.allFeaturesReceived))) {\r\n this.getRelatedItemFeatures(countertopParent.countertop);\r\n }\r\n if (wallParent && wallParent.backsplash && !wallParent.backsplash.allFeaturesReceived) {\r\n this.getRelatedItemFeatures(wallParent.backsplash);\r\n }\r\n } else if (itemPart.partId === \"backsplash\") {\r\n if (countertopParent && countertopParent.countertop && !countertopParent.countertop.allFeaturesReceived) {\r\n this.getRelatedItemFeatures(countertopParent.countertop);\r\n }\r\n if (centerIslandParent && centerIslandParent.countertop && !centerIslandParent.countertop.allFeaturesReceived) {\r\n this.getRelatedItemFeatures(centerIslandParent.countertop);\r\n }\r\n } else if (itemPart.partId === \"edge_profile\") {\r\n if (countertopParent && countertopParent.countertop && !countertopParent.countertop.allFeaturesReceived) {\r\n this.getRelatedItemFeatures(countertopParent.countertop);\r\n }\r\n } else if (itemPart.partId === \"center_island_edge\") {\r\n if (centerIslandParent && centerIslandParent.countertop && !centerIslandParent.countertop.allFeaturesReceived) {\r\n this.getRelatedItemFeatures(centerIslandParent.countertop);\r\n }\r\n } else if (itemPart.partId === \"microwave\" || itemPart.partId === \"hood\") { /*** KITCHEN APPLIANCE REQUIRE TOP CABINETS ***/\r\n if (cabinetParent && cabinetParent.topCabinet && !cabinetParent.topCabinet.allFeaturesReceived) {\r\n this.getRelatedItemFeatures(cabinetParent.topCabinet);\r\n }\r\n } else if (itemPart.createdManually) { // shower_body || wall_configuration\r\n const neededParts = [\"pony_wall\", \"left_shower_wall\", \"right_shower_wall\"];\r\n if (callBack) {\r\n neededParts.push(\"wall_c\");\r\n }\r\n const getData = async () => {\r\n return await Promise.all([...showerParent.relatedItems.map(async relatedItem => {\r\n if (relatedItem.partId !== itemPart.partId && !relatedItem.allFeaturesReceived) {\r\n return await this.getRelatedItemFeatures(relatedItem)\r\n }\r\n }), ...wallParent.relatedItems.map(async relatedItem => {\r\n if (neededParts.includes(relatedItem.partId) && !relatedItem.allFeaturesReceived) {\r\n return await this.getRelatedItemFeatures(relatedItem);\r\n }\r\n })])\r\n };\r\n getData() // after we receive all shower related items we can switch shower body\r\n .then(() => {\r\n showerParent.showerBody.allFeaturesReceived = true;\r\n showerComboParent.wallConfiguration.allFeaturesReceived = true;\r\n if (materialsPage) {\r\n if (this._isMounted) {\r\n this.forceUpdate()\r\n }\r\n } else {\r\n callBack ? callBack() : this.forceUpdate();\r\n }\r\n });\r\n }\r\n };\r\n\r\n checkIfAllFiltersReceived = (activeSubPart, allFilterGroups) => {\r\n return getBvGroupFilterValues(activeSubPart.dbName || activeSubPart.partName)\r\n .then((response) => {\r\n setActivePartFilterValues(response.data, activeSubPart, allFilterGroups);\r\n return true\r\n });\r\n };\r\n\r\n isWallItem = (itemPart) => {\r\n let wallsPartIds = [];\r\n switch(document.kvConfig.visualizerType) {\r\n case \"Bathroom\":\r\n case \"BV\":\r\n wallsPartIds = [\"wall_a\", \"wall_b\", \"wall_c\", \"right_shower_wall\", \"left_shower_wall\",\"pony_wall\"];\r\n break;\r\n case \"Kitchen\":\r\n wallsPartIds = [\"left_wall\", \"right_wall\", \"popout_wall\"];\r\n break;\r\n case \"kvScene\":\r\n wallsPartIds = [\"left_wall\", \"right_wall\", \"center_wall\", \"front_wall\", \"popout_wall\"];\r\n break;\r\n case \"bvScene\":\r\n case \"bvLook\":\r\n wallsPartIds = [\"left_wall\", \"right_wall\", \"center_wall\", \"shower_interior_wall\"];\r\n break;\r\n default:\r\n wallsPartIds = [\"left_wall\", \"right_wall\", \"center_wall\"];\r\n }\r\n return wallsPartIds.includes(itemPart.partId);\r\n };\r\n\r\n static searchFeaturesByName = (relatedItem, searchName, pageSize = 9999) => {\r\n if (Array.isArray(relatedItem.alreadyRequestedFeatureNames)\r\n && relatedItem.alreadyRequestedFeatureNames.includes(searchName)) {\r\n return Promise.resolve()\r\n }\r\n const dbName = relatedItem.dbName || relatedItem.partName;\r\n return getBvGroupFeatures(dbName, 0, pageSize, [], searchName)\r\n .then(response => {\r\n if (response && response.length) {\r\n relatedItem.setGroupFeatures(response, 0, false);\r\n if (!relatedItem.alreadyRequestedFeatureNames) {\r\n relatedItem.alreadyRequestedFeatureNames = [];\r\n }\r\n if (searchName) {\r\n relatedItem.alreadyRequestedFeatureNames.push(searchName);\r\n }\r\n }\r\n return response\r\n })\r\n };\r\n\r\n changeLayout = (layoutType, firstChange = false) => {\r\n if (!firstChange) {\r\n loaderEnable();\r\n }\r\n window.requestInProcess = true;\r\n const layout = getCurrentLayout();\r\n switch (document.kvConfig.visualizerType) {\r\n case \"Kitchen\":\r\n case \"KV\": {\r\n const cabinetParent = layout.parts[\"Cabinet\"];\r\n const applianceParent = layout.parts[\"Appliances\"];\r\n const wallsParent = layout.parts[\"Walls\"];\r\n const countertopParent = layout.parts[\"Countertop\"];\r\n const neededParts = [\"left_wall\", \"fridge\", \"top_cabinet\", \"top_handle\", \"bottom_cabinet\", \"bottom_handle\",\r\n \"popout_wall\", \"backsplash\", \"countertop\"];\r\n let relatedArray = [];\r\n [cabinetParent, applianceParent, wallsParent, countertopParent].forEach(parent => {\r\n if (parent) {\r\n relatedArray = [...relatedArray, ...parent.relatedItems]\r\n }\r\n });\r\n relatedArray = relatedArray.filter((relatedItem) => {\r\n return neededParts.includes(relatedItem.partId) && !relatedItem.allFeaturesReceived\r\n });\r\n const countertopPageChanges = this.getSubPartLayoutPageChanges(countertopParent, \"countertop\", layoutType);\r\n const backsplashPageChanges = this.getSubPartLayoutPageChanges(wallsParent, \"backsplash\", layoutType);\r\n if (relatedArray.length\r\n || countertopPageChanges.requestNeeded\r\n || countertopPageChanges.requestNameNeeded\r\n || backsplashPageChanges.requestNeeded\r\n || backsplashPageChanges.requestNameNeeded\r\n ) {\r\n return this.getNeeededKvPartsOnLayoutChange(layoutType, relatedArray, [countertopPageChanges, backsplashPageChanges], firstChange);\r\n } else {\r\n this.finishChangeLayout(layoutType);\r\n }\r\n break;\r\n }\r\n // case \"kvScene\": {\r\n case \"bvScene\": {\r\n this.getBvSceneParts(layoutType);\r\n break;\r\n }\r\n case \"Bathroom\":\r\n case \"BV\": {\r\n const showerParent = layout.parts[\"Shower\"];\r\n if (showerParent && showerParent.showerBody && !showerParent.showerBody.allFeaturesReceived) {\r\n const navItem = {\r\n part: showerParent.showerBody,\r\n text: showerParent.showerBody.partName\r\n };\r\n const oldType = layout.type;\r\n layout.type = layoutType;\r\n this.forceUpdate();\r\n this.checkIfAllFeaturesReceived(navItem, \"\", () => {\r\n this.finishChangeLayout(layoutType, oldType);\r\n });\r\n } else {\r\n this.finishChangeLayout(layoutType);\r\n }\r\n break;\r\n }\r\n default:\r\n this.finishChangeLayout(layoutType, null, null, firstChange);\r\n break;\r\n }\r\n };\r\n\r\n finishChangeLayout = (layoutType, oldType, currentState, firstChange = false) => {\r\n const layout = getCurrentLayout();\r\n if (Number.isInteger(oldType)) {\r\n loaderEnable();\r\n layout.type = oldType;\r\n layout.selectLayout(layoutType, oldType, currentState);\r\n } else {\r\n layout.selectLayout(layoutType);\r\n }\r\n window.requestInProcess = false;\r\n if (!layout.initialized && !firstChange) {\r\n layout.initialized = true;\r\n }\r\n if (this.props.refreshCB && !firstChange) {\r\n this.props.refreshCB();\r\n }\r\n if (!firstChange) {\r\n this.forceUpdate();\r\n store.dispatch(updateCanvasCount()); // update canvas\r\n loaderDisable();\r\n }\r\n return true\r\n };\r\n\r\n getBvSceneParts = (layoutType) => {\r\n const layout = getCurrentLayout();\r\n const wallsParent = layout.parts[\"Walls\"];\r\n const showerParent = layout.parts[\"Shower\"];\r\n const neededParts = [\"left_wall\", \"right_wall\", \"shower_interior_wall\", \"shower_fixture\"];\r\n let promises = [];\r\n [wallsParent, showerParent].forEach(parent => {\r\n if (parent && parent.relatedItems) {\r\n parent.relatedItems.forEach(relatedItem => {\r\n if (neededParts.includes(relatedItem.partId) && !relatedItem.allFeaturesReceived) {\r\n promises.push(this.getRelatedItemFeatures(relatedItem))\r\n }\r\n })\r\n }\r\n })\r\n const oldType = layout.type;\r\n layout.type = layoutType;\r\n Promise.all(promises).then(() => this.finishChangeLayout(layoutType, oldType))\r\n };\r\n\r\n getSubPartLayoutPageChanges = (parent, childName, layoutType) => {\r\n let\r\n requestNeeded = false,\r\n requestNameNeeded = false,\r\n nextLayoutFeaturesPage = 0,\r\n maxCurrentFeaturesPage = 0;\r\n if (parent && parent[childName]) {\r\n if (USE_SERVER_CACHING && parent[childName].nextFeaturesPageToLoadArray) {\r\n maxCurrentFeaturesPage = Math.max(...Object.values(parent[childName].nextFeaturesPageToLoadArray).map(obj => obj.page))\r\n nextLayoutFeaturesPage = (parent[childName].nextFeaturesPageToLoadArray[LayoutAbbreviations[layoutType]]).page;\r\n if (nextLayoutFeaturesPage < maxCurrentFeaturesPage) {\r\n requestNeeded = true;\r\n }\r\n }\r\n if (parent[childName].activeFeature) {\r\n const currentActiveName = parent[childName].activeFeature.getSplittedFeatureName();\r\n const neededLayoutName = invert(LayoutTypes)[layoutType];\r\n const neededFeature = parent[childName].featuresList[neededLayoutName].find((feature) => {\r\n const featureName = feature.getSplittedFeatureName();\r\n return featureName && currentActiveName && (featureName === currentActiveName)\r\n });\r\n if (!neededFeature) {\r\n requestNameNeeded = currentActiveName.split(\" \")[0]\r\n }\r\n }\r\n }\r\n return {\r\n requestNeeded,\r\n requestNameNeeded,\r\n nextLayoutFeaturesPage,\r\n maxCurrentFeaturesPage,\r\n relatedItem: parent ? parent[childName] : null\r\n }\r\n };\r\n\r\n getNeeededKvPartsOnLayoutChange = (layoutType, relatedPartsToReceive, relatedPartsToReceiveForLayouts, firstChange = false) => {\r\n const layout = getCurrentLayout();\r\n const currentState = layout.getActiveFeaturesAsObject(true, false, true);\r\n const oldType = layout.type;\r\n layout.type = layoutType;\r\n if (!firstChange) {\r\n this.forceUpdate();\r\n }\r\n const promises = relatedPartsToReceive.map((relatedItem) => {\r\n const size = COUNTERTOP_GROUP.includes(relatedItem.partId) ? 2000 : 1000;\r\n return getBvGroupFeatures(relatedItem.dbName || relatedItem.partName, 0, size).then(response => {\r\n relatedItem.setGroupFeatures(Array.isArray(response) ? response : [], size);\r\n return response\r\n })\r\n });\r\n relatedPartsToReceiveForLayouts.forEach((pageChanges) => {\r\n if (pageChanges.requestNeeded) { // here we receive all the same features for new layout type (cause client already received them in another layout)\r\n const nextLayoutName = LayoutAbbreviations[layoutType];\r\n const featuresSize = 1000 * (pageChanges.maxCurrentFeaturesPage - pageChanges.nextLayoutFeaturesPage);\r\n promises.push(getBvGroupFeatures(pageChanges.relatedItem.partName, pageChanges.nextLayoutFeaturesPage, featuresSize, [], \"\", nextLayoutName)\r\n .then(response => {\r\n pageChanges.relatedItem.nextFeaturesPageToLoadArray[nextLayoutName].page = pageChanges.maxCurrentFeaturesPage - 1; // 1 will be added in setGroupFeatures method\r\n pageChanges.relatedItem.setGroupFeatures(Array.isArray(response) ? response : []);\r\n return response\r\n }))\r\n }\r\n if (pageChanges.requestNameNeeded) { // here we receive current active itm to set it\r\n promises.push(NavigationRequests.searchFeaturesByName(pageChanges.relatedItem, pageChanges.requestNameNeeded))\r\n }\r\n });\r\n return Promise.all(promises).then(() => this.finishChangeLayout(layoutType, oldType, currentState, firstChange));\r\n };\r\n\r\n}\r\n","import {connect} from \"react-redux\";\r\nimport PropTypes from \"prop-types\";\r\n\r\nimport {setLeadCaptureClickCount} from \"../../../actions/userFunctions\";\r\nimport {LOOK_OVERLAYS} from \"../core/constants\";\r\nimport {setLookOverlayOpened} from \"../../../actions/lookFunctions\";\r\n\r\n\r\nconst WithClickCount = (props) => {\r\n\r\n const {fabricatorSettings, isPhoneNumberValidated, leadCaptureClickCount, setLeadCaptureClickCount, children,\r\n setLookOverlayOpened} = props;\r\n\r\n const maxClickCountReached = () => {\r\n if (!isPhoneNumberValidated && fabricatorSettings.clickLeadCapture) {\r\n const newLeadCount = leadCaptureClickCount + 1;\r\n if (newLeadCount >= fabricatorSettings.clickLeadCount) {\r\n setLookOverlayOpened(LOOK_OVERLAYS.leadCapture);\r\n return true;\r\n } else {\r\n setLeadCaptureClickCount(newLeadCount);\r\n }\r\n }\r\n return false\r\n }\r\n\r\n\r\n return children(maxClickCountReached)\r\n};\r\n\r\nWithClickCount.propTypes = {\r\n children: PropTypes.any.isRequired\r\n}\r\n\r\nconst mapStateToProps = (store) => {\r\n const {settings} = store.fabricatorState;\r\n const {isPhoneNumberValidated, leadCaptureClickCount} = store.userState;\r\n return {\r\n fabricatorSettings: settings,\r\n isPhoneNumberValidated,\r\n leadCaptureClickCount,\r\n }\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n setLeadCaptureClickCount,\r\n setLookOverlayOpened,\r\n};\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(WithClickCount)\r\n","import React from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport {FormattedMessage, injectIntl} from \"react-intl\";\r\nimport PropTypes from \"prop-types\";\r\nimport $ from \"jquery\";\r\n\r\nimport Switch from '@mui/material/Switch';\r\nimport FormControlLabel from '@mui/material/FormControlLabel';\r\n\r\nimport {getCurrentLayout} from \"../../../appLayout\";\r\n// import COLOR_THEMES, {COLORS} from \"../../../../colorThemes\";\r\nimport {featureInterface} from \"../../../../interfaces/featureInterface\";\r\nimport {updateCanvasCount} from \"../../../../actions/actionFunctions\";\r\nimport {clickOnSimilarFeatures, getApplyToLogic} from \"../lookNavigationFunctions\";\r\nimport {IS_QKB_UI} from \"../../../../config\";\r\nimport ActionTypes from \"../../../../misc/actionTypes\";\r\nimport LookAllWallsRadioButtonSmall from \"./lookAllWallsRadioButtonSmall\";\r\n\r\n\r\nconst LookAllWallsRadioButton = (props) => {\r\n\r\n const {lookFeature, lookActiveFeature, intl, updateCanvasCount, dispatch, showColumnCheckbox, type, viewType,\r\n showTutorialToolTip, fabricatorData} = props;\r\n\r\n const wallFeature = lookFeature || lookActiveFeature;\r\n\r\n if (!wallFeature || fabricatorData.isEncore) {\r\n return null\r\n }\r\n\r\n const layout = getCurrentLayout();\r\n\r\n const applyToLogic = getApplyToLogic(wallFeature);\r\n if (!applyToLogic) {\r\n return null\r\n }\r\n\r\n const {translateId, setApplyToFunction, applyToArrayAll, currentApplyToArray} = applyToLogic;\r\n const checked = currentApplyToArray.includes(wallFeature.partId);\r\n\r\n const updateCanvas = () => {\r\n if (IS_QKB_UI) {\r\n $(window).trigger(ActionTypes.CHANGE_LAYOUT); // update canvas\r\n } else {\r\n updateCanvasCount();\r\n }\r\n }\r\n\r\n const allWallsCheckboxClick = async () => {\r\n if (checked) { // already enabled\r\n if (currentApplyToArray.length) {\r\n dispatch(setApplyToFunction([], true, applyToLogic.type))\r\n }\r\n applyToArrayAll.forEach(wallPartId => {\r\n const subPart = layout.getSubPartByPartId(wallPartId);\r\n if (!subPart || (subPart.part.partId === wallFeature.partId) || !subPart.part.activeFeatureBeforeAllWalls) {\r\n return null\r\n }\r\n subPart.part.activeFeatureBeforeAllWalls.clickFromAllWalls(true);\r\n });\r\n updateCanvas();\r\n return\r\n } // already enabled end\r\n\r\n if (applyToArrayAll.length !== currentApplyToArray.length) {\r\n dispatch(setApplyToFunction([...applyToArrayAll], true, applyToLogic.type)) // update checkbox\r\n }\r\n await clickOnSimilarFeatures(wallFeature, applyToLogic);\r\n updateCanvas();\r\n };\r\n\r\n if (showColumnCheckbox) {\r\n return (\r\n \r\n }\r\n\r\n return (\r\n \r\n : message.message\r\n ? message.message\r\n : message.toString ? message.toString() : null\r\n } else if (message) { //string\r\n return intl.messages[message] ? : message.replace(\"Zip\", \"Postal\")\r\n } else {\r\n return \"Error\";\r\n }\r\n };\r\n\r\n render() {\r\n const props = this.props.state || this.props;\r\n\r\n if (!props.visible) {\r\n return null\r\n }\r\n\r\n const bClass = props.error ? 'message-red-lable' : 'message-blue-lable';\r\n const hClass = props.error ? 'message-error-message-title' : 'message-system-message-title';\r\n const messageClass = (props.error ? 'message-system-text-red' : 'message-system-text-blue') +\r\n (props.inline ? ' message-system-text-inline' : '');\r\n let buttonsElements = [];\r\n if (props.buttons && props.buttons.length) {\r\n buttonsElements = props.buttons.map((b) => {\r\n return ;\r\n });\r\n } else {\r\n buttonsElements.push(\r\n {\r\n //TODO[Artem] add default close logic\r\n }\r\n }}/>\r\n );\r\n }\r\n\r\n if (props.newStyles) {\r\n return (\r\n \r\n {(hideOverlay) => (\r\n \r\n )\r\n }\r\n\r\n return (\r\n \r\n : null}\r\n
\r\n )\r\n }\r\n\r\n}\r\n\r\nconst mapStateToProps = (store) => ({\r\n filtersVisible: store.filterState.showFilters,\r\n filterGroups: store.filterState.filterGroups,\r\n bvPresets: store.bathroomVisualizerState.bvPresets,\r\n userIsLoggedIn: store.userState.userIsLoggedIn,\r\n isPhoneNumberValidated: store.userState.isPhoneNumberValidated,\r\n activeNavigationFilter: store.navigationState.activeNavigationFilter,\r\n countertopNavigationFilterCompleted: store.navigationState.countertopNavigationFilterCompleted,\r\n visualizerTutorialStep: store.tutorialState.visualizerTutorialStep,\r\n visualizerTutorialIsOpened: store.tutorialState.visualizerTutorialIsOpened,\r\n activeQuoteIndex: store.quotesState.activeQuoteIndex,\r\n});\r\n\r\nconst mapDispatchToProps = {\r\n setNavigationViewType,\r\n toggleDesktopNavigation,\r\n setActiveNavigationNames,\r\n setModuleContextMenuType,\r\n setActiveNavigationFilter,\r\n setActiveNavigationFilterStepIndex,\r\n setDefaultSelectionGroup,\r\n changeActivePartRelatedItemIndex,\r\n setVisualizerTutorialStep,\r\n showVisualizerTutorial,\r\n setNavigationLoading\r\n};\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(DesktopNavigation);\r\n","import React from 'react';\r\nimport {connect} from 'react-redux';\r\nimport {injectIntl} from \"react-intl\";\r\n\r\nimport MobileNavigationCommon from \"../../visComponents/navigation/mobileNavigationCommon\";\r\n\r\nimport {ContentType} from \"../../visComponents/constants\";\r\nimport Z from \"../core/zIndex\";\r\n\r\nimport MobileNavigationButtons from '../../visComponents/navigation/mobile/mobileNavigationButtons';\r\nimport MobileNavigationAllWallsCheckbox from '../../visComponents/navigation/mobile/mobileNavigationAllWallsCheckbox';\r\nimport FeatureWizardSteps from \"../../visComponents/navigation/featureWizard/featureWizardSteps\";\r\n\r\nimport {changeActivePartRelatedItemIndex, setDefaultSelectionGroup} from \"../../../actions/actionFunctions\";\r\nimport {\r\n setActiveNavigationFilter,\r\n setModuleContextMenuType,\r\n setModuleContextMenuModule,\r\n setActiveNavigationFilterStepIndex, setNavigationViewType, setNavigationLoading\r\n} from \"../../../actions/navigationFunctions\";\r\n\r\nimport MobileMenuSelect from '../../visComponents/navigation/mobile/mobileMenuSelect';\r\nimport LockedView from \"../../common/lockedView\";\r\n\r\nimport Filters from \"../../visComponents/navigation/newFilters/filters\";\r\nimport BodyPanelRadio from \"../../visComponents/navigation/desktop/bodyPanelRadio\";\r\nimport FilterSwitchers from \"../../visComponents/navigation/newFilters/filterSwitchers\";\r\nimport FilterSelection from \"../../visComponents/navigation/newFilters/filterSelection\";\r\n// import {CABINET_WIZARD_BUTTONS} from \"../core/constants\";\r\nimport NavigationFiltersSteps from \"../../visComponents/navigation/newFilters/navigationFiltersSteps\";\r\nimport ContextMenuSimple from \"./contextMenuSimple\";\r\n\r\nimport {getCurrentLayout} from \"../../appLayout\";\r\n\r\nclass MobileNavigation extends MobileNavigationCommon {\r\n\r\n componentWillReceiveProps(nextProps) {\r\n this._componentWillReceiveProps(nextProps)\r\n }\r\n\r\n bindCanvasClick = (event) => {\r\n // console.log(\"bindCanvasClick event\");\r\n\r\n if (!window.touchMove && !this.state.showNavigation && !this.state.contextMenuOpen) {\r\n this.props.setHoveredLayer(event);\r\n }\r\n\r\n if (document.hoveredLayer && !window.touchMove) {\r\n // $('.canvas-text').html(`CLICK3`);\r\n const hoveredZone = Z.getMenuByHoveredLayer(document.hoveredLayer);\r\n if (hoveredZone) {\r\n if (hoveredZone.contextMenuPartId && !this.state.showNavigation) {\r\n if (this.state.contextMenuOpen) {\r\n this.setState({\r\n contextMenuOpen: false,\r\n hoveredLayer: {}\r\n });\r\n document.removeEventListener('click', this.handleContextMenuBlur);\r\n } else {\r\n let contextMenuOpen = \"\";\r\n\r\n const receiveBackSplashes = () => {\r\n const layout = getCurrentLayout();\r\n const wallsParent = layout.parts[\"Walls\"];\r\n const backsplashSubPart = wallsParent.subParts().find(subPart => subPart.part.partId === \"backsplash\");\r\n this.checkIfAllFeaturesReceived(backsplashSubPart);\r\n };\r\n\r\n switch (hoveredZone.contextMenuPartId) {\r\n case \"countertop_group_custom\":\r\n contextMenuOpen = \"Countertop\";\r\n break;\r\n case \"right_wall_custom\":\r\n contextMenuOpen = \"right_wall_custom\";\r\n break;\r\n case \"left_wall_custom\":\r\n contextMenuOpen = \"left_wall_custom\";\r\n break;\r\n case \"backsplash_custom_left\": {\r\n receiveBackSplashes();\r\n contextMenuOpen = \"backsplash_custom_left\";\r\n break;\r\n }\r\n case \"backsplash_custom_right\": {\r\n receiveBackSplashes();\r\n contextMenuOpen = \"backsplash_custom_right\";\r\n break;\r\n }\r\n case \"backsplash_custom\": {\r\n receiveBackSplashes();\r\n contextMenuOpen = \"backsplash_custom\";\r\n break;\r\n }\r\n case \"center_island_custom\":\r\n contextMenuOpen = \"Center Island\";\r\n break;\r\n default:\r\n break;\r\n }\r\n this.setState({\r\n contextMenuOpen: contextMenuOpen || hoveredZone,\r\n hoveredLayer: document.hoveredLayer\r\n }, () => {\r\n if (contextMenuOpen) {\r\n setTimeout(() => {\r\n document.addEventListener('click', this.handleContextMenuBlur);\r\n }, 0)\r\n }\r\n });\r\n }\r\n return false;\r\n } else if (this.state.contentType === 0) {\r\n if (!window.canvasIsDragging) {\r\n this.props.setCanvasClass((hoveredZone.child || hoveredZone.parent || hoveredZone).toLowerCase().replace(/ /g, \"-\"));\r\n }\r\n this.openMobileMenu();\r\n }\r\n\r\n hoveredZone.child\r\n ? this.triggerOpenNavigationMenu(hoveredZone.child, hoveredZone.parent, false)\r\n : this.triggerOpenNavigationMenu(hoveredZone)\r\n\r\n }\r\n\r\n }\r\n\r\n };\r\n\r\n handleNavigationItemClick = (item, ignoreLocked = false) => {\r\n\r\n if (window.location.port === '9007' || document.kvConfig.kioskMode) {\r\n console.log('item', item);\r\n }\r\n this.itemClick(item, ignoreLocked);\r\n\r\n this.props.setActiveFeature(item.part);\r\n\r\n const canvasClass = this.state.childNavigationItem\r\n ? this.state.parentNavigationItem.text + '-' + this.state.childNavigationItem.text\r\n : this.state.parentNavigationItem.text;\r\n\r\n if (!window.canvasIsDragging) {\r\n this.props.setCanvasClass(canvasClass.toLowerCase().replace(/ /g, \"-\"));\r\n }\r\n\r\n if (this.state.parentNavigationItem) { // update canvas only if it is child\r\n this.props.refreshCB();\r\n }\r\n if (item.part.partId === \"top_cabinet\" && !item.part.metaData[\"Module\"]) {\r\n this.props.setModuleContextMenuModule(null)\r\n }\r\n };\r\n\r\n handleSubPartClick = (subNavigationItem, activeNavigationFilter = null) => { // sidebar list item click\r\n const subItemPart = subNavigationItem.part;\r\n const childNavigationItemPartId = subItemPart.partId;\r\n subItemPart.getParent().handleSubPartClick(subItemPart);\r\n this.setState({\r\n childNavigationItem: subNavigationItem,\r\n showFilterSelection: subItemPart.allFeaturesReceived, // show filters only if subItemPart has all features\r\n showerWallWizardGroupsSelected: false,\r\n searchText: \"\"\r\n }, () => {\r\n this.scrollContentToTop();\r\n this.rememberWallsSelection();\r\n this.checkIfAllFeaturesReceived(subNavigationItem, \"childNavigationItem\");\r\n });\r\n /*set new materials page subIndex*/\r\n this.setActivePartRelatedItemIndex(subNavigationItem);\r\n // console.log('subItemPart', subItemPart);\r\n if (!window.canvasIsDragging) {\r\n const canvasClass = this.state.parentNavigationItem.text + '-' + subNavigationItem.text\r\n .toLowerCase().replace(/ /g, \"-\");\r\n this.props.setCanvasClass(canvasClass);\r\n }\r\n this.setNewActiveFeature(subNavigationItem);\r\n\r\n this.setNavigationFilterIfTheChildWasChanged(childNavigationItemPartId, activeNavigationFilter);\r\n\r\n };\r\n\r\n backsplashSelectClick = () => {\r\n this.props.refreshCB(); // update canvas\r\n this.reRenderComponent(); // update nav items\r\n };\r\n\r\n render() {\r\n const layout = getCurrentLayout();\r\n const activePart = this.state.parentNavigationItem ? this.state.parentNavigationItem.part : null;\r\n const activeSubPart = this.state.childNavigationItem ? this.state.childNavigationItem.part : null;\r\n const activeNavPart = activeSubPart || activePart;\r\n const parentItems = layout.designNavigationItems(); // parent list without filters\r\n const allFeaturesReceived = activeNavPart && activeNavPart.allFeaturesReceived;\r\n\r\n // console.log('activePart', activePart);\r\n // console.log('activeSubPart', activeSubPart);\r\n // console.log('activePart.subTypes()', activePart && activePart.subTypes());\r\n // console.log('this.state.childNavigationItemv1111', this.state.childNavigationItem);\r\n\r\n let useWizard = false;\r\n let wizardGroups = [];\r\n if (this.props.fabricatorSettings\r\n && (this.props.fabricatorSettings.wizardConsumers || (this.props.fabricatorSettings.wizardClients && document.kvConfig.isBackend))\r\n && this.state.contentType === ContentType.Design && activeSubPart && activeSubPart.canUseWizard && activeSubPart.allFeaturesReceived) {\r\n useWizard = true;\r\n wizardGroups = this.state[this.getWizardGroupsByPartId(this.state.childNavigationItem.part.partId)];\r\n }\r\n\r\n const features = this.getFeatures(layout);\r\n\r\n const showLockedView = this.currentActiveItemIsLocked(useWizard);\r\n\r\n const useFilters = (activePart && activePart.partId === \"kitchen_floor\" && activePart.allFeaturesReceived)\r\n || (activeSubPart && (this.isWallItem(activeSubPart) || activeSubPart.partId === \"accent_wall\"\r\n || activeSubPart.partId === \"shower_interior_wall_accent\") && activeSubPart.allFeaturesReceived);\r\n\r\n const filterSelectionHasValues = activeNavPart && FilterSelection.getAvailableFilterValues(\r\n this.props.filterGroups, \"Material\", activeNavPart, this.props.fabricatorData\r\n ).length;\r\n\r\n const itemIsSelected = (!this.props.fabricatorSettings.leadCapture\r\n || (activeSubPart && activeSubPart.activeFeature && activeSubPart.firstClick[this.props.activeQuoteIndex] && activeSubPart.placeholderChanged));\r\n\r\n const useKVWizard = false;\r\n //TODO change it when BE is ready\r\n\r\n const showNavigationFilters = useKVWizard &&activeNavPart\r\n // && this.props.activeNavigationFilter !== CABINET_WIZARD_BUTTONS[0].buttonId\r\n && activeNavPart.canUseNavigationFilter && activeNavPart.canUseNavigationFilter();\r\n\r\n let showNavigationFiltersSteps = false;\r\n if (useKVWizard && activeNavPart && activeNavPart.canUseNavigationFilterSteps\r\n && activeNavPart.canUseNavigationFilterSteps()) {\r\n showNavigationFiltersSteps = !this.props.countertopNavigationFilterCompleted;\r\n }\r\n\r\n const cabinetsPartIds = [\"top_cabinet\", \"bottom_cabinet\", \"center_island_cabinet\"];\r\n const isCabinet = activeSubPart && cabinetsPartIds.includes(activeSubPart.partId);\r\n const countertopPartIds = [\"countertop\", \"backsplash\", \"center_island_countertop\"];\r\n const isCountertop = activeSubPart && countertopPartIds.includes(activeSubPart.partId);\r\n\r\n return (\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n);\r\n\r\nexport const EditIcon = (props) => (\r\n \r\n);\r\n\r\nexport const EyeBallIcon = (props) => (\r\n \r\n);\r\n\r\nexport const ScreenshotIcon = (props) => (\r\n \r\n);\r\n\r\nexport const PlusIcon = (props) => (\r\n \r\n);\r\n\r\nexport const LookLayoutIcon = (props) => (\r\n \r\n \r\n
\r\n )\r\n }\r\n\r\n return (\r\n \r\n {withCounter ? : null}\r\n \r\n
\r\n )\r\n};\r\n\r\nMaterialSpinner.propTypes = {\r\n color: PropTypes.string,\r\n size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\r\n withCounter: PropTypes.bool,\r\n}\r\n\r\nconst mapStateToProps = (store) => {\r\n return {\r\n activeTheme: store.serverState.activeTheme,\r\n };\r\n};\r\n\r\nexport default connect(mapStateToProps)(MaterialSpinner)\r\n","import * as PropTypes from \"prop-types\";\r\nimport {filterValueInterface} from \"./filterInterface\";\r\nimport {featureInterface} from \"./featureInterface\";\r\n\r\n// ITEM -> GROUP\r\n// ITEM -> GROUP -> SECTION -> STEP // not used\r\n\r\nexport const WIZARD_GROUP_TYPES = {\r\n group: \"group\",\r\n filter: \"filter\",\r\n custom: \"custom\",\r\n}\r\n\r\nexport const wizardGroupInterface = {\r\n id: PropTypes.string.isRequired,\r\n nodeType: PropTypes.oneOf(Object.keys(WIZARD_GROUP_TYPES)).isRequired,\r\n groupName: PropTypes.string.isRequired,\r\n filterGroupId: PropTypes.number,\r\n scopeImageUrl: PropTypes.string,\r\n customDisplayName: PropTypes.string,\r\n enabled: PropTypes.bool.isRequired,\r\n title: PropTypes.string,\r\n description: PropTypes.string,\r\n featuresExcluded: PropTypes.array,\r\n featuresIncluded: PropTypes.array,\r\n useIncluded: PropTypes.bool,\r\n filtersExcluded: PropTypes.array,\r\n productCartTitle: PropTypes.string,\r\n productCartDescription: PropTypes.string,\r\n uploadedImageUrl: PropTypes.string,\r\n noAvailableFilters: PropTypes.bool,\r\n notRequired: PropTypes.bool,\r\n mergedGroups: PropTypes.array, // same parent logic\r\n wizardGroupIcon: PropTypes.string,\r\n hideInCartAndReceipt: PropTypes.bool,\r\n multipleAddToCart: PropTypes.bool,\r\n inputFields: PropTypes.array, // {id: \"\", checked: bool, oneLine: bool}\r\n headerTitle: PropTypes.string, // {id: \"\", checked: bool}\r\n headerSubTitle: PropTypes.string, // {id: \"\", checked: bool}\r\n visibleInVisualizers: PropTypes.array, //[\"kitchen\", \"laundryroom\", etc]\r\n hideForCustomers: PropTypes.bool, // eyeball\r\n skipProductInfo: PropTypes.bool,\r\n};\r\n\r\nexport const wizardNodeInterface = {\r\n id: PropTypes.string.isRequired,\r\n type: PropTypes.string.isRequired,\r\n position: PropTypes.object.isRequired,\r\n style: PropTypes.object,\r\n data: PropTypes.shape({\r\n wizardGroup: PropTypes.shape(wizardGroupInterface)\r\n }),\r\n};\r\n\r\nexport const wizardEdgeInterface = {\r\n id: PropTypes.string.isRequired,\r\n source: PropTypes.string.isRequired,\r\n target: PropTypes.string.isRequired,\r\n disabled: PropTypes.bool,\r\n};\r\n\r\nexport const wizardItemInterface = {\r\n id: PropTypes.number,\r\n visualizer: PropTypes.string,\r\n name: PropTypes.string,\r\n description: PropTypes.string,\r\n customImageUrl: PropTypes.string,\r\n uploadedImageUrl: PropTypes.string,\r\n enabled: PropTypes.bool,\r\n hideItems: PropTypes.bool,\r\n selected: PropTypes.bool,\r\n // wizardSteps: PropTypes.arrayOf(PropTypes.shape(wizardStepInterface)),\r\n // wizardSections: PropTypes.arrayOf(PropTypes.shape(wizardSectionInterface)),\r\n wizardGroups: PropTypes.arrayOf(PropTypes.shape(wizardGroupInterface)),\r\n wizardNodes: PropTypes.arrayOf(PropTypes.shape(wizardNodeInterface)),\r\n wizardEdges: PropTypes.arrayOf(PropTypes.shape(wizardEdgeInterface)),\r\n disabledScenes: PropTypes.arrayOf(PropTypes.number),\r\n startTitle: PropTypes.string,\r\n startDescription: PropTypes.string,\r\n};\r\n\r\nexport const wizardSelectedValueInterface = {\r\n partId: PropTypes.string,\r\n wizardGroup: PropTypes.shape(wizardGroupInterface),\r\n selectedFilter: PropTypes.shape(filterValueInterface),\r\n selectedFeature: PropTypes.shape(featureInterface),\r\n quantity: PropTypes.number,\r\n singleFeature: PropTypes.bool,\r\n};\r\n\r\nexport const wizardAllObjectInterface = {\r\n quoteIndex: PropTypes.number.isRequired,\r\n lastVisitedStep: PropTypes.number,\r\n isLastActiveWizard: PropTypes.bool,\r\n wizardItemId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\r\n visualizer: PropTypes.string, // common name, same as in the wizard item\r\n wizardSelectedValues: PropTypes.object, // {0: wizardSelectedValueInterface, 1: wizardSelectedValueInterface}\r\n};\r\n\r\nexport const wizardConflictingObjectInterface = {\r\n stepIndex: PropTypes.number.isRequired,\r\n wizardGroupId: PropTypes.string.isRequired,\r\n cartItemId: PropTypes.string.isRequired\r\n}\r\n","import {Part} from \"../part\";\r\nimport DesignNavigationItem from \"../../../visComponents/designNavigationItem\";\r\nimport {PartMenuType} from \"../../../visComponents/constants\";\r\nimport {vanityThumbnail} from \"../../../bvComponent/core/assets\";\r\nimport {METADATA, VANITY_TYPES, LOOK_ROOM_TYPES} from \"../constants\";\r\n\r\nimport VanityHandle from \"../subparts/vanity/vanityHandle\";\r\nimport VanityCabinet from \"../subparts/vanity/vanityCabinet\";\r\nimport VanityCountertop from \"../subparts/vanity/vanityCountertop\";\r\nimport VanityBacksplash from \"../subparts/vanity/vanityBacksplash\";\r\nimport Mirror from \"../subparts/vanity/mirror\";\r\nimport Sink from \"../subparts/vanity/sink\";\r\nimport VanityFaucet from \"../subparts/vanity/faucet\";\r\nimport Ptrap from \"../subparts/vanity/pTrap\";\r\nimport VanityWashstand from \"../subparts/vanity/vanityWashstand\";\r\nimport VanityMiddle from \"../subparts/vanity/vanityMiddle\";\r\nimport DrawerPull from \"../subparts/vanity/drawerPull\";\r\nimport WSTowelBar from \"../subparts/vanity/wsTowelBar\";\r\nimport VanityLegs from \"../subparts/vanity/vanityLegs\";\r\nimport VanityConsole from \"../subparts/vanity/vanityConsole\";\r\nimport {getSkuWithoutDot} from \"../../lookNavigation/lookFunctions2\";\r\nimport {getCurrentRoomType} from \"../../../appLayout\";\r\nimport DoorHandle from \"../subparts/vanity/doorHandle\";\r\nimport DrawerHandle from \"../subparts/vanity/drawerHandle\";\r\n\r\nexport class Vanity extends Part {\r\n static id = 'Vanity';\r\n\r\n static Types = {\r\n Complete: 'Complete',\r\n Custom: 'Custom'\r\n };\r\n\r\n constructor() {\r\n super(true, false, PartMenuType.Complex);\r\n\r\n this.menuType = PartMenuType.Complex;\r\n this.partName = 'Vanity';\r\n this.translateId = \"visualizer.bathroom.vanity\";\r\n this.partThumbnail = vanityThumbnail;\r\n this.activeSubType_ = Vanity.Types.Custom;\r\n this.relatedItems = [];\r\n this.placeholdersNeeded = false; // only Vanity property\r\n\r\n // vanity parts\r\n this.vanityCabinet = null;\r\n this.completeVanity = null;\r\n this.countertop = null;\r\n this.sink = null;\r\n this.faucet = null;\r\n this.vanityBacksplash = null;\r\n this.vanityHandle = null;\r\n this.mirror = null;\r\n this.vanityPTrap = null;\r\n this.vanityWashstand = null;\r\n this.vanityMiddle = null;\r\n this.drawerPull = null;\r\n this.wsTowelBar = null;\r\n this.vanityLegs = null;\r\n this.vanityLegs = null;\r\n this.vanityConsole = null;\r\n this.doorHandle = null;\r\n this.drawerHandle = null;\r\n\r\n this.vanity_type = VANITY_TYPES.vanity_cabinet;\r\n this.relatedGroupNames = [\"Sink\", \"Mirror\", \"Countertop\", \"Faucet\", \"VanityBacksplash\", \"Vanity Handle\", \"Vanity\",\r\n \"Ptrap\", \"Washstand\", \"Vanity Middle\", \"Drawer Pull\", \"WS Towel Bar\", \"Vanity Legs\", \"Console\", \"Door Handle\",\r\n \"Drawer Handle\"];\r\n }\r\n\r\n load(dbFeature, loadFeature = true) {\r\n let relatedItemName = \"\",\r\n RelatedItemClass = null;\r\n switch (dbFeature.groupName) {\r\n case \"Sink\":\r\n relatedItemName = \"sink\";\r\n RelatedItemClass = Sink;\r\n break;\r\n case \"Mirror\":\r\n relatedItemName = \"mirror\";\r\n RelatedItemClass = Mirror;\r\n break;\r\n case \"Countertop\":\r\n case \"Vanitie Countertop\":\r\n relatedItemName = \"countertop\";\r\n RelatedItemClass = VanityCountertop;\r\n break;\r\n case \"Faucet\":\r\n relatedItemName = \"faucet\";\r\n RelatedItemClass = VanityFaucet;\r\n break;\r\n case \"VanityBacksplash\":\r\n case \"BackSplash\":\r\n case \"Backsplash\":\r\n relatedItemName = \"vanityBacksplash\";\r\n RelatedItemClass = VanityBacksplash;\r\n break;\r\n case \"Vanity Handle\":\r\n relatedItemName = \"vanityHandle\";\r\n RelatedItemClass = VanityHandle;\r\n break;\r\n case \"Door Handle\":\r\n relatedItemName = \"doorHandle\";\r\n RelatedItemClass = DoorHandle;\r\n break;\r\n case \"Drawer Handle\":\r\n relatedItemName = \"drawerHandle\";\r\n RelatedItemClass = DrawerHandle;\r\n break;\r\n case \"Vanity\":\r\n case \"Vanitie\": {\r\n relatedItemName = \"vanityCabinet\";\r\n RelatedItemClass = VanityCabinet;\r\n break;\r\n }\r\n case \"Ptrap\": {\r\n relatedItemName = \"vanityPTrap\";\r\n RelatedItemClass = Ptrap;\r\n break;\r\n }\r\n case \"Washstand\": {\r\n relatedItemName = \"vanityWashstand\";\r\n RelatedItemClass = VanityWashstand;\r\n break;\r\n }\r\n case \"Vanity Middle\": {\r\n relatedItemName = \"vanityMiddle\";\r\n RelatedItemClass = VanityMiddle;\r\n break;\r\n }\r\n case \"Drawer Pull\": {\r\n relatedItemName = \"drawerPull\";\r\n RelatedItemClass = DrawerPull;\r\n break;\r\n }\r\n case \"WS Towel Bar\": {\r\n relatedItemName = \"wsTowelBar\";\r\n RelatedItemClass = WSTowelBar;\r\n break;\r\n }\r\n case \"Vanity Legs\": {\r\n relatedItemName = \"vanityLegs\";\r\n RelatedItemClass = VanityLegs;\r\n break;\r\n }\r\n case \"Console\": {\r\n relatedItemName = \"vanityConsole\";\r\n RelatedItemClass = VanityConsole;\r\n break;\r\n }\r\n }\r\n if (relatedItemName) {\r\n if (!this[relatedItemName]) {\r\n this[relatedItemName] = new RelatedItemClass(true);\r\n if (relatedItemName === \"sink\") {\r\n const faucetIndex = this.relatedItems.findIndex(relItem => relItem.partName === 'Faucet');\r\n faucetIndex ? this.relatedItems.splice(faucetIndex, 0, this.sink) : this.relatedItems.push(this.sink);\r\n } else if (relatedItemName === \"completeVanity\") {\r\n this.relatedItems.unshift(this.completeVanity); // cabinet needs to be first in the list.\r\n } else if (relatedItemName === \"vanityCabinet\") {\r\n this.relatedItems.unshift(this.vanityCabinet); // cabinet needs to be first in the list.\r\n } else {\r\n this.relatedItems.push(this[relatedItemName]);\r\n }\r\n }\r\n if (!this.categoryEnabled) {\r\n this.categoryEnabled = true\r\n }\r\n this[relatedItemName].getParent = () => this;\r\n if (loadFeature) {\r\n this[relatedItemName].load(dbFeature);\r\n }\r\n return true\r\n }\r\n return false\r\n }\r\n\r\n getRelatedItems() {\r\n return this.relatedItems.filter(item => item.visible.includes(this.activeSubType_));\r\n }\r\n\r\n subTypes() {\r\n return this.vanityCabinet && this.completeVanity ? [Vanity.Types.Custom, Vanity.Types.Complete] : [];\r\n }\r\n\r\n isSubTypeWithItems() {\r\n return this.activeSubType_ === Vanity.Types.Complete;\r\n }\r\n\r\n activeSubType() {\r\n return this.activeSubType_;\r\n }\r\n\r\n subParts() {\r\n const relatedItems = this.getRelatedItems();\r\n const excluded = [];\r\n const vanityPart = relatedItems.find(navItem => navItem.partId === \"vanity_cabinet\");\r\n if (vanityPart && vanityPart.activeFeature\r\n && vanityPart.activeFeature.metaData[\"VanityHandle\"]\r\n && vanityPart.activeFeature.metaData[\"VanityHandle\"].includes(\"None\")) {\r\n excluded.push(\"vanity_handle\")\r\n }\r\n return relatedItems\r\n .filter(item => !excluded.includes(item.partId))\r\n .map(_ => new DesignNavigationItem(_.partName, _));\r\n }\r\n\r\n // subPartsWithAccentWall() {\r\n // const vanityAccent = this.layout.parts.Walls.vanityAccent;\r\n // return [new DesignNavigationItem(vanityAccent.partName, vanityAccent),\r\n // ...this.getRelatedItems().map(_ => new DesignNavigationItem(_.partName, _))];\r\n // }\r\n\r\n handleSubTypeClick(subType) {\r\n this.activeSubType_ = subType;\r\n this.getRelatedItems().forEach((relatedItem) => {\r\n if (!relatedItem.activeFeature) {\r\n relatedItem.setDefault()\r\n }\r\n });\r\n }\r\n\r\n setDefaultPartAfterSubTypeClick() {\r\n return this.subParts()[0]\r\n }\r\n\r\n setDefault(layout) {\r\n this.getRelatedItems().forEach(_ => _.setDefault(layout));\r\n }\r\n\r\n counterTopSize(forFeatureGroup) {\r\n let vanitySize = this.getCounterTopSize() || \"24\"; // we have left and right mirror for \"L\" & \"R\" or single for \"C\"\r\n if ((vanitySize === \"72\" || (Array.isArray(vanitySize) && vanitySize[0] === (\"72\")))\r\n && forFeatureGroup && !(forFeatureGroup.partId === \"vanity_backsplash\" || forFeatureGroup.partId === \"vanity_countertop\")) {\r\n return [\"64\"]; // use 64 for everything except counterop and backsplash\r\n }\r\n return vanitySize\r\n }\r\n\r\n getCounterTopSize() {\r\n const currentVanityTypeFeatureGroup = this.relatedItems.find(relItem => relItem.partId === this.vanity_type);\r\n if (currentVanityTypeFeatureGroup && !currentVanityTypeFeatureGroup.activeFeature) {\r\n this.vanityCabinet.setDefault()\r\n }\r\n return (currentVanityTypeFeatureGroup && currentVanityTypeFeatureGroup.activeFeature)\r\n ? currentVanityTypeFeatureGroup.activeFeature.dbFeature.metaData[\"VanitySize\"]\r\n : null;\r\n }\r\n\r\n isDoubleVanity(feature = null) {\r\n if (this.vanity_type !== VANITY_TYPES.vanity_cabinet || !this.vanityCabinet) {\r\n return false\r\n }\r\n const checkFeature = feature || this.vanityCabinet.activeFeature;\r\n return checkFeature && checkFeature.metaData[\"VanityWidth\"] && (checkFeature.metaData[\"VanityWidth\"] === 64)\r\n }\r\n\r\n toggleVanityParts(disabled) {\r\n this.getRelatedItems().forEach(relItem => {\r\n if (relItem.partId === \"vanity_sink\" || relItem.partId === \"vanity_faucet\"\r\n || relItem.partId === \"vanity_countertop\" || relItem.partId === \"vanity_cabinet\"\r\n || relItem.partId === \"vanity_handle\" || relItem.partId === \"vanity_backsplash\") {\r\n relItem.disabled = disabled;\r\n }\r\n });\r\n }\r\n\r\n getActiveSkuFromRelatedItem(partId) {\r\n const relatedItem = this.relatedItems.find(relItem => relItem.partId === partId);\r\n return relatedItem && relatedItem.activeFeature && relatedItem.activeFeature.dbFeature.sharedFeatureName\r\n ? getSkuWithoutDot(relatedItem.activeFeature.dbFeature.sharedFeatureName)\r\n : null\r\n }\r\n\r\n getActiveMatchingMetaFromRelatedItem(partId, metaName = \"MatchingFeature\") {\r\n const relatedItem = this.relatedItems.find(relItem => relItem.partId === partId);\r\n return relatedItem && relatedItem.activeFeature\r\n ? relatedItem.activeFeature.metaData[metaName]\r\n : null\r\n }\r\n\r\n setCustomVanitySinkMetaData = (feature) => {\r\n switch (feature.dbFeature.lixilProductSubCategory) {\r\n case \"Pedestal Bathroom Sinks\":\r\n return \"Pedestal\"\r\n case \"Above Counter Sinks with Vessel\":\r\n case \"Countertop Bathroom Sinks\":\r\n return \"Top Mount\"\r\n case \"Undermount Bathroom Sinks\":\r\n case \"Undermount Sinks\":\r\n return \"Undermount\"\r\n default:\r\n return \"\"\r\n }\r\n }\r\n\r\n setSpecificRules(isAsBathroomState = false) {\r\n console.log(\"setSpecificRules\", isAsBathroomState);\r\n if (getCurrentRoomType(this.layout) === LOOK_ROOM_TYPES.as || isAsBathroomState) {\r\n const sinkFeatureGroup = this.relatedItems.find(relItem => relItem.partId === \"vanity_sink\");\r\n this.relatedItems.forEach(relItem => {\r\n Object.keys(relItem.featuresList).forEach(layoutName => {\r\n [...relItem.featuresList[layoutName], ...relItem.featuresPartsList[layoutName]].map(feature => {\r\n feature.dbFeature.metaData[\"FeatureSku\"] = [getSkuWithoutDot(feature.dbFeature.sharedFeatureName)];\r\n if (relItem.partId === \"vanity_sink\" && Array.isArray(feature.dbFeature.metaData[\"MatchingFeature\"])) {\r\n feature.dbFeature.metaData[\"CustomSinkSubCategory\"] = this.setCustomVanitySinkMetaData(feature);\r\n feature.metaData[\"CustomSinkSubCategory\"] = this.setCustomVanitySinkMetaData(feature);\r\n let sinkTypes = [];\r\n feature.dbFeature.metaData[\"MatchingFeature\"].forEach(currentSku => {\r\n Object.keys(VANITY_TYPES).forEach(partId => {\r\n const featureGroup = this.relatedItems.find(relItem => relItem.partId === partId);\r\n if (featureGroup) {\r\n const feature = [...featureGroup.featuresList[layoutName], ...featureGroup.featuresPartsList[layoutName]].find(testFeature => {\r\n return getSkuWithoutDot(testFeature.dbFeature.sharedFeatureName) === currentSku\r\n });\r\n if (feature) {\r\n sinkTypes.push(feature.partId)\r\n }\r\n } else {\r\n console.log(\"no feature group found to apply sink metadata\", partId);\r\n }\r\n })\r\n });\r\n if (feature.dbFeature.metaData[\"MatchingFeature\"] && feature.dbFeature.metaData[\"MatchingFeature\"].includes(METADATA.NO)) {\r\n sinkTypes.push(VANITY_TYPES.vanity_cabinet);\r\n feature.dbFeature.metaData[\"FeatureSku\"] = [METADATA.ALL];\r\n feature.metaData[\"FeatureSku\"] = [METADATA.ALL];\r\n }\r\n // if (!sinkTypes.length && feature.dbFeature.metaData[\"MountType\"] && feature.dbFeature.metaData[\"MountType\"].includes('ST')) {\r\n // sinkTypes.push(METADATA.ALL)\r\n // }\r\n feature.dbFeature.metaData[\"CustomVanityType\"] = sinkTypes; // create custom metadata\r\n feature.metaData[\"CustomVanityType\"] = sinkTypes; // create custom metadata\r\n }\r\n if (relItem.partId === \"vanity_cabinet\" && Array.isArray(feature.dbFeature.metaData[\"MatchingFeature\"]) && sinkFeatureGroup) {\r\n let sinkTypes = [];\r\n feature.dbFeature.metaData[\"MatchingFeature\"].forEach(currentSku => {\r\n const sinkFeature = [...sinkFeatureGroup.featuresList[layoutName], ...sinkFeatureGroup.featuresPartsList[layoutName]].find(testFeature => {\r\n return getSkuWithoutDot(testFeature.dbFeature.sharedFeatureName) === currentSku\r\n });\r\n if (sinkFeature) {\r\n const type = this.setCustomVanitySinkMetaData(sinkFeature);\r\n if (!sinkTypes.includes(type)) {\r\n sinkTypes.push(this.setCustomVanitySinkMetaData(sinkFeature))\r\n }\r\n }\r\n });\r\n feature.dbFeature.metaData[\"CustomSinkSubCategory\"] = sinkTypes; // create custom metadata\r\n feature.metaData[\"CustomSinkSubCategory\"] = sinkTypes; // create custom metadata\r\n }\r\n // console.log(\"feature.metaData[\\\"CustomVanityType\\\"]\", feature.metaData[\"CustomVanityType\"]);\r\n // console.log(\"feature\", feature);\r\n return feature\r\n })\r\n })\r\n })\r\n }\r\n this.needToUpdateCustomMetadata = false;\r\n }\r\n\r\n updateVanityParts() {\r\n if (getCurrentRoomType(this.layout) === LOOK_ROOM_TYPES.as) {\r\n this.relatedItems.forEach(relatedItem => {\r\n if (relatedItem.hideLayerCondition) {\r\n relatedItem.disabled = relatedItem.hideLayerCondition();\r\n }\r\n });\r\n }\r\n }\r\n\r\n}\r\n\r\n","export const LayoutType = {\r\n Layout1: 1,\r\n Layout2: 2,\r\n Layout3: 3,\r\n Layout4: 4,\r\n Layout5: 5,\r\n Layout6: 6,\r\n};\r\n\r\nexport const LayoutAbbreviation = {\r\n All: \"ALL\",\r\n Layout1: \"Layout1\",\r\n Layout2: \"Layout2\",\r\n Layout3: \"Layout3\",\r\n Layout4: \"Layout4\",\r\n Layout5: \"Layout5\",\r\n Layout6: \"Layout6\",\r\n};\r\n\r\nexport const LayoutAbbreviations = [\r\n \"Layout1\",\r\n \"Layout2\",\r\n \"Layout3\",\r\n \"Layout4\",\r\n \"Layout5\",\r\n \"Layout6\",\r\n];\r\nexport const LayoutAbbreviationsToRemove = [\r\n \"Layout6\",\r\n \"Layout5\",\r\n \"Layout4\",\r\n \"Layout3\",\r\n \"Layout2\",\r\n \"Layout1\",\r\n];\r\n\r\nexport const METADATA = {\r\n ALL: \"ALL\",\r\n sinkUTypes: [\"U\", \"ST\", \"FM\", \"SM\"],\r\n FloorWithIsland: \"default\",\r\n NO: \"NO\",\r\n};\r\n\r\nexport const PLACEMENTS = {\r\n Island: \"Island\",\r\n Countertop: \"Countertop\"\r\n};\r\n\r\nexport const KVSCENE_BACKSPLASH_TYPES = [\"4 inch\", \"6 inch\", \"8 inch\", \"Full\"];\r\n\r\nexport const DECORS_MAX = 25;\r\n\r\nconst oldKitchenCabinetsLogicProfiles = [\r\n \"americasdream\",\r\n \"stonely_inc\",\r\n \"215mercury\",\r\n \"sci_surfaces\",\r\n \"lakeside_surfaces_\",\r\n \"true_blue_surfaces_\",\r\n \"bellezza_surfaces\",\r\n \"premier_cabinet_paintin_llc\",\r\n \"premier_cabinet_paintin_llc_v5\",\r\n \"american_kitchen_and_stone\",\r\n \"arizona_granite\",\r\n \"a_granito_world\",\r\n \"stonecraft\",\r\n \"wallstone_cabinetry_countertops\",\r\n \"jg_countertops_llc\",\r\n \"the_granite_guys\",\r\n \"blue_line_construction\",\r\n \"blue_line_construction_2023\",\r\n \"williams_kitchen_bath\",\r\n \"xpresbathshower\",\r\n \"eastern_surfaces\",\r\n \"wallstone_cabinetry_countertops_rebuild\",\r\n \"the_granite_guys_rebuild\",\r\n \"south_florida_remodelers\",\r\n \"artemisa\",\r\n \"kitchen_doctors_kbf\",\r\n \"home_essentials\",\r\n \"amc_building_supply_v5\",\r\n \"amc_countertops_v5\",\r\n \"cafe_countertops\",\r\n \"gmd_surfaces\",\r\n \"colonial_bath\",\r\n \"carpetmart\",\r\n];\r\n\r\nexport const hasOldCabinetLogic = () => {\r\n if (!window.location.host || (typeof window.location.host !== \"string\")) {\r\n return false\r\n }\r\n const subDomain = window.location.host.split('.')[0];\r\n if (window.location.host.includes(\"quotekandb.com\")) {\r\n return subDomain === \"moderno_demo_3011\" || subDomain === \"erpizo\" || subDomain === \"multitool\"\r\n }\r\n return subDomain.includes(\"porcelanosa_\") || window.location.href.includes(\"fab_subdomain=porcelanosa_\")\r\n || oldKitchenCabinetsLogicProfiles.some(profile => {\r\n return (profile === subDomain) || window.location.href.includes(\"fab_subdomain=\" + profile)\r\n })\r\n}\r\n\r\nexport const useOldCabinetLogic = hasOldCabinetLogic();\r\n","import orderBy from \"lodash/orderBy\";\r\n\r\nimport {Part} from \"./part\";\r\nimport DesignNavigationItem from \"../../../visComponents/designNavigationItem\";\r\nimport {PartMenuType} from \"../../../visComponents/constants\";\r\nimport {ShowerType, ShowerBodyType} from \"../constants\";\r\nimport {showerThumbnail} from '../assets';\r\n\r\n// import store from \"../../../../store\";\r\n\r\nimport {ShowerTubCombo} from \"./showerTubCombo\";\r\nimport Shadow from \"../subparts/shadow\";\r\n\r\nimport ShowerFixture from \"../subparts/shower/showerFixture\";\r\nimport ShowerGlass from \"../subparts/shower/showerGlass\";\r\n// import ShowerOverlay from \"../subparts/shower/showerOverlay\";\r\nimport ShowerBody from \"../subparts/shower/showerBody\";\r\nimport ShowerInteriorWall from \"../subparts/shower/showerInteriorWall\";\r\nimport ShowerInteriorWallAccent from \"../subparts/shower/showerInteriorWallAccent\";\r\nimport ShowerDoor from \"../subparts/shower/showerDoor\";\r\nimport ShowerPanCombo from \"../subparts/shower/showerPanCombo\";\r\nimport ShowerDoorHandle from \"../subparts/shower/showerDoorHandle\";\r\nimport PonyWallCap from \"../subparts/shower/ponyWallCap\";\r\nimport PonyWallGlass from \"../subparts/shower/ponyWallGlass\";\r\nimport ShowerFloor from \"../subparts/shower/showerFloor\";\r\nimport Threshold from \"../subparts/shower/threshold\";\r\nimport ShowerDrain from \"../subparts/shower/showerDrain\";\r\nimport ShowerHead from \"../subparts/shower/showerHead\";\r\n\r\nexport class Shower extends Part {\r\n static id = 'Shower';\r\n\r\n static Type = {\r\n Custom: 'Custom',\r\n Complete: 'Complete',\r\n Combo: 'Combo',\r\n All: 'All'\r\n };\r\n\r\n constructor() {\r\n super(true, false, PartMenuType.Complex);\r\n\r\n this.menuType = PartMenuType.Complex;\r\n this.partThumbnail = showerThumbnail;\r\n this.partName = 'Shower';\r\n this.translateId = \"visualizer.bathroom.shower\";\r\n this.relatedItems = [];\r\n this.activeSubType_ = Shower.Type.Custom;\r\n\r\n this.customBodyType = ShowerBodyType.Glass;\r\n\r\n this.showerBody = null;\r\n this.showerGlass = null;\r\n this.showerInteriorWall = null;\r\n this.showerInteriorWallAccent = null;\r\n\r\n // old\r\n this.showerFloor = null;\r\n this.showerOverlay = null;\r\n // old\r\n\r\n this.showerPanCombo = null;\r\n this.threshold = null;\r\n this.showerFixture = null;\r\n this.showerBodySelectedByUser = false;\r\n this.showerDoor = null;\r\n this.showerDoorHandle = null;\r\n\r\n this.ponyWallCap = null;\r\n this.ponyWallGlass = null;\r\n\r\n this.shadows = null;\r\n\r\n this.showerBody = new ShowerBody(true);\r\n this.showerBody.getParent = () => this;\r\n this.showerBody.type = Shower.Type.All;\r\n this.showerBody.counts = {\r\n allLayoutFeaturesCount: 0,\r\n largeLayoutFeaturesCount: 0,\r\n smallLayoutFeaturesCount: 0\r\n };\r\n this.relatedItems.push(this.showerBody);\r\n\r\n this.showerFloorIsActive = false;\r\n\r\n }\r\n\r\n load(dbFeature) {\r\n let relatedItemName = \"\",\r\n relatedItemType = \"\",\r\n RelatedItemClass = null;\r\n switch (dbFeature.groupName) {\r\n case \"Shower Pan\":\r\n if (!dbFeature.displayName.includes('Neo Angle')) {\r\n relatedItemName = \"showerPanCombo\";\r\n RelatedItemClass = ShowerPanCombo;\r\n relatedItemType = Shower.Type.Custom;\r\n }\r\n break;\r\n case \"Shower Wall\":\r\n case \"ShowerInteriorWall\": // OLD\r\n relatedItemName = \"showerInteriorWall\";\r\n RelatedItemClass = ShowerInteriorWall;\r\n relatedItemType = Shower.Type.Custom;\r\n break;\r\n case \"Shower Wall Accent\":\r\n relatedItemName = \"showerInteriorWallAccent\";\r\n RelatedItemClass = ShowerInteriorWallAccent;\r\n relatedItemType = Shower.Type.Custom;\r\n break;\r\n case \"Shower Door\":\r\n case \"Shower_Door\":\r\n if (!dbFeature.displayName.includes(\"Neo Angle\")) {\r\n relatedItemName = \"showerDoor\";\r\n RelatedItemClass = ShowerDoor;\r\n relatedItemType = Shower.Type.Custom;\r\n }\r\n break;\r\n case \"Shower Door Handle\":\r\n relatedItemName = \"showerDoorHandle\";\r\n RelatedItemClass = ShowerDoorHandle;\r\n relatedItemType = Shower.Type.Custom;\r\n break;\r\n case \"ShowerPan\":\r\n relatedItemName = \"threshold\";\r\n RelatedItemClass = Threshold;\r\n relatedItemType = Shower.Type.Custom;\r\n break;\r\n case \"ShowerFloor\":\r\n relatedItemName = \"showerFloor\";\r\n RelatedItemClass = ShowerFloor;\r\n relatedItemType = Shower.Type.Custom;\r\n break;\r\n case \"Shower Fixture\":\r\n relatedItemName = \"showerFixture\";\r\n RelatedItemClass = ShowerFixture;\r\n relatedItemType = Shower.Type.All;\r\n break;\r\n case \"Shower Drain\":\r\n relatedItemName = \"showerDrain\";\r\n RelatedItemClass = ShowerDrain;\r\n relatedItemType = Shower.Type.Custom;\r\n break;\r\n case \"Shower Head\":\r\n relatedItemName = \"showerHead\";\r\n RelatedItemClass = ShowerHead;\r\n relatedItemType = Shower.Type.Custom;\r\n break;\r\n case \"Shower Shadow\":\r\n if (\r\n dbFeature.displayName.includes(\"Shower Shadow - Interior Wall\")\r\n || dbFeature.displayName.includes(\"Shower Shadow - Floor\")\r\n || dbFeature.displayName.includes(\"Shower Shadow - Pan\")\r\n || dbFeature.displayName.includes(\"Shower Shadow - Pony Wall Cap\")\r\n ) {\r\n relatedItemName = \"shadows\";\r\n RelatedItemClass = Shadow;\r\n relatedItemType = Shower.Type.All;\r\n }\r\n break;\r\n case \"Pony Wall Cap\":\r\n relatedItemName = \"ponyWallCap\";\r\n RelatedItemClass = PonyWallCap;\r\n relatedItemType = Shower.Type.All;\r\n break;\r\n case \"Pony Wall Glass\":\r\n relatedItemName = \"ponyWallGlass\";\r\n RelatedItemClass = PonyWallGlass;\r\n relatedItemType = Shower.Type.All;\r\n break;\r\n case \"Shower Glass\":\r\n if (!this.showerBody) {\r\n this.showerBody = new ShowerBody(true);\r\n this.relatedItems.push(this.showerBody);\r\n }\r\n relatedItemName = \"showerGlass\";\r\n RelatedItemClass = ShowerGlass;\r\n relatedItemType = Shower.Type.Custom;\r\n break;\r\n // case \"Shower Overlay\":\r\n // relatedItemName = \"showerOverlay\";\r\n // RelatedItemClass = ShowerOverlay;\r\n // relatedItemType = Shower.Type.Custom;\r\n // break;\r\n case \"Shower Body\":\r\n relatedItemName = \"showerBody\";\r\n RelatedItemClass = ShowerBody;\r\n relatedItemType = Shower.Type.Custom;\r\n break;\r\n\r\n }\r\n if (relatedItemName) {\r\n if (!this[relatedItemName]) {\r\n this[relatedItemName] = new RelatedItemClass(true);\r\n if (relatedItemName !== \"shadows\") {\r\n this.relatedItems.push(this[relatedItemName]);\r\n }\r\n }\r\n if (!this.categoryEnabled) {\r\n this.categoryEnabled = true\r\n }\r\n this[relatedItemName].getParent = () => this;\r\n this[relatedItemName].type = relatedItemType;\r\n this[relatedItemName].load(dbFeature);\r\n return true\r\n }\r\n return false\r\n }\r\n\r\n setSpecificRules() {}\r\n\r\n setLayers(layout, placeholdersNeeded) {\r\n let res = [];\r\n const relatedItems = this.getRelatedItems();\r\n // console.log('relatedItems', relatedItems);\r\n relatedItems.forEach(relatedItem => {\r\n relatedItem.setLayers(layout);\r\n });\r\n if (this.showerDoor && !this.showerDoor.activeFeature) { // we need it cause shower door is relying on shPanCombo\r\n this.showerDoor.setLayers(layout);\r\n }\r\n if (this.showerDoorHandle && !this.showerDoorHandle.activeFeature) {\r\n this.showerDoorHandle.setLayers(layout);\r\n }\r\n relatedItems.forEach(relatedItem => {\r\n\r\n (placeholdersNeeded && !relatedItem.placeholderChanged && relatedItem.placeholderFeature)\r\n ? relatedItem.placeholderFeature.layer.addTo(res)\r\n : relatedItem.activeFeature && relatedItem.activeFeature.layer ? relatedItem.activeFeature.layer.addTo(res) : null\r\n\r\n // NN(relatedItem.activeFeature, (activeFeature) => activeFeature.layer.addTo(res));\r\n\r\n if ((relatedItem instanceof ShowerBody || relatedItem instanceof ShowerInteriorWallAccent)\r\n && relatedItem.activeFeatureParts && relatedItem.activeFeatureParts.length) {\r\n relatedItem.activeFeatureParts.forEach((activeFeaturePart) => {\r\n activeFeaturePart && !activeFeaturePart.disabled && activeFeaturePart.layer && activeFeaturePart.layer.addTo(res);\r\n })\r\n }\r\n if (relatedItem instanceof ShowerInteriorWall && relatedItem.activeFeatureParts && relatedItem.placeholderChanged && relatedItem.activeFeatureParts.length) {\r\n relatedItem.activeFeatureParts.forEach((activeFeaturePart) => {\r\n activeFeaturePart && !activeFeaturePart.disabled && activeFeaturePart.layer && activeFeaturePart.layer.addTo(res);\r\n })\r\n }\r\n\r\n if (relatedItem.shadowFeature && relatedItem.shadowFeature.layer) {\r\n relatedItem.shadowFeature.layer.addTo(res)\r\n }\r\n\r\n });\r\n\r\n return res.length ? res : null;\r\n }\r\n\r\n navigationItem() {\r\n return new DesignNavigationItem('Shower', this)\r\n }\r\n\r\n navigationSubItems(filters, searchText) {\r\n const filteredAvailableFeatures = super.getFeaturesBySearchText(super.getFilteredFeaturesByFilters(filters), searchText);\r\n return filteredAvailableFeatures.filter(f => this.activeSubType_ === Shower.Type.Complete ? f.type === ShowerType.Complete : f.type !== ShowerType.Complete)\r\n .map(_ => new DesignNavigationItem(_.featureName, _));\r\n }\r\n\r\n subTypes() {\r\n return this.showerBody && (this.showerBody.features.some(showerBodyFeature => showerBodyFeature.type === 0)\r\n && this.showerBody.features.some(showerBodyFeature => showerBodyFeature.type === 1)) ? [\r\n Shower.Type.Custom,\r\n Shower.Type.Complete,\r\n ] : []\r\n }\r\n\r\n isSubTypeWithItems() {\r\n return true;\r\n }\r\n\r\n activeSubType() {\r\n return this.activeSubType_;\r\n }\r\n\r\n handleSubTypeClick(subType, handleNavigationItemClick) {\r\n this.activeSubType_ = subType;\r\n this.showerBody.setDefault(); // set default custom shower\r\n if (handleNavigationItemClick) {\r\n handleNavigationItemClick(this.showerBody.navigationSubItems()[0]) // set default custom shower\r\n }\r\n }\r\n\r\n getRelatedItems() {\r\n const relatedItems = orderBy(this.relatedItems, 'layerPriority');\r\n if (this.showerTubComboIsActive()) {\r\n return relatedItems\r\n }\r\n return relatedItems.filter((relatedItem) => {\r\n return relatedItem.type === this.activeSubType_ || relatedItem.type === Shower.Type.All\r\n })\r\n }\r\n\r\n subParts() {\r\n const activeShowerGroup = this.getActiveShowerGroup();\r\n const ponyWallIsActive = activeShowerGroup.showerDimensions() === \"Pony\";\r\n return this.getRelatedItems()\r\n .filter(item => {\r\n if (item.isPonyWallPart) {\r\n item.visible = ponyWallIsActive\r\n }\r\n return item.visible\r\n })\r\n .map(_ => new DesignNavigationItem(_.partName, _));\r\n // return filter(this.relatedItems, {visible: true}).map(_ => new DesignNavigationItem(_.partName, _));\r\n }\r\n\r\n //\r\n // toggleShowerParts(disabled, keepLeftWall) {\r\n // this.getRelatedItems().forEach((relItem) => {\r\n // console.log('relItem', relItem);\r\n // if (\r\n // relItem.partId !== \"shower_interior_wall\"\r\n // && relItem.partId !== \"shower_interior_wall_accent\"\r\n // && relItem.partId !== \"shower_fixture\"\r\n // && relItem.partId !== \"shower_door\"\r\n // && relItem.partId !== \"shower_door_handle\"\r\n // && relItem.partId !== \"pony_wall\"\r\n // && relItem.partId !== \"pony_wall_cap\"\r\n // && relItem.partId !== \"pony_wall_glass\"\r\n // ) {\r\n // relItem.disabled = disabled;\r\n // }\r\n // });\r\n // if (!keepLeftWall) {\r\n // this.layout.parts.Walls.wallExL.disabled = disabled;\r\n // }\r\n // }\r\n\r\n setDefault(layout) {\r\n const relatedItems = orderBy(this.relatedItems, 'layerPriority');\r\n relatedItems.forEach(_ => _.setDefault(layout));\r\n }\r\n\r\n setDefaultPartAfterSubTypeClick() {\r\n return this.subParts()[0]\r\n }\r\n\r\n handleSubPartClick() {\r\n\r\n }\r\n\r\n /**\r\n * Gets the current shower size from metaValues.\r\n */\r\n showerSize() {\r\n if (!this.showerBody || !this.showerBody.activeFeature) {\r\n return null;\r\n }\r\n let showerSizeValues = this.showerBody.activeFeature.metaData[\"ShowerSize\"];\r\n if (!showerSizeValues || !showerSizeValues.length) {\r\n if (this.showerBody.activeFeature.partName.includes(\"Complete\")) {\r\n showerSizeValues = ['30in'];\r\n } else {\r\n console.warn('No Shower size.');\r\n }\r\n } else if (showerSizeValues[0] === \"-\") {\r\n showerSizeValues[0] = this.showerBody.activeFeature.partName.includes(\"60in\") ? \"60in\" : \"30in\"\r\n }\r\n\r\n return showerSizeValues[0];\r\n }\r\n\r\n /**\r\n * Gets the current shower dimensions from showerBody\r\n */\r\n showerDimensions() {\r\n if (!this.showerBody)\r\n return \"Full\";\r\n return this.showerBody.activeFeature ? this.showerBody.activeFeature.showerDimensions : null;\r\n // \"Full\" : \"Half\";\r\n }\r\n\r\n isComplete() {\r\n if (!this.showerBody) {\r\n return true;\r\n } else if (this.showerTubComboIsActive()) {\r\n return false;\r\n } else {\r\n return this.showerBody.activeFeature && this.showerBody.activeFeature.showerBodyType !== Shower.Type.Custom;\r\n }\r\n }\r\n\r\n showerTubComboIsActive() {\r\n const comboPart = this.layout.parts[ShowerTubCombo.id];\r\n return comboPart && comboPart.showerTubComboIsActive\r\n }\r\n\r\n getActiveShowerGroup() { // user for taking sizes, etc...\r\n return this.showerTubComboIsActive() ? this.layout.parts[ShowerTubCombo.id] : this;\r\n }\r\n}\r\n\r\n","import {connect} from \"react-redux\";\r\nimport PropTypes from \"prop-types\";\r\nimport {injectIntl} from \"react-intl\";\r\n\r\nimport {getStringFeatureName} from \"../../misc/helpers\";\r\nimport {truncate} from \"../sqft/helpers/sqftHelper\";\r\n\r\nconst FeatureName = (props) => {\r\n const {feature, intl, fabricatorData, maxLength, filterGroups, useCollectionName} = props;\r\n let stringFeatureName = getStringFeatureName(feature, intl.messages, intl.locale, fabricatorData, filterGroups, useCollectionName);\r\n return parseInt(maxLength) === maxLength ? truncate(stringFeatureName, maxLength) : stringFeatureName;\r\n};\r\n\r\nFeatureName.propTypes = {\r\n maxLength: PropTypes.number,\r\n feature: PropTypes.object.isRequired,\r\n useCollectionName: PropTypes.bool,\r\n}\r\n\r\nconst mapStateToProps = (store) => {\r\n const {filterGroups} = store.filterState;\r\n return {\r\n fabricatorData: store.fabricatorState,\r\n filterGroups,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {};\r\n\r\nexport default injectIntl(\r\n connect(mapStateToProps, mapDispatchToProps)(FeatureName)\r\n)\r\n\r\n","import PropTypes from \"prop-types\";\r\nimport {featureInterface} from \"../../interfaces/featureInterface\";\r\n\r\nexport const CART_ITEM_ADDED_BY = {\r\n user: \"user\",\r\n auto: \"auto\",\r\n}\r\n\r\nexport const cartItemInterface = {\r\n id: PropTypes.string, // unique id used on frontend\r\n isEmpty: PropTypes.bool,\r\n isMinimumCharge: PropTypes.bool, // is used for lowes, added when countertops sqft is lower than 23\r\n isMinimumChargeItems: PropTypes.bool, // is used for lowes, between 23 and 27 countertops sqft\r\n selectionGroup: PropTypes.string,\r\n partId: PropTypes.string.isRequired,\r\n currentQuote: PropTypes.number,\r\n cartFeature: PropTypes.shape(featureInterface),\r\n quantity: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), // empty input case\r\n displayFakeQuantity: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), // for slab (countertop group)\r\n sqftId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), // if feature was added from SQFT\r\n unit: PropTypes.string, // was added for SQFT,\r\n qtCatName: PropTypes.string, // was added for SQFT,\r\n relatedProductParent: PropTypes.shape(featureInterface), //\r\n addedBy: PropTypes.oneOf([CART_ITEM_ADDED_BY.auto, CART_ITEM_ADDED_BY.user]), // can be user or auto (if cart list were created by the default(see createCartList function in lookVisualizer.js))\r\n isRemoved: PropTypes.bool,\r\n keepOnLookUpdate: PropTypes.bool, // in case it was added from wizard List - we don't need to remove it on look update cart items logic\r\n shippingName: PropTypes.string,\r\n shippingTime: PropTypes.string,\r\n shippingCost: PropTypes.number,\r\n fromWizardId: PropTypes.number, // wizard item id\r\n fromWizardStep: PropTypes.number, // wizard step (index)\r\n fromWizardGroupId: PropTypes.string, // wizard group\r\n isAddedFromDisplayLogic: PropTypes.bool, // if cart item was added automatically\r\n fromVisualizerType: PropTypes.string,\r\n fromQtCategory: PropTypes.string, // category name (to proper switch)\r\n bundleParentId: PropTypes.string, // parent cart item id (hash)\r\n};\r\n","import {SpacersController} from \"./controllers/SpacersController\";\r\nimport {HandlesController} from \"./controllers/HandlesController\";\r\nimport {WallsController} from \"./controllers/WallsController\";\r\nimport {ShapeColorsController} from \"./controllers/ShapeColorsController\";\r\nimport {WaterfallController} from \"./controllers/line/WaterfallController\";\r\nimport {RemovedFeaturesController} from \"./controllers/RemovedFeaturesController\";\r\nimport {SnappedShapeGroupsController} from \"./controllers/SnappedShapeGroupsController\";\r\nimport {SelectedShapesController} from \"./controllers/SelectedShapesController\";\r\nimport {Images3dController} from \"./controllers/Images3dController\";\r\n\r\nexport const controllersConfig = {\r\n exportableControllers: [\r\n 'snappedShapeGroups',\r\n 'handles'\r\n ],\r\n};\r\n\r\nconst workspaceControllers = {\r\n walls: new WallsController(),\r\n spacer: new SpacersController(),\r\n handles: new HandlesController(),\r\n shapeColors: new ShapeColorsController(),\r\n waterfall: new WaterfallController(),\r\n removedFeatures: new RemovedFeaturesController(),\r\n snappedShapeGroups: new SnappedShapeGroupsController(),\r\n selectedShapes: new SelectedShapesController(),\r\n images3d: new Images3dController(),\r\n};\r\n\r\nexport const getControllersExportData = () => {\r\n const exportData = {};\r\n controllersConfig.exportableControllers.forEach(controllerName => {\r\n const controller = workspaceControllers[controllerName];\r\n if (controller && typeof controller.exportData === 'function') {\r\n exportData[controllerName] = controller.exportData();\r\n }\r\n });\r\n\r\n return exportData;\r\n};\r\n\r\nexport const importControllersData = (data) => {\r\n if (data) {\r\n Object.keys(data).forEach(controllerName => {\r\n const controller = workspaceControllers[controllerName];\r\n if (controller && typeof controller.importData === 'function') {\r\n controller.importData(data[controllerName]);\r\n }\r\n });\r\n }\r\n};\r\n\r\nexport default workspaceControllers\r\n","import JsonApi from \"./jsonApi\";\r\nimport {getBvFeatures, getBvGroupFeatures, getSaveQuoteFastData} from \"./server-api\";\r\nimport {getCurrentLayout, getCurrentRoomType} from \"../bvcomponents/appLayout\";\r\nimport {COUNTERTOP_GROUP, CABINET_GROUP, EDGE_GROUP} from \"../bvcomponents/kvComponent/core/constants\";\r\nimport store from \"../store\";\r\nimport {updateNavigationCount} from \"../actions/lookFunctions\";\r\nimport {COUNTERTOP_GROUP_BATHROOM, LOOK_ROOM_TYPES} from \"../bvcomponents/look/core/constants\";\r\nimport {getCommonVisualizerType, IS_LIXIL_SERVERS} from \"../config\";\r\nimport {getFeatureCost} from \"../misc/helpers\";\r\nimport {showWizardInsteadOfQT} from \"../bvcomponents/look/lookNavigation/lookMain/lookWizard/lookWizardFunctions\";\r\n\r\nexport const LIXIL_USER_QUERY_PARAMS = [\"userid\", \"email\", \"fname\", \"lname\", \"brand\", \"region\"];\r\n\r\nexport const getPassedUserInfo = (searchParams) => {\r\n // {\r\n // userid: {userId from querystring},\r\n // email: {email from querystring},\r\n // fname: {fname from querystring},\r\n // lname: {lname from querystring},\r\n // fabricatorId: {QC Id for Fabricator (same value passed for fabricatorId for the LoginClient API call}\r\n // }\r\n const userData = {\r\n fabricatorId: +document.kvConfig.userId\r\n };\r\n LIXIL_USER_QUERY_PARAMS.forEach(property => {\r\n userData[property] = searchParams.get(property)\r\n ? property === \"userid\" || property === \"lname\"\r\n ? searchParams.get(property).split(\"?userid=\")[0].replace(/ /g, \"+\")\r\n : searchParams.get(property).replace(/ /g, \"+\")\r\n : \"\"\r\n });\r\n console.log(\"request userData\", userData);\r\n return JsonApi.getPassedUserInfo(userData)\r\n .then(response => response.data)\r\n .catch(error => {\r\n console.log(\"Server error getPassedUserInfo \"+new Error(error));\r\n })\r\n};\r\n\r\nexport const postSaveVisualizerImage = (base64Image) => {\r\n // console.log(\"request postSaveVisualizerImage\", base64Image);\r\n return JsonApi.postSaveVisualizerImage(+document.kvConfig.userId, base64Image)\r\n .then(response => response.data)\r\n .catch(error => {\r\n console.log(\"Server error postSaveVisualizerImage \"+new Error(error));\r\n })\r\n};\r\n\r\nexport const postSaveTempData = (tempData, id = \"\", expiresIn = \"\", ) => {\r\n return JsonApi.postSaveTempData(tempData, id, expiresIn)\r\n .then(response => response.data)\r\n .catch(error => {\r\n console.log(\"Server error postSaveTempData \"+new Error(error));\r\n })\r\n};\r\n\r\nexport const getSaveTempData = (id = \"\") => {\r\n return JsonApi.getSaveTempData(id)\r\n .then(response => response.data)\r\n .catch(error => {\r\n debugger;//eslint-disable-line\r\n console.log(\"Server error getSaveTempData \"+new Error(error));\r\n })\r\n};\r\n\r\nexport const getTempIdForPostMessage = async (returnAction = \"\", existingTempId = \"\") => {\r\n const savedFastData = await getSaveQuoteFastData(true);\r\n\r\n savedFastData.records[0].data[\"returnAction\"] = returnAction;\r\n console.log(\"request post temp data before stringify ->\", existingTempId, savedFastData);\r\n const stringifiedSaveData = JSON.stringify(savedFastData);\r\n let receivedTempId = await postSaveTempData(stringifiedSaveData, existingTempId);\r\n if (!receivedTempId) {\r\n receivedTempId = await postSaveTempData(stringifiedSaveData, existingTempId);\r\n }\r\n return receivedTempId\r\n};\r\n\r\nexport const postSureTax = (postData) => {\r\n return JsonApi.postSureTax(postData)\r\n .then(response => response.data)\r\n .catch(error => console.log(\"Server error postSureTax \"+new Error(error)))\r\n};\r\n\r\nexport const postVerifyAddress = (addressObject) => {\r\n return JsonApi.postVerifyAddress( {\r\n \"Address1\": \"\",\r\n \"Address2\": (addressObject.address1 || \"\").split(\",\")[0],\r\n \"City\" : addressObject.city,\r\n \"State\" : addressObject.stateShort || addressObject.state.slice(0, 2),\r\n \"Zip5\" : (addressObject.postal || \"\").split(\"-\")[0] || null,\r\n \"Zip4\" : (addressObject.postal || \"\").split(\"-\")[1] || null\r\n })\r\n .then(response => {\r\n if (response.data.error) {\r\n return {\r\n errorDescription: response.data.error\r\n }\r\n }\r\n return response.data\r\n })\r\n .catch(error => {\r\n if (error && error.response && error.response.data && error.response.data.error) {\r\n return {\r\n errorDescription: error.response.data.error\r\n }\r\n }\r\n return {\r\n errorDescription: error && error.message ? error.message : \"Server error verifyAddress \"+new Error(error)\r\n }\r\n })\r\n};\r\n\r\nexport const getTrumbleShippingOptions = (skuList, zipCode) => {\r\n return JsonApi.getTrumbleShippingOptions(skuList, zipCode)\r\n .then(response => response.data)\r\n .catch(error => console.log(\"Server error postSureTax \"+new Error(error)))\r\n};\r\nexport const postTrumbleShippingOptions = (postData, zipCode) => {\r\n return JsonApi.postTrumbleShippingOptions(postData, zipCode)\r\n .then(response => response.data)\r\n .catch(error => console.log(\"Server error postSureTax \"+new Error(error)))\r\n};\r\nexport const postTrumbleInventory = (skusArray = []) => {\r\n // https://qc-cdn.s3.amazonaws.com/lixil/image+(8).png\r\n return JsonApi.postTrumbleInventory(skusArray)\r\n .then(response => response.data)\r\n .catch(error => console.log(\"Server error postTrumbleInventory \"+new Error(error)))\r\n};\r\n\r\nexport const postShipperHQOptions = async (shippingAddress, cartItems = []) => {\r\n const {stateShort, state, city, postal} = shippingAddress;\r\n const postData = {\r\n destination: {\r\n \"country\": \"US\", // hardcode for now\r\n \"region\": stateShort || state.slice(0, 2),\r\n \"city\": city,\r\n \"zipcode\": postal,\r\n },\r\n items: cartItems.map(cartItem => ({\r\n \"itemId\": cartItem.cartFeature.dbFeature.id,\r\n \"sku\": cartItem.cartFeature.dbFeature.sku,\r\n \"storePrice\": getFeatureCost(cartItem.cartFeature, 1, cartItem.fromQtCategory),\r\n \"quantity\": cartItem.quantity\r\n }))\r\n }\r\n // https://qc-cdn.s3.amazonaws.com/lixil/image+(10).png\r\n return JsonApi.postShipperHqShipping(postData)\r\n .then(response => {\r\n console.log(\"response postShipperHqShipping\", response && response.data ? response.data : response);\r\n let availableOptions = [];\r\n if (!response.data || !Array.isArray(Object.keys(response.data))) {\r\n return availableOptions\r\n }\r\n availableOptions = Object.keys(response.data).map(dbFeatureId => {\r\n if (!Array.isArray(response.data[dbFeatureId]) || !response.data[dbFeatureId].length) {\r\n return {dbFeatureId: +dbFeatureId, options: []}\r\n }\r\n const options = response.data[dbFeatureId].flatMap(carrier => { // can be several\r\n return carrier.shippingRates.map(shippingRate => {\r\n return {\r\n cost: shippingRate.totalCharges,\r\n title: shippingRate.title,\r\n delivery: shippingRate.delivery || \"-\",\r\n code: shippingRate.code\r\n }\r\n })\r\n })\r\n return {dbFeatureId: +dbFeatureId, options}\r\n })\r\n return availableOptions\r\n })\r\n .catch(error => console.log(\"Server error postShipperHQOptions \"+new Error(error)))\r\n};\r\n\r\n/**\r\n * sets feature quantity properties\r\n * @param featuresArray {featureInterface}\r\n * @returns {promise}\r\n */\r\nexport const setTrumbleInventoryForFeatures = (featuresArray = []) => {\r\n const skusArray = featuresArray.map(feature => feature.dbFeature.sku);\r\n return postTrumbleInventory(skusArray)\r\n .then(responseData => {\r\n // console.log(\"postTrumbleInventory responseData\", responseData);\r\n if (responseData && responseData.success && responseData.inventory) {\r\n Object.keys(responseData.inventory).forEach(sku => {\r\n const featureToUpdate = featuresArray.find(feature => feature.dbFeature.sku === sku);\r\n if (featureToUpdate) {\r\n if (!featureToUpdate.quantityOptions) {\r\n featureToUpdate.quantityOptions = {};\r\n }\r\n featureToUpdate.quantityOptions.trumbleQty = responseData.inventory[sku].inventory;\r\n }\r\n })\r\n }\r\n })\r\n};\r\n\r\nconst requestMoreThanUsualPartIds = [\"vanity_faucet\", \"vanity_sink\", \"shower_head\", \"valve_trim\", \"towel\",\r\n \"towel_towel_bar\", \"towel_towel_hook\", \"towel_towel_ring\", \"shower_fixture\", \"shower_door\"];\r\n\r\n/**\r\n * common function to request features\r\n * @param featureGroup {featureGroupInterface}\r\n * @returns {number}\r\n */\r\nconst request6kFeatures = [...CABINET_GROUP, \"top_handle\", \"bottom_handle\", \"sink\", \"center_island_sink\", \"crown_molding\"];\r\nexport const getFeaturesPageSize = (featureGroup) => {\r\n let pageSize = 1000;\r\n if (document.kvConfig.visualizerType === \"kvScene\" && request6kFeatures.includes(featureGroup.partId)) {\r\n pageSize = 6000 // always for new kitchen (we need all parts)\r\n } else if (COUNTERTOP_GROUP.includes(featureGroup.partId)) {\r\n const {navigationState} = store.getState();\r\n if (document.kvConfig.visualizerType !== \"kvScene\" || navigationState.useFeaturesLightRequest.countertops) {\r\n pageSize = 6000 // always for old Kitchen\r\n }\r\n } else if (\r\n (document.kvConfig.visualizerType === \"bvLook\" && requestMoreThanUsualPartIds.includes(featureGroup.partId))\r\n || (document.kvConfig.visualizerType === \"bvScene\" && (featureGroup.partId === \"shower_wall\" || featureGroup.partId === \"shower_interior_wall\"))\r\n ) {\r\n pageSize = 6000\r\n }\r\n if (featureGroup.allFeaturesReceived && pageSize === 6000) {\r\n pageSize = 2000 // next always 2k, it works correctly on scroll\r\n }\r\n return pageSize\r\n}\r\n\r\nexport const getAdditionalFeaturesOnScroll = async (featureGroup, isCommonRequest = false) => {\r\n if (featureGroup.createdManually || featureGroup.requestInProgress) {\r\n if (featureGroup.createdManually) {\r\n featureGroup.allFeaturesReceived = true;\r\n }\r\n return false\r\n }\r\n\r\n featureGroup.requestInProgress = true;\r\n // console.log(\"propsPageSize\", propsPageSize);\r\n const pageSize = getFeaturesPageSize(featureGroup);\r\n const layout = featureGroup.getParent\r\n ? featureGroup.getParent().layout || getCurrentLayout()\r\n : getCurrentLayout();\r\n const layoutAbbr = layout.getCurrentLayoutAbbreviation();\r\n const nextFeaturesPage = featureGroup.getNextPageToLoad(layoutAbbr);\r\n\r\n if (featureGroup.additionalPartPartId) {\r\n const wallParent = layout.parts[\"Walls\"];\r\n const isWallChild = wallParent && wallParent.relatedItems.some(relItem => relItem.partId === featureGroup.partId);\r\n if (isWallChild) {\r\n const cropResponse = await getBvGroupFeatures((featureGroup.dbName || featureGroup.partName) + \" Crop\", nextFeaturesPage, pageSize * 3);\r\n if (Array.isArray(cropResponse)) {\r\n featureGroup.setGroupFeatures(cropResponse, pageSize * 2, false, layoutAbbr, nextFeaturesPage, false, !isCommonRequest);\r\n }\r\n }\r\n }\r\n\r\n const response = await getBvGroupFeatures(featureGroup.dbName || featureGroup.partName, nextFeaturesPage, pageSize);\r\n\r\n let responseArray = Array.isArray(response) ? response : [];\r\n let oldFeatures = [];\r\n if (layout.isNewLayout && featureGroup.nextFeaturesPageToLoadArray && !featureGroup.allFeaturesReceived && !IS_LIXIL_SERVERS\r\n && (CABINET_GROUP.includes(featureGroup.partId) || COUNTERTOP_GROUP.includes(featureGroup.partId)\r\n || COUNTERTOP_GROUP_BATHROOM.includes(featureGroup.partId))) { // we don't need requests for walls\r\n const {wizardList, wizardIsActive} = store.getState().wizardState;\r\n if (!showWizardInsteadOfQT(wizardList, wizardIsActive)) {\r\n const responseWithOldFeatures = await getBvGroupFeatures(featureGroup.dbName || featureGroup.partName, nextFeaturesPage, 6000, [], \"\", \"\", null, true);\r\n if (Array.isArray(responseWithOldFeatures)) {\r\n oldFeatures = responseWithOldFeatures;\r\n }\r\n }\r\n }\r\n\r\n featureGroup.setGroupFeatures(responseArray, pageSize, true, layoutAbbr, nextFeaturesPage, false, !isCommonRequest);\r\n\r\n if (oldFeatures.length) {\r\n featureGroup.setGroupFeatures(oldFeatures, pageSize, false, layoutAbbr, nextFeaturesPage, true, false);\r\n }\r\n featureGroup.requestInProgress = false;\r\n // if (applyCustomConfigurations) { //no need for it right now since we have less than 1000 sinks anf faucets\r\n // const vanityParent = layout.parts[\"Vanity\"];\r\n // const isVanityChild = vanityParent && vanityParent.relatedItems.some(relItem => relItem.partId === featureGroup.partId);\r\n // if (vanityParent) {\r\n // layout.createCustomConfigurations();\r\n // }\r\n // }\r\n return responseArray\r\n};\r\n\r\nconst allRelatedItemsCheck = (parentGroup, neededParts) => {\r\n parentGroup.relatedItems.forEach(relItem => {\r\n if (!relItem.allFeaturesReceived && !neededParts.some(featureGroup => featureGroup.partId === relItem.partId)) {\r\n neededParts.push(relItem)\r\n }\r\n })\r\n return neededParts\r\n}\r\n\r\n/**\r\n * gets all features depending on the featureGroup\r\n * @param featureGroup {featureGroupInterface}\r\n * @param shouldUpdateNavigation {boolean}\r\n */\r\nexport const checkIfLookFeaturesReceived = async (featureGroup, shouldUpdateNavigation = true) => {\r\n const layout = featureGroup.getParent\r\n ? featureGroup.getParent().layout || getCurrentLayout()\r\n : getCurrentLayout();\r\n const layoutAbbr = layout.getCurrentLayoutAbbreviation();\r\n let neededParts = [];\r\n let neededFeatureGroup = null;\r\n if (!featureGroup.allFeaturesReceived\r\n || (featureGroup.nextFeaturesPageToLoadArray && !featureGroup.nextFeaturesPageToLoadArray[layoutAbbr].page)) {\r\n neededParts.push(featureGroup);\r\n }\r\n // const wallParent = layout.parts[\"Walls\"];\r\n const vanityParent = layout.parts[\"Vanity\"];\r\n const cabinetParent = layout.parts[\"Cabinet\"];\r\n\r\n // const isWallChild = wallParent && wallParent.relatedItems.some(relItem => relItem.partId === featureGroup.partId);\r\n const isVanityChild = vanityParent && vanityParent.relatedItems.some(relItem => relItem.partId === featureGroup.partId);\r\n const isCabinetChild = cabinetParent\r\n && (cabinetParent.relatedItems.some(relItem => relItem.partId === featureGroup.partId)\r\n || featureGroup.partId === \"fridge\"\r\n || featureGroup.partId === \"dishwasher\"\r\n || featureGroup.partId === \"center_island_cabinet\"\r\n || featureGroup.partId === \"stovetop\"\r\n || featureGroup.partId === \"range\"\r\n || featureGroup.partId === \"hood\");\r\n const isCountertop = COUNTERTOP_GROUP.some(partId => partId === featureGroup.partId);\r\n const isEdge = EDGE_GROUP.some(partId => partId === featureGroup.partId);\r\n const visType = getCommonVisualizerType();\r\n const isFaucetOrSink = visType === \"kitchen\" && (featureGroup.partId.includes(\"faucet\") || featureGroup.partId.includes(\"sink\"));\r\n const isShowerHeadOrArm = visType === \"bathroom\" && (featureGroup.partId.includes(\"shower_arm\") || featureGroup.partId.includes(\"shower_head\"));\r\n const isDoorOrShowerPan = visType === \"bathroom\" && (featureGroup.partId.includes(\"shower_door\") || featureGroup.partId.includes(\"shower_pan_combo\"));\r\n // if (isWallChild) {\r\n // neededParts = allRelatedItemsCheck(wallParent, neededParts);\r\n // } else if (isVanityChild) {\r\n if (isVanityChild) {\r\n neededParts = allRelatedItemsCheck(vanityParent, neededParts);\r\n if (getCurrentRoomType() === LOOK_ROOM_TYPES.as) {\r\n const wallParent = layout.parts[\"Walls\"];\r\n const appliancesParent = layout.parts[\"Appliances\"];\r\n if (wallParent) {\r\n [\"frontWall\", \"rightWall\", \"leftWall\"].forEach(wallId => {\r\n if (wallParent[wallId] && !wallParent[wallId].allFeaturesReceived) {\r\n neededParts.push(wallParent[wallId]);\r\n }\r\n })\r\n }\r\n if (appliancesParent && appliancesParent.fridgeEnclosure && !appliancesParent.fridgeEnclosure.allFeaturesReceived) {\r\n neededParts.push(appliancesParent.fridgeEnclosure);\r\n }\r\n }\r\n } else if (isCabinetChild) {\r\n neededParts = allRelatedItemsCheck(cabinetParent, neededParts);\r\n if (featureGroup.partId !== \"center_island_cabinet\") {\r\n const centerIslandCabinet = layout.getFeatureGroupByPartId(\"center_island_cabinet\");\r\n if (centerIslandCabinet) {\r\n neededParts.push(centerIslandCabinet);\r\n }\r\n }\r\n } else if (isCountertop) {\r\n const countertop = layout.parts[\"Countertop\"] ? layout.parts[\"Countertop\"].countertop : null;\r\n const backsplash = layout.parts[\"Walls\"] ? layout.parts[\"Walls\"].backsplash : null;\r\n const centerCountertop = layout.parts[\"CenterIsland\"] ? layout.parts[\"CenterIsland\"].countertop : null;\r\n const edgeProfile = layout.parts[\"Countertop\"] ? layout.parts[\"Countertop\"].edgeProfile || layout.parts[\"Countertop\"].edge : null;\r\n [countertop, backsplash, centerCountertop, edgeProfile].forEach(relItem => {\r\n if (relItem && (relItem.partId !== featureGroup.partId) && !relItem.allFeaturesReceived) {\r\n neededParts.push(relItem)\r\n }\r\n });\r\n if (featureGroup.partId === \"center_island_countertop\" && layout.parts[\"CenterIsland\"] && layout.parts[\"CenterIsland\"].sink) {\r\n neededParts.push(layout.parts[\"CenterIsland\"].sink)\r\n }\r\n } else if (isFaucetOrSink) {\r\n const parent = featureGroup.getParent();\r\n switch (featureGroup.partId) {\r\n case \"center_island_faucet\":\r\n case \"faucet\":\r\n neededFeatureGroup = parent.sink;\r\n break;\r\n case \"center_island_sink\":\r\n case \"sink\":\r\n neededFeatureGroup = parent.faucet;\r\n break;\r\n default:\r\n break;\r\n }\r\n if ((featureGroup.partId === \"center_island_sink\") && parent.countertop) {\r\n neededParts.push(parent.countertop)\r\n }\r\n } else if (isDoorOrShowerPan) {\r\n neededFeatureGroup = featureGroup.partId.includes(\"shower_door\")\r\n ? featureGroup.getParent().showerPanCombo\r\n : featureGroup.getParent().showerDoor;\r\n } else if (isShowerHeadOrArm) {\r\n neededFeatureGroup = featureGroup.partId.includes(\"shower_arm\")\r\n ? featureGroup.getParent().showerHead\r\n : featureGroup.getParent().showerArm;\r\n } else if (isEdge) {\r\n neededFeatureGroup = featureGroup.getParent().countertop;\r\n } else if (featureGroup.partId === \"stove\" || featureGroup.partId === \"range\") {\r\n if (featureGroup.getParent().hood) {\r\n neededParts.push(featureGroup.getParent().hood);\r\n }\r\n if (featureGroup.getParent().oven) {\r\n neededParts.push(featureGroup.getParent().oven);\r\n }\r\n if (cabinetParent && cabinetParent.bottomCabinet) {\r\n neededParts.push(cabinetParent.bottomCabinet);\r\n }\r\n if (cabinetParent && cabinetParent.bottomHandle) {\r\n neededParts.push(cabinetParent.bottomHandle);\r\n }\r\n }\r\n if (neededFeatureGroup && !neededFeatureGroup.allFeaturesReceived) {\r\n neededParts.push(neededFeatureGroup)\r\n }\r\n const responses = await Promise.all([\r\n ...neededParts.map(async relatedItem => await getAdditionalFeaturesOnScroll(relatedItem, true)),\r\n ]);\r\n\r\n if (isVanityChild) {\r\n layout.createCustomConfigurations();\r\n }\r\n\r\n if (shouldUpdateNavigation) {\r\n // store.dispatch(updateFeatureGroupCount())\r\n store.dispatch(updateNavigationCount())\r\n }\r\n\r\n return responses\r\n};\r\n\r\nexport const getFeatureFromTheBackendBySku = async (skuFromUrl, featureGroupFromUrl) => {\r\n let featureFound;\r\n const requestFirstSharedFeaturenames = document.kvConfig.visualizerType !== \"bvLook\"; // for bv look skus are first\r\n const response = await getBvFeatures(null, [skuFromUrl], requestFirstSharedFeaturenames);\r\n if (response) {\r\n let featuresLoaded = response.data || [];\r\n const layout = getCurrentLayout();\r\n layout.loadNewFeatures(featuresLoaded);\r\n const featureGroupPartId = featureGroupFromUrl ? featureGroupFromUrl.replace(/-/gi, \"_\") : \"\";\r\n featureFound = layout.getFeatureBySku(skuFromUrl, featureGroupPartId, false, requestFirstSharedFeaturenames);\r\n if (!featuresLoaded.length || !featureFound) {\r\n const response2 = await getBvFeatures(null, [skuFromUrl], !requestFirstSharedFeaturenames);\r\n if (response2 && Array.isArray(response2.data) && response2.data.length) {\r\n layout.loadNewFeatures( response2.data);\r\n featureFound = layout.getFeatureBySku(skuFromUrl, featureGroupPartId, false, !requestFirstSharedFeaturenames);\r\n }\r\n }\r\n }\r\n return featureFound\r\n}\r\n","import * as types from \"./actionTypes\";\r\n\r\nexport const setRelatedGroups = (relatedGroups) => ({\r\n type: types.SET_RELATED_GROUPS,\r\n payload: { relatedGroups }\r\n});\r\n\r\nexport const setRelatedGroupsSearch = (relatedGroupsSearch) => ({\r\n type: types.SET_RELATED_GROUPS_SEARCH,\r\n payload: { relatedGroupsSearch }\r\n});\r\n\r\nexport const toggleGalleryVisible = (galleryVisible, galleryShowActiveFeature = null) => ({\r\n type: types.TOGGLE_GALLERY_VISIBLE,\r\n payload: { galleryVisible, galleryShowActiveFeature }\r\n});\r\n\r\nexport const setGalleryActiveImageIndex = (galleryActiveImageIndex) => ({\r\n type: types.SET_GALLERY_ACTIVE_IMAGE_INDEX,\r\n payload: { galleryActiveImageIndex }\r\n});\r\n\r\nexport const setMaterialsPageSubSteps = (subSteps) => ({\r\n type: types.SET_MATERIALS_PAGE_SUB_STEPS,\r\n payload: { subSteps }\r\n});\r\n\r\nexport const setMaterialsPageActiveSubStep = (activeSubStep) => ({\r\n type: types.SET_MATERIALS_PAGE_ACTIVE_SUB_STEP,\r\n payload: { activeSubStep }\r\n});\r\n\r\nexport const toggleNotCompatibleView = (showNotCompatibleView) => ({\r\n type: types.TOGGLE_NOT_COMPATIBLE_VIEW,\r\n payload: { showNotCompatibleView }\r\n});\r\n\r\nexport const toggleProductNoteEditorVisible = (productNoteEditorVisible) => ({\r\n type: types.TOGGLE_PRODUCT_NOTE_EDITOR_VISIBLE,\r\n payload: { productNoteEditorVisible }\r\n});\r\n\r\nexport const setRowItems = (rowItems) => ({\r\n type: types.SET_ROW_ITEMS,\r\n payload: { rowItems }\r\n});\r\nexport const setMaterialsCanvasClass = (materialsCanvasClass) => ({\r\n type: types.SET_MATERIALS_PAGE_CANVAS_CLASS,\r\n payload: { materialsCanvasClass }\r\n});\r\n","import {Part} from \"./part\";\r\nimport DesignNavigationItem from \"../../../visComponents/designNavigationItem\";\r\nimport {PartMenuType} from \"../../../visComponents/constants\";\r\nimport {vanityThumbnail} from \"../assets\";\r\n\r\nimport CompleteVanity from \"../subparts/vanity/completeVanity\";\r\nimport VanityHandle from \"../subparts/vanity/vanityHandle\";\r\nimport VanityPedestal from \"../subparts/vanity/vanityPedestal\";\r\nimport VanityCountertop from \"../subparts/vanity/vanityCountertop\";\r\nimport LightingFixture from \"../subparts/vanity/lightingFixture\";\r\nimport VanityBacksplash from \"../subparts/vanity/vanityBacksplash\";\r\nimport Mirror from \"../subparts/vanity/mirror\";\r\nimport Sink from \"../subparts/vanity/sink\";\r\nimport VanityFaucet from \"../subparts/vanity/faucet\";\r\n\r\nexport class Vanity extends Part {\r\n static id = 'Vanity';\r\n\r\n static Types = {\r\n Complete: 'Complete',\r\n Custom: 'Custom'\r\n };\r\n\r\n constructor() {\r\n super(true, false, PartMenuType.Complex);\r\n\r\n this.menuType = PartMenuType.Complex;\r\n this.partName = 'Vanity';\r\n this.translateId = \"visualizer.bathroom.vanity\";\r\n this.partThumbnail = vanityThumbnail;\r\n this.activeSubType_ = Vanity.Types.Custom;\r\n this.relatedItems = [];\r\n this.placeholdersNeeded = false; // only Vanity property\r\n\r\n // vanity parts\r\n this.pedestalSink = null;\r\n this.completeVanity = null;\r\n this.countertop = null;\r\n this.sink = null;\r\n this.faucet = null;\r\n this.vanityBacksplash = null;\r\n this.vanityHandle = null;\r\n this.mirror = null;\r\n this.lightingFixture = null;\r\n }\r\n\r\n load(dbFeature) {\r\n let relatedItemName = \"\",\r\n RelatedItemClass = null;\r\n switch (dbFeature.groupName) {\r\n case \"Sink\":\r\n relatedItemName = \"sink\";\r\n RelatedItemClass = Sink;\r\n break;\r\n case \"Mirror\":\r\n relatedItemName = \"mirror\";\r\n RelatedItemClass = Mirror;\r\n break;\r\n case \"Lighting Fixture\":\r\n relatedItemName = \"lightingFixture\";\r\n RelatedItemClass = LightingFixture;\r\n break;\r\n case \"Countertop\":\r\n relatedItemName = \"countertop\";\r\n RelatedItemClass = VanityCountertop;\r\n break;\r\n case \"Faucet\":\r\n relatedItemName = \"faucet\";\r\n RelatedItemClass = VanityFaucet;\r\n break;\r\n case \"VanityBacksplash\":\r\n case \"BackSplash\":\r\n case \"Backsplash\":\r\n relatedItemName = \"vanityBacksplash\";\r\n RelatedItemClass = VanityBacksplash;\r\n break;\r\n case \"Vanity Handle\":\r\n relatedItemName = \"vanityHandle\";\r\n RelatedItemClass = VanityHandle;\r\n break;\r\n case \"Vanity\": {\r\n const completeVanity = dbFeature.metaData && dbFeature.metaData[\"Vanity\"]\r\n && dbFeature.metaData[\"Vanity\"].includes(\"Complete\");\r\n\r\n relatedItemName = completeVanity ? \"completeVanity\" : \"pedestalSink\";\r\n RelatedItemClass = completeVanity ? CompleteVanity : VanityPedestal;\r\n break;\r\n }\r\n }\r\n if (relatedItemName) {\r\n if (!this[relatedItemName]) {\r\n this[relatedItemName] = new RelatedItemClass(true);\r\n if (relatedItemName === \"sink\") {\r\n const faucetIndex = this.relatedItems.findIndex(relItem => relItem.partName === 'Faucet');\r\n faucetIndex ? this.relatedItems.splice(faucetIndex, 0, this.sink) : this.relatedItems.push(this.sink);\r\n } else if (relatedItemName === \"completeVanity\") {\r\n this.relatedItems.unshift(this.completeVanity); // cabinet needs to be first in the list.\r\n } else if (relatedItemName === \"pedestalSink\") {\r\n this.relatedItems.unshift(this.pedestalSink); // cabinet needs to be first in the list.\r\n } else {\r\n this.relatedItems.push(this[relatedItemName]);\r\n }\r\n }\r\n if (!this.categoryEnabled) {\r\n this.categoryEnabled = true\r\n }\r\n this[relatedItemName].getParent = () => this;\r\n this[relatedItemName].load(dbFeature);\r\n return true\r\n }\r\n return false\r\n }\r\n\r\n setLayers(layout, placeholdersNeeded) {\r\n let res = [];\r\n this.placeholdersNeeded = true;\r\n this.getRelatedItems().forEach(relatedItem => {\r\n relatedItem.setLayers(layout);\r\n (placeholdersNeeded && !relatedItem.placeholderChanged && relatedItem.placeholderFeature)\r\n ? relatedItem.placeholderFeature.layer.addTo(res)\r\n : relatedItem.activeFeature && relatedItem.activeFeature.layer && relatedItem.activeFeature.layer.src\r\n ? relatedItem.activeFeature.layer.addTo(res)\r\n : relatedItem.placeholderFeature && relatedItem.placeholderFeature.layer && relatedItem.placeholderFeature.layer.src\r\n ? relatedItem.placeholderFeature.layer.addTo(res)\r\n : null;\r\n });\r\n return res.length ? res : null;\r\n }\r\n\r\n getRelatedItems() {\r\n return this.relatedItems.filter(item => item.visible.includes(this.activeSubType_));\r\n }\r\n\r\n navigationItem() {\r\n return new DesignNavigationItem('Vanity', this);\r\n }\r\n\r\n subTypes() {\r\n return this.pedestalSink && this.completeVanity ? [Vanity.Types.Custom, Vanity.Types.Complete] : [];\r\n }\r\n\r\n isSubTypeWithItems() {\r\n return this.activeSubType_ === Vanity.Types.Complete;\r\n }\r\n\r\n activeSubType() {\r\n return this.activeSubType_;\r\n }\r\n\r\n subParts() {\r\n const relatedItems = this.getRelatedItems();\r\n const excluded = [];\r\n const vanityPart = relatedItems.find(navItem => navItem.partId === \"vanity_cabinet\");\r\n if (vanityPart && vanityPart.activeFeature\r\n && vanityPart.activeFeature.metaData[\"VanityHandle\"]\r\n && vanityPart.activeFeature.metaData[\"VanityHandle\"].includes(\"None\")) {\r\n excluded.push(\"vanity_handle\")\r\n }\r\n return relatedItems\r\n .filter(item => !excluded.includes(item.partId))\r\n .map(_ => new DesignNavigationItem(_.partName, _));\r\n }\r\n\r\n // subPartsWithAccentWall() {\r\n // const vanityAccent = this.layout.parts.Walls.vanityAccent;\r\n // return [new DesignNavigationItem(vanityAccent.partName, vanityAccent),\r\n // ...this.getRelatedItems().map(_ => new DesignNavigationItem(_.partName, _))];\r\n // }\r\n\r\n handleSubTypeClick(subType) {\r\n this.activeSubType_ = subType;\r\n this.getRelatedItems().forEach((relatedItem) => {\r\n if (!relatedItem.activeFeature) {\r\n relatedItem.setDefault()\r\n }\r\n });\r\n }\r\n\r\n setDefaultPartAfterSubTypeClick() {\r\n return this.subParts()[0]\r\n }\r\n\r\n setDefault(layout) {\r\n this.getRelatedItems().forEach(_ => _.setDefault(layout));\r\n }\r\n\r\n counterTopSize() {\r\n return this.getCounterTopSize() || '24in'; // temporary hardcode until we would have meta data finished\r\n }\r\n\r\n getCounterTopSize() {\r\n\r\n if (this.activeSubType_ === Vanity.Types.Custom && this.pedestalSink && !this.pedestalSink.placeholderChanged\r\n && this.pedestalSink.placeholderFeature && +this.pedestalSink.placeholderFeature.vanitySize === 72) {\r\n return '72in' // placeholder hardcode\r\n }\r\n\r\n if (this.activeSubType_ === Vanity.Types.Complete) {\r\n if (!this.completeVanity.activeFeature) {\r\n this.completeVanity.setDefault()\r\n }\r\n return this.completeVanity.activeFeature.vanitySize + \"in\"\r\n } else {\r\n if (this.pedestalSink && !this.pedestalSink.activeFeature) {\r\n this.pedestalSink.setDefault()\r\n }\r\n return (this.pedestalSink && this.pedestalSink.activeFeature)\r\n ? this.pedestalSink.activeFeature.vanitySize + \"in\"\r\n : null;\r\n }\r\n }\r\n\r\n toggleVanityParts(disabled) {\r\n this.getRelatedItems().forEach(relItem => {\r\n if (relItem.partId === \"vanity_sink\" || relItem.partId === \"vanity_faucet\"\r\n || relItem.partId === \"vanity_countertop\" || relItem.partId === \"vanity_cabinet\"\r\n || relItem.partId === \"vanity_handle\") {\r\n relItem.disabled = disabled;\r\n }\r\n });\r\n }\r\n}\r\n\r\n","import orderBy from \"lodash/orderBy\";\r\n\r\nimport {Part} from \"../part\";\r\nimport DesignNavigationItem from \"../../../visComponents/designNavigationItem\";\r\nimport {PartMenuType} from \"../../../visComponents/constants\";\r\nimport {showerThumbnail} from '../../../bvComponent/core/assets';\r\n\r\n// import store from \"../../../../store\";\r\n\r\nimport {ShowerTubCombo} from \"./showerTubCombo\";\r\n\r\nimport ShowerFixture from \"../subparts/shower/showerFixture\";\r\nimport ShowerGlass from \"../subparts/shower/showerGlass\";\r\n// import ShowerOverlay from \"../subparts/shower/showerOverlay\";\r\nimport ShowerBody from \"../subparts/shower/showerBody\";\r\nimport ShowerWall from \"../subparts/shower/showerWall\";\r\nimport ShowerWallAccent from \"../subparts/shower/showerWallAccent\";\r\nimport ShowerDoor from \"../subparts/shower/showerDoor\";\r\nimport ShowerPanCombo from \"../subparts/shower/showerPanCombo\";\r\nimport ShowerDoorHandle from \"../subparts/shower/showerDoorHandle\";\r\nimport PonyWallCap from \"../subparts/shower/ponyWallCap\";\r\nimport PonyWallGlass from \"../subparts/shower/ponyWallGlass\";\r\nimport ShowerFloor from \"../subparts/shower/showerFloor\";\r\nimport Threshold from \"../subparts/shower/threshold\";\r\nimport ShowerDrain from \"../subparts/shower/showerDrain\";\r\nimport ShowerHead from \"../subparts/shower/showerHead\";\r\n\r\nexport class Shower extends Part {\r\n static id = 'Shower';\r\n\r\n static Type = {\r\n Custom: 'Custom',\r\n Complete: 'Complete',\r\n Combo: 'Combo',\r\n All: 'All'\r\n };\r\n\r\n constructor() {\r\n super(true, false, PartMenuType.Complex);\r\n\r\n this.menuType = PartMenuType.Complex;\r\n this.partThumbnail = showerThumbnail;\r\n this.partName = 'Shower';\r\n this.translateId = \"visualizer.bathroom.shower\";\r\n this.relatedItems = [];\r\n this.activeSubType_ = Shower.Type.Custom;\r\n\r\n this.customBodyType = 1; // Door\r\n\r\n this.showerBody = null;\r\n this.showerGlass = null;\r\n this.showerWall = null;\r\n this.showerWallAccent = null;\r\n\r\n // old\r\n this.showerFloor = null;\r\n this.showerOverlay = null;\r\n // old\r\n\r\n this.showerPanCombo = null;\r\n this.threshold = null;\r\n this.showerFixture = null;\r\n this.showerBodySelectedByUser = false;\r\n this.showerDoor = null;\r\n this.showerDoorHandle = null;\r\n\r\n this.ponyWallCap = null;\r\n this.ponyWallGlass = null;\r\n\r\n this.showerBody = new ShowerBody(true);\r\n this.showerBody.getParent = () => this;\r\n this.showerBody.type = Shower.Type.All;\r\n this.showerBody.counts = {\r\n allLayoutFeaturesCount: 0,\r\n largeLayoutFeaturesCount: 0,\r\n smallLayoutFeaturesCount: 0\r\n };\r\n this.relatedItems.push(this.showerBody);\r\n\r\n this.showerFloorIsActive = false;\r\n\r\n }\r\n\r\n load(dbFeature) {\r\n let relatedItemName = \"\",\r\n relatedItemType = \"\",\r\n RelatedItemClass = null;\r\n switch (dbFeature.groupName) {\r\n case \"Shower Pan\":\r\n case \"Shower Pans\":\r\n relatedItemName = \"showerPanCombo\";\r\n RelatedItemClass = ShowerPanCombo;\r\n relatedItemType = Shower.Type.Custom;\r\n break;\r\n case \"Shower Wall\":\r\n case \"Shower Walls\":\r\n case \"ShowerInteriorWall\": // OLD\r\n relatedItemName = \"showerInteriorWall\";\r\n RelatedItemClass = ShowerWall;\r\n relatedItemType = Shower.Type.Custom;\r\n break;\r\n case \"Shower Wall Accent\":\r\n relatedItemName = \"showerWallAccent\";\r\n RelatedItemClass = ShowerWallAccent;\r\n relatedItemType = Shower.Type.Custom;\r\n break;\r\n case \"Shower Door\":\r\n case \"Shower_Door\":\r\n if (!dbFeature.displayName.includes(\"Neo Angle\")) {\r\n relatedItemName = \"showerDoor\";\r\n RelatedItemClass = ShowerDoor;\r\n relatedItemType = Shower.Type.Custom;\r\n }\r\n break;\r\n case \"Shower Door Handle\":\r\n relatedItemName = \"showerDoorHandle\";\r\n RelatedItemClass = ShowerDoorHandle;\r\n relatedItemType = Shower.Type.Custom;\r\n break;\r\n case \"ShowerPan\":\r\n relatedItemName = \"threshold\";\r\n RelatedItemClass = Threshold;\r\n relatedItemType = Shower.Type.Custom;\r\n break;\r\n case \"ShowerFloor\":\r\n relatedItemName = \"showerFloor\";\r\n RelatedItemClass = ShowerFloor;\r\n relatedItemType = Shower.Type.Custom;\r\n break;\r\n case \"Shower Fixture\":\r\n relatedItemName = \"showerFixture\";\r\n RelatedItemClass = ShowerFixture;\r\n relatedItemType = Shower.Type.All;\r\n break;\r\n case \"Shower Drain\":\r\n relatedItemName = \"showerDrain\";\r\n RelatedItemClass = ShowerDrain;\r\n relatedItemType = Shower.Type.Custom;\r\n break;\r\n case \"Shower Head\":\r\n relatedItemName = \"showerHead\";\r\n RelatedItemClass = ShowerHead;\r\n relatedItemType = Shower.Type.Custom;\r\n break;\r\n case \"Pony Wall Cap\":\r\n relatedItemName = \"ponyWallCap\";\r\n RelatedItemClass = PonyWallCap;\r\n relatedItemType = Shower.Type.All;\r\n break;\r\n case \"Pony Wall Glass\":\r\n relatedItemName = \"ponyWallGlass\";\r\n RelatedItemClass = PonyWallGlass;\r\n relatedItemType = Shower.Type.All;\r\n break;\r\n case \"Shower Glass\":\r\n if (!this.showerBody) {\r\n this.showerBody = new ShowerBody(true);\r\n this.relatedItems.push(this.showerBody);\r\n }\r\n relatedItemName = \"showerGlass\";\r\n RelatedItemClass = ShowerGlass;\r\n relatedItemType = Shower.Type.Custom;\r\n break;\r\n // case \"Shower Overlay\":\r\n // relatedItemName = \"showerOverlay\";\r\n // RelatedItemClass = ShowerOverlay;\r\n // relatedItemType = Shower.Type.Custom;\r\n // break;\r\n case \"Shower Body\":\r\n relatedItemName = \"showerBody\";\r\n RelatedItemClass = ShowerBody;\r\n relatedItemType = Shower.Type.Custom;\r\n break;\r\n\r\n }\r\n if (relatedItemName) {\r\n if (!this[relatedItemName]) {\r\n this[relatedItemName] = new RelatedItemClass(true);\r\n if (relatedItemName !== \"shadows\") {\r\n this.relatedItems.push(this[relatedItemName]);\r\n }\r\n }\r\n if (!this.categoryEnabled) {\r\n this.categoryEnabled = true\r\n }\r\n this[relatedItemName].getParent = () => this;\r\n this[relatedItemName].type = relatedItemType;\r\n this[relatedItemName].load(dbFeature);\r\n return true\r\n }\r\n return false\r\n }\r\n\r\n setSpecificRules() {}\r\n\r\n // setLayers(layout, placeholdersNeeded) {\r\n // let res = [];\r\n // const relatedItems = this.getRelatedItems();\r\n // // console.log('relatedItems', relatedItems);\r\n // relatedItems.forEach(relatedItem => {\r\n // relatedItem.setLayers(layout);\r\n // });\r\n // if (this.showerDoor && !this.showerDoor.activeFeature) { // we need it cause shower door is relying on shPanCombo\r\n // this.showerDoor.setLayers(layout);\r\n // }\r\n // if (this.showerDoorHandle && !this.showerDoorHandle.activeFeature) {\r\n // this.showerDoorHandle.setLayers(layout);\r\n // }\r\n // relatedItems.forEach(relatedItem => {\r\n //\r\n // (placeholdersNeeded && !relatedItem.placeholderChanged && relatedItem.placeholderFeature)\r\n // ? relatedItem.placeholderFeature.layer.addTo(res)\r\n // : relatedItem.activeFeature && relatedItem.activeFeature.layer ? relatedItem.activeFeature.layer.addTo(res) : null\r\n //\r\n // // NN(relatedItem.activeFeature, (activeFeature) => activeFeature.layer.addTo(res));\r\n //\r\n // if ((relatedItem instanceof ShowerBody || relatedItem instanceof ShowerInteriorWallAccent)\r\n // && relatedItem.activeFeatureParts && relatedItem.activeFeatureParts.length) {\r\n // relatedItem.activeFeatureParts.forEach((activeFeaturePart) => {\r\n // activeFeaturePart && !activeFeaturePart.disabled && activeFeaturePart.layer && activeFeaturePart.layer.addTo(res);\r\n // })\r\n // }\r\n // if (relatedItem instanceof ShowerWall && relatedItem.activeFeatureParts && relatedItem.placeholderChanged && relatedItem.activeFeatureParts.length) {\r\n // relatedItem.activeFeatureParts.forEach((activeFeaturePart) => {\r\n // activeFeaturePart && !activeFeaturePart.disabled && activeFeaturePart.layer && activeFeaturePart.layer.addTo(res);\r\n // })\r\n // }\r\n //\r\n // });\r\n //\r\n // return res.length ? res : null;\r\n // }\r\n\r\n subTypes() {\r\n return this.showerBody && (this.showerBody.features.some(showerBodyFeature => showerBodyFeature.type === 0)\r\n && this.showerBody.features.some(showerBodyFeature => showerBodyFeature.type === 1)) ? [\r\n Shower.Type.Custom,\r\n Shower.Type.Complete,\r\n ] : []\r\n }\r\n\r\n isSubTypeWithItems() {\r\n return true;\r\n }\r\n\r\n activeSubType() {\r\n return this.activeSubType_;\r\n }\r\n\r\n handleSubTypeClick(subType, handleNavigationItemClick) {\r\n this.activeSubType_ = subType;\r\n this.showerBody.setDefault(); // set default custom shower\r\n if (handleNavigationItemClick) {\r\n handleNavigationItemClick(this.showerBody.navigationSubItems()[0]) // set default custom shower\r\n }\r\n }\r\n\r\n getRelatedItems() {\r\n const relatedItems = orderBy(this.relatedItems, 'layerPriority');\r\n if (this.showerTubComboIsActive()) {\r\n return relatedItems\r\n }\r\n return relatedItems.filter((relatedItem) => {\r\n return relatedItem.type === this.activeSubType_ || relatedItem.type === Shower.Type.All\r\n })\r\n }\r\n\r\n subParts() {\r\n const activeShowerGroup = this.getActiveShowerGroup();\r\n const ponyWallIsActive = activeShowerGroup.showerDimensions() === \"Pony\";\r\n return this.getRelatedItems()\r\n .filter(item => {\r\n if (item.isPonyWallPart) {\r\n item.visible = ponyWallIsActive\r\n }\r\n return item.visible\r\n })\r\n .map(_ => new DesignNavigationItem(_.partName, _));\r\n // return filter(this.relatedItems, {visible: true}).map(_ => new DesignNavigationItem(_.partName, _));\r\n }\r\n\r\n //\r\n // toggleShowerParts(disabled, keepLeftWall) {\r\n // this.getRelatedItems().forEach((relItem) => {\r\n // console.log('relItem', relItem);\r\n // if (\r\n // relItem.partId !== \"shower_interior_wall\"\r\n // && relItem.partId !== \"shower_wall_accent\"\r\n // && relItem.partId !== \"shower_fixture\"\r\n // && relItem.partId !== \"shower_door\"\r\n // && relItem.partId !== \"shower_door_handle\"\r\n // && relItem.partId !== \"pony_wall\"\r\n // && relItem.partId !== \"pony_wall_cap\"\r\n // && relItem.partId !== \"pony_wall_glass\"\r\n // ) {\r\n // relItem.disabled = disabled;\r\n // }\r\n // });\r\n // if (!keepLeftWall) {\r\n // this.layout.parts.Walls.wallExL.disabled = disabled;\r\n // }\r\n // }\r\n\r\n setDefault(layout) {\r\n const relatedItems = orderBy(this.relatedItems, 'layerPriority');\r\n relatedItems.forEach(_ => _.setDefault(layout));\r\n }\r\n\r\n setDefaultPartAfterSubTypeClick() {\r\n return this.subParts()[0]\r\n }\r\n\r\n handleSubPartClick() {\r\n\r\n }\r\n\r\n /**\r\n * Gets the current shower size from metaValues.\r\n */\r\n showerSize() {\r\n if (this.showerTubComboIsActive()) {\r\n const showerTubCombo = this.getActiveShowerGroup();\r\n if (showerTubCombo) {\r\n const activeRelItem = showerTubCombo.relatedItems.find(featureGroup => featureGroup.partId === showerTubCombo.bottomTub)\r\n || showerTubCombo.replacementTub;\r\n if (activeRelItem && activeRelItem.activeFeature && activeRelItem.activeFeature.metaData[\"ShowerSize\"]) {\r\n return activeRelItem.activeFeature.metaData[\"ShowerSize\"][0]\r\n }\r\n }\r\n return null\r\n }\r\n if (!this.showerBody || !this.showerBody.activeFeature) {\r\n return null;\r\n }\r\n let showerSizeValues = this.showerBody.activeFeature.metaData[\"ShowerSize\"];\r\n if (!showerSizeValues || !showerSizeValues.length) {\r\n if (this.showerBody.activeFeature.partName.includes(\"Complete\")) {\r\n showerSizeValues = ['30'];\r\n } else {\r\n console.warn('No Shower size.');\r\n }\r\n } else if (showerSizeValues[0] === \"-\") {\r\n showerSizeValues[0] = this.showerBody.activeFeature.partName.includes(\"60in\") ? \"60\" : \"30\"\r\n }\r\n\r\n return showerSizeValues[0];\r\n }\r\n\r\n /**\r\n * Gets the current shower dimensions from showerBody\r\n */\r\n showerDimensions() {\r\n if (!this.showerBody)\r\n return \"Full\";\r\n return this.showerBody.activeFeature ? this.showerBody.activeFeature.showerDimensions : null;\r\n // \"Full\" : \"Half\";\r\n }\r\n\r\n isComplete() {\r\n if (!this.showerBody) {\r\n return true;\r\n } else if (this.showerTubComboIsActive()) {\r\n return false;\r\n } else {\r\n return this.showerBody.activeFeature\r\n }\r\n }\r\n\r\n showerTubComboIsActive() {\r\n const comboPart = this.layout.parts[ShowerTubCombo.id];\r\n return comboPart && comboPart.showerTubComboIsActive\r\n }\r\n\r\n getActiveShowerGroup() { // user for taking sizes, etc...\r\n return this.showerTubComboIsActive() ? this.layout.parts[ShowerTubCombo.id] : this;\r\n }\r\n}\r\n\r\n","const COLOR_THEMES = {\r\n \"qc\": {\r\n primary: \"#4A90E2\",\r\n primary_hover: \"#3483de\", // darken(primary, 5%),\r\n primary_transparent8: \"rgba(74,144,226,0.8)\",\r\n primary_transparent: \"rgba(74,144,226,0.5)\", // fade_out(primary, 0.5),\r\n active: \"#9FC522\",\r\n active_hover: \"#8daf1e\", //darken(#9FC522, 5%),\r\n active_disabled: \"rgba(141,175,30,0.5)\", //#dfecb5\",\r\n active_transparent: \"rgba(159,197,34,0.5)\", // fade_out(#9FC522, 0.5),\r\n assetsPath: \"../images\",\r\n },\r\n \"caes\": {\r\n primary: \"#58595b\",\r\n primary_hover: \"#4b4c4e\", //darken(#58595b, 5%),\r\n primary_transparent8: \"rgba(74,144,226,0.8)\",\r\n primary_transparent: \"rgba(88,89,91,0.5)\", // fade_out(primary, 0.5),\r\n active: \"#f46c42\",\r\n active_hover: \"#f3592a\", //darken(#f46c42, 5%),\r\n active_disabled: \"rgba(243,89,42, 0.5)\",\r\n active_transparent: \"rgba(244,108,66,0.5)\", //fade_out(#9FC522, 0.5),\r\n assetsPath: \"../images-caes\",\r\n }\r\n};\r\n\r\nexport const COLOR = {\r\n black: '#000000',\r\n blackLight: '#4a4a4a',\r\n white: '#ffffff',\r\n blue: '#ffffff',\r\n red: '#f11515',\r\n red_transparent: \"rgba(241, 21, 21 , 0.5)\",\r\n}\r\n\r\nexport default COLOR_THEMES\r\n","import store from \"../../../../../store\";\r\nimport {updateSQFTCalculations} from \"../../../../../actions/sqftFunctions\";\r\nconst SqftStore = {\r\n viewGL: null,\r\n ctxCenter: {\r\n x: 0,\r\n y: 0,\r\n },\r\n canvas: {\r\n width: 0,\r\n height: 0\r\n },\r\n radius: {\r\n arcLength: 0,\r\n angle: 0,\r\n clickedEdgeButton: null,\r\n featureId: null,\r\n },\r\n edgeFeatureGroup: null,\r\n edgeFeatures: [],\r\n isSlabMode: () => {\r\n const reduxState = store.getState();\r\n return reduxState.sqftSlabState.isShowSlabTool;\r\n },\r\n isRegularMode: () => {\r\n const reduxState = store.getState();\r\n return !reduxState.sqftSlabState.isShowSlabTool;\r\n },\r\n updateCalculations: () => {\r\n const state = store.getState();\r\n const updateCalculations = state.sqftState.updateCalculations;\r\n store.dispatch(updateSQFTCalculations(updateCalculations + 1));\r\n },\r\n getShapeType: () => {\r\n //todo\r\n },\r\n seamHistory: [],\r\n setSeamHistory: function(seamHistory) {\r\n this.seamHistory = seamHistory\r\n },\r\n addSeamHistory: function(shapeId) {\r\n this.seamHistory.push(shapeId)\r\n },\r\n getSeamHistory: function() {\r\n return this.seamHistory;\r\n }\r\n};\r\n\r\nexport default SqftStore\r\n","//********* TUTORIALS *********//\r\nimport * as types from \"./actionTypes\";\r\n\r\nexport const showMaterialsTutorial = (materialsTutorialIsOpened) => ({\r\n type: types.SHOW_MATERIALS_TUTORIAL,\r\n payload: {materialsTutorialIsOpened}\r\n});\r\n\r\nexport const setMaterialsTutorialStep = (materialsTutorialStep) => ({\r\n type: types.SET_MATERIALS_TUTORIAL_STEP,\r\n payload: {materialsTutorialStep}\r\n});\r\n\r\nexport const setMaterialsTutorialFinished = (materialsTutorialFinished) => ({\r\n type: types.SET_MATERIALS_TUTORIAL_FINISHED,\r\n payload: {materialsTutorialFinished}\r\n});\r\n\r\nexport const showMaterialsAgentTutorial = (materialsAgentTutorialIsOpened) => ({\r\n type: types.SHOW_MATERIALS_AGENT_TUTORIAL,\r\n payload: {materialsAgentTutorialIsOpened}\r\n});\r\n\r\nexport const setMaterialsAgentTutorialFinished = (materialsAgentTutorialFinished) => ({\r\n type: types.SET_MATERIALS_AGENT_TUTORIAL_FINISHED,\r\n payload: {materialsAgentTutorialFinished}\r\n});\r\n\r\nexport const showVisualizerTutorial = (visualizerTutorialIsOpened) => ({\r\n type: types.SHOW_VISUALIZER_TUTORIAL,\r\n payload: {visualizerTutorialIsOpened}\r\n});\r\n\r\nexport const setVisualizerTutorialStep = (visualizerTutorialStep) => ({\r\n type: types.SET_VISUALIZER_TUTORIAL_STEP,\r\n payload: {visualizerTutorialStep}\r\n});\r\n\r\nexport const setVisualizerTutorialFinished = (visualizerTutorialFinished) => ({\r\n type: types.SET_VISUALIZER_TUTORIAL_FINISHED,\r\n payload: {visualizerTutorialFinished}\r\n});\r\n","//todo move out of this folder\r\nimport COLOR_THEMES from \"../../../../../colorThemes\";\r\nimport {getParallelPoints, getPointOnTheLine} from \"../../../helpers/sqftHelper\";\r\nimport sqftConfig from \"../store/sqftConfig\";\r\nimport sqftEventManager from \"../store/sqftEventManager\";\r\nimport {getMidPoint, getPointBetweenPoints, getPointDistance} from \"../../../helpers/sqftHelper\";\r\nimport workspace from \"../core/workspace\";\r\n\r\nexport default class RenderFigures {\r\n\r\n /**\r\n * Draws a rounded rectangle using the current state of the canvas.\r\n * If you omit the last three params, it will draw a rectangle\r\n * outline with a 5 pixel border radius\r\n * @param {CanvasRenderingContext2D} ctx\r\n * @param {Number} x The top left x coordinate\r\n * @param {Number} y The top left y coordinate\r\n * @param {Number} width The width of the rectangle\r\n * @param {Number} height The height of the rectangle\r\n * @param {Number} [radius = 5] The corner radius; It can also be an object\r\n * to specify different radii for corners\r\n * @param {Number} [radius.tl = 0] Top left\r\n * @param {Number} [radius.tr = 0] Top right\r\n * @param {Number} [radius.br = 0] Bottom right\r\n * @param {Number} [radius.bl = 0] Bottom left\r\n * @param {Boolean} [isFilled = false] Whether to fill the rectangle.\r\n * @param {Boolean} [stroke = true] Whether to stroke the rectangle.\r\n */\r\n static roundedRect(ctx, x, y, width, height, radius, isFilled, stroke) {\r\n if (typeof stroke === 'undefined') {\r\n stroke = true;\r\n }\r\n if (typeof radius === 'undefined') {\r\n radius = 5;\r\n }\r\n if (typeof radius === 'number') {\r\n radius = {tl: radius, tr: radius, br: radius, bl: radius};\r\n } else {\r\n let defaultRadius = {tl: 0, tr: 0, br: 0, bl: 0};\r\n for (let side in defaultRadius) {\r\n radius[side] = radius[side] || defaultRadius[side];\r\n }\r\n }\r\n ctx.beginPath();\r\n ctx.moveTo(x + radius.tl, y);\r\n ctx.lineTo(x + width - radius.tr, y);\r\n ctx.quadraticCurveTo(x + width, y, x + width, y + radius.tr);\r\n ctx.lineTo(x + width, y + height - radius.br);\r\n ctx.quadraticCurveTo(x + width, y + height, x + width - radius.br, y + height);\r\n ctx.lineTo(x + radius.bl, y + height);\r\n ctx.quadraticCurveTo(x, y + height, x, y + height - radius.bl);\r\n ctx.lineTo(x, y + radius.tl);\r\n ctx.quadraticCurveTo(x, y, x + radius.tl, y);\r\n ctx.closePath();\r\n if (isFilled) {\r\n ctx.fill();\r\n }\r\n if (stroke) {\r\n ctx.stroke();\r\n }\r\n }\r\n\r\n static renderOval(ctx, w, h, x, y = 0, fullOval = false) {\r\n let lx = x - w * .5;\r\n let rx = x + w * .5;\r\n let ty = y - h * .5;\r\n let by = y + h * .5;\r\n\r\n let magic = 0.551915024494;\r\n let xMagic = magic * w * 0.5;\r\n let yMagic = h * magic * 0.5;\r\n\r\n ctx.moveTo(x, ty);\r\n ctx.bezierCurveTo(x + xMagic, ty, rx, y - yMagic, rx, y);\r\n ctx.bezierCurveTo(rx, y + yMagic, x + xMagic, by, x, by);\r\n if (fullOval) {\r\n ctx.bezierCurveTo(y - xMagic, by, lx, y + yMagic, lx, y);\r\n ctx.bezierCurveTo(lx, x - yMagic, x - xMagic, ty, x, ty);\r\n }\r\n }\r\n\r\n static drawArrow = (context, fromX, fromY, toX, toY) => {\r\n let headLen = 10, // length of head in pixels\r\n dx = toX - fromX,\r\n dy = toY - fromY,\r\n angle = Math.atan2(dy, dx);\r\n\r\n context.moveTo(fromX, fromY);\r\n context.lineTo(toX, toY);\r\n context.lineTo(toX - headLen * Math.cos(angle - Math.PI / 6), toY - headLen * Math.sin(angle - Math.PI / 6));\r\n context.moveTo(toX, toY);\r\n context.lineTo(toX - headLen * Math.cos(angle + Math.PI / 6), toY - headLen * Math.sin(angle + Math.PI / 6));\r\n\r\n context.moveTo(fromX, fromY);\r\n context.lineTo(fromX + headLen * Math.cos(angle - Math.PI / 6), fromY + headLen * Math.sin(angle - Math.PI / 6));\r\n context.moveTo(fromX, fromY);\r\n context.lineTo(fromX + headLen * Math.cos(angle + Math.PI / 6), fromY + headLen * Math.sin(angle + Math.PI / 6));\r\n };\r\n\r\n static drawRotatedArrow = (context, fromX, fromY, toX, toY, cornerPointX, cornerPointY, rotateAngle) => {\r\n const midpoint = getMidPoint({x: fromX, y: fromY}, {x: toX, y: toY});\r\n const rotateDirectionPoint = getPointBetweenPoints(midpoint, {x: cornerPointX, y: cornerPointY}, rotateAngle);\r\n let headLen = 7, // length of head in pixels\r\n dx = toX - rotateDirectionPoint.x,\r\n dy = toY - rotateDirectionPoint.y,\r\n angle = Math.atan2(dy, dx);\r\n const radius = getPointDistance({x: fromX, y: fromY}, {x: cornerPointX, y: cornerPointY});\r\n context.moveTo(fromX, fromY);\r\n context.arcTo(\r\n cornerPointX,\r\n cornerPointY,\r\n toX,\r\n toY,\r\n radius\r\n );\r\n\r\n //First arrow\r\n context.moveTo(toX, toY);\r\n context.lineTo(toX - headLen * Math.cos(angle - Math.PI / 6), toY - headLen * Math.sin(angle - Math.PI / 6));\r\n context.moveTo(toX, toY);\r\n context.lineTo(toX - headLen * Math.cos(angle + Math.PI / 6), toY - headLen * Math.sin(angle + Math.PI / 6));\r\n\r\n //Second arrow\r\n dx = rotateDirectionPoint.x - fromX;\r\n dy = rotateDirectionPoint.y - fromY;\r\n angle = Math.atan2(dy, dx);\r\n context.moveTo(fromX, fromY);\r\n context.lineTo(fromX + headLen * Math.cos(angle - Math.PI / 6), fromY + headLen * Math.sin(angle - Math.PI / 6));\r\n context.moveTo(fromX, fromY);\r\n context.lineTo(fromX + headLen * Math.cos(angle + Math.PI / 6), fromY + headLen * Math.sin(angle + Math.PI / 6));\r\n };\r\n\r\n static renderDoubleCircle(ctx, pointField, radius, lineWidth) {\r\n //outside circle\r\n ctx.arc(\r\n pointField.x,\r\n pointField.y,\r\n radius,\r\n 0,\r\n Math.PI * 2,\r\n false\r\n );\r\n ctx.strokeStyle = COLOR_THEMES[sqftConfig.activeTheme].primary;\r\n ctx.fillStyle = '#ffffff';\r\n ctx.lineWidth = lineWidth;\r\n ctx.stroke();\r\n ctx.fill();\r\n\r\n //inside circle\r\n ctx.beginPath();\r\n ctx.arc(\r\n pointField.x,\r\n pointField.y,\r\n radius - 3,\r\n 0,\r\n Math.PI * 2,\r\n false\r\n );\r\n\r\n ctx.fillStyle = COLOR_THEMES[sqftConfig.activeTheme].primary;\r\n ctx.lineWidth = lineWidth;\r\n ctx.fill();\r\n }\r\n\r\n static renderCircle(pointField,\r\n radius = 1,\r\n lineWidth = 1,\r\n strokeStyle = '#000000',\r\n fillStyle = null,\r\n ctx = sqftEventManager.getCtx()\r\n ) {\r\n ctx.save();\r\n ctx.beginPath();\r\n ctx.arc(\r\n pointField.x,\r\n pointField.y,\r\n radius,\r\n 0,\r\n Math.PI * 2,\r\n false\r\n );\r\n ctx.strokeStyle = strokeStyle;\r\n ctx.lineWidth = lineWidth;\r\n ctx.stroke();\r\n if (fillStyle) {\r\n ctx.fillStyle = fillStyle;//'#ffffff';\r\n ctx.fill();\r\n }\r\n ctx.closePath();\r\n ctx.restore();\r\n }\r\n\r\n static renderPolygon = (points,\r\n lineWidth = 2,\r\n strokeStyle = 'rgba(0, 0, 0, 0.5)',\r\n ctx = sqftEventManager.getCtx()\r\n ) => {\r\n const firstPoint = points[0];\r\n ctx.beginPath();\r\n ctx.moveTo(firstPoint.x, firstPoint.y);\r\n for (const point of points) {\r\n ctx.lineTo(point.x, point.y);\r\n }\r\n ctx.lineWidth = lineWidth;\r\n ctx.strokeStyle = strokeStyle;\r\n ctx.stroke();\r\n ctx.closePath();\r\n }\r\n\r\n static renderPolygonArray = (points,\r\n lineWidth = 2,\r\n strokeStyle = 'rgba(0, 0, 0, 0.5)',\r\n ctx = sqftEventManager.getCtx()\r\n ) => {\r\n const firstPoint = points[0];\r\n ctx.beginPath();\r\n ctx.moveTo(firstPoint[0], firstPoint[1]);\r\n for (const point of points) {\r\n ctx.lineTo(point[0], point[1]);\r\n }\r\n ctx.lineTo(firstPoint[0], firstPoint[1]);\r\n ctx.lineWidth = lineWidth;\r\n ctx.strokeStyle = strokeStyle;\r\n ctx.stroke();\r\n ctx.closePath();\r\n }\r\n\r\n static drawArrowsAround4points = (ctx, points, offset = 10) => {\r\n points.forEach((point, index) => {\r\n const prevPoint = points[index === 0 ? points.length - 1 : index - 1];\r\n const nextPoint = points[\r\n index === points.length - 1 ? 0 : index + 1\r\n ];\r\n const afterNextPoint = points[\r\n index === points.length - 1\r\n ? 1\r\n : index === points.length - 2\r\n ? 0\r\n : index + 2\r\n ];\r\n const offsetPoint1 = getPointOnTheLine(point, prevPoint, offset);\r\n const offsetPoint2 = getPointOnTheLine(nextPoint, afterNextPoint, offset);\r\n const [midPoint, midPoint2] = getParallelPoints(point, nextPoint, - offset);\r\n\r\n ctx.beginPath();\r\n RenderFigures.drawArrow( ctx,\r\n offsetPoint1.x,\r\n offsetPoint1.y,\r\n offsetPoint2.x,\r\n offsetPoint2.y,\r\n );\r\n RenderFigures.drawArrow( ctx,\r\n midPoint.x,\r\n midPoint.y,\r\n midPoint2.x,\r\n midPoint2.y,\r\n );\r\n ctx.lineWidth = 1;\r\n ctx.stroke();\r\n ctx.closePath();\r\n });\r\n };\r\n\r\n static drawArrowsAroundPoints = (ctx, points, offset = 10, minArrowLength = 2) => {\r\n points.forEach((point, index) => {\r\n const nextPoint = points[\r\n index === points.length - 1 ? 0 : index + 1\r\n ];\r\n const pointDistance = getPointDistance(point, nextPoint);\r\n const scale = workspace.getScale();\r\n\r\n if (pointDistance / scale > minArrowLength) {\r\n const [midPoint, midPoint2] = getParallelPoints(point, nextPoint, - offset);\r\n ctx.beginPath();\r\n RenderFigures.drawArrow( ctx,\r\n midPoint.x,\r\n midPoint.y,\r\n midPoint2.x,\r\n midPoint2.y,\r\n );\r\n ctx.lineWidth = 1;\r\n ctx.stroke();\r\n ctx.closePath();\r\n }\r\n });\r\n };\r\n\r\n static renderHandle = (ctx, midPoint) => {\r\n ctx.save();\r\n ctx.beginPath();\r\n ctx.fillStyle = 'white';\r\n ctx.lineWidth = 2;\r\n ctx.strokeStyle = COLOR_THEMES[sqftConfig.activeTheme].primary;\r\n ctx.arc(midPoint.x, midPoint.y, 10, 0, 2 * Math.PI, false);\r\n ctx.fill();\r\n ctx.stroke();\r\n ctx.closePath();\r\n\r\n ctx.beginPath();\r\n ctx.moveTo(midPoint.x, midPoint.y);\r\n ctx.lineTo(midPoint.x + 5 , midPoint.y);\r\n ctx.lineTo(midPoint.x + 5 , midPoint.y + 3);\r\n\r\n ctx.moveTo(midPoint.x, midPoint.y);\r\n ctx.lineTo(midPoint.x - 5 , midPoint.y);\r\n ctx.lineTo(midPoint.x - 5 , midPoint.y + 3);\r\n ctx.stroke();\r\n\r\n ctx.restore();\r\n }\r\n\r\n /**\r\n * Draws a sink\r\n * @param {CanvasRenderingContext2D} ctx\r\n * @param {Number} x The top left x coordinate\r\n * @param {Number} y The top left y coordinate\r\n * @param {Number} width The width of the rectangle\r\n * @param {Number} height The height of the rectangle\r\n * to specify different radii for corners\r\n */\r\n static sink(ctx, x, y, width, height) {\r\n // Proportions of the original SVG\r\n const originalWidth = 340;\r\n const originalHeight = 463;\r\n const innerRectWidth = 284;\r\n const innerRectHeight = 410;\r\n const innerRectX = 29;\r\n const innerRectY = 29;\r\n const circleRadiusBig = 29;\r\n const circleRadiusSmall = 20.7142857;\r\n const circleCenterX = 142 + circleRadiusBig;\r\n const circleCenterY = 203 + circleRadiusBig;\r\n\r\n // Scaling proportions\r\n const scaleX = width / originalWidth;\r\n const scaleY = height / originalHeight;\r\n\r\n const lineWidth = 1;\r\n const lineColor = COLOR_THEMES[sqftConfig.activeTheme].primary; //\"#4A90E2\";\r\n ctx.lineWidth = lineWidth * scaleX;\r\n ctx.strokeStyle = lineColor;\r\n\r\n // Fill the background with white\r\n ctx.fillStyle = \"#FFFFFF\";\r\n ctx.fillRect(x, y, width, height);\r\n\r\n // Drawing the outer rectangle\r\n ctx.beginPath();\r\n ctx.rect(x, y, width, height);\r\n ctx.stroke();\r\n\r\n // Drawing the inner rectangle\r\n const innerX = x + innerRectX * scaleX;\r\n const innerY = y + innerRectY * scaleY;\r\n const innerW = innerRectWidth * scaleX;\r\n const innerH = innerRectHeight * scaleY;\r\n ctx.beginPath();\r\n ctx.rect(innerX, innerY, innerW, innerH);\r\n ctx.stroke();\r\n\r\n // Drawing the circles\r\n const centerX = x + circleCenterX * scaleX;\r\n const centerY = y + circleCenterY * scaleY;\r\n const radiusBig = circleRadiusBig * scaleX;\r\n const radiusSmall = circleRadiusSmall * scaleX;\r\n\r\n ctx.beginPath();\r\n ctx.arc(centerX, centerY, radiusBig, 0, 2 * Math.PI);\r\n ctx.stroke();\r\n\r\n ctx.beginPath();\r\n ctx.arc(centerX, centerY, radiusSmall, 0, 2 * Math.PI);\r\n ctx.stroke();\r\n }\r\n\r\n /**\r\n * Draws a doubleSink\r\n * @param {CanvasRenderingContext2D} ctx\r\n * @param {Number} x The top left x coordinate\r\n * @param {Number} y The top left y coordinate\r\n * @param {Number} width The width of the rectangle\r\n * @param {Number} height The height of the rectangle\r\n * to specify different radii for corners\r\n */\r\n static doubleSink(ctx, x, y, width, height) {\r\n // Proportions of the original doubleSink SVG\r\n const originalWidth = 341;\r\n const originalHeight = 511;\r\n const innerRectWidthTop = 282;\r\n const innerRectHeightTop = 153;\r\n const innerRectWidthBottom = 283;\r\n const innerRectHeightBottom = 285;\r\n const innerRectX = 29;\r\n const innerRectYTop = 26;\r\n const innerRectYBottom = 192;\r\n const circleRadiusBig = 29;\r\n const circleRadiusSmall = 20.7142857;\r\n const circleCenterX = 149; // Adjusted for double sink\r\n const circleCenterYTop = 103; // Top circle center\r\n const circleCenterYBottom = 335; // Bottom circle center\r\n\r\n // Scaling proportions based on provided width and height\r\n const scaleX = width / originalWidth;\r\n const scaleY = height / originalHeight;\r\n\r\n // Line thickness and color for doubleSink\r\n const lineWidth = 1.54 * scaleX; // Adjusted line width\r\n const lineColor = \"#4A90E2\";\r\n\r\n // Fill the background with white\r\n ctx.fillStyle = \"#FFFFFF\";\r\n ctx.fillRect(x, y, width, height);\r\n\r\n // Draw the outer rectangle\r\n ctx.lineWidth = lineWidth;\r\n ctx.strokeStyle = lineColor;\r\n ctx.beginPath();\r\n ctx.rect(x, y, width, height);\r\n ctx.stroke();\r\n\r\n // Draw the top inner rectangle\r\n const innerX = x + innerRectX * scaleX;\r\n const innerYTop = y + innerRectYTop * scaleY;\r\n const innerWTop = innerRectWidthTop * scaleX;\r\n const innerHTop = innerRectHeightTop * scaleY;\r\n ctx.beginPath();\r\n ctx.rect(innerX, innerYTop, innerWTop, innerHTop);\r\n ctx.stroke();\r\n\r\n // Draw the bottom inner rectangle\r\n const innerYBottom = y + innerRectYBottom * scaleY;\r\n const innerWBottom = innerRectWidthBottom * scaleX;\r\n const innerHBottom = innerRectHeightBottom * scaleY;\r\n ctx.beginPath();\r\n ctx.rect(innerX, innerYBottom, innerWBottom, innerHBottom);\r\n ctx.stroke();\r\n\r\n // Draw top circles\r\n const centerXTop = x + circleCenterX * scaleX;\r\n const centerYTop = y + circleCenterYTop * scaleY;\r\n const radiusBig = circleRadiusBig * scaleX;\r\n const radiusSmall = circleRadiusSmall * scaleX;\r\n\r\n ctx.beginPath();\r\n ctx.arc(centerXTop, centerYTop, radiusBig, 0, 2 * Math.PI);\r\n ctx.stroke();\r\n\r\n ctx.beginPath();\r\n ctx.arc(centerXTop, centerYTop, radiusSmall, 0, 2 * Math.PI);\r\n ctx.stroke();\r\n\r\n // Draw bottom circles\r\n const centerYBottom = y + circleCenterYBottom * scaleY;\r\n\r\n ctx.beginPath();\r\n ctx.arc(centerXTop, centerYBottom, radiusBig, 0, 2 * Math.PI);\r\n ctx.stroke();\r\n\r\n ctx.beginPath();\r\n ctx.arc(centerXTop, centerYBottom, radiusSmall, 0, 2 * Math.PI);\r\n ctx.stroke();\r\n }\r\n\r\n // Function to draw the background pattern\r\n static drawBackgroundWhite(ctx, startPoint, width, height) {\r\n ctx.fillStyle = \"white\";\r\n ctx.fillRect(startPoint.x, startPoint.y, width, height);\r\n }\r\n\r\n // Function to draw the border pattern\r\n static drawBorder(ctx, startPoint, width, height) {\r\n ctx.lineWidth = 1;\r\n ctx.strokeStyle = \"#4A90E2\";\r\n ctx.strokeRect(startPoint.x, startPoint.y, width, height);\r\n }\r\n}\r\n","import orderBy from \"lodash/orderBy\";\r\n\r\nimport {Part} from \"../part\";\r\nimport DesignNavigationItem from \"../../../visComponents/designNavigationItem\";\r\nimport {PartMenuType} from \"../../../visComponents/constants\";\r\nimport {showerThumbnail} from '../../../bvComponent/core/assets';\r\n\r\n// import store from \"../../../../store\";\r\n\r\nimport {ShowerTubCombo} from \"./showerTubCombo\";\r\n\r\nimport ShowerFixture from \"../subparts/shower/showerFixture\";\r\nimport ShowerScreen from \"../subparts/shower/showerScreen\";\r\nimport ShowerGlass from \"../subparts/shower/showerGlass\";\r\n// import ShowerOverlay from \"../subparts/shower/showerOverlay\";\r\nimport ShowerBody from \"../subparts/shower/showerBody\";\r\nimport ShowerWall from \"../subparts/shower/showerWall\";\r\nimport ShowerWallAccent from \"../subparts/shower/showerWallAccent\";\r\nimport ShowerDoor from \"../subparts/shower/showerDoor\";\r\nimport ShowerPanCombo from \"../subparts/shower/showerPanCombo\";\r\nimport ShowerDoorHandle from \"../subparts/shower/showerDoorHandle\";\r\nimport PonyWallCap from \"../subparts/shower/ponyWallCap\";\r\nimport PonyWallGlass from \"../subparts/shower/ponyWallGlass\";\r\nimport ShowerFloor from \"../subparts/shower/showerFloor\";\r\nimport Threshold from \"../subparts/shower/threshold\";\r\nimport ShowerDrain from \"../subparts/shower/showerDrain\";\r\nimport ShowerHead from \"../subparts/shower/showerHead\";\r\nimport ShowerArm from \"../subparts/shower/showerArm\";\r\nimport ShowerHeadBundle from \"../subparts/shower/showerHeadBundle\";\r\nimport TubSpout from \"../subparts/shower/tubSpout\";\r\nimport HandShowerKit from \"../subparts/shower/handShowerKit\";\r\n\r\nimport {ShowerHeadTypes, ShowerHandTypes} from \"../constants\";\r\nimport ShowerCurb from \"../subparts/shower/showerCurb\";\r\nimport BodySpray from \"../subparts/showerNew/bodySpray\";\r\nimport DiverterTrim from \"../subparts/showerNew/diverterTrim\";\r\nimport HandShowerHolder from \"../subparts/showerNew/handShowerHolder\";\r\nimport HandShowerOnly from \"../subparts/showerNew/handShowerOnly\";\r\nimport ShowerHose from \"../subparts/showerNew/showerHose\";\r\nimport ShowerSystem from \"../subparts/showerNew/showerSystem\";\r\nimport ShowerTrimKit from \"../subparts/showerNew/showerTrimKit\";\r\nimport ValveTrim from \"../subparts/showerNew/valveTrim\";\r\nimport WallUnion from \"../subparts/showerNew/wallUnion\";\r\n\r\nexport class Shower extends Part {\r\n static id = 'Shower';\r\n\r\n static Type = {\r\n Custom: 'Custom',\r\n Complete: 'Complete',\r\n Combo: 'Combo',\r\n All: 'All'\r\n };\r\n\r\n constructor() {\r\n super(true, false, PartMenuType.Complex);\r\n\r\n this.menuType = PartMenuType.Complex;\r\n this.partThumbnail = showerThumbnail;\r\n this.partName = 'Shower';\r\n this.translateId = \"visualizer.bathroom.shower\";\r\n this.relatedItems = [];\r\n this.activeSubType_ = Shower.Type.Custom;\r\n\r\n this.customBodyType = 1; // Door\r\n\r\n this.showerBody = null;\r\n this.showerScreen = null;\r\n this.showerGlass = null;\r\n this.showerWall = null;\r\n this.showerWallAccent = null;\r\n\r\n // old\r\n this.showerFloor = null;\r\n this.showerOverlay = null;\r\n // old\r\n\r\n this.showerPanCombo = null;\r\n this.threshold = null;\r\n this.showerFixture = null;\r\n this.showerBodySelectedByUser = false;\r\n this.showerDoor = null;\r\n this.showerDoorHandle = null;\r\n\r\n this.ponyWallCap = null;\r\n this.ponyWallGlass = null;\r\n this.showerHead = null;\r\n this.showerArm = null;\r\n this.showerHeadBundle = null;\r\n this.handShowerKit = null;\r\n this.tubSpout = null;\r\n this.bodySpray = null;\r\n this.diverterTrim = null;\r\n this.handShowerHolder = null;\r\n this.handShowerOnly = null;\r\n this.showerHose = null;\r\n this.showerSystem = null;\r\n this.showerTrimKit = null;\r\n this.valveTrim = null;\r\n this.wallUnion = null;\r\n\r\n this.showerBody = new ShowerBody(true);\r\n this.showerBody.getParent = () => this;\r\n this.showerBody.type = Shower.Type.All;\r\n this.showerBody.counts = {\r\n allLayoutFeaturesCount: 0,\r\n largeLayoutFeaturesCount: 0,\r\n smallLayoutFeaturesCount: 0\r\n };\r\n this.relatedItems.push(this.showerBody);\r\n\r\n this.showerFloorIsActive = false;\r\n this.shower_head_type = ShowerHeadTypes.shower_fixture;\r\n this.shower_hand_type = ShowerHandTypes.hand_shower_holder;\r\n this.relatedGroupNames = [\"Shower Pan\", \"Shower Wall\", \"Shower Wall Accent\", \"Shower Door\", \"Shower Door Handle\",\r\n \"ShowerPan\", \"ShowerFloor\", \"Shower Fixture\", \"Shower Drain\", \"Shower Head\", \"Shower Arm\", \"Shower Head Bundle\",\r\n \"Pony Wall Cap\", \"Pony Wall Glass\", \"Shower Screen\", \"Shower Glass\", \"Shower Body\", \"Tub Spout\", \"Hand Shower Kit\",\r\n \"Shower Curb\", \"Body Spray\", \"Diverter Trim\", \"Hand Shower Holder\", \"Hand Shower Only\", \"Shower Hose\",\r\n \"Shower System\", \"Shower Trim Kit\", \"Valve Trim\", \"Wall Union\"];\r\n }\r\n\r\n load(dbFeature, loadFeature = true) {\r\n let relatedItemName = \"\",\r\n relatedItemType = \"\",\r\n RelatedItemClass = null;\r\n switch (dbFeature.groupName) {\r\n case \"Shower Pan\":\r\n relatedItemName = \"showerPanCombo\";\r\n RelatedItemClass = ShowerPanCombo;\r\n relatedItemType = Shower.Type.Custom;\r\n break;\r\n case \"Shower Pans\":\r\n relatedItemName = \"showerPanCombo\";\r\n RelatedItemClass = ShowerPanCombo;\r\n relatedItemType = Shower.Type.Custom;\r\n break;\r\n case \"Shower Wall\":\r\n case \"Shower Walls\":\r\n case \"ShowerInteriorWall\": // OLD\r\n relatedItemName = \"showerWall\";\r\n RelatedItemClass = ShowerWall;\r\n relatedItemType = Shower.Type.Custom;\r\n break;\r\n case \"Shower Wall Accent\":\r\n relatedItemName = \"showerWallAccent\";\r\n RelatedItemClass = ShowerWallAccent;\r\n relatedItemType = Shower.Type.Custom;\r\n break;\r\n case \"Shower Door\":\r\n case \"Shower_Door\":\r\n relatedItemName = \"showerDoor\";\r\n RelatedItemClass = ShowerDoor;\r\n relatedItemType = Shower.Type.Custom;\r\n break;\r\n case \"Shower Door Handle\":\r\n relatedItemName = \"showerDoorHandle\";\r\n RelatedItemClass = ShowerDoorHandle;\r\n relatedItemType = Shower.Type.Custom;\r\n break;\r\n case \"ShowerPan\":\r\n relatedItemName = \"threshold\";\r\n RelatedItemClass = Threshold;\r\n relatedItemType = Shower.Type.Custom;\r\n break;\r\n case \"ShowerFloor\":\r\n case \"Shower Floor\":\r\n relatedItemName = \"showerFloor\";\r\n RelatedItemClass = ShowerFloor;\r\n relatedItemType = Shower.Type.Custom;\r\n break;\r\n case \"Shower Fixture\":\r\n relatedItemName = \"showerFixture\";\r\n RelatedItemClass = ShowerFixture;\r\n relatedItemType = Shower.Type.All;\r\n break;\r\n case \"Shower Drain\":\r\n relatedItemName = \"showerDrain\";\r\n RelatedItemClass = ShowerDrain;\r\n relatedItemType = Shower.Type.Custom;\r\n break;\r\n case \"Shower Head\":\r\n relatedItemName = \"showerHead\";\r\n RelatedItemClass = ShowerHead;\r\n relatedItemType = Shower.Type.Custom;\r\n break;\r\n case \"Shower Arm\":\r\n relatedItemName = \"showerArm\";\r\n RelatedItemClass = ShowerArm;\r\n relatedItemType = Shower.Type.All;\r\n break;\r\n case \"Shower Head Bundle\":\r\n relatedItemName = \"showerHeadBundle\";\r\n RelatedItemClass = ShowerHeadBundle;\r\n relatedItemType = Shower.Type.All;\r\n break;\r\n case \"Pony Wall Cap\":\r\n relatedItemName = \"ponyWallCap\";\r\n RelatedItemClass = PonyWallCap;\r\n relatedItemType = Shower.Type.All;\r\n break;\r\n case \"Pony Wall Glass\":\r\n relatedItemName = \"ponyWallGlass\";\r\n RelatedItemClass = PonyWallGlass;\r\n relatedItemType = Shower.Type.All;\r\n break;\r\n case \"Shower Screen\":\r\n relatedItemName = \"showerScreen\";\r\n RelatedItemClass = ShowerScreen;\r\n relatedItemType = Shower.Type.All;\r\n break;\r\n case \"Shower Glass\":\r\n if (!this.showerBody) {\r\n this.showerBody = new ShowerBody(true);\r\n this.relatedItems.push(this.showerBody);\r\n }\r\n relatedItemName = \"showerGlass\";\r\n RelatedItemClass = ShowerGlass;\r\n relatedItemType = Shower.Type.All;\r\n break;\r\n // case \"Shower Overlay\":\r\n // relatedItemName = \"showerOverlay\";\r\n // RelatedItemClass = ShowerOverlay;\r\n // relatedItemType = Shower.Type.Custom;\r\n // break;\r\n case \"Shower Body\":\r\n relatedItemName = \"showerBody\";\r\n RelatedItemClass = ShowerBody;\r\n relatedItemType = Shower.Type.Custom;\r\n break;\r\n case \"Tub Spout\":\r\n relatedItemName = \"tubSpout\";\r\n RelatedItemClass = TubSpout;\r\n relatedItemType = Shower.Type.Custom;\r\n break;\r\n case \"Hand Shower Kit\":\r\n relatedItemName = \"handShowerKit\";\r\n RelatedItemClass = HandShowerKit;\r\n relatedItemType = Shower.Type.Custom;\r\n break;\r\n case \"Shower Curb\":\r\n relatedItemName = \"showerCurb\";\r\n RelatedItemClass = ShowerCurb;\r\n relatedItemType = Shower.Type.Custom;\r\n break;\r\n case \"Body Spray\":\r\n relatedItemName = \"bodySpray\";\r\n RelatedItemClass = BodySpray;\r\n relatedItemType = Shower.Type.Custom;\r\n break;\r\n case \"Diverter Trim\":\r\n case \"Diverter Only Trim\":\r\n relatedItemName = \"diverterTrim\";\r\n RelatedItemClass = DiverterTrim;\r\n relatedItemType = Shower.Type.Custom;\r\n break;\r\n case \"Hand Shower Holder\":\r\n relatedItemName = \"handShowerHolder\";\r\n RelatedItemClass = HandShowerHolder;\r\n relatedItemType = Shower.Type.Custom;\r\n break;\r\n case \"Hand Shower Only\":\r\n relatedItemName = \"handShowerOnly\";\r\n RelatedItemClass = HandShowerOnly;\r\n relatedItemType = Shower.Type.Custom;\r\n break;\r\n case \"Shower Hose\":\r\n relatedItemName = \"showerHose\";\r\n RelatedItemClass = ShowerHose;\r\n relatedItemType = Shower.Type.Custom;\r\n break;\r\n case \"Shower System\":\r\n relatedItemName = \"showerSystem\";\r\n RelatedItemClass = ShowerSystem;\r\n relatedItemType = Shower.Type.Custom;\r\n break;\r\n case \"Shower Trim Kit\":\r\n relatedItemName = \"showerTrimKit\";\r\n RelatedItemClass = ShowerTrimKit;\r\n relatedItemType = Shower.Type.Custom;\r\n break;\r\n case \"Valve Trim\":\r\n relatedItemName = \"valveTrim\";\r\n RelatedItemClass = ValveTrim;\r\n relatedItemType = Shower.Type.Custom;\r\n break;\r\n case \"Wall Union\":\r\n relatedItemName = \"wallUnion\";\r\n RelatedItemClass = WallUnion;\r\n relatedItemType = Shower.Type.Custom;\r\n break;\r\n\r\n }\r\n if (relatedItemName) {\r\n if (!this[relatedItemName]) {\r\n this[relatedItemName] = new RelatedItemClass(true);\r\n if (relatedItemName !== \"shadows\") {\r\n this.relatedItems.push(this[relatedItemName]);\r\n }\r\n }\r\n if (!this.categoryEnabled) {\r\n this.categoryEnabled = true\r\n }\r\n this[relatedItemName].getParent = () => this;\r\n this[relatedItemName].type = relatedItemType;\r\n if (loadFeature) {\r\n this[relatedItemName].load(dbFeature);\r\n }\r\n return true\r\n }\r\n return false\r\n }\r\n\r\n setSpecificRules() {}\r\n\r\n // setLayers(layout, placeholdersNeeded) {\r\n // let res = [];\r\n // const relatedItems = this.getRelatedItems();\r\n // // console.log('relatedItems', relatedItems);\r\n // relatedItems.forEach(relatedItem => {\r\n // relatedItem.setLayers(layout);\r\n // });\r\n // if (this.showerDoor && !this.showerDoor.activeFeature) { // we need it cause shower door is relying on shPanCombo\r\n // this.showerDoor.setLayers(layout);\r\n // }\r\n // if (this.showerDoorHandle && !this.showerDoorHandle.activeFeature) {\r\n // this.showerDoorHandle.setLayers(layout);\r\n // }\r\n // relatedItems.forEach(relatedItem => {\r\n //\r\n // (placeholdersNeeded && !relatedItem.placeholderChanged && relatedItem.placeholderFeature)\r\n // ? relatedItem.placeholderFeature.layer.addTo(res)\r\n // : relatedItem.activeFeature && relatedItem.activeFeature.layer ? relatedItem.activeFeature.layer.addTo(res) : null\r\n //\r\n // // NN(relatedItem.activeFeature, (activeFeature) => activeFeature.layer.addTo(res));\r\n //\r\n // if ((relatedItem instanceof ShowerBody || relatedItem instanceof ShowerInteriorWallAccent)\r\n // && relatedItem.activeFeatureParts && relatedItem.activeFeatureParts.length) {\r\n // relatedItem.activeFeatureParts.forEach((activeFeaturePart) => {\r\n // activeFeaturePart && !activeFeaturePart.disabled && activeFeaturePart.layer && activeFeaturePart.layer.addTo(res);\r\n // })\r\n // }\r\n // if (relatedItem instanceof ShowerWall && relatedItem.activeFeatureParts && relatedItem.placeholderChanged && relatedItem.activeFeatureParts.length) {\r\n // relatedItem.activeFeatureParts.forEach((activeFeaturePart) => {\r\n // activeFeaturePart && !activeFeaturePart.disabled && activeFeaturePart.layer && activeFeaturePart.layer.addTo(res);\r\n // })\r\n // }\r\n //\r\n // });\r\n //\r\n // return res.length ? res : null;\r\n // }\r\n\r\n subTypes() {\r\n return this.showerBody && (this.showerBody.features.some(showerBodyFeature => showerBodyFeature.type === 0)\r\n && this.showerBody.features.some(showerBodyFeature => showerBodyFeature.type === 1)) ? [\r\n Shower.Type.Custom,\r\n Shower.Type.Complete,\r\n ] : []\r\n }\r\n\r\n isSubTypeWithItems() {\r\n return true;\r\n }\r\n\r\n activeSubType() {\r\n return this.activeSubType_;\r\n }\r\n\r\n handleSubTypeClick(subType, handleNavigationItemClick) {\r\n this.activeSubType_ = subType;\r\n this.showerBody.setDefault(); // set default custom shower\r\n if (handleNavigationItemClick) {\r\n handleNavigationItemClick(this.showerBody.navigationSubItems()[0]) // set default custom shower\r\n }\r\n }\r\n\r\n getRelatedItems() {\r\n const relatedItems = orderBy(this.relatedItems, 'layerPriority');\r\n if (this.showerTubComboIsActive()) {\r\n return relatedItems\r\n }\r\n return relatedItems.filter((relatedItem) => {\r\n return relatedItem.type === this.activeSubType_ || relatedItem.type === Shower.Type.All\r\n })\r\n }\r\n\r\n subParts() {\r\n // const activeShowerGroup = this.getActiveShowerGroup();\r\n // const ponyWallIsActive = activeShowerGroup.showerDimensions() === \"Pony\";\r\n return this.getRelatedItems()\r\n .filter(item => {\r\n // if (item.isPonyWallPart) {\r\n // item.visible = ponyWallIsActive\r\n // }\r\n return item.visible\r\n })\r\n .map(_ => new DesignNavigationItem(_.partName, _));\r\n // return filter(this.relatedItems, {visible: true}).map(_ => new DesignNavigationItem(_.partName, _));\r\n }\r\n\r\n //\r\n // toggleShowerParts(disabled, keepLeftWall) {\r\n // this.getRelatedItems().forEach((relItem) => {\r\n // console.log('relItem', relItem);\r\n // if (\r\n // relItem.partId !== \"shower_wall\"\r\n // && relItem.partId !== \"shower_wall_accent\"\r\n // && relItem.partId !== \"shower_fixture\"\r\n // && relItem.partId !== \"shower_door\"\r\n // && relItem.partId !== \"shower_door_handle\"\r\n // && relItem.partId !== \"pony_wall\"\r\n // && relItem.partId !== \"pony_wall_cap\"\r\n // && relItem.partId !== \"pony_wall_glass\"\r\n // ) {\r\n // relItem.disabled = disabled;\r\n // }\r\n // });\r\n // if (!keepLeftWall) {\r\n // this.layout.parts.Walls.wallExL.disabled = disabled;\r\n // }\r\n // }\r\n\r\n setDefault(layout) {\r\n const relatedItems = orderBy(this.relatedItems, 'layerPriority');\r\n relatedItems.forEach(_ => _.setDefault(layout));\r\n }\r\n\r\n setDefaultPartAfterSubTypeClick() {\r\n return this.subParts()[0]\r\n }\r\n\r\n handleSubPartClick() {\r\n\r\n }\r\n\r\n /**\r\n * Gets the current shower size from metaValues.\r\n */\r\n showerSize() {\r\n if (this.showerTubComboIsActive()) {\r\n const showerTubCombo = this.getActiveShowerGroup();\r\n if (showerTubCombo) {\r\n const activeRelItem = showerTubCombo.relatedItems.find(featureGroup => featureGroup.partId === showerTubCombo.bottomTub)\r\n || showerTubCombo.replacementTub;\r\n if (activeRelItem && activeRelItem.activeFeature && activeRelItem.activeFeature.metaData[\"ShowerSize\"]) {\r\n return activeRelItem.activeFeature.metaData[\"ShowerSize\"][0]\r\n }\r\n }\r\n return null\r\n }\r\n if (this.showerPanCombo && this.showerPanCombo.activeFeature && this.showerPanCombo.activeFeature.metaData[\"ShowerSize\"]\r\n && this.showerPanCombo.activeFeature.matchesMetaForArrayOfConditions(this.showerPanCombo.getArrayOfConditions())) {\r\n return this.showerPanCombo.activeFeature.metaData[\"ShowerSize\"][0]\r\n }\r\n return null\r\n }\r\n\r\n /**\r\n * Gets the current shower dimensions from showerBody\r\n */\r\n showerDimensions() {\r\n if (!this.showerBody)\r\n return \"Full\";\r\n return this.showerBody.activeFeature ? this.showerBody.activeFeature.showerDimensions : null;\r\n // \"Full\" : \"Half\";\r\n }\r\n\r\n isComplete() {\r\n if (!this.showerBody) {\r\n return true;\r\n } else if (this.showerTubComboIsActive()) {\r\n return false;\r\n } else {\r\n return this.showerBody.activeFeature\r\n }\r\n }\r\n\r\n showerTubComboIsActive() {\r\n const comboPart = this.layout.parts[ShowerTubCombo.id];\r\n return comboPart && comboPart.showerTubComboIsActive\r\n }\r\n\r\n getActiveShowerGroup() { // user for taking sizes, etc...\r\n return this.showerTubComboIsActive() ? this.layout.parts[ShowerTubCombo.id] : this;\r\n }\r\n\r\n setShowerHeadType(showerHeadType, fromPartId = \"\") {\r\n this.shower_head_type = showerHeadType;\r\n\r\n let arrayToDisable = [];\r\n let arrayToEnable = [];\r\n switch (showerHeadType) {\r\n case ShowerHeadTypes.shower_head_bundle:\r\n arrayToDisable = [this.showerArm, this.showerHead, this.showerFixture, this.showerTrimKit, this.showerSystem];\r\n arrayToEnable = [this.showerHeadBundle];\r\n break;\r\n case ShowerHeadTypes.shower_arm:\r\n switch (fromPartId) {\r\n case \"shower_arm\":\r\n case \"shower_head\":\r\n arrayToEnable = [this.showerArm, this.showerHead, this.valveTrim];\r\n break;\r\n case \"shower_hose\":\r\n case \"wall_union\":\r\n case \"hand_shower_only\":\r\n case \"hand_shower_holder\":\r\n arrayToEnable = [this.handShowerHolder, this.handShowerOnly, this.wallUnion, this.showerHose];\r\n break;\r\n default:\r\n arrayToEnable = [this.showerArm, this.showerHead, this.wallUnion];\r\n break;\r\n }\r\n arrayToDisable = [this.showerHeadBundle, this.showerFixture, this.showerTrimKit, this.showerSystem];\r\n break;\r\n case ShowerHeadTypes.shower_trim_kit:\r\n arrayToDisable = [this.showerArm, this.showerHead, this.showerFixture, this.showerHeadBundle, this.showerSystem, this.wallUnion];\r\n arrayToEnable = [this.valveTrim, this.showerTrimKit];\r\n break;\r\n case ShowerHeadTypes.shower_system:\r\n arrayToDisable = [this.showerArm, this.showerHead, this.showerFixture, this.showerHeadBundle, this.showerTrimKit, this.wallUnion];\r\n arrayToEnable = [this.showerSystem];\r\n break;\r\n case ShowerHeadTypes.shower_fixture:\r\n arrayToDisable = [this.showerArm, this.showerHead, this.showerHeadBundle, this.showerTrimKit, this.wallUnion, this.showerHose, this.handShowerOnly, this.handShowerHolder];\r\n arrayToEnable = [this.showerFixture];\r\n break;\r\n default:\r\n break;\r\n }\r\n arrayToDisable.forEach(featureGroup => {\r\n if (featureGroup && !featureGroup.disabled) {\r\n featureGroup.disabled = true;\r\n }\r\n });\r\n arrayToEnable.forEach(featureGroup => {\r\n if (featureGroup && featureGroup.disabled && featureGroup.canBeEnabled()) {\r\n featureGroup.disabled = false;\r\n }\r\n });\r\n\r\n }\r\n\r\n setShowerHandType(showerType) {\r\n this.shower_hand_type = showerType;\r\n\r\n let arrayToDisable = [];\r\n let arrayToEnable = [];\r\n switch (showerType) {\r\n case ShowerHandTypes.hand_shower_kit:\r\n arrayToDisable = [this.handShowerHolder, this.handShowerOnly, this.showerHose];\r\n arrayToEnable = [this.handShowerKit];\r\n break;\r\n case ShowerHandTypes.hand_shower_holder:\r\n arrayToDisable = [this.handShowerKit];\r\n arrayToEnable = [this.handShowerHolder, this.handShowerOnly, this.showerHose];\r\n break;\r\n default:\r\n break;\r\n }\r\n arrayToDisable.forEach(featureGroup => {\r\n if (featureGroup && !featureGroup.disabled) {\r\n featureGroup.disabled = true;\r\n }\r\n });\r\n arrayToEnable.forEach(featureGroup => {\r\n if (featureGroup && featureGroup.disabled && featureGroup.canBeEnabled()) {\r\n featureGroup.disabled = false;\r\n }\r\n });\r\n\r\n }\r\n}\r\n\r\n","import * as types from \"./actionTypes\";\r\n\r\nexport const setGroheFiltersOpened = (filtersOpened = false) => ({\r\n type: types.SET_GROHE_FILTERS_OPENED,\r\n payload: {filtersOpened}\r\n});\r\n\r\nexport const setGroheSimilarFeature = (similarFeature = false) => ({\r\n type: types.SET_GROHE_SIMILAR_FEATURE,\r\n payload: {similarFeature}\r\n});\r\n\r\nexport const setGroheSimilarProductsOpened = (similarProductsOpened = false) => ({\r\n type: types.SET_GROHE_SIMILAR_PRODUCTS_OPENED,\r\n payload: {similarProductsOpened}\r\n});\r\n\r\nexport const setGroheRequiredButNotIncludedFeature = (requiredButNotIncludedFeature= false) => ({\r\n type: types.SET_GROHE_REQUIRED_BUT_NOT_INCLUDED_FEATURE,\r\n payload: {requiredButNotIncludedFeature}\r\n});\r\n\r\nexport const setGroheFiltersSearchText = (groheFiltersSearchText = \"\") => ({\r\n type: types.SET_GROHE_FILTERS_SEARCH_TEXT,\r\n payload: {groheFiltersSearchText}\r\n});\r\n\r\nexport const setLastOpenedCategory = (lastOpenedCategory = \"\") => ({\r\n type: types.SET_GROHE_LAST_OPENED_CATEGORY,\r\n payload: {lastOpenedCategory}\r\n});\r\n\r\nexport const setGroheSubCategoryOpened = (subCategoryOpened = \"\") => ({\r\n type: types.SET_GROHE_SUB_CATEGORY_OPENED,\r\n payload: {subCategoryOpened}\r\n});\r\n\r\nexport const setShowAddedToTheCartSuccess = (showAddedToTheCartSuccess = \"\") => ({\r\n type: types.SET_GROHE_SHOW_ADDED_TO_THE_CART_SUCCESS,\r\n payload: {showAddedToTheCartSuccess}\r\n});\r\n\r\nexport const setGroheActiveFeatureQuantity = (groheActiveFeatureQuantity = \"\") => ({\r\n type: types.SET_GROHE_ACTIVE_FEATURE_QUANTITY,\r\n payload: {groheActiveFeatureQuantity}\r\n});\r\n\r\nexport const setGroheShareButtonsOpened = (groheShareButtonsOpened = \"\") => ({\r\n type: types.SET_GROHE_SHARE_BUTTONS_OPENED,\r\n payload: {groheShareButtonsOpened}\r\n});\r\n\r\nexport const setGroheSameColorActiveFeature = (groheSameColorActiveFeature = \"\") => ({\r\n type: types.SET_GROHE_SAME_COLOR_ACTIVE_FEATURE,\r\n payload: {groheSameColorActiveFeature}\r\n});\r\n\r\nexport const setGroheSameColorSectionOpened = (groheSameColorSectionOpened = \"\") => ({\r\n type: types.SET_GROHE_SAME_COLOR_SECTION_OPENED,\r\n payload: {groheSameColorSectionOpened}\r\n});\r\n\r\nexport const setGroheSameColorCheckboxApplied = (groheSameColorCheckboxApplied = \"\") => ({\r\n type: types.SET_GROHE_SAME_COLOR_CHECKBOX_APPLIED,\r\n payload: {groheSameColorCheckboxApplied}\r\n});\r\n\r\nexport const setExisingTempId = (exisingTempId = \"\") => ({\r\n type: types.SET_GROHE_EXISTING_TEMP_ID,\r\n payload: {exisingTempId}\r\n});\r\n","import polygonClipping from \"polygon-clipping\";\r\nimport sqftEventManager from \"../../store/sqftEventManager\";\r\n// import triangle from \"./layouts/triangle\";\r\nimport Line from \"./line\";\r\nimport pnpoly, {pnpolyArray} from \"../../../../lib/pnpoly\";\r\n//import earcut from \"../../../../lib/earcut\";\r\nimport workspace from \"../workspace\";\r\n//import sqftStore from \"../../store/sqftStore\";\r\nimport sqftStore from \"../workspace\";\r\nimport sqftConfig from \"../../store/sqftConfig\";\r\nimport {\r\n getAreaByShoelaceFormula,\r\n getEdgeArea, getIntersectCordsBetweenLines, getPointDistance, getPointField,\r\n getSnappedPos,\r\n inchesToLNFT,\r\n mm2ToM2,\r\n orientation,\r\n rotatePoint,\r\n sqInchesToMM2,\r\n sqInchesToSqFoot\r\n} from \"../../../../helpers/sqftHelper\";\r\nimport {getAngle, getRotationCentrePoint} from \"./rotation\";\r\nimport ShapeHelper, {\r\n getAngleBetween3Points,\r\n getPointDirection\r\n} from \"../../../../helpers/shapeHelper\";\r\nimport $ from \"jquery\";\r\nimport clone from \"lodash/clone\";\r\nimport store from \"../../../../../../store\";\r\nimport {\r\n FEATURE_QUANTITY_UNITS,\r\n SHAPE_PART_ID, SHAPE_PART_IDS_USING_SAME_COLOR,\r\n SIDEBAR_SLAB_SEAM_BUTTONS, WORKSPACE_RESOURCES,\r\n} from \"../../../../constants\";\r\nimport ShapeSlab from \"./shapeParts/shapeSlab\";\r\nimport config from \"../../store/sqftConfig\";\r\nimport SlabWorkspace from \"../slab/slabWorkspace\";\r\nimport ShapeEditable from \"./shapeParts/shapeEditable\";\r\nimport {updateSQFTCalculations} from \"../../../../../../actions/sqftFunctions\";\r\nimport sqftShapeManager from \"../../store/sqftShapeManager\";\r\nimport SqftStore from \"../../store/sqftStore\";\r\nimport ShapeCabinet from \"./shapeParts/shapeCabinet\";\r\nimport ShapeAbsolute from \"./shapeParts/shapeAbsolute\";\r\nimport ShapeSpacer from \"./shapeParts/shapeSpacer\";\r\nimport {isSFTCabinetsGroup} from \"../../../../helpers/sqftNavigationHelper\";\r\nimport {getCurrentLayout} from \"../../../../../appLayout\";\r\nimport {\r\n getFeatureNameById,\r\n shouldChangeCabinetShapePartId\r\n} from \"../../../../helpers/featureHelper\";\r\nimport {\r\n addShapeIdWithMissingFeature,\r\n setShouldShowChangeShapeFeatureMissingMessage,\r\n} from \"../../../../../../actions/sqftMenuFunctions\";\r\nimport workspaceControllers from \"../../store/workspaceControllers\";\r\nimport sqftSlabManager from \"../../store/sqftSlabManager\";\r\nimport ShapeIntersections from \"./shapeParts/shapeIntersections\";\r\nimport ShapeMemory from \"./shapeParts/shapeMemory\";\r\nimport ShapeRender from \"./shapeParts/shapeRender\";\r\nimport {SHAPE_PART_IDS_VISIBLE_ONLY_IN_THE_SLAB_MODE} from \"../../../../constantsFeature\";\r\nimport CabinetSwitchers from \"../../../../../kvComponent/navigation/cabinetSwitchers\";\r\nimport ShapeAutoShuffle from \"./shapeParts/shapeAutoShuffle\";\r\nimport {getLinesWithoutAnglePoints} from \"../../helpers/lineHelper\";\r\nimport {SHAPE_DIAMOND_LAYOUTS} from \"../cabinet/cabinetShapes\";\r\nimport {getCabinetSimilarFeatureFromAnotherColor} from \"../../../../helpers/sqft3dArHelper\";\r\nimport {calculatePolygonClippingPolygonArea} from \"../../../../helpers/coordinatesHelper\";\r\n\r\nexport default function(id, totalShapeCount, shapeType, partId, fromLayout, shapeParams = {}) {\r\n //private variables\r\n let self = this,\r\n shape = null,\r\n // debugLineColor = \"rgba(0,255,0,0.3)\",\r\n // debugPointColor = \"rgba(0,0,255,0.3)\",\r\n // fillColor = \"rgba(255,255,255,0)\",\r\n minAngle = -90,\r\n maxAngle = 90,\r\n marginFromShape = SqftStore.isSlabMode() || isSFTCabinetsGroup() ? 0 : 30,\r\n state = {\r\n mouseDown: false,\r\n mouseDownPosition: null,\r\n hovering: false,\r\n handlerHold: null,\r\n isPointsMovable: false,\r\n isRotatable: false,//true //todo enable on menu click\r\n };\r\n this.design = {\r\n hoverShapeColor: \"rgba(159,197,34,0.47)\",\r\n redHoverShapeColor: \"rgba(208,1,27,0.5)\",\r\n fillColor: \"rgba(74,144,226,0.17)\",\r\n }\r\n this.layout270 = [\"SN\", \"SPN\", \"SNI\", \"SPNI\"];\r\n this.shapeParams = shapeParams; //{shapeCabinet: boolean, canSnap: boolean, isSpacer: boolean}\r\n //public properties\r\n this.pos = {\r\n x: 0,\r\n y: 0\r\n };\r\n this.slabPos = {\r\n x: 0,\r\n y: 0\r\n };\r\n this.staticCenterPoint = null;\r\n this.testShapeLines = null;\r\n this.linesWithoutAngle = null;\r\n this.shapeSlab = new ShapeSlab(this);\r\n this.shapeCabinet = shapeParams.shapeCabinet ? new ShapeCabinet(this) : null;\r\n //this.shapeAbsolute = shapeParams.canSnap ? new ShapeAbsolute(this) : null;\r\n this.shapeAbsolute = new ShapeAbsolute(this);\r\n this.shapeSpacer = shapeParams.isSpacer ? new ShapeSpacer(this) : null;\r\n this.shapeEditable = new ShapeEditable(this);\r\n this.shapeIntersections = new ShapeIntersections(this);\r\n this.shapeAutoShuffle = new ShapeAutoShuffle(this);\r\n this.shapeMemory = new ShapeMemory(this);\r\n this.shapeRender = new ShapeRender(this);\r\n this.shapeRotatable = null; //new ShapeRotatable(this, fillColor);\r\n this.colorSet = null; //new ColorSet\r\n this.shapePieces = []; // seam parts shape ids (see seam tool)\r\n this.seamCutPoints = [];\r\n this.shapeParent = null;\r\n this.slabModeCoreParentId = null; // shape id (additional backsplash shape parent shape id in the slab mode. See SlabAdditionalShapes)\r\n this.id = id;\r\n this.featureId = null;\r\n this.featureName = null;\r\n this.relatedParentFeatureId = null;\r\n this.shapeType = shapeType;\r\n this.isContextMenuActive = false;\r\n this.labelsMenu = null;\r\n this.partId = partId;\r\n this.parentPartId = null; // this is shape part id that shape was created from. Used for spacer shapes\r\n this.slabParentPartId = null; // this is the shape partId that is hovered the slab. Used for slabs. Or shape part id that shape was created from in the slab mode.\r\n this.qtCatName = null;\r\n this.fromLayout = fromLayout; // layout abbreviation (S, LNI, etc.) is needed to know if to show popup\r\n this.rotatedDegrees = 0;\r\n this.rotatedDegreesSlab = 0;\r\n this.isHidden = false;\r\n this.isPointsMoved = false; // true if any shape points was moved\r\n this.isPointsChanged = true; // used to trigger update points position for the slabMode\r\n this.isPositionChanged = true; // used to trigger update slabPosition for the slabMode\r\n this.isResetSlabModePopupWasDisplayed = false; //used to display reset popup window if shape has pieces\r\n this.Direction = {\r\n RIGHT: 0,\r\n LEFT: 1\r\n };\r\n this.FlipDirection = {\r\n HORIZONTAL: 0,\r\n VERTICAL: 1\r\n };\r\n this.rotateAngleParts = getAngleRotatedParts(shapeType);\r\n this.isDisabledInPopup = false;\r\n this.slabModeWaterfallSegmentId = null;\r\n this.shouldUseSlabPricing = false;\r\n this.originalPointsCoords = false;\r\n\r\n this.getState = () => { return state };\r\n this.getFillColor = () => { return this.design.fillColor };\r\n this.getDesign = () => { return this.design };\r\n this.getColorset = () => { return this.colorSet };\r\n this.getIsPointsMovable = () => { return state.isPointsMovable };\r\n this.setType = (type) => { self.type = type };\r\n this.setProperty = (name, value) => { self[name] = value };\r\n this.setId = (id) => { this.id = id };\r\n this.setPartId = (partId) => {self.partId = partId};\r\n this.getFeatureName = () => { return this.featureName};\r\n this.setFeatureId = (featureId) => {\r\n //console.log(\"cur featureId\", this.featureId);\r\n //console.log(\"new featureId\", featureId);\r\n this.featureId = featureId\r\n this.featureName = getFeatureNameById(featureId);\r\n const isShapeUseTheSameFeatureColor = Object.values(SHAPE_PART_IDS_USING_SAME_COLOR).includes(this.partId);\r\n const isSeamPiece = this.partId === SHAPE_PART_ID.seamPiece;\r\n if (isShapeUseTheSameFeatureColor || isSeamPiece) {\r\n this.updateColorSet();\r\n this.updateRelatedShapes();\r\n this.updateSeamShapes();\r\n }\r\n };\r\n this.setSlabParentPartId = (partId) => { this.slabParentPartId = partId }; // here we will assign shape part id that is hovered the slab\r\n this.setSlabModeCoreParentPartId = (partId) => { this.slabParentPartId = partId }; // here we will assign core shape part id\r\n this.setSlabModeCoreParentId = (id) => { this.slabModeCoreParentId = id };\r\n this.setSlabModeWaterfallSegmentId = (id) => {this.slabModeWaterfallSegmentId = id};\r\n this.setColorSet = (colorSet) => {this.colorSet = colorSet};\r\n this.getColorSet = () => { return this.colorSet};\r\n this.updateColorSet = () => {\r\n this.colorSet = workspaceControllers[WORKSPACE_RESOURCES.shapeColors]\r\n .getOrGenerateNewShapeColorByFeatureId(this.featureId);\r\n };\r\n this.updateRelatedShapes = () => {\r\n const relatedShapes = workspace.getShapesBySlabModeCoreParentId([this.id]);\r\n for (const relatedShape of relatedShapes) {\r\n relatedShape.setFeatureId(this.featureId);\r\n relatedShape.setColorSet(this.colorSet);\r\n }\r\n };\r\n this.updateSeamShapes = () => {\r\n this.shapePieces.forEach(shapePieceId => {\r\n let shapePiece = workspace.getShapeById(shapePieceId);\r\n shapePiece.setFeatureId(this.featureId);\r\n shapePiece.setColorSet(this.colorSet);\r\n });\r\n };\r\n this.updateSeamedShapesPosition = () => {\r\n this.shapePieces.forEach(shapePieceId => {\r\n let shapePiece = workspace.getShapeById(shapePieceId);\r\n shapePiece.setPositionWithoutChange(this.pos);\r\n });\r\n };\r\n this.setQtCatName = (qtCatName) => {this.qtCatName = qtCatName};\r\n this.setIsPointsChanged = (isPointsChanged) => {this.isPointsChanged = isPointsChanged};\r\n this.addCrownMolding = () => {\r\n this.shapeCabinet ? this.shapeCabinet.addCrownMolding() : null;\r\n }\r\n this.setQtCatName = (qtCatName) => { this.qtCatName = qtCatName };\r\n this.getIsRotatable = () => { return state.isRotatable };\r\n this.setIsRotatable = (isRotatable) => { state.isRotatable = isRotatable };\r\n this.setIsPointsMovable = (isPointsMovable) => { state.isPointsMovable = isPointsMovable };\r\n this.setSlabPricing = (value) => { this.shouldUseSlabPricing = value };\r\n\r\n /**\r\n * this will return size for square and rectangles in INCHES\r\n * todo maybe we need to change this and return values in mmm and inches\r\n * @return {{width: *, height: *}}\r\n */\r\n this.getSize = () => {\r\n return {\r\n width: getPointDistance(shape[0].from, shape[0].to),\r\n height: getPointDistance(shape[1].from, shape[1].to),\r\n }\r\n }\r\n this.resetMouseDown = () => {\r\n state.mouseDown = false;\r\n state.mouseDownPosition = null;\r\n }\r\n // this.getWidth = () => {\r\n // return this.getSize().width\r\n // }\r\n /**\r\n * @param isFromParams this is static initial value\r\n * @return {*}\r\n */\r\n this.getWidth = (isFromParams = false) => {\r\n if (isFromParams) {\r\n return this.shapeParams.width\r\n }\r\n const thisShapeMeasurementPoints = sqftShapeManager.getMinMaxShapesPointsOnWorkspace([this]);\r\n return getPointDistance(thisShapeMeasurementPoints[0], thisShapeMeasurementPoints[1]);\r\n }\r\n this.getHeight = (isFromParams = false) => {\r\n if (isFromParams) {\r\n return this.shapeParams.height\r\n }\r\n const thisShapeMeasurementPoints = sqftShapeManager.getMinMaxShapesPointsOnWorkspace([this]);\r\n return getPointDistance(thisShapeMeasurementPoints[1], thisShapeMeasurementPoints[2]);\r\n }\r\n this.getDepth = (isFromParams = false) => {\r\n if (isFromParams) {\r\n return this.shapeParams.depth\r\n }\r\n }\r\n\r\n //public events\r\n this.onHover = null;\r\n\r\n //private setters\r\n function getAngleRotatedParts(shapeType) {\r\n switch (shapeType) {\r\n case \"horseshoe\":\r\n return [{ // this is the right part: |‾| <- this one\r\n rotatedAngleValue: 0, // angle input value\r\n line1: 1, // right external side\r\n line2: 3, // right internal side\r\n baseConfiguration: null, // is used for keeping all the configuration after rotateAngle is over\r\n isHovered: false, // user has mouse over this part\r\n isActive: false, // user has clicked on this part\r\n isPulsing: true, // user has select angle tool\r\n shapeType, // is needed for onChange, different parts have different point changes\r\n angleDirection: \"right\" // rotate direction (is used for lines, line text, etc.)\r\n }, { // this is the left part: this one -> |‾|\r\n rotatedAngleValue: 0, // angle input value\r\n line1: 7, // left external side\r\n line2: 5, // left internal side\r\n baseConfiguration: 0, // difference between basePointX and secondaryPointX\r\n isHovered: false, // user has mouse over this part\r\n isActive: false, // user has clicked on this part\r\n isPulsing: true, // user has select angle tool\r\n shapeType, // is needed for onChange, different parts have different point changes\r\n angleDirection: \"left\" // rotate direction (is used for lines, line text, etc.)\r\n }];\r\n case \"wideangle\":\r\n return [{ // this is the top part: |‾ <- this one\r\n rotatedAngleValue: 0, // angle input value\r\n line1: 0, // top external side\r\n line2: 2, // top internal side\r\n baseConfiguration: null, // is used for keeping all the configuration after rotateAngle is over\r\n isHovered: false, // user has mouse over this part\r\n isActive: false, // user has clicked on this part\r\n shapeType, // is needed for onChange, different parts have different point changes\r\n angleDirection: \"right\" // rotate direction (is used for lines, line text, etc.)\r\n }, { // this is the left part: this one -> |‾\r\n rotatedAngleValue: 0, // angle input value\r\n line1: 5, // left external side\r\n line2: 3, // left internal side\r\n baseConfiguration: 0, // difference between basePointX and secondaryPointX\r\n isHovered: false, // user has mouse over this part\r\n isActive: false, // user has clicked on this part\r\n shapeType, // is needed for onChange, different parts have different point changes\r\n angleDirection: \"left\" // rotate direction (is used for lines, line text, etc.)\r\n }];\r\n default:\r\n return []\r\n }\r\n }\r\n\r\n const setFillColor = (red, green, blue, alpha) => {\r\n this.design.fillColor =\r\n \"rgba(\" + red + \", \" + green + \", \" + blue + \", \" + alpha + \")\";\r\n }\r\n\r\n this.setPosition = (value) => {\r\n this.pos = value;\r\n this.isPositionChanged = true;\r\n this.updateSeamedShapesPosition();\r\n }\r\n this.setPositionWithoutChange = (value) => {\r\n this.pos = value;\r\n this.updateSeamedShapesPosition();\r\n // if (this.partId !== SHAPE_PART_ID.backsplashPiece && this.partId !== SHAPE_PART_ID.seamPiece) {\r\n // this.isPositionChanged = true;\r\n // }\r\n }\r\n this.setSlabPosition = (value) => {\r\n this.slabPos = clone(value);\r\n }\r\n function setShape(segments) {\r\n shape = segments; // [line, line, line, line]\r\n for (var i = 0; i < shape.length; i++) {\r\n shape[i].init(self);\r\n }\r\n }\r\n function setHovering(value) { state.hovering = value; return value; }\r\n function setHoveringOnlyShape(value) { state.hoveringOnlyShape = value; return value; }\r\n //public getters\r\n this.getPosition = () => {\r\n const reduxState = store.getState();\r\n const isShowSlabTool = reduxState.sqftSlabState.isShowSlabTool;\r\n let pos;\r\n\r\n if (isShowSlabTool) {\r\n let slabAbsolutePos = this.getSlabAbsolutePosition()\r\n pos = slabAbsolutePos ? slabAbsolutePos : this.slabPos;\r\n } else if (this.shapeParams !== undefined && this.shapeParams.canSnap) {\r\n let absolutePos = this.shapeAbsolute.getAbsolutePosition();\r\n pos = absolutePos !== null ? absolutePos : this.pos;\r\n } else {\r\n pos = this.pos\r\n }\r\n\r\n return pos;\r\n };\r\n this.getOffset = () => {\r\n const scale = config.scale;\r\n const workspacePos = workspace.getOffset();\r\n let _pos = this.getPosition();\r\n if (config.workspace.snapToGrid) {\r\n _pos = this.getSnappedPosition();\r\n }\r\n return {\r\n x: workspacePos.x + (_pos.x * scale),\r\n y: workspacePos.y + (_pos.y * scale)\r\n }\r\n };\r\n this.getRegularPosition = () => { return this.pos; };\r\n this.getSlabPosition = () => { return this.slabPos; };\r\n this.getSlabAbsolutePosition = () => { return this.shapeSlab.getAbsolutePosition(); };\r\n this.getSnappedPosition = () => { return getSnappedPos(this.getPosition()) };\r\n //todo\r\n this.isHovering = function() {\r\n const isSlabMode = SqftStore.isSlabMode();\r\n if (!isSlabMode) {\r\n for (const line of this.getLines()) {\r\n if (line.isHovering(isSlabMode)) {\r\n return true\r\n }\r\n }\r\n }\r\n return state.hovering === true;\r\n };\r\n this.isHoveringOnlyShape = function() { return state.hoveringOnlyShape === true; };\r\n this.isWithShapePieces = () => {\r\n return this.shapePieces.length > 0;\r\n };\r\n this.setResetSlabModePopupWasDisplayed = (value) => {\r\n return this.isResetSlabModePopupWasDisplayed = value;\r\n };\r\n this.getResetSlabModePopupWasDisplayed = () => {\r\n return this.isResetSlabModePopupWasDisplayed;\r\n };\r\n this.setShapePieces = (shapePieces) => {\r\n this.shapePieces = shapePieces;\r\n };\r\n this.addShapePieceId = (shapeId) => {\r\n this.shapePieces.push(shapeId);\r\n };\r\n this.hideShapePieces = () => {\r\n this.shapePieces.forEach(shapePieceId => {\r\n let shapePiece = workspace.getShapeById(shapePieceId);\r\n if (shapePiece) {\r\n shapePiece.deregisterEvents()\r\n } else {\r\n console.error(\"shapePiece with Id not found\", shapePieceId);\r\n }\r\n });\r\n };\r\n this.restoreShapePieces = () => {\r\n this.shapePieces.forEach(shapePieceId => {\r\n let shapePiece = workspace.getShapeById(shapePieceId);\r\n shapePiece.reInitEvents();\r\n });\r\n };\r\n this.removeShapePieces = () => {\r\n this.shapePieces.forEach(shapePieceId => {\r\n workspace.removeShapeById(shapePieceId);\r\n });\r\n };\r\n\r\n this.export = () => {\r\n let lines = [];\r\n let totalArea = this.getTotalArea();\r\n let squareFeet = sqftConfig.measureUnit === \"Imperial\" ? Math.ceil10(sqInchesToSqFoot(totalArea), -2) : mm2ToM2(self.getTotalArea(totalArea));\r\n for (let i = 0; i < shape.length; i++) {\r\n lines.push(shape[i].export());\r\n }\r\n let isHidden = [SHAPE_PART_ID.seamPiece, SHAPE_PART_ID.slabPlaceHolder].includes(this.partId);\r\n let isQuantityUnits = FEATURE_QUANTITY_UNITS.includes(this.partId);\r\n\r\n return {\r\n pos: this.pos,\r\n slabPos: this.slabPos,\r\n id: this.id,\r\n featureId: this.featureId,\r\n colorSet: this.colorSet,\r\n type: this.type,\r\n isHidden: isHidden,\r\n shapePieces: this.shapePieces,\r\n seamCutPoints: this.seamCutPoints,\r\n shapeParent: this.shapeParent,\r\n lines: lines,\r\n shapeType: this.shapeType,\r\n rotatedDegrees: this.rotatedDegrees,\r\n rotatedDegreesSlab: this.rotatedDegreesSlab,\r\n partId: this.partId,\r\n qtCatName: this.qtCatName,\r\n fromLayout: this.fromLayout,\r\n squareFeet: isQuantityUnits ? 1 : squareFeet,\r\n isDisabledInPopup: this.isDisabledInPopup,\r\n rotateAngleParts: this.rotateAngleParts,\r\n isPointsChanged: this.isPointsChanged,\r\n isPositionChanged: this.isPositionChanged,\r\n isResetSlabModePopupWasDisplayed: this.isResetSlabModePopupWasDisplayed,\r\n shapeSlab: this.shapeSlab.export(),\r\n shapeCabinet: this.shapeCabinet ? this.shapeCabinet.export() : null,\r\n shapeAbsolute: this.shapeAbsolute ? this.shapeAbsolute.export() : null,\r\n shapeParams: this.shapeParams,\r\n relatedParentFeatureId: this.relatedParentFeatureId,\r\n fromWizardGroupId: this.fromWizardGroupId,\r\n slabModeCoreParentId: this.slabModeCoreParentId,\r\n parentPartId: this.parentPartId,\r\n slabParentPartId: this.slabParentPartId,\r\n shouldUseSlabPricing: this.shouldUseSlabPricing,\r\n originalPointsCoords: this.originalPointsCoords,\r\n };\r\n };\r\n this.import = (value) => {\r\n [\"fromLayout\", \"id\", \"partId\", \"shapeType\", \"rotatedDegrees\", \"rotatedDegreesSlab\", \"rotateAngleParts\", \"fromLayout\",\r\n \"type\", \"isHidden\", \"shapePieces\", \"pos\", \"slabPos\", \"featureId\", \"isDisabledInPopup\", \"isPointsChanged\",\r\n \"isPositionChanged\", \"qtCatName\", \"isResetSlabModePopupWasDisplayed\", \"shapeParams\", \"shapeCabinet\", \"shapeAbsolute\",\r\n \"relatedParentFeatureId\", \"colorSet\", \"fromWizardGroupId\", \"slabModeCoreParentId\", \"seamCutPoints\", \"parentPartId\",\r\n \"slabParentPartId\", \"shouldUseSlabPricing\", \"originalPointsCoords\"]\r\n .forEach(key => {\r\n self[key] = value[key]\r\n });\r\n let lines = [];\r\n for (let i = 0; i < value.lines.length; i++) {\r\n let line = new Line();\r\n line.import(value.lines[i], lines);\r\n lines.push(line);\r\n }\r\n shape = lines;\r\n for (let i = 0; i < shape.length; i++) {\r\n shape[i].init(self);\r\n }\r\n this.init();\r\n this.shapeSlab.import(value.shapeSlab);\r\n if (value.shapeCabinet) {\r\n this.shapeCabinet = new ShapeCabinet(this);\r\n this.shapeCabinet.import(value.shapeCabinet);\r\n }\r\n if (value.shapeAbsolute) {\r\n this.shapeAbsolute = new ShapeAbsolute(this);\r\n this.shapeAbsolute.import(value.shapeAbsolute);\r\n }\r\n if ([SHAPE_PART_ID.slabPlaceHolder, SHAPE_PART_ID.seamPiece].includes(value.partId)) {\r\n this.deregisterEvents();\r\n }\r\n if (isSFTCabinetsGroup) {\r\n const reduxState = store.getState();\r\n const {sqftFromFeature} = reduxState.sqftState;\r\n if (sqftFromFeature && sqftFromFeature.cartFeature) {\r\n //this.changeFeatureIdIfColorWasChanged(sqftFromFeature.cartFeature);\r\n }\r\n }\r\n if (this.shapeParams.isSpacer) {\r\n this.shapeSpacer = new ShapeSpacer(this);\r\n }\r\n };\r\n this.changeFeatureIdIfColorWasChanged = (newFeature= null) => {\r\n const layout = getCurrentLayout();\r\n const relatedParentFeature = layout.getFeatureById(this.relatedParentFeatureId, true);\r\n const currentShapeFeature = layout.getFeatureById(this.featureId, true);\r\n const shouldChangeShapePartId = shouldChangeCabinetShapePartId(relatedParentFeature, newFeature);\r\n if (shouldChangeShapePartId && newFeature.dbFeature && currentShapeFeature) {\r\n const newParent = CabinetSwitchers.getNeededFeatureFromNavItems(newFeature.dbFeature.sharedFeatureName, relatedParentFeature.getParent())\r\n\r\n if (newParent && newParent.dbFeature) {\r\n const featureRelatedFeatures = newParent.getFeatureRelatedFeatures();\r\n const newShapeDbFeature = getCabinetSimilarFeatureFromAnotherColor(featureRelatedFeatures, currentShapeFeature.dbFeature);\r\n\r\n if (newShapeDbFeature) {\r\n //if (newShapeDbFeature && newShapeDbFeature.sharedFeatureName !== 'SW-WBC3630') { // this line is only for debugging\r\n this.relatedParentFeatureId = newParent.dbFeature.id\r\n this.setFeatureId(newShapeDbFeature.id)\r\n } else {\r\n store.dispatch(addShapeIdWithMissingFeature(this.id));\r\n store.dispatch(setShouldShowChangeShapeFeatureMissingMessage(true));\r\n }\r\n }\r\n }\r\n\r\n return this;\r\n }\r\n this.getHoverSegment = function() {\r\n for (let i = 0; i < shape.length; i++) {\r\n if (shape[i].isHovering()) {\r\n return shape[i];\r\n }\r\n }\r\n };\r\n this.getHoverSegmentV2 = () => {\r\n for (let i = 0; i < shape.length; i++) {\r\n shape[i].updateLineHovering(sqftEventManager.getMousePos())\r\n if (shape[i].isHovering()) {\r\n return shape[i];\r\n }\r\n }\r\n };\r\n this.getHoverSegmentOutlineCorner = function() {\r\n for (let i = 0; i < shape.length; i++) {\r\n if (shape[i].isAngleHovering()) {\r\n return shape[i].lineCorner;\r\n }\r\n }\r\n };\r\n this.getHoverSegmentCorner = function() {\r\n for (let i = 0; i < shape.length; i++) {\r\n if (shape[i].isCornerLineHovering()) {\r\n return shape[i].lineCorner;\r\n }\r\n }\r\n };\r\n this.getHoverPoint = function() {\r\n for (var i = 0; i < shape.length; i++) {\r\n if (shape[i].to.isHovering()) {\r\n return shape[i].to;\r\n }\r\n }\r\n };\r\n this.getHoverMiteredPoint = function() {\r\n for (let i = 0; i < shape.length; i++) {\r\n if (shape[i].isWithMitered()) {\r\n for (let point of shape[i].miteredOverlay.getPoints()) {\r\n if (point.isHovering()) {\r\n return point;\r\n }\r\n }\r\n }\r\n }\r\n };\r\n this.getHoverLabel = () => {\r\n for (let i = 0; i < shape.length; i++) {\r\n if (shape[i].labelOverlay && shape[i].labelOverlay.isHovered()) {\r\n return shape[i].labelOverlay\r\n }\r\n }\r\n };\r\n this.getHoverPointOnClick = function() {\r\n for (var i = 0; i < shape.length; i++) {\r\n if (shape[i].to.isOverPointField()) {\r\n return shape[i].to;\r\n }\r\n }\r\n };\r\n this.getCenter = () => {\r\n if (!this.staticCenterPoint) {\r\n let points = this.getPoints();\r\n\r\n this.staticCenterPoint = ShapeHelper.getCenterPoint(points);\r\n }\r\n return this.staticCenterPoint;\r\n }\r\n /**\r\n * Note changing this value can break display in slabMode\r\n * @param value\r\n */\r\n this.setCenter = (value) => {\r\n this.staticCenterPoint = value;\r\n }\r\n this.getLines = (shouldIncludeBumpoutLines = false) => {\r\n if (shouldIncludeBumpoutLines) {\r\n const linesWithBumpouts = [];\r\n shape.forEach(line => {\r\n if (line.isWithBumpout()) {\r\n linesWithBumpouts.push(...line.bumpoutOverlay.getBumpoutLines())\r\n } else {\r\n linesWithBumpouts.push(line);\r\n }\r\n });\r\n return linesWithBumpouts\r\n }\r\n\r\n return shape;\r\n };\r\n this.createLinesWithoutAngle = () => {\r\n this.linesWithoutAngle = getLinesWithoutAnglePoints(this.getLines());\r\n return this.linesWithoutAngle\r\n }\r\n this.getLinesWithoutAngle = () => {\r\n return this.linesWithoutAngle\r\n }\r\n this.getLineCorners = function() {\r\n const lineCorners = [];\r\n shape.forEach(line => {\r\n if (line.lineCorner !== undefined)\r\n lineCorners.push(line.lineCorner)\r\n });\r\n return lineCorners\r\n };\r\n this.getPoints = () => {\r\n return this.getLines().map(line => line.from);\r\n };\r\n this.getPointsCoords = () => {\r\n return this.getLines().map(line => { return {\r\n x: Math.round10(line.from.x, -4),\r\n y: Math.round10(line.from.y, -4),\r\n id: line.from.id\r\n }});\r\n };\r\n this.setOriginalPointsCoords = (value) => {\r\n this.originalPointsCoords = value;\r\n };\r\n this.getOriginalPointsCoords = () => {\r\n return this.originalPointsCoords;\r\n };\r\n this.getPointsPosOnWorkspace = (shouldGetRegularPosition = false) => {\r\n return this.getLines().map(line => { return {...line.from.getPointPosOnWorkspace(shouldGetRegularPosition), id: line.from.id}});\r\n };\r\n this.getPointsPointField = () => {\r\n return this.getLines().map(line => { return {...getPointField(line.from.x, line.from.y, this), id: line.from.id}});\r\n };\r\n this.getOriginPointOnWorkspace = () => {\r\n // if (shape.shapeParams && shape.shapeParams.shapeLayout !== SHAPE_LAYOUTS.rectangle) {\r\n // let realShapeDepth = shapeDepth;\r\n // if (shape.shapeParams && SHAPE_SQUARE_LAYOUTS.includes(shape.shapeParams.shapeLayout)) {\r\n // realShapeDepth = shapeWidth;\r\n // }\r\n // zeroPointPosOnWorkspace = CabinetsSet.getShapeCorrectedPos(shape.rotatedDegrees, shapePosition, shapeWidth, realShapeDepth);\r\n // }\r\n\r\n // Here we will return intersection between first and last lines\r\n if (this.shapeParams && SHAPE_DIAMOND_LAYOUTS.includes(this.shapeParams.shapeLayout)) {\r\n const pointsOnWorkspace = this.getPointsPosOnWorkspace();\r\n return getIntersectCordsBetweenLines(pointsOnWorkspace[1], pointsOnWorkspace[0], pointsOnWorkspace[pointsOnWorkspace.length - 2], pointsOnWorkspace[pointsOnWorkspace.length - 1], true ,true);\r\n }\r\n\r\n return this.getPoints()[0].getPointPosOnWorkspace();\r\n }\r\n this.getLineById = function(id) {\r\n return this.getLines().find((line) => line.id === id);\r\n };\r\n this.getTotalArea = () => {\r\n let totalArea,\r\n anglesTotalArea;\r\n\r\n //shape area\r\n totalArea = sqftConfig.measureUnit === \"Imperial\" ? this.getTotalInches() : this.getTotalMillimeters();\r\n //shape corners area\r\n totalArea += sqftConfig.measureUnit === \"Imperial\" ? this.getCornersArea() : sqInchesToMM2(this.getCornersArea());\r\n\r\n //console.log(\"countertop\", totalArea);\r\n //additional bumpout area\r\n totalArea += this.getBumpoutTotalArea();\r\n\r\n //additional angles area\r\n anglesTotalArea = this.getAnglesTotalArea();\r\n totalArea += sqftConfig.measureUnit === \"Imperial\" ? anglesTotalArea : sqInchesToMM2(anglesTotalArea);\r\n\r\n //additional edges waterfall area\r\n totalArea += this.getEdgesAdditionalArea();\r\n //console.log(\"edges\", this.getEdgesAdditionalArea());\r\n //additional edges waterfall area\r\n totalArea += this.getWaterfallToolAdditionalArea();\r\n\r\n //additional mitered area\r\n totalArea += this.getMiteredTotalArea();\r\n\r\n //console.log(\"mitered\", this.getMiteredTotalArea());\r\n //console.log(\"total\", totalArea);\r\n\r\n return totalArea;\r\n };\r\n\r\n this.getCornersArea = () => {\r\n const points = this.getPoints();\r\n let cornersAdditionalArea = 0;\r\n\r\n function getRectangle(basePoint1, basePoint2, width) {\r\n const direction = {\r\n x: basePoint2.x - basePoint1.x,\r\n y: basePoint2.y - basePoint1.y,\r\n };\r\n\r\n const length = Math.sqrt(direction.x ** 2 + direction.y ** 2);\r\n const norm = {\r\n x: -direction.y / length,\r\n y: direction.x / length,\r\n };\r\n\r\n const rect = [\r\n [basePoint1.x + norm.x * width / 2, basePoint1.y + norm.y * width / 2],\r\n [basePoint1.x - norm.x * width / 2, basePoint1.y - norm.y * width / 2],\r\n [basePoint2.x - norm.x * width / 2, basePoint2.y - norm.y * width / 2],\r\n [basePoint2.x + norm.x * width / 2, basePoint2.y + norm.y * width / 2],\r\n [basePoint1.x + norm.x * width / 2, basePoint1.y + norm.y * width / 2],\r\n ];\r\n\r\n return [rect];\r\n }\r\n\r\n for (let i = 0; i < points.length; i++) {\r\n const prev = points[(i - 1 + points.length) % points.length];\r\n const current = points[i];\r\n const next = points[(i + 1) % points.length];\r\n\r\n const angle = getAngleBetween3Points(prev, current, next); // Угол между точками\r\n //const distancePrev = getPointDistance(prev, current); // Длина стороны (base)\r\n //const distanceNext = getPointDistance(current, next); // Длина другой стороны\r\n\r\n if (Math.round(angle) !== 0 && (Math.round(angle) > 92 || Math.round(angle) < 88)) {\r\n const RECT_WIDTH = 52; //todo get shape width\r\n //console.log(\"distancePrev\", distancePrev);\r\n //console.log(\"distanceNext\", distanceNext);\r\n const rect1 = getRectangle(prev, current, RECT_WIDTH);\r\n const rect2 = getRectangle(current, next, RECT_WIDTH);\r\n\r\n const intersection = polygonClipping.intersection([rect1], [rect2]);\r\n\r\n if (intersection && intersection.length > 0) {\r\n let totalArea = 0;\r\n intersection.forEach((polygon) => {\r\n totalArea += calculatePolygonClippingPolygonArea(polygon);\r\n });\r\n\r\n cornersAdditionalArea += totalArea;\r\n console.log(\"Area of intersection:\", totalArea);\r\n } else {\r\n console.log(\"No intersection found\");\r\n }\r\n }\r\n }\r\n\r\n return cornersAdditionalArea;\r\n };\r\n\r\n this.getTotalLnft = function() {\r\n return Math.ceil(inchesToLNFT(this.getTotalArea())) ;\r\n };\r\n\r\n this.getAttachedEdges = function() {\r\n const reduxState = store.getState();\r\n return reduxState.sqftResourceState.attachedToLine.filter(attachedToLine => {\r\n return shape.some(line => attachedToLine.attachedToId === line.id)\r\n });\r\n };\r\n\r\n this.getWaterfallToolAdditionalArea = () => {\r\n let totalArea = 0;\r\n const lines = this.getLines();\r\n lines.forEach(line => {\r\n if (line.isWithWaterfallToolEdge && (line.isWithWaterfallToolEdge() || line.isWithPeninsulaUnderwrapEdge())) {\r\n const waterfallOverlay = workspaceControllers.waterfall.getResourceByLineId(line.id);\r\n if (waterfallOverlay) {\r\n totalArea += waterfallOverlay.getArea();\r\n }\r\n }\r\n });\r\n\r\n return totalArea\r\n }\r\n\r\n this.getEdgesAdditionalArea = () => {\r\n let totalArea = 0;\r\n //let edges = sqftStore.getShapeType('edge');\r\n const edges = this.getAttachedEdges();\r\n edges.forEach(edge => {\r\n const line = workspace.getLineById(edge.attachedToId);\r\n const lineLength = config.measureUnit === \"Imperial\" ? line.getLineLength() : line.getLineLengthMm();\r\n totalArea += getEdgeArea(line, lineLength, edge.featureId);\r\n });\r\n\r\n return totalArea;\r\n };\r\n\r\n this.getAnglesTotalArea = () => {\r\n let totalArea = 0;\r\n let innerPoints = ShapeHelper.getInnerCornerPoints(this);\r\n innerPoints.forEach(point => {\r\n if (point.angle) {\r\n totalArea += (point.angle * point.angle / 2) * 2\r\n } else if (point.arcLength) {\r\n totalArea += (point.arcLength * point.arcLength / 2) * 2\r\n }\r\n });\r\n\r\n return totalArea\r\n };\r\n\r\n this.getBumpoutTotalArea = () => {\r\n let area = 0;\r\n shape.forEach((line) => {\r\n if (line.isWithBumpout() && line.bumpoutOverlay) {\r\n area += config.measureUnit === \"Imperial\"\r\n ? line.bumpoutOverlay.getBumpoutTotalArea().inches\r\n : line.bumpoutOverlay.getBumpoutTotalArea().millimeters;\r\n }\r\n });\r\n\r\n return area\r\n };\r\n\r\n this.getMiteredTotalArea = () => {\r\n let totalArea = 0;\r\n shape.forEach(line => {\r\n if (line.isWithMitered() && line.miteredOverlay) {\r\n totalArea += line.miteredOverlay.getMiteredTotalArea();\r\n }\r\n });\r\n\r\n return totalArea\r\n };\r\n\r\n this.getTotalInches = function() {\r\n var inchesCount = 0;\r\n // square1 = 0,\r\n // square2 = 0,\r\n // square3 = 0;\r\n // console.log('self.shapeType', self.shapeType);\r\n // console.log('shape', shape);\r\n // todo remove ifs\r\n if (self.shapeType === 'square') {\r\n // inchesCount = ((this.rotatedDegrees === 90) || (this.rotatedDegrees === 270))\r\n // ? shape[1].getLineLength() * shape[2].getLineLength()\r\n // : shape[0].getLineLength() * shape[1].getLineLength();\r\n\r\n inchesCount = this.getAreaByShoelaceFormula();\r\n } else if (self.shapeType === 'wideangle') {\r\n // square1 = (shape[0].getLineLength() - shape[4].getLineLength()) * shape[1].getLineLength();\r\n // square2 = shape[4].getLineLength() * shape[5].getLineLength();\r\n // inchesCount = square1 + square2\r\n\r\n inchesCount = this.getAreaByShoelaceFormula();\r\n } else if (self.shapeType === 'horseshoe') {\r\n // square1 = shape[4].getLineLength() * (shape[7].getLineLength() - shape[5].getLineLength());\r\n // square2 = shape[2].getLineLength() * shape[1].getLineLength();\r\n // square3 = shape[6].getLineLength() * shape[7].getLineLength();\r\n // inchesCount = square1 + square2 + square3\r\n inchesCount = this.getAreaByShoelaceFormula();\r\n } else {\r\n inchesCount = this.getAreaByShoelaceFormula();\r\n }\r\n\r\n return inchesCount;\r\n };\r\n\r\n this.getAreaByShoelaceFormula = function () {\r\n return getAreaByShoelaceFormula(shape);\r\n };\r\n\r\n this.isWithBumpout = function () {\r\n return shape.some((line) => {\r\n return line.isWithBumpout();\r\n });\r\n };\r\n\r\n this.isWithMitered = function () {\r\n return shape.some((line) => {\r\n return line.isWithMitered();\r\n });\r\n };\r\n\r\n this.getTotalMillimeters = function() {\r\n return sqInchesToMM2(this.getAreaByShoelaceFormula());\r\n };\r\n\r\n function getRotateAngleRectangle(rotateAnglePart) {\r\n //line 1\r\n const line1 = shape[rotateAnglePart.line1];\r\n let renderFrom = line1.calculateRenderPosition(line1.from);\r\n let renderTo = line1.calculateRenderPosition(line1.to);\r\n //line2\r\n const line2 = shape[rotateAnglePart.line2];\r\n let renderFrom2 = line2.calculateRenderPosition(line2.from);\r\n let renderTo2 = line2.calculateRenderPosition(line2.to);\r\n return [\r\n [renderFrom.x, renderFrom.y],\r\n [renderTo.x, renderTo.y],\r\n [renderFrom2.x, renderFrom2.y],\r\n [renderTo2.x, renderTo2.y],\r\n ]\r\n }\r\n\r\n var handleArrowInputIncrease = (isNegative, input, rotateAnglePart, basePoint, secondaryPoint, rotated90_1, rotated90_2, bottomLine) => {\r\n if (isNegative) {\r\n input.value = +input.value + 1;\r\n } else {\r\n input.value = +input.value - 1;\r\n }\r\n\r\n self.rotateAngleInputChange(input, rotateAnglePart, basePoint, secondaryPoint, rotated90_1, rotated90_2, bottomLine);\r\n };\r\n\r\n const moveShape = (mousePos) => {\r\n let scale = sqftStore.getScale();\r\n let xDiff = (state.mouseDownPosition.x - mousePos.x) / scale;\r\n let yDiff = (state.mouseDownPosition.y - mousePos.y) / scale;\r\n\r\n let isShowSlabTool = store.getState().sqftSlabState.isShowSlabTool;\r\n if (this.shapeParams.canSnap || isShowSlabTool) {\r\n const shapeAbsolute = isShowSlabTool ? this.shapeSlab.shapeAbsolute : this.shapeAbsolute;\r\n workspaceControllers.snappedShapeGroups.resetShapeSnappedGroup(shapeAbsolute);\r\n workspaceControllers.snappedShapeGroups.updateShapeSnappedGroup(this, true);\r\n }\r\n\r\n if (isShowSlabTool) {\r\n // this.shapeSlab.setAbsolutePos(null);//reset minLength for correct calculations without stacking\r\n // let distancesToShapes = ShapeHelper.getDistancesToShapes(this);\r\n // let distancesToImages = ShapeHelper.getDistancesToSlabImages(this);\r\n // //console.log(\"distancesToImages\", distancesToImages);\r\n //\r\n // snapPossibilitiesToShapes = ShapeHelper.getSnappingPossibilities(distancesToShapes);\r\n // snapPossibilitiesToImages = ShapeHelper.getSnappingPossibilities(distancesToImages);\r\n //\r\n // this.setAbsolutePosFromSnapPossibilities(snapPossibilitiesToShapes);\r\n // this.setAbsolutePosFromSnapPossibilities(snapPossibilitiesToImages);\r\n\r\n this.slabPos.x -= xDiff;\r\n this.slabPos.y -= yDiff;\r\n } else {\r\n // this.pos.x -= xDiff;\r\n // this.pos.y -= yDiff;\r\n this.setPosition({\r\n x: this.pos.x - xDiff,\r\n y: this.pos.y - yDiff,\r\n })\r\n }\r\n\r\n state.mouseDownPosition.x = mousePos.x;\r\n state.mouseDownPosition.y = mousePos.y;\r\n // console.log('self.pos', self.pos);\r\n };\r\n\r\n this.setAbsolutePosFromSnapPossibilities = (snapPossibilities) => {\r\n if (snapPossibilities.length > 0) {\r\n let scale = sqftStore.getScale();\r\n let absolutePos = {...this.slabPos};\r\n snapPossibilities.forEach((snap) => {\r\n switch (snap.orientation) {\r\n case \"horizontal\":\r\n absolutePos.y -= snap.diff / scale\r\n break;\r\n case \"vertical\":\r\n absolutePos.x -= snap.diff / scale\r\n break;\r\n }\r\n this.shapeSlab.setAbsolutePos(absolutePos)\r\n })\r\n }\r\n }\r\n\r\n const isMouseOverShape = (mousePos) => {\r\n const scale = sqftStore.getScale(),\r\n wp = sqftStore.getOffset(),\r\n pos = self.getPosition(),\r\n offset = {\r\n x: mousePos.x - (pos.x * scale) - wp.x,\r\n y: mousePos.y - (pos.y * scale) - wp.y\r\n },\r\n vertx = [],\r\n verty = [],\r\n vert2x = [],\r\n vert2y = [];\r\n\r\n for (var i = 0; i < shape.length; i++) {\r\n const isSlabMode = SqftStore.isSlabMode();\r\n if (shape[i].isHovering(isSlabMode) && !isSlabMode //exclude hovering lines in the slab mode\r\n || shape[i].isAngleHovering()\r\n || shape[i].isCornerLineHovering()\r\n ) {\r\n setHoveringOnlyShape(false);\r\n\r\n return setHovering(true);\r\n }\r\n var pointDirection = shape[i].from.getPointDirection();\r\n let pointFromX = shape[i].from.x\r\n let pointFromY = shape[i].from.y\r\n\r\n switch (pointDirection) {\r\n case \"lefttop\":\r\n vertx.push(pointFromX * scale - marginFromShape);\r\n verty.push(pointFromY * scale - marginFromShape);\r\n break;\r\n case \"righttop\":\r\n vertx.push(pointFromX * scale + marginFromShape);\r\n verty.push(pointFromY * scale - marginFromShape);\r\n break;\r\n case \"rightbottom\":\r\n vertx.push(pointFromX * scale + marginFromShape);\r\n verty.push(pointFromY * scale + marginFromShape);\r\n break;\r\n case \"leftbottom\":\r\n vertx.push(pointFromX * scale - marginFromShape);\r\n verty.push(pointFromY * scale + marginFromShape);\r\n break;\r\n default:\r\n vertx.push(pointFromX * scale);\r\n verty.push(pointFromY * scale);\r\n break;\r\n }\r\n vert2x.push(pointFromX * scale);\r\n vert2y.push(pointFromY * scale);\r\n }\r\n var prevState = self.isHovering();\r\n\r\n let isHovering = pnpoly(shape.length, vertx, verty, offset.x, offset.y);\r\n setHovering(isHovering);\r\n setHoveringOnlyShape(pnpoly(shape.length, vert2x, vert2y, offset.x, offset.y));\r\n self.rotateAngleParts.forEach((rotateAnglePart) => {\r\n if ((self.shapeType === \"wideangle\")\r\n && !rotateAnglePart.rotatedAngleValue\r\n && self.rotateAngleParts.some(rotPart => rotPart.rotatedAngleValue > 0)) {\r\n rotateAnglePart.isHovered = false; // L shape may have only 1 part rotated\r\n } else {\r\n rotateAnglePart.isHovered = pnpolyArray(getRotateAngleRectangle(rotateAnglePart), mousePos);\r\n }\r\n });\r\n if (prevState && !self.isHovering()) {\r\n sqftEventManager.resetCursor(self);\r\n }\r\n return this.isHovering();\r\n };\r\n\r\n //private event handlers\r\n const onMouseMove = (mousePos, e) => {\r\n if (e.terminate && !state.mouseDown) {\r\n setHoveringOnlyShape(false);\r\n return setHovering(false);\r\n }\r\n if (isMouseOverShape(mousePos)) {\r\n //console.log(\"shape id\", this.id);\r\n if (self.onHover) {\r\n self.onHover(self);\r\n }\r\n // todo fix bumpout rotation and remove this\r\n if (sqftConfig.workspace.menuItemActive === \"rotate-left\") {\r\n //sqftEventManager.setCursor(\"rotate-left\", self);\r\n if (self.isWithBumpout() || self.isWithMitered()) {\r\n sqftEventManager.stealCursor(true);\r\n sqftEventManager.setCursor(\"deny\", self);\r\n }\r\n } else if (state.mouseDown && !sqftStore.getAllowEdges()) {\r\n sqftEventManager.setCursor('move', self, true);\r\n //todo\r\n //console.log(\"state.mouseDown\", state.mouseDown);\r\n moveShape(mousePos);\r\n hideShapeOffsetInTheSlabMode();\r\n } else if (!sqftStore.getAllowEdges()) {\r\n sqftEventManager.setCursor('move', self)\r\n }\r\n return state.mouseDown;\r\n }\r\n //smooth scrolling\r\n if (state.mouseDown && !sqftStore.getAllowEdges()) {\r\n sqftEventManager.setCursor('move', self, true);\r\n moveShape(mousePos);\r\n }\r\n // //smooth scrolling\r\n // if (state.mouseDown && !sqftStore.getAllowEdges()) {\r\n // sqftEventManager.setCursor('move', self, true);\r\n // moveShape(mousePos);\r\n // console.log(\"333\",);\r\n // }\r\n // //smooth scrolling\r\n // if (state.mouseDown && !sqftStore.getAllowEdges()) {\r\n // sqftEventManager.setCursor('move', self, true);\r\n // moveShape(mousePos);\r\n // }\r\n sqftEventManager.resetCursor(self);\r\n return false;\r\n }\r\n const onDblClick = (mousePos, e) => {\r\n void mousePos; void e;\r\n // if (state.hovering) {\r\n // this.setIsPointsMovable(!state.isPointsMovable);\r\n // }\r\n }\r\n const onMouseUp = (mousePos, e) => {\r\n void mousePos;\r\n void e;\r\n //debugger // eslint-disable-line no-debugger\r\n sqftEventManager.releaseStealLock(this);\r\n this.setIsPointsMovable(false);\r\n this.preventNegativeArea();\r\n if (this.isHovering()) {\r\n restoreShapeOffsetInTheSlabMode();\r\n this.shapeIntersections.handleSlabPlaceholderIntersections();\r\n if (state.mouseDown) {\r\n this.shapeAutoShuffle.handlePlaceShapeOnTheLine();\r\n }\r\n }\r\n state.mouseDown = false;\r\n state.mouseDownPosition = null;\r\n }\r\n\r\n const onMouseDown = (mousePos, e) => {\r\n void e;\r\n //if not then handle event with this object\r\n if (this.isHovering()) {\r\n // remove or add shape to selection\r\n if (e.shiftKey) {\r\n if (workspaceControllers.selectedShapes.isShapeSelected(this)) {\r\n workspaceControllers.selectedShapes.removeShapeFromSelection(this);\r\n } else {\r\n workspaceControllers.selectedShapes.addShapeToSelection(this);\r\n }\r\n }\r\n this.shapeMemory.rememberShapePosition();\r\n setShapeToShapeOffset();\r\n if (sqftEventManager.getCursor().indexOf(\"move\") >= 0) {\r\n state.mouseDown = true;\r\n state.mouseDownPosition = mousePos;\r\n }\r\n if (sqftConfig.highlight.rotateAngle) {\r\n // todo fix bumpout rotation and remove this\r\n if (self.isWithBumpout() || self.isWithMitered() || this.isPointsMoved || this.rotatedDegrees !== 0) {\r\n return\r\n }\r\n /////////////////////////////////////////\r\n\r\n self.rotateAngleParts.forEach((rotateAnglePart) => {\r\n if (rotateAnglePart.isHovered) {\r\n //todo\r\n self.setRotateAnglePartActive(rotateAnglePart);\r\n } else {\r\n rotateAnglePart.isActive = false;\r\n }\r\n });\r\n if (!self.rotateAngleParts.some(rotateAnglePart => rotateAnglePart.isActive)) {\r\n self.deActivateRotateAngle();\r\n }\r\n }\r\n\r\n if (this.partId !== SHAPE_PART_ID.slabPlaceHolder) { // seam not allowed to be added on slab placeholders\r\n const reduxState = store.getState();\r\n const activeButton = reduxState.sqftMenuState.activeButton;\r\n if (activeButton === SIDEBAR_SLAB_SEAM_BUTTONS.addSeamVertical) {\r\n this.shapeSlab.addSeamPieceVertical(mousePos);\r\n this.setIsPointsChanged(false); //prevent creating new backSplash shape if it was seamed\r\n } else if (activeButton === SIDEBAR_SLAB_SEAM_BUTTONS.addSeamHorizontal) {\r\n this.shapeSlab.addSeamPieceHorizontal(mousePos);\r\n this.setIsPointsChanged(false); //prevent creating new backSplash shape if it was seamed\r\n }\r\n }\r\n\r\n return true;\r\n }\r\n return false;\r\n }\r\n\r\n const hideShapeOffsetInTheSlabMode = () => {\r\n if (SqftStore.isSlabMode()) {\r\n const slabShapeOffset = SlabWorkspace.getShapeOffset();\r\n if (slabShapeOffset) {\r\n slabShapeOffset.hide();\r\n }\r\n }\r\n }\r\n\r\n const restoreShapeOffsetInTheSlabMode = () => {\r\n if (SqftStore.isSlabMode()) {\r\n const slabShapeOffset = SlabWorkspace.getShapeOffset();\r\n if (slabShapeOffset) {\r\n slabShapeOffset.restore();\r\n }\r\n }\r\n }\r\n\r\n const setShapeToShapeOffset = () => {\r\n const isSlabMode = SqftStore.isSlabMode();\r\n\r\n if (isSlabMode && this.partId !== SHAPE_PART_ID.slabPlaceHolder) {\r\n sqftSlabManager.initShapeOffset(this);\r\n }\r\n }\r\n\r\n function hideAngleTooltip() {\r\n const angleTooltip = document.getElementById(\"angle-tooltip\");\r\n const inputArrows = [].slice.call(document.querySelectorAll(\"#angle-tooltip [data-action]\"));\r\n // const inputSubmit = document.querySelectorAll('[data-action=\"angle-input-submit\"]');\r\n\r\n if (angleTooltip) {\r\n angleTooltip.style.display = \"none\";\r\n //remove event handlers\r\n inputArrows.forEach(function (elem) {\r\n elem.parentNode.replaceChild(elem.cloneNode(true), elem);\r\n });\r\n // inputSubmit[0].removeEventListener('click', self.deActivateRotateAngle);\r\n }\r\n }\r\n\r\n function hideAngleTooltipArrows (value) {\r\n const angleTooltip = document.getElementById(\"angle-tooltip\");\r\n const inputArrowUp = [].slice.call(angleTooltip.querySelectorAll('[data-action=\"angle-input-up\"]'));\r\n const inputArrowDown = [].slice.call(angleTooltip.querySelectorAll('[data-action=\"angle-input-down\"]'));\r\n\r\n inputArrowUp.forEach((button) => {\r\n if (value === minAngle) {\r\n button.style.display = \"none\";\r\n clearInterval(state.handlerHold);\r\n } else {\r\n button.style.display = \"block\";\r\n }\r\n });\r\n inputArrowDown.forEach((button) => {\r\n if (value === maxAngle) {\r\n button.style.display = \"none\";\r\n clearInterval(state.handlerHold);\r\n } else {\r\n button.style.display = \"block\";\r\n }\r\n });\r\n }\r\n //public functions\r\n\r\n /**\r\n * return array of getPointField for each point\r\n */\r\n this.getPointFieldArray = () => {\r\n let pointsArray = []\r\n for (const line of shape) {\r\n pointsArray.push(getPointField(line.from.x, line.from.y, line));\r\n }\r\n return pointsArray\r\n }\r\n this.preventNegativeArea = () => {\r\n if (this.getTotalArea() < 0) {\r\n this.reversePoints();\r\n const state = store.getState();\r\n const updateCalculations = state.sqftState.updateCalculations;\r\n\r\n store.dispatch(updateSQFTCalculations(updateCalculations + 1));\r\n }\r\n }\r\n this.reversePoints = () => {\r\n const reversedPoints = this.getPointCordsArray().reverse();\r\n shape.forEach((line, lineIndex) => {\r\n line.from.setPos({\r\n x: reversedPoints[lineIndex].x,\r\n y: reversedPoints[lineIndex].y\r\n });\r\n line.from.setPosSlab({\r\n x: reversedPoints[lineIndex].x,\r\n y: reversedPoints[lineIndex].y\r\n });\r\n });\r\n }\r\n this.getPointCordsArray = () => {\r\n let pointsArray = []\r\n for (const line of shape) {\r\n pointsArray.push({x: line.from.x, y: line.from.y});\r\n }\r\n return pointsArray\r\n }\r\n this.activateRotateAngle = function () {\r\n shape.forEach((line, lineIndex) => {\r\n for (const rotateAnglePart of self.rotateAngleParts) {\r\n if (this.isAngleRotatedPartsWithCorner(rotateAnglePart)) {\r\n continue;\r\n }\r\n if (lineIndex === rotateAnglePart.line1) {\r\n const parentPoint = (rotateAnglePart && rotateAnglePart.angleDirection === \"right\") ? line.from : line.to;\r\n parentPoint.renderAngleCircle = 18\r\n } else if (lineIndex === rotateAnglePart.line2) {\r\n const secondaryPoint = (rotateAnglePart && rotateAnglePart.angleDirection === \"right\") ? line.to : line.from;\r\n secondaryPoint.renderAngleCircle = 12;\r\n }\r\n // if (lineIndex === 1) { // this is rendering green arc\r\n // line.from.renderAngleArc = line.calculateRenderPosition(line.to).y - line.calculateRenderPosition(line.from).y;\r\n // }\r\n }\r\n })\r\n };\r\n this.deActivateRotateAngle = function() {\r\n self.rotateAngleParts.forEach((rotateAnglePart) => {\r\n rotateAnglePart.isActive = false;\r\n rotateAnglePart.isHovered = false;\r\n });\r\n\r\n hideAngleTooltip();\r\n };\r\n this.setRotateAnglePartActive = function (rotateAnglePart) {\r\n hideAngleTooltip(); // 1) deactivate previous anglePart\r\n rotateAnglePart.isActive = true; // 1) always highlight\r\n const angleTooltip = document.getElementById(\"angle-tooltip\");\r\n const input = document.getElementById(\"angle_input\");\r\n const inputArrowUp = [].slice.call(angleTooltip.querySelectorAll('[data-action=\"angle-input-up\"]'));\r\n const inputArrowDown = [].slice.call(angleTooltip.querySelectorAll('[data-action=\"angle-input-down\"]'));\r\n const inputArrows = inputArrowUp.concat(inputArrowDown);\r\n const inputSubmit = [].slice.call(angleTooltip.querySelectorAll(\"[data-action=\\\"angle-input-submit\\\"]\"));\r\n\r\n if (this.isAngleRotatedPartsWithCorner(rotateAnglePart)) {\r\n return;\r\n }\r\n input.setAttribute(\"min\", minAngle.toString());\r\n input.setAttribute(\"max\", maxAngle.toString());\r\n angleTooltip.style.display = \"flex\"; // 2) show input in sidebar\r\n\r\n // 3) set input value to current angle\r\n input.value = 90 - rotateAnglePart.rotatedAngleValue; // 90 - is made for displaying 90-0-90 rotation deg for input\r\n\r\n // input.value = getAngleValue(rotateAnglePart.rotatedAngleValue); // 3) set input value to current angle\r\n input.max = (rotateAnglePart && rotateAnglePart.shapeType === \"wideangle\" && rotateAnglePart && rotateAnglePart.angleDirection === \"right\") ? 90 : maxAngle; // 3.5 set input max\r\n input.min = (rotateAnglePart && rotateAnglePart.shapeType === \"wideangle\" && rotateAnglePart && rotateAnglePart.angleDirection === \"right\") ? 1 : minAngle; // 3.5 set input max\r\n hideAngleTooltipArrows(+input.value);\r\n\r\n setTimeout(() => {\r\n const expandedSidebar = document.querySelector(\".side.expanded\");\r\n if (expandedSidebar) {\r\n $(expandedSidebar).animate({scrollTop: $(expandedSidebar).height()}, 600); // 4) scroll to added input\r\n }\r\n }, 600);\r\n\r\n // 4) declare base points and bottom(moving) line\r\n const basePoint = (rotateAnglePart && rotateAnglePart.angleDirection === \"right\") ? shape[rotateAnglePart.line1].from : shape[rotateAnglePart.line1].to;\r\n const secondaryPoint = (rotateAnglePart && rotateAnglePart.angleDirection === \"right\") ? shape[rotateAnglePart.line2].to : shape[rotateAnglePart.line2].from;\r\n const bottomLine = (rotateAnglePart && rotateAnglePart.angleDirection === \"right\") ? shape[rotateAnglePart.line1 + 1] : shape[rotateAnglePart.line1 - 1];\r\n const secondaryLineLength = shape[rotateAnglePart.line2].getLineLength();\r\n //const nextLine = self.getNextLine(basePoint.getParent());\r\n var rotated90_1, rotated90_2;\r\n\r\n switch (rotateAnglePart.shapeType) {\r\n default:\r\n case \"wideangle\":\r\n case \"horseshoe\": {\r\n if (rotateAnglePart && rotateAnglePart.angleDirection === \"right\") {\r\n //console.log('RIGHT 90 Orient', bottomLine.getOrientation());\r\n //console.log('RIGHT newDirection', bottomLine.getLineDirection().newDirection);\r\n\r\n if (bottomLine.getLineDirection().newDirection === 'east') {\r\n rotated90_1 = {x: secondaryPoint.x - secondaryLineLength, y: basePoint.y};\r\n rotated90_2 = {x: secondaryPoint.x - secondaryLineLength, y: secondaryPoint.y};\r\n } else if (bottomLine.getLineDirection().newDirection === 'west') {\r\n rotated90_1 = {x: secondaryPoint.x + secondaryLineLength, y: basePoint.y};\r\n rotated90_2 = {x: secondaryPoint.x + secondaryLineLength, y: secondaryPoint.y};\r\n } else if (bottomLine.getLineDirection().newDirection === 'south') {\r\n rotated90_1 = {x: basePoint.x, y: secondaryPoint.y - secondaryLineLength};\r\n rotated90_2 = {x: secondaryPoint.x, y: secondaryPoint.y - secondaryLineLength};\r\n } else if (bottomLine.getLineDirection().newDirection === 'north') {\r\n rotated90_1 = {x: basePoint.x, y: secondaryPoint.y + secondaryLineLength};\r\n rotated90_2 = {x: secondaryPoint.x, y: secondaryPoint.y + secondaryLineLength};\r\n }\r\n\r\n } else {\r\n //console.log('LEFT 90 Orient', bottomLine.getOrientation());\r\n //console.log('LEFT newDirection', bottomLine.getLineDirection().newDirection);\r\n\r\n if (bottomLine.getLineDirection().newDirection === 'east') {\r\n rotated90_1 = {x: secondaryPoint.x + secondaryLineLength, y: secondaryPoint.y};\r\n rotated90_2 = {x: secondaryPoint.x + secondaryLineLength, y: basePoint.y};\r\n } else if (bottomLine.getLineDirection().newDirection === 'west') {\r\n rotated90_1 = {x: secondaryPoint.x - secondaryLineLength, y: secondaryPoint.y};\r\n rotated90_2 = {x: secondaryPoint.x - secondaryLineLength, y: basePoint.y};\r\n } else if (bottomLine.getLineDirection().newDirection === 'south') {\r\n rotated90_1 = {x: secondaryPoint.x, y: secondaryPoint.y + secondaryLineLength};\r\n rotated90_2 = {x: basePoint.x, y: secondaryPoint.y + secondaryLineLength};\r\n } else if (bottomLine.getLineDirection().newDirection === 'north') {\r\n rotated90_1 = {x: secondaryPoint.x, y: secondaryPoint.y - secondaryLineLength};\r\n rotated90_2 = {x: basePoint.x, y: secondaryPoint.y - secondaryLineLength};\r\n }\r\n }\r\n break;\r\n }\r\n }\r\n\r\n angleTooltip.style.left = basePoint.getPointField().x + \"px\";\r\n angleTooltip.style.top = basePoint.getPointField().y + \"px\";\r\n const ENTER_KEY = 13;\r\n // 5) set input handlers and focus it\r\n input.oninput = () => self.rotateAngleInputChange(input, rotateAnglePart, basePoint, secondaryPoint, rotated90_1, rotated90_2, bottomLine);\r\n input.focus();\r\n input.onkeydown = function(e) {\r\n if (e.keyCode === ENTER_KEY) {\r\n e.target.blur();\r\n }\r\n };\r\n function blur(e) {\r\n if (!$(e.target).closest('.ui-input')) {\r\n input.blur();\r\n }\r\n }\r\n input.onblur = function () {\r\n // window.lineInputFocused = false;\r\n // input.parentNode.removeChild(input);\r\n // document.removeEventListener(\"click\", blur);\r\n };\r\n\r\n // 6) set input up down and submit handlers\r\n let holdStarter;// This timeout, started on mousedown, triggers the beginning of a hold\r\n let holdDelay = 300; // This is how many milliseconds to wait before recognizing a hold\r\n let holdActive = false; // This flag indicates the user is currently holding the mouse down\r\n inputArrows.forEach(function (arrow) {\r\n let arrowMousedown = (e) => {\r\n e.stopPropagation();\r\n e.preventDefault();\r\n const isNegative = e.currentTarget.dataset.action === 'angle-input-down';\r\n\r\n holdStarter = setTimeout(function () {\r\n holdStarter = null;\r\n holdActive = true;\r\n\r\n state.handlerHold = setInterval(function () {\r\n if (holdActive) {\r\n handleArrowInputIncrease(isNegative, input, rotateAnglePart, basePoint, secondaryPoint, rotated90_1, rotated90_2, bottomLine);\r\n }\r\n }, 50);\r\n //console.log('Holding...')\r\n }, holdDelay);\r\n }\r\n let arrowMouseup = (e) => {\r\n if (holdStarter) {\r\n clearTimeout(holdStarter);\r\n\r\n const isNegative = e.currentTarget.dataset.action === 'angle-input-down';\r\n handleArrowInputIncrease(isNegative, input, rotateAnglePart, basePoint, secondaryPoint, rotated90_1, rotated90_2, bottomLine);\r\n //console.log('Clicked')\r\n }\r\n // Otherwise, if the mouse was being held, end the hold\r\n else if (holdActive) {\r\n holdActive = false;\r\n clearInterval(state.handlerHold);\r\n }\r\n };\r\n arrow.addEventListener('mousedown', arrowMousedown);\r\n arrow.addEventListener('mouseup', arrowMouseup);\r\n });\r\n inputSubmit[0].addEventListener('click', self.deActivateRotateAngle);\r\n\r\n setTimeout(() => {\r\n document.addEventListener(\"click\", blur);\r\n }, 500);\r\n };\r\n this.removeBumpouts = function () {\r\n for (var i = 0; i < shape.length; i++) {\r\n if (shape[i].bumpoutOverlay) {\r\n shape[i].deleteBumpout();\r\n }\r\n }\r\n };\r\n\r\n /**\r\n * remember base configuration before rotation (we will need it in onchange method, and after blur)\r\n **/\r\n this.setRotateAnglePartBaseConfiguration = (rotateAnglePart, basePoint, secondaryPoint, rotated90_1, rotated90_2, bottomLine) => {\r\n rotateAnglePart.baseConfiguration = {\r\n basePointX: basePoint.x,\r\n basePointX2: secondaryPoint.x,\r\n basePointY: basePoint.y,\r\n basePointY2: secondaryPoint.y,\r\n rotated90_1: rotated90_1,\r\n rotated90_2: rotated90_2,\r\n baseOldX: bottomLine.from.x,\r\n baseOldY: bottomLine.from.y,\r\n baseOldX1: bottomLine.to.x,\r\n baseOldY1: bottomLine.to.y,\r\n widthDiff: Math.abs(basePoint.y - secondaryPoint.y), // difference between basePointX and secondaryPointX, we need it to make bottom line straight\r\n };\r\n }\r\n\r\n /**\r\n * bottomLine - far line, rotating around centerPoint\r\n * basePoint - first point where rotation starts\r\n * secondaryPoint - second point where rotation starts\r\n **/\r\n this.rotateAngleInputChange = (input, rotateAnglePart, basePoint, secondaryPoint, rotated90_1Calc, rotated90_2Calc, bottomLine) => {\r\n if (!rotateAnglePart.baseConfiguration || rotateAnglePart.rotatedAngleValue === 0) {\r\n this.setRotateAnglePartBaseConfiguration(rotateAnglePart, basePoint, secondaryPoint, rotated90_1Calc, rotated90_2Calc, bottomLine)\r\n }\r\n\r\n let {\r\n basePointX, basePointX2, basePointY, basePointY2, baseOldX, baseOldY, baseOldX1, baseOldY1, widthDiff, rotated90_1, rotated90_2\r\n } = rotateAnglePart.baseConfiguration;\r\n if (input.value > +input.max) {\r\n input.value = +input.max;\r\n }\r\n if (input.value < +input.min) {\r\n input.value = +input.min;\r\n }\r\n\r\n // 90 - is set for 90-0-90\r\n let value = 90 - +input.value;\r\n\r\n hideAngleTooltipArrows(+input.value);\r\n\r\n self.rotateAngleParts.forEach((rotateAnglePart) => {\r\n if (rotateAnglePart.isActive) {\r\n rotateAnglePart.rotatedAngleValue = value\r\n }\r\n });\r\n const anglePercentage = Math.round(value * 100 / 90 * 100) / 100; // for example, 20deg = 22.2%\r\n const diffToMinus = Math.round(widthDiff * anglePercentage / 100 * 100) / 100; // for example, 26 * 45 / 100 = 11.7\r\n\r\n const pointToRotate1 = (value < 90) ? {x:baseOldX, y: baseOldY} : rotated90_1;\r\n const pointToRotate2 = (value < 90) ? {x:baseOldX1, y: baseOldY1} : rotated90_2;\r\n const angle = getAngle(rotateAnglePart, value);\r\n\r\n let rotationCenterPoint = getRotationCentrePoint(rotateAnglePart, value, bottomLine, basePoint, secondaryPoint);\r\n\r\n //console.log(angle);\r\n //console.log(rotationCenterPoint);\r\n //console.log(pointToRotate1);\r\n let rotated = rotatePoint(pointToRotate1, rotationCenterPoint, angle);\r\n let rotated2 = rotatePoint(pointToRotate2, rotationCenterPoint, angle);\r\n\r\n bottomLine.from.x = rotated.x;\r\n bottomLine.from.y = rotated.y;\r\n bottomLine.to.x = rotated2.x;\r\n bottomLine.to.y = rotated2.y;\r\n\r\n // change base points positions\r\n // var tempPoint = new point(rotationCenterPoint.x, rotationCenterPoint.y);\r\n // tempPoint.init(bottomLine);\r\n // tempPoint.layout = 'white-circle';\r\n\r\n switch (rotateAnglePart.shapeType) {\r\n case \"wideangle\":\r\n case \"horseshoe\":\r\n default: {\r\n //console.log('diffToMinus', diffToMinus)\r\n if (diffToMinus < widthDiff) {\r\n if (rotateAnglePart && rotateAnglePart.angleDirection === \"right\") {\r\n //console.log('RIGHT bottom Orient',bottomLine.getOrientation())\r\n switch (bottomLine.getOrientation()) {\r\n case orientation.HORIZONTAL: {\r\n basePoint.x = basePointX; secondaryPoint.x = basePointX2;\r\n break;\r\n }\r\n case orientation.VERTICAL: {\r\n basePoint.y = basePointY; secondaryPoint.y = basePointY2;\r\n break;\r\n }\r\n case orientation.SOUTHEAST: { basePoint.y = basePointY + diffToMinus; secondaryPoint.y = basePointY2;\r\n break;\r\n }\r\n case orientation.NORTHWEST: { basePoint.y = basePointY - diffToMinus; secondaryPoint.y = basePointY2;\r\n break;\r\n }\r\n case orientation.NORTHEAST: { basePoint.x = basePointX + diffToMinus; secondaryPoint.x = basePointX2;\r\n break;\r\n }\r\n case orientation.SOUTHWEST: { basePoint.x = basePointX - diffToMinus; secondaryPoint.x = basePointX2;\r\n break;\r\n }\r\n default:\r\n break;\r\n }\r\n } else {\r\n //console.log('LEFT bottom Orient',bottomLine.getOrientation())\r\n switch (bottomLine.getOrientation()) {\r\n case orientation.HORIZONTAL: { basePoint.x = basePointX; secondaryPoint.x = basePointX2;\r\n break;\r\n }\r\n case orientation.VERTICAL: { basePoint.y = basePointY; secondaryPoint.y = basePointY2;\r\n break;\r\n }\r\n case orientation.SOUTHEAST: { basePoint.x = basePointX - diffToMinus; secondaryPoint.x = basePointX2;\r\n break;\r\n }\r\n case orientation.NORTHWEST: { basePoint.x = basePointX + diffToMinus; secondaryPoint.x = basePointX2;\r\n break;\r\n }\r\n case orientation.NORTHEAST: { basePoint.y = basePointY + diffToMinus; secondaryPoint.y = basePointY2;\r\n break;\r\n }\r\n case orientation.SOUTHWEST: { basePoint.y = basePointY - diffToMinus; secondaryPoint.y = basePointY2;\r\n break;\r\n }\r\n default:\r\n break;\r\n }\r\n }\r\n //console.log('basePoint', basePoint);\r\n //console.log('secondaryPoint', secondaryPoint);\r\n } else {\r\n if (rotateAnglePart && rotateAnglePart.angleDirection === \"right\") {\r\n //console.log('RIGHT 90 Orient', bottomLine.getOrientation());\r\n switch (bottomLine.getOrientation()) {\r\n case orientation.HORIZONTAL:\r\n if (self.getNextLine(basePoint.getParent()).getLineDirection().orientation === \"vertical\"){\r\n basePoint.x = basePointX - widthDiff;\r\n secondaryPoint.x = basePointX2 - widthDiff;\r\n } else {\r\n if (bottomLine.getLineDirection().newDirection === \"east\"){\r\n if (self.getPrevLine(basePoint.getParent()).getLineDirection().orientation === \"vertical\"){\r\n basePoint.x = basePointX;\r\n secondaryPoint.x = basePointX2;\r\n } else {\r\n basePoint.x = basePointX - widthDiff;\r\n secondaryPoint.x = basePointX2 + widthDiff;\r\n }\r\n } else {\r\n if (self.getPrevLine(basePoint.getParent()).getLineDirection().orientation === \"vertical\"){\r\n basePoint.x = basePointX;\r\n secondaryPoint.x = basePointX2;\r\n } else {\r\n basePoint.x = basePointX + widthDiff;\r\n secondaryPoint.x = basePointX2 - widthDiff;\r\n }\r\n }\r\n }\r\n break;\r\n case orientation.VERTICAL:\r\n if (self.getNextLine(basePoint.getParent()).getLineDirection().orientation === \"vertical\") {\r\n if (bottomLine.getLineDirection().newDirection === \"north\") {\r\n if (self.getPrevLine(basePoint.getParent()).getLineDirection().orientation === \"horizontal\") {\r\n basePoint.y = basePointY;\r\n secondaryPoint.y = basePointY2;\r\n } else {\r\n basePoint.y = basePointY + widthDiff;\r\n secondaryPoint.y = basePointY2 - widthDiff;\r\n }\r\n } else {\r\n if (self.getPrevLine(basePoint.getParent()).getLineDirection().orientation === \"horizontal\") {\r\n basePoint.y = basePointY ;\r\n secondaryPoint.y = basePointY2 ;\r\n } else {\r\n basePoint.y = basePointY - widthDiff;\r\n secondaryPoint.y = basePointY2 + widthDiff;\r\n }\r\n }\r\n }\r\n break;\r\n case orientation.SOUTHEAST: {\r\n secondaryPoint.x = basePointX2 - widthDiff + diffToMinus;\r\n basePoint.x = basePointX - widthDiff;\r\n break;\r\n }\r\n case orientation.NORTHEAST: {\r\n secondaryPoint.y = basePointY2 + widthDiff - diffToMinus;\r\n basePoint.y = basePointY + widthDiff;\r\n break;\r\n }\r\n case orientation.SOUTHWEST: {\r\n secondaryPoint.x = basePointX2;\r\n basePoint.x = basePointX;\r\n basePoint.y = basePointY - widthDiff;\r\n secondaryPoint.y = basePointY2 - widthDiff + diffToMinus;\r\n break;\r\n }\r\n case orientation.NORTHWEST: {\r\n secondaryPoint.x = basePointX2 + widthDiff - diffToMinus;\r\n basePoint.x = basePointX + widthDiff;\r\n break;\r\n }\r\n default:\r\n break;\r\n }\r\n } else {\r\n //console.log('LEFT 90 Orient', bottomLine.getOrientation());\r\n switch (bottomLine.getOrientation()) {\r\n case orientation.HORIZONTAL:\r\n if (self.getNextLine(basePoint.getParent()).getLineDirection().orientation === \"vertical\"){\r\n if (bottomLine.getLineDirection().newDirection === \"west\"){\r\n basePoint.x = basePointX - widthDiff;\r\n secondaryPoint.x = basePointX2 + widthDiff;\r\n } else {\r\n basePoint.x = basePointX + widthDiff;\r\n secondaryPoint.x = basePointX2 - widthDiff;\r\n }\r\n } else {\r\n basePoint.x = basePointX;\r\n secondaryPoint.x = basePointX2;\r\n }\r\n break;\r\n case orientation.VERTICAL:\r\n if (self.getNextLine(basePoint.getParent()).getLineDirection().orientation === \"horizontal\"){\r\n if (bottomLine.getLineDirection().newDirection === \"south\") {\r\n basePoint.y = basePointY + widthDiff;\r\n secondaryPoint.y = basePointY2 - widthDiff;\r\n } else {\r\n basePoint.y = basePointY - widthDiff;\r\n secondaryPoint.y = basePointY2 + widthDiff;\r\n }\r\n }\r\n break;\r\n case orientation.SOUTHEAST: {\r\n basePoint.y = basePointY + widthDiff;\r\n secondaryPoint.y = basePointY2 + widthDiff - diffToMinus;\r\n break;\r\n }\r\n case orientation.NORTHEAST: {\r\n secondaryPoint.x = basePointX2 + widthDiff - diffToMinus;\r\n basePoint.x = basePointX + widthDiff;\r\n break;\r\n }\r\n case orientation.SOUTHWEST: {\r\n basePoint.x = basePointX - widthDiff ;\r\n secondaryPoint.x = basePointX2 - widthDiff + diffToMinus;\r\n break;\r\n }\r\n case orientation.NORTHWEST: {\r\n basePoint.y = basePointY - widthDiff;\r\n secondaryPoint.y = basePointY2 - widthDiff+ diffToMinus;\r\n break;\r\n }\r\n default:\r\n break;\r\n }\r\n }\r\n }\r\n }\r\n }\r\n // const pointDiff = Math.round(15 * anglePercentage) / 100; // points margin\r\n [basePoint, secondaryPoint].forEach(point => {\r\n if (point.arcLength || point.angle) {\r\n point.arcLength = 0;\r\n point.angle = 0;\r\n }\r\n // disallow points radiuses\r\n point.angleIsChanged = !!value; // keep if false when angle is 0\r\n point.rotateAnglePart = rotateAnglePart; // each point has a link on the whole rotated part\r\n });\r\n bottomLine.from.rotateAnglePart = rotateAnglePart;\r\n bottomLine.to.rotateAnglePart = rotateAnglePart;\r\n // bottomLine.from.pointDiff = pointDiff;\r\n // bottomLine.to.pointDiff = pointDiff;\r\n };\r\n this.getNextLine = (line, index, shouldSearchAmongLinesWithoutAngles) => {\r\n const lines = shouldSearchAmongLinesWithoutAngles ? this.getLinesWithoutAngle() : shape;\r\n index = index || lines.indexOf(line);\r\n let next = index + 1;\r\n if (index === lines.length - 1) {\r\n next = 0;\r\n }\r\n return lines[next];\r\n };\r\n this.getPrevLine = function(line, index) {\r\n index = index || shape.indexOf(line);\r\n var prev = index - 1;\r\n if (index === 0) {\r\n prev = shape.length - 1;\r\n }\r\n return shape[prev];\r\n };\r\n this.getAngleDirection = function(line) {\r\n var index = shape.indexOf(line);\r\n var lines = {\r\n line1: shape[index],\r\n line2: this.getNextLine(line, index),\r\n lineBefore: this.getPrevLine(line, index)\r\n };\r\n return getPointDirection(lines.line1.from, lines.line1.to, lines.line2.to, lines.lineBefore.from);\r\n };\r\n this.flip = function(flipDirection) {\r\n let i;\r\n switch(flipDirection) {\r\n case self.FlipDirection.HORIZONTAL:\r\n var max_y = 0;\r\n for (i = 0; i < shape.length; i++) {\r\n if (max_y < shape[i].from.y) {\r\n max_y = shape[i].from.y;\r\n }\r\n }\r\n for (i = 0; i < shape.length; i++) {\r\n shape[i].from.y = max_y - shape[i].from.y;\r\n }\r\n break;\r\n case self.FlipDirection.VERTICAL:\r\n var max_x = 0;\r\n for (i = 0; i < shape.length; i++) {\r\n if (max_x < shape[i].from.x) {\r\n max_x = shape[i].from.x;\r\n }\r\n }\r\n for (i = 0; i < shape.length; i++) {\r\n shape[i].from.x = max_x - shape[i].from.x;\r\n }\r\n break;\r\n }\r\n };\r\n this.rotate = function(degrees, direction, isSlabMode = false, aroundPoint = null) {\r\n // todo fix bumpout rotation and remove this\r\n // if (self.isWithBumpout() || self.isWithMitered()) {\r\n // return\r\n // }\r\n /////////////////////////////////////////\r\n isSlabMode ? this.rotatedDegreesSlab += degrees : this.rotatedDegrees += degrees;\r\n (this.rotatedDegrees === 360) && (this.rotatedDegrees = 0);\r\n (this.rotatedDegreesSlab === 360) && (this.rotatedDegreesSlab = 0);\r\n\r\n direction = direction || self.Direction.Right;\r\n let angle = (degrees * Math.PI / 180);\r\n if (direction === self.Direction.LEFT)\r\n angle *= -1;\r\n\r\n if (!aroundPoint) {\r\n aroundPoint = this.getCenter();\r\n }\r\n //console.log('degrees', degrees);\r\n //console.log('aroundPoint', aroundPoint);\r\n for (let i = 0; i < shape.length; i++) {\r\n shape[i].from.rotate(aroundPoint, angle, isSlabMode);\r\n }\r\n for (let i = 0; i < shape.length; i++) {\r\n let line1 = this.getAngleDirection(shape[i]),\r\n count = ((i - 1) < 0) ? shape.length - 1 : i - 1,\r\n line2 = this.getAngleDirection(shape[count]);\r\n\r\n shape[i].from.changeCornerDirection(line1, line2);\r\n }\r\n this.rotateShapeBumpoutPoints(aroundPoint, angle, isSlabMode); //todo\r\n if (this.shapeRotatable) {\r\n this.shapeRotatable.rotateShapeRotatablePoints(aroundPoint, angle, isSlabMode);\r\n }\r\n if (!isSlabMode) {\r\n this.setIsPointsChanged(true);\r\n }\r\n };\r\n this.rotateShapeBumpoutPoints = (aroundPoint, angle, isSlabMode) => {\r\n if (this.isWithBumpout()) {\r\n for (const line of this.getLines()) {\r\n if (line.isWithBumpout()) {\r\n const bumpoutPoints = line.bumpoutOverlay.getBumpoutPoints();\r\n for (const bumpoutPointsKey in bumpoutPoints) {\r\n if (bumpoutPoints.hasOwnProperty(bumpoutPointsKey)) {\r\n bumpoutPoints[bumpoutPointsKey].rotate(aroundPoint, angle, isSlabMode);\r\n }\r\n }\r\n }\r\n }\r\n }\r\n }\r\n this.setRotationDegrees = (rotationDegrees) => {\r\n this.rotatedDegrees = rotationDegrees\r\n }\r\n this.updateSlabPoints = () => {\r\n for (let i = 0; i < shape.length; i++) {\r\n shape[i].from.posSlab.x = JSON.parse(JSON.stringify(shape[i].from.pos.x));\r\n shape[i].from.posSlab.y = JSON.parse(JSON.stringify(shape[i].from.pos.y));\r\n if (shape[i].isWithBumpout()) {\r\n //this is used to reset additional bumpout shape\r\n SlabWorkspace.slabAdditionalShapes.removeActiveBacksplashByLine(shape[i]);\r\n\r\n //this is used to reset bumpoutPoints if they displayed with the line\r\n const bumpoutPoints = shape[i].bumpoutOverlay.getBumpoutPoints();\r\n for (let point in bumpoutPoints) {\r\n bumpoutPoints[point].posSlab = clone(bumpoutPoints[point].pos);\r\n }\r\n }\r\n }\r\n }\r\n this.updateSlabPosition = () => {\r\n this.setSlabPosition(this.pos);\r\n }\r\n this.init = (position, segments) => {\r\n if (position) {\r\n this.setPositionWithoutChange(position);\r\n this.setSlabPosition(position);\r\n }\r\n if (SHAPE_PART_IDS_VISIBLE_ONLY_IN_THE_SLAB_MODE.includes(this.partId)) {\r\n this.isPositionChanged = false;\r\n }\r\n\r\n if (segments)\r\n setShape(segments);\r\n\r\n // that hook is for resizing, perhaps we should rewrite resizing and remove this\r\n if (self.layout270.indexOf(this.fromLayout) !== -1) {\r\n self.rotatedDegrees = 270;\r\n }\r\n\r\n function getRandomInt(min, max) {\r\n return Math.floor(Math.random() * (max - min)) + min;\r\n }\r\n totalShapeCount && setFillColor(getRandomInt(0, 255), getRandomInt(0, 255), getRandomInt(0, 255), 0.3);\r\n this.initEvents(sqftEventManager);\r\n };\r\n this.getPriority = (eventManager) => {\r\n switch (this.partId) {\r\n case SHAPE_PART_ID.upper_cabinet_boxes: return eventManager.priorities.SHAPE_UPPER\r\n case SHAPE_PART_ID.slabPlaceHolder: return eventManager.priorities.SHAPE_SLAB_PLACEHOLDER\r\n default: return eventManager.priorities.SHAPE\r\n }\r\n }\r\n this.initEvents = (eventManager = sqftEventManager) => {\r\n eventManager.addEvent(\r\n eventManager.events.MOUSE_MOVE,\r\n onMouseMove,\r\n this,\r\n this.getPriority(eventManager)\r\n );\r\n eventManager.addEvent(\r\n eventManager.events.MOUSE_DOWN,\r\n onMouseDown,\r\n this,\r\n this.getPriority(eventManager)\r\n );\r\n eventManager.addEvent(\r\n eventManager.events.MOUSE_UP,\r\n onMouseUp,\r\n this,\r\n this.getPriority(eventManager)\r\n );\r\n eventManager.addEvent(\r\n eventManager.events.RENDER,\r\n this.render,\r\n this,\r\n this.getPriority(eventManager)\r\n );\r\n eventManager.addEvent(\r\n eventManager.events.DBLCLICK,\r\n onDblClick,\r\n this,\r\n this.getPriority(eventManager)\r\n );\r\n };\r\n this.resetState = () => {\r\n state.mouseDown = false;\r\n state.mouseDownPosition = null;\r\n state.hovering = false;\r\n state.handlerHold = null;\r\n };\r\n this.deregisterEvents = () => {\r\n sqftEventManager.removeEvent(this);\r\n this.resetState();\r\n this.isHidden = true;\r\n this.deregisterLineEvents();\r\n };\r\n this.deregisterLineEvents = () => {\r\n for (let i = 0; i < shape.length; i++) {\r\n shape[i].deregisterEvents();\r\n }\r\n };\r\n this.reInitLineTitleEvents = () => {\r\n for (let i = 0; i < shape.length; i++) {\r\n shape[i].reInitTitleEvents();\r\n }\r\n };\r\n this.reInitEvents = () => {\r\n if (this.isHidden) {\r\n this.initEvents(sqftEventManager);\r\n this.restoreState();\r\n this.isHidden = false;\r\n for (let i = 0; i < shape.length; i++) {\r\n shape[i].reInitEvents();\r\n }\r\n }\r\n };\r\n this.deregisterPartEvents = () => {\r\n for (let i = 0; i < shape.length; i++) {\r\n shape[i].deregisterPartEvents();\r\n }\r\n };\r\n this.reInitPartEvents = () => {\r\n for (let i = 0; i < shape.length; i++) {\r\n shape[i].reInitPartEvents();\r\n }\r\n };\r\n this.restoreState = () => {\r\n state = {\r\n mouseDown: false,\r\n mouseDownPosition: null,\r\n hovering: false,\r\n handlerHold: null\r\n };\r\n };\r\n this.destroy = (protect) => {\r\n if (!protect) {\r\n for (var i = 0; i < shape.length; i++) {\r\n shape[i].destroy();\r\n }\r\n if (this.shapeRotatable) {\r\n sqftShapeManager.disableRotatableState(this);\r\n }\r\n sqftEventManager.removeEvent(self);\r\n }\r\n };\r\n this.stealCursor = function(who) {\r\n for (var i = 0; i < shape.length; i++) {\r\n if (shape[i] === who) {\r\n sqftEventManager.resetCursor(self);\r\n }\r\n }\r\n };\r\n this.resetCursor = function() {\r\n sqftEventManager.resetCursor(self);\r\n };\r\n this.isShapeHasIntersections = () => {\r\n return shape.some(line => {\r\n return line.hasIntersections();\r\n })\r\n }\r\n this.renderAnglePartActive = function(rotateAnglePart, ctx) {\r\n ctx.save();\r\n ctx.beginPath();\r\n const rotateShape1 = getRotateAngleRectangle(rotateAnglePart);\r\n ctx.moveTo(rotateShape1[0][0], rotateShape1[0][1]);\r\n ctx.lineTo(rotateShape1[1][0], rotateShape1[1][1]);\r\n ctx.lineTo(rotateShape1[2][0], rotateShape1[2][1]);\r\n ctx.lineTo(rotateShape1[3][0], rotateShape1[3][1]);\r\n ctx.closePath();\r\n ctx.fillStyle = \"rgba(159, 198, 33, 0.5)\";\r\n ctx.fill();\r\n ctx.restore();\r\n };\r\n\r\n this.isAngleRotatedPartsWithCorner = (rotateAnglePart) => {\r\n let line1 = self.getPrevLine(shape[rotateAnglePart.line1]);\r\n let line2 = shape[rotateAnglePart.line2];\r\n\r\n if ((self.shapeType === \"horseshoe\" || self.shapeType === \"wideangle\")\r\n && rotateAnglePart.line1 > rotateAnglePart.line2\r\n ) {\r\n line1 = shape[rotateAnglePart.line1];\r\n line2 = self.getPrevLine(shape[rotateAnglePart.line2]);\r\n }\r\n\r\n return [line1, line2].some((line) => {\r\n return line.to.angle > 0 || line.to.arcLength > 0\r\n });\r\n }\r\n\r\n this.render = (ctx) => {\r\n this.shapeRender.render(ctx)\r\n }\r\n\r\n}\r\n","import $ from 'jquery';\r\nimport Config from '../config';\r\nimport {PhoneNumberUtil} from 'google-libphonenumber';\r\n\r\nexport default {\r\n bgImageUrl: function (imageUrl) {\r\n return 'url(\"' + imageUrl + '\")';\r\n },\r\n splitFilter: function (filter) {\r\n const res = {};\r\n filter.split('&').forEach(function (pair) {\r\n const ar = pair.split('=');\r\n res[ar[0]] = ar[1];\r\n });\r\n return res;\r\n },\r\n keysAndProps: function (obj) {\r\n const res = Object.keys(obj);\r\n console.log(res);\r\n for (let key in res) {\r\n const prop = obj[key];\r\n if (Array.isArray(prop)) {\r\n res.push(prop);\r\n }\r\n }\r\n\r\n return res;\r\n },\r\n isObject: function (val) {\r\n if (val === null) {\r\n return false;\r\n }\r\n return ( (typeof val === 'function') || (typeof val === 'object') );\r\n },\r\n\r\n imagePathCache: {},\r\n imagePath: function (image) {\r\n let path = this.imagePathCache[image];\r\n if (!path) {\r\n path =(Config.kioskStandAlone || document.kvConfig.dev ? './' : '/content/Views/kv/') + image;\r\n this.imagePathCache[image] = path;\r\n }\r\n\r\n return path;\r\n },\r\n /**\r\n * return the path without last part which is supposelly the file name\r\n * @param {string} path\r\n * @param {int} [count=1]\r\n */\r\n pathPrefix: function (path, count) {\r\n count = count || 1;\r\n while (count-- > 0) {\r\n const index = path.lastIndexOf(\"/\");\r\n if (index === -1) {\r\n return path;\r\n }\r\n\r\n path = path.substr(0, index);\r\n }\r\n\r\n return path;\r\n },\r\n\r\n /**\r\n * Converts a string to a boolean value\r\n * @param value\r\n */\r\n toBoolean: function (value) {\r\n if (typeof (value) === 'string') {\r\n value = value.toLowerCase();\r\n }\r\n switch (value) {\r\n case true:\r\n case \"true\":\r\n case 1:\r\n case \"1\":\r\n case \"on\":\r\n case \"yes\":\r\n return true;\r\n default:\r\n return false;\r\n }\r\n },\r\n\r\n convertKeysToCamelCase: function (obj) {\r\n if (!obj || typeof obj !== \"object\") {\r\n return null;\r\n }\r\n\r\n if (obj instanceof Array) {\r\n return $.map(obj, function (value) {\r\n return this.convertKeysToCamelCase(value);\r\n });\r\n }\r\n\r\n const newObj = {};\r\n $.each(obj, function (key, value) {\r\n key = key.charAt(0).toLowerCase() + key.slice(1);\r\n newObj[key] = value;\r\n });\r\n\r\n return newObj;\r\n },\r\n toCamel: function (o) {\r\n let build, key, destKey, value;\r\n\r\n if (o instanceof Array) {\r\n build = [];\r\n for (key in o) {\r\n value = o[key];\r\n\r\n if (typeof value === \"object\") {\r\n value = this.toCamel(value);\r\n }\r\n build.push(value);\r\n }\r\n } else {\r\n build = {};\r\n for (key in o) {\r\n if (o.hasOwnProperty(key)) {\r\n destKey = (key.charAt(0).toLowerCase() + key.slice(1) || key).toString();\r\n value = o[key];\r\n if (value !== null && typeof value === \"object\") {\r\n value = this.toCamel(value);\r\n }\r\n\r\n build[destKey] = value;\r\n }\r\n }\r\n }\r\n return build;\r\n },\r\n ignoreDefault: function (e) {\r\n e.stopPropagation();\r\n e.preventDefault();\r\n //e.nativeEvent.stopImmediatePropagation();\r\n },\r\n\r\n ignore: function (e, cb) {\r\n this.ignoreDefault(e);\r\n cb();\r\n },\r\n\r\n\r\n playVideo: function (id) {\r\n ///TODO: When Girl videos are updated remove \"|| true\"\r\n if (!document.kvConfig.kioskMode || Config.isQTEmbedded() || true) {\r\n return;\r\n }\r\n const $guide = $(id);\r\n if (!$guide.length) {\r\n return;\r\n }\r\n const guide = $guide[0];\r\n $guide.off('canplaythrough').on('canplaythrough', function () {\r\n $guide.show();\r\n guide.play();\r\n });\r\n guide.load();\r\n },\r\n hideVideo: function (id) {\r\n const $guide = $(id);\r\n if (!$guide.length) {\r\n return;\r\n }\r\n const guide = $guide[0];\r\n $guide.hide();\r\n guide.pause();\r\n },\r\n getIntroVideo: function (view) {\r\n const path = Config.kioskStandAlone ? \"./videos/video_guide/\" : 'https://s3.amazonaws.com/intro-videos/';\r\n switch (view) {\r\n case 'review':\r\n return path + 'Visualizer-Tools-Totals-25M.webm';\r\n case 'intro':\r\n return path + 'Kitchen-Visualizer-25M.webm';\r\n default:\r\n return '';\r\n }\r\n },\r\n exportCanvasAsPNG: function (canvasElement, fileName) {\r\n const MIME_TYPE = \"image/png\";\r\n let imgURL = canvasElement.toDataURL(MIME_TYPE);\r\n\r\n /* Change MIME type to trick the browser to download the file instead of displaying it */\r\n imgURL = imgURL.replace(/^data:image\\/[^;]*/, 'data:application/octet-stream');\r\n /* In addition to 's \"download\" attribute, you can define HTTP-style headers */\r\n //imgURL = imgURL.replace(/^data:application\\/octet-stream/, 'data:application/octet-stream;headers=Content-Disposition%3A%20attachment%3B%20filename=' + fileName);\r\n\r\n const dlLink = document.createElement('a');\r\n dlLink.download = fileName;\r\n dlLink.href = imgURL;\r\n dlLink.dataset.downloadurl = [MIME_TYPE, dlLink.download, dlLink.href].join(':');\r\n\r\n document.body.appendChild(dlLink);\r\n dlLink.click();\r\n document.body.removeChild(dlLink);\r\n },\r\n monads: {\r\n ifNotNull: function (o, notNullCallback) {\r\n if (o) {\r\n return notNullCallback(o);\r\n }\r\n\r\n return null;\r\n }\r\n },\r\n pnpoly: function( points, test ) {\r\n var i, j, c = false;\r\n for( i = 0, j = points.length-1; i < points.length; j = i++ ) {\r\n if( ( ( points[i].y > test.y ) != ( points[j].y > test.y ) ) &&\r\n ( test.x < ( points[j].x - points[i].x ) * ( test.y - points[i].y ) / ( points[j].y - points[i].y ) + points[i].x ) ) {\r\n c = !c;\r\n }\r\n }\r\n return c;\r\n },\r\n isEmail: function (email) {\r\n if (!email || email.indexOf('@') === -1) {\r\n return false;\r\n }\r\n\r\n // eslint-disable-next-line no-useless-escape\r\n const re = /^(([^<>()\\[\\]\\\\.,;:\\s@\"]+(\\.[^<>()\\[\\]\\\\.,;:\\s@\"]+)*)|(\".+\"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$/i;\r\n return re.test(email);\r\n },\r\n isZip: function (zip) {\r\n const regex = /[a-zA-Z0-9][a-zA-Z0-9\\- ]{0,10}[a-zA-Z0-9]/;\r\n // const regex = /(^\\d{5}(?:[\\s]?[-\\s][\\s]?\\d{4})?$)/; // this on can not support H3H 2H2, which is real Quebec code\r\n return regex.test(zip);\r\n },\r\n // isPhoneNumber: function (phone) {\r\n // if (!phone) {\r\n // return false;\r\n // }\r\n // const count = phone.replace(/[^0-9]/g, \"\").length;\r\n // return count === 10 || count === 11;\r\n // },\r\n isPhoneNumber: function (phone, region) {\r\n region = region || \"US\";\r\n const phoneUtil = PhoneNumberUtil.getInstance();\r\n try {\r\n if (phone) {\r\n const parsedPhone = phoneUtil.parse(phone, region);\r\n return phoneUtil.isPossibleNumber(parsedPhone) && phoneUtil.isValidNumberForRegion(parsedPhone, region); // /^\\+?\\d{10,16}$/.test(phone);\r\n }\r\n return false;\r\n } catch(ex) {\r\n return false;\r\n }\r\n },\r\n getPhoneFormatted: (phone, region) => {\r\n region = region || \"US\";\r\n const phoneUtil = PhoneNumberUtil.getInstance();\r\n try {\r\n if (phone) {\r\n const parsedPhone = phoneUtil.parse(phone, region);\r\n return phoneUtil.formatInOriginalFormat(parsedPhone, region);\r\n }\r\n } catch(ex) {\r\n console.log(ex);\r\n }\r\n return phone;\r\n },\r\n getUserPhoneSplitted: (phone, oldCountry = \"\") => {\r\n const googlePhouneUtilInstance = PhoneNumberUtil.getInstance();\r\n if (Config.isDevMode()) {\r\n console.log(\"googlePhouneUtilInstance\", googlePhouneUtilInstance);\r\n }\r\n const allRegions = googlePhouneUtilInstance.getSupportedRegions();\r\n // console.log(\"allRegions\", allRegions);\r\n try {\r\n const parsedPhone = googlePhouneUtilInstance.parse(phone);\r\n // if (Config.isDevMode()) {\r\n // console.log(\"parsedPhone\", parsedPhone);\r\n // }\r\n const phoneCountry = oldCountry && allRegions.includes(oldCountry)\r\n && googlePhouneUtilInstance.isValidNumberForRegion(parsedPhone, oldCountry)\r\n ? oldCountry\r\n : allRegions.find(regionCode => googlePhouneUtilInstance.isValidNumberForRegion(parsedPhone, regionCode)) || \"\"\r\n // console.log(\"phoneCountry\", phoneCountry);\r\n return {\r\n country: {\r\n dialCode: \"\" + parsedPhone.getCountryCode(),\r\n iso2: phoneCountry.toLowerCase()\r\n },\r\n phoneNumber: \"\" + parsedPhone.getNationalNumber() // we keep it as as string\r\n }\r\n } catch (ex) {\r\n if (Config.isDevMode()) {\r\n console.log(\"couldn't parse the phone\", phone);\r\n }\r\n }\r\n const phoneSplitted = phone ? phone.match(/(\\+(\\d.*?)\\s)?(.*)/) : [];\r\n return {\r\n phoneNumber: phoneSplitted[3] || phone || \"\"\r\n }\r\n },\r\n parseUserResponse: function(responseData, oldCountry = \"\") {\r\n const {phoneNumber, country} = this.getUserPhoneSplitted(responseData.values.phone, oldCountry || responseData.values.country || \"\");\r\n const newUserInfo = {\r\n email: responseData.email,\r\n firstName: responseData.values.firstName,\r\n lastName: responseData.values.lastName,\r\n phoneNumber,\r\n postal: responseData.values.postal,\r\n isNew: false,\r\n password: \"\"\r\n };\r\n if (country) {\r\n newUserInfo.country = country;\r\n }\r\n [\"address1\", \"address2\", \"firstName\", \"lastName\", \"postal\", \"city\", \"provence\"].forEach(key => {\r\n if (responseData.values && responseData.values[key]) {\r\n const realKey = (key === \"provence\") ? \"state\" : key;\r\n newUserInfo[realKey] = responseData.values[key] === \"N/A\" ? \"\" : responseData.values[key]\r\n }\r\n })\r\n return newUserInfo\r\n },\r\n parseShippingAndBillingResponse: function(responseData) {\r\n const {billingAddress, shippingAddress, billingSameAsShipping} = responseData;\r\n return {\r\n shippingAddress: {\r\n fullName: shippingAddress ? shippingAddress.name : \"\",\r\n address1: shippingAddress ? shippingAddress.address1 : \"\",\r\n address2: shippingAddress ? shippingAddress.address2 : \"\",\r\n city: shippingAddress ? shippingAddress.city : \"\",\r\n state: shippingAddress ? shippingAddress.state : \"\",\r\n postal: shippingAddress ? shippingAddress.zip : \"\"\r\n },\r\n billingAddress: {\r\n fullName: billingAddress ? billingAddress.name : \"\",\r\n address1: billingAddress ? billingAddress.address1 : \"\",\r\n address2: billingAddress ? billingAddress.address2 : \"\",\r\n city: billingAddress ? billingAddress.city : \"\",\r\n state: billingAddress ? billingAddress.state : \"\",\r\n postal: billingAddress ? billingAddress.zip : \"\"\r\n },\r\n billingSameAsShipping: !!billingSameAsShipping, // in case it comes undefined\r\n }\r\n },\r\n isMobile: () => {\r\n return (/(android|bb\\d+|meego).+mobile|avantgo|bada\\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(navigator.userAgent)\r\n // eslint-disable-next-line no-useless-escape\r\n || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\\-(n|u)|c55\\/|capi|ccwa|cdm\\-|cell|chtm|cldc|cmd\\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\\-s|devi|dica|dmob|do(c|p)o|ds(12|\\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\\-|_)|g1 u|g560|gene|gf\\-5|g\\-mo|go(\\.w|od)|gr(ad|un)|haie|hcit|hd\\-(m|p|t)|hei\\-|hi(pt|ta)|hp( i|ip)|hs\\-c|ht(c(\\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\\-(20|go|ma)|i230|iac( |\\-|\\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\\/)|klon|kpt |kwc\\-|kyo(c|k)|le(no|xi)|lg( g|\\/(k|l|u)|50|54|\\-[a-w])|libw|lynx|m1\\-w|m3ga|m50\\/|ma(te|ui|xo)|mc(01|21|ca)|m\\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\\-2|po(ck|rt|se)|prox|psio|pt\\-g|qa\\-a|qc(07|12|21|32|60|\\-[2-7]|i\\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\\-|oo|p\\-)|sdk\\/|se(c(\\-|0|1)|47|mc|nd|ri)|sgh\\-|shar|sie(\\-|m)|sk\\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\\-|v\\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\\-|tdg\\-|tel(i|m)|tim\\-|t\\-mo|to(pl|sh)|ts(70|m\\-|m3|m5)|tx\\-9|up(\\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\\-|your|zeto|zte\\-/i.test(navigator.userAgent.substr(0, 4)))\r\n },\r\n getRandomInt(min, max) {\r\n return Math.floor(Math.random() * (max - min)) + min;\r\n },\r\n /**\r\n * Checks input value on errors, returns all errors array\r\n * @param currentValue {string|number}\r\n * @param property {string}\r\n * @param fabricatorData {object}\r\n * @returns {array}\r\n */\r\n getValidationErrors(currentValue, property, fabricatorData) {\r\n const errors = [];\r\n\r\n if (fabricatorData.isCaesarStone) {\r\n switch (property) {\r\n case \"lastName\": {\r\n if (!currentValue) {\r\n errors.push(\"assignPopup.errors.fieldRequired\");\r\n return errors\r\n }\r\n if (currentValue.length === 1) {\r\n errors.push(\"assignPopup.errors.shortName\");\r\n } else if (currentValue.length > 50) {\r\n errors.push(\"assignPopup.errors.longName\");\r\n }\r\n if (!/^[A-Z\\s\\'\\-\\&\\.a-z]+$/.test(currentValue)) {\r\n errors.push(\"assignPopup.errors.nameIsIncorrect\");\r\n }\r\n break;\r\n }\r\n case \"city\":\r\n case \"state\": {\r\n if (!currentValue) {\r\n errors.push(\"assignPopup.errors.fieldRequired\");\r\n return errors\r\n }\r\n break;\r\n }\r\n }\r\n return errors\r\n }\r\n\r\n switch (property) {\r\n case \"firstName\": {\r\n if (!currentValue) {\r\n errors.push(\"assignPopup.errors.fieldRequired\");\r\n return errors\r\n }\r\n if (currentValue.length === 1) {\r\n errors.push(\"assignPopup.errors.shortName\");\r\n } else if (currentValue.length > 50) {\r\n errors.push(\"assignPopup.errors.longName\");\r\n }\r\n if (!/^[A-Z\\s\\'\\-\\&\\.a-z]+$/.test(currentValue)) {\r\n errors.push(\"assignPopup.errors.nameIsIncorrect\");\r\n }\r\n break;\r\n }\r\n case \"email\": {\r\n if (!currentValue) {\r\n errors.push(\"assignPopup.errors.fieldRequired\");\r\n return errors\r\n }\r\n if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\\.[A-Z]{2,4}$/i.test(currentValue)) {\r\n errors.push(\"assignPopup.errors.invalidEmail\");\r\n }\r\n break;\r\n }\r\n case \"phoneNumber\": {\r\n if (!currentValue) {\r\n errors.push(\"assignPopup.errors.fieldRequired\");\r\n return errors\r\n }\r\n // we have another check, isPhoneNumber\r\n // if (!/^[\\+]?[(]?[0-9]{3}[)]?[-\\s\\.]?[0-9]{3}[-\\s\\.]?[0-9]{4,6}$/.test(currentValue)) {\r\n // errors.push(\"assignPopup.errors.invalidEmail\");\r\n // }\r\n break;\r\n }\r\n case \"postal\": {\r\n if (!currentValue) {\r\n errors.push(\"assignPopup.errors.fieldRequired\");\r\n return errors\r\n }\r\n if (!this.isZip(currentValue)) {\r\n errors.push(\"assignPopup.errors.incorrectPostal\");\r\n return errors\r\n }\r\n break;\r\n }\r\n case \"phone2\": {\r\n if (currentValue.length > 20) {\r\n errors.push(\"assignPopup.errors.phoneNumberIsTooLong\");\r\n }\r\n break;\r\n }\r\n }\r\n return errors\r\n },\r\n hasErrors: (errorsObject) => {\r\n return !!(Object.keys(errorsObject).length && Object.keys(errorsObject).some(key => errorsObject[key] && errorsObject[key].length))\r\n },\r\n textSubStringEllipsis: (text, length) => {\r\n if (!text || !length || (text.length < length)) {\r\n return text || \"\"\r\n }\r\n return text.substring(0, length) + \"...\"\r\n },\r\n getUrlFromString: (text) => {\r\n if (!text) {\r\n return \"\"\r\n }\r\n return text.toLowerCase().replace(/ /g, \"-\")\r\n }\r\n};\r\n\r\n","import {hashHistory} from \"react-router\";\r\n\r\nimport store from \"../store\";\r\nimport * as types from \"../actions/actionTypes\";\r\nimport {\r\n hideUserPopup,\r\n changeMessageBoxState,\r\n} from \"../actions/actionFunctions\";\r\nimport {\r\n setAfterContractSignCallback\r\n} from \"../actions/contractsActions\";\r\nimport {loaderDisable, loaderEnable} from \"../bvcomponents/ui/loaderView\";\r\nimport JsonApi from \"./jsonApi\";\r\nimport {IS_OFFLINE_MODE} from \"../config\";\r\nimport {shouldUseContractSigning} from \"../bvcomponents/popups/contractSign/contractsFunctions\";\r\nimport {ROUTES} from \"../routes\";\r\n\r\nconst _checkNetworkErrorMessage = (message) => {\r\n // includes, because it can be \"Network Error\" or \"Server Error: Error: Network Error\"\r\n return message && (message === \"Network Error\" || (message.includes && message.includes(\"Network Error\"))\r\n || (message.message && message.message.includes(\"Network Error\"))) && IS_OFFLINE_MODE\r\n}\r\n\r\n/**\r\n * renderErrorPopup can display retry connection and sign contract buttons\r\n * @param message {string}\r\n * @param title {string}\r\n * @param retryConnectionFunction {function}\r\n * @param showContractSignOnError {boolean}\r\n * @param closeButtonCallback {function}\r\n * @param afterContractSignCallback {function}\r\n */\r\nexport const renderErrorPopup = (message,\r\n title = \"messageBox.defaultTitle\",\r\n retryConnectionFunction = null,\r\n showContractSignOnError = false,\r\n closeButtonCallback = null,\r\n afterContractSignCallback = null) => {\r\n if (_checkNetworkErrorMessage(message)) {\r\n message = \"noInternetText\";\r\n title = \"noInternetTitle\";\r\n }\r\n const closeMessageBox = () => {\r\n store.dispatch(changeMessageBoxState({\r\n visible: false,\r\n }));\r\n }\r\n const buttons = [{\r\n text: message === \"noInternetText\" ? \"messageBox.closeButton\" : \"messageBox.buttonOk\",\r\n color: message === \"noInternetText\" ? \"blue\" : \"red\",\r\n click: () => {\r\n closeMessageBox();\r\n if (closeButtonCallback) {\r\n closeButtonCallback()\r\n }\r\n }\r\n }];\r\n if (message === \"noInternetText\") {\r\n if (showContractSignOnError) {\r\n const {fabricatorState, contractSigningState} = store.getState();\r\n const needContractSignDocument = IS_OFFLINE_MODE\r\n && shouldUseContractSigning(fabricatorState.settings, contractSigningState.contractsList);\r\n if (needContractSignDocument) {\r\n buttons.push({\r\n text: \"messageBox.fillContract\",\r\n color: \"green\",\r\n click: () => {\r\n closeMessageBox();\r\n // store.dispatch(showContractSigning(true, () => {}));\r\n if (afterContractSignCallback) {\r\n store.dispatch(setAfterContractSignCallback(afterContractSignCallback))\r\n }\r\n hashHistory.push(ROUTES.contract);\r\n }\r\n })\r\n }\r\n }\r\n if (retryConnectionFunction) {\r\n buttons.push({\r\n text: \"messageBox.retryConnection\",\r\n color: \"green\",\r\n click: () => {\r\n closeMessageBox();\r\n retryConnectionFunction();\r\n }\r\n })\r\n }\r\n }\r\n store.dispatch({\r\n type: types.CHANGE_MESSAGE_BOX,\r\n payload: {\r\n visible: true,\r\n title,\r\n message,\r\n error: message !== \"noInternetText\",\r\n newStyles: true,\r\n buttons\r\n }\r\n });\r\n};\r\n\r\nexport const renderMessagePopup = (message) => {\r\n let title = \"messageBox.defaultTitle\";\r\n if (_checkNetworkErrorMessage(message)) {\r\n message = \"noInternetText\";\r\n title = \"noInternetTitle\";\r\n }\r\n store.dispatch({\r\n type: types.CHANGE_MESSAGE_BOX,\r\n payload: {\r\n visible: true,\r\n title,\r\n message,\r\n error: false,\r\n inline: false,\r\n buttons: [{\r\n text: \"messageBox.buttonOk\",\r\n color: \"blue\",\r\n click: () => {\r\n store.dispatch({\r\n type: types.CHANGE_MESSAGE_BOX,\r\n payload: {\r\n visible: false,\r\n }\r\n });\r\n }\r\n }]\r\n }\r\n });\r\n};\r\n\r\nexport const renderAccountNotActivatedErrorPopup = (message, email) => {\r\n store.dispatch({\r\n type: types.CHANGE_MESSAGE_BOX,\r\n payload: {\r\n visible: true,\r\n message,\r\n error: true,\r\n inline: false,\r\n buttons: [{\r\n text: \"userPopup.messageBox.resendActivationEmailText\",\r\n color: \"green\",\r\n click: () => {\r\n store.dispatch(hideUserPopup());\r\n loaderEnable(\"loader.resendActivationLinkText\");\r\n JsonApi.resendActivationEmail(email)\r\n .then(() => {\r\n loaderDisable();\r\n renderMessagePopup(\"userPopup.messageBox.resendActivationEmailSuccess\");\r\n });\r\n }\r\n }, {\r\n text: \"messageBox.buttonOk\",\r\n color: \"red\",\r\n click: () => {\r\n store.dispatch(hideUserPopup());\r\n }\r\n }]\r\n }\r\n })\r\n};\r\n\r\nexport const renderConfirmPopup = (confirmPopupType, tag, confirmPopupOpened = true) => {\r\n store.dispatch({\r\n type: types.TOGGLE_CONFIRM_POPUP,\r\n payload: {\r\n confirmPopupOpened,\r\n confirmPopupType,\r\n confirmPopupTag: {...tag}\r\n }\r\n });\r\n};\r\n","import uuid from \"uuid\";\r\n\r\nimport * as types from './actionTypes';\r\nimport {clearCart, setJobId} from \"./actionFunctions\";\r\nimport {setReceiptUrl} from \"./printFunctions\";\r\nimport {setAmazonImageUrl} from \"./serverFunctions\";\r\nimport {setWizardSelectedValues} from \"../visit/wizardLogic/wizardActions\";\r\nimport {setWizardActiveStep, updateAllWizardValues} from \"./wizardFunctions\";\r\nimport {setActiveQuoteIndex, setQuotes} from \"./roomsFunctions\";\r\n\r\nexport const showOrderCompletePopup = (orderCompletePopupVisible) => ({\r\n type: types.SHOW_ORDER_COMPLETE_POPUP,\r\n payload: {orderCompletePopupVisible}\r\n})\r\n\r\nexport const toggleShowMobileQuotes = (showMobileQuotes) => ({\r\n type: types.TOGGLE_SHOW_MOBILE_QUOTES,\r\n payload: {showMobileQuotes}\r\n})\r\n\r\nexport const toggleShowAllQuotesCartItemsList = (showAllQuotesCartItemsList) => ({\r\n type: types.TOGGLE_SHOW_ALL_QUOTES_CART_ITEMS_LIST,\r\n payload: {showAllQuotesCartItemsList}\r\n})\r\n\r\nexport const getMinimumChargeCartItem = (fromCartItem, onlyMinimum = false, quantity = 1) => {\r\n const {selectionGroup, partId, currentQuote, } = fromCartItem;\r\n const newDbFeature = Object.assign({}, fromCartItem.cartFeature.dbFeature, {\r\n id: 1,\r\n customDisplayName: \"additionalCartItem.minimumCharge\",\r\n displayName: \"additionalCartItem.minimumCharge\",\r\n sharedFeatureName: \"additionalCartItem.minimumCharge\",\r\n });\r\n if (onlyMinimum) {\r\n newDbFeature.cost = 375;\r\n newDbFeature.costplus = 375;\r\n newDbFeature.stonePricingId = null;\r\n }\r\n let minCartItem = {\r\n id: uuid.v4(),\r\n isEmpty: false,\r\n isMinimumCharge: true,\r\n isMinimumChargeItems: !onlyMinimum,\r\n selectionGroup,\r\n partId,\r\n currentQuote,\r\n quantity,\r\n cartFeature: Object.assign({}, fromCartItem.cartFeature, {\r\n fromFeatureName: fromCartItem.cartFeature.getFeatureName(),\r\n partName: \"additionalCartItem.minimumCharge\",\r\n _customDisplayName: \"additionalCartItem.minimumCharge\",\r\n _countertopGroupsCustomDisplayName: \"additionalCartItem.minimumCharge\",\r\n metaData: {},\r\n notesList: {},\r\n getCountertopGroupsSplittedFeatureName: function () {\r\n return this.partName\r\n },\r\n getSplittedFeatureName: function () {\r\n return this.partName\r\n },\r\n getFeatureName: function () {\r\n return this.partName\r\n },\r\n dbFeature: newDbFeature,\r\n })\r\n }\r\n if (fromCartItem.fromWizardId || minCartItem.fromWizardGroupId) { // just in case fromWizardId is 0\r\n minCartItem.fromWizardId = fromCartItem.fromWizardId; // this is needed to prevent showing minimum cart item ↓\r\n minCartItem.fromWizardStep = fromCartItem.fromWizardStep; // in different wizards in advanced quoting ↓\r\n minCartItem.fromWizardGroupId = fromCartItem.fromWizardGroupId; // for the same groups\r\n }\r\n return minCartItem\r\n};\r\n\r\nexport const setCartFooterActiveButtonIndex = (cartFooterActiveButtonIndex) => ({\r\n type: types.SET_CART_FOOTER_ACTIVE_BUTTON_INDEX,\r\n payload: {cartFooterActiveButtonIndex}\r\n})\r\n\r\nexport const setCartItemEditFeature = (cartItemEditFeature) => ({\r\n type: types.SET_CART_ITEM_EDIT_FEATURE,\r\n payload: {cartItemEditFeature}\r\n})\r\n\r\nexport const setLookRemovedCartItems = (lookRemovedCartItems) => ({\r\n type: types.SET_LOOK_REMOVED_CART_ITEMS,\r\n payload: {lookRemovedCartItems}\r\n})\r\n\r\nexport const setCItemsAddedToParentCart = (cartItems) => ({\r\n type: types.SET_CART_ITEMS_ADDED_TO_PARENT_CART,\r\n payload: {cartItems}\r\n})\r\n\r\nexport const changeAllCartItems = (cartItems) => ({\r\n type: types.CHANGE_ALL_CART_ITEMS,\r\n payload: {cartItems}\r\n})\r\n\r\nexport const setSureTax = (sureTax) => ({\r\n type: types.SET_SURE_TAX,\r\n payload: {sureTax}\r\n});\r\nexport const setSureTaxLoading = (sureTaxLoading) => ({\r\n type: types.SET_SURE_TAX_LOADING,\r\n payload: {sureTaxLoading}\r\n});\r\nexport const setDeliveryList = (deliveryList) => ({\r\n type: types.SET_DELIVERY_LIST,\r\n payload: {deliveryList}\r\n});\r\n\r\nexport const clearCartAndStartOver = (fullClear = false) => {\r\n return (dispatch) => {\r\n if (fullClear) {\r\n dispatch(setWizardSelectedValues({}, true));\r\n dispatch(setWizardActiveStep(0));\r\n dispatch(updateAllWizardValues([]));\r\n dispatch(setActiveQuoteIndex(0));\r\n dispatch(setQuotes([{}]));\r\n }\r\n dispatch(clearCart()); // clear cart\r\n dispatch(setReceiptUrl(\"\")); // clear receipt\r\n dispatch(setAmazonImageUrl(\"\")); // not sure if it is needed here, but let it be\r\n dispatch(setJobId(0)); // erase current job\r\n document.kvConfig.jobId = null; // erase current job\r\n }\r\n};\r\n\r\nexport const setManualTax = (manualTax) => ({\r\n type: types.SET_MANUAL_TAX,\r\n payload: {manualTax}\r\n});\r\n\r\nexport const setMarkUpLogic = (markUpLogic) => ({\r\n type: types.SET_MARK_UP_LOGIC,\r\n payload: {markUpLogic}\r\n});\r\n\r\n","import orderBy from \"lodash/orderBy\";\r\nimport {Part} from \"../part\";\r\nimport {PartMenuType} from \"../../../visComponents/constants\";\r\nimport {cabinetThumbnail} from \"../assets\";\r\nimport DesignNavigationItem from \"../../../visComponents/designNavigationItem\";\r\n\r\nimport BottomCabinet from \"../subparts/cabinet/bottomCabinet\";\r\nimport TopCabinet from \"../subparts/cabinet/topCabinet\";\r\nimport CrownMolding from \"../subparts/cabinet/crownMolding\";\r\nimport TopHandle from \"../subparts/cabinet/topHandle\";\r\nimport BottomHandle from \"../subparts/cabinet/bottomHandle\";\r\nimport TopCabinetShadow from \"../subparts/cabinet/topCabinetShadow\";\r\nimport BottomCabinetShadow from \"../subparts/cabinet/bottomCabinetShadow\";\r\n\r\nexport default class Cabinet extends Part {\r\n static id = 'Cabinet';\r\n constructor() {\r\n super(true, false, PartMenuType.Complex);\r\n\r\n this.menuType = PartMenuType.Complex;\r\n this.partName = 'Cabinet';\r\n this.partThumbnail = cabinetThumbnail;\r\n this.partThumbnailSize = \"70%\";\r\n this.translateId = \"visualizer.kitchen.cabinet\";\r\n\r\n // related items\r\n this.topCabinet = null;\r\n this.bottomCabinet = null;\r\n this.crownMolding = null;\r\n this.topHandle = null;\r\n this.bottomHandle = null;\r\n this.topCabinetShadow = null;\r\n this.bottomCabinetShadow = null;\r\n }\r\n\r\n load(dbFeature) {\r\n let relatedItemName = \"\",\r\n RelatedItemClass = null;\r\n switch (dbFeature.groupName) {\r\n case \"Bottom Cabinet\":\r\n relatedItemName = \"bottomCabinet\";\r\n RelatedItemClass = BottomCabinet;\r\n break;\r\n case \"Top Cabinet\":\r\n relatedItemName = \"topCabinet\";\r\n RelatedItemClass = TopCabinet;\r\n break;\r\n case \"Crown Molding\":\r\n relatedItemName = \"crownMolding\";\r\n RelatedItemClass = CrownMolding;\r\n // if (dbFeature.metaData && dbFeature.metaData[\"Parts\"]) {\r\n // relatedItemName = \"crownMolding\";\r\n // RelatedItemClass = CrownMolding;\r\n // }\r\n break;\r\n case \"Top Handle\":\r\n relatedItemName = \"topHandle\";\r\n RelatedItemClass = TopHandle;\r\n break;\r\n case \"Bottom Handle\":\r\n relatedItemName = \"bottomHandle\";\r\n RelatedItemClass = BottomHandle;\r\n break;\r\n case \"Top Cabinet Shadow\":\r\n relatedItemName = \"topCabinetShadow\";\r\n RelatedItemClass = TopCabinetShadow;\r\n break;\r\n case \"Bottom Cabinet Shadow\":\r\n relatedItemName = \"bottomCabinetShadow\";\r\n RelatedItemClass = BottomCabinetShadow;\r\n break;\r\n }\r\n if (relatedItemName) {\r\n if (!this[relatedItemName]) {\r\n this[relatedItemName] = new RelatedItemClass(true);\r\n this.relatedItems.push(this[relatedItemName]);\r\n }\r\n if (!this.categoryEnabled) {\r\n this.categoryEnabled = true\r\n }\r\n this[relatedItemName].getParent = () => this;\r\n this[relatedItemName].load(dbFeature);\r\n return true\r\n }\r\n return false\r\n }\r\n\r\n navigationItem() {\r\n return new DesignNavigationItem('Cabinet', this);\r\n }\r\n\r\n isSubTypeWithItems() {\r\n return false;\r\n }\r\n\r\n getRelatedItems() {\r\n return orderBy(this.relatedItems, 'layerPriority');\r\n }\r\n\r\n subParts(withHidden = true, hideWithoutFeatures = false) {\r\n return this.getRelatedItems()\r\n .filter(item => this.filterRelatedItem(item, withHidden))\r\n .filter(item => {\r\n if ((item.partId === \"crown_molding\" || item.partId === \"top_handle\") && hideWithoutFeatures && item.allFeaturesReceived) {\r\n return item.navigationSubItems({}, \"\").length\r\n }\r\n return item\r\n })\r\n .map(_ => new DesignNavigationItem(_.partName, _));\r\n }\r\n\r\n handleSubPartClick() {\r\n\r\n }\r\n\r\n getTopCabinetType() {\r\n if (this.topCabinet && this.topCabinet.activeFeature) {\r\n if (this.topCabinet.activeFeature.dbFeature.metaData[\"Cabinet\"]) {\r\n return this.topCabinet.activeFeature.dbFeature.metaData[\"Cabinet\"][0]\r\n } else {\r\n // console.log(\"no topCabinet metaData!\", this.topCabinet.activeFeature);\r\n return \"\"\r\n }\r\n }\r\n return \"\"\r\n }\r\n\r\n // getTopCabinetLayout() {\r\n //\r\n // if (this.topCabinet && this.topCabinet.activeFeature) {\r\n // if (this.topCabinet.activeFeature.dbFeature.metaData[\"Cabinet\"]) {\r\n // return this.topCabinet.activeFeature.dbFeature.metaData[\"Cabinet\"][0]\r\n // } else {\r\n // // console.log(\"no topCabinet metaData!\", this.topCabinet.activeFeature);\r\n // return \"\"\r\n // }\r\n // }\r\n // return \"ALL\"\r\n // }\r\n\r\n getBottomCabinetType() {\r\n if (this.bottomCabinet && this.bottomCabinet.activeFeature) {\r\n if (this.bottomCabinet.activeFeature.dbFeature.metaData[\"Cabinet\"]) {\r\n return this.bottomCabinet.activeFeature.dbFeature.metaData[\"Cabinet\"][0]\r\n } else {\r\n // console.log(\"no bottomCabinet metaData!\", this.bottomCabinet.activeFeature);\r\n return \"\"\r\n }\r\n }\r\n return \"\"\r\n }\r\n\r\n getTopCabinetApplianceType() {\r\n if (this.topCabinet && this.topCabinet.activeFeature) {\r\n if (this.topCabinet.activeFeature.dbFeature.metaData[\"Appliance\"]) {\r\n return this.topCabinet.activeFeature.dbFeature.metaData[\"Appliance\"][0]\r\n } else {\r\n // console.log(\"no Appliance metaData!\", this.topCabinet.activeFeature);\r\n return \"Hood\"\r\n }\r\n }\r\n return \"Hood\"\r\n }\r\n\r\n getTopCabinetShadowLayout() {\r\n if (this.topCabinet && this.topCabinet.activeFeature && this.topCabinet.activeFeature.dbFeature.metaData[\"CabinetLayout\"]) {\r\n return this.topCabinet.activeFeature.dbFeature.metaData[\"CabinetLayout\"][0]\r\n }\r\n return \"\"\r\n }\r\n\r\n getBottomCabinetApplianceType() {\r\n if (this.bottomCabinet && this.bottomCabinet.activeFeature) {\r\n if (this.bottomCabinet.activeFeature.dbFeature.metaData[\"Appliance\"]) {\r\n return this.bottomCabinet.activeFeature.dbFeature.metaData[\"Appliance\"][0]\r\n } else {\r\n // console.log(\"no Appliance metaData!\", this.bottomCabinet.activeFeature);\r\n return \"Range\"\r\n }\r\n }\r\n return \"Range\"\r\n }\r\n\r\n}\r\n","import React from 'react';\r\nimport PropTypes from \"prop-types\";\r\nimport MaterialSpinner from \"./materialSpinner\";\r\nimport {IS_LIXIL_UI} from \"../../config\";\r\n\r\nconst LoadingSpinner = (props) => {\r\n if (IS_LIXIL_UI) {\r\n return \r\n
\r\n )\r\n};\r\n\r\nLockedView.displayName = 'LockedView';\r\n\r\nexport default LockedView;\r\n\r\n","import React, { Component } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport $ from \"jquery\";\r\nimport {FormattedMessage} from \"react-intl\";\r\n\r\nimport DesignNavigationItem from \"../../../visComponents/designNavigationItem\";\r\nimport Analytics from \"../../../../analytics\";\r\nimport {getCurrentLayout} from \"../../../appLayout\";\r\n\r\nexport default class MobileMenuSelect extends Component {\r\n\r\n static propTypes = {\r\n // relatedItems: PropTypes.array,\r\n // relatedItemClick: PropTypes.func.isRequired,\r\n onSubPartClick: PropTypes.func.isRequired,\r\n onParentItemClick: PropTypes.func.isRequired,\r\n parentItems: PropTypes.arrayOf(PropTypes.instanceOf(DesignNavigationItem)),\r\n activePart: PropTypes.object,\r\n activeSubPart: PropTypes.object,\r\n desktop: PropTypes.bool,\r\n };\r\n\r\n static defaultProps = {\r\n desktop: false,\r\n };\r\n\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n toggle: false,\r\n showRelatedItems: true,\r\n translateId: this.props.activeSubPart ? this.props.activeSubPart.translateId : ''\r\n };\r\n }\r\n\r\n componentDidMount() {\r\n if (!this.props.desktop) {\r\n this.setShowName(this.props);\r\n }\r\n }\r\n\r\n componentWillUnmount() {\r\n window.removeEventListener('click', this.handleWrapperBlur)\r\n }\r\n\r\n componentWillReceiveProps(nextProps) {\r\n this.setShowName(nextProps);\r\n }\r\n\r\n setShowName(props) {\r\n if (props.activeSubPart && (props.activeSubPart.translateId !== this.state.translateId)) {\r\n this.setState({\r\n translateId: props.activeSubPart.translateId\r\n })\r\n }\r\n if (!props.activeSubPart && props.activePart && (props.activePart.partName !== this.state.translateId)) {\r\n this.setState({\r\n translateId: props.activePart.translateId\r\n })\r\n }\r\n }\r\n\r\n handleParentItemClick = (parentItem) => {\r\n Analytics.sendClickEvent(\"parent-item-clicked\");\r\n Analytics.sendClickEvent(\"parent-item-clicked: \" + parentItem.text);\r\n console.log('click parentItem', parentItem);\r\n this.props.onParentItemClick(parentItem);\r\n let showRelatedItems = true;\r\n if ((parentItem.text === \"Ceiling\" &&\r\n (document.kvConfig.visualizerType === \"Bathroom\" || document.kvConfig.visualizerType === \"BV\"))\r\n || parentItem.text === \"Floor\" || parentItem.text === \"Window\" || parentItem.text === \"Toilet\") {\r\n showRelatedItems = false;\r\n this.handleToggleDropdown();\r\n }\r\n\r\n this.setState({\r\n showRelatedItems,\r\n translateId: parentItem.part.translateId\r\n });\r\n if (parentItem.text === \"Floor\") {\r\n $('html, body').animate({scrollTop: document.body.scrollHeight}, 800);\r\n } else if (parentItem.text === \"Ceiling\") {\r\n $('html, body').animate({scrollTop: 0}, 800);\r\n }\r\n };\r\n\r\n handleBackClick = () => {\r\n this.setState({\r\n showRelatedItems: false,\r\n translateId: this.props.activePart.translateId\r\n });\r\n };\r\n\r\n handleRelatedItemClick = (relatedItem) => {\r\n Analytics.sendClickEvent(\"related-item-clicked\");\r\n Analytics.sendClickEvent(\"related-item-clicked: \" + relatedItem.part.partName);\r\n console.log('relatedItem', relatedItem);\r\n this.props.onSubPartClick(relatedItem);\r\n this.handleToggleDropdown();\r\n this.setState({\r\n translateId: relatedItem.part.translateId\r\n });\r\n if (relatedItem.text === \"Ceiling\") {\r\n $('html, body').animate({scrollTop: 0}, 800);\r\n }\r\n };\r\n\r\n handleToggleDropdown = () => {\r\n Analytics.sendClickEvent(this.state.toggle\r\n ? \"mobile-menu-select-dropdown-toggle-closed\"\r\n : \"mobile-menu-select-dropdown-toggle-open\"\r\n );\r\n\r\n this.setState({\r\n toggle: !this.state.toggle\r\n }, () => {\r\n if (this.state.toggle) {\r\n this.setState({\r\n subParts: this.props.activePart.subParts(),\r\n showRelatedItems: this.props.activePart.partName === \"Toilet\" ? false : !!this.props.activeSubPart\r\n });\r\n setTimeout(() => {\r\n window.addEventListener('click', this.handleWrapperBlur);\r\n }, 0)\r\n } else {\r\n window.removeEventListener('click', this.handleWrapperBlur)\r\n }\r\n })\r\n };\r\n\r\n handleWrapperBlur = (e) => {\r\n if (!e.target.closest('.menu-select__dropdown-list-item')\r\n && !e.target.closest('.menu-select__dropdown-back') && !e.target.closest('.menu-select__dropdown')) {\r\n this.handleToggleDropdown();\r\n }\r\n };\r\n\r\n handlePrevClick = () => {\r\n Analytics.sendClickEvent('mobile-menu-select-previous');\r\n // console.log('this.state.subParts', this.props.parentItems);\r\n // console.log('this.state.translateId', this.state.translateId);\r\n // console.log('this.state.subParts', this.state.subParts);\r\n // console.log('this.props.activePart', this.props.activePart);\r\n // console.log('this.props.activeSubPart', this.props.activeSubPart);\r\n\r\n let prevItem = null;\r\n if (this.props.activeSubPart) {\r\n const subParts = this.props.activePart.subParts();\r\n const currentChildIndex = subParts.findIndex(childItem => {\r\n return this.props.activeSubPart.partId === childItem.part.partId\r\n });\r\n prevItem = subParts[currentChildIndex - 1];\r\n // console.log('currentChildIndex', currentChildIndex);\r\n // console.log('prevItem', prevItem);\r\n }\r\n if (prevItem) {\r\n this.props.onSubPartClick(prevItem);\r\n this.setState({\r\n translateId: prevItem.part.translateId\r\n });\r\n } else {\r\n const currentParentIndex = this.props.parentItems.findIndex(parentItem => {\r\n const partName = this.props.activePart.partName;\r\n return parentItem.text === partName\r\n });\r\n const prevParentItem = this.props.parentItems[currentParentIndex - 1];\r\n\r\n // console.log('currentParentIndex', currentParentIndex);\r\n // console.log('prevParentItem', prevParentItem);\r\n if (prevParentItem) {\r\n this.props.onParentItemClick(prevParentItem);\r\n const subParts = prevParentItem.part.subParts();\r\n const lastSubPart = subParts[subParts.length - 1];\r\n // console.log('lastSubPart',lastSubPart);\r\n if (prevParentItem.part.menuType === 1) {\r\n setTimeout(() => {\r\n this.props.onSubPartClick(lastSubPart);\r\n this.setState({\r\n translateId: lastSubPart.part.translateId,\r\n });\r\n }, 0)\r\n }\r\n }\r\n }\r\n\r\n };\r\n\r\n handleNextClick = () => {\r\n Analytics.sendClickEvent('mobile-menu-select-next');\r\n let nextItem = null;\r\n if (this.props.activeSubPart) {\r\n const subParts = this.props.activePart.subParts();\r\n const currentChildIndex = subParts.findIndex(childItem => {\r\n return this.props.activeSubPart.partId === childItem.part.partId\r\n });\r\n nextItem = subParts[currentChildIndex + 1];\r\n }\r\n if (nextItem) {\r\n this.props.onSubPartClick(nextItem);\r\n this.setState({\r\n translateId: nextItem.part.translateId\r\n });\r\n } else {\r\n const currentParentIndex = this.props.parentItems.findIndex(parentItem => {\r\n const partName = this.props.activePart.partName;\r\n return parentItem.text === partName\r\n });\r\n const nextParentItem = this.props.parentItems[currentParentIndex + 1];\r\n if (nextParentItem) {\r\n this.props.onParentItemClick(nextParentItem);\r\n const subParts = nextParentItem.part.subParts();\r\n const lastSubPart = subParts[0];\r\n if (nextParentItem.part.menuType === 1) {\r\n setTimeout(() => {\r\n this.props.onSubPartClick(lastSubPart);\r\n this.setState({\r\n translateId: lastSubPart.part.translateId,\r\n });\r\n }, 0)\r\n }\r\n }\r\n }\r\n };\r\n\r\n render() {\r\n\r\n const dropDownStyles = this.state.toggle ? { height: this.props.desktop ? 320 : window.innerHeight - 42 } : {};\r\n\r\n return (\r\n \r\n {/**/}\r\n
\r\n )\r\n }\r\n}\r\n","import {Part} from \"../part\";\r\nimport DesignNavigationItem from \"../../../visComponents/designNavigationItem\";\r\nimport {PartMenuType} from \"../../../visComponents/constants\";\r\nimport {vanityThumbnail} from \"../../../bvComponent/core/assets\";\r\n\r\nimport CompleteVanity from \"../subparts/vanity/completeVanity\";\r\nimport VanityHandle from \"../subparts/vanity/vanityHandle\";\r\nimport VanityCabinet from \"../subparts/vanity/vanityCabinet\";\r\nimport VanityCountertop from \"../subparts/vanity/vanityCountertop\";\r\nimport VanityBacksplash from \"../subparts/vanity/vanityBacksplash\";\r\nimport Mirror from \"../subparts/vanity/mirror\";\r\nimport Sink from \"../subparts/vanity/sink\";\r\nimport VanityFaucet from \"../subparts/vanity/faucet\";\r\n\r\nexport class Vanity extends Part {\r\n static id = 'Vanity';\r\n\r\n static Types = {\r\n Complete: 'Complete',\r\n Custom: 'Custom'\r\n };\r\n\r\n constructor() {\r\n super(true, false, PartMenuType.Complex);\r\n\r\n this.menuType = PartMenuType.Complex;\r\n this.partName = 'Vanity';\r\n this.translateId = \"visualizer.bathroom.vanity\";\r\n this.partThumbnail = vanityThumbnail;\r\n this.activeSubType_ = Vanity.Types.Custom;\r\n this.relatedItems = [];\r\n this.placeholdersNeeded = false; // only Vanity property\r\n\r\n // vanity parts\r\n this.vanityCabinet = null;\r\n this.completeVanity = null;\r\n this.countertop = null;\r\n this.sink = null;\r\n this.faucet = null;\r\n this.vanityBacksplash = null;\r\n this.vanityHandle = null;\r\n this.mirror = null;\r\n }\r\n\r\n load(dbFeature) {\r\n let relatedItemName = \"\",\r\n RelatedItemClass = null;\r\n switch (dbFeature.groupName) {\r\n case \"Sink\":\r\n relatedItemName = \"sink\";\r\n RelatedItemClass = Sink;\r\n break;\r\n case \"Mirror\":\r\n relatedItemName = \"mirror\";\r\n RelatedItemClass = Mirror;\r\n break;\r\n case \"Countertop\":\r\n relatedItemName = \"countertop\";\r\n RelatedItemClass = VanityCountertop;\r\n break;\r\n case \"Faucet\":\r\n relatedItemName = \"faucet\";\r\n RelatedItemClass = VanityFaucet;\r\n break;\r\n case \"VanityBacksplash\":\r\n case \"BackSplash\":\r\n case \"Backsplash\":\r\n relatedItemName = \"vanityBacksplash\";\r\n RelatedItemClass = VanityBacksplash;\r\n break;\r\n case \"Vanity Handle\":\r\n relatedItemName = \"vanityHandle\";\r\n RelatedItemClass = VanityHandle;\r\n break;\r\n case \"Vanity\": {\r\n const completeVanity = dbFeature.metaData && dbFeature.metaData[\"Vanity\"]\r\n && dbFeature.metaData[\"Vanity\"].includes(\"Complete\");\r\n\r\n relatedItemName = completeVanity ? \"completeVanity\" : \"vanityCabinet\";\r\n RelatedItemClass = completeVanity ? CompleteVanity : VanityCabinet;\r\n break;\r\n }\r\n }\r\n if (relatedItemName) {\r\n if (!this[relatedItemName]) {\r\n this[relatedItemName] = new RelatedItemClass(true);\r\n if (relatedItemName === \"sink\") {\r\n const faucetIndex = this.relatedItems.findIndex(relItem => relItem.partName === 'Faucet');\r\n faucetIndex ? this.relatedItems.splice(faucetIndex, 0, this.sink) : this.relatedItems.push(this.sink);\r\n } else if (relatedItemName === \"completeVanity\") {\r\n this.relatedItems.unshift(this.completeVanity); // cabinet needs to be first in the list.\r\n } else if (relatedItemName === \"vanityCabinet\") {\r\n this.relatedItems.unshift(this.vanityCabinet); // cabinet needs to be first in the list.\r\n } else {\r\n this.relatedItems.push(this[relatedItemName]);\r\n }\r\n }\r\n if (!this.categoryEnabled) {\r\n this.categoryEnabled = true\r\n }\r\n this[relatedItemName].getParent = () => this;\r\n this[relatedItemName].load(dbFeature);\r\n return true\r\n }\r\n return false\r\n }\r\n\r\n getRelatedItems() {\r\n return this.relatedItems.filter(item => item.visible.includes(this.activeSubType_));\r\n }\r\n\r\n subTypes() {\r\n return this.vanityCabinet && this.completeVanity ? [Vanity.Types.Custom, Vanity.Types.Complete] : [];\r\n }\r\n\r\n isSubTypeWithItems() {\r\n return this.activeSubType_ === Vanity.Types.Complete;\r\n }\r\n\r\n activeSubType() {\r\n return this.activeSubType_;\r\n }\r\n\r\n subParts() {\r\n const relatedItems = this.getRelatedItems();\r\n const excluded = [];\r\n const vanityPart = relatedItems.find(navItem => navItem.partId === \"vanity_cabinet\");\r\n if (vanityPart && vanityPart.activeFeature\r\n && vanityPart.activeFeature.metaData[\"VanityHandle\"]\r\n && vanityPart.activeFeature.metaData[\"VanityHandle\"].includes(\"None\")) {\r\n excluded.push(\"vanity_handle\")\r\n }\r\n return relatedItems\r\n .filter(item => !excluded.includes(item.partId))\r\n .map(_ => new DesignNavigationItem(_.partName, _));\r\n }\r\n\r\n // subPartsWithAccentWall() {\r\n // const vanityAccent = this.layout.parts.Walls.vanityAccent;\r\n // return [new DesignNavigationItem(vanityAccent.partName, vanityAccent),\r\n // ...this.getRelatedItems().map(_ => new DesignNavigationItem(_.partName, _))];\r\n // }\r\n\r\n handleSubTypeClick(subType) {\r\n this.activeSubType_ = subType;\r\n this.getRelatedItems().forEach((relatedItem) => {\r\n if (!relatedItem.activeFeature) {\r\n relatedItem.setDefault()\r\n }\r\n });\r\n }\r\n\r\n setDefaultPartAfterSubTypeClick() {\r\n return this.subParts()[0]\r\n }\r\n\r\n setDefault(layout) {\r\n this.getRelatedItems().forEach(_ => _.setDefault(layout));\r\n }\r\n\r\n counterTopSize() {\r\n return this.getCounterTopSize() || \"24\"; // temporary hardcode until we would have meta data finished\r\n }\r\n\r\n getCounterTopSize() {\r\n if (this.vanityCabinet && !this.vanityCabinet.activeFeature) {\r\n this.vanityCabinet.setDefault()\r\n }\r\n return (this.vanityCabinet && this.vanityCabinet.activeFeature)\r\n ? this.vanityCabinet.activeFeature.dbFeature.metaData[\"VanitySize\"]\r\n : null;\r\n }\r\n\r\n toggleVanityParts(disabled) {\r\n this.getRelatedItems().forEach(relItem => {\r\n if (relItem.partId === \"vanity_sink\" || relItem.partId === \"vanity_faucet\"\r\n || relItem.partId === \"vanity_countertop\" || relItem.partId === \"vanity_cabinet\"\r\n || relItem.partId === \"vanity_handle\" || relItem.partId === \"vanity_backsplash\") {\r\n relItem.disabled = disabled;\r\n }\r\n });\r\n }\r\n}\r\n\r\n","import uniq from \"lodash/uniq\";\r\nimport isEqual from \"lodash/isEqual\";\r\nimport * as uuid from \"uuid\";\r\n\r\nimport {COUNTERTOP_GROUP} from \"../bvcomponents/kvComponent/core/constants\";\r\nimport Config, {USE_FAB_FILTERS_ONLY} from \"../config\";\r\nimport {hardCodeIsAmericanImport, hardCodeIsDeStefano, hardCodeIsFloform} from \"./fabricatorHardcode\";\r\nimport {getAllFeatureFilters, getFilterGroupValue, getFilterGroupValues, mergeFilterObjects} from \"./utils\";\r\nimport {getBvGroupFeatures, getBvGroupFilterValues} from \"../api/server-api\";\r\nimport {getCurrentLayout} from \"../bvcomponents/appLayout\";\r\nimport {getHardCodedFilterGroups} from \"../bvcomponents/look/filtersHardcode\";\r\nimport store from \"../store\";\r\nimport {updateFiltersCount} from \"../actions/filtersFunctions\";\r\n\r\n\r\n/**\r\n * returns feature' color filter value object\r\n * @param lookActiveFeature {object}\r\n * @param filterGroups {array}\r\n * @param colorFilterGroup {object}\r\n * @returns {object} feature' color filter value object\r\n */\r\nexport const getColorFilterValue = (lookActiveFeature, filterGroups, colorFilterGroup = null) => {\r\n if (!lookActiveFeature || !Array.isArray(filterGroups)) {\r\n return null\r\n }\r\n\r\n if (!colorFilterGroup) {\r\n colorFilterGroup = filterGroups.find(group => group.name === \"Color\");\r\n }\r\n\r\n if (!colorFilterGroup) {\r\n return null\r\n }\r\n\r\n const activeFeatureValues = getFilterGroupValues(lookActiveFeature, colorFilterGroup);\r\n\r\n // console.log(\"activeFeatureValues\", activeFeatureValues);\r\n\r\n if (!Array.isArray(activeFeatureValues) || !activeFeatureValues.length) {\r\n return null\r\n }\r\n\r\n return getFilterGroupValue(activeFeatureValues[0], colorFilterGroup);\r\n}\r\n\r\nexport const setActivePartFilterValues = (filterValuesArray, activePart, filterGroups) => {\r\n console.log(\"filterValuesArray from backend:\", filterValuesArray);\r\n if ((COUNTERTOP_GROUP.includes(activePart.partId) || activePart.partId === \"vanity_countertop\")\r\n && filterValuesArray && !Config.isDevMode() && !USE_FAB_FILTERS_ONLY) {\r\n let availableCountertopGroupFilters = [\"color\", \"stone color\", \"collection\", \"manufacturer\", \"countertop material\", \"stone finish\", \"color group\"]\r\n if (activePart.partId === \"backsplash\") {\r\n availableCountertopGroupFilters.push(\"material\");\r\n }\r\n if (document.kvConfig.userId === 141822) { // https://asw.quotekitchenandbath.com/kitchen#/\r\n availableCountertopGroupFilters.push(\"material thickness\");\r\n availableCountertopGroupFilters.push(\"promotional discounts\");\r\n availableCountertopGroupFilters.push(\"color group\");\r\n }\r\n if (document.kvConfig.userId === 138452) { // https://cutting_edge_countertops.quotekitchenandbath.com/kitchen#/\r\n availableCountertopGroupFilters.push(\"price group\");\r\n }\r\n if (document.kvConfig.userId === 252141) { // https://solidsurface.quotekitchenandbath.com/visualizer#/\r\n availableCountertopGroupFilters.push(\"price\");\r\n }\r\n if (window.location.href.includes(\"isfa\")) { // https://isfa.quotekitchenandbath.com/kitchen?mode=dashboard&p=208659&language=en-US#/visualizer\r\n availableCountertopGroupFilters.push(\"color temperature\");\r\n }\r\n if (hardCodeIsDeStefano()) { // https://de_stefano_new.quotekitchenandbath.com/kitchen#/\r\n availableCountertopGroupFilters = availableCountertopGroupFilters.filter(f => {\r\n return f !== \"collection\" && f !== \"manufacturer\"\r\n });\r\n availableCountertopGroupFilters.push(\"material thickness\");\r\n }\r\n if (hardCodeIsFloform()) {\r\n availableCountertopGroupFilters = availableCountertopGroupFilters.filter(f => f !== \"stone color\");\r\n }\r\n const allFilterGroups = filterGroups.filter(filterGroup => {\r\n if (window.location.href.includes(\"porcelanosa\")) { // show all filters on https://porcelanosa_new.quotekitchenandbath.com/kitchen#/ except Edge\r\n return filterGroup.name && !filterGroup.name.includes(\"Edge\")\r\n }\r\n // if (USE_FAB_FILTERS_ONLY) {\r\n // if (!Array.isArray(filterGroup.values) || !filterGroup.values.length) {\r\n // return false\r\n // }\r\n // if (filterGroup.values.filter(fgValue => fgValue.isFabricatorCustomFilter)) {\r\n // return true\r\n // }\r\n // }\r\n return filterGroup && filterGroup.name && availableCountertopGroupFilters.includes(filterGroup.name.trim().toLowerCase())\r\n });\r\n filterValuesArray = filterValuesArray.filter(filterId => {\r\n return allFilterGroups.some(filterGroup => filterGroup.values && filterGroup.values.some(filterValueObject => {\r\n return filterValueObject.id === filterId\r\n }))\r\n });\r\n }\r\n if (activePart.allFeaturesReceived && hardCodeIsAmericanImport()) {\r\n activePart.features.forEach(feature => {\r\n [\"filterValueIDs\", \"fabFilterValueIDs\"].forEach(key => {\r\n if (feature.dbFeature[key]) {\r\n Object.keys(feature.dbFeature[key]).forEach(filterGroupId => {\r\n const filterValues = feature.dbFeature[key][filterGroupId];\r\n if (Array.isArray(filterValues)) {\r\n filterValues.forEach(filterValueId => {\r\n if (!filterValuesArray.includes(filterValueId)) {\r\n filterValuesArray.push(filterValueId)\r\n }\r\n })\r\n }\r\n })\r\n }\r\n })\r\n })\r\n console.log(\"filterValuesArray from features:\", filterValuesArray);\r\n }\r\n activePart.filtersReceived = filterValuesArray;\r\n};\r\n\r\n\r\n\r\n/**\r\n * returns all available filter groups with values for navItems\r\n * @param navItems {array}\r\n * @param allFilterGroups {array}\r\n * @returns {array}\r\n */\r\nexport const getAvailableFiltersForNavItems = (navItems, allFilterGroups) => {\r\n let filterGroups = [];\r\n for (let i = 0; i < navItems.length; i++) {\r\n const checkFeature = navItems[i].part;\r\n let featureFilters = getAllFeatureFilters(checkFeature);\r\n const featureOptions = navItems[i].colorOptions;\r\n if (Array.isArray(featureOptions) && featureOptions.length) {\r\n featureOptions.forEach((option) => {\r\n if (option.feature.dbFeature.id !== checkFeature.dbFeature.id) {\r\n const fOptions = getAllFeatureFilters(option.feature);\r\n featureFilters = mergeFilterObjects(featureFilters, fOptions)\r\n }\r\n });\r\n }\r\n Object.keys(featureFilters).forEach(key => {\r\n let existingFilterGroup = filterGroups.find(group => group.id === +key);\r\n const filterGroupFromAll = allFilterGroups.find(group => group.id === +key);\r\n if (!existingFilterGroup) {\r\n if (filterGroupFromAll) {\r\n existingFilterGroup = Object.assign({}, filterGroupFromAll, {values: []});\r\n filterGroups.push(existingFilterGroup);\r\n }\r\n }\r\n if (existingFilterGroup) {\r\n const currentFilterValues = featureFilters[existingFilterGroup.id];\r\n if (Array.isArray(currentFilterValues)) {\r\n currentFilterValues.forEach(filterValueId => {\r\n if (!existingFilterGroup.values.some(fValue => fValue.id === filterValueId) && filterGroupFromAll) {\r\n const fValue = getFilterGroupValue(filterValueId, filterGroupFromAll);\r\n if (fValue) {\r\n existingFilterGroup.values.push(fValue)\r\n }\r\n }\r\n })\r\n }\r\n }\r\n })\r\n }\r\n return filterGroups\r\n}\r\n\r\n/**\r\n * returns all available filter groups with values for received from backend filters\r\n * @param featureGroup {featureGroupInterface}\r\n * @param allFilterGroups {[filterGroup]}\r\n * @returns {array}\r\n */\r\nexport const getAvailableFiltersForReceivedFilters = (featureGroup, allFilterGroups) => {\r\n let filterGroups = [];\r\n for (let i = 0; i < allFilterGroups.length; i++) {\r\n const filterGroup = allFilterGroups[i];\r\n for (let k = 0; k < filterGroup.values.length; k++) {\r\n const filterValue = filterGroup.values[k];\r\n if (featureGroup.filtersReceived.includes(filterValue.id)) {\r\n let existingFilterGroup = filterGroups.find(group => group.id === filterGroup.id);\r\n if (!existingFilterGroup) {\r\n existingFilterGroup = Object.assign({}, filterGroup, {values: []});\r\n filterGroups.push(existingFilterGroup);\r\n }\r\n if (!existingFilterGroup.values.some(fValue => fValue.id === filterValue.id)) {\r\n existingFilterGroup.values.push(filterValue)\r\n }\r\n }\r\n }\r\n }\r\n return filterGroups\r\n}\r\n\r\nexport const checkIfNeedToReceiveFeaturesIfFiltersApplied = (selectedFilters, currentParent, onScroll = false) => {\r\n let arrayOfNeededFiltersToReceive = uniq( // remove duplicates\r\n selectedFilters.map(filterObj => filterObj.filterId)\r\n );\r\n if (currentParent.filterIdsReceived) {\r\n // make one object with one filter in array (since we don't need to make request with several filters)\r\n arrayOfNeededFiltersToReceive = arrayOfNeededFiltersToReceive.filter((filterValue) => {\r\n return !currentParent.filterIdsReceived.find(filterIdsReceived => {\r\n return filterIdsReceived.filterIds.includes(filterValue)\r\n })\r\n })\r\n }\r\n if (!arrayOfNeededFiltersToReceive.length) {\r\n return false\r\n }\r\n if (!currentParent.filterIdsReceived) {\r\n currentParent.filterIdsReceived = [];\r\n return {\r\n arrayOfNeededFiltersToReceive,\r\n page: 0\r\n };\r\n } else {\r\n const existingFiltersRequest = currentParent.filterIdsReceived.find(filtersReceivedObject => {\r\n return isEqual(filtersReceivedObject.filterIds.sort(), arrayOfNeededFiltersToReceive.sort())\r\n });\r\n if (existingFiltersRequest) {\r\n if (existingFiltersRequest.allFeaturesWithFiltersReceived || !onScroll) { //!onScroll - componentWillReceiveProps request\r\n return false\r\n } else {\r\n return existingFiltersRequest\r\n }\r\n } else {\r\n return {\r\n arrayOfNeededFiltersToReceive,\r\n page: 0\r\n };\r\n }\r\n }\r\n};\r\n\r\nexport const getFeaturesFromBackendWithFilters = (featureGroup, counterTopFiltersIdsReceived, existingFilterObject = null) => {\r\n const filterObject = existingFilterObject || {\r\n uuid: uuid.v4(),\r\n filterIds: counterTopFiltersIdsReceived, // array of arrays, ex. [[56],[1122,1313]] etc.\r\n featuresReceived: 0,\r\n page: 0\r\n };\r\n if (!existingFilterObject) {\r\n featureGroup.filterIdsReceived.push(filterObject);\r\n }\r\n const featuresCountToReceive = 6000;\r\n featureGroup.requestInProgress = true;\r\n return getBvGroupFeatures(\r\n featureGroup.dbName || featureGroup.partName,\r\n filterObject.page,\r\n featuresCountToReceive,\r\n counterTopFiltersIdsReceived\r\n )\r\n .then((response) => {\r\n featureGroup.requestInProgress = false;\r\n if (response && response.length) {\r\n console.log(\"response.data with filters\", response);\r\n featureGroup.setGroupFeatures(response, featuresCountToReceive, false, \"\", null, true);\r\n featureGroup.filterIdsReceived = featureGroup.filterIdsReceived.map((filtersReceivedObject) => {\r\n if (filtersReceivedObject.uuid === filterObject.uuid) {\r\n filtersReceivedObject.featuresReceived += response.length;\r\n if (response.length < featuresCountToReceive) {\r\n filtersReceivedObject.allFeaturesWithFiltersReceived = true;\r\n } else {\r\n filtersReceivedObject.page++;\r\n }\r\n }\r\n return filtersReceivedObject\r\n });\r\n }\r\n return response\r\n });\r\n}\r\n\r\nexport const getSelectedFiltersLength = (filterGroup, selectedFilters) => {\r\n return selectedFilters.reduce((total, selectedFilter) => {\r\n return total + (filterGroup.id === selectedFilter.filterGroupId ? 1 : 0)\r\n }, 0)\r\n}\r\n\r\n\r\n/**\r\n * returns all available filter groups with values for featureGroup's part id\r\n * @param featureGroup {featureGroupInterface}\r\n * @param partId {string}\r\n * @param allFilterGroups {array}\r\n * @param shopNavItems {[navItemInterface]}\r\n * @returns {array}\r\n */\r\nexport const getAvailableFilters = (featureGroup, partId, allFilterGroups, shopNavItems = null) => {\r\n const layout = getCurrentLayout();\r\n if (!featureGroup && partId) {\r\n featureGroup = layout.getFeatureGroupByPartId(partId)\r\n }\r\n if (featureGroup) {\r\n if (featureGroup.filtersReceived) {\r\n return getAvailableFiltersForReceivedFilters(featureGroup, allFilterGroups)\r\n }\r\n const navItems = shopNavItems || layout.designNavigationItems(\r\n {part: featureGroup},\r\n {},\r\n \"\",\r\n null,\r\n false,\r\n allFilterGroups\r\n );\r\n return getAvailableFiltersForNavItems(navItems, allFilterGroups)\r\n }\r\n return []\r\n}\r\n\r\n/**\r\n * returns all available filter groups for featureGroup\r\n * @param featureGroup {featureGroupInterface}\r\n * @param shopNavItems {[navItemInterface]}\r\n * @returns {[filterGroupInterface]}\r\n */\r\nexport const getFeatureGroupFilters = (featureGroup, shopNavItems = null) => {\r\n if (!featureGroup) {\r\n return []\r\n }\r\n const {selectedFilters, filterGroups} = store.getState().filterState;\r\n if (!featureGroup.filtersReceived && !featureGroup.realFeaturesReceived && !featureGroup.filtersRequested) {\r\n // && !featureGroup.realFeaturesReceived\r\n featureGroup.filtersRequested = true;\r\n getBvGroupFilterValues(featureGroup.dbName || featureGroup.partName, null, false)\r\n .then((featureGroupFiltersResponse) => {\r\n setActivePartFilterValues(featureGroupFiltersResponse.data, featureGroup, filterGroups);\r\n store.dispatch(updateFiltersCount());\r\n });\r\n }\r\n const availableFilters = getAvailableFilters(featureGroup, \"\", filterGroups, shopNavItems);\r\n // we are using this in sqft calc\r\n // if (!IS_LIXIL_UI) { // might need to change this, but for now we hardcode filters for all profiles\r\n // return availableFilters\r\n // }\r\n return getHardCodedFilterGroups(availableFilters, featureGroup.partId, selectedFilters)\r\n}\r\n","import * as types from './actionTypes';\r\n\r\nexport const setLanguage = (language) => ({\r\n type: types.SET_LANGUAGE,\r\n payload: {language}\r\n});\r\n\r\nexport const setActiveTheme = (activeTheme) => ({\r\n type: types.SET_ACTIVE_THEME,\r\n payload: {activeTheme}\r\n});\r\n\r\nexport const setAgreeEmailCheckbox = (agreeEmailCheckbox) => ({\r\n type: types.SET_AGREE_EMAIL_CHECKBOX,\r\n payload: {agreeEmailCheckbox}\r\n});\r\n\r\nexport const setInitialVisualizerType = (initialVisualizerType) => ({\r\n type: types.SET_INITIAL_VISUALIZER_TYPE,\r\n payload: {initialVisualizerType}\r\n});\r\n\r\nexport const setNetworkConnection = (networkConnection) => ({\r\n type: types.SET_NETWORK_CONNECTION,\r\n payload: {networkConnection}\r\n});\r\n\r\nexport const setAmazonImageUrl = (amazonImageUrl) => ({\r\n type: types.SET_AMAZON_IMAGE_URL,\r\n payload: {amazonImageUrl}\r\n});\r\n\r\nexport const setAllFeaturesLoaded = (allFeaturesWereLoaded) => ({\r\n type: types.SET_ALL_FEATURES_LOADED,\r\n payload: {allFeaturesWereLoaded}\r\n});\r\n\r\nexport const setAllowRouting = (allowRouting) => ({\r\n type: types.SET_ALLOW_ROUTING,\r\n payload: {allowRouting}\r\n});\r\n\r\nexport const setAllowMainLoading = (allowMainLoading) => ({\r\n type: types.SET_ALLOW_MAIN_LOADING,\r\n payload: {allowMainLoading}\r\n});\r\n\r\nexport const setActionAfterVisualizerTypeIsChanged = (actionAfterRoomChange) => ({\r\n type: types.SET_ACTION_AFTER_VISUALIZER_TYPE_CHANGED,\r\n payload: {actionAfterRoomChange}\r\n});\r\n\r\nexport const setVisualizerIsChanging = (visualizerIsChanging) => ({\r\n type: types.SET_VISUALIZER_TYPE_CHANGING,\r\n payload: {visualizerIsChanging}\r\n});\r\n","import store from \"../store\";\r\nimport {getCurrentLayout} from \"../bvcomponents/appLayout\";\r\nimport {getImagePromiseFromLayout} from \"./getCanvasImageFromLayout\";\r\nimport {getQuoteVisualizerType, switchToNewVisualizerType} from \"./visualizerSwitchingFunctions\";\r\nimport {getRoomImageFromQtCategory} from \"./categorySwitchingFunctions\";\r\nimport {setQuotes} from \"../actions/roomsFunctions\";\r\nimport {loaderDisable, loaderEnable} from \"../bvcomponents/ui/loaderView\";\r\nimport {getTotalPrice} from \"./helpers\";\r\nimport {setVisualizerIsChanging} from \"../actions/serverFunctions\";\r\nimport {switchToWizardItem} from \"../bvcomponents/qkbPages/materialsWizard/useChangeWizardStepRoute\";\r\nimport workspace from \"../bvcomponents/sqft/components/canvas/core/workspace\";\r\nimport {\r\n deleteCartItemsThatAreMissingInSQFTCalcData,\r\n updateQuoteWithSQFTData\r\n} from \"../bvcomponents/sqft/helpers/sqftQuotesHelper\";\r\nimport {prepareSQFTData} from \"../bvcomponents/sqft/components/canvas/core/workspace/workspaceDataMapper\";\r\n\r\n/**\r\n * @param quoteIndex {number}\r\n * @param fakeLayout {object}\r\n * @param forLocalStorage {boolean}\r\n * @param nextVisualizerType {string}\r\n * @param bvImage {string}\r\n * returns updated quote object\r\n */\r\nexport const getQuoteInfo = async (quoteIndex, fakeLayout = null, forLocalStorage = false, nextVisualizerType, bvImage = \"\") => {\r\n const state = store.getState();\r\n const {quotes} = state.quotesState;\r\n const {settings} = state.fabricatorState;\r\n const {canvasDimensions} = state.bathroomVisualizerState;\r\n const quoteTotalPrice = getTotalPrice(quoteIndex);\r\n const quoteId = quotes[quoteIndex] && quotes[quoteIndex].quoteId ? quotes[quoteIndex].quoteId : null;\r\n const imageUrl = quotes[quoteIndex] && quotes[quoteIndex].imageUrl ? quotes[quoteIndex].imageUrl : null;\r\n\r\n const room = getQuoteVisualizerType(quoteIndex, nextVisualizerType);\r\n // keep old compatability without using different layouts\r\n const layout = fakeLayout || getCurrentLayout(settings.allowVisualizerSwitching ? room : document.kvConfig.visualizerType);\r\n\r\n // console.log(\"room\", room);\r\n if (!forLocalStorage && !bvImage) {\r\n if (document.kvConfig.visualizerType !== room && quotes[quoteIndex] && quotes[quoteIndex].bvImage) {\r\n bvImage = quotes[quoteIndex].bvImage;\r\n } else {\r\n bvImage = await new Promise((resolve) => resolve(getImagePromiseFromLayout(layout, canvasDimensions)))\r\n }\r\n }\r\n\r\n return {\r\n quoteId, // quoteId - quoteId is passed from the backend in the getBvJobData response(in dashboard edit mode)\r\n imageUrl, // amazon url\r\n // ...quotes[activeQuoteIndex], no need for it for now\r\n data: layout.getActiveFeaturesAsObject(false, true, true),\r\n leadFeatures: layout.getActiveNames(),\r\n bvImage,\r\n layoutType: layout.type,\r\n room, // prevent overwriting on save\r\n materialCost: quoteTotalPrice.materialPrice,\r\n sqFtCalcData: quotes[quoteIndex] ? quotes[quoteIndex].sqFtCalcData || null : null,\r\n installationCost: quoteTotalPrice.installationPrice,\r\n installationTaxes: quoteTotalPrice.installationTaxes, // installation tax amount\r\n materialTaxes: quoteTotalPrice.materialTaxes, // material tax amount\r\n priceTaxes: quoteTotalPrice.priceTaxes, // material tax amount\r\n staticCanvasImage: getRoomImageFromQtCategory(\"\", quoteIndex),\r\n isCreatedInSQFT: quotes[quoteIndex] ? quotes[quoteIndex].isCreatedInSQFT : false,\r\n isVisibleInSQFT: quotes[quoteIndex] ? quotes[quoteIndex].isVisibleInSQFT : true,\r\n qtCatName: quotes[quoteIndex] ? quotes[quoteIndex].qtCatName : \"\",\r\n }\r\n};\r\n\r\nexport const updateCurrentQuote = async (quoteIndex, nextVisualizerType, forLocalStorage = false) => {\r\n const {quotes, activeQuoteIndex} = store.getState().quotesState;\r\n const indexToUpdate = Number.isInteger(quoteIndex) ? quoteIndex : activeQuoteIndex;\r\n const currentQuoteObject = await getQuoteInfo(indexToUpdate, null, forLocalStorage, nextVisualizerType);\r\n const newQuotes = [...quotes.map((q, qIndex) => (qIndex === indexToUpdate) ? currentQuoteObject : q)];\r\n if (!forLocalStorage) {\r\n store.dispatch(setQuotes(newQuotes));\r\n }\r\n return newQuotes\r\n};\r\n\r\n// /**\r\n// * @param quotes {array}\r\n// * @param activeQuoteIndex {number}\r\n// * returns updated quotes array\r\n// */\r\n// export const updateAllQuotes = async (quotes, activeQuoteIndex) => {\r\n// console.log(\"quotes\", quotes);\r\n// let newQuotes = [];\r\n// for (const [quoteIndex, quoteObject] of quotes.entries()) {\r\n// let newQuote = null;\r\n// if (quoteIndex !== activeQuoteIndex && quoteObject.data) {\r\n// let fakeLayout = null;\r\n// const layout = getCurrentLayout();\r\n// fakeLayout = cloneDeep(layout);\r\n// fakeLayout.type = quoteObject.data.layout_type;\r\n// fakeLayout.scene = quoteObject.data.scene;\r\n// fakeLayout.getFeatures(true).forEach(parentGroup => {\r\n// parentGroup.layout = fakeLayout;\r\n// parentGroup.relatedItems.forEach(relItem => {\r\n// relItem.getParent = () => parentGroup;\r\n// })\r\n// });\r\n// await fakeLayout.selectLayout(layout.type, layout.type, null, layout.scene, null, true);\r\n// newQuote = await getQuoteInfo(quoteIndex, fakeLayout);\r\n// } else {\r\n// newQuote = await getQuoteInfo(quoteIndex);\r\n// }\r\n// newQuotes.push(newQuote);\r\n// }\r\n// console.log(\"newQuotes\", newQuotes);\r\n// store.dispatch(setQuotes(newQuotes));\r\n// return newQuotes\r\n// };\r\n\r\nexport const setNewActiveQuote = async (index, newQuotes) => {\r\n if (!newQuotes) {\r\n newQuotes = store.getState().quotesState.quotes;\r\n }\r\n const newQuote = newQuotes[index];\r\n if (newQuote && (newQuote.layoutType || newQuote.layoutType === 0) && newQuote.data) {\r\n loaderEnable();\r\n if (newQuote.room !== document.kvConfig.visualizerType) {\r\n await switchToNewVisualizerType(newQuote.room, false)\r\n }\r\n const layout = getCurrentLayout();\r\n const bvState = newQuote.data;\r\n const {wizardIsActive} = store.getState().wizardState;\r\n if (wizardIsActive) {\r\n // change selectedWizardValues!\r\n switchToWizardItem(null, null, null, null, false);\r\n }\r\n return layout.setItemsFromBvState(bvState)\r\n .then(() => {\r\n loaderDisable();\r\n store.dispatch(setVisualizerIsChanging(false))\r\n });\r\n }\r\n return Promise.resolve()\r\n};\r\n\r\nexport const deleteCartItemFromSQFTCalcData = async (cItem) => {\r\n if (cItem.sqftIds && cItem.sqftIds.length) {\r\n const state = store.getState();\r\n const quotes = state.quotesState.quotes;\r\n const cItemQuote = quotes[cItem.currentQuote];\r\n\r\n //create workspace and remove items as if they were removed from sqft\r\n workspace.import(cItemQuote.sqFtCalcData);\r\n [...cItem.sqftIds].forEach(sqftId => {\r\n workspace.removeFeatureBySQFTId(sqftId);\r\n })\r\n\r\n //save sqft calc data to quote\r\n const sqftCalcData = await prepareSQFTData();\r\n updateQuoteWithSQFTData(sqftCalcData, cItem.currentQuote);\r\n\r\n //remove cartItems that was attached features like edges and backsplashes\r\n deleteCartItemsThatAreMissingInSQFTCalcData();\r\n }\r\n}\r\n","export default function ( nvert, vertx, verty, testx, testy ) {\r\n var i, j, c = false;\r\n for( i = 0, j = nvert-1; i < nvert; j = i++ ) {\r\n if( ( ( verty[i] > testy ) != ( verty[j] > testy ) ) &&\r\n ( testx < ( vertx[j] - vertx[i] ) * ( testy - verty[i] ) / ( verty[j] - verty[i] ) + vertx[i] ) ) {\r\n c = !c;\r\n }\r\n }\r\n return c;\r\n}\r\nexport function pnpolyArray(points, test) { // receives pointsArray & mousePos, ex. [[50,100],[70, 100],[70, 200],[50,200]], {x:60, y: 80}\r\n let i, j, c = false;\r\n for (i = 0, j = points.length - 1; i < points.length; j = i++) {\r\n if (((points[i][1] > test.y) !== (points[j][1] > test.y)) &&\r\n (test.x < (points[j][0] - points[i][0]) * (test.y - points[i][1])\r\n / (points[j][1] - points[i][1]) + points[i][0])) {\r\n c = !c;\r\n }\r\n }\r\n return c;\r\n}\r\n\r\n/**\r\n* array of coordinates of each vertex of the polygon\r\n* var polygon = [ [ 1, 1 ], [ 1, 2 ], [ 2, 2 ], [ 2, 1 ] ];\r\n* isPointInsidePolygon([ 1.5, 1.5 ], polygon); // true\r\n*/\r\nexport function isPointInsidePolygon(point, polygon) {\r\n // ray-casting algorithm based on\r\n // https://wrf.ecse.rpi.edu/Research/Short_Notes/pnpoly.html/pnpoly.html\r\n\r\n let x = point.x, y = point.y;\r\n let inside = false;\r\n\r\n for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {\r\n let xi = polygon[i].x, yi = polygon[i].y;\r\n let xj = polygon[j].x, yj = polygon[j].y;\r\n let intersect = ((yi > y) !== (yj > y))\r\n && (x < (xj - xi) * (y - yi) / (yj - yi) + xi);\r\n\r\n if (intersect) inside = !inside;\r\n }\r\n\r\n return inside;\r\n}\r\n\r\n/**\r\n* array of coordinates of each vertex of the polygon\r\n* var polygon = [ [ 1, 1 ], [ 1, 2 ], [ 2, 2 ], [ 2, 1 ] ];\r\n* isPointInsidePolygon([ 1.5, 1.5 ], polygon); // true\r\n*/\r\nexport function isPointInsidePolygonArray(point, polygon) {\r\n var x = point[0], y = point[1];\r\n\r\n var inside = false;\r\n for (var i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {\r\n var xi = polygon[i][0], yi = polygon[i][1];\r\n var xj = polygon[j][0], yj = polygon[j][1];\r\n\r\n var intersect = ((yi > y) != (yj > y))\r\n && (x < (xj - xi) * (y - yi) / (yj - yi) + xi);\r\n if (intersect) inside = !inside;\r\n }\r\n\r\n return inside;\r\n}\r\n","import workspace from \"../components/canvas/core/workspace\";\r\n//import {updateCurrentQuote} from \"../../../../../misc/quotesFunctions\";\r\nimport {\r\n getCurrentQuoteRoomCartItem,\r\n getRoomCartItemForCategoryName\r\n} from \"../../../misc/categorySwitchingFunctions\";\r\nimport store from \"../../../store\";\r\nimport {setActiveQuoteIndex, setQuotes} from \"../../../actions/roomsFunctions\";\r\nimport {addToCart, changeCartFeature, removeFromCart} from \"../../../actions/actionFunctions\";\r\nimport {prepareSQFTData} from \"../components/canvas/core/workspace/workspaceDataMapper\";\r\nimport {getFeatureGroup, getNavItems, onSQFTLoadImport, onSQFTLoadPrepareData} from \"./sqftHelperUi\";\r\nimport {ACTIVE_ROOM_TYPE} from \"../../../reducers/sqftMenuReducer\";\r\nimport {\r\n setSQFTActiveRoomId,\r\n setSQFTActiveRoomIndex,\r\n setSQFTActiveRoomType\r\n} from \"../../../actions/sqftMenuFunctions\";\r\nimport {getRoomNameInQuote} from \"../../popups/sqftFeaturesPopup/parseSqftData\";\r\nimport {getQtCategoryName} from \"../../visComponents/qtCategoryName\";\r\nimport {getStringFeatureName} from \"../../../misc/helpers\";\r\nimport {MEASURE_UNITS, PARENT_KEYS_WITH_COMBINED_FEATURES_IN_CART} from \"../constants\";\r\n\r\n/**\r\n *\r\n */\r\nexport const getQtCatName = () => {\r\n const reduxState = store.getState();\r\n const {activeRoomType} = reduxState.sqftMenuState;\r\n const {qtActiveCategory} = reduxState.qtState;\r\n const {activeRoomId} = reduxState.sqftMenuState;\r\n const {activeQuoteIndex} = reduxState.quotesState;\r\n const fabricatorData = reduxState.fabricatorState;\r\n const intl = workspace.intl;\r\n\r\n let switcherTitle;\r\n let roomNavItem;\r\n\r\n switch (activeRoomType) {\r\n case ACTIVE_ROOM_TYPE.quote:\r\n switcherTitle = getRoomNameInQuote(activeQuoteIndex);\r\n break;\r\n case ACTIVE_ROOM_TYPE.category:\r\n switcherTitle = getQtCategoryName(qtActiveCategory, intl, fabricatorData)\r\n break;\r\n case ACTIVE_ROOM_TYPE.roomGroup:\r\n roomNavItem = getRoomGroupById(activeRoomId);\r\n if (!roomNavItem) {\r\n switcherTitle = \"\"\r\n } else {\r\n switcherTitle = getStringFeatureName(roomNavItem.part, intl.messages, intl.locale, fabricatorData);\r\n }\r\n break;\r\n }\r\n\r\n return switcherTitle;\r\n}\r\n/**\r\n * @param qtCatName string\r\n */\r\nexport const isQuoteByQTCatNameEqualToCurrentQuote = (qtCatName) => {\r\n const state = store.getState();\r\n const quotes = state.quotesState.quotes;\r\n const activeQuoteIndex = state.quotesState.activeQuoteIndex;\r\n const quote = getQuoteByRoomName(qtCatName);\r\n let newQuoteIndex = quotes.indexOf(quote);\r\n newQuoteIndex = newQuoteIndex < 0 ? 0 : newQuoteIndex\r\n\r\n return activeQuoteIndex === newQuoteIndex\r\n}\r\n/**\r\n * @param qtCatName string\r\n */\r\nexport const loadQuoteByQtCatName = async (qtCatName) => {\r\n const state = store.getState();\r\n const quotes = state.quotesState.quotes;\r\n const quote = getQuoteByRoomName(qtCatName);\r\n let quoteIndex = quotes.indexOf(quote);\r\n quoteIndex = quoteIndex < 0 ? 0 : quoteIndex\r\n\r\n store.dispatch(setActiveQuoteIndex(quoteIndex));\r\n //await setNewActiveQuote(quoteIndex, quotes);\r\n loadActiveQuoteToSQFT().then();\r\n\r\n //todo fix error if quote is null\r\n store.dispatch(setSQFTActiveRoomId(qtCatName));\r\n store.dispatch(setSQFTActiveRoomIndex(null)); //todo if this is critical (set active room in qtCategory switcher)\r\n store.dispatch(setSQFTActiveRoomType(ACTIVE_ROOM_TYPE.quote));\r\n}\r\n\r\n\r\n/**\r\n * load quotes[activeQuoteIndex] to workspace\r\n */\r\nexport const getQuoteByRoomName = (roomName) => {\r\n const state = store.getState();\r\n const quotes = state.quotesState.quotes;\r\n return quotes.find((quote, index) => {\r\n const quoteByQtCatName = quote.qtCatName === roomName.trim().toLowerCase();\r\n const roomNameInQuote = getRoomNameInQuote(index);\r\n const quoteByRoomName = roomNameInQuote.trim().toLowerCase() === roomName.trim().toLowerCase();\r\n\r\n return quoteByQtCatName || quoteByRoomName\r\n });\r\n}\r\n\r\n/**\r\n * load quotes[activeQuoteIndex] to workspace\r\n */\r\nexport const loadActiveQuoteToSQFT = async () => {\r\n let payload = onSQFTLoadPrepareData();\r\n onSQFTLoadImport(payload);\r\n}\r\n\r\n/**\r\n * Checking type of current room and creates new or updating existing quote\r\n * @param sqftCalcData {object}\r\n */\r\nexport const saveSQFTDataToQuote = async (sqftCalcData = null) => {\r\n const state = store.getState();\r\n const activeRoomType = state.sqftMenuState.activeRoomType;\r\n const qtActiveCategory = state.qtState.qtActiveCategory;\r\n const activeRoomId = state.sqftMenuState.activeRoomId;\r\n const cartItems = state.cartState.cartItems;\r\n const activeRoomIndex = state.sqftMenuState.activeRoomIndex;\r\n\r\n if (activeRoomType === ACTIVE_ROOM_TYPE.category) {\r\n await createQuoteIfNotExistOrUpdateCurrent(qtActiveCategory.trim().toLowerCase());\r\n } else if (activeRoomType === ACTIVE_ROOM_TYPE.roomGroup) {\r\n //const roomNavItem = getRoomGroupById(activeRoomId);\r\n //const roomNavItemName = roomNavItem.part.partName.trim().toLowerCase();\r\n await createQuoteIfNotExistOrUpdateCurrent(activeRoomId);\r\n } else {\r\n if (!sqftCalcData) {\r\n sqftCalcData = await prepareSQFTData();\r\n console.log(\"sqft prepared data\", sqftCalcData);\r\n }\r\n updateActiveQuoteWithSQFTData(sqftCalcData);\r\n const quoteRoomCartItem = getCurrentQuoteRoomCartItem(cartItems, activeRoomIndex);\r\n if (!quoteRoomCartItem) {\r\n addRoomToCart(getQtCatName());\r\n }\r\n }\r\n}\r\n\r\n/**\r\n * Update specific quote with sqFtCalcData by given index\r\n */\r\nexport const updateQuoteWithSQFTData = (data, quoteIndex) => {\r\n const state = store.getState();\r\n const { quotes } = state.quotesState;\r\n\r\n const newQuotes = quotes.map((quote, qIndex) => {\r\n if (qIndex === quoteIndex) {\r\n return {\r\n ...quote,\r\n sqFtCalcData: { ...data }\r\n };\r\n }\r\n return quote;\r\n });\r\n\r\n store.dispatch(setQuotes(newQuotes));\r\n};\r\n\r\n/**\r\n * Update active quote with sqFtCalcData\r\n */\r\nexport const updateActiveQuoteWithSQFTData = (data) => {\r\n const state = store.getState();\r\n const { activeQuoteIndex } = state.quotesState;\r\n\r\n updateQuoteWithSQFTData(data, activeQuoteIndex);\r\n};\r\n\r\nexport const getSQFTIdsFromAllParentLists = (parentsLists) => {\r\n const SQFTIds = [];\r\n parentsLists.forEach(parentsList => {\r\n Object.keys(parentsList).forEach(parentKey => {\r\n if (!parentsList[parentKey] || !parentsList[parentKey].features) {\r\n return\r\n }\r\n let sqftFeatures = parentsList[parentKey].features;\r\n if (sqftFeatures && sqftFeatures.length) {\r\n sqftFeatures.forEach(sqftFeature => {\r\n SQFTIds.push(sqftFeature.sqftId)\r\n })\r\n }\r\n })\r\n })\r\n\r\n return SQFTIds\r\n}\r\n\r\n/**\r\n */\r\nexport const deleteCartItemsThatAreMissingInParentLists = (parentsLists, cartItems) => {\r\n const sqftIds = getSQFTIdsFromAllParentLists(parentsLists);\r\n const itemsToRemove = cartItems.filter(cItem => cItem.sqftId && !sqftIds.includes(cItem.sqftId));\r\n\r\n itemsToRemove.forEach(cItem => {\r\n store.dispatch(removeFromCart(cItem));\r\n });\r\n};\r\n\r\n/**\r\n * This will return string ids\r\n * @param SQFTCalcData\r\n * @return {[]}\r\n */\r\nexport const getSQFTIdsFromSQFTCalcData = (SQFTCalcData) => {\r\n if (SQFTCalcData) {\r\n const SQFTIds = [];\r\n SQFTCalcData.countertops.forEach(countertop => {\r\n SQFTIds.push(countertop.id.toString());\r\n })\r\n\r\n return SQFTIds\r\n }\r\n}\r\n\r\n/**\r\n */\r\nexport const deleteCartItemsThatAreMissingInSQFTCalcData = () => {\r\n const state = store.getState();\r\n const cartItems = state.cartState.cartItems;\r\n const fabricatorSettings = state.fabricatorState.settings;\r\n const quotes = state.quotesState.quotes;\r\n\r\n quotes.forEach((quote, quoteIndex) => {\r\n if (quote.sqFtCalcData) {\r\n const sqftIds = getSQFTIdsFromSQFTCalcData(quote.sqFtCalcData);\r\n\r\n cartItems\r\n .filter(cItem => cItem.currentQuote === quoteIndex)\r\n .forEach(cItem => {\r\n if (cItem.sqftQuantities) {\r\n const updatedQuantities = { ...cItem.sqftQuantities };\r\n\r\n // remove sqftIds from sqftQuantities that are not in the SQFTCalcData\r\n Object.keys(updatedQuantities).forEach(sqftId => {\r\n if (!sqftIds.includes(sqftId)) {\r\n delete updatedQuantities[sqftId];\r\n }\r\n });\r\n\r\n let newQuantity = Object.values(updatedQuantities).reduce((sum, qty) => sum + qty, 0);\r\n // The deleteCartItemsThatAreMissingInSQFTCalcData functionality is linked to this section.\r\n // If any changes are needed, ensure to update both places to maintain consistency.\r\n if (PARENT_KEYS_WITH_COMBINED_FEATURES_IN_CART.includes(cItem.partId)) {\r\n newQuantity = fabricatorSettings.measureUnit === MEASURE_UNITS.Metric\r\n ? Math.ceil10(newQuantity, -2)\r\n : Math.ceil(newQuantity);\r\n }\r\n\r\n // Update the cart item\r\n if (Object.keys(updatedQuantities).length > 0) {\r\n store.dispatch(changeCartFeature({\r\n ...cItem,\r\n sqftQuantities: updatedQuantities,\r\n quantity: newQuantity,\r\n }));\r\n } else {\r\n store.dispatch(removeFromCart(cItem));\r\n }\r\n }\r\n });\r\n }\r\n })\r\n};\r\n\r\n/**\r\n * @param qtCatName: string\r\n */\r\nexport const createQuoteIfNotExistOrUpdateCurrent = async (qtCatName) => {\r\n const currentQtCategoryInQuotes = getQuoteForCurrentQtCatName(qtCatName);\r\n const sqftCalcData = await prepareSQFTData();\r\n if (!currentQtCategoryInQuotes) {\r\n await createQuoteFromSqftCalcData(sqftCalcData, qtCatName)\r\n } else {\r\n updateActiveQuoteWithSQFTData(sqftCalcData);\r\n }\r\n}\r\n\r\n/**\r\n * @param sqftCalcData {object}\r\n * @param qtCatName {string}\r\n */\r\nexport const createQuoteFromSqftCalcData = async (sqftCalcData, qtCatName) => {\r\n if (!workspace.isEmpty() || isManualCalculateNotEmpty(sqftCalcData)) {\r\n await createNewQuoteFromCategory(sqftCalcData, qtCatName);\r\n }\r\n}\r\n\r\n/**\r\n * @param qtCatName string\r\n */\r\nexport const getQuoteForCurrentQtCatName = (qtCatName) => {\r\n const {quotes} = store.getState().quotesState;\r\n return quotes.find(quote =>\r\n quote.qtCatName === qtCatName\r\n && quote.isVisibleInSQFT === false)\r\n}\r\n\r\n/**\r\n * @param sqftCalcData {object}\r\n * @param qtActiveCategory {string}\r\n */\r\nexport const createNewQuoteFromCategory = async(sqftCalcData, qtActiveCategory) => {\r\n if (!workspace.isEmpty() || isManualCalculateNotEmpty(sqftCalcData)) {\r\n const quotes = await addNewQuote(sqftCalcData, qtActiveCategory);\r\n store.dispatch(setActiveQuoteIndex(quotes.length - 1));\r\n addRoomToCart(qtActiveCategory);\r\n }\r\n}\r\n\r\nexport const isManualCalculateNotEmpty = (sqftCalcData) => {\r\n if (sqftCalcData.manualCalculate) {\r\n return sqftCalcData.countertops.length > 0\r\n || sqftCalcData.backsplashes.length > 0\r\n || sqftCalcData.edges.length > 0\r\n }\r\n\r\n return false\r\n}\r\n/**\r\n * @param sqftCalcData {object}\r\n * @param qtActiveCategory {string}\r\n */\r\nconst addNewQuote = async (sqftCalcData, qtActiveCategory) => {\r\n //const currentQuote = await updateCurrentQuote();\r\n const {quotes} = store.getState().quotesState;\r\n const newQuotes = [...quotes, {\r\n quoteId: null,\r\n isCreatedInSQFT: true,\r\n isVisibleInSQFT: false,\r\n qtCatName: qtActiveCategory.trim().toLowerCase(),\r\n sqFtCalcData: sqftCalcData\r\n }];\r\n store.dispatch(setQuotes(newQuotes));\r\n\r\n return newQuotes\r\n};\r\n\r\n/**\r\n * @param qtCatName {string}\r\n */\r\nexport const addRoomToCart = (qtCatName) => {\r\n const roomCartItem = getRoomCartItemForCategoryName(qtCatName)\r\n if (roomCartItem) {\r\n store.dispatch(addToCart([roomCartItem]))\r\n return roomCartItem\r\n }\r\n}\r\n\r\n/**\r\n * update navItemBy roomIndex\r\n * @param roomName {string}\r\n */\r\nexport const getRoomGroupById = (roomName) => {\r\n const roomsFeatureGroup = getFeatureGroup('room');\r\n const roomsNavItems = getNavItems(roomsFeatureGroup, \"\", {}, false, true);\r\n\r\n return roomsNavItems.find(navItem => {\r\n return navItem.part.getFeatureName().toLowerCase() === roomName.toLowerCase()\r\n });\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport {ShowerHeadTypes} from \"../../constants\";\r\n\r\nexport default class ShowerCommon extends IntermediatePart {\r\n\r\n constructor(props) {\r\n super(props);\r\n this.isShowerCommonGroup = true;\r\n }\r\n\r\n setArmHeadType() { // for feature\r\n const parent = this.getParent();\r\n const showerParent = parent.getParent();\r\n showerParent.setShowerHeadType(ShowerHeadTypes.shower_arm, parent.partId);\r\n if (showerParent.showerFixture && showerParent.showerFixture.activeFeature && showerParent.showerFixture.activeFeature.metaData[\"MountType\"]\r\n && !showerParent.showerFixture.activeFeature.metaData[\"MountType\"].includes(\"0\") && !showerParent.showerFixture.disabled) {\r\n // store.dispatch(setLookOverlayOpened(LOOK_OVERLAYS.notCompatiblePopup));\r\n // return;\r\n // this.applyFeatureIfNotCompatible();\r\n showerParent.showerFixture.disabled = true;\r\n }\r\n }\r\n\r\n getArrayOfConditions() {\r\n const showerParent = this.getParent();\r\n let conditions = super.getArrayOfConditions(); // roomLayout && roomScene\r\n const showerSize = showerParent.showerSize();\r\n if (showerSize) {\r\n conditions.push({\r\n propName: \"ShowerSize\",\r\n propValue: showerSize\r\n })\r\n }\r\n return conditions\r\n }\r\n\r\n isActiveFeatureGroup(featureGroupId = \"\") {\r\n const showerParent = this.getParent();\r\n const featureGroup = showerParent[featureGroupId];\r\n return !!(featureGroup && featureGroup.activeFeature && !featureGroup.disabled)\r\n }\r\n\r\n togglePosition(position, partId) {\r\n const showerArm = this.getParent().relatedItems.find(featureGroup => featureGroup.partId === partId);\r\n if (showerArm && showerArm.layerPositions) {\r\n if (this.layerPositions[position]) {\r\n // if (!showerArm.layerPositions[position]) {\r\n // showerArm.layerPositions[position] = showerArm.getMatchingPositionFeature(position);\r\n // if (showerArm.disabled) {\r\n // showerArm.disabled = false;\r\n // }\r\n // }\r\n // we need always set here in the next line, because we might have another conditions. so update needed\r\n showerArm.layerPositions[position] = showerArm.getMatchingPositionFeature(position);\r\n if (showerArm.disabled) {\r\n showerArm.disabled = false;\r\n }\r\n } else {\r\n showerArm.layerPositions[position] = null;\r\n }\r\n }\r\n }\r\n\r\n showLayerPositionsModal() {\r\n return true\r\n }\r\n\r\n}\r\n","import {PartMenuType} from \"../../visComponents/constants\";\r\nimport {iCmp} from \"../../../misc/utils\";\r\nimport Layer from \"../../visComponents/layer\";\r\nimport {LayoutType, METADATA} from \"./constants\";\r\nimport PartCommon from \"../../visComponents/partCommon\";\r\nimport DesignNavigationItem from \"../../visComponents/designNavigationItem\";\r\n\r\nexport class Part extends PartCommon {\r\n\r\n constructor(isParent, isChild, menuType) {\r\n super();\r\n if (isChild || (isParent && menuType === PartMenuType.Simple)) {\r\n this.featuresList = {};\r\n this.featuresPartsList = {};\r\n this.modulePartsList = {};\r\n Object.keys(LayoutType).forEach(layoutName => {\r\n this.featuresList[layoutName] = [];\r\n this.featuresPartsList[layoutName] = [];\r\n this.modulePartsList[layoutName] = [];\r\n });\r\n this.allFeaturesReceived = false;\r\n this.realFeaturesReceived = false; // this prop is need on Scroll (if features count more that 1000)\r\n this.nextFeaturesPageToLoad = 0;\r\n this.activeFeature = null;\r\n this.placeholderFeature = null;\r\n this.placeholderChanged = false;\r\n this.firstClick = {\r\n \"0\": false\r\n };\r\n this.activeLockedFeature = null;\r\n this.activeNotInVisualizerFeature = null; // is needed to display in the QT selected activeNotInVisualizerFeature, but render proper activeFeature layer(for example, countertop)\r\n // name = \"\";\r\n this.visible = true;\r\n this.categoryEnabled = false;\r\n this.layout = null;\r\n this.featureGroupVisible = true; // dashboard's feature group eye ball logic\r\n this.featureGroupEnabled = true; // dashboard's feature group checkbox logic\r\n this.selectedFeaturesHistory = []; // array of strings(names). updated every time item is selected\r\n this.filtersReceived = null; // array of filters values, comes from BE, for ex [1221, 347, 1124]\r\n }\r\n if (isParent) {\r\n this.partThumbnail = '';\r\n this.relatedItems = [];\r\n }\r\n if (!isChild && !isParent) {\r\n this.dbFeature = null;\r\n this.layer = new Layer(\"bv\");\r\n this._customDisplayName = null;\r\n this.notesList = {};\r\n }\r\n this.partName = \"\";\r\n }\r\n\r\n set features(featuresList) {\r\n // features can't be set directly, we need to change featuresList array\r\n }\r\n get features() {\r\n const layout = this.layout || this.getParent().layout;\r\n return this.featuresList[layout.getCurrentLayoutName()]\r\n }\r\n set featuresParts(featuresList) {\r\n // featuresParts can't be set directly, we need to change featuresPartsList array\r\n }\r\n get featuresParts() {\r\n const layout = this.layout || this.getParent().layout;\r\n return this.featuresPartsList[layout.getCurrentLayoutName()]\r\n }\r\n get moduleParts() {\r\n const layout = this.layout || this.getParent().layout;\r\n return this.modulePartsList[layout.getCurrentLayoutName()]\r\n }\r\n\r\n /**\r\n * Checks whether a given for condition matches the needed value (or array of values)\r\n * @param name {string}\r\n * @param value {string || array}\r\n * @returns {int} -1 - no such for condition, 0 - no match, 1 - matches\r\n */\r\n matchesMetaForCondition(name, value) {\r\n return this.metaData[name] && this.metaData[name].some(condValue => {\r\n return condValue === METADATA.ALL || (Array.isArray(value) ? value.some(val => iCmp(condValue, val)) : iCmp(condValue, value))\r\n });\r\n }\r\n\r\n matchesMetaForArrayOfConditions(arrayOfConditions) {\r\n return arrayOfConditions.every((condition) => {\r\n return this.matchesMetaForCondition(condition.propName, condition.propValue);\r\n })\r\n }\r\n\r\n navigationItem() {\r\n return new DesignNavigationItem(this.partName, this)\r\n }\r\n}\r\n\r\n\r\n","import invert from 'lodash/invert';\r\n\r\nimport {splitFeatureName} from \"../../../misc/utils\";\r\nimport DesignNavigationItem from \"../../visComponents/designNavigationItem\";\r\nimport {Part} from \"./part\";\r\nimport store from '../../../store';\r\nimport {LayoutAbbreviation, LayoutType} from \"./constants\";\r\nimport {getFeatureIsLocked} from \"../../../misc/helpers\";\r\n\r\n/**\r\n * Used for Complex parts such as Vanity, to perform some base functionality for related items\r\n */\r\nexport class IntermediatePart extends Part {\r\n\r\n constructor(isChild) {\r\n super(false, isChild);\r\n this.disabled = false;\r\n this.defaultDisabled = false; // used after reset click\r\n this.canBeDisabled = false;\r\n }\r\n\r\n /**\r\n * This will be called on feature creation\r\n * @param dbFeature\r\n */\r\n load(dbFeature) {\r\n return this.load_(dbFeature, new this.constructor());\r\n }\r\n\r\n /**\r\n * This will be called by the underlying vanity feature with a concrete instance of the part\r\n * @param dbFeature\r\n * @param part {Part}\r\n * @param setParent {boolean}\r\n * @param features\r\n */\r\n load_(dbFeature, part, setParent = true, features = 'features') {\r\n\r\n const featureList = features + \"List\";\r\n\r\n const {displayName} = dbFeature;\r\n let {featureName} = splitFeatureName(displayName);\r\n if (!featureName && dbFeature.groupName && dbFeature.displayName) {\r\n featureName = dbFeature.displayName.replace(dbFeature.groupName + \" - \", \"\")\r\n }\r\n // console.log('displayName:', displayName);\r\n\r\n if (setParent) {\r\n part.getParent = () => this;\r\n if (dbFeature.galleryImages) {\r\n const featured = dbFeature.galleryImages.find(galImage => galImage.featured);\r\n if (featured) {\r\n this.featuredImage = featured.url\r\n }\r\n dbFeature.galleryImages = dbFeature.galleryImages.sort((a, b) => b.default - a.default)\r\n }\r\n }\r\n\r\n if (!dbFeature.sharedFeatureName) {\r\n console.error(\"No sharedFeatureName property:\", dbFeature);\r\n }\r\n\r\n part.partName = featureName;\r\n part.metaData = dbFeature.metaData || {};\r\n\r\n if (dbFeature.s3Bindings && dbFeature.s3Bindings.length) {\r\n // dbFeature.s3Bindings = dbFeature.s3Bindings.filter(binding => binding.visualizer === \"Fireplace\")\r\n }\r\n\r\n part.dbFeature = dbFeature || {};\r\n if (!part.dbFeature.filterValueIDs) {\r\n part.dbFeature.filterValueIDs = {}\r\n }\r\n part.notAvailableInVisualizer = !dbFeature.s3Bindings || !dbFeature.s3Bindings.length;\r\n\r\n if (part.metaData.RoomLayout) {\r\n const roomLayout = part.metaData.RoomLayout;\r\n if (roomLayout.includes(LayoutAbbreviation.All)) {\r\n Object.keys(LayoutType).forEach(layoutName => {\r\n this[featureList][layoutName].push(part);\r\n })\r\n } else if (Array.isArray(roomLayout) && roomLayout.length) {\r\n roomLayout.forEach(roomLayoutAbbreviation => {\r\n const layoutName = invert(LayoutAbbreviation)[roomLayoutAbbreviation];\r\n if (layoutName) { // Prevent bad roomLayout Metadata\r\n this[featureList][layoutName].push(part);\r\n }\r\n });\r\n } else { // single value\r\n const layoutName = invert(LayoutAbbreviation)[roomLayout];\r\n if(layoutName) {\r\n this[featureList][layoutName].push(part);\r\n }\r\n }\r\n }\r\n\r\n if (part.notAvailableInVisualizer || !part.metaData.RoomLayout) {\r\n part.notAvailableInVisualizer = true;\r\n Object.keys(LayoutType).forEach(layoutName => {\r\n this[featureList][layoutName].push(part);\r\n })\r\n }\r\n\r\n // Object.keys(LayoutType).forEach(layoutName => {\r\n // this[features+\"List\"][layoutName].push(part);\r\n // });\r\n\r\n this.loadFeatureCommon(part);\r\n\r\n return part\r\n }\r\n\r\n getActiveFeatureConditions() {\r\n return this.getArrayOfConditions()\r\n }\r\n\r\n // navigationSubItems(filters, searchText, forFeature, filterGroups, firstOpenedFeature, firstOpenedConditions) { // to do\r\n navigationSubItems(filters, searchText) {\r\n // const featuresList = (forFeature && forFeature.metaData.layerPosition === SIDE_POSITIONS[1]) ? this.featuresParts : this.features;\r\n const filteredAvailableFeatures = this.getFeaturesBySearchText(this.getFilteredFeaturesByFilters(filters, this.features), searchText);\r\n let featuresToDisplay = this.navigationSubItemsWithFilterMultipleConditions(this.getArrayOfConditions(true), filteredAvailableFeatures);\r\n // console.log(\"filterGroups\", filterGroups);\r\n return this.returnUniqueNavFeatures(featuresToDisplay)\r\n }\r\n\r\n navigationSubItemsWithFilter(propName, propValue, featuresToCheck = this.features) {\r\n return featuresToCheck.filter((feature) => {\r\n return feature.matchesMetaForCondition(propName, propValue);\r\n }).map(_ => new DesignNavigationItem(_.featureName, _));\r\n }\r\n\r\n navigationSubItemsWithFilterMultipleConditions(arrayOfConditions, featuresToCheck = this.features) {\r\n // console.log('arrayOfConditions', arrayOfConditions);\r\n // console.log('featuresToCheck', featuresToCheck);\r\n return featuresToCheck.filter((feature) => {\r\n return feature.notAvailableInVisualizer || arrayOfConditions.every((conditionObject) => {\r\n const {propName, propValue} = conditionObject;\r\n return feature.matchesMetaForCondition(propName, propValue);\r\n });\r\n })\r\n }\r\n\r\n setDefault(layout, setNotInVisFeature = false) {\r\n this.setFeatureGroupDefault(layout, setNotInVisFeature)\r\n }\r\n\r\n setLayerPositions = (activeFeature = this.activeFeature) => {\r\n if (!activeFeature) {\r\n return\r\n }\r\n const layout = this.getParent().layout;\r\n const conditions = this.getArrayOfConditions();\r\n if (layout && this.defaultLayerLayoutPositions && this.defaultLayerLayoutPositions[layout.type]) {\r\n Object.keys(this.layerPositions).forEach(key => {\r\n if (this.defaultLayerLayoutPositions[layout.type] === key\r\n && (!this.layerPositions[key] || !this.layerPositions[key].matchesMetaForArrayOfConditions(conditions))) {\r\n this.layerPositions[key] = activeFeature;\r\n } else if (activeFeature.dbFeature.metaData[\"layerPosition\"] !== key) {\r\n this.layerPositions[key] = null;\r\n }\r\n })\r\n } else {\r\n Object.keys(this.layerPositions).forEach(key => {\r\n if (layout.initialized) {\r\n if ((activeFeature.dbFeature.metaData[\"layerPosition\"] === key)\r\n && (this.layerPositions[key] && !this.layerPositions[key].matchesMetaForArrayOfConditions(conditions))) {\r\n this.layerPositions[key] = activeFeature;\r\n // } else if (this.setAllLayerPositions) {\r\n } else if (this.layerPositions[key]) { // here we have to change vanity cabinet to console for example\r\n const matchingPositionFeature = this.getMatchingPositionFeature(key);\r\n if (matchingPositionFeature) {\r\n this.layerPositions[key] = matchingPositionFeature;\r\n }\r\n }\r\n } else { // first time we should set everything by the default! // missing layers issue\r\n if ((activeFeature.dbFeature.metaData[\"layerPosition\"] === key)\r\n && (!this.layerPositions[key] || !this.layerPositions[key].matchesMetaForArrayOfConditions(conditions))) {\r\n this.layerPositions[key] = activeFeature;\r\n // } else if (this.setAllLayerPositions) {\r\n } else {\r\n const matchingPositionFeature = this.getMatchingPositionFeature(key);\r\n if (matchingPositionFeature) {\r\n this.layerPositions[key] = matchingPositionFeature;\r\n }\r\n }\r\n }\r\n })\r\n }\r\n }\r\n\r\n toggleLayerPositions() {\r\n Object.keys(this.layerPositions).forEach(key => {\r\n this.layerPositions[key] = this.disabled ? null : this.getMatchingPositionFeature(key)\r\n })\r\n }\r\n\r\n getMatchingPositionFeature = (position = \"\", fromFeature = this.activeFeature, fromLayout = null) => {\r\n if (fromFeature) { //just in case\r\n const name1 = fromFeature.getSplittedFeatureName();\r\n let arrayOfConditions = this.getArrayOfConditions();\r\n if (fromFeature.metaData[\"SkuName\"]) {\r\n arrayOfConditions.push({\r\n propName: \"SkuName\",\r\n propValue: fromFeature.metaData[\"SkuName\"]\r\n })\r\n }\r\n if (fromLayout) {\r\n let roomLayoutMeta = arrayOfConditions.find(condition => condition.propName === \"RoomLayout\");\r\n let roomSceneMeta = arrayOfConditions.find(condition => condition.propName === \"RoomScene\");\r\n if (roomLayoutMeta) {\r\n roomLayoutMeta.propValue = fromLayout.getCurrentLayoutAbbreviation();\r\n }\r\n if (roomSceneMeta) {\r\n roomSceneMeta.propValue = fromLayout.scene;\r\n }\r\n }\r\n const skuNamesPartIds = [\"shower_door\", \"walk_in_tub\", \"shower_pan_combo\"];\r\n const whereToFind = (!this.layerPositions || (position === Object.keys(this.layerPositions)[0])) ? this.features : this.featuresParts;\r\n return whereToFind.find((feature) => {\r\n return (skuNamesPartIds.includes(this.partId) || name1 === feature.getSplittedFeatureName())\r\n && feature.matchesMetaForArrayOfConditions(arrayOfConditions) && feature.metaData[\"layerPosition\"] === position\r\n });\r\n }\r\n return null\r\n };\r\n\r\n getArrayOfConditions() {\r\n const layout = this.getParent().layout;\r\n return [{\r\n propName: 'RoomLayout',\r\n propValue: layout.getCurrentLayoutAbbreviation()\r\n }, {\r\n propName: 'RoomScene',\r\n propValue: layout.scene\r\n }];\r\n }\r\n\r\n setLayers(layout) {\r\n if (this.activeFeature && (this.activeFeature.matchesMetaForArrayOfConditions(this.getArrayOfConditions()))) {\r\n if (this.hasAdditionalParts) {\r\n this.checkIfFeaturePartIsMatching();\r\n }\r\n return this._setLayers(layout);\r\n }\r\n this.setDefault(layout);\r\n return this._setLayers(layout);\r\n }\r\n showLayerPositionsModal() {\r\n return false\r\n }\r\n\r\n clickFromAllWalls(ignoreLocked) {\r\n if (this && this.dbFeature && this.dbFeature.sharedFeatureName) {\r\n console.log(`${this.partId}:`, this.dbFeature.sharedFeatureName);\r\n }\r\n this.handleClick(ignoreLocked, \"all_walls\");\r\n }\r\n\r\n tryToSetTheSameFeature(filteredFeatures = [], partName = \"\") {\r\n if (this.activeFeature && this.activeFeature.partName) {\r\n let splittedFromTheLayoutName = partName\r\n ? this.removeLayoutFromPartName(partName)\r\n : this.activeFeature.getMatchingFeatureName();\r\n this.activeFeature = filteredFeatures.find(feature => {\r\n return feature.getMatchingFeatureName() === splittedFromTheLayoutName\r\n });\r\n if (this.activeFeature) {\r\n return true\r\n }\r\n }\r\n return false\r\n }\r\n\r\n /**\r\n * @param ignoreLocked {boolean} // false by the default, is used by wizard ONLY\r\n */\r\n handleClick(ignoreLocked = false) {\r\n const parent = this.getParent();\r\n const {activeQuoteIndex} = store.getState().quotesState;\r\n parent.firstClick[activeQuoteIndex] = true; // allow to show active item\r\n const featureIsLocked = getFeatureIsLocked(this, ignoreLocked);\r\n if (featureIsLocked) {\r\n parent.activeLockedFeature = this;\r\n } else {\r\n if (parent.activeLockedFeature) {\r\n parent.activeLockedFeature = null;\r\n }\r\n this.featureClick();\r\n }\r\n }\r\n\r\n featureClick() {\r\n const parent = this.getParent();\r\n parent.placeholderChanged = true;\r\n if (this.notAvailableInVisualizer) {\r\n parent.activeNotInVisualizerFeature = this; // do not change the activeFeature (in order to keep the layer)\r\n } else if (parent.activeNotInVisualizerFeature) {\r\n parent.activeNotInVisualizerFeature = null; // remove it from other searches and so on\r\n parent.activeFeature = this;\r\n } else {\r\n parent.activeFeature = this;\r\n }\r\n this.featureClicked();\r\n }\r\n\r\n hideLayers() {\r\n if (this.activeFeature) {\r\n this.activeFeature.layer.src = '';\r\n }\r\n if (Array.isArray(this.activeFeatureParts) && this.activeFeatureParts.length) {\r\n this.activeFeatureParts.forEach((activeFeaturePart) => {\r\n if (activeFeaturePart && activeFeaturePart.layer) {\r\n activeFeaturePart.layer.src = '';\r\n }\r\n })\r\n }\r\n if (this.placeholderFeature) {\r\n this.placeholderFeature.layer.src = '';\r\n }\r\n if (this.layerPositions) {\r\n Object.keys(this.layerPositions).forEach(key => {\r\n if (this.layerPositions[key]) {\r\n this.layerPositions[key].layer.src = '';\r\n }\r\n })\r\n }\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n\r\n const getZIndex = (feature, partId = null) => {\r\n return feature.metaData[\"ZSorting\"] ? feature.metaData[\"ZSorting\"] * 1000 : zIndexes[partId || this.partId];\r\n }\r\n\r\n if (this.layerPositions) {\r\n Object.keys(this.layerPositions).forEach((key, keyIndex) => {\r\n const feature = this.layerPositions[key];\r\n if (feature) {\r\n feature.layer.zIndex = getZIndex(feature) + keyIndex*10;\r\n }\r\n })\r\n } else if (zIndexes && this.activeFeature) {\r\n this.activeFeature.layer.zIndex = getZIndex(this.activeFeature);\r\n if (this.hasAdditionalParts && this.activeFeatureParts && this.activeFeatureParts.length) {\r\n this.activeFeatureParts.forEach((activeFeaturePart, keyIndex) => {\r\n activeFeaturePart.layer.zIndex = getZIndex(activeFeaturePart, this.additionalPartPartId) + (keyIndex + 1) * 10;\r\n });\r\n }\r\n }\r\n }\r\n\r\n removeEdgeFromPartName(partName) {\r\n const filterGroups = store.getState().filterState.filterGroups;\r\n const edgeFilterGroup = filterGroups.find(group => group.name === \"Edge\" || group.name === \"Edge Profile\");\r\n if (edgeFilterGroup && edgeFilterGroup.values && edgeFilterGroup.values.length) {\r\n const edgeFilterGroupValues = edgeFilterGroup.values.sort((a,b) => {\r\n return a.value && b.value && (b.value.length - a.value.length)\r\n }); // 1st should be \"Full Bullnose\", then simple \"Bullnose\"\r\n edgeFilterGroupValues.forEach((filterGroupValue) => { // arrayOf {id: 293, value: \"Eased\", displayText: \"Eased\", parent_id: null, icon: \"\", …}\r\n partName = partName.split(\" \"+filterGroupValue.value).join(\"\");\r\n });\r\n }\r\n return partName\r\n }\r\n\r\n getCountertopGroupsSplittedFeatureName = () => {\r\n if (this._countertopGroupsCustomDisplayName == null) {\r\n this._countertopGroupsCustomDisplayName = this.dbFeature.sharedFeatureName;\r\n }\r\n return this._countertopGroupsCustomDisplayName\r\n };\r\n\r\n getSplittedFeatureName = () => {\r\n if (this._customDisplayName == null) {\r\n this._customDisplayName = this.dbFeature.sharedFeatureName || this.partName || \"\";\r\n if (this.partId === \"center_island_countertop\") {\r\n this._customDisplayName = this._customDisplayName\r\n .replace(/2 0 /g, \"\")\r\n .replace(/Center Island Countertop 1 /g, \"\");\r\n }\r\n }\r\n return this._customDisplayName\r\n };\r\n\r\n getMatchingFeatureName = () => {\r\n return this.getSplittedFeatureName()\r\n };\r\n\r\n getModuleFeatureName = () => {\r\n // return this.partName.split(\" M_\")[0];\r\n return this.partName.split(\" M\")[0];\r\n };\r\n\r\n featureIsMatchingFilters(currentFeature, activeFilters, filters = []) {\r\n return filters.every(filter => {\r\n return activeFilters[filter.id]\r\n && currentFeature.dbFeature.filterValueIDs[filter.id]\r\n && currentFeature.dbFeature.filterValueIDs[filter.id].includes(activeFilters[filter.id][0])\r\n })\r\n }\r\n\r\n getActiveFeaturePartsAccordingToActiveFeature(fromFeature = this.activeFeature, activeFeatureConditions = []) {\r\n let activeFeatureParts = [];\r\n if (fromFeature && fromFeature.partNumber) {\r\n let activeFeaturePart;\r\n const name1 = fromFeature.getSplittedFeatureName();\r\n // console.log(\"name1\", name1);\r\n let arrayOfConditions = activeFeatureConditions.length\r\n ? activeFeatureConditions\r\n : this.getActiveFeatureConditions(fromFeature);\r\n // if (this.partId === \"right_wall\") {\r\n // arrayOfConditions = arrayOfConditions.filter(condition => condition.propName !== \"MirrorSize\");\r\n // }\r\n activeFeatureParts = this.featuresParts.filter((feature) => name1 === feature.getSplittedFeatureName());\r\n // console.log(\"this.featuresParts\", this.featuresParts);\r\n // console.log(\"activeFeatureParts\", activeFeatureParts);\r\n if (activeFeatureParts.length) {\r\n activeFeaturePart = activeFeatureParts.find((feature) => {\r\n return feature.matchesMetaForArrayOfConditions(arrayOfConditions)\r\n });\r\n if (!activeFeaturePart) {\r\n activeFeaturePart = activeFeatureParts[0];\r\n }\r\n }\r\n activeFeatureParts = activeFeaturePart ? [activeFeaturePart] : [];\r\n activeFeatureParts.forEach((activeFeaturePart) => {\r\n activeFeaturePart.disabled = this.disabled\r\n });\r\n }\r\n return activeFeatureParts\r\n }\r\n\r\n checkIfFeaturePartIsMatching() {\r\n if (this.activeFeatureParts && this.activeFeatureParts.length) {\r\n const activeFeatureConditions = this.getActiveFeatureConditions();\r\n const name1 = this.activeFeature.getSplittedFeatureName();\r\n const activeFeaturePart = this.activeFeatureParts[0];\r\n if (!(activeFeaturePart.matchesMetaForArrayOfConditions(activeFeatureConditions)\r\n && name1 === activeFeaturePart.getSplittedFeatureName())) {\r\n this.activeFeatureParts = this.setActiveFeatureParts(this.activeFeature, activeFeatureConditions);\r\n }\r\n } else {\r\n this.activeFeatureParts = this.setActiveFeatureParts();\r\n }\r\n }\r\n\r\n setActiveFeatureParts(fromFeature = this.activeFeature, activeFeatureConditions = []) {\r\n return this.getActiveFeaturePartsAccordingToActiveFeature(fromFeature, activeFeatureConditions);\r\n }\r\n\r\n}\r\n","import {getCurrentLayout} from \"../bvcomponents/appLayout\";\r\nimport {featureThumbnailUrl, getCartItemObject} from \"./helpers\";\r\nimport store from \"../store\";\r\nimport {setActiveQuoteIndex, setQuotes} from \"../actions/roomsFunctions\";\r\nimport {setQtActiveCategory} from \"../actions/actionFunctions\";\r\nimport {getCommonVisualizerType} from \"../config\";\r\nimport {hasSubscriptionForRoom} from \"./visualizerSwitchingFunctions\";\r\nimport {updateCurrentQuote} from \"./quotesFunctions\";\r\nimport {updateAllWizardValues} from \"../actions/wizardFunctions\";\r\nimport {showWizardInsteadOfQT} from \"../bvcomponents/look/lookNavigation/lookMain/lookWizard/lookWizardFunctions\";\r\nimport { getNavItems } from \"../bvcomponents/sqft/helpers/sqftHelperUi\";\r\n\r\n/**\r\n * @param qtCatName {string}\r\n * @param quoteIndex {number}\r\n * returns {string}\r\n */\r\nexport const getRoomImageFromQtCategory = (qtCatName, quoteIndex) => {\r\n const {fabricatorState, cartState} = store.getState();\r\n if (!fabricatorState.settings.useCategorySwitching) {\r\n return \"\"\r\n }\r\n const lowerCasedVisualizerType = getCommonVisualizerType().toLowerCase();\r\n if (!qtCatName && cartState.cartItems.length && Number.isInteger(quoteIndex)) {\r\n const {cartItems} = cartState;\r\n const existingAddedCartItem = cartItems.find(cItem => cItem.partId === \"room\" && (cItem.currentQuote === quoteIndex));\r\n if (existingAddedCartItem && !featureIsMatchingQtCatName(existingAddedCartItem.cartFeature, lowerCasedVisualizerType)\r\n && (!fabricatorState.settings.allowVisualizerSwitching || !hasSubscriptionForRoom(getRoomNameToCompare(existingAddedCartItem.cartFeature)))) {\r\n return featureThumbnailUrl(existingAddedCartItem.cartFeature)\r\n }\r\n return \"\"\r\n }\r\n const currentRoomName = qtCatName.trim().toLowerCase();\r\n const layout = getCurrentLayout();\r\n const roomFg = layout.getFeatureGroupByPartId(\"room\");\r\n if (roomFg) {\r\n const fgNavItems = layout.designNavigationItems({part: roomFg}, null, \"\", false, \"all\");\r\n const roomFeatureNavItem = fgNavItems.find(navItem => {\r\n return featureIsMatchingQtCatName(navItem.part, currentRoomName) && !featureIsMatchingQtCatName(navItem.part, lowerCasedVisualizerType)\r\n });\r\n if (roomFeatureNavItem) {\r\n return featureThumbnailUrl(roomFeatureNavItem.part)\r\n }\r\n }\r\n return \"\"\r\n}\r\n\r\n/**\r\n * @param cartItems {[cartItemInterface]}\r\n * @param quoteIndex {number}\r\n * returns {string}\r\n */\r\nexport const getCurrentQuoteRoomCartItem = (cartItems, quoteIndex) => {\r\n return cartItems.find(cItem => cItem.partId === \"room\" && cItem.currentQuote === quoteIndex)\r\n}\r\n\r\n/**\r\n * @param roomFeature {featureInterface}\r\n * returns {string}\r\n */\r\nexport const getRoomNameToCompare = (roomFeature) => {\r\n if (!roomFeature) {\r\n return \"\"\r\n }\r\n if (roomFeature.getLowerCasedCustomDisplayName) {\r\n return roomFeature.getLowerCasedCustomDisplayName() || roomFeature.dbFeature.sharedFeatureName || \"\"\r\n }\r\n return roomFeature.dbFeature.sharedFeatureName || \"\"\r\n}\r\n\r\n/**\r\n * @param cartItems {[cartItemInterface]}\r\n * @param quoteIndex {number}\r\n * @param withVisualizerCheck {boolean}\r\n * returns {string}\r\n */\r\nexport const getCurrentQuoteRoomName = (cartItems, quoteIndex, withVisualizerCheck = false) => {\r\n const quoteRoomCartItem = getCurrentQuoteRoomCartItem(cartItems, quoteIndex);\r\n if (quoteRoomCartItem && quoteRoomCartItem.cartFeature) {\r\n return getRoomNameToCompare(quoteRoomCartItem.cartFeature)\r\n }\r\n return withVisualizerCheck ? getCommonVisualizerType() : \"\"\r\n}\r\n\r\n/**\r\n * @param qtCategoryName {string}\r\n * @param fabricatorSettings {object}\r\n * returns {object}\r\n */\r\nexport const getRoomCartItemForCategoryName = (qtCategoryName, fabricatorSettings) => {\r\n const currentRoomName = qtCategoryName.trim().toLowerCase();\r\n const layout = getCurrentLayout();\r\n\r\n //1.) get room from qtCategories\r\n if (layout.qtCategories) {\r\n for (let i = 0; i < layout.qtCategories.length; i++) {\r\n const qtCategory = layout.qtCategories[i];\r\n if (qtCategory.subParts) {\r\n const roomFg = qtCategory.subParts.find(subPart => subPart.part.partId === \"room\");\r\n if (roomFg) {\r\n const fgNavItems = layout.designNavigationItems(roomFg, null, \"\", false, true);\r\n let roomFeatureNavItem = fgNavItems.find(navItem => featureIsMatchingQtCatName(navItem.part, currentRoomName));\r\n if (!roomFeatureNavItem) {\r\n let settings = fabricatorSettings;\r\n if (!settings) {\r\n settings = store.getState().fabricatorState.settings;\r\n }\r\n if (settings.allowVisualizerSwitching) {\r\n const visualizerRoomName = getCommonVisualizerType(document.kvConfig.visualizerType);\r\n if (visualizerRoomName !== qtCategoryName) {\r\n // QCDES-3163 cases when categories are not the same as room names, but we still need to add Room Cart Item\r\n roomFeatureNavItem = fgNavItems.find(navItem => featureIsMatchingQtCatName(navItem.part, visualizerRoomName));\r\n }\r\n }\r\n }\r\n if (roomFeatureNavItem) {\r\n return getCartItemObject(roomFeatureNavItem.part, 1, qtCategory.name)\r\n }\r\n }\r\n }\r\n }\r\n }\r\n\r\n //2.) get room from room Groups\r\n const roomsFeatureGroup = layout.getSubPartFromQtCategories('room');\r\n const roomsNavItems = getNavItems(roomsFeatureGroup, \"\", {}, false, true);\r\n\r\n if (roomsNavItems) {\r\n const roomFeatureNavItem = roomsNavItems.find(navItem => featureIsMatchingQtCatName(navItem.part, currentRoomName));\r\n if (roomFeatureNavItem) {\r\n return getCartItemObject(roomFeatureNavItem.part, 1, qtCategoryName);\r\n }\r\n }\r\n\r\n return null\r\n}\r\n\r\n/**\r\n * @param newCartItems {[cartItemInterface]}\r\n * @param setNewRoomIndex {boolean}\r\n * @param shouldCreateNewQuotes {boolean}\r\n * returns {[cartItemInterface]}\r\n */\r\nexport const updateQuoteRoomsForCartItems = async (newCartItems, setNewRoomIndex = false, shouldCreateNewQuotes = true) => {\r\n const {fabricatorState, qtState, cartState, quotesState, wizardState} = store.getState();\r\n if (!fabricatorState.settings.useCategorySwitching) {\r\n return newCartItems\r\n }\r\n const {qtActiveCategory} = qtState;\r\n const {cartItems} = cartState;\r\n const {quotes, activeQuoteIndex} = quotesState;\r\n const {wizardList, wizardIsActive} = wizardState;\r\n\r\n const createdRoomCartItems = [];\r\n const layout = getCurrentLayout();\r\n\r\n for (const newCartItem of [...newCartItems]) { // here we are changing array to prevent looping each time we add a new cart item below\r\n\r\n const withCreated = [...cartItems, ...createdRoomCartItems];\r\n\r\n const currentRoomName = newCartItem.qtCatName ? newCartItem.qtCatName.trim().toLowerCase() : qtActiveCategory.trim().toLowerCase();\r\n const existingCartRoom = getCurrentQuoteRoomCartItem(withCreated, activeQuoteIndex);\r\n\r\n console.log(\"existingCartRoom\", existingCartRoom);\r\n\r\n if (existingCartRoom && existingCartRoom.cartFeature && (\r\n !showWizardInsteadOfQT(wizardList, wizardIsActive)\r\n && layout.qtCategories && layout.qtCategories.length > 1\r\n && !featureIsMatchingQtCatName(existingCartRoom.cartFeature, currentRoomName)) || (\r\n fabricatorState.settings.allowVisualizerSwitching && existingCartRoom && existingCartRoom.fromVisualizerType && (\r\n existingCartRoom.fromVisualizerType !== document.kvConfig.visualizerType\r\n )\r\n )) {\r\n\r\n if (!getRoomCartItemForCategoryName(currentRoomName, fabricatorState.settings)) { // this checks if room is available for current category\r\n break;\r\n }\r\n\r\n const existingAddedCartItem = withCreated.find(cItem => cItem.partId === \"room\" && featureIsMatchingQtCatName(cItem.cartFeature, currentRoomName));\r\n let newActiveQuoteIndex = 0;\r\n if (existingAddedCartItem) {\r\n newActiveQuoteIndex = existingAddedCartItem.currentQuote;\r\n } else if (shouldCreateNewQuotes) { // here we add a new room and add a new room cartItem\r\n const currentQuote = await updateCurrentQuote();\r\n const newQuotes = [...currentQuote, {}];\r\n newActiveQuoteIndex = quotes.length; // for example, if length is 2 (we are adding 2 index(0 and 1 already exist))\r\n store.dispatch(setQuotes(newQuotes));\r\n // console.log(\"newCreatedRooms\", newQuotes);\r\n const roomCartItem = getRoomCartItemForCategoryName(currentRoomName, fabricatorState.settings);\r\n if (roomCartItem && !newCartItems.some(cItem => {\r\n // QCDES-3901 if we are already adding room to the cart - no need to add another room\r\n return (cItem.currentQuote === roomCartItem.currentQuote)\r\n && (cItem.partId === roomCartItem.partId)\r\n && (cItem.cartFeature.dbFeature.id === roomCartItem.cartFeature.dbFeature.id)\r\n })) {\r\n const newRoomCartItem = Object.assign({}, roomCartItem, {\r\n currentQuote: newActiveQuoteIndex\r\n })\r\n newCartItems.push(newRoomCartItem);\r\n createdRoomCartItems.push(newRoomCartItem);\r\n }\r\n }\r\n console.log(\"newActiveQuoteIndex\", newActiveQuoteIndex);\r\n newCartItem.currentQuote = newActiveQuoteIndex;\r\n if (setNewRoomIndex) {\r\n store.dispatch(setActiveQuoteIndex(newActiveQuoteIndex));\r\n }\r\n } else if (!existingCartRoom && (newCartItem.partId !== \"room\")) { // we should add room cart item in current quote\r\n const roomCartItem = getRoomCartItemForCategoryName(currentRoomName, fabricatorState.settings);\r\n if (roomCartItem) {\r\n const newRoomCartItem = Object.assign({}, roomCartItem, {\r\n currentQuote: Number.isInteger(newCartItem.currentQuote) ? newCartItem.currentQuote : activeQuoteIndex\r\n })\r\n newCartItems.push(newRoomCartItem);\r\n createdRoomCartItems.push(newRoomCartItem);\r\n }\r\n }\r\n\r\n }\r\n\r\n return newCartItems\r\n}\r\n\r\n\r\n/**\r\n * update isVisibleInSQFT status\r\n */\r\nexport const updateSQFTCreatedStatusForQuotes = async () => {\r\n const {quotes} = store.getState().quotesState;\r\n const updatedQuotes = quotes.map(quote => {\r\n quote.isVisibleInSQFT = true\r\n return {...quote}\r\n })\r\n\r\n store.dispatch(setQuotes(updatedQuotes));\r\n}\r\n\r\n/**\r\n * @param quoteRoomName {string}\r\n * @param feature {featureInterface}\r\n */\r\nexport const getQtCategoryFromQuoteRoomName = (quoteRoomName, feature = null) => {\r\n const layout = getCurrentLayout();\r\n if (!layout.qtCategories) {\r\n return null\r\n }\r\n return layout.qtCategories.find(qtCat => {\r\n if (feature) {\r\n return featureIsMatchingQtCatName(feature, qtCat.name, true)\r\n }\r\n return qtCat.name.trim().toLowerCase() === quoteRoomName\r\n });\r\n}\r\n\r\n/**\r\n * @param feature {featureInterface}\r\n * @param qtCategoryName {string}\r\n * @param needToLowerCaseName {boolean}\r\n * @returns {boolean}\r\n */\r\nexport const featureIsMatchingQtCatName = (feature, qtCategoryName = \"\", needToLowerCaseName = false) => {\r\n if (!feature || !qtCategoryName) {\r\n return false\r\n }\r\n const checkCatName = needToLowerCaseName ? qtCategoryName.trim().toLowerCase() : qtCategoryName;\r\n\r\n // we need to have both compares here because:\r\n // bugfix/fix for comparing room names (customDisplayName is 'A - Kitchen', sharedFeatureName is 'Kitchen')\r\n // bugfix/fix for comparing room names (customDisplayName is 'Shower', sharedFeatureName is 'Bathroom', qtCat - 'Shower')\r\n const customLowerCasedName = feature.getLowerCasedCustomDisplayName ? feature.getLowerCasedCustomDisplayName() : \"\";\r\n const originalLowerCasedName = feature.getLowerCasedSharedFeatureName ? feature.getLowerCasedSharedFeatureName() : \"\";\r\n return (customLowerCasedName === checkCatName) || (originalLowerCasedName === checkCatName)\r\n}\r\n\r\n/**\r\n * update qtActiveCategory if room was selected and qtActiveCategory is not set\r\n * @param quoteIndex {number}\r\n */\r\nexport const checkIfNeedToSetNewCategory = (quoteIndex = 0) => {\r\n const {fabricatorState, cartState} = store.getState();\r\n if (fabricatorState.settings.useCategorySwitching) {\r\n const selectedQuoteRoomCartItem = getCurrentQuoteRoomCartItem(cartState.cartItems, quoteIndex);\r\n const qtCategory = getQtCategoryFromQuoteRoomName(\"\", selectedQuoteRoomCartItem ? selectedQuoteRoomCartItem.cartFeature : null);\r\n if (qtCategory) {\r\n store.dispatch(setQtActiveCategory(qtCategory.name));\r\n return true\r\n }\r\n }\r\n return false\r\n}\r\n\r\n/**\r\n * here we check if new room is needed if we are adding a new room, but there is already added another room\r\n * @param newCartItems {[cartItemInterface]}\r\n * @returns {cartItemInterface}\r\n */\r\nexport const getOtherRoomCartItemThatIsAddedToCurrentQuote = (newCartItems) => {\r\n if (newCartItems.length !== 1 || newCartItems[0].partId !== \"room\") {\r\n return null\r\n }\r\n const {cartState, quotesState} = store.getState();\r\n const addedRoom = getCurrentQuoteRoomCartItem(cartState.cartItems, quotesState.activeQuoteIndex);\r\n if (addedRoom && (addedRoom.cartFeature.partName !== newCartItems[0].cartFeature.partName)) {\r\n return addedRoom\r\n }\r\n return null\r\n}\r\n\r\n/**\r\n * here we create a new room (quote) and set new cart item quoteIndex\r\n * @param newRoomCartItem {cartItemInterface}\r\n * @param oldRoomCartItem {cartItemInterface}\r\n * @returns {cartItemInterface}\r\n */\r\nexport const addNewQuoteWithNewRoomCartItem = async (newRoomCartItem, oldRoomCartItem) => {\r\n const {quotesState, wizardState, fabricatorState} = store.getState();\r\n const {quotes, activeQuoteIndex} = quotesState;\r\n\r\n const currentQuote = await updateCurrentQuote();\r\n const newQuotes = [...currentQuote, {}];\r\n // console.log(\"newCreatedRooms\", newQuotes);\r\n const newActiveQuoteIndex = quotes.length; // for example, if length is 2 (we are adding 2 index(0 and 1 already exist))\r\n newRoomCartItem = Object.assign({}, newRoomCartItem, {\r\n currentQuote: newActiveQuoteIndex\r\n })\r\n store.dispatch(setQuotes(newQuotes));\r\n store.dispatch(setActiveQuoteIndex(newActiveQuoteIndex));\r\n if (oldRoomCartItem && wizardState && wizardState.allWizardsValues.length && wizardState.wizardActiveItem) {\r\n const newValues = wizardState.allWizardsValues.map(wizObject => {\r\n if (wizObject.quoteIndex === activeQuoteIndex\r\n && wizObject.isLastActiveWizard\r\n && wizObject.wizardItemId === wizardState.wizardActiveItem.id\r\n && wizObject.wizardSelectedValues\r\n && (Object.keys(wizObject.wizardSelectedValues).length === (wizardState.wizardActiveStep + 1))\r\n && wizObject.wizardSelectedValues[wizardState.wizardActiveStep].partId === \"room\"\r\n && wizObject.wizardSelectedValues[wizardState.wizardActiveStep].selectedFeature\r\n && wizObject.wizardSelectedValues[wizardState.wizardActiveStep].selectedFeature.dbFeature.id !== oldRoomCartItem.cartFeature.dbFeature.id) {\r\n console.log(\"changing allSelectedWizardValues, we need to make sure they are correctly updated\", );\r\n if (Object.keys(wizObject.wizardSelectedValues).length === 1 && fabricatorState.settings.allowVisualizerSwitching) {\r\n // we don't need to keep one item selected wizard in old quoteIndex\r\n return null\r\n } else {\r\n wizObject.wizardSelectedValues[wizardState.wizardActiveStep] = Object.assign(\r\n {},\r\n wizObject.wizardSelectedValues[wizardState.wizardActiveStep],\r\n {selectedFeature: oldRoomCartItem.cartFeature}\r\n )\r\n }\r\n }\r\n return wizObject\r\n }).filter(wizObject => wizObject)\r\n store.dispatch(updateAllWizardValues(newValues))\r\n }\r\n return newRoomCartItem\r\n}\r\n","import {\r\n CABINET_COMMON_COLOR_PART_IDS,\r\n FEATUREGROUP_PART_ID,\r\n MITER_EDGE_NAMES,\r\n MITER_UNDERWRAP_EDGE_NAMES,\r\n SHAPE_PART_ID,\r\n SHAPE_TYPE,\r\n SQFT_APPLIANCES\r\n} from \"../constants\";\r\nimport store from \"./../../../store\";\r\nimport {getCountertopFeatureGroup, getCurrentLayout} from \"../../appLayout\";\r\nimport workspace from \"../components/canvas/core/workspace\";\r\nimport {getStringFeatureName} from \"../../../misc/helpers\";\r\nimport {getEdgeFeatures} from \"./shapeHelper\";\r\nimport {isSFTCabinetsGroup} from \"./sqftNavigationHelper\";\r\nimport {getFeatureGroup} from \"./sqftHelperUi\";\r\nimport sqftConfig from \"../components/canvas/store/sqftConfig\";\r\n\r\nexport const getShapeFeatureId = (partId) => {\r\n const state = store.getState();\r\n const { sqftFromFeature } = state.sqftState;\r\n const { wizardIsActive, wizardSelectedValues } = state.wizardState;\r\n const layout = getCurrentLayout();\r\n const isCabinetsMode = isSFTCabinetsGroup();\r\n\r\n // 1) Assign feature by sqftFromFeature that was passed from visualizer quoting tool\r\n if (wizardIsActive) {\r\n for (const key in wizardSelectedValues) {\r\n if (wizardSelectedValues.hasOwnProperty(key)) {\r\n const selectedFeature = wizardSelectedValues[key] ? wizardSelectedValues[key].selectedFeature : null;\r\n if (selectedFeature && selectedFeature.partId === partId) {\r\n return selectedFeature.dbFeature.id;\r\n }\r\n }\r\n }\r\n }\r\n\r\n //1.1) For the cabinets we will assign activeFeature from featureGroup\r\n if (!isCabinetsMode && sqftFromFeature && sqftFromFeature.cartFeature.partId === partId) {\r\n console.log(\"new shape featureId from sqftFromFeature\", sqftFromFeature.cartFeature.dbFeature.id);\r\n return sqftFromFeature.cartFeature.dbFeature.id;\r\n }\r\n\r\n //2) Assign default active feature group feature for the part id\r\n const featureGroup = layout.getFeatureGroupByPartId(partId);\r\n if (featureGroup && featureGroup.activeFeature) {\r\n console.log(\"new shape featureId featureGroup activeFeature\", featureGroup.activeFeature.dbFeature.id);\r\n return featureGroup.activeFeature.dbFeature.id;\r\n }\r\n\r\n //2.5) Assign feature for slab placeholder\r\n if (partId === SHAPE_PART_ID.slabPlaceHolder) {\r\n const countertopFeatureGroup = getCountertopFeatureGroup();\r\n if (sqftFromFeature && sqftFromFeature.cartFeature.partId === countertopFeatureGroup.partId) {\r\n console.log(\"new shape featureId from sqftFromFeature for the slabPlaceHolder\", sqftFromFeature.cartFeature.dbFeature.id);\r\n return sqftFromFeature.cartFeature.dbFeature.id;\r\n }\r\n\r\n if (countertopFeatureGroup && countertopFeatureGroup.activeFeature) {\r\n console.log(\"new shape featureId featureGroup activeFeature for the slabPlaceHolder\", countertopFeatureGroup.activeFeature.dbFeature.id);\r\n return countertopFeatureGroup.activeFeature.dbFeature.id;\r\n }\r\n }\r\n\r\n //3) Assign any feature\r\n //todo\r\n console.log(\"new shape featureId\", null);\r\n return null\r\n}\r\n\r\nexport const getFeatureNameById = (featureId) => {\r\n const layout = getCurrentLayout();\r\n const feature = layout.getFeatureById(featureId);\r\n const intl = workspace.intl;\r\n const state = store.getState();\r\n const fabricatorData = state.fabricatorState;\r\n\r\n return getStringFeatureName(feature, intl.messages, intl.locale, fabricatorData);\r\n}\r\n\r\nexport const shouldChangeCabinetShapePartId = (relatedParentFeature, newFeature) => {\r\n //console.log(\"relatedParentFeature\", relatedParentFeature);\r\n //console.log(\"sqftFromFeature\", sqftFromFeature);\r\n if (!newFeature || !relatedParentFeature) {\r\n return false\r\n }\r\n\r\n const sqftFromFeatureParentGroup = newFeature.getParent();\r\n const relatedParentParentGroup = relatedParentFeature.getParent();\r\n\r\n if ((CABINET_COMMON_COLOR_PART_IDS).includes(sqftFromFeatureParentGroup.partId)\r\n && (CABINET_COMMON_COLOR_PART_IDS).includes(relatedParentParentGroup.partId)\r\n ) {\r\n const sqftFromFeatureFeatureName = newFeature.getFeatureName();\r\n const relatedParentFeatureName = relatedParentFeature.getFeatureName();\r\n //console.log(\"sqftFromFeatureFeatureName\", sqftFromFeatureFeatureName);\r\n //console.log(\"relatedParentFeatureName\", relatedParentFeatureName);\r\n\r\n if (sqftFromFeatureFeatureName !== relatedParentFeatureName) {\r\n return true\r\n }\r\n }\r\n\r\n return false\r\n}\r\n\r\nexport const getEdgeFilterByValue = (filterValue = 'Waterfall') => {\r\n const state = store.getState();\r\n const filterGroups = state.filterState.filterGroups;\r\n const edgeFilterGroup = filterGroups.find(group => group.name === \"Edge\" || group.name === \"Edge Profile\");\r\n\r\n return edgeFilterGroup ? edgeFilterGroup.values.filter(group => group.value === filterValue) : [];\r\n};\r\n\r\nexport const isWaterfallFeature = (edgeFeatureId) => {\r\n const navItems = getEdgeFeatures();\r\n if (!navItems) {\r\n return false\r\n }\r\n let edgeFeature = navItems.find(edge => edge.part.dbFeature.id === edgeFeatureId);\r\n if (!edgeFeature) {\r\n return false\r\n }\r\n\r\n const intl = workspace.intl;\r\n const state = store.getState();\r\n const fabricatorData = state.fabricatorState;\r\n let edgeNameTranslated = getStringFeatureName(edgeFeature.part, intl.messages, intl.locale, fabricatorData);\r\n\r\n return edgeNameTranslated.toLowerCase().includes('waterfall')\r\n}\r\n\r\nexport const isMiterEdge = (featureId) => {\r\n const navItems = getEdgeFeatures();\r\n if (!navItems) {\r\n return false\r\n }\r\n\r\n let edge = navItems.find(edge => edge.part.dbFeature.id === featureId);\r\n if (!edge) {\r\n return false\r\n }\r\n\r\n const edgeName = edge.part.getFeatureName();\r\n\r\n return MITER_EDGE_NAMES.includes(edgeName);\r\n}\r\n\r\nexport const getEdgeByFeatureId = (featureId) => {\r\n const navItems = getEdgeFeatures();\r\n if (!navItems) {\r\n return null\r\n }\r\n\r\n let edge = navItems.find(edge => edge.part.dbFeature.id === featureId);\r\n if (!edge) {\r\n return null\r\n }\r\n\r\n return edge\r\n}\r\n\r\nconst parseNumberFromString = (str) => {\r\n // Convert the string \"1 1/2\" to 1.5\r\n const fractionMatch = str.match(/(\\d+)\\s+(\\d+)\\/(\\d+)/);\r\n if (fractionMatch) {\r\n const [_, whole, numerator, denominator] = fractionMatch;\r\n void _;\r\n return parseFloat(whole) + (parseFloat(numerator) / parseFloat(denominator));\r\n }\r\n\r\n // Convert a string like \"1 1/2\", \"2-3\" into separate numbers\r\n const numberMatch = str.match(/\\d+(\\.\\d+)?/g);\r\n if (numberMatch) {\r\n return Math.max(...numberMatch.map(Number));\r\n }\r\n\r\n return null;\r\n};\r\n\r\nexport const getMiterEdgeHeight = (featureId = null) => {\r\n //get height from featureName\r\n if (featureId) {\r\n const miterEdgeFeature = getEdgeByFeatureId(featureId);\r\n if (miterEdgeFeature) {\r\n const edgeName = miterEdgeFeature.part.getFeatureName();\r\n\r\n const heightFromFeatureName = parseNumberFromString(edgeName);\r\n\r\n if (edgeName !== 'Rimrock - 981' // don't get height from this edge\r\n && heightFromFeatureName > 0.5\r\n ) {\r\n return heightFromFeatureName\r\n }\r\n }\r\n }\r\n\r\n return sqftConfig.measureUnit === \"Imperial\" ? sqftConfig.miteredEdgeAdditionalImperialArea : sqftConfig.miteredEdgeAdditionalMetricArea;\r\n};\r\n\r\nexport const getMiterEdgeFeature = () => {\r\n const navItems = getEdgeFeatures();\r\n if (!navItems) {\r\n return null\r\n }\r\n\r\n let edgeFeature = navItems.find(edge => {\r\n return MITER_EDGE_NAMES.includes(edge.part.partName);\r\n });\r\n\r\n if (!edgeFeature) {\r\n edgeFeature = navItems.find(edge => edge.part.partName.toLowerCase().includes('miter'));\r\n }\r\n\r\n if (edgeFeature) {\r\n return edgeFeature.part\r\n }\r\n\r\n return null\r\n}\r\n\r\nexport const getMiterUnderwrap = () => {\r\n const navItems = getEdgeFeatures();\r\n if (!navItems) {\r\n return null\r\n }\r\n\r\n let edgeFeature = navItems.find(edge => {\r\n return MITER_UNDERWRAP_EDGE_NAMES.includes(edge.part.partName.toLowerCase());\r\n });\r\n\r\n if (edgeFeature) {\r\n return edgeFeature.part\r\n }\r\n\r\n return null\r\n}\r\n\r\nexport const getBumpoutFeature = () => {\r\n const bumpoutFeatureGroup = getFeatureGroup(FEATUREGROUP_PART_ID.specialty_cut_and_designs);\r\n const layout = getCurrentLayout();\r\n\r\n return layout.designNavigationItems(bumpoutFeatureGroup,\r\n {},\r\n 'bumpout',\r\n true,\r\n true,\r\n [],\r\n { firstFeature: null, firstConditions: null },\r\n )\r\n}\r\n\r\nexport const isFeatureUnitUseEach = (feature) => {\r\n return feature.dbFeature.unit === \"Each\"\r\n}\r\n\r\nexport const createApplianceOnTheWorkspace = (itemName, featureId = null, size = null) => {\r\n const getSize = (itemName) => {\r\n switch (itemName) {\r\n case SQFT_APPLIANCES.sink:\r\n return {width: 22, height: 30}\r\n case SQFT_APPLIANCES.doubleSink:\r\n return {width: 22, height: 33}\r\n default:\r\n return {width: 30, height: 26}\r\n }\r\n }\r\n if (!size) {\r\n size = getSize(itemName);\r\n }\r\n\r\n let iconFullName = 'icon-'+ itemName +'-placeholder';\r\n let svg = document.getElementById(iconFullName);\r\n if (!svg) {\r\n console.log('svg not found', 'icon-'+ itemName +'-placeholder');\r\n return\r\n }\r\n console.log('svg', iconFullName);\r\n\r\n let img = new Image(),\r\n xml = new XMLSerializer().serializeToString(svg), // get svg data\r\n svg64 = btoa(xml); // make it base64\r\n\r\n img.src = 'data:image/svg+xml;base64,' + svg64; // set it as the source of the img element\r\n\r\n const movableImage = workspace.addImage(img, size.width, size.height, null, null, SHAPE_TYPE.appliances, itemName, function () {});\r\n movableImage.setFeatureId(featureId);\r\n\r\n return movableImage;\r\n}\r\n\r\nexport const getDbFeatureName = (dbFeature) => {\r\n return dbFeature.metaData.ActualDisplayedName\r\n ? dbFeature.customDisplayName && (dbFeature.customDisplayName !== dbFeature.sharedFeatureName)\r\n ? dbFeature.customDisplayName\r\n : metaData.ActualDisplayedName[0]\r\n : dbFeature.customDisplayName || dbFeature.displayName || dbFeature.sharedFeatureName;\r\n};\r\n\r\n/**\r\n * Sort features By Width ASC\r\n * @param features\r\n */\r\nexport const getSortedFeatures = (features) => {\r\n features.sort((a, b) => {\r\n const indexA = a.dbFeature.description.indexOf('Width');\r\n const indexB = b.dbFeature.description.indexOf('Width');\r\n\r\n // Check if 'Width' was found in descriptions\r\n if (indexA !== -1 && indexB !== -1) {\r\n const widthA = parseInt(a.dbFeature.description.substr(indexA + 6, 3), 10);\r\n const widthB = parseInt(b.dbFeature.description.substr(indexB + 6, 3), 10);\r\n\r\n return widthB - widthA;\r\n } else if (indexA !== -1) {\r\n // Place items without 'Width' in descriptions below\r\n return -1; // Move item b lower in the list\r\n } else if (indexB !== -1) {\r\n // Place items without 'Width' in descriptions below\r\n return 1; // Move item a lower in the list\r\n } else {\r\n // If neither has 'Width' in description, maintain current order\r\n return 0;\r\n }\r\n })\r\n\r\n return features\r\n}\r\n\r\n// const getSplittedDbFeatureName = (dbFeature) => {\r\n// if (dbFeature.customDisplayName == null) {\r\n// dbFeature.customDisplayName = dbFeature.sharedFeatureName || dbFeature.partName || \"\";\r\n// if (dbFeature.partId === \"center_island_countertop\") {\r\n// dbFeature.customDisplayName = dbFeature.customDisplayName\r\n// .replace(/2 0 /g, \"\")\r\n// .replace(/Center Island Countertop 1 /g, \"\");\r\n// }\r\n// }\r\n// return dbFeature.customDisplayName\r\n// };\r\n//\r\n// export const getFilteredRelatedDbFeatures = (relatedDbFeaturesToCheck) => {\r\n// // console.log(\"relatedFeaturesToCheck\", relatedFeaturesToCheck);\r\n// let relatedDbFeatures = [];\r\n// relatedDbFeaturesToCheck.forEach((relFeature) => {\r\n// const featureAlreadyExistIndex = relatedDbFeatures.findIndex(currentFeature => {\r\n// return getSplittedDbFeatureName(currentFeature) === getSplittedDbFeatureName(relFeature)\r\n// })\r\n// if (featureAlreadyExistIndex > -1) {\r\n// if (relFeature.getParent().navigationSubItems().some(navItem => {\r\n// return navItem.part.dbFeature.id === relFeature.dbFeature.id\r\n// })) {\r\n// relatedDbFeatures.splice(featureAlreadyExistIndex, 1, relFeature)\r\n// }\r\n// } else {\r\n// relatedDbFeatures.push(relFeature);\r\n// }\r\n// });\r\n// // console.log(\"relatedFeatures\", relatedFeatures);\r\n// return relatedDbFeatures\r\n// };\r\n","import invert from \"lodash/invert\";\r\nimport {CountsType} from \"../../bvComponent/core/constants\";\r\nimport {LayoutAbbreviation} from \"../../kvComponent/core/constants\";\r\nimport {getCurrentLayout} from \"../../appLayout\";\r\nimport Config from \"../../../config\";\r\n\r\nexport const getActivePartsCounts = (activePart, layoutName) => {\r\n let counts = 0;\r\n switch (document.kvConfig.visualizerType) {\r\n case \"Bathroom\":\r\n case \"BV\": {\r\n if (activePart.counts) {\r\n counts = activePart.counts.allLayoutFeaturesCount + activePart.counts[invert(CountsType)[layoutName]];\r\n }\r\n break;\r\n }\r\n case \"Kitchen\":\r\n case \"KV\": {\r\n const excluded = [\r\n \"range\", \"center_island_range\", \"stovetop\", \"center_island_stovetop\", \"faucet\", \"sink\", \"bottom_cabinet\",\r\n \"countertop\", \"center_island_faucet\", \"center_island_sink\", \"center_island_countertop\", \"top_cabinet\",\r\n \"center_island_edge\", \"edge_profile\"\r\n ];\r\n if (!excluded.includes(activePart.partId) && activePart.counts) {\r\n const layoutAbbr = LayoutAbbreviation[layoutName].toLowerCase();\r\n counts = activePart.counts[layoutAbbr];\r\n }\r\n break;\r\n }\r\n }\r\n return counts\r\n};\r\n\r\nexport const getAvailableLayouts = () => {\r\n const layout = getCurrentLayout();\r\n const parents = layout.getFeatures();\r\n\r\n if (document.kvConfig.visualizerType === \"bvScene\") { // removed Layout4 from bvScene as it is really buggy on some profiles (\"userId\": 224022)\r\n return [\"Layout1\"]\r\n }\r\n\r\n return Object.keys(layout.layoutNames)\r\n .filter(key => key !== \"All\" && parents.some(parent => {\r\n const exisitngRelItemWithFeatures = parent.relatedItems && parent.relatedItems.find(relItem => {\r\n return relItem.featuresList[key] && relItem.featuresList[key].length && relItem.featuresList[key].some(feature => {\r\n return feature.dbFeature.s3Bindings\r\n })\r\n })\r\n // console.log(\"exisitngRelItemWithFeatures\", exisitngRelItemWithFeatures);\r\n return exisitngRelItemWithFeatures\r\n }))\r\n}\r\n\r\nexport const getShowOtherLayouts = (fabricatorSettings) => {\r\n if (document.kvConfig.toolVersion >= 5 && !Config.isVisualizerManagement()) {\r\n return false\r\n }\r\n let showOtherLayouts =\r\n (document.kvConfig.visualizerType === \"Bathroom\" || document.kvConfig.visualizerType === \"BV\")\r\n ? fabricatorSettings && (fabricatorSettings.showSmallDesignForClients\r\n || (fabricatorSettings.showSmallDesignFromDashboard && document.kvConfig.isBackend))\r\n : true;\r\n if (showOtherLayouts) {\r\n showOtherLayouts = getAvailableLayouts().length > 1\r\n }\r\n return showOtherLayouts\r\n};\r\n\r\nexport const getAvailableRoomScenes = () => {\r\n let availableRoomScenes = [];\r\n const layout = getCurrentLayout();\r\n const allFeatures = layout.getAllFeatures();\r\n for (let i = 0; i < allFeatures.length; i++) {\r\n const feature = allFeatures[i];\r\n if (feature.dbFeature.metaData && Array.isArray(feature.dbFeature.metaData[\"RoomScene\"])) {\r\n feature.dbFeature.metaData[\"RoomScene\"].forEach(scene => {\r\n if (!availableRoomScenes.includes(scene)) {\r\n availableRoomScenes.push(scene)\r\n }\r\n })\r\n }\r\n }\r\n return availableRoomScenes.sort()\r\n}\r\n\r\nexport const scrolledVerticalToTheEnd = ({clientHeight, scrollHeight, scrollTop}) => {\r\n const ceilScrollHeight = Math.ceil(scrollHeight);\r\n const floorScrollHeight = Math.floor(scrollHeight);\r\n const ceilScrollTop = Math.ceil(scrollTop);\r\n const floorScrollTop = Math.floor(scrollTop);\r\n const ceilClientHeight = Math.ceil(clientHeight);\r\n const floorClientHeight = Math.floor(clientHeight);\r\n\r\n return (ceilScrollHeight - ceilScrollTop === ceilClientHeight)\r\n || (ceilScrollHeight - floorScrollTop === ceilClientHeight)\r\n || (ceilScrollHeight - ceilScrollTop === floorClientHeight)\r\n || (ceilScrollHeight - floorScrollTop === floorClientHeight)\r\n || (floorScrollHeight - ceilScrollTop === ceilClientHeight)\r\n || (floorScrollHeight - floorScrollTop === ceilClientHeight)\r\n || (floorScrollHeight - floorScrollTop === floorClientHeight)\r\n || (floorScrollHeight - floorScrollTop === floorClientHeight)\r\n}\r\n\r\n/**\r\n * when the new customer is created - the system creates a job for him with only one userState property\r\n * @param parentGroup {object}\r\n // * @param fabricatorData {object}\r\n * @returns {array}\r\n */\r\nexport const getSideBarSubParts = (parentGroup) => {\r\n if (!parentGroup || !parentGroup.subParts || !parentGroup.layout) {\r\n return []\r\n }\r\n let subParts = parentGroup.subParts(true, true) || [];\r\n const layout = parentGroup.layout;\r\n if (!Config.showAllVisualizerGroups()) {\r\n subParts = subParts.filter(subPart => {\r\n return layout.hasNavItemsLength(subPart)\r\n // && !(fabricatorData && fabricatorData.isEncore && Array.isArray(layout.disabledClickablePartIds)\r\n // && layout.disabledClickablePartIds.includes(subPart.part.partId)) // hide if it's not clickable (for encore)\r\n })\r\n }\r\n return subParts\r\n}\r\n","import store from \"../../../store\";\r\nimport {\r\n END_CAP_AREA_PART_IDS,\r\n END_CAP_CABINETS_PART_IDS,\r\n END_CAP_PART_IDS, SHAPE_PART_ID, SIDEBAR_NAVIGATION_BUTTONS,\r\n SQFT_AREA_TYPE_PART_IDS,\r\n SQFT_GROUP\r\n} from \"../constants\";\r\nimport {getUrlSQFTHashParam} from \"./sqftHelper\";\r\nimport sqftConfig from \"../components/canvas/store/sqftConfig\";\r\nimport { SIDEBAR_NAVIGATION_CABINET_BUTTONS, SQFT_APPLIANCES } from \"../constants\";\r\nimport endCapCanvas from \"../components/canvas/core/controls/endCapCanvas\";\r\nimport {setSelectedFeature} from \"../../../actions/sqftResourceFunctions\";\r\nimport {setSelectedCountertop} from \"../../../actions/sqftMenuFunctions\";\r\n\r\nexport const getSQFTGroupFromUrl = () => {\r\n return getUrlSQFTHashParam(\"group\")\r\n}\r\n\r\n/**\r\n * Is SQFT in Area Group TYPE\r\n */\r\nexport const getIsSFTAreaGroup = () => {\r\n const isSFTAreaGroupInUrl = getSQFTGroupFromUrl();\r\n const {sqftState} = store.getState();\r\n const {sqftFromFeature} = sqftState;\r\n\r\n return isSFTAreaGroupInUrl || sqftFromFeature && (Object.keys(SQFT_AREA_TYPE_PART_IDS).includes(sqftFromFeature.cartFeature.partId));\r\n}\r\n\r\n/**\r\n * Is SQFT in Cabinets Group TYPE\r\n */\r\nexport const isSFTCabinetsGroup = () => {\r\n const isCabinetGroupInURL = sqftConfig.isCabinetGroupInURL();\r\n const {sqftState} = store.getState();\r\n const {SQFTGroup} = sqftState;\r\n\r\n return isCabinetGroupInURL || SQFTGroup === SQFT_GROUP.cabinets;\r\n}\r\n\r\n/**\r\n * Is SQFT Group Type\r\n */\r\nexport const getSQFTGroup = () => {\r\n const isSFTAreaGroupInUrl = getSQFTGroupFromUrl();\r\n const {sqftState} = store.getState();\r\n const {SQFTGroup} = sqftState;\r\n\r\n if (isSFTAreaGroupInUrl) {\r\n return isSFTAreaGroupInUrl\r\n }\r\n\r\n if (SQFTGroup) {\r\n return SQFTGroup;\r\n }\r\n\r\n return SQFT_GROUP.default\r\n}\r\n\r\nexport const getPartIdsFromMenuOpened = (menuOpened) => {\r\n let partIds = menuOpened ? [menuOpened] : [];\r\n if (menuOpened === SIDEBAR_NAVIGATION_CABINET_BUTTONS.centerIsland) {\r\n partIds = ['countertop'];\r\n } else if (menuOpened === SQFT_APPLIANCES.refrigerator) {\r\n partIds = ['fridge'];\r\n } else if (menuOpened === SQFT_APPLIANCES.stovetop) {\r\n partIds = ['stove'];\r\n } else if (menuOpened === SIDEBAR_NAVIGATION_CABINET_BUTTONS.end_panel) {\r\n partIds = END_CAP_CABINETS_PART_IDS;\r\n } else if (menuOpened === SIDEBAR_NAVIGATION_BUTTONS.end_cap) {\r\n partIds = END_CAP_AREA_PART_IDS;\r\n }\r\n return partIds;\r\n};\r\n\r\nexport const getSearchTextFromMenuOpened = (menuOpened) => {\r\n let searchText = \"\";\r\n if (menuOpened === SIDEBAR_NAVIGATION_CABINET_BUTTONS.end_panel) {\r\n searchText = \"\";//'End Panel';\r\n }\r\n return searchText;\r\n};\r\n\r\nexport const getItemClickCallbackForPartId = (partId) => {\r\n let itemClickCallback = new Function();\r\n if (END_CAP_PART_IDS.includes(partId)) {\r\n itemClickCallback = (e, feature) => {\r\n endCapCanvas.setHighlighting(false);\r\n endCapCanvas.setCursorImage();\r\n store.dispatch(setSelectedFeature(feature));\r\n };\r\n } else if (partId === SHAPE_PART_ID.countertop) {\r\n itemClickCallback = (e, feature) => {\r\n store.dispatch(setSelectedCountertop(feature.dbFeature.id));\r\n }\r\n }\r\n\r\n return itemClickCallback;\r\n};\r\n","import {Part} from \"../part\";\r\nimport {PartMenuType} from \"../../../visComponents/constants\";\r\nimport {applianceThumbnail} from \"../assets\";\r\n\r\nimport Dishwasher from \"../subparts/appliances/dishwasher\";\r\nimport Fridge from \"../subparts/appliances/fridge\";\r\nimport Hood from \"../subparts/appliances/hood\";\r\nimport Microwave from \"../subparts/appliances/microwave\";\r\nimport Range from \"../subparts/appliances/range\";\r\nimport Oven from \"../subparts/appliances/oven\";\r\nimport Stove from \"../subparts/appliances/stove\";\r\nimport FridgeEnclosure from \"../subparts/appliances/fridgeEnclosure\";\r\nimport FridgeEnclosureHandle from \"../subparts/appliances/fridgeEnclosureHandle\";\r\nimport Stovetop from \"../subparts/appliances/stovetop\";\r\n\r\nexport default class Appliance extends Part {\r\n static id = 'Appliances';\r\n constructor() {\r\n super(true, false, PartMenuType.Complex);\r\n\r\n this.menuType = PartMenuType.Complex;\r\n this.partName = 'Appliances';\r\n this.partThumbnail = applianceThumbnail;\r\n this.partThumbnailSize = \"70%\";\r\n this.translateId = \"visualizer.kitchen.appliance\";\r\n\r\n // related items\r\n this.dishwasher = null;\r\n this.fridge = null;\r\n this.hood = null;\r\n this.microwave = null;\r\n this.range = null;\r\n this.stove = null;\r\n this.stovetop = null;\r\n this.fridgeEnclosure = null;\r\n this.fridgeEnclosureHandle = null;\r\n this.oven = null;\r\n this.relatedGroupNames = [\"Dishwasher\", \"Fridge\", \"Fridge Enclosure\", \"Hood\", \"Microwave\", \"Range\", \"Stove\",\r\n \"Stovetop\", \"Oven\"];\r\n }\r\n\r\n load(dbFeature, loadFeature = true) {\r\n let relatedItemName = \"\",\r\n RelatedItemClass = null;\r\n switch (dbFeature.groupName) {\r\n case \"Dishwasher\":\r\n relatedItemName = \"dishwasher\";\r\n RelatedItemClass = Dishwasher;\r\n break;\r\n case \"Fridge\":\r\n relatedItemName = \"fridge\";\r\n RelatedItemClass = Fridge;\r\n break;\r\n case \"Fridge Enclosure Handle\":\r\n relatedItemName = \"fridgeEnclosureHandle\";\r\n RelatedItemClass = FridgeEnclosureHandle;\r\n break;\r\n case \"Fridge Enclosure\":\r\n relatedItemName = \"fridgeEnclosure\";\r\n RelatedItemClass = FridgeEnclosure;\r\n break;\r\n case \"Hood\":\r\n relatedItemName = \"hood\";\r\n RelatedItemClass = Hood;\r\n break;\r\n case \"Microwave\":\r\n relatedItemName = \"microwave\";\r\n RelatedItemClass = Microwave;\r\n break;\r\n case \"Range\":\r\n relatedItemName = \"range\";\r\n RelatedItemClass = Range;\r\n break;\r\n case \"Stove\":\r\n relatedItemName = \"stove\";\r\n RelatedItemClass = Stove;\r\n break;\r\n case \"StoveTop\":\r\n case \"Stovetop\":\r\n relatedItemName = \"stovetop\";\r\n RelatedItemClass = Stovetop;\r\n break;\r\n case \"Oven\":\r\n relatedItemName = \"oven\";\r\n RelatedItemClass = Oven;\r\n break;\r\n }\r\n return this.loadCommon(relatedItemName, RelatedItemClass, dbFeature, loadFeature)\r\n }\r\n\r\n isSubTypeWithItems() {\r\n return false;\r\n }\r\n\r\n handleSubPartClick() {\r\n\r\n }\r\n\r\n}\r\n","import {Shower} from \"../../parts/shower\";\r\nimport {IntermediatePart} from \"../../intermediatePart\";\r\nimport {ShowerComboTubType, SIDE_POSITIONS} from \"../../constants\";\r\nimport {ShowerTubCombo} from \"../../parts/showerTubCombo\";\r\n\r\nexport default class AccessoryCommon extends IntermediatePart {\r\n\r\n constructor(props) {\r\n super(props);\r\n }\r\n\r\n getArrayOfConditions() {\r\n let conditions = super.getArrayOfConditions(); //roomLayout\r\n const layout = this.getParent().layout;\r\n const showerParent = layout.parts[Shower.id];\r\n const showerSize = showerParent.showerSize();\r\n if (showerParent && showerSize) {\r\n conditions.push({\r\n propName: \"ShowerSize\",\r\n propValue: showerSize\r\n });\r\n }\r\n if (this.partId === \"grab_bar\") {\r\n const showerCondition = showerParent.showerTubComboIsActive() && layout.parts[ShowerTubCombo.id]\r\n && (layout.parts[ShowerTubCombo.id].bottomTub === ShowerComboTubType.walk_in_tub)\r\n ? \"Tub\"\r\n : \"Shower\";\r\n conditions.push({\r\n propName: \"Shower\",\r\n propValue: showerCondition\r\n });\r\n }\r\n return conditions\r\n }\r\n\r\n checkRelatedFeatureGroupPositions(position) {\r\n const accessoriesParent = this.getParent();\r\n const showerParent = accessoriesParent.layout.parts[Shower.id]; // no need for another check\r\n const showerSize = showerParent.showerSize();\r\n let otherFeatureGroup = null;\r\n switch (this.partId) {\r\n case \"grab_bar\":\r\n otherFeatureGroup = accessoriesParent.soapDish;\r\n break;\r\n case \"soap_dish\":\r\n otherFeatureGroup = accessoriesParent.grabBar;\r\n break;\r\n case \"shower_seats\":\r\n otherFeatureGroup = accessoriesParent.largeCornerSeat;\r\n break;\r\n case \"large_corner_seat\":\r\n otherFeatureGroup = accessoriesParent.seats;\r\n break;\r\n default:\r\n break;\r\n }\r\n if (showerSize === \"30\") {\r\n if (otherFeatureGroup && otherFeatureGroup.layerPositions && !this.disabled && Object.keys(this.layerPositions).some(key => this.layerPositions[key])) {\r\n Object.keys(otherFeatureGroup.layerPositions).forEach(key => {\r\n otherFeatureGroup.layerPositions[key] = null\r\n });\r\n }\r\n if (this.layerPositions) {\r\n Object.keys(this.layerPositions).forEach(key => {\r\n if (key !== position) {\r\n this.layerPositions[key] = null; // it can be only on one side on small shower size\r\n }\r\n })\r\n }\r\n } else {\r\n if (this.layerPositions[position] && otherFeatureGroup && otherFeatureGroup.layerPositions[position] && !otherFeatureGroup.disabled) {\r\n const newPosition = position === SIDE_POSITIONS[0] ? SIDE_POSITIONS[1] : SIDE_POSITIONS[0];\r\n if (!this.layerPositions[newPosition]) {\r\n const matchingPositionFeature = otherFeatureGroup.getMatchingPositionFeature(newPosition, otherFeatureGroup.layerPositions[position]);\r\n if (matchingPositionFeature) {\r\n otherFeatureGroup.layerPositions[newPosition] = matchingPositionFeature;\r\n }\r\n }\r\n otherFeatureGroup.layerPositions[position] = null; //2) remove old soap dish position\r\n }\r\n }\r\n }\r\n\r\n}\r\n","import {getCurrentLayout} from \"../../../appLayout\";\r\nimport {getGroupDescription} from \"../../../selectionWindow/selectionDescriptionCoverTranslates\";\r\nimport {CART_ITEM_ADDED_BY} from \"../../../shoppingCart/cartItemInterface\";\r\nimport {cartItemInStock} from \"../../lookNavigation/lookFunctions2\";\r\nimport {IS_LIXIL_SERVERS, IS_PRODUCT_JOURNEY} from \"../../../../config\";\r\nimport {getCartItemUnit, getFeatureUnit} from \"../../../../misc/helpers\";\r\nimport store from \"../../../../store\";\r\n// import {getBvFeatures} from \"../../../../api/server-api\";\r\n\r\n/**\r\n * Returns qtCatProperties\r\n * @param lookActiveFeature {object}\r\n * @returns {object} objects\r\n */\r\nexport const getAvailableWizardList = (lookActiveFeature) => {\r\n if (!lookActiveFeature) {\r\n return {}\r\n }\r\n const parent = lookActiveFeature.getParent();\r\n\r\n return parent.qtCatProperties ? parent.qtCatProperties : {};\r\n}\r\n\r\n/**\r\n * Returns subParts\r\n * @param qtCategoryName {string}\r\n * @returns {array} array of objects\r\n */\r\nexport const getWizardSubParts = (qtCategoryName) => {\r\n const layout = getCurrentLayout();\r\n if (layout.qtCategories) { // set default if index is not matching\r\n //console.log(\"qtCategories\", layout.qtCategories);//virtualized list //navigation subitems\r\n\r\n let qtCategory = layout.qtCategories.find(qtCat => qtCat.name === qtCategoryName);\r\n if (qtCategory && qtCategory.subParts) {\r\n return qtCategory.subParts\r\n }\r\n }\r\n return []\r\n}\r\n\r\n/**\r\n * Returns active features list for\r\n * @param subPart {object}\r\n * @param intl {object}\r\n * @param fabricatorData array\r\n * @returns {array} array of objects\r\n */\r\nexport const getFeatureGroupDescription = (subPart, intl, fabricatorData) => {\r\n const name = (subPart.customGroupDisplayName || subPart.partName || \"\").toLowerCase();\r\n if ((fabricatorData.isLowes || fabricatorData.isCaesarStone) && intl.messages) {\r\n if (intl.locale === \"fr-FR\" && intl.messages[\"transDoc.description_FR.\" + name]) {\r\n return intl.formatMessage({id: \"transDoc.description_FR.\" + name})\r\n } else if (intl.locale === \"pl-PL\" && intl.messages[\"transDoc.customTranslateDescription_PL.\" + name]) {\r\n return intl.formatMessage({id: \"transDoc.customTranslateDescription_PL.\" + name})\r\n }\r\n }\r\n return subPart.customDescription || subPart.description\r\n || intl.formatMessage({ id: getGroupDescription(subPart.partName) });\r\n};\r\n\r\n// const getMissingFeatures = (missingFeatures) => {\r\n// getBvFeatures(missingFeatures)\r\n// .then(response => {\r\n// const layout = getCurrentLayout();\r\n// layout.loadNewFeatures(response.data);\r\n// return true\r\n// })\r\n// .catch(() => false)\r\n// }\r\n\r\n/**\r\n * returns bundled features\r\n * @param feature {featureInterface}\r\n * @returns {array}\r\n */\r\nexport const getLixilRequiredNotIncludedFeatures = (feature) => {\r\n if (Array.isArray(feature.dbFeature.lixilRequiredNotIncluded) && feature.dbFeature.lixilRequiredNotIncluded.length) {\r\n // todo remove\r\n //feature.dbFeature.lixilRequiredNotIncluded.push(90068248, 90068237, 90068210, 90074461, 90068828, 90074449,\r\n // 90068281, 90068389, 90069955, 90069948, 90069950, 90071177, 90070070, 90069587 );\r\n // await getMissingFeatures(feature.dbFeature.lixilRequiredNotIncluded);\r\n\r\n const layout = getCurrentLayout();\r\n let allFeatures = layout.getAllFeatures(true);\r\n let lixilRequiredNotIncluded = allFeatures.filter((checkFeature) => {\r\n return feature.dbFeature.lixilRequiredNotIncluded.includes(checkFeature.dbFeature.id)\r\n });\r\n console.log(\"lixilRequiredNotIncluded\", lixilRequiredNotIncluded);\r\n\r\n return lixilRequiredNotIncluded\r\n }\r\n return []\r\n}\r\n\r\n/**\r\n * returns formatted string\r\n * @param str {string}\r\n * @returns {string}\r\n */\r\nexport const formatStrToUrl = (str) => {\r\n if (!str) {\r\n return \"\"\r\n }\r\n\r\n return str.replace(/\\s+/g, '-').toLowerCase();\r\n}\r\n\r\n\r\n/**\r\n * removes check collection for specific fabricator\r\n * @param feature {featureInterface}\r\n * @returns {boolean}\r\n */\r\nexport const allowCheckForCollection = (feature) => {\r\n if (!feature) {\r\n return true\r\n }\r\n // For shower fixture we have same customDisplayName, but different collection name (\"Euphoria\" and \"Shower Configuration\").\r\n // But they still should match\r\n // return feature.partId !== \"shower_fixture\"\r\n return true\r\n}\r\n\r\nconst unitsToCountQuantity = [\"unit\", \"units\", \"qty\", \"each\", \"Each\", \"no quantity\"];\r\n\r\n/**\r\n * returns current cart items length (with all quantites or only cart Items)\r\n * @param cartItems {[cartItemInterface]}\r\n * @param intl {object}\r\n * @param forceCheckAllQuantitties {boolean}\r\n * @returns {number}\r\n */\r\nexport const getCartItemsCount = (cartItems, intl = null, forceCheckAllQuantitties = IS_LIXIL_SERVERS) => {\r\n\r\n const fabricatorData = store.getState().fabricatorState;\r\n\r\n return cartItems.reduce((total, cartItem) => {\r\n const shouldBeCounted = !cartItem.relatedProductParent && !cartItem.isRemoved && cartItemInStock(cartItem);\r\n if (!shouldBeCounted || (IS_PRODUCT_JOURNEY && cartItem.addedBy !== CART_ITEM_ADDED_BY.user)) {\r\n return total\r\n }\r\n // || (featureIsBundle(cartItem.cartFeature, cartItems) && getBundledFeatures(cartItem.cartFeature).some(relFeature => relFeature.dbFeature.lixilAvailableQty > 0))\r\n if (forceCheckAllQuantitties) {\r\n return total + cartItem.quantity\r\n } else if (intl) {\r\n const featureUnit = getFeatureUnit(cartItem.cartFeature, intl, fabricatorData, cartItem.quantity);\r\n const cartItemUnit = getCartItemUnit(cartItem, intl);\r\n const unit = cartItemUnit || featureUnit || \"\";\r\n if (unit && unitsToCountQuantity.includes(unit.toLowerCase())) {\r\n return total + cartItem.quantity\r\n }\r\n }\r\n // Items in visualizer should equal total quantity of items minus out of stock (Shower bundle will count as 1 not 7)\r\n return total + 1 // simple return cart items count\r\n }, 0)\r\n}\r\n\r\n","import {\r\n getPriceWithCurrency,\r\n getQuotePriceWithDiscounts,\r\n getTotalPrice, sortByOrder,\r\n toFixedPrice\r\n} from \"../../misc/helpers\";\r\nimport {DISCOUNT_MAIN_TYPES, DISCOUNT_SECTION_TYPES, DISCOUNT_TYPES} from \"./discounstInterface\";\r\nimport {PMT} from \"../../misc/excelFunctions\";\r\nimport {getPercentage} from \"../../misc/misc2\";\r\n\r\nexport const getSubTotalPrice = (discountSections, discountSection, discount, withoutCurrent = false, customAddedDiscounts = []) => {\r\n const totalPrice = getTotalPrice(null, false);\r\n\r\n const allDiscounts = sortByOrder(getDiscountsForSection(discountSection, customAddedDiscounts));\r\n let ignoreDiscounts = allDiscounts.filter(currentDiscount => {\r\n if (!shouldCalculateDiscount(currentDiscount)) {\r\n return false\r\n }\r\n return withoutCurrent\r\n ? currentDiscount.order >= discount.order\r\n : currentDiscount.order > discount.order\r\n });\r\n discountSections.forEach(disSection => {\r\n if (disSection.order > discountSection.order) {\r\n ignoreDiscounts = [...ignoreDiscounts, ...disSection.discounts] // ignore other sections\r\n }\r\n });\r\n customAddedDiscounts.forEach(customDiscount => {\r\n const section = discountSections.find(sec => sec.id === customDiscount.categoryId);\r\n if (!section) {\r\n return\r\n }\r\n if (section.order > discountSection.order) {\r\n ignoreDiscounts = [...ignoreDiscounts, customDiscount] // ignore other custom discounts\r\n }\r\n });\r\n\r\n const grandTotal = getQuotePriceWithDiscounts(totalPrice, ignoreDiscounts);\r\n return toFixedPrice(grandTotal);\r\n};\r\n\r\nexport const getDiscountsForSection = (discountSection, customAddedDiscounts) => {\r\n const customDiscounts = customAddedDiscounts.filter(dis => {\r\n return dis.selected && (dis.categoryId === discountSection.id)\r\n })\r\n return [...discountSection.discounts, ...customDiscounts];\r\n}\r\n\r\nexport const calculateCellValue = ({discountSections, financePercentage, fabricatorSettings}, numberOfMonths = 0, finalPrice = 0) => {\r\n if (!numberOfMonths || !finalPrice) {\r\n return \"N/A\"\r\n }\r\n const fixedDeposit = getCustomDepositAmount(discountSections, finalPrice) || 0;\r\n const rate = financePercentage / 100 / 12; // Converts the annual interest rate into a monthly rate by dividing it by 12\r\n const nper = numberOfMonths; // The number of months in the repayment term\r\n const pv = -(finalPrice - fixedDeposit); // The present value (loan amount to be repaid). This is the negative of:\r\n // finalPrice - Today's final price of the good.\r\n // fixedDeposit - A $1000 deposit applied to the total loan amount.\r\n\r\n // const cellValue = pv * rate / (1 - Math.pow((1 + rate), -nper)); // this works fine, but the func below returns the same\r\n const cellValue = PMT(rate, nper, pv);\r\n\r\n return getPriceWithCurrency(fabricatorSettings, cellValue, null, false, true)\r\n}\r\n\r\nexport const getNextCustomDiscountOrder = (fromDiscount) => {\r\n return +(fromDiscount.order + 0.01).toFixed(2)\r\n}\r\n\r\nexport const getFilteredSections = (discountSections) => {\r\n return discountSections.filter(section => {\r\n return section.type !== DISCOUNT_SECTION_TYPES.finance\r\n })\r\n}\r\n\r\nexport const isSaveOnlyDiscount = (discount) => {\r\n return discount.discountType === DISCOUNT_MAIN_TYPES.finance || discount.discountType === DISCOUNT_MAIN_TYPES.deposit\r\n}\r\n\r\nexport const shouldDisplayDiscount = (discount) => {\r\n return discount.selected && !isSaveOnlyDiscount(discount)\r\n}\r\n\r\nexport const shouldCalculateDiscount = (discount) => {\r\n if (discount.isRidged) {\r\n const approveOptions = discount.approveOptions ? JSON.parse(discount.approveOptions) : null;\r\n if (approveOptions && approveOptions.options && approveOptions.options.length && !approveOptions.selectedOption) {\r\n return false\r\n }\r\n }\r\n return shouldDisplayDiscount(discount) && !discount.isSubTotal\r\n}\r\n\r\nexport const getDepositDiscount = (discountSections) => {\r\n let depositDiscount = null;\r\n discountSections.forEach(discountSection => {\r\n discountSection.discounts.forEach(discount => {\r\n if (discount.discountType === DISCOUNT_MAIN_TYPES.deposit) {\r\n depositDiscount = discount;\r\n }\r\n })\r\n });\r\n return depositDiscount\r\n}\r\n\r\n/**\r\n *\r\n * @param discountSections {array}\r\n * @param grandTotal {number}\r\n * @returns {string|number}\r\n */\r\nexport const getCustomDepositAmount = (discountSections, grandTotal = 0) => {\r\n const depositDiscount = getDepositDiscount(discountSections);\r\n if (!depositDiscount) {\r\n return null\r\n }\r\n if (depositDiscount.type === DISCOUNT_TYPES.price) {\r\n return depositDiscount.amount\r\n }\r\n const priceTaken = getPercentage(grandTotal, depositDiscount.amount) // for ex. 25% from 2700 = 625\r\n return toFixedPrice(Math.trunc(priceTaken * 100) / 100);\r\n}\r\n\r\nexport const getDepositAmount = (discountSections, grandTotal, fabricatorData) => {\r\n const customDeposit = getCustomDepositAmount(discountSections, grandTotal);\r\n if (customDeposit !== null) {\r\n return customDeposit\r\n }\r\n return fabricatorData.settings.deposit\r\n ? Math.floor((grandTotal * (fabricatorData.settings.deposit / 100)) * 100) / 100\r\n : 0\r\n}\r\n\r\nexport const getPriceWorkSheetSaveValues = (priceWorksheetState) => {\r\n const selectedDiscounts = [];\r\n priceWorksheetState.discountSections.forEach(disSection => {\r\n if (disSection.type === DISCOUNT_SECTION_TYPES.finance) {\r\n return\r\n }\r\n disSection.discounts.forEach(discount => {\r\n if (discount.selected) {\r\n selectedDiscounts.push(Object.assign({}, discount, {\r\n categoryId: disSection.id,\r\n }));\r\n }\r\n })\r\n })\r\n return {\r\n selectedDiscounts,\r\n financePercentage: priceWorksheetState.financePercentage,\r\n customAddedDiscounts: priceWorksheetState.customAddedDiscounts, // save as is for now\r\n }\r\n}\r\n","import {connect} from \"react-redux\";\r\nimport {withRouter} from \"react-router-dom\";\r\n\r\nimport {addToCart, clearCart, removeFromCart, restoreCart, updateCanvasCount} from \"../../../actions/actionFunctions\";\r\nimport {getCartItemObject} from \"../../../misc/helpers\";\r\nimport {\r\n createCartList,\r\n getMatchingColorFeature,\r\n navFeatureCLick\r\n} from \"../lookNavigation/lookFunctions\";\r\nimport {setLookRemovedCartItems} from \"../../../actions/shoppingCartFunctions\";\r\nimport {\r\n featureIsBundle,\r\n getCartItemsArrayFromFeature, getFeatureUrl,\r\n} from \"../lookNavigation/lookFunctions2\";\r\nimport {getCurrentLayout} from \"../../appLayout\";\r\nimport {IS_PRODUCT_JOURNEY} from \"../../../config\";\r\nimport {CART_ITEM_ADDED_BY} from \"../../shoppingCart/cartItemInterface\";\r\n\r\nconst WithUpdateLookCartItem = (props) => {\r\n\r\n const {cartItems, removeFromCart, addToCart, qtActiveCategory, lookActiveFeature, history, children, updateCanvasCount,\r\n lookRemovedCartItems, setLookRemovedCartItems, filterGroups, groheActiveFeatureQuantity,\r\n clearCart, restoreCart, fabricatorSettings} = props;\r\n\r\n /**\r\n * Creates cart items list depending on quotingTool features\r\n * @param neededFeature {featureInterface} current active updated feature\r\n * @param withAddToCart {boolean} should we add it to the cart (for product journey) or just update\r\n */\r\n const updateLookCartItem = (neededFeature = lookActiveFeature, withAddToCart = false) => {\r\n // if (!checkIfFeatureCanBeAddedToTheCart(neededFeature)) {\r\n // return false\r\n // }\r\n\r\n return updateLookCartItemsNew(neededFeature, withAddToCart); // temp test, if everything is ok - remove redundant code below\r\n\r\n let itemsToAdd = [];\r\n // const urlPartId = neededFeature.partId.replace(/_/gi, \"-\");\r\n const layout = getCurrentLayout();\r\n const addedCartItems = cartItems.filter(cItem => {\r\n // if (featureGroup.layerPositions) {\r\n // return (cItem.partId === neededFeature.partId)\r\n // && (cItem.cartFeature.metaData.layerPosition === neededFeature.metaData.layerPosition)\r\n // }\r\n const parent = layout.getFeatureGroupByPartId(cItem.partId);\r\n if (!IS_PRODUCT_JOURNEY && parent && parent.disabled) { // remove these cartItems too\r\n return true\r\n }\r\n return cItem.partId === neededFeature.partId\r\n });\r\n if (addedCartItems.length && !IS_PRODUCT_JOURNEY) {\r\n addedCartItems.forEach(addedCartItem => {\r\n removeFromCart(addedCartItem);\r\n if (featureIsBundle(addedCartItem.cartFeature, cartItems)) {\r\n cartItems.forEach(cItem => {\r\n if (cItem.relatedProductParent && cItem.relatedProductParent.dbFeature.id === addedCartItem.cartFeature.dbFeature.id) {\r\n removeFromCart(cItem)\r\n }\r\n })\r\n }\r\n })\r\n }\r\n // let newQuantity = IS_PRODUCT_JOURNEY\r\n // ? groheActiveFeatureQuantity\r\n // : addedCartItems.length ? addedCartItems[0].quantity : 1;\r\n let newQuantity = groheActiveFeatureQuantity;\r\n if (neededFeature.metaData.layerPosition && !IS_PRODUCT_JOURNEY) {\r\n const featureGroup = neededFeature.getParent();\r\n Object.keys(featureGroup.layerPositions).forEach(position => {\r\n if (featureGroup.layerPositions[position]) {\r\n if (position !== neededFeature.metaData.layerPosition) {\r\n if (neededFeature.dbFeature.sharedFeatureName === featureGroup.layerPositions[position].dbFeature.sharedFeatureName) {\r\n if (newQuantity === 1) {\r\n newQuantity += 1\r\n }\r\n } else {\r\n // here we update cart with same partId, but different position (for now it should not be executed since we have all positions same)\r\n itemsToAdd.push(getCartItemObject(featureGroup.layerPositions[position], 1, qtActiveCategory));\r\n if (newQuantity > 1) {\r\n newQuantity--;\r\n }\r\n }\r\n }\r\n }\r\n });\r\n if (neededFeature.partId === \"vanity_faucet\") {\r\n const sinkParent = featureGroup.getParent().sink;\r\n const addedSinkItem = cartItems.find(cItem => {\r\n return cItem.partId === sinkParent.partId\r\n });\r\n if (addedSinkItem && addedSinkItem.cartFeature.dbFeature.sharedFeatureName && sinkParent.activeFeature && sinkParent.activeFeature.dbFeature.sharedFeatureName\r\n && (addedSinkItem.cartFeature.dbFeature.sharedFeatureName !== sinkParent.activeFeature.dbFeature.sharedFeatureName)) {\r\n // here we update cart with automatically changed feature (via the metadata)\r\n itemsToAdd.push(getCartItemObject(sinkParent.activeFeature, addedSinkItem.quantity, qtActiveCategory));\r\n removeFromCart(addedSinkItem);\r\n }\r\n }\r\n }\r\n itemsToAdd = [...itemsToAdd, ...getCartItemsArrayFromFeature(neededFeature, newQuantity, qtActiveCategory)]; // here we update cart with clicked feature\r\n\r\n if (!IS_PRODUCT_JOURNEY) {\r\n const featureGroups = getLookList(true);\r\n if (featureGroups && featureGroups.length) {\r\n let shouldBeAdded = [];\r\n featureGroups.forEach(parentObject => {\r\n if (parentObject.featureGroup.layerPositions) {\r\n Object.keys(parentObject.featureGroup.layerPositions).forEach(position => {\r\n if (parentObject.featureGroup.layerPositions[position]) {\r\n if (position !== neededFeature.metaData.layerPosition) {\r\n if (neededFeature.dbFeature.sharedFeatureName === parentObject.featureGroup.layerPositions[position].dbFeature.sharedFeatureName) {\r\n if (newQuantity === 1) {\r\n newQuantity += 1\r\n }\r\n } else {\r\n // here we update cart with same partId, but different position (for now it should not be executed since we have all positions same)\r\n itemsToAdd.push(getCartItemObject(parentObject.featureGroup.layerPositions[position], 1, qtActiveCategory));\r\n if (newQuantity > 1) {\r\n newQuantity--;\r\n }\r\n }\r\n }\r\n }\r\n });\r\n }\r\n })\r\n itemsToAdd = [...itemsToAdd, ...shouldBeAdded]; // here we update cart with enabled but not added features\r\n }\r\n }\r\n\r\n addToCart(itemsToAdd);\r\n\r\n updateRemovedCartItems(itemsToAdd);\r\n layout.updateLocalStorage();\r\n }\r\n\r\n const updateRemovedCartItems = (itemsToAdd) => {\r\n if (lookRemovedCartItems.length) {\r\n let newRemovedCartItems = [...lookRemovedCartItems];\r\n itemsToAdd.forEach(cartItem => {\r\n const existingIndex = newRemovedCartItems.findIndex(removedCartItem => {\r\n if (cartItem.cartFeature.metaData.layerPosition) {\r\n return (removedCartItem.partId === cartItem.partId)\r\n && (cartItem.cartFeature.metaData.layerPosition === removedCartItem.cartFeature.metaData.layerPosition)\r\n }\r\n return removedCartItem.partId === cartItem.partId || (\r\n removedCartItem.relatedProductParent && removedCartItem.relatedProductParent.partId === cartItem.partId\r\n )\r\n });\r\n if (existingIndex > -1) {\r\n newRemovedCartItems.splice(existingIndex, 1);\r\n }\r\n });\r\n if (newRemovedCartItems.length !== lookRemovedCartItems.length) {\r\n setLookRemovedCartItems(newRemovedCartItems);\r\n }\r\n }\r\n }\r\n\r\n const updateLookCartItemsNew = (neededFeature, withAddToCart) => {\r\n\r\n clearCart();\r\n let itemsToAdd = createCartList(qtActiveCategory, null);\r\n itemsToAdd.forEach(currentCartItem => {\r\n const oldExistingCartItem = cartItems.find(cItem => cItem.partId === currentCartItem.partId);\r\n if (oldExistingCartItem && !IS_PRODUCT_JOURNEY) {\r\n currentCartItem.addedBy = oldExistingCartItem.addedBy; // if it was changed by user - keep it\r\n if (oldExistingCartItem.quantity > currentCartItem.quantity) {\r\n if (currentCartItem.cartFeature.getParent) {\r\n const parent = currentCartItem.cartFeature.getParent();\r\n if (parent.layerPositions) {\r\n currentCartItem.quantity = Object.keys(parent.layerPositions).filter(positionKey => parent.layerPositions[positionKey]).length\r\n } else {\r\n currentCartItem.quantity = oldExistingCartItem.quantity;\r\n }\r\n } else {\r\n currentCartItem.quantity = oldExistingCartItem.quantity;\r\n }\r\n }\r\n }\r\n if (IS_PRODUCT_JOURNEY && neededFeature && !neededFeature.notAvailableInVisualizer) {\r\n if (currentCartItem.partId === neededFeature.partId\r\n || (currentCartItem.relatedProductParent\r\n && (currentCartItem.relatedProductParent.dbFeature.id === neededFeature.dbFeature.id))) {\r\n currentCartItem.quantity = groheActiveFeatureQuantity;\r\n if (withAddToCart) {\r\n currentCartItem.addedBy = CART_ITEM_ADDED_BY.user;\r\n }\r\n }\r\n }\r\n });\r\n if (neededFeature && neededFeature.notAvailableInVisualizer) {\r\n const newCartItem = getCartItemObject(neededFeature, groheActiveFeatureQuantity, qtActiveCategory);\r\n newCartItem.addedBy = withAddToCart ? CART_ITEM_ADDED_BY.user : CART_ITEM_ADDED_BY.auto;\r\n itemsToAdd.push(newCartItem);\r\n }\r\n if (IS_PRODUCT_JOURNEY && fabricatorSettings.checkout) {\r\n itemsToAdd = [...itemsToAdd, ...cartItems.filter(cItem => cItem.addedBy === CART_ITEM_ADDED_BY.user)]; // keep old added cartItems!\r\n }\r\n if (fabricatorSettings.checkout) {\r\n cartItems.forEach(cItem => {\r\n if (!cItem.keepOnLookUpdate) {\r\n return\r\n }\r\n if (!itemsToAdd.some(itemToAdd => itemToAdd.id === cItem.id)) {\r\n itemsToAdd.push(cItem) // keep old added cartItems! that was added from wizard list for example\r\n }\r\n })\r\n }\r\n restoreCart({cartItems: itemsToAdd});\r\n updateRemovedCartItems(itemsToAdd);\r\n const layout = getCurrentLayout();\r\n layout.updateLocalStorage();\r\n }\r\n\r\n /**\r\n * updates array of features\r\n * @param notMatchingFeatures {array}\r\n * @param fromFeature {featureInterface}\r\n * @param changeUrl {boolean}\r\n * @param directChange {boolean} // if only update\r\n */\r\n const updateAllLookCartItems = (notMatchingFeatures = [],\r\n fromFeature = lookActiveFeature,\r\n changeUrl = true,\r\n directChange = false) => {\r\n let needToBeUpdated = [fromFeature];\r\n if (notMatchingFeatures.length) {\r\n const currentFeatureName = fromFeature.getSplittedFeatureName();\r\n let toiletEnabled = false;\r\n notMatchingFeatures.forEach(notMatchingFeature => {\r\n if (notMatchingFeature.dbFeature.id !== fromFeature.dbFeature.id) {\r\n const sameFeatureAsActive = directChange ? {part: notMatchingFeature} : getMatchingColorFeature(fromFeature, notMatchingFeature, filterGroups)\r\n if (sameFeatureAsActive) {\r\n navFeatureCLick(sameFeatureAsActive.part, false);\r\n needToBeUpdated.push(sameFeatureAsActive.part);\r\n switch (sameFeatureAsActive.part.partId) {\r\n case \"toilet_brush\":\r\n case \"paper_holder\": {\r\n if (!toiletEnabled) {\r\n const layout = getCurrentLayout();\r\n const relatedFeatureGroup = layout.getFeatureGroupByPartId(\"toilet\");\r\n if (relatedFeatureGroup && relatedFeatureGroup.disabled && relatedFeatureGroup.activeFeature && !toiletEnabled) {\r\n navFeatureCLick(relatedFeatureGroup.activeFeature, false);\r\n needToBeUpdated.push(relatedFeatureGroup.activeFeature);\r\n }\r\n }\r\n break;\r\n }\r\n default:\r\n break;\r\n }\r\n } else {\r\n console.log(\"sameFeatureAsActive not found\", notMatchingFeature.partId, currentFeatureName);\r\n }\r\n }\r\n })\r\n }\r\n needToBeUpdated.forEach(featureToClick => {\r\n navFeatureCLick(featureToClick, false);\r\n });\r\n // console.log(\"needToBeUpdated\", needToBeUpdated);\r\n updateLookCartItem(fromFeature)\r\n updateCanvasCount();\r\n // if (IS_PRODUCT_JOURNEY) {\r\n // setLookActiveCategory(\"\");\r\n // }\r\n // if (changeUrl && IS_PRODUCT_JOURNEY) {\r\n if (changeUrl) {\r\n history.push(getFeatureUrl(fromFeature, true));\r\n }\r\n }\r\n\r\n return children(updateLookCartItem, updateAllLookCartItems)\r\n};\r\n\r\nconst mapStateToProps = (store) => {\r\n const {lookActiveFeature} = store.lookState;\r\n const {cartItems, lookRemovedCartItems} = store.cartState;\r\n const {qtActiveCategory} = store.qtState;\r\n const {filterGroups} = store.filterState;\r\n const {groheActiveFeatureQuantity} = store.groheState;\r\n const {settings} = store.fabricatorState;\r\n\r\n return {\r\n lookActiveFeature,\r\n cartItems,\r\n qtActiveCategory,\r\n lookRemovedCartItems,\r\n filterGroups,\r\n groheActiveFeatureQuantity,\r\n fabricatorSettings: settings,\r\n }\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n removeFromCart,\r\n addToCart,\r\n updateCanvasCount,\r\n setLookRemovedCartItems,\r\n clearCart,\r\n restoreCart\r\n};\r\n\r\nexport default withRouter(\r\n connect(mapStateToProps, mapDispatchToProps)(WithUpdateLookCartItem)\r\n)\r\n","import $ from 'jquery';\r\nimport Config, {\r\n getCommonVisualizerType,\r\n IS_LIXIL_SERVERS, IS_OFFLINE_MODE,\r\n USE_SERVER_CACHING\r\n} from \"../config\";\r\nimport {toBoolean} from \"../misc/utils\";\r\nimport {getCurrentLayout} from '../bvcomponents/appLayout';\r\nimport store from \"../store\";\r\nimport AxiosInstance from \"./axiosInstance\";\r\nimport {renderErrorPopup} from \"./api-popups\";\r\nimport {HOST_NAME} from \"./api\";\r\nimport {fixFeaturesResponse} from \"../misc/backendFunctions\";\r\n\r\n//Axios.defaults.headers.get['Content-Type'] = 'application/json';\r\n\r\nif (!String.prototype.endsWith) {\r\n Object.defineProperty(String.prototype, 'endsWith', {\r\n value: function(searchString, position) {\r\n var subjectString = this.toString();\r\n if (position === undefined || position > subjectString.length) {\r\n position = subjectString.length;\r\n }\r\n position -= searchString.length;\r\n var lastIndex = subjectString.indexOf(searchString, position);\r\n return lastIndex !== -1 && lastIndex === position;\r\n }\r\n });\r\n}\r\n\r\nconst serverConfig = document.kvConfig;\r\nconst __hideFeatures = toBoolean(serverConfig.hide) ? 1 : 0;\r\n\r\nfunction _get(url, axiosController) {\r\n return axiosController ? AxiosInstance.get(url, {\r\n signal: axiosController.signal\r\n }) : AxiosInstance.get(url)\r\n}\r\n\r\nfunction _post(url, data) {\r\n // console.log('_post', url, data);\r\n return AxiosInstance.post(url, data, {\r\n headers: {\r\n \"Content-Type\": \"application/json\",\r\n 'x-antiforgery-token': $('input[name=__RequestVerificationToken]').val()\r\n }\r\n });\r\n}\r\n\r\nlet __urlBase = null;\r\n\r\nfunction _getUrlBase() {\r\n if (__urlBase) return __urlBase;\r\n let {subDomain} = document.kvConfig;\r\n // let {domain} = document.kvConfig;\r\n // domain = domain || 'quotesflooring.com';\r\n subDomain = subDomain ? subDomain + '.' : '';\r\n __urlBase = subDomain + HOST_NAME;\r\n return __urlBase;\r\n}\r\n\r\nfunction _urlBase() {\r\n return serverConfig.type === 'Fabricator' ? _getUrlBase() + '/Job/QuickQuote/' + serverConfig.userId : '.';\r\n}\r\n\r\nconst addUrlMode = (baseUrl, visualizerType = \"\") => {\r\n const visType = getCommonVisualizerType(visualizerType);\r\n if (IS_LIXIL_SERVERS && (document.kvConfig.visualizerType === \"bvLook\")) { // temporarily, until the backend is fixed\r\n return baseUrl\r\n }\r\n return baseUrl + (baseUrl.includes(\"?\") ? \"&\" : \"?\") + `mode=${visType}`\r\n}\r\n\r\nconst hardcodeResponsesFolder = () => {\r\n if (document.kvConfig.visualizerType === \"bvLook\") {\r\n return \"node/responses/lixil\"\r\n }\r\n return \"node/responses\"\r\n}\r\n\r\nexport default class JsonApi {\r\n static allAvailableStones(jobId, type) {\r\n jobId = jobId || 0;\r\n type = type || 'Fabricator';\r\n return _get(`${_getUrlBase()}/api/Public/${serverConfig.userId}/AvailableStones?jobId=${jobId}&type=${type}&loadStoneFilters=true`);\r\n // return _get(`${_getUrlBase()}/Job/QuickQuote/${serverConfig.userId}/AvailableStones?jobId=${jobId}&type=${type}`);\r\n }\r\n\r\n static getNewQuoteData(jobId, type) {\r\n jobId = jobId || 0;\r\n type = type || 'Fabricator';\r\n // let url = `${_getUrlBase()}/Job/QuickQuote/${serverConfig.userId}/GetNewQuoteData?jobId=${jobId}&type=${type}&hide=${__hideFeatures}`;\r\n let url = `${_getUrlBase()}/api/Public/${serverConfig.userId}/GetNewQuoteData?jobId=${jobId}&type=${type}&hide=${__hideFeatures}`;\r\n if (Config.isMobile()) {\r\n url += '&w=150';\r\n }\r\n return _get(url);\r\n }\r\n\r\n static getMenuNavigation (forTool) {\r\n if (document.kvConfig.noInternetMode) {\r\n return Promise.resolve({data: []})\r\n }\r\n const url = forTool\r\n ? `${_getUrlBase()}/api/PublicFabricatorVisualizerNavigation/List?FabricatorId=${serverConfig.userId}&forTool=${forTool}`\r\n : `${_getUrlBase()}/api/PublicFabricatorVisualizerNavigation/List?FabricatorId=${serverConfig.userId}`\r\n return _get(url);\r\n }\r\n\r\n static userLogin(data) {\r\n if(document.kvConfig.kioskMode) {\r\n var response = this.saveUserKiosk(data);\r\n return Promise.resolve(response);\r\n } else {\r\n return _post(_getUrlBase() + \"/api/Public/LoginClient\", data);\r\n }\r\n // return _post(_urlBase() + \"/LoginClient\", {email: email, password: password});\r\n }\r\n\r\n static userRegister(data) {\r\n if(document.kvConfig.kioskMode) {\r\n var response = this.saveUserKiosk(data);\r\n return Promise.resolve(response);\r\n } else {\r\n return _post(`${_getUrlBase()}/api/Public/RegisterClient`, data);\r\n }\r\n // return _post(_urlBase() + \"/RegisterClient\", data);\r\n }\r\n\r\n static saveQuote(data) {\r\n if(document.kvConfig.kioskMode) {\r\n const state = store.getState();\r\n const {serverState, userState} = state;\r\n const userInfo = userState.userInfo;\r\n return this.saveQuoteKiosk(JSON.stringify({\r\n subDomain: document.kvConfig.subDomain,\r\n encodedUserId: userInfo.encodedUserId,\r\n quoteData: JSON.stringify(data),\r\n id: serverState.jobId\r\n }));\r\n } else {\r\n return _post(_getUrlBase() + \"/api/Public/SaveQuote\", data);\r\n }\r\n // return _post(_urlBase() + \"/SaveMultiQuickQuote\", data);\r\n }\r\n\r\n static submitPayment(data) {\r\n return _post(_getUrlBase() + \"/api/Public/SubmitPayment\", data);\r\n }\r\n\r\n // email must be post-fixed by the /, see here\r\n // https://stackoverflow.com/questions/13298542/apicontroller-returns-404-when-id-contains-period\r\n // the accepted answer\r\n static resetUserPassword(email, language) {\r\n return _post(_getUrlBase() + '/api/Public/SendResetPassword', {\r\n email,\r\n language,\r\n fabricatorId: document.kvConfig.userId,\r\n });\r\n }\r\n\r\n static scheduleCustomer(data) {\r\n if(document.kvConfig.kioskMode) {\r\n return this.saveSchedule(JSON.stringify({\r\n subDomain: document.kvConfig.subDomain,\r\n json: JSON.stringify(data)\r\n }));\r\n } else {\r\n return _post(_getUrlBase() + \"/api/Public/Schedule\", data);\r\n }\r\n }\r\n\r\n static getJobData(jobId) {\r\n return _get(_urlBase() + \"/GetJobDataById?jobId=\" + jobId);\r\n }\r\n\r\n static getBVJobData(jobId, editToken) {\r\n return _get(_getUrlBase() + '/api/Public/getBvJobData/' + jobId + (editToken ? \"?editToken=\" + editToken : \"\"))\r\n }\r\n\r\n static getEmployees() {\r\n if(document.kvConfig.kioskMode) {\r\n return Promise.resolve(this.getKioskApiResponse(document.kvConfig.userId, `/api/Public/getEmployees/${+document.kvConfig.userId}`));\r\n } else {\r\n return _get(`${_getUrlBase()}/api/Public/getEmployees/${+document.kvConfig.userId}`);\r\n }\r\n }\r\n\r\n static generateAuthenticationToken() {\r\n const userState = store.getState().userState;\r\n const {userInfo} = userState;\r\n if (userInfo && userInfo.phoneNumber && userInfo.phoneNumber.indexOf(\"555-555-5555\") === -1) {\r\n return _get(_getUrlBase() + \"/api/TwoFactorAuthentication/GenerateAuthenticationRequest?encodedCustomerId=\" + encodeURIComponent(userState.encodedUserId));\r\n } else if(userInfo && userInfo.phoneNumber && userInfo.phoneNumber.indexOf('555-555-5555') !== -1) {\r\n return Promise.resolve(\"93eacff8-d2cf-488b-b10d-12c81dd806e2\");\r\n } else {\r\n return Promise.reject();\r\n }\r\n }\r\n\r\n static sendAuthenticationRequest(token, to, type) {\r\n if(token !== \"93eacff8-d2cf-488b-b10d-12c81dd806e2\")\r\n return _post(_getUrlBase() + \"/api/TwoFactorAuthentication/SendAuthenticationRequest\", {token, to, type});\r\n else\r\n return Promise.resolve(true);\r\n }\r\n\r\n static validateAuthenticationRequest(token, code, phoneNumber) {\r\n const userState = store.getState().userState;\r\n if(token === \"93eacff8-d2cf-488b-b10d-12c81dd806e2\") {\r\n return Promise.resolve({data: code === \"568127\"});\r\n } else {\r\n return _post(_getUrlBase() + \"/api/TwoFactorAuthentication/ValidateAuthenticationRequest\", {token, code, phoneNumber, encodedCustomerId: userState.encodedUserId});\r\n }\r\n }\r\n\r\n static postDisplayRoom(bvState) {\r\n return _post(`${_getUrlBase()}/api/public/saveDefaults/${+document.kvConfig.userId}/client/bathroomvisualizer`, [bvState]);\r\n }\r\n\r\n static getDisplayRoom() {\r\n return _get(`${_getUrlBase()}/api/public/getDefaults/${+document.kvConfig.userId}/client/bathroomvisualizer`);\r\n }\r\n\r\n static resendActivationEmail(email) {\r\n return _post(`${_getUrlBase()}/api/public/resendActivationEmail`,\r\n {email, fabricatorId: +document.kvConfig.userId});\r\n }\r\n\r\n static async getBathroomVisualizerData(featuresCount, forVisualizerType) {\r\n const visualizerType = forVisualizerType || document.kvConfig.visualizerType;\r\n if (document.kvConfig.noInternetMode) {\r\n const featuresResponse = await _get(hardcodeResponsesFolder() + \"/mainVisualizerResponseFeatures.json\");\r\n let allResponse = await _get(hardcodeResponsesFolder() + \"/mainVisualizerResponse.json\");\r\n allResponse.data.features = featuresResponse.data;\r\n return allResponse\r\n }\r\n let localUrl = addUrlMode(`/api/public/bvdata/${+document.kvConfig.userId}`, visualizerType);\r\n let remoteUrl = visualizerType === \"bvLook\"\r\n ? addUrlMode(`/api/public/bvdata/${+document.kvConfig.userId}${(featuresCount ? \"?featuresPerGroup=\"+featuresCount : \"\")}`, visualizerType)\r\n : addUrlMode(`/api/public/bvdata/${+document.kvConfig.userId}${(featuresCount ? \"/\"+featuresCount : \"\")}`, visualizerType)\r\n return document.kvConfig.kioskMode\r\n ? this.getKioskApiResponse(document.kvConfig.userId, localUrl)\r\n : _get(`${_getUrlBase()}${remoteUrl}`);\r\n }\r\n\r\n static getBathroomVisualizerFeatures(arrayOfIds, arrayOfSkus, requestSharedFeatureNames = false, visualizerType) {\r\n if (document.kvConfig.noInternetMode || IS_OFFLINE_MODE) { // no need to receive features, we already received 50k, all of them\r\n return Promise.resolve({data: []})\r\n }\r\n const baseUrl = addUrlMode(`${_getUrlBase()}/api/public/bvdata/${+document.kvConfig.userId}/features`, visualizerType);\r\n return _post(baseUrl, arrayOfSkus\r\n ? requestSharedFeatureNames ? {sharedFeatureNames: arrayOfSkus} : {skus: arrayOfSkus}\r\n : {Ids: arrayOfIds});\r\n }\r\n\r\n static getBathroomVisualizerGroups(visualizerType) {\r\n if (document.kvConfig.noInternetMode) {\r\n return _get(hardcodeResponsesFolder() + \"/featureGroupsCounts.json\")\r\n }\r\n const localUrl = addUrlMode(`/api/public/bvdata/${+document.kvConfig.userId}/groups`, visualizerType);\r\n return document.kvConfig.kioskMode\r\n ? this.getKioskApiResponse(document.kvConfig.userId, localUrl)\r\n : _get(`${_getUrlBase()}${localUrl}`);\r\n }\r\n\r\n static fixGroupName(groupName) {\r\n return groupName.trim().replace(/\\//g,\"%23%23\").replace(/ /g,\"%20\").replace(/&/g,\"%26\");\r\n }\r\n\r\n static async getBathroomVisualizerGroupFeatures(groupName,\r\n page = 0,\r\n pageSize = 1000,\r\n filterValues = [],\r\n searchText = \"\",\r\n layoutAbbreviation = \"\",\r\n axiosController,\r\n requestOldFeatures = false,\r\n visualizerType = document.kvConfig.visualizerType) {\r\n if (IS_OFFLINE_MODE) {\r\n return Promise.resolve({data: []})\r\n }\r\n pageSize = (groupName === \"EX L\") ? 1500 : pageSize;\r\n const fixedGroupName = JsonApi.fixGroupName(groupName);\r\n const layout = getCurrentLayout();\r\n\r\n let localUrl = layout.isNewLayout && (visualizerType === \"kvScene\" && !IS_LIXIL_SERVERS)\r\n ? `/api/public/bvdataR/${+document.kvConfig.userId}/features/${fixedGroupName}`\r\n : `/api/public/bvdata/${+document.kvConfig.userId}/features/${fixedGroupName}`;\r\n\r\n let requestUrl = `${_getUrlBase()}${localUrl}/${page}/${pageSize}/`;\r\n\r\n const searchGroupName = layout.isNewLayout && groupName.includes(\" Crop\") ? groupName.replace(\" Crop\", \"\") : groupName;\r\n const featureGroup = layout.getFeatureGroupByGroupName(searchGroupName);\r\n\r\n if (USE_SERVER_CACHING && (visualizerType === \"KV\" || visualizerType === \"Kitchen\")\r\n || (!requestOldFeatures && featureGroup && featureGroup.nextFeaturesPageToLoadArray)) {\r\n let layoutName = layoutAbbreviation || `${layout.getCurrentLayoutAbbreviation()}/`;\r\n if (layout.isNewLayout) {\r\n layoutName = layoutName.replace(\"Layout\", \"\");\r\n }\r\n requestUrl += layoutName; // should go before filters\r\n }\r\n\r\n requestUrl = addUrlMode(requestUrl, visualizerType);\r\n\r\n if (filterValues.length) {\r\n filterValues.forEach((filterValue) => {\r\n requestUrl += (requestUrl.includes(\"?\") ? \"&\" : \"?\") + \"filterId=\" + filterValue;\r\n });\r\n }\r\n if (searchText) {\r\n requestUrl += (requestUrl.includes(\"?\") ? \"&\" : \"?\") + \"filter=\" + searchText\r\n }\r\n\r\n const fabricatorSettings = store.getState().fabricatorState.settings;\r\n if (fabricatorSettings.leadCapture) {\r\n requestUrl += (requestUrl.includes(\"?\") ? \"&\" : \"?\") + \"sortBy=unlocked\";\r\n }\r\n if (requestOldFeatures) {\r\n const oldVersion = getCommonVisualizerType(visualizerType) === \"kitchen\" ? \"kv4\" : \"bv4\";\r\n requestUrl += (requestUrl.includes(\"?\") ? \"&\" : \"?\") + \"toolVersion=\" + oldVersion; // should go before filters\r\n }\r\n\r\n const response = document.kvConfig.kioskMode\r\n ? await this.getKioskApiResponse(document.kvConfig.userId, localUrl, {filterValues, searchText, page, pageSize, type: \"features\" })\r\n : await _get(requestUrl, axiosController)\r\n if (Config.isDevMode()) {\r\n console.log(requestUrl + \" response\", response);\r\n }\r\n if (!response || !response.data || response.data.error) {\r\n renderErrorPopup(response.data.error);\r\n return []\r\n }\r\n return fixFeaturesResponse(response.data)\r\n }\r\n\r\n static getBathroomVisualizerGroupFilterValues(groupName = \"\", filterId = null, withStoneFilters = true) {\r\n if (document.kvConfig.noInternetMode) { // no need to receive features, we already received 50k, all of them\r\n return Promise.resolve({data: []})\r\n }\r\n const fixedGroupName = JsonApi.fixGroupName(groupName);\r\n var localUrl = `/api/public/bvdata/${+document.kvConfig.userId}/filters/${fixedGroupName}/`;\r\n var featureLocal = `/api/public/bvdata/${+document.kvConfig.userId}/features/${fixedGroupName}`;\r\n // const layout = getCurrentLayout();\r\n if (USE_SERVER_CACHING) {\r\n localUrl += `ALL/`;\r\n }\r\n localUrl = addUrlMode(localUrl);\r\n featureLocal = addUrlMode(featureLocal);\r\n let requestUrl = `${_getUrlBase()}${localUrl}`;\r\n if (filterId) {\r\n requestUrl = requestUrl + filterId\r\n }\r\n if (!withStoneFilters) {\r\n requestUrl = requestUrl + (requestUrl.includes(\"?\") ? \"&\" : \"?\") + \"stoneFilters=false\";\r\n }\r\n\r\n if(document.kvConfig.kioskMode) {\r\n return this.getKioskApiResponse(document.kvConfig.userId, localUrl, {type: 'filters', filterId, featureLocal});\r\n } else {\r\n return _get(requestUrl);\r\n }\r\n }\r\n\r\n static getQtCategories(layoutName, forVisualizerType) {\r\n if (document.kvConfig.noInternetMode) {\r\n return _get(hardcodeResponsesFolder() + \"/featureGroupCategories.json\")\r\n }\r\n const featuresPerGroupAmount = window.location.href.includes(\"cutting_edge_countertops\")\r\n || (document.kvConfig.userId === 138452) ? 200 : 50;\r\n const visualizerType = getCommonVisualizerType(forVisualizerType);\r\n // return _get(`${_getUrlBase()}/api/public/featureGroupCategories/${+document.kvConfig.userId}/${visualizerType}/?featuresPerGroup=${featuresPerGroupAmount}&mode=${visualizerType}&layout=${layoutName}`);\r\n\r\n const layout = getCurrentLayout(forVisualizerType);\r\n const localUrl = layout.isNewLayout\r\n ? `/api/public/featureGroupCategoriesLite/${+document.kvConfig.userId}/${visualizerType}/`\r\n : `/api/public/featureGroupCategories/${+document.kvConfig.userId}/${visualizerType}/?featuresPerGroup=${featuresPerGroupAmount}&mode=${visualizerType}&layout=${layoutName}`;\r\n return document.kvConfig.kioskMode\r\n ? this.getKioskApiResponse(document.kvConfig.userId, localUrl)\r\n : _get(`${_getUrlBase()}${localUrl}`);\r\n }\r\n\r\n static saveQuoteFast(data) {\r\n if(document.kvConfig.kioskMode) {\r\n return Promise.resolve(this.getKioskData(\"quickSave\", JSON.stringify({\r\n id: data.jobId,\r\n saveData: data.data\r\n })));\r\n }\r\n else {\r\n return _post(`${_getUrlBase()}/api/public/SaveQuoteFast`, data);\r\n }\r\n }\r\n\r\n static contractSign(data) {\r\n return _post(`${_getUrlBase()}/api/public/replace-and-sign`, data);\r\n }\r\n\r\n static getDocumentForJob(jobId, forceNew = false) {\r\n return _post(`${_getUrlBase()}/api/public/document-for-job/${jobId}/${forceNew}`, {});\r\n }\r\n\r\n static getContractDocuments(fabricatorId = document.kvConfig.userId) {\r\n return _get(`${_getUrlBase()}/api/document-signing/documents/${fabricatorId}`);\r\n }\r\n\r\n static getDocumentForFabricator(fabricatorId = document.kvConfig.userId) {\r\n if (document.kvConfig.noInternetMode) {\r\n return _get(hardcodeResponsesFolder() + \"/documentsForFabricator.json\")\r\n }\r\n return _post(`${_getUrlBase()}/api/public/document-for-fab/${fabricatorId}/`);\r\n }\r\n\r\n static getFabricatorSubscriptions(fabricatorId) {\r\n if (document.kvConfig.noInternetMode) {\r\n return _get(hardcodeResponsesFolder() + \"/fabricatorSubscriptions.json\")\r\n }\r\n const localUrl = `/api/public/GetFabricatorSubscriptionInfo/${fabricatorId}`;\r\n return document.kvConfig.kioskMode\r\n ? this.getKioskApiResponse(fabricatorId, localUrl)\r\n : _get(`${_getUrlBase()}${localUrl}`);\r\n }\r\n\r\n static getFabricatorDiscounts(fabricatorId) {\r\n if (document.kvConfig.noInternetMode) {\r\n return _get(hardcodeResponsesFolder() + \"/fabricatorDiscounts.json\")\r\n }\r\n return _get(`${_getUrlBase()}/api/public/fabricator-discounts/${fabricatorId}`);\r\n }\r\n\r\n static async getKioskApiResponse(fabricatorId, localUrl, otherData = null) {\r\n let data = {\r\n fabricatorId,\r\n localUrl,\r\n additionalInfo: {...otherData}\r\n };\r\n return this.getKioskData(\"getJson\", data);\r\n }\r\n\r\n static async getKioskData(type, data) {\r\n var kioskData = await this.getRawKioskData(type, data);\r\n if(typeof(kioskData) == \"string\") {\r\n kioskData = JSON.parse(kioskData);\r\n }\r\n return {data: kioskData};\r\n }\r\n\r\n static getRawKioskData(type, data) {\r\n var kioskData = KioskApp.PostMessage({\r\n type,\r\n data\r\n });\r\n return kioskData;\r\n }\r\n\r\n static saveQuoteKiosk(data) { return this.getKioskData('saveQuote', data); }\r\n static saveUserKiosk(data) { return this.getKioskData('saveUser', data); }\r\n static saveSchedule(data) { return this.getKioskData('schedule', data); }\r\n\r\n static getCustomersAndEmployees(fabricatorId = document.kvConfig.userId) {\r\n if (document.kvConfig.noInternetMode) {\r\n return _get(hardcodeResponsesFolder() + \"/customersAndEmployees.json\")\r\n }\r\n return _get(`${_getUrlBase()}/api/public/fabricator-customer-employees/${fabricatorId}/`);\r\n }\r\n\r\n static getCustomerById(customerId) {\r\n return _get(`${_getUrlBase()}/api/public/getCustomerData/${customerId}?format=json`);\r\n }\r\n static copySqftImages(fabricatorId, postData) {\r\n return _post(`${_getUrlBase()}/api/public/copySqftImages/${fabricatorId}/`, postData);\r\n }\r\n static getPassedUserInfo(userData) {\r\n return _post(`${_getUrlBase()}/api/public/EncSSOLoginClient/`, userData);\r\n }\r\n static postSaveVisualizerImage(fabricatorId, postData) {\r\n return _post(`${_getUrlBase()}/api/public/saveVisualizerImage/${fabricatorId}`, postData);\r\n }\r\n static postSaveTempData(postData, id = \"\", expiresIn = \"\") {\r\n let postString = `${_getUrlBase()}/api/public/saveTempData`;\r\n if (id) {\r\n postString+= `/${id}`;\r\n }\r\n if (expiresIn) {\r\n postString+= `/${expiresIn}`;\r\n }\r\n return _post(postString, {\"data\": postData});\r\n }\r\n static getSaveTempData(id = \"\") {\r\n return _get(`${_getUrlBase()}/api/public/getTempData/${id}`);\r\n }\r\n static postSureTax(postData, fabricatorId = document.kvConfig.userId) {\r\n return _post(`${_getUrlBase()}/api/public/postSureTaxRequest/${fabricatorId}`, postData);\r\n }\r\n static postVerifyAddress(postData) {\r\n return _post(`${_getUrlBase()}/api/public/verifyAddress`, postData);\r\n }\r\n static getTrumbleShippingOptions(skuList, zipCode) {\r\n return _get(`${_getUrlBase()}/api/public/getTrumbleShippingOptions/${skuList}/${zipCode}`);\r\n }\r\n static postTrumbleShippingOptions(postData, zipCode) {\r\n return _post(`${_getUrlBase()}/api/public/trumbleShippingOptions/${zipCode}`, postData);\r\n }\r\n static postTrumbleInventory(postData) {\r\n return _post(`${_getUrlBase()}/api/public/trumbullInventory`, postData);\r\n }\r\n static postShipperHqShipping(postData) {\r\n return _post(`${_getUrlBase()}/api/public/shipperHqShipping`, postData);\r\n }\r\n static getFilterGroups(fabricatorId = document.kvConfig.userId) {\r\n return _get(`${_getUrlBase()}/api/public/filterGroups/${fabricatorId}`);\r\n }\r\n static getMarkUpForFeatures(featuresArray) {\r\n return _post(`${_getUrlBase()}/api/markup/get-features/`, featuresArray);\r\n }\r\n}\r\n","import {useHistory, useRouteMatch} from \"react-router-dom\";\r\nimport {hashHistory} from \"react-router\"; // omg pls don't kill me for that\r\n\r\nimport {setWizardActiveItem, setWizardActiveStep, setWizardSelectedValues} from \"../../../actions/wizardFunctions\";\r\nimport store from \"../../../store\";\r\nimport {\r\n getAvailableSteps,\r\n getCurrentGroups,\r\n getDefaultMaterialsWizardItem, getFeatureGroupFromWizardGroup, getWizardGroupFromCurrentSteps, navItemIsExcluded\r\n} from \"../../look/lookNavigation/lookMain/lookWizard/lookWizardFunctions\";\r\nimport Misc from \"../../../misc/misc\";\r\nimport {ROUTES} from \"../../../routes\";\r\nimport {IS_LIXIL_UI} from \"../../../config\";\r\nimport {\r\n getNextWizardSteps,\r\n isSameVisualizerWizard, selectedWizardGroupIsNotInCurrentStepAnymore\r\n} from \"../../look/lookNavigation/lookMain/lookWizard/lookWizardFunctions2\";\r\nimport {showWizardStepDoneCheckMark} from \"./materialsWizardDoneCheckMark\";\r\n\r\nexport const getNextNotCheckedStep = (wizardActiveItem, wizardActiveStep, wizardSelectedValues, cartItems, activeQuoteIndex) => {\r\n let nextStep = wizardActiveStep + 1;\r\n\r\n return nextStep // removed to prevent bugs (per Alan)\r\n\r\n // if (!wizardSelectedValues[nextStep]) { // if the next step is free - just go next, otherwise - let's find where to jump\r\n // changeWizardStepRoute(nextStep);\r\n // return\r\n // }\r\n const wizardSteps = getNextWizardSteps(wizardActiveItem, wizardActiveStep, wizardSelectedValues);\r\n while (nextStep <= wizardSteps.length - 1) {\r\n if (!wizardSteps[nextStep]) {\r\n break;\r\n }\r\n const wizardGroup = wizardSteps[nextStep].stepGroups[0];\r\n const featureGroup = getFeatureGroupFromWizardGroup(wizardGroup);\r\n const showDoneCheckMark = showWizardStepDoneCheckMark(wizardSelectedValues[nextStep], featureGroup, cartItems, activeQuoteIndex, wizardSteps[nextStep].stepGroups);\r\n // console.log(\"showDoneCheckMark\", wizardGroup, featureGroup, showDoneCheckMark);\r\n if (!showDoneCheckMark) {\r\n break;\r\n }\r\n // console.log(\"activePartRelatedItemIndex skipped\", activePartRelatedItemIndex);\r\n nextStep = nextStep + 1;\r\n }\r\n return nextStep\r\n}\r\n\r\nconst getSkippedWizardValues = (nextStep, wizardActiveStep, wizardItem, wizardSelectedValues) => {\r\n if (nextStep > wizardActiveStep) {\r\n\r\n const wizardSteps = getAvailableSteps(wizardItem, wizardSelectedValues, true);\r\n wizardSteps.forEach((step, stepIndex) => {\r\n if ((stepIndex < nextStep) && (!wizardSelectedValues[stepIndex]\r\n || selectedWizardGroupIsNotInCurrentStepAnymore(wizardSelectedValues[stepIndex], step.stepGroups))) {\r\n const wizardGroup = step.stepGroups[0];\r\n if (wizardGroup) {\r\n const skippedValue = {\r\n [stepIndex]: {\r\n wizardGroup,\r\n }\r\n }\r\n store.dispatch(setWizardSelectedValues(skippedValue));\r\n wizardSelectedValues = Object.assign(wizardSelectedValues, skippedValue); // this is needed for code below\r\n }\r\n }\r\n });\r\n }\r\n return wizardSelectedValues\r\n}\r\n\r\n/**\r\n * is used for SQFT to prevent bug when advanced quoting is missing selected value\r\n * @param cartItems {[cartItemInterface]}\r\n */\r\nexport const setWizardValuesFromCartItems = (cartItems) => {\r\n const {wizardSelectedValues, wizardActiveItem} = store.getState().wizardState;\r\n if (!wizardActiveItem || !cartItems.length) {\r\n return\r\n }\r\n let shouldUpdate = false;\r\n let wizardValues = Object.assign({}, wizardSelectedValues);\r\n const wizardSteps = getAvailableSteps(wizardActiveItem, wizardSelectedValues, true);\r\n // console.log(\"wizardSteps\", wizardSteps);\r\n // console.log(\"cartItems\", cartItems);\r\n // console.log(\"wizardValues\", wizardValues);\r\n cartItems.forEach((cartItem) => {\r\n if (!cartItem.fromWizardGroupId\r\n || !Number.isInteger(cartItem.fromWizardStep)\r\n || !cartItem.fromWizardId || (cartItem.fromWizardId !== wizardActiveItem.id)\r\n || wizardValues[cartItem.fromWizardStep]) {\r\n return\r\n }\r\n if (wizardSteps[cartItem.fromWizardStep] && wizardSteps[cartItem.fromWizardStep].stepGroups) {\r\n const wizardGroup = wizardSteps[cartItem.fromWizardStep].stepGroups.find(wG => wG.id === cartItem.fromWizardGroupId)\r\n // yes, we added a cart item from the wizard step, we should select it\r\n if (wizardGroup) {\r\n wizardValues[cartItem.fromWizardStep] = {\r\n wizardGroup,\r\n }\r\n if (!navItemIsExcluded({part: cartItem.cartFeature}, wizardGroup)) {\r\n wizardValues[cartItem.fromWizardStep].selectedFeature = cartItem.cartFeature;\r\n wizardValues[cartItem.fromWizardStep].partId = cartItem.partId;\r\n }\r\n shouldUpdate = true;\r\n }\r\n }\r\n });\r\n if (shouldUpdate) {\r\n // console.log(\"shouldUpdate\", wizardValues);\r\n store.dispatch(setWizardSelectedValues(wizardValues, true, wizardActiveItem));\r\n }\r\n}\r\n\r\nexport const switchToWizardItem = (wizardItem, nextStep, quoteIndex, wizardGroupId = null, changeRoute = true) => {\r\n const {quotesState, wizardState} = store.getState();\r\n const {allWizardsValues, wizardActiveStep} = wizardState;\r\n\r\n if (!wizardItem) {\r\n wizardItem = getDefaultMaterialsWizardItem();\r\n }\r\n\r\n let wizardValues = {};\r\n const foundWizardSelectedObject = allWizardsValues.find(wizSelObject => {\r\n return (wizSelObject.quoteIndex === quotesState.activeQuoteIndex) && (wizSelObject.wizardItemId === wizardItem.id)\r\n && isSameVisualizerWizard(wizSelObject)\r\n });\r\n if (foundWizardSelectedObject) {\r\n wizardValues = Object.assign({}, foundWizardSelectedObject.wizardSelectedValues);\r\n wizardValues = getSkippedWizardValues(nextStep, wizardActiveStep, wizardItem, wizardValues);\r\n }\r\n store.dispatch(setWizardActiveItem(wizardItem, quoteIndex));\r\n store.dispatch(setWizardSelectedValues(wizardValues, true, wizardItem));\r\n if (Number.isInteger(nextStep)) {\r\n if (wizardGroupId) {\r\n const {neededStep} = getWizardGroupFromCurrentSteps(wizardItem, wizardValues, wizardGroupId);\r\n if (neededStep && (neededStep.stepIndex !== nextStep)) {\r\n nextStep = neededStep.stepIndex\r\n }\r\n }\r\n store.dispatch(setWizardActiveStep(nextStep));\r\n } else {\r\n nextStep = foundWizardSelectedObject && Number.isInteger(foundWizardSelectedObject.lastVisitedStep)\r\n ? foundWizardSelectedObject.lastVisitedStep // restore last step\r\n : wizardValues ? Object.keys(wizardValues).length : 0 // restore last step (just in case lastVisitedStep is missing)\r\n if (nextStep === 0 && wizardActiveStep !== 0) {\r\n store.dispatch(setWizardActiveStep(0)); // cases when someone changes the wizard\r\n }\r\n }\r\n if (!changeRoute) {\r\n return\r\n }\r\n const urlStepNumber = nextStep + 1; // because we don't want to have 0 in the URL\r\n const nextUrl = \"/materials/\" + Misc.getUrlFromString(wizardItem.name) + \"/\" + urlStepNumber;\r\n const currentHash = window.location.hash.split(\"#\")[1];\r\n if (!currentHash || (currentHash !== nextUrl)) {\r\n hashHistory.push(nextUrl);\r\n }\r\n}\r\n\r\nexport const useChangeWizardStepRoute = () => {\r\n\r\n let history = useHistory();\r\n let routeMatch = useRouteMatch();\r\n // {\r\n // isExact: true,\r\n // params: {partName: 'kitchen-cabinets', subPartName: '1'},\r\n // path: \"/materials/:partName/:subPartName\",\r\n // url: \"/materials/kitchen-cabinets/3/upper-cabinet-boxes\"\r\n // }\r\n // let {partName, subPartName} = routeMatch.params;\r\n let {partName} = routeMatch.params;\r\n\r\n const changeWizardStepRoute = (nextStep, propsWizardItem) => {\r\n\r\n const {wizardActiveItem, wizardActiveStep, wizardList} = store.getState().wizardState;\r\n let {wizardSelectedValues} = store.getState().wizardState;\r\n\r\n const currentWizardItem = propsWizardItem || wizardActiveItem;\r\n\r\n wizardSelectedValues = getSkippedWizardValues(nextStep, wizardActiveStep, currentWizardItem, wizardSelectedValues);\r\n\r\n const currentGroups = getCurrentGroups(currentWizardItem, nextStep, wizardSelectedValues);\r\n\r\n if (wizardActiveStep > -1 && !currentGroups.length) { // wizard finished! congratulations\r\n const currentWizardIndex = wizardList.findIndex(wizardItem => wizardItem.id === currentWizardItem.id);\r\n\r\n if (nextStep === -1 && wizardActiveStep === 0) { // go to the previous wizard\r\n const prevEnabledWizard = wizardList.find((wizardItem, wizardItemIndex) => {\r\n return (wizardItem.id !== currentWizardItem.id) && (wizardItemIndex < currentWizardIndex)\r\n });\r\n if (prevEnabledWizard) {\r\n switchToWizardItem(prevEnabledWizard);\r\n } else {\r\n history.push(ROUTES.quoteDesign);\r\n }\r\n return;\r\n }\r\n\r\n const nextEnabledWizard = wizardList.find((wizardItem, wizardItemIndex) => {\r\n return (wizardItem.id !== currentWizardItem.id) && (wizardItemIndex > currentWizardIndex)\r\n });\r\n if (nextEnabledWizard) {\r\n switchToWizardItem(nextEnabledWizard);\r\n } else {\r\n history.push(ROUTES.shoppingcart);\r\n }\r\n return;\r\n }\r\n\r\n // console.log(\"nextStep\", nextStep);\r\n store.dispatch(setWizardActiveStep(nextStep));\r\n\r\n if (IS_LIXIL_UI) {\r\n return; // no need to change url\r\n }\r\n\r\n // console.log(\"subPartName\", subPartName);\r\n // console.log(\"partName\", partName);\r\n // console.log(\"history\", history);\r\n\r\n if (!partName) {\r\n partName = Misc.getUrlFromString(currentWizardItem.name)\r\n }\r\n\r\n const wizardGroup = currentGroups[0];\r\n if (!wizardGroup) {\r\n console.info(\"no wizard group found, something is wrong with the wizard\", );\r\n return\r\n }\r\n const stepUrl = Misc.getUrlFromString(wizardGroup.customDisplayName || wizardGroup.groupName || \"\");\r\n\r\n const urlStepNumber = nextStep + 1; // because we don't want to have 0 in the URL\r\n history.push(\"/materials/\" + partName + \"/\" + urlStepNumber + (stepUrl ? \"/\" + stepUrl : \"\"));\r\n }\r\n\r\n return {changeWizardStepRoute}\r\n}\r\n","import uuid from \"uuid\";\r\nimport _ from 'lodash';\r\n\r\nimport EventManager from \"../../store/sqftEventManager\";\r\nimport point from \"./point\";\r\nimport lineLength from \"./overlays/lineLength\";\r\nimport pnpoly, {isPointInsidePolygon} from \"../../../../lib/pnpoly\";\r\nimport workspace from \"../workspace\";\r\nimport config from \"../../store/sqftConfig\";\r\nimport {\r\n addDecimalToLength,\r\n get45CornerLegDistanceByHypotenuse,\r\n getClosestPoint,\r\n getIntersectCords,\r\n getIntersectCordsBetweenLines,\r\n getMousePositionOnShape,\r\n getParallelPoints,\r\n getPointBetweenPoints,\r\n getPointDistance, getPointField,\r\n getPointOnTheLine, getTanDeg,\r\n isInnerCorner,\r\n measureDistanceToInches,\r\n orientation\r\n} from \"../../../../helpers/sqftHelper\";\r\n//todo sqft-react\r\nimport moveDiagonalLine from \"../../../../lib/moveDiagonalLine\";\r\nimport bumpout from \"./overlays/bumpout\";\r\nimport label from \"./overlays/label\";\r\nimport LineCorner from \"./lineHooks/lineCorner\";\r\n// import Color from \"./core/draw/color\";\r\nimport COLOR_THEMES, {COLOR} from \"../../store/colorThemes\";\r\nimport Color from \"../workspace/textBox/draw/color\";\r\nimport store from \"../../../../../../store\";\r\nimport {\r\n RESOURCE_ATTACHED_TO_NAME,\r\n RESOURCE_ATTACHED_TO_TYPE,\r\n RESOURCE_TYPE, SHAPE_PART_ID,\r\n SIDEBAR_SLAB_SEAM_BUTTONS,\r\n SQFT_MODE\r\n} from \"../../../../constants\";\r\nimport {updateSQFTCalculations} from \"../../../../../../actions/sqftFunctions\";\r\nimport sqftSlabManager from \"../../store/sqftSlabManager\";\r\nimport {addMiteredSection} from \"../../../../../../actions/sqftMiteredFunctions\";\r\nimport {addResource, deleteResourceAttachedTo} from \"../../../../../../actions/sqftResourceFunctions\";\r\nimport SqftStore from \"../../store/sqftStore\";\r\nimport {getAngleBetween3Points, getLineDirection, getLineOrientation} from \"../../../../helpers/shapeHelper\";\r\nimport RenderFigures from \"../../helpers/renderFigures\";\r\nimport {\r\n getLineBordersArrayV2,\r\n updateMiteredLength,\r\n updateShapeWaterfallLength,\r\n updateUnderlaymentLength\r\n} from \"../../helpers/lineHelper\";\r\nimport {isSFTCabinetsGroup} from \"../../../../helpers/sqftNavigationHelper\";\r\nimport MiteredController from \"../controls/mitered\";\r\nimport SlabWorkspace from \"../slab/slabWorkspace\";\r\nimport sqftResourcesManager from \"../../store/sqftResoursesManager\";\r\nimport BlinkingHighlight from \"../../helpers/commonParts/blink\";\r\nimport workspaceControllers from \"../../store/workspaceControllers\";\r\nimport {createSlabModeWaterfallShapes} from \"../../store/canvasHelper\";\r\nimport {isMiterEdge, isWaterfallFeature} from \"../../../../helpers/featureHelper\";\r\nimport {getCurrentLayout} from \"../../../../../appLayout\";\r\nimport LineAttachmentsComposite from \"./lineHooks/lineAttachmentsComposite\";\r\nimport UnderlaymentController from \"../controls/underlayment\";\r\nimport sqftEventManager from \"../../store/sqftEventManager\";\r\nimport {getClosestPointOnLine} from \"../../../../helpers/coordinatesHelper\";\r\n// import Menu from \"../controls/menu\";\r\n// import MiteredController from \"../controls/mitered\";\r\n\r\nexport default function (from, to, parent = null) {\r\n //private variables\r\n var self = this,\r\n //parent = null,\r\n state = {\r\n mousePos: {},\r\n mouseDown: false,\r\n mouseDownPosition: null,\r\n isHovering: false,\r\n withEdge: false,\r\n withBacksplash: false,\r\n withWall: false,\r\n withBumpout: false,\r\n isWithMitered: false, // mitered tool\r\n isWithUnderlayment: false,\r\n isWithWaterfallEdge: false, // waterfallTool edges\r\n isWithPeninsulaUnderwrapEdge: false, // Peninsula Underwrap Edge edges\r\n isWithFakeEdge: false,\r\n withId: null,\r\n attachedHandleId: null,\r\n attachedHandleUrl: null,\r\n attachedCrownMoldingFeatureId: null,\r\n attachedCrownMoldingUrl: null,\r\n backsplashFeatureId: null,\r\n backsplashHeight: 0, //this is backsplash size\r\n backsplashName: \"\", //this is backsplash size\r\n backsplashType: \"\", //this is backsplash size\r\n attachedItems: {\r\n isWithCrownMolding: false,\r\n isWithEndCap: false,\r\n },\r\n movePointDistance: 0, // is needed for diagonal lines\r\n angleLinePoints: {},\r\n slabModeSkipMiteredEdgeCreation: false,\r\n isHiddenForever: false,\r\n seamCutPoint: null,\r\n },\r\n design = {\r\n aroundLineColor: '#E3E1E3',\r\n cornerGutterSize: 0.1,\r\n outlineWidth: 8,\r\n outlineMargin: 9,\r\n horizontalOutlineMargin: 5,\r\n lineThickness: 4\r\n },\r\n overlayImportData = null,\r\n lineCornerImportData = null,\r\n overlayMiteredData = null,\r\n overlayUnderlaymentData = null,\r\n lineDirection = {};\r\n //public properties\r\n this.id = uuid();\r\n this.from = from;\r\n this.to = to;\r\n this.ctx = null;\r\n this.attachedShape = null;\r\n this.overlay = null;\r\n this.lineCorner = null;\r\n this.bumpoutOverlay = null;\r\n this.miteredOverlay = null;\r\n this.waterfallOverlay = null;\r\n this.labelOverlay = null;\r\n this.titleOverlay = null;\r\n this.staticOffset = null;\r\n this.isLine = true;\r\n this.blink = new BlinkingHighlight();\r\n //todo\r\n this.lineAttachmentsComposite = new LineAttachmentsComposite();\r\n\r\n //private property setters\r\n function setParent(value) { parent = value; }\r\n //public property getters\r\n this.getParent = function() { return parent; };\r\n this.getAttachedShape = () => { return this.attachedShape; };\r\n this.isWithBumpout = function() { return state.withBumpout; };\r\n this.isWithEdge = function() { return state.withEdge; };\r\n this.isWithWaterfallToolEdge = () => { return state.isWithWaterfallEdge; };\r\n this.isWithPeninsulaUnderwrapEdge = () => { return state.isWithPeninsulaUnderwrapEdge; };\r\n this.isWithBacksplash = () => { return state.withBacksplash; };\r\n this.isWithMitered = function() { return state.isWithMitered; };\r\n this.isWithUnderlayment = function() { return state.isWithUnderlayment; };\r\n this.isWithHandle = function() { return state.attachedHandleId; };\r\n this.isWithMiteredPrev = function() {\r\n const prevLine = parent.getPrevLine(self);\r\n return prevLine.isWithMitered();\r\n };\r\n this.isWithMiterEdge = () => {\r\n const attachedResource = workspace.getAttachedTo(this);\r\n if (attachedResource) {\r\n return isMiterEdge(attachedResource.featureId);\r\n }\r\n };\r\n /** this will return if green edge is waterfall (not waterfall tool) */\r\n this.isWithWaterfallEdgeFeature = () => {\r\n const attachedResource = workspace.getAttachedTo(this);\r\n if (attachedResource) {\r\n return isWaterfallFeature(attachedResource.featureId);\r\n }\r\n };\r\n this.isWithCrownMolding = () => {\r\n return state.attachedItems.isWithCrownMolding\r\n }\r\n\r\n this.getAttachedFeature = () => {\r\n const attachedResource = workspace.getAttachedTo(this);\r\n const layout = getCurrentLayout();\r\n\r\n return layout.getFeatureById(attachedResource.featureId, true);\r\n }\r\n this.isHovering = (shouldExcludePoints = false) => {\r\n if (!shouldExcludePoints && this.from.isHovering()) {\r\n return true\r\n }\r\n return state.isHovering;\r\n };\r\n this.isAngleHovering = function() { return this.lineCorner.state.isHovering; };\r\n this.isCornerLineHovering = function() { return this.lineCorner.state.isCornerLineHovering; };\r\n this.getDesign = function() { return design };\r\n this.getWithId = () => { return state.withId };\r\n this.setWithId = (value) => { state.withId = value };\r\n this.getBacksplashHeight = () => { return state.backsplashHeight };\r\n this.setBacksplashHeight = (value) => {\r\n //update resource height\r\n const attachedToResource = {...sqftResourcesManager.getAttachedToLineResource(this)};\r\n attachedToResource.height = value;\r\n sqftResourcesManager.updateAttachedToLineResource(attachedToResource);\r\n\r\n state.backsplashHeight = value\r\n this.overlay.renderBacksplashText(state.backsplashName, state.backsplashType);\r\n };\r\n this.getHandleId = () => { return state.attachedHandleId};\r\n this.setHandleId = (featureId) => { state.attachedHandleId = featureId};\r\n this.getHandle3dURL = () => { return state.attachedHandleUrl};\r\n this.setHandle3dURL = (url) => { state.attachedHandleUrl = url};\r\n this.getCrownMolding3dURL = () => { return state.attachedCrownMoldingUrl};\r\n this.setCrownMolding3dURL = (url) => { state.attachedCrownMoldingUrl = url};\r\n this.getCrownMoldingFeatureId = () => { return state.attachedCrownMoldingFeatureId};\r\n this.setCrownMoldingFeatureId = (url) => { state.attachedCrownMoldingFeatureId = url};\r\n this.getBacksplashFeatureId = () => { return sqftResourcesManager.getAttachedToLineResource(this).backsplashFeatureId };\r\n this.setBacksplashFeatureId = (featureId) => {\r\n state.backsplashFeatureId = featureId\r\n\r\n //update resource feature id\r\n const attachedToResource = {...sqftResourcesManager.getAttachedToLineResource(this)};\r\n attachedToResource.backsplashFeatureId = featureId;\r\n sqftResourcesManager.updateAttachedToLineResource(attachedToResource);\r\n\r\n //update slab shapes feature\r\n SlabWorkspace.slabAdditionalShapes.updateAdditionalShapeFeature(this, featureId);\r\n };\r\n\r\n this.getState = () => { return state };\r\n this.setStateParams = (params) => {\r\n state = {...state, ...params};\r\n };\r\n this.getPointsFeatures = function () {\r\n return {\r\n from: {\r\n arcLength: self.from.arcLength,\r\n angle: self.from.angle,\r\n x: self.from.x,\r\n y: self.from.y,\r\n pointDirection: self.from.pointDirection,\r\n corner: self.from.corner\r\n },\r\n to: {\r\n arcLength: self.to.arcLength,\r\n angle: self.to.angle,\r\n x: self.to.x,\r\n y: self.to.y,\r\n pointDirection: self.to.pointDirection,\r\n corner: self.to.corner\r\n },\r\n }\r\n };\r\n this.getOrientation = () => {\r\n return getLineOrientation(this.from, this.to);\r\n };\r\n this.getAttachedItems = function () {\r\n let isAnyItemsAttached = false;\r\n for (const attachedItemKey in state.attachedItems) {\r\n if (state.attachedItems[attachedItemKey]) {\r\n isAnyItemsAttached = true\r\n }\r\n }\r\n return state.withEdge\r\n || state.withBacksplash\r\n || state.withWall\r\n || state.withBumpout\r\n || state.isWithMitered\r\n || state.isWithUnderlayment\r\n || this.isWithWaterfallToolEdge()\r\n || this.isWithPeninsulaUnderwrapEdge()\r\n || state.withId\r\n || isAnyItemsAttached\r\n };\r\n this.setTutotialImage = function (image) {\r\n self.tutorialImage = image\r\n };\r\n this.isWithFakeEdge = () => { return state.isWithFakeEdge }\r\n this.setFakeEdge = (value) => { state.isWithFakeEdge = value };\r\n this.setHiddenForever = (value) => { state.isHiddenForever = value }; // this is for slab placeholder\r\n\r\n //private functions\r\n this.calculateRenderPosition = (point, sqftMode) => {\r\n const state = store.getState();\r\n const isShowSlabTool = state.sqftSlabState.isShowSlabTool;\r\n let offset = this.staticOffset ? this.staticOffset : this.getOffset();\r\n let scale = config.scale;\r\n let xCord = 0;\r\n let yCord = 0;\r\n if (!isShowSlabTool || sqftMode === SQFT_MODE.regular) {\r\n xCord = point.pos.x;\r\n yCord = point.pos.y;\r\n } else {\r\n if (point.posSlab) {\r\n xCord = point.posSlab.x;\r\n yCord = point.posSlab.y;\r\n } else {\r\n console.error(\"point.posSlab was not set\");\r\n }\r\n }\r\n\r\n return {\r\n x: (xCord * scale) + offset.x,\r\n y: (yCord * scale) + offset.y\r\n };\r\n };\r\n // function calculatePointPosition(renderPoint) {\r\n // var offset = self.getOffset();\r\n // var scale = config.scale;\r\n // return {\r\n // x: (renderPoint.x - offset.x) / scale,\r\n // y: (renderPoint.y - offset.y) / scale\r\n // };\r\n // }\r\n\r\n const getLineField = () => {\r\n var fieldSquares = {\r\n from: null,\r\n to: null,\r\n points: [],\r\n isHovering: state.isHovering,\r\n };\r\n\r\n fieldSquares.from = self.from.getPointField();\r\n fieldSquares.to = self.to.getPointField();\r\n var lineOrientation = getLineOrientation(this.from, this.to);\r\n if (lineOrientation == orientation.HORIZONTAL || lineOrientation == orientation.VERTICAL) {\r\n if (self.from.x > self.to.x) {\r\n var x = fieldSquares.from.x;\r\n fieldSquares.from.x = fieldSquares.to.x;\r\n fieldSquares.to.x = x;\r\n }\r\n if (self.from.y > self.to.y) {\r\n var y = fieldSquares.from.y;\r\n fieldSquares.from.y = fieldSquares.to.y;\r\n fieldSquares.to.y = y;\r\n }\r\n }\r\n\r\n var f = fieldSquares.from;\r\n var t = fieldSquares.to;\r\n var fieldSquareResizeRatio = 2,\r\n squeezeRatio = 0,\r\n marginFromCenter = 10;\r\n\r\n // var windowWidth = $(window).width(),\r\n // fieldSquareResizeRatio = 0;\r\n // if (windowWidth <= 1024) {\r\n // fieldSquareResizeRatio = 10;\r\n // }\r\n // if (windowWidth <= 768) {\r\n // fieldSquareResizeRatio = 15;\r\n // }\r\n\r\n switch(lineDirection.orientation) {\r\n case \"horizontal\": {\r\n if (lineDirection.newDirection === \"east\") {\r\n squeezeRatio =((t.x + f.width/2) - (f.x + f.width/2)) > 80 ? 15 : 0;\r\n fieldSquares.points.push({x: f.x + f.width/2 + squeezeRatio, y: f.y + fieldSquareResizeRatio - marginFromCenter});\r\n fieldSquares.points.push({x: t.x + f.width/2 - squeezeRatio, y: t.y + fieldSquareResizeRatio - marginFromCenter});\r\n fieldSquares.points.push({x: t.x + f.width/2 - squeezeRatio, y: t.y + t.height - fieldSquareResizeRatio - marginFromCenter});\r\n fieldSquares.points.push({x: f.x + f.width/2 + squeezeRatio, y: f.y + f.height - fieldSquareResizeRatio - marginFromCenter});\r\n } else if (lineDirection.newDirection === \"west\") {\r\n squeezeRatio =((t.x + f.width/2) - (f.x + f.width/2)) > 80 ? 15 : 0;\r\n fieldSquares.points.push({x: f.x + f.width/2 + squeezeRatio, y: f.y + fieldSquareResizeRatio + marginFromCenter});\r\n fieldSquares.points.push({x: t.x + f.width/2 - squeezeRatio, y: t.y + fieldSquareResizeRatio + marginFromCenter});\r\n fieldSquares.points.push({x: t.x + f.width/2 - squeezeRatio, y: t.y + t.height - fieldSquareResizeRatio + marginFromCenter});\r\n fieldSquares.points.push({x: f.x + f.width/2 + squeezeRatio, y: f.y + f.height - fieldSquareResizeRatio + marginFromCenter});\r\n }\r\n break;\r\n }\r\n case \"vertical\": {\r\n if (lineDirection.newDirection === \"south\") {\r\n squeezeRatio =((t.y + t.height/2) - (f.y + t.height/2)) > 80 ? 15 : 0;\r\n fieldSquares.points.push({x: f.x + fieldSquareResizeRatio + marginFromCenter, y: f.y + t.height/2 + squeezeRatio});\r\n fieldSquares.points.push({x: f.x + f.width - fieldSquareResizeRatio + marginFromCenter, y: f.y + t.height/2 + squeezeRatio});\r\n fieldSquares.points.push({x: t.x + t.width - fieldSquareResizeRatio + marginFromCenter, y: t.y + t.height/2 - squeezeRatio});\r\n fieldSquares.points.push({x: t.x + fieldSquareResizeRatio + marginFromCenter, y: t.y + t.height/2 - squeezeRatio });\r\n } else if (lineDirection.newDirection === \"north\") {\r\n squeezeRatio =((t.y + t.height/2) - (f.y + t.height/2)) > 80 ? 15 : 0;\r\n fieldSquares.points.push({x: f.x + fieldSquareResizeRatio - marginFromCenter, y: f.y + t.height/2 + squeezeRatio});\r\n fieldSquares.points.push({x: f.x + f.width - fieldSquareResizeRatio - marginFromCenter, y: f.y + t.height/2 + squeezeRatio});\r\n fieldSquares.points.push({x: t.x + t.width - fieldSquareResizeRatio - marginFromCenter, y: t.y + t.height/2 - squeezeRatio});\r\n fieldSquares.points.push({x: t.x + fieldSquareResizeRatio - marginFromCenter, y: t.y + t.height/2 - squeezeRatio });\r\n }\r\n break;\r\n }\r\n case \"SOUTHWEST\":\r\n case \"NORTHEAST\":\r\n fieldSquares.points.push({x: f.x, y: f.y });\r\n fieldSquares.points.push({x: t.x, y: t.y });\r\n fieldSquares.points.push({x: t.x + t.width, y: t.y + t.height });\r\n fieldSquares.points.push({x: f.x + f.width, y: f.y + f.height });\r\n break;\r\n case \"NORTHWEST\":\r\n case \"SOUTHEAST\":\r\n fieldSquares.points.push({x: f.x + f.width, y: f.y });\r\n fieldSquares.points.push({x: t.x + t.width, y: t.y });\r\n fieldSquares.points.push({x: t.x, y: t.y + t.height });\r\n fieldSquares.points.push({x: f.x, y: f.y + f.height });\r\n break;\r\n }\r\n return fieldSquares;\r\n }\r\n // function getDistance(point1, point2) {\r\n // var scale = workspace.getScale(),\r\n // xDiff = (point2.x - point1.x),\r\n // yDiff = (point2.y - point1.y),\r\n // distance = Math.sqrt(Math.pow(xDiff, 2) + Math.pow(yDiff, 2));\r\n // distance *= (xDiff + yDiff > 0 ? -1 : 1) / scale;\r\n // return distance;\r\n // }\r\n // function isLeft(a, b, c){\r\n // return ((b.x - a.x)*(c.y - a.y) - (b.y - a.y)*(c.x - a.x)) > 0;\r\n // }\r\n // function getDistanceToLine(p1, p2, p3) {\r\n // var scale = workspace.getScale(),\r\n // x0 = p3.x, y0 = p3.y,\r\n // x1 = p1.x, y1 = p1.y,\r\n // x2 = p2.x, y2 = p2.y,\r\n // distanceToLine = Math.abs(\r\n // ((y2 - y1) * x0) - ((x2 - x1) * y0) + (x2 * y1) - (y2 * x1)\r\n // ) / Math.sqrt(\r\n // Math.pow(y2 - y1, 2) + Math.pow(x2 - x1, 2)\r\n // ),\r\n // xDiff = (x2 - x1),\r\n // yDiff = (y2 - y1);\r\n // distanceToLine *= (isLeft(p1, p2, p3) ? -1 : 1) / scale;\r\n // return distanceToLine;\r\n // }\r\n // function getCanvasDimensions() {\r\n // var canvas = workspace.getCanvas(),\r\n // canvasWidth = canvas.width,\r\n // canvasHeight = canvas.height,\r\n // scale = config.scale,\r\n // gridSize = config.workspace.gridSize * scale,\r\n // adjustedSize = (gridSize / 3),\r\n // rulerSize = adjustedSize + 6;\r\n // return {\r\n // rulerSize: rulerSize,\r\n // canvasWidth: canvasWidth,\r\n // canvasHeight: canvasHeight\r\n // }\r\n // }\r\n // function lockPointToCanvas(point) {\r\n // var dim = getCanvasDimensions(),\r\n // pos = self.calculateRenderPosition(point),\r\n // rulerSize = calculatePointPosition({x: dim.rulerSize, y: dim.rulerSize}),\r\n // heightWidth = calculatePointPosition({x: dim.canvasWidth, y: dim.canvasHeight}),\r\n // drop = false;\r\n //\r\n //\r\n // console.log('dim', dim);\r\n // console.log('pos', pos);\r\n // console.log('rulerSize', rulerSize);\r\n // console.log('heightWidth', heightWidth);\r\n //\r\n // if (pos.x < dim.rulerSize) {\r\n // point.x = rulerSize.x + 1;\r\n // drop = true;\r\n // } else if (pos.x >= dim.canvasWidth) {\r\n // point.x = heightWidth.x - 1;\r\n // drop = true;\r\n // }\r\n // if (pos.y < dim.rulerSize) {\r\n // point.y = rulerSize.y + 1;\r\n // drop = true;\r\n // } else if (pos.y >= dim.canvasHeight) {\r\n // point.y = heightWidth.y - 1;\r\n // drop = true;\r\n // }\r\n // if (drop) {\r\n // state.isHovering = false;\r\n // state.mouseDown = false;\r\n // }\r\n // return point;\r\n // }\r\n\r\n function setMouseOverLine(mousePos) {\r\n var field = getLineField();\r\n var vertx = [];\r\n var verty = [];\r\n for(var i = 0; i < field.points.length; i++) {\r\n vertx.push(field.points[i].x);\r\n verty.push(field.points[i].y);\r\n }\r\n state.isHovering = pnpoly(field.points.length, vertx, verty, mousePos.x, mousePos.y);\r\n\r\n return state.isHovering || state.mouseDown;\r\n }\r\n\r\n /*\r\n * This is more accurate hover area used for cabinets\r\n */\r\n this.getMouseOverLineV2 = (mousePos) => {\r\n this.updateLineHovering(mousePos)\r\n return state.isHovering || state.mouseDown;\r\n }\r\n this.updateLineHovering = (mousePos = sqftEventManager.getMousePos()) => {\r\n state.isHovering = isPointInsidePolygon(mousePos, getLineBordersArrayV2(this.from, this.to, design.lineThickness + design.lineThickness * 0.2));\r\n }\r\n this.getLineHovering = () => {\r\n return state.isHovering\r\n }\r\n\r\n function onMouseUp(mousePos, e) {\r\n void mousePos;\r\n void e;\r\n if (state.mouseDown) {\r\n state.mouseDown = false;\r\n state.mouseDownPosition = null;\r\n self.from.snapToGrid();\r\n self.to.snapToGrid();\r\n }\r\n }\r\n const onMouseDown = (mousePos, e) => {\r\n void e;\r\n const reduxState = store.getState();\r\n const activeButton = reduxState.sqftMenuState.activeButton;\r\n\r\n if (( EventManager.getCursor().indexOf(\"n-resize\") >= 0\r\n || EventManager.getCursor().indexOf(\"e-resize\") >= 0\r\n || EventManager.getCursor().indexOf(\"ne-resize\") >= 0\r\n || EventManager.getCursor().indexOf(\"nw-resize\") >= 0\r\n ) && state.isHovering\r\n ){\r\n state.mouseDown = true;\r\n state.movePointDistance = getPointDistance(self.from, self.to);\r\n state.mouseDownPosition = mousePos;\r\n return true;\r\n }\r\n\r\n //Add free seam cut point in the slabMode\r\n if (activeButton === SIDEBAR_SLAB_SEAM_BUTTONS.addFreeSeam && state.isHovering) {\r\n const mousePosOnShape = getMousePositionOnShape(mousePos.x, mousePos.y, this.getParent());\r\n const lineStart = self.from;\r\n const lineEnd = self.to;\r\n const seamCutPoint = getClosestPointOnLine(lineStart, lineEnd, mousePosOnShape);\r\n\r\n const shape = this.getParent();\r\n if (shape.seamCutPoints.length >= 2) {\r\n shape.seamCutPoints.shift(); // Удаляем самую старую точку\r\n }\r\n shape.seamCutPoints.push(seamCutPoint);\r\n\r\n return true;\r\n }\r\n\r\n return false;\r\n }\r\n const onMouseMove = (mousePos, e) => {\r\n void e;\r\n // if (e.terminate && !parent.isHovering()) {\r\n // state.isHovering = false;\r\n // return false;\r\n // }\r\n const isCabinet = isSFTCabinetsGroup();\r\n const isSlabMode = SqftStore.isSlabMode();\r\n const isMouseOverLine = isCabinet || isSlabMode ? this.getMouseOverLineV2(mousePos) : setMouseOverLine(mousePos);\r\n if (isMouseOverLine) {\r\n if (workspace.getAllowEdges() && !self.from.angleIsChanged && !self.to.angleIsChanged) {\r\n if (state.mouseDown) {\r\n this.moveLine(mousePos);\r\n }\r\n EventManager.releaseStealLock(parent);\r\n EventManager.stealCursor();\r\n switch(getLineOrientation(this.from, this.to)) {\r\n case orientation.HORIZONTAL:\r\n EventManager.setCursor(\"n-resize\", self);\r\n break;\r\n case orientation.VERTICAL:\r\n EventManager.setCursor(\"e-resize\", self);\r\n break;\r\n case orientation.NORTHWEST:\r\n case orientation.SOUTHEAST:\r\n EventManager.setCursor(\"ne-resize\", self);\r\n break;\r\n case orientation.NORTHEAST:\r\n case orientation.SOUTHWEST:\r\n EventManager.setCursor(\"nw-resize\", self);\r\n break;\r\n }\r\n return state.mouseDown;\r\n }\r\n\r\n if (config.highlight.lines && state.isHovering) {\r\n EventManager.releaseStealLock(parent);\r\n EventManager.stealCursor();\r\n return false;\r\n }\r\n // prevent all other mouseover's\r\n if (this.getAttachedItems()) {\r\n return true\r\n }\r\n }\r\n\r\n this.lineCorner.updateCornerHoverState(mousePos);\r\n\r\n if (workspace.getHoverShape() !== parent) {\r\n //state.isHovering = false; // allow hovering multiple shapes\r\n }\r\n EventManager.resetCursor(self);\r\n return false;\r\n }\r\n function onMouseLeave() {\r\n state.isHovering = false;\r\n state.mouseDown = false;\r\n }\r\n\r\n //public functions\r\n this.export = () => {\r\n return {\r\n id: this.id,\r\n from: this.from.export(),\r\n to: this.to.export(),\r\n bumpout: this.bumpoutOverlay ? this.bumpoutOverlay.export() : null,\r\n //todo\r\n mitered: this.miteredOverlay ? this.miteredOverlay.export() : null,\r\n underlayment: this.underlaymentOverlay ? this.underlaymentOverlay.export() : null,\r\n waterfallData: this.waterfallOverlay ? this.waterfallOverlay.export() : null,\r\n label: this.labelOverlay ? this.labelOverlay.export() : null,\r\n titleOverlay: this.titleOverlay ? this.titleOverlay.export() : null,\r\n overlay: this.overlay ? this.overlay.export() : null,\r\n lineCorner: this.lineCorner ? this.lineCorner.export() : null,\r\n state: _.clone(state),\r\n }\r\n };\r\n\r\n this.import = (value, existing) => {\r\n state = value.state;\r\n overlayImportData = value.overlay;\r\n lineCornerImportData = value.lineCorner;\r\n var foundFrom = null, foundTo = null;\r\n for (var i = 0; i < existing.length && !(foundFrom && foundTo); i++) {\r\n if (!foundFrom && existing[i].from.id == value.from.id) {\r\n foundFrom = existing[i].from;\r\n } else if (!foundFrom && existing[i].to.id == value.from.id) {\r\n foundFrom = existing[i].to;\r\n } else if (!foundTo && existing[i].to.id == value.to.id) {\r\n foundTo = existing[i].to;\r\n } else if (!foundTo && existing[i].from.id == value.to.id) {\r\n foundTo = existing[i].from;\r\n }\r\n }\r\n self.id = value.id;\r\n if (foundFrom) {\r\n self.from = foundFrom;\r\n } else {\r\n self.from = new point();\r\n self.from.import(value.from);\r\n }\r\n if (foundTo) {\r\n self.to = foundTo;\r\n } else {\r\n self.to = new point();\r\n self.to.import(value.to);\r\n }\r\n if (value.bumpout) {\r\n // self.overlay.setMidpointOffset(value.overlay.midpoint.xOffset, value.overlay.midpoint.yOffset);\r\n self.bumpoutOverlay = new bumpout();\r\n self.bumpoutOverlay.import(self, value.bumpout);\r\n state.withBumpout = true;\r\n }\r\n if (value.mitered) {\r\n //addMiteredToLine\r\n if (workspace.miteredController === null) {\r\n workspace.miteredController = new MiteredController();\r\n }\r\n this.miteredOverlay = workspace.miteredController.createMiteredOverlay(this);\r\n this.miteredOverlay.import(self, value.mitered);\r\n overlayMiteredData = value.mitered;\r\n state.isWithMitered = true;\r\n store.dispatch(addMiteredSection(this.miteredOverlay));\r\n }\r\n if (value.underlayment) {\r\n //addMiteredToLine isWithUnderlayment\r\n if (workspace.underlaymentController === null) {\r\n workspace.underlaymentController = new UnderlaymentController();\r\n }\r\n this.underlaymentOverlay = workspace.underlaymentController.createUnderlaymentOverlay(this);\r\n this.underlaymentOverlay.import(this, value.underlayment);\r\n overlayUnderlaymentData = value.underlayment;\r\n state.isWithUnderlayment = true;\r\n store.dispatch(addResource(RESOURCE_TYPE.underlaymentSections, this.underlaymentOverlay));\r\n }\r\n if (value.label) {\r\n // self.overlay.setMidpointOffset(value.overlay.midpoint.xOffset, value.overlay.midpoint.yOffset);\r\n self.labelOverlay = new label();\r\n self.labelOverlay.init(self, value.label.labelText, value.label.partId);\r\n self.labelOverlay.import(value.label);\r\n }\r\n if (value.titleOverlay) {\r\n // self.overlay.setMidpointOffset(value.overlay.midpoint.xOffset, value.overlay.midpoint.yOffset);\r\n self.titleOverlay = new label();\r\n self.titleOverlay.init(self, value.titleOverlay.state.labelText, value.titleOverlay.state.partId);\r\n self.titleOverlay.import(value.titleOverlay);\r\n }\r\n if (value.waterfallData) {\r\n this.waterfallOverlay = workspaceControllers.waterfall.createWaterfallOverlay(this, value.waterfallData);\r\n }\r\n };\r\n this.init = (parent, temp) => {\r\n temp = temp || false;\r\n setParent(parent);\r\n this.lineCorner = new LineCorner(this);\r\n if (lineCornerImportData) {\r\n this.lineCorner.import(lineCornerImportData);\r\n }\r\n if (!temp) {\r\n this.initEvents();\r\n self.from.init(self);\r\n }\r\n if (!temp && !parent.shapeCabinet && parent.partId !== SHAPE_PART_ID.spacer) {\r\n self.overlay = new lineLength();\r\n self.overlay.init(self);\r\n if (overlayImportData) {\r\n self.overlay.import(overlayImportData);\r\n }\r\n }\r\n if (this.miteredOverlay) {\r\n this.miteredOverlay.init(overlayMiteredData); // init after import\r\n //store.dispatch(addMiteredSection(this.miteredOverlay));\r\n //Menu.miteredController.updateInfo();\r\n //this.miteredOverlay.afterImport(overlayMiteredData);\r\n }\r\n if (this.underlaymentOverlay) {\r\n this.underlaymentOverlay.init(overlayUnderlaymentData);\r\n }\r\n if (this.isWithWaterfallToolEdge()) {\r\n this.overlay.renderWaterfallText(RESOURCE_ATTACHED_TO_NAME.waterfall, RESOURCE_ATTACHED_TO_TYPE.waterfall);\r\n }\r\n\r\n lineDirection = parent.getAngleDirection(self); // {direction:{x: \"forward\", y: \"forward\"},facing:\"sw\"}, cornerMargins, orientation. newDirection\r\n\r\n if (self.historyPointFeatures) {\r\n self.from.angle = self.historyPointFeatures.from.angle;\r\n self.from.arcLength = self.historyPointFeatures.from.arcLength;\r\n self.from.x = self.historyPointFeatures.from.x;\r\n self.from.y = self.historyPointFeatures.from.y;\r\n self.from.pointDirection = self.historyPointFeatures.from.pointDirection;\r\n self.from.corner = self.historyPointFeatures.from.corner;\r\n\r\n self.to.angle = self.historyPointFeatures.to.angle;\r\n self.to.arcLength = self.historyPointFeatures.to.arcLength;\r\n self.to.x = self.historyPointFeatures.to.x;\r\n self.to.y = self.historyPointFeatures.to.y;\r\n self.to.pointDirection = self.historyPointFeatures.to.pointDirection;\r\n self.to.corner = self.historyPointFeatures.to.corner;\r\n\r\n self.historyPointFeatures = null;\r\n }\r\n\r\n // console.log('lineDirection', lineDirection);\r\n };\r\n this.initEvents = () => {\r\n EventManager.addEvent(\r\n EventManager.events.MOUSE_MOVE,\r\n onMouseMove,\r\n this,\r\n EventManager.priorities.SEGMENT\r\n );\r\n EventManager.addEvent(\r\n EventManager.events.MOUSE_DOWN,\r\n onMouseDown,\r\n this,\r\n EventManager.priorities.SEGMENT\r\n );\r\n EventManager.addEvent(\r\n EventManager.events.MOUSE_UP,\r\n onMouseUp,\r\n this,\r\n EventManager.priorities.SEGMENT\r\n );\r\n EventManager.addEvent(\r\n EventManager.events.MOUSE_LEAVE,\r\n onMouseLeave,\r\n this,\r\n EventManager.priorities.OVERALL\r\n );\r\n };\r\n this.deregisterEvents = () => {\r\n EventManager.removeEvent(this);\r\n this.from.deregisterEvents();\r\n this.overlay.deregisterEvents();\r\n if (this.bumpoutOverlay) {\r\n this.bumpoutOverlay.deregisterEvents();\r\n }\r\n if (this.miteredOverlay) {\r\n this.miteredOverlay.deregisterEvents();\r\n }\r\n if (this.titleOverlay) {\r\n this.titleOverlay.deregisterEvents();\r\n }\r\n if (this.overlay) {\r\n this.overlay.deregisterEvents();\r\n }\r\n };\r\n this.reInitEvents = () => {\r\n if (state.isHiddenForever) {\r\n return\r\n }\r\n this.initEvents();\r\n this.from.reInitEvents();\r\n if (!this.miteredOverlay) {\r\n this.overlay.reInitEvents();\r\n }\r\n if (this.bumpoutOverlay) {\r\n this.bumpoutOverlay.deregisterEvents();\r\n }\r\n if (this.miteredOverlay) {\r\n this.miteredOverlay.reInitEvents();\r\n }\r\n if (this.titleOverlay) {\r\n this.titleOverlay.reInitEvents();\r\n }\r\n if (this.overlay) {\r\n this.overlay.reInitEvents();\r\n }\r\n };\r\n this.deregisterPartEvents = () => {\r\n if (this.bumpoutOverlay) {\r\n this.bumpoutOverlay.deregisterEvents();\r\n }\r\n if (this.miteredOverlay) {\r\n this.miteredOverlay.deregisterEvents();\r\n }\r\n if (this.underlaymentOverlay) {\r\n this.underlaymentOverlay.deregisterEvents();\r\n }\r\n if (this.labelOverlay) {\r\n this.labelOverlay.deregisterPartEvents();\r\n }\r\n if (this.titleOverlay) {\r\n this.titleOverlay.deregisterPartEvents();\r\n }\r\n if (this.overlay) {\r\n this.overlay.deregisterEvents();\r\n }\r\n this.from.deregisterPartEvents();\r\n };\r\n this.reInitPartEvents = () => {\r\n if (this.bumpoutOverlay) {\r\n this.bumpoutOverlay.reInitEvents();\r\n }\r\n if (this.miteredOverlay) {\r\n this.miteredOverlay.reInitEvents();\r\n }\r\n if (this.underlaymentOverlay) {\r\n this.underlaymentOverlay.deregisterEvents();\r\n }\r\n if (this.labelOverlay) {\r\n this.labelOverlay.reInitPartEvents();\r\n }\r\n if (this.titleOverlay) {\r\n this.titleOverlay.reInitPartEvents();\r\n }\r\n if (this.overlay && !this.miteredOverlay) {\r\n this.overlay.reInitEvents();\r\n }\r\n this.from.reInitPartEvents();\r\n };\r\n this.reInitTitleEvents = () => {\r\n if (this.titleOverlay) {\r\n this.titleOverlay.reInitPartEvents();\r\n }\r\n };\r\n this.destroy = function(protect) {\r\n if (!protect) {\r\n var image = workspace.getImagesAttachedTo(self);\r\n if (image) {\r\n image.destroy();\r\n }\r\n EventManager.removeEvent(self);\r\n self.from.destroy();\r\n if (self.overlay)\r\n self.overlay.destroy();\r\n if (self.miteredOverlay) {\r\n self.miteredOverlay.destroy();\r\n }\r\n }\r\n };\r\n this.moveLine = (mousePos) => {\r\n\r\n // console.log(\"mousePos\", mousePos);\r\n // console.log(\"self.from.x\", self.from.x);\r\n // console.log(\"self.from.x\", self.to.x);\r\n\r\n var scale = workspace.getScale();\r\n\r\n var xDiff = (state.mouseDownPosition.x - mousePos.x) / scale;\r\n var yDiff = (state.mouseDownPosition.y - mousePos.y) / scale;\r\n // var slope = -getSlope(); // OLD LOGIC, let's keep it in case we found an issue with this moveDiagonalLine(see git diff)\r\n\r\n var o = getLineOrientation(this.from, this.to);\r\n if (o === orientation.VERTICAL) {\r\n self.from.x -= xDiff;\r\n self.to.x -= xDiff;\r\n if (self.isWithBumpout()) {\r\n self.bumpoutOverlay.moveBumpout(xDiff, 0);\r\n } else if (self.isWithMitered()) {\r\n self.miteredOverlay.moveMitered(xDiff, 0);\r\n } else if (this.isWithUnderlayment()) {\r\n this.underlaymentOverlay.moveMitered(xDiff, 0);\r\n }\r\n state.mouseDownPosition.x = mousePos.x;\r\n } else if (o === orientation.HORIZONTAL) {\r\n self.from.y -= yDiff;\r\n self.to.y -= yDiff;\r\n if (self.isWithBumpout()) {\r\n self.bumpoutOverlay.moveBumpout(0, yDiff);\r\n } else if (self.isWithMitered()) {\r\n self.miteredOverlay.moveMitered(0, yDiff);\r\n } else if (this.isWithUnderlayment()) {\r\n this.underlaymentOverlay.moveMitered(0, yDiff);\r\n }\r\n state.mouseDownPosition.y = mousePos.y;\r\n } else {\r\n const nextLine = parent.getNextLine(self);\r\n const prevLine = parent.getPrevLine(self);\r\n moveDiagonalLine(self, nextLine, prevLine, state.movePointDistance, yDiff, o);\r\n state.mouseDownPosition = mousePos;\r\n }\r\n // self.from = lockPointToCanvas(self.from); // removed locking because of this issue http://jira.mozidev.com/browse/QC-802\r\n // self.to = lockPointToCanvas(self.to);\r\n\r\n updateShapeWaterfallLength(this);\r\n updateMiteredLength(this);\r\n updateUnderlaymentLength(this);\r\n\r\n const reduxState = store.getState();\r\n const updateCalculations = reduxState.sqftState.updateCalculations;\r\n store.dispatch(updateSQFTCalculations(updateCalculations + 1));\r\n };\r\n this.getLineDirection = function() {\r\n return parent.getAngleDirection(self); // line text direction\r\n };\r\n this.getLineDirectionV2 = function() {\r\n return getLineDirection(this.from, this.to); // line text direction\r\n };\r\n this.getPairedLines = function() {\r\n let pairedLines = [];\r\n switch (parent.shapeType) {\r\n case \"horseshoe\": {\r\n const prevLine = parent.getPrevLine(self);\r\n const nextLine = parent.getNextLine(self);\r\n const prevLineStep2 = parent.getPrevLine(prevLine);\r\n const nextLineStep2 = parent.getNextLine(nextLine);\r\n const prevLineStep3 = parent.getPrevLine(prevLineStep2);\r\n const nextLineStep3 = parent.getNextLine(nextLineStep2);\r\n\r\n pairedLines = [nextLineStep3, prevLineStep3];\r\n break;\r\n }\r\n default:\r\n pairedLines = [parent.getPrevLine(self), parent.getNextLine(self)];\r\n break;\r\n }\r\n\r\n return pairedLines;\r\n };\r\n this.getLineLength = function () {\r\n let distance = getPointDistance(self.from, self.to);\r\n\r\n return self.addDecimalToLength(measureDistanceToInches(distance))\r\n };\r\n\r\n this.getLineLengthMm = function () {\r\n let distance = getPointDistance(self.from, self.to);\r\n\r\n return measureDistanceToInches(distance).millimeters\r\n };\r\n\r\n this.getLineDistance = function () {\r\n return getPointDistance(self.from, self.to);\r\n };\r\n\r\n this.getLineBumpoutTotalHeight = function () {\r\n return self.addDecimalToLength(self.bumpoutOverlay.getBumpoutTotalHeight())\r\n };\r\n\r\n this.addDecimalToLength = function(lineLength) {\r\n return addDecimalToLength(lineLength);\r\n };\r\n this.getBiggestXPoint = function() {\r\n return self.from.x > self.to.x ? self.from : self.to\r\n };\r\n this.getBiggestYPoint = function() {\r\n return self.from.y > self.to.y ? self.from : self.to\r\n };\r\n this.getSmallestXPoint = function() {\r\n return self.from.x < self.to.x ? self.from : self.to\r\n };\r\n this.getSmallestYPoint = function() {\r\n return self.from.y < self.to.y ? self.from : self.to\r\n };\r\n /**\r\n * @deprecated use getLinePointsWithoutCorners\r\n * @return {[null, null, (\"default\"|*), (\"default\"|*)]}\r\n */\r\n this.getSmallestAndBiggestPointWithCorners = () => {\r\n let o = getLineOrientation(this.from, this.to),\r\n lineDirection = this.getLineDirection(),\r\n //nextLine = parent.getNextLine(self),\r\n prevLine = parent.getPrevLine(self),\r\n toCornerLength = self.to.getArcLength() || self.get45CornerLegDistance(),\r\n fromCornerLength = prevLine.to.getArcLength() || prevLine.get45CornerLegDistance(),\r\n toLinePoint = Object.assign({}, self.to),\r\n fromLinePoint = Object.assign({}, self.from),\r\n biggestLinePoint = null,\r\n smallestLinePoint = null,\r\n toCornerMargin = null,\r\n fromCornerMargin = null;\r\n\r\n if (o === orientation.VERTICAL) {\r\n //line biggest and smallest points\r\n biggestLinePoint = Object.assign({}, this.getBiggestYPoint());\r\n smallestLinePoint = Object.assign({}, this.getSmallestYPoint());\r\n if (lineDirection.newDirection === \"north\" ) {\r\n toCornerMargin = -fromCornerLength;\r\n fromCornerMargin = +toCornerLength;\r\n toLinePoint.y += fromCornerMargin;\r\n fromLinePoint.y += toCornerMargin;\r\n } else {\r\n toCornerMargin = -toCornerLength;\r\n fromCornerMargin = +fromCornerLength;\r\n toLinePoint.y += toCornerMargin;\r\n fromLinePoint.y += fromCornerMargin;\r\n }\r\n biggestLinePoint.y += toCornerMargin;\r\n smallestLinePoint.y += fromCornerMargin;\r\n } else if (o === orientation.HORIZONTAL) {\r\n //line biggest and smallest points\r\n biggestLinePoint = Object.assign({}, this.getBiggestXPoint());\r\n smallestLinePoint = Object.assign({}, this.getSmallestXPoint());\r\n if (lineDirection.newDirection === \"east\" ) {\r\n toCornerMargin = -toCornerLength;\r\n fromCornerMargin = +fromCornerLength;\r\n toLinePoint.x += toCornerMargin;\r\n fromLinePoint.x += fromCornerMargin;\r\n } else {\r\n toCornerMargin = -fromCornerLength;\r\n fromCornerMargin = +toCornerLength;\r\n toLinePoint.x += fromCornerMargin;\r\n fromLinePoint.x += toCornerMargin;\r\n }\r\n biggestLinePoint.x += toCornerMargin;\r\n smallestLinePoint.x += fromCornerMargin;\r\n }\r\n\r\n return [smallestLinePoint, biggestLinePoint, toLinePoint, fromLinePoint]\r\n };\r\n this.getLinePointsWithoutCorners = () => {\r\n let toCornerLength = this.to.getArcLength(),\r\n toAngleLength = this.to.getAngle(),\r\n fromCornerLength = this.from.getArcLength(),\r\n fromAngleLength = this.from.getAngle();\r\n\r\n const toPoint = getPointOnTheLine(this.to, this.from, -toCornerLength || -toAngleLength);\r\n const fromPoint = getPointOnTheLine(this.from, this.to, -fromCornerLength || -fromAngleLength);\r\n\r\n return [fromPoint, toPoint]\r\n }\r\n this.getOffset = function() {\r\n var scale = config.scale;\r\n var workspacePos = workspace.getOffset();\r\n if (parent) {\r\n var _pos = parent.getPosition();\r\n if (config.workspace.snapToGrid) {\r\n _pos = parent.getSnappedPosition();\r\n }\r\n var offset = {\r\n x: workspacePos.x + (_pos.x * scale),\r\n y: workspacePos.y + (_pos.y * scale)\r\n }\r\n } else {\r\n return {x: 0, y: 0};\r\n }\r\n return offset;\r\n };\r\n this.stealCursor = function(who) {\r\n if (self.from === who) {\r\n EventManager.resetCursor(self);\r\n }\r\n };\r\n this.resetState = () => {\r\n state.mouseDown = false;\r\n state.mouseDownPosition = null;\r\n state.isHovering = false;\r\n };\r\n this.hasIntersections = () => {\r\n const lines = parent.getLines();\r\n const fromPosition = getPointField(this.from.x, this.from.y);\r\n const toPosition = getPointField(this.to.x, this.to.y);\r\n\r\n return lines.some(testLine => {\r\n const prevLine = parent.getPrevLine(this);\r\n const nextLine = parent.getNextLine(this);\r\n // skip closest lines\r\n if (testLine.id === this.id || testLine.id === prevLine.id || testLine.id === nextLine.id) {\r\n return false\r\n }\r\n const testLineFromPosition = getPointField(testLine.from.x, testLine.from.y);\r\n const testLineToPosition = getPointField(testLine.to.x, testLine.to.y);\r\n const intersections = getIntersectCordsBetweenLines(\r\n fromPosition, toPosition, testLineFromPosition, testLineToPosition\r\n )\r\n void intersections;\r\n // console.log(\"intersections\", intersections);\r\n // if (intersections) {\r\n // console.log(\"fromPosition\", fromPosition);\r\n // console.log(\"toPosition\", toPosition);\r\n // console.log(\"testLineFromPosition\", testLineFromPosition);\r\n // console.log(\"testLineToPosition\", testLineToPosition);\r\n // }\r\n return intersections\r\n })\r\n }\r\n\r\n /**\r\n * This will render blue shape\r\n * @param ctx\r\n * @param toOnly\r\n * @param sqftMode\r\n */\r\n this.render = (ctx, toOnly, sqftMode) => {\r\n this.renderLineBorder(ctx, toOnly, sqftMode);\r\n }\r\n\r\n /**\r\n * This will render blue shape\r\n * @param ctx\r\n * @param toOnly\r\n * @param sqftMode\r\n */\r\n this.renderLineBorder = (ctx, toOnly, sqftMode) => {\r\n if (workspace && workspace.getState().loading) return;\r\n this.ctx = ctx;\r\n toOnly = toOnly || false;\r\n const renderTo = self.calculateRenderPosition(self.to, sqftMode);\r\n const renderFrom = self.calculateRenderPosition(self.from, sqftMode);\r\n // if (!toOnly) {\r\n // let x = renderFrom.x;\r\n // let y = renderFrom.y;\r\n // if (self.from.arcLength > 0 || self.from.angle > 0) {\r\n // const radius = Math.sqrt(Math.pow(self.from.arcLength || self.from.angle, 2) / 2) * config.scale;\r\n // const o = getLineOrientation(this.from, this.to);\r\n // switch(o) {\r\n // case orientation.HORIZONTAL:\r\n // if (self.from.x < self.to.x)\r\n // x += radius;\r\n // else\r\n // x -= radius;\r\n // break;\r\n // case orientation.VERTICAL:\r\n // if (self.from.y < self.to.y)\r\n // y += radius;\r\n // else\r\n // y -= radius;\r\n // break;\r\n // case orientation.NORTHWEST:\r\n // case orientation.SOUTHEAST:\r\n // case orientation.NORTHEAST:\r\n // case orientation.SOUTHWEST:\r\n // //todo\r\n // break;\r\n // }\r\n // }\r\n // ctx.moveTo(x, y);\r\n // }\r\n\r\n if (state.withBumpout && !SqftStore.isSlabMode() && !this.isDisabledInPopup) {\r\n drawBumpoutLine(ctx);\r\n }\r\n // don't render arc Length and angle in the slab mode\r\n if (self.to.arcLength > 0 && !SqftStore.isSlabMode()) { // changes blue corner if radius or angle exists\r\n this.renderArcLength(ctx, renderFrom, renderTo);\r\n } else if (self.to.angle > 0) {\r\n this.renderAngle(ctx, renderFrom, renderTo);\r\n } else {\r\n ctx.lineTo(renderTo.x, renderTo.y);\r\n }\r\n }\r\n\r\n this.renderArcLength = (ctx, renderFrom, renderTo) => {\r\n let radiusMultiplier = this.to.arcLength;\r\n let radius = radiusMultiplier * config.scale;\r\n let dir = parent.getAngleDirection(this);\r\n\r\n switch (dir.orientation) {\r\n case \"horizontal\":\r\n case \"vertical\":\r\n case \"NORTHWEST\":\r\n case \"NORTHEAST\":\r\n case \"SOUTHWEST\":\r\n case \"SOUTHEAST\":\r\n default: {\r\n const nextLine = parent.getNextLine(this);\r\n const nextLineRenderTo = nextLine.calculateRenderPosition(nextLine.to);\r\n const angle = getAngleBetween3Points(renderFrom, renderTo, nextLineRenderTo);\r\n const radiusMultiplier = this.to.arcLength * config.scale;\r\n const marginFrom = Math.abs(radiusMultiplier / getTanDeg(Math.round(angle / 2)));\r\n const pointA = getPointBetweenPoints(renderTo, renderFrom, marginFrom); // *2 is made to fit arcTo\r\n const pointB = getPointBetweenPoints(renderTo, self.calculateRenderPosition(nextLine.to), radius);\r\n\r\n ctx.lineTo(pointA.x, pointA.y);\r\n //ctx.lineTo(renderFrom.x, renderFrom.y)\r\n ctx.arcTo(renderTo.x, renderTo.y, pointB.x, pointB.y, radius);\r\n break;\r\n }\r\n }\r\n };\r\n this.renderAngle = (ctx, renderFrom, renderTo) => {\r\n let radiusMultiplier = Math.sqrt( Math.pow(this.to.angle, 2) * 2); //todo\r\n let radius = radiusMultiplier * config.scale;\r\n let dir = parent.getAngleDirection(this);\r\n\r\n switch (dir.orientation) {\r\n case \"horizontal\":\r\n case \"vertical\":\r\n case \"NORTHWEST\":\r\n case \"NORTHEAST\":\r\n case \"SOUTHWEST\":\r\n case \"SOUTHEAST\": {\r\n const nextLine = parent.getNextLine(this);\r\n const nextLineRenderTo = this.calculateRenderPosition(nextLine.to);\r\n const pointA = getPointBetweenPoints(renderTo, renderFrom, radius / 2);\r\n const pointB = getPointBetweenPoints(renderTo, nextLineRenderTo, radius / 2);\r\n ctx.lineTo(pointA.x, pointA.y);\r\n ctx.lineTo(pointB.x, pointB.y);\r\n break;\r\n }\r\n default:\r\n break;\r\n }\r\n };\r\n\r\n this.renderLineOverlay = function(ctx) {\r\n lineLength.render(ctx, self);\r\n };\r\n\r\n const highLightBorder = (color) => {\r\n if (!self.from.angleIsChanged && !self.to.angleIsChanged) {\r\n let [fromPointWithIndent, toPointWithIndent] = this.getLinePointsWithoutCorners(),\r\n renderFrom = getPointField(fromPointWithIndent.x, fromPointWithIndent.y, this),\r\n renderTo = getPointField(toPointWithIndent.x, toPointWithIndent.y, this);\r\n //\r\n // let [smallestLinePoint, biggestLinePoint, to, from] = self.getSmallestAndBiggestPointWithCorners(),\r\n // renderFrom1 = self.calculateRenderPosition(from),\r\n // renderTo1 = self.calculateRenderPosition(to);\r\n //\r\n // void smallestLinePoint;\r\n // void biggestLinePoint;\r\n // console.log(\"renderFrom\", renderFrom);\r\n // console.log(\"renderFrom1\", renderFrom1);\r\n //\r\n // console.log(\"renderTo\", renderTo);\r\n // console.log(\"renderTo1\", renderTo1);\r\n //\r\n // debugger // eslint-disable-line no-debugger\r\n self.ctx.beginPath();\r\n self.ctx.moveTo(renderFrom.x, renderFrom.y);\r\n if (state.withBumpout) {\r\n drawBumpoutLine(self.ctx);\r\n }\r\n self.ctx.lineTo(renderTo.x, renderTo.y);\r\n self.ctx.lineWidth = 4;\r\n self.ctx.strokeStyle = color;\r\n self.ctx.stroke();\r\n self.ctx.closePath();\r\n\r\n /*var lineField = getLineField();\r\n var field = lineField.points;\r\n self.from.render(self.ctx);\r\n\r\n self.ctx.save();\r\n self.ctx.beginPath();\r\n self.ctx.moveTo(field[0].x, field[0].y);\r\n for(var i = 1; i < field.length; i++) {\r\n var p = field[i];\r\n var x = p.x, y = p.y;\r\n self.ctx.lineTo(x, y);\r\n }\r\n self.ctx.closePath();\r\n self.ctx.fillStyle = 'rgba(159,197,34,0.47)';\r\n self.ctx.fill();\r\n self.ctx.restore();*/ // this is old hovering, m.b. would be needed for tests\r\n }\r\n }\r\n\r\n function drawBumpoutLine(ctx) {\r\n var bumpoutPoints = self.bumpoutOverlay.getBumpoutPoints(),\r\n point1 = self.calculateRenderPosition(bumpoutPoints.point1),\r\n point2 = self.calculateRenderPosition(bumpoutPoints.point2),\r\n point3 = self.calculateRenderPosition(bumpoutPoints.point3),\r\n point4 = self.calculateRenderPosition(bumpoutPoints.point4);\r\n\r\n ctx.lineTo(point1.x, point1.y);\r\n ctx.lineTo(point2.x, point2.y);\r\n ctx.lineTo(point3.x, point3.y);\r\n ctx.lineTo(point4.x, point4.y);\r\n }\r\n\r\n const drawResizeCursor = () => {\r\n var\r\n renderFrom = self.calculateRenderPosition(self.from),\r\n renderTo = self.calculateRenderPosition(self.to);\r\n var o = getLineOrientation(this.from, this.to);\r\n const size = +self.tutorialImage.dataset.size;\r\n if (o === orientation.VERTICAL) {\r\n self.ctx.drawImage(self.tutorialImage, 0, 0, size, size, renderFrom.x - size/2, renderFrom.y - (renderFrom.y - renderTo.y)/2 - size/2, size, size);\r\n } else if (o === orientation.HORIZONTAL) {\r\n self.ctx.drawImage(self.tutorialImage, 0, 0, size, size, renderFrom.x - (renderFrom.x - renderTo.x)/2 - size/2, renderFrom.y - size/2, size, size);\r\n }\r\n }\r\n\r\n this.setLinePoints = () => {\r\n let renderFrom = self.calculateRenderPosition(self.from),\r\n renderTo = self.calculateRenderPosition(self.to),\r\n marginFrom = 0,\r\n marginTo = 0,\r\n //len = 0,\r\n afterIntersectionMargin = 9;\r\n const prevLine = parent.getPrevLine(self);\r\n const nextLine = parent.getNextLine(self);\r\n lineDirection = parent.getAngleDirection(self);\r\n\r\n if (this.from.arcLength > 0) {\r\n const prevLineRenderFrom = prevLine.calculateRenderPosition(prevLine.from);\r\n const angle = getAngleBetween3Points(prevLineRenderFrom, renderFrom, renderTo);\r\n const radiusMultiplier = self.from.arcLength * config.scale;\r\n marginFrom = Math.abs(radiusMultiplier / getTanDeg(Math.round(angle / 2))) ;\r\n\r\n // console.clear();\r\n // console.log(\"self.from.arcLength\", self.from.arcLength);\r\n // console.log(\"radiusMultiplier\", radiusMultiplier);\r\n // console.log(\"marginFrom\", marginFrom);\r\n // console.log(\"angle\", angle);\r\n // console.log(\"getTanDeg(Math.round(angle / 2))\", getTanDeg(Math.round(angle / 2)));\r\n // console.log(\"marginFrom < radiusMultiplier\", marginFrom < radiusMultiplier);\r\n } else if (this.from.angle > 0) {\r\n marginFrom = self.from.angle * config.scale / 1.48 + design.outlineMargin; // +design.outlineMargin is to prevent overlapping\r\n }\r\n\r\n if (this.to.arcLength > 0) {\r\n const nextLineRenderTo = nextLine.calculateRenderPosition(nextLine.to);\r\n const angle = getAngleBetween3Points(renderFrom, renderTo, nextLineRenderTo);\r\n const radiusMultiplier = this.to.arcLength * config.scale;\r\n marginTo = Math.abs(radiusMultiplier / getTanDeg(Math.round(angle / 2)));\r\n // console.clear();\r\n // console.log(\"self.to.arcLength\", self.to.arcLength);\r\n // console.log(\"radiusMultiplier\", radiusMultiplier);\r\n // console.log(\"marginTo\", marginTo);\r\n // console.log(\"angle\", angle);\r\n // console.log(\"getTanDeg(Math.round(angle / 2))\", getTanDeg(Math.round(angle / 2)));\r\n // console.log(\"marginFrom < radiusMultiplier\", marginTo < radiusMultiplier);\r\n } else if (this.to.angle > 0) {\r\n marginTo = self.to.angle * config.scale / 1.48; // not sure why 1.48\r\n }\r\n\r\n self.drawLineFrom = self.drawLineFrom || null;\r\n self.drawLineTo = self.drawLineTo || null;\r\n if (state.withBumpout) {\r\n var bumpoutPoints = self.bumpoutOverlay.getBumpoutPoints(),\r\n point1 = self.calculateRenderPosition(bumpoutPoints.point1),\r\n point2 = self.calculateRenderPosition(bumpoutPoints.point2),\r\n point3 = self.calculateRenderPosition(bumpoutPoints.point3),\r\n point4 = self.calculateRenderPosition(bumpoutPoints.point4);\r\n\r\n self.drawLineBumpoutPoints = self.drawLineBumpoutPoints || null;\r\n }\r\n\r\n //let prevParallelLine, nextParallelLine, rotateAnglePart, rotatedAngleValue;\r\n\r\n\r\n if (lineDirection.orientation !== \"horizontal\" && lineDirection.orientation !== \"vertical\") {\r\n //nextLineDirection = parent.getAngleDirection(nextLine);\r\n //prevLineDirection = parent.getAngleDirection(prevLine);\r\n // prevParallelLine = parent.getPrevLine(prevLine);\r\n // nextParallelLine = parent.getNextLine(nextLine);\r\n // rotateAnglePart = self.from.rotateAnglePart;\r\n // rotatedAngleValue = self.from.rotateAnglePart ? self.from.rotateAnglePart.rotatedAngleValue : 0;\r\n }\r\n\r\n switch (lineDirection.orientation) {\r\n case \"horizontal\":\r\n if (lineDirection.newDirection === 'east') {\r\n marginFrom = (prevLine.getLineDirection().newDirection === 'south') ? marginFrom + 18 : marginFrom;\r\n marginTo = (nextLine.getLineDirection().newDirection === 'north') ? marginTo + 18 : marginTo;\r\n self.drawLineFrom = {x: renderFrom.x + marginFrom, y: renderFrom.y - 9};\r\n self.drawLineTo = {x: renderTo.x - marginTo, y: renderTo.y - 9};\r\n if (state.withBumpout) {\r\n self.drawLineBumpoutPoints = this.bumpoutOverlay.bumpoutInOrOut() === 'out' ?\r\n {\r\n point1: {x: point1.x - 9, y: renderTo.y - 9},\r\n point2: {x: point2.x - 9, y: point2.y - 9},\r\n point3: {x: point3.x + 9, y: point3.y - 9},\r\n point4: {x: point4.x + 9, y: point4.y - 9},\r\n } : {\r\n point1: {x: point1.x + 9, y: renderTo.y - 9},\r\n point2: {x: point2.x + 9, y: point2.y - 9},\r\n point3: {x: point3.x - 9, y: point3.y - 9},\r\n point4: {x: point4.x - 9, y: point4.y - 9},\r\n }\r\n }\r\n setPointsOutlineIntersection(prevLine, nextLine);\r\n self.drawLineFrom = {x: self.drawLineFrom.x + afterIntersectionMargin, y: self.drawLineFrom.y};\r\n self.drawLineTo = {x: self.drawLineTo.x - afterIntersectionMargin, y: self.drawLineTo.y};\r\n } else if (lineDirection.newDirection === \"west\") {\r\n marginFrom = (prevLine.getLineDirection().newDirection === 'north') ? marginFrom + 18 : marginFrom;\r\n marginTo = (nextLine.getLineDirection().newDirection === 'south') ? marginTo + 18 : marginTo;\r\n self.drawLineFrom = {x: renderFrom.x - marginFrom, y: renderFrom.y + 9};\r\n self.drawLineTo = {x: renderTo.x + 1 + marginTo, y: renderTo.y + 9};\r\n\r\n if (state.withBumpout) {\r\n self.drawLineBumpoutPoints = this.bumpoutOverlay.bumpoutInOrOut() === 'out' ?\r\n {\r\n point1: {x: point1.x + 9, y: renderTo.y + 9},\r\n point2: {x: point2.x + 9, y: point2.y + 9},\r\n point3: {x: point3.x - 9, y: point3.y + 9},\r\n point4: {x: point4.x - 9, y: point4.y + 9},\r\n } : {\r\n point1: {x: point1.x - 9, y: renderTo.y + 9},\r\n point2: {x: point2.x - 9, y: point2.y + 9},\r\n point3: {x: point3.x + 9, y: point3.y + 9},\r\n point4: {x: point4.x + 9, y: point4.y + 9},\r\n }\r\n }\r\n setPointsOutlineIntersection(prevLine, nextLine);\r\n self.drawLineFrom = {x: self.drawLineFrom.x - afterIntersectionMargin, y: self.drawLineFrom.y};\r\n self.drawLineTo = {x: self.drawLineTo.x + afterIntersectionMargin, y: self.drawLineTo.y};\r\n }\r\n break;\r\n case \"vertical\":\r\n if (lineDirection.newDirection === 'south') {\r\n marginFrom = (prevLine.getLineDirection().newDirection === 'west') ? marginFrom + 18 : marginFrom;\r\n marginTo = (nextLine.getLineDirection().newDirection === 'east') ? marginTo + 18 : marginTo;\r\n self.drawLineFrom = {x: renderFrom.x + 9, y: renderFrom.y + marginFrom};\r\n self.drawLineTo = {x: renderTo.x + 9, y: renderTo.y - marginTo};\r\n if (state.withBumpout) {\r\n self.drawLineBumpoutPoints = this.bumpoutOverlay.bumpoutInOrOut() === 'out' ?\r\n {\r\n point1: {x: point1.x + 9, y: point1.y - 9},\r\n point2: {x: point2.x + 9, y: point2.y - 9},\r\n point3: {x: point3.x + 9, y: point3.y + 9},\r\n point4: {x: point4.x + 9, y: point4.y + 9},\r\n } : {\r\n point1: {x: point1.x + 9, y: point1.y + 9},\r\n point2: {x: point2.x + 9, y: point2.y + 9},\r\n point3: {x: point3.x + 9, y: point3.y - 9},\r\n point4: {x: point4.x + 9, y: point4.y - 9},\r\n }\r\n }\r\n setPointsOutlineIntersection(prevLine, nextLine);\r\n self.drawLineFrom = {x: self.drawLineFrom.x, y: self.drawLineFrom.y + afterIntersectionMargin};\r\n self.drawLineTo = {x: self.drawLineTo.x, y: self.drawLineTo.y - afterIntersectionMargin};\r\n } else if (lineDirection.newDirection === 'north') {\r\n marginTo = (nextLine.getLineDirection().newDirection === 'west') ? marginTo + 18 : marginTo;\r\n marginFrom = (prevLine.getLineDirection().newDirection === 'east') ? marginFrom + 18 : marginFrom;\r\n self.drawLineFrom = {x: renderFrom.x - 9, y: renderFrom.y - marginFrom};\r\n self.drawLineTo = {x: renderTo.x - 9, y: renderTo.y + marginTo};\r\n if (state.withBumpout) {\r\n self.drawLineBumpoutPoints = this.bumpoutOverlay.bumpoutInOrOut() === 'out' ?\r\n {\r\n point1: {x: point1.x - 9, y: point1.y + 9},\r\n point2: {x: point2.x - 9, y: point2.y + 9},\r\n point3: {x: point3.x - 9, y: point3.y - 9},\r\n point4: {x: point4.x - 9, y: point4.y - 9},\r\n } : {\r\n point1: {x: point1.x - 9, y: point1.y - 9},\r\n point2: {x: point2.x - 9, y: point2.y - 9},\r\n point3: {x: point3.x - 9, y: point3.y + 9},\r\n point4: {x: point4.x - 9, y: point4.y + 9},\r\n }\r\n }\r\n setPointsOutlineIntersection(prevLine, nextLine);\r\n self.drawLineFrom = {x: self.drawLineFrom.x, y: self.drawLineFrom.y - afterIntersectionMargin};\r\n self.drawLineTo = {x: self.drawLineTo.x, y: self.drawLineTo.y + afterIntersectionMargin};\r\n }\r\n break;\r\n case \"NORTHWEST\":\r\n case \"NORTHEAST\":\r\n case \"SOUTHWEST\":\r\n case \"SOUTHEAST\":\r\n default: {\r\n let distanceFromLine = 9;\r\n if (marginFrom) {\r\n const prevLineFrom = this.calculateRenderPosition(prevLine.from);\r\n if (isInnerCorner(parent, renderFrom, renderTo, prevLineFrom)) {\r\n marginFrom = marginFrom + 8;\r\n }\r\n renderFrom = getPointOnTheLine(renderFrom, renderTo, -marginFrom);\r\n }\r\n if (marginTo) {\r\n const nextLineTo = this.calculateRenderPosition(nextLine.to);\r\n if (isInnerCorner(parent, renderFrom, renderTo, nextLineTo)) {\r\n marginTo = marginTo + 8;\r\n }\r\n renderTo = getPointOnTheLine(renderTo, renderFrom, -marginTo);\r\n }\r\n\r\n [this.drawLineFrom, this.drawLineTo] = getParallelPoints(renderTo, renderFrom, distanceFromLine);\r\n setPointsOutlineIntersection(prevLine, nextLine);\r\n }\r\n break;\r\n// case \"SOUTHEAST\": {\r\n// if (rotateAnglePart && rotateAnglePart.angleDirection === \"right\") {\r\n// if (rotatedAngleValue < 90) {\r\n// self.drawLineFrom = getParralelPoint(renderFrom, self.calculateRenderPosition(nextParallelLine.to));\r\n// self.drawLineTo = getParralelPoint(self.calculateRenderPosition(nextLine.from), self.calculateRenderPosition(nextLine.to));\r\n// } else {\r\n// self.drawLineFrom = getParralelPoint(renderFrom, self.calculateRenderPosition(prevLine.from));\r\n// self.drawLineTo = getParralelPoint(renderTo, self.calculateRenderPosition(nextLine.to));\r\n// }\r\n// } else if (rotateAnglePart && rotateAnglePart.angleDirection === \"left\") {\r\n// self.drawLineFrom = getParralelPoint(renderFrom, self.calculateRenderPosition(prevLine.from));\r\n// self.drawLineTo = getParralelPoint(renderTo, self.calculateRenderPosition(prevParallelLine.from))\r\n// } else {\r\n// [this.drawLineFrom, this.drawLineTo] = getParallelPoints(renderTo, renderFrom, 9);\r\n//\r\n// RenderFigures.renderCircle(this.drawLineFrom, 12,1, '#63b141');\r\n// RenderFigures.renderCircle(this.drawLineTo, 10, 1);\r\n//\r\n// debugger // eslint-disable-line no-debugger\r\n//\r\n// // self.drawLineFrom = {x: renderFrom.x + 9, y: renderFrom.y - 9};\r\n// // self.drawLineTo = {x: renderTo.x + 9, y: renderTo.y - 9};\r\n// setPointsOutlineIntersection(prevLine, nextLine);\r\n// }\r\n// if (marginFrom) {\r\n// self.drawLineFrom = getPointBetweenPoints(self.drawLineFrom, self.drawLineTo, marginFrom)\r\n// }\r\n// if (marginTo) {\r\n// self.drawLineTo = getPointBetweenPoints(self.drawLineTo, self.drawLineFrom, marginTo)\r\n// }\r\n// break;\r\n// }\r\n// case \"NORTHEAST\": {\r\n// if (rotateAnglePart && rotateAnglePart.angleDirection === \"right\") {\r\n// self.drawLineFrom = getParralelPoint(renderFrom, self.calculateRenderPosition(nextParallelLine.to));\r\n// self.drawLineTo = getParralelPoint(renderTo, self.calculateRenderPosition(nextLine.to));\r\n// } else if (rotateAnglePart && rotateAnglePart.angleDirection === \"left\") {\r\n// if (rotatedAngleValue < 90) {\r\n// self.drawLineFrom = getParralelPoint(renderFrom, self.calculateRenderPosition(prevLine.from));\r\n// self.drawLineTo = getParralelPoint(renderTo, self.calculateRenderPosition(prevParallelLine.from));\r\n// } else {\r\n// // self.drawLineFrom = getParralelPoint(renderFrom, self.calculateRenderPosition(prevLine.from));\r\n// self.drawLineFrom = getParralelPoint(renderFrom, self.calculateRenderPosition(nextParallelLine.to));\r\n// self.drawLineTo = getParralelPoint(renderTo, self.calculateRenderPosition(nextLine.to));\r\n// }\r\n// } else {\r\n// // self.drawLineFrom = getParralelPoint(renderFrom, self.calculateRenderPosition(nextParallelLine.to));\r\n// // self.drawLineTo = getParralelPoint(renderTo, self.calculateRenderPosition(nextLine.to));\r\n// self.drawLineFrom = {x: renderFrom.x - 9, y: renderFrom.y - 9};\r\n// self.drawLineTo = {x: renderTo.x - 9, y: renderTo.y - 9};\r\n// setPointsOutlineIntersection(prevLine, nextLine);\r\n// }\r\n// if (marginFrom) {\r\n// self.drawLineFrom = getPointBetweenPoints(self.drawLineFrom, self.drawLineTo, marginFrom)\r\n// }\r\n// if (marginTo) {\r\n// self.drawLineTo = getPointBetweenPoints(self.drawLineTo, self.drawLineFrom, marginTo)\r\n// }\r\n// break;\r\n// }\r\n// case \"SOUTHWEST\": {\r\n// if (rotateAnglePart && rotateAnglePart.angleDirection === \"right\") {\r\n// if (rotatedAngleValue < 90 && rotateAnglePart && rotateAnglePart.shapeType !== \"wideangle\") {\r\n// self.drawLineFrom = getParralelPoint(renderFrom, self.calculateRenderPosition(prevLine.from));\r\n// self.drawLineTo = getParralelPoint(renderTo, self.calculateRenderPosition(nextLine.to));\r\n// } else {\r\n// self.drawLineFrom = getParralelPoint(renderFrom, self.calculateRenderPosition(prevLine.from));\r\n// self.drawLineTo = getParralelPoint(renderTo, self.calculateRenderPosition(prevParallelLine.from));\r\n// }\r\n// } else if (rotateAnglePart && rotateAnglePart.angleDirection === \"left\") {\r\n// if (rotatedAngleValue < 90) {\r\n// self.drawLineFrom = getParralelPoint(renderFrom, self.calculateRenderPosition(nextParallelLine.to));\r\n// self.drawLineTo = getParralelPoint(renderTo, self.calculateRenderPosition(nextLine.to));\r\n// } else {\r\n// self.drawLineFrom = getParralelPoint(renderFrom, self.calculateRenderPosition(prevLine.from));\r\n// self.drawLineTo = getParralelPoint(renderTo, self.calculateRenderPosition(prevParallelLine.from));\r\n// }\r\n// } else {\r\n// // self.drawLineFrom = getParralelPoint(renderFrom, self.calculateRenderPosition(nextParallelLine.to));\r\n// // self.drawLineTo = getParralelPoint(renderTo, self.calculateRenderPosition(nextLine.to));\r\n// self.drawLineFrom = {x: renderFrom.x + 9, y: renderFrom.y + 9};\r\n// self.drawLineTo = {x: renderTo.x + 9, y: renderTo.y + 9};\r\n// setPointsOutlineIntersection(prevLine, nextLine);\r\n// }\r\n// if (marginFrom) {\r\n// self.drawLineFrom = getPointBetweenPoints(self.drawLineFrom, self.drawLineTo, marginFrom)\r\n// }\r\n// if (marginTo) {\r\n// self.drawLineTo = getPointBetweenPoints(self.drawLineTo, self.drawLineFrom, marginTo)\r\n// }\r\n// break;\r\n// }\r\n// case \"NORTHWEST\": {\r\n// if (rotateAnglePart && rotateAnglePart.angleDirection === \"right\") {\r\n// self.drawLineFrom = getParralelPoint(renderFrom, self.calculateRenderPosition(prevLine.from));\r\n// self.drawLineTo = getParralelPoint(renderTo, self.calculateRenderPosition(prevParallelLine.from));\r\n// } else if (rotateAnglePart && rotateAnglePart.angleDirection === \"left\") {\r\n// if (rotatedAngleValue < 90) {\r\n// // self.drawLineFrom = getParralelPoint(renderFrom, self.calculateRenderPosition(prevLine.from));\r\n// self.drawLineFrom = getParralelPoint(renderFrom, self.calculateRenderPosition(nextParallelLine.to));\r\n// self.drawLineTo = getParralelPoint(renderTo, self.calculateRenderPosition(nextLine.to));\r\n// } else {\r\n// self.drawLineFrom = getParralelPoint(renderFrom, self.calculateRenderPosition(nextParallelLine.to));\r\n// self.drawLineTo = getParralelPoint(renderTo, self.calculateRenderPosition(nextLine.to));\r\n// }\r\n// } else {\r\n// // self.drawLineFrom = getParralelPoint(renderFrom, self.calculateRenderPosition(prevLine.from));\r\n// // self.drawLineTo = getParralelPoint(renderTo, self.calculateRenderPosition(nextLine.to));\r\n//\r\n// self.drawLineFrom = {x: renderFrom.x - 9, y: renderFrom.y + 9};\r\n// self.drawLineTo = {x: renderTo.x - 9, y: renderTo.y + 9};\r\n// setPointsOutlineIntersection(prevLine, nextLine);\r\n// }\r\n// if (marginFrom) {\r\n// self.drawLineFrom = getPointBetweenPoints(self.drawLineFrom, self.drawLineTo, marginFrom)\r\n// }\r\n// if (marginTo) {\r\n// self.drawLineTo = getPointBetweenPoints(self.drawLineTo, self.drawLineFrom, marginTo)\r\n// }\r\n// break;\r\n// }\r\n //default:\r\n }\r\n };\r\n const setPointsOutlineIntersection = (prevLine, nextLine) => {\r\n const fromBorderIntersectionPoint = getBorderFromIntersection(prevLine);\r\n const fromOutlineIntersectionPoint = getOutlineFromIntersection(prevLine);\r\n if ((fromBorderIntersectionPoint || fromOutlineIntersectionPoint)\r\n && !(this.from.isWithAngle())\r\n && !(this.from.isWithCorner())\r\n ) {\r\n let intersectionPoints = [];\r\n if (fromBorderIntersectionPoint) intersectionPoints.push(fromBorderIntersectionPoint);\r\n if (fromOutlineIntersectionPoint) intersectionPoints.push(fromOutlineIntersectionPoint);\r\n const closestIntersectionPoint = getClosestPoint(self.drawLineTo, intersectionPoints);\r\n\r\n // render dev circles intersection\r\n // if (lineDirection.orientation === \"NORTHWEST\") {\r\n // if (fromBorderIntersectionPoint) RenderFigures.renderCircle(fromBorderIntersectionPoint, 10,1, '#e5bf37')\r\n // if (fromOutlineIntersectionPoint) RenderFigures.renderCircle(fromOutlineIntersectionPoint, 10,1, '#de5f5f')\r\n // RenderFigures.renderCircle(closestIntersectionPoint, 20,1, '#63b141');\r\n // RenderFigures.renderCircle(self.drawLineTo, 25, 1);\r\n // debugger // eslint-disable-line no-debugger\r\n // }\r\n if (closestIntersectionPoint.x && closestIntersectionPoint.y) {\r\n this.drawLineFrom = {x: closestIntersectionPoint.x, y: closestIntersectionPoint.y};\r\n }\r\n }\r\n\r\n const toBorderIntersectionPoint = getBorderToIntersection(nextLine);\r\n const toOutlineIntersectionPoint = getOutlineToIntersection(nextLine);\r\n\r\n if ((toBorderIntersectionPoint || toOutlineIntersectionPoint)\r\n && !(this.to.isWithAngle())\r\n && !(this.to.isWithCorner())\r\n ) {\r\n let intersectionPoints = [];\r\n if (toBorderIntersectionPoint) { intersectionPoints.push(toBorderIntersectionPoint)}\r\n if (toOutlineIntersectionPoint) { intersectionPoints.push(toOutlineIntersectionPoint)}\r\n const closestIntersectionPoint = getClosestPoint(self.drawLineFrom, intersectionPoints);\r\n void RenderFigures.renderCircle;\r\n // if (lineDirection.orientation === \"SOUTHWEST\") {\r\n // if (toBorderIntersectionPoint) RenderFigures.renderCircle(toBorderIntersectionPoint, 10,1, '#e5bf37')\r\n // if (toOutlineIntersectionPoint) RenderFigures.renderCircle(toOutlineIntersectionPoint, 15,1, '#de5f5f')\r\n // RenderFigures.renderCircle(closestIntersectionPoint, 20, 1, '#63b141');\r\n // RenderFigures.renderCircle(self.drawLineFrom, 25);\r\n // debugger // eslint-disable-line no-debugger\r\n // }\r\n if (closestIntersectionPoint.x && closestIntersectionPoint.y) {\r\n this.drawLineTo = {x: closestIntersectionPoint.x, y: closestIntersectionPoint.y};\r\n }\r\n }\r\n\r\n // todo bumpout\r\n // self.drawLineBumpoutPoints = state.withBumpout ?\r\n // {\r\n // point1: {x: point1.x + 9, y: point1.y - 9},\r\n // point2: {x: point2.x + 9, y: point2.y - 9},\r\n // point3: {x: point3.x + 9, y: point3.y + 9},\r\n // point4: {x: point4.x + 9, y: point4.y + 9},\r\n // } : null;\r\n }\r\n // const getOutlineIntersectionPointWithPrevLine = () => {\r\n // const prevLine = parent.getPrevLine(this);\r\n // if (!prevLine.drawLineTo) {\r\n // debugger // eslint-disable-line no-debugger\r\n // prevLine.setLinePoints();\r\n // }\r\n //\r\n // const pointOnTheLine = getPointOnTheLine(this.drawLineTo, this.drawLineFrom, 300);\r\n // const pointOnThePrevLine = getPointOnTheLine(prevLine.drawLineFrom, prevLine.drawLineTo, 300);\r\n // console.log(\"this\", this);\r\n // debugger // eslint-disable-line no-debugger\r\n // return getIntersectCords(\r\n // this.drawLineFrom.x,\r\n // this.drawLineFrom.y,\r\n // pointOnTheLine.x,\r\n // pointOnTheLine.y,\r\n // pointOnThePrevLine.x,\r\n // pointOnThePrevLine.y,\r\n // prevLine.drawLineFrom.x,\r\n // prevLine.drawLineFrom.y,\r\n // );\r\n // }\r\n\r\n const getOutlineIntersectionPointWithNextTLine = () => {\r\n const nextLine = parent.getNextLine(this);\r\n nextLine.setLinePoints();\r\n const pointOnTheLine = getPointOnTheLine(this.drawLineTo, this.drawLineFrom, 1000);\r\n const pointOnTheNextLine = getPointOnTheLine(nextLine.drawLineFrom, nextLine.drawLineTo, 1000);\r\n return getIntersectCords(\r\n this.drawLineFrom.x,\r\n this.drawLineFrom.y,\r\n pointOnTheLine.x,\r\n pointOnTheLine.y,\r\n pointOnTheNextLine.x,\r\n pointOnTheNextLine.y,\r\n nextLine.drawLineFrom.x,\r\n nextLine.drawLineFrom.y,\r\n );\r\n }\r\n const getBorderToIntersection = (nextLine) => {\r\n let intersectionCords = false\r\n if (nextLine.drawLineTo) {\r\n const nextLineToPointField = nextLine.to.getPointField(false);\r\n const nextLineFromPointField = nextLine.from.getPointField(false);\r\n const pointOnTheLine = getPointOnTheLine(self.drawLineTo, self.drawLineFrom,25);\r\n const pointOnTheNextLine = getPointOnTheLine(nextLineFromPointField, nextLineToPointField, 25);\r\n\r\n intersectionCords = getIntersectCords(\r\n self.drawLineFrom.x,\r\n self.drawLineFrom.y,\r\n pointOnTheLine.x,\r\n pointOnTheLine.y,\r\n pointOnTheNextLine.x,\r\n pointOnTheNextLine.y,\r\n nextLineToPointField.x,\r\n nextLineToPointField.y,\r\n );\r\n // if (lineDirection.orientation === \"SOUTHWEST\") {\r\n // console.log(\"--------\");\r\n // console.log(\"pointOnTheLine\", pointOnTheLine);\r\n // console.log(\" self.drawLineFrom\", self.drawLineFrom);\r\n // console.log(\" self.drawLineTo\", self.drawLineTo);\r\n // console.log(\"--\");\r\n // console.log(\"pointOnTheNextLine\", pointOnTheNextLine);\r\n // console.log(\"nextLine.drawLineFrom\", nextLineFromPointField);\r\n // console.log(\" nextLine.drawLineTo\", nextLineToPointField);\r\n // console.log(\"intersectionCords\", intersectionCords);\r\n // debugger // eslint-disable-line no-debugger\r\n // }\r\n }\r\n\r\n return intersectionCords\r\n }\r\n\r\n const getBorderFromIntersection = (prevLine) => {\r\n let intersectionCords = false\r\n\r\n if (prevLine.drawLineFrom) {\r\n const prevLineToPointField = prevLine.to.getPointField(false);\r\n const prevLineFromPointField = prevLine.from.getPointField(false);\r\n const pointOnTheLineBeforeFrom = getPointOnTheLine(this.drawLineFrom, this.drawLineTo,25);\r\n const pointOnThePrevLine = getPointOnTheLine(prevLineToPointField, prevLineFromPointField, 25);\r\n intersectionCords = getIntersectCords(\r\n pointOnTheLineBeforeFrom.x,\r\n pointOnTheLineBeforeFrom.y,\r\n this.drawLineTo.x,\r\n this.drawLineTo.y,\r\n prevLineFromPointField.x,\r\n prevLineFromPointField.y,\r\n pointOnThePrevLine.x,\r\n pointOnThePrevLine.y,\r\n );\r\n // if (lineDirection.orientation === \"SOUTHWEST\") {\r\n // console.log(\"--------\");\r\n // console.log(\"pointOnTheLineBeforeFrom\", pointOnTheLineBeforeFrom);\r\n // console.log(\"self.drawLineFrom\", self.drawLineFrom);\r\n // console.log(\"self.drawLineTo\", self.drawLineTo);\r\n // console.log(\"--\");\r\n // console.log(\"pointOnThePrevLine\", pointOnThePrevLine);\r\n // console.log(\"prevLine.drawLineFrom\", prevLine.drawLineFrom);\r\n // console.log(\"prevLine.drawLineTo\", prevLine.drawLineTo);\r\n // console.log(\"intersectionCords\", intersectionCords);\r\n // debugger // eslint-disable-line no-debugger\r\n // }\r\n }\r\n\r\n return intersectionCords\r\n }\r\n\r\n function getOutlineFromIntersection (prevLine) {\r\n let intersectionCords = false\r\n\r\n if (prevLine.drawLineFrom) {\r\n const pointOnTheLineBeforeFrom = getPointOnTheLine(self.drawLineFrom, self.drawLineTo,15);\r\n const pointOnThePrevLine = getPointOnTheLine(prevLine.drawLineTo, prevLine.drawLineFrom, 15);\r\n intersectionCords = getIntersectCords(\r\n pointOnTheLineBeforeFrom.x,\r\n pointOnTheLineBeforeFrom.y,\r\n self.drawLineTo.x,\r\n self.drawLineTo.y,\r\n prevLine.drawLineFrom.x,\r\n prevLine.drawLineFrom.y,\r\n pointOnThePrevLine.x,\r\n pointOnThePrevLine.y,\r\n );\r\n // if (lineDirection.orientation === \"SOUTHWEST\") {\r\n // console.log(\"--------\");\r\n // console.log(\"pointOnTheLineBeforeFrom\", pointOnTheLineBeforeFrom);\r\n // console.log(\"self.drawLineFrom\", self.drawLineFrom);\r\n // console.log(\"self.drawLineTo\", self.drawLineTo);\r\n // console.log(\"--\");\r\n // console.log(\"pointOnThePrevLine\", pointOnThePrevLine);\r\n // console.log(\"prevLine.drawLineFrom\", prevLine.drawLineFrom);\r\n // console.log(\"prevLine.drawLineTo\", prevLine.drawLineTo);\r\n // console.log(\"intersectionCords\", intersectionCords);\r\n // debugger // eslint-disable-line no-debugger\r\n // }\r\n }\r\n return intersectionCords\r\n }\r\n\r\n function getOutlineToIntersection (nextLine) {\r\n let intersectionCords = false\r\n if (nextLine.drawLineTo) {\r\n const pointOnTheLine = getPointOnTheLine(self.drawLineTo, self.drawLineFrom,12);\r\n const pointOnTheNextLine = getPointOnTheLine(nextLine.drawLineFrom, nextLine.drawLineTo, 12);\r\n intersectionCords = getIntersectCords(\r\n self.drawLineFrom.x,\r\n self.drawLineFrom.y,\r\n pointOnTheLine.x,\r\n pointOnTheLine.y,\r\n pointOnTheNextLine.x,\r\n pointOnTheNextLine.y,\r\n nextLine.drawLineTo.x,\r\n nextLine.drawLineTo.y,\r\n );\r\n\r\n // if (lineDirection.orientation === \"SOUTHWEST\") {\r\n // console.log(\"--------\");\r\n // console.log(\"pointOnTheLine\", pointOnTheLine);\r\n // console.log(\" self.drawLineFrom\", self.drawLineFrom);\r\n // console.log(\" self.drawLineTo\", self.drawLineTo);\r\n // console.log(\"--\");\r\n // console.log(\"pointOnTheNextLine\", pointOnTheNextLine);\r\n // console.log(\"nextLine.drawLineFrom\", nextLine.drawLineFrom);\r\n // console.log(\"nextLine.drawLineTo\", nextLine.drawLineTo);\r\n // console.log(\"intersectionCords\", intersectionCords);\r\n // debugger // eslint-disable-line no-debugger\r\n // }\r\n }\r\n return intersectionCords\r\n }\r\n\r\n /**\r\n * Draw grey outline\r\n */\r\n const drawLine = (color, border) => {\r\n void border;\r\n self.setLinePoints();// dev remove to hide gray outline border\r\n self.ctx.beginPath();\r\n if (self.drawLineFrom && self.drawLineTo) {\r\n if (state.withBumpout) {\r\n self.ctx.moveTo(self.drawLineFrom.x, self.drawLineFrom.y);\r\n self.ctx.lineTo(self.drawLineBumpoutPoints.point1.x, self.drawLineBumpoutPoints.point1.y);\r\n\r\n self.ctx.moveTo(self.drawLineBumpoutPoints.point1.x, self.drawLineBumpoutPoints.point1.y);\r\n self.ctx.lineTo(self.drawLineBumpoutPoints.point2.x, self.drawLineBumpoutPoints.point2.y);\r\n\r\n self.ctx.moveTo(self.drawLineBumpoutPoints.point2.x, self.drawLineBumpoutPoints.point2.y);\r\n self.ctx.lineTo(self.drawLineBumpoutPoints.point3.x, self.drawLineBumpoutPoints.point3.y);\r\n\r\n self.ctx.moveTo(self.drawLineBumpoutPoints.point3.x, self.drawLineBumpoutPoints.point3.y);\r\n self.ctx.lineTo(self.drawLineBumpoutPoints.point4.x, self.drawLineBumpoutPoints.point4.y);\r\n\r\n self.ctx.lineTo(self.drawLineBumpoutPoints.point4.x, self.drawLineBumpoutPoints.point4.y);\r\n self.ctx.lineTo(self.drawLineTo.x, self.drawLineTo.y);\r\n } else {\r\n self.ctx.moveTo(self.drawLineFrom.x, self.drawLineFrom.y);\r\n self.ctx.lineTo(self.drawLineTo.x, self.drawLineTo.y);\r\n }\r\n }\r\n self.ctx.lineWidth = 8;\r\n self.ctx.strokeStyle = color;\r\n self.ctx.stroke();\r\n self.ctx.closePath();\r\n }\r\n\r\n const drawCorner = (color) => {\r\n self.ctx.beginPath();\r\n self.ctx.lineWidth = 8;\r\n self.ctx.strokeStyle = color;\r\n\r\n let\r\n renderTo = self.calculateRenderPosition(self.to),\r\n renderFrom = self.calculateRenderPosition(self.from),\r\n //radius = Math.sqrt(Math.pow(self.to.arcLength, 2) / 2) * config.scale + 18,\r\n radius = self.to.arcLength * config.scale,\r\n nextLine = parent.getNextLine(self);\r\n\r\n lineDirection = parent.getAngleDirection(self);\r\n // var midHyp = getMidPoint(ap.line1, ap.line2);\r\n if (lineDirection.orientation !== \"horizontal\" && lineDirection.orientation !== \"vertical\") {\r\n //prevLine = parent.getPrevLine(self);\r\n //nextLine = parent.getNextLine(self);\r\n //prevParallelLine = parent.getPrevLine(prevLine);\r\n }\r\n\r\n switch (lineDirection.orientation) {\r\n case \"horizontal\":\r\n case \"vertical\":\r\n case \"NORTHWEST\":\r\n case \"NORTHEAST\":\r\n case \"SOUTHWEST\":\r\n case \"SOUTHEAST\": {\r\n const interSectionPoint = getOutlineIntersectionPointWithNextTLine();\r\n //v1\r\n const nextLineTo = this.calculateRenderPosition(nextLine.to);\r\n if (isInnerCorner(parent, renderFrom, renderTo, nextLineTo)) {\r\n radius = radius - 18\r\n if (radius < -8) { // set minimum radius to display\r\n radius = -8\r\n }\r\n }\r\n this.ctx.moveTo(this.drawLineTo.x, this.drawLineTo.y);\r\n this.ctx.arcTo(interSectionPoint.x, interSectionPoint.y, nextLine.drawLineFrom.x, nextLine.drawLineFrom.y, radius + 9);\r\n\r\n this.ctx.moveTo(nextLine.drawLineFrom.x, nextLine.drawLineFrom.y);\r\n this.ctx.arcTo(interSectionPoint.x, interSectionPoint.y, this.drawLineTo.x, this.drawLineTo.y, radius + 9);\r\n //v2\r\n // this.ctx.moveTo(this.drawLineFrom.x, this.drawLineFrom.y);\r\n // this.ctx.arcTo(interSectionPoint.x, interSectionPoint.y, nextLine.drawLineFrom.x, nextLine.drawLineFrom.y, radius + 9);\r\n // this.ctx.stroke();\r\n // this.ctx.closePath();\r\n //\r\n // this.ctx.beginPath();\r\n // this.ctx.strokeStyle = design.aroundLineColor;\r\n // this.ctx.moveTo(this.drawLineFrom.x, this.drawLineFrom.y);\r\n // this.ctx.lineTo(this.drawLineTo.x, this.drawLineTo.y);\r\n\r\n //v3\r\n //this.ctx.moveTo(this.drawLineTo.x, this.drawLineTo.y);\r\n //this.ctx.quadraticCurveTo(renderTo.x, renderTo.y, nextLine.drawLineFrom.x, nextLine.drawLineFrom.y);\r\n break;\r\n }\r\n default:\r\n break;\r\n }\r\n\r\n self.ctx.stroke();\r\n self.ctx.closePath();\r\n }\r\n\r\n const drawAngle = (color) => {\r\n let strokeStyle;\r\n\r\n this.ctx.beginPath();\r\n this.ctx.lineWidth = 8;\r\n\r\n this.ctx.strokeStyle = design.aroundLineColor;\r\n this.ctx.lineCap = 'square';\r\n //this.ctx.lineCap = 'round';\r\n\r\n if (this.lineCorner.state.isHovering && EventManager.getCursor().indexOf(\"delete\") >= 0\r\n && (this.lineCorner.state.withEdge || this.lineCorner.state.withBacksplash || this.lineCorner.state.withWall || (this.lineCorner.state.attachedItems && this.lineCorner.state.attachedItems.isWithEndCap))) {\r\n strokeStyle = 'rgba(208,1,27,0.5)';\r\n } else if (this.lineCorner.state.withEdge) {\r\n strokeStyle = Color.getOutlineStrokeStyle('edge');\r\n } else if (this.lineCorner.state.withBacksplash) {\r\n strokeStyle = Color.getOutlineStrokeStyle('backsplash');\r\n } else if (this.lineCorner.state.attachedItems && this.lineCorner.state.attachedItems.isWithEndCap) {\r\n strokeStyle = Color.getOutlineStrokeStyle(RESOURCE_ATTACHED_TO_TYPE.end_cap);\r\n } else if (this.lineCorner.state.withWall) {\r\n strokeStyle = Color.getOutlineStrokeStyle('wall');\r\n } else if (config.highlight.lines && this.lineCorner.state.isHovering) {\r\n strokeStyle = Color.getOutlineHoverStrokeStyle();\r\n this.ctx.strokeStyle = strokeStyle;\r\n } else if (config.highlight.lines && config.highlight.demoShow && (config.highlight.id !== state.withId)) {\r\n strokeStyle = Color.getOutlineHoverStrokeStyle();\r\n }\r\n\r\n let angleLinePoints = this.lineCorner.getAnglePoints();\r\n\r\n this.ctx.strokeStyle = strokeStyle ? strokeStyle : color;\r\n this.ctx.moveTo(angleLinePoints.cord1.x, angleLinePoints.cord1.y);\r\n this.ctx.lineTo(angleLinePoints.cord2.x, angleLinePoints.cord2.y);\r\n this.ctx.lineTo(angleLinePoints.cord3.x, angleLinePoints.cord3.y);\r\n this.ctx.lineTo(angleLinePoints.cord4.x, angleLinePoints.cord4.y);\r\n\r\n this.ctx.moveTo(angleLinePoints.cord4.x, angleLinePoints.cord4.y);\r\n\r\n //this.ctx.moveTo(angleLinePoints.cord2.x, angleLinePoints.cord2.y);\r\n //this.ctx.lineTo(angleLinePoints.cord3.x, angleLinePoints.cord3.y);\r\n this.ctx.stroke();\r\n this.ctx.closePath();\r\n\r\n //purple line v2\r\n // this.ctx.beginPath();\r\n // this.ctx.strokeStyle = strokeStyle ? strokeStyle : color;\r\n // this.ctx.moveTo(angleLinePoints.cordCornerFrom.x, angleLinePoints.cordCornerFrom.y);\r\n // this.ctx.lineTo(angleLinePoints.cordCornerTo.x, angleLinePoints.cordCornerTo.y);\r\n\r\n //purple line v3\r\n // this.ctx.beginPath();\r\n // this.ctx.strokeStyle = color;\r\n // this.ctx.moveTo(angleLinePoints.cordCornerFrom.x, angleLinePoints.cordCornerFrom.y);\r\n // this.ctx.lineTo(angleLinePoints.cordCornerTo.x, angleLinePoints.cordCornerTo.y);\r\n\r\n this.ctx.stroke();\r\n this.ctx.closePath();\r\n }\r\n\r\n this.get45CornerLegDistanceScaled = () => {\r\n return get45CornerLegDistanceByHypotenuse(this.to.angle || this.to.arcLength) * config.scale\r\n };\r\n\r\n this.get45CornerLegDistance = () => {\r\n return get45CornerLegDistanceByHypotenuse(this.to.angle || this.to.arcLength)\r\n };\r\n\r\n this.deleteBumpout = () => {\r\n state.withBumpout = false;\r\n this.bumpoutOverlay.destroy();\r\n this.overlay.setMidpointOffset(0, 0);\r\n let bumpoutPoints = this.bumpoutOverlay.getBumpoutPoints();\r\n for (const pointName in bumpoutPoints) {\r\n if (bumpoutPoints.hasOwnProperty(pointName)) {\r\n bumpoutPoints[pointName].destroy();\r\n }\r\n }\r\n this.bumpoutOverlay = null;\r\n };\r\n\r\n this.deleteMitered = () => {\r\n state.isWithMitered = false;\r\n this.miteredOverlay.destroy();\r\n this.miteredOverlay = null;\r\n this.overlay.setMidpointOffset(0, 0);\r\n this.createLineLength();\r\n };\r\n\r\n this.deleteUnderlayment = () => {\r\n state.isWithUnderlayment = false;\r\n this.underlaymentOverlay.destroy();\r\n this.underlaymentOverlay = null;\r\n this.overlay.setMidpointOffset(0, 0);\r\n this.createLineLength();\r\n };\r\n\r\n this.deleteWaterfallTool = () => {\r\n this.waterfallOverlay.destroy();\r\n workspaceControllers.waterfall.destroy(this.waterfallOverlay);\r\n this.waterfallOverlay = null;\r\n };\r\n\r\n this.createLineLength = () => {\r\n this.overlay = new lineLength();\r\n this.overlay.init(self);\r\n };\r\n\r\n this.deleteAttachedItem = () => {\r\n state.withEdge = false;\r\n state.isWithWaterfallEdge = false;\r\n state.isWithPeninsulaUnderwrapEdge = false;\r\n state.withBacksplash = false;\r\n state.withWall = false;\r\n state.withBumpout = false;\r\n state.withId = null;\r\n for (const attachedItemsKey in state.attachedItems) {\r\n state.attachedItems[attachedItemsKey] = false\r\n }\r\n this.attachedShape = null;\r\n if (this.overlay) {\r\n this.overlay.removeLineText();\r\n }\r\n\r\n if (this.bumpoutOverlay) {\r\n this.deleteBumpout();\r\n }\r\n if (this.labelOverlay) {\r\n this.labelOverlay.destroy();\r\n }\r\n if (this.titleOverlay) {\r\n this.titleOverlay.destroy();\r\n }\r\n if (this.miteredOverlay) {\r\n this.deleteMitered();\r\n }\r\n if (this.underlaymentOverlay) {\r\n this.deleteUnderlayment();\r\n }\r\n if (this.waterfallOverlay) {\r\n this.deleteWaterfallTool();\r\n }\r\n sqftSlabManager.deleteSlabBacksplashByLine(this);\r\n store.dispatch(deleteResourceAttachedTo(RESOURCE_TYPE.attachedToLine, this));\r\n };\r\n\r\n this.addEdgeToLine = function(edgeName, id) {\r\n state.withEdge = true;\r\n state.withBacksplash = false;\r\n state.withWall = false;\r\n state.isWithWaterfallEdge = false;\r\n state.isWithPeninsulaUnderwrapEdge = false;\r\n state.withId = id;\r\n for (const attachedItemKey in state.attachedItems) {\r\n state.attachedItems[attachedItemKey] = false\r\n }\r\n self.overlay.renderEdgeText(edgeName);\r\n };\r\n\r\n this.addBacksplashToLine = (backsplashName, type, featureId, backsplashHeight) => {\r\n if (type === \"wall\") {\r\n state.withWall = true;\r\n state.withBacksplash = false;\r\n } else {\r\n state.withBacksplash = true;\r\n state.withWall = false;\r\n }\r\n state.withEdge = false;\r\n state.backsplashName = backsplashName;\r\n state.backsplashType = type;\r\n state.isWithWaterfallEdge = false;\r\n state.isWithPeninsulaUnderwrapEdge = false;\r\n state.withId = featureId;\r\n this.setBacksplashHeight(backsplashHeight);\r\n for (const attachedItemKey in state.attachedItems) {\r\n state.attachedItems[attachedItemKey] = false\r\n }\r\n self.overlay.renderBacksplashText(backsplashName, type);\r\n };\r\n\r\n this.addCrownMoldingToLine = (crownMoldingName, type, id) => {\r\n state.withBacksplash = false;\r\n state.withWall = false;\r\n state.withEdge = false;\r\n state.isWithWaterfallEdge = false;\r\n state.isWithPeninsulaUnderwrapEdge = false;\r\n state.attachedItems.isWithCrownMolding = true;\r\n state.withId = id;\r\n //this.overlay.renderBacksplashText(crownMoldingName, type);\r\n };\r\n\r\n this.addEndCapToLine = (endCapName, type, id) => {\r\n state.withBacksplash = false;\r\n state.withWall = false;\r\n state.withEdge = false;\r\n state.isWithWaterfallEdge = false;\r\n state.isWithPeninsulaUnderwrapEdge = false;\r\n state.attachedItems.isWithEndCap = true;\r\n state.attachedItems.isWithCrownMolding = false;\r\n state.withId = id;\r\n //this.overlay.renderBacksplashText(crownMoldingName, type);\r\n };\r\n\r\n this.addBumpoutToLine = function(mousePos, pointName, id) {\r\n void mousePos;\r\n void pointName;\r\n void id;\r\n //todo allow add multiple bumpout\r\n if (!state.withBumpout) {\r\n //todo fix rotation\r\n if (self.getOrientation() === orientation.VERTICAL || self.getOrientation() === orientation.HORIZONTAL) {\r\n state.withBumpout = true;\r\n self.bumpoutOverlay = new bumpout();\r\n self.bumpoutOverlay.init(self);\r\n }\r\n }\r\n };\r\n\r\n this.addMiteredToLine = () => {\r\n for (const attachedItemKey in state.attachedItems) {\r\n state.attachedItems[attachedItemKey] = false\r\n }\r\n if (!state.isWithMitered) {\r\n this.deleteAttachedItem();\r\n state.isWithMitered = true;\r\n if (workspace.miteredController === null) {\r\n workspace.miteredController = new MiteredController();\r\n }\r\n this.miteredOverlay = workspace.miteredController.createMiteredOverlay(this);\r\n this.miteredOverlay.init();\r\n\r\n return this.miteredOverlay;\r\n }\r\n\r\n return this.miteredOverlay\r\n };\r\n\r\n this.addUnderlaymentToLine = () => {\r\n for (const attachedItemKey in state.attachedItems) {\r\n state.attachedItems[attachedItemKey] = false\r\n }\r\n if (!state.isWithUnderlayment) {\r\n //todo fix rotation\r\n this.deleteAttachedItem();\r\n if (this.getOrientation() === orientation.VERTICAL || this.getOrientation() === orientation.HORIZONTAL) {\r\n state.isWithUnderlayment = true;\r\n if (workspace.underlaymentController === null) {\r\n workspace.underlaymentController = new UnderlaymentController();\r\n }\r\n this.underlaymentOverlay = workspace.underlaymentController.createUnderlaymentOverlay(this);\r\n this.underlaymentOverlay.init();\r\n\r\n return this.underlaymentOverlay;\r\n }\r\n }\r\n\r\n return this.underlaymentOverlay\r\n };\r\n\r\n this.addWaterfallToLine = (name = RESOURCE_ATTACHED_TO_NAME.waterfall) => {\r\n for (const attachedItemKey in state.attachedItems) {\r\n state.attachedItems[attachedItemKey] = false\r\n }\r\n if (!this.isWithWaterfallToolEdge()) {\r\n this.deleteAttachedItem();\r\n if (this.getOrientation() === orientation.VERTICAL || this.getOrientation() === orientation.HORIZONTAL) {\r\n state.isWithWaterfallEdge = true;\r\n state.isWithPeninsulaUnderwrapEdge = false;\r\n state.withBacksplash = false;\r\n state.withWall = false;\r\n state.withEdge = false;\r\n this.waterfallOverlay = workspaceControllers.waterfall.createWaterfallOverlay(this);\r\n createSlabModeWaterfallShapes();\r\n this.overlay.renderWaterfallText(name, RESOURCE_ATTACHED_TO_TYPE.waterfall);\r\n\r\n return this.waterfallOverlay;\r\n }\r\n }\r\n return this.waterfallOverlay\r\n };\r\n\r\n this.addPeninsulaUnderwrapToLine = () => {\r\n for (const attachedItemKey in state.attachedItems) {\r\n state.attachedItems[attachedItemKey] = false\r\n }\r\n if (!this.isWithPeninsulaUnderwrapEdge()) {\r\n if (this.getOrientation() === orientation.VERTICAL || this.getOrientation() === orientation.HORIZONTAL) {\r\n state.isWithPeninsulaUnderwrapEdge = true;\r\n state.isWithWaterfallEdge = false;\r\n state.withBacksplash = false;\r\n state.withWall = false;\r\n state.withEdge = false;\r\n this.waterfallOverlay = workspaceControllers.waterfall.createPeninsulaUnderwrapOverlay(this);\r\n createSlabModeWaterfallShapes();\r\n\r\n return this.waterfallOverlay;\r\n }\r\n }\r\n return this.waterfallOverlay\r\n };\r\n\r\n this.renderLineField = (ctx) => {\r\n\r\n this.ctx = ctx;\r\n\r\n if (config.highlight.tutorial && self.highLightedByTutorial) {\r\n drawLine('#E3E1E3');\r\n highLightBorder('#b263a8');\r\n if (self.tutorialImage) {\r\n drawResizeCursor();\r\n }\r\n } else if (config.highlight.lines && state.isHovering) {\r\n\r\n switch (config.highlight.type) {\r\n case 'edge':\r\n if (config.highlight.id !== state.withId) {\r\n drawLine(COLOR_THEMES[config.activeTheme].active_transparent);\r\n } else {\r\n drawLine(COLOR_THEMES[config.activeTheme].active);\r\n }\r\n break;\r\n case RESOURCE_ATTACHED_TO_TYPE.backsplash:\r\n case RESOURCE_ATTACHED_TO_TYPE.waterfall:\r\n if (config.highlight.id !== state.withId) {\r\n drawLine(COLOR_THEMES[config.activeTheme].primary_transparent);\r\n } else {\r\n drawLine(COLOR_THEMES[config.activeTheme].primary);\r\n }\r\n break;\r\n case 'wall':\r\n if (config.highlight.id !== state.withId) {\r\n drawLine('rgba(0,0,0,0.5)');\r\n } else {\r\n drawLine(COLOR_THEMES[config.activeTheme].primary);\r\n }\r\n break;\r\n case RESOURCE_ATTACHED_TO_TYPE.end_cap:\r\n if (config.highlight.id !== state.withId) {\r\n drawLine(COLOR.red_transparent);\r\n } else {\r\n drawLine(COLOR.red);\r\n }\r\n break;\r\n default:\r\n drawLine(COLOR_THEMES[config.activeTheme].active_transparent);\r\n break;\r\n }\r\n\r\n } else if (config.highlight.lines && config.highlight.demoShow && (config.highlight.id !== state.withId)) {\r\n switch (config.highlight.type) {\r\n case 'edge':\r\n default:\r\n drawLine(COLOR_THEMES[config.activeTheme].active_transparent);\r\n break;\r\n case RESOURCE_ATTACHED_TO_TYPE.backsplash:\r\n case RESOURCE_ATTACHED_TO_TYPE.end_cap:\r\n case RESOURCE_ATTACHED_TO_TYPE.waterfall:\r\n drawLine(COLOR_THEMES[config.activeTheme].primary_transparent);\r\n break;\r\n case 'wall':\r\n drawLine('rgba(0,0,0,0.5)');\r\n break;\r\n }\r\n } else if (this.blink.isHighlightedLightOn) {\r\n if (state.withEdge || this.isWithPeninsulaUnderwrapEdge()) {\r\n drawLine(COLOR_THEMES[config.activeTheme].active_transparent);\r\n } else if (state.withBacksplash || state.withBumpout || this.isWithWaterfallToolEdge()) {\r\n drawLine(COLOR_THEMES[config.activeTheme].primary_transparent);\r\n } else if (state.withWall) {\r\n drawLine('rgba(0,0,0,0.5)');\r\n } else if (state.attachedItems && state.attachedItems.isWithEndCap) {\r\n drawLine(COLOR.red_transparent);\r\n }\r\n } else {\r\n if (workspace.getAllowEdges() && workspace.getAllowLineHighlight()) {\r\n highLightBorder('#b263a8');\r\n }\r\n\r\n if (config.workspace.debug || state.isHovering && !config.highlight.lines && workspace.getAllowEdges()) {\r\n highLightBorder('#b263a8');\r\n }\r\n\r\n const orientation = this.getLineDirection().orientation;\r\n const isBumpoutHighlighted = workspace.getAllowBumpoutEdges() && workspace.getAllowLineHighlight();\r\n const isMiteredHighlighted = workspace.getAllowMiteredEdges() && workspace.getAllowLineHighlight();\r\n if ((isBumpoutHighlighted || isMiteredHighlighted)\r\n && (orientation === \"vertical\" || orientation === \"horizontal\")\r\n ) {\r\n highLightBorder(COLOR_THEMES[config.activeTheme].primary);\r\n }\r\n\r\n if (config.workspace.debug\r\n || state.isHovering && !config.highlight.lines\r\n && (\r\n (workspace.getAllowBumpoutEdges() || workspace.getAllowMiteredEdges())\r\n && (orientation === \"vertical\" || orientation === \"horizontal\")\r\n )\r\n ) {\r\n highLightBorder(COLOR_THEMES[config.activeTheme].primary);\r\n }\r\n\r\n if (state.isHovering && EventManager.getCursor().indexOf(\"delete\") >= 0\r\n && (state.withEdge\r\n || state.withBacksplash\r\n || (state.attachedItems && state.attachedItems.isWithEndCap)\r\n || state.withWall\r\n || this.isWithPeninsulaUnderwrapEdge()\r\n || this.isWithWaterfallToolEdge())\r\n ) {\r\n drawLine('rgba(208,1,27,0.5)');\r\n } else if (state.withEdge || this.isWithPeninsulaUnderwrapEdge()) {\r\n drawLine(COLOR_THEMES[config.activeTheme].active);\r\n if (self.tutorialImage) {\r\n drawResizeCursor();\r\n }\r\n } else if (state.withBacksplash) {\r\n drawLine(COLOR_THEMES[config.activeTheme].primary);\r\n } else if (this.isWithWaterfallToolEdge()) {\r\n drawLine(COLOR_THEMES[config.activeTheme].primary);\r\n } else if (state.withWall) {\r\n drawLine('#000000');\r\n } else if (state.withBumpout) {\r\n drawLine('#E3E1E3'); //todo enable border\r\n } else if (state.attachedItems && state.attachedItems.isWithEndCap) {\r\n drawLine(COLOR.red);\r\n } else {\r\n drawLine('#E3E1E3');\r\n }\r\n\r\n }\r\n\r\n if (self.to.arcLength > 0) {\r\n if (EventManager.getCursor().indexOf(\"delete\") >= 0 && !state.isHovering && self.to.isOverPointField()) {\r\n drawCorner('rgba(208,1,27,0.5)');\r\n } else {\r\n drawCorner(\"#b263a8\")\r\n }\r\n }\r\n\r\n //todo move this to lineCorner\r\n if (self.to.angle > 0) {\r\n if (EventManager.getCursor().indexOf(\"delete\") >= 0\r\n && !state.isHovering\r\n && (self.to.isOverPointField() || self.lineCorner.state.isCornerLineHovering) // todo perhaps hover over Point should be removed?\r\n ) {\r\n drawAngle('rgba(208,1,27,0.5)');\r\n } else {\r\n drawAngle(\"#b263a8\")\r\n }\r\n }\r\n ctx.restore();\r\n\r\n }\r\n}\r\n","import uuid from \"uuid\";\r\nimport _ from 'lodash';\r\n\r\n//todo sqft-react\r\nimport EventManager from \"./../../store/sqftEventManager\";\r\nimport PointRadius from \"./overlays/pointRadius\";\r\nimport workspace from \"../workspace\";\r\nimport sqftConfig from \"../../store/sqftConfig\";\r\nimport COLOR_THEMES, {COLOR} from \"../../store/colorThemes\";\r\n// import Radius from \"../controls/radius\";\r\nimport FitSize from \"../../../../helpers/sqftFitSize\";\r\nimport SqftStore from \"../../store/sqftStore\";\r\nimport store from \"../../../../../../store\";\r\nimport sqftShape from \"./sqftShape\";\r\nimport line from \"./line\";\r\nimport {\r\n getMidPoint,\r\n getPointOnTheLine,\r\n isDisabledInPopupWithParents\r\n} from \"../../../../helpers/sqftHelper\";\r\nimport config from \"../../store/sqftConfig\";\r\nimport {isDisabledInPopupShouldBeHidden, SIDEBAR_NAVIGATION_BUTTONS} from \"../../../../constants\";\r\nimport MiteredOverlay from \"./overlays/mitered\";\r\nimport {getAngleBetween3Points} from \"../../../../helpers/shapeHelper\";\r\n//import MiteredOverlay from \"../overlays/mitered\";\r\nimport {updateSQFTCalculations} from \"../../../../../../actions/sqftFunctions\";\r\nimport {isSFTCabinetsGroup} from \"../../../../helpers/sqftNavigationHelper\";\r\nimport {renderResetSeamPopup, shouldResetSlabModePopupOnPointMoveBeDisplayed} from \"../../canvasPopup/resetSeam\";\r\nimport sqftShapeManager from \"../../store/sqftShapeManager\";\r\n\r\nexport const allowedNavItemsForMovingPoint = [\r\n SIDEBAR_NAVIGATION_BUTTONS.freeDraw,\r\n SIDEBAR_NAVIGATION_BUTTONS.resize\r\n];\r\n\r\nexport default function (x, y, direction, corner, canBeMoved = true) {\r\n //private variables\r\n let self = this,\r\n parent = null,\r\n state = {\r\n isMovable: false,\r\n mouseDown: false,\r\n mouseDownPosition: {},\r\n selected: false,\r\n isHovering: false,\r\n mousePos: {},\r\n pointWasMoved: false,\r\n canBeMoved,\r\n miteredFeatureId: null,\r\n },\r\n fillStyle = \"#E3E1E3\",\r\n fillStyleEdge = COLOR_THEMES[sqftConfig.activeTheme].active,\r\n fillStyleWhite = \"#FFFFFF\",\r\n fillStyleBlack = \"#4a4a4a\",\r\n fillStyleDelete = \"#e77f8d\", //\"rgba(253,2,33, 0.5)\",\r\n fillStyleBlue = COLOR_THEMES[sqftConfig.activeTheme].primary,\r\n //highlightFillStyle = \"rgba(0,255,0,0.5)\",\r\n //hoverFillStyle = \"#D0011B\",\r\n radiusFillStyle = \"#b263a8\",\r\n translateX,\r\n translateY,\r\n pointRadiusOverlay = null;\r\n //public properties\r\n this.id = uuid();\r\n this.pos = {x, y};\r\n this.posSlab = {\r\n x: x ? JSON.parse(JSON.stringify(x)) : 0,\r\n y: y ? JSON.parse(JSON.stringify(y)) : 0\r\n };\r\n Object.defineProperty(this, \"x\", {\r\n set: (value) => {\r\n setPointWasChangedInRegularMode();\r\n if (SqftStore.isRegularMode() && shouldResetSlabModePopupOnPointMoveBeDisplayed(this.getGrandParent())) {\r\n renderResetSeamPopup(this.getGrandParent())\r\n }\r\n return SqftStore.isSlabMode() ? this.posSlab.x = parseFloat(value) : this.pos.x = parseFloat(value);\r\n },\r\n get: () => {\r\n if (this.pos === undefined) {\r\n console.log(\"point pos not defined\");\r\n return 0;\r\n }\r\n return SqftStore.isSlabMode() ? this.posSlab.x : this.pos.x;\r\n }\r\n });\r\n Object.defineProperty(this, \"y\", {\r\n set: (value) => {\r\n setPointWasChangedInRegularMode();\r\n if (SqftStore.isRegularMode() && shouldResetSlabModePopupOnPointMoveBeDisplayed(this.getGrandParent())) {\r\n renderResetSeamPopup(this.getGrandParent())\r\n }\r\n return SqftStore.isSlabMode() ? this.posSlab.y = value : this.pos.y = value;\r\n },\r\n get: () => {\r\n if (this.pos === undefined) {\r\n console.log(\"point pos not defined\");\r\n return 0;\r\n }\r\n return SqftStore.isSlabMode() ? this.posSlab.y : this.pos.y;\r\n }\r\n });\r\n this.arcLength = 0;\r\n this.angle = 0;\r\n this.featureId = null;\r\n this.pointDirection = direction;\r\n this.corner = corner;\r\n this.renderAngleCircle = false;\r\n this.renderAngleArc = false;\r\n this.angleIsChanged = false;\r\n this.layout = null;\r\n this.rotateAnglePart = null; // link to the whole rotation part\r\n this.exportAndImportProperties = [\r\n \"id\", \"x\", \"y\", \"pos\", \"posSlab\", \"arcLength\", \"angle\", \"pointDirection\", \"corner\", \"rotateAnglePart\", \"angleIsChanged\",\r\n \"renderAngleCircle\", \"renderAngleArc\", \"featureId\"\r\n ];\r\n this.isHidden = () => {\r\n const reduxState = store.getState();\r\n let isShowSlabTool = reduxState.sqftSlabState.isShowSlabTool;\r\n\r\n const shape = this.getGrandParent();\r\n\r\n return !!(\r\n isShowSlabTool\r\n || (shape && shape.shapeCabinet)\r\n || (shape && shape.shapeSpacer)\r\n );\r\n }\r\n this.setPos = (value) => {\r\n this.pos = value\r\n }\r\n this.setPosSlab = (value) => {\r\n this.posSlab = value\r\n }\r\n this.isWithAngle = () => {\r\n return this.angle > 0\r\n }\r\n this.isWithCorner = () => {\r\n return this.arcLength > 0\r\n }\r\n //private functions\r\n // var snappedPos = function(pos) {\r\n // var scaledGridSize = sqftConfig.workspace.getScaledGridSize(),\r\n // newX = Math.round(self.x / scaledGridSize) * scaledGridSize,\r\n // newY = Math.round(self.y / scaledGridSize) * scaledGridSize;\r\n //\r\n // return {\r\n // x: newX,\r\n // y: newY\r\n // };\r\n // };\r\n this.getMiteredFeatureId = () => {\r\n return state.miteredFeatureId\r\n }\r\n this.setMiteredFeatureId = (id) => {\r\n state.miteredFeatureId = id\r\n }\r\n const setPointWasChangedInRegularMode = () => {\r\n const regularMode = SqftStore.isRegularMode();\r\n regularMode ? setPointWasChanged() : null;\r\n }\r\n const setPointWasChanged = () => {\r\n let parent = this.getParent();\r\n if (parent && parent.hasOwnProperty('getParent')) {\r\n let shape = parent.getParent();\r\n if (shape instanceof line) {\r\n shape.getParent().setIsPointsChanged(true);\r\n } else if (shape instanceof sqftShape) {\r\n shape.setIsPointsChanged(true);\r\n }\r\n }\r\n }\r\n const setPointWasMoved = () => {\r\n let parent = this.getParent();\r\n if (parent && parent.hasOwnProperty('getParent')) {\r\n let shape = parent.getParent();\r\n if (shape instanceof line) {\r\n shape.getParent().isPointsMoved = true;\r\n } else if (shape instanceof sqftShape) {\r\n shape.isPointsMoved = true;\r\n }\r\n }\r\n }\r\n const isMovable = () => {\r\n let shape = parent.getParent();\r\n\r\n return (state.isMovable || shape.getState().isPointsMovable);\r\n }\r\n\r\n function setTranslates() {\r\n switch (self.pointDirection) {\r\n case \"lefttop\":\r\n translateX = -10;\r\n translateY = -9;\r\n break;\r\n case \"righttop\":\r\n translateX = 9;\r\n translateY = -9;\r\n break;\r\n case \"rightbottom\":\r\n translateX = 9;\r\n translateY = 10;\r\n break;\r\n case \"leftbottom\":\r\n translateX = -10;\r\n translateY = 10;\r\n break;\r\n default:\r\n translateX = 0;\r\n translateY = 0;\r\n break;\r\n }\r\n }\r\n\r\n const onMouseMove = (mousePos, e) => {\r\n state.mousePos = mousePos;\r\n state.isHovering = this.isOverPointField();\r\n if (e.terminate) {\r\n state.isHovering = false;\r\n return false;\r\n }\r\n\r\n if (state.mouseDown) {\r\n EventManager.setCursor('move', this, true);\r\n if (isMovable()) {\r\n if (shouldResetSlabModePopupOnPointMoveBeDisplayed(this.getGrandParent())) {\r\n renderResetSeamPopup(this.getGrandParent());\r\n } else {\r\n this.movePosition(mousePos);\r\n }\r\n }\r\n }\r\n\r\n if (sqftConfig.highlight.points && state.isHovering) {\r\n EventManager.stealCursor();\r\n EventManager.setCursor('pointer', self);\r\n return true;\r\n } else {\r\n EventManager.resetCursor(self);\r\n }\r\n return false;\r\n }\r\n\r\n const onMouseUp = (mousePos, e) => {\r\n void mousePos;\r\n void e;\r\n state.mouseDown = false;\r\n state.mouseDownPosition = null;\r\n // if (state.isHovering) {\r\n // let shape = parent.getParent();\r\n // if (shape instanceof sqftShape) {\r\n // shape.setIsPointsMovable(false);\r\n // }\r\n // }\r\n }\r\n const canPointBeMoved = () => {\r\n const reduxState = store.getState();\r\n const activeButton = reduxState.sqftMenuState.activeButton;\r\n const isShowSlabTool = reduxState.sqftSlabState.isShowSlabTool;\r\n\r\n // const disallowedNavItems = [\r\n // SIDEBAR_NAVIGATION_BUTTONS.edge,\r\n // SIDEBAR_NAVIGATION_BUTTONS.rotate,\r\n // SIDEBAR_NAVIGATION_BUTTONS.text,\r\n // SIDEBAR_NAVIGATION_BUTTONS.angle,\r\n // SIDEBAR_NAVIGATION_BUTTONS.backsplash,\r\n // SIDEBAR_NAVIGATION_BUTTONS.bumpout,\r\n // SIDEBAR_NAVIGATION_BUTTONS.corners,\r\n // SIDEBAR_NAVIGATION_BUTTONS.radius,\r\n // SIDEBAR_NAVIGATION_BUTTONS.resize,\r\n // SIDEBAR_NAVIGATION_BUTTONS.label,\r\n // SIDEBAR_NAVIGATION_BUTTONS.appliances,\r\n // SIDEBAR_NAVIGATION_BUTTONS.mitered,\r\n // SIDEBAR_BUTTONS_MENU.delete\r\n // ];\r\n\r\n const allowedNavItems = allowedNavItemsForMovingPoint;\r\n\r\n const shape = parent.getParent();\r\n let isLineWithBumpout = false;\r\n let isPrevLineWithBumpout = false;\r\n if (shape instanceof sqftShape) {\r\n const prevLine = shape.getPrevLine(parent);\r\n isLineWithBumpout = this.getParent().isWithBumpout();\r\n isPrevLineWithBumpout = prevLine.isWithBumpout();\r\n }\r\n\r\n return state.canBeMoved\r\n //&& !disallowedNavItems.includes(activeButton) // allow move points only when this button is not active\r\n && allowedNavItems.includes(activeButton) // allow move points only when button is active\r\n && !isShowSlabTool\r\n && !isLineWithBumpout\r\n && !isPrevLineWithBumpout\r\n && !this.isWithAngle()\r\n && !this.isWithCorner()\r\n ;\r\n }\r\n\r\n const onMouseDown = (mousePos, e) => {\r\n void mousePos;\r\n void e;\r\n if (state.isHovering && canPointBeMoved()) {\r\n let shape = parent.getParent();\r\n if (shape instanceof sqftShape) {\r\n shape.setIsPointsMovable(true);\r\n }\r\n state.mouseDown = true;\r\n state.mouseDownPosition = mousePos;\r\n //console.log(\"state.mouseDown\", state.mouseDown);\r\n return true;\r\n }\r\n\r\n if (state.isHovering) {\r\n // Set shape point with mitered edge id\r\n if (parent instanceof MiteredOverlay) {\r\n const miteredPoints = parent.getPoints();\r\n if (this.id === miteredPoints[miteredPoints.length - 1].id || this.id === miteredPoints[0].id) {\r\n const hoveredPoint = workspace.getHoverPoint();\r\n hoveredPoint.addEdgeToPoint();\r\n }\r\n }\r\n }\r\n return false;\r\n }\r\n this.addEdgeToPoint = () => {\r\n const reduxState = store.getState();\r\n const activeButton = reduxState.sqftMenuState.activeButton;\r\n if (activeButton === SIDEBAR_NAVIGATION_BUTTONS.edge) {\r\n const featureId = reduxState.sqftMenuState.activeSubMenuButton;\r\n this.setMiteredFeatureId(featureId);\r\n }\r\n const updateCalculations = reduxState.sqftState.updateCalculations;\r\n store.dispatch(updateSQFTCalculations(updateCalculations + 1));\r\n }\r\n\r\n this.movePosition = (mousePos) => {\r\n let scale = workspace.getScale();\r\n let xDiff = (state.mouseDownPosition.x - mousePos.x) / scale;\r\n let yDiff = (state.mouseDownPosition.y - mousePos.y) / scale;\r\n\r\n state.mouseDownPosition.x = mousePos.x;\r\n state.mouseDownPosition.y = mousePos.y;\r\n this.pos.x -= xDiff;\r\n this.pos.y -= yDiff;\r\n this.revertPositionIfHasIntersections(xDiff, yDiff);\r\n setPointWasChangedInRegularMode();\r\n setPointWasMoved();\r\n state.pointWasMoved = true;\r\n }\r\n this.revertPositionIfHasIntersections = (xDiff, yDiff) => {\r\n let shape = parent.getParent();\r\n let isShapeHasIntersections = false;\r\n if (shape instanceof sqftShape) {\r\n isShapeHasIntersections = shape.isShapeHasIntersections();\r\n //console.log(\"isShapeHasIntersections\", isShapeHasIntersections);\r\n if (isShapeHasIntersections) {\r\n this.pos.x += xDiff;\r\n this.pos.y += yDiff;\r\n }\r\n }\r\n }\r\n //private property setters\r\n function setParent(value) { parent = value; }\r\n\r\n //private functions\r\n\r\n //public functions\r\n this.export = () => {\r\n let exportPoint = {};\r\n this.exportAndImportProperties.forEach((property) => {\r\n exportPoint[property] = _.clone(this[property]);\r\n });\r\n return exportPoint;\r\n };\r\n this.import = (importPoint) => {\r\n this.exportAndImportProperties.forEach((property) => {\r\n this[property] = _.clone(importPoint[property]);\r\n });\r\n //compatibility with old visualizer\r\n if (!importPoint[\"pos\"] && importPoint[\"x\"] !== undefined && importPoint[\"y\"] !== undefined ) {\r\n this.pos = { x: _.clone(importPoint[\"x\"]), y: _.clone(importPoint[\"y\"])}\r\n }\r\n };\r\n this.isHovering = function() { return state.isHovering; };\r\n this.getParent = function() { return parent };\r\n this.getGrandParent = () => {\r\n const parent = this.getParent();\r\n if (parent && parent.getParent) {\r\n return parent.getParent();\r\n }\r\n return null\r\n };\r\n this.isOverPointField = () => {\r\n let field = this.getPointField();\r\n\r\n state.isHovering = (\r\n state.mousePos.x >= field.x - this.arcLength - this.angle &&\r\n state.mousePos.x <= field.x + field.width + this.arcLength + this.angle &&\r\n state.mousePos.y >= field.y - this.arcLength - this.angle &&\r\n state.mousePos.y <= field.y + field.height + this.arcLength + this.angle\r\n );\r\n\r\n return state.isHovering;\r\n };\r\n this.getAngle = function () {\r\n return this.angle;\r\n };\r\n this.getArcLength = function () {\r\n return this.arcLength;\r\n };\r\n this.removeAttachedItem = function () {\r\n this.arcLength = 0;\r\n this.angle = 0;\r\n this.setMiteredFeatureId(null);\r\n sqftShapeManager.updateMinMaxMiteredPoints(this.getGrandParent());\r\n //reset seam shape changes in the slab mode\r\n sqftShapeManager.resetShapeChangesInTheSlabMode(this.getGrandParent());\r\n };\r\n this.rotate = (origin, angle, isSlabMode) => {\r\n let ret = {x: 0, y: 0};\r\n let tr = {x: this.x - origin.x, y: this.y - origin.y};\r\n\r\n ret.x = tr.x * Math.cos(angle) - tr.y * Math.sin(angle);\r\n ret.y = tr.x * Math.sin(angle) + tr.y * Math.cos(angle);\r\n\r\n //console.log(\"isSlabMode in point rotation\", isSlabMode)\r\n const xPos = Math.round10(Math.round10(ret.x, -5) + Math.round10(origin.x, -5), -5);\r\n const yPos = Math.round10(Math.round10(ret.y, -5) + Math.round10(origin.y, -5), -5);\r\n isSlabMode ? this.setPosSlab({x: xPos, y: yPos}) : this.setPos({x: xPos, y: yPos});\r\n };\r\n this.getPointDirection =function () {\r\n return this.pointDirection\r\n };\r\n this.changeCornerDirection = function(line1, line2) {\r\n\r\n // console.log('line1', line1);\r\n // console.log('line2', line2);\r\n\r\n if (line1.orientation === \"vertical\" && line1.newDirection === \"north\"\r\n && line2.orientation === \"horizontal\" && line2.newDirection === \"west\") {\r\n this.pointDirection = \"leftbottom\";\r\n }\r\n if (line1.orientation === \"horizontal\" && line1.newDirection === \"east\"\r\n && line2.orientation === \"vertical\" && line2.newDirection === \"north\") {\r\n this.pointDirection = \"lefttop\";\r\n }\r\n if (line1.orientation === \"vertical\" && line1.newDirection === \"south\"\r\n && line2.orientation === \"horizontal\" && line2.newDirection === \"east\") {\r\n this.pointDirection = \"righttop\";\r\n }\r\n if (line1.orientation === \"horizontal\" && line1.newDirection === \"west\"\r\n && line2.orientation === \"vertical\" && line2.newDirection === \"south\") {\r\n this.pointDirection = \"rightbottom\";\r\n }\r\n\r\n if (line1.orientation === \"vertical\" && line1.newDirection === \"north\"\r\n && line2.orientation === \"horizontal\" && line2.newDirection === \"east\") {\r\n this.pointDirection = \"lefttop\";\r\n }\r\n if (line1.orientation === \"horizontal\" && line1.newDirection === \"east\"\r\n && line2.orientation === \"vertical\" && line2.newDirection === \"south\") {\r\n this.pointDirection = \"righttop\";\r\n }\r\n if (line1.orientation === \"vertical\" && line1.newDirection === \"south\"\r\n && line2.orientation === \"horizontal\" && line2.newDirection === \"west\") {\r\n this.pointDirection = \"rightbottom\";\r\n }\r\n if (line1.orientation === \"horizontal\" && line1.newDirection === \"west\"\r\n && line2.orientation === \"vertical\" && line2.newDirection === \"north\") {\r\n this.pointDirection = \"leftbottom\";\r\n }\r\n\r\n };\r\n this.getPointField = (useFieldWidth = true) => {\r\n const isCabinet = isSFTCabinetsGroup();\r\n let fieldWidth = isCabinet ? sqftConfig.fieldWidthCabinet : sqftConfig.fieldWidth,\r\n center = fieldWidth / 2,\r\n scale = workspace.getScale(),\r\n offset = parent.getOffset();\r\n\r\n return {\r\n x: (this.x * scale) + offset.x - (useFieldWidth ? center : 0),\r\n y: (this.y * scale) + offset.y - (useFieldWidth ? center : 0),\r\n height: fieldWidth,\r\n width: fieldWidth\r\n };\r\n };\r\n\r\n this.getPointPosOnWorkspace = (shouldGetRegularPosition) => {\r\n const shp = this.getGrandParent();\r\n let position;\r\n if (shp) {\r\n position = shouldGetRegularPosition && shp.pos ? shp.pos : shp.getPosition();\r\n } else {\r\n position = shouldGetRegularPosition && parent.pos ? parent.pos : parent.getPosition();\r\n }\r\n const x = shouldGetRegularPosition ? +this.pos.x : +this.x;\r\n const y = shouldGetRegularPosition ? +this.pos.y : +this.y;\r\n\r\n return {\r\n x: x + position.x,\r\n y: y + position.y,\r\n };\r\n };\r\n\r\n this.getPointCords = () => {\r\n let pointField = this.getPointField();\r\n\r\n return {\r\n x: pointField.x + pointField.width / 2,\r\n y: pointField.y + pointField.width / 2\r\n }\r\n };\r\n\r\n this.snapToGrid = () => {\r\n /*var pos = snappedPos();\r\n this.x = pos.x;\r\n this.y = pos.y;*/\r\n };\r\n\r\n this.destroy = function(protect) {\r\n if (!protect) {\r\n EventManager.removeEvent(self);\r\n pointRadiusOverlay.destroy();\r\n }\r\n };\r\n\r\n this.init = function(parent) {\r\n setParent(parent);\r\n this.initEvents();\r\n pointRadiusOverlay = new PointRadius();\r\n pointRadiusOverlay.init(self);\r\n };\r\n this.initEvents = () => {\r\n EventManager.addEvent(\r\n EventManager.events.MOUSE_MOVE,\r\n onMouseMove,\r\n self,\r\n EventManager.priorities.POINT\r\n );\r\n EventManager.addEvent(\r\n EventManager.events.MOUSE_DOWN,\r\n onMouseDown,\r\n self,\r\n EventManager.priorities.POINT\r\n );\r\n EventManager.addEvent(\r\n EventManager.events.MOUSE_UP,\r\n onMouseUp,\r\n self,\r\n EventManager.priorities.POINT\r\n );\r\n EventManager.addEvent(\r\n EventManager.events.RENDER,\r\n this.render,\r\n self,\r\n EventManager.priorities.POINT\r\n );\r\n };\r\n this.deregisterEvents = () => {\r\n EventManager.removeEvent(this);\r\n };\r\n this.reInitEvents = () => {\r\n this.initEvents();\r\n };\r\n this.deregisterPartEvents = () => {\r\n if (pointRadiusOverlay) {\r\n pointRadiusOverlay.deregisterPartEvents();\r\n }\r\n };\r\n this.reInitPartEvents = () => {\r\n if (pointRadiusOverlay) {\r\n pointRadiusOverlay.reInitPartEvents();\r\n }\r\n };\r\n // check if corner can be applied to another side of the line\r\n this.isFitSize = function () {\r\n if (parent.isLine) {\r\n let fitSize = new FitSize(parent);\r\n\r\n return fitSize.isFitSize(SqftStore.radius.angle || SqftStore.radius.arcLength);\r\n }\r\n return true\r\n };\r\n\r\n this.isWithoutMitered = function () {\r\n return !(this.getParent() ? this.getParent().isWithMitered() : false)\r\n && !(this.getParent() ? this.getParent().isWithMiteredPrev() : false)\r\n };\r\n this.rememberPos = () => {\r\n this.backupX = this.x;\r\n this.backupY = this.y;\r\n }\r\n this.restorePos = () => {\r\n this.x = this.backupX;\r\n this.y = this.backupY;\r\n }\r\n\r\n this.render = (ctx) => {\r\n if (workspace && workspace.getState().loading) {\r\n return\r\n }\r\n\r\n if (isDisabledInPopupShouldBeHidden() && isDisabledInPopupWithParents(this)) {\r\n return\r\n }\r\n\r\n if (this.isHidden()) { return; }\r\n const reduxState = store.getState();\r\n const activeButton = reduxState.sqftMenuState.activeButton;\r\n const o = parent.getOffset();\r\n let\r\n pointField = self.getPointField(),\r\n scale = sqftConfig.scale,\r\n marginX,\r\n marginY;\r\n\r\n switch (this.pointDirection) {\r\n case \"lefttop\":\r\n marginX = -13;\r\n marginY = -13;\r\n break;\r\n case \"righttop\":\r\n marginX = 5;\r\n marginY = -13;\r\n break;\r\n case \"rightbottom\":\r\n marginX = 5;\r\n marginY = self.pointDiff ? 5 - self.pointDiff : 5;\r\n break;\r\n case \"leftbottom\":\r\n marginX = self.pointDiff ? -13 + self.pointDiff : -13;\r\n marginY = 5;\r\n break;\r\n default:\r\n marginX = 0;\r\n marginY = 0;\r\n break;\r\n }\r\n\r\n let pos = {\r\n x: o.x + (this.x * scale) + marginX,\r\n y: o.y + (this.y * scale) + marginY\r\n };\r\n\r\n let pos2 = {\r\n x: o.x + (this.x * scale),\r\n y: o.y + (this.y * scale)\r\n };\r\n void pos2;\r\n\r\n const shouldHighLightRadius = sqftConfig.highlight.points\r\n && !(this.arcLength > 0 || this.angle > 0)\r\n && !self.angleIsChanged\r\n && this.isFitSize();\r\n\r\n const isNotHighlighted = !(sqftConfig.highlight.points && !(this.arcLength > 0 || this.angle > 0))\r\n || sqftConfig.highlight.points && !this.isFitSize();\r\n\r\n ctx.save();\r\n ctx.beginPath();\r\n\r\n if (this.layout === 'white-circle') {\r\n this.renderCircleLayout(ctx, pointField);\r\n\r\n if (EventManager.getCursor().indexOf(\"delete\") >= 0 && state.isHovering && parent instanceof MiteredOverlay) {\r\n ctx.fillStyle = fillStyleDelete;\r\n } else {\r\n ctx.fillStyle = fillStyleWhite;\r\n }\r\n ctx.fill();\r\n\r\n } else if (this.layout === 'small-white-circle' || state.isHovering && canPointBeMoved()) {\r\n this.renderSmallCircleLayout(ctx, pointField);\r\n\r\n } else if (this.layout === 'black-circle') {\r\n this.renderCircleLayout(ctx, pointField);\r\n ctx.fillStyle = fillStyleBlack;\r\n ctx.fill();\r\n\r\n } else if (this.layout === 'arrow-circle') {\r\n this.renderArrowCircleLayout(ctx, pointField);\r\n\r\n } else if (this.layout === 'blank') {\r\n this.renderBlankLayout(ctx, pos);\r\n\r\n } else if (shouldHighLightRadius) {\r\n this.renderHighlightRadiusLayout(ctx, pointField);\r\n\r\n } else if (sqftConfig.highlight.rotateAngle && this.renderAngleCircle) {\r\n this.renderRotateAngleLayout(ctx, pointField);\r\n\r\n } else {\r\n if (this.getMiteredFeatureId()) {\r\n ctx.fillStyle = fillStyleEdge\r\n } else {\r\n ctx.fillStyle = fillStyle;\r\n }\r\n\r\n if (this.arcLength > 0 || this.angle > 0) {\r\n //this.renderArcLayoutOld(ctx, pointField, pos);\r\n\r\n } else if (isNotHighlighted) {\r\n if (allowedNavItemsForMovingPoint.includes(activeButton)) {\r\n this.renderWhitePointLayout(ctx, pos2);\r\n } else {\r\n // old gray rectangle\r\n //this.renderGrayPointLayoutV2(ctx, pos);\r\n\r\n // gray rectangle version 2\r\n this.renderGrayPointLayoutV2(ctx);\r\n }\r\n }\r\n }\r\n\r\n ctx.closePath();\r\n ctx.restore();\r\n };\r\n\r\n this.renderRotateAngleLayout = (ctx, pointField) => {\r\n //todo fix bumpout rotation and remove this\r\n ////////////////////////////////////////////////\r\n if (!parent.getParent().isWithBumpout()\r\n && !parent.getParent().isWithMitered()\r\n && !parent.getParent().isPointsMoved\r\n && parent.getParent().rotatedDegrees === 0\r\n ) {\r\n ///////////////////////////////////\r\n setTranslates();\r\n ctx.arc(\r\n pointField.x + translateX + pointField.width / 2,\r\n pointField.y + translateY - 2 + pointField.width / 2,\r\n this.renderAngleCircle,\r\n 0,\r\n 2 * Math.PI\r\n );\r\n ctx.closePath();\r\n ctx.lineWidth = 2;\r\n ctx.strokeStyle = COLOR_THEMES[sqftConfig.activeTheme].active;\r\n ctx.fillStyle = \"rgba(159, 197, 34, 0.25)\";\r\n ctx.fill();\r\n ctx.stroke();\r\n ctx.beginPath();\r\n ctx.arc(pointField.x + 45 / 2 + translateX + 2, pointField.y + 45 / 2 + translateY, this.renderAngleCircle / 2, 0, 2 * Math.PI);\r\n ctx.fillStyle = COLOR_THEMES[sqftConfig.activeTheme].active;\r\n ctx.fill();\r\n ctx.closePath();\r\n\r\n if (this.renderAngleArc) {\r\n ctx.beginPath();\r\n ctx.strokeStyle = COLOR_THEMES[sqftConfig.activeTheme].active;\r\n ctx.arc(\r\n pointField.x + translateX + 4 + pointField.width / 2,\r\n pointField.y + pointField.width / 2,\r\n this.renderAngleArc,\r\n 0,\r\n Math.PI / 2\r\n );\r\n ctx.stroke();\r\n }\r\n }\r\n }\r\n\r\n this.renderHighlightRadiusLayout = (ctx, pointField) => {\r\n //todo hide if override\r\n\r\n setTranslates();\r\n ctx.arc(\r\n pointField.x + translateX + pointField.width / 2,\r\n pointField.y + translateY + pointField.width / 2,\r\n pointField.width / 2,\r\n 0,\r\n 2 * Math.PI\r\n );\r\n ctx.closePath();\r\n ctx.lineWidth = 2;\r\n ctx.strokeStyle = radiusFillStyle;\r\n ctx.stroke();\r\n\r\n ctx.beginPath();\r\n ctx.arc(pointField.x + 45/2 + translateX + 2, pointField.y + 45/2 + translateY, 8, 0, 2 * Math.PI, false);\r\n ctx.fillStyle = radiusFillStyle;\r\n ctx.fill();\r\n }\r\n\r\n this.renderCircleLayout = (ctx, pointField) => {\r\n setTranslates();\r\n ctx.arc(\r\n pointField.x + translateX + pointField.width / 2,\r\n pointField.y + translateY + pointField.width / 2,\r\n 9,\r\n 0,\r\n 2 * Math.PI\r\n );\r\n ctx.closePath();\r\n ctx.lineWidth = 2;\r\n ctx.strokeStyle = fillStyleBlack;\r\n ctx.stroke();\r\n\r\n ctx.beginPath();\r\n ctx.arc(\r\n pointField.x + translateX + pointField.width / 2,\r\n pointField.y + translateY + pointField.width / 2,\r\n 8,\r\n 0,\r\n 2 * Math.PI,\r\n false\r\n );\r\n }\r\n\r\n this.renderSmallCircleLayout = (ctx, pointField) => {\r\n let arcRadius;\r\n ctx.lineWidth = 2;\r\n if (state.isHovering) {\r\n arcRadius = 6\r\n ctx.fillStyle = COLOR.blackLight;\r\n } else {\r\n arcRadius = 5\r\n ctx.fillStyle = COLOR.white;\r\n }\r\n\r\n ctx.arc(\r\n pointField.x + pointField.width / 2,\r\n pointField.y + pointField.width / 2,\r\n arcRadius,\r\n 0,\r\n 2 * Math.PI,\r\n false\r\n );\r\n\r\n ctx.strokeStyle = COLOR_THEMES[config.activeTheme].primary;\r\n\r\n ctx.stroke();\r\n ctx.fill();\r\n }\r\n\r\n this.renderBlankLayout = (ctx, pos) => {\r\n ctx.rect(pos.x, pos.y, 1, 1); // draw simple rectangle\r\n ctx.fill();\r\n }\r\n\r\n this.renderArrowCircleLayout = (ctx, pointField) => {\r\n setTranslates();\r\n\r\n ctx.beginPath();\r\n ctx.arc(\r\n pointField.x + translateX + pointField.width / 2,\r\n pointField.y + translateY + pointField.width / 2,\r\n 10,\r\n 0,\r\n 2 * Math.PI,\r\n false\r\n );\r\n ctx.fillStyle = fillStyleBlue;\r\n ctx.fill();\r\n }\r\n\r\n this.renderGrayPointLayout = (ctx, pos) => {\r\n ctx.rect(pos.x, pos.y, 8, 8); // draw simple rectangle\r\n ctx.fillStyle = 'rgba(205,202,202,0.5)';\r\n ctx.fill();\r\n ctx.closePath();\r\n }\r\n\r\n this.renderArcLayoutOld = (ctx, pointField, pos) => {\r\n console.log('pointField.x', pointField.x);\r\n console.log('pointField.y', pointField.y);\r\n console.log('radius', this.arcLength);\r\n\r\n ctx.beginPath();\r\n ctx.lineWidth = 8;\r\n ctx.strokeStyle = radiusFillStyle;\r\n ctx.strokeStyle = \"#b263a8\";\r\n ctx.moveTo(pointField.x + 15, pointField.y + 45); // P0\r\n ctx.arcTo(pointField.x + 15, pointField.y + 15, pointField.x + 45, pointField.y + 15, 30); // P1, P2 and the radius\r\n ctx.stroke();\r\n console.log('stroked2!');\r\n\r\n ctx.moveTo(pos.x, pos.y);\r\n ctx.arcTo(pos.x, pos.y, pos.x + 15, pos.y + 15, this.arcLength); // draw arc radius\r\n ctx.stroke();\r\n console.log('stroked!');\r\n }\r\n\r\n this.renderGrayPointLayoutV2 = (ctx) => {\r\n ctx.beginPath();\r\n const shape = parent.getParent();\r\n const nextLine = shape.getNextLine(parent);\r\n //const prevLine = shape.getPrevLine(parent);\r\n const angleBetweenTwoLines = getAngleBetween3Points(parent.from, parent.to, nextLine.to);\r\n //console.log(\"angleBetweenTwoLines\", angleBetweenTwoLines);\r\n\r\n void angleBetweenTwoLines;\r\n\r\n const pointOnTheLine = getPointOnTheLine(\r\n parent.to.getPointField(false),\r\n parent.from.getPointField(false),\r\n 15\r\n );\r\n const pointOnTheNextLine = getPointOnTheLine(\r\n nextLine.from.getPointField(false),\r\n nextLine.to.getPointField(false),\r\n 15\r\n );\r\n const midpoint = getMidPoint(pointOnTheLine, pointOnTheNextLine);\r\n let posX = midpoint.x; //o.x + (midpoint.x * scale);\r\n let posY = midpoint.y; //o.y + (midpoint.y * scale);\r\n void posX;\r\n void posY;\r\n\r\n ctx.rect(\r\n posX - 4,\r\n posY - 4,\r\n 8, 8\r\n ); // draw simple rectangle\r\n ctx.fillStyle = 'rgba(205,202,202,0.5)';\r\n ctx.fill();\r\n }\r\n\r\n this.renderWhitePointLayout = (ctx, pos2) => {\r\n ctx.arc(\r\n pos2.x,\r\n pos2.y,\r\n 5,\r\n 0,\r\n 2 * Math.PI\r\n );\r\n ctx.fillStyle = 'rgb(255,255,255)';\r\n ctx.fill();\r\n ctx.lineWidth = 2;\r\n ctx.strokeStyle = fillStyleBlue;\r\n ctx.stroke();\r\n }\r\n}\r\n","import SlabWorkspace from \"../core/slab/slabWorkspace\";\r\nimport workspace from \"../core/workspace\";\r\nimport {SHAPE_PART_ID} from \"../../../constants\";\r\nimport SQFTShapeOffset from \"../core/shapes/sqftShapeOffset\";\r\nimport sqftShape from \"../core/shapes/sqftShape\";\r\nimport createEventManager from \"./subscriptionEventManager\";\r\n\r\nconst eventManager = createEventManager();\r\n\r\nconst sqftSlabManager = {\r\n ...eventManager,\r\n\r\n centerButton: {\r\n width: 10,\r\n height: 9,\r\n },\r\n\r\n importSlabBacksplashes: (values) => {\r\n SlabWorkspace.slabAdditionalShapes.resetBacksplashes();\r\n SlabWorkspace.slabAdditionalShapes.importData(values);\r\n },\r\n removeAllSlabBacksplashes: (values) => {\r\n SlabWorkspace.slabAdditionalShapes.resetBacksplashes(values);\r\n },\r\n deleteSlabBacksplashByLine: (line) => {\r\n SlabWorkspace.slabAdditionalShapes.removeActiveBacksplashByLine(line);\r\n },\r\n getSlabPlaceHolderShapes: () => {\r\n return workspace.getShapes().filter(shp => shp.partId === SHAPE_PART_ID.slabPlaceHolder);\r\n },\r\n deleteShapeOffset: () => {\r\n if (SlabWorkspace.shapeOffset) {\r\n SlabWorkspace.shapeOffset.delete()\r\n }\r\n SlabWorkspace.shapeOffset = null\r\n },\r\n hideShapeOffset: () => {\r\n if (SlabWorkspace.shapeOffset) {\r\n SlabWorkspace.shapeOffset.deregisterEvents();\r\n }\r\n },\r\n reInitShapeOffset: () => {\r\n if (SlabWorkspace.shapeOffset) {\r\n SlabWorkspace.shapeOffset.reInitEvents();\r\n }\r\n },\r\n initShapeOffset: function (shape) {\r\n const shapes = workspace.getShapes();\r\n if (shape instanceof sqftShape) {\r\n if (SlabWorkspace.shapeOffset === null) {\r\n SlabWorkspace.shapeOffset = new SQFTShapeOffset(shapes[0]);\r\n SlabWorkspace.shapeOffset.init();\r\n SlabWorkspace.shapeOffset.setParent(shape);\r\n this.emit('shapeOffsetChanged', SlabWorkspace.shapeOffset);\r\n } else {\r\n SlabWorkspace.shapeOffset.animateShapeTransition(\r\n shape,\r\n () => {this.emit('shapeOffsetChanged', SlabWorkspace.shapeOffset)}\r\n );\r\n }\r\n\r\n }\r\n }\r\n}\r\n\r\nexport default sqftSlabManager\r\n","import {baseNewImagesPath} from \"../assets\";\r\n\r\nexport const iconPlusGreen = `${baseNewImagesPath}images/sqft-icons/cursors/plus_green.png`;\r\nexport const iconPlusBlack = `${baseNewImagesPath}images/sqft-icons/cursors/plus_black.png`;\r\nexport const iconPlusBlue = `${baseNewImagesPath}images/sqft-icons/cursors/plus_blue.png`;\r\nexport const iconplusPurple = `${baseNewImagesPath}images/sqft-icons/cursors/plus_purple.png`;\r\nexport const objectFlipVertical = `${baseNewImagesPath}images/sqft-icons/cursors/object_flip_vertical.png`;\r\nexport const objectFlipHorizontal = `${baseNewImagesPath}images/sqft-icons/cursors/object_flip_horizontal.png`;\r\nexport const iconGreenPlus32 = `${baseNewImagesPath}images/sqft-icons/icon-green-plus-32.png`;\r\nexport const iconGreenClip = `${baseNewImagesPath}images/greenclip.svg`;\r\nexport const iconHeight = `${baseNewImagesPath}images/sqft-icons/icon-height.svg`;\r\nexport const iconLength = `${baseNewImagesPath}images/sqft-icons/icon-length.svg`;\r\nexport const iconLink = `${baseNewImagesPath}images/sqft-icons/icon-link.svg`;\r\nexport const iconThickness = `${baseNewImagesPath}images/sqft-icons/icon-thickness.svg`;\r\nexport const iconEyeball = `${baseNewImagesPath}images/sqft-icons/icon-eyeball.svg`;\r\nexport const iconCursorPointer = `${baseNewImagesPath}images/sqft-icons/cursors/pointer.svg`;\r\nexport const iconLibrary = `${baseNewImagesPath}images/sqft-icons/icon-length.svg`;\r\nexport const iconUpload = `${baseNewImagesPath}images/sqft-icons/icon-upload.svg`;\r\nexport const iconImage = `${baseNewImagesPath}images/sqft-icons/icon-image.svg`;\r\n\r\n","import * as types from \"./actionTypes\";\r\n\r\nexport const showSlabTool = (isShowSlabTool) => ({\r\n type: types.SHOW_SLAB_TOOL,\r\n payload: {isShowSlabTool}\r\n});\r\n\r\nexport const setActiveSlabId = (activeSlabId) => ({\r\n type: types.SET_ACTIVE_SLAB_ID,\r\n payload: {activeSlabId}\r\n});\r\n\r\nexport const setActiveSlabUrl = (activeSlabUrl) => ({\r\n type: types.SET_ACTIVE_SLAB_URL,\r\n payload: {activeSlabUrl}\r\n});\r\n\r\nexport const setActiveStep = (activeStep) => ({\r\n type: types.SET_SQFT_SLAB_ACTIVE_STEP,\r\n payload: {activeStep}\r\n});\r\n\r\nexport const setSlabSearchText = (searchText) => ({\r\n type: types.SET_SQFT_SLAB_SEARCH_TEXT,\r\n payload: {searchText}\r\n});\r\n\r\nexport const setSlabAspectRatio = (slabAspectRatio) => ({\r\n type: types.SET_SQFT_SLAB_ASPECT_RATIO,\r\n payload: {slabAspectRatio}\r\n});\r\n\r\nexport const setSlabImageType = (slabImageType) => ({\r\n type: types.SET_SLAB_IMAGE_TYPE,\r\n payload: {slabImageType}\r\n});\r\n\r\nexport const setSlabImageWidth = (slabImageWidth) => ({\r\n type: types.SET_SQFT_SLAB_IMAGE_WIDTH,\r\n payload: {slabImageWidth}\r\n});\r\n\r\nexport const setSlabImageHeight = (slabImageHeight) => ({\r\n type: types.SET_SQFT_SLAB_IMAGE_HEIGHT,\r\n payload: {slabImageHeight}\r\n});\r\n\r\nexport const setCropperData = (cropperData) => ({\r\n type: types.SET_SQFT_SLAB_CROPPER_DATA,\r\n payload: {cropperData}\r\n});\r\n\r\nexport const setSqftCroppedSlabImages = (croppedSlabImages) => ({\r\n type: types.SET_SQFT_CROPPED_SLAB_IMAGES,\r\n payload: {croppedSlabImages}\r\n});\r\n\r\nexport const addSqftCroppedSlabImage = (croppedSlabImage) => ({\r\n type: types.ADD_SQFT_CROPPED_SLAB_IMAGE,\r\n payload: croppedSlabImage\r\n});\r\n\r\nexport const setSqftSlabToolVisited = (isSlabToolVisited) => ({\r\n type: types.SET_SLAB_TOOL_VISITED,\r\n payload: {isSlabToolVisited}\r\n});\r\n\r\nexport const addRoomWithVisitedSlabTool = (qtCatName) => ({\r\n type: types.ADD_ROOM_WITH_VISITED_SLAB_TOOL,\r\n payload: qtCatName\r\n});\r\n\r\nexport const deleteCroppedSlabImage = (id) => ({\r\n type: types.DELETE_CROPPED_SLAB_IMAGE,\r\n payload: {id}\r\n});\r\n\r\nexport const setPricePerArea = (pricePerArea) => ({\r\n type: types.SET_PRICE_PER_AREA,\r\n payload: {pricePerArea}\r\n});\r\n\r\nexport const setMeasurementVisibleInSlabMode = (isMeasurementVisibleInSlabMode) => ({\r\n type: types.SET_IS_MEASUREMENT_VISIBLE_IN_SLAB_MODE,\r\n payload: {isMeasurementVisibleInSlabMode}\r\n});\r\n\r\nexport const setIsSizeValidationFailed = (isSizeValidationFailed) => ({\r\n type: types.SET_IS_SIZE_VALIDATION_FAILED,\r\n payload: {isSizeValidationFailed}\r\n});\r\n\r\nexport const setIsSlabPricingEnabled = (isSlabPricingEnabled) => ({\r\n type: types.SET_IS_SLAB_PRICING_ENABLED,\r\n payload: {isSlabPricingEnabled}\r\n});\r\n","import {Part} from \"../part\";\r\nimport DesignNavigationItem from \"../../../visComponents/designNavigationItem\";\r\nimport {PartMenuType} from \"../../../visComponents/constants\";\r\nimport {LayoutType, ShowerComboTubType} from \"../constants\";\r\nimport { showerTubComboThumbnail, custom60in30X8Shower } from '../../../bvComponent/core/assets';\r\n\r\nimport BathTubLiner from \"../subparts/showerTubCombo/bathtubLiner\";\r\nimport ReplacementTub from \"../subparts/showerTubCombo/replacementTub\";\r\nimport WalkInTub from \"../subparts/showerTubCombo/walkInTub\";\r\nimport JettedTub from \"../subparts/showerTubCombo/jettedTub\";\r\nimport WallConfiguration from \"../subparts/showerTubCombo/wallConfiguration\";\r\nimport {fixDbFeatureProperties} from \"../../../../misc/helpers\";\r\nimport WalkInTubFixture from \"../subparts/showerTubCombo/walkInTubFixture\";\r\nimport ReplacementTubFixture from \"../subparts/showerTubCombo/replacementTubFixture\";\r\n\r\nexport class ShowerTubCombo extends Part {\r\n static id = 'Shower Tub Combo';\r\n\r\n constructor() {\r\n super(true, false, PartMenuType.Complex);\r\n\r\n this.showerTubComboIsActive = false; // param needed to check if shower is still active or not\r\n this.menuType = PartMenuType.Complex;\r\n this.partThumbnail = showerTubComboThumbnail;\r\n this.partName = 'Shower Tub Combo';\r\n this.translateId = \"visualizer.bathroom.shower_tub_combo\";\r\n this.relatedItems = [];\r\n this.wallConfiguration = null;\r\n this.bathTubLiner = null;\r\n this.replacementTub = null;\r\n this.replacementTubFixture = null;\r\n this.walkInTub = null;\r\n this.jettedTub = null;\r\n\r\n // Kohler hardcode, they don't have bathtub_liner\r\n this.bottomTub = ShowerComboTubType.replacement_tub;\r\n this.leftShowerWallType = 'Pony';\r\n this.showerComboSize = '60in';\r\n this.relatedGroupNames = [\"Bathtub Liner\", \"Replacement Tub\", \"Walk In Tub\", \"Jetted Tub\", \"Replacement tub Fixture\"];\r\n }\r\n\r\n load(dbFeature, loadFeature = true) {\r\n let relatedItemName = \"\",\r\n RelatedItemClass = null;\r\n switch (dbFeature.groupName) {\r\n case \"Bathtub Liner\":\r\n relatedItemName = \"bathTubLiner\";\r\n RelatedItemClass = BathTubLiner;\r\n break;\r\n case \"Replacement Tub\":\r\n relatedItemName = \"replacementTub\";\r\n RelatedItemClass = ReplacementTub;\r\n break;\r\n case \"Walk In Tub Fixture\":\r\n relatedItemName = \"walkInTubFixture\";\r\n RelatedItemClass = WalkInTubFixture;\r\n break;\r\n case \"Replacement tub Fixture\":\r\n case \"Replacement Tub Fixture\":\r\n relatedItemName = \"replacementTubFixture\";\r\n RelatedItemClass = ReplacementTubFixture;\r\n break;\r\n case \"Walk In Tub\":\r\n case \"Walk in Tub\":\r\n relatedItemName = \"walkInTub\";\r\n RelatedItemClass = WalkInTub;\r\n break;\r\n case \"Jetted Tub\":\r\n relatedItemName = \"jettedTub\";\r\n RelatedItemClass = JettedTub;\r\n break;\r\n }\r\n return this.loadCommon(relatedItemName, RelatedItemClass, dbFeature, loadFeature)\r\n }\r\n\r\n setSpecificRules() {\r\n if (!this.wallConfiguration) {\r\n this.wallConfiguration = new WallConfiguration(true);\r\n this.wallConfiguration.counts = {\r\n allLayoutFeaturesCount: 0,\r\n largeLayoutFeaturesCount: 0,\r\n smallLayoutFeaturesCount: 0\r\n };\r\n this.relatedItems.unshift(this.wallConfiguration);\r\n this.wallConfiguration.getParent = () => this;\r\n }\r\n const wallConfigurations = [\r\n // ShowerTubCombo.createCustomWallConfiguration(\r\n // custom60inPonyShower,\r\n // \"Pony Wall 60in\",\r\n // \"Pony\",\r\n // \"60in\",\r\n // {\r\n // \"ShowerSize\": ['60in'],\r\n // \"CountertopSize\": [\"20in\", \"24in\", \"30in\", \"36in\", \"48in\", \"60in\", \"72in\"],\r\n // },\r\n // this,\r\n // 100000\r\n // ),\r\n ShowerTubCombo.createCustomWallConfiguration(\r\n custom60in30X8Shower,\r\n \"Full Wall 60in\",\r\n \"30X8\",\r\n \"60in\",\r\n {\r\n \"ShowerSize\": ['60in'],\r\n \"CountertopSize\": [\"20in\", \"24in\", \"30in\", \"36in\", \"48in\", \"60in\", \"72in\"],\r\n },\r\n this,\r\n 100001\r\n ),\r\n ];\r\n Object.keys(LayoutType).forEach(layoutType => {\r\n this.wallConfiguration.featuresList[layoutType] = wallConfigurations;\r\n if (this.wallConfiguration.counts) {\r\n this.wallConfiguration.counts[layoutType.toLowerCase() + \"LayoutFeaturesCount\"]++;\r\n }\r\n });\r\n }\r\n\r\n static createCustomWallConfiguration(customThumbnail, name, leftShowerWallType, showerComboSize, metaData, parent, id) {\r\n const conf = new WallConfiguration();\r\n conf.partName = name;\r\n conf.showerBodyId = name.toLowerCase().replace(/ /gi, \"-\");\r\n conf.dbFeature = {};\r\n conf.featureName = name;\r\n conf.groupName = \"Wall Configuration\";\r\n conf.showerComboSize = showerComboSize;\r\n // conf.parent = parent;\r\n conf.getParent = () => parent.wallConfiguration;\r\n conf.metaData = metaData;\r\n conf.leftShowerWallType = leftShowerWallType;\r\n conf.customThumbnail = customThumbnail;\r\n conf.dbFeature = fixDbFeatureProperties({\r\n metaData,\r\n id,\r\n unlocked: true\r\n });\r\n return conf;\r\n }\r\n\r\n setLayers(layout, placeholdersNeeded) {\r\n\r\n if (!this.showerTubComboIsActive) {\r\n return null\r\n }\r\n\r\n return super.setLayers(layout, placeholdersNeeded)\r\n }\r\n\r\n subParts() {\r\n\r\n let subParts = [\r\n ...this.getRelatedItems().filter(item => item.visible).map(_ => new DesignNavigationItem(_.partName, _)),\r\n ...this.layout.parts.Shower.subParts().filter(subPart => {\r\n return (subPart.text === \"Fixture\")\r\n || (subPart.text === \"Shower Head\")\r\n || (subPart.text === \"Shower Walls\")\r\n || (subPart.text === \"Shower Walls Accent\")\r\n || (subPart.text === \"Shower Door\")\r\n || (subPart.text === \"Handle\")\r\n || (subPart.text === \"Pony Wall\")\r\n || (subPart.text === \"Pony Wall Cap\")\r\n || (subPart.text === \"Pony Wall Glass\")\r\n })\r\n ];\r\n\r\n if (this.bottomTub === ShowerComboTubType.walk_in_tub) {\r\n subParts = subParts.filter(subPart => {\r\n return subPart.part.partId !== \"shower_door\" && subPart.part.partId !== \"shower_door_handle\" && subPart.part.partId !== \"shower_fixture\"\r\n })\r\n }\r\n\r\n return subParts\r\n }\r\n\r\n getShowerRelatedItems() {\r\n return this.layout.parts.Shower.getRelatedItems().filter(relItem => {\r\n return (relItem.partId === \"shower_fixture\")\r\n || (relItem.partId === \"shower_head\")\r\n || (relItem.partId === \"shower_wall\")\r\n || (relItem.partId === \"shower_wall_accent\")\r\n || (relItem.partId === \"shower_door\")\r\n || (relItem.partId === \"shower_door_handle\")\r\n || (relItem.partId === \"pony_wall\")\r\n || (relItem.partId === \"pony_wall_cap\")\r\n || (relItem.partId === \"pony_wall_glass\")\r\n })\r\n }\r\n\r\n setShowerTubCombo() {\r\n this.showerTubComboIsActive = true;\r\n }\r\n\r\n isSubTypeWithItems() {\r\n return false\r\n }\r\n\r\n handleSubPartClick() {}\r\n\r\n setZIndex(zIndexes) {\r\n if (!this.showerTubComboIsActive) {\r\n return null\r\n }\r\n\r\n if(zIndexes)\r\n this.relatedItems.forEach(_ => _.setZIndex(zIndexes));\r\n }\r\n\r\n setActiveTub(bottomTub) {\r\n this.bottomTub = bottomTub;\r\n }\r\n\r\n showerSize() {\r\n return this.showerComboSize\r\n }\r\n\r\n showerDimensions() {\r\n return this.leftShowerWallType\r\n }\r\n\r\n setShowerSize(leftShowerWallType, showerComboSize) {\r\n this.leftShowerWallType = leftShowerWallType;\r\n this.showerComboSize = showerComboSize;\r\n }\r\n\r\n}\r\n","import {PartMenuType} from \"../../visComponents/constants\";\r\nimport {iCmp} from \"../../../misc/utils\";\r\nimport Layer from \"../../visComponents/layer\";\r\nimport {LayoutType, METADATA} from \"./constants\";\r\nimport PartCommon from \"../../visComponents/partCommon\";\r\nimport DesignNavigationItem from \"../../visComponents/designNavigationItem\";\r\n\r\nexport class Part extends PartCommon {\r\n\r\n constructor(isParent, isChild, menuType) {\r\n super();\r\n if (isChild || (isParent && menuType === PartMenuType.Simple)) {\r\n this.featuresList = {};\r\n this.featuresPartsList = {};\r\n this.modulePartsList = {};\r\n Object.keys(LayoutType).forEach(layoutName => {\r\n this.featuresList[layoutName] = [];\r\n this.featuresPartsList[layoutName] = [];\r\n this.modulePartsList[layoutName] = [];\r\n });\r\n this.allFeaturesReceived = false;\r\n this.realFeaturesReceived = false; // this prop is need on Scroll (if features count more that 1000)\r\n this.nextFeaturesPageToLoad = 0;\r\n this.activeFeature = null;\r\n this.placeholderFeature = null;\r\n this.shadowFeature = null;\r\n this.placeholderChanged = false;\r\n this.firstClick = {\r\n \"0\": false\r\n };\r\n this.activeLockedFeature = null;\r\n this.activeNotInVisualizerFeature = null; // is needed to display in the QT selected activeNotInVisualizerFeature, but render proper activeFeature layer(for example, countertop)\r\n // name = \"\";\r\n this.visible = true;\r\n this.categoryEnabled = false;\r\n this.layout = null;\r\n this.featureGroupVisible = true; // dashboard's feature group eye ball logic\r\n this.featureGroupEnabled = true; // dashboard's feature group checkbox logic\r\n this.selectedFeaturesHistory = []; // array of strings(names). updated every time item is selected\r\n this.filtersReceived = null; // array of filters values, comes from BE, for ex [1221, 347, 1124]\r\n }\r\n if (isParent) {\r\n this.partThumbnail = '';\r\n this.relatedItems = [];\r\n }\r\n if (!isChild && !isParent) {\r\n this.dbFeature = null;\r\n this.layer = new Layer(\"kv\");\r\n this._customDisplayName = null;\r\n this.notesList = {};\r\n }\r\n this.partName = \"\";\r\n }\r\n\r\n set features(featuresList) {\r\n // features can't be set directly, we need to change featuresList array\r\n }\r\n get features() {\r\n const layout = this.layout || this.getParent().layout;\r\n return this.featuresList[layout.getCurrentLayoutName()]\r\n }\r\n set featuresParts(featuresList) {\r\n // featuresParts can't be set directly, we need to change featuresPartsList array\r\n }\r\n get featuresParts() {\r\n const layout = this.layout || this.getParent().layout;\r\n return this.featuresPartsList[layout.getCurrentLayoutName()]\r\n }\r\n get moduleParts() {\r\n const layout = this.layout || this.getParent().layout;\r\n return this.modulePartsList[layout.getCurrentLayoutName()]\r\n }\r\n\r\n /**\r\n * Checks whether a given for condition matches the needed value (or array of values)\r\n * @param name {string}\r\n * @param value {string || array}\r\n * @returns {boolean}\r\n */\r\n matchesMetaForCondition(name, value) {\r\n if (!this.metaData[name]) {\r\n return false\r\n }\r\n if (Array.isArray(this.metaData[name])) {\r\n return this.metaData[name].some(condValue => {\r\n return condValue === METADATA.ALL || (Array.isArray(value) ? value.some(val => iCmp(condValue, val)) : iCmp(condValue, value))\r\n });\r\n }\r\n return this.metaData[name] === METADATA.ALL\r\n || (Array.isArray(value) ? value.some(val => iCmp(this.metaData[name], val)) : iCmp(this.metaData[name], value))\r\n }\r\n\r\n matchesMetaForArrayOfConditions(arrayOfConditions) {\r\n return arrayOfConditions.every((condition) => {\r\n return this.matchesMetaForCondition(condition.propName, condition.propValue);\r\n })\r\n }\r\n\r\n navigationItem() {\r\n return new DesignNavigationItem(this.partName, this);\r\n }\r\n}\r\n\r\n\r\n","import React, {useEffect, useRef} from \"react\";\r\nimport $ from \"jquery\";\r\nimport PropTypes from \"prop-types\";\r\n\r\nconst WithOverlay = (props) => {\r\n\r\n const {children, visible, className, onClick, popupClassName} = props;\r\n\r\n const overlayElement = useRef(null);\r\n\r\n useEffect(() => {\r\n if (overlayElement && overlayElement.current) {\r\n $(overlayElement.current).fadeIn(300)\r\n }\r\n }, [visible]); // eslint-disable-line react-hooks/exhaustive-deps\r\n\r\n const hideOverlay = (closePopup) => {\r\n if (overlayElement && overlayElement.current) {\r\n $(overlayElement.current).fadeOut(300, () => {\r\n if (closePopup) {\r\n closePopup();\r\n }\r\n })\r\n }\r\n };\r\n\r\n const onOverlayClick = (event) => {\r\n if (!onClick) {\r\n return;\r\n }\r\n if (popupClassName && event.target.closest(\".\" + popupClassName)) {\r\n return\r\n }\r\n hideOverlay(onClick);\r\n }\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n : null}\r\n \r\n
\r\n \r\n {this.state.showRelatedItems\r\n ? \r\n : null}\r\n
\r\n - \r\n {this.state.showRelatedItems && this.props.activePart ? this.props.activePart.subParts(true, true).map((subPart, index) => {\r\n if (!subPart.part.translateId) {\r\n console.info(\"Feature Group Translate is missing!\", subPart.part.partId);\r\n }\r\n const layout = getCurrentLayout();\r\n if (!layout.hasNavItemsLength(subPart)) {\r\n return null\r\n }\r\n return (\r\n
- this.handleRelatedItemClick(subPart)}\r\n className={\"menu-select__dropdown-list-item\"\r\n + (this.props.activeSubPart && (this.props.activeSubPart.partName === subPart.text)\r\n ? \" menu-select__dropdown-list-item--active\" : \"\")\r\n + ` menu-select__dropdown-list-item--${subPart.part.partId}`}>\r\n {subPart.part.translateId ?
: null}\r\n \r\n )\r\n }) : this.props.parentItems.map((parentItem, index) => {\r\n if (!parentItem.part.translateId) {\r\n console.info(\"Feature Parent Group translate is missing!\", parentItem.text);\r\n }\r\n return (\r\n - this.handleParentItemClick(parentItem)}\r\n className={\"menu-select__dropdown-list-item\"\r\n + (this.props.activePart && (this.props.activePart.partName === parentItem.text)\r\n ? \" menu-select__dropdown-list-item--active\" : \"\")\r\n + ` menu-select__dropdown-list-item--${parentItem.text.toLowerCase().replace(/ /g,\"_\")}`}>\r\n {parentItem.part.translateId ?
: null}\r\n \r\n )\r\n })}\r\n
\r\n {children(hideOverlay)}\r\n
\r\n )\r\n};\r\n\r\nWithOverlay.propTypes = {\r\n children: PropTypes.any,\r\n className: PropTypes.string,\r\n popupClassName: PropTypes.string,\r\n onClick: PropTypes.func,\r\n}\r\n\r\nexport default WithOverlay\r\n","import workspace from \"../workspace\";\r\nimport {v4 as uuidv4} from \"uuid\";\r\nimport store from \"../../../../../../store\";\r\nimport {addResource, changeResource} from \"../../../../../../actions/sqftResourceFunctions\";\r\nimport {getEdgeFeatures} from \"../../../../helpers/shapeHelper\";\r\nimport {getBacksplashArea, getEdgeArea, getEdgeLength} from \"../../../../helpers/sqftHelper\";\r\nimport {RESOURCE_ATTACHED_TO_TYPE, RESOURCE_TYPE} from \"../../../../constants\";\r\nimport {setSQFTPopup} from \"../../../../../../actions/sqftMenuFunctions\";\r\nimport {getQtCatName} from \"../../../../helpers/sqftQuotesHelper\";\r\nimport sqftConfig from \"../../store/sqftConfig\";\r\n\r\n/**\r\n * Prepare and attach resourceType(edge, backsplash, bumpout, mitered) to the line or lineCorner\r\n * @param {*} seg\r\n * @param {*} segCorner\r\n * @param {*} resourceType\r\n * @param {number} featureId\r\n * @param {string} partId\r\n * @param {*} featureName\r\n * @param height\r\n * @param {string} resourceId\r\n * @param qtCatName\r\n * @param {boolean} addResourceToStore\r\n * @param {boolean} shouldShowEyeBall\r\n */\r\nexport const attachResource = (\r\n seg,\r\n segCorner,\r\n resourceType,\r\n featureId,\r\n partId,\r\n featureName,\r\n height = 0,\r\n resourceId = null,\r\n qtCatName = null,\r\n addResourceToStore = true,\r\n shouldShowEyeBall = true,\r\n) => {\r\n const attachedToHovered = segCorner || seg;\r\n const attachedToExisting = workspace.getAttachedTo(attachedToHovered);\r\n const attachedToResource = prepareResource(seg, segCorner, resourceType, featureId, partId, featureName, resourceId, qtCatName, height, shouldShowEyeBall);\r\n\r\n attachResourceToLine(seg, segCorner, resourceType, featureId, partId, featureName, height, shouldShowEyeBall);\r\n\r\n if (addResourceToStore) {\r\n createAttachedResourceInStore(attachedToExisting, attachedToResource);\r\n }\r\n\r\n closeSQFTPopup();\r\n}\r\n\r\nconst createAttachedResourceInStore = (shouldChangeExisting, attachedToResource) => {\r\n const action = shouldChangeExisting ? changeResource : addResource;\r\n store.dispatch(action(RESOURCE_TYPE.attachedToLine, attachedToResource));\r\n}\r\n\r\nconst attachResourceToLine = (seg, segCorner, resourceType, featureId, partId, featureName, height) => {\r\n let historyCallBack = () => {};\r\n let newSection;\r\n\r\n const resourceActionMap = {\r\n 'edge': (segCorner) ? segCorner.addEdgeToCornerLine.bind(this, featureName, featureId) : seg.addEdgeToLine.bind(this, featureName, featureId),\r\n 'backsplash': (segCorner) ? segCorner.addBacksplashToCornerLine.bind(this, featureName, resourceType, featureId, height) : seg.addBacksplashToLine.bind(this, featureName, resourceType, featureId, height),\r\n [RESOURCE_ATTACHED_TO_TYPE.bumpout]: () => {\r\n if (seg && !seg.isWithBumpout()) seg.addBumpoutToLine();\r\n },\r\n [RESOURCE_ATTACHED_TO_TYPE.mitered]: () => {\r\n if (seg && !seg.isWithMitered()) {\r\n newSection = seg.addMiteredToLine();\r\n if (newSection) workspace.miteredController.addSection(newSection);\r\n }\r\n if (segCorner && !segCorner.isWithMitered()) {\r\n newSection = segCorner.addMiteredToCornerLine();\r\n if (newSection) workspace.miteredController.addSection(newSection);\r\n }\r\n },\r\n [RESOURCE_ATTACHED_TO_TYPE.underlayment]: () => {\r\n if (seg && !seg.isWithMitered()) {\r\n newSection = seg.addUnderlaymentToLine();\r\n if (newSection) workspace.underlaymentController.addSection(newSection);\r\n }\r\n },\r\n [RESOURCE_ATTACHED_TO_TYPE.crown_molding]: () => seg.addCrownMoldingToLine(featureName, featureId),\r\n [RESOURCE_ATTACHED_TO_TYPE.end_cap]: () => seg.addEndCapToLine(featureName, featureId),\r\n };\r\n\r\n if (resourceActionMap[resourceType]) {\r\n historyCallBack = resourceActionMap[resourceType];\r\n }\r\n\r\n historyCallBack();\r\n}\r\n\r\nexport const closeSQFTPopup = () => {\r\n const state = store.getState();\r\n const isSQFTPopupOpened = state.sqftMenuState.sqftPopup.isOpened;\r\n\r\n if (isSQFTPopupOpened) {\r\n store.dispatch(setSQFTPopup({\r\n title: workspace.intl.formatMessage({ id: \"sqft.popup.title.systemMessage\" }),\r\n content: '',\r\n isOpened: false,\r\n confirmCallback: () => {},\r\n confirmText: '',\r\n cancelCallback: () => {},\r\n cancelText: ''\r\n }));\r\n }\r\n}\r\n\r\nconst prepareResource = (seg, segCorner, resourceType, featureId, partId, featureName, resourceId, qtCatName, height, shouldShowEyeBall = true) => {\r\n const attachedToHovered = segCorner || seg;\r\n const id = resourceId || (attachedToHovered && attachedToHovered.id) || uuidv4();\r\n\r\n let attachedToParentId = null;\r\n if (attachedToHovered && attachedToHovered.getParent) {\r\n const parent = attachedToHovered.getParent();\r\n attachedToParentId = parent ? parent.id : null;\r\n }\r\n\r\n return {\r\n id,\r\n type: resourceType,\r\n featureId,\r\n name: featureName,\r\n attachedToId: attachedToHovered ? attachedToHovered.id : null,\r\n partId,\r\n part: segCorner ? 'lineCorner' : 'line',\r\n attachedToParentId,\r\n isDisabledInPopup: attachedToHovered ? attachedToHovered.isDisabledInPopup : null,\r\n qtCatName: qtCatName || getQtCatName(),\r\n shouldShowEyeBall,\r\n height,\r\n\r\n export() {\r\n let length = 0, realLength = 0, lineLength = 0, area = 0;\r\n const line = workspace.getLineOrCornerLineById(this.attachedToId);\r\n\r\n if (line) {\r\n switch (resourceType) {\r\n case RESOURCE_ATTACHED_TO_TYPE.edge: {\r\n const navItems = getEdgeFeatures();\r\n const navItem = navItems.find(edge => edge.part.dbFeature.id === this.featureId);\r\n const feature = navItem ? navItem.part : null;\r\n const unit = feature ? feature.dbFeature.unit : null;\r\n length = (unit && unit.toLowerCase() === \"each\") ? 1 : getEdgeLength(line);\r\n realLength = getEdgeLength(line);\r\n lineLength = sqftConfig.measureUnit === \"Imperial\" ? line.getLineLength() : line.getLineLengthMm();\r\n area = getEdgeArea(line, lineLength, featureId);\r\n break;\r\n }\r\n case RESOURCE_ATTACHED_TO_TYPE.backsplash:\r\n length = getBacksplashArea(line.getBacksplashHeight(), line);\r\n break;\r\n default:\r\n length = realLength = getEdgeLength(line);\r\n break;\r\n }\r\n return { ...this, length, realLength, lineLength, area };\r\n }\r\n\r\n return {};\r\n }\r\n };\r\n};\r\n\r\n","import * as types from \"./actionTypes\";\r\n\r\nexport const setResources = (resourceType, resources) => ({\r\n type: types.SET_RESOURCES,\r\n payload: {resourceType, resources}\r\n});\r\n\r\nexport const addResource = (resourceType, resource) => ({\r\n type: types.ADD_RESOURCE,\r\n payload: {resourceType, resource}\r\n});\r\n\r\nexport const changeResource = (resourceType, resource) => ({\r\n type: types.CHANGE_RESOURCE,\r\n payload: {resourceType, resource}\r\n});\r\n\r\nexport const deleteResource = (resourceType, id) => ({\r\n type: types.DELETE_RESOURCE,\r\n payload: {resourceType, id}\r\n});\r\n\r\nexport const deleteResourceAttachedTo = (resourceType, attachedTo) => ({\r\n type: types.DELETE_RESOURCE_ATTACHED_TO,\r\n payload: {resourceType, attachedTo}\r\n});\r\n\r\nexport const deleteAllResources = () => ({\r\n type: types.DELETE_ALL_RESOURCES,\r\n payload: {}\r\n});\r\n\r\nexport const setSelectedFeature = (selectedFeature) => ({\r\n type: types.SET_SELECTED_FEATURE,\r\n payload: {selectedFeature}\r\n});\r\n\r\nexport const setSelectedPartIds = (selectedPartIds) => ({\r\n type: types.SET_SELECTED_PART_IDS,\r\n payload: {selectedPartIds}\r\n});\r\n","import React, {Component} from 'react';\r\nimport {connect} from \"react-redux\";\r\nimport PropTypes from \"prop-types\";\r\nimport {FormattedMessage} from \"react-intl\";\r\n\r\nimport store from \"../../store\";\r\nimport {toggleUserPopup} from \"../../actions/actionFunctions\";\r\nimport Analytics from './../../analytics';\r\nimport {UserPopupTypes} from \"../visComponents/constants\";\r\nimport {toggleShowAssignQuotePopup} from \"../../actions/assignPopupFunctions\";\r\n\r\nclass UserLoginButton extends Component {\r\n\r\n static propTypes = {\r\n className: PropTypes.string\r\n };\r\n\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n userLogoutActive: false\r\n }\r\n }\r\n\r\n static handleLoginClick = ({\r\n toggleUserPopup, toggleMobileButton = null,\r\n saveQuoteAfterLogin = false, userPopupType = UserPopupTypes.Unlock,\r\n checkout = false\r\n }) => {\r\n const state = store.getState();\r\n const fabricatorSettings = state.fabricatorState.settings;\r\n // console.log(\"state.userState.userIsLoggedIn\", state.userState.userIsLoggedIn);\r\n // console.log(\"state.userState.isPhoneNumberValidated:\", state.userState.isPhoneNumberValidated);\r\n // console.log(\"fabricatorSettings.twoFA:\", fabricatorSettings.twoFA);\r\n if (state.userState.userIsLoggedIn) {\r\n if (fabricatorSettings.twoFA) {\r\n if (!state.userState.isPhoneNumberValidated) {\r\n toggleUserPopup({userPopupOpened: true, saveQuoteAfterLogin, userPopupType, checkout});\r\n return false;\r\n } else {\r\n if (toggleMobileButton) {\r\n toggleMobileButton();\r\n return false;\r\n }\r\n }\r\n } else {\r\n if (toggleMobileButton) {\r\n toggleMobileButton();\r\n return false;\r\n }\r\n }\r\n\r\n return true;\r\n } else {\r\n if (document.kvConfig.isBackend) {\r\n store.dispatch(toggleShowAssignQuotePopup(true));\r\n return false;\r\n }\r\n toggleUserPopup({userPopupOpened: true, saveQuoteAfterLogin, userPopupType, checkout});\r\n if (userPopupType !== UserPopupTypes.NewDesign) {\r\n window.allowClickLeadCapturePopup = false;\r\n }\r\n return false;\r\n }\r\n };\r\n\r\n handleUserLoginClick = (userPopupType = UserPopupTypes.Unlock) => {\r\n Analytics.sendClickEvent('user-login');\r\n UserLoginButton.handleLoginClick({...this.props, toggleMobileButton: this.toggleMobileButton, userPopupType})\r\n };\r\n\r\n toggleMobileButton = () => {\r\n this.setState({\r\n userLogoutActive: !this.state.userLogoutActive\r\n }, () => {\r\n setTimeout(() => {\r\n this.state.userLogoutActive\r\n ? window.addEventListener('click', this.handleDropdownWrapperBlur)\r\n : window.removeEventListener('click', this.handleDropdownWrapperBlur)\r\n }, 0)\r\n })\r\n };\r\n\r\n handleDropdownWrapperBlur = (e) => {\r\n const questionLogout = e.target.closest('[class*=\"scart-content__question\"]');\r\n if (!questionLogout) {\r\n this.toggleMobileButton();\r\n }\r\n };\r\n\r\n handleLogOutButtonClick = (logout) => {\r\n Analytics.sendClickEvent('user-logout');\r\n if (logout) {\r\n this.props.toggleUserPopup({\r\n userPopupOpened: false,\r\n userIsLoggedIn: false,\r\n isPhoneNumberValidated: false\r\n });\r\n }\r\n this.toggleMobileButton()\r\n };\r\n\r\n render() {\r\n return (\r\n \r\n this.handleUserLoginClick()}>\r\n \r\n {this.props.userIsLoggedIn\r\n ? \r\n : }\r\n \r\n \r\n
\r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = (store) => {\r\n return {\r\n userIsLoggedIn: store.userState.userIsLoggedIn,\r\n isPhoneNumberValidated: store.userState.isPhoneNumberValidated,\r\n fabricatorSettings: store.fabricatorState.settings,\r\n };\r\n};\r\n\r\nexport default connect(mapStateToProps, {\r\n toggleUserPopup,\r\n toggleShowAssignQuotePopup\r\n})(UserLoginButton);\r\n","import workspace from \"../../core/workspace\";\r\n\r\nexport class SQFTResourceController {\r\n resourceName = null\r\n\r\n constructor(resourceName) {\r\n this.resourceName = resourceName\r\n }\r\n\r\n getResources() {\r\n return workspace[this.resourceName];\r\n }\r\n\r\n addResource(resource) {\r\n workspace[this.resourceName].push(resource);\r\n\r\n return workspace[this.resourceName];\r\n }\r\n\r\n destroyResource(resource) {\r\n const index = workspace[this.resourceName].indexOf(resource);\r\n if (index > -1) {\r\n resource.destroy();\r\n workspace[this.resourceName].splice(index, 1);\r\n }\r\n\r\n return workspace[this.resourceName];\r\n }\r\n\r\n removeResource = (resource) => {\r\n const index = workspace[this.resourceName].indexOf(resource);\r\n if (index > -1) {\r\n workspace[this.resourceName].splice(index, 1);\r\n }\r\n\r\n return workspace[this.resourceName];\r\n };\r\n\r\n getResourceById(searchedId) {\r\n return workspace[this.resourceName].find(resource => resource.id === searchedId);\r\n }\r\n\r\n removeAllResources() {\r\n for (let resource of workspace[this.resourceName]) {\r\n resource.destroy()\r\n }\r\n workspace[this.resourceName] = [];\r\n }\r\n\r\n exportData() {\r\n const exportedData = [];\r\n for (let resource of workspace[this.resourceName]) {\r\n exportedData.push(resource.export ? resource.export() : resource);\r\n }\r\n return exportedData\r\n }\r\n\r\n importData(data) {\r\n workspace[this.resourceName] = [];\r\n for (let resource of data) {\r\n workspace[this.resourceName].push(resource.import ? resource.import() : resource);\r\n }\r\n }\r\n}\r\n\r\n","import RenderCabinets from \"./renderCabinets\";\r\nimport sqftConfig from \"../store/sqftConfig\";\r\nimport {\r\n getParallelPoints,\r\n getPointBetweenPoints,\r\n getPointOnTheLine,\r\n rotatePoint,\r\n getPointDistance,\r\n measureDistanceToInches, addDecimalToLength\r\n} from \"../../../helpers/sqftHelper\";\r\nimport workspace from \"../core/workspace\";\r\nimport {attachResource} from \"../core/controls/resourseCanas\";\r\nimport {MEASURE_UNITS, RESOURCE_ATTACHED_TO_TYPE} from \"../../../constants\";\r\nimport workspaceControllers from \"../store/workspaceControllers\";\r\nimport {areCollinearAndOverlap, calculateLeg, roundShapePoints} from \"../../../helpers/coordinatesHelper\";\r\nimport {DIRECTIONS} from \"../../../helpers/shapeHelper\";\r\nimport Point from \"../core/shapes/point\";\r\nimport Line from \"../core/shapes/line\";\r\n\r\n/**\r\n * @param line {{}}\r\n * @return {PointV2}\r\n */\r\nexport const getLineCrownMoldingPoints = (line) => {\r\n const linePointsIds = [\r\n line.from.id,\r\n line.to.id,\r\n ]\r\n const shapePoints = line.getParent().getPointsPointField();\r\n\r\n return RenderCabinets.getDiagonalPointsForTheLine(shapePoints, sqftConfig.crownMoldingParams.distance, linePointsIds);\r\n}\r\n\r\n/**\r\n * @param point1 {point}\r\n * @param point2 {point}\r\n * @param outlineDistance {int}\r\n * @return {[]}\r\n */\r\nexport const getLineBordersArrayV1 = (point1, point2, outlineDistance) => {\r\n const pointField1 = point1.getPointField(false);//point1 instanceof PointV2 ? point1.getPointField(false) : getPointField(point1.x, point1.y, point1.getParent());\r\n const pointField2 = point2.getPointField(false);//point2 instanceof PointV2 ? point2.getPointField() : getPointField(point2.x, point2.y, point2.getParent());\r\n const pointOnTheLine = getPointOnTheLine(pointField1, pointField2, outlineDistance);\r\n const pointOnTheLine2 = getPointOnTheLine(pointField2, pointField1, outlineDistance);\r\n return [\r\n rotatePoint(pointField1, pointOnTheLine, 90),\r\n rotatePoint(pointField1, pointOnTheLine, -90),\r\n rotatePoint(pointField2, pointOnTheLine2, 90),\r\n rotatePoint(pointField2, pointOnTheLine2, -90)\r\n ];\r\n}\r\n\r\n/**\r\n * @param point1 {point}\r\n * @param point2 {point}\r\n * @param outlineDistance {int}\r\n * @return {[]}\r\n */\r\nexport const getLineBordersArrayV2 = (point1, point2, outlineDistance) => {\r\n const pointField1 = point1.getPointField(false);//point1 instanceof PointV2 ? point1.getPointField(false) : getPointField(point1.x, point1.y, point1.getParent());\r\n const pointField2 = point2.getPointField(false);//point2 instanceof PointV2 ? point2.getPointField() : getPointField(point2.x, point2.y, point2.getParent());\r\n const [parallelPoint1, parallelPoint2] = getParallelPoints(pointField1, pointField2, outlineDistance);\r\n const [parallelPoint4, parallelPoint3] = getParallelPoints(pointField1, pointField2, -outlineDistance);\r\n return [\r\n parallelPoint1,\r\n parallelPoint2,\r\n parallelPoint3,\r\n parallelPoint4\r\n ];\r\n}\r\n\r\n\r\n/**\r\n * @param from {point}\r\n * @param to {point}\r\n * @param lineThickness {int}\r\n * @return {[]}\r\n */\r\nexport const getBordersOfTwoPoints = (from, to, lineThickness) => {\r\n const lineBorderArray = getLineBordersArrayV2(from, to, lineThickness);\r\n\r\n //console.log(\"lineBorderArray\", lineBorderArray);\r\n let virtualLines = [];\r\n for (const borderPointKey in lineBorderArray) {\r\n const len = lineBorderArray.length;\r\n const currentLineBorderPoint = lineBorderArray[+borderPointKey];\r\n //const previousLineBorderPoint = lineBorderArray[(lineBorderPointIndex + len - 1) % len];\r\n const nextLineBorderPoint = lineBorderArray[(+borderPointKey + 1) % len];\r\n let virtualLine = {\r\n from: {\r\n ...currentLineBorderPoint,\r\n modelCorePoint: {\r\n getPosX: function () { return currentLineBorderPoint.x },\r\n getPosY: function () { return currentLineBorderPoint.y }\r\n },\r\n getPointField: function () { return currentLineBorderPoint }\r\n },\r\n to: {\r\n ...nextLineBorderPoint,\r\n modelCorePoint: {\r\n getPosX: function () { return nextLineBorderPoint.x },\r\n getPosY: function () { return nextLineBorderPoint.y }\r\n },\r\n getPointField: function () { return nextLineBorderPoint }\r\n },\r\n getOffset: () => {\r\n return this.getOffset()\r\n }\r\n }\r\n virtualLines.push(virtualLine);\r\n }\r\n\r\n return virtualLines\r\n}\r\n\r\nexport const addEdgeToTheLines = (shapeId, edge, lineNumbers, shouldShowEyeBall = true) => {\r\n const shape = workspace.getShapeById(shapeId);\r\n const lines = shape.getLines();\r\n\r\n lines.forEach((line, index) => {\r\n if (lineNumbers.includes(index)) {\r\n //line.addEdgeToLine(edge.getFeatureName(), edge.dbFeature.id); // old functional\r\n attachResource(line,\r\n null,\r\n RESOURCE_ATTACHED_TO_TYPE.edge,\r\n edge.dbFeature.id,\r\n null,\r\n edge.getFeatureName(),\r\n 0,\r\n null,\r\n null,\r\n true,\r\n shouldShowEyeBall)\r\n }\r\n })\r\n}\r\n\r\n/**\r\n * Add Edge Without feature for the slab and material calculation\r\n * @param shapeId\r\n * @param lineNumbers\r\n */\r\nexport const addFakeEdgeToLines = (shapeId, lineNumbers) => {\r\n const shape = workspace.getShapeById(shapeId);\r\n const lines = shape.getLines();\r\n\r\n lines.forEach((line, index) => {\r\n if (lineNumbers.includes(index)) {\r\n line.setFakeEdge(true);\r\n }\r\n })\r\n}\r\n\r\nexport const setLineParams = (shapeId, lineNumbers, params) => {\r\n const shape = workspace.getShapeById(shapeId);\r\n const lines = shape.getLines();\r\n\r\n lines.forEach((line, index) => {\r\n if (lineNumbers.includes(index)) {\r\n line.setStateParams(params);\r\n }\r\n })\r\n}\r\n\r\nexport const updateShapeWaterfallLength = (line) => {\r\n const shape = line.getParent();\r\n for (const shapeLine of shape.getLines()) {\r\n if (shapeLine.isWithWaterfallToolEdge() || shapeLine.isWithPeninsulaUnderwrapEdge()) {\r\n workspaceControllers.waterfall.updateWaterfallLength(shapeLine);\r\n }\r\n }\r\n}\r\n\r\nexport const updateMiteredLength = (line) => {\r\n const shape = line.getParent();\r\n for (const shapeLine of shape.getLines()) {\r\n if (shapeLine.isWithMitered()) {\r\n shapeLine.miteredOverlay.setNewLineWidth();\r\n }\r\n }\r\n}\r\n\r\nexport const updateUnderlaymentLength = (line) => {\r\n const shape = line.getParent();\r\n for (const shapeLine of shape.getLines()) {\r\n if (shapeLine.isWithUnderlayment()) {\r\n shapeLine.underlaymentOverlay.setNewLineWidth();\r\n }\r\n }\r\n}\r\n\r\n/**\r\n *\r\n * @param points[]\r\n * @return lines[{}]\r\n */\r\nexport const createSimpleLinesFromPoints = (points) => {\r\n let lines = [];\r\n\r\n for (let i = 0; i < points.length; i++) {\r\n let line = {\r\n from: points[i],\r\n to: points[(i + 1) % points.length]\r\n };\r\n lines.push(line);\r\n }\r\n\r\n return lines;\r\n};\r\n\r\nexport const initAllLineLength = () => {\r\n const lines = workspace.getLines();\r\n for (const line of lines) {\r\n if (line.overlay) {\r\n line.overlay.reInitEvents();\r\n }\r\n }\r\n}\r\n\r\nexport const hideAllLineLength = () => {\r\n const lines = workspace.getLines();\r\n for (const line of lines) {\r\n if (line.overlay) {\r\n line.overlay.deregisterEvents();\r\n }\r\n }\r\n}\r\n\r\nexport const findCollinearLine = (searchLine) => {\r\n const lines = workspace.getLines();\r\n const roundedSearchLinePoints = roundShapePoints([searchLine.from.getPointPosOnWorkspace(), searchLine.to.getPointPosOnWorkspace()]);\r\n for (const testLine of lines) {\r\n const roundedTestPoints = roundShapePoints([testLine.from.getPointPosOnWorkspace(), testLine.to.getPointPosOnWorkspace()]);\r\n if (areCollinearAndOverlap(roundedSearchLinePoints[0], roundedSearchLinePoints[1], roundedTestPoints[0], roundedTestPoints[1], 1)) {\r\n return testLine\r\n }\r\n }\r\n}\r\n\r\nexport const isHorizontalDirection = (lineDirection) => {\r\n return [DIRECTIONS.WEST, DIRECTIONS.EAST].includes(lineDirection)\r\n}\r\n\r\nexport const isVerticalDirection = (lineDirection) => {\r\n return [DIRECTIONS.NORTH, DIRECTIONS.SOUTH].includes(lineDirection)\r\n}\r\n\r\nexport const isWesternHemisphere = (lineDirection) => {\r\n return [DIRECTIONS.WEST, DIRECTIONS.NORTHWEST, DIRECTIONS.NORTH, DIRECTIONS.NORTHEAST].includes(lineDirection);\r\n}\r\n\r\nexport const isEasternHemisphere = (lineDirection) => {\r\n return [DIRECTIONS.EAST, DIRECTIONS.SOUTHWEST, DIRECTIONS.SOUTH, DIRECTIONS.SOUTHEAST].includes(lineDirection);\r\n}\r\n\r\n/**\r\n *\r\n */\r\nexport const getLinesWithoutAnglePoints = (lines) => {\r\n const adjustedLines = [];\r\n\r\n lines.forEach((line) => {\r\n if (line.to.angle > 0 && line.from.angle > 0) {\r\n // Both 'to' and 'from' have angles, adjust both points\r\n const legLengthTo = calculateLeg(line.to.angle);\r\n const legLengthFrom = calculateLeg(line.from.angle);\r\n\r\n // Calculate new points for 'to' and 'from'\r\n const linePosTo = getPointBetweenPoints(line.to, line.from, legLengthFrom, -2);\r\n const linePointTo = new Point(linePosTo.x, linePosTo.y);\r\n\r\n const linePosFrom = getPointBetweenPoints(line.from, line.to, legLengthFrom, -2);\r\n const linePointFrom = new Point(linePosFrom.x, linePosFrom.y);\r\n\r\n // Add current line resized\r\n const cloneLine = { ...line };\r\n cloneLine.to = linePointTo;\r\n cloneLine.from = linePointFrom;\r\n adjustedLines.push(cloneLine);\r\n\r\n // Create adjusted line\r\n const nextLine = line.getParent().getNextLine(line);\r\n const newLinePosFrom = getPointBetweenPoints(nextLine.from, nextLine.to, legLengthTo, -2);\r\n const newLinePointFrom = new Point(newLinePosFrom.x, newLinePosFrom.y);\r\n\r\n adjustedLines.push(new Line(linePointTo, newLinePointFrom, line.getParent()));\r\n\r\n debugger // eslint-disable-line no-debugger\r\n } else if (line.to.angle > 0) {\r\n // Only 'to' has an angle\r\n const legLength = calculateLeg(line.to.angle);\r\n const newLinePosFrom = getPointBetweenPoints(line.to, line.from, legLength, -2);\r\n const newLinePointFrom = new Point(newLinePosFrom.x, newLinePosFrom.y);\r\n\r\n const nextLine = line.getParent().getNextLine(line);\r\n const newLinePosTo = getPointBetweenPoints(nextLine.from, nextLine.to, legLength, -2);\r\n const newLinePointTo = new Point(newLinePosTo.x, newLinePosTo.y);\r\n\r\n // Add current line resized\r\n const cloneLine = { ...line };\r\n cloneLine.to = newLinePointFrom;\r\n adjustedLines.push(cloneLine);\r\n\r\n // Create adjusted line\r\n adjustedLines.push(new Line(newLinePointFrom, newLinePointTo, line.getParent()));\r\n\r\n } else if (line.from.angle > 0) {\r\n // Only 'from' has an angle\r\n const legLength = calculateLeg(line.from.angle);\r\n const newLinePosTo = getPointBetweenPoints(line.from, line.to, legLength, -2);\r\n const newLinePointTo = new Point(newLinePosTo.x, newLinePosTo.y);\r\n\r\n const cloneLine = { ...line };\r\n cloneLine.from = newLinePointTo;\r\n adjustedLines.push(cloneLine);\r\n\r\n } else {\r\n // No angles, add line as is\r\n adjustedLines.push(line);\r\n }\r\n });\r\n\r\n return adjustedLines;\r\n};\r\n\r\n\r\n/**\r\n * Function to find the longest line in an array of lines.\r\n * @param {Array} lines - Array of lines where each line has properties from and to.\r\n * @returns {Object} The longest line object.\r\n */\r\nexport function findLongestLine(lines) {\r\n if (!lines || lines.length === 0) {\r\n return null;\r\n }\r\n\r\n let longestLine = lines[0];\r\n let maxLength = getPointDistance(longestLine.from, longestLine.to);\r\n\r\n lines.forEach(line => {\r\n const length = getPointDistance(line.from, line.to);\r\n if (length > maxLength) {\r\n maxLength = length;\r\n longestLine = line;\r\n }\r\n });\r\n\r\n return longestLine;\r\n}\r\n\r\nexport function getDistanceLength(distance) {\r\n switch (sqftConfig.measureUnit) {\r\n case MEASURE_UNITS.Metric:\r\n return measureDistanceToInches(distance).millimeters\r\n case MEASURE_UNITS.Imperial:\r\n default:\r\n return addDecimalToLength(measureDistanceToInches(distance))\r\n }\r\n}\r\n","import {s3Path} from \"../../misc/utils\";\r\n\r\nexport default class Layer {\r\n zIndex = 0;\r\n\r\n src = '';\r\n\r\n fromS3 = true;\r\n\r\n /**\r\n * @param visualizer {string} bv or kv\r\n * @param zIndex {number}\r\n * @param src {string}\r\n * @param fromS3 {boolean} Whether the layer comes from S3 bucket ir from local resources\r\n */\r\n constructor(visualizer, zIndex = 0, src = '', fromS3 = true) {\r\n this.zIndex = zIndex;\r\n this.src = src;\r\n this.fromS3 = fromS3;\r\n this.visualizer = visualizer;\r\n this.bucketName = \"\";\r\n }\r\n\r\n /**\r\n *\r\n * @returns {{backgroundImage}|*}\r\n */\r\n bgImg(isCropped) {\r\n return this.fromS3 ? s3Path(this.src, this.visualizer, isCropped, this.bucketName) : this.src;\r\n }\r\n\r\n fromS3Binding(s3Binding) {\r\n this.src = s3Binding ? s3Binding.path : null;\r\n this.bucketName = s3Binding ? s3Binding.bucketName : \"\";\r\n }\r\n\r\n /**\r\n *\r\n * @param ar {Array.\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n ) : (\r\n - \r\n
- \r\n
\r\n \r\n {this.state.availableFilterValues.map((filterValueId, index) => {\r\n const filterValueObject = this.state.filterGroup.values.find(val => val.id === filterValueId);\r\n return (\r\n - this.setActiveFilterValue(filterValueId, this.state.filterGroup.id)}>\r\n {filterValueObject.value}\r\n \r\n )\r\n })}\r\n
\r\n
\r\n )\r\n ) : null\r\n }\r\n}\r\n\r\nconst mapStateToProps = (store) => ({\r\n filterGroups: store.filterState.filterGroups,\r\n fabricatorData: store.fabricatorState,\r\n selectedFilters: store.filterState.selectedFilters\r\n});\r\n\r\nconst mapDispatchToProps = (dispatch) => ({\r\n setSelectedFilters: (selectedFilters) => dispatch(actions.setSelectedFilters(selectedFilters)),\r\n});\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(FilterSwitchers);\r\n","import {PartMenuType} from \"../../visComponents/constants\";\r\nimport {iCmp} from \"../../../misc/utils\";\r\nimport Layer from \"../../visComponents/layer\";\r\nimport store from '../../../store';\r\nimport {LayoutType, METADATA} from \"./constants\";\r\nimport PartCommon from \"../../visComponents/partCommon\";\r\n\r\nexport class Part extends PartCommon {\r\n\r\n constructor(isParent, isChild, menuType) {\r\n super();\r\n if (isChild || (isParent && menuType === PartMenuType.Simple)) {\r\n this.featuresList = {};\r\n this.featuresPartsList = {};\r\n this.modulePartsList = {};\r\n Object.keys(LayoutType).forEach(layoutName => {\r\n this.featuresList[layoutName] = [];\r\n this.featuresPartsList[layoutName] = [];\r\n this.modulePartsList[layoutName] = [];\r\n });\r\n this.allFeaturesReceived = false;\r\n this.realFeaturesReceived = false; // this prop is need on Scroll (if features count more that 1000)\r\n this.nextFeaturesPageToLoad = 0;\r\n this.activeFeature = null;\r\n this.placeholderFeature = null;\r\n this.shadowFeature = null;\r\n this.placeholderChanged = false;\r\n this.firstClick = {\r\n \"0\": false\r\n };\r\n this.activeLockedFeature = null;\r\n this.activeNotInVisualizerFeature = null; // is needed to display in the QT selected activeNotInVisualizerFeature, but render proper activeFeature layer(for example, countertop)\r\n // name = \"\";\r\n this.visible = true;\r\n this.categoryEnabled = false;\r\n this.layout = null;\r\n this.featureGroupVisible = true; // dashboard's feature group eye ball logic\r\n this.featureGroupEnabled = true; // dashboard's feature group checkbox logic\r\n this.selectedFeaturesHistory = []; // array of strings(names). updated every time item is selected\r\n this.filtersReceived = null; // array of filters values, comes from BE, for ex [1221, 347, 1124]\r\n }\r\n if (isParent) {\r\n this.partThumbnail = '';\r\n this.relatedItems = [];\r\n }\r\n if (!isChild && !isParent) {\r\n this.dbFeature = null;\r\n this.layer = new Layer(\"kv\");\r\n this._customDisplayName = null;\r\n this.notesList = {};\r\n }\r\n this.partName = \"\";\r\n }\r\n\r\n set features(featuresList) {\r\n // features can't be set directly, we need to change featuresList array\r\n }\r\n get features() {\r\n const layout = this.layout || this.getParent().layout;\r\n return this.featuresList[layout.getCurrentLayoutName()]\r\n }\r\n set featuresParts(featuresList) {\r\n // featuresParts can't be set directly, we need to change featuresPartsList array\r\n }\r\n get featuresParts() {\r\n const layout = this.layout || this.getParent().layout;\r\n return this.featuresPartsList[layout.getCurrentLayoutName()]\r\n }\r\n get moduleParts() {\r\n const layout = this.layout || this.getParent().layout;\r\n return this.modulePartsList[layout.getCurrentLayoutName()]\r\n }\r\n\r\n setGroupFeatures(dbFeaturesArray, pageSize = 1000, setNextPage = true, layoutAbbr = \"\", loadedPage = null, fromSearch = false) {\r\n\r\n super.setGroupFeatures(dbFeaturesArray, pageSize, setNextPage, layoutAbbr, loadedPage, fromSearch)\r\n\r\n if (this.partId === \"edge_profile\" || this.partId === \"center_island_edge\") {\r\n const countertop = this.getParent().countertop;\r\n // console.log('countertop', countertop);\r\n const filterGroups = store.getState().filterState.filterGroups;\r\n const edgeGroup = filterGroups.find(group => group.name === \"Edge\" || group.name === \"Edge Profile\");\r\n if (edgeGroup && countertop) {\r\n Object.keys(this.featuresList).forEach(layoutType => {\r\n for (let i = 0; i < this.featuresList[layoutType].length; i++) {\r\n const feature = this.featuresList[layoutType][i];\r\n if (feature.dbFeature.filterValueIDs[edgeGroup.id]) {\r\n const edgeValue = feature.dbFeature.filterValueIDs[edgeGroup.id][0];\r\n const edgeExist = countertop.featuresList[layoutType].some(countertopFeature => {\r\n return countertopFeature.dbFeature.filterValueIDs[edgeGroup.id]\r\n && countertopFeature.dbFeature.filterValueIDs[edgeGroup.id].includes(edgeValue)\r\n });\r\n if (edgeExist) {\r\n feature.notAvailableInVisualizer = false\r\n }\r\n }\r\n }\r\n });\r\n }\r\n }\r\n }\r\n\r\n /**\r\n * Checks whether a given for condition matches the needed value (or array of values)\r\n * @param name {string}\r\n * @param value {string || array}\r\n * @returns {int} -1 - no such for condition, 0 - no match, 1 - matches\r\n */\r\n matchesMetaForCondition(name, value) {\r\n return this.metaData[name] && this.metaData[name].some(condValue => {\r\n return condValue === METADATA.ALL || (Array.isArray(value) ? value.some(val => iCmp(condValue, val, true)) : iCmp(condValue, value, true))\r\n });\r\n }\r\n\r\n matchesMetaForArrayOfConditions(arrayOfConditions) {\r\n return arrayOfConditions.every((condition) => {\r\n return this.matchesMetaForCondition(condition.propName, condition.propValue);\r\n })\r\n }\r\n}\r\n\r\n\r\n","import React, {Component} from 'react';\r\nimport {connect} from 'react-redux';\r\nimport PropTypes from 'prop-types';\r\nimport findIndex from \"lodash/findIndex\";\r\nimport {FormattedMessage} from \"react-intl\";\r\n\r\nimport * as actions from '../../../../actions/actionFunctions';\r\n\r\nexport const addFilterArrayValue = (array, {filterId, filterGroupId}) => {\r\n let index = findIndex(array, {filterGroupId});\r\n if (index >= 0) {\r\n array.splice(index, 1, {filterId, filterGroupId})\r\n } else {\r\n array.push({filterId, filterGroupId});\r\n }\r\n return array;\r\n};\r\n\r\nclass FilterSelection extends Component {\r\n\r\n static propTypes = {\r\n removeFilterSelection: PropTypes.func.isRequired,\r\n isMobile: PropTypes.bool,\r\n activePart: PropTypes.object\r\n };\r\n\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n availableFilterValues: [],\r\n filterGroup: {}\r\n };\r\n }\r\n\r\n componentDidMount() {\r\n this.setAvailableFiltersValues(this.props);\r\n }\r\n\r\n componentWillReceiveProps(nextProps) {\r\n if (nextProps.activePart && this.props.activePart && nextProps.activePart.partName !== this.props.activePart.partName) {\r\n this.setAvailableFiltersValues(nextProps);\r\n }\r\n }\r\n\r\n componentWillUnmount() {\r\n // this.setDefaultFilterValue();\r\n }\r\n\r\n /**\r\n * Fucntion is needed to find among filterGroups needed group & to return only those filters that has\r\n * at least 1 feature with it assigned\r\n * @param {Array} filterGroups\r\n * @param {String} filterGroupName\r\n * @param {Object} activePart\r\n * @param {Object} fabricatorData\r\n * @param {Array} selectedFilters // example: [{filterId: 1113, filterGroupId: 15}]\r\n * @return {Array} ArrayOf filterIds // example: [1231, 1587, 1596]\r\n */\r\n static getAvailableFilterValues(filterGroups, filterGroupName, activePart, fabricatorData, selectedFilters = []) {\r\n const availableFilterValues = [];\r\n const filterGroup = filterGroups.find(group => group.name === filterGroupName);\r\n if (filterGroup && activePart.featuresList) {\r\n const featuresToFind = (filterGroup.name === \"Inlay Type\") ? activePart.moduleParts : activePart.features;\r\n // console.log(\"featuresToFind\", featuresToFind);\r\n // let missingFilters = {};\r\n featuresToFind.forEach((feature) => {\r\n if (feature.dbFeature.filterValueIDs[filterGroup.id] && selectedFilters.every(filterObject => {\r\n return feature.dbFeature.filterValueIDs[filterObject.filterGroupId]\r\n && feature.dbFeature.filterValueIDs[filterObject.filterGroupId].includes(filterObject.filterId)\r\n })) {\r\n feature.dbFeature.filterValueIDs[filterGroup.id].forEach((filterValue) => {\r\n if (!availableFilterValues.includes(filterValue)) {\r\n // console.log(\"feature with the filter:\", feature);\r\n const fValue = filterGroup.values.find(val => val.id === filterValue);\r\n if (fValue) {\r\n if (fValue.value === \"Slab\") { // we need to look for existing DuraBath Natural Stone features filter\r\n if (!fabricatorData || (fabricatorData && !fabricatorData.isRebath)) {\r\n // const duraBathNaturalStoneFilter = filterGroup.values.find(val => val.value === \"DuraBath Natural Stone\");\r\n // if (!activePart.features.some(testFeature => {\r\n // return testFeature.dbFeature\r\n // && testFeature.dbFeature.filterValueIDs\r\n // && testFeature.dbFeature.filterValueIDs[filterGroup.id]\r\n // && testFeature.dbFeature.filterValueIDs[filterGroup.id].includes(duraBathNaturalStoneFilter.id)\r\n // })) {\r\n // availableFilterValues.push(filterValue)\r\n // }\r\n availableFilterValues.push(filterValue)\r\n }\r\n } else if (fValue.value === \"DuraBath Natural Stone\") {\r\n if (!fabricatorData || (fabricatorData && fabricatorData.isRebath)) {\r\n availableFilterValues.push(filterValue)\r\n }\r\n // const slabFilter = filterGroup.values.find(val => val.value === \"Slab\");\r\n // if (!activePart.features.some.feature(testFeature => {\r\n // return testFeature.dbFeature && testFeature.dbFeature.filterValueIDs\r\n // && feature.dbFeature.filterValueIDs[duraBathNaturalStoneFilter.id]\r\n // })) {\r\n // availableFilterValues.push(filterValue)\r\n // }\r\n } else {\r\n availableFilterValues.push(filterValue)\r\n }\r\n } else {\r\n // if (!missingFilters[filterValue]) {\r\n // missingFilters[filterValue] = [feature]\r\n // } else {\r\n // missingFilters[filterValue].push(feature)\r\n // }\r\n }\r\n }\r\n })\r\n }\r\n });\r\n // if (Object.keys(missingFilters).length) {\r\n // console.error(\"Filter values are missing or wrong filter assigned!\", missingFilters);\r\n // console.info(\"Existing filters\", filterGroup.values);\r\n // }\r\n }\r\n // console.log(\"availableFilterValues\", availableFilterValues);\r\n return availableFilterValues\r\n }\r\n\r\n setAvailableFiltersValues(nextProps = this.props) {\r\n const filterGroup = nextProps.filterGroups.find(group => group.name === nextProps.filterGroupName);\r\n const availableFilterValues = FilterSelection.getAvailableFilterValues(\r\n nextProps.filterGroups, nextProps.filterGroupName, nextProps.activePart, this.props.fabricatorData\r\n );\r\n if (filterGroup) {\r\n this.setState({\r\n availableFilterValues,\r\n filterGroup\r\n })\r\n }\r\n }\r\n\r\n setActiveFilterValue = (filterId, filterGroupId) => {\r\n this.props.setSelectedFilters(addFilterArrayValue([...this.props.selectedFilters], {filterId, filterGroupId}));\r\n this.props.removeFilterSelection();\r\n };\r\n\r\n render() {\r\n\r\n // console.log('parentItem', this.props.parentItem);\r\n // console.log('activePart', this.props.activePart);\r\n // console.log('selectedFilters', this.props.selectedFilters);\r\n // console.log('availableFilterValues:', this.state.availableFilterValues);\r\n // let activeFilterValueId = null;\r\n // if (this.state.availableFilterValues.length && this.state.filterGroup && this.props.selectedFilters.length) {\r\n // const appliedFilter = this.props.selectedFilters.find(filterObj => filterObj.filterGroupId === this.state.filterGroup.id);\r\n // if (appliedFilter) {\r\n // activeFilterValueId = appliedFilter.filterId\r\n // }\r\n // }\r\n\r\n return this.state.availableFilterValues.length ? (\r\n - \r\n
- \r\n \r\n
\r\n \r\n \r\n {this.state.availableFilterValues.map((filterValueId, index) => {\r\n const filterValueObject = this.state.filterGroup.values.find(val => val.id === filterValueId);\r\n return (\r\n - this.setActiveFilterValue(filterValueId, this.state.filterGroup.id)}>\r\n \r\n {filterValueObject.value}\r\n \r\n )\r\n })}\r\n
\r\n
\r\n ) : null\r\n }\r\n}\r\n\r\nconst mapStateToProps = (store) => ({\r\n filterGroups: store.filterState.filterGroups,\r\n fabricatorData: store.fabricatorState,\r\n selectedFilters: store.filterState.selectedFilters\r\n});\r\n\r\nconst mapDispatchToProps = (dispatch) => ({\r\n setSelectedFilters: (selectedFilters) => dispatch(actions.setSelectedFilters(selectedFilters)),\r\n});\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(FilterSelection);\r\n","import React, {useEffect, useState} from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport LoadingSpinner from \"../ui/loadingSpinner\";\r\nimport {featureThumbnailUrl, isIE} from \"../../misc/helpers\";\r\nimport {baseNewImagesPath} from \"../assets\";\r\nimport {THUMBNAIL_SIZES} from \"../../misc/utils\";\r\nimport Config, {IS_LIXIL_UI} from \"../../config\";\r\n\r\nconst FeatureThumbnail = (props) => {\r\n\r\n const {feature, dbFeatureId, isMobile} = props;\r\n const [isLoading, toggleLoader] = useState(true);\r\n const [thumbnailUrl, setThumbnailUrl] = useState(\"\");\r\n const [smallerSizeTried, setSmallerSizeTried] = useState(isIE() || Config.isDevMode()); // if it is ie - set smallerSizeTried to true\r\n\r\n\r\n const setBaseThumbnail = () => {\r\n const size = isMobile && IS_LIXIL_UI\r\n ? THUMBNAIL_SIZES.small\r\n : isIE() || Config.isDevMode() ? THUMBNAIL_SIZES.medium : THUMBNAIL_SIZES.large\r\n const baseThumbnail = featureThumbnailUrl(feature, size) // if it is ie - set small Thumbnails by the default\r\n setThumbnailUrl(baseThumbnail || `${baseNewImagesPath}images/image-not-found.png`);\r\n return baseThumbnail;\r\n }\r\n\r\n useEffect(() => {\r\n toggleLoader(true);\r\n setSmallerSizeTried(isIE() || Config.isDevMode());\r\n setBaseThumbnail();\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [dbFeatureId])\r\n\r\n const onImageLoadError = () => {\r\n if (isMobile || smallerSizeTried) {\r\n setThumbnailUrl(`${baseNewImagesPath}images/image-not-found.png`);\r\n } else if (!smallerSizeTried) {\r\n toggleLoader(true);\r\n setThumbnailUrl(featureThumbnailUrl(feature, THUMBNAIL_SIZES.medium))\r\n setSmallerSizeTried(true)\r\n }\r\n };\r\n\r\n if (!thumbnailUrl && smallerSizeTried) { // no need to load anything, show not found\r\n return (\r\n - \r\n
- \r\n
\r\n \r\n {this.state.availableFilterValues.map((filterValueId, index) => {\r\n const filterValueObject = this.state.filterGroup.values.find(val => val.id === filterValueId);\r\n return (\r\n - this.setActiveFilterValue(filterValueId, this.state.filterGroup.id)}>\r\n \r\n
\r\n \r\n \r\n )\r\n })}\r\n
\r\n 
\r\n
\r\n )\r\n }\r\n\r\n return (\r\n \r\n \r\n {thumbnailUrl\r\n ? 
{\r\n toggleLoader(false);\r\n }}\r\n onError={onImageLoadError}\r\n alt=\"\"/>\r\n : null}\r\n {isLoading ?
\r\n )\r\n};\r\n\r\nFeatureThumbnail.propTypes = {\r\n feature: PropTypes.object.isRequired,\r\n isMobile: PropTypes.bool,\r\n};\r\n\r\nexport default FeatureThumbnail\r\n","import store from \"../store\";\r\nimport {getCommonVisualizerType} from \"../config\";\r\n\r\n/**\r\n *\r\n * @param feature {featureInterface} (object which has dbFeature property)\r\n * @param cartItems {[cartItemInterface]}\r\n * @param currentQuote {number}\r\n * @param allWizardsValues {array}\r\n * @return {object} // {quantity, isMatching}\r\n */\r\nexport default function featureIsMatchingDisplayLogic(feature, cartItems = [], currentQuote = 0, allWizardsValues) {\r\n\r\n let visible = feature.dbFeature.displayLogic.action === \"show\";\r\n let quantity = 0;\r\n const displayRules = feature.dbFeature.displayRules;\r\n\r\n if (Array.isArray(displayRules) && displayRules.length) {\r\n\r\n const currentQuoteCartItems = cartItems.filter(cItem => cItem.currentQuote === currentQuote);\r\n let visibleUpdated = false; // we need to rewrite this, when we have time\r\n\r\n for (let i = 0; i < displayRules.length; i++) {\r\n const rule = displayRules[i];\r\n let entityVal = 0;\r\n // if (!rule) {\r\n // console.log(\"feature\", feature);\r\n // }\r\n if (rule && rule.entityId) {\r\n if (rule.entityId === -1) { // Material (should look for added Countertops value)\r\n let countertopCount = 0;\r\n currentQuoteCartItems.forEach((cartItem) => {\r\n if (cartItem.partId.includes(\"countertop\")) {\r\n countertopCount += cartItem.quantity;\r\n }\r\n });\r\n entityVal = countertopCount\r\n } else {\r\n const matchingCartItem = currentQuoteCartItems.find((cartItem) => {\r\n return rule.entityId === cartItem.cartFeature.dbFeature.id\r\n });\r\n if (matchingCartItem) {\r\n entityVal = matchingCartItem.quantity\r\n }\r\n }\r\n let result = true;\r\n const\r\n entVal = parseInt(entityVal),\r\n ruleVal = parseInt(rule.value);\r\n switch (rule.comparison) {\r\n case \"<\":\r\n result = (entVal === 0 && ruleVal === 0 ) ? true : entVal < ruleVal;\r\n break;\r\n case \"<=\":\r\n result = entVal <= ruleVal;\r\n break;\r\n case \"=\":\r\n result = entVal === ruleVal;\r\n break;\r\n case \">\":\r\n result = entVal > ruleVal;\r\n break;\r\n case \">=\":\r\n result = entVal >= ruleVal;\r\n break;\r\n case \"wizard\":\r\n result = allWizardsValues && allWizardsValues.some(wizObject => {\r\n return wizObject.quoteIndex === currentQuote && wizObject.wizardSelectedValues\r\n && Object.keys(wizObject.wizardSelectedValues).some(key => {\r\n return wizObject.wizardSelectedValues[key].selectedFeature\r\n && wizObject.wizardSelectedValues[key].selectedFeature.dbFeature.id === rule.entityId\r\n })\r\n });\r\n break;\r\n }\r\n if (!result) {\r\n if (!visibleUpdated) {\r\n visible = !visible;\r\n visibleUpdated = true;\r\n }\r\n quantity = quantity + entityVal;\r\n }\r\n }\r\n }\r\n }\r\n if (visible && !quantity) {\r\n quantity = 1;\r\n }\r\n return {quantity, isMatching: visible};\r\n}\r\n\r\n/**\r\n *\r\n * @param feature {object} (object which has dbFeature property)\r\n * @param propertyName {string}\r\n * @param originalValue {any}\r\n * @param fromQtCategory {string} (cart feature should be calculated from the category it was added)\r\n * @return {number}\r\n */\r\nexport const checkIfInCatProperty = (feature, propertyName, originalValue, fromQtCategory) => {\r\n const finalValue = (typeof originalValue !== \"undefined\") ? originalValue : feature.dbFeature[propertyName];\r\n if (feature.inCatProperties && fromQtCategory && feature.inCatProperties.hasOwnProperty(fromQtCategory)\r\n && feature.inCatProperties[fromQtCategory].hasOwnProperty(propertyName)) {\r\n if (propertyName === \"inCatPrice\") {\r\n const {settings} = store.getState().fabricatorState;\r\n if (settings.showSalePrices && (typeof feature.inCatProperties[fromQtCategory].inCatFabCost == \"number\")) {\r\n return feature.inCatProperties[fromQtCategory].inCatFabCost\r\n }\r\n return (typeof feature.inCatProperties[fromQtCategory].inCatCost === \"number\")\r\n ? feature.inCatProperties[fromQtCategory].inCatCost\r\n : (typeof feature.inCatProperties[fromQtCategory].inCatPrice === \"number\")\r\n ? feature.inCatProperties[fromQtCategory].inCatPrice\r\n : finalValue\r\n }\r\n return feature.inCatProperties[fromQtCategory][propertyName] // inCatValue\r\n }\r\n return finalValue;\r\n}\r\n\r\n/**\r\n * returns old dbFeature property name for displaying/hiding the feature\r\n * @param forPage {string} quotingTool || visualizer\r\n * @param visualizerType {string}\r\n * @return {string}\r\n */\r\nexport const getOldHidePropertyName = (forPage = \"quotingTool\", visualizerType = getCommonVisualizerType()) => {\r\n let hidePropertyName = \"\";\r\n switch (visualizerType) {\r\n case \"kitchen\":\r\n hidePropertyName = (forPage === \"quotingTool\") ? \"hideFromFrontEnd\" : \"hideFromKitchenVisualizer\";\r\n break;\r\n case \"bathroom\":\r\n hidePropertyName = (forPage === \"quotingTool\") ? \"hideFromBVQT\" : \"hideFromBathroomVisualizer\";\r\n break;\r\n default:\r\n break;\r\n }\r\n return hidePropertyName\r\n}\r\n\r\n/**\r\n * common function for displaying/hiding the feature\r\n * @param feature {featureInterface}\r\n * @param forPage {string} quotingTool || visualizer\r\n * @param fromQtCategory {string} for specific category\r\n * @param visualizerType {string} for specific visualizerType\r\n * @return {boolean}\r\n */\r\nexport const isFeatureEnabled = (feature, forPage = \"quotingTool\", fromQtCategory = \"\", visualizerType = getCommonVisualizerType()) => {\r\n\r\n // if (feature.dbFeature.sharedFeatureName === \"53010 1 American Standard Ceramic\") { // for testing\r\n // debugger;//eslint-disable-line\r\n // }\r\n\r\n const hidePropertyName = getOldHidePropertyName(forPage, visualizerType);\r\n\r\n if (feature.inCatProperties && fromQtCategory && feature.inCatProperties.hasOwnProperty(fromQtCategory)\r\n && feature.inCatProperties[fromQtCategory].hasOwnProperty(hidePropertyName)) {\r\n return !feature.inCatProperties[fromQtCategory][hidePropertyName]\r\n }\r\n\r\n const toolSettings = feature.dbFeature.toolSettings;\r\n if (Array.isArray(toolSettings) && toolSettings.length) {\r\n const checkProperty = forPage === \"quotingTool\" ? \"enableQuotingTool\" : \"enableVisualizer\";\r\n return toolSettings.some(toolSettingsObject => toolSettingsObject.tool === visualizerType && toolSettingsObject[checkProperty])\r\n }\r\n\r\n return !feature.dbFeature[hidePropertyName]\r\n}\r\n\r\nconst setFabricatorFeatureCategoriesProperties = (feature) => {\r\n if (Array.isArray(feature.dbFeature.fabricatorFeatureCategories) && feature.dbFeature.fabricatorFeatureCategories.length && !feature.fabricatorFeatureCategoriesPropertiesAreSet) {\r\n const parent = feature.getParent();\r\n const layout = parent.layout || parent.getParent().layout; // Floor & ceiling doesn't have getParent() function\r\n if (layout.qtCategoriesList && parent.qtCategoryName) { // do not change to qtCategory since there will be a Maximum call stack\r\n if (!feature.inCatProperties) {\r\n feature.inCatProperties = {};\r\n }\r\n Object.keys(parent.qtCatProperties).forEach(qtCatName => {\r\n const inCat = layout.qtCategoriesList.find(qtCat => qtCat.name === qtCatName);\r\n if (!inCat) {\r\n return\r\n }\r\n for (let i = 0; i < feature.dbFeature.fabricatorFeatureCategories.length; i++) {\r\n const currentFabricatorFeatureCategory = feature.dbFeature.fabricatorFeatureCategories[i];\r\n if (currentFabricatorFeatureCategory.fabricatorFeatureCategoryId === inCat.id) {\r\n if (!feature.inCatProperties[qtCatName]) {\r\n feature.inCatProperties[qtCatName] = {};\r\n }\r\n if (currentFabricatorFeatureCategory.price !== null) {\r\n feature.inCatProperties[qtCatName].inCatPrice = currentFabricatorFeatureCategory.price;\r\n }\r\n if (currentFabricatorFeatureCategory.cost !== null) {\r\n feature.inCatProperties[qtCatName].inCatCost = currentFabricatorFeatureCategory.cost;\r\n }\r\n if (currentFabricatorFeatureCategory.fabricatorCost !== null) {\r\n feature.inCatProperties[qtCatName].inCatFabCost = currentFabricatorFeatureCategory.fabricatorCost; // not used for now\r\n }\r\n if (currentFabricatorFeatureCategory.displayName !== null) {\r\n feature.inCatProperties[qtCatName].inCatName = currentFabricatorFeatureCategory.displayName;\r\n }\r\n if (currentFabricatorFeatureCategory.complexLogic) {\r\n feature.inCatProperties[qtCatName].complexLogic = currentFabricatorFeatureCategory.complexLogic;\r\n }\r\n if (Array.isArray(currentFabricatorFeatureCategory.toolSettings) && currentFabricatorFeatureCategory.toolSettings.length) {\r\n const bvSetting = currentFabricatorFeatureCategory.toolSettings.find(setting => setting.tool === \"bathroom\");\r\n const kvSetting = currentFabricatorFeatureCategory.toolSettings.find(setting => setting.tool === \"kitchen\");\r\n if (bvSetting) {\r\n feature.inCatProperties[qtCatName].hideFromBathroomVisualizer = !bvSetting.enableVisualizer;\r\n feature.inCatProperties[qtCatName].hideFromBVQT = !bvSetting.enableQuotingTool;\r\n }\r\n if (kvSetting) {\r\n feature.inCatProperties[qtCatName].hideFromKitchenVisualizer = !kvSetting.enableVisualizer;\r\n feature.inCatProperties[qtCatName].hideFromFrontEnd = !kvSetting.enableQuotingTool;\r\n }\r\n } else { // old logic\r\n // feature.inCatProperties[qtCatName].hideFromBathroomVisualizer = currentFabricatorFeatureCategory.hideFromBV;\r\n feature.inCatProperties[qtCatName].hideFromBathroomVisualizer\r\n = feature.dbFeature.fabricatorFeatureCategories.every(fCat => fCat.hideFromBV) && feature.dbFeature.hideFromBV; // hide feature from visualizer only if it is disabeld everywhere\r\n feature.inCatProperties[qtCatName].hideFromBVQT = currentFabricatorFeatureCategory.hideFromBVQT;\r\n // feature.inCatProperties[qtCatName].hideFromKitchenVisualizer = currentFabricatorFeatureCategory.hideFromKV;\r\n feature.inCatProperties[qtCatName].hideFromKitchenVisualizer =\r\n feature.dbFeature.fabricatorFeatureCategories.every(fCat => fCat.hideFromKV) && feature.dbFeature.hideFromKV; // hide feature from visualizer only if it is disabeld everywhere\r\n feature.inCatProperties[qtCatName].hideFromFrontEnd = currentFabricatorFeatureCategory.hideFromKVQT;\r\n }\r\n break;\r\n }\r\n }\r\n });\r\n feature.fabricatorFeatureCategoriesPropertiesAreSet = true;\r\n }\r\n }\r\n return feature\r\n}\r\n\r\nexport const isVisibleForNavigation = (feature, withQuotingToolFeatures, forActiveQTCategory = \"\") => {\r\n\r\n if (!feature || !feature.dbFeature) { // 1) check for something unexpected (just in case)\r\n return false\r\n }\r\n\r\n feature = setFabricatorFeatureCategoriesProperties(feature); // 2) set properties from fabricatorFeatureCategories\r\n\r\n if (feature.dbFeature.autoAddToCart) {\r\n return document.kvConfig.userId === 157678 //hardcode https://tshopinc.quotekitchenandbath.com/kitchen?mode=dashboard they should have labor feature displayed\r\n } else if (withQuotingToolFeatures && (withQuotingToolFeatures !== \"all\") // for look and product journey - we show all features\r\n && !isFeatureEnabled(feature, \"quotingTool\", forActiveQTCategory)) {\r\n return false\r\n } else if (withQuotingToolFeatures && (withQuotingToolFeatures === \"all\") // for look and product journey - we show all features (enabled)\r\n && !isFeatureEnabled(feature, \"quotingTool\", forActiveQTCategory)\r\n && !isFeatureEnabled(feature, \"visualizer\", forActiveQTCategory)) {\r\n return false\r\n } else if (feature.dbFeature.displayLogic) {\r\n const storeState = store.getState();\r\n return featureIsMatchingDisplayLogic(\r\n feature,\r\n storeState.cartState.cartItems,\r\n storeState.quotesState.activeQuoteIndex,\r\n storeState.wizardState.allWizardsValues,\r\n )\r\n }\r\n return true\r\n};\r\n","import React from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport {FormattedMessage} from \"react-intl\";\r\n\r\nimport store from \"../../store\";\r\nimport {showSuccessNotification} from \"../../actions/actionFunctions\";\r\n\r\nclass SuccessNotification extends React.Component {\r\n\r\n state = {\r\n opened: false,\r\n isHiding: false\r\n }\r\n\r\n componentWillReceiveProps(nextProps) {\r\n if (nextProps.successNotification.show && !this.props.successNotification.show) {\r\n setTimeout(() => { // let it render first\r\n this.setState({\r\n opened: true\r\n })\r\n }, 0)\r\n } else if (!nextProps.successNotification.show && this.props.successNotification.show) {\r\n this.setState({\r\n isHiding: true,\r\n opened: false\r\n }, () => {\r\n setTimeout(() => {\r\n this.setState({\r\n isHiding: false\r\n })\r\n }, 500)\r\n })\r\n }\r\n }\r\n\r\n render() {\r\n const {show, icon, title, message} = this.props.successNotification;\r\n\r\n return show || this.state.isHiding ? (\r\n \r\n
\r\n ) : null;\r\n }\r\n\r\n}\r\n\r\nconst mapStateToProps = (store) => {\r\n return {\r\n successNotification: store.serverState.successNotification,\r\n };\r\n};\r\n\r\nexport default connect(mapStateToProps, {})(SuccessNotification);\r\n\r\nexport const showQuoteSavedNotification = (title = \"successNotification.titleQuoteSaved\") => {\r\n if (document.kvConfig.visualizerOnly && (title === \"successNotification.titleQuoteSaved\")) {\r\n title = \"successNotification.titleDesignSaved\";\r\n }\r\n if (store.getState().serverState.successNotification) {\r\n window.clearTimeout(window.saveQuoteTimeoutId);\r\n store.dispatch(showSuccessNotification({\r\n show: false\r\n }));\r\n }\r\n store.dispatch(showSuccessNotification({\r\n show: true,\r\n icon: \"calculate\",\r\n title,\r\n message: \"successNotification.messageQuoteSaved\"\r\n }));\r\n window.saveQuoteTimeoutId = setTimeout(() => {\r\n store.dispatch(showSuccessNotification({\r\n show: false\r\n }));\r\n }, 3000)\r\n}\r\n","import store from \"../store\";\r\nimport enhanceCanvas from \"../bvcomponents/visComponents/canvasEnhancements\";\r\nimport Misc from \"./misc\";\r\nimport {IS_LIXIL_UI} from \"../config\";\r\n\r\nconst createCanvas = (width, height) => {\r\n const canvas = document.createElement('canvas');\r\n canvas.width = width;\r\n canvas.height = height;\r\n let backCtx = canvas.getContext('2d');\r\n // backCtx.fillStyle = \"#FFFFFF\";\r\n // backCtx.fillRect(0, 0, canvas.width, canvas.height);\r\n return {canvas, backCtx}\r\n}\r\n\r\nconst finishDraw = async (images, errorImages, layers, size = null, backgroundLayers = [], quality, useNewEnhance = false) => {\r\n\r\n //0) delete images that couldn't be loaded\r\n if (errorImages && errorImages.length) {\r\n images = images.filter(image => image && image.src && !errorImages.includes(image.src));\r\n }\r\n\r\n const width = size ? size.width : 720; // 1920\r\n const height = size ? size.height : 405; // 1080\r\n const maxWidth = 1920;\r\n const maxHeight = 1080;\r\n\r\n // 1) create canvas\r\n const canvasObject1 = createCanvas(width, height);\r\n canvasObject1.backCtx.fillStyle = \"#FFFFFF\";\r\n canvasObject1.backCtx.fillRect(0, 0, canvasObject1.canvas.width, canvasObject1.canvas.height);\r\n const canvasObject3 = createCanvas(maxWidth, maxHeight); // for crops\r\n\r\n // 2) put all background layout layers\r\n if (backgroundLayers.length) {\r\n const canvasObject2 = createCanvas(width, height);\r\n canvasObject2.backCtx.globalCompositeOperation = \"lighten\";\r\n images.forEach((imageObject) => {\r\n const layer = backgroundLayers.find(layer => layer.image === imageObject.src);\r\n if (layer) {\r\n if (layer.cropCoords && (document.kvConfig.visualizerType !== \"kvScene\")) {\r\n canvasObject3.backCtx.clearRect(0, 0, maxWidth, maxHeight);\r\n let layerWidth = layer.cropCoords[2] - layer.cropCoords[0];\r\n let layerHeight = layer.cropCoords[3] - layer.cropCoords[1];\r\n canvasObject3.backCtx.drawImage(imageObject, 0, 0, layerWidth, layerHeight, layer.cropCoords[0], layer.cropCoords[1], layerWidth, layerHeight);\r\n canvasObject3.backCtx.drawImage(canvasObject3.canvas, 0, 0, maxWidth, maxHeight,0, 0, width, height);\r\n } else if (layer.layerDimensions) {\r\n const dim = layer.layerDimensions;\r\n // console.log('yep', dim.width, dim.height, dim.polygonArray[0][0], dim.polygonArray[0][1], dim.width, dim.height);\r\n canvasObject2.backCtx.drawImage(imageObject, 0, 0, dim.width, dim.height, dim.polygonArray[0][0], dim.polygonArray[0][1], dim.width, dim.height);\r\n } else {\r\n imageObject.width = width;\r\n imageObject.height = height;\r\n canvasObject2.backCtx.drawImage(imageObject, 0, 0, width, height);\r\n }\r\n }\r\n });\r\n enhanceCanvas(canvasObject2.canvas, useNewEnhance);\r\n canvasObject1.backCtx.drawImage(canvasObject2.canvas, 0, 0, width, height, 0, 0, width, height);\r\n }\r\n\r\n // 3) put all layout layers\r\n for (const loadedImage of images) {\r\n const layer = layers.find(layers => layers.image === loadedImage.src);\r\n if (layer && backgroundLayers.every(layer => layer.image !== loadedImage.src)) {\r\n if (layer.cropCoords) {\r\n canvasObject3.backCtx.clearRect(0, 0, maxWidth, maxHeight);\r\n let layerWidth = layer.cropCoords[2] - layer.cropCoords[0];\r\n let layerHeight = layer.cropCoords[3] - layer.cropCoords[1];\r\n canvasObject3.backCtx.drawImage(loadedImage, 0, 0, layerWidth, layerHeight, layer.cropCoords[0], layer.cropCoords[1], layerWidth, layerHeight);\r\n await canvasObject1.backCtx.drawImage(canvasObject3.canvas, 0, 0, maxWidth, maxHeight,0, 0, width, height);\r\n // } else if (loadedImage.layerDimensions) {\r\n // console.log(\"loadedImage layerDimensions\", loadedImage.layerDimensions, loadedImage.src);\r\n // const dim = loadedImage.layerDimensions;\r\n // // console.log('yep', dim.width, dim.height, dim.polygonArray[0][0], dim.polygonArray[0][1], dim.width, dim.height);\r\n // canvasObject1.backCtx.drawImage(loadedImage, 0, 0, dim.width, dim.height, dim.polygonArray[0][0], dim.polygonArray[0][1], dim.width, dim.height);\r\n // } else if (loadedImage.coords) {\r\n // const min_x = width*loadedImage.coords.min_x;\r\n // const min_y = height*loadedImage.coords.min_y;\r\n // canvasObject1.backCtx.drawImage(loadedImage, 0, 0, loadedImage.width, loadedImage.height, min_x, min_y, loadedImage.width, loadedImage.height);\r\n } else {\r\n loadedImage.width = width;\r\n loadedImage.height = height;\r\n await canvasObject1.backCtx.drawImage(loadedImage, 0, 0, width, height);\r\n }\r\n if (Misc.isMobile() && IS_LIXIL_UI) { // we have to add some time for mobile safari, because of the process stuck\r\n await new Promise(resolve => setTimeout(resolve, 100));\r\n }\r\n }\r\n }\r\n // return canvas.toDataURL('image/png') // the size is 5.8Mb -- too much, let's use jpeg - it's only 600Kb\r\n return canvasObject1.canvas.toDataURL(\"image/jpeg\", quality)\r\n};\r\n\r\nconst getSubscriptionThumbnail = () => {\r\n const fabricatorState = store.getState().fabricatorState;\r\n if (fabricatorState.fabricatorSubscriptions) {\r\n let thumbnail = \"\";\r\n fabricatorState.fabricatorSubscriptions.forEach((subscription) => {\r\n if (subscription.thumbnail) {\r\n thumbnail = subscription.thumbnail\r\n }\r\n });\r\n return thumbnail\r\n }\r\n return \"\"\r\n}\r\n\r\n/**\r\n * A PROMISE! Returns the whole canvas image\r\n * @param layout\r\n * @param size\r\n * @param quality {number}\r\n * @param useNewEnhance {boolean}\r\n */\r\nexport const getImagePromiseFromLayout = (layout, size = null, quality = 0.7, useNewEnhance = false) => {\r\n if (!layout) {\r\n return Promise.resolve(getSubscriptionThumbnail())\r\n }\r\n const showPlaceHolders = document.bvConfig ? document.bvConfig.showPlaceholders : false;\r\n\r\n const layers = layout.getLayers(showPlaceHolders, true);\r\n if (!layers.length) {\r\n return Promise.resolve(getSubscriptionThumbnail())\r\n }\r\n\r\n const backGroundLayers = getBackgroundLayers(layers, layout);\r\n let imagesPromise = new Promise((resolve) => {\r\n let cnt = 0;\r\n const images = [];\r\n const errorImages = [];\r\n layers.forEach((layer) => {\r\n const image = new Image();\r\n image.crossOrigin = 'Anonymous';\r\n image.layerDimensions = layer.layerDimensions || null;\r\n image.coords = layer.coords || null;\r\n images.push(image);\r\n image.onload = () => {\r\n cnt++;\r\n if (cnt === layers.length) {\r\n resolve(finishDraw(images, errorImages, layers, size, backGroundLayers, quality, useNewEnhance))\r\n }\r\n };\r\n image.onerror = () => {\r\n //display error\r\n console.error('Coudn\\'t load image:', image.src);\r\n cnt++;\r\n errorImages.push(image.src);\r\n if (cnt === layers.length) {\r\n resolve(finishDraw(images, errorImages, layers, size, backGroundLayers, quality, useNewEnhance))\r\n }\r\n };\r\n try {\r\n image.src = layer.image;\r\n } catch (e) {\r\n console.log(e, 'Can\\'t apply image src', layer.image);\r\n }\r\n });\r\n });\r\n return imagesPromise.then(response => response)\r\n};\r\n\r\n/**\r\n * @param layers {array}\r\n * @param layout {object}\r\n * @param newLayoutType {boolean}\r\n * @returns layersArray {array}\r\n */\r\nexport const getBackgroundLayers = (layers, layout, newLayoutType = false) => {\r\n if ((layout && layout.isNewLayout) || newLayoutType) {\r\n return layers.filter((layer) => layer.zIndex >= 50000)\r\n }\r\n if (!layout) { // just in case\r\n return []\r\n }\r\n const name = layout.getCurrentLayoutName();\r\n return layers.filter((layer) => {\r\n return layout.zIndexes[name] && layout.zIndexes[name].Background &&\r\n Object.values(layout.zIndexes[name].Background).some(zIndex => zIndex === layer.zIndex);\r\n })\r\n};\r\n","import React, {Component} from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport {connect} from 'react-redux';\r\nimport $ from \"jquery\";\r\nimport {FormattedMessage, injectIntl} from \"react-intl\";\r\n\r\nimport {setCountertopsApplyTo, setCountertopsApplyToBathroom} from \"../../../actions/navigationFunctions\";\r\nimport {getCurrentLayout} from \"../../appLayout\";\r\nimport {loaderDisable, loaderEnable} from \"../../ui/loaderView\";\r\nimport Navigation from \"../../visComponents/navigation/navigation\";\r\nimport ActionTypes from \"../../../misc/actionTypes\";\r\nimport store from \"../../../store\";\r\nimport {COUNTERTOP_GROUP} from \"../core/constants\";\r\nimport UiSelect from \"../../ui/select\";\r\nimport Analytics from '../../../analytics';\r\nimport {COUNTERTOP_GROUP_BATHROOM} from \"../../bvSceneComponent/core/constants\";\r\nimport {getFeatureGroupName} from \"../../../misc/helpers\";\r\nimport {updateCanvasCount} from \"../../../actions/actionFunctions\";\r\nimport {getCommonVisualizerType} from \"../../../config\";\r\nimport {featureHasSelectedFilters, getAllFeatureFilters, getFilterGroupValues} from \"../../../misc/utils\";\r\n\r\nconst getIsBathroom = () => {\r\n return getCommonVisualizerType() === \"bathroom\"\r\n};\r\n\r\nclass CountertopSwitchers extends Component {\r\n\r\n static propTypes = {\r\n activeSubPart: PropTypes.object.isRequired,\r\n isMobile: PropTypes.bool,\r\n isMaterials: PropTypes.bool,\r\n showAsDropdown: PropTypes.bool,\r\n };\r\n\r\n componentDidMount() {\r\n this.setToggledByUserProperty(this.props);\r\n }\r\n\r\n componentWillReceiveProps(nextProps) {\r\n if (nextProps.activeSubPart.partId !== this.props.activeSubPart.partId) {\r\n this.setToggledByUserProperty(nextProps);\r\n }\r\n }\r\n\r\n setToggledByUserProperty = (props) => {\r\n const currentCategoryPartId = props.activeSubPart.partId;\r\n\r\n const isBathroom = getIsBathroom();\r\n\r\n const COUNTERTOPGROUPS = isBathroom ? COUNTERTOP_GROUP_BATHROOM : COUNTERTOP_GROUP;\r\n const applyTo = isBathroom ? this.props.countertopsApplyToBathroom : this.props.countertopsApplyTo;\r\n\r\n COUNTERTOPGROUPS.forEach(partId => {\r\n if (partId === currentCategoryPartId) {\r\n if (COUNTERTOPGROUPS.some(newPartId => {\r\n return (newPartId !== currentCategoryPartId) && !applyTo[newPartId].includes(currentCategoryPartId)\r\n })) {\r\n props.activeSubPart.toggleSwitchedOffByUser = true;\r\n }\r\n } else {\r\n if (!applyTo[partId].includes(currentCategoryPartId)) {\r\n const neededSubPart = getCurrentLayout().getSubPartByPartId(partId);\r\n if (neededSubPart) {\r\n neededSubPart.part.toggleSwitchedOffByUser = true;\r\n }\r\n }\r\n }\r\n });\r\n };\r\n\r\n getUpdatedCountertopSwitcherButtons = (partId) => {\r\n const applyTo = getIsBathroom() ? this.props.countertopsApplyToBathroom : this.props.countertopsApplyTo;\r\n let countertopsApplyTo = applyTo[this.props.activeSubPart.partId];\r\n const existingIndex = countertopsApplyTo.findIndex(countertopsApplyToPartId => countertopsApplyToPartId === partId);\r\n if (existingIndex > -1) {\r\n countertopsApplyTo.splice(existingIndex, 1)\r\n } else {\r\n countertopsApplyTo.push(partId)\r\n }\r\n let countertopsApplyTo2 = applyTo[partId];\r\n const existingIndex2 = countertopsApplyTo2.findIndex(countertopsApplyToPartId => countertopsApplyToPartId === this.props.activeSubPart.partId);\r\n if (existingIndex > -1) {\r\n countertopsApplyTo2.splice(existingIndex2, 1)\r\n } else {\r\n countertopsApplyTo2.push(this.props.activeSubPart.partId)\r\n }\r\n this.setToggleOffProperies(partId, countertopsApplyTo, countertopsApplyTo2);\r\n return {\r\n [this.props.activeSubPart.partId]: countertopsApplyTo,\r\n [partId]: countertopsApplyTo2\r\n }\r\n };\r\n\r\n static updateCountertopSwitcherButtons = (partId, currentGroupPartId, propsCountertopsApplyTo = {}) => {\r\n let countertopsApplyTo = propsCountertopsApplyTo[currentGroupPartId];\r\n const existingIndex = countertopsApplyTo.findIndex(countertopsApplyToPartId => countertopsApplyToPartId === partId);\r\n if (existingIndex > -1) {\r\n countertopsApplyTo.splice(existingIndex, 1)\r\n } else {\r\n countertopsApplyTo.push(partId)\r\n }\r\n let countertopsApplyTo2 = propsCountertopsApplyTo[partId];\r\n const existingIndex2 = countertopsApplyTo2.findIndex(countertopsApplyToPartId => countertopsApplyToPartId === currentGroupPartId);\r\n if (existingIndex > -1) {\r\n countertopsApplyTo2.splice(existingIndex2, 1)\r\n } else {\r\n countertopsApplyTo2.push(currentGroupPartId)\r\n }\r\n const setApplyTo = getIsBathroom() ? setCountertopsApplyToBathroom : setCountertopsApplyTo;\r\n store.dispatch(setApplyTo({\r\n [currentGroupPartId]: countertopsApplyTo,\r\n [partId]: countertopsApplyTo2\r\n }));\r\n };\r\n\r\n setToggleOffProperies = (partId, countertopsApplyTo, countertopsApplyTo2) => {\r\n this.props.activeSubPart.toggleSwitchedOffByUser = !countertopsApplyTo.includes(partId);\r\n const neededSubPart = getCurrentLayout().getSubPartByPartId(partId);\r\n if (neededSubPart) {\r\n neededSubPart.part.toggleSwitchedOffByUser = !countertopsApplyTo2.includes(this.props.activeSubPart.partId);\r\n }\r\n };\r\n\r\n toggleCountertopsApplyTo = (partId) => {\r\n Analytics.sendClickEvent('countertop-apply-to-' + partId);\r\n const setApplyTo = getIsBathroom() ? this.props.setCountertopsApplyToBathroom : this.props.setCountertopsApplyTo;\r\n setApplyTo(this.getUpdatedCountertopSwitcherButtons(partId));\r\n };\r\n\r\n getButtonName = (partId, layout) => {\r\n const {intl, fabricatorData} = this.props;\r\n if (intl.locale !== \"en-EN\") {\r\n const featureGroup = layout.getFeatureGroupByPartId(partId);\r\n if (featureGroup) {\r\n return getFeatureGroupName(featureGroup, intl, fabricatorData)\r\n }\r\n }\r\n switch (partId) {\r\n case \"countertop\":\r\n case \"vanity_countertop\":\r\n return \"countertop\";\r\n case \"backsplash\":\r\n case \"vanity_backsplash\":\r\n return \"backsplash\";\r\n case \"center_island_countertop\":\r\n return \"center island\";\r\n default:\r\n return \"\"\r\n }\r\n };\r\n\r\n static checkForTileBacksplash = (clickedFeature) => {\r\n if (getIsBathroom() || (clickedFeature.partId !== \"backsplash\")) {\r\n return false\r\n }\r\n const {filterState} = store.getState();\r\n if (!filterState || !Array.isArray(filterState.filterGroups)) {\r\n return false\r\n }\r\n const typeGroup = filterState.filterGroups.find(group => group.name === \"Type\");\r\n if (!typeGroup || !typeGroup.id || !typeGroup.values) {\r\n return false\r\n }\r\n const featureFilters = getAllFeatureFilters(clickedFeature);\r\n if (!featureFilters || !Array.isArray(featureFilters[typeGroup.id])) {\r\n return false\r\n }\r\n return [\"Tile\", \"Mosaic\", \"Linear Mosaic\", \"Mosaic Tiles\"].some(filterName => {\r\n const tileFilterValue = typeGroup.values.find(val => val.value === filterName);\r\n return tileFilterValue && featureFilters[typeGroup.id].includes(tileFilterValue.id)\r\n })\r\n }\r\n\r\n static applyAllCountertops = (navigationItemPart, ignoreLocked, passedArrayApplyTo = null, setCurrentFeature = false) => {\r\n const isBathroom = getIsBathroom();\r\n const COUNTERTOPGROUPS = isBathroom ? COUNTERTOP_GROUP_BATHROOM : COUNTERTOP_GROUP;\r\n const propsCountertopsApplyTo = store.getState().navigationState[\r\n isBathroom ? \"countertopsApplyToBathroom\" : \"countertopsApplyTo\"\r\n ];\r\n const clickedPartId = navigationItemPart.partId;\r\n const layout = getCurrentLayout();\r\n const countertopsApplyTo = passedArrayApplyTo\r\n || propsCountertopsApplyTo[clickedPartId] ? [...propsCountertopsApplyTo[clickedPartId]] : [];\r\n const existingIndex = countertopsApplyTo.findIndex(countertopsApplyToPartId => countertopsApplyToPartId === clickedPartId);\r\n if (existingIndex > -1) {\r\n countertopsApplyTo.splice(existingIndex, 1); // remove already clicked partId\r\n }\r\n const missingFeatures = [];\r\n layout.getFeatures().forEach(parentGroup => {\r\n let relatedItems = parentGroup.relatedItems;\r\n relatedItems.forEach((relatedItem) => {\r\n const currentPartId = relatedItem.partId;\r\n if (COUNTERTOPGROUPS.includes(currentPartId) && (currentPartId !== clickedPartId)\r\n && (countertopsApplyTo.includes(relatedItem.partId) || !relatedItem.toggleSwitchedOffByUser)) {\r\n const navigationItemName = navigationItemPart.getCountertopGroupsSplittedFeatureName();\r\n if (document.kvConfig.toolVersion !== 4) {\r\n const {navigationState} = store.getState();\r\n if (!navigationState.useFeaturesLightRequest.countertops\r\n && (!Array.isArray(relatedItem.alreadyRequestedFeatureNames) || !relatedItem.alreadyRequestedFeatureNames.includes(navigationItemName))) {\r\n // we should request every time! yes, because they have different manufacturers, and the same name\r\n missingFeatures.push({relatedItem, navigationItemName, ignoreLocked, fromFeature: navigationItemPart});\r\n return false\r\n }\r\n }\r\n let neededFeature = CountertopSwitchers.getNeededFeatureFromNavItems(navigationItemPart, relatedItem);\r\n if (!neededFeature && (document.kvConfig.visualizerType === \"Kitchen\")\r\n && !layout.getCurrentLayoutAbbreviation().includes(\"I\") && (currentPartId === \"center_island_countertop\")) {\r\n neededFeature = relatedItem.featuresList[\"LShapeWithPeninsulaWithIsland\"]\r\n && relatedItem.featuresList[\"LShapeWithPeninsulaWithIsland\"].find((feature) => {\r\n const featureName = feature.getCountertopGroupsSplittedFeatureName();\r\n return featureName === navigationItemName\r\n });\r\n if (neededFeature) {\r\n neededFeature = {part: neededFeature}\r\n }\r\n }\r\n if (neededFeature && !neededFeature.part.notAvailableInVisualizer) {\r\n if (setCurrentFeature) {\r\n relatedItem.activeFeatureBeforeAllWalls = relatedItem.activeFeature;\r\n }\r\n neededFeature.part.clickFromAllWalls(ignoreLocked);\r\n if (!relatedItem.toggleSwitchedOffByUser && !countertopsApplyTo.includes(currentPartId)) {\r\n CountertopSwitchers.updateCountertopSwitcherButtons(currentPartId, clickedPartId, propsCountertopsApplyTo);\r\n }\r\n } else {\r\n if (CountertopSwitchers.checkForTileBacksplash(navigationItemPart)) {\r\n return false\r\n }\r\n missingFeatures.push({relatedItem, navigationItemName, ignoreLocked, fromFeature: navigationItemPart})\r\n }\r\n }\r\n })\r\n });\r\n return CountertopSwitchers.getMissingFeaturesAndClickThem(missingFeatures, navigationItemPart, setCurrentFeature);\r\n };\r\n\r\n static getNeededFeatureFromNavItems = (fromFeature, featureGroup) => {\r\n let navItems;\r\n const isNewKitchen = (document.kvConfig.toolVersion !== 4);\r\n const isNewKitchenBacksplash = featureGroup.partId === \"backsplash\" && isNewKitchen;\r\n navItems = featureGroup.navigationSubItems();\r\n const navigationItemName = fromFeature.getCountertopGroupsSplittedFeatureName();\r\n let matchingFeatures = navItems.filter(navFeature => {\r\n if (navFeature.part.notAvailableInVisualizer) {\r\n return false\r\n }\r\n const featureName = navFeature.part.getSplittedFeatureName();\r\n const featureName2 = navFeature.part.getCountertopGroupsSplittedFeatureName();\r\n return featureName && (featureName === navigationItemName || featureName2 === navigationItemName)\r\n });\r\n if (matchingFeatures.length > 1 && isNewKitchen) {\r\n const filterGroups = store.getState().filterState.filterGroups;\r\n const manufacturerFilterGroup = filterGroups.find(group => (group.name || \"\").trim() === \"Manufacturer\");\r\n if (manufacturerFilterGroup) {\r\n const featureManValues = getFilterGroupValues(fromFeature, manufacturerFilterGroup);\r\n if (featureManValues && featureManValues.length) {\r\n const withSameManufacturerFeatures = matchingFeatures.filter(navItem => featureHasSelectedFilters(navItem.part, [{\r\n filterGroupId: manufacturerFilterGroup.id,\r\n filterId: featureManValues[0],\r\n }]));\r\n if (withSameManufacturerFeatures.length) {\r\n console.log(\"withSameManufacturerFeatures FOUBD!!\", withSameManufacturerFeatures);\r\n matchingFeatures = withSameManufacturerFeatures;\r\n }\r\n }\r\n }\r\n }\r\n if (isNewKitchenBacksplash) {\r\n const currentHeight = featureGroup.getCurrentActiveFeatureType();\r\n if (currentHeight) {\r\n const sameHeight = matchingFeatures.filter(navItem => featureGroup.getFeatureBacksplashType(navItem.part) === currentHeight);\r\n if (sameHeight.length) {\r\n console.log(\"Same Height Found\", sameHeight);\r\n return sameHeight[0]\r\n }\r\n }\r\n }\r\n return matchingFeatures[0] || null\r\n }\r\n\r\n static getMissingFeaturesAndClickThem = (missingFeatures, navigationItemPart, setCurrentFeature = false) => {\r\n if (missingFeatures.length) {\r\n const isBathroom = getIsBathroom();\r\n window.requestInProcess = true;\r\n loaderEnable();\r\n const promises = missingFeatures.map((missingFeatureObject) => {\r\n const relatedItem = missingFeatureObject.relatedItem;\r\n return Navigation.searchFeaturesByName(relatedItem, missingFeatureObject.navigationItemName)\r\n .then(response => {\r\n function turnOffToggles() { // turn off the toggles if feature isn't found\r\n const navItemParent = navigationItemPart.getParent();\r\n if (!navItemParent.toggleSwitchedOffByUser) { // current category\r\n let countertopsApplyTo = store.getState().navigationState[\r\n isBathroom ? \"countertopsApplyToBathroom\" : \"countertopsApplyTo\"\r\n ];\r\n const existingIndex = countertopsApplyTo[navigationItemPart.partId].findIndex(countertopsApplyToPartId => countertopsApplyToPartId === relatedItem.partId);\r\n if (existingIndex > -1) {\r\n countertopsApplyTo[navigationItemPart.partId].splice(existingIndex, 1);\r\n }\r\n if (!relatedItem.toggleSwitchedOffByUser) { // turn off the toggles if feature isn't found (mirrored category)\r\n const existingIndex = countertopsApplyTo[relatedItem.partId].findIndex(countertopsApplyToPartId => countertopsApplyToPartId === navigationItemPart.partId);\r\n if (existingIndex > -1) {\r\n countertopsApplyTo[relatedItem.partId].splice(existingIndex, 1);\r\n }\r\n }\r\n const setApplyTo = isBathroom ? setCountertopsApplyToBathroom : setCountertopsApplyTo;\r\n store.dispatch(setApplyTo(countertopsApplyTo));\r\n }\r\n }\r\n if (response && response.length) {\r\n let neededFeature = CountertopSwitchers.getNeededFeatureFromNavItems(missingFeatureObject.fromFeature, relatedItem);\r\n if (neededFeature) {\r\n let countertopsApplyTo = store.getState().navigationState[\r\n isBathroom ? \"countertopsApplyToBathroom\" : \"countertopsApplyTo\"\r\n ];\r\n if (setCurrentFeature) {\r\n relatedItem.activeFeatureBeforeAllWalls = relatedItem.activeFeature;\r\n }\r\n neededFeature.part.clickFromAllWalls(missingFeatureObject.ignoreLocked);\r\n if (!relatedItem.toggleSwitchedOffByUser && !countertopsApplyTo[navigationItemPart.partId].includes(relatedItem.partId)) {\r\n CountertopSwitchers.updateCountertopSwitcherButtons(relatedItem.partId, navigationItemPart.partId, countertopsApplyTo, false);\r\n }\r\n } else {\r\n turnOffToggles()\r\n }\r\n } else {\r\n turnOffToggles()\r\n }\r\n if (!relatedItem.alreadyRequestedFeatureNames) {\r\n relatedItem.alreadyRequestedFeatureNames = [];\r\n }\r\n relatedItem.alreadyRequestedFeatureNames.push(missingFeatureObject.navigationItemName);\r\n return response\r\n });\r\n });\r\n return Promise.all(promises)\r\n .then(() => {\r\n window.requestInProcess = false;\r\n if (document.kvConfig.toolVersion !== 4) {\r\n loaderDisable();\r\n return\r\n }\r\n $(window).trigger(ActionTypes.CHANGE_LAYOUT); // update canvas\r\n store.dispatch(updateCanvasCount());\r\n setTimeout(() => {\r\n $(window).trigger(ActionTypes.CHANGE_LAYOUT); // update canvas\r\n loaderDisable();\r\n }, 0)\r\n // forceUpdate if needed\r\n });\r\n }\r\n };\r\n\r\n getValueText = () => {\r\n if (this.props.activeSubPart.partId === \"backsplash\") {\r\n if (this.props.windowWidth < 900) {\r\n return \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n
\r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = (store) => ({\r\n countertopsApplyTo: store.navigationState.countertopsApplyTo,\r\n countertopsApplyToBathroom: store.navigationState.countertopsApplyToBathroom,\r\n windowWidth: store.serverState.windowWidth,\r\n fabricatorData: store.fabricatorState,\r\n});\r\n\r\nconst mapDispatchToProps = {\r\n setCountertopsApplyTo,\r\n setCountertopsApplyToBathroom\r\n};\r\n\r\nexport default injectIntl(\r\n connect(mapStateToProps, mapDispatchToProps)(CountertopSwitchers)\r\n)\r\n","import React, {PureComponent} from 'react';\r\nimport {connect} from 'react-redux';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport { setExpandedFilters, setSelectedFilters, showFilters } from \"../../../../actions/actionFunctions\";\r\nimport FiltersBody from \"./filtersBody\";\r\n\r\nclass FiltersClass extends PureComponent {\r\n\r\n static propTypes = {\r\n id: PropTypes.string.isRequired,\r\n searchText: PropTypes.string.isRequired,\r\n handleSearchInputChange: PropTypes.func.isRequired,\r\n childItem: PropTypes.object\r\n };\r\n\r\n blurClickSet = false;\r\n\r\n componentDidMount() {\r\n this.props.setSelectedFilters([]); // reset filters on stones & color step\r\n }\r\n\r\n componentWillReceiveProps(nextProps) {\r\n if (nextProps.childItem && (!this.props.childItem\r\n || (this.props.childItem && nextProps.childItem.text !== this.props.childItem.text))) {\r\n this.props.setSelectedFilters([]);\r\n this.props.setExpandedFilters([]);\r\n }\r\n if (nextProps.visible && !this.blurClickSet) {\r\n this.blurClickSet = true;\r\n document.addEventListener('click', this.handleWrapperBlur);\r\n }\r\n }\r\n\r\n handleWrapperBlur = (e) => {\r\n if (!e.target.closest('[class*=\"filters\"]') && !e.target.closest(\".materials-button--search\") && this.props.id === this.props.activeFilterId) {\r\n this.props.showFilters(false);\r\n document.removeEventListener('click', this.handleWrapperBlur);\r\n this.blurClickSet = false;\r\n }\r\n };\r\n\r\n render() {\r\n return (\r\n Apply to
\r\n - \r\n {COUNTERTOPGROUPS.map(partId => {\r\n const hideButton = this.buttonIsDisabled(partId);\r\n return hideButton ? null : (\r\n
- this.toggleCountertopsApplyTo(partId)}>\r\n \r\n {this.getButtonName(partId, layout)}\r\n \r\n \r\n\r\n \r\n )\r\n })}\r\n
\r\n {this.props.visible && this.props.childItem ? (\r\n
\r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = (store) => {\r\n return {\r\n activeFilterId: store.filterState.filterId,\r\n visible: store.filterState.showFilters,\r\n filterVisible: store.filterState.filterVisible,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n setSelectedFilters,\r\n setExpandedFilters,\r\n showFilters,\r\n};\r\nexport default connect(mapStateToProps, mapDispatchToProps)(FiltersClass);\r\n","export const LayoutType = {\r\n Layout1: 1,\r\n Layout2: 2,\r\n Layout41: 41,\r\n};\r\n\r\nexport const LayoutAbbreviation = {\r\n All: \"ALL\",\r\n Layout1: \"Layout1\",\r\n Layout2: \"Layout2\",\r\n Layout41: \"Layout41\",\r\n};\r\n\r\nexport const LayoutAbbreviations = [\r\n \"Layout1\",\r\n \"Layout2\",\r\n \"Layout41\",\r\n];\r\nexport const LayoutAbbreviationsToRemove = [\r\n \"Layout41\",\r\n \"Layout2\",\r\n \"Layout1\",\r\n];\r\n\r\nexport const METADATA = {\r\n ALL: \"ALL\"\r\n};\r\n\r\nexport const DECORS_MAX = 10;\r\n\r\nexport const SLAT_WALL_POSITIONS = [\"S1\",\"S2\",\"S3\",\"S4\"];\r\n","//INITIAL FLOW\r\nimport * as types from \"./actionTypes\";\r\n\r\nexport const setEmployeesList = (employeesList) => ({\r\n type: types.SET_EMPLOYEES_LIST,\r\n payload: {employeesList}\r\n});\r\n\r\nexport const setAlreadyRegisteredUserInfo = (alreadyRegisteredUserInfo) => ({\r\n type: types.SET_ALREADY_REGISTERED_USER,\r\n payload: {alreadyRegisteredUserInfo}\r\n});\r\n\r\nexport const setLeadCaptureClickCount = (leadCaptureClickCount) => ({\r\n type: types.SET_LEAD_CAPTURE_CLICK_COUNT,\r\n payload: {leadCaptureClickCount}\r\n});\r\n\r\nexport const setUserPopupContent = (userPopupContent) => ({\r\n type: types.SET_USER_POPUP_CONTENT,\r\n payload: {userPopupContent}\r\n});\r\n\r\nexport const setUserTwoFa = (userTwoFa) => ({\r\n type: types.SET_USER_TWO_FA,\r\n payload: {userTwoFa}\r\n});\r\n\r\nexport const setUserOptIn = (optIn) => ({\r\n type: types.SET_USER_OPT_IN,\r\n payload: {optIn}\r\n});\r\n","import {getIntersectCordsBetweenLines, getMidPoint, getPointDistance} from \"./sqftHelper\";\r\nimport polygonClipping from \"polygon-clipping\";\r\n\r\n/**\r\n * Get point position left or right from the line\r\n * if D = 0 - then searchedPoint is on the line\r\n * if D < 0 - then searchedPoint is on the left from the line\r\n * if D > 0 - then searchedPoint is on the right from the line\r\n * @param linePoint1 {{x: int, y: int}}\r\n * @param linePoint2 {{x: int, y: int}}\r\n * @param searchedPoint {{x: int, y: int}}\r\n */\r\nexport const getThePositionOfAPointToTheLeftOrRightOfALine = (linePoint1, linePoint2, searchedPoint) => {\r\n return (searchedPoint.x - linePoint1.x) * (linePoint2.y - linePoint1.y) - (searchedPoint.y - linePoint1.y) * (linePoint2.x - linePoint1.x)\r\n}\r\n\r\nfunction crossProduct(ax, ay, bx, by) {\r\n return ax * by - ay * bx;\r\n}\r\n\r\nfunction direction(ax, ay, bx, by, cx, cy) {\r\n return crossProduct(cx - ax, cy - ay, bx - ax, by - ay);\r\n}\r\n\r\nfunction onSegment(ax, ay, bx, by, cx, cy) {\r\n const withinX = (ax <= cx && cx <= bx) || (ax >= cx && cx >= bx);\r\n const withinY = (ay <= cy && cy <= by) || (ay >= cy && cy >= by);\r\n return withinX && withinY;\r\n}\r\n\r\n/**\r\n * Tests if line a-b intersects with line c-d, allow overlap will return false if lines are over each other\r\n * @param ax\r\n * @param ay\r\n * @param bx\r\n * @param by\r\n * @param cx\r\n * @param cy\r\n * @param dx\r\n * @param dy\r\n * @param allowOverlap\r\n */\r\nexport const getIntersectionCordsV2 = (ax, ay, bx, by, cx, cy, dx, dy, allowOverlap = true) => {\r\n const d1 = direction(ax, ay, bx, by, cx, cy);\r\n const d2 = direction(ax, ay, bx, by, dx, dy);\r\n const d3 = direction(cx, cy, dx, dy, ax, ay);\r\n const d4 = direction(cx, cy, dx, dy, bx, by);\r\n\r\n if (d1 * d2 < 0 && d3 * d4 < 0) {\r\n const A1 = by - ay;\r\n const B1 = ax - bx;\r\n const C1 = A1 * ax + B1 * ay;\r\n const A2 = dy - cy;\r\n const B2 = cx - dx;\r\n const C2 = A2 * cx + B2 * cy;\r\n\r\n const det = A1 * B2 - A2 * B1;\r\n if (det === 0) { // Collinear lines\r\n return null;\r\n } else {\r\n const x = (B2 * C1 - B1 * C2) / det;\r\n const y = (A1 * C2 - A2 * C1) / det;\r\n return [x, y];\r\n }\r\n }\r\n\r\n if (!allowOverlap && d1 === 0 && d2 === 0 && (onSegment(ax, ay, bx, by, cx, cy) || onSegment(ax, ay, bx, by, dx, dy))) {\r\n return null; //overlap each other\r\n }\r\n\r\n if ((d1 === 0 && onSegment(ax, ay, bx, by, cx, cy)) ||\r\n (d2 === 0 && onSegment(ax, ay, bx, by, dx, dy)) ||\r\n (d3 === 0 && onSegment(cx, cy, dx, dy, ax, ay)) ||\r\n (d4 === 0 && onSegment(cx, cy, dx, dy, bx, by))) {\r\n return null; //overlap only in one point\r\n }\r\n\r\n return null;\r\n}\r\n\r\n// Define a function to calculate the cross product of two vectors in 2D.\r\nexport function crossProduct2D(vectorA, vectorB) {\r\n // Calculate the cross product. Since the vectors are in 2D, the cross product will be a scalar.\r\n // vectorA.x * vectorB.y - vectorA.y * vectorB.x gives the Z component of the 3D cross product.\r\n return vectorA.x * vectorB.y - vectorA.y * vectorB.x;\r\n}\r\n\r\n/**\r\n * Finds the line in the `lines` array that is closest to referenceLine\r\n * and intersects the perpendicular line drawn from midpoint of referenceLine.\r\n *\r\n * @param {Line} referenceLine The line from which the perpendicular is drawn.\r\n * @param {Line[]} lines The array of lines to search in.\r\n * @return {{Line, point} | null} The found line or null if no line is found.\r\n */\r\nexport function findClosestIntersectingPointAndLine(referenceLine, lines) {\r\n // Find the perpendicular line to referenceLine\r\n const perpendicularVector = getPerpendicularMidpointVector(referenceLine);\r\n\r\n // Find all intersection points of the perpendicular line with the lines in the array\r\n const intersectionPointsAndLines = [];\r\n for (const line of lines) {\r\n // skip referenceLine\r\n if (line.id === referenceLine.id) {\r\n continue\r\n }\r\n //const intersectionPoint = getVectorIntersectionPoint(perpendicularVector, line);\r\n const intersectionPoint = getIntersectCordsBetweenLines(perpendicularVector.from, perpendicularVector.to, line.from, line.to, true ,true);\r\n\r\n if (intersectionPoint) {\r\n intersectionPointsAndLines.push({\r\n line,\r\n point: intersectionPoint,\r\n });\r\n }\r\n }\r\n\r\n return getClosestLineAndIntersectionPoint(referenceLine, intersectionPointsAndLines)\r\n}\r\n\r\n/**\r\n * Finds the line in the `lines` array that is closest to referenceLine\r\n * and intersects the perpendicular line drawn from midpoint of referenceLine.\r\n *\r\n * @return {{Line, point} | null} The found line or null if no line is found.\r\n * @param line\r\n * @param intersectionPointsAndLines\r\n */\r\nexport const getClosestLineAndIntersectionPoint = (line, intersectionPointsAndLines) => {\r\n let closestIntersectionPointAndLine = null;\r\n let minDistance = Infinity;\r\n for (const intersection of intersectionPointsAndLines) {\r\n const midPoint = getMidPoint(line.from, line.to);\r\n const distance = getPointDistance(midPoint, intersection.point);\r\n if (distance < minDistance) {\r\n minDistance = distance;\r\n closestIntersectionPointAndLine = intersection;\r\n }\r\n }\r\n\r\n return closestIntersectionPointAndLine;\r\n}\r\n\r\nexport const getPerpendicularMidpointVector = (line) => {\r\n const midPoint = getMidPoint(line.from, line.to);\r\n const vector = {\r\n x: line.from.y - line.to.y, // Изменение координат Y для получения перпендикуляра\r\n y: line.to.x - line.from.x, // Изменение координат X для получения перпендикуляра\r\n };\r\n\r\n // Вектор, начинающийся в серединной точке и проходящий через нее\r\n return {\r\n from: midPoint,\r\n to: {\r\n x: midPoint.x + vector.x,\r\n y: midPoint.y + vector.y,\r\n },\r\n };\r\n}\r\n\r\n// Function to find the convex hull using Graham's algorithm\r\nexport const convexHull = (points) => {\r\n // Sort points by Y (ascending) and then by X\r\n points.sort((a, b) => a.y === b.y ? a.x - b.x : a.y - b.y);\r\n // Function for calculating rotation: >0 if CCW, <0 if CW, 0 if collinear\r\n const cross = (o, a, b) => (a.x - o.x) * (b.y - o.y) - (a.y - o.y) * (b.x - o.x);\r\n\r\n const lower = [];\r\n for (let i = 0; i < points.length; i++) {\r\n while (lower.length >= 2 && cross(lower[lower.length - 2], lower[lower.length - 1], points[i]) <= 0) {\r\n lower.pop();\r\n }\r\n lower.push(points[i]);\r\n }\r\n\r\n const upper = [];\r\n for (let i = points.length - 1; i >= 0; i--) {\r\n while (upper.length >= 2 && cross(upper[upper.length - 2], upper[upper.length - 1], points[i]) <= 0) {\r\n upper.pop();\r\n }\r\n upper.push(points[i]);\r\n }\r\n\r\n // Deleting the last point of each half-shell (it is duplicated)\r\n lower.pop();\r\n upper.pop();\r\n\r\n // Concatenation of lower and upper shell\r\n return lower.concat(upper);\r\n}\r\n\r\n/////////////////////////////////////////////////////////////\r\n// function buildGraph(shapes) {\r\n// const graph = new Map();\r\n//\r\n// // Создаем узлы графа для каждой уникальной точки\r\n// for (const shape of shapes) {\r\n// for (let point of shape) {\r\n// point = roundPoint(point); // округляем точку\r\n// const key = `${point.x},${point.y}`;\r\n// if (!graph.has(key)) {\r\n// graph.set(key, {\r\n// ...point,\r\n// edges: new Set()\r\n// });\r\n// }\r\n// }\r\n// }\r\n//\r\n// // Добавляем рёбра между точками каждого шейпа\r\n// for (const shape of shapes) {\r\n// for (let i = 0; i < shape.length; i++) {\r\n// const current = roundPoint(shape[i]);\r\n// const next = roundPoint(shape[(i + 1) % shape.length]); // замкнутый контур\r\n// const currentKey = `${current.x},${current.y}`;\r\n// const nextKey = `${next.x},${next.y}`;\r\n//\r\n// graph.get(currentKey).edges.add(nextKey);\r\n// graph.get(nextKey).edges.add(currentKey);\r\n// }\r\n// }\r\n//\r\n// return graph;\r\n// }\r\n//\r\n// function findLeftBottomVertex(graph) {\r\n// let minVertex = null;\r\n// let minKey = null;\r\n// graph.forEach((value, key) => {\r\n// if (minVertex === null || value.y < minVertex.y || (value.y === minVertex.y && value.x < minVertex.x)) {\r\n// minVertex = value;\r\n// minKey = key;\r\n// }\r\n// });\r\n// return minKey;\r\n// }\r\n//\r\n// function findContours(shapes) {\r\n// const graph = buildGraph(shapes);\r\n// const startKey = findLeftBottomVertex(graph);\r\n// let currentKey = startKey;\r\n// let previousKey = null;\r\n// const result = [];\r\n//\r\n// do {\r\n// result.push(currentKey.split(',').map(Number)); // Добавляем текущую точку в контур\r\n// const currentVertex = graph.get(currentKey);\r\n// let nextKey = null;\r\n// let maxAngle = -Infinity;\r\n//\r\n// // Перебираем возможные следующие вершины\r\n// currentVertex.edges.forEach(key => {\r\n// if (key !== previousKey) { // Исключаем вернуться назад\r\n// const angle = calculateAngle(currentVertex, graph.get(previousKey), graph.get(key));\r\n// if (angle > maxAngle) {\r\n// maxAngle = angle;\r\n// nextKey = key;\r\n// }\r\n// }\r\n// });\r\n//\r\n// previousKey = currentKey;\r\n// currentKey = nextKey;\r\n// } while (currentKey !== startKey);\r\n//\r\n// return result.map(([x, y]) => ({ x, y }));\r\n// }\r\n//\r\n// function calculateAngle(current, previous, next) {\r\n// if (!previous) return 0; // Если предыдущая точка не задана, угол не вычисляется\r\n//\r\n// const vectorA = { x: current.x - previous.x, y: current.y - previous.y };\r\n// const vectorB = { x: next.x - current.x, y: next.y - current.y };\r\n// const dotProduct = vectorA.x * vectorB.x + vectorA.y * vectorB.y;\r\n// const magnitudeA = Math.sqrt(vectorA.x ** 2 + vectorA.y ** 2);\r\n// const magnitudeB = Math.sqrt(vectorB.x ** 2 + vectorB.y ** 2);\r\n//\r\n// // Косинус угла между векторами\r\n// const cosTheta = dotProduct / (magnitudeA * magnitudeB);\r\n//\r\n// // Возвращаем угол в радианах\r\n// return Math.acos(cosTheta);\r\n// }\r\n\r\n/**\r\n * Returns rounded shape points\r\n * @param {Array} shapesPoints shapes array\r\n * @returns {Array} shapes array with rounded points\r\n */\r\nexport const roundShapesPoints = (shapesPoints) => {\r\n return shapesPoints.map(shape =>\r\n roundShapePoints(shape)\r\n );\r\n};\r\n\r\nexport const roundShapePoints = (shapePoints) => {\r\n return shapePoints.map(point => roundPoint(point));\r\n};\r\n\r\nconst roundPoint = (point) => {\r\n const precision = 1000000; // Round to 6 digits after comma\r\n return {\r\n x: Math.round(point.x * precision) / precision,\r\n y: Math.round(point.y * precision) / precision,\r\n id: point.id\r\n };\r\n};\r\n\r\n// Convert shapes to polygon-clipping format\r\nexport function convertShapesToPolygons(shapesPoints) {\r\n return shapesPoints.map(shapePoints => [convertShapeToPolygon(shapePoints)]);\r\n}\r\n\r\nexport function convertShapeToPolygon(shapePoints) {\r\n return shapePoints.map(point => [point.x, point.y]);\r\n}\r\n\r\n// Convert points from polygon-clipping format to shapes format\r\nexport function convertFromPolygon(polygons) {\r\n if (Array.isArray(polygons) && polygons.length) {\r\n return polygons[0][0].map(coord => ({ x: coord[0], y: coord[1] }));\r\n }\r\n return []\r\n}\r\n\r\n/**\r\n * Function to calculate the outline of multiple shapes.\r\n * Each shape is defined by an array of points, which are connected together.\r\n * The function rounds the coordinates to a certain precision to handle slight mismatches.\r\n *\r\n * @param {Array} shapes - Array of shapes, each shape is an array of points.\r\n * @returns {Array} - Array of points forming the unified outline of the shapes.\r\n */\r\nexport const unifyShapePoints = (shapes) => {\r\n const roundedPoints = roundShapesPoints(shapes);\r\n const polygons = convertShapesToPolygons(roundedPoints);\r\n const result = polygonClipping.union(polygons);\r\n\r\n // console.log(\"roundedPoints\",roundedPoints);\r\n // console.log(\"polygons\",polygons);\r\n // console.log(\"result\",result);\r\n // console.log(\"convertFromPolygon(result);\",convertFromPolygon(result));\r\n return convertFromPolygon(result);\r\n}\r\n\r\n// Function to remove consecutive duplicate points\r\nexport function removeConsecutiveDuplicates(points) {\r\n // Filter the points array to remove consecutive duplicates\r\n return points.filter((point, index, array) => {\r\n // Check if the current point is different from the previous one\r\n if (index === 0) {\r\n return true; // Always include the first point\r\n }\r\n const prevPoint = array[index - 1];\r\n return point.x !== prevPoint.x || point.y !== prevPoint.y;\r\n });\r\n}\r\n\r\nexport function areCollinear(p1, p2, p3, p4) {\r\n // Check that the vector products (p2-p1) and (p4-p3) are equal to zero\r\n return (p2.x - p1.x) * (p4.y - p3.y) === (p4.x - p3.x) * (p2.y - p1.y) &&\r\n ((Math.min(p1.x, p2.x) <= Math.max(p3.x, p4.x) && Math.max(p1.x, p2.x) >= Math.min(p3.x, p4.x)) &&\r\n (Math.min(p1.y, p2.y) <= Math.max(p3.y, p4.y) && Math.max(p1.y, p2.y) >= Math.min(p3.y, p4.y)));\r\n}\r\n\r\nexport function getSegmentIntersectionPoint(seg1, seg2) {\r\n const a1 = seg1.end.y - seg1.start.y;\r\n const b1 = seg1.start.x - seg1.end.x;\r\n const c1 = a1 * seg1.start.x + b1 * seg1.start.y;\r\n\r\n const a2 = seg2.end.y - seg2.start.y;\r\n const b2 = seg2.start.x - seg2.end.x;\r\n const c2 = a2 * seg2.start.x + b2 * seg2.start.y;\r\n\r\n const determinant = a1 * b2 - a2 * b1;\r\n\r\n if (determinant === 0) {\r\n return null;\r\n } else {\r\n const x = (c1 * b2 - c2 * b1) / determinant;\r\n const y = (a1 * c2 - a2 * c1) / determinant;\r\n return { x, y };\r\n }\r\n}\r\n\r\nexport function isPointOnSegment(pt, seg) {\r\n return Math.min(seg.start.x, seg.end.x) <= pt.x && pt.x <= Math.max(seg.start.x, seg.end.x) &&\r\n Math.min(seg.start.y, seg.end.y) <= pt.y && pt.y <= Math.max(seg.start.y, seg.end.y);\r\n}\r\n\r\n/**\r\n * Return the length of the overlap of the segments\r\n */\r\nfunction getOverlapLength(seg1, seg2) {\r\n if (seg1.start.x === seg1.end.x && seg1.start.x === seg2.start.x) {\r\n const sortedY1 = [seg1.start.y, seg1.end.y].sort((a, b) => a - b);\r\n const sortedY2 = [seg2.start.y, seg2.end.y].sort((a, b) => a - b);\r\n\r\n if (sortedY1[1] < sortedY2[0] || sortedY2[1] < sortedY1[0]) {\r\n return 0;\r\n }\r\n\r\n const overlapY = Math.min(sortedY1[1], sortedY2[1]) - Math.max(sortedY1[0], sortedY2[0]);\r\n return overlapY;\r\n }\r\n\r\n if (seg1.start.y === seg1.end.y && seg1.start.y === seg2.start.y) {\r\n const sortedX1 = [seg1.start.x, seg1.end.x].sort((a, b) => a - b);\r\n const sortedX2 = [seg2.start.x, seg2.end.x].sort((a, b) => a - b);\r\n\r\n if (sortedX1[1] < sortedX2[0] || sortedX2[1] < sortedX1[0]) {\r\n return 0;\r\n }\r\n\r\n const overlapX = Math.min(sortedX1[1], sortedX2[1]) - Math.max(sortedX1[0], sortedX2[0]);\r\n return overlapX;\r\n }\r\n\r\n const intersection = getSegmentIntersectionPoint(seg1, seg2);\r\n if (intersection && isPointOnSegment(intersection, seg1) && isPointOnSegment(intersection, seg2)) {\r\n return Math.sqrt(Math.pow(intersection.x - seg1.start.x, 2) + Math.pow(intersection.y - seg1.start.y, 2));\r\n }\r\n\r\n return 0;\r\n}\r\n\r\nexport function areCollinearAndOverlap(p1, p2, p3, p4, minOverlap) {\r\n // Check the collinearity of the segments\r\n if (areCollinear(p1, p2, p3, p4)) {\r\n // If they are collinear, check for minimum overlap\r\n const seg1 = { start: p1, end: p2 };\r\n const seg2 = { start: p3, end: p4 };\r\n const overlapLength = getOverlapLength(seg1, seg2);\r\n\r\n return overlapLength >= minOverlap;\r\n }\r\n return false;\r\n}\r\n\r\n/**\r\n * Function for finding a point that is below and to the right of all other points\r\n * @param {Array} points {x, y}\r\n * @returns {Object} Point that is below and to the right of all others\r\n */\r\nexport function findLowestRightmostPoint(points) {\r\n if (!points.length) {\r\n return null;\r\n }\r\n\r\n let resultPoint = points[0];\r\n\r\n for (let i = 1; i < points.length; i++) {\r\n if (points[i].x > resultPoint.x) {\r\n resultPoint = points[i]; // Finding a new point to the right\r\n } else if (points[i].x === resultPoint.x && points[i].y < resultPoint.y) {\r\n resultPoint = points[i]; // If x are equal, choose a lower point\r\n }\r\n }\r\n\r\n return resultPoint;\r\n}\r\n\r\n/**\r\n * Calculate the length of the legs in an isosceles right triangle given the hypotenuse.\r\n * @param {number} hypotenuse - The length of the hypotenuse.\r\n * @returns {number} The length of each leg.\r\n */\r\nexport function calculateLeg(hypotenuse) {\r\n // Calculate the leg length using the relationship derived from Pythagoras' theorem\r\n return hypotenuse / Math.sqrt(2);\r\n}\r\n\r\n\r\n/**\r\n * Get closest point on the line\r\n * @returns {number} The length of each leg.\r\n * @param lineStart\r\n * @param lineEnd\r\n * @param mousePos\r\n */\r\nexport function getClosestPointOnLine(lineStart, lineEnd, mousePos) {\r\n const lineVec = {\r\n x: lineEnd.x - lineStart.x,\r\n y: lineEnd.y - lineStart.y\r\n };\r\n\r\n const lineLen = getPointDistance(lineStart, lineEnd);\r\n const lineUnitVec = {\r\n x: lineVec.x / lineLen,\r\n y: lineVec.y / lineLen\r\n };\r\n\r\n const mouseVec = {\r\n x: mousePos.x - lineStart.x,\r\n y: mousePos.y - lineStart.y\r\n };\r\n\r\n const dotProduct = mouseVec.x * lineUnitVec.x + mouseVec.y * lineUnitVec.y;\r\n const clampedDotProduct = Math.max(0, Math.min(dotProduct, lineLen));\r\n const x = lineStart.x + lineUnitVec.x * clampedDotProduct;\r\n const y = lineStart.y + lineUnitVec.y * clampedDotProduct;\r\n\r\n return {\r\n x: x,\r\n y: y,\r\n };\r\n}\r\n\r\nexport const findTopLeftPoint = (points) => {\r\n return points.reduce((topLeft, point) => {\r\n if (point.y < topLeft.y || (point.y === topLeft.y && point.x < topLeft.x)) {\r\n return point;\r\n }\r\n return topLeft;\r\n }, points[0]);\r\n};\r\n\r\nexport const adjustPointsRelativeToTopLeft = (points, topLeft) => {\r\n return points.map(point => ({\r\n x: point.x - topLeft.x,\r\n y: point.y - topLeft.y\r\n }));\r\n};\r\n\r\nexport const sortPointsClockwise = (points) => {\r\n let topLeft, topRight, bottomLeft, bottomRight;\r\n\r\n // Функция для округления координат\r\n const roundCoordinate = (value, precision = 10) => {\r\n const factor = Math.pow(10, precision); // precision — количество знаков после запятой\r\n return Math.round(value * factor) / factor;\r\n };\r\n\r\n // Округляем координаты точек\r\n const roundedPoints = points.map(point => ({\r\n x: roundCoordinate(point.x),\r\n y: roundCoordinate(point.y)\r\n }));\r\n\r\n // Находим крайние значения для округленных координат\r\n const minX = Math.min(...roundedPoints.map(p => p.x));\r\n const maxX = Math.max(...roundedPoints.map(p => p.x));\r\n const minY = Math.min(...roundedPoints.map(p => p.y));\r\n const maxY = Math.max(...roundedPoints.map(p => p.y));\r\n\r\n // Разделяем точки по их координатам\r\n roundedPoints.forEach(point => {\r\n if (point.x === minX && point.y === minY) {\r\n topLeft = point;\r\n } else if (point.x === maxX && point.y === minY) {\r\n topRight = point;\r\n } else if (point.x === minX && point.y === maxY) {\r\n bottomLeft = point;\r\n } else if (point.x === maxX && point.y === maxY) {\r\n bottomRight = point;\r\n }\r\n });\r\n\r\n // Проверяем, что все точки определены, чтобы не было undefined\r\n if (!topLeft || !topRight || !bottomLeft || !bottomRight) {\r\n console.error(\"Points\", points);\r\n console.error(\"One or more points are undefined\", {topLeft, topRight, bottomLeft, bottomRight});\r\n return null;\r\n }\r\n\r\n // Возвращаем точки в порядке: верхняя левая, верхняя правая, нижняя правая, нижняя левая\r\n return [topLeft, topRight, bottomRight, bottomLeft];\r\n};\r\n\r\nexport function calculatePolygonClippingPolygonArea(polygon) {\r\n if (!polygon || polygon.length === 0) return 0;\r\n\r\n let area = 0;\r\n const coordinates = polygon[0];\r\n\r\n for (let i = 0; i < coordinates.length - 1; i++) {\r\n const [x1, y1] = coordinates[i];\r\n const [x2, y2] = coordinates[i + 1];\r\n area += x1 * y2 - x2 * y1;\r\n }\r\n\r\n return Math.abs(area / 2);\r\n}\r\n\r\nexport function findNearestPoint (targetPoint, points) {\r\n let nearestPoint = null;\r\n let minDistance = Infinity;\r\n\r\n for (const point of points) {\r\n const distance = Math.sqrt(\r\n Math.pow(point.x - targetPoint.x, 2) + Math.pow(point.y - targetPoint.y, 2)\r\n );\r\n if (distance < minDistance) {\r\n minDistance = distance;\r\n nearestPoint = point;\r\n }\r\n }\r\n\r\n return nearestPoint;\r\n}\r\n\r\n","import React, {Component} from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport {connect} from \"react-redux\";\r\nimport $ from \"jquery\";\r\nimport {FormattedMessage} from \"react-intl\";\r\n\r\nimport Analytics from \"../../../../analytics\";\r\nimport ActionTypes from \"../../../../misc/actionTypes\";\r\nimport LookFeatureRemoveButton from \"../../../look/lookNavigation/lookMain/lookFeatureRemoveButton\";\r\nimport {getCurrentLayout} from \"../../../appLayout\";\r\nimport {disableFeature} from \"../../../look/lookNavigation/lookFunctions2\";\r\nimport {updateCanvasCount} from \"../../../../actions/actionFunctions\";\r\n\r\nclass BodyPanelRadio extends Component {\r\n\r\n static propTypes = {\r\n activeSubPart: PropTypes.object.isRequired,\r\n isMobile: PropTypes.bool,\r\n quotingTool: PropTypes.bool,\r\n refreshItems: PropTypes.func,\r\n };\r\n\r\n // componentWillReceiveProps(nextProps) {\r\n // if (nextProps.updateDisableFeatureGroupRadio && !this.props.updateDisableFeatureGroupRadio) {\r\n // this.forceUpdate();\r\n // }\r\n // }\r\n\r\n radioClick = async () => {\r\n const activeSubPart = this.props.activeSubPart;\r\n Analytics.sendClickEvent('disable-toggle-' + activeSubPart.partId);\r\n const layout = getCurrentLayout();\r\n if (!activeSubPart.disabled && activeSubPart.activeFeature && layout.isNewLayout) {\r\n await disableFeature(activeSubPart.activeFeature)\r\n } else {\r\n activeSubPart.disabled = !activeSubPart.disabled;\r\n activeSubPart.disabledClick();\r\n activeSubPart.updateLocalStorage();\r\n }\r\n $(window).trigger(ActionTypes.CHANGE_LAYOUT); // update canvas\r\n if (this.props.refreshItems) {\r\n this.props.refreshItems();// update navigation (non compatible)\r\n }\r\n this.forceUpdate();\r\n this.props.updateCanvasCount();\r\n setTimeout(() => {\r\n this.forceUpdate(); // for slow udpates\r\n }, 0)\r\n };\r\n\r\n render() {\r\n const activeSubPart = this.props.activeSubPart;\r\n const cabinetsPartIds = [\"top_cabinet\", \"bottom_cabinet\", \"center_island_cabinet\"];\r\n const isCabinet = activeSubPart && cabinetsPartIds.includes(activeSubPart.partId);\r\n const countertopPartIds = [\"countertop\", \"backsplash\", \"center_island_countertop\"];\r\n const isCountertop = activeSubPart && countertopPartIds.includes(activeSubPart.partId);\r\n\r\n if (this.props.quotingTool) {\r\n return (\r\n \r\n
\r\n )\r\n }\r\n\r\n\r\n const layout = getCurrentLayout();\r\n if (layout.isNewLayout) {\r\n if (!activeSubPart || !activeSubPart.activeFeature) {\r\n return null\r\n }\r\n const text = this.props.isMobile && activeSubPart.partId === \"center_island_cabinet\" && this.props.windowWidth < 800\r\n ? \"radioButton.on\"\r\n : \"radioButtonDisableFeatueGroup1\";\r\n return \r\n {this.props.showFeatureWizard && (this.props.allProducts || !this.props.allStepsCompleted || (this.props.allStepsCompleted && !this.props.finishClicked)) ? (\r\n
\r\n )\r\n }\r\n}\r\n\r\n\r\nconst mapStateToProps = (store) => ({\r\n fabricatorSettings: store.fabricatorState.settings,\r\n});\r\n\r\nconst mapDispatchToProps = () => ({});\r\n\r\nexport default injectIntl(\r\n connect(mapStateToProps, mapDispatchToProps)(FeatureWizardSteps)\r\n);\r\n","//********* TUTORIALS *********//\r\nimport * as types from \"./actionTypes\";\r\n\r\nexport const toggleShowAssignQuotePopup = (showAssignQuotePopup, assignQuotePopupSaveButtons = \"all\") => ({\r\n type: types.TOGGLE_SHOW_ASSIGN_QUOTE_POPUP,\r\n payload: {showAssignQuotePopup, assignQuotePopupSaveButtons}\r\n});\r\n\r\nexport const setAssignQuotePopupSearchText = (assignQuotePopupSearchText) => ({\r\n type: types.SET_ASSIGN_QUOTE_POPUP_SEARCH_TEXT,\r\n payload: {assignQuotePopupSearchText}\r\n});\r\n\r\nexport const setAssignQuotePopupEmployee = (assignQuotePopupEmployee) => ({\r\n type: types.SET_ASSIGN_QUOTE_POPUP_EMPLOYEE,\r\n payload: {assignQuotePopupEmployee}\r\n});\r\n\r\nexport const setAssignQuotePopupCustomer = (assignQuotePopupCustomer) => ({\r\n type: types.SET_ASSIGN_QUOTE_POPUP_CUSTOMER,\r\n payload: {assignQuotePopupCustomer}\r\n});\r\n\r\nexport const setAssignQuotePopupSuccessText = (assignQuotePopupSuccessText) => ({\r\n type: types.SET_ASSIGN_QUOTE_POPUP_SUCCESS_TEXT,\r\n payload: {assignQuotePopupSuccessText}\r\n});\r\n\r\nexport const setAssignQuoteCloneMode = (assignQuoteCloneMode) => ({\r\n type: types.SET_ASSIGN_QUOTE_CLONE_MODE,\r\n payload: {assignQuoteCloneMode}\r\n});\r\n\r\nexport const setAssignQuoteOfflineData = (offlineData) => ({\r\n type: types.SET_ASSIGN_QUOTE_OFFLINE_DATA,\r\n payload: offlineData\r\n});\r\n","import {connect} from \"react-redux\";\r\nimport {withRouter} from \"react-router-dom\";\r\nimport $ from \"jquery\";\r\n\r\nimport {ROUTES} from \"../../../routes\";\r\nimport {getCommonCoords, getFeatureCoords, getLayerCenter, navFeatureCLick} from \"../lookNavigation/lookFunctions\";\r\nimport {getCurrentLayout} from \"../../appLayout\";\r\nimport {\r\n setLookActiveCategory,\r\n setLookActiveFeature,\r\n setLookDemoPointsClicked,\r\n setLookOpened, setLookPageOpened\r\n} from \"../../../actions/lookFunctions\";\r\nimport store from \"../../../store\";\r\nimport {LOOK_OPENED_TYPES, LOOK_WALLS} from \"../core/constants\";\r\nimport {IS_PRODUCT_JOURNEY} from \"../../../config\";\r\nimport {addToCart, setCanvasScale, updateCanvasCount} from \"../../../actions/actionFunctions\";\r\nimport {getCartItemObject} from \"../../../misc/helpers\";\r\nimport {\r\n enableRelatedFeature,\r\n getCategoryOnlyUrl,\r\n getFeatureUrl,\r\n hideFeatureSection\r\n} from \"../lookNavigation/lookFunctions2\";\r\nimport {CABINET_GROUP, COUNTERTOP_GROUP, EDGE_GROUP} from \"../../kvComponent/core/constants\";\r\n\r\nexport const doNotZoomPartIds = [\"kitchen_floor\", \"left_wall\", \"right_wall\", \"front_wall\", \"back_wall\",\r\n \"split_wall\", \"left_wall_splitter\", \"bathroom_floor\", \"shower_floor\", \"shower_curb\"];\r\n\r\nexport const shouldZoomPartId = (partId, isMobile) => {\r\n if (!partId) {\r\n return false\r\n }\r\n if (!isMobile && (CABINET_GROUP.includes(partId) || COUNTERTOP_GROUP.includes(partId) || EDGE_GROUP.includes(partId))) {\r\n return false\r\n }\r\n return (!doNotZoomPartIds.includes(partId) || (\r\n partId === \"front_wall\" && document.kvConfig.visualizerType === \"Fireplace\"\r\n ))\r\n}\r\n\r\nexport const shouldZoomToTheBottom = (partId) => {\r\n if (!partId) {\r\n return false\r\n }\r\n return partId === \"kitchen_floor\" || partId === \"bathroom_floor\"\r\n}\r\n\r\nexport const getCorrectedCenter = (center, scale = 1.75, clickedFeature, imageCanvas, isMobile) => {\r\n const {activePreset} = store.getState().bathroomVisualizerState;\r\n if ((clickedFeature.partId === \"shower_fixture\" || clickedFeature.partId === \"crown_molding\")\r\n && imageCanvas.current.pinchZoom.zoomFactor === 1) {\r\n if (activePreset !== 4) {\r\n scale = 1.5;\r\n }\r\n switch (activePreset) {\r\n case 3:\r\n center.y = center.y - 40;\r\n break;\r\n case 6:\r\n center.y = center.y + 40;\r\n break;\r\n default:\r\n break;\r\n }\r\n if (!isMobile) {\r\n $(\"html, body\").animate({scrollTop: 0}, 500);\r\n }\r\n }\r\n return {scale, center}\r\n}\r\n\r\nconst WithZoomToFeature = (props) => {\r\n\r\n const {history, children, imageCanvas, isMobile, setLookActiveCategory, setLookActiveFeature, lookOpened,\r\n setLookOpened, addToCart, qtActiveCategory, setCanvasScale, updateCanvasCount, lookActiveFeature,\r\n setLookDemoPointsClicked, lookPageOpened, setLookPageOpened, lookActiveCategory, lookCompatabilityAlert} = props;\r\n\r\n /**\r\n * Checks if list feature is currently active\r\n * @param partId {string}\r\n * @param zoomToFeature {featureInterface}\r\n * @param zoomToPostion {string}\r\n * @param changeUrl {boolean}\r\n * @param setActiveFeature {boolean}\r\n * @param closeOpenedCategory {boolean}\r\n * @param clickOnFeature {boolean}\r\n * @returns {featureInterface} clickedFeature\r\n */\r\n const zoomToFeatureGroup = (partId,\r\n zoomToFeature,\r\n zoomToPostion,\r\n changeUrl = true,\r\n setActiveFeature = true,\r\n closeOpenedCategory = true,\r\n clickOnFeature = true) => {\r\n let lookUrl = ROUTES.home;\r\n let clickedFeature;\r\n if (partId) {\r\n const layout = getCurrentLayout();\r\n const featureGroup = zoomToFeature ? zoomToFeature.getParent() : layout.getFeatureGroupByPartId(partId);\r\n clickedFeature = zoomToFeature || (featureGroup ? featureGroup.activeFeature : null);\r\n if (featureGroup && featureGroup.layerPositions && !zoomToFeature) {\r\n if (zoomToPostion) {\r\n clickedFeature = featureGroup.getMatchingPositionFeature(zoomToPostion);\r\n if (clickedFeature && !featureGroup.layerPositions[zoomToPostion]) {\r\n featureGroup.layerPositions[zoomToPostion] = clickedFeature;\r\n addToCart([getCartItemObject(clickedFeature, 1, qtActiveCategory)]);\r\n } else if (!clickedFeature) {\r\n clickedFeature = featureGroup.activeFeature || featureGroup.activeNotInVisualizerFeature; // show at least something\r\n }\r\n } else {\r\n Object.keys(featureGroup.layerPositions).forEach((position) => {\r\n if (featureGroup.layerPositions[position] && document.hoveredLayer\r\n && featureGroup.layerPositions[position].layer.zIndex === document.hoveredLayer.zIndex) {\r\n clickedFeature = featureGroup.layerPositions[position];\r\n }\r\n })\r\n }\r\n } else if (featureGroup && !featureGroup.layerPositions && !clickedFeature) {\r\n clickedFeature = featureGroup.activeFeature || featureGroup.activeNotInVisualizerFeature; // show at least something\r\n }\r\n if (clickedFeature) {\r\n console.log('clickedFeature', clickedFeature);\r\n if (clickOnFeature) {\r\n enableRelatedFeature(clickedFeature, addToCart, qtActiveCategory);\r\n navFeatureCLick(clickedFeature); // is needed for context menu vanity type switch\r\n }\r\n // console.log('Coords', clickedFeature.metaData.Coords);\r\n if (setActiveFeature) {\r\n setLookActiveFeature(clickedFeature);\r\n }\r\n featureGroup.featureBeforeChange = clickedFeature;\r\n const featureExistInQuotingTool = layout.partIdExistInQtCategory(partId);\r\n const allowFeatureScreen = featureExistInQuotingTool && !hideFeatureSection(true, partId, clickedFeature, lookCompatabilityAlert);\r\n\r\n if (!IS_PRODUCT_JOURNEY && isMobile && !setActiveFeature) {\r\n lookUrl = getCategoryOnlyUrl(clickedFeature.partId);\r\n setLookActiveCategory(clickedFeature.partId);\r\n } else if (featureExistInQuotingTool && (!IS_PRODUCT_JOURNEY || !lookActiveCategory || closeOpenedCategory)\r\n && (!IS_PRODUCT_JOURNEY || allowFeatureScreen)) {\r\n lookUrl = getFeatureUrl(clickedFeature);\r\n } else {\r\n lookUrl = getFeatureUrl(clickedFeature, true);\r\n setLookActiveCategory(clickedFeature.partId);\r\n }\r\n // if (!isMobile && imageCanvas.current && imageCanvas.current.setHoveredLayer && event) {\r\n // imageCanvas.current.setHoveredLayer(event);\r\n // }\r\n const commonCoords = getFeatureCoords(clickedFeature) || getCommonCoords(featureGroup, clickedFeature, imageCanvas.current.canvas);\r\n const shouldZoomCanvas = imageCanvas.current && imageCanvas.current.pinchZoom && commonCoords && Object.keys(commonCoords).length\r\n && !clickedFeature.notAvailableInVisualizer && shouldZoomPartId(clickedFeature.partId, isMobile);\r\n if (shouldZoomCanvas) {\r\n // const moreZoomFeatureGroups = [\"bathtub_fixture\"];\r\n const {center, scale} = getCorrectedCenter(\r\n getLayerCenter(commonCoords, imageCanvas.current.canvas, isMobile),\r\n null, clickedFeature, imageCanvas, isMobile\r\n );\r\n // const zoomFactor = (moreZoomFeatureGroups.includes(clickedFeature.partId)\r\n // && imageCanvas.current.pinchZoom.zoomFactor === 1 ) ? 3 : null // if null - it will be set in zoom to center func\r\n imageCanvas.current.pinchZoom.zoomToCenter(center, scale, false, allowFeatureScreen);\r\n setCanvasScale(imageCanvas.current.pinchZoom.options.tapZoomFactor);\r\n } else if (shouldZoomToTheBottom(clickedFeature.partId)) {\r\n $(\"html, body\").animate({scrollTop: document.body.scrollHeight}, 500);\r\n }\r\n if (!lookOpened) {\r\n setLookOpened(LOOK_OPENED_TYPES.featureZoom);\r\n setLookDemoPointsClicked(true);\r\n }\r\n if (IS_PRODUCT_JOURNEY && lookPageOpened) {\r\n setLookPageOpened(\"\");\r\n }\r\n }\r\n }\r\n if (changeUrl) {\r\n history.push(lookUrl);\r\n }\r\n return clickedFeature\r\n }\r\n\r\n const zoomToFeatureGroupByFeature = (zoomFeature) => {\r\n const featureGroup = zoomFeature.getParent();\r\n const isEmpty = (!zoomFeature && position) || (featureGroup && featureGroup.disabled);\r\n if (isEmpty) {\r\n if (!lookActiveFeature && position) {\r\n zoomFeature = featureGroup.getMatchingPositionFeature(position);\r\n if (zoomFeature) {\r\n featureGroup.layerPositions[position] = zoomFeature;\r\n }\r\n }\r\n if (zoomFeature) {\r\n featureGroup.activeFeature = zoomFeature;\r\n }\r\n console.log(\"zoomFeature featureGroup\", zoomFeature, featureGroup);\r\n }\r\n const layout = getCurrentLayout();\r\n if (zoomFeature) {\r\n if (!lookActiveFeature) {\r\n const parent = zoomFeature.getParent();\r\n parent.featureBeforeChange = zoomFeature;\r\n }\r\n setLookActiveFeature(zoomFeature);\r\n navFeatureCLick(zoomFeature);\r\n enableRelatedFeature(zoomFeature, addToCart, qtActiveCategory);\r\n\r\n if (isMobile) {\r\n // const closeOnly = zoomFeature && !layout.partIdExistInQtCategory(zoomFeature.partId) && !LOOK_WALLS.includes(zoomFeature.partId);\r\n const closeOnly = zoomFeature && !layout.partIdExistInQtCategory(zoomFeature.partId);\r\n if (closeOnly) {\r\n //history.push(getFeatureUrl(zoomFeature, true));\r\n } else {\r\n setLookActiveCategory(\"\");\r\n //history.push(getFeatureUrl(zoomFeature)); // always go to feature screen on mobile\r\n }\r\n } else {\r\n // history.push(getFeatureUrl(zoomFeature, !!lookActiveCategory))\r\n }\r\n\r\n updateCanvasCount();\r\n if (imageCanvas && imageCanvas.current && imageCanvas.current.pinchZoom && !LOOK_WALLS.includes(zoomFeature.partId)) {\r\n const commonCoords = getFeatureCoords(zoomFeature) || getCommonCoords(featureGroup || zoomFeature.getParent(), zoomFeature, imageCanvas.current.canvas);\r\n const center = getLayerCenter(commonCoords, imageCanvas.current.canvas, isMobile);\r\n const scale = imageCanvas.current.pinchZoom.options.tapZoomFactor;\r\n imageCanvas.current.pinchZoom.zoomToCenter(center, scale, true, layout.partIdExistInQtCategory(zoomFeature.partId));\r\n setCanvasScale(scale)\r\n }\r\n }\r\n }\r\n\r\n return children(zoomToFeatureGroup, zoomToFeatureGroupByFeature)\r\n};\r\n\r\nconst mapStateToProps = (store) => {\r\n const {lookOpened, lookActiveFeature, lookActiveCategory, lookCompatabilityAlert} = store.lookState;\r\n const {isMobile} = store.serverState;\r\n const {qtActiveCategory} = store.qtState;\r\n return {\r\n lookOpened,\r\n lookActiveFeature,\r\n isMobile,\r\n qtActiveCategory,\r\n lookActiveCategory,\r\n lookCompatabilityAlert,\r\n }\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n setLookActiveCategory,\r\n setLookActiveFeature,\r\n setLookOpened,\r\n addToCart,\r\n setCanvasScale,\r\n updateCanvasCount,\r\n setLookDemoPointsClicked,\r\n setLookPageOpened,\r\n};\r\n\r\nexport default withRouter(\r\n connect(mapStateToProps, mapDispatchToProps)(WithZoomToFeature)\r\n)\r\n","import * as types from \"./actionTypes\";\r\n\r\nexport const togglePriceWorksheetOpened = (priceWorksheetOpened) => ({\r\n type: types.TOGGLE_PRICE_WORKSHEET_OPENED,\r\n payload: {\r\n priceWorksheetOpened\r\n }\r\n});\r\n\r\n// export const setDiscountSections = (discountSections) => {\r\n// return (dispatch, getState) => {\r\n// const {financeCellsVisible} = getState().priceWorksheetState;\r\n// // if (currentSection) {\r\n// // const discounts = sortByOrder(currentSection.discounts).filter((disc) => !disc.nestedParent);\r\n// // }\r\n// const payload = {\r\n// discountSections,\r\n// }\r\n// if (financeCellsVisible.length !== Object.keys(DISCOUNT_FINANCE_CELLS).length) {\r\n// const sectionWithFinance = discountSections.find(sec => {\r\n// return sec.type !== DISCOUNT_SECTION_TYPES.finance && sec.discounts.some(discount => {\r\n// return discount.discountType === DISCOUNT_SECTION_TYPES.finance\r\n// })\r\n// });\r\n// if (sectionWithFinance) {\r\n// sectionWithFinance.discounts\r\n// }\r\n// }\r\n// dispatch({\r\n// type: types.SET_DISCOUNT_SECTIONS,\r\n// payload\r\n// })\r\n// }\r\n// };\r\nexport const setDiscountSections = (discountSections) => ({\r\n type: types.SET_DISCOUNT_SECTIONS,\r\n payload: {\r\n discountSections,\r\n }\r\n});\r\n\r\nexport const setCustomAddedDiscounts = (customAddedDiscounts) => ({\r\n type: types.SET_CUSTOM_ADDED_DISCOUNTS,\r\n payload: {customAddedDiscounts}\r\n})\r\n\r\nexport const setFinancePercentage = (financePercentage) => ({\r\n type: types.SET_FINANCE_PERCENTAGE,\r\n payload: {financePercentage}\r\n});\r\n\r\nexport const setAllFinanceOptionsPopupVisible = (allFinanceOptionsPopupVisible) => ({\r\n type: types.SET_ALL_FINANCE_OPTIONS_POPUP_VISIBLE,\r\n payload: {allFinanceOptionsPopupVisible}\r\n});\r\n\r\nexport const setFinanceCellsVisible = (financeCellsVisible) => ({\r\n type: types.SET_DISCOUNT_FINANCE_CELLS_VISIBLE,\r\n payload: {financeCellsVisible}\r\n});\r\n","import React, {Component} from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport {connect} from 'react-redux';\r\nimport {FormattedMessage, injectIntl} from \"react-intl\";\r\n\r\nimport {setCabinetsApplyTo, setCabinetsApplyToBathroom} from \"../../../actions/navigationFunctions\";\r\nimport {getCurrentLayout} from \"../../appLayout\";\r\nimport UiSelect from \"../../ui/select\";\r\nimport {CABINET_GROUP} from \"../core/constants\";\r\nimport Analytics from '../../../analytics';\r\nimport {CABINET_GROUP_BATHROOM} from \"../../bvSceneComponent/core/constants\";\r\nimport store from \"../../../store\";\r\nimport {getFeatureGroupName} from \"../../../misc/helpers\";\r\nimport {getMissingFeaturesAndClickThem} from \"../../look/lookNavigation/lookNavigationFunctions\";\r\n\r\nclass CabinetSwitchers extends Component {\r\n\r\n static propTypes = {\r\n activeSubPart: PropTypes.object.isRequired,\r\n isMobile: PropTypes.bool,\r\n };\r\n\r\n componentDidMount() {\r\n const cabinetsApplyTo = this.getCabinetsApplyTo();\r\n const setCabinetsApplyTo = this.getSetCabinetsApplyTo();\r\n if (!cabinetsApplyTo.includes(this.props.activeSubPart.partId)) {\r\n cabinetsApplyTo.push(this.props.activeSubPart.partId);\r\n setCabinetsApplyTo(cabinetsApplyTo);\r\n }\r\n }\r\n\r\n toggleCabinetsApplyTo = (partId) => {\r\n Analytics.sendClickEvent('cabinets-apply-to-' + partId);\r\n let cabinetsApplyTo = [...this.getCabinetsApplyTo()];\r\n const setCabinetsApplyTo = this.getSetCabinetsApplyTo();\r\n const existingIndex = cabinetsApplyTo.findIndex(cabinetsApplyToPartId => cabinetsApplyToPartId === partId);\r\n if (existingIndex > -1) {\r\n cabinetsApplyTo.splice(existingIndex, 1)\r\n } else {\r\n cabinetsApplyTo.push(partId)\r\n }\r\n setCabinetsApplyTo(cabinetsApplyTo);\r\n };\r\n\r\n getButtonName = (partId, layout) => {\r\n const {intl, fabricatorData} = this.props;\r\n if (intl.locale !== \"en-EN\") {\r\n const featureGroup = layout.getFeatureGroupByPartId(partId);\r\n if (featureGroup) {\r\n return getFeatureGroupName(featureGroup, intl, fabricatorData)\r\n }\r\n }\r\n switch (partId) {\r\n case \"top_cabinet\":\r\n return this.props.showAsDropdown ? \"upper cabinet\" : \"upper\";\r\n case \"bottom_cabinet\":\r\n return this.props.showAsDropdown ? \"lower cabinet\" : \"lower\";\r\n case \"center_island_cabinet\":\r\n return \"center island\";\r\n case \"vanity_cabinet\":\r\n return \"Cabinet\";\r\n case \"vanity_mirror\":\r\n return \"Mirror\";\r\n default:\r\n return \"\"\r\n }\r\n };\r\n\r\n static getFeatureDoorStyleFilter = (feature, filterName = \"DoorStyle\") => {\r\n if (!feature) {\r\n return null\r\n }\r\n const filterGroups = store.getState().filterState.filterGroups;\r\n const doorStyleFilterGroup = filterGroups.find(group => group.name === filterName);\r\n return doorStyleFilterGroup && (feature.dbFeature.fabFilterValueIDs[doorStyleFilterGroup.id] || feature.dbFeature.filterValueIDs[doorStyleFilterGroup.id])\r\n };\r\n\r\n static getNeededFeatureFromNavItems = (navigationItemName, featureGroup) => {\r\n return featureGroup.features.find((feature) => {\r\n const featureName = feature.getSplittedFeatureName().replace(`${feature.dbFeature.groupName} - `, \"\");\r\n return featureName && navigationItemName && (featureName === navigationItemName)\r\n });\r\n }\r\n\r\n static applyClickTo = async (navigationItemPart, ignoreLocked, cabinetsApplyTo, setCurrentFeature = false) => {\r\n const layout = getCurrentLayout();\r\n let missingFeatures = [];\r\n for (const neededPartId of cabinetsApplyTo) {\r\n const featureGroup = layout.getFeatureGroupByPartId(neededPartId);\r\n if (!featureGroup) {\r\n continue;\r\n }\r\n let neededFeature;\r\n if (document.kvConfig.visualizerType === \"bvScene\") {\r\n const doorStyles = CabinetSwitchers.getFeatureDoorStyleFilter(navigationItemPart, \"DoorStyle\");\r\n const materials = CabinetSwitchers.getFeatureDoorStyleFilter(navigationItemPart, \"Material\");\r\n neededFeature = doorStyles && featureGroup.features.find((feature) => {\r\n const featureDoorStyles = CabinetSwitchers.getFeatureDoorStyleFilter(feature, \"DoorStyle\");\r\n const featureMaterials = CabinetSwitchers.getFeatureDoorStyleFilter(feature, \"Material\");\r\n return doorStyles && featureDoorStyles && materials && featureMaterials\r\n && (featureDoorStyles.some(ds => doorStyles.includes(ds)))\r\n && (featureMaterials.some(mat => materials.includes(mat)))\r\n });\r\n } else {\r\n const navigationItemName = navigationItemPart.getSplittedFeatureName().replace(`${navigationItemPart.dbFeature.groupName} - `, \"\");\r\n neededFeature = CabinetSwitchers.getNeededFeatureFromNavItems(navigationItemName, featureGroup);\r\n if (!neededFeature\r\n && (!featureGroup.alreadyRequestedFeatureNames || !featureGroup.alreadyRequestedFeatureNames.includes(navigationItemName))) {\r\n missingFeatures.push({relatedItem: featureGroup, navigationItemName, setCurrentFeature: true})\r\n }\r\n }\r\n if (neededFeature) {\r\n if (setCurrentFeature) {\r\n featureGroup.activeFeatureBeforeAllWalls = featureGroup.activeFeature;\r\n }\r\n neededFeature.clickFromAllWalls(ignoreLocked);\r\n }\r\n }\r\n if (missingFeatures.length) {\r\n await getMissingFeaturesAndClickThem(missingFeatures, true)\r\n }\r\n return Promise.resolve()\r\n }\r\n\r\n static applyAllCabinets = (navigationItemPart, ignoreLocked) => {\r\n const propsCabinetsApplyTo = store.getState().navigationState[\r\n document.kvConfig.visualizerType === \"bvScene\" ? \"cabinetsApplyToBathroom\" : \"cabinetsApplyTo\"\r\n ];\r\n const cabinetsApplyTo = [...propsCabinetsApplyTo];\r\n const existingIndex = cabinetsApplyTo.findIndex(cabinetsApplyToPartId => cabinetsApplyToPartId === navigationItemPart.partId);\r\n if (existingIndex > -1) {\r\n cabinetsApplyTo.splice(existingIndex, 1); // remove already clicked partId\r\n }\r\n return CabinetSwitchers.applyClickTo(navigationItemPart, ignoreLocked, cabinetsApplyTo)\r\n };\r\n\r\n getValueText = () => {\r\n if (this.props.windowWidth < 720) {\r\n return this.setFeatureWizardStep(\"back\")}>\r\n
\r\n ) : null}\r\n - \r\n {this.props.allProducts || (this.props.showFeatureWizard && this.props.finishClicked) ? (\r\n
- this.props.exitFeatureWizard(this.props.availableSteps)}>\r\n
\r\n \r\n ) : null}\r\n {this.props.availableSteps.map((wizardButton, index) => {\r\n const prevStep = this.props.availableSteps[index - 1];\r\n const disabled = index && (!prevStep.selectedValueId\r\n || (fabricatorSettings.leadCapture && prevStep.selectedItemIsLocked && !this.props.isPhoneNumberValidated));\r\n const buttonName = this.props.getFilterDisplayName(wizardButton.filterName);\r\n const displayName = this.props.getFilterDisplayName(wizardButton.filterName, this.props.intl);\r\n return (\r\n - this.setFeatureWizardStep(index, disabled)}>\r\n {displayName}\r\n {this.props.availableSteps[index].selectedValueId && index !== this.props.featureWizardStep\r\n ? \r\n : null\r\n }\r\n \r\n )\r\n })}\r\n
this.setFeatureWizardStep(\"next\", lastStepIsDisabled)}>\r\n \r\n
\r\n ) : null}\r\n \r\n
\r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = (store) => ({\r\n cabinetsApplyTo: store.navigationState.cabinetsApplyTo,\r\n cabinetsApplyToBathroom: store.navigationState.cabinetsApplyToBathroom,\r\n windowWidth: store.serverState.windowWidth,\r\n fabricatorData: store.fabricatorState,\r\n});\r\n\r\nconst mapDispatchToProps = {\r\n setCabinetsApplyTo,\r\n setCabinetsApplyToBathroom\r\n};\r\n\r\nexport default injectIntl(\r\n connect(mapStateToProps, mapDispatchToProps)(CabinetSwitchers)\r\n);\r\n","import isEmpty from \"lodash/isEmpty\";\r\nimport trim from \"lodash/trim\";\r\nimport isEqual from \"lodash/isEqual\";\r\nimport uniqBy from \"lodash/uniqBy\";\r\n\r\nimport DesignNavigationItem from \"./designNavigationItem\";\r\nimport {Exception} from \"../common/exception\";\r\nimport {\r\n filterFeaturesByValues,\r\n getAllFeatureFilters,\r\n getFilterGroupValue,\r\n getFilterGroupValues\r\n} from \"../../misc/utils\";\r\nimport store from \"../../store\";\r\nimport featureIsMatchingDisplayLogic, {checkIfInCatProperty} from \"../../misc/displayLogic\";\r\nimport {addDisplayLogicCartItem, addToCart} from \"../../actions/actionFunctions\";\r\nimport {capitalizeFirstLetters} from \"../../misc/helpers\";\r\nimport {IS_LIXIL_UI} from \"../../config\";\r\nimport {LOOK_ROOM_TYPES} from \"../look/core/constants\";\r\nimport {getCurrentRoomType} from \"../appLayout\";\r\nimport {getOptionsFromNavItemsForFeature} from \"../look/lookNavigation/lookFunctions\";\r\nimport {getColorFilterValue} from \"../../misc/filtersFunctions\";\r\nimport {loadRelatedFeatures, setRoomNotInVisualizerProperty} from \"./featuresFunctions\";\r\nimport {getFeatureCropCoors} from \"../../misc/metaDataFunctions\";\r\n\r\nexport default class PartCommon { // Common Class for KV & BV common methods (Feature -> IntermediatePart -> Part -> PartCommon)\r\n\r\n loadCommon(relatedItemName, RelatedItemClass, dbFeature, loadFeature = true, shouldLoadInDifferentGroups = false) {\r\n if (relatedItemName) {\r\n if (!this[relatedItemName]) {\r\n this[relatedItemName] = new RelatedItemClass(true);\r\n this.relatedItems.push(this[relatedItemName]);\r\n }\r\n if (!this.categoryEnabled) {\r\n this.categoryEnabled = true\r\n }\r\n this[relatedItemName].getParent = () => this;\r\n if (loadFeature) {\r\n this[relatedItemName].load(dbFeature);\r\n }\r\n return !shouldLoadInDifferentGroups\r\n }\r\n return false\r\n }\r\n\r\n createRelatedItems() {\r\n if (this.relatedGroupNames) {\r\n this.relatedGroupNames.forEach(groupName => {\r\n this.load({groupName}, false)\r\n })\r\n }\r\n }\r\n\r\n navigationNoMetaSubItems(filters, searchText) {\r\n return this.returnUniqueNavFeatures(this.getFeaturesBySearchText(this.getFilteredFeaturesByFilters(filters, this.features), searchText))\r\n }\r\n\r\n /**\r\n * Returns an array of navigation items related to the given parent item\r\n * i.e. Floor - will return all Floor features\r\n * @returns {Array.Apply to
\r\n - \r\n {CABINETGROUPS.map(partId => {\r\n const hideButton = this.buttonIsDisabled(partId);\r\n return hideButton ? null : (\r\n
- this.toggleCabinetsApplyTo(partId)}>\r\n \r\n {this.getButtonName(partId, layout)}\r\n \r\n \r\n\r\n \r\n )\r\n })}\r\n
\r\n : \r\n \r\n
\r\n )\r\n }\r\n\r\n if (type === \"small\") {\r\n return \r\n {intl.messages[msg] ?
\r\n
\r\n )}\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {this.getMessage()}\r\n
\r\n \r\n {props.buttons && props.buttons.length ? props.buttons.map((button) => {\r\n return (\r\n \r\n )\r\n }) : null}\r\n
\r\n \r\n ;\r\n case ContentType.DisplayRoom:\r\n return this.contentRoom();\r\n case ContentType.Loading:\r\n return this.contentLoading();\r\n case ContentType.RoomScene:\r\n return \r\n )\r\n };\r\n\r\n contentDesignWizard = () => {\r\n const wizardGroups = this.state[this.getWizardGroupsByPartId(this.state.childNavigationItem.part.partId)];\r\n return (\r\n
\r\n )\r\n };\r\n\r\n}\r\n","import React, {Component} from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport {connect} from \"react-redux\";\r\nimport {FormattedMessage, injectIntl} from \"react-intl\";\r\n\r\nimport store from \"../../../../store\";\r\nimport * as actions from \"../../../../actions/actionFunctions\";\r\nimport UserLoginButton from \"../../../ui/userLoginButton\";\r\n\r\nimport {ContentType} from \"../../constants\";\r\nimport Analytics from \"../../../../analytics\";\r\nimport HomeMenu from \"../../../common/homeMenu\";\r\nimport ScheduleButton from \"../../../common/scheduleButton\";\r\nimport Config from \"../../../../config\";\r\nimport {getShowOtherLayouts} from \"../navUtils\";\r\n\r\nclass MobileNavigationButtons extends Component {\r\n\r\n static propTypes = {\r\n handleChangeContentType: PropTypes.func.isRequired,\r\n handleSearchInputChange: PropTypes.func.isRequired,\r\n resetEverything: PropTypes.func.isRequired,\r\n contentType: PropTypes.number.isRequired,\r\n searchText: PropTypes.string,\r\n parentNavigationItem: PropTypes.object,\r\n canvasId: PropTypes.string,\r\n userIsLoggedIn: PropTypes.bool,\r\n toggleUserPopup: PropTypes.func,\r\n };\r\n\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n designNavigationOpened: ''\r\n }\r\n }\r\n\r\n handleDropDownButtonClick = (type) => {\r\n Analytics.sendClickEvent('mobile-' + type + '-button-clicked');\r\n this.setState({\r\n designNavigationOpened: this.state.designNavigationOpened === type ? '' : type\r\n }, () => {\r\n this.state.designNavigationOpened\r\n ? window.addEventListener('click', this.handleDropdownWrapperBlur)\r\n : window.removeEventListener('click', this.handleDropdownWrapperBlur)\r\n })\r\n };\r\n\r\n handleResetButtonClick = () => {\r\n Analytics.sendClickEvent(\"mobile-nav-reset-button-question\");\r\n this.props.changeMessageBoxState({\r\n visible: true,\r\n message: \"messageBox.resetVisualizerState\",\r\n buttons: [{\r\n text: \"messageBox.buttonNo\",\r\n color: \"blue\",\r\n click: () => {\r\n Analytics.sendClickEvent(\"mobile-nav-reset-button-no\");\r\n this.props.changeMessageBoxState({visible:false});\r\n }\r\n },{\r\n text: \"messageBox.buttonYes\",\r\n color: \"green\",\r\n click: () => {\r\n Analytics.sendClickEvent(\"mobile-nav-reset-button-yes\");\r\n this.props.changeMessageBoxState({visible:false});\r\n setTimeout(() => {\r\n this.setState({\r\n designNavigationOpened: ''\r\n });\r\n this.props.resetEverything();\r\n }, 500);\r\n }\r\n }]\r\n });\r\n };\r\n\r\n changeContentType = (contentType) => {\r\n this.props.handleChangeContentType(contentType);\r\n this.resetDropDown();\r\n };\r\n\r\n resetDropDown = () => {\r\n this.setState({\r\n designNavigationOpened: ''\r\n }, () => {\r\n window.removeEventListener('click', this.handleDropdownWrapperBlur)\r\n })\r\n };\r\n\r\n handleDisplayRoomClick = () => {\r\n Analytics.sendClickEvent('mobile-navigation-display-room-button');\r\n this.changeContentType(ContentType.DisplayRoom);\r\n this.resetDropDown();\r\n };\r\n\r\n handleDropdownWrapperBlur = (e) => {\r\n const newButtonClick = e.target.closest('.menu-header__right-button');\r\n const dropDownClick = e.target.closest('[class*=\"menu-dropdown\"]');\r\n const userPopupClick = e.target.closest('[class*=\"user-popup\"]');\r\n if (!newButtonClick && !dropDownClick && !userPopupClick) {\r\n this.resetDropDown();\r\n }\r\n };\r\n\r\n handleFiltersClick = () => {\r\n Analytics.sendClickEvent('mobile-show-filters');\r\n store.dispatch(actions.showFiltersIfHidden('mobileNavigation'));\r\n };\r\n\r\n render() {\r\n const {intl} = this.props;\r\n const dashboardFramed = Config.isVisualizerManagement();\r\n const fabricatorSettings = this.props.fabricatorSettings;\r\n let showOtherLayouts = getShowOtherLayouts(fabricatorSettings);\r\n\r\n return (\r\n \r\n
\r\n )\r\n }\r\n}\r\n\r\nconst MessageBoxButton = ({button}) => {\r\n return (\r\n \r\n );\r\n};\r\n\r\nexport default injectIntl(MessageBox);\r\n","import {PartMenuType} from \"../../visComponents/constants\";\r\nimport {iCmp} from \"../../../misc/utils\";\r\nimport Layer from \"../../visComponents/layer\";\r\nimport {LayoutType, METADATA} from \"./constants\";\r\nimport PartCommon from \"../../visComponents/partCommon\";\r\n\r\nexport class Part extends PartCommon {\r\n\r\n constructor(isParent, isChild, menuType) {\r\n super();\r\n if (isChild || (isParent && menuType === PartMenuType.Simple)) {\r\n this.featuresList = {};\r\n this.featuresPartsList = {};\r\n this.modulePartsList = {};\r\n Object.keys(LayoutType).forEach(layoutName => {\r\n this.featuresList[layoutName] = [];\r\n this.featuresPartsList[layoutName] = [];\r\n this.modulePartsList[layoutName] = [];\r\n });\r\n this.allFeaturesReceived = false;\r\n this.realFeaturesReceived = false; // this prop is need on Scroll (if features count more that 1000)\r\n this.nextFeaturesPageToLoad = 0;\r\n this.activeFeature = null;\r\n this.placeholderFeature = null;\r\n this.shadowFeature = null;\r\n this.placeholderChanged = false;\r\n this.firstClick = {\r\n \"0\": false\r\n };\r\n this.activeLockedFeature = null;\r\n this.activeNotInVisualizerFeature = null; // is needed to display in the QT selected activeNotInVisualizerFeature, but render proper activeFeature layer(for example, countertop)\r\n // name = \"\";\r\n this.visible = true;\r\n this.categoryEnabled = false;\r\n this.layout = null;\r\n this.featureGroupVisible = true; // dashboard's feature group eye ball logic\r\n this.featureGroupEnabled = true; // dashboard's feature group checkbox logic\r\n this.selectedFeaturesHistory = []; // array of strings(names). updated every time item is selected\r\n this.filtersReceived = null; // array of filters values, comes from BE, for ex [1221, 347, 1124]\r\n }\r\n if (isParent) {\r\n this.partThumbnail = '';\r\n this.relatedItems = [];\r\n }\r\n if (!isChild && !isParent) {\r\n this.dbFeature = null;\r\n this.layer = new Layer(\"fireplace\");\r\n this._customDisplayName = null;\r\n this.notesList = {};\r\n }\r\n this.partName = \"\";\r\n }\r\n\r\n set features(featuresList) {\r\n // features can't be set directly, we need to change featuresList array\r\n }\r\n get features() {\r\n const layout = this.layout || this.getParent().layout;\r\n return this.featuresList[layout.getCurrentLayoutName()]\r\n }\r\n set featuresParts(featuresList) {\r\n // featuresParts can't be set directly, we need to change featuresPartsList array\r\n }\r\n get featuresParts() {\r\n const layout = this.layout || this.getParent().layout;\r\n return this.featuresPartsList[layout.getCurrentLayoutName()]\r\n }\r\n get moduleParts() {\r\n const layout = this.layout || this.getParent().layout;\r\n return this.modulePartsList[layout.getCurrentLayoutName()]\r\n }\r\n\r\n /**\r\n * Checks whether a given for condition matches the needed value (or array of values)\r\n * @param name {string}\r\n * @param value {string || array}\r\n * @returns {int} -1 - no such for condition, 0 - no match, 1 - matches\r\n */\r\n matchesMetaForCondition(name, value) {\r\n return this.metaData[name] && this.metaData[name].some(condValue => {\r\n return condValue === METADATA.ALL || (Array.isArray(value) ? value.some(val => iCmp(condValue, val)) : iCmp(condValue, value))\r\n });\r\n }\r\n\r\n matchesMetaForArrayOfConditions(arrayOfConditions) {\r\n return arrayOfConditions.every((condition) => {\r\n return this.matchesMetaForCondition(condition.propName, condition.propValue);\r\n })\r\n }\r\n}\r\n\r\n\r\n","import _ from 'lodash';\r\n\r\nimport workspace from \"../core/workspace\";\r\nimport {\r\n SHAPE_PART_ID,\r\n} from \"../../../constants\";\r\nimport sqftShape from \"../core/shapes/sqftShape\";\r\nimport ShapeHelper from \"../../../helpers/shapeHelper\";\r\nimport sqftShapeManager from \"./sqftShapeManager\";\r\nimport sqftSlabManager from \"./sqftSlabManager\";\r\nimport {renderErrorPopup} from \"../../../../../api/api-popups\";\r\n\r\nconst sqftShapeIntersectionsManager = {\r\n resetShapesIntersections() {\r\n const shapes = workspace.getShapes();\r\n for (const shape of shapes) {\r\n if (shape instanceof sqftShape) {\r\n shape.shapeIntersections.setOverlappedWithShapeIds([]);\r\n }\r\n }\r\n },\r\n updateShapesIntersections() {\r\n this.resetShapesIntersections();\r\n\r\n const shapes = workspace.getShapes();\r\n //console.log(\"----------------------\");\r\n for (const shape of shapes) {\r\n if (shape instanceof sqftShape) {\r\n for (const testShape of shapes) {\r\n if (testShape instanceof sqftShape\r\n && shape.id !== testShape.id\r\n ) {\r\n const shapeIntersections = ShapeHelper.getTwoShapesIntersections(shape, testShape);\r\n const shapeIds = Object.keys(shapeIntersections);\r\n if (shapeIds.length) {\r\n shape.shapeIntersections.addOverlappedWithShape(+shapeIds[0]);\r\n } else if (ShapeHelper.checkIfShapeContainsAnother(shape, testShape)) {\r\n //console.log(\"shapeId\", shape.id);\r\n //console.log(\"testShapeId\", testShape.id);\r\n testShape.shapeIntersections.addOverlappedWithShape(shape.id);\r\n shape.shapeIntersections.addOverlappedWithShape(testShape.id);\r\n }\r\n }\r\n }\r\n //console.log(\"shapeId\", shape.id);\r\n //console.log(\"shape.shapeIntersections.overlappedWithShapeIds\", shape.shapeIntersections.overlappedWithShapeIds);\r\n }\r\n }\r\n //this.logShapeFeatureIds()\r\n },\r\n logShapeFeatureIds() {\r\n const shapes = workspace.getShapes();\r\n for (const shape of shapes) {\r\n console.log(\"shape id\", shape.id);\r\n console.log(\"shape feature id\", shape.featureId);\r\n console.log(\"shape shapeIntersections overlappedWithShapeIds\", shape.shapeIntersections.overlappedWithShapeIds);\r\n }\r\n },\r\n logSnappedShapeGroups() {\r\n const shapes = workspace.getShapes();\r\n console.log(\"------\");\r\n for (const shape of shapes) {\r\n if (shape instanceof sqftShape) {\r\n console.log(\"shape id\", shape.id);\r\n console.log(\"shape area\", shape.getTotalArea());\r\n console.log(\"shape getSnappedShapeGroup\", shape.shapeAbsolute.getSnappedShapeGroup());\r\n console.log(\"shape shapeSlab getSnappedShapeGroup\", shape.shapeSlab.shapeAbsolute.getSnappedShapeGroup());\r\n }\r\n }\r\n console.log(\"------\");\r\n },\r\n updateSlabPlaceholderFeatureId() {\r\n const shapes = workspace.getShapes();\r\n for (const shape of shapes) {\r\n if (shape instanceof sqftShape\r\n && shape.partId === SHAPE_PART_ID.slabPlaceHolder\r\n ) {\r\n //console.log(\"update feature shape.shapeIntersections.overlappedWithShapeIds\", shape.shapeIntersections.overlappedWithShapeIds);\r\n if (shape.shapeIntersections.overlappedWithShapeIds.length >= 1) {\r\n const intersectedShape = sqftShapeManager.getShapeById(shape.shapeIntersections.overlappedWithShapeIds[0]);\r\n shape.setFeatureId(_.clone(intersectedShape.featureId));\r\n shape.setSlabParentPartId(_.clone(intersectedShape.slabParentPartId ? intersectedShape.slabParentPartId : intersectedShape.partId));\r\n }\r\n }\r\n }\r\n },\r\n\r\n showSlabPlaceHolderErrorMessage (\r\n slabPlaceHolderShapes = sqftSlabManager.getSlabPlaceHolderShapes(),\r\n callback = new Function()\r\n ) {\r\n for (const slabPlaceHolderShape of slabPlaceHolderShapes) {\r\n //console.log(\"slabPlaceHolderShape.overlappedWithShapeIds\", slabPlaceHolderShape.shapeIntersections.overlappedWithShapeIds);\r\n if (slabPlaceHolderShape.shapeIntersections.overlappedWithShapeIds.length >= 2) {\r\n const shapes = sqftShapeManager.getShapeByIds(slabPlaceHolderShape.shapeIntersections.overlappedWithShapeIds);\r\n if (\r\n !sqftShapeManager.hasSameSharedFeatureName(shapes)\r\n && !sqftShapeManager.hasSameFeatureId(shapes)\r\n ) {\r\n\r\n renderErrorPopup(workspace.intl.formatMessage({id: \"sqft.popup.system.slabPlaceholderMultipleOverlap\"}));\r\n callback();\r\n }\r\n }\r\n }\r\n }\r\n};\r\n\r\nexport default sqftShapeIntersectionsManager\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport $ from 'jquery';\r\nimport {FormattedMessage} from \"react-intl\";\r\n\r\nimport Navigation from \"./navigation\";\r\nimport Config from \"../../../config\";\r\nimport {ignoreDefault} from \"../../../misc/utils\";\r\nimport Sidebar from './desktop/sidebar';\r\nimport Body from './desktop/body';\r\nimport {ContentType, ContentTypeName, ContentTypeNameTranslate, PartMenuType} from \"../constants\";\r\nimport FeatureWizard from \"./featureWizard/featureWizard\";\r\nimport Analytics from \"../../../analytics\";\r\nimport {CABINET_WIZARD_BUTTONS, BACKSPLASH_TYPES, COUNTERTOP_WIZARD_BUTTONS} from \"../../kvComponent/core/constants\";\r\nimport {getCurrentLayout} from \"../../appLayout\";\r\nimport RoomSceneNavigation from \"./roomSceneNavigation\";\r\nimport {getAvailableRoomScenes, getShowOtherLayouts, getSideBarSubParts} from \"./navUtils\";\r\nimport DesktopNavigationLayoutsContent from \"./desktopNavigationLayoutsContent\";\r\n\r\nexport default class DesktopNavigationCommon extends Navigation {\r\n\r\n static propTypes = {\r\n refreshCB: PropTypes.func.isRequired,\r\n renderGreenLayerByZindex: PropTypes.func,\r\n changeMessageBoxState: PropTypes.func,\r\n setHoveredLayer: PropTypes.func,\r\n userIsLoggedIn: PropTypes.bool,\r\n isPhoneNumberValidated: PropTypes.bool,\r\n toggleUserPopup: PropTypes.func,\r\n setActiveFeature: PropTypes.func,\r\n setDemoPointClicked: PropTypes.func,\r\n activeFeature: PropTypes.object,\r\n fabricatorSettings: PropTypes.object,\r\n };\r\n\r\n constructor(props) {\r\n super(props);\r\n this.navWrapper = null;\r\n this.navigationIsClosing = false;\r\n }\r\n\r\n componentDidMount() {\r\n this.setState({\r\n navWidth: $(this.navWrapper).width()\r\n });\r\n this.props.setNavigationViewType(3);\r\n this._componentDidMount();\r\n }\r\n\r\n componentWillReceiveProps(nextProps) {\r\n this._componentWillReceiveProps(nextProps)\r\n }\r\n\r\n handleContextMenuClick = (menuItem) => {\r\n const layout = getCurrentLayout();\r\n if (!this.state.showNavigation) {\r\n let clickedParent = \"\", clickedButton = \"\";\r\n const isBacksplash = BACKSPLASH_TYPES.some(bType => bType === menuItem.text);\r\n if (menuItem.text === \"Edge Profile\") {\r\n if (this.props.setActiveNavigationFilter) {\r\n this.props.setActiveNavigationFilter(COUNTERTOP_WIZARD_BUTTONS[3].buttonId); // set active navigation filter\r\n this.props.setActiveNavigationFilterStepIndex(3);\r\n }\r\n } else if (isBacksplash) {\r\n const wallsParent = layout.parts[\"Walls\"];\r\n const backsplashSubPart = wallsParent.relatedItems.find(relItem => relItem.partId === \"backsplash\");\r\n clickedParent = \"Walls\";\r\n clickedButton = \"Backsplash\";\r\n if (this.props.setActiveNavigationFilter) {\r\n this.props.setActiveNavigationFilter(COUNTERTOP_WIZARD_BUTTONS[4].buttonId); // set active navigation filter\r\n this.props.setActiveNavigationFilterStepIndex(4);\r\n }\r\n const applyBacksplash = () => {\r\n const featureToClick = backsplashSubPart.getFeatureByBacksplashType(menuItem.text);\r\n if (featureToClick) {\r\n console.log(\"featureToClick\", featureToClick);\r\n featureToClick.handleClick();\r\n this.props.setActiveFeature(featureToClick);\r\n const parentItem = this.state.parentNavigationItem;\r\n this.setState({\r\n parentNavigationItem: null\r\n }, () => {\r\n this.setState({\r\n parentNavigationItem: parentItem\r\n })\r\n })\r\n }\r\n }\r\n if (!backsplashSubPart.allFeaturesReceived) {\r\n this.checkIfAllFeaturesReceived({part: backsplashSubPart}, null, applyBacksplash);\r\n } else {\r\n applyBacksplash()\r\n }\r\n }\r\n if (!isBacksplash) {\r\n clickedButton = menuItem.text;\r\n clickedParent = menuItem.subMenuParent || this.state.contextMenuOpen;\r\n }\r\n if (clickedParent && clickedParent.module) {\r\n clickedParent = \"Cabinet\"\r\n }\r\n //\r\n // console.log('clickedButton', clickedButton);\r\n // console.log('clickedParent', clickedParent);\r\n // console.log('menuItem', menuItem);\r\n if (clickedParent === \"Walls\" && (clickedButton === \"Left Shower Wall\" || clickedButton === \"Pony Wall\")) {\r\n this.ponyWallAndLeftWallClick(menuItem);\r\n }\r\n\r\n this.setState({\r\n showNavigation: true,\r\n contentType: ContentType.Design,\r\n contextMenuOpen: false,\r\n hoveredLayer: {}\r\n }, () => {\r\n this.menuOpened();\r\n this.triggerOpenNavigationMenu(clickedButton, clickedParent);\r\n $(document).on('click', this.handleWrapperBlur);\r\n this.setNewActiveFeature();\r\n if (menuItem.clickFeature && !isBacksplash) {\r\n const featureToClick = menuItem.part.features.find(feature => feature.partName === menuItem.subMenuText);\r\n if (featureToClick) {\r\n featureToClick.handleClick();\r\n }\r\n }\r\n });\r\n }\r\n };\r\n\r\n handleNavTabClick = (contentType) => (e) => {\r\n Analytics.sendClickEvent('nav-tab-click-' + contentType);\r\n // console.log('e', e);\r\n // console.log('contentType', contentType);\r\n ignoreDefault(e);\r\n if (this.state.contentType === contentType) {\r\n this.closeNavigation(e);\r\n } else if (!this.navigationIsClosing) {\r\n this.setContentType(contentType);\r\n }\r\n };\r\n\r\n openLayoutMenu = (callBack) => {\r\n const contentType = document.querySelector(\".tab.tab--room-layout\")\r\n ? ContentType.Layout\r\n : document.querySelector(\".tab.tab--room-ideas\")\r\n ? ContentType.DisplayRoom\r\n : ContentType.Layout;\r\n this.setState({\r\n showNavigation: true,\r\n contentType,\r\n contextMenuOpen: false,\r\n hoveredLayer: {}\r\n }, () => {\r\n this.setNewActiveFeature();\r\n this.menuOpened();\r\n $(document).on('click', this.handleWrapperBlur);\r\n callBack();\r\n });\r\n };\r\n\r\n menuOpened = () => {\r\n this._menuOpened();\r\n };\r\n\r\n setContentType = (contentType) => {\r\n this.setState({\r\n showNavigation: true,\r\n contentType,\r\n contextMenuOpen: false,\r\n hoveredLayer: {},\r\n activeDefaultPreset: null\r\n }, () => {\r\n this.menuOpened();\r\n $(document).on('click', this.handleWrapperBlur);\r\n if (contentType === ContentType.Design) {\r\n this.setNewActiveFeature();\r\n }\r\n });\r\n };\r\n\r\n closeNavigation = (e) => {\r\n Analytics.sendClickEvent('close-nav');\r\n if (e) {\r\n ignoreDefault(e);\r\n }\r\n this.props.setActiveFeature(null);\r\n this.navigationIsClosing = true;\r\n this.setState({\r\n showNavigation: false,\r\n showFilterSelection: false,\r\n showerWallWizardGroupsSelected: true,\r\n }, () => {\r\n setTimeout(() => {\r\n this.setState({\r\n contentType: ContentType.None,\r\n showFilterSelection: true,\r\n showerWallWizardGroupsSelected: false,\r\n searchText: \"\"\r\n }, () => {\r\n this.navigationIsClosing = false;\r\n })\r\n }, 500);\r\n $(document).off('click', this.handleWrapperBlur);\r\n });\r\n if (this.props.setActiveNavigationNames) {\r\n this.props.setActiveNavigationNames(\"\", \"\")\r\n }\r\n setTimeout(() => {\r\n if (this.props.toggleDesktopNavigation) {\r\n this.props.toggleDesktopNavigation(false)\r\n }\r\n if (this.props.setActiveNavigationFilter) {\r\n this.props.setActiveNavigationFilter(CABINET_WIZARD_BUTTONS[0].buttonId);\r\n this.props.setActiveNavigationFilterStepIndex(0);\r\n }\r\n }, 500);\r\n };\r\n\r\n handleWrapperBlur = (e) => {\r\n const overlayClick = e.target.closest('.nav-overlay');\r\n const navClick = e.target.closest('.nav');\r\n const lockClick = e.target.closest('[class*=\"lock\"]');\r\n const userPopupClick = e.target.closest('[class*=\"user-popup\"]');\r\n if (overlayClick && !navClick && !lockClick && !userPopupClick && !e.target.closest('.nav-pos')) {\r\n this.closeNavigation(e);\r\n }\r\n };\r\n\r\n handleHeaderBackClick = () => {\r\n this.resetNavigation();\r\n };\r\n\r\n updateSideBar = () => {\r\n this.setState({\r\n updateSidebarItems: true\r\n }, () => {\r\n this.setState({\r\n updateSidebarItems: false\r\n })\r\n })\r\n };\r\n\r\n handleSubPartClick = (childNavigationItem, activeNavigationFilter = null) => { // sidebar list item click\r\n const subItemPart = childNavigationItem.part;\r\n const childNavigationItemPartId = subItemPart.partId;\r\n if (Config.isDevMode() && this.state.childNavigationItem && (this.state.childNavigationItem.text === childNavigationItem.text || subItemPart.disabled)) {\r\n if (subItemPart.canBeDisabled) {\r\n subItemPart.disabled = !subItemPart.disabled;\r\n subItemPart.disabledClick();\r\n this.props.refreshCB();\r\n }\r\n }\r\n subItemPart.getParent().handleSubPartClick(subItemPart);\r\n this.setState({\r\n childNavigationItem,\r\n showFilterSelection: subItemPart.allFeaturesReceived, // show filters only if subItemPart has all features\r\n showerWallWizardGroupsSelected: false,\r\n searchText: \"\"\r\n }, () => {\r\n this.scrollAsideToMenuItem(childNavigationItem.text);\r\n this.rememberWallsSelection();\r\n this.checkIfAllFeaturesReceived(childNavigationItem, \"childNavigationItem\");\r\n });\r\n this.setNewActiveFeature(childNavigationItem);\r\n /*set new materials page subIndex*/\r\n this.setActivePartRelatedItemIndex(childNavigationItem);\r\n\r\n if (this.props.setActiveNavigationNames\r\n && this.state.parentNavigationItem && this.state.parentNavigationItem.text\r\n && childNavigationItem && childNavigationItem.part\r\n ) {\r\n this.props.setActiveNavigationNames(\r\n this.state.parentNavigationItem.text.toLowerCase().replace(/ /g,\"_\"),\r\n childNavigationItemPartId\r\n )\r\n }\r\n\r\n this.setNavigationFilterIfTheChildWasChanged(childNavigationItemPartId, activeNavigationFilter);\r\n\r\n if (childNavigationItem.text === \"Ceiling\") {\r\n $('html, body').animate({scrollTop: 0}, 800);\r\n }\r\n\r\n };\r\n\r\n scrollAsideToMenuItem = (menuItemText) => {\r\n const parent = $(document.querySelector('.customize-list'));\r\n const child = parent.find('.customize-list__item[data-text=\"'+ menuItemText +'\"]');\r\n if (parent && child) {\r\n const needToScroll = +child.data('index') >= 5;\r\n parent.animate({\r\n scrollTop: needToScroll ? parent.height() : 0 // -30 this is one nav item height\r\n }, 500);\r\n }\r\n };\r\n\r\n handleSubPartHover = childNavigationItem => {\r\n const activeFeature = childNavigationItem.part.activeFeature;\r\n if (activeFeature) {\r\n const zIndex = activeFeature.layer.zIndex;\r\n zIndex && this.props.renderGreenLayerByZindex(zIndex);\r\n }\r\n };\r\n\r\n scrollToDefault = () => {\r\n const featuresList = document.getElementsByClassName('categories-list');\r\n if (featuresList.length) {\r\n featuresList[0].scrollLeft = 0;\r\n }\r\n };\r\n\r\n handleMobileSelectClick = (e) => {\r\n if (!this.state.showNavigation || !this.state.parentNavigationItem) {\r\n e.stopPropagation();\r\n if (!this.state.parentNavigationItem) {\r\n this.setState({\r\n childNavigationItem: null\r\n })\r\n }\r\n }\r\n if (this.state.contentType !== ContentType.Design && !this.navigationIsClosing) {\r\n this.setContentType(ContentType.Design);\r\n }\r\n };\r\n\r\n navigationItemClickCommon = (item) => {\r\n if (!this.state.parentNavigationItem) {\r\n if (item.part.menuType === PartMenuType.Simple) {\r\n this.checkIfAllFeaturesReceived(item, \"parentNavigationItem\");\r\n }\r\n this.setState({\r\n parentNavigationItem: item,\r\n showFilterSelection: item.text === \"Floor\" && item.part.allFeaturesReceived, // show filters only if subItemPart has all features\r\n }, () => {\r\n const featuresList = document.getElementsByClassName('categories-list');\r\n if (featuresList.length) {\r\n featuresList[0].scrollLeft = 0;\r\n }\r\n // let activeFeature = item.part.activeFeature;\r\n const subParts = getSideBarSubParts(this.state.parentNavigationItem.part);\r\n if (subParts[0] && (subParts[0].part.menuType !== PartMenuType.Simple)) {\r\n this.handleSubPartClick(subParts[0])\r\n } else {\r\n setTimeout(() => {\r\n this.setNewActiveFeature({part: item.part});\r\n }, 0)\r\n }\r\n if (this.props.setActiveNavigationNames && this.state.parentNavigationItem && this.state.parentNavigationItem.text) {\r\n this.props.setActiveNavigationNames(\r\n this.state.parentNavigationItem.text.toLowerCase().replace(/ /g,\"_\"), \"\"\r\n )\r\n }\r\n });\r\n this.props.setDefaultSelectionGroup(item.part.partName);\r\n } else {\r\n this.props.setActiveFeature(item.part);\r\n }\r\n if (Config.isDevMode() || document.kvConfig.kioskMode) {\r\n console.log('item', item);\r\n if (item.part.dbFeature) {\r\n console.log('sharedFeatureName:', item.part.dbFeature.sharedFeatureName);\r\n }\r\n }\r\n };\r\n\r\n content = (useWizard, wizardGroups, useFilters) => {\r\n let content = null;\r\n switch (this.state.contentType) {\r\n case ContentType.Design:\r\n return this.contentDesign(useWizard, wizardGroups, useFilters);\r\n case ContentType.Layout:\r\n return \r\n
\r\n {this.getMessage()}
\r\n {buttonsElements}
\r\n \r\n {this.state.parentNavigationItem\r\n ? \r\n : null}\r\n {this.state.showFeatureWizard ? (\r\n useWizard && this.state.childNavigationItem && this.state.childNavigationItem.part && this.state.parentNavigationItem\r\n ? this.contentDesignWizard()\r\n : this.contentDesignBody(false, wizardGroups, useFilters)\r\n ) : this.contentDesignBody(useWizard, wizardGroups, useFilters)}\r\n {/*{this.state.parentNavigationItem*/}\r\n {/*? */}\r\n {/*: null}*/}\r\n
\r\n )\r\n };\r\n\r\n contentRoom = () => {\r\n let presets = this.checkedForLockedPresets();\r\n return (\r\n \r\n {presets.length ? (\r\n
\r\n )\r\n };\r\n\r\n contentLoading = () => {\r\n return \r\n }\r\n\r\n navigationMenuButtons = (availableNavButtons) => {\r\n return (\r\n - \r\n {presets.map((preset, index) => {\r\n return (\r\n
- this.handleDefaultPresetClick(index, preset.presetIsLocked)}\r\n style={{backgroundImage: `url(${preset.bv_screen})`}}/>\r\n )\r\n })}\r\n
\r\n {availableNavButtons.map((contentType) => {\r\n if (ContentTypeName[contentType] === \"Room Layout\") {\r\n const showOtherLayouts = getShowOtherLayouts(this.props.fabricatorSettings);\r\n if (!showOtherLayouts) {\r\n return null\r\n }\r\n }\r\n if (ContentTypeName[contentType] === \"Room Scene\") {\r\n const showOtherLayouts = getAvailableRoomScenes();\r\n if (!showOtherLayouts || !showOtherLayouts.length || (showOtherLayouts.length === 1)) {\r\n return null\r\n }\r\n }\r\n if (ContentTypeName[contentType] === \"Room Scene\" && (document.kvConfig.visualizerType === \"kvScene\" && !Config.isDevMode())) {\r\n return null\r\n }\r\n const tabClassName = ContentTypeName[contentType].toLowerCase().replace(\" \",\"-\")\r\n return (\r\n
\r\n )\r\n }\r\n\r\n}\r\n","import React, {Component} from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport {connect} from \"react-redux\";\r\nimport {FormattedMessage} from \"react-intl\";\r\n\r\nimport {\r\n setActiveNavigationFilter,\r\n setActiveNavigationFilterStepIndex,\r\n setCabinetNavigationFilterCompleted,\r\n setCountertopNavigationFilterCompleted, setNavigationViewType\r\n} from \"../../../../actions/navigationFunctions\";\r\nimport {CABINET_WIZARD_BUTTONS, COUNTERTOP_WIZARD_BUTTONS} from \"../../../kvComponent/core/constants\";\r\nimport {setSelectedFilters} from \"../../../../actions/actionFunctions\";\r\n\r\nclass NavigationFiltersSteps extends Component {\r\n\r\n static propTypes = {\r\n availableSteps: PropTypes.array,\r\n setFeatureWizardStep: PropTypes.func,\r\n exitFeatureWizard: PropTypes.func,\r\n showFeatureWizard: PropTypes.bool,\r\n isMobile: PropTypes.bool,\r\n };\r\n\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n mounted: false\r\n };\r\n this._isMounted = false;\r\n }\r\n\r\n componentDidMount() {\r\n this._isMounted = true;\r\n setTimeout(() => {\r\n if (this._isMounted) {\r\n this.setState({\r\n mounted: true\r\n });\r\n }\r\n }, 0)\r\n }\r\n componentWillUnmount() {\r\n this._isMounted = false;\r\n }\r\n\r\n exitFeatureWizard = () => {\r\n this.props.setActiveNavigationFilter(CABINET_WIZARD_BUTTONS[0].buttonId);\r\n this.props.setActiveNavigationFilterStepIndex(0);\r\n const cabinetPartIds = [\"top_cabinet\", \"bottom_cabinet\"];\r\n const countertopPartIds = [\"countertop\", \"center_island_countertop\", \"edge_profile\", \"center_island_edge\", \"backsplash\"];\r\n if (cabinetPartIds.includes(this.props.activePart.partId)) {\r\n this.props.setCabinetNavigationFilterCompleted(true);\r\n } else if (countertopPartIds.includes(this.props.activePart.partId)) {\r\n this.props.setCountertopNavigationFilterCompleted(true);\r\n }\r\n };\r\n\r\n getAvailableSteps = () => {\r\n let wizardButtons = [];\r\n switch (this.props.activePart.partId) {\r\n case \"top_cabinet\":\r\n case \"bottom_cabinet\":\r\n wizardButtons = CABINET_WIZARD_BUTTONS.filter(wizardButton => {\r\n if (wizardButton.buttonId === \"all_products\") {\r\n return this.props.isMobile\r\n }\r\n return wizardButton.buttonId !== \"inlay_type\"\r\n });\r\n break;\r\n case \"countertop\":\r\n case \"edge_profile\":\r\n case \"backsplash\":\r\n wizardButtons = COUNTERTOP_WIZARD_BUTTONS;\r\n break;\r\n case \"center_island_countertop\":\r\n case \"center_island_edge\":\r\n wizardButtons = COUNTERTOP_WIZARD_BUTTONS.slice(0, 4);\r\n break;\r\n }\r\n return wizardButtons;\r\n };\r\n\r\n setFeatureWizardStep = (nextStepIndex, disabled = false, lastStep) => {\r\n\r\n if (disabled) {\r\n return false;\r\n }\r\n const availableSteps = this.getAvailableSteps();\r\n if (lastStep) {\r\n this.exitFeatureWizard();\r\n } else {\r\n this.props.setActiveNavigationFilter(availableSteps[nextStepIndex].buttonId);\r\n this.props.setActiveNavigationFilterStepIndex(nextStepIndex);\r\n }\r\n const commonView = (this.props.windowWidth < 991) ? 4 : 3;\r\n const buttonId = availableSteps[nextStepIndex].buttonId;\r\n if (buttonId === COUNTERTOP_WIZARD_BUTTONS[2].buttonId) {\r\n this.props.setNavigationViewType(2)\r\n } else if (this.props.navigationViewType !== commonView) {\r\n this.props.setNavigationViewType(commonView)\r\n }\r\n if (buttonId !== COUNTERTOP_WIZARD_BUTTONS[2].buttonId) {\r\n this.props.setSelectedFilters([]); // reset filters on finish filters\r\n }\r\n };\r\n\r\n render() {\r\n const availableSteps = this.getAvailableSteps();\r\n const currentActiveIndex = this.props.activeNavigationFilterStepIndex;\r\n\r\n const firstStepIsActive = currentActiveIndex === 0;\r\n const lastStepIsActive = currentActiveIndex === availableSteps.length - 1;\r\n\r\n const cabinetNavigationFilterCompleted = this.props.isMobile && this.props.cabinetNavigationFilterCompleted && (\r\n this.props.activePart.partId === \"top_cabinet\" || this.props.activePart.partId === \"bottom_cabinet\"\r\n );\r\n // const countertopNavigationFilterCompleted = this.props.isMobile && this.props.countertopNavigationFilterCompleted && (\r\n // this.props.activePart.partId === \"countertop\" || this.props.activePart.partId === \"center_island_countertop\"\r\n // );\r\n\r\n const countertopWizardPartIds = [\"countertop\", \"center_island_countertop\", \"edge_profile\", \"center_island_edge\", \"backsplash\"];\r\n const isCountertopWizard = countertopWizardPartIds.includes(this.props.activePart.partId);\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n
\r\n )\r\n })}\r\n \r\n {this.props.isMobile ? null : (\r\n
\r\n )\r\n }\r\n}\r\n\r\n\r\nconst mapStateToProps = (store) => ({\r\n activeNavigationFilter: store.navigationState.activeNavigationFilter,\r\n activeNavigationFilterStepIndex: store.navigationState.activeNavigationFilterStepIndex,\r\n cabinetNavigationFilterCompleted: store.navigationState.cabinetNavigationFilterCompleted,\r\n countertopNavigationFilterCompleted: store.navigationState.countertopNavigationFilterCompleted,\r\n navigationViewType: store.navigationState.navigationViewType,\r\n windowWidth: store.serverState.windowWidth,\r\n});\r\n\r\nconst mapDispatchToProps = {\r\n setActiveNavigationFilter,\r\n setActiveNavigationFilterStepIndex,\r\n setCabinetNavigationFilterCompleted,\r\n setCountertopNavigationFilterCompleted,\r\n setNavigationViewType,\r\n setSelectedFilters\r\n};\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(NavigationFiltersSteps);\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport $ from 'jquery';\r\n\r\nimport Navigation from \"./navigation\";\r\nimport {ContentType, PartMenuType} from \"../constants\";\r\nimport MobileNavigationBodyNew from './mobile/mobileNavigationBodyNew';\r\nimport ActionTypes from \"../../../misc/actionTypes\";\r\nimport SelectionMobileViewSwitchers from './mobile/selectionMobileViewSwitchers';\r\nimport FeatureWizard from \"./featureWizard/featureWizard\";\r\nimport Analytics from \"../../../analytics\";\r\nimport {BACKSPLASH_TYPES, COUNTERTOP_WIZARD_BUTTONS} from \"../../kvComponent/core/constants\";\r\nimport MobileParentNavigationItems from \"./mobileParentNavigationItems\";\r\n\r\nimport {getCurrentLayout} from \"../../appLayout\";\r\nimport BacksplashSelect from \"../../selectionWindow/backsplashSelect\";\r\nimport {getCommonVisualizerType} from \"../../../config\";\r\nimport LayoutNavigationItem from \"../layoutNavigationItem\";\r\nimport {getAvailableLayouts, getSideBarSubParts} from \"./navUtils\";\r\n\r\nexport default class MobileNavigationCommon extends Navigation {\r\n\r\n static propTypes = {\r\n changeMessageBoxState: PropTypes.func.isRequired,\r\n resetEverything: PropTypes.func.isRequired,\r\n goToMaterialsInfo: PropTypes.func,\r\n setCanvasClass: PropTypes.func,\r\n canvasId: PropTypes.string,\r\n userIsLoggedIn: PropTypes.bool,\r\n toggleUserPopup: PropTypes.func,\r\n setActiveFeature: PropTypes.func,\r\n activeFeature: PropTypes.object,\r\n fabricatorSettings: PropTypes.object,\r\n isPhoneNumberValidated: PropTypes.bool,\r\n setDemoPointClicked: PropTypes.func\r\n };\r\n\r\n constructor(props) {\r\n super(props);\r\n this.state.render = true;\r\n this.state.searchInputFocused = false;\r\n }\r\n\r\n componentDidMount() {\r\n $(document).on(ActionTypes.OPEN_MOBILE_NAVIGATION, this.openMobileMenu);\r\n $(document).on(ActionTypes.CHANGE_MOBILE_MENU_CONTENT_TYPE, (event, contentType) => {\r\n this.handleChangeContentType(contentType, true);\r\n });\r\n this.props.setNavigationViewType(4);\r\n this._componentDidMount();\r\n }\r\n\r\n componentWillReceiveProps(nextProps) {\r\n const layout = getCurrentLayout();\r\n if (!this.state.designNavigationItems || !this.state.designNavigationItems.length) {\r\n this.setState({designNavigationItems: layout.designNavigationItems()});\r\n }\r\n if (nextProps.filterGroups.length) {\r\n let updateComponent = false;\r\n if (nextProps.filterGroups.length === this.props.filterGroups.length) {\r\n updateComponent = nextProps.filterGroups.some((filter, index) => {\r\n return filter.filterId !== this.props.filterGroups[index].filterId\r\n || filter.filterGroupId !== this.props.filterGroups[index].filterGroupId\r\n });\r\n }\r\n if (updateComponent) {\r\n this.reRenderComponent();\r\n }\r\n }\r\n if (nextProps.activeNavigationFilter !== this.props.activeNavigationFilter\r\n && COUNTERTOP_WIZARD_BUTTONS.some(btn => btn.buttonId === nextProps.activeNavigationFilter)) {\r\n if (this.state.parentNavigationItem && (\r\n this.state.parentNavigationItem.part.partName === \"Countertop\"\r\n || this.state.parentNavigationItem.part.partName === \"CenterIsland\"\r\n )) {\r\n const subParts = this.state.parentNavigationItem.part.subParts();\r\n let subPart = null;\r\n switch (nextProps.activeNavigationFilter) {\r\n case COUNTERTOP_WIZARD_BUTTONS[0].buttonId:\r\n case COUNTERTOP_WIZARD_BUTTONS[1].buttonId:\r\n case COUNTERTOP_WIZARD_BUTTONS[2].buttonId:\r\n subPart = (this.state.parentNavigationItem.part.partName === \"Countertop\")\r\n ? subParts.find(sPart => sPart.part.partId === \"countertop\")\r\n : subParts.find(sPart => sPart.part.partId === \"center_island_countertop\");\r\n break;\r\n case COUNTERTOP_WIZARD_BUTTONS[4].buttonId:\r\n subPart = (this.state.parentNavigationItem.part.partName === \"Countertop\")\r\n ? subParts.find(sPart => sPart.part.partId === \"countertop\")\r\n : subParts.find(sPart => sPart.part.partId === \"center_island_countertop\");\r\n break;\r\n case COUNTERTOP_WIZARD_BUTTONS[3].buttonId:\r\n subPart = (this.state.parentNavigationItem.part.partName === \"Countertop\")\r\n ? subParts.find(sPart => sPart.part.partId === \"edge_profile\")\r\n : subParts.find(sPart => sPart.part.partId === \"center_island_edge\");\r\n break;\r\n }\r\n if (subPart) {\r\n this.handleSubPartClick(subPart, nextProps.activeNavigationFilter)\r\n }\r\n }\r\n }\r\n this._componentWillReceiveProps(nextProps)\r\n }\r\n\r\n reRenderComponent = () => {\r\n this.setState({\r\n render: false\r\n }, () => {\r\n this.setState({\r\n render: true\r\n })\r\n })\r\n };\r\n\r\n parentCategoryClick = (parentItemText) => {\r\n const clickedParent = this.state.designNavigationItems.find(item => item.text === parentItemText);\r\n if (clickedParent.part.menuType === PartMenuType.Simple) {\r\n this.triggerOpenNavigationMenu(clickedParent.text);\r\n } else {\r\n const firstChild = getSideBarSubParts(clickedParent.part)[0];\r\n if (firstChild) {\r\n this.triggerOpenNavigationMenu(firstChild.text, clickedParent.text);\r\n }\r\n }\r\n if (parentItemText === \"Floor\") {\r\n $('html, body').animate({scrollTop: document.body.scrollHeight}, 800);\r\n } else if (parentItemText === \"Ceiling\") {\r\n $('html, body').animate({scrollTop: 0}, 800);\r\n }\r\n };\r\n\r\n openMobileMenu = () => {\r\n // $(window).trigger(ActionTypes.SET_CANVAS_SCALE);\r\n this.setState({\r\n showNavigation: true,\r\n contentType: ContentType.Design,\r\n contextMenuOpen: false,\r\n hoveredLayer: {}\r\n }, () => {\r\n this.menuOpened();\r\n setTimeout(() => {\r\n $(document).on('click', this.handleWrapperBlur);\r\n window.mobileMenuOpened = true;\r\n $(window).trigger(ActionTypes.DISABLE_PINCH_ZOOM);\r\n document.removeEventListener('click', this.handleContextMenuBlur);\r\n }, 0)\r\n });\r\n };\r\n\r\n scrollContentToTop = () => {\r\n const listContainer = document.querySelector('.menu-body__content');\r\n if (listContainer) {\r\n listContainer.scrollTop = 0;\r\n }\r\n };\r\n\r\n handleWrapperBlur = (e) => {\r\n const navClick = e.target.closest('[class*=\"menu\"]');\r\n const messageBoxClick = e.target.closest('[class*=\"message\"]');\r\n const lockClick = e.target.closest('[class*=\"lock\"]');\r\n const userPopupClick = e.target.closest('[class*=\"user-popup\"]');\r\n const twoFactorPopup = e.target.closest('[class*=\"TwoFactorAuth-popup\"]');\r\n const countryList = e.target.closest('[class*=\"country\"]');\r\n const searchClick = e.target.closest('[class*=\"search\"]');\r\n const wizardClick = e.target.closest('[class*=\"wiz\"]');\r\n const loadingClick = e.target.closest('[class*=\"full-screen-wrapper\"]');\r\n if (!navClick && !messageBoxClick && !searchClick && !lockClick && !userPopupClick && !twoFactorPopup\r\n && !countryList && !loadingClick && !window.touchMove\r\n && !wizardClick && !window.canvasIsDragging && document.body.classList.contains('body--bv')) {\r\n this.closeNavigation();\r\n }\r\n };\r\n\r\n closeNavigation = () => {\r\n if (!window.canvasIsDragging) {\r\n this.props.setCanvasClass('none', true);\r\n }\r\n this.setState({\r\n showNavigation: false,\r\n showFilterSelection: false,\r\n showerWallWizardGroupsSelected: true,\r\n }, () => {\r\n setTimeout(() => {\r\n this.setState({\r\n contentType: ContentType.None,\r\n searchText: \"\",\r\n showFilterSelection: true,\r\n showerWallWizardGroupsSelected: false,\r\n });\r\n this.props.setActiveFeature(null);\r\n // this.resetWizardSteps(); // after wizard unmounts\r\n }, 500);\r\n $(document).off('click', this.handleWrapperBlur);\r\n window.mobileMenuOpened = false;\r\n $(window).trigger(ActionTypes.ENABLE_PINCH_ZOOM);\r\n });\r\n };\r\n\r\n handleContextMenuBlur = (e) => {\r\n const navClick = e.target.closest('[class*=\"contextmenu\"]');\r\n // console.log('blur');\r\n if (!navClick && !window.touchMove) {\r\n this.setState({\r\n contextMenuOpen: false,\r\n hoveredLayer: {}\r\n }, () => {\r\n document.removeEventListener('click', this.handleContextMenuBlur);\r\n });\r\n }\r\n };\r\n\r\n handleChangeContentType = (contentType, resetNav = false) => {\r\n this.setState({\r\n contentType,\r\n parentNavigationItem: resetNav ? null : this.state.parentNavigationItem,\r\n childNavigationItem: resetNav ? null : this.state.childNavigationItem,\r\n });\r\n if (contentType === ContentType.Design) {\r\n this.setNewActiveFeature();\r\n }\r\n };\r\n\r\n /* start oldNav methods */\r\n\r\n scrollToDefault = (item) => {\r\n if (!window.canvasIsDragging) {\r\n this.props.setCanvasClass(item.text.toLowerCase().replace(/ /g, \"-\"));\r\n }\r\n this.scrollContentToTop();\r\n };\r\n\r\n /* end oldNav methods */\r\n\r\n resetEverything = () => {\r\n this.props.resetEverything();\r\n this.closeNavigation();\r\n setTimeout(() => {\r\n this.resetWizardSteps(); // after wizard unmounts\r\n }, 300)\r\n };\r\n\r\n menuOpened = () => {\r\n this.scrollContentToTop();\r\n this.setNewActiveFeature();\r\n this._menuOpened();\r\n };\r\n\r\n handleContextMenuClick = (menuItem) => {\r\n const layout = getCurrentLayout();\r\n if (!this.state.showNavigation) {\r\n\r\n let clickedParent = \"\", clickedButton = \"\";\r\n const isBacksplash = BACKSPLASH_TYPES.some(bType => bType === menuItem.text);\r\n\r\n if (menuItem.text === \"Edge Profile\") {\r\n if (this.props.setActiveNavigationFilter) {\r\n this.props.setActiveNavigationFilter(COUNTERTOP_WIZARD_BUTTONS[3].buttonId); // set active navigation filter\r\n this.props.setActiveNavigationFilterStepIndex(3);\r\n }\r\n } else if (isBacksplash) {\r\n const wallsParent = layout.parts[\"Walls\"];\r\n const backsplashSubPart = wallsParent.subParts().find(subPart => subPart.part.partId === \"backsplash\");\r\n this.checkIfAllFeaturesReceived(backsplashSubPart);\r\n const featureToClick = backsplashSubPart.part.getFeatureByBacksplashType(menuItem.text);\r\n // console.log(\"featureToClick\", featureToClick);\r\n if (featureToClick) {\r\n featureToClick.handleClick();\r\n }\r\n clickedParent = \"Walls\";\r\n clickedButton = \"Backsplash\";\r\n\r\n if (this.props.setActiveNavigationFilter) {\r\n this.props.setActiveNavigationFilter(COUNTERTOP_WIZARD_BUTTONS[4].buttonId); // set active navigation filter\r\n this.props.setActiveNavigationFilterStepIndex(4);\r\n }\r\n\r\n }\r\n if (!isBacksplash) {\r\n clickedButton = menuItem.text;\r\n clickedParent = menuItem.subMenuParent || this.state.contextMenuOpen;\r\n }\r\n\r\n if (clickedParent && clickedParent.module) {\r\n clickedParent = \"Cabinet\"\r\n }\r\n\r\n if (!window.canvasIsDragging) {\r\n this.props.setCanvasClass(clickedParent.toLowerCase().replace(/ /g, \"-\"));\r\n }\r\n\r\n if (clickedParent === \"Walls\" && (clickedButton === \"Left Shower Wall\" || clickedButton === \"Pony Wall\")) {\r\n this.ponyWallAndLeftWallClick(menuItem);\r\n }\r\n\r\n this.setState({\r\n showNavigation: true,\r\n contentType: ContentType.Design,\r\n contextMenuOpen: false,\r\n hoveredLayer: {}\r\n }, () => {\r\n this.menuOpened();\r\n this.triggerOpenNavigationMenu(clickedButton, clickedParent);\r\n $(document).on('click', this.handleWrapperBlur);\r\n window.mobileMenuOpened = true;\r\n $(window).trigger(ActionTypes.DISABLE_PINCH_ZOOM);\r\n $(document).off('click', this.handleContextMenuBlur);\r\n if (menuItem.clickFeature && !isBacksplash) {\r\n const featureToClick = menuItem.part.features.find(feature => feature.partName === menuItem.subMenuText);\r\n if (featureToClick) {\r\n featureToClick.handleClick();\r\n }\r\n }\r\n });\r\n }\r\n\r\n };\r\n\r\n getDisplayRoomContent = () => {\r\n let presets = this.checkedForLockedPresets();\r\n return (\r\n \r\n \r\n {availableSteps[currentActiveIndex]\r\n ? `Select a ${availableSteps[currentActiveIndex].text} for your ${this.props.activePart.partName}.`\r\n : null}\r\n \r\n {isCountertopWizard ? null : }\r\n
\r\n )}\r\n \r\n {cabinetNavigationFilterCompleted ? null : (\r\n
\r\n this.setFeatureWizardStep(currentActiveIndex - 1, firstStepIsActive)}>\r\n
\r\n )}\r\n - \r\n {availableSteps.map((wizardButton, index) => {\r\n const disabled = false;\r\n const buttonIcon = isCountertopWizard && wizardButton.buttonId === \"all_products\" ? \"stones\" : wizardButton.buttonId;\r\n return (\r\n
- this.setFeatureWizardStep(index, disabled)}>\r\n {wizardButton.text}\r\n \r\n )\r\n })}\r\n
this.setFeatureWizardStep(\r\n currentActiveIndex + 1,\r\n lastStepIsActive && isCountertopWizard,\r\n lastStepIsActive && !isCountertopWizard\r\n )}>\r\n \r\n
\r\n )}\r\n \r\n {presets.length ? (\r\n
\r\n )\r\n };\r\n\r\n contentDesignWizard = () => {\r\n const wizardGroups = this.state[this.getWizardGroupsByPartId(this.state.childNavigationItem.part.partId)];\r\n return (\r\n - \r\n {presets.map((preset, index) => ( //\r\n
- Analytics.sendClickEvent(\"default-preset-clicked-\" + index) && this.handleDefaultPresetClick(index, preset.presetIsLocked)}\r\n key={index}>\r\n \r\n\r\n
\r\n
\r\n ))}\r\n
No display room found
\r\n )}\r\n\r\n {this.state.contentType === ContentType.Design && activePart ? (\r\n \r\n {this.state.contentType === ContentType.Layout ? (\r\n
\r\n \r\n \r\n {activeSubPart && activeSubPart.partId === \"backsplash\" && getCommonVisualizerType() === \"kitchen\" ? (\r\n
\r\n ) : null}\r\n \r\n \r\n
\r\n ) : null}\r\n \r\n {activePart.menuType === PartMenuType.Complex && activePart.subTypes().length\r\n ? activePart.subTypes().map(subType => (\r\n \r\n )) : (\r\n 12 ? \" search-input--with-close\" : \"\")\r\n }\r\n value={this.state.searchText}\r\n onFocus={this.toggleSearchInputFocus}\r\n onBlur={this.toggleSearchInputFocus}\r\n onChange={this.handleSearchInputChange}\r\n placeholder={intl.formatMessage({id: \"mobileMenu.searchPlaceholder\"})}\r\n id=\"main-search\"\r\n />\r\n )}\r\n {this.state.searchText\r\n ?
\r\n \r\n
\r\n ) : null}\r\n {this.state.contentType === ContentType.Design ? (\r\n - \r\n {layoutNames.map(key => {\r\n return
\r\n {this.state.parentNavigationItem ? (\r\n this.state.render ? (\r\n }\r\n
\r\n ) : null}\r\n {this.state.contentType === ContentType.DisplayRoom ? this.getDisplayRoomContent() : null}\r\n {this.state.contentType === ContentType.Loading ? (\r\n \r\n ) : null}\r\n \r\n {this.props.mobileNav.length && this.props.windowWidth < 991 ? (\r\n
\r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = (store) => ({\r\n mobileNav: store.navigationState.mobileNav,\r\n windowWidth: store.serverState.windowWidth,\r\n fabricatorSettings: store.fabricatorState.settings,\r\n selectedFilters: store.filterState.selectedFilters,\r\n});\r\n\r\nconst mapDispatchToProps = {};\r\n\r\nexport default injectIntl(\r\n connect(mapStateToProps, mapDispatchToProps)(MobileNavigationButtons)\r\n)\r\n","import React, {Component} from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport {FormattedMessage} from \"react-intl\";\r\n\r\nimport DesignNavigationItem from \"../../../visComponents/designNavigationItem\";\r\nimport Analytics from \"../../../../analytics\";\r\n\r\nexport default class MobileNavigationAllWallsCheckbox extends Component {\r\n\r\n static propTypes = {\r\n parentNavigationItem: PropTypes.instanceOf(DesignNavigationItem).isRequired,\r\n toggleApplyWallsCheckbox: PropTypes.func.isRequired,\r\n };\r\n\r\n allWallsClick = () => {\r\n Analytics.sendClickEvent('all-walls-toggled');\r\n this.props.toggleApplyWallsCheckbox();\r\n setTimeout(() => {\r\n this.forceUpdate();\r\n }, 0)\r\n };\r\n\r\n render() {\r\n return (\r\n \r\n )\r\n }\r\n}\r\n","import React from \"react\";\r\nimport {connect} from \"react-redux\";\r\nimport PropTypes from \"prop-types\";\r\nimport {FormattedMessage} from \"react-intl\";\r\n\r\nimport ShareButton from './shareButton';\r\n// import { downloadCanvasImageById } from \"../misc/utils\";\r\nimport HomeMenu from \"./homeMenu\";\r\nimport Analytics from \"./../../analytics\";\r\nimport {showSchedulerPopup, toggleUserPopup} from \"../../actions/actionFunctions\";\r\nimport SaveButton from \"./saveButton\";\r\nimport QuoteButton from \"./quoteButton\";\r\nimport DesignButton from \"./designButton\";\r\nimport {UserPopupTypes} from \"../visComponents/constants\";\r\nimport ScheduleButton from \"./scheduleButton\";\r\nimport MinimizeButton from \"./minimizeButton\";\r\nimport {getCurrentLayout} from \"../appLayout\";\r\nimport {renderMessagePopup} from \"../../api/api-popups\";\r\nimport {saveQuote} from \"../../api/server-api\";\r\nimport Config from \"../../config\";\r\nimport NavigationRequests from \"../visComponents/navigation/navigationRequests\";\r\nimport {loaderDisable, loaderEnable} from \"../ui/loaderView\";\r\nimport {downloadCSV} from \"../../misc/downloadCSV\";\r\nimport PingPilotButton from \"../visComponents/pingPilotButton\";\r\n\r\nclass MainButtons extends NavigationRequests {\r\n\r\n static propTypes = {\r\n goBack: PropTypes.func,\r\n goToCart: PropTypes.func,\r\n changeMessageBoxState: PropTypes.func.isRequired,\r\n resetEverything: PropTypes.func.isRequired,\r\n canvasId: PropTypes.string,\r\n };\r\n\r\n handleResetButtonClick = () => {\r\n Analytics.sendClickEvent(\"reset-quote-question\");\r\n this.props.changeMessageBoxState({\r\n visible: true,\r\n message: \"messageBox.resetTitle\",\r\n buttons: [{\r\n text: \"messageBox.buttonNo\",\r\n color: \"blue\",\r\n click: () => {\r\n Analytics.sendClickEvent(\"reset-quote-cancel\");\r\n this.props.changeMessageBoxState({visible: false});\r\n }\r\n }, {\r\n text: \"messageBox.buttonYes\",\r\n color: \"green\",\r\n click: () => {\r\n Analytics.sendClickEvent(\"reset-quote-yes\");\r\n this.props.changeMessageBoxState({visible: false});\r\n this.props.resetEverything();\r\n }\r\n }]\r\n });\r\n };\r\n\r\n handleLoginButtonClick = (userPopupType) => {\r\n Analytics.sendClickEvent(\"main-login-button\");\r\n this.props.toggleUserPopup({\r\n userPopupOpened: true,\r\n userPopupType\r\n });\r\n };\r\n\r\n handleLogOutButtonClick = () => {\r\n Analytics.sendClickEvent(\"main-logout-button-question\");\r\n this.props.changeMessageBoxState({\r\n visible: true,\r\n message: \"messageBox.logoutTitle\",\r\n buttons: [{\r\n text: \"messageBox.buttonNo\",\r\n color: \"blue\",\r\n click: () => {\r\n Analytics.sendClickEvent(\"main-logout-button-no\");\r\n this.props.changeMessageBoxState({visible: false});\r\n }\r\n }, {\r\n text: \"messageBox.buttonYes\",\r\n color: \"green\",\r\n click: () => {\r\n Analytics.sendClickEvent(\"main-logout-button-yes\");\r\n this.props.changeMessageBoxState({visible: false});\r\n this.props.toggleUserPopup({\r\n userPopupOpened: false,\r\n userIsLoggedIn: false,\r\n isPhoneNumberValidated: false\r\n });\r\n }\r\n }]\r\n });\r\n };\r\n\r\n handleScheduleButtonClick = () => {\r\n const fabricatorSettings = this.props.fabricatorData.settings;\r\n Analytics.sendClickEvent('schedule-appointment-main-button');\r\n if (!this.props.isPhoneNumberValidated) {\r\n this.handleLoginButtonClick(UserPopupTypes.Schedule);\r\n return;\r\n }\r\n if (fabricatorSettings.enableCalendarForScheduling) {\r\n this.props.showSchedulerPopup(true)\r\n } else {\r\n saveQuote({submit: true, quoteRequestType: QuoteRequestType.ScheduleAnAppointment})\r\n .then(() => {\r\n renderMessagePopup(\"userPopup.messageBox.appointmentRequested\");\r\n });\r\n }\r\n };\r\n\r\n getAllFeatures = () => {\r\n const layout = getCurrentLayout();\r\n const parents = layout.getFeatures(true); // we need other groups too\r\n parents.forEach((parent) => {\r\n parent.relatedItems.forEach(async relItem => {\r\n await this.checkIfAllFeaturesReceived({part: relItem});\r\n })\r\n });\r\n };\r\n\r\n consoleTableAllFeatures = async () => {\r\n loaderEnable();\r\n const layout = getCurrentLayout();\r\n // console.log(\"Active Features:\", layout.getActiveFeatures(true));\r\n // console.log(\"layout.getActiveFeaturesAsObject:\", JSON.stringify(layout.getActiveFeaturesAsObject(false, true, true)));\r\n const parents = layout.getFeatures(true); // we need other groups too\r\n // console.log(\"go\");\r\n await this.getAllFeatures();\r\n // console.log(\"stop\");\r\n let allFeatures = [\r\n [\"groupName\", \"sharedFeatureName\", \"customDisplayName\", \"metaData\", \"filters\"]\r\n ];\r\n parents.forEach((parent) => {\r\n parent.relatedItems.forEach(relItem => {\r\n for (let i = 0; i <= relItem.features.length; i++) {\r\n const feature = relItem.features[i];\r\n if (feature && allFeatures.every(f => (f.sharedFeatureName !== feature.dbFeature.sharedFeatureName)\r\n || (f.groupName !== feature.dbFeature.groupName))) {\r\n allFeatures.push([\r\n feature.dbFeature.groupName,\r\n feature.dbFeature.sharedFeatureName,\r\n feature.dbFeature.customDisplayName,\r\n JSON.stringify(feature.dbFeature.metaData),\r\n JSON.stringify(feature.dbFeature.filters)\r\n ])\r\n }\r\n }\r\n })\r\n });\r\n console.log(allFeatures);\r\n loaderDisable();\r\n downloadCSV(allFeatures);\r\n }\r\n\r\n consoleActiveFeatures = () => {\r\n const layout = getCurrentLayout();\r\n console.log(\"Active Features:\", layout.getActiveFeatures(true));\r\n console.log(\"Active Lead Features:\", layout.getActiveNames());\r\n console.log(\"layout.getActiveFeaturesAsObject:\", JSON.stringify(layout.getActiveFeaturesAsObject(false, true, true)));\r\n this.consoleTableAllFeatures();\r\n }\r\n\r\n render() {\r\n const fabricatorSettings = this.props.fabricatorData.settings;\r\n const dashboardFramed = Config.isVisualizerManagement();\r\n const allPagesEnabled = !document.kvConfig.visualizerOnly;\r\n const quoteEnabled = fabricatorSettings.enableQuote;\r\n return (\r\n \r\n {this.state.designNavigationOpened === 'menu' ? (\r\n
\r\n - \r\n
- Analytics.sendClickEvent('menu-option-clicked-design') && this.changeContentType(ContentType.Design)}>\r\n
\r\n \r\n - \r\n
\r\n \r\n {/* - Quoted Items */}\r\n {showOtherLayouts ? (\r\n
- Analytics.sendClickEvent('menu-option-clicked-roomLayout') && this.changeContentType(ContentType.Layout)}>\r\n
\r\n \r\n ) : null}\r\n
\r\n \r\n {this.props.searchText ? (\r\n
\r\n ) : null}\r\n \r\n {this.props.windowWidth < 991 ? (\r\n \r\n \r\n {(fabricatorSettings.leadCapture && !(document.kvConfig.isBackend && document.kvConfig.jobId)) ? (\r\n \r\n ) : null}\r\n {Config.isDevMode() ? (\r\n \r\n ) : null}\r\n {(fabricatorSettings.showPricing) && this.props.goToCart && allPagesEnabled ? (\r\n \r\n ) : null}\r\n {fabricatorSettings.enableSharing && !dashboardFramed ? \r\n }\r\n\r\n let positionsArray = getPositionsArray(activePartId);\r\n\r\n positionsArray = positionsArray.filter(pos => {\r\n return parent && parent.getMatchingPositionFeature(pos, activeFeature);\r\n });\r\n\r\n return (\r\n \r\n \r\n )\r\n};\r\n\r\nGroheCartHeaderCommon.propTypes = {\r\n title: PropTypes.string.isRequired,\r\n subTitle: PropTypes.string,\r\n className: PropTypes.string,\r\n afterTitle: PropTypes.any,\r\n withSave: PropTypes.bool,\r\n subTitleValues: PropTypes.object,\r\n};\r\n\r\nconst mapStateToProps = (store) => {\r\n const {isMobile} = store.serverState;\r\n return {\r\n isMobile,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n setLookPageOpened,\r\n setLookOpened,\r\n};\r\n\r\nexport default injectIntl(\r\n withRouter(\r\n connect(mapStateToProps, mapDispatchToProps)(GroheCartHeaderCommon)\r\n )\r\n)\r\n","//********* SQFT *********//\r\nimport * as types from \"./actionTypes\";\r\n\r\nexport const toggleShowManualCalculation = (showManualCalculation) => ({\r\n type: types.TOGGLE_SHOW_MANUAL_CALCULATION,\r\n payload: {showManualCalculation}\r\n});\r\n\r\nexport const setSwitcherPosition = (switcherPosition) => ({\r\n type: types.SET_SWITCHER_POSITION,\r\n payload: {switcherPosition}\r\n});\r\n\r\nexport const addManualCalculateRow = (type) => ({\r\n type: types.ADD_MANUAL_CALCULATION_ROW,\r\n payload: {type}\r\n});\r\n\r\nexport const updateManualCalculateRow = (type, row, updatedRowValue) => ({\r\n type: types.UPDATE_MANUAL_CALCULATION_ROW,\r\n payload: {type, row, updatedRowValue}\r\n});\r\n\r\nexport const updateManualCalculateRows = (manualCalculationRows) => ({\r\n type: types.UPDATE_MANUAL_CALCULATION_ROWS,\r\n payload: manualCalculationRows\r\n});\r\n\r\nexport const deleteManualCalculateRow = (type, id) => ({\r\n type: types.DELETE_MANUAL_CALCULATION_ROW,\r\n payload: {type, id}\r\n});\r\n","import { hashHistory } from 'react-router';\r\nimport store from '../store';\r\nimport {getCurrentLayout} from \"../bvcomponents/appLayout\";\r\nimport {switchToWizardItem} from \"../bvcomponents/qkbPages/materialsWizard/useChangeWizardStepRoute\";\r\n\r\nexport const changeRoutePath = (activePart, nextRelatedItemIndex, withHidden = true) => {\r\n let selectionGroup = store.getState().selectionState.selectionGroup;\r\n if (!selectionGroup) {\r\n return\r\n }\r\n const partName = selectionGroup.toLowerCase();\r\n // console.log('activePart', activePart);\r\n if (!activePart) {\r\n return\r\n }\r\n if (activePart.menuType === 0 || activePart.partName === \"Toilet\") {\r\n const nextPath = 'materials/'+partName;\r\n if (!window.location.href.includes(nextPath)) {\r\n hashHistory.push(nextPath);\r\n }\r\n } else {\r\n const part = activePart.subParts(withHidden)[nextRelatedItemIndex];\r\n if (part) {\r\n const subPartName = part.part.partName.toLowerCase().replace(\" \",\"-\");\r\n const nextPath = 'materials/'+partName+'/'+subPartName;\r\n if (!window.location.href.includes(nextPath)) {\r\n hashHistory.push(nextPath);\r\n }\r\n }\r\n }\r\n};\r\n\r\nexport const getMaterialsFixedName = (qtCategoryName = \"\") => {\r\n return qtCategoryName.replace(/ /g,\"-\").replace(/\\//g,\"-\").toLowerCase()\r\n}\r\n\r\nexport const changeQTRoutePath = (qtCategoryName, nextRelatedItemIndex) => {\r\n\r\n const {wizardIsActive, wizardActiveItem} = store.getState().wizardState;\r\n if (wizardIsActive) {\r\n switchToWizardItem(wizardActiveItem);\r\n return\r\n }\r\n\r\n const layout = getCurrentLayout();\r\n if (!qtCategoryName) {\r\n qtCategoryName = store.getState().qtState.qtActiveCategory || layout.qtCategories[0].name;\r\n }\r\n if (!nextRelatedItemIndex && (nextRelatedItemIndex !== 0)) {\r\n nextRelatedItemIndex = store.getState().selectionState.activePartRelatedItemIndex;\r\n }\r\n let qtCategory = layout.qtCategories.find(qtCat => qtCat.name === qtCategoryName);\r\n if (!qtCategory) { //cases when we switched visualizer type and qtCategoryName is still an old one\r\n qtCategory = layout.qtCategories[0];\r\n }\r\n let partName = getMaterialsFixedName(qtCategoryName);\r\n let nextSubPart = qtCategory.subParts[nextRelatedItemIndex] || qtCategory.subParts[0];\r\n if (!nextSubPart) {\r\n console.log(\"ERROR, no subparts exist in the category\", qtCategory);\r\n if (layout.qtCategories[0] && layout.qtCategories[0].subParts.length) {\r\n hashHistory.push('materials/'+partName);\r\n return\r\n } else {\r\n for (let i = 0; i < layout.qtCategories.length; i++) {\r\n // here we check at least some category which has featureGroup with features!\r\n if (layout.qtCategories[i] && layout.qtCategories[i].subParts.length) {\r\n partName = getMaterialsFixedName(layout.qtCategories[i].name);\r\n nextSubPart = layout.qtCategories[i].subParts[0];\r\n break;\r\n }\r\n }\r\n }\r\n }\r\n if (!nextSubPart) {\r\n hashHistory.push(\"/materials\");\r\n return;\r\n }\r\n const subPartName = getMaterialsFixedName(nextSubPart.part.partName);\r\n const nextPath = 'materials/'+partName+'/'+subPartName;\r\n if (!window.location.href.includes(nextPath)) {\r\n hashHistory.push(nextPath);\r\n }\r\n\r\n return nextSubPart\r\n\r\n};\r\n","import React from \"react\";\r\nimport PropTypes from \"prop-types\";\r\nimport $ from 'jquery';\r\nimport {connect} from \"react-redux\";\r\n\r\nimport DemoPoint from \"./demoPoint\";\r\nimport Config from \"../../../config\";\r\n\r\nclass DemoPoints extends React.Component {\r\n\r\n static propTypes = {\r\n layoutFeatures: PropTypes.array.isRequired,\r\n layoutType: PropTypes.number.isRequired,\r\n canvasId: PropTypes.string.isRequired,\r\n };\r\n\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n points: [],\r\n currentLayoutType: null,\r\n dimensions: {\r\n width: this.props.canvasDimensions.width,\r\n height: this.props.canvasDimensions.height\r\n },\r\n }\r\n }\r\n\r\n componentDidMount() {\r\n this.setPoints(this.props);\r\n this.handleResize();\r\n $(window).on('resize', this.handleResize);\r\n }\r\n\r\n componentWillReceiveProps(nextProps) {\r\n if (this.state.currentLayoutType !== nextProps.layoutType) {\r\n this.setPoints(nextProps);\r\n }\r\n }\r\n\r\n componentWillUnmount() {\r\n $(window).off('resize', this.handleResize);\r\n }\r\n\r\n setPoints = (nextProps) => {\r\n const points = [];\r\n nextProps.layoutFeatures.forEach((parentGroup) => {\r\n // console.log(\"parentGroup\", parentGroup);\r\n switch (document.kvConfig.visualizerType) {\r\n case \"Bathroom\":\r\n case \"BV\": {\r\n if (parentGroup.partName === \"Walls\") {\r\n const pointB = this.getBathroomPointPositionByPartName(\"Wall B\");\r\n const pointC = this.getBathroomPointPositionByPartName(\"Wall C\");\r\n points.push(pointB, pointC);\r\n } else if (parentGroup.partName === \"Vanity\") {\r\n const vanity = this.getBathroomPointPositionByPartName(\"Vanity\");\r\n const mirror = this.getBathroomPointPositionByPartName(\"Mirror\");\r\n points.push(vanity, mirror);\r\n } else if (!(nextProps.layoutType === 0 &&\r\n (parentGroup.partName === \"Window\" || parentGroup.partName === \"Bathtub\"))) {\r\n const point = this.getBathroomPointPositionByPartName(parentGroup.partName, nextProps);\r\n if (point.left || point.top) {\r\n points.push(point);\r\n }\r\n }\r\n break;\r\n }\r\n case \"bvScene\": {\r\n const bvScenePoints = [\r\n {\r\n partId: \"shower_head\",\r\n left: 925,\r\n top: 400,\r\n },\r\n {\r\n partId: \"toilet\",\r\n left: 380,\r\n top: 820,\r\n },\r\n {\r\n partId: \"vanity_sink\",\r\n left: 530,\r\n top: 670,\r\n },\r\n {\r\n partId: \"bathtub_body\",\r\n left: 1520,\r\n top: 760,\r\n },\r\n ]\r\n parentGroup.relatedItems.forEach(relItem => {\r\n const relPoint = bvScenePoints.find(bvScenePoint => {\r\n return bvScenePoint.partId === relItem.partId && !relItem.disabled\r\n })\r\n if (relPoint) {\r\n points.push(relPoint)\r\n }\r\n });\r\n break;\r\n }\r\n case \"Kitchen\":\r\n case \"KV\": {\r\n switch (parentGroup.partName) {\r\n case \"Walls\": {\r\n points.push(\r\n this.getKitchenPointPosition(\"left_wall\"),\r\n this.getKitchenPointPosition(\"right_wall\"),\r\n this.getKitchenPointPosition(\"ceiling\")\r\n );\r\n break;\r\n }\r\n case \"Appliances\": {\r\n points.push(\r\n this.getKitchenPointPosition(\"hood\"),\r\n this.getKitchenPointPosition(\"range\"),\r\n this.getKitchenPointPosition(\"fridge\"),\r\n this.getKitchenPointPosition(\"dishwasher\")\r\n );\r\n break;\r\n }\r\n case \"Countertop\": {\r\n points.push(\r\n this.getKitchenPointPosition(\"countertop3\"),\r\n this.getKitchenPointPosition(\"sink1\")\r\n );\r\n break;\r\n }\r\n case \"Cabinet\": {\r\n points.push(\r\n this.getKitchenPointPosition(\"top_cabinet\"),\r\n this.getKitchenPointPosition(\"top_cabinet2\"),\r\n this.getKitchenPointPosition(\"bottom_cabinet\")\r\n );\r\n break;\r\n }\r\n case \"CenterIsland\": {\r\n points.push(\r\n this.getKitchenPointPosition(\"center_island_counterop\"),\r\n this.getKitchenPointPosition(\"center_island_cabinet\"),\r\n this.getKitchenPointPosition(\"center_island_chairs\")\r\n );\r\n break;\r\n }\r\n }\r\n break;\r\n }\r\n }\r\n });\r\n this.setState({\r\n points,\r\n currentLayoutType: nextProps.layoutType\r\n });\r\n };\r\n\r\n handleResize = () => {\r\n const canvas = $(document.getElementById(this.props.canvasId));\r\n this.setState({\r\n dimensions: {\r\n width: canvas.width(),\r\n height: canvas.height()\r\n }\r\n });\r\n };\r\n\r\n getBathroomPointPositionByPartName = (partName, nextProps = this.props) => {\r\n switch (partName) {\r\n case \"Vanity\":\r\n return {\r\n left: 356,\r\n top: 720,\r\n };\r\n case \"Mirror\":\r\n return {\r\n left: 318,\r\n top: 422,\r\n };\r\n case \"Toilet\":\r\n return {\r\n left: 625,\r\n top: 740,\r\n };\r\n case \"Floor\":\r\n return {\r\n left: nextProps.layoutType === 0 ? 762 : 990,\r\n top: 990,\r\n };\r\n case \"Window\":\r\n return {\r\n left: 1290,\r\n top: 475,\r\n };\r\n case \"Bathtub\":\r\n return {\r\n left: 1450,\r\n top: 915,\r\n };\r\n case \"Shower\":\r\n return {\r\n left: 930,\r\n top: 600,\r\n };\r\n case \"Wall B\":\r\n return {\r\n left: 600,\r\n top: 440,\r\n };\r\n case \"Wall C\":\r\n return {\r\n left: 1480,\r\n top: 580,\r\n };\r\n default :\r\n return {\r\n left: 0,\r\n top: 0,\r\n }\r\n }\r\n };\r\n\r\n getKitchenPointPosition = (partId, nextProps = this.props) => {\r\n nextProps === 12 ? null : false;\r\n switch (partId) {\r\n case \"left_wall\":\r\n return {\r\n left: 450,\r\n top: 550,\r\n };\r\n case \"right_wall\":\r\n return {\r\n left: 1050,\r\n top: 550,\r\n };\r\n case \"ceiling\":\r\n return {\r\n left: 740,\r\n top: 120,\r\n };\r\n case \"hood\":\r\n return {\r\n left: 1020,\r\n top: 400,\r\n };\r\n case \"range\":\r\n return {\r\n left: 1000,\r\n top: 680,\r\n };\r\n case \"fridge\":\r\n return {\r\n left: 175,\r\n top: 600,\r\n };\r\n case \"dishwasher\":\r\n return {\r\n left: 720,\r\n top: 655,\r\n };\r\n case \"top_cabinet\":\r\n return {\r\n left: 740,\r\n top: 410,\r\n };\r\n case \"top_cabinet2\":\r\n return {\r\n left: 1380,\r\n top: 370,\r\n };\r\n case \"bottom_cabinet\":\r\n return {\r\n left: 1260,\r\n top: 780,\r\n };\r\n case \"center_island_counterop\":\r\n return {\r\n left: 600,\r\n top: 750,\r\n };\r\n case \"center_island_cabinet\":\r\n return {\r\n left: 1040,\r\n top: 890,\r\n };\r\n case \"center_island_chairs\":\r\n return {\r\n left: 390,\r\n top: 870,\r\n };\r\n case \"sink1\":\r\n return {\r\n left: 1430,\r\n top: 670,\r\n };\r\n case \"countertop3\":\r\n return {\r\n left: 1450,\r\n top: 930,\r\n };\r\n default :\r\n return {\r\n left: 0,\r\n top: 0,\r\n }\r\n }\r\n };\r\n\r\n render() {\r\n const dashboardFramed = Config.isVisualizerManagement();\r\n return this.state.dimensions.width && this.state.dimensions.height && !dashboardFramed ? (\r\n \r\n : null}\r\n {showLockedView\r\n ? \r\n : null}\r\n
\r\n : null}\r\n
\r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = (store) => {\r\n return {\r\n mobileNav: store.navigationState.mobileNav,\r\n cartItems: store.cartState.cartItems,\r\n windowWidth: store.serverState.windowWidth,\r\n fabricatorData: store.fabricatorState,\r\n isPhoneNumberValidated: store.userState.isPhoneNumberValidated,\r\n userIsLoggedIn: store.userState.userIsLoggedIn,\r\n };\r\n};\r\n\r\nexport default connect(mapStateToProps, {\r\n showSchedulerPopup,\r\n toggleUserPopup\r\n})(MainButtons);\r\n","import PropTypes from 'prop-types';\r\nimport uuid from 'uuid';\r\nimport {hashHistory} from \"react-router\";\r\nimport $ from \"jquery\";\r\n\r\nimport {loaderDisable, loaderEnable} from \"../ui/loaderView\";\r\nimport {getJobIdPreset, getQtCategories, saveQuote} from \"../../api/server-api\";\r\nimport ActionTypes from \"../../misc/actionTypes\";\r\nimport JsonApi from \"../../api/jsonApi\";\r\nimport NavigationRequests from \"./navigation/navigationRequests\";\r\nimport Config, {\r\n // getCommonVisualizerType,\r\n IS_LIXIL_UI,\r\n IS_LOOK_JOURNEY, IS_OFFLINE_MODE,\r\n IS_QKB_UI\r\n} from \"../../config\";\r\nimport {isNewlyCreatedJob, parseJobIdResponse} from \"../../api/parseResponse\";\r\nimport {getImagePromiseFromLayout} from \"../../misc/getCanvasImageFromLayout\";\r\nimport {createCartList, getLocalStorageItem, getParsedLookUrl} from \"../look/lookNavigation/lookFunctions\";\r\nimport {getDefaultPresetByLook, saveQuoteAndShare} from \"../look/lookNavigation/lookFunctions2\";\r\nimport store from \"../../store\";\r\nimport {GROHE_ON_OPEN_ACTION} from \"../look/iframeIntegration\";\r\nimport {addToCart} from \"../../actions/actionFunctions\";\r\n// import {setContractBlob} from \"../../actions/contractsActions\";\r\nimport {setAllowRouting} from \"../../actions/serverFunctions\";\r\nimport {renderErrorPopup} from \"../../api/api-popups\";\r\nimport {updatePresetRoomLayout} from \"../../misc/presetsFunctions\";\r\nimport {setShopPageLoaded} from \"../../actions/shopFunctions\";\r\nimport {showWizardInsteadOfQT} from \"../look/lookNavigation/lookMain/lookWizard/lookWizardFunctions\";\r\nimport {setAssignQuoteOfflineData} from \"../../actions/assignPopupFunctions\";\r\nimport {getAdditionalFeaturesOnScroll} from \"../../api/look-api\";\r\nimport {VISUALIZER_MANAGEMENT_ACTIONS} from \"../../misc/constants\";\r\nimport {parseWizardResponse} from \"../../misc/loadVisualizer\";\r\nimport {LOCAL_STORAGE_KEYS, LOOK_OVERLAYS} from \"../look/core/constants\";\r\nimport {setLookOverlayOpened} from \"../../actions/lookFunctions\";\r\nimport {updateCurrentQuote} from \"../../misc/quotesFunctions\";\r\nimport {getContracts, setContractBlobs, shouldUseContractSigning} from \"../popups/contractSign/contractsFunctions\";\r\nimport {getOfflineReceiptImages} from \"../../actions/printFunctions\";\r\n// import {setUseFeaturesLightRequest} from \"../../actions/navigationFunctions\";\r\n\r\nexport default class Visualizer extends NavigationRequests {\r\n\r\n static defaultProps = {\r\n useMouseHovering: true,\r\n useTouchZoom: true,\r\n };\r\n\r\n static propTypes = {\r\n toggleUserPopup: PropTypes.func,\r\n cartItems: PropTypes.array,\r\n useMouseHovering: PropTypes.bool,\r\n useTouchZoom: PropTypes.bool,\r\n userIsLoggedIn: PropTypes.bool,\r\n isPhoneNumberValidated: PropTypes.bool,\r\n handleToggleFeatureInfo: PropTypes.func,\r\n jobId: PropTypes.number,\r\n mobileNav: PropTypes.array,\r\n };\r\n\r\n constructor(props) {\r\n super(props);\r\n this.imageCanvas = null;\r\n this.navBar = null;\r\n this.loadByTheDefault = null;\r\n this.needToSaveQuote = false;\r\n this.state = {\r\n messageBoxState: {\r\n visible: false\r\n },\r\n canvasId: uuid.v4(),\r\n lockedView: false,\r\n activeFeature: null,\r\n demoPointClicked: false,\r\n allowRouting: false,\r\n };\r\n // if (this.props.visualizersLoaded.includes(this.layout.visualizerType)) {\r\n // loaderEnable()\r\n // }\r\n if (IS_LIXIL_UI) { // temporary removed because of additional rooms loading\r\n loaderEnable();\r\n }\r\n }\r\n\r\n setSubscribers() {\r\n $(window).on(ActionTypes.CHANGE_LAYOUT, this.handleRefresh);\r\n $(window).on(ActionTypes.UPDATE_ALL_ITEMS, this.handleRefresh);\r\n $(window).on(ActionTypes.CANVAS_SCALE_CHANGED, this.canvasScaleChanged);\r\n }\r\n\r\n componentWillReceiveProps(nextProps) {\r\n if (nextProps.bvOpened && !this.props.bvOpened) {\r\n this.handleRefresh();\r\n if (IS_QKB_UI && !this.props.visualizerTutorialFinished && this.props.showVisualizerTutorial) {\r\n this.props.showVisualizerTutorial(true);\r\n }\r\n }\r\n if (!nextProps.showRestorePopup && this.props.showRestorePopup) {\r\n this.changeMessageBoxState({visible:false});\r\n try {\r\n window.localStorage.removeItem(this.layout.localStorageKey);\r\n } catch (ex) { console.log(\"localStorage exception\", ex); }\r\n }\r\n if (IS_QKB_UI && nextProps.initialFlowRoom && (nextProps.initialFlowRoom !== this.props.initialFlowRoom)) {\r\n this.tryToSetSelectedRoom()\r\n }\r\n }\r\n\r\n componentWillUnmount() {\r\n $(window).off(ActionTypes.CHANGE_LAYOUT, this.handleRefresh);\r\n $(window).off(ActionTypes.UPDATE_ALL_ITEMS, this.handleRefresh);\r\n $(window).off(ActionTypes.CANVAS_SCALE_CHANGED, this.canvasScaleChanged);\r\n }\r\n\r\n shouldComponentUpdate() {\r\n return !window.requestInProcess\r\n }\r\n\r\n applyStoredItems = () => {\r\n loaderEnable();\r\n this.changeMessageBoxState({visible:false});\r\n try {\r\n const bvState = JSON.parse(window.localStorage.getItem(this.layout.localStorageKey));\r\n this.layout.setItemsFromBvState(bvState, true);\r\n } catch (ex) { console.log(\"applyStoredItems localStorage exception\", ex); }\r\n loaderDisable();\r\n };\r\n\r\n setIframeMessaging = () => {\r\n if (Config.isVisualizerManagement()) {\r\n window.addEventListener(\"message\", (event) => {\r\n if (event.data && (event.data.action === VISUALIZER_MANAGEMENT_ACTIONS.getState\r\n || event.data.action === VISUALIZER_MANAGEMENT_ACTIONS.checkState)) {\r\n setTimeout(() => {\r\n getImagePromiseFromLayout(this.layout)\r\n .then(response => {\r\n const bvState = this.layout.getActiveFeaturesAsObject(false, false, true);\r\n bvState.bv_screen = response;\r\n // console.log('bvState.bv_screen:', bvState.bv_screen);\r\n window.parent.postMessage({\r\n action: event.data.action,\r\n payload: bvState\r\n }, \"*\");\r\n })\r\n }, 0)\r\n }\r\n if (event.data && event.data.action === VISUALIZER_MANAGEMENT_ACTIONS.setState) {\r\n if ((document.kvConfig.visualizerType === \"bvLook\")) {\r\n event.data.bvState = updatePresetRoomLayout(event.data.bvState);\r\n console.log(\"applying new state...\", event.data.bvState);\r\n }\r\n this.layout.setItemsFromBvState(event.data.bvState);\r\n }\r\n });\r\n }\r\n\r\n if (window.parent) {\r\n window.parent.postMessage({\r\n action: VISUALIZER_MANAGEMENT_ACTIONS.visualizerIsLoaded,\r\n }, \"*\");\r\n }\r\n\r\n };\r\n\r\n canvasScaleChanged = (event, canvas_scale) => {\r\n if (canvas_scale !== 1) {\r\n this.setDemoPointClicked();\r\n $(window).off(ActionTypes.CANVAS_SCALE_CHANGED);\r\n }\r\n }\r\n\r\n async setVisualizerInfo(mainResponse, bvGroupsResponse, qtCategories, layoutTypes, userIsLoggedIn, savedTempData) {\r\n if (Config.isDevMode() || document.kvConfig.kioskMode) {\r\n console.log('mainResponse-->', mainResponse);\r\n if (mainResponse) {\r\n console.log('mainResponse features-->', mainResponse.features);\r\n }\r\n console.log('bvGroupsResponse-->', bvGroupsResponse);\r\n console.log('savedTempData-->', savedTempData);\r\n }\r\n parseWizardResponse(mainResponse, qtCategories, this.layout.visualizerType); // lixil ui enable routing\r\n if (qtCategories.length) {\r\n this.loadQtCategoriesFeatures(qtCategories); // load features from feature groups\r\n }\r\n this.layout.createCustomConfigurations(); // set shower body first\r\n this.layout.setGroupsItemsCount(bvGroupsResponse);\r\n // if (bvGroupsResponse && getCommonVisualizerType() === \"kitchen\") { // removed this logic, download countertops always as usual\r\n // toggles to request all features at once or each feature separately\r\n // store.dispatch(setUseFeaturesLightRequest({\r\n // countertops: !(bvGroupsResponse[\"countertop\"] && bvGroupsResponse[\"countertop\"].totalFeaturesCount > 8000), //increased for nhance\r\n // cabinets: !(bvGroupsResponse[\"top Cabinet\"] && bvGroupsResponse[\"top Cabinet\"].totalFeaturesCount > 6000),\r\n // }))\r\n // }\r\n this.layout.setDefaultFeatures();\r\n if (qtCategories.length) {\r\n this.layout.setQtCategoriesSubparts(qtCategories); // set QtCategories subParts(wait until defaults are set)\r\n this.loadQtCategoriesFeatures(qtCategories); // load features from feature groups second time!!\r\n // after qtCategories are set (because we need partIdExistInQtCategory logic)\r\n }\r\n\r\n // 2) check what to set next\r\n const {lookIdFromUrl} = getParsedLookUrl();\r\n\r\n const presets = mainResponse.defaults || [];\r\n console.log(\"presets\", presets);\r\n\r\n let loadByTheDefault = null;\r\n let isCartAndUserStatedUpdateNeeded = false;\r\n\r\n let recoverFromTempId = savedTempData && Array.isArray(savedTempData.records);\r\n if (recoverFromTempId) {\r\n console.log(\"recoverFromTempId savedTempData\", savedTempData);\r\n this.loadByTheDefault = savedTempData.records[0].data;\r\n this.loadByTheDefault.alreadyRestored = true;\r\n loadByTheDefault = savedTempData.records[0].data;\r\n await parseJobIdResponse(savedTempData);\r\n }\r\n console.log(\"userIsLoggedIn\", userIsLoggedIn);\r\n\r\n if (!loadByTheDefault) {\r\n loadByTheDefault = lookIdFromUrl ? getDefaultPresetByLook(presets, lookIdFromUrl) : null;\r\n console.log(\"loadByTheDefault by lookIdFromUrl\", loadByTheDefault);\r\n console.log(\"lookIdFromUrl\", lookIdFromUrl);\r\n }\r\n if (!loadByTheDefault) {\r\n loadByTheDefault = presets.find(preset => preset.loadByTheDefault);\r\n console.log(\"loadByTheDefault by mainResponse\", loadByTheDefault);\r\n }\r\n const editJobId = document.kvConfig.jobId && document.kvConfig.jobId > 0;\r\n console.log('editJobId', editJobId);\r\n\r\n const editToken = store.getState().userState.editToken;\r\n console.log('editToken', editToken);\r\n\r\n if (editJobId || editToken) {\r\n //console.log('resetting', document.kvConfig.jobId);\r\n const jobResponse = await getJobIdPreset(document.kvConfig.jobId, editToken);\r\n if (jobResponse && jobResponse.data && !jobResponse.data.error) {\r\n if (Array.isArray(jobResponse.data.records) && jobResponse.data.records.length) {\r\n this.loadByTheDefault = jobResponse.data.records[0].data;\r\n if (this.loadByTheDefault && this.loadByTheDefault.bvStateVersion) { // for old quotes we are keeping old create cart list logic\r\n this.loadByTheDefault.alreadyRestored = true;\r\n }\r\n }\r\n await parseJobIdResponse(jobResponse.data);\r\n if (loadByTheDefault && isNewlyCreatedJob(jobResponse.data)) {\r\n await this.setFirstPreset(loadByTheDefault, layoutTypes);\r\n await updateCurrentQuote(0);\r\n }\r\n } else if (loadByTheDefault) {\r\n await this.setFirstPreset(loadByTheDefault, layoutTypes)\r\n }\r\n if (IS_QKB_UI && !document.kvConfig.visualizerOnly\r\n && (!window.location.href.includes(\"#/\") || !window.location.href.split(\"#/\")[1].length)) {\r\n if (this.props.fabricatorSettings.checkout) {\r\n this.goToCart()\r\n } else {\r\n this.props.toggleBathroomVisualizerOpen(true);\r\n if (!window.location.href.includes(\"visualizer\")) {\r\n hashHistory.push(\"visualizer\");\r\n }\r\n }\r\n }\r\n return true\r\n } else if (loadByTheDefault) {\r\n if (!recoverFromTempId) { // temp id data is recovered in parse response\r\n await this.setFirstPreset(loadByTheDefault, layoutTypes, isCartAndUserStatedUpdateNeeded);\r\n }\r\n // 3) restore share button or save quote click\r\n if (loadByTheDefault.returnAction) {\r\n this.needToSaveQuote = false;\r\n if (!userIsLoggedIn) {\r\n console.info(`Sorry, can't share to ${loadByTheDefault.returnAction}, the user is not logged in, so the quote can not be saved.`);\r\n return\r\n }\r\n if (loadByTheDefault.returnAction === GROHE_ON_OPEN_ACTION.saveQuote) {\r\n setTimeout(() => {$(\"button[data-id='save-button']\").trigger('click')}, 0);\r\n } else if ([\r\n GROHE_ON_OPEN_ACTION.shareFacebook,\r\n GROHE_ON_OPEN_ACTION.sharePinterest,\r\n GROHE_ON_OPEN_ACTION.shareTwitter].some(action => loadByTheDefault.returnAction === action)) {\r\n setTimeout(() => {\r\n const {shareUrl} = store.getState().serverState;\r\n saveQuoteAndShare(loadByTheDefault.returnAction, shareUrl);\r\n }, 0);\r\n }\r\n }\r\n }\r\n\r\n }\r\n\r\n setFirstPreset = async (roomPreset, layoutTypes, isCartAndUserStatedUpdateNeeded= false) => {\r\n if (!layoutTypes || layoutTypes[roomPreset.layout_type]) {\r\n // this.setNewBvState(roomPreset, true);\r\n console.log(\"roomPreset\", roomPreset);\r\n const layout_type = +roomPreset.layout_type;\r\n const needToChangeLayout = (layout_type || layout_type === 0) && (layout_type !== +this.layout.type);\r\n if (needToChangeLayout) {\r\n await this.changeLayout(layout_type, true)\r\n }\r\n if (this.props.setFirstLoadedPreset) {\r\n this.props.setFirstLoadedPreset(roomPreset.id);\r\n }\r\n await this.layout.setItemsFromBvState(\r\n roomPreset, isCartAndUserStatedUpdateNeeded, (bvState) => bvState, true\r\n )\r\n }\r\n }\r\n\r\n getQtCategoriesCommon = () => {\r\n return (this.props.qtCategoriesRequested && this.props.qtCategoriesRequested.includes(this.layout.visualizerType))\r\n ? Promise.resolve([])\r\n : getQtCategories(this.layout.getCurrentLayoutAbbreviation())\r\n }\r\n\r\n setNewBvState = (bvState, firstLoad = false) => {\r\n this.layout.initialized = false;\r\n if (!firstLoad) {\r\n loaderEnable();\r\n }\r\n this.layout.setActiveFeaturesFromObject(bvState, false, false, true, true);\r\n if (!firstLoad) {\r\n this.handleRefresh();\r\n loaderDisable();\r\n }\r\n };\r\n\r\n resetEverything = () => {\r\n this.layout.resetEverything();\r\n if (this.navBar && this.navBar.resetWizardSteps) {\r\n this.navBar.resetWizardSteps()\r\n }\r\n this.handleRefresh();\r\n };\r\n\r\n goToCart = () => {\r\n this.props.toggleBathroomVisualizerOpen(false);\r\n this.props.setCameFromPage('visualizer');\r\n if (!window.location.href.includes('shoppingcart')) {\r\n hashHistory.push('shoppingcart');\r\n }\r\n };\r\n\r\n onBvLoad = () => {\r\n this.props.setCanvasId(this.state.canvasId);\r\n if (IS_QKB_UI && document.kvConfig.visualizerOnly) {\r\n this.props.toggleBathroomVisualizerOpen(true);\r\n if (!window.location.href.includes(\"visualizer\")) {\r\n hashHistory.push(\"visualizer\");\r\n }\r\n } else {\r\n const layoutParts = this.layout.getFeatures()\r\n .filter(parentGroup => parentGroup.categoryEnabled)\r\n .map((parentGroup) => parentGroup.partName);\r\n this.props.setLayoutDataParts(layoutParts);\r\n this.props.setDefaultSelectionGroup(layoutParts[0]);\r\n $(window).trigger(ActionTypes.UPDATE_ALL_ITEMS);\r\n }\r\n if (IS_QKB_UI && !(document.kvConfig.jobId && document.kvConfig.jobId > 0) && !Config.isVisualizerManagement()) {\r\n this.askToRestore(this.layout.localStorageKey);\r\n }\r\n };\r\n\r\n checkShareUrl = async () => {\r\n let design = new URLSearchParams(window.location.search).get(\"design\");\r\n if (design && (design[design.length - 1] === \"/\")) {\r\n design = design.slice(0, -1);\r\n }\r\n if (design) {\r\n const jobResponse = await getJobIdPreset(design);\r\n console.log(\"jobResponse for share URL design #\" + design, jobResponse);\r\n if (jobResponse && jobResponse.data && Array.isArray(jobResponse.data.records) && jobResponse.data.records.length) {\r\n this.loadByTheDefault = jobResponse.data.records[0].data;\r\n await parseJobIdResponse(jobResponse.data, true);\r\n }\r\n }\r\n };\r\n\r\n handleRefresh = () => {\r\n this.forceUpdate();\r\n };\r\n\r\n renderGreenLayerByZindex = (zIndex) => {\r\n this.imageCanvas.renderGreenLayerByZindex(zIndex)\r\n };\r\n\r\n setHoveredLayer = (event) => {\r\n this.imageCanvas.setHoveredLayer(event)\r\n };\r\n\r\n setCanvasClass = (canvasClass, removeAllClasses) => {\r\n if (this.imageCanvas) {\r\n this.imageCanvas.imageCanvasScroll(canvasClass, removeAllClasses, this.layout.type, this.layout.scene);\r\n }\r\n };\r\n\r\n changeMessageBoxState = (newMessageBoxState) => {\r\n this.setState({\r\n messageBoxState: {...this.state.messageBoxState, ...newMessageBoxState}\r\n })\r\n };\r\n\r\n setActiveFeature = (activeFeature) => { // this is needed for lock screen. we can't get rid of that\r\n this.setState({\r\n activeFeature\r\n })\r\n };\r\n\r\n setDemoPointClicked = () => {\r\n this.setState({\r\n demoPointClicked: true\r\n })\r\n };\r\n\r\n loadQtCategoriesFeatures = (qtCategories) => {\r\n const featureGroupsWithoutFeatures = this.layout.loadFeatureGroupFeatures(qtCategories);\r\n // console.log(\"featureGroupsWithoutFeatures\", featureGroupsWithoutFeatures);\r\n const {wizardList, wizardIsActive} = store.getState().wizardState;\r\n if (featureGroupsWithoutFeatures.length && !IS_LIXIL_UI && !showWizardInsteadOfQT(wizardList, wizardIsActive)) {\r\n if (this.layout.isNewLayout) {\r\n const toRequestFeatureGroups = featureGroupsWithoutFeatures.filter(subPart => !subPart.part.nextFeaturesPageToLoadArray);\r\n // prevent requesting countertops and backsplashes since the preset is not applied yet!\r\n Promise.all(toRequestFeatureGroups.map(subPart => {\r\n return getAdditionalFeaturesOnScroll(subPart.part, true)\r\n })).then(() => {\r\n $(window).trigger(ActionTypes.UPDATE_ALL_ITEMS)\r\n })\r\n } else featureGroupsWithoutFeatures.forEach(sPart => {\r\n this.checkIfAllFeaturesReceived(sPart, null, () => {\r\n $(window).trigger(ActionTypes.UPDATE_ALL_ITEMS);\r\n }, false)\r\n })\r\n }\r\n };\r\n\r\n finishLoading = async () => {\r\n store.dispatch(setShopPageLoaded(true)); // lixil ui don't do any requests on the shop page\r\n store.dispatch(setAllowRouting(true)); // lixil ui enable routing\r\n await this.getContractSignDocument(); // no need for now, we are keeping existing structure (first save, then - contract)\r\n await this.getAssignQuoteCustomersAndEmployees(); // no need for now, we are keeping existing structure (first save, then - contract)\r\n\r\n if (IS_LOOK_JOURNEY) {\r\n let loadByTheDefault = this.loadByTheDefault && this.loadByTheDefault.id === this.props.activePreset ? this.loadByTheDefault : null\r\n if (!loadByTheDefault || !loadByTheDefault.alreadyRestored) {\r\n setTimeout(() => {\r\n const {qtActiveCategory} = store.getState().qtState;\r\n const cartItems = createCartList(qtActiveCategory, loadByTheDefault);\r\n if (cartItems.length) {\r\n store.dispatch(addToCart(cartItems))\r\n }\r\n }, 1000) // is needed to finish render routing first (to create cart list from already selected features)\r\n }\r\n }\r\n\r\n if (this.props.initialFlowStep === 3) {\r\n this.changeLayout(this.props.initialFlowRoomLayout);\r\n this.tryToSetSelectedRoom();\r\n } else {\r\n console.log('initialized', this.layout);\r\n this.layout.initialized = true;\r\n this.handleRefresh();\r\n if (!this.props.bvOpened || IS_LIXIL_UI || !this.layout.getLayers().length) {\r\n loaderDisable();\r\n }\r\n }\r\n this.setIframeMessaging();\r\n this.props.addVisualizersLoaded(this.layout.visualizerType);\r\n if (this.needToSaveQuote || window.location.href.includes(\"saveOnLoad=true\")) {\r\n setTimeout(() => {\r\n saveQuote({submit: true, showReceipt: false})\r\n .then((saveJobResponse) => {\r\n if (this.props.updateCanvasCount) {\r\n this.props.updateCanvasCount(); // this is fixing the bug on mobile, after return from Grohe Register page the canvas is empty(white)\r\n }\r\n if (window.location.href.includes(\"saveOnLoad=true\") && window.parent) {\r\n window.parent.postMessage({\r\n action: VISUALIZER_MANAGEMENT_ACTIONS.visualizerIsSaved,\r\n saveJobResponse,\r\n }, \"*\");\r\n }\r\n });\r\n }, 0)\r\n }\r\n setTimeout(() => {\r\n if (!this.layout.allDbFeatures.length) {\r\n loaderDisable();\r\n renderErrorPopup(\"No Features Available\");\r\n }\r\n }, 1000)\r\n if (IS_LOOK_JOURNEY && (!document.kvConfig.isBackend || !getLocalStorageItem(LOCAL_STORAGE_KEYS.introVisited))\r\n && this.layout.isNewLayout && !document.kvConfig.jobId) { // always for client mode\r\n store.dispatch(setLookOverlayOpened(LOOK_OVERLAYS.intro));\r\n }\r\n };\r\n\r\n getContractSignDocument = async () => {\r\n\r\n const contractsList = await getContracts(); // set empty array to show sign route\r\n\r\n if (IS_OFFLINE_MODE && shouldUseContractSigning(this.props.fabricatorSettings, null, true)) {\r\n await getOfflineReceiptImages(); // cache images from the receipt\r\n await setContractBlobs(contractsList, 0, true);\r\n // const documentResult = await JsonApi.getDocumentForFabricator();\r\n // if (documentResult && documentResult.data && documentResult.data.base64PDF) {\r\n // const responseFetch = await fetch(\"data:application/pdf;base64,\" + documentResult.data.base64PDF);\r\n // const blob = await responseFetch.blob();\r\n // // console.log(\"responseFetch\", blob);\r\n // const jobDocumentUrl = URL.createObjectURL(blob);\r\n // // console.log(\"createdBlobDocument\", jobDocumentUrl);\r\n // store.dispatch(setContractBlob(jobDocumentUrl));\r\n // }\r\n }\r\n }\r\n\r\n getAssignQuoteCustomersAndEmployees = async () => {\r\n if (IS_OFFLINE_MODE && document.kvConfig.isBackend && !document.kvConfig.visualizerOnly) {\r\n const custAndEmpResponse = await JsonApi.getCustomersAndEmployees();\r\n if (custAndEmpResponse && custAndEmpResponse.data && (custAndEmpResponse.data.clients || custAndEmpResponse.data.employees)) {\r\n store.dispatch(setAssignQuoteOfflineData({\r\n assignQuoteOfflineCustomers: (custAndEmpResponse.data.clients || []).filter(client => client.fullName && client.email),\r\n assignQuoteOfflineEmployees: (custAndEmpResponse.data.employees || []).filter(employee => employee.fullName),\r\n }));\r\n }\r\n }\r\n }\r\n\r\n tryToSetSelectedRoom = () => {\r\n const roomChosen = store.getState().initialFlowState.initialFlowRoom;\r\n const {activeQuoteIndex} = store.getState().quotesState;\r\n if (this.layout.qtCategories && roomChosen) {\r\n this.layout.qtCategories.forEach((qtCategory => {\r\n if (qtCategory.subParts) {\r\n qtCategory.subParts.forEach((subPart) => {\r\n if (subPart.part.partName === \"Room\") {\r\n if (subPart.part.features) {\r\n const selectedRoomFeature = subPart.part.features.find(feature => feature.partName === roomChosen);\r\n if (selectedRoomFeature) {\r\n subPart.part.activeFeature = selectedRoomFeature;\r\n subPart.part.firstClick[activeQuoteIndex] = true;\r\n }\r\n }\r\n }\r\n })\r\n }\r\n }))\r\n }\r\n };\r\n\r\n askToRestore = (localStorageKey) => {\r\n try {\r\n const bvState = JSON.parse(window.localStorage.getItem(localStorageKey));\r\n if (bvState) {\r\n this.changeMessageBoxState({\r\n visible: true,\r\n message: \"messageBox.restoreSessionTitle\",\r\n buttons: [{\r\n text: \"messageBox.buttonNo\",\r\n color: \"blue\",\r\n click: () => {\r\n this.changeMessageBoxState({visible:false});\r\n window.localStorage.removeItem(localStorageKey);\r\n }\r\n },{\r\n text: \"messageBox.buttonYes\",\r\n color: \"green\",\r\n click: this.applyStoredItems\r\n }]\r\n });\r\n }\r\n } catch (ex) { console.log(\"localStorage exception\", ex); }\r\n };\r\n\r\n checkToShowTutorial = () => {\r\n return (this.props.bvOpened || this.props.bvVisited) && this.props.visualizerTutorialIsOpened\r\n && this.layout.initialized && !this.props.visualizerTutorialFinished && this.props.cookieAccepted\r\n && !this.state.messageBoxState.visible;\r\n }\r\n\r\n}\r\n","import React from 'react';\r\nimport $ from \"jquery\";\r\nimport {connect} from \"react-redux\";\r\nimport PropTypes from \"prop-types\";\r\nimport {FormattedMessage} from \"react-intl\";\r\n\r\nimport {\r\n setMaterialsTutorialFinished,\r\n setVisualizerTutorialFinished, setVisualizerTutorialStep,\r\n showMaterialsTutorial,\r\n showVisualizerTutorial\r\n} from \"../../actions/tutorialFunctions\";\r\nimport Tutorial from \"./tutorial\";\r\n// import ActionTypes from \"../../misc/actionTypes\";\r\n// import {ContentType} from \"../visComponents/constants\";\r\n\r\nclass VisualizerTutorial extends Tutorial {\r\n\r\n static propTypes = {\r\n isMobile: PropTypes.bool.isRequired\r\n };\r\n\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n ringStyles: {\r\n left: 0,\r\n top: 0,\r\n }\r\n };\r\n }\r\n\r\n componentDidMount = () => {\r\n let nextStep = this.props.visualizerTutorialStep;\r\n if (document.kvConfig.visualizerOnly && !this.props.visualizerTutorialStep) {\r\n this.props.setVisualizerTutorialStep(1);\r\n nextStep = 1;\r\n } else if (nextStep === 2 && !this.props.isMobile) {\r\n this.props.setVisualizerTutorialStep(3);\r\n nextStep = 3;\r\n }\r\n if (nextStep === 3) {\r\n if (this.props.fabricatorSettings.enableSharing) {\r\n $(\".tutorial-overlay--visualizer\").fadeIn(300);\r\n this.showTutorialStep(nextStep);\r\n } else {\r\n this.exitTutorial(true);\r\n }\r\n } else {\r\n $(\".tutorial-overlay--visualizer\").fadeIn(300);\r\n this.showTutorialStep(nextStep);\r\n }\r\n };\r\n\r\n showTutorialStep = (nextStep = this.props.visualizerTutorialStep) => {\r\n switch (nextStep) {\r\n case 0: {\r\n this.scrollAndHighLightRing(\".mainbuttons .mobilebutton--back-to-quote\");\r\n break;\r\n }\r\n case 1: {\r\n if (this.props.isMobile) {\r\n this.scrollAndHighLightRing(\".mainbuttons .mobilebutton--design\", 0);\r\n } else {\r\n $(\"html, body\").animate({scrollTop: 0}, 500, () => {\r\n const roomLayoutsOrIdeas = this.getRoomLayoutsOrIdeasStepLogic();\r\n if (roomLayoutsOrIdeas.selector) {\r\n this.changeHighlightRingPosition(roomLayoutsOrIdeas.selector);\r\n }\r\n $(\".tutorial-step\").fadeIn(300)\r\n });\r\n }\r\n break;\r\n }\r\n case 3: {\r\n // if (this.props.isMobile) {\r\n // $(document).trigger(ActionTypes.OPEN_MOBILE_NAVIGATION); // open navigation\r\n // $(document).trigger(ActionTypes.CHANGE_MOBILE_MENU_CONTENT_TYPE, [ContentType.Layout]); // set navigation type\r\n // } else {\r\n // this.scrollAndHighLightRing(\".mainbuttons .mobilebutton--share\");\r\n // }\r\n this.scrollAndHighLightRing(\".mainbuttons .mobilebutton--share\");\r\n break;\r\n }\r\n default:\r\n break;\r\n }\r\n };\r\n\r\n scrollAndHighLightRing = (selector, scrollTop = document.body.scrollHeight) => {\r\n $(\"html, body\").animate({scrollTop}, 500, () => {\r\n this.changeHighlightRingPosition(selector);\r\n $(\".tutorial-step__ring, .tutorial-step\").fadeIn(300, () => {\r\n if (this.props.isMobile) {\r\n setTimeout(() => {\r\n this.changeHighlightRingPosition(selector);\r\n }, 300)\r\n }\r\n })\r\n });\r\n };\r\n\r\n handleNextStepClick = () => {\r\n const nextStep = this.props.visualizerTutorialStep + 1;\r\n this.props.setVisualizerTutorialStep(nextStep);\r\n switch (nextStep) {\r\n case 1:\r\n this.exitTutorial();\r\n break;\r\n case 2: {\r\n if (this.props.isMobile) {\r\n setTimeout(() => {\r\n this.changeHighlightRingPosition(\".des .mobilebutton--layout\");\r\n }, 500)\r\n } else {\r\n this.exitTutorial();\r\n }\r\n break;\r\n }\r\n case 3: {\r\n if (this.props.isMobile) {\r\n this.changeHighlightRingPosition(\".mainbuttons .mobilebutton--share\");\r\n } else {\r\n this.exitTutorial(true);\r\n }\r\n break;\r\n }\r\n }\r\n };\r\n\r\n exitTutorial = (forever) => {\r\n $(\".tutorial-overlay--visualizer\").fadeOut(300, () => {\r\n this.props.showVisualizerTutorial(false);\r\n if (forever) {\r\n this.props.setMaterialsTutorialFinished(true);\r\n this.props.setVisualizerTutorialFinished(true);\r\n try {\r\n window.localStorage.setItem(\"materials_tutorial_finished\", true);\r\n window.localStorage.setItem(\"visualizer_tutorial_finished\", true);\r\n } catch (ex) { console.log(\"localStorage exception\", ex); }\r\n }\r\n });\r\n };\r\n\r\n getHighLightButton = () => {\r\n switch (this.props.visualizerTutorialStep) {\r\n case 0: {\r\n return (\r\n \r\n )\r\n }\r\n case 1: {\r\n if (this.props.isMobile) {\r\n return (\r\n \r\n )\r\n }\r\n return this.getRoomLayoutsOrIdeasStepLogic().buttonComponent\r\n }\r\n case 2: {\r\n return (this.props.isMobile) ? (\r\n \r\n ) : null\r\n }\r\n case 3: {\r\n return (\r\n \r\n )\r\n }\r\n default:\r\n return null\r\n }\r\n };\r\n\r\n getRoomLayoutsOrIdeasStepLogic = () => {\r\n const existingRoomLayout = document.querySelector(\".tab.tab--room-layout\");\r\n if (existingRoomLayout) {\r\n return {\r\n selector: \".nav-wrapper__tabs .tab.tab--room-layout\",\r\n buttonComponent: (\r\n \r\n \r\n \r\n \r\n
\r\n ),\r\n mainTranslate: \"roomLayout\",\r\n }\r\n }\r\n const existingRoomIdeas = document.querySelector(\".tab.tab--room-ideas\");\r\n if (existingRoomIdeas) {\r\n return {\r\n selector: \".nav-wrapper__tabs .tab.tab--room-ideas\",\r\n buttonComponent: (\r\n \r\n \r\n \r\n \r\n
\r\n ),\r\n mainTranslate: \"roomIdeas\",\r\n }\r\n }\r\n return {\r\n selector: \"\",\r\n mainTranslate: null,\r\n buttonComponent: null\r\n }\r\n }\r\n\r\n render() {\r\n const ringStyles = this.state.ringStyles;\r\n const texts = (this.props.isMobile) ? \"mobile\" : \"desktop\";\r\n const highlightButton = this.getHighLightButton();\r\n const mainTextId = ((this.props.visualizerTutorialStep === 1) && !this.props.isMobile\r\n && this.getRoomLayoutsOrIdeasStepLogic().mainTranslate === \"roomIdeas\")\r\n ? `tutorials.visualizerPage.${texts}.step${this.props.visualizerTutorialStep}b`\r\n : `tutorials.visualizerPage.${texts}.step${this.props.visualizerTutorialStep}`;\r\n const showText = !(this.props.visualizerTutorialStep === 2 && !this.props.isMobile);\r\n const showNextButton = this.props.visualizerTutorialStep < 3 && showText;\r\n return (\r\n \r\n
\r\n )\r\n }\r\n\r\n}\r\n\r\nconst mapStateToProps = (store) => {\r\n const {settings} = store.fabricatorState;\r\n return {\r\n windowWidth: store.serverState.windowWidth,\r\n visualizerTutorialStep: store.tutorialState.visualizerTutorialStep,\r\n fabricatorSettings: settings,\r\n };\r\n};\r\n\r\nexport default connect(mapStateToProps, {\r\n showMaterialsTutorial,\r\n setMaterialsTutorialFinished,\r\n showVisualizerTutorial,\r\n setVisualizerTutorialFinished,\r\n setVisualizerTutorialStep\r\n})(VisualizerTutorial);\r\n","import React from \"react\";\r\nimport {FormattedHTMLMessage} from \"react-intl\";\r\nimport {connect} from \"react-redux\";\r\n\r\nconst Copyright = (props) => {\r\n\r\n const {fabricatorData} = props;\r\n const date = new Date();\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n {highlightButton ? (\r\n \r\n {showText ?
\r\n {showText ? (\r\n \r\n ) : null}\r\n {showNextButton ? (\r\n \r\n ) : null}\r\n
\r\n \r\n {highlightButton}\r\n
\r\n ) : null}\r\n \r\n
\r\n );\r\n}\r\n\r\nconst mapStateToProps = (store) => {\r\n return {\r\n fabricatorData: store.fabricatorState\r\n };\r\n};\r\n\r\nexport default connect(mapStateToProps)(Copyright)\r\n","import {pdf} from '@react-pdf/renderer';\r\nimport PrintDocument from \"../bvcomponents/popups/printPopup/printDocument\";\r\n\r\nimport store from './../store';\r\nimport * as types from \"./actionTypes\";\r\nimport {convertImgToBase64URL, THUMBNAIL_SIZES} from \"../misc/utils\";\r\nimport {getFabricatorLogo} from \"../misc/fabricatorHardcode\";\r\nimport {featureThumbnailUrl} from \"../misc/helpers\";\r\nimport {WIZARD_GROUP_TYPES} from \"../interfaces/wizardItemInterface\";\r\nimport {baseNewImagesPath} from \"../bvcomponents/assets\";\r\n\r\nlet printLogo = \"\";\r\nlet notFoundImage = \"\";\r\n\r\nexport const getCurrentReceipt = async (assignQuotePopupNewCustomer, newEmployeeSelected, onRender, isContractSign) => {\r\n\r\n const {userState, serverState, fabricatorState, cartState, quotesState, priceWorksheetState,\r\n filterState, assignQuoteState, wizardState, sqftSlabState, printState} = store.getState();\r\n\r\n const {assignQuotePopupCustomer, assignQuotePopupEmployee} = assignQuoteState;\r\n\r\n printLogo = printLogo || await convertImgToBase64URL(getFabricatorLogo(fabricatorState));\r\n let cartItemsThumbnails = {};\r\n if (fabricatorState.receiptSettings && fabricatorState.receiptSettings.showThumbnailsAndDescriptions) {\r\n cartItemsThumbnails = await getCartItemThumbnails(cartState.cartItems, wizardState);\r\n }\r\n\r\n return pdf(PrintDocument({\r\n fabricatorData: fabricatorState,\r\n userInfo: userState.userInfo,\r\n quotes: quotesState.quotes,\r\n cartItems: cartState.cartItems,\r\n priceWorksheetState,\r\n assignQuotePopupCustomer: assignQuotePopupNewCustomer || assignQuotePopupCustomer,\r\n employeeSelected: newEmployeeSelected || assignQuotePopupEmployee,\r\n locale: serverState.language,\r\n filterGroups: filterState.filterGroups,\r\n activeTheme: serverState.activeTheme,\r\n jobId: serverState.jobId,\r\n printLogo,\r\n wizardState,\r\n sqftSlabState,\r\n cartItemsThumbnails,\r\n printState,\r\n onRender,\r\n isContractSign,\r\n }))\r\n}\r\n\r\n// export const getCurrentReceiptPages = async (withReceiptUrl) => {\r\n// try {\r\n// const pdfReceipt = await getCurrentReceipt();\r\n// if (pdfReceipt && pdfReceipt.container && pdfReceipt.container.render) {\r\n// await pdfReceipt.container.render();\r\n// if (pdfReceipt.container.document && pdfReceipt.container.document.getLayoutData) {\r\n// const layoutData = pdfReceipt.container.document.getLayoutData();\r\n// if (layoutData && Array.isArray(layoutData.children) && layoutData.children.length) {\r\n// if (withReceiptUrl) {\r\n// const receipt = await pdfReceipt.toBlob();\r\n// const receiptUrl = URL.createObjectURL(receipt);\r\n// return {receiptUrl, receiptPages: layoutData.children.length};\r\n// }\r\n// return layoutData.children.length\r\n// }\r\n// }\r\n// }\r\n// if (withReceiptUrl) {\r\n// return {receiptUrl: \"\", receiptPages: 0};\r\n// }\r\n// return 0\r\n// } catch (e) {\r\n// console.log(\"error rendering pdf receipt\", e);\r\n// if (withReceiptUrl) {\r\n// return {receiptUrl: \"\", receiptPages: 0};\r\n// }\r\n// return 0\r\n// }\r\n// }\r\n\r\nexport const getCurrentReceiptPages = async (withReceiptUrl) => {\r\n try {\r\n let imagesPromise = new Promise(async (resolve) => {\r\n const onRender = (onRenObj) => {\r\n // console.log(\"onRender!!\", onRenObj);\r\n const receiptLayout = onRenObj ? onRenObj._INTERNAL__LAYOUT__DATA_ : null;\r\n const receiptPages = receiptLayout && receiptLayout.children ? receiptLayout.children.length : 1;\r\n const receiptUrl = URL.createObjectURL(onRenObj.blob);\r\n\r\n resolve({receiptUrl, receiptLayout, receiptPages})\r\n };\r\n const pdfReceipt2 = await getCurrentReceipt(null, null, onRender, true)\r\n await pdfReceipt2.toBlob();\r\n })\r\n if (withReceiptUrl) {\r\n return imagesPromise.then(response => response)\r\n }\r\n return 0\r\n } catch (e) {\r\n console.log(\"error rendering pdf receipt\", e);\r\n if (withReceiptUrl) {\r\n return {receiptUrl: \"\", receiptPages: 0};\r\n }\r\n return 0\r\n }\r\n}\r\n\r\nexport const getCartItemThumbnails = async (cartItems, wizardState) => {\r\n let cartItemsThumbnails = {};\r\n for (const cartItem of cartItems) {\r\n try {\r\n const thumbnailUrl = featureThumbnailUrl(cartItem.cartFeature, THUMBNAIL_SIZES.small);\r\n cartItemsThumbnails[cartItem.id] = await convertImgToBase64URL(thumbnailUrl);\r\n if (!cartItemsThumbnails[cartItem.id]) {\r\n if (!notFoundImage) {\r\n notFoundImage = await convertImgToBase64URL(`${baseNewImagesPath}images/image-not-found.png`);\r\n }\r\n cartItemsThumbnails[cartItem.id] = notFoundImage\r\n }\r\n } catch (e) {\r\n cartItemsThumbnails[cartItem.id] = `${baseNewImagesPath}images/image-not-found.png`;\r\n }\r\n }\r\n for (const wizard of wizardState.allWizardsValues) {\r\n for (const key of Object.keys(wizard.wizardSelectedValues)) {\r\n if (wizard.wizardSelectedValues[key].wizardGroup\r\n && (wizard.wizardSelectedValues[key].wizardGroup.nodeType === WIZARD_GROUP_TYPES.custom)\r\n && wizard.wizardSelectedValues[key].wizardGroup.customImageUrl) {\r\n try {\r\n cartItemsThumbnails[wizard.wizardSelectedValues[key].wizardGroup.id] = await convertImgToBase64URL(\r\n `https://corsproxy.io/?url=${encodeURIComponent(wizard.wizardSelectedValues[key].wizardGroup.customImageUrl)}`\r\n );\r\n if (!cartItemsThumbnails[wizard.wizardSelectedValues[key].wizardGroup.id]) {\r\n cartItemsThumbnails[wizard.wizardSelectedValues[key].wizardGroup.id] = await convertImgToBase64URL(\r\n `https://proxy.corsfix.com/?${wizard.wizardSelectedValues[key].wizardGroup.customImageUrl}`\r\n );\r\n }\r\n if (!cartItemsThumbnails[wizard.wizardSelectedValues[key].wizardGroup.id]) {\r\n cartItemsThumbnails[wizard.wizardSelectedValues[key].wizardGroup.id] = await convertImgToBase64URL(\r\n wizard.wizardSelectedValues[key].wizardGroup.customImageUrl\r\n );\r\n }\r\n if (!cartItemsThumbnails[wizard.wizardSelectedValues[key].wizardGroup.id]) {\r\n cartItemsThumbnails[wizard.wizardSelectedValues[key].wizardGroup.id] = await convertImgToBase64URL(\r\n wizard.wizardSelectedValues[key].wizardGroup.customImageUrl + \"?not-from-cache-please\"\r\n );\r\n }\r\n if (!cartItemsThumbnails[wizard.wizardSelectedValues[key].wizardGroup.id]) {\r\n if (!notFoundImage) {\r\n notFoundImage = await convertImgToBase64URL(`${baseNewImagesPath}images/image-not-found.png`);\r\n }\r\n cartItemsThumbnails[wizard.wizardSelectedValues[key].wizardGroup.id] = notFoundImage\r\n }\r\n } catch (e) {\r\n cartItemsThumbnails[wizard.wizardSelectedValues[key].wizardGroup.id] = `${baseNewImagesPath}images/image-not-found.png`;\r\n }\r\n }\r\n }\r\n }\r\n return cartItemsThumbnails\r\n}\r\n\r\nexport const getOfflineReceiptImages = async () => {\r\n const {fabricatorState} = store.getState();\r\n notFoundImage = await convertImgToBase64URL(`${baseNewImagesPath}images/image-not-found.png`)\r\n printLogo = await convertImgToBase64URL(getFabricatorLogo(fabricatorState));\r\n await getCurrentReceiptPages(true);\r\n return true\r\n}\r\n\r\nexport const printReceipt = async () => {\r\n const pdfReceipt = await getCurrentReceipt();\r\n const receipt = await pdfReceipt.toBlob();\r\n const fileURL = URL.createObjectURL(receipt);\r\n window.open(fileURL, \"_blank\");\r\n}\r\n\r\nexport const setReceiptUrl = (receiptUrl) => ({\r\n type: types.SET_RECEIPT_URL,\r\n payload: {receiptUrl}\r\n})\r\n\r\nexport const setReceiptSignature = (receiptSignature) => ({\r\n type: types.SET_RECEIPT_SIGNATURE,\r\n payload: {receiptSignature}\r\n})\r\n","//INITIAL FLOW\r\nimport * as types from \"./actionTypes\";\r\n\r\nexport const setPaymentInfo = (name, value) => ({\r\n type: types.SET_PAYMENT_INFO,\r\n payload: {name, value}\r\n});\r\n\r\nexport const setCardInfo = (name, value) => ({\r\n type: types.SET_CARD_INFO,\r\n payload: {name, value}\r\n});\r\n\r\nexport const setCardErrors = (cardErrors) => ({\r\n type: types.SET_CARD_ERRORS,\r\n payload: {cardErrors}\r\n});\r\n\r\nexport const setShippingErrors = (shippingErrors) => ({\r\n type: types.SET_SHIPPING_ERRORS,\r\n payload: {shippingErrors}\r\n});\r\n\r\nexport const setShippingInfo = (name, value) => ({\r\n type: types.SET_SHIPPING_INFO,\r\n payload: {name, value}\r\n});\r\n\r\nexport const setBillingInfo = (name, value) => ({\r\n type: types.SET_BILLING_INFO,\r\n payload: {name, value}\r\n});\r\n\r\nexport const restorePaymentInfo = (someValues) => ({\r\n type: types.RESTORE_PAYMENT_INFO,\r\n payload: someValues\r\n});\r\n","import {pnpolyArray} from \"../../../../../lib/pnpoly\";\r\nimport { v4 as uuidv4 } from 'uuid';\r\nimport _ from 'lodash';\r\n\r\nimport EventManager from \"../../../store/sqftEventManager\";\r\nimport workspace from \"../../workspace\";\r\nimport sqftConfig from \"../../../store/sqftConfig\";\r\nimport {\r\n distanceToInches,\r\n distanceToMillimeters,\r\n getAngleBetweenTwoPoints, getMidPoint,\r\n isDisabledInPopupWithParents,\r\n measureDistanceToInches,\r\n} from \"../../../../../helpers/sqftHelper\";\r\nimport COLOR_THEMES, {COLOR} from \"../../../store/colorThemes\";\r\nimport {isDisabledInPopupShouldBeHidden} from \"../../../../../constants\";\r\nimport {DIRECTIONS, getLineDirection} from \"../../../../../helpers/shapeHelper\";\r\nimport RenderFigures from \"../../../helpers/renderFigures\";\r\nimport {createAdjustableInput} from \"../../../../../helpers/uiHelper\";\r\n\r\nexport default class NumberText {\r\n id = null;\r\n design = {\r\n fontColor: COLOR_THEMES[sqftConfig.activeTheme].primary,\r\n fontFamily: 'playbold',\r\n fontHeight: 16,\r\n isLength: false,\r\n valuePrefix: '',\r\n valuePostfix: '',\r\n shouldRenderFrameBorder: false,\r\n eventsPriority: EventManager.priorities.SEGMENT\r\n };\r\n value = 0;\r\n callback = null;\r\n pos = {\r\n x: 0,\r\n y: 0,\r\n xOffset: 0,\r\n yOffset: 0,\r\n angle: 0,\r\n orientation: DIRECTIONS.EAST,\r\n betweenPoints: {\r\n pointFrom: null,\r\n pointTo: null,\r\n }\r\n };\r\n state = {\r\n isHovered: false,\r\n mouseDown: false,\r\n mouseDownPosition: null,\r\n isHidden: true\r\n };\r\n\r\n constructor(value, pos, design, parent = workspace, callback = Function(), isInit = true) {\r\n this.value = value;\r\n Object.assign(this.pos, pos);\r\n Object.assign(this.design, design);\r\n this.parent = parent;\r\n this.callback = callback;\r\n this.id = uuidv4();\r\n\r\n if (isInit) {\r\n this.initEventListeners();\r\n }\r\n }\r\n getParent() {\r\n return this.parent\r\n }\r\n\r\n get orientation () {\r\n return this.pos.orientation\r\n }\r\n\r\n initEventListeners() {\r\n EventManager.addEvent(\r\n EventManager.events.RENDER,\r\n this.render.bind(this),\r\n this,\r\n this.design.eventsPriority\r\n );\r\n EventManager.addEvent(\r\n EventManager.events.MOUSE_MOVE,\r\n this.onMouseMove,\r\n this,\r\n this.design.eventsPriority\r\n );\r\n EventManager.addEvent(\r\n EventManager.events.MOUSE_DOWN,\r\n this.onMouseDown,\r\n this,\r\n this.design.eventsPriority\r\n );\r\n EventManager.addEvent(\r\n EventManager.events.MOUSE_UP,\r\n this.onMouseUp,\r\n this,\r\n this.design.eventsPriority\r\n );\r\n EventManager.addEvent(\r\n EventManager.events.MOUSE_LEAVE,\r\n this.onMouseLeave,\r\n this,\r\n EventManager.priorities.OVERALL\r\n );\r\n }\r\n\r\n destroy() {\r\n this.deregisterEvents();\r\n }\r\n\r\n hideEvents() {\r\n if (!this.state.isHidden) {\r\n this.deregisterEvents();\r\n this.state.isHidden = true;\r\n }\r\n }\r\n\r\n revealEvents() {\r\n if (this.state.isHidden) {\r\n this.initEventListeners();\r\n this.state.isHidden = false;\r\n }\r\n }\r\n\r\n deregisterEvents() {\r\n EventManager.removeEvent(this);\r\n }\r\n\r\n reInitEvents() {\r\n this.initEventListeners();\r\n }\r\n\r\n onMouseMove = (mousePos, e) => {\r\n void e;\r\n this.state.isHovered = this.isMouseOverText(mousePos);\r\n\r\n if (this.state.isHovered) {\r\n EventManager.stealCursor();\r\n //todo rotated cursor\r\n EventManager.setCursor(([DIRECTIONS.WEST, DIRECTIONS.EAST].includes(this.pos.orientation)) ? \"text\" : \"text-vertical\", this);\r\n } else {\r\n EventManager.resetCursor(this);\r\n return false;\r\n }\r\n };\r\n\r\n isMouseOverText = (mousePos) => {\r\n return pnpolyArray(this.getTextPointsArea(), mousePos);\r\n };\r\n\r\n getTextPointsArea = () => {\r\n const mText = EventManager.getCtx().measureText(this.design.valuePrefix + this.value + this.design.valuePostfix );\r\n const {x, y} = this.getPos();\r\n\r\n let pointsArray = [];\r\n\r\n if ([DIRECTIONS.WEST, DIRECTIONS.EAST].includes(this.pos.orientation)) {\r\n pointsArray = [\r\n [x - Math.ceil10(mText.width,-2) / 2, y - this.design.fontHeight / 2],\r\n [x + Math.ceil10(mText.width,-2) / 2, y - this.design.fontHeight / 2],\r\n [x + Math.ceil10(mText.width,-2) / 2, y + this.design.fontHeight / 2],\r\n [x - Math.ceil10(mText.width,-2) / 2, y + this.design.fontHeight / 2],\r\n ]\r\n } else if ([DIRECTIONS.NORTH, DIRECTIONS.SOUTH].includes(this.pos.orientation)) {\r\n pointsArray = [\r\n [x - this.design.fontHeight / 2, y - Math.ceil10(mText.width,-2) / 2],\r\n [x + this.design.fontHeight / 2, y - Math.ceil10(mText.width,-2) / 2],\r\n [x + this.design.fontHeight / 2, y + Math.ceil10(mText.width,-2) / 2],\r\n [x - this.design.fontHeight / 2, y + Math.ceil10(mText.width,-2) / 2],\r\n ]\r\n } else {\r\n // todo horizontal\r\n }\r\n\r\n return pointsArray;\r\n };\r\n\r\n onMouseUp = (mousePos, e) => {\r\n void mousePos;\r\n void e;\r\n if (this.state.mouseDown) {\r\n this.state.mouseDown = false;\r\n this.state.mouseDownPosition = null;\r\n }\r\n };\r\n\r\n onMouseDown = (mousePos, e) => {\r\n void mousePos;\r\n void e;\r\n if (this.state.isHovered && !document.querySelector(\".line-input\")) {\r\n window.lineInputFocused = true;\r\n EventManager.stealCursor();\r\n\r\n const maxLength = this.parent.getMaxLength ? this.parent.getMaxLength() : 1000 * sqftConfig.getMeasureMultiplier();\r\n const pos = this.getPos();\r\n const initialValue = this.design.isLength\r\n ? sqftConfig.measureUnit === \"Metric\"\r\n ? measureDistanceToInches(this.value).millimeters\r\n : this.value\r\n : this.value;\r\n\r\n const inputWrapper = createAdjustableInput({\r\n position: pos,\r\n initialValue: initialValue.toString(),\r\n min: 1,\r\n max: maxLength,\r\n orientation: [DIRECTIONS.WEST, DIRECTIONS.EAST].includes(this.pos.orientation) ? \"horizontal\" : \"vertical\",\r\n onChange: this.onInputChange, // Trigger onInputChange when value changes\r\n onClose: () => {\r\n window.lineInputFocused = false;\r\n this.state.isHovered = false;\r\n },\r\n step: 1,\r\n });\r\n\r\n document.querySelector(\".sqft-main-grid\").appendChild(inputWrapper);\r\n // Focus and select input on creation\r\n const input = inputWrapper.querySelector(\".line-input-field\");\r\n input.focus();\r\n }\r\n\r\n return false;\r\n };\r\n\r\n onInputChange = (value) => {\r\n const valueBeforeUpdate = this.value;\r\n this.value = value;\r\n this.callback(value, this, valueBeforeUpdate);\r\n };\r\n\r\n onMouseLeave = () => {\r\n this.state.isHoveringPoint = false;\r\n this.state.mouseDown = false;\r\n this.state.hoveredPoint = null;\r\n this.state.isHoveredOverText = false;\r\n };\r\n\r\n setValue = (value) => {\r\n this.value = value\r\n }\r\n\r\n setPos = (pos) => {\r\n this.pos.x = pos.x\r\n this.pos.y = pos.y\r\n }\r\n\r\n setAngle = (angle) => {\r\n this.pos.angle = angle\r\n }\r\n\r\n setBetweenPoints = (pointFrom, pointTo) => {\r\n this.pos.betweenPoints.pointFrom = pointFrom;\r\n this.pos.betweenPoints.pointTo = pointTo;\r\n }\r\n\r\n getPos = () => {\r\n const parentOffset = this.parent.getOffset() ? this.parent.getOffset() : { x: 0, y: 0 };\r\n const scale = _.clone(sqftConfig.scale);\r\n let angle = this.pos.angle;\r\n\r\n //if this in the NumberText between lines than we override angle\r\n if (this.pos.betweenPoints.pointFrom) {\r\n angle = getAngleBetweenTwoPoints(this.pos.betweenPoints.pointFrom, this.pos.betweenPoints.pointTo);\r\n }\r\n\r\n const angleRad = angle * (Math.PI / 180);\r\n\r\n // calculate offset position according to offset point\r\n const calculatedXOffset = this.pos.xOffset * Math.cos(angleRad) - this.pos.yOffset * Math.sin(angleRad);\r\n const calculatedYOffset = this.pos.xOffset * Math.sin(angleRad) + this.pos.yOffset * Math.cos(angleRad);\r\n\r\n return {\r\n x: this.pos.x * scale + calculatedXOffset + parentOffset.x,\r\n y: this.pos.y * scale + calculatedYOffset + parentOffset.y\r\n }\r\n };\r\n\r\n getValue = (isString, withSuffixes = false) => {\r\n let value = this.value;\r\n if (this.design.isLength) {\r\n value = sqftConfig.measureUnit === \"Metric\"\r\n ? distanceToMillimeters(value)\r\n : distanceToInches(value)\r\n } else if (isString) {\r\n value = value.toString();\r\n }\r\n if (withSuffixes) {\r\n value = this.design.valuePrefix + value.toString() + this.design.valuePostfix;\r\n }\r\n\r\n return value\r\n };\r\n\r\n updateOrientation = () => {\r\n if (this.pos.betweenPoints.pointFrom) {\r\n this.pos.orientation = getLineDirection(this.pos.betweenPoints.pointFrom, this.pos.betweenPoints.pointTo, true);\r\n }\r\n }\r\n\r\n updatePositionBetweenPoints = () => {\r\n if (this.pos.betweenPoints.pointFrom) {\r\n const pointBetweenPoints = getMidPoint(this.pos.betweenPoints.pointFrom, this.pos.betweenPoints.pointTo);\r\n\r\n this.pos.x = pointBetweenPoints.x\r\n this.pos.y = pointBetweenPoints.y\r\n }\r\n }\r\n\r\n render = (ctx) => {\r\n if ((isDisabledInPopupShouldBeHidden() && isDisabledInPopupWithParents(this))\r\n || (this.pos.x === 0 && this.pos.y === 0) // this is for Free Draw. see https://qcquotecountertops.atlassian.net/browse/QCDES-2064\r\n ) {\r\n return\r\n }\r\n\r\n this.updateOrientation();\r\n this.updatePositionBetweenPoints();\r\n if (this.design.shouldRenderFrameBorder) {\r\n this.renderFrameBorder(ctx);\r\n }\r\n this.renderText(ctx);\r\n }\r\n\r\n renderFrameBorder = (ctx) => {\r\n ctx.beginPath();\r\n const pos = this.getPos();\r\n const value = this.getValue(true, true);\r\n const mText = ctx.measureText(value);\r\n let angle = 0;\r\n if (this.pos.betweenPoints.pointFrom) {\r\n angle = getAngleBetweenTwoPoints(this.pos.betweenPoints.pointFrom, this.pos.betweenPoints.pointTo);\r\n //this will help to rotate upside down text\r\n if ([DIRECTIONS.NORTHWEST, DIRECTIONS.SOUTHWEST].includes(this.pos.orientation)) {\r\n angle += 180;\r\n }\r\n }\r\n\r\n ctx.strokeStyle = COLOR_THEMES[sqftConfig.activeTheme].primary;\r\n ctx.lineWidth = 2;\r\n ctx.fillStyle = COLOR.white\r\n\r\n ctx.save();\r\n ctx.translate(\r\n pos.x ,\r\n pos.y\r\n );\r\n ctx.rotate(angle * (Math.PI / 180));\r\n RenderFigures.roundedRect(ctx,\r\n - mText.width / 2, // / sqftConfig.scale * sqftConfig.defaultScale,\r\n - this.design.fontHeight / 1.5,\r\n mText.width * 1.5, /// sqftConfig.scale * sqftConfig.defaultScale,\r\n this.design.fontHeight + 6,\r\n 5,\r\n true,\r\n true\r\n );\r\n\r\n ctx.restore();\r\n ctx.closePath();\r\n }\r\n\r\n renderText = (ctx) => {\r\n const //scale = sqftConfig.scale,\r\n fontHeight = this.design.fontHeight, //getFontsizeSmall(),\r\n font = fontHeight + \"px \" + this.design.fontFamily,\r\n value = this.getValue(true, true),//this.value.toString(),\r\n\r\n mText = ctx.measureText(value),\r\n pos = this.getPos();\r\n let angle = this.pos.angle;\r\n ctx.beginPath();\r\n ctx.font = font;\r\n ctx.textAlign = \"center\";\r\n ctx.fillStyle = this.design.fontColor;\r\n if (this.pos.betweenPoints.pointFrom) {\r\n angle = getAngleBetweenTwoPoints(this.pos.betweenPoints.pointFrom, this.pos.betweenPoints.pointTo);\r\n }\r\n\r\n switch (this.orientation) {\r\n case DIRECTIONS.EAST:\r\n case DIRECTIONS.WEST:\r\n case DIRECTIONS.SOUTH:\r\n case DIRECTIONS.NORTH:\r\n case DIRECTIONS.SOUTHEAST:\r\n case DIRECTIONS.SOUTHWEST:\r\n case DIRECTIONS.NORTHEAST:\r\n case DIRECTIONS.NORTHWEST: {\r\n //this will help to rotate upside down text\r\n if (this.pos.betweenPoints.pointFrom) {\r\n if ([DIRECTIONS.NORTHWEST, DIRECTIONS.SOUTHWEST, DIRECTIONS.WEST].includes(this.pos.orientation)) {\r\n angle += 180;\r\n }\r\n }\r\n\r\n ctx.save();\r\n ctx.translate(pos.x, pos.y);\r\n ctx.rotate(angle * (Math.PI / 180));\r\n ctx.wrapText(value, fontHeight / 2, fontHeight / 3, mText, fontHeight);\r\n ctx.restore();\r\n\r\n //ctx.wrapText(value, pos.x, pos.y, mText, fontHeight);\r\n break;\r\n }\r\n default:\r\n break;\r\n }\r\n }\r\n}\r\n","import _ from 'lodash';\r\n\r\nimport EventManager from \"../../store/sqftEventManager\";\r\nimport config from \"../../store/sqftConfig\";\r\nimport workspace from \"../workspace\";\r\nimport {\r\n getBacksplashArea,\r\n getEdgeLength,\r\n getPointField,\r\n isPointInsideShape,\r\n mmToM\r\n} from \"../../../../helpers/sqftHelper\";\r\nimport ShapeHelper, {getEdgeFeatures} from \"../../../../helpers/shapeHelper\";\r\n//import $ from \"jquery\";\r\nimport {\r\n APPLIANCES_THAT_SHOULD_RENDER_MEASUREMENTS_INSIDE_THE_SHAPE,\r\n MOVABLE_IMAGE_TYPES,\r\n SIDEBAR_SLAB_BUTTONS\r\n} from \"../../../../constants\";\r\nimport store from \"../../../../../../store\";\r\nimport PointV2, {CORE_POINT_LAYOUTS} from \"./pointV2\";\r\nimport RenderMovableImage from \"./imageParts/renderMovableImage\";\r\nimport sqftShape from \"./sqftShape\";\r\nimport ShapeAbsolute from \"./shapeParts/shapeAbsolute\";\r\n//import point from \"./point\";\r\nimport {createImageLinesFromPoints, getImagePoint} from \"../../helpers/movableImageHelper\";\r\nimport workspaceControllers from \"../../store/workspaceControllers\";\r\nimport {hardCodeIsCaesarStone} from \"../../../../../../misc/fabricatorHardcode\";\r\n//import LineImage from \"./imageParts/lineImage\";\r\n\r\nclass MovableImage {\r\n image = null;\r\n initialSize = {\r\n width: 12,\r\n height: 12, // depth in 3d mode\r\n thickness: 12 // height in 3d (this is not visible param for the cabinets)\r\n };\r\n size = {\r\n width: 12,\r\n height: 12,\r\n thickness: 12,\r\n };\r\n hoverColor = \"#6495ED\";\r\n // debugLineColor = \"rgba(0,255,0,0.3)\",\r\n // debugPointColor = \"rgba(0,0,255,0.3)\",\r\n //fillColor = \"rgba(255,255,255,0)\",\r\n attachedTo = null;\r\n type;\r\n part;\r\n shapeRotatable;\r\n shapeType = \"square\";\r\n renderMovableImage = null; //new RenderMovableImage(this);\r\n\r\n constructor(id, priority = null, subType) {\r\n this.id = id;\r\n this.priority = priority;\r\n this.subType = subType;\r\n this.pos = { x: 0, y: 0 };\r\n this._state = {\r\n mouseDown: false,\r\n mouseDownPosition: null,\r\n mouseDownSize: null,\r\n hovering: false,\r\n isRotatable: false,\r\n minimumHeight: 1,\r\n minimumWidth: 1,\r\n };\r\n this.rotatedDegrees = 0;\r\n this.rotatedDegreesSlab = 0;\r\n this.featureId = id;\r\n this.pricePerArea = 0;\r\n this.isHidden = false;\r\n this.isDisabledInPopup = false;\r\n this.Direction = {\r\n RIGHT: 0,\r\n LEFT: 1\r\n };\r\n this.FlipDirection = {\r\n HORIZONTAL: 0,\r\n VERTICAL: 1\r\n };\r\n this.resizablePoint = null;\r\n this.onClicked = null;\r\n this.onHover = null;\r\n this.shapeAbsolute = new ShapeAbsolute(this); // this is used to snap images\r\n this.params = {\r\n canSnap: true\r\n }\r\n\r\n //this.initEvents();\r\n }\r\n\r\n //private methods\r\n _setFillColor = (red, green, blue, alpha) => {\r\n let fillColor =\r\n \"rgba(\" + red + \", \" + green + \", \" + blue + \", \" + alpha + \")\";\r\n void fillColor;\r\n }\r\n _setImage = (value) => { this.image = value; }\r\n _setAttachedTo = (value) => {\r\n if (value) {\r\n this.attachedTo = value;\r\n }\r\n }\r\n _setHovering = (value) => {\r\n this._state.hovering = value;\r\n return value;\r\n }\r\n _snappedPos = () => {\r\n let scaledGridSize = config.workspace.getScaledGridSize();\r\n\r\n let newX = Math.round(this.pos.x / scaledGridSize) * scaledGridSize;\r\n let newY = Math.round(this.pos.y / scaledGridSize) * scaledGridSize;\r\n return {\r\n x: newX,\r\n y: newY\r\n };\r\n }\r\n\r\n _moveImage = (mousePos) => {\r\n const scale = workspace.getScale();\r\n let xDiff = (this._state.mouseDownPosition.x - mousePos.x) / scale;\r\n let yDiff = (this._state.mouseDownPosition.y - mousePos.y) / scale;\r\n\r\n this.updateSnappedPos();\r\n\r\n this.pos.x -= xDiff;\r\n this._state.mouseDownPosition.x = mousePos.x;\r\n\r\n this.pos.y -= yDiff;\r\n this._state.mouseDownPosition.y = mousePos.y;\r\n };\r\n\r\n resetAbsolutePos = () => {\r\n if (this.params.canSnap) {\r\n this.shapeAbsolute.setAbsolutePos(null); //reset minLength for correct calculations without stacking\r\n this.shapeAbsolute.setSnappedWithShape(null);\r\n this.shapeAbsolute.setSnappedShapeGroup(null);\r\n }\r\n }\r\n\r\n updateLinesLength = () => {\r\n for (const line of this.getLines()) {\r\n line.updateLineLength();\r\n }\r\n }\r\n\r\n updateSnappedPos = () => {\r\n if (this.params.canSnap) {\r\n this.shapeAbsolute.setAbsolutePos(null); //reset minLength for correct calculations without stacking\r\n this.shapeAbsolute.setSnappedWithShape(null);\r\n this.shapeAbsolute.setSnappedShapeGroup(null);\r\n\r\n //let distancesToWalls = ShapeHelper.getDistancesToWalls(this);\r\n let distancesToShapes = ShapeHelper.getDistancesToShapes(this);\r\n let distancesToImages = ShapeHelper.getDistancesToImages(this);\r\n //console.log(\"distancesToWalls\", distancesToWalls);\r\n //console.log(\"distancesToShapes\", distancesToShapes);\r\n //console.log(\"distancesToImages\", distancesToImages);\r\n\r\n let snapPossibilitiesToShapes = ShapeHelper.getSnappingPossibilities(distancesToShapes);\r\n let snapPossibilitiesToImages = ShapeHelper.getSnappingPossibilities(distancesToImages);\r\n //let snapPossibilitiesToWalls = ShapeHelper.getSnappingPossibilities(distancesToWalls);\r\n //console.log(\"snapPossibilitiesToShapes\", snapPossibilitiesToShapes);\r\n\r\n //walls\r\n // let [absolutePosToWalls, snappedWithWalls] = ShapeHelper.getAbsolutePosFromSnapPossibilities(snapPossibilitiesToWalls, this.pos);\r\n // if (absolutePosToWalls) {\r\n // this.shapeAbsolute.setAbsolutePos(absolutePosToWalls);\r\n // void snappedWithWalls;\r\n // //snappedWithImage.shapeAbsolute.setSnappedWithImage(this);\r\n // }\r\n\r\n //shapes\r\n let [absolutePosToShapes, snappedWithShape] = ShapeHelper.getAbsolutePosFromSnapPossibilities(snapPossibilitiesToShapes, this.pos);\r\n if (absolutePosToShapes) {\r\n this.shapeAbsolute.setAbsolutePos(absolutePosToShapes);\r\n snappedWithShape.shapeAbsolute.setSnappedWithShape(this);\r\n workspaceControllers.snappedShapeGroups.setSameSnappedShapesGroup(this, snappedWithShape);\r\n }\r\n\r\n //images\r\n let [absolutePosToImages, snappedWithImage] = ShapeHelper.getAbsolutePosFromSnapPossibilities(snapPossibilitiesToImages, this.pos);\r\n if (absolutePosToImages) {\r\n this.shapeAbsolute.setAbsolutePos(absolutePosToImages);\r\n workspaceControllers.snappedShapeGroups.setSameSnappedShapesGroup(this, snappedWithImage);\r\n //snappedWithImage.shapeAbsolute.setSnappedWithImage(this);\r\n }\r\n }\r\n }\r\n\r\n _isMouesOverImage = (mousePos) => {\r\n let scale = workspace.getScale();\r\n let offset = workspace.getOffset();\r\n let realPos = {\r\n x: (this.pos.x * scale) + offset.x,\r\n y: (this.pos.y * scale) + offset.y\r\n };\r\n let realSize = {\r\n width: this.size.width * scale,\r\n height: this.size.height * scale\r\n };\r\n let axis = {\r\n x: realPos.x + (realSize.width / 2),\r\n y: realPos.y + (realSize.height / 2)\r\n }\r\n let points = [\r\n this._getRotatedPoint({x: realPos.x, y: realPos.y}, axis, this.rotatedDegrees),\r\n this._getRotatedPoint({x: realPos.x + realSize.width, y: realPos.y}, axis, this.rotatedDegrees),\r\n this._getRotatedPoint({x: realPos.x + realSize.width, y: realPos.y + realSize.height}, axis, this.rotatedDegrees),\r\n this._getRotatedPoint({x: realPos.x, y: realPos.y + realSize.height}, axis, this.rotatedDegrees)\r\n ];\r\n\r\n let maxX = points[0].x;\r\n let maxY = points[0].y;\r\n let minX = points[0].x;\r\n let minY = points[0].y;\r\n\r\n for (let i = 0; i < points.length; i++) {\r\n let point = points[i];\r\n if (maxX < point.x)\r\n maxX = point.x;\r\n if (minX > point.x)\r\n minX = point.x;\r\n if (maxY < point.y)\r\n maxY = point.y;\r\n if (minY > point.y)\r\n minY = point.y;\r\n }\r\n\r\n const isHovering = mousePos.x > minX && mousePos.y > minY && mousePos.x < maxX && mousePos.y < maxY;\r\n this._setHovering(isHovering);\r\n\r\n return isHovering;\r\n };\r\n\r\n _getRotatedPoint(point, around, angle) {\r\n let s = Math.sin(angle);\r\n let c = Math.cos(angle);\r\n point.x -= around.x;\r\n point.y -= around.y;\r\n\r\n let newPoint = {\r\n x: point.x * c - point.y * s,\r\n y: point.x * s + point.y * c\r\n };\r\n\r\n return {\r\n x: newPoint.x + around.x,\r\n y: newPoint.y + around.y\r\n };\r\n }\r\n\r\n //private event handles\r\n _onMouseMove(mousePos, e) {\r\n if (e.terminate) {\r\n this._setHovering(false);\r\n return false;\r\n }\r\n if (this._isMouesOverImage(mousePos)) {\r\n if (this.onHover) {\r\n this.onHover(this);\r\n }\r\n if (this._state.mouseDown) {\r\n EventManager.setCursor('move', this, true);\r\n this._moveImage(mousePos);\r\n }\r\n else {\r\n EventManager.setCursor('move', this)\r\n }\r\n return true;\r\n }\r\n //smooth scrolling\r\n if (this._state.mouseDown) {\r\n this._moveImage(mousePos);\r\n }\r\n EventManager.resetCursor(this);\r\n return false;\r\n }\r\n\r\n _onMouseUp(mousePos, e) {\r\n void mousePos;\r\n void e;\r\n EventManager.releaseStealLock(this);\r\n this._state.mouseDown = false;\r\n this._state.mouseDownPosition = null;\r\n this._state.mouseDownSize = null;\r\n }\r\n\r\n _onMouseDown = (mousePos, e) => {\r\n void e;\r\n //if not then handle event with this object\r\n if (this.isHovering()) {\r\n const reduxState = store.getState();\r\n const activeButton = reduxState.sqftMenuState.activeButton;\r\n const isShowSlabTool = reduxState.sqftSlabState.isShowSlabTool;\r\n\r\n //Delete this\r\n if (activeButton === SIDEBAR_SLAB_BUTTONS.delete && isShowSlabTool) {\r\n workspace.removeSlabImage(this);\r\n }\r\n\r\n //Move self\r\n if (EventManager.getCursor().indexOf(\"move\") >= 0) {\r\n\r\n this._state.mouseDown = true;\r\n this._state.mouseDownPosition = mousePos;\r\n this._state.mouseDownSize = this.getSize();\r\n }\r\n return true;\r\n }\r\n return false;\r\n }\r\n\r\n //public methods\r\n setPricePerArea = (val) => { this.pricePerArea = _.clone(val) };\r\n setPosition = (value) => { this.pos = value; }\r\n setId = (id) => { this.id = id };\r\n setFeatureId = (featureId) => { this.featureId = featureId };\r\n getIsRotatable = () => { return this._state.isRotatable };\r\n getState = () => { return this._state };\r\n setIsRotatable = (isRotatable) => { this._state.isRotatable = isRotatable};\r\n setRotationDegrees = (rotationDegrees) => {\r\n this.rotatedDegrees = rotationDegrees\r\n }\r\n getCenter = () => {\r\n return {\r\n x: this.size.width / 2,\r\n y: this.size.height / 2\r\n }\r\n }\r\n getCenterPosition = () => {\r\n const center = this.getCenter();\r\n const position = this.getPosition();\r\n\r\n return {\r\n x: position.x + center.x,\r\n y: position.y + center.y\r\n }\r\n }\r\n\r\n setSize = (value) => {\r\n this.size.width = value.width;\r\n this.size.height = value.height;\r\n }\r\n\r\n setInitialSize = (value) => {\r\n this.initialSize.width = value.width;\r\n this.initialSize.height = value.height;\r\n }\r\n\r\n getPosition = () => {\r\n let absolutePos = this.shapeAbsolute.getAbsolutePosition();\r\n\r\n return absolutePos !== null ? absolutePos : this.pos;\r\n };\r\n getSnappedPosition = () => { return this._snappedPos(); };\r\n getPosField = () => {\r\n let position = this.getPosition();\r\n let offset = workspace.getOffset();\r\n const scale = workspace.getScale();\r\n\r\n return {\r\n x: ((position.x + (this.size.width / 2)) * scale) + offset.x,\r\n y: ((position.y + (this.size.height / 2)) * scale) + offset.y\r\n }\r\n };\r\n isHovering = () => {\r\n //console.log(\"this._state.hovering\", this._state.hovering);\r\n return this._state.hovering === true;\r\n };\r\n getAttachedTo = () => { return this.attachedTo; };\r\n getImage = () => { return this.image; };\r\n getSize = () => { return this.size; };\r\n getWidth = () => { return this.getSize().width; };\r\n getHeight = () => { return this.getSize().height; };\r\n getThickness = () => { return this.getSize().thickness; };\r\n getRotation = () => { return this.rotatedDegrees; };\r\n export = () => {\r\n let linesData = [];\r\n const Lines = this.getLines();\r\n for (const lineIndex in Lines) {\r\n if (Lines.hasOwnProperty(lineIndex)) {\r\n linesData.push({lineIndex, ...Lines[lineIndex].exportData()});\r\n }\r\n }\r\n\r\n let exportData = {\r\n pos: this.pos,\r\n id: this.id,\r\n featureId: this.featureId ? this.featureId : this.image.dataset.id, // this.image.dataset.id old support\r\n image: {\r\n src: this.image.currentSrc || $(this.image).attr('src'),\r\n id: this.image.dataset.id,\r\n name: this.image.dataset.name,\r\n nameMetric: this.image.dataset.nameMetric,\r\n width: this.image.width,\r\n height: this.image.height\r\n },\r\n type: this.type,\r\n subType: this.subType,\r\n part: this.part,\r\n size: this.size,\r\n rotatedDegrees: this.rotatedDegrees,\r\n rotatedDegreesSlab: this.rotatedDegreesSlab,\r\n attachedTo: this.attachedTo ? this.attachedTo.id : null,\r\n attachedToParentId: this.attachedTo\r\n ? this.attachedTo.getParent\r\n ? this.attachedTo.getParent().id\r\n : null\r\n : null,\r\n isDisabledInPopup: this.isDisabledInPopup,\r\n pricePerArea: this.pricePerArea,\r\n priority: this.priority,\r\n shapeAbsoluteData: this.shapeAbsolute ? this.shapeAbsolute.export() : null,\r\n linesData: linesData,\r\n };\r\n if (this.attachedTo && this.attachedTo.getLineLength){\r\n exportData.lineLength = config.measureUnit === \"Metric\" ? mmToM(this.attachedTo.getLineLengthMm()) : this.attachedTo.getLineLength();\r\n exportData.partId = this.attachedTo.getParent().partId;\r\n }\r\n if (this.type === \"edge\") {\r\n const navItems = getEdgeFeatures();\r\n let edge = navItems.find(edge => edge.part.dbFeature.id === +this.image.dataset.id);\r\n let unit = edge ? edge.unit : null;\r\n exportData.length = (unit ? unit.toLowerCase() : null) === \"each\"\r\n ? 1\r\n : config.measureUnit === \"Imperial\" ? getEdgeLength(this.attachedTo) : mmToM(getEdgeLength(this.attachedTo));\r\n } else if (this.type === \"backsplash\") {\r\n exportData.length = getBacksplashArea(this.attachedTo.getBacksplashHeight(), this.attachedTo);\r\n } else if (this.type === \"wall\") {\r\n exportData.length = exportData.lineLength;\r\n }\r\n\r\n return exportData;\r\n };\r\n importData = (importData) => {\r\n const skipImportProps = ['image', 'shapeAbsolute', 'linesData'];\r\n Object.keys(importData).forEach(key => {\r\n if (importData.hasOwnProperty(key)) {\r\n if (!skipImportProps.includes(key)) {\r\n this[key] = importData[key];\r\n }\r\n }\r\n });\r\n if (importData.shapeAbsoluteData) {\r\n this.shapeAbsolute.import(importData.shapeAbsoluteData);\r\n }\r\n if (importData.linesData) {\r\n for (const lineData of importData.linesData) {\r\n const line = this.lines.find(line => line.lineIndex === +lineData.lineIndex);\r\n if (line) {\r\n line.importData(lineData);\r\n }\r\n }\r\n }\r\n }\r\n //todo sqft-react is this needed?\r\n // generateImage = (value, shapes) => {\r\n // let domImg = document.createElement('img');\r\n // domImg.crossOrigin = \"Anonymous\";\r\n // let $img = $(domImg);\r\n // $img.css({\r\n // position: 'absolute',\r\n // width: '1px',\r\n // height: '1px'\r\n // });\r\n // $img.attr({\r\n // 'data-id': value.image.id,\r\n // 'data-name': value.image.name,\r\n // });\r\n // let attachedTo = null;\r\n // if (value.attachedTo) {\r\n // for (let i = 0; i < shapes.length; i++) {\r\n // let shape = shapes[i];\r\n // if (shape.getLines && !attachedTo) {\r\n // let lines = shape.getLines();\r\n // for(let n = 0; n < lines.length; n++) {\r\n // let line = lines[n];\r\n // if ( line.id == value.attachedTo && !attachedTo ) {\r\n // attachedTo = line;\r\n // }\r\n // }\r\n // }\r\n // }\r\n // }\r\n // $img.appendTo($('body'));\r\n // $img.attr('src', (config.isKiosk || value.image.src.includes('data:image') ? '' : '/api/SqFtCalc/GetImage?url=') + value.image.src);\r\n // return {\r\n // image: domImg,\r\n // attachedTo: this.attachedTo\r\n // };\r\n // };\r\n getTotalInches = function() {\r\n return 0;\r\n };\r\n\r\n /**\r\n * Public functions\r\n * @param flipDirection\r\n */\r\n flip = function(flipDirection) {\r\n void flipDirection\r\n };\r\n rotate = (degrees, direction) => {\r\n //todo slab rotation QCDES-1358\r\n if (this.type === MOVABLE_IMAGE_TYPES.slabImage) {\r\n return\r\n }\r\n const isSlabMode = store.getState().sqftSlabState.isShowSlabTool;\r\n isSlabMode ? this.rotatedDegreesSlab += degrees : this.rotatedDegrees += degrees;\r\n (this.rotatedDegrees === 360) && (this.rotatedDegrees = 0);\r\n (this.rotatedDegreesSlab === 360) && (this.rotatedDegreesSlab = 0);\r\n\r\n direction = direction || this.Direction.Right;\r\n let angle = (degrees * Math.PI / 180);\r\n if (direction === this.Direction.LEFT)\r\n angle *= -1;\r\n if (this.shapeRotatable) {\r\n this.shapeRotatable.rotateShapeRotatablePoints(this.getCenter(), angle, isSlabMode);\r\n }\r\n this.rotateBorderPoints(angle);\r\n };\r\n rotateBorderPoints = (angle) => {\r\n const center = this.getCenter();\r\n for (const linePoint of this.getLinePoints()) {\r\n linePoint.rotate(center, angle);\r\n }\r\n }\r\n init = (position, image, size, attachedTo, isHidden) => {\r\n this.setPosition(position);\r\n this._setImage(image);\r\n this.setSize(size);\r\n this.setInitialSize(size);\r\n this._setAttachedTo(attachedTo);\r\n function getRandomInt(min, max) {\r\n return Math.floor(Math.random() * (max - min)) + min;\r\n }\r\n this._setFillColor(getRandomInt(0, 255), getRandomInt(0, 255), getRandomInt(0, 255), 0.3);\r\n if (isHidden) {\r\n this.isHidden = true;\r\n } else {\r\n this.initEvents();\r\n //this.initResizablePoint(position);\r\n }\r\n this.lines = this.createLines();\r\n //hide lines for slab images\r\n if (this.type === MOVABLE_IMAGE_TYPES.slabImage) {\r\n this.deregisterLineEvents();\r\n }\r\n\r\n this.renderMovableImage = new RenderMovableImage(this);\r\n };\r\n initEvents = () => {\r\n EventManager.addEvent(\r\n EventManager.events.MOUSE_MOVE,\r\n this._onMouseMove,\r\n this,\r\n this.priority ? this.priority : EventManager.priorities.IMAGE - (this.attachedTo ? 1 : 0)\r\n );\r\n EventManager.addEvent(\r\n EventManager.events.MOUSE_DOWN,\r\n this._onMouseDown,\r\n this,\r\n this.priority ? this.priority : EventManager.priorities.IMAGE - (this.attachedTo ? 1 : 0)\r\n );\r\n EventManager.addEvent(\r\n EventManager.events.MOUSE_UP,\r\n this._onMouseUp,\r\n this,\r\n this.priority ? this.priority : EventManager.priorities.IMAGE - (this.attachedTo ? 1 : 0)\r\n );\r\n EventManager.addEvent(\r\n EventManager.events.RENDER,\r\n this._render,\r\n this,\r\n this.priority ? this.priority : EventManager.priorities.IMAGE - (this.attachedTo ? 1 : 0)\r\n );\r\n };\r\n\r\n initResizablePoint = () => {\r\n let pointParams = {\r\n priority: EventManager.priorities.BOX_POINT,\r\n movable: true,\r\n isCentered: true,\r\n isVisibleOnHover: true,\r\n moveCallback: (mousePos, movable) => {\r\n //const movablePoint = movable.parent;\r\n const movableImage = movable.grandParent;\r\n //const size = movableImage.getSize();\r\n const state = movableImage.getState();\r\n let scale = workspace.getScale();\r\n let xDiff = (movable.state.mouseDownPosition.x - mousePos.x) / scale;\r\n let yDiff = (movable.state.mouseDownPosition.y - mousePos.y) / scale;\r\n // const newWidth = movable.state.mouseDownSize.width - xDiff;\r\n // const newHeight = movable.state.mouseDownSize.height - yDiff;\r\n const newWidth = (movable.state.mouseDownSize.width - xDiff + movable.state.mouseDownSize.height - yDiff) / 2;\r\n const newHeight = (movable.state.mouseDownSize.height - yDiff + movable.state.mouseDownSize.width - xDiff) / 2;\r\n\r\n if (newHeight >= state.minimumHeight && newWidth >= state.minimumWidth ) {\r\n movableImage.setSize({\r\n width: newWidth,\r\n height: newHeight\r\n });\r\n movable.posX = newWidth;\r\n movable.posY = newHeight;\r\n }\r\n },\r\n mouseUpCallback: (mousePos, movable) => {\r\n movable.state.mouseDownSize = null\r\n },\r\n mouseDownCallback: (mousePos, movable) => {\r\n const movableImage = movable.grandParent;\r\n movable.state.mouseDownSize = {...movableImage.getSize()};\r\n }\r\n };\r\n let pointDesign = {\r\n radius: 10,\r\n lineWidth: 1,\r\n layout: CORE_POINT_LAYOUTS.resize\r\n };\r\n //const position = this.getPosition();\r\n const size = this.getSize();\r\n const pointPositionX = size.width;\r\n const pointPositionY = size.height;\r\n this.resizablePoint = new PointV2(pointPositionX, pointPositionY, this, pointParams, pointDesign);\r\n }\r\n\r\n deregisterEvents = () => {\r\n EventManager.removeEvent(this);\r\n this.isHidden = true;\r\n this.deregisterLineEvents()\r\n };\r\n\r\n deregisterLineEvents = () => {\r\n const lines = this.getLines();\r\n for (const line of lines) {\r\n line.deregisterEvents();\r\n }\r\n };\r\n\r\n reInitEvents = () => {\r\n if (this.isHidden) {\r\n this.initEvents();\r\n this.isHidden = false;\r\n this.reInitLineEvents();\r\n }\r\n };\r\n\r\n reInitLineEvents = () => {\r\n //hide lines for slab images\r\n if (this.type !== MOVABLE_IMAGE_TYPES.slabImage) {\r\n for (const line of this.getLines()) {\r\n line.reInitEvents();\r\n }\r\n }\r\n };\r\n\r\n destroy = (protect) => {\r\n if (!protect) {\r\n EventManager.removeEvent(this);\r\n for (const line of this.getLines()) {\r\n line.destroy();\r\n }\r\n if (this.resizablePoint) {\r\n this.resizablePoint.destroy();\r\n }\r\n }\r\n };\r\n\r\n stealCursor = function(who) {\r\n if (this === who) {\r\n EventManager.resetCursor(this);\r\n }\r\n };\r\n\r\n resetCursor = function(who) {\r\n void who;\r\n EventManager.resetCursor(this);\r\n };\r\n\r\n // getMidPoint(from, to) {\r\n // return {\r\n // x: from.x + (to.x - from.x)/2,\r\n // y: from.y + (to.y - from.y)/2\r\n // };\r\n // }\r\n\r\n isIE = function() {\r\n return (/Trident/i).test(window.navigator.appVersion);\r\n };\r\n\r\n getSrc = function(img) {\r\n if (img) {\r\n let src = img.getAttribute('src');\r\n if (src) {\r\n return src;\r\n }\r\n src = img.getAttribute(\"style\");\r\n if (src) {\r\n return src.replace(/background-image: url\\(\"\\/api\\/SqFtCalc\\/GetImage\\?url=/g, \"\").replace(/\"\\);/g, \"\");\r\n }\r\n }\r\n return \"\";\r\n };\r\n\r\n isSVG = (img) => {\r\n return (/data:image\\/svg\\+xml;base64,/).test(this.getSrc(img));\r\n };\r\n\r\n getLinePointsPointField = () => {\r\n const points = this.getLines().map(line => line.from);\r\n return points.map(point => getPointField(point.x, point.y, this))\r\n }\r\n\r\n getPointsPointField = () => {\r\n return this.getLinePointsPointField()\r\n }\r\n\r\n getBorderPointsOnWorkspace = () => {\r\n const posField = this.getPosition();\r\n const points = this.getLines().map(line => line.from);\r\n return points.map(point => {\r\n return {\r\n x: posField.x + point.x,\r\n y: posField.y + point.y\r\n }\r\n })\r\n }\r\n\r\n getPointsPosOnWorkspace = () => {\r\n return this.getBorderPointsOnWorkspace();\r\n };\r\n\r\n createBorderPointsPosition = () => {\r\n return [\r\n getImagePoint(0, 0, this),\r\n getImagePoint(this.size.width, 0, this),\r\n getImagePoint(this.size.width, this.size.height, this),\r\n getImagePoint(0, this.size.height, this),\r\n ]\r\n\r\n // return [\r\n // new point(0, 0, this),\r\n // new point(this.size.width, 0, this),\r\n // new point(this.size.width, this.size.height, this),\r\n // new point(0, this.size.height, this),\r\n // ]\r\n }\r\n\r\n getLines = () => {\r\n return this.lines\r\n }\r\n\r\n getPrevLine = (line) => {\r\n const index = this.lines.indexOf(line);\r\n if (index === -1) return null; // Line not found\r\n\r\n return this.lines[(index - 1 + this.lines.length) % this.lines.length]; // Loop back if it's the first line\r\n }\r\n\r\n getNextLine = (line) => {\r\n const index = this.lines.indexOf(line);\r\n if (index === -1) return null; // Line not found\r\n\r\n return this.lines[(index + 1) % this.lines.length]; // Loop back if it's the last line\r\n }\r\n\r\n getLinePoints = () => {\r\n return this.lines.map(line => line.from)\r\n }\r\n\r\n revealMeasurementsInsideShape = () => {\r\n for (const imageLine of this.getLines()) {\r\n imageLine.measurementInsideShape.revealEvents();\r\n }\r\n }\r\n\r\n hideMeasurementsInsideShape = () => {\r\n for (const imageLine of this.getLines()) {\r\n imageLine.measurementInsideShape.hideEvents();\r\n }\r\n }\r\n\r\n isAnyLineHovering = () => {\r\n const lines = this.getLines();\r\n for (const line of lines) {\r\n if (line.isHovering()) {\r\n return true\r\n }\r\n }\r\n\r\n return false\r\n }\r\n\r\n createLines = () => {\r\n return createImageLinesFromPoints(this.createBorderPointsPosition(), this);\r\n }\r\n\r\n getOffset = () => {\r\n const scale = config.scale;\r\n const workspacePos = workspace.getOffset();\r\n let _pos = this.getPosition();\r\n if (config.workspace.snapToGrid) {\r\n _pos = this.getSnappedPosition();\r\n }\r\n return {\r\n x: workspacePos.x + (_pos.x * scale),\r\n y: workspacePos.y + (_pos.y * scale)\r\n }\r\n };\r\n\r\n shouldRenderMeasurementsInsideTheShape = () => {\r\n return APPLIANCES_THAT_SHOULD_RENDER_MEASUREMENTS_INSIDE_THE_SHAPE.includes(this.subType)\r\n && !hardCodeIsCaesarStone(); //CAES-547 remove measurements for the CaesarStone\r\n }\r\n\r\n getOuterShape = () => {\r\n const centerPos = this.getCenter();\r\n const centerPosOnField = getPointField(centerPos.x, centerPos.y, this);\r\n const shapes = workspace.getShapes(true);\r\n //let countInsidePoints;\r\n for (let shape of shapes) {\r\n //countInsidePoints = 0;\r\n if (shape instanceof sqftShape) {\r\n // for (let borderPoint of borderPoints) {\r\n // if (isPointInsideShape(borderPoint, shape, true)) {\r\n // countInsidePoints += 1\r\n // }\r\n // }\r\n const isCenterInsideShape = isPointInsideShape(centerPosOnField, shape, true);\r\n if (isCenterInsideShape) {\r\n return shape\r\n }\r\n // if (countInsidePoints >= 2) {\r\n // return shape\r\n // }\r\n }\r\n }\r\n\r\n return null\r\n }\r\n\r\n _render = (ctx) => {\r\n this.renderMovableImage.render(ctx);\r\n }\r\n}\r\n\r\nexport default MovableImage;\r\n","import * as uuid from \"uuid\";\r\nimport Movable from \"../workspace/mixin/movable\";\r\nimport EventManager from \"../../store/sqftEventManager\";\r\nimport ModelCorePoint from \"../workspace/textBox/model/modelCorePoint\";\r\nimport workspace from \"../workspace\";\r\nimport {getPointField, getPointOnWorkspace} from \"../../../../helpers/sqftHelper\";\r\nimport config from \"../../store/sqftConfig\";\r\nimport DrawImage from \"../workspace/textBox/draw/drawImage\";\r\nimport COLOR_THEMES, {COLOR} from \"../../store/colorThemes\";\r\nimport RenderFigures from \"../../helpers/renderFigures\";\r\n\r\nexport const CORE_POINT_LAYOUTS = {\r\n black: 'black',\r\n white: 'white',\r\n green: 'green',\r\n ear: 'ear',\r\n resize: 'resize',\r\n}\r\n\r\nexport default class PointV2 {\r\n _modelCorePoint;\r\n id;\r\n parent;\r\n design = {\r\n radius: 12,\r\n lineWidth: 1,\r\n layout: CORE_POINT_LAYOUTS.white\r\n };\r\n params = {\r\n priority: EventManager.priorities.POINT,\r\n movable: false,\r\n isCentered: false,\r\n\r\n isCenteredByY: false,\r\n isResizedByPoint: false,\r\n isScaledByPoint: false,\r\n isVisibleOnHover: false,\r\n shouldRotateShape: false,\r\n };\r\n\r\n constructor(x, y, parent, pointPrams = {}, design = {}) {\r\n this.params = Object.assign(this.params, pointPrams);\r\n this.design = Object.assign(this.design, design);\r\n let mixins = {\r\n movable : this.params.movable\r\n ? new Movable(x,\r\n y,\r\n this.design.radius,\r\n this.design.radius,\r\n this.params.priority,\r\n this,\r\n parent,\r\n this.params.moveCallback,\r\n this.params.mouseUpCallback,\r\n this.params.mouseDownCallback\r\n )\r\n : null,\r\n };\r\n this._modelCorePoint = new ModelCorePoint(x, y, parent, mixins);\r\n this.parent = parent;\r\n this.id = uuid.v4();\r\n this.initEvents();\r\n }\r\n\r\n get x() {\r\n return this._modelCorePoint.getPosX();\r\n }\r\n\r\n get y() {\r\n return this._modelCorePoint.getPosY();\r\n }\r\n\r\n set x(value) {\r\n return this._modelCorePoint.setPosX(value);\r\n }\r\n\r\n set y(value) {\r\n return this._modelCorePoint.setPosY(value);\r\n }\r\n\r\n get modelCorePoint() {\r\n return this._modelCorePoint;\r\n }\r\n\r\n set modelCorePoint(value) {\r\n this._modelCorePoint = value;\r\n }\r\n\r\n exportData = () => {\r\n return {\r\n id: this.id,\r\n x: this.x,\r\n y: this.y,\r\n design: this.design,\r\n params: this.params,\r\n }\r\n }\r\n\r\n importData = (pointData) => {\r\n this.id = pointData.id;\r\n this.x = pointData.x;\r\n this.y = pointData.y;\r\n this.design = pointData.design;\r\n this.params = pointData.params;\r\n }\r\n\r\n getPointField = () => {\r\n return getPointField(this.modelCorePoint.getPosX(), this.modelCorePoint.getPosY(), this.modelCorePoint.parent);\r\n }\r\n\r\n getPointPosOnWorkspace = () => {\r\n return getPointOnWorkspace(this.modelCorePoint.getPosX(), this.modelCorePoint.getPosY(), this.modelCorePoint.parent);\r\n };\r\n\r\n getParent = () => {\r\n return this.parent;\r\n }\r\n\r\n getPosition = () => {\r\n return {\r\n x: this.modelCorePoint.getPosX(),\r\n y: this.modelCorePoint.getPosY()\r\n }\r\n }\r\n\r\n setPosition(value) {\r\n this.modelCorePoint.setPosX(value.x);\r\n this.modelCorePoint.setPosY(value.y);\r\n }\r\n\r\n rotate(origin, angle, isSlabMode) {\r\n this._modelCorePoint.rotate(origin, angle, isSlabMode);\r\n }\r\n\r\n initEvents() {\r\n EventManager.addEvent(\r\n EventManager.events.MOUSE_MOVE,\r\n this.onMouseMove.bind(this),\r\n this,\r\n this.params.priority\r\n );\r\n EventManager.addEvent(\r\n EventManager.events.MOUSE_DOWN,\r\n this.onMouseDown.bind(this),\r\n this,\r\n this.params.priority\r\n );\r\n EventManager.addEvent(\r\n EventManager.events.MOUSE_UP,\r\n this.onMouseUp.bind(this),\r\n this,\r\n this.params.priority\r\n );\r\n EventManager.addEvent(\r\n EventManager.events.RENDER,\r\n this.render.bind(this),\r\n this,\r\n this.params.priority\r\n );\r\n }\r\n\r\n onMouseMove() {\r\n }\r\n\r\n onMouseUp() {\r\n }\r\n\r\n onMouseDown() {\r\n }\r\n\r\n delete() {\r\n this.deregisterEvents();\r\n }\r\n\r\n destroy() {\r\n this.delete();\r\n }\r\n\r\n deregisterEvents = () => {\r\n EventManager.removeEvent(this.modelCorePoint.mixins.movable);\r\n EventManager.removeEvent(this);\r\n }\r\n\r\n reInitEvents = () => {\r\n this.initEvents();\r\n if (this.modelCorePoint.mixins.movable) {\r\n this.modelCorePoint.mixins.movable.reInitEvents();\r\n }\r\n }\r\n\r\n render = (ctx) => {\r\n if (workspace && workspace.getState().loading) return;\r\n\r\n // display only hovered or when mouse is down\r\n if (this.params.isVisibleOnHover && !this.isHoveredWithParent() && !this.isMouseDownWithParent()) {\r\n return\r\n }\r\n\r\n let pointField = this.getPointField();\r\n\r\n ctx.save();\r\n ctx.beginPath();\r\n\r\n switch (this.design.layout) {\r\n case CORE_POINT_LAYOUTS.black: {\r\n let arcRadius = 0;\r\n if (this.isHoveredWithParent()) {\r\n arcRadius = this.design.radius\r\n ctx.fillStyle = COLOR.blackLight;\r\n } else {\r\n arcRadius = this.design.radius / 2\r\n ctx.fillStyle = COLOR.white;\r\n }\r\n\r\n ctx.arc(\r\n pointField.x,\r\n pointField.y,\r\n arcRadius,\r\n 0,\r\n 2 * Math.PI,\r\n false\r\n );\r\n\r\n ctx.strokeStyle = COLOR_THEMES[config.activeTheme].primary;\r\n\r\n ctx.stroke();\r\n ctx.fill();\r\n break;\r\n }\r\n case CORE_POINT_LAYOUTS.white: {\r\n ctx.arc(\r\n pointField.x,\r\n pointField.y,\r\n this.design.radius,\r\n 0,\r\n Math.PI,\r\n false\r\n );\r\n\r\n ctx.strokeStyle = COLOR_THEMES[config.activeTheme].primary;\r\n ctx.fillStyle = '#ffffff';\r\n ctx.stroke();\r\n ctx.fill();\r\n break;\r\n }\r\n case CORE_POINT_LAYOUTS.green: {\r\n let arcRadius = 0;\r\n if (this.modelCorePoint.mixins.movable\r\n && this.modelCorePoint.mixins.movable.state.hovering\r\n ) {\r\n arcRadius = this.design.radius + 5;\r\n ctx.strokeStyle = COLOR.blackLight;\r\n ctx.fillStyle = COLOR.blackLight;\r\n } else {\r\n arcRadius = this.design.radius;\r\n ctx.strokeStyle = 'rgba(159,197,34,0.47)';\r\n ctx.fillStyle = 'rgba(159,197,34, 1)';\r\n }\r\n ctx.arc(\r\n pointField.x,\r\n pointField.y,\r\n arcRadius,\r\n 0,\r\n Math.PI * 2,\r\n false\r\n );\r\n\r\n ctx.lineWidth = 2;\r\n ctx.fill();\r\n\r\n // RenderFigures.drawRotatedArrow(ctx,\r\n // pointField.x - 20, pointField.y,\r\n // pointField.x, pointField.y - 20,\r\n // pointField.x - 20, pointField.y - 20,\r\n // 10\r\n // )\r\n\r\n ctx.stroke();\r\n break;\r\n }\r\n case CORE_POINT_LAYOUTS.ear: {\r\n let subLineWidth = 10;\r\n let subLineHeight = this.design.radius;\r\n ctx.moveTo(pointField.x, pointField.y - subLineHeight);\r\n ctx.lineTo(pointField.x + subLineWidth, pointField.y - subLineHeight);\r\n RenderFigures.renderOval(ctx, this.design.radius * 2 , this.design.radius * 2, pointField.x+ subLineWidth, pointField.y);\r\n ctx.moveTo(pointField.x + subLineWidth, pointField.y + subLineHeight);\r\n ctx.lineTo(pointField.x, pointField.y + subLineHeight);\r\n\r\n ctx.strokeStyle = COLOR_THEMES[config.activeTheme].primary;\r\n ctx.fillStyle = '#ffffff';\r\n ctx.lineWidth = this.design.lineWidth;\r\n ctx.stroke();\r\n //ctx.fill();\r\n break;\r\n }\r\n case CORE_POINT_LAYOUTS.resize: {\r\n //outside circle\r\n ctx.arc(\r\n pointField.x,\r\n pointField.y,\r\n this.design.radius,\r\n 0,\r\n Math.PI * 2,\r\n false\r\n );\r\n ctx.strokeStyle = COLOR_THEMES[config.activeTheme].primary;\r\n ctx.fillStyle = '#ffffff';\r\n ctx.lineWidth = this.design.lineWidth + 1;\r\n ctx.stroke();\r\n ctx.fill();\r\n\r\n //inside circle\r\n ctx.beginPath();\r\n ctx.arc(\r\n pointField.x,\r\n pointField.y,\r\n this.design.radius - 3,\r\n 0,\r\n Math.PI * 2,\r\n false\r\n );\r\n\r\n ctx.fillStyle = COLOR_THEMES[config.activeTheme].primary;\r\n ctx.lineWidth = this.design.lineWidth + 1;\r\n ctx.fill();\r\n\r\n // arrows\r\n DrawImage.renderImage('resizeArrows', ctx,\r\n pointField.x - this.design.radius / 2 + 1.5,\r\n pointField.y - this.design.radius / 2 + 1.5,\r\n 2.5,\r\n 2.5,\r\n true,\r\n true\r\n );\r\n break;\r\n }\r\n }\r\n\r\n ctx.closePath();\r\n ctx.restore();\r\n };\r\n\r\n isHoveredWithParent() {\r\n const isParentMovableHovered = this.modelCorePoint.parent.mixin\r\n ? this.modelCorePoint.parent.mixin.movable.state.hovering\r\n : false;\r\n const isParentHovered = this.modelCorePoint.parent && this.modelCorePoint.parent.state\r\n ? this.modelCorePoint.parent.state.hovering\r\n : false;\r\n const isParentChildrenHovered = this.modelCorePoint.parent.mixin\r\n ? this.modelCorePoint.parent.mixin.movable.state.hoveringWithChildren\r\n : false;\r\n const isHovered = this.modelCorePoint.mixins.movable\r\n ? this.modelCorePoint.mixins.movable.state.hovering\r\n : false;\r\n\r\n return isParentHovered || isParentMovableHovered || isParentChildrenHovered || isHovered\r\n }\r\n\r\n isMouseDownWithParent() {\r\n const isParentMouseDown = this.modelCorePoint.parent.mixin\r\n ? this.modelCorePoint.parent.mixin.movable.state.mouseDown\r\n : false;\r\n const isParentChildrenMouseDown = this.modelCorePoint.parent.mixin\r\n ? this.modelCorePoint.parent.mixin.movable.state.mouseDownWithChildren\r\n : false;\r\n const isMouseDown = this.modelCorePoint.mixins.movable\r\n ? this.modelCorePoint.mixins.movable.state.mouseDown\r\n : false;\r\n\r\n return isParentMouseDown || isParentChildrenMouseDown || isMouseDown\r\n }\r\n}\r\n","import {\r\n getFontsizeSmall,\r\n getMidPoint,\r\n getPointDistance, getPointField, getPointOnTheLine,\r\n} from \"../../../helpers/sqftHelper\";\r\nimport ShapeHelper from \"../../../helpers/shapeHelper\";\r\n//import COLOR_THEMES from \"../../../../../colorThemes\";\r\nimport COLOR_THEMES from \"../store/colorThemes\";\r\nimport sqftConfig from \"../store/sqftConfig\";\r\n//import workspace from \"../core/workspace\";\r\nimport {\r\n RENDER_TEMPLATES,\r\n SIDEBAR_BUTTONS_MENU,\r\n} from \"../../../constants\";\r\nimport {getDistanceLength, getLineCrownMoldingPoints} from \"./lineHelper\";\r\nimport RenderCabinets from \"./renderCabinets\";\r\nimport RenderFigures from \"./renderFigures\";\r\nimport {COLORS as Colors} from \"../../../../../colorThemes\";\r\nimport store from \"../../../../../store\";\r\nimport config from \"../store/sqftConfig\";\r\nimport workspace from \"../core/workspace\";\r\n\r\nexport default class RenderParts {\r\n static drawMeasurementAroundPoints = (ctx, points, minLength = 3) => {\r\n points.forEach((point, index) => {\r\n const nextPoint = points[index + 1] ? points[index + 1] : points[0];\r\n const midPoint = getMidPoint(point, nextPoint);\r\n const distance = getPointDistance(point, nextPoint);\r\n const scale = workspace.getScale();\r\n if (distance / scale > minLength) {\r\n //const length = addDecimalToLength(measureDistanceToInches(distance / sqftConfig.scale));\r\n const length = getDistanceLength(distance / sqftConfig.scale);\r\n //debugger // eslint-disable-line no-debugger\r\n const lineOrientation = ShapeHelper.getLineOrientation(point, nextPoint);\r\n const mText = ctx.measureText(length);\r\n let fontSize = getFontsizeSmall(),\r\n font = (fontSize).toString() + \"px \" + sqftConfig.activeFontBold,\r\n xMargin = 0,\r\n yMargin = 0,\r\n pos = midPoint\r\n ;\r\n\r\n //todo change index logic\r\n switch (lineOrientation) {\r\n case \"horizontal\": {\r\n yMargin = index === 0\r\n ? -fontSize + sqftConfig.scale / sqftConfig.defaultScale\r\n : +fontSize + sqftConfig.scale / sqftConfig.defaultScale + 10;\r\n break;\r\n }\r\n case \"vertical\": {\r\n xMargin = index === 1 ? mText.width + 5 : -mText.width;\r\n break;\r\n }\r\n // todo rotation\r\n case \"NORTHWEST\": { break;}\r\n case \"NORTHEAST\": { break;}\r\n case \"SOUTHWEST\": { break;}\r\n case \"SOUTHEAST\": { break;}\r\n default:\r\n break;\r\n }\r\n pos.x += xMargin;\r\n pos.y += yMargin;\r\n\r\n ctx.beginPath();\r\n ctx.font = font;\r\n ctx.textAlign = \"center\"; //todo\r\n ctx.fillStyle = COLOR_THEMES[sqftConfig.activeTheme].primary;\r\n ctx.wrapText(length.toString(), pos.x, pos.y, mText.width, font);\r\n ctx.stroke();\r\n ctx.closePath();\r\n }\r\n })\r\n }\r\n\r\n static drawShapeBorders = (ctx, staticOffset, strokeTemplate, fillTemplate, shape) => {\r\n if (sqftConfig.isDevMode()) {\r\n RenderParts.renderDevMode(ctx, shape);\r\n }\r\n let lines = shape.getLines();\r\n const reduxState = store.getState();\r\n const isShowSlabTool = reduxState.sqftSlabState.isShowSlabTool;\r\n\r\n ctx.beginPath();\r\n for (let i = 0; i < lines.length; i++) {\r\n lines[i].staticOffset = staticOffset;\r\n lines[i].render(ctx, i > 0);\r\n lines[i].staticOffset = null;\r\n }\r\n\r\n //set fillStyle and strokeStyle colors\r\n const isShapeHovering = shape.isHoveringOnlyShape();\r\n let shapeColorSet;\r\n\r\n function renderColorSetTemplate(shapeColorSet, isShapeHovering) {\r\n if (isShapeHovering) {// && workspace.getHoverShape() === shape ) {\r\n ctx.strokeStyle = shapeColorSet.primary_border;\r\n ctx.fillStyle = shapeColorSet.primary_hover;\r\n } else {\r\n ctx.strokeStyle = shapeColorSet.primary_border;\r\n ctx.fillStyle = shapeColorSet.primary;\r\n }\r\n }\r\n\r\n function renderFilledPrimaryTemplate(isShapeHovering) {\r\n if (isShapeHovering) {// && workspace.getHoverShape() === shape ) {\r\n ctx.strokeStyle = COLOR_THEMES[sqftConfig.activeTheme].primary_hover;\r\n ctx.fillStyle = COLOR_THEMES[sqftConfig.activeTheme].active_transparent;\r\n } else {\r\n ctx.strokeStyle = COLOR_THEMES[sqftConfig.activeTheme].primary;\r\n ctx.fillStyle = COLOR_THEMES[sqftConfig.activeTheme].primary_transparent;\r\n }\r\n }\r\n\r\n function renderFilledActiveTemplate(isShapeHovering) {\r\n if (isShapeHovering) {// && workspace.getHoverShape() === shape ) {\r\n ctx.strokeStyle = COLOR_THEMES[sqftConfig.activeTheme].active_hover;\r\n ctx.fillStyle = COLOR_THEMES[sqftConfig.activeTheme].primary_transparent;\r\n } else {\r\n ctx.strokeStyle = COLOR_THEMES[sqftConfig.activeTheme].active;\r\n ctx.fillStyle = COLOR_THEMES[sqftConfig.activeTheme].active_transparent;\r\n }\r\n }\r\n\r\n switch (fillTemplate) {\r\n case RENDER_TEMPLATES.accordingToFeature:\r\n shapeColorSet = shape.getColorSet();\r\n if (shapeColorSet) {\r\n renderColorSetTemplate(shapeColorSet, isShapeHovering)\r\n } else {\r\n renderFilledPrimaryTemplate(isShapeHovering)\r\n }\r\n break;\r\n case RENDER_TEMPLATES.filledPrimary:\r\n renderFilledPrimaryTemplate(isShapeHovering)\r\n break;\r\n case RENDER_TEMPLATES.filledActive:\r\n renderFilledActiveTemplate(isShapeHovering)\r\n break;\r\n }\r\n\r\n //set hover style colors\r\n if (isShapeHovering) {\r\n const reduxState = store.getState();\r\n const activeButton = reduxState.sqftMenuState.activeButton;\r\n if (activeButton === SIDEBAR_BUTTONS_MENU.delete\r\n && !isShowSlabTool\r\n ) {\r\n ctx.fillStyle = Colors.red\r\n }\r\n }\r\n\r\n //set lineWidth\r\n switch (strokeTemplate) {\r\n case RENDER_TEMPLATES.linesOnly:\r\n ctx.lineWidth = 0;\r\n ctx.closePath();\r\n break;\r\n case RENDER_TEMPLATES.default:\r\n default:\r\n ctx.fill();\r\n ctx.lineWidth = 2; // Math.ceil(scale);\r\n ctx.closePath();\r\n ctx.stroke();\r\n break;\r\n }\r\n }\r\n\r\n static getBoundingBoxFromShape = (shape) => {\r\n let minX = Infinity;\r\n let minY = Infinity;\r\n let maxX = -Infinity;\r\n let maxY = -Infinity;\r\n\r\n const lines = shape.getLines();\r\n for (let line of lines) {\r\n const renderTo = line.calculateRenderPosition(line.to);\r\n const renderFrom = line.calculateRenderPosition(line.from);\r\n\r\n minX = Math.min(minX, renderFrom.x, renderTo.x);\r\n minY = Math.min(minY, renderFrom.y, renderTo.y);\r\n maxX = Math.max(maxX, renderFrom.x, renderTo.x);\r\n maxY = Math.max(maxY, renderFrom.y, renderTo.y);\r\n }\r\n\r\n return {\r\n x: minX,\r\n y: minY,\r\n width: maxX - minX,\r\n height: maxY - minY\r\n };\r\n };\r\n\r\n /**\r\n * Функция для рисования прямоугольника с полосами под углом.\r\n *\r\n * @param ctx\r\n * @param {Number} x - координата x верхнего левого угла прямоугольника\r\n * @param {Number} y - координата y верхнего левого угла прямоугольника\r\n * @param {Number} width - ширина прямоугольника\r\n * @param {Number} height - высота прямоугольника\r\n * @param {Number} lineWidth - ширина полосы\r\n * @param {Number} angle - угол наклона полос в градусах\r\n * @param {String} color1 - первый цвет\r\n * @param {String} color2 - второй цвет\r\n */\r\n static drawStripedRectangle = (ctx,\r\n x,\r\n y,\r\n width,\r\n height,\r\n lineWidth= 3 * 3.5,\r\n angle= 3 * 1000,\r\n color1 = \"white\",\r\n color2= \"#E6E4E6\") => {\r\n //const scale = sqftConfig.scale;\r\n //const lineWidth = 2 * scale;\r\n //const lineGap = 5 * scale;\r\n const lineGap = 6 * 3.5;\r\n\r\n ctx.save();\r\n\r\n // Define clipping area (visible rectangle)\r\n ctx.beginPath();\r\n ctx.rect(x, y, width, height);\r\n ctx.fillStyle = color1;\r\n ctx.fill();\r\n ctx.clip();\r\n\r\n // Draw diagonal lines across the entire canvas\r\n ctx.beginPath();\r\n ctx.lineWidth = lineWidth;\r\n ctx.strokeStyle = color2;\r\n\r\n // The pattern should cover the entire canvas\r\n for (let i = -ctx.canvas.width * 2; i < ctx.canvas.width; i += lineGap) {\r\n ctx.moveTo(i, -ctx.canvas.height);\r\n ctx.lineTo(i + lineGap + angle, ctx.canvas.height * 2);\r\n }\r\n ctx.stroke();\r\n ctx.restore();\r\n }\r\n\r\n /**\r\n *\r\n * @param ctx\r\n * @param {Number} x - координата x верхнего левого угла прямоугольника\r\n * @param {Number} y - координата y верхнего левого угла прямоугольника\r\n * @param {Number} width - ширина прямоугольника\r\n * @param {Number} height - высота прямоугольника\r\n */\r\n static fillStripedRectangle = (ctx, x, y, width, height) => {\r\n let gradient = ctx.createLinearGradient(x, y, width, height);\r\n gradient.addColorStop(0.25, '#868d91');\r\n gradient.addColorStop(0.25, '#7b8185');\r\n gradient.addColorStop(0.5, '#7b8185');\r\n gradient.addColorStop(0.5, '#868d91');\r\n gradient.addColorStop(0.75, '#868d91');\r\n gradient.addColorStop(0.75, '#7b8185');\r\n gradient.addColorStop(1, '#7b8185');\r\n\r\n // Заливка шейпа градиентом\r\n ctx.fillStyle = gradient;\r\n ctx.fill();\r\n }\r\n\r\n static drawDiagonalStripesV2 = (ctx, shape, lineWidth = 2, rotationAngle = -Math.PI / 4) => {\r\n const bbox = RenderParts.getBoundingBoxFromShape(shape);\r\n void rotationAngle;\r\n void lineWidth;\r\n\r\n ctx.save();\r\n let lines = shape.getLines();\r\n\r\n //draw border\r\n ctx.beginPath();\r\n ctx.rect(bbox.x, bbox.y, bbox.width, bbox.height);\r\n ctx.lineWidth = 2;\r\n ctx.stroke();\r\n\r\n for (let i = 0; i < lines.length; i++) {\r\n //lines[i].render(ctx, i > 0);\r\n }\r\n const pointPos = lines[1].calculateRenderPosition(lines[1].to);\r\n\r\n RenderParts.fillStripedRectangle(ctx, bbox.x, bbox.y, pointPos.x, pointPos.y);\r\n ctx.closePath();\r\n\r\n ctx.restore();\r\n };\r\n\r\n static drawDiagonalStripes = (ctx, shape, lineWidth = 2, rotationAngle = -Math.PI / 4) => {\r\n const bbox = RenderParts.getBoundingBoxFromShape(shape);\r\n // const lightGray = '#80848a';\r\n // const darkGray = '#787c82';\r\n const lightGray = '#5a5c61';\r\n const darkGray = '#54575b';\r\n void rotationAngle;\r\n\r\n // ctx.save();\r\n // let lines = shape.getLines();\r\n // // ctx.beginPath();\r\n // // ctx.rect(bbox.x, bbox.y, bbox.width, bbox.height);\r\n // ctx.beginPath();\r\n // for (let i = 0; i < lines.length; i++) {\r\n // lines[i].render(ctx, i > 0);\r\n // }\r\n // ctx.closePath();\r\n // ctx.clip();\r\n //\r\n // ctx.lineWidth = 2;\r\n // ctx.stroke();\r\n //\r\n // for (let i = 0; i < lines.length; i++) {\r\n // lines[i].render(ctx, i > 0);\r\n // }\r\n // ctx.closePath();\r\n // ctx.clip();\r\n\r\n const scale = config.scale;\r\n const scaledLineWidth = lineWidth * scale;\r\n\r\n RenderParts.drawStripedRectangle(\r\n ctx,\r\n bbox.x,\r\n bbox.y,\r\n bbox.width,\r\n bbox.height,\r\n scaledLineWidth,\r\n 3 * 1000,\r\n lightGray,\r\n darkGray\r\n );\r\n\r\n ctx.restore();\r\n };\r\n\r\n\r\n static drawHoveredBorders = (ctx,\r\n staticOffset,\r\n shape,\r\n style = {\r\n lineWidth: 3,\r\n strokeStyle: COLOR_THEMES[sqftConfig.activeTheme].primary_hover,\r\n shadowBlur: 4,\r\n extendHoveredLine: 0\r\n }\r\n ) => {\r\n let lines = shape.getLines();\r\n\r\n for (let i = 0; i < lines.length; i++) {\r\n if (lines[i].getState().isHovering) {\r\n ctx.save();\r\n ctx.beginPath();\r\n lines[i].staticOffset = staticOffset;\r\n ctx.lineWidth = style.lineWidth;\r\n ctx.shadowColor = ctx.strokeStyle = style.strokeStyle;\r\n ctx.shadowBlur = style.shadowBlur;\r\n\r\n let pointTo = {...lines[i].to};\r\n let pointFrom = {...lines[i].from};\r\n if (style.extendHoveredLine > 0) {\r\n pointFrom = {pos: getPointOnTheLine(lines[i].from, lines[i].to, 5)};\r\n pointTo = {pos: getPointOnTheLine(lines[i].to, lines[i].from, 5)};\r\n }\r\n const renderTo = lines[i].calculateRenderPosition(pointTo);\r\n const renderFrom = lines[i].calculateRenderPosition(pointFrom);\r\n\r\n ctx.moveTo(renderTo.x, renderTo.y);\r\n ctx.lineTo(renderFrom.x, renderFrom.y);\r\n lines[i].staticOffset = null;\r\n\r\n ctx.stroke();\r\n ctx.closePath();\r\n ctx.restore();\r\n }\r\n }\r\n }\r\n\r\n static drawSpacerBorders = (ctx, staticOffset, shape) => {\r\n let lines = shape.getLines();\r\n ctx.save();\r\n ctx.beginPath();\r\n ctx.lineWidth = 2;\r\n ctx.fillStyle = COLOR_THEMES[sqftConfig.activeTheme].primary_transparent8;\r\n for (let i = 0; i < lines.length; i++) {\r\n lines[i].staticOffset = staticOffset;\r\n if (i === 0) {\r\n const renderFrom = lines[i].calculateRenderPosition(lines[i].from);\r\n ctx.moveTo(renderFrom.x, renderFrom.y);\r\n }\r\n const renderTo = lines[i].calculateRenderPosition(lines[i].to);\r\n ctx.lineTo(renderTo.x, renderTo.y);\r\n\r\n lines[i].staticOffset = null;\r\n }\r\n\r\n //set hover style colors\r\n if (shape.isHovering()) {\r\n const reduxState = store.getState();\r\n const activeButton = reduxState.sqftMenuState.activeButton;\r\n if (activeButton === SIDEBAR_BUTTONS_MENU.delete) {\r\n ctx.fillStyle = Colors.red\r\n }\r\n }\r\n\r\n ctx.closePath();\r\n ctx.stroke();\r\n ctx.fill();\r\n ctx.restore();\r\n }\r\n\r\n static drawShapeCrownMoldings = (ctx, staticOffset, shape) => {\r\n let lines = shape.getLines();\r\n //ctx.beginPath();\r\n for (let i = 0; i < lines.length; i++) {\r\n lines[i].staticOffset = staticOffset;\r\n if (lines[i].getState().attachedItems.isWithCrownMolding) {\r\n const crownMoldingPoints = getLineCrownMoldingPoints(lines[i]);\r\n ctx.save();\r\n if (lines[i].isHovering()) {\r\n const reduxState = store.getState();\r\n const activeButton = reduxState.sqftMenuState.activeButton;\r\n if (activeButton === SIDEBAR_BUTTONS_MENU.delete) {\r\n ctx.strokeStyle = Colors.red\r\n }\r\n }\r\n RenderCabinets.renderCrownMolding(ctx, crownMoldingPoints);\r\n ctx.restore();\r\n }\r\n lines[i].staticOffset = null;\r\n }\r\n }\r\n\r\n static drawShapeEndCap = (ctx, staticOffset, shape) => {\r\n let lines = shape.getLines();\r\n //ctx.beginPath();\r\n for (let i = 0; i < lines.length; i++) {\r\n lines[i].staticOffset = staticOffset;\r\n const lineState = lines[i].getState();\r\n if (lineState.attachedItems && lineState.attachedItems.isWithEndCap) {\r\n ctx.save();\r\n if (lines[i].isHovering()) {\r\n const reduxState = store.getState();\r\n const activeButton = reduxState.sqftMenuState.activeButton;\r\n if (activeButton === SIDEBAR_BUTTONS_MENU.delete) {\r\n ctx.strokeStyle = Colors.red\r\n }\r\n }\r\n RenderCabinets.renderEndCap(ctx, lines[i]);\r\n ctx.restore();\r\n }\r\n lines[i].staticOffset = null;\r\n }\r\n }\r\n\r\n static drawHandles = (ctx, shape) => {\r\n let lines = shape.getLines();\r\n for (let i = 0; i < lines.length; i++) {\r\n if (lines[i].isWithHandle()) {\r\n const midPoint = getMidPoint(lines[i].from, lines[i].to);\r\n const renderPosition = getPointField(midPoint.x, midPoint.y, shape);\r\n RenderFigures.renderHandle(ctx, renderPosition);\r\n }\r\n }\r\n }\r\n\r\n static renderDevMode = (ctx, shape) => {\r\n // render __intersectionPoints\r\n const intersectionPoints = shape.shapeAbsolute.getIntersectionPoints()\r\n if (intersectionPoints) {\r\n for (let i in intersectionPoints) {\r\n intersectionPoints[i].forEach(intPoint => {\r\n ctx.beginPath();\r\n ctx.arc(intPoint.x, intPoint.y, 20, 0, 2 * Math.PI);\r\n ctx.stroke();\r\n ctx.closePath();\r\n })\r\n }\r\n }\r\n // render slabPos\r\n ctx.beginPath();\r\n let pf = getPointField(shape.slabPos.x, shape.slabPos.y);\r\n ctx.arc(pf.x, pf.y, 10, 0, 2 * Math.PI);\r\n ctx.stroke();\r\n ctx.closePath();\r\n\r\n // render absolutePos\r\n const absolutePos = shape.shapeAbsolute.getAbsolutePosition();\r\n if (absolutePos) {\r\n ctx.beginPath();\r\n ctx.strokeStyle = '#a02f2f';\r\n pf = getPointField(absolutePos.x, absolutePos.y)\r\n ctx.arc(pf.x, pf.y, 5, 0, 2 * Math.PI);\r\n ctx.stroke();\r\n ctx.closePath();\r\n }\r\n }\r\n}\r\n","import store from \"../../../../../store\";\r\nimport workspace from \"../core/workspace\";\r\nimport {setSqftCroppedSlabImages} from \"../../../../../actions/sqftSlabFunctions\";\r\nimport sqftEventManager from \"./sqftEventManager\";\r\nimport MovableImage from \"../core/shapes/movableImage\";\r\nimport {APPLIANCES_THAT_SHOULD_RENDER_MEASUREMENTS_INSIDE_THE_SHAPE, SHAPE_TYPE} from \"../../../constants\";\r\n\r\nconst sqftImageManager = {\r\n getAppliances: function() {\r\n const shapes = workspace.getShapes();\r\n return shapes.filter(shp => shp.type === SHAPE_TYPE.appliances);\r\n },\r\n getSlabImages: function() {\r\n const state = store.getState();\r\n return state.sqftSlabState.croppedSlabImages;\r\n },\r\n getAppliancesThatShouldRenderMeasurementsInsideTheShape: function() {\r\n const shapes = workspace.getShapes();\r\n return shapes.filter(shp => shp.type === SHAPE_TYPE.appliances\r\n && APPLIANCES_THAT_SHOULD_RENDER_MEASUREMENTS_INSIDE_THE_SHAPE.includes(shp.subType));\r\n },\r\n hideSlabImages: function() {\r\n let movableImages = store.getState().sqftSlabState.croppedSlabImages;\r\n for (let i = movableImages.length - 1; i >= 0; i--) {\r\n movableImages[i].deregisterEvents();\r\n }\r\n },\r\n restoreSlabImages: function() {\r\n let movableImages = store.getState().sqftSlabState.croppedSlabImages;\r\n for (let i = movableImages.length - 1; i >= 0; i--) {\r\n movableImages[i].reInitEvents();\r\n }\r\n },\r\n getExportedSlabImages: function () {\r\n let slabState = store.getState().sqftSlabState;\r\n let croppedImages = slabState.croppedSlabImages;\r\n let exportData = [];\r\n for(let croppedImage of croppedImages) {\r\n exportData.push(croppedImage.export());\r\n }\r\n\r\n return exportData;\r\n },\r\n\r\n removeAllSlabImages: function () {\r\n const state = store.getState();\r\n let slabImages = state.sqftSlabState.croppedSlabImages;\r\n if (slabImages.length > 0) {\r\n store.dispatch(setSqftCroppedSlabImages([]));\r\n }\r\n },\r\n\r\n /**\r\n * @param {[]} data\r\n */\r\n importSlabImages: function (data) {\r\n if (data.length === 0) {\r\n sqftImageManager.removeAllSlabImages();\r\n return\r\n }\r\n let workspaceImages = [];\r\n for(let movableImageData of data) {\r\n let image = new Image();\r\n image.src = movableImageData.image.src;\r\n\r\n let workspaceImage = workspace.addImage(\r\n image,\r\n movableImageData.size.width,\r\n movableImageData.size.height,\r\n null,\r\n null,\r\n \"slabImage\",\r\n null,\r\n function () {},\r\n movableImageData.pos,\r\n null,\r\n movableImageData.id,\r\n sqftEventManager.priorities.SLAB_IMAGE,\r\n movableImageData.featureId,\r\n true\r\n );\r\n\r\n workspaceImage.importData({isDisabledInPopup: movableImageData.isDisabledInPopup});\r\n workspaceImages.push(workspaceImage)\r\n }\r\n\r\n store.dispatch(setSqftCroppedSlabImages(workspaceImages));\r\n },\r\n hideImages: function() {\r\n const shapes = workspace.getShapes();\r\n for (let shape of shapes) {\r\n if (shape instanceof MovableImage && shape.type !== 'slabImage') {\r\n shape.deregisterEvents();\r\n }\r\n }\r\n },\r\n restoreImages: function() {\r\n const shapes = workspace.getShapes();\r\n for (let shape of shapes) {\r\n if (shape instanceof MovableImage && shape.type !== 'slabImage') {\r\n shape.reInitEvents();\r\n }\r\n }\r\n },\r\n hideTextBoxes: function() {\r\n const textBoxes = workspace.textBoxManager.getTextBoxes();\r\n for (let textBox of textBoxes) {\r\n textBox.deregisterEvents();\r\n }\r\n },\r\n restoreTextBoxes: function() {\r\n const textBoxes = workspace.textBoxManager.getTextBoxes();\r\n for (let textBox of textBoxes) {\r\n textBox.reInitEvents();\r\n }\r\n },\r\n getMinMaxShapePoints: function(movableImage) {\r\n let size = movableImage.getSize();\r\n return {\r\n minX : 0,\r\n maxX : size.width,\r\n minY : 0,\r\n maxY : size.height\r\n }\r\n },\r\n};\r\n\r\nexport default sqftImageManager\r\n","import sqftConfig from \"./sqftConfig\";\r\nimport sqftImageManager from \"./sqftImageManager\";\r\nimport sqftShapeManager from \"./sqftShapeManager\";\r\nimport workspace from \"../core/workspace\";\r\nimport slabWorkspace from \"../core/slab/slabWorkspace\";\r\nimport store from \"../../../../../store\";\r\nimport {setIsRoomSwitcherVisible} from \"../../../../../actions/sqftMenuFunctions\";\r\nimport sqftSlabManager from \"./sqftSlabManager\";\r\nimport sqftShapeIntersectionsManager from \"./sqftShapeIntersectionsManager\";\r\nimport workspaceControllers from \"./workspaceControllers\";\r\n\r\nexport const enableRegularMode = () => {\r\n store.dispatch(setIsRoomSwitcherVisible(true));\r\n //sqftConfig.workspace.snapToGrid = true;\r\n slabWorkspace.disableSlabImages();\r\n slabWorkspace.deregisterEvents();\r\n sqftImageManager.hideSlabImages();\r\n sqftShapeManager.hideSeamShapes();\r\n sqftShapeManager.hideSlabShapes();\r\n\r\n sqftSlabManager.deleteShapeOffset();\r\n\r\n sqftImageManager.restoreTextBoxes();\r\n sqftImageManager.restoreImages();\r\n sqftShapeManager.restoreCorePieceShapes();\r\n sqftShapeManager.restoreShapeParts();\r\n\r\n slabWorkspace.slabAdditionalShapes.hideAdditionalShapes(); //this should go last\r\n};\r\n\r\nexport const enableSlabMode = (shouldUpdatePlaceholderFeatureIds = false) => {\r\n store.dispatch(setIsRoomSwitcherVisible(false));\r\n sqftConfig.workspace.snapToGrid = false;\r\n sqftImageManager.restoreSlabImages();\r\n sqftShapeManager.checkForUpdateSlabPoints();\r\n sqftShapeManager.checkForUpdateSlabPosition();\r\n sqftShapeManager.restoreSeamShapes();\r\n sqftShapeManager.restoreSlabShapes();\r\n\r\n sqftSlabManager.reInitShapeOffset();\r\n\r\n slabWorkspace.slabAdditionalShapes.initWaterfallToolShapes(); // 1\r\n slabWorkspace.slabAdditionalShapes.initBacksplashAndEdgeShapes();\r\n slabWorkspace.slabAdditionalShapes.initMiteredToolShapes(); // 2\r\n slabWorkspace.slabAdditionalShapes.initUnderlaymentToolShapes(); // 2\r\n slabWorkspace.slabAdditionalShapes.initBumpoutShapes();\r\n slabWorkspace.slabAdditionalShapes.restoreBacksplashShapes();\r\n slabWorkspace.initLeftPart();\r\n\r\n sqftImageManager.hideImages();\r\n sqftImageManager.hideTextBoxes();\r\n sqftShapeManager.hideShapeParts();\r\n sqftShapeManager.hideCorePieceShapes();\r\n\r\n if (shouldUpdatePlaceholderFeatureIds) {\r\n window.setTimeout(() => { // first we need to enable slab mode to get slab mode coordinates for the shape\r\n sqftShapeIntersectionsManager.updateShapesIntersections();\r\n sqftShapeIntersectionsManager.updateSlabPlaceholderFeatureId();\r\n workspaceControllers.snappedShapeGroups.updateShapesSnappedGroups(false);\r\n }, 0)\r\n }\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n};\r\n\r\nexport const createSlabModeWaterfallShapes = () => {\r\n slabWorkspace.slabAdditionalShapes.initWaterfallToolShapes(); // 1\r\n slabWorkspace.slabAdditionalShapes.initMiteredToolShapes(); // 2\r\n slabWorkspace.slabAdditionalShapes.hideAdditionalShapes(); //this should go last\r\n}\r\n\r\nexport const clearRotateAngles = () => {\r\n sqftConfig.highlight.rotateAngle = false;\r\n const angleTooltip = document.getElementById(\"angle-tooltip\");\r\n if (angleTooltip) {\r\n angleTooltip.style.display = \"none\";\r\n }\r\n\r\n workspace.getShapes().forEach((shape) => {\r\n if (Array.isArray(shape.rotateAngleParts) && shape.rotateAngleParts.length) {\r\n shape.deActivateRotateAngle();\r\n }\r\n });\r\n}\r\n\r\nexport const getDimensionsDependingOnShapePositions = (workspace) => {\r\n const {minX, maxX, minY, maxY} = sqftShapeManager.getMinMaxWorkspacePoints(workspace, true);\r\n let maxCordX = Math.abs(minX) > Math.abs(maxX) ? Math.abs(minX) : Math.abs(maxX);\r\n let maxCordY = Math.abs(minY) > Math.abs(maxY) ? Math.abs(minY) : Math.abs(maxY);\r\n\r\n let imageWidth = maxCordX / sqftConfig.scale * Math.pow(sqftConfig.defaultScale, 2) + 500 / sqftConfig.scale * sqftConfig.defaultScale;\r\n let imageHeight = maxCordY / sqftConfig.scale * Math.pow(sqftConfig.defaultScale, 2) + 500 / sqftConfig.scale * sqftConfig.defaultScale;\r\n\r\n //todo re-wright this\r\n if (window.innerWidth < 1024) {\r\n imageWidth *= 3.75\r\n imageHeight *= 3.75\r\n }\r\n\r\n return [imageWidth, imageHeight]\r\n}\r\n\r\nexport const getFontSizeFromContext = (ctx) => {\r\n const fontSizeMatch = ctx.font.match(/\\d+/);\r\n return fontSizeMatch ? Number(fontSizeMatch[0]) : null;\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport {getFeatureIsLocked} from \"../../../../../misc/helpers\";\r\n// import store from \"../../../../../store\";\r\n// import {setLookOverlayOpened} from \"../../../../../actions/lookFunctions\";\r\n// import {LOOK_OVERLAYS} from \"../../constants\";\r\n// import {Shower} from \"../../parts/shower\";\r\n\r\nexport default class TubCommon extends IntermediatePart {\r\n\r\n constructor(isChild) {\r\n super(isChild);\r\n }\r\n\r\n disabledClick() {}\r\n\r\n applyFeatureIfNotCompatible() {\r\n const showerTubComboParent = this.getParent().getParent();\r\n showerTubComboParent.setShowerTubCombo();\r\n showerTubComboParent.setActiveTub(this.bottomTubId);\r\n }\r\n\r\n handleClick(ignoreLocked) {\r\n super.handleClick(ignoreLocked);\r\n\r\n if (this.notAvailableInVisualizer || getFeatureIsLocked(this)) {\r\n return\r\n }\r\n\r\n // const showerTubComboParent = this.getParent().getParent();\r\n // const currentBottomTub = showerTubComboParent.bottomTub;\r\n //\r\n // const showNotCompatibleViewConditions = !window.location.hash.includes(\"visualizer\") &&\r\n // (!showerTubComboParent.showerTubComboIsActive || (\r\n // (this.partId === \"walk_in_tub\" && currentBottomTub !== \"walk_in_tub\") || (this.partId !== \"walk_in_tub\" && currentBottomTub === \"walk_in_tub\")\r\n // ));\r\n //\r\n // if (showNotCompatibleViewConditions) {\r\n // store.dispatch(setLookOverlayOpened(LOOK_OVERLAYS.notCompatiblePopup));\r\n // return;\r\n // }\r\n\r\n this.applyFeatureIfNotCompatible();\r\n this.featureClicked();\r\n }\r\n\r\n getArrayOfConditions() {\r\n let conditions = super.getArrayOfConditions(); //roomLayout\r\n // const layout = this.getParent().layout;\r\n // const showerParent = layout.parts[Shower.id];\r\n // const showerSize = showerParent.showerSize();\r\n // if (showerParent && showerSize) {\r\n // conditions.push({\r\n // propName: \"ShowerSize\",\r\n // propValue: showerSize\r\n // });\r\n // }\r\n return conditions\r\n }\r\n\r\n hideLayerCondition() {\r\n const showerTubComboParent = this.getParent();\r\n return !showerTubComboParent.showerTubComboIsActive || showerTubComboParent.bottomTub !== this.bottomTubId\r\n }\r\n\r\n canDisplayDemoPoint() {\r\n return !this.hideLayerCondition()\r\n }\r\n\r\n}\r\n","import QRCode from 'qrcode';\r\nimport store from \"../../../store\";\r\nimport {CabinetsSet} from \"./sqftCabinetsDataMapper\";\r\nimport SqftJsonApi from \"../api/sqftJsonApi\";\r\nimport {setAPIErrorMessage, setSqftCabinetsGlb} from \"../../../actions/sqftFunctions\";\r\nimport {setAbortController} from \"../../../actions/sqftMenuFunctions\";\r\nimport {groupUrlsByVersion, similarityByWords} from \"./dataHelper\";\r\nimport {getCurrentLayout} from \"../../appLayout\";\r\nimport sqftConfig from \"../components/canvas/store/sqftConfig\";\r\nimport {SQFT_AR3D_GLB_VIEWER} from \"../constants\";\r\n\r\nexport const generateQRCode = async (url) => {\r\n // Generate the QR code data as a string\r\n const qrData = await QRCode.toDataURL(url);\r\n\r\n // Create a canvas element to draw the QR code image on\r\n const canvas = document.createElement(\"canvas\");//createCanvas(300, 300);\r\n canvas.width = 300;\r\n canvas.height = 300;\r\n const ctx = canvas.getContext('2d');\r\n\r\n // Load the QR code image data into an Image object\r\n const img = new Image();\r\n img.src = qrData;\r\n\r\n // Draw the QR code image onto the canvas\r\n ctx.drawImage(img, 0, 0, canvas.width, canvas.height);\r\n\r\n // Return the canvas as an image data URL\r\n return canvas.toDataURL();\r\n}\r\n\r\nexport const getThirdPartyAR3DMetaData = (dbFeature, thirdPartyAR3DUrl) => {\r\n if (dbFeature && dbFeature.thirdPartyAR3DMetaData && thirdPartyAR3DUrl) {\r\n const metadataString = dbFeature.thirdPartyAR3DMetaData[thirdPartyAR3DUrl];\r\n\r\n // Check if the metadata string is present\r\n if (metadataString) {\r\n try {\r\n // Parse the metadata string as JSON\r\n return JSON.parse(metadataString);\r\n } catch (error) {\r\n // Handle JSON parsing error\r\n console.log(\"JSON parsing error:\", error.message);\r\n console.log(\"JSON metadataString\", metadataString);\r\n console.log(\"dbFeature\", dbFeature.sharedFeatureName);\r\n return null;\r\n }\r\n } else {\r\n console.log(\"dbFeature missing metadata\", dbFeature.id);\r\n }\r\n }\r\n\r\n return null\r\n}\r\n\r\nexport const getDepthFromAR3DMetaData = (thirdPartyAR3DMetaData) => {\r\n if (thirdPartyAR3DMetaData && Array.isArray(thirdPartyAR3DMetaData.Depth) && thirdPartyAR3DMetaData.Depth.length) {\r\n return parseFloat(thirdPartyAR3DMetaData.Depth[0]);\r\n }\r\n return null;\r\n};\r\n\r\nexport const getWidthFromAR3DMetaData = (thirdPartyAR3DMetaData) => {\r\n if (thirdPartyAR3DMetaData && Array.isArray(thirdPartyAR3DMetaData.Width) && thirdPartyAR3DMetaData.Width.length) {\r\n return parseFloat(thirdPartyAR3DMetaData.Width[0]);\r\n }\r\n return null;\r\n};\r\n\r\nexport const getHeightFromAR3DMetaData = (thirdPartyAR3DMetaData) => {\r\n if (thirdPartyAR3DMetaData && Array.isArray(thirdPartyAR3DMetaData.Height) && thirdPartyAR3DMetaData.Height.length) {\r\n return parseFloat(thirdPartyAR3DMetaData.Height[0]);\r\n }\r\n return null;\r\n};\r\n\r\nexport const getSpecialShape = (thirdPartyAR3DMetaData) => {\r\n if (thirdPartyAR3DMetaData && Array.isArray(thirdPartyAR3DMetaData.SpecialShape) && thirdPartyAR3DMetaData.SpecialShape.length) {\r\n return thirdPartyAR3DMetaData.SpecialShape[0];\r\n }\r\n return null;\r\n};\r\n\r\nexport const getCategoryFromMetadata = (thirdPartyAR3DMetaData) => {\r\n if (thirdPartyAR3DMetaData && Array.isArray(thirdPartyAR3DMetaData.Category) && thirdPartyAR3DMetaData.Category.length) {\r\n return thirdPartyAR3DMetaData.Category[0];\r\n }\r\n return null;\r\n};\r\n\r\nexport const getDepthFromDescription = (dbFeature) => {\r\n if (dbFeature.description) {\r\n const extractDimension = (dim) => parseInt(dbFeature.description.substr(dbFeature.description.indexOf(dim) + dim.length + 1, 3), 10);\r\n return extractDimension('Depth');\r\n }\r\n return null;\r\n};\r\n\r\nexport const getWidthFromDescription = (dbFeature) => {\r\n if (dbFeature.description) {\r\n const extractDimension = (dim) => parseInt(dbFeature.description.substr(dbFeature.description.indexOf(dim) + dim.length + 1, 3), 10);\r\n return extractDimension('Width');\r\n }\r\n return null;\r\n};\r\n\r\nexport const getHeightFromDescription = (dbFeature) => {\r\n if (dbFeature.description) {\r\n const extractDimension = (dim) => parseInt(dbFeature.description.substr(dbFeature.description.indexOf(dim) + dim.length + 1, 3), 10);\r\n return extractDimension('Height');\r\n }\r\n return null;\r\n};\r\n\r\nexport const getWidthFromDbFeature = (dbFeature, thirdPartyAR3DMetaData) => {\r\n let width = getWidthFromAR3DMetaData(thirdPartyAR3DMetaData);\r\n if (!width) {\r\n width = getWidthFromDescription(dbFeature);\r\n }\r\n return width\r\n};\r\n\r\nexport const getDepthFromDbFeature = (dbFeature, thirdPartyAR3DMetaData) => {\r\n let depth = getDepthFromAR3DMetaData(thirdPartyAR3DMetaData);\r\n if (!depth) {\r\n depth = getDepthFromDescription(dbFeature);\r\n }\r\n return depth\r\n};\r\n\r\nexport const getHeightFromDbFeature = (dbFeature, thirdPartyAR3DMetaData) => {\r\n let height = getHeightFromAR3DMetaData(thirdPartyAR3DMetaData);\r\n if (!height) {\r\n height = getHeightFromDescription(dbFeature);\r\n }\r\n return height\r\n};\r\n\r\nexport const findGLBLink = (links) => {\r\n const glbLink = links.find(link => link.endsWith('.glb'));\r\n return glbLink || null;\r\n};\r\n\r\n// Function to normalize strings for comparison\r\nexport const normalizeString = (str) => {\r\n return str.toLowerCase().replace(/[\\W_]+/g, ''); // Remove non-alphanumeric characters and convert to lowercase\r\n}\r\n\r\n// Function to split and normalize feature name or URL part for comparison\r\nexport const splitAndNormalize = (str) => {\r\n // Split by spaces and dashes, then normalize each part\r\n return str.split(/[\\s\\-]+/).map(normalizeString);\r\n}\r\n\r\n// Function to split and normalize feature name or URL part for comparison\r\nexport const getUrlByName = (nameSearch, thirdPartyAR3DUrls) => {\r\n const featureNameParts = splitAndNormalize(nameSearch);\r\n\r\n // 1.urlBySharedFeatureName - Enhanced Matching\r\n return thirdPartyAR3DUrls.find(url => {\r\n const urlParts = splitAndNormalize(url.toLowerCase().split('/').pop().split('.')[0]);\r\n return featureNameParts.every(part => urlParts.includes(part));\r\n });\r\n}\r\n\r\n// Function to get 3D URLs for a feature\r\nexport const get3dURLsForFeature = (feature) => {\r\n // Check if feature, feature.getFeatureName, and feature.dbFeature are defined\r\n if (!feature || !feature.getFeatureName || typeof feature.getFeatureName !== 'function' || !feature.dbFeature) {\r\n console.log('Invalid feature or feature properties');\r\n return null;\r\n }\r\n\r\n const featureNameParts = splitAndNormalize(feature.getFeatureName());\r\n\r\n // Check if thirdPartyAR3DUrls is defined and is an array\r\n if (!Array.isArray(feature.dbFeature.thirdPartyAR3DUrls)) {\r\n console.log('thirdPartyAR3DUrls is not defined or not an array. Id:', feature.dbFeature.id);\r\n return null;\r\n }\r\n\r\n const thirdPartyAR3DUrls = feature.dbFeature.thirdPartyAR3DUrls.filter(url => url.endsWith('.glb'));\r\n\r\n // Enhanced Matching\r\n const urlByFeatureName = thirdPartyAR3DUrls.find(url => {\r\n const urlParts = splitAndNormalize(url.toLowerCase().split('/').pop().split('.')[0]);\r\n // Check if all parts of the feature name are present in the URL segment\r\n return featureNameParts.every(part => urlParts.includes(part));\r\n });\r\n\r\n console.log(\"urlByFeatureName\", urlByFeatureName);\r\n if (urlByFeatureName) {\r\n return urlByFeatureName;\r\n }\r\n\r\n return null;\r\n};\r\n\r\n// Function to check if a URL contains \"-HE\" right before the file extension\r\nexport const containsHEBeforeExtension = (url) => {\r\n // Regular expression to match \"-HE\" right before the file extension\r\n const pattern = /-HE\\.[^/.]+$/;\r\n return pattern.test(url);\r\n}\r\n\r\n// Function to check if a URL contains \"-HE\" right before the file extension\r\nexport const startsFromH = (str) => {\r\n return str.charAt(0) === 'H';\r\n}\r\n\r\n// Function to check if a URL contains \"-HE\" right before the file extension\r\nexport const isHoodShape = (shape) => {\r\n const layout = getCurrentLayout();\r\n const relatedParentFeature = layout.getFeatureById(shape.relatedParentFeatureId, true);\r\n if (relatedParentFeature) {\r\n let shapeDbFeature = relatedParentFeature.dbFeature.relatedFeatures.find(relatedFeature => relatedFeature.id === shape.featureId);\r\n if (!shapeDbFeature) {\r\n const shapeFeature = layout.getFeatureById(shape.featureId, true);\r\n if (shapeFeature) {\r\n shapeDbFeature = shapeFeature.dbFeature\r\n }\r\n }\r\n const url = getUrlMatchingByColor(shapeDbFeature, relatedParentFeature).replace(/\\s+\\.glb$/, '.glb');\r\n\r\n const metaData = getThirdPartyAR3DMetaData(shapeDbFeature, url);\r\n const category = getCategoryFromMetadata(metaData);\r\n const shapeHeight = shape.shapeCabinet ? shape.shapeCabinet.getShapeHeight() : shape.getHeight();\r\n\r\n return category === \"Hood\" || containsHEBeforeExtension(url) || shapeHeight <= 18;\r\n }\r\n}\r\n\r\nexport const setCabinetGLBFromCabinetsSet = async(displayDoorsOnly = false) => {\r\n const cabinetsData = CabinetsSet.prepareCabinetsSet(displayDoorsOnly);\r\n console.log(\"prepared cabinetsData\", cabinetsData);\r\n\r\n if (sqftConfig.threeD.glbViewer === SQFT_AR3D_GLB_VIEWER.singleModel) {\r\n await setUrlToCabinetGLB(cabinetsData);\r\n } else {\r\n await setCabinetsSetToCabinetGLB(cabinetsData);\r\n }\r\n}\r\n\r\nexport const setCabinetsSetToCabinetGLB = async(cabinetsData) => {\r\n store.dispatch(setSqftCabinetsGlb(cabinetsData));\r\n}\r\n\r\nexport const setUrlToCabinetGLB = async(cabinetsData) => {\r\n const state = store.getState();\r\n if (state.sqftState.abortRequestController) {\r\n state.sqftState.abortRequestController.abort();\r\n }\r\n\r\n let cabinetSet;\r\n try {\r\n store.dispatch(setAPIErrorMessage(null));\r\n const abortController = new AbortController();\r\n store.dispatch(setAbortController(abortController));\r\n cabinetSet = await SqftJsonApi.postCabinetSet(cabinetsData, { signal: abortController.signal });\r\n } catch (e) {\r\n if (e.name !== 'AbortError') {\r\n store.dispatch(setAPIErrorMessage(e));\r\n }\r\n }\r\n console.log(\"response cabinetSet from api\", cabinetSet );\r\n\r\n //URL needs to be here to display it in AR https://s3.amazonaws.com/qc-3dfiles/composed/ to override it check SquareFootageToolAR\r\n //glbUrl = \"https://qc-3dfiles.s3.amazonaws.com/ar-composer/W3030.glb\"\r\n //glbUrl = \"/images/sqft-icons/3d/Chair.glb\"\r\n //store.dispatch(setSqftCabinetsGlb(\"/video/3d/cabinet.glb\"));\r\n //store.dispatch(setSqftCabinetsGlb(\"https://quoteremodel.com/video/sqft/cabinets/cabinet.glb\"));\r\n //glbUrl = \"/images/sqft-icons/3d/DCW2430 Summer Flame.glb\"\r\n //glbUrl = \"/images/sqft-icons/3d/hood/Hood Oven GLB/Appliances/Hood_0_0_0_30_0_0_Collection/All-Hood ZLINE 8654SNZ CB-30-25.6.glb\"\r\n //glbUrl = \"https://discoverthreejs.com/examples/assets/models/Parrot.glb\"\r\n //glbUrl = \"https://threejs.org/examples/models/gltf/AnisotropyBarnLamp.glb\"\r\n //setSqftCabinetsGlb(\"https://threejs.org/examples/models/gltf/AnisotropyBarnLamp.glb\");\r\n //store.dispatch(setSqftCabinetsGlb(\"https://master_new_1512.quoteremodel.com/content/Views/visualizers/images/sqft-icons/3d/cabinet.glb\"));\r\n //store.dispatch(setSqftCabinetsGlb(\"https://d1mb1i73swc8dz.cloudfront.net/ar-composer/All-Bottom Cabinet-Light Italian Walnut-Bryant-30-34.5-SB.glb\"));\r\n //store.dispatch(setSqftCabinetsGlb(\"https://s3.amazonaws.com/qc-3dfiles/composed/5dd7954e-ed43-4489-8260-93eeaade08c5.glb\"));\r\n store.dispatch(setSqftCabinetsGlb(cabinetSet ? cabinetSet.s3Url : null));\r\n}\r\n\r\nexport function getUrlMatchingByColor(dbFeature, relatedParentFeature) {\r\n //console.log(\"relatedParentFeature.getFeatureName()\", relatedParentFeature.getFeatureName());\r\n //console.log(\"relatedParentFeature.sharedFeatureName\", relatedParentFeature.dbFeature.sharedFeatureName);\r\n\r\n if (!dbFeature || !relatedParentFeature) {\r\n console.log('Invalid feature or feature properties');\r\n return null;\r\n }\r\n\r\n if (!Array.isArray(dbFeature.thirdPartyAR3DUrls)) {\r\n console.log('thirdPartyAR3DUrls is not defined or not an array. Id:', dbFeature.id);\r\n return null;\r\n }\r\n\r\n const relatedParentFeatureName = relatedParentFeature.getFeatureName();\r\n\r\n // Sort URLs by version in descending order\r\n const sortedUrls = groupUrlsByVersion(dbFeature.thirdPartyAR3DUrls);\r\n\r\n // Try to find a URL by the shared feature name\r\n const urlBySharedFeatureName = getUrlByName(relatedParentFeature.dbFeature.sharedFeatureName, sortedUrls);\r\n if (urlBySharedFeatureName) {\r\n return urlBySharedFeatureName;\r\n }\r\n\r\n // Try to find a URL by the parent feature name\r\n const urlByFeatureName = getUrlByName(relatedParentFeatureName, sortedUrls);\r\n if (urlByFeatureName) {\r\n return urlByFeatureName;\r\n }\r\n\r\n // Try to find a URL by similarity based on the shared feature name\r\n const urlBySimilarity = similarityByWords(sortedUrls, relatedParentFeature.dbFeature.sharedFeatureName);\r\n if (urlBySimilarity) {\r\n return urlBySimilarity;\r\n }\r\n\r\n // Try to find a URL by similarity based on the parent feature name\r\n const urlBySimilarityFromFeatureName = similarityByWords(sortedUrls, relatedParentFeatureName);\r\n if (urlBySimilarityFromFeatureName) {\r\n return urlBySimilarityFromFeatureName;\r\n }\r\n\r\n // Check if URL contains the feature name\r\n let matchingUrl = sortedUrls.find(url => url.includes(relatedParentFeatureName));\r\n if (matchingUrl) {\r\n return matchingUrl;\r\n }\r\n\r\n // Check if URL contains the color name\r\n const color = relatedParentFeature.getColorName();\r\n if (color && color.length > 3) {\r\n matchingUrl = sortedUrls.find(url => url.includes(color));\r\n if (matchingUrl) {\r\n return matchingUrl;\r\n }\r\n }\r\n\r\n // If no specific color, fallback to checking for 'black' in URL\r\n matchingUrl = sortedUrls.find(url => url.toLowerCase().includes('black'));\r\n if (matchingUrl) {\r\n return matchingUrl;\r\n }\r\n\r\n // If no match was found, return the first URL as a fallback\r\n return sortedUrls[0] || null;\r\n}\r\n\r\nexport function getRelatedFeatureMetadata (relatedFeature, parentFeature) {\r\n const url = getUrlMatchingByColor(relatedFeature.dbFeature, parentFeature);\r\n return getThirdPartyAR3DMetaData(relatedFeature.dbFeature, url);\r\n}\r\n\r\nexport function getCabinetDimensions (relatedFeature, parentFeature) {\r\n const thirdPartyAR3DMetaData = getRelatedFeatureMetadata(relatedFeature, parentFeature);\r\n const width = getWidthFromDbFeature(relatedFeature.dbFeature, thirdPartyAR3DMetaData);\r\n const depth = getDepthFromDbFeature(relatedFeature.dbFeature, thirdPartyAR3DMetaData);\r\n const height = getHeightFromDbFeature(relatedFeature.dbFeature, thirdPartyAR3DMetaData);\r\n const diamondLength = thirdPartyAR3DMetaData && thirdPartyAR3DMetaData.DiamondLength ? parseFloat(thirdPartyAR3DMetaData.DiamondLength[0]) : 0;\r\n\r\n return { width: width, height: height, depth: depth, diamondLength: diamondLength, thirdPartyAR3DMetaData };\r\n}\r\n\r\nexport function getCabinetSimilarFeatureFromAnotherColor (featuresListToSearchForNewFeature, currentShapeDbFeature) {\r\n const getCabinetBoxName = (str) => {\r\n if (str.includes('/')) {\r\n const parts = str.split('/');\r\n return parts[0].trim();\r\n } else {\r\n return str.trim();\r\n }\r\n }\r\n const cabinetBoxName = getCabinetBoxName(currentShapeDbFeature.sharedFeatureName);\r\n let newShapeDbFeature = featuresListToSearchForNewFeature.find(relatedFeature =>\r\n relatedFeature.sharedFeatureName === cabinetBoxName\r\n );\r\n\r\n // If no exact match found, search for an 'includes' match\r\n if (!newShapeDbFeature) {\r\n newShapeDbFeature = featuresListToSearchForNewFeature.find(relatedFeature =>\r\n relatedFeature.sharedFeatureName.includes(cabinetBoxName)\r\n );\r\n }\r\n\r\n return newShapeDbFeature\r\n}\r\n","import {getWizardListFromBackend} from \"../api/wizard-api\";\r\nimport {setLeadPopup} from \"../globalLogic/globalActions\";\r\nimport {getErrorPopupObject} from \"../components/helpers/popupFunctions\";\r\nimport {getConflictingWizardSteps, getUpdatedAllWizardValues} from \"./wizardLogicOld\";\r\n\r\nexport const SET_WIZARD_LIST = \"SET_WIZARD_LIST\";\r\nexport const SET_WIZARD_ACTIVE_ITEM = \"SET_WIZARD_ACTIVE_ITEM\";\r\nexport const SET_WIZARD_ACTIVE_STEP = \"SET_WIZARD_ACTIVE_STEP\";\r\nexport const SET_WIZARD_SELECTED_VALUES = \"SET_WIZARD_SELECTED_VALUES\";\r\nexport const SET_ALL_WIZARD_SELECTED_VALUES = \"SET_ALL_WIZARD_SELECTED_VALUES\";\r\nexport const RESTORE_ALL_WIZARD_SELECTED_VALUES = \"RESTORE_ALL_WIZARD_SELECTED_VALUES\";\r\nexport const SET_WIZARD_MISSING_FEATURES = \"SET_WIZARD_MISSING_FEATURES\";\r\n\r\nexport const getWizardList = () => {\r\n return async (dispatch) => {\r\n const {wizardList, error} = await getWizardListFromBackend();\r\n if (error) {\r\n dispatch(setLeadPopup(getErrorPopupObject(error)));\r\n } else if (!wizardList.length) {\r\n dispatch(setLeadPopup(getErrorPopupObject(\"No wizards found\")));\r\n }\r\n if (document.kvConfig.devMode) {\r\n console.log(\"wizardList\", wizardList);\r\n }\r\n const wizardsArray = Array.isArray(wizardList.wizardList) ? wizardList.wizardList : wizardList;\r\n const nextActiveItem = document.kvConfig.wizardId\r\n ? wizardsArray.find(wizItem => wizItem.id === document.kvConfig.wizardId) || wizardsArray[0]\r\n : wizardsArray[0];\r\n dispatch(setWizardActiveItem(nextActiveItem));\r\n dispatch(setWizardList(wizardList));\r\n }\r\n};\r\n\r\nexport const setWizardList = (wizardList) => ({\r\n type: SET_WIZARD_LIST,\r\n payload: {wizardList}\r\n});\r\n\r\n// export const setWizardActiveItem = (wizardActiveItem, quoteIndex = null) => {\r\nexport const setWizardActiveItem = (wizardActiveItem) => {\r\n return (dispatch) => {\r\n // return (dispatch, getState) => {\r\n // const {quotesState} = getState();\r\n\r\n dispatch({\r\n type: SET_WIZARD_ACTIVE_ITEM,\r\n payload: {\r\n wizardActiveItem,\r\n // quoteIndex: Number.isInteger(quoteIndex) ? quoteIndex : quotesState.activeQuoteIndex,\r\n quoteIndex: 0,\r\n }\r\n })\r\n }\r\n};\r\n\r\nexport const setWizardActiveStep = (wizardActiveStep) => {\r\n return (dispatch, getState) => {\r\n // const {quotesState, wizardState} = getState();\r\n const {wizardState} = getState();\r\n\r\n let wizardConflictingSteps = wizardState.wizardConflictingSteps;\r\n let newWizValues = Object.assign({}, wizardState.wizardSelectedValues);\r\n if (wizardState.wizardConflictingSteps.length) {\r\n Object.keys(wizardState.wizardSelectedValues).reverse().forEach(selectedKeyNumber => { // erase conflicting selected steps!\r\n if (selectedKeyNumber >= wizardActiveStep) {\r\n delete newWizValues[selectedKeyNumber]\r\n }\r\n });\r\n wizardConflictingSteps = [];\r\n }\r\n let allWizardsValues = wizardState.allWizardsValues;\r\n if (wizardState.wizardActiveItem) {\r\n allWizardsValues = wizardState.allWizardsValues.map(wizObject => {\r\n // if (wizObject.wizardItemId === wizardState.wizardActiveItem.id && wizObject.quoteIndex === quotesState.activeQuoteIndex) {\r\n if (wizObject.wizardItemId === wizardState.wizardActiveItem.id && wizObject.quoteIndex === 0) {\r\n wizObject.lastVisitedStep = wizardActiveStep // keep it up to date to be able to restore\r\n if (wizardState.wizardConflictingSteps.length) {\r\n wizObject.wizardSelectedValues = Object.assign({}, newWizValues)\r\n }\r\n }\r\n return wizObject\r\n })\r\n }\r\n\r\n dispatch({\r\n type: SET_WIZARD_ACTIVE_STEP,\r\n payload: {\r\n wizardActiveStep,\r\n wizardSelectedValues: newWizValues,\r\n wizardConflictingSteps,\r\n allWizardsValues,\r\n // quoteIndex: quotesState.activeQuoteIndex,\r\n quoteIndex: 0,\r\n }\r\n })\r\n }\r\n}\r\n\r\nexport const setWizardSelectedValues = (wizardSelectedValues, direct = false, wizardItem = null) => {\r\n return (dispatch, getState) => {\r\n const {wizardState} = getState();\r\n const wizardActiveItem = wizardItem || wizardState.wizardActiveItem;\r\n\r\n let wizardConflictingSteps = wizardState.wizardConflictingSteps;\r\n\r\n let newWizValues = direct\r\n ? Object.assign({}, wizardSelectedValues)\r\n : Object.assign({}, wizardState.wizardSelectedValues, wizardSelectedValues);\r\n\r\n if (!direct && wizardSelectedValues && Object.keys(wizardSelectedValues).length === 1) {\r\n wizardConflictingSteps = getConflictingWizardSteps(\r\n newWizValues,\r\n {wizardActiveItem, quoteIndex: 0, wizardSelectedValues},\r\n );\r\n }\r\n\r\n if (wizardActiveItem) {\r\n // console.log(\"wizardConflictingSteps\", action.payload.wizardConflictingSteps);\r\n // this works for QKB UI only for now, we are not using it on lixil\r\n const allWizardsValues = wizardConflictingSteps.length // do not change them to be able to restore when wizard is closed\r\n ? wizardState.allWizardsValues\r\n : getUpdatedAllWizardValues(wizardState, 0, wizardActiveItem.id, newWizValues);\r\n\r\n dispatch({\r\n type: SET_WIZARD_SELECTED_VALUES,\r\n payload: {\r\n quoteIndex: 0,\r\n wizardSelectedValues: newWizValues,\r\n allWizardsValues,\r\n wizardConflictingSteps\r\n }\r\n });\r\n\r\n return;\r\n }\r\n\r\n dispatch({\r\n type: SET_WIZARD_SELECTED_VALUES,\r\n payload: {\r\n wizardSelectedValues: newWizValues,\r\n wizardConflictingSteps,\r\n // direct,\r\n quoteIndex: 0,\r\n // wizardActiveItem: wizardItem || wizardState.wizardActiveItem,\r\n // fabricatorState,\r\n // cartItems: cartState.cartItems\r\n }\r\n })\r\n }\r\n}\r\n\r\nexport const setAllWizardSelectedValues = (wizardSelectedValues, quoteIndex, wizardItemId) => ({\r\n type: SET_ALL_WIZARD_SELECTED_VALUES,\r\n payload: {wizardSelectedValues, quoteIndex, wizardItemId}\r\n});\r\n\r\nexport const updateAllWizardValues = (allWizardsValues) => ({\r\n type: RESTORE_ALL_WIZARD_SELECTED_VALUES,\r\n payload: {allWizardsValues}\r\n})\r\n","import {postLixilCalendar, postLixilGetSalesRep} from \"../api/lixil-api\";\r\nimport {defaultTimeValue} from \"./appointmentReducer\";\r\nimport {getLixilCampaignInfo, LIXIL_PRODUCT_TYPES} from \"../lixilLogic/lixilActions\";\r\n\r\nexport const SET_APPOINTMENT_DATE = \"SET_APPOINTMENT_DATE\";\r\nexport const SET_APPOINTMENT_TIME = \"SET_APPOINTMENT_TIME\";\r\nexport const SET_APPOINTMENT_TIME_STEP_ACTIVE = \"SET_APPOINTMENT_TIME_STEP_ACTIVE\";\r\nexport const SET_AVAILABLE_APPOINTMENTS = \"SET_AVAILABLE_APPOINTMENTS\";\r\nexport const SET_APPOINTMENTS_NOT_AVAILABLE = \"SET_APPOINTMENTS_NOT_AVAILABLE\";\r\nexport const SET_SALES_REP_ID = \"SET_SALES_REP_ID\";\r\nexport const setAppointmentDate = (date) => ({\r\n type: SET_APPOINTMENT_DATE,\r\n payload: date\r\n});\r\n\r\nexport const setAppointmentTime = (time = \"\", timeSlot = \"\") => ({\r\n type: SET_APPOINTMENT_TIME,\r\n payload: {time, timeSlot}\r\n});\r\n\r\nexport const setAppointmentTimeStepActive = (timeStepIsActive) => ({\r\n type: SET_APPOINTMENT_TIME_STEP_ACTIVE,\r\n payload: timeStepIsActive\r\n});\r\n\r\nexport const setAvailableAppointments = (availableAppointmentDates) => {\r\n return (dispatch, getState) => {\r\n const {appointmentDate, appointmentTimeSlot} = getState().appointmentState;\r\n let payload = {\r\n availableAppointmentDates\r\n };\r\n if (appointmentDate) {\r\n const formattedToMatchApiDate = formatCalendarDateToMatchAvailableDate(new Date(appointmentDate));\r\n const selectedLixilDateObject = availableAppointmentDates.find(dateObject => {\r\n return dateObject.salesRepAppointmentDate === formattedToMatchApiDate\r\n });\r\n if (!selectedLixilDateObject) {\r\n payload.appointmentDate = \"\";\r\n payload.appointmentTimeSlot = defaultTimeValue;\r\n } else if (!selectedLixilDateObject.salesRepsInSlots.some(timeSlotObject => timeSlotObject.timeSlot === appointmentTimeSlot)) {\r\n payload.appointmentTimeSlot = defaultTimeValue;\r\n }\r\n }\r\n dispatch({\r\n type: SET_AVAILABLE_APPOINTMENTS,\r\n payload\r\n });\r\n }\r\n};\r\n\r\nexport const setAppointmentsNotAvailable = (appointmentsNotAvailable) => ({\r\n type: SET_APPOINTMENTS_NOT_AVAILABLE,\r\n payload: {appointmentsNotAvailable}\r\n});\r\n\r\nexport const setSalesRepId = (salesRepID) => ({\r\n type: SET_SALES_REP_ID,\r\n payload: {salesRepID}\r\n});\r\n\r\nconst getCommonLixilPostData = (store) => {\r\n const {userState, wizardState} = store;\r\n const {userInfo, userLocation} = userState;\r\n\r\n const productId = wizardState.wizardSelectedValues\r\n && wizardState.wizardSelectedValues[1]\r\n && wizardState.wizardSelectedValues[1].selectedFeature\r\n ? wizardState.wizardSelectedValues[1].selectedFeature.id\r\n : 1;\r\n\r\n const productName = getLixilCampaignInfo(store).Product === LIXIL_PRODUCT_TYPES.srBathing\r\n ? LIXIL_PRODUCT_TYPES.srBathing\r\n : \"BR\";\r\n\r\n return {\r\n contactData: {\r\n email: userInfo.email,\r\n firstName: userInfo.firstName,\r\n installationAddress: userInfo.address,\r\n lastName: userInfo.lastName,\r\n phone: userInfo.phone,\r\n zipcode: userLocation.postal || userInfo.postal,\r\n \"city\": userLocation.city,\r\n \"direction\": userLocation.direction,\r\n \"state\": userLocation.state,\r\n \"streetName\": userLocation.streetName,\r\n \"streetNumber\": userLocation.streetNumber,\r\n },\r\n productInfo: {\r\n productId,\r\n productName,\r\n }\r\n }\r\n}\r\n\r\n export const checkLixilCalendar = () => {\r\n return async (dispatch, getState) => {\r\n\r\n const postCalendarData = getCommonLixilPostData(getState());\r\n\r\n // 1) register user\r\n const postCalendarResponse = await postLixilCalendar(postCalendarData);\r\n console.log(\"postCalendarResponse\", postCalendarResponse);\r\n\r\n if (postCalendarResponse && postCalendarResponse.data && postCalendarResponse.data.salesRepAvailability) {\r\n // dispatch(setAppointmentsNotAvailable(false)); // faraday reponse not available for this address\r\n // removed, it should be set when user submitted the form, if they opened calendar and left - it should be noAppt\r\n dispatch(setAvailableAppointments(postCalendarResponse.data.salesRepAvailability.availableSalesReps));\r\n return true\r\n }\r\n\r\n // dispatch(setAvailableAppointments([\r\n // {\r\n // \"salesRepAppointmentDate\": \"2024-03-18\",\r\n // \"salesRepsInSlots\": [\r\n // {\r\n // \"slotEndTime\": \"string\",\r\n // \"slotStartTime\": \"string\",\r\n // \"timeSlot\": \"string\"\r\n // }\r\n // ]\r\n // }\r\n // ]));\r\n\r\n // return !(postCalendarResponse && postCalendarResponse.data && postCalendarResponse.data.salesRepAvailability)\r\n return false\r\n }\r\n }\r\n\r\nexport const getLixilSalesRep = () => {\r\n return async (dispatch, getState) => {\r\n\r\n const store = getState();\r\n const {appointmentState} = store;\r\n\r\n let postData = getCommonLixilPostData(store);\r\n\r\n postData.date = formatCalendarDateToMatchAvailableDate(appointmentState.appointmentDate);\r\n // postData.consultationTime = appointmentState.appointmentTime;\r\n // postData.timeSlotId = 1;\r\n postData.timeSlot = appointmentState.appointmentTimeSlot;\r\n\r\n // 1) register user\r\n const postSalesRepResponse = await postLixilGetSalesRep(postData);\r\n console.log(\"postSalesRepResponse\", postSalesRepResponse);\r\n\r\n if (postSalesRepResponse && postSalesRepResponse.data && postSalesRepResponse.data.salesRepID) {\r\n dispatch(setSalesRepId(postSalesRepResponse.data.salesRepID));\r\n }\r\n\r\n // return !(postCalendarResponse && postCalendarResponse.data && postCalendarResponse.data.salesRepAvailability)\r\n return false\r\n }\r\n}\r\n\r\nexport const formatCalendarDateToMatchAvailableDate = (calendarDate, withSlashes = false) => {\r\n\r\n let day = \"\"+calendarDate.getDate();\r\n let month = \"\"+(calendarDate.getMonth() + 1); // +1 because getMonth returns starting from 0 (January is 0)\r\n let year = \"\"+calendarDate.getFullYear();\r\n\r\n day = day.length === 1 ? \"0\" + day : day;\r\n month = month.length === 1 ? \"0\" + month : month;\r\n\r\n if (withSlashes) {\r\n return month + \"/\" + day + \"/\" + year\r\n }\r\n\r\n return year + \"-\" + month + \"-\" + day\r\n}\r\n\r\nexport const getSelectedLixilDateObject = (appDate, availableAppointmentDates) => {\r\n const formattedToMatchApiDate = formatCalendarDateToMatchAvailableDate(appDate);\r\n const selectedLixilDateObject = availableAppointmentDates.find(dateObject => {\r\n return dateObject.salesRepAppointmentDate === formattedToMatchApiDate\r\n });\r\n if (!selectedLixilDateObject) {\r\n console.log(\"no selected day? try better search, something is incorrect\", );\r\n return null\r\n }\r\n return selectedLixilDateObject\r\n}\r\n","import invert from \"lodash/invert\";\r\nimport {LayoutType} from \"./constants\";\r\nimport {UseFullSizeImages} from \"../../../config\";\r\nimport {pnpoly} from \"../../../misc/utils\";\r\n\r\nlet layouts = {};\r\nObject.keys(LayoutType).forEach(layoutName => {\r\n layouts[layoutName] = {\r\n Walls: {\r\n Ceiling: 1000,\r\n RightWall: 2000,\r\n LeftWall: 3000,\r\n PopoutWall: 6000,\r\n Backsplash: 4000,\r\n BacksplashRightWall: 4050,\r\n BacksplashLeftWall: 4100,\r\n RightWallBacksplash: 4150,\r\n LeftWallBacksplash: 4200,\r\n // FourInchBacksplash: 12000,\r\n // FullHeightBacksplash: 13000,\r\n // SixHeightBacksplash: 14000,\r\n },\r\n Floor: 5000,\r\n Globals: {\r\n GlobalShadow: 7000,\r\n Baseboard: 8000,\r\n CeilingLights: 9000,\r\n CeilingHighlights: 10000,\r\n Decor1: 25000,\r\n Decor2: 32000,\r\n Decor3: 36500, // center island decor\r\n Decor4: 41000,\r\n },\r\n Cabinet: {\r\n TopCabinetShadow: 15000,\r\n TopCabinetShadowPart2: 15005,\r\n BottomCabinetShadow: 15500,\r\n TopCabinet: 16000,\r\n TopCabinetModuleBox: 16050,\r\n CrownMolding: 17000,\r\n TopCabinet2: 19000, //Crown Molding should be higher than Top cabinet (c) Nikita\r\n TopCabinetModuleBox2: 219050, //Crown Molding should be higher than Top cabinet (c) Nikita\r\n CrownMolding2: 20000,\r\n BottomCabinet: 22000,\r\n BottomCabinetModuleBox: 22050,\r\n BottomCabinet2: 27000,\r\n BottomCabinetModuleBox2: 27050,\r\n TopHandle: 28000,\r\n TopHandle2: 28100,\r\n BottomHandle: 28500,\r\n BottomHandle2: 28750,\r\n Peninsula: 29250,\r\n TopCabinetModules: {},\r\n BottomCabinetModules: {},\r\n },\r\n Appliances: {\r\n Microwave: 21000,\r\n Hood: 18000,\r\n Dishwasher: 23000,\r\n Range: 26000,\r\n Fridge: 29000,\r\n FridgeShadow: 29050,\r\n },\r\n CountertopGroup: {\r\n Countertop: 24000,\r\n Countertop2: 30000,\r\n Sink: 43000,\r\n Faucet: 44000,\r\n Stovetop: 45000,\r\n // Countertop3: 42000,\r\n },\r\n CenterIsland: {\r\n CenterIslandShadow: 29500,\r\n Cabinet: 31000,\r\n Countertop: 36000,\r\n Sink: 37000,\r\n Faucet: 38000,\r\n Stovetop: 38500,\r\n Range: 38750,\r\n ChairsShadow: 35000,\r\n Chairs: 39000,\r\n Handle: 40000,\r\n },\r\n };\r\n});\r\n\r\nlayouts[\"Small\"].Appliances.Fridge = 15750;\r\nlayouts[\"SmallWithPeninsula\"].Appliances.Fridge = 15750;\r\nlayouts[\"SmallWithIsland\"].Appliances.Fridge = 15750;\r\nlayouts[\"SmallWithPeninsulaWithIsland\"].Appliances.Fridge = 15750;\r\nlayouts[\"Small\"].Appliances.FridgeShadow = 15800;\r\nlayouts[\"SmallWithPeninsula\"].Appliances.FridgeShadow = 15800;\r\nlayouts[\"SmallWithIsland\"].Appliances.FridgeShadow = 15800;\r\nlayouts[\"SmallWithPeninsulaWithIsland\"].Appliances.FridgeShadow = 15800;\r\n\r\nlet startTopCabinetZIndex = 17100;\r\nlet startTopCabinetZIndex2 = 21100;\r\n\r\nlet startBottomCabinetZIndex = 22100;\r\nlet startBottomCabinetZIndex2 = 27100;\r\n\r\nObject.keys(LayoutType).forEach(layoutName => {\r\n let moduleTopNumber = 1, moduleBottomNumber = 1;\r\n for (let i = 1; i <= 8; i++) { // 8 modules\r\n for (let k = 1; k <= 64; k++) { // 64 module parts\r\n const module_modulePart = i + \"_\" + k;\r\n layouts[layoutName].Cabinet.TopCabinetModules[module_modulePart] = (i <= 5)\r\n ? startTopCabinetZIndex + (i*100)+ k\r\n : startTopCabinetZIndex2 + (moduleTopNumber*100)+ k;\r\n layouts[layoutName].Cabinet.BottomCabinetModules[module_modulePart] = (i <= 6)\r\n ? startBottomCabinetZIndex + (i*100)+ k\r\n : startBottomCabinetZIndex2 + (moduleBottomNumber*100)+ k;\r\n }\r\n if (i > 5) {\r\n moduleTopNumber++;\r\n }\r\n if (i > 6) {\r\n moduleBottomNumber++;\r\n }\r\n }\r\n});\r\n\r\nconst getLayerDimensions = (zIndex, currentLayout) => {\r\n const fullImagesFactor = UseFullSizeImages ? 185.1851851851852 : 100;\r\n\r\n if ((zIndex >= layouts[currentLayout].Cabinet.TopCabinetModules[\"1_1\"])\r\n && (zIndex <= layouts[currentLayout].Cabinet.TopCabinetModules[\"1_64\"])) {\r\n return {\r\n polygonArray: [[0,(fullImagesFactor/100)*240],[(fullImagesFactor/100)*290,(fullImagesFactor/100)*240],[(fullImagesFactor/100)*290,(fullImagesFactor/100)*400],[0,(fullImagesFactor/100)*400]],\r\n width: (fullImagesFactor/100)*290,\r\n height: (fullImagesFactor/100)*160\r\n };\r\n } else if ((zIndex >= layouts[currentLayout].Cabinet.TopCabinetModules[\"2_1\"])\r\n && (zIndex <= layouts[currentLayout].Cabinet.TopCabinetModules[\"2_64\"])) {\r\n return {\r\n polygonArray: [[(fullImagesFactor/100)*260,(fullImagesFactor/100)*270],[(fullImagesFactor/100)*480,(fullImagesFactor/100)*270],[(fullImagesFactor/100)*480,(fullImagesFactor/100)*510],[(fullImagesFactor/100)*260,(fullImagesFactor/100)*510]],\r\n width: (fullImagesFactor/100)*220,\r\n height: (fullImagesFactor/100)*240\r\n };\r\n } else if ((zIndex >= layouts[currentLayout].Cabinet.TopCabinetModules[\"3_1\"])\r\n && (zIndex <= layouts[currentLayout].Cabinet.TopCabinetModules[\"3_64\"])) {\r\n return {\r\n polygonArray: [[(fullImagesFactor/100)*470,(fullImagesFactor/100)*300],[(fullImagesFactor/100)*630,(fullImagesFactor/100)*300],[(fullImagesFactor/100)*630,(fullImagesFactor/100)*510],[(fullImagesFactor/100)*470,(fullImagesFactor/100)*510]],\r\n width: (fullImagesFactor/100)*160,\r\n height: (fullImagesFactor/100)*210\r\n };\r\n } else if ((zIndex >= layouts[currentLayout].Cabinet.TopCabinetModules[\"4_1\"])\r\n && (zIndex <= layouts[currentLayout].Cabinet.TopCabinetModules[\"4_64\"])) {\r\n return {\r\n polygonArray: [[(fullImagesFactor/100)*620,(fullImagesFactor/100)*310],[(fullImagesFactor/100)*770,(fullImagesFactor/100)*310],[(fullImagesFactor/100)*770,(fullImagesFactor/100)*510],[(fullImagesFactor/100)*620,(fullImagesFactor/100)*510]],\r\n width: (fullImagesFactor/100)*150,\r\n height: (fullImagesFactor/100)*200\r\n };\r\n } else if ((zIndex >= layouts[currentLayout].Cabinet.TopCabinetModules[\"5_1\"])\r\n && (zIndex <= layouts[currentLayout].Cabinet.TopCabinetModules[\"5_64\"])) {\r\n return {\r\n polygonArray: [[(fullImagesFactor/100)*750,(fullImagesFactor/100)*280],[(fullImagesFactor/100)*930,(fullImagesFactor/100)*280],[(fullImagesFactor/100)*930,(fullImagesFactor/100)*510],[(fullImagesFactor/100)*750,(fullImagesFactor/100)*280]],\r\n width: (fullImagesFactor/100)*180,\r\n height: (fullImagesFactor/100)*230\r\n };\r\n } else if ((zIndex >= layouts[currentLayout].Cabinet.TopCabinetModules[\"6_1\"])\r\n && (zIndex <= layouts[currentLayout].Cabinet.TopCabinetModules[\"6_64\"])) {\r\n return {\r\n polygonArray: [[(fullImagesFactor/100)*910,(fullImagesFactor/100)*260],[(fullImagesFactor/100)*1130,(fullImagesFactor/100)*260],[(fullImagesFactor/100)*1130,(fullImagesFactor/100)*510],[(fullImagesFactor/100)*910,(fullImagesFactor/100)*510]],\r\n width: (fullImagesFactor/100)*220,\r\n height: (fullImagesFactor/100)*250\r\n };\r\n } else if ((zIndex >= layouts[currentLayout].Cabinet.TopCabinetModules[\"7_1\"])\r\n && (zIndex <= layouts[currentLayout].Cabinet.TopCabinetModules[\"7_64\"])) {\r\n return {\r\n polygonArray: [[(fullImagesFactor/100)*1120,(fullImagesFactor/100)*220],[(fullImagesFactor/100)*1400,(fullImagesFactor/100)*220],[(fullImagesFactor/100)*1400,(fullImagesFactor/100)*520],[(fullImagesFactor/100)*1120,(fullImagesFactor/100)*520]],\r\n width: (fullImagesFactor/100)*280,\r\n height: (fullImagesFactor/100)*300\r\n };\r\n } else if ((zIndex >= layouts[currentLayout].Cabinet.TopCabinetModules[\"8_1\"])\r\n && (zIndex <= layouts[currentLayout].Cabinet.TopCabinetModules[\"8_64\"])) {\r\n return {\r\n polygonArray: [[(fullImagesFactor/100)*1380,(fullImagesFactor/100)*190],[(fullImagesFactor/100)*1620,(fullImagesFactor/100)*190],[(fullImagesFactor/100)*1620,(fullImagesFactor/100)*520],[(fullImagesFactor/100)*1380,(fullImagesFactor/100)*520]],\r\n width: (fullImagesFactor/100)*240,\r\n height: (fullImagesFactor/100)*330\r\n };\r\n } else if ((zIndex >= layouts[currentLayout].Cabinet.BottomCabinetModules[\"1_1\"])\r\n && (zIndex <= layouts[currentLayout].Cabinet.BottomCabinetModules[\"1_64\"])) {\r\n return {\r\n polygonArray: [[0,(fullImagesFactor/100)*240],[(fullImagesFactor/100)*290,(fullImagesFactor/100)*240],[(fullImagesFactor/100)*290,(fullImagesFactor/100)*400],[0,(fullImagesFactor/100)*400]],\r\n width: (fullImagesFactor/100)*290,\r\n height: (fullImagesFactor/100)*160\r\n };\r\n } else if ((zIndex >= layouts[currentLayout].Cabinet.BottomCabinetModules[\"2_1\"])\r\n && (zIndex <= layouts[currentLayout].Cabinet.BottomCabinetModules[\"2_64\"])) {\r\n return {\r\n polygonArray: [[(fullImagesFactor/100)*280,(fullImagesFactor/100)*620],[(fullImagesFactor/100)*480,(fullImagesFactor/100)*620],[(fullImagesFactor/100)*480,(fullImagesFactor/100)*850],[(fullImagesFactor/100)*280,(fullImagesFactor/100)*850]],\r\n width: (fullImagesFactor/100)*200,\r\n height: (fullImagesFactor/100)*230\r\n };\r\n } else if ((zIndex >= layouts[currentLayout].Cabinet.BottomCabinetModules[\"3_1\"])\r\n && (zIndex <= layouts[currentLayout].Cabinet.BottomCabinetModules[\"3_64\"])) {\r\n return {\r\n polygonArray: [[(fullImagesFactor/100)*470,(fullImagesFactor/100)*610],[(fullImagesFactor/100)*630,(fullImagesFactor/100)*610],[(fullImagesFactor/100)*630,(fullImagesFactor/100)*800],[(fullImagesFactor/100)*470,(fullImagesFactor/100)*800]],\r\n width: (fullImagesFactor/100)*160,\r\n height: (fullImagesFactor/100)*190\r\n };\r\n } else if ((zIndex >= layouts[currentLayout].Cabinet.BottomCabinetModules[\"4_1\"])\r\n && (zIndex <= layouts[currentLayout].Cabinet.BottomCabinetModules[\"4_64\"])) {\r\n return {\r\n polygonArray: [[(fullImagesFactor/100)*630,(fullImagesFactor/100)*600],[(fullImagesFactor/100)*760,(fullImagesFactor/100)*600],[(fullImagesFactor/100)*760,(fullImagesFactor/100)*800],[(fullImagesFactor/100)*630,(fullImagesFactor/100)*800]],\r\n width: (fullImagesFactor/100)*130,\r\n height: (fullImagesFactor/100)*200\r\n };\r\n } else if ((zIndex >= layouts[currentLayout].Cabinet.BottomCabinetModules[\"5_1\"])\r\n && (zIndex <= layouts[currentLayout].Cabinet.BottomCabinetModules[\"5_64\"])) {\r\n return {\r\n polygonArray: [[(fullImagesFactor/100)*750,(fullImagesFactor/100)*620],[(fullImagesFactor/100)*920,(fullImagesFactor/100)*620],[(fullImagesFactor/100)*920,(fullImagesFactor/100)*840],[(fullImagesFactor/100)*750,(fullImagesFactor/100)*840]],\r\n width: (fullImagesFactor/100)*170,\r\n height: (fullImagesFactor/100)*220\r\n };\r\n } else if ((zIndex >= layouts[currentLayout].Cabinet.BottomCabinetModules[\"6_1\"])\r\n && (zIndex <= layouts[currentLayout].Cabinet.BottomCabinetModules[\"6_64\"])) {\r\n return {\r\n polygonArray: [[(fullImagesFactor/100)*910,(fullImagesFactor/100)*640],[(fullImagesFactor/100)*1130,(fullImagesFactor/100)*640],[(fullImagesFactor/100)*1130,(fullImagesFactor/100)*880],[(fullImagesFactor/100)*910,(fullImagesFactor/100)*880]],\r\n width: (fullImagesFactor/100)*220,\r\n height: (fullImagesFactor/100)*240\r\n };\r\n } else if ((zIndex >= layouts[currentLayout].Cabinet.BottomCabinetModules[\"7_1\"])\r\n && (zIndex <= layouts[currentLayout].Cabinet.BottomCabinetModules[\"7_64\"])) {\r\n return {\r\n polygonArray: [[(fullImagesFactor/100)*1110,(fullImagesFactor/100)*660],[(fullImagesFactor/100)*1390,(fullImagesFactor/100)*660],[(fullImagesFactor/100)*1390,(fullImagesFactor/100)*940],[(fullImagesFactor/100)*1110,(fullImagesFactor/100)*940]],\r\n width: (fullImagesFactor/100)*280,\r\n height: (fullImagesFactor/100)*280\r\n };\r\n } else if ((zIndex >= layouts[currentLayout].Cabinet.BottomCabinetModules[\"8_1\"])\r\n && (zIndex <= layouts[currentLayout].Cabinet.BottomCabinetModules[\"8_64\"])) {\r\n return {\r\n polygonArray: [[(fullImagesFactor/100)*1380,(fullImagesFactor/100)*690],[(fullImagesFactor/100)*1620,(fullImagesFactor/100)*690],[(fullImagesFactor/100)*1620,(fullImagesFactor/100)*990],[(fullImagesFactor/100)*1380,(fullImagesFactor/100)*990]],\r\n width: (fullImagesFactor/100)*240,\r\n height: (fullImagesFactor/100)*300\r\n };\r\n }\r\n\r\n switch (zIndex) {\r\n case layouts[currentLayout].Floor:\r\n return {\r\n polygonArray: [[0,(fullImagesFactor/100)*750],[(fullImagesFactor/100)*1620,(fullImagesFactor/100)*750],[(fullImagesFactor/100)*1620,(fullImagesFactor/100)*1080],[0,(fullImagesFactor/100)*1080]],\r\n width: (fullImagesFactor/100)*1620,\r\n height: (fullImagesFactor/100)*330\r\n };\r\n\r\n //*** Walls ***//\r\n case layouts[currentLayout].Walls.LeftWall:\r\n return {\r\n polygonArray: [[0,(fullImagesFactor/100)*100],[(fullImagesFactor/100)*740,(fullImagesFactor/100)*100],[(fullImagesFactor/100)*740,(fullImagesFactor/100)*900],[0,(fullImagesFactor/100)*900]],\r\n width: (fullImagesFactor/100)*740,\r\n height: (fullImagesFactor/100)*800\r\n };\r\n case layouts[currentLayout].Walls.LeftWallBacksplash:\r\n return {\r\n polygonArray: [[(fullImagesFactor/100)*210,(fullImagesFactor/100)*500],[(fullImagesFactor/100)*630,(fullImagesFactor/100)*500],[(fullImagesFactor/100)*630,(fullImagesFactor/100)*590],[(fullImagesFactor/100)*210,(fullImagesFactor/100)*590]],\r\n };\r\n case layouts[currentLayout].Walls.RightWall:\r\n return {\r\n polygonArray: [[(fullImagesFactor/100)*600,(fullImagesFactor/100)*45],[(fullImagesFactor/100)*1620,(fullImagesFactor/100)*45],[(fullImagesFactor/100)*1620,(fullImagesFactor/100)*970],[(fullImagesFactor/100)*600,(fullImagesFactor/100)*970]],\r\n width: (fullImagesFactor/100)*1020,\r\n height: (fullImagesFactor/100)*925\r\n };\r\n case layouts[currentLayout].Walls.RightWallBacksplash:\r\n return {\r\n polygonArray: [[(fullImagesFactor/100)*630,(fullImagesFactor/100)*330],[(fullImagesFactor/100)*1620,(fullImagesFactor/100)*200],[(fullImagesFactor/100)*1620,(fullImagesFactor/100)*580],[(fullImagesFactor/100)*630,(fullImagesFactor/100)*580]],\r\n };\r\n case layouts[currentLayout].Walls.Ceiling:\r\n return {\r\n polygonArray: [[0,0],[(fullImagesFactor/100)*1620,0],[(fullImagesFactor/100)*1620,(fullImagesFactor/100)*260],[0,(fullImagesFactor/100)*260]],\r\n width: (fullImagesFactor/100)*1620,\r\n height: (fullImagesFactor/100)*260\r\n };\r\n case layouts[currentLayout].Walls.PopoutWall:\r\n return {\r\n polygonArray: [[(fullImagesFactor/100)*200,(fullImagesFactor/100)*120],[(fullImagesFactor/100)*740,(fullImagesFactor/100)*120],[(fullImagesFactor/100)*740,(fullImagesFactor/100)*880],[(fullImagesFactor/100)*200,(fullImagesFactor/100)*880]],\r\n width: (fullImagesFactor/100)*540,\r\n height: (fullImagesFactor/100)*760\r\n };\r\n case layouts[currentLayout].Walls.Backsplash:\r\n return {\r\n polygonArray: [[0,(fullImagesFactor/100)*200],[(fullImagesFactor/100)*1620,(fullImagesFactor/100)*200],[(fullImagesFactor/100)*1620,(fullImagesFactor/100)*700],[0,(fullImagesFactor/100)*700]],\r\n width: (fullImagesFactor/100)*1620,\r\n height: (fullImagesFactor/100)*500\r\n };\r\n case layouts[currentLayout].Walls.BacksplashLeftWall:\r\n return {\r\n polygonArray: [\r\n [(fullImagesFactor/100)*200,(fullImagesFactor/100)*280],\r\n [(fullImagesFactor/100)*632,(fullImagesFactor/100)*336],\r\n [(fullImagesFactor/100)*632,(fullImagesFactor/100)*600],\r\n [(fullImagesFactor/100)*200,(fullImagesFactor/100)*640]],\r\n };\r\n case layouts[currentLayout].Walls.BacksplashRightWall:\r\n return {\r\n polygonArray: [[(fullImagesFactor/100)*633,(fullImagesFactor/100)*336],[(fullImagesFactor/100)*1620,(fullImagesFactor/100)*210],[(fullImagesFactor/100)*1620,(fullImagesFactor/100)*680],[(fullImagesFactor/100)*633,(fullImagesFactor/100)*600]],\r\n };\r\n\r\n //*** Cabinet ***//\r\n case layouts[currentLayout].Cabinet.BottomCabinet:\r\n return {\r\n polygonArray: [[0,(fullImagesFactor/100)*590],[(fullImagesFactor/100)*1000,(fullImagesFactor/100)*590],[(fullImagesFactor/100)*1000,(fullImagesFactor/100)*860],[0,(fullImagesFactor/100)*860]],\r\n width: (fullImagesFactor/100)*1000,\r\n height: (fullImagesFactor/100)*270\r\n };\r\n case layouts[currentLayout].Cabinet.BottomCabinet2:\r\n return {\r\n polygonArray: [[(fullImagesFactor/100)*1090,(fullImagesFactor/100)*620],[(fullImagesFactor/100)*1620,(fullImagesFactor/100)*620],[(fullImagesFactor/100)*1620,(fullImagesFactor/100)*1080],[(fullImagesFactor/100)*1090,(fullImagesFactor/100)*1080]],\r\n width: (fullImagesFactor/100)*530,\r\n height: (fullImagesFactor/100)*480\r\n };\r\n case layouts[currentLayout].Cabinet.CrownMolding:\r\n return {\r\n polygonArray: [[0,(fullImagesFactor/100)*160],[(fullImagesFactor/100)*1620,(fullImagesFactor/100)*160],[(fullImagesFactor/100)*1620,(fullImagesFactor/100)*350],[0,(fullImagesFactor/100)*350]],\r\n width: (fullImagesFactor/100)*1620,\r\n height: (fullImagesFactor/100)*190\r\n };\r\n case layouts[currentLayout].Cabinet.CrownMolding2:\r\n return {\r\n polygonArray: [\r\n [(fullImagesFactor/100)*900,(fullImagesFactor/100)*110],\r\n [(fullImagesFactor/100)*1620,(fullImagesFactor/100)*110],\r\n [(fullImagesFactor/100)*1620,(fullImagesFactor/100)*280],\r\n [(fullImagesFactor/100)*900,(fullImagesFactor/100)*280]\r\n ],\r\n width: (fullImagesFactor/100)*720,\r\n height: (fullImagesFactor/100)*170\r\n };\r\n case layouts[currentLayout].Cabinet.TopCabinet:\r\n return {\r\n polygonArray: [[0,(fullImagesFactor/100)*180],[(fullImagesFactor/100)*1000,(fullImagesFactor/100)*180],[(fullImagesFactor/100)*1000,(fullImagesFactor/100)*520],[0,(fullImagesFactor/100)*520]],\r\n width: (fullImagesFactor/100)*1000,\r\n height: (fullImagesFactor/100)*340\r\n };\r\n case layouts[currentLayout].Cabinet.TopCabinet2:\r\n return {\r\n polygonArray: [[(fullImagesFactor/100)*910,(fullImagesFactor/100)*130],[(fullImagesFactor/100)*1620,(fullImagesFactor/100)*130],[(fullImagesFactor/100)*1620,(fullImagesFactor/100)*530],[(fullImagesFactor/100)*910,(fullImagesFactor/100)*530]],\r\n width: (fullImagesFactor/100)*710,\r\n height: (fullImagesFactor/100)*400\r\n };\r\n case layouts[currentLayout].Cabinet.Peninsula:\r\n return {\r\n polygonArray: [[(fullImagesFactor/100)*1190,(fullImagesFactor/100)*650],[(fullImagesFactor/100)*1620,(fullImagesFactor/100)*650],[(fullImagesFactor/100)*1620,(fullImagesFactor/100)*1080],[(fullImagesFactor/100)*1620,(fullImagesFactor/100)*1080]],\r\n width: (fullImagesFactor/100)*430,\r\n height: (fullImagesFactor/100)*430\r\n };\r\n case layouts[currentLayout].Cabinet.TopHandle:\r\n return {\r\n polygonArray: [[0,(fullImagesFactor/100)*230],[(fullImagesFactor/100)*990,(fullImagesFactor/100)*230],[(fullImagesFactor/100)*990,(fullImagesFactor/100)*550],[0,(fullImagesFactor/100)*550]],\r\n width: (fullImagesFactor/100)*990,\r\n height: (fullImagesFactor/100)*320\r\n };\r\n case layouts[currentLayout].Cabinet.TopHandle2:\r\n return {\r\n polygonArray: [[(fullImagesFactor/100)*990,(fullImagesFactor/100)*150],[(fullImagesFactor/100)*1620,(fullImagesFactor/100)*150],[(fullImagesFactor/100)*1620,(fullImagesFactor/100)*550],[(fullImagesFactor/100)*990,(fullImagesFactor/100)*550]],\r\n width: (fullImagesFactor/100)*630,\r\n height: (fullImagesFactor/100)*400\r\n };\r\n case layouts[currentLayout].Cabinet.BottomHandle:\r\n return {\r\n polygonArray: [[0,(fullImagesFactor/100)*620],[(fullImagesFactor/100)*910,(fullImagesFactor/100)*620],[(fullImagesFactor/100)*910,(fullImagesFactor/100)*920],[0,(fullImagesFactor/100)*920]],\r\n width: (fullImagesFactor/100)*910,\r\n height: (fullImagesFactor/100)*300\r\n };\r\n case layouts[currentLayout].Cabinet.BottomHandle2:\r\n return {\r\n polygonArray: [[(fullImagesFactor/100)*1100,(fullImagesFactor/100)*670],[(fullImagesFactor/100)*1100,(fullImagesFactor/100)*670],[(fullImagesFactor/100)*1620,(fullImagesFactor/100)*1000],[(fullImagesFactor/100)*1160,(fullImagesFactor/100)*1000]],\r\n width: (fullImagesFactor/100)*520,\r\n height: (fullImagesFactor/100)*330\r\n };\r\n\r\n //*** Appliances ***//\r\n case layouts[currentLayout].Appliances.Dishwasher:\r\n return {\r\n polygonArray: [[(fullImagesFactor/100)*650,(fullImagesFactor/100)*610],[(fullImagesFactor/100)*840,(fullImagesFactor/100)*840],[(fullImagesFactor/100)*840,(fullImagesFactor/100)*840],[(fullImagesFactor/100)*650,(fullImagesFactor/100)*610]],\r\n width: (fullImagesFactor/100)*190,\r\n height: (fullImagesFactor/100)*230\r\n };\r\n case layouts[currentLayout].Appliances.Fridge:\r\n return {\r\n polygonArray: [[0,(fullImagesFactor/100)*400],[(fullImagesFactor/100)*880,(fullImagesFactor/100)*400],[(fullImagesFactor/100)*880,(fullImagesFactor/100)*1080],[0,(fullImagesFactor/100)*1080]],\r\n width: (fullImagesFactor/100)*880,\r\n height: (fullImagesFactor/100)*680\r\n };\r\n case layouts[currentLayout].Appliances.Hood:\r\n return {\r\n polygonArray: [[(fullImagesFactor/100)*870,(fullImagesFactor/100)*130],[(fullImagesFactor/100)*1190,(fullImagesFactor/100)*130],[(fullImagesFactor/100)*1190,(fullImagesFactor/100)*520],[(fullImagesFactor/100)*870,(fullImagesFactor/100)*520]],\r\n width: (fullImagesFactor/100)*320,\r\n height: (fullImagesFactor/100)*390\r\n };\r\n case layouts[currentLayout].Appliances.Microwave:\r\n return {\r\n polygonArray: [[(fullImagesFactor/100)*890,(fullImagesFactor/100)*370],[(fullImagesFactor/100)*1130,(fullImagesFactor/100)*370],[(fullImagesFactor/100)*1130,(fullImagesFactor/100)*520],[(fullImagesFactor/100)*890,(fullImagesFactor/100)*520]],\r\n width: (fullImagesFactor/100)*240,\r\n height: (fullImagesFactor/100)*150\r\n };\r\n case layouts[currentLayout].Appliances.Range:\r\n return {\r\n polygonArray: [[(fullImagesFactor/100)*890,(fullImagesFactor/100)*550],[(fullImagesFactor/100)*1200,(fullImagesFactor/100)*550],[(fullImagesFactor/100)*1200,(fullImagesFactor/100)*910],[(fullImagesFactor/100)*890,(fullImagesFactor/100)*910]],\r\n width: (fullImagesFactor/100)*310,\r\n height: (fullImagesFactor/100)*360\r\n };\r\n\r\n //*** CountertopGroup ***//\r\n case layouts[currentLayout].CountertopGroup.Countertop:\r\n return {\r\n polygonArray: [[0,(fullImagesFactor/100)*570],[(fullImagesFactor/100)*1020,(fullImagesFactor/100)*570],[(fullImagesFactor/100)*1020,(fullImagesFactor/100)*650],[0,(fullImagesFactor/100)*650]],\r\n width: (fullImagesFactor/100)*1020,\r\n height: (fullImagesFactor/100)*80\r\n };\r\n case layouts[currentLayout].CountertopGroup.Countertop2:\r\n return {\r\n polygonArray: [[(fullImagesFactor/100)*1090,(fullImagesFactor/100)*630],[(fullImagesFactor/100)*1620,(fullImagesFactor/100)*630],[(fullImagesFactor/100)*1620,(fullImagesFactor/100)*1070],[(fullImagesFactor/100)*1090,(fullImagesFactor/100)*1070]],\r\n width: (fullImagesFactor/100)*530,\r\n height: (fullImagesFactor/100)*440\r\n };\r\n case layouts[currentLayout].CountertopGroup.Sink:\r\n return {\r\n polygonArray: [[(fullImagesFactor/100)*1240,(fullImagesFactor/100)*630],[(fullImagesFactor/100)*1620,(fullImagesFactor/100)*630],[(fullImagesFactor/100)*1620,(fullImagesFactor/100)*720],[(fullImagesFactor/100)*1240,(fullImagesFactor/100)*720]],\r\n width: (fullImagesFactor/100)*380,\r\n height: (fullImagesFactor/100)*90\r\n };\r\n case layouts[currentLayout].CountertopGroup.Faucet:\r\n return {\r\n polygonArray: [[(fullImagesFactor/100)*1240,(fullImagesFactor/100)*580],[(fullImagesFactor/100)*1620,(fullImagesFactor/100)*580],[(fullImagesFactor/100)*1620,(fullImagesFactor/100)*720],[(fullImagesFactor/100)*1240,(fullImagesFactor/100)*720]],\r\n width: (fullImagesFactor/100)*380,\r\n height: (fullImagesFactor/100)*140\r\n };\r\n case layouts[currentLayout].CountertopGroup.Stovetop:\r\n return {\r\n polygonArray: [[(fullImagesFactor/100)*530,(fullImagesFactor/100)*660],[(fullImagesFactor/100)*920,(fullImagesFactor/100)*660],[(fullImagesFactor/920)*1200,(fullImagesFactor/100)*760],[(fullImagesFactor/100)*530,(fullImagesFactor/100)*760]],\r\n width: (fullImagesFactor/100)*390,\r\n height: (fullImagesFactor/100)*100\r\n };\r\n\r\n //*** CenterIsland ***//\r\n case layouts[currentLayout].CenterIsland.Cabinet:\r\n case layouts[currentLayout].CenterIsland.Handle:\r\n return {\r\n polygonArray: [[(fullImagesFactor/100)*250,(fullImagesFactor/100)*640],[(fullImagesFactor/100)*1160,(fullImagesFactor/100)*640],[(fullImagesFactor/100)*1160,(fullImagesFactor/100)*1080],[(fullImagesFactor/100)*1160,(fullImagesFactor/100)*1080]],\r\n width: (fullImagesFactor/100)*910,\r\n height: (fullImagesFactor/100)*440\r\n };\r\n case layouts[currentLayout].CenterIsland.Countertop:\r\n return {\r\n polygonArray: [[(fullImagesFactor/100)*110,(fullImagesFactor/100)*640],[(fullImagesFactor/100)*1190,(fullImagesFactor/100)*640],[(fullImagesFactor/100)*1190,(fullImagesFactor/100)*1080],[(fullImagesFactor/100)*110,(fullImagesFactor/100)*1080]],\r\n width: (fullImagesFactor/100)*1080,\r\n height: (fullImagesFactor/100)*(fullImagesFactor/100)*440\r\n };\r\n case layouts[currentLayout].CenterIsland.Chairs:\r\n return {\r\n polygonArray: [[(fullImagesFactor/100)*90,(fullImagesFactor/100)*690],[(fullImagesFactor/100)*1160,(fullImagesFactor/100)*690],[(fullImagesFactor/100)*1160,(fullImagesFactor/100)*1080],[(fullImagesFactor/100)*90,(fullImagesFactor/100)*1080]],\r\n width: (fullImagesFactor/100)*1070,\r\n height: (fullImagesFactor/100)*390\r\n };\r\n case layouts[currentLayout].CenterIsland.Sink:\r\n return {\r\n polygonArray: [[(fullImagesFactor/100)*530,(fullImagesFactor/100)*650],[(fullImagesFactor/100)*900,(fullImagesFactor/100)*650],[(fullImagesFactor/100)*900,(fullImagesFactor/100)*750],[(fullImagesFactor/100)*530,(fullImagesFactor/100)*750]],\r\n width: (fullImagesFactor/100)*370,\r\n height: (fullImagesFactor/100)*100\r\n };\r\n case layouts[currentLayout].CenterIsland.Faucet:\r\n return {\r\n polygonArray: [[(fullImagesFactor/100)*530,(fullImagesFactor/100)*550],[(fullImagesFactor/100)*900,(fullImagesFactor/100)*550],[(fullImagesFactor/100)*900,(fullImagesFactor/100)*750],[(fullImagesFactor/100)*530,(fullImagesFactor/100)*750]],\r\n width: (fullImagesFactor/100)*370,\r\n height: (fullImagesFactor/100)*200\r\n };\r\n case layouts[currentLayout].CenterIsland.Stovetop:\r\n return {\r\n polygonArray: [[(fullImagesFactor/100)*530,(fullImagesFactor/100)*660],[(fullImagesFactor/100)*920,(fullImagesFactor/100)*660],[(fullImagesFactor/920)*1200,(fullImagesFactor/100)*760],[(fullImagesFactor/100)*530,(fullImagesFactor/100)*760]],\r\n width: (fullImagesFactor/100)*390,\r\n height: (fullImagesFactor/100)*100\r\n };\r\n case layouts[currentLayout].CenterIsland.Range:\r\n return {\r\n polygonArray: [[(fullImagesFactor/100)*530,(fullImagesFactor/100)*660],[(fullImagesFactor/100)*920,(fullImagesFactor/100)*660],[(fullImagesFactor/920)*1200,(fullImagesFactor/100)*760],[(fullImagesFactor/100)*530,(fullImagesFactor/100)*760]],\r\n width: (fullImagesFactor/100)*390,\r\n height: (fullImagesFactor/100)*100\r\n };\r\n default:\r\n return null\r\n }\r\n};\r\nconst checkForCanvasScale = (canvas, polygonArray) => {\r\n if (canvas && ((canvas.width !== canvas.offsetWidth) || (canvas.height !== canvas.offsetHeight))) {\r\n return polygonArray.map(point => {\r\n point = point.map(dot => Math.round(dot*canvas.offsetWidth/canvas.width));\r\n return point\r\n })\r\n }\r\n return polygonArray\r\n};\r\n\r\nexport default {\r\n layouts,\r\n getMenuByHoveredLayer: (currentLayout, layer, canvas) => {\r\n // console.log('currentLayout', currentLayout);\r\n // console.log('layer', layer);\r\n if ((\r\n (layer.zIndex >= layouts[currentLayout].Cabinet.TopCabinetModules[\"1_1\"])\r\n && (layer.zIndex <= layouts[currentLayout].Cabinet.TopCabinetModules[\"5_64\"])\r\n ) || (\r\n (layer.zIndex >= layouts[currentLayout].Cabinet.TopCabinetModules[\"6_1\"])\r\n && (layer.zIndex <= layouts[currentLayout].Cabinet.TopCabinetModules[\"8_64\"])\r\n )) {\r\n return {\r\n contextMenuPartId: \"top_cabinet\",\r\n module: invert(layouts[currentLayout].Cabinet.TopCabinetModules)[layer.zIndex],\r\n };\r\n } else if ((\r\n (layer.zIndex >= layouts[currentLayout].Cabinet.BottomCabinetModules[\"1_1\"])\r\n && (layer.zIndex <= layouts[currentLayout].Cabinet.BottomCabinetModules[\"6_64\"])\r\n ) || (\r\n (layer.zIndex >= layouts[currentLayout].Cabinet.BottomCabinetModules[\"7_1\"])\r\n && (layer.zIndex <= layouts[currentLayout].Cabinet.BottomCabinetModules[\"8_64\"])\r\n )) {\r\n return {\r\n contextMenuPartId: \"bottom_cabinet\",\r\n module: invert(layouts[currentLayout].Cabinet.BottomCabinetModules)[layer.zIndex],\r\n };\r\n }\r\n switch (layer.zIndex) {\r\n case layouts[currentLayout].Floor:\r\n return {\r\n parent: \"Floor\",\r\n child: \"Floor\"\r\n };\r\n case layouts[currentLayout].Walls.LeftWall: {\r\n let leftWallBacksplash = getLayerDimensions(layouts[currentLayout].Walls.LeftWallBacksplash, currentLayout);\r\n leftWallBacksplash.polygonArray = checkForCanvasScale(canvas, leftWallBacksplash.polygonArray);\r\n if (pnpoly(leftWallBacksplash.polygonArray, document.hoveredMousePos)) {\r\n return {\r\n contextMenuPartId: \"left_wall_custom\"\r\n };\r\n } else {\r\n return {\r\n parent: \"Walls\",\r\n child: \"Left Wall\"\r\n };\r\n }\r\n }\r\n case layouts[currentLayout].Walls.RightWall: {\r\n let rightWallBacksplash = getLayerDimensions(layouts[currentLayout].Walls.RightWallBacksplash, currentLayout);\r\n rightWallBacksplash.polygonArray = checkForCanvasScale(canvas, rightWallBacksplash.polygonArray);\r\n if (pnpoly(rightWallBacksplash.polygonArray, document.hoveredMousePos)) {\r\n return {\r\n contextMenuPartId: \"right_wall_custom\"\r\n };\r\n } else {\r\n return {\r\n parent: \"Walls\",\r\n child: \"Right Wall\"\r\n };\r\n }\r\n }\r\n case layouts[currentLayout].Walls.PopoutWall:\r\n return {\r\n parent: \"Walls\",\r\n child: \"Popout Wall\"\r\n };\r\n case layouts[currentLayout].Walls.Backsplash: {\r\n let backsplashLeftWall = getLayerDimensions(layouts[currentLayout].Walls.BacksplashLeftWall, currentLayout);\r\n let backsplashRightWall = getLayerDimensions(layouts[currentLayout].Walls.BacksplashRightWall, currentLayout);\r\n backsplashLeftWall.polygonArray = checkForCanvasScale(canvas, backsplashLeftWall.polygonArray);\r\n backsplashRightWall.polygonArray = checkForCanvasScale(canvas, backsplashRightWall.polygonArray);\r\n if (pnpoly(backsplashLeftWall.polygonArray, document.hoveredMousePos)) {\r\n return {\r\n contextMenuPartId: \"backsplash_custom_left\"\r\n };\r\n } else if (pnpoly(backsplashRightWall.polygonArray, document.hoveredMousePos)) {\r\n return {\r\n contextMenuPartId: \"backsplash_custom_right\"\r\n };\r\n } else {\r\n return {\r\n contextMenuPartId: \"backsplash_custom\"\r\n };\r\n }\r\n }\r\n case layouts[currentLayout].Walls.Ceiling:\r\n return {\r\n parent: \"Walls\",\r\n child: \"Ceiling\"\r\n };\r\n case layouts[currentLayout].Cabinet.TopCabinet:\r\n case layouts[currentLayout].Cabinet.TopCabinet2:\r\n return {\r\n parent: \"Cabinet\",\r\n child: \"Top Cabinet\"\r\n };\r\n case layouts[currentLayout].Cabinet.BottomCabinet:\r\n case layouts[currentLayout].Cabinet.BottomCabinet2:\r\n case layouts[currentLayout].Cabinet.Peninsula:\r\n return {\r\n parent: \"Cabinet\",\r\n child: \"Bottom Cabinet\"\r\n };\r\n case layouts[currentLayout].Cabinet.CrownMolding:\r\n case layouts[currentLayout].Cabinet.CrownMolding2:\r\n return {\r\n parent: \"Cabinet\",\r\n child: \"Crown Molding\"\r\n };\r\n case layouts[currentLayout].Cabinet.TopHandle:\r\n case layouts[currentLayout].Cabinet.TopHandle2:\r\n return {\r\n parent: \"Cabinet\",\r\n child: \"Top Handle\"\r\n };\r\n case layouts[currentLayout].Cabinet.BottomHandle:\r\n case layouts[currentLayout].Cabinet.BottomHandle2:\r\n return {\r\n parent: \"Cabinet\",\r\n child: \"Bottom Handle\"\r\n };\r\n case layouts[currentLayout].Appliances.Range:\r\n return {\r\n parent: \"Appliance\",\r\n child: \"Range\"\r\n };\r\n case layouts[currentLayout].Appliances.Fridge:\r\n return {\r\n parent: \"Appliance\",\r\n child: \"Fridge\"\r\n };\r\n case layouts[currentLayout].Appliances.Hood:\r\n return {\r\n parent: \"Appliance\",\r\n child: \"Hood\"\r\n };\r\n case layouts[currentLayout].Appliances.Microwave:\r\n return {\r\n parent: \"Appliance\",\r\n child: \"Microwave\"\r\n };\r\n case layouts[currentLayout].Appliances.Dishwasher:\r\n return {\r\n parent: \"Appliance\",\r\n child: \"Dishwasher\"\r\n };\r\n case layouts[currentLayout].CountertopGroup.Edge:\r\n return {\r\n parent: \"Countertop\",\r\n child: \"Edge\"\r\n };\r\n // case layouts[currentLayout].CountertopGroup.Countertop2:\r\n case layouts[currentLayout].CountertopGroup.Sink:\r\n case layouts[currentLayout].CountertopGroup.Faucet:\r\n case layouts[currentLayout].CountertopGroup.Countertop:\r\n case layouts[currentLayout].CountertopGroup.Countertop2:\r\n return {\r\n contextMenuPartId: \"countertop_group_custom\"\r\n };\r\n case layouts[currentLayout].CountertopGroup.Stovetop:\r\n return {\r\n parent: \"Countertop\",\r\n child: \"Stovetop\"\r\n };\r\n case layouts[currentLayout].CenterIsland.Chairs:\r\n return {\r\n parent: \"Center Island\",\r\n child: \"Chairs\"\r\n };\r\n case layouts[currentLayout].CenterIsland.Cabinet:\r\n return {\r\n parent: \"Center Island\",\r\n child: \"Cabinet\"\r\n };\r\n case layouts[currentLayout].CenterIsland.Edge:\r\n return {\r\n parent: \"Center Island\",\r\n child: \"Edge\"\r\n };\r\n case layouts[currentLayout].CenterIsland.Faucet:\r\n case layouts[currentLayout].CenterIsland.Sink:\r\n case layouts[currentLayout].CenterIsland.Stovetop:\r\n case layouts[currentLayout].CenterIsland.Range:\r\n case layouts[currentLayout].CenterIsland.Countertop:\r\n return {\r\n contextMenuPartId: \"center_island_custom\"\r\n };\r\n case layouts[currentLayout].CenterIsland.Handle:\r\n return {\r\n parent: \"Center Island\",\r\n child: \"Handle\"\r\n };\r\n default:\r\n return \"\"\r\n }\r\n },\r\n getLayerDimensions\r\n}\r\n\r\n\r\n","import {Part} from \"../part\";\r\nimport {PartMenuType} from \"../../../visComponents/constants\";\r\nimport {centerIslandThumbnail} from \"../assets\";\r\nimport DesignNavigationItem from \"../../../visComponents/designNavigationItem\";\r\nimport {PLACEMENTS} from \"../constants\";\r\n\r\nimport Cabinet from \"../subparts/centerIsland/cabinet\";\r\nimport Faucet from \"../subparts/centerIsland/faucet\";\r\nimport Sink from \"../subparts/centerIsland/sink\";\r\nimport Edge from \"../subparts/centerIsland/edge\";\r\nimport Countertop from \"../subparts/centerIsland/countertop\";\r\nimport IslandHood from \"../subparts/centerIsland/islandHood\";\r\nimport Stovetop from \"../subparts/centerIsland/stovetop\";\r\nimport Pendants from \"../subparts/centerIsland/pendants\";\r\nimport RightIsland from \"../subparts/centerIsland/rightIsland\";\r\nimport {setActiveFeaturesBeforeAllWalls} from \"../../../look/lookNavigation/lookNavigationFunctions\";\r\nimport {CABINET_GROUP, COUNTERTOP_GROUP} from \"../../../kvComponent/core/constants\";\r\n\r\n// () = ()\r\n\r\nexport default class CenterIsland extends Part {\r\n static id = 'CenterIsland';\r\n constructor() {\r\n super(true, false, PartMenuType.Complex);\r\n\r\n this.menuType = PartMenuType.Complex;\r\n this.partName = 'CenterIsland';\r\n this.partThumbnail = centerIslandThumbnail;\r\n this.translateId = \"visualizer.kitchen.center_island\";\r\n\r\n // related items\r\n this.cabinet = null;\r\n this.countertop = null;\r\n this.faucet = null;\r\n this.sink = null;\r\n this.edge = null;\r\n this.islandHood = null;\r\n this.relatedGroupNames = [\"Center Island\", \"Center Island Countertop\", \"Faucet\", \"Sink\", \"Edge Profile\",\r\n \"Island Hood\", \"Stovetop\", \"Pendants\", \"Right Island\"];\r\n }\r\n\r\n load(dbFeature, loadFeature = true) {\r\n let relatedItemName = \"\",\r\n shouldLoadInDifferentGroups = false,\r\n RelatedItemClass = null;\r\n switch (dbFeature.groupName) {\r\n case \"Center Island\":\r\n case \"Cabinets Center Island\":\r\n case \"Center Island Cabinet\":\r\n relatedItemName = \"cabinet\";\r\n RelatedItemClass = Cabinet;\r\n break;\r\n case \"Center Island Countertop\":\r\n case \"Countertop Center Island\":\r\n relatedItemName = \"countertop\";\r\n RelatedItemClass = Countertop;\r\n break;\r\n case \"Faucet\":\r\n if (loadFeature && ((dbFeature.metaData[\"Placement\"] && dbFeature.metaData[\"Placement\"].includes(PLACEMENTS.Island)) || (!dbFeature.metaData[\"Placement\"] && !dbFeature.s3Bindings))) {\r\n if (!dbFeature.metaData[\"Placement\"]) {\r\n shouldLoadInDifferentGroups = true;\r\n }\r\n relatedItemName = \"faucet\";\r\n RelatedItemClass = Faucet;\r\n }\r\n break;\r\n case \"Sink\":\r\n if (loadFeature && ((dbFeature.metaData[\"Placement\"] && dbFeature.metaData[\"Placement\"].includes(PLACEMENTS.Island)) || (!dbFeature.metaData[\"Placement\"] && !dbFeature.s3Bindings))) {\r\n if (!dbFeature.metaData[\"Placement\"]) {\r\n shouldLoadInDifferentGroups = true;\r\n }\r\n relatedItemName = \"sink\";\r\n RelatedItemClass = Sink;\r\n }\r\n break;\r\n case \"Edge Profile\":\r\n case \"Edge\":\r\n shouldLoadInDifferentGroups = true;\r\n relatedItemName = \"edge\";\r\n RelatedItemClass = Edge;\r\n break;\r\n case \"Island hood\":\r\n case \"Island Hood\":\r\n relatedItemName = \"islandHood\";\r\n RelatedItemClass = IslandHood;\r\n break;\r\n case \"Island Stove\":\r\n relatedItemName = \"stovetop\";\r\n RelatedItemClass = Stovetop;\r\n break;\r\n case \"Pendants\":\r\n relatedItemName = \"pendants\";\r\n RelatedItemClass = Pendants;\r\n break;\r\n case \"Right Island\":\r\n relatedItemName = \"rightIsland\";\r\n RelatedItemClass = RightIsland;\r\n break;\r\n }\r\n return this.loadCommon(relatedItemName, RelatedItemClass, dbFeature, loadFeature, shouldLoadInDifferentGroups)\r\n }\r\n\r\n isSubTypeWithItems() {\r\n return false;\r\n }\r\n\r\n subParts(withHidden = true) {\r\n return this.relatedItems\r\n .filter(item => {\r\n if (item.partId === \"center_island_handle\") {\r\n item.visible = item.features.filter(f => f.matchesMetaForArrayOfConditions(item.getArrayOfConditions())).length;\r\n }\r\n return this.filterRelatedItem(item, withHidden)\r\n })\r\n .map(_ => new DesignNavigationItem(_.partName, _));\r\n }\r\n\r\n handleSubPartClick() {\r\n\r\n }\r\n\r\n getCabinetType() {\r\n return this.cabinet && this.cabinet.activeFeature\r\n ? this.cabinet.activeFeature.dbFeature.metaData[\"Cabinet\"]\r\n : \"\"\r\n }\r\n\r\n getChairType() {\r\n return this.chairs && this.chairs.activeFeature\r\n ? this.chairs.activeFeature.dbFeature.metaData[\"Chair\"]\r\n : \"\"\r\n }\r\n\r\n setSpecificRules() {\r\n if (this.edge) {\r\n this.edge.setEdgeNotInVisualizer()\r\n }\r\n }\r\n\r\n setPrevioslySelected(featureGroup) {\r\n setActiveFeaturesBeforeAllWalls(featureGroup.partId === \"center_island_cabinet\" ? CABINET_GROUP : COUNTERTOP_GROUP);\r\n }\r\n\r\n}\r\n","import React, {useEffect, useState} from \"react\";\r\nimport {connect} from \"react-redux\";\r\nimport PropTypes from \"prop-types\";\r\nimport NavItemPositionModalButton from \"./navItemPositionModalButton\";\r\nimport {toggleNavItemPositionModal} from \"../../../actions/navigationFunctions\";\r\nimport {CORNER_SHELVES_POSITIONS, PAN_POSITIONS, SIDE_POSITIONS} from \"../../bvSceneComponent/core/constants\";\r\n// import {SLAT_WALL_POSITIONS} from \"../../commonVisualizer/core/constants\";\r\nimport {getCurrentLayout} from \"../../appLayout\";\r\nimport {featureInterface} from \"../../../interfaces/featureInterface\";\r\nimport NavItemPositionModalSlatWall from \"./navItemPositionModalSlatWall\";\r\n// import NavItemPositionModalSlatWallButton from \"./navItemPositionModalSlatWallButton\";\r\n\r\nconst disallowBlurClasses = [\".nav-pos\", \".feature\", \".menu-list__item\", \".m-feature\"];\r\n\r\nconst getPositionsArray = (partId) => {\r\n switch (partId) {\r\n case \"corner_shelf\":\r\n return CORNER_SHELVES_POSITIONS\r\n // case \"slat_wall\":\r\n // return SLAT_WALL_POSITIONS\r\n case \"shower_pan_combo\":\r\n case \"shower_fixture\":\r\n case \"grab_bar\":\r\n case \"soap_dish\":\r\n return PAN_POSITIONS\r\n default:\r\n return document.kvConfig.visualizerType === \"bvState\" ? SIDE_POSITIONS : [\"L\",\"R\", \"C\"]\r\n // return [\"L\",\"R\", \"C\"]\r\n }\r\n}\r\n\r\nconst NavItemPositionModal = (props) => {\r\n\r\n const {navItemPositionModal, toggleNavItemPositionModal, activePartId, windowWidth, windowHeight, isWizard,\r\n activeFeature} = props;\r\n const [parent, setParent] = useState(null);\r\n const [checkboxesUpdated, setCheckboxesUpdated] = useState(true);\r\n const left = navItemPositionModal.popupPosition.left;\r\n const top = navItemPositionModal.popupPosition.top;\r\n\r\n const contextMenuBlur = (e) => {\r\n if (!disallowBlurClasses.some(cls => e.target.closest(cls)) && navItemPositionModal.popupOpened) {\r\n toggleNavItemPositionModal({\r\n popupOpened: false,\r\n activePartId: \"\"\r\n })\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n document.addEventListener('click', contextMenuBlur);\r\n return () => {\r\n document.removeEventListener('click', contextMenuBlur)\r\n }\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [navItemPositionModal]);\r\n\r\n useEffect(() => {\r\n const layout = getCurrentLayout();\r\n setParent(layout.getFeatureGroupByPartId(activePartId))\r\n }, [activePartId]);\r\n\r\n const updateCheckboxes = () => {\r\n setCheckboxesUpdated(!checkboxesUpdated);\r\n };\r\n\r\n useEffect(() => {\r\n updateCheckboxes();\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [left, top, activePartId]);\r\n\r\n if (!navItemPositionModal.popupOpened || !parent) { // added !parent because the buttons were transitioning the modal width after the parent is set\r\n return null\r\n }\r\n\r\n const isMobile = windowWidth < 991;\r\n const maxRight = left > windowWidth - 200;\r\n const fixedTop = top > (windowHeight - 130) ? windowHeight - 130 : top;\r\n //\r\n // console.log(\"windowHeight\", windowHeight);\r\n // console.log(\"top\", top);\r\n // console.log(\"fixedTop\", fixedTop);\r\n\r\n const styles = isMobile ? {\r\n left: maxRight ? \"auto\" : left + \"px\",\r\n top: fixedTop + \"px\",\r\n right: maxRight ? 0 : \"auto\"\r\n } : {\r\n transform: `translate(${maxRight ? left - 200 : left}px, ${fixedTop}px)`,\r\n }\r\n\r\n const triangleStyles = isMobile ? {\r\n left: left + \"px\",\r\n top: fixedTop + \"px\",\r\n position: \"fixed\",\r\n marginTop: 10,\r\n } : maxRight ? {\r\n left: \"auto\",\r\n right: \"40px\"\r\n } : {}\r\n\r\n const isShelf = activePartId === \"corner_shelf\";\r\n const isSlatWall = activePartId === \"slat_wall\";\r\n\r\n if (isSlatWall) {\r\n return 3 ? \" nav-pos--shelf\" : \"\")\r\n + (positionsArray.length === 3 ? \" nav-pos--three\" : \"\") + (isWizard ? \" nav-pos--wizard\" : \"\")}\r\n style={styles}>\r\n \r\n
\r\n )\r\n};\r\n\r\nNavItemPositionModal.propTypes = {\r\n // feature: PropTypes.object.isRequired\r\n activeFeature: PropTypes.shape(featureInterface),\r\n isWizard: PropTypes.bool\r\n}\r\n\r\nconst mapStateToProps = (store, ownProps) => {\r\n const {windowHeight, windowWidth} = store.serverState;\r\n return {\r\n navItemPositionModal: store.navigationState.navItemPositionModal,\r\n activeFeature: ownProps.activeFeature || store.selectionState.activeFeature,\r\n activePartId: store.navigationState.navItemPositionModal.activePartId,\r\n windowHeight,\r\n windowWidth,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n toggleNavItemPositionModal\r\n};\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(NavItemPositionModal)\r\n","import {getQuotePriceWithTaxes, getTotalPrice, toFixedFeatureCost} from \"./misc/helpers\";\r\nimport store from \"./store\";\r\nimport {getAllFeatureFilters, getFilterGroupValue} from \"./misc/utils\";\r\nimport {filterCartItems} from \"./bvcomponents/look/lookNavigation/lookFunctions2\";\r\n\r\n\r\nexport const getAnalyticsEcommerceItem = (feature, quantity = 1, index = 0) => {\r\n if (!feature) {\r\n return false\r\n }\r\n const {fabricatorState, filterState} = store.getState();\r\n const {filterGroups} = filterState;\r\n\r\n let item_brand = \"\";\r\n const manufacturerFilterGroup = filterGroups.find(filterGroup => filterGroup.name.trim() === \"Manufacturer\");\r\n if (manufacturerFilterGroup) {\r\n const featureFilters = getAllFeatureFilters(feature);\r\n if (featureFilters && Array.isArray(featureFilters[manufacturerFilterGroup.id]) && featureFilters[manufacturerFilterGroup.id].length) {\r\n const filterValueObject = getFilterGroupValue(featureFilters[manufacturerFilterGroup.id][0], manufacturerFilterGroup)\r\n if (filterValueObject) {\r\n item_brand = filterValueObject.displayText;\r\n }\r\n }\r\n }\r\n\r\n const featureGroup = feature.getParent();\r\n const itemQuantity = Number.isInteger(quantity) ? quantity : 1;\r\n\r\n return {\r\n item_id: feature.dbFeature.sku, // \"SKU_12345\"\r\n item_name: feature.getCustomFullDisplayName(), // \"Stan and Friends Tee\",\r\n affiliation: fabricatorState.companyName || \"\", // \"Google Merchandise Store\",\r\n coupon: \"\", // \"SUMMER_FUN\", // we never have any\r\n discount: 0.00, // 2.22 // we are not using them yet\r\n index,\r\n item_brand, // \"Google\", // Manufacturer filter\r\n item_category: feature.dbFeature.lixilProductCategory || \"\", // \"Apparel\",\r\n item_category2: feature.dbFeature.lixilProductSubCategory || \"\", // \"Adult\",\r\n item_category3: feature.getCollectionName(filterGroups), // \"Shirts\",\r\n item_category4: \"\", // \"Crew\",\r\n item_category5: \"\", // \"Short sleeve\",\r\n item_list_id: feature.partId, // \"related_products\",\r\n item_list_name: featureGroup.dbName || featureGroup.partName || \"\", //\"Related Products\",\r\n item_variant: feature.getColorName(filterGroups), // \"green\",\r\n location_id: \"\", // \"ChIJIQBpAG2ahYAR_6128GcTUEo\",\r\n price: +toFixedFeatureCost(feature, itemQuantity),\r\n quantity: itemQuantity\r\n }\r\n}\r\n\r\nexport const getAnalyticsEcommerceValues = (cartItemsToCount) => {\r\n const {cartState, fabricatorState} = store.getState();\r\n const cartItems = cartItemsToCount || cartState.cartItems;\r\n const fabricatorSettings = fabricatorState.settings;\r\n\r\n const cartItemsToInclude = filterCartItems(cartItems);\r\n const totalPrice = getTotalPrice(null, false, cartItemsToInclude);\r\n\r\n const tax = totalPrice.priceTaxes.length\r\n ? totalPrice.priceTaxes.reduce((acc, tax) => acc + tax.materialTax, 0)\r\n : totalPrice.materialTaxes\r\n\r\n return {\r\n currency: fabricatorSettings.currency,\r\n value: getQuotePriceWithTaxes(totalPrice),\r\n items: cartItemsToInclude.map((cartItem, cartItemIndex) => {\r\n return getAnalyticsEcommerceItem(cartItem.cartFeature, cartItem.quantity, cartItemIndex)\r\n }),\r\n tax: tax || 0,\r\n shipping: totalPrice.totalDeliveryCost || 0,\r\n }\r\n}\r\n","import React from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport {FormattedMessage, injectIntl, FormattedHTMLMessage} from \"react-intl\";\r\nimport {withRouter} from \"react-router-dom\";\r\nimport PropTypes from \"prop-types\";\r\n\r\nimport IconButton from \"@mui/material/IconButton\";\r\nimport CloseIcon from \"@mui/icons-material/Close\";\r\n\r\nimport LookListContentHeaderRightSide from \"../../list/lookListContentHeaderRightSide\";\r\nimport {setLookOpened, setLookPageOpened} from \"../../../../actions/lookFunctions\";\r\nimport {ROUTES} from \"../../../../routes\";\r\nimport GroheCartStepper from \"./groheCartStepper\";\r\n\r\nconst GroheCartHeaderCommon = (props) => {\r\n\r\n const {title, subTitle, afterTitle, withSave, intl, history, location, isMobile, setLookPageOpened, setLookOpened,\r\n className, subTitleValues} = props;\r\n\r\n const closeCartClick = () => {\r\n setLookPageOpened(\"\");\r\n setLookOpened(null);\r\n history.push(ROUTES.home);\r\n }\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n {isShelf && (positionsArray.length > 3) ? (\r\n {isShelf ? \"Left\" : \"Side\"}
\r\n\r\n {positionsArray.slice(0, 3).map((shelf, shelfIndex) => {\r\n return \r\n })}\r\n
\r\n \r\n
\r\n ) : null}\r\n Right
\r\n\r\n {positionsArray.slice(3, 6).map((shelf, shelfIndex) => {\r\n return \r\n })}\r\n
\r\n \r\n {isMobile ? (\r\n
\r\n \r\n \r\n \r\n
\r\n ) : null}\r\n \r\n \r\n
\r\n {subTitle ? (\r\n \r\n
\r\n ) : null}\r\n
\r\n {location && (location.pathname !== ROUTES.cartSuccess) ? (\r\n \r\n {afterTitle}\r\n
\r\n {subTitle ? (\r\n \r\n \r\n
\r\n ) : null}\r\n \r\n \r\n {withSave ? null :
\r\n ) : null}\r\n \r\n {this.state.points.map((point, index) => {\r\n const pointResponsive = {\r\n left: point.left * (this.state.dimensions.width / this.props.canvasDimensions.width),\r\n top: point.top * (this.state.dimensions.height / this.props.canvasDimensions.height),\r\n };\r\n return \r\n })}\r\n
\r\n ) : null\r\n }\r\n}\r\n\r\nconst mapStateToProps = (store) => {\r\n const {canvasDimensions} = store.bathroomVisualizerState;\r\n return {\r\n canvasDimensions,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {};\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(DemoPoints)\r\n","import React from \"react\";\r\n\r\nimport Misc from './../../misc/misc';\r\nimport {getMousePos, requestAnimFrame, isTouchDevice} from \"../../misc/utils\";\r\nimport {isIE} from \"../../misc/helpers\";\r\nimport {loaderDisable} from \"../ui/loaderView\";\r\nimport enhanceCanvas from \"./canvasEnhancements\";\r\n// import {UseFullSizeImages} from \"../../config\";\r\nimport {getBackgroundLayers} from \"../../misc/getCanvasImageFromLayout\";\r\nimport ImageCanvasCommon from \"./imageCanvasCommon\";\r\n\r\n// import { getHoverZonesForPreset, getHoveringZone, hoverImages } from \"./imageCanvasTouchZones\";\r\n\r\nexport default class ImageCanvasCommonNew extends ImageCanvasCommon {\r\n\r\n finishDraw = (images, layers, alreadyRenderedImages, errorImages, callback) => {\r\n clearTimeout(this.id);\r\n this.id = 0;\r\n let copyImages = null;\r\n\r\n const {width, height} = this.props;\r\n\r\n // const fullImagesFactor = UseFullSizeImages ? 100 : 54;\r\n\r\n if (this.props.useMouseHovering && (this.shouldUpdateGreenZone || !this.state.layersHoverings.length)) {\r\n copyImages = [...images];\r\n }\r\n\r\n const backgroundLayers = getBackgroundLayers(layers, null, true);\r\n\r\n // console.log(\"layers\", layers);\r\n\r\n if (backgroundLayers.length) { // draw backgrounds first\r\n this.backCtxBg.clearRect(0, 0, width, height); // clear previous\r\n\r\n images.forEach((imageObject) => {\r\n if (imageObject.src.includes(\"data:image\") || errorImages.includes(imageObject.src)) {\r\n return\r\n }\r\n const layer = backgroundLayers.find(layer => layer.image === imageObject.src);\r\n if (layer) {\r\n this.drawImage(layer, imageObject, this.backCtxBg, width, height)\r\n }\r\n imageObject = null;\r\n });\r\n enhanceCanvas(this.canvasBg);\r\n this.backCtx.drawImage(this.canvasBg, 0, 0, width, height, 0, 0, width, height);\r\n const greenImage = images.find((imageObject) => imageObject.src.includes(\"data:image\"));\r\n if (greenImage) {\r\n const layer = backgroundLayers.find(layer => layer.image === greenImage.src);\r\n if (layer) {\r\n this.drawImage(layer, greenImage, this.backCtx, width, height)\r\n }\r\n }\r\n }\r\n\r\n images.forEach((loadedImage) => {\r\n if (errorImages.includes(loadedImage.src)) {\r\n return\r\n }\r\n const layer = layers.find(layers => layers.image === loadedImage.src);\r\n if (layer && (!backgroundLayers.length || (layer.zIndex < backgroundLayers[backgroundLayers.length - 1].zIndex))) {\r\n this.drawImage(layer, loadedImage, this.backCtx, width, height)\r\n }\r\n loadedImage = null;\r\n });\r\n\r\n // this.ctx.drawImage(this.backCtx.canvas, 0, 0);\r\n requestAnimFrame(this.ctx.drawImage(this.backCtx.canvas, 0, 0));\r\n\r\n if (this.props.useMouseHovering) {\r\n const isMobile = Misc.isMobile() || isTouchDevice();\r\n if (!isMobile && !isIE() && !this.state.mouseMoveSet && this.canvas) {\r\n this.setOnMouseMove();\r\n }\r\n this.setState({\r\n alreadyRenderedImages\r\n });\r\n if (this.shouldUpdateGreenZone || !this.state.layersHoverings.length) {\r\n this.setLayersHoverings(layers, copyImages, errorImages)\r\n }\r\n }\r\n\r\n if (!window.requestInProcess) {\r\n if (this.props.setShowCanvasLoader) {\r\n this.props.setShowCanvasLoader(false)\r\n } else {\r\n this.props.disableLoader ? this.props.disableLoader() : loaderDisable();\r\n }\r\n }\r\n\r\n // window.t1 = performance.now();\r\n // console.log(\"Call to doSomething took \" + (window.t1 - window.t0) + \" milliseconds.\");\r\n\r\n if (callback) {\r\n callback()\r\n }\r\n };\r\n\r\n getGliaImage = () => {\r\n return (\r\n \r\n ![]()
this.canvasImg = el} alt=\"\" id={this.props.canvasId + \"Img\"}\r\n className=\"canvas-co-image blurred\" />\r\n
\r\n )\r\n };\r\n\r\n nonTransparentPixelHovered = (mousePosArray, layerHovering) => {\r\n const x1 = layerHovering.layer.cropCoords ? layerHovering.layer.cropCoords[0] : layerHovering.layerDimensions.polygonArray[0][0];\r\n const y1 = layerHovering.layer.cropCoords ? layerHovering.layer.cropCoords[1] : layerHovering.layerDimensions.polygonArray[0][1];\r\n return mousePosArray.some(mousePos => {\r\n let pixelHovered = null;\r\n try {\r\n pixelHovered = layerHovering.context2D.getImageData(\r\n (((mousePos.x / this.canvas_scale) / this.state.dimensions.width * this.props.width)) - x1,\r\n (((mousePos.y / this.canvas_scale) / this.state.dimensions.height * this.props.height)) - y1,\r\n 1,\r\n 1,\r\n {willReadFrequently: true}).data[3]\r\n } catch (e) {\r\n console.log(\"can't find hovered pixel\",\r\n layerHovering.context2D,\r\n (((mousePos.x / this.canvas_scale) / this.state.dimensions.width * this.props.width)) - x1,\r\n (((mousePos.y / this.canvas_scale) / this.state.dimensions.height * this.props.height)) - y1\r\n );\r\n }\r\n return pixelHovered > 120\r\n })\r\n }\r\n\r\n setHoveredLayer = (evt) => {\r\n\r\n if (window.touchMove) {\r\n return false\r\n }\r\n\r\n if (this.pinchZoom) {\r\n this.canvas_scale = this.pinchZoom.getScale();\r\n if (this.canvas_scale !== 1) {\r\n return false\r\n }\r\n }\r\n\r\n const {layout} = this.props;\r\n const canvas = this.canvas;\r\n let mousePos = getMousePos(evt, canvas);\r\n let hovered = false;\r\n\r\n // console.log('mousePos', mousePos);\r\n\r\n if (this.pinchZoom) {\r\n this.canvas_scale = this.pinchZoom.getScale();\r\n }\r\n\r\n if (mousePos && (window.innerWidth < 480)) { // rotated version\r\n let temp = mousePos.x;\r\n // noinspection JSSuspiciousNameCombination\r\n mousePos.x = mousePos.y;\r\n mousePos.y = this.canvas.offsetHeight - temp;\r\n // console.log('mousePos2', mousePos);\r\n }\r\n\r\n if (this.state.layersHoverings.length) {\r\n let i = 0;\r\n for (i; i < this.state.layersHoverings.length; i++) {\r\n const layerHovering = this.state.layersHoverings[i];\r\n if ( mousePos\r\n && layerHovering\r\n && layerHovering.layerDimensions\r\n && !this.layerIsExcludedFromHover(layerHovering.layer, layout)\r\n // && pnpoly(layerHovering.layerDimensions.polygonArray, mousePos)\r\n ) {\r\n let mousePosArray = [mousePos];\r\n if (layout.checkMorePointsPartIds && layout.checkMorePointsPartIds.includes(layerHovering.layer.partId)) {\r\n for (let k = 1; k <= 20; k++) {\r\n mousePosArray = [\r\n ...mousePosArray,\r\n {x: mousePos.x - k, y: mousePos.y - k},\r\n {x: mousePos.x + k, y: mousePos.y - k},\r\n {x: mousePos.x - k, y: mousePos.y + k},\r\n {x: mousePos.x + k, y: mousePos.y + k},\r\n {x: mousePos.x - k, y: mousePos.y},\r\n {x: mousePos.x + k, y: mousePos.y},\r\n {x: mousePos.x, y: mousePos.y - k},\r\n {x: mousePos.x, y: mousePos.y + k},\r\n ]\r\n }\r\n }\r\n // console.log(\"checkMorePointsPartIds\", mousePosArray);\r\n if (this.nonTransparentPixelHovered(mousePosArray, layerHovering)) {\r\n hovered = true;\r\n document.hoveredLayer = layerHovering.layer;\r\n document.hoveredMousePos = mousePos;\r\n if (!isIE() && (this.activeGreenZoneIndex !== layerHovering.layer.zIndex)) {\r\n // console.log('layerHovering active = ', layerHovering);\r\n this.activeGreenZoneIndex = layerHovering.layer.zIndex;\r\n this.renderGreenLayer(layerHovering);\r\n }\r\n\r\n break; // break for...of loop\r\n }\r\n }\r\n }\r\n }\r\n\r\n if (!hovered) {\r\n document.hoveredLayer = null;\r\n this.draw(this.state.layers); // reload all layers without hovered\r\n }\r\n\r\n };\r\n\r\n renderGreenLayerByZindex = (zIndex, partId) => {\r\n if (!isIE()) {\r\n const neededLayerHovering = this.state.layersHoverings.find((layerHovering) => {\r\n if (partId) {\r\n return layerHovering.layer.zIndex === zIndex && layerHovering.layer.partId === partId\r\n }\r\n return layerHovering.layer.zIndex === zIndex\r\n });\r\n neededLayerHovering ? this.renderGreenLayer(neededLayerHovering, true) : this.draw(this.state.layers)\r\n }\r\n };\r\n\r\n drawImage = (layer, imageObject, canvasContext, width, height) => {\r\n try {\r\n if (layer.cropCoords) {\r\n let layerWidth = layer.cropCoords[2] - layer.cropCoords[0];\r\n let layerHeight = layer.cropCoords[3] - layer.cropCoords[1];\r\n canvasContext.drawImage(imageObject, 0, 0, layerWidth, layerHeight, layer.cropCoords[0], layer.cropCoords[1], layerWidth, layerHeight);\r\n } else if (layer.layerDimensions) {\r\n const dim = layer.layerDimensions;\r\n // console.log('yep', dim.width, dim.height, dim.polygonArray[0][0], dim.polygonArray[0][1], dim.width, dim.height);\r\n const firstX = layer.isGreenHovering ? 0 : dim.polygonArray[0][0]; // green is already cropped\r\n const firstY = layer.isGreenHovering ? 0 : dim.polygonArray[0][1]; // green is already cropped\r\n canvasContext.drawImage(imageObject, firstX, firstY, dim.width, dim.height, dim.polygonArray[0][0], dim.polygonArray[0][1], dim.width, dim.height);\r\n // } else if (loadedImage.coords) {\r\n // loadedImage.width = loadedImage.width*fullImagesFactor/100;\r\n // loadedImage.height = loadedImage.height*fullImagesFactor/100;\r\n // const max_x = loadedImage.coords.max_x*fullImagesFactor/100;\r\n // const min_x = this.props.width*loadedImage.coords.min_x;\r\n // const min_y = this.props.height*loadedImage.coords.min_y;\r\n // const max_y = loadedImage.coords.max_y*fullImagesFactor/100;\r\n // const width = max_x - min_x;\r\n // const height = max_y - min_y;\r\n // console.log('width', width);\r\n // console.log('height', height);\r\n // console.log('min_x', min_x);\r\n // console.log('min_y', min_y);\r\n // console.log('max_x', max_x);\r\n // console.log('max_y', max_y);\r\n // this.backCtx.drawImage(loadedImage, 0, 0, loadedImage.width, loadedImage.height, min_x, min_y, loadedImage.width, loadedImage.height);\r\n } else {\r\n // imageObject.width = width;\r\n // imageObject.height = height;\r\n canvasContext.drawImage(imageObject, 0, 0, width, height);\r\n }\r\n } catch (e) {\r\n console.log(\"canvas context cant draw image\", imageObject);\r\n }\r\n }\r\n\r\n onMouseDown = (event) => {\r\n if (this.pinchZoom && this.pinchZoom.onMouseDown) {\r\n this.pinchZoom.onMouseDown(event)\r\n }\r\n }\r\n\r\n onMouseMove = (event) => {\r\n if (this.pinchZoom && this.pinchZoom.onMouseMove) {\r\n this.pinchZoom.onMouseMove(event)\r\n }\r\n }\r\n\r\n onMouseUp = (event) => {\r\n if (this.pinchZoom && this.pinchZoom.onMouseUp) {\r\n this.pinchZoom.onMouseUp(event, this.props.lookCanvasClick) // we should be here always // callback is passed to execute after drag n drop\r\n } else if (this.props.lookCanvasClick) {\r\n this.props.lookCanvasClick()\r\n }\r\n }\r\n\r\n render() {\r\n const style = {};\r\n if (this.props.transform) {\r\n style.transform = this.props.transform\r\n }\r\n return (\r\n // \r\n ![]()
this.canvasImg = el} alt=\"\" id={this.props.canvasId + \"Img\"}\r\n className=\"canvas-co-image\" />\r\n };\r\n\r\n updateGliaCanvasImage = () => {\r\n // if (this.pinchZoom && this.pinchZoom.containerScrolled && layers.some(layer => layer.image.includes('data:image/png;base64'))) {\r\n // return\r\n // }\r\n if (this.resizedContext && this.canvas) {\r\n this.resizedCanvas.height = this.canvas.height / 2;\r\n this.resizedCanvas.width = this.canvas.width / 2;\r\n const backgroundCanvas = document.getElementById(\"canvasBackgrounds\");\r\n if (backgroundCanvas) {\r\n this.resizedContext.drawImage(backgroundCanvas, 0, 0, this.resizedCanvas.width, this.resizedCanvas.height);\r\n }\r\n this.resizedContext.drawImage(this.canvas, 0, 0, this.resizedCanvas.width, this.resizedCanvas.height);\r\n this.canvasImg.src = this.resizedCanvas.toDataURL(\"image/jpeg\", 0.7);\r\n }\r\n };\r\n\r\n setOnMouseMove = () => {\r\n this.setState({\r\n mouseMoveSet: true\r\n });\r\n const delayBetweenUpdates = 50;\r\n this.canvas.addEventListener('mousemove', throttle(this.setHoveredLayer, delayBetweenUpdates), false);\r\n };\r\n\r\n setHoveredLayer = (evt) => {\r\n\r\n const {layoutType, layout} = this.props;\r\n const canvas = this.canvas;\r\n let mousePos = getMousePos(evt, canvas);\r\n let hovered = false;\r\n\r\n // console.log('mousePos', mousePos);\r\n\r\n if (Misc.isMobile() || isTouchDevice() || isIE()) {\r\n if (this.props.useTouchZoom) {\r\n $(window).trigger(ActionTypes.GET_CANVAS_SCALE);\r\n }\r\n }\r\n\r\n if (mousePos && (window.innerWidth < 480)) { // rotated version\r\n let temp = mousePos.x;\r\n // noinspection JSSuspiciousNameCombination\r\n mousePos.x = mousePos.y;\r\n mousePos.y = this.canvas.offsetHeight - temp;\r\n // console.log('mousePos2', mousePos);\r\n }\r\n\r\n if (this.state.layersHoverings.length) {\r\n let i = 0;\r\n for (i; i < this.state.layersHoverings.length; i++) {\r\n const layerHovering = this.state.layersHoverings[i];\r\n if ( mousePos\r\n && layerHovering\r\n && layerHovering.layerDimensions\r\n && !this.layerIsExcludedFromHover(layerHovering.layer, layout)\r\n // && pnpoly(layerHovering.layerDimensions.polygonArray, mousePos)\r\n && layerHovering.context2D.getImageData(\r\n (((mousePos.x / this.canvas_scale) / this.state.dimensions.width * this.props.width)) - layerHovering.layerDimensions.polygonArray[0][0],\r\n (((mousePos.y / this.canvas_scale) / this.state.dimensions.height * this.props.height)) - layerHovering.layerDimensions.polygonArray[0][1],\r\n 1,\r\n 1,\r\n {willReadFrequently: true}).data[3] > 120) {\r\n hovered = true;\r\n document.hoveredLayer = layerHovering.layer;\r\n document.hoveredMousePos = mousePos;\r\n if (!isIE() && (this.activeGreenZoneIndex !== layerHovering.layer.zIndex)) {\r\n // console.log('layerHovering active = ', layerHovering);\r\n const windowHover = layerHovering.layer.zIndex === layout.zIndexes[layoutType].Window_Default;\r\n let windowLayerHovering = '';\r\n if (windowHover) {\r\n windowLayerHovering = this.state.layersHoverings.find(layersHovering => {\r\n return layersHovering.layer.zIndex === layout.zIndexes[layoutType].Window_Covering\r\n });\r\n }\r\n this.activeGreenZoneIndex = layerHovering.layer.zIndex;\r\n this.renderGreenLayer(windowHover && windowLayerHovering ? windowLayerHovering : layerHovering);\r\n }\r\n\r\n break; // break for...of loop\r\n }\r\n }\r\n }\r\n\r\n if (!hovered) {\r\n document.hoveredLayer = null;\r\n this.draw(this.state.layers); // reload all layers without hovered\r\n }\r\n\r\n };\r\n\r\n renderGreenLayerByZindex = (zIndex) => {\r\n if (!isIE()) {\r\n const neededLayerHovering = this.state.layersHoverings.find((layerHovering) => {\r\n return layerHovering.layer.zIndex === zIndex\r\n });\r\n neededLayerHovering ? this.renderGreenLayer(neededLayerHovering) : this.draw(this.state.layers)\r\n }\r\n };\r\n\r\n renderGreenLayer = (layerHovering, allLayers = false) => {\r\n let layers = clone(this.state.layers);\r\n\r\n clearTimeout(this.timeout); // timeout for updating layers\r\n\r\n const hoveredLayerIndex = layers.findIndex((layer) => {\r\n if (this.props.layout && this.props.layout.isNewLayout && layerHovering) {\r\n return (layer.zIndex === layerHovering.layer.zIndex) && (layerHovering.layer.partId === layer.partId)\r\n }\r\n return layer.zIndex === layerHovering.layer.zIndex\r\n });\r\n\r\n if (hoveredLayerIndex > -1) {\r\n const layersToRender = checkForLayerParts(this, layers, hoveredLayerIndex, layerHovering, allLayers);\r\n // console.log('layersToRender', layersToRender);\r\n this.draw(layersToRender);\r\n this.timeout = setTimeout(() => { // remove green layer\r\n this.activeGreenZoneIndex = null;\r\n if (this.canvas) {\r\n this.draw(this.state.layers);\r\n }\r\n }, 2000);\r\n }\r\n };\r\n\r\n moveStart = (event) => {\r\n const eventPosition = getEventPosition(event);\r\n const thisX = parseFloat(eventPosition.x).toFixed(2);\r\n const thisY = parseFloat(eventPosition.y).toFixed(2);\r\n setTimeout(() => {\r\n if (window.mobileMenuOpened && !window.imageCanvasScroll && !window.imageCanvasScroll2) {\r\n this.x = thisX;\r\n this.y = thisY;\r\n this.statusSwipe = true;\r\n this.detectedSwipeLeft = false;\r\n this.detectedSwipeRight = false;\r\n this.currentTranslate = getTranslateX(this.canvas);\r\n $('.canvas-text').html(this.currentTranslate);\r\n }\r\n }, 100);\r\n };\r\n\r\n move = (event) => {\r\n\r\n if (this.statusSwipe && window.mobileMenuOpened) {\r\n\r\n window.canvasIsDragging = true;\r\n\r\n const eventPosition = getEventPosition(event);\r\n\r\n let\r\n x = parseFloat(eventPosition.x).toFixed(2),\r\n y = parseFloat(eventPosition.y).toFixed(2),\r\n tX = parseFloat((x - this.x).toFixed(2)),\r\n tY = parseFloat((y - this.y).toFixed(2));\r\n\r\n if (!this.detectedSwipeRight || !this.detectedSwipeLeft) {\r\n if (Math.abs(parseFloat(tX)) >= this.delta) {\r\n if (parseFloat(tX) > this.delta) {\r\n this.detectedSwipeRight = true;\r\n } else if (parseFloat(tX) < -this.delta) {\r\n this.detectedSwipeLeft = true;\r\n }\r\n }\r\n }\r\n\r\n if ((this.detectedSwipeLeft || this.detectedSwipeRight) && Math.abs(tX) > Math.abs(tY)) {\r\n // console.log('Math.abs(tX)', Math.abs(tX));\r\n\r\n const nextPosition = Math.round((this.currentTranslate + tX)*100)/100;\r\n const percentage = this.state.dimensions.width < 680 ? 60 : 50;\r\n // const percentage = 50;\r\n const visibleCanvasWidth = (percentage / 100) * this.state.dimensions.width; // percentage of number\r\n\r\n // console.log('nextPosition', nextPosition);\r\n // $('.canvas-text').html(nextPosition);\r\n // console.log('visibleCanvasWidth', visibleCanvasWidth);\r\n\r\n if (Math.abs(nextPosition) < visibleCanvasWidth && nextPosition < 0) {\r\n const transform2d = 'translateX(' + nextPosition + 'px)';\r\n this.canvas.style.webkitTransform = transform2d;\r\n this.canvas.style.mozTransform = transform2d;\r\n this.canvas.style.msTransform = transform2d;\r\n this.canvas.style.oTransform = transform2d;\r\n this.canvas.style.transform = transform2d;\r\n }\r\n }\r\n }\r\n\r\n };\r\n\r\n moveEnd = () => {\r\n\r\n // let\r\n // x = getEventPosition(e).x,\r\n // tX = parseFloat((x - this.x).toFixed(2));\r\n\r\n this.x = 0;\r\n this.y = 0;\r\n this.statusSwipe = false;\r\n if (this.pinchZoom) {\r\n $(window).trigger(ActionTypes.CANVAS_SCALE_CHANGED, [this.pinchZoom.getScale()]);\r\n }\r\n\r\n if (this.detectedSwipeLeft || this.detectedSwipeRight) {\r\n this.currentTranslate = getTranslateX(this.canvas);\r\n this.detectedSwipeLeft = false;\r\n this.detectedSwipeRight = false;\r\n window.canvasIsDragging = false;\r\n this.pinchZoom.enable();\r\n // $(this.canvas).css({\r\n // transform: `none`\r\n // });\r\n }\r\n };\r\n\r\n render() {\r\n return (\r\n \r\n : null}\r\n \r\n {this.props.bvOpened ? : null}\r\n
\r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = (store) => {\r\n const {contextMenu} = store.lookState;\r\n return {\r\n fabricatorData: store.fabricatorState,\r\n selectedFilters: store.filterState.selectedFilters,\r\n filtersVisible: store.filterState.showFilters,\r\n filterGroups: store.filterState.filterGroups,\r\n bvPresets: store.bathroomVisualizerState.bvPresets,\r\n bvOpened: store.bathroomVisualizerState.bvOpened,\r\n userPopupOpened: store.userState.userPopupOpened,\r\n activeNavigationFilter: store.navigationState.activeNavigationFilter,\r\n countertopNavigationFilterCompleted: store.navigationState.countertopNavigationFilterCompleted,\r\n newLayoutType: store.sqftState.newLayoutType,\r\n countertopsApplyTo: store.navigationState.countertopsApplyTo,\r\n activeQuoteIndex: store.quotesState.activeQuoteIndex,\r\n navItemPositionModal: store.navigationState.navItemPositionModal,\r\n contextMenu,\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = {\r\n setNavigationViewType,\r\n setModuleContextMenuType,\r\n setDefaultSelectionGroup,\r\n changeActivePartRelatedItemIndex,\r\n setActiveNavigationFilter,\r\n setActiveNavigationFilterStepIndex,\r\n setModuleContextMenuModule,\r\n setNavigationLoading,\r\n toggleNavItemPositionModal,\r\n setLookContextMenu,\r\n};\r\n\r\nexport default injectIntl(\r\n connect(mapStateToProps, mapDispatchToProps)(MobileNavigation)\r\n);\r\n","import React, {useRef, useState} from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport {FormattedMessage, injectIntl} from \"react-intl\";\r\nimport PropTypes from \"prop-types\";\r\nimport {withRouter} from \"react-router-dom\";\r\n\r\n// import IconButton from \"@mui/material/IconButton\";\r\n\r\nimport {setLookContextMenu} from \"../../../actions/lookFunctions\";\r\n\r\nimport {\r\n CONTEXT_MENU_VANITY_BUTTONS,\r\n CONTEXT_MENU_VANITY_ONLY,\r\n // CONTEXT_MENU_SHOWER_ALL,\r\n // CONTEXT_MENU_SHOWER_OTHER,\r\n LOOK_ROOM_TYPES,\r\n} from \"../core/constants\";\r\nimport {getCurrentLayout, getCurrentRoomType} from \"../../appLayout\";\r\n// import {getLookIdUrl} from \"./lookFunctions2\";\r\n// import {ROUTES} from \"../../../routes\";\r\nimport {getCommonVisualizerType} from \"../../../config\";\r\nimport {checkIfLookFeaturesReceived} from \"../../../api/look-api\";\r\nimport {loaderDisable, loaderEnable} from \"../../ui/loaderView\";\r\nimport {checkForContextMenuCommon} from \"../lookNavigation/lookFunctions\";\r\nimport goToMaterialPage from \"../../common/goToMaterialPage\";\r\n\r\n\r\nconst needToRequestFeatureGroupsOnClick = [\"vanity_washstand\", \"vanity_console\", \"shower_arm\", \"shower_head\"];\r\n\r\nconst ContextMenuQKBButtons = (props) => {\r\n\r\n const {contextMenu, setLookContextMenu, buttons, setButtons, handleContextMenuClick, activeQuoteIndex,\r\n renderGreenLayerByZindex} = props;\r\n\r\n const {partId, layerPosition} = contextMenu;\r\n const anchorRef = useRef(null);\r\n const [vanitySubMenuOpened, setVanitySubMenuOpened] = useState(false);\r\n const layout = getCurrentLayout();\r\n\r\n const {allButtons} = checkForContextMenuCommon(partId, layerPosition);\r\n const isBathroom = getCommonVisualizerType() === \"bathroom\";\r\n const isVanity = isBathroom && CONTEXT_MENU_VANITY_BUTTONS.includes(partId);\r\n // const isShower = isBathroom && (CONTEXT_MENU_SHOWER_ALL.includes(partId) || CONTEXT_MENU_SHOWER_OTHER.includes(partId));\r\n\r\n const contextButtonClick = async (clickedButton) => {\r\n // console.log(\"currentPartId\", currentPartId);\r\n\r\n const {partId, isWizard, wizardId, hasSubMenu} = clickedButton;\r\n\r\n if (((isVanity && CONTEXT_MENU_VANITY_ONLY.includes(partId)) || hasSubMenu) && !vanitySubMenuOpened) {\r\n setVanitySubMenuOpened(true);\r\n if (isVanity) {\r\n const vanButtons = allButtons.filter(button => CONTEXT_MENU_VANITY_ONLY.includes(button.partId));\r\n if (vanButtons.length && vanButtons.length > 1) {\r\n setButtons(vanButtons);\r\n return false\r\n }\r\n } else if (partId === \"accessories\") {\r\n const {showButtons} = checkForContextMenuCommon(\"grab_bar\", layerPosition);\r\n setButtons(showButtons);\r\n return false\r\n }\r\n } else if (vanitySubMenuOpened) {\r\n // setVanitySubMenuOpened(false);\r\n }\r\n\r\n setLookContextMenu({\r\n opened: false,\r\n layerPosition: \"\",\r\n clickedOnItem: partId,\r\n });\r\n\r\n let openPartId = partId;\r\n let clickedFeature = null;\r\n\r\n if (isVanity && (getCurrentRoomType(layout) === LOOK_ROOM_TYPES.as) && (partId === \"vanity_pedestal_sink\" || partId === \"vanity_sink\")) {\r\n openPartId = \"vanity_sink\";\r\n const sinkParent = layout.getFeatureGroupByPartId(openPartId);\r\n if (sinkParent) {\r\n const navItems = layout.designNavigationItems({part: sinkParent}, null, null, sinkParent.activeFeature);\r\n if (partId === \"vanity_pedestal_sink\") {\r\n const pedestalSink = navItems.find(navItem => {\r\n return navItem.part.metaData[\"MountType\"] && navItem.part.metaData[\"MountType\"].includes(\"ST\")\r\n });\r\n if (pedestalSink) {\r\n clickedFeature = pedestalSink.part;\r\n }\r\n } else {\r\n const isPedestal = sinkParent.activeFeature && sinkParent.activeFeature.metaData[\"MountType\"] && sinkParent.activeFeature.metaData[\"MountType\"].includes(\"ST\");\r\n if (isPedestal) {\r\n const regularSink = navItems.find(navItem => {\r\n return !navItem.part.metaData[\"MountType\"] || !navItem.part.metaData[\"MountType\"].includes(\"ST\")\r\n });\r\n if (regularSink) {\r\n clickedFeature = regularSink.part;\r\n }\r\n }\r\n }\r\n }\r\n }\r\n\r\n if (isWizard) {\r\n goToMaterialPage(\"visualizer\", false, null, \"\",\r\n {wizardItemId: wizardId, quoteIndex: activeQuoteIndex});\r\n return false\r\n }\r\n\r\n const featureGroup = layout.getFeatureGroupByPartId(openPartId);\r\n if (featureGroup && !featureGroup.allFeaturesReceived && needToRequestFeatureGroupsOnClick.includes(openPartId)) {\r\n loaderEnable();\r\n await checkIfLookFeaturesReceived(featureGroup);\r\n loaderDisable();\r\n }\r\n\r\n // console.log(\"zoomedFeature\", clickedFeature);\r\n handleContextMenuClick(clickedFeature, openPartId);\r\n };\r\n\r\n const onMouseOver = (button) => {\r\n if (renderGreenLayerByZindex) {\r\n const featureGroup = layout.getFeatureGroupByPartId(button.partId);\r\n if (featureGroup && featureGroup.activeFeature && featureGroup.activeFeature.layer) {\r\n renderGreenLayerByZindex(featureGroup.activeFeature.layer.zIndex, button.partId);\r\n }\r\n }\r\n }\r\n\r\n let contextMenuStyles = buttons.length === 14 ? {maxWidth:\"210px\"} : null;\r\n\r\n console.log(\"buttons\", buttons);\r\n\r\n return (\r\n \r\n {/*
\r\n );\r\n }\r\n\r\n}\r\n","import React from \"react\";\r\n\r\nimport Button from \"@mui/material/Button\";\r\nimport {FormattedMessage} from \"react-intl\";\r\n\r\nconst GroheCartStickyFooter = (props) => {\r\n\r\n const {stickyFooterButtons} = props;\r\n\r\n return (\r\n */}\r\n {/* {this.pinchZoom ? this.pinchZoom.el.style.transform + \" // \" + this.pinchZoom.container.style.transform : null}*/}\r\n {/*
*/}\r\n {this.props.useMouseHovering ? this.getGliaImage() : null}\r\n \r\n {stickyFooterButtons.map(button => (\r\n \r\n ))}\r\n
\r\n )\r\n};\r\n\r\nexport default GroheCartStickyFooter\r\n","'use strict';\r\n\r\nObject.defineProperty(exports, \"__esModule\", {\r\n value: true\r\n});\r\nexports.showLoading = exports.resetLoading = exports.loadingBarReducer = exports.loadingBarMiddleware = exports.LoadingBar = exports.ImmutableLoadingBar = exports.hideLoading = undefined;\r\n\r\nvar _loading_bar = require('./loading_bar');\r\n\r\nvar _loading_bar2 = _interopRequireDefault(_loading_bar);\r\n\r\nvar _loading_bar_middleware = require('./loading_bar_middleware');\r\n\r\nvar _loading_bar_middleware2 = _interopRequireDefault(_loading_bar_middleware);\r\n\r\nvar _loading_bar_ducks = require('./loading_bar_ducks');\r\n\r\nvar _immutable = require('./immutable');\r\n\r\nvar _immutable2 = _interopRequireDefault(_immutable);\r\n\r\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\r\n\r\nexports.hideLoading = _loading_bar_ducks.hideLoading;\r\nexports.ImmutableLoadingBar = _immutable2.default;\r\nexports.LoadingBar = _loading_bar.LoadingBar;\r\nexports.loadingBarMiddleware = _loading_bar_middleware2.default;\r\nexports.loadingBarReducer = _loading_bar_ducks.loadingBarReducer;\r\nexports.resetLoading = _loading_bar_ducks.resetLoading;\r\nexports.showLoading = _loading_bar_ducks.showLoading;\r\nexports.default = _loading_bar2.default;","import {getFeatureCost} from \"./helpers\";\r\nimport {BATHROOM_VISUALIZER_TYPES} from \"../config\";\r\n\r\n/**\r\n * returns feature compressed object that can be passed on the backend (without redundant info)\r\n * @param fromCartItem {cartItemInterface}\r\n * @param fromFeature {featureInterface}\r\n * @param quoteIndex {number}\r\n * @returns {object}\r\n */\r\nexport const getCompressedFeature = (fromCartItem, fromFeature, quoteIndex = 0) => {\r\n if (!fromFeature || !fromFeature.dbFeature) {\r\n return null\r\n }\r\n const currentQuote = fromCartItem && Number.isInteger(fromCartItem.currentQuote) ? fromCartItem.currentQuote : quoteIndex;\r\n const compressedDbFeature = {\r\n partName: fromFeature.partName,\r\n sharedFeatureName: fromFeature.dbFeature.sharedFeatureName,\r\n dbFeatureId: fromFeature.dbFeature.id,\r\n sku: fromFeature.dbFeature.sku,\r\n partId: fromFeature.partId,\r\n featureDefinitionID: fromFeature.dbFeature.featureDefinitionID,\r\n noteText: fromFeature.notesList[currentQuote], // we don't restore noteText from here, we take it from getCompressedCartItem\r\n }\r\n if (fromFeature.dbFeature.priceWasChanged) {\r\n compressedDbFeature.customCost = fromFeature.dbFeature.cost; // to restore job feature prices\r\n compressedDbFeature.customPrice = fromFeature.dbFeature.price; // to restore job feature prices\r\n }\r\n if (fromFeature.dbFeature.markUpString) {\r\n compressedDbFeature.markUpString = fromFeature.dbFeature.markUpString; // to be able to compare! not needed for now\r\n }\r\n return compressedDbFeature\r\n}\r\n\r\n/**\r\n * returns cart item compressed object that can be passed on the backend // IS NOT USED IN PARSE RESPONSE ! ONLY NOTE TEXT IS USED\r\n * @param fromCartItem {cartItemInterface}\r\n // * @param fromFeature {featureInterface}\r\n // * @param quoteIndex {number}\r\n * @returns {object}\r\n */\r\nexport const getCompressedCartItem = (fromCartItem) => {\r\n if (!fromCartItem) {\r\n return null\r\n }\r\n const compressedCartItem = {\r\n partId: fromCartItem.partId,\r\n featureId: fromCartItem.cartFeature.dbFeature.featureDefinition_id,\r\n sku: fromCartItem.cartFeature.dbFeature.sku,\r\n quantity: fromCartItem.quantity,\r\n fabricatorFeatureId: fromCartItem.cartFeature.dbFeature.id,\r\n calculatedCost: getFeatureCost(fromCartItem.cartFeature, fromCartItem.quantity, fromCartItem.fromQtCategory),\r\n noteText: fromCartItem.noteText,\r\n addedBy: fromCartItem.addedBy,\r\n isRemoved: fromCartItem.isRemoved,\r\n }\r\n if (fromCartItem.cartFeature.dbFeature.priceWasChanged) {\r\n compressedCartItem.customCost = fromCartItem.cartFeature.dbFeature.cost; // to restore job feature prices\r\n compressedCartItem.customPrice = fromCartItem.cartFeature.dbFeature.price; // to restore job feature prices\r\n }\r\n if (fromCartItem.cartFeature.dbFeature.markUpString) {\r\n compressedCartItem.markUpString = fromCartItem.cartFeature.dbFeature.markUpString; // to be able to compare! not needed for now\r\n }\r\n return compressedCartItem\r\n}\r\n\r\n/**\r\n * returns cart items compressed objects\r\n * @param cartItems {[cartItemInterface]}\r\n * @returns {array}\r\n */\r\nexport const getCompressedCartItems = (cartItems) => {\r\n return cartItems.map(ci => {\r\n if (!ci.cartFeature || !ci.cartFeature.dbFeature) {\r\n return null\r\n }\r\n const cartItem = Object.assign({}, ci, {\r\n cartFeature: getCompressedFeature(ci, ci.cartFeature),\r\n });\r\n if (ci.relatedProductParent) {\r\n cartItem.relatedProductParent = getCompressedFeature(ci, ci.relatedProductParent);\r\n }\r\n if (ci.bundleParentId) {\r\n cartItem.bundleParentId = ci.bundleParentId;\r\n }\r\n return cartItem\r\n }).filter(cartItem => !!cartItem)\r\n}\r\n\r\n/**\r\n * sets feature groups properties TO bvState\r\n * @param bvState {object}\r\n * @param layout {object}\r\n * @returns {object}\r\n */\r\nexport const getFeatureGroupsProperties = (bvState, layout) => {\r\n layout.getFeatures(true).forEach((parentGroup) => {\r\n let relatedItems = parentGroup.getRelatedItems();\r\n relatedItems.forEach((subPart) => {\r\n if (subPart.customNames) {\r\n bvState[subPart.partId + \"_customNames\"] = subPart.customNames;\r\n }\r\n })\r\n })\r\n return bvState\r\n}\r\n\r\n/**\r\n * sets feature groups properties FROM bvState\r\n * @param bvState {object}\r\n * @param layout {object}\r\n * @returns {object}\r\n */\r\nexport const setFeatureGroupsProperties = (bvState, layout) => {\r\n layout.getFeatures(true).forEach((parentGroup) => {\r\n let relatedItems = parentGroup.getRelatedItems();\r\n relatedItems.forEach((subPart) => {\r\n if (bvState[subPart.partId + \"_customNames\"]) {\r\n subPart.customNames = bvState[subPart.partId + \"_customNames\"];\r\n }\r\n })\r\n })\r\n return bvState\r\n}\r\n\r\n\r\n/**\r\n * adds cookie to request data\r\n * @param data {object}\r\n * @returns {object}\r\n */\r\nexport const addGACookie = (data) => {\r\n try {\r\n if (!document.cookie) {\r\n return data\r\n }\r\n const getCookie = name => {\r\n const splitted = document.cookie.match(new RegExp(`(^| )${name}=([^;]+)`));\r\n return splitted ? splitted[2] : \"\"\r\n };\r\n data.cookiesAll = document.cookie;\r\n data.cookie_ga = getCookie(\"_ga\");\r\n } catch (error) {\r\n console.log(\"can't access cookie\", error);\r\n }\r\n return data\r\n}\r\n\r\nexport const getCartItemPartIdFix = (partId) => {\r\n if ((partId !== \"shower_wall\") && (partId !== \"shower_interior_wall\")) {\r\n return partId\r\n }\r\n const isBathroom = BATHROOM_VISUALIZER_TYPES.includes(document.kvConfig.visualizerType);\r\n if (isBathroom) {\r\n if (document.kvConfig.visualizerType === \"bvLook\") {\r\n return \"shower_wall\"\r\n }\r\n return \"shower_interior_wall\"\r\n }\r\n return partId // just in case\r\n}\r\n\r\nexport const fixFeaturesResponse = (response) => {\r\n if (!response) {\r\n return []\r\n }\r\n if (Array.isArray(response)) {\r\n return response;\r\n }\r\n if (Array.isArray(response.features)) {\r\n if (Array.isArray(response.relatedFeatures) && response.relatedFeatures.length) {\r\n // for (let i = 0; i < response.relatedFeatures.length; i++) {\r\n // response.relatedFeatures[i].isRelatedDbFeature = true;\r\n // }\r\n // console.log(\"response.relatedFeatures\", response.relatedFeatures);\r\n return [...response.relatedFeatures, ...response.features] // we should always be here // related goes first\r\n }\r\n return response.features; // keep it as an array\r\n }\r\n return [];\r\n}\r\n","//INITIAL FLOW\r\nimport * as types from \"./actionTypes\";\r\n\r\nexport const setFabricatorSubscriptions = (fabricatorSubscriptions) => ({\r\n type: types.SET_FABRICATOR_SUBSCRIPTIONS,\r\n payload: {fabricatorSubscriptions}\r\n});\r\n\r\nexport const setInitialFlowAdditionalRooms = (initialFlowAdditionalRooms) => ({\r\n type: types.SET_INITIAL_FLOW_ADDITIONAL_ROOMS,\r\n payload: {initialFlowAdditionalRooms}\r\n});\r\n\r\nexport const setInitialFlowType = (initialFlowType) => ({\r\n type: types.SET_INITIAL_FLOW_BUTTON,\r\n payload: {initialFlowType}\r\n});\r\n\r\nexport const setInitialFlowRoom = (initialFlowRoom) => ({\r\n type: types.SET_INITIAL_FLOW_ROOM,\r\n payload: {initialFlowRoom}\r\n});\r\n\r\nexport const setInitialFlowVisualizerNotAvailable = (visualizerNotAvailable) => ({\r\n type: types.SET_INITIAL_FLOW_VISUALIZER_NOT_AVAILABLE,\r\n payload: {visualizerNotAvailable}\r\n});\r\n\r\nexport const setInitialFlowFinished = (initialFlowFinished) => ({\r\n type: types.SET_INITIAL_FLOW_FINISHED,\r\n payload: {initialFlowFinished}\r\n});\r\n\r\nexport const setInitialFlowRoomLayout = (initialFlowRoomLayout) => ({\r\n type: types.SET_INITIAL_FLOW_ROOM_LAYOUT,\r\n payload: {initialFlowRoomLayout}\r\n});\r\nexport const setInitialFlowStep = (initialFlowStep) => ({\r\n type: types.SET_INITIAL_FLOW_STEP,\r\n payload: {initialFlowStep}\r\n});\r\n","import $ from 'jquery';\r\n\r\nimport JsonApi from \"./jsonApi\";\r\nimport store from \"../store\";\r\nimport {loaderEnable, loaderDisable} from \"../bvcomponents/ui/loaderView\";\r\nimport * as types from \"../actions/actionTypes\";\r\nimport Misc from \"../misc/misc\";\r\nimport Config, {IS_LIXIL_UI, IS_OFFLINE_MODE, POST_MESSAGES} from \"../config\";\r\nimport Analytics from '../analytics';\r\nimport {saveQuote} from \"./server-api\";\r\nimport {\r\n renderErrorPopup,\r\n renderAccountNotActivatedErrorPopup,\r\n renderConfirmPopup,\r\n renderMessagePopup\r\n} from \"./api-popups\";\r\nimport {ConfirmPopupTypes, QuoteRequestType, UserAction} from \"../bvcomponents/visComponents/constants\";\r\nimport {setJobId, showCheckoutLayout, toggleUserPopup} from \"../actions/actionFunctions\";\r\nimport {showQuoteSavedNotification} from \"../bvcomponents/ui/successNotification\";\r\nimport ActionTypes from \"../misc/actionTypes\";\r\nimport {setAlreadyRegisteredUserInfo, setEmployeesList} from \"../actions/userFunctions\";\r\nimport {restorePaymentInfo} from \"../actions/paymentFunctions\";\r\nimport {addGACookie} from \"../misc/backendFunctions\";\r\n\r\n\r\nexport const scheduleCustomer = (data) => {\r\n loaderEnable(\"loader.scheduleCustomerText\", \"loader.scheduleCustomerTitle\");\r\n const state = store.getState();\r\n const {serverState} = state;\r\n let {time} = data;\r\n let am = true;\r\n if (time > 1200) {\r\n am = false;\r\n time -= 1200;\r\n }\r\n const scheduleData = {\r\n scheduleEntryData: {\r\n date: data.date,\r\n time: `${time / 100}:00`,\r\n am: am,\r\n duration: 60,\r\n alert: 30,\r\n appointmentType: 'Quote'\r\n },\r\n jobId: serverState.jobId,\r\n jobIdType: 'JobQuote'\r\n };\r\n\r\n JsonApi.scheduleCustomer(scheduleData)\r\n .then(response => {\r\n console.log('Schedule answer', response);\r\n loaderDisable();\r\n store.dispatch({\r\n type: types.SHOW_SCHEDULER,\r\n payload: {show: false}\r\n })\r\n });\r\n};\r\n\r\nexport const setUserLoginResponse = (responseData,\r\n fromConfirmationDialog = false,\r\n quoteRequestType,\r\n yesNoConsultationRequest,\r\n showSchedule,\r\n checkout,\r\n userPopupType) => {\r\n console.log(responseData);\r\n // const saveQuoteAfterLogin = state.userState.saveQuoteAfterLogin;\r\n // if (!saveQuoteAfterLogin) {\r\n // loaderDisable();\r\n // }\r\n const state = store.getState();\r\n\r\n if (responseData.error) {\r\n Analytics.sendClickEvent(\"user-login-failure\");\r\n if (state.fabricatorState.isNhance) {\r\n Analytics.sendParentPostMessage(POST_MESSAGES.userLoginFalse);\r\n }\r\n const {error} = responseData;\r\n loaderDisable();\r\n if (responseData.error.indexOf('has not been activated yet') !== -1) {\r\n const userInfo = store.getState().userState.userInfo;\r\n renderAccountNotActivatedErrorPopup(error, userInfo.email);\r\n } else {\r\n renderErrorPopup(responseData.error);\r\n }\r\n if (fromConfirmationDialog) {\r\n store.dispatch(toggleUserPopup({\r\n userPopupOpened: true,\r\n userPopupType\r\n }));\r\n }\r\n return false;\r\n }\r\n\r\n const fabricatorSettings = state.fabricatorState.settings;\r\n\r\n // const docuSignObj = fabricatorSettings.docuSignAuth ? JSON.parse(fabricatorSettings.docuSignAuth) : null;\r\n // Config.setUserInfo(responseData);\r\n Analytics.sendClickEvent(\"user-login-success\");\r\n Analytics.setUserId(responseData.encodedUserId);\r\n Analytics.setExistingMixPanelPerson(responseData.email);\r\n if (state.fabricatorState.isNhance) {\r\n Analytics.sendParentPostMessage(POST_MESSAGES.userLoginTrue);\r\n }\r\n const updatedUserInfo = Misc.parseUserResponse(responseData);\r\n // const isPhoneNumberValidated = responseData.isPhoneNumberValidated || !responseData.pendingPhoneVerification;\r\n const isPhoneNumberValidated = !fabricatorSettings.twoFA || responseData.isPhoneNumberValidated || !responseData.pendingPhoneVerification;\r\n\r\n store.dispatch({\r\n type: types.TOGGLE_USER_POPUP,\r\n payload: {\r\n userPopupOpened: false,\r\n userIsLoggedIn: true,\r\n isPhoneNumberValidated,\r\n userInfo: updatedUserInfo,\r\n // email: responseData.email,\r\n encodedUserId: responseData.encodedUserId,\r\n // phoneNumber: responseData.phoneNumber,\r\n // values: responseData.values\r\n }\r\n });\r\n\r\n if (responseData.billingAddress || responseData.shippingAddress) { // update user state\r\n store.dispatch(restorePaymentInfo(Misc.parseShippingAndBillingResponse(responseData)));\r\n }\r\n\r\n if (IS_LIXIL_UI) { // we don't go below, as we already have save in the lixil logic\r\n return {...responseData, isPhoneNumberValidated: isPhoneNumberValidated || !fabricatorSettings.twoFA}\r\n }\r\n\r\n if (fabricatorSettings.twoFA && responseData.pendingPhoneVerification) {\r\n store.dispatch({\r\n type: types.TOGGLE_USER_POPUP,\r\n payload: {userPopupOpened: true}\r\n });\r\n } else {\r\n saveQuote({\r\n submit: true,\r\n quoteRequestType,\r\n yesNoConsultationRequest,\r\n fromCheckOutPage: window.location.href.includes('shoppingcart'),\r\n showContractSignOnError: true,\r\n showReceipt: false\r\n })\r\n .then((response) => {\r\n $(document).trigger(ActionTypes.USER_IS_LOGGED_IN); // click on the active item it the navigation\r\n if (response) {\r\n let responseDataBase = response;\r\n if (responseData) {\r\n responseDataBase = responseData;\r\n }\r\n const responseData = typeof responseDataBase === 'object' ? responseDataBase : JSON.parse(responseDataBase);\r\n console.log('saveQuote response:', responseData);\r\n store.dispatch(setJobId(responseData.jobId));\r\n }\r\n if (showSchedule) {\r\n loaderDisable();\r\n if (fabricatorSettings.enableCalendarForScheduling) {\r\n store.dispatch({\r\n type: types.SHOW_SCHEDULER,\r\n payload: {show: true}\r\n })\r\n } else {\r\n renderMessagePopup('userPopup.messageBox.appointmentRequested');\r\n }\r\n } else {\r\n loaderDisable();\r\n showQuoteSavedNotification(\r\n quoteRequestType === QuoteRequestType.RequestQuote\r\n ? \"successNotification.titleQuoteRequested\"\r\n : \"successNotification.titleQuoteSaved\"\r\n );\r\n // console.log('DS - login', fabricatorSettings.showPricing, docuSignObj);\r\n // if (fabricatorSettings.showPricing && docuSignObj && docuSignObj.isEnabled)\r\n // store.dispatch(showDocuSign(true));\r\n if (checkout && fabricatorSettings.checkout) {\r\n showCheckoutLayout(fabricatorSettings);\r\n }\r\n }\r\n })\r\n .catch((error) => {\r\n console.error('saveQuote error:', error);\r\n loaderDisable();\r\n })\r\n }\r\n\r\n if (showSchedule) {\r\n if (fabricatorSettings.enableCalendarForScheduling) {\r\n store.dispatch({\r\n type: types.SHOW_SCHEDULER,\r\n payload: {show: true}\r\n })\r\n } else {\r\n renderMessagePopup('userPopup.messageBox.appointmentRequested');\r\n }\r\n }\r\n}\r\n\r\nexport const userLogin = ({\r\n showConfirmationPopup = false,\r\n showSchedule = false,\r\n quoteRequestType = QuoteRequestType.RegularDesign,\r\n yesNoConsultationRequest = false,\r\n userPopupType,\r\n fromConfirmationDialog = false,\r\n checkout = false\r\n } = {}) => {\r\n if (showConfirmationPopup) {\r\n store.dispatch({\r\n type: types.TOGGLE_USER_POPUP,\r\n payload: {\r\n userPopupOpened: false\r\n }\r\n });\r\n renderConfirmPopup(ConfirmPopupTypes.ConsultationRequest, {\r\n userAction: UserAction.Login,\r\n userPopupType\r\n });\r\n return;\r\n }\r\n const state = store.getState();\r\n const userInfo = state.userState.userInfo;\r\n const showAdditionalFields = state.userState.showAdditionalFields;\r\n if (!IS_LIXIL_UI) {\r\n loaderEnable();\r\n }\r\n let data = {\r\n email: userInfo.email,\r\n password: userInfo.password,\r\n employeeId: showAdditionalFields ? +userInfo.employeeId : 0,\r\n fabricatorId: document.kvConfig.userId,\r\n }\r\n data = addGACookie(data);\r\n\r\n return JsonApi.userLogin(data)\r\n .then((response) => {\r\n return setUserLoginResponse(\r\n response.data,\r\n fromConfirmationDialog,\r\n quoteRequestType,\r\n yesNoConsultationRequest,\r\n showSchedule,\r\n checkout,\r\n userPopupType\r\n )\r\n })\r\n .catch((error) => {\r\n console.log('User login error:', error);\r\n loaderDisable();\r\n renderErrorPopup(\"Login \"+new Error(error.message || error));\r\n if (state.fabricatorState.isNhance) {\r\n Analytics.sendParentPostMessage(POST_MESSAGES.userLoginFalse);\r\n }\r\n });\r\n};\r\n\r\nconst callUserRegisterErrorPopup = (responseData,\r\n userPopupType,\r\n fromConfirmationDialog,\r\n assignQuote = false,\r\n withCheckoutLogic = false,\r\n noInternetCallBack = null,\r\n afterContractSignCallback = null,\r\n executeAfterRegisterIfUserExist = null) => {\r\n Analytics.sendClickEvent(\"user-register-failure\");\r\n\r\n if (responseData.isEmailTaken && responseData.errorUserMatch) {\r\n store.dispatch(setAlreadyRegisteredUserInfo({...responseData.errorUserMatch, assignQuote, withCheckoutLogic, userId: responseData.userId}));\r\n renderConfirmPopup(ConfirmPopupTypes.AssignQuoteOnExistingUser, {applyFunction: executeAfterRegisterIfUserExist}, true)\r\n return\r\n }\r\n\r\n renderErrorPopup(responseData.error, \"\", noInternetCallBack, withCheckoutLogic, null, afterContractSignCallback);\r\n\r\n if (fromConfirmationDialog) {\r\n store.dispatch(toggleUserPopup({\r\n userPopupOpened: true,\r\n userPopupType\r\n }));\r\n }\r\n\r\n}\r\n\r\nexport const userRegister = async ({\r\n showConfirmationPopup = false,\r\n showSchedule = false,\r\n quoteRequestType = QuoteRequestType.RegularDesign,\r\n yesNoConsultationRequest = false,\r\n userPopupType,\r\n fromConfirmationDialog = false,\r\n // checkout = false,\r\n assignQuote = false,\r\n withCheckoutLogic = false,\r\n noInternetCallBack = null,\r\n afterContractSignCallback = null,\r\n executeAfterRegisterIfUserExist = null,\r\n } = {}) => {\r\n //console.log('register', quoteRequestType);\r\n if (showConfirmationPopup) {\r\n store.dispatch({\r\n type: types.TOGGLE_USER_POPUP,\r\n payload: {\r\n userPopupOpened: false\r\n }\r\n });\r\n renderConfirmPopup(ConfirmPopupTypes.ConsultationRequest, {\r\n userAction: UserAction.Register,\r\n userPopupType,\r\n quoteRequestType\r\n });\r\n return;\r\n }\r\n\r\n const {userState, serverState, fabricatorState} = store.getState();\r\n const userInfo = userState.userInfo;\r\n // userInfo.phone = userInfo.phoneNumber;\r\n // if (!store.getState().userState.showAdditionalFields) {\r\n // userInfo.employeeId = \"\"\r\n // }\r\n if (!IS_LIXIL_UI) {\r\n loaderEnable();\r\n }\r\n let data = {\r\n email: userInfo.email,\r\n firstName: userInfo.firstName,\r\n phone: `+${userInfo.country.dialCode} ${userInfo.phoneNumber}`,\r\n agreedToTerms: userInfo.agreedToTerms,\r\n subscribeToNewsletter: userInfo.subscribeToNewsletter,\r\n isNew: true,\r\n postal: userInfo.postal,\r\n salesPersonFullName: userInfo.salesPersonFullName,\r\n salesPersonEmail: userInfo.salesPersonEmail,\r\n employeeId: +userInfo.employeeId,\r\n fabricatorId: Config.kvConfig.userId || 61986,\r\n quoteRequestType,\r\n yesNoConsultationRequest,\r\n lastName: userInfo.lastName,\r\n address1: userInfo.address1,\r\n address2: userInfo.address2,\r\n city: userInfo.city,\r\n state: userInfo.state,\r\n country: userInfo.country.iso2,\r\n preferredCommunicationMethod: userInfo.preferredCommunicationMethod,\r\n howDidYouHearAboutUs: userInfo.howDidYouHearAboutUs,\r\n phone2: userInfo.phone2,\r\n language: serverState.language,\r\n subId: document.subId && document.subId.toString ? document.subId.toString() : null,\r\n };\r\n\r\n data = addGACookie(data);\r\n\r\n if (assignQuote) {\r\n [\"lastName\", \"phone2\", \"address1\", \"address2\", \"city\", \"preferredCommunicationMethod\", \"howDidYouHearAboutUs\"]\r\n .forEach((property) => {\r\n data[property] = userInfo[property] // new fields added in new assign quote popup\r\n })\r\n }\r\n\r\n let registerResponse;\r\n\r\n try {\r\n registerResponse = await JsonApi.userRegister(data);\r\n } catch (error) {\r\n if (error && (error.message === \"Network Error\") && IS_OFFLINE_MODE) {\r\n registerResponse = {data: {error: \"Network Error\"}}\r\n }\r\n }\r\n\r\n if (!IS_LIXIL_UI) {\r\n loaderDisable();\r\n }\r\n\r\n if (registerResponse.data.error) {\r\n callUserRegisterErrorPopup(registerResponse.data, userPopupType, fromConfirmationDialog, assignQuote, withCheckoutLogic, noInternetCallBack, afterContractSignCallback, executeAfterRegisterIfUserExist);\r\n if (fabricatorState.isNhance) {\r\n Analytics.sendParentPostMessage(POST_MESSAGES.userRegisterFalse);\r\n }\r\n return;\r\n }\r\n\r\n Analytics.sendClickEvent(\"user-register-success\");\r\n // Config.setUserInfo(registerResponse.data);\r\n Analytics.setUserId(registerResponse.data.encodedUserId);\r\n Analytics.setMixPanelPerson(registerResponse.data.email, registerResponse.data.firstName, registerResponse.data.phoneNumber);\r\n if (fabricatorState.isNhance) {\r\n Analytics.sendParentPostMessage(POST_MESSAGES.userRegisterTrue);\r\n }\r\n\r\n if (assignQuote) {\r\n return registerResponse.data\r\n }\r\n const fabricatorSettings = fabricatorState.settings;\r\n\r\n if (IS_LIXIL_UI) {\r\n store.dispatch(toggleUserPopup({\r\n userIsLoggedIn: true,\r\n encodedUserId: registerResponse.data.encodedUserId,\r\n isPhoneNumberValidated: !fabricatorSettings.twoFA,\r\n }));\r\n return registerResponse.data\r\n }\r\n\r\n // const docuSignObj = fabricatorSettings.docuSignAuth ? JSON.parse(fabricatorSettings.docuSignAuth) : null;\r\n store.dispatch(toggleUserPopup({\r\n userPopupOpened: fabricatorSettings.twoFA,\r\n schedulerPending: fabricatorSettings.twoFA,\r\n userIsLoggedIn: true,\r\n // when user first register we need to check whether the fabricator requires to validate the phone number\r\n isPhoneNumberValidated: !fabricatorSettings.twoFA, // if 2FA is required we consider user is still NOT logged in\r\n ...registerResponse.data,\r\n userInfo: {\r\n email: registerResponse.data.email\r\n }\r\n }));\r\n\r\n const submit = window.location.href.includes('shoppingcart');\r\n const saveQuoteResponse = await saveQuote({\r\n submit,\r\n yesNoConsultationRequest,\r\n quoteRequestType,\r\n fromCheckOutPage: submit,\r\n showReceipt: false\r\n });\r\n\r\n if (fabricatorSettings.twoFA)\r\n return;\r\n\r\n $(document).trigger(ActionTypes.USER_IS_LOGGED_IN); // click on the active item it the navigation\r\n if (saveQuoteResponse) {\r\n let responseDataBase = saveQuoteResponse;\r\n if (saveQuoteResponse.data) {\r\n responseDataBase = saveQuoteResponse.data;\r\n }\r\n const responseData = typeof responseDataBase === 'object' ? responseDataBase : JSON.parse(responseDataBase);\r\n //console.log('saveQuote response:', responseData);\r\n store.dispatch(setJobId(responseData.jobId));\r\n }\r\n if (showSchedule) {\r\n if (fabricatorSettings.enableCalendarForScheduling) {\r\n store.dispatch({\r\n type: types.SHOW_SCHEDULER,\r\n payload: {show: true}\r\n })\r\n } else {\r\n renderMessagePopup(\"userPopup.messageBox.appointmentRequested\");\r\n }\r\n } else {\r\n // store.dispatch({\r\n // type: types.CHANGE_MESSAGE_BOX,\r\n // payload: {\r\n // visible: true,\r\n // error: false,\r\n // inline: false,\r\n // message: \"userPopup.messageBox.designSavedSuccess\",\r\n // buttons: [{\r\n // text: \"messageBox.buttonOk\",\r\n // color: \"green\",\r\n // click: () => {\r\n // store.dispatch({\r\n // type: types.CHANGE_MESSAGE_BOX,\r\n // payload: {\r\n // visible: false,\r\n // }\r\n // });\r\n //\r\n // // console.log('DS - register', fabricatorSettings.showPricing, docuSignObj);\r\n // // if (fabricatorSettings.showPricing && docuSignObj && docuSignObj.isEnabled)\r\n // // store.dispatch(showDocuSign(true));\r\n //\r\n // if (checkout && fabricatorSettings.checkout && fabricatorSettings.hasPaymentGateway) {\r\n // showCheckoutLayout(fabricatorSettings);\r\n // }\r\n // }\r\n // }]\r\n // }\r\n // });\r\n }\r\n\r\n if (saveQuoteResponse.error || saveQuoteResponse.data && saveQuoteResponse.data.error) {\r\n loaderDisable();\r\n renderErrorPopup(saveQuoteResponse.error || saveQuoteResponse.data.error, \"\", noInternetCallBack);\r\n }\r\n return null\r\n};\r\n\r\nexport const resetUserPassword = () => {\r\n const state = store.getState();\r\n const email = state.userState.userInfo.email;\r\n const language = state.serverState.language;\r\n loaderEnable();\r\n JsonApi.resetUserPassword(email, language)\r\n .then((response) => {\r\n loaderDisable();\r\n console.log('resetUserPassword response:', response);\r\n if (response.data.error) {\r\n renderErrorPopup(response.data.error);\r\n } else if (IS_LIXIL_UI) {\r\n store.dispatch({\r\n type: types.CHANGE_MESSAGE_BOX,\r\n payload: {\r\n visible: true,\r\n title: \"leadCapturePopup.forgot.successPopup.title\",\r\n message: \"leadCapturePopup.forgot.successPopup.text\",\r\n }\r\n })\r\n } else {\r\n store.dispatch({\r\n type: types.CHANGE_MESSAGE_BOX,\r\n payload: {\r\n visible: true,\r\n message: \"userPopup.messageBox.passwordHasBeenSent\",\r\n error: false,\r\n inline: false,\r\n buttons: [{\r\n text: \"messageBox.buttonOk\",\r\n color: \"blue\",\r\n click: () => {\r\n store.dispatch({\r\n type: types.CHANGE_MESSAGE_BOX,\r\n payload: {\r\n visible: false,\r\n }\r\n });\r\n }\r\n }]\r\n }\r\n });\r\n }\r\n })\r\n .catch((error) => {\r\n loaderDisable();\r\n renderErrorPopup(error);\r\n });\r\n};\r\n\r\nexport const getEmployees = (withLoader = true) => {\r\n if (withLoader) {\r\n loaderEnable();\r\n }\r\n return JsonApi.getEmployees()\r\n .then((response) => {\r\n if (withLoader) {\r\n loaderDisable();\r\n }\r\n //console.log('getEmployees response:', response);\r\n const emplList = response && response.data ? [...response.data] : [];\r\n store.dispatch(setEmployeesList(emplList));\r\n return emplList\r\n })\r\n .catch((error) => {\r\n if (withLoader) {\r\n loaderDisable();\r\n }\r\n console.log('getEmployees error:', error);\r\n return []\r\n // renderErrorPopup(error);\r\n });\r\n};\r\n\r\nexport const getCustomerById = ({customerId,\r\n showContractOnError = false,\r\n noInternetCallBack,\r\n afterContractSignCallback}) => {\r\n loaderEnable();\r\n return JsonApi.getCustomerById(customerId)\r\n .then(response => response.data)\r\n .catch((error) => {\r\n loaderDisable();\r\n renderErrorPopup(error, \"\", noInternetCallBack, showContractOnError, null, afterContractSignCallback);\r\n });\r\n};\r\n\r\nexport const generateTwoFaAuthenticationToken = () => {\r\n return JsonApi.generateAuthenticationToken()\r\n .then(response => response.data || response)\r\n .catch(error => console.log(\"Server error validateAuthentication \"+new Error(error)))\r\n};\r\n\r\nexport const validateTwoFaAuthentication = (token, authCode, phone) => {\r\n return JsonApi.validateAuthenticationRequest(token, authCode, phone)\r\n .then(response => response.data)\r\n .catch(error => console.log(\"Server error validateAuthentication \"+new Error(error)))\r\n};\r\n\r\nexport const sendAuthenticationRequest = (token, to, type) => {\r\n return JsonApi.sendAuthenticationRequest(token, to, type)\r\n .then(response => response.data)\r\n .catch(error => console.log(\"Server error sendAuthenticationRequest \"+new Error(error)))\r\n};\r\n","import $ from \"jquery\";\r\nimport eventManager from \"../../store/sqftEventManager\";\r\nimport Config from \"../../store/sqftConfig\";\r\nimport workspace from \"../workspace\";\r\nimport Cursor from \"./cursor\";\r\nimport MiteredOverlay from \"../shapes/overlays/mitered\";\r\nimport {\r\n inchesToMm,\r\n measureDistanceToInches,\r\n mmToInches,\r\n} from \"../../../../helpers/sqftHelper\";\r\nimport {iconPlusBlue} from \"../../../../assetsSQFT\";\r\nimport store from \"../../../../../../store\";\r\nimport {\r\n addMiteredSection,\r\n changeMiteredSection,\r\n deleteMiteredSection\r\n} from \"../../../../../../actions/sqftMiteredFunctions\";\r\nimport {updateSQFTCalculations} from \"../../../../../../actions/sqftFunctions\";\r\nimport {\r\n EDGE_LABELS,\r\n MITERED_OVERLAY_TYPE,\r\n RESOURCE_ATTACHED_TO_TYPE,\r\n SIDEBAR_BUTTONS_MENU, SIDEBAR_HIDDEN_BUTTONS,\r\n SIDEBAR_NAVIGATION_BUTTONS\r\n} from \"../../../../constants\";\r\nimport {setSQFTMenuOpened, setSQFTMenuOpenedLock} from \"../../../../../../actions/sqftMenuFunctions\";\r\nimport {attachResource} from \"./resourseCanas\";\r\nimport {getEdgeFeatures} from \"../../../../helpers/shapeHelper\";\r\nimport {getMiterEdgeFeature, getMiterUnderwrap} from \"../../../../helpers/featureHelper\";\r\n\r\nexport default class MiteredController {\r\n cursor;\r\n design = {\r\n imgSrc: iconPlusBlue\r\n };\r\n nodes = {\r\n miteredSectionsHTML: $('#mitered-sections'),\r\n };\r\n miteredSections = [];\r\n\r\n createCursor = () => {\r\n this.cursor = new Cursor();\r\n this.cursor.setCursorImage(this.design.imgSrc);\r\n eventManager.setCursor('mitered-select', this, true);\r\n };\r\n\r\n registerEvents = () => {\r\n eventManager.addEvent(\r\n eventManager.events.MOUSE_UP,\r\n this.onMouseUp,\r\n this,\r\n eventManager.priorities.OVERALL\r\n );\r\n };\r\n\r\n attachMiteredEdge = (seg) => {\r\n if (seg && !seg.isWithMitered() && !seg.isWithBumpout()) {\r\n //add tool\r\n attachResource(seg, null, RESOURCE_ATTACHED_TO_TYPE.mitered, null, null, '', 0, null, null, false);\r\n\r\n //add green edge\r\n const miterEdgeFeature = getMiterEdgeFeature();\r\n if (miterEdgeFeature) {\r\n const name = miterEdgeFeature.getFeatureName();\r\n attachResource(seg, null, RESOURCE_ATTACHED_TO_TYPE.edge, miterEdgeFeature.dbFeature.id, null, name);\r\n }\r\n }\r\n };\r\n\r\n attachMiteredUnderwrapEdge = (seg) => {\r\n if (seg && !seg.isWithMitered() && !seg.isWithBumpout()) {\r\n //add tool\r\n attachResource(seg, null, RESOURCE_ATTACHED_TO_TYPE.mitered, null, null, '', 0, null, null, false);\r\n\r\n //add green edge\r\n const miterEdgeFeature = getMiterUnderwrap();\r\n if (miterEdgeFeature) {\r\n const name = miterEdgeFeature.getFeatureName();\r\n attachResource(seg, null, RESOURCE_ATTACHED_TO_TYPE.edge, miterEdgeFeature.dbFeature.id, null, name);\r\n }\r\n }\r\n };\r\n\r\n onMouseUp = (mousePos) => {\r\n void mousePos;\r\n let hoverShape = workspace.getHoverShape();\r\n\r\n if (hoverShape && hoverShape.getHoverSegment) {\r\n const reduxState = store.getState();\r\n const activeButton = reduxState.sqftMenuState.activeButton;\r\n const activeSubMenuButton = reduxState.sqftMenuState.activeSubMenuButton;\r\n if (activeButton === SIDEBAR_NAVIGATION_BUTTONS.mitered || activeSubMenuButton === SIDEBAR_HIDDEN_BUTTONS.buttonMitered) {\r\n let seg = hoverShape.getHoverSegment();\r\n if (seg && seg.isWithMitered() && reduxState.sqftMenuState.activeButton === SIDEBAR_BUTTONS_MENU.delete) {\r\n seg.deleteMitered();\r\n } else if (seg && seg.isWithMitered()) {\r\n void 0;\r\n } else {\r\n this.attachMiteredEdge(seg, this.cursor.cursorImage);\r\n }\r\n }\r\n }\r\n\r\n this.cursor.checkForRestoreCursor();\r\n };\r\n\r\n addSection = (miteredSection) => {\r\n const reduxState = store.getState();\r\n store.dispatch(addMiteredSection(miteredSection));\r\n store.dispatch(setSQFTMenuOpened(SIDEBAR_NAVIGATION_BUTTONS.mitered));\r\n const updateCalculations = reduxState.sqftState.updateCalculations;\r\n store.dispatch(updateSQFTCalculations(updateCalculations + 1));\r\n };\r\n\r\n updateSection = (miteredSection) => {\r\n store.dispatch(changeMiteredSection(miteredSection));\r\n store.dispatch(setSQFTMenuOpened(SIDEBAR_NAVIGATION_BUTTONS.mitered));\r\n store.dispatch(setSQFTMenuOpenedLock(true));\r\n\r\n const reduxState = store.getState();\r\n const updateCalculations = reduxState.sqftState.updateCalculations;\r\n store.dispatch(updateSQFTCalculations(updateCalculations + 1));\r\n }\r\n\r\n deleteSection = (miteredOverlay) => {\r\n store.dispatch(deleteMiteredSection(miteredOverlay.id));\r\n };\r\n\r\n createMiteredOverlay = (line) => {\r\n const reduxState = store.getState();\r\n const miteredSections = reduxState.sqftMiteredState.miteredSections;\r\n\r\n return new MiteredOverlay(line, miteredSections.length + 1, MITERED_OVERLAY_TYPE.mitered)\r\n };\r\n\r\n destroy = (protect, revertBackAfterMouseUp) => {\r\n if (revertBackAfterMouseUp) {\r\n eventManager.removeEvent(self, eventManager.events.RENDER); //remove render only, but wait for mouse up to set cursor again\r\n this.isWaitingToRestoreCursor = true;\r\n } else {\r\n this.deregisterEvents();\r\n }\r\n //this.hide();\r\n };\r\n\r\n deregisterEvents() {\r\n eventManager.resetCursor(this);\r\n eventManager.removeEvent(this);\r\n this.cursor ? this.cursor.deregisterEvents() : null;\r\n Config.highlight.lines = false;\r\n }\r\n\r\n static getTotalArea = () => {\r\n let miteredSections = workspace.getMiteredSections();\r\n let miteredSectionsArea = 0;\r\n for (let i = 0; i < miteredSections.length; i++) {\r\n miteredSectionsArea += miteredSections[i] ? miteredSections[i].getMiteredToolTotalArea() : null;\r\n }\r\n\r\n return miteredSectionsArea;\r\n };\r\n\r\n onMeasureUnitChange = () => {\r\n let miteredSections = workspace.getMiteredSections();\r\n let miteredSectionsArea = 0;\r\n for (let i = 0; i < miteredSections.length; i++) {\r\n let segments = miteredSections[i].getSegments();\r\n\r\n segments.map((segment) => {\r\n segment.height = Config.measureUnit === \"Metric\"\r\n ? inchesToMm(segment.height)\r\n : mmToInches(segment.height);\r\n\r\n if (segment.thickness) {\r\n segment.thickness.value = Config.measureUnit === \"Metric\"\r\n ? inchesToMm(segment.thickness.value)\r\n : mmToInches(segment.thickness.value)\r\n }\r\n });\r\n\r\n miteredSections[i].heightNumberText.value = segments[0].height\r\n }\r\n\r\n return miteredSectionsArea;\r\n };\r\n\r\n getTransformedMeasureUnit = (value) => {\r\n return Config.measureUnit === \"Metric\"\r\n ? measureDistanceToInches(value).millimeters // ? distanceToMillimeters(inchesToMm(segment.length.value))\r\n : value;\r\n };\r\n\r\n getEdgesLength = () => {\r\n let additionalLength = 0;\r\n const lines = workspace.getLines();\r\n for (const line of lines) {\r\n if (line.from.getMiteredFeatureId()) {\r\n additionalLength += this.getEdgeLengthValue();\r\n }\r\n }\r\n\r\n return additionalLength\r\n }\r\n\r\n getEdgeLengthValue = () => {\r\n return Config.measureUnit === \"Imperial\"\r\n ? (2 * 33) / 40\r\n : (2 * 900) / 1000;\r\n }\r\n\r\n getExportedMiteredEdges = () => {\r\n let addedEdges = [];\r\n const lines = workspace.getLines();\r\n for (const line of lines) {\r\n const miteredFeatureId = line.from.getMiteredFeatureId();\r\n if (miteredFeatureId) {\r\n const edgeLengthValue = this.getEdgeLengthValue();\r\n const navItems = getEdgeFeatures();\r\n let edgeFeature = navItems.find(edge => edge.part.dbFeature.id === miteredFeatureId);\r\n\r\n addedEdges.push({\r\n partId: EDGE_LABELS.edge,\r\n type: EDGE_LABELS.edge,\r\n name: edgeFeature ? workspace.intl.formatMessage({id: edgeFeature.part.dbFeature.sharedFeatureName}) : \"\",\r\n featureId: miteredFeatureId,\r\n segments: 1,\r\n length: edgeLengthValue,\r\n area: edgeLengthValue\r\n });\r\n }\r\n }\r\n\r\n return addedEdges\r\n }\r\n}\r\n","import * as types from \"./actionTypes\";\r\n\r\nexport const setMiteredSections = (miteredSections) => ({\r\n type: types.SET_MITERED_SECTIONS,\r\n payload: {miteredSections}\r\n});\r\n\r\nexport const addMiteredSection = (miteredSection) => ({\r\n type: types.ADD_MITERED_SECTION,\r\n payload: miteredSection\r\n});\r\n\r\nexport const changeMiteredSection = (miteredSection) => ({\r\n type: types.CHANGE_MITERED_SECTION,\r\n payload: miteredSection\r\n});\r\n\r\nexport const deleteMiteredSection = (id) => ({\r\n type: types.DELETE_MITERED_SECTION,\r\n payload: {id}\r\n});\r\n\r\nexport const deleteAllMiteredSections = () => ({\r\n type: types.DELETE_ALL_MITERED_SECTIONS,\r\n payload: {}\r\n});\r\n","import {SHAPE_PART_ID} from \"./constants\";\r\n\r\nexport const SHAPE_HARDCODED_PART_IDS = [\r\n SHAPE_PART_ID.seamPiece,\r\n SHAPE_PART_ID.backsplashPiece,\r\n SHAPE_PART_ID.waterfallPiece,\r\n SHAPE_PART_ID.slabPlaceHolder,\r\n SHAPE_PART_ID.upper_cabinet_boxes,\r\n SHAPE_PART_ID.lower_cabinet_boxes,\r\n SHAPE_PART_ID.tall_cabinet_boxes,\r\n];\r\n\r\nexport const SHAPE_PART_IDS_VISIBLE_ONLY_IN_THE_SLAB_MODE = [\r\n SHAPE_PART_ID.seamPiece,\r\n SHAPE_PART_ID.backsplashPiece,\r\n SHAPE_PART_ID.waterfallPiece,\r\n SHAPE_PART_ID.slabPlaceHolder,\r\n];\r\n\r\nexport const SHAPE_PART_IDS_FROM_ADDITIONAL_SHAPES_LIST = [\r\n SHAPE_PART_ID.backsplashPiece,\r\n SHAPE_PART_ID.waterfallPiece,\r\n];\r\n","import {Part} from \"../part\";\r\nimport {wallsThumbnail} from \"../../../bvComponent/core/assets\";\r\nimport {PartMenuType} from \"../../../visComponents/constants\";\r\nimport DesignNavigationItem from \"../../../visComponents/designNavigationItem\";\r\n\r\nimport store from \"../../../../store\";\r\nimport LeftWall from \"../subparts/walls/leftWall\";\r\nimport RightWall from \"../subparts/walls/rightWall\";\r\nimport CenterWall from \"../subparts/walls/centerWall\";\r\nimport BackWall from \"../subparts/walls/backWall\";\r\nimport Ceiling from \"../subparts/walls/ceiling\";\r\nimport FrontWall from \"../subparts/walls/frontWall\";\r\nimport SplitWall from \"../subparts/walls/splitWall\";\r\nimport LeftWallSplitter from \"../subparts/walls/leftWallSplitter\";\r\nimport CeilingPanels from \"../subparts/walls/ceilingPanels\";\r\n\r\nexport default class Walls extends Part {\r\n static id = 'Walls';\r\n constructor() {\r\n super(true, false, PartMenuType.Complex);\r\n\r\n this.menuType = PartMenuType.Complex;\r\n this.partName = 'Walls';\r\n this.translateId = \"visualizer.bathroom.walls\";\r\n this.partThumbnail = wallsThumbnail;\r\n\r\n // related items\r\n this.leftWall = null;\r\n this.rightWall = null;\r\n this.centerWall = null;\r\n this.frontWall = null;\r\n this.popoutWall = null;\r\n this.backWall = null;\r\n this.ceiling = null;\r\n this.ceilingPanels = null;\r\n this.splitWall = null;\r\n this.leftWallSplitter = null;\r\n\r\n this.allWallsApplied = true;\r\n this.relatedGroupNames = [\"Backsplash\", \"Left Wall Splitter\", \"Left Wall\", \"Right Wall\", \"Center Wall\",\r\n \"Front Wall\", \"Back Wall\", \"Ceiling\", \"Ceiling Panels\"];\r\n }\r\n\r\n load(dbFeature, loadFeature = true) {\r\n let relatedItemName = \"\",\r\n RelatedItemClass = null;\r\n switch (dbFeature.groupName) {\r\n case \"Left Wall\":\r\n case \"Left Wall Crop\":\r\n relatedItemName = \"leftWall\";\r\n RelatedItemClass = LeftWall;\r\n break;\r\n case \"Right Wall\":\r\n case \"Right Wall Crop\":\r\n relatedItemName = \"rightWall\";\r\n RelatedItemClass = RightWall;\r\n break;\r\n case \"Center Wall\":\r\n relatedItemName = \"centerWall\";\r\n RelatedItemClass = CenterWall;\r\n break;\r\n case \"Front Wall\":\r\n case \"Front Wall Crop\":\r\n relatedItemName = \"frontWall\";\r\n RelatedItemClass = FrontWall;\r\n break;\r\n case \"Back Wall\":\r\n case \"Beack Wall\":\r\n relatedItemName = \"backWall\";\r\n RelatedItemClass = BackWall;\r\n break;\r\n case \"Split Wall\":\r\n relatedItemName = \"splitWall\";\r\n RelatedItemClass = SplitWall;\r\n break;\r\n case \"Left Wall Splitter\":\r\n relatedItemName = \"leftWallSplitter\";\r\n RelatedItemClass = LeftWallSplitter;\r\n break;\r\n case \"Ceiling Panels\":\r\n relatedItemName = \"ceilingPanels\";\r\n RelatedItemClass = CeilingPanels;\r\n break;\r\n case \"Ceiling\":\r\n case \"Cealing\":\r\n relatedItemName = \"ceiling\";\r\n RelatedItemClass = Ceiling;\r\n break;\r\n }\r\n return this.loadCommon(relatedItemName, RelatedItemClass, dbFeature, loadFeature)\r\n }\r\n\r\n isSubTypeWithItems() {\r\n return false;\r\n }\r\n\r\n subParts(withHidden = true) {\r\n return this.relatedItems\r\n .filter(item => {\r\n return this.filterRelatedItem(item, withHidden)\r\n })\r\n .map(_ => new DesignNavigationItem(_.partName, _));\r\n }\r\n\r\n handleSubPartClick() {\r\n\r\n }\r\n\r\n recoverPrevioslySelected(activeRelatedPart) {\r\n const {activeQuoteIndex} = store.getState().quotesState;\r\n this.relatedItems.forEach(relatedItem => {\r\n if (relatedItem.partId !== activeRelatedPart.partId && relatedItem.activeFeatureBeforeAllWalls) {\r\n if (relatedItem.activeFeatureBeforeAllWalls === \"placeholder\") {\r\n relatedItem.placeholderChanged = false;\r\n relatedItem.firstClick[activeQuoteIndex] = false;\r\n } else if (!relatedItem.selectedByUser) {\r\n relatedItem.activeFeatureBeforeAllWalls.clickFromAllWalls();\r\n }\r\n }\r\n });\r\n }\r\n\r\n getSplitWallType() {\r\n if (!this.splitWall) {\r\n return null\r\n }\r\n if (!this.splitWall.disabled && this.splitWall.activeFeature && this.splitWall.activeFeature.metaData[\"SplitWallType\"]\r\n && this.splitWall.activeFeature.matchesMetaForArrayOfConditions(this.splitWall.getArrayOfConditions())) {\r\n return this.splitWall.activeFeature.metaData[\"SplitWallType\"]\r\n } else {\r\n return [\"NW\", \"0\"]\r\n }\r\n }\r\n\r\n}\r\n","import debounce from \"lodash/debounce\";\r\nimport $ from 'jquery';\r\n\r\nimport {getMetadataByDimensions, scrollToDivInArea} from \"../../../misc/utils\";\r\nimport {getEventPosition, getFeatureIsLocked, isIframe} from \"../../../misc/helpers\";\r\nimport {vanityWizardFilters, showerWizardFilters, NotQCVanityDoorStylesFilters} from '../../bvComponent/core/constants';\r\nimport {\r\n CABINET_GROUP,\r\n CABINET_WIZARD_BUTTONS, COUNTERTOP_GROUP,\r\n COUNTERTOP_WIZARD_BUTTONS, LayoutAbbreviations,\r\n MODULE_CONTEXT_MENU_TYPES\r\n} from '../../kvComponent/core/constants';\r\nimport {ContentType, PartMenuType, UserPopupTypes} from \"../constants\";\r\nimport ActionTypes from \"../../../misc/actionTypes\";\r\nimport Analytics from './../../../analytics';\r\nimport {getBvGroupFeatures} from \"../../../api/server-api\";\r\nimport {loaderDisable, loaderEnable} from \"../../ui/loaderView\";\r\n\r\nimport {getCurrentLayout} from \"../../appLayout\";\r\nimport CountertopSwitchers from \"../../kvComponent/navigation/countertopSwitchers\";\r\nimport CabinetSwitchers from \"../../kvComponent/navigation/cabinetSwitchers\";\r\nimport NavigationRequests from \"./navigationRequests\";\r\nimport {toggleUpdateDisableFeatureGroupRadio} from \"../../../actions/navigationFunctions\";\r\nimport store from \"../../../store\";\r\nimport {CABINET_GROUP_BATHROOM, COUNTERTOP_GROUP_BATHROOM} from \"../../bvSceneComponent/core/constants\";\r\nimport Config from \"../../../config\";\r\nimport {\r\n // checkForCompatabilityAlert,\r\n clickOnSimilarFeatures,\r\n getApplyToLogic,\r\n} from \"../../look/lookNavigation/lookNavigationFunctions\";\r\nimport {navFeatureCLick} from \"../../look/lookNavigation/lookFunctions\";\r\nimport {updateCanvasCount} from \"../../../actions/actionFunctions\";\r\nimport {VISUALIZER_MANAGEMENT_ACTIONS} from \"../../../misc/constants\";\r\nimport {searchProductRequest} from \"../../../api/search-api\";\r\nimport {featureCanChangeShowerSize, searchForSameNameWallsBeforeFeatureApply} from \"../../look/bathroomFunctions\";\r\nimport {getSideBarSubParts} from \"./navUtils\";\r\n// import {setLookCompatabilityAlert} from \"../../../actions/lookFunctions\";\r\n\r\nexport default class Navigation extends NavigationRequests { // this class is used for both Desktop & Mobile navigations to avoid method's duplicating\r\n\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n showNavigation: false,\r\n contentType: ContentType.None,\r\n parentNavigationItem: null, // coming from main menu, Vanity, Floor, ...\r\n childNavigationItem: null, // coming from a complex part's sub part, such as Vanity/Toilet\r\n searchText: \"\",\r\n designNavigationItems: [],\r\n contextMenuOpen: false,\r\n hoveredLayer: {},\r\n navWidth: 0,\r\n contextMenuPosition: {\r\n top: 0,\r\n left: 0\r\n },\r\n contextMenuPonyWall: false,\r\n filters: {},\r\n activeDefaultPreset: null,\r\n updateSidebarItems: false,\r\n vanityWizardGroups: vanityWizardFilters.map((filterName) => { // filterGroupsId's & their selected values\r\n return {\r\n filterName,\r\n selectedValueId: null,\r\n selectedValueName: \"\",\r\n hidden: filterName === \"Material\"\r\n }\r\n }),\r\n showerWallWizardGroups: showerWizardFilters.map((filterName) => { // filterGroupsId's & their selected values\r\n const wizardFilters = [\"SlabColor\", \"TileColor\", \"TilePattern\", \"AcrylicPattern\", \"AcrylicColor\"];\r\n return {\r\n filterName,\r\n selectedValueId: null,\r\n selectedValueName: \"\",\r\n hidden: wizardFilters.includes(filterName)\r\n }\r\n }),\r\n showerWallWizardGroupsSelected: false,\r\n showFeatureWizard: true,\r\n wizardStepIndex: 0,\r\n wizardActiveItemIsLocked: false,\r\n showFilterSelection: false\r\n };\r\n\r\n this.shouldRecoverWalls = false;\r\n this.navigationIsClosing = false;\r\n this.defaultPresetIndexToClick = null;\r\n }\r\n\r\n _componentDidMount() {\r\n const layout = getCurrentLayout();\r\n this.setState({\r\n designNavigationItems: layout.designNavigationItems(),\r\n });\r\n this.setIframeMessaging();\r\n document.getElementById(this.props.canvasId).addEventListener('click', this.bindCanvasClick);\r\n $(document).on(ActionTypes.USER_IS_LOGGED_IN, this.userHasLoggedIn);\r\n if (window.innerWidth < 480) { // workarounds for screens without the rotate icon\r\n // if (!window.rotatedCanvasTranslateIsSet) { // making canvas scroll to center\r\n // setTimeout(() => {\r\n // const $canvas = $('.canvas');\r\n // $canvas.css(\"transform\", `translateY(${window.innerWidth - $canvas.height()}px`);\r\n // window.rotatedCanvasTranslateIsSet = true;\r\n // }, 500);\r\n // }\r\n $(\".room .menu\").hide();\r\n setTimeout(() => {\r\n $(\".room .menu\").show(); // fix for menu blocking the main canvas\r\n }, 0)\r\n }\r\n\r\n }\r\n\r\n componentWillUnmount() {\r\n document.getElementById(this.props.canvasId).removeEventListener('click', this.bindCanvasClick);\r\n $(document).off(ActionTypes.USER_IS_LOGGED_IN, this.userHasLoggedIn);\r\n $(document).off('click', this.handleWrapperBlur);\r\n $(document).off(ActionTypes.OPEN_MOBILE_NAVIGATION);\r\n $(document).off(ActionTypes.CHANGE_MOBILE_MENU_CONTENT_TYPE);\r\n if (Config.isVisualizerManagement()) {\r\n window.removeEventListener(\"message\", this.messageListening);\r\n }\r\n if (this.props.toggleDesktopNavigation) {\r\n this.props.toggleDesktopNavigation(false)\r\n }\r\n if (this.props.setActiveNavigationNames) {\r\n this.props.setActiveNavigationNames(\"\", \"\")\r\n }\r\n }\r\n\r\n _componentWillReceiveProps(nextProps) {\r\n if (nextProps.visualizerTutorialStep === 2 && (this.props.visualizerTutorialStep === 1)\r\n && this.props.setVisualizerTutorialStep\r\n && this.props.showVisualizerTutorial) {\r\n this.openLayoutMenu(() => {\r\n const $scrollList = $(\".layout-list\");\r\n if (!$scrollList || !$scrollList.find(\".active\") || !$scrollList.find(\".active\").offset()) {\r\n return false\r\n }\r\n $scrollList.animate({scrollLeft: $scrollList.find(\".active\").offset().left}, 800, () => {\r\n // $(\"html, body\").animate({scrollTop: document.body.scrollHeight/4}, 500);\r\n setTimeout(() => {\r\n setTimeout(() => {\r\n this.closeNavigation();\r\n this.props.setVisualizerTutorialStep(3);\r\n this.props.showVisualizerTutorial(true);\r\n }, 300)\r\n }, 600)\r\n });\r\n });\r\n }\r\n const layout = getCurrentLayout();\r\n if(!this.state.designNavigationItems || !this.state.designNavigationItems.length) {\r\n this.setState({designNavigationItems: layout.designNavigationItems()});\r\n }\r\n }\r\n\r\n updateComponent = () => {\r\n this.forceUpdate();\r\n };\r\n\r\n userHasLoggedIn = () => { // click on current active item after unlock\r\n const layout = getCurrentLayout();\r\n if (this.props.activeFeature && this.state.showNavigation && this.state.contentType === ContentType.Design) {\r\n if (this.state.childNavigationItem) {\r\n const navItemToClick = layout.designNavigationItems(this.state.childNavigationItem, {}, \"\", true)\r\n .find(navItem => {\r\n return this.props.activeFeature.dbFeature.id === navItem.part.dbFeature.id;\r\n });\r\n if (navItemToClick) {\r\n this.handleNavigationItemClick(navItemToClick);\r\n }\r\n } else {\r\n this.handleNavigationItemClick({\r\n part: this.props.activeFeature\r\n });\r\n }\r\n this.props.refreshCB();\r\n } else if (this.state.contentType === ContentType.DisplayRoom && (this.defaultPresetIndexToClick || this.defaultPresetIndexToClick === 0)\r\n && (!this.props.fabricatorSettings.twoFA || (this.props.fabricatorSettings.twoFA && this.props.isPhoneNumberValidated))) {\r\n this.handleDefaultPresetClick(this.defaultPresetIndexToClick)\r\n }\r\n this.forceUpdate(); // update react virtualized grid for Safari mobile\r\n };\r\n\r\n setIframeMessaging = () => {\r\n if (Config.isVisualizerManagement()) {\r\n window.addEventListener(\"message\", this.messageListening);\r\n }\r\n };\r\n\r\n messageListening = (event) => {\r\n if (event.data && event.data.action === VISUALIZER_MANAGEMENT_ACTIONS.closeVisualizerNavigation) {\r\n this.closeMobileNavigationMenu();\r\n }\r\n };\r\n\r\n closeMobileNavigationMenu = () => {};\r\n\r\n triggerOpenNavigationMenu = (hoveredZone, clickedParent, activeNavigationFilter = null) => {\r\n const layout = getCurrentLayout();\r\n const designNavigationItems = layout.designNavigationItems();\r\n const menuItemToShow = clickedParent\r\n ? designNavigationItems.find(item => item.text === clickedParent)\r\n : designNavigationItems.find(item => item.text === hoveredZone);\r\n\r\n if (menuItemToShow) {\r\n this.setState({\r\n parentNavigationItem: menuItemToShow,\r\n childNavigationItem: null\r\n }, () => {\r\n\r\n if (menuItemToShow.part.menuType === PartMenuType.Simple) {\r\n this.checkIfAllFeaturesReceived(menuItemToShow, \"parentNavigationItem\");\r\n }\r\n\r\n if (menuItemToShow.part.handleClick) {\r\n menuItemToShow.part.handleClick();\r\n }\r\n // this.props.refreshCB(); // this refresh canvas (making redraw), but we need green zone to be shown! if needed - make settimeout 2 secs\r\n\r\n if (clickedParent) {\r\n const subMenuItemToShow = this.state.parentNavigationItem.part.subParts().find(item => {\r\n return item.text === hoveredZone\r\n });\r\n if (subMenuItemToShow) {\r\n this.handleSubPartClick(subMenuItemToShow, activeNavigationFilter);\r\n }\r\n }\r\n\r\n });\r\n this.props.setDefaultSelectionGroup(menuItemToShow.part.partName);\r\n }\r\n if (hoveredZone === \"Floor\") {\r\n $('html, body').animate({scrollTop: document.body.scrollHeight}, 800);\r\n } else if (hoveredZone === \"Ceiling\" || hoveredZone === \"Window\") {\r\n $('html, body').animate({scrollTop: 0}, 800);\r\n }\r\n };\r\n\r\n handleParentItemClick = (item) => {\r\n this.setState({\r\n parentNavigationItem: item,\r\n showFilterSelection: item.text === \"Floor\" && item.part.allFeaturesReceived, // show filters only if subItemPart has all features\r\n }, () => {\r\n // if (subParts[0] && (subParts[0].part.menuType !== PartMenuType.Simple)) {\r\n // this.handleSubPartClick(subParts[0])\r\n // }\r\n if (item.text === \"Walls\" || item.text === \"Shower\" || item.text === \"Bathtub\" || item.text === \"Vanity\" || item.text === \"Toilet\"\r\n || (item.menuType === PartMenuType.Complex)) {\r\n const subParts = getSideBarSubParts(this.state.parentNavigationItem.part);\r\n if (subParts.length) {\r\n this.handleSubPartClick(subParts[0])\r\n }\r\n }\r\n if ((item.text === \"Ceiling\" &&\r\n (document.kvConfig.visualizerType === \"Bathroom\" || document.kvConfig.visualizerType === \"BV\")) || item.text === \"Window\") {\r\n this.setState({\r\n childNavigationItem: null\r\n });\r\n this.checkIfAllFeaturesReceived(item, \"parentNavigationItem\");\r\n }\r\n this.scrollToDefault(item);\r\n });\r\n this.props.setDefaultSelectionGroup(item.part.partName);\r\n };\r\n\r\n handleLayoutItemClick = layoutType => {\r\n const layout = getCurrentLayout();\r\n if (document.kvConfig.visualizerType === \"Kitchen\" && layout.getCurrentLayoutAbbreviation().includes(\"I\")\r\n && !LayoutAbbreviations[layoutType].includes(\"I\")) {\r\n this.resetNavigation();\r\n }\r\n if (layout.type !== layoutType) {\r\n this.changeLayout(layoutType)\r\n }\r\n };\r\n\r\n resetNavigation = () => {\r\n this.setState({\r\n parentNavigationItem: null,\r\n childNavigationItem: null,\r\n searchText: \"\"\r\n });\r\n this.props.setActiveFeature(null);\r\n if (this.props.setActiveNavigationFilter) {\r\n this.props.setActiveNavigationFilter(CABINET_WIZARD_BUTTONS[0].buttonId);\r\n this.props.setActiveNavigationFilterStepIndex(0);\r\n }\r\n };\r\n\r\n getSearchProducts = (searchText) => {\r\n if (searchText && searchText.length > 2) {\r\n this.props.setNavigationLoading(true);\r\n const childItem = this.state.childNavigationItem ? this.state.childNavigationItem.part : this.state.parentNavigationItem.part;\r\n const promises = [searchProductRequest(childItem, searchText)];\r\n if (COUNTERTOP_GROUP.includes(childItem.partId) && document.kvConfig.visualizerType !== \"kvScene\") {\r\n // we have requests on click\r\n const layout = getCurrentLayout();\r\n COUNTERTOP_GROUP.forEach(neededPartId => {\r\n if (neededPartId !== childItem.partId) {\r\n const featureGroup = layout.getFeatureGroupByPartId(neededPartId);\r\n if (featureGroup) {\r\n promises.push(Navigation.searchFeaturesByName(featureGroup, searchText, 1000));\r\n }\r\n }\r\n });\r\n }\r\n Promise.all(promises)\r\n .then(() => {\r\n this.props.setNavigationLoading(false); // for loading & desktop update\r\n this.setState({ // for mobile update\r\n render: false,\r\n }, () => {\r\n this.setState({\r\n render: true,\r\n });\r\n });\r\n })\r\n }\r\n };\r\n\r\n searchAPIDebounced = debounce(this.getSearchProducts, 500);\r\n\r\n handleSearchInputChange = async (event) => {\r\n const searchText = event.target.value;\r\n this.setState({\r\n searchText\r\n });\r\n await this.searchAPIDebounced(searchText);\r\n };\r\n\r\n ponyWallAndLeftWallClick = (menuItem) => {\r\n const layout = getCurrentLayout();\r\n if (!this.props.fabricatorSettings.leadCapture || (this.props.fabricatorSettings.leadCapture && this.props.userIsLoggedIn)) {\r\n if (menuItem.part.partId === \"shower_body\" && (menuItem.text === \"Left Shower Wall\" || menuItem.text === \"Pony Wall\")) {\r\n const shower = layout.parts.Shower;\r\n const activeShower = shower.getActiveShowerGroup();\r\n const dimensions = getMetadataByDimensions(activeShower.showerDimensions());\r\n const wallParent = layout.parts.Walls;\r\n if (menuItem.text === \"Left Shower Wall\" && dimensions === \"Pony\" && wallParent.ponyWall.placeholderChanged) { // switch from Pony -> to Left Shower Wall\r\n const name1 = wallParent.ponyWall.activeFeature.getSplittedFeatureName();\r\n this.receiveAllFeaturesAndClickFeatureByName(wallParent, \"left_shower_wall\", name1);\r\n } else if (menuItem.text === \"Pony Wall\" && dimensions !== \"Pony\" && wallParent.wallExL.placeholderChanged) {\r\n const name1 = wallParent.wallExL.activeFeature.getSplittedFeatureName();\r\n this.receiveAllFeaturesAndClickFeatureByName(wallParent, \"pony_wall\", name1);\r\n }\r\n }\r\n }\r\n };\r\n\r\n receiveAllFeaturesAndClickFeatureByName = (parent, partId, name1) => {\r\n const exLSubPart = parent.getRelatedItems().find(relItem => relItem.partId === partId);\r\n const findAndClick = () => {\r\n const wallExLFeature = parent.wallExL.navigationSubItems().find(navItem => {\r\n return navItem.part.getSplittedFeatureName() === name1\r\n });\r\n if (wallExLFeature) {\r\n wallExLFeature.part.handleClick(true);\r\n this.props.refreshCB();\r\n }\r\n };\r\n findAndClick(); // first try without the request\r\n this.checkIfAllFeaturesReceived({part: exLSubPart}, null, findAndClick); // then receive all walls\r\n };\r\n\r\n _menuOpened = () => {\r\n if (isIframe() && window.parent) {\r\n window.parent.postMessage({\r\n action: 'menu_opened',\r\n payload: {}\r\n }, \"*\");\r\n }\r\n if (this.props.setDemoPointClicked && !this.props.visualizerTutorialIsOpened) {\r\n this.props.setDemoPointClicked()\r\n }\r\n if (this.props.toggleDesktopNavigation) {\r\n this.props.toggleDesktopNavigation(true)\r\n }\r\n if (this.props.setModuleContextMenuType) {\r\n this.props.setModuleContextMenuType(MODULE_CONTEXT_MENU_TYPES.Filters)\r\n }\r\n };\r\n\r\n renderErrorPopup(message) {\r\n this.props.changeMessageBoxState({\r\n visible: true,\r\n error: true,\r\n message,\r\n buttons: [{\r\n text: \"messageBox.buttonOk\",\r\n color: 'red',\r\n click: () => {\r\n this.props.changeMessageBoxState({visible:false});\r\n }\r\n }]\r\n });\r\n }\r\n\r\n itemClick = async (item, ignoreLocked) => {\r\n\r\n const layout = getCurrentLayout();\r\n\r\n if (item && item.text === \"Floor\") {\r\n $('html, body').animate({scrollTop: document.body.scrollHeight}, 800);\r\n } else if (item && item.text === \"Ceiling\") {\r\n $('html, body').animate({scrollTop: 0}, 800);\r\n }\r\n\r\n if (layout.visualizerType === \"bvScene\") {\r\n await searchForSameNameWallsBeforeFeatureApply(item.part);\r\n }\r\n\r\n if (layout.isNewLayout && !item.part.relatedItems) {\r\n\r\n const applyFeature = async (feature) => {\r\n\r\n if (featureCanChangeShowerSize(feature)) {\r\n await searchForSameNameWallsBeforeFeatureApply(feature);\r\n }\r\n\r\n navFeatureCLick(feature, true, ignoreLocked);\r\n\r\n const applyToLogic = getApplyToLogic(item.part);\r\n if (applyToLogic && Array.isArray(applyToLogic.currentApplyToArray) && applyToLogic.currentApplyToArray.length) {\r\n await clickOnSimilarFeatures(item.part, applyToLogic, true);\r\n }\r\n }\r\n\r\n // const compatabilityLogic = checkForCompatabilityAlert(item.part);\r\n // if (compatabilityLogic.length) {\r\n // store.dispatch(setLookCompatabilityAlert({\r\n // visible: true,\r\n // compatabilityLogic,\r\n // clickedFeature: item.part,\r\n // applyFunction: applyFeature.bind(this, item.part) // always apply features from this popup\r\n // }));\r\n // return false\r\n // }\r\n\r\n await applyFeature(item.part);\r\n\r\n } else {\r\n\r\n await item.part.handleClick(ignoreLocked);\r\n\r\n if (this.isWallItem(item.part) && item.part.getParent().getParent().allWallsApplied) {\r\n this.applyAllWalls(item.part, ignoreLocked);\r\n }\r\n if (CABINET_GROUP.includes(item.part.partId) || CABINET_GROUP_BATHROOM.includes(item.part.partId)) {\r\n const featureIsLocked = getFeatureIsLocked(item.part);\r\n CabinetSwitchers.applyAllCabinets(item.part, !featureIsLocked || ignoreLocked);\r\n } else if (COUNTERTOP_GROUP.includes(item.part.partId) || COUNTERTOP_GROUP_BATHROOM.includes(item.part.partId)) {\r\n const featureIsLocked = getFeatureIsLocked(item.part);\r\n CountertopSwitchers.applyAllCountertops(item.part, !featureIsLocked || ignoreLocked);\r\n }\r\n }\r\n\r\n if (item.part.getParent && item.part.getParent().disabled) {\r\n const itemParent = item.part.getParent();\r\n const itemIsLocked = getFeatureIsLocked(item.part, ignoreLocked);\r\n let exLAndBathtubAndSmallRoom = false;\r\n if (itemParent.partId === \"left_shower_wall\" && layout.type === 0) {\r\n const showerBody = layout.parts.Shower.showerBody;\r\n if (showerBody && showerBody.disabled) {\r\n exLAndBathtubAndSmallRoom = true\r\n }\r\n }\r\n if (itemParent.disabled && !exLAndBathtubAndSmallRoom && !itemIsLocked) {\r\n itemParent.disabled = false;\r\n itemParent.disabledClick(); // disable also related parts\r\n store.dispatch(toggleUpdateDisableFeatureGroupRadio(true));\r\n store.dispatch(toggleUpdateDisableFeatureGroupRadio(false));\r\n }\r\n }\r\n if (item.part.getParent && item.part.getParent().getParent) { // enable shower if child is clicked\r\n const parent = item.part.getParent().getParent();\r\n if (parent.partName === \"Shower\" && parent.showerBody.disabled) {\r\n parent.showerBody.disabled = false;\r\n parent.showerBody.disabledClick(); // enable also related parts\r\n }\r\n }\r\n $(window).trigger(ActionTypes.CHANGE_LAYOUT); // update canvas\r\n store.dispatch(updateCanvasCount()); // for look remove button\r\n };\r\n\r\n callMetaMathesFailedPopup = (item, nonCompatibleWith) => {\r\n // console.log('item.matchesMetaFailedArray', item.matchesMetaFailedArray);\r\n const featureIsLocked = getFeatureIsLocked(item.part);\r\n if (!featureIsLocked) {\r\n const message = {\r\n id: \"messageBox.metaDataMatchesFailed\",\r\n featureGroup: item.part.getParent().partName.toLowerCase(),\r\n featureName: item.part.getFeatureName(),\r\n nonCompatibleWith\r\n };\r\n this.props.changeMessageBoxState({\r\n visible: true,\r\n message,\r\n buttons: [{\r\n text: \"messageBox.buttonYes\",\r\n color: 'green',\r\n click: () => {\r\n item.part.handleChangeParent(nonCompatibleWith); // change parent(vanity size)\r\n item.part.handleClick(); // set active\r\n const childNavigationItem = this.state.childNavigationItem;\r\n this.setState({ // update component & navigation\r\n childNavigationItem: null,\r\n },() => {\r\n this.setState({\r\n childNavigationItem\r\n })\r\n });\r\n setTimeout(() => {\r\n scrollToDivInArea($('.feature.active'), $('.categories-list'));\r\n }, 1000);\r\n this.props.changeMessageBoxState({visible:false});\r\n }\r\n },{\r\n text: \"messageBox.buttonNo\",\r\n color: \"blue\",\r\n click: () => {\r\n this.props.changeMessageBoxState({visible:false});\r\n }\r\n }]\r\n });\r\n }\r\n };\r\n\r\n callToiletFailPopup = (clickFrom, item, ignoreLocked = false) => {\r\n const featureIsLocked = getFeatureIsLocked(item.part, ignoreLocked);\r\n if (!featureIsLocked) {\r\n const message = (clickFrom === 'toilet') ? \"messageBox.toiletMetaDataFailed\" : \"messageBox.toiletMetaDataFailedVanity\";\r\n const buttons = (clickFrom === 'toilet')\r\n ? [{\r\n text: \"messageBox.buttonOk\",\r\n color: \"blue\",\r\n click: () => {\r\n this.props.changeMessageBoxState({visible:false});\r\n }\r\n }]\r\n : [{\r\n text: \"messageBox.buttonNo\",\r\n color: \"blue\",\r\n click: () => {\r\n this.props.changeMessageBoxState({visible:false});\r\n }\r\n },{\r\n text: \"messageBox.buttonYes\",\r\n color: \"green\",\r\n click: () => {\r\n this.itemClick(item, ignoreLocked);\r\n this.props.changeMessageBoxState({visible:false});\r\n }\r\n }];\r\n this.props.changeMessageBoxState({\r\n visible: true,\r\n message,\r\n buttons\r\n });\r\n }\r\n };\r\n\r\n toggleApplyWallsCheckbox = () => {\r\n const wallParent = this.state.parentNavigationItem.part;\r\n wallParent.allWallsApplied = !wallParent.allWallsApplied;\r\n if (!wallParent.allWallsApplied && this.shouldRecoverWalls) {\r\n wallParent.recoverPrevioslySelected(this.state.childNavigationItem.part)\r\n } else if (\r\n wallParent.allWallsApplied\r\n && this.state.childNavigationItem\r\n && this.state.childNavigationItem.part\r\n && this.state.childNavigationItem.part.activeFeature\r\n && this.state.childNavigationItem.part.placeholderChanged) {\r\n this.applyAllWalls(this.state.childNavigationItem.part.activeFeature, false);\r\n }\r\n this.props.refreshCB();\r\n };\r\n\r\n rememberWallsSelection = () => { // this is set when new Wall Navigation Item is clicked\r\n const featureGroup = this.state.childNavigationItem.part;\r\n if ((this.isWallItem(featureGroup) || featureGroup.allWallsCanBeApplied)\r\n && this.state.parentNavigationItem.part.setPrevioslySelected) {\r\n this.state.parentNavigationItem.part.setPrevioslySelected(featureGroup);\r\n }\r\n this.shouldRecoverWalls = false;\r\n };\r\n\r\n applyAllWalls = (navigationItemPart, ignoreLocked) => {\r\n // console.log('navigationItem', navigationItem);\r\n const layout = getCurrentLayout();\r\n const wallParent = this.state.parentNavigationItem.part;\r\n const allWalls = wallParent.relatedItems;\r\n\r\n if (document.kvConfig.visualizerType === \"Bathroom\" || document.kvConfig.visualizerType === \"BV\") {\r\n allWalls.forEach((relatedItem) => {\r\n if (this.isWallItem(relatedItem) && (relatedItem.partId !== navigationItemPart.partId)) {\r\n const wallsPartIds = [\"right_shower_wall\", \"left_shower_wall\", \"pony_wall\"];\r\n let featuresAvailableToClick = wallsPartIds.includes(relatedItem.partId)\r\n ? relatedItem.getAvailableFeatures()\r\n : relatedItem.features; // for other walls we don't have filters\r\n const navigationItemName = navigationItemPart.dbFeature.sharedFeatureName;\r\n const neededFeature = featuresAvailableToClick.find((feature) => {\r\n const featureName = feature.dbFeature.sharedFeatureName;\r\n return navigationItemName === featureName\r\n });\r\n // console.log('neededFeature', neededFeature);\r\n neededFeature && neededFeature.clickFromAllWalls(ignoreLocked);\r\n } else if (relatedItem.partId === \"accent_wall\" && !relatedItem.placeholderChanged) {\r\n relatedItem.disabled = true;\r\n }\r\n });\r\n const vanity = layout.parts[\"Vanity\"];\r\n if (vanity.vanityBacksplash && !vanity.vanityBacksplash.placeholderChanged) {\r\n vanity.vanityBacksplash.disabled = true;\r\n }\r\n } else if (document.kvConfig.visualizerType !== \"Bathroom\") {\r\n allWalls.forEach((relatedItem) => {\r\n if (this.isWallItem(relatedItem) && (relatedItem.partId !== navigationItemPart.partId)) {\r\n const navigationItemName = navigationItemPart.dbFeature.sharedFeatureName;\r\n const neededFeature = relatedItem.features.find((feature) => {\r\n const featureName = feature.dbFeature.sharedFeatureName;\r\n return featureName === navigationItemName\r\n });\r\n // console.log('neededFeature', neededFeature);\r\n neededFeature && neededFeature.clickFromAllWalls(ignoreLocked);\r\n }\r\n });\r\n }\r\n\r\n this.shouldRecoverWalls = true;\r\n this.props.refreshCB();\r\n };\r\n\r\n removeChoosingView = (partName) => {\r\n // console.log('partName', partName);\r\n switch (partName) {\r\n case \"Vanity\":\r\n this.props.setVanityType(true);\r\n break;\r\n case \"Shower\":\r\n this.props.setShowerType(true);\r\n break;\r\n default:\r\n break;\r\n }\r\n };\r\n\r\n handleSubTypeClick = subType => { // sidebar radio button click\r\n Analytics.sendClickEvent('sub-type-clicked-' + subType);\r\n this.removeChoosingView(this.state.parentNavigationItem.part.partName);\r\n if (this.props.changeActivePartRelatedItemIndex) {\r\n this.props.changeActivePartRelatedItemIndex(0); // set first item on materials page\r\n }\r\n this.state.parentNavigationItem.part.handleSubTypeClick(subType, this.handleNavigationItemClick);\r\n const childNavigationItem = this.state.parentNavigationItem.part.setDefaultPartAfterSubTypeClick();\r\n this.setState({\r\n childNavigationItem,\r\n showFilterSelection: childNavigationItem.part.allFeaturesReceived, // show filters only if subItemPart has all features\r\n showerWallWizardGroupsSelected: false,\r\n searchText: \"\"\r\n },() => {\r\n this.setNewActiveFeature();\r\n this.rememberWallsSelection();\r\n this.checkIfAllFeaturesReceived(childNavigationItem, \"childNavigationItem\");\r\n });\r\n /*set new materials page subIndex*/\r\n this.setActivePartRelatedItemIndex(childNavigationItem);\r\n this.props.refreshCB();\r\n };\r\n\r\n setActivePartRelatedItemIndex = (childNavigationItem) => {\r\n const layout = getCurrentLayout();\r\n let nextSubPartIndex = 0;\r\n if (this.state.parentNavigationItem && !layout.qtCategories) { // we don't need to set for qtCategories\r\n const subParts = childNavigationItem.part.getParent().subParts(false);\r\n nextSubPartIndex = subParts.findIndex(currentSubPart => {\r\n return currentSubPart.part.partId === childNavigationItem.part.partId;\r\n });\r\n }\r\n setTimeout(() => {\r\n this.props.changeActivePartRelatedItemIndex(nextSubPartIndex); // setTimeout is needed cause it needs parent to be updated\r\n }, 0);\r\n };\r\n\r\n setNewActiveFeature = (subNavigationItem) => {\r\n if (!subNavigationItem) {\r\n subNavigationItem = this.state.childNavigationItem || this.state.parentNavigationItem || null;\r\n }\r\n\r\n if (subNavigationItem) {\r\n const featureToSet = ((this.props.fabricatorSettings.leadCapture && !(document.kvConfig.isBackend && document.kvConfig.jobId && document.kvConfig.canSaveQuote))\r\n && !this.props.userIsLoggedIn && subNavigationItem.part.activeLockedFeature)\r\n || ((this.props.fabricatorSettings.leadCapture && !(document.kvConfig.isBackend && document.kvConfig.jobId && document.kvConfig.canSaveQuote))\r\n && this.props.userIsLoggedIn\r\n && subNavigationItem.part.activeLockedFeature\r\n && !subNavigationItem.part.placeholderChanged)\r\n ? subNavigationItem.part.activeLockedFeature\r\n : subNavigationItem.part.activeFeature;\r\n this.props.setActiveFeature(featureToSet);\r\n }\r\n };\r\n\r\n handleDefaultPresetClick = (index, presetIsLocked) => {\r\n const layout = getCurrentLayout();\r\n Analytics.sendClickEvent('preset-selected-' + index);\r\n if (presetIsLocked) {\r\n this.defaultPresetIndexToClick = index;\r\n this.props.toggleUserPopup({\r\n userPopupOpened: true\r\n });\r\n return\r\n }\r\n this.defaultPresetIndexToClick = null;\r\n this.setState({\r\n activeDefaultPreset: index\r\n }, () => {\r\n window.requestInProcess = true;\r\n loaderEnable();\r\n const defaultPreset = this.props.bvPresets[index];\r\n console.log('defaultPreset', defaultPreset);\r\n const cabinetParent = layout.parts[\"Cabinet\"];\r\n const noCabinets = (cabinetParent && cabinetParent.topCabinet\r\n && !cabinetParent.topCabinet.allFeaturesReceived) || (cabinetParent && cabinetParent.bottomCabinet\r\n && !cabinetParent.bottomCabinet.allFeaturesReceived);\r\n if (noCabinets && (document.kvConfig.visualizerType !== \"kvScene\")) {\r\n const neededParts = [\"top_cabinet\", \"bottom_cabinet\"];\r\n const allRelated = cabinetParent.relatedItems.filter((relatedItem) => {\r\n return neededParts.includes(relatedItem.partId) && !relatedItem.allFeaturesReceived\r\n });\r\n const promises = allRelated.map((relatedItem) => {\r\n return getBvGroupFeatures(relatedItem.dbName || relatedItem.partName).then(response => {\r\n relatedItem.setGroupFeatures(Array.isArray(response) ? response : []);\r\n return response\r\n })\r\n });\r\n Promise.all(promises)\r\n .then(() => this.finishPresetLoading(layout, defaultPreset))\r\n } else {\r\n loaderEnable();\r\n this.finishPresetLoading(layout, defaultPreset);\r\n }\r\n });\r\n };\r\n\r\n finishPresetLoading = (layout, preset) => {\r\n layout.setItemsFromBvState(preset)\r\n .then(() => {\r\n window.requestInProcess = false;\r\n loaderDisable();\r\n });\r\n }\r\n\r\n handleUserLoginClick = (userPopupType = UserPopupTypes.Unlock) => {\r\n this.props.toggleUserPopup({\r\n userPopupOpened: true,\r\n userPopupType\r\n });\r\n };\r\n\r\n currentActiveItemIsLocked = (useWizard) => {\r\n\r\n const {visualizerManagement, isBackend, jobId, canSaveQuote} = document.kvConfig;\r\n const {fabricatorSettings, isPhoneNumberValidated, activeFeature, filterGroups, activeQuoteIndex} = this.props;\r\n const {showFeatureWizard, wizardActiveItemIsLocked} = this.state;\r\n\r\n if (!fabricatorSettings.leadCapture\r\n || (fabricatorSettings.leadCapture && visualizerManagement)\r\n || (fabricatorSettings.leadCapture && isPhoneNumberValidated)\r\n || (fabricatorSettings.leadCapture && (isBackend && jobId && canSaveQuote))){\r\n return false\r\n }\r\n\r\n const itemHasLockedFilters = () => {\r\n let lockedFilters = false;\r\n const filterValues = activeFeature && activeFeature.dbFeature && activeFeature.dbFeature.filterValueIDs;\r\n if (filterValues) {\r\n lockedFilters = Object.keys(filterValues).some((filterKey) => {\r\n const filterGroup = filterGroups.find(group => group.id === +filterKey);\r\n const filterValue = filterGroup && filterGroup.values && filterGroup.values.find(value => value.id === filterValues[filterKey][0]);\r\n return filterValue && filterValue.lockedInWizard\r\n });\r\n }\r\n return lockedFilters\r\n };\r\n\r\n return (\r\n activeFeature\r\n && activeFeature.getParent().firstClick[activeQuoteIndex]\r\n && activeFeature.dbFeature\r\n && !activeFeature.dbFeature.unlocked\r\n && !activeFeature.notAvailableInVisualizer\r\n && !(useWizard && showFeatureWizard)\r\n ) || (useWizard && showFeatureWizard && wizardActiveItemIsLocked) || itemHasLockedFilters()\r\n };\r\n\r\n checkedForLockedPresets = () => {\r\n // const layout_typelayout_type: 1\r\n const layout = getCurrentLayout();\r\n const fabricatorSettings = this.props.fabricatorSettings;\r\n const showSmallRoomLayout = fabricatorSettings &&\r\n (fabricatorSettings.showSmallDesignForClients\r\n || (fabricatorSettings.showSmallDesignFromDashboard && document.kvConfig.isBackend));\r\n return Array.isArray(this.props.bvPresets) && this.props.bvPresets.length\r\n ? this.props.bvPresets\r\n .filter(preset => {\r\n if (!showSmallRoomLayout && (document.kvConfig.visualizerType === \"Bathroom\"\r\n || document.kvConfig.visualizerType === \"BV\")) {\r\n return preset.layout_type !== 0\r\n }\r\n return preset\r\n })\r\n .map((preset) => {\r\n if (preset.presetUnlocked) {\r\n preset.presetIsLocked = false\r\n } else {\r\n preset.presetIsLocked = this.props.fabricatorSettings.leadCapture\r\n && !(document.kvConfig.isBackend && document.kvConfig.jobId && document.kvConfig.canSaveQuote)\r\n && !this.props.isPhoneNumberValidated && (!preset.presetUnlocked || layout.bvStateHasLockedItems(preset))\r\n }\r\n // console.log(\"preset.presetIsLocked\", preset.presetIsLocked);\r\n return preset\r\n }).sort((a, b) => a.presetIsLocked !== b.presetIsLocked ? a.presetIsLocked < b.presetIsLocked ? -1 : 1 : 0) // sort by presetIsLocked\r\n : []\r\n };\r\n\r\n closeContextMenu = () => {\r\n this.setState({\r\n contextMenuOpen: false,\r\n })\r\n };\r\n\r\n /*** WIZARD ***/\r\n\r\n exitFeatureWizard = (wizardGroups, partId) => {\r\n this.setState({\r\n wizardStepIndex: 0,\r\n showFeatureWizard: false,\r\n wizardActiveItemIsLocked: false,\r\n searchText: \"\"\r\n });\r\n this.setWizardGroups(wizardGroups, partId);\r\n };\r\n\r\n enableFeatureWizard = (wizardStepIndex) => {\r\n this.setState({\r\n wizardStepIndex,\r\n showerWallWizardGroupsSelected: wizardStepIndex !== 0\r\n }, () => {\r\n this.setState({\r\n showFeatureWizard: true,\r\n })\r\n });\r\n };\r\n\r\n setWizardStepIndex = (wizardStepIndex) => {\r\n this.setState({\r\n wizardStepIndex\r\n })\r\n };\r\n\r\n setWizardGroups = (wizardGroups, partId) => {\r\n const wizardGroupsName = this.getWizardGroupsByPartId(partId);\r\n this.setState({\r\n [wizardGroupsName]: this.state[wizardGroupsName].map((wizardGroup) => {\r\n const currentGroup = wizardGroups.find(wGroup => wGroup.filterName === wizardGroup.filterName);\r\n if (currentGroup) {\r\n wizardGroup.selectedValueId = currentGroup.selectedValueId;\r\n wizardGroup.selectedValueName = currentGroup.selectedValueName;\r\n wizardGroup.hidden = currentGroup.hidden;\r\n wizardGroup.values = currentGroup.values;\r\n }\r\n return wizardGroup\r\n })\r\n })\r\n };\r\n\r\n setWizardLockedItem = (itemIsLocked) => {\r\n this.setState({\r\n wizardActiveItemIsLocked: itemIsLocked\r\n })\r\n };\r\n\r\n resetActiveFeature = () => {\r\n this.props.setActiveFeature(null);\r\n this.setState({\r\n wizardActiveItemIsLocked: false\r\n })\r\n };\r\n\r\n resetWizardSteps = () => {\r\n this.setState({\r\n vanityWizardGroups: vanityWizardFilters.map((filterName) => { // filterGroupsId's & their selected values\r\n return {\r\n filterName,\r\n selectedValueId: null,\r\n selectedValueName: \"\",\r\n hidden: filterName === \"Material\"\r\n }\r\n }),\r\n showerWallWizardGroups: showerWizardFilters.map((filterName) => {\r\n const wizardFilters = [\"SlabColor\", \"TileColor\", \"TilePattern\", \"AcrylicPattern\", \"AcrylicColor\"];\r\n return {\r\n filterName,\r\n selectedValueId: null,\r\n selectedValueName: \"\",\r\n hidden: wizardFilters.includes(filterName)\r\n }\r\n }),\r\n showFeatureWizard: true,\r\n wizardStepIndex: 0,\r\n wizardActiveItemIsLocked: false,\r\n })\r\n };\r\n\r\n getWizardGroupsByPartId = (partId) => {\r\n switch (partId) {\r\n case \"vanity_cabinet\":\r\n return \"vanityWizardGroups\";\r\n case \"shower_interior_wall\":\r\n return \"showerWallWizardGroups\";\r\n default:\r\n return \"\";\r\n }\r\n };\r\n\r\n getFilterDisplayName = (filterName, intl = null) => {\r\n switch (filterName) {\r\n case \"DoorStyle\":\r\n return intl ? intl.formatMessage({id: \"Door Style\"}) : \"Door Style\"\r\n case \"Material\":\r\n return intl\r\n ? intl.formatMessage({id: this.state.childNavigationItem.part.partId === \"vanity_cabinet\" ? \"WoodType\" : \"Material\"})\r\n : this.state.childNavigationItem.part.partId === \"vanity_cabinet\" ? \"Wood Type\" : \"Material\";\r\n case \"AcrylicColor\":\r\n case \"DuraBathColor\":\r\n case \"SlabColor\":\r\n case \"TileColor\":\r\n return intl ? intl.formatMessage({id: \"Color\"}) : \"Color\";\r\n case \"AcrylicPattern\":\r\n return intl ? intl.formatMessage({id: \"Pattern\"}) : \"Pattern\";\r\n default:\r\n return intl ? intl.formatMessage({id: filterName}) : filterName\r\n }\r\n };\r\n\r\n removeFilterSelection = () => {\r\n this.setState({\r\n showFilterSelection: false\r\n })\r\n };\r\n\r\n toggleWizardFilterSelection = (showerWallWizardGroupsSelected) => {\r\n this.setState({\r\n showerWallWizardGroupsSelected\r\n })\r\n };\r\n\r\n setWizardFiltersFromActiveItem = (activeFeature) => {\r\n\r\n const {fabricatorSettings} = this.props;\r\n const useWizard = fabricatorSettings && (fabricatorSettings.wizardConsumers || (fabricatorSettings.wizardClients && document.kvConfig.isBackend));\r\n\r\n if (useWizard) {\r\n const currentActiveFilters = activeFeature.dbFeature.filterValueIDs;\r\n const partId = this.state.childNavigationItem.part.partId;\r\n const wizardGroupsName = this.getWizardGroupsByPartId(partId);\r\n\r\n let wizardGroups = this.state[wizardGroupsName].map((wizardGroup) => {\r\n if (partId === \"vanity_cabinet\") {\r\n const filterGroup = this.props.filterGroups.find(filterGroup => {\r\n return filterGroup.name === wizardGroup.filterName\r\n });\r\n let filterGroupValue = {};\r\n if (filterGroup && currentActiveFilters[filterGroup.id]) {\r\n const selectedFilterValueId = currentActiveFilters[filterGroup.id][0];\r\n filterGroupValue = filterGroup && filterGroup.values.find(filterGroupValue => {\r\n return filterGroupValue.id === selectedFilterValueId\r\n });\r\n }\r\n // console.log('filterGroupValue', filterGroupValue);\r\n if (wizardGroup.filterName === \"Material\") { // check for existing BV filters\r\n const doorStyleFilter = this.props.filterGroups.find(filterGroup => filterGroup.name.trim() === \"DoorStyle\");\r\n if (doorStyleFilter) {\r\n const doorStyleActiveValue = currentActiveFilters[doorStyleFilter.id];\r\n const doorStyleFilterValue = doorStyleFilter.values.find(filterObj => {\r\n return doorStyleActiveValue && filterObj.id === doorStyleActiveValue[0]\r\n });\r\n // console.log('doorStyleFilterValue', doorStyleFilterValue);\r\n wizardGroup.hidden = filterGroupValue && doorStyleFilterValue && !NotQCVanityDoorStylesFilters.includes(doorStyleFilterValue.value);\r\n }\r\n }\r\n } else if (partId === \"shower_interior_wall\") {\r\n const stepName = wizardGroup.filterName.toLowerCase();\r\n const materialFilter = this.props.filterGroups.find(filterGroup => filterGroup.name.trim() === \"Material\");\r\n if (Object.keys(currentActiveFilters).length && materialFilter && currentActiveFilters[materialFilter.id]) { // check for existing BV filters\r\n const materialValueId = currentActiveFilters[materialFilter.id][0];\r\n const materialValue = materialFilter.values.find(val => val.id === materialValueId);\r\n // console.log('materialValue.value', materialValue.value);\r\n wizardGroup.hidden = (materialValue && (\r\n (materialValue.value !== \"DuraBath\" && stepName === \"durabathcolor\")\r\n || (materialValue.value !== \"DuraBath\" && materialValue.value !== \"Tile\" && stepName === \"tilepattern\")\r\n || (materialValue.value !== \"Acrylic\" && stepName === \"acrylicpattern\")\r\n || (materialValue.value !== \"Acrylic\" && stepName === \"acryliccolor\")\r\n || (materialValue.value !== \"Tile\" && stepName === \"tilecolor\")\r\n || (materialValue.value !== \"Slab\" && stepName === \"slabcolor\")\r\n ))\r\n }\r\n }\r\n return wizardGroup\r\n });\r\n\r\n this.setState({\r\n [wizardGroupsName]: wizardGroups\r\n });\r\n }\r\n };\r\n\r\n /*** WIZARD END ***/\r\n\r\n setNavigationFilterIfTheChildWasChanged(childNavigationItemPartId, activeNavigationFilter) {\r\n if (this.props.setActiveNavigationFilter && !activeNavigationFilter) {\r\n if (childNavigationItemPartId === \"edge_profile\"\r\n || childNavigationItemPartId === \"center_island_edge\"\r\n && this.props.activeNavigationFilter !== COUNTERTOP_WIZARD_BUTTONS[3].buttonId) {\r\n this.props.setActiveNavigationFilter(COUNTERTOP_WIZARD_BUTTONS[3].buttonId);\r\n this.props.setActiveNavigationFilterStepIndex(3);\r\n } else if (childNavigationItemPartId === \"countertop\"\r\n || childNavigationItemPartId === \"center_island_countertop\"\r\n && (\r\n this.props.activeNavigationFilter !== COUNTERTOP_WIZARD_BUTTONS[0].buttonId\r\n || this.props.activeNavigationFilter !== COUNTERTOP_WIZARD_BUTTONS[1].buttonId\r\n || this.props.activeNavigationFilter !== COUNTERTOP_WIZARD_BUTTONS[2].buttonId\r\n )){\r\n this.props.setActiveNavigationFilter(COUNTERTOP_WIZARD_BUTTONS[0].buttonId);\r\n this.props.setActiveNavigationFilterStepIndex(0);\r\n } else if (childNavigationItemPartId === \"backsplash\"\r\n && !(this.props.activeNavigationFilter !== COUNTERTOP_WIZARD_BUTTONS[4].buttonId)) {\r\n this.props.setActiveNavigationFilter(COUNTERTOP_WIZARD_BUTTONS[4].buttonId);\r\n this.props.setActiveNavigationFilterStepIndex(4);\r\n }\r\n }\r\n }\r\n\r\n showPositionsPopup = (item, event) => {\r\n const itemParent = item.part.getParent ? item.part.getParent() : null;\r\n const featureIsLocked = getFeatureIsLocked(item.part);\r\n if (itemParent && !item.part.notAvailableInVisualizer && !featureIsLocked\r\n && this.props.toggleNavItemPositionModal && itemParent.showLayerPositionsModal\r\n && itemParent.showLayerPositionsModal(item.part) && event) {\r\n const eventPosition = getEventPosition(event);\r\n this.props.toggleNavItemPositionModal({\r\n popupOpened: true,\r\n popupPosition: {\r\n left: eventPosition.x,\r\n top: eventPosition.y\r\n },\r\n activePartId: item.part.partId,\r\n });\r\n $(window).trigger(ActionTypes.UPDATE_ALL_ITEMS); // update buttons\r\n return true\r\n } else if (this.props.navItemPositionModal && this.props.navItemPositionModal.popupOpened) {\r\n this.props.toggleNavItemPositionModal({\r\n popupOpened: false,\r\n });\r\n }\r\n return false\r\n }\r\n\r\n}\r\n","import {Part} from \"../part\";\r\nimport {PartMenuType} from \"../../../visComponents/constants\";\r\nimport {countertopGroupThumbnail} from \"../assets\";\r\nimport DesignNavigationItem from \"../../../visComponents/designNavigationItem\";\r\n\r\nimport Sink from \"../subparts/countertop/sink\";\r\nimport Faucet from \"../subparts/countertop/faucet\";\r\nimport Countertop from \"../subparts/countertop/countertop\";\r\nimport EdgeProfile from \"../subparts/countertop/edgeProfile\";\r\nimport Cutouts from \"../subparts/countertop/cutouts\";\r\nimport Radius from \"../subparts/countertop/radius\";\r\nimport {PLACEMENTS} from \"../../../kvComponent/core/constants\";\r\n\r\nexport default class CountertopGroup extends Part {\r\n static id = 'Countertop';\r\n constructor() {\r\n super(true, false, PartMenuType.Complex);\r\n\r\n this.menuType = PartMenuType.Complex;\r\n this.partName = 'Countertop';\r\n this.partThumbnail = countertopGroupThumbnail;\r\n this.translateId = \"visualizer.kitchen.countertop\";\r\n\r\n // related items\r\n this.sink = null;\r\n this.faucet = null;\r\n this.countertop = null;\r\n this.edgeProfile = null;\r\n this.relatedGroupNames = [\"Faucet\", \"Sink\", \"Countertop\", \"Edge Profile\", \"Cutouts\", \"Radius\"];\r\n }\r\n\r\n load(dbFeature, loadFeature = true) {\r\n let relatedItemName = \"\",\r\n shouldLoadInDifferentGroups = false,\r\n RelatedItemClass = null;\r\n switch (dbFeature.groupName) {\r\n case \"Sink\":\r\n case \"Farnhousesink\":\r\n if (loadFeature && dbFeature.metaData && dbFeature.metaData[\"Placement\"] && dbFeature.metaData[\"Placement\"].includes(PLACEMENTS.Island)) {\r\n break;\r\n }\r\n shouldLoadInDifferentGroups = true;\r\n relatedItemName = \"sink\";\r\n RelatedItemClass = Sink;\r\n break;\r\n case \"Faucet\":\r\n if (loadFeature && dbFeature.metaData && dbFeature.metaData[\"Placement\"] && dbFeature.metaData[\"Placement\"].includes(PLACEMENTS.Island)) {\r\n break;\r\n }\r\n shouldLoadInDifferentGroups = true;\r\n relatedItemName = \"faucet\";\r\n RelatedItemClass = Faucet;\r\n break;\r\n case \"Countertop\":\r\n relatedItemName = \"countertop\";\r\n RelatedItemClass = Countertop;\r\n break;\r\n case \"Edge Profile\":\r\n case \"Edge\":\r\n shouldLoadInDifferentGroups = true;\r\n relatedItemName = \"edgeProfile\";\r\n RelatedItemClass = EdgeProfile;\r\n break;\r\n case \"Cutouts\":\r\n case \"cutouts\":\r\n relatedItemName = \"cutouts\";\r\n RelatedItemClass = Cutouts;\r\n break;\r\n case \"Radius\":\r\n relatedItemName = \"radius\";\r\n RelatedItemClass = Radius;\r\n break;\r\n }\r\n return this.loadCommon(relatedItemName, RelatedItemClass, dbFeature, loadFeature, shouldLoadInDifferentGroups)\r\n }\r\n\r\n isSubTypeWithItems() {\r\n return false;\r\n }\r\n\r\n handleSubPartClick() {\r\n\r\n }\r\n\r\n subParts(withHidden = true, hideWithoutFeatures = false) {\r\n return this.getRelatedItems()\r\n .filter(item => {\r\n if (hideWithoutFeatures && (item.partId === \"cutouts\" || item.partId === \"radius\")) {\r\n return false\r\n }\r\n return this.filterRelatedItem(item, withHidden)\r\n })\r\n .map(_ => new DesignNavigationItem(_.partName, _));\r\n }\r\n\r\n setSpecificRules() {\r\n if (this.edgeProfile) {\r\n this.edgeProfile.setEdgeNotInVisualizer()\r\n }\r\n }\r\n\r\n}\r\n","import {getSaveJobData} from \"./saveJobData\";\r\nimport {postSaveJob, postScheduleAppointment} from \"../api/job-api\";\r\nimport {getSaveAppointmentData} from \"./saveAppointmentData\";\r\nimport {registerUser, updateUser} from \"../api/user\";\r\nimport {setRegisteredUserData, setUserInfo} from \"../userLogic/userActions\";\r\n\r\nexport const SET_LOADING = \"SET_LOADING\";\r\nexport const EXPAND_FOOTER_INFO = \"EXPAND_FOOTER_INFO\";\r\nexport const SET_LEAD_POPUP = \"SET_LEAD_POPUP\";\r\nexport const ALLOW_SAVING_JOB_ON_INPUT_STEP = \"ALLOW_SAVING_JOB_ON_INPUT_STEP\";\r\nexport const SET_JOB_SAVED = \"SET_JOB_SAVED\";\r\nexport const SET_FOOTER_INFO_BUTTON_TEXT = \"SET_FOOTER_INFO_BUTTON_TEXT\";\r\nexport const setLoading = (isLoading, faradayLoading = false) => ({\r\n type: SET_LOADING,\r\n payload: {isLoading, faradayLoading}\r\n});\r\nexport const expandFooterInfo = (footerInfoExpanded = false) => ({\r\n type: EXPAND_FOOTER_INFO,\r\n payload: {footerInfoExpanded}\r\n});\r\nexport const setFooterInfoButtonText = (footerInfoButtonText = \"\") => ({\r\n type: EXPAND_FOOTER_INFO,\r\n payload: {footerInfoButtonText}\r\n});\r\nexport const setLeadPopup = (leadPopup) => ({\r\n type: SET_LEAD_POPUP,\r\n payload: leadPopup\r\n});\r\n\r\nexport const setJobSaved = (jobData) => ({\r\n type: SET_JOB_SAVED,\r\n payload: jobData\r\n});\r\n\r\nexport const setAllowJobSavingOnInputStep = () => ({\r\n type: ALLOW_SAVING_JOB_ON_INPUT_STEP,\r\n});\r\n\r\nconst someUserInfoIsDifferent = (userInfo, registeredUser) => {\r\n return Object.keys(registeredUser).some(key => registeredUser[key] !== userInfo[key])\r\n}\r\n\r\nexport const saveJobAction = (isDelayedSave = false) => {\r\n return async (dispatch, getState) => {\r\n const store = getState();\r\n const {appointmentDate} = store.appointmentState;\r\n const {userInfo, registeredUser} = store.userState;\r\n\r\n if (!userInfo.isLoggedIn) {\r\n // 1) register user\r\n const registered = await registerUser(store);\r\n console.log(\"registered\", registered);\r\n if (registered && registered.data) {\r\n dispatch(setRegisteredUserData(registered.data.email, registered.data.authToken));\r\n }\r\n dispatch(setUserInfo(\"isLoggedIn\", true));\r\n } else if (someUserInfoIsDifferent(userInfo, registeredUser)) {\r\n // 1.5) update user info\r\n const updatedCustomer = await updateUser(store);\r\n if (updatedCustomer && updatedCustomer.data && updatedCustomer.data.success) {\r\n dispatch(setRegisteredUserData(store.userState.userInfo.email, updatedCustomer.data.token));\r\n }\r\n }\r\n\r\n // 2) save job\r\n // getState() needed here to have registered email\r\n const saveJobResponse = await postSaveJob(getSaveJobData(getState(), isDelayedSave));\r\n\r\n if (!saveJobResponse || !saveJobResponse.data) {\r\n console.error(\"job wasn't saved\", saveJobResponse);\r\n return\r\n }\r\n\r\n // 3) set appointment\r\n if (appointmentDate && saveJobResponse.data.jobId) { // check fab setting here if needed\r\n await postScheduleAppointment(getSaveAppointmentData(store, saveJobResponse.data.jobId));\r\n }\r\n\r\n dispatch(setJobSaved({jobId: saveJobResponse.data.jobId}));\r\n }\r\n}\r\n\r\n// if (registered.data && registered.data.isEmailTaken && registered.data.errorUserMatch) {\r\n// visitContextDispatch(visitContextAction({\r\n// popup: Object.assign({}, visitContextState.popup, {\r\n// visible: true,\r\n// text: \"This email already exists in the system. Would you like to add your quote to this customer?\",\r\n// buttons: [{\r\n// text: \"No\",\r\n// onClick: () => {\r\n// visitContextDispatch(visitContextAction({\r\n// popup: Object.assign({}, visitContextState.popup, {visible: false})\r\n// }));\r\n// }\r\n// }, {\r\n// text: \"Yes\",\r\n// onClick: () => {\r\n// // here we can take some info from already registered user\r\n// visitContextDispatch(visitContextAction({\r\n// popup: Object.assign({}, visitContextState.popup, {visible: false})\r\n// }));\r\n// visitContextDispatch(visitContextChangeFormAction(\"isLoggedIn\", true, \"contact\"));\r\n// switchToAppointmentPage();\r\n// }\r\n// }],\r\n// })\r\n// }))\r\n// return false\r\n// }\r\n","import {getNextWizardSteps} from \"./wizardLogicOld\";\r\n\r\nexport const LEAD_WIZARD_GROUP_TYPES = {\r\n group: \"group\",\r\n filter: \"filter\",\r\n custom: \"custom\",\r\n inputs: \"inputs\",\r\n contact: \"contact\",\r\n appointment: \"appointment\",\r\n review: \"review\",\r\n success: \"success\",\r\n}\r\n\r\n/**\r\n * this returns new wizard steps depending on the current selection\r\n * @param wizardActiveItem {wizardItemInterface}\r\n * @param currentStep {number}\r\n * @param wizardSelectedValues {object}\r\n * @returns {object}\r\n */\r\nexport const getLeadFormSteps = (wizardActiveItem, currentStep, wizardSelectedValues) => {\r\n const wizardSteps = getNextWizardSteps(wizardActiveItem, currentStep, wizardSelectedValues);\r\n // console.log(\"wizardSteps\", wizardSteps);\r\n let leadFormSteps = [];\r\n wizardSteps.forEach(step => {\r\n if (step.stepGroups.length && step.stepGroups[0].leadStep) {\r\n let existingLeadStepObject = leadFormSteps.find(leadStepObject => {\r\n return leadStepObject.leadStepName === step.stepGroups[0].leadStep\r\n });\r\n if (!existingLeadStepObject) {\r\n existingLeadStepObject = {\r\n leadStepName: step.stepGroups[0].leadStep,\r\n leadStepUrl: step.stepGroups[0].leadStepUrl,\r\n leadSubSteps: []\r\n }\r\n leadFormSteps.push(existingLeadStepObject);\r\n }\r\n existingLeadStepObject.leadSubSteps.push({\r\n stepIndex: step.stepIndex,\r\n wizardGroup: step.stepGroups[0], // not needed for now\r\n });\r\n }\r\n })\r\n // const leadFormSteps = wizardSteps.reduce((total, step) => {\r\n // if (step.stepGroups.length && step.stepGroups[0].leadStep && !total.includes(step.stepGroups[0].leadStep)) {\r\n // total.push(step.stepGroups[0].leadStep)\r\n // }\r\n // return total\r\n // }, []);\r\n return leadFormSteps\r\n}\r\n\r\n/**\r\n * this returns lowercased url\r\n * @param leadStepName {string}\r\n * @returns {string}\r\n */\r\nexport const getUrlLeadStepName = (leadStepName = \"\") => {\r\n if (!leadStepName) {\r\n return \"\"\r\n }\r\n return leadStepName.toLowerCase().replace(/ /g,\"-\")\r\n}\r\n","import React from \"react\";\r\nimport orderBy from \"lodash/orderBy\";\r\nimport throttle from \"lodash/throttle\";\r\nimport clone from \"lodash/clone\";\r\nimport $ from 'jquery';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport Misc from './../../misc/misc';\r\nimport ActionTypes from \"./../../misc/actionTypes\";\r\nimport {getMousePos, getTranslateX, requestAnimFrame, isTouchDevice} from \"../../misc/utils\";\r\nimport {makeHoveringLayer} from \"../../misc/imageHovering\";\r\nimport {getEventPosition, isIE} from \"../../misc/helpers\";\r\nimport PinchZoom from \"../../lib/pinch-zoom\";\r\nimport {loaderEnable, loaderDisable} from \"../ui/loaderView\";\r\nimport enhanceCanvas from \"./canvasEnhancements\";\r\nimport Config, {IS_LIXIL_UI} from \"../../config\";\r\nimport {checkForLayerParts} from \"./canvasCheckForLayerParts\";\r\nimport {hardCodelyRemovedClicking} from \"../look/lookNavigation/lookFunctions2\";\r\nimport {VISUALIZER_MANAGEMENT_ACTIONS} from \"../../misc/constants\";\r\n// import {UseFullSizeImages} from \"../../config\";\r\n\r\n// import { getHoverZonesForPreset, getHoveringZone, hoverImages } from \"./imageCanvasTouchZones\";\r\n\r\nexport default class ImageCanvasCommon extends React.Component {\r\n static propTypes = {\r\n layers: PropTypes.arrayOf(PropTypes.object).isRequired,\r\n layoutType: PropTypes.string.isRequired,\r\n width: PropTypes.number.isRequired,\r\n height: PropTypes.number.isRequired,\r\n canvasId: PropTypes.string.isRequired,\r\n useMouseHovering: PropTypes.bool,\r\n useTouchZoom: PropTypes.bool,\r\n enableLoader: PropTypes.func,\r\n disableLoader: PropTypes.func,\r\n setShowCanvasLoader: PropTypes.func,\r\n lookCanvasClick: PropTypes.func,\r\n transform: PropTypes.string,\r\n fabricatorData: PropTypes.object,\r\n };\r\n\r\n constructor(props) {\r\n super(props);\r\n this.canvas = null;\r\n this.state = {\r\n mouseMoveSet: false,\r\n dimensions: {\r\n width: props.width,\r\n height: props.height\r\n },\r\n hoverZones: {},\r\n layers: [],\r\n layersHoverings: [],\r\n // layersHoveringsCached: [],\r\n imagesRendered: [],\r\n backgroundLayers: [],\r\n backgroundImages: [],\r\n allowPropsLayers: true,\r\n };\r\n this.id = 0;\r\n this.ctx = null;\r\n this.backCtx = null;\r\n this.resizedCanvas = null;\r\n this.resizedContext = null;\r\n this.timeout = 0;\r\n this.canvas_scale = 1;\r\n this.shouldUpdateGreenZone = false;\r\n this.pinchZoom = null;\r\n this.x = 0;\r\n this.y = 0;\r\n this.delta = 0;\r\n this.statusSwipe = false;\r\n this.detectedSwipeLeft = false;\r\n this.detectedSwipeRight = false;\r\n this.currentTranslate = 0;\r\n this.navBreakPoint = 991;\r\n this.activeGreenZoneIndex = null;\r\n /*** background canvas ***/\r\n this.canvasBg = null;\r\n this.backCtxBg = null;\r\n /*** background canvas end ***/\r\n }\r\n\r\n componentDidMount() {\r\n const {width, height} = this.props;\r\n this.ctx = this.canvas.getContext('2d');\r\n const c = document.createElement('canvas');\r\n c.width = width;\r\n c.height = height;\r\n this.backCtx = c.getContext('2d');\r\n this.resizedCanvas = document.createElement(\"canvas\");\r\n this.resizedContext = this.resizedCanvas.getContext(\"2d\");\r\n\r\n /*** background canvas ***/\r\n this.canvasBg = document.createElement('canvas');\r\n this.canvasBg.width = width;\r\n this.canvasBg.height = height;\r\n this.backCtxBg = this.canvasBg.getContext('2d');\r\n this.backCtxBg.globalCompositeOperation = \"lighten\";\r\n /*** background canvas end ***/\r\n\r\n $(window).on('resize', this.handleOrientationChange);\r\n this.handleOrientationChange();\r\n $(window).on('setPinchZoom', this.createPinchZoom);\r\n if (window.setPinchZoom || IS_LIXIL_UI) {\r\n this.createPinchZoom();\r\n }\r\n $(window).on(ActionTypes.REMOVE_GREEN_ZONE_ON_CANVAS, (event, callback) => {\r\n this.draw(this.state.layers, callback);\r\n });\r\n\r\n if (Config.isVisualizerManagement()) {\r\n window.addEventListener(\"message\", (event) => {\r\n if (event.data && (event.data.action === VISUALIZER_MANAGEMENT_ACTIONS.getState\r\n || event.data.action === VISUALIZER_MANAGEMENT_ACTIONS.checkState)) {\r\n this.draw(this.state.layers)\r\n }\r\n })\r\n }\r\n if (this.props.layers.length && this.state.allowPropsLayers) {\r\n this.drawPropsLayers();\r\n }\r\n }\r\n\r\n componentWillUnmount() {\r\n $(window).off('resize', this.handleOrientationChange);\r\n $(window).off('setPinchZoom', this.createPinchZoom);\r\n $(window).off(ActionTypes.GET_CANVAS_SCALE);\r\n $(window).off(ActionTypes.RESET_CANVAS);\r\n $(window).off(ActionTypes.ENABLE_PINCH_ZOOM);\r\n $(window).off(ActionTypes.DISABLE_PINCH_ZOOM);\r\n $(window).off(ActionTypes.REMOVE_GREEN_ZONE_ON_CANVAS);\r\n }\r\n\r\n drawPropsLayers = () => {\r\n this.setState({\r\n layers: this.props.layers\r\n });\r\n this.shouldUpdateGreenZone = true;\r\n this.draw(this.props.layers, this.props.useMouseHovering ? this.updateGliaCanvasImage : null);\r\n };\r\n\r\n createPinchZoom = () => {\r\n if ((Misc.isMobile() || isTouchDevice() || Config.isVisualizerManagement() || IS_LIXIL_UI) && this.props.useTouchZoom && !this.pinchZoom) {\r\n this.pinchZoom = new PinchZoom(this.canvas, {canUseUpdate: this.props.useTouchZoom});\r\n $(window).on(ActionTypes.RESET_CANVAS, () => {\r\n // $('.canvas-text').html('xxx');\r\n this.pinchZoom.reset();\r\n });\r\n $(window).on(ActionTypes.ENABLE_PINCH_ZOOM, () => {\r\n this.pinchZoom.enable();\r\n });\r\n $(window).on(ActionTypes.DISABLE_PINCH_ZOOM, () => {\r\n this.pinchZoom.disable();\r\n });\r\n if (this.props.updateLookCanvas) {\r\n this.props.updateLookCanvas();\r\n }\r\n }\r\n // const dashboardFramed = Config.isVisualizerManagement();\r\n };\r\n\r\n componentWillReceiveProps(nextProps) {\r\n const onlyLayers = nextProps.layers.filter((layer) => {\r\n return !layer.image.includes(\"/static\")\r\n });\r\n const onlyStateLayers = this.state.layers.filter((layer) => {\r\n return !layer.image.includes(\"/static\")\r\n });\r\n\r\n let needToUpdateCanvas = onlyLayers.length !== onlyStateLayers.length,\r\n i = 0;\r\n\r\n if (!needToUpdateCanvas && onlyLayers.length && onlyStateLayers.length) {\r\n for (i; i < onlyLayers.length; i++) {\r\n if (onlyLayers[i].zIndex !== onlyStateLayers[i].zIndex || onlyLayers[i].image !== onlyStateLayers[i].image) {\r\n needToUpdateCanvas = true;\r\n // console.log('break on ' + i + ' element');\r\n break;\r\n }\r\n }\r\n }\r\n\r\n if (nextProps.layers.length && this.state.allowPropsLayers) {\r\n this.setState({\r\n layers: nextProps.layers\r\n });\r\n // if (this.state.mouseMoveSet) {\r\n // this.setLayersHoverings(nextProps.layers);\r\n // }\r\n }\r\n\r\n if (needToUpdateCanvas && this.state.allowPropsLayers) {\r\n this.shouldUpdateGreenZone = true;\r\n this.draw(nextProps.layers, this.props.useMouseHovering ? this.updateGliaCanvasImage : null);\r\n }\r\n }\r\n\r\n handleOrientationChange = () => {\r\n const canvas = $(this.canvas);\r\n const canvasWidth = canvas.width();\r\n const canvasHeight = canvas.height();\r\n const fromDesktopToMobile = this.state.dimensions.width > this.navBreakPoint && canvasWidth < this.navBreakPoint;\r\n const fromMobileToDesktop = this.state.dimensions.width < this.navBreakPoint && canvasWidth > this.navBreakPoint;\r\n this.setState({\r\n dimensions: {\r\n width: canvasWidth,\r\n height: canvasHeight,\r\n layersHoverings: (fromDesktopToMobile || fromMobileToDesktop) ? [] : this.state.layersHoverings, // recreate layersHoverings\r\n }\r\n });\r\n };\r\n\r\n imageCanvasScroll = (canvasClass, removeAllClasses) => {\r\n if (!window.canvasIsDragging && this.pinchZoom) {\r\n this.pinchZoom.reset();\r\n // $('.canvas-text').html($('.canvas-text').html() + canvasClass);\r\n this.pinchZoom.imageCanvasScroll(\r\n canvasClass.toLowerCase().replace(\" \", \"-\"),\r\n removeAllClasses,\r\n this.props.layoutType,\r\n this.props.layoutScene\r\n );\r\n }\r\n };\r\n\r\n layerIsExcludedFromHover = (layer) => {\r\n const {layout} = this.props;\r\n if (Array.isArray(layout.disabledClickablePartIds) && layout.disabledClickablePartIds.includes(layer.partId)) {\r\n return true\r\n }\r\n if (hardCodelyRemovedClicking(layer.partId, layout, this.props.fabricatorData)) {\r\n return true\r\n }\r\n return layout.excludedPartIdsFromHover\r\n ? layer.partId && layout.excludedPartIdsFromHover.some(partId => partId === layer.partId || layer.partId.indexOf(partId) > -1)\r\n : layout.excludedIndexesFromHover\r\n ? layout.excludedIndexesFromHover(this.props.layoutType).includes(layer.zIndex)\r\n : false\r\n }\r\n\r\n setLayersHoverings = (layers, images, errorImages) => {\r\n\r\n let layersHoverings = this.state.layersHoverings, i;\r\n // console.log('this.state.layersHoverings-->', this.state.layersHoverings);\r\n // console.log('layers', layers);\r\n\r\n const {layout} = this.props;\r\n\r\n layers.forEach((layer, index) => {\r\n\r\n // console.log('setLayersHovering:', layer);\r\n\r\n const excludedLayer = this.layerIsExcludedFromHover(layer, layout);\r\n\r\n if (!layer.isGreenHovering && !excludedLayer) {\r\n // search for current layer zIndex\r\n const existingGreenLayerHoveringIndex = layersHoverings.findIndex((layerHovering) => {\r\n return layerHovering ? layerHovering.layer.zIndex === layer.zIndex : 0\r\n });\r\n\r\n const getHoveringLayer = () => {\r\n return makeHoveringLayer(layer, images[index], this.props.layoutType, {\r\n width: this.props.width,\r\n height: this.props.height\r\n }, this.props.fabricatorData)\r\n }\r\n\r\n // if it exist & name is different - change it(simple layer replace)\r\n if (existingGreenLayerHoveringIndex > -1) {\r\n if (layer.image !== this.state.layersHoverings[existingGreenLayerHoveringIndex].layer.image\r\n && images[index] && !errorImages.includes(images[index].src)) {\r\n const hoveringLayer = getHoveringLayer();\r\n if (hoveringLayer) {\r\n layersHoverings.splice(existingGreenLayerHoveringIndex, 1, hoveringLayer)\r\n }\r\n }\r\n } else {\r\n if (images[index] && !errorImages.includes(images[index].src)) {\r\n const hoveringLayer = getHoveringLayer();\r\n if (hoveringLayer) {\r\n layersHoverings.push(hoveringLayer) // simple push\r\n }\r\n } else {\r\n console.info(\"makeHoveringLayer failed! no image for layer\", index);\r\n }\r\n }\r\n }\r\n });\r\n\r\n for (i = 0; i < layersHoverings.length; ++i) { // go over new green layers, and remove redundant\r\n const notNeededMoreLayerIndex = layers.findIndex((layer) => {\r\n return layer.zIndex === layersHoverings[i].layer.zIndex\r\n });\r\n if (notNeededMoreLayerIndex === -1) {\r\n layersHoverings.splice(i, 1);\r\n --i; // Correct the index value\r\n }\r\n }\r\n\r\n this.setState({\r\n layersHoverings: orderBy(layersHoverings, 'layer.zIndex', layout.isNewLayout ? 'asc' : 'desc')\r\n // order by zIndex (top go last in new layouts)\r\n }, () => {\r\n this.shouldUpdateGreenZone = false;\r\n });\r\n };\r\n\r\n draw = (layers, callback) => {\r\n\r\n let cnt = 0;\r\n const images = [];\r\n\r\n // if (!window.count) {\r\n // window.count = 1;\r\n // }\r\n // console.log('draw!', window.count);\r\n // window.count++;\r\n\r\n this.id = setTimeout(() => {\r\n if (!this.id) {\r\n return;\r\n }\r\n clearTimeout(this.id);\r\n if (this.props.setShowCanvasLoader) {\r\n if (!window.requestInProcess) {\r\n this.props.setShowCanvasLoader(true)\r\n }\r\n } else if (layers.length) {\r\n this.props.enableLoader\r\n ? this.props.enableLoader()\r\n : loaderEnable(\"loader.canvasLoadingText\");\r\n }\r\n }, 500);\r\n\r\n this.backCtx.fillStyle = 'white';\r\n this.backCtx.fillRect(0, 0, this.props.width, this.props.height);\r\n // this.backCtx.clearRect(0, 0, this.props.width, this.props.height);\r\n\r\n // console.log('layers', layers);\r\n\r\n const alreadyRenderedImages = this.state.imagesRendered;\r\n const errorImages = [];\r\n\r\n // if (this.state.errorImages.length) {\r\n // layers = layers.filter(layer => !this.state.errorImages.includes(layer.image))\r\n // }\r\n\r\n layers.forEach((layer) => {\r\n const alreadyRenderedImage = alreadyRenderedImages.find((imageRendered) => {\r\n return layer.image === imageRendered.src\r\n });\r\n let image;\r\n if (layer.isGreenHovering) {\r\n image = layer.hoveringImage;\r\n } else if (alreadyRenderedImage && this.state.allowPropsLayers) {\r\n image = alreadyRenderedImage.image;\r\n if (!isIE()) { // IE11 doesn't like when someone is making empty src\r\n image.src = \"\"; // https://bugs.chromium.org/p/chromium/issues/detail?id=7731#c12\r\n }\r\n } else {\r\n image = new Image();\r\n image.crossOrigin = 'Anonymous';\r\n alreadyRenderedImages.push({\r\n image,\r\n src: layer.image\r\n });\r\n }\r\n image.layerDimensions = layer.layerDimensions || null;\r\n image.coords = layer.coords || null;\r\n images.push(image);\r\n image.onload = () => {\r\n cnt++;\r\n if (cnt === layers.length) {\r\n this.finishDraw(images, layers, alreadyRenderedImages, errorImages, callback)\r\n }\r\n };\r\n image.onerror = () => {\r\n //display error\r\n console.info('Coudn\\'t load image:', image.src);\r\n cnt++;\r\n errorImages.push(image.src);\r\n if (cnt === layers.length) {\r\n this.finishDraw(images, layers, alreadyRenderedImages, errorImages, callback);\r\n }\r\n };\r\n try {\r\n image.src = layer.image;\r\n } catch (e) {\r\n console.log(e, 'Can\\'t apply image src', layer.image);\r\n }\r\n\r\n });\r\n };\r\n\r\n getBackgroundLayers = (layers = this.state.layers) => {\r\n const {layoutType, layout} = this.props;\r\n return layers.filter((layer) => {\r\n return layout.zIndexes[layoutType] && layout.zIndexes[layoutType].Background &&\r\n Object.values(layout.zIndexes[layoutType].Background).some(zIndex => zIndex === layer.zIndex);\r\n })\r\n };\r\n\r\n finishDraw = (images, layers, alreadyRenderedImages, errorImages, callback) => {\r\n clearTimeout(this.id);\r\n this.id = 0;\r\n\r\n const {width, height} = this.props;\r\n\r\n // const fullImagesFactor = UseFullSizeImages ? 100 : 54;\r\n\r\n const backgroundLayers = this.getBackgroundLayers(layers);\r\n\r\n if (backgroundLayers.length) { // draw backgrounds first\r\n this.backCtxBg.clearRect(0, 0, width, height); // clear previous\r\n\r\n const greenImage = images.find((imageObject) => imageObject.src.includes(\"data:image\"));\r\n if (greenImage) {\r\n const layer = backgroundLayers.find(layer => layer.image === greenImage.src);\r\n if (layer && layer.zIndex !== 500) {\r\n const greenImageIndex = images.findIndex((imageObject) => imageObject.src.includes(\"data:image\"));\r\n images.splice(greenImageIndex - 1, 1); // remove regular layer, draw only green one\r\n }\r\n }\r\n\r\n images.forEach((imageObject) => {\r\n if (errorImages.includes(imageObject.src)) {\r\n return\r\n }\r\n const layer = backgroundLayers.find(layer => layer.image === imageObject.src);\r\n if (layer) {\r\n if (layer.layerDimensions) {\r\n const dim = layer.layerDimensions;\r\n // console.log('yep', dim.width, dim.height, dim.polygonArray[0][0], dim.polygonArray[0][1], dim.width, dim.height);\r\n this.backCtxBg.drawImage(imageObject, 0, 0, dim.width, dim.height, dim.polygonArray[0][0], dim.polygonArray[0][1], dim.width, dim.height);\r\n } else {\r\n // imageObject.width = width;\r\n // imageObject.height = height;\r\n this.backCtxBg.drawImage(imageObject, 0, 0, width, height);\r\n }\r\n }\r\n imageObject = null;\r\n });\r\n enhanceCanvas(this.canvasBg);\r\n this.backCtx.drawImage(this.canvasBg, 0, 0, width, height, 0, 0, width, height);\r\n }\r\n\r\n images.forEach((loadedImage) => {\r\n if (errorImages.includes(loadedImage.src)) {\r\n return\r\n }\r\n const layer = layers.find(layers => layers.image === loadedImage.src);\r\n if (layer && (!backgroundLayers.length || (layer.zIndex > backgroundLayers[backgroundLayers.length - 1].zIndex))) {\r\n if (loadedImage.layerDimensions) {\r\n const dim = loadedImage.layerDimensions;\r\n // console.log('yep', dim.width, dim.height, dim.polygonArray[0][0], dim.polygonArray[0][1], dim.width, dim.height);\r\n this.backCtx.drawImage(loadedImage, 0, 0, dim.width, dim.height, dim.polygonArray[0][0], dim.polygonArray[0][1], dim.width, dim.height);\r\n } else if (loadedImage.coords) {\r\n // loadedImage.width = loadedImage.width*fullImagesFactor/100;\r\n // loadedImage.height = loadedImage.height*fullImagesFactor/100;\r\n // const max_x = loadedImage.coords.max_x*fullImagesFactor/100;\r\n const min_x = this.props.width*loadedImage.coords.min_x;\r\n const min_y = this.props.height*loadedImage.coords.min_y;\r\n // const max_y = loadedImage.coords.max_y*fullImagesFactor/100;\r\n // const width = max_x - min_x;\r\n // const height = max_y - min_y;\r\n // console.log('width', width);\r\n // console.log('height', height);\r\n // console.log('min_x', min_x);\r\n // console.log('min_y', min_y);\r\n // console.log('max_x', max_x);\r\n // console.log('max_y', max_y);\r\n try {\r\n this.backCtx.drawImage(loadedImage, 0, 0, loadedImage.width, loadedImage.height, min_x, min_y, loadedImage.width, loadedImage.height);\r\n } catch (e) {\r\n console.log(e, 'Can\\'t draw image with coords on the canvas', loadedImage.src);\r\n }\r\n } else {\r\n try {\r\n this.backCtx.drawImage(loadedImage, 0, 0, width, height, 0, 0, width, height);\r\n } catch (e) {\r\n console.log(e, 'Can\\'t draw image on the canvas', loadedImage.src);\r\n }\r\n }\r\n }\r\n loadedImage = null;\r\n });\r\n\r\n // this.ctx.drawImage(this.backCtx.canvas, 0, 0);\r\n requestAnimFrame(this.ctx.drawImage(this.backCtx.canvas, 0, 0));\r\n\r\n if (this.props.useMouseHovering) {\r\n const isMobile = Misc.isMobile() || isTouchDevice();\r\n if (!isMobile && !isIE() && !this.state.mouseMoveSet && this.canvas) {\r\n this.setOnMouseMove();\r\n }\r\n this.setState({\r\n alreadyRenderedImages\r\n });\r\n if (this.shouldUpdateGreenZone || !this.state.layersHoverings.length) {\r\n this.setLayersHoverings(layers, images, errorImages)\r\n }\r\n }\r\n\r\n if (!window.requestInProcess) {\r\n this.props.disableLoader ? this.props.disableLoader() : loaderDisable();\r\n }\r\n\r\n // window.t1 = performance.now();\r\n // console.log(\"Call to doSomething took \" + (window.t1 - window.t0) + \" milliseconds.\");\r\n\r\n if (callback) {\r\n callback()\r\n }\r\n };\r\n\r\n getGliaImage = () => {\r\n return \r\n {/*\r\n // {fabricatorSettings.currencySign}\r\n // {lockedText}\r\n // \r\n // )\r\n // }\r\n return className ? \r\n }\r\n if (!listPage && !layout.partIdExistInQtCategory(lookFeature.partId, true) && !isBundleChild) {\r\n return null;\r\n }\r\n\r\n const featurePrice = +toFixedFeatureCost(lookFeature, Number.isInteger(quantity) ? quantity : 1);\r\n\r\n if (!featurePrice && !lookFeature.dbFeature.priceEditable) { // if it is zero - we are hiding the price, no need to show included\r\n return null\r\n }\r\n\r\n let unit = \"\";\r\n if (withUnit) {\r\n unit = getFeatureUnit(lookFeature, intl, fabricatorData);\r\n }\r\n\r\n if (mainContentPrice && document.kvConfig.isBackend && lookFeature.dbFeature.priceEditable) {\r\n const price = toFixedPrice(featurePrice);\r\n return \r\n }\r\n\r\n const finalText = withUnit\r\n ? `${unit}: ${getPriceWithCurrency(fabricatorSettings, toFixedPrice(featurePrice), lookFeature)}`\r\n : getPriceWithCurrency(fabricatorSettings, toFixedPrice(featurePrice), lookFeature)\r\n\r\n return className ? }\r\n */\r\n parts = {};\r\n constructor() {}\r\n\r\n hasNavItemsLength(...props) {\r\n const subPart = props[0];\r\n if ((document.kvConfig.visualizerType === \"kvScene\") && (this.type === 3) && (subPart.part.partId === \"center_island_edge\")) {\r\n return false\r\n }\r\n if (!subPart || !this.isNewLayout || (this.type === 2 && (subPart.part.partId === \"oven\"))\r\n || (subPart.part.partId === \"shower_door\")) { // not sure if we can enable it on old kitchen and bathroom\r\n // added oven because it depends on the stove and should be recalculated each time on layout 2\r\n // added shower door as we need to calculate for current showersize\r\n return this.designNavigationItems(...props).length > 0\r\n }\r\n const propName = IS_LIXIL_UI\r\n ? \"all\"\r\n : props[4] ? \"qt\" : \"vis\"; // forQuotingTool or forVisualizer\r\n if (IS_LIXIL_UI) {\r\n props[4] = \"all\"\r\n }\r\n if (!subPart.part._navItemsCount) {\r\n subPart.part._navItemsCount = {}\r\n }\r\n if (!subPart.part._navItemsCount[this.type]) {\r\n subPart.part._navItemsCount[this.type] = {}\r\n }\r\n if (subPart.part._navItemsCount[this.type][propName] > 0) {\r\n return true\r\n }\r\n if (!subPart.part.allFeaturesReceived\r\n || !Number.isInteger(subPart.part._navItemsCount[this.type][propName])\r\n || !subPart.part._navItemsCount.checkedAfterReceived\r\n || (subPart.part.nextFeaturesPageToLoadArray && subPart.part.partId === \"vanity_countertop\")) {\r\n // added vanity_countertop because of the matching feature omggg\r\n subPart.part._navItemsCount[this.type][propName] = this.designNavigationItems(...props).length\r\n }\r\n if (subPart.part.allFeaturesReceived && !subPart.part._navItemsCount.checkedAfterReceived) {\r\n // stop calling navItems func after all features received and it is calculated\r\n subPart.part._navItemsCount.checkedAfterReceived = true;\r\n }\r\n return subPart.part._navItemsCount[this.type][propName] > 0\r\n }\r\n\r\n /**\r\n * Returns the designNavigationItems for the navigation bar\r\n * @param parentItem {DesignNavigationItem} if null is supplied will return the major designNavigationItems,\r\n * otherwise the children of the given parent item\r\n * @param filters {[navigationFilterValueInterface]}\r\n * @param searchText {string}\r\n * @param forFeature {object|boolean} // for new kitchen and bathroom it is forFeature, for old - withPlaceholders\r\n * @param withQuotingToolFeatures {boolean|string}\r\n * @param filterGroups {array}\r\n * @param restOptions {object} // firstOpenedFeature = null, firstOpenedConditions = null, returnAllFeatures = false, forActiveQTCategory = \"\"\r\n * @returns {Array.}\r\n */\r\n designNavigationItems(\r\n parentItem = null,\r\n filters = [],\r\n searchText = \"\",\r\n forFeature = null,\r\n withQuotingToolFeatures = false, // could be false(visualizer only), true(quotingtool only), or \"all\" - all features\r\n filterGroups = [],\r\n restOptions= {}\r\n ) {\r\n const {forActiveQTCategory, returnAllFeatures} = restOptions;\r\n //console.log('parentItem', parentItem);\r\n if (parentItem == null) {\r\n let partsToShow = this.enabledParts();\r\n if (!this.type) { // disable window on the small room layout\r\n partsToShow = partsToShow.filter(parentGroup => parentGroup.partName !== \"Window\");\r\n }\r\n if (document.kvConfig.visualizerType === \"KV\" || document.kvConfig.visualizerType === \"Kitchen\") {\r\n // disable center island\r\n const layoutAbbreviation = this.getCurrentLayoutAbbreviation();\r\n if (!layoutAbbreviation.includes(\"I\")) {\r\n partsToShow = partsToShow.filter(parentGroup => parentGroup.partName !== \"CenterIsland\");\r\n }\r\n }\r\n return orderBy(partsToShow, ['sortOrder']).map(parentGroup => parentGroup.navigationItem());\r\n }\r\n\r\n const thirdParam = this.isNewLayout ? forFeature || parentItem.part.activeFeature : forFeature // withPlaceholders\r\n\r\n const nItems = parentItem.part.navigationSubItems(\r\n filters,\r\n searchText,\r\n thirdParam,\r\n filterGroups,\r\n restOptions\r\n )\r\n // console.log(\"nItems\", nItems);\r\n const navItems = nItems\r\n .filter(feature => {\r\n if (!feature || !feature.part) {\r\n return false\r\n }\r\n if (!this.isNewLayout && !thirdParam && feature.part.partName\r\n && (feature.part.partName.includesCI('placeholder') || feature.part.partName.includesCI('Demo Model'))) {\r\n return false // exclude placeholders;\r\n }\r\n return isVisibleForNavigation(feature.part, withQuotingToolFeatures, forActiveQTCategory)\r\n });\r\n\r\n return withQuotingToolFeatures || returnAllFeatures\r\n ? this.getNotAvailableInVisualizerFeatures(navItems, parentItem.part, filters, searchText, forActiveQTCategory)\r\n : navItems.filter(item => !item.part.notAvailableInVisualizer && isFeatureEnabled(item.part, \"visualizer\"))\r\n }\r\n\r\n setGroupsItemsCount(bvGroups) {\r\n const features = this.getFeatures(true);\r\n const groupKeys = {};\r\n Object.keys(bvGroups).map(key => {\r\n groupKeys[key.toLowerCase()] = key;\r\n });\r\n // console.log(groupKeys);\r\n features.forEach(parentGroup => {\r\n if (parentGroup.menuType === PartMenuType.Simple) {\r\n const dbName = (parentGroup.dbName || parentGroup.partName).toLowerCase();\r\n parentGroup.counts = (groupKeys[dbName] && bvGroups[groupKeys[dbName]])\r\n ? bvGroups[groupKeys[dbName]].counts\r\n : null;\r\n parentGroup.totalFeaturesCount = (groupKeys[dbName] && bvGroups[groupKeys[dbName]])\r\n ? bvGroups[groupKeys[dbName]].totalFeaturesCount\r\n : null\r\n if (IS_OFFLINE_MODE) {\r\n parentGroup.allFeaturesReceived = true;\r\n parentGroup.realFeaturesReceived = true;\r\n }\r\n } else {\r\n parentGroup.relatedItems.forEach((relatedItem) => {\r\n const dbName = (relatedItem.dbName || relatedItem.partName).toLowerCase();\r\n if (relatedItem.partId !== \"wall_configuration\") {\r\n relatedItem.counts = (groupKeys[dbName] && bvGroups[groupKeys[dbName]])\r\n ? bvGroups[groupKeys[dbName]].counts\r\n : null;\r\n }\r\n relatedItem.totalFeaturesCount = (groupKeys[dbName] && bvGroups[groupKeys[dbName]])\r\n ? bvGroups[groupKeys[dbName]].totalFeaturesCount\r\n : null;\r\n if (!relatedItem.counts && !relatedItem.partId.includes(\"decor\")) {\r\n console.log(\"no relatedItem.counts\", relatedItem)\r\n }\r\n if (IS_OFFLINE_MODE) {\r\n relatedItem.allFeaturesReceived = true;\r\n relatedItem.realFeaturesReceived = true;\r\n }\r\n })\r\n }\r\n })\r\n }\r\n\r\n getNotAvailableInVisualizerFeatures = (filteredAvailableFeatures, subPart, filters, searchText, forActiveQTCategory = \"\") => {\r\n if (subPart.getParent && subPart.getParent().partName === \"Other\") { // not in visualizer features, they don't need another check\r\n return filteredAvailableFeatures\r\n }\r\n const notInVisualizerFeaturesThatLeft = subPart.features.filter(feature => {\r\n if (feature.partName && feature.partName.includes(\"laceholder\")) {\r\n return false\r\n }\r\n const featureSplittedName = feature.getSplittedFeatureName();\r\n return feature.notAvailableInVisualizer && isVisibleForNavigation(feature, true, forActiveQTCategory)\r\n && !filteredAvailableFeatures.some(countertop => {\r\n return countertop.part.getSplittedFeatureName() === featureSplittedName\r\n })\r\n })\r\n\r\n let allNotAvailableFeatures = subPart.getFeaturesBySearchText(subPart.getFilteredFeaturesByFilters(filters, notInVisualizerFeaturesThatLeft), searchText);\r\n allNotAvailableFeatures = subPart.returnUniqueNavFeatures\r\n ? subPart.returnUniqueNavFeatures(allNotAvailableFeatures)\r\n : allNotAvailableFeatures.map(_ => new DesignNavigationItem(_.featureName, _));\r\n\r\n return [\r\n ...filteredAvailableFeatures,\r\n ...allNotAvailableFeatures\r\n ]\r\n }\r\n\r\n /**\r\n * returns enabled parts\r\n */\r\n enabledParts(withShadow) {\r\n return this.getFeatures(withShadow).filter(parentGroup => parentGroup.categoryEnabled);\r\n }\r\n\r\n async selectLayout(type, oldType, currentState = null, scene = this.scene, callBack, isFake = false) {\r\n const firstLoad = false; // change if needed\r\n const features = this.getFeatures(true); // true here cause we need backgrounds also to set default!\r\n const currentType = oldType || this.type; // 1) remember previous selection\r\n\r\n // 2) save the current state using feature names, then restore it after the layout has changed\r\n currentState = currentState || this.getActiveFeaturesAsObject(true, false, true);\r\n\r\n if (getCurrentRoomType(this) === LOOK_ROOM_TYPES.as || Config.isVisualizerManagement()) {\r\n currentState.disabled_parts = [];\r\n }\r\n\r\n // 3) save selected features to recover them after layout change back (if they were not found after current set)\r\n this.selectedLayoutFeatures[currentType] = currentState;\r\n\r\n this.type = type; // 4) apply new Layout\r\n this.scene = currentType !== type ? \"1\" : scene; // 4) apply new scene // set first scene if layout is changed\r\n currentState.scene = this.scene; // 4) apply new scene\r\n currentState.layout_type = type; // 4) apply new layout_type\r\n\r\n features.forEach(parentGroup => {\r\n parentGroup.setDefault(this); // setting default after\r\n });\r\n\r\n this.setActiveFeaturesFromObject(currentState, false, true, false, firstLoad, isFake); // 6) set the layers from previous layout\r\n this.changeLayout(this.getFeatures()); // 7) set specific rules for each part\r\n if (!isFake) {\r\n $(window).trigger(ActionTypes.CHANGE_LAYOUT); // 8) refresh canvas\r\n this.updateLocalStorage();\r\n }\r\n if (callBack) {\r\n callBack()\r\n }\r\n console.log(\"this fake\", this);\r\n return Promise.resolve()\r\n }\r\n\r\n setItemsFromBvState = async (bvState,\r\n isCartAndUserStatedUpdateNeeded= false,\r\n additionalSet = (bvState) => bvState,\r\n firstLoad = false,\r\n forVisualizer\r\n ) => {\r\n const neededDbFeatures = getArrayOfIdsFromBvState(bvState).filter(dbFeatureId => {\r\n return !this.allDbFeatures.some(feature => feature.id === dbFeatureId)\r\n });\r\n const response = neededDbFeatures.length\r\n ? await getBvFeatures(neededDbFeatures, null, false, forVisualizer)\r\n : {data: []}\r\n\r\n // console.log('getBvFeatures response->', responseFeatures);\r\n\r\n // this code is needed because we need to loadNewFeatures for already setted layout type\r\n bvState = bvState || {};\r\n const layout_type = +bvState.layout_type;\r\n const needToChangeLayout = (layout_type || layout_type === 0) && (layout_type !== +this.type);\r\n if (needToChangeLayout) {\r\n this.type = layout_type;\r\n }\r\n this.loadNewFeatures(response.data);\r\n if (typeof additionalSet === \"function\") {\r\n bvState = additionalSet(bvState);\r\n }\r\n this.setActiveFeaturesFromObject(bvState, isCartAndUserStatedUpdateNeeded, false, true, firstLoad);\r\n if (this.isNewLayout && firstLoad) {\r\n this.createCustomConfigurations();\r\n }\r\n await requestAfterRoomChange(this);\r\n $(window).trigger(ActionTypes.UPDATE_ALL_ITEMS);\r\n return response\r\n };\r\n\r\n changeLayout(features) {\r\n features.forEach(parentGroup => {\r\n parentGroup.changeLayout(this.type);\r\n parentGroup.relatedItems.forEach(ri => ri.changeLayout(this.type));\r\n });\r\n }\r\n\r\n getFeatures(withShadow = false) {\r\n return withShadow ? values(this.parts) : values(this.parts).filter(part => {\r\n return [\"Global Shadow\", \"Globals\", \"Other\", \"Background\", \"Backgrounds\"].every(groupName => part.partName !== groupName)\r\n });\r\n }\r\n\r\n fixFeatureBeforeLoad(dbFeature) {\r\n dbFeature = fixDbFeatureProperties(dbFeature);\r\n if (Array.isArray(dbFeature.metaData.RoomLayout)) {\r\n dbFeature = this.fixFeatureMetaData(dbFeature)\r\n }\r\n return dbFeature\r\n }\r\n\r\n loadNewFeatures(dbFeatures = [], forParentGroup = null, applyCustomConfigurations = true, forNextBvState = null) {\r\n //features could be also loaded directly to the part, check part.js -> setGroupFeatures method\r\n\r\n //dbFeatures can be an object! {features:[], relatedFeatures: []}\r\n const dbFeaturesArray = fixFeaturesResponse(dbFeatures);\r\n\r\n const parentGroups = this.getFeatures(true);\r\n let relatedFeatures = [];\r\n\r\n for (let i = 0; i < dbFeaturesArray.length; i++) {\r\n let dbFeature = dbFeaturesArray[i];\r\n if (!dbFeature) {\r\n continue;\r\n }\r\n dbFeatureRelatedFeaturesProperties.forEach(property => {\r\n if (Array.isArray(dbFeature[property]) && dbFeature[property].length) {\r\n dbFeature[property].forEach(relatedFeature => {\r\n if (relatedFeatures.some(relFeature => relFeature.id === relatedFeature.id)) {\r\n return\r\n }\r\n relatedFeatures.push(relatedFeature)\r\n });\r\n // console.log(\"dbFeature.relatedFeatures\", dbFeature.relatedFeatures);\r\n }\r\n })\r\n this.loadDbFeature(dbFeature, parentGroups, forParentGroup)\r\n }\r\n\r\n if (relatedFeatures.length) {\r\n for (let i = 0; i < relatedFeatures.length; i++) {\r\n this.loadDbFeature(relatedFeatures[i], parentGroups)\r\n }\r\n }\r\n\r\n if (document.kvConfig.visualizerType === \"bvLook\" && applyCustomConfigurations) {\r\n const isAsBathroomState = forNextBvState && forNextBvState.visualizerType === \"bvLook\" && forNextBvState.layout_type >= 10;\r\n this.createCustomConfigurations(isAsBathroomState);\r\n }\r\n\r\n return true\r\n }\r\n\r\n fixFeatureMetaData(dbFeature) {\r\n // it is needed only for bvScene - it has it's own method\r\n // dbFeature.metaData.RoomLayout = dbFeature.metaData.RoomLayout.map((mValue) => {\r\n // Object.values(LayoutType).map(val => val + \"\").forEach(stringNum => {\r\n // if (mValue === stringNum) {\r\n // mValue = \"Layout\" + mValue\r\n // }\r\n // })\r\n // return mValue\r\n // })\r\n return dbFeature\r\n }\r\n\r\n loadDbFeature(dbFeature, parentGroups, forParentGroup = null) {\r\n if (!dbFeature || (dbFeature.employeesOnly && !document.kvConfig.isBackend)) {\r\n return;\r\n }\r\n for (let i = 0; i < this.allDbFeatures.length; i++) {\r\n if (this.allDbFeatures[i].id === dbFeature.id) {\r\n // console.log(\"featureFound\", featureFound);\r\n updateExistingFeature(dbFeature, this.allDbFeatures[i], this);\r\n return;\r\n }\r\n }\r\n dbFeature = this.fixFeatureBeforeLoad(dbFeature);\r\n let loaded = false;\r\n if (forParentGroup && !(document.kvConfig.visualizerType === \"bvLook\" && forParentGroup.partName === \"Towel\") // they should be in separate groups\r\n && (forParentGroup.dbName === dbFeature.groupName || forParentGroup.partName === dbFeature.groupName)) {\r\n loaded = forParentGroup.load(dbFeature);\r\n }\r\n if (!loaded) {\r\n for (let i = 0; i < parentGroups.length; i++) {\r\n const parentGroup = parentGroups[i];\r\n loaded = parentGroup.load(dbFeature);\r\n if (loaded) {\r\n break;\r\n }\r\n }\r\n if (!loaded && this.parts[\"Other\"]) {\r\n this.parts[\"Other\"].load(dbFeature);\r\n }\r\n }\r\n // dbFeature.isRelatedDbFeature ? this.allDbFeatures.unshift(dbFeature) : this.allDbFeatures.push(dbFeature);\r\n this.allDbFeatures.push(dbFeature);\r\n }\r\n\r\n createCustomConfigurations(isAsBathroomState = null) {\r\n // after load callBack for each part(to set specific rules)\r\n this.getFeatures().forEach(parentGroup => {\r\n parentGroup.setSpecificRules ? parentGroup.setSpecificRules(isAsBathroomState) : null;\r\n });\r\n }\r\n\r\n setDefaultFeatures() {\r\n this.getFeatures(true).forEach(parentGroup => {\r\n parentGroup.setDefault(this);\r\n });\r\n }\r\n\r\n /**\r\n * Returns all features by text\r\n */\r\n\r\n getAllFeaturesByText(searchText) {\r\n let allFeatures = [];\r\n this.getFeatures().forEach((parentGroup) => {\r\n let subParts = parentGroup.subParts();\r\n subParts.forEach((subPart) => {\r\n allFeatures = [...allFeatures, ...subPart.part.features.filter(feature => feature.partName && feature.partName.toLowerCase().includes(searchText.toLowerCase()))]\r\n })\r\n });\r\n // console.log('allFeatures', allFeatures);\r\n return allFeatures\r\n }\r\n\r\n /**\r\n * Returns all features\r\n * @param withOtherGroups {boolean}\r\n */\r\n\r\n getAllFeatures(withOtherGroups = false) {\r\n let allFeatures = [];\r\n this.getFeatures(withOtherGroups).forEach((parentGroup) => {\r\n let subParts = parentGroup.subParts();\r\n subParts.forEach((subPart) => {\r\n allFeatures = [...allFeatures, ...subPart.part.features]\r\n })\r\n });\r\n // console.log('allFeatures', allFeatures);\r\n return allFeatures\r\n }\r\n\r\n /**\r\n * Returns feature\r\n * @param neededId {number}\r\n * @param withOtherGroups {boolean}\r\n * @returns feature {object}\r\n */\r\n getFeatureById(neededId, withOtherGroups = false) {\r\n let feature = null;\r\n this.getFeatures(withOtherGroups).forEach((parentGroup) => {\r\n if (!feature) {\r\n let subParts = parentGroup.subParts();\r\n subParts.forEach((subPart) => {\r\n if (!feature) {\r\n feature = subPart.part.getFeatureById(neededId, true);\r\n }\r\n })\r\n }\r\n });\r\n return feature\r\n }\r\n\r\n /**\r\n * Returns feature\r\n * @param skuNumber {string}\r\n * @param featureGroupPartId {string}\r\n * @param allLayouts {boolean}\r\n * @param withSharedFeatureName {boolean}\r\n * @returns feature {object}\r\n */\r\n getFeatureBySku(skuNumber, featureGroupPartId= \"\", allLayouts = false, withSharedFeatureName = false) {\r\n const propToSearch = withSharedFeatureName ? \"sharedFeatureName\" : \"sku\";\r\n if (featureGroupPartId) {\r\n const featureGroupFound = this.getFeatureGroupByPartId(featureGroupPartId);\r\n if (featureGroupFound) {\r\n if (featureGroupFound && featureGroupFound.activeFeature && featureGroupFound.activeFeature.dbFeature[propToSearch] === skuNumber) {\r\n return featureGroupFound.activeFeature\r\n }\r\n const searchFrom = featureGroupFound.getFeaturesForNavigationFrom\r\n ? featureGroupFound.getFeaturesForNavigationFrom({returnAllFeatures: allLayouts})\r\n : featureGroupFound.features;\r\n for (let i = 0; i < searchFrom.length; i++) {\r\n if (searchFrom[i].dbFeature[propToSearch] === skuNumber) {\r\n return searchFrom[i];\r\n }\r\n }\r\n }\r\n }\r\n const allParents = this.getFeatures();\r\n for (let i = 0; i < allParents.length; i++) {\r\n const subParts = allParents[i].subParts();\r\n for (let j = 0; j < subParts.length; j++) {\r\n const featureGroup = subParts[j].part;\r\n if (featureGroup.activeFeature) {\r\n if (featureGroup.activeFeature.dbFeature[propToSearch] === skuNumber) {\r\n return featureGroup.activeFeature\r\n }\r\n const features = [...featureGroup.features, ...featureGroup.featuresParts];\r\n const sameSkuFeatures = features.filter(feature => feature.dbFeature[propToSearch] === skuNumber);\r\n if (!sameSkuFeatures.length) {\r\n continue;\r\n }\r\n if (featureGroup.activeFeature.metaData[\"Side\"]) {\r\n const sameSide = sameSkuFeatures.find(feature => {\r\n return isEqual(feature.metaData[\"Side\"], featureGroup.activeFeature.metaData[\"Side\"])\r\n });\r\n if (sameSide) {\r\n return sameSide\r\n }\r\n }\r\n return sameSkuFeatures[0]\r\n } else {\r\n for (let k = 0; k < featureGroup.features.length; k++) {\r\n if (featureGroup.features[k].dbFeature[propToSearch] === skuNumber) {\r\n return featureGroup.features[k];\r\n }\r\n }\r\n }\r\n }\r\n }\r\n return null\r\n }\r\n\r\n /**\r\n * Returns active installations\r\n */\r\n getActiveInstallations() {\r\n const {instState} = store.getState();\r\n return Object.assign({}, instState, {instOpened: false});\r\n }\r\n\r\n addCartAndUserStatesToLocalStorage(bvState) {\r\n const {cartState, userState, sqftState, bathroomVisualizerState, wizardState, fabricatorState} = store.getState();\r\n\r\n bvState.cartState = Object.assign({}, cartState, {\r\n recentlyViewedItems: [],\r\n cartItems: getCompressedCartItems(cartState.cartItems),\r\n displayLogicCartItems: getCompressedCartItems(cartState.displayLogicCartItems),\r\n });\r\n\r\n const lookId = getLookId(bathroomVisualizerState.activePreset, bathroomVisualizerState.bvPresets);\r\n bvState.userState = userState;\r\n bvState.id = bathroomVisualizerState.activePreset;\r\n bvState.lookId = lookId;\r\n bvState.useSqftCartPopup = sqftState ? sqftState.sqftFeaturesPopup.enabled : false;\r\n bvState.useFabricatorCostPrices = fabricatorState.settings.useFabricatorCostPrices;\r\n if (wizardState.wizardIsActive) {\r\n bvState.allWizardsValues = getCompressedAllWizardValues(wizardState.allWizardsValues);\r\n }\r\n bvState = getFeatureGroupsProperties(bvState, this);\r\n return bvState\r\n }\r\n\r\n /**\r\n * Returns activeFeatures object\r\n */\r\n\r\n getStonesActiveFeatures() {\r\n return this.getActiveFeatures(true).filter(activeFeature => activeFeature.cartFeature && activeFeature.cartFeature.isStoneFeature)\r\n }\r\n\r\n addDisabledPartsToLocalStorage(bvState) {\r\n const disabledPartIds = this.getDisabledFeatures();\r\n if (disabledPartIds.length) {\r\n bvState.disabled_parts = disabledPartIds;\r\n }\r\n return bvState\r\n }\r\n\r\n /**\r\n * @param useNames {boolean}\r\n * @param returnAllData {boolean}\r\n * @param returnAllFeatures {boolean}\r\n */\r\n getActiveFeaturesAsObject(useNames = false, returnAllData = true, returnAllFeatures = false) {\r\n let bvState = {};\r\n let activeFeatures = this.getActiveFeatures(returnAllFeatures, false, true);\r\n // console.log('activeFeatures', activeFeatures);\r\n activeFeatures.forEach((activeFeature) => {\r\n if (!activeFeature.cartFeature) {\r\n return\r\n }\r\n bvState[activeFeature.partId] = useNames\r\n ? activeFeature.cartFeature.getMatchingFeatureName()\r\n : activeFeature.cartFeature.dbFeature.id;\r\n });\r\n\r\n bvState.visualizerType = this.visualizerType; // to apply correct visualizer on quote open after save\r\n bvState.toolVersion = document.kvConfig.toolVersion; // to apply correct visualizer on quote open after save\r\n bvState.navigationType = document.kvConfig.navigationType; // to open in dashboard correct UI;\r\n\r\n bvState = this.addSpecificPropertiesToLocalStorage(bvState, useNames, returnAllFeatures);\r\n bvState = this.addDisabledPartsToLocalStorage(bvState);\r\n bvState.bvStateVersion = 2; //todo to test\r\n\r\n if (returnAllData) {\r\n bvState.installations = this.getActiveInstallations();\r\n bvState = this.addCartAndUserStatesToLocalStorage(bvState);\r\n }\r\n\r\n return bvState\r\n }\r\n\r\n /**\r\n * @param dbFeatureId {number}\r\n * @param featureGroup {featureGroupInterface}\r\n * @param featuresToLoad {array}\r\n * @return {featureInterface}\r\n */\r\n getLoadedFeatureById = (dbFeatureId, featureGroup, featuresToLoad = []) => {\r\n let featureLoaded = featureGroup.features.find((feature) => feature.dbFeature.id === dbFeatureId);\r\n if (!featureLoaded && featureGroup.featuresParts) {\r\n featureLoaded = featureGroup.featuresParts.find((feature) => feature.dbFeature.id === dbFeatureId);\r\n }\r\n if (!featureLoaded) { // if feature isn't found in the current layout, let's find it in another layouts\r\n let allFeatures = [];\r\n Object.keys(this.layoutNames).forEach((layoutType) => {\r\n if (layoutType !== \"All\") {\r\n allFeatures = [...allFeatures, ...featureGroup.featuresList[layoutType]]\r\n }\r\n });\r\n featureLoaded = allFeatures.find((feature) => feature.dbFeature.id === dbFeatureId);\r\n if (!featureLoaded\r\n && (document.kvConfig.visualizerType === \"Kitchen\" || document.kvConfig.visualizerType === \"kvScene\")\r\n && this.qtCategories && this.qtCategories.some(qtCat => qtCat.qtCategoryHasBeenChanged)\r\n && featuresToLoad.length\r\n ) {\r\n // console.info(\"Cart feature is not loaded, trying in change categories:\", dbFeatureId);\r\n this.qtCategories.forEach(qtCat => {\r\n const changedSubPart = qtCat.subParts.find(subPart => {\r\n return subPart.part.partId === featureGroup.partId\r\n });\r\n if (changedSubPart) {\r\n // console.info(\"Cart feature is not loaded, found subpart:\", ci);\r\n const needToLoadFeature = featuresToLoad.find(dbFeature => dbFeature.id === dbFeatureId);\r\n if (needToLoadFeature) {\r\n changedSubPart.part.setGroupFeatures([needToLoadFeature], 0, false)\r\n }\r\n featureLoaded = featureGroup.features.find((feature) => {\r\n return feature.dbFeature.id === dbFeatureId\r\n });\r\n // if (featureLoaded) {\r\n // console.info(\"Cart feature is not loaded, it's ok, we found it:\", dbFeatureId, featureLoaded);\r\n // }\r\n }\r\n })\r\n }\r\n // console.log('featureLoaded', featureLoaded);\r\n if (!featureLoaded) {\r\n console.error(\"Cart feature is not loaded:\", dbFeatureId);\r\n }\r\n }\r\n return featureLoaded\r\n }\r\n\r\n /**\r\n * Get Cart Items From BvState\r\n * @param cartItems {Array}\r\n * @param featuresToLoad {Array} // only if layout is changed - we need to load features to changed feature group\r\n * @param checkAllLayouts {boolean}\r\n * @return {Array}\r\n */\r\n getCartItemsFromBvState(cartItems = [], featuresToLoad = [], checkAllLayouts = false) {\r\n // const slabGroup = getSimilarFeatureGroup(SQFT_FEATURES.slabs, SQFT_FEATURES.slabs);\r\n // parentItems.push(slabGroup);\r\n\r\n const setCustomPrices = (feature, fromCartItem) => {\r\n if (feature && feature.dbFeature && fromCartItem && fromCartItem.cartFeature && fromCartItem.cartFeature.hasOwnProperty(\"customCost\")) {\r\n feature.dbFeature.priceWasChanged = true;\r\n feature.dbFeature.cost = fromCartItem.cartFeature.customCost;\r\n feature.dbFeature.fabricatorCost = fromCartItem.cartFeature.customCost;\r\n feature.dbFeature.price = fromCartItem.cartFeature.customPrice;\r\n }\r\n }\r\n\r\n return cartItems\r\n .map(ci => {\r\n\r\n const layout = checkAllLayouts && ci.fromVisualizerType ? getCurrentLayout(ci.fromVisualizerType) : this;\r\n if (layout.isNewLayout) {\r\n const partId = getCartItemPartIdFix(ci.partId);\r\n let cartFeature = layout.getFeatureFromAllLayouts(ci.partId, ci.cartFeature, featuresToLoad);\r\n setCustomPrices(cartFeature, ci);\r\n let newCartItem = Object.assign({}, ci, {\r\n partId,\r\n currentQuote: ci.currentQuote || 0,\r\n cartFeature: cartFeature\r\n });\r\n if (ci.relatedProductParent) {\r\n newCartItem.relatedProductParent = layout.getFeatureFromAllLayouts(ci.relatedProductParent.partId, ci.relatedProductParent, featuresToLoad);\r\n }\r\n if (ci.bundleParentId) {\r\n newCartItem.bundleParentId = ci.bundleParentId;\r\n }\r\n if (Number.isInteger(newCartItem.fromWizardId)) {\r\n newCartItem.fromWizardId = getUpdatedWizardId(newCartItem.fromVisualizerType, newCartItem.fromWizardId)\r\n }\r\n if (cartFeature && cartFeature.dbFeature) { //if we couldn't find feature then we will try to restore it from old layout\r\n return newCartItem\r\n }\r\n }\r\n\r\n const parentItems = layout.getFeatures(true);\r\n const dbFeatureId = ci.cartFeature.dbFeatureId || ci.fabFeatId || (ci.cartFeature.dbFeature ? ci.cartFeature.dbFeature.id : null); //old logic support\r\n if (!dbFeatureId) {\r\n console.log(\"NO DB FEATURE ID\", ci);\r\n }\r\n const ciFeature = ci.cartFeature; // we have to remember what has come from backend to be able to restore custom price\r\n ci.cartFeature = ci.cartFeature || {};\r\n ci.partId = getCartItemPartIdFix(ci.partId);\r\n ci.currentQuote = ci.currentQuote || 0;\r\n let childSubPart = null;\r\n parentItems.forEach(parentGroup => {\r\n if (childSubPart || !parentGroup) {\r\n return\r\n }\r\n if (ci.partId === SQFT_FEATURES.slabs) {\r\n childSubPart = getSlabsFeatureGroup(layout);\r\n childSubPart = childSubPart.part ? childSubPart.part : childSubPart\r\n } else {\r\n //changed subParts() to relatedItems because on this task QCDES-2593\r\n childSubPart = parentGroup.relatedItems.find(relItem => relItem.partId === ci.partId);\r\n }\r\n if (childSubPart && childSubPart.features) {\r\n ci.cartFeature = layout.getLoadedFeatureById(dbFeatureId, childSubPart, featuresToLoad);\r\n }\r\n });\r\n setCustomPrices(ci.cartFeature, {cartFeature: ciFeature});\r\n if (Number.isInteger(ci.fromWizardId)) {\r\n ci.fromWizardId = getUpdatedWizardId(ci.fromVisualizerType, ci.fromWizardId)\r\n }\r\n if (!ci.cartFeature || !ci.cartFeature.dbFeature) {\r\n console.error(\"cartFeature not loaded!\", ci);\r\n }\r\n return ci\r\n })\r\n .filter(ci => ci.cartFeature && ci.cartFeature.dbFeature); //prevent error's that are caused by missing feature\r\n }\r\n\r\n bvStateHasLockedItems(bvState) {\r\n return this.getFeatures().some((parentGroup) => {\r\n let partDataHasLockedItems = false;\r\n if (parentGroup.menuType === 0 && parentGroup.partName !== \"Toilet\") {\r\n const partId = parentGroup.partId;\r\n if (bvState.hasOwnProperty(partId)) {\r\n const feature = parentGroup.getFeatureById(bvState[partId]);\r\n if (feature && !feature.dbFeature.unlocked) {\r\n // console.log('found!', feature);\r\n partDataHasLockedItems = true;\r\n }\r\n }\r\n } else {\r\n let subParts = parentGroup.relatedItems;\r\n subParts.forEach((subPart) => {\r\n const partId = subPart.partId;\r\n if (bvState.hasOwnProperty(partId)) {\r\n const feature = subPart.getFeatureById(bvState[partId]);\r\n if (feature && !feature.dbFeature.unlocked) {\r\n // console.log('found!', feature, index);\r\n partDataHasLockedItems = true;\r\n }\r\n // if (partId === \"shower_body\") {\r\n // }\r\n }\r\n })\r\n }\r\n return partDataHasLockedItems\r\n });\r\n }\r\n\r\n /**\r\n * @param qtCategories {array}\r\n * @return void // creates array of featureGroups features and loads them. skips already loaded\r\n */\r\n loadFeatureGroupFeatures = (qtCategories) => {\r\n let featureGroupFeatures = [];\r\n let needToLoadFeatureGroupsFeatures = [];\r\n // qtCategories.forEach(qtCategory => {\r\n // qtCategory.featureGroups.forEach(featureGroup => {\r\n // if (featureGroup.features && featureGroup.features.length) {\r\n // featureGroup.features.forEach(dbFeature => {\r\n // if (!dbFeature.metaData) {\r\n // console.log(\"no metadata found\", dbFeature);\r\n // }\r\n // })\r\n // }\r\n // });\r\n // });\r\n const parentParts = this.getFeatures();\r\n qtCategories\r\n .filter(qtCategory => {\r\n return qtCategory.enabled && qtCategory.featureGroups.some(featureGroup => featureGroup.enabled)\r\n })\r\n .forEach(qtCategory => {\r\n qtCategory.featureGroups\r\n .filter(featureGroup => {\r\n const groupName = featureGroup.groupName.toLowerCase();\r\n for (let i = 0; i < parentParts.length; i++) {\r\n const parentPart = parentParts[i];\r\n const subPartItems = parentPart.subParts();\r\n const item = subPartItems.find(subPartItem => {\r\n const dbName = (subPartItem.part.dbName || subPartItem.part.partName).toLowerCase();\r\n return groupName === dbName\r\n });\r\n if (item) {\r\n const navItems = this.designNavigationItems(item, {}, \"\", false, true);\r\n if (!navItems.length && !needToLoadFeatureGroupsFeatures.some(sPart => sPart.part.partId === item.part.partId)) {\r\n needToLoadFeatureGroupsFeatures.push(item);\r\n }\r\n // console.log(\"features already exist:\", groupName);\r\n return false\r\n }\r\n }\r\n return true\r\n })\r\n .forEach(featureGroup => {\r\n if (featureGroup.features && featureGroup.features.length) {\r\n featureGroupFeatures = [...featureGroupFeatures, ...featureGroup.features]\r\n }\r\n });\r\n });\r\n this.loadNewFeatures(featureGroupFeatures, null, false);\r\n return needToLoadFeatureGroupsFeatures\r\n };\r\n\r\n addSubPartProperties(subPart, featureGroup, qtCategory, isComplex = false) {\r\n subPart.part.qtCategoryName = qtCategory.name;\r\n subPart.part.featureGroupVisible = featureGroup.visible;\r\n subPart.part.featureGroupEnabled = featureGroup.enabled;\r\n subPart.part.displayType = featureGroup.displayType || 3;\r\n subPart.part.featureGroupEnabled = featureGroup.enabled;\r\n subPart.part.unitText = featureGroup.unitText;\r\n subPart.hasFeatures = featureGroup.hasFeatures;\r\n if (!isComplex) {\r\n subPart.part.customGroupDisplayName = featureGroup.customDisplayName;\r\n subPart.part.description = featureGroup.description;\r\n subPart.part.customDescription = featureGroup.customDescription;\r\n subPart.part.customImageUrl = featureGroup.customImageUrl ? baseDashboardImagesPath + featureGroup.customImageUrl : \"\";\r\n if ((this.visualizerType === AVAILABLE_VISUALIZER_TYPES.kvScene)) {\r\n if (subPart.part.partId === \"center_island_sink\") {\r\n const anotherFg = this.getFeatureGroupByPartId(\"sink\");\r\n if (anotherFg) {\r\n anotherFg.customGroupDisplayName = subPart.part.customGroupDisplayName;\r\n anotherFg.description = subPart.part.description;\r\n anotherFg.customDescription = subPart.part.customDescription;\r\n anotherFg.customImageUrl = subPart.part.customImageUrl;\r\n }\r\n } else if (subPart.part.partId === \"center_island_faucet\") {\r\n const anotherFg = this.getFeatureGroupByPartId(\"faucet\");\r\n if (anotherFg) {\r\n anotherFg.customGroupDisplayName = subPart.part.customGroupDisplayName;\r\n anotherFg.description = subPart.part.description;\r\n anotherFg.customDescription = subPart.part.customDescription;\r\n anotherFg.customImageUrl = subPart.part.customImageUrl;\r\n }\r\n }\r\n }\r\n }\r\n /*** HERE WE SET SAME PROPERTIES FOR SPECIFIC QT Category ***/\r\n let qtCatProperties = {\r\n qtCategoryId: qtCategory.id,\r\n qtCategoryName: qtCategory.name,\r\n featureGroupVisible: featureGroup.visible,\r\n featureGroupEnabled: featureGroup.enabled,\r\n // hasFeatures: featureGroup.hasFeatures, // NOT SURE WHERE WE NEED THAT\r\n }\r\n if (!isComplex) {\r\n qtCatProperties.customGroupDisplayName = featureGroup.customDisplayName;\r\n qtCatProperties.description = featureGroup.description;\r\n qtCatProperties.customDescription = featureGroup.customDescription;\r\n qtCatProperties.customImageUrl = featureGroup.customImageUrl ? baseDashboardImagesPath + featureGroup.customImageUrl : \"\";\r\n }\r\n if (!subPart.part.qtCatProperties) {\r\n subPart.part.qtCatProperties = {};\r\n }\r\n subPart.part.qtCatProperties[qtCategory.name] = qtCatProperties;\r\n }\r\n\r\n get qtCategories() {\r\n //NOTA BENE !!! kitchen layout has it's own get qtCategories() method\r\n return this.qtCategoriesList\r\n }\r\n\r\n setQtCategoriesSubparts(qtCategories) {\r\n const parentParts = [...this.getFeatures(), this.parts[\"Other\"]];\r\n // console.log('parentParts', parentParts);\r\n let hasFeaturePropertyName = getCommonVisualizerType(this.visualizerType);\r\n this.qtCategoriesList = qtCategories\r\n .map(qtCategory => { //todo remove this after we push staging backend\r\n if (Array.isArray(qtCategory.featureGroups)) {\r\n qtCategory.featureGroups = qtCategory.featureGroups.map((featureGroup) => {\r\n if (this.isNewLayout) { // ignoreHasFeaturesProperty\r\n featureGroup.hasFeatures = {\r\n bathroom: true,\r\n kitchen: true,\r\n fireplace: true,\r\n laundryroom: true,\r\n }\r\n } else if (!featureGroup.hasFeatures) {\r\n featureGroup.hasFeatures = {\r\n bathroom: featureGroup.hasBVFeatures,\r\n kitchen: featureGroup.hasKVFeatures,\r\n fireplace: true,\r\n laundryroom: true,\r\n }\r\n }\r\n if (featureGroup.hasFeatures[hasFeaturePropertyName] && Array.isArray(featureGroup.features)\r\n && (featureGroup.features.length > 0 && featureGroup.features.length < 50)\r\n && !featureGroup.features.some(dbFeature => isFeatureEnabled({dbFeature}, \"quotingTool\", \"\", hasFeaturePropertyName))) {\r\n // this is a fix we need to do on the backend! if features.length is more than 50 and they all are disabled\r\n // for QuotingTool - hasFeatures.bathroom should be false!\r\n featureGroup.hasFeatures[hasFeaturePropertyName] = false\r\n }\r\n return featureGroup\r\n })\r\n }\r\n return qtCategory\r\n })\r\n .filter(qtCategory => {\r\n return qtCategory.enabled // 1) remove disabled qtCategories\r\n && Array.isArray(qtCategory.featureGroups) && qtCategory.featureGroups.some((featureGroup) => {\r\n return featureGroup.hasFeatures && featureGroup.hasFeatures[hasFeaturePropertyName] // 1) remove qtCategories without visualizerTypeFeatures\r\n })\r\n })\r\n .sort((a, b) => a.order !== b.order ? a.order < b.order ? -1 : 1 : 0) // sort by order\r\n .map((qtCategory) => {\r\n let subParts = [];\r\n qtCategory.featureGroups\r\n .filter(featureGroup => {\r\n const featureGroupName = featureGroup.groupName.toLowerCase();\r\n return featureGroupName !== \"walls\"\r\n }) // remove walls featureGroup // clone.quotesflooring.com/visualizer#/ issue\r\n .sort((a, b) => a.order !== b.order ? a.order < b.order ? -1 : 1 : 0) // sort by order\r\n .forEach(featureGroup => {\r\n let subPart = null;\r\n const featureGroupName = featureGroup.groupName.toLowerCase();\r\n // if (featureGroupName === \"walls\") {\r\n // const wallsParent = parentParts.find(parentPart => parentPart.partName === \"Walls\");\r\n // if (wallsParent) {\r\n // subParts = [...subParts, ...wallsParent.subParts().map(wallsSubPart => {\r\n // this.addSubPartProperties(wallsSubPart, featureGroup, qtCategory, false);\r\n // return wallsSubPart\r\n // })];\r\n // }\r\n // } else {\r\n //\r\n // }\r\n for (let i = 0; i < parentParts.length; i++) {\r\n const parentPart = parentParts[i];\r\n const subPartItems = parentPart.relatedItems.map(_ => new DesignNavigationItem(_.partName, _));\r\n const item = subPartItems.find(subPartItem => {\r\n if (featureGroupName === \"shower pan\" && document.kvConfig.visualizerType === \"bvScene\") {\r\n const dbName = (subPartItem.part.dbName || \"\").toLowerCase();\r\n const dbName2 = (subPartItem.part.partName || \"\").toLowerCase();\r\n return featureGroupName === dbName || featureGroupName === dbName2\r\n } else if (featureGroupName === \"vanity\" && document.kvConfig.visualizerType === \"bvLook\") {\r\n return subPartItem.part.partId === 'vanity_cabinet'\r\n }\r\n const dbName = (subPartItem.part.dbName || subPartItem.part.partName).toLowerCase();\r\n // if (featureGroupName === dbName && (this.visualizerType === AVAILABLE_VISUALIZER_TYPES.kvScene)) {\r\n // if (dbName === \"sink\" && (subPartItem.part.partId === \"center_island_sink\")) {\r\n // return false // we should show back countertop sink instead of sink on the new Kitchen\r\n // } else if (dbName === \"faucet\" && (subPartItem.part.partId === \"center_island_faucet\")) {\r\n // return false // we should show back countertop faucet instead of faucet on the new Kitchen\r\n // }\r\n // }\r\n return featureGroupName === dbName\r\n });\r\n if (item) {\r\n subPart = item;\r\n this.addSubPartProperties(subPart, featureGroup, qtCategory, false);\r\n break;\r\n }\r\n }\r\n if (!subPart) { // add it to Other group\r\n subPart = this.addNonVisualizerSubPart(featureGroup.groupName);\r\n this.addSubPartProperties(subPart, featureGroup, qtCategory, false);\r\n }\r\n subParts.push(subPart)\r\n });\r\n\r\n const self = this;\r\n\r\n const defaultSubParts = subParts.filter(subPart => {\r\n return subPart && subPart.part.featureGroupEnabled\r\n && (subPart.part.featureGroupVisible || (!subPart.part.featureGroupVisible && document.kvConfig.isBackend))\r\n && subPart.hasFeatures && subPart.hasFeatures[hasFeaturePropertyName]\r\n });\r\n\r\n return {\r\n id: qtCategory.id,\r\n name: qtCategory.name,\r\n order: qtCategory.order,\r\n bgImageUrl: qtCategory.bgImageUrl,\r\n defaultSubParts, // is used for center island replacing\r\n _subParts: defaultSubParts, // remove featureGroups that are !enabled && !visible (eye ball) && has features\r\n get subParts() {\r\n return this._subParts.filter((subPart) => {\r\n const restOptions = window.location.hash.includes(\"#/materials\") ? {forActiveQTCategory: qtCategory.name} : {};\r\n return self.hasNavItemsLength(subPart, {}, \"\", null, true, [], restOptions)\r\n });\r\n },\r\n set subParts(newSubParts) {\r\n this._subParts = newSubParts\r\n }\r\n }\r\n })\r\n .filter(qtCategory => qtCategory.defaultSubParts.length); // this filter is added in case someone added wrong featureGroup\r\n\r\n if (!this.qtCategoriesList.length) {\r\n this.qtCategoriesList = null;\r\n }\r\n\r\n if (this.qtCategoriesList) {\r\n // here we set for every subPart if it is available in the QuotingTool(exist in some qtCategory)\r\n for (let i = 0; i < parentParts.length; i++) {\r\n const parentPart = parentParts[i];\r\n const subPartItems = parentPart.subParts();\r\n subPartItems.forEach(subPartItem => {\r\n subPartItem.part.existInQtCategory = this.qtCategoriesList.some(qtCategory => {\r\n return qtCategory.subParts.some(qtCategorySubPartNavItem => {\r\n return qtCategorySubPartNavItem.part.partId === subPartItem.part.partId\r\n })\r\n });\r\n // console.log(\"subPartItem.part.existInQtCategory\", subPartItem.part.partId, subPartItem.part.existInQtCategory);\r\n });\r\n }\r\n }\r\n\r\n store.dispatch(setQtCategoriesLoaded(this.visualizerType))\r\n\r\n }\r\n\r\n /**\r\n * Returns the actual value of the filter by its group and id\r\n * @param groupId {number}\r\n * @param filterValueId {number}\r\n */\r\n static filterValue(groupId, filterValueId) {\r\n const filterGroups = store.getState().filterState.filterGroups;\r\n if (!filterGroups.length)\r\n return null;\r\n const group = find(filterGroups, {id: groupId});\r\n if (!group)\r\n return null;\r\n const valueObj = find(group.values, {id: filterValueId});\r\n return valueObj ? valueObj.value.trim() : null;\r\n }\r\n\r\n /**\r\n * Returns the actual id of the filter by its group and name(filterValue)\r\n * @param groupId {number}\r\n * @param filterValue {string}\r\n */\r\n static getfilterValueIdByValue(groupId, filterValue) {\r\n const filterGroups = store.getState().filterState.filterGroups;\r\n if (!filterGroups.length)\r\n return null;\r\n const group = find(filterGroups, {id: groupId});\r\n if (!group)\r\n return null;\r\n const valueObj = find(group.values, {value: filterValue});\r\n return valueObj ? valueObj.id : null;\r\n }\r\n\r\n /**\r\n * Returns the child subPart according to passed partId\r\n * @param partId {string}\r\n */\r\n getSubPartByPartId(partId) {\r\n const parentItems = this.getFeatures(true);\r\n for (let i = 0; i < parentItems.length; i++) {\r\n const subParts = parentItems[i].subParts();\r\n const neededSubPart = subParts.find(subPart => subPart.part.partId === partId);\r\n if (neededSubPart) {\r\n return neededSubPart\r\n }\r\n }\r\n return null\r\n }\r\n\r\n /**\r\n * stores to localStorage object, for example {vanity_cabinet:12,shower_floor:74}\r\n */\r\n async updateLocalStorage() {\r\n if (IS_LIXIL_UI && !document.kvConfig.isWordpressPlugin) {\r\n return false // we are not restoring the state from the locale storage on lixil ui, so why do we keep it there\r\n }\r\n const {activeQuoteIndex} = store.getState().quotesState;\r\n const quotes = await updateCurrentQuote(null, undefined, true);\r\n if (!document.kvConfig.jobId) {\r\n try {\r\n window.localStorage.setItem(this.localStorageKey, JSON.stringify({\r\n ...quotes[activeQuoteIndex].data,\r\n quotes,\r\n activeQuoteIndex\r\n }));\r\n // console.log(\"updated LocalStorage\", window.localStorage);\r\n } catch (ex) { console.log(\"localStorage exception\", ex); }\r\n }\r\n }\r\n\r\n setCartStateAndUserStateFromBvState(bvState, featuresToLoad = []) {\r\n const {isLixil, settings} = store.getState().fabricatorState;\r\n\r\n setFeatureGroupsProperties(bvState, this);\r\n\r\n if (bvState.cartState && Array.isArray(bvState.cartState.cartItems)) {\r\n bvState.cartState.cartItems = this.getCartItemsFromBvState(bvState.cartState.cartItems, featuresToLoad, settings.allowVisualizerSwitching);\r\n if (Array.isArray(bvState.cartState.displayLogicCartItems) && bvState.cartState.displayLogicCartItems.length) {\r\n bvState.cartState.displayLogicCartItems = this.getCartItemsFromBvState(bvState.cartState.displayLogicCartItems, featuresToLoad, settings.allowVisualizerSwitching)\r\n .filter(ci => ci.cartFeature && ci.cartFeature.dbFeature && ci.cartFeature.dbFeature.displayLogic);\r\n }\r\n if (bvState.cartState.cartItems.length) {\r\n store.dispatch(restoreCart(bvState.cartState));\r\n }\r\n if (Array.isArray(bvState.cartState.allWizardsValues) && bvState.cartState.allWizardsValues.length) {\r\n store.dispatch(restoreAllWizardSelectedValues(bvState.cartState.allWizardsValues)); // after cart state\r\n }\r\n }\r\n if (bvState.userState && (!IS_LIXIL_UI || !isLixil || bvState.userState.userInfo.email)) { // if no email passed - we don't recover anything (guest checkout issue)\r\n store.dispatch({\r\n type: types.RESTORE_USER_STATE,\r\n payload: bvState.userState\r\n });\r\n }\r\n if (bvState.installations) {\r\n store.dispatch({\r\n type: types.SET_INST_LIST,\r\n payload: bvState.installations\r\n });\r\n }\r\n if (bvState.quotes) {\r\n store.dispatch(setQuotes(bvState.quotes));\r\n store.dispatch(setActiveQuoteIndex(bvState.activeQuoteIndex || 0));\r\n }\r\n if (!bvState.useSqftCartPopup && bvState.cartState && !bvState.cartState.cartItems.some(cartItem => cartItem.sqftId)) {\r\n store.dispatch(changeSqftFeaturesPopup({\r\n enabled: false\r\n }));\r\n }\r\n if (((typeof bvState.contractSigningValues === \"object\") && Object.keys(bvState.contractSigningValues).length)\r\n || ((typeof bvState.contractsValues === \"object\") && Object.keys(bvState.contractsValues).length)) {\r\n store.dispatch(restoreContractValues(\r\n bvState.contractSigningValues,\r\n bvState.savedInvoiceNumberOfPages,\r\n bvState.needToUpdateContract,\r\n bvState.contractsValues,\r\n ));\r\n }\r\n if (bvState.receiptSignature) {\r\n store.dispatch(setReceiptSignature(bvState.receiptSignature));\r\n }\r\n // if (bvState.useFabricatorCostPrices) { // per Alan, even if we saved with the cost price - we should see the retail prices on edit\r\n // store.dispatch(toggleUseFabricatorCostPrices(true));\r\n // }\r\n }\r\n\r\n resetEverything() {\r\n this.initialized = false;\r\n this.type = this.defaultType;\r\n const features = this.getFeatures();\r\n const currentState = store.getState();\r\n const {activeQuoteIndex} = currentState.quotesState;\r\n features.forEach(parentGroup => {\r\n if (parentGroup.relatedItems && parentGroup.relatedItems.length) {\r\n parentGroup.relatedItems.forEach((subPart) => {\r\n subPart.activeFeature = null;\r\n subPart.placeholderChanged = false;\r\n subPart.firstClick[activeQuoteIndex] = false;\r\n subPart.disabled = subPart.defaultDisabled;\r\n if (Array.isArray(subPart.activeFeatureParts) && subPart.activeFeatureParts.length) {\r\n subPart.activeFeatureParts = subPart.setActiveFeatureParts();\r\n }\r\n });\r\n }\r\n parentGroup.activeFeature = null;\r\n parentGroup.placeholderChanged = false;\r\n if (!parentGroup.firstClick) {\r\n parentGroup.firstClick = {};\r\n }\r\n parentGroup.firstClick[activeQuoteIndex] = false;\r\n parentGroup.setDefault(this);\r\n });\r\n this.changeLayout(features);\r\n const bvPresets = currentState.bathroomVisualizerState.bvPresets\r\n const loadByTheDefault = bvPresets && bvPresets.find(preset => preset.loadByTheDefault);\r\n if (loadByTheDefault) {\r\n this.setActiveFeaturesFromObject(loadByTheDefault);\r\n }\r\n this.initialized = true;\r\n }\r\n\r\n /**\r\n * Returns all of the layers, based on current configuration\r\n * @param placeholdersNeeded {boolean}\r\n * @param forceReturn {boolean}\r\n */\r\n getLayers(placeholdersNeeded, forceReturn= false) {\r\n if (!this.initialized && !forceReturn) {\r\n return [];\r\n }\r\n\r\n const features = this.enabledParts(true);\r\n let res = [];\r\n\r\n // console.log('features', features);\r\n\r\n features.forEach(parentGroup => {\r\n const layers = parentGroup.setLayers(this, placeholdersNeeded); // setLayers first! then set z-index\r\n // console.log('layers', layers);\r\n\r\n parentGroup.setZIndex(this.zIndexes[this.getCurrentLayoutName()]); // set zIndexes\r\n\r\n if (layers && layers.length) {\r\n res = res.concat(layers);\r\n }\r\n });\r\n\r\n if (this.addCustomLayers) {\r\n res = this.addCustomLayers(res);\r\n }\r\n\r\n const {canvasDimensions} = store.getState().bathroomVisualizerState;\r\n\r\n const zSort = this.isNewLayout ? \"desc\" : \"asc\";\r\n\r\n res = orderBy(res, ['zIndex'], [zSort]).map(layer => {\r\n // console.log('layer', layer);\r\n let layerToReturn = {\r\n zIndex: layer.zIndex,\r\n image: layer.bgImg(!!layer.cropCoords),\r\n coords: layer.coords || null,\r\n partId: layer.partId || \"\",\r\n layerPosition: layer.layerPosition || \"\",\r\n cropCoords: layer.cropCoords || null,\r\n }\r\n if (this.isNewLayout && layer.zIndex < 50000) {\r\n const zIndexesObject = getCurrentZIndexes(this.visualizerType);\r\n layerToReturn.layerDimensions = zIndexesObject.getLayerDimensions(layer, this.getCurrentLayoutName(), canvasDimensions)\r\n }\r\n return layerToReturn\r\n });\r\n\r\n return res;\r\n }\r\n\r\n /**\r\n * Returns {array} activeFeatures objects\r\n */\r\n getActiveFeatures(returnAllFeatures, withLayerPositions = false, withDisabled = false) {\r\n let activeFeatures = [];\r\n const receiveAllFeatures = returnAllFeatures || !!(this.qtCategories && this.qtCategories.length);\r\n this.getFeatures(receiveAllFeatures).forEach((parentGroup) => {\r\n // let subParts = parentGroup.subParts().filter(subPart => !subPart.part.disabled); // we need to store every item!\r\n\r\n if (parentGroup.menuType === 0) { // old logic for BV visualizer\r\n if (!parentGroup.disabled && parentGroup.placeholderChanged && parentGroup.activeFeature) {\r\n activeFeatures.push({\r\n selectionGroup: parentGroup.partName,\r\n partId: parentGroup.partId,\r\n quantity: 0,\r\n cartFeature: parentGroup.activeFeature,\r\n featureGroup: parentGroup\r\n });\r\n }\r\n }\r\n\r\n let subItems = parentGroup.relatedItems;\r\n const excluded = [\"fridge_shadow\"];\r\n if (!returnAllFeatures) {\r\n subItems = subItems.filter(subItem => {\r\n if (document.kvConfig.visualizerType === \"Bathroom\" && subItem.partId === \"shower_body\" && subItem.features.length) { // shower_body should always be!\r\n return true\r\n }\r\n return !excluded.includes(subItem.partId) && subItem.activeFeature && subItem.activeFeature.partName\r\n && !subItem.activeFeature.partName.includes(\"laceholder\")\r\n });\r\n }\r\n subItems.forEach((subItem) => {\r\n if (withLayerPositions && subItem.layerPositions) {\r\n Object.keys(subItem.layerPositions).forEach(position => {\r\n if (subItem.layerPositions[position] || withDisabled) {\r\n activeFeatures.push({\r\n selectionGroup: parentGroup.partName,\r\n partId: subItem.partId,\r\n quantity: 0,\r\n cartFeature: subItem.layerPositions[position] || null,\r\n featureGroup: subItem,\r\n layerPosition: position,\r\n });\r\n }\r\n })\r\n } else if (subItem.activeFeature && (withDisabled || !subItem.disabled)) {\r\n activeFeatures.push({\r\n selectionGroup: parentGroup.partName,\r\n partId: subItem.partId,\r\n quantity: 0,\r\n cartFeature: subItem.activeFeature || null,\r\n featureGroup: subItem\r\n });\r\n }\r\n })\r\n });\r\n // console.log('activeFeatures', activeFeatures);\r\n const qtCategories = this.qtCategories;\r\n if (!returnAllFeatures && qtCategories && qtCategories.length) {\r\n const subPartsObject = {};\r\n activeFeatures = activeFeatures.filter(activeFeature => {\r\n return qtCategories.some((qtCategory, qtCategoryIndex) => {\r\n if (!subPartsObject[qtCategoryIndex]) {\r\n subPartsObject[qtCategoryIndex] = qtCategory.subParts; // caching here, cause subParts requires to call getNavItems\r\n }\r\n return subPartsObject[qtCategoryIndex].some(subPart => {\r\n return subPart.part.partId === activeFeature.partId\r\n })\r\n })\r\n })\r\n }\r\n return activeFeatures\r\n }\r\n\r\n getActiveNames() {\r\n const allFeatures = this.getActiveFeatures(true);\r\n const excludedGroups = [\"Background\", \"Globals\", \"Other\", \"Others\"];\r\n const resultFeatures = allFeatures\r\n .filter(featureObject => {\r\n return featureObject.cartFeature && excludedGroups.every(excludedGroupName => featureObject.selectionGroup !== excludedGroupName)\r\n })\r\n .map(featureObject => {\r\n return {\r\n featureId: featureObject.cartFeature.dbFeature.id,\r\n parentName: featureObject.selectionGroup,\r\n groupName: featureObject.cartFeature.dbFeature.groupName,\r\n featureName: featureObject.cartFeature.getFeatureName()\r\n }\r\n })\r\n // console.log(\"resultFeatures\", resultFeatures);\r\n return resultFeatures\r\n }\r\n\r\n /**\r\n *\r\n * @param bvState {object}\r\n * @param setCartAndUserState {boolean}\r\n * @param useNames {boolean}\r\n * @param needToChangeLayout {boolean}\r\n * @param firstLoad {boolean}\r\n */\r\n setActiveFeaturesFromObject(bvState, setCartAndUserState = false, useNames = false, needToChangeLayout = true, firstLoad = false) {\r\n if (bvState) {\r\n\r\n const layout_type = +bvState.layout_type;\r\n needToChangeLayout = needToChangeLayout && (layout_type || layout_type === 0) && (layout_type !== +this.type);\r\n\r\n if (needToChangeLayout) {\r\n this.type = layout_type;\r\n }\r\n\r\n\r\n console.log(\"bvState===>\", bvState);\r\n\r\n // to avoid checks below\r\n bvState.disabled_parts = bvState.disabled_parts || [];\r\n\r\n this.getFeatures()\r\n .forEach((parentGroup) => {\r\n if (parentGroup.menuType === 0) {\r\n const partId = parentGroup.partId;\r\n const hasPreviouslySavedItem = this.selectedLayoutFeatures[layout_type]\r\n && this.selectedLayoutFeatures[layout_type][partId];\r\n if (bvState.hasOwnProperty(partId) || hasPreviouslySavedItem) {\r\n if (useNames) {\r\n parentGroup.activeFeature = parentGroup.getFeatureByPartName(bvState[partId]);\r\n if (!parentGroup.activeFeature && hasPreviouslySavedItem) {\r\n parentGroup.activeFeature = parentGroup.getFeatureByPartName(hasPreviouslySavedItem);\r\n }\r\n } else {\r\n parentGroup.activeFeature = parentGroup.getFeatureById(bvState[partId])\r\n || parentGroup.getDefaultFeature();\r\n }\r\n parentGroup.placeholderChanged = !!parentGroup.activeFeature;\r\n // const {activeQuoteIndex} = store.getState().quotesState;\r\n // parentGroup.firstClick = !!parentGroup.activeFeature;\r\n }\r\n if (parentGroup.activeFeature && firstLoad && !parentGroup.activeFeature.notAvailableInVisualizer) { // Leave non in vis features locked\r\n parentGroup.activeFeature.dbFeature.unlocked = true;\r\n }\r\n if (bvState.disabled_parts.includes(partId)) {\r\n parentGroup.disabled = true\r\n }\r\n } else {\r\n let relatedItems = parentGroup.getRelatedItems();\r\n relatedItems.forEach((subPart) => {\r\n const partId = subPart.partId;\r\n let previouslySelectedItem = null;\r\n subPart.selectedFeaturesHistory.some(featureName => {\r\n previouslySelectedItem = subPart.getFeatureByPartName(featureName);\r\n return previouslySelectedItem\r\n });\r\n if (bvState.hasOwnProperty(partId) || previouslySelectedItem) {\r\n if (!bvState.disabled_parts.includes(partId)) {\r\n subPart.disabled = false\r\n }\r\n if (useNames) {\r\n const matchingFeature = subPart.getFeatureByPartName(bvState[partId]);\r\n if (matchingFeature) {\r\n subPart.activeFeature = matchingFeature;\r\n } else if (previouslySelectedItem) {\r\n subPart.activeFeature = previouslySelectedItem;\r\n }\r\n } else {\r\n subPart.activeFeature = subPart.getFeatureById(bvState[partId]) || parentGroup.getDefaultFeature();\r\n }\r\n if (subPart.layerPositions && subPart.activeFeature) {\r\n // subPart.setLayerPositions()\r\n Object.keys(subPart.layerPositions).forEach(position => {\r\n const partIdPosition = partId + \"_\" + position;\r\n if (bvState[partIdPosition]) {\r\n subPart.layerPositions[position] = useNames\r\n ? subPart.getMatchingPositionFeature(position)\r\n : subPart.getFeatureById(bvState[partIdPosition], true)\r\n }\r\n })\r\n }\r\n subPart.placeholderChanged = !!subPart.activeFeature;\r\n // const {activeQuoteIndex} = store.getState().quotesState;\r\n // subPart.firstClick = !!subPart.activeFeature;\r\n // if (subPart.firstClick) {\r\n // console.log(\"subPart.firstClick\", subPart);\r\n // }\r\n }\r\n if (subPart.activeFeature && firstLoad && !subPart.activeFeature.notAvailableInVisualizer) {\r\n subPart.activeFeature.dbFeature.unlocked = true;\r\n if (subPart.selectedFeaturesHistory) {\r\n subPart.selectedFeaturesHistory.push(subPart.activeFeature.partName)\r\n }\r\n }\r\n if (bvState.disabled_parts.includes(partId)) {\r\n subPart.disabled = true\r\n }\r\n })\r\n }\r\n });\r\n\r\n if (needToChangeLayout) {\r\n this.changeLayout(this.getFeatures());\r\n }\r\n\r\n if (setCartAndUserState) {\r\n this.setCartStateAndUserStateFromBvState(bvState);\r\n }\r\n\r\n const layoutParts = this.designNavigationItems()\r\n .filter(parentGroup => parentGroup.part.categoryEnabled)\r\n .map((parentGroup) => parentGroup.part.partName);\r\n\r\n if (!this.isFakeLayout) {\r\n store.dispatch({\r\n type: types.SET_LAYOUT_DATA_PARTS,\r\n payload: {layoutParts}\r\n });\r\n }\r\n\r\n }\r\n }\r\n\r\n /**\r\n * Sets bv features from url\r\n */\r\n parseUrl(bvState) {\r\n if (bvState.disabled_parts) {\r\n bvState.disabled_parts = bvState.disabled_parts.split(\",\");\r\n }\r\n console.log('restoring bvState from url...', bvState);\r\n return bvState\r\n }\r\n\r\n /**\r\n *\r\n * @param bvState {object}\r\n * @param useNames {boolean}\r\n * @param returnAllFeatures {boolean}\r\n * @returns bvState {object}\r\n */\r\n addSpecificPropertiesToLocalStorage(bvState, useNames = false, returnAllFeatures = false) {\r\n bvState.layout_type = this.type;\r\n bvState.scene = this.scene;\r\n if (this.isNewLayout) {\r\n bvState.bvStateVersion = 2;\r\n }\r\n this.getFeatures(returnAllFeatures).forEach((parentGroup) => {\r\n let relatedItems = parentGroup.getRelatedItems();\r\n relatedItems.forEach((subPart) => {\r\n if (subPart.layerPositions) {\r\n Object.keys(subPart.layerPositions).forEach(position => {\r\n if (subPart.layerPositions[position]) {\r\n bvState[subPart.partId + \"_\" + position] = useNames\r\n ? subPart.layerPositions[position].getSplittedFeatureName()\r\n : subPart.layerPositions[position].dbFeature.id\r\n }\r\n })\r\n }\r\n // this is used for adding these features to array of needed features form the backend on preset apply\r\n if (subPart.activeFeatureParts && subPart.activeFeatureParts.length) {\r\n subPart.activeFeatureParts.forEach((feature, featureIndex) => {\r\n bvState[subPart.partId + \"_part_\" + featureIndex] = useNames\r\n ? feature.getSplittedFeatureName()\r\n : feature.dbFeature.id\r\n })\r\n }\r\n if (subPart.partId === \"backsplash\" && subPart.getCurrentActiveFeatureType) {\r\n bvState[\"backsplash_type\"] = subPart.getCurrentActiveFeatureType();\r\n }\r\n })\r\n })\r\n // console.log('bvState', bvState);\r\n return bvState\r\n }\r\n\r\n getDisabledFeatures() {\r\n const disabledPartIds = [];\r\n this.getFeatures().forEach((parentGroup) => {\r\n if (parentGroup.menuType === 0) {\r\n if (parentGroup.disabled) {\r\n if (document.kvConfig.visualizerType === \"Bathroom\" && parentGroup.partName !== \"Toilet\") {\r\n disabledPartIds.push(parentGroup.partId);\r\n } else {\r\n disabledPartIds.push(parentGroup.partId);\r\n }\r\n }\r\n } else {\r\n parentGroup.relatedItems.forEach((subPart) => {\r\n if (subPart.disabled) {\r\n disabledPartIds.push(subPart.partId);\r\n } else if (subPart.layerPositions) {\r\n Object.keys(subPart.layerPositions).forEach(position => {\r\n if (!subPart.layerPositions[position]) {\r\n disabledPartIds.push(subPart.partId + \"_\" + position);\r\n }\r\n })\r\n }\r\n })\r\n }\r\n });\r\n // console.log('disabledPartIds', disabledPartIds);\r\n return disabledPartIds\r\n }\r\n\r\n /**\r\n * @param partId {string}\r\n * @returns featureGroup {object}\r\n */\r\n getFeatureGroupByPartId(partId) {\r\n if (!partId) {\r\n return null\r\n }\r\n let featureGroup = null;\r\n this.getFeatures(true).forEach(parentGroup => {\r\n if (featureGroup) {\r\n return\r\n }\r\n let relatedItems = parentGroup.relatedItems;\r\n relatedItems.forEach((relatedItem) => {\r\n if (featureGroup) {\r\n return\r\n }\r\n if (partId === relatedItem.partId) {\r\n featureGroup = relatedItem\r\n }\r\n })\r\n });\r\n return featureGroup\r\n }\r\n\r\n /**\r\n * @param groupName {string}\r\n * @returns featureGroup {object}\r\n */\r\n getFeatureGroupByGroupName(groupName) {\r\n if (!groupName) {\r\n return null\r\n }\r\n const strippedGroupName = replaceIncorrectSymbols(groupName || \"\").toLowerCase();\r\n let featureGroup = null;\r\n this.getFeatures(true).forEach(parentGroup => {\r\n if (featureGroup) {\r\n return\r\n }\r\n parentGroup.relatedItems.forEach((relatedItem) => {\r\n const strippedCurrentName = replaceIncorrectSymbols(relatedItem.dbName || relatedItem.partName || \"\").toLowerCase();\r\n if (strippedGroupName === strippedCurrentName\r\n || (strippedGroupName === \"vanity\" && strippedCurrentName === \"vanitie\")\r\n || (strippedGroupName === \"corner shelf\" && relatedItem.dbName === \"Small Corner Shelf\" && relatedItem.partName === \"Corner Shelf\")\r\n || (strippedGroupName === \"shower pan\"\r\n && ((relatedItem.dbName === \"Shower Pans\" && relatedItem.partName === \"Shower Pan\") || relatedItem.partName === \"ShowerPan\"))\r\n ) {\r\n featureGroup = relatedItem\r\n }\r\n })\r\n });\r\n return featureGroup\r\n }\r\n\r\n /**\r\n * @param partId {string}\r\n * @param inGeneral {boolean} // this prevents asking .subParts with asks navigation items which is redundant calculations\r\n * @returns {boolean}\r\n */\r\n partIdExistInQtCategory(partId, inGeneral = false) {\r\n if ((getCurrentRoomType(this) === LOOK_ROOM_TYPES.as) && partId === \"shower_door\" && (this.type === 3 || this.type === 6)) {\r\n return false\r\n }\r\n if (inGeneral) {\r\n return this.qtCategoriesList && this.qtCategoriesList.some(qtCat => {\r\n return qtCat.defaultSubParts && qtCat.defaultSubParts.some(sPart => sPart.part && sPart.part.partId === partId)\r\n })\r\n }\r\n return this.qtCategories && this.qtCategories.some(qtCat => {\r\n return qtCat.subParts && qtCat.subParts.some(sPart => sPart.part && sPart.part.partId === partId)\r\n })\r\n }\r\n\r\n /**\r\n * @param partId {string}\r\n * @param qtCategoryToSearch {string | null}\r\n * @param searchPartOfId {boolean | null}\r\n * @returns designNavigationItems {object}\r\n */\r\n getSubPartFromQtCategories(partId, qtCategoryToSearch = null, searchPartOfId = false) {\r\n\r\n const {wizardIsActive, wizardActiveItem, wizardSelectedValues} = store.getState().wizardState;\r\n if (wizardIsActive && wizardActiveItem) {\r\n const wizardSteps = getAvailableSteps(wizardActiveItem, wizardSelectedValues, true);\r\n return getFeatureGroupFromWizardSteps(wizardSteps, partId);\r\n }\r\n\r\n let countertopExist = null;\r\n let qtCategories = this.qtCategories;\r\n if (qtCategories) {\r\n if (qtCategoryToSearch) {\r\n qtCategories = qtCategories.filter(qtCategory => {\r\n return qtCategory.name.trim().toLowerCase() === qtCategoryToSearch.trim().toLowerCase()\r\n })\r\n //search in all qtCategories if wasn't found by qtCategoryToSearch\r\n if (qtCategories.length === 0) {\r\n qtCategories = this.qtCategories\r\n }\r\n }\r\n qtCategories.forEach(qtCategory => {\r\n if (!countertopExist) {\r\n const subParts = qtCategory.subParts;\r\n let neededSubPart;\r\n if (searchPartOfId) {\r\n neededSubPart = subParts.find(subPart => subPart.part.partId.includes(partId));\r\n } else {\r\n neededSubPart = subParts.find(subPart => subPart.part.partId === partId);\r\n }\r\n if (neededSubPart) {\r\n countertopExist = neededSubPart;\r\n }\r\n }\r\n });\r\n }\r\n return countertopExist\r\n }\r\n\r\n}\r\n\r\n","import EventManager from \"../../store/sqftEventManager\";\r\nimport CabinetShapes from \"./cabinetShapes\";\r\nimport store from \"../../../../../../store\";\r\nimport { setSQFTContextMenuV2 } from \"../../../../../../actions/sqftMenuFunctions\";\r\nimport workspace from \"../workspace\";\r\nimport { renderMeasurementsAroundSnappedShapes } from \"../slab/sqftSlabDraw\";\r\nimport CabinetShapesLayout from \"./cabinetShapesLayout\";\r\nimport { getMousePositionOnField } from \"../../../../helpers/sqftHelper\";\r\nimport { SHAPE_PART_ID } from \"../../../../constants\";\r\nimport { getCurrentLayout } from \"../../../../../appLayout\";\r\n\r\nclass CabinetWorkspace {\r\n constructor() {\r\n this.eventManager = EventManager;\r\n this.objectName = { name: 'CabinetWorkspace' };\r\n this.state = {};\r\n this.cabinetShapes = new CabinetShapes();\r\n this.cabinetShapesLayout = new CabinetShapesLayout();\r\n this.measurementPoints = [];\r\n this.__crownMoldingParams = {\r\n distance: 10\r\n };\r\n\r\n this.initCabinetEvents();\r\n }\r\n\r\n initCabinetEvents() {\r\n EventManager.addEvent(EventManager.events.CONTEXTMENU, this.onRightClick, this, EventManager.priorities.OVERLAY);\r\n EventManager.addEvent(EventManager.events.DROP, this.handleDrop, this, EventManager.priorities.OVERLAY);\r\n EventManager.addEvent(EventManager.events.DRAG_OVER, this.handleDrag, this, EventManager.priorities.OVERLAY);\r\n EventManager.addEvent(EventManager.events.RENDER, this.render, this, EventManager.priorities.OVERLAY);\r\n }\r\n\r\n render(ctx) {\r\n renderMeasurementsAroundSnappedShapes(ctx);\r\n }\r\n\r\n deregisterEvents() {\r\n EventManager.removeEvent(this);\r\n }\r\n\r\n onRightClick(mousePos, e) {\r\n store.dispatch(setSQFTContextMenuV2({\r\n isOpened: true,\r\n title: workspace.intl.formatMessage({ id: \"sqft.contextmenu.properties.title\" }),\r\n menuItems: [\r\n {\r\n title: 'Change Cabinet Style',\r\n callback: new Function()\r\n },\r\n {\r\n title: 'Generate Countertop',\r\n callback: new Function()\r\n },\r\n {\r\n title: 'Generate Backsplash',\r\n callback: new Function()\r\n },\r\n ],\r\n position: { left: mousePos.x, top: mousePos.y }\r\n }));\r\n document.addEventListener('click', this.closeContextMenu);\r\n void e;\r\n }\r\n\r\n closeContextMenu(e) {\r\n const navClick = e.target.closest('[class*=\"contextmenu2\"]');\r\n if (!navClick && !window.touchMove) {\r\n store.dispatch(setSQFTContextMenuV2({\r\n isOpened: false,\r\n title: '',\r\n menuItems: [],\r\n position: {}\r\n }));\r\n }\r\n }\r\n\r\n handleDrop(mousePos, e) {\r\n e.preventDefault();\r\n const featureId = JSON.parse(e.dataTransfer.getData('featureId'));\r\n const parentFeatureId = JSON.parse(e.dataTransfer.getData('parentFeatureId'));\r\n const partId = JSON.parse(e.dataTransfer.getData('partId'));\r\n\r\n if ([SHAPE_PART_ID.upper_cabinet_boxes, SHAPE_PART_ID.lower_cabinet_boxes, SHAPE_PART_ID.tall_cabinet_boxes,\r\n SHAPE_PART_ID.top_cabinet, SHAPE_PART_ID.bottom_cabinet, SHAPE_PART_ID.tall_cabinet\r\n ].includes(partId)) {\r\n\r\n const layout = getCurrentLayout();\r\n const feature = layout.getFeatureById(featureId, true);\r\n const parentFeature = layout.getFeatureById(parentFeatureId, true);\r\n let shapeId = null;\r\n const mousePosOnField = getMousePositionOnField(mousePos.x, mousePos.y);\r\n shapeId = this.cabinetShapes.addShape(feature, parentFeature, mousePosOnField);\r\n\r\n const shape = workspace.getShapeById(shapeId);\r\n shape.shapeAutoShuffle.handlePlaceShapeOnTheLine();\r\n }\r\n }\r\n\r\n handleDrag(mousePos, e) {\r\n e.preventDefault();\r\n // update hovered lines for rendering auto shuffle possibilities\r\n const hoveredLines = workspace.getHoveredLines();\r\n void hoveredLines;\r\n }\r\n}\r\n\r\nexport default new CabinetWorkspace();\r\n","import {baseNewImagesPath} from \"../../assets\";\r\n\r\nexport const applianceThumbnail = `${baseNewImagesPath}images/kv-icons/kv-filter-icons-stove.svg`;\r\nexport const centerIslandThumbnail = `${baseNewImagesPath}images/kv-icons/center_island_countertop.svg`;\r\nexport const countertopGroupThumbnail = `${baseNewImagesPath}images/kv-icons/vanity-countertop.svg`;\r\nexport const wallsThumbnail = `${baseNewImagesPath}images/bv_icons_new/Icons_Wall.svg`;\r\n\r\n/*layouts*/\r\nexport const LayoutThumbnails = {\r\n Layout1: `${baseNewImagesPath}images/kv-layout-thumbnails/SI.png`,\r\n Layout2: `${baseNewImagesPath}images/kv-layout-thumbnails/SNI.png`,\r\n Layout3: \"Layout3\",\r\n Layout4: \"Layout4\",\r\n Layout5: \"Layout5\",\r\n Layout6: \"Layout6\",\r\n Layout7: \"Layout7\",\r\n Layout8: \"Layout8\",\r\n Layout9: \"Layout9\",\r\n Layout10: \"Layout10\",\r\n Layout11: \"Layout11\",\r\n Layout12: \"Layout12\",\r\n Layout13: \"Layout13\",\r\n Layout14: \"Layout14\",\r\n Layout15: \"Layout15\",\r\n Layout16: \"Layout16\",\r\n Layout17: \"Layout17\",\r\n Layout18: \"Layout18\",\r\n};\r\n","import {IntermediatePart} from \"../../parts/intermediatePart\";\r\nimport {getFeatureIsLocked} from \"../../../../../misc/helpers\";\r\nimport store from \"../../../../../store\";\r\nimport {toggleNotCompatibleView} from \"../../../../../actions/selectionFunctions\";\r\nimport DesignNavigationItem from \"../../../../visComponents/designNavigationItem\";\r\n\r\nexport default class TubCommon extends IntermediatePart {\r\n\r\n constructor(isChild) {\r\n super(isChild);\r\n }\r\n\r\n navigationSubItems(filters, searchText) {\r\n const filteredAvailableFeatures = super.getFeaturesBySearchText(super.getFilteredFeaturesByFilters(filters), searchText);\r\n const featuresToDisplay = super.navigationSubItemsWithFilterMultipleConditions(this.getArrayOfConditions(), filteredAvailableFeatures);\r\n return featuresToDisplay.map(_ => new DesignNavigationItem(_.featureName, _));\r\n }\r\n\r\n disabledClick() {}\r\n\r\n applyFeatureIfNotCompatible() {\r\n const showerTubComboParent = this.getParent().getParent();\r\n showerTubComboParent.setShowerTubCombo();\r\n showerTubComboParent.setActiveTub(this.partId);\r\n }\r\n\r\n handleClick(ignoreLocked) {\r\n super.handleClick(ignoreLocked);\r\n\r\n if (this.notAvailableInVisualizer || getFeatureIsLocked(this)) {\r\n return\r\n }\r\n\r\n const showerTubComboParent = this.getParent().getParent();\r\n const currentBottomTub = showerTubComboParent.bottomTub;\r\n\r\n const showNotCompatibleViewConditions = !window.location.hash.includes(\"visualizer\") &&\r\n (!showerTubComboParent.showerTubComboIsActive || (\r\n (this.partId === \"walk_in_tub\" && currentBottomTub !== \"walk_in_tub\") || (this.partId !== \"walk_in_tub\" && currentBottomTub === \"walk_in_tub\")\r\n ));\r\n\r\n if (showNotCompatibleViewConditions) {\r\n store.dispatch(toggleNotCompatibleView(true));\r\n return;\r\n }\r\n\r\n this.applyFeatureIfNotCompatible();\r\n this.featureClicked();\r\n }\r\n\r\n getArrayOfConditions() {\r\n const showerSize = this.getParent().showerSize();\r\n return [{\r\n propName: 'ShowerSize',\r\n propValue: showerSize\r\n }];\r\n }\r\n\r\n setLayers(layout) {\r\n if (this.getParent().bottomTub !== this.partId) {\r\n super.hideLayers();\r\n return;\r\n }\r\n if (this.activeFeature && (this.activeFeature.matchesMetaForArrayOfConditions(this.getArrayOfConditions())\r\n || (this.activeFeature.notAvailableInVisualizer && this.placeholderFeature))) {\r\n return super.setLayers(layout);\r\n }\r\n\r\n this.setDefault();\r\n return super.setLayers(layout);\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../parts/intermediatePart\";\r\nimport DesignNavigationItem from \"../../../../visComponents/designNavigationItem\";\r\nimport {Shower} from \"../../parts/shower\";\r\nimport {LayoutAbbreviation} from \"../../constants\";\r\nimport {getMetadataByDimensions, iIncludes} from \"../../../../../misc/utils\";\r\n\r\nexport default class ExternallWall extends IntermediatePart {\r\n\r\n constructor(isChild) {\r\n super(isChild);\r\n this.visible = true;\r\n this.activeFeatureBeforeAllWalls = null;\r\n this.selectedByUser = false;\r\n this.allWallsApplied = false;\r\n this.isStoneFeature = true;\r\n }\r\n\r\n navigationSubItems(filters, searchText) {\r\n const featuresToDisplay = super.getFeaturesBySearchText(this.getAvailableFeatures(filters), searchText);\r\n return featuresToDisplay.map(_ => new DesignNavigationItem(_.featureName, _));\r\n }\r\n\r\n getAvailableFeatures(filters) {\r\n const conditions = this.getArrayOfConditions();\r\n // console.log('condtitions', condtitions);\r\n const filteredAvailableFeatures = super.getFilteredFeaturesByFilters(filters);\r\n return super.navigationSubItemsWithFilterMultipleConditions(conditions, filteredAvailableFeatures);\r\n }\r\n\r\n setLayers(layout) {\r\n // this.wallName === \"ExtrusionWallLeft\" && console.log('this.getArrayOfConditions()', this.getArrayOfConditions());\r\n const shower = layout.parts[Shower.id];\r\n const wallParent = this.getParent();\r\n const conditions = this.getArrayOfConditions();\r\n // const layoutAbr = layout.getCurrentLayoutAbbreviation();\r\n if (this.activeFeature) {\r\n if (this.activeFeature.notAvailableInVisualizer && this.placeholderFeature) {\r\n super.setLayers(layout)\r\n } else if (shower.isComplete()) {\r\n if (this.wallName === \"ExtrusionWallLeft\" || !shower.showerBody.activeFeature.partName.includes(\"Complete\")) {\r\n super.hideLayers();\r\n return;\r\n } else if (this.activeFeature && !this.activeFeature.matchesMetaForArrayOfConditions(conditions)) {\r\n this.setDefault(layout) // set new default layer\r\n }\r\n } else if (!this.activeFeature.matchesMetaForArrayOfConditions(conditions)) {\r\n this.setDefault(layout) // set new default layer\r\n }\r\n if (this.wallName === \"ExtrusionWallLeft\") {\r\n const activeShower = wallParent.getActiveShowerGroup();\r\n const showerDimensions = activeShower.showerDimensions();\r\n if (showerDimensions === \"Pony\") {\r\n super.hideLayers();\r\n return;\r\n }\r\n if (!shower.isComplete()) {\r\n this.setShadowFeature();\r\n }\r\n }\r\n }\r\n if (this.shadowFeature) {\r\n const layoutAbr = layout.getCurrentLayoutAbbreviation();\r\n const matchesByBindings = this.shadowFeature.dbFeature.s3Bindings.some(binding => {\r\n return binding.layout === LayoutAbbreviation.All || binding.layout === layoutAbr\r\n });\r\n if (!this.shadowFeature.matchesMetaForArrayOfConditions(this.getShadowConditions()) || !matchesByBindings) {\r\n this.setShadowFeature();\r\n }\r\n }\r\n super.setLayers(layout)\r\n }\r\n\r\n setDefault(layout) {\r\n const layoutAbr = layout.getCurrentLayoutAbbreviation();\r\n const shower = layout.parts[Shower.id];\r\n if (!shower) {\r\n console.log('Ex Wall - no Shower');\r\n return null;\r\n }\r\n if (layoutAbr === LayoutAbbreviation.Large) {\r\n if ((shower.isComplete() && this.wallName === \"ExtrusionWallLeft\")\r\n || !shower.showerBody || !shower.showerBody.activeFeature\r\n || (shower.isComplete() && !shower.showerBody.activeFeature.partName.includes(\"Complete\"))) {\r\n return null;\r\n }\r\n }\r\n const filteredFeatures = this.getAvailableFeatures();\r\n // console.log('Ex Wall - setDefault', filteredFeatures);\r\n if (!super.tryToSetTheSameFeature(filteredFeatures, null, null, true)) {\r\n let hardCodedName = '';\r\n switch (layoutAbr) {\r\n case LayoutAbbreviation.Small:\r\n hardCodedName = 'Rafter';\r\n break;\r\n case LayoutAbbreviation.Large:\r\n hardCodedName = 'Sahara Autumn Porcelain Tile';\r\n break;\r\n }\r\n const hardCodedDefault = filteredFeatures.find((feature) => {\r\n return iIncludes(feature.dbFeature.displayName, hardCodedName);\r\n });\r\n const placeholderDefault = filteredFeatures.find((feature) => {\r\n return iIncludes(feature.dbFeature.displayName, \" - placeholder\");\r\n });\r\n this.activeFeature = hardCodedDefault || filteredFeatures[0];\r\n this.placeholderFeature = placeholderDefault;\r\n this.setShadowFeature();\r\n }\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n\r\n const shower = zIndexes.Shower;\r\n const wallParent = this.getParent();\r\n\r\n if (zIndexes && this.wallName === \"ExtrusionWallLeft\") {\r\n // console.warn(`${this.wallName}: no wall, because we have a complete shower.`);\r\n if (wallParent.layout.parts[Shower.id].isComplete()) {\r\n return false;\r\n } else if (this.activeFeature) {\r\n const activeShowerGroup = wallParent.getActiveShowerGroup();\r\n const showerDimensions = getMetadataByDimensions(activeShowerGroup.showerDimensions());\r\n const zIndex = showerDimensions === \"Half\"\r\n ? shower.Custom60in[this.wallName + \"HalfWall\"]\r\n : shower.Custom60in[this.wallName];\r\n const zIndexShadow = showerDimensions === \"Half\"\r\n ? shower.Custom60in[this.wallName + \"ShadowHalfWall\"]\r\n : shower.Custom60in[this.wallName + \"Shadow\"];\r\n this.activeFeature.layer.zIndex = zIndex;\r\n if (this.placeholderFeature) {\r\n this.placeholderFeature.layer.zIndex = zIndex;\r\n }\r\n if (this.shadowFeature) {\r\n this.shadowFeature.layer.zIndex = zIndexShadow;\r\n }\r\n }\r\n } else {\r\n if (zIndexes && this.activeFeature) {\r\n this.activeFeature.layer.zIndex = shower.Custom60in[this.wallName];\r\n }\r\n if (zIndexes && this.placeholderFeature) {\r\n this.placeholderFeature.layer.zIndex = shower.Custom60in[this.wallName];\r\n }\r\n if (zIndexes && this.shadowFeature) {\r\n this.shadowFeature.layer.zIndex = shower.Custom60in[this.wallName + \"Shadow\"];\r\n }\r\n }\r\n }\r\n\r\n clickFromAllWalls(ignoreLocked) {\r\n if (!this.getParent().selectedByUser) {\r\n this.handleClick(ignoreLocked, 'all_walls')\r\n }\r\n }\r\n\r\n handleClick(ignoreLocked, clickFrom) {\r\n const parent = this.getParent();\r\n if (!parent.getParent().allWallsApplied && clickFrom !== 'all_walls') {\r\n parent.selectedByUser = true;\r\n }\r\n if (clickFrom !== 'context' && clickFrom !== 'all_walls') {\r\n const wallParent = this.getParent().getParent();\r\n const ponyWallFeature = wallParent.ponyWall && wallParent.ponyWall.features.find(feature => {\r\n return feature.partName === this.partName\r\n });\r\n if (ponyWallFeature) {\r\n ponyWallFeature.handleClick(ignoreLocked, 'context');\r\n }\r\n }\r\n super.handleClick(ignoreLocked);\r\n\r\n // if (parent.wallName === \"ExtrusionWallLeft\") {\r\n // const wallB = parent.getParent().layout.parts[\"Walls\"].part[\"wallB\"];\r\n // if (wallB.placeholderChanged && wallB.activeFeature.partName === this.partName) {\r\n // parent.selectedByUser = false;\r\n // }\r\n // } else {\r\n // const wallC = parent.getParent().layout.parts[\"Walls\"].part[\"wallC\"];\r\n // if (wallC.placeholderChanged && wallC.activeFeature.partName === this.partName) {\r\n // parent.selectedByUser = false;\r\n // }\r\n // }\r\n }\r\n\r\n // unCheckAllWalls(clickFrom) {\r\n // if (clickFrom === 'showerWall') {\r\n // this.allWallsApplied = false;\r\n // }\r\n // const tempSelectedByUser = this.selectedByUser;\r\n // if (this.activeFeatureBeforeAllWalls) {\r\n // this.activeFeatureBeforeAllWalls.handleClick();\r\n // this.activeFeatureBeforeAllWalls = null;\r\n // }\r\n // this.selectedByUser = tempSelectedByUser;\r\n // if (this.rememberToRecoverPlaceholder) {\r\n // this.placeholderChanged = false;\r\n // this.rememberToRecoverPlaceholder = false;\r\n // }\r\n // }\r\n}\r\n","import {LayoutType} from \"./constants\";\r\nimport {UseFullSizeImages} from \"../../../config\";\r\nimport {getCurrentLayout} from \"../../appLayout\";\r\n\r\nlet layouts = {};\r\nObject.keys(LayoutType).forEach(layoutName => {\r\n layouts[layoutName] = {\r\n center_island_sink: 3100,\r\n center_island_faucet: 3200,\r\n oven: 4900,\r\n dishwasher: 5000,\r\n fridge: 5100,\r\n hood: 5200,\r\n microwave: 5300,\r\n range: 5400,\r\n decor: 11111,\r\n sink: 18000,\r\n faucet: 19000,\r\n center_island_countertop: 59000,\r\n center_island_cabinet: 60000,\r\n countertop: 61000,\r\n bottom_cabinet: 62000,\r\n top_cabinet: 63000,\r\n backsplash: 64000,\r\n center_wall: 65000,\r\n front_wall: 66000,\r\n left_wall: 67000,\r\n right_wall: 68000,\r\n kitchen_floor: 69000,\r\n background_bg: 70000,\r\n };\r\n});\r\n\r\nconst getLayerDimensions = (layer, currentLayout, canvasDimensions) => {\r\n const fullImagesFactor = UseFullSizeImages ? 177.77 : 100;\r\n const sizeFactor = fullImagesFactor / 100;\r\n const {coords} = layer;\r\n\r\n if (!coords) {\r\n return null\r\n }\r\n\r\n const COORDS_MAX = 1;\r\n // const isWallMobile = window.innerWidth <= 1024 && layer.partId.includes(\"wall\");\r\n\r\n const x1Percentage = (coords.min_x * 100) / COORDS_MAX;\r\n const x2Percentage = (coords.max_x * 100) / COORDS_MAX;\r\n const y1Percentage = (coords.min_y * 100) / COORDS_MAX;\r\n const y2Percentage = (coords.max_y * 100) / COORDS_MAX;\r\n let x1 = sizeFactor*((canvasDimensions.width * x1Percentage) / 100);\r\n let x2 = sizeFactor*((canvasDimensions.width * x2Percentage) / 100);\r\n let y1 = sizeFactor*((canvasDimensions.height * y1Percentage) / 100);\r\n let y2 = sizeFactor*((canvasDimensions.height * y2Percentage) / 100);\r\n // if (!isWallMobile) { // make layer bigger (to add some semi-transparent pixels)\r\n // x1 = x1 - 100;\r\n // x2 = x2 + 100;\r\n // y1 = y1 - 100;\r\n // y2 = y2 + 100;\r\n // }\r\n return {\r\n polygonArray: [[x1, y1], [x2, y1], [x2, y2], [x1, y2]],\r\n width: (x2 - x1),\r\n height:(y2 - y1)\r\n };\r\n};\r\n\r\nconst getMenuByHoveredLayer = (currentLayout, layer) => {\r\n const layout = getCurrentLayout();\r\n switch (layer.partId) {\r\n case \"sink\":\r\n case \"faucet\":\r\n case \"countertop\":\r\n case \"edge_profile\":\r\n return {\r\n contextMenuPartId: \"countertop_group_custom\"\r\n };\r\n case \"center_island_sink\":\r\n case \"center_island_faucet\":\r\n case \"center_island_edge\":\r\n case \"center_island_countertop\":\r\n case \"center_island_stovetop\":\r\n return {\r\n contextMenuPartId: \"center_island_custom\"\r\n };\r\n default: {\r\n const featureGroup = layout.getFeatureGroupByPartId(layer.partId);\r\n if (!featureGroup) {\r\n return \"\"\r\n }\r\n return {\r\n parent: featureGroup.getParent().partName,\r\n child: featureGroup.partName\r\n }\r\n }\r\n }\r\n};\r\n\r\nexport default {\r\n layouts,\r\n getMenuByHoveredLayer,\r\n getLayerDimensions\r\n}\r\n\r\n\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport {getFeatureIsLocked} from \"../../../../../misc/helpers\";\r\nimport store from \"../../../../../store\";\r\nimport {toggleNotCompatibleView} from \"../../../../../actions/selectionFunctions\";\r\nimport {Shower} from \"../../parts/shower\";\r\n\r\nexport default class TubCommon extends IntermediatePart {\r\n\r\n constructor(isChild) {\r\n super(isChild);\r\n }\r\n\r\n disabledClick() {}\r\n\r\n applyFeatureIfNotCompatible() {\r\n const showerTubComboParent = this.getParent().getParent();\r\n showerTubComboParent.setShowerTubCombo();\r\n showerTubComboParent.setActiveTub(this.partId);\r\n }\r\n\r\n handleClick(ignoreLocked, clickFrom, clickLogic = null) {\r\n super.handleClick(ignoreLocked);\r\n\r\n if (this.notAvailableInVisualizer || getFeatureIsLocked(this)) {\r\n return\r\n }\r\n\r\n const showerTubComboParent = this.getParent().getParent();\r\n const currentBottomTub = showerTubComboParent.bottomTub;\r\n\r\n const showNotCompatibleViewConditions = !window.location.hash.includes(\"visualizer\") &&\r\n (!showerTubComboParent.showerTubComboIsActive || (\r\n (this.partId === \"walk_in_tub\" && currentBottomTub !== \"walk_in_tub\") || (this.partId !== \"walk_in_tub\" && currentBottomTub === \"walk_in_tub\")\r\n ));\r\n\r\n if (showNotCompatibleViewConditions && !(clickLogic && clickLogic.skipNotCompatible)) {\r\n store.dispatch(toggleNotCompatibleView(true));\r\n return;\r\n }\r\n\r\n this.applyFeatureIfNotCompatible();\r\n this.featureClicked();\r\n }\r\n\r\n getArrayOfConditions() {\r\n let conditions = super.getArrayOfConditions(); //roomLayout\r\n const layout = this.getParent().layout;\r\n const showerParent = layout.parts[Shower.id];\r\n const showerSize = showerParent.showerSize();\r\n if (showerParent && showerSize) {\r\n conditions.push({\r\n propName: \"ShowerSize\",\r\n propValue: showerSize\r\n });\r\n }\r\n return conditions\r\n }\r\n\r\n setLayers(layout) {\r\n if (this.getParent().bottomTub !== this.partId) {\r\n super.hideLayers();\r\n return;\r\n }\r\n if (this.activeFeature && (this.activeFeature.matchesMetaForArrayOfConditions(this.getArrayOfConditions())\r\n || (this.activeFeature.notAvailableInVisualizer && this.placeholderFeature))) {\r\n return super.setLayers(layout);\r\n }\r\n\r\n this.setDefault();\r\n return super.setLayers(layout);\r\n }\r\n\r\n}\r\n","import {LayoutType} from \"./constants\";\r\nimport {UseFullSizeImages} from \"../../../config\";\r\nimport {getCurrentLayout} from \"../../appLayout\";\r\n\r\nlet layouts = {};\r\nObject.keys(LayoutType).forEach(layoutName => {\r\n layouts[layoutName] = {\r\n center_island_sink: 3100,\r\n background_bg: 70000,\r\n };\r\n});\r\n\r\nconst getLayerDimensions = (layer, currentLayout, canvasDimensions) => {\r\n const fullImagesFactor = UseFullSizeImages ? 177.77 : 100;\r\n const sizeFactor = fullImagesFactor / 100;\r\n const {coords} = layer;\r\n\r\n if (!coords) {\r\n return null\r\n }\r\n\r\n const COORDS_MAX = 1;\r\n\r\n const x1Percentage = (coords.min_x * 100) / COORDS_MAX;\r\n const x2Percentage = (coords.max_x * 100) / COORDS_MAX;\r\n const y1Percentage = (coords.min_y * 100) / COORDS_MAX;\r\n const y2Percentage = (coords.max_y * 100) / COORDS_MAX;\r\n let x1 = sizeFactor*((canvasDimensions.width * x1Percentage) / 100);\r\n let x2 = sizeFactor*((canvasDimensions.width * x2Percentage) / 100);\r\n let y1 = sizeFactor*((canvasDimensions.height * y1Percentage) / 100);\r\n let y2 = sizeFactor*((canvasDimensions.height * y2Percentage) / 100);\r\n return {\r\n polygonArray: [[x1, y1], [x2, y1], [x2, y2], [x1, y2]],\r\n width: (x2 - x1),\r\n height:(y2 - y1)\r\n };\r\n};\r\n\r\nconst getMenuByHoveredLayer = (layer) => {\r\n const layout = getCurrentLayout();\r\n const featureGroup = layout.getFeatureGroupByPartId(layer.partId);\r\n if (featureGroup) {\r\n return {\r\n parent: featureGroup.getParent().partName,\r\n child: featureGroup.partName\r\n }\r\n }\r\n return \"\"\r\n};\r\n\r\nexport default {\r\n layouts,\r\n getMenuByHoveredLayer,\r\n getLayerDimensions\r\n}\r\n\r\n\r\n","import cloneDeep from \"lodash/cloneDeep\";\r\n\r\nimport * as types from '../actions/actionTypes';\r\nimport {getCurrencyPosition, getCurrencySign} from \"../misc/helpers\";\r\nimport {MEASURE_UNITS} from \"../bvcomponents/sqft/constants\";\r\nimport {getCommonVisualizerType, IS_LIXIL_SERVERS} from \"../config\";\r\nimport * as fabricatorHardcode from \"../misc/fabricatorHardcode\";\r\nimport {IS_PRODUCT_JOURNEY} from \"../config\";\r\n\r\nconst checkMeasureUnit = (mUnit) => {\r\n return (mUnit === \"metric\" || mUnit === MEASURE_UNITS.Metric) ? MEASURE_UNITS.Metric : MEASURE_UNITS.Imperial\r\n};\r\n\r\nconst initialState = {\r\n received: false,\r\n fabricatorSubscriptions: [],\r\n settings: { // current active\r\n currency: \"USD\",\r\n currencySign: \"$\",\r\n currencyPosition: \"left\",\r\n measureUnit: null, // Imperial(default) || Metric\r\n useCategorySwitching: false,\r\n useShipperHQ: false,\r\n useFabricatorCostPrices: false,\r\n hideYourListButton: false,\r\n useMarkUpFeaturesRequests: false,\r\n },\r\n kitchenSettings: {},\r\n bathroomSettings: {},\r\n fabricatorTaxes: null,\r\n ...fabricatorHardcode.fabricatorsHardcodeObject,\r\n hidePricesFromUser: Array.isArray(document.dashboardUserPermissions) && document.dashboardUserPermissions.some(permission => {\r\n return permission.ProtectedAreaId === 9000 && permission.AccessRights === 0\r\n }),\r\n wasCreatedFromFabricator: \"\",\r\n useIMEAPI: false,\r\n useIMEAPI_PartnerId: 0,\r\n receiptSettings: {}, // \"{signIsRequired, showThumbnailsAndDescriptions, hideSignatureField, doNotFillNameAndDate}\"\r\n};\r\n\r\nconst getDashboardModeSettings = (settings) => {\r\n const dashboardProps = [\"twoFA\", \"leadCapture\", \"leadCaptureProduct\", \"clickLeadCapture\", \"enableQuote\",\r\n \"enableScheduling\", \"leadCaptureShoppingCart\", \"leadCaptureOnQuote\", \"clickLeadCaptureOnQuote\",\r\n \"showVisualizerTutorial\", \"showSqftTutorial\", \"showSlabMode\", \"useShipping\", \"sureTax\", \"hideSku\", \"showSalePrices\"];\r\n dashboardProps.forEach(property => {\r\n if (settings && settings[property] && !settings[property + \"Dashboard\"] && document.kvConfig.isBackend) {\r\n settings[property] = false // disable property in the dashboard mode if it is disabled\r\n } else if (settings && !settings[property] && settings[property + \"Dashboard\"] && document.kvConfig.isBackend) {\r\n settings[property] = true // enable simple property in dashboard mode (to simplify code)\r\n }\r\n })\r\n return settings\r\n}\r\n\r\nexport const parseFabricatorSettingsOLD = (payload) => { //todo remove this after we push staging backend\r\n const actionPayload = cloneDeep(payload); // this is needed to other reducers! Object assign doesn't deeply cloning\r\n let bathroomSettings = actionPayload.settings || {};\r\n let kitchenSettings = actionPayload.settings || {};\r\n let fireplaceSettings = actionPayload.settings || {};\r\n let laundryRoomSettings = actionPayload.settings || {};\r\n if (kitchenSettings.kitchenToggles) {\r\n Object.keys(kitchenSettings.kitchenToggles).forEach((oldKey) => {\r\n const ignoreProperties = [\"showSqftTutorial\", \"showSlabMode\"];\r\n if (!ignoreProperties.some(prop => oldKey.includes(prop))) {\r\n const newKey = oldKey.split(\"Kitchen\")[0]\r\n delete Object.assign(kitchenSettings.kitchenToggles, {[newKey]: kitchenSettings.kitchenToggles[oldKey] })[oldKey];\r\n }\r\n })\r\n kitchenSettings.kitchenToggles.checkout = kitchenSettings.kitchenToggles.checkout || kitchenSettings.kitchenToggles.checkOut; // fix for incorrect property name\r\n kitchenSettings = Object.assign({}, actionPayload.settings, kitchenSettings.kitchenToggles);\r\n delete kitchenSettings.checkOut; // we don't need to keep it not to use it in future\r\n delete kitchenSettings.kitchenToggles; // we don't need to keep it not to use it in future\r\n kitchenSettings = getDashboardModeSettings(kitchenSettings);\r\n }\r\n bathroomSettings = getDashboardModeSettings(bathroomSettings);\r\n delete bathroomSettings.kitchenToggles; // we don't need to keep it not to use it in future\r\n return {\r\n settings: (document.kvConfig.visualizerType === \"Kitchen\" || document.kvConfig.visualizerType === \"kvScene\") ? kitchenSettings : bathroomSettings, // current active\r\n kitchenSettings,\r\n bathroomSettings,\r\n fireplaceSettings,\r\n laundryRoomSettings,\r\n }\r\n}\r\n\r\nconst generalProperties = [\"deposit\", \"depositDisclaimer\", \"depositMessage\", \"docuSignAuth\", \"enableDeposit\",\r\n \"enableDisclaimer\", \"enableDocuSign\", \"hasPaymentGateway\", \"language\", \"masterContractFields\", \"masterContractFullUrl\",\r\n \"measurement\", \"useContractSigning\"];\r\n\r\nexport const parseFabricatorSettings = (payload) => {\r\n if (IS_LIXIL_SERVERS) {\r\n //todo remove this after we push backend on Lixil\r\n return parseFabricatorSettingsOLD(payload);\r\n }\r\n let settingsObject = {\r\n settings: {},\r\n kitchenSettings: {},\r\n bathroomSettings: {},\r\n fireplaceSettings: {},\r\n laundryRoomSettings: {},\r\n };\r\n if (!payload.settings.toolSettings) {\r\n return settingsObject\r\n }\r\n const actionPayload = cloneDeep(payload); // this is needed to other reducers! Object assign doesn't deeply cloning\r\n Object.keys(actionPayload.settings.toolSettings).forEach(visType => {\r\n settingsObject[visType + \"Settings\"] = Object.assign(\r\n {},\r\n getDashboardModeSettings(actionPayload.settings.toolSettings[visType]),\r\n {\r\n checkout: actionPayload.settings.toolSettings[visType].checkout ||actionPayload.settings.toolSettings[visType].checkOut // fix for incorrect property name\r\n });\r\n delete settingsObject[visType + \"Settings\"].checkOut; // we don't need to keep it not to use it in future\r\n generalProperties.forEach(property => { // here we set the same property into each room fabricator settings\r\n // to prevent all components changing to take data from fabricatorData instead of fabricatorData.settings\r\n settingsObject[visType + \"Settings\"][property] = actionPayload.settings[property];\r\n })\r\n });\r\n const currentSettingsProperty = getCommonVisualizerType() + \"Settings\";\r\n settingsObject.settings = settingsObject[currentSettingsProperty]; // current settings\r\n return settingsObject\r\n}\r\n\r\nconst getFinalSettings = (settings, stateSettings, fabricatorResponse) => {\r\n\r\n if (IS_PRODUCT_JOURNEY && window.location.href.includes(\"colonial_\")) {\r\n settings[\"leadCaptureShoppingCart\"] = false;\r\n settings[\"enableQuote\"] = false;\r\n }\r\n\r\n const isCaesarStone = fabricatorHardcode.hardCodeIsCaesarStone();\r\n const isDeStefano = fabricatorHardcode.hardCodeIsDeStefano();\r\n return Object.assign({}, stateSettings, {\r\n ...settings,\r\n leadCapture: IS_PRODUCT_JOURNEY ? settings.leadCaptureProduct : settings.leadCapture,\r\n measureUnit: checkMeasureUnit(settings.measurement),\r\n currencySign: getCurrencySign(settings.currency, (fabricatorResponse && fabricatorResponse.settings) ? fabricatorResponse.settings : settings),\r\n currencyPosition: getCurrencyPosition(settings.currency),\r\n priceWorksheetEnabled: true,\r\n enableSharing: isCaesarStone ? false : settings.enableSharing,\r\n showLanguageSelect: isCaesarStone || isDeStefano ? false : settings.showLanguageSelect,\r\n useCategorySwitching: true,\r\n allowVisualizerSwitching: fabricatorResponse.useVisualizerSwitching || window.location.href.includes(\"allowRooms\"),\r\n callForPricing: settings.callForPricing || fabricatorHardcode.hardCodeIsAgent() || fabricatorHardcode.hardCodeIsTorrco(),\r\n enableASInventorySync: (fabricatorResponse && fabricatorResponse.settings) ? fabricatorResponse.settings.enableASInventorySync : false,\r\n enableASProductSync: (fabricatorResponse && fabricatorResponse.settings) ? fabricatorResponse.settings.enableASProductSync : false,\r\n enableGInventorySync: (fabricatorResponse && fabricatorResponse.settings) ? fabricatorResponse.settings.enableGInventorySync : false,\r\n enableGProductSync: (fabricatorResponse && fabricatorResponse.settings) ? fabricatorResponse.settings.enableGProductSync : false,\r\n useTrumbleApi: (fabricatorResponse && fabricatorResponse.settings) ? fabricatorResponse.settings.useTrumbleApi : false,\r\n useShipperHQ: (fabricatorResponse && fabricatorResponse.settings) ? fabricatorResponse.settings.useShipperHQ : false,\r\n useDifferentCurrencies: (fabricatorResponse && fabricatorResponse.settings) ? fabricatorResponse.settings.useDifferentCurrencies : false,\r\n hideYourListButton: fabricatorResponse ? fabricatorResponse.hideYourListButton : false,\r\n useMarkUpFeaturesRequests: fabricatorResponse ? fabricatorResponse.useMarkUpFeaturesRequests : false,\r\n useFabricatorCostPrices: false,\r\n });\r\n}\r\n\r\nexport default function (state = initialState, action) {\r\n\r\n switch (action.type) {\r\n\r\n case types.SET_FABRICATOR_DATA: {\r\n const {settings, kitchenSettings, bathroomSettings, fireplaceSettings, laundryRoomSettings} = parseFabricatorSettings(action.payload);\r\n document.kvConfig.visualizerOnly = settings.visualizerOnly;\r\n if (document.kvConfig.isBackend && document.kvConfig.visualizerOnly) {\r\n document.kvConfig.visualizerOnly = !(settings.checkout && settings.showPricing) // if they are enabled - enable all pages\r\n }\r\n const finalSettings = getFinalSettings(settings, state.settings, action.payload);\r\n const finalKvSettings = getFinalSettings(kitchenSettings, state.settings, action.payload);\r\n const finalBvSettings = getFinalSettings(bathroomSettings, state.settings, action.payload);\r\n const finalFPSettings = getFinalSettings(fireplaceSettings, state.settings, action.payload);\r\n const finalLRSettings = getFinalSettings(laundryRoomSettings, state.settings, action.payload);\r\n\r\n console.log(\"finalSettings: \", finalSettings);\r\n // console.log(\"finalKvSettings\", finalKvSettings);\r\n // console.log(\"finalBvSettings\", finalBvSettings);\r\n return Object.assign({}, state, {\r\n received: true,\r\n ...action.payload,\r\n city: action.payload.city ? action.payload.city.trim() : \"\",\r\n ...fabricatorHardcode.fabricatorsHardcodeObject,\r\n settings: finalSettings,\r\n kitchenSettings: finalKvSettings,\r\n bathroomSettings: finalBvSettings,\r\n fireplaceSettings: finalFPSettings,\r\n laundryRoomSettings: finalLRSettings,\r\n wasCreatedFromFabricator: action.payload.wasCreatedFromFabricator,\r\n useIMEAPI: action.payload.useIMEAPI,\r\n useIMEAPI_PartnerId: action.payload.useIMEAPI_PartnerId,\r\n receiptSettings: action.payload.receiptSettings ? JSON.parse(action.payload.receiptSettings) : {\r\n showThumbnailsAndDescriptions: fabricatorHardcode.hardCodeIsFabricator(\"customfitbath\", 259554)\r\n || fabricatorHardcode.hardCodeIsAmericanStandard()\r\n },\r\n });\r\n }\r\n case types.SET_FABRICATOR_SUBSCRIPTIONS:\r\n return Object.assign({}, state, {\r\n ...action.payload,\r\n });\r\n case types.SET_FABRICATOR_TAXES:\r\n return Object.assign({}, state, {\r\n fabricatorTaxes: action.payload.fabricatorTaxes || [],\r\n });\r\n case types.SET_SQFT_MEASURE_UNIT: {\r\n return Object.assign({}, state, {\r\n settings: Object.assign({}, state.settings, {\r\n measureUnit: action.payload.measureUnit,\r\n }),\r\n kitchenSettings: Object.assign({}, state.settings, {\r\n measureUnit: action.payload.measureUnit,\r\n })\r\n });\r\n }\r\n case types.UPDATE_FABRICATOR_SETTINGS: {\r\n const currentSettingsProperty = getCommonVisualizerType() + \"Settings\";\r\n const nextSettings = state[currentSettingsProperty]; // current settings\r\n // console.log(\"nextSettings\", nextSettings);\r\n return Object.assign({}, state, {\r\n settings: Object.assign({}, state.settings, nextSettings)\r\n });\r\n }\r\n case types.TOGGLE_HIDE_ITEMS_PRICES: {\r\n return Object.assign({}, state, {\r\n hideCheckoutBreakdownCost: !state.hideCheckoutBreakdownCost\r\n });\r\n }\r\n case types.TOGGLE_USE_FABRICATOR_COST_PRICES: {\r\n const nextSettings = {useFabricatorCostPrices: action.payload.useFabricatorCostPrices}\r\n return Object.assign({}, state, {\r\n settings: Object.assign({}, state.settings, nextSettings)\r\n });\r\n }\r\n }\r\n\r\n return state;\r\n\r\n}\r\n","import * as types from '../actions/actionTypes';\r\n\r\nexport const INITIAL_FLOW_BUTTON_TYPES = {\r\n Quote: \"Quote\",\r\n Design: \"Design\",\r\n};\r\n\r\nconst initialState = {\r\n initialFlowFinished: false, // is set only once to true (to load visualizer)\r\n initialFlowAdditionalRooms: [],\r\n initialFlowType: null,\r\n initialFlowRoom: null,\r\n initialFlowRoomLayout: null,\r\n initialFlowStep: 0,\r\n visualizerNotAvailable: false\r\n};\r\n\r\nexport default function(state = initialState, action){\r\n switch (action.type) {\r\n case types.SET_INITIAL_FLOW_FINISHED:\r\n case types.SET_INITIAL_FLOW_BUTTON:\r\n case types.SET_INITIAL_FLOW_ROOM:\r\n case types.SET_INITIAL_FLOW_ROOM_LAYOUT:\r\n case types.SET_INITIAL_FLOW_STEP:\r\n case types.SET_INITIAL_FLOW_ADDITIONAL_ROOMS:\r\n case types.SET_INITIAL_FLOW_VISUALIZER_NOT_AVAILABLE:\r\n return Object.assign({}, state, {\r\n ...action.payload\r\n });\r\n }\r\n return state;\r\n}\r\n","import React from \"react\";\r\nimport {connect} from \"react-redux\";\r\nimport PropTypes from \"prop-types\";\r\nimport NavigationRequests from \"./navigation/navigationRequests\";\r\nimport {IS_LIXIL_UI} from \"../../config\";\r\nimport MaterialSpinner from \"../ui/materialSpinner\";\r\nimport {COUNTERTOP_GROUP} from \"../kvComponent/core/constants\";\r\n\r\nclass AllFeaturesChecker extends NavigationRequests {\r\n\r\n static propTypes = {\r\n subPart: PropTypes.object.isRequired,\r\n callBack: PropTypes.func,\r\n loaderOnly: PropTypes.bool,\r\n withFiltersRequest: PropTypes.bool,\r\n };\r\n\r\n constructor(props) {\r\n super(props);\r\n this._filtersRequestsMade = [];\r\n }\r\n\r\n componentDidMount() {\r\n const {subPart, callBack, withFiltersRequest, filterGroups} = this.props;\r\n if (withFiltersRequest && !this._filtersRequestsMade.includes(subPart.part.partId) && COUNTERTOP_GROUP.includes(subPart.part.partId)\r\n && !subPart.part.filtersReceived) {\r\n this._filtersRequestsMade.push(subPart.part.partId);\r\n this.checkIfAllFiltersReceived(subPart.part, filterGroups)\r\n .then(() => {\r\n if (callBack) {\r\n callBack()\r\n }\r\n });\r\n }\r\n this.checkIfAllFeaturesReceived(subPart, \"\", callBack);\r\n }\r\n\r\n render() {\r\n const {loaderOnly} = this.props;\r\n if (loaderOnly) {\r\n return IS_LIXIL_UI\r\n ? \r\n \r\n \r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = (store) => {\r\n return {\r\n cartItems: store.cartState.cartItems,\r\n filterGroups: store.filterState.filterGroups,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {};\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(AllFeaturesChecker);\r\n","import {createContext, useContext} from \"react\";\r\n\r\nexport const initialShopContextValues = {\r\n shopNavItems: [],\r\n shopAllNavItems: [],\r\n shopNavItemsLoaded: false,\r\n shopActiveCategory: \"\",\r\n shopActiveFeature: \"\",\r\n shopLastActiveFeature: \"\",\r\n};\r\n\r\nconst shopAction = \"CHANGE_SHOP_CONTEXT\";\r\n\r\nconst ShopContext = createContext({});\r\n\r\nexport const useShopContext = () => {\r\n return useContext(ShopContext);\r\n}\r\n\r\nexport const shopContextAction = (payload) => {\r\n return {\r\n type: shopAction,\r\n payload\r\n }\r\n}\r\n\r\nexport const shopContextReducer = (state = initialShopContextValues, action) => {\r\n switch (action.type) {\r\n case shopAction:\r\n return {...state, ...action.payload};\r\n default:\r\n return state\r\n }\r\n}\r\n\r\nexport default ShopContext;\r\n","import React from \"react\";\r\nimport {connect} from \"react-redux\";\r\nimport PropTypes from \"prop-types\";\r\n\r\nimport COLOR_THEMES from \"../../../colorThemes\";\r\n\r\n\r\nconst UiIcon = (props) => {\r\n\r\n const {activeTheme, icon, color} = props;\r\n\r\n switch (icon) {\r\n case \"checkmark\":\r\n return (\r\n \r\n )\r\n default:\r\n return null\r\n }\r\n}\r\n\r\nUiIcon.propTypes = {\r\n icon: PropTypes.string.isRequired,\r\n color: PropTypes.string\r\n}\r\n\r\nconst mapStateToProps = store => {\r\n const {activeTheme} = store.serverState;\r\n return {\r\n activeTheme\r\n }\r\n};\r\n\r\nexport default connect(mapStateToProps)(UiIcon)\r\n","import store from \"./../../../store\";\r\nimport config from \"../components/canvas/store/sqftConfig\";\r\nimport workspace from \"../components/canvas/core/workspace\";\r\nimport {\r\n getBacksplashArea,\r\n getEdgeLength,\r\n inchesToLNFT,\r\n inchesToMm,\r\n mm2ToM2,\r\n mmToM,\r\n sqInchesToSqFoot\r\n} from \"./sqftHelper\";\r\nimport {RESOURCE_ATTACHED_TO_TYPE, SQFT_FEATURES} from \"../constants\";\r\nimport {getCurrentLayout} from \"../../appLayout\";\r\nimport MiteredController from \"../components/canvas/core/controls/mitered\";\r\nimport sqftSlabManager from \"../components/canvas/store/sqftSlabManager\";\r\nimport sqftShapeManager from \"../components/canvas/store/sqftShapeManager\";\r\n\r\nexport function manualCalculationsCheckForChangesApplied() {\r\n return manualCalculationsCountertopArea() > 0 || manualCalculationsEdgesLength() > 0 || manualCalculationsBacksplashArea() > 0\r\n}\r\n\r\n//TODO include edges length\r\nexport function manualCalculationsCountertopArea() {\r\n const state = store.getState();\r\n\r\n let totalArea = state.sqftManualCalculationState.countertopRows.reduce((sum, row) => {\r\n if (!row.length || !row.width || isNaN(row.length) || isNaN(row.width)) {\r\n return sum\r\n }\r\n\r\n return config.measureUnit === \"Imperial\"\r\n ? sum + Math.ceil(sqInchesToSqFoot(row.length * row.width))\r\n : sum + mm2ToM2(row.length * row.width)\r\n }, 0);\r\n\r\n return Math.ceil10(totalArea, -2);\r\n}\r\n\r\nexport function manualCalculationsEdgesLength() {\r\n const state = store.getState();\r\n let totalArea = state.sqftManualCalculationState.edgeRows.reduce((sum, row) => {\r\n if (!row.length || !row.height || isNaN(row.length) || isNaN(row.height)) {\r\n return sum\r\n }\r\n\r\n return sum + manualCalculationsEdgeLength(row.selectedFeature, row.length)\r\n }, 0);\r\n\r\n return config.measureUnit === \"Imperial\" ? Math.ceil10(totalArea) : Math.ceil10(totalArea, -2);\r\n}\r\n\r\nexport function manualCalculationsEdgeLength(selectedFeature, length) {\r\n return selectedFeature.dbFeature.unit.toLowerCase() === \"each\"\r\n ? 1\r\n : config.measureUnit === \"Imperial\" ? Math.ceil10(inchesToLNFT(length)) : Math.ceil10(mmToM(length), -2);\r\n}\r\n\r\nexport function manualCalculationsBacksplashArea() {\r\n const state = store.getState();\r\n\r\n return getRowSum(state.sqftManualCalculationState.backsplashRows);\r\n}\r\nconst getRowSum = (row) => {\r\n let totalArea = row.reduce((sum, row) => {\r\n if (!row.length || !row.height || isNaN(row.length) || isNaN(row.height)) {\r\n return sum\r\n }\r\n\r\n return config.measureUnit === \"Imperial\"\r\n ? sum + Math.ceil(sqInchesToSqFoot(row.length * row.height))\r\n : sum + mm2ToM2(row.length * row.height)\r\n }, 0);\r\n\r\n return Math.ceil10(totalArea, -2);\r\n}\r\n\r\nexport function getCountertopArea() {\r\n let totalArea = 0;\r\n const shapes = sqftShapeManager.getCounterTopShapes();\r\n //console.log(\"-------------------------\",);\r\n shapes\r\n .sort((a, b) => a.id - b.id)\r\n .forEach(function(shape) {\r\n totalArea += shape.getTotalArea();\r\n });\r\n //console.log(\"-------------------------\",);\r\n //console.log(\"total sqInchesToSqFoot(totalArea)\", sqInchesToSqFoot(totalArea));\r\n return {\r\n totalAreaToMeasureUnit: config.measureUnit === \"Imperial\" ? Math.ceil(sqInchesToSqFoot(totalArea)) : mm2ToM2(totalArea),\r\n totalArea: totalArea,\r\n shapeLength: shapes.length\r\n }\r\n}\r\n\r\nexport function getEdgesArea() {\r\n let edgeCount = 0;\r\n //let edges = workspace.getShapeType('edge');\r\n const edges = workspace.getAttachedToLineResource(RESOURCE_ATTACHED_TO_TYPE.edge);\r\n\r\n for (const edge of edges) {\r\n const attachedTo = workspace.getLineOrCornerLineById(edge.attachedToId);\r\n edgeCount += getEdgeLength(attachedTo);\r\n }\r\n\r\n if (workspace.miteredController instanceof MiteredController) {\r\n edgeCount += workspace.miteredController.getEdgesLength();\r\n }\r\n\r\n return config.measureUnit === \"Imperial\" ? Math.ceil(edgeCount) : Math.ceil10(edgeCount, -2);\r\n}\r\n\r\nexport function getBacksplashTotalArea() {\r\n let backsplashesArea = 0;\r\n const state = store.getState();\r\n const attachedToLineResources = state.sqftResourceState.attachedToLine;\r\n const backsplashes = attachedToLineResources.filter(attachedToLineResources => attachedToLineResources.type === RESOURCE_ATTACHED_TO_TYPE.backsplash)\r\n for (let i = 0; i < backsplashes.length; i++) {\r\n const line = workspace.getLineOrCornerLineById(backsplashes[i].attachedToId)\r\n if (line) {\r\n backsplashesArea += getBacksplashArea(line.getBacksplashHeight(), line);\r\n }\r\n }\r\n\r\n const backsplashLabeledShapes = sqftShapeManager.getBacksplashLabeledShapes()\r\n backsplashLabeledShapes.forEach(function(shape) {\r\n if (shape.getTotalArea) {\r\n const shapeArea = shape.getTotalArea();\r\n backsplashesArea += config.measureUnit === \"Imperial\" ? Math.ceil(sqInchesToSqFoot(shapeArea)) : mm2ToM2(shapeArea)\r\n }\r\n });\r\n\r\n return config.measureUnit === \"Imperial\" ? Math.ceil10(backsplashesArea) : Math.ceil10(backsplashesArea, -2);\r\n}\r\n\r\nexport const getConvertedMultipliedValue = (length, height) => {\r\n return config.measureUnit === \"Imperial\"\r\n ? Math.ceil(sqInchesToSqFoot(length * height))\r\n : mm2ToM2(length * height)\r\n}\r\n\r\nexport const getExportedManualCalculateBacksplashes = () => {\r\n const state = store.getState();\r\n let backsplashes = [];\r\n\r\n state.sqftManualCalculationState.backsplashRows.forEach((row) => {\r\n if (!row.length || !row.height || isNaN(row.length) || isNaN(row.height)) {\r\n return\r\n }\r\n let area = getConvertedMultipliedValue(row.length, row.height);\r\n let linearFeet = Math.ceil(inchesToLNFT(row.length)); // / 12\r\n let M = mmToM(row.length);\r\n backsplashes.push({\r\n id: row.id,\r\n partId: \"backsplashes\",\r\n length: area,\r\n squareFeet: area,\r\n realLength: config.measureUnit === \"Imperial\" ? linearFeet : M,\r\n inputLength: row.length,\r\n inputHeight: row.height,\r\n });\r\n });\r\n\r\n return backsplashes;\r\n}\r\n\r\nexport const getExportedManualCalculateEdges = () => {\r\n const state = store.getState();\r\n let selectedEdges = [];\r\n\r\n state.sqftManualCalculationState.edgeRows.forEach((row) => {\r\n if (!row.length || !row.height || isNaN(row.length) || isNaN(row.height)) {\r\n return\r\n }\r\n if (!row.selectedFeature) {\r\n console.log(\"edge was not selected in manual calculations\");\r\n return\r\n }\r\n selectedEdges.push({\r\n id: row.id,\r\n featureId: row.selectedFeature.dbFeature.id,\r\n partId: \"edges\",\r\n length: manualCalculationsEdgeLength(row.selectedFeature, row.length),\r\n unit: row.selectedFeature.dbFeature.unit,\r\n inputLength: row.length,\r\n inputHeight: row.height,\r\n name: row.type,\r\n segments: 1,\r\n });\r\n });\r\n\r\n return selectedEdges;\r\n}\r\n\r\n/**\r\n * @returns string\r\n */\r\nexport const getCountertopQtCategory = () => {\r\n const layout = getCurrentLayout();\r\n const mainNeeded = \"center_island_countertop\";\r\n const oppositeNeeded = \"countertop\";\r\n let featureGroupCountertop = layout.getSubPartFromQtCategories(mainNeeded);\r\n if (!featureGroupCountertop) {\r\n return oppositeNeeded\r\n }\r\n\r\n return mainNeeded\r\n}\r\n\r\n/**\r\n * @returns countertops[]\r\n */\r\nexport const getExportedManualCalculateCountertops = () => {\r\n const state = store.getState();\r\n let countertops = [];\r\n\r\n state.sqftManualCalculationState.countertopRows.forEach((row) => {\r\n if (!row.length || !row.width || isNaN(row.length) || isNaN(row.width)) {\r\n return\r\n }\r\n countertops.push({\r\n id: row.id,\r\n partId: getCountertopQtCategory(),\r\n inputLength: row.length,\r\n inputWidth: row.width,\r\n area: getConvertedMultipliedValue(row.length, row.width)\r\n });\r\n });\r\n\r\n return countertops;\r\n}\r\n\r\n/**\r\n * This will return area for slabImages and slab placeHolder shapes\r\n * @return {Number|*|number}\r\n */\r\nexport function getSlabTotalArea() {\r\n const state = store.getState();\r\n let slabImages = state.sqftSlabState.croppedSlabImages;\r\n let slabPlaceHolderShapes = sqftSlabManager.getSlabPlaceHolderShapes();\r\n if (slabImages.length === 0 && slabPlaceHolderShapes.length === 0) {\r\n return 0\r\n }\r\n let totalArea = [...slabImages, ...slabPlaceHolderShapes].reduce((previousValue, slabImage) => {\r\n let imageSize = slabImage.getSize()\r\n previousValue += imageSize.width * imageSize.height\r\n\r\n return previousValue\r\n }, 0)\r\n\r\n return config.measureUnit === \"Imperial\" ? Math.ceil10(sqInchesToSqFoot(totalArea)) : Math.ceil10(mmToM(totalArea), -2);\r\n}\r\n\r\nexport function getSlabImagesAreaGrouped() {\r\n const state = store.getState();\r\n const slabImages = state.sqftSlabState.croppedSlabImages;\r\n const slabPlaceHolderShapes = sqftSlabManager.getSlabPlaceHolderShapes();\r\n const slabImagesAndPlaceHolders = [...slabImages, ...slabPlaceHolderShapes];\r\n\r\n let slabImagesPrepared = [];\r\n for (let movableImage of slabImagesAndPlaceHolders) {\r\n let preparedSlabImage = slabImagesPrepared.find(prepared =>\r\n prepared.featureId === movableImage.featureId\r\n );\r\n\r\n if (preparedSlabImage) {\r\n preparedSlabImage.isDisabledInPopup = preparedSlabImage.isDisabledInPopup && movableImage.isDisabledInPopup;\r\n continue;\r\n }\r\n\r\n let totalArea = getSlabSameTypeArea(movableImage.featureId, slabImagesAndPlaceHolders);\r\n let totalSlabs = getSlabSameType(movableImage.featureId, slabImagesAndPlaceHolders).length;\r\n\r\n slabImagesPrepared.push({\r\n id: movableImage.id,\r\n partId: SQFT_FEATURES.slabs,\r\n slabParentPartId: movableImage.slabParentPartId,\r\n featureId: movableImage.featureId,\r\n totalSlabs: totalSlabs,\r\n totalArea: totalArea,\r\n pricePerArea: movableImage.pricePerArea,\r\n shouldUseSlabPricing: movableImage.shouldUseSlabPricing,\r\n isDisabledInPopup: movableImage.isDisabledInPopup\r\n });\r\n }\r\n\r\n return slabImagesPrepared;\r\n}\r\n\r\nexport function getSlabSameTypeArea(featureId, croppedSlabImages) {\r\n let totalArea = croppedSlabImages\r\n .filter(croppedSlabImage => croppedSlabImage.featureId === featureId)\r\n .reduce((previousValue, slabImage) => {\r\n const imageSize = slabImage.getSize();\r\n const width = config.measureUnit === \"Imperial\" ? imageSize.width : inchesToMm(imageSize.width);\r\n const height = config.measureUnit === \"Imperial\" ? imageSize.height : inchesToMm(imageSize.height);\r\n previousValue += width * height;\r\n\r\n return previousValue\r\n }, 0)\r\n\r\n return config.measureUnit === \"Imperial\" ? Math.ceil10(sqInchesToSqFoot(totalArea)) : Math.ceil10(mm2ToM2(totalArea), -2);\r\n}\r\n\r\nexport function getSlabSameType(featureId, croppedSlabImages) {\r\n return croppedSlabImages.filter(croppedSlabImage => croppedSlabImage.featureId === featureId);\r\n}\r\n","import * as types from '../actions/actionTypes';\r\nimport {MANUAL_CALCULATION_ROW_TYPES} from \"../bvcomponents/sqft/constants\";\r\nimport sqftConfig from \"../bvcomponents/sqft/components/canvas/store/sqftConfig\";\r\n\r\nexport const DEFAULT_MANUAL_CALC_ROW = {\r\n id: \"\",\r\n length: sqftConfig.getMeasureUnitPostfix(),\r\n height: sqftConfig.getMeasureUnitPostfix(),\r\n width: sqftConfig.getMeasureUnitPostfix(),\r\n selectedFeature: \"\",\r\n isShowTypesList: false,\r\n};\r\n\r\nexport const getEdgesPlaceholder = () => {\r\n return sqftConfig.measureUnit === \"Imperial\"\r\n ? sqftConfig.edgeHeightImperial //+ sqftConfig.getMeasureUnitPostfix()\r\n : sqftConfig.edgeHeightMetric //+ sqftConfig.getMeasureUnitPostfix()\r\n}\r\n\r\nexport const getDefaultManualCalcRowEdge = () => Object.assign({}, DEFAULT_MANUAL_CALC_ROW, { height: getEdgesPlaceholder() })\r\n\r\nexport const getInitialManualCalcRows = () => {\r\n return {\r\n [MANUAL_CALCULATION_ROW_TYPES.countertopRows]: new Array(6).fill(null)\r\n .map((value, index) => ({...DEFAULT_MANUAL_CALC_ROW, id: index + 1})),\r\n [MANUAL_CALCULATION_ROW_TYPES.edgeRows]: new Array(6).fill(null)\r\n .map((value, index) => ({...getDefaultManualCalcRowEdge(), id: index + 1})),\r\n [MANUAL_CALCULATION_ROW_TYPES.backsplashRows]: new Array(6).fill(null)\r\n .map((value, index) => ({...DEFAULT_MANUAL_CALC_ROW, id: index + 1})),\r\n }\r\n}\r\n\r\nconst initialState = {\r\n showManualCalculation: false,\r\n switcherPosition: {\r\n rect: {x:0, y:0}\r\n },\r\n ...getInitialManualCalcRows()\r\n};\r\n\r\nexport default function (state = initialState, action) {\r\n let filteredRows,\r\n newRow,\r\n lastRow,\r\n lastRowId;\r\n\r\n switch (action.type) {\r\n case types.TOGGLE_SHOW_MANUAL_CALCULATION:\r\n case types.SET_SWITCHER_POSITION:\r\n return Object.assign({}, state, {\r\n ...action.payload\r\n });\r\n case types.UPDATE_MANUAL_CALCULATION_ROWS:\r\n return Object.assign({}, state, {\r\n ...action.payload\r\n });\r\n case types.ADD_MANUAL_CALCULATION_ROW:\r\n lastRow = state[action.payload.type][state[action.payload.type].length - 1];\r\n lastRowId = lastRow ? lastRow.id : 0;\r\n switch (action.payload.type) {\r\n case MANUAL_CALCULATION_ROW_TYPES.edgeRows:\r\n newRow = {...getDefaultManualCalcRowEdge(), id: lastRowId + 1};\r\n break;\r\n default:\r\n newRow = {...DEFAULT_MANUAL_CALC_ROW, id: lastRowId + 1};\r\n }\r\n\r\n return {\r\n ...state,\r\n [action.payload.type] : [...state[action.payload.type], newRow]\r\n };\r\n case types.DELETE_MANUAL_CALCULATION_ROW:\r\n filteredRows = state[action.payload.type].filter((row) => row.id !== action.payload.id);\r\n\r\n return Object.assign({}, state, {\r\n [action.payload.type]: filteredRows\r\n });\r\n case types.UPDATE_MANUAL_CALCULATION_ROW: {\r\n const newList = state[action.payload.type].map((item) => {\r\n if (item.id === action.payload.row.id) {\r\n\r\n return Object.assign({}, item, {\r\n ...action.payload.updatedRowValue\r\n });\r\n }\r\n\r\n return item;\r\n });\r\n return Object.assign({}, state, {\r\n [action.payload.type]: newList\r\n });\r\n }\r\n\r\n default:\r\n return state\r\n }\r\n}\r\n","import workspace from \"../workspace\";\r\nimport sqftShapeManager from \"../../store/sqftShapeManager\";\r\nimport Rectangle from \"../shapes/layouts/rectangle\";\r\nimport {CABINET_LABELS, SHAPE_PART_ID} from \"../../../../constants\";\r\nimport Polygon from \"../shapes/layouts/polygon\";\r\nimport SlabAdditionalShape from \"../slab/slabAdditionalShape\";\r\nimport {createIroningBoardShape} from \"./cabinetShapesSpecialLayouts\";\r\nimport {getCabinetDimensions, getRelatedFeatureMetadata, getSpecialShape} from \"../../../../helpers/sqft3dArHelper\";\r\n\r\nexport const SHAPE_LAYOUTS = {\r\n rectangle: \"rectangle\",\r\n upperLayoutType5: \"upperLayoutType5\",\r\n upperLayoutType2: \"upperLayoutType2\",\r\n upperLayoutType4: \"upperLayoutType4\",\r\n\r\n lowerLayoutType1: \"lowerLayoutType1\",\r\n lowerLayoutType2: \"lowerLayoutType2\",\r\n lowerLayoutType3: \"lowerLayoutType3\",\r\n lowerLayoutType4: \"lowerLayoutType4\",\r\n lowerLayoutType5: \"lowerLayoutType5\",\r\n LowerIroningBoardRight: \"LowerIroningBoardRight\",\r\n LowerIroningBoardLeft: \"LowerIroningBoardLeft\",\r\n};\r\n\r\nexport const SHAPE_UPPER_LAYOUTS = [\r\n SHAPE_LAYOUTS.upperLayoutType5,\r\n SHAPE_LAYOUTS.upperLayoutType2,\r\n SHAPE_LAYOUTS.upperLayoutType4,\r\n];\r\n\r\nexport const SHAPE_LOWER_LAYOUTS = [\r\n SHAPE_LAYOUTS.lowerLayoutType1,\r\n SHAPE_LAYOUTS.lowerLayoutType2,\r\n SHAPE_LAYOUTS.lowerLayoutType3,\r\n SHAPE_LAYOUTS.lowerLayoutType4,\r\n SHAPE_LAYOUTS.lowerLayoutType5,\r\n SHAPE_LAYOUTS.LowerIroningBoardRight,\r\n SHAPE_LAYOUTS.LowerIroningBoardLeft,\r\n];\r\nexport const SHAPE_DIAMOND_LAYOUTS = [\r\n SHAPE_LAYOUTS.lowerLayoutType5,\r\n SHAPE_LAYOUTS.upperLayoutType4,\r\n];\r\n\r\nexport const SHAPE_SQUARE_LAYOUTS = [\r\n SHAPE_LAYOUTS.upperLayoutType2,\r\n SHAPE_LAYOUTS.upperLayoutType4,\r\n SHAPE_LAYOUTS.upperLayoutType5,\r\n\r\n SHAPE_LAYOUTS.lowerLayoutType1,\r\n SHAPE_LAYOUTS.lowerLayoutType2,\r\n SHAPE_LAYOUTS.lowerLayoutType4,\r\n SHAPE_LAYOUTS.lowerLayoutType5,\r\n];\r\n\r\nexport const IRONING_BOARD_DIRECTION = {\r\n left: 'left',\r\n right: 'right'\r\n}\r\n\r\n// const LAYOUT_TYPES = {\r\n// upper: SHAPE_UPPER_LAYOUTS,\r\n// lower: SHAPE_LOWER_LAYOUTS,\r\n// };\r\n\r\nclass CabinetShapes {\r\n constructor() {\r\n this.upperShapes = [];\r\n this.lowerShapes = [];\r\n this.otherShapes = [];\r\n this.additionalShapes = [];\r\n this.shapes = {\r\n /**\r\n * |‾‾‾‾|\r\n * | /\r\n * |__/\r\n */\r\n upperLayoutType5: [\r\n 'SM-DCW2436', 'SW-DCW2430', 'SM-DCW2442',\r\n 'Providence Cabinets Shaker White 27\" W, 36\" H Diagonal Corner Wall Cabinet',\r\n 'Providence Cabinets Shaker White 27\" W, 42\" H Diagonal Corner Wall Cabinet',\r\n 'SW-W1230', 'SM-W1236', 'SM-W1242',\r\n ],\r\n /**\r\n * |‾‾‾‾|\r\n * | _|\r\n * |__|\r\n */\r\n upperLayoutType2: [\r\n 'Providence Cabinets Shaker White Corner Wall Cabinet 24\"W 36\" H',\r\n 'Providence Cabinets Shaker White 24\" W, 30\" H Diagonal Corner Wall Cabinet',\r\n 'Providence Cabinets Shaker White Corner Wall Cabinet 24\"W 30\"H',\r\n 'Providence Cabinets Shaker White Corner Wall Cabinet 24\"W 42\"H',\r\n 'Providence Cabinets Shaker White Corner Wall Cabinet 24\"W 42\" H',\r\n ],\r\n /**\r\n * |‾‾‾‾‾|\r\n * | __|\r\n * |__|\r\n */\r\n lowerLayoutType1: ['SM-ERB36/BER36', 'Providence Cabinets Shaker White 33\" Lazy Susan'],\r\n /**\r\n * |‾‾‾/\r\n * | >\r\n * |/\r\n */\r\n lowerLayoutType2: ['SW-BEC24'],\r\n /**\r\n * |‾‾‾|\r\n * | |\r\n * | )\r\n */\r\n lowerLayoutType3: ['SW-BES12'],\r\n LowerIroningBoardRight: ['SW-BES12'],\r\n /**\r\n * |‾‾‾‾|\r\n * | /\r\n * |__/\r\n */\r\n lowerLayoutType4: [],\r\n };\r\n this.specialShapes = {\r\n LowerLCorner: SHAPE_LAYOUTS.lowerLayoutType1,\r\n LowerDullangle: SHAPE_LAYOUTS.lowerLayoutType2,\r\n LowerDualangle: SHAPE_LAYOUTS.lowerLayoutType2,\r\n LowerIroningBoard: SHAPE_LAYOUTS.lowerLayoutType3,\r\n LowerDimondShape: SHAPE_LAYOUTS.lowerLayoutType4,\r\n LowerDimondCorner: SHAPE_LAYOUTS.lowerLayoutType5,\r\n LowerIroningBoardRight: SHAPE_LAYOUTS.LowerIroningBoardRight,\r\n LowerIroningBoardLeft: SHAPE_LAYOUTS.LowerIroningBoardLeft,\r\n\r\n UpperDimondShape: SHAPE_LAYOUTS.upperLayoutType4,\r\n UpperDimondCorner: SHAPE_LAYOUTS.upperLayoutType5,\r\n UpperLCorner: SHAPE_LAYOUTS.upperLayoutType2,\r\n }\r\n }\r\n\r\n addShape = (feature, parentFeature, position = null) => {\r\n const dimensions = getCabinetDimensions(feature, parentFeature);\r\n if (feature.partId === CABINET_LABELS.upper_cabinet_boxes) {\r\n return this.addShapeHelper(\r\n this.upperShapes, 'square', feature.partId,\r\n this.getShapeLayout(feature, parentFeature), dimensions, position, feature, parentFeature\r\n );\r\n } else if (feature.partId === CABINET_LABELS.lower_cabinet_boxes) {\r\n return this.addShapeHelper(\r\n this.lowerShapes, 'square', feature.partId,\r\n this.getShapeLayout(feature, parentFeature), dimensions, position, feature, parentFeature\r\n );\r\n } else {\r\n return this.addShapeHelper(\r\n this.otherShapes, 'square', feature.partId,\r\n this.getShapeLayout(feature, parentFeature), dimensions, position, feature, parentFeature\r\n );\r\n }\r\n };\r\n\r\n addShapeHelper = (shapeArray, shapeType, partId, shapeLayout, dimensions, position, feature, parentFeature) => {\r\n const shapeLines = this.getShapeLines(shapeLayout, dimensions);\r\n const shapeParams = { shapeCabinet: true, canSnap: true, ...dimensions, shapeLayout };\r\n const shapeId = sqftShapeManager.addShape(shapeLines, shapeType, position, partId, null, shapeParams);\r\n const shape = workspace.getShapeById(shapeId);\r\n sqftShapeManager.setShapeFeatureId(shapeId, feature.dbFeature.id);\r\n sqftShapeManager.setShapeRelatedParentFeatureId(shapeId, parentFeature.dbFeature.id);\r\n shape.setOriginalPointsCoords(shape.getPointsCoords());\r\n shapeArray.push(shapeId);\r\n console.log(\"Feature SharedFeatureName\", feature.dbFeature.sharedFeatureName);\r\n console.log(\"Feature Metadata\", getRelatedFeatureMetadata(feature, parentFeature));\r\n return shapeId;\r\n };\r\n\r\n getShapeLayout = (feature, parentFeature) => {\r\n const thirdPartyAR3DMetaData = getRelatedFeatureMetadata(feature, parentFeature);\r\n const specialShape = getSpecialShape(thirdPartyAR3DMetaData);\r\n if (specialShape) {\r\n const specialLayoutName = specialShape.replace(/\\s/g, \"\");\r\n if (this.specialShapes[specialLayoutName]) {\r\n return this.specialShapes[specialLayoutName]\r\n }\r\n }\r\n\r\n // Hardcoded Layouts\r\n for (const layout of Object.keys(SHAPE_LAYOUTS)) {\r\n if (this.shapes[layout] && feature.dbFeature && this.shapes[layout].includes(feature.dbFeature.sharedFeatureName) ||\r\n (feature.part && this.shapes[layout].includes(feature.part.dbFeature.sharedFeatureName))) {\r\n return layout;\r\n }\r\n }\r\n\r\n return SHAPE_LAYOUTS.rectangle;\r\n };\r\n\r\n getShapeLines = (shapeLayout, { width, height, depth, diamondLength}) => {\r\n void height;\r\n let cathetus = depth / Math.sqrt(2);\r\n let margin = diamondLength ? width - diamondLength : 0;\r\n switch (shapeLayout) {\r\n case SHAPE_LAYOUTS.lowerLayoutType1:\r\n return new Polygon(this.createPoints([\r\n { x: 0, y: 0 },\r\n { x: width, y: 0 },\r\n { x: width, y: depth },\r\n { x: depth, y: depth },\r\n { x: depth, y: width },\r\n { x: 0, y: width }\r\n ]), true, true);\r\n case SHAPE_LAYOUTS.lowerLayoutType2:\r\n return new Polygon(this.createPoints([\r\n { x: 0, y: 0 },\r\n { x: width, y: 0 },\r\n { x: width - 8, y: depth - 8 },\r\n { x: 0, y: depth }\r\n ]), true, true);\r\n case SHAPE_LAYOUTS.lowerLayoutType3:\r\n case SHAPE_LAYOUTS.LowerIroningBoardRight:\r\n return createIroningBoardShape(width, depth, width, IRONING_BOARD_DIRECTION.right);\r\n case SHAPE_LAYOUTS.LowerIroningBoardLeft:\r\n return createIroningBoardShape(width, depth, width, IRONING_BOARD_DIRECTION.left);\r\n case SHAPE_LAYOUTS.lowerLayoutType4:\r\n return new Polygon(this.createPoints([\r\n { x: margin, y: 0 },\r\n { x: width, y: 0 },\r\n { x: width, y: depth },\r\n { x: depth, y: width },\r\n { x: 0, y: width },\r\n { x: 0, y: margin }\r\n ]), true, true);\r\n case SHAPE_LAYOUTS.lowerLayoutType5:\r\n return new Polygon(this.createPoints([\r\n { x: width - diamondLength, y: 0 },\r\n { x: width, y: 0 },\r\n { x: width, y: depth },\r\n { x: depth, y: depth },\r\n { x: depth, y: width },\r\n { x: 0, y: width },\r\n { x: 0, y: width - diamondLength }\r\n ]), true, true);\r\n\r\n // UPPER\r\n case SHAPE_LAYOUTS.upperLayoutType4:\r\n return new Polygon(this.createPoints([\r\n { x: cathetus, y: 0 },\r\n { x: width, y: 0 },\r\n { x: width, y: depth },\r\n { x: depth, y: width },\r\n { x: 0, y: width },\r\n { x: 0, y: cathetus }\r\n ]), true, true);\r\n case SHAPE_LAYOUTS.upperLayoutType5:\r\n return new Polygon(this.createPoints([\r\n { x: 0, y: 0 },\r\n { x: width, y: 0 },\r\n { x: width, y: width - depth },\r\n { x: width - depth, y: width },\r\n { x: 0, y: width }\r\n ]), true, true);\r\n case SHAPE_LAYOUTS.upperLayoutType2:\r\n return new Polygon(this.createPoints([\r\n { x: 0, y: 0 },\r\n { x: width, y: 0 },\r\n { x: width, y: depth },\r\n { x: depth, y: depth },\r\n { x: depth, y: width },\r\n { x: 0, y: width }\r\n ]), true, true);\r\n default:\r\n return new Rectangle(width, depth);\r\n }\r\n };\r\n\r\n createPoints = (coords) => coords;\r\n\r\n resetUpperShapes = () => {\r\n this.upperShapes = [];\r\n };\r\n\r\n importData = (data) => {\r\n //this.resetBacksplashes();\r\n data.forEach(activeBacksplashData => {\r\n const shape = workspace.importShape(activeBacksplashData.backsplashShape);\r\n shape.deregisterEvents();\r\n const line = workspace.getLineById(activeBacksplashData.line.id);\r\n const slabAdditionalShape = new SlabAdditionalShape(line, shape.id);\r\n this.addActiveBacksplash(slabAdditionalShape);\r\n });\r\n };\r\n\r\n exportData = () => {\r\n return this.additionalShapes\r\n .filter(slab => workspace.getShapeById(slab.backsplashShapeId).partId !== SHAPE_PART_ID.seamPiece)\r\n .map(slab => ({\r\n backsplashShape: workspace.getShapeById(slab.backsplashShapeId).export(),\r\n line: slab.line.export(),\r\n }));\r\n };\r\n\r\n addActiveBacksplash = (slabAdditionalShape) => {\r\n this.additionalShapes.push(slabAdditionalShape);\r\n };\r\n\r\n findAdditionalShapeByLine = (line) => {\r\n return this.additionalShapes.find(additionalShape => additionalShape.line.id === line.id);\r\n };\r\n\r\n removeActiveBacksplashByLine = (line) => {\r\n this.additionalShapes = this.additionalShapes.filter(shape => {\r\n if (shape.line.id === line.id) {\r\n workspace.removeShapeById(shape.backsplashShapeId);\r\n return false;\r\n }\r\n return true;\r\n });\r\n };\r\n\r\n removeShapeFromList = (shapeToRemove) => {\r\n this.additionalShapes = this.additionalShapes.filter(additionalShape => additionalShape.backsplashShapeId !== shapeToRemove.id);\r\n };\r\n}\r\n\r\nexport default CabinetShapes;\r\n","import $ from 'jquery';\r\nimport PropTypes from \"prop-types\";\r\nimport 'jquery-ui/ui/core';\r\nimport 'jquery-ui/ui/widgets/draggable';\r\nimport React, {Fragment} from \"react\";\r\nimport uuid from \"uuid\";\r\n\r\nimport ActionTypes from \"./../../../misc/actionTypes\";\r\nimport KeyboardKey from \"./keyboardKey\";\r\nimport Config from \"./../../../config\"; // kioskStandAlone\r\nimport Analytics from './../../../analytics';\r\n\r\n\r\nexport default class OnScreenKeyboard extends React.Component {\r\n\r\n static propTypes = {\r\n rightSide: PropTypes.bool,\r\n inputId: PropTypes.string.isRequired,\r\n getValue: PropTypes.func,\r\n setValue: PropTypes.func.isRequired,\r\n onClose: PropTypes.func,\r\n onShow: PropTypes.func,\r\n type: PropTypes.string.isRequired,\r\n prependTo: PropTypes.string,\r\n appendTo: PropTypes.string,\r\n top: PropTypes.string,\r\n left: PropTypes.string,\r\n }\r\n\r\n constructor(props) {\r\n super(props);\r\n this.keyboardFrame = null;\r\n this.state = {\r\n value: '',\r\n hidden: true,\r\n selectionStart: 0,\r\n selectionEnd: 0,\r\n type: this.props.type || \"standard\",\r\n oskInputId: uuid.v4(),\r\n isUpperCase: false,\r\n osk: document.kvConfig.osk,\r\n parentNode: null\r\n };\r\n }\r\n\r\n componentDidMount() {\r\n this.tryBindToParent();\r\n this.setState({parentNode: $(this.keyboardFrame).parent()}, () => {\r\n if(this.props.prependTo)\r\n $(this.keyboardFrame).detach().prependTo(this.props.prependTo);\r\n else if(this.props.appendTo)\r\n $(this.keyboardFrame).detach().appendTo(this.props.appendTo);\r\n });\r\n\r\n const $keyboardFrame = $(this.keyboardFrame);\r\n const lightbox = $keyboardFrame.parents('.lightbox-options-wrapper');\r\n if (lightbox) {\r\n lightbox.on('scroll', this.setKBPosition.bind(this, $keyboardFrame, lightbox));\r\n this.setKBPosition($keyboardFrame, lightbox);\r\n }\r\n\r\n $(document).on(ActionTypes.SHOW_NUMERIC_KBD, this.handleShowKeyboard);\r\n $(document).on(ActionTypes.OVERLAY_CLICK, this.handleShowKeyboard);\r\n $(document).on('click', this.handleOutsideClick);\r\n }\r\n\r\n componentDidUpdate() {\r\n this.tryBindToParent();\r\n const fields = this.getFields();\r\n if (!this.state.hidden) {\r\n const selStart = this.state.selectionStart,\r\n selEnd = this.state.selectionEnd;\r\n if (fields.input) {\r\n fields.input.value = this.passwordify(this.state.value);\r\n fields.$input.focus();\r\n fields.input.setSelectionRange(selStart, selEnd);\r\n }\r\n }\r\n }\r\n\r\n componentWillReceiveProps(nextProps) { // we need to update this state when parent passes new value\r\n nextProps.value && nextProps.value !== this.state.value && this.setState({\r\n value: nextProps.value\r\n });\r\n }\r\n\r\n componentWillUnmount = () => {\r\n $(this.keyboardFrame).detach().appendTo(this.state.parentNode);\r\n $('.lightbox-options-wrapper').off('scroll');\r\n $(document).off(ActionTypes.SHOW_NUMERIC_KBD, this.handleShowKeyboard);\r\n $(document).off(ActionTypes.OVERLAY_CLICK, this.handleShowKeyboard);\r\n $(document).off('click', this.handleOutsideClick);\r\n };\r\n\r\n getFields = () => {\r\n const $parent = $('#' + (this.props.inputId ? this.props.inputId : this.props.parentId)),\r\n $parentInput = (this.props.inputId ? $('#' + this.props.inputId) : $parent.find('input[type=text]:not(\".osk-input\")')),\r\n parentInput = $parent[0],\r\n $input = $('#' + this.state.oskInputId),\r\n input = $input[0];\r\n return {\r\n $input: $input,\r\n input: input,\r\n $parent: $parent,\r\n $parentInput: $parentInput,\r\n parentInput: parentInput\r\n };\r\n };\r\n\r\n tryBindToParent = () => {\r\n if (!this.state.osk) {\r\n return;\r\n }\r\n\r\n let fields = this.getFields();\r\n if (!fields || !fields.parentInput || fields.parentInput === undefined) {\r\n console.log('could not bind, fields is null');\r\n return;\r\n }\r\n\r\n //console.log('bound to parent', this.props.inputId, fields.$parentInput, fields.parentInput);\r\n $(fields.parentInput).off('focus').on('focus', this.show);\r\n $(fields.parentInput).off('click').on('click', function (e) {\r\n e.stopPropagation();\r\n e.preventDefault();\r\n });\r\n };\r\n\r\n setKBPosition = (self, lightbox) => {\r\n if (lightbox.is(\":visible\")) {\r\n const parent = self.parent();\r\n const offset = parent.offset();\r\n self.css({\r\n top: offset.top + 60,\r\n left: offset.left + 50,\r\n position: 'fixed'\r\n });\r\n }\r\n };\r\n\r\n handleShowKeyboard = (e, data) => {\r\n if (this.state.hidden) {\r\n return;\r\n }\r\n\r\n if (!data || data.sender !== this.state.oskInputId) {\r\n this.hide();\r\n }\r\n };\r\n\r\n show = (e) => {\r\n e.stopPropagation();\r\n e.preventDefault();\r\n const fields = this.getFields(),\r\n val = fields.$parentInput.val();\r\n //console.log('Show', fields);\r\n\r\n $(document).trigger(ActionTypes.SHOW_NUMERIC_KBD, {sender: this.state.oskInputId});\r\n $('.keyboard-main-frame, .keyboard-main-frame-extended').draggable({handle: '.keyboard-header-bar'});\r\n this.setState({value: val, hidden: false, selectionStart: val.length, selectionEnd: val.length, blockOutsideClick: true});\r\n window.setTimeout(() => {\r\n this.setState({blockOutsideClick: false});\r\n }, 500);\r\n if(this.props.onShow) {\r\n console.log('onShowShowing');\r\n this.props.onShow();\r\n }\r\n };\r\n\r\n\r\n handleOutsideClick = (e) => {\r\n if(this.state.blockOutsideClick) {\r\n return;\r\n }\r\n if($(e.target).parents('.keyboard-container').length <= 0) {\r\n this.hide();\r\n }\r\n };\r\n\r\n hide = () => {\r\n this.setState({hidden: true});\r\n setTimeout(() => {\r\n document.inputFocused = false;\r\n }, 20);\r\n if(this.props.onClose) {\r\n this.props.onClose(this.state.value);\r\n }\r\n };\r\n passwordify = (value) => {\r\n if (this.props.password) {\r\n for (let i = 0; i < value.length - 1; i++) {\r\n value = value.substring(0, i) + '*' + value.substring(i + 1);\r\n }\r\n }\r\n return value;\r\n };\r\n\r\n changeValue = (e) => {\r\n this.setState({value: e.target.value});\r\n };\r\n\r\n runKeyStroke = (key) => {\r\n document.inputFocused = true;\r\n if (key && key.length > 0) {\r\n const fields = this.getFields();\r\n let val = (this.props.getValue ? this.props.getValue() : this.state.value),\r\n start = val,\r\n end = \"\",\r\n input = fields.parentInput,\r\n $input = fields.$input,\r\n $parentInput = fields.$parentInput,\r\n selStart = (this.props.getValue ? val.length : input.selectionStart),\r\n selEnd = (this.props.getValue ? val.length : input.selectionEnd);\r\n //const ss = input.selectionStart, se = input.selectionEnd;\r\n // if (ss && ss !== selStart) {\r\n // selStart = ss;\r\n // }\r\n // if (se && se !== selEnd) {\r\n // selEnd = se;\r\n // }\r\n //console.log('>>', selStart, selEnd, key);\r\n if (selStart < val.length) {\r\n start = val.substring(0, selStart);\r\n end = val.substring(selEnd);\r\n }\r\n let inc = key.length;\r\n switch (key.toLowerCase()) {\r\n case \"backspace\":\r\n inc = -1;\r\n if (selStart < val.length) {\r\n if (selStart === selEnd) {\r\n start = start.substring(0, start.length - 1);\r\n } else {\r\n inc = 0;\r\n selEnd = selStart;\r\n }\r\n val = start + end;\r\n } else if (val.length > 0) {\r\n val = val.substring(0, val.length - 1);\r\n }\r\n break;\r\n case '|<':\r\n case '|>':\r\n if (key === '|<') {\r\n inc = -1;\r\n } else {\r\n if (selStart < selEnd) {\r\n inc = 0;\r\n selStart = selEnd;\r\n } else {\r\n inc = 1;\r\n }\r\n }\r\n break;\r\n case \"space bar\":\r\n case \"space\":\r\n val = start + \" \" + end;\r\n break;\r\n case \"caps\":\r\n case \"shift\":\r\n this.setState({isUpperCase: !this.state.isUpperCase});\r\n break;\r\n default:\r\n if (!this.state.isUpperCase) {\r\n key = key.toLowerCase();\r\n } else {\r\n key = key.toUpperCase();\r\n }\r\n val = start + key + end;\r\n selStart = start.length;\r\n selEnd = selStart;\r\n break;\r\n }\r\n //console.log('\\t>> ', selStart, selEnd, val, val.length, inc);\r\n if (selStart + inc > val.length) {\r\n selStart = val.length;\r\n selEnd = val.length;\r\n } else {\r\n selStart += inc;\r\n if (selEnd + inc > val.length) {\r\n selEnd = val.length;\r\n } else {\r\n selEnd += inc;\r\n }\r\n }\r\n if (selStart < 0) {\r\n selStart = 0;\r\n }\r\n if (selEnd < selStart) {\r\n selEnd = selStart;\r\n }\r\n\r\n this.setState({value: val, select: false}, () => {\r\n input.setSelectionRange(selStart, selEnd);\r\n if($input.length > 0)\r\n $input.focus();\r\n else\r\n $parentInput.focus();\r\n });\r\n // if ($input) {\r\n // console.log('\\t\\t>>', selStart, selEnd);\r\n // input.setSelectionRange(selStart, selEnd);\r\n // $input.val(val);\r\n // $input.focus();\r\n // }\r\n\r\n this.setParentValue(val);\r\n }\r\n };\r\n setParentValue = (value) => {\r\n Analytics.sendDataEnteredEvent('osk-update-parent-textbox');\r\n //console.log('setValue', value, this.props);\r\n if (this.props.setValue) {\r\n if (this.props.prop) {\r\n this.props.setValue(this.props.prop, value);\r\n } else {\r\n this.props.setValue(value);\r\n }\r\n }\r\n };\r\n\r\n done = () => {\r\n this.setParentValue(this.state.value);\r\n this.hide();\r\n };\r\n\r\n mouseUp = () => {\r\n const fields = this.getFields();\r\n this.setState({\r\n selectionStart: fields.input.selectionStart,\r\n selectionEnd: fields.input.selectionEnd\r\n });\r\n };\r\n\r\n render() {\r\n const visible = {\r\n display: this.state.hidden ? \"none\" : \"block\",\r\n //transition: \"all 0.5s ease-in-out\",\r\n top: this.props.top,\r\n left: this.props.left\r\n };\r\n if (this.props.type === \"numeric\") {\r\n return this.renderNumericKeyboard(visible);\r\n }\r\n\r\n const arrowKeys = {\r\n left: (Config.kioskStandAlone || location.port === '9007' || document.kvConfig.kioskMode ? '.' : '/Content/Views/quickquote-v3') + '/images/buttons/KeyboardLeftArrow.svg',\r\n right: (Config.kioskStandAlone || location.port === '9007' || document.kvConfig.kioskMode ? '.' : '/Content/Views/quickquote-v3') + '/images/buttons/KeyboardRightArrow.svg'\r\n };\r\n\r\n const mainFrameClass = \"keyboard-container \" + (this.props.type === 'email' ? 'keyboard-main-frame-extended' : 'keyboard-main-frame');\r\n\r\n return (\r\n \r\n : null}\r\n \r\n {this.props.bvOpened ? : null}\r\n
\r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = (store) => ({\r\n fabricatorData: store.fabricatorState,\r\n selectedFilters: store.filterState.selectedFilters,\r\n filtersVisible: store.filterState.showFilters,\r\n filterGroups: store.filterState.filterGroups,\r\n bvPresets: store.bathroomVisualizerState.bvPresets,\r\n bvOpened: store.bathroomVisualizerState.bvOpened,\r\n userPopupOpened: store.userState.userPopupOpened,\r\n activeNavigationFilter: store.navigationState.activeNavigationFilter,\r\n countertopNavigationFilterCompleted: store.navigationState.countertopNavigationFilterCompleted,\r\n newLayoutType: store.sqftState.newLayoutType,\r\n countertopsApplyTo: store.navigationState.countertopsApplyTo,\r\n activeQuoteIndex: store.quotesState.activeQuoteIndex,\r\n navItemPositionModal: store.navigationState.navItemPositionModal,\r\n});\r\n\r\nconst mapDispatchToProps = {\r\n setNavigationViewType,\r\n setModuleContextMenuType,\r\n setDefaultSelectionGroup,\r\n changeActivePartRelatedItemIndex,\r\n setActiveNavigationFilter,\r\n setActiveNavigationFilterStepIndex,\r\n setModuleContextMenuModule,\r\n setNavigationLoading,\r\n toggleNavItemPositionModal\r\n};\r\n\r\nexport default injectIntl(\r\n connect(mapStateToProps, mapDispatchToProps)(MobileNavigation)\r\n);\r\n","import React from 'react';\r\nimport {connect} from 'react-redux';\r\nimport {injectIntl} from \"react-intl\";\r\nimport $ from \"jquery\";\r\n\r\nimport MobileNavigationCommon from \"../../visComponents/navigation/mobileNavigationCommon\";\r\n\r\nimport {ContentType} from \"../../visComponents/constants\";\r\n\r\nimport MobileNavigationButtons from '../../visComponents/navigation/mobile/mobileNavigationButtons';\r\nimport MobileNavigationAllWallsCheckbox from '../../visComponents/navigation/mobile/mobileNavigationAllWallsCheckbox';\r\nimport FeatureWizardSteps from \"../../visComponents/navigation/featureWizard/featureWizardSteps\";\r\n\r\nimport {changeActivePartRelatedItemIndex, setDefaultSelectionGroup} from \"../../../actions/actionFunctions\";\r\nimport {\r\n setActiveNavigationFilter,\r\n setModuleContextMenuType,\r\n setModuleContextMenuModule,\r\n setActiveNavigationFilterStepIndex, setNavigationViewType, setNavigationLoading, toggleNavItemPositionModal\r\n} from \"../../../actions/navigationFunctions\";\r\n\r\nimport MobileMenuSelect from '../../visComponents/navigation/mobile/mobileMenuSelect';\r\nimport LockedView from \"../../common/lockedView\";\r\n\r\nimport Filters from \"../../visComponents/navigation/newFilters/filters\";\r\nimport BodyPanelRadio from \"../../visComponents/navigation/desktop/bodyPanelRadio\";\r\nimport FilterSwitchers from \"../../visComponents/navigation/newFilters/filterSwitchers\";\r\nimport FilterSelection from \"../../visComponents/navigation/newFilters/filterSelection\";\r\n// import {CABINET_WIZARD_BUTTONS} from \"../core/constants\";\r\nimport NavigationFiltersSteps from \"../../visComponents/navigation/newFilters/navigationFiltersSteps\";\r\nimport ContextMenuQKB from \"./contextMenuQKB\";\r\n\r\nimport {getCurrentLayout} from \"../../appLayout\";\r\nimport {COUNTERTOP_GROUP_BATHROOM} from \"../core/constants\";\r\nimport CountertopSwitchers from \"../../kvComponent/navigation/countertopSwitchers\";\r\nimport {Vanity} from \"../core/parts/vanity\";\r\nimport LookAllWallsRadioButton from \"../lookNavigation/lookMain/lookAllWallsRadioButton\";\r\nimport NavItemPositionModal from \"../../visComponents/navigation/navItemPositionModal\";\r\nimport {setLookContextMenu} from \"../../../actions/lookFunctions\";\r\nimport {checkForContextMenuCommon} from \"../lookNavigation/lookFunctions\";\r\n\r\nclass MobileNavigation extends MobileNavigationCommon {\r\n\r\n componentWillReceiveProps(nextProps) {\r\n this._componentWillReceiveProps(nextProps)\r\n }\r\n\r\n checkForContextMenu = (hoveredLayer, event) => {\r\n if (this.props.contextMenu.opened) {\r\n this.props.setLookContextMenu({\r\n opened: false\r\n })\r\n return true\r\n }\r\n if (!hoveredLayer || this.state.showNavigation) {\r\n return false\r\n }\r\n\r\n const {showButtons} = checkForContextMenuCommon(hoveredLayer.partId, hoveredLayer.layerPosition);\r\n if ((showButtons.length > 1) && !(hoveredLayer.partId && hoveredLayer.partId === \"vanity_legs\")) {\r\n this.props.setLookContextMenu({\r\n opened: true,\r\n partId: hoveredLayer.partId,\r\n layerPosition: hoveredLayer.layerPosition, // if needed\r\n position: {\r\n x: event.clientX,\r\n y: event.clientY,\r\n }\r\n });\r\n return true\r\n } else if (showButtons.length === 1 && showButtons[0].includes(\"_wizard\")) {\r\n // const wizardId = showButtons[0].split(\"-\")[1];\r\n // setWizardActiveItem(wizardList.find(wizardItem => wizardItem.id === wizardId));\r\n //\r\n // history.push(`${getLookIdUrl(false) + ROUTES.wizard}/${wizardId}`);\r\n return true\r\n }\r\n return false\r\n }\r\n\r\n handleContextMenuClick = (featureToClick, partId) => {\r\n const layout = getCurrentLayout();\r\n let clickedParent = \"\", clickedButton = \"\";\r\n const featureGroup = layout.getFeatureGroupByPartId(partId);\r\n if (featureGroup) {\r\n clickedButton = featureGroup.partName;\r\n clickedParent = featureGroup.getParent().partName;\r\n }\r\n //\r\n // console.log('clickedButton', clickedButton);\r\n // console.log('clickedParent', clickedParent);\r\n if (!clickedButton) {\r\n return\r\n }\r\n // console.log('menuItem', menuItem);\r\n // if (clickedParent === \"Walls\" && (clickedButton === \"Left Shower Wall\" || clickedButton === \"Pony Wall\")) {\r\n // this.ponyWallAndLeftWallClick(menuItem);\r\n // }\r\n\r\n this.setState({\r\n showNavigation: true,\r\n contentType: ContentType.Design,\r\n contextMenuOpen: false,\r\n hoveredLayer: {}\r\n }, () => {\r\n this.menuOpened();\r\n this.triggerOpenNavigationMenu(clickedButton, clickedParent);\r\n $(document).on('click', this.handleWrapperBlur);\r\n this.setNewActiveFeature();\r\n if (featureToClick && !isBacksplash) {\r\n featureToClick.handleClick();\r\n }\r\n });\r\n };\r\n\r\n bindCanvasClick = (event) => {\r\n // const canvas = document.getElementById(this.props.canvasId);\r\n\r\n if (!window.touchMove && !this.state.showNavigation && !this.props.contextMenu.opened) {\r\n this.props.setHoveredLayer(event);\r\n }\r\n\r\n if (document.hoveredLayer && !window.touchMove) {\r\n // $('.canvas-text').html(`CLICK3`);\r\n\r\n if (this.checkForContextMenu(document.hoveredLayer, event)) {\r\n return false\r\n }\r\n\r\n const hoveredPartId = document.hoveredLayer.partId;\r\n\r\n if (hoveredPartId) {\r\n if (this.state.contentType === 0) {\r\n this.openMobileMenu();\r\n }\r\n const layout = getCurrentLayout();\r\n const featureGroup = layout.getFeatureGroupByPartId(hoveredPartId);\r\n if (featureGroup) {\r\n this.triggerOpenNavigationMenu(featureGroup.partName, featureGroup.getParent().partName)\r\n if (!window.canvasIsDragging) {\r\n this.props.setCanvasClass(featureGroup.partName.toLowerCase().replace(/ /g, \"-\"));\r\n }\r\n }\r\n }\r\n }\r\n };\r\n\r\n handleNavigationItemClick = (item, ignoreLocked = false, featureIsLocked, event) => {\r\n const layout = getCurrentLayout();\r\n //console.log('item', item);\r\n\r\n if (this.state.childNavigationItem\r\n && this.state.childNavigationItem.part.activeFeature\r\n && Array.isArray(this.state.childNavigationItem.part.activeFeature.metaData[\"SkuName\"])\r\n && this.state.childNavigationItem.part.activeFeature.metaData[\"SkuName\"][0]\r\n && Array.isArray(item.part.metaData[\"SkuName\"])\r\n && (this.state.childNavigationItem.part.activeFeature.metaData[\"SkuName\"][0] === item.part.metaData[\"SkuName\"][0])) {\r\n this.showPositionsPopup(item, event); // move modal to new position\r\n return false // don't change L to R // redundant click\r\n }\r\n\r\n const showPositionPopup = this.showPositionsPopup(item, event);\r\n if (showPositionPopup) {\r\n this.props.setActiveFeature(item.part); // set feature for modal\r\n return // don't click on feature!! we are clicking inside the modal window\r\n }\r\n\r\n if (item.matchesMetaFailed) {\r\n let nonCompatibleWith = \"\";\r\n switch (item.part.partId) {\r\n case \"vanity_faucet\":\r\n nonCompatibleWith = \"sink\";\r\n break;\r\n case \"sink\":\r\n nonCompatibleWith = \"vanity\";\r\n break;\r\n case \"shower_pod\":\r\n nonCompatibleWith = \"Window Kit\";\r\n break;\r\n case \"window_kits\":\r\n nonCompatibleWith = item.matchesMetaFailed === \"shower_pod\" ? \"Shower Pod\" : \"Corner Shelf\";\r\n break;\r\n default:\r\n break;\r\n }\r\n this.callMetaMathesFailedPopup(item, nonCompatibleWith);\r\n } else if (item.part.partId === \"vanity_sink\" && this.state.parentNavigationItem.part.faucet.placeholderChanged\r\n && this.state.parentNavigationItem.part.faucet.activeFeature) {\r\n const sinkSizeConditionValue = item.part.metaData[\"SinkSize\"] ? item.part.metaData[\"SinkSize\"][0] : null;\r\n if (sinkSizeConditionValue && !this.state.parentNavigationItem.part.faucet.activeFeature.matchesMetaForCondition('SinkSize', sinkSizeConditionValue)) {\r\n this.callMetaMathesFailedPopup(item, 'faucet');\r\n } else {\r\n this.itemClick(item, ignoreLocked)\r\n }\r\n } else if (item.part.partId === \"toilet\") {\r\n const vanity = layout.parts[Vanity.id];\r\n const counterTopSize = vanity.counterTopSize(item.part);\r\n if (counterTopSize === \"60in\" || counterTopSize === \"72in\") {\r\n this.callToiletFailPopup('toilet', item, ignoreLocked)\r\n } else {\r\n this.itemClick(item, ignoreLocked)\r\n }\r\n } else if (item.part.partId === \"vanity_cabinet\") {\r\n // let toilet = layout.parts[Toilet.id];\r\n // if (toilet) {\r\n // toilet = toilet.toilet; // toiletBody\r\n // }\r\n // const counterTopSize = item.part.vanitySize + 'in';\r\n // const vanity = layout.parts[Vanity.id];\r\n // const currentCounterTopSize = vanity.counterTopSize(item.part);\r\n // if (toilet && toilet.placeholderChanged && (counterTopSize === \"60in\" || counterTopSize === \"72in\")\r\n // && (currentCounterTopSize !== \"60in\" && currentCounterTopSize !== \"72in\")) {\r\n // this.callToiletFailPopup('vanity', item, ignoreLocked)\r\n // } else {\r\n // this.itemClick(item, ignoreLocked)\r\n // }\r\n this.itemClick(item, ignoreLocked);\r\n if (this.props.fabricatorSettings\r\n && (this.props.fabricatorSettings.wizardConsumers || (this.props.fabricatorSettings.wizardClients && document.kvConfig.isBackend))\r\n ) {\r\n if (!featureIsLocked && !item.part.partName.includes(\"laceholder\")) {\r\n this.setWizardFiltersFromActiveItem(item.part)\r\n }\r\n }\r\n } else if (item.part.partId === \"shower_interior_wall\") {\r\n if (!featureIsLocked && !item.part.partName.includes(\"laceholder\")) {\r\n this.setWizardFiltersFromActiveItem(item.part)\r\n }\r\n this.itemClick(item, ignoreLocked)\r\n } else {\r\n this.itemClick(item, ignoreLocked)\r\n }\r\n\r\n this.props.setActiveFeature(item.part);\r\n\r\n const canvasClass = this.state.childNavigationItem\r\n ? this.state.parentNavigationItem.text + '-' + this.state.childNavigationItem.text\r\n : this.state.parentNavigationItem.text;\r\n\r\n if (!window.canvasIsDragging) {\r\n this.props.setCanvasClass(canvasClass.toLowerCase().replace(/ /g, \"-\"));\r\n }\r\n\r\n if (this.state.parentNavigationItem) { // update canvas only if it is child\r\n this.props.refreshCB();\r\n }\r\n };\r\n\r\n handleSubPartClick = subNavigationItem => { // sidebar list item click\r\n const subItemPart = subNavigationItem.part;\r\n subItemPart.getParent().handleSubPartClick(subItemPart);\r\n this.setState({\r\n childNavigationItem: subNavigationItem,\r\n showFilterSelection: subItemPart.allFeaturesReceived, // show filters only if subItemPart has all features\r\n showerWallWizardGroupsSelected: false,\r\n searchText: \"\"\r\n }, () => {\r\n this.scrollContentToTop();\r\n this.rememberWallsSelection();\r\n this.checkIfAllFeaturesReceived(subNavigationItem, \"childNavigationItem\");\r\n });\r\n /*set new materials page subIndex*/\r\n this.setActivePartRelatedItemIndex(subNavigationItem);\r\n // console.log('subItemPart', subItemPart);\r\n if ((subItemPart.getParent() && subItemPart.getParent().partName === \"Walls\")\r\n || subItemPart.partName === \"Accent Wall\" && !window.canvasIsDragging) {\r\n this.props.setCanvasClass(subNavigationItem.text.toLowerCase().replace(/ /g, \"-\"));\r\n }\r\n this.setNewActiveFeature(subNavigationItem);\r\n };\r\n\r\n render() {\r\n const layout = getCurrentLayout();\r\n const activePart = this.state.parentNavigationItem ? this.state.parentNavigationItem.part : null;\r\n const activeSubPart = this.state.childNavigationItem ? this.state.childNavigationItem.part : null;\r\n const activeNavPart = activeSubPart || activePart;\r\n const parentItems = layout.designNavigationItems(); // parent list without filters\r\n const allFeaturesReceived = activeNavPart && activeNavPart.allFeaturesReceived;\r\n\r\n // console.log('activePart', activePart);\r\n // console.log('activeSubPart', activeSubPart);\r\n // console.log('activePart.subTypes()', activePart && activePart.subTypes());\r\n // console.log('this.state.childNavigationItemv1111', this.state.childNavigationItem);\r\n\r\n let useWizard = false;\r\n let wizardGroups = [];\r\n if (this.props.fabricatorSettings\r\n && (this.props.fabricatorSettings.wizardConsumers || (this.props.fabricatorSettings.wizardClients && document.kvConfig.isBackend))\r\n && this.state.contentType === ContentType.Design && activeSubPart && activeSubPart.canUseWizard && activeSubPart.allFeaturesReceived) {\r\n useWizard = true;\r\n wizardGroups = this.state[this.getWizardGroupsByPartId(this.state.childNavigationItem.part.partId)];\r\n }\r\n\r\n const features = this.getFeatures(layout);\r\n\r\n const showLockedView = this.currentActiveItemIsLocked(useWizard);\r\n\r\n const useFilters = (activePart && activePart.partId === \"kitchen_floor\" && activePart.allFeaturesReceived)\r\n || (activeSubPart && (this.isWallItem(activeSubPart) || activeSubPart.partId === \"accent_wall\"\r\n || activeSubPart.partId === \"shower_wall_accent\") && activeSubPart.allFeaturesReceived);\r\n\r\n const filterSelectionHasValues = activeNavPart && FilterSelection.getAvailableFilterValues(\r\n this.props.filterGroups, \"Material\", activeNavPart, this.props.fabricatorData\r\n ).length;\r\n\r\n const itemIsSelected = (!this.props.fabricatorSettings.leadCapture\r\n || (activeSubPart && activeSubPart.activeFeature && activeSubPart.firstClick[this.props.activeQuoteIndex] && activeSubPart.placeholderChanged));\r\n\r\n const useKVWizard = false;\r\n //TODO change it when BE is ready\r\n\r\n const showNavigationFilters = useKVWizard &&activeNavPart\r\n // && this.props.activeNavigationFilter !== CABINET_WIZARD_BUTTONS[0].buttonId\r\n && activeNavPart.canUseNavigationFilter && activeNavPart.canUseNavigationFilter();\r\n\r\n let showNavigationFiltersSteps = false;\r\n if (useKVWizard && activeNavPart && activeNavPart.canUseNavigationFilterSteps\r\n && activeNavPart.canUseNavigationFilterSteps()) {\r\n showNavigationFiltersSteps = !this.props.countertopNavigationFilterCompleted;\r\n }\r\n\r\n const isCountertop = activeSubPart && COUNTERTOP_GROUP_BATHROOM.includes(activeSubPart.partId);\r\n // console.log(\"isCountertop\", isCountertop);\r\n\r\n return (\r\n */}\r\n {this.getGliaImage()}\r\n
\r\n );\r\n }\r\n}\r\n","const layouts = {\r\n Large: {\r\n Background: 100,\r\n Floor: 600,\r\n Ceiling: 200,\r\n Wall_A: 300,\r\n Wall_B: 400,\r\n Wall_C: 500,\r\n Wall_A_Accent_Mask: 700,\r\n Global_Shadow_Overlay: 800,\r\n Window_Default: 900,\r\n Window_Covering: 1000,\r\n Ceiling_Lights: 1100,\r\n Wall_Lights: 1300,\r\n Towel_Rack: 1400,\r\n Shower: {\r\n Custom60in: {\r\n Body: 2000,\r\n Floor: 2004,\r\n ShowerDrain: 2005,\r\n FloorShadow: 2006,\r\n ExtrusionWallRight: 2010,\r\n ExtrusionWallRightShadow: 2011,\r\n Wall: 2020,\r\n Wall2: 2021,\r\n WallAccent: 2022,\r\n WallAccent2: 2023,\r\n WallShadow: 2024,\r\n LargeCornerCaddie: 2025,\r\n Fixture: 2031,\r\n ShowerHead: 2032,\r\n ShowerPanCombo: 2033,\r\n LargeCornerSeat: 2034,\r\n CornerCaddie: 2035,\r\n SoapDish: 2036,\r\n SmallCornerShelf: 2038,\r\n GrabBar: 2039,\r\n ExtrusionWallLeftHalfWall: 2041,\r\n ExtrusionWallLeftShadowHalfWall: 2042,\r\n Threshold: 2043,\r\n ThresholdShadow: 2044,\r\n ShowerDoor: 2045,\r\n ShowerDoorHandle: 2046,\r\n ExtrusionWallLeft: 2047,\r\n ExtrusionWallLeftShadow: 2048,\r\n Overlay: 2050,\r\n Glass: 2060,\r\n PonyWall: 2070,\r\n PonyWallShadow: 2071,\r\n PonyWallCap: 5025,\r\n PonyWallCapShadow: 5026,\r\n PonyWallGlass: 5027,\r\n },\r\n Steam60in: {\r\n ExtrusionWallLeft: 2500,\r\n Body: {\r\n 0: 2550, // default body (no parts)\r\n 1: 2520, // Part = 1\r\n 2: 2530, // Part = 2\r\n },\r\n Fixture: 2525,\r\n Overlay: 2600\r\n },\r\n TubCombo: {\r\n WallConfiguration: 2065,\r\n Liner: 2027,\r\n ReplacementTub: 2028,\r\n WalkInTub: 2029,\r\n JettedTub: 2030,\r\n },\r\n },\r\n BathTub: {\r\n FreeStanding: {\r\n FixtureFloorMount: 3000,\r\n Base: 3005,\r\n Fixture: 3010,\r\n },\r\n Custom60in: {\r\n FixtureFloorMount: 3500,\r\n Base: 3505,\r\n Spa: 3515,\r\n Top: 3525,\r\n Fixture: 3530\r\n }\r\n },\r\n Toilet: 4000,\r\n Vanity: {\r\n Custom: {\r\n Cabinet: 5000,\r\n Handle: 5010,\r\n VanityBacksplash: 5020,\r\n CounterTop: 5030,\r\n Mirror: 5040,\r\n Faucet: 5050,\r\n Sink: 5060,\r\n },\r\n Complete: {\r\n VanityBacksplash: 5500,\r\n Faucet: 5510,\r\n Cabinet: 5520,\r\n Mirror: 5530,\r\n }\r\n }\r\n },\r\n Small: {\r\n Background: 100,\r\n Floor: 450,\r\n Ceiling: 200,\r\n Wall_A: 300,\r\n Wall_B: 400,\r\n Wall_C: 500,\r\n Wall_A_Accent_Mask: 700,\r\n Global_Shadow_Overlay: 800,\r\n Window_Default: 900,\r\n Window_Covering: 1000,\r\n Ceiling_Lights: 1100,\r\n Wall_Lights: 1300,\r\n Towel_Rack: 1400,\r\n Shower: {\r\n Custom60in: {\r\n Body: 2000,\r\n Floor: 2004,\r\n ShowerDrain: 2005,\r\n FloorShadow: 2006,\r\n ExtrusionWallRight: 2010,\r\n ExtrusionWallRightShadow: 2011,\r\n Wall: 2020,\r\n Wall2: 2021,\r\n WallAccent: 2022,\r\n WallAccent2: 2023,\r\n WallShadow: 2024,\r\n LargeCornerCaddie: 2025,\r\n Fixture: 2031,\r\n ShowerHead: 2032,\r\n ShowerPanCombo: 2033,\r\n LargeCornerSeat: 2034,\r\n CornerCaddie: 2035,\r\n SoapDish: 2036,\r\n SmallCornerShelf: 2038,\r\n GrabBar: 2039,\r\n ExtrusionWallLeftHalfWall: 2041,\r\n ExtrusionWallLeftShadowHalfWall: 2042,\r\n Threshold: 2043,\r\n ThresholdShadow: 2044,\r\n ShowerDoor: 2045,\r\n ShowerDoorHandle: 2046,\r\n ExtrusionWallLeft: 2047,\r\n ExtrusionWallLeftShadow: 2048,\r\n Overlay: 2050,\r\n Glass: 2060,\r\n PonyWall: 2070,\r\n PonyWallShadow: 2071,\r\n PonyWallCap: 5025,\r\n PonyWallCapShadow: 5026,\r\n PonyWallGlass: 5027,\r\n },\r\n Steam60in: {\r\n ExtrusionWallLeft: 2500,\r\n Body: {\r\n 0: 2550, // default body (no parts)\r\n 1: 2520, // Part = 1\r\n 2: 2530, // Part = 2\r\n },\r\n Fixture: 2525,\r\n Overlay: 2600\r\n },\r\n TubCombo: {\r\n WallConfiguration: 2065,\r\n Liner: 2027,\r\n ReplacementTub: 2028,\r\n WalkInTub: 2029,\r\n JettedTub: 2030,\r\n },\r\n },\r\n BathTub: {\r\n FreeStanding: {\r\n FixtureFloorMount: 3000,\r\n Base: 3005,\r\n Fixture: 3010,\r\n },\r\n Custom60in: {\r\n FixtureFloorMount: 3500,\r\n Base: 3505,\r\n Spa: 3515,\r\n Top: 3525,\r\n Fixture: 3530\r\n }\r\n },\r\n Toilet: 4000,\r\n Vanity: {\r\n Custom: {\r\n Cabinet: 5000,\r\n Handle: 5010,\r\n VanityBacksplash: 5020,\r\n CounterTop: 5030,\r\n Mirror: 5040,\r\n Faucet: 5050,\r\n Sink: 5060,\r\n },\r\n Complete: {\r\n VanityBacksplash: 5500,\r\n Faucet: 5510,\r\n Cabinet: 5520,\r\n Mirror: 5530,\r\n }\r\n }\r\n }\r\n};\r\n\r\nexport default {\r\n layouts,\r\n getMenuByHoveredLayer: (currentLayout, layer) => {\r\n\r\n // console.log('currentLayout', currentLayout);\r\n // console.log('layer', layer);\r\n\r\n switch (layer.zIndex) {\r\n\r\n // General\r\n case layouts[currentLayout].Floor:\r\n return {\r\n parent: \"Floor\",\r\n child: \"Floor\"\r\n };\r\n case layouts[currentLayout].Ceiling:\r\n return \"Ceiling\";\r\n case layouts[currentLayout].Toilet:\r\n return {\r\n parent: \"Toilet\",\r\n child: \"Toilet\"\r\n };\r\n case layouts[currentLayout].Window_Default:\r\n return \"Window\";\r\n\r\n // case layouts[currentLayout].Shower.Steam60in.ExtrusionWallLeft:\r\n // case layouts[currentLayout].Shower.Steam60in.Body[\"1\"]:\r\n // case layouts[currentLayout].Shower.Steam60in.Body[\"2\"]:\r\n // case layouts[currentLayout].Shower.Steam60in.Fixture:\r\n // return {\r\n // parent: \"Shower\",\r\n // child: \"Shower Body\"\r\n // };\r\n case layouts[currentLayout].Wall_A:\r\n return {\r\n parent: \"Walls\",\r\n child: \"Wall A\"\r\n };\r\n case layouts[currentLayout].Wall_C:\r\n return {\r\n parent: \"Walls\",\r\n child: \"Wall C\"\r\n };\r\n case layouts[currentLayout].Shower.Custom60in.ExtrusionWallRight:\r\n return {\r\n parent: \"Walls\",\r\n child: \"Right Shower Wall\"\r\n };\r\n case layouts[currentLayout].Vanity.Custom.Mirror:\r\n return {\r\n parent: \"Vanity\",\r\n child: \"Mirror\"\r\n };\r\n case layouts[currentLayout].Shower.Custom60in.ExtrusionWallLeft:\r\n case layouts[currentLayout].Shower.Custom60in.ExtrusionWallLeftHalfWall:\r\n case layouts[currentLayout].Shower.Custom60in.PonyWall:\r\n return \"left_wall_custom\";\r\n case layouts[currentLayout].Vanity.Custom.VanityBacksplash:\r\n case layouts[currentLayout].Wall_A_Accent_Mask:\r\n case layouts[currentLayout].Wall_B:\r\n return \"wall_b_custom\";\r\n case layouts[currentLayout].Vanity.Complete.Cabinet:\r\n case layouts[currentLayout].Vanity.Custom.Handle:\r\n case layouts[currentLayout].Vanity.Custom.CounterTop:\r\n case layouts[currentLayout].Vanity.Custom.Faucet:\r\n case layouts[currentLayout].Vanity.Custom.Sink:\r\n case layouts[currentLayout].Vanity.Custom.Cabinet:\r\n return \"vanity_custom\";\r\n\r\n case layouts[currentLayout].Shower.Custom60in.Threshold:\r\n return {\r\n parent: \"Shower\",\r\n child: \"Threshold\"\r\n };\r\n case layouts[currentLayout].Shower.Custom60in.WallAccent:\r\n case layouts[currentLayout].Shower.Custom60in.WallAccent2:\r\n return {\r\n parent: \"Shower\",\r\n child: \"Shower Walls Accent\"\r\n };\r\n case layouts[currentLayout].Shower.Custom60in.CornerCaddie:\r\n return {\r\n parent: \"Shower Accessories\",\r\n child: \"Corner Caddie\"\r\n };\r\n case layouts[currentLayout].Shower.Custom60in.LargeCornerCaddie:\r\n return {\r\n parent: \"Shower Accessories\",\r\n child: \"Large Corner Caddie\"\r\n };\r\n case layouts[currentLayout].Shower.Custom60in.LargeCornerSeat:\r\n return {\r\n parent: \"Shower Accessories\",\r\n child: \"Large Corner Seat\"\r\n };\r\n case layouts[currentLayout].Shower.Custom60in.SoapDish:\r\n return {\r\n parent: \"Shower Accessories\",\r\n child: \"Soap Dish\"\r\n };\r\n case layouts[currentLayout].Shower.Custom60in.SmallCornerShelf:\r\n return {\r\n parent: \"Shower Accessories\",\r\n child: \"Small Corner Shelf\"\r\n };\r\n case layouts[currentLayout].Shower.Custom60in.GrabBar:\r\n return {\r\n parent: \"Shower Accessories\",\r\n child: \"Grab Bar\"\r\n };\r\n case layouts[currentLayout].Shower.Custom60in.Glass:\r\n case layouts[currentLayout].Shower.Custom60in.Floor:\r\n case layouts[currentLayout].Shower.Custom60in.ShowerPanCombo:\r\n case layouts[currentLayout].Shower.Custom60in.Wall:\r\n case layouts[currentLayout].Shower.Custom60in.Wall2:\r\n case layouts[currentLayout].Shower.Custom60in.Fixture:\r\n case layouts[currentLayout].Shower.Custom60in.ShowerHead:\r\n case layouts[currentLayout].Shower.Custom60in.Body:\r\n case layouts[currentLayout].Shower.Custom60in.Overlay:\r\n case layouts[currentLayout].Shower.Custom60in.ShowerDoor:\r\n case layouts[currentLayout].Shower.Custom60in.ShowerDoorHandle:\r\n case layouts[currentLayout].Shower.Steam60in.ExtrusionWallLeft:\r\n case layouts[currentLayout].Shower.Steam60in.Body[\"1\"]:\r\n case layouts[currentLayout].Shower.Steam60in.Body[\"2\"]:\r\n case layouts[currentLayout].Shower.Steam60in.Fixture:\r\n return \"shower_custom\";\r\n // BathTub\r\n case layouts[currentLayout].BathTub.Custom60in.Top:\r\n case layouts[currentLayout].BathTub.Custom60in.Spa:\r\n case layouts[currentLayout].BathTub.Custom60in.Base:\r\n case layouts[currentLayout].BathTub.FreeStanding.Base:\r\n case layouts[currentLayout].BathTub.FreeStanding.Fixture:\r\n case layouts[currentLayout].BathTub.FreeStanding.FixtureFloorMount:\r\n case layouts[currentLayout].BathTub.Custom60in.Fixture:\r\n case layouts[currentLayout].BathTub.Custom60in.FixtureFloorMount:\r\n return \"bathtub_custom\";\r\n // BathTub\r\n case layouts[currentLayout].Shower.TubCombo.Liner:\r\n case layouts[currentLayout].Shower.TubCombo.ReplacementTub:\r\n case layouts[currentLayout].Shower.TubCombo.WalkInTub:\r\n case layouts[currentLayout].Shower.TubCombo.JettedTub:\r\n case layouts[currentLayout].Shower.TubCombo.WallConfiguration:\r\n return \"shower_combo\";\r\n // BathTub\r\n case layouts[currentLayout].Shower.Custom60in.PonyWallCap:\r\n case layouts[currentLayout].Shower.Custom60in.PonyWallGlass:\r\n return \"shower_pony_wall\";\r\n default:\r\n return \"\"\r\n }\r\n },\r\n getLayerDimensions: (zIndex, currentLayout) => {\r\n switch (zIndex) {\r\n // General\r\n case layouts[currentLayout].Floor:\r\n return {\r\n polygonArray: [[80,770],[1620,770],[1620,1080],[80,1080]],\r\n width: 1540,\r\n height: 310\r\n };\r\n case layouts[currentLayout].Ceiling:\r\n return {\r\n polygonArray: [[0,0],[1620,0],[1620,320],[0,320]],\r\n width: 1620,\r\n height: 320\r\n };\r\n case layouts[currentLayout].Toilet:\r\n return {\r\n polygonArray: [[500,640],[820,640],[820,960],[500,960]],\r\n width: 320,\r\n height: 320\r\n };\r\n case layouts[currentLayout].Window_Default:\r\n case layouts[currentLayout].Window_Covering:\r\n return {\r\n polygonArray: [[1200,240],[1400,240],[1400,780],[1200,780]],\r\n width: 200,\r\n height: 540\r\n };\r\n case layouts[currentLayout].Shower.Steam60in.ExtrusionWallLeft:\r\n case layouts[currentLayout].Shower.Steam60in.Body[\"1\"]:\r\n case layouts[currentLayout].Shower.Steam60in.Body[\"2\"]:\r\n case layouts[currentLayout].Shower.Steam60in.Fixture:\r\n case layouts[currentLayout].Shower.Custom60in.ExtrusionWallRight:\r\n case layouts[currentLayout].Shower.Custom60in.ExtrusionWallLeft:\r\n case layouts[currentLayout].Shower.Custom60in.ExtrusionWallLeftHalfWall:\r\n case layouts[currentLayout].Shower.Custom60in.PonyWall:\r\n case layouts[currentLayout].Shower.Custom60in.Threshold:\r\n case layouts[currentLayout].Shower.Custom60in.Glass:\r\n case layouts[currentLayout].Shower.Custom60in.Floor:\r\n case layouts[currentLayout].Shower.Custom60in.ShowerPanCombo:\r\n case layouts[currentLayout].Shower.Custom60in.Wall:\r\n case layouts[currentLayout].Shower.Custom60in.Wall2:\r\n case layouts[currentLayout].Shower.Custom60in.WallAccent:\r\n case layouts[currentLayout].Shower.Custom60in.WallAccent2:\r\n case layouts[currentLayout].Shower.Custom60in.Fixture:\r\n case layouts[currentLayout].Shower.Custom60in.ShowerHead:\r\n case layouts[currentLayout].Shower.Custom60in.Body:\r\n case layouts[currentLayout].Shower.Custom60in.Overlay:\r\n case layouts[currentLayout].Shower.Custom60in.ShowerDoor:\r\n case layouts[currentLayout].Shower.Custom60in.ShowerDoorHandle:\r\n case layouts[currentLayout].Shower.Custom60in.PonyWallCap:\r\n case layouts[currentLayout].Shower.Custom60in.PonyWallGlass:\r\n case layouts[currentLayout].Shower.Custom60in.SoapDish:\r\n case layouts[currentLayout].Shower.Custom60in.LargeCornerSeat:\r\n case layouts[currentLayout].Shower.Custom60in.LargeCornerCaddie:\r\n case layouts[currentLayout].Shower.Custom60in.CornerCaddie:\r\n case layouts[currentLayout].Shower.Custom60in.SmallCornerShelf:\r\n case layouts[currentLayout].Shower.Custom60in.GrabBar:\r\n case layouts[currentLayout].Shower.TubCombo.Liner:\r\n case layouts[currentLayout].Shower.TubCombo.ReplacementTub:\r\n case layouts[currentLayout].Shower.TubCombo.WalkInTub:\r\n case layouts[currentLayout].Shower.TubCombo.JettedTub:\r\n case layouts[currentLayout].Shower.TubCombo.WallConfiguration:\r\n return {\r\n polygonArray: [[570,0],[1500,0],[1540,1080],[570,1080]],\r\n width: 970,\r\n height: 1080\r\n };\r\n case layouts[currentLayout].Wall_A:\r\n return {\r\n polygonArray: [[0,0],[130,0],[130,1080],[0,1080]],\r\n width: 130,\r\n height: 1080\r\n };\r\n case layouts[currentLayout].Wall_A_Accent_Mask:\r\n return {\r\n polygonArray: [[90,120],[700,120],[700,690],[90,690]],\r\n width: 610,\r\n height: 570\r\n };\r\n case layouts[currentLayout].Wall_C:\r\n return {\r\n polygonArray: [[900,0],[1620,0],[1620,1080],[900,1080]],\r\n width: 720,\r\n height: 1080\r\n };\r\n case layouts[currentLayout].Wall_B:\r\n return {\r\n polygonArray: [[80,140],[1080,140],[1080,990],[80,990]],\r\n width: 1000,\r\n height: 850\r\n };\r\n case layouts[currentLayout].Vanity.Custom.Mirror:\r\n return {\r\n polygonArray: [[80,170],[700,170],[700,630],[80,630]],\r\n width: 620,\r\n height: 460\r\n };\r\n case layouts[currentLayout].Vanity.Custom.VanityBacksplash:\r\n return {\r\n polygonArray: [[80,580],[700,580],[700,680],[80,680]],\r\n width: 620,\r\n height: 100\r\n };\r\n case layouts[currentLayout].Vanity.Custom.CounterTop:\r\n return {\r\n polygonArray: [[80,610],[770,610],[770,710],[80,710]],\r\n width: 690,\r\n height: 100\r\n };\r\n case layouts[currentLayout].Vanity.Custom.Faucet:\r\n case layouts[currentLayout].Vanity.Custom.Sink:\r\n return {\r\n polygonArray: [[80,500],[700,500],[700,710],[80,710]],\r\n width: 620,\r\n height: 210\r\n };\r\n case layouts[currentLayout].Vanity.Complete.Cabinet:\r\n case layouts[currentLayout].Vanity.Custom.Handle:\r\n case layouts[currentLayout].Vanity.Custom.Cabinet:\r\n return {\r\n polygonArray: [[80,500],[780,500],[780,1070],[80,1070]],\r\n width: 700,\r\n height: 570\r\n };\r\n // BathTub\r\n case layouts[currentLayout].BathTub.Custom60in.Top:\r\n case layouts[currentLayout].BathTub.Custom60in.Spa:\r\n case layouts[currentLayout].BathTub.Custom60in.Base:\r\n case layouts[currentLayout].BathTub.FreeStanding.Base:\r\n case layouts[currentLayout].BathTub.FreeStanding.Fixture:\r\n case layouts[currentLayout].BathTub.FreeStanding.FixtureFloorMount:\r\n case layouts[currentLayout].BathTub.Custom60in.Fixture:\r\n case layouts[currentLayout].BathTub.Custom60in.FixtureFloorMount:\r\n return {\r\n polygonArray: [[750,580],[1620,580],[1620,1080],[750,1080]],\r\n width: 870,\r\n height: 500\r\n };\r\n default:\r\n return null\r\n }\r\n }\r\n}\r\n\r\n\r\n","import {LayoutAbbreviation, LayoutType} from \"./constants\";\r\nimport {UseFullSizeImages} from \"../../../config\";\r\n\r\nlet layouts = {};\r\nObject.keys(LayoutType).forEach(layoutName => {\r\n layouts[layoutName] = {\r\n Background: {\r\n BackgroundBG: 100,\r\n Floor: 200,\r\n LeftWall: 300,\r\n ShowerWall: 400,\r\n RightWall: 550,\r\n CenterWall: 600,\r\n },\r\n ShowerWallAccent: 1000,\r\n Accessories: {\r\n WindowBody: 1000,\r\n WindowKits: 1100,\r\n LargeCornerCaddie: 2010,\r\n LargeCornerCaddie2: 2020,\r\n Fixture: 2100,\r\n LargeCornerSeat: 3330,\r\n LargeCornerSeat2: 3340,\r\n CornerCaddie: 2410,\r\n CornerCaddie2: 2420,\r\n SoapDish: 2500,\r\n SoapDish2: 2510,\r\n SoapDish3: 2520,\r\n SmallCornerShelf: 2600,\r\n GrabBar: 3500, // more that the fixture\r\n GrabBar2: 3510,\r\n GrabBar3: 3520,\r\n CornerShelf1: 2810,\r\n CornerShelf2: 2820,\r\n CornerShelf3: 2830,\r\n CornerShelf4: 2840,\r\n CornerShelf5: 2850,\r\n CornerShelf6: 2860,\r\n ShowerPod: 2900,\r\n LargeShelf: 2905,\r\n ShampooShelf: 2902,\r\n Seats: 3320,\r\n ShowerRod: 4200,\r\n TowelBar: 4250,\r\n },\r\n Shower: {\r\n ShowerPan: 3200,\r\n ShowerPanCombo: 3300,\r\n ShowerHead: 3350,\r\n ShowerFixture: 3410,\r\n ShowerFixture2: 3420,\r\n ShowerDoorHandle: 3600,\r\n // Threshold\r\n TubCombo: {\r\n WallConfiguration: 3600,\r\n Liner: 3700,\r\n ReplacementTub: 3800,\r\n WalkInTub: 3900,\r\n JettedTub: 4000,\r\n },\r\n ShowerDoor: 4100,\r\n ShowerDoor2: 4110,\r\n },\r\n Walls: {\r\n LeftWall: 4800,\r\n CeilingPanels: 4050, // less than shower doors\r\n RightWall: 4900,\r\n },\r\n Toilet: 5000,\r\n PaperHolder: 5050,\r\n Vanity: {\r\n Cabinet: 6000,\r\n Handle: 6100,\r\n CounterTop: 6200,\r\n VanityBacksplash: 6300,\r\n Mirror: 6400,\r\n Faucet: 6500,\r\n Sink: 6600,\r\n },\r\n Globals: {\r\n ToiletPaper: 8000,\r\n ToiletPaperHolder: 8050,\r\n Towel: 8100,\r\n LightFixture: 8200,\r\n LampFixture: 8250,\r\n DecorWindow: 8300,\r\n DecorSeat: 8400,\r\n },\r\n Bathtub: {\r\n BathTubFixture: 9000,\r\n BathTubBody: 9100,\r\n }\r\n };\r\n});\r\n\r\nlayouts[\"Layout4\"].Vanity = {\r\n Cabinet: 10000,\r\n Handle: 10100,\r\n CounterTop: 10200,\r\n VanityBacksplash: 10300,\r\n Mirror: 10400,\r\n Faucet: 10500,\r\n Sink: 10600,\r\n};\r\nlayouts[\"Layout4\"].Globals.DecorWindow = 1200;\r\nlayouts[\"Layout4\"].Toilet = 15000;\r\nlayouts[\"Layout4\"].Globals.DecorSeat = 18000;\r\nlayouts[\"Layout4\"].Globals.LightFixture = 19000;\r\nlayouts[\"Layout4\"].Globals.LampFixture = 19100;\r\nlayouts[\"Layout4\"].Globals.ToiletPaperHolder = 20000;\r\nlayouts[\"Layout4\"].PaperHolder = 20000;\r\n\r\n\r\nconst getLayerDimensions = (zIndex, currentLayout) => {\r\n const fullImagesFactor = UseFullSizeImages ? 177.77 : 100;\r\n const sizeFactor = fullImagesFactor / 100;\r\n switch (zIndex) {\r\n // case layouts[currentLayout].Background.ShowerWall:\r\n // return {\r\n // polygonArray: [[sizeFactor*350,sizeFactor*50],[sizeFactor*950,sizeFactor*50],[sizeFactor*950,sizeFactor*930],[sizeFactor*350,sizeFactor*930]],\r\n // width: sizeFactor*600,\r\n // height: sizeFactor*900\r\n // };\r\n case layouts[currentLayout].Shower.ShowerFixture:\r\n case layouts[currentLayout].Shower.ShowerFixture2:\r\n case layouts[currentLayout].Shower.ShowerDoorHandle:\r\n case layouts[currentLayout].Shower.ShowerHead:\r\n case layouts[currentLayout].ShowerWallAccent:\r\n case layouts[currentLayout].Accessories.Fixture:\r\n case layouts[currentLayout].Accessories.LargeCornerSeat:\r\n case layouts[currentLayout].Accessories.LargeCornerSeat2:\r\n case layouts[currentLayout].Accessories.CornerCaddie:\r\n case layouts[currentLayout].Accessories.CornerCaddie2:\r\n case layouts[currentLayout].Accessories.SoapDish:\r\n case layouts[currentLayout].Accessories.SoapDish2:\r\n case layouts[currentLayout].Accessories.SoapDish3:\r\n case layouts[currentLayout].Accessories.SmallCornerShelf:\r\n case layouts[currentLayout].Accessories.GrabBar:\r\n case layouts[currentLayout].Accessories.GrabBar2:\r\n case layouts[currentLayout].Accessories.GrabBar3:\r\n case layouts[currentLayout].Accessories.CornerShelf1:\r\n case layouts[currentLayout].Accessories.CornerShelf2:\r\n case layouts[currentLayout].Accessories.CornerShelf3:\r\n case layouts[currentLayout].Accessories.CornerShelf4:\r\n case layouts[currentLayout].Accessories.CornerShelf5:\r\n case layouts[currentLayout].Accessories.CornerShelf6:\r\n case layouts[currentLayout].Accessories.ShowerPod:\r\n case layouts[currentLayout].Accessories.LargeShelf:\r\n case layouts[currentLayout].Accessories.Seats:\r\n case layouts[currentLayout].Accessories.ShowerRod:\r\n case layouts[currentLayout].Accessories.WindowBody:\r\n case layouts[currentLayout].Accessories.WindowKits: {\r\n switch (currentLayout) {\r\n case LayoutAbbreviation.Layout1: {\r\n return {\r\n polygonArray: [[sizeFactor*350,sizeFactor*130],[sizeFactor*950,sizeFactor*130],[sizeFactor*950,sizeFactor*930],[sizeFactor*350,sizeFactor*930]],\r\n width: sizeFactor*600,\r\n height: sizeFactor*800\r\n };\r\n }\r\n case LayoutAbbreviation.Layout4: {\r\n return {\r\n polygonArray: [[sizeFactor*560,0],[sizeFactor*1240,0],[sizeFactor*1240,sizeFactor*930],[sizeFactor*560,sizeFactor*930]],\r\n width: sizeFactor*580,\r\n height: sizeFactor*930\r\n };\r\n }\r\n }\r\n return null;\r\n }\r\n case layouts[currentLayout].Shower.ShowerDoor:\r\n case layouts[currentLayout].Shower.ShowerDoor2: {\r\n switch (currentLayout) {\r\n case LayoutAbbreviation.Layout1: {\r\n return {\r\n polygonArray: [[sizeFactor*350,0],[sizeFactor*950,0],[sizeFactor*950,sizeFactor*930],[sizeFactor*350,sizeFactor*930]],\r\n width: sizeFactor*600,\r\n height: sizeFactor*800\r\n };\r\n }\r\n case LayoutAbbreviation.Layout4: {\r\n return {\r\n polygonArray: [[sizeFactor*560,0],[sizeFactor*1240,0],[sizeFactor*1240,sizeFactor*930],[sizeFactor*560,sizeFactor*930]],\r\n width: sizeFactor*580,\r\n height: sizeFactor*930\r\n };\r\n }\r\n }\r\n return null;\r\n }\r\n case layouts[currentLayout].Accessories.LargeCornerCaddie:\r\n case layouts[currentLayout].Accessories.LargeCornerCaddie2: {\r\n switch (currentLayout) {\r\n case LayoutAbbreviation.Layout1: {\r\n return {\r\n polygonArray: [[sizeFactor*350,sizeFactor*30],[sizeFactor*950,sizeFactor*30],[sizeFactor*950,sizeFactor*930],[sizeFactor*350,sizeFactor*930]],\r\n width: sizeFactor*600,\r\n height: sizeFactor*900\r\n };\r\n }\r\n case LayoutAbbreviation.Layout4: {\r\n return {\r\n polygonArray: [[sizeFactor*560,0],[sizeFactor*1240,0],[sizeFactor*1240,sizeFactor*930],[sizeFactor*560,sizeFactor*930]],\r\n width: sizeFactor*580,\r\n height: sizeFactor*930\r\n };\r\n }\r\n }\r\n return null;\r\n }\r\n case layouts[currentLayout].Shower.Shower:\r\n case layouts[currentLayout].Shower.ShowerPanCombo: {\r\n switch (currentLayout) {\r\n case LayoutAbbreviation.Layout1: {\r\n return {\r\n polygonArray: [[sizeFactor*350,sizeFactor*730],[sizeFactor*950,sizeFactor*730],[sizeFactor*950,sizeFactor*930],[sizeFactor*350,sizeFactor*930]],\r\n width: sizeFactor*600,\r\n height: sizeFactor*200\r\n };\r\n }\r\n case LayoutAbbreviation.Layout4: {\r\n return {\r\n polygonArray: [[sizeFactor*560,sizeFactor*730],[sizeFactor*1260,sizeFactor*730],[sizeFactor*1260,sizeFactor*930],[sizeFactor*560,sizeFactor*930]],\r\n width: sizeFactor*700,\r\n height: sizeFactor*200\r\n };\r\n }\r\n }\r\n return null;\r\n }\r\n case layouts[currentLayout].Shower.TubCombo.WallConfiguration:\r\n case layouts[currentLayout].Shower.TubCombo.Liner:\r\n case layouts[currentLayout].Shower.TubCombo.JettedTub:\r\n case layouts[currentLayout].Shower.TubCombo.ReplacementTub:\r\n case layouts[currentLayout].Shower.TubCombo.WalkInTub:\r\n return {\r\n polygonArray: [[sizeFactor*300,sizeFactor*280],[sizeFactor*1000,sizeFactor*280],[sizeFactor*1000,sizeFactor*1080],[sizeFactor*300,sizeFactor*1080]],\r\n width: sizeFactor*700,\r\n height: sizeFactor*800\r\n };\r\n case layouts[currentLayout].Toilet:\r\n case layouts[currentLayout].PaperHolder: {\r\n switch (currentLayout) {\r\n case LayoutAbbreviation.Layout1: {\r\n return {\r\n polygonArray: [[sizeFactor*700,sizeFactor*500],[sizeFactor*1250,sizeFactor*500],[sizeFactor*1250,sizeFactor*1080],[sizeFactor*700,sizeFactor*1080]],\r\n width: sizeFactor*550,\r\n height: sizeFactor*580\r\n };\r\n }\r\n case LayoutAbbreviation.Layout4: {\r\n return {\r\n polygonArray: [[sizeFactor*100,sizeFactor*500],[sizeFactor*600,sizeFactor*500],[sizeFactor*600,sizeFactor*1080],[sizeFactor*100,sizeFactor*1080]],\r\n width: sizeFactor*500,\r\n height: sizeFactor*580\r\n };\r\n }\r\n }\r\n return null;\r\n }\r\n case layouts[currentLayout].Vanity.Cabinet:\r\n return {\r\n polygonArray: [[sizeFactor*920,sizeFactor*530],[sizeFactor*1920,sizeFactor*530],[sizeFactor*1920,sizeFactor*1080],[sizeFactor*920,sizeFactor*1080]],\r\n width: sizeFactor*1000,\r\n height: sizeFactor*550\r\n };\r\n case layouts[currentLayout].Vanity.CounterTop:\r\n return {\r\n polygonArray: [[sizeFactor*900,sizeFactor*500],[sizeFactor*1920,sizeFactor*500],[sizeFactor*1920,sizeFactor*1080],[sizeFactor*900,sizeFactor*1080]],\r\n width: sizeFactor*1020,\r\n height: sizeFactor*580\r\n };\r\n case layouts[currentLayout].Vanity.Faucet:\r\n case layouts[currentLayout].Vanity.Sink:\r\n case layouts[currentLayout].Vanity.VanityBacksplash: {\r\n switch (currentLayout) {\r\n case LayoutAbbreviation.Layout1: {\r\n return {\r\n polygonArray: [[sizeFactor*900,sizeFactor*400],[sizeFactor*1900,sizeFactor*400],[sizeFactor*1900,sizeFactor*830],[sizeFactor*800,sizeFactor*830]],\r\n width: sizeFactor*1000,\r\n height: sizeFactor*430\r\n };\r\n }\r\n case LayoutAbbreviation.Layout4: {\r\n return {\r\n polygonArray: [[sizeFactor*300,sizeFactor*400],[sizeFactor*730,sizeFactor*400],[sizeFactor*730,sizeFactor*930],[sizeFactor*300,sizeFactor*930]],\r\n width: sizeFactor*430,\r\n height: sizeFactor*530\r\n };\r\n }\r\n }\r\n return null;\r\n }\r\n case layouts[currentLayout].Vanity.Mirror:\r\n switch (currentLayout) {\r\n case LayoutAbbreviation.Layout1: {\r\n return {\r\n polygonArray: [[sizeFactor*1100,0],[sizeFactor*1900,0],[sizeFactor*1900,sizeFactor*640],[sizeFactor*1100,sizeFactor*640]],\r\n width: sizeFactor*800,\r\n height: sizeFactor*640\r\n };\r\n }\r\n case LayoutAbbreviation.Layout4: {\r\n return {\r\n polygonArray: [[sizeFactor*130,100],[sizeFactor*600,100],[sizeFactor*600,sizeFactor*540],[sizeFactor*130,sizeFactor*540]],\r\n width: sizeFactor*470,\r\n height: sizeFactor*440\r\n };\r\n }\r\n }\r\n return null;\r\n case layouts[currentLayout].Walls.CenterWall:\r\n case layouts[currentLayout].Background.CenterWall: {\r\n switch (currentLayout) {\r\n case LayoutAbbreviation.Layout1: {\r\n return null;\r\n }\r\n case LayoutAbbreviation.Layout4: {\r\n return {\r\n polygonArray: [[sizeFactor*360,0],[sizeFactor*760,0],[sizeFactor*760,sizeFactor*880],[sizeFactor*360,sizeFactor*880]],\r\n width: sizeFactor*400,\r\n height: sizeFactor*880\r\n };\r\n }\r\n }\r\n return null;\r\n }\r\n case layouts[currentLayout].Walls.RightWall:\r\n case layouts[currentLayout].Background.RightWall: {\r\n switch (currentLayout) {\r\n case LayoutAbbreviation.Layout1: {\r\n return {\r\n polygonArray: [[sizeFactor*750,0],[sizeFactor*1920,0],[sizeFactor*1920,sizeFactor*1080],[sizeFactor*750,sizeFactor*1080]],\r\n width: sizeFactor*1170,\r\n height: sizeFactor*1080\r\n };\r\n }\r\n case LayoutAbbreviation.Layout4: {\r\n return {\r\n polygonArray: [[sizeFactor*120,0],[sizeFactor*1920,0],[sizeFactor*1920,sizeFactor*930],[sizeFactor*120,sizeFactor*930]],\r\n width: sizeFactor*1900,\r\n height: sizeFactor*930\r\n };\r\n }\r\n }\r\n return null;\r\n }\r\n case layouts[currentLayout].Walls.LeftWall:\r\n case layouts[currentLayout].Background.LeftWall: {\r\n switch (currentLayout) {\r\n case LayoutAbbreviation.Layout1: {\r\n return {\r\n polygonArray: [[0,0],[sizeFactor*600,0],[sizeFactor*600,sizeFactor*1080],[0,sizeFactor*1080]],\r\n width: sizeFactor*600,\r\n height: sizeFactor*1080\r\n };\r\n }\r\n case LayoutAbbreviation.Layout4: {\r\n return {\r\n polygonArray: [[0,0],[sizeFactor*600,0],[sizeFactor*600,sizeFactor*1080],[0,sizeFactor*1080]],\r\n width: sizeFactor*600,\r\n height: sizeFactor*1080\r\n };\r\n }\r\n }\r\n return null;\r\n }\r\n case layouts[currentLayout].Walls.CeilingPanels:\r\n switch (currentLayout) {\r\n case LayoutAbbreviation.Layout1: {\r\n return {\r\n polygonArray: [[sizeFactor*300,0],[sizeFactor*950,0],[sizeFactor*950,sizeFactor*100],[sizeFactor*300,sizeFactor*100]],\r\n width: sizeFactor*650,\r\n height: sizeFactor*100\r\n };\r\n }\r\n case LayoutAbbreviation.Layout4: {\r\n return {\r\n polygonArray: [[sizeFactor*560,0],[sizeFactor*1240,0],[sizeFactor*1240,sizeFactor*930],[sizeFactor*560,sizeFactor*930]],\r\n width: sizeFactor*580,\r\n height: sizeFactor*930\r\n };\r\n }\r\n }\r\n return null;\r\n case layouts[currentLayout].Background.Floor: {\r\n switch (currentLayout) {\r\n case LayoutAbbreviation.Layout1: {\r\n return {\r\n polygonArray: [[sizeFactor*100,sizeFactor*800],[sizeFactor*1300,sizeFactor*800],[sizeFactor*1300,sizeFactor*1080],[sizeFactor*100,sizeFactor*1080]],\r\n width: sizeFactor*1200,\r\n height: sizeFactor*280\r\n };\r\n }\r\n case LayoutAbbreviation.Layout4: {\r\n return {\r\n polygonArray: [[0,sizeFactor*740],[sizeFactor*1920,740],[sizeFactor*1920,sizeFactor*1080],[0,sizeFactor*1080]],\r\n width: sizeFactor*1920,\r\n height: sizeFactor*340\r\n };\r\n }\r\n }\r\n return null;\r\n }\r\n case layouts[currentLayout].Background.ShowerWall:\r\n switch (currentLayout) {\r\n case LayoutAbbreviation.Layout1: {\r\n return {\r\n polygonArray: [[sizeFactor*350,0],[sizeFactor*1650,0],[sizeFactor*1650,sizeFactor*930],[sizeFactor*350,sizeFactor*930]],\r\n width: sizeFactor*1300,\r\n height: sizeFactor*930\r\n };\r\n }\r\n case LayoutAbbreviation.Layout4: {\r\n return {\r\n polygonArray: [[sizeFactor*250,0],[sizeFactor*1250,0],[sizeFactor*1250,sizeFactor*930],[sizeFactor*250,sizeFactor*930]],\r\n width: sizeFactor*1000,\r\n height: sizeFactor*930\r\n };\r\n }\r\n }\r\n return null;\r\n case layouts[currentLayout].Bathtub.BathTubBody:\r\n return {\r\n polygonArray: [[sizeFactor*800,sizeFactor*580],[sizeFactor*1920,sizeFactor*580],[sizeFactor*1920,sizeFactor*1080],[sizeFactor*800,sizeFactor*1080]],\r\n width: sizeFactor*1120,\r\n height: sizeFactor*500\r\n };\r\n case layouts[currentLayout].Bathtub.BathTubFixture:\r\n return {\r\n polygonArray: [[sizeFactor*1380,sizeFactor*370],[sizeFactor*1660,sizeFactor*370],[sizeFactor*1660,sizeFactor*1000],[sizeFactor*1380,sizeFactor*1000]],\r\n width: sizeFactor*280,\r\n height: sizeFactor*730\r\n };\r\n default:\r\n return null\r\n }\r\n};\r\n\r\nexport default {\r\n layouts,\r\n getMenuByHoveredLayer: (currentLayout, layer) => {\r\n // console.log('currentLayout', currentLayout);\r\n // console.log('layer', layer);\r\n switch (layer.zIndex) {\r\n // General\r\n case layouts[currentLayout].Ceiling:\r\n return \"Ceiling\";\r\n case layouts[currentLayout].Toilet:\r\n return {\r\n parent: \"Toilet\",\r\n child: \"Toilet\"\r\n };\r\n case layouts[currentLayout].PaperHolder:\r\n return {\r\n parent: \"Toilet\",\r\n child: \"Paper Holder\"\r\n };\r\n // case layouts[currentLayout].Shower.ExtrusionWallLeft:\r\n // case layouts[currentLayout].Shower.Body[\"1\"]:\r\n // case layouts[currentLayout].Shower.Body[\"2\"]:\r\n // case layouts[currentLayout].Shower.Fixture:\r\n // return {\r\n // parent: \"Shower\",\r\n // child: \"Shower Body\"\r\n // };\r\n case layouts[currentLayout].Wall_A:\r\n return {\r\n parent: \"Walls\",\r\n child: \"Wall A\"\r\n };\r\n case layouts[currentLayout].Wall_C:\r\n return {\r\n parent: \"Walls\",\r\n child: \"Wall C\"\r\n };\r\n case layouts[currentLayout].Vanity.Mirror:\r\n return {\r\n parent: \"Vanity\",\r\n child: \"Mirror\"\r\n };\r\n // case layouts[currentLayout].Shower.ExtrusionWallLeft:\r\n // case layouts[currentLayout].Shower.ExtrusionWallLeftHalfWall:\r\n // case layouts[currentLayout].Shower.PonyWall:\r\n // return \"left_wall_custom\";\r\n case layouts[currentLayout].Vanity.VanityBacksplash:\r\n case layouts[currentLayout].Wall_B:\r\n return \"wall_b_custom\";\r\n case layouts[currentLayout].Vanity.Handle:\r\n case layouts[currentLayout].Vanity.CounterTop:\r\n case layouts[currentLayout].Vanity.Faucet:\r\n case layouts[currentLayout].Vanity.Sink:\r\n case layouts[currentLayout].Vanity.Cabinet:\r\n return \"vanity_custom\";\r\n\r\n case layouts[currentLayout].Shower.Threshold:\r\n return {\r\n parent: \"Shower\",\r\n child: \"Threshold\"\r\n };\r\n case layouts[currentLayout].Accessories.CornerCaddie:\r\n case layouts[currentLayout].Accessories.CornerCaddie2:\r\n return {\r\n parent: \"Shower Accessories\",\r\n child: \"Corner Caddie\"\r\n };\r\n case layouts[currentLayout].Accessories.LargeCornerCaddie:\r\n case layouts[currentLayout].Accessories.LargeCornerCaddie2:\r\n return {\r\n parent: \"Shower Accessories\",\r\n child: \"Large Corner Caddie\"\r\n };\r\n case layouts[currentLayout].Accessories.LargeCornerSeat:\r\n case layouts[currentLayout].Accessories.LargeCornerSeat2:\r\n return {\r\n parent: \"Shower Accessories\",\r\n child: \"Large Corner Seat\"\r\n };\r\n case layouts[currentLayout].Accessories.SoapDish:\r\n case layouts[currentLayout].Accessories.SoapDish2:\r\n case layouts[currentLayout].Accessories.SoapDish3:\r\n return {\r\n parent: \"Shower Accessories\",\r\n child: \"Soap Dish\"\r\n };\r\n case layouts[currentLayout].Accessories.SmallCornerShelf:\r\n return {\r\n parent: \"Shower Accessories\",\r\n child: \"Small Corner Shelf\"\r\n };\r\n case layouts[currentLayout].Accessories.GrabBar:\r\n case layouts[currentLayout].Accessories.GrabBar2:\r\n case layouts[currentLayout].Accessories.GrabBar3:\r\n return {\r\n parent: \"Shower Accessories\",\r\n child: \"Grab Bar\"\r\n };\r\n case layouts[currentLayout].Accessories.CornerShelf1:\r\n case layouts[currentLayout].Accessories.CornerShelf2:\r\n case layouts[currentLayout].Accessories.CornerShelf3:\r\n case layouts[currentLayout].Accessories.CornerShelf4:\r\n case layouts[currentLayout].Accessories.CornerShelf5:\r\n case layouts[currentLayout].Accessories.CornerShelf6:\r\n return {\r\n parent: \"Shower Accessories\",\r\n child: \"Corner Shelf\"\r\n };\r\n case layouts[currentLayout].Accessories.ShowerPod:\r\n return {\r\n parent: \"Shower Accessories\",\r\n child: \"Shower Pod\"\r\n };\r\n case layouts[currentLayout].Accessories.LargeShelf:\r\n return {\r\n parent: \"Shower Accessories\",\r\n child: \"Large Shelf\"\r\n };\r\n case layouts[currentLayout].Accessories.ShampooShelf:\r\n return {\r\n parent: \"Shower Accessories\",\r\n child: \"Shampoo Shelf\"\r\n };\r\n case layouts[currentLayout].Accessories.Seats:\r\n return {\r\n parent: \"Shower Accessories\",\r\n child: \"Seats\"\r\n };\r\n case layouts[currentLayout].Accessories.ShowerRod:\r\n return {\r\n parent: \"Shower Accessories\",\r\n child: \"Shower Rod\"\r\n };\r\n case layouts[currentLayout].Accessories.TowelBar:\r\n return {\r\n parent: \"Shower Accessories\",\r\n child: \"Towel Bar\"\r\n };\r\n case layouts[currentLayout].Accessories.WindowBody:\r\n return {\r\n parent: \"Shower Accessories\",\r\n child: \"Window\"\r\n };\r\n case layouts[currentLayout].Accessories.WindowKits:\r\n return {\r\n parent: \"Shower Accessories\",\r\n child: \"Window Kits\"\r\n };\r\n case layouts[currentLayout].Walls.RightWall:\r\n case layouts[currentLayout].Background.RightWall:\r\n return {\r\n parent: \"Walls\",\r\n child: \"Right Wall\"\r\n };\r\n case layouts[currentLayout].Background.LeftWall:\r\n case layouts[currentLayout].Walls.LeftWall:\r\n return {\r\n parent: \"Walls\",\r\n child: \"Left Wall\"\r\n };\r\n case layouts[currentLayout].Background.CenterWall:\r\n case layouts[currentLayout].Walls.CenterWall:\r\n return {\r\n parent: \"Walls\",\r\n child: \"Center Wall\"\r\n };\r\n case layouts[currentLayout].Walls.CeilingPanels:\r\n return {\r\n parent: \"Walls\",\r\n child: \"Ceiling Panels\"\r\n };\r\n case layouts[currentLayout].Shower.ShowerHead:\r\n return {\r\n parent: \"Shower\",\r\n child: \"Shower Head\"\r\n };\r\n case layouts[currentLayout].Background.Floor:\r\n return {\r\n parent: \"Floor\",\r\n child: \"Floor\"\r\n };\r\n case layouts[currentLayout].Shower.Glass:\r\n case layouts[currentLayout].Shower.Floor:\r\n case layouts[currentLayout].Shower.ShowerPanCombo:\r\n case layouts[currentLayout].Background.ShowerWall:\r\n case layouts[currentLayout].Shower.Body:\r\n case layouts[currentLayout].Shower.Overlay:\r\n case layouts[currentLayout].Shower.ShowerDoor:\r\n case layouts[currentLayout].Shower.ShowerDoor2:\r\n case layouts[currentLayout].Shower.ShowerDoorHandle:\r\n case layouts[currentLayout].Shower.ExtrusionWallLeft:\r\n case layouts[currentLayout].Shower.Fixture:\r\n case layouts[currentLayout].Shower.ShowerFixture:\r\n case layouts[currentLayout].Shower.ShowerFixture2:\r\n case layouts[currentLayout].ShowerWallAccent:\r\n return \"shower_custom\";\r\n case layouts[currentLayout].Shower.TubCombo.Liner:\r\n case layouts[currentLayout].Shower.TubCombo.ReplacementTub:\r\n case layouts[currentLayout].Shower.TubCombo.WalkInTub:\r\n case layouts[currentLayout].Shower.TubCombo.JettedTub:\r\n case layouts[currentLayout].Shower.TubCombo.WallConfiguration:\r\n return \"shower_combo\";\r\n // BathTub\r\n case layouts[currentLayout].Shower.PonyWallCap:\r\n case layouts[currentLayout].Shower.PonyWallGlass:\r\n return \"shower_pony_wall\";\r\n case layouts[currentLayout].Bathtub.BathTubBody:\r\n case layouts[currentLayout].Bathtub.BathTubFixture:\r\n return \"bathtub_custom\";\r\n default:\r\n return \"\"\r\n }\r\n },\r\n getLayerDimensions\r\n}\r\n\r\n\r\n","import {Part} from \"../part\";\r\nimport {PartMenuType} from \"../../../visComponents/constants\";\r\nimport { showerAccessoriesThumbnail } from '../../../bvComponent/core/assets';\r\nimport LargeCornerSeat from \"../subparts/showerAccessories/largeCornerSeat\";\r\nimport SoapDish from \"../subparts/showerAccessories/soapDish\";\r\nimport CornerCaddie from \"../subparts/showerAccessories/cornerCaddie\";\r\nimport LargeCornerCaddie from \"../subparts/showerAccessories/largeCornerCaddie\";\r\nimport GrabBar from \"../subparts/showerAccessories/grabBar\";\r\nimport CornerShelf from \"../subparts/showerAccessories/cornerShelf\";\r\nimport ShowerPod from \"../subparts/showerAccessories/showerPod\";\r\nimport Seats from \"../subparts/showerAccessories/seats\";\r\nimport ShowerRod from \"../subparts/showerAccessories/showerRod\";\r\nimport WindowBody from \"../subparts/showerAccessories/windowBody\";\r\nimport WindowKits from \"../subparts/showerAccessories/windowKits\";\r\nimport LargeShelf from \"../subparts/showerAccessories/largeShelf\";\r\nimport TowelBar from \"../subparts/showerAccessories/towelBar\";\r\nimport ShampooShelf from \"../subparts/showerAccessories/shampooShelf\";\r\n\r\nexport class ShowerAccessories extends Part {\r\n static id = 'Shower Accessories';\r\n\r\n constructor() {\r\n super(true, false, PartMenuType.Complex);\r\n\r\n this.menuType = PartMenuType.Complex;\r\n this.partThumbnail = showerAccessoriesThumbnail;\r\n this.partName = 'Shower Accessories';\r\n this.translateId = \"visualizer.bathroom.accessories\";\r\n this.relatedItems = [];\r\n\r\n // related items\r\n this.soapDish = null;\r\n this.largeCornerSeat = null;\r\n this.largeCornerCaddie = null;\r\n this.cornerCaddie = null;\r\n this.smallCornerShelf = null;\r\n this.grabBar = null;\r\n this.showerPod = null;\r\n this.seats = null;\r\n this.windowBody = null;\r\n this.windowKits = null;\r\n this.largeShelf = null;\r\n this.shampooShelf = null;\r\n this.towelBar = null;\r\n\r\n //current active caddie type\r\n this.caddie_type = \"corner_shelf\";\r\n\r\n }\r\n\r\n load(dbFeature) {\r\n let relatedItemName = \"\",\r\n RelatedItemClass = null;\r\n switch (dbFeature.groupName) {\r\n case \"Soap Dish\":\r\n relatedItemName = \"soapDish\";\r\n RelatedItemClass = SoapDish;\r\n break;\r\n case \"Large Corner Seat\":\r\n relatedItemName = \"largeCornerSeat\";\r\n RelatedItemClass = LargeCornerSeat;\r\n break;\r\n case \"Large Corner Caddie\":\r\n relatedItemName = \"largeCornerCaddie\";\r\n RelatedItemClass = LargeCornerCaddie;\r\n break;\r\n case \"Corner Caddie\":\r\n relatedItemName = \"cornerCaddie\";\r\n RelatedItemClass = CornerCaddie;\r\n break;\r\n case \"Grab Bar\":\r\n relatedItemName = \"grabBar\";\r\n RelatedItemClass = GrabBar;\r\n break;\r\n case \"Shower Rod\":\r\n relatedItemName = \"showerRod\";\r\n RelatedItemClass = ShowerRod;\r\n break;\r\n case \"Corner Shelf\":\r\n case \"Small Corner Shelf\":\r\n relatedItemName = \"cornerShelf\";\r\n RelatedItemClass = CornerShelf;\r\n break;\r\n case \"Shower Pod\":\r\n case \"Storage Pod\":\r\n case \"Storage Pods\":\r\n relatedItemName = \"showerPod\";\r\n RelatedItemClass = ShowerPod;\r\n break;\r\n case \"Large Shelf\":\r\n relatedItemName = \"largeShelf\";\r\n RelatedItemClass = LargeShelf;\r\n break;\r\n case \"Shampoo Shelf\":\r\n relatedItemName = \"shampooShelf\";\r\n RelatedItemClass = ShampooShelf;\r\n break;\r\n case \"Seats\":\r\n case \"flip-Up Seat\":\r\n case \"Flip-Up Seat\":\r\n relatedItemName = \"seats\";\r\n RelatedItemClass = Seats;\r\n break;\r\n case \"Window Kit\":\r\n case \"Window Kits\": {\r\n relatedItemName = \"windowKits\";\r\n RelatedItemClass = WindowKits;\r\n break;\r\n }\r\n case \"Window\": {\r\n relatedItemName = \"decorWindow\";\r\n RelatedItemClass = WindowBody;\r\n break;\r\n }\r\n case \"Towel Bar\": {\r\n relatedItemName = \"towelBar\";\r\n RelatedItemClass = TowelBar;\r\n break;\r\n }\r\n\r\n }\r\n if (relatedItemName) {\r\n if (!this[relatedItemName]) {\r\n this[relatedItemName] = new RelatedItemClass(true);\r\n if (relatedItemName !== \"shadows\") {\r\n this.relatedItems.push(this[relatedItemName]);\r\n }\r\n }\r\n if (!this.categoryEnabled) {\r\n this.categoryEnabled = true\r\n }\r\n this[relatedItemName].getParent = () => this;\r\n this[relatedItemName].load(dbFeature);\r\n return true\r\n }\r\n return false\r\n }\r\n\r\n}\r\n\r\n","export const LayoutType = {\r\n Layout1: 1,\r\n // Layout2: 2,\r\n Layout31: 31,\r\n};\r\n\r\nexport const LayoutAbbreviation = {\r\n All: \"ALL\",\r\n Layout1: \"Layout1\",\r\n // Layout2: \"Layout2\",\r\n Layout31: \"Layout31\",\r\n};\r\n\r\nexport const LayoutAbbreviations = [\r\n \"Layout1\",\r\n // \"Layout2\",\r\n \"Layout31\",\r\n];\r\nexport const LayoutAbbreviationsToRemove = [\r\n \"Layout31\",\r\n // \"Layout2\",\r\n \"Layout1\",\r\n];\r\n\r\nexport const METADATA = {\r\n ALL: \"ALL\"\r\n};\r\n\r\nexport const DECORS_MAX = 10;\r\n","import React, {useEffect, useState} from 'react';\r\nimport { connect } from \"react-redux\";\r\nimport {injectIntl} from \"react-intl\";\r\nimport PropTypes from \"prop-types\";\r\n\r\nimport IconButton from \"@mui/material/IconButton\";\r\nimport ChevronLeftIcon from \"@mui/icons-material/ChevronLeft\";\r\nimport ChevronRightIcon from \"@mui/icons-material/ChevronRight\";\r\n\r\nimport MaterialSpinner from \"../../../../ui/materialSpinner\";\r\nimport {THUMBNAIL_SIZES} from \"../../../../../misc/utils\";\r\nimport {featureThumbnailUrl} from \"../../../../../misc/helpers\";\r\nimport {baseNewImagesPath} from \"../../../../assets\";\r\nimport {featureInterface} from \"../../../../../interfaces/featureInterface\";\r\nimport Analytics, {LOOK_JOURNEY_ANALYTIC_EVENTS, PRODUCT_JOURNEY_ANALYTIC_EVENTS} from \"../../../../../analytics\";\r\nimport {LOOK_OVERLAYS} from \"../../../core/constants\";\r\nimport {IS_PRODUCT_JOURNEY} from \"../../../../../config\";\r\nimport {setLookOverlayOpened} from \"../../../../../actions/lookFunctions\";\r\n\r\nconst LookFeatureImage = (props) => {\r\n\r\n const {lookActiveFeature, intl, withoutGallery, featureIsLocked, setLookOverlayOpened} = props;\r\n const [isLoading, toggleLoader] = useState(true);\r\n const [galleryImages, setGalleryImages] = useState([]);\r\n const [activeImageIndex, setActiveImageIndex] = useState(0);\r\n\r\n useEffect(() => {\r\n let featureGalleryImages = (lookActiveFeature.dbFeature.galleryEnabled && Array.isArray(lookActiveFeature.dbFeature.galleryImages)\r\n && lookActiveFeature.dbFeature.galleryImages.length) ? lookActiveFeature.dbFeature.galleryImages : [];\r\n setGalleryImages([{\r\n url: featureThumbnailUrl(lookActiveFeature) || `${baseNewImagesPath}images/image-not-found.png`,\r\n preview: featureThumbnailUrl(lookActiveFeature, THUMBNAIL_SIZES.medium)\r\n }, // main image thumbnail\r\n ...featureGalleryImages\r\n ]);\r\n setActiveImageIndex(0);\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [lookActiveFeature]);\r\n\r\n const arrowClick = (analyticsLabel, nextIndex) => {\r\n Analytics.sendClickEvent(analyticsLabel);\r\n if (featureIsLocked) {\r\n setLookOverlayOpened(LOOK_OVERLAYS.leadCapture);\r\n return false\r\n }\r\n if (nextIndex !== activeImageIndex) {\r\n toggleLoader(true);\r\n setActiveImageIndex(nextIndex)\r\n }\r\n }\r\n\r\n const backButtonClick = () => {\r\n const analyticsLabel = IS_PRODUCT_JOURNEY\r\n ? PRODUCT_JOURNEY_ANALYTIC_EVENTS.productFeatureImageChangeLeft\r\n : LOOK_JOURNEY_ANALYTIC_EVENTS.lookFeatureImageChangeLeft;\r\n const nextIndex = galleryImages[activeImageIndex - 1] ? activeImageIndex - 1 : galleryImages.length - 1\r\n arrowClick(analyticsLabel, nextIndex)\r\n };\r\n\r\n const nextButtonClick = () => {\r\n const analyticsLabel = IS_PRODUCT_JOURNEY\r\n ? PRODUCT_JOURNEY_ANALYTIC_EVENTS.productFeatureImageChangeRight\r\n : LOOK_JOURNEY_ANALYTIC_EVENTS.lookFeatureImageChangeRight;\r\n const nextIndex = galleryImages[activeImageIndex + 1] ? activeImageIndex + 1 : 0\r\n arrowClick(analyticsLabel, nextIndex)\r\n };\r\n //\r\n // const thumbnailClick = (index) => {\r\n // props.toggleGalleryVisible(true);\r\n // props.setGalleryActiveImageIndex(index);\r\n // };\r\n\r\n // console.log(\"galleryImages\", galleryImages);\r\n const mainImageUrl = galleryImages[activeImageIndex];\r\n\r\n return (\r\n \r\n {withoutGallery ? null : (\r\n \r\n \r\n )}\r\n \r\n \r\n )}\r\n
\r\n )\r\n};\r\n\r\nLookFeatureImage.propTypes = {\r\n withoutGallery: PropTypes.bool,\r\n forFeature: PropTypes.shape(featureInterface),\r\n featureIsLocked: PropTypes.bool,\r\n}\r\n\r\nconst mapStateToProps = (store, ownProps) => {\r\n const {lookActiveFeature} = store.lookState;\r\n return {\r\n lookActiveFeature: ownProps.forFeature || lookActiveFeature,\r\n windowWidth: store.serverState.windowWidth,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n setLookOverlayOpened\r\n};\r\n\r\nexport default injectIntl(\r\n connect(mapStateToProps, mapDispatchToProps)(LookFeatureImage)\r\n);\r\n","import * as types from '../actions/actionTypes';\r\nexport const ACTIVE_ROOM_TYPE = {\r\n category: 'category',\r\n roomGroup: 'roomGroup',\r\n quote: 'quote',\r\n}\r\n\r\nconst initialState = {\r\n menuOpened: \"\",\r\n menuOpenedLock: false,\r\n activeButton: null,\r\n activeSubMenuButton: null,\r\n activeLevel3Button: null,\r\n activeRoom: null,\r\n activeRoomId: null,\r\n activeRoomIndex: null,\r\n activeRoomType: null,\r\n isFreeDrawMode: false,\r\n isWallsUpMode: true,\r\n isWallsLockMode: true,\r\n roomSwitcher: {\r\n isVisible: false\r\n },\r\n roomLayouts: [],\r\n contextMenu: {\r\n isOpened: false,\r\n activeMenu: \"\",\r\n pos: {},\r\n parent: null\r\n },\r\n contextMenuV2: {\r\n isOpened: false,\r\n menuItems: [],\r\n position: {}\r\n },\r\n systemMessage: {\r\n isOpened: false,\r\n title: \"\",\r\n text: \"\"\r\n },\r\n ar3dPopup: {\r\n isOpened: false,\r\n contentType: false\r\n },\r\n systemDeleteMessage: {\r\n isOpened: false,\r\n shape: null\r\n },\r\n sqftPopup: {\r\n title: \"\",\r\n content: \"\",\r\n isOpened: false,\r\n confirmCallback: new Function (),\r\n confirmText: \"\",\r\n cancelCallback: new Function (),\r\n cancelText: \"\"\r\n },\r\n changeValuePopups: [],\r\n validationPopups: [],\r\n shapeIdsWithMissingFeature: [],\r\n isShapeFeatureMissing: false,\r\n isITextEditing: false,\r\n isSlabPlaceholderOverlapsWithMultipleShapes: false,\r\n validationMessage: {},\r\n reCacheMenuCounter: 0,\r\n cabinetRelatedItems: [],\r\n};\r\n\r\nexport default function (state = initialState, action) {\r\n let changeValuePopups;\r\n let validationPopups;\r\n switch (action.type) {\r\n case types.SET_SQFT_MENU_OPENED:\r\n case types.SET_SQFT_MENU_LOCK:\r\n case types.SET_SQFT_MENU_ACTIVE_BUTTON:\r\n case types.SET_SQFT_ACTIVE_SUB_MENU_BUTTON:\r\n case types.SET_SQFT_ACTIVE_LEVEL3_BUTTON:\r\n case types.SET_SQFT_ACTIVE_ROOM:\r\n case types.SET_SQFT_ACTIVE_ROOM_ID:\r\n case types.SET_SQFT_ROOM_LAYOUTS:\r\n case types.SET_SQFT_ACTIVE_ROOM_TYPE:\r\n case types.SET_SQFT_ACTIVE_ROOM_INDEX:\r\n case types.SET_FREE_DRAW_MODE:\r\n case types.SET_WALLS_UP_MODE:\r\n case types.SET_WALLS_LOCK_MODE:\r\n case types.SET_SHAPE_IDS_WITH_MISSING_FEATURES:\r\n case types.SET_CHANGE_SHAPE_FEATURE_MISSING_MESSAGE:\r\n case types.SET_IS_ITEXT_EDITING:\r\n case types.SET_SLAB_PLACEHOLDER_OVERLAPS_WITH_MULTIPLE_SHAPES:\r\n case types.SET_RE_CACHE_MENU_COUNTER:\r\n case types.SET_CABINET_RELATED_ITEMS:\r\n return Object.assign({}, state, {\r\n ...action.payload\r\n });\r\n case types.ADD_SHAPE_ID_WITH_MISSING_FEATURES:\r\n return Object.assign({}, state, {\r\n shapeIdsWithMissingFeature: [...state.shapeIdsWithMissingFeature, action.payload]\r\n });\r\n case types.SET_SQFT_ROOM_SWITCHER_VISIBLE:\r\n return Object.assign({}, state, {\r\n roomSwitcher: {...state.roomSwitcher, ...{isVisible: action.payload.isVisible}}\r\n });\r\n case types.SET_SQFT_CONTEXT_MENU:\r\n return Object.assign({}, state, {\r\n contextMenu: {...state.contextMenu, ...action.payload.contextMenu}\r\n });\r\n case types.SET_SQFT_SYSTEM_MESSAGE:\r\n return Object.assign({}, state, {\r\n systemMessage: {...state.systemMessage, ...action.payload.systemMessage}\r\n });\r\n case types.SET_SQFT_AR3D_POPUP:\r\n return Object.assign({}, state, {\r\n ar3dPopup: {...state.ar3dPopup, ...action.payload.ar3dPopup}\r\n });\r\n case types.SET_SQFT_POPUP:\r\n return Object.assign({}, state, {\r\n sqftPopup: {...state.sqftPopup, ...action.payload.sqftPopup}\r\n });\r\n case types.SET_SQFT_CONTEXT_MENU_V2:\r\n return Object.assign({}, state, {\r\n contextMenuV2: {...state.contextMenuV2, ...action.payload.contextMenuV2}\r\n });\r\n case types.SET_SQFT_SYSTEM_DELETE_MESSAGE:\r\n return Object.assign({}, state, {\r\n systemDeleteMessage: {...state.systemDeleteMessage, ...action.payload.systemDeleteMessage}\r\n });\r\n\r\n case types.SET_CHANGE_VALUE_POPUPS:\r\n state = {...state, changeValuePopups: action.payload.changeValuePopups};\r\n break;\r\n case types.ADD_CHANGE_VALUE_POPUP:\r\n return Object.assign({}, state, {\r\n changeValuePopups: [...state.changeValuePopups, action.payload]\r\n });\r\n case types.CHANGE_VALUE_POPUP:\r\n changeValuePopups = state.changeValuePopups.map((item) => {\r\n if (item.id !== action.payload.id) { return item }\r\n\r\n return {\r\n ...item,\r\n ...action.payload\r\n }\r\n })\r\n return Object.assign({}, state, {changeValuePopups: changeValuePopups });\r\n case types.DELETE_CHANGE_VALUE_POPUP:\r\n changeValuePopups = state.changeValuePopups.filter((row) => row.id !== action.payload.id);\r\n\r\n return Object.assign({}, state, {\r\n changeValuePopups: changeValuePopups\r\n });\r\n\r\n case types.SET_VALIDATION_POPUPS:\r\n state = {...state, validationPopups: action.payload.validationPopups};\r\n break;\r\n case types.ADD_VALIDATION_POPUP:\r\n return Object.assign({}, state, {\r\n validationPopups: [...state.validationPopups, action.payload]\r\n });\r\n case types.VALIDATION_POPUP:\r\n validationPopups = state.validationPopups.map((item) => {\r\n if (item.id !== action.payload.id) { return item }\r\n\r\n return {\r\n ...item,\r\n ...action.payload\r\n }\r\n })\r\n return Object.assign({}, state, {validationPopups: validationPopups });\r\n case types.DELETE_VALIDATION_POPUP:\r\n validationPopups = state.validationPopups.filter((row) => row.id !== action.payload.id);\r\n\r\n return Object.assign({}, state, {\r\n validationPopups: validationPopups\r\n });\r\n default:\r\n return state\r\n }\r\n}\r\n","import * as types from '../actions/actionTypes';\r\nimport {hardCodeIsModerno} from \"../misc/fabricatorHardcode\";\r\n\r\nexport const DEFAULT_SLAB_IMAGE_PART = 60;\r\nexport const SLAB_IMAGE_TYPES = {\r\n placeholder: \"placeholder\",\r\n upload: \"upload\"\r\n}\r\nconst isModerno = hardCodeIsModerno();\r\n\r\nconst initialState = {\r\n isShowSlabTool: false,\r\n isSlabToolVisited: false,\r\n isMeasurementVisibleInSlabMode: false,\r\n roomsWithVisitedSlabTool: [],\r\n searchText: \"\",\r\n activeSlabId: 0,\r\n selectedImage: \"\",\r\n activeStep: 1,\r\n slabImageType: null,\r\n slabImageHeight: isModerno ? 0 : 60,\r\n slabImageWidth: isModerno ? 0 : 126,\r\n slabAspectRatio: 0,\r\n croppedSlabImages: [],\r\n pricePerArea: 0,\r\n cropperData: {\r\n x: 0,\r\n y: 0,\r\n width: 0,\r\n height: 0,\r\n rotate: 0,\r\n scaleX: 0,\r\n scaleY: 0\r\n },\r\n activeSlabUrl: \"\",\r\n isSizeValidationFailed: false,\r\n isSlabPricingEnabled: true,\r\n};\r\n\r\nexport default function(state = initialState, action) {\r\n\r\n let filteredImages;\r\n switch(action.type) {\r\n case types.SHOW_SLAB_TOOL:\r\n case types.SET_SLAB_TOOL_VISITED:\r\n case types.SET_ACTIVE_SLAB_ID:\r\n case types.SET_ACTIVE_SLAB_URL:\r\n case types.SET_SQFT_SLAB_SEARCH_TEXT:\r\n case types.SET_SQFT_SLAB_ASPECT_RATIO:\r\n case types.SET_SQFT_SLAB_IMAGE_WIDTH:\r\n case types.SET_SQFT_SLAB_IMAGE_HEIGHT:\r\n case types.SET_SQFT_SLAB_ACTIVE_STEP:\r\n case types.SET_SQFT_SLAB_CROPPER_DATA:\r\n case types.SET_PRICE_PER_AREA:\r\n case types.SET_SLAB_IMAGE_TYPE:\r\n case types.SET_IS_MEASUREMENT_VISIBLE_IN_SLAB_MODE:\r\n case types.SET_IS_SIZE_VALIDATION_FAILED:\r\n case types.SET_IS_SLAB_PRICING_ENABLED:\r\n return Object.assign({}, state, {\r\n ...action.payload\r\n });\r\n case types.SET_SQFT_CROPPED_SLAB_IMAGES:\r\n state = {...state, croppedSlabImages: action.payload.croppedSlabImages};\r\n break;\r\n case types.ADD_SQFT_CROPPED_SLAB_IMAGE:\r\n return Object.assign({}, state, {\r\n croppedSlabImages: [...state.croppedSlabImages, action.payload]\r\n });\r\n case types.ADD_ROOM_WITH_VISITED_SLAB_TOOL:\r\n if (!state.roomsWithVisitedSlabTool.includes(action.payload)) {\r\n return Object.assign({}, state, {\r\n roomsWithVisitedSlabTool: [...state.roomsWithVisitedSlabTool, action.payload]\r\n });\r\n }\r\n return state\r\n case types.DELETE_CROPPED_SLAB_IMAGE:\r\n filteredImages = state.croppedSlabImages.filter((row) => row.id !== action.payload.id);\r\n\r\n return Object.assign({}, state, {\r\n croppedSlabImages: filteredImages\r\n });\r\n\r\n }\r\n\r\n return state;\r\n}\r\n","import axios from \"axios\";\r\n\r\nexport const AxiosInstance = axios.create({\r\n baseURL: document.kvConfig.domain || \"\",\r\n // timeout: 120000,\r\n headers: {\r\n \"Content-Type\": \"application/json\",\r\n }\r\n});\r\n\r\n// AxiosInstance.interceptors.response.use((response) => {\r\n// const {serverState} = store.getState();\r\n// if (!serverState.networkConnection) {\r\n// store.dispatch(setNetworkConnection(true))\r\n// }\r\n// return response;\r\n// }, (error) => {\r\n// // Do something with response error\r\n// if (error && error.toJSON && error.toJSON().message === \"Network Error\") {\r\n// store.dispatch(setNetworkConnection(false))\r\n// }\r\n// return Promise.reject(error);\r\n// });\r\n\r\nexport const leadApiGet = (url) => {\r\n return AxiosInstance.get(url)\r\n};\r\n\r\nexport const leadApiPost = (url, data, headers = null) => {\r\n return AxiosInstance.post(url, data, headers ? {headers} : null);\r\n}\r\n","export const VISIT_ROUTES = {\r\n home: \"/\",\r\n // personal: \"/personal/:activeSubStep?\",\r\n // project: \"/project/:activeSubStep?\",\r\n // contact: \"/contact\",\r\n // appointment: \"/appointment/:activeSubStep?\",\r\n wizard: \"/wizard/:wizardId?/:leadStepName?/:activeSubStep?\",\r\n contact: \"/contact\",\r\n thanks: \"/thanks\",\r\n review: \"/review\",\r\n success: \"/success\",\r\n};\r\n\r\n// export const VISIT_ROUTES = {\r\n// home: \"/:wizardId?\",\r\n// product: \"/:wizardId?/product/:activeSubStep?\",\r\n// personal: \"/:wizardId?/personal/:activeSubStep?\",\r\n// contact: \"/:wizardId?/contact\",\r\n// appointment: \"/:wizardId?/appointment/:activeSubStep?\",\r\n// review: \"/:wizardId?/review\",\r\n// success: \"/:wizardId?/success\",\r\n// };\r\n\r\nexport const VISIT_STEPS = {\r\n wizard: \"/wizard\",\r\n personal: \"/personal\",\r\n project: \"/project\",\r\n contact: \"/contact\",\r\n appointment: \"/appointment\",\r\n review: \"/review\",\r\n success: \"/success\",\r\n}\r\n\r\nexport const IS_DEV_MODE = window.location.href.indexOf('dev=1') !== -1 || document.kvConfig.devMode;\r\nexport const SKIP_CALENDAR = window.location.href.indexOf('skip=1') !== -1;\r\n","export const SET_USER_VALUE = \"SET_USER_VALUE\";\r\nexport const SET_USER_LOCATION = \"SET_USER_LOCATION\";\r\nexport const SET_USER_ERRORS = \"SET_USER_ERRORS\";\r\nexport const SET_REGISTERED_USER_DATA = \"SET_REGISTERED_USER_DATA\";\r\n\r\nexport const setUserInfo = (name, value) => ({\r\n type: SET_USER_VALUE,\r\n payload: {name, value}\r\n});\r\n\r\nexport const setUserLocation = (name, value) => ({\r\n type: SET_USER_LOCATION,\r\n payload: {name, value}\r\n});\r\n\r\nexport const setUserErrors = (name, errors = []) => ({\r\n type: SET_USER_ERRORS,\r\n payload: {name, errors}\r\n});\r\n\r\nexport const setRegisteredUserData = (registeredUserEmail, registeredUserAuthToken) => ({\r\n type: SET_REGISTERED_USER_DATA,\r\n payload: {registeredUserEmail, registeredUserAuthToken}\r\n});\r\n\r\nexport const replacePhoneToMatchMask = (phone) => {\r\n\r\n // return phone.replace(/^\\(?(\\d{3})\\)?\\s?(\\d{3})\\-?(\\d+)$/, \"($1) $2-$3\") old mask, not replacing while typing\r\n\r\n // Remove all non-digit characters\r\n let cleaned = phone.replace(/\\D/g, '');\r\n\r\n // Format as (xxx) xxx-xxxx as the user types\r\n if (cleaned.length > 0) {\r\n cleaned = `(${cleaned}`;\r\n }\r\n if (cleaned.length > 4) {\r\n cleaned = `${cleaned.slice(0, 4)}) ${cleaned.slice(4)}`;\r\n }\r\n if (cleaned.length > 9) {\r\n cleaned = `${cleaned.slice(0, 9)}-${cleaned.slice(9)}`;\r\n }\r\n\r\n // Update the input value with the formatted number\r\n return cleaned.slice(0, 14); // Maximum length is 14 including the formatting characters\r\n}\r\nexport const replaceMaskToPassPhoneOnTheBackend = (phone) => {\r\n if (!phone) {\r\n return \"\"\r\n }\r\n return phone\r\n .replace(/ /g,\"\")\r\n .replace(/-/g,\"\")\r\n .replace(/\\(/g,\"\")\r\n .replace(/\\)/g,\"\")\r\n}\r\n","import {Part} from \"../part\";\r\nimport {PartMenuType} from \"../../../visComponents/constants\";\r\nimport {countertopGroupThumbnail} from \"../assets\";\r\nimport DesignNavigationItem from \"../../../visComponents/designNavigationItem\";\r\nimport {PLACEMENTS} from \"../constants\";\r\n\r\nimport Countertop from \"../subparts/countertop/countertop\";\r\nimport Faucet from \"../subparts/countertop/faucet\";\r\nimport Sink from \"../subparts/countertop/sink\";\r\nimport Stovetop from \"../subparts/countertop/stovetop\";\r\n\r\nimport Cutouts from \"../subparts/countertop/cutouts\";\r\nimport EdgeProfile from \"../subparts/countertop/edgeProfile\";\r\nimport Radius from \"../subparts/countertop/radius\";\r\n\r\nexport default class CountertopGroup extends Part {\r\n static id = 'Countertop';\r\n constructor() {\r\n super(true, false, PartMenuType.Complex);\r\n\r\n this.menuType = PartMenuType.Complex;\r\n this.partName = 'Countertop';\r\n this.partThumbnail = countertopGroupThumbnail;\r\n this.translateId = \"visualizer.kitchen.countertop\";\r\n\r\n // related items\r\n this.countertop = null;\r\n this.faucet = null;\r\n this.sink = null;\r\n\r\n this.edge = null;\r\n this.cutouts = null;\r\n this.radius = null;\r\n }\r\n\r\n load(dbFeature) {\r\n let relatedItemName = \"\",\r\n shouldLoadInDifferentGroups = false,\r\n RelatedItemClass = null;\r\n switch (dbFeature.groupName) {\r\n case \"Countertop\":\r\n relatedItemName = \"countertop\";\r\n RelatedItemClass = Countertop;\r\n break;\r\n case \"Edge Profile\":\r\n shouldLoadInDifferentGroups = true;\r\n relatedItemName = \"edge\";\r\n RelatedItemClass = EdgeProfile;\r\n break;\r\n case \"Cutouts\":\r\n relatedItemName = \"cutouts\";\r\n RelatedItemClass = Cutouts;\r\n break;\r\n case \"Radius\":\r\n relatedItemName = \"radius\";\r\n RelatedItemClass = Radius;\r\n break;\r\n case \"Faucet\":\r\n if ((dbFeature.metaData[\"Placement\"] && dbFeature.metaData[\"Placement\"].includes(PLACEMENTS.Countertop)) || !dbFeature.metaData[\"Placement\"]) {\r\n if (!dbFeature.metaData[\"Placement\"]) {\r\n shouldLoadInDifferentGroups = true;\r\n }\r\n relatedItemName = \"faucet\";\r\n RelatedItemClass = Faucet;\r\n }\r\n break;\r\n case \"Sink\":\r\n if ((dbFeature.metaData[\"Placement\"] && dbFeature.metaData[\"Placement\"].includes(PLACEMENTS.Countertop)) || !dbFeature.metaData[\"Placement\"]) {\r\n if (!dbFeature.metaData[\"Placement\"]) {\r\n shouldLoadInDifferentGroups = true;\r\n }\r\n relatedItemName = \"sink\";\r\n RelatedItemClass = Sink;\r\n }\r\n break;\r\n case \"Stovetop\":\r\n if ((dbFeature.metaData[\"Placement\"] && dbFeature.metaData[\"Placement\"].includes(PLACEMENTS.Countertop)) || !dbFeature.metaData[\"Placement\"]) {\r\n if (!dbFeature.metaData[\"Placement\"]) {\r\n shouldLoadInDifferentGroups = true;\r\n }\r\n relatedItemName = \"stovetop\";\r\n RelatedItemClass = Stovetop;\r\n }\r\n break;\r\n }\r\n if (relatedItemName) {\r\n if (!this[relatedItemName]) {\r\n this[relatedItemName] = new RelatedItemClass(true);\r\n this.relatedItems.push(this[relatedItemName]);\r\n }\r\n if (!this.categoryEnabled) {\r\n this.categoryEnabled = true\r\n }\r\n this[relatedItemName].getParent = () => this;\r\n this[relatedItemName].load(dbFeature);\r\n return !shouldLoadInDifferentGroups;\r\n }\r\n return false\r\n }\r\n\r\n navigationItem() {\r\n return new DesignNavigationItem('Countertop', this);\r\n }\r\n\r\n isSubTypeWithItems() {\r\n return false;\r\n }\r\n\r\n handleSubPartClick() {\r\n\r\n }\r\n\r\n subParts(withHidden = true, hideWithoutFeatures = false) {\r\n return this.getRelatedItems()\r\n .filter(item => {\r\n if (hideWithoutFeatures && (item.partId === \"cutouts\" || item.partId === \"radius\")) {\r\n return false\r\n }\r\n return this.filterRelatedItem(item, withHidden)\r\n })\r\n .map(_ => new DesignNavigationItem(_.partName, _));\r\n }\r\n\r\n}\r\n","export const GROHE_POST_MESSAGES_ACTIONS = {\r\n exit: \"EXIT\",\r\n save: \"SAVE\",\r\n addToCart: \"ADDTOCART\",\r\n signIn: \"SIGNIN\",\r\n openMiniCart: \"OPENMINICART\",\r\n}\r\n\r\nexport const GROHE_ON_OPEN_ACTION = {\r\n shareFacebook: \"facebook\",\r\n shareTwitter: \"twitter\",\r\n sharePinterest: \"pinterest\",\r\n saveQuote: \"saveQuote\",\r\n}\r\n","import React from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport {injectIntl} from \"react-intl\";\r\nimport PropTypes from \"prop-types\";\r\n\r\nimport {\r\n getFeatureIsLocked,\r\n getFeatureUnit,\r\n getPriceWithCurrency,\r\n toFixedFeatureCost,\r\n toFixedPrice\r\n} from \"../../../../../misc/helpers\";\r\nimport {featureInterface} from \"../../../../../interfaces/featureInterface\";\r\nimport {getCurrentLayout} from \"../../../../appLayout\";\r\nimport {isVisibleForNavigation} from \"../../../../../misc/displayLogic\";\r\nimport LookFeaturePriceLocked from \"./lookFeaturePriceLocked\";\r\nimport {pricingIsLocked} from \"../../lookNavigationFunctions\";\r\nimport {getCartItemsCount} from \"../../../grohe/groheNavigation/groheFunctions\";\r\nimport MaterialSpinner from \"../../../../ui/materialSpinner\";\r\nimport FeaturePriceInput from \"../../../../selectionWindow/selectionFeatureInfo/featurePriceInput\";\r\n\r\nconst LookFeaturePrice = (props) => {\r\n\r\n const {lookFeature, quantity, fabricatorData, intl, withUnit, isBundleChild, className, listPage, mainContentPrice,\r\n isPhoneNumberValidated, showPriceAlways} = props;\r\n const fabricatorSettings = fabricatorData.settings;\r\n\r\n if (!lookFeature) {\r\n return null;\r\n }\r\n\r\n const getQuote = fabricatorSettings.enableQuote && !isPhoneNumberValidated;\r\n\r\n let showPriceLocked = !showPriceAlways && getFeatureIsLocked(lookFeature);\r\n if (!showPriceLocked && listPage) {\r\n showPriceLocked = getQuote;\r\n }\r\n const {showPrice} = pricingIsLocked();\r\n\r\n if (showPriceLocked) {\r\n if (!showPrice && listPage) {\r\n return null\r\n }\r\n let lockedText = \r\n {isLoading || !mainImageUrl ?
\r\n {withoutGallery ? null : (\r\n \r\n {mainImageUrl ? ![]()
thumbnailClick(activeImageIndex)}\r\n src={mainImageUrl.url} onLoad={() => toggleLoader(false)} alt=\"\"/> : null}\r\n
\r\n {lockedText}
: lockedText\r\n }\r\n\r\n if (!showPrice || !isVisibleForNavigation(lookFeature, true)) {\r\n return null\r\n }\r\n\r\n const layout = getCurrentLayout();\r\n if (!layout.initialized) {\r\n return {finalText}
: finalText\r\n\r\n};\r\n\r\nLookFeaturePrice.propTypes = {\r\n lookFeature: PropTypes.shape(featureInterface),\r\n withUnit: PropTypes.bool,\r\n quantity: PropTypes.number,\r\n className: PropTypes.string,\r\n listPage: PropTypes.bool,\r\n showPriceAlways: PropTypes.bool,\r\n mainContentPrice: PropTypes.bool,\r\n}\r\n\r\nconst mapStateToProps = (store, ownProps) => {\r\n const {isPhoneNumberValidated} = store.userState; // to update component when user is logged in\r\n const {cartItems} = store.cartState; // to update component when user is logged in\r\n const cartItemsLength = getCartItemsCount(cartItems, ownProps.intl, true);\r\n const {qtCategoriesLoaded} = store.qtState; // to update price after categories are loaded\r\n\r\n // we need force here to check every time count is updated, it is just for update\r\n\r\n // const featureInfoCount = ownProps.lookFeature && ownProps.lookFeature.dbFeature\r\n // && ownProps.lookFeature.dbFeature.priceEditable && ownProps.mainContentPrice\r\n // ? store.selectionState.featureInfoCount\r\n // : null;\r\n\r\n const featureInfoCount = store.selectionState.featureInfoCount;\r\n\r\n return {\r\n fabricatorData: store.fabricatorState,\r\n isPhoneNumberValidated,\r\n cartItemsLength, // we need to reload item price if quantity is changed (complex logic dependency)\r\n qtCategoriesLoadedLength: qtCategoriesLoaded.length,\r\n featureInfoCount,\r\n };\r\n};\r\n\r\nexport default injectIntl(\r\n connect(mapStateToProps)(LookFeaturePrice)\r\n)\r\n","import React from \"react\";\r\nimport {connect} from \"react-redux\";\r\nimport PropTypes from \"prop-types\";\r\nimport {injectIntl} from \"react-intl\";\r\n\r\nconst FeatureDescription = (props) => {\r\n\r\n const {feature, intl, fabricatorData, brief, className, textLength} = props;\r\n\r\n let desc = \"\";\r\n if ((fabricatorData.isLowes || fabricatorData.isCaesarStone) && intl.messages) {\r\n if (intl.locale === \"fr-FR\" && intl.messages[\"transDoc.description_FR.\" + feature.dbFeature.sharedFeatureName]) {\r\n desc = intl.formatMessage({id: \"transDoc.description_FR.\" + feature.dbFeature.sharedFeatureName})\r\n } else if (intl.locale === \"pl-PL\" && intl.messages[\"transDoc.customTranslateDescription_PL.\" + feature.dbFeature.sharedFeatureName]) {\r\n desc = intl.formatMessage({id: \"transDoc.customTranslateDescription_PL.\" + feature.dbFeature.sharedFeatureName})\r\n } else {\r\n desc = feature.dbFeature.description;\r\n }\r\n } else {\r\n desc = feature.dbFeature.description;\r\n }\r\n\r\n if (!desc) {\r\n return null\r\n }\r\n\r\n if (textLength && desc.length > textLength) {\r\n desc = desc.substring(0, textLength) + \"...\"\r\n } else if (brief && desc && desc.length > 200) {\r\n desc = desc.substring(0, 200) + \"...\"\r\n }\r\n\r\n return \r\n};\r\n\r\nFeatureDescription.propTypes = {\r\n feature: PropTypes.object.isRequired,\r\n className: PropTypes.string,\r\n brief: PropTypes.bool,\r\n textLength: PropTypes.number,\r\n}\r\n\r\nconst mapStateToProps = (store) => {\r\n return {\r\n fabricatorData: store.fabricatorState,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {};\r\n\r\nexport default injectIntl(\r\n connect(mapStateToProps, mapDispatchToProps)(FeatureDescription)\r\n)\r\n\r\n","'use strict';\r\n\r\nObject.defineProperty(exports, \"__esModule\", {\r\n value: true\r\n});\r\n\r\nvar _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };\r\n\r\nexports.showLoading = showLoading;\r\nexports.hideLoading = hideLoading;\r\nexports.resetLoading = resetLoading;\r\nexports.loadingBarReducer = loadingBarReducer;\r\n\r\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\r\n\r\nvar SHOW = exports.SHOW = 'loading-bar/SHOW';\r\nvar HIDE = exports.HIDE = 'loading-bar/HIDE';\r\nvar RESET = exports.RESET = 'loading-bar/RESET';\r\n\r\nvar DEFAULT_SCOPE = exports.DEFAULT_SCOPE = 'default';\r\n\r\nfunction showLoading() {\r\n var scope = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : DEFAULT_SCOPE;\r\n\r\n return {\r\n type: SHOW,\r\n payload: {\r\n scope: scope\r\n }\r\n };\r\n}\r\n\r\nfunction hideLoading() {\r\n var scope = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : DEFAULT_SCOPE;\r\n\r\n return {\r\n type: HIDE,\r\n payload: {\r\n scope: scope\r\n }\r\n };\r\n}\r\n\r\nfunction resetLoading() {\r\n var scope = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : DEFAULT_SCOPE;\r\n\r\n return {\r\n type: RESET,\r\n payload: {\r\n scope: scope\r\n }\r\n };\r\n}\r\n\r\nfunction loadingBarReducer() {\r\n var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};\r\n var action = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\r\n\r\n var _ref = action.payload || {},\r\n _ref$scope = _ref.scope,\r\n scope = _ref$scope === undefined ? DEFAULT_SCOPE : _ref$scope;\r\n\r\n switch (action.type) {\r\n case SHOW:\r\n return _extends({}, state, _defineProperty({}, scope, (state[scope] || 0) + 1));\r\n case HIDE:\r\n return _extends({}, state, _defineProperty({}, scope, Math.max(0, (state[scope] || 1) - 1)));\r\n case RESET:\r\n return _extends({}, state, _defineProperty({}, scope, 0));\r\n default:\r\n return state;\r\n }\r\n}","import _ from 'lodash';\r\n\r\nimport workspace from \"../workspace\";\r\nimport {POINT_PROPERTY} from \"../../../../constants\";\r\nimport {\r\n getCountertopArea,\r\n //getExportedManualCalculateBacksplashes,\r\n getExportedManualCalculateCountertops,\r\n //getExportedManualCalculateEdges,\r\n getSlabImagesAreaGrouped,\r\n manualCalculationsCountertopArea\r\n} from \"../../../../helpers/sqftCalculations\";\r\nimport config from \"../../store/sqftConfig\";\r\nimport store from \"./../../../../../../store\";\r\nimport sqftImageManager from \"../../store/sqftImageManager\";\r\nimport slabWorkspace from \"../slab/slabWorkspace\";\r\nimport {loaderDisable, loaderEnable} from \"../../../../../ui/loaderView\";\r\nimport html2canvas from \"html2canvas\";\r\nimport workspaceControllers, {getControllersExportData} from \"../../store/workspaceControllers\";\r\nimport {getQtCatName} from \"../../../../helpers/sqftQuotesHelper\";\r\nimport {\r\n SHAPE_PART_IDS_FROM_ADDITIONAL_SHAPES_LIST,\r\n} from \"../../../../constantsFeature\";\r\n\r\nexport const prepareSQFTData = async () => {\r\n const state = store.getState();\r\n const roomsWithVisitedSlabTool = state.sqftSlabState.roomsWithVisitedSlabTool;\r\n const showManualCalculation = state.sqftManualCalculationState.showManualCalculation;\r\n const slabImages = state.sqftSlabState.croppedSlabImages;\r\n const measureUnit = state.sqftState.measureUnit;\r\n const miteredEdges = workspace.miteredController ? workspace.miteredController.getExportedMiteredEdges() : [];\r\n let shapesList = workspace.getShapes()\r\n .filter(shp => { return shp.export &&\r\n !SHAPE_PART_IDS_FROM_ADDITIONAL_SHAPES_LIST.includes(shp.partId)\r\n })\r\n .map(shp => shp.export())\r\n .concat(miteredEdges);\r\n\r\n const totalSQFTArea = getCountertopArea();\r\n const qtCatName = getQtCatName();\r\n\r\n let workspaceCenter = _.clone(workspace.getCenter());\r\n const sqftApplianceImages = workspace.resultImages.getCanvasApplianceImages();\r\n\r\n const sqFtSlabImage = roomsWithVisitedSlabTool.includes(qtCatName) && slabImages && slabImages.length > 0 ? workspace.resultImages.getSlabResultImage(config.defaultScaleExport) : \"\";\r\n const sqFtSlabCalcImage = roomsWithVisitedSlabTool.includes(qtCatName) ? workspace.resultImages.getSlabCalcImage(config.defaultScaleExport) : \"\";\r\n const sqftCanvasImage = await getCanvasImage(showManualCalculation);\r\n const images3D = workspaceControllers.images3d.getResources();\r\n\r\n workspace.setCenter(workspaceCenter.x * 2 , workspaceCenter.y * 2);\r\n\r\n //save images local (for dev purposes)\r\n\r\n // const link = document.createElement(\"a\");\r\n // link.href = sqFtSlabImage.replace(\"image/png\", \"image/octet-stream\");\r\n // link.download = 'slabImage' + Date.now() + '.png';\r\n // document.body.appendChild(link);\r\n // link.click();\r\n // document.body.removeChild(link);\r\n\r\n return {\r\n bumpouts: workspace.getBumpouts(),\r\n canvasImage: sqftCanvasImage,\r\n sqFtSlabImage: sqFtSlabImage,\r\n sqFtSlabCalcImage: sqFtSlabCalcImage,\r\n sqftApplianceImages: sqftApplianceImages,\r\n images3D: images3D,\r\n slabImages: sqftImageManager.getExportedSlabImages(),\r\n measureUnit: measureUnit,\r\n sinks: workspace.getSink(),\r\n radii: workspace.getPointProperty(POINT_PROPERTY.arcLength),\r\n corners: workspace.getPointProperty(POINT_PROPERTY.angle),\r\n //walls: workspace.getShapeType('wall'),\r\n totalInches: totalSQFTArea.totalArea,\r\n shapeLength: totalSQFTArea.shapeLength,\r\n objIds: workspace.getObjIds(),\r\n removedFeatures: workspaceControllers.removedFeatures.getResources(),\r\n textBoxes: workspace.textBoxManager.getExportedTextBoxes(),\r\n slabAdditionalShapesList: slabWorkspace.slabAdditionalShapes.exportData(),\r\n slabImagesTotalArea: getSlabImagesAreaGrouped(),\r\n squareFeet: showManualCalculation ? manualCalculationsCountertopArea(): totalSQFTArea.totalAreaToMeasureUnit,\r\n //edges: showManualCalculation ? getExportedManualCalculateEdges() : workspace.getShapeType('edge').concat(miteredEdges),\r\n //backsplashes: showManualCalculation ? getExportedManualCalculateBacksplashes() : workspace.getShapeType('backsplash'),\r\n countertops: showManualCalculation ? getExportedManualCalculateCountertops() : shapesList,\r\n manualCalculate: showManualCalculation,\r\n controllers: getControllersExportData(),\r\n underlayment: workspace.underlaymentController ? workspace.underlaymentController.exportData() : []\r\n }\r\n};\r\n\r\nconst getCanvasImage = async (showManualCalculation) => {\r\n if (showManualCalculation) {\r\n const manualDiv = document.querySelector(\".manual-window\");\r\n if (manualDiv) {\r\n loaderEnable(\"loader.savingQuoteText\");\r\n manualDiv.classList.add(\"manual-window--screenshot\");\r\n try {\r\n const canvasElement = await html2canvas(manualDiv);\r\n manualDiv.classList.remove(\"manual-window--screenshot\");\r\n loaderDisable();\r\n if (canvasElement && canvasElement.toDataURL) {\r\n return canvasElement.toDataURL(\"image/jpeg\", 0.7) // we don't need super quality here\r\n }\r\n } catch (e) {\r\n loaderDisable();\r\n }\r\n }\r\n }\r\n return workspace.resultImages.getCanvasImageScaled(config.defaultScaleExport);\r\n};\r\n","import point from \"../point\";\r\nimport line from \"../line\";\r\n\r\nconst Polygon = (pointsCords, clonePoint = false, canPointsBeMoved = false) => {\r\n let points = [];\r\n let lines = [];\r\n\r\n for (let pointCord of pointsCords) {\r\n let newPoint = new point(pointCord.x, pointCord.y, undefined, undefined, canPointsBeMoved)\r\n if (clonePoint && pointCord instanceof point) {\r\n newPoint.import(pointCord.export());\r\n }\r\n points.push(newPoint);\r\n }\r\n for (let i in points) {\r\n if (points[+i + 1]) {\r\n lines.push(new line(points[i], points[+i + 1]))\r\n } else {\r\n lines.push(new line(points[i], points[0]))\r\n }\r\n }\r\n\r\n return lines;\r\n};\r\n\r\nexport default Polygon\r\n","import flatMap from 'lodash/flatMap';\r\n\r\nimport store from \"./../../store\";\r\nimport * as types from \"../../actions/actionTypes\";\r\nimport LayoutCommon from \"./layoutCommon\";\r\nimport {SQFT_FEATURES} from \"../sqft/constants\";\r\nimport {getSlabsFeatureGroup} from \"../../misc/helpers\";\r\nimport {setActivePreset} from \"../../actions/actionFunctions\";\r\n// import {getBvGroupFeatures} from \"../../api/server-api\";\r\n\r\nexport default class LayoutCommonNew extends LayoutCommon {\r\n\r\n isNewLayout = true;\r\n\r\n // /**\r\n // * Returns feature\r\n // * @param neededId {number}\r\n // * @param withOtherGroups {boolean}\r\n // * @returns feature {object}\r\n // */\r\n // getFeatureById(neededId, withOtherGroups = false) {\r\n // let allFeatures = this.getAllFeatures(withOtherGroups);\r\n // for (let i = 0; i < allFeatures.length; i++) {\r\n // if (allFeatures[i].dbFeature.id === neededId) {\r\n // return allFeatures[i];\r\n // }\r\n // }\r\n // return null\r\n // }\r\n\r\n // /**\r\n // * Returns feature\r\n // * @param skuNumber {string}\r\n // * @param featureGroupPartId {string}\r\n // * @returns feature {object}\r\n // */\r\n // getFeatureBySku(skuNumber, featureGroupPartId= \"\") {\r\n // if (featureGroupPartId) {\r\n // const featureGroupFound = this.getFeatureGroupByPartId(featureGroupPartId);\r\n // if (featureGroupFound) {\r\n // for (let i = 0; i < featureGroupFound.features.length; i++) {\r\n // if (featureGroupFound.features[i].dbFeature.sku === skuNumber) {\r\n // return featureGroupFound.features[i];\r\n // }\r\n // }\r\n // }\r\n // }\r\n // let allFeatures = this.getAllFeatures();\r\n // for (let i = 0; i < allFeatures.length; i++) {\r\n // if (allFeatures[i].dbFeature.sku === skuNumber) {\r\n // return allFeatures[i];\r\n // }\r\n // }\r\n // return null\r\n // }\r\n\r\n /**\r\n * @param partId {string}\r\n * @param compressedFeature {object}\r\n * @param featuresToLoad {Array} // only if layout is changed - we need to load features to changed feature group\r\n * @return featureLoaded {featureInterface}\r\n */\r\n getFeatureFromAllLayouts = (partId, compressedFeature, featuresToLoad) => {\r\n const {dbFeatureId} = compressedFeature;\r\n const parentItems = this.getFeatures(true);\r\n let childSubPart = null;\r\n let featureLoaded = null;\r\n parentItems.forEach(parentGroup => {\r\n if (childSubPart) {\r\n return\r\n }\r\n if (partId === SQFT_FEATURES.slabs) {\r\n childSubPart = getSlabsFeatureGroup(this)\r\n } else if (parentGroup) {\r\n childSubPart = parentGroup.subParts().find(subPart => subPart.part.partId === partId);\r\n }\r\n if (childSubPart && childSubPart.part.features) {\r\n featureLoaded = childSubPart.part.getFeatureById(dbFeatureId, true);\r\n if (!featureLoaded) { // if feature isn't found in the current layout, let's find it in another layouts\r\n let allFeatures = [];\r\n Object.keys(this.layoutNames).forEach((layoutType) => {\r\n if (layoutType !== \"All\") {\r\n allFeatures = [...allFeatures, ...childSubPart.part.featuresList[layoutType]]\r\n }\r\n });\r\n featureLoaded = allFeatures.find((feature) => feature.dbFeature.id === dbFeatureId);\r\n if (!featureLoaded\r\n && (document.kvConfig.visualizerType === \"Kitchen\" || document.kvConfig.visualizerType === \"kvScene\")\r\n && this.qtCategories && this.qtCategories.some(qtCat => qtCat.qtCategoryHasBeenChanged)\r\n && featuresToLoad.length\r\n ) {\r\n // console.info(\"Cart feature is not loaded, trying in change categories:\", dbFeatureId);\r\n this.qtCategories.forEach(qtCat => {\r\n const changedSubPart = qtCat.subParts.find(subPart => subPart.part.partId === partId);\r\n if (changedSubPart) {\r\n // console.info(\"Cart feature is not loaded, found subpart:\", cartItem);\r\n const needToLoadFeature = featuresToLoad.find(dbFeature => dbFeature.id === dbFeatureId);\r\n if (needToLoadFeature) {\r\n changedSubPart.part.setGroupFeatures([needToLoadFeature], 0, false)\r\n }\r\n featureLoaded = childSubPart.part.features.find((feature) => feature.dbFeature.id === dbFeatureId);\r\n // if (featureLoaded) {\r\n // console.info(\"Cart feature is not loaded, it's ok, we found it:\", dbFeatureId, featureLoaded);\r\n // }\r\n }\r\n })\r\n }\r\n if (!featureLoaded) {\r\n if ((partId === \"slabs\") && compressedFeature && compressedFeature.partId) {\r\n const featureGroup = this.getFeatureGroupByPartId(compressedFeature.partId);\r\n if (featureGroup) {\r\n featureLoaded = featureGroup.getFeatureById(dbFeatureId, true);\r\n }\r\n }\r\n }\r\n if (!featureLoaded) {\r\n console.error(\"Cart feature is not loaded:\", partId, dbFeatureId);\r\n }\r\n }\r\n // console.log('featureLoaded', featureLoaded);\r\n }\r\n });\r\n return featureLoaded\r\n }\r\n\r\n\r\n /**\r\n *\r\n * @param bvState {object}\r\n * @param isCartAndUserStatedUpdateNeeded {boolean}\r\n * @param useNames {boolean}\r\n * @param needToChangeLayout {boolean}\r\n * @param firstLoad {boolean}\r\n * @param isFake {boolean}\r\n */\r\n setActiveFeaturesFromObject(\r\n bvState,\r\n isCartAndUserStatedUpdateNeeded = false,\r\n useNames = false,\r\n needToChangeLayout = true,\r\n firstLoad = false,\r\n isFake = false\r\n ) {\r\n if (bvState) {\r\n\r\n const layout_type = +bvState.layout_type;\r\n needToChangeLayout = needToChangeLayout && (layout_type || layout_type === 0) && (layout_type !== +this.type);\r\n\r\n if (needToChangeLayout) {\r\n this.type = layout_type;\r\n }\r\n this.scene = bvState.scene || this.scene;\r\n\r\n console.log(\"bvState===>\", bvState);\r\n console.log(\"bvState firstLoad\", firstLoad);\r\n // to avoid checks below\r\n bvState.disabled_parts = bvState.disabled_parts || [];\r\n\r\n this.getFeatures()\r\n .forEach((parentGroup) => {\r\n let relatedItems = parentGroup.getRelatedItems();\r\n relatedItems.forEach((subPart) => {\r\n const partId = subPart.partId;\r\n let previouslySelectedItem = null;\r\n subPart.selectedFeaturesHistory.some(featureName => {\r\n previouslySelectedItem = subPart.getFeatureByPartName(featureName);\r\n return previouslySelectedItem\r\n });\r\n if (bvState.hasOwnProperty(partId) || previouslySelectedItem) {\r\n if (!bvState.disabled_parts.includes(partId)) {\r\n subPart.disabled = false\r\n }\r\n if (useNames) {\r\n const matchingFeature = (partId === \"backsplash\" && bvState[\"backsplash_type\"])\r\n ? subPart.getFeatureByBacksplashType(bvState[\"backsplash_type\"], bvState[\"backsplash\"])\r\n : subPart.getFeatureByPartName(bvState[partId]);\r\n if (matchingFeature) {\r\n subPart.activeFeature = matchingFeature;\r\n } else if (previouslySelectedItem) {\r\n subPart.activeFeature = previouslySelectedItem;\r\n }\r\n } else {\r\n subPart.activeFeature = subPart.getFeatureById(bvState[partId], true) || parentGroup.getDefaultFeature();\r\n }\r\n if (subPart.layerPositions && subPart.activeFeature) {\r\n // subPart.setLayerPositions(); // enabled // we have to set vanity on its layerPosition, grohe vanities have different sku so can not be found in the code below\r\n Object.keys(subPart.layerPositions).forEach(position => {\r\n const partIdPosition = partId + \"_\" + position;\r\n if (bvState.disabled_parts.includes(partIdPosition)) {\r\n subPart.layerPositions[position] = null;\r\n } else if (bvState[partIdPosition]) {\r\n subPart.layerPositions[position] = useNames\r\n ? subPart.getMatchingPositionFeature(position, subPart.activeFeature, isFake ? this : null)\r\n : subPart.getFeatureById(bvState[partIdPosition], true)\r\n } else if (!((position !== \"C\" && subPart.activeFeature.metaData.layerPosition === \"C\") || (subPart.activeFeature.metaData.layerPosition !== \"C\" && position === \"C\"))) {\r\n subPart.layerPositions[position] = subPart.getMatchingPositionFeature(position, subPart.activeFeature, isFake ? this : null)\r\n }\r\n })\r\n // } else if (subPart.hasAdditionalParts && (subPart.activeFeatureParts == null || !subPart.activeFeatureParts.length)) {\r\n // subPart.activeFeatureParts = subPart.setActiveFeatureParts();\r\n }\r\n subPart.placeholderChanged = !!subPart.activeFeature;\r\n // const {activeQuoteIndex} = store.getState().quotesState;\r\n // subPart.firstClick = !!subPart.activeFeature;\r\n // if (subPart.firstClick) {\r\n // console.log(\"subPart.firstClick\", subPart);\r\n // }\r\n }\r\n if (bvState.disabled_parts.includes(partId)) {\r\n subPart.disabled = true\r\n }\r\n if (!subPart.activeFeature) {\r\n // we might have features uploaded only for one room layout as in case of replacement tub on american_standard_master\r\n subPart.setDefault()\r\n }\r\n if (!subPart.disabled && subPart.layerPositions && Object.values(subPart.layerPositions).every(feature => !feature)) {\r\n subPart.setLayerPositions(); // mirror cases\r\n }\r\n if (subPart.activeFeature && firstLoad) {\r\n if (!subPart.activeFeature.notAvailableInVisualizer) {\r\n subPart.activeFeature.dbFeature.unlocked = true;\r\n }\r\n if (subPart.layerPositions) {\r\n Object.keys(subPart.layerPositions).forEach(position => {\r\n if (subPart.layerPositions[position]) {\r\n subPart.layerPositions[position].dbFeature.unlocked = true;\r\n }\r\n })\r\n }\r\n if (subPart.hasAdditionalParts && subPart.activeFeatureParts && subPart.activeFeatureParts.length) {\r\n subPart.activeFeatureParts.forEach(additionalFeature => {\r\n additionalFeature.dbFeature.unlocked = true;\r\n })\r\n }\r\n }\r\n })\r\n });\r\n\r\n if (needToChangeLayout) {\r\n this.changeLayout(this.getFeatures());\r\n }\r\n\r\n if (isCartAndUserStatedUpdateNeeded) {\r\n this.setCartStateAndUserStateFromBvState(bvState);\r\n }\r\n\r\n const layoutParts = this.designNavigationItems()\r\n .filter(parentGroup => parentGroup.part.categoryEnabled)\r\n .map((parentGroup) => parentGroup.part.partName);\r\n\r\n if (!this.isFakeLayout) {\r\n store.dispatch({\r\n type: types.SET_LAYOUT_DATA_PARTS,\r\n payload: {layoutParts}\r\n });\r\n }\r\n\r\n store.dispatch({\r\n type: types.UPDATE_CANVAS_COUNT\r\n });\r\n\r\n if (bvState.id) {\r\n store.dispatch(setActivePreset(bvState.id));\r\n }\r\n\r\n }\r\n }\r\n\r\n fixFeatureMetaData(dbFeature) {\r\n // if (Array.isArray(dbFeature.metaData.CropCoords) && !dbFeature.metaData.CropCoords[1] && dbFeature.metaData.CropCoords[0]) {\r\n // dbFeature.metaData.CropCoords = dbFeature.metaData.CropCoords[0].split(\",\"); // ['0, 460, 1060, 574'] -> ['0', ' 460', ' 1060', ' 574']\r\n // }\r\n if (!Array.isArray(dbFeature.metaData.RoomLayout) || !dbFeature.metaData.RoomLayout.length) {\r\n dbFeature.metaData.RoomLayout = [\"Layout1\"];\r\n } else {\r\n // console.log(\"dbFeature.metaData.RoomLayout\", dbFeature.metaData.RoomLayout);\r\n dbFeature.metaData.RoomLayout = dbFeature.metaData.RoomLayout.map((mValue) => {\r\n if (typeof mValue !== \"string\" || !mValue.includes(\"Layout\")) {\r\n mValue = \"Layout\" + mValue\r\n }\r\n return mValue\r\n })\r\n }\r\n Object.keys(dbFeature.metaData).forEach(key => {\r\n if (Array.isArray(dbFeature.metaData[key]) && (key !== \"CropCoords\")) {\r\n dbFeature.metaData[key] = flatMap(dbFeature.metaData[key], (metaValue => {\r\n if (typeof metaValue === \"string\") {\r\n if (metaValue.includes(\", \")) {\r\n return metaValue.split(\", \")\r\n } else if (metaValue.includes(\",\")) {\r\n return metaValue.split(\",\")\r\n }\r\n }\r\n return metaValue\r\n }));\r\n if (key === \"SortPosition\") {\r\n dbFeature.metaData[\"SortPositionNum\"] = +(dbFeature.metaData[key][0])\r\n }\r\n }\r\n });\r\n return dbFeature\r\n }\r\n\r\n}\r\n\r\n","import $ from 'jquery';\r\n\r\nimport values from 'lodash/values';\r\nimport find from 'lodash/find';\r\nimport orderBy from 'lodash/orderBy';\r\nimport isEqual from \"lodash/isEqual\";\r\n\r\nimport store from \"./../../store\";\r\nimport {\r\n fixDbFeatureProperties,\r\n getArrayOfIdsFromBvState,\r\n getSlabsFeatureGroup,\r\n} from \"../../misc/helpers\";\r\nimport {baseDashboardImagesPath} from \"../assets\";\r\nimport DesignNavigationItem from \"./designNavigationItem\";\r\nimport ActionTypes from \"../../misc/actionTypes\";\r\nimport {isFeatureEnabled, isVisibleForNavigation} from \"../../misc/displayLogic\";\r\nimport * as types from \"../../actions/actionTypes\";\r\nimport {setActiveQuoteIndex, setQuotes} from \"../../actions/roomsFunctions\";\r\nimport {\r\n restoreCart,\r\n setQtCategoriesLoaded,\r\n // toggleUseFabricatorCostPrices\r\n} from \"../../actions/actionFunctions\";\r\nimport {restoreContractValues} from \"../../actions/contractsActions\";\r\nimport {getBvFeatures} from \"../../api/server-api\";\r\nimport {dbFeatureRelatedFeaturesProperties, PartMenuType} from \"./constants\";\r\nimport {changeSqftFeaturesPopup} from \"../../actions/sqftFunctions\";\r\nimport {SQFT_FEATURES} from \"../sqft/constants\";\r\nimport {getLookId} from \"../look/lookNavigation/lookFunctions2\";\r\nimport {AVAILABLE_VISUALIZER_TYPES, IS_LIXIL_UI, IS_OFFLINE_MODE} from \"../../config\";\r\n// import {getBvGroupFeatures} from \"../../api/server-api\";\r\nimport {getCommonVisualizerType} from \"../../config\";\r\nimport {getCurrentLayout, getCurrentZIndexes} from \"../appLayout\";\r\nimport {LOOK_ROOM_TYPES} from \"../look/core/constants\";\r\nimport {getCurrentRoomType} from \"../appLayout\";\r\nimport Config from \"../../config\";\r\nimport {\r\n fixFeaturesResponse,\r\n getCartItemPartIdFix,\r\n getCompressedCartItems,\r\n getFeatureGroupsProperties, setFeatureGroupsProperties\r\n} from \"../../misc/backendFunctions\";\r\nimport {\r\n getAvailableSteps,\r\n getCompressedAllWizardValues\r\n} from \"../look/lookNavigation/lookMain/lookWizard/lookWizardFunctions\";\r\nimport {restoreAllWizardSelectedValues} from \"../../actions/wizardFunctions\";\r\nimport {replaceIncorrectSymbols} from \"../../misc/misc2\";\r\nimport {requestAfterRoomChange} from \"../look/lookNavigation/lookNavigationFunctions\";\r\nimport {updateCurrentQuote} from \"../../misc/quotesFunctions\";\r\nimport {\r\n getFeatureGroupFromWizardSteps,\r\n getUpdatedWizardId\r\n} from \"../look/lookNavigation/lookMain/lookWizard/lookWizardFunctions2\";\r\nimport {updateExistingFeature} from \"./featuresFunctions\";\r\nimport {setReceiptSignature} from \"../../actions/printFunctions\";\r\n\r\nexport default class LayoutCommon {\r\n initialized = false;\r\n selectedLayoutFeatures = {};\r\n disabledClickablePartIds = [];\r\n allDbFeatures = []; // is used for creating fake layouts\r\n\r\n /**\r\n * An hash-table of parts, so we can find easily needed part by its ID\r\n * @type {Object. this.keyboardFrame = node} onClick={(e) => e.stopPropagation()}>\r\n : null}\r\n {showLockedView\r\n ? \r\n : null}\r\n
\r\n )\r\n }\r\n\r\n}\r\n\r\nconst mapStateToProps = (store) => ({\r\n filtersVisible: store.filterState.showFilters,\r\n filterGroups: store.filterState.filterGroups,\r\n bvPresets: store.bathroomVisualizerState.bvPresets,\r\n bvOpened: store.bathroomVisualizerState.bvOpened,\r\n userIsLoggedIn: store.userState.userIsLoggedIn,\r\n isPhoneNumberValidated: store.userState.isPhoneNumberValidated,\r\n activeNavigationFilter: store.navigationState.activeNavigationFilter,\r\n countertopNavigationFilterCompleted: store.navigationState.countertopNavigationFilterCompleted,\r\n visualizerTutorialStep: store.tutorialState.visualizerTutorialStep,\r\n visualizerTutorialIsOpened: store.tutorialState.visualizerTutorialIsOpened,\r\n activeQuoteIndex: store.quotesState.activeQuoteIndex,\r\n navItemPositionModal: store.navigationState.navItemPositionModal,\r\n});\r\n\r\nconst mapDispatchToProps = {\r\n setNavigationViewType,\r\n toggleDesktopNavigation,\r\n setActiveNavigationNames,\r\n setModuleContextMenuType,\r\n setActiveNavigationFilter,\r\n setActiveNavigationFilterStepIndex,\r\n setDefaultSelectionGroup,\r\n changeActivePartRelatedItemIndex,\r\n setVisualizerTutorialStep,\r\n showVisualizerTutorial,\r\n setNavigationLoading,\r\n toggleNavItemPositionModal\r\n};\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(DesktopNavigation);\r\n","import React, {useEffect, useState} from \"react\";\r\nimport $ from \"jquery\";\r\nimport {connect} from \"react-redux\";\r\nimport PropTypes from \"prop-types\";\r\nimport {FormattedMessage, injectIntl} from \"react-intl\";\r\n\r\nimport {CORNER_SHELVES_POSITIONS, PAN_POSITIONS, SIDE_POSITIONS} from \"../../bvSceneComponent/core/constants\";\r\nimport ActionTypes from \"../../../misc/actionTypes\";\r\nimport {getFeatureIsLocked} from \"../../../misc/helpers\";\r\nimport {changeMessageBoxState, updateCanvasCount} from \"../../../actions/actionFunctions\";\r\nimport {featureInterface} from \"../../../interfaces/featureInterface\";\r\n\r\nconst getPositionName = (position) => {\r\n switch (position) {\r\n case CORNER_SHELVES_POSITIONS[0]:\r\n case CORNER_SHELVES_POSITIONS[3]:\r\n return \"modalCheckboxPosition.top\"\r\n case CORNER_SHELVES_POSITIONS[1]:\r\n case CORNER_SHELVES_POSITIONS[4]:\r\n return \"modalCheckboxPosition.center\"\r\n case CORNER_SHELVES_POSITIONS[2]:\r\n case CORNER_SHELVES_POSITIONS[5]:\r\n return \"modalCheckboxPosition.bottom\"\r\n case SIDE_POSITIONS[0]:\r\n case PAN_POSITIONS[0]:\r\n return \"modalCheckboxPosition.left\"\r\n case SIDE_POSITIONS[1]:\r\n case PAN_POSITIONS[2]:\r\n return \"modalCheckboxPosition.right\"\r\n case PAN_POSITIONS[1]:\r\n return \"modalCheckboxPosition.center\"\r\n }\r\n return \"\"\r\n};\r\n\r\nconst NavItemPositionModalButton = (props) => {\r\n\r\n const {position, parent, checkboxesUpdated, updateCheckboxes, changeMessageBoxState, intl, updateCanvasCount,\r\n activeFeature} = props;\r\n const [checked, setChecked] = useState(false);\r\n const positionName = getPositionName(position);\r\n\r\n const updateChecked = () => {\r\n const matchingPositionFeature = parent.getMatchingPositionFeature(position, activeFeature);\r\n const isChecked = parent.oneLayerPosition\r\n ? !parent.disabled && (parent.activeFeature && (parent.activeFeature.dbFeature.metaData[\"layerPosition\"] === position))\r\n && matchingPositionFeature && (matchingPositionFeature.getSplittedFeatureName() === parent.activeFeature.getSplittedFeatureName())\r\n : !parent.disabled && parent.layerPositions && !!parent.layerPositions[position] && matchingPositionFeature\r\n && (matchingPositionFeature.getSplittedFeatureName() === parent.layerPositions[position].getSplittedFeatureName())\r\n\r\n setChecked(isChecked)\r\n };\r\n\r\n useEffect(() => {\r\n updateChecked();\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [checkboxesUpdated, position, activeFeature]);\r\n\r\n const buttonClick = (event, fromConflictingPopup = false) => {\r\n if (parent.conflictingPositions && !fromConflictingPopup) { // shower_seats & valve_trim\r\n const conflictingPositions = parent.checkConflictingPosition(position, activeFeature);\r\n if (conflictingPositions.length) {\r\n callConflictingPopup(conflictingPositions);\r\n return\r\n }\r\n }\r\n if (parent.disabled) {\r\n parent.disabled = false;\r\n parent.disabledClick(); // disable also related parts\r\n if (!parent.oneLayerPosition) {\r\n Object.keys(parent.layerPositions).forEach(key => {\r\n if (key !== position) {\r\n parent.layerPositions[key] = null; // it can be only on one side on enable (if old feature exist and we clicked on another one)\r\n }\r\n })\r\n }\r\n }\r\n const matchingPositionFeature = parent.getMatchingPositionFeature(position, activeFeature);\r\n if (parent.oneLayerPosition) {\r\n matchingPositionFeature.handleClick(true); // to apply not compatible and so on // ignore locked as we it should be visible if clicked feature is unlocked\r\n } else {\r\n if (parent.isShowerCommonGroup && matchingPositionFeature && !checked) {\r\n if (parent.partId === \"shower_arm\") {\r\n parent.checkForSameMountPosition(matchingPositionFeature); // this removes different mount position features\r\n }\r\n matchingPositionFeature.handleClick(true); // set active feature and shower head type\r\n } else if (parent.partId === \"shower_fixture\" && matchingPositionFeature && !checked && parent.getParent().setShowerHeadType) {\r\n // parent.getParent().setShowerHeadType(ShowerHeadTypes.shower_fixture);\r\n matchingPositionFeature.handleClick(true); // set active feature and shower head type\r\n } else if (parent.partId === \"replacement_tub_fixture\") {\r\n matchingPositionFeature.handleClick(true); // set tub combo // ignore locked as we it should be visible if clicked feature is unlocked\r\n }\r\n parent.layerPositions[position] = checked ? null : matchingPositionFeature;\r\n if (parent.isShowerCommonGroup) { // tool version 6 for now only\r\n if (parent.partId === \"shower_head\") {\r\n parent.togglePosition(position, \"shower_arm\");\r\n } else if (parent.partId === \"shower_arm\") {\r\n parent.togglePosition(position, \"shower_head\");\r\n } else if (parent.partId === \"hand_shower_only\") {\r\n parent.togglePosition(position, \"hand_shower_holder\");\r\n parent.togglePosition(position, \"shower_hose\");\r\n parent.togglePosition(position, \"wall_union\");\r\n } else if (parent.partId === \"shower_hose\") {\r\n parent.togglePosition(position, \"hand_shower_holder\");\r\n parent.togglePosition(position, \"hand_shower_only\");\r\n parent.togglePosition(position, \"wall_union\");\r\n } else if (parent.partId === \"hand_shower_holder\") {\r\n parent.togglePosition(position, \"hand_shower_only\");\r\n parent.togglePosition(position, \"shower_hose\");\r\n parent.togglePosition(position, \"wall_union\");\r\n } else if (parent.partId === \"wall_union\") {\r\n parent.togglePosition(position, \"hand_shower_only\");\r\n parent.togglePosition(position, \"shower_hose\");\r\n parent.togglePosition(position, \"hand_shower_holder\");\r\n }\r\n }\r\n // && (!matchingPositionFeature || (parent.layerPositions[position].dbFeature.id === matchingPositionFeature.dbFeature.id))) { //already selected\r\n }\r\n // const checkRelatedFeatureGroups = [\"grab_bar\", \"soap_dish\", \"shower_seats\", \"large_corner_seat\"];\r\n const checkRelatedFeatureGroups = [\"shower_seats\", \"large_corner_seat\"];\r\n if (checkRelatedFeatureGroups.includes(parent.partId)) {\r\n parent.checkRelatedFeatureGroupPositions(position);\r\n // if (parent.partId === \"grab_bar\") {\r\n // parent.checkCurrentPositions(position);\r\n // }\r\n }\r\n if (parent.partId === \"grab_bar\" && parent.checkCenterGrabWall) {\r\n parent.checkCenterGrabWall(position);\r\n }\r\n updateCheckboxes();\r\n $(window).trigger(ActionTypes.UPDATE_ALL_ITEMS); // update footer items\r\n updateCanvasCount();\r\n };\r\n\r\n let checkboxDisabled = false;\r\n // if (parent.partId === \"corner_shelf\") { // disable top & center\r\n // const windowParent = parent.getParent().layout.parts.Window;\r\n // if (windowParent && windowParent.windowKits && !windowParent.windowKits.disabled && !position.includes(\"3\")) {\r\n // checkboxDisabled = true;\r\n // }\r\n // }\r\n if (parent.partId === \"shower_head\") { // disable top & center\r\n const showerArm = parent.getParent().showerArm;\r\n if (showerArm && !showerArm.disabled && showerArm.layerPositions && !showerArm.getMatchingPositionFeature(position)) {\r\n // we can't use !showerArm.layerPositions[position] because if we disable in modal ope position - it becomes disabled\r\n checkboxDisabled = true;\r\n }\r\n }\r\n\r\n const callConflictingPopup = (conflictingPositions) => {\r\n const message = {\r\n id: \"messageBox.metaDataMatchesFailed\",\r\n featureGroup: activeFeature.partId === \"shower_seats\" ? \"Seat\" : activeFeature.getParent().partName,\r\n featureName: activeFeature.getFeatureName(),\r\n nonCompatibleWith: conflictingPositions[0].getParent().partName,\r\n };\r\n changeMessageBoxState({\r\n visible: true,\r\n message,\r\n buttons: [{\r\n text: \"messageBox.buttonNo\",\r\n color: \"blue\",\r\n click: () => {\r\n changeMessageBoxState({visible:false});\r\n }\r\n }, {\r\n text: \"messageBox.buttonYes\",\r\n color: 'green',\r\n click: () => {\r\n parent.applyConflictingPosition(position, activeFeature);\r\n buttonClick({}, true);\r\n changeMessageBoxState({visible:false});\r\n }\r\n }]\r\n })\r\n }\r\n\r\n const disabledCheckboxClick = () => {\r\n if (parent.partId === \"corner_shelf\") { // disable top & center\r\n const matchingPositionFeature = parent.getMatchingPositionFeature(position, activeFeature);\r\n\r\n const featureIsLocked = getFeatureIsLocked(matchingPositionFeature);\r\n if (!featureIsLocked) {\r\n const message = {\r\n id: \"messageBox.metaDataMatchesFailed\",\r\n featureGroup: matchingPositionFeature.getParent().partName,\r\n featureName: intl.formatMessage({id: positionName}) + \" \" + matchingPositionFeature.getFeatureName(),\r\n nonCompatibleWith: \"Window Kit\"\r\n };\r\n changeMessageBoxState({\r\n visible: true,\r\n message,\r\n buttons: [{\r\n text: \"messageBox.buttonYes\",\r\n color: 'green',\r\n click: () => {\r\n const windowParent = parent.getParent().layout.parts.Window;\r\n windowParent.windowKits.disabled = true;\r\n buttonClick();\r\n changeMessageBoxState({visible:false});\r\n }\r\n },{\r\n text: \"messageBox.buttonNo\",\r\n color: \"blue\",\r\n click: () => {\r\n changeMessageBoxState({visible:false});\r\n }\r\n }]\r\n });\r\n }\r\n }\r\n }\r\n\r\n return (\r\n \r\n )\r\n};\r\n\r\nNavItemPositionModalButton.propTypes = {\r\n position: PropTypes.string.isRequired,\r\n parent: PropTypes.object.isRequired,\r\n checkboxesUpdated: PropTypes.bool.isRequired,\r\n updateCheckboxes: PropTypes.func.isRequired,\r\n activeFeature: PropTypes.shape(featureInterface),\r\n}\r\n\r\nconst mapStateToProps = (store) => {\r\n return {\r\n navItemPositionModal: store.navigationState.navItemPositionModal\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n changeMessageBoxState,\r\n updateCanvasCount,\r\n};\r\n\r\nexport default injectIntl(\r\n connect(mapStateToProps, mapDispatchToProps)(NavItemPositionModalButton)\r\n)\r\n","import React from \"react\";\r\nimport $ from \"jquery\";\r\nimport {connect} from \"react-redux\";\r\nimport PropTypes from \"prop-types\";\r\nimport {FormattedMessage, injectIntl} from \"react-intl\";\r\n\r\nimport ActionTypes from \"../../../misc/actionTypes\";\r\nimport {updateCanvasCount} from \"../../../actions/actionFunctions\";\r\nimport {featureInterface} from \"../../../interfaces/featureInterface\";\r\nimport {SLAT_WALL_POSITIONS} from \"../../commonVisualizer/core/constants\";\r\n\r\nconst NavItemPositionModalSlatWall = (props) => {\r\n\r\n const {parent, updateCheckboxes, updateCanvasCount, styles, triangleStyles, isWizard, activeFeature} = props;\r\n\r\n let checkboxDisabled = false;\r\n\r\n const isCurrentFeatureActive = parent.activeFeature && activeFeature\r\n && (activeFeature.getSplittedFeatureName() === parent.activeFeature.getSplittedFeatureName());\r\n\r\n const buttonClick = (position) => {\r\n if (checkboxDisabled) {\r\n return\r\n }\r\n if (parent.disabled) {\r\n parent.disabled = false;\r\n parent.disabledClick(); // disable also related parts\r\n }\r\n if (!isCurrentFeatureActive && activeFeature) {\r\n activeFeature.handleClick(); // to apply not compatible and so on\r\n }\r\n parent.slatWallType = position;\r\n parent.activeFeatureParts = parent.setActiveFeatureParts();\r\n updateCheckboxes();\r\n $(window).trigger(ActionTypes.UPDATE_ALL_ITEMS); // update footer items\r\n updateCanvasCount();\r\n };\r\n\r\n const getSlatWallButton = (position) => {\r\n const checkboxDisabled = false;\r\n const checked = isCurrentFeatureActive && (parent.slatWallType === position);\r\n return (\r\n \r\n )\r\n }\r\n\r\n return (\r\n \r\n
\r\n );\r\n }\r\n\r\n renderEmailPanel = () => {\r\n if (this.props.type !== 'email') {\r\n return null;\r\n }\r\n\r\n return (\r\n Drag to Move
\r\n {this.state.hidden ? null : (\r\n \r\n
\r\n )}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \" image={arrowKeys.right}\r\n runKeyStroke={this.runKeyStroke}/>\r\n
\r\n {this.renderEmailPanel()}\r\n \r\n @gmail.com \r\n @yahoo.com \r\n @hotmail.com \r\n @aol.com \r\n @msn.com \r\n @me.com \r\n @icloud.com \r\n .com \r\n .net \r\n
\r\n );\r\n };\r\n\r\n renderNumericKeyboard = (visible) => {\r\n //\r\n return (\r\n\r\n \r\n : null}\r\n \r\n
\r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = (store) => ({\r\n fabricatorData: store.fabricatorState,\r\n selectedFilters: store.filterState.selectedFilters,\r\n filtersVisible: store.filterState.showFilters,\r\n filterGroups: store.filterState.filterGroups,\r\n bvPresets: store.bathroomVisualizerState.bvPresets,\r\n userPopupOpened: store.userState.userPopupOpened,\r\n activeNavigationFilter: store.navigationState.activeNavigationFilter,\r\n countertopNavigationFilterCompleted: store.navigationState.countertopNavigationFilterCompleted,\r\n newLayoutType: store.sqftState.newLayoutType,\r\n activeQuoteIndex: store.quotesState.activeQuoteIndex,\r\n});\r\n\r\nconst mapDispatchToProps = {\r\n setNavigationViewType,\r\n setModuleContextMenuType,\r\n setDefaultSelectionGroup,\r\n changeActivePartRelatedItemIndex,\r\n setActiveNavigationFilter,\r\n setActiveNavigationFilterStepIndex,\r\n setModuleContextMenuModule,\r\n setNavigationLoading\r\n};\r\n\r\nexport default injectIntl(\r\n connect(mapStateToProps, mapDispatchToProps)(MobileNavigation)\r\n);\r\n","import snakeCase from \"lodash/snakeCase\";\r\nimport {Part} from \"../part\";\r\nimport {PartMenuType} from \"../../../visComponents/constants\";\r\nimport NonVisualizerSubPart from \"../subparts/nonVisualizerSubPart\";\r\n\r\nexport default class Other extends Part {\r\n static id = 'Other';\r\n constructor() {\r\n super(true, false, PartMenuType.Complex);\r\n\r\n this.menuType = PartMenuType.Complex;\r\n this.partName = 'Other';\r\n this.categoryEnabled = false;\r\n }\r\n\r\n load(dbFeature) {\r\n // console.log(\"load other\", dbFeature.groupName);\r\n const partId = snakeCase(dbFeature.groupName);\r\n let relatedItem = this.relatedItems.find(relatedItem => relatedItem.partId === partId);\r\n if (!relatedItem) {\r\n relatedItem = new NonVisualizerSubPart(true, partId, dbFeature.groupName);\r\n this.relatedItems.push(relatedItem);\r\n }\r\n relatedItem.getParent = () => this;\r\n relatedItem.load(dbFeature);\r\n return true\r\n }\r\n\r\n isSubTypeWithItems() {\r\n return false;\r\n }\r\n\r\n handleSubPartClick() {\r\n\r\n }\r\n\r\n}\r\n","import {Part} from \"../part\";\r\nimport {PartMenuType} from \"../../../visComponents/constants\";\r\nimport BackgroundBG from \"../subparts/backgrounds/BackgroundBG\";\r\n\r\nexport default class Background extends Part {\r\n static id = 'Background';\r\n constructor() {\r\n super(true, false, PartMenuType.Complex);\r\n\r\n this.menuType = PartMenuType.Complex;\r\n this.partName = 'Background';\r\n this.categoryEnabled = false;\r\n }\r\n\r\n load(dbFeature) {\r\n let relatedItemName = \"\",\r\n RelatedItemClass = null;\r\n switch (dbFeature.groupName) {\r\n case \"Background\":\r\n switch (true) {\r\n case dbFeature.displayName.includes(\"BG \"):\r\n relatedItemName = \"backgroundBG\";\r\n RelatedItemClass = BackgroundBG;\r\n break;\r\n }\r\n break;\r\n default:\r\n break;\r\n }\r\n if (relatedItemName) {\r\n if (!this[relatedItemName]) {\r\n this[relatedItemName] = new RelatedItemClass(true);\r\n this.relatedItems.push(this[relatedItemName]);\r\n }\r\n if (!this.categoryEnabled) {\r\n this.categoryEnabled = true\r\n }\r\n this[relatedItemName].getParent = () => this;\r\n this[relatedItemName].load(dbFeature);\r\n return true\r\n }\r\n return false\r\n }\r\n\r\n isSubTypeWithItems() {\r\n return false;\r\n }\r\n\r\n handleSubPartClick() {\r\n\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport {ShowerAccessories} from \"../../parts/showerAccessories\";\r\nimport {Shower} from \"../../parts/shower\";\r\nimport {IS_BATHROOM_OLD_BV_SCENE} from \"../../../../../config\";\r\n\r\nexport default class BackgroundBG extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'background_bg';\r\n this.partName = 'Background BG';\r\n this.windowNeededLayouts = [1];\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new BackgroundBG());\r\n }\r\n\r\n getArrayOfConditions() {\r\n const layout = this.getParent().layout;\r\n let conditions = super.getArrayOfConditions(); //roomLayout\r\n const showerAccessoriesParent = layout.parts[ShowerAccessories.id];\r\n const showerParent = layout.parts[Shower.id];\r\n\r\n const windowBody = showerAccessoriesParent.windowBody;\r\n if (windowBody && this.windowNeededLayouts.includes(layout.type) && document.kvConfig.toolVersion !== 5) {\r\n conditions.push({\r\n propName: \"Window\",\r\n propValue: (windowBody && windowBody.activeFeature && windowBody.disabled) ? \"Off\" : \"On\"\r\n })\r\n }\r\n\r\n if (showerParent && showerParent.showerSize() && !IS_BATHROOM_OLD_BV_SCENE) {\r\n conditions.push({\r\n propName: \"ShowerSize\",\r\n propValue: showerParent.showerSize()\r\n })\r\n }\r\n\r\n return conditions\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n if (zIndexes && this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndexes.Background.BackgroundBG;\r\n }\r\n }\r\n}\r\n","import {Shower} from \"../../parts/shower\";\r\nimport {SIDE_POSITIONS} from \"../../constants\";\r\nimport AccessoryCommon from \"./accessoryCommon\";\r\n\r\nexport default class LargeCornerSeat extends AccessoryCommon {\r\n constructor(isChild, partNumber = 0) {\r\n super(isChild);\r\n this.partNumber = partNumber;\r\n this.partId = 'large_corner_seat';\r\n this.partName = 'Large Corner Seat';\r\n this.translateId = \"visualizer.bathroom.accessories.large_corner_seat\";\r\n this.visible = true;\r\n this.canBeDisabled = true;\r\n if (isChild) {\r\n this.layerPositions = {\r\n [SIDE_POSITIONS[0]]: null,\r\n [SIDE_POSITIONS[1]]: null,\r\n };\r\n }\r\n }\r\n\r\n load(dbFeature) {\r\n dbFeature.metaData[\"layerPosition\"] = dbFeature.metaData[\"Side\"] ? dbFeature.metaData[\"Side\"][0] : \"\";\r\n const partNumber = dbFeature.metaData[\"layerPosition\"] === SIDE_POSITIONS[0] ? 1 : 2;\r\n return super.load_(dbFeature, new LargeCornerSeat(false, partNumber),\r\n true, partNumber === 1 ? 'features' : 'featuresParts');\r\n }\r\n\r\n disabledClick() {\r\n Object.keys(this.layerPositions).forEach(position => {\r\n if (this.layerPositions[position] && this.layerPositions[position].metaData[\"layerPosition\"]) {\r\n this.checkRelatedFeatureGroupPositions(this.layerPositions[position].metaData[\"layerPosition\"]);\r\n }\r\n })\r\n }\r\n\r\n handleClick() {\r\n const parent = this.getParent();\r\n // const accessoriesParent = parent.getParent(); // it is removing corner shelf! but it shouldn't\r\n // accessoriesParent.caddie_type = this.partId;\r\n parent.checkRelatedFeatureGroupPositions(this.metaData[\"layerPosition\"]);\r\n super.handleClick();\r\n }\r\n\r\n setLayers(layout) {\r\n\r\n const showerParent = this.getParent().layout.parts[Shower.id];\r\n if (showerParent && showerParent.showerTubComboIsActive()) { // shower tub combo - remove\r\n super.hideLayers();\r\n return;\r\n }\r\n\r\n if (this.activeFeature && (this.activeFeature.matchesMetaForArrayOfConditions(this.getArrayOfConditions()))) {\r\n // this.checkIfFeaturePartIsMatching();\r\n return super.setLayers(layout);\r\n }\r\n\r\n this.setDefault();\r\n return super.setLayers(layout);\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n if (zIndexes) {\r\n Object.keys(this.layerPositions).forEach((key, keyIndex) => {\r\n if (this.layerPositions[key]) {\r\n this.layerPositions[key].layer.zIndex = zIndexes.Accessories.LargeCornerSeat + keyIndex*10;\r\n }\r\n })\r\n }\r\n }\r\n\r\n}\r\n\r\n","import TubCommon from \"./tubCommon\";\r\n\r\nexport default class BathTubLiner extends TubCommon {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = \"bathtub_liner\";\r\n this.bottomTubId = \"bathtub_liner\";\r\n this.visible = true;\r\n this.partName = \"Tub Liner\";\r\n this.translateId = \"visualizer.bathroom.shower_tub_combo.bathtub_liner\";\r\n this.dbName = \"Bathtub Liner\";\r\n this.isStoneFeature = false;\r\n this.disableOnHomeSections = true;\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new BathTubLiner());\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n const zIndex = zIndexes.Shower.TubCombo.Liner;\r\n if (zIndexes && this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndex;\r\n }\r\n if (zIndexes && this.placeholderFeature) {\r\n this.placeholderFeature.layer.zIndex = zIndex;\r\n }\r\n }\r\n}\r\n","import TubCommon from \"./tubCommon\";\r\n\r\nexport default class ReplacementTub extends TubCommon {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'replacement_tub';\r\n this.bottomTubId = \"replacement_tub\";\r\n this.visible = true;\r\n this.partName = 'Replacement Tub';\r\n this.translateId = \"visualizer.bathroom.shower_tub_combo.replacement_tub\";\r\n this.isStoneFeature = false;\r\n this.disableOnHomeSections = true;\r\n if (isChild) {\r\n this.oneLayerPosition = true;\r\n }\r\n }\r\n\r\n load(dbFeature) {\r\n dbFeature.metaData[\"layerPosition\"] = dbFeature.metaData[\"Side\"] ? dbFeature.metaData[\"Side\"][0] : \"\";\r\n return super.load_(dbFeature, new ReplacementTub());\r\n }\r\n\r\n navigationSubItems(filters, searchText) {\r\n return this.navigationSubItemsWithSides(filters, searchText);\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n const zIndex = zIndexes.Shower.TubCombo.ReplacementTub;\r\n if (zIndexes && this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndex;\r\n }\r\n }\r\n}\r\n","import TubCommon from \"./tubCommon\";\r\n\r\nexport default class WalkInTub extends TubCommon {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'walk_in_tub';\r\n this.bottomTubId = \"walk_in_tub\";\r\n this.visible = true;\r\n this.partName = 'Walk In Tub';\r\n this.translateId = \"visualizer.bathroom.shower_tub_combo.walk_in_tub\";\r\n this.isStoneFeature = false;\r\n if (isChild) {\r\n this.oneLayerPosition = true;\r\n }\r\n }\r\n\r\n load(dbFeature) {\r\n dbFeature.metaData[\"layerPosition\"] = dbFeature.metaData[\"Side\"] ? dbFeature.metaData[\"Side\"][0] : \"\";\r\n return super.load_(dbFeature, new WalkInTub());\r\n }\r\n\r\n navigationSubItems(filters, searchText) {\r\n return this.navigationSubItemsWithSides(filters, searchText);\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n const zIndex = zIndexes.Shower.TubCombo.WalkInTub;\r\n if (zIndexes && this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndex;\r\n }\r\n if (zIndexes && this.placeholderFeature) {\r\n this.placeholderFeature.layer.zIndex = zIndex;\r\n }\r\n }\r\n\r\n}\r\n","import TubCommon from \"./tubCommon\";\r\n\r\nexport default class JettedTub extends TubCommon {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'jetted_tub';\r\n this.bottomTubId = \"jetted_tub\";\r\n this.visible = true;\r\n this.partName = 'Jetted Tub';\r\n this.translateId = \"visualizer.bathroom.shower_tub_combo.jetted_tub\";\r\n this.isStoneFeature = false;\r\n this.disableOnHomeSections = true;\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new JettedTub());\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n const zIndex = zIndexes.Shower.TubCombo.JettedTub;\r\n if (zIndexes && this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndex;\r\n }\r\n if (zIndexes && this.placeholderFeature) {\r\n this.placeholderFeature.layer.zIndex = zIndex;\r\n }\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\n\r\nexport default class WallConfiguration extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'wall_configuration';\r\n this.partName = 'Wall Configuration';\r\n this.translateId = \"visualizer.bathroom.shower_tub_combo.wall_configuration\";\r\n this.visible = true;\r\n this.isStoneFeature = false;\r\n this.disableOnHomeSections = true;\r\n this.createdManually = true;\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new WallConfiguration())\r\n }\r\n\r\n // setLayers(layout) {\r\n // this.activeFeature = this.features.find((feature) => {\r\n // return feature.partName === this.getParent().showerBody.activeFeature.partName // set the same glass as Body\r\n // });\r\n // return super.setLayers(layout);\r\n // }\r\n\r\n handleClick() {\r\n super.handleClick();\r\n const showerTubComboParent = this.getParent().getParent();\r\n showerTubComboParent.setShowerTubCombo();\r\n showerTubComboParent.setShowerSize(this.leftShowerWallType, this.showerComboSize);\r\n this.featureClicked();\r\n }\r\n\r\n setZIndex() {}\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport {ShowerTubCombo} from \"../../parts/showerTubCombo\";\r\nimport {getFeatureIsLocked} from \"../../../../../misc/helpers\";\r\nimport store from \"../../../../../store\";\r\nimport {toggleNotCompatibleView} from \"../../../../../actions/selectionFunctions\";\r\nimport {PAN_POSITIONS, ShowerComboTubType} from \"../../constants\";\r\nimport DesignNavigationItem from \"../../../../visComponents/designNavigationItem\";\r\n\r\nexport default class ShowerFixture extends IntermediatePart {\r\n constructor(isChild, partNumber = 0) {\r\n super(isChild);\r\n this.partNumber = partNumber;\r\n this.partId = 'shower_fixture';\r\n this.partName = 'Fixture';\r\n this.translateId = \"visualizer.bathroom.shower.shower_fixture\";\r\n this.homePageTitle = 'Shower Fixtures';\r\n this.dbName = 'Shower Fixture';\r\n this.layerPriority = 4;\r\n this.canBeDisabled = true;\r\n if (isChild) {\r\n this.layerPositions = {\r\n [PAN_POSITIONS[0]]: null,\r\n [PAN_POSITIONS[1]]: null,\r\n [PAN_POSITIONS[2]]: null,\r\n };\r\n // this.defaultLayerLayoutPositions = {\r\n // [LayoutType.Layout1]: \"L\",\r\n // [LayoutType.Layout4]: \"C\",\r\n // };\r\n }\r\n }\r\n\r\n load(dbFeature) {\r\n if (dbFeature.id === 79104774 || dbFeature.id === 79104772) { // Modern 4 & townsend disabled\r\n return false\r\n }\r\n dbFeature.metaData[\"layerPosition\"] = dbFeature.metaData[\"Side\"] ? dbFeature.metaData[\"Side\"][0] : \"\";\r\n const partNumber = dbFeature.metaData[\"layerPosition\"] === PAN_POSITIONS[0] ? 1 : 2;\r\n return super.load_(dbFeature, new ShowerFixture(false, partNumber),\r\n true, partNumber === 1 ? 'features' : 'featuresParts');\r\n }\r\n\r\n navigationSubItems(filters, searchText) {\r\n const filteredAvailableFeatures = super.getFeaturesBySearchText(super.getFilteredFeaturesByFilters(filters), searchText);\r\n let featuresToDisplay = super.navigationSubItemsWithFilterMultipleConditions(this.getArrayOfConditions(), filteredAvailableFeatures);\r\n const filteredAvailableFeatures2 = super.getFeaturesBySearchText(super.getFilteredFeaturesByFilters(filters, this.featuresParts), searchText);\r\n let featuresToDisplay2 = super.navigationSubItemsWithFilterMultipleConditions(this.getArrayOfConditions(), filteredAvailableFeatures2);\r\n featuresToDisplay2.forEach(feature2 => {\r\n if (featuresToDisplay.every(feature => feature.dbFeature.sharedFeatureName !== feature2.dbFeature.sharedFeatureName)) {\r\n featuresToDisplay.push(feature2)\r\n }\r\n })\r\n return featuresToDisplay.map(_ => new DesignNavigationItem(_.featureName, _));\r\n }\r\n\r\n setLayers(layout) {\r\n\r\n const showerTubCombo = this.getParent().layout.parts[ShowerTubCombo.id];\r\n\r\n if (this.getParent().showerTubComboIsActive() && showerTubCombo && showerTubCombo.walkInTub\r\n && showerTubCombo.bottomTub === showerTubCombo.walkInTub.bottomTubId) {\r\n super.hideLayers();\r\n return;\r\n }\r\n if (this.activeFeature && (this.activeFeature.matchesMetaForArrayOfConditions(this.getArrayOfConditions())\r\n || (this.activeFeature.notAvailableInVisualizer && this.placeholderFeature))) {\r\n return super.setLayers(layout);\r\n }\r\n this.setDefault();\r\n return super.setLayers(layout);\r\n }\r\n\r\n applyFeatureIfNotCompatible() {\r\n const parent = this.getParent();\r\n const shower = parent.getParent();\r\n if (shower.layout && shower.showerTubComboIsActive()\r\n && shower.layout.parts[ShowerTubCombo.id].bottomTub === ShowerComboTubType.walk_in_tub) {\r\n const comboPart = shower.layout.parts[ShowerTubCombo.id];\r\n comboPart.showerTubComboIsActive = false;\r\n comboPart.bottomTub = ShowerComboTubType.bathtub_liner;\r\n }\r\n }\r\n\r\n handleClick(ignoreLocked) {\r\n super.handleClick(ignoreLocked); // set active item & not in visualizer item\r\n if (this.notAvailableInVisualizer || getFeatureIsLocked(this)) {\r\n return\r\n }\r\n\r\n const showerFixtureParent = this.getParent();\r\n const shower = showerFixtureParent.getParent();\r\n if (shower.showerTubComboIsActive() && shower.layout.parts[ShowerTubCombo.id].bottomTub === ShowerComboTubType.walk_in_tub\r\n && !window.location.hash.includes(\"visualizer\")) {\r\n store.dispatch(toggleNotCompatibleView(true));\r\n return;\r\n }\r\n\r\n this.applyFeatureIfNotCompatible();\r\n }\r\n\r\n getArrayOfConditions() {\r\n let conditions = super.getArrayOfConditions(); //roomLayout\r\n const showerParent = this.getParent();\r\n conditions.push({\r\n propName: \"Shower\",\r\n propValue: showerParent.showerTubComboIsActive() ? \"Tub\" : \"Shower\"\r\n });\r\n conditions.push({\r\n propName: \"ShowerSize\",\r\n propValue: showerParent.showerSize()\r\n });\r\n return conditions\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n if (zIndexes) {\r\n Object.keys(this.layerPositions).forEach((key, keyIndex) => {\r\n if (this.layerPositions[key]) {\r\n this.layerPositions[key].layer.zIndex = zIndexes.Shower.ShowerFixture + keyIndex*10;\r\n }\r\n })\r\n }\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport {ShowerBodyType} from \"../../constants\";\r\nimport {Shower} from \"../../parts/shower\";\r\n\r\nexport default class ShowerGlass extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'shower_glass';\r\n this.partName = 'Glass';\r\n this.translateId = \"visualizer.bathroom.shower.shower_glass\";\r\n this.visible = false;\r\n this.layerPriority = 12;\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new ShowerGlass())\r\n }\r\n\r\n setLayers(layout) {\r\n\r\n if (this.getParent().showerTubComboIsActive()) {\r\n super.hideLayers();\r\n return;\r\n }\r\n\r\n if (this.getParent().customBodyType === ShowerBodyType.Door) {\r\n this.disabled = true;\r\n }\r\n this.activeFeature = this.features.find((feature) => {\r\n const showerBodyActiveFeature = this.getParent().showerBody.activeFeature;\r\n return showerBodyActiveFeature && feature.partName === showerBodyActiveFeature.partName // set the same glass as Body\r\n });\r\n return super.setLayers(layout);\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n if (zIndexes && this.getParent().activeSubType() === Shower.Type.Custom && this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndexes.Shower.Glass;\r\n }\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport {Vanity} from \"../../parts/vanity\";\r\n\r\nimport {LayoutType} from \"../../constants\";\r\nimport {ShowerTubCombo} from \"../../parts/showerTubCombo\";\r\nimport {\r\n custom30in15X4Shower,\r\n custom30in30X8Shower,\r\n custom30inPonyShower,\r\n custom60in15X4Shower,\r\n custom60in30X8Shower,\r\n custom60inPonyShower\r\n} from \"../../../../bvComponent/core/assets\";\r\n\r\nexport default class ShowerBody extends IntermediatePart {\r\n\r\n constructor(isChild, partNumber = 0) {\r\n super(isChild);\r\n this.partId = 'shower_body';\r\n this.partName = 'Shower Body';\r\n this.translateId = \"visualizer.bathroom.shower.shower_body\";\r\n this.homePageTitle = 'Shower Doors & Glass';\r\n this.partNumber = partNumber;\r\n this.activeFeatureParts = [];\r\n this.canBeDisabled = false;\r\n this.placeholderChanged = true; // never show placeholder to body\r\n this.firstClick = {\r\n \"0\": true // never show placeholder to body\r\n }\r\n this.layerPriority = 1;\r\n this.createdManually = true;\r\n }\r\n\r\n load(dbFeature) {\r\n const loadedShowerBody = super.load_(dbFeature, new ShowerBody());\r\n if (loadedShowerBody) { // it can be false (just skip it)\r\n const featureName = loadedShowerBody.dbFeature.sharedFeatureName;\r\n loadedShowerBody.featureName = featureName;\r\n loadedShowerBody.showerBodyType = 'Custom';\r\n loadedShowerBody.showerDimensions = this.loadShowerDimensions(featureName);\r\n loadedShowerBody.metaData = this.loadShowerMetaData(featureName, loadedShowerBody.showerDimensions);\r\n loadedShowerBody.showerBodyId = featureName.toLowerCase().replace(/ /gi, \"-\");\r\n loadedShowerBody.notAvailableInVisualizer = false;\r\n if (!loadedShowerBody.dbFeature.thumbnailUrl) {\r\n loadedShowerBody.customThumbnail = this.loadThumbnail(featureName)\r\n }\r\n }\r\n return loadedShowerBody\r\n }\r\n\r\n loadShowerDimensions(featureName = this.activeFeature.featureName) {\r\n switch (true) {\r\n case featureName.includes(\"15X4\"):\r\n return \"15X4\"\r\n case featureName.includes(\"Pony\"):\r\n return \"Pony\"\r\n case featureName.includes(\"30X8\"):\r\n default:\r\n return \"30X8\"\r\n }\r\n }\r\n\r\n loadShowerMetaData(featureName = this.activeFeature.featureName, showerDimensions) {\r\n const featureNameSplitted = featureName.split(\"in\")[0];\r\n return {\r\n \"ShowerSize\": featureNameSplitted.length > 1 ? [featureNameSplitted.substr(featureNameSplitted.length - 2)] : ['60'],\r\n \"CountertopSize\": showerDimensions === \"30X8\" ? [\"72in\"] : [\"20in\", \"24in\", \"30in\", \"36in\", \"48in\", \"60in\"]\r\n }\r\n }\r\n\r\n loadThumbnail(featureName = this.activeFeature.featureName) {\r\n switch (true) {\r\n case featureName.includes(\"15X4\"):\r\n return featureName.includes(\"30in\") ? custom30in15X4Shower : custom60in15X4Shower\r\n case featureName.includes(\"Pony\"):\r\n return featureName.includes(\"30in\") ? custom30inPonyShower : custom60inPonyShower\r\n case featureName.includes(\"30X8\"):\r\n default:\r\n return featureName.includes(\"30in\") ? custom30in30X8Shower : custom60in30X8Shower\r\n }\r\n }\r\n\r\n handleClick() {\r\n const parent = this.getParent();\r\n if (parent.getParent && parent.getParent()) {\r\n super.handleClick();\r\n parent.activeFeatureParts = parent.setActiveFeatureParts();\r\n } else {\r\n parent.showerBody.activeFeature = this;\r\n }\r\n this.getParent().showerBodySelectedByUser = true;\r\n const shower = this.getParent().layout ? this.getParent() : this.getParent().getParent(); // workaround for complete & custom click\r\n if (shower.showerTubComboIsActive) {\r\n const comboPart = shower.layout.parts[ShowerTubCombo.id];\r\n comboPart.showerTubComboIsActive = false;\r\n }\r\n this.featureClicked();\r\n }\r\n\r\n disabledClick() {\r\n const showerParent = this.getParent();\r\n showerParent.relatedItems.forEach((relItem) => {\r\n relItem.disabled = this.disabled;\r\n if (relItem.activeFeatureParts && relItem.activeFeatureParts.length) {\r\n relItem.activeFeatureParts.forEach((activeFeaturePart) => {\r\n if (activeFeaturePart) {\r\n activeFeaturePart.disabled = this.disabled\r\n }\r\n });\r\n }\r\n });\r\n if (showerParent.layout && showerParent.showerTubComboIsActive) {\r\n const comboPart = showerParent.layout.parts[ShowerTubCombo.id];\r\n comboPart.showerTubComboIsActive = false;\r\n }\r\n this.activeFeatureParts.forEach((activeFeaturePart) => {\r\n activeFeaturePart.disabled = this.disabled\r\n });\r\n const wallParent = showerParent.layout.parts.Walls;\r\n wallParent.wallExL.disabled = this.disabled;\r\n // wallParent.wallExR.disabled = this.disabled;\r\n\r\n const bathtubParent = showerParent.layout.parts.Bathtub;\r\n\r\n if (showerParent.layout.type === LayoutType.Small && !this.disabled && bathtubParent) { // switch off all bathtub features\r\n if (bathtubParent.bathTubBody) {\r\n bathtubParent.bathTubBody.disabled = true;\r\n }\r\n if (bathtubParent.bathTubBody) {\r\n bathtubParent.bathTubBase.disabled = true;\r\n bathtubParent.bathTubBase.disabledClick();\r\n }\r\n }\r\n }\r\n\r\n availableFeatures(filters) {\r\n const layout = this.getParent().layout;\r\n const filteredAvailableFeatures = filters ? super.getFilteredFeaturesByFilters(filters) : this.features;\r\n const counterTopSize = layout.parts[Vanity.id].counterTopSize();\r\n return filteredAvailableFeatures.filter((feature) => {\r\n if (counterTopSize === '72in' && layout.type === 1) {\r\n return feature.showerDimensions === \"30X8\" || feature.showerDimensions === \"Pony\"\r\n }\r\n return true\r\n })\r\n }\r\n\r\n getArrayOfConditions() {\r\n return []\r\n }\r\n\r\n setActiveFeatureParts() {\r\n const activeFeatureParts = (this.activeFeature && this.activeFeature.partNumber) ? this.featuresParts.filter((feature) => {\r\n return feature.partName === this.activeFeature.partName\r\n }) : [];\r\n activeFeatureParts.forEach((activeFeaturePart) => {\r\n activeFeaturePart.disabled = this.disabled\r\n });\r\n return activeFeatureParts\r\n }\r\n\r\n setDefault() {\r\n const availableFeatures = this.availableFeatures();\r\n const layout = this.getParent().layout;\r\n let hardCodedDefault = availableFeatures.find((feature) => {\r\n return feature.partName === \"Custom B 60in 15X4\";\r\n });\r\n const counterTopSize = layout.parts[Vanity.id].counterTopSize();\r\n if (counterTopSize === '72in' && layout.type === 1 && this.activeFeature) {\r\n hardCodedDefault = availableFeatures.find((feature) => {\r\n return this.activeFeature.partName.includes(\"60in\")\r\n ? feature.partName.includes(\"60in\")\r\n : feature.partName.includes(\"30in\")\r\n });\r\n }\r\n this.activeFeature = hardCodedDefault || availableFeatures[0];\r\n this.activeFeatureParts = this.setActiveFeatureParts();\r\n }\r\n\r\n setLayers(layout) {\r\n if (this.getParent().showerTubComboIsActive()) {\r\n super.hideLayers();\r\n return;\r\n }\r\n super.setLayers(layout);\r\n }\r\n\r\n setZIndex() {}\r\n\r\n changeLayout(layoutType) {\r\n if (layoutType === 1 && this.disabled) {\r\n this.disabled = false;\r\n this.disabledClick();\r\n }\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\n\r\nexport default class CompleteVanity extends IntermediatePart {\r\n\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'vanity';\r\n this.partName = 'Vanity';\r\n this.translateId = \"visualizer.bathroom.vanity.vanity\";\r\n this.homePageTitle = 'Complete Vanities';\r\n this.visible = true;\r\n this.canBeDisabled = true;\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new CompleteVanity());\r\n }\r\n\r\n setDefault(layout) {\r\n const availableCompleteFeatures = this.features.filter(feature => {\r\n return feature.metaData[\"Vanity\"] && feature.metaData[\"Vanity\"].includes(\"Complete\")\r\n });\r\n const hardCodedDefault = this.features.find((feature) => {\r\n return feature.dbFeature.displayName && feature.dbFeature.displayName.includes(\"Buffalo Complete Sand 987SANBLK17VK24\");\r\n });\r\n // const placeholderDefault =\r\n // (\r\n // this.getParent().vanityCabinet\r\n // && this.getParent().vanityCabinet.features\r\n // && this.getParent().vanityCabinet.features.length\r\n // && this.getParent().vanityCabinet.features.find((feature) => +feature.vanitySize === 24 && feature.dbFeature.displayName.includes(\"laceholder\"))\r\n // ) || this.features.find((feature) => {\r\n // return feature.dbFeature.displayName && feature.dbFeature.displayName.includes(\"Placeholder S\");\r\n // });\r\n const placeholderDefault = this.features.find((feature) => {\r\n return feature.dbFeature.displayName && feature.dbFeature.displayName.includes(\"Placeholder S\");\r\n });\r\n // console.log('this.features', this.features);\r\n // console.log('placeholderDefault', placeholderDefault);\r\n this.activeFeature = hardCodedDefault || super.setDefault(layout) || availableCompleteFeatures[0];\r\n this.placeholderFeature = placeholderDefault || super.setDefault(layout) || null;\r\n }\r\n\r\n // setLayers(layout) {\r\n // // const s3Binding = find(this.dbFeature.s3Bindings, {entityID: this.featureDefinitionId(this)});\r\n // if (!this.activeFeature) {\r\n // this.setDefault(layout);\r\n // }\r\n //\r\n // let s3Binding = find(this.activeFeature.dbFeature.s3Bindings, {\r\n // entityID: this.getParent().featureDefinitionId(this),\r\n // layout: layout.getCurrentLayoutAbbreviation()\r\n // });\r\n // if (!s3Binding) {\r\n // s3Binding = find(this.activeFeature.dbFeature.s3Bindings, {entityID: this.featureDefinitionId(this)});\r\n // }\r\n // this.activeFeature.layer.fromS3Binding(s3Binding);\r\n // }\r\n\r\n setZIndex(zIndexes) {\r\n if (zIndexes && this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndexes.Vanity.Complete.Cabinet;\r\n if (this.placeholderFeature) {\r\n this.placeholderFeature.layer.zIndex = zIndexes.Vanity.Complete.Cabinet;\r\n }\r\n }\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport {Vanity} from \"../../parts/vanity\";\r\n\r\nexport default class VanityHandle extends IntermediatePart {\r\n\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'vanity_handle';\r\n this.partName = 'Handle';\r\n this.translateId = \"visualizer.bathroom.vanity.vanity_handle\";\r\n this.dbName = \"Vanity Handle\";\r\n this.visible = [Vanity.Types.Custom];\r\n this.canBeDisabled = false;\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new VanityHandle())\r\n }\r\n\r\n disabledClick() {\r\n this.getParent().toggleVanityParts(this.disabled);\r\n }\r\n\r\n getArrayOfConditions() {\r\n const conditions = super.getArrayOfConditions();\r\n const vanityParent = this.getParent();\r\n conditions.push({\r\n propName: \"VanitySize\",\r\n propValue: vanityParent.getCounterTopSize()\r\n })\r\n return conditions\r\n }\r\n\r\n getAvailableFeatures() {\r\n return this.features && this.features.filter(f => f.matchesMetaForCondition('VanitySize', this.getParent().counterTopSize())) || [];\r\n }\r\n\r\n setLayers(layout) {\r\n\r\n const vanityPedestal = this.getParent().vanityCabinet;\r\n if (vanityPedestal && vanityPedestal.activeFeature) {\r\n const handleMeta = vanityPedestal.activeFeature.metaData[\"VanityHandle\"];\r\n const hardCodedWizardConditions = vanityPedestal.activeFeature.partName.includes(\"WizardPlaceholder\") &&\r\n (\r\n vanityPedestal.activeFeature.partName.includes(\"WizardPlaceholder52 in36 S\")\r\n || (handleMeta && handleMeta.includes(\"true\")) // WizardPlaceholder QC Liberty\r\n );\r\n if (handleMeta && handleMeta.includes(\"None\") || hardCodedWizardConditions) {\r\n super.hideLayers();\r\n return;\r\n }\r\n }\r\n\r\n if (this.activeFeature && (this.activeFeature.matchesMetaForArrayOfConditions(this.getArrayOfConditions())\r\n || (this.activeFeature.notAvailableInVisualizer && this.placeholderFeature))) {\r\n return super.setLayers(layout);\r\n }\r\n this.setDefault();\r\n return super.setLayers(layout);\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n if (zIndexes && this.getParent().activeSubType_ === Vanity.Types.Custom) {\r\n const zIndex = zIndexes.Vanity.Handle;\r\n if (this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndex;\r\n }\r\n if (this.placeholderFeature) {\r\n this.placeholderFeature.layer.zIndex = zIndex;\r\n }\r\n }\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport {Vanity} from \"../../parts/vanity\";\r\nimport store from \"../../../../../store\";\r\nimport {Layout} from \"../../layout\";\r\n\r\nexport default class VanityCabinet extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'vanity_cabinet';\r\n this.partName = 'Cabinet';\r\n this.translateId = \"visualizer.bathroom.vanity.vanity_cabinet\";\r\n this.dbName = \"Vanity\";\r\n this.homePageTitle = 'Vanity Bases';\r\n this.visible = [Vanity.Types.Custom];\r\n this.canBeDisabled = true;\r\n this.canUseWizard = true;\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new VanityCabinet())\r\n }\r\n\r\n // navigationSubItems() {\r\n // return super.navigationSubItemsWithFilter('VanitySize', this.getParent().counterTopSize());\r\n // }\r\n\r\n disabledClick() {\r\n this.getParent().toggleVanityParts(this.disabled);\r\n }\r\n\r\n setActiveFeatureByFilter(filterName, filterValue) {\r\n\r\n // console.log('filterName', filterName);\r\n // console.log('filterValue', filterValue);\r\n\r\n const filterGroups = store.getState().filterState.filterGroups;\r\n const group = filterGroups.find(group => group.name === filterName);\r\n const groupId = group.id;\r\n const filterValueId = Layout.getfilterValueIdByValue(groupId, filterValue);\r\n const filteredFeatures = this.features.filter(\r\n feature => feature.dbFeature && feature.dbFeature.filterValueIDs[groupId] && feature.dbFeature.filterValueIDs[groupId].includes(filterValueId)\r\n ); // find among all features only those, who have filter with value === props size\r\n if (!super.tryToSetTheSameFeature(filteredFeatures, null, \"ustom\")) {\r\n this.activeFeature = filteredFeatures[0];\r\n const placeholderAvailableFeatures = filteredFeatures.filter(feature => {\r\n return feature.dbFeature.displayName.includes(\"laceholder\") && feature.dbFeature.displayName.includes(\"ustom\")\r\n });\r\n this.placeholderFeature = placeholderAvailableFeatures[0];\r\n }\r\n }\r\n\r\n // getAvailableFeatures() {\r\n // return this.features.filter(f => f.vanitySize+'in' === this.getParent().counterTopSize());\r\n // }\r\n\r\n setZIndex(zIndexes) {\r\n if (zIndexes && this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndexes.Vanity.Cabinet;\r\n }\r\n if (zIndexes && this.placeholderFeature) {\r\n this.placeholderFeature.layer.zIndex = zIndexes.Vanity.Cabinet;\r\n }\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport {Vanity} from \"../../parts/vanity\";\r\n// import DesignNavigationItem from \"../../../../visComponents/designNavigationItem\";\r\n// import uniqBy from \"lodash/uniqBy\";\r\n\r\nexport default class VanityCountertop extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'vanity_countertop';\r\n this.partName = 'Countertop';\r\n this.translateId = \"visualizer.bathroom.vanity.vanity_countertop\";\r\n this.homePageTitle = 'Countertops';\r\n this.visible = [Vanity.Types.Custom];\r\n this.isStoneFeature = true;\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new VanityCountertop())\r\n }\r\n\r\n disabledClick() {\r\n this.getParent().toggleVanityParts(this.disabled);\r\n }\r\n\r\n getArrayOfConditions() {\r\n const conditions = super.getArrayOfConditions();\r\n const vanityParent = this.getParent();\r\n conditions.push({\r\n propName: \"VanitySize\",\r\n propValue: vanityParent.getCounterTopSize()\r\n })\r\n return conditions\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n if (zIndexes && this.getParent().activeSubType_ === Vanity.Types.Custom) {\r\n if (this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndexes.Vanity.CounterTop;\r\n }\r\n if(this.placeholderFeature) {\r\n this.placeholderFeature.layer.zIndex = zIndexes.Vanity.CounterTop;\r\n }\r\n }\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport {Vanity} from \"../../parts/vanity\";\r\n\r\nexport default class VanityBacksplash extends IntermediatePart {\r\n\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'vanity_backsplash';\r\n this.partName = 'Backsplash';\r\n this.translateId = \"visualizer.bathroom.vanity.vanity_backsplash\";\r\n this.dbName = 'Backsplash';\r\n this.visible = [Vanity.Types.Custom];\r\n this.canBeDisabled = true;\r\n this.isStoneFeature = true;\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new VanityBacksplash())\r\n }\r\n\r\n getArrayOfConditions() {\r\n const conditions = super.getArrayOfConditions();\r\n const vanityParent = this.getParent();\r\n conditions.push({\r\n propName: \"VanitySize\",\r\n propValue: vanityParent.getCounterTopSize()\r\n })\r\n return conditions\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n if (zIndexes) {\r\n const zIndex = zIndexes.Vanity.VanityBacksplash;\r\n if (this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndex;\r\n }\r\n }\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport {Vanity} from \"../../parts/vanity\";\r\n\r\nexport default class Mirror extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'vanity_mirror';\r\n this.partName = 'Mirror';\r\n this.translateId = \"visualizer.bathroom.vanity.vanity_mirror\";\r\n this.homePageTitle = 'Mirrors';\r\n this.visible = [Vanity.Types.Complete, Vanity.Types.Custom];\r\n this.canBeDisabled = false;\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new Mirror())\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n // if ((this.getParent().activeSubType_ === Vanity.Types.Custom) && this.activeFeature) {\r\n if (zIndexes && this.activeFeature) {\r\n // this.activeFeature.layer.zIndex = Z.layouts.Large.Vanity.Mirror;\r\n this.activeFeature.layer.zIndex = zIndexes.Vanity.Mirror;\r\n }\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport Config from \"../../../../../config\";\r\nimport { Vanity } from \"../../parts/vanity\";\r\nimport {METADATA} from \"../../constants\";\r\n\r\nexport default class Sink extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'vanity_sink';\r\n this.partName = 'Sink';\r\n this.translateId = \"visualizer.bathroom.vanity.vanity_sink\";\r\n this.homePageTitle = 'Sinks';\r\n this.visible = [Vanity.Types.Custom];\r\n if (Config.isDevMode()) {\r\n this.canBeDisabled = true;\r\n }\r\n }\r\n\r\n load(dbFeature) {\r\n if (!dbFeature.metaData[\"SinkSize\"]) {\r\n dbFeature.metaData[\"SinkSize\"] = [METADATA.Inner]\r\n }\r\n return super.load_(dbFeature, new Sink())\r\n }\r\n //\r\n // navigationSubItems(filters, searchText) {\r\n // const filteredAvailableFeatures = super.getFeaturesBySearchText(super.getFilteredFeaturesByFilters(filters), searchText);\r\n // return super.navigationSubItemsWithFilterWithInactive('VanitySize', this.getParent().counterTopSize(), filteredAvailableFeatures);\r\n // }\r\n\r\n disabledClick() {\r\n this.getParent().toggleVanityParts(this.disabled);\r\n }\r\n\r\n // getArrayOfConditions() {\r\n // const counterTopSize = this.getParent().counterTopSize();\r\n // return [{\r\n // propName: 'VanitySize',\r\n // propValue: counterTopSize\r\n // }];\r\n // }\r\n\r\n handleChangeParent(nonCompatibleWith) {\r\n if (nonCompatibleWith === \"faucet\") {\r\n // some additional logic if needed\r\n } else {\r\n this.getParent().getParent().vanityCabinet.setActiveFeatureByFilter(\"Size\", this.metaData[\"VanitySize\"] ? this.metaData[\"VanitySize\"][0] : null); // \"60in\", etc.\r\n }\r\n }\r\n\r\n setActiveFeatureByFilter(filterName, filterValue) {\r\n const featuresToDisplay = super.navigationSubItemsWithFilterMultipleConditions(this.getArrayOfConditions());\r\n const filteredFeatures = featuresToDisplay.filter((feature) => {\r\n return feature.metaData[filterName] && feature.metaData[filterName].includes(filterValue);\r\n });\r\n if (!super.tryToSetTheSameFeature(filteredFeatures)) {\r\n this.activeFeature = filteredFeatures.find(feature => !feature.dbFeature.displayName.includes(\"laceholder\")) || filteredFeatures[0];\r\n const placeholderAvailableFeatures = filteredFeatures.filter(feature => {\r\n return feature.dbFeature.displayName.includes(\"laceholder\")\r\n });\r\n this.placeholderFeature = placeholderAvailableFeatures[0];\r\n }\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n if (zIndexes && this.getParent().activeSubType_ === Vanity.Types.Custom) {\r\n if(this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndexes.Vanity.Sink;\r\n }\r\n if(this.placeholderFeature) {\r\n this.placeholderFeature.layer.zIndex = zIndexes.Vanity.Sink;\r\n }\r\n }\r\n }\r\n}\r\n","import filter from 'lodash/filter';\r\n\r\nimport {IntermediatePart} from \"../../intermediatePart\";\r\nimport Config from \"../../../../../config\";\r\nimport { Vanity } from \"../../parts/vanity\";\r\nimport {METADATA} from \"../../constants\";\r\n\r\nexport default class VanityFaucet extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'vanity_faucet';\r\n this.partName = 'Faucet';\r\n this.homePageTitle = 'Faucets';\r\n this.translateId = \"visualizer.bathroom.vanity.vanity_faucet\";\r\n this.visible = [Vanity.Types.Custom];\r\n this.useMatchesFailedNavigation = true;\r\n if (Config.isDevMode()) {\r\n this.canBeDisabled = true;\r\n }\r\n }\r\n\r\n load(dbFeature) {\r\n if (!dbFeature.metaData[\"SinkSize\"]) {\r\n dbFeature.metaData[\"SinkSize\"] = [METADATA.Inner]\r\n } else if(dbFeature.metaData[\"SinkSize\"].includes(METADATA.Outer) && !dbFeature.metaData[\"SinkSize\"].includes(METADATA.Inner)) (\r\n dbFeature.metaData[\"SinkSize\"].push(METADATA.Inner)\r\n )\r\n return this.load_(dbFeature, new VanityFaucet());\r\n }\r\n\r\n disabledClick() {\r\n this.getParent().toggleVanityParts(this.disabled);\r\n }\r\n\r\n getCurrentSinkSize() {\r\n const sinkParent = this.getParent().sink;\r\n if (sinkParent && sinkParent.activeFeature) {\r\n const sinkMeta = sinkParent.activeFeature.metaData[\"SinkSize\"];\r\n if (sinkMeta) {\r\n return Array.isArray(sinkMeta) ? sinkMeta[0] : sinkMeta\r\n } else if (sinkParent.activeFeature.partName.includes(\"Placeholder\")) {\r\n return \"Outer\"\r\n }\r\n }\r\n return null\r\n }\r\n\r\n getArrayOfConditions(withSinkSize = true) {\r\n // const counterTopSize = this.getParent().counterTopSize();\r\n // const conditions = [{\r\n // propName: 'VanitySize',\r\n // propValue: counterTopSize\r\n // }];\r\n const conditions = super.getArrayOfConditions();\r\n if (withSinkSize && this.getCurrentSinkSize()) {\r\n conditions.push({\r\n propName: 'SinkSize',\r\n propValue: this.getCurrentSinkSize()\r\n })\r\n }\r\n const vanityParent = this.getParent();\r\n const countertopSize = vanityParent.getCounterTopSize();\r\n if (countertopSize) {\r\n conditions.push({\r\n propName: \"VanitySize\",\r\n propValue: countertopSize && countertopSize[0] && (countertopSize[0] === \"32\") ? \"48\" : countertopSize\r\n })\r\n }\r\n const sinkType = vanityParent.sink && vanityParent.sink.activeFeature && vanityParent.sink.activeFeature.metaData[\"SinkType\"]\r\n if (sinkType) {\r\n conditions.push({\r\n propName: \"SinkType\",\r\n propValue: vanityParent.sink.activeFeature.metaData[\"SinkType\"]\r\n })\r\n }\r\n // console.log(\"conditions\", conditions);\r\n return conditions;\r\n }\r\n\r\n setLayers(layout) {\r\n if (this.activeFeature && (this.activeFeature.matchesMetaForArrayOfConditions(this.getArrayOfConditions(true)))) {\r\n return super.setLayers(layout);\r\n }\r\n this.setDefault();\r\n return super.setLayers(layout);\r\n }\r\n\r\n getAvailableFeatures() {\r\n return filter(this.features, f => f.matchesMetaForCondition('VanitySize', this.getParent().counterTopSize()));\r\n }\r\n\r\n handleChangeParent(nonCompatibleWith) {\r\n if (nonCompatibleWith === \"sink\") {\r\n this.getParent().getParent().sink.setActiveFeatureByFilter(\"SinkSize\", \"Inner\")\r\n } else {\r\n this.getParent().getParent().vanityCabinet.setActiveFeatureByFilter(\"Size\", this.metaData[\"VanitySize\"] ? this.metaData[\"VanitySize\"][0] : null); // \"60in\", etc.\r\n }\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n if (zIndexes && this.getParent().activeSubType_ === Vanity.Types.Custom) {\r\n if (this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndexes.Vanity.Faucet;\r\n }\r\n }\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport {getFeatureIsLocked} from \"../../../../../misc/helpers\";\r\nimport {ShowerTubCombo} from \"../../parts/showerTubCombo\";\r\nimport {ShowerComboTubType} from \"../../constants\";\r\n\r\nexport default class ShowerWall extends IntermediatePart {\r\n\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'shower_interior_wall';\r\n this.partName = 'Shower Walls';\r\n this.translateId = \"visualizer.bathroom.shower.shower_interior_wall\";\r\n this.homePageTitle = 'Interior Shower Walls';\r\n this.dbName = \"Shower Wall\";\r\n this.isStoneFeature = true;\r\n this.canUseWizard = true;\r\n this.layerPriority = 2;\r\n }\r\n\r\n load(dbFeature) {\r\n if (!dbFeature.metaData[\"Shower\"]) {\r\n dbFeature.metaData[\"Shower\"] = [\"Shower\"];\r\n }\r\n return super.load_(dbFeature, new ShowerWall());\r\n }\r\n\r\n handleClick(ignoreLocked) {\r\n const parent = this.getParent();\r\n super.handleClick(ignoreLocked);\r\n const shower = parent.getParent();\r\n if (shower.showerInteriorWallAccent && shower.showerInteriorWallAccent.canBeDisabled\r\n && !shower.showerInteriorWallAccent.placeholderChanged && !getFeatureIsLocked(this)) {\r\n shower.showerInteriorWallAccent.disabled = true;\r\n shower.showerInteriorWallAccent.disabledClick();\r\n }\r\n this.featureClicked();\r\n }\r\n\r\n availableFeatures(wallFeatures) {\r\n return wallFeatures.filter(wallFeature => wallFeature.partNumber === 1)\r\n }\r\n\r\n getArrayOfConditions() {\r\n let conditions = super.getArrayOfConditions(); //roomLayout\r\n const showerParent = this.getParent();\r\n conditions.push({\r\n propName: \"ShowerSize\",\r\n propValue: showerParent.showerSize()\r\n });\r\n const showerCondition = showerParent.showerTubComboIsActive() && showerParent.layout.parts[ShowerTubCombo.id]\r\n && (showerParent.layout.parts[ShowerTubCombo.id].bottomTub === ShowerComboTubType.walk_in_tub)\r\n ? \"Tub\"\r\n : \"Shower\";\r\n conditions.push({\r\n propName: \"Shower\",\r\n propValue: showerCondition\r\n });\r\n return conditions\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n const zIndex = zIndexes.Background.ShowerWall;\r\n if (zIndexes && this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndex;\r\n }\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport {getFeatureIsLocked} from \"../../../../../misc/helpers\";\r\n\r\nexport default class ShowerWallAccent extends IntermediatePart {\r\n\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = \"shower_wall_accent\";\r\n this.partName = \"Shower Walls Accent\";\r\n this.translateId = \"visualizer.bathroom.shower.shower_interior_wall_accent\";\r\n this.dbName = \"Shower Wall Accent\";\r\n this.homePageTitle = 'Interior Shower Walls';\r\n this.isStoneFeature = true;\r\n this.canUseWizard = true;\r\n this.layerPriority = 2;\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new ShowerWallAccent());\r\n }\r\n\r\n handleClick(ignoreLocked) {\r\n const parent = this.getParent();\r\n super.handleClick(ignoreLocked);\r\n const shower = parent.getParent();\r\n if (shower.showerWallAccent && shower.showerWallAccent.canBeDisabled\r\n && !shower.showerWallAccent.placeholderChanged && !getFeatureIsLocked(this)) {\r\n shower.showerWallAccent.disabled = true;\r\n shower.showerWallAccent.disabledClick();\r\n }\r\n this.featureClicked();\r\n }\r\n\r\n getArrayOfConditions() {\r\n let conditions = super.getArrayOfConditions(); //roomLayout\r\n const showerParent = this.getParent();\r\n conditions.push({\r\n propName: \"ShowerSize\",\r\n propValue: showerParent.showerSize()\r\n });\r\n return conditions\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n const zIndex = zIndexes.ShowerWallAccent;\r\n if (zIndexes && this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndex;\r\n }\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport {getFeatureIsLocked} from \"../../../../../misc/helpers\";\r\nimport {LayoutType, ShowerComboTubType} from \"../../constants\";\r\nimport {ShowerTubCombo} from \"../../parts/showerTubCombo\";\r\nimport {IS_BATHROOM_OLD_BV_SCENE} from \"../../../../../config\";\r\nimport {ShowerAccessories} from \"../../parts/showerAccessories\";\r\n\r\nexport default class ShowerDoor extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'shower_door';\r\n this.partName = 'Shower Door';\r\n this.translateId = \"visualizer.bathroom.shower.shower_door\";\r\n this.visible = true;\r\n this.isStoneFeature = false;\r\n this.canBeDisabled = true;\r\n this.layerPriority = 5;\r\n\r\n /* only shower door properties */\r\n if (isChild) {\r\n this.previouslySelectedFeatures = {};\r\n this.oneLayerPosition = true;\r\n Object.keys(LayoutType).forEach(layoutName => {\r\n this.previouslySelectedFeatures[layoutName] = {};\r\n })\r\n }\r\n this.currentShowerBodyId = \"\"; // for example \"custom-a-60in-30x8\"\r\n }\r\n\r\n load(dbFeature) {\r\n dbFeature.metaData[\"layerPosition\"] = dbFeature.metaData[\"Side\"] ? dbFeature.metaData[\"Side\"][0] : \"\";\r\n return super.load_(dbFeature, new ShowerDoor());\r\n }\r\n\r\n navigationSubItems(filters, searchText) {\r\n return this.navigationSubItemsWithSides(filters, searchText);\r\n }\r\n\r\n disabledClick() {\r\n const showerParent = this.getParent();\r\n const showerDoorHandle = showerParent.showerDoorHandle;\r\n if (showerDoorHandle) {\r\n showerDoorHandle.disabled = this.disabled;\r\n }\r\n const accParent = showerParent.layout.parts[ShowerAccessories.id]\r\n if (!this.disabled && accParent && accParent.showerRod && !accParent.showerRod.disabled) {\r\n accParent.showerRod.disabled = true\r\n }\r\n }\r\n\r\n handleClick() {\r\n super.handleClick();\r\n if (!this.notAvailableInVisualizer && !getFeatureIsLocked(this)) {\r\n // this.getParent().getParent().setShowerTubCombo();\r\n // let doorWithLiner = false;\r\n // if(this.metaData && this.metaData.length) {\r\n // const activeDoorMetadata = this.metaData.find(metaDataObject => metaDataObject.isFor);\r\n // const showerPanValues = activeDoorMetadata.conditions.find(condition => condition.name === \"BathtubLiner\");\r\n // if (showerPanValues) {\r\n // doorWithLiner = true;\r\n // }\r\n // }\r\n // this.getParent().getParent().setLinerActive(doorWithLiner);\r\n const shower = this.getParent().getParent();\r\n const showerPanCondition = this.metaData[\"ShowerPan\"];\r\n if (!shower.showerTubComboIsActive()) {\r\n shower.showerFloorIsActive = showerPanCondition && showerPanCondition.includes(\"Threshold\");\r\n }\r\n const accParent = shower.layout.parts[ShowerAccessories.id]\r\n if (accParent && accParent.showerRod && !accParent.showerRod.disabled) {\r\n accParent.showerRod.disabled = true\r\n }\r\n if(!this.matchesMetaForArrayOfConditions(this.getParent().getArrayOfConditions())) {\r\n const showerSizeValues = this.metaData[\"ShowerSize\"];\r\n const showerBodyParent = this.getParent().getParent().showerBody;\r\n if (showerSizeValues) {\r\n const showerBodyThatFits = showerBodyParent.features.filter(showerBodyFeature => {\r\n const showerSizeValues2 = showerBodyFeature.metaData[\"ShowerSize\"];\r\n return showerSizeValues.some(condValue => {\r\n return showerSizeValues2.some(condValue2 => condValue === condValue2);\r\n });\r\n });\r\n if (showerBodyThatFits.length && showerBodyThatFits.every(shBody => shBody.partName !== showerBodyParent.activeFeature.partName)) {\r\n let showerBodyToSet = showerBodyThatFits.find(shBody => {\r\n return shBody.showerDimensions === showerBodyParent.activeFeature.showerDimensions\r\n }) || showerBodyThatFits[0];\r\n showerBodyParent.showerBodySelectedByUser = true;\r\n showerBodyParent.activeFeature = showerBodyToSet;\r\n }\r\n }\r\n }\r\n this.featureClicked();\r\n }\r\n }\r\n\r\n setLayers(layout) {\r\n const showerParent = this.getParent();\r\n const comboParent = showerParent.layout.parts[ShowerTubCombo.id];\r\n if (showerParent.showerTubComboIsActive() && comboParent.bottomTub === ShowerComboTubType.walk_in_tub) {\r\n super.hideLayers();\r\n return;\r\n }\r\n return super.setLayers(layout);\r\n }\r\n\r\n getArrayOfConditions() {\r\n const showerParent = this.getParent();\r\n const comboParent = showerParent.layout.parts[ShowerTubCombo.id];\r\n const showerTubComboIsActive = showerParent.showerTubComboIsActive();\r\n let conditions = super.getArrayOfConditions(); //roomLayout\r\n conditions.push({\r\n propName: IS_BATHROOM_OLD_BV_SCENE ? \"Type\" : \"Shower\",\r\n propValue: showerTubComboIsActive\r\n ? comboParent.bottomTub === ShowerComboTubType.walk_in_tub ? \"WalkInTub\" : \"Tub\" // WalkInTub removes items from nav\r\n : \"Pan\"\r\n })\r\n conditions.push({\r\n propName: \"ShowerSize\",\r\n propValue: showerParent.showerSize()\r\n })\r\n return conditions\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n if (zIndexes && this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndexes.Shower.ShowerDoor;\r\n }\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport {ShowerTubCombo} from \"../../parts/showerTubCombo\";\r\n\r\nexport default class ShowerPanCombo extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'shower_pan_combo';\r\n this.partName = 'Shower Pan';\r\n this.translateId = \"visualizer.bathroom.shower.shower_pan_combo\";\r\n this.dbName = \"Shower Pans\"; // americanstandard2020 // lowesdemo // bucket5\r\n this.visible = true;\r\n this.isStoneFeature = false;\r\n this.layerPriority = 8;\r\n if (isChild) {\r\n this.oneLayerPosition = true;\r\n }\r\n }\r\n\r\n load(dbFeature) {\r\n dbFeature.metaData[\"layerPosition\"] = dbFeature.metaData[\"Side\"] ? dbFeature.metaData[\"Side\"][0] : \"\";\r\n return super.load_(dbFeature, new ShowerPanCombo())\r\n }\r\n\r\n applyFeatureIfNotCompatible() {\r\n const parent = this.getParent();\r\n const shower = parent.getParent();\r\n shower.showerFloorIsActive = false;\r\n if (shower.layout && shower.showerTubComboIsActive()) {\r\n const comboPart = shower.layout.parts[ShowerTubCombo.id];\r\n comboPart.showerTubComboIsActive = false;\r\n }\r\n }\r\n\r\n handleClick(ignoreLocked) {\r\n super.handleClick(ignoreLocked); // set active item & not in visualizer item\r\n this.applyFeatureIfNotCompatible();\r\n }\r\n\r\n navigationSubItems(filters, searchText) {\r\n return this.navigationSubItemsWithSides(filters, searchText);\r\n }\r\n\r\n setLayers(layout) {\r\n\r\n const showerParent = this.getParent();\r\n\r\n if (showerParent.showerTubComboIsActive() || showerParent.showerFloorIsActive) {\r\n super.hideLayers();\r\n return;\r\n }\r\n\r\n if (this.activeFeature && !this.activeFeature.notAvailableInVisualizer\r\n && this.activeFeature.matchesMetaForArrayOfConditions(this.getArrayOfConditions())) {\r\n return super.setLayers(layout);\r\n }\r\n\r\n this.setDefault();\r\n return super.setLayers(layout);\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n const zIndex = zIndexes.Shower.ShowerPanCombo;\r\n if (zIndexes && this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndex;\r\n }\r\n }\r\n\r\n getMatchingPositionFeature = (position = \"\", forFeature = this.activeFeature) => {\r\n if (forFeature) { //just in case\r\n let arrayOfConditions = this.getArrayOfConditions();\r\n if (forFeature.metaData[\"SkuName\"]) {\r\n arrayOfConditions.push({\r\n propName: \"SkuName\",\r\n propValue: forFeature.metaData[\"SkuName\"]\r\n })\r\n }\r\n return this.features.find((feature) => {\r\n return feature.matchesMetaForArrayOfConditions(arrayOfConditions) && feature.metaData[\"layerPosition\"] === position\r\n });\r\n }\r\n return null\r\n };\r\n\r\n getArrayOfConditions() {\r\n let conditions = super.getArrayOfConditions(); //roomLayout\r\n const showerParent = this.getParent();\r\n conditions.push({\r\n propName: \"ShowerSize\",\r\n propValue: showerParent.showerSize()\r\n });\r\n return conditions\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\n\r\nexport default class ShowerDoorHandle extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'shower_door_handle';\r\n this.partName = 'Handle';\r\n this.translateId = \"visualizer.bathroom.shower.shower_door_handle\";\r\n this.dbName = 'Shower Door Handle';\r\n this.visible = true;\r\n this.isStoneFeature = false;\r\n this.layerPriority = 9;\r\n if (isChild) {\r\n this.previouslySelectedFeatures = {\r\n Layout1: {},\r\n };\r\n }\r\n }\r\n\r\n load(dbFeature) {\r\n const handle = this.load_(dbFeature, new ShowerDoorHandle());\r\n if (handle) {\r\n ShowerDoorHandle.setAdditionalMetaData(handle);\r\n }\r\n }\r\n\r\n static setAdditionalMetaData(handle) {\r\n const compatible = handle.metaData[\"CompatibleTub\"];\r\n const showerSize = handle.metaData[\"ShowerSize\"];\r\n if (!compatible) {\r\n handle.metaData[\"CompatibleTub\"] = [\"None\"];\r\n }\r\n if (!showerSize) {\r\n handle.metaData[\"ShowerSize\"] = [\"60in\"];\r\n }\r\n }\r\n\r\n disabledClick() {\r\n const showerDoor = this.getParent().showerDoor;\r\n if (showerDoor) {\r\n showerDoor.disabled = this.disabled;\r\n }\r\n }\r\n\r\n handleClick() {\r\n super.handleClick();\r\n // this.getParent().getParent().setShowerTubCombo();\r\n //\r\n // let doorWithLiner = false;\r\n // if(this.metaData && this.metaData.length) {\r\n // const activeDoorMetadata = this.metaData.find(metaDataObject => metaDataObject.isFor);\r\n // const showerPanValues = activeDoorMetadata.conditions.find(condition => condition.name === \"BathtubLiner\");\r\n // if (showerPanValues) {\r\n // doorWithLiner = true;\r\n // }\r\n // }\r\n //\r\n // this.getParent().getParent().setLinerActive(doorWithLiner);\r\n // this.featureClicked();\r\n }\r\n\r\n setLayers(layout) {\r\n\r\n const showerParent = this.getParent();\r\n\r\n if (!showerParent.showerDoor || !showerParent.showerDoor.activeFeature ||\r\n (showerParent.showerDoor.activeFeature.metaData && showerParent.showerDoor.activeFeature.metaData[\"ShowerHandle\"]\r\n && showerParent.showerDoor.activeFeature.metaData[\"ShowerHandle\"][0] === \"None\")) {\r\n super.hideLayers();\r\n return;\r\n }\r\n\r\n if (this.activeFeature && (this.activeFeature.matchesMetaForArrayOfConditions(this.getArrayOfConditions())\r\n || (this.activeFeature.notAvailableInVisualizer && this.placeholderFeature))) {\r\n return super.setLayers(layout);\r\n }\r\n\r\n this.setDefault();\r\n return super.setLayers(layout);\r\n }\r\n\r\n // getArrayOfConditions() {\r\n // const layout = this.getParent().layout;\r\n // const showerComboParent = layout.parts[ShowerTubCombo.id];\r\n // const showerParent = this.getParent();\r\n // const layoutAbr = layout.getCurrentLayoutAbbreviation();\r\n //\r\n // let showerSize = showerComboParent.showerTubComboIsActive\r\n // ? showerComboParent.showerSize()\r\n // : showerParent.showerSize();\r\n //\r\n // let compatibleValue = \"None\";\r\n // if (showerComboParent.showerTubComboIsActive) {\r\n // if (showerComboParent.bottomTub === ShowerComboTubType.bathtub_liner) {\r\n // compatibleValue = \"BathtubLiner\"\r\n // } else if (showerComboParent.bottomTub === ShowerComboTubType.replacement_tub) {\r\n // compatibleValue = \"ReplacementTub\"\r\n // } else if (showerComboParent.bottomTub === ShowerComboTubType.walk_in_tub) {\r\n // compatibleValue = \"WalkInTub\"\r\n // } else if (showerComboParent.bottomTub === ShowerComboTubType.jetted_tub) {\r\n // compatibleValue = \"JettedTub\"\r\n // }\r\n // }\r\n //\r\n // const conditions = [{\r\n // propName: 'ShowerSize',\r\n // propValue: showerSize\r\n // },{\r\n // propName: 'CompatibleTub',\r\n // propValue: compatibleValue\r\n // }];\r\n //\r\n // if (layoutAbr === LayoutAbbreviation.Large) {\r\n // let showerDimensions = showerComboParent.showerTubComboIsActive\r\n // ? showerComboParent.showerDimensions()\r\n // : showerParent.showerDimensions();\r\n //\r\n // showerDimensions = getMetadataByDimensions(showerDimensions);\r\n //\r\n // const vanity = layout.parts[Vanity.id];\r\n // let counterTopSize = vanity.counterTopSize();\r\n // if (counterTopSize === '72in' && layout.type === 1 && (showerDimensions !== \"Full\" || showerDimensions !== \"Pony\")) {\r\n // showerDimensions = \"Full\"\r\n // }\r\n //\r\n // conditions.push({\r\n // propName: \"EX L\",\r\n // propValue: showerDimensions\r\n // })\r\n // }\r\n //\r\n // if (showerParent.showerDoor && showerParent.showerDoor.activeFeature) { // add shower pan condition only if it is shower\r\n // const doorCondition = showerParent.showerDoor.activeFeature.metaData[\"ShowerDoor\"];\r\n // const handleCondition = showerParent.showerDoor.activeFeature.metaData[\"ShowerHandle\"];\r\n // // console.log('doorCondition', doorCondition);\r\n // if (doorCondition) {\r\n // conditions.push({\r\n // propName: 'ShowerDoor',\r\n // propValue: doorCondition\r\n // })\r\n // }\r\n // if (handleCondition) {\r\n // conditions.push({\r\n // propName: 'ShowerHandle',\r\n // propValue: handleCondition\r\n // })\r\n // }\r\n // }\r\n //\r\n // if (!showerParent.showerTubComboIsActive()) {\r\n // if (showerParent.showerFloorIsActive) {\r\n // conditions.push({\r\n // propName: \"ShowerPan\",\r\n // propValue: \"Threshold\"\r\n // })\r\n // } else if (showerParent.showerPanCombo && showerParent.showerPanCombo.activeFeature) {\r\n // conditions.push({\r\n // propName: \"ShowerPan\",\r\n // propValue: showerParent.showerPanCombo.activeFeature.metaData[\"ShowerPan\"]\r\n // })\r\n // }\r\n // }\r\n // // console.log('conditions', conditions);\r\n // return conditions\r\n // }\r\n\r\n setDefault() {\r\n const shower = this.getParent();\r\n const currentActiveFeature = this.activeFeature;\r\n const filteredFeatures = this.features.filter(f => f.matchesMetaForArrayOfConditions(this.getArrayOfConditions()));\r\n if (!super.tryToSetTheSameFeature(filteredFeatures)) {\r\n this.setDefaultAccordingToPreviousSelect(shower, filteredFeatures, \"Brantford\");\r\n }\r\n this.rememberPreviousSelection(shower, currentActiveFeature);\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n const zIndex = zIndexes.Shower.ShowerDoorHandle;\r\n if (zIndexes && this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndex;\r\n }\r\n if (zIndexes && this.placeholderFeature) {\r\n this.placeholderFeature.layer.zIndex = zIndex;\r\n }\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport {LayoutAbbreviation} from \"../../constants\";\r\n\r\nexport default class PonyWallCap extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'pony_wall_cap';\r\n this.isPonyWallPart = true;\r\n this.visible = true;\r\n this.partName = 'Pony Wall Cap';\r\n this.translateId = \"visualizer.bathroom.shower.pony_wall_cap\";\r\n this.isStoneFeature = true;\r\n this.disableOnHomeSections = true;\r\n this.layerPriority = 11;\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new PonyWallCap());\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n const zIndex = zIndexes.Shower.PonyWallCap;\r\n if (zIndexes && this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndex;\r\n }\r\n if (zIndexes && this.placeholderFeature) {\r\n this.placeholderFeature.layer.zIndex = zIndex;\r\n }\r\n }\r\n\r\n setLayers(layout) {\r\n\r\n const showerParent = this.getParent().getActiveShowerGroup();\r\n if (showerParent.showerDimensions() !== \"Pony\") {\r\n super.hideLayers();\r\n return;\r\n }\r\n\r\n const conditions = this.getArrayOfConditions();\r\n\r\n const layoutAbr = layout.getCurrentLayoutAbbreviation();\r\n const matchesByBindings = this.activeFeature && this.activeFeature.dbFeature && this.activeFeature.s3Bindings && this.activeFeature.dbFeature.s3Bindings.some(binding => {\r\n return binding.layout === LayoutAbbreviation.All || binding.layout === layoutAbr\r\n });\r\n if (matchesByBindings && (this.activeFeature.matchesMetaForArrayOfConditions(conditions)\r\n || (this.activeFeature.notAvailableInVisualizer && this.placeholderFeature))) {\r\n return super.setLayers(layout);\r\n }\r\n\r\n this.setDefault();\r\n return super.setLayers(layout);\r\n }\r\n\r\n // getArrayOfConditions() {\r\n // const parent = this.getParent();\r\n // const layout = parent.layout;\r\n // const layoutAbr = layout.getCurrentLayoutAbbreviation();\r\n // if (layoutAbr === LayoutAbbreviation.Small){\r\n // const activeShower = parent.showerTubComboIsActive()\r\n // ? layout.parts[ShowerTubCombo.id]\r\n // : layout.parts[Shower.id];\r\n // const showerSize = activeShower.showerSize(); // 60in, 30in, ..\r\n // // const showerDimensions = activeShower.showerDimensions(); // 15x4, Pony, ...\r\n // return [{\r\n // propName: 'Shower',\r\n // propValue: 'Custom'\r\n // }, {\r\n // propName: 'Size',\r\n // propValue: showerSize\r\n // }];\r\n // }\r\n //\r\n // return []\r\n // }\r\n\r\n setDefault() {\r\n const filteredFeatures = this.features.filter(f => f.matchesMetaForArrayOfConditions(this.getArrayOfConditions()));\r\n if (!super.tryToSetTheSameFeature(filteredFeatures, '', '', true)) {\r\n const hardCodedDefault = filteredFeatures.find((feature) => {\r\n return feature.dbFeature.displayName\r\n && feature.dbFeature.displayName.includesCI(\"Pony Wall Cap - Model[For=Shower=(Custom)=Size=(30in_60in)]\");\r\n });\r\n const placeholderDefault = filteredFeatures.find((feature) => {\r\n return feature.dbFeature.displayName && feature.dbFeature.displayName.includesCI(\" - Placeholder\");\r\n });\r\n this.activeFeature = hardCodedDefault || filteredFeatures[0];\r\n this.placeholderFeature = placeholderDefault || null;\r\n }\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport {LayoutAbbreviation} from \"../../constants\";\r\n\r\nexport default class PonyWallGlass extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'pony_wall_glass';\r\n this.isPonyWallPart = true;\r\n this.visible = true;\r\n this.partName = 'Pony Wall Glass';\r\n this.translateId = \"visualizer.bathroom.shower.pony_wall_glass\";\r\n this.isStoneFeature = false;\r\n this.disableOnHomeSections = true;\r\n this.layerPriority = 10;\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new PonyWallGlass());\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n const zIndex = zIndexes.Shower.PonyWallGlass;\r\n if (zIndexes && this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndex;\r\n }\r\n if (zIndexes && this.placeholderFeature) {\r\n this.placeholderFeature.layer.zIndex = zIndex;\r\n }\r\n }\r\n\r\n setLayers(layout) {\r\n\r\n const showerParent = this.getParent().getActiveShowerGroup();\r\n if (showerParent.showerDimensions() !== \"Pony\") {\r\n super.hideLayers();\r\n return;\r\n }\r\n\r\n const layoutAbr = layout.getCurrentLayoutAbbreviation();\r\n const matchesByBindings = this.activeFeature && this.activeFeature.dbFeature.s3Bindings.some(binding => {\r\n return binding.layout === LayoutAbbreviation.All || binding.layout === layoutAbr\r\n });\r\n\r\n if (matchesByBindings && (this.activeFeature.matchesMetaForArrayOfConditions(this.getArrayOfConditions())\r\n || (this.activeFeature.notAvailableInVisualizer && this.placeholderFeature))) {\r\n return super.setLayers(layout);\r\n }\r\n\r\n this.setDefault();\r\n return super.setLayers(layout);\r\n }\r\n\r\n // getArrayOfConditions() {\r\n // const showerParent = this.getParent();\r\n // const layout = showerParent.layout;\r\n // const layoutAbr = layout.getCurrentLayoutAbbreviation();\r\n //\r\n // if (layoutAbr === LayoutAbbreviation.Small) {\r\n // const showerComboParent = this.getParent().layout.parts[ShowerTubCombo.id];\r\n // let showerSize = showerComboParent.showerTubComboIsActive\r\n // ? showerComboParent.showerSize()\r\n // : showerParent.showerSize();\r\n // return [{\r\n // propName: 'Size',\r\n // propValue: showerSize\r\n // }]\r\n // }\r\n //\r\n // return []\r\n // }\r\n\r\n setDefault() {\r\n const filteredFeatures = this.features.filter(f => f.matchesMetaForArrayOfConditions(this.getArrayOfConditions()));\r\n if (!super.tryToSetTheSameFeature(filteredFeatures)) {\r\n const hardCodedDefault = filteredFeatures.find((feature) => {\r\n return feature.dbFeature.displayName && feature.dbFeature.displayName.includes(\"Standard Pony Wall\");\r\n });\r\n const placeholderDefault = filteredFeatures.find((feature) => {\r\n return feature.dbFeature.displayName && feature.dbFeature.displayName.includes(\"laceholder\");\r\n });\r\n this.activeFeature = hardCodedDefault || filteredFeatures[0];\r\n this.placeholderFeature = placeholderDefault || null;\r\n }\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport {ShowerBodyType} from \"../../constants\";\r\nimport {Shower} from \"../../parts/shower\";\r\nimport {ShowerTubCombo} from \"../../parts/showerTubCombo\";\r\nimport {getFeatureIsLocked} from \"../../../../../misc/helpers\";\r\nimport store from \"../../../../../store\";\r\nimport {toggleNotCompatibleView} from \"../../../../../actions/selectionFunctions\";\r\n\r\nexport default class ShowerFloor extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'shower_floor';\r\n this.translateId = \"visualizer.bathroom.shower.shower_floor\";\r\n this.partName = 'Floor';\r\n this.homePageTitle = 'Shower Flooring';\r\n this.dbName = 'ShowerFloor';\r\n this.isStoneFeature = true;\r\n this.selectedByUser = false;\r\n this.layerPriority = 6;\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new ShowerFloor())\r\n }\r\n\r\n applyFeatureIfNotCompatible() {\r\n const parent = this.getParent();\r\n const shower = parent.getParent();\r\n shower.showerFloorIsActive = true;\r\n if (shower.layout && shower.showerTubComboIsActive()) {\r\n const comboPart = shower.layout.parts[ShowerTubCombo.id];\r\n comboPart.showerTubComboIsActive = false;\r\n }\r\n }\r\n\r\n handleClick(ignoreLocked) {\r\n super.handleClick(ignoreLocked);\r\n if (this.notAvailableInVisualizer || getFeatureIsLocked(this)) {\r\n return\r\n }\r\n const parent = this.getParent();\r\n const shower = parent.getParent();\r\n if ((!shower.showerFloorIsActive || shower.showerTubComboIsActive()) && !window.location.hash.includes(\"visualizer\")) {\r\n store.dispatch(toggleNotCompatibleView(true));\r\n return;\r\n }\r\n\r\n this.applyFeatureIfNotCompatible();\r\n\r\n this.getParent().selectedByUser = true;\r\n const threshold = shower.threshold;\r\n if (threshold && !threshold.selectedByUser) {\r\n const thresholdAvailableFeatures = threshold.navigationSubItems();\r\n const currentFloorName = this.getSplittedFeatureName();\r\n const sameThreshold = thresholdAvailableFeatures.find(tr => tr.part.getSplittedFeatureName() === currentFloorName);\r\n if (sameThreshold) {\r\n super.handleClick.call(sameThreshold.part);\r\n threshold.selectedByUser = false;\r\n }\r\n }\r\n }\r\n\r\n setLayers(layout) {\r\n\r\n if (this.getParent().showerTubComboIsActive()) {\r\n super.hideLayers();\r\n return;\r\n }\r\n\r\n if (this.getParent().customBodyType === ShowerBodyType.Door) {\r\n const showerDoorParent = this.getParent().showerDoor;\r\n if (showerDoorParent && showerDoorParent.activeFeature) {\r\n const currentShowerPanCondition = showerDoorParent.activeFeature.metaData[\"ShowerPan\"];\r\n if (!currentShowerPanCondition || (currentShowerPanCondition && !currentShowerPanCondition.includes(\"Threshold\"))) {\r\n super.hideLayers();\r\n return;\r\n }\r\n }\r\n }\r\n\r\n const conditions = this.getArrayOfConditions();\r\n if (this.activeFeature && (this.activeFeature.matchesMetaForArrayOfConditions(conditions)\r\n || (this.activeFeature.notAvailableInVisualizer && this.placeholderFeature))) {\r\n return super.setLayers(layout);\r\n }\r\n this.setDefault();\r\n return super.setLayers(layout);\r\n }\r\n\r\n getArrayOfConditions() {\r\n let conditions = super.getArrayOfConditions(); //roomLayout\r\n const showerParent = this.getParent();\r\n conditions.push({\r\n propName: \"ShowerSize\",\r\n propValue: showerParent.showerSize()\r\n });\r\n return conditions\r\n }\r\n\r\n setDefault() {\r\n const filteredFeatures = this.features.filter(f => f.matchesMetaForArrayOfConditions(this.getArrayOfConditions()));\r\n if (!super.tryToSetTheSameFeature(filteredFeatures)) {\r\n const hardCodedDefault = filteredFeatures.find((feature) => {\r\n return feature.dbFeature.displayName && feature.dbFeature.displayName.includes(\"Sahara Autumn Porcelain Tile\");\r\n });\r\n const placeholderDefault = filteredFeatures.find((feature) => {\r\n return feature.dbFeature.displayName && feature.dbFeature.displayName.includes(\"laceholder\");\r\n });\r\n this.activeFeature = hardCodedDefault || filteredFeatures[0];\r\n this.placeholderFeature = placeholderDefault || null;\r\n }\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n if (this.getParent().activeSubType() === Shower.Type.Custom) {\r\n const zIndex = zIndexes.Shower.Floor;\r\n if (zIndexes && this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndex;\r\n }\r\n if (zIndexes && this.placeholderFeature) {\r\n this.placeholderFeature.layer.zIndex = zIndex;\r\n }\r\n }\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport {ShowerBodyType} from \"../../constants\";\r\nimport {Shower} from \"../../parts/shower\";\r\nimport {ShowerTubCombo} from \"../../parts/showerTubCombo\";\r\nimport {getFeatureIsLocked} from \"../../../../../misc/helpers\";\r\nimport store from \"../../../../../store\";\r\nimport {toggleNotCompatibleView} from \"../../../../../actions/selectionFunctions\";\r\n\r\nexport default class Threshold extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'threshold';\r\n this.partName = 'Threshold';\r\n this.translateId = \"visualizer.bathroom.shower.threshold\";\r\n this.homePageTitle = 'Threshold';\r\n this.dbName = 'ShowerPan';\r\n this.isStoneFeature = true;\r\n this.selectedByUser = false;\r\n this.layerPriority = 7;\r\n }\r\n\r\n applyFeatureIfNotCompatible() {\r\n const parent = this.getParent();\r\n const shower = parent.getParent();\r\n shower.showerFloorIsActive = true;\r\n if (shower.layout && shower.showerTubComboIsActive()) {\r\n const comboPart = shower.layout.parts[ShowerTubCombo.id];\r\n comboPart.showerTubComboIsActive = false;\r\n }\r\n }\r\n\r\n handleClick(ignoreLocked) {\r\n super.handleClick(ignoreLocked);\r\n if (this.notAvailableInVisualizer || getFeatureIsLocked(this)) {\r\n return\r\n }\r\n const parent = this.getParent();\r\n const shower = parent.getParent();\r\n if ((!shower.showerFloorIsActive || shower.showerTubComboIsActive()) && !window.location.hash.includes(\"visualizer\")) {\r\n store.dispatch(toggleNotCompatibleView(true));\r\n return;\r\n }\r\n\r\n this.applyFeatureIfNotCompatible();\r\n\r\n this.getParent().selectedByUser = true;\r\n const showerFloor = shower.showerFloor;\r\n if (showerFloor && !showerFloor.selectedByUser) {\r\n const showerFloorAvailableFeatures = showerFloor.navigationSubItems();\r\n const currentThresholdName = this.getSplittedFeatureName();\r\n const sameShowerFloor = showerFloorAvailableFeatures.find(navItemFloor => {\r\n return navItemFloor.part.getSplittedFeatureName() === currentThresholdName\r\n });\r\n if (sameShowerFloor) {\r\n super.handleClick.call(sameShowerFloor.part);\r\n showerFloor.selectedByUser = false;\r\n }\r\n }\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new Threshold())\r\n }\r\n\r\n setLayers(layout) {\r\n\r\n if (this.getParent().showerTubComboIsActive() || !this.getParent().showerFloorIsActive) {\r\n super.hideLayers();\r\n return;\r\n }\r\n\r\n if (this.getParent().customBodyType === ShowerBodyType.Door) {\r\n const showerDoorParent = this.getParent().showerDoor;\r\n if (showerDoorParent && showerDoorParent.activeFeature) {\r\n const currentShowerPanCondition = showerDoorParent.activeFeature.metaData[\"ShowerPan\"];\r\n if (!currentShowerPanCondition || (currentShowerPanCondition && !currentShowerPanCondition.includes(\"Threshold\"))) {\r\n super.hideLayers();\r\n return;\r\n }\r\n }\r\n }\r\n const conditions = this.getArrayOfConditions();\r\n if (this.activeFeature && (this.activeFeature.matchesMetaForArrayOfConditions(conditions)\r\n || (this.activeFeature.notAvailableInVisualizer && this.placeholderFeature))) {\r\n return super.setLayers(layout);\r\n }\r\n this.setDefault();\r\n return super.setLayers(layout);\r\n }\r\n\r\n // getArrayOfConditions() {\r\n // const layout = this.getParent().layout;\r\n // const showerSize = this.getParent().showerSize();\r\n // let showerDimensions = getMetadataByDimensions(this.getParent().showerDimensions());\r\n //\r\n // const vanity = layout.parts[Vanity.id];\r\n // let counterTopSize = vanity.counterTopSize();\r\n // if (counterTopSize === '72in' && layout.type === 1 && (showerDimensions !== \"Full\" || showerDimensions !== \"Pony\")) {\r\n // showerDimensions = \"Full\"\r\n // }\r\n //\r\n // return [{\r\n // propName: 'ShowerSize',\r\n // propValue: showerSize\r\n // }, {\r\n // propName: 'EX L',\r\n // propValue: showerDimensions\r\n // }];\r\n // }\r\n\r\n getArrayOfConditions() {\r\n let conditions = super.getArrayOfConditions(); //roomLayout\r\n const showerParent = this.getParent();\r\n conditions.push({\r\n propName: \"ShowerSize\",\r\n propValue: showerParent.showerSize()\r\n });\r\n return conditions\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n if (this.getParent().activeSubType() === Shower.Type.Custom) {\r\n const zIndex = zIndexes.Shower.Threshold;\r\n if (zIndexes && this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndex;\r\n }\r\n if (zIndexes && this.placeholderFeature) {\r\n this.placeholderFeature.layer.zIndex = zIndex;\r\n }\r\n }\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\n\r\nexport default class ShowerDrain extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'shower_drain';\r\n this.partName = 'Shower Drain';\r\n this.translateId = \"visualizer.bathroom.shower.shower_drain\";\r\n this.homePageTitle = 'Shower Drain';\r\n this.visible = false;\r\n this.layerPriority = 14;\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new ShowerDrain())\r\n }\r\n\r\n setLayers(layout) {\r\n const showerParent = this.getParent();\r\n if (!showerParent.showerFloorIsActive || showerParent.showerTubComboIsActive()) {\r\n super.hideLayers();\r\n return;\r\n }\r\n if (this.activeFeature && (this.activeFeature.matchesMetaForArrayOfConditions(this.getArrayOfConditions())\r\n || (this.activeFeature.notAvailableInVisualizer && this.placeholderFeature))) {\r\n return super.setLayers(layout);\r\n }\r\n this.setDefault();\r\n return super.setLayers(layout);\r\n }\r\n\r\n getArrayOfConditions() {\r\n const showerParent = this.getParent();\r\n let conditions = super.getArrayOfConditions(); //roomLayout\r\n conditions.push({\r\n propName: \"ShowerSize\",\r\n propValue: showerParent.showerSize()\r\n })\r\n return conditions\r\n }\r\n\r\n setDefault() {\r\n const filteredFeatures = this.features.filter(f => f.matchesMetaForArrayOfConditions(this.getArrayOfConditions()));\r\n this.activeFeature = filteredFeatures[0];\r\n this.placeholderFeature = filteredFeatures[0];\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n const zIndex = zIndexes.Shower.ShowerDrain;\r\n if (zIndexes && this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndex;\r\n }\r\n if (zIndexes && this.placeholderFeature) {\r\n this.placeholderFeature.layer.zIndex = zIndex;\r\n }\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport {ShowerTubCombo} from \"../../parts/showerTubCombo\";\r\nimport {IS_BATHROOM_OLD_BV_SCENE} from \"../../../../../config\";\r\n\r\nexport default class ShowerHead extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'shower_head';\r\n this.partName = 'Shower Head';\r\n this.translateId = \"visualizer.bathroom.shower.shower_head\";\r\n this.layerPriority = 4;\r\n this.canBeDisabled = true;\r\n if (isChild) {\r\n this.previouslySelectedFeatures = {\r\n Layout1: {},\r\n Layout4: {},\r\n };\r\n }\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new ShowerHead());\r\n }\r\n\r\n setLayers(layout) {\r\n\r\n const showerTubCombo = this.getParent().layout.parts[ShowerTubCombo.id];\r\n\r\n if (this.getParent().showerTubComboIsActive() && showerTubCombo && showerTubCombo.walkInTub\r\n && showerTubCombo.bottomTub === showerTubCombo.walkInTub.bottomTubId) {\r\n super.hideLayers();\r\n return;\r\n }\r\n if (this.activeFeature && (this.activeFeature.matchesMetaForArrayOfConditions(this.getArrayOfConditions())\r\n || (this.activeFeature.notAvailableInVisualizer && this.placeholderFeature))) {\r\n return super.setLayers(layout);\r\n }\r\n this.setDefault();\r\n return super.setLayers(layout);\r\n }\r\n\r\n // getArrayOfConditions() {\r\n // const showerParent = this.getParent();\r\n // const activeShowerPartId = showerParent.showerTubComboIsActive() ? ShowerTubCombo.id : Shower.id;\r\n // const showerSize = showerParent.layout.parts[activeShowerPartId].showerSize();\r\n // return [{\r\n // propName: \"Shower\",\r\n // propValue: showerParent.showerTubComboIsActive()\r\n // ? [\"Tub\"]\r\n // : showerParent.isComplete() ? \"Complete\" : \"Custom\"\r\n // }, {\r\n // propName: 'ShowerSize',\r\n // propValue: showerSize\r\n // }]\r\n // }\r\n\r\n getArrayOfConditions() {\r\n let conditions = super.getArrayOfConditions(); //roomLayout\r\n const showerParent = this.getParent();\r\n if (!IS_BATHROOM_OLD_BV_SCENE) {\r\n conditions.push({\r\n propName: \"ShowerSize\",\r\n propValue: showerParent.showerSize()\r\n });\r\n }\r\n return conditions\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n if (zIndexes && this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndexes.Shower.ShowerHead;\r\n }\r\n }\r\n}\r\n","import {ShowerTubCombo} from \"../../parts/showerTubCombo\";\r\nimport {Shower} from \"../../parts/shower\";\r\nimport {METADATA, PAN_POSITIONS} from \"../../constants\";\r\nimport AccessoryCommon from \"./accessoryCommon\";\r\n\r\nexport default class SoapDish extends AccessoryCommon {\r\n constructor(isChild, partNumber = 0) {\r\n super(isChild);\r\n this.partNumber = partNumber;\r\n this.partId = 'soap_dish';\r\n this.partName = 'Soap Dish';\r\n this.translateId = \"visualizer.bathroom.accessories.soap_dish\";\r\n this.visible = true;\r\n this.canBeDisabled = true;\r\n if (isChild) {\r\n this.layerPositions = {\r\n [PAN_POSITIONS[0]]: null,\r\n [PAN_POSITIONS[1]]: null,\r\n [PAN_POSITIONS[2]]: null,\r\n };\r\n }\r\n }\r\n\r\n load(dbFeature) {\r\n dbFeature.metaData[\"layerPosition\"] = dbFeature.metaData[\"Side\"] ? dbFeature.metaData[\"Side\"][0] : METADATA.LeftSide;\r\n if (Array.isArray(dbFeature.metaData[\"ShowerSize\"])\r\n && (dbFeature.metaData[\"ShowerSize\"].includes('30')\r\n || dbFeature.metaData[\"ShowerSize\"].includes('30in')\r\n || dbFeature.metaData[\"ShowerSize\"].includes('36')\r\n || dbFeature.metaData[\"ShowerSize\"].includes('36in'))) {\r\n // we don't have L uploaded for small Shower sizes, only C, but we show L features in the navigation\r\n dbFeature.metaData[\"Side\"] = [METADATA.LeftSide];\r\n dbFeature.metaData[\"layerPosition\"] = METADATA.LeftSide;\r\n }\r\n const partNumber = dbFeature.metaData[\"layerPosition\"] === PAN_POSITIONS[0] ? 1 : 2;\r\n return super.load_(dbFeature, new SoapDish(false, partNumber),\r\n true, partNumber === 1 ? 'features' : 'featuresParts');\r\n }\r\n\r\n disabledClick() {\r\n if (!this.disabled && this.activeFeature) {\r\n this.activeFeature.handleClick() // check soapDish\r\n }\r\n }\r\n\r\n availableFeatures(features) {\r\n return features.filter(feature => feature.partNumber === 1)\r\n }\r\n\r\n handleClick() { // \"this\" is feature!! not the feature group\r\n super.handleClick();\r\n const parent = this.getParent();\r\n const accessoriesParent = parent.getParent();\r\n const showerParent = accessoriesParent.layout.parts[Shower.id];\r\n const showerSize = showerParent.showerSize();\r\n if ((showerSize === \"30\" || showerSize === \"36\") && parent.activeFeature) {\r\n parent.layerPositions[parent.activeFeature.metaData[\"layerPosition\"]] = parent.activeFeature;\r\n }\r\n }\r\n\r\n setLayers(layout) {\r\n\r\n const showerParent = this.getParent().layout.parts[Shower.id];\r\n const showerComboParent = layout.parts[ShowerTubCombo.id];\r\n\r\n if (showerParent && showerComboParent && showerParent.showerTubComboIsActive() && showerComboParent.bottomTub === \"walk_in_tub\") {\r\n super.hideLayers();\r\n return;\r\n }\r\n\r\n const conditions = this.getArrayOfConditions();\r\n if ((this.activeFeature && this.activeFeature.matchesMetaForArrayOfConditions(conditions)\r\n || (this.activeFeature && this.activeFeature.notAvailableInVisualizer && this.placeholderFeature))) {\r\n return super.setLayers(layout);\r\n }\r\n\r\n this.setDefault();\r\n return super.setLayers(layout);\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n if (zIndexes) {\r\n Object.keys(this.layerPositions).forEach((key, keyIndex) => {\r\n if (this.layerPositions[key]) {\r\n this.layerPositions[key].layer.zIndex = zIndexes.Accessories.SoapDish + keyIndex*10;\r\n }\r\n })\r\n }\r\n }\r\n}\r\n","import {SIDE_POSITIONS} from \"../../constants\";\r\nimport AccessoryCommon from \"./accessoryCommon\";\r\n\r\nexport default class CornerCaddie extends AccessoryCommon {\r\n constructor(isChild, partNumber = 0) {\r\n super(isChild);\r\n this.partNumber = partNumber;\r\n this.partId = 'corner_caddie';\r\n this.partName = 'Corner Caddie';\r\n this.translateId = \"visualizer.bathroom.accessories.corner_caddie\";\r\n this.visible = true;\r\n this.canBeDisabled = true;\r\n if (isChild) {\r\n this.layerPositions = {\r\n [SIDE_POSITIONS[0]]: null,\r\n [SIDE_POSITIONS[1]]: null,\r\n };\r\n }\r\n }\r\n\r\n load(dbFeature) {\r\n dbFeature.metaData[\"layerPosition\"] = dbFeature.metaData[\"Side\"] ? dbFeature.metaData[\"Side\"][0] : \"\";\r\n const partNumber = dbFeature.metaData[\"layerPosition\"] === SIDE_POSITIONS[0] ? 1 : 2;\r\n return super.load_(dbFeature, new CornerCaddie(false, partNumber),\r\n true, partNumber === 1 ? 'features' : 'featuresParts');\r\n }\r\n\r\n availableFeatures(features) {\r\n return features.filter(feature => feature.partNumber === 1)\r\n }\r\n\r\n handleClick() {\r\n const accessoriesParent = this.getParent().getParent();\r\n accessoriesParent.caddie_type = this.partId;\r\n super.handleClick();\r\n }\r\n\r\n setLayers(layout) {\r\n\r\n const accessoriesParent = this.getParent();\r\n if (accessoriesParent.caddie_type !== this.partId) {\r\n super.hideLayers();\r\n return;\r\n }\r\n\r\n if (this.activeFeature && (this.activeFeature.matchesMetaForArrayOfConditions(this.getArrayOfConditions()))) {\r\n // this.checkIfFeaturePartIsMatching();\r\n return super.setLayers(layout);\r\n }\r\n\r\n this.setDefault();\r\n return super.setLayers(layout);\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n if (zIndexes) {\r\n Object.keys(this.layerPositions).forEach((key, keyIndex) => {\r\n if (this.layerPositions[key]) {\r\n this.layerPositions[key].layer.zIndex = zIndexes.Accessories.CornerCaddie + keyIndex*10;\r\n }\r\n })\r\n }\r\n }\r\n}\r\n","import {SIDE_POSITIONS} from \"../../constants\";\r\nimport AccessoryCommon from \"./accessoryCommon\";\r\n\r\nexport default class LargeCornerCaddie extends AccessoryCommon {\r\n constructor(isChild, partNumber = 0) {\r\n super(isChild);\r\n this.partNumber = partNumber;\r\n this.partId = 'large_corner_caddie';\r\n this.partName = 'Large Corner Caddie';\r\n this.translateId = \"visualizer.bathroom.accessories.large_corner_caddie\";\r\n this.visible = true;\r\n this.canBeDisabled = true;\r\n if (isChild) {\r\n this.layerPositions = {\r\n [SIDE_POSITIONS[0]]: null,\r\n [SIDE_POSITIONS[1]]: null,\r\n };\r\n }\r\n }\r\n\r\n load(dbFeature) {\r\n dbFeature.metaData[\"layerPosition\"] = dbFeature.metaData[\"Side\"] ? dbFeature.metaData[\"Side\"][0] : \"\";\r\n const partNumber = dbFeature.metaData[\"layerPosition\"] === SIDE_POSITIONS[0] ? 1 : 2;\r\n return super.load_(dbFeature, new LargeCornerCaddie(false, partNumber),\r\n true, partNumber === 1 ? 'features' : 'featuresParts');\r\n }\r\n\r\n handleClick() {\r\n const accessoriesParent = this.getParent().getParent();\r\n accessoriesParent.caddie_type = this.partId;\r\n super.handleClick();\r\n }\r\n\r\n setLayers(layout) {\r\n\r\n const accessoriesParent = this.getParent();\r\n if (accessoriesParent.caddie_type !== this.partId) {\r\n super.hideLayers();\r\n return;\r\n }\r\n\r\n if (this.activeFeature && (this.activeFeature.matchesMetaForArrayOfConditions(this.getArrayOfConditions()))) {\r\n // this.checkIfFeaturePartIsMatching();\r\n return super.setLayers(layout);\r\n }\r\n\r\n this.setDefault();\r\n return super.setLayers(layout);\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n if (zIndexes) {\r\n Object.keys(this.layerPositions).forEach((key, keyIndex) => {\r\n if (this.layerPositions[key]) {\r\n this.layerPositions[key].layer.zIndex = zIndexes.Accessories.LargeCornerCaddie + keyIndex*10;\r\n }\r\n })\r\n }\r\n }\r\n\r\n}\r\n","import {METADATA, PAN_POSITIONS, SIDE_POSITIONS} from \"../../constants\";\r\nimport AccessoryCommon from \"./accessoryCommon\";\r\n// import {Shower} from \"../../parts/shower\";\r\n\r\nexport default class GrabBar extends AccessoryCommon {\r\n constructor(isChild, partNumber = 0) {\r\n super(isChild);\r\n this.partNumber = partNumber;\r\n this.partId = 'grab_bar';\r\n this.partName = 'Grab Bar';\r\n this.translateId = \"visualizer.bathroom.accessories.grab_bar\";\r\n this.visible = true;\r\n this.canBeDisabled = true;\r\n if (isChild) {\r\n this.layerPositions = {\r\n [PAN_POSITIONS[0]]: null,\r\n [PAN_POSITIONS[1]]: null,\r\n [PAN_POSITIONS[2]]: null,\r\n };\r\n }\r\n }\r\n\r\n load(dbFeature) {\r\n if (!dbFeature.metaData[\"Shower\"]) {\r\n dbFeature.metaData[\"Shower\"] = [\"Shower\"];\r\n }\r\n dbFeature.metaData[\"layerPosition\"] = dbFeature.metaData[\"Side\"] ? dbFeature.metaData[\"Side\"][0] : METADATA.LeftSide;\r\n const partNumber = dbFeature.metaData[\"layerPosition\"] === PAN_POSITIONS[0] ? 1 : 2;\r\n return super.load_(dbFeature, new GrabBar(false, partNumber),\r\n true, partNumber === 1 ? 'features' : 'featuresParts');\r\n }\r\n\r\n disabledClick() {\r\n if (!this.disabled && this.activeFeature) {\r\n this.activeFeature.handleClick() // check soapDish\r\n }\r\n }\r\n\r\n availableFeatures(features) {\r\n return features.filter(feature => feature.partNumber === 1)\r\n }\r\n\r\n handleClick(ignoreLocked) { // \"this\" is feature!! not the feature group\r\n super.handleClick(ignoreLocked);\r\n // const parent = this.getParent();\r\n // const accessoriesParent = parent.getParent();\r\n // const showerParent = accessoriesParent.layout.parts[Shower.id];\r\n // const showerSize = showerParent.showerSize();\r\n // if (showerSize !== \"60\" && parent.activeFeature) {\r\n // parent.layerPositions[parent.activeFeature.metaData[\"layerPosition\"]] = parent.activeFeature;\r\n // }\r\n // parent.checkRelatedFeatureGroupPositions(this.metaData[\"layerPosition\"]);\r\n }\r\n\r\n checkCurrentPositions(position) {\r\n const feature = this.layerPositions[position];\r\n if (!feature) {\r\n return\r\n }\r\n const nameSplitted = feature.dbFeature.sharedFeatureName.split(\" \");\r\n const size = nameSplitted[nameSplitted.length - 1] ? nameSplitted[nameSplitted.length - 1].replace(\"in\", \"\") : \"\";\r\n const newPosition = position === SIDE_POSITIONS[0] ? SIDE_POSITIONS[1] : SIDE_POSITIONS[0];\r\n if (!size || !this.layerPositions[newPosition]) {\r\n return\r\n }\r\n if (this.layerPositions[newPosition]) {\r\n const nameSplitted2 = this.layerPositions[newPosition].dbFeature.sharedFeatureName.split(\" \");\r\n const size2 = nameSplitted2[nameSplitted2.length - 1] ? nameSplitted2[nameSplitted2.length - 1].replace(\"in\", \"\") : \"\";\r\n if (!size || (+size2 === 12 && +size === 12)) { // last chance to keep other side layer\r\n return;\r\n }\r\n }\r\n this.layerPositions[newPosition] = null;\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n if (zIndexes) {\r\n Object.keys(this.layerPositions).forEach((key, keyIndex) => {\r\n if (this.layerPositions[key]) {\r\n this.layerPositions[key].layer.zIndex = zIndexes.Accessories.GrabBar + keyIndex*10;\r\n }\r\n })\r\n }\r\n }\r\n\r\n // showLayerPositionsModal() {\r\n // const showerParent = this.getParent().layout.parts[Shower.id];\r\n // return showerParent.showerSize() === \"60\"\r\n // }\r\n\r\n}\r\n","import {CORNER_SHELVES_POSITIONS} from \"../../constants\";\r\nimport AccessoryCommon from \"./accessoryCommon\";\r\n\r\nexport default class CornerShelf extends AccessoryCommon {\r\n constructor(isChild, partNumber = 0) {\r\n super(isChild);\r\n this.partNumber = partNumber;\r\n this.partId = \"corner_shelf\";\r\n this.partName = \"Corner Shelf\";\r\n this.translateId = \"visualizer.bathroom.accessories.corner_shelf\";\r\n this.dbName = \"Small Corner Shelf\";\r\n this.visible = true;\r\n this.canBeDisabled = true;\r\n if (isChild) {\r\n this.layerPositions = {};\r\n CORNER_SHELVES_POSITIONS.forEach(pos => {\r\n this.layerPositions[pos] = null\r\n })\r\n }\r\n }\r\n\r\n load(dbFeature) {\r\n dbFeature.metaData[\"layerPosition\"] = (dbFeature.metaData[\"Side\"] && dbFeature.metaData[\"Part\"])\r\n ? dbFeature.metaData[\"Side\"][0] + dbFeature.metaData[\"Part\"][0]\r\n : \"\"\r\n const partNumber = dbFeature.metaData[\"layerPosition\"] === CORNER_SHELVES_POSITIONS[0] ? 1 : 2;\r\n return super.load_(dbFeature, new CornerShelf(false, partNumber),\r\n true, partNumber === 1 ? 'features' : 'featuresParts');\r\n }\r\n\r\n handleClick() {\r\n const accessoriesParent = this.getParent().getParent();\r\n accessoriesParent.caddie_type = this.partId;\r\n super.handleClick();\r\n }\r\n\r\n setLayers(layout) {\r\n\r\n const accessoriesParent = this.getParent();\r\n if (accessoriesParent.caddie_type !== this.partId) {\r\n super.hideLayers();\r\n return;\r\n }\r\n\r\n if (this.activeFeature && (this.activeFeature.matchesMetaForArrayOfConditions(this.getArrayOfConditions()))) {\r\n // this.checkIfFeaturePartIsMatching();\r\n super.setLayers(layout);\r\n } else {\r\n this.setDefault();\r\n super.setLayers(layout);\r\n }\r\n\r\n // if (this.layerPositions) {\r\n // const windowParent = this.getParent().layout.parts.Window;\r\n // if (windowParent && windowParent.windowKits && !windowParent.windowKits.disabled) {\r\n // Object.keys(this.layerPositions).forEach(key => {\r\n // if (!key.includes(\"3\") && this.layerPositions[key]) {\r\n // this.layerPositions[key].layer.src = '';\r\n // }\r\n // })\r\n // }\r\n // }\r\n\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n if (zIndexes) {\r\n Object.keys(this.layerPositions).forEach((key, keyIndex) => {\r\n if (this.layerPositions[key]) {\r\n this.layerPositions[key].layer.zIndex = zIndexes.Accessories.CornerShelf1 + keyIndex*10;\r\n }\r\n })\r\n }\r\n }\r\n\r\n showLayerPositionsModal() {\r\n return true\r\n }\r\n\r\n}\r\n","import AccessoryCommon from \"./accessoryCommon\";\r\n// import DesignNavigationItem from \"../../../../visComponents/designNavigationItem\";\r\n\r\nexport default class ShowerPod extends AccessoryCommon {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'shower_pod';\r\n this.partName = 'Shower Pod';\r\n this.translateId = \"visualizer.bathroom.accessories.shower_pod\";\r\n this.dbName = document.kvConfig.userId === 157639 ? 'Storage Pods' : 'Storage Pod'; // window.location.href.includes(\"american_standard_website\")\r\n this.visible = true;\r\n this.canBeDisabled = true;\r\n }\r\n\r\n handleClick() { // \"this\" is feature!! not the feature group\r\n const parent = this.getParent();\r\n const accessoriesParent = parent.getParent();\r\n if (accessoriesParent && accessoriesParent.largeShelf && !accessoriesParent.largeShelf.disabled) {\r\n accessoriesParent.largeShelf.disabled = true;\r\n }\r\n super.handleClick();\r\n }\r\n\r\n load(dbFeature) {\r\n if (document.kvConfig.userId !== 157639 && dbFeature.groupName !== 'Storage Pod') {\r\n return false\r\n }\r\n return super.load_(dbFeature, new ShowerPod());\r\n }\r\n\r\n // navigationSubItems(filters, searchText) {\r\n // const filteredAvailableFeatures = super.getFeaturesBySearchText(super.getFilteredFeaturesByFilters(filters), searchText);\r\n // const featuresToDisplay = super.navigationSubItemsWithFilterMultipleConditions(this.getArrayOfConditions(), filteredAvailableFeatures);\r\n // const parent = this.getParent();\r\n // featuresToDisplay.forEach(feature => {\r\n // if (parent.layout.parts.Window && parent.layout.parts.Window.windowKits && !parent.layout.parts.Window.windowKits.disabled) {\r\n // feature.matchesMetaFailed = true;\r\n // } else if (feature.matchesMetaFailed) {\r\n // feature.matchesMetaFailed = false;\r\n // }\r\n // });\r\n // return featuresToDisplay.map(_ => new DesignNavigationItem(_.featureName, _));\r\n // }\r\n\r\n handleChangeParent(nonCompatibleWith) {\r\n if (nonCompatibleWith === \"Window Kit\") {\r\n const showerPodParent = this.getParent();\r\n const accessoriesParent = showerPodParent.getParent();\r\n accessoriesParent.layout.parts.Window.windowKits.disabled = true;\r\n showerPodParent.disabled = false;\r\n this.handleClick();\r\n }\r\n }\r\n\r\n disabledClick() {\r\n const accessoriesParent = this.getParent();\r\n const windowParent = accessoriesParent.layout.parts.Window;\r\n if (windowParent && windowParent.windowKits && !windowParent.windowKits.disabled) {\r\n windowParent.windowKits.disabled = true;\r\n }\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n const zIndex = zIndexes.Accessories.ShowerPod;\r\n if (zIndexes && this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndex;\r\n }\r\n if (zIndexes && this.placeholderFeature) {\r\n this.placeholderFeature.layer.zIndex = zIndex;\r\n }\r\n }\r\n\r\n}\r\n","import AccessoryCommon from \"./accessoryCommon\";\r\nimport {SIDE_POSITIONS} from \"../../constants\";\r\nimport {Shower} from \"../../parts/shower\";\r\nimport {ShowerTubCombo} from \"../../parts/showerTubCombo\";\r\n\r\nexport default class Seats extends AccessoryCommon {\r\n constructor(isChild, partNumber = 0) {\r\n super(isChild);\r\n this.partNumber = partNumber;\r\n this.partId = 'shower_seats';\r\n this.partName = 'Seats';\r\n this.dbName = 'Flip-Up Seat';\r\n this.translateId = \"visualizer.bathroom.accessories.shower_seats\";\r\n this.visible = true;\r\n this.canBeDisabled = true;\r\n if (isChild) {\r\n this.layerPositions = {\r\n [SIDE_POSITIONS[0]]: null,\r\n [SIDE_POSITIONS[1]]: null,\r\n };\r\n }\r\n }\r\n\r\n load(dbFeature) {\r\n if (dbFeature.groupName !== \"Flip-Up Seat\") {\r\n return false\r\n }\r\n dbFeature.metaData[\"layerPosition\"] = dbFeature.metaData[\"Side\"] ? dbFeature.metaData[\"Side\"][0] : \"\";\r\n const partNumber = dbFeature.metaData[\"layerPosition\"] === SIDE_POSITIONS[0] ? 1 : 2;\r\n return super.load_(dbFeature, new Seats(false, partNumber),\r\n true, partNumber === 1 ? 'features' : 'featuresParts');\r\n }\r\n\r\n disabledClick() {\r\n Object.keys(this.layerPositions).forEach(position => {\r\n if (this.layerPositions[position] && this.layerPositions[position].metaData[\"layerPosition\"]) {\r\n this.checkRelatedFeatureGroupPositions(this.layerPositions[position].metaData[\"layerPosition\"]);\r\n }\r\n })\r\n }\r\n\r\n handleClick() { // \"this\" is feature!! not the feature group\r\n super.handleClick();\r\n const parent = this.getParent();\r\n const showerComboParent = parent.getParent().layout.parts[ShowerTubCombo.id]\r\n if (showerComboParent.showerTubComboIsActive) {\r\n showerComboParent.showerTubComboIsActive = false;\r\n }\r\n parent.checkRelatedFeatureGroupPositions(this.metaData[\"layerPosition\"]);\r\n }\r\n\r\n setLayers(layout) {\r\n const showerParent = this.getParent().layout.parts[Shower.id];\r\n if (showerParent && showerParent.showerTubComboIsActive()) { // shower tub combo - remove\r\n super.hideLayers();\r\n return;\r\n }\r\n\r\n return super.setLayers(layout);\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n if (zIndexes) {\r\n Object.keys(this.layerPositions).forEach((key, keyIndex) => {\r\n if (this.layerPositions[key]) {\r\n this.layerPositions[key].layer.zIndex = zIndexes.Accessories.Seats + keyIndex*10;\r\n }\r\n })\r\n }\r\n }\r\n\r\n}\r\n","import AccessoryCommon from \"./accessoryCommon\";\r\nimport {Shower} from \"../../parts/shower\";\r\n// import DesignNavigationItem from \"../../../../visComponents/designNavigationItem\";\r\n\r\nexport default class ShowerRod extends AccessoryCommon {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'shower_rod';\r\n this.partName = 'Shower Rod';\r\n this.translateId = \"visualizer.bathroom.accessories.shower_rod\";\r\n this.visible = true;\r\n this.canBeDisabled = true;\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new ShowerRod());\r\n }\r\n\r\n handleClick(ignoreLocked = false) {\r\n const parent = this.getParent()\r\n const showerParent = parent.getParent().layout.parts[Shower.id];\r\n if (showerParent && showerParent.showerDoor && !showerParent.showerDoor.disabled) { // shower tub combo - remove\r\n showerParent.showerDoor.disabled = true\r\n }\r\n super.handleClick(ignoreLocked);\r\n }\r\n\r\n // navigationSubItems(filters, searchText) {\r\n // const filteredAvailableFeatures = super.getFeaturesBySearchText(super.getFilteredFeaturesByFilters(filters), searchText);\r\n // const featuresToDisplay = super.navigationSubItemsWithFilterMultipleConditions(this.getArrayOfConditions(), filteredAvailableFeatures);\r\n // const parent = this.getParent();\r\n // featuresToDisplay.forEach(feature => {\r\n // if (parent.layout.parts.Window && parent.layout.parts.Window.windowKits && !parent.layout.parts.Window.windowKits.disabled) {\r\n // feature.matchesMetaFailed = true;\r\n // } else if (feature.matchesMetaFailed) {\r\n // feature.matchesMetaFailed = false;\r\n // }\r\n // });\r\n // return featuresToDisplay.map(_ => new DesignNavigationItem(_.featureName, _));\r\n // }\r\n\r\n // handleChangeParent(nonCompatibleWith) {\r\n // if (nonCompatibleWith === \"Window Kit\") {\r\n // const showerRodParent = this.getParent();\r\n // const accessoriesParent = showerRodParent.getParent();\r\n // accessoriesParent.layout.parts.Window.windowKits.disabled = true;\r\n // showerRodParent.disabled = false;\r\n // this.handleClick();\r\n // }\r\n // }\r\n\r\n disabledClick() {\r\n const showerParent = this.getParent().layout.parts[Shower.id];\r\n if (!this.disabled && showerParent && showerParent.showerDoor && !showerParent.showerDoor.disabled) { // shower tub combo - remove\r\n showerParent.showerDoor.disabled = true\r\n }\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n const zIndex = zIndexes.Accessories.ShowerRod;\r\n if (zIndexes && this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndex;\r\n }\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport {Shower} from \"../../parts/shower\";\r\n\r\nexport default class WindowBody extends IntermediatePart {\r\n\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'window_body';\r\n this.partName = 'Window';\r\n this.translateId = \"visualizer.bathroom.window\";\r\n this.canBeDisabled = true;\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new WindowBody());\r\n }\r\n\r\n getArrayOfConditions() {\r\n let conditions = super.getArrayOfConditions(); //roomLayout\r\n const layout = this.getParent().layout;\r\n const showerParent = layout.parts[Shower.id];\r\n const showerSize = showerParent.showerSize();\r\n if (showerParent && showerSize) {\r\n conditions.push({\r\n propName: \"ShowerSize\",\r\n propValue: showerSize\r\n });\r\n }\r\n return conditions\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n if (zIndexes && this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndexes.Accessories.WindowBody;\r\n }\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport {Shower} from \"../../parts/shower\";\r\n// import DesignNavigationItem from \"../../../../visComponents/designNavigationItem\";\r\nimport {ShowerAccessories} from \"../../parts/showerAccessories\";\r\nimport {CORNER_SHELVES_POSITIONS} from \"../../constants\";\r\n\r\nexport default class WindowKits extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = \"window_kits\";\r\n this.dbName = \"Window Kit\";\r\n this.partName = \"Window Kits\";\r\n this.translateId = \"visualizer.bathroom.window.kits\";\r\n this.canBeDisabled = true;\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new WindowKits());\r\n }\r\n\r\n // navigationSubItems(filters, searchText) {\r\n // const filteredAvailableFeatures = super.getFeaturesBySearchText(super.getFilteredFeaturesByFilters(filters), searchText);\r\n // const featuresToDisplay = super.navigationSubItemsWithFilterMultipleConditions(this.getArrayOfConditions(), filteredAvailableFeatures);\r\n // const windowParent = this.getParent();\r\n // const accessoriesParent = windowParent.layout.parts[ShowerAccessories.id];\r\n // featuresToDisplay.forEach(feature => {\r\n // if (accessoriesParent && accessoriesParent.showerPod && !accessoriesParent.showerPod.disabled) {\r\n // feature.matchesMetaFailed = \"shower_pod\";\r\n // } else if (accessoriesParent.cornerShelf && !accessoriesParent.cornerShelf.disabled\r\n // && CORNER_SHELVES_POSITIONS.some(pos => accessoriesParent.cornerShelf.layerPositions[pos] && !pos.includes(\"3\"))) {\r\n // feature.matchesMetaFailed = \"corner_shelf\";\r\n // } else if (feature.matchesMetaFailed) {\r\n // feature.matchesMetaFailed = false;\r\n // }\r\n // });\r\n // return featuresToDisplay.map(_ => new DesignNavigationItem(_.featureName, _));\r\n // }\r\n\r\n // handleChangeParent(nonCompatibleWith) {\r\n // if (nonCompatibleWith === \"Shower Pod\") {\r\n //\r\n // }\r\n // }\r\n handleChangeParent() {\r\n // this.removeInterferingParts();\r\n this.getParent().disabled = false;\r\n this.handleClick();\r\n }\r\n\r\n removeInterferingParts = () => {\r\n const kitsParent = this.getParent();\r\n const windowParent = kitsParent.getParent();\r\n const accessoriesParent = windowParent.layout.parts[ShowerAccessories.id];\r\n if (accessoriesParent) {\r\n if (accessoriesParent.showerPod) {\r\n accessoriesParent.showerPod.disabled = true;\r\n }\r\n if (accessoriesParent.cornerShelf) {\r\n CORNER_SHELVES_POSITIONS.forEach(pos => {\r\n if (accessoriesParent.cornerShelf.layerPositions[pos] && !pos.includes(\"3\")) {\r\n accessoriesParent.cornerShelf.layerPositions[pos] = null;\r\n }\r\n })\r\n }\r\n }\r\n }\r\n\r\n // disabledClick() {\r\n // if (!this.disabled) {\r\n // this.removeInterferingParts();\r\n // }\r\n // }\r\n\r\n getArrayOfConditions() {\r\n let conditions = super.getArrayOfConditions(); //roomLayout\r\n const windowParent = this.getParent();\r\n const layout = windowParent.layout;\r\n const showerParent = layout.parts[Shower.id];\r\n const showerSize = showerParent.showerSize();\r\n if (showerParent && showerSize) {\r\n conditions.push({\r\n propName: \"ShowerSize\",\r\n propValue: showerSize\r\n });\r\n }\r\n // if (windowBody && this.windowNeededLayouts.includes(layout.type) && document.kvConfig.toolVersion !== 5) {\r\n // conditions.push({\r\n // propName: \"Window\",\r\n // propValue: (windowBody && windowBody.activeFeature && windowBody.disabled) ? \"Off\" : \"On\"\r\n // })\r\n // }\r\n return conditions\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n if (zIndexes && this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndexes.Accessories.WindowKits;\r\n }\r\n }\r\n}\r\n","import AccessoryCommon from \"./accessoryCommon\";\r\n\r\nexport default class LargeShelf extends AccessoryCommon {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'large_shelf';\r\n this.partName = 'Large Shelf';\r\n this.translateId = \"visualizer.bathroom.accessories.large_shelf\";\r\n this.visible = true;\r\n this.canBeDisabled = true;\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new LargeShelf());\r\n }\r\n\r\n handleClick() { // \"this\" is feature!! not the feature group\r\n const parent = this.getParent();\r\n const accessoriesParent = parent.getParent();\r\n if (accessoriesParent && accessoriesParent.showerPod && !accessoriesParent.showerPod.disabled) {\r\n accessoriesParent.showerPod.disabled = true;\r\n }\r\n super.handleClick();\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n const zIndex = zIndexes.Accessories.LargeShelf;\r\n if (zIndexes && this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndex;\r\n }\r\n if (zIndexes && this.placeholderFeature) {\r\n this.placeholderFeature.layer.zIndex = zIndex;\r\n }\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\n\r\nexport default class TowelBar extends IntermediatePart {\r\n constructor(isChild, partNumber = 0) {\r\n super(isChild);\r\n this.partNumber = partNumber;\r\n this.partId = 'towel_bar';\r\n this.partName = 'Towel Bar';\r\n this.translateId = \"visualizer.bathroom.accessories.towel_bar\";\r\n this.canBeDisabled = true;\r\n // if (isChild) {\r\n // createParentPositions(this);\r\n // }\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n const zIndex = zIndexes.Accessories.TowelBar;\r\n if (zIndexes && this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndex;\r\n }\r\n }\r\n}\r\n","import AccessoryCommon from \"./accessoryCommon\";\r\n\r\nexport default class ShampooShelf extends AccessoryCommon {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'shampoo_shelf';\r\n this.partName = 'Shampoo Shelf';\r\n this.translateId = \"visualizer.bathroom.accessories.shampoo_shelf\";\r\n this.visible = true;\r\n this.canBeDisabled = true;\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new ShampooShelf());\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n const zIndex = zIndexes.Accessories.ShampooShelf;\r\n if (zIndexes && this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndex;\r\n }\r\n if (zIndexes && this.placeholderFeature) {\r\n this.placeholderFeature.layer.zIndex = zIndex;\r\n }\r\n }\r\n\r\n}\r\n","import {Part} from \"../part\";\r\nimport {toiletThumbnail} from '../../../bvComponent/core/assets';\r\nimport {PartMenuType} from \"../../../visComponents/constants\";\r\nimport DesignNavigationItem from \"../../../visComponents/designNavigationItem\";\r\nimport {IntermediatePart} from \"../intermediatePart\";\r\nimport {Shower} from \"./shower\";\r\nimport {IS_BATHROOM_OLD_BV_SCENE} from \"../../../../config\";\r\n\r\nexport class Toilet extends Part {\r\n static id = 'Toilet';\r\n\r\n constructor() {\r\n super(true, false, PartMenuType.Complex);\r\n this.menuType = PartMenuType.Complex;\r\n this.partName = 'Toilet';\r\n this.translateId = \"visualizer.bathroom.toilet\";\r\n this.homePageTitle = 'Toilets';\r\n this.partThumbnail = toiletThumbnail;\r\n this.toilet = null;\r\n this.paperHolder = null;\r\n this.relatedItems = [];\r\n\r\n }\r\n\r\n load(dbFeature) {\r\n let relatedItemName = \"\",\r\n RelatedItemClass = null;\r\n switch (dbFeature.groupName) {\r\n case \"Toilet\": {\r\n relatedItemName = \"toilet\";\r\n RelatedItemClass = ToiletBody;\r\n break;\r\n }\r\n case \"Paper Holder\": {\r\n relatedItemName = \"paperHolder\";\r\n RelatedItemClass = PaperHolder;\r\n break;\r\n }\r\n }\r\n if (relatedItemName) {\r\n if (!this[relatedItemName]) {\r\n this[relatedItemName] = new RelatedItemClass(true);\r\n if (relatedItemName !== \"shadows\") {\r\n this.relatedItems.push(this[relatedItemName]);\r\n }\r\n }\r\n if (!this.categoryEnabled) {\r\n this.categoryEnabled = true\r\n }\r\n this[relatedItemName].getParent = () => this;\r\n this[relatedItemName].load(dbFeature);\r\n return true\r\n }\r\n return false\r\n }\r\n\r\n isSubTypeWithItems() {\r\n return false;\r\n }\r\n\r\n subParts() {\r\n return this.relatedItems.map(_ => new DesignNavigationItem(_.partName, _));\r\n }\r\n\r\n setDefaultPartAfterSubTypeClick() {\r\n return this.subParts()[0]\r\n }\r\n\r\n setDefault(layout) {\r\n this.relatedItems.forEach(_ => _.setDefault(layout));\r\n }\r\n}\r\n\r\nclass ToiletBody extends IntermediatePart {\r\n\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'toilet';\r\n this.partName = 'Toilet';\r\n this.translateId = \"visualizer.bathroom.toilet\";\r\n this.homePageTitle = 'Toilets';\r\n this.canBeDisabled = true;\r\n }\r\n\r\n getArrayOfConditions() {\r\n let conditions = super.getArrayOfConditions(); //roomLayout\r\n const layout = this.getParent().layout;\r\n const showerParent = layout.parts[Shower.id];\r\n const showerSize = showerParent.showerSize();\r\n if (showerParent && showerSize && !IS_BATHROOM_OLD_BV_SCENE) {\r\n conditions.push({\r\n propName: \"ShowerSize\",\r\n propValue: showerSize\r\n });\r\n }\r\n return conditions\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n if (zIndexes && this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndexes.Toilet;\r\n }\r\n if (zIndexes && this.placeholderFeature) {\r\n this.placeholderFeature.layer.zIndex = zIndexes.Toilet;\r\n }\r\n }\r\n}\r\n\r\n\r\nclass PaperHolder extends IntermediatePart {\r\n\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'paper_holder';\r\n this.partName = 'Paper Holder';\r\n this.translateId = \"visualizer.bathroom.accessories.paper_holder\";\r\n this.canBeDisabled = true;\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n if (zIndexes && this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndexes.PaperHolder;\r\n }\r\n }\r\n}\r\n\r\n\r\n","import {Part} from \"../part\";\r\nimport {PartMenuType} from \"../../../visComponents/constants\";\r\nimport {floorThumbnail} from \"../../../kvComponent/core/assets\";\r\n\r\nimport {IntermediatePart} from \"../intermediatePart\";\r\nimport {Shower} from \"./shower\";\r\n\r\nexport default class Floor extends Part {\r\n static id = 'Floor';\r\n\r\n constructor() {\r\n super(true, false, PartMenuType.Complex);\r\n this.partId = 'bathroom_floor';\r\n this.menuType = PartMenuType.Complex;\r\n this.partName = 'Floor';\r\n this.translateId = \"visualizer.bathroom.floor\";\r\n this.partThumbnail = floorThumbnail;\r\n }\r\n\r\n load(dbFeature) {\r\n let relatedItemName = \"\",\r\n RelatedItemClass = null;\r\n switch (dbFeature.groupName) {\r\n case \"Floor\":\r\n relatedItemName = \"floorBody\";\r\n RelatedItemClass = FloorBody;\r\n break;\r\n }\r\n if (relatedItemName) {\r\n if (!this[relatedItemName]) {\r\n this[relatedItemName] = new RelatedItemClass(true);\r\n if (relatedItemName !== \"shadows\") {\r\n this.relatedItems.push(this[relatedItemName]);\r\n }\r\n }\r\n if (!this.categoryEnabled) {\r\n this.categoryEnabled = true\r\n }\r\n this[relatedItemName].getParent = () => this;\r\n this[relatedItemName].load(dbFeature);\r\n return true\r\n }\r\n return false\r\n }\r\n\r\n}\r\n\r\nclass FloorBody extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'bathroom_floor';\r\n this.partName = 'Floor';\r\n this.translateId = \"visualizer.bathroom.floor\";\r\n this.isStoneFeature = true;\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new FloorBody());\r\n }\r\n\r\n getArrayOfConditions() {\r\n let conditions = super.getArrayOfConditions(); //roomLayout\r\n const layout = this.getParent().layout;\r\n const showerParent = layout.parts[Shower.id];\r\n const showerSize = showerParent.showerSize();\r\n if (showerParent && showerSize && layout.type !== 4) {\r\n conditions.push({\r\n propName: \"ShowerSize\",\r\n propValue: showerSize\r\n });\r\n }\r\n return conditions\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n if(zIndexes) {\r\n const zIndex = zIndexes.Background.Floor;\r\n if (this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndex;\r\n }\r\n }\r\n }\r\n}\r\n\r\n\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport {LayoutType} from \"../../constants\";\r\nimport {Shower} from \"../../parts/shower\";\r\n\r\nexport default class LeftWall extends IntermediatePart {\r\n constructor(isChild, partNumber = 0) {\r\n super(isChild);\r\n this.partNumber = partNumber;\r\n this.partId = 'left_wall';\r\n this.partName = 'Left Wall';\r\n this.translateId = \"visualizer.bathroom.walls.left_wall\";\r\n this.activeFeatureBeforeAllWalls = null;\r\n this.allWallsApplied = true;\r\n this.isStoneFeature = true;\r\n this.partsLayouts = [LayoutType.Layout4];\r\n }\r\n\r\n load(dbFeature) {\r\n const partsRoomLayouts = this.partsLayouts.map(pl => \"Layout\"+pl);\r\n const isPartFeature = !dbFeature.metaData[\"RoomLayout\"] || partsRoomLayouts.some(layoutType => {\r\n return dbFeature.metaData[\"RoomLayout\"].includes(layoutType)\r\n });\r\n if (isPartFeature) {\r\n const part1 = dbFeature.metaData[\"LayerType\"] && dbFeature.metaData[\"MirrorSize\"];\r\n const partNumber = part1 ? 1 : 2;\r\n return super.load_(dbFeature, new LeftWall(false, partNumber),\r\n true, partNumber === 1 ? 'features' : 'featuresParts');\r\n }\r\n return super.load_(dbFeature, new LeftWall(false, 1, true, \"features\"));\r\n }\r\n\r\n availableFeatures(features) {\r\n return features.filter(feature => feature.partNumber === 1)\r\n }\r\n\r\n setLayers(layout) {\r\n if (this.activeFeature && (this.activeFeature.matchesMetaForArrayOfConditions(this.getArrayOfConditions()))) {\r\n this.checkIfFeaturePartIsMatching();\r\n super.setLayers(layout);\r\n } else {\r\n this.setDefault();\r\n super.setLayers(layout);\r\n }\r\n }\r\n\r\n setActiveFeatureParts(fromFeature = this.activeFeature, activeFeatureConditions = []) {\r\n return this.getActiveFeaturePartsAccordingToActiveFeature(fromFeature, activeFeatureConditions);\r\n }\r\n\r\n getArrayOfConditions() {\r\n const conditions = super.getArrayOfConditions(); // roomLayout\r\n const shower = this.getParent().layout.parts[Shower.id];\r\n if (shower && shower.showerSize()) {\r\n conditions.push({\r\n propName: \"ShowerSize\",\r\n propValue: shower.showerSize()\r\n })\r\n }\r\n return conditions\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n const layout = this.getParent().layout;\r\n const isPartsLayout = this.partsLayouts.includes(layout.type);\r\n if (zIndexes) {\r\n const zIndex = isPartsLayout ? zIndexes.Walls.LeftWall : zIndexes.Background.LeftWall;\r\n const zIndex2 = zIndexes.Background.LeftWall;\r\n if (this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndex;\r\n }\r\n if (this.activeFeatureParts && this.activeFeatureParts.length) {\r\n this.activeFeatureParts.forEach((activeFeaturePart) => {\r\n if (activeFeaturePart && activeFeaturePart.layer) {\r\n activeFeaturePart.layer.zIndex = zIndex2;\r\n }\r\n })\r\n }\r\n }\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport {Vanity} from \"../../parts/vanity\";\r\nimport {LayoutType} from \"../../constants\";\r\nimport {Shower} from \"../../parts/shower\";\r\nimport {IS_BATHROOM_OLD_BV_SCENE} from \"../../../../../config\";\r\n\r\nexport default class RightWall extends IntermediatePart {\r\n constructor(isChild, partNumber = 0) {\r\n super(isChild);\r\n this.partNumber = partNumber;\r\n this.partId = 'right_wall';\r\n this.partName = 'Right Wall';\r\n this.translateId = \"visualizer.bathroom.walls.right_wall\";\r\n this.activeFeatureBeforeAllWalls = null;\r\n this.allWallsApplied = true;\r\n this.isStoneFeature = true;\r\n this.partsLayouts = [LayoutType.Layout1];\r\n }\r\n\r\n load(dbFeature) {\r\n const partsRoomLayouts = this.partsLayouts.map(pl => \"Layout\"+pl);\r\n const isPartFeature = !dbFeature.metaData[\"RoomLayout\"] || partsRoomLayouts.some(layoutType => {\r\n return dbFeature.metaData[\"RoomLayout\"].includes(layoutType)\r\n });\r\n if (isPartFeature) {\r\n const part1 = dbFeature.metaData[\"LayerType\"] && dbFeature.metaData[\"MirrorSize\"];\r\n const partNumber = part1 ? 1 : 2;\r\n return super.load_(dbFeature, new RightWall(false, partNumber),\r\n true, partNumber === 1 ? 'features' : 'featuresParts');\r\n }\r\n return super.load_(dbFeature, new RightWall(false, 1, true, \"features\"));\r\n }\r\n\r\n availableFeatures(cabinetFeatures) {\r\n return cabinetFeatures.filter(cabinetFeature => cabinetFeature.partNumber === 1)\r\n }\r\n\r\n setLayers(layout) {\r\n if (this.activeFeature && (this.activeFeature.matchesMetaForArrayOfConditions(this.getArrayOfConditions()))) {\r\n this.checkIfFeaturePartIsMatching();\r\n super.setLayers(layout);\r\n } else {\r\n this.setDefault();\r\n super.setLayers(layout);\r\n }\r\n }\r\n\r\n getArrayOfConditions() {\r\n const conditions = super.getArrayOfConditions();\r\n const wallsParent = this.getParent();\r\n const layout = wallsParent.layout;\r\n const mirror = layout.parts[Vanity.id] && layout.parts[Vanity.id].mirror;\r\n if (this.partsLayouts.includes(layout.type) && mirror && mirror.activeFeature && mirror.activeFeature.dbFeature.metaData[\"MirrorSize\"]) {\r\n conditions.push({\r\n propName: \"MirrorSize\",\r\n propValue: IS_BATHROOM_OLD_BV_SCENE\r\n ? mirror.activeFeature.dbFeature.metaData[\"MirrorSize\"][0]\r\n : mirror.activeFeature.dbFeature.metaData[\"MirrorSize\"][0] === \"32\" ? \"48\" : mirror.activeFeature.dbFeature.metaData[\"MirrorSize\"][0]\r\n })\r\n }\r\n const shower = this.getParent().layout.parts[Shower.id];\r\n if (shower && shower.showerSize()) {\r\n conditions.push({\r\n propName: \"ShowerSize\",\r\n propValue: shower.showerSize()\r\n })\r\n }\r\n return conditions;\r\n }\r\n\r\n setActiveFeatureParts(fromFeature = this.activeFeature, activeFeatureConditions = []) {\r\n return this.getActiveFeaturePartsAccordingToActiveFeature(fromFeature, activeFeatureConditions);\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n const layout = this.getParent().layout;\r\n const isPartsLayout = this.partsLayouts.includes(layout.type);\r\n if (zIndexes) {\r\n const zIndex = isPartsLayout ? zIndexes.Walls.RightWall : zIndexes.Background.RightWall;\r\n const zIndex2 = zIndexes.Background.RightWall;\r\n if (this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndex;\r\n }\r\n if (this.placeholderFeature) {\r\n this.placeholderFeature.layer.zIndex = zIndex;\r\n }\r\n if (this.activeFeatureParts && this.activeFeatureParts.length) {\r\n this.activeFeatureParts.forEach((activeFeaturePart) => {\r\n if (activeFeaturePart && activeFeaturePart.layer) {\r\n activeFeaturePart.layer.zIndex = zIndex2;\r\n }\r\n })\r\n }\r\n }\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport {Shower} from \"../../parts/shower\";\r\n\r\nexport default class CenterWall extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'center_wall';\r\n this.partName = 'Center Wall';\r\n this.translateId = \"visualizer.bathroom.walls.center_wall\";\r\n this.activeFeatureBeforeAllWalls = null;\r\n this.allWallsApplied = true;\r\n this.isStoneFeature = true;\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new CenterWall());\r\n }\r\n\r\n getArrayOfConditions() {\r\n const conditions = super.getArrayOfConditions(); // roomLayout\r\n const shower = this.getParent().layout.parts[Shower.id];\r\n if (shower && shower.showerSize()) {\r\n conditions.push({\r\n propName: \"ShowerSize\",\r\n propValue: shower.showerSize()\r\n })\r\n }\r\n return conditions\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n if(zIndexes) {\r\n const zIndex = zIndexes.Background.CenterWall;\r\n if (this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndex;\r\n }\r\n if (this.placeholderFeature) {\r\n this.placeholderFeature.layer.zIndex = zIndex;\r\n }\r\n }\r\n }\r\n}\r\n","import {Shower} from \"../../parts/shower\";\r\nimport {IntermediatePart} from \"../../intermediatePart\";\r\n\r\nexport default class CeilingPanels extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'ceiling_panels';\r\n this.partName = 'Ceiling Panels';\r\n this.translateId = \"visualizer.bathroom.ceiling_panels\";\r\n this.isStoneFeature = true;\r\n }\r\n\r\n load(dbFeature) {\r\n if (dbFeature.metaData && dbFeature.metaData[\"Coords\"]) {\r\n dbFeature.metaData[\"Coords\"] = null;\r\n }\r\n return super.load_(dbFeature, new CeilingPanels());\r\n }\r\n\r\n getArrayOfConditions() {\r\n const conditions = super.getArrayOfConditions(); // roomLayout\r\n const shower = this.getParent().layout.parts[Shower.id];\r\n if (shower && shower.showerSize()) {\r\n conditions.push({\r\n propName: \"ShowerSize\",\r\n propValue: shower.showerSize()\r\n })\r\n }\r\n return conditions\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n if(zIndexes) {\r\n const zIndex = zIndexes.Walls.CeilingPanels;\r\n if (this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndex;\r\n }\r\n if (this.placeholderFeature) {\r\n this.placeholderFeature.layer.zIndex = zIndex;\r\n }\r\n }\r\n }\r\n\r\n}\r\n","import {Part} from \"../part\";\r\nimport {wallsThumbnail} from \"../../../bvComponent/core/assets\";\r\nimport {PartMenuType} from \"../../../visComponents/constants\";\r\n\r\n// import ToiletPaper from \"../subparts/globals/toiletPaper\";\r\n// import Towel from \"../subparts/globals/towel\";\r\nimport LightFixture from \"../subparts/globals/lightFixture\";\r\nimport DecorWindow from \"../subparts/globals/decorWindow\";\r\nimport DecorSeat from \"../subparts/globals/decorSeat\";\r\n// import ToiletPaperHolder from \"../subparts/globals/toiletPaperHolder\";\r\nimport LampFixture from \"../subparts/globals/lampFixture\";\r\nimport Attachment from \"../subparts/globals/attachment\";\r\n\r\nexport default class Globals extends Part {\r\n static id = \"Globals\";\r\n constructor() {\r\n super(true, false, PartMenuType.Complex);\r\n\r\n this.menuType = PartMenuType.Complex;\r\n this.partName = \"Globals\";\r\n this.partThumbnail = wallsThumbnail;\r\n\r\n // related items\r\n // this.toiletPaper = null;\r\n this.towel = null;\r\n this.lightFixture = null;\r\n }\r\n\r\n load(dbFeature) {\r\n let relatedItemName = \"\",\r\n RelatedItemClass = null;\r\n switch (dbFeature.groupName) {\r\n case \"Attachment\": {\r\n relatedItemName = \"attachment\";\r\n RelatedItemClass = Attachment;\r\n break;\r\n }\r\n case \"Decore\": {\r\n // if (dbFeature.displayName.includes(\"Towel\")) {\r\n // relatedItemName = \"towel\";\r\n // RelatedItemClass = Towel;\r\n // } else if (dbFeature.displayName.includes(\"Toilet Paper\")) {\r\n // relatedItemName = \"toiletPaper\";\r\n // RelatedItemClass = ToiletPaper;\r\n // } else if (dbFeature.displayName.includes(\"Toilet Paper Holder\")) {\r\n // relatedItemName = \"toiletPaperHolder\";\r\n // RelatedItemClass = ToiletPaperHolder;\r\n // } else\r\n if (dbFeature.displayName.includes(\"Light Fixture\")) {\r\n relatedItemName = \"lightFixture\";\r\n RelatedItemClass = LightFixture;\r\n } else if (dbFeature.displayName.includes(\"Lamp fixture\")) {\r\n relatedItemName = \"lampFixture\";\r\n RelatedItemClass = LampFixture;\r\n } else if (dbFeature.displayName.includes(\"Seat\")) {\r\n relatedItemName = \"lightFixture\";\r\n RelatedItemClass = DecorSeat;\r\n } else if (dbFeature.displayName.includes(\"Window\")) {\r\n relatedItemName = \"decorWindow\";\r\n RelatedItemClass = DecorWindow;\r\n }\r\n break;\r\n }\r\n }\r\n if (relatedItemName) {\r\n if (!this[relatedItemName]) {\r\n this[relatedItemName] = new RelatedItemClass(true);\r\n this.relatedItems.push(this[relatedItemName]);\r\n }\r\n if (!this.categoryEnabled) {\r\n this.categoryEnabled = true\r\n }\r\n this[relatedItemName].getParent = () => this;\r\n this[relatedItemName].load(dbFeature);\r\n return true\r\n }\r\n return false\r\n }\r\n\r\n isSubTypeWithItems() {\r\n return false;\r\n }\r\n\r\n handleSubPartClick() {}\r\n\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\n\r\nexport default class LightFixture extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = \"light_fixture\";\r\n this.partName = \"Light Fixture\";\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new LightFixture());\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n if (zIndexes && this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndexes.Globals.LightFixture;\r\n }\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport {LayoutType} from \"../../constants\";\r\n\r\nexport default class DecorWindow extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = \"decor_window\";\r\n this.partName = \"Decor Window\";\r\n if (isChild) {\r\n this.showOnLayouts = [LayoutType.Layout4];\r\n }\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new DecorWindow());\r\n }\r\n\r\n setLayers(layout) {\r\n if (!this.showOnLayouts.includes(layout.type)) {\r\n super.hideLayers();\r\n return;\r\n }\r\n super.setLayers(layout);\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n if (zIndexes && this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndexes.Globals.DecorWindow;\r\n }\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\n\r\nexport default class DecorSeat extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = \"decor_seat\";\r\n this.partName = \"Decor Seat\";\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new DecorSeat());\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n if (zIndexes && this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndexes.Globals.DecorSeat;\r\n }\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\n\r\nexport default class LampFixture extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = \"lamp_fixture\";\r\n this.partName = \"Lamp Fixture\";\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new LampFixture());\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n if (zIndexes && this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndexes.Globals.LampFixture;\r\n }\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport isEqual from \"lodash/isEqual\";\r\nimport {METADATA} from \"../../constants\";\r\n\r\nexport default class Attachment extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = \"attachment\";\r\n this.partName = \"Attachment\";\r\n this.hasAdditionalParts = true;\r\n }\r\n\r\n load(dbFeature) {\r\n if (!dbFeature.metaData[\"Side\"] && dbFeature.sharedFeatureName.includes(\"ountertop\")) {\r\n dbFeature.metaData[\"Side\"] = [METADATA.LeftSide];\r\n }\r\n return super.load(dbFeature);\r\n }\r\n\r\n checkIfFeaturePartIsMatching() {\r\n this.activeFeatureParts = this.setActiveFeatureParts();\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n if (zIndexes && this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndexes.Globals.Towel;\r\n }\r\n let increase = 0;\r\n if (this.hasAdditionalParts && this.activeFeatureParts && this.activeFeatureParts.length) {\r\n this.activeFeatureParts.forEach((activeFeaturePart) => {\r\n activeFeaturePart.layer.zIndex = zIndexes.Globals.Towel + increase;\r\n increase = increase + 0.000001;\r\n });\r\n // console.log(\"this.activeFeatureParts\", this.activeFeatureParts);\r\n }\r\n }\r\n\r\n setActiveFeatureParts() {\r\n const layout = this.getParent().layout;\r\n const activeFeatures = layout.getActiveFeatures(true, true);\r\n let matchingFeatures = [];\r\n const currentConditions = this.getArrayOfConditions();\r\n const selectFrom = this.features.filter(attFeature => attFeature.matchesMetaForArrayOfConditions(currentConditions));\r\n // console.log(\"selectFrom\", selectFrom);\r\n activeFeatures.forEach(cartItem => {\r\n if (!cartItem.cartFeature || cartItem.featureGroup.disabled || !cartItem.cartFeature.metaData[\"MatchingFeature\"]\r\n || (cartItem.partId === this.partId)) {\r\n return\r\n }\r\n selectFrom.forEach(attFeature => {\r\n if (isEqual(attFeature.metaData[\"MatchingFeature\"], cartItem.cartFeature.metaData[\"MatchingFeature\"])\r\n && isEqual(attFeature.metaData[\"Side\"], cartItem.cartFeature.metaData[\"Side\"])\r\n && !matchingFeatures.some(alreadyAddedFeature => {\r\n return isEqual(attFeature.metaData[\"MatchingFeature\"], alreadyAddedFeature.metaData[\"MatchingFeature\"])\r\n && isEqual(attFeature.metaData[\"Side\"], alreadyAddedFeature.metaData[\"Side\"])\r\n })) {\r\n matchingFeatures.push(attFeature)\r\n }\r\n })\r\n })\r\n return matchingFeatures;\r\n }\r\n\r\n}\r\n","import {Part} from \"../part\";\r\nimport {PartMenuType} from \"../../../visComponents/constants\";\r\n// import {BathTubType, LayoutType} from \"../constants\";\r\nimport {bathTubThumbnail} from \"../../../bvComponent/core/assets\";\r\n\r\nimport BathTubBody from \"../subparts/bathTub/bathTubBody\";\r\nimport BathTubFixture from \"../subparts/bathTub/bathTubFixture\";\r\n\r\nexport class Bathtub extends Part {\r\n static id = 'Bathtub';\r\n\r\n constructor() {\r\n super(true, false, PartMenuType.Complex);\r\n this.menuType = PartMenuType.Complex;\r\n this.partName = 'Bathtub';\r\n this.translateId = \"visualizer.bathroom.bathtub\";\r\n this.partThumbnail = bathTubThumbnail;\r\n this.bathTubBody = null;\r\n this.bathTubFixture = null;\r\n this.relatedItems = [];\r\n }\r\n\r\n load(dbFeature) {\r\n let relatedItemName = \"\",\r\n RelatedItemClass = null;\r\n switch (dbFeature.groupName) {\r\n case \"Bathtub\":\r\n relatedItemName = \"bathTubBody\";\r\n RelatedItemClass = BathTubBody;\r\n break;\r\n case \"Bathtub Fixture\":\r\n relatedItemName = \"bathTubFixture\";\r\n RelatedItemClass = BathTubFixture;\r\n break;\r\n }\r\n if (relatedItemName) {\r\n if (!this[relatedItemName]) {\r\n this[relatedItemName] = new RelatedItemClass(true);\r\n this.relatedItems.push(this[relatedItemName]);\r\n }\r\n if (!this.categoryEnabled) {\r\n this.categoryEnabled = true\r\n }\r\n this[relatedItemName].getParent = () => this;\r\n this[relatedItemName].load(dbFeature);\r\n return true\r\n }\r\n return false\r\n }\r\n\r\n changeLayout() {\r\n // changeLayout(layoutType) {\r\n // if (layoutType === LayoutType.Layout1 && this.bathTubBody) {\r\n // // this.activeSubType_ = BathTubType.Custom60in;\r\n // // this.bathTubType_ = BathTubType.Custom60in;\r\n // if (!this.layout.parts.Shower.showerBody.disabled) { // disable bathtub if shower is active\r\n // if (this.bathTubBody) {\r\n // this.bathTubBody.disabled = true;\r\n // }\r\n // }\r\n // } else {\r\n // if (this.bathTubBody) {\r\n // this.bathTubBody.disabled = false;\r\n // }\r\n // }\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\n\r\nexport default class BathTubBody extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = \"bathtub_body\";\r\n this.partName = 'Bathtub';\r\n this.translateId = \"visualizer.bathroom.bathtub.bathtub\";\r\n this.canBeDisabled = true;\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new BathTubBody());\r\n }\r\n\r\n disabledClick() {\r\n const bathTubFixture = this.getParent().bathTubFixture;\r\n if (bathTubFixture) {\r\n bathTubFixture.disabled = this.disabled;\r\n }\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n if (zIndexes && this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndexes.Bathtub.BathTubBody;\r\n }\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\n\r\nexport default class BathTubFixture extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = \"bathtub_fixture\";\r\n this.partName = \"Fixture\";\r\n this.translateId = \"visualizer.bathroom.bathtub.bathtub_fixture\";\r\n this.dbName = \"Bathtub Fixture\";\r\n this.canBeDisabled = true;\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new BathTubFixture());\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n if (zIndexes && this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndexes.Bathtub.BathTubFixture;\r\n }\r\n }\r\n}\r\n","import React from 'react';\r\nimport {connect} from \"react-redux\";\r\nimport classNames from 'classnames';\r\nimport $ from 'jquery';\r\n\r\nimport {\r\n toggleDesktopNavigation,\r\n setActiveNavigationNames,\r\n setModuleContextMenuType,\r\n setActiveNavigationFilter,\r\n setActiveNavigationFilterStepIndex,\r\n setNavigationViewType,\r\n setNavigationLoading,\r\n toggleNavItemPositionModal\r\n} from \"../../../actions/navigationFunctions\";\r\nimport {setDefaultSelectionGroup, changeActivePartRelatedItemIndex} from \"../../../actions/actionFunctions\";\r\nimport DesktopNavigationCommon from \"../../visComponents/navigation/desktopNavigationCommon\";\r\nimport Z from \"../core/zIndex\";\r\nimport {getCurrentLayout} from \"../../appLayout\";\r\n\r\nimport LockedView from \"../../common/lockedView\";\r\nimport {ContentType} from \"../../visComponents/constants\";\r\nimport ContextMenu from \"./contextMenu\";\r\n// import CabinetContextMenu from \"./cabinetContextMenu\";\r\nimport MobileMenuSelect from \"../../visComponents/navigation/mobile/mobileMenuSelect\";\r\nimport {setVisualizerTutorialStep, showVisualizerTutorial} from \"../../../actions/tutorialFunctions\";\r\nimport {Vanity} from \"../core/parts/vanity\";\r\nimport NavItemPositionModal from \"../../visComponents/navigation/navItemPositionModal\";\r\n\r\nclass DesktopNavigation extends DesktopNavigationCommon {\r\n\r\n bindCanvasClick = (event) => {\r\n const layout = getCurrentLayout();\r\n // const canvas = document.getElementById(this.props.canvasId);\r\n this.props.setHoveredLayer(event);\r\n\r\n if (document.hoveredLayer) {\r\n\r\n const layoutType = layout.getCurrentLayoutName();\r\n\r\n const hoveredZone = Z.getMenuByHoveredLayer(layoutType, document.hoveredLayer);\r\n\r\n // console.log('hoveredZone', hoveredZone);\r\n\r\n if (hoveredZone) {\r\n if ((hoveredZone === \"shower_custom\"\r\n || hoveredZone === \"vanity_custom\"\r\n || hoveredZone === \"bathtub_custom\"\r\n || hoveredZone === \"shower_combo\"\r\n || hoveredZone === \"shower_pony_wall\"\r\n || hoveredZone === \"wall_b_custom\"\r\n || hoveredZone === \"left_wall_custom\")\r\n && !this.state.showNavigation\r\n ) {\r\n if (this.state.contextMenuOpen) {\r\n this.setState({\r\n contextMenuOpen: false,\r\n hoveredLayer: {}\r\n });\r\n } else {\r\n let contextMenuOpen = '';\r\n let ponyWallGroup = false;\r\n switch (hoveredZone) {\r\n case \"shower_custom\":\r\n case \"shower_combo\":\r\n case \"shower_pony_wall\": {\r\n const showerGroup = this.state.designNavigationItems.find(navItem => {\r\n return navItem.text === \"Shower\"\r\n });\r\n contextMenuOpen = showerGroup.part.showerTubComboIsActive() ? \"Shower Tub Combo\" : \"Shower\";\r\n if (hoveredZone === \"shower_pony_wall\") {\r\n ponyWallGroup = true;\r\n }\r\n break;\r\n }\r\n case \"vanity_custom\":\r\n contextMenuOpen = \"Vanity\";\r\n break;\r\n case \"bathtub_custom\":\r\n contextMenuOpen = \"Bathtub\";\r\n break;\r\n case \"left_wall_custom\":\r\n contextMenuOpen = \"Shower Body Selection\";\r\n break;\r\n case \"wall_b_custom\":\r\n contextMenuOpen = \"wall_b_custom\";\r\n break;\r\n }\r\n this.openContextMenu(contextMenuOpen, ponyWallGroup, event);\r\n }\r\n return false;\r\n } else if (this.state.contentType === 0) {\r\n this.setState({\r\n showNavigation: true,\r\n contentType: ContentType.Design,\r\n contextMenuOpen: false,\r\n hoveredLayer: {}\r\n }, () => {\r\n this.setNewActiveFeature();\r\n this.menuOpened();\r\n setTimeout(() => {\r\n $(document).on('click', this.handleWrapperBlur);\r\n }, 0)\r\n });\r\n }\r\n\r\n hoveredZone.child\r\n ? this.triggerOpenNavigationMenu(hoveredZone.child, hoveredZone.parent)\r\n : this.triggerOpenNavigationMenu(hoveredZone)\r\n\r\n }\r\n\r\n }\r\n\r\n };\r\n\r\n openContextMenu = (contextMenuOpen, ponyWallGroup, event) => {\r\n const hoveredParent = this.state.designNavigationItems.find(navItem => {\r\n return navItem.text === contextMenuOpen\r\n });\r\n let contextMenuButtons = [];\r\n if (contextMenuOpen === \"Shower Body Selection\") {\r\n contextMenuButtons = this.getShowerBodySelectionButtons()\r\n } else if (contextMenuOpen === \"wall_b_custom\") {\r\n contextMenuButtons = [1, 2, 3]\r\n } else {\r\n contextMenuButtons = hoveredParent.part.subParts();\r\n }\r\n if (contextMenuOpen === \"Shower\" || contextMenuOpen === \"Shower Tub Combo\") {\r\n contextMenuButtons = contextMenuButtons.filter(menuButton => {\r\n return ponyWallGroup ? menuButton.part.isPonyWallPart && menuButton.part.partId !== \"pony_wall\" : !menuButton.part.isPonyWallPart\r\n });\r\n }\r\n if (contextMenuOpen === \"Vanity\") {\r\n contextMenuButtons = contextMenuButtons.filter(menuButton => {\r\n return menuButton.part.partId !== \"vanity_mirror\" && menuButton.part.partId !== \"vanity_backsplash\";\r\n });\r\n }\r\n\r\n const isMobile = $(window).width() < 991;\r\n\r\n let left = isMobile ? '50%' : event.clientX - 50;\r\n let top = isMobile ? '50%' : event.clientY - 50;\r\n let right = 'auto';\r\n\r\n const maxAllowedWidth = contextMenuButtons.length > 2 ? 300 : 210;\r\n\r\n let maxAllowedHeight = 110;\r\n if (contextMenuButtons.length > 6) {\r\n maxAllowedHeight = 330;\r\n } else if (contextMenuButtons.length > 3) {\r\n maxAllowedHeight = 220;\r\n }\r\n if (!isMobile && (left > window.innerWidth - maxAllowedWidth)) {\r\n left = 'auto';\r\n right = 0\r\n }\r\n if (!isMobile && (top > window.innerHeight - maxAllowedHeight)) {\r\n let negativeMargin = 50;\r\n if (contextMenuButtons.length > 6) {\r\n negativeMargin = 250;\r\n } else if (contextMenuButtons.length > 3) {\r\n negativeMargin = 150;\r\n }\r\n top = top - negativeMargin;\r\n }\r\n this.setState({\r\n contextMenuPonyWall: ponyWallGroup,\r\n contextMenuOpen,\r\n hoveredLayer: document.hoveredLayer,\r\n contextMenuPosition: {\r\n left,\r\n right,\r\n top,\r\n }\r\n });\r\n };\r\n\r\n handleNavigationItemClick = (item, ignoreLocked = false, featureIsLocked, event) => {\r\n\r\n if (this.state.childNavigationItem\r\n && this.state.childNavigationItem.part.activeFeature\r\n && Array.isArray(this.state.childNavigationItem.part.activeFeature.metaData[\"SkuName\"])\r\n && this.state.childNavigationItem.part.activeFeature.metaData[\"SkuName\"][0]\r\n && Array.isArray(item.part.metaData[\"SkuName\"])\r\n && (this.state.childNavigationItem.part.activeFeature.metaData[\"SkuName\"][0] === item.part.metaData[\"SkuName\"][0])) {\r\n this.showPositionsPopup(item, event); // move modal to new position\r\n return false // don't change L to R // redundant click\r\n }\r\n\r\n const layout = getCurrentLayout();\r\n this.navigationItemClickCommon(item); // set active feature\r\n\r\n const showPositionPopup = this.showPositionsPopup(item, event);\r\n if (showPositionPopup) {\r\n return // don't click on feature!! we are clicking inside the modal window\r\n }\r\n\r\n const updateSideBarIds = [\"shower_body\", \"wall_configuration\", \"vanity_cabinet\"];\r\n if (updateSideBarIds.includes(item.part.partId)) {\r\n this.updateSideBar();\r\n }\r\n if (this.state.parentNavigationItem && this.state.parentNavigationItem.text === \"Shower Tub Combo\"\r\n && item.part.bottomTubId && (this.state.parentNavigationItem.part.bottomTub !== item.part.bottomTubId)) {\r\n this.updateSideBar();\r\n }\r\n\r\n // console.log('this.state.parentNavigationItem', this.state.parentNavigationItem);\r\n // console.log('this.state.parentNavigationItem.part.subParts()', this.state.parentNavigationItem && this.state.parentNavigationItem.part && this.state.parentNavigationItem.part.subParts());\r\n\r\n if (item.matchesMetaFailed) {\r\n let nonCompatibleWith = \"\";\r\n switch (item.part.partId) {\r\n case \"vanity_faucet\":\r\n nonCompatibleWith = \"sink\";\r\n break;\r\n case \"sink\":\r\n nonCompatibleWith = \"vanity\";\r\n break;\r\n case \"shower_pod\":\r\n nonCompatibleWith = \"Window Kit\";\r\n break;\r\n case \"window_kits\":\r\n nonCompatibleWith = item.matchesMetaFailed === \"shower_pod\" ? \"Shower Pod\" : \"Corner Shelf\";\r\n break;\r\n default:\r\n break;\r\n }\r\n this.callMetaMathesFailedPopup(item, nonCompatibleWith);\r\n } else if (item.part.partId === \"vanity_sink\" && this.state.parentNavigationItem.part.faucet\r\n && this.state.parentNavigationItem.part.faucet.placeholderChanged\r\n && this.state.parentNavigationItem.part.faucet.activeFeature) {\r\n\r\n const sinkSizeConditionValue = item.part.metaData[\"SinkSize\"][0];\r\n\r\n if (this.state.parentNavigationItem.part.faucet.activeFeature.matchesMetaForCondition('SinkSize', sinkSizeConditionValue)) {\r\n this.itemClick(item, ignoreLocked)\r\n } else {\r\n this.callMetaMathesFailedPopup(item, 'faucet');\r\n }\r\n } else if (item.part.partId === \"toilet\") {\r\n const vanity = layout.parts[Vanity.id];\r\n const counterTopSize = vanity.counterTopSize();\r\n if (counterTopSize === \"60in\" || counterTopSize === \"72in\") {\r\n this.callToiletFailPopup('toilet', item, ignoreLocked)\r\n } else {\r\n this.itemClick(item, ignoreLocked)\r\n }\r\n } else if (item.part.partId === \"vanity_cabinet\") {\r\n // let toilet = layout.parts[Toilet.id];\r\n // if (toilet) {\r\n // toilet = toilet.toilet; // toiletBody\r\n // }\r\n // const counterTopSize = item.part.vanitySize + 'in';\r\n // const vanity = layout.parts[Vanity.id];\r\n // const currentCounterTopSize = vanity.counterTopSize();\r\n // if (toilet && toilet.placeholderChanged && (counterTopSize === \"60in\" || counterTopSize === \"72in\")\r\n // && (currentCounterTopSize !== \"60in\" && currentCounterTopSize !== \"72in\")) {\r\n // this.callToiletFailPopup('vanity', item, ignoreLocked)\r\n // } else {\r\n // this.itemClick(item, ignoreLocked);\r\n // }\r\n this.itemClick(item, ignoreLocked);\r\n if (this.props.fabricatorSettings\r\n && (this.props.fabricatorSettings.wizardConsumers || (this.props.fabricatorSettings.wizardClients && document.kvConfig.isBackend))\r\n ) {\r\n if (!featureIsLocked && !item.part.partName.includes(\"laceholder\")) {\r\n this.setWizardFiltersFromActiveItem(item.part)\r\n }\r\n }\r\n } else if (item.part.partId === \"shower_interior_wall\") {\r\n if (!featureIsLocked && !item.part.partName.includes(\"laceholder\")) {\r\n this.setWizardFiltersFromActiveItem(item.part)\r\n }\r\n this.itemClick(item, ignoreLocked)\r\n } else {\r\n this.itemClick(item, ignoreLocked)\r\n }\r\n\r\n if (this.state.parentNavigationItem) { // update canvas only if it is child\r\n this.props.refreshCB();\r\n }\r\n };\r\n\r\n render() {\r\n const layout = getCurrentLayout();\r\n // const fabricatorSettings = this.props.fabricatorSettings;\r\n const activePart = this.state.parentNavigationItem ? this.state.parentNavigationItem.part : null;\r\n const activeSubPart = this.state.childNavigationItem ? this.state.childNavigationItem.part : null;\r\n // const activeNavPart = activeSubPart || activePart;\r\n const parentItems = layout.designNavigationItems(); // parent list without filters\r\n\r\n const useWizard = false, wizardGroups = [];\r\n\r\n let showNavigationFiltersSteps = false;\r\n\r\n if (activeSubPart && activeSubPart.canUseNavigationFilterSteps\r\n && activeSubPart.canUseNavigationFilterSteps()) {\r\n showNavigationFiltersSteps = !this.props.countertopNavigationFilterCompleted;\r\n }\r\n\r\n const showLockedView = this.currentActiveItemIsLocked(useWizard);\r\n\r\n const useFilters = false;\r\n const availableNavButtons = [ContentType.Design, ContentType.Layout, ContentType.DisplayRoom];\r\n if (window.location.href.includes(\"new_bathroom_2021.quotesflooring\") || document.kvConfig.userId === 140045) {\r\n availableNavButtons.push(ContentType.RoomScene)\r\n }\r\n\r\n return (\r\n this.keyboardFrame = node}>\r\n {this.state.hidden ? null : (\r\n \r\n userInfo.phoneNumber}\r\n setValue={keyboardNumberClick}\r\n onClose={(v) => {\r\n if (!blurred) {\r\n handleInputBlur(true, v)\r\n }\r\n }}\r\n left=\"100%\"\r\n top=\"-57px\"\r\n type=\"numeric\"/>\r\n }\r\n\r\n const IntlInputComponent = (\r\n \r\n {/**/}\r\n {/* -{discount.type === DISCOUNT_TYPES.percent ? \"%\" : fabricatorData.settings.currencySign}*/}\r\n {/**/}\r\n \r\n {/*{discount.type === DISCOUNT_TYPES.percent*/}\r\n {/* ? {this.getDiscountAmount()}*/}\r\n {/* : null}*/}\r\n \r\n ) : null\r\n }\r\n\r\n}\r\n","export const getFeatureUnit = (cartFeature, fabricatorData, printContext, locale, quantity) => {\r\n const dbFeature = cartFeature.dbFeature;\r\n if ((fabricatorData.isLowes || fabricatorData.isCaesarStone) && locale === \"fr-FR\" && printContext.messages[\"transDoc.units_FR.\" + dbFeature.sharedFeatureName]) {\r\n if ((printContext.messages[\"transDoc.units_FR.\" + dbFeature.sharedFeatureName] === \"pieds carrés\") && dbFeature.unit === \"Each\") {\r\n return \"unité\"\r\n }\r\n return printContext.messages[\"transDoc.units_FR.\" + dbFeature.sharedFeatureName]\r\n }\r\n if (dbFeature.unit) {\r\n let lowercasedUnit = dbFeature.unit.toLowerCase();\r\n return lowercasedUnit === \"each\" || lowercasedUnit === \"unit\"\r\n ? quantity === 1\r\n ? printContext.messages[\"quotingTool.featureInfo.defaultQuantity\"]\r\n : printContext.messages[\"quotingTool.featureInfo.defaultQuantityMultiple\"]\r\n : dbFeature.unit\r\n }\r\n if (cartFeature.isStoneFeature) {\r\n return printContext.messages[\"shoppingCart.fetureInCartDefaultQuantitySQFT\"]\r\n }\r\n return printContext.messages[\"shoppingCart.fetureInCartDefaultQuantity\"]\r\n};\r\n\r\nexport const getCartItemName = (cartFeature, fabricatorData, printContext, locale) => {\r\n const dbFeature = cartFeature.dbFeature;\r\n if (fabricatorData.isLowes || fabricatorData.isCaesarStone) {\r\n if (locale === \"fr-FR\" && printContext.messages[\"transDoc.customDisplayName_FR.\"+ dbFeature.sharedFeatureName]) {\r\n return printContext.messages[\"transDoc.customDisplayName_FR.\"+ dbFeature.sharedFeatureName]\r\n } else if (locale === \"pl-PL\" && printContext.messages[\"transDoc.customTranslateName_PL.\"+ dbFeature.sharedFeatureName]) {\r\n return printContext.messages[\"transDoc.customTranslateName_PL.\"+ dbFeature.sharedFeatureName]\r\n }\r\n }\r\n\r\n if ((dbFeature.sharedFeatureName === \"additionalCartItem.minimumCharge\")) {\r\n if (fabricatorData.isCaesarStone) {\r\n return `${printContext.messages[dbFeature.sharedFeatureName]} (${cartFeature.fromFeatureName})`\r\n }\r\n return printContext.messages[dbFeature.sharedFeatureName]\r\n }\r\n\r\n if (!cartFeature.getFeatureName) {\r\n return cartFeature._customDisplayName || cartFeature.customDisplayName || \"\"\r\n }\r\n\r\n return cartFeature.getFeatureName()\r\n};\r\n","import {getFilterGroupValue, getFilterGroupValues} from \"../../../misc/utils\";\r\nimport {getCurrentLayout} from \"../../appLayout\";\r\nimport {getTotalPrice, toFixedFeatureCost, toFixedPrice} from \"../../../misc/helpers\";\r\nimport {isProd} from \"../../../misc/fabricatorHardcode\";\r\n\r\nexport const SIMILAR_FILTER_GROUP_NAME = \"Collection\";\r\n\r\n/**\r\n * @param cartItem {object}\r\n * @param filterGroups {array}\r\n * @returns {array} // [featureCollectionInterface] or null\r\n */\r\nexport const getFeaturesCollectionsList = (cartItem, filterGroups) => {\r\n\r\n if (!cartItem || !cartItem.cartFeature || !cartItem.partId.includes(\"countertop\") || isProd() || !filterGroups.length) {\r\n return null\r\n }\r\n\r\n const parent = cartItem.cartFeature.getParent ? cartItem.cartFeature.getParent() : null;\r\n if (!parent) {\r\n return null\r\n }\r\n\r\n const filterGroup = filterGroups.find(fGroup => fGroup.name === SIMILAR_FILTER_GROUP_NAME);\r\n if (!filterGroup) {\r\n return null\r\n }\r\n\r\n const cartFeatureFilters = getFilterGroupValues(cartItem.cartFeature, filterGroup) || [];\r\n\r\n let featuresCollectionsList = [];\r\n\r\n const layout = getCurrentLayout();\r\n const navFeatures = layout.designNavigationItems({part: parent}, {}, \"\", false, true);\r\n for (let i = 0; i < navFeatures.length; i++) {\r\n const navFeature = navFeatures[i];\r\n const featureFilters = getFilterGroupValues(navFeature.part, filterGroup);\r\n if (Array.isArray(featureFilters)) {\r\n featureFilters.forEach(filterValueId => {\r\n if (!cartFeatureFilters.some(cartFeatureFilter => cartFeatureFilter === filterValueId)) {\r\n let collectionObject = featuresCollectionsList.find(colObject => colObject.id === filterValueId);\r\n if (collectionObject) {\r\n collectionObject.features.push(navFeature.part)\r\n } else {\r\n collectionObject = {id: filterValueId, features: [navFeature.part]};\r\n featuresCollectionsList.push(collectionObject);\r\n }\r\n }\r\n })\r\n }\r\n }\r\n\r\n featuresCollectionsList = featuresCollectionsList.sort((a, b) => a.id - b.id); // sort by collection id\r\n console.log(\"featuresCollectionsList\", featuresCollectionsList);\r\n\r\n return featuresCollectionsList\r\n\r\n}\r\n\r\n/**\r\n * @param cartItem {cartItemInterface}\r\n * @param addedCountertops {[cartItemInterface]}\r\n * @param featureCollection {object}\r\n * @param totalCountertopsQuantity {number}\r\n * @param quoteIndex {number}\r\n * @param filterGroups {array}\r\n * @returns {similarItemObjectInterface} // or null\r\n */\r\nexport const getSimilarItemInfoObject = (\r\n cartItem,\r\n addedCountertops,\r\n featureCollection,\r\n totalCountertopsQuantity,\r\n quoteIndex,\r\n filterGroups,\r\n) => {\r\n let feature = null;\r\n const fromCartItemName = cartItem.cartFeature.getSplittedFeatureName();\r\n // console.log(\"fromCartItemName\", fromCartItemName);\r\n if (fromCartItemName) {\r\n // if (\r\n // (fromCartItemName.includes(\"2cm\") && addedCountertops.some(cItem => cItem.cartFeature && cItem.cartFeature.getSplittedFeatureName().includes(\"3cm\")))\r\n // || (fromCartItemName.includes(\"3cm\") && addedCountertops.some(cItem => cItem.cartFeature && cItem.cartFeature.getSplittedFeatureName().includes(\"2cm\")))\r\n // ) {\r\n // feature = featureCollection.features.find(currentFeature => [\"2cm\", \"3cm\"].some(inName => currentFeature.getSplittedFeatureName().includes(inName)))\r\n // } else\r\n if (fromCartItemName.includes(\"2cm\")) {\r\n feature = featureCollection.features.find(currentFeature => currentFeature.getSplittedFeatureName().includes(\"2cm\"))\r\n } else if (fromCartItemName.includes(\"3cm\")) {\r\n feature = featureCollection.features.find(currentFeature => currentFeature.getSplittedFeatureName().includes(\"3cm\"))\r\n }\r\n }\r\n if (!feature) {\r\n feature = featureCollection.features[0]; // take first collection feature\r\n }\r\n\r\n const totalPrice = +toFixedFeatureCost(feature, totalCountertopsQuantity, \"\");\r\n\r\n const countertopTotalPrice = +toFixedFeatureCost(cartItem.cartFeature, totalCountertopsQuantity, \"\");\r\n\r\n let subTotalPrice = getTotalPrice(quoteIndex, false).materialPrice;\r\n subTotalPrice = toFixedPrice(subTotalPrice - countertopTotalPrice + totalPrice);\r\n\r\n const filterGroup = filterGroups.find(fGroup => fGroup.name === SIMILAR_FILTER_GROUP_NAME);\r\n const filterGroupValue = getFilterGroupValue(featureCollection.id, filterGroup);\r\n if (!filterGroupValue || !filterGroupValue.displayText) {\r\n return null\r\n }\r\n const filterValueName = filterGroupValue.displayText.replace(\" \" + SIMILAR_FILTER_GROUP_NAME, \"\");\r\n\r\n return {\r\n filterValueName,\r\n feature,\r\n subTotalPrice,\r\n }\r\n}\r\n","import vert from '!raw-loader!./vertex.glsl';\r\nimport frag from '!raw-loader!./fragment.glsl';\r\n\r\nfunction loadTexture(gl, oc) {\r\n const texture = gl.createTexture();\r\n gl.bindTexture(gl.TEXTURE_2D, texture);\r\n gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);\r\n gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);\r\n gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, oc); // This is the important line!\r\n gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);\r\n gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);\r\n gl.bindTexture(gl.TEXTURE_2D, null);\r\n return texture;\r\n}\r\n\r\nfunction setArrays(gl, prog) {\r\n let vertex_buffer = gl.createBuffer();\r\n const vertices = [-1.0, -1.0, 1.0, -1.0, -1.0, 1.0,\r\n 1.0, 1.0, 1.0, -1.0, -1.0, 1.0,\r\n ];\r\n gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);\r\n gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);\r\n let coord = gl.getAttribLocation(prog, \"coords\");\r\n gl.vertexAttribPointer(coord, 2, gl.FLOAT, false, 0, 0);\r\n gl.enableVertexAttribArray(coord);\r\n return [coord, vertex_buffer];\r\n}\r\n\r\nfunction prepareWebGL(gl, width, height) {\r\n let vertSh = gl.createShader(gl.VERTEX_SHADER);\r\n gl.shaderSource(vertSh, vert);\r\n gl.compileShader(vertSh);\r\n let fragSh = gl.createShader(gl.FRAGMENT_SHADER);\r\n gl.shaderSource(fragSh, frag);\r\n gl.compileShader(fragSh);\r\n let prog = gl.createProgram();\r\n gl.attachShader(prog, vertSh);\r\n gl.attachShader(prog, fragSh);\r\n gl.linkProgram(prog);\r\n gl.useProgram(prog);\r\n gl.viewport(0,0, width, height);\r\n return prog;\r\n}\r\n\r\nlet webglCanvas = document.createElement(\"canvas\");\r\n\r\nconst enhanceCanvas = (canvasElement, useNewCanvas = false) => {\r\n\r\n let wgl = useNewCanvas ? document.createElement('canvas') : webglCanvas;\r\n\r\n if (!wgl.gl || useNewCanvas) {\r\n wgl.width = canvasElement.width;\r\n wgl.height = canvasElement.height;\r\n wgl.gl = wgl.getContext(\"webgl\");\r\n wgl.prog = prepareWebGL(wgl.gl, canvasElement.width, canvasElement.height);\r\n setArrays(wgl.gl, wgl.prog);\r\n const uSampler = wgl.gl.getUniformLocation(wgl.prog, 'uSampler');\r\n wgl.gl.uniform1i(uSampler, 0);\r\n }\r\n\r\n let gl = wgl.gl;\r\n const texture = loadTexture(gl, canvasElement);\r\n let ctx = canvasElement.getContext('2d');\r\n\r\n // render\r\n gl.activeTexture(gl.TEXTURE0);\r\n gl.bindTexture(gl.TEXTURE_2D, texture);\r\n gl.clearColor(0.0, 0.0, 0.0, 1.0);\r\n gl.clear(gl.COLOR_BUFFER_BIT);\r\n gl.drawArrays(gl.TRIANGLES, 0, 6);\r\n ctx.drawImage(wgl, 0, 0, wgl.width, wgl.height, 0, 0, canvasElement.width, canvasElement.height);\r\n // render end\r\n\r\n}\r\n\r\nexport default enhanceCanvas\r\n","/**\r\n * Moves an element to a new position with a specified speed and returns a Promise that resolves when the animation is complete.\r\n * @param {HTMLElement} element - The element to move.\r\n * @param {number} newX - The new X-coordinate of the element.\r\n * @param {number} newY - The new Y-coordinate of the element.\r\n * @param {number} speed - The speed in pixels per second.\r\n * @returns {Promise} A Promise that resolves when the animation is complete.\r\n */\r\nimport {distanceToInches, parseImperialFractionToDecimal} from \"./sqftHelper\";\r\nimport EventManager from \"../components/canvas/store/sqftEventManager\";\r\nimport sqftConfig from \"../components/canvas/store/sqftConfig\";\r\nimport {MEASURE_UNITS} from \"../constants\";\r\n\r\nexport const moveElement = (element, newX, newY, speed) => {\r\n return new Promise(resolve => {\r\n // Get the current coordinates of the element\r\n const oldX = element.offsetLeft;\r\n const oldY = element.offsetTop;\r\n\r\n // Calculate the distance between the old and new coordinates\r\n const distanceX = newX - oldX;\r\n const distanceY = newY - oldY;\r\n\r\n // Calculate the duration of the animation based on the speed\r\n const duration = Math.sqrt(distanceX ** 2 + distanceY ** 2) / speed;\r\n\r\n // Set the element to the initial position\r\n element.style.position = \"absolute\";\r\n element.style.left = oldX + \"px\";\r\n element.style.top = oldY + \"px\";\r\n\r\n // Animate the element to the new position\r\n const startTime = performance.now();\r\n function animate(currentTime) {\r\n const elapsedTime = currentTime - startTime;\r\n const progress = Math.min(elapsedTime / duration, 1);\r\n const x = oldX + distanceX * progress;\r\n const y = oldY + distanceY * progress;\r\n element.style.left = x + \"px\";\r\n element.style.top = y + \"px\";\r\n if (progress < 1) {\r\n requestAnimationFrame(animate);\r\n } else {\r\n resolve(); // Animation complete, resolve the Promise\r\n }\r\n }\r\n requestAnimationFrame(animate);\r\n });\r\n}\r\n\r\nexport const delay = (time) => {\r\n return new Promise(resolve => setTimeout(resolve, time));\r\n}\r\n\r\nexport function createAdjustableInput({\r\n position = { x: 0, y: 0 },\r\n initialValue = \"\",\r\n min = 1,\r\n max = 1000,\r\n orientation = \"horizontal\",\r\n onChange = () => {},\r\n onClose = () => {},\r\n step = 1,\r\n longPressInterval = 50,\r\n longPressDelay = 200,\r\n }) {\r\n const objectName = { name: 'lineInput' }; // Unique identifier for EventManager\r\n let isClosed = false; // Flag to prevent duplicate close calls\r\n\r\n const inputWrapper = document.createElement(\"div\"); // Wrapper for input and buttons\r\n inputWrapper.className = \"line-input\";\r\n inputWrapper.style.position = \"absolute\";\r\n inputWrapper.style.left = `${position.x}px`;\r\n inputWrapper.style.top = `${position.y}px`;\r\n\r\n // Set orientation class\r\n if (orientation === \"horizontal\") {\r\n inputWrapper.classList.add(\"line-input-horizontal\");\r\n } else if (orientation === \"vertical\") {\r\n inputWrapper.classList.add(\"line-input-vertical\");\r\n }\r\n\r\n // Create input field\r\n const input = document.createElement(\"input\");\r\n input.type = \"text\";\r\n input.className = \"line-input-field\";\r\n input.setAttribute(\"min\", min.toString());\r\n input.setAttribute(\"max\", max.toString());\r\n input.value = initialValue;\r\n\r\n // Adjust input value within [min, max] bounds and trigger onChange\r\n const adjustInputValue = (step) => {\r\n let currentValue = parseImperialFractionToDecimal(input.value);\r\n currentValue += step;\r\n currentValue = Math.max(min, Math.min(currentValue, max)); // Ensure within bounds\r\n input.value = currentValue;\r\n onChange(currentValue);\r\n input.dispatchEvent(new Event(\"change\")); // Trigger change event for UI updates\r\n\r\n if (sqftConfig.measureUnit === MEASURE_UNITS.Imperial) {\r\n input.value = distanceToInches(currentValue).replace(\"\\\"\", \"\");\r\n } else {\r\n input.value = currentValue;\r\n }\r\n };\r\n\r\n let longPressTimeout;\r\n let delayTimeout;\r\n const startLongPress = (step) => {\r\n adjustInputValue(step);\r\n delayTimeout = setTimeout(() => {\r\n longPressTimeout = setInterval(() => adjustInputValue(step), longPressInterval);\r\n }, longPressDelay);\r\n };\r\n const stopLongPress = () => {\r\n clearInterval(longPressTimeout);\r\n clearTimeout(delayTimeout);\r\n input.focus();\r\n };\r\n\r\n // Create increment button with long press functionality\r\n const incrementButton = document.createElement(\"button\");\r\n incrementButton.className = \"increment-button\";\r\n incrementButton.textContent = \"▲\";\r\n incrementButton.onmousedown = () => startLongPress(step);\r\n incrementButton.onmouseup = stopLongPress;\r\n incrementButton.onmouseleave = stopLongPress;\r\n\r\n // Create decrement button with long press functionality\r\n const decrementButton = document.createElement(\"button\");\r\n decrementButton.className = \"decrement-button\";\r\n decrementButton.textContent = \"▼\";\r\n decrementButton.onmousedown = () => startLongPress(-step);\r\n decrementButton.onmouseup = stopLongPress;\r\n decrementButton.onmouseleave = stopLongPress;\r\n\r\n // Append elements to wrapper\r\n inputWrapper.appendChild(input);\r\n inputWrapper.appendChild(incrementButton);\r\n inputWrapper.appendChild(decrementButton);\r\n\r\n // Use onchange instead of input for final validation after user finishes typing\r\n input.onchange = (event) => {\r\n let value = parseImperialFractionToDecimal(event.target.value);\r\n value = Math.max(min, Math.min(value, max)); // Ensure within bounds\r\n input.value = value;\r\n onChange(value);\r\n };\r\n\r\n // Close input when pressing Enter or if blurred outside of increment/decrement buttons\r\n const closeInput = () => {\r\n if (isClosed) return; // Prevent duplicate calls\r\n isClosed = true;\r\n\r\n onClose();\r\n inputWrapper.remove();\r\n EventManager.removeEvent(objectName);\r\n document.removeEventListener(\"mousedown\", handleOutsideClick);\r\n };\r\n\r\n input.addEventListener(\"keydown\", (event) => {\r\n if (event.key === \"Enter\") {\r\n input.blur(); // Explicitly trigger blur to ensure onchange fires\r\n closeInput();\r\n }\r\n });\r\n\r\n const handleOutsideClick = (event) => {\r\n if (!inputWrapper.contains(event.target)) {\r\n closeInput();\r\n }\r\n };\r\n\r\n // Add event to close input on MOUSE_DOWN outside, unless the input is focused\r\n EventManager.addEvent(\r\n EventManager.events.MOUSE_DOWN,\r\n closeInput,\r\n objectName,\r\n EventManager.priorities.OVERALL\r\n );\r\n document.addEventListener(\"mousedown\", handleOutsideClick);\r\n\r\n return inputWrapper;\r\n}\r\n","import {SHAPE_PART_ID, SHAPE_TYPE} from \"../constants\";\r\nimport sqftShapeManager from \"../components/canvas/store/sqftShapeManager\";\r\nimport Polygon from \"../components/canvas/core/shapes/layouts/polygon\";\r\nimport {getAreaByShoelaceFormula} from \"./sqftHelper\";\r\nimport Wall from \"../components/canvas/core/shapes/wall\";\r\nimport workspaceControllers from \"../components/canvas/store/workspaceControllers\";\r\n\r\nexport const enableFreeDrawMode = () => {\r\n\r\n}\r\n\r\nexport const disableFreeDrawMode = () => {\r\n\r\n}\r\n\r\n/**\r\n * @param pointCords array\r\n * @param partId string\r\n * @param isClonePointRequired boolean\r\n * @param historyPosition\r\n * @param canPointsBeMoved\r\n * @param fromLayout\r\n * @param shapeParams\r\n * @param shapeCreationParams\r\n */\r\nexport const createShapeFromPoints = (\r\n pointCords,\r\n partId = SHAPE_PART_ID.seamPiece,\r\n isClonePointRequired = false,\r\n historyPosition = null,\r\n canPointsBeMoved = false,\r\n fromLayout = null,\r\n shapeParams = {},\r\n shapeCreationParams = {}\r\n) => {\r\n let polygonLines = new Polygon(pointCords, isClonePointRequired, canPointsBeMoved);\r\n let polygonArea = getAreaByShoelaceFormula(polygonLines);\r\n if (polygonArea < 0) {\r\n //create counterclockwise shape\r\n polygonLines = new Polygon(pointCords.reverse(), isClonePointRequired, canPointsBeMoved);\r\n polygonArea = getAreaByShoelaceFormula(polygonLines);\r\n }\r\n\r\n if (shapeCreationParams.minimumShapeArea && polygonArea < shapeCreationParams.minimumShapeArea) {\r\n console.log(\"polygon area is too small\");\r\n console.log(\"polygon area\", polygonArea);\r\n console.log(\"minimum polygon Area\", shapeCreationParams.minimumShapeArea);\r\n return null\r\n }\r\n if (shapeCreationParams.maximumShapeArea && polygonArea > shapeCreationParams.maximumShapeArea) {\r\n console.log(\"polygon area is too big\");\r\n console.log(\"polygon area\", polygonArea);\r\n console.log(\"maximum shape area\", shapeCreationParams.maximumShapeArea);\r\n return null\r\n }\r\n if (shapeCreationParams.maximumLineDistance) {\r\n for (const polygonLine of polygonLines) {\r\n if (polygonLine.getLineDistance() > shapeCreationParams.maximumLineDistance) {\r\n console.log(\"polygon line is too big\");\r\n console.log(\"polygon line distance\", polygonLine.getLineDistance());\r\n console.log(\"maximum line Distance\", shapeCreationParams.maximumLineDistance);\r\n return null\r\n }\r\n }\r\n }\r\n\r\n return sqftShapeManager.addShape(\r\n polygonLines, SHAPE_TYPE.polygon, historyPosition, partId, fromLayout, shapeParams\r\n );\r\n};\r\n\r\n/**\r\n *\r\n * @param points {array}\r\n * @param centerPoint {object}\r\n * @param lockedAngleStep\r\n */\r\nexport const createWallFromPointsV2 = (points, centerPoint, lockedAngleStep) => {\r\n const wall = new Wall(points, centerPoint, lockedAngleStep);\r\n workspaceControllers.walls.addResource(wall);\r\n return wall\r\n}\r\n\r\n/**\r\n *\r\n * @param points array\r\n */\r\nexport const createShapeFromCorePoints = (points) => {\r\n void points;\r\n}\r\n\r\n/**\r\n *\r\n * @param points array\r\n */\r\nexport const createPolygonFromCorePoints = (points) => {\r\n void points;\r\n //return new SQFTShapeFigure(points);\r\n}\r\n","import config from \"../../../../store/sqftConfig\";\r\nimport {isIE} from \"../../../../../../helpers/sqftHelper\";\r\n\r\nexport default class DrawImage {\r\n\r\n static renderImage = (svgImageId, ctx, x, y, width, height, isCentered = true, isScale = true) => {\r\n let scale = config.scale;\r\n let svg = document.getElementById(svgImageId);\r\n if (!svg) {\r\n console.error(\"svg with id not found\", svgImageId);\r\n return\r\n }\r\n let img = new Image(),\r\n xml = new XMLSerializer().serializeToString(svg), // get svg data\r\n svg64 = btoa(xml); // make it base64\r\n let posX = x;\r\n let posY = y;\r\n let svgImageDataURI = \"\";\r\n\r\n img.src = 'data:image/svg+xml;base64,' + svg64; // set it as the source of the img element\r\n if (isScale) {\r\n width = width / config.scale * config.defaultScale;\r\n height = height / config.scale * config.defaultScale;\r\n }\r\n if (isCentered) {\r\n posX -= width / 2 ;\r\n posY -= height / 2;\r\n }\r\n\r\n if (isIE()) {\r\n svgImageDataURI = atob(this.getSrc(img).replace(/data:image\\/svg\\+xml;base64,/, ''));\r\n }\r\n if (!isIE()) {\r\n ctx.drawImage(img, posX, posY , width * scale, height * scale);\r\n } else if(svgImageDataURI) {\r\n ctx.drawSvg(svgImageDataURI, posX, posY + 1, 0, 0);\r\n }\r\n };\r\n\r\n // static isIE() {\r\n // return(/Trident/i).test(window.navigator.appVersion);\r\n // }\r\n\r\n static getSrc(htmlImg) {\r\n if(htmlImg) {\r\n let src = htmlImg.getAttribute('src');\r\n if(src) {\r\n return src;\r\n }\r\n src = htmlImg.getAttribute(\"style\");\r\n if(src) {\r\n return src.replace(/background-image: url\\(\"\\/api\\/SqFtCalc\\/GetImage\\?url=/g, \"\").replace(/\"\\);/g, \"\");\r\n }\r\n }\r\n return \"\";\r\n }\r\n}\r\n","import {getClosestPoint, getIntersectCords, getMousePositionOnField} from \"../../../../../../helpers/sqftHelper\";\r\nimport store from \"../../../../../../../../store\";\r\n\r\nexport const getHorizontalLineIntersectionPoints = (mousePos, shape, lines = shape.getLines()) => {\r\n const mousePosOnFiled = getMousePositionOnField(mousePos.x, mousePos.y);\r\n const serverState = store.getState().serverState;\r\n const pos = shape.getPosition();\r\n\r\n const mousePosOnShape = {x: mousePosOnFiled.x - pos.x, y: mousePosOnFiled.y - pos.y};\r\n let verticalLinePoint1 = {x: -serverState.windowWidth, y: Math.round10(mousePosOnShape.y, -1)};\r\n let verticalLinePoint2 = {x: serverState.windowWidth, y: Math.round10(mousePosOnShape.y, -1)};\r\n let [intersectionXPointAndLine1, intersectionXPointAndLine2] = getClosestIntersectionPoints(\r\n lines, verticalLinePoint1, verticalLinePoint2, mousePosOnShape\r\n );\r\n\r\n if (intersectionXPointAndLine1 && intersectionXPointAndLine2) {\r\n intersectionXPointAndLine1.intersectionCords = {x: Math.round10(intersectionXPointAndLine1.intersectionCords.x, -1), y: Math.round10(mousePosOnFiled.y - pos.y, -1)};\r\n intersectionXPointAndLine2.intersectionCords = {x: Math.round10(intersectionXPointAndLine2.intersectionCords.x, -1), y: Math.round10(mousePosOnFiled.y - pos.y, -1)};\r\n\r\n return [intersectionXPointAndLine1, intersectionXPointAndLine2]\r\n }\r\n\r\n return []\r\n}\r\n\r\nexport const getVerticalLineIntersectionPoints = (mousePos, shape, lines = shape.getLines()) => {\r\n const mousePosOnFiled = getMousePositionOnField(mousePos.x, mousePos.y);\r\n const serverState = store.getState().serverState;\r\n const pos = shape.getPosition();\r\n\r\n const mousePosOnShape = {x: mousePosOnFiled.x - pos.x, y: mousePosOnFiled.y - pos.y};\r\n //let verticalLinePoint1 = {x: -serverState.windowWidth, y: mousePosOnShape.y};\r\n //let verticalLinePoint2 = {x: serverState.windowWidth, y: mousePosOnShape.y};\r\n\r\n let verticalLinePoint1 = {x: Math.round10(mousePosOnFiled.x - pos.x, -1), y: -serverState.windowHeight};\r\n let verticalLinePoint2 = {x: Math.round10(mousePosOnFiled.x - pos.x, -1), y: serverState.windowHeight};\r\n // let verticalLinePoint1 = {x: Math.ceil10(mousePosOnFiled.x - pos.x, 2), y: -serverState.windowHeight};\r\n // let verticalLinePoint2 = {x: Math.ceil10(mousePosOnFiled.x - pos.x, 2), y: serverState.windowHeight};\r\n\r\n let [intersectionPointAndLine1, intersectionPointAndLine2] = getClosestIntersectionPoints(\r\n lines, verticalLinePoint1, verticalLinePoint2, mousePosOnShape\r\n );\r\n\r\n if (intersectionPointAndLine1 && intersectionPointAndLine2) {\r\n intersectionPointAndLine1.intersectionCords = {x: Math.round10(mousePosOnFiled.x - pos.x, -1), y: Math.round10(intersectionPointAndLine1.intersectionCords.y, -1)};\r\n intersectionPointAndLine2.intersectionCords = {x: Math.round10(mousePosOnFiled.x - pos.x, -1), y: Math.round10(intersectionPointAndLine2.intersectionCords.y, -1)};\r\n // let intersectionPoint1 = {x: Math.ceil10(mousePosOnFiled.x - pos.x, 2), y: intersectionXPoint1.y};\r\n // let intersectionPoint2 = {x: Math.ceil10(mousePosOnFiled.x - pos.x, 2), y: intersectionXPoint2.y};\r\n\r\n return [intersectionPointAndLine1, intersectionPointAndLine2]\r\n }\r\n\r\n return []\r\n}\r\n\r\n/**\r\n * Return only two closest points from the array of intersectionPointsAndLines\r\n * @param {*} lines\r\n * @param {*} intersectionPoint1\r\n * @param {*} intersectionPoint2\r\n * @param {*} closestPont\r\n * @return {array} [{intersectionPoint, line}]\r\n */\r\nexport const getClosestIntersectionPoints = (lines, intersectionPoint1, intersectionPoint2, closestPont) => {\r\n let intersectionPointsAndLines = getIntersectionPointsAndLines(lines, intersectionPoint1, intersectionPoint2)\r\n if (intersectionPointsAndLines.length >= 1) {\r\n let intersectionPoints = intersectionPointsAndLines.map(pointAndLine => pointAndLine.intersectionCords);\r\n let closestPont1 = getClosestPoint(closestPont, intersectionPoints);\r\n let intersectionPointsAndLinesWithout1Point = intersectionPointsAndLines.filter(pointAndLine => pointAndLine.intersectionCords !== closestPont1);\r\n intersectionPoints = intersectionPointsAndLinesWithout1Point.map(pointAndLine => pointAndLine.intersectionCords);\r\n\r\n let closestPont2 = getClosestPoint(closestPont, intersectionPoints);\r\n\r\n return intersectionPointsAndLines.filter(pointAndLine => {\r\n return pointAndLine.intersectionCords === closestPont1 || pointAndLine.intersectionCords === closestPont2\r\n });\r\n }\r\n\r\n return intersectionPointsAndLines\r\n}\r\n\r\n/**\r\n * Return all intersectionsPointsAndLines between lines and two coords\r\n * @param {*} lines\r\n * @param {*} intersectionPoint1\r\n * @param {*} intersectionPoint2\r\n * @return {array} [{intersectionPoint, line}]\r\n */\r\nexport const getIntersectionPointsAndLines = (lines, intersectionPoint1, intersectionPoint2) => {\r\n let intersectionPoints = [];\r\n\r\n lines.forEach((line) => {\r\n let intersectionCords = getIntersectCords(\r\n Math.round10(line.from.x, -1), Math.round10(line.from.y, -1),\r\n Math.round10(line.to.x, -1), Math.round10(line.to.y, -1),\r\n Math.round10(intersectionPoint1.x, -1), Math.round10(intersectionPoint1.y, -1),\r\n Math.round10(intersectionPoint2.x, -1), Math.round10(intersectionPoint2.y, -1),\r\n false\r\n );\r\n if (intersectionCords) {\r\n intersectionPoints.push({intersectionCords, line});\r\n }\r\n });\r\n\r\n return intersectionPoints\r\n}\r\n\r\n/**\r\n *\r\n * @param circleX {int}\r\n * @param circleY {int}\r\n * @param circleRadius {int}\r\n * @param lineX1 {int}\r\n * @param lineY1 {int}\r\n * @param lineX2 {int}\r\n * @param lineY2 {int}\r\n * @return {null|{y1: *, x1: *, y2: *, x2: *}|{x: *, y: *}}\r\n */\r\nexport const getCircleLineIntersection = (circleX, circleY, circleRadius, lineX1, lineY1, lineX2, lineY2) => {\r\n const dx = lineX2 - lineX1;\r\n const dy = lineY2 - lineY1;\r\n const a = dx * dx + dy * dy;\r\n const b = 2 * (dx * (lineX1 - circleX) + dy * (lineY1 - circleY));\r\n const c = circleX * circleX + circleY * circleY + lineX1 * lineX1 + lineY1 * lineY1\r\n - 2 * (circleX * lineX1 + circleY * lineY1) - circleRadius * circleRadius;\r\n const delta = b * b - 4 * a * c;\r\n\r\n if (delta < 0) {\r\n return null; // no intersection\r\n } else if (delta === 0) {\r\n // the line is tangent to the circle\r\n const t = -b / (2 * a);\r\n const intersectionX = lineX1 + t * dx;\r\n const intersectionY = lineY1 + t * dy;\r\n return { x: intersectionX, y: intersectionY };\r\n } else {\r\n // the line intersects the circle at two points\r\n const t1 = (-b + Math.sqrt(delta)) / (2 * a);\r\n const t2 = (-b - Math.sqrt(delta)) / (2 * a);\r\n const intersection1X = lineX1 + t1 * dx;\r\n const intersection1Y = lineY1 + t1 * dy;\r\n const intersection2X = lineX1 + t2 * dx;\r\n const intersection2Y = lineY1 + t2 * dy;\r\n return { x1: intersection1X, y1: intersection1Y, x2: intersection2X, y2: intersection2Y };\r\n }\r\n}\r\n","import {\r\n getMidPoint,\r\n getPointOnTheLine,\r\n} from \"../../../helpers/sqftHelper\";\r\nimport COLOR_THEMES from \"../../../../../colorThemes\";\r\nimport sqftConfig from \"../store/sqftConfig\";\r\n\r\nexport default class RenderCabinets {\r\n\r\n /**\r\n * @param points {[{x:int, y:int}]}\r\n * @param distance {int}\r\n * @return {[DiagonalPointsForTheSquareInterface]}\r\n */\r\n static getDiagonalPointsForTheSquare = (points, distance) => {\r\n let returnPoints = [];\r\n for (const pointIndex in points) {\r\n if (points.hasOwnProperty(pointIndex)) {\r\n const len = points.length;\r\n const current = points[+pointIndex];\r\n const previous = points[(+pointIndex + len - 1) % len];\r\n const next = points[(+pointIndex + 1) % len];\r\n\r\n const linePoint1 = getPointOnTheLine(current, previous, distance);\r\n const linePoint2 = getPointOnTheLine(current, next, distance);\r\n const diagonalPoint = getMidPoint(linePoint1, linePoint2);\r\n\r\n returnPoints.push({\r\n currentPoint: current,\r\n diagonalPoint: diagonalPoint\r\n });\r\n }\r\n }\r\n\r\n return returnPoints\r\n }\r\n\r\n /**\r\n * @param points {[{x:int, y:int}]}\r\n * @param distance {int}\r\n * @param linePointsIds {[]}\r\n * @return {[DiagonalPointsForTheSquareInterface]}\r\n */\r\n static getDiagonalPointsForTheLine = (points, distance, linePointsIds) => {\r\n const diagonalSquarePoint = RenderCabinets.getDiagonalPointsForTheSquare(points, distance);\r\n\r\n return diagonalSquarePoint.filter(squarePoint => {\r\n return linePointsIds.some(linePointId => {\r\n return linePointId === squarePoint.currentPoint.id\r\n });\r\n })\r\n }\r\n\r\n static renderCrownMolding = (ctx, crownMoldingPoints) => {\r\n //render diagonal lines\r\n ctx.beginPath();\r\n ctx.moveTo(crownMoldingPoints[0].diagonalPoint.x, crownMoldingPoints[0].diagonalPoint.y);\r\n for (const crownMoldingPoint of crownMoldingPoints) {\r\n ctx.lineWidth = 2;\r\n ctx.lineTo(crownMoldingPoint.diagonalPoint.x, crownMoldingPoint.diagonalPoint.y);\r\n }\r\n ctx.lineTo(crownMoldingPoints[0].diagonalPoint.x, crownMoldingPoints[0].diagonalPoint.y);\r\n ctx.stroke();\r\n ctx.closePath();\r\n\r\n //render border\r\n for (const crownMoldingPoint of crownMoldingPoints) {\r\n ctx.beginPath();\r\n ctx.lineWidth = 2;\r\n ctx.moveTo(crownMoldingPoint.currentPoint.x, crownMoldingPoint.currentPoint.y);\r\n ctx.lineTo(crownMoldingPoint.diagonalPoint.x, crownMoldingPoint.diagonalPoint.y);\r\n ctx.closePath();\r\n ctx.stroke();\r\n }\r\n }\r\n\r\n static renderEndCap = (ctx, line) => {\r\n //render thick line\r\n const fromPointField = line.from.getPointField();\r\n const toPointField = line.to.getPointField();\r\n ctx.beginPath();\r\n ctx.moveTo(fromPointField.x, fromPointField.y);\r\n ctx.lineWidth = 6;\r\n ctx.strokeStyle = COLOR_THEMES[sqftConfig.activeTheme].primary_hover;\r\n ctx.lineTo(toPointField.x, toPointField.y);\r\n ctx.stroke();\r\n ctx.closePath();\r\n }\r\n}\r\n","import uuid from \"uuid\";\r\nimport $ from \"jquery\";\r\n\r\nimport COLOR_THEMES from \"../../../store/colorThemes\";\r\nimport Config from \"../../../store/sqftConfig\";\r\nimport {\r\n getAngleBetweenTwoPoints,\r\n getMidPoint, getMinInArray, getParallelPoints,\r\n getPointDistance, getPointField, getSectionPartPoint, isDisabledInPopupWithParents,\r\n measureDistanceToInches, numToLetter,\r\n orientation\r\n} from \"../../../../../helpers/sqftHelper\";\r\nimport point from \"../point\";\r\nimport EventManager from \"../../../store/sqftEventManager\";\r\nimport workspace from \"../../workspace\";\r\n//import TranslatesProvider from \"../../../../../translatesProvider\";\r\nimport MiteredSegment from \"../shapeParts/mitered/miteredSegment\";\r\nimport NumberText from \"../../workspace/text/numberText\";\r\nimport DrawImage from \"../../workspace/textBox/draw/drawImage\";\r\nimport store from \"../../../../../../../store\";\r\nimport sqftConfig from \"../../../store/sqftConfig\";\r\nimport {\r\n isDisabledInPopupShouldBeHidden, MITERED_OVERLAY_TYPE,\r\n SIDEBAR_BUTTONS_MENU,\r\n SIDEBAR_NAVIGATION_BUTTONS\r\n} from \"../../../../../constants\";\r\nimport RenderFigures from \"../../../helpers/renderFigures\";\r\nimport sqftSlabManager from \"../../../store/sqftSlabManager\";\r\nimport {getQtCatName} from \"../../../../../helpers/sqftQuotesHelper\";\r\n\r\nexport default class MiteredOverlay {\r\n id;\r\n sectionIndex;\r\n line;\r\n self = this;\r\n qtCatName = null;\r\n featureId = null;\r\n type = null; //mitered || underlayment\r\n state = {\r\n mousePos: {},\r\n mouseDown: false,\r\n mouseDownPosition: null,\r\n isHoveringPoint: false,\r\n hoveredPoint: null,\r\n isHoveredOverText: false,\r\n hoveredText: {\r\n area:[],\r\n midPoint: {x: 0, y: 0},\r\n pointsDistance: 0,\r\n points: {point1: null, point2: null},\r\n orientation: 0\r\n },\r\n midPoint: {\r\n x: 0,\r\n y: 0,\r\n },\r\n height: 1.5,\r\n heightMetric: 40,\r\n thickness: 4,\r\n thicknessMetric: 40,\r\n maxSegmentPriority: 0\r\n };\r\n design = {\r\n //initialSize: 30,\r\n minMiteredSize: 1,\r\n measurementMargin: 30, //11,\r\n dragPointMargin: 28,\r\n rulerMargin: 33,\r\n heightMargin: 60,\r\n sectionIndexMargin: 95,\r\n sectionArrowWidth: 30,\r\n letterMargin: 18,\r\n thicknessMargin: -18,\r\n movePointOffset: 15,\r\n lineTextColor: COLOR_THEMES[Config.activeTheme].primary,\r\n fontColor: COLOR_THEMES[Config.activeTheme].primary,\r\n deleteFillStyle: \"#e77f8d\", //\"rgba(253,2,33, 0.5)\",\r\n fontFamily: 'playbold',\r\n fontHeight: 16\r\n };\r\n miteredPoints = []; // array of points\r\n _segments = []; // array of MiteredSegments\r\n miteredTextParameters = []; //array of objects\r\n heightNumberText = {}; //array of objects\r\n\r\n constructor(line, sectionIndex, type) {\r\n this.line = line;\r\n this.sectionIndex = sectionIndex;\r\n this.type = type;\r\n this.id = uuid();\r\n this.qtCatName = getQtCatName();\r\n }\r\n\r\n setMiteredPoints = (value) => { this.miteredPoints = value; }\r\n getSegments = () => { return this._segments; }\r\n getParent = () => { return this.line; }\r\n setSegments = (value) => { this._segments = value; }\r\n setFeatureId = (value) => { this.featureId = value; }\r\n\r\n movePointInOrStop = (point1, axis, diff, biggestLineCord, smallestLineCord, stopPointLeft, stopPointRight, moveStopPoints) => {\r\n //stop on other move points\r\n let smallestPointStopped = null;\r\n let biggestPointStopped = null;\r\n if (point1[axis] - diff < stopPointLeft[axis]) {\r\n smallestLineCord = stopPointLeft[axis] + this.design.minMiteredSize;\r\n smallestPointStopped = stopPointLeft;\r\n if(moveStopPoints) {\r\n let lengthDiff = point1[axis] - stopPointLeft[axis] - diff;\r\n this.movePoint(-lengthDiff, point1[axis] - diff, stopPointLeft, true);\r\n this.moveMeasurements(stopPointLeft);\r\n smallestLineCord = stopPointLeft[axis];\r\n }\r\n } else if (point1[axis] - diff > stopPointRight[axis]) {\r\n biggestLineCord = stopPointRight[axis] - this.design.minMiteredSize;\r\n biggestPointStopped = stopPointRight;\r\n if(moveStopPoints) {\r\n let lengthDiff = point1[axis] - stopPointRight[axis] - diff;\r\n this.movePoint(-lengthDiff, lengthDiff, stopPointRight, true);\r\n this.moveMeasurements(stopPointRight);\r\n biggestLineCord = stopPointRight[axis];\r\n }\r\n }\r\n\r\n // keep inside line\r\n if (point1[axis] - diff >= biggestLineCord) {\r\n point1[axis] = biggestLineCord;\r\n } else if (point1[axis] - diff <= smallestLineCord) {\r\n point1[axis] = smallestLineCord;\r\n } else {\r\n point1[axis] -= diff;\r\n }\r\n\r\n return [smallestPointStopped, biggestPointStopped]\r\n };\r\n\r\n getMousePosPointDiff = (diff, point, mousePos, sameOrientation = false) => {\r\n if(Config.measureUnit === \"Metric\") {\r\n let offset = 0;\r\n switch(this.line.getOrientation()) {\r\n case orientation.HORIZONTAL:\r\n offset = sameOrientation ? mousePos.x - point.getPointField().x : mousePos.y - point.getPointField().y;\r\n break;\r\n case orientation.VERTICAL:\r\n offset = sameOrientation? mousePos.y - point.getPointField().y : mousePos.x - point.getPointField().x;\r\n break;\r\n case orientation.NORTHWEST:\r\n case orientation.SOUTHEAST:\r\n break;\r\n case orientation.NORTHEAST:\r\n case orientation.SOUTHWEST:\r\n break;\r\n }\r\n if(!(-this.design.movePointOffset / 2 > offset || offset > 3 * this.design.movePointOffset)) {\r\n diff = diff / Config.millimetersMultiplier;\r\n }\r\n }\r\n\r\n return diff\r\n };\r\n\r\n getPoints = () => { return this.miteredPoints; };\r\n getMiteredTextParameter = () => { return this.miteredTextParameters; };\r\n isMiteredPointMoving = () => { return this.state.mouseDown};\r\n\r\n destroy = (protect) => {\r\n if(!protect) {\r\n EventManager.removeEvent(this);\r\n this.miteredPoints.forEach((point) => point.destroy());\r\n this._segments.forEach((segment) => {\r\n segment.length.destroy();\r\n if (segment.thickness) {\r\n segment.thickness.destroy();\r\n }\r\n });\r\n this.heightNumberText.destroy();\r\n\r\n if (this.type === MITERED_OVERLAY_TYPE.mitered) {\r\n workspace.miteredController.deleteSection(this);\r\n } else if (this.type === MITERED_OVERLAY_TYPE.underlayment) {\r\n workspace.underlaymentController.deleteSection(this);\r\n }\r\n }\r\n };\r\n\r\n init = (importData = null) => {\r\n if (this.line.overlay) {\r\n this.line.overlay.destroy();\r\n }\r\n if(!importData) {\r\n this.preparePoints(false);\r\n }\r\n this.prepareMeasurements(importData);\r\n this.prepareHeight(importData);\r\n this.initEvents();\r\n\r\n //points\r\n this.miteredPoints.forEach((point, index) => {\r\n if (index === 0 || index === this.miteredPoints.length - 1) {\r\n this.initPoint(point, 'blank');\r\n } else {\r\n this.initPoint(point, 'white-circle');\r\n }\r\n });\r\n\r\n // todo fix bumpout rotation and remove this\r\n $('.button--angle').addClass('button--disabled');\r\n /////////////////////////////////////////\r\n };\r\n initEvents = () => {\r\n EventManager.addEvent(\r\n EventManager.events.RENDER,\r\n this.render,\r\n this,\r\n EventManager.priorities.SEGMENT\r\n );\r\n //todo priority\r\n EventManager.addEvent(\r\n EventManager.events.MOUSE_MOVE,\r\n this.onMouseMove,\r\n this,\r\n EventManager.priorities.SEGMENT\r\n );\r\n EventManager.addEvent(\r\n EventManager.events.MOUSE_DOWN,\r\n this.onMouseDown,\r\n this,\r\n EventManager.priorities.SEGMENT\r\n );\r\n EventManager.addEvent(\r\n EventManager.events.MOUSE_UP,\r\n this.onMouseUp,\r\n this,\r\n EventManager.priorities.SEGMENT\r\n );\r\n EventManager.addEvent(\r\n EventManager.events.MOUSE_LEAVE,\r\n this.onMouseLeave,\r\n this,\r\n EventManager.priorities.OVERALL\r\n );\r\n };\r\n deregisterEvents = () => {\r\n EventManager.removeEvent(this);\r\n this.heightNumberText.deregisterEvents();\r\n for (let segment of this._segments ) {\r\n segment.length.deregisterEvents();\r\n if (segment.thickness) {\r\n segment.thickness.deregisterEvents();\r\n }\r\n }\r\n };\r\n reInitEvents = () => {\r\n this.initEvents();\r\n this.heightNumberText.reInitEvents();\r\n for (let segment of this._segments ) {\r\n segment.length.reInitEvents();\r\n if (segment.thickness) {\r\n segment.thickness.reInitEvents();\r\n }\r\n }\r\n };\r\n\r\n getMiteredTotalArea = () => {\r\n let totalArea = 0,\r\n lineLength = Config.measureUnit === \"Metric\" ? this.line.getLineLengthMm() : this.line.getLineLength(),\r\n height = Config.measureUnit === \"Metric\" ? this.state.heightMetric : this.state.height;\r\n //segmentsLength = 0,\r\n //minThicknessToCount = Config.measureUnit === \"Metric\" ? 40 : 1;\r\n\r\n // for (let segment of this._segments) {\r\n // if (segment instanceof MiteredSegment) {\r\n // if(segment.thickness.value >= minThicknessToCount ) {\r\n // let segmentLength = Config.measureUnit === \"Metric\"\r\n // ? inchesToMm(segment.length.value)\r\n // : this.line.addDecimalToLength(measureDistanceToInches(segment.length.value));\r\n //\r\n // segmentsLength += +segment.thickness.value + +segmentLength\r\n // }\r\n // }\r\n // }\r\n\r\n //totalArea = height * (lineLength + segmentsLength);\r\n totalArea = height * (lineLength);\r\n\r\n return totalArea;\r\n };\r\n\r\n export = () => {\r\n return {\r\n miteredPoints : this.miteredPoints.map((point) => {\r\n return point.export();\r\n }),\r\n state: this.state,\r\n _segments: this._segments.map((segment) => {\r\n return segment.exportSegment()\r\n }),\r\n }\r\n };\r\n\r\n import = (line, importMitered) => {\r\n for (const importPoint of importMitered.miteredPoints) {\r\n const preparePoint = new point();\r\n preparePoint.import(importPoint);\r\n\r\n this.miteredPoints.push(preparePoint);\r\n }\r\n this.state = importMitered.state;\r\n this.state = importMitered.state;\r\n };\r\n\r\n preparePoints = (shouldAddTwoPointsInTheMiddle = false) => {\r\n let point33 = getSectionPartPoint(this.line.from, this.line.to, 2),\r\n point66 = getSectionPartPoint(this.line.from, this.line.to, 1/2);\r\n let [fromPointWithIndent, toPointWithIndent] = this.line.getLinePointsWithoutCorners();\r\n const miteredPoints = [\r\n new point(fromPointWithIndent.x, fromPointWithIndent.y),\r\n ...(shouldAddTwoPointsInTheMiddle ? [new point(point33.x, point33.y), new point(point66.x, point66.y)] : []),\r\n new point(toPointWithIndent.x, toPointWithIndent.y)\r\n ];\r\n\r\n this.setMiteredPoints(miteredPoints);\r\n };\r\n\r\n prepareMeasurements = (importData = null) => {\r\n this.miteredPoints.forEach((point, index) => {\r\n let next = index + 1;\r\n if(this.miteredPoints[next]) {\r\n this.addMeasurementBetweenPoints(point, this.miteredPoints[next], importData ? importData._segments[index] : null);\r\n }\r\n });\r\n };\r\n\r\n prepareHeight = (importData = null) => {\r\n const midPoint = getMidPoint(this.line.from, this.line.to),\r\n lineDirection = this.line.getLineDirection(),\r\n fontHeight = this.design.fontHeight;\r\n\r\n let xMarginHeight = 0,\r\n yMarginHeight = -this.design.heightMargin - fontHeight,\r\n angle = getAngleBetweenTwoPoints(this.line.from, this.line.to);\r\n\r\n switch (lineDirection.orientation) {\r\n case \"horizontal\": {\r\n if (lineDirection.newDirection === \"west\") {\r\n angle += 180\r\n yMarginHeight = this.design.heightMargin + fontHeight;\r\n }\r\n break;\r\n }\r\n case \"vertical\": {\r\n break;\r\n }\r\n // todo rotation\r\n case \"NORTHWEST\": { break;}\r\n case \"NORTHEAST\": { break;}\r\n case \"SOUTHWEST\": { break;}\r\n case \"SOUTHEAST\": { break;}\r\n default:\r\n break;\r\n }\r\n\r\n let posHeight = {\r\n // betweenPoints: {\r\n // pointFrom: this.line.from,\r\n // pointTo: this.line.to\r\n // },\r\n x: midPoint.x,\r\n y: midPoint.y,\r\n xOffset: xMarginHeight,\r\n yOffset: yMarginHeight,\r\n orientation: this.line.getLineDirectionV2(),\r\n angle: angle\r\n };\r\n let design = {\r\n valuePrefix: workspace.intl.formatMessage({id: \"sqft.navigation.mitered.height\"}) + \": \",\r\n };\r\n\r\n let heightValue = importData\r\n ? importData._segments[0]\r\n ? importData._segments[0].height\r\n : null\r\n : Config.measureUnit === \"Metric\" ? this.state.heightMetric : this.state.height;\r\n\r\n this.heightNumberText = new NumberText(heightValue, posHeight, design, this, this.setSegmentHeightFromNumberValue);\r\n };\r\n\r\n updateMinMaxPoints = () => {\r\n let [fromPointWithIndent, toPointWithIndent] = this.line.getLinePointsWithoutCorners();\r\n // Minimum and maximum values for limiting points\r\n const minX = Math.min(fromPointWithIndent.x, toPointWithIndent.x);\r\n const minY = Math.min(fromPointWithIndent.y, toPointWithIndent.y);\r\n const maxX = Math.max(fromPointWithIndent.x, toPointWithIndent.x);\r\n const maxY = Math.max(fromPointWithIndent.y, toPointWithIndent.y);\r\n\r\n // Limiting points within specified boundaries\r\n for (const miteredPoint of this.miteredPoints) {\r\n miteredPoint.x = Math.max(minX, Math.min(maxX, miteredPoint.x));\r\n miteredPoint.y = Math.max(minY, Math.min(maxY, miteredPoint.y));\r\n }\r\n\r\n // Move the nearest points to the specified minimum and maximum values\r\n let startPoint = this.miteredPoints[0],\r\n endPoint = this.miteredPoints[this.miteredPoints.length - 1];\r\n\r\n startPoint.x = fromPointWithIndent.x;\r\n startPoint.y = fromPointWithIndent.y;\r\n endPoint.x = toPointWithIndent.x;\r\n endPoint.y = toPointWithIndent.y;\r\n\r\n this.updateSegmentsLength();\r\n this.updateSegmentThicknessPos();\r\n }\r\n\r\n addMeasurementBetweenPoints = (point1, point2, importSegment = null) => {\r\n let angle = getAngleBetweenTwoPoints(this.line.from, this.line.to);\r\n const midPoint = getMidPoint(point1, point2),\r\n lineDirection = this.line.getLineDirection(),\r\n fontHeight = this.design.fontHeight,\r\n // distance = Config.measureUnit === \"Metric\"\r\n // ? distanceToMillimeters(getPointDistance(point1, point2))\r\n // : getPointDistance(point1, point2)\r\n\r\n distance = getPointDistance(point1, point2),\r\n point1Index = this.miteredPoints.indexOf(point1),\r\n point2Index = this.miteredPoints.indexOf(point2);\r\n\r\n void point2Index;\r\n let yOffset = -this.design.measurementMargin - fontHeight,\r\n xOffset = 0;\r\n // thicknessXOffsetValue = 0,\r\n // xMarginLine = 0,\r\n // yMarginLine = 0,\r\n // thicknessYOffsetValue = 0;\r\n\r\n switch (lineDirection.orientation) {\r\n case \"horizontal\": {\r\n if (lineDirection.newDirection === \"west\") {\r\n angle += 180\r\n yOffset = this.design.heightMargin - fontHeight;\r\n }\r\n //yOffset = lineDirection.newDirection === \"west\" ? this.design.measurementMargin + fontHeight : -this.design.measurementMargin -fontHeight;\r\n\r\n // yMarginLine = (lineDirection.newDirection === \"west\" ? this.design.thicknessMargin : -this.design.thicknessMargin);\r\n //\r\n // thicknessXOffsetValue = (lineDirection.newDirection === \"east\" ? 15 : 15);\r\n // thicknessYOffsetValue = (lineDirection.newDirection === \"east\" ? 16 : -14);\r\n break;\r\n }\r\n case \"vertical\": {\r\n //xOffset = (lineDirection.newDirection === \"south\" ? this.design.measurementMargin + 10 : -this.design.measurementMargin - 10);\r\n\r\n // xMarginLine = (lineDirection.newDirection === \"south\" ? this.design.thicknessMargin: -this.design.thicknessMargin);\r\n //\r\n // thicknessXOffsetValue = (lineDirection.newDirection === \"north\" ? 35 : -16);\r\n // thicknessYOffsetValue = (lineDirection.newDirection === \"north\" ? 5 : 6);\r\n break;\r\n }\r\n //TODO rotation\r\n case \"NORTHWEST\": { break; }\r\n case \"NORTHEAST\": { break; }\r\n case \"SOUTHWEST\": { break; }\r\n case \"SOUTHEAST\": { break; }\r\n default: break;\r\n }\r\n\r\n let pos = {\r\n x: midPoint.x,\r\n y: midPoint.y,\r\n xOffset: xOffset,\r\n yOffset: yOffset,\r\n orientation: this.line.getLineDirectionV2(),\r\n angle: angle,\r\n };\r\n\r\n // let posThickness = {\r\n // x: midPoint.x,\r\n // y: midPoint.y,\r\n // xOffset: thicknessXOffsetValue + xMarginLine,\r\n // yOffset: thicknessYOffsetValue + yMarginLine,\r\n // orientation: this.line.getLineDirectionV2()\r\n // };\r\n\r\n let design = {\r\n isLength: true\r\n };\r\n\r\n let lengthText = new NumberText(distance, pos, design, this, this.setSegmentLengthFromNumberValue);\r\n let height = importSegment\r\n ? importSegment.height && importSegment.height\r\n : Config.measureUnit === \"Metric\" ? this.state.heightMetric : this.state.height;\r\n // let thicknessValue = importSegment && importSegment.thickness\r\n // ? importSegment.thickness\r\n // : Config.measureUnit === \"Metric\" ? this.state.thicknessMetric : this.state.thickness;\r\n //let thickness = new NumberText(thicknessValue, posThickness, {}, this, this.setSegmentThicknessFromNumberValue);\r\n let segment = new MiteredSegment(lengthText, height, null);\r\n // todo logic combining miteredPoints and segments\r\n this._segments.splice(point1Index, 0, segment);\r\n };\r\n\r\n getPointDistance(point, pos) {\r\n let pointField = point.getPointField();\r\n\r\n return Math.sqrt(Math.pow(pointField.x - pos.x, 2) + Math.pow(pointField.y - pos.y, 2))\r\n }\r\n\r\n getMaxLength = () => {\r\n return Config.measureUnit === \"Metric\"\r\n ? measureDistanceToInches(this.line.getLineLength()).millimeters // ? distanceToMillimeters(inchesToMm(segment.length.value))\r\n : this.line.getLineLength();\r\n }\r\n\r\n getPointBetweenCords = (mousePos) => {\r\n const closest = this.miteredPoints.reduce((a, b) => {\r\n return this.getPointDistance(a, mousePos) < this.getPointDistance(b, mousePos) ? a : b\r\n });\r\n const closestIndex = this.miteredPoints.indexOf(closest);\r\n let secondPoint = null;\r\n let isPrev = false;\r\n let lineDirection = this.line.getLineDirection();\r\n\r\n if(!this.miteredPoints[closestIndex + 1]) {\r\n secondPoint = this.miteredPoints[closestIndex - 1];\r\n isPrev = true;\r\n } else if(!this.miteredPoints[closestIndex - 1]) {\r\n secondPoint = this.miteredPoints[closestIndex + 1];\r\n isPrev = false;\r\n } else {\r\n let prevPoint = this.miteredPoints[closestIndex - 1];\r\n let nextPoint = this.miteredPoints[closestIndex + 1];\r\n let closestPointField = closest.getPointField();\r\n\r\n // todo logic\r\n //isPrev = this.getPointDistance(prevPoint, mousePos) < this.getPointDistance(nextPoint, mousePos);\r\n switch (lineDirection.orientation) {\r\n case \"horizontal\": {\r\n isPrev = lineDirection.newDirection === \"east\" ? mousePos.x < closestPointField.x : mousePos.x > closestPointField.x;\r\n break;\r\n }\r\n case \"vertical\": {\r\n isPrev = lineDirection.newDirection === \"north\" ? mousePos.y > closestPointField.y : mousePos.y < closestPointField.y;\r\n break;\r\n }\r\n //TODO rotation\r\n case \"NORTHWEST\": { break; }\r\n case \"NORTHEAST\": { break; }\r\n case \"SOUTHWEST\": { break; }\r\n case \"SOUTHEAST\": { break; }\r\n default: break;\r\n }\r\n\r\n secondPoint = isPrev ? prevPoint : nextPoint;\r\n }\r\n\r\n return [closest, secondPoint, isPrev];\r\n };\r\n\r\n addPointBetweenPoints = (closest, secondPoint, isPrev) => {\r\n const midPoint = getMidPoint(closest, secondPoint);\r\n const newPoint = new point(midPoint.x, midPoint.y);\r\n this.initPoint(newPoint);\r\n const closestIndex = this.miteredPoints.indexOf(closest);\r\n\r\n this.miteredPoints.splice(isPrev ? closestIndex : closestIndex + 1, 0, newPoint);\r\n\r\n return newPoint;\r\n };\r\n\r\n getSegmentBetweenPoints = (point1, point2) => {\r\n const point1Index = this.miteredPoints.indexOf(point1);\r\n const point2Index = this.miteredPoints.indexOf(point2);\r\n\r\n return this._segments[point2Index > point1Index ? point1Index : point2Index];\r\n };\r\n\r\n getSegmentPointsBySegment = (segment) => {\r\n const segmentIndex = this._segments.indexOf(segment);\r\n\r\n return [this.miteredPoints[segmentIndex], this.miteredPoints[segmentIndex + 1]];\r\n };\r\n\r\n removeMeasurementBetweenPoints = (closest, secondPoint, isPrev) => {\r\n const closestIndex = this.miteredPoints.indexOf(closest);\r\n const removeIndex = isPrev ? closestIndex - 2: closestIndex + 2;\r\n\r\n this._segments[removeIndex].length.destroy();\r\n if (this._segments[removeIndex].thickness) {\r\n this._segments[removeIndex].thickness.destroy();\r\n }\r\n this._segments.splice(removeIndex, 1);\r\n };\r\n\r\n deletePoint = (point) => {\r\n const pointIndex = this.miteredPoints.indexOf(point);\r\n\r\n //add new segment\r\n this.addMeasurementBetweenPoints(this.miteredPoints[pointIndex -1], this.miteredPoints[pointIndex +1]);\r\n\r\n //remove previous and next segment\r\n this._segments[pointIndex ].length.destroy();\r\n this._segments[pointIndex +1].length.destroy();\r\n if (this._segments[pointIndex].thickness) {\r\n this._segments[pointIndex].thickness.destroy();\r\n }\r\n if (this._segments[pointIndex + 1].thickness) {\r\n this._segments[pointIndex + 1].thickness.destroy();\r\n }\r\n this._segments.splice(pointIndex, 1);\r\n this._segments.splice(pointIndex, 1);\r\n\r\n //remove point\r\n this.miteredPoints.splice(pointIndex, 1);\r\n\r\n point.destroy();\r\n };\r\n\r\n resetHoveredPoint = () => {\r\n this.state.hoveredPoint = null;\r\n this.state.mouseDown = false;\r\n };\r\n\r\n\r\n moveMeasurements = (point) => {\r\n const pointIndex = this.miteredPoints.indexOf(point);\r\n\r\n // let length = Config.measureUnit === \"Metric\"\r\n // ? inchesToMm(getPointDistance(point, this.miteredPoints[pointIndex + 1 ]))\r\n // : getPointDistance(point, this.miteredPoints[pointIndex + 1 ]);\r\n //\r\n // let length2 = Config.measureUnit === \"Metric\"\r\n // ? inchesToMm(getPointDistance(point, this.miteredPoints[pointIndex - 1 ]))\r\n // : getPointDistance(point, this.miteredPoints[pointIndex - 1 ]);\r\n\r\n //move left and right measurements if they exist\r\n if (this.miteredPoints[pointIndex - 1 ]) {\r\n const midPoint2 = getMidPoint(point, this.miteredPoints[pointIndex - 1 ]);\r\n let length2 = getPointDistance(point, this.miteredPoints[pointIndex - 1 ]);\r\n this._segments[pointIndex - 1].length.pos.x = midPoint2.x;\r\n this._segments[pointIndex - 1].length.pos.y = midPoint2.y;\r\n this._segments[pointIndex - 1].length.value = length2;\r\n if (this._segments[pointIndex - 1].thickness) {\r\n this._segments[pointIndex - 1].thickness.pos.x = midPoint2.x;\r\n this._segments[pointIndex - 1].thickness.pos.y = midPoint2.y;\r\n }\r\n }\r\n if (this.miteredPoints[pointIndex + 1 ]) {\r\n const midPoint = getMidPoint(point, this.miteredPoints[pointIndex + 1 ]);\r\n let length = getPointDistance(point, this.miteredPoints[pointIndex + 1 ]);\r\n this._segments[pointIndex].length.pos.x = midPoint.x;\r\n this._segments[pointIndex].length.pos.y = midPoint.y;\r\n this._segments[pointIndex].length.value = length;\r\n if (this._segments[pointIndex].thickness) {\r\n this._segments[pointIndex].thickness.pos.x = midPoint.x;\r\n this._segments[pointIndex].thickness.pos.y = midPoint.y;\r\n }\r\n }\r\n };\r\n\r\n initPoint = (point, layout = 'white-circle') => {\r\n point.init(this);\r\n point.layout = layout;\r\n };\r\n\r\n getOffset = () => {\r\n return this.line.getOffset();\r\n };\r\n\r\n moveMitered = (xDiff = 0, yDiff = 0) => {\r\n for (let miteredPoint of this.miteredPoints ) {\r\n miteredPoint.x -= xDiff;\r\n miteredPoint.y -= yDiff;\r\n }\r\n this.heightNumberText.pos.x -= xDiff;\r\n this.heightNumberText.pos.y -= yDiff;\r\n for (let segment of this._segments ) {\r\n segment.length.pos.x -= xDiff;\r\n segment.length.pos.y -= yDiff;\r\n if (segment.thickness) {\r\n segment.thickness.pos.x -= xDiff;\r\n segment.thickness.pos.y -= yDiff;\r\n }\r\n }\r\n };\r\n\r\n setNewLineWidth = () => {\r\n this.updateCornerPoints();\r\n this.updateSectionHeightPos();\r\n this.updateSegmentsLength();\r\n this.updateSegmentThicknessPos();\r\n };\r\n\r\n updateCornerPoints = () => {\r\n this.miteredPoints[0].x = this.line.from.x\r\n this.miteredPoints[0].y = this.line.from.y\r\n this.miteredPoints[this.miteredPoints.length - 1].x = this.line.to.x\r\n this.miteredPoints[this.miteredPoints.length - 1].y = this.line.to.y\r\n };\r\n\r\n updateSectionHeightPos = () => {\r\n const midPoint = getMidPoint(this.line.from, this.line.to);\r\n this.heightNumberText.pos.x = midPoint.x;\r\n this.heightNumberText.pos.y = midPoint.y;\r\n };\r\n\r\n updateSegmentsLength = () => {\r\n for (let segmentIndex in this._segments ) {\r\n if (this._segments.hasOwnProperty(segmentIndex)) {\r\n const midPoint = getMidPoint(this.miteredPoints[+segmentIndex], this.miteredPoints[+segmentIndex + 1]);\r\n let length = getPointDistance(this.miteredPoints[+segmentIndex], this.miteredPoints[+segmentIndex + 1]);\r\n this._segments[+segmentIndex].length.pos.x = midPoint.x;\r\n this._segments[+segmentIndex].length.pos.y = midPoint.y;\r\n this._segments[+segmentIndex].length.value = length;\r\n this.setSegmentLength(length, this._segments[segmentIndex], this);\r\n }\r\n }\r\n };\r\n\r\n updateSegmentThicknessPos = () => {\r\n for (let segmentIndex in this._segments ) {\r\n if (this._segments.hasOwnProperty(segmentIndex) && this.miteredPoints[+segmentIndex + 1]) {\r\n const midPoint = getMidPoint(this.miteredPoints[+segmentIndex], this.miteredPoints[+segmentIndex + 1]);\r\n if (this._segments[+segmentIndex].thickness) {\r\n this._segments[+segmentIndex].thickness.pos.x = midPoint.x;\r\n this._segments[+segmentIndex].thickness.pos.y = midPoint.y;\r\n }\r\n }\r\n }\r\n };\r\n\r\n setSegmentLengthFromNumberValue = (value, numberText) => {\r\n value = Math.round10(+value / Config.getMeasureMultiplier(), -3);\r\n let miteredSection = numberText.parent;\r\n let miteredSegments = miteredSection.getSegments();\r\n let miteredSegment = miteredSegments.find(seg => seg.length === numberText);\r\n\r\n this.setSegmentLength(value, miteredSegment, miteredSection);\r\n };\r\n\r\n setSegmentLength = (value, segment, miteredSection) => {\r\n //update segment and maxSegment priority\r\n segment.setPriority(++this.state.maxSegmentPriority);\r\n this.resizeMiteredSegment(value, segment);\r\n\r\n // we need to recreate slab shape so we delete existing it\r\n sqftSlabManager.deleteSlabBacksplashByLine(this.line);\r\n if (this.type === MITERED_OVERLAY_TYPE.mitered) {\r\n workspace.miteredController.updateSection(miteredSection);\r\n } else if (this.type === MITERED_OVERLAY_TYPE.underlayment) {\r\n workspace.underlaymentController.updateSection(miteredSection);\r\n }\r\n };\r\n\r\n setSegmentHeightFromNumberValue = (value, numberText) => {\r\n const newValue = +value\r\n let miteredSection = numberText.parent;\r\n this.setSegmentHeight(newValue, miteredSection);\r\n };\r\n\r\n setSegmentHeight = (newValue, miteredSection) => {\r\n let segments = miteredSection.getSegments();\r\n sqftConfig.measureUnit === \"Metric\"\r\n ? miteredSection.state.heightMetric = newValue\r\n : miteredSection.state.height = newValue;\r\n\r\n miteredSection.heightNumberText.value = newValue;\r\n segments.map((segment) => {\r\n segment.height = newValue\r\n });\r\n\r\n // we need to recreate slab shape so we delete existing it\r\n sqftSlabManager.deleteSlabBacksplashByLine(this.line);\r\n if (this.type === MITERED_OVERLAY_TYPE.mitered) {\r\n workspace.miteredController.updateSection(miteredSection);\r\n } else if (this.type === MITERED_OVERLAY_TYPE.underlayment) {\r\n workspace.underlaymentController.updateSection(miteredSection);\r\n }\r\n }\r\n\r\n setSegmentThicknessFromNumberValue = (value, numberText) => {\r\n const newValue = +value\r\n let miteredSection = numberText.parent;\r\n let miteredSegments = miteredSection.getSegments();\r\n let miteredSegment = miteredSegments.find(seg => seg.thickness === numberText);\r\n\r\n this.setSegmentThickness(newValue, miteredSegment, miteredSection);\r\n if (this.type === MITERED_OVERLAY_TYPE.mitered) {\r\n workspace.miteredController.updateSection(miteredSection);\r\n } else if (this.type === MITERED_OVERLAY_TYPE.underlayment) {\r\n workspace.underlaymentController.updateSection(miteredSection);\r\n }\r\n };\r\n\r\n setSegmentThickness = (newValue, miteredSegment, miteredSection) => {\r\n sqftConfig.measureUnit === \"Metric\"\r\n ? miteredSection.state.thicknessMetric = newValue\r\n : miteredSection.state.thickness = newValue;\r\n miteredSegment.thickness.value = newValue;\r\n\r\n if (this.type === MITERED_OVERLAY_TYPE.mitered) {\r\n workspace.miteredController.updateSection(miteredSection);\r\n } else if (this.type === MITERED_OVERLAY_TYPE.underlayment) {\r\n workspace.underlaymentController.updateSection(miteredSection);\r\n }\r\n }\r\n\r\n getSegmentByNumberText = (numberText) => {\r\n let segmentIndex = this._segments.map(seg => seg.length).indexOf(numberText);\r\n\r\n return this._segments[segmentIndex];\r\n };\r\n\r\n getResizedSegmentsWithoutPriority = (segment) => {\r\n let segmentIndex = this._segments.indexOf(segment);\r\n let closestLeft = this._segments[segmentIndex -1 ]\r\n ? this._segments[segmentIndex -1 ].priority === 0\r\n : null;\r\n let closestRight = this._segments[segmentIndex +1 ]\r\n ? this._segments[segmentIndex +1 ].priority === 0\r\n : null;\r\n\r\n return {closestLeft, closestRight};\r\n };\r\n\r\n getResizedSegmentsFreeSpace = (segment) => {\r\n let segmentIndex = this._segments.indexOf(segment);\r\n let closestLeft = this._segments[segmentIndex -1 ];\r\n let closestRight = this._segments[segmentIndex +1 ];\r\n\r\n return {closestLeft, closestRight};\r\n };\r\n\r\n getResizedSegmentsByPriority = (segment) => {\r\n let segmentIndex = this._segments.indexOf(segment);\r\n let minPrevSegment = null;\r\n let minNextSegment = null;\r\n if(this._segments[segmentIndex -1 ]) {\r\n let prevSegments = this._segments.slice(0, segmentIndex);\r\n minPrevSegment = getMinInArray(prevSegments, 'priority');\r\n }\r\n if(this._segments[segmentIndex +1 ]) {\r\n let nextSegments = this._segments.slice(segmentIndex + 1);\r\n minNextSegment = getMinInArray(nextSegments.reverse(), 'priority'); // reverse array to get closest element\r\n }\r\n\r\n return {minPrevSegment, minNextSegment};\r\n };\r\n\r\n movePointWithMouse = (mousePos, point1) => {\r\n let scale = workspace.getScale();\r\n let xDiff = (this.state.mouseDownPosition.x - mousePos.x) / scale;\r\n let yDiff = (this.state.mouseDownPosition.y - mousePos.y) / scale;\r\n\r\n //debugger\r\n yDiff = this.getMousePosPointDiff(yDiff, point1, mousePos, true);\r\n xDiff = this.getMousePosPointDiff(xDiff, point1, mousePos, true);\r\n\r\n this.movePoint(xDiff, yDiff, point1);\r\n this.moveMeasurements(point1);\r\n\r\n this.state.mouseDownPosition.y = mousePos.y;\r\n this.state.mouseDownPosition.x = mousePos.x;\r\n };\r\n\r\n // first resize free space then segments without and with priority\r\n resizeMiteredSegment = (value, segment) => {\r\n if (!this.resizeMiteredSegmentFreeSpace(value, segment)){\r\n if (!this.resizeMiteredSegmentWithoutPriority(value, segment)) {\r\n this.resizeMiteredSegmentWithPriority(value, segment);\r\n }\r\n }\r\n };\r\n\r\n resizeMiteredSegmentWithPriority = (value, segment) => {\r\n let yDiff = 0,\r\n xDiff = 0,\r\n lineDirection = this.line.getLineDirection(),\r\n {minPrevSegment, minNextSegment} = this.getResizedSegmentsByPriority(segment),\r\n segmentIndex = this._segments.indexOf(segment),\r\n minNextSegmentIndex = this._segments.indexOf(minNextSegment),\r\n minPrevSegmentIndex = this._segments.indexOf(minPrevSegment),\r\n\r\n [segmentPoint1, segmentPoint2] = this.getSegmentPointsBySegment(segment),\r\n pointDistance = getPointDistance(segmentPoint1, segmentPoint2);\r\n\r\n // move only to one side with lowest priority\r\n if (minPrevSegment ? minPrevSegment.priority : 0 > minNextSegment ? minNextSegment.priority : 0) {\r\n minPrevSegment = null\r\n } else if(minPrevSegment ? minPrevSegment.priority : 0 < minNextSegment ? minNextSegment.priority : 0) {\r\n minNextSegment = null\r\n }\r\n\r\n let moveAllNextPoints = (xDiff, yDiff) => {\r\n let index = segmentIndex;\r\n while(minNextSegmentIndex > index) {\r\n let [segmentBetweenPoint1, segmentBetweenPoint2] = this.getSegmentPointsBySegment(this._segments[index]);\r\n this.movePoint(xDiff, yDiff, segmentBetweenPoint2, true);\r\n this.moveMeasurements(segmentBetweenPoint2);\r\n index++\r\n\r\n void segmentBetweenPoint1;\r\n }\r\n };\r\n\r\n let moveAllPrevPoints = (xDiff, yDiff) => {\r\n let index = segmentIndex;\r\n while(minPrevSegmentIndex < index) {\r\n let [segmentBetweenPoint1, segmentBetweenPoint2] = this.getSegmentPointsBySegment(this._segments[index]);\r\n this.movePoint(xDiff, yDiff, segmentBetweenPoint1, true);\r\n this.moveMeasurements(segmentBetweenPoint1);\r\n index--\r\n\r\n void segmentBetweenPoint2;\r\n }\r\n };\r\n switch(this.line.getOrientation()) {\r\n case orientation.HORIZONTAL:\r\n if (minPrevSegment && minNextSegment) {\r\n xDiff = lineDirection.newDirection === \"east\" ? value - pointDistance: -value + pointDistance;\r\n moveAllPrevPoints(xDiff / 2);\r\n\r\n xDiff = lineDirection.newDirection === \"east\" ? -value + pointDistance: value - pointDistance;\r\n moveAllNextPoints(xDiff / 2);\r\n } else if(minPrevSegment && !minNextSegment) {\r\n xDiff = lineDirection.newDirection === \"east\" ? value - pointDistance: -value + pointDistance;\r\n moveAllPrevPoints(xDiff);\r\n } else if(!minPrevSegment && minNextSegment) {\r\n xDiff = lineDirection.newDirection === \"east\" ? -value + pointDistance: value - pointDistance;\r\n moveAllNextPoints(xDiff);\r\n }\r\n\r\n break;\r\n case orientation.VERTICAL:\r\n if (minPrevSegment && minNextSegment) {\r\n yDiff = lineDirection.newDirection === \"east\" ? value - pointDistance : -value + pointDistance;\r\n moveAllPrevPoints(xDiff, yDiff / 2);\r\n\r\n yDiff = lineDirection.newDirection === \"east\" ? -value + pointDistance: value - pointDistance;\r\n moveAllNextPoints(xDiff, yDiff / 2);\r\n } else if(minPrevSegment && !minNextSegment) {\r\n yDiff = lineDirection.newDirection === \"east\" ? value - pointDistance : -value + pointDistance;\r\n moveAllPrevPoints(xDiff, yDiff);\r\n } else if(!minPrevSegment && minNextSegment) {\r\n yDiff = lineDirection.newDirection === \"east\" ? -value + pointDistance: value - pointDistance;\r\n moveAllNextPoints(xDiff, yDiff);\r\n }\r\n break;\r\n case orientation.NORTHWEST:\r\n case orientation.SOUTHEAST:\r\n break;\r\n case orientation.NORTHEAST:\r\n case orientation.SOUTHWEST:\r\n break;\r\n }\r\n };\r\n\r\n resizeMiteredSegmentWithoutPriority = (value, segment) => {\r\n let {closestLeft, closestRight} = this.getResizedSegmentsWithoutPriority(segment);\r\n //resize segments only if they are without priority\r\n if(!closestLeft && !closestRight) {\r\n return false\r\n }\r\n\r\n let yDiff = 0,\r\n xDiff = 0,\r\n lineDirection = this.line.getLineDirection(),\r\n [segmentPoint1, segmentPoint2] = this.getSegmentPointsBySegment(segment),\r\n pointDistance = getPointDistance(segmentPoint1, segmentPoint2);\r\n\r\n switch(this.line.getOrientation()) {\r\n case orientation.HORIZONTAL:\r\n if(closestLeft && closestRight) {\r\n xDiff = lineDirection.newDirection === \"east\" ? value - pointDistance: -value + pointDistance;\r\n this.movePoint(xDiff / 2, yDiff, segmentPoint1, true);\r\n this.moveMeasurements(segmentPoint1);\r\n\r\n xDiff = lineDirection.newDirection === \"east\" ? -value + pointDistance: value - pointDistance;\r\n this.movePoint(xDiff / 2, yDiff, segmentPoint2, true);\r\n this.moveMeasurements(segmentPoint2);\r\n\r\n } else if(closestLeft && !closestRight) {\r\n xDiff = lineDirection.newDirection === \"east\" ? value - pointDistance: -value + pointDistance;\r\n this.movePoint(xDiff, yDiff, segmentPoint1, true);\r\n this.moveMeasurements(segmentPoint1);\r\n\r\n } else if(!closestLeft && closestRight) {\r\n xDiff = lineDirection.newDirection === \"east\" ? -value + pointDistance: value - pointDistance;\r\n this.movePoint(xDiff, yDiff, segmentPoint2, true);\r\n this.moveMeasurements(segmentPoint2);\r\n }\r\n\r\n break;\r\n case orientation.VERTICAL:\r\n if(closestLeft && closestRight) {\r\n yDiff = lineDirection.newDirection === \"north\" ? -value + pointDistance: value - pointDistance;\r\n this.movePoint(xDiff / 2, yDiff, segmentPoint1, true);\r\n this.moveMeasurements(segmentPoint1);\r\n\r\n yDiff = lineDirection.newDirection === \"north\" ? value - pointDistance : -value + pointDistance;\r\n this.movePoint(xDiff / 2, yDiff, segmentPoint2, true);\r\n this.moveMeasurements(segmentPoint2);\r\n\r\n } else if(closestLeft && !closestRight) {\r\n yDiff = lineDirection.newDirection === \"north\" ? -value + pointDistance: value - pointDistance;\r\n this.movePoint(xDiff, yDiff, segmentPoint1, true);\r\n this.moveMeasurements(segmentPoint1);\r\n\r\n } else if(!closestLeft && closestRight) {\r\n yDiff = lineDirection.newDirection === \"north\" ? value - pointDistance : -value + pointDistance;\r\n this.movePoint(xDiff, yDiff, segmentPoint2, true);\r\n this.moveMeasurements(segmentPoint2);\r\n }\r\n break;\r\n case orientation.NORTHWEST:\r\n case orientation.SOUTHEAST:\r\n break;\r\n case orientation.NORTHEAST:\r\n case orientation.SOUTHWEST:\r\n break;\r\n }\r\n\r\n return true\r\n };\r\n\r\n resizeMiteredSegmentFreeSpace = (value, segment) => {\r\n let {closestLeft, closestRight} = this.getResizedSegmentsFreeSpace(segment);\r\n //if segments exist skip resizing\r\n if (!closestLeft || !closestRight) {\r\n let yDiff = 0,\r\n xDiff = 0,\r\n lineDirection = this.line.getLineDirection(),\r\n [segmentPoint1, segmentPoint2] = this.getSegmentPointsBySegment(segment),\r\n [smallestLinePoint, biggestLinePoint] = this.line.getLinePointsWithoutCorners(),\r\n pointDistance = getPointDistance(segmentPoint1, segmentPoint2);\r\n\r\n // todo move skip into function\r\n switch(this.line.getOrientation()) {\r\n case orientation.HORIZONTAL:\r\n if(!closestLeft && closestRight) {\r\n xDiff = lineDirection.newDirection === \"east\" ? value - pointDistance: -value + pointDistance;\r\n // skip if there is no whitespace\r\n if(lineDirection.newDirection === \"east\" ){\r\n if(segmentPoint1.x - xDiff <= smallestLinePoint.x || segmentPoint1.x === smallestLinePoint.x){\r\n return false\r\n } else if(Math.round(segmentPoint1.x) === smallestLinePoint.x){\r\n segmentPoint1.x = smallestLinePoint.x;\r\n return false\r\n }\r\n } else {\r\n if(segmentPoint1.x - xDiff >= biggestLinePoint.x || segmentPoint1.x === biggestLinePoint.x){\r\n return false\r\n } else if(Math.round(segmentPoint1.x) === biggestLinePoint.x){\r\n segmentPoint1.x = biggestLinePoint.x;\r\n return false\r\n }\r\n }\r\n this.movePoint(xDiff, yDiff, segmentPoint1, true);\r\n this.moveMeasurements(segmentPoint1);\r\n\r\n } else if(closestLeft && !closestRight) {\r\n xDiff = lineDirection.newDirection === \"east\" ? -value + pointDistance: value - pointDistance;\r\n if(lineDirection.newDirection === \"east\" ){\r\n if(segmentPoint2.x - xDiff >= biggestLinePoint.x){\r\n return false\r\n } else if(Math.round(segmentPoint2.x) === biggestLinePoint.x){\r\n segmentPoint2.x = biggestLinePoint.x;\r\n return false\r\n }\r\n } else {\r\n if(segmentPoint2.x - xDiff <= smallestLinePoint.x){\r\n return false\r\n } else if(Math.round(segmentPoint2.x) === smallestLinePoint.x){\r\n segmentPoint2.x = smallestLinePoint.x;\r\n return false\r\n }\r\n }\r\n this.movePoint(xDiff, yDiff, segmentPoint2, true);\r\n this.moveMeasurements(segmentPoint2);\r\n }\r\n\r\n break;\r\n case orientation.VERTICAL:\r\n if(!closestLeft && closestRight) {\r\n yDiff = lineDirection.newDirection === \"north\" ? -value + pointDistance: value - pointDistance;\r\n // skip if there is no whitespace\r\n if(lineDirection.newDirection === \"north\" ){\r\n if(segmentPoint1.y - yDiff >= biggestLinePoint.y){\r\n return false\r\n } else if(Math.round(segmentPoint1.y) === biggestLinePoint.y){\r\n segmentPoint1.y = biggestLinePoint.y;\r\n return false\r\n }\r\n } else {\r\n if(segmentPoint1.y - yDiff <= smallestLinePoint.y){\r\n return false\r\n } else if(Math.round(segmentPoint1.y) === smallestLinePoint.y){\r\n segmentPoint1.y = smallestLinePoint.y;\r\n return false\r\n }\r\n }\r\n this.movePoint(xDiff, yDiff, segmentPoint1, true);\r\n this.moveMeasurements(segmentPoint1);\r\n\r\n } else if(closestLeft && !closestRight) {\r\n yDiff = lineDirection.newDirection === \"north\" ? value - pointDistance : -value + pointDistance;\r\n // skip if there is no whitespace and fix round position\r\n if(lineDirection.newDirection === \"north\" ){\r\n if(segmentPoint2.y - yDiff <= smallestLinePoint.y){\r\n return false\r\n } else if(Math.round(segmentPoint2.y) === smallestLinePoint.y){\r\n segmentPoint2.y = smallestLinePoint.y;\r\n return false\r\n }\r\n } else {\r\n if(segmentPoint2.y - yDiff >= biggestLinePoint.y){\r\n return false\r\n } else if(Math.round(segmentPoint2.y) === biggestLinePoint.y){\r\n segmentPoint2.y = biggestLinePoint.y;\r\n return false\r\n }\r\n }\r\n this.movePoint(xDiff, yDiff, segmentPoint2, true);\r\n this.moveMeasurements(segmentPoint2);\r\n }\r\n break;\r\n case orientation.NORTHWEST:\r\n case orientation.SOUTHEAST:\r\n break;\r\n case orientation.NORTHEAST:\r\n case orientation.SOUTHWEST:\r\n break;\r\n }\r\n }\r\n\r\n return false\r\n };\r\n\r\n /**\r\n * @deprecated\r\n */\r\n getLeftRightStopPoint = (point1) => {\r\n let o = this.line.getOrientation(),\r\n lineDirection = this.line.getLineDirection(),\r\n toCornerLength = this.line.to.getArcLength() || this.line.get45CornerLegDistance(),\r\n prevLine = this.line.getParent().getPrevLine(this.line),\r\n fromCornerLength = prevLine.to.getArcLength() || prevLine.get45CornerLegDistance(),\r\n toCornerMargin = 0,\r\n fromCornerMargin = 0,\r\n axis = null,\r\n index = this.miteredPoints.indexOf(point1),\r\n stopPointLeft = null,\r\n stopPointRight = null,\r\n biggestLinePoint = null,\r\n smallestLinePoint = null;\r\n\r\n if (o === orientation.VERTICAL) {\r\n toCornerMargin = lineDirection.newDirection === \"north\" ? -fromCornerLength : -toCornerLength;\r\n fromCornerMargin = lineDirection.newDirection === \"north\" ? +toCornerLength : +fromCornerLength;\r\n biggestLinePoint = this.line.getBiggestYPoint().y + toCornerMargin;\r\n smallestLinePoint = this.line.getSmallestYPoint().y + fromCornerMargin;\r\n axis = y;\r\n } else if(o === orientation.HORIZONTAL) {\r\n toCornerMargin = lineDirection.newDirection === \"east\" ? -toCornerLength : -fromCornerLength;\r\n fromCornerMargin = lineDirection.newDirection === \"east\" ? +fromCornerLength : +toCornerLength;\r\n biggestLinePoint = this.line.getBiggestXPoint().x + toCornerMargin;\r\n smallestLinePoint = this.line.getSmallestXPoint().x + fromCornerMargin;\r\n axis = x;\r\n } else {\r\n //todo\r\n }\r\n\r\n void axis; void biggestLinePoint; void smallestLinePoint;\r\n void index; void stopPointLeft; void stopPointRight;\r\n };\r\n\r\n movePoint = (xDiff, yDiff, point1, moveStopPoints = false) => {\r\n let o = this.line.getOrientation(),\r\n lineDirection = this.line.getLineDirection(),\r\n // toCornerLength = this.line.to.getArcLength() || this.line.get45CornerLegDistance(),\r\n // prevLine = this.line.getParent().getPrevLine(this.line),\r\n // fromCornerLength = prevLine.to.getArcLength() || prevLine.get45CornerLegDistance(),\r\n pointIndex = this.miteredPoints.indexOf(point1),\r\n //toCornerMargin = 0,\r\n //fromCornerMargin = 0,\r\n stopPointLeft = null,\r\n stopPointRight = null,\r\n smallestPointStopped = null,\r\n biggestPointStopped = null,\r\n biggestLinePoint = null,\r\n smallestLinePoint = null\r\n ;\r\n\r\n //do'nt move first and las point\r\n if (pointIndex === 0 || pointIndex === this.miteredPoints.length - 1) {\r\n return []\r\n }\r\n\r\n if (o === orientation.VERTICAL) {\r\n //line biggest and smallest points\r\n biggestLinePoint = Object.assign({}, this.line.getBiggestYPoint().pos);\r\n smallestLinePoint = Object.assign({}, this.line.getSmallestYPoint().pos);\r\n // stop point on overline move\r\n if (lineDirection.newDirection === \"north\" ) {\r\n //toCornerMargin = -fromCornerLength;\r\n //fromCornerMargin = +toCornerLength;\r\n //biggestLinePoint.y += toCornerMargin;\r\n //smallestLinePoint.y += fromCornerMargin;\r\n stopPointLeft = this.miteredPoints[pointIndex + 1] ? this.miteredPoints[pointIndex + 1] : smallestLinePoint;\r\n stopPointRight = this.miteredPoints[pointIndex - 1] ? this.miteredPoints[pointIndex - 1] : biggestLinePoint;\r\n } else {\r\n //toCornerMargin = -toCornerLength;\r\n //fromCornerMargin = +fromCornerLength;\r\n //biggestLinePoint.y += toCornerMargin;\r\n //smallestLinePoint.y += fromCornerMargin;\r\n stopPointLeft = this.miteredPoints[pointIndex - 1] ? this.miteredPoints[pointIndex - 1] : smallestLinePoint;\r\n stopPointRight = this.miteredPoints[pointIndex + 1] ? this.miteredPoints[pointIndex + 1] : biggestLinePoint;\r\n }\r\n\r\n [smallestPointStopped, biggestPointStopped] = this.movePointInOrStop(\r\n point1, 'y', yDiff,\r\n biggestLinePoint.y,\r\n smallestLinePoint.y,\r\n stopPointLeft,\r\n stopPointRight,\r\n moveStopPoints\r\n );\r\n } else if (o === orientation.HORIZONTAL) {\r\n //line biggest and smallest points\r\n biggestLinePoint = Object.assign({}, this.line.getBiggestXPoint().pos);\r\n smallestLinePoint = Object.assign({}, this.line.getSmallestXPoint().pos);\r\n // stop point on overline move if it is not mitered then it should'nt go overline\r\n if (lineDirection.newDirection === \"east\" ) {\r\n //toCornerMargin = -toCornerLength;\r\n //fromCornerMargin = +fromCornerLength;\r\n //biggestLinePoint.x += toCornerMargin;\r\n //smallestLinePoint.x += fromCornerMargin;\r\n stopPointLeft = this.miteredPoints[pointIndex - 1] ? this.miteredPoints[pointIndex - 1] : smallestLinePoint;\r\n stopPointRight = this.miteredPoints[pointIndex + 1] ? this.miteredPoints[pointIndex + 1] : biggestLinePoint;\r\n } else {\r\n //toCornerMargin = -fromCornerLength;\r\n //fromCornerMargin = +toCornerLength;\r\n //biggestLinePoint.x += toCornerMargin;\r\n //smallestLinePoint.x += fromCornerMargin;\r\n stopPointLeft = this.miteredPoints[pointIndex + 1] ? this.miteredPoints[pointIndex + 1] : smallestLinePoint;\r\n stopPointRight = this.miteredPoints[pointIndex - 1] ? this.miteredPoints[pointIndex - 1] : biggestLinePoint;\r\n }\r\n // stop point on overline move\r\n [smallestPointStopped, biggestPointStopped] = this.movePointInOrStop(\r\n point1, 'x', xDiff,\r\n biggestLinePoint.x,\r\n smallestLinePoint.x,\r\n stopPointLeft,\r\n stopPointRight,\r\n moveStopPoints\r\n );\r\n } else {\r\n //todo rotation\r\n // const nextLine = parent.getNextLine(self);\r\n // const prevLine = parent.getPrevLine(self);\r\n // moveDiagonalLine(self, nextLine, prevLine, this.state.movePointDistance, yDiff, o);\r\n // this.state.mouseDownPosition = mousePos;\r\n }\r\n\r\n return [smallestPointStopped, biggestPointStopped]\r\n // self.from = lockPointToCanvas(self.from); // removed locking because of this issue http://jira.mozidev.com/browse/QC-802\r\n // self.to = lockPointToCanvas(self.to);\r\n };\r\n\r\n render = (ctx) => {\r\n if (isDisabledInPopupShouldBeHidden() && isDisabledInPopupWithParents(this)) {\r\n return\r\n }\r\n this.renderTopBlueLine(ctx);\r\n this.renderRuler(ctx);\r\n this.renderLetter(ctx);\r\n //this.renderThickness(ctx);\r\n this.renderHeight(ctx);\r\n this.renderSectionIndex(ctx);\r\n // this.renderMeasurements(ctx);\r\n };\r\n\r\n //blue line between middle points\r\n renderTopBlueLine = (ctx) => {\r\n let renderFrom = this.line.calculateRenderPosition(this.miteredPoints[0]),\r\n renderTo = this.line.calculateRenderPosition(this.miteredPoints[this.miteredPoints.length - 1]);\r\n\r\n ctx.beginPath();\r\n ctx.moveTo(renderFrom.x, renderFrom.y);\r\n ctx.lineTo(renderTo.x, renderTo.y);\r\n ctx.lineWidth = 8;\r\n if(EventManager.getCursor().indexOf(\"delete\") >= 0 && this.line.isHovering() && !this.state.isHoveringPoint) {\r\n ctx.strokeStyle = this.design.deleteFillStyle;\r\n } else {\r\n ctx.strokeStyle = this.design.lineTextColor;\r\n }\r\n ctx.stroke();\r\n ctx.closePath();\r\n };\r\n\r\n renderRuler = (ctx) => {\r\n const pointsToRender = this.miteredPoints.map((point) => {\r\n return this.line.calculateRenderPosition(point);\r\n });\r\n\r\n ctx.beginPath();\r\n pointsToRender.forEach((point, index) => {\r\n let next = index + 1;\r\n if (pointsToRender[next]) {\r\n const [parallelPointFrom, parallelPointTo] = getParallelPoints(point, pointsToRender[next], -this.design.rulerMargin);\r\n this.drawArrow( ctx,\r\n parallelPointFrom.x,\r\n parallelPointFrom.y,\r\n parallelPointTo.x,\r\n parallelPointTo.y\r\n );\r\n }\r\n });\r\n\r\n ctx.lineWidth = 1;\r\n ctx.strokeStyle = this.design.lineTextColor;\r\n ctx.stroke();\r\n ctx.closePath();\r\n };\r\n\r\n // text is rendered from number text\r\n renderHeight = (ctx) => {\r\n let [fromPointWithIndent, toPointWithIndent] = this.line.getLinePointsWithoutCorners(),\r\n renderFrom = getPointField(fromPointWithIndent.x, fromPointWithIndent.y, this),\r\n renderTo = getPointField(toPointWithIndent.x, toPointWithIndent.y, this);\r\n\r\n ctx.beginPath();\r\n\r\n const [parallelPointFrom, parallelPointTo] = getParallelPoints(renderFrom, renderTo, -this.design.heightMargin);\r\n this.drawFlatArrow( ctx,\r\n parallelPointFrom.x,\r\n parallelPointFrom.y,\r\n parallelPointTo.x,\r\n parallelPointTo.y\r\n );\r\n\r\n ctx.lineWidth = 1;\r\n ctx.strokeStyle = this.design.lineTextColor;\r\n ctx.stroke();\r\n ctx.closePath();\r\n };\r\n\r\n renderLetter = (ctx) => {\r\n let fontHeight = this.design.fontHeight,\r\n font = fontHeight + \"px \" + this.design.fontFamily;\r\n\r\n ctx.beginPath();\r\n ctx.font = font;\r\n ctx.textAlign = \"center\";\r\n ctx.fillStyle = this.design.fontColor;\r\n\r\n const pointsToRender = this.miteredPoints.map((point) => {\r\n return this.line.calculateRenderPosition(point);\r\n });\r\n\r\n pointsToRender.forEach((point, index) => {\r\n let next = index + 1;\r\n if (pointsToRender[next]) {\r\n const [parallelPointFrom, parallelPointTo] = getParallelPoints(point, pointsToRender[next], -this.design.letterMargin);\r\n let letter = numToLetter(next);\r\n let midPoint = getMidPoint(parallelPointFrom, parallelPointTo);\r\n let mText = ctx.measureText(letter);\r\n ctx.wrapText(letter, midPoint.x, midPoint.y, mText, fontHeight);\r\n }\r\n });\r\n\r\n ctx.lineWidth = 1;\r\n ctx.strokeStyle = this.design.lineTextColor;\r\n ctx.stroke();\r\n ctx.closePath();\r\n };\r\n\r\n renderThickness = (ctx) => {\r\n let lineDirection = this.line.getLineDirection(),\r\n fontHeight = this.design.fontHeight,\r\n font = fontHeight + \"px \" + this.design.fontFamily,\r\n xMarginLine = 0,\r\n yMarginLine = 0,\r\n xMarginImage = 0,\r\n yMarginImage = 0,\r\n xMarginValue = 0,\r\n yMarginValue = 0,\r\n pointField = {};\r\n void xMarginValue;\r\n void yMarginValue;\r\n\r\n switch (lineDirection.orientation) {\r\n case \"horizontal\": {\r\n yMarginLine = (lineDirection.newDirection === \"west\" ? this.design.thicknessMargin : -this.design.thicknessMargin);\r\n\r\n xMarginImage = (lineDirection.newDirection === \"east\" ? -20 : -20);\r\n yMarginImage = (lineDirection.newDirection === \"east\" ? 0 : -30);\r\n\r\n xMarginValue = (lineDirection.newDirection === \"east\" ? 15 : 15);\r\n yMarginValue = (lineDirection.newDirection === \"east\" ? 16 : -14);\r\n\r\n break;\r\n }\r\n case \"vertical\": {\r\n xMarginLine = (lineDirection.newDirection === \"south\" ? this.design.thicknessMargin: -this.design.thicknessMargin);\r\n\r\n xMarginImage = (lineDirection.newDirection === \"north\" ? 0 : -50);\r\n yMarginImage = (lineDirection.newDirection === \"north\" ? -10 : -10);\r\n\r\n xMarginValue = (lineDirection.newDirection === \"north\" ? 35 : -16);\r\n yMarginValue = (lineDirection.newDirection === \"north\" ? 5 : 6);\r\n break;\r\n }\r\n // todo rotation\r\n case \"NORTHWEST\": { break;}\r\n case \"NORTHEAST\": { break;}\r\n case \"SOUTHWEST\": { break;}\r\n case \"SOUTHEAST\": { break;}\r\n default:\r\n break;\r\n }\r\n\r\n ctx.beginPath();\r\n ctx.font = font;\r\n ctx.textAlign = \"center\";\r\n ctx.fillStyle = this.design.fontColor;\r\n\r\n this.miteredPoints.forEach((point, index) => {\r\n let next = index + 1;\r\n if(this.miteredPoints[next]) {\r\n let midPoint = getMidPoint(\r\n this.line.calculateRenderPosition(point),\r\n this.line.calculateRenderPosition(this.miteredPoints[next])\r\n );\r\n let segment = this.getSegmentBetweenPoints(point, this.miteredPoints[next]);\r\n let thicknessValue = segment.thickness.value;\r\n let mText = ctx.measureText(thicknessValue.toString());\r\n\r\n void mText;\r\n //debugger\r\n pointField.x = midPoint.x + xMarginLine;\r\n pointField.y = midPoint.y + yMarginLine;\r\n\r\n // blue line\r\n ctx.moveTo(pointField.x, pointField.y);\r\n ctx.lineTo(pointField.x - xMarginLine, pointField.y - yMarginLine);\r\n\r\n // thickness image\r\n DrawImage.renderImage('thickness', ctx,\r\n pointField.x + xMarginImage,\r\n pointField.y + yMarginImage,\r\n 8,\r\n 8,\r\n true,\r\n true\r\n );\r\n\r\n // thickness value rendered from NumberText\r\n // ctx.wrapText(\r\n // thicknessValue.toString(),\r\n // pointField.x + xMarginValue,\r\n // pointField.y + yMarginValue,\r\n // mText,\r\n // fontHeight\r\n // );\r\n }\r\n });\r\n\r\n ctx.lineWidth = 1;\r\n ctx.strokeStyle = this.design.lineTextColor;\r\n ctx.stroke();\r\n ctx.closePath();\r\n };\r\n\r\n renderSectionIndexOld = (ctx) => {\r\n let lineDirection = this.line.getLineDirection(),\r\n renderTo = this.line.calculateRenderPosition(this.line.to),\r\n renderFrom = this.line.calculateRenderPosition(this.line.from),\r\n fontHeight = this.design.fontHeight - 3,\r\n font = fontHeight + \"px \" + this.design.fontFamily,\r\n xMargin = 0,\r\n yMargin = 0,\r\n xOffset = 15,\r\n yOffset = 15,\r\n xWidth = 0,\r\n yWidth = 0,\r\n xMarginValue = 0,\r\n yMarginValue = 0,\r\n renderPos;\r\n\r\n const scale = Config.scale;\r\n let text = ('0' + this.sectionIndex).slice(-2);\r\n let mText = ctx.measureText(text);\r\n\r\n void xMargin;\r\n void yMargin;\r\n void scale;\r\n ctx.beginPath();\r\n ctx.font = font;\r\n ctx.textAlign = \"center\";\r\n ctx.fillStyle = this.design.fontColor;\r\n\r\n switch (lineDirection.orientation) {\r\n case \"horizontal\": {\r\n //measurement arrow offset\r\n yWidth = -this.design.sectionArrowWidth / 2;\r\n yMargin = (lineDirection.newDirection === \"east\" ? -this.design.sectionArrowWidth : this.design.sectionArrowWidth);\r\n yOffset = 0;\r\n\r\n // text and value\r\n xMarginValue = (lineDirection.newDirection === \"east\" ? -this.design.sectionIndexMargin: -this.design.sectionIndexMargin);\r\n renderPos = (lineDirection.newDirection === \"east\" ? renderFrom: renderTo);\r\n\r\n //render double circle\r\n RenderFigures.renderDoubleCircle(ctx, {x: renderPos.x + xMarginValue, y: renderPos.y + yMarginValue }, 12, 2);\r\n\r\n //render value\r\n ctx.save();\r\n ctx.translate(renderPos.x + xMarginValue, renderPos.y + yMarginValue);\r\n ctx.rotate(-Math.PI / 2);\r\n ctx.fillStyle = \"#fff\";\r\n ctx.wrapText(text, 2, 4, mText, fontHeight); // (text, x, y - additional offset\r\n ctx.restore();\r\n break;\r\n }\r\n case \"vertical\": {\r\n //measurement arrow offset\r\n xWidth = -this.design.sectionArrowWidth / 2;\r\n xMargin = (lineDirection.newDirection === \"north\" ? -this.design.sectionIndexMargin: this.design.sectionIndexMargin);\r\n xOffset = 0;\r\n\r\n // text and value\r\n yMarginValue = (lineDirection.newDirection === \"north\" ? -this.design.sectionIndexMargin : -this.design.sectionIndexMargin);\r\n renderPos = (lineDirection.newDirection === \"north\" ? renderTo: renderFrom);\r\n\r\n //render double circle\r\n RenderFigures.renderDoubleCircle(ctx,\r\n {x: renderPos.x + xMarginValue, y: renderPos.y + yMarginValue },\r\n 12,\r\n 2\r\n );\r\n\r\n //render value\r\n ctx.fillStyle = \"#fff\";\r\n // (text, +1, +4 - additional number offset\r\n ctx.wrapText(text, renderPos.x + xMarginValue + 1, renderPos.y + yMarginValue + 4, mText, fontHeight);\r\n break;\r\n }\r\n // todo rotation\r\n case \"NORTHWEST\": { break;}\r\n case \"NORTHEAST\": { break;}\r\n case \"SOUTHWEST\": { break;}\r\n case \"SOUTHEAST\": { break;}\r\n default:\r\n break;\r\n }\r\n\r\n //render measurement arrow\r\n this.drawFlatArrow( ctx,\r\n renderPos.x + xMarginValue - xWidth + xOffset,\r\n renderPos.y + yMarginValue - yWidth + yOffset,\r\n renderPos.x + xMarginValue + xWidth + xOffset,\r\n renderPos.y + yMarginValue + yWidth + yOffset\r\n );\r\n\r\n ctx.lineWidth = 1;\r\n ctx.strokeStyle = this.design.lineTextColor;\r\n ctx.stroke();\r\n ctx.closePath();\r\n };\r\n\r\n renderSectionIndex = (ctx) => {\r\n let lineDirection = this.line.getLineDirection(),\r\n midPoint = getMidPoint(this.line.to, this.line.from),\r\n fontHeight = this.design.fontHeight - 3,\r\n font = fontHeight + \"px \" + this.design.fontFamily,\r\n xMarginValue = 0,\r\n yMarginValue = 0,\r\n renderPos = this.line.calculateRenderPosition({\r\n pos: {x: midPoint.x, y: midPoint.y}\r\n });\r\n\r\n const scale = Config.scale;\r\n void scale;\r\n\r\n let text = ('0' + this.sectionIndex).slice(-2);\r\n let mText = ctx.measureText(text);\r\n\r\n ctx.beginPath();\r\n ctx.font = font;\r\n ctx.textAlign = \"center\";\r\n ctx.fillStyle = this.design.fontColor;\r\n\r\n switch (lineDirection.orientation) {\r\n case \"horizontal\": {\r\n // text and value\r\n yMarginValue = (lineDirection.newDirection === \"east\" ? -this.design.sectionIndexMargin: this.design.sectionIndexMargin);\r\n\r\n //render double circle\r\n RenderFigures.renderDoubleCircle(ctx, {x: renderPos.x + xMarginValue, y: renderPos.y + yMarginValue }, 12, 2);\r\n\r\n //render value\r\n ctx.fillStyle = \"#fff\";\r\n // (text, +1, +4 - additional number offset\r\n ctx.wrapText(text, renderPos.x + xMarginValue + 1, renderPos.y + yMarginValue + 4, mText, fontHeight);\r\n break;\r\n }\r\n case \"vertical\": {\r\n // text and value\r\n xMarginValue = (lineDirection.newDirection === \"north\" ? -this.design.sectionIndexMargin : this.design.sectionIndexMargin + fontHeight);\r\n\r\n //render double circle\r\n RenderFigures.renderDoubleCircle(ctx, {x: renderPos.x + xMarginValue, y: renderPos.y + yMarginValue }, 12, 2);\r\n\r\n //render value\r\n ctx.save();\r\n ctx.translate(renderPos.x + xMarginValue, renderPos.y + yMarginValue);\r\n ctx.rotate(-Math.PI / 2);\r\n ctx.fillStyle = \"#fff\";\r\n ctx.wrapText(text, 2, 4, mText, fontHeight); // (text, x, y - additional offset\r\n ctx.restore();\r\n break;\r\n }\r\n // todo rotation\r\n case \"NORTHWEST\": { break;}\r\n case \"NORTHEAST\": { break;}\r\n case \"SOUTHWEST\": { break;}\r\n case \"SOUTHEAST\": { break;}\r\n default:\r\n break;\r\n }\r\n\r\n ctx.lineWidth = 1;\r\n ctx.strokeStyle = this.design.lineTextColor;\r\n ctx.stroke();\r\n ctx.closePath();\r\n };\r\n\r\n drawArrow = (context, fromX, fromY, toX, toY) => {\r\n let headLen = 10, // length of head in pixels\r\n dx = toX - fromX,\r\n dy = toY - fromY,\r\n angle = Math.atan2(dy, dx);\r\n\r\n context.moveTo(fromX, fromY);\r\n context.lineTo(toX, toY);\r\n context.lineTo(toX - headLen * Math.cos(angle - Math.PI / 6), toY - headLen * Math.sin(angle - Math.PI / 6));\r\n context.moveTo(toX, toY);\r\n context.lineTo(toX - headLen * Math.cos(angle + Math.PI / 6), toY - headLen * Math.sin(angle + Math.PI / 6));\r\n\r\n context.moveTo(fromX, fromY);\r\n context.lineTo(fromX + headLen * Math.cos(angle - Math.PI / 6), fromY + headLen * Math.sin(angle - Math.PI / 6));\r\n context.moveTo(fromX, fromY);\r\n context.lineTo(fromX + headLen * Math.cos(angle + Math.PI / 6), fromY + headLen * Math.sin(angle + Math.PI / 6));\r\n };\r\n\r\n drawFlatArrow = (context, fromX, fromY, toX, toY) => {\r\n let headLen = 5, // length of head in pixels\r\n dx = toX - fromX,\r\n dy = toY - fromY,\r\n angle = Math.atan2(dy, dx);\r\n\r\n context.moveTo(fromX, fromY);\r\n context.lineTo(toX, toY);\r\n context.lineTo(toX - headLen * Math.cos(angle - Math.PI / 2), toY - headLen * Math.sin(angle - Math.PI / 2));\r\n context.moveTo(toX, toY);\r\n context.lineTo(toX - headLen * Math.cos(angle + Math.PI / 2), toY - headLen * Math.sin(angle + Math.PI / 2));\r\n\r\n context.moveTo(fromX, fromY);\r\n context.lineTo(fromX + headLen * Math.cos(angle - Math.PI / 2), fromY + headLen * Math.sin(angle - Math.PI / 2));\r\n context.moveTo(fromX, fromY);\r\n context.lineTo(fromX + headLen * Math.cos(angle + Math.PI / 2), fromY + headLen * Math.sin(angle + Math.PI / 2));\r\n };\r\n\r\n onMouseMove = (mousePos, e) => {\r\n void e;\r\n for (const point of this.miteredPoints) {\r\n if(this.isMouseOverPoint(mousePos, point)) {\r\n if (this.state.mouseDown) {\r\n this.movePointWithMouse(mousePos, point);\r\n if (this.type === MITERED_OVERLAY_TYPE.mitered) {\r\n workspace.miteredController.updateSection(this);\r\n } else if (this.type === MITERED_OVERLAY_TYPE.underlayment) {\r\n workspace.underlaymentController.updateSection(this);\r\n }\r\n }\r\n\r\n return this.state.mouseDown;\r\n }\r\n }\r\n };\r\n\r\n isMouseOverPoint = (mousePos, point) => {\r\n this.state.isHoveringPoint = !!point.isOverPointField();\r\n // console.log(\"point\", point.id);\r\n // console.log(\"this.state.hoveredPoint\", this.state.hoveredPoint.id);\r\n // console.log(\"mousePos\", this.state.isHoveringPoint);\r\n return this.state.isHoveringPoint || this.state.mouseDown && this.state.hoveredPoint && point.id === this.state.hoveredPoint.id;\r\n };\r\n\r\n onMouseUp = (mousePos, e) => {\r\n void mousePos;\r\n void e;\r\n if(this.state.mouseDown) {\r\n this.state.mouseDown = false;\r\n this.state.mouseDownPosition = null;\r\n }\r\n };\r\n\r\n onMouseDown = (mousePos, e) => {\r\n void e;\r\n const reduxState = store.getState();\r\n const menuOpened = reduxState.sqftMenuState.menuOpened;\r\n const activeButton = reduxState.sqftMenuState.activeButton;\r\n\r\n if (activeButton === SIDEBAR_NAVIGATION_BUTTONS.edge\r\n || activeButton === SIDEBAR_BUTTONS_MENU.delete\r\n ) {\r\n //do nothing if we want to remove or add edge\r\n } else if (this.state.isHoveringPoint) {\r\n this.state.mouseDown = true;\r\n // this.state.movePointDistance = getPointDistance(this.from, this.to);\r\n //todo move point\r\n this.state.mouseDownPosition = mousePos;\r\n for (const point in this.miteredPoints) {\r\n if (this.miteredPoints[point].isOverPointField(mousePos)) {\r\n this.state.hoveredPoint = this.miteredPoints[point]\r\n }\r\n }\r\n\r\n return true;\r\n } else if (this.line.isHovering() && menuOpened === SIDEBAR_NAVIGATION_BUTTONS.mitered) {\r\n //console.log('line is hovering');\r\n let [closest, secondPoint, isPrev] = this.getPointBetweenCords(mousePos);\r\n let newPoint = this.addPointBetweenPoints(closest, secondPoint, isPrev);\r\n if (isPrev) {\r\n this.addMeasurementBetweenPoints(newPoint, secondPoint);\r\n this.addMeasurementBetweenPoints(closest, newPoint);\r\n } else {\r\n this.addMeasurementBetweenPoints(closest, newPoint);\r\n this.addMeasurementBetweenPoints(newPoint, secondPoint);\r\n }\r\n this.removeMeasurementBetweenPoints(closest, secondPoint, isPrev);\r\n\r\n workspace.miteredController.updateSection(this);\r\n return true;\r\n }\r\n\r\n return false;\r\n };\r\n\r\n onMouseLeave = () => {\r\n this.state.isHoveringPoint = false;\r\n this.state.mouseDown = false;\r\n this.state.hoveredPoint = null;\r\n }\r\n}\r\n","import workspace from \"../../core/workspace\";\r\nimport store from \"./../../../../../../store\";\r\nimport SlabWorkspace from \"./slabWorkspace\";\r\nimport {getPointField} from \"../../../../helpers/sqftHelper\";\r\nimport sqftShape from \"../shapes/sqftShape\";\r\nimport {isDisabledInPopupShouldBeHidden, SHAPE_PART_ID, SQFT_MODE} from \"../../../../constants\";\r\nimport config from \"../../store/sqftConfig\";\r\nimport workspaceControllers from \"../../store/workspaceControllers\";\r\nimport RenderFigures from \"../../helpers/renderFigures\";\r\nimport RenderParts from \"../../helpers/renderParts\";\r\n\r\nexport const renderSlabRightPart = (ctx, isFullRender = false) => {\r\n let slabState = store.getState().sqftSlabState;\r\n let croppedImages = slabState.croppedSlabImages;\r\n let scale = workspace.getScale();\r\n let slabWorkspacePos = SlabWorkspace.getCenter();\r\n let shapes = workspace.getShapes();\r\n\r\n //this will render shapes without rotation\r\n shapes.forEach((shape) => {\r\n if (!(shape instanceof sqftShape)\r\n || shape.rotatedDegreesSlab !== 0\r\n || (isDisabledInPopupShouldBeHidden() && shape.isDisabledInPopup)\r\n || shape.partId === SHAPE_PART_ID.slabPlaceHolder\r\n ) {\r\n return\r\n }\r\n let pos = shape.getRegularPosition();\r\n //let posSlab = shape.shapeSlab.__absolutePos ? shape.getSlabAbsolutePosition() : shape.getSlabPosition();\r\n let posSlab = shape.shapeSlab.getPosition();\r\n let shapeRegularPointField = getPointField(pos.x, pos.y, workspace);\r\n let shapeSlabPointField = getPointField(posSlab.x, posSlab.y, SlabWorkspace);\r\n\r\n let staticOffset = {\r\n x: shapeRegularPointField.x - slabWorkspacePos.x + ctx.canvas.width / 2,\r\n y: shapeRegularPointField.y - slabWorkspacePos.y\r\n };\r\n ctx.save();\r\n !isFullRender ? clearSlabLeftPart(ctx) : null;\r\n\r\n //render borders only for core shapes\r\n ctx.beginPath();\r\n if (shape.partId === SHAPE_PART_ID.seamPiece) {\r\n shape.shapeSlab.renderLinesWithoutStroke(ctx, staticOffset, SQFT_MODE.regular);\r\n ctx.lineWidth = 0;\r\n ctx.strokeStyle = 'rgba(0,0,0,0.0)';\r\n } else {\r\n shape.shapeSlab.renderLinesWithoutStroke(ctx, staticOffset, SQFT_MODE.regular);\r\n //if (isFullRender) {\r\n // console.log(\"scale\", scale);\r\n // console.log(\"ctx.canvas.width / 2\", ctx.canvas.width / 2);\r\n // console.log(\"pos\", pos);\r\n // console.log(\"slabWorkspacePos2\", slabWorkspacePos);\r\n // console.log(\"offset = workspace.getOffset();\", workspace.getOffset());\r\n // console.log(\"shapeRegularPointField\", shapeRegularPointField);\r\n // console.log(\"staticOffset\", staticOffset);\r\n //}\r\n }\r\n ctx.closePath();\r\n ctx.stroke();\r\n\r\n //do not clip shapes with seam (clip only children)\r\n if (shape.isWithShapePieces()) {\r\n ctx.restore();\r\n return\r\n }\r\n ctx.clip();\r\n for (let slabIndex in croppedImages) {\r\n let movableImage = croppedImages[slabIndex];\r\n const movableImagePosition = movableImage.getPosition();\r\n let movableImagePointField = getPointField(movableImagePosition.x, movableImagePosition.y, SlabWorkspace);\r\n let movableImageSize = movableImage.getSize();\r\n\r\n // ctx.translate(\r\n // staticOffset.x + (movableImagePointField.x - shapeSlabPointField.x),\r\n // staticOffset.y + (movableImagePointField.y - shapeSlabPointField.y)\r\n // );\r\n // console.log(\"movableImagePosition\", movableImagePosition);\r\n // console.log(\"movableImage pos\", movableImage.pos);\r\n // console.log(\"posSlab\", posSlab);\r\n // console.log(\"pos\", pos);\r\n // console.log(\"shapeRegularPointField\", shapeRegularPointField);\r\n // console.log(\"movableImagePointField\", movableImagePointField);\r\n // console.log(\"shapeSlabPointField\", shapeSlabPointField);\r\n\r\n // debugger // eslint-disable-line no-debugger\r\n // ctx.rotate(90 * Math.PI / 180);\r\n\r\n ctx.drawImage(\r\n movableImage.getImage(),\r\n //shape.pos.x * scale, shape.pos.y * scale,\r\n ctx.canvas.width / 2 + (movableImagePointField.x - shapeSlabPointField.x + shapeRegularPointField.x) - slabWorkspacePos.x,\r\n (movableImagePointField.y - shapeSlabPointField.y + shapeRegularPointField.y) - slabWorkspacePos.y,\r\n movableImageSize.width * scale,\r\n movableImageSize.height * scale\r\n );\r\n }\r\n ctx.restore();\r\n });\r\n\r\n //this will render shapes with rotation ( it is translate point field to shape center and rotate it with images)\r\n shapes.forEach((shape) => {\r\n if (!(shape instanceof sqftShape)\r\n || shape.rotatedDegreesSlab === 0\r\n || (isDisabledInPopupShouldBeHidden() && shape.isDisabledInPopup)\r\n || shape.partId === SHAPE_PART_ID.slabPlaceHolder\r\n ) {\r\n return\r\n }\r\n let pos = shape.getRegularPosition();\r\n let posSlab = shape.shapeSlab.getPosition();\r\n let shapeRegularPointField = getPointField(pos.x, pos.y, workspace);\r\n let shapeSlabPointField = getPointField(posSlab.x, posSlab.y, SlabWorkspace);\r\n\r\n let staticOffset = {\r\n x: shapeRegularPointField.x - slabWorkspacePos.x + ctx.canvas.width / 2,\r\n y: shapeRegularPointField.y - slabWorkspacePos.y\r\n };\r\n\r\n let shapeCenter = shape.getCenter();\r\n //todo check if this can be used instead of shapeCenter()\r\n //let shapeCenterSlab = ShapeHelper.getCenterPoint(points, true);\r\n //void shapeCenterSlab;\r\n\r\n let shapeCenterOffset = {x: 0, y: 0};\r\n shapeCenterOffset.x = shapeCenter.x * scale\r\n shapeCenterOffset.y = shapeCenter.y * scale\r\n\r\n //console.log(\"pos\", pos);\r\n //console.log(\"shapeRegularPointField\", shapeRegularPointField);\r\n //console.log(\"shapeSlabPointField\", shapeSlabPointField);\r\n //console.log(\"shapeCenter\", shapeCenter);\r\n //console.log(\"staticOffset\", staticOffset);\r\n //console.log(\"shapeCenterOffset\", shapeCenterOffset);\r\n ctx.save();\r\n !isFullRender ? clearSlabLeftPart(ctx) : null;\r\n ctx.translate(staticOffset.x + shapeCenterOffset.x, staticOffset.y + shapeCenterOffset.y);\r\n ctx.rotate(shape.rotatedDegreesSlab * Math.PI / 180);\r\n //render borders only for core shapes\r\n ctx.beginPath();\r\n if (shape.partId === SHAPE_PART_ID.seamPiece) {\r\n shape.shapeSlab.renderLinesWithoutStroke(ctx, {x: -shapeCenterOffset.x, y: -shapeCenterOffset.y}, SQFT_MODE.slab);\r\n ctx.lineWidth = 0;\r\n ctx.strokeStyle = 'rgba(0,0,0,0.0)';\r\n //ctx.lineWidth = 3; //test mode\r\n //ctx.strokeStyle = 'rgba(0,0,0)'; //test mode\r\n } else {\r\n shape.shapeSlab.renderLinesWithoutStroke(ctx, {x: -shapeCenterOffset.x, y: -shapeCenterOffset.y}, SQFT_MODE.slab);\r\n }\r\n ctx.closePath();\r\n ctx.stroke();\r\n\r\n //do not clip shapes with seam (clip only children)\r\n if (shape.isWithShapePieces()) {\r\n ctx.restore();\r\n return\r\n }\r\n ctx.clip();\r\n for (let slabIndex in croppedImages) {\r\n let movableImage = croppedImages[slabIndex];\r\n const movableImagePosition = movableImage.getPosition();\r\n let movableImagePointField = getPointField(movableImagePosition.x, movableImagePosition.y, SlabWorkspace);\r\n let movableImageSize = movableImage.getSize();\r\n\r\n ctx.drawImage(\r\n movableImage.getImage(),\r\n -shapeCenterOffset.x + (movableImagePointField.x - shapeSlabPointField.x),\r\n -shapeCenterOffset.y + (movableImagePointField.y - shapeSlabPointField.y),\r\n movableImageSize.width * scale,\r\n movableImageSize.height * scale\r\n // ctx.canvas.width / 2 + (movableImagePointField.x - shapeSlabPointField.x + shapeRegularPointField.x) - slabWorkspacePos.x,\r\n // (movableImagePointField.y - shapeSlabPointField.y + shapeRegularPointField.y) - slabWorkspacePos.y,\r\n // movableImage.pos.x * scale,\r\n // movableImage.pos.y * scale,\r\n );\r\n }\r\n ctx.restore();\r\n renderDevMode(ctx, shape);\r\n });\r\n};\r\n\r\nconst clearSlabLeftPart = (ctx) => {\r\n ctx.beginPath();\r\n ctx.rect(ctx.canvas.width / 2, 0, ctx.canvas.width, ctx.canvas.height);\r\n ctx.closePath();\r\n ctx.stroke();\r\n ctx.clip();\r\n}\r\n\r\nexport const renderSlabWorkspace = (ctx) => {\r\n drawSlabRightPart(ctx);\r\n drawSlabMidDivider(ctx);\r\n};\r\n\r\nconst drawSlabMidDivider = (ctx) => {\r\n ctx.beginPath();\r\n ctx.strokeStyle = '#d5d5d5';\r\n ctx.lineWidth = 1;\r\n ctx.moveTo(SlabWorkspace.getRightPartWidth(ctx), 0);\r\n ctx.lineTo(SlabWorkspace.getRightPartWidth(ctx), ctx.canvas.height);\r\n ctx.stroke();\r\n};\r\n\r\nconst drawSlabRightPart = (ctx) => {\r\n ctx.fillStyle = '#ffffff';\r\n ctx.rect(SlabWorkspace.getRightPartWidth(ctx), 0, ctx.canvas.width, ctx.canvas.height);\r\n ctx.fill();\r\n};\r\n\r\nconst renderDevMode = (ctx, shape) => {\r\n if (config.isDevMode()) {\r\n // render pos\r\n ctx.save();\r\n ctx.beginPath();\r\n let pf = getPointField(shape.pos.x, shape.pos.y);\r\n ctx.arc(pf.x, pf.y, 5, 0, 2 * Math.PI);\r\n ctx.stroke();\r\n ctx.closePath();\r\n\r\n //render shape center\r\n ctx.beginPath();\r\n let shapeCenter = shape.getCenter();\r\n const pos = getPointField(shapeCenter.x, shapeCenter.y, this);\r\n ctx.arc(pos.x, pos.y, 12, 0, 2 * Math.PI);\r\n\r\n ctx.stroke();\r\n ctx.closePath();\r\n ctx.restore();\r\n }\r\n}\r\n\r\nexport const renderMeasurementsAroundSnappedShapes = (ctx) => {\r\n for (const snappedShapeGroup of workspaceControllers.snappedShapeGroups.getResources()) {\r\n const shapes = workspaceControllers.snappedShapeGroups.getSnappedShapes(snappedShapeGroup);\r\n if (shapes.length > 1) { //we will render only shape group if it has two shapes\r\n const measurementPoints = workspaceControllers.snappedShapeGroups.getMeasurementPoints(snappedShapeGroup);\r\n renderMeasurementArrows(ctx, measurementPoints);\r\n renderMeasurementLength(ctx, measurementPoints);\r\n //console.log(\"measurementPoints\", measurementPoints);\r\n\r\n //this is for the test purposes\r\n // const measurementPoints2 = sqftShapeManager.getShapesContourPointsPointField(shapes);\r\n // console.log(\"measurementPoints2\", measurementPoints2);\r\n // renderMeasurementArrows(ctx, measurementPoints2);\r\n // renderMeasurementLength(ctx, measurementPoints2);\r\n }\r\n }\r\n}\r\n\r\nexport const renderMeasurementArrows = (ctx, measurementPoints) => {\r\n RenderFigures.drawArrowsAroundPoints(ctx, measurementPoints);\r\n}\r\n\r\nexport const renderMeasurementLength = (ctx, measurementPoints) => {\r\n RenderParts.drawMeasurementAroundPoints(ctx, measurementPoints);\r\n}\r\n","class SlabAdditionalShape {\r\n line;\r\n backsplashShapeId;\r\n\r\n constructor(line, backsplashShapeId) {\r\n this.line = line;\r\n this.backsplashShapeId = backsplashShapeId;\r\n }\r\n}\r\n\r\nexport default SlabAdditionalShape;\r\n","import store from \"../../../../../store\";\r\nimport {changeResource, deleteAllResources} from \"../../../../../actions/sqftResourceFunctions\";\r\nimport {deleteAllMiteredSections} from \"../../../../../actions/sqftMiteredFunctions\";\r\nimport workspace from \"../core/workspace\";\r\nimport {RESOURCE_TYPE} from \"../../../constants\";\r\n\r\nconst sqftResourcesManager = {\r\n deleteAllResources: () => {\r\n store.dispatch(deleteAllResources());\r\n },\r\n deleteAllMiteredSections: () => {\r\n const reduxState = store.getState();\r\n const miteredSections = reduxState.sqftMiteredState.miteredSections;\r\n if (miteredSections.length) {\r\n store.dispatch(deleteAllMiteredSections());\r\n }\r\n },\r\n getAttachedToLineResource: (line) => {\r\n return workspace.getAttachedTo(line)\r\n },\r\n updateAttachedToLineResource: (attachedToResource) => {\r\n store.dispatch(changeResource(RESOURCE_TYPE.attachedToLine, attachedToResource));\r\n },\r\n getLineByAttachedItemId: (id) => {\r\n const state = store.getState();\r\n const attachedToLineResources = state.sqftResourceState.attachedToLine;\r\n const attachedItem = attachedToLineResources.find(attachedToLine => attachedToLine.id === id);\r\n if (attachedItem) {\r\n return workspace.getLineById(attachedItem.attachedToId);\r\n }\r\n },\r\n deleteAttachedItemById: (id) => {\r\n const line = sqftResourcesManager.getLineByAttachedItemId(id);\r\n\r\n if (line) {\r\n line.deleteAttachedItem();\r\n }\r\n }\r\n}\r\n\r\nexport default sqftResourcesManager\r\n","import workspace from \"../../workspace\";\r\n\r\nclass ShapeAbsolute {\r\n __shape;\r\n __intersectionPoints = [];\r\n __minLengthToIntersectionPoints;\r\n __absolutePos = null;\r\n __snappedWithShape = null;\r\n __snappedShapeGroup = null;\r\n\r\n constructor(shape) {\r\n this.__shape = shape;\r\n }\r\n setParentId(parentId) {\r\n this.__shape.shapeParent = parentId\r\n }\r\n setRotationDegreesSlab(rotationDegrees) {\r\n this.__shape.rotatedDegreesSlab = rotationDegrees\r\n }\r\n setAbsolutePos = (pos) => {\r\n this.__absolutePos = pos;\r\n };\r\n getAbsolutePosition = () => {\r\n return this.__absolutePos;\r\n };\r\n getIntersectionPoints = () => { return this.__intersectionPoints; };\r\n setIntersectionsPoints = (points) => { this.__intersectionPoints = points; };\r\n\r\n setSnappedWithShape = (shape) => { this.__snappedWithShape = shape}\r\n getSnappedWithShape = () => { return this.__snappedWithShape }\r\n\r\n setSnappedShapeGroup = (shapeGroup) => { this.__snappedShapeGroup = shapeGroup}\r\n getSnappedShapeGroup = () => { return this.__snappedShapeGroup }\r\n\r\n setMinLengthToIntersectionPoints = (length) => {\r\n this.__minLengthToIntersectionPoints = length;\r\n };\r\n\r\n import = (data) => {\r\n if (data.snappedWithShape && data.snappedWithShape.id) {\r\n const snappedWithShape = workspace.getShapeById(data.snappedWithShape.id);\r\n this.setSnappedWithShape(snappedWithShape);\r\n }\r\n\r\n this.setAbsolutePos(data ? data.absolutePosition : null);\r\n this.setIntersectionsPoints(data ? data.intersectionPoints : null);\r\n this.setSnappedShapeGroup(data ? data.snappedShapeGroup : null);\r\n }\r\n export = () => {\r\n const snappedWithShape = this.getSnappedWithShape();\r\n\r\n return {\r\n absolutePosition: this.getAbsolutePosition(),\r\n intersectionPoints: this.getIntersectionPoints(),\r\n snappedWithShape: snappedWithShape ? snappedWithShape.id : null,\r\n snappedShapeGroup: this.getSnappedShapeGroup(),\r\n }\r\n }\r\n}\r\n\r\nexport default ShapeAbsolute\r\n","import {getPointBetweenPoints, getPointDistance, orientation} from \"../helpers/sqftHelper\";\r\n\r\nconst setLinePoints = (movingLine, newFrom, newTo) => {\r\n movingLine.from.x = newFrom.x;\r\n movingLine.from.y = newFrom.y;\r\n movingLine.to.x = newTo.x;\r\n movingLine.to.y = newTo.y;\r\n};\r\n\r\n/**\r\n * Given a three lines detects moving points and sets correct new points X and Y values.\r\n * @param {Object} movingLine current moving line\r\n * @param {Object} nextLine\r\n * @param {Object} prevLine\r\n * @param {number} baseLineDistance -state value, that is overwritten on each mouseDown event\r\n * @param {number} yDiff Y difference of mouse move\r\n * @param {number} lineOrientation movingLine orientation\r\n */\r\nexport default function (\r\n movingLine,\r\n nextLine,\r\n prevLine,\r\n baseLineDistance,\r\n yDiff,\r\n lineOrientation\r\n) {\r\n let newFrom = {}, newTo = {}, diff;\r\n\r\n // 1) move line\r\n switch(lineOrientation) {\r\n case orientation.SOUTHEAST:\r\n case orientation.NORTHEAST:\r\n diff = -yDiff;\r\n break;\r\n case orientation.SOUTHWEST:\r\n case orientation.NORTHWEST:\r\n diff = yDiff;\r\n break;\r\n }\r\n newFrom = getPointBetweenPoints(movingLine.from, prevLine.from, diff);\r\n newTo = getPointBetweenPoints(movingLine.to, nextLine.to, diff);\r\n setLinePoints(movingLine, newFrom, newTo);\r\n const pointDistance2 = getPointDistance(newFrom, newTo);\r\n\r\n // 2) fix points corrections\r\n if (baseLineDistance !== pointDistance2) {\r\n switch(lineOrientation) {\r\n case orientation.SOUTHWEST:\r\n if (pointDistance2 < baseLineDistance) {\r\n const delta = (baseLineDistance - pointDistance2) / 4; //for ex. 26 - 25.4 = 0.6\r\n newFrom = {x: movingLine.from.x + delta, y: movingLine.from.y - delta};\r\n newTo = {x: movingLine.to.x - delta, y: movingLine.to.y + delta};\r\n } else {\r\n const delta = (pointDistance2 - baseLineDistance) / 4; //for ex. 26 - 25.4 = 0.6\r\n newFrom = {x: movingLine.from.x - delta, y: movingLine.from.y + delta};\r\n newTo = {x: movingLine.to.x + delta, y: movingLine.to.y - delta};\r\n }\r\n break;\r\n case orientation.SOUTHEAST:\r\n if (pointDistance2 < baseLineDistance) {\r\n const delta = (baseLineDistance - pointDistance2) / 4; //for ex. 26 - 25.4 = 0.6\r\n newFrom = {x: movingLine.from.x - delta, y: movingLine.from.y - delta};\r\n newTo = {x: movingLine.to.x + delta, y: movingLine.to.y + delta};\r\n } else {\r\n const delta = (pointDistance2 - baseLineDistance) / 4; //for ex. 26 - 25.4 = 0.6\r\n newFrom = {x: movingLine.from.x + delta, y: movingLine.from.y + delta};\r\n newTo = {x: movingLine.to.x - delta, y: movingLine.to.y - delta};\r\n }\r\n break;\r\n case orientation.NORTHEAST:\r\n if (pointDistance2 < baseLineDistance) {\r\n const delta = (baseLineDistance - pointDistance2) / 4; //for ex. 26 - 25.4 = 0.6\r\n newFrom = {x: movingLine.from.x - delta, y: movingLine.from.y + delta};\r\n newTo = {x: movingLine.to.x + delta, y: movingLine.to.y - delta};\r\n } else {\r\n const delta = (pointDistance2 - baseLineDistance) / 4; //for ex. 26 - 25.4 = 0.6\r\n newFrom = {x: movingLine.from.x + delta, y: movingLine.from.y - delta};\r\n newTo = {x: movingLine.to.x - delta, y: movingLine.to.y + delta};\r\n }\r\n break;\r\n case orientation.NORTHWEST:\r\n if (pointDistance2 < baseLineDistance) {\r\n const delta = (baseLineDistance - pointDistance2) / 4; //for ex. 26 - 25.4 = 0.6\r\n newFrom = {x: movingLine.from.x + delta, y: movingLine.from.y + delta};\r\n newTo = {x: movingLine.to.x - delta, y: movingLine.to.y - delta};\r\n } else {\r\n const delta = (pointDistance2 - baseLineDistance) / 4; //for ex. 26 - 25.4 = 0.6\r\n newFrom = {x: movingLine.from.x - delta, y: movingLine.from.y - delta};\r\n newTo = {x: movingLine.to.x + delta, y: movingLine.to.y + delta};\r\n }\r\n break;\r\n default:\r\n break;\r\n }\r\n setLinePoints(movingLine, newFrom, newTo);\r\n }\r\n}\r\n","import {getPointOnTheLine} from \"../../../../../helpers/sqftHelper\";\r\n\r\nexport const mathRound = (value) => Math.round(value * 100) / 100;\r\n\r\nfunction horizontalEastLineExpand(prevLine, nextLine, diff) {\r\n prevLine.from.x = mathRound(prevLine.from.x - diff/2);\r\n prevLine.to.x = mathRound(prevLine.to.x - diff/2);\r\n nextLine.from.x = mathRound(nextLine.from.x + diff/2);\r\n nextLine.to.x = mathRound(nextLine.to.x + diff/2);\r\n if(prevLine.isWithBumpout()) {\r\n prevLine.bumpoutOverlay.moveBumpout(diff / 2, 0);\r\n }\r\n if(nextLine.isWithBumpout()) {\r\n nextLine.bumpoutOverlay.moveBumpout(-diff / 2, 0);\r\n }\r\n if(prevLine.isWithMitered()) {\r\n prevLine.miteredOverlay.moveMitered(diff / 2, 0);\r\n }\r\n if(nextLine.isWithMitered()) {\r\n nextLine.miteredOverlay.moveMitered(-diff / 2, 0);\r\n }\r\n}\r\nfunction horizontalWestLineExpand(prevLine, nextLine, diff) {\r\n prevLine.from.x = mathRound(prevLine.from.x + diff/2);\r\n prevLine.to.x = mathRound(prevLine.to.x + diff/2);\r\n nextLine.from.x = mathRound(nextLine.from.x - diff/2);\r\n nextLine.to.x = mathRound(nextLine.to.x - diff/2);\r\n if(prevLine.isWithBumpout()) {\r\n prevLine.bumpoutOverlay.moveBumpout(-diff / 2, 0);\r\n }\r\n if(nextLine.isWithBumpout()) {\r\n nextLine.bumpoutOverlay.moveBumpout(diff / 2, 0);\r\n }\r\n if(prevLine.isWithBumpout()) {\r\n prevLine.miteredOverlay.moveMitered(-diff / 2, 0);\r\n }\r\n if(nextLine.isWithBumpout()) {\r\n nextLine.miteredOverlay.moveMitered(diff / 2, 0);\r\n }\r\n}\r\nfunction verticalSouthLineExpand(prevLine, nextLine, diff) {\r\n prevLine.from.y = mathRound(prevLine.from.y - diff/2);\r\n prevLine.to.y = mathRound(prevLine.to.y - diff/2);\r\n nextLine.from.y = mathRound(nextLine.from.y + diff/2);\r\n nextLine.to.y = mathRound(nextLine.to.y + diff/2);\r\n if(prevLine.isWithBumpout()) {\r\n prevLine.bumpoutOverlay.moveBumpout(0, diff / 2);\r\n }\r\n if(nextLine.isWithBumpout()) {\r\n nextLine.bumpoutOverlay.moveBumpout(0,-diff / 2);\r\n }\r\n}\r\nfunction verticalNorthLineExpand(prevLine, nextLine, diff) {\r\n prevLine.from.y = mathRound(prevLine.from.y + diff/2);\r\n prevLine.to.y = mathRound(prevLine.to.y + diff/2);\r\n nextLine.from.y = mathRound(nextLine.from.y - diff/2);\r\n nextLine.to.y = mathRound(nextLine.to.y - diff/2);\r\n if(prevLine.isWithBumpout()) {\r\n prevLine.bumpoutOverlay.moveBumpout(0,-diff / 2);\r\n }\r\n if(nextLine.isWithBumpout()) {\r\n nextLine.bumpoutOverlay.moveBumpout(0,diff / 2);\r\n }\r\n}\r\nexport default function(line, diff, isWallsLockMode) {\r\n // console.log(\"line\", line, diff);\r\n const lineDirection = line.getLineDirection();\r\n const shape = line.getParent();\r\n const prevLine = shape.getPrevLine(line);\r\n const nextLine = shape.getNextLine(line);\r\n switch (shape.shapeType) {\r\n case \"square\":\r\n if (lineDirection.orientation === \"horizontal\") {\r\n if (lineDirection.newDirection === \"east\") {\r\n horizontalEastLineExpand(prevLine, nextLine, diff);\r\n } else if (lineDirection.newDirection === \"west\") {\r\n horizontalWestLineExpand(prevLine, nextLine, diff);\r\n }\r\n } else if (lineDirection.orientation === \"vertical\") {\r\n if (lineDirection.newDirection === \"south\") {\r\n verticalSouthLineExpand(prevLine, nextLine, diff);\r\n } else if (lineDirection.newDirection === \"north\") {\r\n verticalNorthLineExpand(prevLine, nextLine, diff);\r\n }\r\n }\r\n break;\r\n case \"wideangle\": {\r\n const rotatedDegrees = line.getParent().rotatedDegrees;\r\n if (lineDirection.orientation === \"horizontal\") {\r\n if (lineDirection.newDirection === \"east\") {\r\n if (rotatedDegrees === 180 || rotatedDegrees === 270) {\r\n prevLine.from.x = mathRound(prevLine.from.x - diff);\r\n prevLine.to.x = mathRound(prevLine.to.x - diff);\r\n } else {\r\n nextLine.from.x = mathRound(nextLine.from.x + diff);\r\n nextLine.to.x = mathRound(nextLine.to.x + diff);\r\n }\r\n } else if (lineDirection.newDirection === \"west\") {\r\n const nextLineDirection = nextLine.getLineDirection();\r\n if (nextLineDirection.newDirection === \"north\") {\r\n if (rotatedDegrees === 90) {\r\n prevLine.from.x = mathRound(prevLine.from.x + diff);\r\n prevLine.to.x = mathRound(prevLine.to.x + diff);\r\n } else if (rotatedDegrees === 180 || rotatedDegrees === 270) {\r\n nextLine.from.x = mathRound(nextLine.from.x - diff);\r\n nextLine.to.x = mathRound(nextLine.to.x - diff);\r\n } else {\r\n horizontalWestLineExpand(prevLine, nextLine, diff);\r\n }\r\n } else {\r\n prevLine.from.x = mathRound(prevLine.from.x + diff);\r\n prevLine.to.x = mathRound(prevLine.to.x + diff);\r\n }\r\n }\r\n } else if (lineDirection.orientation === \"vertical\") {\r\n if (lineDirection.newDirection === \"south\") {\r\n const prevLineDirection = prevLine.getLineDirection();\r\n if (prevLineDirection.newDirection === \"west\") {\r\n nextLine.from.y = mathRound(nextLine.from.y + diff);\r\n nextLine.to.y = mathRound(nextLine.to.y + diff);\r\n } else {\r\n if (rotatedDegrees === 90 || rotatedDegrees === 180) {\r\n prevLine.from.y = mathRound(prevLine.from.y - diff);\r\n prevLine.to.y = mathRound(prevLine.to.y - diff);\r\n } else if (rotatedDegrees === 270) {\r\n nextLine.from.y = mathRound(nextLine.from.y + diff);\r\n nextLine.to.y = mathRound(nextLine.to.y + diff);\r\n } else {\r\n verticalSouthLineExpand(prevLine, nextLine, diff);\r\n }\r\n }\r\n } else if (lineDirection.newDirection === \"north\") {\r\n if (rotatedDegrees === 90 || rotatedDegrees === 180) {\r\n nextLine.from.y = mathRound(nextLine.from.y - diff);\r\n nextLine.to.y = mathRound(nextLine.to.y - diff);\r\n } else {\r\n prevLine.from.y = mathRound(prevLine.from.y + diff);\r\n prevLine.to.y = mathRound(prevLine.to.y + diff);\r\n }\r\n }\r\n } else {\r\n const pointOnTheLineFrom = getPointOnTheLine(line.from, line.to, diff / 2);\r\n const pointOnTheLineTo = getPointOnTheLine(line.to, line.from, diff / 2);\r\n line.to.x = pointOnTheLineTo.x;\r\n line.to.y = pointOnTheLineTo.y;\r\n line.from.x = pointOnTheLineFrom.x;\r\n line.from.y = pointOnTheLineFrom.y;\r\n }\r\n break;\r\n }\r\n case \"horseshoe\": {\r\n const rotatedDegrees = line.getParent().rotatedDegrees;\r\n const prevLineDirection = prevLine.getLineDirection();\r\n const nextLineDirection = nextLine.getLineDirection();\r\n\r\n console.log(\"-------------------------------\");\r\n console.log(\"line\", line);\r\n console.log(\"diff\", diff);\r\n console.log(\"shape.shapeType\", shape.shapeType);\r\n console.log(\"lineDirection.orientation\", lineDirection.orientation);\r\n console.log(\"lineDirection.newDirection\", lineDirection.newDirection);\r\n console.log(\"prevLineDirection.newDirection\", prevLineDirection.newDirection);\r\n console.log(\"nextLineDirection.newDirection\", nextLineDirection.newDirection);\r\n console.log(\"rotatedDegrees\", rotatedDegrees);\r\n if (lineDirection.orientation === \"horizontal\") {\r\n if (lineDirection.newDirection === \"east\") {\r\n if (prevLineDirection.newDirection === \"north\") {\r\n if (rotatedDegrees === 90) {\r\n nextLine.from.x = mathRound(nextLine.from.x + diff);\r\n nextLine.to.x = mathRound(nextLine.to.x + diff);\r\n } else if (rotatedDegrees === 180) {\r\n horizontalEastLineExpand(prevLine, nextLine, diff);\r\n } else if (rotatedDegrees === 270) {\r\n prevLine.from.x = mathRound(prevLine.from.x - diff);\r\n prevLine.to.x = mathRound(prevLine.to.x - diff);\r\n } else {\r\n horizontalEastLineExpand(prevLine, nextLine, diff);\r\n horizontalWestLineExpand(...line.getPairedLines(), diff);\r\n }\r\n } else if (rotatedDegrees === 90) {\r\n nextLine.from.x = mathRound(nextLine.from.x + diff);\r\n nextLine.to.x = mathRound(nextLine.to.x + diff);\r\n } else {\r\n horizontalEastLineExpand(prevLine, nextLine, diff);\r\n horizontalWestLineExpand(...line.getPairedLines(), diff);\r\n }\r\n } else if (lineDirection.newDirection === \"west\") {\r\n if (prevLineDirection.newDirection === \"south\") {\r\n if (rotatedDegrees === 90) {\r\n prevLine.from.x = mathRound(prevLine.from.x + diff);\r\n prevLine.to.x = mathRound(prevLine.to.x + diff);\r\n } else if (rotatedDegrees === 180) {\r\n horizontalWestLineExpand(prevLine, nextLine, diff);\r\n horizontalEastLineExpand(...line.getPairedLines(), diff);\r\n } else if (rotatedDegrees === 270) {\r\n nextLine.from.x = mathRound(nextLine.from.x - diff);\r\n nextLine.to.x = mathRound(nextLine.to.x - diff);\r\n } else {\r\n horizontalWestLineExpand(prevLine, nextLine, diff);\r\n }\r\n } else if (rotatedDegrees === 270) {\r\n nextLine.from.x = mathRound(nextLine.from.x - diff);\r\n nextLine.to.x = mathRound(nextLine.to.x - diff);\r\n } else {\r\n horizontalWestLineExpand(prevLine, nextLine, diff);\r\n horizontalEastLineExpand(...line.getPairedLines(), diff);\r\n }\r\n }\r\n } else if (lineDirection.orientation === \"vertical\") {\r\n if (lineDirection.newDirection === \"south\") {\r\n if (rotatedDegrees === 180) {\r\n prevLine.from.y = mathRound(prevLine.from.y - diff);\r\n prevLine.to.y = mathRound(prevLine.to.y - diff);\r\n } else {\r\n if (nextLineDirection.newDirection === \"west\") {\r\n if (rotatedDegrees === 270) {\r\n verticalSouthLineExpand(prevLine, nextLine, diff);\r\n verticalNorthLineExpand(...line.getPairedLines(), diff);\r\n } else {\r\n nextLine.from.y = mathRound(nextLine.from.y + diff);\r\n nextLine.to.y = mathRound(nextLine.to.y + diff);\r\n }\r\n } else {\r\n verticalSouthLineExpand(prevLine, nextLine, diff);\r\n verticalNorthLineExpand(...line.getPairedLines(), diff);\r\n }\r\n }\r\n } else if (lineDirection.newDirection === \"north\") {\r\n if (prevLineDirection.newDirection === \"west\") {\r\n if (rotatedDegrees === 90) {\r\n verticalNorthLineExpand(prevLine, nextLine, diff);\r\n verticalSouthLineExpand(...line.getPairedLines(), diff);\r\n } else if (rotatedDegrees === 180) {\r\n nextLine.from.y = mathRound(nextLine.from.y - diff);\r\n nextLine.to.y = mathRound(nextLine.to.y - diff);\r\n } else {\r\n prevLine.from.y = mathRound(prevLine.from.y + diff);\r\n prevLine.to.y = mathRound(prevLine.to.y + diff);\r\n }\r\n } else if (rotatedDegrees === 180) {\r\n nextLine.from.y = mathRound(nextLine.from.y - diff);\r\n nextLine.to.y = mathRound(nextLine.to.y - diff);\r\n } else {\r\n verticalNorthLineExpand(prevLine, nextLine, diff);\r\n verticalSouthLineExpand(...line.getPairedLines(), diff);\r\n }\r\n }\r\n } else {\r\n const pointOnTheLineFrom = getPointOnTheLine(line.from, line.to, diff / 2);\r\n const pointOnTheLineTo = getPointOnTheLine(line.to, line.from, diff / 2);\r\n line.to.x = pointOnTheLineTo.x;\r\n line.to.y = pointOnTheLineTo.y;\r\n line.from.x = pointOnTheLineFrom.x;\r\n line.from.y = pointOnTheLineFrom.y;\r\n }\r\n break;\r\n }\r\n default: {\r\n if (isWallsLockMode) {\r\n const prevPrevLine = shape.getPrevLine(prevLine);\r\n const nextNextLine = shape.getNextLine(nextLine);\r\n const prevPrevLineDirection = prevPrevLine.getLineDirection();\r\n const nextNextLineDirection = nextNextLine.getLineDirection();\r\n\r\n const pointOnTheLineFrom = getPointOnTheLine(line.from, line.to, diff / 2);\r\n const pointOnTheLineTo = getPointOnTheLine(line.to, line.from, diff / 2);\r\n const deltaX = pointOnTheLineFrom.x - line.from.x;\r\n const deltaY = pointOnTheLineFrom.y - line.from.y;\r\n\r\n //move line point\r\n line.to.x = pointOnTheLineTo.x;\r\n line.to.y = pointOnTheLineTo.y;\r\n line.from.x = pointOnTheLineFrom.x;\r\n line.from.y = pointOnTheLineFrom.y;\r\n\r\n //move prevLine point\r\n prevLine.from.x += deltaX;\r\n prevLine.from.y += deltaY;\r\n // return prevLine coordinate back to its axis if the line was\r\n if (prevPrevLineDirection.orientation === \"horizontal\") {\r\n prevLine.from.y -= deltaY;\r\n }\r\n if (prevPrevLineDirection.orientation === \"vertical\") {\r\n prevLine.from.x -= deltaX;\r\n }\r\n\r\n // move nextLine point\r\n nextLine.to.x -= deltaX;\r\n nextLine.to.y -= deltaY;\r\n // return nextLine coordinate back to its axis if the line was\r\n if (nextNextLineDirection.orientation === \"horizontal\") {\r\n nextLine.to.y += deltaY;\r\n }\r\n if (nextNextLineDirection.orientation === \"vertical\") {\r\n nextLine.to.x += deltaX;\r\n }\r\n\r\n } else {\r\n const pointOnTheLineFrom = getPointOnTheLine(line.from, line.to, diff / 2);\r\n const pointOnTheLineTo = getPointOnTheLine(line.to, line.from, diff / 2);\r\n line.to.x = pointOnTheLineTo.x;\r\n line.to.y = pointOnTheLineTo.y;\r\n line.from.x = pointOnTheLineFrom.x;\r\n line.from.y = pointOnTheLineFrom.y;\r\n }\r\n }\r\n }\r\n}\r\n\r\nexport const getMaxResizeWidth = (line) => {\r\n const shape = line.getParent();\r\n switch (shape.shapeType) {\r\n case \"square\":\r\n case \"wideangle\":\r\n default:\r\n break;\r\n case \"horseshoe\":\r\n // const prevLineDirection = prevLine.getLineDirection();\r\n // const nextLineDirection = nextLine.getLineDirection();\r\n // const rotatedDegrees = line.getParent().rotatedDegrees;\r\n // if (lineDirection.orientation === \"horizontal\") {\r\n // if (lineDirection.newDirection === \"east\") {\r\n // if (prevLineDirection.orientation === \"vertical\" && prevLineDirection.newDirection === \"south\"\r\n // && nextLineDirection.orientation === \"vertical\" && nextLineDirection.newDirection === \"north\"\r\n // //&& rotatedDegrees !== 180\r\n // ) {\r\n // const maxRightX = shape.getNextLine(nextLine).to.x;\r\n // const maxLeftX = shape.getPrevLine(prevLine).from.x;\r\n // return maxRightX - maxLeftX - 2; // 1 per each line, line can't be 0\r\n // }\r\n // } else if (lineDirection.newDirection === \"west\") {\r\n // if (prevLineDirection.orientation === \"vertical\" && prevLineDirection.newDirection === \"north\"\r\n // && nextLineDirection.orientation === \"vertical\" && nextLineDirection.newDirection === \"south\"\r\n // //&& rotatedDegrees !== 0\r\n // ) {\r\n // const maxRightX = shape.getPrevLine(prevLine).from.x;\r\n // const maxLeftX = shape.getNextLine(nextLine).to.x;\r\n // return maxRightX - maxLeftX - 2; // 1 per each line, line can't be 0\r\n // }\r\n // }\r\n // } else if (lineDirection.orientation === \"vertical\") {\r\n // if (lineDirection.newDirection === \"south\") {\r\n // if (prevLineDirection.orientation === \"horizontal\" && prevLineDirection.newDirection === \"west\"\r\n // && nextLineDirection.orientation === \"horizontal\" && nextLineDirection.newDirection === \"east\"\r\n // //&& rotatedDegrees !== 90\r\n // ) {\r\n // const maxTopY = shape.getPrevLine(prevLine).from.y;\r\n // const maxBottomY = shape.getNextLine(nextLine).to.y;\r\n // return maxBottomY - maxTopY - 2; // 1 per each line, line can't be 0\r\n // }\r\n // } else if (lineDirection.newDirection === \"north\") {\r\n // if (prevLineDirection.orientation === \"horizontal\" && prevLineDirection.newDirection === \"east\"\r\n // && nextLineDirection.orientation === \"horizontal\" && nextLineDirection.newDirection === \"west\"\r\n // // && rotatedDegrees !== 270\r\n // ) {\r\n // const maxTopY = shape.getNextLine(nextLine).to.y;\r\n // const maxBottomY = shape.getPrevLine(prevLine).from.y;\r\n // return maxBottomY - maxTopY - 2; // 1 per each line, line can't be 0\r\n // }\r\n // }\r\n // }\r\n break;\r\n }\r\n return \"9999\";\r\n};\r\n","import point from \"../point\";\r\nimport line from \"../line\";\r\nimport config from \"../../../store/sqftConfig\";\r\n\r\nconst RECTANGLE_WIDTH = 150;\r\nconst RECTANGLE_HEIGHT = 26;\r\nconst RECTANGLE_HEIGHT_METRIC = 23.62;\r\n\r\nexport default function(rectangleWidth = RECTANGLE_WIDTH, rectangleHeight = 0) {\r\n let points;\r\n if (rectangleHeight === 0) {\r\n rectangleHeight = config.measureUnit === \"Imperial\" ? RECTANGLE_HEIGHT : RECTANGLE_HEIGHT_METRIC;\r\n }\r\n\r\n points = [\r\n new point(0, 0, \"lefttop\"),\r\n new point(rectangleWidth, 0, \"righttop\"),\r\n new point(rectangleWidth, rectangleHeight, \"rightbottom\"),\r\n new point(0, rectangleHeight, \"leftbottom\")\r\n ];\r\n\r\n return [\r\n new line(points[0], points[1]),\r\n new line(points[1], points[2]),\r\n new line(points[2], points[3]),\r\n new line(points[3], points[0])\r\n ];\r\n}\r\n","import Label from \"../../shapes/overlays/label\";\r\nimport {getShapeFeatureId} from \"../../../../../helpers/featureHelper\";\r\n\r\nconst SHAPE_LABELS = ['center_island_countertop', 'countertop'];\r\nexport const updateShape = (partId, shape, wizardGroup = null) => {\r\n shape.setPartId(partId);\r\n shape.setFeatureId(getShapeFeatureId(partId));\r\n if (!SHAPE_LABELS.includes(partId)) {\r\n shape.setType(partId);\r\n } else {\r\n shape.setType(undefined);\r\n }\r\n if (wizardGroup) {\r\n shape.setProperty(\"fromWizardGroupId\", wizardGroup.id);\r\n }\r\n};\r\n\r\nexport const initLabel = (labelText, partId, shape) => {\r\n let firstShapeLine = shape.getLines()[0];\r\n\r\n if(firstShapeLine.labelOverlay !== null) {\r\n firstShapeLine.labelOverlay.setLabelText(labelText);\r\n } else {\r\n firstShapeLine.labelOverlay = new Label();\r\n firstShapeLine.labelOverlay.init(firstShapeLine, labelText, partId);\r\n }\r\n};\r\n\r\nexport const initTitle = (labelText, partId, shape) => {\r\n let thirdShapeLine = shape.getLines()[2];\r\n thirdShapeLine.titleOverlay = new Label({\r\n labelTextColor: 'rgba(165, 174, 183, 0.66)',\r\n isTitle: true,\r\n lineOffset: 20\r\n });\r\n thirdShapeLine.titleOverlay.init(thirdShapeLine, labelText, partId);\r\n};\r\n","import EventManager from \"../store/sqftEventManager\";\r\nimport PointV2, {CORE_POINT_LAYOUTS} from \"../core/shapes/pointV2\";\r\nimport workspace from \"../core/workspace\";\r\nimport sqftConfig from \"../store/sqftConfig\";\r\nimport {\r\n getAngleRelativeToTheHorizontalAxis,\r\n getMousePositionOnField,\r\n getPointDistance\r\n} from \"../../../helpers/sqftHelper\";\r\n\r\n/**\r\n * @return {PointV2}\r\n */\r\nexport const getFreeDrawPoint = (pos) => {\r\n let pointState = {\r\n priority: EventManager.priorities.BOX_POINT,\r\n movable: true,\r\n isCentered: true,\r\n isResizedByPoint: false,\r\n isScaledByPoint: false,\r\n isVisibleOnHover: false\r\n };\r\n let pointDesign = {\r\n radius: 10,\r\n lineWidth: 1,\r\n layout: CORE_POINT_LAYOUTS.black\r\n };\r\n let wPos = workspace.getPosition();\r\n let scale = sqftConfig.scale;\r\n let offset = {\r\n x: (pos.x + wPos.x) / scale,\r\n y: (pos.y + wPos.y) / scale\r\n };\r\n\r\n return new PointV2(offset.x, offset.y, workspace, pointState, pointDesign);\r\n}\r\n\r\nexport const getLockedPoint = (existingPoint, pos, lockedAngleStep) => {\r\n const newPoint = getFreeDrawPoint(pos);\r\n const lockedPosition = getLockPointPos(existingPoint, lockedAngleStep);\r\n const lockedPositionOnField = getMousePositionOnField(lockedPosition.x, lockedPosition.y);\r\n newPoint.setPosition(lockedPositionOnField);\r\n\r\n return newPoint\r\n}\r\n\r\n/**\r\n * works only for 90 deg angle\r\n * @param pointV2\r\n * @param angleStep\r\n * @param mousePos\r\n * @return {{x: int, y: int}}\r\n */\r\nexport const getLockPointPos = (pointV2, angleStep = 90, mousePos = EventManager.LastKnownMousePos) => {\r\n const pointV2PointField = pointV2.getPointField();\r\n\r\n let rotateToMouseAngle = getAngleRelativeToTheHorizontalAxis(mousePos, pointV2PointField);\r\n let lineLength = getPointDistance(pointV2PointField, mousePos);\r\n const closestAngle = Math.round(rotateToMouseAngle / angleStep) * angleStep;\r\n const angleRad = (closestAngle * Math.PI) / 180;\r\n\r\n return {\r\n x: pointV2PointField.x + lineLength * Math.cos(angleRad),\r\n y: pointV2PointField.y + lineLength * Math.sin(angleRad)\r\n };\r\n};\r\n","import uuid from \"uuid\";\r\nimport _ from 'lodash';\r\n\r\nimport {pnpolyArray} from \"../../../../../lib/pnpoly\";\r\nimport {\r\n getParallelPoints,\r\n getPointBetweenPoints, getPointOnTheLine, isInnerCorner,\r\n measureDistanceToInches\r\n} from \"../../../../../helpers/sqftHelper\";\r\nimport sqftConfig from \"../../../store/sqftConfig\";\r\nimport store from \"../../../../../../../store\";\r\nimport {deleteResourceAttachedTo} from \"../../../../../../../actions/sqftResourceFunctions\";\r\nimport {RESOURCE_TYPE} from \"../../../../../constants\";\r\nimport workspace from \"../../workspace\";\r\nimport MiteredController from \"../../controls/mitered\";\r\nimport {addMiteredSection} from \"../../../../../../../actions/sqftMiteredFunctions\";\r\n\r\nexport default class LineCorner {\r\n\r\n line;\r\n id;\r\n _state = {\r\n mouseDown: false,\r\n isHovering: false,\r\n isCornerLineHovering: false,\r\n withEdge: false,\r\n withBacksplash: false,\r\n withWall: false,\r\n withId: null,\r\n backsplashHeight: null,\r\n isWithMitered: false,\r\n };\r\n attachedShape = null;\r\n miteredOverlay = null;\r\n design = {\r\n additionalOutlineHoverWidth: 3,\r\n };\r\n\r\n constructor(line) {\r\n this.line = line;\r\n this.id = uuid.v4(); //line.id;\r\n }\r\n\r\n get state() {\r\n return this._state;\r\n }\r\n\r\n set state(value) {\r\n this._state = value;\r\n }\r\n\r\n isWithMitered = () => {\r\n return this.state.isWithMitered\r\n }\r\n\r\n getAttachedShape() {\r\n return this.attachedShape;\r\n }\r\n\r\n getAttachedItems() {\r\n let isAnyItemsAttached = false;\r\n for (const attachedItemKey in this._state.attachedItems) {\r\n if (this._state.attachedItems[attachedItemKey]) {\r\n isAnyItemsAttached = true\r\n }\r\n }\r\n return this._state.withEdge\r\n || this._state.withBacksplash\r\n || this._state.withWall\r\n || this._state.withId\r\n || isAnyItemsAttached\r\n }\r\n\r\n deleteAttachedItem = () => {\r\n this.state.withEdge = false;\r\n this.state.withBacksplash = false;\r\n this.state.withWall = false;\r\n this.state.withId = null;\r\n this.state.attachedShape = null;\r\n store.dispatch(deleteResourceAttachedTo(RESOURCE_TYPE.attachedToLine, this));\r\n //this.state.overlay.removeLineText(); // todo\r\n };\r\n\r\n getLength(){\r\n return this.line.to.angle\r\n }\r\n\r\n getLineLength() {\r\n return this.line.addDecimalToLength(measureDistanceToInches(this.line.to.angle));\r\n }\r\n\r\n getLineLengthMm() {\r\n return measureDistanceToInches(this.line.to.angle).millimeters;\r\n }\r\n\r\n getParent() {\r\n return this.line.getParent()\r\n }\r\n\r\n addEdgeToCornerLine = (edgeName, id) => {\r\n this.state.withEdge = true;\r\n this.state.withBacksplash = false;\r\n this.state.withWall = false;\r\n this.state.withId = id;\r\n\r\n //self.overlay.renderEdgeText(edgeName); //todo\r\n };\r\n\r\n addBacksplashToCornerLine = (backsplashName, type, featureId, backsplashHeight) => {\r\n if (type === \"wall\") {\r\n this.state.withWall = true;\r\n this.state.withBacksplash = false;\r\n } else {\r\n this.state.withBacksplash = true;\r\n this.state.withWall = false;\r\n }\r\n this.state.withEdge = false;\r\n this.state.withId = featureId;\r\n this.state.backsplashHeight = backsplashHeight;\r\n //self.overlay.renderBacksplashText(backsplashName, type); //todo\r\n };\r\n\r\n addMiteredToCornerLine = () => {\r\n for (const attachedItemKey in state.attachedItems) {\r\n this.state.attachedItems[attachedItemKey] = false\r\n }\r\n if (!this.state.isWithMitered) {\r\n this.deleteAttachedItem();\r\n //if (this.getOrientation() === orientation.VERTICAL || this.getOrientation() === orientation.HORIZONTAL) {\r\n this.state.isWithMitered = true;\r\n if (workspace.miteredController === null) {\r\n workspace.miteredController = new MiteredController();\r\n }\r\n this.miteredOverlay = workspace.miteredController.createMiteredOverlay(this);\r\n this.miteredOverlay.init();\r\n\r\n return this.miteredOverlay;\r\n }\r\n\r\n return this.miteredOverlay\r\n };\r\n\r\n updateCornerHoverState(mousePos){\r\n this.state.isHovering = false;\r\n this.state.isCornerLineHovering = false;\r\n\r\n if(this.line.to.angle > 0 && this.isMouseOverAngle(mousePos)) {\r\n //console.log('mouse over outline angle');\r\n this.state.isHovering = true;\r\n }\r\n\r\n if(this.line.to.angle > 0 && this.isMouseOverCornerLine(mousePos)) {\r\n //console.log('mouse over angle purple line');\r\n this.state.isCornerLineHovering = true;\r\n }\r\n }\r\n\r\n export() {\r\n return {\r\n id: this.id,\r\n _state: _.clone(this._state),\r\n miteredOverlay: this.miteredOverlay ? this.miteredOverlay.export() : null,\r\n }\r\n }\r\n\r\n import(data) {\r\n this.id = data.id;\r\n this._state = data._state;\r\n if (data.miteredOverlay) {\r\n //addMiteredToLine\r\n if (workspace.miteredController === null) {\r\n workspace.miteredController = new MiteredController();\r\n }\r\n this.miteredOverlay = workspace.miteredController.createMiteredOverlay(this);\r\n this.miteredOverlay.import(this, data.mitered);\r\n this.state.isWithMitered = true;\r\n store.dispatch(addMiteredSection(this.miteredOverlay));\r\n }\r\n }\r\n\r\n isMouseOverAngle(mousePos) {\r\n //console.log('state.angleLinePoints', state.angleLinePoints);\r\n let field = this.getOutlineAngleLineField();\r\n let isHovering = pnpolyArray(field, mousePos)\r\n || pnpolyArray([field[0], field[2], field[1], field[3]], mousePos);\r\n\r\n return isHovering || this.state.mouseDown;\r\n }\r\n\r\n isMouseOverCornerLine(mousePos) {\r\n let field = this.getAngleLineField();\r\n let isHovering = pnpolyArray(field, mousePos)\r\n || pnpolyArray([field[0], field[2], field[1], field[3]], mousePos);\r\n\r\n return isHovering || this.state.mouseDown ;\r\n }\r\n\r\n getAngleLineField() {\r\n const angleLinePoints = this.getAnglePoints();\r\n const design = this.line.getDesign();\r\n let lineField;\r\n\r\n if( angleLinePoints.cordCornerFrom === undefined ) {\r\n return {}\r\n }\r\n\r\n let outlineMargin = design.outlineWidth + this.design.additionalOutlineHoverWidth;\r\n\r\n // line /\r\n if(angleLinePoints.cordCornerFrom.y < angleLinePoints.cordCornerTo.y && angleLinePoints.cordCornerFrom.x > angleLinePoints.cordCornerTo.x\r\n || angleLinePoints.cordCornerFrom.y > angleLinePoints.cordCornerTo.y && angleLinePoints.cordCornerFrom.x < angleLinePoints.cordCornerTo.x\r\n ){\r\n lineField = [\r\n [angleLinePoints.cordCornerFrom.x + outlineMargin, angleLinePoints.cordCornerFrom.y + outlineMargin],\r\n [angleLinePoints.cordCornerTo.x + outlineMargin, angleLinePoints.cordCornerTo.y + outlineMargin],\r\n [angleLinePoints.cordCornerFrom.x - outlineMargin, angleLinePoints.cordCornerFrom.y - outlineMargin],\r\n [angleLinePoints.cordCornerTo.x - outlineMargin, angleLinePoints.cordCornerTo.y - outlineMargin],\r\n ];\r\n // line \\\r\n } else {\r\n lineField = [\r\n [angleLinePoints.cordCornerTo.x + outlineMargin, angleLinePoints.cordCornerTo.y - outlineMargin],\r\n [angleLinePoints.cordCornerFrom.x + outlineMargin, angleLinePoints.cordCornerFrom.y - outlineMargin],\r\n [angleLinePoints.cordCornerTo.x - outlineMargin, angleLinePoints.cordCornerTo.y + outlineMargin],\r\n [angleLinePoints.cordCornerFrom.x - outlineMargin, angleLinePoints.cordCornerFrom.y + outlineMargin],\r\n ];\r\n }\r\n\r\n return lineField\r\n }\r\n\r\n getOutlineAngleLineField() {\r\n const angleLinePoints = this.getAnglePoints();\r\n const design = this.line.getDesign();\r\n let lineField;\r\n\r\n if( angleLinePoints.cord1 === undefined ) {\r\n return {}\r\n }\r\n\r\n let outlineMargin = design.outlineWidth + this.design.additionalOutlineHoverWidth;\r\n\r\n // line /\r\n if(angleLinePoints.cord2.y < angleLinePoints.cord3.y && angleLinePoints.cord2.x > angleLinePoints.cord3.x\r\n || angleLinePoints.cord2.y > angleLinePoints.cord3.y && angleLinePoints.cord2.x < angleLinePoints.cord3.x\r\n ){\r\n lineField = [\r\n [angleLinePoints.cord2.x + outlineMargin, angleLinePoints.cord2.y + outlineMargin],\r\n [angleLinePoints.cord3.x + outlineMargin, angleLinePoints.cord3.y + outlineMargin],\r\n [angleLinePoints.cord2.x - outlineMargin, angleLinePoints.cord2.y - outlineMargin],\r\n [angleLinePoints.cord3.x - outlineMargin, angleLinePoints.cord3.y - outlineMargin],\r\n ];\r\n // line \\\r\n } else {\r\n lineField = [\r\n [angleLinePoints.cord3.x + outlineMargin, angleLinePoints.cord3.y - outlineMargin],\r\n [angleLinePoints.cord2.x + outlineMargin, angleLinePoints.cord2.y - outlineMargin],\r\n [angleLinePoints.cord3.x - outlineMargin, angleLinePoints.cord3.y + outlineMargin],\r\n [angleLinePoints.cord2.x - outlineMargin, angleLinePoints.cord2.y + outlineMargin],\r\n ];\r\n }\r\n\r\n return lineField\r\n }\r\n\r\n getAnglePoints() {\r\n const lineDirection = this.line.getParent().getAngleDirection(this.line),\r\n renderTo = this.line.calculateRenderPosition(this.line.to),\r\n renderFrom = this.line.calculateRenderPosition(this.line.from),\r\n nextLine = this.line.getParent().getNextLine(this.line),\r\n nextLineRenderTo = nextLine.calculateRenderPosition(nextLine.to),\r\n design = this.line.getDesign();\r\n\r\n let angleLinePoints = {};\r\n\r\n switch (lineDirection.orientation) {\r\n case \"horizontal\":\r\n case \"vertical\":\r\n case \"NORTHWEST\":\r\n case \"NORTHEAST\":\r\n case \"SOUTHWEST\":\r\n case \"SOUTHEAST\": {\r\n nextLine.setLinePoints();\r\n if (this.line.drawLineTo === undefined || this.line.drawLineFrom === undefined) {\r\n this.line.setLinePoints();\r\n }\r\n\r\n const cord1 = this.line.drawLineTo;\r\n const cord4 = getPointOnTheLine(nextLine.drawLineFrom, nextLine.drawLineTo, design.outlineMargin); // +design.outlineMargin is to prevent overlapping\r\n\r\n // purple corner line\r\n // const renderTo = this.line.calculateRenderPosition(this.line.to);\r\n // const renderFrom = this.line.calculateRenderPosition(this.line.from);\r\n // const radiusMultiplier = Math.sqrt( Math.pow(this.getLength(), 2) * 2) * sqftConfig.scale;\r\n // const nextLineRenderTo = this.line.calculateRenderPosition(nextLine.to);\r\n\r\n const radiusMultiplier = Math.sqrt( Math.pow(this.line.to.angle, 2) * 2);\r\n const radius = radiusMultiplier * sqftConfig.scale;\r\n const isLineCornerInner = isInnerCorner(this.line.getParent(), renderFrom, renderTo, nextLineRenderTo);\r\n const pointIndent = isLineCornerInner ? 4 : -4;\r\n const pointOnTheBlueLine = getPointBetweenPoints(renderTo, renderFrom, radius / 2 + pointIndent);\r\n const pointOnTheBlueNextLine = getPointBetweenPoints(renderTo, nextLineRenderTo, radius / 2 + pointIndent);\r\n const [cord2] = getParallelPoints(renderFrom, pointOnTheBlueLine,-design.outlineMargin);\r\n const [cord3] = getParallelPoints(nextLineRenderTo, pointOnTheBlueNextLine, design.outlineMargin);\r\n\r\n const cordCornerIndent = isLineCornerInner && this.line.to.angle < design.outlineMargin\r\n ? 0\r\n : -3;\r\n const cordCornerFrom = getPointOnTheLine(cord2, cord3, cordCornerIndent * sqftConfig.scale); // set offset from corner\r\n const cordCornerTo = getPointOnTheLine(cord3, cord2, cordCornerIndent * sqftConfig.scale); // set offset from corner\r\n // v2\r\n //let [cordCornerTo, cordCornerFrom] = getParallelPoints(pointOnTheBlueLine, pointOnTheBlueNextLine, -9);\r\n\r\n angleLinePoints = {\r\n cord1: {\r\n x: cord1.x,\r\n y: cord1.y\r\n },\r\n cord2: {\r\n x: cord2.x,\r\n y: cord2.y\r\n },\r\n cord3: {\r\n x: cord3.x,\r\n y: cord3.y\r\n },\r\n cord4: {\r\n x: cord4.x,\r\n y: cord4.y\r\n },\r\n cordCornerFrom: {\r\n x: cordCornerFrom.x,\r\n y: cordCornerFrom.y\r\n },\r\n cordCornerTo: {\r\n x: cordCornerTo.x,\r\n y: cordCornerTo.y\r\n }\r\n };\r\n break;\r\n }\r\n default:\r\n break;\r\n }\r\n //wtf?\r\n angleLinePoints.cord2.width = sqftConfig.fieldWidth;\r\n angleLinePoints.cord3.width = sqftConfig.fieldWidth;\r\n angleLinePoints.cord2.height = sqftConfig.fieldWidth;\r\n angleLinePoints.cord3.height = sqftConfig.fieldWidth;\r\n\r\n return angleLinePoints;\r\n }\r\n}\r\n","import React, { Component } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { connect } from \"react-redux\";\r\nimport {FormattedMessage} from \"react-intl\";\r\n\r\nclass UiSelect extends Component {\r\n\r\n static propTypes = {\r\n type: PropTypes.number,\r\n selectItems: PropTypes.array.isRequired,\r\n itemClick: PropTypes.func,\r\n valueText: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),\r\n value: PropTypes.any,\r\n withCheckboxes: PropTypes.bool,\r\n className: PropTypes.string,\r\n };\r\n\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n toggle: false,\r\n };\r\n }\r\n\r\n componentWillUnmount() {\r\n window.removeEventListener('click', this.handleWrapperBlur);\r\n }\r\n\r\n handleToggleDropdown = () => {\r\n this.setState({\r\n toggle: !this.state.toggle\r\n }, () => {\r\n setTimeout(() => {\r\n this.state.toggle\r\n ? window.addEventListener('click', this.handleWrapperBlur)\r\n : window.removeEventListener('click', this.handleWrapperBlur)\r\n }, 0)\r\n })\r\n };\r\n\r\n handleItemClick = (selectItem) => {\r\n this.handleToggleDropdown();\r\n this.props.itemClick(selectItem);\r\n };\r\n\r\n handleWrapperBlur = (e) => {\r\n const disallowClasses = [\".ui-checkbox, .ui-checkbox__label\", \".ui-select2__dropdown\",\r\n \".ui-select2__dropdown-back\", \".ui-select2__dropdown-list-item\", \".ui-select__dropdown\",\r\n \".ui-select__dropdown-back\", \".ui-select__dropdown-list-item\"];\r\n if (this.state.toggle && !disallowClasses.some(cls => e.target.closest(cls))) {\r\n this.handleToggleDropdown();\r\n }\r\n };\r\n\r\n getSelectText = (itemText) => {\r\n switch (itemText) {\r\n case \"4in\":\r\n case \"6in\":\r\n case \"18in\":\r\n case \"Full\":\r\n return \r\n {Object.keys(SHARE_BUTTONS).map(buttonKey => {\r\n const icon = (buttonKey === \"twitter\") ? {LookShareIcons[buttonKey]} ;\r\n return (\r\n \r\n )\r\n })}\r\n \r\n )\r\n};\r\n\r\nLookSideBarShareButtons.propTypes = {\r\n handleClose: PropTypes.func.isRequired,\r\n}\r\n\r\nconst mapStateToProps = (store) => {\r\n const {userIsLoggedIn} = store.userState;\r\n const {shareUrl} = store.serverState;\r\n return {\r\n userIsLoggedIn,\r\n propsShareUrl: shareUrl,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n setLookOverlayOpened,\r\n setLookReturnAction,\r\n};\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(LookSideBarShareButtons)\r\n","import orderBy from \"lodash/orderBy\";\r\nimport {Part} from \"../part\";\r\nimport {PartMenuType} from \"../../../visComponents/constants\";\r\nimport {cabinetThumbnail} from \"../../../kvComponent/core/assets\";\r\nimport DesignNavigationItem from \"../../../visComponents/designNavigationItem\";\r\n\r\nimport Handle from \"../subparts/cabinet/handle\";\r\nimport TopCabinet from \"../subparts/cabinet/topCabinet\";\r\nimport TallCabinet from \"../subparts/cabinet/tallCabinet\";\r\nimport CrownMolding from \"../subparts/cabinet/crownMolding\";\r\nimport BottomCabinet from \"../subparts/cabinet/bottomCabinet\";\r\nimport {setActiveFeaturesBeforeAllWalls} from \"../../../look/lookNavigation/lookNavigationFunctions\";\r\nimport {CABINET_GROUP} from \"../../../kvComponent/core/constants\";\r\nimport BottomHandle from \"../subparts/cabinet/bottomHandle\";\r\nimport TopHandle from \"../subparts/cabinet/topHandle\";\r\nimport DoorHandle from \"../subparts/cabinet/doorHandle\";\r\nimport DrawerHandle from \"../subparts/cabinet/drawerHandle\";\r\n\r\nexport default class Cabinet extends Part {\r\n static id = 'Cabinet';\r\n constructor() {\r\n super(true, false, PartMenuType.Complex);\r\n\r\n this.menuType = PartMenuType.Complex;\r\n this.partName = 'Cabinet';\r\n this.partThumbnail = cabinetThumbnail;\r\n this.partThumbnailSize = \"70%\";\r\n this.translateId = \"visualizer.kitchen.cabinet\";\r\n\r\n // related items\r\n this.handle = null;\r\n this.bottomHandle = null;\r\n this.topHandle = null;\r\n this.topCabinet = null;\r\n this.doorHandle = null;\r\n this.drawerHandle = null;\r\n this.crownMolding = null;\r\n this.relatedGroupNames = [\"Handle\", \"Bottom Handle\", \"Top Handle\", \"Bottom Cabinet\", \"Top Cabinet\", \"Crown Molding\",\r\n \"Door Handle\", \"Drawer Handle\"];\r\n }\r\n\r\n load(dbFeature, loadFeature = true) {\r\n let relatedItemName = \"\",\r\n RelatedItemClass = null;\r\n switch (dbFeature.groupName) {\r\n case \"Handle\":\r\n relatedItemName = \"handle\";\r\n RelatedItemClass = Handle;\r\n break;\r\n case \"Top Handle\":\r\n relatedItemName = \"topHandle\";\r\n RelatedItemClass = TopHandle;\r\n break;\r\n case \"Bottom Handle\":\r\n relatedItemName = \"bottomHandle\";\r\n RelatedItemClass = BottomHandle;\r\n break;\r\n case \"Bottom Cabinet\":\r\n relatedItemName = \"bottomCabinet\";\r\n RelatedItemClass = BottomCabinet;\r\n break;\r\n case \"Top Cabinet\":\r\n relatedItemName = \"topCabinet\";\r\n RelatedItemClass = TopCabinet;\r\n break;\r\n case \"Tall Cabinet\":\r\n relatedItemName = \"tallCabinet\";\r\n RelatedItemClass = TallCabinet;\r\n break;\r\n case \"Crown Molding\":\r\n relatedItemName = \"crownMolding\";\r\n RelatedItemClass = CrownMolding;\r\n break;\r\n case \"Door Handle\":\r\n relatedItemName = \"doorHandle\";\r\n RelatedItemClass = DoorHandle;\r\n break;\r\n case \"Drawer Handle\":\r\n relatedItemName = \"drawerHandle\";\r\n RelatedItemClass = DrawerHandle;\r\n break;\r\n }\r\n return this.loadCommon(relatedItemName, RelatedItemClass, dbFeature, loadFeature)\r\n }\r\n\r\n isSubTypeWithItems() {\r\n return false;\r\n }\r\n\r\n getRelatedItems() {\r\n return orderBy(this.relatedItems, 'layerPriority');\r\n }\r\n\r\n subParts(withHidden = true, hideWithoutFeatures = false) {\r\n return this.getRelatedItems()\r\n .filter(item => this.filterRelatedItem(item, withHidden))\r\n .filter(item => {\r\n if ((item.partId === \"crown_molding\" || item.partId === \"top_handle\") && hideWithoutFeatures && item.allFeaturesReceived) {\r\n return item.navigationSubItems({}, \"\").length\r\n }\r\n return item\r\n })\r\n .map(_ => new DesignNavigationItem(_.partName, _));\r\n }\r\n\r\n handleSubPartClick() {\r\n\r\n }\r\n\r\n getTopCabinetType() {\r\n if (this.topCabinet && this.topCabinet.activeFeature) {\r\n if (this.topCabinet.activeFeature.dbFeature.metaData[\"Cabinet\"]) {\r\n return this.topCabinet.activeFeature.dbFeature.metaData[\"Cabinet\"][0]\r\n } else {\r\n // console.log(\"no topCabinet metaData!\", this.topCabinet.activeFeature);\r\n return \"\"\r\n }\r\n }\r\n return \"\"\r\n }\r\n\r\n // getTopCabinetLayout() {\r\n //\r\n // if (this.topCabinet && this.topCabinet.activeFeature) {\r\n // if (this.topCabinet.activeFeature.dbFeature.metaData[\"Cabinet\"]) {\r\n // return this.topCabinet.activeFeature.dbFeature.metaData[\"Cabinet\"][0]\r\n // } else {\r\n // // console.log(\"no topCabinet metaData!\", this.topCabinet.activeFeature);\r\n // return \"\"\r\n // }\r\n // }\r\n // return \"ALL\"\r\n // }\r\n\r\n getBottomCabinetType() {\r\n if (this.bottomCabinet && this.bottomCabinet.activeFeature) {\r\n if (this.bottomCabinet.activeFeature.dbFeature.metaData[\"Cabinet\"]) {\r\n return this.bottomCabinet.activeFeature.dbFeature.metaData[\"Cabinet\"][0]\r\n } else {\r\n // console.log(\"no bottomCabinet metaData!\", this.bottomCabinet.activeFeature);\r\n return \"\"\r\n }\r\n }\r\n return \"\"\r\n }\r\n\r\n getTopCabinetApplianceType() {\r\n if (this.topCabinet && this.topCabinet.activeFeature) {\r\n if (this.topCabinet.activeFeature.dbFeature.metaData[\"Appliance\"]) {\r\n return this.topCabinet.activeFeature.dbFeature.metaData[\"Appliance\"][0]\r\n } else {\r\n // console.log(\"no Appliance metaData!\", this.topCabinet.activeFeature);\r\n return \"Hood\"\r\n }\r\n }\r\n return \"Hood\"\r\n }\r\n\r\n getTopCabinetShadowLayout() {\r\n if (this.topCabinet && this.topCabinet.activeFeature && this.topCabinet.activeFeature.dbFeature.metaData[\"CabinetLayout\"]) {\r\n return this.topCabinet.activeFeature.dbFeature.metaData[\"CabinetLayout\"][0]\r\n }\r\n return \"\"\r\n }\r\n\r\n getBottomCabinetApplianceType() {\r\n if (this.bottomCabinet && this.bottomCabinet.activeFeature) {\r\n if (this.bottomCabinet.activeFeature.dbFeature.metaData[\"Appliance\"]) {\r\n return this.bottomCabinet.activeFeature.dbFeature.metaData[\"Appliance\"][0]\r\n } else {\r\n // console.log(\"no Appliance metaData!\", this.bottomCabinet.activeFeature);\r\n return \"Range\"\r\n }\r\n }\r\n return \"Range\"\r\n }\r\n\r\n setPrevioslySelected() {\r\n setActiveFeaturesBeforeAllWalls(CABINET_GROUP);\r\n }\r\n\r\n}\r\n","\r\nimport {postSignInAuth} from \"../api/lixil-api\";\r\n\r\n// export const SET_APP_JWT_TOKEN = \"SET_APP_JWT_TOKEN\";\r\n//\r\n// export const setAppJwtToken = (jwtToken) => ({\r\n// type: SET_APP_JWT_TOKEN,\r\n// payload: {jwtToken}\r\n// });\r\n\r\nexport const setLixilAuthorizationToken = () => {\r\n return async (dispatch, getState) => {\r\n\r\n const {useLixilCalendar} = getState().fabricatorState;\r\n if (!useLixilCalendar) {\r\n return\r\n }\r\n const postAuthResponse = await postSignInAuth();\r\n console.log(\"postAuthResponse\", postAuthResponse);\r\n // if (postAuthResponse && postAuthResponse.data && postAuthResponse.data.data && postAuthResponse.data.data.jwtToken) {\r\n // dispatch(setAppJwtToken(postAuthResponse.data.data.jwtToken)); // just in case, we don't need it anymore\r\n // }\r\n return false\r\n }\r\n}\r\n\r\nexport const LIXIL_PRODUCT_TYPES = {\r\n srBathing: \"SR BATHING\",\r\n bathRemodel: \"Bath Remodel\",\r\n}\r\n\r\nconst lixilTermsText = \"By clicking “Let's Review” above, I consent to receive from American Standard and any party on its behalf at any time emails, telemarketing calls using an autodialer, artificial voices or pre-recordings and SMS text messages, which could result in wireless charges, at the number provided above. I understand that consent is not a condition of purchase. I also agree to the Terms of Use and Privacy policy, which are also linked at the bottom of this page.\";\r\n\r\nexport const getLixilCampaignInfo = (store) => {\r\n\r\n const {wizardState, appointmentState, globalState} = store;\r\n\r\n // const isShowerRemodel = wizardState.wizardSelectedValues\r\n // && wizardState.wizardSelectedValues[1]\r\n // && wizardState.wizardSelectedValues[1].selectedFeature && (\r\n // (wizardState.wizardSelectedValues[1].selectedFeature.customDisplayName === \"Replace Shower\")\r\n // || (wizardState.wizardSelectedValues[1].selectedFeature.sharedFeatureName === \"Replace Shower\")\r\n // || (\r\n // (wizardState.wizardActiveItem && (wizardState.wizardActiveItem.id === 2)) && (\r\n // (wizardState.wizardSelectedValues[1].selectedFeature.customDisplayName === \"Convert Tub to A Shower\")\r\n // || (wizardState.wizardSelectedValues[1].selectedFeature.sharedFeatureName === \"Convert Tub to A Shower\")\r\n // )\r\n // )\r\n // );\r\n\r\n const textWithUpdatedButton = globalState.footerInfoButtonText\r\n ? lixilTermsText.replace(\"Let's Review\", globalState.footerInfoButtonText)\r\n : lixilTermsText;\r\n\r\n const isSrBathing = wizardState.wizardActiveItem && (wizardState.wizardActiveItem.id === 2);\r\n\r\n const addressIsNotSupported = appointmentState && appointmentState.appointmentsNotAvailable;\r\n\r\n if (isSrBathing) {\r\n return {\r\n \"Campaign\": \"SOCIAL\",\r\n \"SubID\": addressIsNotSupported ? \"8087\" : \"8077\",\r\n \"PubID\": addressIsNotSupported ? \"SB-Social-OnlineForm-NoAppt\" : \"Social-SB-OnlineApptForm\",\r\n \"DNIS\": \"855-254-7620\",\r\n \"Product\": LIXIL_PRODUCT_TYPES.srBathing,\r\n \"terms_stc\": textWithUpdatedButton,\r\n \"promoter_id_stc\": addressIsNotSupported ? \"\" : \"3846\",\r\n }\r\n }\r\n return {\r\n \"Campaign\": \"SOCIAL\",\r\n \"SubID\": addressIsNotSupported ? \"8088\" : \"8079\",\r\n \"PubID\": addressIsNotSupported ? \"BR-Social-OnlineForm-NoAppt\" : \"BR-Social-OnlineApptForm\",\r\n \"DNIS\": \"855-254-7623\",\r\n \"Product\": LIXIL_PRODUCT_TYPES.bathRemodel,\r\n \"terms_stc\": textWithUpdatedButton,\r\n \"promoter_id_stc\": addressIsNotSupported ? \"\" : \"3846\",\r\n }\r\n}\r\n","import * as types from \"./appointmentActions\";\r\n\r\nexport const defaultTimeValue = \"Select time...\";\r\n\r\nconst initialState = {\r\n appointmentDate: \"\",\r\n appointmentTime: defaultTimeValue,\r\n appointmentTimeSlot: defaultTimeValue,\r\n timeStepIsActive: false,\r\n availableAppointmentDates: [],\r\n salesRepID: \"\", // lixil reponse sales id\r\n appointmentsNotAvailable: true, // lixil faraday reponse not available for this address\r\n};\r\n\r\nexport default function(state = initialState, action) {\r\n\r\n switch(action.type) {\r\n\r\n case types.SET_APPOINTMENT_DATE:\r\n return {...state, appointmentDate: action.payload, appointmentTime: defaultTimeValue, appointmentTimeSlot: defaultTimeValue}\r\n case types.SET_APPOINTMENT_TIME:\r\n return {...state,\r\n appointmentTime: action.payload.time,\r\n appointmentTimeSlot: action.payload.timeSlot\r\n }\r\n case types.SET_APPOINTMENT_TIME_STEP_ACTIVE:\r\n return {...state, timeStepIsActive: action.payload}\r\n case types.SET_AVAILABLE_APPOINTMENTS:\r\n case types.SET_SALES_REP_ID:\r\n case types.SET_APPOINTMENTS_NOT_AVAILABLE:\r\n return {...state, ...action.payload}\r\n\r\n }\r\n\r\n return state;\r\n\r\n}\r\n","import {LEAD_WIZARD_GROUP_TYPES} from \"./wizardLogic\";\r\n\r\n/**\r\n * @param dbFeature {dbFeatureInterface}\r\n * @param wizardGroup {wizardGroupInterface}\r\n * @returns {boolean}\r\n */\r\nexport const featureIsExcluded = (dbFeature, wizardGroup) => {\r\n const {sku, featureDefinitionID, customDisplayName, matchingName} = dbFeature;\r\n if (wizardGroup.useIncluded && wizardGroup.featuresIncluded) {\r\n return !wizardGroup.featuresIncluded.some(includedFeature => {\r\n return (includedFeature.sharedFeatureName && (includedFeature.sharedFeatureName === matchingName))\r\n || (includedFeature.featureDefinitionId === featureDefinitionID)\r\n || (!includedFeature.sharedFeatureName && (includedFeature.name === customDisplayName))\r\n || (includedFeature.sku && sku && (includedFeature.sku === sku))\r\n })\r\n }\r\n return false\r\n}\r\n\r\n/**\r\n * returns current wizard step section items\r\n * @param features {featureInterface}\r\n * @param wizardGroup {wizardGroupInterface}\r\n * @returns {array}\r\n */\r\nexport const getFilteredNavItems = (features, wizardGroup) => {\r\n return features.filter(feature => !featureIsExcluded(feature, wizardGroup))\r\n};\r\n\r\n/**\r\n * returns current wizard step section items\r\n * @param wizardActiveItem {wizardItemInterface}\r\n * @param wizardActiveStep {number}\r\n * @param wizardSelectedValues {object}\r\n * @param prevStepGroups {[wizardGroupInterface]}\r\n * @param additionalWizardValuesToCheck {object}\r\n * @returns {array}\r\n */\r\nexport const getCurrentGroups = (wizardActiveItem,\r\n wizardActiveStep,\r\n wizardSelectedValues,\r\n prevStepGroups = [],\r\n additionalWizardValuesToCheck= null) => {\r\n if (!wizardActiveItem || wizardActiveStep < 0) {\r\n return []\r\n }\r\n const stepStr = \"\" + wizardActiveStep;\r\n\r\n if (wizardActiveStep === 0) {\r\n return getCurrentGroupsFromSource(stepStr, wizardActiveItem)\r\n }\r\n\r\n const selectedPrevStep = wizardSelectedValues[wizardActiveStep - 1];\r\n if (!selectedPrevStep || !selectedPrevStep.wizardGroup) {\r\n if (prevStepGroups.length && prevStepGroups[0].id) {\r\n if (additionalWizardValuesToCheck) { // here we check also previously selected values to make steps similar to prev choices\r\n let foundPreviouslySelectedGroup = null;\r\n if (prevStepGroups.every(wg => wg.nodeType === \"custom\")) {\r\n Object.keys(additionalWizardValuesToCheck).forEach(key => {\r\n if ((key > Object.keys(wizardSelectedValues).length)\r\n && !additionalWizardValuesToCheck[key].partId\r\n && additionalWizardValuesToCheck[key].wizardGroup) {\r\n prevStepGroups.forEach(wg => {\r\n if (wg.id === additionalWizardValuesToCheck[key].wizardGroup.id) {\r\n foundPreviouslySelectedGroup = wg;\r\n }\r\n });\r\n }\r\n });\r\n } else {\r\n // here we can add simple feature group, but no need for now\r\n }\r\n if (foundPreviouslySelectedGroup) {\r\n return getCurrentGroupsFromSource(foundPreviouslySelectedGroup.id, wizardActiveItem)\r\n }\r\n }\r\n return getCurrentGroupsFromSource(prevStepGroups[0].id, wizardActiveItem)\r\n }\r\n // console.log(\"Previous step is not selected! Check selected values --> \", wizardSelectedValues);\r\n return []\r\n }\r\n\r\n if (selectedPrevStep && selectedPrevStep.wizardGroup && selectedPrevStep.wizardGroup.mergedGroups && selectedPrevStep.selectedFeature) {\r\n const wizardGroupWithSelectedFeature = selectedPrevStep.wizardGroup.mergedGroups.find(wizGroup => {\r\n return !featureIsExcluded(selectedPrevStep.selectedFeature, wizGroup)\r\n });\r\n if (wizardGroupWithSelectedFeature) {\r\n return getCurrentGroupsFromSource(wizardGroupWithSelectedFeature.id, wizardActiveItem);\r\n }\r\n }\r\n\r\n // const prevStepStr = \"\" + (wizardActiveStep - 1);\r\n // const prevGroups = getCurrentGroupsFromSource(prevStepStr, wizardActiveItem);\r\n // if (prevGroups.length > 1 && wizardActiveStep > 0) {\r\n // return [selectedPrevStep.wizardGroup]\r\n // }\r\n\r\n return getCurrentGroupsFromSource(selectedPrevStep.wizardGroup.id, wizardActiveItem);\r\n}\r\n\r\n/**\r\n * returns current wizard step section items\r\n * @param source {string}\r\n * @param wizardActiveItem {wizardItemInterface}\r\n * @returns array {[wizardGroupInterface]}\r\n */\r\nexport const getCurrentGroupsFromSource = (source, wizardActiveItem) => {\r\n if (!wizardActiveItem) {\r\n return []\r\n }\r\n const siblingGroups = wizardActiveItem.wizardGroups.filter(wizGroup => {\r\n return wizardActiveItem.wizardEdges.some(wizEdge => wizEdge.source === source && wizEdge.target === wizGroup.id && wizGroup.enabled)\r\n });\r\n // console.log(\"siblingGroups\", siblingGroups);\r\n const areSameSiblingGroups = siblingGroups.length > 1 && siblingGroups.every(siblingGroup => {\r\n return (siblingGroup.nodeType === LEAD_WIZARD_GROUP_TYPES.group) && (siblingGroup.groupName === siblingGroups[0].groupName)\r\n });\r\n if (areSameSiblingGroups) {\r\n // console.log(\"areSameSiblingGroups\", areSameSiblingGroups);\r\n\r\n if (siblingGroups.every(wizardGroup => wizardGroup.useIncluded && wizardGroup.featuresIncluded)) { // new logic\r\n const featuresIncluded = siblingGroups.reduce((total, wizardGroup) => {\r\n wizardGroup.featuresIncluded.forEach(included => {\r\n if (!total.some(exclObj => (exclObj.featureDefinitionId === included.featureDefinitionId))) {\r\n total.push(included)\r\n }\r\n })\r\n return total\r\n }, []);\r\n const newGroup = Object.assign({}, siblingGroups[0], {\r\n mergedGroups: siblingGroups,\r\n featuresExcluded: [], // not sure if we need it\r\n featuresIncluded\r\n })\r\n return [newGroup]\r\n }\r\n\r\n const allFeaturesExcluded = siblingGroups.reduce((total, wizardGroup) => {\r\n wizardGroup.featuresExcluded.forEach(excluded => {\r\n if (!excluded) {\r\n return\r\n }\r\n if (typeof excluded === \"object\") { // new logic for excluded\r\n if (!total.some(exclObj => (typeof exclObj === \"object\") && (exclObj.featureDefinitionId === excluded.featureDefinitionId))) {\r\n total.push(excluded)\r\n }\r\n } else if (!total.includes(excluded)) {\r\n total.push(excluded)\r\n }\r\n })\r\n return total\r\n }, []);\r\n const featuresExcluded = allFeaturesExcluded.filter(exclFeature => {\r\n return siblingGroups.every(siblingGroup => {\r\n if (typeof exclFeature === \"object\") {\r\n return siblingGroup.featuresExcluded.some(exclObj => (typeof exclObj === \"object\") && (exclObj.featureDefinitionId === exclFeature.featureDefinitionId))\r\n }\r\n return siblingGroup.featuresExcluded.includes(exclFeature)\r\n })\r\n })\r\n const newGroup = Object.assign({}, siblingGroups[0], {\r\n mergedGroups: siblingGroups,\r\n featuresExcluded\r\n })\r\n return [newGroup]\r\n }\r\n return siblingGroups\r\n}\r\n\r\n/**\r\n * returns current wizard step section items\r\n * @param wizardActiveItem {wizardItemInterface}\r\n * @param wizardSelectedValues {object}\r\n * @param returnAllSteps {boolean}\r\n * @param additionalWizardValuesToCheck {object}\r\n * @returns {array}\r\n */\r\nexport const getAvailableSteps = (wizardActiveItem, wizardSelectedValues, returnAllSteps, additionalWizardValuesToCheck = null) => {\r\n if (!wizardActiveItem || !wizardActiveItem.wizardGroups || !wizardActiveItem.wizardEdges) {\r\n return []\r\n }\r\n\r\n const maxWizardSteps = 50;\r\n\r\n let stepsArray = [{\r\n stepIndex: 0,\r\n stepGroups: getCurrentGroupsFromSource(\"0\", wizardActiveItem),\r\n }];\r\n\r\n for (let i = 1; i <= maxWizardSteps; i++) {\r\n const prevStepGroups = returnAllSteps && stepsArray[i - 1] ? stepsArray[i - 1].stepGroups : [];\r\n const currentGroups = getCurrentGroups(wizardActiveItem, i, wizardSelectedValues, prevStepGroups, additionalWizardValuesToCheck)\r\n if (!currentGroups.length) {\r\n break;\r\n }\r\n stepsArray.push({\r\n stepIndex: i,\r\n stepGroups: currentGroups\r\n })\r\n }\r\n\r\n return stepsArray\r\n}\r\n\r\n\r\n/**\r\n * this returns new wizard steps depending on the current selection\r\n * @param wizardActiveItem {wizardItemInterface}\r\n * @param currentStep {number}\r\n * @param allWizardSelectedValues {object}\r\n * @returns {object}\r\n */\r\nexport const getNextWizardSteps = (wizardActiveItem, currentStep, allWizardSelectedValues) => {\r\n// const oldWizardSteps = getAvailableSteps(wizardActiveItem, oldWizardSelectedValues, true);\r\n\r\n let newValues = {};\r\n Object.keys(allWizardSelectedValues).forEach(key => {\r\n if (+key <= currentStep) {\r\n newValues[key] = allWizardSelectedValues[key] // here we create values object just until the current selected value\r\n }\r\n });\r\n\r\n const afterCurrentSelectionWizardSteps = getAvailableSteps(wizardActiveItem, newValues, true, allWizardSelectedValues);\r\n const allWizardSteps = getAvailableSteps(wizardActiveItem, allWizardSelectedValues, true);\r\n\r\n const nextStep = currentStep + 1;\r\n\r\n if (\r\n afterCurrentSelectionWizardSteps[nextStep] && allWizardSteps[nextStep]\r\n && afterCurrentSelectionWizardSteps[nextStep].stepGroups.every((wizardGroup, wizardGroupIndex) => {\r\n return allWizardSteps[nextStep].stepGroups[wizardGroupIndex] && wizardGroup.id === allWizardSteps[nextStep].stepGroups[wizardGroupIndex].id\r\n }) && (allWizardSelectedValues[nextStep] && allWizardSelectedValues[nextStep].wizardGroup\r\n && afterCurrentSelectionWizardSteps[nextStep].stepGroups.some(wizG => allWizardSelectedValues[nextStep].wizardGroup.id === wizG.id))\r\n ) {\r\n return allWizardSteps // keep it, as we didn't change the flow\r\n }\r\n\r\n return afterCurrentSelectionWizardSteps // use new ones, as the flow was changed\r\n\r\n}\r\n\r\n\r\n/**\r\n * this returns conflicting with the current selections steps\r\n * @param allWizardSelectedValues {object}\r\n * @param actionPayload {object} // {wizardActiveItem, quoteIndex}\r\n * @returns {array}\r\n */\r\nexport const getConflictingWizardSteps = (allWizardSelectedValues, actionPayload) => {\r\n\r\n const {wizardActiveItem} = actionPayload;\r\n\r\n const currentStep = +Object.keys(actionPayload.wizardSelectedValues)[0];\r\n\r\n let conflictingWizardSteps = [];\r\n const newWizardSteps = getNextWizardSteps(wizardActiveItem, currentStep, allWizardSelectedValues);\r\n\r\n Object.keys(allWizardSelectedValues).forEach(stepIndex => {\r\n if (allWizardSelectedValues[stepIndex] && allWizardSelectedValues[stepIndex].wizardGroup && (!newWizardSteps[stepIndex]\r\n || !newWizardSteps[stepIndex].stepGroups.some(wizardGroup => wizardGroup.id === allWizardSelectedValues[stepIndex].wizardGroup.id))) {\r\n conflictingWizardSteps.push({\r\n stepIndex,\r\n wizardGroupId: allWizardSelectedValues[stepIndex].wizardGroup.id,\r\n });\r\n }\r\n })\r\n\r\n // console.log(\"newWizardSteps\", newWizardSteps);\r\n // console.log(\"allWizardSelectedValues\", allWizardSelectedValues);\r\n // console.log(\"conflictingWizardSteps\", conflictingWizardSteps);\r\n\r\n return conflictingWizardSteps\r\n}\r\n\r\n\r\nexport const getUpdatedAllWizardValues = (state, quoteIndex, wizardItemId, wizardSelectedValues) => {\r\n const newWizObject = {\r\n quoteIndex,\r\n wizardItemId,\r\n lastVisitedStep: state.wizardActiveStep,\r\n wizardSelectedValues: Object.assign({}, wizardSelectedValues)\r\n };\r\n const existingIndex = state.allWizardsValues.findIndex(wizSelObject => {\r\n return wizSelObject.wizardItemId === newWizObject.wizardItemId && wizSelObject.quoteIndex === newWizObject.quoteIndex\r\n });\r\n existingIndex > -1\r\n ? state.allWizardsValues.splice(existingIndex, 1, newWizObject)\r\n : state.allWizardsValues.push(newWizObject);\r\n\r\n state.allWizardsValues = state.allWizardsValues.map(wizObject => {\r\n if (wizObject.quoteIndex === quoteIndex) {\r\n wizObject.isLastActiveWizard = wizObject.wizardItemId === wizardItemId // to return back and force correctly\r\n }\r\n return wizObject\r\n });\r\n\r\n return [...state.allWizardsValues]\r\n}\r\n","import values from 'lodash/values';\r\nimport invert from 'lodash/invert';\r\nimport snakeCase from 'lodash/snakeCase';\r\n\r\nimport {Bathtub} from \"./parts/bathtub\";\r\nimport FloorNew from \"./parts/floorNew\";\r\nimport {Vanity} from \"./parts/vanity\";\r\nimport {Window} from \"./parts/window\";\r\nimport {Ceiling} from \"./parts/ceiling\";\r\nimport {Toilet} from \"./parts/toilet\";\r\nimport {Shower} from \"./parts/shower\";\r\nimport {ShowerTubCombo} from \"./parts/showerTubCombo\";\r\nimport GlobalShadow from \"./parts/globalShadow\";\r\nimport {Wall} from \"./parts/wall\";\r\nimport ExternallWall from \"./subparts/wall/externallWall\";\r\nimport Layer from \"../../visComponents/layer\";\r\nimport Z from './parts/zIndex';\r\nimport {LayoutType, LayoutAbbreviation, bathTubTypeToString, ShowerComboTubType}\r\n from \"./constants\";\r\n\r\nimport {\r\n largeLayoutShadow,\r\n smallLayoutShadow,\r\n shower30inWallShadow,\r\n LayoutThumbnails\r\n} from './assets';\r\nimport LayoutCommon from \"../../visComponents/layoutCommon\";\r\nimport Other from \"./parts/other\";\r\nimport NonVisualizerSubPart from \"./subparts/nonVisualizerSubPart\";\r\nimport DesignNavigationItem from \"../../visComponents/designNavigationItem\";\r\nimport {ShowerAccessories} from \"./parts/showerAccessories\";\r\nimport store from \"../../../store\";\r\nimport {AVAILABLE_VISUALIZER_TYPES} from \"../../../config\";\r\n\r\nexport class Layout extends LayoutCommon {\r\n\r\n /**\r\n * @type {int}\r\n */\r\n defaultType = LayoutType.Large;\r\n type = this.defaultType;\r\n localStorageKey = \"bvState\";\r\n layersBinding = \"Bathroom\";\r\n visualizerType = AVAILABLE_VISUALIZER_TYPES.Bathroom;\r\n layoutNames = LayoutAbbreviation;\r\n layoutTypes = LayoutType;\r\n layoutThumbnails = LayoutThumbnails;\r\n zIndexes = Z.layouts;\r\n\r\n constructor(props) {\r\n super(props);\r\n this.parts[Vanity.id] = new Vanity();\r\n this.parts[Shower.id] = new Shower();\r\n this.parts[ShowerTubCombo.id] = new ShowerTubCombo();\r\n this.parts[ShowerAccessories.id] = new ShowerAccessories();\r\n this.parts[Bathtub.id] = new Bathtub();\r\n this.parts[Toilet.id] = new Toilet();\r\n this.parts[Wall.id] = new Wall(); // wall should render it's layers only after vanity & shower\r\n this.parts[FloorNew.id] = new FloorNew();\r\n this.parts[Ceiling.id] = new Ceiling();\r\n this.parts[Window.id] = new Window();\r\n this.parts[GlobalShadow.id] = new GlobalShadow();\r\n this.parts[Other.id] = new Other();\r\n\r\n values(this.parts).forEach(part => part.layout = this);\r\n }\r\n\r\n resetEverything() {\r\n const features = this.getFeatures();\r\n const {activeQuoteIndex} = store.getState().quotesState;\r\n features.forEach(parentGroup => {\r\n if (parentGroup instanceof Shower) {\r\n parentGroup.activeSubType_ = \"Custom\";\r\n } else if (parentGroup instanceof ShowerTubCombo) {\r\n parentGroup.showerTubComboIsActive = false;\r\n parentGroup.bottomTub = ShowerComboTubType.bathtub_liner;\r\n }\r\n parentGroup.setDefault(this);\r\n parentGroup.placeholderChanged = false;\r\n parentGroup.firstClick[activeQuoteIndex] = false;\r\n // if (parentGroup instanceof Shower && parentGroup.showerBody.featuresParts) {\r\n // parentGroup.showerBody.featuresParts = {};\r\n // }\r\n if (parentGroup.relatedItems && parentGroup.relatedItems.length) {\r\n parentGroup.relatedItems.forEach((subPart) => {\r\n if (subPart.partId !== 'shower_body') {\r\n subPart.placeholderChanged = false;\r\n subPart.firstClick[activeQuoteIndex] = false;\r\n }\r\n subPart.disabled = subPart.defaultDisabled;\r\n if (Array.isArray(subPart.activeFeatureParts) && subPart.activeFeatureParts.length) {\r\n subPart.activeFeatureParts = subPart.setActiveFeatureParts();\r\n }\r\n if (subPart instanceof ExternallWall) {\r\n subPart.selectedByUser = false\r\n }\r\n });\r\n }\r\n });\r\n this.changeLayout(features);\r\n }\r\n\r\n getCurrentLayoutName(type = this.type) {\r\n return invert(LayoutType)[type];\r\n }\r\n\r\n getCurrentLayoutAbbreviation() {\r\n return LayoutAbbreviation[this.getCurrentLayoutName()]\r\n }\r\n\r\n addCustomLayers = (res) => {\r\n // add global shadow\r\n const globalShadowParent = this.parts[GlobalShadow.id]; // if no global shadow uploaded - take the hardcoded one\r\n if (!globalShadowParent.categoryEnabled || (globalShadowParent.activeFeature\r\n && (!globalShadowParent.activeFeature.layer || !globalShadowParent.activeFeature.layer.src))) {\r\n if (this.type === LayoutType.Large) {\r\n res.push(new Layer(\"bv\", Z.layouts.Large.Global_Shadow_Overlay, largeLayoutShadow, false));\r\n } else if (this.type === LayoutType.Small) {\r\n res.push(new Layer(\"bv\", Z.layouts.Small.Global_Shadow_Overlay, smallLayoutShadow, false));\r\n }\r\n }\r\n\r\n // add right ex wall shadow for complete showers\r\n const shower = this.parts[Shower.id];\r\n if (shower.showerSize() === \"30in\" && shower.activeSubType_ === \"Complete\" && !shower.showerTubComboIsActive() && this.type === LayoutType.Large) {\r\n res.push(new Layer(\"bv\", Z.layouts.Large.Shower.Custom60in.ExtrusionWallRightShadow, shower30inWallShadow, false));\r\n }\r\n return res\r\n }\r\n\r\n /**\r\n * Sets bv features from url\r\n */\r\n\r\n parseUrl(bvState) {\r\n if (bvState.disabled_parts) {\r\n bvState.disabled_parts = bvState.disabled_parts.split(\",\");\r\n }\r\n if (bvState.shower_floor_is_active) {\r\n bvState.shower_floor_is_active = bvState.shower_floor_is_active === \"true\"\r\n }\r\n if (bvState.shower_tub_combo_is_active) {\r\n bvState.shower_tub_combo_is_active = bvState.shower_tub_combo_is_active === \"true\"\r\n }\r\n if (bvState.shower_interior_wall_accent_parts) {\r\n bvState.shower_interior_wall_accent_parts = Number.isInteger(bvState.shower_interior_wall_accent_parts)\r\n ? [bvState.shower_interior_wall_accent_parts]\r\n : bvState.shower_interior_wall_accent_parts.split(\",\")\r\n }\r\n if (bvState.shower_interior_wall_parts) {\r\n bvState.shower_interior_wall_parts = Number.isInteger(bvState.shower_interior_wall_parts)\r\n ? [bvState.shower_interior_wall_parts]\r\n : bvState.shower_interior_wall_parts.split(\",\")\r\n }\r\n if (bvState.left_shower_wall_type) {\r\n switch (bvState.left_shower_wall_type) {\r\n case 30:\r\n case \"30\":\r\n case \"30X8\":\r\n bvState.left_shower_wall_type = \"30X8\";\r\n break;\r\n case 15:\r\n case \"15\":\r\n case \"15X4\":\r\n bvState.left_shower_wall_type = \"15X4\";\r\n break;\r\n case \"Pony\":\r\n bvState.left_shower_wall_type = \"Pony\";\r\n break;\r\n }\r\n }\r\n if (bvState[\"caddie_type\"] && this.parts[ShowerAccessories.id]) {\r\n this.parts[ShowerAccessories.id].caddie_type = bvState[\"caddie_type\"];\r\n }\r\n return bvState\r\n // console.log('restoring bvState from url...', bvState);\r\n }\r\n\r\n /**\r\n *\r\n * @param bvState {object}\r\n * @param setCartAndUserState {boolean}\r\n * @param useNames {boolean}\r\n * @param needToChangeLayout {boolean}\r\n * @param firstLoad {boolean}\r\n */\r\n setActiveFeaturesFromObject(bvState, setCartAndUserState = false, useNames = false, needToChangeLayout = true, firstLoad = false) {\r\n if (bvState) {\r\n\r\n const layout_type = +bvState.layout_type;\r\n needToChangeLayout = needToChangeLayout && (layout_type || layout_type === 0) && (layout_type !== +this.type);\r\n\r\n if (needToChangeLayout) {\r\n this.type = layout_type;\r\n }\r\n\r\n const vanity = this.parts[Vanity.id];\r\n const shower = this.parts[Shower.id];\r\n const showerTubCombo = this.parts[ShowerTubCombo.id];\r\n // const bathtub = this.parts[Bathtub.id];\r\n\r\n // to avoid checks below\r\n bvState.disabled_parts = bvState.disabled_parts || [];\r\n\r\n // const {activeQuoteIndex} = store.getState().quotesState;\r\n\r\n this.getFeatures()\r\n .forEach((parentGroup) => {\r\n if (parentGroup.menuType === 0 && parentGroup.partName !== \"Toilet\") {\r\n const partId = parentGroup.partId;\r\n const hasPreviouslySavedItem = this.selectedLayoutFeatures[layout_type]\r\n && this.selectedLayoutFeatures[layout_type][partId];\r\n if (bvState.hasOwnProperty(partId) || hasPreviouslySavedItem) {\r\n if (useNames) {\r\n parentGroup.activeFeature = parentGroup.getFeatureByPartName(bvState[partId]);\r\n if (!parentGroup.activeFeature && hasPreviouslySavedItem) {\r\n parentGroup.activeFeature = parentGroup.getFeatureByPartName(hasPreviouslySavedItem);\r\n }\r\n } else {\r\n parentGroup.activeFeature = parentGroup.getFeatureById(bvState[partId])\r\n || parentGroup.getDefaultFeature();\r\n }\r\n parentGroup.placeholderChanged = !!parentGroup.activeFeature;\r\n // parentGroup.firstClick[activeQuoteIndex] = !!parentGroup.activeFeature; // this makes steps selected! removed\r\n }\r\n if (parentGroup.activeFeature && firstLoad && !parentGroup.activeFeature.notAvailableInVisualizer) { // Leave non in vis features locked\r\n parentGroup.activeFeature.dbFeature.unlocked = true;\r\n }\r\n parentGroup.disabled = bvState.disabled_parts.includes(partId)\r\n } else {\r\n let subParts = parentGroup.relatedItems;\r\n subParts.forEach((subPart) => {\r\n const partId = subPart.partId;\r\n const hasPreviouslySavedItem = this.selectedLayoutFeatures[layout_type]\r\n && this.selectedLayoutFeatures[layout_type][partId];\r\n if (bvState.hasOwnProperty(partId) || hasPreviouslySavedItem) {\r\n if (useNames) {\r\n subPart.activeFeature = subPart.getFeatureByPartName(bvState[partId]);\r\n if (!subPart.activeFeature && hasPreviouslySavedItem) {\r\n subPart.activeFeature = subPart.getFeatureByPartName(hasPreviouslySavedItem);\r\n }\r\n } else {\r\n subPart.activeFeature = subPart.getFeatureById(bvState[partId]) || parentGroup.getDefaultFeature();\r\n }\r\n subPart.placeholderChanged = !!subPart.activeFeature;\r\n // subPart.firstClick[activeQuoteIndex] = !!subPart.activeFeature // this makes steps selected! removed\r\n if (partId === \"shower_body\") {\r\n subPart.showerBodySelectedByUser = true\r\n }\r\n }\r\n if (subPart.activeFeature && firstLoad && !subPart.activeFeature.notAvailableInVisualizer) {\r\n subPart.activeFeature.dbFeature.unlocked = true;\r\n }\r\n if (firstLoad) {\r\n subPart.placeholderChanged = true;\r\n }\r\n subPart.disabled = bvState.disabled_parts.includes(partId);\r\n })\r\n }\r\n });\r\n\r\n const partPredicate = (part, value) => useNames ? part.partName === value : +part.dbFeature.id === +value;\r\n Object.keys(bvState)\r\n .forEach((bvStateKey) => {\r\n if (bvStateKey === \"vanity_type\") {\r\n vanity.activeSubType_ = bvState.vanity_type.charAt(0).toUpperCase() + bvState.vanity_type.substr(1);\r\n }\r\n if (bvStateKey === \"shower_type\") {\r\n shower.activeSubType_ = bvState.shower_type.charAt(0).toUpperCase() + bvState.shower_type.substr(1);\r\n if (bvState.shower_type === \"complete\" && bvState.shower_parts.length) {\r\n shower.showerBody.activeFeatureParts = bvState.shower_parts.map(shower_part_id => {\r\n return shower.showerBody.featuresParts.find(_ => partPredicate(_, shower_part_id));\r\n });\r\n }\r\n }\r\n if (bvStateKey === \"shower_interior_wall_parts\") {\r\n if (bvState.shower_interior_wall_parts.length && shower.showerInteriorWall) {\r\n shower.showerInteriorWall.activeFeatureParts = bvState.shower_interior_wall_parts\r\n .map((shower_accent_wall_part_id) => {\r\n let accordingPart = shower.showerInteriorWall.featuresParts.find(_ => partPredicate(_, shower_accent_wall_part_id));\r\n if (!accordingPart) {\r\n const showerFeature = shower.showerInteriorWall.features.find(_ => partPredicate(_, bvState.shower_interior_wall));\r\n if (showerFeature) {\r\n const availableParts = shower.showerInteriorWall.setActiveFeatureParts(showerFeature);\r\n if (availableParts.length) {\r\n accordingPart = availableParts[0]\r\n }\r\n }\r\n }\r\n return accordingPart;\r\n });\r\n }\r\n }\r\n if (bvStateKey === \"shower_interior_wall_accent_parts\") {\r\n if (bvState.shower_interior_wall_accent_parts.length && shower.showerInteriorWallAccent) {\r\n shower.showerInteriorWallAccent.activeFeatureParts = bvState.shower_interior_wall_accent_parts\r\n .map((shower_accent_wall_part_id) => {\r\n return shower.showerInteriorWallAccent.featuresParts.find(_ => partPredicate(_, shower_accent_wall_part_id));\r\n });\r\n }\r\n }\r\n if (bvStateKey === \"shower_floor_is_active\") {\r\n shower.showerFloorIsActive = bvState[bvStateKey];\r\n }\r\n if (bvStateKey === \"shower_tub_combo_is_active\") {\r\n showerTubCombo.showerTubComboIsActive = bvState[bvStateKey];\r\n if (bvState[bvStateKey] && bvState.bottom_tub) {\r\n showerTubCombo.bottomTub = bvState.bottom_tub\r\n }\r\n if (bvState[bvStateKey] && bvState.left_shower_wall_type) {\r\n showerTubCombo.leftShowerWallType = bvState.left_shower_wall_type\r\n }\r\n }\r\n });\r\n\r\n if (needToChangeLayout) {\r\n this.changeLayout(this.getFeatures());\r\n }\r\n\r\n if (setCartAndUserState) {\r\n this.setCartStateAndUserStateFromBvState(bvState);\r\n }\r\n }\r\n }\r\n\r\n /**\r\n *\r\n * @param bvState {object}\r\n * @param useNames {boolean}\r\n * @returns bvState {object}\r\n */\r\n addSpecificPropertiesToLocalStorage(bvState, useNames = false) {\r\n\r\n const bathTub = this.parts[Bathtub.id];\r\n const shower = this.parts[Shower.id];\r\n const showerTubCombo = this.parts[ShowerTubCombo.id];\r\n\r\n bvState.layout_type = this.type;\r\n\r\n Object.keys(bvState).forEach((bvStateKey) => {\r\n // console.log('bvStateKey', bvStateKey);\r\n if (bvStateKey === 'bathtub') {\r\n bvState.bathtub_type = bathTubTypeToString(bathTub.activeSubType_).toLowerCase();\r\n }\r\n if (bvStateKey === 'shower_body') {\r\n bvState.shower_type = shower.activeSubType_.toLowerCase();\r\n bvState.shower_floor_is_active = shower.showerFloorIsActive;\r\n if (bvState.shower_type === \"complete\") {\r\n bvState.shower_parts = shower.showerBody.activeFeatureParts\r\n .filter(activeFeaturePart => activeFeaturePart)\r\n .map(activeFeaturePart => {\r\n return useNames ? activeFeaturePart.partName : activeFeaturePart.dbFeature.id\r\n });\r\n }\r\n bvState.shower_tub_combo_is_active = shower.showerTubComboIsActive();\r\n if (bvState.shower_tub_combo_is_active) {\r\n bvState.bottom_tub = showerTubCombo.bottomTub;\r\n bvState.left_shower_wall_type = showerTubCombo.leftShowerWallType;\r\n }\r\n }\r\n if (bvStateKey === 'shower_interior_wall') {\r\n bvState.shower_interior_wall_parts = shower.showerInteriorWall.activeFeatureParts\r\n .filter(activeFeaturePart => activeFeaturePart)\r\n .map(activeFeaturePart => {\r\n return useNames ? activeFeaturePart.partName : activeFeaturePart.dbFeature.id\r\n });\r\n }\r\n if (bvStateKey === 'shower_interior_wall_accent') {\r\n bvState.shower_interior_wall_accent_parts = shower.showerInteriorWallAccent.activeFeatureParts\r\n .filter(activeFeaturePart => activeFeaturePart && activeFeaturePart.dbFeature)\r\n .map(activeFeaturePart => {\r\n return useNames ? activeFeaturePart.partName : activeFeaturePart.dbFeature.id\r\n });\r\n }\r\n if (bvStateKey === 'vanity') {\r\n bvState.vanity_type = this.parts[Vanity.id].activeSubType_.toLowerCase();\r\n }\r\n });\r\n // console.log('bvState', bvState);\r\n if (bvState[\"pony_wall\"]) {\r\n if (!bvState[\"pony_wall_glass\"] && shower.ponyWallGlass\r\n && shower.ponyWallGlass.activeFeature && shower.ponyWallGlass.activeFeature.dbFeature.id) {\r\n const feature = shower.ponyWallGlass.activeFeature;\r\n bvState[\"pony_wall_glass\"] = useNames ? feature.partName : feature.dbFeature.id\r\n }\r\n }\r\n if (bvState[\"large_corner_caddie\"] || bvState[\"corner_caddie\"] || bvState[\"small_corner_shelf\"]) {\r\n const showerAccessoriesParent = this.parts[ShowerAccessories.id];\r\n if (showerAccessoriesParent) {\r\n bvState.caddie_type = this.parts[ShowerAccessories.id].caddie_type;\r\n }\r\n }\r\n return bvState\r\n }\r\n\r\n addNonVisualizerSubPart(featureGroupName){\r\n const otherParent = this.parts[Other.id];\r\n const partId = snakeCase(featureGroupName);\r\n let relatedItem = otherParent.relatedItems.find(relatedItem => relatedItem.partId === partId);\r\n if (!relatedItem) {\r\n relatedItem = new NonVisualizerSubPart(true, partId, featureGroupName);\r\n relatedItem.getParent = () => otherParent;\r\n otherParent.relatedItems.push(relatedItem);\r\n }\r\n return new DesignNavigationItem(relatedItem.partName, relatedItem)\r\n }\r\n\r\n excludedIndexesFromHover = (layoutType) => {\r\n return [\r\n this.zIndexes[layoutType].Global_Shadow_Overlay, // exclude Global Shadow\r\n this.zIndexes[layoutType].Window_Covering, // exclude Window Coverings\r\n this.zIndexes[layoutType].Ceiling_Lights, // exclude Ceiling_Lights\r\n // this.zIndexes[layoutType].Shower.Custom60in.Wall, // exclude Shower Wall\r\n this.zIndexes[layoutType].Shower.Custom60in.Glass, // exclude Shower Glass\r\n // && layerHovering.layer.zIndex !== Z.this.zIndexes[layoutType].Shower.Custom60in.ExtrusionWallRight // exclude Shower ExtrusionWallRight\r\n // && layerHovering.layer.zIndex !== Z.this.zIndexes[layoutType].Shower.Custom60in.ExtrusionWallLeft // exclude Shower ExtrusionWallLeft\r\n this.zIndexes[layoutType].Shower.Custom60in.Overlay, // exclude Shower Overlay\r\n this.zIndexes[layoutType].Shower.Steam60in.Overlay, // exclude Shower Overlay\r\n this.zIndexes[layoutType].Shower.Custom60in.ExtrusionWallRightShadow, // exclude Right Shower Wall Shadow\r\n this.zIndexes[layoutType].Shower.Custom60in.ExtrusionWallLeftShadow, // exclude Left Shower Wall Shadow\r\n this.zIndexes[layoutType].Shower.Custom60in.ExtrusionWallLeftShadowHalfWall, // exclude Left Shower Wall Shadow\r\n this.zIndexes[layoutType].Shower.Custom60in.ShowerDrain, // exclude Shower Drain\r\n this.zIndexes[layoutType].Shower.Custom60in.PonyWallCapShadow, // exclude Pony Wall Cap Shadow\r\n this.zIndexes[layoutType].Shower.Custom60in.WallShadow, // exclude Shower Interior shadow\r\n this.zIndexes[layoutType].Shower.Custom60in.PonyWallShadow, // exclude Pony Wall Overlay\r\n this.zIndexes[layoutType].Shower.Custom60in.ThresholdShadow, // exclude ThresholdShadow\r\n this.zIndexes[layoutType].Shower.Custom60in.FloorShadow, // exclude ThresholdShadow\r\n ]\r\n }\r\n\r\n}\r\n","import React, {Component} from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport {connect} from \"react-redux\";\r\nimport {setNavigationViewType} from \"../../../../actions/navigationFunctions\";\r\n\r\nclass SelectionMobileViewSwitchers extends Component {\r\n\r\n static propTypes = {\r\n switchers: PropTypes.arrayOf(PropTypes.number).isRequired,\r\n };\r\n\r\n render() {\r\n return (\r\n \r\n \r\n )\r\n }\r\n\r\n if (isToggle) {\r\n return (\r\n \r\n \r\n )\r\n};\r\n\r\nLookFeatureRemoveButton.propTypes = {\r\n lookFeature: PropTypes.shape(featureInterface),\r\n updateLookCartItem: PropTypes.func.isRequired,\r\n isList: PropTypes.bool,\r\n isIcon: PropTypes.bool,\r\n isToggle: PropTypes.bool,\r\n text: PropTypes.string,\r\n}\r\n\r\nconst mapStateToProps = (store) => {\r\n const {canvasCount} = store.bathroomVisualizerState;\r\n const {isPhoneNumberValidated} = store.userState; // to update component when user is logged in\r\n\r\n return {\r\n canvasCount,\r\n isPhoneNumberValidated,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n setLookOverlayOpened,\r\n // setLookRemovePopup,\r\n setLookStylePopup,\r\n updateCanvasCount,\r\n};\r\n\r\nexport default injectIntl(\r\n connect(mapStateToProps, mapDispatchToProps)((props) => {\r\n return (\r\n \r\n {(updateLookCartItem) => }\r\n \r\n )\r\n })\r\n)\r\n","import React, { Component } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport {connect} from \"react-redux\";\r\nimport {FormattedMessage} from \"react-intl\";\r\n\r\nimport Button from \"@mui/material/Button\";\r\n\r\nimport Analytics from './../../analytics';\r\nimport UiSelect from \"../ui/select\";\r\nimport {BACKSPLASH_TYPES} from \"../kvComponent/core/constants\";\r\nimport {KVSCENE_BACKSPLASH_TYPES} from \"../kvSceneComponent/core/constants\";\r\nimport {getCurrentLayout} from \"../appLayout\";\r\nimport {\r\n setActiveFeature,\r\n toggleSelectionFeatureInfo,\r\n toggleShowDescriptionCover,\r\n updateCanvasCount\r\n} from \"../../actions/actionFunctions\";\r\nimport WithClickCount from \"../look/hocs/withClickCount\";\r\nimport {loaderDisable, loaderEnable} from \"../ui/loaderView\";\r\nimport Navigation from \"../visComponents/navigation/navigation\";\r\nimport {setLookActiveFeature} from \"../../actions/lookFunctions\";\r\nimport {featureInterface} from \"../../interfaces/featureInterface\";\r\n\r\nclass BacksplashSelect extends Component {\r\n\r\n static propTypes = {\r\n // activePart: PropTypes.object.isRequired // Backsplash\r\n updateParent: PropTypes.func,\r\n useButtons: PropTypes.bool,\r\n activeFeature: PropTypes.shape(featureInterface),\r\n };\r\n\r\n handleBacksplashItemClick = async (type, maxClickCountReached) => {\r\n Analytics.sendClickEvent(\"backsplash-type-selected-\" + type);\r\n if (maxClickCountReached && maxClickCountReached()) {\r\n return false\r\n }\r\n const backsplashSubPart = this.getBacksplashPart();\r\n const currentActiveName = backsplashSubPart.activeFeature ? backsplashSubPart.activeFeature.getCountertopGroupsSplittedFeatureName() : \"\";\r\n let featureToClick = backsplashSubPart.getFeatureByBacksplashType(type);\r\n // console.log(\"featureToClick\", featureToClick);\r\n if (featureToClick && currentActiveName && (featureToClick.getCountertopGroupsSplittedFeatureName() !== currentActiveName)) {\r\n loaderEnable();\r\n await Navigation.searchFeaturesByName(backsplashSubPart, currentActiveName);\r\n loaderDisable();\r\n featureToClick = backsplashSubPart.getFeatureByBacksplashType(type);\r\n // console.log(\"featureToClick2\", featureToClick);\r\n }\r\n console.log(\"featureToClick\", featureToClick);\r\n if (featureToClick) {\r\n featureToClick.handleClick();\r\n this.props.setActiveFeature(featureToClick);\r\n // this.props.toggleShowDescriptionCover(false);\r\n this.forceUpdate();\r\n if (this.props.updateParent) {\r\n this.props.updateParent(featureToClick);\r\n }\r\n this.props.updateCanvasCount();\r\n }\r\n if (this.props.useButtons) {\r\n this.props.setLookActiveFeature(featureToClick);\r\n }\r\n };\r\n\r\n getBacksplashPart = () => {\r\n const layout = getCurrentLayout();\r\n const wallsParent = layout.parts[\"Walls\"];\r\n return wallsParent.relatedItems.find(relItem => relItem.partId === \"backsplash\");\r\n };\r\n\r\n getValueText = () => {\r\n if (this.props.bvOpened) { // visualizer\r\n return \r\n } else if (this.props.windowWidth < 1600) {\r\n return \r\n } else {\r\n return \r\n }\r\n }\r\n };\r\n\r\n getBackplashTypes = () => {\r\n if (document.kvConfig.visualizerType === \"Kitchen\") {\r\n return BACKSPLASH_TYPES\r\n }\r\n if (this.props.fabricatorData.isEncore) {\r\n const backsplashSubPart = this.getBacksplashPart();\r\n if (backsplashSubPart) {\r\n return KVSCENE_BACKSPLASH_TYPES.filter(type => {\r\n return !!backsplashSubPart.getFeatureByBacksplashType(type, \"\", true)\r\n })\r\n }\r\n }\r\n return KVSCENE_BACKSPLASH_TYPES\r\n };\r\n\r\n renderButtons = (currentType) => {\r\n return (\r\n \r\n {(maxClickCountReached) => (\r\n \r\n )\r\n };\r\n\r\n render() {\r\n const backsplashSubPart = this.getBacksplashPart();\r\n const currentType = backsplashSubPart.getCurrentActiveFeatureType();\r\n if (this.props.useButtons) {\r\n return this.renderButtons(currentType)\r\n }\r\n // console.log(\"backsplashSubPart\", );\r\n return (\r\n \r\n \r\n \r\n );\r\n case \"mobileNavigationMenu\":\r\n return (\r\n \r\n {({ TransitionProps }) => (\r\n \r\n \r\n )\r\n};\r\n\r\nLookIntroPopper.propTypes = {\r\n // anchorRef: PropTypes.oneOfType([\r\n // PropTypes.func,\r\n // PropTypes.shape({ current: PropTypes.elementType })\r\n // ]).isRequired,\r\n anchorRef: PropTypes.object.isRequired,\r\n currentStep: PropTypes.number.isRequired,\r\n placement: PropTypes.string,\r\n toolTipText: PropTypes.string,\r\n roomIdeasButtonTranslate: PropTypes.string,\r\n className: PropTypes.string,\r\n}\r\n\r\nLookIntroPopper.defaultProps = {\r\n placement: \"right\"\r\n}\r\n\r\nconst mapStateToProps = (store) => {\r\n const {introStep} = store.lookState;\r\n // const {isMobile} = store.serverState;\r\n return {\r\n introStep,\r\n // isMobile,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n // setLookIntroStep,\r\n // setLookOverlayOpened,\r\n};\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(LookIntroPopper)\r\n","import React from \"react\";\r\n\r\nexport const initialContext = {\r\n activeContract: null,\r\n globalContractPage: 1, // pager\r\n activeContractPage: 1, // for current doc\r\n selectedContracts: [],\r\n totalPages: 1,\r\n receiptUrl: \"\", //blobUrl\r\n receiptPages: 0, // if 0 - contracts will start from 1\r\n receiptLayout: null, // for receipt sign\r\n // doc props\r\n showPage: false,\r\n pageRendered: false,\r\n selectedFieldIndex: -1,\r\n}\r\n\r\nconst ContractsContext = React.createContext(initialContext)\r\nexport default ContractsContext;\r\n","import flatMap from 'lodash/flatMap';\r\nimport find from 'lodash/find';\r\nimport some from 'lodash/some';\r\nimport findIndex from 'lodash/findIndex';\r\nimport cloneDeep from 'lodash/cloneDeep';\r\n\r\nimport * as types from '../actions/actionTypes';\r\n//import instList from '../bvcomponents/installation/instHardCode';\r\n\r\nconst initialState = {\r\n instOpened: false,\r\n instList: [],\r\n defaultInstallations: [],\r\n};\r\n\r\nlet __installations = [];\r\n\r\nexport default function (state = initialState, action) {\r\n\r\n switch (action.type) {\r\n case types.ADD_TO_CART:\r\n return __tryAddToInstallation(state, action.payload.cartItems);\r\n case types.REMOVE_FROM_CART:\r\n return __tryRemoveFromInstallations(state, action.payload.cartItem);\r\n case types.TOGGLE_INST_OPENED:\r\n case types.SET_INST_LIST:\r\n case types.SET_DEFAULT_INST_LIST:\r\n return Object.assign({}, state, {\r\n ...action.payload\r\n });\r\n case types.REMOVE_INSTALLATION_SERVICE_FROM_CART:\r\n return __toggleInstallationServiceUsage(state, action.payload);\r\n }\r\n\r\n return state;\r\n\r\n}\r\n\r\nexport function getInstallationsTotalCost(instList) {\r\n let cost = 0;\r\n flatMap(instList, group => group.services)\r\n .forEach(s => {\r\n if (s.selected) {\r\n cost += getInstallationCost(s);\r\n }\r\n });\r\n\r\n return cost;\r\n}\r\n\r\nexport function getInstallationCost(installationService) {\r\n return installationService.hourly * installationService.price;\r\n}\r\n\r\nfunction __toggleInstallationServiceUsage(state, {installationService}) {\r\n const {instList} = state;\r\n for (let i = 0; i < instList.length; i++){\r\n for (let j = 0; j < instList[i].services.length; j++) {\r\n const service = instList[i].services[j];\r\n if ((service.fabricatorFeature_id === installationService.fabricatorFeature_id)\r\n && (service.fabricatorInstallation_id === installationService.fabricatorInstallation_id)){\r\n service.selected = !service.selected;\r\n return {...state, instList: cloneDeep(instList)};\r\n }\r\n }\r\n }\r\n\r\n return state;\r\n}\r\n\r\nfunction __tryAddToInstallation(state, cartItems) {\r\n let hasChanges = false;\r\n const {instList} = state;\r\n\r\n cartItems.filter(cartItem => cartItem.quantity).forEach(cartItem => {\r\n const ID = cartItem.cartFeature.dbFeature.id;\r\n const allInstallations = __getInstallations(state.defaultInstallations);\r\n const installations = allInstallations.filter(inst => {\r\n return inst && (inst.fabricatorFeature_id === ID)\r\n });\r\n\r\n if (installations.length) {\r\n let instGroup = find(instList, {title: cartItem.selectionGroup});\r\n if (!instGroup) {\r\n instGroup = {\r\n title: cartItem.selectionGroup,\r\n services: [],\r\n description: 'Do you wand to add installation for ' + cartItem.selectionGroup,\r\n enabled: false\r\n };\r\n instList.push(instGroup);\r\n }\r\n\r\n installations.forEach(installation => {\r\n const service = some(instGroup.services, {\r\n // fabricatorFeature_id: id, // removed this check cause they are different, but we need to remove duplicates\r\n fabricatorInstallation_id: installation.fabricatorInstallation_id\r\n });\r\n if (!service) {\r\n const selected = installation.autoAddWithProduct;\r\n instGroup.services.push({\r\n fabricatorFeature_id: cartItem.cartFeature.dbFeature.id,\r\n title: installation.installationName,\r\n hourly: installation.defaultQuantity || 1,\r\n price: installation.price,\r\n description: installation.description,\r\n fabricatorInstallation_id: installation.fabricatorInstallation_id,\r\n selected,\r\n autoAddWithProduct: installation.autoAddWithProduct,\r\n defaultQuantity: installation.defaultQuantity,\r\n hideQuantity: installation.hideQuantity,\r\n unit: installation.unit\r\n });\r\n if (selected) {\r\n instGroup.enabled = true;\r\n }\r\n hasChanges = true;\r\n }\r\n });\r\n }\r\n });\r\n\r\n return hasChanges ? {...state, instList: cloneDeep(instList)} : state;\r\n}\r\n\r\nfunction __tryRemoveFromInstallations(state, cartItem) {\r\n const {instList} = state;\r\n const ID = cartItem.cartFeature.dbFeature.id;\r\n const allInstallations = __getInstallations(state.defaultInstallations);\r\n const installations = allInstallations.filter(inst => {\r\n return inst.fabricatorFeature_id === ID\r\n });\r\n if (installations.length) {\r\n installations.forEach(installation => {\r\n let instGroupIdx = findIndex(instList, {title: cartItem.selectionGroup});\r\n if (instGroupIdx !== -1) {\r\n const serviceIdx = findIndex(instList[instGroupIdx].services, {\r\n fabricatorFeature_id: cartItem.cartFeature.dbFeature.id,\r\n fabricatorInstallation_id: installation.fabricatorInstallation_id\r\n });\r\n if (serviceIdx !== -1) {\r\n instList[instGroupIdx].services.splice(serviceIdx, 1);\r\n if (!instList[instGroupIdx].services.length) {\r\n // remove group as well\r\n instList.splice(instGroupIdx, 1);\r\n return {...state, instList: cloneDeep(instList)};\r\n }\r\n }\r\n }\r\n });\r\n }\r\n\r\n return {...state, instList: cloneDeep(instList)};\r\n}\r\n\r\nfunction __getInstallations(defaultInstallations) {\r\n if (defaultInstallations && defaultInstallations.length && __installations && !__installations.length) {\r\n __installations = flatMap(defaultInstallations, i => i.installations);\r\n __installations = __installations.filter(i => {\r\n return i && (i.autoAddWithProduct || i.customerAdd || (i.employeesOnly && document.kvConfig.isBackend));\r\n })\r\n }\r\n\r\n return __installations;\r\n}\r\n\r\n","export const GROHE_CONFIG = {\r\n sidebarWidth: {\r\n desktop: 306.5,\r\n mobile: 360,\r\n },\r\n similarProductsWidth: {\r\n desktop: 307.5,\r\n // mobile: 360,\r\n },\r\n mainBarWidth: {\r\n desktop: 412,\r\n }\r\n};\r\n","import 'whatwg-fetch';\r\n\r\nconst shouldUseKvConfigDomain = document.location.hostname === 'localhost'\r\n || document.location.hostname.includes(\"192.168\")\r\n || window.location.href.includes(\"testprod\")\r\n || document.kvConfig.isWordpressPlugin;\r\n\r\nexport const HOST_NAME = document.kvConfig.domain && shouldUseKvConfigDomain\r\n ? document.kvConfig.domain : \"\";\r\n\r\nexport function handleHttpError(response) {\r\n if (response.status === 400) { // bad request\r\n return response.json()\r\n .then(json => {\r\n checkApiError(json);\r\n //console.log(400, json);\r\n return Promise.resolve({__error__: true});\r\n });\r\n }\r\n\r\n if (!response.ok) {\r\n return response.json()\r\n .then(json => Promise.reject(json ? json.message : response.statusMessage));\r\n }\r\n\r\n return response;\r\n}\r\n\r\nfunction checkApiError(response) {\r\n let errorMessage = response.error || response.errorMessage\r\n || (response.errors && Array.isArray(response.errors) ? response.errors.join(',') : null);\r\n if (!errorMessage) {\r\n return;\r\n }\r\n\r\n //dispatch({type: ActionTypes.HTTP_ERROR, payload: errorMessage});\r\n}\r\n\r\nexport function getResponse(response) {\r\n if (!response)\r\n return null;\r\n if (response.json)\r\n return response.json();\r\n return response;\r\n}\r\n\r\n\r\nexport const get = (url) => {\r\n return fetch(HOST_NAME + url, {\r\n // return fetch('http://localhost:3000/localdata', {\r\n headers: {\r\n 'Accept': 'application/json'\r\n }\r\n })\r\n .then(handleHttpError)\r\n .then(response => getResponse(response))\r\n .catch(reason => Promise.reject(reason));\r\n};\r\n\r\nexport const post = (url, data, { signal, domain } = {}) => {\r\n const isFormData = Object.prototype.toString.call(data) === '[object FormData]';\r\n const headers = {\r\n 'Accept': 'application/json'\r\n };\r\n if (!isFormData) {\r\n headers['Content-Type'] = 'application/json';\r\n }\r\n\r\n return fetch(domain ? domain + url : HOST_NAME + url, {\r\n method: 'post',\r\n body: isFormData ? data : JSON.stringify(data),\r\n headers: new Headers(headers),\r\n signal: signal,\r\n })\r\n .then(handleHttpError)\r\n .then(response => getResponse(response))\r\n .catch(reason => {\r\n if (reason.name === 'AbortError') {\r\n console.log('Fetch aborted');\r\n } else {\r\n return Promise.reject(reason);\r\n }\r\n });\r\n};\r\n","// do not use imports in this file!! we are trying to keep lead form bundle js clean\r\n\r\nimport {getCommonVisualizerType} from \"../../../../../config\";\r\nimport {getCurrentLayout} from \"../../../../appLayout\";\r\nimport {getFeatureFromTheBackendBySku} from \"../../../../../api/look-api\";\r\n\r\nexport const fixStringEncoding = (string) => {\r\n return string && (typeof string === \"string\")\r\n ? string\r\n .replace(\"â€�\", \"”\")\r\n .replace(\"â€\", \"”\")\r\n .replace(\"’\", \"’\")\r\n .replace(\"
\", \" \")\r\n .replace(\"
\", \"\") // not sure what it is\r\n : string\r\n}\r\n\r\nexport const fixWizardItem = (wizardItem, wizardItemIndex, forLeadForm = false, newVisualizerType) => {\r\n wizardItem.wizardNodes = []; // we don't use them in the visualizer! why do we keep them then\r\n Object.keys(wizardItem).forEach(property => {\r\n if (typeof wizardItem[property] === \"string\") {\r\n wizardItem[property] = fixStringEncoding(wizardItem[property]);\r\n }\r\n });\r\n if (!wizardItem.name) {\r\n wizardItem.name = \"wizard\" + (wizardItemIndex > 0 ? \"-\" + wizardItemIndex + 1 : \"\");\r\n }\r\n const currentVisType = getCommonVisualizerType(newVisualizerType);\r\n if (wizardItem.wizardGroups) {\r\n wizardItem.wizardGroups = wizardItem.wizardGroups.filter(wizGroup => {\r\n if (!wizGroup.enabled || (wizGroup.hideForCustomers && !document.kvConfig.isBackend)) {\r\n return false\r\n }\r\n if (wizardItem.visualizer === \"all\") {\r\n return (wizGroup.groupName === \"Room\") || !Array.isArray(wizGroup.visibleInVisualizers)\r\n || !wizGroup.visibleInVisualizers.length || wizGroup.visibleInVisualizers.includes(currentVisType)\r\n }\r\n return true\r\n }).map(wizGroup => {\r\n if (forLeadForm) {\r\n //getUrlLeadStepName\r\n wizGroup.leadStepUrl = wizGroup.leadStep\r\n ? wizGroup.leadStep.toLowerCase().replace(/ /g,\"-\")\r\n : \"project\"\r\n }\r\n if (wizGroup.nodeType === \"inputs\" && Array.isArray(wizGroup.inputFields)) {\r\n wizGroup.inputFields = wizGroup.inputFields.filter(inputObject => inputObject.checked)\r\n }\r\n Object.keys(wizGroup).forEach(property => {\r\n if (typeof wizGroup[property] === \"string\") {\r\n wizGroup[property] = fixStringEncoding(wizGroup[property]);\r\n }\r\n });\r\n [\"featuresIncluded\", \"featuresExcluded\"].forEach(property => {\r\n if (Array.isArray(wizGroup[property]) && wizGroup[property].length) {\r\n wizGroup[property] = wizGroup[property].map(excluded => {\r\n if (excluded && (typeof excluded === \"object\") && excluded.sharedFeatureName) {\r\n excluded.sharedFeatureName = excluded.sharedFeatureName\r\n .trim()\r\n .toLowerCase()\r\n .replace('room - ', '')\r\n }\r\n return excluded\r\n })\r\n }\r\n });\r\n return wizGroup\r\n })\r\n }\r\n return wizardItem\r\n}\r\n\r\nexport const getWizardFeatureAsync = async (feature, groupName) => {\r\n const layout = getCurrentLayout();\r\n const featureGroup = layout.getFeatureGroupByGroupName(groupName);\r\n if (featureGroup) {\r\n const nameToCompare = feature.sharedFeatureName; //lowercased already\r\n if (featureGroup.activeFeature && featureGroup.activeFeature.getLowerCasedSharedFeatureName() === nameToCompare) {\r\n return featureGroup.activeFeature\r\n }\r\n const navItems = layout.designNavigationItems({part: featureGroup}, null, \"\", false, \"all\");\r\n for (let i = 0; i < navItems.length; i++) {\r\n if (navItems[i].part.getLowerCasedSharedFeatureName() === nameToCompare) {\r\n return navItems[i].part;\r\n }\r\n }\r\n }\r\n return await getFeatureFromTheBackendBySku(feature.sku || feature.sharedFeatureName, featureGroup ? featureGroup.partId : \"\");\r\n}\r\n","import workspace from \"./workspace\";\r\nimport sqftShape from \"./shapes/sqftShape\";\r\n//todo sqft-react\r\n// import {setDataToQt} from \"../postMessage\";\r\n\r\nexport default new function() {\r\n\r\n var _self = this;\r\n\r\n this.store = {\r\n shapes: [],\r\n cfg: {},\r\n exportData: null\r\n };\r\n\r\n this.init = function() {\r\n // $('#saveHistory').click(_self.rememberShapes);\r\n // $('#restoreHistory').click(_self.restoreShapesFromHistory);\r\n // $('#consoleShapesFromHistory').click(_self.consoleShapesFromHistory);\r\n window.clearHistory = function() {\r\n this.store.shapes = [];\r\n this.store.exportData = null;\r\n }\r\n };\r\n // this.addEvent = function(eventName, eventData) {\r\n // switch (eventName) {\r\n // case \"newShape\":\r\n // _self.store.shapes.push(eventData);\r\n // break;\r\n // }\r\n // };\r\n this.getHistoryStore = function () {\r\n return _self.store\r\n };\r\n this.rememberShapes = function() {\r\n _self.store.shapes = [];\r\n workspace.getShapes().forEach(function (shape) {\r\n if (!shape.attachedToShape && shape.type !== \"appliances\" && shape.getLines) {\r\n shape.lines = [];\r\n shape.getLines().forEach(function (line) {\r\n line.historyPointFeatures = line.getPointsFeatures();\r\n shape.lines.push(line);\r\n });\r\n }\r\n shape.historyPosition = shape.pos;\r\n _self.store.shapes.push(shape);\r\n });\r\n // console.log('saved', _self.store.shapes);\r\n _self.store.exportData = window.exportData;\r\n };\r\n this.rememberConfig = function(cfg) {\r\n _self.store.cfg = cfg;\r\n };\r\n this.restoreShapesFromHistory = function() {\r\n // console.log('_self.store.shapes', _self.store.shapes);\r\n workspace.removeAllShapes();\r\n _self.store.shapes.forEach(function (newShape) {\r\n if (newShape.lines) {\r\n workspace.addShape(newShape.lines, newShape.shapeType, newShape.historyPosition, newShape.partId, newShape.layoutName);\r\n } else {\r\n workspace.addImage(\r\n newShape.historyProps.image,\r\n newShape.historyProps.width,\r\n newShape.historyProps.height,\r\n newShape.historyProps.attachedTo,\r\n newShape.historyProps.hoverShape,\r\n newShape.historyProps.type,\r\n newShape.historyProps.subType,\r\n newShape.historyProps.historyCallBack,\r\n newShape.historyPosition\r\n );\r\n }\r\n });\r\n _self.store.shapes.forEach(function (newShape) { // go again through all attached shapes and render lines text\r\n if (!newShape.lines) {\r\n newShape.historyProps.historyCallBack()\r\n }\r\n });\r\n // console.log('setted!', workspace.getShapes());\r\n Object.assign(_self.store.exportData, _self.store.cfg);\r\n setDataToQt(_self.store.exportData, true);\r\n setTimeout(function () {\r\n _self.store.exportData = window.exportData;\r\n }, 0);\r\n };\r\n // this.consoleShapesFromHistory = function() {\r\n // console.log('_self.store.shapes', _self.store.shapes);\r\n // };\r\n this.checkForChangesApplied = function () { // this is called after cancel click\r\n // console.log('_self.store.exportData', _self.store.exportData);\r\n // console.log('window.exportData',window.exportData);\r\n let currentShapes = workspace.getShapes();\r\n\r\n //if (_self.store.exportData && (JSON.stringify(_self.store.exportData) !== JSON.stringify(window.exportData))) {\r\n // return true; // check for exportData\r\n //}\r\n\r\n if (currentShapes.length !== _self.store.shapes.length) {\r\n return true; // check for appliances, etc.\r\n }\r\n\r\n let shapesChanged = false;\r\n\r\n workspace.getShapes().forEach(function (shape) { // go through each shape && check for its changes\r\n //if (!shape.attachedToShape && shape.type !== \"appliances\") {\r\n if (shape instanceof sqftShape) {\r\n\r\n var historyShape = _self.store.shapes.find(function (historyShapetoFind) {\r\n return historyShapetoFind.id === shape.id\r\n });\r\n\r\n if (!historyShape) {\r\n shapesChanged = true\r\n }\r\n\r\n shape.getLines().forEach(function (line, index) {\r\n if (historyShape && historyShape.lines && historyShape.lines[index] && JSON.stringify(line.getPointsFeatures()) !== JSON.stringify(historyShape.lines[index].historyPointFeatures)) {\r\n shapesChanged = true\r\n }\r\n });\r\n }\r\n });\r\n\r\n return shapesChanged || false\r\n }\r\n};\r\n","import {\r\n ALLOWED_LABEL_NAV_ITEMS, COUNTERTOP_LABELS,\r\n FEATURES_WITH_0_VALUE_FOR_THE_SLABS,\r\n MEASURE_UNITS,\r\n SHAPE_PART_ID,\r\n SQFT_FEATURES\r\n} from \"../../sqft/constants\";\r\nimport {\r\n FEATURE_STONE,\r\n getFeatureType,\r\n getFeatureUnit,\r\n getSlabUnit,\r\n calculateStoneCost,\r\n getRoomName, getSlabsFeatureGroup\r\n} from \"../../../misc/helpers\";\r\nimport {getCurrentLayout} from \"../../appLayout\";\r\nimport store from \"../../../store\";\r\nimport sqftShapeManager from \"../../sqft/components/canvas/store/sqftShapeManager\";\r\nimport workspace from \"../../sqft/components/canvas/core/workspace\";\r\nimport {getCommonVisualizerType} from \"../../../config\";\r\nimport {getNavItemsFromTheWizard, getWizardGroupsFromTheWizard} from \"../../sqft/helpers/sqftHelperUi\";\r\n//import {isFeatureUnitUseEach} from \"../../sqft/helpers/featureHelper\";\r\n\r\n/**\r\n * @param parentKey {string}\r\n * @param partId {string}\r\n * @param quoteIndex {number || null}\r\n * @returns featureGroup {object}\r\n */\r\nexport const getSimilarFeatureGroup = (parentKey, partId, quoteIndex = null) => {\r\n const state = store.getState();\r\n const quotes = state.quotesState.quotes;\r\n let room;\r\n let qtCategoryName;\r\n if (quoteIndex !== null && quotes[quoteIndex].room) {\r\n const activeQuote = quotes[quoteIndex];\r\n room = activeQuote.room;\r\n qtCategoryName = quotes[quoteIndex].qtCatName ? quotes[quoteIndex].qtCatName : getRoomNameInQuote(quoteIndex);\r\n }\r\n const layout = getCurrentLayout(room);\r\n if (!layout) {\r\n return null\r\n }\r\n\r\n let featureGroup = null;\r\n let neededPartId = partId;\r\n switch (parentKey) {\r\n case \"backsplashes\": {\r\n const isBathroom = getCommonVisualizerType() === \"bathroom\";\r\n featureGroup = layout.getSubPartFromQtCategories(\"backsplash\", qtCategoryName, true);\r\n if (!featureGroup && isBathroom) {\r\n featureGroup = layout.getSubPartFromQtCategories(SQFT_FEATURES.vanity_backsplash, qtCategoryName);\r\n }\r\n neededPartId = isBathroom ? SQFT_FEATURES.vanity_backsplash : \"backsplash\";\r\n break;\r\n }\r\n case \"edges\": {\r\n const mainNeeded = parentKey === \"center_island_countertop\" ? \"center_island_edge\" : \"edge_profile\";\r\n const oppositeNeeded = mainNeeded === \"center_island_edge\" ? \"edge_profile\" : \"center_island_edge\";\r\n featureGroup = layout.getSubPartFromQtCategories(mainNeeded, qtCategoryName);\r\n if (!featureGroup) {\r\n featureGroup = layout.getSubPartFromQtCategories(oppositeNeeded, qtCategoryName);\r\n }\r\n neededPartId = mainNeeded;\r\n break;\r\n }\r\n case SQFT_FEATURES.slabs: {\r\n featureGroup = getSlabsFeatureGroup();\r\n // let countertopsCategory = layout.qtCategories.find(qtCategory => {\r\n // return qtCategory.name === \"Countertops\" || qtCategory.name === \"Countertop\"\r\n // });\r\n //countertopsCategory = countertopsCategory === undefined ? layout.qtCategories[0] : countertopsCategory;\r\n\r\n //let subParts = countertopsCategory.subParts;\r\n //const subPartSlab = subParts.find(designNavigationItem => designNavigationItem.part.partId === SQFT_FEATURES.slabs);\r\n //if (!subPartSlab) {\r\n //subParts.splice(2, 0, featureGroup);\r\n //countertopsCategory.subParts = subParts;\r\n //}\r\n\r\n break;\r\n }\r\n case \"countertop\":\r\n case \"center_island_countertop\": {\r\n const oppositeNeeded = partId === \"center_island_countertop\" ? \"countertop\" : \"center_island_countertop\";\r\n featureGroup = layout.getSubPartFromQtCategories(partId, qtCategoryName);\r\n if (!featureGroup) {\r\n featureGroup = layout.getSubPartFromQtCategories(oppositeNeeded, qtCategoryName);\r\n }\r\n break;\r\n }\r\n case \"corners\": {\r\n featureGroup = layout.getSubPartFromQtCategories(partId, qtCategoryName);\r\n if (!featureGroup) {\r\n featureGroup = layout.getSubPartFromQtCategories('radius', qtCategoryName);\r\n }\r\n break;\r\n }\r\n default:\r\n featureGroup = layout.getSubPartFromQtCategories(partId, qtCategoryName);\r\n break;\r\n }\r\n if (!featureGroup) {\r\n const foundGroup = layout.getFeatureGroupByPartId(neededPartId);\r\n if (foundGroup) {\r\n featureGroup = {part: foundGroup}\r\n }\r\n }\r\n return featureGroup\r\n};\r\n\r\n/**\r\n * @returns {string}\r\n */\r\nexport const getRoomNameInQuote = (quoteIndex) => {\r\n const state = store.getState();\r\n const {quotes} = state.quotesState;\r\n const fabricatorData = state.fabricatorState;\r\n const cartItems = state.cartState.cartItems;\r\n const intl = workspace.intl;\r\n\r\n return getRoomName(quoteIndex, cartItems, quotes, intl.messages, intl.locale, fabricatorData);\r\n}\r\n\r\n/**\r\n * @param {{}} parentsList\r\n * @returns {boolean}\r\n */\r\nexport const isRecalculateSlabNeeded = (parentsList) => {\r\n const useStonePricing = Object.keys(parentsList).some(parentKey => {\r\n if (!parentsList[parentKey] || !parentsList[parentKey].features) {\r\n return false\r\n }\r\n return parentsList[parentKey].features.some((sqftFeature) => {\r\n if (sqftFeature.feature && (FEATURE_STONE === getFeatureType(sqftFeature.feature.dbFeature))) { // dbFeature stone pricing algorithms related\r\n const {serverState, fabricatorState, cartState} = store.getState();\r\n // here we are checking if we should calculate algorithm or not\r\n // (if not - it should be counted as a regular feature, so it should be no grouping and included logic then)\r\n const stoneCost = calculateStoneCost(\r\n sqftFeature.feature.dbFeature,\r\n sqftFeature.initialQuantity,\r\n serverState.stonePricing,\r\n fabricatorState.stoneSupplier,\r\n false,\r\n fabricatorState.settings,\r\n cartState,\r\n );\r\n return !!stoneCost;\r\n }\r\n return false\r\n })\r\n })\r\n const useSlabImagePricing = parentsList.slabs.features.length > 0;\r\n\r\n return useStonePricing || useSlabImagePricing\r\n}\r\n\r\n/**\r\n * @param parentList {object}\r\n * @param firstOpen {boolean}\r\n * @returns sqftFeatures {object}\r\n */\r\nexport const recalculateSlabs = (parentList, firstOpen = false) => {\r\n const state = store.getState();\r\n const fabricatorSettings = state.fabricatorState.settings;\r\n let updatedParentList;\r\n if (fabricatorSettings.useCategorySwitching) {\r\n updatedParentList = splitPriceBetweenSlabsMaterial(parentList); // will divide total price between shapes\r\n } else {\r\n updatedParentList = setPriceIntoSingleFeature(parentList, firstOpen); // will display included price\r\n }\r\n\r\n return updatedParentList;\r\n};\r\n\r\n/**\r\n * @param sqftFeatures {object}\r\n * @param firstOpen {boolean}\r\n * @returns sqftFeatures {object}\r\n */\r\nexport const setPriceIntoSingleFeature = (sqftFeatures, firstOpen = false) => {\r\n let commonSharedFeatureNames = getCommonSharedFeatureNames(sqftFeatures); // {sharedName: \"\", totalQuantity: 0, biggestFeature, sqftFeatures: []}\r\n if (commonSharedFeatureNames.length) { // 2) set each feature new fake quantity\r\n commonSharedFeatureNames.forEach(sharedObject => {\r\n sharedObject.sqftFeatures.forEach(sqftFeature => {\r\n const {fabricatorState} = store.getState();\r\n if (fabricatorState.isCaesarStone) {\r\n if (firstOpen) {\r\n if (sharedObject.biggestFeature && (sqftFeature.sqftId === sharedObject.biggestFeature.sqftId)) {\r\n sqftFeature.sortOrder = 1;\r\n } else {\r\n sqftFeature.sortOrder = 0;\r\n }\r\n }\r\n } else {\r\n //QCDES-1507 calculates slab algorithm pricing\r\n sqftFeature.displayFakeQuantity = sqftFeature.initialQuantity; // removed for CAESARSTONE, don't know about the others\r\n if (sharedObject.biggestFeature && (sqftFeature.sqftId === sharedObject.biggestFeature.sqftId)) {\r\n sqftFeature.quantity = sharedObject.totalQuantity; // removed for CAESARSTONE, don't know about the others\r\n if (firstOpen) {\r\n sqftFeature.sortOrder = 1;\r\n }\r\n sqftFeature.isBiggestFeature = true;\r\n } else {\r\n // removed for CAESARSTONE, don't know about the others\r\n sqftFeature.quantityRounded = 0;\r\n sqftFeature.quantity = 0;\r\n sqftFeature.isQuantityAddedToBiggestFeature = true;\r\n if (firstOpen) {\r\n sqftFeature.sortOrder = 0;\r\n }\r\n }\r\n }\r\n });\r\n });\r\n if (firstOpen) {\r\n sqftFeatures = sortSqftFeatures(sqftFeatures);\r\n }\r\n }\r\n console.log(\"commonSharedFeatureNames\", commonSharedFeatureNames);\r\n return sqftFeatures\r\n};\r\n\r\nconst createSqftFeaturesObj = () => {\r\n let sqftFeaturesObj = {};\r\n for (const availablePartIdsKey in SQFT_FEATURES) {\r\n sqftFeaturesObj[availablePartIdsKey] = {\r\n subPart: null,\r\n features: []\r\n }\r\n }\r\n\r\n return sqftFeaturesObj;\r\n}\r\n\r\n/**\r\n * @param sqftFeatures {object}\r\n * @param firstOpen {boolean}\r\n * @returns sqftFeatures {object}\r\n */\r\nexport const splitPriceBetweenSlabsMaterial = (sqftFeatures, firstOpen = false) => {\r\n let commonSharedFeatureNames = getCommonSharedFeatureNames(sqftFeatures);\r\n if (commonSharedFeatureNames.length) {\r\n commonSharedFeatureNames.forEach(sharedObject => {\r\n sharedObject = sortSharedObject(sharedObject, firstOpen);\r\n updateSharedObjectWithGroupQuantity(sharedObject);\r\n });\r\n if (firstOpen) {\r\n sqftFeatures = sortSqftFeatures(sqftFeatures);\r\n }\r\n }\r\n console.log(\"commonSharedFeatureNames\", commonSharedFeatureNames);\r\n return sqftFeatures\r\n};\r\n\r\nconst sortSqftFeatures = (sqftFeatures) => {\r\n Object.keys(sqftFeatures).forEach(parentKey => {\r\n if (sqftFeatures[parentKey]\r\n && sqftFeatures[parentKey].features\r\n && parentKey !== \"edges\"\r\n ) {\r\n sqftFeatures[parentKey].features = sqftFeatures[parentKey].features.sort((a, b) => b.sortOrder - a.sortOrder);\r\n }\r\n })\r\n\r\n return sqftFeatures\r\n}\r\n/**\r\n * @return array of objects [{sharedName: string, totalQuantity: number, biggestFeature: feature, sqftFeatures: []}]\r\n */\r\nconst getCommonSharedFeatureNames = (sqftFeatures) => {\r\n let commonSharedFeatureNames = [];\r\n Object.keys(sqftFeatures).forEach(parentKey => { // 1) create common objects and find the biggest feature\r\n if (sqftFeatures[parentKey]\r\n && sqftFeatures[parentKey].features\r\n && parentKey !== \"edges\"\r\n && parentKey !== \"slabs\"\r\n ) {\r\n sqftFeatures[parentKey].features.forEach(sqftFeature => {\r\n if (sqftFeature.feature && Array.isArray(sqftFeature.feature.dbFeature.stonePricingId)\r\n && sqftFeature.feature.dbFeature.stonePricingId.length) {\r\n const alreadyAdded = commonSharedFeatureNames.find(sharedObject => {\r\n return sharedObject.sharedName === sqftFeature.feature.dbFeature.sharedFeatureName\r\n });\r\n if (!alreadyAdded) {\r\n commonSharedFeatureNames.push({\r\n sharedName: sqftFeature.feature.dbFeature.sharedFeatureName,\r\n totalQuantity: sqftFeature.disabled ? 0 : sqftFeature.initialQuantity,\r\n sqftFeatures: [sqftFeature],\r\n biggestFeature: sqftFeature.disabled ? null : sqftFeature,\r\n })\r\n } else {\r\n alreadyAdded.sqftFeatures.push(sqftFeature);\r\n if (!sqftFeature.disabled) {\r\n alreadyAdded.totalQuantity += sqftFeature.initialQuantity;\r\n if (!alreadyAdded.biggestFeature) {\r\n alreadyAdded.biggestFeature = sqftFeature;\r\n } else if (sqftFeature.feature.partId === \"countertop\") {\r\n if (alreadyAdded.biggestFeature.partId !== \"countertop\" || (alreadyAdded.biggestFeature.initialQuantity < sqftFeature.initialQuantity)) {\r\n alreadyAdded.biggestFeature = sqftFeature;\r\n }\r\n } else if (sqftFeature.feature.partId === \"center_island_countertop\") {\r\n if ((alreadyAdded.biggestFeature.partId !== \"countertop\" && alreadyAdded.biggestFeature.partId !== \"center_island_countertop\")\r\n || (alreadyAdded.biggestFeature.partId === \"center_island_countertop\" && alreadyAdded.biggestFeature.initialQuantity < sqftFeature.initialQuantity)) {\r\n alreadyAdded.biggestFeature = sqftFeature;\r\n }\r\n } else if ((alreadyAdded.biggestFeature.partId !== \"countertop\") && (alreadyAdded.biggestFeature.partId !== \"center_island_countertop\")\r\n && alreadyAdded.biggestFeature.initialQuantity < sqftFeature.initialQuantity) { // backsplash\r\n alreadyAdded.biggestFeature = sqftFeature;\r\n }\r\n }\r\n }\r\n }\r\n })\r\n }\r\n });\r\n\r\n return commonSharedFeatureNames\r\n}\r\n/**\r\n * set group price foreach sqftFeature inside sharedObject\r\n * @param sharedObject {object}\r\n * @returns sharedObject {object}\r\n */\r\nconst updateSharedObjectWithGroupQuantity = (sharedObject) => {\r\n const quantityPerFeature = sharedObject.totalQuantity / sharedObject.sqftFeatures.length;\r\n sharedObject.sqftFeatures.forEach(sqftFeature => {\r\n const {fabricatorState} = store.getState();\r\n if (!fabricatorState.isCaesarStone) {\r\n sqftFeature.group = {\r\n quantityPerFeature: quantityPerFeature,\r\n totalFeaturesInGroup: sharedObject.sqftFeatures.filter(sqftFeature => !sqftFeature.disabled).length,\r\n totalQuantity: sharedObject.totalQuantity,\r\n }\r\n }\r\n });\r\n\r\n return sharedObject\r\n}\r\n\r\n/**\r\n * Returns sorted sharedObject\r\n * @param sharedObject {object}\r\n * @param firstOpen {boolean}\r\n * @returns sharedObject {object}\r\n */\r\nconst sortSharedObject = (sharedObject, firstOpen) => {\r\n sharedObject.sqftFeatures.forEach(sqftFeature => {\r\n if (firstOpen) {\r\n if (sharedObject.biggestFeature && (sqftFeature.sqftId === sharedObject.biggestFeature.sqftId)) {\r\n sqftFeature.sortOrder = 1;\r\n } else {\r\n sqftFeature.sortOrder = 0;\r\n }\r\n }\r\n });\r\n\r\n return sharedObject\r\n}\r\n\r\n/**\r\n * Returns needed for popup data\r\n * @param sqftPassedData {object} // it has sqftCalcData - data that comes from sqft\r\n * @param previouslyAddedSqftFeatures {object}\r\n * @param intl {object} // react intl instance\r\n * @param fabricatorData {object}\r\n * @param cartItems {array}\r\n * @param sqftFromFeature {object}\r\n * @param quoteIndex {number}\r\n * @param visualizerType {string}\r\n * @param stonePricing {object}\r\n * @returns sqftFeatures {object}\r\n */\r\nexport function getParsedSqftData (\r\n sqftPassedData,\r\n previouslyAddedSqftFeatures,\r\n intl,\r\n fabricatorData,\r\n cartItems,\r\n sqftFromFeature,\r\n quoteIndex,\r\n visualizerType,\r\n stonePricing,\r\n) {\r\n let sqftFeatures = createSqftFeaturesObj();\r\n\r\n if (!sqftPassedData || !sqftPassedData.countertops) {\r\n return sqftFeatures\r\n }\r\n\r\n const layout = getCurrentLayout(visualizerType);\r\n // const firstEdge = sqftPassedData.countertops ? sqftPassedData.countertops.filter(shape => shape.type === \"edge\")[0] : null\r\n // if (firstEdge) {\r\n // const featureGroup = getSimilarFeatureGroup(\"edges\", firstEdge.partId);\r\n // if (featureGroup) {\r\n // let navRequests = NavigationRequests();\r\n // await navRequests.checkIfAllFeaturesReceived(featureGroup, \"\", null)\r\n // }\r\n // }\r\n let isFromCartFeatureAdded = false;\r\n let feature = null;\r\n\r\n const state = store.getState();\r\n const isSlabPricingEnabled = state.sqftSlabState.isSlabPricingEnabled;\r\n\r\n Object.keys(sqftFeatures).forEach(parentKey => {\r\n const isCountertop = parentKey === \"countertop\" || parentKey === \"center_island_countertop\";\r\n let featuresPassed = [];\r\n\r\n // Skip adding slab features if slab pricing is disabled;\r\n if (parentKey === SQFT_FEATURES.slabs && !isSlabPricingEnabled) {\r\n return;\r\n }\r\n if (isCountertop) {\r\n featuresPassed = prepareCountertopFeaturesPassed(sqftPassedData, layout, parentKey);\r\n } else if (parentKey === SQFT_FEATURES.slabs) {\r\n featuresPassed = prepareSlabFeaturesPassed(sqftPassedData.slabImagesTotalArea);\r\n } else if (parentKey === SQFT_FEATURES.edges || parentKey === SQFT_FEATURES.backsplashes) {\r\n let shapeType;\r\n switch (parentKey) {\r\n case \"edges\":\r\n shapeType = \"edge\";\r\n break;\r\n case \"backsplashes\":\r\n shapeType = \"backsplash\"\r\n break;\r\n default:\r\n shapeType = parentKey\r\n break;\r\n }\r\n\r\n if (sqftPassedData.manualCalculate) {\r\n featuresPassed = prepareEdgesAndBacksplashesManual(sqftPassedData, shapeType, featuresPassed);\r\n } else {\r\n featuresPassed = prepareEdgesAndBacksplashes(sqftPassedData, shapeType, featuresPassed);\r\n }\r\n\r\n // console.log(\"featuresPassed edges\", featuresPassed);\r\n // } else {\r\n // featuresPassed = sqftPassedData[parentKey]\r\n } else if (parentKey === SQFT_FEATURES.crown_molding) {\r\n featuresPassed = prepareCrownMoldings(sqftPassedData, parentKey);\r\n } else if (parentKey === SQFT_FEATURES.handle && sqftPassedData.controllers && sqftPassedData.controllers.handles) {\r\n featuresPassed = prepareHandles(sqftPassedData.controllers.handles, parentKey);\r\n } else if (Object.values(ALLOWED_LABEL_NAV_ITEMS).includes(parentKey)) {\r\n featuresPassed = prepareOtherCountertops(sqftPassedData.countertops, parentKey);\r\n } else if (parentKey === SQFT_FEATURES.radius) {\r\n featuresPassed = prepareRadius(sqftPassedData.radii, parentKey);\r\n } else if (parentKey === SQFT_FEATURES.corners) {\r\n featuresPassed = prepareCorners(sqftPassedData.corners, parentKey);\r\n } else if (parentKey === SQFT_FEATURES.underlayment && sqftPassedData.underlayment && sqftPassedData.underlayment.sections) {\r\n featuresPassed = prepareUnderlayment(sqftPassedData.underlayment.sections, parentKey);\r\n } else if (parentKey === SQFT_FEATURES.bumpouts && sqftPassedData.bumpouts) {\r\n featuresPassed = sqftPassedData.bumpouts\r\n }\r\n\r\n if (featuresPassed && featuresPassed.length) {\r\n featuresPassed.forEach(featurePassed => {\r\n const featureGroup = getSimilarFeatureGroup(parentKey, featurePassed.partId, quoteIndex);\r\n let isSqftFromFeature = false;\r\n let fromWizardGroupId = \"\";\r\n if (featureGroup) {\r\n if (!sqftFeatures[parentKey].subPart) {\r\n sqftFeatures[parentKey].subPart = featureGroup;\r\n }\r\n const quantity = getQuantityFromCalculator(parentKey, featurePassed, sqftPassedData);\r\n const displayFakePrice = getFakePriceFromCalculator(parentKey, featurePassed, sqftPassedData, cartItems, quoteIndex);\r\n //const displayFakeQuantity = getFakeQuantityFromCalculator(parentKey, featurePassed, sqftPassedData);\r\n [feature, isSqftFromFeature, isFromCartFeatureAdded, fromWizardGroupId] = getFeatureFromSQFT(\r\n featurePassed,\r\n previouslyAddedSqftFeatures,\r\n featureGroup,\r\n parentKey,\r\n quoteIndex,\r\n isCountertop,\r\n sqftFromFeature,\r\n cartItems,\r\n layout,\r\n isFromCartFeatureAdded,\r\n );\r\n\r\n let displayFakeQuantity = parentKey === SQFT_FEATURES.slabs ? featurePassed.totalSlabs : null;\r\n let displayFakeFeatureGroupName = parentKey === SQFT_FEATURES.slabs ? SQFT_FEATURES.slabs : null;\r\n const featureToCheckUnit = feature || featureGroup.part.features[0];\r\n const featureUnit = featureToCheckUnit ? getFeatureUnit(featureToCheckUnit, intl, fabricatorData, quantity) : \"\";\r\n const unit = parentKey === SQFT_FEATURES.slabs ? getSlabUnit(featurePassed.totalSlabs, intl) : featureUnit;\r\n\r\n sqftShapeManager.setShapeFeature(featurePassed.id, feature);\r\n sqftFeatures[parentKey].features.push({\r\n disabled: featurePassed.isDisabledInPopup || false, //previouslyAddedSqftFeature ? previouslyAddedSqftFeature.disabled : false,\r\n feature,\r\n displayFakeFeatureGroupName,\r\n partId: featurePassed.partId,\r\n unit,\r\n subPart: featureGroup,\r\n //quantity: isFeatureUnitUseEach(feature) ? 1 : quantity,\r\n quantity: quantity,\r\n quantityRounded: Math.ceil(quantity),\r\n displayFakeQuantity: displayFakeQuantity,\r\n displayFakePrice,\r\n initialQuantity: quantity,\r\n sqftId: featurePassed.id,\r\n qtCatName: featurePassed.qtCatName,\r\n isSqftFromFeature,\r\n fromWizardGroupId,\r\n shouldShowEyeBall: featurePassed.shouldShowEyeBall !== undefined ? featurePassed.shouldShowEyeBall : true,\r\n shouldUseSlabPricing: featurePassed.shouldUseSlabPricing,\r\n })\r\n } else {\r\n console.log(\"No feature group added to the QuotingTool\", parentKey, featurePassed.partId);\r\n }\r\n });\r\n }\r\n });\r\n\r\n if (isSlabPricingEnabled && isRecalculateSlabNeeded(sqftFeatures)) {\r\n sqftFeatures = recalculateSlabs(sqftFeatures, true);\r\n console.log(\"stonePricing\", stonePricing);\r\n console.log(\"fabricatorData.pricingPreset\", fabricatorData.pricingPreset);\r\n }\r\n\r\n console.log(\"sqftFeatures\", sqftFeatures);\r\n return sqftFeatures\r\n}\r\n\r\n/**\r\n * Returns prepared slabFeatures that comes from sqft\r\n * @param slabImagesGrouped {object} // data that comes from sqft\r\n * @returns featuresPassed [array]\r\n */\r\nconst prepareSlabFeaturesPassed = (slabImagesGrouped) => {\r\n let featuresPassed = [];\r\n slabImagesGrouped\r\n .forEach(slabImagesGroup => {\r\n const quantity = Math.ceil(slabImagesGroup.totalArea);\r\n featuresPassed.push(Object.assign({...slabImagesGroup}, {\r\n partId: SQFT_FEATURES.slabs,\r\n squareFeet: quantity,\r\n pricePerArea: slabImagesGroup.pricePerArea,\r\n shouldUseSlabPricing: slabImagesGroup.shouldUseSlabPricing,\r\n }));\r\n });\r\n\r\n return featuresPassed;\r\n}\r\n\r\n/**\r\n * Returns prepared countertops that comes from sqft\r\n * @param sqftPassedData {object} // data that comes from sqft\r\n * @param layout {object} // layout\r\n * @param parentKey {string} // parentKey\r\n * @returns featuresPassed [array]\r\n */\r\nconst prepareCountertopFeaturesPassed = (sqftPassedData, layout, parentKey) => {\r\n const countertopExist = layout.getSubPartFromQtCategories(\"countertop\");\r\n const centerIslandExist = layout.getSubPartFromQtCategories(\"center_island_countertop\");\r\n let featuresPassed = []\r\n if (sqftPassedData.manualCalculate) {\r\n featuresPassed = sqftPassedData.countertops\r\n .filter(manCountertopObject => manCountertopObject.partId === parentKey)\r\n .map(manCountertopObject => {\r\n return {\r\n id: manCountertopObject.id,\r\n squareFeet: manCountertopObject.area,\r\n partId: manCountertopObject.partId\r\n }\r\n })\r\n } else if (sqftPassedData.countertops && sqftPassedData.countertops.length) {\r\n featuresPassed = sqftPassedData.countertops.filter(shape => {\r\n if (shape.partId === \"countertop\" || shape.partId === \"center_island_countertop\") {\r\n if (countertopExist && !centerIslandExist) {\r\n shape.partId = countertopExist.part.partId;\r\n } else if (centerIslandExist && !countertopExist) {\r\n shape.partId = centerIslandExist.part.partId;\r\n }\r\n }\r\n\r\n return shape.shapeType && (shape.partId === parentKey)\r\n && ![\"backsplash\", SHAPE_PART_ID.seamPiece, SHAPE_PART_ID.slabPlaceHolder].includes(shape.type)\r\n })\r\n }\r\n\r\n return featuresPassed;\r\n}\r\n\r\n/**\r\n * Returns other prepared countertops that comes from sqft\r\n * @param sqftPassedDataCountertops {object} // data that comes from sqft\r\n * @param parentKey {string} // parentKey\r\n * @returns featuresPassed [array]\r\n */\r\nconst prepareOtherCountertops = (sqftPassedDataCountertops, parentKey) => {\r\n return sqftPassedDataCountertops\r\n .filter(manCountertopObject => manCountertopObject.partId === parentKey)\r\n .map(manCountertopObject => {\r\n return {\r\n id: manCountertopObject.id,\r\n squareFeet: manCountertopObject.squareFeet,\r\n partId: manCountertopObject.partId,\r\n qtCatName: manCountertopObject.qtCatName,\r\n featureId: manCountertopObject.featureId,\r\n }\r\n });\r\n}\r\n\r\n/**\r\n * Returns other prepared radius's that comes from sqft\r\n * @param sqftPassedDataRadius {object} // data that comes from sqft\r\n * @returns featuresPassed [array]\r\n */\r\nconst prepareRadius = (sqftPassedDataRadius) => {\r\n return sqftPassedDataRadius\r\n .filter(radiusObject => radiusObject.featureId !== null)\r\n .map(radiusObject => {\r\n return {\r\n id: radiusObject.id,\r\n qtCatName: radiusObject.qtCatName,\r\n partId: SQFT_FEATURES.radius,\r\n featureId: radiusObject.featureId,\r\n quantity: 1\r\n }\r\n });\r\n}\r\n\r\n/**\r\n * Returns other prepared Handlers that comes from sqft\r\n * @param sqftPassedDataHandler {object} // data that comes from sqft\r\n * @param parentKey {string}\r\n * @returns featuresPassed [array]\r\n */\r\nconst prepareHandles = (sqftPassedDataHandler, parentKey) => {\r\n return sqftPassedDataHandler\r\n .filter(handlerObject => handlerObject.featureId !== null)\r\n .map(radiusObject => {\r\n return {\r\n id: radiusObject.id,\r\n qtCatName: radiusObject.qtCatName,\r\n partId: parentKey,\r\n featureId: radiusObject.featureId,\r\n quantity: 1\r\n }\r\n });\r\n}\r\n\r\n/**\r\n * Returns other prepared corner's that comes from sqft\r\n * @param sqftPassedDataRadius {object} // data that comes from sqft\r\n * @returns featuresPassed [array]\r\n */\r\nconst prepareCorners = (sqftPassedDataRadius) => {\r\n return sqftPassedDataRadius\r\n .filter(radiusObject => radiusObject.featureId !== null)\r\n .map(radiusObject => {\r\n return {\r\n id: radiusObject.id,\r\n qtCatName: radiusObject.qtCatName,\r\n partId: SQFT_FEATURES.corners,\r\n featureId: radiusObject.featureId,\r\n quantity: 1\r\n }\r\n });\r\n}\r\n\r\n/**\r\n * Returns other prepared corner's that comes from sqft\r\n * @param sqftPassedDataUnderlayment {object} // data that comes from sqft\r\n * @returns featuresPassed [array]\r\n */\r\nconst prepareUnderlayment = (sqftPassedDataUnderlayment) => {\r\n return sqftPassedDataUnderlayment\r\n //.filter(passedData => passedData.featureId !== null)\r\n .map(passedData => {\r\n return {\r\n id: passedData.id,\r\n partId: SQFT_FEATURES.underlayment,\r\n featureId: passedData.featureId,\r\n qtCatName: passedData.qtCatName,\r\n quantity: passedData.quantity\r\n }\r\n });\r\n}\r\n\r\n/**\r\n * Parse quantity from sqft // todo rewrite and remove this\r\n * @param parentKey {object} // data that comes from sqft\r\n * @param featurePassed {object} // data that comes from sqft\r\n * @param sqftPassedData {object} // data that comes from sqft\r\n * @returns featuresPassed [array]\r\n */\r\nconst getQuantityFromCalculator = (parentKey, featurePassed, sqftPassedData) => {\r\n let quantity;\r\n switch (parentKey) {\r\n case \"edges\":\r\n case \"backsplashes\":\r\n case SQFT_FEATURES.crown_molding:\r\n quantity = sqftPassedData.measureUnit === MEASURE_UNITS.Metric\r\n ? +(+(featurePassed.length).toFixed(3)).toFixed(2)\r\n : featurePassed.length\r\n break\r\n case SQFT_FEATURES.radius:\r\n case SQFT_FEATURES.corners:\r\n case SQFT_FEATURES.handle:\r\n case SQFT_FEATURES.underlayment:\r\n quantity = featurePassed.quantity;\r\n break\r\n case \"countertop\":\r\n case \"center_island_countertop\":\r\n case \"slabs\":\r\n quantity = featurePassed.squareFeet;\r\n break\r\n default:\r\n if (Object.keys(COUNTERTOP_LABELS).includes(parentKey)) {\r\n quantity = featurePassed.squareFeet;\r\n } else {\r\n quantity = featurePassed.quantity ? featurePassed.quantity : featurePassed.squareFeet;\r\n }\r\n }\r\n\r\n return quantity\r\n}\r\n\r\n/**\r\n * Prepare Edges and Backsplashes from sqft\r\n * @param sqftPassedData {object} // data that comes from sqft\r\n * @param shapeType {string}\r\n * @param featuresPassed {array}\r\n * @returns featuresPassed [array]\r\n */\r\nconst prepareEdgesAndBacksplashes = (sqftPassedData, shapeType, featuresPassed) => {\r\n sqftPassedData.countertops\r\n .filter(shape => shape.type === shapeType)\r\n .forEach(edge => {\r\n const length = edge.length || edge.squareFeet;\r\n featuresPassed.push(Object.assign(\r\n edge, {\r\n partId: edge.partId || shapeType,\r\n fromWizardGroupId: edge.fromWizardGroupId, //todo[Anton] this one is not passing here\r\n length: length,\r\n qtCatName: edge.qtCatName,\r\n featureId: edge.backsplashFeatureId ? edge.backsplashFeatureId : edge.featureId,\r\n shouldShowEyeBall: edge.shouldShowEyeBall !== undefined ? edge.shouldShowEyeBall : true,\r\n }));\r\n });\r\n\r\n return featuresPassed\r\n}\r\n\r\n/**\r\n * Prepare CrownMoldings from sqft\r\n * @param sqftPassedData {object} // data that comes from sqft\r\n * @param shapeType {string}\r\n * @returns featuresPassed [array]\r\n */\r\nconst prepareCrownMoldings = (sqftPassedData, shapeType) => {\r\n const featuresPassed = [];\r\n sqftPassedData.countertops\r\n .filter(shape => shape.type === shapeType)\r\n .forEach(crownMolding => {\r\n const length = crownMolding.length || crownMolding.squareFeet;\r\n featuresPassed.push(Object.assign(\r\n crownMolding, {\r\n partId: crownMolding.partId || shapeType,\r\n length: length,\r\n qtCatName: crownMolding.qtCatName,\r\n }));\r\n });\r\n\r\n return featuresPassed\r\n}\r\n\r\n/**\r\n * Prepare Edges and Backsplashes from sqft\r\n * @param sqftPassedData {object} // data that comes from sqft\r\n * @param shapeType {string}\r\n * @param featuresPassed {array}\r\n * @returns featuresPassed [array]\r\n */\r\nconst prepareEdgesAndBacksplashesManual = (sqftPassedData, shapeType, featuresPassed) => {\r\n let sqftData = [];\r\n switch (shapeType) {\r\n case \"edge\":\r\n sqftData = sqftPassedData.edges;\r\n break\r\n case \"backsplash\":\r\n sqftData = sqftPassedData.backsplashes;\r\n break\r\n }\r\n sqftData\r\n .forEach(edge => {\r\n const edgeLength = edge.length;\r\n const alreadyAdded = featuresPassed.find(addedEdge => {\r\n return addedEdge.attachedToParentId && (addedEdge.featureId === edge.featureId)\r\n });\r\n if (alreadyAdded) {\r\n alreadyAdded.length += edgeLength;\r\n } else {\r\n featuresPassed.push(Object.assign(edge, {featureId: edge.featureId, partId: edge.partId, length: edgeLength}));\r\n }\r\n });\r\n\r\n return featuresPassed\r\n}\r\n\r\n/**\r\n * //todo it is better to rewrite this fake price logic and calculate the price right in the cart\r\n * Get fake price for display\r\n * @param parentKey {object} // data that comes from sqft\r\n * @param featurePassed {object} // data that comes from sqft\r\n * @param sqftPassedData {object} // data that comes from sqft\r\n * @param cartItems\r\n * @param quoteIndex\r\n * @returns featuresPassed [array]\r\n */\r\nconst getFakePriceFromCalculator = (parentKey, featurePassed, sqftPassedData, cartItems, quoteIndex) => {\r\n let fakePrice ;\r\n /** If the number of slabs is greater than one, set the price of all other materials to zero, as only the cost of slabs will be calculated. */\r\n if (FEATURES_WITH_0_VALUE_FOR_THE_SLABS[parentKey]) {\r\n const slabAlreadyInTheCart = cartItems.find(cartItem => {\r\n return (cartItem.sqftId) && (cartItem.partId === SQFT_FEATURES.slabs) && (cartItem.currentQuote === quoteIndex)\r\n })\r\n if (sqftPassedData.slabImagesTotalArea.length > 0 || slabAlreadyInTheCart) {\r\n const activeSlabsExist = sqftPassedData.slabImagesTotalArea.some(slabImageAreaGroup => !slabImageAreaGroup.isDisabledInPopup);\r\n if (activeSlabsExist) {\r\n fakePrice = 0;\r\n }\r\n }\r\n /** Applying the hardcoded price for slabs, which was set in the slab popup. */\r\n } else if (parentKey === SQFT_FEATURES.slabs) {\r\n if (featurePassed.pricePerArea) {\r\n fakePrice = parseFloat(featurePassed.pricePerArea) * getQuantityFromCalculator(parentKey, featurePassed, sqftPassedData);\r\n }\r\n }\r\n\r\n return fakePrice\r\n}\r\n\r\n/**\r\n * Returns parse sqft passed feature id and returns feature or null\r\n * @param featurePassed {object} // data that comes from sqft\r\n * @param parentKey {string} //\r\n * @param featureGroup {object} featureGroup\r\n * @param layout {object}\r\n * @returns feature {object}\r\n */\r\nconst getFeatureFromCalculatorPassedId = (featurePassed, parentKey, featureGroup, layout) => {\r\n let feature = null;\r\n let idToFind = null;\r\n switch (parentKey) {\r\n case \"edges\":\r\n case \"backsplashes\":\r\n case \"countertop\":\r\n case \"center_island_countertop\":\r\n case \"slabs\":\r\n case SHAPE_PART_ID.slabPlaceHolder:\r\n idToFind = +featurePassed.featureId;\r\n break\r\n default:\r\n idToFind = featurePassed.featureId ? featurePassed.featureId: null;\r\n }\r\n if (idToFind) {\r\n feature = layout.getFeatureById(idToFind, true);\r\n if (!feature && featurePassed.slabParentPartId) {\r\n const slabParentFeatureGroup = layout.getFeatureGroupByPartId(featurePassed.slabParentPartId);\r\n if (slabParentFeatureGroup) {\r\n feature = slabParentFeatureGroup.getFeatureById(featurePassed.featureId, true);\r\n }\r\n }\r\n if (!feature && featurePassed.partId) {\r\n const slabParentFeatureGroup = layout.getFeatureGroupByPartId(featurePassed.partId);\r\n if (slabParentFeatureGroup) {\r\n feature = slabParentFeatureGroup.getFeatureById(featurePassed.featureId, true);\r\n }\r\n }\r\n // const navFeatures = getNavItems(featureGroup);//layout.designNavigationItems(featureGroup, {}, \"\", false, true);\r\n //\r\n // const navFeature = navFeatures.find(navItem => navItem.part.dbFeature.id === idToFind);\r\n // if (navFeature) {\r\n // feature = navFeature.part;\r\n // } else if (parentKey === \"slabs\") {\r\n // feature = layout.getFeatureById(idToFind);\r\n // } else if (parentKey === \"top_cabinet\" || parentKey === \"bottom_cabinet\") {\r\n // feature = layout.getFeatureById(idToFind, true);\r\n // }\r\n }\r\n\r\n return feature;\r\n}\r\n\r\n/**\r\n * Returns parse sqft passed feature id and returns feature or null\r\n * @param featurePassed {object} // data that comes from sqft\r\n // * @param previouslyAddedSqftFeatures {object} //\r\n * @param previouslyAddedSqftFeatures\r\n * @param featureGroup {object} //\r\n * @param parentKey {string} //\r\n * @param activeQuoteIndex {number} //\r\n * @param isCountertop {boolean} //\r\n * @param sqftFromFeature {object} //\r\n * @param cartItems {object} //\r\n * @param layout {object} //\r\n * @param isFromCartFeatureAdded {boolean} //\r\n * @returns feature {object}\r\n */\r\nconst getFeatureFromSQFT = (\r\n featurePassed,\r\n previouslyAddedSqftFeatures,\r\n featureGroup,\r\n parentKey,\r\n activeQuoteIndex,\r\n isCountertop,\r\n sqftFromFeature,\r\n cartItems,\r\n layout,\r\n isFromCartFeatureAdded,\r\n) => {\r\n let isSqftFromFeature = false;\r\n const previouslyAddedSqftFeature = previouslyAddedSqftFeatures.find(existing => {\r\n return featurePassed.id && (existing.sqftId === featurePassed.id) && (existing.currentQuote === activeQuoteIndex)\r\n });\r\n let feature = getFeatureFromCalculatorPassedId(featurePassed, parentKey, featureGroup, layout);\r\n\r\n if (cartItems.length && !feature) {\r\n const alreadyAdded = cartItems.find(cartItem => {\r\n return (cartItem.sqftId) && (cartItem.sqftId === featurePassed.id) && (cartItem.currentQuote === activeQuoteIndex)\r\n })\r\n const hasSamePartIdWithCartFeature = alreadyAdded && featureGroup.part.partId === alreadyAdded.cartFeature.partId\r\n if (hasSamePartIdWithCartFeature) {\r\n feature = alreadyAdded.cartFeature;\r\n }\r\n }\r\n\r\n const hasSamePartIdWithPreviouslyAddedFeature = previouslyAddedSqftFeature && previouslyAddedSqftFeature.partId === featureGroup.part.partId\r\n if (!feature && hasSamePartIdWithPreviouslyAddedFeature) {\r\n feature = previouslyAddedSqftFeature.feature;\r\n }\r\n if (!feature && (isCountertop || parentKey === \"backsplashes\") && sqftFromFeature\r\n && (sqftFromFeature.cartFeature.partId === featureGroup.part.partId)) {\r\n feature = sqftFromFeature.cartFeature;\r\n if (!isFromCartFeatureAdded) {\r\n isSqftFromFeature = true;\r\n }\r\n isFromCartFeatureAdded = true;\r\n }\r\n\r\n const state = store.getState();\r\n const {wizardActiveItem, wizardIsActive} = state.wizardState;\r\n\r\n let fromWizardGroupId = featurePassed.fromWizardGroupId;\r\n\r\n if (!fromWizardGroupId && wizardIsActive && wizardActiveItem) {\r\n const featureGroup = layout.getFeatureGroupByPartId(featurePassed.partId);\r\n if (featureGroup) {\r\n const wizardSteps = getWizardGroupsFromTheWizard(featureGroup.dbName || featureGroup.partName);\r\n if (wizardSteps.length) {\r\n // we don't set it to featurePassed, as we need to have all navItems in the dropdown, here we just find\r\n // at least something from the wizard\r\n fromWizardGroupId = wizardSteps[0].stepGroups[0].id;\r\n }\r\n }\r\n }\r\n\r\n const allNavItems = fromWizardGroupId\r\n ? getNavItemsFromTheWizard(featureGroup, \"\", {}, fromWizardGroupId)\r\n : layout.designNavigationItems(featureGroup, {}, \"\", false, true);\r\n\r\n // console.log(\"allNavItems\", allNavItems);\r\n\r\n if (!feature && sqftFromFeature && (\r\n ((parentKey === \"backsplashes\") && sqftFromFeature.cartFeature.partId.includes(\"countertop\"))\r\n || (isCountertop && sqftFromFeature.cartFeature.partId.includes(\"backsplash\"))\r\n || (isCountertop && sqftFromFeature.cartFeature.partId.includes(\"countertop\")\r\n && featureGroup.part.partId !== sqftFromFeature.cartFeature.partId) // case if 2 countertops\r\n )) {\r\n const name1 = sqftFromFeature.cartFeature.getSplittedFeatureName();\r\n const navItem = allNavItems.find(navItem => {\r\n return navItem.part.getSplittedFeatureName() === name1;\r\n });\r\n if (navItem) {\r\n feature = navItem.part;\r\n }\r\n }\r\n if (!feature && featureGroup.part.activeFeature && (!fromWizardGroupId || allNavItems.some(navItem => {\r\n return navItem.part.dbFeature.sharedFeatureName === featureGroup.part.activeFeature.dbFeature.sharedFeatureName\r\n }))) {\r\n feature = featureGroup.part.activeFeature;\r\n }\r\n if (!feature && featurePassed.featureId) {\r\n // we added a real feature with id - go and find it - cases when we load feature from different visualizer\r\n const allNavItems2 = layout.designNavigationItems(featureGroup, {}, \"\", false, \"all\", [], {returnAllFeatures: true});\r\n const foundNavItem = allNavItems2.find(nItem => nItem.part.dbFeature.id === featurePassed.featureId);\r\n if (foundNavItem) {\r\n feature = foundNavItem.part;\r\n }\r\n }\r\n if (!feature && allNavItems.length) {\r\n feature = allNavItems[0].part;\r\n }\r\n\r\n return [feature, isSqftFromFeature, isFromCartFeatureAdded, featurePassed.fromWizardGroupId];\r\n}\r\n","import {connect} from \"react-redux\";\r\nimport PropTypes from \"prop-types\";\r\nimport {injectIntl} from \"react-intl\";\r\n\r\nconst QtCategoryName = (props) => {\r\n\r\n const {qtCategoryName, intl, fabricatorData} = props;\r\n\r\n return getQtCategoryName(qtCategoryName, intl, fabricatorData)\r\n};\r\n\r\nQtCategoryName.propTypes = {\r\n qtCategoryName: PropTypes.string,\r\n}\r\n\r\nconst mapStateToProps = (store) => {\r\n return {\r\n fabricatorData: store.fabricatorState,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {};\r\n\r\nexport default injectIntl(\r\n connect(mapStateToProps, mapDispatchToProps)(QtCategoryName)\r\n)\r\n\r\nexport const getQtCategoryName = (qtCategoryName, intl, fabricatorData) => {\r\n if ((fabricatorData.isLowes || fabricatorData.isCaesarStone) && intl.messages) {\r\n if (intl.locale === \"fr-FR\" && intl.messages[\"transDoc.customDisplayName_FR.\" + qtCategoryName]) {\r\n return intl.formatMessage({id: \"transDoc.customDisplayName_FR.\" + qtCategoryName})\r\n } else if (intl.locale === \"pl-PL\" && intl.messages[\"transDoc.customTranslateName_PL.\" + qtCategoryName]) {\r\n return intl.formatMessage({id: \"transDoc.customTranslateName_PL.\" + qtCategoryName})\r\n }\r\n }\r\n\r\n return qtCategoryName\r\n}\r\n","//********* FILTERS *********//\r\nimport * as types from \"./actionTypes\";\r\n\r\nexport const setAvailableFilterValues = (availableFilterValues) => ({\r\n type: types.SET_AVAILABLE_FILTER_VALUES,\r\n payload: {availableFilterValues}\r\n});\r\n\r\nexport const updateFiltersCount = () => ({\r\n type: types.UPDATE_FILTERS_COUNT\r\n})\r\n","import workspace from \"../workspace\";\r\n//import Point from \"../shapes/point\";\r\nimport EventManager from \"../../store/sqftEventManager\";\r\nimport sqftConfig from \"../../store/sqftConfig\";\r\nimport {\r\n getIntersectCordsBetweenLines,\r\n getMidPoint,\r\n getMousePositionOnField,\r\n getPointDistance,\r\n getPointOnTheLine, inchesToMm, mmToInches, parseImperialFractionToDecimal,\r\n} from \"../../../../helpers/sqftHelper\";\r\nimport ShapeHelper, {getCountertopPartNames, getLineLengthNumberText} from \"../../../../helpers/shapeHelper\";\r\nimport Config from \"../../store/sqftConfig\";\r\nimport {createShapeFromPoints, createWallFromPointsV2} from \"../../../../helpers/freeDrawHelper\";\r\nimport NumberText from \"../workspace/text/numberText\";\r\nimport store from \"../../../../../../store\";\r\nimport {setSQFTActiveButton, setSQFTMenuOpened} from \"../../../../../../actions/sqftMenuFunctions\";\r\nimport config from \"../../store/sqftConfig\";\r\nimport RenderFreeDraw from \"../../helpers/renderFreeDraw\";\r\nimport COLOR_THEMES, {COLORS} from \"../../../../../../colorThemes\";\r\nimport {FREE_DRAW_TYPE, MEASURE_UNITS, SIDEBAR_NAVIGATION_CABINET_BUTTONS} from \"../../../../constants\";\r\nimport {getWallLockedPoint, getWallPoint} from \"../../helpers/wallHelper\";\r\nimport {getFreeDrawPoint, getLockedPoint, getLockPointPos} from \"../../helpers/freeDrawHelper\";\r\nimport sqftEventManager from \"../../store/sqftEventManager\";\r\nimport {\r\n isBackspaceKeyCode,\r\n isDeleteKeyCode,\r\n isLengthKeyCode,\r\n} from \"../../../../helpers/keyboardHelper\";\r\n\r\nconst MIN_DISTANCE_BETWEEN_POINTS = 1\r\n\r\nconst FreeDraw = function() {\r\n let state = {\r\n isDrawFinished: false,\r\n addedPoints: [],\r\n dimensions: [],\r\n dimensionToMouse: null,\r\n drawLineToMouse: false,\r\n lineWidth: 2,\r\n lineColor: COLOR_THEMES[sqftConfig.activeTheme].primary,\r\n outlineColor: COLOR_THEMES[sqftConfig.activeTheme].primary,\r\n minLineLength: 15,\r\n drawType: FREE_DRAW_TYPE.shape,\r\n useLockedPoints: true,\r\n currentNumericInput: \"\",\r\n lockedAngleStep: 45\r\n };\r\n\r\n this.clickedBackSplashButton = null;\r\n this.arcLength = 0;\r\n this.angle = 0;\r\n this.getState = () => state\r\n\r\n const onMouseMove = (mousePos, e) => {\r\n void e;\r\n\r\n if (state.addedPoints.length > 0) {\r\n state.drawLineToMouse = true;\r\n\r\n if (!state.dimensionToMouse) {\r\n this.createDimensionToMouse();\r\n }\r\n this.updateMeasurementToMousePosition(mousePos);\r\n }\r\n\r\n if (state.currentNumericInput.length >= 1 ) {\r\n state.currentNumericInput = \"\";\r\n }\r\n }\r\n\r\n const onKeyDown = (code, e) => {\r\n if (window.lineInputFocused) {\r\n return false;\r\n }\r\n\r\n if (isLengthKeyCode(e)) {\r\n const newValue = state.currentNumericInput + e.key;\r\n\r\n if (newValue !== null) {\r\n state.currentNumericInput = newValue;\r\n state.dimensionToMouse.value = newValue;\r\n }\r\n console.log(\"currentNumericInput\", state.currentNumericInput);\r\n return true;\r\n }\r\n\r\n if (isBackspaceKeyCode(e) || isDeleteKeyCode(e)) {\r\n state.currentNumericInput = state.currentNumericInput.slice(0, -1);\r\n state.dimensionToMouse.value = sqftConfig.measureUnit === MEASURE_UNITS.Metric\r\n ? mmToInches(state.currentNumericInput)\r\n : state.currentNumericInput;\r\n console.log(\"currentNumericInput\", state.currentNumericInput);\r\n return true;\r\n }\r\n\r\n if (code === EventManager.keyCode.ENTER || code === EventManager.keyCode.NumpadEnter) {\r\n if (state.addedPoints.length > 0 && state.currentNumericInput) {\r\n this.createPointFromCurrentNumericInput();\r\n } else {\r\n state.isDrawFinished = true;\r\n this.drawFinish();\r\n }\r\n }\r\n\r\n return true;\r\n };\r\n\r\n const onMouseDown = (mousePos) => {\r\n // var hoverPoint = workspace.getHoverPoint();\r\n // var hoverShape = workspace.getHoverShape();\r\n // if (hoverPoint || hoverShape) {\r\n // return true; // return true; // block all mouse-down events // we need dragging workspace\r\n // }\r\n state.currentNumericInput = \"\";\r\n const reduxState = store.getState();\r\n const activeButton = reduxState.sqftMenuState.activeButton;\r\n //todo pointV2 priority should be higher\r\n // const hoverPoint = workspace.getHoverPointV2();\r\n // const wall = WallsManager.getWallByPoint(hoverPoint);\r\n if (activeButton === SIDEBAR_NAVIGATION_CABINET_BUTTONS.wall) {\r\n this.drawWall(mousePos);\r\n return true;\r\n }\r\n };\r\n\r\n const onMouseUp = (mousePos) => {\r\n void mousePos;\r\n\r\n // this.checkForRestoreCursor();\r\n //\r\n // var hoverPoint = workspace.getHoverPoint();\r\n // var hoverShape = workspace.getHoverShape();\r\n // if (hoverPoint && !hoverPoint.angleIsChanged) {\r\n //\r\n // if (this.arcLength) {\r\n // hoverPoint.arcLength = this.arcLength;\r\n // hoverPoint.angle = 0;\r\n // } else if (this.angle) {\r\n // hoverPoint.angle = this.angle;\r\n // hoverPoint.arcLength = 0;\r\n // }\r\n // return true;\r\n // } else if (hoverShape) {\r\n // Menu.openMenu();\r\n // return true; // if click on shape, block reseting cursor, because we still need it http://jira.mozidev.com/browse/QC-956\r\n // }/* else {\r\n // deregisterEvents();\r\n // elements.designDefault.click();\r\n // }*/\r\n };\r\n\r\n this.createPointFromCurrentNumericInput = () => {\r\n const mousePos = sqftEventManager.getMousePos();\r\n const lastPoint = state.addedPoints[state.addedPoints.length - 1];\r\n let distance = parseImperialFractionToDecimal(state.currentNumericInput);\r\n distance = config.measureUnit === \"Imperial\" ? distance : mmToInches(distance);\r\n let newPoint;\r\n if (state.useLockedPoints && this.isPointExist()) {\r\n newPoint = getLockedPoint(lastPoint, mousePos, state.lockedAngleStep);\r\n } else {\r\n newPoint = getFreeDrawPoint(mousePos);\r\n }\r\n\r\n //we take full distance and subtract existing point distance from it.\r\n const segmentLength = getPointDistance(newPoint, lastPoint);\r\n const newCordsAtDistance = getPointOnTheLine(newPoint, lastPoint, distance - segmentLength);\r\n newPoint.setPosition(newCordsAtDistance);\r\n this.drawStart(mousePos, newPoint);\r\n }\r\n\r\n this.updateMeasurementToMousePosition = (mousePos) => {\r\n if (state.addedPoints.length > 0) {\r\n const mPosOnField = getMousePositionOnField(mousePos.x, mousePos.y);\r\n const lastPoint = state.addedPoints[state.addedPoints.length - 1];\r\n const distance = getPointDistance(mPosOnField, lastPoint);\r\n const reduxState = store.getState();\r\n const isWallsLockMode = reduxState.sqftMenuState.isWallsLockMode;\r\n const activeButton = reduxState.sqftMenuState.activeButton;\r\n let midPoint;\r\n\r\n if (isWallsLockMode && activeButton === SIDEBAR_NAVIGATION_CABINET_BUTTONS.wall) {\r\n const lockedPointPos = getLockPointPos(lastPoint);\r\n const lockPointOnField = getMousePositionOnField(lockedPointPos.x, lockedPointPos.y);\r\n midPoint = getMidPoint(lockPointOnField, lastPoint);\r\n state.dimensionToMouse.pos.betweenPoints.pointTo = lockPointOnField\r\n } else {\r\n if (state.useLockedPoints) {\r\n const lockedPointPos = getLockPointPos(lastPoint, state.lockedAngleStep);\r\n const lockPointOnField = getMousePositionOnField(lockedPointPos.x, lockedPointPos.y);\r\n midPoint = getMidPoint(lockPointOnField, lastPoint);\r\n } else {\r\n midPoint = getMidPoint(mPosOnField, lastPoint);\r\n }\r\n\r\n state.dimensionToMouse.pos.betweenPoints.pointTo = getMousePositionOnField(mousePos.x, mousePos.y);\r\n }\r\n state.dimensionToMouse.pos.betweenPoints.pointFrom = lastPoint;\r\n state.dimensionToMouse.pos.x = midPoint.x;\r\n state.dimensionToMouse.pos.y = midPoint.y;\r\n state.dimensionToMouse.value = sqftConfig.measureUnit === MEASURE_UNITS.Metric ? inchesToMm(distance) : distance;\r\n\r\n // console.log(\"state.dimensionToMouse\", state.dimensionToMouse);\r\n // debugger // eslint-disable-line no-debugger\r\n }\r\n }\r\n\r\n this.init = function() {\r\n if (!state.isInited) {\r\n state.isInited = true;\r\n this.createDimensionToMouse();\r\n this.registerEvents();\r\n }\r\n };\r\n\r\n this.createDimensionToMouse = () => {\r\n state.dimensionToMouse = new NumberText(\r\n 0,\r\n {x: 0, y: 0},\r\n {shouldRenderFrameBorder: true, isLength: false},\r\n workspace,\r\n Function(),\r\n true\r\n );\r\n }\r\n\r\n this.registerEvents = () => {\r\n EventManager.addEvent(\r\n EventManager.events.RENDER,\r\n this.render,\r\n this,\r\n EventManager.priorities.SHAPE\r\n );\r\n EventManager.addEvent(\r\n EventManager.events.MOUSE_DOWN,\r\n onMouseDown,\r\n this,\r\n EventManager.priorities.WALL\r\n );\r\n EventManager.addEvent(\r\n EventManager.events.MOUSE_MOVE,\r\n onMouseMove,\r\n this,\r\n EventManager.priorities.IMAGE\r\n );\r\n EventManager.addEvent(\r\n EventManager.events.MOUSE_UP,\r\n onMouseUp,\r\n this,\r\n EventManager.priorities.OVERALL\r\n );\r\n EventManager.addEvent(\r\n EventManager.events.KEYDOWN,\r\n onKeyDown,\r\n this,\r\n EventManager.priorities.OVERALL\r\n );\r\n };\r\n\r\n this.hide = function(e) {\r\n if (e) {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n }\r\n };\r\n\r\n this.deregisterEvents = () => {\r\n EventManager.resetCursor(this);\r\n EventManager.removeEvent(this);\r\n state.isInited = false\r\n }\r\n\r\n this.destroy = (protect, revertBackAfterMouseUp) => {\r\n if (revertBackAfterMouseUp) {\r\n EventManager.removeEvent(this, EventManager.events.RENDER);\r\n this.isWaitingToRestoreCursor = true;\r\n } else {\r\n this.deregisterEvents();\r\n }\r\n this.hide();\r\n };\r\n\r\n const checkIfFirstPointHovered = () => {\r\n return state.addedPoints.length > 2 && state.addedPoints[0].modelCorePoint.mixins.movable.isHovering();\r\n }\r\n // const checkIfLastPointHovered = () => {\r\n // return state.addedPoints.length > 2 && state.addedPoints[state.addedPoints.length - 1].modelCorePoint.mixins.movable.isHovering();\r\n // }\r\n const checkIfThisIsSecondPoint = () => {\r\n return state.addedPoints.length === 1;\r\n }\r\n\r\n this.isPointExist = () => {\r\n return state.addedPoints.length >= 1;\r\n }\r\n\r\n this.isFitDistanceWithLastPoint = (point) => {\r\n if (state.addedPoints.length < 1) {\r\n return true\r\n }\r\n const distance = getPointDistance(point, state.addedPoints[state.addedPoints.length - 1]);\r\n\r\n return distance > MIN_DISTANCE_BETWEEN_POINTS\r\n }\r\n this.isMousePosFitDistanceWithLastPoint = (mousePos) => {\r\n const mousePosOnField = getMousePositionOnField(mousePos.x, mousePos.y);\r\n return this.isFitDistanceWithLastPoint(mousePosOnField);\r\n }\r\n this.isFitDistanceWithLastPoint = (point) => {\r\n if (state.addedPoints.length < 1) {\r\n return true\r\n }\r\n const distance = getPointDistance(point, state.addedPoints[state.addedPoints.length - 1]);\r\n\r\n return distance > MIN_DISTANCE_BETWEEN_POINTS\r\n }\r\n\r\n this.initDraw = (useLockedPoints) => {\r\n state.useLockedPoints = useLockedPoints\r\n }\r\n\r\n this.drawShape = (mousePos) => {\r\n if (checkIfFirstPointHovered()) {\r\n this.drawFinish();\r\n return;\r\n }\r\n\r\n let point;\r\n if (state.useLockedPoints && this.isPointExist()) {\r\n const lastPoint = state.addedPoints[state.addedPoints.length - 1];\r\n point = getLockedPoint(lastPoint, mousePos, state.lockedAngleStep);\r\n } else {\r\n point = getFreeDrawPoint(mousePos);\r\n }\r\n\r\n this.drawStart(mousePos, point);\r\n }\r\n\r\n this.drawWall = (mousePos) => {\r\n state.lineWidth = 10;\r\n state.lineColor = COLORS.gray;\r\n state.outlineColor = COLORS.gray4;\r\n state.drawType = FREE_DRAW_TYPE.wall\r\n if (checkIfThisIsSecondPoint()) {\r\n const wallPointLocked = getWallLockedPoint(state.addedPoints[0], mousePos, state.lockedAngleStep);\r\n this.drawStart(mousePos, wallPointLocked);\r\n this.drawFinish();\r\n } else {\r\n const wallPoint = getWallPoint(mousePos);\r\n this.drawStart(mousePos, wallPoint);\r\n }\r\n };\r\n\r\n this.drawStart = (mousePos, pointV2) => {\r\n if (state.isDrawFinished || !this.isMousePosFitDistanceWithLastPoint(mousePos)) {\r\n return\r\n }\r\n\r\n if (state.addedPoints.length > 0) {\r\n this.addLineDimensions(pointV2);\r\n }\r\n state.addedPoints.push(pointV2);\r\n state.dimensionToMouse ? state.dimensionToMouse.destroy() : null;\r\n state.dimensionToMouse = null;\r\n };\r\n\r\n this.addLineDimensions = (pointTo) => {\r\n //const prevPoint = state.addedPoints[state.addedPoints.length - 2];\r\n const pointFrom = state.addedPoints[state.addedPoints.length - 1];\r\n const numberText = getLineLengthNumberText(pointFrom, pointTo, workspace, this.setSegmentLengthFromNumberValue);//new NumberText(thicknessValue, posThickness, {}, this, this.setSegmentThicknessFromNumberValue);\r\n\r\n state.dimensions.push(numberText);\r\n };\r\n\r\n this.setSegmentLengthFromNumberValue = (value, numberText) => {\r\n value = Math.round10(+value / Config.getMeasureMultiplier(), -3);\r\n let miteredSection = numberText.parent;\r\n let miteredSegments = miteredSection.getSegments();\r\n let miteredSegment = miteredSegments.find(seg => seg.length === numberText);\r\n\r\n this.setSegmentLength(value, miteredSegment, miteredSection);\r\n };\r\n\r\n this.resetState = (shouldResetPoints = true) => {\r\n state.isDrawFinished = false;\r\n state.currentNumericInput = \"\";\r\n if (shouldResetPoints) {\r\n for (const addedPoint of state.addedPoints) {\r\n addedPoint.destroy();\r\n }\r\n }\r\n for (const dimension of state.dimensions) {\r\n dimension.destroy();\r\n }\r\n if (state.dimensionToMouse) {\r\n state.dimensionToMouse.destroy();\r\n }\r\n\r\n state.addedPoints = [];\r\n state.dimensions = [];\r\n };\r\n\r\n this.drawFinish = () => {\r\n //this.addLineDimensions(state.addedPoints[0], state.addedPoints[1]);\r\n //const reduxState = store.getState();\r\n //const activeButton = reduxState.sqftMenuState.activeButton;\r\n if (state.addedPoints.length > 2 || state.drawType === FREE_DRAW_TYPE.wall && state.addedPoints.length === 2) {\r\n const shapeCenter = ShapeHelper.getCenterPoint(state.addedPoints);\r\n let preparedPoints = [];\r\n switch (state.drawType) {\r\n case FREE_DRAW_TYPE.wall:\r\n this.createWall(state.addedPoints, shapeCenter);\r\n break;\r\n case FREE_DRAW_TYPE.shape:\r\n if (state.useLockedPoints) {\r\n this.changeFirstPointCoordinatesToCreate45or90DegAngleWithTheLastPoint();\r\n }\r\n for (const addedPoint of state.addedPoints) {\r\n addedPoint.x -= shapeCenter.x;\r\n addedPoint.y -= shapeCenter.y;\r\n preparedPoints.push(addedPoint);\r\n }\r\n\r\n this.createShape(preparedPoints, shapeCenter);\r\n store.dispatch(setSQFTMenuOpened(\"\"));\r\n store.dispatch(setSQFTActiveButton(\"\"));\r\n config.workspace.menuItemActive = \"\";\r\n this.deregisterEvents();\r\n break;\r\n }\r\n\r\n state.dimensionToMouse ? state.dimensionToMouse.destroy() : null;\r\n state.dimensionToMouse = null;\r\n }\r\n\r\n this.resetState(!(state.drawType === FREE_DRAW_TYPE.wall));\r\n // this.deregisterEvents();\r\n //\r\n // if (activeButton === SIDEBAR_NAVIGATION_CABINET_BUTTONS.wall) {\r\n // this.init();\r\n // }\r\n };\r\n\r\n this.changeFirstPointCoordinatesToCreate45or90DegAngleWithTheLastPoint = () => {\r\n if (state.addedPoints.length >= 2) {\r\n const firstPoint = state.addedPoints[0];\r\n const secondPoint = state.addedPoints[1];\r\n const lastPoint = state.addedPoints[state.addedPoints.length - 1];\r\n //const penultimatePoint = state.addedPoints[state.addedPoints.length - 2];\r\n const lockPointPos = getLockPointPos(lastPoint, state.lockedAngleStep, firstPoint.getPointField());\r\n const intersectionPoint = getIntersectCordsBetweenLines(\r\n firstPoint.getPointField(),\r\n secondPoint.getPointField(),\r\n lastPoint.getPointField(),\r\n lockPointPos,\r\n true,\r\n true\r\n );\r\n\r\n if (intersectionPoint) {\r\n const intersectionPointOnField = getMousePositionOnField(intersectionPoint.x, intersectionPoint.y);\r\n state.addedPoints[0].setPosition(intersectionPointOnField);\r\n }\r\n }\r\n }\r\n\r\n this.createShape = (preparedPoints, shapeCenter) => {\r\n const [countertopPartName] = getCountertopPartNames();\r\n const shapeId = createShapeFromPoints(\r\n preparedPoints,\r\n countertopPartName,\r\n false,\r\n shapeCenter,\r\n true,\r\n null,\r\n {},\r\n {\r\n minimumShapeArea: 25,\r\n maximumShapeArea: 100000,\r\n maximumLineDistance: 1000,\r\n }\r\n );\r\n void shapeId;\r\n }\r\n\r\n this.createWall = (preparedPoints, centerPoint) => {\r\n createWallFromPointsV2(preparedPoints, centerPoint, state.lockedAngleStep);\r\n }\r\n\r\n this.getOffset = function() {\r\n // //return {x: 0, y: 0};\r\n // var scale = sqftConfig.scale;\r\n // var workspacePos = workspace.getOffset();\r\n // debugger\r\n // if (parent) {\r\n // var _pos = parent.getPosition();\r\n // // if (sqftConfig.workspace.snapToGrid){\r\n // // _pos = parent.getSnappedPosition();\r\n // // }\r\n // var offset = {\r\n // x: workspacePos.x + (_pos.x * scale),\r\n // y: workspacePos.y + (_pos.y * scale)\r\n // }\r\n // } else {\r\n // return {x: 0, y: 0};\r\n // }\r\n // return offset;\r\n };\r\n this.render = (ctx) => RenderFreeDraw.render(ctx, this.getState())\r\n\r\n};\r\n\r\nexport default new FreeDraw()\r\n","import {AxiosInstance, leadApiGet, leadApiPost} from \"./api\";\r\nimport {IS_DEV_MODE} from \"../constants\";\r\n\r\nconst baseUrl = IS_DEV_MODE\r\n ? \"https://calendar.staging.labs.lixil.com\"\r\n : \"https://calendar.prod.labs.lixil.com\";\r\n\r\nconst postAuthData = {\r\n \"password\": \"QC@123\",\r\n \"username\": \"QC\"\r\n}\r\n\r\nexport const postSignInAuth = async () => {\r\n // return await leadApiPost(\"https://calendar.prod.labs.lixil.com/v1/sign-in\", postData);\r\n const postAuthResponse = await leadApiPost(baseUrl + \"/v1/sign-in\", postAuthData);\r\n if (postAuthResponse && postAuthResponse.data && postAuthResponse.data.data && postAuthResponse.data.data.jwtToken) {\r\n // dispatch(setAppJwtToken(postAuthResponse.data.data.jwtToken)); // just in case, we don't need it anymore\r\n AxiosInstance.defaults.headers.post['Authorization'] = postAuthResponse.data.data.jwtToken;\r\n AxiosInstance.defaults.headers.get['Authorization'] = postAuthResponse.data.data.jwtToken;\r\n }\r\n // console.log(\"AxiosInstance\", AxiosInstance);\r\n return postAuthResponse\r\n}\r\n\r\nconst withSignInRetryRequest = async (request) => {\r\n let mainResponse;\r\n\r\n const retryFunction = async () => {\r\n console.log(\"session expired, trying one more time...\", );\r\n // delete AxiosInstance.defaults.headers.post['Authorization']; // prevent status 400 bad request\r\n // delete AxiosInstance.defaults.headers.get['Authorization']; // prevent status 400 bad request\r\n await postSignInAuth();\r\n return await request();\r\n }\r\n\r\n try {\r\n mainResponse = await request();\r\n if (mainResponse && mainResponse.status === 401) {\r\n mainResponse = await retryFunction();\r\n }\r\n return mainResponse\r\n } catch (error) {\r\n if ((typeof error === \"object\") && error.response && (error.response.status === 401)) {\r\n mainResponse = await retryFunction();\r\n return mainResponse\r\n }\r\n console.log(\"response error\", error);\r\n return new Error(error)\r\n }\r\n}\r\n\r\n\r\nexport const checkLixilPostalCode = async (zipCode) => {\r\n try {\r\n const url = `${baseUrl}/availability/${zipCode}`;\r\n const request = leadApiGet.bind(this, url);\r\n const mainResponse = await withSignInRetryRequest(request);\r\n return mainResponse && mainResponse.data && mainResponse.data.serviceAvailable\r\n } catch (error) {\r\n console.log(\"availability/postalCode error\", error);\r\n return false\r\n }\r\n}\r\n\r\nexport const postLixilCalendar = async (postCalendarData) => {\r\n try {\r\n const url = `${baseUrl}/availability/calendar`;\r\n const request = leadApiPost.bind(this, url, postCalendarData);\r\n return await withSignInRetryRequest(request);\r\n } catch (error) {\r\n console.log(\"availability/calendar error\", error);\r\n return false\r\n }\r\n}\r\n\r\nexport const postLixilGetSalesRep = async (postData) => {\r\n try {\r\n const url = `${baseUrl}/availability/getSalesRep`;\r\n const request = leadApiPost.bind(this, url, postData);\r\n return await withSignInRetryRequest(request);\r\n } catch (error) {\r\n console.log(\"availability/getSalesRep error\", error);\r\n return false\r\n }\r\n}\r\n","import React from 'react';\r\nimport * as uuid from \"uuid\";\r\n\r\nimport NavigationItem from \"./navigationItem\";\r\nimport {UserPopupTypes} from \"../constants\";\r\nimport {getFeatureCost, getFeatureIsLocked, isIE} from \"../../../misc/helpers\";\r\nimport Walls from \"../../kvComponent/core/parts/walls\";\r\nimport Cabinet from \"../../kvComponent/core/parts/cabinet\";\r\nimport CountertopGroup from \"../../kvComponent/core/parts/countertopGroup\";\r\nimport CenterIsland from \"../../kvComponent/core/parts/centerIsland\";\r\nimport {getCurrentLayout} from \"../../appLayout\";\r\nimport {getBvGroupFeatures} from \"../../../api/server-api\";\r\nimport LoadingBar from '../../../lib/react-redux-loading-bar';\r\nimport CommonFeatureItemsMethods from \"../commonFeatureItemsMethods\";\r\nimport {checkIfNeedToReceiveFeaturesIfFiltersApplied} from \"../../../misc/filtersFunctions\";\r\nimport {\r\n displayMaterialsWizardGroupAsFeature,\r\n getMissingWizardFeatures\r\n} from \"../../look/lookNavigation/lookMain/lookWizard/lookWizardFunctions\";\r\nimport {getAdditionalFeaturesOnScroll} from \"../../../api/look-api\";\r\nimport Config from \"../../../config\";\r\n\r\nexport default class NavigationItemsList extends CommonFeatureItemsMethods { // this class is used for both Desktop & Mobile navigations to avoid method's duplicating\r\n\r\n constructor(props) {\r\n window.itemClickCount = window.itemClickCount || 0;\r\n window.allowClickLeadCapturePopup = true;\r\n super(props);\r\n }\r\n\r\n componentDidMount() {\r\n this.reorderItems(this.props);\r\n const childItem = this.props.childItem && this.props.childItem.part;\r\n if (childItem && childItem.partId.includes(\"countertop\") && this.props.selectedFilters.length && !this.props.activeNavigationFilter) {\r\n const checkPassed = checkIfNeedToReceiveFeaturesIfFiltersApplied(this.props.selectedFilters, childItem);\r\n if (checkPassed) {\r\n this.getFeaturesFromBackendWithFilters(childItem, checkPassed.arrayOfNeededFiltersToReceive, 1);\r\n }\r\n }\r\n }\r\n\r\n itemClick = (item, featureIsLocked, event) => {\r\n const fabricatorSettings = this.props.fabricatorData.settings;\r\n if( !this.props.userIsLoggedIn && fabricatorSettings.clickLeadCapture && (++window.itemClickCount >= fabricatorSettings.clickLeadCount) && window.allowClickLeadCapturePopup) {\r\n this.handleUserLoginClick(UserPopupTypes.NewDesign);\r\n return;\r\n }\r\n this.props.onItemClick(item, false, featureIsLocked, event);\r\n this.forceUpdate();\r\n };\r\n\r\n getActiveFeatureName = (uniquePartNamesArray, parentId, childName, isCabinet = false) => {\r\n const layout = getCurrentLayout();\r\n const parent = layout.parts[parentId];\r\n const activeFeature = parent && parent[childName] && parent[childName].activeFeature;\r\n if (activeFeature) {\r\n uniquePartNamesArray.unshift(activeFeature.getSplittedFeatureName(isCabinet))\r\n }\r\n return uniquePartNamesArray\r\n };\r\n\r\n getSelectedWallIndexes = (childItem, features, selectedFirstItemIndex) => {\r\n if (this.props.isWizard && this.props.currentGroups && displayMaterialsWizardGroupAsFeature(this.props.currentGroups)) {\r\n return []\r\n }\r\n const layout = getCurrentLayout();\r\n let otherSelectedWallsIndexes = [];\r\n let uniquePartNamesArray = [];\r\n const kitchenCabinetPartIds = [\"top_cabinet\", \"bottom_cabinet\", \"center_island_cabinet\"];\r\n if (childItem && childItem.part && childItem.part.isStoneFeature) {\r\n uniquePartNamesArray = layout.getStonesActiveFeatures().map((activeFeature) => {\r\n return activeFeature.cartFeature.getSplittedFeatureName()\r\n });\r\n switch (childItem.part.partId) {\r\n case \"backsplash\": {\r\n const parentItem = childItem.part.getParent();\r\n const rightWall = parentItem && parentItem.rightWall;\r\n if (rightWall && rightWall.activeFeature) {\r\n uniquePartNamesArray.unshift(rightWall.activeFeature.getSplittedFeatureName())\r\n }\r\n uniquePartNamesArray = this.getActiveFeatureName(uniquePartNamesArray, CenterIsland.id, \"countertop\");\r\n uniquePartNamesArray = this.getActiveFeatureName(uniquePartNamesArray, CountertopGroup.id, \"countertop\");\r\n break;\r\n }\r\n case \"countertop\": {\r\n uniquePartNamesArray = this.getActiveFeatureName(uniquePartNamesArray, Walls.id, \"backsplash\");\r\n uniquePartNamesArray = this.getActiveFeatureName(uniquePartNamesArray, CenterIsland.id, \"countertop\");\r\n break;\r\n }\r\n case \"center_island_countertop\": {\r\n uniquePartNamesArray = this.getActiveFeatureName(uniquePartNamesArray, Walls.id, \"backsplash\");\r\n uniquePartNamesArray = this.getActiveFeatureName(uniquePartNamesArray, CountertopGroup.id, \"countertop\");\r\n break;\r\n }\r\n default:\r\n break;\r\n }\r\n } else if (childItem && childItem.part && (kitchenCabinetPartIds.includes(childItem.part.partId))) {\r\n switch (childItem.part.partId) {\r\n case \"top_cabinet\": {\r\n uniquePartNamesArray = this.getActiveFeatureName(uniquePartNamesArray, CenterIsland.id, \"cabinet\");\r\n uniquePartNamesArray = this.getActiveFeatureName(uniquePartNamesArray, Cabinet.id, \"bottomCabinet\", true);\r\n break;\r\n }\r\n case \"bottom_cabinet\": {\r\n uniquePartNamesArray = this.getActiveFeatureName(uniquePartNamesArray, CenterIsland.id, \"cabinet\");\r\n uniquePartNamesArray = this.getActiveFeatureName(uniquePartNamesArray, Cabinet.id, \"topCabinet\", true);\r\n break;\r\n }\r\n case \"center_island_cabinet\": {\r\n uniquePartNamesArray = this.getActiveFeatureName(uniquePartNamesArray, Cabinet.id, \"topCabinet\", true);\r\n uniquePartNamesArray = this.getActiveFeatureName(uniquePartNamesArray, Cabinet.id, \"bottomCabinet\", true);\r\n break;\r\n }\r\n }\r\n }\r\n // console.log(\"uniquePartNamesArray\", uniquePartNamesArray);\r\n if (uniquePartNamesArray.length) {\r\n uniquePartNamesArray = isIE()\r\n ? uniquePartNamesArray.reduce(function(a,b){if(a.indexOf(b)<0)a.push(b);return a;},[])\r\n : [...uniquePartNamesArray.reduce((p,c) => p.set(c,true),new Map()).keys()]; //remove duplicates\r\n // console.log('uniquePartNamesArray', uniquePartNamesArray);\r\n uniquePartNamesArray.forEach((uniquePartName) => {\r\n let foundIndex = features.findIndex(feature => feature.part && (feature.part.getSplittedFeatureName() === uniquePartName));\r\n if (foundIndex < 0) {\r\n foundIndex = features.findIndex(feature => {\r\n if (!feature.part) {\r\n return false\r\n }\r\n if (childItem.part.partId === \"backsplash\") {\r\n // example: countertop - \"Dymo White 12X24 Glossy\", backsplash - \"Dymo White 12X24 Glossy 4in l\"\r\n return feature.part.partName.includes(uniquePartName)\r\n }\r\n return feature.part.partName === uniquePartName\r\n });\r\n }\r\n if (foundIndex > -1 && selectedFirstItemIndex !== foundIndex) {\r\n otherSelectedWallsIndexes.push(foundIndex);\r\n }\r\n });\r\n }\r\n // console.log(\"otherSelectedWallsIndexes\", otherSelectedWallsIndexes);\r\n return otherSelectedWallsIndexes\r\n };\r\n\r\n getLockedFeature = (activeFeature) => {\r\n const filterValues = activeFeature.part.dbFeature && activeFeature.part.dbFeature.filterValueIDs;\r\n if (filterValues) {\r\n return Object.keys(filterValues).some((filterKey) => {\r\n const filterGroup = this.props.filterGroups.find(group => group.id === +filterKey);\r\n const filterValue = filterGroup && filterGroup.values && filterGroup.values.find(value => value.id === filterValues[filterKey][0]);\r\n return filterValue && filterValue.lockedInWizard\r\n });\r\n }\r\n return false\r\n };\r\n\r\n getActiveItemIndex = (props) => {\r\n const showPlaceHolders = document.bvConfig ? document.bvConfig.showPlaceholders : false;\r\n let isActiveItemIndex = null;\r\n if (props.childItem && props.childItem.part.activeFeature) {\r\n isActiveItemIndex = props.features.findIndex((item) => {\r\n if(item && item.part)\r\n return props.childItem.part.activeFeatureId(showPlaceHolders) === item.part.id()\r\n })\r\n } else if (props.parentItem.part.activeFeature) {\r\n isActiveItemIndex = props.features.findIndex((item) => {\r\n if(item && item.part)\r\n return props.parentItem.part.activeFeatureId(showPlaceHolders) === item.part.id()\r\n })\r\n }\r\n return isActiveItemIndex\r\n };\r\n\r\n getReorderedItems = (indexesToReplace, props, selectedExist = false, isQuotingTool = false) => {\r\n let reOrderedFeatures = props.features;\r\n const featuresToPlaceFirst = indexesToReplace.map(index => reOrderedFeatures[index]).reverse();\r\n const sorted = this.getSortedFeatures(reOrderedFeatures, selectedExist, isQuotingTool);\r\n featuresToPlaceFirst.forEach((navItemToReplace) => {\r\n const currentIndex = sorted.findIndex(navItem => navItem.part.dbFeature.id === navItemToReplace.part.dbFeature.id)\r\n if (currentIndex > -1) {\r\n sorted.splice(currentIndex, 1);\r\n sorted.splice(0, 0, navItemToReplace);\r\n }\r\n });\r\n // console.log(\"sorted\", sorted);\r\n return sorted\r\n };\r\n\r\n checkForSelectedAccessories = (activeFeature, selected) => {\r\n const accessories = [\"large_corner_caddie\", \"corner_caddie\", \"small_corner_shelf\", \"large_corner_seat\"];\r\n if (accessories.includes(activeFeature.partId)) {\r\n if (activeFeature.partId === \"large_corner_seat\") {\r\n if (activeFeature.getParent().getParent().caddie_type === \"large_corner_caddie\") {\r\n selected = false\r\n }\r\n } else if (activeFeature.getParent().getParent().caddie_type !== activeFeature.partId) {\r\n selected = false\r\n }\r\n }\r\n return selected\r\n };\r\n\r\n getFeaturePropertyToSort = (navItem, property) => {\r\n if (property === \"name\") {\r\n return navItem.part.getFeatureName()\r\n }\r\n if (property === \"SortPositionNum\") {\r\n return navItem.part.metaData[property] || 99999;\r\n }\r\n return navItem.part[property];\r\n }\r\n\r\n getNavItemsSortedByProperty = (navItems, property, property2) => {\r\n const order = \"asc\";\r\n // console.log(\"navItems - navItems\", navItems);\r\n navItems = navItems.sort((a,b) => {\r\n let prop1 = this.getFeaturePropertyToSort(a, property);\r\n let prop2 = this.getFeaturePropertyToSort(b, property);\r\n let prop3 = this.getFeaturePropertyToSort(a, property2);\r\n let prop4 = this.getFeaturePropertyToSort(b, property2);\r\n return order === \"asc\"\r\n ? (prop1 > prop2) ? 1 : (prop1 < prop2) ? -1 : (prop3 > prop4) ? 1 : (prop3 < prop4) ? -1 : 0\r\n : (prop1 < prop2) ? 1 : (prop1 > prop2) ? -1 : (prop3 < prop4) ? 1 : (prop3 > prop4) ? -1 : 0\r\n })\r\n // console.log(\"navItems\", navItems);\r\n return navItems\r\n };\r\n\r\n getSortedFeatures = (features, selectedExist = false, isQuotingTool = false) => {\r\n if (this.props.isWizard && this.props.currentGroups && displayMaterialsWizardGroupAsFeature(this.props.currentGroups)) {\r\n return features\r\n }\r\n const {fabricatorData} = this.props;\r\n const fabricatorSettings = fabricatorData.settings;\r\n let newFeatures = [...features.filter(feature => feature && feature.part && feature.part.dbFeature)];\r\n let selectedFeature = null;\r\n if (selectedExist && (!isQuotingTool || (newFeatures[0] && this.checkIfFeatureSelected(newFeatures[0].part, newFeatures[0].part.getParent())))) {\r\n selectedFeature = newFeatures[0];\r\n newFeatures.splice(0, 1);\r\n }\r\n if ((fabricatorSettings.leadCapture && !(document.kvConfig.isBackend && document.kvConfig.jobId && document.kvConfig.canSaveQuote)) && !this.props.isPhoneNumberValidated) {\r\n const unLockedFeatures = newFeatures\r\n .filter(navItem => !getFeatureIsLocked(navItem.part))\r\n .map(navItem => {\r\n navItem.part.featurePrice = getFeatureCost(navItem.part, 1);\r\n return navItem\r\n })\r\n const lockedFeatures = newFeatures\r\n .filter(navItem => getFeatureIsLocked(navItem.part))\r\n .map(navItem => {\r\n navItem.part.featurePrice = getFeatureCost(navItem.part, 1);\r\n return navItem\r\n })\r\n newFeatures = fabricatorSettings.showPricing ? [\r\n ...this.getNavItemsSortedByProperty(unLockedFeatures, \"featurePrice\", \"name\"),\r\n ...this.getNavItemsSortedByProperty(lockedFeatures, \"featurePrice\", \"name\")\r\n ] : [...unLockedFeatures, ...lockedFeatures];\r\n } else if (fabricatorSettings.showPricing && !fabricatorData.hideCheckoutBreakdownCost && !fabricatorData.hidePricesFromUser) {\r\n newFeatures = newFeatures.map(navItem => {\r\n navItem.part.featurePrice = getFeatureCost(navItem.part, 1);\r\n return navItem\r\n })\r\n newFeatures = this.getNavItemsSortedByProperty(newFeatures, \"featurePrice\", \"name\")\r\n } else {\r\n const propertyToSort = newFeatures.some(navItem => navItem.part.metaData[\"SortPositionNum\"]) ? \"SortPositionNum\" : \"name\";\r\n newFeatures = this.getNavItemsSortedByProperty(newFeatures, propertyToSort, \"\");\r\n if (!isQuotingTool && newFeatures.some(navItem => navItem.part.useMatchesFailedNavigation)) {\r\n newFeatures = this.getNavItemsSortedByProperty(newFeatures, \"matchesMetaFailed\");\r\n }\r\n }\r\n if (isQuotingTool) {\r\n // newFeatures = this.getNavItemsSortedByProperty(newFeatures, \"notAvailableInVisualizer\", \"_customDisplayName\")\r\n const inVisFeatures = newFeatures.filter(navFeature => !navFeature.part.notAvailableInVisualizer);\r\n const notInVisFeatures = newFeatures.filter(navFeature => navFeature.part.notAvailableInVisualizer);\r\n newFeatures = [\r\n ...inVisFeatures,\r\n // ...this.getNavItemsSortedByProperty(notInVisFeatures, \"featurePrice\", \"name\")\r\n ...notInVisFeatures\r\n ];\r\n }\r\n if (selectedExist && selectedFeature) {\r\n newFeatures.unshift(selectedFeature)\r\n }\r\n return newFeatures\r\n };\r\n\r\n getNavItemsList = (isMobile) => {\r\n const fabricatorSettings = this.props.fabricatorData.settings;\r\n const showPlaceHolders = document.bvConfig ? document.bvConfig.showPlaceholders : false;\r\n const elements = [];\r\n\r\n const features = this.state.reorderedFeatures.filter(feature => feature);\r\n // console.log('features', features);\r\n\r\n for (let i = 0; i < features.length; i++ ) {\r\n const currentFeature = features[i];\r\n const currentParent = this.props.childItem || this.props.parentItem;\r\n\r\n let isActive = false;\r\n if (((fabricatorSettings.leadCapture && !(document.kvConfig.isBackend && document.kvConfig.jobId && document.kvConfig.canSaveQuote)) && !this.props.isPhoneNumberValidated)\r\n || (showPlaceHolders && currentParent.part.placeholderFeature && !currentParent.part.placeholderChanged)) {\r\n isActive = currentFeature && this.props.activeFeature && currentParent\r\n && currentParent.part.firstClick[this.props.activeQuoteIndex]\r\n && this.props.activeFeature.dbFeature.id === currentFeature.part.id();\r\n } else {\r\n isActive = currentFeature && this.props.activeFeature && this.props.activeFeature.dbFeature.id === currentFeature.part.id();\r\n }\r\n\r\n if (isActive) {\r\n isActive = this.checkForSelectedAccessories(this.props.activeFeature, isActive);\r\n }\r\n\r\n let isPulsating = false;\r\n if ((fabricatorSettings.leadCapture && !(document.kvConfig.isBackend && document.kvConfig.jobId && document.kvConfig.canSaveQuote)) && !this.props.isPhoneNumberValidated\r\n && currentFeature && currentFeature.part.dbFeature.unlocked\r\n && (!this.props.activeFeature || (this.props.childItem && (!this.props.childItem.part.firstClick[this.props.activeQuoteIndex] || !this.props.activeFeature.dbFeature.unlocked)))) {\r\n isPulsating = true\r\n }\r\n\r\n let currentFeatureCartItemsCount = 0;\r\n const currentFeatureId = currentFeature && currentFeature.part.dbFeature.id;\r\n const matchingCartItem = this.props.cartItems.find((cartItem) => {\r\n return currentFeatureId === (cartItem.cartFeature.dbFeature && cartItem.cartFeature.dbFeature.id)\r\n && (cartItem.currentQuote === this.props.activeQuoteIndex);\r\n });\r\n if (matchingCartItem) {\r\n currentFeatureCartItemsCount = matchingCartItem.quantity\r\n }\r\n\r\n elements.push(\r\n this.switchToFeatureInfo(\r\n currentFeature, \"nav-item-info-clicked\", \"visualizer\"\r\n )}\r\n fabricatorData={this.props.fabricatorData}\r\n largeThumbnail={!isMobile && (this.props.navigationViewType === 2)}\r\n currentFeatureCartItemsCount={currentFeatureCartItemsCount}\r\n existInQtCategory={this.props.existInQtCategory}\r\n />\r\n );\r\n }\r\n\r\n return elements\r\n\r\n };\r\n\r\n getLoadingFeatures = () => (\r\n 
\r\n }\r\n\r\n if (isMobile) {\r\n const layoutItemWidth = (window.innerWidth / 4 - 10);\r\n const persentageOfWidth = layoutItemWidth * 100 / 720;\r\n const height = 405 * persentageOfWidth / 100;\r\n\r\n return (\r\n handleLayoutItemClick(type)}\r\n >\r\n \r\n )\r\n }\r\n\r\n return (\r\n handleLayoutItemClick ? handleLayoutItemClick(type) : null}\r\n style={{backgroundImage: `url(${thumbnailUrl})`}}>\r\n {thumbnailUrl ? null : \r\n );\r\n}\r\n\r\nLayoutNavigationItem.propTypes = {\r\n keyType: PropTypes.string.isRequired,\r\n layout: PropTypes.object.isRequired,\r\n handleLayoutItemClick: PropTypes.func,\r\n isMobile: PropTypes.bool,\r\n imageOnly: PropTypes.bool,\r\n}\r\n\r\nexport default LayoutNavigationItem\r\n","import React, {Component} from 'react';\r\nimport {connect} from \"react-redux\";\r\nimport PropTypes from 'prop-types';\r\nimport $ from \"jquery\";\r\nimport {\r\n // FacebookShareButton,\r\n TwitterShareButton,\r\n // PinterestShareButton,\r\n} from 'react-share';\r\nimport {FormattedMessage} from \"react-intl\";\r\n\r\nimport ActionTypes from \"../../misc/actionTypes\";\r\nimport Analytics from './../../analytics';\r\nimport UserLoginButton from './../ui/userLoginButton';\r\nimport {shareImageRebath, shareImage} from \"../bvComponent/core/assets\";\r\nimport SaveButton from \"./saveButton\";\r\nimport {toggleUserPopup} from \"../../actions/actionFunctions\";\r\nimport Config from \"../../config\";\r\n\r\nexport class ShareButton extends Component {\r\n\r\n static propTypes = {\r\n renderList: PropTypes.bool\r\n };\r\n\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n shareListOpened: false,\r\n };\r\n this.clickShareAfterLogin = null;\r\n this.elements = {\r\n email: React.createRef(),\r\n facebook: React.createRef(),\r\n twitter: React.createRef(),\r\n pinterest: React.createRef(),\r\n }\r\n }\r\n\r\n componentDidMount() {\r\n $(document).on(ActionTypes.USER_IS_LOGGED_IN, async () => { // click on current active item after unlock\r\n if (this.clickShareAfterLogin) {\r\n console.log('this.clickShareAfterLogin', this.clickShareAfterLogin);\r\n const shareButton = this.elements[this.clickShareAfterLogin];\r\n if (shareButton) {\r\n shareButton.current.click();\r\n }\r\n this.clickShareAfterLogin = null;\r\n }\r\n });\r\n $(window).on(ActionTypes.USER_POPUP_CLOSED, () => { // reset saved\r\n if (this.clickShareAfterLogin) {\r\n this.clickShareAfterLogin = null;\r\n }\r\n });\r\n }\r\n\r\n componentWillReceiveProps(nextProps) {\r\n if (nextProps.visualizerTutorialStep === 3 && this.props.visualizerTutorialStep === 2) {\r\n this.toggleShareList();\r\n }\r\n }\r\n\r\n componentWillUnmount() {\r\n $(document).off(ActionTypes.USER_IS_LOGGED_IN);\r\n $(window).off(ActionTypes.USER_POPUP_CLOSED);\r\n }\r\n\r\n renderImage = () => {\r\n // const canvas = document.getElementById(this.props.canvasId);\r\n // const imageUrl = canvas.toDataURL();\r\n const imageUrl = this.props.fabricatorData.isRebath\r\n ? encodeURIComponent(shareImageRebath)\r\n : encodeURIComponent(shareImage[document.kvConfig.visualizerType]);\r\n Analytics.sendClickEvent('share-button-pinterest');\r\n window.open(`//pinterest.com/pin/create/button/?url=${encodeURIComponent(this.props.shareUrl)}&media=${imageUrl}`, '_blank')\r\n };\r\n\r\n handleWrapperBlur = (e) => {\r\n if (!e.target.closest('.share-list__item .mobilebutton') && !e.target.closest('.share') && !this.clickShareAfterLogin) {\r\n this.toggleShareList();\r\n }\r\n };\r\n\r\n toggleShareList = () => {\r\n Analytics.sendClickEvent(this.state.shareListOpened ? 'share-list-toggle-closed' : 'share-list-toggle-opened');\r\n this.setState({\r\n shareListOpened: !this.state.shareListOpened\r\n }, () => {\r\n if (this.state.shareListOpened) {\r\n document.addEventListener('click', this.handleWrapperBlur);\r\n } else {\r\n document.removeEventListener('click', this.handleWrapperBlur);\r\n }\r\n })\r\n };\r\n\r\n checkForLoggedIn = (e) => {\r\n Analytics.sendClickEvent('share-button-' + e.target.dataset.share);\r\n if (!UserLoginButton.handleLoginClick({...this.props})) {\r\n e.stopPropagation();\r\n e.preventDefault();\r\n this.clickShareAfterLogin = e.target.closest(this.props.renderList ? \".menu-dropdown__list-item\" : \".mobilebutton\").dataset.share;\r\n return false;\r\n }\r\n return true;\r\n };\r\n\r\n faceBookButtonClick = (event) => {\r\n if (this.checkForLoggedIn(event)) {\r\n // const fbUrl = (Config.isMobile() || this.props.windowWidth < 991)\r\n // ? \"https://m.facebook.com/sharer/sharer.php?u=\"\r\n // : \"https://www.facebook.com/sharer/sharer.php?&p[url]=\";\r\n const fbUrl = \"https://facebook.com/sharer/sharer.php?u=\";\r\n const qfUrl = location.protocol + \"//\" + _.takeRight(window.location.hostname.split('.'), 2).join('.') + \"/url?u=\";\r\n const shareUrlSplitted = this.props.shareUrl.split(\".com\")\r\n if (Config.isDevMode()) {\r\n console.log(\"this.props.shareUrl\", this.props.shareUrl);\r\n console.log(\"shareUrlSplitted\", shareUrlSplitted);\r\n }\r\n window.open(\r\n fbUrl + qfUrl + shareUrlSplitted[0] + \".com\" + encodeURIComponent(shareUrlSplitted[1]),\r\n 'facebook-share-dialog',\r\n 'width=630,height=420'\r\n );\r\n\r\n // 'https://www.facebook.com/dialog/share?\\n' +\r\n // ' app_id=402959133605207&display=page&href='+this.props.shareUrl +\r\n // ' app_id=402959133605207&display=page&href=https%3A%2F%2Ffacebook.com%2Fdocs%2F&redirect_uri=https%3A%2F%2Fdevelopers.facebook.com%2Ftools%2Fexplorer',\r\n\r\n return false;\r\n }\r\n };\r\n\r\n getShareButtons = () => {\r\n const dashboardFramed = Config.isVisualizerManagement();\r\n const allPagesEnabled = !document.kvConfig.visualizerOnly;\r\n return (\r\n \r\n )\r\n\r\n };\r\n\r\n const mapStateToProps = (store) => {\r\n const {language, jobId} = store.serverState;\r\n const {encodedUserId, userInfo} = store.userState;\r\n const fabricatorData = store.fabricatorState;\r\n\r\n return {\r\n jobId,\r\n language,\r\n fabricatorData,\r\n encodedUserId,\r\n dialCode: userInfo.country ? userInfo.country.dialCode : \"\",\r\n phoneNumber: userInfo.phoneNumber || userInfo.phone,\r\n email: userInfo.email,\r\n };\r\n };\r\n\r\n return connect(mapStateToProps)(WithPingPilotCheck)\r\n}\r\n","import * as types from \"./actionTypes\";\r\n\r\nexport const setShopPageLoaded = (shopPageLoaded) => ({\r\n type: types.SET_SHOP_PAGE_LOADED,\r\n payload: {shopPageLoaded}\r\n})\r\nexport const setShopPageOpened = (shopPageOpened) => ({\r\n type: types.SET_SHOP_PAGE_OPENED,\r\n payload: {shopPageOpened}\r\n})\r\nexport const setShopLastPageVisited = (shopLastPageVisited) => ({\r\n type: types.SET_SHOP_LAST_PAGE_VISITED,\r\n payload: {shopLastPageVisited}\r\n})\r\nexport const setShopPageLeaved = (shopPageLeaved) => ({\r\n type: types.SET_SHOP_PAGE_LEAVED,\r\n payload: {shopPageLeaved}\r\n})\r\n\r\n// export const setShopActiveCategory = (shopActiveCategory) => ({\r\n// type: types.SET_SHOP_ACTIVE_CATEGORY,\r\n// payload: {shopActiveCategory}\r\n// })\r\n//\r\n// export const setShopActiveFeature = (shopActiveFeature) => ({\r\n// type: types.SET_SHOP_ACTIVE_FEATURE,\r\n// payload: {shopActiveFeature}\r\n// })\r\n","export const CONTENT_TYPES = {\r\n searchCustomer: \"searchCustomer\",\r\n newCustomer: \"newCustomer\",\r\n contractSelect: \"contractSelect\",\r\n};\r\n\r\nexport const PREFERRED_COMMUNICATION_METHODS = [\"Email\", \"SMS\"];\r\n\r\nexport const HOW_DID_YOU_HEAR_ABOUT_US_OPTIONS = [\"Email\", \"SMS\", \"Internet\", \"Other\"];\r\n","import $ from \"jquery\";\r\n\r\nexport const animateButtonsJQ = ($buttons) => {\r\n $buttons.each(function(index, element){\r\n $(element).addClass(\"animated fadeInUp\");\r\n setTimeout(function () {\r\n $(element).addClass(\"button--finished-transition\");\r\n }, 50 * index)\r\n })\r\n};\r\n\r\nexport const hideButtonsJQ = ($buttons) => {\r\n $buttons.each(function(index, element){\r\n $(element).removeClass(\"animated fadeInUp button--finished-transition\");\r\n })\r\n};\r\n\r\nexport const animateButtons = (buttons) => {\r\n buttons.forEach((element, index) => {\r\n if (element) {\r\n element.classList.add(\"animated\", \"fadeInUp\");\r\n setTimeout(() => {\r\n element.classList.add(\"button--finished-transition\");\r\n }, 50 * index);\r\n }\r\n });\r\n};\r\n\r\nexport const hideButtons = (buttons) => {\r\n buttons.forEach((element) => {\r\n if (element) {\r\n element.classList.remove(\"animated\", \"fadeInUp\", \"button--finished-transition\");\r\n }\r\n });\r\n};\r\n","import PropTypes from \"prop-types\";\r\n\r\nexport const miteredSectionInterface = {\r\n miteredSection: PropTypes.array,\r\n};\r\n\r\nexport const miteredSegmentInterface = {\r\n miteredSegment: PropTypes.object,\r\n};\r\n\r\nexport const waterfallSectionInterface = {\r\n waterfallSection: PropTypes.array,\r\n};\r\n\r\nexport const waterfallSegmentInterface = {\r\n waterfallSegment: PropTypes.object,\r\n};\r\n\r\nexport const changeValuePopupInterface = {\r\n id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\r\n min: PropTypes.number,\r\n max: PropTypes.number,\r\n confirmCallback: PropTypes.func,\r\n increaseCallback: PropTypes.func,\r\n decreaseCallback: PropTypes.func,\r\n inputChangeCallback: PropTypes.func,\r\n value: PropTypes.number,\r\n position: PropTypes.object,\r\n};\r\n","import React from \"react\";\r\nimport {connect} from \"react-redux\";\r\n\r\nimport {postMessageToParent} from \"../lookMessaging\";\r\nimport {GROHE_POST_MESSAGES_ACTIONS} from \"../iframeIntegration\";\r\nimport {getLookId, getPostCartItemsList} from \"../lookNavigation/lookFunctions2\";\r\nimport {setIframeIntegrationRequest} from \"../../../actions/iframeIntegrationFunctions\";\r\nimport {loaderDisable, loaderEnable} from \"../../ui/loaderView\";\r\nimport {saveQuote} from \"../../../api/server-api\";\r\nimport {renderErrorPopup} from \"../../../api/api-popups\";\r\nimport WithLoginPostMessage from \"./withLoginPostMessage\";\r\nimport {isIframe} from \"../../../misc/helpers\";\r\nimport {showQuoteSavedNotification} from \"../../ui/successNotification\";\r\nimport Analytics from \"../../../analytics\";\r\nimport {getAnalyticsEcommerceValues} from \"../../../analyticsEcommerceParams\";\r\n\r\nconst WithSavePostMessage = (props) => {\r\n\r\n const {cartItems, children, activePreset, bvPresets, userIsLoggedIn, setIframeIntegrationRequest, fabricatorData} = props;\r\n const isLixil = isIframe() && fabricatorData.isLixil;\r\n\r\n const savePostMessage = async (loginPostMessage, cartItem = null) => {\r\n\r\n const {currency, value, items} = getAnalyticsEcommerceValues();\r\n Analytics.sendEcommerceEvent(\"add_to_wishlist\", {currency, value, items});\r\n\r\n if (!userIsLoggedIn && isLixil) {\r\n loginPostMessage();\r\n return false\r\n }\r\n const wishlistLines = getPostCartItemsList(cartItem ? [cartItem] : cartItems);\r\n if (!wishlistLines.length && isLixil) {\r\n renderErrorPopup(\"No items in your list\", null, \"Something went wrong\");\r\n return false\r\n }\r\n loaderEnable();\r\n saveQuote({\r\n submit: true,\r\n showReceipt: false\r\n })\r\n .then((responseData) => {\r\n document.kvConfig.jobId = responseData.jobId;\r\n if (isLixil) {\r\n let lookId = getLookId(activePreset, bvPresets);\r\n let savePostData = {\r\n \"EventType\": GROHE_POST_MESSAGES_ACTIONS.save,\r\n \"LookId\": lookId + \"\",\r\n \"WishlistRequestLines\": wishlistLines\r\n }\r\n if(responseData.jobId) {\r\n savePostData[\"VisualizerId\"] = responseData.jobId + \"\";\r\n }\r\n setIframeIntegrationRequest(savePostData);\r\n window.postMessageIsExecuting = true;\r\n postMessageToParent(savePostData);\r\n } else {\r\n showQuoteSavedNotification();\r\n loaderDisable();\r\n }\r\n })\r\n .catch((error) => {\r\n renderErrorPopup(\"Server \"+new Error(error));\r\n if (!isLixil) {\r\n loaderDisable();\r\n }\r\n })\r\n }\r\n\r\n return (\r\n \r\n {(loginPostMessage) => children(savePostMessage.bind(this, loginPostMessage))}\r\n \r\n )\r\n};\r\n\r\nconst mapStateToProps = (store) => {\r\n const {cartItems} = store.cartState;\r\n const {activePreset, bvPresets} = store.bathroomVisualizerState;\r\n const {userIsLoggedIn} = store.userState;\r\n const fabricatorData = store.fabricatorState;\r\n return {\r\n cartItems,\r\n activePreset,\r\n userIsLoggedIn,\r\n bvPresets,\r\n fabricatorData,\r\n }\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n setIframeIntegrationRequest\r\n};\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(WithSavePostMessage)\r\n","import {useEffect} from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport {withRouter} from \"react-router-dom\";\r\nimport {injectIntl} from \"react-intl\";\r\n\r\nimport {isIframe} from \"../../misc/helpers\";\r\nimport {setIframeIntegrationRequest, setIframeIntegrationResponse} from \"../../actions/iframeIntegrationFunctions\";\r\nimport {GROHE_POST_MESSAGES_ACTIONS} from \"./iframeIntegration\";\r\nimport {renderErrorPopup} from \"../../api/api-popups\";\r\nimport {LOOK_OVERLAYS} from \"./core/constants\";\r\nimport {setLookOverlayOpened} from \"../../actions/lookFunctions\";\r\nimport {loaderDisable} from \"../ui/loaderView\";\r\n\r\nexport const postMessageToParent = (postMessageData) => {\r\n console.log(\"sending postMessage to parent with data: \", postMessageData);\r\n if (isIframe() && window.parent) {\r\n return window.parent.postMessage(postMessageData, document.referrer);\r\n }\r\n return false\r\n}\r\n\r\n/**\r\n * this class reacts to all post messages from parent iframe\r\n **/\r\nconst LookMessaging = (props) => {\r\n\r\n const {setIframeIntegrationResponse, iframeIntegrationRequestType, iframeIntegrationResponseSuccess,\r\n setIframeIntegrationRequest, loginPostMessage, setLookOverlayOpened, iframeIntegrationResponse} = props;\r\n\r\n const handleIFrameMessage = (event) => {\r\n console.log(\"event received in visualizer: \", event);\r\n if (event && event.data && event.data.hasOwnProperty(\"Success\")) {\r\n setIframeIntegrationResponse(event.data);\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n if (isIframe() && window.parent) {\r\n if (window.addEventListener) {\r\n window.addEventListener(\"message\", handleIFrameMessage, false);\r\n } else if (window.attachEvent) {\r\n window.attachEvent(\"onmessage\", handleIFrameMessage);\r\n }\r\n }\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, []);\r\n\r\n useEffect(() => {\r\n if ((iframeIntegrationRequestType === GROHE_POST_MESSAGES_ACTIONS.save)\r\n && (typeof iframeIntegrationResponseSuccess == \"boolean\")) {\r\n loaderDisable();\r\n setIframeIntegrationRequest({});\r\n setIframeIntegrationResponse({});\r\n window.postMessageIsExecuting = false;\r\n if (iframeIntegrationResponseSuccess) {\r\n setLookOverlayOpened(LOOK_OVERLAYS.saveSucess);\r\n } else if (iframeIntegrationResponse[\"ErrorCode\"] === \"SAVE-003\") {\r\n loginPostMessage(true);\r\n } else {\r\n renderErrorPopup(iframeIntegrationResponse[\"ErrorMessage\"]);\r\n }\r\n }\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [iframeIntegrationRequestType, iframeIntegrationResponseSuccess])\r\n\r\n return null\r\n\r\n};\r\n\r\nconst mapStateToProps = (store) => {\r\n const {iframeIntegrationRequest, iframeIntegrationResponse} = store.iframeIntegrationState;\r\n return {\r\n iframeIntegrationRequestType: iframeIntegrationRequest[\"EventType\"],\r\n iframeIntegrationResponseSuccess: iframeIntegrationResponse[\"Success\"],\r\n iframeIntegrationResponse,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n setIframeIntegrationResponse,\r\n setIframeIntegrationRequest,\r\n setLookOverlayOpened,\r\n};\r\n\r\nexport default withRouter(\r\n injectIntl(connect(mapStateToProps, mapDispatchToProps)(LookMessaging))\r\n)\r\n","import React from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport {injectIntl} from \"react-intl\";\r\nimport PropTypes from \"prop-types\";\r\n\r\nimport TextField from \"@mui/material/TextField\";\r\nimport {changeUserInfo, changeUserInfoErrors} from \"../../../actions/actionFunctions\";\r\nimport {onInputBlur, onInputChange, useInputsValidation} from \"../ui/inputFunctions\";\r\n\r\nconst getValidationErrors = (property, currentValue) => {\r\n const errors = [];\r\n\r\n switch (property) {\r\n case \"firstName\": {\r\n if (!currentValue) {\r\n errors.push(\"look.inputs.errors.fieldRequired\");\r\n return errors\r\n }\r\n if (currentValue.length === 1) {\r\n errors.push(\"look.inputs.errors.shortName\");\r\n } else if (currentValue.length > 50) {\r\n errors.push(\"look.inputs.errors.longName\");\r\n }\r\n if (!/^[A-Z\\s\\'\\-\\&\\.a-z]+$/.test(currentValue)) {\r\n errors.push(\"look.inputs.errors.nameIsIncorrect\");\r\n }\r\n break;\r\n }\r\n case \"email\": {\r\n if (!currentValue) {\r\n errors.push(\"look.inputs.errors.fieldRequired\");\r\n return errors\r\n }\r\n if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\\.[A-Z]{2,4}$/i.test(currentValue)) {\r\n errors.push(\"look.inputs.errors.invalidEmail\");\r\n }\r\n break;\r\n }\r\n case \"password\": {\r\n if (!currentValue) {\r\n errors.push(\"look.inputs.errors.fieldRequired\");\r\n return errors\r\n }\r\n break;\r\n }\r\n case \"postal\": {\r\n if (!currentValue) {\r\n errors.push(\"look.inputs.errors.fieldRequired\");\r\n return errors\r\n }\r\n const regex = /[a-zA-Z0-9][a-zA-Z0-9\\- ]{0,10}[a-zA-Z0-9]/;\r\n if (!regex.test(currentValue)) {\r\n errors.push(\"look.inputs.errors.incorrectPostal\");\r\n return errors\r\n }\r\n break;\r\n }\r\n }\r\n return errors\r\n}\r\n\r\nconst LookUserInput = (props) => {\r\n\r\n const {property, userInfo, changeUserInfo, intl, userInfoErrors, changeUserInfoErrors, inputsValidated, shrink} = props;\r\n // const [inputValue, setInputValue] = useState(userInfo[property] || \"\");\r\n\r\n const userInputChange = (property, value) => {\r\n changeUserInfo({\r\n [property]: value\r\n });\r\n }\r\n\r\n const userInputBlur = (property, value) => {\r\n if (userInfo[property] !== value) {\r\n changeUserInfo({\r\n [property]: value\r\n });\r\n }\r\n }\r\n\r\n const onBlur = (event) => {\r\n onInputBlur(event, property, userInputBlur, userInfoErrors, changeUserInfoErrors, getValidationErrors);\r\n };\r\n\r\n useInputsValidation(inputsValidated, onBlur, userInfo[property]);\r\n\r\n const onChange = (event) => {\r\n onInputChange(event, property, userInputChange, userInfoErrors, changeUserInfoErrors, getValidationErrors);\r\n };\r\n\r\n const errorsExist = Array.isArray(userInfoErrors[property]) && !!userInfoErrors[property].length;\r\n\r\n const requiredFields = [\"firstName\", \"email\", \"postal\", \"phoneNumber\"];\r\n const type = property !== \"email\" && property !== \"password\" ? \"text\" : property;\r\n\r\n return (\r\n \r\n {n.name}\r\n \r\n ));\r\n }\r\n}\r\n\r\nconst DesktopHeaderWithRouter = withRouter(props => \r\n \r\n {lookActiveFeature.partId === \"vanity_cabinet\" && !(isLixil && isWizard) ? : null}\r\n \r\n {Object.keys(VANITY_TYPES).includes(lookActiveFeature.partId) ? : null}\r\n {lookActiveFeature.partId === \"vanity_sink\" && !(isLixil && isWizard) ? : null}\r\n {lookActiveFeature.partId === \"corner_shelf\" || (lookActiveFeature.partId === \"body_spray\" && !isWizard)\r\n ? \r\n : null}\r\n {lookActiveFeature.partId === \"shower_pan_combo\" ? : null}\r\n {/*{lookActiveFeature.partId === \"shower_head\" ? : null}*/}\r\n {lookActiveFeature.partId === \"backsplash\" ? : null}\r\n {lookActiveFeature.partId === \"body_spray\" && isWizard\r\n ? \r\n : null}\r\n {lookActiveFeature.partId === \"slat_wall\"\r\n ? \r\n : null}\r\n \r\n )\r\n};\r\n\r\nGroheFeatureOptions.propTypes = {\r\n isWizard: PropTypes.bool,\r\n wizardGroup: PropTypes.shape(wizardGroupInterface),\r\n activeFeature: PropTypes.shape(featureInterface),\r\n}\r\n\r\nconst mapStateToProps = (store, ownProps) => {\r\n const {lookActiveFeature} = store.lookState;\r\n const {wizardActiveStep} = store.wizardState;\r\n const {isLixil} = store.fabricatorState;\r\n const {groheActiveFeatureQuantity} = store.groheState;\r\n\r\n return {\r\n lookActiveFeature: ownProps.activeFeature || lookActiveFeature,\r\n wizardActiveStep,\r\n isLixil,\r\n groheActiveFeatureQuantity,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n setWizardSelectedValues,\r\n}\r\n\r\nexport default (\r\n connect(mapStateToProps, mapDispatchToProps)((props) => {\r\n return (\r\n \r\n {(updateLookCartItem) => }\r\n \r\n )\r\n })\r\n)\r\n","'use strict';\r\n\r\nObject.defineProperty(exports, \"__esModule\", {\r\n value: true\r\n});\r\nexports.default = exports.LoadingBar = exports.TERMINATING_ANIMATION_DURATION = exports.ANIMATION_DURATION = exports.PROGRESS_INCREASE = exports.MAX_PROGRESS = exports.UPDATE_TIME = undefined;\r\n\r\nvar _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };\r\n\r\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\r\n\r\nvar _react = require('react');\r\n\r\nvar _react2 = _interopRequireDefault(_react);\r\n\r\nvar _reactLifecyclesCompat = require('react-lifecycles-compat');\r\n\r\nvar _propTypes = require('prop-types');\r\n\r\nvar _reactRedux = require('react-redux');\r\n\r\nvar _loading_bar_ducks = require('./loading_bar_ducks');\r\n\r\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\r\n\r\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\r\n\r\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\r\n\r\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\r\n\r\nvar UPDATE_TIME = exports.UPDATE_TIME = 200;\r\nvar MAX_PROGRESS = exports.MAX_PROGRESS = 100;\r\nvar PROGRESS_INCREASE = exports.PROGRESS_INCREASE = 3;\r\nvar ANIMATION_DURATION = exports.ANIMATION_DURATION = UPDATE_TIME * 4;\r\nvar TERMINATING_ANIMATION_DURATION = exports.TERMINATING_ANIMATION_DURATION = UPDATE_TIME / 2;\r\n\r\nvar initialState = {\r\n percent: 0,\r\n status: 'hidden'\r\n};\r\n\r\nvar LoadingBar = function (_Component) {\r\n _inherits(LoadingBar, _Component);\r\n\r\n function LoadingBar() {\r\n var _ref;\r\n\r\n var _temp, _this, _ret;\r\n\r\n _classCallCheck(this, LoadingBar);\r\n\r\n for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {\r\n args[_key] = arguments[_key];\r\n }\r\n\r\n return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = LoadingBar.__proto__ || Object.getPrototypeOf(LoadingBar)).call.apply(_ref, [this].concat(args))), _this), _this.state = _extends({}, initialState), _this.reset = function () {\r\n _this.terminatingAnimationTimeoutId = null;\r\n _this.setState(initialState);\r\n }, _this.newPercent = function (percent, progressIncrease) {\r\n // Use cosine as a smoothing function\r\n // It could be any function to slow down progress near the ending 100%\r\n var smoothedProgressIncrease = progressIncrease * Math.cos(percent * (Math.PI / 2 / 100));\r\n\r\n return percent + smoothedProgressIncrease;\r\n }, _this.simulateProgress = function () {\r\n _this.setState(function (prevState, _ref2) {\r\n var maxProgress = _ref2.maxProgress,\r\n progressIncrease = _ref2.progressIncrease;\r\n var percent = prevState.percent;\r\n\r\n var newPercent = _this.newPercent(percent, progressIncrease);\r\n\r\n if (newPercent <= maxProgress) {\r\n percent = newPercent;\r\n }\r\n\r\n return { percent: percent };\r\n });\r\n }, _temp), _possibleConstructorReturn(_this, _ret);\r\n }\r\n\r\n _createClass(LoadingBar, [{\r\n key: 'componentDidMount',\r\n value: function componentDidMount() {\r\n if (this.state.status === 'starting') {\r\n this.start();\r\n }\r\n }\r\n }, {\r\n key: 'componentDidUpdate',\r\n value: function componentDidUpdate(prevProps, prevState) {\r\n if (prevState.status !== this.state.status) {\r\n if (this.state.status === 'starting') {\r\n this.start();\r\n }\r\n\r\n if (this.state.status === 'stopping') {\r\n this.stop();\r\n }\r\n }\r\n }\r\n }, {\r\n key: 'componentWillUnmount',\r\n value: function componentWillUnmount() {\r\n clearInterval(this.progressIntervalId);\r\n clearTimeout(this.terminatingAnimationTimeoutId);\r\n }\r\n }, {\r\n key: 'start',\r\n value: function start() {\r\n this.progressIntervalId = setInterval(this.simulateProgress, this.props.updateTime);\r\n this.setState({ status: 'running' });\r\n }\r\n }, {\r\n key: 'stop',\r\n value: function stop() {\r\n clearInterval(this.progressIntervalId);\r\n this.progressIntervalId = null;\r\n\r\n var terminatingAnimationDuration = this.isShown() || this.props.showFastActions ? TERMINATING_ANIMATION_DURATION : 0;\r\n\r\n this.terminatingAnimationTimeoutId = setTimeout(this.reset, terminatingAnimationDuration);\r\n\r\n this.setState({ percent: 100 });\r\n }\r\n }, {\r\n key: 'isShown',\r\n value: function isShown() {\r\n return this.state.percent > 0 && this.state.percent <= 100;\r\n }\r\n }, {\r\n key: 'buildStyle',\r\n value: function buildStyle() {\r\n var animationDuration = this.state.status === 'stopping' ? TERMINATING_ANIMATION_DURATION : ANIMATION_DURATION;\r\n\r\n var style = {\r\n opacity: '1',\r\n transform: 'scaleX(' + this.state.percent / 100 + ')',\r\n transformOrigin: 'left',\r\n transition: 'transform ' + animationDuration + 'ms linear',\r\n width: '100%',\r\n willChange: 'transform, opacity'\r\n\r\n // Use default styling if there's no CSS class applied\r\n };if (!this.props.className) {\r\n style.height = '3px';\r\n style.backgroundColor = 'red';\r\n style.position = 'absolute';\r\n }\r\n\r\n if (this.isShown()) {\r\n style.opacity = '1';\r\n } else {\r\n style.opacity = '0';\r\n }\r\n\r\n return _extends({}, style, this.props.style);\r\n }\r\n }, {\r\n key: 'render',\r\n value: function render() {\r\n if (this.state.status === 'hidden') {\r\n return _react2.default.createElement('div', null);\r\n } else if (this.props.renderComponent) {\r\n return this.props.renderComponent(Math.round(this.state.percent))\r\n }\r\n\r\n return _react2.default.createElement(\r\n 'div',\r\n { className: this.props.className },\r\n Math.round(this.state.percent)\r\n );\r\n }\r\n }], [{\r\n key: 'shouldStart',\r\n value: function shouldStart(props, state) {\r\n return props.loading > 0 && ['hidden', 'stopping'].indexOf(state.status) >= 0;\r\n }\r\n }, {\r\n key: 'shouldStop',\r\n value: function shouldStop(props, state) {\r\n return props.loading === 0 && ['starting', 'running'].indexOf(state.status) >= 0;\r\n }\r\n }, {\r\n key: 'getDerivedStateFromProps',\r\n value: function getDerivedStateFromProps(nextProps, prevState) {\r\n if (LoadingBar.shouldStart(nextProps, prevState)) {\r\n return { status: 'starting' };\r\n }\r\n\r\n if (LoadingBar.shouldStop(nextProps, prevState)) {\r\n return { status: 'stopping' };\r\n }\r\n\r\n return null;\r\n }\r\n }]);\r\n\r\n return LoadingBar;\r\n}(_react.Component);\r\n\r\nLoadingBar.propTypes = {\r\n className: _propTypes.string,\r\n loading: _propTypes.number,\r\n maxProgress: _propTypes.number,\r\n progressIncrease: _propTypes.number,\r\n showFastActions: _propTypes.bool,\r\n updateTime: _propTypes.number,\r\n scope: _propTypes.string,\r\n style: _propTypes.object,\r\n renderComponent: _propTypes.func\r\n};\r\nLoadingBar.defaultProps = {\r\n className: '',\r\n loading: 0,\r\n maxProgress: MAX_PROGRESS,\r\n progressIncrease: PROGRESS_INCREASE,\r\n showFastActions: false,\r\n style: {},\r\n updateTime: UPDATE_TIME,\r\n scope: _loading_bar_ducks.DEFAULT_SCOPE,\r\n renderComponent: null,\r\n};\r\n\r\n\r\nvar mapStateToProps = function mapStateToProps(state, ownProps) {\r\n return {\r\n loading: state.loadingBar[ownProps.scope || _loading_bar_ducks.DEFAULT_SCOPE]\r\n };\r\n};\r\n\r\n(0, _reactLifecyclesCompat.polyfill)(LoadingBar);\r\nvar ConnectedLoadingBar = (0, _reactRedux.connect)(mapStateToProps)(LoadingBar);\r\n\r\nexports.LoadingBar = LoadingBar;\r\nexports.default = ConnectedLoadingBar;\r\n","import React, {useContext} from \"react\";\r\nimport {Text, View} from '@react-pdf/renderer';\r\nimport PropTypes from \"prop-types\";\r\n\r\nimport PrintDocumentInfoFabricator from \"./printDocumentInfoFabricator\";\r\nimport {PrintDocumentContext} from \"./printDocumentContext\";\r\n\r\nexport const getAddressFromObject = (userInfo) => {\r\n let displayAddress = \"\";\r\n [userInfo.city, userInfo.state, userInfo.postal].forEach(addressPart => { // 1) city 2) provence 3) postal\r\n if (addressPart) {\r\n if (displayAddress) {\r\n displayAddress += \", \"\r\n }\r\n displayAddress += addressPart\r\n }\r\n });\r\n return displayAddress\r\n}\r\n\r\nconst PrintDocumentInfo = (props) => {\r\n const {styles, userInfo, fabricatorData, assignQuotePopupCustomer, employeeSelected} = props;\r\n const customerName = assignQuotePopupCustomer\r\n ? assignQuotePopupCustomer.fullName\r\n : userInfo.firstName + (userInfo.lastName ? (\" \" + userInfo.lastName) : \"\")\r\n const customerEmail = assignQuotePopupCustomer ? assignQuotePopupCustomer.email : userInfo.email || \"\"\r\n const customerPhone = userInfo.phoneNumber\r\n ? userInfo.country && !userInfo.phoneNumber.includes(`+${userInfo.country.dialCode} `)\r\n ? `+${userInfo.country.dialCode} ${userInfo.phoneNumber}`\r\n : userInfo.phoneNumber\r\n : \"\";\r\n const customerAddress = getAddressFromObject(userInfo);\r\n const customerHasShippingAddress = userInfo.shipping && ([\"address1\", \"city\", \"postal\"].some(key => {\r\n return userInfo.shipping[key] && (userInfo[key] !== userInfo.shipping[key])\r\n }));\r\n let shippingAddress = \"\";\r\n if (customerHasShippingAddress) {\r\n shippingAddress = getAddressFromObject(userInfo.shipping);\r\n }\r\n const threeColumns = (employeeSelected || (customerHasShippingAddress && !fabricatorData.isCaesarStone))\r\n && !fabricatorData.isAmericanStandard;\r\n const printContext = useContext(PrintDocumentContext);\r\n\r\n return (\r\n \r\n \r\n {printContext.messages[\"receipt.mainInfo.customerInformation\"]} \r\n {customerName} \r\n {userInfo.address1 ? {userInfo.address1} : null}\r\n {customerAddress ? {customerAddress} : null}\r\n {customerEmail} \r\n {customerPhone} \r\n \r\n {threeColumns ? (\r\n \r\n {!fabricatorData.isCaesarStone && (shippingAddress || userInfo.shipping.address1)\r\n ? {printContext.messages[\"receipt.mainInfo.billingAddress\"]} \r\n : null}\r\n {!fabricatorData.isCaesarStone && userInfo.shipping.address1\r\n ? {userInfo.shipping.address1} \r\n : null}\r\n {!fabricatorData.isCaesarStone && shippingAddress\r\n ? {shippingAddress} \r\n : null}\r\n {employeeSelected ? (\r\n \r\n {printContext.messages[\"receipt.mainInfo.salesPerson\"]}\r\n \r\n ) : null}\r\n {employeeSelected ? {employeeSelected.fullName} : null}\r\n \r\n ) : null}\r\n \r\n \r\n )\r\n};\r\n\r\nPrintDocumentInfo.propTypes = {\r\n userInfo: PropTypes.object.isRequired,\r\n fabricatorData: PropTypes.object.isRequired,\r\n assignQuotePopupCustomer: PropTypes.object,\r\n styles: PropTypes.object.isRequired,\r\n};\r\n\r\nexport default PrintDocumentInfo\r\n","import React, {Fragment, useContext} from \"react\";\r\nimport {View, Text, Image} from \"@react-pdf/renderer\";\r\nimport PropTypes from \"prop-types\";\r\n\r\nimport {\r\n detectComplexLaborCartItem,\r\n getPriceWithCurrency,\r\n getTotalPrice,\r\n toFixedFeatureCost,\r\n toFixedPrice\r\n} from \"../../../misc/helpers\";\r\nimport {PrintDocumentContext} from \"./printDocumentContext\";\r\nimport {getCartItemName, getFeatureUnit} from \"./printDocumentFunctions\";\r\nimport {cartItemInterface} from \"../../shoppingCart/cartItemInterface\";\r\nimport {getPriceWithIncluded, getShowPrice} from \"../../../misc/priceFunctions\";\r\nimport PrintDocumentBodyBundledCartItems from \"./printDocumentBodyBundledCartItems\";\r\nimport {SQFT_FEATURES} from \"../../sqft/constants\";\r\n\r\nconst PrintDocumentBodyCartItem = (props) => {\r\n const {styles, cartItem, fabricatorData, locale, cartItems, sqftSlabState, cartItemsThumbnails} = props;\r\n\r\n const fabricatorSettings = fabricatorData.settings;\r\n const isComplexMultipliedUsed = detectComplexLaborCartItem(cartItem) && getTotalPrice().multipliedCostUsed;\r\n //const shouldUseSlabPricing = cartItem.shouldUseSlabPricing; // calculate shouldUseSlabPricing per cItem:\r\n const shouldUseSlabPricing = cartItem.partId === SQFT_FEATURES.slabs && sqftSlabState.isSlabPricingEnabled; // calculate shouldUseSlabPricing globally\r\n const priceTotal = isComplexMultipliedUsed || cartItem.displayFakePrice === 0\r\n ? null\r\n : toFixedFeatureCost(cartItem.cartFeature, cartItem.quantity, cartItem.fromQtCategory, true, cartItem, shouldUseSlabPricing, cartItem.currentQuote);\r\n const printContext = useContext(PrintDocumentContext);\r\n\r\n const getFeatureQuantity = () => {\r\n return printContext.messages[\"receipt.content.featureQuantity\"] || \"\"\r\n };\r\n\r\n const getPrice = () => {\r\n const showPrice = getShowPrice(fabricatorData);\r\n if (!showPrice) {\r\n return null\r\n }\r\n return getPriceWithIncluded(priceTotal, cartItem.cartFeature, fabricatorData, printContext.messages)\r\n };\r\n\r\n const featurePrice = toFixedFeatureCost(cartItem.cartFeature, 1, cartItem.fromQtCategory, false, null, shouldUseSlabPricing, cartItem.currentQuote);\r\n const price = getPrice();\r\n const hideUnitPrice = (cartItem.partId === \"room\" && !featurePrice) || !price;\r\n const isMinimumCharge = cartItem.isMinimumCharge && !cartItem.isMinimumChargeItems;\r\n const displayFake = cartItem.displayFakeQuantity && (typeof cartItem.displayFakeQuantity === \"number\") && (cartItem.displayFakeQuantity > 0);\r\n\r\n const bundleProducts = cartItems ? cartItems.filter(cItem => {\r\n return cItem.bundleParentId && (cItem.bundleParentId === cartItem.id)\r\n }) : [];\r\n\r\n const withThumbnail = fabricatorData.receiptSettings && fabricatorData.receiptSettings.showThumbnailsAndDescriptions\r\n && cartItemsThumbnails\r\n && cartItemsThumbnails[cartItem.id];\r\n\r\n if (withThumbnail) {\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n {getCartItemName(cartItem.cartFeature, fabricatorData, printContext, locale)}\r\n \r\n {cartItem.cartFeature.dbFeature.sku && !fabricatorSettings.hideSku ? (\r\n \r\n {`${printContext.messages[\"receipt.content.featureSKU\"]}: ${cartItem.cartFeature.dbFeature.sku}`}\r\n \r\n ) : null}\r\n {cartItem.cartFeature.dbFeature.description ? (\r\n \r\n {cartItem.cartFeature.dbFeature.description}\r\n \r\n ) : null}\r\n \r\n {isMinimumCharge\r\n ? null\r\n : (\r\n \r\n {`${getFeatureQuantity()}: ${toFixedPrice(displayFake ? cartItem.displayFakeQuantity : cartItem.quantity)}`}\r\n \r\n )}\r\n \r\n {hideUnitPrice || isMinimumCharge\r\n ? null\r\n : `${getFeatureUnit(cartItem.cartFeature, fabricatorData, printContext, locale, cartItem.quantity)}: ${getPriceWithCurrency(fabricatorSettings, featurePrice, cartItem.cartFeature)}`}\r\n \r\n {price} \r\n \r\n {cartItem.noteText ? {cartItem.noteText} : null}\r\n \r\n \r\n {bundleProducts.length ? : null}\r\n \r\n )\r\n }\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n {getCartItemName(cartItem.cartFeature, fabricatorData, printContext, locale)}\r\n \r\n \r\n {cartItem.cartFeature.dbFeature.sku && !fabricatorSettings.hideSku ? (\r\n \r\n {`${printContext.messages[\"receipt.content.featureSKU\"]}: ${cartItem.cartFeature.dbFeature.sku}`}\r\n \r\n ) : null}\r\n {isMinimumCharge\r\n ? null\r\n : (\r\n \r\n {`${getFeatureQuantity()}: ${toFixedPrice(displayFake ? cartItem.displayFakeQuantity : cartItem.quantity)}`}\r\n \r\n )}\r\n \r\n {hideUnitPrice || isMinimumCharge\r\n ? null\r\n : `${getFeatureUnit(cartItem.cartFeature, fabricatorData, printContext, locale, cartItem.quantity)}: ${getPriceWithCurrency(fabricatorSettings, featurePrice, cartItem.cartFeature)}`}\r\n \r\n {price} \r\n \r\n {cartItem.noteText ? {cartItem.noteText} : null}\r\n \r\n \r\n {bundleProducts.length ? : null}\r\n \r\n\r\n )\r\n};\r\n\r\nPrintDocumentBodyCartItem.propTypes = {\r\n cartItem: PropTypes.shape(cartItemInterface),\r\n fabricatorData: PropTypes.object.isRequired,\r\n locale: PropTypes.string.isRequired,\r\n styles: PropTypes.object.isRequired,\r\n};\r\n\r\nexport default PrintDocumentBodyCartItem\r\n\r\n","import PropTypes from \"prop-types\";\r\n\r\nexport const filterGroupInterface = {\r\n id: PropTypes.number.isRequired,\r\n name: PropTypes.string,\r\n type: PropTypes.string,\r\n values: PropTypes.array,\r\n visualType: PropTypes.string,\r\n}\r\n\r\nexport const filterValueInterface = {\r\n id: PropTypes.number.isRequired,\r\n additionalImages: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),\r\n displayText: PropTypes.string,\r\n filterGroup_id: PropTypes.number,\r\n icon: PropTypes.string,\r\n lockedInWizard: PropTypes.bool,\r\n value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\r\n}\r\n\r\nexport const navigationFilterValueInterface = {\r\n filterId: PropTypes.number.isRequired,\r\n filterGroupId: PropTypes.number.isRequired,\r\n}\r\n","import EventManager from \"../../../store/sqftEventManager\";\r\nimport workspace from \"../../workspace\";\r\nimport config from \"../../../store/sqftConfig\";\r\nimport {getMousePositionOnField} from \"../../../../../helpers/sqftHelper\";\r\nimport {pnpolyArray} from \"../../../../../lib/pnpoly\";\r\n\r\nexport default class Movable {\r\n\r\n state = {\r\n hoveringOnlyShape: false,\r\n mouseDown: false,\r\n mouseDownWithChildren: false,\r\n mouseDownPosition: null,\r\n hovering: false,\r\n hoveringWithChildren: false,\r\n handlerHold: null\r\n };\r\n _posX;\r\n _posY;\r\n _width;\r\n _height;\r\n isResizedByPoint = false;\r\n priority;\r\n parent;\r\n grandParent;\r\n moveCallback = null;\r\n mouseUpCallback = null;\r\n mouseDownCallback = null;\r\n\r\n constructor(posX,\r\n posY,\r\n width,\r\n height,\r\n priority = EventManager.priorities.IMAGE,\r\n parent = null,\r\n grandParent = null,\r\n moveCallback = null,\r\n mouseUpCallback = null,\r\n mouseDownCallback = null\r\n ) {\r\n this.priority = priority;\r\n this.parent = parent;\r\n this.grandParent = grandParent;\r\n this.moveCallback = moveCallback;\r\n this.mouseUpCallback = mouseUpCallback;\r\n this.mouseDownCallback = mouseDownCallback;\r\n\r\n this.initEvents();\r\n this._posX = posX;\r\n this._posY = posY;\r\n this._width = width;\r\n this._height = height;\r\n }\r\n\r\n get posX() {\r\n return this._posX;\r\n }\r\n\r\n set posX(value) {\r\n this._posX = value;\r\n }\r\n\r\n get posY() {\r\n return this._posY;\r\n }\r\n\r\n set posY(value) {\r\n this._posY = value;\r\n }\r\n\r\n get width() {\r\n return this._width;\r\n }\r\n\r\n set width(value) {\r\n this._width = value;\r\n }\r\n\r\n get height() {\r\n return this._height;\r\n }\r\n\r\n set height(value) {\r\n this._height = value;\r\n }\r\n\r\n initEvents() {\r\n EventManager.addEvent(\r\n EventManager.events.MOUSE_MOVE,\r\n this.onMouseMove.bind(this),\r\n this,\r\n this.priority\r\n );\r\n EventManager.addEvent(\r\n EventManager.events.MOUSE_DOWN,\r\n this.onMouseDown.bind(this),\r\n this,\r\n this.priority\r\n );\r\n EventManager.addEvent(\r\n EventManager.events.MOUSE_UP,\r\n this.onMouseUp.bind(this),\r\n this,\r\n this.priority\r\n );\r\n }\r\n\r\n deregisterEvents() {\r\n EventManager.removeEvent(this);\r\n }\r\n\r\n reInitEvents = () => {\r\n this.initEvents();\r\n }\r\n\r\n onMouseMove(mousePos, e) {\r\n if (e.terminate && !this.state.mouseDown) {\r\n this.setHoveringOnlyShape(false);\r\n\r\n return this.setHovering(false);\r\n }\r\n\r\n if (this.state.mouseDown) {\r\n EventManager.setCursor('move', this, true);\r\n if (this.moveCallback) {\r\n this.moveCallback(mousePos, this);\r\n } else {\r\n this.movePosition(mousePos);\r\n }\r\n }\r\n\r\n if (this.isMouseOverArea(mousePos)) {\r\n this.setHovering(true);\r\n\r\n EventManager.setCursor('move', this);\r\n return this.state.mouseDown;\r\n }\r\n if (this.parent.points !== undefined) { // todo this should be children not points\r\n for (const point in this.parent.points) {\r\n if (this.parent.points.hasOwnProperty(point)) {\r\n if (this.parent.points[point].modelCorePoint.mixins.movable.state.hovering) {\r\n this.setHoveringWithChildren(true);\r\n\r\n return this.state.hoveringWithChildren\r\n }\r\n }\r\n }\r\n }\r\n\r\n this.setHovering(false);\r\n this.setHoveringWithChildren(false);\r\n EventManager.resetCursor(this);\r\n\r\n return false;\r\n }\r\n\r\n onMouseUp(mousePos) {\r\n EventManager.releaseStealLock(self);\r\n this.state.mouseDown = false;\r\n this.state.mouseDownPosition = null;\r\n if (this.mouseUpCallback) {\r\n this.mouseUpCallback(mousePos, this);\r\n }\r\n }\r\n\r\n onMouseDown(mousePos, e) {\r\n void e;\r\n if (this.isHovering()) {\r\n //if (EventManager.getCursor().indexOf(\"move\") >= 0) {\r\n this.state.mouseDown = true;\r\n this.state.mouseDownPosition = mousePos;\r\n //}\r\n if (this.mouseDownCallback) {\r\n this.mouseDownCallback(mousePos, this);\r\n }\r\n return true;\r\n }\r\n return false;\r\n }\r\n isHovering () { return this.state.hovering === true; }\r\n setHoveringOnlyShape(value) { this.state.hoveringOnlyShape = value; return value; }\r\n setHovering(value) { this.state.hovering = value; return value; }\r\n setHoveringWithChildren(value) { this.state.hoveringWithChildren = value; return value; }\r\n\r\n movePosition(mousePos) {\r\n let scale = workspace.getScale();\r\n let xDiff = (this.state.mouseDownPosition.x - mousePos.x) / scale;\r\n let yDiff = (this.state.mouseDownPosition.y - mousePos.y) / scale;\r\n\r\n this.state.mouseDownPosition.x = mousePos.x;\r\n this.state.mouseDownPosition.y = mousePos.y;\r\n\r\n //todo this should be outside of the class\r\n if (this.parent.params.isResizedByPoint) {\r\n // 0 point\r\n // this.grandParent.posX -= xDiff;\r\n // this.grandParent.posY -= yDiff;\r\n\r\n //3 point\r\n // this.grandParent.posX -= xDiff;\r\n // this.grandParent.mixin.movable.width += xDiff;\r\n // this.posX -= xDiff;\r\n\r\n //4 point\r\n if (this.grandParent.width - xDiff >= this.grandParent.design.minimumWidth) {\r\n this.grandParent.width -= xDiff;\r\n this.grandParent.mixin.movable.width -= xDiff;\r\n this.posX -= xDiff;\r\n\r\n // change p7 x cord\r\n // todo grandParent setter\r\n this.grandParent.points.p7.modelCorePoint.mixins.movable.posX -= xDiff;\r\n\r\n // update textarea width\r\n // todo get from the parent class\r\n\r\n let textarea = document.querySelector('.i-text');\r\n if (textarea) {\r\n let width = textarea.offsetWidth;\r\n width -= xDiff * 4;\r\n textarea.style.width = width + 'px';\r\n }\r\n }\r\n } else if (this.parent.params.isScaledByPoint) {\r\n // 7 point (scaled)\r\n if (this.grandParent.height - (xDiff + yDiff) / 2 >= this.grandParent.design.minimumHeight\r\n && this.grandParent.width - (xDiff + yDiff) / 2 >= this.grandParent.design.minimumWidth\r\n ) {\r\n this.grandParent.width -= (xDiff + yDiff) / 2;\r\n this.grandParent.height -= (xDiff + yDiff) / 2;\r\n this.grandParent.mixin.movable.width -= (xDiff + yDiff) / 2;\r\n this.grandParent.mixin.movable.height -= (xDiff + yDiff) / 2;\r\n\r\n this.posX -= (xDiff + yDiff) / 2;\r\n this.posY -= (xDiff + yDiff) / 2;\r\n\r\n //change point 4 x cord\r\n //todo grandParent setter\r\n this.grandParent.points.p4.modelCorePoint.mixins.movable.posX -= (xDiff + yDiff) / 2;\r\n }\r\n } else {\r\n this.posX -= xDiff;\r\n this.posY -= yDiff;\r\n }\r\n }\r\n\r\n isMouseOverArea (mousePos) {\r\n let offset = this.grandParent && this.grandParent.getPosition && this.grandParent.isLastParent !== true\r\n ? this.grandParent.getPosition()\r\n : {x: 0, y: 0};\r\n\r\n let pointsArray;\r\n\r\n if (this.parent.design !== undefined && this.parent.design.layout === \"resize\") { // centered cords for points\r\n pointsArray = [\r\n [this.posX + offset.x - this.parent.design.radius / 2, this.posY + offset.y - this.parent.design.radius / 2],\r\n [this.posX + offset.x + this.parent.design.radius / 2, this.posY + offset.y - this.parent.design.radius / 2],\r\n [this.posX + offset.x + this.parent.design.radius / 2, this.posY + offset.y + this.parent.design.radius / 2],\r\n [this.posX + offset.x - this.parent.design.radius / 2, this.posY + offset.y + this.parent.design.radius / 2],\r\n ];\r\n } else if (this.parent.params && this.parent.params.isCenteredByY) { // centered cords for points\r\n pointsArray = [\r\n [this.posX + offset.x, this.posY + offset.y - this.parent.design.radius / 2],\r\n [this.posX + this.width + offset.x, this.posY + offset.y - this.parent.design.radius / 2],\r\n [this.posX + this.width + offset.x, this.posY + this.height + offset.y - this.parent.design.radius / 2],\r\n [this.posX + offset.x, this.posY + this.height + offset.y - this.parent.design.radius / 2],\r\n ];\r\n } else if (this.parent.params && this.parent.params.isCentered) { // centered cords for points\r\n pointsArray = [\r\n [this.posX + offset.x - this.width / 2, this.posY + offset.y - this.height / 2],\r\n [this.posX + offset.x + this.width / 2, this.posY + offset.y - this.height / 2],\r\n [this.posX + offset.x + this.width / 2, this.posY + offset.y + this.height / 2],\r\n [this.posX + offset.x - this.width / 2, this.posY + offset.y + this.height / 2],\r\n ];\r\n } else {\r\n pointsArray = [\r\n [this.posX + offset.x, this.posY + offset.y],\r\n [this.posX + this.width + offset.x, this.posY + offset.y],\r\n [this.posX + this.width + offset.x, this.posY + this.height + offset.y],\r\n [this.posX + offset.x, this.posY + this.height + offset.y],\r\n ];\r\n }\r\n\r\n let posOnField = getMousePositionOnField(mousePos.x, mousePos.y);\r\n\r\n return pnpolyArray(pointsArray, posOnField);\r\n }\r\n\r\n isMouseOverAreaByMousePOs (mousePos) {\r\n let scale = config.scale;\r\n let pointsArray = [\r\n [this.posX, this.posY],\r\n [this.posX + this.width * scale, this.posY],\r\n [this.posX + this.width * scale, this.posY + this.height * scale],\r\n [this.posX, this.posY + this.height * scale],\r\n ];\r\n\r\n return pnpolyArray(pointsArray, mousePos);\r\n }\r\n}\r\n","import eventManager from \"../../store/sqftEventManager\";\r\nimport config from \"../../store/sqftConfig\";\r\nimport $ from \"jquery\";\r\n\r\nexport default class Cursor {\r\n cursorName = null;\r\n addedImages = [];\r\n\r\n registerEvents = () => {\r\n eventManager.addEvent(\r\n eventManager.events.RENDER,\r\n this.renderCursor,\r\n this,\r\n eventManager.priorities.OVERALL\r\n );\r\n eventManager.addEvent(\r\n eventManager.events.MOUSE_UP,\r\n this.onMouseUp,\r\n this,\r\n eventManager.priorities.OVERALL\r\n );\r\n };\r\n\r\n onMouseUp = () => {\r\n this.checkForRestoreCursor();\r\n };\r\n\r\n setCursorImage = (imgSrc) => {\r\n const alreadyAddedImage = this.addedImages.find(image => image.dataset.id === this.clickedEdgeButton.attr(\"data-id\"));\r\n if (alreadyAddedImage) {\r\n this.cursorImage = { image: alreadyAddedImage, width: alreadyAddedImage.width, height: alreadyAddedImage.height };\r\n eventManager.setCursor('edge-select', this, true);\r\n this.registerEvents();\r\n } else {\r\n this.addCursorImage(imgSrc);\r\n }\r\n };\r\n\r\n addCursorImage = (imgSrc) => {\r\n let item = this.clickedBackSplashButton, // remember it to restore after moving canvas cursor switch\r\n bounds = 18,\r\n imgWidth = bounds,\r\n imgHeight = bounds;\r\n void item;\r\n\r\n let domImg = document.createElement('img');\r\n domImg.crossOrigin = \"Anonymous\";\r\n domImg.dataset.name = \"cursor\";\r\n\r\n let $img = $(domImg);\r\n $img.css({\r\n position: 'absolute',\r\n width: '1px',\r\n height: '1px'\r\n });\r\n // $img.attr({\r\n // 'data-id': item.attr('data-id'),\r\n // 'data-name': item.attr('data-name').trim(),\r\n // 'data-name-metric': item.attr('data-name-metric').trim(),\r\n // });\r\n let imgOnLoad = () => {\r\n let bounds = 18, ratio;\r\n if (imgWidth > imgHeight) {\r\n ratio = imgHeight / imgWidth;\r\n imgWidth = bounds;\r\n imgHeight = bounds * ratio;\r\n } else {\r\n ratio = imgWidth / imgHeight;\r\n imgHeight = bounds;\r\n imgWidth = bounds * ratio;\r\n }\r\n eventManager.setCursor('edge-select', this, true);\r\n this.cursorImage = { image: domImg, width: imgWidth, height: imgHeight };\r\n this.registerEvents(); // only after image is load!\r\n };\r\n $img.on('load', imgOnLoad);\r\n $img.appendTo($('body'));\r\n\r\n config.highlight.type = 'backsplash';\r\n //todo\r\n $img.attr('src', imgSrc);\r\n\r\n // config.highlight.id = item.attr('data-id');\r\n };\r\n\r\n checkForRestoreCursor = () => {\r\n if (this.isWaitingToRestoreCursor) {\r\n this.isWaitingToRestoreCursor = false;\r\n eventManager.removeEvent(this, eventManager.events.MOUSE_UP); //remove mouse up, it will be added in setCursorImage\r\n\r\n //todo\r\n // this.setHighlighting();\r\n this.setCursorImage();\r\n }\r\n };\r\n\r\n renderCursor = function(ctx) {\r\n if(this.cursorImage.image && ($(window).width() > 768)) {\r\n let mPos = eventManager.LastKnownMousePos;\r\n if(mPos) {\r\n ctx.drawImage(this.cursorImage.image, mPos.x + 10, mPos.y + 10, 18, 18);\r\n }\r\n }\r\n };\r\n\r\n destroy = (protect, revertBackAfterMouseUp) => {\r\n if (revertBackAfterMouseUp) {\r\n //remove render only, but wait for mouse up to set cursor again\r\n //eventManager.removeEvent(this, eventManager.events.RENDER);\r\n\r\n //full remove event\r\n this.deregisterEvents();\r\n this.cursorImage = null;\r\n this.isWaitingToRestoreCursor = true;\r\n } else {\r\n this.deregisterEvents();\r\n this.cursorImage = null\r\n }\r\n this.hide();\r\n };\r\n\r\n hide = function(e) {\r\n if(e) {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n }\r\n //Menu.hideSideBarContent(); // hide sidebar menu\r\n };\r\n\r\n deregisterEvents = () => {\r\n eventManager.resetCursor(this);\r\n eventManager.removeEvent(this);\r\n config.highlight.lines = false;\r\n }\r\n}\r\n","import $ from 'jquery';\r\nimport _ from 'lodash';\r\n\r\nimport eventManager from \"../../store/sqftEventManager\";\r\nimport config from \"../../store/sqftConfig\";\r\nimport workspace from \"../workspace\";\r\nimport {inchesToMm} from \"../../../../helpers/sqftHelper\";\r\nimport SqftStore from \"../../store/sqftStore\";\r\nimport {iconplusPurple} from \"../../../../assetsSQFT\";\r\nimport sqftShapeManager from \"../../store/sqftShapeManager\";\r\n//import TranslatesProvider from \"./../../translatesProvider\";\r\n\r\nexport default new function() {\r\n //private variables\r\n var self = this,\r\n //cursorImage = null,\r\n elements = {\r\n navRadius: $('#nav_radius'),\r\n overlay: $('#radius-overlay'),\r\n arcButtons: $('.lightbox-option-rectangular[data-arc]'),\r\n angleButtons: $('.lightbox-option-rectangular[data-angle]'),\r\n designDefault: $('#design-default'),\r\n closeButton: $('#radius-overlay .lightbox-cancel-button'),\r\n cornerContainer: $('#corner'),\r\n radiusContainer: $('#radius'),\r\n measure: $('[data-measure]')\r\n },\r\n maxRadius = 18,\r\n corners = 60;\r\n\r\n this.clickedBackSplashButton = null;\r\n this.cursorImage = null;\r\n this.isWaitingToRestoreCursor = false;\r\n\r\n //public variables\r\n this.arcLength = 0;\r\n this.angle = 0;\r\n //private events\r\n\r\n this.angleButton_onClick = function() {\r\n self.deregisterEvents();\r\n SqftStore.radius.arcLength = 0;\r\n SqftStore.radius.angle = $(this).attr('data-angle');\r\n self.handleButtonClick($(this));\r\n $('.lightbox-option-selected').removeClass('lightbox-option-selected');\r\n $(this).addClass('lightbox-option-selected');\r\n };\r\n this.arcButton_onClick = function() {\r\n this.deregisterEvents();\r\n SqftStore.radius.angle = 0;\r\n SqftStore.radius.arcLength = $(this).attr('data-arc');\r\n self.handleButtonClick($(this));\r\n $('.lightbox-option-selected').removeClass('lightbox-option-selected');\r\n $(this).addClass('lightbox-option-selected');\r\n };\r\n\r\n this.handleButtonClick = function(item) {\r\n\r\n self.setHighlighting();\r\n self.clickedEdgeButton = item;\r\n self.setCursorImage();\r\n\r\n if (window.innerWidth < 991 && !config.tutorialIsRunning) {\r\n //Menu.hideSideBarContent(); // hide sidebar menu\r\n }\r\n\r\n // elements.overlay.hide();\r\n };\r\n\r\n this.deregisterEvents = function() {\r\n eventManager.resetCursor(self);\r\n eventManager.removeEvent(self);\r\n elements.navRadius.removeClass('steps-scope-config-button-selected');\r\n // QCDES-1139 fix\r\n //SqftStore.radius.arcLength = 0;\r\n //SqftStore.radius.angle = 0;\r\n config.highlight.points = false;\r\n };\r\n\r\n function createRadiusElements() {\r\n let html = '';\r\n for (let i = 1; i <= maxRadius; i++) {\r\n html +=\r\n ('\r\n // {disclaimerMessage} \r\n // \r\n // )\r\n // }\r\n\r\n return (\r\n \r\n {disclaimerMessage} \r\n \r\n )\r\n\r\n};\r\n\r\nPrintDocumentDisclaimer.propTypes = {\r\n fabricatorData: PropTypes.object.isRequired,\r\n styles: PropTypes.object.isRequired,\r\n withTotal: PropTypes.bool,\r\n};\r\n\r\nexport default PrintDocumentDisclaimer\r\n","import React, {useEffect, useState} from 'react';\r\nimport axios from \"axios\";\r\nimport {connect} from \"react-redux\";\r\nimport {IntlProvider} from 'react-intl';\r\n// import en from \"react-intl/locale-data/en\";\r\nimport Papa from \"papaparse\";\r\nimport Config, {AVAILABLE_LANGUAGES, IS_LIXIL_SERVERS} from \"./config\";\r\nimport {baseNewImagesPath} from \"./bvcomponents/assets\";\r\nimport {\r\n hardCodeIsAmericanImport, hardCodeIsAmericanStandard,\r\n hardCodeIsCaesarStone,\r\n hardCodeIsEncore,\r\n hardCodeIsGraniteTransformationUK,\r\n hardCodeIsLowes, hardCodeIsMcDermott, hardCodeIsModerno\r\n} from \"./misc/fabricatorHardcode\";\r\nimport {usePrevious} from \"./misc/helperHooks\";\r\n// addLocaleData([...en]);\r\n\r\nexport let TRANSLATES = {};\r\n\r\nexport const isEnglish = (locale) => {\r\n return (locale !== \"fr-FR\") && (locale !== \"pl-PL\") && (locale !== \"es-ES\")\r\n}\r\n\r\nconst getCustomJson = async (fileName = \"\") => {\r\n try {\r\n const customJsonResponse = await axios.get(`${baseNewImagesPath}/translates/custom/${fileName}.json?v=1.0.0`);\r\n if (customJsonResponse && customJsonResponse.data) {\r\n return customJsonResponse.data\r\n }\r\n return {}\r\n } catch (e) {\r\n console.log(\"couldn't set translate\", e);\r\n return {}\r\n }\r\n}\r\n\r\nconst TranslatesProvider = (props) => {\r\n const {language, children, wasCreatedFromFabricator} = props;\r\n const [translations, setTranslations] = useState(null);\r\n const [renderLanguage, setRenderLanguage] = useState(language);\r\n\r\n const prevLanguage = usePrevious(language);\r\n const prevWasCreatedFromFabricator = usePrevious(wasCreatedFromFabricator);\r\n\r\n const parseTranslatesResponse = (response) => {\r\n // handle success\r\n let trans = {}\r\n Papa.parse(response.data, {\r\n complete: (results) => {\r\n // console.log(\"Finished:\", results.data);\r\n results.data[0].forEach((locale) => {\r\n if (locale !== \"key\") {\r\n trans[locale] = {}; // simple create an empty objects for each locale\r\n }\r\n });\r\n results.data.forEach((translatesArray, translatesArrayIndex) => { // vertical forEach\r\n if (translatesArrayIndex) { // not 0 (the first key line)\r\n const key = translatesArray[0]; // key, for ex. login.email\r\n translatesArray.forEach((translateValue, translateValueIndex) => { // horizontal forEach\r\n if (translateValueIndex) { // skip first key\r\n const locale = results.data[0][translateValueIndex]; // get first line and locale index\r\n trans[locale][key] = translateValue || translatesArray[1] // translate from column or english column\r\n }\r\n });\r\n }\r\n });\r\n }\r\n });\r\n return trans\r\n }\r\n\r\n const getCustomTranslates = (transDoc, localeString) => {\r\n let trans = {};\r\n Object.keys(transDoc)\r\n .filter(key => key.includes(localeString))\r\n .forEach(key => {\r\n Object.keys(transDoc[key]).forEach((sharedName) => {\r\n if (sharedName) {\r\n trans[`transDoc.${key}.${sharedName.trim()}`] = transDoc[key][sharedName]\r\n }\r\n })\r\n });\r\n return trans\r\n };\r\n\r\n const loadTranslates = async () => {\r\n const responseMain = await axios.get(baseNewImagesPath+'/translates/translates.csv?v=2.0.1');\r\n let trans = parseTranslatesResponse(responseMain);\r\n let customTranslates = {};\r\n if (language === \"en-AU\") {\r\n trans[\"en-AU\"] = {...trans[\"en-US\"]}\r\n customTranslates = await getCustomJson( \"en-AU\");\r\n }\r\n if (hardCodeIsLowes()) {\r\n customTranslates = await getCustomJson( \"Lowes\");\r\n const responseLowes = await axios.get(baseNewImagesPath+'/translates/translates_lowes.csv?v=1.13.1')\r\n const doc = parseTranslatesResponse(responseLowes);\r\n trans[\"fr-FR\"] = {...trans[\"fr-FR\"], ...getCustomTranslates(doc, \"_FR\")};\r\n trans[\"pl-PL\"] = {...trans[\"pl-PL\"], ...getCustomTranslates(doc, \"_PL\")};\r\n } else if (hardCodeIsCaesarStone()) {\r\n console.log(\"fabricatorData.wasCreatedFromFabricator\", wasCreatedFromFabricator);\r\n const jsonFile = wasCreatedFromFabricator === \"QC Master Account CAN\" ? \"Caesarstone(CAN)\" : \"Caesarstone\";\r\n customTranslates = await getCustomJson( jsonFile);\r\n const responseCaes = await axios.get(baseNewImagesPath + 'translates/translates_caes_v1.csv')\r\n const doc = parseTranslatesResponse(responseCaes);\r\n trans[\"fr-FR\"] = {...trans[\"fr-FR\"], ...getCustomTranslates(doc, \"_FR\")};\r\n } else if (hardCodeIsAmericanImport() || hardCodeIsAmericanStandard() || IS_LIXIL_SERVERS) {\r\n customTranslates = await getCustomJson( \"Lixil\");\r\n } else if (hardCodeIsGraniteTransformationUK()) {\r\n customTranslates = await getCustomJson( \"GT_UK\");\r\n } else if (hardCodeIsModerno()) {\r\n customTranslates = await getCustomJson( \"Moderno\");\r\n } else if (hardCodeIsMcDermott()) {\r\n customTranslates = await getCustomJson( \"McDermott\");\r\n } else if (hardCodeIsEncore()) {\r\n customTranslates = await getCustomJson( \"Encore\");\r\n }\r\n const responseSqft = await axios.get(baseNewImagesPath+'/translates/translates_sqft_v1.csv?ver=1.1.0');\r\n const transSqft = parseTranslatesResponse(responseSqft);\r\n for (let columnName in trans) {\r\n trans[columnName] = {...trans[columnName], ...transSqft[columnName]}\r\n }\r\n // delete trans[\"Location\"];\r\n // delete trans[\"Description & Context\"];\r\n TRANSLATES = {...trans[language], ...customTranslates[language]};\r\n setTranslations(TRANSLATES);\r\n if (Config.isDevMode()) {\r\n console.log(\"all translates:\", trans);\r\n console.log(\"current translates:\", trans[language]);\r\n }\r\n setRenderLanguage(language); // change frontend after load\r\n }\r\n\r\n useEffect(() => {\r\n if ((language && (prevLanguage !== language)) || (wasCreatedFromFabricator && (prevWasCreatedFromFabricator !== wasCreatedFromFabricator))) {\r\n if(document.kvConfig.kioskMode) {\r\n KioskApp.PostMessage({type: 'getTranslates'}).then(res => loadTranslates({data: res})).catch(console.error);\r\n } else {\r\n loadTranslates().catch(console.error);\r\n }\r\n }\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [language, wasCreatedFromFabricator])\r\n\r\n return translations ? (\r\n console.info(error)}>\r\n {children}\r\n \r\n ) : null\r\n\r\n}\r\n\r\nconst mapStateToProps = (store) => {\r\n return {\r\n fabricatorData: store.fabricatorState,\r\n wasCreatedFromFabricator: store.fabricatorState.wasCreatedFromFabricator,\r\n language: store.serverState.language,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {};\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(TranslatesProvider)\r\n","import {IntermediatePart} from \"../parts/intermediatePart\";\r\n\r\nexport default class Shadow extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'part_shadow';\r\n this.visible = false;\r\n this.partName = 'Part Shadow';\r\n }\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new Shadow());\r\n }\r\n}","import {Part} from \"./part\";\r\nimport DesignNavigationItem from \"../../../visComponents/designNavigationItem\";\r\nimport {PartMenuType} from \"../../../visComponents/constants\";\r\nimport {wallsThumbnail} from \"../assets\";\r\n\r\nimport {Shower} from \"./shower\";\r\nimport {ShowerTubCombo} from \"./showerTubCombo\";\r\nimport Shadow from \"../subparts/shadow\";\r\nimport PonyWall from \"../subparts/wall/ponyWall\";\r\n\r\nimport WallA from \"../subparts/wall/wallA\";\r\nimport WallB from \"../subparts/wall/wallB\";\r\nimport WallC from \"../subparts/wall/wallC\";\r\nimport WallExR from \"../subparts/wall/wallExR\";\r\nimport WallExL from \"../subparts/wall/wallExL\";\r\nimport ExternallWall from \"../subparts/wall/externallWall\";\r\nimport VanityAccent from \"../subparts/wall/vanityAccent\";\r\nimport store from \"../../../../store\";\r\n\r\nexport class Wall extends Part {\r\n static id = 'Walls';\r\n\r\n constructor() {\r\n super(true, false, PartMenuType.Complex);\r\n\r\n this.menuType = PartMenuType.Complex;\r\n this.partName = 'Walls';\r\n this.translateId = \"visualizer.bathroom.walls\";\r\n this.partThumbnail = wallsThumbnail;\r\n\r\n // related items\r\n this.vanityAccent = null;\r\n this.wallExR = null;\r\n this.wallExL = null;\r\n this.wallA = null;\r\n this.wallB = null;\r\n this.wallC = null;\r\n this.ponyWall = null;\r\n this.allWallsApplied = true;\r\n }\r\n\r\n load(dbFeature) {\r\n let relatedItemName = \"\",\r\n RelatedItemClass = null;\r\n switch (dbFeature.groupName) {\r\n case \"VanityAccent\":\r\n relatedItemName = \"vanityAccent\";\r\n RelatedItemClass = VanityAccent;\r\n break;\r\n case \"WallExtrusion\":\r\n case \"EX R\":\r\n relatedItemName = \"wallExR\";\r\n RelatedItemClass = WallExR;\r\n break;\r\n case \"ShowerDivider\":\r\n case \"EX L\":\r\n relatedItemName = \"wallExL\";\r\n RelatedItemClass = WallExL;\r\n break;\r\n case \"Wall A\":\r\n relatedItemName = \"wallA\";\r\n RelatedItemClass = WallA;\r\n break;\r\n case \"Wall B\":\r\n relatedItemName = \"wallB\";\r\n RelatedItemClass = WallB;\r\n break;\r\n case \"Wall C\":\r\n relatedItemName = \"wallC\";\r\n RelatedItemClass = WallC;\r\n break;\r\n case \"Pony Wall\":\r\n relatedItemName = \"ponyWall\";\r\n RelatedItemClass = PonyWall;\r\n break;\r\n case \"Shower Shadow\":\r\n if (\r\n dbFeature.displayName.includes(\"Shower Shadow - Divider Wall\")\r\n || dbFeature.displayName.includes(\"Shower Shadow - EX L\")\r\n || dbFeature.displayName.includes(\"Shower Shadow - EX R\")\r\n || dbFeature.displayName.includes(\"Shower Shadow - Popout\")\r\n || dbFeature.displayName.includes(\"Shower Shadow - Pony Wall\")\r\n ) {\r\n relatedItemName = \"shadows\";\r\n RelatedItemClass = Shadow;\r\n }\r\n break;\r\n }\r\n if (relatedItemName) {\r\n if (!this[relatedItemName]) {\r\n this[relatedItemName] = new RelatedItemClass(true);\r\n if (relatedItemName !== \"shadows\") {\r\n this.relatedItems.push(this[relatedItemName]);\r\n }\r\n }\r\n if (!this.categoryEnabled) {\r\n this.categoryEnabled = true\r\n }\r\n if (relatedItemName === \"ponyWall\") {\r\n this[relatedItemName].type = Shower.Type.Custom;\r\n }\r\n this[relatedItemName].getParent = () => this;\r\n this[relatedItemName].load(dbFeature);\r\n return true\r\n }\r\n return false\r\n }\r\n\r\n setLayers(layout, placeholdersNeeded) {\r\n let res = [];\r\n this.relatedItems.forEach(relatedItem => {\r\n relatedItem.setLayers(layout);\r\n (placeholdersNeeded && !relatedItem.placeholderChanged && relatedItem.placeholderFeature)\r\n ? relatedItem.placeholderFeature.layer.addTo(res)\r\n : relatedItem.activeFeature ? relatedItem.activeFeature.layer.addTo(res) : null;\r\n if (relatedItem.shadowFeature) {\r\n relatedItem.shadowFeature.layer.addTo(res)\r\n }\r\n });\r\n return res.length ? res : null;\r\n }\r\n\r\n navigationItem() {\r\n return new DesignNavigationItem('Walls', this);\r\n }\r\n\r\n isSubTypeWithItems() {\r\n return false;\r\n }\r\n\r\n subParts() {\r\n\r\n const activeShowerGroup = this.getActiveShowerGroup();\r\n const ponyWallIsActive = activeShowerGroup.showerDimensions() === \"Pony\";\r\n\r\n const shower = this.layout.parts[Shower.id];\r\n // const vanityAccent = this.layout.parts[Vanity.id].vanityAccent;\r\n return this.relatedItems.filter(item => {\r\n if (item.isPonyWallPart) {\r\n item.visible = ponyWallIsActive\r\n }\r\n return item.visible\r\n }).filter(item => item && item.visible).filter((relatedItem) => {\r\n return !(shower.isComplete() &&\r\n (relatedItem instanceof WallExL\r\n || (relatedItem instanceof WallExR && shower.showerBody && !shower.showerBody.activeFeature.partName.includes(\"Complete\"))))\r\n }).map(_ => new DesignNavigationItem(_.partName, _));\r\n }\r\n\r\n setDefault(layout) {\r\n this.relatedItems.forEach(_ => _.setDefault(layout));\r\n }\r\n\r\n handleSubPartClick() {\r\n\r\n }\r\n\r\n recoverPrevioslySelected(activeRelatedPart) {\r\n const {activeQuoteIndex} = store.getState().quotesState;\r\n this.relatedItems.forEach(relatedItem => {\r\n if (relatedItem.partId !== activeRelatedPart.partId && relatedItem.activeFeatureBeforeAllWalls) {\r\n if (relatedItem.activeFeatureBeforeAllWalls === \"placeholder\") {\r\n relatedItem.placeholderChanged = false;\r\n relatedItem.firstClick[activeQuoteIndex] = false;\r\n if (relatedItem instanceof ExternallWall) { // there shouldn't be cases for this, but nevertheless, just in case\r\n relatedItem.selectedByUser = false\r\n }\r\n } else {\r\n if (!(relatedItem instanceof ExternallWall && relatedItem.selectedByUser)) {\r\n relatedItem.activeFeatureBeforeAllWalls.clickFromAllWalls();\r\n }\r\n }\r\n }\r\n });\r\n }\r\n\r\n showerTubComboIsActive() {\r\n const comboPart = this.layout.parts[ShowerTubCombo.id];\r\n return comboPart && comboPart.showerTubComboIsActive\r\n }\r\n\r\n getActiveShowerGroup() {\r\n return this.showerTubComboIsActive() ? this.layout.parts[ShowerTubCombo.id] : this.layout.parts[Shower.id];\r\n }\r\n\r\n}\r\n","import uniqBy from \"lodash/uniqBy\";\r\n\r\nimport {IntermediatePart} from \"../parts/intermediatePart\";\r\n\r\nexport default class NonVisualizerSubPart extends IntermediatePart {\r\n constructor(isChild, partId, partName) {\r\n super(isChild);\r\n this.partId = partId;\r\n this.visible = true;\r\n this.partName = partName;\r\n // this.allFeaturesReceived = true;\r\n }\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new NonVisualizerSubPart(false, this.partId, dbFeature.groupName));\r\n }\r\n navigationSubItems(filters, searchText) {\r\n const navSubItems = super.navigationSubItems(filters, searchText)\r\n return uniqBy(navSubItems, (navItem) => navItem.part.dbFeature.sharedFeatureName);\r\n }\r\n}\r\n","import {Part} from \"./part\";\r\nimport {PartMenuType} from \"../../../visComponents/constants\";\r\nimport { showerAccessoriesThumbnail } from '../assets';\r\nimport LargeCornerSeat from \"../subparts/showerAccessories/largeCornerSeat\";\r\nimport SoapDish from \"../subparts/showerAccessories/soapDish\";\r\nimport DesignNavigationItem from \"../../../visComponents/designNavigationItem\";\r\nimport SmallCornerShelf from \"../subparts/showerAccessories/smallCornerShelf\";\r\nimport CornerCaddie from \"../subparts/showerAccessories/cornerCaddie\";\r\nimport LargeCornerCaddie from \"../subparts/showerAccessories/largeCornerCaddie\";\r\nimport GrabBar from \"../subparts/showerAccessories/grabBar\";\r\n\r\nexport class ShowerAccessories extends Part {\r\n static id = 'Shower Accessories';\r\n\r\n constructor() {\r\n super(true, false, PartMenuType.Complex);\r\n\r\n this.menuType = PartMenuType.Complex;\r\n this.partThumbnail = showerAccessoriesThumbnail;\r\n this.partName = 'Shower Accessories';\r\n this.translateId = \"visualizer.bathroom.accessories\";\r\n this.relatedItems = [];\r\n\r\n // related items\r\n this.soapDish = null;\r\n this.largeCornerSeat = null;\r\n this.largeCornerCaddie = null;\r\n this.cornerCaddie = null;\r\n this.smallCornerShelf = null;\r\n this.grabBar = null;\r\n\r\n //current active caddie type\r\n this.caddie_type = \"large_corner_caddie\";\r\n\r\n }\r\n\r\n load(dbFeature) {\r\n let relatedItemName = \"\",\r\n RelatedItemClass = null;\r\n switch (dbFeature.groupName) {\r\n case \"Soap Dish\":\r\n relatedItemName = \"soapDish\";\r\n RelatedItemClass = SoapDish;\r\n break;\r\n case \"Large Corner Seat\":\r\n relatedItemName = \"largeCornerSeat\";\r\n RelatedItemClass = LargeCornerSeat;\r\n break;\r\n case \"Large Corner Caddie\":\r\n relatedItemName = \"largeCornerCaddie\";\r\n RelatedItemClass = LargeCornerCaddie;\r\n break;\r\n case \"Corner Caddie\":\r\n relatedItemName = \"cornerCaddie\";\r\n RelatedItemClass = CornerCaddie;\r\n break;\r\n case \"Small Corner Shelf\":\r\n relatedItemName = \"smallCornerShelf\";\r\n RelatedItemClass = SmallCornerShelf;\r\n break;\r\n case \"Grab Bar\":\r\n relatedItemName = \"grabBar\";\r\n RelatedItemClass = GrabBar;\r\n break;\r\n\r\n }\r\n if (relatedItemName) {\r\n if (!this[relatedItemName]) {\r\n this[relatedItemName] = new RelatedItemClass(true);\r\n if (relatedItemName !== \"shadows\") {\r\n this.relatedItems.push(this[relatedItemName]);\r\n }\r\n }\r\n if (!this.categoryEnabled) {\r\n this.categoryEnabled = true\r\n }\r\n this[relatedItemName].getParent = () => this;\r\n this[relatedItemName].load(dbFeature);\r\n return true\r\n }\r\n return false\r\n }\r\n\r\n setLayers(layout, placeholdersNeeded) {\r\n const layers = [];\r\n this.getRelatedItems().forEach(relatedItem => {\r\n relatedItem.setLayers(layout);\r\n (placeholdersNeeded && !relatedItem.placeholderChanged && relatedItem.placeholderFeature)\r\n ? relatedItem.placeholderFeature.layer.addTo(layers)\r\n : relatedItem.activeFeature && relatedItem.activeFeature.layer.addTo(layers)\r\n });\r\n\r\n return layers;\r\n }\r\n\r\n subParts() {\r\n return this.getRelatedItems().map(_ => new DesignNavigationItem(_.partName, _));\r\n }\r\n\r\n navigationItem() {\r\n return new DesignNavigationItem(this.partName, this)\r\n }\r\n\r\n}\r\n\r\n","import React, {Component} from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport {connect} from \"react-redux\";\r\nimport {FormattedMessage} from \"react-intl\";\r\n\r\n// import {Layout} from \"../../core/layout\";\r\n// import {PartMenuType} from \"../../constants\";\r\nimport SelectionMobileViewSwitchers from '../mobile/selectionMobileViewSwitchers';\r\nimport BodyPanelRadio from \"./bodyPanelRadio\";\r\nimport BodyPanelCheckbox from \"./bodyPanelCheckbox\";\r\nimport BodyPanelWizardSteps from \"./bodyPanelWizardSteps\";\r\n// import Analytics from \"../../../../analytics\";\r\nimport FilterSwitchers from \"../newFilters/filterSwitchers\";\r\nimport BodyPanelNavigationFiltersSteps from \"./bodyPanelNavigationFiltersSteps\";\r\nimport BacksplashSelect from \"../../../selectionWindow/backsplashSelect\";\r\nimport {CABINET_GROUP, COUNTERTOP_GROUP} from \"../../../kvComponent/core/constants\";\r\nimport CountertopSwitchers from \"../../../kvComponent/navigation/countertopSwitchers\";\r\nimport CabinetSwitchers from \"../../../kvComponent/navigation/cabinetSwitchers\";\r\nimport {CABINET_GROUP_BATHROOM, COUNTERTOP_GROUP_BATHROOM} from \"../../../bvSceneComponent/core/constants\";\r\nimport LookAllWallsRadioButton from \"../../../look/lookNavigation/lookMain/lookAllWallsRadioButton\";\r\nimport {getCurrentLayout} from \"../../../appLayout\";\r\nimport {featureInterface} from \"../../../../interfaces/featureInterface\";\r\n\r\nclass BodyPanel extends Component {\r\n\r\n static propTypes = {\r\n // layout: PropTypes.instanceOf(Layout),\r\n activePart: PropTypes.object.isRequired,\r\n activeSubPart: PropTypes.object,\r\n activeFeature: PropTypes.shape(featureInterface),\r\n toggleApplyWallsCheckbox: PropTypes.func,\r\n isWallItem: PropTypes.func,\r\n handleSubTypeClick: PropTypes.func,\r\n useWizard: PropTypes.bool,\r\n showFeatureWizard: PropTypes.bool,\r\n exitFeatureWizard: PropTypes.func,\r\n enableFeatureWizard: PropTypes.func,\r\n wizardGroups: PropTypes.array,\r\n filters: PropTypes.array,\r\n getFilterDisplayName: PropTypes.func.isRequired,\r\n toggleWizardFilterSelection: PropTypes.func,\r\n refreshCB: PropTypes.func,\r\n showFilterSelection: PropTypes.bool,\r\n showWizardGroupsSelection: PropTypes.bool,\r\n setStateActiveFeature: PropTypes.func,\r\n };\r\n\r\n backsplashSelectClick = (feature) => {\r\n this.props.refreshCB(); // update canvas\r\n this.props.refreshItems(); // update nav items\r\n if (this.props.setStateActiveFeature) {\r\n this.props.setStateActiveFeature(feature);\r\n }\r\n };\r\n\r\n renderAllWallsCheckbox = (showFilterSelection) => {\r\n const layout = getCurrentLayout();\r\n if (layout.isNewLayout) {\r\n return \r\n } else if (!showFilterSelection && this.props.activeSubPart && this.props.isWallItem(this.props.activeSubPart)\r\n && this.props.activeSubPart.partName !== \"Accent Wall\") {\r\n return \r\n }\r\n return null\r\n }\r\n\r\n render() {\r\n\r\n const showFilterSelection = this.props.showFilterSelection || this.props.showWizardGroupsSelection;\r\n const activeNavPart = this.props.activeSubPart || this.props.activePart;\r\n\r\n const fabricatorSettings = this.props.fabricatorData.settings;\r\n const useWizard = fabricatorSettings &&\r\n (fabricatorSettings.wizardConsumers || (fabricatorSettings.wizardClients && document.kvConfig.isBackend));\r\n\r\n let showNavigationFilters = useWizard && this.props.activeNavigationFilter\r\n && (this.props.activeNavigationFilter !== \"inlay_type\") && activeNavPart\r\n && activeNavPart.canUseNavigationFilter && activeNavPart.canUseNavigationFilter();\r\n\r\n if (useWizard && activeNavPart && activeNavPart.canUseNavigationFilterSteps\r\n && activeNavPart.canUseNavigationFilterSteps()) {\r\n showNavigationFilters = true;\r\n }\r\n\r\n const isCountertop = this.props.activeSubPart && (\r\n COUNTERTOP_GROUP.includes(this.props.activeSubPart.partId)\r\n || ((document.kvConfig.visualizerType === \"bvScene\" || document.kvConfig.visualizerType === \"Bathroom\")\r\n && COUNTERTOP_GROUP_BATHROOM.includes(this.props.activeSubPart.partId))\r\n );\r\n\r\n const isCabinet = this.props.activeSubPart && (CABINET_GROUP.includes(this.props.activeSubPart.partId)\r\n || (document.kvConfig.visualizerType === \"bvScene\" && CABINET_GROUP_BATHROOM.includes(this.props.activeSubPart.partId)));\r\n\r\n const layout = getCurrentLayout();\r\n\r\n return (\r\n \r\n \r\n ) : (\r\n \r\n {innerElements}\r\n \r\n );\r\n }\r\n\r\n return elements\r\n };\r\n\r\n renderLoadingList() {\r\n return \r\n }\r\n\r\n render() {\r\n return this.props.isMobile ? this.renderMobileFiltersList() : (\r\n {lookFeature.dbFeature.sku}\r\n \r\n )\r\n }\r\n\r\n return (\r\n \r\n {lookFeature.dbFeature.sku}\r\n \r\n )\r\n};\r\n\r\nLookFeatureSku.propTypes = {\r\n lookFeature: PropTypes.shape(featureInterface),\r\n isList: PropTypes.bool,\r\n}\r\n\r\nconst mapStateToProps = (store) => {\r\n const {settings} = store.fabricatorState;\r\n return {\r\n fabricatorSettings: settings,\r\n };\r\n};\r\n\r\nexport default connect(mapStateToProps)(LookFeatureSku)\r\n","import {connect} from \"react-redux\";\r\n\r\nimport {postMessageToParent} from \"../lookMessaging\";\r\nimport {GROHE_POST_MESSAGES_ACTIONS} from \"../iframeIntegration\";\r\nimport {getLookId, getPostCartItemsList} from \"../lookNavigation/lookFunctions2\";\r\nimport {setIframeIntegrationRequest} from \"../../../actions/iframeIntegrationFunctions\";\r\nimport {saveQuote} from \"../../../api/server-api\";\r\nimport {setAmazonImageUrl} from \"../../../actions/serverFunctions\";\r\nimport {getTempIdForPostMessage, postSaveVisualizerImage} from \"../../../api/look-api\";\r\nimport {getQuotePriceWithTaxes, getTotalPrice, isIframe} from \"../../../misc/helpers\";\r\n// import {getCurrentLayout} from \"../../appLayout\";\r\n// import Config from \"../../../config\";\r\nimport {LOOK_OVERLAYS} from \"../core/constants\";\r\nimport {IS_PRODUCT_JOURNEY} from \"../../../config\";\r\nimport {setLookOverlayOpened} from \"../../../actions/lookFunctions\";\r\nimport {setExisingTempId} from \"../../../actions/groheFunctions\";\r\nimport {renderErrorPopup} from \"../../../api/api-popups\";\r\nimport {showQuoteSavedNotification} from \"../../ui/successNotification\";\r\nimport Analytics from \"../../../analytics\";\r\nimport {getAnalyticsEcommerceItem} from \"../../../analyticsEcommerceParams\";\r\nimport {updateCurrentQuote} from \"../../../misc/quotesFunctions\";\r\n\r\nconst WithAddToCartPostMessage = (props) => {\r\n\r\n const {cartItems, jobId, children, activePreset, bvPresets, setIframeIntegrationRequest, isPhoneNumberValidated,\r\n activeQuoteIndex, setAmazonImageUrl, setLookOverlayOpened, exisingTempId, setExisingTempId, userIsLoggedIn,\r\n fabricatorData} = props;\r\n const fabricatorSettings = fabricatorData.settings;\r\n\r\n const isLixil = isIframe() && fabricatorData.isLixil;\r\n\r\n const withoutCheckout = !isLixil && !fabricatorSettings.checkout;\r\n if (withoutCheckout && IS_PRODUCT_JOURNEY) { // we keep this button on the look list page\r\n return null\r\n }\r\n\r\n const addToCartPostMessage = async (sendFeatures= null) => {\r\n\r\n // const layout = getCurrentLayout();\r\n // await layout.updateLocalStorage();\r\n\r\n if (!isLixil || !fabricatorSettings.checkout) {\r\n if (!isPhoneNumberValidated) {\r\n setLookOverlayOpened(LOOK_OVERLAYS.leadCapture);\r\n return\r\n }\r\n if (withoutCheckout) {\r\n // we should just save the quote, everything is correct below\r\n }\r\n if (fabricatorSettings.checkout && IS_PRODUCT_JOURNEY) { // this should never execute, but let it be\r\n return false\r\n }\r\n setLookOverlayOpened(LOOK_OVERLAYS.loadingCart);\r\n return saveQuote({\r\n submit: true,\r\n showReceipt: false\r\n })\r\n .then((responseData) => {\r\n document.kvConfig.jobId = responseData.jobId;\r\n if (responseData.imageUrl) {\r\n setAmazonImageUrl(responseData.imageUrl)\r\n }\r\n setLookOverlayOpened(\"\");\r\n showQuoteSavedNotification(\r\n fabricatorSettings.checkout ? \"successNotification.titleQuoteCreated\" : \"successNotification.titleQuoteSaved\"\r\n );\r\n })\r\n .catch((error) => {\r\n renderErrorPopup(\"Server \"+new Error(error));\r\n setLookOverlayOpened(\"\");\r\n })\r\n }\r\n\r\n const totalPrice = getTotalPrice(null, false, cartItems);\r\n\r\n Analytics.sendEcommerceEvent(\"add_to_cart\", {\r\n currency: fabricatorSettings.currency,\r\n value: getQuotePriceWithTaxes(totalPrice),\r\n items: cartItems.map((cartItem, cartItemIndex) => {\r\n return getAnalyticsEcommerceItem(cartItem.cartFeature, cartItem.quantity, cartItemIndex)\r\n })\r\n });\r\n\r\n setLookOverlayOpened(LOOK_OVERLAYS.loadingCart);\r\n\r\n let lookImage = \"\";\r\n\r\n if (!userIsLoggedIn && !IS_PRODUCT_JOURNEY) {\r\n const updatedQuotes = await updateCurrentQuote();\r\n lookImage = await postSaveVisualizerImage({\r\n base64Image: updatedQuotes[activeQuoteIndex].bvImage\r\n });\r\n }\r\n\r\n // const useRedirect = !IS_PRODUCT_JOURNEY\r\n // || (Array.isArray(sendFeatures) && sendFeatures.length > 1 && !sendFeatures.some(cartItem => featureIsBundle(cartItem.cartFeature)))\r\n\r\n let lookId = getLookId(activePreset, bvPresets);\r\n\r\n let postData = {\r\n \"EventType\": GROHE_POST_MESSAGES_ACTIONS.addToCart,\r\n \"LookImage\": lookImage ? lookImage : \"No image created\",\r\n \"LookId\": lookId + \"\",\r\n \"LookSkus\": Array.isArray(sendFeatures)\r\n ? getPostCartItemsList(sendFeatures, true)\r\n : getPostCartItemsList(cartItems, true),\r\n \"UseRedirect\": \"\" + !IS_PRODUCT_JOURNEY,\r\n }\r\n\r\n if(jobId) {\r\n postData[\"VisualizerId\"] = jobId + \"\"\r\n }\r\n\r\n if (!isIframe()) {\r\n console.log(\"Not an iframe, can't post cart data:\", postData);\r\n }\r\n\r\n setIframeIntegrationRequest(postData);\r\n if (userIsLoggedIn) {\r\n saveQuote({\r\n submit: true,\r\n })\r\n .then((responseData) => {\r\n document.kvConfig.jobId = responseData.jobId;\r\n if(responseData.jobId) {\r\n postData[\"VisualizerId\"] = responseData.jobId + \"\";\r\n }\r\n postData[\"LookImage\"] = responseData.imageUrl || lookImage || \"No image created\";\r\n if (responseData.imageUrl) {\r\n setAmazonImageUrl(responseData.imageUrl)\r\n }\r\n window.postMessageIsExecuting = true;\r\n postMessageToParent(postData);\r\n })\r\n } else {\r\n postData[\"tempID\"] = await getTempIdForPostMessage(\"\", exisingTempId);\r\n if (IS_PRODUCT_JOURNEY) {\r\n setExisingTempId(postData[\"tempID\"]);\r\n }\r\n postMessageToParent(postData);\r\n }\r\n }\r\n\r\n return children(addToCartPostMessage)\r\n};\r\n\r\nconst mapStateToProps = (store) => {\r\n const {cartItems} = store.cartState;\r\n const {activePreset, bvPresets} = store.bathroomVisualizerState;\r\n const {jobId} = store.serverState;\r\n const {isPhoneNumberValidated, userIsLoggedIn} = store.userState;\r\n const {activeQuoteIndex} = store.quotesState;\r\n const {exisingTempId} = store.groheState;\r\n const fabricatorData = store.fabricatorState;\r\n\r\n return {\r\n cartItems,\r\n activePreset,\r\n bvPresets,\r\n jobId,\r\n isPhoneNumberValidated,\r\n userIsLoggedIn,\r\n // quotes,\r\n activeQuoteIndex,\r\n exisingTempId,\r\n fabricatorData,\r\n }\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n setIframeIntegrationRequest,\r\n setAmazonImageUrl,\r\n setLookOverlayOpened,\r\n setExisingTempId,\r\n};\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(WithAddToCartPostMessage)\r\n","import React, {useMemo, useRef} from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport PropTypes from \"prop-types\";\r\nimport { withRouter } from \"react-router-dom\";\r\nimport {FormattedMessage} from \"react-intl\";\r\n\r\nimport AddIcon from '@mui/icons-material/Add';\r\nimport IconButton from \"@mui/material/IconButton\";\r\n\r\nimport FeatureName from \"../../../../visComponents/featureName\";\r\nimport {featureInterface} from \"../../../../../interfaces/featureInterface\";\r\nimport LookFeaturePrice from \"./lookFeaturePrice\";\r\nimport FeatureThumbnail from \"../../../../visComponents/featureThumbnail\";\r\n// import LookListFeatureActions from \"./lookListFeatureActions\";\r\nimport {\r\n setLookActiveCategory,\r\n setLookActiveFeature, setLookAllWallsTutorial,\r\n setLookCompatabilityAlert,\r\n setLookDemoPointsClicked,\r\n setLookOverlayOpened,\r\n // setLookAllWallsOpened\r\n} from \"../../../../../actions/lookFunctions\";\r\nimport Config from \"../../../../../config\";\r\nimport {getCommonCoords, getFeatureCoords, getLayerCenter, navFeatureCLick} from \"../../lookFunctions\";\r\nimport LookListFeatureCheckmark from \"./lookListFeatureCheckmark\";\r\nimport {addToCart, setCanvasScale, updateCanvasCount} from \"../../../../../actions/actionFunctions\";\r\nimport LookCanvasContext from \"../../../lookCanvasContext\";\r\nimport {getCurrentLayout} from \"../../../../appLayout\";\r\nimport {LOOK_WALLS_ONLY} from \"../../../core/constants\";\r\nimport {IS_PRODUCT_JOURNEY} from \"../../../../../config\";\r\nimport {getCartItemObject, getFeatureIsLocked} from \"../../../../../misc/helpers\";\r\nimport {\r\n enableRelatedFeature,\r\n getFeatureIsActive,\r\n getFeatureUrl,\r\n hideFeatureSection\r\n} from \"../../lookFunctions2\";\r\nimport Analytics, {LOOK_JOURNEY_ANALYTIC_EVENTS, PRODUCT_JOURNEY_ANALYTIC_EVENTS} from \"../../../../../analytics\";\r\nimport WithClickCount from \"../../../hocs/withClickCount\";\r\nimport LookListActiveFeatureMobileButton from \"./lookListActiveFeatureMobileButton\";\r\nimport LookAllWallsRadioButton from \"../lookAllWallsRadioButton\";\r\nimport {\r\n checkForCompatabilityAlert,\r\n clickOnSimilarFeatures,\r\n getApplyToLogic,\r\n getShowMatchRadio\r\n} from \"../../lookNavigationFunctions\";\r\nimport LookFeatureItemLocked from \"./lookFeatureItemLocked\";\r\nimport {getAnalyticsEcommerceItem} from \"../../../../../analyticsEcommerceParams\";\r\nimport {shouldZoomPartId} from \"../../../hocs/withZoomToFeature\";\r\nimport LookListFeatureName from \"./lookListFeatureName\";\r\nimport {featureCanChangeShowerSize, searchForSameNameWallsBeforeFeatureApply} from \"../../../bathroomFunctions\";\r\n\r\n\r\n\r\nconst LookListFeature = (props) => {\r\n\r\n const {style, lookFeature, lookExpanded, lookViewType, lookActiveFeature, setLookActiveFeature, history, position,\r\n featureGroup, updateCanvasCount, lookActiveCategory, isMobile, isPhoneNumberValidated, canvasCount,\r\n addToCart, qtActiveCategory, setCanvasScale, canvasScale, navItems, updateLookCartItem,\r\n setLookDemoPointsClicked, lookDemoPointsClicked, viewType, fromDesignRecommended, setLookAllWallsTutorial,\r\n setLookCompatabilityAlert, fabricatorData, lookCompatabilityAlert, lookLockedTutorial, lookAllWallsTutorial,\r\n // setLookAllWallsOpened, lookAllWallsOpened,\r\n isAllWallsTutorialItem,\r\n } = props;\r\n\r\n const featureElement = useRef();\r\n\r\n const noFeatureSection = useMemo(() => {\r\n return hideFeatureSection(true, lookFeature.partId, lookFeature, lookCompatabilityAlert)\r\n }, [lookFeature, lookCompatabilityAlert]);\r\n\r\n const fabricatorSettings = fabricatorData.settings;\r\n\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n const showPriceLocked = useMemo(() => getFeatureIsLocked(lookFeature), [lookFeature, isPhoneNumberValidated]);\r\n const showPrice = fabricatorSettings.showPricing && !fabricatorData.hideCheckoutBreakdownCost\r\n && !showPriceLocked && !fabricatorData.hidePricesFromUser && !noFeatureSection;\r\n const featureIsLocked = showPriceLocked;\r\n\r\n // const [canRender, setCanRender] = useState(false);\r\n const isEmpty = (!lookFeature && position) || (featureGroup && featureGroup.disabled);\r\n const currentType = viewType || lookViewType;\r\n\r\n // useEffect(() => {\r\n // if (lookExpanded) {\r\n // setTimeout(() => { // preventing thumbnail jumping\r\n // setCanRender(true)\r\n // }, 200)\r\n // } else {\r\n // setCanRender(false)\r\n // }\r\n // }, [lookExpanded])\r\n\r\n const showMatchRadio = useMemo(() => getShowMatchRadio(lookFeature), [lookFeature]);\r\n\r\n const applyFeature = async (zoomFeature, imageCanvas, forceClick = false) => {\r\n const layout = getCurrentLayout();\r\n const parent = zoomFeature.getParent();\r\n Analytics.sendEcommerceEvent(\"select_item\", {\r\n item_list_id: zoomFeature.partId,\r\n item_list_name: parent.dbName || parent.partName || \"\",\r\n items: [getAnalyticsEcommerceItem(zoomFeature, 1)],\r\n });\r\n\r\n if (!lookActiveFeature) {\r\n parent.featureBeforeChange = zoomFeature;\r\n }\r\n const positionInList = navItems ? navItems.findIndex(navItem => navItem.part.dbFeature.id === lookFeature.dbFeature.id) : null;\r\n if (!IS_PRODUCT_JOURNEY && (!isMobile || featureIsLocked)) {\r\n setLookActiveFeature(zoomFeature, positionInList);\r\n }\r\n if ((layout.isNewLayout || (layout.visualizerType === \"bvScene\")) && featureCanChangeShowerSize(zoomFeature)) {\r\n await searchForSameNameWallsBeforeFeatureApply(zoomFeature);\r\n }\r\n\r\n // setLookActiveCategory(zoomFeature.partId);\r\n if (showMatchRadio) { // before nav feature click\r\n const applyToLogic = getApplyToLogic(lookFeature);\r\n // const parent = zoomFeature.getParent();\r\n // setActiveFeaturesBeforeAllWalls([], parent); // we don't need it here, as we have remembering logic below\r\n if (applyToLogic && Array.isArray(applyToLogic.currentApplyToArray) && applyToLogic.currentApplyToArray.length) {\r\n await clickOnSimilarFeatures(zoomFeature, applyToLogic, true);\r\n // if (!lookAllWallsOpened) {\r\n // setLookAllWallsOpened(true);\r\n // }\r\n }\r\n }\r\n navFeatureCLick(zoomFeature, true, forceClick);\r\n enableRelatedFeature(zoomFeature, addToCart, qtActiveCategory);\r\n // const parent = zoomFeature.getParent();\r\n // if (parent.disabled) {\r\n // parent.disabled = false;\r\n // parent.disabledClick();\r\n // }\r\n if (updateLookCartItem) {\r\n updateLookCartItem(zoomFeature) // removed since we have select button on look journey\r\n }\r\n if (isMobile) {\r\n if (IS_PRODUCT_JOURNEY || featureIsLocked) {\r\n // const closeOnly = zoomFeature && !layout.partIdExistInQtCategory(zoomFeature.partId) && !showMatchRadio;\r\n // const closeOnly = zoomFeature && !layout.partIdExistInQtCategory(zoomFeature.partId);\r\n // if (closeOnly) {\r\n // history.push(getFeatureUrl(zoomFeature, true))\r\n // } else {\r\n // setLookActiveCategory(\"\");\r\n // history.push(getFeatureUrl(zoomFeature)) // always go to feature screen on mobile\r\n // }\r\n history.push(getFeatureUrl(zoomFeature, true));\r\n }\r\n } else {\r\n history.push(getFeatureUrl(zoomFeature, !!lookActiveCategory));\r\n }\r\n // here we can update the navigation list, but I removed it since it is sorting features and confusing customers\r\n // if (lookFeature.getColorName(filterGroups) !== lookActiveFeature.getColorName(filterGroups)) {\r\n // updateNavigationCount();\r\n // }\r\n updateCanvasCount();\r\n if (imageCanvas && imageCanvas.current && imageCanvas.current.pinchZoom && !LOOK_WALLS_ONLY.includes(zoomFeature.partId)\r\n && shouldZoomPartId(zoomFeature.partId, isMobile) && (canvasScale === 1)) {\r\n const commonCoords = getFeatureCoords(zoomFeature) || getCommonCoords(featureGroup || zoomFeature.getParent(), zoomFeature, imageCanvas.current.canvas);\r\n const center = commonCoords && Object.keys(commonCoords).length\r\n ? getLayerCenter(commonCoords, imageCanvas.current.canvas, isMobile)\r\n : null;\r\n if (center) {\r\n imageCanvas.current.pinchZoom.zoomToCenter(center, 0, false, layout.partIdExistInQtCategory(zoomFeature.partId));\r\n setCanvasScale(imageCanvas.current.pinchZoom.options.tapZoomFactor)\r\n }\r\n }\r\n if (!lookDemoPointsClicked) {\r\n setLookDemoPointsClicked(true);\r\n }\r\n if (!lookAllWallsTutorial.finished && showMatchRadio && !featureIsLocked && !lookFeature.notAvailableInVisualizer\r\n && featureElement && featureElement.current && !fabricatorData.isEncore && (currentType === 1)) {\r\n setLookAllWallsTutorial({\r\n visible: true,\r\n // withGrid: navItems.length === 1,\r\n // positionInList,\r\n lookFeature,\r\n top: featureElement.current.getBoundingClientRect().top,\r\n left: featureElement.current.getBoundingClientRect().left,\r\n height: style.height,\r\n // firstLockedIndex,\r\n // firstUnlockedIndex,\r\n });\r\n }\r\n }\r\n\r\n const listFeatureClick = (event, imageCanvas, maxClickCountReached) => {\r\n if (event.target.closest(\".look-icon--delete\") || event.target.closest(\".gm-ios-checkbox\") || lookLockedTutorial.visible) {\r\n return\r\n }\r\n if (Config.isDevMode() && lookFeature) {\r\n console.log(\"lookFeature\", lookFeature, lookFeature.metaData);\r\n }\r\n if (lookExpanded) {\r\n document.querySelector(\".lm\").style.transition = \"none\";\r\n setTimeout(() => {\r\n document.querySelector(\".lm\").style.transition = \"all 0.3s ease\";\r\n }, 300)\r\n }\r\n let zoomFeature = lookFeature;\r\n if (isEmpty) {\r\n if (!lookFeature && position) {\r\n zoomFeature = featureGroup.getMatchingPositionFeature(position);\r\n if (zoomFeature) {\r\n featureGroup.layerPositions[position] = zoomFeature;\r\n }\r\n }\r\n if (zoomFeature) {\r\n featureGroup.activeFeature = zoomFeature;\r\n addToCart([getCartItemObject(zoomFeature, 1, qtActiveCategory)]);\r\n }\r\n console.log(\"zoomFeature featureGroup\", zoomFeature, featureGroup);\r\n }\r\n\r\n if (!zoomFeature || maxClickCountReached()) { // fabricator settings click lead capture\r\n return false;\r\n }\r\n\r\n const featureLabel = Analytics.getSkuForAnalytics(zoomFeature);\r\n const analyticsLabel = IS_PRODUCT_JOURNEY\r\n ? PRODUCT_JOURNEY_ANALYTIC_EVENTS.productFeaturesList + featureLabel\r\n : fromDesignRecommended\r\n ? LOOK_JOURNEY_ANALYTIC_EVENTS.lookFeaturesListDesignRecommended + featureLabel\r\n : LOOK_JOURNEY_ANALYTIC_EVENTS.lookFeaturesList + featureLabel;\r\n Analytics.sendClickEvent(analyticsLabel);\r\n\r\n if (featureIsLocked) {\r\n if (!IS_PRODUCT_JOURNEY) {\r\n const positionInList = navItems ? navItems.findIndex(navItem => navItem.part.dbFeature.id === lookFeature.dbFeature.id) : null;\r\n setLookActiveFeature(zoomFeature, positionInList);\r\n history.push(getFeatureUrl(zoomFeature, true));\r\n }\r\n return false\r\n }\r\n\r\n const compatabilityLogic = checkForCompatabilityAlert(zoomFeature);\r\n if (compatabilityLogic.length) {\r\n Analytics.sendClickEvent(LOOK_JOURNEY_ANALYTIC_EVENTS.lookShowCompatabilityAlert);\r\n setLookCompatabilityAlert({\r\n visible: true,\r\n compatabilityLogic,\r\n clickedFeature: zoomFeature,\r\n applyFunction: applyFeature.bind(this, zoomFeature, imageCanvas, true) // always apply features from this popup\r\n });\r\n return false\r\n }\r\n\r\n // if (featureIsLocked && !fabricatorSettings.clickLeadCapture && !(isIframe() && fabricatorData.isLixil)) {\r\n // window.clearTimeout(window.leadCaptureTimeoutId);\r\n // window.leadCaptureTimeoutId = setTimeout(() => {\r\n // setLookOverlayOpened(LOOK_OVERLAYS.leadCapture);\r\n // }, 500)\r\n // }\r\n\r\n applyFeature(zoomFeature, imageCanvas);\r\n }\r\n\r\n const isActive = useMemo(() => {\r\n return getFeatureIsActive(lookFeature, lookActiveFeature, lookActiveCategory, featureGroup)\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [lookFeature, lookActiveFeature, lookActiveCategory, featureGroup, canvasCount]);\r\n\r\n // const showYellowNotice = !IS_PRODUCT_JOURNEY && (getStyleAlertNotMatchingFeatures(lookFeature).length && !lookActiveCategory)\r\n // || (lookFeature && lookRemovedCartItems.length && lookRemovedCartItems.some(cartItem => {\r\n // return (cartItem.partId === lookFeature.partId) && cartItem.cartFeature.metaData.layerPosition\r\n // && (cartItem.cartFeature.metaData.layerPosition === lookFeature.metaData.layerPosition)\r\n // }));\r\n\r\n const showAllWalls = isActive && showMatchRadio && !featureIsLocked;\r\n const viewTypeFour = +currentType === 4;\r\n const isLockedAndViewTypeFour = showPriceLocked && viewTypeFour;\r\n\r\n return (\r\n \r\n {(imageCanvas) => (\r\n \r\n {(maxClickCountReached) => (\r\n listFeatureClick(event, imageCanvas, maxClickCountReached)}>\r\n {isEmpty ? (\r\n */}\r\n {/*) : null}*/}\r\n \r\n )}\r\n \r\n )}\r\n \r\n )\r\n};\r\n\r\nLookListFeature.propTypes = {\r\n lookFeature: PropTypes.shape(featureInterface),\r\n fromDesignRecommended: PropTypes.bool,\r\n style: PropTypes.object,\r\n featureGroup: PropTypes.object,\r\n position: PropTypes.string,\r\n navItems: PropTypes.array,\r\n updateLookCartItem: PropTypes.func,\r\n viewType: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\r\n isAllWallsTutorialItem: PropTypes.bool,\r\n}\r\n\r\nconst mapStateToProps = (store) => {\r\n const {lookExpanded, lookViewType, lookActiveCategory, lookActiveFeature, lookDemoPointsClicked, lookCompatabilityAlert,\r\n // lookAllWallsOpened\r\n lookLockedTutorial, lookAllWallsTutorial} = store.lookState;\r\n const {isMobile} = store.serverState;\r\n const {canvasScale, canvasCount} = store.bathroomVisualizerState;\r\n const {qtActiveCategory} = store.qtState;\r\n // const {filterGroups} = store.filterState;\r\n // const {lookRemovedCartItems} = store.cartState;\r\n const fabricatorData = store.fabricatorState;\r\n const {isPhoneNumberValidated} = store.userState; // to update component when user is logged in\r\n\r\n return {\r\n lookActiveFeature,\r\n lookExpanded,\r\n lookViewType,\r\n lookActiveCategory,\r\n isMobile,\r\n qtActiveCategory,\r\n // lookRemovedCartItems,\r\n lookDemoPointsClicked,\r\n canvasScale,\r\n // filterGroups,\r\n // lookAllWallsOpened,\r\n fabricatorData,\r\n isPhoneNumberValidated,\r\n lookCompatabilityAlert,\r\n canvasCount,\r\n lookLockedTutorial,\r\n lookAllWallsTutorial,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n setLookActiveFeature,\r\n updateCanvasCount,\r\n setLookActiveCategory,\r\n addToCart,\r\n setCanvasScale,\r\n setLookDemoPointsClicked,\r\n setLookCompatabilityAlert,\r\n setLookOverlayOpened,\r\n setLookAllWallsTutorial,\r\n // updateNavigationCount,\r\n // setLookAllWallsOpened,\r\n};\r\n\r\nexport default withRouter(\r\n connect(mapStateToProps, mapDispatchToProps)(LookListFeature)\r\n)\r\n","import React from 'react';\r\nimport UserLoginButton from \"../ui/userLoginButton\";\r\nimport {loaderDisable, loaderEnable} from \"../ui/loaderView\";\r\nimport {saveQuote} from \"../../api/server-api\";\r\nimport {showCheckoutLayout} from \"../../actions/actionFunctions\";\r\nimport {getCurrentLayout} from \"../appLayout\";\r\nimport {showQuoteSavedNotification} from \"../ui/successNotification\";\r\nimport Analytics from '../../analytics';\r\n\r\nexport default class ShoppingCart extends React.Component {\r\n\r\n getRecentlyViewedItems = () => {\r\n const layout = getCurrentLayout();\r\n // console.log(\"layout.getActiveFeatures()\", layout.getActiveFeatures());\r\n const activeFeatures = layout.getActiveFeatures()\r\n .filter(feature => {\r\n if (!feature.cartFeature || !feature.cartFeature.dbFeature\r\n || (feature.cartFeature.partName && feature.cartFeature.partName.includes(\"laceholder\")) || feature.partId === \"shower_body\") {\r\n return false\r\n }\r\n if (feature.partId.includes(\"pony_wall\") && feature.cartFeature.getParent) {\r\n const showerParent = feature.cartFeature.getParent().getParent().layout.parts.Shower;\r\n if (showerParent.showerDimensions() !== \"Pony\") {\r\n return false\r\n }\r\n }\r\n const featureId = feature.cartFeature.dbFeature.id;\r\n return !feature.partId.includes(\"top_cabinet_module\") && this.props.cartItems.every((cartItem) => {\r\n return cartItem.cartFeature.dbFeature.id !== featureId\r\n })\r\n });\r\n const recentlyViewedItems = (Array.isArray(this.props.recentlyViewedItems) && this.props.recentlyViewedItems.length)\r\n ? this.props.recentlyViewedItems\r\n .filter(recentItem => {\r\n const recentItemId = recentItem.dbFeature.id;\r\n return activeFeatures.every(cartItem => cartItem.cartFeature.dbFeature.id !== recentItemId)\r\n && this.props.cartItems.every((cartItem) => cartItem.cartFeature.dbFeature.id !== recentItemId)\r\n })\r\n .map(recentItem => {\r\n return {\r\n selectionGroup: recentItem.getParent().getParent().partName,\r\n partId: recentItem.partId,\r\n quantity: 0,\r\n cartFeature: recentItem\r\n };\r\n })\r\n : [];\r\n return [...activeFeatures, ...recentlyViewedItems]\r\n };\r\n\r\n getFinalButton = () => {\r\n if (document.kvConfig.canSaveQuote !== false) { // if document.kvConfig.canSaveQuote is null it is ok, we are checking only for false\r\n let intlText = \"\";\r\n let onClick = () => {};\r\n const fabricatorSettings = this.props.fabricatorData.settings;\r\n if (fabricatorSettings.checkout) {\r\n if (fabricatorSettings.sureTax && !this.props.isPhoneNumberValidated) {\r\n return {\r\n intlText: \"quotingTool.featureInfo.priceLockedTitle\",\r\n onClick: () => this.handleCheckOut(\"updateTax\"),\r\n }\r\n }\r\n onClick = this.handleCheckOut;\r\n intlText = (fabricatorSettings.enableDocuSign || fabricatorSettings.hasPaymentGateway || document.kvConfig.showBackToDashboard)\r\n ? \"shoppingCart.checkoutButtonCheckoutNow\"\r\n : !fabricatorSettings.leadCaptureOnQuote // leadCaptureOnQuote is OFF\r\n ? \"shoppingCart.checkoutButtonBuyNow\"\r\n : !fabricatorSettings.twoFA // leadCaptureOnQuote is ON\r\n ? this.props.isPhoneNumberValidated || document.kvConfig.isBackend\r\n ? \"shoppingCart.checkoutButtonBuyNow\"\r\n : \"shoppingCart.checkoutButtonUnlockPrice\"\r\n : this.props.userIsLoggedIn || document.kvConfig.isBackend\r\n ? \"shoppingCart.checkoutButtonBuyNow\"\r\n : \"shoppingCart.checkoutButtonUnlockPrice\"\r\n } else if (fabricatorSettings.leadCaptureOnQuote) {\r\n intlText = \"shoppingCart.checkoutButtonEmailQuote\";\r\n onClick = this.handleSaveClick;\r\n } else {\r\n intlText = \"shoppingCart.checkoutButtonStartOver\";\r\n onClick = this.handleStartOverClick;\r\n }\r\n if (this.props.fabricatorData.isLakesideSurfaces) {\r\n intlText = \"buttons.submit\"\r\n }\r\n return {\r\n intlText,\r\n onClick,\r\n }\r\n }\r\n return null\r\n };\r\n\r\n handleCheckOut = async (assignButtonsToShow) => {\r\n\r\n if (document.kvConfig.isBackend && this.props.toggleShowAssignQuotePopup && !this.props.editToken) {\r\n this.props.toggleShowAssignQuotePopup(true, assignButtonsToShow); // assignButtonsToShow should be \"checkout\" and come only from the button group\r\n return;\r\n }\r\n\r\n const fabricatorSettings = this.props.fabricatorData.settings;\r\n Analytics.sendClickEvent(\"checkout-buy-now-button\");\r\n if (!UserLoginButton.handleLoginClick({...this.props, checkout: true}))\r\n return ;\r\n\r\n loaderEnable(\"loader.savingQuoteText\");\r\n\r\n saveQuote({\r\n submit: true,\r\n showContractSignOnError: true\r\n })\r\n .then((response) => {\r\n if (response) {\r\n /*let responseDataBase = response;\r\n if (response.data) {\r\n responseDataBase = response.data;\r\n }\r\n\r\n const responseData = typeof responseDataBase === 'object' ? responseDataBase : JSON.parse(responseDataBase);\r\n console.log('saveQuote response:', responseData);*/\r\n loaderDisable();\r\n }\r\n showQuoteSavedNotification();\r\n showCheckoutLayout(fabricatorSettings);\r\n }).catch((error) => {\r\n console.log('saveQuote error:', error);\r\n loaderDisable();\r\n })\r\n };\r\n\r\n}\r\n","import {getSelectedContracts} from \"./contractsFunctions\";\r\n\r\nexport const getFirstUnfilledCustomField = (\r\n contractsValues,\r\n contractsList,\r\n fabricatorData,\r\n receiptSignature = \"\",\r\n contractsContext\r\n) => {\r\n // need to find first un-filled custom field and change the document page to it\r\n if (fabricatorData && fabricatorData.receiptSettings && fabricatorData.receiptSettings.signIsRequired\r\n && contractsContext.showReceiptInContract && contractsContext.receiptPages && !receiptSignature) {\r\n return { page: contractsContext.receiptPages, fieldIndex: 0 }\r\n }\r\n let customFieldInfo = { page: -1, fieldIndex: -1 };\r\n const selectedContracts = getSelectedContracts(contractsList);\r\n for (const contract of selectedContracts) {\r\n let {fields, pagesFrom} = contract;\r\n if (!contractsValues[contract.id]) {\r\n contractsValues[contract.id] = {};\r\n }\r\n const fieldsNeeded = fields.filter(field => {\r\n return field.isEditable && field.isRequired && field.coords && field.coords.length && !field.isCheckBox // why checkboxes are not required? old support\r\n })\r\n for (let i = 0; i <= contract.pagesCount; i++) {\r\n if (customFieldInfo.page === -1) {\r\n fieldsNeeded.forEach(field => {\r\n if (customFieldInfo.page === -1) {\r\n const sortedFields = field.coords.sort((a, b) => {\r\n // return (a.fieldIndexOnPage > b.fieldIndexOnPage) ? 1 : -1 // no we need to sort by top because this is incorrect\r\n const top1 = a.pageRect.height - a.rectangle.ury;\r\n const top2 = b.pageRect.height - b.rectangle.ury;\r\n return top1 > top2 ? 1 : -1\r\n });\r\n sortedFields.forEach(coord => {\r\n if (customFieldInfo.page === -1 && (i === coord.page)\r\n && (!contractsValues[contract.id][coord.page]\r\n || !contractsValues[contract.id][coord.page][coord.fieldIndexOnPage]\r\n || !contractsValues[contract.id][coord.page][coord.fieldIndexOnPage].value)) {\r\n customFieldInfo = { page: pagesFrom + coord.page - 1, fieldIndex: coord.fieldIndexOnPage };\r\n }\r\n })\r\n }\r\n })\r\n }\r\n }\r\n }\r\n return customFieldInfo;\r\n}\r\n\r\nexport const getFieldValue = (pageIndex, fieldIndex, activeContract, contractsValues) => {\r\n if (contractsValues[activeContract.id]\r\n && contractsValues[activeContract.id][pageIndex]\r\n && contractsValues[activeContract.id][pageIndex][fieldIndex]) {\r\n return contractsValues[activeContract.id][pageIndex][fieldIndex].value\r\n }\r\n return \"\"\r\n};\r\n\r\nexport const getFieldCoords = (contractFields, selectedFieldIndex) => {\r\n let fieldsCoords = [];\r\n contractFields.forEach(field => {\r\n if (!field.isEditable) {\r\n return;\r\n }\r\n field.coords.forEach((coord) => {\r\n const { fieldIndexOnPage, isRequired } = coord;\r\n if (field.isCustom) {\r\n const isSelected = fieldIndexOnPage === selectedFieldIndex;\r\n if (!isSelected && isRequired) {\r\n fieldsCoords.push({ coords: fieldCoords, idx: fieldIndexOnPage });\r\n }\r\n }\r\n })\r\n })\r\n return fieldsCoords\r\n}\r\n\r\nexport const getAlreadyFilledSignatureField = (fieldName, contractsValues, contractsList) => {\r\n let signatureValue = \"\";\r\n const selectedContracts = getSelectedContracts(contractsList);\r\n const withoutRequiredSignatureName = getFieldNameWithoutRequired(fieldName);\r\n for (const contract of selectedContracts) {\r\n let {fields} = contract;\r\n fields.forEach(field => {\r\n if (signatureValue || !field.isEditable || !field.isSignature) {\r\n return;\r\n }\r\n field.coords.forEach((coord) => {\r\n if (signatureValue || !coord.fieldName\r\n || (getFieldNameWithoutRequired(coord.fieldName) !== withoutRequiredSignatureName)) {\r\n return\r\n }\r\n signatureValue = getFieldValue(coord.page, coord.fieldIndexOnPage, contract, contractsValues);\r\n })\r\n })\r\n }\r\n return signatureValue;\r\n}\r\n\r\nexport const getFieldNameWithoutRequired = (fieldName = \"\") => {\r\n if (!fieldName || typeof fieldName !== \"string\") {\r\n return \"\"\r\n }\r\n return fieldName.replace(\"@\", \"\")\r\n}\r\n","import React from \"react\";\r\nimport {injectIntl} from \"react-intl\";\r\nimport PropTypes from \"prop-types\";\r\nimport {Grid} from \"react-virtualized\";\r\n\r\nimport LookListFeature from \"../lookListFeature/lookListFeature\";\r\nimport LookWizardSectionListFeature from \"../lookWizard/lookWizardSectionListFeature\";\r\nimport {wizardGroupInterface} from \"../../../../../interfaces/wizardItemInterface\";\r\nimport LookVirtualizedListLoadingItem from \"./lookVirtualizedListLoadingItem\";\r\n// import LoadingSpinner from \"../../ui/loadingSpinner\";\r\n\r\nexport const getLookRowHeight = (lookViewType) => {\r\n return lookViewType === 1\r\n ? 104\r\n : lookViewType === 4\r\n ? 128\r\n : lookViewType === 2\r\n ? 171\r\n : 340\r\n}\r\n\r\nconst LookVirtualizedList = (props) => {\r\n\r\n const {renderList, contentHeight, lookViewType, isMobile, updateLookCartItem, isWizard, wizardGroup, onScrollHandler,\r\n imageCanvas, maxClickCountReached, loadingCount} = props;\r\n\r\n if (!contentHeight || isNaN(contentHeight)) {\r\n return null\r\n }\r\n\r\n const width = isWizard ? 312 : 320;\r\n const columnWidth = lookViewType === 2\r\n ? width / 2\r\n : lookViewType === 4 ? width / 3 : width;\r\n const columnCount = lookViewType === 2\r\n ? 2\r\n : lookViewType === 4 ? 3 : 1;\r\n const rowCount = Math.ceil((loadingCount || renderList.length) / columnCount);\r\n\r\n const listSettings = {\r\n width,\r\n columnCount,\r\n columnWidth,\r\n rowCount,\r\n height: isMobile ? contentHeight - 16 : contentHeight - 116, // 52 header + 16 padding from bottom\r\n rowHeight: getLookRowHeight(lookViewType),\r\n overscanRowCount: 2,\r\n showScrollingPlaceholder: false,\r\n useDynamicRowHeight: false,\r\n }\r\n\r\n const cellRenderer = ({columnIndex, key, rowIndex, style}) => {\r\n if (loadingCount) {\r\n return \r\n }\r\n const navItem = renderList[(listSettings.columnCount * rowIndex) + columnIndex];\r\n if (!navItem) {\r\n return null\r\n }\r\n if (isWizard) {\r\n return \r\n }\r\n return \r\n }\r\n\r\n const noRowsRenderer = () => listSettings.height\r\n ? \" virtualized-grid--with-scroll\"\r\n : \" virtualized-grid--without-scroll\")}\r\n width={listSettings.width}\r\n height={listSettings.height}\r\n overscanRowCount={listSettings.overscanRowCount}\r\n rowCount={listSettings.rowCount}\r\n columnCount={listSettings.columnCount}\r\n columnWidth={listSettings.columnWidth}\r\n rowHeight={listSettings.rowHeight}\r\n onScroll={onScrollHandler}\r\n cellRenderer={cellRenderer}\r\n noRowsRenderer={noRowsRenderer}\r\n />\r\n )\r\n};\r\n\r\nLookVirtualizedList.propTypes = {\r\n imageCanvas: PropTypes.object,\r\n maxClickCountReached: PropTypes.func,\r\n updateLookCartItem: PropTypes.func,\r\n renderList: PropTypes.array,\r\n contentHeight: PropTypes.number,\r\n lookViewType: PropTypes.number.isRequired,\r\n isMobile: PropTypes.bool,\r\n onScrollHandler: PropTypes.func,\r\n isWizard: PropTypes.bool,\r\n wizardGroup: PropTypes.shape(wizardGroupInterface),\r\n loadingCount: PropTypes.number,\r\n}\r\n\r\nexport default injectIntl(LookVirtualizedList)\r\n","import React from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport {FormattedMessage, injectIntl} from \"react-intl\";\r\nimport PropTypes from \"prop-types\";\r\n\r\nimport TextField from \"@mui/material/TextField\";\r\nimport IconButton from \"@mui/material/IconButton\";\r\nimport RemoveIcon from \"@mui/icons-material/Remove\";\r\nimport AddIcon from '@mui/icons-material/Add';\r\n\r\nimport {setGroheActiveFeatureQuantity} from \"../../../../../actions/groheFunctions\";\r\nimport {IS_PRODUCT_JOURNEY} from \"../../../../../config\";\r\nimport Analytics, {PRODUCT_JOURNEY_ANALYTIC_EVENTS} from \"../../../../../analytics\";\r\nimport {featureInterface} from \"../../../../../interfaces/featureInterface\";\r\nimport {getFeatureUnit} from \"../../../../../misc/helpers\";\r\nimport {pricingIsLocked} from \"../../../lookNavigation/lookNavigationFunctions\";\r\n\r\nconst GroheFeatureQuantity = (props) => {\r\n const {intl, isMobile, disabled, groheActiveFeatureQuantity, setGroheActiveFeatureQuantity, lookActiveFeature, feature,\r\n hideTitle, isWizard, fabricatorData} = props;\r\n const MAX = 99999;\r\n const MIN = isWizard ? 0 : 1;\r\n\r\n const allowDecimals = isWizard;\r\n\r\n const updateQuantity = (quan) => {\r\n setGroheActiveFeatureQuantity(quan);\r\n };\r\n\r\n const handleInputChange = (e, fromButton = \"\") => {\r\n let value = \"\" + e.target.value;\r\n\r\n if (value.includes(\".\")) {\r\n if (!allowDecimals) {\r\n return false\r\n }\r\n if (value.split(\".\")[1].length > 3) {\r\n value = +value.substring(0, value.length - 1); //round to 3 decimals\r\n }\r\n }\r\n\r\n const featureLabel = Analytics.getSkuForAnalytics(feature || lookActiveFeature);\r\n const analyticsAdjust = fromButton ? fromButton + \"-\" + value : \"input-\" + value;\r\n Analytics.sendClickEvent(`${PRODUCT_JOURNEY_ANALYTIC_EVENTS.productFeatureQuantityChange + featureLabel}-${analyticsAdjust}`);\r\n\r\n value = +value;\r\n\r\n if (value <= MIN) {\r\n value = MIN;\r\n } else if (value > MAX) {\r\n value = MAX;\r\n }\r\n\r\n updateQuantity(value);\r\n };\r\n\r\n const handleOnKeyDown = (event) => {\r\n if (event.key==='.' && !allowDecimals) {\r\n event.preventDefault();\r\n return false\r\n }\r\n };\r\n\r\n const {isLixil} = pricingIsLocked();\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n {fabricatorData.isAmericanStandard ? : null}\r\n \r\n {priceWorksheetState.discountSections.length ? (\r\n \r\n ) : null}\r\n \r\n \r\n \r\n (\r\n `${pageNumber} / ${totalPages}`\r\n )} fixed />\r\n \r\n \r\n \r\n )\r\n};\r\n\r\nPrintDocument.propTypes = {\r\n quotes: PropTypes.array.isRequired,\r\n cartItems: PropTypes.array.isRequired,\r\n priceWorksheetState: PropTypes.object.isRequired,\r\n userInfo: PropTypes.object.isRequired,\r\n fabricatorData: PropTypes.object.isRequired,\r\n jobId: PropTypes.number,\r\n assignQuotePopupCustomer: PropTypes.object,\r\n employeeSelected: PropTypes.object,\r\n locale: PropTypes.string.isRequired,\r\n activeTheme: PropTypes.string,\r\n printLogo: PropTypes.string,\r\n wizardState: PropTypes.object.isRequired,\r\n isContractSign: PropTypes.bool,\r\n printState: PropTypes.object,\r\n};\r\n\r\nexport default PrintDocument\r\n","import React from \"react\";\r\nimport UiIcon from \"../../ui/icons/uiIcon\";\r\n\r\nexport const showWizardStepDoneCheckMark = (wizardSelectedValue, featureGroup, cartItems, activeQuoteIndex, stepGroups) => {\r\n return stepGroups.some(stepGroup => {\r\n return (wizardSelectedValue && wizardSelectedValue.wizardGroup && (stepGroup.id === wizardSelectedValue.wizardGroup.id))\r\n || (featureGroup && cartItems.some(cartItem => {\r\n return stepGroup.id === cartItem.fromWizardGroupId\r\n && (cartItem.partId === featureGroup.partId)\r\n && (cartItem.currentQuote === activeQuoteIndex)\r\n && !cartItem.cartFeature.dbFeature.autoAddToCart\r\n }))\r\n })\r\n}\r\n\r\nconst MaterialsWizardDoneCheckMark = () => {\r\n return (\r\n \r\n \r\n )\r\n }\r\n\r\n renderFiltersBody = () => {\r\n const activePart = this.props.childItem.part;\r\n switch (this.props.filterVisible) {\r\n case \"Others\": {\r\n const otherFilterGroups = this.props.allFilterGroups.filter(filterGroup => {\r\n return ![\"Materials\", \"Brand\", \"Color\"].includes(filterGroup.name) && filterGroup.values.some(filterValue => {\r\n return activePart.filtersReceived.includes(filterValue.id);\r\n })\r\n });\r\n const availableOtherFilterGroups = otherFilterGroups.map(fg => {\r\n return {\r\n id: fg.id,\r\n displayText: fg.name,\r\n items: fg.values.filter(filterValue => activePart.filtersReceived.includes(filterValue.id)),\r\n }\r\n });\r\n return this.renderGenericFilters(availableOtherFilterGroups, true);\r\n }\r\n case \"Materials\": {\r\n const filterGroup = this.props.allFilterGroups.find(group => group.name === \"Materials\");\r\n if (this.checkFilterGroupForAvailableFilterValues(filterGroup).length) {\r\n return this.renderGenericFilters(filterGroup.values, false, filterGroup.id);\r\n }\r\n break;\r\n }\r\n case \"Brand\": {\r\n const filterGroup = this.props.allFilterGroups.find(group => group.name === \"Brand\");\r\n if (this.checkFilterGroupForAvailableFilterValues(filterGroup).length) {\r\n return this.renderBrand(filterGroup);\r\n }\r\n break;\r\n }\r\n case \"Color\": {\r\n const filterGroup = this.props.allFilterGroups.find(group => group.name === \"Color\");\r\n if (this.checkFilterGroupForAvailableFilterValues(filterGroup).length) {\r\n return this.renderColor(filterGroup);\r\n }\r\n break;\r\n }\r\n }\r\n return null;\r\n };\r\n\r\n checkFilterGroupForAvailableFilterValues = (filterGroup) => {\r\n if (!filterGroup || !filterGroup.values) {\r\n return []\r\n }\r\n const activePart = this.props.childItem.part;\r\n return filterGroup.values.filter(filterValue => {\r\n return activePart.filtersReceived.includes(filterValue.id);\r\n })\r\n };\r\n\r\n /**\r\n *\r\n * @param filterList {Array}\r\n * @param groupsFirst {boolean}\r\n * @param groupId {any}\r\n * @return {*}\r\n */\r\n renderGenericFilters = (filterList, groupsFirst = false, groupId) => {\r\n // console.log('filterList', filterList);\r\n const fabricatorData = this.props.fabricatorData;\r\n let filterOptions = filterList\r\n .filter(f => !(fabricatorData && ((f.value === \"Slab\" && fabricatorData.isRebath)\r\n || (f.value === \"DuraBath Natural Stone\" && !fabricatorData.isRebath)\r\n )))\r\n .map(f => {\r\n const sortedItems = (f.displayText === \"Size\")\r\n ? f.items.sort((a, b) => {\r\n const name1 = +a.value.split(\"X\")[0].split(\"in\")[0];\r\n const name2 = +b.value.split(\"X\")[0].split(\"in\")[0];\r\n return name1 !== name2 ? name1 < name2 ? -1 : 1 : 0\r\n })\r\n : f.items;\r\n let items = sortedItems.map(i => {\r\n return (\r\n \r\n this.handleSelectFilter(i.id, groupId || f.id)}/>\r\n \r\n );\r\n });\r\n\r\n return (\r\n \r\n this.handleSelectFilter(f.id, groupId || f.id)}/>\r\n\r\n {(f.items && f.items.length > 0)\r\n ? this.handleExpandFilter(f.id)} />\r\n : null}\r\n \r\n );\r\n });\r\n\r\n return (\r\n \r\n : null}\r\n
\r\n )\r\n }\r\n\r\n}\r\n\r\nconst mapStateToProps = (store) => ({\r\n filtersVisible: store.filterState.showFilters,\r\n filterGroups: store.filterState.filterGroups,\r\n bvPresets: store.bathroomVisualizerState.bvPresets,\r\n userIsLoggedIn: store.userState.userIsLoggedIn,\r\n isPhoneNumberValidated: store.userState.isPhoneNumberValidated,\r\n activeNavigationFilter: store.navigationState.activeNavigationFilter,\r\n countertopNavigationFilterCompleted: store.navigationState.countertopNavigationFilterCompleted,\r\n visualizerTutorialStep: store.tutorialState.visualizerTutorialStep,\r\n visualizerTutorialIsOpened: store.tutorialState.visualizerTutorialIsOpened,\r\n activeQuoteIndex: store.quotesState.activeQuoteIndex,\r\n fabricatorData: store.fabricatorState,\r\n});\r\n\r\nconst mapDispatchToProps = {\r\n setNavigationViewType,\r\n toggleDesktopNavigation,\r\n setActiveNavigationNames,\r\n setModuleContextMenuType,\r\n setActiveNavigationFilter,\r\n setActiveNavigationFilterStepIndex,\r\n setDefaultSelectionGroup,\r\n changeActivePartRelatedItemIndex,\r\n setVisualizerTutorialStep,\r\n showVisualizerTutorial,\r\n setNavigationLoading\r\n};\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(DesktopNavigation);\r\n","import React from 'react';\r\nimport {connect} from 'react-redux';\r\nimport {injectIntl} from \"react-intl\";\r\n\r\nimport MobileNavigationCommon from \"../../visComponents/navigation/mobileNavigationCommon\";\r\n\r\nimport {ContentType} from \"../../visComponents/constants\";\r\nimport Z from \"../core/zIndex\";\r\n\r\nimport MobileNavigationButtons from '../../visComponents/navigation/mobile/mobileNavigationButtons';\r\nimport MobileNavigationAllWallsCheckbox from '../../visComponents/navigation/mobile/mobileNavigationAllWallsCheckbox';\r\nimport FeatureWizardSteps from \"../../visComponents/navigation/featureWizard/featureWizardSteps\";\r\n\r\nimport {changeActivePartRelatedItemIndex, setDefaultSelectionGroup} from \"../../../actions/actionFunctions\";\r\nimport {\r\n setActiveNavigationFilter,\r\n setModuleContextMenuType,\r\n setModuleContextMenuModule,\r\n setActiveNavigationFilterStepIndex, setNavigationViewType, setNavigationLoading\r\n} from \"../../../actions/navigationFunctions\";\r\n\r\nimport MobileMenuSelect from '../../visComponents/navigation/mobile/mobileMenuSelect';\r\nimport LockedView from \"../../common/lockedView\";\r\n\r\nimport Filters from \"../../visComponents/navigation/newFilters/filters\";\r\nimport BodyPanelRadio from \"../../visComponents/navigation/desktop/bodyPanelRadio\";\r\nimport FilterSwitchers from \"../../visComponents/navigation/newFilters/filterSwitchers\";\r\nimport FilterSelection from \"../../visComponents/navigation/newFilters/filterSelection\";\r\n// import {CABINET_WIZARD_BUTTONS} from \"../core/constants\";\r\nimport NavigationFiltersSteps from \"../../visComponents/navigation/newFilters/navigationFiltersSteps\";\r\nimport ContextMenuSimple from \"./contextMenuSimple\";\r\n\r\nimport {getCurrentLayout} from \"../../appLayout\";\r\nimport CabinetSwitchers from \"../../kvComponent/navigation/cabinetSwitchers\";\r\nimport CountertopSwitchers from \"../../kvComponent/navigation/countertopSwitchers\";\r\nimport CenterIsland from \"../core/parts/centerIsland\";\r\nimport LookAllWallsRadioButton from \"../../look/lookNavigation/lookMain/lookAllWallsRadioButton\";\r\n\r\nclass MobileNavigation extends MobileNavigationCommon {\r\n\r\n componentWillReceiveProps(nextProps) {\r\n this._componentWillReceiveProps(nextProps)\r\n }\r\n\r\n bindCanvasClick = (event) => {\r\n const layout = getCurrentLayout();\r\n // console.log(\"bindCanvasClick event\");\r\n\r\n const canvas = document.getElementById(this.props.canvasId);\r\n\r\n if (!window.touchMove && !this.state.showNavigation && !this.state.contextMenuOpen) {\r\n this.props.setHoveredLayer(event);\r\n }\r\n\r\n if (document.hoveredLayer && !window.touchMove) {\r\n // $('.canvas-text').html(`CLICK3`);\r\n const layoutType = layout.getCurrentLayoutName();\r\n\r\n let hoveredZone = Z.getMenuByHoveredLayer(layoutType, document.hoveredLayer, canvas);\r\n if (hoveredZone) {\r\n if (hoveredZone.contextMenuPartId && !this.state.showNavigation) {\r\n if (this.state.contextMenuOpen) {\r\n this.setState({\r\n contextMenuOpen: false,\r\n hoveredLayer: {}\r\n });\r\n document.removeEventListener('click', this.handleContextMenuBlur);\r\n } else {\r\n let contextMenuOpen = \"\";\r\n\r\n const receiveBackSplashes = () => {\r\n const wallsParent = layout.parts[\"Walls\"];\r\n const backsplashSubPart = wallsParent.subParts().find(subPart => subPart.part.partId === \"backsplash\");\r\n this.checkIfAllFeaturesReceived(backsplashSubPart);\r\n };\r\n\r\n switch (hoveredZone.contextMenuPartId) {\r\n case \"countertop_group_custom\":\r\n contextMenuOpen = \"Countertop\";\r\n break;\r\n case \"right_wall_custom\":\r\n contextMenuOpen = \"right_wall_custom\";\r\n break;\r\n case \"left_wall_custom\":\r\n contextMenuOpen = \"left_wall_custom\";\r\n break;\r\n case \"backsplash_custom_left\": {\r\n receiveBackSplashes();\r\n contextMenuOpen = \"backsplash_custom_left\";\r\n break;\r\n }\r\n case \"backsplash_custom_right\": {\r\n receiveBackSplashes();\r\n contextMenuOpen = \"backsplash_custom_right\";\r\n break;\r\n }\r\n case \"backsplash_custom\": {\r\n receiveBackSplashes();\r\n contextMenuOpen = \"backsplash_custom\";\r\n break;\r\n }\r\n case \"center_island_custom\":\r\n contextMenuOpen = CenterIsland.id;\r\n break;\r\n default:\r\n break;\r\n }\r\n this.setState({\r\n contextMenuOpen: contextMenuOpen || hoveredZone,\r\n hoveredLayer: document.hoveredLayer\r\n }, () => {\r\n if (contextMenuOpen) {\r\n setTimeout(() => {\r\n document.addEventListener('click', this.handleContextMenuBlur);\r\n }, 0)\r\n }\r\n });\r\n }\r\n return false;\r\n } else if (this.state.contentType === 0) {\r\n if (!window.canvasIsDragging) {\r\n this.props.setCanvasClass((hoveredZone.child || hoveredZone.parent || hoveredZone).toLowerCase().replace(/ /g, \"-\"));\r\n }\r\n this.openMobileMenu();\r\n }\r\n\r\n hoveredZone.child\r\n ? this.triggerOpenNavigationMenu(hoveredZone.child, hoveredZone.parent, false)\r\n : this.triggerOpenNavigationMenu(hoveredZone)\r\n\r\n }\r\n\r\n }\r\n\r\n };\r\n\r\n handleNavigationItemClick = (item, ignoreLocked = false) => {\r\n\r\n if (window.location.port === '9007' || document.kvConfig.kioskMode) {\r\n console.log('item', item);\r\n }\r\n this.itemClick(item, ignoreLocked);\r\n\r\n this.props.setActiveFeature(item.part);\r\n\r\n const canvasClass = this.state.childNavigationItem\r\n ? this.state.parentNavigationItem.text + '-' + this.state.childNavigationItem.text\r\n : this.state.parentNavigationItem.text;\r\n\r\n if (!window.canvasIsDragging) {\r\n this.props.setCanvasClass(canvasClass.toLowerCase().replace(/ /g, \"-\"));\r\n }\r\n\r\n if (this.state.parentNavigationItem) { // update canvas only if it is child\r\n this.props.refreshCB();\r\n }\r\n if (item.part.partId === \"top_cabinet\" && !item.part.metaData[\"Module\"]) {\r\n this.props.setModuleContextMenuModule(null)\r\n }\r\n };\r\n\r\n handleSubPartClick = (subNavigationItem, activeNavigationFilter = null) => { // sidebar list item click\r\n const subItemPart = subNavigationItem.part;\r\n const childNavigationItemPartId = subItemPart.partId;\r\n subItemPart.getParent().handleSubPartClick(subItemPart);\r\n this.setState({\r\n childNavigationItem: subNavigationItem,\r\n showFilterSelection: subItemPart.allFeaturesReceived, // show filters only if subItemPart has all features\r\n showerWallWizardGroupsSelected: false,\r\n searchText: \"\"\r\n }, () => {\r\n this.scrollContentToTop();\r\n this.rememberWallsSelection();\r\n this.checkIfAllFeaturesReceived(subNavigationItem, \"childNavigationItem\");\r\n });\r\n /*set new materials page subIndex*/\r\n this.setActivePartRelatedItemIndex(subNavigationItem);\r\n // console.log('subItemPart', subItemPart);\r\n if (!window.canvasIsDragging) {\r\n const canvasClass = this.state.parentNavigationItem.text + '-' + subNavigationItem.text\r\n .toLowerCase().replace(/ /g, \"-\");\r\n this.props.setCanvasClass(canvasClass);\r\n }\r\n this.setNewActiveFeature(subNavigationItem);\r\n\r\n this.setNavigationFilterIfTheChildWasChanged(childNavigationItemPartId, activeNavigationFilter);\r\n\r\n };\r\n\r\n backsplashSelectClick = () => {\r\n this.props.refreshCB(); // update canvas\r\n this.reRenderComponent(); // update nav items\r\n };\r\n\r\n render() {\r\n const {fabricatorData} = this.props;\r\n const layout = getCurrentLayout();\r\n const activePart = this.state.parentNavigationItem ? this.state.parentNavigationItem.part : null;\r\n const activeSubPart = this.state.childNavigationItem ? this.state.childNavigationItem.part : null;\r\n const activeNavPart = activeSubPart || activePart;\r\n const parentItems = layout.designNavigationItems(); // parent list without filters\r\n const allFeaturesReceived = activeNavPart && activeNavPart.allFeaturesReceived;\r\n\r\n // console.log('activePart', activePart);\r\n // console.log('activeSubPart', activeSubPart);\r\n // console.log('activePart.subTypes()', activePart && activePart.subTypes());\r\n // console.log('this.state.childNavigationItemv1111', this.state.childNavigationItem);\r\n\r\n let useWizard = false;\r\n let wizardGroups = [];\r\n if (this.props.fabricatorSettings\r\n && (this.props.fabricatorSettings.wizardConsumers || (this.props.fabricatorSettings.wizardClients && document.kvConfig.isBackend))\r\n && this.state.contentType === ContentType.Design && activeSubPart && activeSubPart.canUseWizard && activeSubPart.allFeaturesReceived) {\r\n useWizard = true;\r\n wizardGroups = this.state[this.getWizardGroupsByPartId(this.state.childNavigationItem.part.partId)];\r\n }\r\n\r\n const features = this.getFeatures(layout);\r\n\r\n const showLockedView = this.currentActiveItemIsLocked(useWizard);\r\n\r\n const useFilters = (activePart && activePart.partId === \"kitchen_floor\" && activePart.allFeaturesReceived)\r\n || (activeSubPart && (this.isWallItem(activeSubPart) || activeSubPart.partId === \"accent_wall\"\r\n || activeSubPart.partId === \"shower_interior_wall_accent\") && activeSubPart.allFeaturesReceived);\r\n\r\n const filterSelectionHasValues = activeNavPart && FilterSelection.getAvailableFilterValues(\r\n this.props.filterGroups, \"Material\", activeNavPart, fabricatorData\r\n ).length;\r\n\r\n const itemIsSelected = (!this.props.fabricatorSettings.leadCapture\r\n || (activeSubPart && activeSubPart.activeFeature && activeSubPart.firstClick[this.props.activeQuoteIndex] && activeSubPart.placeholderChanged));\r\n\r\n const useKVWizard = false;\r\n //TODO change it when BE is ready\r\n\r\n const showNavigationFilters = useKVWizard &&activeNavPart\r\n // && this.props.activeNavigationFilter !== CABINET_WIZARD_BUTTONS[0].buttonId\r\n && activeNavPart.canUseNavigationFilter && activeNavPart.canUseNavigationFilter();\r\n\r\n let showNavigationFiltersSteps = false;\r\n if (useKVWizard && activeNavPart && activeNavPart.canUseNavigationFilterSteps\r\n && activeNavPart.canUseNavigationFilterSteps()) {\r\n showNavigationFiltersSteps = !this.props.countertopNavigationFilterCompleted;\r\n }\r\n\r\n const cabinetsPartIds = [\"top_cabinet\", \"bottom_cabinet\", \"center_island_cabinet\"];\r\n const isCabinet = activeSubPart && cabinetsPartIds.includes(activeSubPart.partId);\r\n const countertopPartIds = [\"countertop\", \"backsplash\", \"center_island_countertop\"];\r\n const isCountertop = activeSubPart && countertopPartIds.includes(activeSubPart.partId);\r\n\r\n return (\r\n \r\n
\r\n }\r\n}\r\n","import React, {useEffect, useRef, useState} from \"react\";\r\nimport {FormattedMessage, injectIntl} from \"react-intl\";\r\nimport {connect} from \"react-redux\";\r\nimport PropTypes from \"prop-types\";\r\nimport IntlTelInput from \"react-intl-tel-input\";\r\n\r\nimport Config, {IS_QKB_UI} from './../../../config';\r\nimport Misc from \"../../../misc/misc\";\r\nimport {changeUserInfo, changeUserInfoErrors} from \"../../../actions/actionFunctions\";\r\nimport {useIsMounted} from \"../../../misc/helperHooks\";\r\nimport {getPreferredCountries} from \"../../common/twoFactorAuthView\";\r\nimport UserFieldErrors from \"../../popups/userPopup/userFieldsErrors\";\r\nimport OnScreenKeyboard from \"../../common/OnScreenKeyboard/keyboard\";\r\n\r\nconst replaceDialCode = (dialCode, inputValue) => {\r\n const dialWithPlus = \"+\" + dialCode;\r\n if (dialWithPlus.length > 1) {\r\n const charLength = dialWithPlus.length;\r\n if (dialWithPlus === inputValue.slice(0,charLength)) {\r\n inputValue = inputValue.slice(charLength);\r\n }\r\n }\r\n inputValue = inputValue.split(\" \").join(\"\").split(\"-\").join(\"\");\r\n return inputValue\r\n}\r\n\r\nconst LookUserPhoneInput = (props) => {\r\n\r\n const {property, userInfo, changeUserInfo, intl, userInfoErrors, changeUserInfoErrors, placeholder, isUserPopup,\r\n isActive, inputsValidated, fabricatorData} = props;\r\n // const isLowes = fabricatorData.isLowes;\r\n\r\n const inputRef = useRef();\r\n const [defaultValue, ] = useState(userInfo[property]);\r\n const [blurred, setBlurred] = useState(false);\r\n const [focused, setFocused] = useState(false);\r\n const [wasChanged, setWasChanged] = useState(false);\r\n const isMounted = useIsMounted();\r\n const utilsScript = Config.getScriptPath() + \"/libphonenumber.js\";\r\n\r\n // const handleInputBlur = (isValid, value, _this.selectedCountryData, fullNumber, _this.getExtension(value), e) => { // all input tel props params\r\n const handleInputBlur = (isValid, inputValue, ...rest) => {\r\n\r\n let restartInput = false;\r\n setFocused(false);\r\n\r\n const event = rest[3];\r\n if (event && event.relatedTarget && event.relatedTarget.className.includes(\"keyboard-container\")) { // blur from osk keyboard\r\n return\r\n }\r\n\r\n if (!blurred) {\r\n setBlurred(true);\r\n }\r\n const replacedValue = replaceDialCode(userInfo.country.dialCode, inputValue);\r\n if (replacedValue !== inputValue) {\r\n inputValue = replacedValue;\r\n restartInput = true;\r\n }\r\n\r\n const fullNumber = `+${userInfo.country.dialCode} ${inputValue}`;\r\n const errors = getValidationErrors(fullNumber, userInfo.country.iso2.toUpperCase());\r\n // if (!errors.length && !isValid) {\r\n // errors.push(\"assignPopup.errors.phoneIncorrect\")\r\n // }\r\n if (errors.length) {\r\n changeUserInfoErrors({\r\n [property]: errors\r\n })\r\n } else if (!errors.length && userInfoErrors[property]) {\r\n changeUserInfoErrors({\r\n [property]: errors\r\n })\r\n }\r\n // removed this formatting due to incorrect validation ex.(+447862073603)\r\n const formattedPhone = errors[property]\r\n ? Misc.getPhoneFormatted(inputValue, userInfo.country.iso2.toUpperCase())\r\n : inputValue;\r\n console.log(\"handleInputBlur formattedPhone\", formattedPhone);\r\n changeUserInfo({\r\n [property]: formattedPhone\r\n });\r\n if (restartInput && inputRef && inputRef.current && inputRef.current.setInitialState) {\r\n setTimeout(() => {\r\n inputRef.current.setFlag(userInfo.country.iso2, true);\r\n inputRef.current.setNumber(fullNumber);\r\n // inputRef.current.setInitialState();\r\n }, 0)\r\n }\r\n // console.log(\"blur number\", isValid, inputValue);\r\n };\r\n\r\n useEffect(() => {\r\n if (IS_QKB_UI) {\r\n if (isMounted() && isActive) {\r\n handleInputBlur(true, userInfo[property]);\r\n }\r\n } else if (!inputsValidated) {\r\n handleInputBlur(true, userInfo[property]);\r\n }\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [inputsValidated]);\r\n\r\n const getValidationErrors = (currentValue, region) => {\r\n if (fabricatorData.isCaesarStone) {\r\n return []\r\n }\r\n region = region || \"US\";\r\n const errors = [];\r\n if (!currentValue) {\r\n errors.push(\"assignPopup.errors.phoneRequired\");\r\n return errors\r\n }\r\n if (!Misc.isPhoneNumber(currentValue, region)) {\r\n errors.push(\"assignPopup.errors.phoneIncorrect\");\r\n }\r\n return errors\r\n }\r\n\r\n const handleInputFocus = () => {\r\n setFocused(true);\r\n }\r\n\r\n /**\r\n * 5 arguments passed to this callback\r\n * @param a {boolean} // isValid\r\n * @param b {string} // newNumber\r\n * @param c {Object} // countryData\r\n * @param phoneNumber {string} // fullNumber\r\n * @param forceCarrot {boolean} // isExtension\r\n */\r\n const handleChangeNumber = (a, b, c, phoneNumber, forceCarrot = false) => {\r\n phoneNumber = phoneNumber.replace(/[^0-9\\-\\(\\)\\s]/gi, \"\");\r\n /*let prefix = `+${c.dialCode}`;\r\n phoneNumber = phoneNumber.replace(prefix, '');\r\n if(country !== \"auto\" && country.dialCode) {\r\n prefix = `+${country.dialCode}`;\r\n }\r\n if (startsWith(phoneNumber, prefix + ' ') || trim(phoneNumber).length == 0) {\r\n let hasPrefix = phoneNumber.substring(0, prefix.length) == prefix;\r\n if (hasPrefix) phoneNumber = trim(phoneNumber.substring(prefix.length));\r\n phoneNumber = `${prefix} ${phoneNumber}`;\r\n }*/\r\n if (forceCarrot) {\r\n const forceCarrotFunc = () => {\r\n let p = document.getElementById('phone');\r\n p.selectionStart = phoneNumber.length;\r\n p.selectionEnd = phoneNumber.length;\r\n }\r\n window.setTimeout(forceCarrotFunc, 10);\r\n }\r\n if (!c) {\r\n return\r\n }\r\n if ((userInfo.phoneNumber !== phoneNumber) && (userInfo.country.iso2 !== c.iso2) && isMounted()) {\r\n // console.log(\"handleChangeNumber formattedPhone\", c);\r\n // console.log(\"userInfo.phoneNumber\", userInfo.phoneNumber);\r\n // console.log(\"phoneNumber\", phoneNumber);\r\n changeUserInfo({country: c});\r\n }\r\n if (userInfoErrors[property] || blurred || !focused || !wasChanged) {\r\n const errors = getValidationErrors(`+${c.dialCode} ${b}`, c.iso2.toUpperCase());\r\n if (!errors.length || blurred) {\r\n changeUserInfoErrors({\r\n [property]: errors\r\n })\r\n }\r\n }\r\n if (!focused || !wasChanged) { // autofill\r\n const replacedValue = replaceDialCode(c.dialCode, b);\r\n if (replacedValue !== b) {\r\n b = replacedValue;\r\n const fullNumber = `+${c.dialCode} ${b}`;\r\n inputRef.current.setNumber(fullNumber);\r\n }\r\n changeUserInfo({\r\n [property]: b\r\n });\r\n console.log(\"change number when it is not focused\", b, phoneNumber);\r\n }\r\n if (!wasChanged) {\r\n setWasChanged(true);\r\n }\r\n };\r\n\r\n const handleChangeFlag = (currentNumber, selectedCountryData) => {\r\n /*const matches = currentNumber.match(/(\\+\\d{1,4}\\s)/gi);\r\n currentNumber = currentNumber.replace(/\\+\\d{1,4}\\s/gi, '');\r\n\r\n const numberSplitted = currentNumber.split(\"+\"+selectedCountryData.dialCode);\r\n const number = numberSplitted[numberSplitted.length - 1] || \"\";\r\n\r\n currentNumber = (matches && matches.length > 1)\r\n ? `${matches[1]}${currentNumber}`\r\n : `+${selectedCountryData.dialCode} ${number}`;*/\r\n\r\n if (!isActive) {\r\n return // return here because when user came from log in - it was updating userinfo country and was setting empty currentNumber\r\n }\r\n\r\n let newUserInfo = {};\r\n if (currentNumber !== userInfo.phoneNumber) {\r\n newUserInfo.phoneNumber = currentNumber\r\n }\r\n if (selectedCountryData && selectedCountryData.iso2) {\r\n newUserInfo.country = selectedCountryData\r\n }\r\n if (Object.keys(newUserInfo).length) {\r\n // console.log(\"handleChangeFlag!!\", newUserInfo);\r\n changeUserInfo(newUserInfo);\r\n }\r\n if ((userInfoErrors[property] || blurred) && (selectedCountryData && selectedCountryData.iso2)) {\r\n const fullNumber = `+${selectedCountryData.dialCode} ${currentNumber}`;\r\n const errors = getValidationErrors(fullNumber, selectedCountryData.iso2.toUpperCase());\r\n if (!errors.length) {\r\n changeUserInfoErrors({\r\n [property]: errors\r\n })\r\n }\r\n }\r\n };\r\n\r\n const errorsExist = Array.isArray(userInfoErrors[property]) && userInfoErrors[property].length;\r\n\r\n const renderScreenKeyboard = () => {\r\n if (!document.kvConfig.osk) {\r\n return null\r\n }\r\n const keyboardNumberClick = (value) => {\r\n // console.log(\"keyboardNumberChange\", value);\r\n // console.log(\"inputRef\", inputRef);\r\n if (value && value.includes(\".\")) { // phone number can't include dots\r\n return\r\n }\r\n changeUserInfo({ // 1) set redux value\r\n [property]: value\r\n });\r\n // handleChangeNumber(true, value, userInfo.country, value, true); // 2) change flag? not sure if we need this on number click\r\n if (inputRef && inputRef.current) { // 3) set input value by passing fake event\r\n inputRef.current.handleInputChange({\r\n target: {\r\n selectionStart: value.length,\r\n target: inputRef.current.tel,\r\n value,\r\n }\r\n });\r\n }\r\n }\r\n return \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n )}\r\n
\r\n\r\n );\r\n //\r\n {IntlInputComponent}\r\n {fabricatorData.isCaesarStone || (isUserPopup && !errorsExist) ? null : *}\r\n \r\n {renderScreenKeyboard()}\r\n
\r\n )\r\n }\r\n\r\n return (\r\n \r\n
\r\n )\r\n};\r\n\r\nLookUserPhoneInput.propTypes = {\r\n property: PropTypes.string.isRequired,\r\n inputsValidated: PropTypes.bool.isRequired,\r\n shrink: PropTypes.bool,\r\n restartPhoneInput: PropTypes.func,\r\n placeholder: PropTypes.string,\r\n isUserPopup: PropTypes.bool,\r\n isActive: PropTypes.bool,\r\n};\r\n\r\nconst mapStateToProps = (store) => {\r\n const {userInfo, userInfoErrors} = store.userState;\r\n return {\r\n userInfo,\r\n userInfoErrors,\r\n fabricatorData: store.fabricatorState\r\n // assignQuotePopupSearchText: store.assignQuoteState.assignQuotePopupSearchText\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n changeUserInfo,\r\n changeUserInfoErrors\r\n};\r\n\r\nexport default injectIntl(\r\n connect(mapStateToProps, mapDispatchToProps)(LookUserPhoneInput)\r\n)\r\n","import React, {Fragment} from 'react';\r\n\r\nimport {DISCOUNT_MAIN_TYPES, DISCOUNT_MODES, DISCOUNT_TYPES} from \"./discounstInterface\";\r\nimport {\r\n getPriceWithCurrency,\r\n getQuotePriceWithDiscounts, getQuotePriceWithTaxes,\r\n getTotalPrice,\r\n sortByOrder,\r\n toFixedPrice\r\n} from \"../../misc/helpers\";\r\nimport {\r\n getCustomDepositAmount,\r\n getDiscountsForSection,\r\n getSubTotalPrice,\r\n shouldDisplayDiscount\r\n} from \"./discountFunctions\";\r\nimport TextInput from \"../ui/textInput\";\r\n\r\nexport default class DiscountCommon extends React.Component {\r\n\r\n handleDiscountSelectClick = () => {\r\n if (this.isDiscountDisabled()) {\r\n return false\r\n }\r\n const currentDiscount = this.props.discount;\r\n currentDiscount.selected = !currentDiscount.selected;\r\n this.updateDiscount(currentDiscount);\r\n };\r\n\r\n setDiscountProperty = (property, value) => {\r\n const currentDiscount = this.props.discount;\r\n currentDiscount[property] = value;\r\n this.updateDiscount(currentDiscount);\r\n };\r\n\r\n updateDiscount = (currentDiscount) => {\r\n this.props.setDiscountSections(this.props.discountSections.map((discountSection) => {\r\n if (discountSection.order === this.props.discountSection.order) {\r\n discountSection.discounts.map(discount => {\r\n if (currentDiscount.order === discount.order) {\r\n return currentDiscount\r\n }\r\n return discount\r\n });\r\n if (currentDiscount.selected && currentDiscount.mode === DISCOUNT_MODES.or && !currentDiscount.isSubTotal) {\r\n discountSection.discounts = discountSection.discounts.map(discount => {\r\n if ((currentDiscount.order !== discount.order) && (discount.mode === DISCOUNT_MODES.or) && !discount.isSubTotal) {\r\n discount.selected = false\r\n }\r\n return discount\r\n });\r\n }\r\n }\r\n return discountSection\r\n }));\r\n };\r\n\r\n getGrandTotal = (withoutDiscount = null) => {\r\n const totalPrice = getTotalPrice(null, false);\r\n return getQuotePriceWithDiscounts(totalPrice, withoutDiscount ? [withoutDiscount] : []);\r\n }\r\n\r\n isDiscountDisabled = (forDiscount = this.props.discount) => {\r\n const {discountSection, customAddedDiscounts} = this.props;\r\n const discount = forDiscount;\r\n if (discount.selected) {\r\n return false\r\n }\r\n const grandTotal = this.getGrandTotal();\r\n const discountAmount = discount.type === DISCOUNT_TYPES.price ? discount.amount : grandTotal * discount.amount / 100;\r\n let disabled = (grandTotal - discountAmount) < 0;\r\n if (disabled && discount.mode === DISCOUNT_MODES.or) {\r\n const allDiscounts = sortByOrder(getDiscountsForSection(discountSection, customAddedDiscounts));\r\n if (allDiscounts.some(currentDiscount => {\r\n return (currentDiscount.order !== discount.order) // take othere discounts from this section\r\n && (currentDiscount.mode === DISCOUNT_MODES.or) // with OR mode\r\n && shouldDisplayDiscount(currentDiscount) // already selected\r\n && (this.getGrandTotal(currentDiscount) - discountAmount) > 0\r\n // price without this discount minus current discount amount still more than 0\r\n })) {\r\n disabled = false\r\n }\r\n }\r\n return disabled\r\n }\r\n\r\n getDiscountPercentageAmount = () => {\r\n const grandTotal = getSubTotalPrice(this.props.discountSections, this.props.discountSection, this.props.discount, true, this.props.customAddedDiscounts);\r\n const priceTaken = grandTotal * this.props.discount.amount / 100 // for ex. 25% from 2700 = 625\r\n return toFixedPrice(Math.trunc(priceTaken * 100) / 100);\r\n };\r\n\r\n setAmountValue = (value) => {\r\n // console.log(\"value\", value);\r\n if ((this.props.discount.discountType === DISCOUNT_MAIN_TYPES.deposit) && (this.props.discount.type === DISCOUNT_TYPES.percent)) {\r\n this.setDiscountProperty(\"type\", DISCOUNT_TYPES.price);\r\n }\r\n this.setDiscountProperty(\"amount\", +value)\r\n };\r\n\r\n getMaxDiscountValue = () => {\r\n return (this.props.discount.type === DISCOUNT_TYPES.percent) ? 100 : this.getGrandTotal(this.props.discount)\r\n }\r\n\r\n getDiscountAmount = () => {\r\n const {discount, fabricatorSettings} = this.props;\r\n return discount.type === DISCOUNT_TYPES.price\r\n ? \"-\" + getPriceWithCurrency(fabricatorSettings, discount.amount)\r\n : \"-\" + getPriceWithCurrency(fabricatorSettings, this.getDiscountPercentageAmount())\r\n }\r\n\r\n getInputValue = () => {\r\n const {discount, fabricatorSettings, discountSections} = this.props;\r\n if (!discount.amount) {\r\n return \"0\"\r\n }\r\n if (discount.discountType === DISCOUNT_MAIN_TYPES.deposit) {\r\n if (discount.type === DISCOUNT_TYPES.price) {\r\n return getPriceWithCurrency(fabricatorSettings, toFixedPrice(discount.amount))\r\n }\r\n const totalPrice = getTotalPrice();\r\n const grandTotal = getQuotePriceWithTaxes(totalPrice);\r\n const customDepositAmount = getCustomDepositAmount(discountSections, grandTotal);\r\n return getPriceWithCurrency(fabricatorSettings, customDepositAmount);\r\n }\r\n // return \"-\" + (discount.type === DISCOUNT_TYPES.price) // we can't have percentages free fill discounts\r\n // ? fabricatorSettings.currencySign + discount.amount\r\n // : discount.amount + \"%\"\r\n return \"-\" + getPriceWithCurrency(fabricatorSettings, toFixedPrice(discount.amount))\r\n }\r\n\r\n renderAmountInput = () => {\r\n const {discount, fabricatorData} = this.props;\r\n const isDiscount = discount.discountType === DISCOUNT_MAIN_TYPES.deposit;\r\n return discount.selected || isDiscount ? (\r\n \r\n {IntlInputComponent}\r\n \r\n
\r\n {errorsExist ? (\r\n \r\n
\r\n
\r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = (store) => {\r\n return {\r\n windowWidth: store.serverState.windowWidth,\r\n };\r\n};\r\n\r\nexport default connect(mapStateToProps, {\r\n})(UiSelect);\r\n","import invert from 'lodash/invert';\r\nimport snakeCase from 'lodash/snakeCase';\r\n\r\nimport LayoutCommonNew from \"../../visComponents/layoutCommonNew\";\r\n\r\nimport {LayoutType, LayoutAbbreviation, METADATA, ShowerHeadTypes} from \"./constants\";\r\nimport zIndexes from \"./zIndex\";\r\n\r\nimport Other from \"./parts/other\";\r\nimport NonVisualizerSubPart from \"./subparts/nonVisualizerSubPart\";\r\nimport DesignNavigationItem from \"../../visComponents/designNavigationItem\";\r\nimport Background from \"./parts/background\";\r\nimport {ShowerAccessories} from \"./parts/showerAccessories\";\r\nimport {Toilet} from \"./parts/toilet\";\r\nimport {WindowParent} from \"./parts/windowParent\";\r\nimport Floor from \"./parts/floor\";\r\nimport Walls from \"./parts/walls\";\r\nimport {Shower} from \"./parts/shower\";\r\nimport {Vanity} from \"./parts/vanity\";\r\nimport {ShowerTubCombo} from \"./parts/showerTubCombo\";\r\nimport Globals from \"./parts/globals\";\r\nimport {Bathtub} from \"./parts/bathtub\";\r\nimport {AVAILABLE_VISUALIZER_TYPES} from \"../../../config\";\r\nimport {Accessories} from \"./parts/accessories\";\r\n\r\nexport class Layout extends LayoutCommonNew {\r\n\r\n /**\r\n * @type {int}\r\n */\r\n defaultType = LayoutType.Layout1;\r\n type = this.defaultType;\r\n scene = \"1\";\r\n visualizerType = AVAILABLE_VISUALIZER_TYPES.bvLook;\r\n localStorageKey = \"bvLookState\";\r\n layersBinding = \"BathroomV5\";\r\n layoutNames = LayoutAbbreviation;\r\n layoutTypes = LayoutType;\r\n zIndexes = zIndexes.layouts;\r\n excludedPartIdsFromHover = [\"background_bg\", \"walls_ceiling\", \"front_wall_crop\", \"left_wall_crop\",\r\n \"right_wall_crop\", \"shower_wall_mirror\", \"window_body\", \"shower_screen\", \"skirting_board\"];\r\n checkMorePointsPartIds = [\"vanity_faucet\", \"vanity_sink\", \"shower_fixture\", \"bathtub_fixture\", \"towel_bar\",\r\n \"robe_hook\", \"towel_ring\", \"soap_dish\", \"corner_shelf\"];\r\n\r\n constructor(props) {\r\n super(props);\r\n this.parts[Background.id] = new Background();\r\n this.parts[Walls.id] = new Walls();\r\n this.parts[Vanity.id] = new Vanity();\r\n this.parts[Shower.id] = new Shower();\r\n this.parts[ShowerTubCombo.id] = new ShowerTubCombo();\r\n this.parts[ShowerAccessories.id] = new ShowerAccessories();\r\n this.parts[Accessories.id] = new Accessories();\r\n this.parts[Bathtub.id] = new Bathtub();\r\n this.parts[Toilet.id] = new Toilet();\r\n this.parts[Floor.id] = new Floor();\r\n this.parts[WindowParent.id] = new WindowParent();\r\n // this.parts[Ceiling.id] = new Ceiling();\r\n this.parts[Globals.id] = new Globals();\r\n this.parts[Other.id] = new Other();\r\n Object.values(this.parts).forEach(part => part.layout = this);\r\n }\r\n\r\n fixFeatureMetaData(dbFeature) {\r\n dbFeature.metaData.RoomLayout = dbFeature.metaData.RoomLayout.map((mValue) => {\r\n mValue = (mValue || \"\").replace(\"Look \", \"\").replace(\"Layout\", \"\");\r\n if (+mValue >= 10) {\r\n if (document.kvConfig.userId === 140067) {\r\n mValue = (+mValue - 10) + \"\"\r\n } else {\r\n dbFeature.isFromAsRoom = true;\r\n }\r\n }\r\n if (!mValue.includes(\"Layout\")) {\r\n mValue = \"Layout\" + mValue\r\n }\r\n return mValue\r\n });\r\n // [\"ShowerSize\", \"SplitWallType\"].forEach(metaName => { // splitWallType should not use 0 as all\r\n [\"ShowerSize\"].forEach(metaName => {\r\n if (Array.isArray(dbFeature.metaData[metaName])) {\r\n if (dbFeature.metaData[metaName].includes(\"0\")) {\r\n dbFeature.metaData[metaName] = [METADATA.ALL]\r\n } else if (dbFeature.metaData[metaName].includes(\"30\")) {\r\n dbFeature.metaData[metaName] = dbFeature.metaData[metaName].map(metaValue => {\r\n if (metaValue === \"30\") { // we have 30 and 36, but they should be the same. we decided to make all 36 as the shower body\r\n return \"36\"\r\n }\r\n return metaValue\r\n })\r\n }\r\n }\r\n });\r\n if (Array.isArray(dbFeature.metaData[\"Side\"]) && dbFeature.metaData[\"Side\"].length) {\r\n dbFeature.metaData.layerPosition = dbFeature.metaData[\"Side\"][0]\r\n }\r\n Object.keys(dbFeature.metaData).forEach(key => {\r\n if (Array.isArray(dbFeature.metaData[key]) && (key !== \"CropCoords\")) {\r\n dbFeature.metaData[key] = dbFeature.metaData[key].flatMap(metaValue => {\r\n if (typeof metaValue === \"string\") {\r\n if (metaValue.includes(\", \")) {\r\n return metaValue.split(\", \")\r\n } else if (metaValue.includes(\",\")) {\r\n return metaValue.split(\",\")\r\n }\r\n }\r\n return metaValue\r\n })\r\n }\r\n });\r\n return dbFeature\r\n }\r\n\r\n getCurrentLayoutName(type = this.type) {\r\n return invert(LayoutType)[type];\r\n }\r\n\r\n getCurrentLayoutAbbreviation() {\r\n return LayoutAbbreviation[this.getCurrentLayoutName()]\r\n }\r\n\r\n addNonVisualizerSubPart(featureGroupName){\r\n const otherParent = this.parts[Other.id];\r\n const partId = snakeCase(featureGroupName);\r\n let relatedItem = otherParent.relatedItems.find(relatedItem => relatedItem.partId === partId);\r\n if (!relatedItem) {\r\n relatedItem = new NonVisualizerSubPart(true, partId, featureGroupName);\r\n relatedItem.getParent = () => otherParent;\r\n otherParent.relatedItems.push(relatedItem);\r\n }\r\n return new DesignNavigationItem(relatedItem.partName, relatedItem)\r\n }\r\n\r\n addSpecificPropertiesToLocalStorage(bvState, useNames, returnAllFeatures= false) {\r\n const shower = this.parts[Shower.id];\r\n const showerTubCombo = this.parts[ShowerTubCombo.id];\r\n bvState[\"shower_head_type\"] = shower ? shower[\"shower_head_type\"] : \"\";\r\n bvState[\"shower_hand_type\"] = shower ? shower[\"shower_hand_type\"] : \"\";\r\n const vanityParent = this.parts[Vanity.id];\r\n bvState[\"vanity_type\"] = vanityParent ? vanityParent[\"vanity_type\"] : \"\";\r\n bvState.shower_tub_combo_is_active = shower.showerTubComboIsActive();\r\n bvState.bottom_tub = showerTubCombo.bottomTub;\r\n bvState.shower_floor_is_active = shower.showerFloorIsActive;\r\n return super.addSpecificPropertiesToLocalStorage(bvState, useNames, returnAllFeatures)\r\n }\r\n\r\n setActiveFeaturesFromObject(bvState, isCartAndUserStatedUpdateNeeded, useNames,\r\n needToChangeLayout, firstLoad, isFake) {\r\n const shower = this.parts[Shower.id];\r\n const showerTubCombo = this.parts[ShowerTubCombo.id];\r\n\r\n if (shower && bvState && bvState[\"shower_head_type\"]) {\r\n if (bvState[\"shower_head_type\"] === ShowerHeadTypes.shower_arm && !bvState[\"shower_arm\"] && bvState[\"shower_fixture\"]) {\r\n bvState[\"shower_head_type\"] = ShowerHeadTypes.shower_fixture; // fix for existing logic\r\n }\r\n shower.setShowerHeadType(bvState[\"shower_head_type\"]);\r\n }\r\n if (shower && bvState && bvState[\"shower_hand_type\"]) {\r\n shower.setShowerHandType(bvState[\"shower_hand_type\"]);\r\n }\r\n const vanityParent = this.parts[Vanity.id];\r\n vanityParent[\"vanity_type\"] = bvState[\"vanity_type\"]; // set it in any case! for standalone sink we are disabling vanity_type\r\n if (bvState[\"shower_tub_combo_is_active\"]) {\r\n showerTubCombo.setShowerTubCombo();\r\n if (bvState.bottom_tub) {\r\n showerTubCombo.bottomTub = bvState.bottom_tub\r\n }\r\n } else if (showerTubCombo.showerTubComboIsActive) {\r\n showerTubCombo.showerTubComboIsActive = false\r\n }\r\n if (bvState[\"shower_floor_is_active\"]) {\r\n shower.showerFloorIsActive = bvState[\"shower_floor_is_active\"];\r\n }\r\n return super.setActiveFeaturesFromObject(bvState, isCartAndUserStatedUpdateNeeded, useNames, needToChangeLayout, firstLoad, isFake)\r\n }\r\n\r\n}\r\n","import {Part} from \"../part\";\r\nimport {PartMenuType} from \"../../../visComponents/constants\";\r\nimport { showerAccessoriesThumbnail } from '../../../bvComponent/core/assets';\r\nimport LargeCornerSeat from \"../subparts/showerAccessories/largeCornerSeat\";\r\nimport SoapDish from \"../subparts/showerAccessories/soapDish\";\r\nimport CornerCaddie from \"../subparts/showerAccessories/cornerCaddie\";\r\nimport LargeCornerCaddie from \"../subparts/showerAccessories/largeCornerCaddie\";\r\nimport GrabBar from \"../subparts/showerAccessories/grabBar\";\r\nimport CornerShelf from \"../subparts/showerAccessories/cornerShelf\";\r\nimport ShowerPod from \"../subparts/showerAccessories/showerPod\";\r\nimport Seats from \"../subparts/showerAccessories/seats\";\r\nimport ShowerRod from \"../subparts/showerAccessories/showerRod\";\r\nimport ToiletBrush from \"../subparts/showerAccessories/toiletBrush\";\r\nimport PaperHolder from \"../subparts/showerAccessories/paperHolder\";\r\nimport RobeHook from \"../subparts/showerAccessories/robeHook\";\r\nimport TowelBar from \"../subparts/showerAccessories/towelBar\";\r\nimport TowelRing from \"../subparts/showerAccessories/towelRing\";\r\nimport GlassHolder from \"../subparts/showerAccessories/glassHolder\";\r\nimport TowelRack from \"../subparts/showerAccessories/towelRack\";\r\nimport Wainscoting from \"../subparts/showerAccessories/wainscoting\";\r\nimport Towel from \"../subparts/showerAccessories/towel\";\r\nimport TowelTowelRing from \"../subparts/showerAccessories/towelTowelRing\";\r\nimport TowelTowelBar from \"../subparts/showerAccessories/towelTowelBar\";\r\nimport TowelTowelHook from \"../subparts/showerAccessories/towelTowelHook\";\r\n\r\nexport class ShowerAccessories extends Part {\r\n static id = 'Shower Accessories';\r\n\r\n constructor() {\r\n super(true, false, PartMenuType.Complex);\r\n\r\n this.menuType = PartMenuType.Complex;\r\n this.partThumbnail = showerAccessoriesThumbnail;\r\n this.partName = 'Shower Accessories';\r\n this.translateId = \"visualizer.bathroom.accessories\";\r\n this.relatedItems = [];\r\n\r\n // related items\r\n this.soapDish = null;\r\n this.largeCornerSeat = null;\r\n this.largeCornerCaddie = null;\r\n this.cornerCaddie = null;\r\n this.smallCornerShelf = null;\r\n this.grabBar = null;\r\n this.showerPod = null;\r\n this.seats = null;\r\n this.showerRod = null;\r\n this.robeHook = null;\r\n this.paperHolder = null;\r\n this.toiletBrush = null;\r\n this.towelBar = null;\r\n this.towel = null;\r\n this.towelTowelRing = null;\r\n this.towelTowelBar = null;\r\n this.towelTowelHook = null;\r\n\r\n //current active caddie type\r\n this.caddie_type = \"corner_shelf\";\r\n this.relatedGroupNames = [\"Soap Dish\", \"Large Corner Seat\", \"Large Corner Caddie\", \"Corner Caddie\", \"Grab Bar\",\r\n \"Robe Hook\", \"Paper Holder\", \"Toilet Brush\", \"Shower Rod\", \"Corner Shelf\", \"Shower Pod\", \"Seats\", \"Towel Bar\",\r\n \"Towel Rack\", \"Towel Ring\", \"Glass Holder\", \"Wainscoting\"];\r\n }\r\n load(dbFeature, loadFeature = true) {\r\n let relatedItemName = \"\",\r\n RelatedItemClass = null;\r\n switch (dbFeature.groupName) {\r\n case \"Soap Dish\":\r\n relatedItemName = \"soapDish\";\r\n RelatedItemClass = SoapDish;\r\n break;\r\n case \"Large Corner Seat\":\r\n relatedItemName = \"largeCornerSeat\";\r\n RelatedItemClass = LargeCornerSeat;\r\n break;\r\n case \"Large Corner Caddie\":\r\n relatedItemName = \"largeCornerCaddie\";\r\n RelatedItemClass = LargeCornerCaddie;\r\n break;\r\n case \"Corner Caddie\":\r\n relatedItemName = \"cornerCaddie\";\r\n RelatedItemClass = CornerCaddie;\r\n break;\r\n case \"Grab Bar\":\r\n relatedItemName = \"grabBar\";\r\n RelatedItemClass = GrabBar;\r\n break;\r\n case \"Robe Hook\":\r\n relatedItemName = \"robeHook\";\r\n RelatedItemClass = RobeHook;\r\n break;\r\n case \"Paper Holder\":\r\n relatedItemName = \"paperHolder\";\r\n RelatedItemClass = PaperHolder;\r\n break;\r\n case \"Toilet Brush\":\r\n relatedItemName = \"toiletBrush\";\r\n RelatedItemClass = ToiletBrush;\r\n break;\r\n case \"Shower Rod\":\r\n relatedItemName = \"showerRod\";\r\n RelatedItemClass = ShowerRod;\r\n break;\r\n case \"Corner Shelf\":\r\n case \"Small Corner Shelf\":\r\n relatedItemName = \"cornerShelf\";\r\n RelatedItemClass = CornerShelf;\r\n break;\r\n case \"Shower Pod\":\r\n case \"Storage Pod\":\r\n case \"Storage Pods\":\r\n relatedItemName = \"showerPod\";\r\n RelatedItemClass = ShowerPod;\r\n break;\r\n case \"Seats\":\r\n case \"flip-Up Seat\":\r\n case \"Flip-Up Seat\":\r\n relatedItemName = \"seats\";\r\n RelatedItemClass = Seats;\r\n break;\r\n case \"Towel Bar\":\r\n relatedItemName = \"towelBar\";\r\n RelatedItemClass = TowelBar;\r\n break;\r\n case \"Towel Rack\":\r\n relatedItemName = \"towelRack\";\r\n RelatedItemClass = TowelRack;\r\n break;\r\n case \"Towel Ring\":\r\n relatedItemName = \"towelRing\";\r\n RelatedItemClass = TowelRing;\r\n break;\r\n case \"Towel\":\r\n case \"towel\":\r\n case \"Towels\": {\r\n if (dbFeature.metaData && Array.isArray(dbFeature.metaData[\"MountPosition\"]) && dbFeature.metaData[\"MountPosition\"].length) {\r\n if (dbFeature.metaData[\"MountPosition\"][0] === \"TowelRing\") {\r\n relatedItemName = \"towelTowelRing\";\r\n RelatedItemClass = TowelTowelRing;\r\n } else if (dbFeature.metaData[\"MountPosition\"][0] === \"TowelBar\" || dbFeature.metaData[\"MountPosition\"][0] === \"TowelTowelBar\") {\r\n relatedItemName = \"towelTowelBar\";\r\n RelatedItemClass = TowelTowelBar;\r\n } else if (dbFeature.metaData[\"MountPosition\"][0] === \"TowelHook\") {\r\n relatedItemName = \"towelTowelHook\";\r\n RelatedItemClass = TowelTowelHook;\r\n } else {\r\n relatedItemName = \"towel\";\r\n RelatedItemClass = Towel;\r\n }\r\n } else {\r\n relatedItemName = \"towel\";\r\n RelatedItemClass = Towel;\r\n }\r\n break;\r\n }\r\n case \"Glass Holder\":\r\n relatedItemName = \"glassHolder\";\r\n RelatedItemClass = GlassHolder;\r\n break;\r\n case \"Wainscoting\":\r\n relatedItemName = \"wainscoting\";\r\n RelatedItemClass = Wainscoting;\r\n break;\r\n\r\n }\r\n return this.loadCommon(relatedItemName, RelatedItemClass, dbFeature, loadFeature)\r\n }\r\n\r\n}\r\n\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport {METADATA} from \"../../constants\";\r\nimport {Shower} from \"../../parts/shower\";\r\n\r\nexport default class EnclosureCommon extends IntermediatePart {\r\n\r\n constructor(props) {\r\n super(props);\r\n }\r\n\r\n load(dbFeature) {\r\n if (!dbFeature.metaData[\"BathType\"]) {\r\n dbFeature.metaData[\"BathType\"] = [METADATA.BathtubWithEnclosures]; // remove enclosure top and bottom\r\n }\r\n return super.load(dbFeature);\r\n }\r\n\r\n disabledClick() {\r\n const bathParent = this.getParent();\r\n if (bathParent[\"bathTubBody\"]) {\r\n bathParent[\"bathTubBody\"].disabled = this.disabled || !bathParent[\"bathTubBody\"].canBeEnabled(); // true or check if it can be enabled;\r\n }\r\n [\"enclosureTop\", \"enclosureBottom\"].forEach(relName => {\r\n if (bathParent[relName] && (bathParent[relName].partId !== this.partId)) {\r\n bathParent[relName].disabled = this.disabled;\r\n }\r\n })\r\n }\r\n\r\n setLayers(layout) {\r\n if (this.partId === \"skirting_board\") {\r\n return super.setLayers(layout);\r\n }\r\n const bathtubParent = this.getParent();\r\n if (!bathtubParent || !bathtubParent.bathTubBody || !bathtubParent.bathTubBody.activeFeature\r\n || !bathtubParent.bathTubBody.activeFeature.metaData[\"BathType\"]\r\n || !bathtubParent.bathTubBody.activeFeature.metaData[\"BathType\"].includes(METADATA.BathtubWithEnclosures)) {\r\n super.hideLayers();\r\n return;\r\n }\r\n super.setLayers(layout);\r\n }\r\n\r\n getArrayOfConditions() {\r\n const conditions = super.getArrayOfConditions();\r\n const bathtubParent = this.getParent();\r\n conditions.push({\r\n propName: \"BathType\",\r\n propValue: bathtubParent && bathtubParent.bathTubBody && bathtubParent.bathTubBody.activeFeature\r\n ? bathtubParent.bathTubBody.activeFeature.metaData[\"BathType\"]\r\n : METADATA.BathtubWithoutEnclosures // remove Enclosure Top\r\n });\r\n if (this.partId === \"skirting_board\") {\r\n const layout = bathtubParent.layout;\r\n const showerParent = layout.parts[Shower.id];\r\n const showerSize = showerParent.showerSize();\r\n if (showerParent && showerSize) {\r\n conditions.push({\r\n propName: \"ShowerSize\",\r\n propValue: showerSize\r\n });\r\n }\r\n }\r\n return conditions\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport {getCurrentRoomType} from \"../../../../appLayout\";\r\nimport {LOOK_ROOM_TYPES, VANITY_TYPES} from \"../../constants\";\r\n\r\nexport default class VanityCommon extends IntermediatePart {\r\n\r\n constructor(props) {\r\n super(props);\r\n }\r\n\r\n getArrayOfConditions() {\r\n const vanityParent = this.getParent();\r\n let conditions = super.getArrayOfConditions(); //roomLayout\r\n let vanitySize = vanityParent.counterTopSize(this);\r\n if (this.partId === \"vanity_mirror\") {\r\n const currentVanityTypeFeatureGroup = vanityParent.relatedItems.find(relItem => relItem.partId === vanityParent.vanity_type);\r\n if (currentVanityTypeFeatureGroup && currentVanityTypeFeatureGroup.layerPositions) {\r\n if (vanitySize === \"24\" || (Array.isArray(vanitySize) && vanitySize.includes(\"24\"))) {\r\n if (currentVanityTypeFeatureGroup.layerPositions[\"L\"] && currentVanityTypeFeatureGroup.layerPositions[\"R\"]) {\r\n conditions.push({\r\n propName: \"MirrorShape\",\r\n propValue: \"24D\"\r\n });\r\n } else if (currentVanityTypeFeatureGroup.layerPositions[\"C\"]) {\r\n conditions.push({\r\n propName: \"MirrorShape\",\r\n propValue: \"24S\"\r\n });\r\n }\r\n }\r\n }\r\n }\r\n if (this.partId === \"vanity_backsplash\") {\r\n const activeSideMeta = vanityParent.getActiveMatchingMetaFromRelatedItem(vanityParent.vanity_type, \"Side\");\r\n if (activeSideMeta && activeSideMeta.includes(\"C\")) {\r\n conditions.push({\r\n propName: \"Side\",\r\n propValue: activeSideMeta\r\n });\r\n }\r\n }\r\n if (vanitySize && (getCurrentRoomType() === LOOK_ROOM_TYPES.as)\r\n && !(this.partId === \"vanity_countertop\" && vanityParent.vanity_type !== VANITY_TYPES.vanity_cabinet)) {\r\n conditions.push({\r\n propName: \"VanitySize\",\r\n propValue: vanitySize\r\n })\r\n }\r\n return conditions\r\n }\r\n\r\n}\r\n","export const VISUALIZER_MANAGEMENT_ACTIONS = {\r\n getState: \"getState\",\r\n checkState: \"checkState\",\r\n setState: \"setState\",\r\n visualizerIsLoaded: \"visualizerIsLoaded\",\r\n closeVisualizerNavigation: \"closeVisualizerNavigation\",\r\n visualizerIsSaved: \"visualizerIsSaved\",\r\n}\r\n","import {getBvGroupFeatures} from \"./server-api\";\r\nimport {getCurrentLayout} from \"../bvcomponents/appLayout\";\r\n\r\nlet axiosController;\r\n\r\n/**\r\n * renderErrorPopup can display retry connection and sign contract buttons\r\n * @param featureGroup {object}\r\n * @param searchText {string}\r\n * @param setShowLoader {function}\r\n */\r\nexport const searchProductRequest = async (featureGroup, searchText, setShowLoader = () => {}) => {\r\n if (!searchText || !featureGroup || featureGroup.getRealFeaturesReceivedProperty()\r\n || (Array.isArray(featureGroup.alreadyRequestedFeatureNames) && featureGroup.alreadyRequestedFeatureNames.includes(searchText))\r\n ) {\r\n return false\r\n }\r\n setShowLoader(true);\r\n if (axiosController) {\r\n axiosController.abort();\r\n }\r\n if (AbortController) {\r\n axiosController = new AbortController();\r\n }\r\n const dbName = featureGroup.dbName || featureGroup.partName;\r\n const pageSize = 9999;\r\n if (document.kvConfig.visualizerType === \"bvLook\") {\r\n const layout = getCurrentLayout();\r\n const wallParent = layout.parts[\"Walls\"];\r\n if (featureGroup.additionalPartPartId && wallParent && wallParent.relatedItems.some(relItem => relItem.partId === featureGroup.partId)) {\r\n const cropResponse = await getBvGroupFeatures(dbName + \" Crop\", 0, pageSize, [], searchText, null, axiosController);\r\n if (Array.isArray(cropResponse)) {\r\n featureGroup.setGroupFeatures(cropResponse, pageSize, false, \"\", null, true, false);\r\n }\r\n }\r\n }\r\n const response = await getBvGroupFeatures(dbName, 0, pageSize, [], searchText, null, axiosController)\r\n if (response) {\r\n featureGroup.setGroupFeatures(response, pageSize, false, \"\", null, true);\r\n }\r\n if (!featureGroup.alreadyRequestedFeatureNames) {\r\n featureGroup.alreadyRequestedFeatureNames = [];\r\n }\r\n featureGroup.alreadyRequestedFeatureNames.push(searchText);\r\n setShowLoader(false);\r\n return response ? response.data : []\r\n}\r\n","import flatten from \"lodash/flatten\";\r\n\r\nimport {loaderDisable, loaderEnable} from \"../bvcomponents/ui/loaderView\";\r\nimport {getCurrentLayout} from \"../bvcomponents/appLayout\";\r\nimport {getBathroomVisualizerData, getBvGroupFeatures, getBvGroups, getQtCategories} from \"../api/server-api\";\r\nimport Config from \"../config\";\r\nimport store from \"../store\";\r\nimport {setWizardIsActive} from \"../actions/wizardFunctions\";\r\nimport {addVisualizersLoaded, updateCanvasCount} from \"../actions/actionFunctions\";\r\nimport {getParsedWizardList} from \"../bvcomponents/look/lookNavigation/lookMain/lookWizard/lookWizardFunctions2\";\r\n\r\nexport const loadAdditionalVisualizerGroups = async (visualizerType) => {\r\n switch (visualizerType) {\r\n case \"bvLook\": {\r\n const additionalFeatures = await Promise.all([\r\n getBvGroupFeatures(\"Decor\", 0, 2000, [], \"\", \"\", null, false, visualizerType),\r\n getBvGroupFeatures(\"Attachment\", 0, 2000, [], \"\", \"\", null, false, visualizerType),\r\n getBvGroupFeatures(\"Towel\", 0, 2000, [], \"\", \"\", null, false, visualizerType),\r\n ]);\r\n // console.log(\"additionalFeatures\", flatten(additionalFeatures));\r\n return flatten(additionalFeatures)\r\n }\r\n // to do add here Kitchen ? not sure\r\n default:\r\n return []\r\n }\r\n}\r\n\r\nexport const parseWizardResponse = (mainResponse, qtCategoriesResponse, visualizerType = null) => {\r\n const useWizard = (Array.isArray(qtCategoriesResponse) && qtCategoriesResponse.some(qtCat => qtCat.useWizard))\r\n // || !Array.isArray(qtCategoriesResponse) || !qtCategoriesResponse.length)\r\n && mainResponse && (mainResponse.wizardData || mainResponse.wizardDataV2)\r\n && getParsedWizardList(mainResponse, true).length > 0;\r\n store.dispatch(setWizardIsActive(useWizard, visualizerType));\r\n}\r\n\r\nconst loadVisualizer = async (visualizerType) => {\r\n try {\r\n window.requestInProcess = true;\r\n loaderEnable();\r\n const layout = getCurrentLayout(visualizerType);\r\n const mainResponse = await Promise.all([\r\n getBathroomVisualizerData(30, true, visualizerType),\r\n getQtCategories(layout.getCurrentLayoutAbbreviation(), visualizerType)\r\n ]);\r\n if (Config.isDevMode()) {\r\n console.log('loadVisualizer mainResponse-->', mainResponse);\r\n }\r\n const groupsResponse = await getBvGroups(visualizerType);\r\n if (Config.isDevMode()) {\r\n console.log('loadVisualizer groupsResponse-->', groupsResponse);\r\n }\r\n const additionalFeatures = await loadAdditionalVisualizerGroups(visualizerType);\r\n layout.loadNewFeatures(Object.assign({}, mainResponse[0], {\r\n features: [...mainResponse[0].features, ...additionalFeatures]\r\n }));\r\n layout.setGroupsItemsCount(groupsResponse.data);\r\n // if (qtCategories.length) { //todo the most painful part // reactivate needed\r\n // this.loadQtCategoriesFeatures(qtCategories); // load features from feature groups\r\n // }\r\n layout.createCustomConfigurations();\r\n layout.setGroupsItemsCount(groupsResponse.data); // not sure why we need it two items but ok, let it be\r\n layout.setDefaultFeatures();\r\n if (Array.isArray(mainResponse[1]) && mainResponse[1].length) {\r\n layout.setQtCategoriesSubparts(mainResponse[1]); // set QtCategories subParts(wait until defaults are set)\r\n // this.loadQtCategoriesFeatures(qtCategories); // load features from feature groups second time!!\r\n // after qtCategories are set (because we need partIdExistInQtCategory logic)\r\n }\r\n parseWizardResponse(mainResponse[0], mainResponse[1], visualizerType);\r\n // const needToLoadDefaultPreset = !document.kvConfig.jobId; // we should apply saved preset, we don't need the default one\r\n const needToLoadDefaultPreset = true; // we should apply this preset because if it's the first time - then it should apply\r\n if (needToLoadDefaultPreset && Array.isArray(mainResponse[0].defaults)) {\r\n const roomPreset = mainResponse[0].defaults.find(preset => preset.loadByTheDefault);\r\n if (roomPreset) {\r\n const layout_type = +roomPreset.layout_type;\r\n const needToChangeLayout = (layout_type || layout_type === 0) && (layout_type !== +layout.type);\r\n if (needToChangeLayout) {\r\n // await this.changeLayout(layout_type, true)\r\n }\r\n await layout.setItemsFromBvState(\r\n roomPreset, false, (bvState) => bvState, true, visualizerType\r\n )\r\n }\r\n }\r\n\r\n layout.initialized = true;\r\n console.log(\"new layout initialized\", layout);\r\n window.requestInProcess = false;\r\n store.dispatch(addVisualizersLoaded(layout.visualizerType));\r\n store.dispatch(updateCanvasCount());\r\n\r\n return true\r\n\r\n } catch (error) {\r\n loaderDisable();\r\n console.log(\"error\", error);\r\n return false\r\n }\r\n}\r\n\r\nexport default loadVisualizer\r\n","import React from \"react\";\r\nimport PropTypes from \"prop-types\";\r\nimport { connect } from \"react-redux\";\r\nimport {FormattedMessage} from \"react-intl\";\r\n\r\nimport MenuItem from '@mui/material/MenuItem';\r\nimport MenuList from '@mui/material/MenuList';\r\nimport ListItemIcon from '@mui/material/ListItemIcon';\r\nimport SvgIcon from \"@mui/material/SvgIcon\";\r\nimport TwitterIcon from '@mui/icons-material/Twitter';\r\n\r\nimport {LookShareIcons} from \"../../../../common/icons\";\r\nimport {setLookOverlayOpened, setLookReturnAction} from \"../../../../../actions/lookFunctions\";\r\nimport {LOOK_OVERLAYS} from \"../../../core/constants\";\r\nimport {saveQuoteAndShare} from \"../../lookFunctions2\";\r\nimport Analytics, {LOOK_JOURNEY_ANALYTIC_EVENTS} from \"../../../../../analytics\";\r\nimport {pricingIsLocked} from \"../../lookNavigationFunctions\";\r\n\r\nexport const SHARE_BUTTONS = {\r\n facebook: \"facebook\",\r\n pinterest: \"pinterest\",\r\n twitter: \"twitter\",\r\n}\r\n\r\nexport const getShareConfig = ({height, width}) => {\r\n const left = window.outerWidth / 2 + (window.screenX || window.screenLeft || 0) - width / 2;\r\n const top = window.outerHeight / 2 + (window.screenY || window.screenTop || 0) - height / 2;\r\n const config = {\r\n height: height,\r\n width: width,\r\n left: left,\r\n top: top,\r\n location: 'no',\r\n toolbar: 'no',\r\n status: 'no',\r\n directories: 'no',\r\n menubar: 'no',\r\n scrollbars: 'yes',\r\n resizable: 'no',\r\n centerscreen: 'yes',\r\n chrome: 'yes'\r\n }\r\n return Object.keys(config).map(key => key + '=' + config[key]).join(', ');\r\n};\r\n\r\nconst LookSideBarShareButtons = (props) => {\r\n\r\n const {handleClose, userIsLoggedIn, propsShareUrl, setLookOverlayOpened, setLookReturnAction} = props;\r\n\r\n const shareClickButton = (buttonKey) => {\r\n switch (buttonKey) {\r\n case SHARE_BUTTONS.facebook:\r\n Analytics.sendClickEvent(LOOK_JOURNEY_ANALYTIC_EVENTS.lookSidebarFacebook);\r\n break;\r\n case SHARE_BUTTONS.twitter:\r\n Analytics.sendClickEvent(LOOK_JOURNEY_ANALYTIC_EVENTS.lookSidebarTwitter);\r\n break;\r\n case SHARE_BUTTONS.pinterest:\r\n Analytics.sendClickEvent(LOOK_JOURNEY_ANALYTIC_EVENTS.lookSidebarPinterest);\r\n break;\r\n default:\r\n break;\r\n }\r\n if (!userIsLoggedIn) {\r\n const {isLixil} = pricingIsLocked();\r\n if (isLixil) {\r\n setLookOverlayOpened(LOOK_OVERLAYS.questionShare);\r\n setLookReturnAction(buttonKey);\r\n } else {\r\n setLookOverlayOpened(LOOK_OVERLAYS.leadCapture, buttonKey);\r\n }\r\n return false;\r\n }\r\n\r\n handleClose();\r\n // if (jobId) {\r\n // shareLogic(buttonKey)\r\n // } else {\r\n saveQuoteAndShare(buttonKey, propsShareUrl);\r\n // }\r\n }\r\n\r\n return (\r\n \r\n {this.props.valueText}\r\n {this.props.value ? (\r\n {this.getSelectText(this.props.value)}\r\n ) : null}\r\n
\r\n \r\n
\r\n - \r\n {this.props.children || this.props.selectItems.map((selectItem, index) => {\r\n return (\r\n
- this.handleItemClick(selectItem)}\r\n className={baseClass+\"__dropdown-list-item\"}>\r\n {this.getSelectText(selectItem.text || selectItem)}\r\n \r\n )\r\n })}\r\n
\r\n {this.props.switchers.includes(2) ? (\r\n \r\n ) : null}\r\n {this.props.switchers.includes(3) ? (\r\n \r\n ) : null}\r\n {this.props.switchers.includes(4) ? (\r\n \r\n ) : null}\r\n
\r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = (store) => ({\r\n navigationViewType: store.navigationState.navigationViewType,\r\n});\r\n\r\nconst mapDispatchToProps = {\r\n setNavigationViewType\r\n};\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(SelectionMobileViewSwitchers);","import React, {useCallback} from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport PropTypes from \"prop-types\";\r\nimport $ from \"jquery\";\r\nimport {FormattedMessage, injectIntl} from \"react-intl\";\r\n\r\nimport IconButton from \"@mui/material/IconButton\";\r\nimport Button from \"@mui/material/Button\";\r\nimport DeleteIcon from \"@mui/icons-material/Delete\";\r\nimport DeleteForeverIcon from \"@mui/icons-material/DeleteForever\";\r\nimport FormControlLabel from '@mui/material/FormControlLabel';\r\nimport Switch from '@mui/material/Switch';\r\n\r\nimport {checkIfFeatureDisabled, navFeatureCLick} from \"../lookFunctions\";\r\nimport {updateCanvasCount} from \"../../../../actions/actionFunctions\";\r\nimport {featureInterface} from \"../../../../interfaces/featureInterface\";\r\nimport {disableFeature, enableRelatedFeature} from \"../lookFunctions2\";\r\nimport {setLookOverlayOpened, setLookStylePopup} from \"../../../../actions/lookFunctions\";\r\nimport {LOOK_OVERLAYS} from \"../../core/constants\";\r\nimport {IS_LIXIL_UI, IS_PRODUCT_JOURNEY, IS_QKB_UI} from \"../../../../config\";\r\n\r\nimport {getCurrentLayout} from \"../../../appLayout\";\r\nimport Analytics, {LOOK_JOURNEY_ANALYTIC_EVENTS, PRODUCT_JOURNEY_ANALYTIC_EVENTS} from \"../../../../analytics\";\r\nimport {getFeatureIsLocked} from \"../../../../misc/helpers\";\r\nimport WithUpdateLookCartItem from \"../../hocs/withUpdateLookCartItem\";\r\nimport ActionTypes from \"../../../../misc/actionTypes\";\r\n\r\nconst LookFeatureRemoveButton = (props) => {\r\n\r\n const {lookFeature, updateCanvasCount, isIcon, isList, isToggle, intl, setLookOverlayOpened, setLookStylePopup,\r\n text, updateLookCartItem, refreshItems} = props;\r\n\r\n const parent = lookFeature.getParent();\r\n const alreadyDisabled = checkIfFeatureDisabled(lookFeature, parent);\r\n const featureIsLocked = getFeatureIsLocked(lookFeature);\r\n\r\n const updateForOldUI = useCallback(() => {\r\n if (!IS_QKB_UI) {\r\n return\r\n }\r\n $(window).trigger(ActionTypes.CHANGE_LAYOUT); // update canvas\r\n if (refreshItems) {\r\n refreshItems();// update navigation (non compatible)\r\n }\r\n }, [refreshItems]);\r\n\r\n const deleteButtonClick = async () => {\r\n if (alreadyDisabled) {\r\n return false\r\n }\r\n\r\n if (IS_LIXIL_UI) {\r\n const featureLabel = Analytics.getSkuForAnalytics(lookFeature);\r\n Analytics.sendClickEvent(IS_PRODUCT_JOURNEY\r\n ? PRODUCT_JOURNEY_ANALYTIC_EVENTS.productFeatureRemove + featureLabel\r\n : LOOK_JOURNEY_ANALYTIC_EVENTS.lookFeatureRemove + featureLabel\r\n );\r\n\r\n if (featureIsLocked) {\r\n setLookOverlayOpened(LOOK_OVERLAYS.leadCapture);\r\n return false\r\n }\r\n }\r\n\r\n const layout = getCurrentLayout();\r\n if (document.kvConfig.visualizerType === \"bvLook\") {\r\n switch (lookFeature.partId) {\r\n case \"vanity_faucet\":\r\n case \"vanity_sink\": {\r\n if (IS_PRODUCT_JOURNEY) {\r\n if (lookFeature.partId === \"vanity_sink\") {\r\n const relatedFeatureGroup = layout.getFeatureGroupByPartId(\"vanity_faucet\");\r\n if (relatedFeatureGroup && !relatedFeatureGroup.disabled && relatedFeatureGroup.activeFeature\r\n && (!relatedFeatureGroup.activeFeature.metaData[\"MountType\"] || !relatedFeatureGroup.activeFeature.metaData[\"MountType\"].includes('U'))) {\r\n // Turning off the faucet should not turn off the sink or countertop, but turning of the sink should turn off the faucet (*unless it’s a wall mount faucet)\r\n disableFeature(relatedFeatureGroup.activeFeature, updateLookCartItem);\r\n }\r\n }\r\n break;\r\n }\r\n const parent = layout.getSubPartByPartId(lookFeature.partId === \"vanity_faucet\" ? \"vanity_sink\" : \"vanity_faucet\");\r\n if (IS_LIXIL_UI && parent && lookFeature.metaData[\"layerPosition\"] && parent.part.layerPositions[lookFeature.metaData.layerPosition]) {\r\n setLookOverlayOpened(LOOK_OVERLAYS.styleRemoveFeature);\r\n // setLookRemovePopup({\r\n // fromFeature: lookFeature\r\n // });\r\n setLookStylePopup({\r\n notMatchingFeatures: [parent.part.layerPositions[lookFeature.metaData.layerPosition]]\r\n });\r\n return false\r\n }\r\n break;\r\n }\r\n case \"toilet\": {\r\n [\"toilet_brush\", \"paper_holder\"].forEach(partId => {\r\n const relatedFeatureGroup = layout.getFeatureGroupByPartId(partId);\r\n if (relatedFeatureGroup && !relatedFeatureGroup.disabled && relatedFeatureGroup.activeFeature) {\r\n disableFeature(relatedFeatureGroup.activeFeature, updateLookCartItem);\r\n }\r\n })\r\n break;\r\n }\r\n default:\r\n break;\r\n }\r\n }\r\n\r\n await disableFeature(lookFeature, updateLookCartItem);\r\n updateCanvasCount(); // update canvas and self component\r\n updateForOldUI(); // update canvas with jquery ommmg\r\n };\r\n\r\n const turnOnClick = () => {\r\n const featureLabel = Analytics.getSkuForAnalytics(lookFeature);\r\n Analytics.sendClickEvent(IS_PRODUCT_JOURNEY\r\n ? PRODUCT_JOURNEY_ANALYTIC_EVENTS.productFeatureEnable + featureLabel\r\n : LOOK_JOURNEY_ANALYTIC_EVENTS.lookFeatureEnable + featureLabel\r\n );\r\n\r\n if (parent.disabled) {\r\n parent.disabled = false;\r\n parent.disabledClick();\r\n }\r\n navFeatureCLick(lookFeature);\r\n enableRelatedFeature(lookFeature, null, null);\r\n updateCanvasCount(); // update canvas and self component\r\n updateForOldUI(); // update canvas with jquery ommmg\r\n }\r\n\r\n if (isIcon) {\r\n return (\r\n \r\n \r\n \r\n \r\n
\r\n )}\r\n \r\n {this.getBackplashTypes().map(backsplashType => {\r\n const isActive = currentType === backsplashType;\r\n return (\r\n \r\n )\r\n })}\r\n
\r\n \r\n \r\n {/**/}\r\n {/* */}\r\n
\r\n \r\n )}\r\n \r\n this.swipableElement = node}\r\n className={this.props.className + \" swipable\" + (this.state.swipeActive ? \" swipable--active\" : \"\")}\r\n onMouseDown={this.handleOnMouseDown}\r\n onMouseMove={this.handleOnMouseMove}\r\n onMouseLeave={this.handleOnMouseUp}\r\n onMouseUp={this.handleOnMouseUp}>\r\n {this.props.children}\r\n
\r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = (store) => {\r\n return {\r\n navigationLoadingActive: store.navigationState.navigationLoadingActive,\r\n isMobile: store.serverState.isMobile,\r\n }\r\n};\r\n\r\nconst mapDispatchToProps = {};\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(BodySwipable);\r\n","import React, {useEffect, useState} from \"react\"\r\nimport PropTypes from \"prop-types\";\r\n\r\nimport {getImagePromiseFromLayout} from \"../../misc/getCanvasImageFromLayout\";\r\nimport LoadingSpinner from \"../ui/loadingSpinner\";\r\nimport {useIsMounted} from \"../../misc/helperHooks\";\r\nimport {createFakeLayout} from \"../appLayout\";\r\n\r\nconst LayoutNavigationItem = (props) => {\r\n\r\n const {keyType, layout, handleLayoutItemClick, isMobile, imageOnly} = props;\r\n const type = layout.layoutTypes[keyType];\r\n const [thumbnailUrl, setThumbnailUrl] = useState(\r\n layout.layoutThumbnails && layout.layoutThumbnails[keyType] ? layout.layoutThumbnails[keyType] : \"\"\r\n );\r\n const isMounted = useIsMounted();\r\n\r\n useEffect(() => {\r\n if (!thumbnailUrl) {\r\n const getLayoutThumbnail = async () => {\r\n const fakeLayout = layout.type === type ? layout : createFakeLayout(layout, keyType, layout.scene);\r\n if (layout.type !== type) {\r\n const currentState = layout.getActiveFeaturesAsObject(true, false, true); // get current selected features\r\n await fakeLayout.selectLayout(type, layout.type, currentState, layout.scene, null, true);\r\n }\r\n getImagePromiseFromLayout(fakeLayout)\r\n .then(response => {\r\n // console.log(\"response\", response);\r\n if (isMounted()) {\r\n setThumbnailUrl(response);\r\n }\r\n })\r\n\r\n }\r\n getLayoutThumbnail();\r\n }\r\n }, []); // eslint-disable-line react-hooks/exhaustive-deps\r\n\r\n if (imageOnly) {\r\n return \r\n
\r\n );\r\n\r\n // onDesktopNavigationScroll = ({clientHeight, clientWidth, scrollHeight, scrollLeft, scrollTop, scrollWidth}) => {\r\n onDesktopNavigationScroll = ({clientWidth, scrollLeft, scrollWidth}) => {\r\n // console.log(\"clientHeight\", clientHeight);\r\n // console.log(\"clientWidth\", clientWidth);\r\n // console.log(\"scrollHeight\", scrollHeight);\r\n // console.log(\"scrollLeft\", scrollLeft);\r\n // console.log(\"scrollTop\", scrollTop);\r\n // console.log(\"scrollWidth\", scrollWidth);\r\n // console.log(\"=================\");\r\n if ((scrollWidth - Math.ceil(scrollLeft) === clientWidth) || (scrollWidth - Math.floor(scrollLeft) === clientWidth)) {\r\n this.getNewFeaturesOnScroll(scrollLeft);\r\n }\r\n };\r\n\r\n onMobileNavigationScroll = ({clientHeight, scrollHeight, scrollTop}) => {\r\n if ((scrollHeight - Math.ceil(scrollTop) === clientHeight) || (scrollHeight - Math.floor(scrollTop) === clientHeight)) {\r\n this.getNewFeaturesOnScroll(scrollTop)\r\n }\r\n };\r\n\r\n getFeaturesFromBackendWithFilters = (childItem, counterTopFiltersIdsReceived, finalScrollPosition = 1, existingFilterObject = null) => {\r\n const filterObject = existingFilterObject || {\r\n uuid: uuid.v4(),\r\n filterIds: counterTopFiltersIdsReceived, // array of arrays, ex. [[56],[1122,1313]] etc.\r\n featuresReceived: 0,\r\n page: 0\r\n };\r\n if (!existingFilterObject) {\r\n childItem.filterIdsReceived.push(filterObject);\r\n }\r\n\r\n const featuresCountToReceive = 5000;\r\n\r\n if (!this.featureReceivingStarted) {\r\n this.setState({\r\n additionalFeaturesLoading: true\r\n });\r\n this.featureReceivingStarted = true;\r\n getBvGroupFeatures(\r\n childItem.dbName || childItem.partName,\r\n filterObject.page,\r\n featuresCountToReceive,\r\n counterTopFiltersIdsReceived\r\n )\r\n .then((response) => {\r\n if (response && response.length) {\r\n console.log(\"response.data with filters\", response);\r\n childItem.setGroupFeatures(response, featuresCountToReceive, false);\r\n childItem.filterIdsReceived = childItem.filterIdsReceived.map((filtersReceivedObject) => {\r\n if (filtersReceivedObject.uuid === filterObject.uuid) {\r\n filtersReceivedObject.featuresReceived += response.length;\r\n if (response.length < featuresCountToReceive) {\r\n filtersReceivedObject.allFeaturesWithFiltersReceived = true;\r\n } else {\r\n filtersReceivedObject.page++;\r\n }\r\n }\r\n return filtersReceivedObject\r\n });\r\n }\r\n this.finishScrollRequest(finalScrollPosition);\r\n });\r\n }\r\n };\r\n\r\n finishScrollRequest = (finalScrollPosition, shouldUpdateNavItems = true) => {\r\n this.setState({\r\n additionalFeaturesLoading: false\r\n }, () => {\r\n if (shouldUpdateNavItems) {\r\n this.needToUpdate = finalScrollPosition;\r\n this.props.parentUpdate();\r\n }\r\n this.featureReceivingStarted = false;\r\n });\r\n }\r\n\r\n getNewFeaturesOnScroll = async (finalScrollPosition, parentItemPassed = null) => {\r\n\r\n const {useNewWizardFeaturesRequestsLogic, wizardGroup, currentParent} = this.props;\r\n\r\n if (useNewWizardFeaturesRequestsLogic) {\r\n if (this.featureReceivingStarted || currentParent.requestInProgress) {\r\n return;\r\n }\r\n this.featureReceivingStarted = true;\r\n this.setState({\r\n additionalFeaturesLoading: true\r\n });\r\n getMissingWizardFeatures(this.state.reorderedFeatures, wizardGroup, currentParent)\r\n .then(shouldUpdateNavItems => this.finishScrollRequest(finalScrollPosition, shouldUpdateNavItems));\r\n return;\r\n }\r\n\r\n const parentItem = parentItemPassed || this.props.childItem || this.props.parentItem;\r\n if (!parentItem.part) {\r\n return\r\n }\r\n if (this.props.selectedFilters.length) {\r\n const checkPassed = checkIfNeedToReceiveFeaturesIfFiltersApplied(this.props.selectedFilters, parentItem.part, true);\r\n console.log(\"checkPassed\", checkPassed);\r\n if (checkPassed) {\r\n this.getFeaturesFromBackendWithFilters(parentItem.part, checkPassed.filterIds, finalScrollPosition, checkPassed);\r\n }\r\n return\r\n }\r\n if (!parentItem.part.getRealFeaturesReceivedProperty() && !this.featureReceivingStarted) {\r\n this.featureReceivingStarted = true;\r\n this.setState({\r\n additionalFeaturesLoading: true\r\n });\r\n\r\n const additionalFeaturesOnScroll = await getAdditionalFeaturesOnScroll(parentItem.part);\r\n if (Config.isDevMode()) {\r\n console.log(\"additionalFeaturesOnScroll\", additionalFeaturesOnScroll);\r\n }\r\n\r\n this.finishScrollRequest(finalScrollPosition);\r\n }\r\n };\r\n\r\n}\r\n","import {Component} from 'react';\r\nimport $ from \"jquery\";\r\n\r\nimport Analytics from \"../../analytics\";\r\nimport {getCurrentLayout} from \"../appLayout\";\r\nimport {changeQTRoutePath, changeRoutePath} from \"../../misc/changeRoutePath\";\r\nimport store from \"../../store\";\r\nimport {featureIsMatchingQtCatName} from \"../../misc/categorySwitchingFunctions\";\r\nimport {showWizardInsteadOfQT} from \"../look/lookNavigation/lookMain/lookWizard/lookWizardFunctions\";\r\nimport {switchToWizardItem} from \"../qkbPages/materialsWizard/useChangeWizardStepRoute\";\r\n\r\nexport default class CommonFeatureItemsMethods extends Component {\r\n\r\n // this method is NOT used by SelectionMainList, only visualizers desktop & mobile navigations\r\n switchToFeatureInfo = (feature, analyticsLabel, setCameFromPage = \"shoppingcart\", scrollToRelatedFeatureId = null, fromCartItem = null) => {\r\n\r\n Analytics.sendClickEvent(analyticsLabel);\r\n const featureInfo = feature.part || feature;\r\n const featureParent = featureInfo.getParent();\r\n const selectionGroup = featureParent.getParent ? featureParent.getParent().partName : featureParent.partName;\r\n const {fabricatorState, wizardState} = store.getState();\r\n const {wizardList, wizardIsActive} = wizardState;\r\n\r\n const visType = fabricatorState.settings.allowVisualizerSwitching && fromCartItem && fromCartItem.fromVisualizerType\r\n ? fromCartItem.fromVisualizerType\r\n : document.kvConfig.visualizerType;\r\n const layout = getCurrentLayout(visType);\r\n\r\n const setCommonStuff = () => {\r\n this.props.toggleSelectionWindow(true, selectionGroup);\r\n this.props.toggleSelectionFeatureInfo(featureInfo, true);\r\n if (setCameFromPage === \"visualizer\") {\r\n this.props.toggleBathroomVisualizerOpen(false);\r\n }\r\n this.props.setCameFromPage(setCameFromPage);\r\n }\r\n\r\n if (showWizardInsteadOfQT(wizardList, wizardIsActive)) {\r\n if (fromCartItem && fromCartItem.fromWizardId) {\r\n const wizardItem = wizardList.find(wizItem => wizItem.id === fromCartItem.fromWizardId);\r\n if (wizardItem) {\r\n setCommonStuff();\r\n switchToWizardItem(wizardItem, fromCartItem.fromWizardStep, fromCartItem.currentQuote, fromCartItem.fromWizardGroupId);\r\n return;\r\n }\r\n }\r\n const wizardItem = wizardList[0];\r\n if (wizardItem) {\r\n setCommonStuff();\r\n switchToWizardItem(wizardItem);\r\n }\r\n return\r\n }\r\n\r\n let nextCatName = \"\";\r\n\r\n // /* set new index*/\r\n let nextSubPartIndex = 0;\r\n if (featureParent.getParent) {\r\n if (layout.qtCategories\r\n && fabricatorState.settings.useCategorySwitching\r\n && layout.qtCategories.filter(qtCat => qtCat.subParts.some(subPart => subPart.part.partId === featureInfo.partId)).length > 1\r\n && fromCartItem\r\n && layout.qtCategories.find(qtCategory => featureIsMatchingQtCatName(fromCartItem.cartFeature, qtCategory.name, true))) {\r\n const neededCat = layout.qtCategories.find(qtCategory => featureIsMatchingQtCatName(fromCartItem.cartFeature, qtCategory.name, true));\r\n nextCatName = neededCat.name;\r\n nextSubPartIndex = neededCat.subParts.findIndex(subPart => subPart.part.partId === featureInfo.partId);\r\n } else if (layout.qtCategories && fromCartItem && fromCartItem.fromQtCategory\r\n && layout.qtCategories.find(qtCategory => qtCategory.name === fromCartItem.fromQtCategory)) {\r\n nextCatName = fromCartItem.fromQtCategory;\r\n this.props.setQtActiveCategory(fromCartItem.fromQtCategory);\r\n const qtActiveCategory = layout.qtCategories.find(qtCategory => qtCategory.name === fromCartItem.fromQtCategory);\r\n nextSubPartIndex = qtActiveCategory.subParts.findIndex(subPart => {\r\n return (subPart.part.dbName === featureParent.partName) || (subPart.part.partName === featureParent.partName)\r\n });\r\n if ((!nextSubPartIndex || nextSubPartIndex < 0) && qtActiveCategory.qtCategoryHasBeenChanged) {\r\n [\"countertop\", \"edge\", \"faucet\", \"sink\", \"stovetop\"].forEach(partId => {\r\n if (featureParent.partId.includes(partId)) {\r\n nextSubPartIndex = qtActiveCategory.subParts.findIndex(subPart => subPart.part.partId.includes(partId));\r\n }\r\n })\r\n }\r\n } else if (layout.qtCategories && featureParent.qtCategoryName) {\r\n this.props.setQtActiveCategory(featureParent.qtCategoryName);\r\n const qtActiveCategory = layout.qtCategories.find(qtCategory => qtCategory.name === featureParent.qtCategoryName);\r\n nextSubPartIndex = qtActiveCategory.subParts.findIndex(subPart => {\r\n return (subPart.part.dbName === featureParent.partName) || (subPart.part.partName === featureParent.partName)\r\n });\r\n if ((!nextSubPartIndex || nextSubPartIndex < 0) && qtActiveCategory.qtCategoryHasBeenChanged) {\r\n [\"countertop\", \"edge\", \"faucet\", \"sink\", \"stovetop\"].forEach(partId => {\r\n if (featureParent.partId.includes(partId)) {\r\n nextSubPartIndex = qtActiveCategory.subParts.findIndex(subPart => subPart.part.partId.includes(partId));\r\n }\r\n })\r\n }\r\n } else {\r\n const subParts = featureParent.getParent().subParts(false); // we don't need not visible subParts on the materials page\r\n const featureParentName = featureParent.partName.replace(/ /g,\"-\").toLowerCase();\r\n nextSubPartIndex = subParts.findIndex(subPartItem => {\r\n return subPartItem.part.partName.replace(/ /g,\"-\").toLowerCase() === featureParentName\r\n });\r\n }\r\n }\r\n\r\n if (!nextSubPartIndex || nextSubPartIndex < 0) {\r\n nextSubPartIndex = 0;\r\n }\r\n\r\n this.props.changeActivePartRelatedItemIndex(nextSubPartIndex);\r\n setCommonStuff();\r\n if (!window.location.href.includes('materials')) {\r\n if (layout.qtCategories && nextCatName) {\r\n changeQTRoutePath(nextCatName, nextSubPartIndex);\r\n } else if (layout.qtCategories && featureParent.qtCategoryName) {\r\n changeQTRoutePath(featureParent.qtCategoryName, nextSubPartIndex);\r\n } else {\r\n changeRoutePath(featureParent.getParent ? featureParent.getParent() : featureParent, nextSubPartIndex)\r\n }\r\n }\r\n if (scrollToRelatedFeatureId) {\r\n setTimeout(() => {\r\n const $scrollableDiv = $(\".selection-main__info-scrollable\");\r\n const scrollToArea = document.querySelector(\".prod-associated\");\r\n const scrollToDiv = document.querySelector('[data-feature-id=\"'+scrollToRelatedFeatureId+'\"]');\r\n if ($scrollableDiv && scrollToArea && scrollToDiv) {\r\n const scrollTop = scrollToArea.offsetTop + scrollToDiv.offsetTop;\r\n // console.log(\"scrolling to div\", scrollTop);\r\n $scrollableDiv.animate({scrollTop}, 800);\r\n }\r\n }, 0);\r\n }\r\n };\r\n\r\n}\r\n","import React from 'react';\r\nimport {connect} from 'react-redux';\r\nimport PropTypes from 'prop-types';\r\nimport {getEventPosition} from \"../../../../misc/helpers\";\r\n\r\nclass BodySwipable extends React.Component {\r\n\r\n static propTypes = {\r\n className: PropTypes.string,\r\n scrollableSelector: PropTypes.string.isRequired,\r\n children: PropTypes.any.isRequired,\r\n }\r\n\r\n static defaultProps = {\r\n className: \"\",\r\n };\r\n\r\n constructor(props) {\r\n super(props);\r\n // this.swipableElement = null;\r\n this.scrollableElement = null;\r\n this._isMounted = false;\r\n this.currentScrollLeft = 0;\r\n this.x = 0;\r\n this.y = 0;\r\n this.delta = 0;\r\n this.swipeActive = false;\r\n this.detectedSwipeLeft = false;\r\n this.detectedSwipeRight = false;\r\n this.state = {\r\n swipeActive: false\r\n };\r\n }\r\n\r\n componentDidMount() {\r\n this._isMounted = true;\r\n this.scrollableElement = this.getScrolllableElement();\r\n }\r\n componentWillUnmount() {\r\n this._isMounted = false;\r\n }\r\n getScrolllableElement = () => {\r\n return this.props.scrollableRef && this.props.scrollableRef.current\r\n ? this.props.scrollableRef.current\r\n : document.querySelector(this.props.scrollableSelector);\r\n }\r\n\r\n handleOnMouseDown = (event) => {\r\n const {x, y} = getEventPosition(event);\r\n setTimeout(() => {\r\n if (!this._isMounted) {\r\n return false\r\n }\r\n this.x = x;\r\n this.y = y;\r\n this.swipeActive = true;\r\n this.detectedSwipeLeft = false;\r\n this.detectedSwipeRight = false;\r\n this.setState({\r\n swipeActive: true\r\n });\r\n if (!this.scrollableElement) {\r\n this.scrollableElement = this.getScrolllableElement();\r\n }\r\n this.currentScrollLeft = this.scrollableElement.scrollLeft;\r\n }, 0);\r\n };\r\n\r\n handleOnMouseMove = (event) => {\r\n if (this.swipeActive) {\r\n const {x, y} = getEventPosition(event);\r\n const tX = parseFloat((x - this.x).toFixed(2));\r\n const tY = parseFloat((y - this.y).toFixed(2));\r\n // console.log('tX', tX);\r\n\r\n if (!this.detectedSwipeRight || !this.detectedSwipeLeft) {\r\n if (Math.abs(parseFloat(tX)) >= this.delta) {\r\n if (parseFloat(tX) > this.delta) {\r\n this.detectedSwipeRight = true;\r\n } else if (parseFloat(tX) < -this.delta) {\r\n this.detectedSwipeLeft = true;\r\n }\r\n }\r\n }\r\n\r\n if ((this.detectedSwipeLeft || this.detectedSwipeRight) && Math.abs(tX) > Math.abs(tY)) {\r\n // console.log(\"this.detectedSwipeLeft\", this.detectedSwipeLeft);\r\n // console.log(\"this.detectedSwipeRight\", this.detectedSwipeRight);\r\n // console.log('Math.abs(tX)', Math.abs(tX));\r\n const scrollLeft = this.detectedSwipeLeft\r\n ? this.currentScrollLeft + Math.abs(tX)\r\n : this.currentScrollLeft - Math.abs(tX);\r\n // this.$scrollableElement.animate({scrollLeft}, 500);\r\n this.scrollableElement.scrollLeft = scrollLeft;\r\n }\r\n }\r\n };\r\n\r\n handleOnMouseUp = () => {\r\n setTimeout(() => {\r\n if (!this._isMounted) {\r\n return false\r\n }\r\n this.x = 0;\r\n this.y = 0;\r\n this.swipeActive = false;\r\n this.detectedSwipeLeft = false;\r\n this.detectedSwipeRight = false;\r\n this.setState({\r\n swipeActive: false\r\n })\r\n }, 0)\r\n };\r\n\r\n render() {\r\n // const disallowSwipe = this.$scrollableElement && this.$scrollableElement[0] &&\r\n // (this.$scrollableElement[0].scrollWidth < this.$scrollableElement[0].clientWidth);\r\n if (this.props.isMobile) {\r\n return \r\n
\r\n \r\n \r\n
\r\n {this.props.children}
\r\n }\r\n return (\r\n \r\n {thumbnailUrl ? :
\r\n - \r\n
- \r\n \r\n email\r\n \r\n \r\n
- \r\n \r\n {/*
*/}\r\n {/**/}\r\n {/* */}\r\n \r\n - \r\n \r\n \r\n
- \r\n
\r\n \r\n \r\n \r\n {this.props.windowWidth >= 991 || dashboardFramed\r\n || (this.props.fabricatorData.checkout && this.props.goToCart && allPagesEnabled) ? null : (\r\n - \r\n
\r\n \r\n )}\r\n {/* - */}\r\n {/**/}\r\n {/* */}\r\n
- \r\n
- \r\n Email\r\n \r\n
- \r\n facebook\r\n \r\n
- \r\n pinterest\r\n \r\n
- \r\n Twitter\r\n \r\n
- */}\r\n {/*Houzz */}\r\n
\r\n \r\n {this.props.renderList ? this.getShareList() : this.getShareButtons()}\r\n
\r\n )\r\n }\r\n\r\n}\r\nconst mapStateToProps = (store) => ({\r\n fabricatorData: store.fabricatorState,\r\n windowWidth: store.serverState.windowWidth,\r\n visualizerTutorialStep: store.tutorialState.visualizerTutorialStep,\r\n isPhoneNumberValidated: store.userState.isPhoneNumberValidated,\r\n userIsLoggedIn: store.userState.userIsLoggedIn,\r\n shareUrl: store.serverState.shareUrl,\r\n});\r\nexport default connect(mapStateToProps, {\r\n toggleUserPopup\r\n})(ShareButton);\r\n","import React from \"react\";\r\nimport {connect} from \"react-redux\";\r\nimport PropTypes from \"prop-types\";\r\nimport {setMaterialsAgentTutorialFinished, showMaterialsAgentTutorial} from \"../../actions/tutorialFunctions\";\r\nimport WithPingPilotCheck from \"../look/hocs/withPingPilotCheck\";\r\n\r\nconst PingPilotButton = (props) => {\r\n\r\n const {design, showMaterialsAgentTutorial, setMaterialsAgentTutorialFinished, materialsAgentTutorialIsOpened,\r\n materialsAgentTutorialFinished, pingButton} = props;\r\n\r\n const pingButtonClick = () => {\r\n pingButton.click();\r\n if (materialsAgentTutorialIsOpened) {\r\n showMaterialsAgentTutorial(false);\r\n }\r\n if (!materialsAgentTutorialFinished) {\r\n setMaterialsAgentTutorialFinished(true);\r\n }\r\n }\r\n\r\n if (design === \"mainButton\") {\r\n return (\r\n \r\n )\r\n }\r\n\r\n return (\r\n \r\n )\r\n};\r\n\r\nPingPilotButton.propTypes = {\r\n design: PropTypes.string\r\n}\r\n\r\nconst mapStateToProps = (store) => {\r\n const {visualizersLoaded} = store.serverState;\r\n const {materialsAgentTutorialIsOpened, materialsAgentTutorialFinished} = store.tutorialState;\r\n return {\r\n visualizersLoadedLength: visualizersLoaded.length,\r\n materialsAgentTutorialIsOpened,\r\n materialsAgentTutorialFinished,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n showMaterialsAgentTutorial,\r\n setMaterialsAgentTutorialFinished,\r\n};\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(WithPingPilotCheck(PingPilotButton))\r\n\r\n","import React, {useEffect} from \"react\";\r\nimport {connect} from \"react-redux\";\r\nimport Config from \"../../../config\";\r\n\r\nexport default (WrappedComponent) => {\r\n\r\n const WithPingPilotCheck = (props) => {\r\n\r\n const {language, fabricatorData, jobId, encodedUserId, dialCode, phoneNumber, email} = props;\r\n\r\n useEffect(() => {\r\n if (!fabricatorData.usePingWidget || Config.isDevMode()) {\r\n return\r\n }\r\n let scriptAdded = document.getElementById(\"pingpilot\");\r\n if (!scriptAdded) {\r\n scriptAdded = document.createElement('script');\r\n scriptAdded.setAttribute('type','text/javascript');\r\n scriptAdded.setAttribute('id','pingpilot');\r\n scriptAdded.setAttribute('src','https://widget.pingpilot.com');\r\n scriptAdded.setAttribute('async','');\r\n // scriptAdded.setAttribute('data-signal','quotecountertopsdemo');\r\n scriptAdded.setAttribute('data-signal', fabricatorData.dataSignal || \"\");\r\n scriptAdded.setAttribute('data-fabricatorid', document.kvConfig.userId || \"\");\r\n // dynamic fields\r\n scriptAdded.setAttribute('data-language', language);\r\n scriptAdded.setAttribute('data-jobid', document.kvConfig.jobId || jobId || \"\");\r\n scriptAdded.setAttribute('data-clientid', encodedUserId || \"\");\r\n scriptAdded.setAttribute('data-clientemail', encodedUserId || \"\");\r\n scriptAdded.setAttribute('data-clientdialсode', encodedUserId || \"\");\r\n scriptAdded.setAttribute('data-clientphone', encodedUserId || \"\");\r\n document.body.appendChild(scriptAdded);\r\n } else {\r\n scriptAdded.setAttribute('data-language', language);\r\n scriptAdded.setAttribute('data-jobid', document.kvConfig.jobId || jobId || \"\");\r\n scriptAdded.setAttribute('data-clientid', encodedUserId || \"\");\r\n scriptAdded.setAttribute('data-clientemail', email || \"\");\r\n scriptAdded.setAttribute('data-clientdialсode', dialCode || \"\");\r\n scriptAdded.setAttribute('data-clientphone', phoneNumber || \"\");\r\n }\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [language, fabricatorData, jobId, encodedUserId]);\r\n\r\n let scriptAdded = document.getElementById(\"pingpilot\");\r\n if (!scriptAdded) {\r\n return null\r\n }\r\n\r\n const pingButton = document.querySelector(\".pingpilot-button\");\r\n if (!pingButton) {\r\n return null\r\n }\r\n\r\n return (\r\n \r\n
\r\n )\r\n};\r\n\r\nLookUserInput.propTypes = {\r\n property: PropTypes.string.isRequired,\r\n inputsValidated: PropTypes.bool.isRequired,\r\n shrink: PropTypes.bool,\r\n};\r\n\r\nconst mapStateToProps = (store) => {\r\n const {userInfo, userInfoErrors} = store.userState;\r\n return {\r\n userInfo,\r\n userInfoErrors,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n changeUserInfo,\r\n changeUserInfoErrors\r\n};\r\n\r\nexport default injectIntl(\r\n connect(mapStateToProps, mapDispatchToProps)(LookUserInput)\r\n)\r\n","import {useState} from \"react\";\r\n\r\nconst WithInputValidations = (props) => {\r\n\r\n const {children} = props;\r\n\r\n const [inputsValidated, setInputsValidated] = useState(true);\r\n\r\n const updateInputValidations = () => {\r\n setInputsValidated(false);\r\n return new Promise((resolve) => {\r\n setTimeout(() => {\r\n setInputsValidated(false);\r\n resolve()\r\n }, 300); // wait until redux store is updated with input Errors\r\n });\r\n };\r\n\r\n return children(inputsValidated, updateInputValidations)\r\n};\r\n\r\nexport default WithInputValidations\r\n","import React, {Component} from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport {connect} from \"react-redux\";\r\nimport {hashHistory} from \"react-router\";\r\nimport {withRouter} from \"react-router-dom\";\r\nimport {FormattedMessage} from \"react-intl\";\r\nimport sortBy from 'lodash/sortBy';\r\n\r\nimport {toggleUserPopup, changeStateToQuote} from \"../actions/actionFunctions\";\r\nimport {isIframe} from \"../misc/helpers\";\r\nimport ShoppingCartButton from \"./ui/shoppingCartButton\";\r\n// import UserLoginButton from \"./ui/userLoginButton\";\r\nimport InstallButton from \"./ui/installButton\";\r\nimport HomeButton from \"./ui/homeButton\";\r\nimport WebsiteButton from './ui/websiteButton';\r\nimport Analytics from './../analytics';\r\nimport {UserPopupTypes} from \"./visComponents/constants\";\r\nimport ShareButton from \"./common/shareButton\";\r\nimport ShoppingCartListSwitcher from \"./shoppingCart/shoppingCartListSwitcher\";\r\nimport LanguageSwitcher from \"./common/languageSwitcher\";\r\nimport AdvancedQuotingSwitcher from \"./shoppingCart/advancedQuoting/advancedQuotingSwitcher\";\r\nimport CloneQuoteButton from \"./popups/orderCompletePopup/cloneQuoteButton\";\r\nimport HideItemsSwitcher from \"./shoppingCart/hideItemsSwitcher\";\r\nimport FabricatorCostSwitcher from \"./shoppingCart/fabricatorCostSwitcher\";\r\nimport {getFabricatorLogo} from \"../misc/fabricatorHardcode\";\r\n// import PrintButton from \"./ui/printButton\";\r\n\r\nclass DesktopHeader extends Component {\r\n\r\n static propTypes = {\r\n uploadsAndNotes: PropTypes.bool,\r\n hideTopButtons: PropTypes.bool,\r\n };\r\n\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n subNavVisible: false\r\n };\r\n }\r\n\r\n componentDidMount = () => {\r\n\r\n };\r\n\r\n handleUserLoginClick = (userPopupType = UserPopupTypes.Unlock) => {\r\n const fabricatorSettings = this.props.fabricatorData.settings;\r\n\r\n if (this.props.userIsLoggedIn) {\r\n if (fabricatorSettings.twoFA) {\r\n if (!this.props.isPhoneNumberValidated) {\r\n this.props.toggleUserPopup({\r\n userPopupOpened: true,\r\n userPopupType\r\n });\r\n } else {\r\n this.toggleMobileButton('userLogoutActive');\r\n }\r\n } else {\r\n this.toggleMobileButton('userLogoutActive');\r\n }\r\n } else {\r\n this.props.toggleUserPopup({\r\n userPopupOpened: true,\r\n userPopupType\r\n });\r\n }\r\n };\r\n\r\n toggleMobileButton = (activeFeature) => {\r\n this.setState({\r\n [activeFeature]: !this.state[activeFeature]\r\n })\r\n };\r\n\r\n toggleSubNav = () => {\r\n Analytics.sendClickEvent('toggle-sub-nav');\r\n this.setState({subNavVisible: !this.state.subNavVisible})\r\n };\r\n\r\n handleLogoClick = () => {\r\n Analytics.sendClickEvent('logo-click');\r\n if (window.location.hash !== \"#/\" && !window.location.href.includes(\"quote-design\")) {\r\n hashHistory.push('/quote-design');\r\n }\r\n };\r\n\r\n render() {\r\n const fabricatorSettings = this.props.fabricatorData.settings;\r\n\r\n const allowInstallations = fabricatorSettings.addLaborCustomer\r\n || (document.kvConfig.isBackend && fabricatorSettings.addLaborInstaller);\r\n const showInstallations = allowInstallations && this.props.instList.length\r\n && (!this.props.showUnlockCalculations || (this.props.unlockCalculationsStep >= 2)) // tutorial\r\n && this.props.instList.some((instGroup) => instGroup.services.some(service => !service.autoAddWithProduct));\r\n\r\n const logoStyles = this.props.fabricatorData.logoUrl ? {} : {\r\n maxWidth: \"500px\",\r\n width: \"100%\"\r\n };\r\n\r\n const initialFlowIsRunning = document.kvConfig.initialFlowEnabled && this.props.initialFlowStep !== 3;\r\n const hideLogo = this.props.fabricatorData.received && this.props.fabricatorData.isLowes && isIframe();\r\n const isShoppingCartPage = this.props.location.pathname === \"/shoppingcart\";\r\n\r\n return (\r\n \r\n
\r\n )\r\n }\r\n\r\n renderSubNav = (nav) => {\r\n var _nav = sortBy(nav, n => n.displayOrder);\r\n return _nav.map(n => (\r\n \r\n {!this.props.hideTopButtons ? (\r\n
\r\n \r\n {this.props.uploadsAndNotes ? (\r\n
\r\n ) : null}\r\n {this.props.fabricatorData.received ? (\r\n \r\n \r\n \r\n
\r\n ) : null}\r\n \r\n {hideLogo ? null : }\r\n)
}\r\n
\r\n ) : null}\r\n {this.props.fabricatorData.received && !this.props.hideTopButtons ? (\r\n \r\n {fabricatorSettings.enableSharing ? : null}\r\n {isShoppingCartPage && !initialFlowIsRunning ?
\r\n ) : null}\r\n \r\n
\r\n - \r\n {this.renderSubNav(this.props.mobileNav)}\r\n
\r\n \r\n :\r\n {/*{IS_PRODUCT_JOURNEY ? \":\" : null}*/}\r\n {/*{activeFilterGroupValue && (IS_PRODUCT_JOURNEY) ? (*/}\r\n \r\n {activeFilterGroupValue ? (activeFilterGroupValue.displayText || activeFilterGroupValue.value).replace(\"GROHE \", \"\") : null}\r\n \r\n {/*) : null}*/}\r\n \r\n {/*{activeFilterGroupValue && !IS_PRODUCT_JOURNEY ? (*/}\r\n {/* */}\r\n {/* ({activeFilterGroupValue.displayText.replace(\"GROHE \", \"\")})*/}\r\n {/* */}\r\n {/*) : null}*/}\r\n \r\n {(maxClickCountReached) => (\r\n \r\n {(updateLookCartItem) => (\r\n \r\n )}\r\n \r\n
\r\n\r\n )\r\n};\r\n\r\nLookFeatureOptions.propTypes = {\r\n isWizard: PropTypes.bool,\r\n wizardGroup: PropTypes.shape(wizardGroupInterface),\r\n activeFeature: PropTypes.shape(featureInterface),\r\n}\r\n\r\nconst mapStateToProps = (store, ownProps) => {\r\n const {navigationCount, lookActiveFeaturePositionInList} = store.lookState;\r\n const storeActiveFeature = store.lookState.lookActiveFeature;\r\n const {filterGroups} = store.filterState;\r\n const {wizardActiveStep} = store.wizardState;\r\n const lookActiveFeature = ownProps.activeFeature || storeActiveFeature;\r\n const fabricatorData = store.fabricatorState;\r\n\r\n return {\r\n lookActiveFeature,\r\n lookActiveFeaturePositionInList,\r\n filterGroups,\r\n wizardActiveStep,\r\n lookActiveFeatureCustomName: lookActiveFeature ? lookActiveFeature.getMatchingOptionsName() : null,\r\n lookActiveFeatureMountHoles: lookActiveFeature && lookActiveFeature.partId === \"vanity_sink\"\r\n && Array.isArray(lookActiveFeature.dbFeature.metaData[\"MountHoles\"])\r\n ? lookActiveFeature.dbFeature.metaData[\"MountHoles\"].join(\",\") : null,\r\n lookActiveFeatureLixilSubCategory: lookActiveFeature ? lookActiveFeature.dbFeature.lixilProductSubCategory : null,\r\n lookActiveFeatureMatchingFeature: lookActiveFeature && Array.isArray(lookActiveFeature.dbFeature.metaData[\"MatchingFeature\"])\r\n ? lookActiveFeature.dbFeature.metaData[\"MatchingFeature\"].join(\",\")\r\n : null,\r\n lookActiveFeatureMountType: lookActiveFeature && Array.isArray(lookActiveFeature.dbFeature.metaData[\"MountType\"])\r\n ? lookActiveFeature.dbFeature.metaData[\"MountType\"].join(\",\")\r\n : null,\r\n lookActiveFeatureCollection: lookActiveFeature ? lookActiveFeature.getCollectionName(filterGroups) : null,\r\n navigationCount, // to update options after all features received\r\n fabricatorData,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n setLookActiveFeature,\r\n updateCanvasCount,\r\n setWizardSelectedValues,\r\n updateNavigationCount,\r\n};\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(LookFeatureOptions)\r\n","import React, {Fragment} from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport PropTypes from \"prop-types\";\r\n\r\nimport GroheFeatureOptionsType from \"./groheFeatureOptionsType\";\r\nimport {VANITY_TYPES} from \"../../../core/constants\";\r\nimport GroheFeatureOptionsShelfSide from \"./groheFeatureOptionsShelfSide\";\r\nimport GroheFeatureOptionsSide from \"./groheFeatureOptionsSide\";\r\nimport GroheFeatureOptionsShowerPan from \"./groheFeatureOptionsShowerPan\";\r\nimport BacksplashSelect from \"../../../../selectionWindow/backsplashSelect\";\r\nimport {wizardGroupInterface} from \"../../../../../interfaces/wizardItemInterface\";\r\nimport {setWizardSelectedValues} from \"../../../../../actions/wizardFunctions\";\r\nimport GroheFeatureOptionsCabinetSide from \"./groheFeatureOptionsCabinetSide\";\r\nimport {featureInterface} from \"../../../../../interfaces/featureInterface\";\r\nimport GroheFeatureOptionsBodySpray from \"./groheFeatureOptionsBodySpray\";\r\nimport WithUpdateLookCartItem from \"../../../hocs/withUpdateLookCartItem\";\r\nimport GroheFeatureOptionsSlatWall from \"./groheFeatureOptionsSlatWall\";\r\n\r\nconst GroheFeatureOptions = (props) => {\r\n\r\n const {lookActiveFeature, isWizard, wizardGroup, setWizardSelectedValues, wizardActiveStep, isLixil,\r\n groheActiveFeatureQuantity, updateLookCartItem} = props;\r\n\r\n if (!lookActiveFeature) {\r\n return null\r\n }\r\n\r\n const wizardOptionClick = (optionFeature) => {\r\n if (!isWizard || !optionFeature) {\r\n return\r\n }\r\n setWizardSelectedValues({\r\n [wizardActiveStep]: {\r\n wizardGroup,\r\n selectedFeature: optionFeature,\r\n partId: optionFeature.partId,\r\n quantity: groheActiveFeatureQuantity,\r\n }\r\n });\r\n updateLookCartItem();\r\n }\r\n\r\n return (\r\n - \r\n {availableOptions.map(option => {\r\n const isActive = activeFilterGroupValue && (option.colorValue.id === activeFilterGroupValue.id);\r\n const styles = getOptionStyles(option.colorValue);\r\n return (\r\n
- optionsButtonClick(option, maxClickCountReached, updateLookCartItem)}\r\n style={styles}/>\r\n )\r\n })}\r\n
\\n' +\r\n ' \\n' +\r\n ' \\n' +\r\n '
');\r\n }\r\n elements.radiusContainer.html(html);\r\n elements.arcButtons = $('.lightbox-option-rectangular[data-arc]');\r\n }\r\n\r\n function createCornerElements() {\r\n let html = '';\r\n for (let i = 3; i <= corners; i += 3) {\r\n html += ('' +\r\n ' '+ i +'\" ' +\r\n ' '+ TranslatesProvider.translate(\"sqft.navigation.radius.radiusItem\") + '' +\r\n '
\\n' +\r\n '\\n' +\r\n '
');\r\n }\r\n elements.cornerContainer.html(html);\r\n elements.angleButtons = $('.lightbox-option-rectangular[data-angle]');\r\n }\r\n this.onMeasureUnitChange = () => {\r\n //nodes.buttons.radius\r\n elements.arcButtons.each(function () {\r\n switch(config.measureUnit) {\r\n case \"Metric\":\r\n $(this).find('[data-value=\"radius\"]').html(inchesToMm(+this.dataset.arc) + config.getMeasureUnitPostfix());\r\n break;\r\n case \"Imperial\":\r\n default:\r\n $(this).find('[data-value=\"radius\"]').html(+this.dataset.arc + config.getMeasureUnitPostfix());\r\n }\r\n });\r\n\r\n // nodes.buttons.corner\r\n elements.angleButtons.each(function () {\r\n switch(config.measureUnit) {\r\n case \"Metric\":\r\n $(this).find('[data-value=\"corner\"]').html(inchesToMm(+this.dataset.angle) + config.getMeasureUnitPostfix());\r\n break;\r\n case \"Imperial\":\r\n default:\r\n $(this).find('[data-value=\"corner\"]').html(+this.dataset.angle + config.getMeasureUnitPostfix());\r\n }\r\n });\r\n\r\n elements.measure.each(function () {\r\n switch(config.measureUnit) {\r\n case \"Metric\":\r\n $(this).html($(this).data('metric'));\r\n break;\r\n case \"Imperial\":\r\n default:\r\n $(this).html($(this).data('imperial'));\r\n }\r\n });\r\n };\r\n\r\n this.setCursorImage = function () {\r\n var item = self.clickedEdgeButton, // remember it to restore after moving canvas cursor switch\r\n bounds = 18,\r\n imgWidth = bounds,\r\n imgHeight = bounds;\r\n\r\n var domImg = document.createElement('img');\r\n domImg.crossOrigin = \"Anonymous\";\r\n\r\n var $img = $(domImg);\r\n $img.css({\r\n position: 'absolute',\r\n width: '1px',\r\n height: '1px'\r\n });\r\n $img.attr({\r\n 'data-id': item//.attr('data-id')\r\n });\r\n $img.on('load', function() {\r\n setImage(domImg);\r\n });\r\n $img.appendTo($('body'));\r\n $img.attr('src', iconplusPurple);\r\n\r\n function setImage(domImg) {\r\n var bounds = 18;\r\n let ratio;\r\n if(imgWidth > imgHeight) {\r\n ratio = imgHeight / imgWidth;\r\n imgWidth = bounds;\r\n imgHeight = bounds * ratio;\r\n } else {\r\n ratio = imgWidth / imgHeight;\r\n imgHeight = bounds;\r\n imgWidth = bounds * ratio;\r\n }\r\n eventManager.setCursor('edge-select', self, true);\r\n self.cursorImage = { image: domImg, width: imgWidth, height: imgHeight };\r\n self.registerEvents();\r\n }\r\n };\r\n\r\n this.setHighlighting = function () {\r\n eventManager.stealCursor(true); // remove all other cursors\r\n workspace.setAllowEdges(false); // removing sizing lines\r\n workspace.setAllowBumpoutEdges(false); // removing bumpout lines\r\n workspace.setAllowMiteredEdges(false); // removing mitered lines\r\n config.highlight.lines = false; // disable lines highlighting\r\n config.highlight.type = ''; // disable lines highlighting\r\n config.highlight.id = null; // disable lines highlighting\r\n };\r\n\r\n this.registerEvents = function() {\r\n eventManager.setCursor('radius-select', self, true);\r\n config.highlight.points = true;\r\n eventManager.addEvent(\r\n eventManager.events.RENDER,\r\n self.renderCursor,\r\n self,\r\n eventManager.priorities.OVERALL\r\n );\r\n eventManager.addEvent(\r\n eventManager.events.MOUSE_DOWN,\r\n self.onMouseDown,\r\n self,\r\n eventManager.priorities.OVERALL\r\n );\r\n eventManager.addEvent(\r\n eventManager.events.MOUSE_UP,\r\n self.onMouseUp,\r\n self,\r\n eventManager.priorities.OVERALL\r\n );\r\n };\r\n this.onMouseDown = function() {\r\n let hoverPoint = workspace.getHoverPoint();\r\n //let hoverShape = workspace.getHoverShape();\r\n let hoverMiteredPoint = workspace.getHoverMiteredPoint();\r\n\r\n //update hoverPoint from miteredHoverPoint\r\n if(hoverMiteredPoint) {\r\n let miteredOverlay = hoverMiteredPoint.getParent();\r\n if(\r\n miteredOverlay && miteredOverlay.line && miteredOverlay.line.to\r\n && (miteredOverlay.line.to.isOverPointField()\r\n || miteredOverlay.line.from.isOverPointField())\r\n ){\r\n hoverPoint = miteredOverlay.line.to.isOverPointField() || miteredOverlay.line.from.isOverPointField()\r\n }\r\n }\r\n\r\n if (hoverPoint) {\r\n return true; // return true; // block all mouse-down events // we need dragging workspace\r\n }\r\n };\r\n this.checkForRestoreCursor = function() {\r\n if (self.isWaitingToRestoreCursor) {\r\n self.isWaitingToRestoreCursor = false;\r\n eventManager.removeEvent(self, eventManager.events.MOUSE_UP); //remove mouse up, it will be added in setCursorImage\r\n self.setHighlighting();\r\n self.setCursorImage();\r\n }\r\n };\r\n this.onMouseUp = function(mousePos) {\r\n void mousePos;\r\n self.checkForRestoreCursor();\r\n\r\n let hoverPoint = workspace.getHoverPoint(),\r\n hoverShape = workspace.getHoverShape(),\r\n hoverSegmentCorner;\r\n\r\n //click on purple line\r\n if (hoverShape) {\r\n hoverSegmentCorner = hoverShape.getHoverSegmentCorner();\r\n if (hoverSegmentCorner) {\r\n hoverPoint = hoverSegmentCorner.line.to\r\n }\r\n }\r\n\r\n if (hoverPoint && !hoverPoint.angleIsChanged && hoverPoint.isFitSize()) {\r\n if (SqftStore.radius.arcLength) {\r\n hoverPoint.arcLength = SqftStore.radius.arcLength;\r\n hoverPoint.featureId = _.clone(SqftStore.radius.featureId);\r\n hoverPoint.angle = 0;\r\n\r\n } else if (SqftStore.radius.angle) {\r\n hoverPoint.angle = SqftStore.radius.angle;\r\n hoverPoint.featureId = _.clone(SqftStore.radius.featureId);\r\n hoverPoint.arcLength = 0;\r\n }\r\n //update mitered points\r\n sqftShapeManager.updateMinMaxMiteredPoints(hoverShape);\r\n //reset seam shape changes in the slab mode\r\n sqftShapeManager.resetShapeChangesInTheSlabMode(hoverShape);\r\n //update hoverMiteredPoint position\r\n let hoverMiteredPoint = workspace.getHoverMiteredPoint();\r\n if (hoverMiteredPoint) {\r\n hoverMiteredPoint.getParent().movePoint(0, 0, hoverMiteredPoint);\r\n hoverMiteredPoint.getParent().moveMeasurements(hoverMiteredPoint);\r\n //todo sqft-react\r\n //Menu.miteredController.updateInfo();\r\n }\r\n return false;\r\n } else if (hoverShape) {\r\n //Menu.openMenu();\r\n //return true; // if click on shape, block reseting cursor, because we still need it http://jira.mozidev.com/browse/QC-956\r\n }/* else {\r\n deregisterEvents();\r\n elements.designDefault.click();\r\n }*/\r\n\r\n };\r\n this.destroy = function(protect, revertBackAfterMouseUp) {\r\n if (revertBackAfterMouseUp) {\r\n eventManager.removeEvent(self, eventManager.events.RENDER); //remove render only, but wait for mouse up to set cursor again\r\n this.isWaitingToRestoreCursor = true;\r\n } else {\r\n this.deregisterEvents();\r\n }\r\n this.hide();\r\n };\r\n this.hide = function(e) {\r\n if(e) {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n }\r\n //Menu.hideSideBarContent(); // hide sidebar menu\r\n };\r\n\r\n //public functions\r\n this.init = function() {\r\n // elements.navRadius.click(navRadius_onClick);\r\n createRadiusElements();\r\n createCornerElements();\r\n\r\n elements.arcButtons.click(self.arcButton_onClick);\r\n elements.angleButtons.click(self.angleButton_onClick);\r\n };\r\n\r\n this.renderCursor = function(ctx) {\r\n // if((this.arcLength > 0) && ($(window).width() > 768)) {\r\n // var mPos = eventManager.LastKnownMousePos;\r\n // if(mPos) {\r\n // ctx.save();\r\n // ctx.font = \"18px \" + config.activeFontBold;\r\n // ctx.fillStyle = \"#B263A8\";\r\n // ctx.fillText(\"r\" + new Fraction(this.arcLength) + \"\\\"\", mPos.x + (12 * config.scale), mPos.y + 9);\r\n // ctx.restore();\r\n // }\r\n // }\r\n if(self.cursorImage && self.cursorImage.image && (this.arcLength > 0 || this.angle > 0) && ($(window).width() > 768)) {\r\n var mPos = eventManager.LastKnownMousePos;\r\n if(mPos) {\r\n ctx.drawImage(self.cursorImage.image, mPos.x + 10, mPos.y + 10, self.cursorImage.width, self.cursorImage.height);\r\n }\r\n }\r\n };\r\n};\r\n","import cloneDeep from \"lodash/cloneDeep\";\r\n\r\nimport EventManager from \"../../../store/sqftEventManager\";\r\nimport config from \"../../../store/sqftConfig\";\r\nimport {\r\n getPointDistance,\r\n measureDistanceToInches,\r\n getFontsize, getAngleBetweenTwoPoints, getParallelPoints, getPointField\r\n} from \"../../../../../helpers/sqftHelper\";\r\nimport {pnpolyArray} from \"../../../../../lib/pnpoly\";\r\nimport store from \"../../../../../../../store\";\r\nimport {setSQFTContextMenu} from \"../../../../../../../actions/sqftMenuFunctions\";\r\nimport {iconGreenClip} from \"../../../../../assetsSQFT\";\r\nimport sqftShape from \"../sqftShape\";\r\nimport {SIDEBAR_BUTTONS_MENU} from \"../../../../../constants\";\r\nimport {COLOR} from \"../../../store/colorThemes\";\r\n\r\nexport default function(initialState = {}) {\r\n let self = this,\r\n state = {\r\n ...{\r\n labelText: '',\r\n labelTextColor: '#3e3e3e',\r\n textWidth: 0,\r\n isHovered: false,\r\n imageSrc: iconGreenClip,\r\n lineOffset: 13,\r\n flagMargin: 2,\r\n partId: undefined,\r\n isTitle: false,\r\n midPoint: {\r\n x: 0,\r\n y: 0\r\n }\r\n },\r\n ...initialState\r\n },\r\n line = null,\r\n shape = null;\r\n\r\n const svgCache = {};\r\n\r\n function setLine(value) { line = value; }\r\n function setShape(value) { shape = value; }\r\n function getMidPoint(from, to) {\r\n return {\r\n x: from.x + (to.x - from.x)/2,\r\n y: from.y + (to.y - from.y)/2\r\n };\r\n }\r\n function onMouseMove(mousePos, e) {\r\n void e;\r\n const {isHovered, orientation} = isMouseOverText(mousePos);\r\n state.isHovered = isHovered;\r\n if (state.isHovered) {\r\n if (EventManager.getCursor().indexOf(\"move\") >= 0) {\r\n EventManager.stealCursor(true);\r\n EventManager.setCursor((orientation === \"horizontal\") ? \"text\" : \"text-vertical\", self);\r\n }\r\n } else {\r\n EventManager.resetCursor(self);\r\n }\r\n }\r\n function onMouseDown(mousePos, e) {\r\n if (state.isHovered) {\r\n const reduxState = store.getState();\r\n const activeButton = reduxState.sqftMenuState.activeButton;\r\n\r\n //Delete label\r\n if (activeButton !== SIDEBAR_BUTTONS_MENU.delete) {\r\n void e;\r\n window.lineInputFocused = false;\r\n EventManager.stealCursor();\r\n EventManager.resetCursor(self);\r\n\r\n store.dispatch(setSQFTContextMenu({isOpened: true, activeMenu: \"labels\", pos: mousePos, parent: shape}));\r\n }\r\n\r\n return true\r\n }\r\n }\r\n function isMouseOverText(mousePos) {\r\n const lineDirection = line.getLineDirection();\r\n let pointsArray = [];\r\n let lineOffset = [];\r\n if (lineDirection.orientation === \"horizontal\") {\r\n lineOffset = lineDirection.newDirection === \"west\" ? -state.lineOffset : state.lineOffset;\r\n pointsArray = [\r\n [state.midPoint.x - state.textWidth/2 - 10, state.midPoint.y - 15 + lineOffset],\r\n [state.midPoint.x + state.textWidth/2 + 10, state.midPoint.y - 15 + lineOffset],\r\n [state.midPoint.x + state.textWidth/2 + 10, state.midPoint.y + 10 + lineOffset],\r\n [state.midPoint.x - state.textWidth/2 - 10, state.midPoint.y + 10 + lineOffset],\r\n ]\r\n // pointsArray.forEach(p => {\r\n // var tempPoint = new point(p[0], p[1]);\r\n // tempPoint.init(line);\r\n // tempPoint.layout = 'white-circle';\r\n // debugger\r\n // })\r\n } else if (lineDirection.orientation === \"vertical\") {\r\n if (lineDirection.newDirection === \"south\") {\r\n pointsArray = [\r\n [state.midPoint.x + 40, state.midPoint.y - state.textWidth/2 - 10],\r\n [state.midPoint.x + 15, state.midPoint.y - state.textWidth/2 - 10],\r\n [state.midPoint.x + 15, state.midPoint.y + state.textWidth/2 - 5],\r\n [state.midPoint.x + 40, state.midPoint.y + state.textWidth/2 - 5],\r\n ];\r\n } else if (lineDirection.newDirection === \"north\") {\r\n pointsArray = [\r\n [state.midPoint.x - 40, state.midPoint.y - state.textWidth/2 - 10],\r\n [state.midPoint.x - 15, state.midPoint.y - state.textWidth/2 - 10],\r\n [state.midPoint.x - 15, state.midPoint.y + state.textWidth/2 - 5],\r\n [state.midPoint.x - 40, state.midPoint.y + state.textWidth/2 - 5],\r\n ];\r\n }\r\n } else {\r\n // todo rotation hover\r\n }\r\n return {isHovered: pnpolyArray(pointsArray, mousePos), orientation: lineDirection.orientation};\r\n }\r\n\r\n this.getState = () => { return state }\r\n this.isHovered = () => { return state.isHovered }\r\n this.destroy = function(protect) {\r\n if(!protect) {\r\n EventManager.removeEvent(self);\r\n }\r\n };\r\n this.getParent = () => {\r\n return line\r\n }\r\n this.setLabelText = (value) => {\r\n state.labelText = value;\r\n };\r\n this.setPartId = (value) => {\r\n state.partId = value;\r\n };\r\n this.import = function(data) {\r\n state = data.state;\r\n };\r\n this.export = function() {\r\n return { state: cloneDeep(state) }\r\n };\r\n this.init = function(line, text, partId) {\r\n setLine(line);\r\n //todo sqft-react\r\n setShape(line.getParent());\r\n void shape;\r\n\r\n this.setPartId(partId);\r\n this.setLabelText(text);\r\n this.initEvents(!state.isTitle);\r\n };\r\n this.initEvents = (editable = true) => {\r\n EventManager.addEvent(\r\n EventManager.events.RENDER,\r\n this.render,\r\n this,\r\n EventManager.priorities.SHAPE_LABEL\r\n );\r\n if (editable) {\r\n EventManager.addEvent(\r\n EventManager.events.MOUSE_MOVE,\r\n onMouseMove,\r\n this,\r\n EventManager.priorities.SHAPE_LABEL\r\n );\r\n EventManager.addEvent(\r\n EventManager.events.MOUSE_DOWN,\r\n onMouseDown,\r\n this,\r\n EventManager.priorities.SHAPE_LABEL\r\n );\r\n }\r\n }\r\n this.deregisterEvents = () => {\r\n EventManager.removeEvent(this);\r\n };\r\n this.reInitEvents = () => {\r\n this.initEvents(!state.isTitle);\r\n };\r\n this.deregisterPartEvents = () => {\r\n EventManager.removeEvent(this);\r\n };\r\n this.reInitPartEvents = () => {\r\n this.initEvents(!state.isTitle);\r\n };\r\n this.getLineLength = function () {\r\n var distance = getPointDistance(line.from, line.to);\r\n return measureDistanceToInches(distance);\r\n };\r\n this.isIE = function() {\r\n return(/Trident/i).test(window.navigator.appVersion);\r\n };\r\n this.getSrc = function(img) {\r\n if(img) {\r\n let src = img.getAttribute('src');\r\n if(src) {\r\n return src;\r\n }\r\n src = img.getAttribute(\"style\");\r\n if(src) {\r\n return src.replace(/background-image: url\\(\"\\/api\\/SqFtCalc\\/GetImage\\?url=/g, \"\").replace(/\"\\);/g, \"\");\r\n }\r\n }\r\n return \"\";\r\n };\r\n\r\n this.renderImage = (ctx, x, y) => {\r\n if (state.isTitle) return;\r\n\r\n let scale = config.scale;\r\n let size = { width: 5, height: 5 };\r\n let posX = x - size.width * scale;\r\n let posY = y - size.height * scale;\r\n\r\n if (svgCache['iconGreenClip']) {\r\n let img = svgCache['iconGreenClip'];\r\n ctx.drawImage(img, posX, posY, size.width * scale, size.height * scale);\r\n } else {\r\n let img = new Image();\r\n let svg = document.getElementById('icon-label-flag');\r\n\r\n if (svg) {\r\n let xml = new XMLSerializer().serializeToString(svg);\r\n let svg64 = btoa(xml);\r\n\r\n img.src = 'data:image/svg+xml;base64,' + svg64;\r\n\r\n img.onload = () => {\r\n svgCache['iconGreenClip'] = img;\r\n ctx.drawImage(img, posX, posY, size.width * scale, size.height * scale);\r\n };\r\n\r\n img.onerror = () => {\r\n console.warn(\"Failed to load SVG image, using fallback.\");\r\n // ctx.fillStyle = '#FF0000'; // Фолбек в виде красного квадрата\r\n // ctx.fillRect(x - 10, y - 10, 20, 20);\r\n };\r\n }\r\n }\r\n };\r\n\r\n this.render = function(ctx) {\r\n let scale = config.scale,\r\n fontSize = getFontsize(),\r\n font = (fontSize).toString() + \"px \" + config.activeFontBold,\r\n lineDirection = line.getLineDirection(),\r\n offset = line.getOffset(),\r\n dString = state.labelText,\r\n midPoint = getMidPoint(line.from, line.to),\r\n mText,\r\n lineOffset = 0,\r\n xOffset = 0,\r\n marginTo = 0;\r\n\r\n ctx.beginPath();\r\n\r\n ctx.font = font;\r\n mText = ctx.measureText(dString);\r\n state.textWidth = Math.round(mText.width * 100) / 100;\r\n midPoint.y = midPoint.y * scale + offset.y;\r\n midPoint.x = midPoint.x * scale + offset.x;\r\n state.midPoint.x = midPoint.x;\r\n state.midPoint.y = midPoint.y;\r\n ctx.textAlign = \"center\";\r\n midPoint.y += fontSize / 2;\r\n\r\n ctx.beginPath();\r\n ctx.fillStyle = state.isHovered ? COLOR.red : state.labelTextColor;\r\n\r\n let moveFrom, moveTo;\r\n\r\n switch (lineDirection.orientation) {\r\n case \"horizontal\": {\r\n lineOffset = lineDirection.newDirection === \"west\" ? -state.lineOffset : state.lineOffset;\r\n ctx.wrapText(dString, midPoint.x, midPoint.y + lineOffset, mText, fontSize);\r\n this.renderImage(ctx,midPoint.x - mText.width / 2 - state.flagMargin, midPoint.y + lineOffset);\r\n break;\r\n }\r\n case \"vertical\": {\r\n if (lineDirection.newDirection === \"south\") {\r\n marginTo = (lineDirection.cornerMargins.fromBottom) ? marginTo + 9 : marginTo;\r\n } else if (lineDirection.newDirection === \"north\") {\r\n marginTo = (lineDirection.cornerMargins.fromTop) ? marginTo + 9 : marginTo;\r\n }\r\n ctx.save();\r\n ctx.translate(\r\n lineDirection.newDirection === \"south\" ? midPoint.x + xOffset : midPoint.x + xOffset,\r\n lineDirection.newDirection === \"south\" ? midPoint.y - 5 : midPoint.y - 10\r\n );\r\n ctx.rotate(lineDirection.newDirection === \"south\" ? Math.PI / 2 : -Math.PI / 2);\r\n lineOffset = lineDirection.newDirection === \"south\" ? state.lineOffset : state.lineOffset ;\r\n\r\n ctx.wrapText(dString, marginTo,lineOffset + fontSize, mText, fontSize);\r\n this.renderImage(ctx,marginTo - mText.width / 2, lineOffset + fontSize);\r\n break;\r\n }\r\n //todo\r\n case \"NORTHWEST\":\r\n case \"NORTHEAST\":\r\n case \"SOUTHWEST\":\r\n case \"SOUTHEAST\": {\r\n ctx.save();\r\n const mText = ctx.measureText(dString);\r\n const angle = getAngleBetweenTwoPoints(line.from, line.to);\r\n [moveFrom, moveTo] = getParallelPoints(line.from, line.to, 6);\r\n const midPoint = getMidPoint(moveFrom, moveTo);\r\n //todo not sure why shape here becomes null after clicking on eyeball\r\n if (!(shape instanceof(sqftShape))) {\r\n shape = line.getParent();\r\n }\r\n const midPointPointField = getPointField(midPoint.x, midPoint.y, shape);\r\n ctx.save();\r\n ctx.translate(\r\n midPointPointField.x,\r\n midPointPointField.y,\r\n );\r\n ctx.rotate(angle * (Math.PI / 180));\r\n\r\n ctx.wrapText(dString, 0, 0, mText, fontSize);\r\n this.renderImage(ctx,0 - mText.width / 2, 0);\r\n\r\n break;\r\n }\r\n default:\r\n break;\r\n }\r\n\r\n ctx.restore();\r\n };\r\n}\r\n","import * as uuid from \"uuid\";\r\n\r\nimport EventManager from \"../../store/sqftEventManager\";\r\nimport {FREE_DRAW_TYPE, SIDEBAR_BUTTONS_MENU, SIDEBAR_NAVIGATION_CABINET_BUTTONS} from \"../../../../constants\";\r\nimport RenderFreeDraw from \"../../helpers/renderFreeDraw\";\r\nimport {COLORS} from \"../../../../../../colorThemes\";\r\nimport NumberText from \"../workspace/text/numberText\";\r\nimport workspace from \"../workspace\";\r\nimport {getPointField} from \"../../../../helpers/sqftHelper\";\r\nimport eventManager from \"../../store/sqftEventManager\";\r\nimport store from \"../../../../../../store\";\r\nimport {getWallLockedPoint} from \"../../helpers/wallHelper\";\r\nimport {isPointInsidePolygon} from \"../../../../lib/pnpoly\";\r\nimport {getBordersOfTwoPoints, getLineBordersArrayV2} from \"../../helpers/lineHelper\";\r\nimport workspaceControllers from \"../../store/workspaceControllers\";\r\n\r\nexport default class Wall {\r\n dimensionToMouse = null;\r\n id;\r\n state = {\r\n addedPoints: [],\r\n dimensions: [],\r\n drawLineToMouse: false,\r\n lineThickness: 10,\r\n lineColor: COLORS.gray,\r\n outlineColor: COLORS.gray4,\r\n minLineLength: 15,\r\n drawType: FREE_DRAW_TYPE.wall,\r\n isHovering: false,\r\n mouseDown: false,\r\n mouseDownPosition: null,\r\n lockedAngleStep: 45,\r\n };\r\n editState = {\r\n editPoint: null,\r\n isInEditState: false,\r\n }\r\n\r\n getPoints() { return this.state.addedPoints }\r\n setEditMode(value) { this.editState.isInEditState = value}\r\n setEditPoint(point) { this.editState.editPoint = point}\r\n getOffset() { return workspace.getOffset() }\r\n getWallThickness() { return workspace.getOffset() }\r\n\r\n constructor(points, centerPoint, lockedAngleStep = 45) {\r\n this.id = uuid.v4();\r\n this.state.addedPoints = points\r\n this.state.centerPoint = centerPoint\r\n this.state.lockedAngleStep = lockedAngleStep\r\n this.initEvents();\r\n }\r\n\r\n initEvents() {\r\n EventManager.addEvent(\r\n EventManager.events.RENDER,\r\n this.render.bind(this),\r\n this,\r\n EventManager.priorities.WALL\r\n );\r\n EventManager.addEvent(\r\n EventManager.events.MOUSE_DOWN,\r\n this.onMouseDown.bind(this),\r\n this,\r\n EventManager.priorities.OVERALL\r\n );\r\n EventManager.addEvent(\r\n EventManager.events.MOUSE_MOVE,\r\n this.onMouseMove.bind(this),\r\n this,\r\n EventManager.priorities.SEGMENT\r\n );\r\n }\r\n\r\n destroy() {\r\n this.deregisterEvents();\r\n this.destroyPoints();\r\n }\r\n\r\n destroyPoints() {\r\n for (const addedPoints of this.state.addedPoints) {\r\n addedPoints.destroy()\r\n }\r\n }\r\n\r\n deregisterEvents() {\r\n eventManager.removeEvent(this);\r\n }\r\n\r\n editWall(point) {\r\n const reduxState = store.getState();\r\n const activeButton = reduxState.sqftMenuState.activeButton;\r\n if (activeButton === SIDEBAR_NAVIGATION_CABINET_BUTTONS.wall) {\r\n this.setEditMode(true);\r\n this.setEditPoint(point);\r\n }\r\n }\r\n\r\n disableEditingWall() {\r\n this.setEditMode(false);\r\n this.setEditPoint(null);\r\n }\r\n\r\n createDimensionToMouse() {\r\n this.dimensionToMouse = new NumberText(\r\n 0,\r\n {x: 0, y: 0},\r\n {shouldRenderFrameBorder: true, isLength: true},\r\n workspace,\r\n Function(),\r\n true\r\n );\r\n }\r\n\r\n onMouseDown(mousePos) {\r\n if (this.editState.editPoint && this.editState.isInEditState) {\r\n this.addPoint(mousePos);\r\n this.disableEditingWall();\r\n return true\r\n }\r\n if (this.state.isHovering) {\r\n const reduxState = store.getState();\r\n if (reduxState.sqftMenuState.activeButton === SIDEBAR_BUTTONS_MENU.delete) {\r\n workspaceControllers.walls.destroyResource(this)\r\n }\r\n }\r\n }\r\n\r\n onMouseMove(mousePos) {\r\n this.state.isHovering = this.isMouseOverWall(mousePos) || this.state.mouseDown;\r\n }\r\n\r\n isMouseOverWall(mousePos) {\r\n for (const addedPointKey in this.state.addedPoints) {\r\n const nextPoint = this.state.addedPoints[+addedPointKey +1];\r\n if (nextPoint) {\r\n const currentPoint = this.state.addedPoints[+addedPointKey];\r\n const lineFieldArray = getLineBordersArrayV2(currentPoint, nextPoint, this.state.lineThickness + this.state.lineThickness * 0.1);\r\n if (isPointInsidePolygon(mousePos, lineFieldArray)) {\r\n return true\r\n }\r\n }\r\n }\r\n return false\r\n }\r\n\r\n addPoint(mousePos) {\r\n const wallLockedPoint = getWallLockedPoint(this.editState.editPoint, mousePos, this.state.lockedAngleStep);\r\n if (this.state.addedPoints.length > 0) {\r\n //todo\r\n //this.addLineDimensions(point, mousePos);\r\n }\r\n if (this.editState.editPoint.id === this.state.addedPoints[0].id) {\r\n this.state.addedPoints.unshift(wallLockedPoint);\r\n } else {\r\n this.state.addedPoints.push(wallLockedPoint);\r\n }\r\n }\r\n\r\n getLines() {\r\n let lines = [];\r\n const points = this.getPoints();\r\n for (const pointIndex in points) {\r\n const len = points.length;\r\n const current = points[+pointIndex];\r\n //const previous = points[(pointIndex + len - 1) % len];\r\n const next = points[(pointIndex + 1) % len];\r\n let line = {\r\n from: current,\r\n to: next,\r\n getOffset: () => {\r\n return this.getOffset()\r\n }\r\n }\r\n lines.push(line);\r\n }\r\n\r\n return lines\r\n }\r\n\r\n getBordersOfWallLines() {\r\n let virtualLines = [];\r\n const points = this.getPoints();\r\n for (const addedPointKey in points) {\r\n const nextPoint = points[+addedPointKey +1];\r\n if (nextPoint) {\r\n const currentPoint = points[+addedPointKey];\r\n virtualLines.push(...getBordersOfTwoPoints(currentPoint, nextPoint, this.state.lineThickness / 2));\r\n }\r\n }\r\n return virtualLines\r\n }\r\n\r\n render(ctx) {\r\n ctx.save();\r\n this.renderLines(ctx);\r\n ctx.restore();\r\n //this.updateDimensionToMouse(ctx);\r\n if (this.editState.editPoint && this.editState.isInEditState) {\r\n RenderFreeDraw.drawLineFromPointV2ToMouse(ctx, this.editState.editPoint, true);\r\n }\r\n }\r\n\r\n renderLines(ctx) {\r\n const reduxState = store.getState();\r\n const activeButton = reduxState.sqftMenuState.activeButton;\r\n ctx.lineWidth = this.state.lineThickness + 2;\r\n ctx.strokeStyle = this.state.outlineColor;\r\n RenderFreeDraw.renderLinesBetweenPoints(ctx, this.state);\r\n\r\n ctx.lineWidth = this.state.lineThickness;\r\n ctx.strokeStyle = this.state.isHovering && activeButton === SIDEBAR_BUTTONS_MENU.delete\r\n ? COLORS.red\r\n : this.state.lineColor;\r\n RenderFreeDraw.renderLinesBetweenPoints(ctx, this.state);\r\n }\r\n\r\n renderDimensionToMouseFromPoint = (ctx, point) => {\r\n let posX = point.modelCorePoint.mixins.movable.posX;\r\n let posY = point.modelCorePoint.mixins.movable.posY;\r\n let pointField = getPointField(posX, posY);\r\n ctx.moveTo(pointField.x, pointField.y);\r\n\r\n const mPos = EventManager.LastKnownMousePos;\r\n ctx.lineTo(mPos.x, mPos.y);\r\n ctx.stroke();\r\n ctx.closePath();\r\n }\r\n}\r\n","import {getPointField} from \"../../../helpers/sqftHelper\";\r\nimport EventManager from \"../store/sqftEventManager\";\r\nimport {FREE_DRAW_TYPE, SIDEBAR_NAVIGATION_CABINET_BUTTONS, SIDEBAR_SHAPE_BUTTONS} from \"../../../constants\";\r\nimport store from \"../../../../../store\";\r\nimport {getLockPointPos} from \"./freeDrawHelper\";\r\n\r\nexport default class RenderFreeDraw {\r\n\r\n static drawLines = (ctx, state) => {\r\n for (let i = 0; i < state.addedPoints.length; i++) {\r\n if (state.addedPoints[i + 1] !== undefined) {\r\n let posX = state.addedPoints[i].modelCorePoint.mixins.movable.posX;\r\n let posY = state.addedPoints[i].modelCorePoint.mixins.movable.posY;\r\n let pointField = getPointField(posX, posY);\r\n\r\n posX = state.addedPoints[i + 1].modelCorePoint.mixins.movable.posX;\r\n posY = state.addedPoints[i + 1].modelCorePoint.mixins.movable.posY;\r\n let nextPointField = getPointField(posX, posY);\r\n // let pointField = state.addedPoints[i].getPointCords();\r\n // let nextPointField = state.addedPoints[i + 1].getPointCords();\r\n if (i === 0) {\r\n ctx.moveTo(pointField.x, pointField.y);\r\n }\r\n ctx.lineTo(nextPointField.x, nextPointField.y);\r\n }\r\n }\r\n }\r\n\r\n static drawLastLine = (ctx, state) => {\r\n let posX = state.addedPoints[0].modelCorePoint.mixins.movable.posX;\r\n let posY = state.addedPoints[0].modelCorePoint.mixins.movable.posY;\r\n let pointField = getPointField(posX, posY);\r\n\r\n ctx.lineTo(pointField.x, pointField.y);\r\n }\r\n\r\n static drawLineFromPointV2ToMouse = (ctx, pointV2, shouldUseLockedMode = false) => {\r\n const reduxState = store.getState();\r\n const isWallsLockMode = reduxState.sqftMenuState.isWallsLockMode;\r\n const activeButton = reduxState.sqftMenuState.activeButton;\r\n\r\n if ((shouldUseLockedMode && isWallsLockMode && activeButton === SIDEBAR_NAVIGATION_CABINET_BUTTONS.wall)\r\n || (shouldUseLockedMode && activeButton === SIDEBAR_SHAPE_BUTTONS.freeDraw)\r\n ) {\r\n RenderFreeDraw.drawLineFromPointV2ToMouseLocked(ctx, pointV2);\r\n } else {\r\n RenderFreeDraw.drawLineFromPointV2ToMouseFree(ctx, pointV2);\r\n }\r\n }\r\n\r\n static drawLineFromPointV2ToMouseFree = (ctx, pointV2) => {\r\n ctx.beginPath();\r\n let posX = pointV2.modelCorePoint.mixins.movable.posX;\r\n let posY = pointV2.modelCorePoint.mixins.movable.posY;\r\n let pointField = getPointField(posX, posY);\r\n ctx.moveTo(pointField.x, pointField.y);\r\n\r\n const mousePos = EventManager.LastKnownMousePos;\r\n ctx.lineTo(mousePos.x, mousePos.y);\r\n ctx.stroke();\r\n ctx.closePath();\r\n }\r\n\r\n static drawLineFromPointV2ToMouseLocked = (ctx, pointV2, lockedAngleStep = 45 ) => {\r\n const lockPointPos = getLockPointPos(pointV2, lockedAngleStep);\r\n\r\n ctx.beginPath();\r\n let posX = pointV2.modelCorePoint.mixins.movable.posX;\r\n let posY = pointV2.modelCorePoint.mixins.movable.posY;\r\n let pointField = getPointField(posX, posY);\r\n ctx.moveTo(pointField.x, pointField.y);\r\n\r\n ctx.lineTo(lockPointPos.x, lockPointPos.y);\r\n ctx.stroke();\r\n ctx.closePath();\r\n }\r\n\r\n // static renderCursor = (ctx) => {\r\n // if (RenderFreeDraw.cursorImage && this.cursorImage.image && (this.arcLength > 0 || this.angle > 0) && ($(window).width() > 768)) {\r\n // let mPos = EventManager.LastKnownMousePos;\r\n // if (mPos) {\r\n // ctx.drawImage(this.cursorImage.image, mPos.x + 10, mPos.y + 10, this.cursorImage.width, this.cursorImage.height);\r\n // }\r\n // }\r\n // };\r\n\r\n static renderLinesBetweenPoints = (ctx, state) => {\r\n ctx.beginPath();\r\n RenderFreeDraw.drawLines(ctx, state);\r\n ctx.stroke();\r\n // if (state.isDrawFinished) {\r\n // RenderFreeDraw.drawLastLine(ctx, state);\r\n // } else\r\n if (state.drawLineToMouse && state.addedPoints.length !== 0 ) {\r\n RenderFreeDraw.drawLineFromPointV2ToMouse(ctx, state.addedPoints[state.addedPoints.length -1], state.useLockedPoints)\r\n }\r\n };\r\n\r\n static render = (ctx, state) => {\r\n RenderFreeDraw.renderLines(ctx, state);\r\n //RenderFreeDraw.updateDimensionToMouse(ctx, state);\r\n };\r\n\r\n static renderLines = (ctx, state) => {\r\n //RenderFreeDraw.renderCursor(ctx);\r\n if (state.drawType === FREE_DRAW_TYPE.wall) {\r\n ctx.lineWidth = state.lineWidth + 2;\r\n ctx.strokeStyle = state.outlineColor;\r\n RenderFreeDraw.renderLinesBetweenPoints(ctx, state);\r\n }\r\n ctx.lineWidth = state.lineWidth;\r\n ctx.strokeStyle = state.lineColor;\r\n RenderFreeDraw.renderLinesBetweenPoints(ctx, state);\r\n };\r\n\r\n // static renderDimensionToMouse = (ctx, state) => {\r\n // if (state.dimensionToMouse.value > state.minLineLength) {\r\n // state.dimensionToMouse.pos.betweenPoints.pointFrom = state.addedPoints[state.addedPoints.length - 1]\r\n // state.dimensionToMouse.pos.betweenPoints.pointTo = getMousePositionOnField(\r\n // EventManager.LastKnownMousePos.x,\r\n // EventManager.LastKnownMousePos.y\r\n // );\r\n // //state.dimensionToMouse.render(ctx);\r\n // }\r\n // };\r\n}\r\n","import EventManager from \"../store/sqftEventManager\";\r\nimport store from \"../../../../../store\";\r\nimport PointV2, {CORE_POINT_LAYOUTS} from \"../core/shapes/pointV2\";\r\nimport workspace from \"../core/workspace\";\r\nimport sqftConfig from \"../store/sqftConfig\";\r\nimport {getLockPointPos} from \"./freeDrawHelper\";\r\nimport {getMousePositionOnField} from \"../../../helpers/sqftHelper\";\r\nimport workspaceControllers from \"../store/workspaceControllers\";\r\n\r\n/**\r\n * @param pos {{x: int, y: int}}\r\n * @return {PointV2}\r\n */\r\nexport const getWallPoint = (pos) => {\r\n let pointState = {\r\n priority: EventManager.priorities.BOX_POINT,\r\n movable: true,\r\n isCentered: true,\r\n isResizedByPoint: false,\r\n isScaledByPoint: false,\r\n isVisibleOnHover: true,\r\n moveCallback: (mousePos, movablePoint, xDiff, yDiff) => {\r\n void yDiff;\r\n const reduxState = store.getState();\r\n const isWallsUpMode = reduxState.sqftMenuState.isWallsUpMode;\r\n if (!isWallsUpMode) {\r\n movablePoint.movePosition(mousePos);\r\n }\r\n },\r\n mouseUpCallback: (mousePos, movablePoint) => {\r\n void mousePos;\r\n void movablePoint;\r\n //console.log('mousePos', mousePos);\r\n //console.log('movablePoint', movablePoint);\r\n },\r\n mouseDownCallback: (mousePos, movablePoint) => {\r\n //console.log('mouseDownCallback mousePos', mousePos);\r\n //console.log('mouseDownCallback movablePoint', movablePoint);\r\n void mousePos; void movablePoint;\r\n const reduxState = store.getState();\r\n const isWallsUpMode = reduxState.sqftMenuState.isWallsUpMode;\r\n if (isWallsUpMode) {\r\n const wall = workspaceControllers.walls.getWallByPoint(movablePoint.parent);\r\n wall.editWall(movablePoint.parent);\r\n return true\r\n }\r\n }\r\n };\r\n let pointDesign = {\r\n radius: 10,\r\n lineWidth: 1,\r\n layout: CORE_POINT_LAYOUTS.black\r\n };\r\n\r\n let wPos = workspace.getPosition();\r\n let scale = sqftConfig.scale;\r\n let offset = {\r\n x: (pos.x + wPos.x) / scale,\r\n y: (pos.y + wPos.y) / scale\r\n };\r\n\r\n return new PointV2(offset.x, offset.y, workspace, pointState, pointDesign);\r\n}\r\n\r\n/**\r\n * @param existingWallPoint {PointV2}\r\n * @param mousePos {{x: int, y: int}}\r\n * @param lockedAngleStep\r\n * @return {PointV2}\r\n */\r\nexport const getWallLockedPoint = (existingWallPoint, mousePos, lockedAngleStep = 45) => {\r\n const reduxState = store.getState();\r\n const isWallsLockMode = reduxState.sqftMenuState.isWallsLockMode;\r\n const newWallPoint = getWallPoint(mousePos);\r\n if (isWallsLockMode) {\r\n const lockedPosition = getLockPointPos(existingWallPoint, lockedAngleStep);\r\n const lockedPositionOnField = getMousePositionOnField(lockedPosition.x, lockedPosition.y);\r\n newWallPoint.setPosition(lockedPositionOnField);\r\n }\r\n\r\n return newWallPoint\r\n}\r\n","import workspace from \"../../workspace\";\r\nimport COLOR_THEMES, {COLOR} from \"../../../store/colorThemes\";\r\nimport sqftConfig from \"../../../store/sqftConfig\";\r\nimport {\r\n RENDER_TEMPLATES,\r\n SIDEBAR_BUTTONS_MENU, SIDEBAR_NAVIGATION_BUTTONS,\r\n SIDEBAR_NAVIGATION_CABINET_BUTTONS\r\n} from \"../../../../../constants\";\r\nimport config from \"../../../store/sqftConfig\";\r\nimport sqftShapeManager from \"../../../store/sqftShapeManager\";\r\nimport RenderParts from \"../../../helpers/renderParts\";\r\nimport RenderFigures from \"../../../helpers/renderFigures\";\r\nimport store from \"../../../../../../../store\";\r\nimport RenderCabinets from \"../../../helpers/renderCabinets\";\r\nimport {COLORS} from \"../../../../../../../colorThemes\";\r\nimport Config from \"../../../../../../../config\";\r\nimport {\r\n canShapeBeAutoShifted,\r\n getIsShapePlacedOnTheFloor,\r\n getIsShapePlacedOnTheWall\r\n} from \"../../../../../helpers/shapeHelper\";\r\nimport {getPointField} from \"../../../../../helpers/sqftHelper\";\r\n\r\nclass ShapeCabinet {\r\n __shape;\r\n __crownMoldingFeatureId = null;\r\n __crownMoldingParams = {\r\n distance: 10\r\n }\r\n\r\n constructor(shape) {\r\n this.__shape = shape;\r\n }\r\n\r\n import = (data) => {\r\n void data\r\n }\r\n\r\n export = () => {\r\n return {\r\n width: this.getShapeWidth(),\r\n height: this.getShapeHeight(),\r\n depth: this.getShapeDepth(),\r\n }\r\n }\r\n\r\n getShapeWidth = () => {\r\n return this.__shape.getWidth(true);\r\n }\r\n\r\n getShapeDepth = () => {\r\n return this.__shape.getDepth(true);\r\n }\r\n\r\n getShapeHeight = () => {\r\n return this.__shape.getHeight(true);\r\n }\r\n\r\n addCrownMolding = () => {\r\n const state = store.getState();\r\n const selectedFeature = state.sqftResourceState.selectedFeature;\r\n this.__crownMoldingFeatureId = selectedFeature ? selectedFeature.part.dbFeature.id : null\r\n console.log(\"this.__crownMoldingFeatureId\", this.__crownMoldingFeatureId);\r\n }\r\n\r\n render = (ctx, staticOffset = null, template= RENDER_TEMPLATES.default) => {\r\n if (workspace && workspace.getState().loading) return;\r\n\r\n const fillTemplate = this.getFillColor(ctx);\r\n this.renderBorders(ctx, staticOffset, template, fillTemplate);\r\n this.renderDimensionsInsideShape(ctx);\r\n RenderParts.drawShapeCrownMoldings(ctx, staticOffset, this.__shape);\r\n RenderParts.drawShapeEndCap(ctx, staticOffset, this.__shape);\r\n this.renderHandles(ctx);\r\n //if (!this.__shape.shapeAbsolute.getAbsolutePosition() && !this.__shape.shapeAbsolute.getSnappedWithShape()) {\r\n if (this.__shape.shapeAbsolute.getSnappedShapeGroup() === null) {\r\n //this.renderCrownMolding(ctx);\r\n this.renderDimensionsOutsideShape(ctx);\r\n }\r\n if (Config.isDevMode()) {\r\n this.renderTestShapeLines(ctx, staticOffset, template);\r\n this.renderShapeSnappedGroup(ctx, staticOffset, template);\r\n }\r\n }\r\n\r\n renderMeasurementArrows = (ctx) => {\r\n const points = this.__shape.getPointsPointField();\r\n RenderFigures.drawArrowsAroundPoints(ctx, points, 10);\r\n }\r\n\r\n renderTestShapeLines = (ctx) => {\r\n if (this.__shape.testShapeLines) {\r\n ctx.save();\r\n ctx.beginPath();\r\n ctx.lineWidth = 2;\r\n ctx.strokeStyle = COLORS.gray;\r\n for (const testShapeLine of this.__shape.testShapeLines) {\r\n ctx.moveTo(testShapeLine.from.x, testShapeLine.from.y);\r\n ctx.lineTo(testShapeLine.to.x, testShapeLine.to.y);\r\n }\r\n ctx.stroke();\r\n ctx.closePath();\r\n ctx.restore();\r\n }\r\n }\r\n\r\n renderShapeSnappedGroup = (ctx) => {\r\n // render shape group\r\n let shapeCenter = this.__shape.getCenter();\r\n const pos = getPointField(shapeCenter.x, shapeCenter.y, this.__shape);\r\n const renderText = this.__shape.shapeAbsolute.getSnappedShapeGroup() + \".gr\";\r\n const mText = ctx.measureText(renderText);\r\n ctx.wrapText(renderText, pos.x, pos.y, mText, 22);\r\n }\r\n\r\n renderMeasurementLength = (ctx) => {\r\n const points = this.__shape.getPointsPointField();\r\n RenderParts.drawMeasurementAroundPoints(ctx, points);\r\n }\r\n\r\n renderDimensionsOutsideShape = (ctx) => {\r\n ctx.save();\r\n ctx.beginPath();\r\n this.renderMeasurementArrows(ctx);\r\n this.renderMeasurementLength(ctx);\r\n ctx.closePath();\r\n ctx.restore();\r\n }\r\n\r\n renderDimensionsInsideShape = (ctx) => {\r\n const shapeWidth = this.getShapeWidth();\r\n const shapeHeight = this.getShapeHeight();\r\n const textWidth = 'W: ' + shapeWidth;\r\n const textHeight = 'H: ' + shapeHeight;\r\n const fontSize = config.workspace.fontSizeSmallest;// * config.scale / config.defaultScale;\r\n const font = fontSize + \"px \" + config.activeFontRegular;\r\n const mTextWidth = ctx.measureText(textWidth);\r\n const mTextHeight = ctx.measureText(textWidth);\r\n const {minX, maxX, minY, maxY} = sqftShapeManager.getMinMaxShapePoints(this.__shape,true, true);\r\n void minY;\r\n //middle of the bottom line\r\n let pos = {\r\n x: minX + (maxX - minX) / 2 - mTextWidth.width / 2,\r\n y: maxY - fontSize\r\n };\r\n\r\n // center position\r\n // let shapeCenter = ShapeHelper.getCenterPoint(points);\r\n // let shapeCenterOnField = getPointField(shapeCenter.x, shapeCenter.y, this.__shape);\r\n // let pos = {\r\n // x: shapeCenterOnField.x - mTextWidth.width / 2,\r\n // y: shapeCenterOnField.y\r\n // };\r\n\r\n ctx.textAlign = \"start\";\r\n ctx.fillStyle = COLOR_THEMES[sqftConfig.activeTheme].primary_hover;\r\n\r\n const lineHeight = config.workspace.fontSizeSmallest;\r\n ctx.wrapText(textWidth, pos.x, pos.y - (fontSize / 2), mTextWidth, lineHeight, font);\r\n ctx.wrapText(textHeight, pos.x + 2, pos.y + (fontSize / 2), mTextHeight, lineHeight, font);\r\n }\r\n\r\n getFillColor = () => {\r\n // highlight shape on eyeball click\r\n if (this.__shape.shapeRender.blink.isHighlightedLightOn) {\r\n return RENDER_TEMPLATES.filledActive;\r\n } else {\r\n return RENDER_TEMPLATES.filledPrimary;\r\n }\r\n }\r\n\r\n renderBorders = (ctx,\r\n staticOffset = null,\r\n strokeTemplate= RENDER_TEMPLATES.default,\r\n fillTemplate = RENDER_TEMPLATES.filledPrimary\r\n ) => {\r\n RenderParts.drawShapeBorders(ctx, staticOffset, strokeTemplate, fillTemplate, this.__shape);\r\n const reduxState = store.getState();\r\n const activeButton = reduxState.sqftMenuState.activeButton;\r\n if (activeButton === SIDEBAR_NAVIGATION_CABINET_BUTTONS.handles\r\n || activeButton === SIDEBAR_NAVIGATION_CABINET_BUTTONS.spacer\r\n || activeButton === SIDEBAR_NAVIGATION_CABINET_BUTTONS.crown\r\n || activeButton === SIDEBAR_NAVIGATION_BUTTONS.end_cap\r\n || activeButton === SIDEBAR_NAVIGATION_CABINET_BUTTONS.end_panel\r\n || activeButton === SIDEBAR_NAVIGATION_CABINET_BUTTONS.resize\r\n || activeButton === SIDEBAR_BUTTONS_MENU.delete\r\n ) {\r\n RenderParts.drawHoveredBorders(ctx, staticOffset, this.__shape);\r\n\r\n // Highlight possibility to insert shape between lines\r\n } else if (activeButton === SIDEBAR_NAVIGATION_CABINET_BUTTONS.upper\r\n || activeButton === SIDEBAR_NAVIGATION_CABINET_BUTTONS.lower\r\n || activeButton === SIDEBAR_NAVIGATION_CABINET_BUTTONS.tall\r\n || workspace.getMovingShape()\r\n ) {\r\n const movingShape = workspace.getMovingShape();\r\n const isTestShapePlacedOnTheFloor = getIsShapePlacedOnTheFloor(this.__shape);\r\n const isTestShapePlacedOnTheWall = getIsShapePlacedOnTheWall(this.__shape);\r\n //1. Highlight moving shape if their part ids are equal\r\n //2. Highlight upper shapes if we are dragging new upper cabinet shape\r\n //3. Highlight lower shapes if we are dragging new lower cabinet shape\r\n //4. Highlight lower shapes if we are dragging new tall cabinet shape\r\n if ((movingShape && canShapeBeAutoShifted(workspace.getMovingShape(), this.__shape))\r\n || (activeButton === SIDEBAR_NAVIGATION_CABINET_BUTTONS.upper && isTestShapePlacedOnTheWall)\r\n || (activeButton === SIDEBAR_NAVIGATION_CABINET_BUTTONS.lower && isTestShapePlacedOnTheFloor)\r\n || (activeButton === SIDEBAR_NAVIGATION_CABINET_BUTTONS.tall && isTestShapePlacedOnTheFloor)\r\n ) {\r\n const style = {\r\n lineWidth: 4,\r\n strokeStyle: COLOR.red,\r\n shadowBlur: 2,\r\n extendHoveredLine: 5\r\n };\r\n RenderParts.drawHoveredBorders(ctx, staticOffset, this.__shape, style);\r\n }\r\n }\r\n };\r\n\r\n renderHandles = (ctx) => {\r\n RenderParts.drawHandles(ctx, this.__shape)\r\n };\r\n\r\n getCrownMoldingPoints = () => {\r\n const points = this.__shape.getPointsPointField();\r\n\r\n return RenderCabinets.getDiagonalPointsForTheSquare(points, this.__crownMoldingParams.distance)\r\n }\r\n\r\n // renderCrownMolding = (ctx) => {\r\n // if (this.__crownMoldingFeatureId) {\r\n // const crownMoldingPoints = this.getCrownMoldingPoints();\r\n // RenderCabinets.renderCrownMolding(ctx, crownMoldingPoints);\r\n // }\r\n // };\r\n}\r\n\r\nexport default ShapeCabinet\r\n","import {renderErrorPopup} from \"../../../../../api/api-popups\";\r\nimport workspace from \"../core/workspace\";\r\nimport sqftShape from \"../core/shapes/sqftShape\";\r\nimport sqftShapeManager from \"../store/sqftShapeManager\";\r\n\r\nexport const renderResetSeamPopup = (shape) => {\r\n if (shape instanceof sqftShape) {\r\n shape.setResetSlabModePopupWasDisplayed(true);\r\n sqftShapeManager.resetShapeChangesInTheSlabMode(shape);\r\n\r\n //state.mouseDown = false;\r\n //state.mouseDownPosition = null;\r\n shape.setIsPointsMovable(false);\r\n }\r\n renderErrorPopup(workspace.intl.formatMessage({id: \"sqft.popup.slab.resetChangesMessage\"}))\r\n}\r\n\r\nexport const shouldResetSlabModePopupOnPointMoveBeDisplayed = (shape) => {\r\n if (shape instanceof sqftShape\r\n && (shape.isWithShapePieces()) //|| SlabWorkspace.slabAdditionalShapes.getShapeAdditionalShapes(shape).length > 0\r\n ) {\r\n return !shape.getResetSlabModePopupWasDisplayed();\r\n }\r\n\r\n return false;\r\n}\r\n","export default class BlinkingHighlight {\r\n isHighlighted = false;\r\n isHighlightedLightOn = false;\r\n timer = true;\r\n highliteBlinkTime = 400;\r\n highliteBlinkTimeTotal = 2400;\r\n\r\n constructor() {\r\n }\r\n\r\n setHighlighting = (value) => {\r\n if (!this.isHighlighted && value) {\r\n this.startHighlightingLoop();\r\n } else if (this.isHighlighted && !value) {\r\n this.stopHighlightingLoop();\r\n }\r\n this.isHighlighted = value;\r\n setTimeout( () => {\r\n document.addEventListener(\"click\", this.stopHighlightingLoop)\r\n }, 50);\r\n setTimeout( () => {\r\n this.stopHighlightingLoop();\r\n }, this.highliteBlinkTimeTotal);\r\n };\r\n\r\n startHighlightingLoop = () => {\r\n this.isHighlightedLightOn = true;\r\n setTimeout( () => {\r\n this.isHighlightedLightOn = false\r\n }, this.highliteBlinkTime);\r\n this.timer = setTimeout( () => {\r\n this.startHighlightingLoop();\r\n }, this.highliteBlinkTime * 2);\r\n }\r\n\r\n stopHighlightingLoop = () => {\r\n clearTimeout(this.timer);\r\n this.isHighlighted = false;\r\n //this.isHighlightedLightOn = false; // this will be done in startHighlightingLoop\r\n document.removeEventListener(\"click\", this.stopHighlightingLoop);\r\n }\r\n}\r\n","import isEmpty from \"lodash/isEmpty\";\r\n\r\nimport {getCommonVisualizerType} from \"../../config\";\r\nimport store from \"../../store\";\r\nimport {dbFeatureFilterProperties, dbFeatureRelatedFeaturesProperties, otherMissingProperties} from \"./constants\";\r\n\r\n\r\n/**\r\n * Checks whether to show room feature as in visualizer in the navigation\r\n * @param feature {featureInterface}\r\n * @returns {featureInterface}\r\n */\r\nexport const setRoomNotInVisualizerProperty = (feature) => {\r\n const fabricatorSubscriptions = store.getState().fabricatorState.fabricatorSubscriptions;\r\n if (!feature || !feature.dbFeature || !feature.dbFeature.sharedFeatureName) {\r\n return feature\r\n }\r\n const name = feature.dbFeature.sharedFeatureName.toLowerCase();\r\n const visType = getCommonVisualizerType();\r\n if (name === visType) {\r\n feature.notAvailableInVisualizer = false;\r\n feature.dbFeature.unlocked = true;\r\n return feature\r\n }\r\n if (!Array.isArray(fabricatorSubscriptions)) {\r\n return feature\r\n }\r\n const subscription = fabricatorSubscriptions.find(subscr => subscr.service.toLowerCase() === name);\r\n if (subscription) {\r\n feature.notAvailableInVisualizer = false;\r\n feature.dbFeature.unlocked = true;\r\n if (subscription.thumbnail) {\r\n feature.customThumbnail = subscription.thumbnail\r\n }\r\n }\r\n return feature\r\n}\r\n\r\n/**\r\n * updates existing dbFeature\r\n * @param dbFeature {dbFeatureInterface} // new\r\n * @param existingDbFeature {dbFeatureInterface} // old (existing)\r\n * @param layout {object} // layout\r\n */\r\nexport const updateExistingFeature = (dbFeature, existingDbFeature, layout) => {\r\n if (!existingDbFeature[\"relatedFeatureIds\"] && Array.isArray(dbFeature[\"relatedFeatureIds\"])) {\r\n existingDbFeature[\"relatedFeatureIds\"] = dbFeature[\"relatedFeatureIds\"];\r\n }\r\n // loadRelatedFeatures(dbFeature, layout);\r\n dbFeatureRelatedFeaturesProperties.forEach(property => {\r\n if (!existingDbFeature[property] && Array.isArray(dbFeature[property])) {\r\n existingDbFeature[property] = dbFeature[property];\r\n const parentGroups = layout.getFeatures(true);\r\n dbFeature[property].forEach(dbFeature => {\r\n layout.loadDbFeature(dbFeature, parentGroups)\r\n })\r\n }\r\n })\r\n if ((!Array.isArray(existingDbFeature.stonePricingId) || !existingDbFeature.stonePricingId.length || existingDbFeature.stonePricingId[0] === -1)\r\n && (Array.isArray(dbFeature.stonePricingId) && dbFeature.stonePricingId.length && dbFeature.stonePricingId[0] !== -1)) {\r\n existingDbFeature.stonePricingId = dbFeature.stonePricingId\r\n }\r\n dbFeatureFilterProperties.forEach((key) => {\r\n if ((!existingDbFeature[key] || isEmpty(existingDbFeature[key])) && dbFeature[key] && !isEmpty(dbFeature[key])) {\r\n existingDbFeature[key] = dbFeature[key];\r\n dbFeature.wasUpdatedFromAnotherResponse = true; // to erase ._customDisplayName, because we need filters to create it again!\r\n existingDbFeature.wasUpdatedFromAnotherResponse = true; // to erase ._customDisplayName, because we need filters to create it again!\r\n }\r\n });\r\n otherMissingProperties.forEach((key) => {\r\n if ((!existingDbFeature[key] || isEmpty(existingDbFeature[key])) && dbFeature[key] && !isEmpty(dbFeature[key])) {\r\n existingDbFeature[key] = dbFeature[key];\r\n }\r\n });\r\n if (dbFeature.markUpString) {\r\n existingDbFeature.markUpString = dbFeature.markUpString;\r\n existingDbFeature.price = dbFeature.price;\r\n existingDbFeature.cost = dbFeature.cost;\r\n existingDbFeature.discount = dbFeature.discount;\r\n existingDbFeature.shippingCost = dbFeature.shippingCost;\r\n }\r\n}\r\n\r\n\r\nexport const loadRelatedFeatures = (dbFeature, layout) => {\r\n if (!Array.isArray(dbFeature.relatedFeatureIds) || !dbFeature.relatedFeatureIds.length) {\r\n return\r\n }\r\n dbFeature.relatedFeatureIds.forEach(relFeatureId => {\r\n if (!dbFeature.relatedFeatures) {\r\n dbFeature.relatedFeatures = [];\r\n }\r\n if (dbFeature.relatedFeatures.some(relFeature => relFeature.id === relFeatureId)) {\r\n return // already loaded\r\n }\r\n let loadedDbFeature = null;\r\n for (let i = 0; i < layout.allDbFeatures.length; i++) {\r\n if (layout.allDbFeatures[i].id === relFeatureId) {\r\n loadedDbFeature = layout.allDbFeatures[i];\r\n break;\r\n }\r\n }\r\n if (loadedDbFeature) {\r\n dbFeature.relatedFeatures.push(loadedDbFeature);\r\n } else {\r\n console.log(\"related feature wasn't loaded\"); // it it fires - then something is wrong, we should load related before main features\r\n }\r\n })\r\n // console.log(\"dbFeature.relatedFeatures\", dbFeature.relatedFeatures);\r\n}\r\n","export const getFeatureCropCoors = (feature) => {\r\n if (!feature.metaData[\"CropCoords\"]) {\r\n return null\r\n }\r\n if (!feature.metaData[\"ParsedCropCoords\"]) {\r\n if ((feature.metaData[\"CropCoords\"].length === 1) && (typeof feature.metaData[\"CropCoords\"][0] === \"string\")) {\r\n if (feature.metaData[\"CropCoords\"][0].includes(\", \")) {\r\n feature.metaData[\"ParsedCropCoords\"] = feature.metaData[\"CropCoords\"][0].split(\", \").map(coor => +coor)\r\n } else if (feature.metaData[\"CropCoords\"][0].includes(\",\")) {\r\n feature.metaData[\"ParsedCropCoords\"] = feature.metaData[\"CropCoords\"][0].split(\",\").map(coor => +coor)\r\n }\r\n } else {\r\n feature.metaData[\"ParsedCropCoords\"] = feature.metaData[\"CropCoords\"];\r\n }\r\n }\r\n return feature.metaData[\"ParsedCropCoords\"]\r\n}\r\n","import {LayoutAbbreviation, LayoutType} from \"./constants\";\r\nimport {UseFullSizeImages} from \"../../../config\";\r\n\r\nlet layouts = {};\r\nObject.keys(LayoutType).forEach(layoutName => {\r\n layouts[layoutName] = {\r\n Background: {\r\n ShowerWall: 50100,\r\n CenterWall: 50300,\r\n BackWall: 50600,\r\n Floor: 50700,\r\n BackgroundBG: 50800,\r\n },\r\n ShowerWallAccent: 1000,\r\n Window: {\r\n WindowBody: 45000,\r\n WindowKits: 1100\r\n },\r\n Accessories: {\r\n LargeCornerCaddie: 2010,\r\n LargeCornerCaddie2: 2020,\r\n Fixture: 2100,\r\n LargeCornerSeat: 2310,\r\n LargeCornerSeat2: 2320,\r\n CornerCaddie: 2410,\r\n CornerCaddie2: 2420,\r\n SoapDish: 2500,\r\n SoapDish2: 2510,\r\n SmallCornerShelf: 2600,\r\n GrabBar: 2700,\r\n GrabBar2: 2710,\r\n CornerShelf1: 2810,\r\n CornerShelf2: 2820,\r\n CornerShelf3: 2830,\r\n CornerShelf4: 2840,\r\n CornerShelf5: 2850,\r\n CornerShelf6: 2860,\r\n ShowerPod: 2900,\r\n Seats: 2950,\r\n ShowerRod: 4200,\r\n },\r\n Shower: {\r\n ShowerPan: 3200,\r\n ShowerFixture: 3410,\r\n ShowerFixture2: 3420,\r\n ShowerDoorHandle: 3600,\r\n // Threshold\r\n TubCombo: {\r\n WallConfiguration: 3600,\r\n Liner: 3700,\r\n WalkInTub: 3900,\r\n JettedTub: 4000,\r\n },\r\n },\r\n Walls: {\r\n LeftWall: 40120,\r\n },\r\n Globals: {\r\n ToiletPaper: 8000,\r\n ToiletPaperHolder: 8050,\r\n Towel: 8100,\r\n LightFixture: 8200,\r\n LampFixture: 8250,\r\n DecorWindow: 8300,\r\n DecorSeat: 8400,\r\n },\r\n Bathtub: {\r\n BathTubFixture: 9000,\r\n BathTubBody: 9100,\r\n },\r\n decor: 11111,\r\n skirting_board: 2500,\r\n shower_curb: 3000,\r\n bathtub_body: 5304,\r\n bathtub_fixture: 5300,\r\n window: 45000,\r\n vanity_cabinet: 6100,\r\n vanity_countertop: 6000,\r\n shower_arm: 7315,\r\n shower_head_bundle: 7456,\r\n split_wall: 7000,\r\n towel_bar: 2617,\r\n towel_ring: 2615,\r\n shower_glass: 3549,\r\n grab_bar: 2700,\r\n robe_hook: 5059,\r\n vanity_handle: 5200,\r\n vanity_backsplash: 5500,\r\n vanity_mirror: 5600,\r\n vanity_faucet: 5700,\r\n vanity_sink: 5800,\r\n shower_pan_combo: 6743,\r\n window_body: 7301,\r\n toilet_brush: 9816,\r\n toilet: 9960,\r\n paper_holder: 10004,\r\n shower_wall: 40020,\r\n left_wall_splitter: 40000,\r\n left_wall_crop: 40150,\r\n right_wall_crop: 48030,\r\n front_wall_crop: 49075,\r\n walls_ceiling: 50900,\r\n shower_wall_mirror: 50050,\r\n back_wall: 50100,\r\n front_wall: 50200,\r\n left_wall: 50500,\r\n right_wall: 54000,\r\n };\r\n});\r\n\r\n\r\nconst getLayerDimensions = (layer, currentLayout, canvasDimensions) => {\r\n const fullImagesFactor = UseFullSizeImages ? 177.77 : 100;\r\n const sizeFactor = fullImagesFactor / 100;\r\n\r\n if (layer.coords) {\r\n const COORDS_MAX = 1;\r\n\r\n const x1Percentage = (layer.coords.min_x * 100) / COORDS_MAX;\r\n const x2Percentage = (layer.coords.max_x * 100) / COORDS_MAX;\r\n const y1Percentage = (layer.coords.min_y * 100) / COORDS_MAX;\r\n const y2Percentage = (layer.coords.max_y * 100) / COORDS_MAX;\r\n let x1 = sizeFactor*((canvasDimensions.width * x1Percentage) / 100);\r\n let x2 = sizeFactor*((canvasDimensions.width * x2Percentage) / 100);\r\n let y1 = sizeFactor*((canvasDimensions.height * y1Percentage) / 100);\r\n let y2 = sizeFactor*((canvasDimensions.height * y2Percentage) / 100);\r\n\r\n return {\r\n polygonArray: [[x1, y1], [x2, y1], [x2, y2], [x1, y2]],\r\n width: (x2 - x1),\r\n height:(y2 - y1)\r\n };\r\n }\r\n\r\n // console.log(\"layer without coords\", layer);\r\n\r\n const {zIndex} = layer;\r\n switch (zIndex) {\r\n // case layouts[currentLayout].Background.ShowerWall:\r\n // return {\r\n // polygonArray: [[sizeFactor*350,sizeFactor*50],[sizeFactor*950,sizeFactor*50],[sizeFactor*950,sizeFactor*930],[sizeFactor*350,sizeFactor*930]],\r\n // width: sizeFactor*600,\r\n // height: sizeFactor*900\r\n // };\r\n case layouts[currentLayout].Walls.CenterWall:\r\n case layouts[currentLayout].Background.CenterWall: {\r\n switch (currentLayout) {\r\n case LayoutAbbreviation.Layout1: {\r\n return null;\r\n }\r\n case LayoutAbbreviation.Layout4: {\r\n return {\r\n polygonArray: [[sizeFactor*360,0],[sizeFactor*760,0],[sizeFactor*760,sizeFactor*880],[sizeFactor*360,sizeFactor*880]],\r\n width: sizeFactor*400,\r\n height: sizeFactor*880\r\n };\r\n }\r\n }\r\n return null;\r\n }\r\n case layouts[currentLayout].Walls.RightWall:\r\n case layouts[currentLayout].Background.RightWall: {\r\n switch (currentLayout) {\r\n case LayoutAbbreviation.Layout1: {\r\n return {\r\n polygonArray: [[sizeFactor*750,0],[sizeFactor*1920,0],[sizeFactor*1920,sizeFactor*1080],[sizeFactor*750,sizeFactor*1080]],\r\n width: sizeFactor*1170,\r\n height: sizeFactor*1080\r\n };\r\n }\r\n case LayoutAbbreviation.Layout4: {\r\n return {\r\n polygonArray: [[sizeFactor*120,0],[sizeFactor*1920,0],[sizeFactor*1920,sizeFactor*930],[sizeFactor*120,sizeFactor*930]],\r\n width: sizeFactor*1900,\r\n height: sizeFactor*930\r\n };\r\n }\r\n }\r\n return null;\r\n }\r\n case layouts[currentLayout].Walls.LeftWall:\r\n case layouts[currentLayout].Background.LeftWall: {\r\n switch (currentLayout) {\r\n case LayoutAbbreviation.Layout1: {\r\n return {\r\n polygonArray: [[0,0],[sizeFactor*600,0],[sizeFactor*600,sizeFactor*1080],[0,sizeFactor*1080]],\r\n width: sizeFactor*600,\r\n height: sizeFactor*1080\r\n };\r\n }\r\n case LayoutAbbreviation.Layout4: {\r\n return {\r\n polygonArray: [[0,0],[sizeFactor*600,0],[sizeFactor*600,sizeFactor*1080],[0,sizeFactor*1080]],\r\n width: sizeFactor*600,\r\n height: sizeFactor*1080\r\n };\r\n }\r\n }\r\n return null;\r\n }\r\n case layouts[currentLayout].Background.Floor: {\r\n switch (currentLayout) {\r\n default: {\r\n // case LayoutAbbreviation.Layout1: {\r\n return {\r\n polygonArray: [[0,sizeFactor*600],[sizeFactor*1920,sizeFactor*600],[sizeFactor*1920,sizeFactor*1080],[0,sizeFactor*1080]],\r\n width: sizeFactor*1920,\r\n height: sizeFactor*480\r\n };\r\n }\r\n }\r\n }\r\n case layouts[currentLayout].Background.ShowerWall:\r\n switch (currentLayout) {\r\n case LayoutAbbreviation.Layout1: {\r\n return {\r\n polygonArray: [[sizeFactor*350,0],[sizeFactor*1650,0],[sizeFactor*1650,sizeFactor*930],[sizeFactor*350,sizeFactor*930]],\r\n width: sizeFactor*1300,\r\n height: sizeFactor*930\r\n };\r\n }\r\n case LayoutAbbreviation.Layout4: {\r\n return {\r\n polygonArray: [[sizeFactor*250,0],[sizeFactor*1250,0],[sizeFactor*1250,sizeFactor*930],[sizeFactor*250,sizeFactor*930]],\r\n width: sizeFactor*1000,\r\n height: sizeFactor*930\r\n };\r\n }\r\n }\r\n return null;\r\n default:\r\n return null\r\n }\r\n};\r\n\r\nexport default {\r\n layouts,\r\n getLayerDimensions\r\n}\r\n\r\n\r\n","import {IntermediatePart} from \"../intermediatePart\";\r\nexport default class NonVisualizerSubPart extends IntermediatePart {\r\n constructor(isChild, partId, partName) {\r\n super(isChild);\r\n this.partId = partId;\r\n this.visible = true;\r\n this.partName = partName;\r\n // this.allFeaturesReceived = true;\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new NonVisualizerSubPart(false, this.partId, dbFeature.groupName));\r\n }\r\n\r\n navigationSubItems(filters, searchText) {\r\n return this.navigationNoMetaSubItems(filters, searchText)\r\n }\r\n}\r\n","import {Part} from \"../part\";\r\nimport {toiletThumbnail} from '../../../bvComponent/core/assets';\r\nimport {PartMenuType} from \"../../../visComponents/constants\";\r\nimport DesignNavigationItem from \"../../../visComponents/designNavigationItem\";\r\nimport {IntermediatePart} from \"../intermediatePart\";\r\nimport {removeLookPointFor} from \"../../lookNavigation/lookFunctions2\";\r\nimport {getCurrentRoomType} from \"../../../appLayout\";\r\nimport {LOOK_ROOM_TYPES} from \"../constants\";\r\n\r\nexport class Toilet extends Part {\r\n static id = 'Toilet';\r\n\r\n constructor() {\r\n super(true, false, PartMenuType.Complex);\r\n this.menuType = PartMenuType.Complex;\r\n this.partName = 'Toilet';\r\n this.translateId = \"visualizer.bathroom.toilet\";\r\n this.homePageTitle = 'Toilets';\r\n this.partThumbnail = toiletThumbnail;\r\n this.toilet = null;\r\n this.relatedGroupNames = [\"Toilet\"];\r\n }\r\n\r\n load(dbFeature, loadFeature = true) {\r\n if (dbFeature.groupName === \"Toilet\") {\r\n if (!this.toilet) {\r\n this.toilet = new ToiletBody(true);\r\n this.relatedItems.push(this.toilet);\r\n this.toilet.getParent = () => this;\r\n }\r\n if (!this.categoryEnabled) {\r\n this.categoryEnabled = true\r\n }\r\n if (loadFeature) {\r\n this.toilet.load(dbFeature);\r\n }\r\n return true\r\n }\r\n return false\r\n }\r\n\r\n isSubTypeWithItems() {\r\n return false;\r\n }\r\n\r\n subParts() {\r\n return this.relatedItems.map(_ => new DesignNavigationItem(_.partName, _));\r\n }\r\n\r\n setDefaultPartAfterSubTypeClick() {\r\n return this.subParts()[0]\r\n }\r\n\r\n setDefault(layout) {\r\n this.relatedItems.forEach(_ => _.setDefault(layout));\r\n }\r\n}\r\n\r\nclass ToiletBody extends IntermediatePart {\r\n\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'toilet';\r\n this.partName = 'Toilet';\r\n this.translateId = \"visualizer.bathroom.toilet\";\r\n this.homePageTitle = 'Toilets';\r\n this.canBeDisabled = true;\r\n }\r\n\r\n // getArrayOfConditions() {\r\n // let conditions = super.getArrayOfConditions(); //roomLayout\r\n // const layout = this.getParent().layout;\r\n // const showerParent = layout.parts[Shower.id];\r\n // const showerSize = showerParent.showerSize();\r\n // if (showerParent && showerSize && !IS_BATHROOM_OLD_BV_SCENE) {\r\n // conditions.push({\r\n // propName: \"ShowerSize\",\r\n // propValue: showerSize\r\n // });\r\n // }\r\n // return conditions\r\n // }\r\n\r\n canDisplayDemoPoint(parentObject) {\r\n if (getCurrentRoomType() === LOOK_ROOM_TYPES.as) {\r\n return removeLookPointFor(parentObject, 6, \"1\")\r\n }\r\n return true\r\n }\r\n}\r\n\r\n\r\n","import {getMissingFeaturesAndClickThem} from \"./lookNavigation/lookNavigationFunctions\";\r\n\r\nexport const featureCanChangeShowerSize = (feature) => {\r\n if (!feature) {\r\n return false\r\n }\r\n return feature.partId === \"shower_pan_combo\" || feature.partId === \"walk_in_tub\" || feature.partId === \"shower_body\"\r\n}\r\n\r\nconst neededFeatureGroupsToCheckOnShowerSizeChange = document.kvConfig.toolVersion === 5\r\n ? [\"shower_pan_combo\", \"shower_interior_wall\", \"left_wall\", \"right_wall\", \"bathroom_floor\", \"shower_fixture\"]\r\n : [\"shower_wall\", \"split_wall\", \"left_wall_splitter\", \"bathroom_floor\", \"front_wall\", \"shower_fixture\"];\r\n\r\n/**\r\n * Checks needed features on ShowerSize change\r\n * @param clickedFeature {object}\r\n * @returns {promise}\r\n */\r\nexport const searchForSameNameWallsBeforeFeatureApply = async (clickedFeature) => {\r\n if (!clickedFeature.getParent) {\r\n return\r\n }\r\n const showerPanComboParent = clickedFeature.getParent();\r\n if (clickedFeature.metaData[\"ShowerSize\"] && clickedFeature.metaData[\"ShowerSize\"][0] && showerPanComboParent.activeFeature\r\n && showerPanComboParent.activeFeature.metaData[\"ShowerSize\"]\r\n && (showerPanComboParent.activeFeature.metaData[\"ShowerSize\"][0] !== clickedFeature.metaData[\"ShowerSize\"][0])) {\r\n\r\n const showerParent = showerPanComboParent.getParent();\r\n const layout = showerParent.layout;\r\n\r\n let missingFeatures = [];\r\n const newSizeCondition = {\r\n propName: \"ShowerSize\",\r\n propValue: clickedFeature.metaData[\"ShowerSize\"][0]\r\n };\r\n neededFeatureGroupsToCheckOnShowerSizeChange.forEach((partId) => {\r\n const featureGroup = layout.getFeatureGroupByPartId(partId);\r\n if (featureGroup && featureGroup.activeFeature && !featureGroup.activeFeature.matchesMetaForCondition(newSizeCondition)) {\r\n const navigationItemName = featureGroup.activeFeature.getSplittedFeatureName();\r\n const newConditions = featureGroup.getArrayOfConditions().map(condition => {\r\n if (condition.propName === \"ShowerSize\") {\r\n return newSizeCondition\r\n }\r\n return condition\r\n });\r\n const featureFound = featureGroup.features.find(feature => {\r\n return (feature.getSplittedFeatureName() === navigationItemName) && feature.matchesMetaForArrayOfConditions(newConditions)\r\n });\r\n if (!featureFound &&\r\n !(featureGroup && featureGroup.alreadyRequestedFeatureNames && featureGroup.alreadyRequestedFeatureNames.includes(navigationItemName))) {\r\n missingFeatures.push({\r\n relatedItem: featureGroup,\r\n navigationItemName,\r\n setCurrentFeature: false\r\n })\r\n }\r\n }\r\n });\r\n if (missingFeatures.length) {\r\n await getMissingFeaturesAndClickThem(missingFeatures, true)\r\n }\r\n }\r\n\r\n return Promise.resolve();\r\n}\r\n","import {sqftPost} from \"./sqftApi\";\r\nimport sqftConfig from \"../components/canvas/store/sqftConfig\";\r\n\r\nconst HARDCODED_DOMAIN = sqftConfig.threeD.useStagingDomain ? \"https://quotekandb.com\" : null; //\r\n\r\nexport default class SqftJsonApi {\r\n static postCabinetSet(data, options = {}) {\r\n return sqftPost(\"/api/AR/Composer\", data, {...options, domain: HARDCODED_DOMAIN});\r\n }\r\n\r\n static getCountertops(data, options = {}) {\r\n return sqftPost(\"/api/AR/Composer/countertop\", data,{...options, domain: HARDCODED_DOMAIN});\r\n }\r\n\r\n static getResizedCabinet(data, options = {}) {\r\n return sqftPost(\"/api/AR/Composer/cabinet_resize\", data,{...options, domain: HARDCODED_DOMAIN});\r\n }\r\n\r\n static getResizedCornerCabinet(data, options = {}) {\r\n return sqftPost(\"/api/AR/Composer/corner_cabinet_resize\", data,{...options, domain: HARDCODED_DOMAIN});\r\n }\r\n\r\n static getWall(data, options = {}) {\r\n return sqftPost(\"/api/AR/Composer/wall\", data,{...options, domain: HARDCODED_DOMAIN});\r\n }\r\n}\r\n","import workspace from \"../workspace\";\r\nimport Box from \"./textBox/box\";\r\nimport IText from \"./textBox/iText\";\r\n\r\nexport default class TextBox {\r\n // holds all our labels\r\n _posOnField = {};\r\n _placeholder = '';\r\n _design = {\r\n width: 50,\r\n height: 20,\r\n fillStyle: 'rgba(255,255,255, 0.7)', // transparent\r\n };\r\n box = null;\r\n text = null;\r\n\r\n //Initialize a new Box, add it, and invalidate the canvas\r\n addRect() {\r\n this.box = new Box(this._posOnField, this._design);\r\n this.text = new IText(this._placeholder, 'playregular', 0, 0, 100, 25, 0, this.box);\r\n }\r\n\r\n constructor(posOnField, placeholder, design) {\r\n this._posOnField = posOnField;\r\n this._placeholder = placeholder ? placeholder : this._placeholder;\r\n this._design = design ? design : this._design;\r\n }\r\n\r\n init() {\r\n this.addRect(this._design);\r\n workspace.textBoxManager.addTextBox(this);\r\n }\r\n\r\n deregisterEvents = () => {\r\n this.box.deregisterEvents();\r\n this.text.deregisterEvents();\r\n }\r\n\r\n reInitEvents = () => {\r\n this.box.reInitEvents();\r\n this.text.reInitEvents();\r\n }\r\n\r\n export() {\r\n return {\r\n posOnField: {\r\n x: this.box.posX,\r\n y: this.box.posY,\r\n },\r\n placeholder: this.text.modelText.txt,\r\n design: this.box.design\r\n }\r\n }\r\n\r\n import() {\r\n\r\n }\r\n}\r\n\r\n\r\n","import uniqBy from \"lodash/uniqBy\";\r\n\r\nimport * as types from '../actions/actionTypes';\r\nimport {isSameVisualizerWizard} from \"../bvcomponents/look/lookNavigation/lookMain/lookWizard/lookWizardFunctions2\";\r\nimport {getCommonVisualizerType, IS_LIXIL_UI} from \"../config\";\r\n\r\nconst initialState = {\r\n wizardIsActive: false, // is used on the materials page instead of the quotingtool\r\n wizardIsActiveObject: [], // is used for visualizer switching {\"kvScene\": false, \"bvLook\": true}\r\n wizardConfig: [], // arrayOf wizardObjectInterface // this is not used for now, it is a regular quoting tool filters wizard\r\n// {\r\n// id: 1,\r\n// name: \"Count wiz\",\r\n// description: \"some desc\",\r\n// enableForVisualizer: false,\r\n// enableForQuoting: true,\r\n// featureGroupName: \"Countertop\", // empty input case\r\n// isFinished: false, // frontend property\r\n// filterGroups: [\r\n// {\r\n// id: 43,\r\n// name: \"Countertop Material\",\r\n// type: \"Single\",\r\n// values: [],\r\n// visualType: \"ListWithCheckBoxes\"\r\n// },\r\n// {\r\n// id: 35,\r\n// name: \"Manufacturer \",\r\n// type: \"Single\",\r\n// values: [],\r\n// visualType: \"ImageList\",\r\n// },\r\n// {\r\n// id: 15,\r\n// name: \"Stone Color\",\r\n// type: \"Single\",\r\n// values: [],\r\n// visualType: \"ColorsWithColumns\"\r\n// },\r\n// ]\r\n// }\r\n // wizardActiveFilterGroupIndex: 0\r\n wizardList: [],\r\n wizardActiveItem: null,\r\n // wizardActiveStep: 0, // was -1 do not show the welcome screen on QKB and Lixil too\r\n wizardActiveStep: IS_LIXIL_UI ? -1 : 0, // do not show the welcome screen on QKB // reverted per solid surface request\r\n wizardSelectedValues: {},\r\n allWizardsValues: [], // [wizardAllObjectInterface]\r\n wizardShowFeatureSection: null,\r\n wizardMissingFeatures: {}, // \"groupName\": [\"string1\", \"string2\", ...]\r\n wizardWasRestored: false, // for complete popup\r\n wizardConflictingSteps: [], // we need to show the flow was changed popup, {wizardConflictingObjectInterface}\r\n wizardConflictPopupOpened: false,\r\n wizardSqftCartItems: [], // we can't set cart items directly, but we need to set them in wizard\r\n};\r\n\r\nexport const getUpdatedAllWizardValues = (state, quoteIndex, wizardItemId, wizardSelectedValues) => {\r\n const newWizObject = {\r\n quoteIndex,\r\n wizardItemId,\r\n lastVisitedStep: state.wizardActiveStep,\r\n visualizer: getCommonVisualizerType(),\r\n wizardSelectedValues: Object.assign({}, wizardSelectedValues)\r\n };\r\n const existingIndex = state.allWizardsValues.findIndex(wizSelObject => {\r\n return wizSelObject.wizardItemId === newWizObject.wizardItemId\r\n && (wizSelObject.quoteIndex === newWizObject.quoteIndex) && isSameVisualizerWizard(wizSelObject)\r\n });\r\n existingIndex > -1\r\n ? state.allWizardsValues.splice(existingIndex, 1, newWizObject)\r\n : state.allWizardsValues.push(newWizObject);\r\n\r\n state.allWizardsValues = state.allWizardsValues.map(wizObject => {\r\n if (wizObject.quoteIndex === quoteIndex && isSameVisualizerWizard(wizObject)) {\r\n wizObject.isLastActiveWizard = wizObject.wizardItemId === wizardItemId // to return back and force correctly\r\n }\r\n return wizObject\r\n });\r\n\r\n return [...state.allWizardsValues]\r\n}\r\n\r\nexport default function(state = initialState, action) {\r\n\r\n switch(action.type) {\r\n\r\n case types.SET_WIZARD_IS_ACTIVE: {\r\n const newState = Object.assign({}, state, {wizardIsActive: action.payload.wizardIsActive});\r\n if (action.payload.visualizerType && !state.wizardIsActiveObject[action.payload.visualizerType]) {\r\n newState.wizardIsActiveObject = {\r\n ...state.wizardIsActiveObject,\r\n [action.payload.visualizerType]: action.payload.wizardIsActive\r\n }\r\n }\r\n return newState;\r\n }\r\n case types.SET_WIZARD_ACTIVE_FILTER_GROUP_INDEX: // NOT USED!\r\n case types.SET_WIZARD_CONFIG:\r\n case types.SET_WIZARD_SHOW_FEATURE_SECTION:\r\n case types.RESTORE_ALL_WIZARD_SELECTED_VALUES:\r\n case types.SET_WIZARD_CONFLICT_POPUP_OPENED:\r\n case types.SET_WIZARD_SQFT_CART_ITEMS:\r\n case types.SET_WIZARD_CONFLICT_STEPS:\r\n return Object.assign({}, state, {\r\n ...action.payload\r\n });\r\n case types.SET_WIZARD_LIST:\r\n return Object.assign({}, state, {\r\n wizardList: uniqBy([...state.wizardList, ...action.payload.wizardList], wizItem => wizItem.id)\r\n });\r\n case types.SET_WIZARD_ACTIVE_ITEM:\r\n if (action.payload.wizardActiveItem) {\r\n const alreadySelectedWizard = state.allWizardsValues.find(wizard => {\r\n return wizard.wizardItemId === action.payload.wizardActiveItem.id && (wizard.quoteIndex === action.payload.quoteIndex)\r\n });\r\n if (alreadySelectedWizard) {\r\n action.payload.wizardSelectedValues = Object.assign({}, alreadySelectedWizard.wizardSelectedValues); // restore added data\r\n action.payload.wizardActiveStep = Number.isInteger(alreadySelectedWizard.lastVisitedStep)\r\n ? alreadySelectedWizard.lastVisitedStep // restore last step\r\n : Object.keys(alreadySelectedWizard.wizardSelectedValues).length // restore last step (just in case lastVisitedStep is missing)\r\n action.payload.wizardWasRestored = true // for complete popup\r\n } else if ((state.wizardActiveStep === -1) && action.payload.wizardActiveItem.skipStartStep) {\r\n action.payload.wizardActiveStep = 0;\r\n }\r\n action.payload.allWizardsValues = state.allWizardsValues.map(wizObject => {\r\n if (wizObject.quoteIndex === action.payload.quoteIndex && isSameVisualizerWizard(wizObject)) {\r\n wizObject.isLastActiveWizard = wizObject.wizardItemId === action.payload.wizardActiveItem.id // to return back and force correctly\r\n }\r\n return wizObject\r\n })\r\n }\r\n return Object.assign({}, state, {\r\n ...action.payload,\r\n });\r\n case types.SET_WIZARD_ACTIVE_STEP: {\r\n return Object.assign({}, state, {\r\n wizardActiveStep: action.payload.wizardActiveStep,\r\n wizardSelectedValues: action.payload.wizardSelectedValues,\r\n wizardConflictingSteps: action.payload.wizardConflictingSteps,\r\n wizardWasRestored: false,\r\n });\r\n }\r\n case types.SET_WIZARD_SELECTED_VALUES: {\r\n if (action.payload.allWizardsValues) {\r\n return Object.assign({}, state, {\r\n allWizardsValues: action.payload.allWizardsValues,\r\n wizardSelectedValues: action.payload.wizardSelectedValues,\r\n wizardConflictingSteps: action.payload.wizardConflictingSteps\r\n });\r\n }\r\n return Object.assign({}, state, {\r\n wizardSelectedValues: action.payload.wizardSelectedValues,\r\n wizardConflictingSteps: action.payload.wizardConflictingSteps\r\n });\r\n }\r\n case types.SET_WIZARD_MISSING_FEATURES: {\r\n const wizardMissingFeatures = {\r\n ...state.wizardMissingFeatures,\r\n [action.payload.groupName]: action.payload.wizardMissingFeatures\r\n }\r\n return Object.assign({}, state, {wizardMissingFeatures});\r\n }\r\n case types.SET_ALL_WIZARD_SELECTED_VALUES: {\r\n const {wizardSelectedValues, quoteIndex, wizardItemId} = action.payload;\r\n const existingAllObject = state.allWizardsValues.find(wizSelObject => {\r\n return wizSelObject.wizardItemId === wizardItemId && wizSelObject.quoteIndex === quoteIndex\r\n });\r\n const existingValues = existingAllObject ? existingAllObject.wizardSelectedValues : {};\r\n const updatedValues = Object.assign({}, existingValues, wizardSelectedValues)\r\n const allWizardsValues = getUpdatedAllWizardValues(state, quoteIndex, wizardItemId, updatedValues);\r\n return Object.assign({}, state, {allWizardsValues});\r\n }\r\n case types.SET_LOOK_OPENED:\r\n if (!action.payload.lookOpened && state.wizardActiveItem) {\r\n return Object.assign({}, state, { wizardActiveItem: null });\r\n }\r\n break;\r\n }\r\n\r\n return state;\r\n\r\n}\r\n","import {LOOK_ROOM_TYPES} from \"../bvcomponents/look/core/constants\";\r\n\r\n/**\r\n * @param preset {object} visualizer management preset\r\n * @param forVisualizerType {string} visualizer type\r\n * @return {object} visualizer management preset\r\n */\r\nexport const updatePresetRoomLayout = (preset, forVisualizerType = document.kvConfig.visualizerType) => {\r\n if (!preset.lookId) {\r\n preset.lookId = 0;\r\n }\r\n if ((forVisualizerType === \"bvLook\")) {\r\n if (preset.roomType === LOOK_ROOM_TYPES.as) {\r\n preset.layout_type = preset.layout_type > 20\r\n ? preset.layout_type - 10\r\n : preset.layout_type < 10\r\n ? preset.layout_type + 10\r\n : preset.layout_type;\r\n } else {\r\n preset.layout_type = preset.layout_type >= 10\r\n ? preset.layout_type - 10\r\n : preset.layout_type;\r\n }\r\n }\r\n return preset\r\n}\r\n\r\nexport const updatePresetsArray = (responseDefaults, forVisualizerType) => {\r\n let bvPresets = JSON.parse(responseDefaults) || [];\r\n const noPresetsAtAll = bvPresets.every(preset => !preset.id);\r\n return bvPresets.map((preset, presetIndex) => {\r\n if (noPresetsAtAll) {\r\n preset.id = presetIndex + 1;\r\n } else if (!Number.isInteger(preset.id)) {\r\n preset.id = presetIndex + 100 // 100 is to make id's really unique\r\n }\r\n preset = updatePresetRoomLayout(preset, forVisualizerType);\r\n return preset\r\n });\r\n}\r\n","import CountertopCommon from \"../countertopCommon\";\r\nimport Appliance from \"../../parts/appliance\";\r\nimport {LayoutAbbreviations, METADATA} from \"../../constants\";\r\n\r\nexport default class Countertop extends CountertopCommon {\r\n constructor(isChild, partNumber = 0) {\r\n super(isChild);\r\n this.partNumber = partNumber;\r\n this.partId = 'countertop';\r\n this.partName = 'Countertop';\r\n this.translateId = \"visualizer.kitchen.countertop.countertop\";\r\n this.isStoneFeature = true;\r\n this.hasAdditionalParts = true;\r\n this.allWallsCanBeApplied = true;\r\n if (isChild) {\r\n this.nextFeaturesPageToLoadArray = {};\r\n LayoutAbbreviations.forEach(layoutAbbreviation => {\r\n this.nextFeaturesPageToLoadArray[layoutAbbreviation] = {\r\n page: 0,\r\n allReceived: false,\r\n };\r\n });\r\n }\r\n }\r\n\r\n load(dbFeature) {\r\n this.fixEdgeMeta(dbFeature);\r\n if (dbFeature.metaData[\"MountType\"] && dbFeature.metaData[\"MountType\"].includes(\"0\")) {\r\n dbFeature.metaData[\"MountType\"] = [METADATA.ALL]\r\n }\r\n if (dbFeature.metaData[\"MountWidth\"] && dbFeature.metaData[\"MountWidth\"].includes(\"0\")) {\r\n dbFeature.metaData[\"MountWidth\"] = [METADATA.ALL]\r\n }\r\n const partNumber = (dbFeature.metaData[\"Part\"] && +dbFeature.metaData[\"Part\"][0]) === 1 ? 1 : 2;\r\n return super.load_(dbFeature, new Countertop(false, partNumber), true, partNumber === 1 ? 'features' : 'featuresParts');\r\n }\r\n\r\n getCurrentSinkMetaData() {\r\n const sinkParent = this.getParent().sink;\r\n let metaObject = {};\r\n if (sinkParent && sinkParent.activeFeature) {\r\n const sinkMeta = sinkParent.activeFeature.metaData[\"MountType\"];\r\n if (sinkMeta && (sinkMeta !== \"0\") && !sinkMeta.includes(\"0\")) {\r\n metaObject[\"MountType\"] = Array.isArray(sinkMeta) ? sinkMeta[0] : sinkMeta\r\n }\r\n const mountWidthMeta = sinkParent.activeFeature.metaData[\"MountWidth\"];\r\n if (mountWidthMeta && (mountWidthMeta !== \"0\") && !mountWidthMeta.includes(\"0\")) { // if 0 - we are showing all faucets\r\n metaObject[\"MountWidth\"] = mountWidthMeta\r\n }\r\n }\r\n return metaObject\r\n }\r\n\r\n getArrayOfConditions() {\r\n const conditions = super.getArrayOfConditions();\r\n const currentSinkMetaData = this.getCurrentSinkMetaData();\r\n [\"MountType\", \"MountWidth\"].forEach(propName => {\r\n if (currentSinkMetaData[propName]) {\r\n conditions.push({\r\n propName,\r\n propValue: currentSinkMetaData[propName]\r\n })\r\n }\r\n })\r\n // console.log(\"conditions\", conditions);\r\n return conditions;\r\n }\r\n\r\n getActiveFeaturePartsAccordingToActiveFeature(fromFeature = this.activeFeature, activeFeatureConditions = []) {\r\n let activeFeatureParts = [];\r\n if (fromFeature && fromFeature.partNumber) {\r\n const name1 = fromFeature.getSplittedFeatureName();\r\n // console.log(\"name1\", name1);\r\n let arrayOfConditions = activeFeatureConditions.length\r\n ? activeFeatureConditions\r\n : this.getActiveFeatureConditions(fromFeature);\r\n\r\n const conditionsWithoutSink = arrayOfConditions.filter(condition => {\r\n return condition.propName !== \"MountType\" && condition.propName !== \"MountWidth\"\r\n })\r\n\r\n const countertopParent = this.getParent();\r\n const applianceParent = countertopParent.layout.parts[Appliance.id];\r\n // const sink = countertopParent.sink;\r\n\r\n activeFeatureParts = this.featuresParts.filter((feature) => {\r\n if (feature.metaData[\"Part\"] && feature.metaData[\"Part\"].includes(\"2\")\r\n && applianceParent && applianceParent.stove && !applianceParent.stove.disabled && applianceParent.stove.activeFeature) {\r\n return false\r\n }\r\n // if (feature.metaData[\"Part\"] && feature.metaData[\"Part\"].includes(\"4\")\r\n // && sink && !sink.disabled && sink.activeFeature && sink.activeFeature.metaData[\"MountType\"] && sink.activeFeature.metaData[\"MountType\"].includes(\"ST\")\r\n // && !feature.matchesMetaForCondition(\"MountType\", \"ST\")) {\r\n // return false\r\n // }\r\n if (feature.metaData[\"Part\"] && (feature.metaData[\"Part\"].includes(\"2\") || feature.metaData[\"Part\"].includes(\"3\"))) {\r\n return name1 === feature.getSplittedFeatureName() && feature.matchesMetaForArrayOfConditions(conditionsWithoutSink)\r\n }\r\n return name1 === feature.getSplittedFeatureName() && feature.matchesMetaForArrayOfConditions(arrayOfConditions)\r\n });\r\n\r\n // console.log(\"this.featuresParts\", this.featuresParts);\r\n // console.log(\"activeFeatureParts\", activeFeatureParts);\r\n activeFeatureParts.forEach((activeFeaturePart) => {\r\n activeFeaturePart.disabled = this.disabled\r\n });\r\n }\r\n return activeFeatureParts\r\n }\r\n}\r\n","import uniqBy from \"lodash/uniqBy\";\r\n\r\nimport {IntermediatePart} from \"../intermediatePart\";\r\nimport store from \"../../../../store\";\r\n\r\nexport default class CountertopCommon extends IntermediatePart {\r\n\r\n constructor(props) {\r\n super(props);\r\n }\r\n\r\n fixEdgeMeta(dbFeature) {\r\n if (dbFeature.metaData[\"Edge\"]) {\r\n const metaValue = Array.isArray(dbFeature.metaData[\"Edge\"]) ? dbFeature.metaData[\"Edge\"][0] : dbFeature.metaData[\"Edge\"];\r\n switch (metaValue) {\r\n case \"European Edge\":\r\n dbFeature.metaData[\"Edge\"] = \"Eased\";\r\n break;\r\n case \"Polished Edge\":\r\n dbFeature.metaData[\"Edge\"] = \"Pencil\";\r\n break;\r\n case \"Waterfall Edge\":\r\n dbFeature.metaData[\"Edge\"] = \"Waterfall\";\r\n break;\r\n default:\r\n dbFeature.metaData[\"Edge\"] = metaValue.split(\" Edge\")[0];\r\n break;\r\n }\r\n } else {\r\n // console.log(\"No Edge Metadata\", dbFeature);\r\n }\r\n }\r\n\r\n navigationSubItems(filters, searchText) {\r\n const filteredAvailableFeatures = super.getFeaturesBySearchText(super.getFilteredFeaturesByFilters(filters), searchText);\r\n let featuresToDisplay = super.navigationSubItemsWithFilterMultipleConditions(this.getArrayOfConditions(), filteredAvailableFeatures);\r\n\r\n let newFeatures = uniqBy(this.getSameEdgesFeatures(featuresToDisplay), (feature) => {\r\n return feature.dbFeature.id && feature.getSplittedFeatureName()\r\n });\r\n\r\n for (let i = 0; i < featuresToDisplay.length; i++) {\r\n const currentFeature = featuresToDisplay[i];\r\n const currentFeatureName = currentFeature.getSplittedFeatureName();\r\n if (!newFeatures.some(addedFeature => {\r\n return addedFeature.dbFeature.id === currentFeature.dbFeature.id\r\n || addedFeature.getSplittedFeatureName() === currentFeatureName\r\n })) {\r\n newFeatures.push(currentFeature)\r\n }\r\n }\r\n\r\n return this.returnNavItemsFromFeatures(newFeatures)\r\n }\r\n\r\n setActiveFeatureParts(fromFeature = this.activeFeature, activeFeatureConditions = []) {\r\n if (!this.hasAdditionalParts) {\r\n return []\r\n }\r\n let activeFeatureParts = this.getActiveFeaturePartsAccordingToActiveFeature(fromFeature, activeFeatureConditions);\r\n return activeFeatureParts\r\n }\r\n\r\n getActiveFeatureConditions() {\r\n if (this.activeFeature) {\r\n return [...this.getArrayOfConditions(), {\r\n propName: \"Edge\",\r\n propValue: this.activeFeature.metaData[\"Edge\"]\r\n }]\r\n }\r\n return this.getArrayOfConditions()\r\n }\r\n\r\n setLayers(layout) {\r\n if (this.activeFeature && (this.activeFeature.matchesMetaForArrayOfConditions(this.getArrayOfConditions()))) {\r\n this.checkIfFeaturePartIsMatching();\r\n super.setLayers(layout);\r\n } else {\r\n this.setDefault();\r\n super.setLayers(layout);\r\n }\r\n }\r\n\r\n getSameEdgesFeatures(featuresToDisplay) {\r\n let currentEdgeMetaData = \"\";\r\n if (this.activeFeature && this.activeFeature.metaData[\"Edge\"]) {\r\n currentEdgeMetaData = Array.isArray(this.activeFeature.metaData[\"Edge\"]) ? this.activeFeature.metaData[\"Edge\"][0] : this.activeFeature.metaData[\"Edge\"];\r\n }\r\n if (!currentEdgeMetaData) {\r\n const edgeFeatureGroup = this.getParent().edge;\r\n if (edgeFeatureGroup && edgeFeatureGroup.activeFeature) {\r\n currentEdgeMetaData = edgeFeatureGroup.activeFeature.dbFeature.sharedFeatureName;\r\n }\r\n }\r\n if (currentEdgeMetaData) {\r\n featuresToDisplay = featuresToDisplay.filter((feature) => {\r\n return !feature.notAvailableInVisualizer && feature.metaData[\"Edge\"] && (\r\n Array.isArray(feature.metaData[\"Edge\"])\r\n ? feature.metaData[\"Edge\"].includes(currentEdgeMetaData)\r\n : feature.metaData[\"Edge\"] === currentEdgeMetaData\r\n )\r\n });\r\n }\r\n return featuresToDisplay\r\n }\r\n\r\n getFeatureEdgeFilter = (feature, edgeFilterGroup) => {\r\n if (!feature) {\r\n return null\r\n }\r\n if (!edgeFilterGroup) {\r\n const filterGroups = store.getState().filterState.filterGroups;\r\n edgeFilterGroup = filterGroups.find(group => group.name === \"Edge\" || group.name === \"Edge Profile\");\r\n }\r\n return feature.dbFeature.fabFilterValueIDs[edgeFilterGroup.id] || feature.dbFeature.filterValueIDs[edgeFilterGroup.id]\r\n };\r\n\r\n tryToSetTheSameFeature(filteredFeatures = [], partName = \"\") {\r\n if (this.activeFeature && this.activeFeature.partName) {\r\n let splittedFromTheLayoutName = partName\r\n ? this.removeLayoutFromPartName(partName)\r\n : this.activeFeature.getMatchingFeatureName();\r\n const allEdgesCountertops = filteredFeatures.filter(feature => {\r\n return feature.getMatchingFeatureName() === splittedFromTheLayoutName\r\n });\r\n const sameEdgeCountertops = this.getSameEdgesFeatures(allEdgesCountertops);\r\n this.activeFeature = sameEdgeCountertops[0] || allEdgesCountertops[0] || null\r\n if (this.activeFeature) {\r\n return true\r\n }\r\n }\r\n return false\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../intermediatePart\";\r\nimport DesignNavigationItem from \"../../../visComponents/designNavigationItem\";\r\nimport {mergeFilterObjects} from \"../../../../misc/utils\";\r\nimport store from \"../../../../store\";\r\nimport {hardCodeIsCaesarStone} from \"../../../../misc/fabricatorHardcode\";\r\n\r\n// EDGE features:\r\n//\r\n// Full Bullnose\r\n// Triple Pencil\r\n// Eased\r\n// Half Bullnose\r\n// Quarter Bevel\r\n// Waterfall\r\n// Ogee\r\n//\r\n//\r\n// Ogee Bull\r\n// Pencil\r\n// Bevel Top and Bottom\r\n//\r\n// Caes hardcode - Bevel Top and Bottom - is Quarter Bevel\r\n//\r\n// ========================\r\n//\r\n// Countertop features:\r\n//\r\nconst countertopMetaDataValues = [\"Full Bullnose\", \"Triple Pencil\", \"Eased\", \"Half Bullnose\", \"Quarter Bevel\",\r\n \"Waterfall\", \"Ogee\"];\r\n//\r\n// Top and Bottom Round\r\n\r\n\r\nexport default class EdgeCommon extends IntermediatePart {\r\n\r\n constructor(props) {\r\n super(props);\r\n }\r\n\r\n load(dbFeature) {\r\n if (!dbFeature.metaData[\"Edge\"] || (Array.isArray(dbFeature.metaData[\"Edge\"]) && !dbFeature.metaData[\"Edge\"].length)) {\r\n const edgeFilterGroup = this.getEdgeFilterGroup();\r\n const assignedEdgeFilter = this.getEdgeFilterGroupFilters({dbFeature}, edgeFilterGroup);\r\n dbFeature.metaData[\"Edge\"] = (dbFeature.sharedFeatureName || \"\").split(\" Edge\")[0];\r\n if (Array.isArray(assignedEdgeFilter) && assignedEdgeFilter[0] && edgeFilterGroup && edgeFilterGroup.values) {\r\n const fValue = edgeFilterGroup.values.find(filter => filter.id === assignedEdgeFilter[0]);\r\n if (fValue && fValue.value) {\r\n const metaDataMatchName = fValue.value.split(\" Edge\")[0];\r\n if (countertopMetaDataValues.includes(metaDataMatchName)) {\r\n dbFeature.metaData[\"Edge\"] = metaDataMatchName;\r\n }\r\n }\r\n }\r\n if (document.kvConfig.isCaesarStone || hardCodeIsCaesarStone()) {\r\n if (dbFeature.metaData[\"Edge\"] === \"Edge Profile – Ogee (Linear Feet)\") {\r\n dbFeature.metaData[\"Edge\"] = \"Ogee\"\r\n } else if (dbFeature.metaData[\"Edge\"] === \"Bevel Top and Bottom\") {\r\n dbFeature.metaData[\"Edge\"] = \"Quarter Bevel\"\r\n }\r\n }\r\n }\r\n return super.load(dbFeature);\r\n }\r\n\r\n navigationSubItems(filters, searchText) {\r\n const filteredAvailableFeatures = super.getFeaturesBySearchText(super.getFilteredFeaturesByFilters(filters), searchText);\r\n let featuresToDisplay = super.navigationSubItemsWithFilterMultipleConditions(this.getArrayOfConditions(true), filteredAvailableFeatures);\r\n const edgeFilterGroup = this.getEdgeFilterGroup();\r\n const parentGroup = this.getParent();\r\n const countertop = parentGroup.countertop;\r\n\r\n // here we check if some countertop has the same name as currently active countertop & it has edge filter\r\n if (edgeFilterGroup && countertop && countertop.activeFeature) {\r\n if (this.partId === \"center_island_edge\" && parentGroup.layout.type === 3) {\r\n return []\r\n }\r\n featuresToDisplay = featuresToDisplay.map((feature) => {\r\n feature.notAvailableInVisualizer = !(this.getMatchingCounterTop(feature)).matchingFeature;\r\n return feature\r\n });\r\n }\r\n\r\n return featuresToDisplay.map(_ => {\r\n const featurePart = new DesignNavigationItem(_.featureName, _);\r\n featurePart.notAvailableInVisualizer = featurePart.part.notAvailableInVisualizer;\r\n return featurePart\r\n });\r\n }\r\n\r\n handleClick(ignoreLocked) {\r\n super.handleClick(ignoreLocked); // set active edge feature\r\n const matchCounterTopObject = this.getMatchingCounterTop();\r\n console.log(\"matchCounterTopObject\", matchCounterTopObject);\r\n if (matchCounterTopObject.matchingFeature) {\r\n matchCounterTopObject.matchingFeature.handleClick(true);\r\n }\r\n this.featureClicked();\r\n }\r\n\r\n /***\r\n * @returns {object}\r\n * **/\r\n getMatchingCounterTop = (feature = this) => {\r\n const parent = feature.getParent();\r\n const countertop = parent.getParent().countertop;\r\n\r\n if (!countertop) {\r\n return {matchingFeature: null, hasSameName: false}\r\n }\r\n\r\n if (countertop.activeFeature && (countertop.activeFeature.metaData[\"Edge\"] === feature.metaData[\"Edge\"])) {\r\n return {matchingFeature: countertop.activeFeature, hasSameName: true} // no need to do anything\r\n }\r\n\r\n let matchingByName = [];\r\n let matchingFeatures = [];\r\n const allCountertopFeatures = countertop.features;\r\n let currentActiveName = countertop.activeFeature ? countertop.activeFeature.getCountertopGroupsSplittedFeatureName() : \"\";\r\n for (let i = 0; i < allCountertopFeatures.length; i++) {\r\n const countertopFeature = allCountertopFeatures[i];\r\n if (countertopFeature.notAvailableInVisualizer) {\r\n continue;\r\n }\r\n if (countertopFeature.metaData[\"Edge\"] === feature.metaData[\"Edge\"]) {\r\n matchingFeatures.push(countertopFeature);\r\n if (currentActiveName && (currentActiveName === countertopFeature.getCountertopGroupsSplittedFeatureName())) {\r\n matchingByName.push(countertopFeature);\r\n }\r\n }\r\n }\r\n if (matchingByName.length) {\r\n return {matchingFeature: matchingByName[0], hasSameName: true}\r\n }\r\n return {matchingFeature: matchingFeatures[0] || null, hasSameName: false}\r\n };\r\n\r\n getEdgeFilterGroupFilters = (feature, edgeFilterGroup) => {\r\n if (!feature._allEdgeFilters) {\r\n const allEdgeFilters = mergeFilterObjects(feature.dbFeature.filterValueIDs, feature.dbFeature.fabFilterValueIDs);\r\n feature._allEdgeFilters = allEdgeFilters && edgeFilterGroup ? allEdgeFilters[edgeFilterGroup.id] : [];\r\n }\r\n return feature._allEdgeFilters;\r\n };\r\n\r\n getMatchingCounterTopFeaturesBySplittedName = (countertop, matchingFeatures = []) => { // array of sorted by filter features\r\n if (!countertop.activeFeature) {\r\n return []\r\n }\r\n let currentActiveName = countertop.activeFeature.getCountertopGroupsSplittedFeatureName();\r\n return matchingFeatures.filter(feature => {\r\n const currentFeatureName = feature.getCountertopGroupsSplittedFeatureName();\r\n return currentFeatureName === currentActiveName\r\n })\r\n };\r\n\r\n getEdgeFilterGroup = () => {\r\n const filterGroups = store.getState().filterState.filterGroups;\r\n return filterGroups.find(group => group.name === \"Edge\" || group.name === \"Edge Profile\");\r\n };\r\n\r\n getArrayOfConditions(forNavigation = false) {\r\n const countertop = this.getParent().countertop;\r\n if (!forNavigation && countertop && countertop.activeFeature && countertop.activeFeature.metaData[\"Edge\"]) {\r\n return [{\r\n propName: \"Edge\",\r\n propValue: countertop.activeFeature.metaData[\"Edge\"]\r\n }]\r\n }\r\n return [];\r\n }\r\n\r\n canUseNavigationFilterSteps() {\r\n return true\r\n }\r\n\r\n setLayers(layout) {\r\n if (this.activeFeature && (!this.activeFeature.matchesMetaForArrayOfConditions(this.getArrayOfConditions()))) {\r\n this.setDefault(layout);\r\n }\r\n return false\r\n }\r\n\r\n setZIndex() {\r\n return false\r\n }\r\n\r\n setEdgeNotInVisualizer = () => {\r\n // console.log(\"setEdgeNotInVisualizer\", );\r\n const countertop = this.getParent().countertop;\r\n const filterGroups = store.getState().filterState.filterGroups;\r\n const edgeGroup = filterGroups.find(group => group.name === \"Edge\" || group.name === \"Edge Profile\");\r\n if (edgeGroup && countertop) {\r\n Object.keys(this.featuresList).forEach(layoutType => {\r\n for (let i = 0; i < this.featuresList[layoutType].length; i++) {\r\n const feature = this.featuresList[layoutType][i];\r\n if (feature.dbFeature.filterValueIDs[edgeGroup.id]) {\r\n const edgeValue = feature.dbFeature.filterValueIDs[edgeGroup.id][0];\r\n const edgeExist = countertop.featuresList[layoutType].some(countertopFeature => {\r\n return countertopFeature.dbFeature.filterValueIDs[edgeGroup.id]\r\n && countertopFeature.dbFeature.filterValueIDs[edgeGroup.id].includes(edgeValue)\r\n });\r\n if (edgeExist) {\r\n feature.notAvailableInVisualizer = false\r\n }\r\n }\r\n }\r\n });\r\n }\r\n }\r\n\r\n}\r\n","import React, {useContext} from \"react\";\r\nimport {View, Text, Image} from '@react-pdf/renderer';\r\nimport PropTypes from \"prop-types\";\r\n\r\nimport {PrintDocumentContext} from \"./printDocumentContext\";\r\nimport {LOWES_DISCLAIMER_EN} from \"../../../misc/fabricatorHardcode\";\r\n\r\nconst warningIcon = `https://qc-cdn.s3.amazonaws.com/receipt/icon-warning-red.jpg`;\r\n\r\nconst PrintDocumentDisclaimer = (props) => {\r\n const {fabricatorData, locale, styles, withTotal} = props;\r\n const fabricatorSettings = fabricatorData.settings;\r\n const printContext = useContext(PrintDocumentContext);\r\n\r\n if (!fabricatorSettings.depositDisclaimer || !fabricatorSettings.enableDisclaimer) {\r\n return null\r\n }\r\n if (withTotal && fabricatorSettings.depositDisclaimer.length >= 1500\r\n || !withTotal && fabricatorSettings.depositDisclaimer.length < 1500) {\r\n return null\r\n }\r\n\r\n const getDisclaimerMessage = () => {\r\n if ((fabricatorData.isLowes || fabricatorData.isCaesarStone)) {\r\n if (locale === \"fr-FR\" && printContext.messages[\"transDoc.description_FR._disclaimer\"]) {\r\n return printContext.messages[\"transDoc.description_FR._disclaimer\"]\r\n } else if (locale === \"pl-PL\" && printContext.messages[\"transDoc.customTranslateDescription_PL._disclaimer\"]) {\r\n return printContext.messages[\"transDoc.customTranslateDescription_PL._disclaimer\"]\r\n } else if (printContext.messages[\"transDoc.customDisplayName_FR._disclaimer\"]) { // it is actually EN ! hardcoded for lowes profiles\r\n return printContext.messages[\"transDoc.customDisplayName_FR._disclaimer\"]\r\n } else if (fabricatorData.isLowes) {\r\n return LOWES_DISCLAIMER_EN\r\n }\r\n }\r\n return fabricatorSettings.depositDisclaimer\r\n }\r\n\r\n const disclaimerMessage = getDisclaimerMessage();\r\n\r\n // if (withTotal) {\r\n // return (\r\n // \\n' +\r\n ' \\n' +\r\n ' \\n' +\r\n '
\\n' +\r\n ' '+ i +'\"
\\n' +\r\n ' \r\n {activeNavPart ?
\r\n : null}\r\n {isCountertop && !layout.isNewLayout ? : null}\r\n {isCabinet && !layout.isNewLayout ? : null}\r\n {showNavigationFilters ? (\r\n \r\n ) : null}\r\n {this.props.useFilters && !showFilterSelection ? (\r\n \r\n ) : null}\r\n
\r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = (store) => {\r\n return {\r\n activeNavigationFilter: store.navigationState.activeNavigationFilter,\r\n fabricatorData: store.fabricatorState,\r\n };\r\n};\r\nconst mapDispatchToProps = () => {\r\n return {};\r\n};\r\nexport default connect(mapStateToProps, mapDispatchToProps)(BodyPanel);\r\n","import {Part} from \"../part\";\r\nimport {wallsThumbnail} from \"../assets\";\r\nimport {PartMenuType} from \"../../../visComponents/constants\";\r\nimport DesignNavigationItem from \"../../../visComponents/designNavigationItem\";\r\n\r\nimport Ceiling from \"../subparts/walls/ceiling\";\r\nimport LeftWall from \"../subparts/walls/leftWall\";\r\nimport RightWall from \"../subparts/walls/rightWall\";\r\nimport PopoutWall from \"../subparts/walls/popoutWall\";\r\nimport Backsplash from \"../subparts/walls/backsplash\";\r\nimport store from \"../../../../store\";\r\n\r\nexport default class Walls extends Part {\r\n static id = 'Walls';\r\n constructor() {\r\n super(true, false, PartMenuType.Complex);\r\n\r\n this.menuType = PartMenuType.Complex;\r\n this.partName = 'Walls';\r\n this.partThumbnail = wallsThumbnail;\r\n this.translateId = \"visualizer.kitchen.walls\";\r\n\r\n // related items\r\n this.leftWall = null;\r\n this.rightWall = null;\r\n this.popoutWall = null;\r\n this.ceiling = null;\r\n this.backsplash = null;\r\n }\r\n\r\n load(dbFeature) {\r\n let relatedItemName = \"\",\r\n RelatedItemClass = null;\r\n switch (dbFeature.groupName) {\r\n case \"Left Wall\":\r\n relatedItemName = \"leftWall\";\r\n RelatedItemClass = LeftWall;\r\n break;\r\n case \"Right Wall\":\r\n relatedItemName = \"rightWall\";\r\n RelatedItemClass = RightWall;\r\n break;\r\n case \"Popout Wall\":\r\n relatedItemName = \"popoutWall\";\r\n RelatedItemClass = PopoutWall;\r\n break;\r\n case \"Backsplash\":\r\n case \"backsplash\":\r\n relatedItemName = \"backsplash\";\r\n RelatedItemClass = Backsplash;\r\n break;\r\n case \"Ceiling\":\r\n relatedItemName = \"ceiling\";\r\n RelatedItemClass = Ceiling;\r\n break;\r\n // case \"Shower Shadow\":\r\n // if (\r\n // dbFeature.displayName.includes(\"Shower Shadow - Divider Wall\")\r\n // || dbFeature.displayName.includes(\"Shower Shadow - EX L\")\r\n // || dbFeature.displayName.includes(\"Shower Shadow - EX R\")\r\n // || dbFeature.displayName.includes(\"Shower Shadow - Popout\")\r\n // || dbFeature.displayName.includes(\"Shower Shadow - Pony Wall\")\r\n // ) {\r\n // relatedItemName = \"shadows\";\r\n // RelatedItemClass = Shadow;\r\n // }\r\n // break;\r\n }\r\n if (relatedItemName) {\r\n if (!this[relatedItemName]) {\r\n this[relatedItemName] = new RelatedItemClass(true);\r\n if (relatedItemName !== \"shadows\") {\r\n this.relatedItems.push(this[relatedItemName]);\r\n }\r\n }\r\n if (!this.categoryEnabled) {\r\n this.categoryEnabled = true\r\n }\r\n this[relatedItemName].getParent = () => this;\r\n this[relatedItemName].load(dbFeature);\r\n return true\r\n }\r\n return false\r\n }\r\n\r\n navigationItem() {\r\n return new DesignNavigationItem('Walls', this);\r\n }\r\n\r\n isSubTypeWithItems() {\r\n return false;\r\n }\r\n\r\n subParts(withHidden = true) {\r\n return this.relatedItems\r\n .filter(item => {\r\n if (item.partId === \"popout_wall\") {\r\n item.visible = item.getParent().layout.getCurrentLayoutAbbreviation().includes(\"P\")\r\n }\r\n return this.filterRelatedItem(item, withHidden)\r\n })\r\n .map(_ => new DesignNavigationItem(_.partName, _));\r\n }\r\n\r\n handleSubPartClick() {\r\n\r\n }\r\n\r\n recoverPrevioslySelected(activeRelatedPart) {\r\n const {activeQuoteIndex} = store.getState().quotesState;\r\n this.relatedItems.forEach(relatedItem => {\r\n if (relatedItem.partId !== activeRelatedPart.partId && relatedItem.activeFeatureBeforeAllWalls) {\r\n if (relatedItem.activeFeatureBeforeAllWalls === \"placeholder\") {\r\n relatedItem.placeholderChanged = false;\r\n relatedItem.firstClick[activeQuoteIndex] = false;\r\n } else if (!relatedItem.selectedByUser) {\r\n relatedItem.activeFeatureBeforeAllWalls.clickFromAllWalls();\r\n }\r\n }\r\n });\r\n }\r\n\r\n}\r\n","import uniqBy from \"lodash/uniqBy\";\r\n\r\nimport {IntermediatePart} from \"../intermediatePart\";\r\nimport store from \"../../../../store\";\r\nimport DesignNavigationItem from \"../../../visComponents/designNavigationItem\";\r\n\r\nexport default class CountertopCommon extends IntermediatePart {\r\n\r\n constructor(props) {\r\n super(props);\r\n }\r\n\r\n navigationSubItems(filters, searchText) {\r\n const filteredAvailableFeatures = super.getFeaturesBySearchText(super.getFilteredFeaturesByFilters(filters), searchText);\r\n let featuresToDisplay = super.navigationSubItemsWithFilterMultipleConditions(this.getArrayOfConditions(), filteredAvailableFeatures);\r\n\r\n let newFeatures = this.getSameEdgesFeatures(featuresToDisplay);\r\n\r\n const featuresThatLeft = featuresToDisplay.filter(feature => {\r\n return !newFeatures.some(newFeature => newFeature.dbFeature.customDisplayName === feature.dbFeature.customDisplayName)\r\n });\r\n\r\n featuresThatLeft.forEach(feature => {\r\n let currentFeatureName = feature.getCountertopGroupsSplittedFeatureName();\r\n if (newFeatures.every(countertopFeature => {\r\n let customDisplayName = countertopFeature.getCountertopGroupsSplittedFeatureName();\r\n return customDisplayName !== currentFeatureName\r\n })) {\r\n newFeatures.push(feature);\r\n }\r\n });\r\n\r\n return uniqBy(newFeatures, (feature) => feature.dbFeature.id)\r\n .map(_ => new DesignNavigationItem(_.featureName, _));\r\n }\r\n\r\n getSameEdgesFeatures(featuresToDisplay) {\r\n const filterGroups = store.getState().filterState.filterGroups;\r\n const edgeFilterGroup = filterGroups.find(group => group.name === \"Edge\" || group.name === \"Edge Profile\");\r\n if (edgeFilterGroup) {\r\n let activeFeatureEdgeFilter = this.getFeatureEdgeFilter(this.activeFeature, edgeFilterGroup); // 1) take edge filter from active feature\r\n if (!activeFeatureEdgeFilter) { // 2) try to set it from active edge feature group active feature\r\n const edgeFeatureGroup = this.getParent().edge;\r\n if (edgeFeatureGroup && edgeFeatureGroup.activeFeature) {\r\n activeFeatureEdgeFilter = this.getFeatureEdgeFilter(edgeFeatureGroup.activeFeature, edgeFilterGroup);\r\n }\r\n }\r\n if (!activeFeatureEdgeFilter) { // 3) find at least some feature with edge filter\r\n for (let i = 0; i < featuresToDisplay.length; i++) {\r\n const edgeFilters = this.getFeatureEdgeFilter(featuresToDisplay[i], edgeFilterGroup);\r\n if (edgeFilters) {\r\n activeFeatureEdgeFilter = edgeFilters;\r\n break;\r\n }\r\n }\r\n }\r\n if (activeFeatureEdgeFilter) {\r\n const activeEdgeFilter = activeFeatureEdgeFilter[0];\r\n const activeEdgeFilter2 = activeFeatureEdgeFilter[1];\r\n featuresToDisplay = featuresToDisplay.filter((feature) => {\r\n if (feature.notAvailableInVisualizer) {\r\n return false\r\n }\r\n const currentFeatureFilters = this.getFeatureEdgeFilter(feature, edgeFilterGroup);\r\n return currentFeatureFilters && (currentFeatureFilters.includes(activeEdgeFilter) || (\r\n activeEdgeFilter2 && currentFeatureFilters.includes(activeEdgeFilter2)\r\n ))\r\n });\r\n }\r\n }\r\n return featuresToDisplay\r\n }\r\n\r\n getFeatureEdgeFilter = (feature, edgeFilterGroup) => {\r\n if (!feature) {\r\n return null\r\n }\r\n if (!edgeFilterGroup) {\r\n const filterGroups = store.getState().filterState.filterGroups;\r\n edgeFilterGroup = filterGroups.find(group => group.name === \"Edge\" || group.name === \"Edge Profile\");\r\n }\r\n return feature.dbFeature.fabFilterValueIDs[edgeFilterGroup.id] || feature.dbFeature.filterValueIDs[edgeFilterGroup.id]\r\n };\r\n\r\n tryToSetTheSameFeature(filteredFeatures = [], partName = \"\") {\r\n if (this.activeFeature && this.activeFeature.partName) {\r\n let splittedFromTheLayoutName = partName\r\n ? this.removeLayoutFromPartName(partName)\r\n : this.activeFeature.getMatchingFeatureName();\r\n const allEdgesCountertops = filteredFeatures.filter(feature => {\r\n return feature.getMatchingFeatureName() === splittedFromTheLayoutName\r\n });\r\n const sameEdgeCountertops = this.getSameEdgesFeatures(allEdgesCountertops);\r\n this.activeFeature = sameEdgeCountertops[0] || allEdgesCountertops[0] || null\r\n if (this.activeFeature) {\r\n return true\r\n }\r\n }\r\n return false\r\n }\r\n\r\n setDefault() {\r\n const filteredFeatures = this.getArrayOfConditions\r\n ? this.features.filter(f => f.dbFeature.s3Bindings && f.matchesMetaForArrayOfConditions(this.getArrayOfConditions()))\r\n : this.features;\r\n const matchingFeatureExist = this.tryToSetTheSameFeature(filteredFeatures, null);\r\n if (!matchingFeatureExist) {\r\n const edge = this.getParent().edge;\r\n let matchingEdgeFeature = null;\r\n if (edge && edge.activeFeature) {\r\n matchingEdgeFeature = edge.getMatchingCounterTop(edge.activeFeature, filteredFeatures);\r\n }\r\n this.activeFeature = matchingEdgeFeature || filteredFeatures[0];\r\n }\r\n if (this.setActiveFeatureParts) {\r\n this.activeFeatureParts = this.setActiveFeatureParts();\r\n }\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../intermediatePart\";\r\nimport store from \"../../../../store\";\r\nimport DesignNavigationItem from \"../../../visComponents/designNavigationItem\";\r\nimport {getFilterGroupValueByName, getFilterGroupValues} from \"../../../../misc/utils\";\r\n\r\nexport default class EdgeCommon extends IntermediatePart {\r\n\r\n constructor(props) {\r\n super(props);\r\n }\r\n\r\n navigationSubItems(filters, searchText) {\r\n const filteredAvailableFeatures = super.getFeaturesBySearchText(super.getFilteredFeaturesByFilters(filters), searchText);\r\n let featuresToDisplay = super.navigationSubItemsWithFilterMultipleConditions(this.getArrayOfConditions(), filteredAvailableFeatures);\r\n const edgeFilterGroup = this.getEdgeFilterGroup();\r\n const countertop = this.getParent().countertop;\r\n\r\n // here we check if some countertop has the same name as currently active countertop & it has edge filter\r\n if (edgeFilterGroup && countertop && countertop.activeFeature) {\r\n featuresToDisplay = featuresToDisplay.map((feature) => {\r\n feature.notAvailableInVisualizer = !this.getMatchingCounterTop(feature);\r\n return feature\r\n });\r\n }\r\n\r\n if (edgeFilterGroup && (this.partId === \"edge_profile\")) { // Waterfall check for back countertop\r\n const waterFallFilter = getFilterGroupValueByName(\"Waterfall\", edgeFilterGroup);\r\n if (waterFallFilter) {\r\n featuresToDisplay = featuresToDisplay.filter(feature => {\r\n const edgeFilters = getFilterGroupValues(feature, edgeFilterGroup)\r\n return !edgeFilters || !edgeFilters.includes(waterFallFilter.id)\r\n })\r\n }\r\n }\r\n\r\n return featuresToDisplay.map(_ => {\r\n const featurePart = new DesignNavigationItem(_.featureName, _);\r\n featurePart.notAvailableInVisualizer = featurePart.part.notAvailableInVisualizer;\r\n return featurePart\r\n });\r\n }\r\n\r\n handleClick(ignoreLocked) {\r\n super.handleClick(ignoreLocked); // set active edge feature\r\n this.matchingCounterTop = this.getMatchingCounterTop();\r\n console.log(\"this.matchingCounterTop\", this.matchingCounterTop);\r\n if (this.matchingCounterTop) {\r\n this.matchingCounterTop.handleClick(true);\r\n }\r\n this.featureClicked();\r\n }\r\n\r\n getMatchingCounterTop = (feature = this, countertopFeatures) => {\r\n const parent = feature.getParent();\r\n const countertop = parent.getParent().countertop;\r\n const edgeFilterGroup = feature.getEdgeFilterGroup();\r\n\r\n if (countertop && edgeFilterGroup) {\r\n const edgeFilterValue = feature.getEdgeFilterGroupFilters(feature, edgeFilterGroup);\r\n if (edgeFilterValue) {\r\n let matchingFeatures = (countertopFeatures || countertop.features).filter((feature) => {\r\n return (feature.dbFeature.filterValueIDs[edgeFilterGroup.id]\r\n && feature.dbFeature.filterValueIDs[edgeFilterGroup.id].some(edgeFilterId => {\r\n return edgeFilterValue.some(currentEdgeFilterId => currentEdgeFilterId === edgeFilterId)\r\n })) ||\r\n (feature.dbFeature.fabFilterValueIDs[edgeFilterGroup.id]\r\n && feature.dbFeature.fabFilterValueIDs[edgeFilterGroup.id].some(edgeFilterId => {\r\n return edgeFilterValue.some(currentEdgeFilterId => currentEdgeFilterId === edgeFilterId)\r\n }))\r\n });\r\n matchingFeatures = matchingFeatures.filter(feature => !feature.notAvailableInVisualizer)\r\n let matchingByName = feature.getMatchingCounterTopFeaturesBySplittedName(countertop, matchingFeatures);\r\n return matchingByName.length\r\n ? matchingByName[0]\r\n : matchingFeatures.length\r\n ? matchingFeatures[0]\r\n : null\r\n }\r\n }\r\n return null\r\n };\r\n\r\n getEdgeFilterGroupFilters = (feature, edgeFilterGroup) => {\r\n edgeFilterGroup = edgeFilterGroup || this.getEdgeFilterGroup();\r\n return getFilterGroupValues(feature, edgeFilterGroup)\r\n };\r\n\r\n getMatchingCounterTopFeaturesBySplittedName = (countertop, matchingFeatures = []) => { // array of sorted by filter features\r\n if (!countertop.activeFeature) {\r\n return []\r\n }\r\n let currentActiveName = countertop.activeFeature.getCountertopGroupsSplittedFeatureName();\r\n return matchingFeatures.filter(feature => {\r\n const currentFeatureName = feature.getCountertopGroupsSplittedFeatureName();\r\n return currentFeatureName === currentActiveName\r\n })\r\n };\r\n\r\n getEdgeFilterGroup = () => {\r\n const filterGroups = store.getState().filterState.filterGroups;\r\n return filterGroups.find(group => group.name === \"Edge\" || group.name === \"Edge Profile\");\r\n };\r\n\r\n getArrayOfConditions() {\r\n return []\r\n }\r\n\r\n canUseNavigationFilterSteps() {\r\n return true\r\n }\r\n\r\n setLayers() {\r\n return false\r\n }\r\n\r\n setZIndex() {\r\n return false\r\n }\r\n\r\n}\r\n","import React, {Component} from 'react';\r\nimport {connect} from 'react-redux';\r\nimport FilterSelection from \"./filterSelection\";\r\nimport PropTypes from \"prop-types\";\r\nimport {CABINET_WIZARD_BUTTONS, COUNTERTOP_WIZARD_BUTTONS} from \"../../../kvComponent/core/constants\";\r\nimport {\r\n setActiveNavigationFilter,\r\n setCountertopWizard,\r\n setActiveNavigationFilterStepIndex,\r\n setNavigationViewType\r\n} from \"../../../../actions/navigationFunctions\";\r\nimport {wizardAllButton} from \"../../../kvComponent/core/constants\";\r\nimport {setSelectedFilters} from \"../../../../actions/actionFunctions\";\r\nimport {replaceFilterArrayValue, toggleFilterArrayValue} from \"./filterSwitchers\";\r\nimport {getBvGroupFilterValues} from \"../../../../api/server-api\";\r\nimport {setAvailableFilterValues} from \"../../../../actions/filtersFunctions\";\r\nimport {s3FilterImagePath} from \"../../../../misc/utils\";\r\nimport {getAllFilterGroupValuesFromGroup} from \"../../../../misc/helpers\";\r\n\r\nclass NavigationFilters extends Component {\r\n\r\n static propTypes = {\r\n isMobile: PropTypes.bool,\r\n activePart: PropTypes.object.isRequired,\r\n onItemClick: PropTypes.func.isRequired,\r\n refreshCB: PropTypes.func.isRequired,\r\n };\r\n\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n availableFilterValues: [],\r\n isLoading: false,\r\n filterGroup: {}\r\n };\r\n }\r\n\r\n componentDidMount() {\r\n this.setAvailableFiltersValues(this.props);\r\n }\r\n\r\n componentWillReceiveProps(nextProps) {\r\n if ((nextProps.activePart && this.props.activePart && nextProps.activePart.partName !== this.props.activePart.partName)\r\n || (nextProps.activeNavigationFilter !== this.props.activeNavigationFilter)) {\r\n this.setAvailableFiltersValues(nextProps);\r\n }\r\n this.resetFilters(nextProps);\r\n }\r\n\r\n componentWillUnmount() {\r\n this.removeNavigationFiltersAndSetCommonView();\r\n }\r\n\r\n resetFilters(nextProps) {\r\n if ((nextProps.activeNavigationFilter !== this.props.activeNavigationFilter)\r\n && (nextProps.activeNavigationFilter === COUNTERTOP_WIZARD_BUTTONS[1].buttonId)\r\n && nextProps.selectedFilters.length\r\n ) {\r\n this.props.setSelectedFilters([]); // reset filters on color step\r\n }\r\n }\r\n\r\n getFilterGroupNameByButtonId(nextProps) {\r\n let activeButton = null;\r\n switch (nextProps.activePart.partId) {\r\n case \"top_cabinet\":\r\n case \"bottom_cabinet\":\r\n activeButton = CABINET_WIZARD_BUTTONS.find(button => button.buttonId === nextProps.activeNavigationFilter);\r\n break;\r\n case \"countertop\":\r\n case \"center_island_countertop\":\r\n activeButton = COUNTERTOP_WIZARD_BUTTONS.find(button => button.buttonId === nextProps.activeNavigationFilter);\r\n break;\r\n default:\r\n break;\r\n }\r\n return activeButton ? activeButton.filtersGroupName : \"\";\r\n }\r\n\r\n setAvailableFiltersValues(nextProps = this.props) {\r\n const filterGroupName = this.getFilterGroupNameByButtonId(nextProps);\r\n const filterGroup = nextProps.filterGroups.find(group => group.name === filterGroupName);\r\n if (filterGroup) {\r\n const selectedFilters = (filterGroup.name === COUNTERTOP_WIZARD_BUTTONS[2].filtersGroupName)\r\n ? nextProps.selectedFilters : []; // filter by selected filters only on 2nd(Material step)\r\n const availableFilterValues = FilterSelection.getAvailableFilterValues(\r\n nextProps.filterGroups, filterGroupName, nextProps.activePart, this.props.fabricatorData, selectedFilters\r\n );\r\n // console.log(\"availableFilterValues::\", availableFilterValues);\r\n const reorderedFilterValues = this.reorderFilterItems(nextProps, availableFilterValues);\r\n const countertopMaterialOrColor = (\r\n nextProps.activeNavigationFilter === COUNTERTOP_WIZARD_BUTTONS[1].buttonId\r\n || nextProps.activeNavigationFilter === COUNTERTOP_WIZARD_BUTTONS[2].buttonId\r\n );\r\n if (countertopMaterialOrColor ) {\r\n if (this.props.availableFilterValues[filterGroup.id]) {\r\n this.setToStateFilterValues([\"All\", ...this.props.availableFilterValues[filterGroup.id]], filterGroup);\r\n } else {\r\n this.setState({\r\n isLoading: true\r\n });\r\n getBvGroupFilterValues(nextProps.activePart.dbName || nextProps.activePart.partName, filterGroup.id)\r\n .then((response) => {\r\n this.props.setAvailableFilterValues({\r\n [filterGroup.id]: response.data\r\n });\r\n this.setToStateFilterValues([\"All\", ...response.data], filterGroup);\r\n })\r\n }\r\n } else {\r\n this.setToStateFilterValues(reorderedFilterValues, filterGroup);\r\n }\r\n }\r\n }\r\n\r\n setToStateFilterValues = (availableFilterValues, filterGroup) => {\r\n this.setState({\r\n isLoading: false,\r\n availableFilterValues,\r\n filterGroup\r\n })\r\n };\r\n\r\n setParentFilterValues = (filterValues) => {\r\n const nextProps = this.props;\r\n const filterGroupName = this.getFilterGroupNameByButtonId(nextProps);\r\n const filterGroup = nextProps.filterGroups.find(group => group.name === filterGroupName);\r\n const selectedFilters = (filterGroup.name === COUNTERTOP_WIZARD_BUTTONS[2].filtersGroupName)\r\n ? nextProps.selectedFilters : []; // filter by selected filters only on 2nd(Material step)\r\n\r\n let availableFilterValues = [];\r\n if (selectedFilters.length) {\r\n const colorFilterName = COUNTERTOP_WIZARD_BUTTONS[1].filtersGroupName;\r\n const colorFilterGroup = nextProps.filterGroups.find(group => {\r\n return group.name === colorFilterName\r\n });\r\n if (colorFilterGroup) {\r\n const selectedColorFilter = selectedFilters.find(filterG => filterG.filterGroupId === colorFilterGroup.id);\r\n const selectedColorValue = selectedColorFilter && selectedColorFilter.filterId;\r\n if (selectedColorValue || selectedColorValue === 0) {\r\n filterValues.forEach(filterValue => {\r\n if (nextProps.activePart.features.some(feature => {\r\n return feature.dbFeature\r\n && feature.dbFeature.filterValueIDs[filterGroup.id]\r\n && feature.dbFeature.filterValueIDs[filterGroup.id].includes(filterValue)\r\n && feature.dbFeature.filterValueIDs[colorFilterGroup.id]\r\n && feature.dbFeature.filterValueIDs[colorFilterGroup.id].includes(selectedColorValue)\r\n })) {\r\n availableFilterValues.push(filterValue)\r\n }\r\n })\r\n } else {\r\n availableFilterValues = filterValues;\r\n }\r\n } else {\r\n availableFilterValues = filterValues;\r\n }\r\n } else {\r\n availableFilterValues = filterValues;\r\n }\r\n const reorderedFilterValues = this.reorderFilterItems(this.props, availableFilterValues);\r\n this.setState({\r\n availableFilterValues: reorderedFilterValues\r\n })\r\n };\r\n\r\n reorderFilterItems = (nextProps, availableFilterValues) => {\r\n const currentActiveFilters = nextProps.activePart.activeFeature\r\n ? nextProps.activePart.activeFeature.dbFeature.filterValueIDs\r\n : {};\r\n // console.log(\"currentActiveFilters\", currentActiveFilters);\r\n return availableFilterValues.sort((a,b) => {\r\n const activeA = this.filterValueIsActive(currentActiveFilters, a);\r\n const activeB = this.filterValueIsActive(currentActiveFilters, b);\r\n return activeA !== activeB ? activeA < activeB ? -1 : 1 : 0;\r\n })\r\n };\r\n\r\n getFeatureBodyItemThumbnail = (currentFilterValue) => { // we have the logic with additionalImages in the FeatureWizardBody component\r\n const additionalImages = currentFilterValue.additionalImages;\r\n if (Array.isArray(additionalImages) && additionalImages.length) {\r\n return additionalImages[0].imageUrl\r\n }\r\n return s3FilterImagePath(currentFilterValue.icon);\r\n };\r\n\r\n filterValueIsActive = (currentActiveFilters, currentFilterValue) => {\r\n const activeNavigationFilter = this.props.activeNavigationFilter;\r\n const countertopMaterialOrColor = (\r\n activeNavigationFilter === COUNTERTOP_WIZARD_BUTTONS[1].buttonId\r\n || activeNavigationFilter === COUNTERTOP_WIZARD_BUTTONS[2].buttonId\r\n );\r\n if (countertopMaterialOrColor) {\r\n return false\r\n }\r\n if (activeNavigationFilter === \"inlay_type\" && this.state.filterGroup && this.state.filterGroup.values) {\r\n const modulePartJoined = this.props.moduleContextMenuModule + \"_\" + this.props.moduleContextMenuModulePart; //\"2_3\"\r\n for (let i = 0; i <= this.props.activePart.inlayTypes.length - 1; i++) {\r\n const inlayTypeObject = this.props.activePart.inlayTypes[i];\r\n const existingMJoined = inlayTypeObject.moduleParts.find(mJoined => mJoined === modulePartJoined);\r\n if (existingMJoined) { // not default!\r\n const fValue = this.state.filterGroup.values.find(val => val.value === inlayTypeObject.name);\r\n return fValue.id === currentFilterValue.id\r\n }\r\n }\r\n return currentFilterValue.value === this.props.activePart.defaultInlayType\r\n // } else if ((activeNavigationFilter === COUNTERTOP_WIZARD_BUTTONS[2].buttonId)\r\n // || (activeNavigationFilter === COUNTERTOP_WIZARD_BUTTONS[3].buttonId)) {\r\n // // return this.props.counterTopWizard[activeNavigationFilter] === currentFilterValue.id\r\n // const selectedFilter = this.props.selectedFilters.find(selectedF => {\r\n // return selectedF.filterGroupId === this.state.filterGroup.id\r\n // });\r\n // return (currentFilterValue.id === \"All\")\r\n // ? !selectedFilter\r\n // : selectedFilter && (selectedFilter.filterId === currentFilterValue.id)\r\n }\r\n\r\n return this.state.filterGroup && currentActiveFilters[this.state.filterGroup.id]\r\n && currentActiveFilters[this.state.filterGroup.id].includes(currentFilterValue.id);\r\n };\r\n\r\n removeNavigationFiltersAndSetCommonView = () => {\r\n const commonView = (this.props.windowWidth < 991) ? 4 : 3;\r\n if ((this.props.activeNavigationFilter === COUNTERTOP_WIZARD_BUTTONS[2].buttonId)\r\n && this.props.navigationViewType !== commonView) {\r\n this.props.setNavigationViewType(commonView);\r\n }\r\n this.props.setActiveNavigationFilter(null);\r\n };\r\n\r\n handleFilterValueClick = (currentFilterValue) => {\r\n // if (isActive) {\r\n // return // we don't need to do anything on active item click\r\n // }\r\n // console.log(\"currentFilterValue\", currentFilterValue);\r\n switch (this.props.activeNavigationFilter) {\r\n case \"inlay_type\": {\r\n const modulePartJoined = this.props.moduleContextMenuModule + \"_\" + this.props.moduleContextMenuModulePart; //\"2_3\"\r\n let neededInlayTypesObject = this.props.activePart.inlayTypes.find(obj => obj.name === currentFilterValue.value);\r\n if (currentFilterValue.value !== this.props.activePart.defaultInlayType) {\r\n if (!neededInlayTypesObject) {\r\n neededInlayTypesObject = {name: currentFilterValue.value, moduleParts: []}; // create new & push\r\n this.props.activePart.inlayTypes.push(neededInlayTypesObject);\r\n }\r\n if (!neededInlayTypesObject.moduleParts.includes(modulePartJoined)) {\r\n neededInlayTypesObject.moduleParts.push(modulePartJoined);\r\n this.props.activePart.activeFeatureParts = this.props.activePart.setActiveFeatureParts();\r\n this.props.refreshCB();\r\n }\r\n } else { // it is default type, we need to remove it from the not-default inlayTypes\r\n this.props.activePart.inlayTypes.forEach(inlayTypeObj => {\r\n const existingMJoinedIndex = inlayTypeObj.moduleParts.findIndex(mJoined => mJoined === modulePartJoined);\r\n if (existingMJoinedIndex > -1) {\r\n inlayTypeObj.moduleParts.splice(existingMJoinedIndex, 1);\r\n this.props.activePart.activeFeatureParts = this.props.activePart.setActiveFeatureParts();\r\n this.props.refreshCB();\r\n }\r\n });\r\n }\r\n this.forceUpdate(); // re-render to set new active item\r\n break;\r\n }\r\n case COUNTERTOP_WIZARD_BUTTONS[1].buttonId:\r\n case COUNTERTOP_WIZARD_BUTTONS[2].buttonId: {\r\n // this.props.setCountertopWizard({ // not needed for now, but probably we would need this logic in future\r\n // [this.props.activeNavigationFilter] : currentFilterValue.id\r\n // });\r\n if (currentFilterValue.id === \"All\") {\r\n const selectedFilter = this.props.selectedFilters.find(selectedF => {\r\n return selectedF.filterGroupId === this.state.filterGroup.id\r\n });\r\n if (selectedFilter) { // should work always, but just in case\r\n this.props.setSelectedFilters(toggleFilterArrayValue([...this.props.selectedFilters], {\r\n filterId: selectedFilter.filterId,\r\n filterGroupId: this.state.filterGroup.id\r\n })); // remove selected filter\r\n }\r\n this.removeNavigationFiltersAndSetCommonView();\r\n } else if (Array.isArray(currentFilterValue.items) && currentFilterValue.items.length) {\r\n this.setParentFilterValues(currentFilterValue.items.map(fValue => fValue.id))\r\n } else {\r\n this.props.setSelectedFilters(replaceFilterArrayValue([...this.props.selectedFilters], {\r\n filterId: currentFilterValue.id,\r\n filterGroupId: this.state.filterGroup.id\r\n }));\r\n this.removeNavigationFiltersAndSetCommonView();\r\n }\r\n break;\r\n }\r\n default: {\r\n let matchingFeatures = this.props.activePart.features.filter((feature) => {\r\n return this.state.filterGroup && feature.dbFeature.filterValueIDs[this.state.filterGroup.id]\r\n && feature.dbFeature.filterValueIDs[this.state.filterGroup.id].includes(currentFilterValue.id)\r\n });\r\n if (this.props.activePart.partId === \"top_cabinet\" && this.props.activePart.activeFeature.metaData[\"Module\"]) {\r\n const activeFeatureNameSplitted = this.props.activePart.activeFeature.partName.split(\" M \");\r\n matchingFeatures = matchingFeatures.filter((feature) => {\r\n const featureNameSplitted = feature.partName.split(\" M \");\r\n return (featureNameSplitted.length > 1) && (activeFeatureNameSplitted.length > 1)\r\n && featureNameSplitted[1] === activeFeatureNameSplitted[1]\r\n })\r\n } else if (this.props.activePart.partId === \"bottom_cabinet\" && this.props.activePart.activeFeature.metaData[\"Module\"]) {\r\n matchingFeatures = matchingFeatures.filter((feature) => feature.metaData[\"Appliance\"]\r\n && feature.metaData[\"Appliance\"].includes(\"Range\"))\r\n } else if (this.props.activePart.partId === \"countertop\" || this.props.activePart.partId === \"center_island_countertop\") {\r\n matchingFeatures = this.getMatchingFeaturesBySplittedName(matchingFeatures);\r\n }\r\n if (matchingFeatures.length) {\r\n this.props.onItemClick({part:matchingFeatures[0]}, true);\r\n this.forceUpdate(); // re-render to set new active item\r\n }\r\n break;\r\n }\r\n }\r\n\r\n };\r\n\r\n getMatchingFeaturesBySplittedName = (matchingFeatures = []) => { // array of sorted by filter features\r\n let currentActiveName = this.props.activePart.activeFeature.partName;\r\n const filterGroupName = this.getFilterGroupNameByButtonId(this.props);\r\n const filterGroup = this.props.filterGroups.find(group => group.name === filterGroupName);\r\n if (filterGroup && filterGroup.values && filterGroup.values.length) {\r\n filterGroup.values.forEach((filterGroupValue) => { // arrayOf {id: 293, value: \"Eased\", displayText: \"Eased\", parent_id: null, icon: \"\", …}\r\n currentActiveName = currentActiveName.split(\" \"+filterGroupValue.value).join(\"\");\r\n });\r\n }\r\n return matchingFeatures.filter(feature => {\r\n let featureName = feature.partName;\r\n filterGroup.values.forEach((filterGroupValue) => { // arrayOf {id: 293, value: \"Eased\", displayText: \"Eased\", parent_id: null, icon: \"\", …}\r\n featureName = featureName.split(\" \"+filterGroupValue.value).join(\"\");\r\n });\r\n return featureName === currentActiveName\r\n })\r\n };\r\n\r\n getFilterFeatureItem = (filterValue, currentIndex, currentActiveFilters) => {\r\n const currentFilterValue = filterValue === \"All\"\r\n ? wizardAllButton\r\n : getAllFilterGroupValuesFromGroup(this.state.filterGroup).find(val => val.id === filterValue); // Object\r\n if (!currentFilterValue) {\r\n // console.log(\"NO filterValue!\", filterValue, currentIndex, this.state.availableFilterValues);\r\n return;\r\n }\r\n let thumbnail = this.getFeatureBodyItemThumbnail(currentFilterValue);\r\n\r\n const styles = {\r\n backgroundSize: this.props.activeNavigationFilter === \"color\" ? \"cover\" : \"inherit\"\r\n };\r\n if (thumbnail) {\r\n styles.backgroundImage = \"url(\" + thumbnail + \")\";\r\n }\r\n if (!thumbnail && currentFilterValue && this.props.activeNavigationFilter === \"color\") {\r\n styles.backgroundColor = currentFilterValue.value;\r\n }\r\n if (filterValue === \"All\") {\r\n styles.backgroundSize = (this.props.windowWidth < 991) ? \"70%\" : \"50%\";\r\n styles.backgroundPosition = \"top 30% center\";\r\n }\r\n const isActive = this.filterValueIsActive(currentActiveFilters, currentFilterValue);\r\n\r\n return this.props.isMobile ? (\r\n {activeNavPart ? : null}
\r\n \r\n {!showFilterSelection && this.props.activeSubPart && this.props.activeSubPart.canBeDisabled\r\n ? \r\n : null}\r\n {this.renderAllWallsCheckbox(showFilterSelection)}\r\n
\r\n {/*{this.props.activePart.menuType === PartMenuType.Complex && this.props.activePart.subTypes().length && !showFilterSelection*/}\r\n {/* ? (*/}\r\n {/* */}\r\n {/*
*/}\r\n {/* ) : null}*/}\r\n {!showFilterSelection ? (\r\n */}\r\n {/* {this.props.activePart.subTypes().map(subType => (*/}\r\n {/* */}\r\n {/* ))}*/}\r\n {/*
*/}\r\n {/* \r\n \r\n
\r\n ) : null}\r\n {this.props.useWizard && !this.props.showWizardGroupsSelection ? (\r\n this.handleFilterValueClick(currentFilterValue)}\r\n style={styles}>\r\n
\r\n \r\n {currentFilterValue.displayText}\r\n
\r\n this.handleFilterValueClick(currentFilterValue)}\r\n style={styles}>\r\n
\r\n )\r\n };\r\n\r\n renderMobileFiltersList = () => {\r\n\r\n if (this.state.isLoading) {\r\n return this.renderLoadingList();\r\n }\r\n\r\n const currentActiveFilters = this.props.activePart.activeFeature\r\n ? this.props.activePart.activeFeature.dbFeature.filterValueIDs\r\n : {};\r\n\r\n if (!this.state.filterGroup || !this.state.filterGroup.values) {\r\n return [];\r\n }\r\n\r\n return this.state.availableFilterValues.map((filterValue, filterValueIndex) => {\r\n return this.getFilterFeatureItem(filterValue, filterValueIndex, currentActiveFilters)\r\n })\r\n };\r\n\r\n renderFiltersList = () => {\r\n\r\n const currentActiveFilters = this.props.activePart.activeFeature\r\n ? this.props.activePart.activeFeature.dbFeature.filterValueIDs\r\n : {};\r\n\r\n const navigationViewType = this.props.navigationViewType === 3 ? 2 : 1;\r\n const elements = [];\r\n for (let i = 0; i <= Math.ceil(this.state.availableFilterValues.length - 1 / navigationViewType); i++ ) { // for ex. 28/3 = 10 columns\r\n const innerElements = [];\r\n for (let j = 0; j < navigationViewType;j++ ) {\r\n const currentIndex = j+(i*navigationViewType);\r\n // console.log(\"currentIndex\", currentIndex);\r\n const filterValue = this.state.availableFilterValues[currentIndex]; // Number, for example 1031\r\n if (!this.state.filterGroup || !this.state.filterGroup.values) {\r\n break;\r\n }\r\n innerElements.push(this.getFilterFeatureItem(filterValue, currentIndex, currentActiveFilters));\r\n }\r\n elements.push(\r\n \r\n {currentFilterValue.displayText}\r\n
\r\n - \r\n {this.state.isLoading ? this.renderLoadingList() : this.renderFiltersList()}\r\n
\r\n
\r\n ) : (\r\n - \r\n {availableSteps.map((wizardStep, wizardStepIndex) => {\r\n const name = wizardStep.filterName.replace(/ /g,\"\").toLowerCase();\r\n return (\r\n
- this.setFeatureWizardStep(wizardStepIndex)}\r\n key={\"wizardStepIndex\"+wizardStepIndex}>\r\n {wizardStep.filterName}\r\n \r\n )\r\n })}\r\n
\r\n
\r\n )\r\n : ( // desktop\r\n \r\n
\r\n {!(interiorShowerWallWizard && !this.props.showerWallWizardGroupsSelected) ? (\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {availableSteps.length && !this.state.reload ? (\r\n
\r\n \r\n
\r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = (store) => ({\r\n filtersVisible: store.filterState.showFilters,\r\n filterGroups: store.filterState.filterGroups,\r\n fabricatorData: store.fabricatorState,\r\n userIsLoggedIn: store.userState.userIsLoggedIn,\r\n navigationViewType: store.navigationState.navigationViewType,\r\n activeQuoteIndex: store.quotesState.activeQuoteIndex,\r\n});\r\n\r\nconst mapDispatchToProps = () => ({});\r\n\r\nexport default injectIntl(\r\n connect(mapStateToProps, mapDispatchToProps)(FeatureWizard)\r\n);\r\n","import React, {Component} from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport {FormattedMessage, injectIntl} from \"react-intl\";\r\n\r\nimport Z from \"../core/parts/zIndex\";\r\nimport {ShowerTubCombo} from \"../core/parts/showerTubCombo\";\r\nimport {Vanity} from \"../core/parts/vanity\";\r\nimport {Shower} from \"../core/parts/shower\";\r\nimport {Wall} from \"../core/parts/wall\";\r\nimport {BathTubType, VanityTypes, ShowerTypes, ShowerComboTubType} from \"../core/constants\";\r\nimport {getMetadataByDimensions, reorder} from \"../../../misc/utils\";\r\nimport Analytics from \"../../../analytics\";\r\n\r\nimport {getCurrentLayout} from \"../../appLayout\";\r\nimport {ShowerAccessories} from \"../core/parts/showerAccessories\";\r\n\r\nclass ContextMenu extends Component {\r\n\r\n static propTypes = {\r\n designNavigationItems: PropTypes.array,\r\n contextMenuOpen: PropTypes.string,\r\n hoveredLayer: PropTypes.object,\r\n handleContextMenuClick: PropTypes.func,\r\n contextMenuPosition: PropTypes.object,\r\n contextMenuPonyWall: PropTypes.bool,\r\n renderGreenLayerByZindex: PropTypes.func,\r\n closeContextMenu: PropTypes.func,\r\n };\r\n\r\n state = {\r\n contextMenuButtons: []\r\n };\r\n\r\n componentDidMount() {\r\n this.setContextMenuButtons();\r\n if (this.props.closeContextMenu) {\r\n document.addEventListener('click', this.contextMenuBlur)\r\n }\r\n }\r\n\r\n contextMenuBlur = (e) => {\r\n if (!e.target.closest('.contextmenu-buttons')\r\n && !e.target.closest('.contextmenu-buttons__button')\r\n && !e.target.closest('.sprocket-container') && !e.target.closest('.canvas')) {\r\n this.props.closeContextMenu();\r\n }\r\n };\r\n\r\n componentWillUnmount() {\r\n if (this.props.closeContextMenu) {\r\n document.removeEventListener('click', this.contextMenuBlur)\r\n }\r\n }\r\n\r\n setShowerBodySelectionButtons = () => {\r\n const layout = getCurrentLayout();\r\n const shower = layout.parts[Shower.id];\r\n const vanity = layout.parts[Vanity.id];\r\n const counterTopSize = vanity.counterTopSize();\r\n const showerTubCombo = layout.parts[ShowerTubCombo.id];\r\n\r\n const showerSubParts = shower.subParts();\r\n const showerBody = showerSubParts.find((menuItem) => {\r\n return menuItem.part.partId === \"shower_body\"\r\n });\r\n const currentShowerSize = shower.showerSize();\r\n let contextMenuButtons = [];\r\n\r\n if (showerTubCombo.showerTubComboIsActive) {\r\n const showerTubComboSubParts = showerTubCombo.subParts();\r\n const wallConfiguration = showerTubComboSubParts.find((menuItem) => {\r\n return menuItem.part.partId === \"wall_configuration\"\r\n });\r\n showerTubCombo.wallConfiguration.features.forEach((wallConfigurationFeature) => {\r\n contextMenuButtons.push(Object.assign({}, wallConfiguration, {\r\n subMenuParent: \"Walls\",\r\n subMenuText: wallConfigurationFeature.partName,\r\n intlTranslate: this.props.intl.formatMessage({id: showerTubCombo.wallConfiguration.translateId}),\r\n bgImageText: wallConfigurationFeature.partName,\r\n clickFeature: true,\r\n text: wallConfigurationFeature.partName.includes(\"Pony\") ? \"Pony Wall\" : \"Left Shower Wall\"\r\n }))\r\n })\r\n } else if (showerBody && showerBody.part.features.length) {\r\n showerBody.part.features.forEach((showerBodyFeature) => {\r\n if (showerBodyFeature.partName.includes(currentShowerSize)) {\r\n // console.log('showerBodyFeature.partName', showerBodyFeature.partName);\r\n if (!(counterTopSize === \"72in\" && layout.type === 1 && showerBodyFeature.partName.includes(\"15X4\"))) {\r\n const isPony = showerBodyFeature.partName.includes(\"Pony\");\r\n contextMenuButtons.push(Object.assign({}, showerBody, {\r\n subMenuParent: \"Walls\",\r\n subMenuText: showerBodyFeature.partName,\r\n intlTranslate: this.props.intl.formatMessage({id: isPony\r\n ? \"visualizer.bathroom.walls.pony_wall\"\r\n : \"visualizer.bathroom.walls.left_shower_wall\"\r\n }),\r\n bgImageText: showerBodyFeature.partName,\r\n clickFeature: true,\r\n text: isPony ? \"Pony Wall\" : \"Left Shower Wall\"\r\n }))\r\n }\r\n }\r\n })\r\n }\r\n\r\n const clickedItemIndex = contextMenuButtons.findIndex(item => {\r\n return showerTubCombo.showerTubComboIsActive\r\n ? item.subMenuText === showerTubCombo.wallConfiguration.activeFeature.partName\r\n : item.subMenuText === showerBody.part.activeFeature.partName\r\n });\r\n\r\n if (clickedItemIndex > 0) {\r\n contextMenuButtons = reorder(contextMenuButtons, clickedItemIndex, 0); // swap items in array start\r\n }\r\n\r\n this.setState({\r\n contextMenuButtons\r\n })\r\n };\r\n\r\n setWallBButtons = () => {\r\n const layout = getCurrentLayout();\r\n let contextMenuButtons = [];\r\n\r\n const wallParent = layout.parts[Wall.id];\r\n const wallParts = wallParent.subParts().filter((menuItem) => {\r\n return (menuItem.part.partId === \"wall_b\") || (menuItem.part.partId === \"accent_wall\")\r\n });\r\n wallParts.forEach((wallPart) => {\r\n contextMenuButtons.push(Object.assign({}, wallPart, {\r\n subMenuParent: \"Walls\",\r\n subMenuText: wallPart.part.partName,\r\n bgImageText: wallPart.part.partName,\r\n text: wallPart.text,\r\n intlTranslate: this.props.intl.formatMessage({id: wallPart.part.translateId})\r\n }));\r\n });\r\n\r\n const vanity = layout.parts[Vanity.id];\r\n const vanityBacksplash = vanity.subParts().find((menuItem) => {\r\n return menuItem.part.partId === \"vanity_backsplash\"\r\n });\r\n if (vanityBacksplash) {\r\n contextMenuButtons.push(Object.assign({}, vanityBacksplash, {\r\n subMenuParent: \"Vanity\",\r\n subMenuText: vanityBacksplash.part.partName,\r\n bgImageText: vanityBacksplash.part.partName,\r\n text: vanityBacksplash.text,\r\n intlTranslate: this.props.intl.formatMessage({id: vanityBacksplash.part.translateId})\r\n }));\r\n }\r\n\r\n let zIndexToFind = this.props.hoveredLayer.zIndex;\r\n\r\n const clickedItem = contextMenuButtons.find(item => {\r\n return item.part.activeFeature && item.part.activeFeature.layer && item.part.activeFeature.layer.zIndex === zIndexToFind;\r\n });\r\n if (clickedItem && clickedItem.part && clickedItem.part.partId === \"vanity_backsplash\") {\r\n const vanityFaucet = vanity.subParts().find((menuItem) => {\r\n return menuItem.part.partId === \"vanity_faucet\"\r\n });\r\n if (vanityFaucet) {\r\n contextMenuButtons.push(Object.assign({}, vanityFaucet, {\r\n subMenuParent: \"Vanity\",\r\n subMenuText: vanityFaucet.part.partName,\r\n bgImageText: vanityFaucet.part.partName,\r\n text: vanityFaucet.text,\r\n intlTranslate: this.props.intl.formatMessage({id: vanityFaucet.part.translateId})\r\n }));\r\n }\r\n }\r\n\r\n const clickedItemIndex = contextMenuButtons.findIndex(item => {\r\n return item.part.activeFeature && item.part.activeFeature.layer && item.part.activeFeature.layer.zIndex === zIndexToFind;\r\n });\r\n\r\n if (clickedItemIndex > 0) {\r\n contextMenuButtons = reorder(contextMenuButtons, clickedItemIndex, 0); // swap items in array start\r\n }\r\n\r\n this.setState({\r\n contextMenuButtons\r\n })\r\n };\r\n\r\n setContextMenuButtons() {\r\n\r\n const layout = getCurrentLayout();\r\n\r\n if (this.props.contextMenuOpen === \"Shower Body Selection\") {\r\n this.setShowerBodySelectionButtons();\r\n return\r\n } else if (this.props.contextMenuOpen === \"wall_b_custom\") {\r\n this.setWallBButtons();\r\n return\r\n }\r\n\r\n const hoveredParent = this.props.designNavigationItems.find(navItem => {\r\n return navItem.text === this.props.contextMenuOpen\r\n });\r\n\r\n let relatedItems = hoveredParent.part.relatedItems;\r\n if (this.props.contextMenuOpen === \"Shower Tub Combo\") {\r\n relatedItems = [...hoveredParent.part.relatedItems, ...hoveredParent.part.getShowerRelatedItems()]\r\n }\r\n\r\n const clickedItem = this.props.hoveredLayer.zIndex === Z.layouts[layout.getCurrentLayoutName()].Shower.Steam60in.Body[\"2\"]\r\n ? relatedItems[0]\r\n : relatedItems.find((item) => {\r\n let zIndexToFind = this.props.hoveredLayer.zIndex;\r\n if (this.props.hoveredLayer.zIndex === Z.layouts[layout.getCurrentLayoutName()].Shower.Custom60in.Wall2) {\r\n zIndexToFind = Z.layouts[layout.getCurrentLayoutName()].Shower.Custom60in.Wall\r\n }\r\n if (\r\n this.props.hoveredLayer.zIndex === Z.layouts[layout.getCurrentLayoutName()].Shower.Custom60in.WallAccent2\r\n ) {\r\n zIndexToFind = Z.layouts[layout.getCurrentLayoutName()].Shower.Custom60in.WallAccent\r\n }\r\n return item.activeFeature && item.activeFeature.layer.zIndex === zIndexToFind\r\n });\r\n\r\n let itemsToRender = this.getItemsToRender(hoveredParent);\r\n\r\n // console.log('clickedItem', clickedItem);\r\n // console.log('relatedItems', relatedItems);\r\n // console.log('itemsToRender', itemsToRender);\r\n\r\n const clickedItemIndex = itemsToRender.findIndex(item => item.text === clickedItem.partName);\r\n if (clickedItemIndex > 0) {\r\n itemsToRender = reorder(itemsToRender, clickedItemIndex, 0); // swap items in array start\r\n }\r\n\r\n this.setState({\r\n contextMenuButtons: itemsToRender\r\n })\r\n }\r\n\r\n getItemsToRender = (hoveredParent) => {\r\n const layout = getCurrentLayout();\r\n let itemsToRender = hoveredParent.part.subParts();\r\n\r\n if ((this.props.contextMenuOpen === \"Shower\" || this.props.contextMenuOpen === \"Shower Tub Combo\") && hoveredParent.text !== \"Shower Accessories\") {\r\n itemsToRender = itemsToRender.filter(menuButton => {\r\n return this.props.contextMenuPonyWall\r\n ? menuButton.part.isPonyWallPart && menuButton.part.partId !== \"pony_wall\"\r\n : !menuButton.part.isPonyWallPart\r\n });\r\n const accessoriesParent = layout.parts[ShowerAccessories.id];\r\n if (accessoriesParent && accessoriesParent.categoryEnabled && !this.props.contextMenuPonyWall) {\r\n itemsToRender = itemsToRender.filter(menuButton => menuButton.part.partId !== \"shower_interior_wall_accent\");\r\n itemsToRender.push({\r\n text: \"Accessories\",\r\n part: {},\r\n subNav: true,\r\n intlTranslate: this.props.intl.formatMessage({id: \"visualizer.bathroom.accessories\"})\r\n })\r\n }\r\n itemsToRender = itemsToRender.filter(menuButton => menuButton.part.partId !== \"shower_head\");\r\n if (layout.parts[ShowerTubCombo.id] && !this.props.contextMenuPonyWall) {\r\n itemsToRender.push({\r\n text: \"Configure Layout\",\r\n part: {},\r\n subNav: true,\r\n intlTranslate: this.props.intl.formatMessage({id: \"visualizer.bathroom.contextmenu.configureLayout\"})\r\n })\r\n }\r\n }\r\n\r\n if (this.props.contextMenuOpen === \"Shower\") {\r\n itemsToRender = itemsToRender.filter(menuButton => menuButton.part.partId !== \"threshold\");\r\n }\r\n if (this.props.contextMenuOpen === \"Shower Tub Combo\") {\r\n itemsToRender = this.removeNotUsedTubItemsFromContextMenu(itemsToRender, hoveredParent.part.bottomTub);\r\n }\r\n if (this.props.contextMenuOpen === \"Vanity\") {\r\n itemsToRender = itemsToRender.filter((itemToRender) => {\r\n return itemToRender.part.partId !== \"vanity_mirror\" && itemToRender.part.partId !== \"vanity_backsplash\";\r\n });\r\n }\r\n\r\n return itemsToRender\r\n };\r\n\r\n removeNotUsedTubItemsFromContextMenu = (itemsToRender, activeTub) => {\r\n return itemsToRender.filter((itemToRender) => {\r\n let keepThisItem = true;\r\n Object.keys(ShowerComboTubType).forEach((key) => {\r\n if (itemToRender.part.partId === ShowerComboTubType[key] && itemToRender.part.partId !== activeTub\r\n && itemToRender.part.partId !== ShowerComboTubType.replacement_tub\r\n && itemToRender.part.partId !== ShowerComboTubType.bathtub_liner\r\n ) {\r\n keepThisItem = false\r\n }\r\n });\r\n if (itemToRender.text === \"Wall Configuration\") {\r\n keepThisItem = false\r\n }\r\n return keepThisItem\r\n });\r\n };\r\n\r\n handleSubNavClick = (menuItem) => {\r\n const layout = getCurrentLayout();\r\n\r\n if (menuItem.text === \"Accessories\") {\r\n const hoveredParent = this.props.designNavigationItems.find(navItem => {\r\n return navItem.text === \"Shower Accessories\"\r\n });\r\n this.setState({\r\n contextMenuButtons: this.getItemsToRender(hoveredParent)\r\n .map(button => {\r\n button.subMenuParent = \"Shower Accessories\";\r\n return button\r\n })\r\n });\r\n return false\r\n }\r\n\r\n const showerSubParts = layout.parts[Shower.id].subParts();\r\n\r\n const shower = showerSubParts.find((menuItem) => {\r\n return menuItem.part.partId === \"shower_body\"\r\n });\r\n shower.subMenuText = \"Shower\";\r\n shower.subMenuParent = \"Shower\";\r\n shower.intlTranslate = this.props.intl.formatMessage({id: \"visualizer.bathroom.shower\"});\r\n\r\n const showerTubCombo = layout.parts[ShowerTubCombo.id];\r\n const showerTubComboSubParts = showerTubCombo.subParts();\r\n\r\n const activeTubMenuItems = showerTubComboSubParts.filter(menuItem => menuItem.part.bottomTubId);\r\n activeTubMenuItems.forEach(menuItem => menuItem.subMenuParent = \"Shower Tub Combo\");\r\n\r\n const wallConfiguration = showerTubComboSubParts.find((menuItem) => {\r\n return menuItem.part.partId === \"wall_configuration\"\r\n });\r\n wallConfiguration.subMenuText = \"Shower Tub Combo\";\r\n wallConfiguration.subMenuParent = \"Shower Tub Combo\";\r\n wallConfiguration.intlTranslate = this.props.intl.formatMessage({id: \"visualizer.bathroom.shower_tub_combo\"});\r\n\r\n this.setState({\r\n contextMenuButtons: [\r\n shower,\r\n wallConfiguration,\r\n ...activeTubMenuItems,\r\n ]\r\n })\r\n };\r\n\r\n handleContextMenuHover = (menuItem) => {\r\n const layout = getCurrentLayout();\r\n const hoveredButton = menuItem.text === \"Countertop\" ? \"CounterTop\" : menuItem.text;\r\n const hoveredParent = menuItem.subMenuParent || this.props.contextMenuOpen;\r\n\r\n const layoutType = layout.getCurrentLayoutName();\r\n\r\n // console.log('hoveredButton', hoveredButton);\r\n // console.log('hoveredParent', hoveredParent);\r\n\r\n if (hoveredButton && hoveredParent) {\r\n\r\n let hoveredZindex = \"\";\r\n\r\n if (hoveredParent === \"Shower\") {\r\n const shower = layout.parts.Shower;\r\n if (shower.activeSubType_ === ShowerTypes.Complete) {\r\n switch (hoveredButton) {\r\n case \"Fixture\":\r\n hoveredZindex = Z.layouts[layoutType][hoveredParent].Steam60in[hoveredButton];\r\n break;\r\n default:\r\n hoveredZindex = Z.layouts[layoutType][hoveredParent].Steam60in.Body[\"1\"]; // 1st part of shower\r\n break;\r\n }\r\n } else {\r\n switch (hoveredButton) {\r\n case \"Shower Walls\":\r\n hoveredZindex = Z.layouts[layoutType].Shower.Custom60in.Wall;\r\n break;\r\n case \"Shower Body\":\r\n if (shower.showerDoor && shower.showerDoor.features.length) {\r\n hoveredZindex = Z.layouts[layoutType][hoveredParent].Custom60in.ShowerDoor;\r\n } else {\r\n hoveredZindex = Z.layouts[layoutType][hoveredParent].Custom60in.Glass;\r\n }\r\n break;\r\n case \"Shower Door\":\r\n hoveredZindex = Z.layouts[layoutType][hoveredParent].Custom60in.ShowerDoor;\r\n break;\r\n case \"Handle\":\r\n hoveredZindex = Z.layouts[layoutType][hoveredParent].Custom60in.ShowerDoorHandle;\r\n break;\r\n case \"Shower Pan\":\r\n case \"Shower Pans\":\r\n hoveredZindex = Z.layouts[layoutType][hoveredParent].Custom60in.ShowerPanCombo;\r\n break;\r\n case \"Shower Walls Accent\":\r\n hoveredZindex = Z.layouts[layoutType][hoveredParent].Custom60in.WallAccent;\r\n break;\r\n case \"Pony Wall Glass\":\r\n hoveredZindex = Z.layouts[layoutType][\"Shower\"].Custom60in.PonyWallGlass;\r\n break;\r\n case \"Pony Wall Cap\":\r\n hoveredZindex = Z.layouts[layoutType][\"Shower\"].Custom60in.PonyWallCap;\r\n break;\r\n case \"Floor\":\r\n hoveredZindex = shower.showerFloorIsActive\r\n ? Z.layouts[layoutType][hoveredParent].Custom60in[hoveredButton]\r\n : Z.layouts[layoutType][hoveredParent].Custom60in.ShowerPanCombo;\r\n break;\r\n default:\r\n hoveredZindex = Z.layouts[layoutType][hoveredParent].Custom60in[hoveredButton];\r\n break;\r\n }\r\n }\r\n } else if (hoveredParent === \"Shower Tub Combo\") {\r\n switch (hoveredButton) {\r\n case \"Shower Door\":\r\n hoveredZindex = Z.layouts[layoutType].Shower.Custom60in.ShowerDoor;\r\n break;\r\n case \"Shower Walls\":\r\n hoveredZindex = Z.layouts[layoutType].Shower.Custom60in.Wall;\r\n break;\r\n case \"Shower Walls Accent\":\r\n hoveredZindex = Z.layouts[layoutType].Shower.Custom60in.WallAccent;\r\n break;\r\n case \"Fixture\":\r\n hoveredZindex = Z.layouts[layoutType][\"Shower\"].Custom60in.Fixture;\r\n break;\r\n case \"Handle\":\r\n hoveredZindex = Z.layouts[layoutType][\"Shower\"].Custom60in.ShowerDoorHandle;\r\n break;\r\n case \"Wall Configuration\":\r\n hoveredZindex = Z.layouts[layoutType][\"Shower\"].Custom60in.ShowerDoor;\r\n break;\r\n case \"Jetted Tub\":\r\n hoveredZindex = Z.layouts[layoutType][\"Shower\"].TubCombo.JettedTub;\r\n break;\r\n case \"Tub Liner\":\r\n hoveredZindex = Z.layouts[layoutType][\"Shower\"].TubCombo.Liner;\r\n break;\r\n case \"Walk In Tub\":\r\n hoveredZindex = Z.layouts[layoutType][\"Shower\"].TubCombo.WalkInTub;\r\n break;\r\n case \"Replacement Tub\":\r\n hoveredZindex = Z.layouts[layoutType][\"Shower\"].TubCombo.ReplacementTub;\r\n break;\r\n case \"Pony Wall Glass\":\r\n hoveredZindex = Z.layouts[layoutType][\"Shower\"].Custom60in.PonyWallGlass;\r\n break;\r\n case \"Pony Wall Cap\":\r\n hoveredZindex = Z.layouts[layoutType][\"Shower\"].Custom60in.PonyWallCap;\r\n break;\r\n default:\r\n hoveredZindex = Z.layouts[layoutType][\"Shower\"].TubCombo[hoveredButton.replace(/ /g, \"\")];\r\n break;\r\n }\r\n } else if (hoveredParent === \"Vanity\") { // Vanity\r\n if (layout.parts.Vanity.activeSubType_ === VanityTypes.Complete) {\r\n switch (hoveredButton) {\r\n case \"Vanity\":\r\n hoveredZindex = Z.layouts[layoutType].Vanity.Complete.Cabinet;\r\n break;\r\n case \"Accent Wall\":\r\n hoveredZindex = Z.layouts[layoutType].Wall_A_Accent_Mask;\r\n break;\r\n default:\r\n hoveredZindex = Z.layouts[layoutType].Vanity.Custom[hoveredButton]; // Mirror\r\n break;\r\n }\r\n } else {\r\n switch (hoveredButton) {\r\n case \"Accent Wall\":\r\n hoveredZindex = Z.layouts[layoutType].Wall_A_Accent_Mask;\r\n break;\r\n case \"Backsplash\":\r\n hoveredZindex = Z.layouts[layoutType].Vanity.Custom.VanityBacksplash;\r\n break;\r\n default:\r\n hoveredZindex = Z.layouts[layoutType].Vanity.Custom[hoveredButton];\r\n break;\r\n }\r\n }\r\n } else if (hoveredParent === \"Bathtub\") { // Bathtub\r\n if (layout.parts.Bathtub.activeSubType_ === BathTubType.FreeStanding) {\r\n if (hoveredButton === \"Bathtub\") {\r\n hoveredZindex = Z.layouts[layoutType].BathTub.FreeStanding.Base\r\n } else {\r\n hoveredZindex = Z.layouts[layoutType].BathTub.FreeStanding[hoveredButton]\r\n }\r\n } else {\r\n if (hoveredButton === \"Rim\") {\r\n hoveredZindex = Z.layouts[layoutType].BathTub.Custom60in.Top\r\n } else {\r\n hoveredZindex = Z.layouts[layoutType].BathTub.Custom60in[hoveredButton]\r\n }\r\n }\r\n } else if (hoveredParent === \"Walls\") { // Bathtub\r\n switch (hoveredButton) {\r\n case \"Pony Wall\":\r\n hoveredZindex = Z.layouts[layoutType].Shower.Custom60in.PonyWall;\r\n break;\r\n case \"Left Shower Wall\": {\r\n const wallParent = layout.parts[hoveredParent];\r\n const activeShowerGroup = wallParent.getActiveShowerGroup();\r\n const showerDimensions = getMetadataByDimensions(activeShowerGroup.showerDimensions());\r\n hoveredZindex = showerDimensions === \"Half\"\r\n ? Z.layouts[layoutType].Shower.Custom60in.ExtrusionWallLeftHalfWall\r\n : Z.layouts[layoutType].Shower.Custom60in.ExtrusionWallLeft;\r\n break;\r\n }\r\n default:\r\n hoveredZindex = Z.layouts[layoutType].Vanity.Custom[hoveredButton];\r\n break;\r\n }\r\n }\r\n\r\n this.props.renderGreenLayerByZindex(hoveredZindex);\r\n }\r\n\r\n };\r\n\r\n render() {\r\n\r\n let contextMenuStyles = this.props.contextMenuPosition || {};\r\n if (this.state.contextMenuButtons.length === 4) {\r\n contextMenuStyles = Object.assign({}, contextMenuStyles, {maxWidth:\"210px\"} )\r\n }\r\n\r\n return (\r\n \r\n
\r\n )}\r\n \r\n \r\n {availableSteps[this.state.featureWizardStep]\r\n ? `Select a ${this.props.getFilterDisplayName(availableSteps[this.state.featureWizardStep].filterName, this.props.intl)} for your ${this.props.activeSubPart.partId === \"shower_interior_wall\" ? \"Wall\" : \"Vanity\"}.`\r\n : null}\r\n \r\n \r\n
\r\n \r\n
\r\n )\r\n }\r\n}\r\n\r\nexport default injectIntl(ContextMenu)\r\n","import React, { Component } from 'react';\r\nimport PropTypes from \"prop-types\";\r\nimport {connect} from \"react-redux\";\r\nimport $ from \"jquery\";\r\nimport {FormattedMessage} from \"react-intl\";\r\n\r\nimport Analytics from './../../analytics';\r\n\r\nexport class HomeMenu extends Component {\r\n\r\n static propTypes = {\r\n mobileNav: PropTypes.array\r\n };\r\n\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n toggle: false,\r\n };\r\n }\r\n\r\n componentWillUnmount() {\r\n $(document).off('click', this.handleMobileBlur);\r\n }\r\n\r\n handleItemClick = () => {\r\n\r\n };\r\n\r\n handleBack = () => {\r\n this.handleToggleDropdown();\r\n };\r\n\r\n handleToggleDropdown = () => {\r\n Analytics.sendClickEvent('home-button-dropdown', !this.state.toggle);\r\n this.setState({\r\n toggle: !this.state.toggle,\r\n }, () => {\r\n this.state.toggle\r\n ? $(document).on('click', this.handleMobileBlur)\r\n : $(document).off('click', this.handleMobileBlur)\r\n })\r\n };\r\n\r\n handleMobileBlur = (e) => {\r\n const navClick = e.target.closest('[class*=\"mobile-home-menu\"]');\r\n const backButtonClick = e.target.closest('.ui-back');\r\n if (!navClick && !backButtonClick) {\r\n this.handleToggleDropdown();\r\n }\r\n };\r\n\r\n render() {\r\n // let menu = [{\r\n // name: \"Return to Website\",\r\n // url: document.referrer || document.location.href\r\n // }, ...this.props.mobileNav];\r\n\r\n return (\r\n \r\n {this.state.contextMenuButtons.map((menuItem) => {\r\n return menuItem ? (\r\n \r\n ) : null\r\n })}\r\n
\r\n \r\n {this.props.windowWidth >= 991 ? (\r\n \r\n ) : (\r\n \r\n )}\r\n
\r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = (store) => {\r\n return {\r\n mobileNav: store.navigationState.mobileNav,\r\n windowWidth: store.serverState.windowWidth,\r\n };\r\n};\r\n\r\nexport default connect(mapStateToProps, {\r\n})(HomeMenu);\r\n","import React, {Component} from 'react';\r\nimport {connect} from \"react-redux\";\r\nimport $ from \"jquery\";\r\nimport {FormattedMessage} from \"react-intl\";\r\n\r\nimport ActionTypes from \"../../misc/actionTypes\";\r\nimport Analytics from './../../analytics';\r\nimport UserLoginButton from './../ui/userLoginButton';\r\nimport {toggleUserPopup, changeMessageBoxState} from \"../../actions/actionFunctions\";\r\nimport {SaveIcon} from \"./icons\";\r\nimport {loaderDisable, loaderEnable} from \"../ui/loaderView\";\r\nimport {saveQuote} from \"../../api/server-api\";\r\nimport {UserPopupTypes} from \"../visComponents/constants\";\r\nimport {showQuoteSavedNotification} from \"../ui/successNotification\";\r\n\r\nexport class SaveButton extends Component {\r\n\r\n saving = false;\r\n\r\n handleSaveQuote = () => {\r\n if (!UserLoginButton.handleLoginClick({\r\n ...this.props,\r\n saveQuoteAfterLogin: true,\r\n userPopupType: UserPopupTypes.NewDesign\r\n })) {\r\n Analytics.sendClickEvent(\"save-button-show-login\");\r\n } else if (!this.saving) {\r\n Analytics.sendClickEvent(\"save-button\");\r\n this.saveQuoteSubmit();\r\n }\r\n // const fabricatorSettings = this.props.fabricatorData.settings;\r\n // if ((fabricatorSettings.leadCapture && !(document.kvConfig.isBackend && document.kvConfig.jobId && document.kvConfig.canSaveQuote)) && !this.props.isPhoneNumberValidated) {\r\n // Analytics.sendClickEvent(\"save-button-show-login\");\r\n // this.props.toggleUserPopup({\r\n // userPopupOpened: true,\r\n // saveQuoteAfterLogin: true\r\n // });\r\n // } else {\r\n // Analytics.sendClickEvent(\"save-button\");\r\n // this.saveQuoteSubmit();\r\n // }\r\n };\r\n\r\n saveQuoteSubmit = () => {\r\n $(document).trigger(ActionTypes.REMOVE_GREEN_ZONE_ON_CANVAS, () => {\r\n if (!this.saving) {\r\n this.saving = true;\r\n loaderEnable(\"loader.savingQuoteText\");\r\n saveQuote(true)\r\n .then((response) => {\r\n if (response) {\r\n let responseDataBase = response;\r\n if (response.data) {\r\n responseDataBase = response.data;\r\n }\r\n const responseData = typeof responseDataBase === 'object' ? responseDataBase : JSON.parse(responseDataBase);\r\n console.log('saveButton saveQuote response:', responseData);\r\n loaderDisable();\r\n }\r\n showQuoteSavedNotification();\r\n this.saving = false;\r\n // downloadCanvasImageById(this.props.canvasId);\r\n })\r\n .catch((error) => {\r\n console.log('saveButton saveQuote error:', error);\r\n loaderDisable();\r\n this.saving = false;\r\n })\r\n }\r\n });\r\n };\r\n\r\n render() {\r\n return (\r\n \r\n )\r\n }\r\n\r\n}\r\nconst mapStateToProps = (store) => ({\r\n userIsLoggedIn: store.userState.userIsLoggedIn,\r\n isPhoneNumberValidated: store.userState.isPhoneNumberValidated,\r\n fabricatorData: store.fabricatorState\r\n});\r\nexport default connect(mapStateToProps, {\r\n toggleUserPopup,\r\n changeMessageBoxState\r\n})(SaveButton);\r\n","import {Component} from 'react';\r\n\r\nexport default class Tutorial extends Component {\r\n\r\n changeHighlightRingPosition = (selector, stateProperty = \"ringStyles\") => {\r\n const highlightElement = document.querySelector(selector);\r\n if (highlightElement) {\r\n const rect = highlightElement.getBoundingClientRect();\r\n this.setState({\r\n [stateProperty]: {\r\n left: rect.left,\r\n top: rect.top,\r\n }\r\n })\r\n }\r\n };\r\n\r\n}\r\n","import values from 'lodash/values';\r\nimport invert from 'lodash/invert';\r\nimport snakeCase from 'lodash/snakeCase';\r\n\r\nimport LayoutCommon from \"../../visComponents/layoutCommon\";\r\n\r\nimport Appliance from \"./parts/appliance\";\r\nimport Cabinet from \"./parts/cabinet\";\r\nimport CenterIsland from \"./parts/centerIsland\";\r\nimport CountertopGroup from \"./parts/countertopGroup\";\r\nimport Walls from \"./parts/walls\";\r\nimport FloorNew from \"./parts/floorNew\";\r\nimport Globals from \"./parts/globals\";\r\n\r\nimport {LayoutType, LayoutAbbreviation} from \"./constants\";\r\nimport {LayoutThumbnails} from \"./assets\";\r\nimport Z from \"./zIndex\";\r\nimport store from \"../../../store\";\r\nimport * as types from \"../../../actions/actionTypes\";\r\nimport Other from \"./parts/other\";\r\nimport NonVisualizerSubPart from \"./subparts/nonVisualizerSubPart\";\r\nimport DesignNavigationItem from \"../../visComponents/designNavigationItem\";\r\nimport Layer from \"../../visComponents/layer\";\r\nimport {largeLayoutShadow, SmallLayoutShadow} from \"./assets\";\r\n// import {featureThumbnailUrl} from \"../../../misc/helpers\";\r\nimport {AVAILABLE_VISUALIZER_TYPES} from \"../../../config\";\r\n\r\nexport class Layout extends LayoutCommon {\r\n\r\n /**\r\n * @type {int}\r\n */\r\n defaultType = LayoutType.LShapeWithPeninsulaWithIsland;\r\n type = this.defaultType;\r\n visualizerType = AVAILABLE_VISUALIZER_TYPES.Kitchen;\r\n localStorageKey = \"kvState\";\r\n layersBinding = \"Kitchen\";\r\n layoutNames = LayoutAbbreviation;\r\n layoutTypes = LayoutType;\r\n layoutThumbnails = LayoutThumbnails;\r\n zIndexes = Z.layouts;\r\n\r\n constructor(props) {\r\n super(props);\r\n this.parts[Appliance.id] = new Appliance();\r\n this.parts[Cabinet.id] = new Cabinet();\r\n this.parts[CenterIsland.id] = new CenterIsland();\r\n this.parts[CountertopGroup.id] = new CountertopGroup();\r\n this.parts[Walls.id] = new Walls();\r\n this.parts[FloorNew.id] = new FloorNew();\r\n this.parts[Globals.id] = new Globals();\r\n this.parts[Other.id] = new Other();\r\n\r\n values(this.parts).forEach(part => part.layout = this);\r\n }\r\n\r\n addCustomLayers = (res) => {\r\n // add global shadow\r\n const globalShadowParent = this.parts[Globals.id]; // if no global shadow uploaded - take the hardcoded one\r\n if (!globalShadowParent.categoryEnabled || !globalShadowParent.globalShadow || !globalShadowParent.globalShadow.activeFeature) {\r\n if (this.getCurrentLayoutAbbreviation().includes(\"L\")) {\r\n res.push(new Layer(\"kv\", Z.layouts.LShape.Globals.GlobalShadow, largeLayoutShadow, false));\r\n } else if (this.type === LayoutType.Small) {\r\n res.push(new Layer(\"kv\", Z.layouts.Small.Globals.GlobalShadow, SmallLayoutShadow, false));\r\n }\r\n }\r\n return res\r\n }\r\n\r\n getCurrentLayoutName(type = this.type) {\r\n return invert(LayoutType)[type];\r\n }\r\n\r\n getCurrentLayoutAbbreviation() {\r\n return LayoutAbbreviation[this.getCurrentLayoutName()]\r\n }\r\n\r\n // getActiveFeatures(returnAllFeatures) { // removed, we have common now\r\n // let activeFeatures = [];\r\n // const receiveAllFeatures = returnAllFeatures || !!(this.qtCategories && this.qtCategories.length);\r\n // this.getFeatures(receiveAllFeatures).forEach((parentGroup) => {\r\n // // let subParts = parentGroup.subParts().filter(subPart => !subPart.part.disabled); // we need to store every item!\r\n // if (parentGroup.menuType === 0) { // FLOOR\r\n // if (!parentGroup.disabled && parentGroup.activeFeature\r\n // && !parentGroup.activeFeature.partName.includes(\"laceholder\")) {\r\n // activeFeatures.push({\r\n // selectionGroup: parentGroup.partName,\r\n // partId: parentGroup.partId,\r\n // quantity: 0,\r\n // cartFeature: parentGroup.activeFeature\r\n // });\r\n // }\r\n // } else {\r\n // let subItems = parentGroup.relatedItems;\r\n // const excluded = [\"fridge_shadow\"];\r\n // if (!returnAllFeatures) {\r\n // subItems = subItems.filter(subItem => !excluded.includes(subItem.partId) && subItem.activeFeature\r\n // && subItem.activeFeature.partName && !subItem.activeFeature.partName.includes(\"laceholder\"));\r\n // }\r\n // subItems.forEach((subItem) => {\r\n // //adding top cabinet parts to cart features //Alan 25.07.2019\r\n // if (subItem.partId === \"top_cabinet\" && subItem.activeFeature && subItem.activeFeature.metaData[\"Module\"]) {\r\n // let uniqueModuleParts = []; // arrayOf: {width: \"\", height: \"\", inlayTypeName: \"\", quantity: 0}\r\n // for (let i = 1; i <= subItem.moduleSystem.length; i++ ) {\r\n // const currentModuleSystemNumber = i - 1;\r\n // for (let k = 0; k <= subItem.moduleSystem[currentModuleSystemNumber].length - 1; k++ ) {\r\n // const modulePart = subItem.moduleSystem[currentModuleSystemNumber][k];\r\n // const modulePartSplitted = modulePart.split(\"_\");\r\n //\r\n // let inlayTypeName = subItem.defaultInlayType;\r\n // subItem.inlayTypes.forEach(inlayType => {\r\n // if (inlayType.moduleParts.includes(i + \"_\" + modulePartSplitted[2])) {\r\n // inlayTypeName = inlayType.name\r\n // }\r\n // });\r\n //\r\n // const existingModulePart = uniqueModuleParts.find((uniqueModulePart) => {\r\n // return uniqueModulePart.width === modulePartSplitted[0]\r\n // && uniqueModulePart.height === modulePartSplitted[1]\r\n // && uniqueModulePart.inlayTypeName === inlayTypeName\r\n // });\r\n // if (existingModulePart) {\r\n // existingModulePart.quantity++;\r\n // } else {\r\n // const cartFeature = subItem.findFeatureByModuleAndModulePart(modulePart, inlayTypeName);\r\n // if (cartFeature) {\r\n // uniqueModuleParts.push({\r\n // width: modulePartSplitted[0],\r\n // height: modulePartSplitted[1],\r\n // inlayTypeName,\r\n // cartFeature,\r\n // quantity: 1,\r\n // partName: subItem.activeFeature.partName\r\n // })\r\n // }\r\n // }\r\n // }\r\n // }\r\n // // console.log(\"uniqueModuleParts\", uniqueModuleParts);\r\n // uniqueModuleParts.forEach((uniqueModulePart, uniqueModulePartIndex) => {\r\n // activeFeatures.push({\r\n // selectionGroup: parentGroup.partName,\r\n // partId: subItem.partId + \"_module_\" + uniqueModulePartIndex,\r\n // // partId: subItem.partId,\r\n // cartFeature: uniqueModulePart.cartFeature,\r\n // thumbnail: featureThumbnailUrl(subItem.activeFeature),\r\n // partName: uniqueModulePart.partName,\r\n // description: `Width: ${uniqueModulePart.width} Height: ${uniqueModulePart.height} Inlay Type: ${uniqueModulePart.inlayTypeName}`,\r\n // quantity: uniqueModulePart.quantity\r\n // });\r\n // });\r\n // }\r\n // if (subItem.activeFeature) {\r\n // activeFeatures.push({\r\n // selectionGroup: parentGroup.partName,\r\n // partId: subItem.partId,\r\n // quantity: 0,\r\n // cartFeature: subItem.activeFeature\r\n // });\r\n // }\r\n // })\r\n // }\r\n // });\r\n // // console.log('activeFeatures', activeFeatures);\r\n // if (!returnAllFeatures && this.qtCategories && this.qtCategories.length) {\r\n // activeFeatures = activeFeatures.filter(activeFeature => {\r\n // return this.qtCategories.some(qtCategory => qtCategory.subParts.some(subPart => {\r\n // return subPart.part.partId === activeFeature.partId\r\n // }))\r\n // })\r\n // }\r\n // return activeFeatures\r\n // }\r\n\r\n /**\r\n *\r\n * @param bvState {object}\r\n * @param setCartAndUserState {boolean | array} // only in the parseResponse function (when job is opened in the dashboard)\r\n * @param useNames {boolean}\r\n * @param needToChangeLayout {boolean}\r\n * @param firstLoad {boolean}\r\n */\r\n setActiveFeaturesFromObject(bvState, setCartAndUserState = false, useNames = false, needToChangeLayout = true, firstLoad = false) {\r\n if (bvState) {\r\n\r\n const cabinetParent = this.parts[Cabinet.id];\r\n const countertopGroupParent = this.parts[CountertopGroup.id];\r\n\r\n const layout_type = +bvState.layout_type;\r\n needToChangeLayout = needToChangeLayout && (layout_type || layout_type === 0) && (layout_type !== +this.type);\r\n\r\n if (needToChangeLayout) {\r\n this.type = layout_type;\r\n }\r\n\r\n // to avoid checks below\r\n bvState.disabled_parts = bvState.disabled_parts || [];\r\n\r\n this.getFeatures()\r\n .forEach((parentGroup) => {\r\n if (parentGroup.menuType === 0) {\r\n const partId = parentGroup.partId;\r\n const hasPreviouslySavedItem = this.selectedLayoutFeatures[layout_type]\r\n && this.selectedLayoutFeatures[layout_type][partId];\r\n if (bvState.hasOwnProperty(partId) || hasPreviouslySavedItem) {\r\n if (useNames) {\r\n parentGroup.activeFeature = parentGroup.getFeatureByPartName(bvState[partId]);\r\n if (!parentGroup.activeFeature && hasPreviouslySavedItem) {\r\n parentGroup.activeFeature = parentGroup.getFeatureByPartName(hasPreviouslySavedItem);\r\n }\r\n } else {\r\n parentGroup.activeFeature = parentGroup.getFeatureById(bvState[partId])\r\n || parentGroup.getDefaultFeature();\r\n }\r\n parentGroup.placeholderChanged = !!parentGroup.activeFeature;\r\n // const {activeQuoteIndex} = store.getState().quotesState;\r\n // parentGroup.firstClick[activeQuoteIndex] = !!parentGroup.activeFeature;\r\n }\r\n if (parentGroup.activeFeature && firstLoad && !parentGroup.activeFeature.notAvailableInVisualizer) { // Leave non in vis features locked\r\n parentGroup.activeFeature.dbFeature.unlocked = true;\r\n }\r\n if (bvState.disabled_parts.includes(partId)) {\r\n parentGroup.disabled = true\r\n }\r\n } else {\r\n let relatedItems = parentGroup.getRelatedItems();\r\n relatedItems.forEach((subPart) => {\r\n const partId = subPart.partId;\r\n let previouslySelectedItem = null;\r\n subPart.selectedFeaturesHistory.some(featureName => {\r\n previouslySelectedItem = subPart.getFeatureByPartName(featureName);\r\n return previouslySelectedItem\r\n });\r\n if (bvState.hasOwnProperty(partId) || previouslySelectedItem) {\r\n if (useNames) {\r\n const matchingFeature = (partId === \"backsplash\" && bvState[\"backsplash_type\"])\r\n ? subPart.getFeatureByBacksplashType(bvState[\"backsplash_type\"], bvState[\"backsplash\"])\r\n : subPart.getFeatureByPartName(bvState[partId]);\r\n if (matchingFeature) {\r\n subPart.activeFeature = matchingFeature;\r\n } else if (previouslySelectedItem) {\r\n subPart.activeFeature = previouslySelectedItem;\r\n }\r\n } else {\r\n subPart.activeFeature = subPart.getFeatureById(bvState[partId]) || parentGroup.getDefaultFeature();\r\n }\r\n subPart.placeholderChanged = !!subPart.activeFeature;\r\n // const {activeQuoteIndex} = store.getState().quotesState;\r\n // subPart.firstClick[activeQuoteIndex] = !!subPart.activeFeature;\r\n // if (subPart.firstClick) {\r\n // console.log(\"subPart.firstClick\", subPart);\r\n // }\r\n }\r\n if (subPart.activeFeature && firstLoad && !subPart.activeFeature.notAvailableInVisualizer) {\r\n subPart.activeFeature.dbFeature.unlocked = true;\r\n }\r\n if (bvState.disabled_parts.includes(partId)) {\r\n subPart.disabled = true\r\n }\r\n })\r\n }\r\n });\r\n\r\n const partPredicate = (part, value) => useNames ? part.partName === value : +part.dbFeature.id === +value;\r\n Object.keys(bvState)\r\n .forEach((bvStateKey) => {\r\n let partId, parent, relatedName;\r\n switch(bvStateKey) {\r\n case \"top_cabinet_parts\":\r\n partId = \"top_cabinet_parts\";\r\n parent = cabinetParent;\r\n relatedName = \"topCabinet\";\r\n break;\r\n case \"bottom_cabinet_parts\":\r\n partId = \"bottom_cabinet_parts\";\r\n parent = cabinetParent;\r\n relatedName = \"bottomCabinet\";\r\n break;\r\n case \"crown_molding\":\r\n partId = \"crown_molding_parts\";\r\n parent = cabinetParent;\r\n relatedName = \"crownMolding\";\r\n break;\r\n case \"countertop_parts\":\r\n partId = \"countertop_parts\";\r\n parent = countertopGroupParent;\r\n relatedName = \"countertop\";\r\n break;\r\n default:\r\n break;\r\n }\r\n if (parent && bvState[partId] && bvState[partId].length && parent[relatedName]) {\r\n const relatedItem = parent[relatedName];\r\n // if (bvStateKey === \"top_cabinet_parts\" || bvStateKey === \"bottom_cabinet_parts\") {\r\n // bvState[partId] = Array.isArray(bvState[bvStateKey])\r\n // ? bvState[bvStateKey]\r\n // : JSON.parse(decodeURIComponent(bvState[bvStateKey]));\r\n // }\r\n const matchingParts = bvState[partId]\r\n .map((featureId) => {\r\n const arrayOfItems = (relatedItem.moduleParts)\r\n ? [...relatedItem.featuresParts, ...relatedItem.moduleParts]\r\n : relatedItem.featuresParts;\r\n return arrayOfItems.find(_ => partPredicate(_, featureId));\r\n })\r\n .filter((featuresPart) => {\r\n return featuresPart && featuresPart.matchesMetaForArrayOfConditions(relatedItem.getArrayOfConditions());\r\n });\r\n if (matchingParts.length) {\r\n relatedItem.activeFeatureParts = matchingParts\r\n }\r\n if (bvStateKey === \"top_cabinet_parts\" && bvState[\"top_module_system\"]) {\r\n relatedItem.moduleSystem = Array.isArray(bvState[\"top_module_system\"])\r\n ? bvState[\"top_module_system\"]\r\n : JSON.parse(decodeURIComponent(bvState[\"top_module_system\"]));\r\n if (bvState[\"inlay_types\"]) {\r\n relatedItem.inlayTypes = Array.isArray(bvState[\"inlay_types\"])\r\n ? bvState[\"inlay_types\"]\r\n : JSON.parse(decodeURIComponent(bvState[\"inlay_types\"]));\r\n }\r\n relatedItem.activeFeatureParts = relatedItem.setActiveFeatureParts();\r\n } else if (bvStateKey === \"bottom_cabinet_parts\" && bvState[\"bottom_module_system\"]) {\r\n relatedItem.moduleSystem = Array.isArray(bvState[\"bottom_module_system\"])\r\n ? bvState[\"bottom_module_system\"]\r\n : JSON.parse(decodeURIComponent(bvState[\"bottom_module_system\"]));\r\n relatedItem.activeFeatureParts = relatedItem.setActiveFeatureParts();\r\n }\r\n }\r\n });\r\n\r\n if (needToChangeLayout) {\r\n this.changeLayout(this.getFeatures());\r\n }\r\n\r\n if (setCartAndUserState) {\r\n this.setCartStateAndUserStateFromBvState(bvState, setCartAndUserState);\r\n }\r\n\r\n const layoutParts = this.designNavigationItems()\r\n .filter(parentGroup => parentGroup.part.categoryEnabled)\r\n .map((parentGroup) => parentGroup.part.partName);\r\n\r\n if (!this.isFakeLayout) {\r\n store.dispatch({\r\n type: types.SET_LAYOUT_DATA_PARTS,\r\n payload: {layoutParts}\r\n });\r\n }\r\n\r\n }\r\n }\r\n\r\n /**\r\n * Sets bv features from url\r\n */\r\n\r\n parseUrl(bvState) {\r\n if (bvState.disabled_parts) {\r\n bvState.disabled_parts = bvState.disabled_parts.split(\",\");\r\n }\r\n if (bvState.top_cabinet_parts) {\r\n bvState.top_cabinet_parts = Number.isInteger(bvState.top_cabinet_parts)\r\n ? [bvState.top_cabinet_parts]\r\n : bvState.top_cabinet_parts.split(\",\")\r\n // bvState.top_cabinet_parts = JSON.parse(decodeURIComponent(bvState.top_cabinet_parts));\r\n }\r\n if (bvState.bottom_cabinet_parts) {\r\n bvState.bottom_cabinet_parts = Number.isInteger(bvState.bottom_cabinet_parts)\r\n ? [bvState.bottom_cabinet_parts]\r\n : bvState.bottom_cabinet_parts.split(\",\")\r\n // bvState.bottom_cabinet_parts = JSON.parse(decodeURIComponent(bvState.bottom_cabinet_parts));\r\n }\r\n if (bvState.crown_molding_parts) {\r\n bvState.crown_molding_parts = Number.isInteger(bvState.crown_molding_parts)\r\n ? [bvState.crown_molding_parts]\r\n : bvState.crown_molding_parts.split(\",\")\r\n }\r\n if (bvState.countertop_parts) {\r\n bvState.countertop_parts = Number.isInteger(bvState.countertop_parts)\r\n ? [bvState.countertop_parts]\r\n : bvState.countertop_parts.split(\",\")\r\n }\r\n if (bvState.top_module_system) {\r\n bvState.top_module_system = JSON.parse(decodeURIComponent(bvState.top_module_system))\r\n }\r\n if (bvState.inlay_types) {\r\n bvState.inlay_types = JSON.parse(decodeURIComponent(bvState.inlay_types))\r\n }\r\n if (bvState.bottom_module_system) {\r\n bvState.bottom_module_system = JSON.parse(decodeURIComponent(bvState.bottom_module_system))\r\n }\r\n console.log('restoring bvState from url...', bvState);\r\n return bvState\r\n }\r\n\r\n /**\r\n *\r\n * @param bvState {object}\r\n * @param useNames {boolean}\r\n * @returns bvState {object}\r\n */\r\n addSpecificPropertiesToLocalStorage(bvState, useNames = false) {\r\n const cabinetParent = this.parts[Cabinet.id];\r\n const countertopGroupParent = this.parts[CountertopGroup.id];\r\n const wallsParent = this.parts[Walls.id];\r\n\r\n bvState.layout_type = this.type;\r\n Object.keys(bvState).forEach((bvStateKey) => {\r\n // console.log('bvStateKey', bvStateKey);\r\n switch(bvStateKey) {\r\n case \"top_cabinet\":\r\n // bvState[\"top_cabinet_parts\"] = encodeURIComponent(JSON.stringify(cabinetParent.topCabinet.activeFeatureParts\r\n // .filter(activeFeaturePart => activeFeaturePart)\r\n // .map(activeFeaturePart => {\r\n // return useNames ? activeFeaturePart.partName : activeFeaturePart.dbFeature.id\r\n // })));\r\n if (!cabinetParent.topCabinet || !cabinetParent.topCabinet.activeFeatureParts) {\r\n break;\r\n }\r\n bvState[\"top_cabinet_parts\"] = cabinetParent.topCabinet.activeFeatureParts\r\n .filter(activeFeaturePart => activeFeaturePart)\r\n .map(activeFeaturePart => {\r\n return useNames ? activeFeaturePart.partName : activeFeaturePart.dbFeature.id\r\n });\r\n if (cabinetParent.topCabinet.features.some(feature => feature.metaData[\"Module\"])) { // disabled for now, but in case they are needed - change this condition!\r\n bvState[\"top_module_system\"] = encodeURIComponent(JSON.stringify(cabinetParent.topCabinet.moduleSystem));\r\n bvState[\"inlay_types\"] = encodeURIComponent(JSON.stringify(cabinetParent.topCabinet.inlayTypes));\r\n }\r\n break;\r\n case \"bottom_cabinet\":\r\n if (!cabinetParent.bottomCabinet || !cabinetParent.bottomCabinet.activeFeatureParts) {\r\n break;\r\n }\r\n // bvState[\"bottom_cabinet_parts\"] = encodeURIComponent(JSON.stringify(cabinetParent.bottomCabinet.activeFeatureParts\r\n // .filter(activeFeaturePart => activeFeaturePart)\r\n // .map(activeFeaturePart => {\r\n // return useNames ? activeFeaturePart.partName : activeFeaturePart.dbFeature.id\r\n // })));\r\n bvState[\"bottom_cabinet_parts\"] = cabinetParent.bottomCabinet.activeFeatureParts\r\n .filter(activeFeaturePart => activeFeaturePart)\r\n .map(activeFeaturePart => {\r\n return useNames ? activeFeaturePart.partName : activeFeaturePart.dbFeature.id\r\n });\r\n if (cabinetParent.bottomCabinet.features.some(feature => feature.metaData[\"Module\"])) {\r\n bvState[\"bottom_module_system\"] = encodeURIComponent(JSON.stringify(cabinetParent.bottomCabinet.moduleSystem));\r\n }\r\n break;\r\n case \"crown_molding\":\r\n if (!cabinetParent.crownMolding || !cabinetParent.crownMolding.activeFeatureParts) {\r\n break;\r\n }\r\n bvState[\"crown_molding_parts\"] = cabinetParent.crownMolding.activeFeatureParts\r\n .filter(activeFeaturePart => activeFeaturePart)\r\n .map(activeFeaturePart => {\r\n return useNames ? activeFeaturePart.partName : activeFeaturePart.dbFeature.id\r\n });\r\n break;\r\n case \"countertop\":\r\n if (!countertopGroupParent.countertop || !countertopGroupParent.countertop.activeFeatureParts) {\r\n break;\r\n }\r\n bvState[\"countertop_parts\"] = countertopGroupParent.countertop.activeFeatureParts\r\n .filter(activeFeaturePart => activeFeaturePart)\r\n .map(activeFeaturePart => {\r\n return useNames ? activeFeaturePart.partName : activeFeaturePart.dbFeature.id\r\n });\r\n break;\r\n case \"backsplash\":\r\n if (!wallsParent.backsplash) {\r\n break;\r\n }\r\n bvState[\"backsplash_type\"] = wallsParent.backsplash.getCurrentActiveFeatureType();\r\n break;\r\n default:\r\n break;\r\n }\r\n });\r\n // console.log('bvState', bvState);\r\n return bvState\r\n }\r\n\r\n addNonVisualizerSubPart(featureGroupName){\r\n const otherParent = this.parts[Other.id];\r\n const partId = snakeCase(featureGroupName);\r\n let relatedItem = otherParent.relatedItems.find(relatedItem => relatedItem.partId === partId);\r\n if (!relatedItem) {\r\n relatedItem = new NonVisualizerSubPart(true, partId, featureGroupName);\r\n relatedItem.getParent = () => otherParent;\r\n otherParent.relatedItems.push(relatedItem);\r\n }\r\n return new DesignNavigationItem(relatedItem.partName, relatedItem)\r\n }\r\n\r\n get qtCategories() {\r\n\r\n if (!(Array.isArray(this.qtCategoriesList) && this.qtCategoriesList.length)) {\r\n return this.qtCategoriesList\r\n }\r\n\r\n // if (document.kvConfig.visualizerType === \"Kitchen\" || document.kvConfig.visualizerType === \"KV\") { // no need\r\n const currentLayoutAbbreviation = this.getCurrentLayoutAbbreviation();\r\n if (!currentLayoutAbbreviation.includes(\"I\")) {\r\n const countertopParent = this.parts[CountertopGroup.id];\r\n const countertopSubParts = countertopParent && countertopParent.subParts();\r\n return this.qtCategoriesList.map(qtCategory => {\r\n let qtCategoryHasBeenChanged = false;\r\n const changedSubParts = qtCategory._subParts\r\n .map(subPart => {\r\n if (countertopSubParts) {\r\n switch (subPart.part.partId) {\r\n case \"center_island_countertop\":\r\n qtCategoryHasBeenChanged = true;\r\n return this.getChangedSubPart(countertopSubParts, subPart, \"countertop\");\r\n case \"center_island_sink\":\r\n qtCategoryHasBeenChanged = true;\r\n return this.getChangedSubPart(countertopSubParts, subPart, \"sink\");\r\n case \"center_island_faucet\":\r\n qtCategoryHasBeenChanged = true;\r\n return this.getChangedSubPart(countertopSubParts, subPart, \"faucet\");\r\n case \"center_island_edge\":\r\n qtCategoryHasBeenChanged = true;\r\n return this.getChangedSubPart(countertopSubParts, subPart, \"edge_profile\");\r\n case \"center_island_stovetop\":\r\n qtCategoryHasBeenChanged = true;\r\n return this.getChangedSubPart(countertopSubParts, subPart, \"stovetop\");\r\n default:\r\n return subPart\r\n }\r\n }\r\n return subPart\r\n })\r\n .filter((subPart) => {\r\n return subPart && this.designNavigationItems(subPart, {}, \"\", false, true).length\r\n });\r\n if (qtCategoryHasBeenChanged) {\r\n qtCategory.subParts = changedSubParts;\r\n qtCategory.qtCategoryHasBeenChanged = true;\r\n }\r\n return qtCategory\r\n });\r\n }\r\n return this.qtCategoriesList.map((qtCategory) => {\r\n if (qtCategory.qtCategoryHasBeenChanged) {\r\n qtCategory.subParts = [...qtCategory.defaultSubParts];\r\n qtCategory.qtCategoryHasBeenChanged = false;\r\n }\r\n return qtCategory\r\n })\r\n }\r\n\r\n getChangedSubPart(allSubParts, currentSubPart, partId) {\r\n const newSubPart = allSubParts.find(cPart => cPart.part.partId === partId);\r\n if (!newSubPart) {\r\n return currentSubPart\r\n }\r\n // newSubPart.part.customGroupDisplayName = newSubPart.part.customGroupDisplayName || currentSubPart.part.customGroupDisplayName;\r\n return newSubPart\r\n }\r\n\r\n excludedIndexesFromHover = (layoutType) => {\r\n return [\r\n this.zIndexes[layoutType].Globals.Baseboard, // exclude Globals\r\n this.zIndexes[layoutType].Globals.CeilingHighlights, // exclude Globals\r\n this.zIndexes[layoutType].Globals.CeilingLights, // exclude Globals\r\n this.zIndexes[layoutType].Globals.GlobalShadow, // exclude Globals\r\n this.zIndexes[layoutType].Globals.Decor1, // exclude Globals\r\n this.zIndexes[layoutType].Globals.Decor2, // exclude Globals\r\n this.zIndexes[layoutType].Globals.Decor3, // exclude Globals\r\n this.zIndexes[layoutType].Globals.Decor4, // exclude Globals\r\n this.zIndexes[layoutType].Cabinet.TopCabinetShadow, // exclude TopCabinetShadow\r\n this.zIndexes[layoutType].Cabinet.TopCabinetShadowPart2, // exclude TopCabinetShadow\r\n this.zIndexes[layoutType].Cabinet.BottomCabinetShadow, // exclude BottomCabinetShadow\r\n this.zIndexes[layoutType].CenterIsland.CenterIslandShadow, // exclude CenterIslandShadow\r\n this.zIndexes[layoutType].CenterIsland.ChairsShadow, // exclude CenterIslandShadow\r\n this.zIndexes[layoutType].Appliances.FridgeShadow, // exclude FridgeShadow\r\n this.zIndexes[layoutType].Cabinet.TopCabinetModuleBox, // exclude TopCabinetModuleBox\r\n this.zIndexes[layoutType].Cabinet.TopCabinetModuleBox2, // exclude TopCabinetModuleBox2\r\n this.zIndexes[layoutType].Cabinet.BottomCabinetModuleBox, // exclude BottomCabinetModuleBox\r\n this.zIndexes[layoutType].Cabinet.BottomCabinetModuleBox2, // exclude BottomCabinetModuleBox2\r\n ]\r\n }\r\n\r\n}\r\n","import uniqBy from \"lodash/uniqBy\";\r\n\r\nimport {IntermediatePart} from \"../intermediatePart\";\r\n\r\nexport default class NonVisualizerSubPart extends IntermediatePart {\r\n constructor(isChild, partId, partName) {\r\n super(isChild);\r\n this.partId = partId;\r\n this.visible = true;\r\n this.partName = partName;\r\n // this.allFeaturesReceived = true;\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new NonVisualizerSubPart(false, this.partId, dbFeature.groupName));\r\n }\r\n\r\n navigationSubItems(filters, searchText) {\r\n const navSubItems = super.navigationSubItems(filters, searchText)\r\n return uniqBy(navSubItems, (navItem) => navItem.part.dbFeature.sharedFeatureName);\r\n }\r\n}\r\n","import React, {Component} from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport {connect} from \"react-redux\";\r\nimport {FormattedMessage} from \"react-intl\";\r\n\r\nimport Z from \"../core/zIndex\";\r\nimport {reorder} from \"../../../misc/utils\";\r\nimport Analytics from \"../../../analytics\";\r\nimport {getCurrentLayout} from \"../../appLayout\";\r\n\r\nimport {BACKSPLASH_TYPES} from \"../core/constants\";\r\n\r\nclass ContextMenuSimple extends Component {\r\n\r\n static propTypes = {\r\n contextMenuOpen: PropTypes.string.isRequired,\r\n hoveredLayer: PropTypes.object,\r\n handleContextMenuClick: PropTypes.func,\r\n contextMenuPosition: PropTypes.object,\r\n contextMenuPonyWall: PropTypes.bool,\r\n renderGreenLayerByZindex: PropTypes.func,\r\n closeContextMenu: PropTypes.func,\r\n };\r\n\r\n state = {\r\n contextMenuButtons: []\r\n };\r\n\r\n componentDidMount() {\r\n this.setContextMenuButtons();\r\n if (this.props.closeContextMenu) {\r\n document.addEventListener('click', this.contextMenuBlur)\r\n }\r\n }\r\n\r\n contextMenuBlur = (e) => {\r\n if (!e.target.closest('.contextmenu-buttons')\r\n && !e.target.closest('.contextmenu-buttons__button')\r\n && !e.target.closest('.sprocket-container') && !e.target.closest('.canvas')) {\r\n this.props.closeContextMenu();\r\n }\r\n };\r\n\r\n componentWillUnmount() {\r\n if (this.props.closeContextMenu) {\r\n document.removeEventListener('click', this.contextMenuBlur)\r\n }\r\n }\r\n\r\n setContextMenuButtons() {\r\n const layout = getCurrentLayout();\r\n const contextMenuOpen = this.props.contextMenuOpen;\r\n if (contextMenuOpen === \"backsplash_custom\"\r\n || contextMenuOpen === \"backsplash_custom_left\"\r\n || contextMenuOpen === \"backsplash_custom_right\"\r\n || contextMenuOpen === \"right_wall_custom\"\r\n || contextMenuOpen === \"left_wall_custom\") {\r\n this.setBacksplashButtons();\r\n return\r\n }\r\n\r\n const hoveredParent = layout.designNavigationItems().find(navItem => {\r\n return navItem.text === contextMenuOpen\r\n });\r\n\r\n let relatedItems = hoveredParent.part.relatedItems;\r\n\r\n const clickedItem = relatedItems.find((item) => {\r\n let zIndexToFind = this.props.hoveredLayer.zIndex;\r\n const currentLayoutName = layout.getCurrentLayoutName();\r\n if (zIndexToFind === Z.layouts[currentLayoutName].CountertopGroup.Countertop2) {\r\n return item.partId === \"countertop\"\r\n }\r\n return item.activeFeature && item.activeFeature.layer.zIndex === zIndexToFind\r\n });\r\n\r\n let itemsToRender = this.getItemsToRender(hoveredParent);\r\n\r\n // console.log('clickedItem', clickedItem);\r\n // console.log('relatedItems', relatedItems);\r\n // console.log('itemsToRender', itemsToRender);\r\n\r\n const clickedItemIndex = itemsToRender.findIndex(item => item.text === clickedItem.partName);\r\n if (clickedItemIndex > 0) {\r\n itemsToRender = reorder(itemsToRender, clickedItemIndex, 0); // swap items in array start\r\n }\r\n\r\n itemsToRender = itemsToRender.map(item => {\r\n if (item.text === \"Island Countertop\") {\r\n // item.subMenuText = \"Countertop\";\r\n item.bgImageText = \"Countertop\";\r\n }\r\n return item\r\n });\r\n\r\n this.setState({\r\n contextMenuButtons: itemsToRender\r\n })\r\n }\r\n\r\n getItemsToRender = (hoveredParent) => {\r\n let itemsToRender = hoveredParent.part.subParts();\r\n let availablePartIds = [];\r\n switch (this.props.contextMenuOpen) {\r\n case \"Center Island\":\r\n availablePartIds = [\"center_island_sink\", \"center_island_faucet\", \"center_island_countertop\",\r\n \"center_island_stovetop\", \"center_island_range\", \"center_island_edge\"];\r\n break;\r\n case \"Countertop\":\r\n availablePartIds = [\"countertop\", \"faucet\", \"sink\", \"edge_profile\"];\r\n break;\r\n case \"Walls\":\r\n availablePartIds = [\"right_wall\", \"backsplash\"];\r\n break;\r\n default:\r\n break;\r\n }\r\n return itemsToRender.filter(menuButton => availablePartIds.includes(menuButton.part.partId));\r\n };\r\n\r\n getBackSplashButtons = () => {\r\n return BACKSPLASH_TYPES.map(bType => {\r\n const button = {\r\n text: bType,\r\n };\r\n switch (bType) {\r\n case \"4in\":\r\n button.subMenuText = \"visualizer.kitchen.contextmenu.backsplash.4in\"\r\n break;\r\n case \"6in\":\r\n button.subMenuText = \"visualizer.kitchen.contextmenu.backsplash.6in\"\r\n break;\r\n case \"18in\":\r\n button.subMenuText = \"visualizer.kitchen.contextmenu.backsplash.18in\"\r\n break;\r\n }\r\n return button\r\n })\r\n };\r\n\r\n setBacksplashButtons = () => {\r\n const layout = getCurrentLayout();\r\n const hoveredParent = layout.designNavigationItems().find(navItem => {\r\n return navItem.text === \"Walls\"\r\n });\r\n const subParts = hoveredParent.part.subParts();\r\n\r\n let contextMenuButtons = [];\r\n const backSplashButtons = this.getBackSplashButtons();\r\n const rightWall = subParts.find(menuButton => menuButton.part.partId === \"right_wall\");\r\n const leftWall = subParts.find(menuButton => menuButton.part.partId === \"left_wall\");\r\n if (rightWall) {\r\n rightWall.subMenuParent = \"Walls\";\r\n }\r\n if (leftWall) {\r\n leftWall.subMenuParent = \"Walls\";\r\n }\r\n switch (this.props.contextMenuOpen) {\r\n case \"right_wall_custom\": {\r\n contextMenuButtons = rightWall ? [rightWall, ...backSplashButtons] : backSplashButtons;\r\n break;\r\n }\r\n case \"left_wall_custom\": {\r\n contextMenuButtons = leftWall ? [leftWall, ...backSplashButtons] : backSplashButtons;\r\n break;\r\n }\r\n case \"backsplash_custom_left\": {\r\n contextMenuButtons = [...backSplashButtons, leftWall];\r\n break;\r\n }\r\n case \"backsplash_custom_right\": {\r\n contextMenuButtons = [...backSplashButtons, rightWall];\r\n break;\r\n }\r\n case \"backsplash_custom\": {\r\n contextMenuButtons = backSplashButtons; // just in case, we should not have these cases\r\n break;\r\n }\r\n }\r\n this.setState({\r\n contextMenuButtons\r\n })\r\n };\r\n\r\n handleContextMenuHover = () => {\r\n //TODO[Artem] add here rendering green zones on hover\r\n };\r\n\r\n render() {\r\n\r\n let contextMenuStyles = this.props.contextMenuPosition || {};\r\n if (this.state.contextMenuButtons.length <= 4) {\r\n contextMenuStyles = Object.assign({}, contextMenuStyles, {maxWidth:\"210px\"} )\r\n }\r\n\r\n return (\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = () => {\r\n return {};\r\n};\r\n\r\nconst mapDispatchToProps = {};\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(ContextMenuSimple)\r\n","import React, {Component} from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport {connect} from 'react-redux';\r\n\r\nimport Analytics from \"../../../analytics\";\r\nimport {getModuleCombinations} from \"../core/subparts/cabinet/cabinetModuleSystem\";\r\nimport {MODULE_CONTEXT_MENU_TYPES, MODULE_CONTEXT_MENU_DIRECTIONS, CABINET_WIZARD_BUTTONS} from \"../core/constants\";\r\nimport Cabinet from \"../core/parts/cabinet\";\r\nimport {\r\n setModuleContextMenuType,\r\n setModuleContextMenuDirection,\r\n setModuleContextMenuModule,\r\n setModuleContextMenuModulePart,\r\n setActiveNavigationFilter, setActiveNavigationFilterStepIndex\r\n} from \"../../../actions/navigationFunctions\";\r\n\r\nimport {getCurrentLayout} from \"../../appLayout\";\r\n\r\nclass CabinetContextMenu extends Component {\r\n\r\n static propTypes = {\r\n updateCanvas: PropTypes.func,\r\n contextMenuOpen: PropTypes.object,\r\n hoveredLayer: PropTypes.object,\r\n handleContextMenuClick: PropTypes.func,\r\n contextMenuPosition: PropTypes.object,\r\n closeContextMenu: PropTypes.func,\r\n };\r\n\r\n state = {\r\n contextMenuButtons: [],\r\n };\r\n\r\n componentDidMount() {\r\n if (this.props.closeContextMenu) {\r\n document.addEventListener('click', this.contextMenuBlur)\r\n }\r\n const moduleSplitted = this.props.contextMenuOpen.module.split(\"_\"); // example: \"4_4\"\r\n this.props.setModuleContextMenuModule(moduleSplitted[0]);\r\n this.props.setModuleContextMenuModulePart(moduleSplitted[1]);\r\n }\r\n\r\n contextMenuBlur = (e) => {\r\n if (!e.target.closest('.contextmenu-buttons')\r\n && !e.target.closest('.contextmenu-buttons__button')\r\n && !e.target.closest('.contextmenu-slice')\r\n && !e.target.closest('.canvas')) {\r\n this.props.closeContextMenu();\r\n }\r\n };\r\n\r\n componentWillUnmount() {\r\n if (this.props.closeContextMenu) {\r\n document.removeEventListener('click', this.contextMenuBlur)\r\n }\r\n }\r\n\r\n resetModule = () => {\r\n const layout = getCurrentLayout();\r\n const cabinetParent = layout.parts[Cabinet.id];\r\n if (this.props.contextMenuOpen.contextMenuPartId === \"top_cabinet\") {\r\n const moduleSplitted = this.props.contextMenuOpen.module.split(\"_\"); // example: \"4_4\"\r\n const arrayNumber = +moduleSplitted[0] - 1;\r\n cabinetParent.topCabinet.moduleSystem[arrayNumber] = (arrayNumber === 0 || arrayNumber === 5)\r\n ? [\"36_18_19\"] // copy array since it might be overwritten\r\n : [\"36_36_1\"];\r\n cabinetParent.topCabinet.activeFeatureParts = cabinetParent.topCabinet.setActiveFeatureParts();\r\n this.props.updateCanvas();\r\n } else if (this.props.contextMenuOpen.contextMenuPartId === \"bottom_cabinet\") {\r\n const moduleSplitted = this.props.contextMenuOpen.module.split(\"_\"); // example: \"4_4\"\r\n const arrayNumber = +moduleSplitted[0] - 1;\r\n cabinetParent.bottomCabinet.moduleSystem[arrayNumber] = [\"36_36_1\"];\r\n cabinetParent.bottomCabinet.activeFeatureParts = cabinetParent.bottomCabinet.setActiveFeatureParts();\r\n this.props.updateCanvas();\r\n }\r\n this.props.closeContextMenu();\r\n };\r\n\r\n setCabinetModule = (buttonId) => {\r\n const layout = getCurrentLayout();\r\n console.log(\"buttonId\", buttonId);\r\n console.log(\"this.props.contextMenuOpen\", this.props.contextMenuOpen);\r\n const moduleParts = buttonId.split(\"-\"); // example: \"12_36_4-12_36_57-12_36_58\" // width-height-id\r\n const cabinetParent = layout.parts[Cabinet.id];\r\n let subPartName = \"\";\r\n if (this.props.contextMenuOpen.contextMenuPartId === \"top_cabinet\") {\r\n subPartName = \"topCabinet\";\r\n } else if (this.props.contextMenuOpen.contextMenuPartId === \"bottom_cabinet\") {\r\n subPartName = \"bottomCabinet\";\r\n }\r\n if (this.props.contextMenuOpen.contextMenuPartId === \"top_cabinet\"\r\n || this.props.contextMenuOpen.contextMenuPartId === \"bottom_cabinet\") {\r\n const moduleSplitted = this.props.contextMenuOpen.module.split(\"_\"); // example: \"4_4\"\r\n cabinetParent[subPartName].inlayTypes.forEach(inlayTypeObj => {\r\n const existingMJoinedIndex = inlayTypeObj.moduleParts.findIndex(mJoined => {\r\n return mJoined === this.props.contextMenuOpen.module\r\n });\r\n if (existingMJoinedIndex > -1) { // it is not a default! push new spliced\r\n // inlayTypeObj.moduleParts.splice(existingMJoinedIndex, 1);\r\n moduleParts.forEach((modulePart) => {\r\n inlayTypeObj.moduleParts.push(moduleSplitted[0] + \"_\" + modulePart.split(\"_\")[2]);\r\n });\r\n }\r\n });\r\n const moduleSystemPart = cabinetParent[subPartName].moduleSystem[+moduleSplitted[0] - 1];\r\n // 1) remove old\r\n const oldIndex = moduleSystemPart.findIndex(modulePart => {\r\n // example: \"12_36_4-12_36_57-12_36_58\" // width-height-id\r\n return modulePart.split(\"_\")[2] === this.props.moduleContextMenuModulePart\r\n });\r\n moduleSystemPart.splice(oldIndex,1);\r\n // 2) add new ones\r\n moduleParts.forEach((modulePart) => {\r\n moduleSystemPart.push(modulePart);\r\n });\r\n cabinetParent[subPartName].activeFeatureParts = cabinetParent[subPartName].setActiveFeatureParts();\r\n this.props.updateCanvas();\r\n layout.updateLocalStorage();\r\n }\r\n\r\n };\r\n\r\n getSliceButtons = () => {\r\n const availableSplitButtons = getModuleCombinations(this.props.moduleContextMenuModulePart, this.props.moduleContextMenuDirection);\r\n return availableSplitButtons.map(buttonId => {\r\n return {\r\n text: \"\",\r\n buttonId,\r\n onClick: () => {\r\n this.setCabinetModule(buttonId);\r\n this.props.closeContextMenu();\r\n }\r\n }\r\n })\r\n };\r\n getResetButton = () => {\r\n return {\r\n text: \"Reset Module\",\r\n buttonId: \"reset\",\r\n onClick: this.resetModule\r\n }\r\n };\r\n getExitButton = () => {\r\n return {\r\n text: \"Exit config\",\r\n buttonId: \"exit_config\",\r\n onClick: () => this.props.setModuleContextMenuType(MODULE_CONTEXT_MENU_TYPES.Filters)\r\n }\r\n };\r\n openNavigationMenu = (e) => {\r\n const layout = getCurrentLayout();\r\n const cabinetParent = layout.parts[Cabinet.id];\r\n const subParts = cabinetParent.subParts();\r\n const subPart = subParts.find(menuItem => menuItem.part.partId === this.props.contextMenuOpen.contextMenuPartId);\r\n this.props.handleContextMenuClick(subPart); // top cabinet\r\n this.props.setActiveNavigationFilter(e.target.dataset.id);\r\n this.props.setActiveNavigationFilterStepIndex(e.target.dataset.index);\r\n this.props.closeContextMenu();\r\n };\r\n getCabinetConfigurationButtons = () => {\r\n const cabinetConfigurationButtons = CABINET_WIZARD_BUTTONS\r\n .filter(wizardButton => wizardButton.buttonId !== CABINET_WIZARD_BUTTONS[0].buttonId)\r\n .map((wizardButton) => {\r\n wizardButton.onClick = this.openNavigationMenu;\r\n return wizardButton\r\n });\r\n const availableModuleCombinations = getModuleCombinations(this.props.moduleContextMenuModulePart);\r\n if (availableModuleCombinations && availableModuleCombinations.length) {\r\n cabinetConfigurationButtons.push({\r\n text: \"Door config\",\r\n buttonId: \"door_config\",\r\n onClick: () => this.props.setModuleContextMenuType(MODULE_CONTEXT_MENU_TYPES.SliceButtons)\r\n })\r\n }\r\n return cabinetConfigurationButtons\r\n };\r\n getContextMenuButtons = () => {\r\n switch (this.props.moduleContextMenuType) {\r\n case MODULE_CONTEXT_MENU_TYPES.Filters:\r\n return (this.props.moduleContextMenuModulePart === \"1\") //remove reset button if there is nowhere to split\r\n ? this.getCabinetConfigurationButtons()\r\n : [...this.getCabinetConfigurationButtons(), this.getResetButton()];\r\n case MODULE_CONTEXT_MENU_TYPES.SliceButtons:\r\n default: {\r\n const sliceButtons = this.getSliceButtons();\r\n return sliceButtons.length\r\n ? [...sliceButtons, this.getExitButton(), this.getResetButton()]\r\n : [...this.getCabinetConfigurationButtons(), this.getResetButton()]\r\n }\r\n }\r\n };\r\n\r\n render() {\r\n\r\n let contextMenuStyles = (this.props.windowWidth > 991 && this.props.contextMenuPosition)\r\n ? this.props.contextMenuPosition\r\n : {};\r\n if (this.state.contextMenuButtons.length === 4) {\r\n contextMenuStyles = Object.assign({}, contextMenuStyles, {maxWidth:\"210px\"} )\r\n }\r\n const availableHorizontalAndVertical = [\"1\", \"2\", \"3\", \"9\", \"10\"]; // show buttons for available splits\r\n const firstSliceIsActve = (this.props.moduleContextMenuType === MODULE_CONTEXT_MENU_TYPES.SliceButtons)\r\n && availableHorizontalAndVertical.includes(this.props.moduleContextMenuModulePart);\r\n\r\n return (\r\n \r\n {this.state.contextMenuButtons.map((menuItem) => {\r\n if (!menuItem) {\r\n return null\r\n }\r\n return (\r\n \r\n )\r\n })}\r\n
\r\n \r\n {firstSliceIsActve ? (\r\n
\r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = (store) => ({\r\n moduleContextMenuType: store.navigationState.moduleContextMenuType,\r\n moduleContextMenuDirection: store.navigationState.moduleContextMenuDirection,\r\n moduleContextMenuModulePart: store.navigationState.moduleContextMenuModulePart,\r\n windowWidth: store.serverState.windowWidth,\r\n});\r\n\r\nconst mapDispatchToProps = {\r\n setModuleContextMenuType,\r\n setModuleContextMenuDirection,\r\n setModuleContextMenuModule,\r\n setModuleContextMenuModulePart,\r\n setActiveNavigationFilter,\r\n setActiveNavigationFilterStepIndex\r\n};\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(CabinetContextMenu);\r\n","import snakeCase from 'lodash/snakeCase';\r\nimport invert from 'lodash/invert';\r\n\r\nimport LayoutCommonNew from \"../../visComponents/layoutCommonNew\";\r\n\r\nimport Globals from \"./parts/globals\";\r\n\r\nimport {LayoutType, LayoutAbbreviation} from \"./constants\";\r\nimport zIndexes from \"./zIndex\";\r\nimport Other from \"./parts/other\";\r\nimport NonVisualizerSubPart from \"./subparts/nonVisualizerSubPart\";\r\nimport DesignNavigationItem from \"../../visComponents/designNavigationItem\";\r\nimport Background from \"./parts/background\";\r\nimport Appliance from \"./parts/appliance\";\r\nimport CountertopGroup from \"./parts/countertopGroup\";\r\nimport Cabinet from \"./parts/cabinet\";\r\nimport Floor from \"./parts/floor\";\r\nimport Walls from \"./parts/walls\";\r\nimport CenterIsland from \"./parts/centerIsland\";\r\nimport {AVAILABLE_VISUALIZER_TYPES} from \"../../../config\";\r\n\r\nexport class Layout extends LayoutCommonNew {\r\n\r\n /**\r\n * @type {int}\r\n */\r\n defaultType = LayoutType.Layout1;\r\n type = this.defaultType;\r\n scene = \"1\";\r\n visualizerType = AVAILABLE_VISUALIZER_TYPES.kvScene;\r\n localStorageKey = \"kvSceneState\";\r\n layersBinding = \"KitchenV5\";\r\n layoutNames = LayoutAbbreviation;\r\n layoutTypes = LayoutType;\r\n zIndexes = zIndexes.layouts;\r\n excludedPartIdsFromHover = [\"decor_\", \"background_bg\", \"walls_ceiling\", \"attachment\"];\r\n\r\n constructor(props) {\r\n super(props);\r\n this.parts[Background.id] = new Background();\r\n this.parts[CenterIsland.id] = new CenterIsland();\r\n this.parts[CountertopGroup.id] = new CountertopGroup();\r\n this.parts[Appliance.id] = new Appliance();\r\n this.parts[Cabinet.id] = new Cabinet();\r\n this.parts[Walls.id] = new Walls();\r\n this.parts[Floor.id] = new Floor();\r\n this.parts[Globals.id] = new Globals();\r\n this.parts[Other.id] = new Other();\r\n Object.values(this.parts).forEach(part => part.layout = this);\r\n }\r\n\r\n getCurrentLayoutName(type = this.type) {\r\n return invert(LayoutType)[type];\r\n }\r\n\r\n getCurrentLayoutAbbreviation() {\r\n return LayoutAbbreviation[this.getCurrentLayoutName()]\r\n }\r\n\r\n addNonVisualizerSubPart(featureGroupName){\r\n const otherParent = this.parts[Other.id];\r\n const partId = snakeCase(featureGroupName);\r\n let relatedItem = otherParent.relatedItems.find(relatedItem => relatedItem.partId === partId);\r\n if (!relatedItem) {\r\n relatedItem = new NonVisualizerSubPart(true, partId, featureGroupName);\r\n relatedItem.getParent = () => otherParent;\r\n otherParent.relatedItems.push(relatedItem);\r\n }\r\n return new DesignNavigationItem(relatedItem.partName, relatedItem)\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../intermediatePart\";\r\n\r\nexport default class NonVisualizerSubPart extends IntermediatePart {\r\n constructor(isChild, partId, partName) {\r\n super(isChild);\r\n this.partId = partId;\r\n this.visible = true;\r\n this.partName = partName;\r\n // this.allFeaturesReceived = true;\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new NonVisualizerSubPart(false, this.partId, dbFeature.groupName));\r\n }\r\n\r\n navigationSubItems(filters, searchText) {\r\n return this.navigationNoMetaSubItems(filters, searchText)\r\n }\r\n}\r\n","import React, {Component} from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport {connect} from \"react-redux\";\r\nimport {FormattedMessage, injectIntl} from \"react-intl\";\r\n\r\nimport {reorder} from \"../../../misc/utils\";\r\nimport Analytics from \"../../../analytics\";\r\nimport {getCurrentLayout} from \"../../appLayout\";\r\nimport {BACKSPLASH_TYPES} from \"../../kvComponent/core/constants\";\r\nimport CenterIsland from \"../core/parts/centerIsland\";\r\nimport {getFeatureGroupName} from \"../../../misc/helpers\";\r\n\r\nclass ContextMenuSimple extends Component {\r\n\r\n static propTypes = {\r\n contextMenuOpen: PropTypes.string.isRequired,\r\n hoveredLayer: PropTypes.object,\r\n handleContextMenuClick: PropTypes.func,\r\n contextMenuPosition: PropTypes.object,\r\n contextMenuPonyWall: PropTypes.bool,\r\n renderGreenLayerByZindex: PropTypes.func,\r\n closeContextMenu: PropTypes.func,\r\n };\r\n\r\n state = {\r\n contextMenuButtons: []\r\n };\r\n\r\n componentDidMount() {\r\n this.setContextMenuButtons();\r\n if (this.props.closeContextMenu) {\r\n document.addEventListener('click', this.contextMenuBlur)\r\n }\r\n }\r\n\r\n contextMenuBlur = (e) => {\r\n if (!e.target.closest('.contextmenu-buttons')\r\n && !e.target.closest('.contextmenu-buttons__button')\r\n && !e.target.closest('.sprocket-container') && !e.target.closest('.canvas')) {\r\n this.props.closeContextMenu();\r\n }\r\n };\r\n\r\n componentWillUnmount() {\r\n if (this.props.closeContextMenu) {\r\n document.removeEventListener('click', this.contextMenuBlur)\r\n }\r\n }\r\n\r\n setContextMenuButtons() {\r\n const layout = getCurrentLayout();\r\n const contextMenuOpen = this.props.contextMenuOpen;\r\n if (contextMenuOpen === \"backsplash_custom\"\r\n || contextMenuOpen === \"backsplash_custom_left\"\r\n || contextMenuOpen === \"backsplash_custom_right\"\r\n || contextMenuOpen === \"right_wall_custom\"\r\n || contextMenuOpen === \"left_wall_custom\") {\r\n this.setBacksplashButtons();\r\n return\r\n }\r\n\r\n const hoveredParent = layout.designNavigationItems().find(navItem => {\r\n return navItem.text === contextMenuOpen\r\n });\r\n\r\n let relatedItems = hoveredParent.part.relatedItems;\r\n\r\n const clickedItem = relatedItems.find((item) => {\r\n return item.activeFeature && (item.partId === this.props.hoveredLayer.partId)\r\n });\r\n\r\n let itemsToRender = this.getItemsToRender(hoveredParent);\r\n\r\n // console.log('clickedItem', clickedItem);\r\n // console.log('relatedItems', relatedItems);\r\n // console.log('itemsToRender', itemsToRender);\r\n\r\n const clickedItemIndex = itemsToRender.findIndex(item => item.text === clickedItem.partName);\r\n if (clickedItemIndex > 0) {\r\n itemsToRender = reorder(itemsToRender, clickedItemIndex, 0); // swap items in array start\r\n }\r\n\r\n itemsToRender = itemsToRender.map(item => {\r\n if (item.text === CenterIsland.id) {\r\n // item.subMenuText = \"Countertop\";\r\n item.bgImageText = \"Countertop\";\r\n }\r\n return item\r\n });\r\n\r\n this.setState({\r\n contextMenuButtons: itemsToRender\r\n })\r\n }\r\n\r\n getItemsToRender = (hoveredParent) => {\r\n let itemsToRender = hoveredParent.part.subParts();\r\n let availablePartIds = [];\r\n switch (this.props.contextMenuOpen) {\r\n case CenterIsland.id:\r\n availablePartIds = [\"center_island_sink\", \"center_island_faucet\", \"center_island_countertop\",\r\n \"center_island_stovetop\", \"center_island_range\", \"center_island_edge\"];\r\n break;\r\n case \"Countertop\":\r\n availablePartIds = [\"countertop\", \"faucet\", \"sink\", \"edge_profile\"];\r\n break;\r\n case \"Walls\":\r\n availablePartIds = [\"right_wall\", \"backsplash\"];\r\n break;\r\n default:\r\n break;\r\n }\r\n return itemsToRender.filter(menuButton => {\r\n if ((document.kvConfig.visualizerType === \"kvScene\") && (menuButton.part.partId === \"center_island_edge\")) {\r\n const layout = getCurrentLayout();\r\n if (layout.type === 3) {\r\n return false\r\n }\r\n }\r\n if ((document.kvConfig.visualizerType === \"kvScene\") && (menuButton.part.partId === \"center_island_stovetop\")) {\r\n const layout = getCurrentLayout();\r\n if (layout.type === 6) {\r\n return false\r\n }\r\n }\r\n // return availablePartIds.includes(menuButton.part.partId) && hoveredParent.part.layout.hasNavItemsLength(menuButton)\r\n return availablePartIds.includes(menuButton.part.partId)\r\n });\r\n };\r\n\r\n getBackSplashButtons = () => {\r\n return BACKSPLASH_TYPES.map(bType => {\r\n const button = {\r\n text: bType,\r\n };\r\n switch (bType) {\r\n case \"4in\":\r\n button.subMenuText = \"visualizer.kitchen.contextmenu.backsplash.4in\"\r\n break;\r\n case \"6in\":\r\n button.subMenuText = \"visualizer.kitchen.contextmenu.backsplash.6in\"\r\n break;\r\n case \"Full\":\r\n button.subMenuText = \"visualizer.kitchen.contextmenu.backsplash.18in\"\r\n break;\r\n }\r\n return button\r\n })\r\n };\r\n\r\n setBacksplashButtons = () => {\r\n const layout = getCurrentLayout();\r\n const hoveredParent = layout.designNavigationItems().find(navItem => {\r\n return navItem.text === \"Walls\"\r\n });\r\n const subParts = hoveredParent.part.subParts();\r\n\r\n let contextMenuButtons = [];\r\n const backSplashButtons = this.getBackSplashButtons();\r\n const rightWall = subParts.find(menuButton => menuButton.part.partId === \"right_wall\");\r\n const leftWall = subParts.find(menuButton => menuButton.part.partId === \"left_wall\");\r\n if (rightWall) {\r\n rightWall.subMenuParent = \"Walls\";\r\n }\r\n if (leftWall) {\r\n leftWall.subMenuParent = \"Walls\";\r\n }\r\n switch (this.props.contextMenuOpen) {\r\n case \"right_wall_custom\": {\r\n contextMenuButtons = rightWall ? [rightWall, ...backSplashButtons] : backSplashButtons;\r\n break;\r\n }\r\n case \"left_wall_custom\": {\r\n contextMenuButtons = leftWall ? [leftWall, ...backSplashButtons] : backSplashButtons;\r\n break;\r\n }\r\n case \"backsplash_custom_left\": {\r\n contextMenuButtons = [...backSplashButtons, leftWall];\r\n break;\r\n }\r\n case \"backsplash_custom_right\": {\r\n contextMenuButtons = [...backSplashButtons, rightWall];\r\n break;\r\n }\r\n case \"backsplash_custom\": {\r\n contextMenuButtons = backSplashButtons; // just in case, we should not have these cases\r\n break;\r\n }\r\n }\r\n this.setState({\r\n contextMenuButtons\r\n })\r\n };\r\n\r\n handleContextMenuHover = () => {\r\n //TODO[Artem] add here rendering green zones on hover\r\n };\r\n\r\n render() {\r\n\r\n let contextMenuStyles = this.props.contextMenuPosition || {};\r\n if (this.state.contextMenuButtons.length <= 4) {\r\n contextMenuStyles = Object.assign({}, contextMenuStyles, {maxWidth:\"210px\"} )\r\n }\r\n\r\n const {intl, fabricatorData} = this.props;\r\n\r\n return (\r\n \r\n {Object.keys(MODULE_CONTEXT_MENU_DIRECTIONS).map((direction) => (\r\n \r\n ))}\r\n
\r\n ) : null}\r\n \r\n {this.getContextMenuButtons().map((contextButton, contextButtonIndex) => {\r\n return (\r\n \r\n )\r\n })}\r\n
\r\n \r\n
\r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = (store) => {\r\n return {\r\n fabricatorData: store.fabricatorState,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {};\r\n\r\nexport default injectIntl(\r\n connect(mapStateToProps, mapDispatchToProps)(ContextMenuSimple)\r\n)\r\n","import {IntermediatePart} from \"../intermediatePart\";\r\n\r\nexport default class NonVisualizerSubPart extends IntermediatePart {\r\n constructor(isChild, partId, partName) {\r\n super(isChild);\r\n this.partId = partId;\r\n this.visible = true;\r\n this.partName = partName;\r\n // this.allFeaturesReceived = true;\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new NonVisualizerSubPart(false, this.partId, dbFeature.groupName));\r\n }\r\n\r\n navigationSubItems(filters, searchText) {\r\n return this.navigationNoMetaSubItems(filters, searchText)\r\n }\r\n}\r\n","import {Part} from \"../part\";\r\nimport {wallsThumbnail} from \"../../../bvComponent/core/assets\";\r\nimport {PartMenuType} from \"../../../visComponents/constants\";\r\nimport DesignNavigationItem from \"../../../visComponents/designNavigationItem\";\r\n\r\nimport store from \"../../../../store\";\r\nimport LeftWall from \"../subparts/walls/leftWall\";\r\nimport RightWall from \"../subparts/walls/rightWall\";\r\nimport CenterWall from \"../subparts/walls/centerWall\";\r\nimport CeilingPanels from \"../subparts/walls/ceilingPanels\";\r\n\r\nexport default class Walls extends Part {\r\n static id = 'Walls';\r\n constructor() {\r\n super(true, false, PartMenuType.Complex);\r\n\r\n this.menuType = PartMenuType.Complex;\r\n this.partName = 'Walls';\r\n this.translateId = \"visualizer.bathroom.walls\";\r\n this.partThumbnail = wallsThumbnail;\r\n\r\n // related items\r\n this.leftWall = null;\r\n this.rightWall = null;\r\n this.centerWall = null;\r\n this.popoutWall = null;\r\n this.ceiling = null;\r\n this.ceilingPanels = null;\r\n\r\n this.allWallsApplied = true;\r\n }\r\n\r\n load(dbFeature) {\r\n let relatedItemName = \"\",\r\n RelatedItemClass = null;\r\n switch (dbFeature.groupName) {\r\n case \"Left Wall\":\r\n relatedItemName = \"leftWall\";\r\n RelatedItemClass = LeftWall;\r\n break;\r\n case \"Right Wall\":\r\n relatedItemName = \"rightWall\";\r\n RelatedItemClass = RightWall;\r\n break;\r\n case \"Center Wall\":\r\n relatedItemName = \"centerWall\";\r\n RelatedItemClass = CenterWall;\r\n break;\r\n case \"Ceiling Panels\":\r\n relatedItemName = \"ceilingPanels\";\r\n RelatedItemClass = CeilingPanels;\r\n break;\r\n }\r\n if (relatedItemName) {\r\n if (!this[relatedItemName]) {\r\n this[relatedItemName] = new RelatedItemClass(true);\r\n if (relatedItemName !== \"shadows\") {\r\n this.relatedItems.push(this[relatedItemName]);\r\n }\r\n }\r\n if (!this.categoryEnabled) {\r\n this.categoryEnabled = true\r\n }\r\n this[relatedItemName].getParent = () => this;\r\n this[relatedItemName].load(dbFeature);\r\n return true\r\n }\r\n return false\r\n }\r\n\r\n isSubTypeWithItems() {\r\n return false;\r\n }\r\n\r\n subParts(withHidden = true) {\r\n return this.relatedItems\r\n .filter(item => {\r\n if (item.partId === \"popout_wall\") {\r\n item.visible = item.getParent().layout.getCurrentLayoutAbbreviation().includes(\"P\")\r\n }\r\n return this.filterRelatedItem(item, withHidden)\r\n })\r\n .map(_ => new DesignNavigationItem(_.partName, _));\r\n }\r\n\r\n handleSubPartClick() {\r\n\r\n }\r\n\r\n recoverPrevioslySelected(activeRelatedPart) {\r\n const {activeQuoteIndex} = store.getState().quotesState;\r\n this.relatedItems.forEach(relatedItem => {\r\n if (relatedItem.partId !== activeRelatedPart.partId && relatedItem.activeFeatureBeforeAllWalls) {\r\n if (relatedItem.activeFeatureBeforeAllWalls === \"placeholder\") {\r\n relatedItem.placeholderChanged = false;\r\n relatedItem.firstClick[activeQuoteIndex] = false;\r\n } else if (!relatedItem.selectedByUser) {\r\n relatedItem.activeFeatureBeforeAllWalls.clickFromAllWalls();\r\n }\r\n }\r\n });\r\n }\r\n\r\n}\r\n","import React, {Component} from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport Z from \"../core/zIndex\";\r\nimport {ShowerTubCombo} from \"../core/parts/showerTubCombo\";\r\nimport {Vanity} from \"../core/parts/vanity\";\r\nimport {Shower} from \"../core/parts/shower\";\r\nimport Walls from \"../core/parts/walls\";\r\nimport {VanityTypes, ShowerComboTubType} from \"../core/constants\";\r\nimport {getMetadataByDimensions, reorder} from \"../../../misc/utils\";\r\nimport Analytics from \"../../../analytics\";\r\n\r\nimport {getCurrentLayout} from \"../../appLayout\";\r\nimport {ShowerAccessories} from \"../core/parts/showerAccessories\";\r\n\r\nexport default class ContextMenu extends Component {\r\n\r\n static propTypes = {\r\n designNavigationItems: PropTypes.array,\r\n contextMenuOpen: PropTypes.string,\r\n hoveredLayer: PropTypes.object,\r\n handleContextMenuClick: PropTypes.func,\r\n contextMenuPosition: PropTypes.object,\r\n contextMenuPonyWall: PropTypes.bool,\r\n renderGreenLayerByZindex: PropTypes.func,\r\n closeContextMenu: PropTypes.func,\r\n };\r\n\r\n state = {\r\n contextMenuButtons: []\r\n };\r\n\r\n componentDidMount() {\r\n this.setContextMenuButtons();\r\n if (this.props.closeContextMenu) {\r\n document.addEventListener('click', this.contextMenuBlur)\r\n }\r\n }\r\n\r\n contextMenuBlur = (e) => {\r\n if (!e.target.closest('.contextmenu-buttons')\r\n && !e.target.closest('.contextmenu-buttons__button')\r\n && !e.target.closest('.sprocket-container') && !e.target.closest('.canvas')) {\r\n this.props.closeContextMenu();\r\n }\r\n };\r\n\r\n componentWillUnmount() {\r\n if (this.props.closeContextMenu) {\r\n document.removeEventListener('click', this.contextMenuBlur)\r\n }\r\n }\r\n\r\n getShowerBodySelectionButtons = () => {\r\n const shower = this.state.designNavigationItems.find(desItem => desItem.text === \"Shower\");\r\n const currentShowerSize = shower.part.showerSize();\r\n const showerBody = shower && shower.part.showerBody;\r\n return (showerBody && showerBody.features.length) ? showerBody.features.filter((showerBodyFeature) => {\r\n return showerBodyFeature.partName.includes(currentShowerSize);\r\n }) : [1]\r\n };\r\n\r\n setShowerBodySelectionButtons = () => {\r\n const layout = getCurrentLayout();\r\n const shower = layout.parts[Shower.id];\r\n const vanity = layout.parts[Vanity.id];\r\n const counterTopSize = vanity.counterTopSize();\r\n const showerTubCombo = layout.parts[ShowerTubCombo.id];\r\n\r\n const showerSubParts = shower.subParts();\r\n const showerBody = showerSubParts.find((menuItem) => {\r\n return menuItem.part.partId === \"shower_body\"\r\n });\r\n const currentShowerSize = shower.showerSize();\r\n let contextMenuButtons = [];\r\n\r\n if (showerTubCombo.showerTubComboIsActive) {\r\n const showerTubComboSubParts = showerTubCombo.subParts();\r\n const wallConfiguration = showerTubComboSubParts.find((menuItem) => {\r\n return menuItem.part.partId === \"wall_configuration\"\r\n });\r\n showerTubCombo.wallConfiguration.features.forEach((wallConfigurationFeature) => {\r\n contextMenuButtons.push(Object.assign({}, wallConfiguration, {\r\n subMenuParent: \"Walls\",\r\n subMenuText: wallConfigurationFeature.partName,\r\n bgImageText: wallConfigurationFeature.partName,\r\n clickFeature: true,\r\n text: wallConfigurationFeature.partName.includes(\"Pony\") ? \"Pony Wall\" : \"Left Shower Wall\"\r\n }))\r\n })\r\n } else if (showerBody && showerBody.part.features.length) {\r\n showerBody.part.features.forEach((showerBodyFeature) => {\r\n if (showerBodyFeature.partName.includes(currentShowerSize)) {\r\n // console.log('showerBodyFeature.partName', showerBodyFeature.partName);\r\n if (!(counterTopSize === \"72in\" && layout.type === 1 && showerBodyFeature.partName.includes(\"15X4\"))) {\r\n contextMenuButtons.push(Object.assign({}, showerBody, {\r\n subMenuParent: \"Walls\",\r\n subMenuText: showerBodyFeature.partName,\r\n bgImageText: showerBodyFeature.partName,\r\n clickFeature: true,\r\n text: showerBodyFeature.partName.includes(\"Pony\") ? \"Pony Wall\" : \"Left Shower Wall\"\r\n }))\r\n }\r\n }\r\n })\r\n }\r\n\r\n const clickedItemIndex = contextMenuButtons.findIndex(item => {\r\n return showerTubCombo.showerTubComboIsActive\r\n ? item.subMenuText === showerTubCombo.wallConfiguration.activeFeature.partName\r\n : item.subMenuText === showerBody.part.activeFeature.partName\r\n });\r\n\r\n if (clickedItemIndex > 0) {\r\n contextMenuButtons = reorder(contextMenuButtons, clickedItemIndex, 0); // swap items in array start\r\n }\r\n\r\n this.setState({\r\n contextMenuButtons\r\n })\r\n };\r\n\r\n setWallBButtons = () => {\r\n const layout = getCurrentLayout();\r\n let contextMenuButtons = [];\r\n\r\n const wallParent = layout.parts[Walls.id];\r\n const wallParts = wallParent.subParts().filter((menuItem) => menuItem.part.partId === \"right_wall\");\r\n wallParts.forEach((wallPart) => {\r\n contextMenuButtons.push(Object.assign({}, wallPart, {\r\n subMenuParent: \"Walls\",\r\n subMenuText: wallPart.part.partName,\r\n bgImageText: wallPart.part.partName,\r\n text: wallPart.text\r\n }));\r\n });\r\n\r\n const vanity = layout.parts[Vanity.id];\r\n const vanityBacksplash = vanity.subParts().find((menuItem) => {\r\n return menuItem.part.partId === \"vanity_backsplash\"\r\n });\r\n if (vanityBacksplash) {\r\n contextMenuButtons.push(Object.assign({}, vanityBacksplash, {\r\n subMenuParent: \"Vanity\",\r\n subMenuText: vanityBacksplash.part.partName,\r\n bgImageText: vanityBacksplash.part.partName,\r\n text: vanityBacksplash.text\r\n }));\r\n }\r\n\r\n let zIndexToFind = this.props.hoveredLayer.zIndex;\r\n\r\n const clickedItem = contextMenuButtons.find(item => {\r\n return item.part.activeFeature && item.part.activeFeature.layer && item.part.activeFeature.layer.zIndex === zIndexToFind;\r\n });\r\n if (clickedItem && clickedItem.part && clickedItem.part.partId === \"vanity_backsplash\") {\r\n const vanityFaucet = vanity.subParts().find((menuItem) => {\r\n return menuItem.part.partId === \"vanity_faucet\"\r\n });\r\n if (vanityFaucet) {\r\n contextMenuButtons.push(Object.assign({}, vanityFaucet, {\r\n subMenuParent: \"Vanity\",\r\n subMenuText: vanityFaucet.part.partName,\r\n bgImageText: vanityFaucet.part.partName,\r\n text: vanityFaucet.text\r\n }));\r\n }\r\n }\r\n\r\n const clickedItemIndex = contextMenuButtons.findIndex(item => {\r\n return item.part.activeFeature && item.part.activeFeature.layer && item.part.activeFeature.layer.zIndex === zIndexToFind;\r\n });\r\n\r\n if (clickedItemIndex > 0) {\r\n contextMenuButtons = reorder(contextMenuButtons, clickedItemIndex, 0); // swap items in array start\r\n }\r\n\r\n this.setState({\r\n contextMenuButtons\r\n })\r\n };\r\n\r\n setContextMenuButtons() {\r\n\r\n const layout = getCurrentLayout();\r\n\r\n if (this.props.contextMenuOpen === \"Shower Body Selection\") {\r\n this.setShowerBodySelectionButtons();\r\n return\r\n } else if (this.props.contextMenuOpen === \"wall_b_custom\") {\r\n this.setWallBButtons();\r\n return\r\n }\r\n\r\n const hoveredParent = this.props.designNavigationItems.find(navItem => {\r\n return navItem.text === this.props.contextMenuOpen\r\n });\r\n\r\n let relatedItems = hoveredParent.part.relatedItems;\r\n if (this.props.contextMenuOpen === \"Shower Tub Combo\") {\r\n relatedItems = [...hoveredParent.part.relatedItems, ...hoveredParent.part.getShowerRelatedItems()]\r\n }\r\n\r\n let zIndexToFind = this.props.hoveredLayer.zIndex;\r\n if (this.props.hoveredLayer.zIndex === Z.layouts[layout.getCurrentLayoutName()].Shower.Wall2) {\r\n zIndexToFind = Z.layouts[layout.getCurrentLayoutName()].Shower.Wall\r\n }\r\n if (\r\n this.props.hoveredLayer.zIndex === Z.layouts[layout.getCurrentLayoutName()].Shower.WallAccent2\r\n ) {\r\n zIndexToFind = Z.layouts[layout.getCurrentLayoutName()].Shower.WallAccent\r\n }\r\n const clickedItem = relatedItems.find((item) => {\r\n return (item.activeFeature && item.activeFeature.layer.zIndex === zIndexToFind)\r\n || (item.layerPositions && Object.keys(item.layerPositions).some(key => {\r\n return item.layerPositions[key] && item.layerPositions[key].layer && (item.layerPositions[key].layer.zIndex === zIndexToFind)\r\n }))\r\n });\r\n\r\n let itemsToRender = this.getItemsToRender(hoveredParent);\r\n\r\n // console.log('clickedItem', clickedItem);\r\n // console.log('relatedItems', relatedItems);\r\n // console.log('itemsToRender', itemsToRender);\r\n\r\n const clickedItemIndex = itemsToRender.findIndex(item => item.text === clickedItem.partName);\r\n if (clickedItemIndex > 0) {\r\n itemsToRender = reorder(itemsToRender, clickedItemIndex, 0); // swap items in array start\r\n }\r\n\r\n this.setState({\r\n contextMenuButtons: itemsToRender\r\n })\r\n }\r\n\r\n getItemsToRender = (hoveredParent) => {\r\n const layout = getCurrentLayout();\r\n let itemsToRender = hoveredParent.part.subParts().filter(subPart => layout.designNavigationItems(subPart).length);\r\n\r\n if ((this.props.contextMenuOpen === \"Shower\" || this.props.contextMenuOpen === \"Shower Tub Combo\") && hoveredParent.text !== \"Shower Accessories\") {\r\n itemsToRender = itemsToRender.filter(menuButton => {\r\n return this.props.contextMenuPonyWall\r\n ? menuButton.part.isPonyWallPart && menuButton.part.partId !== \"pony_wall\"\r\n : !menuButton.part.isPonyWallPart\r\n });\r\n const accessoriesParent = layout.parts[ShowerAccessories.id];\r\n if (accessoriesParent && accessoriesParent.categoryEnabled && !this.props.contextMenuPonyWall\r\n && accessoriesParent.subParts().some(subPart => layout.designNavigationItems(subPart).length)) {\r\n itemsToRender = itemsToRender.filter(menuButton => menuButton.part.partId !== \"shower_wall_accent\");\r\n itemsToRender.push({\r\n text: \"Accessories\",\r\n part: {},\r\n subNav: true\r\n })\r\n }\r\n itemsToRender = itemsToRender.filter(menuButton => menuButton.part.partId !== \"shower_head\");\r\n if (layout.parts[ShowerTubCombo.id] && !this.props.contextMenuPonyWall) {\r\n itemsToRender.push({\r\n text: \"Configure Layout\",\r\n part: {},\r\n subNav: true\r\n })\r\n }\r\n }\r\n\r\n if (this.props.contextMenuOpen === \"Shower\") {\r\n itemsToRender = itemsToRender.filter(menuButton => menuButton.part.partId !== \"threshold\");\r\n }\r\n if (this.props.contextMenuOpen === \"Shower Tub Combo\") {\r\n itemsToRender = this.removeNotUsedTubItemsFromContextMenu(itemsToRender, hoveredParent.part.bottomTub);\r\n }\r\n if (this.props.contextMenuOpen === \"Vanity\") {\r\n itemsToRender = itemsToRender.filter((itemToRender) => {\r\n return itemToRender.part.partId !== \"vanity_mirror\" && itemToRender.part.partId !== \"vanity_backsplash\";\r\n });\r\n }\r\n\r\n return itemsToRender\r\n };\r\n\r\n removeNotUsedTubItemsFromContextMenu = (itemsToRender, activeTub) => {\r\n return itemsToRender.filter((itemToRender) => {\r\n let keepThisItem = true;\r\n Object.keys(ShowerComboTubType).forEach((key) => {\r\n if (itemToRender.part.partId === ShowerComboTubType[key] && itemToRender.part.partId !== activeTub\r\n && itemToRender.part.partId !== ShowerComboTubType.replacement_tub\r\n && itemToRender.part.partId !== ShowerComboTubType.bathtub_liner\r\n ) {\r\n keepThisItem = false\r\n }\r\n });\r\n if (itemToRender.text === \"Wall Configuration\") {\r\n keepThisItem = false\r\n }\r\n return keepThisItem\r\n });\r\n };\r\n\r\n handleSubNavClick = (menuItem) => {\r\n const layout = getCurrentLayout();\r\n\r\n if (menuItem.text === \"Accessories\") {\r\n const hoveredParent = this.props.designNavigationItems.find(navItem => {\r\n return navItem.text === \"Shower Accessories\"\r\n });\r\n this.setState({\r\n contextMenuButtons: this.getItemsToRender(hoveredParent)\r\n .map(button => {\r\n button.subMenuParent = \"Shower Accessories\";\r\n return button\r\n })\r\n });\r\n return false\r\n }\r\n\r\n const showerSubParts = layout.parts[Shower.id].subParts();\r\n\r\n const shower = showerSubParts.find((menuItem) => {\r\n return menuItem.part.partId === \"shower_body\"\r\n });\r\n shower.subMenuText = \"Shower\";\r\n shower.subMenuParent = \"Shower\";\r\n\r\n const showerTubCombo = layout.parts[ShowerTubCombo.id];\r\n const showerTubComboSubParts = showerTubCombo.subParts();\r\n\r\n const activeTubMenuItems = showerTubComboSubParts.filter(menuItem => menuItem.part.bottomTubId);\r\n activeTubMenuItems.forEach(menuItem => menuItem.subMenuParent = \"Shower Tub Combo\");\r\n\r\n const wallConfiguration = showerTubComboSubParts.find((menuItem) => {\r\n return menuItem.part.partId === \"wall_configuration\"\r\n });\r\n wallConfiguration.subMenuText = \"Shower Tub Combo\";\r\n wallConfiguration.subMenuParent = \"Shower Tub Combo\";\r\n\r\n this.setState({\r\n contextMenuButtons: [\r\n shower,\r\n wallConfiguration,\r\n ...activeTubMenuItems,\r\n ]\r\n })\r\n };\r\n\r\n handleContextMenuHover = (menuItem) => {\r\n const layout = getCurrentLayout();\r\n const hoveredButton = menuItem.text === \"Countertop\" ? \"CounterTop\" : menuItem.text;\r\n const hoveredParent = menuItem.subMenuParent || this.props.contextMenuOpen;\r\n\r\n const layoutType = layout.getCurrentLayoutName();\r\n\r\n // console.log('hoveredButton', hoveredButton);\r\n // console.log('hoveredParent', hoveredParent);\r\n\r\n if (hoveredButton && hoveredParent) {\r\n\r\n let hoveredZindex = \"\";\r\n\r\n if (hoveredParent === \"Shower\") {\r\n const shower = layout.parts.Shower;\r\n switch (hoveredButton) {\r\n case \"Shower Walls\":\r\n hoveredZindex = Z.layouts[layoutType].Shower.Wall;\r\n break;\r\n case \"Shower Body\":\r\n if (shower.showerDoor && shower.showerDoor.features.length) {\r\n hoveredZindex = Z.layouts[layoutType][hoveredParent].ShowerDoor;\r\n } else {\r\n hoveredZindex = Z.layouts[layoutType][hoveredParent].Glass;\r\n }\r\n break;\r\n case \"Shower Door\":\r\n hoveredZindex = Z.layouts[layoutType][hoveredParent].ShowerDoor;\r\n break;\r\n case \"Handle\":\r\n hoveredZindex = Z.layouts[layoutType][hoveredParent].ShowerDoorHandle;\r\n break;\r\n case \"Shower Pan\":\r\n case \"Shower Pans\":\r\n hoveredZindex = Z.layouts[layoutType][hoveredParent].ShowerPanCombo;\r\n break;\r\n case \"Shower Walls Accent\":\r\n hoveredZindex = Z.layouts[layoutType][hoveredParent].WallAccent;\r\n break;\r\n case \"Pony Wall Glass\":\r\n hoveredZindex = Z.layouts[layoutType][\"Shower\"].PonyWallGlass;\r\n break;\r\n case \"Pony Wall Cap\":\r\n hoveredZindex = Z.layouts[layoutType][\"Shower\"].PonyWallCap;\r\n break;\r\n case \"Floor\":\r\n hoveredZindex = shower.showerFloorIsActive\r\n ? Z.layouts[layoutType][hoveredParent][hoveredButton]\r\n : Z.layouts[layoutType][hoveredParent].ShowerPanCombo;\r\n break;\r\n default:\r\n hoveredZindex = Z.layouts[layoutType][hoveredParent][hoveredButton];\r\n break;\r\n }\r\n } else if (hoveredParent === \"Shower Tub Combo\") {\r\n switch (hoveredButton) {\r\n case \"Shower Door\":\r\n hoveredZindex = Z.layouts[layoutType].Shower.ShowerDoor;\r\n break;\r\n case \"Shower Walls\":\r\n hoveredZindex = Z.layouts[layoutType].Shower.Wall;\r\n break;\r\n case \"Shower Walls Accent\":\r\n hoveredZindex = Z.layouts[layoutType].Shower.WallAccent;\r\n break;\r\n case \"Fixture\":\r\n hoveredZindex = Z.layouts[layoutType][\"Shower\"].Fixture;\r\n break;\r\n case \"Handle\":\r\n hoveredZindex = Z.layouts[layoutType][\"Shower\"].ShowerDoorHandle;\r\n break;\r\n case \"Wall Configuration\":\r\n hoveredZindex = Z.layouts[layoutType][\"Shower\"].ShowerDoor;\r\n break;\r\n case \"Jetted Tub\":\r\n hoveredZindex = Z.layouts[layoutType][\"Shower\"].TubCombo.JettedTub;\r\n break;\r\n case \"Tub Liner\":\r\n hoveredZindex = Z.layouts[layoutType][\"Shower\"].TubCombo.Liner;\r\n break;\r\n case \"Walk In Tub\":\r\n hoveredZindex = Z.layouts[layoutType][\"Shower\"].TubCombo.WalkInTub;\r\n break;\r\n case \"Replacement Tub\":\r\n hoveredZindex = Z.layouts[layoutType][\"Shower\"].TubCombo.ReplacementTub;\r\n break;\r\n case \"Pony Wall Glass\":\r\n hoveredZindex = Z.layouts[layoutType][\"Shower\"].PonyWallGlass;\r\n break;\r\n case \"Pony Wall Cap\":\r\n hoveredZindex = Z.layouts[layoutType][\"Shower\"].PonyWallCap;\r\n break;\r\n default:\r\n hoveredZindex = Z.layouts[layoutType][\"Shower\"].TubCombo[hoveredButton.replace(/ /g, \"\")];\r\n break;\r\n }\r\n } else if (hoveredParent === \"Vanity\") { // Vanity\r\n if (layout.parts.Vanity.activeSubType_ === VanityTypes.Complete) {\r\n switch (hoveredButton) {\r\n case \"Vanity\":\r\n hoveredZindex = Z.layouts[layoutType].Vanity.Complete.Cabinet;\r\n break;\r\n case \"Accent Wall\":\r\n hoveredZindex = Z.layouts[layoutType].Wall_A_Accent_Mask;\r\n break;\r\n default:\r\n hoveredZindex = Z.layouts[layoutType].Vanity[hoveredButton]; // Mirror\r\n break;\r\n }\r\n } else {\r\n switch (hoveredButton) {\r\n case \"Accent Wall\":\r\n hoveredZindex = Z.layouts[layoutType].Wall_A_Accent_Mask;\r\n break;\r\n case \"Backsplash\":\r\n hoveredZindex = Z.layouts[layoutType].Vanity.VanityBacksplash;\r\n break;\r\n default:\r\n hoveredZindex = Z.layouts[layoutType].Vanity[hoveredButton];\r\n break;\r\n }\r\n }\r\n } else if (hoveredParent === \"Bathtub\") { // Bathtub\r\n if (hoveredButton === \"Bathtub\") {\r\n hoveredZindex = Z.layouts[layoutType].Bathtub.BathTubBody\r\n } else if (hoveredButton === \"Fixture\") {\r\n hoveredZindex = Z.layouts[layoutType].Bathtub.BathTubFixture\r\n } else {\r\n hoveredZindex = Z.layouts[layoutType].Bathtub[hoveredButton]\r\n }\r\n } else if (hoveredParent === \"Walls\") { // Bathtub\r\n switch (hoveredButton) {\r\n case \"Pony Wall\":\r\n hoveredZindex = Z.layouts[layoutType].Shower.PonyWall;\r\n break;\r\n case \"Left Shower Wall\": {\r\n const wallParent = layout.parts[hoveredParent];\r\n const activeShowerGroup = wallParent.getActiveShowerGroup();\r\n const showerDimensions = getMetadataByDimensions(activeShowerGroup.showerDimensions());\r\n hoveredZindex = showerDimensions === \"Half\"\r\n ? Z.layouts[layoutType].Shower.ExtrusionWallLeftHalfWall\r\n : Z.layouts[layoutType].Shower.ExtrusionWallLeft;\r\n break;\r\n }\r\n default:\r\n hoveredZindex = Z.layouts[layoutType].Vanity[hoveredButton];\r\n break;\r\n }\r\n }\r\n\r\n this.props.renderGreenLayerByZindex(hoveredZindex);\r\n }\r\n\r\n };\r\n\r\n render() {\r\n\r\n let contextMenuStyles = this.props.contextMenuPosition || {};\r\n if (this.state.contextMenuButtons.length === 4) {\r\n contextMenuStyles = Object.assign({}, contextMenuStyles, {maxWidth:\"210px\"} )\r\n }\r\n\r\n return (\r\n \r\n {this.state.contextMenuButtons.map((menuItem) => {\r\n if (!menuItem) {\r\n return null\r\n }\r\n return (\r\n \r\n )\r\n })}\r\n
\r\n \r\n
\r\n )\r\n }\r\n}\r\n","import React, {useEffect, useRef, useState} from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport PropTypes from \"prop-types\";\r\n\r\nimport ClickAwayListener from '@mui/material/ClickAwayListener';\r\nimport Grow from '@mui/material/Grow';\r\nimport Popper from '@mui/material/Popper';\r\n\r\nimport {setLookContextMenu} from \"../../../actions/lookFunctions\";\r\nimport {ALL_CONTEXT_MENU} from \"../core/constants\";\r\n\r\nimport {checkForContextMenuCommon} from \"../lookNavigation/lookFunctions\";\r\nimport ContextMenuQKBButtons from \"./contextMenuQKBButtons\";\r\n\r\n\r\nconst getContextMenuPosition = (contextMenu, position, isMobile) => {\r\n const {partId, layerPosition} = contextMenu;\r\n const {showButtons} = checkForContextMenuCommon(partId, layerPosition);\r\n\r\n let left = isMobile ? '50%' : position.x - 50;\r\n let top = isMobile ? '50%' : position.y - 50;\r\n let right = 'auto';\r\n\r\n const maxAllowedWidth = showButtons.length > 2 ? 300 : 210;\r\n\r\n let maxAllowedHeight = 110;\r\n if (showButtons.length > 6) {\r\n maxAllowedHeight = 330;\r\n } else if (showButtons.length >= 3) {\r\n maxAllowedHeight = 220;\r\n }\r\n if (!isMobile && (left > window.innerWidth - maxAllowedWidth)) {\r\n left = 'auto';\r\n right = 0\r\n }\r\n if (!isMobile && (top > window.innerHeight - maxAllowedHeight)) {\r\n let negativeMargin = 50;\r\n if (showButtons.length > 6) {\r\n negativeMargin = 250;\r\n } else if (showButtons.length >= 3) {\r\n negativeMargin = 150;\r\n }\r\n top = top - negativeMargin;\r\n }\r\n\r\n return {left, top, right}\r\n}\r\n\r\nconst ContextMenuQKB = (props) => {\r\n\r\n const {contextMenu, setLookContextMenu, isMobile, handleContextMenuClick, renderGreenLayerByZindex} = props;\r\n const {opened, position} = contextMenu;\r\n const [styles, setStyles] = useState({left: 0, top: 0, right: 0});\r\n const [buttons, setButtons] = useState([]);\r\n const anchorRef = useRef(null);\r\n\r\n const handleClose = (event) => {\r\n if (document.hoveredLayer && event.target.closest(\".canvas-el\") && ALL_CONTEXT_MENU.includes(document.hoveredLayer.partId)) {\r\n return\r\n }\r\n setLookContextMenu({\r\n opened: false,\r\n layerPosition: \"\",\r\n });\r\n };\r\n\r\n useEffect(() => {\r\n if (!contextMenu.opened) {\r\n return null\r\n }\r\n setStyles(getContextMenuPosition(contextMenu, position, isMobile));\r\n const {showButtons} = checkForContextMenuCommon(contextMenu.partId, contextMenu.layerPosition);\r\n setButtons(showButtons);\r\n }, [contextMenu, position, isMobile]);\r\n\r\n // console.log(\"styles\", styles);\r\n\r\n let contextStyles = styles;\r\n if (buttons.length <= 4) {\r\n contextStyles = Object.assign({}, styles, {maxWidth: \"210px\"});\r\n }\r\n\r\n return (\r\n \r\n {this.state.contextMenuButtons.map((menuItem) => {\r\n return menuItem ? (\r\n \r\n ) : null\r\n })}\r\n
\r\n \r\n \r\n {({ TransitionProps }) => (\r\n \r\n \r\n
\r\n )\r\n};\r\n\r\nContextMenuQKB.propTypes = {\r\n handleContextMenuClick: PropTypes.func,\r\n renderGreenLayerByZindex: PropTypes.func,\r\n}\r\n\r\nconst mapStateToProps = (store) => {\r\n const {contextMenu} = store.lookState;\r\n const {isMobile} = store.serverState;\r\n return {\r\n contextMenu,\r\n isMobile,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n setLookContextMenu\r\n};\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(ContextMenuQKB)\r\n","import invert from 'lodash/invert';\r\nimport snakeCase from 'lodash/snakeCase';\r\n\r\nimport LayoutCommonNew from \"../../visComponents/layoutCommonNew\";\r\nimport {LayoutType, LayoutAbbreviation} from \"./constants\";\r\nimport zIndexes from \"./zIndex\";\r\nimport Other from \"./parts/other\";\r\nimport NonVisualizerSubPart from \"./subparts/nonVisualizerSubPart\";\r\nimport DesignNavigationItem from \"../../visComponents/designNavigationItem\";\r\nimport Background from \"./parts/background\";\r\nimport Floor from \"./parts/floor\";\r\nimport Walls from \"./parts/walls\";\r\nimport {AVAILABLE_VISUALIZER_TYPES} from \"../../../config\";\r\nimport FireplaceParent from \"./parts/fireplaceParent\";\r\nimport Globals from \"./parts/globals\";\r\nimport {hardCodeIsModerno} from \"../../../misc/fabricatorHardcode\";\r\n\r\nexport class Layout extends LayoutCommonNew {\r\n\r\n /**\r\n * @type {int}\r\n */\r\n defaultType = hardCodeIsModerno() ? LayoutType.Layout1 : LayoutType.Layout31;\r\n type = this.defaultType;\r\n scene = \"1\";\r\n visualizerType = AVAILABLE_VISUALIZER_TYPES.Fireplace;\r\n localStorageKey = \"FireplaceState\";\r\n layersBinding = \"Fireplace\";\r\n layoutNames = LayoutAbbreviation;\r\n layoutTypes = LayoutType;\r\n layoutThumbnails = {};\r\n zIndexes = zIndexes.layouts;\r\n excludedPartIdsFromHover = [\"decor_\", \"background_bg\", \"attachment\"];\r\n\r\n constructor(props) {\r\n super(props);\r\n this.parts[Globals.id] = new Globals();\r\n this.parts[Background.id] = new Background();\r\n this.parts[FireplaceParent.id] = new FireplaceParent();\r\n this.parts[Walls.id] = new Walls();\r\n this.parts[Floor.id] = new Floor();\r\n this.parts[Other.id] = new Other();\r\n Object.values(this.parts).forEach(part => part.layout = this);\r\n }\r\n\r\n getCurrentLayoutName(type = this.type) {\r\n return invert(LayoutType)[type];\r\n }\r\n\r\n getCurrentLayoutAbbreviation() {\r\n return LayoutAbbreviation[this.getCurrentLayoutName()]\r\n }\r\n\r\n addNonVisualizerSubPart(featureGroupName){\r\n const otherParent = this.parts[Other.id];\r\n const partId = snakeCase(featureGroupName);\r\n let relatedItem = otherParent.relatedItems.find(relatedItem => relatedItem.partId === partId);\r\n if (!relatedItem) {\r\n relatedItem = new NonVisualizerSubPart(true, partId, featureGroupName);\r\n relatedItem.getParent = () => otherParent;\r\n otherParent.relatedItems.push(relatedItem);\r\n }\r\n return new DesignNavigationItem(relatedItem.partName, relatedItem)\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../intermediatePart\";\r\n\r\nexport default class NonVisualizerSubPart extends IntermediatePart {\r\n constructor(isChild, partId, partName) {\r\n super(isChild);\r\n this.partId = partId;\r\n this.visible = true;\r\n this.partName = partName;\r\n // this.allFeaturesReceived = true;\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new NonVisualizerSubPart(false, this.partId, dbFeature.groupName));\r\n }\r\n\r\n navigationSubItems(filters, searchText) {\r\n return this.navigationNoMetaSubItems(filters, searchText)\r\n }\r\n}\r\n","import React, {Component} from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport {connect} from \"react-redux\";\r\nimport {FormattedMessage} from \"react-intl\";\r\n\r\nimport {reorder} from \"../../../misc/utils\";\r\nimport Analytics from \"../../../analytics\";\r\nimport {getCurrentLayout} from \"../../appLayout\";\r\nimport {BACKSPLASH_TYPES} from \"../../kvComponent/core/constants\";\r\n\r\nclass ContextMenuSimple extends Component {\r\n\r\n static propTypes = {\r\n contextMenuOpen: PropTypes.string.isRequired,\r\n hoveredLayer: PropTypes.object,\r\n handleContextMenuClick: PropTypes.func,\r\n contextMenuPosition: PropTypes.object,\r\n contextMenuPonyWall: PropTypes.bool,\r\n renderGreenLayerByZindex: PropTypes.func,\r\n closeContextMenu: PropTypes.func,\r\n };\r\n\r\n state = {\r\n contextMenuButtons: []\r\n };\r\n\r\n componentDidMount() {\r\n this.setContextMenuButtons();\r\n if (this.props.closeContextMenu) {\r\n document.addEventListener('click', this.contextMenuBlur)\r\n }\r\n }\r\n\r\n contextMenuBlur = (e) => {\r\n if (!e.target.closest('.contextmenu-buttons')\r\n && !e.target.closest('.contextmenu-buttons__button')\r\n && !e.target.closest('.sprocket-container') && !e.target.closest('.canvas')) {\r\n this.props.closeContextMenu();\r\n }\r\n };\r\n\r\n componentWillUnmount() {\r\n if (this.props.closeContextMenu) {\r\n document.removeEventListener('click', this.contextMenuBlur)\r\n }\r\n }\r\n\r\n setContextMenuButtons() {\r\n const layout = getCurrentLayout();\r\n const contextMenuOpen = this.props.contextMenuOpen;\r\n if (contextMenuOpen === \"backsplash_custom\"\r\n || contextMenuOpen === \"backsplash_custom_left\"\r\n || contextMenuOpen === \"backsplash_custom_right\"\r\n || contextMenuOpen === \"right_wall_custom\"\r\n || contextMenuOpen === \"left_wall_custom\") {\r\n this.setBacksplashButtons();\r\n return\r\n }\r\n\r\n const hoveredParent = layout.designNavigationItems().find(navItem => {\r\n return navItem.text === contextMenuOpen\r\n });\r\n\r\n let relatedItems = hoveredParent.part.relatedItems;\r\n\r\n const clickedItem = relatedItems.find((item) => {\r\n return item.activeFeature && (item.partId === this.props.hoveredLayer.partId)\r\n });\r\n\r\n let itemsToRender = this.getItemsToRender(hoveredParent);\r\n\r\n // console.log('clickedItem', clickedItem);\r\n // console.log('relatedItems', relatedItems);\r\n // console.log('itemsToRender', itemsToRender);\r\n\r\n const clickedItemIndex = itemsToRender.findIndex(item => item.text === clickedItem.partName);\r\n if (clickedItemIndex > 0) {\r\n itemsToRender = reorder(itemsToRender, clickedItemIndex, 0); // swap items in array start\r\n }\r\n\r\n itemsToRender = itemsToRender.map(item => {\r\n if (item.text === \"Island Countertop\") {\r\n // item.subMenuText = \"Countertop\";\r\n item.bgImageText = \"Countertop\";\r\n }\r\n return item\r\n });\r\n\r\n this.setState({\r\n contextMenuButtons: itemsToRender\r\n })\r\n }\r\n\r\n getItemsToRender = (hoveredParent) => {\r\n let itemsToRender = hoveredParent.part.subParts();\r\n let availablePartIds = [];\r\n switch (this.props.contextMenuOpen) {\r\n case \"Center Island\":\r\n availablePartIds = [\"center_island_sink\", \"center_island_faucet\", \"center_island_countertop\",\r\n \"center_island_stovetop\", \"center_island_range\", \"center_island_edge\"];\r\n break;\r\n case \"Countertop\":\r\n availablePartIds = [\"countertop\", \"faucet\", \"sink\", \"edge_profile\"];\r\n break;\r\n case \"Walls\":\r\n availablePartIds = [\"right_wall\", \"backsplash\"];\r\n break;\r\n default:\r\n break;\r\n }\r\n return itemsToRender.filter(menuButton => availablePartIds.includes(menuButton.part.partId));\r\n };\r\n\r\n getBackSplashButtons = () => {\r\n return BACKSPLASH_TYPES.map(bType => {\r\n const button = {\r\n text: bType,\r\n };\r\n switch (bType) {\r\n case \"4in\":\r\n button.subMenuText = \"visualizer.kitchen.contextmenu.backsplash.4in\"\r\n break;\r\n case \"6in\":\r\n button.subMenuText = \"visualizer.kitchen.contextmenu.backsplash.6in\"\r\n break;\r\n case \"Full\":\r\n button.subMenuText = \"visualizer.kitchen.contextmenu.backsplash.18in\"\r\n break;\r\n }\r\n return button\r\n })\r\n };\r\n\r\n setBacksplashButtons = () => {\r\n const layout = getCurrentLayout();\r\n const hoveredParent = layout.designNavigationItems().find(navItem => {\r\n return navItem.text === \"Walls\"\r\n });\r\n const subParts = hoveredParent.part.subParts();\r\n\r\n let contextMenuButtons = [];\r\n const backSplashButtons = this.getBackSplashButtons();\r\n const rightWall = subParts.find(menuButton => menuButton.part.partId === \"right_wall\");\r\n const leftWall = subParts.find(menuButton => menuButton.part.partId === \"left_wall\");\r\n if (rightWall) {\r\n rightWall.subMenuParent = \"Walls\";\r\n }\r\n if (leftWall) {\r\n leftWall.subMenuParent = \"Walls\";\r\n }\r\n switch (this.props.contextMenuOpen) {\r\n case \"right_wall_custom\": {\r\n contextMenuButtons = rightWall ? [rightWall, ...backSplashButtons] : backSplashButtons;\r\n break;\r\n }\r\n case \"left_wall_custom\": {\r\n contextMenuButtons = leftWall ? [leftWall, ...backSplashButtons] : backSplashButtons;\r\n break;\r\n }\r\n case \"backsplash_custom_left\": {\r\n contextMenuButtons = [...backSplashButtons, leftWall];\r\n break;\r\n }\r\n case \"backsplash_custom_right\": {\r\n contextMenuButtons = [...backSplashButtons, rightWall];\r\n break;\r\n }\r\n case \"backsplash_custom\": {\r\n contextMenuButtons = backSplashButtons; // just in case, we should not have these cases\r\n break;\r\n }\r\n }\r\n this.setState({\r\n contextMenuButtons\r\n })\r\n };\r\n\r\n handleContextMenuHover = () => {\r\n //TODO[Artem] add here rendering green zones on hover\r\n };\r\n\r\n render() {\r\n\r\n let contextMenuStyles = this.props.contextMenuPosition || {};\r\n if (this.state.contextMenuButtons.length <= 4) {\r\n contextMenuStyles = Object.assign({}, contextMenuStyles, {maxWidth:\"210px\"} )\r\n }\r\n\r\n return (\r\n \r\n \r\n \r\n
\r\n \r\n )}\r\n \r\n \r\n
\r\n \r\n
\r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = () => {\r\n return {};\r\n};\r\n\r\nconst mapDispatchToProps = {};\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(ContextMenuSimple)\r\n","import {IntermediatePart} from \"../intermediatePart\";\r\n\r\nexport default class NonVisualizerSubPart extends IntermediatePart {\r\n constructor(isChild, partId, partName) {\r\n super(isChild);\r\n this.partId = partId;\r\n this.visible = true;\r\n this.partName = partName;\r\n // this.allFeaturesReceived = true;\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new NonVisualizerSubPart(false, this.partId, dbFeature.groupName));\r\n }\r\n\r\n navigationSubItems(filters, searchText) {\r\n return this.navigationNoMetaSubItems(filters, searchText)\r\n }\r\n}\r\n","import uuid from \"uuid\";\r\n\r\nimport * as types from '../actions/actionTypes';\r\nimport featureIsMatchingDisplayLogic from \"../misc/displayLogic\";\r\nimport {COUNTERTOP_GROUP} from \"../bvcomponents/kvComponent/core/constants\";\r\nimport {getMinimumChargeCartItem} from \"../actions/shoppingCartFunctions\";\r\nimport {FEATURE_STONE, getFeatureType} from \"../misc/helpers\";\r\nimport {IS_LIXIL_UI} from \"../config\";\r\nimport {getFeaturePriceProperty} from \"../misc/priceFunctions\";\r\nimport {SQFT_FEATURES} from \"../bvcomponents/sqft/constants\";\r\n\r\nconst initialState = {\r\n cartItems: [],\r\n displayLogicCartItems: [], // read only (is needed to check them every time cart is changed)\r\n applyPopupOpened: false,\r\n activeApplyPopupItems: [],\r\n questionNoClicked: false,\r\n cameFromPage: '',\r\n recentlyViewedItems: [],\r\n checkoutPopupVisible: false,\r\n orderCompletePopupVisible: false,\r\n depositVisible: false,\r\n depositCallback: null,\r\n state: 'design',\r\n showMobileQuotes: false,\r\n showAllQuotesCartItemsList: true,\r\n cartFooterActiveButtonIndex: 0,\r\n cartItemEditFeature: null,\r\n lookRemovedCartItems: [],\r\n cItemsAddedToParentCart: [], // ArrayOf {id: \"string\", quantity: number}\r\n sureTax: 0, // comes in response of sureTax API\r\n sureTaxLoading: false, // shows loader in columns section\r\n manualTaxEntered: false, // if it is true - show always the same manual tax\r\n deliveryList: [], // calculates depending on features shipping cost // {cost, title: \"\", delivery: \"\", code: \"\"}\r\n markUpLogic: \"\", // {retail: {value: 10, type: \"mark_up\"}, cost: {value: 10, type: \"mark_down\"}, discount: {}}\r\n};\r\n\r\nexport const supportedCountries = [{\r\n name: 'USA',\r\n zipCodeRg: /^\\d{5}([ \\-]\\d{4})?$/\r\n}, {\r\n name: 'Canada',\r\n zipCodeRg: /^[ABCEGHJKLMNPRSTVXY]\\\\d[ABCEGHJ-NPRSTV-Z][ ]?\\\\d[ABCEGHJ-NPRSTV-Z]\\\\d$/\r\n}, {\r\n name: 'UK',\r\n zipCodeRg: /^GIR[ ]?0AA|((AB|AL|B|BA|BB|BD|BH|BL|BN|BR|BS|BT|CA|CB|CF|CH|CM|CO|CR|CT|CV|CW|DA|DD|DE|DG|DH|DL|DN|DT|DY|E|EC|EH|EN|EX|FK|FY|G|GL|GY|GU|HA|HD|HG|HP|HR|HS|HU|HX|IG|IM|IP|IV|JE|KA|KT|KW|KY|L|LA|LD|LE|LL|LN|LS|LU|M|ME|MK|ML|N|NE|NG|NN|NP|NR|NW|OL|OX|PA|PE|PH|PL|PO|PR|RG|RH|RM|S|SA|SE|SG|SK|SL|SM|SN|SO|SP|SR|SS|ST|SW|SY|TA|TD|TF|TN|TQ|TR|TS|TW|UB|W|WA|WC|WD|WF|WN|WR|WS|WV|YO|ZE)(\\d[\\dA-Z]?[ ]?\\d[ABD-HJLN-UW-Z]{2}))|BFPO[ ]?\\d{1,4}$/\r\n}];\r\nexport const supportedCountriesList = [\"USA\", \"Canada\", \"UK\"];\r\n\r\nfunction checkForAddToCartFeaturesWithDisplayLogic(cartItems, displayLogicCartItems, currentQuote = 0, allWizardsValues) {\r\n cartItems = cartItems.filter(cartItem => {\r\n return !displayLogicCartItems.some(displayLogicCartItem => {\r\n return (cartItem.cartFeature.dbFeature.id === displayLogicCartItem.cartFeature.dbFeature.id)\r\n && (cartItem.currentQuote === currentQuote)\r\n })\r\n }); // clear existing display logic items for this quote, we will add them below\r\n displayLogicCartItems.forEach((displayLogicCartItem) => {\r\n const {quantity, isMatching} = featureIsMatchingDisplayLogic(displayLogicCartItem.cartFeature, cartItems, currentQuote, allWizardsValues);\r\n if (isMatching) {\r\n cartItems = [...cartItems, Object.assign({}, displayLogicCartItem, {\r\n quantity,\r\n currentQuote,\r\n id: uuid.v4(), // to make sure we have different cart items in different quotes\r\n })]\r\n }\r\n });\r\n return cartItems\r\n}\r\n\r\nfunction removeFakePriceFromCartItems(cartItems) {\r\n cartItems = cartItems.map((cartItem) => {\r\n if (cartItem.displayFakePrice === 0) {\r\n cartItem.displayFakePrice = null\r\n }\r\n return cartItem\r\n });\r\n return cartItems\r\n}\r\n\r\nconst checkLowesHardcodedRulesItems = (cartItems, fabricatorSettings) => {\r\n cartItems = cartItems.filter(cItem => !cItem.isMinimumCharge); // 1) remove already added, and calculate again\r\n const countertopItems = cartItems.filter(cItem => COUNTERTOP_GROUP.includes(cItem.partId)); // 2) countertop group only\r\n\r\n const MINIMUM_SQFT = 23;\r\n const MINIMUM_SQFT_2 = 27;\r\n\r\n if (countertopItems.length) {\r\n const totalQuantity = countertopItems.reduce(((accumulator, cItem) => accumulator + cItem.quantity), 0); // 3) get all quantities\r\n if (totalQuantity <= MINIMUM_SQFT) {\r\n cartItems.push(getMinimumChargeCartItem(countertopItems[0], true)) // 4) add hardcoded 300$\r\n } else if ((totalQuantity >= (MINIMUM_SQFT + 1)) && (totalQuantity <= (MINIMUM_SQFT_2 -1))) { // 5) between 23 and 27 - add additional countertops\r\n let theMostValuableCartItem = countertopItems[0];\r\n countertopItems.forEach(cItem => {\r\n let currentMostFeatureCost = getFeaturePriceProperty(theMostValuableCartItem.cartFeature, fabricatorSettings) * theMostValuableCartItem.quantity;\r\n let cartItemCost = getFeaturePriceProperty(cItem.cartFeature, fabricatorSettings) * cItem.quantity;\r\n if (cartItemCost > currentMostFeatureCost) { // 6) find with the biggest price added\r\n theMostValuableCartItem = cItem\r\n }\r\n });\r\n cartItems.push(getMinimumChargeCartItem(theMostValuableCartItem, false, MINIMUM_SQFT_2 - totalQuantity)) // 7) add hardcoded items\r\n }\r\n }\r\n // console.log(\"cartItems2\", cartItems);\r\n return cartItems\r\n}\r\n\r\nconst checkCaesHardcodedRulesItems = (cartItems) => {\r\n // console.log(\"cartItems before\", cartItems);\r\n cartItems = cartItems.filter(cItem => !cItem.isMinimumCharge); // 1) remove already added, and calculate again\r\n const countertopItems = cartItems.filter(cItem => COUNTERTOP_GROUP.includes(cItem.partId)); // 2) countertop group only\r\n let uniqueSharedNames = [];\r\n countertopItems.forEach(cItem => {\r\n if (!uniqueSharedNames.includes(cItem.cartFeature.dbFeature.sharedFeatureName)) {\r\n uniqueSharedNames.push(cItem.cartFeature.dbFeature.sharedFeatureName)\r\n }\r\n });\r\n const MINIMUM_CAES_SQFT = 25;\r\n\r\n if (uniqueSharedNames.length) {\r\n uniqueSharedNames.forEach(uniqueSharedName => {\r\n const matchingItems = countertopItems.filter(cItem => cItem.cartFeature.dbFeature.sharedFeatureName === uniqueSharedName);\r\n const totalQuantity = matchingItems.reduce(((accumulator, cItem) => accumulator + cItem.quantity), 0); // 3) get all quantities\r\n if (totalQuantity < MINIMUM_CAES_SQFT) {\r\n cartItems.push(getMinimumChargeCartItem(matchingItems[0], false, MINIMUM_CAES_SQFT - totalQuantity))\r\n }\r\n })\r\n }\r\n // console.log(\"cartItems2\", cartItems);\r\n return cartItems\r\n}\r\n\r\nconst allowMinimumChargeConditions = (fabricatorState) => {\r\n return fabricatorState && fabricatorState.settings.showPricing\r\n && !fabricatorState.hideCheckoutBreakdownCost && !fabricatorState.hidePricesFromUser\r\n && document.kvConfig.visualizerType === \"Kitchen\" || document.kvConfig.visualizerType === \"kvScene\"\r\n}\r\n\r\nconst checkHardcodedRulesItems = (fabricatorState, cartItems) => {\r\n if (allowMinimumChargeConditions(fabricatorState)) {\r\n // console.log(\"cartItems\", cartItems);\r\n // console.log(\"fabricatorState\", fabricatorState);\r\n // console.log(\"fabricatorState.settings.language\", fabricatorState.settings.language);\r\n if (fabricatorState.isLowes) {\r\n cartItems = checkLowesHardcodedRulesItems(cartItems, fabricatorState.settings);\r\n } else if (fabricatorState.isCaesarStone && (fabricatorState.settings.language !== \"en-AU\")) {\r\n cartItems = checkCaesHardcodedRulesItems(cartItems)\r\n }\r\n }\r\n return cartItems\r\n}\r\n\r\n/**\r\n * Recalculate slab in cart\r\n * @param {{}} cartItems\r\n * return bool\r\n */\r\nexport const isRecalculateSlabsInCartNeeded = (cartItems) => {\r\n return cartItems.some(cartItem => {\r\n return cartItem.cartFeature && FEATURE_STONE === getFeatureType(cartItem.cartFeature.dbFeature)\r\n });\r\n}\r\n\r\n/**\r\n * Recalculate slab in cart\r\n * @param cartItems {object}\r\n * @returns cartItems {object}\r\n */\r\nconst recalculateSlabsInCart = (cartItems) => {\r\n for (const cartItem of cartItems) {\r\n if (FEATURE_STONE !== getFeatureType(cartItem.cartFeature.dbFeature)) {\r\n continue;\r\n }\r\n const similarFeatures = cartItems.filter((cItem) => {\r\n const isSameNameFeature = cItem.cartFeature.getFeatureName() === cartItem.cartFeature.getFeatureName();\r\n const isBiggestFeature = cItem.isBiggestFeature;\r\n const isQuantityAddedToBiggestFeature = cItem.isQuantityAddedToBiggestFeature;\r\n return isSameNameFeature && (isBiggestFeature || isQuantityAddedToBiggestFeature) // select only features from sqft\r\n });\r\n let biggestFeature = similarFeatures.find(cartItem => cartItem.isBiggestFeature);\r\n if (!biggestFeature && cartItem.isQuantityAddedToBiggestFeature) {\r\n cartItem.isBiggestFeature = true;\r\n }\r\n if (cartItem.isBiggestFeature) {\r\n cartItem.quantity = similarFeatures.reduce((sum, cItem) => {\r\n return cItem.displayFakeQuantity !== undefined\r\n ? cItem.displayFakeQuantity + sum\r\n : cItem.quantity + sum\r\n }, 0);\r\n }\r\n }\r\n return cartItems\r\n}\r\n// const checkStonePricingLogic = (cartItems) => { //TODO[Artem] edit features not working :(\r\n// if (cartItems.some(cartItem => {\r\n// return cartItem.cartFeature && Array.isArray(cartItem.cartFeature.dbFeature.stonePricingId) && cartItem.cartFeature.dbFeature.stonePricingId.length\r\n// })) {\r\n// let commonSharedFeatureNames = []; // {sharedName: \"\", totalQuantity: 0, biggestFeature, sqftFeatures: []}\r\n// cartItems.forEach(cartItem => {\r\n// if (!cartItem.initialQuantity) {\r\n// cartItem.initialQuantity = cartItem.quantity;\r\n// }\r\n// if (cartItem.cartFeature && Array.isArray(cartItem.cartFeature.dbFeature.stonePricingId)\r\n// && cartItem.cartFeature.dbFeature.stonePricingId.length) {\r\n// const alreadyAdded = commonSharedFeatureNames.find(sharedObject => {\r\n// return sharedObject.sharedName === cartItem.cartFeature.dbFeature.sharedFeatureName\r\n// });\r\n// if (!alreadyAdded) {\r\n// commonSharedFeatureNames.push({\r\n// sharedName: cartItem.cartFeature.dbFeature.sharedFeatureName,\r\n// totalQuantity: cartItem.initialQuantity,\r\n// sqftFeatures: [cartItem],\r\n// biggestFeature: cartItem,\r\n// })\r\n// } else {\r\n// alreadyAdded.sqftFeatures.push(cartItem);\r\n// alreadyAdded.totalQuantity += cartItem.initialQuantity;\r\n// if (!alreadyAdded.biggestFeature) {\r\n// alreadyAdded.biggestFeature = cartItem;\r\n// } else if (cartItem.cartFeature.partId === \"countertop\") {\r\n// if (alreadyAdded.biggestFeature.partId !== \"countertop\" || (alreadyAdded.biggestFeature.initialQuantity < cartItem.initialQuantity)) {\r\n// alreadyAdded.biggestFeature = cartItem;\r\n// }\r\n// } else if (cartItem.cartFeature.partId === \"center_island_countertop\") {\r\n// if ((alreadyAdded.biggestFeature.partId !== \"countertop\" && alreadyAdded.biggestFeature.partId !== \"center_island_countertop\")\r\n// || (alreadyAdded.biggestFeature.partId === \"center_island_countertop\" && alreadyAdded.biggestFeature.initialQuantity < cartItem.initialQuantity)) {\r\n// alreadyAdded.biggestFeature = cartItem;\r\n// }\r\n// } else if ((alreadyAdded.biggestFeature.partId !== \"countertop\") && (alreadyAdded.biggestFeature.partId !== \"center_island_countertop\")\r\n// && alreadyAdded.biggestFeature.initialQuantity < cartItem.initialQuantity) { // backsplash\r\n// alreadyAdded.biggestFeature = cartItem;\r\n// }\r\n// }\r\n// }\r\n// });\r\n// if (commonSharedFeatureNames.length) { // 2) set each feature new fake quantity\r\n// commonSharedFeatureNames.forEach(sharedObject => {\r\n// sharedObject.sqftFeatures.forEach(cartItem => {\r\n// cartItem.displayFakeQuantity = cartItem.initialQuantity;\r\n// if (sharedObject.biggestFeature && (cartItem.id === sharedObject.biggestFeature.id)) {\r\n// cartItem.quantity = sharedObject.totalQuantity;\r\n// } else {\r\n// cartItem.quantity = 0;\r\n// }\r\n// });\r\n// });\r\n// }\r\n// }\r\n// return cartItems\r\n// }\r\n\r\nexport default function(state = initialState, action) {\r\n\r\n switch(action.type) {\r\n\r\n case types.ADD_TO_CART: {\r\n const actionCartItems = action.payload.cartItems;\r\n let stateCartItems = state.cartItems;\r\n if (IS_LIXIL_UI) {\r\n stateCartItems = stateCartItems.map(stateCartItem => {\r\n const sameCartItemIndex = actionCartItems.findIndex(newCartItem => {\r\n return newCartItem.cartFeature && stateCartItem.cartFeature &&\r\n (newCartItem.cartFeature.dbFeature.sku && stateCartItem.cartFeature.dbFeature.sku\r\n ? (newCartItem.cartFeature.dbFeature.sku === stateCartItem.cartFeature.dbFeature.sku)\r\n : (newCartItem.cartFeature.dbFeature.sharedFeatureName\r\n && stateCartItem.cartFeature.dbFeature.sharedFeatureName\r\n && (newCartItem.cartFeature.dbFeature.sharedFeatureName === stateCartItem.cartFeature.dbFeature.sharedFeatureName)))\r\n })\r\n if (sameCartItemIndex > -1) {\r\n if (stateCartItem.addedBy !== actionCartItems[sameCartItemIndex].addedBy) {\r\n stateCartItem.quantity = actionCartItems[sameCartItemIndex].quantity || 1;\r\n stateCartItem.addedBy = actionCartItems[sameCartItemIndex].addedBy;\r\n } else {\r\n stateCartItem.quantity += actionCartItems[sameCartItemIndex].quantity || 1;\r\n }\r\n actionCartItems.splice(sameCartItemIndex, 1);\r\n }\r\n return stateCartItem\r\n })\r\n }\r\n let newCartItems = [...stateCartItems, ...actionCartItems];\r\n\r\n if (state.displayLogicCartItems.length) {\r\n const currentQuote = actionCartItems.length\r\n ? actionCartItems[0].currentQuote\r\n : newCartItems.length\r\n ? newCartItems[0].currentQuote\r\n : 0;\r\n newCartItems = checkForAddToCartFeaturesWithDisplayLogic(newCartItems, state.displayLogicCartItems, currentQuote, action.payload.allWizardsValues);\r\n }\r\n newCartItems = checkHardcodedRulesItems(action.payload.fabricatorState, newCartItems);\r\n // newCartItems = checkStonePricingLogic(newCartItems);\r\n return Object.assign({}, state, {\r\n cartItems: newCartItems\r\n });\r\n }\r\n case types.SET_STATE_TO_QUOTE:\r\n return Object.assign({}, state, {\r\n state: \"quote\"\r\n });\r\n\r\n case types.ADD_DISPLAY_LOGIC_CART_ITEM:\r\n return Object.assign({}, state, {\r\n displayLogicCartItems: [...state.displayLogicCartItems.filter((oldCartItem) => {\r\n return (oldCartItem.cartFeature.dbFeature.id !== action.payload.cartItem.cartFeature.dbFeature.id)\r\n // && (oldCartItem.currentQuote !== action.payload.cartItem.currentQuote)\r\n // removed, why it is added? we can have different add to cart features in the same quote\r\n }), action.payload.cartItem]\r\n });\r\n\r\n case types.ADD_TO_RECENTLY_VIEWED:\r\n // console.log('action.payload.cartItem', action.payload.cartItem);\r\n return Object.assign({}, state, {\r\n recentlyViewedItems: (state.recentlyViewedItems.every(oldItem => oldItem.dbFeature.id !== action.payload.feature.dbFeature.id))\r\n ? [...state.recentlyViewedItems, action.payload.feature]\r\n : [...state.recentlyViewedItems]\r\n });\r\n\r\n case types.CHANGE_CART_QUANTITY: {\r\n // console.log('action.payload.cartItem', action.payload.cartItem);\r\n let newCartItems = [...state.cartItems.map((cartItem) => {\r\n if (cartItem.id === action.payload.cartItem.id) {\r\n cartItem.quantity = action.payload.quantity;\r\n if (action.payload.removeFakeQuantity && Number.isInteger(cartItem.displayFakeQuantity)) {\r\n cartItem.displayFakeQuantity = null;\r\n }\r\n } else if (cartItem.bundleParentId && (cartItem.bundleParentId === action.payload.cartItem.id)) {\r\n const quantity = action.payload.cartItem.cartFeature.dbFeature.bundledFeatureQuantities\r\n ? action.payload.cartItem.cartFeature.dbFeature.bundledFeatureQuantities[cartItem.cartFeature.dbFeature.id] || 1\r\n : 1;\r\n cartItem.quantity = quantity * action.payload.quantity;\r\n }\r\n return cartItem\r\n })];\r\n if (state.displayLogicCartItems.length) {\r\n newCartItems = checkForAddToCartFeaturesWithDisplayLogic(newCartItems, state.displayLogicCartItems, action.payload.cartItem.currentQuote, action.payload.allWizardsValues)\r\n }\r\n newCartItems = checkHardcodedRulesItems(action.payload.fabricatorState, newCartItems);\r\n // newCartItems = checkStonePricingLogic(newCartItems);\r\n return Object.assign({}, state, {\r\n cartItems: newCartItems\r\n });\r\n }\r\n\r\n case types.CHANGE_CART_FEATURE: {\r\n // console.log('action.payload.cartItem', action.payload.cartItem);\r\n let newCartItems = [...state.cartItems.map((cartItem) => {\r\n return (cartItem.id === action.payload.cartItem.id) ? action.payload.cartItem : cartItem\r\n })];\r\n if (!action.payload.skipOtherRules) { // if we change note text for example, we don't need to recalculate other cart items\r\n newCartItems = checkHardcodedRulesItems(action.payload.fabricatorState, newCartItems);\r\n }\r\n return Object.assign({}, state, {\r\n cartItems: newCartItems\r\n });\r\n }\r\n\r\n case types.REMOVE_FROM_CART: {\r\n // console.log('action.payload.cartItem', action.payload.cartItem);\r\n // console.log('state.cartItems', state.cartItems);\r\n const cartItemToDeleteIndex = state.cartItems.findIndex((cartItem) => cartItem.id === action.payload.cartItem.id);\r\n if (cartItemToDeleteIndex > -1) {\r\n state.cartItems.splice(cartItemToDeleteIndex, 1);\r\n }\r\n let newCartItems = [...state.cartItems];\r\n if (state.displayLogicCartItems.length) {\r\n newCartItems = checkForAddToCartFeaturesWithDisplayLogic(newCartItems, state.displayLogicCartItems, action.payload.cartItem.currentQuote, action.payload.allWizardsValues)\r\n }\r\n newCartItems = checkHardcodedRulesItems(action.payload.fabricatorState, newCartItems);\r\n if (isRecalculateSlabsInCartNeeded(state.cartItems)) {\r\n newCartItems = recalculateSlabsInCart(newCartItems);\r\n }\r\n\r\n // removeFakePriceFromCartItems if we have slabs\r\n if (action.payload.cartItem && action.payload.cartItem.partId === SQFT_FEATURES.slabs) {\r\n const isSlabsStillExistInCart = newCartItems.some(newCartItem => newCartItem.partId === SQFT_FEATURES.slabs)\r\n if (!isSlabsStillExistInCart) {\r\n newCartItems = removeFakePriceFromCartItems(newCartItems);\r\n }\r\n }\r\n\r\n newCartItems = newCartItems.filter((cartItem) => {\r\n return !cartItem.bundleParentId || newCartItems.some(cI => cI.id === cartItem.bundleParentId)\r\n })\r\n // newCartItems = checkStonePricingLogic(newCartItems);\r\n return Object.assign({}, state, {\r\n cartItems: newCartItems\r\n });\r\n }\r\n\r\n case types.TOGGLE_APPLY_POPUP:\r\n return Object.assign({}, state, {\r\n applyPopupOpened: action.payload.applyPopupOpened,\r\n activeApplyPopupItems: action.payload.activeApplyPopupItems.map((activeApplyPopupItem) => {\r\n const existingCartItemIndex = state.cartItems.findIndex(cartItem => {\r\n return cartItem.cartFeature.dbFeature.id === activeApplyPopupItem.cartFeature.dbFeature.id\r\n });\r\n if (existingCartItemIndex > -1) {\r\n activeApplyPopupItem.quantity = state.cartItems[existingCartItemIndex].quantity; // if cart already have item, return it's quantity\r\n }\r\n return activeApplyPopupItem\r\n }).filter(item => {\r\n return !(item.partId === \"top_cabinet\"\r\n && action.payload.activeApplyPopupItems.some(item => item.partId === \"top_cabinet_module_0\"));\r\n\r\n })\r\n });\r\n\r\n case types.CLICK_QUESTION_NO:\r\n case types.CAME_FROM_PAGE:\r\n case types.SHOW_ORDER_COMPLETE_POPUP:\r\n case types.TOGGLE_SHOW_MOBILE_QUOTES:\r\n case types.TOGGLE_SHOW_ALL_QUOTES_CART_ITEMS_LIST:\r\n case types.SET_CART_FOOTER_ACTIVE_BUTTON_INDEX:\r\n case types.SET_CART_ITEM_EDIT_FEATURE:\r\n case types.SET_LOOK_REMOVED_CART_ITEMS:\r\n case types.CHANGE_ALL_CART_ITEMS:\r\n case types.SET_SURE_TAX:\r\n case types.SET_DELIVERY_LIST:\r\n case types.SET_SURE_TAX_LOADING:\r\n case types.SET_MARK_UP_LOGIC:\r\n return Object.assign({}, state, {\r\n ...action.payload\r\n });\r\n case types.RESTORE_CART: {\r\n if (action.payload.cartState && action.payload.cartState.cartItems) {\r\n action.payload.cartState.cartItems = checkHardcodedRulesItems(action.payload.fabricatorState, action.payload.cartState.cartItems);\r\n // action.payload.cartState.cartItems = checkStonePricingLogic(action.payload.cartState.cartItems);\r\n }\r\n let displayLogicCartItems = action.payload.cartState && action.payload.cartState.displayLogicCartItems\r\n ? action.payload.cartState.displayLogicCartItems\r\n : [];\r\n if ((displayLogicCartItems && displayLogicCartItems.length) || state.displayLogicCartItems.length) {\r\n action.payload.cartState.displayLogicCartItems = [...displayLogicCartItems, ...state.displayLogicCartItems.filter((oldCartItem) => {\r\n return !displayLogicCartItems.some(newCi => newCi.cartFeature.dbFeature.id === oldCartItem.cartFeature.dbFeature.id)\r\n })];\r\n // cases when someone loaded display logic in bathroom, then saved kitchen quote, and when the kitchen is restored they are loaded to kitchen\r\n action.payload.cartState.cartItems = checkForAddToCartFeaturesWithDisplayLogic(action.payload.cartState.cartItems, action.payload.cartState.displayLogicCartItems, 0, action.payload.allWizardsValues)\r\n }\r\n return Object.assign({}, state, {\r\n ...action.payload.cartState,\r\n checkoutPopupVisible: false,\r\n orderCompletePopupVisible: false,\r\n });\r\n }\r\n case types.CLEAR_CART:\r\n return {...state, cartItems: []};\r\n case types.SHOW_CHECKOUT_POPUP:\r\n return {...state, checkoutPopupVisible: action.payload.show};\r\n case types.SHOW_DEPOSIT:\r\n return {...state, depositVisible: action.payload.show, depositCallback: action.payload.callback};\r\n case types.SET_CART_ITEMS_ADDED_TO_PARENT_CART: {\r\n const cItemsAddedToParentCart = [...state.cItemsAddedToParentCart];\r\n action.payload.cartItems.forEach(cartItem => {\r\n const existing = cItemsAddedToParentCart.find(cItem => cItem.id === cartItem.id);\r\n if (existing) {\r\n existing.quantity += cartItem.quantity;\r\n } else {\r\n cItemsAddedToParentCart.push({\r\n id: cartItem.id,\r\n quantity: cartItem.quantity,\r\n })\r\n }\r\n });\r\n return {...state, cItemsAddedToParentCart};\r\n }\r\n case types.SET_LOOK_OPENED:\r\n case types.SET_LOOK_PAGE_OPENED:\r\n return state.cartItemEditFeature ? {...state, cartItemEditFeature: null} : state\r\n case types.SET_LOOK_ACTIVE_CATEGORY:\r\n return (state.cartItemEditFeature && !action.payload.lookActiveCategory && !action.payload.isMobile)\r\n ? {...state, cartItemEditFeature: null} : state\r\n case types.SET_LOOK_ACTIVE_FEATURE:\r\n return (state.cartItemEditFeature && !action.payload.lookActiveFeature) ? {...state, cartItemEditFeature: null} : state\r\n case types.TOGGLE_SELECTION_WINDOW:\r\n // exit editing on change route\r\n return (state.cartItemEditFeature && !action.payload.selectionOpened) ? {...state, cartItemEditFeature: null} : state\r\n case types.CHANGE_SELECTION_ACTIVE_PART_RELATED_INDEX:\r\n // exit editing on change step\r\n return state.cartItemEditFeature && !action.payload.isSameStep ? {...state, cartItemEditFeature: null} : state\r\n case types.SET_WIZARD_ACTIVE_STEP:\r\n case types.SET_WIZARD_SELECTED_VALUES: {\r\n let newState = state;\r\n if (state.displayLogicCartItems.length) {\r\n let newCartItems = state.cartItems;\r\n newCartItems = checkForAddToCartFeaturesWithDisplayLogic(newCartItems, state.displayLogicCartItems, action.payload.quoteIndex, action.payload.allWizardsValues)\r\n newState = {...state, cartItems: newCartItems}\r\n }\r\n if ((action.type === types.SET_WIZARD_ACTIVE_STEP) && state.cartItemEditFeature) {\r\n newState = {...state, cartItemEditFeature: null}\r\n }\r\n return newState\r\n }\r\n case types.SET_MANUAL_TAX: {\r\n if (!state.manualTaxEntered) {\r\n state.manualTaxEntered = true;\r\n }\r\n state.sureTax = +action.payload.manualTax;\r\n return state\r\n }\r\n }\r\n\r\n return state;\r\n}\r\n","import React, {Component} from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport Analytics from './../../analytics';\r\nimport * as uuid from \"uuid\";\r\n\r\nexport default class Quantity extends Component {\r\n\r\n static propTypes = {\r\n value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\r\n title: PropTypes.string,\r\n label: PropTypes.string,\r\n size: PropTypes.string,\r\n changeValue: PropTypes.func.isRequired,\r\n minValue: PropTypes.number,\r\n maxValue: PropTypes.number,\r\n defaultQuantity: PropTypes.number,\r\n hideQuantity: PropTypes.bool,\r\n pulseFeatureInfoQuantity: PropTypes.bool,\r\n squared: PropTypes.bool,\r\n allowDecimals: PropTypes.bool\r\n };\r\n\r\n static defaultProps = {\r\n hideQuantity: false,\r\n pulseFeatureInfoQuantity: false,\r\n };\r\n\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n value: props.defaultQuantity || props.value,\r\n inputId: uuid.v4()\r\n };\r\n }\r\n\r\n componentDidMount() {\r\n\r\n }\r\n\r\n componentWillReceiveProps(nextProps) {\r\n if (nextProps.value !== this.state.value) {\r\n this.setState({\r\n value: nextProps.value\r\n })\r\n }\r\n }\r\n\r\n getMinMax = () => {\r\n const min = this.props.minValue !== undefined ? this.props.minValue : 0;\r\n const max = this.props.maxValue !== undefined ? this.props.maxValue : 99999;\r\n\r\n return {min, max};\r\n };\r\n\r\n handleOnKeyDown = (event) => {\r\n if (event.key==='.' && !this.props.allowDecimals) {\r\n event.preventDefault();\r\n return false\r\n }\r\n };\r\n\r\n handleChangeValue = (event, button) => {\r\n let value = \"\" + (button ? this.state.value + event : +event.target.value);\r\n if (value.includes(\".\")) {\r\n if (!this.props.allowDecimals) {\r\n return false\r\n }\r\n if (value.split(\".\")[1].length > 2) {\r\n value = +value.substring(0, value.length - 1); //round to 2 decimals\r\n }\r\n }\r\n value = +value;\r\n Analytics.sendDataEnteredEvent(\"quantity-value\", value);\r\n const {min, max} = this.getMinMax();\r\n if (value >= min && value <= max) {\r\n value = value === 0 ? \"\" : value;\r\n this.setState({value});\r\n this.props.changeValue(value);\r\n }\r\n };\r\n\r\n handleInputBlur = (e,) => {\r\n const value = +e.target.value;\r\n const {min, max} = this.getMinMax();\r\n if (value >= min) {\r\n this.setState({value});\r\n this.props.changeValue(value);\r\n } else {\r\n this.setState({value: 0});\r\n this.props.changeValue(0);\r\n }\r\n if (value > max) {\r\n this.setState({value: max});\r\n this.props.changeValue(max);\r\n }\r\n };\r\n\r\n getColor = () => {\r\n\r\n if (this.props.pulseFeatureInfoQuantity) {\r\n return \"pulsing-red\"\r\n }\r\n\r\n const {min, max} = this.getMinMax();\r\n return (this.state.value > min && this.state.value <= max) ? \"green\" : \"blue\"\r\n };\r\n\r\n render() {\r\n const {hideQuantity, squared} = this.props;\r\n const color = this.getColor();\r\n return (\r\n \r\n {this.state.contextMenuButtons.map((menuItem) => {\r\n if (!menuItem) {\r\n return null\r\n }\r\n return (\r\n \r\n )\r\n })}\r\n
\r\n \r\n {this.props.title ? {this.props.title} : null}\r\n {this.props.label ? : null}\r\n
\r\n );\r\n }\r\n}\r\n","import {loaderDisable, loaderEnable} from \"../bvcomponents/ui/loaderView\";\r\nimport store from \"../store\";\r\nimport Analytics from \"../analytics\";\r\nimport {getCustomerById, resetUserPassword, userLogin, userRegister} from \"../api/user-api\";\r\nimport {showQuoteSavedNotification} from \"../bvcomponents/ui/successNotification\";\r\nimport {saveQuote} from \"../api/server-api\";\r\nimport {getAnalyticsEcommerceValues} from \"../analyticsEcommerceParams\";\r\nimport {restorePaymentInfo} from \"../actions/paymentFunctions\";\r\nimport Misc from \"./misc\";\r\nimport {changeUserInfo, toggleUserPopup} from \"../actions/actionFunctions\";\r\n\r\nexport const loginButtonCommonClick = async (updateInputValidations, analyticsLabel) => {\r\n await updateInputValidations();\r\n const errors = store.getState().userState.userInfoErrors;\r\n if (Object.keys(errors).length && Object.keys(errors)\r\n .filter(key => key === \"email\" || key === \"password\")\r\n .some(key => errors[key] && errors[key].length)) {\r\n return false\r\n }\r\n loaderEnable();\r\n Analytics.sendClickEvent(analyticsLabel);\r\n const {currency, value} = getAnalyticsEcommerceValues();\r\n Analytics.sendEcommerceEvent(\"generate_lead\", {currency, value});\r\n\r\n const loginResponse = await userLogin();\r\n loaderDisable();\r\n return loginResponse\r\n}\r\n\r\nexport const saveQuoteAfterSignIn = async () => {\r\n loaderEnable();\r\n const savedSuccess = await saveQuote({submit: true, showReceipt: false});\r\n if (savedSuccess) {\r\n showQuoteSavedNotification();\r\n document.kvConfig.jobId = savedSuccess.jobId;\r\n }\r\n loaderDisable();\r\n return savedSuccess\r\n}\r\n\r\nexport const registerButtonCommonClick = async (updateInputValidations, analyticsLabel, executeAfterRegisterIfUserExist) => {\r\n await updateInputValidations();\r\n const {userState} = store.getState();\r\n const errors = userState.userInfoErrors;\r\n if (Object.keys(errors).length && Object.keys(errors)\r\n .filter(key => key !== \"password\")\r\n .some(key => errors[key] && errors[key].length)) {\r\n return false\r\n }\r\n if (userState.userInfo) {\r\n store.dispatch(restorePaymentInfo({ // on register - fill in also shipping, why not\r\n shippingAddress: {\r\n address1: userState.userInfo.address1,\r\n address2: userState.userInfo.address2,\r\n fullName: userState.userInfo.firstName + \" \" + userState.userInfo.lastName,\r\n city: userState.userInfo.city,\r\n state: userState.userInfo.state,\r\n postal: userState.userInfo.postal,\r\n }\r\n }))\r\n }\r\n loaderEnable();\r\n Analytics.sendClickEvent(analyticsLabel);\r\n const {currency, value} = getAnalyticsEcommerceValues();\r\n Analytics.sendEcommerceEvent(\"generate_lead\", {currency, value});\r\n\r\n const registeredResponse = await userRegister({executeAfterRegisterIfUserExist});\r\n console.log(\"successfully registered\", registeredResponse);\r\n loaderDisable();\r\n return registeredResponse\r\n}\r\n\r\nexport const remindPasswordCommonClick = async (updateInputValidations, analyticsLabel) => {\r\n await updateInputValidations();\r\n const fullStore = store.getState();\r\n // const {language} = fullStore.serverState;\r\n // const {userInfo, userInfoErrors} = fullStore.userState;\r\n const {userInfoErrors} = fullStore.userState;\r\n\r\n if (userInfoErrors.email && userInfoErrors.email.length) {\r\n return false\r\n }\r\n // loaderEnable();\r\n Analytics.sendClickEvent(analyticsLabel);\r\n await resetUserPassword();\r\n // loaderDisable();\r\n}\r\n\r\nexport const getUpdatedUserInfoFromTheResponse = (newUserInfo, responseCustomer, onLoad = false) => {\r\n if (onLoad) {\r\n if (responseCustomer.email) {\r\n newUserInfo.email = responseCustomer.email;\r\n }\r\n if (responseCustomer.fullName) {\r\n newUserInfo.firstName = responseCustomer.fullName;\r\n }\r\n }\r\n if (responseCustomer.phone) {\r\n const oldCountry = responseCustomer.country || responseCustomer.shipping ? responseCustomer.shipping.country : \"\";\r\n const {phoneNumber, country} = Misc.getUserPhoneSplitted(responseCustomer.phone, oldCountry);\r\n newUserInfo.phoneNumber = phoneNumber;\r\n newUserInfo.phone = phoneNumber;\r\n if (country) {\r\n newUserInfo.country = country;\r\n }\r\n }\r\n if (responseCustomer.address) {\r\n [\"address1\", \"address2\", \"postal\", \"city\", \"provence\"].forEach(key => { // removed country, cause it is a string, and we keep object now\r\n if (responseCustomer.address[key]) {\r\n const realKey = (key === \"provence\") ? \"state\" : key;\r\n newUserInfo[realKey] = responseCustomer.address[key];\r\n }\r\n })\r\n }\r\n newUserInfo.shipping = responseCustomer.shipping;\r\n return newUserInfo\r\n}\r\n\r\nexport const tryToSetUserFromUrl = async (url) => {\r\n if (!url || !url.searchParams) {\r\n return\r\n }\r\n const userId = url.searchParams.get(\"u\");\r\n if (!userId) {\r\n return\r\n }\r\n try {\r\n const customerId = +(userId.split(\"/\")[0]);\r\n const responseCustomer = await getCustomerById({\r\n customerId,\r\n });\r\n if (!responseCustomer) {\r\n return\r\n }\r\n const newUserInfo = getUpdatedUserInfoFromTheResponse({}, responseCustomer, true);\r\n store.dispatch(changeUserInfo(newUserInfo));\r\n store.dispatch(toggleUserPopup({\r\n userIsLoggedIn: true,\r\n isPhoneNumberValidated: true\r\n }));\r\n } catch (e) {\r\n console.log(\"couldn't log in customer\", userId);\r\n }\r\n}\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nconst ENTER_KEY = 13;\r\nconst rgx = /^[0-9]*\\.?[0-9]*$/;\r\n\r\nexport default class TextInput extends React.Component {\r\n\r\n inputElement = React.createRef();\r\n\r\n state = {\r\n value: this.props.value,\r\n editing: false,\r\n numberInput: false\r\n };\r\n\r\n static propTypes = {\r\n onChange: PropTypes.func.isRequired,\r\n onRealChange: PropTypes.func,\r\n onBlur: PropTypes.func,\r\n className: PropTypes.string,\r\n numberInput: PropTypes.bool,\r\n id: PropTypes.string,\r\n autoComplete: PropTypes.string,\r\n maxValue: PropTypes.number,\r\n };\r\n\r\n onChange = (event) => {\r\n let value = event.target.value;\r\n\r\n if (!value.match(rgx) && this.props.numberInput) {\r\n return false;\r\n }\r\n if (this.props.numberInput && this.props.maxValue && (this.getUpdatedValue(value) >= this.props.maxValue)) {\r\n value = this.props.maxValue;\r\n }\r\n this.setState({\r\n value\r\n });\r\n if (this.props.onRealChange) {\r\n this.props.onRealChange(value);\r\n }\r\n };\r\n\r\n onBlur = (event) => {\r\n let value = event.target.value;\r\n this.finishEditing(value);\r\n if (this.props.onBlur) {\r\n this.props.onBlur();\r\n }\r\n };\r\n\r\n getUpdatedValue = (value) => {\r\n if (!this.props.numberInput) {\r\n return value\r\n }\r\n if (value.indexOf('.') === 0) {\r\n value = +(\"0\"+value); // dot on the beginning\r\n }\r\n if (value.toString().indexOf(\".\") === (value.toString().length - 1)) {\r\n value = value.substring(0, value.length - 1); // dot on the end\r\n }\r\n if (this.props.maxValue && (+value > this.props.maxValue)) {\r\n value = this.props.maxValue;\r\n }\r\n return +value || 0\r\n }\r\n\r\n finishEditing = (value) => {\r\n value = this.getUpdatedValue(value);\r\n this.setState({\r\n editing: false\r\n }, () => {\r\n this.props.onChange(value);\r\n })\r\n };\r\n\r\n onFocus = () => {\r\n let value = this.props.numberInput && this.props.currencySing\r\n ? this.props.value.replace(this.props.currencySing,\"\").replace(\"%\",\"\").replace(\",\",\"\")\r\n : this.props.value;\r\n value = (value === \"Included\" ? \"\" : value);\r\n this.setState({\r\n editing: true,\r\n value\r\n })\r\n };\r\n\r\n handleKeyDown = e => {\r\n if (e.keyCode === ENTER_KEY) {\r\n // this.finishEditing(this.state.value);\r\n e.target.blur();\r\n }\r\n };\r\n\r\n render() {\r\n return \r\n }\r\n}\r\n","import React, {Fragment, useEffect, useRef, useState} from \"react\";\r\nimport PropTypes from \"prop-types\";\r\n// import {FormattedMessage} from \"react-intl\";\r\n\r\nimport Button from \"@mui/material/Button\";\r\nimport ExpandMoreIcon from \"@mui/icons-material/ExpandMore\";\r\n\r\nimport {useOutsideClick} from \"../../../misc/helperHooks\";\r\nimport {FormattedMessage} from \"react-intl\";\r\n\r\nconst LookDropdown = (props) => {\r\n\r\n const {selectItems, selectedItem, selectItemClick, selectLabel, maxItems, errorsObject, changeErrorsObject, getValidationErrors,\r\n inputsValidated, property, size, textOnly} = props;\r\n const [opened, setOpened] = useState(false);\r\n const selectElement = useRef(null);\r\n\r\n useOutsideClick(selectElement, () => {\r\n setOpened(false);\r\n });\r\n\r\n const handleSelectItemClick = (selectItem, selectItemIndex) => {\r\n selectItemClick(selectItem, selectItemIndex);\r\n setOpened(false);\r\n checkForError();\r\n };\r\n\r\n const checkForError = () => {\r\n if (errorsObject && getValidationErrors && changeErrorsObject) {\r\n const errors = getValidationErrors(property, selectedItem.value);\r\n changeErrorsObject({\r\n [property]: errors\r\n })\r\n }\r\n }\r\n\r\n useEffect(() => {\r\n if (!inputsValidated) {\r\n checkForError();\r\n }\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [inputsValidated]);\r\n\r\n const selectItemHeight = size || 36;\r\n const styles = {\r\n height: opened\r\n ? maxItems && (selectItems.length > maxItems)\r\n ? (maxItems * selectItemHeight) + \"px\"\r\n : (selectItems.length * selectItemHeight) + \"px\"\r\n : 0\r\n }\r\n\r\n const errorsExist = errorsObject && Array.isArray(errorsObject[property]) && !!errorsObject[property].length;\r\n\r\n return (\r\n \r\n {hideQuantity\r\n ? null\r\n : ()}\r\n \r\n {hideQuantity\r\n ? null\r\n : ()}\r\n
\r\n \r\n {textOnly ? (\r\n
\r\n )\r\n};\r\n\r\nLookDropdown.propTypes = {\r\n selectItems: PropTypes.arrayOf(PropTypes.shape({\r\n text: PropTypes.string.isRequired, // intlKey\r\n value: PropTypes.any.isRequired,\r\n preText: PropTypes.string,\r\n })).isRequired,\r\n selectItemClick: PropTypes.func.isRequired,\r\n selectedItem: PropTypes.object,\r\n selectLabel: PropTypes.string,\r\n className: PropTypes.string,\r\n maxItems: PropTypes.number,\r\n size: PropTypes.number,\r\n textOnly: PropTypes.bool,\r\n // validation below\r\n property: PropTypes.string,\r\n inputsValidated: PropTypes.bool,\r\n errorsObject: PropTypes.object, // userInfoErrorsLike\r\n changeErrorsObject: PropTypes.func,\r\n getValidationErrors: PropTypes.func,\r\n};\r\n\r\nexport default LookDropdown\r\n","import React from \"react\";\r\nimport {connect} from \"react-redux\";\r\nimport PropTypes from \"prop-types\";\r\nimport {FormattedMessage} from \"react-intl\";\r\n\r\nimport {featureInterface} from \"../../../../../interfaces/featureInterface\";\r\n\r\nconst LookFeatureSku = (props) => {\r\n\r\n const {lookFeature, fabricatorSettings, isList} = props;\r\n\r\n if (!lookFeature.dbFeature.sku || fabricatorSettings.hideSku) {\r\n return null\r\n }\r\n\r\n if (isList) {\r\n return (\r\n \r\n \r\n \r\n {selectedItem && selectedItem.preText ? {selectedItem.preText} : null}\r\n {selectLabel ? {selectLabel} : null}\r\n {selectedItem ? selectedItem.text : \"-\"}\r\n \r\n
\r\n ) : (\r\n \r\n )}\r\n {textOnly ? null : (\r\n \r\n
\r\n )}\r\n {errorsExist ? (\r\n - \r\n {selectItems.map((selectItem, selectItemIndex) => {\r\n const isSelected = selectItem.value === selectedItem.value;\r\n return (\r\n
- \r\n \r\n \r\n )\r\n })}\r\n
\r\n \r\n
\r\n ) : \"\"}\r\n \r\n \r\n \r\n
\r\n ) : (\r\n \r\n {isMobile && !IS_PRODUCT_JOURNEY\r\n ? lookAllWallsTutorial.visible ? null : \r\n : }\r\n \r\n {showAllWalls ? : null}\r\n
\r\n )}\r\n {isEmpty ? (\r\n \r\n \r\n
\r\n ) : (\r\n \r\n {viewTypeFour || ((currentType === 2) && showPriceLocked) ? null : (\r\n \r\n \r\n {/*{showYellowNotice ? : null}*/}\r\n \r\n )}\r\n {showPriceLocked ?
\r\n )}\r\n {/*{lookFeature && lookExpanded && canRender ? (*/}\r\n {/* \r\n {!lookExpanded && !isLockedAndViewTypeFour && !noFeatureSection && !showPriceLocked ? (\r\n \r\n ) : null}\r\n {viewTypeFour && !featureIsLocked ? : null}\r\n
\r\n ) : null}\r\n No Features found
;\r\n\r\n return (\r\n \r\n
\r\n )\r\n};\r\n\r\nGroheFeatureQuantity.propTypes = {\r\n disabled: PropTypes.bool,\r\n hideTitle: PropTypes.bool,\r\n isWizard: PropTypes.bool,\r\n feature: PropTypes.shape(featureInterface)\r\n};\r\n\r\nconst mapStateToProps = (store) => {\r\n const {isMobile} = store.serverState;\r\n const {groheActiveFeatureQuantity} = store.groheState;\r\n const {lookActiveFeature} = store.lookState;\r\n const fabricatorData = store.fabricatorState;\r\n\r\n return {\r\n isMobile,\r\n groheActiveFeatureQuantity,\r\n lookActiveFeature,\r\n fabricatorData,\r\n }\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n setGroheActiveFeatureQuantity\r\n};\r\n\r\nexport default injectIntl(\r\n connect(mapStateToProps, mapDispatchToProps)(GroheFeatureQuantity)\r\n)\r\n","import React from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport {FormattedMessage} from \"react-intl\";\r\n\r\nimport Button from \"@mui/material/Button\";\r\nimport InfoIcon from \"@mui/icons-material/Info\";\r\n\r\nimport {setLookActiveCategory, setLookMoreInfoOpened, setLookOverlayOpened} from \"../../../../../actions/lookFunctions\";\r\nimport {LOOK_FEATURE_CONTENT, LOOK_OVERLAYS} from \"../../../core/constants\";\r\nimport Analytics, {LOOK_JOURNEY_ANALYTIC_EVENTS, PRODUCT_JOURNEY_ANALYTIC_EVENTS} from \"../../../../../analytics\";\r\nimport {IS_PRODUCT_JOURNEY} from \"../../../../../config\";\r\nimport {getAvailableFeatureContent} from \"../../../lookNavigation/lookFunctions2\";\r\n\r\nconst GroheFeatureMoreInfoButton = (props) => {\r\n\r\n const {featureIsLocked, setLookMoreInfoOpened, moreInfoOpened, moreInfoContent, lookActiveCategory, lookActiveFeature,\r\n setLookOverlayOpened} = props;\r\n\r\n const moreInfoClick = () => {\r\n if (IS_PRODUCT_JOURNEY) {\r\n Analytics.sendClickEvent(moreInfoOpened\r\n ? PRODUCT_JOURNEY_ANALYTIC_EVENTS.productFeatureMoreInfoClose\r\n : PRODUCT_JOURNEY_ANALYTIC_EVENTS.productFeatureMoreInfoOpen\r\n );\r\n } else {\r\n Analytics.sendClickEvent(moreInfoOpened\r\n ? LOOK_JOURNEY_ANALYTIC_EVENTS.lookFeatureMoreInfoClose\r\n : LOOK_JOURNEY_ANALYTIC_EVENTS.lookFeatureMoreInfoOpen\r\n );\r\n }\r\n if (featureIsLocked) {\r\n setLookOverlayOpened(LOOK_OVERLAYS.leadCapture);\r\n return false\r\n }\r\n const moreInfoType = moreInfoOpened && (moreInfoContent === LOOK_FEATURE_CONTENT.info)\r\n ? \"\"\r\n : lookActiveCategory && !IS_PRODUCT_JOURNEY ? \"select\" : \"main\";\r\n //setLookActiveCategory(\"\");\r\n setLookMoreInfoOpened(moreInfoType, LOOK_FEATURE_CONTENT.info);\r\n };\r\n\r\n return (\r\n \r\n \r\n \r\n )\r\n};\r\n\r\nconst mapStateToProps = (store) => {\r\n const {moreInfoOpened, moreInfoContent} = store.lookState;\r\n const {lookActiveCategory, lookActiveFeature} = store.lookState;\r\n return {\r\n moreInfoOpened,\r\n moreInfoContent,\r\n lookActiveCategory,\r\n lookActiveFeature,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n setLookActiveCategory,\r\n setLookMoreInfoOpened,\r\n setLookOverlayOpened,\r\n};\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(GroheFeatureMoreInfoButton)\r\n","import React from \"react\";\r\nimport {FormattedMessage} from \"react-intl\";\r\nimport PropTypes from \"prop-types\";\r\n\r\nimport Button from \"@mui/material/Button\";\r\nimport ChevronLeftIcon from \"@mui/icons-material/ChevronLeft\";\r\n\r\nconst GroheCartBackButton = (props) => {\r\n const {backButtonClick} = props;\r\n return (\r\n \r\n )\r\n};\r\n\r\nGroheCartBackButton.propTypes = {\r\n backButtonClick: PropTypes.func.isRequired\r\n}\r\n\r\nexport default GroheCartBackButton\r\n","import React, {Fragment} from 'react';\r\nimport { connect } from \"react-redux\";\r\nimport invert from \"lodash/invert\";\r\n\r\nimport {loaderEnable} from \"../ui/loaderView\";\r\nimport {\r\n toggleUserPopup, setCanvasId, setLayoutDataParts, setDefaultSelectionGroup, loadFilters, setCameFromPage,\r\n toggleBathroomVisualizerOpen, toggleSelectionFeatureInfo, changeMessageBoxState, addVisualizersLoaded\r\n} from \"../../actions/actionFunctions\";\r\n// import './assets/css/styles.css';\r\nimport {\r\n getBathroomVisualizerData,\r\n getBvGroups,\r\n getQtCategories,\r\n getNavigationButtons\r\n} from \"../../api/server-api\";\r\nimport ImageCanvasCommon from \"../visComponents/imageCanvasCommon\";\r\nimport {Layout} from \"./core/layout\";\r\nimport DesktopNavigation from \"./navigation/desktopNavigation\";\r\nimport MobileNavigation from \"./navigation/mobileNavigation\";\r\n// import MobileRotateButton from './common/mobileRotateButton';\r\nimport MainButtons from \"../common/mainButtons\";\r\nimport DemoPoints from \"../common/demoPoints/demoPoints\";\r\nimport MessageBox from \"../popups/messageBox\";\r\n\r\nimport Visualizer from \"../visComponents/visualizer\";\r\nimport VisualizerTutorial from \"../tutorials/visualizerTutorial\";\r\nimport {LayoutType} from \"./core/constants\";\r\nimport {showVisualizerTutorial} from \"../../actions/tutorialFunctions\";\r\nimport Copyright from \"../ui/copyright\";\r\nimport {IS_QKB_UI} from \"../../config\";\r\n\r\nexport const layout = new Layout();\r\n\r\nclass BathroomVisualizer extends Visualizer {\r\n\r\n static displayName = 'BathRoom visualizer';\r\n\r\n constructor(props) {\r\n super(props);\r\n this.layout = layout;\r\n }\r\n\r\n componentDidMount() {\r\n if (this.props.visualizersLoaded.includes(this.layout.visualizerType)) {\r\n this.setSubscribers();\r\n return false\r\n }\r\n loaderEnable();\r\n Promise.all([\r\n getBathroomVisualizerData(),\r\n getQtCategories(this.layout.getCurrentLayoutAbbreviation())\r\n ]).then(baseResponse => {\r\n Promise.all([\r\n Promise.resolve(baseResponse[0]),\r\n getBvGroups(),\r\n Promise.resolve(baseResponse[1])\r\n ])\r\n .then((allResponse) => {\r\n const mainResponse = allResponse[0];\r\n const bvGroupsResponse = allResponse[1].data;\r\n const qtCategories = allResponse[2];\r\n this.layout.loadNewFeatures(mainResponse); // 1) set default (placeholders)\r\n this.layout.setGroupsItemsCount(bvGroupsResponse); // should be loaded before & after all features are received\r\n return this.setVisualizerInfo(mainResponse, bvGroupsResponse, qtCategories, invert(LayoutType));\r\n })\r\n .then(this.checkShareUrl)\r\n .then(this.onBvLoad)\r\n .then(this.finishLoading);\r\n });\r\n\r\n this.setSubscribers();\r\n getNavigationButtons();\r\n }\r\n\r\n render() {\r\n\r\n if (!IS_QKB_UI) {\r\n return null\r\n }\r\n\r\n const showPlaceHolders = document.bvConfig ? document.bvConfig.showPlaceholders : false;\r\n const fabricatorSettings = this.props.fabricatorSettings;\r\n const layers = this.layout.getLayers(showPlaceHolders);\r\n const layoutType = this.layout.getCurrentLayoutName();\r\n const isMobile = this.props.windowWidth < 991;\r\n const showOtherLayouts =\r\n (document.kvConfig.visualizerType === \"Bathroom\" || document.kvConfig.visualizerType === \"BV\")\r\n ? fabricatorSettings && (fabricatorSettings.showSmallDesignForClients\r\n || (fabricatorSettings.showSmallDesignFromDashboard && document.kvConfig.isBackend))\r\n : true;\r\n const showTutorial = this.checkToShowTutorial() && showOtherLayouts;\r\n\r\n return (\r\n \r\n {hideTitle ? null : (\r\n
\r\n \r\n {isLixil\r\n ?
\r\n )}\r\n \r\n {\r\n handleInputChange({target: {value: groheActiveFeatureQuantity - 1}}, \"minus\")\r\n }}\r\n disabled={disabled}\r\n className={\"look-icon grohe-look__icon--small\"\r\n + (isMobile || !IS_PRODUCT_JOURNEY ? \" look-icon--tiny look-icon--semi\" : \" look-icon--small\")}>\r\n \r\n \r\n {\r\n handleInputChange({target: {value: groheActiveFeatureQuantity + 1}}, \"plus\")\r\n }}\r\n disabled={disabled}\r\n className={\"look-icon grohe-look__icon--small\"\r\n + (isMobile || !IS_PRODUCT_JOURNEY ? \" look-icon--tiny look-icon--semi\" : \" look-icon--small\")}>\r\n \r\n
\r\n \r\n this.navBar = node}\r\n refreshCB={this.handleRefresh}\r\n setHoveredLayer={this.setHoveredLayer}\r\n canvasId={this.state.canvasId}\r\n renderGreenLayerByZindex={this.renderGreenLayerByZindex}\r\n toggleUserPopup={this.props.toggleUserPopup}\r\n changeMessageBoxState={this.changeMessageBoxState}\r\n setActiveFeature={this.setActiveFeature}\r\n activeFeature={this.state.activeFeature}\r\n fabricatorSettings={fabricatorSettings}\r\n setDemoPointClicked={this.setDemoPointClicked}\r\n />\r\n )\r\n ) : null}\r\n {/* : null}\r\n {showTutorial ? : null}\r\n
\r\n )\r\n }\r\n}\r\nconst mapStateToProps = (store) => {\r\n const {cookieAccepted, windowWidth, visualizersLoaded} = store.serverState;\r\n const {bvOpened, bvVisited, canvasId, showRestorePopup, canvasDimensions, canvasCount} = store.bathroomVisualizerState;\r\n const {mobileNav, desktopNavigationOpened, activeNavigationParentName, activeNavigationChildName} = store.navigationState;\r\n const {isPhoneNumberValidated, userIsLoggedIn} = store.userState;\r\n const {visualizerTutorialIsOpened, visualizerTutorialFinished} = store.tutorialState;\r\n const {initialFlowRoomLayout, initialFlowRoom, initialFlowStep} = store.initialFlowState;\r\n return {\r\n bvOpened,\r\n bvVisited,\r\n mobileNav,\r\n isPhoneNumberValidated,\r\n userIsLoggedIn,\r\n windowWidth,\r\n canvasId,\r\n fabricatorSettings: store.fabricatorState.settings,\r\n desktopNavigationOpened,\r\n activeNavigationParentName,\r\n activeNavigationChildName,\r\n showRestorePopup,\r\n visualizerTutorialIsOpened,\r\n visualizerTutorialFinished,\r\n initialFlowRoomLayout,\r\n initialFlowRoom,\r\n initialFlowStep,\r\n cookieAccepted,\r\n canvasDimensions,\r\n visualizersLoaded,\r\n canvasCount,\r\n };\r\n};\r\n\r\nexport default connect(mapStateToProps, {\r\n setCameFromPage,\r\n toggleBathroomVisualizerOpen,\r\n setDefaultSelectionGroup,\r\n setLayoutDataParts,\r\n toggleUserPopup,\r\n setCanvasId,\r\n loadFilters,\r\n toggleSelectionFeatureInfo,\r\n changeMessageBoxState,\r\n addVisualizersLoaded,\r\n showVisualizerTutorial\r\n})(BathroomVisualizer);\r\n","import React from \"react\";\r\nimport {Page, Text, Document} from '@react-pdf/renderer';\r\nimport PropTypes from \"prop-types\";\r\n\r\nimport getPrintColors from \"./printDocumentStyles\";\r\nimport PrintDocumentHeader from \"./printDocumentHeader\";\r\nimport PrintDocumentInfo from \"./printDocumentInfo\";\r\nimport PrintDocumentBody from \"./printDocumentBody\";\r\nimport PrintDocumentTotal from \"./printDocumentTotal\";\r\nimport PrintDocumentSignature from \"./printDocumentSignature\";\r\nimport PrintDocumentDiscountsList from \"./printDocumentDiscountsList\";\r\nimport {PrintDocumentContext} from \"./printDocumentContext\";\r\nimport {TRANSLATES} from \"../../../translatesProvider\";\r\nimport PrintDocumentDisclaimer from \"./printDocumentDisclaimer\";\r\nimport PrintDocumentAsCentralText from \"./printDocumentAsCentralText\";\r\n\r\n// import PropTypes from \"prop-types\";\r\n// import {FormattedMessage} from \"react-intl\";\r\n\r\nconst PrintDocument = (props) => {\r\n const {fabricatorData, userInfo, quotes, cartItems, priceWorksheetState, jobId, assignQuotePopupCustomer,\r\n employeeSelected, locale, filterGroups, activeTheme, printLogo, wizardState, sqftSlabState, cartItemsThumbnails,\r\n printState, onRender, isContractSign} = props;\r\n\r\n const styles = getPrintColors(activeTheme);\r\n\r\n return (\r\n \r\n {this.props.bvOpened || this.props.bvVisited ? (\r\n \r\n this.imageCanvas = node}\r\n layoutType={layoutType}\r\n layout={this.layout}\r\n width={this.props.canvasDimensions.width}\r\n height={this.props.canvasDimensions.height}\r\n useMouseHovering={this.props.useMouseHovering}\r\n useTouchZoom={this.props.useTouchZoom}\r\n />\r\n \r\n ) : null}\r\n \r\n ) : null}\r\n
\r\n {(this.layout.initialized && this.props.bvVisited) ? ( // keep navigation opened if someone got to QT and back\r\n isMobile ? (\r\n \r\n \r\n
\r\n )\r\n};\r\nexport default MaterialsWizardDoneCheckMark\r\n","import _ from 'lodash';\r\n\r\nimport {updateManualCalculateRows} from \"../../../actions/sqftManualCalculationFunctions\";\r\nimport {MANUAL_CALCULATION_ROW_TYPES} from \"../constants\";\r\nimport store from \"../../../store\";\r\nimport {DEFAULT_MANUAL_CALC_ROW} from \"../../../reducers/sqftManualCalculationReducer\";\r\nimport {getEdgeFeatures} from \"./shapeHelper\";\r\nimport workspace from \"../components/canvas/core/workspace\";\r\n\r\nexport const manualCalculateImport = (data) => {\r\n console.log(\"import manualcalc data\", data);\r\n let manualCalculationRows = prepareData(data);\r\n store.dispatch(updateManualCalculateRows(manualCalculationRows));\r\n}\r\n\r\nconst prepareData = (data) => {\r\n return {\r\n [MANUAL_CALCULATION_ROW_TYPES.countertopRows] : prepareCountertopRows(data.countertops),\r\n [MANUAL_CALCULATION_ROW_TYPES.backsplashRows] : prepareBacksplashRows(data.backsplashes),\r\n [MANUAL_CALCULATION_ROW_TYPES.edgeRows] : prepareEdgeRows(data.edges),\r\n }\r\n}\r\n\r\nconst prepareCountertopRows = (dataCountertops) => {\r\n let preparedData = [];\r\n dataCountertops.forEach((dataCountertop, index) => {\r\n let row = _.clone(DEFAULT_MANUAL_CALC_ROW);\r\n row.id = dataCountertop.id ? dataCountertop.id : index;\r\n row.length = dataCountertop.inputLength;\r\n row.width = dataCountertop.inputWidth;\r\n preparedData.push(row);\r\n })\r\n\r\n return preparedData;\r\n}\r\n\r\nconst prepareBacksplashRows = (dataBacksplashes) => {\r\n let preparedData = [];\r\n dataBacksplashes.forEach((dataBacksplash, index) => {\r\n let row = _.clone(DEFAULT_MANUAL_CALC_ROW);\r\n row.id = dataBacksplash.id ? dataBacksplash.id : index;\r\n row.length = dataBacksplash.inputLength;\r\n row.height = dataBacksplash.inputHeight;\r\n preparedData.push(row);\r\n })\r\n\r\n return preparedData;\r\n}\r\n\r\nconst prepareEdgeRows = (dataEdges) => {\r\n let preparedData = [];\r\n dataEdges.forEach((dataEdge, index) => {\r\n const navItems = getEdgeFeatures();\r\n const navItem = navItems.find(edge => edge.part.dbFeature.id === dataEdge.featureId);\r\n let row = _.clone(DEFAULT_MANUAL_CALC_ROW);\r\n row.id = dataEdge.id ? dataEdge.id : index;\r\n row.length = dataEdge.inputLength;\r\n row.height = dataEdge.inputHeight;\r\n row.selectedFeature = navItem.part;\r\n preparedData.push(row);\r\n })\r\n\r\n return preparedData;\r\n}\r\n\r\nexport const clearManualCalcData = () => {\r\n for (const manualCalculationRowType in MANUAL_CALCULATION_ROW_TYPES) {\r\n store.dispatch(updateManualCalculateRows({[manualCalculationRowType]: []}));\r\n }\r\n}\r\n\r\nexport const getGroupedShapesByColor = () => {\r\n const shapes = workspace.getShapes();\r\n return shapes.flatMap(shp => {\r\n if (shp.getColorSet) {\r\n const colorSet = shp.getColorSet();\r\n return colorSet ? colorSet : [];\r\n }\r\n return [];\r\n })\r\n}\r\n\r\nexport const getFeatureGlb = (feature) => {\r\n const threeDSrc = feature.dbFeature.thirdPartyAR3DUrls.map(src => {\r\n src = src.replace(\"s3.amazonaws.com/qc-lixil-3dfiles\", \"dv84u4f1bblk2.cloudfront.net\");\r\n return src\r\n })\r\n return threeDSrc.find(url => url.includes(\".glb\"));\r\n}\r\n","import store from \"./../../../store\";\r\nimport {onMeasureUnitChange} from \"./sqftMeasureUnitsHelper\";\r\nimport sqftConfig from \"../components/canvas/store/sqftConfig\";\r\nimport {setSqftMeasureUnit} from \"../../../actions/sqftFunctions\";\r\n\r\nexport const setMeasureUnit = (value) => {\r\n sqftConfig.measureUnit = value\r\n store.dispatch(setSqftMeasureUnit(value));\r\n onMeasureUnitChange();\r\n}\r\n","import sqftShapeManager from \"../store/sqftShapeManager\";\r\nimport workspace from \"./workspace\";\r\nimport config from \"../store/sqftConfig\";\r\nimport $ from \"jquery\";\r\nimport sqftShape from \"./shapes/sqftShape\";\r\nimport {getMidPoint} from \"../../../helpers/sqftHelper\";\r\nimport slabWorkspace from \"./slab/slabWorkspace\";\r\n\r\nconst workspaceZoom = function () {\r\n this.zoomToFeature = (sqftFeature) => {\r\n let shape = sqftShapeManager.getShapeById(sqftFeature.sqftId);\r\n if (shape && shape.part === 'line') {\r\n const line = workspace.getLineById(shape.attachedToId);\r\n this.zoomToLine(line);\r\n\r\n return;\r\n }\r\n\r\n if (!(shape instanceof(sqftShape))) {\r\n return\r\n }\r\n\r\n this.zoomToShape(shape);\r\n }\r\n\r\n this.zoomToLine = (line) => {\r\n let shape = line.getParent();\r\n let shapePos = shape.getPosition();\r\n const scale = config.scale;\r\n const canvas = workspace.getCanvas();\r\n const sqftPoup = $(\".sqft-popupv2\");\r\n const popUpWidth = sqftPoup[0] ? sqftPoup[0].offsetWidth : 0;\r\n\r\n const midPoint = getMidPoint(line.from, line.to);\r\n\r\n let newWorkspacePos = {\r\n x: (shapePos.x + midPoint.x) * scale - (canvas.width - popUpWidth) / 2,\r\n y: (shapePos.y + midPoint.y) * scale - canvas.height / 2,\r\n }\r\n\r\n line.blink.setHighlighting(true);\r\n this.zoomTo(newWorkspacePos);\r\n }\r\n\r\n this.zoomToShape = (shape, isHalfScreen = false) => {\r\n let shapePos = shape.getPosition();\r\n let shapeMinMax = sqftShapeManager.getMinMax(shape.getLines());\r\n const scale = config.scale;\r\n const canvas = workspace.getCanvas();\r\n const sqftPoup = $(\".sqft-popupv2\");\r\n const popUpWidth = sqftPoup[0] ? sqftPoup[0].offsetWidth : 0;\r\n\r\n let newWorkspacePos = {\r\n x: shapePos.x * scale - (canvas.width - popUpWidth) / 2 + shapeMinMax.width / 2 * scale,\r\n y: shapePos.y * scale - canvas.height / 2 + shapeMinMax.height / 2 * scale,\r\n }\r\n if (isHalfScreen) {\r\n newWorkspacePos.x = newWorkspacePos.x + canvas.width / 4;\r\n }\r\n\r\n this.zoomTo(newWorkspacePos);\r\n shape.shapeRender.blink.setHighlighting(true);\r\n }\r\n\r\n this.zoomToSlabShape = (shape, isHalfScreen = false) => {\r\n let shapePos = shape.getPosition();\r\n let workspacePos = workspace.getPosition();\r\n let shapeMinMax = sqftShapeManager.getMinMax(shape.getLines());\r\n const scale = config.scale;\r\n const canvas = workspace.getCanvas();\r\n const sqftPoup = $(\".sqft-popupv2\");\r\n const popUpWidth = sqftPoup[0] ? sqftPoup[0].offsetWidth : 0;\r\n\r\n let newWorkspacePos = {\r\n x: shapePos.x * scale - (canvas.width - popUpWidth) / 2 + shapeMinMax.width / 2 * scale - workspacePos.x,\r\n y: shapePos.y * scale - canvas.height / 2 + shapeMinMax.height / 2 * scale - workspacePos.y,\r\n }\r\n if (isHalfScreen) {\r\n newWorkspacePos.x = newWorkspacePos.x + canvas.width / 4;\r\n }\r\n\r\n this.zoomToInSlab(newWorkspacePos);\r\n }\r\n\r\n this.zoomTo = (newWorkspacePos) => {\r\n let workspacePos = workspace.getPosition();\r\n let isXIncrementUp = newWorkspacePos.x >= workspacePos.x;\r\n let isYIncrementUp = newWorkspacePos.y >= workspacePos.y;\r\n\r\n let updateWorkspacePos = () => {\r\n if (Math.ceil(workspacePos.x) === Math.ceil(newWorkspacePos.x)\r\n && Math.ceil( workspacePos.y) === Math.ceil(newWorkspacePos.y)\r\n ) {\r\n clearInterval(refreshIntervalId);\r\n }\r\n\r\n let incrementX = Math.abs((Math.abs(newWorkspacePos.x) + Math.abs(workspacePos.x)) / newWorkspacePos.x * config.zoomSpeed);\r\n let incrementY = Math.abs((Math.abs(newWorkspacePos.y) + Math.abs(workspacePos.y)) / newWorkspacePos.y * config.zoomSpeed);\r\n\r\n workspacePos = {\r\n x: isXIncrementUp\r\n ? workspacePos.x >= newWorkspacePos.x ? newWorkspacePos.x : workspacePos.x + incrementX\r\n : workspacePos.x <= newWorkspacePos.x ? newWorkspacePos.x : workspacePos.x - incrementX,\r\n y: isYIncrementUp\r\n ? workspacePos.y >= newWorkspacePos.y ? newWorkspacePos.y : workspacePos.y + incrementY\r\n : workspacePos.y <= newWorkspacePos.y ? newWorkspacePos.y : workspacePos.y - incrementY,\r\n }\r\n\r\n workspace.setPosition(workspacePos);\r\n };\r\n let refreshIntervalId = setInterval(updateWorkspacePos, 1);\r\n }\r\n\r\n this.zoomToInSlab = (newWorkspacePos) => {\r\n let workspacePos = slabWorkspace.getPos();\r\n let isXIncrementUp = newWorkspacePos.x >= workspacePos.x;\r\n let isYIncrementUp = newWorkspacePos.y >= workspacePos.y;\r\n\r\n let updateWorkspacePos = () => {\r\n if (Math.ceil(workspacePos.x) === Math.ceil(newWorkspacePos.x)\r\n && Math.ceil( workspacePos.y) === Math.ceil(newWorkspacePos.y)\r\n ) {\r\n clearInterval(refreshIntervalId);\r\n }\r\n\r\n let incrementX = Math.abs((Math.abs(newWorkspacePos.x) + Math.abs(workspacePos.x)) / newWorkspacePos.x * config.zoomSpeed);\r\n let incrementY = Math.abs((Math.abs(newWorkspacePos.y) + Math.abs(workspacePos.y)) / newWorkspacePos.y * config.zoomSpeed);\r\n\r\n workspacePos = {\r\n x: isXIncrementUp\r\n ? workspacePos.x >= newWorkspacePos.x ? newWorkspacePos.x : workspacePos.x + incrementX\r\n : workspacePos.x <= newWorkspacePos.x ? newWorkspacePos.x : workspacePos.x - incrementX,\r\n y: isYIncrementUp\r\n ? workspacePos.y >= newWorkspacePos.y ? newWorkspacePos.y : workspacePos.y + incrementY\r\n : workspacePos.y <= newWorkspacePos.y ? newWorkspacePos.y : workspacePos.y - incrementY,\r\n }\r\n\r\n slabWorkspace.setPos(workspacePos);\r\n };\r\n let refreshIntervalId = setInterval(updateWorkspacePos, 1);\r\n }\r\n};\r\n\r\nexport default new workspaceZoom\r\n","import eventManager from \"../../store/sqftEventManager\";\r\nimport Config from \"../../store/sqftConfig\";\r\nimport workspace from \"../workspace\";\r\nimport Cursor from \"./cursor\";\r\nimport MiteredOverlay from \"../shapes/overlays/mitered\";\r\nimport {\r\n inchesToMm,\r\n measureDistanceToInches, mm2ToM2,\r\n mmToInches, sqInchesToSqFoot,\r\n} from \"../../../../helpers/sqftHelper\";\r\nimport {iconPlusBlue} from \"../../../../assetsSQFT\";\r\nimport store from \"../../../../../../store\";\r\nimport {updateSQFTCalculations} from \"../../../../../../actions/sqftFunctions\";\r\nimport {\r\n EDGE_LABELS, MITERED_OVERLAY_TYPE,\r\n RESOURCE_ATTACHED_TO_TYPE, RESOURCE_TYPE,\r\n SIDEBAR_BUTTONS_MENU,\r\n SIDEBAR_HIDDEN_BUTTONS,\r\n} from \"../../../../constants\";\r\nimport {setSQFTMenuOpened, setSQFTMenuOpenedLock} from \"../../../../../../actions/sqftMenuFunctions\";\r\nimport {attachResource} from \"./resourseCanas\";\r\nimport {getEdgeFeatures} from \"../../../../helpers/shapeHelper\";\r\nimport {addResource, changeResource, deleteResource} from \"../../../../../../actions/sqftResourceFunctions\";\r\nimport {getUnderlaymentFeature} from \"../../../../helpers/sqftHelperUi\";\r\nimport sqftConfig from \"../../store/sqftConfig\";\r\n\r\nexport default class UnderlaymentController {\r\n cursor;\r\n design = {\r\n imgSrc: iconPlusBlue\r\n };\r\n miteredSections = [];\r\n\r\n createCursor = () => {\r\n this.cursor = new Cursor();\r\n this.cursor.setCursorImage(this.design.imgSrc);\r\n eventManager.setCursor('mitered-select', this, true);\r\n };\r\n\r\n registerEvents = () => {\r\n eventManager.addEvent(\r\n eventManager.events.MOUSE_UP,\r\n this.onMouseUp,\r\n this,\r\n eventManager.priorities.OVERALL\r\n );\r\n };\r\n\r\n onMouseUp = (mousePos) => {\r\n void mousePos;\r\n let hoverShape = workspace.getHoverShape();\r\n\r\n if (hoverShape && hoverShape.getHoverSegment) {\r\n const reduxState = store.getState();\r\n const activeButton = reduxState.sqftMenuState.activeButton;\r\n if (activeButton !== SIDEBAR_HIDDEN_BUTTONS.toolUnderlayment) {\r\n return\r\n }\r\n\r\n let seg = hoverShape.getHoverSegment();\r\n if (seg && seg.isWithUnderlayment() && reduxState.sqftMenuState.activeButton === SIDEBAR_BUTTONS_MENU.delete) {\r\n seg.deleteMitered();\r\n } else if(seg && seg.isWithUnderlayment()) {\r\n void 0;\r\n } else if (seg && !seg.isWithUnderlayment() && !seg.isWithBumpout() && this.cursor.cursorImage) {\r\n attachResource(seg, null, RESOURCE_ATTACHED_TO_TYPE.underlayment, null, null,'', 0, null, null, false);\r\n } else {\r\n // Menu.openMenu();\r\n // deregisterEvents();\r\n // elements.designDefault.click();\r\n }\r\n }\r\n\r\n //todo\r\n this.cursor.checkForRestoreCursor();\r\n };\r\n\r\n addSection = (miteredSection) => {\r\n const reduxState = store.getState();\r\n store.dispatch(addResource(RESOURCE_TYPE.underlaymentSections, miteredSection));\r\n store.dispatch(setSQFTMenuOpened(SIDEBAR_HIDDEN_BUTTONS.toolUnderlayment));\r\n const updateCalculations = reduxState.sqftState.updateCalculations;\r\n store.dispatch(updateSQFTCalculations(updateCalculations + 1));\r\n };\r\n\r\n updateSection = (miteredSection) => {\r\n store.dispatch(changeResource(RESOURCE_TYPE.underlaymentSections, miteredSection));\r\n store.dispatch(setSQFTMenuOpened(SIDEBAR_HIDDEN_BUTTONS.toolUnderlayment));\r\n store.dispatch(setSQFTMenuOpenedLock(true));\r\n\r\n const reduxState = store.getState();\r\n const updateCalculations = reduxState.sqftState.updateCalculations;\r\n store.dispatch(updateSQFTCalculations(updateCalculations + 1));\r\n }\r\n\r\n deleteSection = (miteredOverlay) => {\r\n store.dispatch(deleteResource(RESOURCE_TYPE.underlaymentSections, miteredOverlay.id));\r\n };\r\n\r\n createUnderlaymentOverlay = (line) => {\r\n const reduxState = store.getState();\r\n const underlaymentSections = reduxState.sqftResourceState.underlaymentSections;\r\n const underlaymentOverlay = new MiteredOverlay(line, underlaymentSections.length + 1, MITERED_OVERLAY_TYPE.underlayment);\r\n const feature = getUnderlaymentFeature();\r\n if (feature) {\r\n underlaymentOverlay.setFeatureId(feature.part.dbFeature.id)\r\n }\r\n\r\n return underlaymentOverlay\r\n };\r\n\r\n destroy = (protect, revertBackAfterMouseUp) => {\r\n if (revertBackAfterMouseUp) {\r\n eventManager.removeEvent(self, eventManager.events.RENDER); //remove render only, but wait for mouse up to set cursor again\r\n this.isWaitingToRestoreCursor = true;\r\n } else {\r\n this.deregisterEvents();\r\n }\r\n //this.hide();\r\n };\r\n\r\n deregisterEvents() {\r\n eventManager.resetCursor(this);\r\n eventManager.removeEvent(this);\r\n this.cursor ? this.cursor.deregisterEvents() : null;\r\n Config.highlight.lines = false;\r\n }\r\n\r\n static getTotalArea = () => {\r\n let miteredSections = workspace.getMiteredSections();\r\n let miteredSectionsArea = 0;\r\n for (let i = 0; i < miteredSections.length; i++) {\r\n miteredSectionsArea += miteredSections[i] ? miteredSections[i].getMiteredToolTotalArea() : null;\r\n }\r\n\r\n return miteredSectionsArea;\r\n };\r\n\r\n onMeasureUnitChange = () => {\r\n let miteredSections = workspace.getMiteredSections();\r\n let miteredSectionsArea = 0;\r\n for (let i = 0; i < miteredSections.length; i++) {\r\n let segments = miteredSections[i].getSegments();\r\n\r\n segments.map((segment) => {\r\n segment.height = Config.measureUnit === \"Metric\"\r\n ? inchesToMm(segment.height)\r\n : mmToInches(segment.height);\r\n if (segment.thickness) {\r\n segment.thickness.value = Config.measureUnit === \"Metric\"\r\n ? inchesToMm(segment.thickness.value)\r\n : mmToInches(segment.thickness.value)\r\n }\r\n });\r\n\r\n miteredSections[i].heightNumberText.value = segments[0].height\r\n }\r\n\r\n return miteredSectionsArea;\r\n };\r\n\r\n getTransformedMeasureUnit = (value) => {\r\n return Config.measureUnit === \"Metric\"\r\n ? measureDistanceToInches(value).millimeters // ? distanceToMillimeters(inchesToMm(segment.length.value))\r\n : value;\r\n };\r\n\r\n getEdgesLength = () => {\r\n let additionalLength = 0;\r\n const lines = workspace.getLines();\r\n for (const line of lines) {\r\n if (line.from.getMiteredFeatureId()) {\r\n additionalLength += this.getEdgeLengthValue();\r\n }\r\n }\r\n\r\n return additionalLength\r\n }\r\n\r\n getEdgeLengthValue = () => {\r\n return Config.measureUnit === \"Imperial\"\r\n ? (2 * 33) / 40\r\n : (2 * 900) / 1000;\r\n }\r\n\r\n getExportedMiteredEdges = () => {\r\n let addedEdges = [];\r\n const lines = workspace.getLines();\r\n for (const line of lines) {\r\n const miteredFeatureId = line.from.getMiteredFeatureId();\r\n if (miteredFeatureId) {\r\n const edgeLengthValue = this.getEdgeLengthValue();\r\n const navItems = getEdgeFeatures();\r\n let edgeFeature = navItems.find(edge => edge.part.dbFeature.id === miteredFeatureId);\r\n\r\n addedEdges.push({\r\n partId: EDGE_LABELS.edge,\r\n type: EDGE_LABELS.edge,\r\n name: workspace.intl.formatMessage({id: edgeFeature.part.dbFeature.sharedFeatureName}),\r\n featureId: miteredFeatureId,\r\n segments: 1,\r\n length: edgeLengthValue,\r\n area: edgeLengthValue\r\n });\r\n }\r\n }\r\n\r\n return addedEdges\r\n }\r\n\r\n exportData = () => {\r\n const reduxState = store.getState();\r\n const underlaymentSections = reduxState.sqftResourceState.underlaymentSections;\r\n\r\n //return {quantity: underlaymentSections.reduce((acc, current) => acc + current.getMiteredToolTotalArea(), 0)};\r\n return {sections: underlaymentSections.map((section) => ({\r\n id: section.id,\r\n qtCatName: section.qtCatName,\r\n featureId: section.featureId,\r\n quantity: sqftConfig.measureUnit === \"Imperial\"\r\n ? Math.ceil10(sqInchesToSqFoot(section.getMiteredToolTotalArea()), -2)\r\n : mm2ToM2(section.getMiteredToolTotalArea())\r\n }))\r\n };\r\n }\r\n}\r\n","import {capitalizeFirstLetters} from \"../../misc/helpers\";\r\nimport {getSelectedFiltersLength} from \"../../misc/filtersFunctions\";\r\n\r\nconst changeMaterialToColorArray = [\"vanity_faucet\", \"paper_holder\", \"robe_hook\", \"towel_bar\", \"towel_ring\",\r\n \"bathtub_body\", \"vanity_console\", \"replacement_tub\", \"bathtub_fixture\", \"vanity_ptrap\", \"vanity_legs\", \"vanity_middle\",\r\n \"toilet\", \"vanity_ws_towel_bar\", \"vanity_washstand\", \"vanity_cabinet\"];\r\n\r\n/**\r\n * updated Names per Lixil requirements\r\n * @param filterGroup {filterGroupInterface}\r\n * @param partId {string}\r\n * @returns {string|null}\r\n */\r\nexport const getHardCodedFilterGroupName = (filterGroup, partId = \"\") => {\r\n switch (filterGroup.name) {\r\n case \"Material\": {\r\n if (changeMaterialToColorArray.includes(partId)) {\r\n return \"Color\"\r\n }\r\n break;\r\n }\r\n case \"GPF_Max\": {\r\n return \"GPF\"\r\n }\r\n case \"LixilProductSubCategory\": {\r\n switch (partId) {\r\n case \"vanity_faucet\":\r\n case \"bathtub_fixture\":\r\n return \"Faucet Type\"\r\n default:\r\n break;\r\n }\r\n }\r\n }\r\n return (filterGroup.name || \"\").replace(/_/gi, \" \")\r\n}\r\n\r\n/**\r\n * filters hardcode LX-827 - LX-839 tasks in Jira\r\n * @param filterGroup {filterGroupInterface}\r\n * @param partId {string}\r\n * @returns {boolean}\r\n */\r\nexport const weShouldHideFilterGroup = (filterGroup, partId) => {\r\n switch ((filterGroup.name || \"\").trim()) {\r\n case \"Product_Width\":\r\n case \"LixilProductCategory\":\r\n case \"LixilProductSuperCategory\":\r\n case \"Bath_Accessory_Mount_Type\":\r\n case \"Designer Recommended\":\r\n case \"EA_Each_Weight\":\r\n case \"Small_Parcel_Postable_SAP_YN\":\r\n case \"Volume_SAP\":\r\n case \"Bath_Accessory_No_of_Hooks\":\r\n case \"Bath_Accessory_No_of_Bars\":\r\n case \"Fitting_Mount_Type\":\r\n case \"Fitting_Handle_Type\":\r\n case \"ADA_YN\":\r\n case \"Fitting_Touchless_Touch_On\":\r\n case \"Product_Height\":\r\n case \"Faucet_Type_from_Classification\":\r\n case \"Product_Length\":\r\n case \"Tub_Product_Type\":\r\n case \"Bath_Therapy_Type\":\r\n case \"Drain_Location\":\r\n case \"Hand_Shower_Included_YN\":\r\n case \"Rough_In_Size\":\r\n case \"Toilet_Type_from_Classification\":\r\n case \"Fitting_No_of_Holes_Required\":\r\n return true\r\n case \"Color\": {\r\n return changeMaterialToColorArray.includes(partId);\r\n }\r\n case \"Brand\": {\r\n switch (partId) {\r\n case \"vanity_console\":\r\n case \"vanity_ptrap\":\r\n case \"vanity_cabinet\":\r\n case \"vanity_legs\":\r\n case \"vanity_middle\":\r\n case \"vanity_ws_towel_bar\":\r\n case \"vanity_washstand\":\r\n return true\r\n default:\r\n return false\r\n }\r\n }\r\n case \"Collection\": {\r\n switch (partId) {\r\n case \"vanity_ptrap\":\r\n case \"vanity_legs\":\r\n case \"vanity_middle\":\r\n return true\r\n default:\r\n return false\r\n }\r\n }\r\n case \"Size\":\r\n case \"Manufacturer\": {\r\n switch (partId) {\r\n case \"vanity_cabinet\":\r\n return true\r\n default:\r\n return false\r\n }\r\n }\r\n case \"LixilProductSubCategory\": {\r\n switch (partId) {\r\n case \"vanity_faucet\":\r\n case \"bathtub_fixture\":\r\n return false\r\n default:\r\n return true\r\n }\r\n }\r\n default:\r\n return false\r\n }\r\n}\r\n\r\n/**\r\n * filters hardcode LX-827 - LX-839 tasks in Jira\r\n * @param filterValue {filterValueInterface}\r\n * @returns {boolean}\r\n */\r\nexport const weShouldHideFilterValue = (filterValue) => {\r\n // console.log(\"filterValue\", filterValue);\r\n return (filterValue.id === 10446 && filterValue.value === \"Town Square® S\")\r\n || (filterValue.id === 10415 && filterValue.value === \"Cadet®\")\r\n || (filterValue.id === 10445 && filterValue.value === \"Princeton™\")\r\n || (filterValue.id === 10448 && filterValue.value === \"Colony®\")\r\n || (filterValue.id === 10416 && filterValue.value === \"Eurocube®\")\r\n || (filterValue.id === 10410 && filterValue.value === \"Concetto™\")\r\n || (filterValue.id === 9950 && filterValue.value === \"LINEARE™\")\r\n}\r\n\r\n/**\r\n * filters hardcode LX-827 - LX-839 tasks in Jira\r\n * @param filterGroups {[filterGroupInterface]}\r\n * @param partId {string}\r\n * @param selectedFilters {array}\r\n * @returns {[filterGroupInterface]}\r\n */\r\nexport const getHardCodedFilterGroups = (filterGroups, partId, selectedFilters) => {\r\n return filterGroups\r\n .filter(filterGroup => !weShouldHideFilterGroup(filterGroup, partId))\r\n .map(filterGroup => {\r\n const selectedFiltersLength = getSelectedFiltersLength(filterGroup, selectedFilters);\r\n const filterGroupName = getHardCodedFilterGroupName(filterGroup, partId);\r\n filterGroup.values = filterGroup.values.sort((a, b) => a.id - b.id);\r\n return Object.assign({}, filterGroup, {filterGroupName, selectedFiltersLength})\r\n })\r\n .sort((a, b) => a.id - b.id);\r\n}\r\n\r\n\r\n/**\r\n * updated Names per Lixil requirements\r\n * @param filterValue {filterValueInterface}\r\n * @returns {string}\r\n */\r\nexport const getFixedFilterValueName = (filterValue) => {\r\n switch (filterValue.value) {\r\n // case \"StarLight Chrome\":\r\n // case \"Starlight Chrome\":\r\n // case \"Starlight chrome\":\r\n // return window.location.href.includes(\"grohe\") ? \"Starlight Chrome\" : \"Polished Chrome\"\r\n case \"Grohe\":\r\n case \"grohe\":\r\n return \"GROHE\"\r\n case \"Centerset Bathroom Faucets\":\r\n return \"Centerset\"\r\n case \"Single Hole Bathroom Faucets\":\r\n return \"Single Hole\"\r\n case \"Widespread Bathroom Faucets\":\r\n return \"Widespread\"\r\n case \"Vessel Bathroom Faucets\":\r\n return \"Vessel\"\r\n default:\r\n return capitalizeFirstLetters(filterValue.displayText || filterValue.value || \"\")\r\n .replace(/_/gi, \" \")\r\n }\r\n}\r\n","import {SHAPE_PART_ID, SQFT_APPLIANCES} from \"../constants\";\r\nimport store from \"../../../store\";\r\nimport workspace from \"../components/canvas/core/workspace\";\r\nimport sqftShape from \"../components/canvas/core/shapes/sqftShape\";\r\nimport {getCurrentLayout} from \"../../appLayout\";\r\nimport MovableImage from \"../components/canvas/core/shapes/movableImage\";\r\nimport {\r\n containsHEBeforeExtension,\r\n findGLBLink,\r\n get3dURLsForFeature, getCategoryFromMetadata, getThirdPartyAR3DMetaData,\r\n getUrlMatchingByColor, isHoodShape,\r\n} from \"./sqft3dArHelper\";\r\n//import {SHAPE_SQUARE_LAYOUTS} from \"../components/canvas/core/cabinet/cabinetShapes\";\r\nimport workspaceControllers from \"../components/canvas/store/workspaceControllers\";\r\nimport sqftShapeManager from \"../components/canvas/store/sqftShapeManager\";\r\nimport {featureThumbnailUrl} from \"../../../misc/helpers\";\r\n\r\nexport const DEFAULT_COUNTERTOP_HEIGHT = 34;\r\nexport const DEFAULT_BACKSPLASH_HEIGHT = 18;\r\n\r\nexport class CabinetsSet {\r\n\r\n static prepareCabinetsSet(displayDoorsOnly = false) {\r\n const cabinetPositions = CabinetsSet.prepareCabinetsPositions();\r\n const countertopPositions = CountertopPositions.prepareCountertopPositions();\r\n const wallPositions = WallPositions.prepareWallPositions();\r\n const cabinetSet = {\r\n \"doors_only\": displayDoorsOnly,\r\n \"positions\": [...cabinetPositions, ...countertopPositions, ...wallPositions]\r\n }\r\n\r\n // add countertop if bottom_cabinets exist\r\n // if (cabinetSet.positions.some(position => position.partId === SHAPE_PART_ID.lower_cabinet_boxes)) {\r\n // let texture = \"https://static6.depositphotos.com/1031174/647/i/450/depositphotos_6477080-stock-photo-grungy-background.jpg\";\r\n // const state = store.getState();\r\n // if (state.sqftState.selectedCountertop) {\r\n // const layout = getCurrentLayout();\r\n // const countertopFeature = layout.getFeatureById(state.sqftState.selectedCountertop, true);\r\n // if (countertopFeature && countertopFeature.dbFeature.thirdPartyAR3DUrls) {\r\n // const URLByFeatureName = get3dURLsForFeature(countertopFeature);\r\n // texture = URLByFeatureName ? URLByFeatureName : countertopFeature.dbFeature.thirdPartyAR3DUrls[0]\r\n // }\r\n // }\r\n //\r\n // cabinetSet.countertop = {\r\n // \"main\": \"https://quotecountertops.com/video/sqft/cabinets/Quarter Round_Main Body.glb\",\r\n // \"edge\": \"https://quotecountertops.com/video/sqft/cabinets/Quarter Round_Edge.glb\",\r\n // \"corner\": \"https://quotecountertops.com/video/sqft/cabinets/Quarter Round_Corner.glb\",\r\n // \"texture\": texture\r\n // }\r\n // }\r\n\r\n return cabinetSet\r\n }\r\n\r\n static prepareCabinetsPositions() {\r\n const layout = getCurrentLayout();\r\n const shapes = workspace.getShapes();\r\n\r\n return shapes.map((shape) => {\r\n if (shape instanceof sqftShape) {\r\n let absolutePos = shape.shapeAbsolute.getAbsolutePosition();\r\n let shapePosition = absolutePos ? absolutePos : shape.getPosition();\r\n\r\n const relatedParentFeature = layout.getFeatureById(shape.relatedParentFeatureId, true);\r\n if (relatedParentFeature) {\r\n let shapeDbFeature = relatedParentFeature.getFeatureRelatedFeatures().find(relatedFeature => relatedFeature.id === shape.featureId);\r\n if (!shapeDbFeature) {\r\n const shapeFeature = layout.getFeatureById(shape.featureId, true);\r\n if (shapeFeature) {\r\n shapeDbFeature = shapeFeature.dbFeature\r\n }\r\n }\r\n return CabinetsSet.prepareRegularCabinetSet(shape, shapePosition, shapeDbFeature, relatedParentFeature);\r\n } else {\r\n console.log(\"3d model cannot be prepared its parent not found shape.relatedParentFeatureId:\", shape.relatedParentFeatureId);\r\n }\r\n } if (shape instanceof MovableImage) {\r\n let absolutePos = shape.shapeAbsolute.getAbsolutePosition();\r\n const shapePosition = absolutePos ? absolutePos : shape.getPosition();\r\n const shapeFeature = layout.getFeatureById(shape.featureId);\r\n\r\n if (shapeFeature) {\r\n return CabinetsSet.prepareImageCabinetSet(shape, shapePosition, shapeFeature);\r\n }\r\n }\r\n return null\r\n }).filter(cabinetSet => {\r\n return cabinetSet !== null\r\n })\r\n }\r\n\r\n /**\r\n * Adjust model position based on shape position, dimensions, and rotation.\r\n * @returns {Object} Updated model position.\r\n * @param shapePosition\r\n * @param shapeWidth\r\n * @param shapeDepth\r\n * @param rotatedDegrees\r\n */\r\n static adjustApplianceModelPosition(shapePosition, shapeWidth, shapeDepth, rotatedDegrees) {\r\n // Convert degrees to radians and account for the model's initial -90 degree rotation offset\r\n const radians = (Math.PI / 180) * (rotatedDegrees - 90);\r\n\r\n // Calculate the center of the shape, used as the base point for rotation\r\n const centerX = shapePosition.x + shapeWidth / 2;\r\n const centerZ = shapePosition.y + shapeDepth / 2;\r\n\r\n // Calculate the offsets for X and Z axes based on the current rotation angle\r\n const offsetX = (shapeWidth / 2) * Math.cos(radians);\r\n const offsetZ = (shapeDepth / 2) * Math.sin(radians);\r\n\r\n // Apply Z-axis correction dynamically based on the sine of the rotation angle\r\n const zCorrection = shapeDepth * Math.sin(radians);\r\n\r\n // Return the updated position of the model\r\n return {\r\n x: centerX - offsetX, // Corrected X position after rotation\r\n y: shapePosition.y, // Y position remains unchanged (fixed height)\r\n z: centerZ - offsetZ + zCorrection // Corrected Z position with dynamic adjustment\r\n };\r\n }\r\n\r\n /**\r\n * This function corrects shape position because shape rotation in sqft is made around shape center\r\n * while baking models script rotates shapes around top left corner, so we need to move shape a bit.\r\n * @param rotatedDegrees\r\n * @param position\r\n * @param width\r\n * @param height\r\n * @return {{x: *, y: *}}\r\n */\r\n static getShapeCorrectedPos = (rotatedDegrees, position, width, height) => {\r\n // get radians\r\n let thetaRad = -(rotatedDegrees * Math.PI / 180);\r\n\r\n // left top corner pos (shape pos)\r\n let xInit = position.x;\r\n let yInit = position.y;\r\n\r\n // shape center after rotation\r\n let xCenterBAfterRotation = xInit + width / 2 * Math.cos(thetaRad) - height / 2 * Math.sin(thetaRad);\r\n let yCenterBAfterRotation = yInit + width / 2 * Math.sin(thetaRad) + height / 2 * Math.cos(thetaRad);\r\n\r\n // initial shape center\r\n let xCenterBInitial = xInit + width / 2;\r\n let yCenterBInitial = yInit + height / 2;\r\n\r\n // shape center - shape center after rotation\r\n let deltaX = xCenterBInitial - xCenterBAfterRotation;\r\n let deltaY = yCenterBInitial - yCenterBAfterRotation;\r\n\r\n return {\r\n x: rotatedDegrees > 0\r\n ? position.x + deltaX\r\n : position.x,\r\n y: rotatedDegrees > 0\r\n ? position.y + deltaY\r\n : position.y\r\n }\r\n }\r\n\r\n static prepareRegularCabinetSet = (shape, shapePosition, shapeDbFeature, relatedParentFeature) => {\r\n if (shapeDbFeature) {\r\n //console.log(\"shapeDbFeatureFeature.thirdPartyAR3DUrls\", shapeDbFeature.thirdPartyAR3DUrls);\r\n }\r\n\r\n if (!shapeDbFeature || !shapeDbFeature.thirdPartyAR3DUrls) {\r\n return null\r\n }\r\n\r\n const shapeWidth = shape.shapeCabinet ? shape.shapeCabinet.getShapeWidth() : shape.getWidth();\r\n //if it is cube then we can set target width and resize it\r\n const targetWidth = shape.getLines().length === 4 ? shape.getSize().width : shape.getWidth();\r\n const shapeHeight = shape.shapeCabinet ? shape.shapeCabinet.getShapeHeight() : shape.getHeight();\r\n const shapeDepth = shape.shapeCabinet ? shape.shapeCabinet.getShapeDepth() : shape.getDepth();\r\n const targetDepth = shape.getLines().length === 4 ? shape.getSize().height : shape.getHeight();\r\n\r\n //We are sending top left corner position.\r\n const originPointOnWorkspace = shape.getOriginPointOnWorkspace();\r\n const url = getUrlMatchingByColor(shapeDbFeature, relatedParentFeature).replace(/\\s+\\.glb$/, '.glb'); //todo remove\r\n const material_url = getUrlMatchingByColor(relatedParentFeature.dbFeature, relatedParentFeature); //todo remove\r\n const posY = CabinetsHelper.getCabinetPosY(shape, shapeDbFeature, url, shapeHeight);\r\n const shapeLayout = shape.shapeParams.shapeLayout;\r\n const threeDPos = { x: originPointOnWorkspace.x, y: posY, z: originPointOnWorkspace.y };\r\n const handles = CabinetsHelper.getHandles(shape, threeDPos, shape.rotatedDegrees, targetWidth, targetDepth, shapeHeight);\r\n\r\n // log parent feature material\r\n // if (!material_url) {\r\n // console.log(\"material wasn't found for the feature\", shapeDbFeature.id);\r\n // console.log(\"relatedParentFeature.dbFeature.id\", relatedParentFeature.dbFeature.id);\r\n // console.log(\"relatedParentFeature.dbFeature.thirdPartyAR3DUrls\", relatedParentFeature.dbFeature.thirdPartyAR3DUrls);\r\n // }\r\n\r\n return {\r\n \"partId\": shape.parentPartId ? shape.parentPartId : shape.partId,\r\n \"is_filler\": shape.shapeParams.isSpacer,\r\n \"x\": threeDPos.x,\r\n \"y\": threeDPos.y, // height between floor and roof. 0 is floor\r\n \"z\": threeDPos.z,\r\n \"rotation\": shape.rotatedDegrees,\r\n \"url\": url,\r\n \"material_url\": material_url,\r\n //\"url\": \"https://master_new_1512.quoteremodel.com/content/Views/visualizers/images/sqft-icons/3d/cabinet.glb\",\r\n\r\n \"target_width\": targetWidth,\r\n \"target_depth\": targetDepth,\r\n \"target_height\": shapeHeight,\r\n \"width\": shapeWidth,\r\n \"height\": shapeHeight, //in sqft wee cabinets from top so we can see this value\r\n \"depth\": shapeDepth,\r\n \"contour_points\": shape.getPointsCoords(),\r\n \"original_points\": shape.getOriginalPointsCoords(),\r\n \"featureId\": shapeDbFeature.id,\r\n \"parentFeatureId\": relatedParentFeature.dbFeature.id,\r\n \"shapeLayout\": shapeLayout,\r\n \"handles\": handles,\r\n // \"url\": shapeDbFeatureFeature && shapeDbFeatureFeature.thirdPartyAR3DUrls\r\n // ? shapeDbFeatureFeature.thirdPartyAR3DUrls[0]\r\n // : \"https://qc-3dfiles.s3.amazonaws.com/ar-composer/W3030.glb\" //localGlb\r\n //: \"https://dv84u4f1bblk2.cloudfront.net/6cp14aef9e7rfg6gds5orh1cej7ctlvq.glb\"\r\n }\r\n }\r\n\r\n static prepareImageCabinetSet = (shape, shapePosition, shapeFeature) => {\r\n if (!shapeFeature || !shapeFeature.dbFeature || !shapeFeature.dbFeature.thirdPartyAR3DUrls) {\r\n return null\r\n }\r\n //console.log(\"shapeDbFeatureFeature.thirdPartyAR3DUrls\", shapeFeature.dbFeature.thirdPartyAR3DUrls);\r\n\r\n const shapeWidth = +shape.getWidth();\r\n const shapeHeight = +shape.getThickness();\r\n const shapeDepth = +shape.getHeight();\r\n const applianceRotatedDegrees = shape.rotatedDegrees - 90;\r\n\r\n let appliancePosition = CabinetsSet.adjustApplianceModelPosition(shapePosition, shapeWidth, shapeDepth, shape.rotatedDegrees);\r\n const url = findGLBLink(shapeFeature.dbFeature.thirdPartyAR3DUrls);\r\n\r\n //rise hood to the level of top cabinets\r\n const yPos = shapeFeature.partId === SQFT_APPLIANCES.hood ? DEFAULT_COUNTERTOP_HEIGHT + DEFAULT_BACKSPLASH_HEIGHT : 0;\r\n\r\n // hardcode to create countertop over the dishwasher\r\n const partId = shapeFeature.partId === SHAPE_PART_ID.dishwasher ? SHAPE_PART_ID.lower_cabinet_boxes: shapeFeature.partId;\r\n // we need to hide the hood behind the top cabinet\r\n //const zPos = shapeFeature.partId === SHAPE_PART_ID.hood ? appliancePosition.y - 0.5 : appliancePosition.y;\r\n\r\n return {\r\n \"partId\": partId,\r\n \"x\": appliancePosition.x,\r\n \"y\": yPos, //todo (shape bottom cabinet height + distance between bottom and top cabinets)\r\n \"z\": appliancePosition.z,\r\n \"rotation\": applianceRotatedDegrees,\r\n \"url\": url,\r\n \"width\": shapeWidth,\r\n \"height\": shapeHeight, //in sqft wee cabinets from top so we can see this value\r\n \"depth\": shapeDepth,\r\n }\r\n }\r\n}\r\n\r\nexport class CountertopPositions {\r\n\r\n static prepareCountertopPositions() {\r\n const countertopPositions = [];\r\n const partIdsCoveredByCountertop = [SHAPE_PART_ID.lower_cabinet_boxes, SHAPE_PART_ID.dishwasher];\r\n\r\n /**\r\n * This function will search and return texture in thirdPartyAR3DUrls\r\n * and if it is not found will return large thumbnail\r\n * @return {string}\r\n */\r\n const getCountertopTexture = () => {\r\n let textureUrl = \"https://qc-3dfiles.s3.amazonaws.com/ar-textures/Absolute White - MSI - Marble - color - 1 - 0.16 - 0.33.png\";\r\n const state = store.getState();\r\n if (state.sqftState.selectedCountertop) {\r\n const layout = getCurrentLayout();\r\n const countertopFeature = layout.getFeatureById(state.sqftState.selectedCountertop, true);\r\n if (countertopFeature) {\r\n if (countertopFeature.dbFeature.thirdPartyAR3DUrls) {\r\n const URLByFeatureName = get3dURLsForFeature(countertopFeature);\r\n textureUrl = URLByFeatureName ? URLByFeatureName : countertopFeature.dbFeature.thirdPartyAR3DUrls[0];\r\n } else {\r\n textureUrl = featureThumbnailUrl(countertopFeature);\r\n }\r\n }\r\n }\r\n return textureUrl;\r\n };\r\n\r\n const textureUrl = getCountertopTexture();\r\n const snappedShapeGroups = workspaceControllers.snappedShapeGroups.getResources();\r\n\r\n // Function to group shapes by partId, height, and handle gaps\r\n const groupShapes = (shapes) => {\r\n let currentGroup = [];\r\n let lastHeight = null;\r\n\r\n for (const shape of shapes) {\r\n const shapeHeight = shape.shapeCabinet && shape.shapeCabinet.getShapeHeight\r\n ? shape.shapeCabinet.getShapeHeight()\r\n : DEFAULT_COUNTERTOP_HEIGHT;\r\n const isDishwasher = shape.subType === SHAPE_PART_ID.dishwasher;\r\n const isValidShape = partIdsCoveredByCountertop.includes(shape.partId) ||\r\n partIdsCoveredByCountertop.includes(shape.parentPartId) ||\r\n partIdsCoveredByCountertop.includes(shape.subType)\r\n\r\n if (!isValidShape) {\r\n if (currentGroup.length > 0) {\r\n CountertopPositions.prepareCountertopForGroup(currentGroup, textureUrl, countertopPositions, lastHeight);\r\n currentGroup = [];\r\n }\r\n lastHeight = null;\r\n continue;\r\n }\r\n\r\n if (shapeHeight !== lastHeight && !isDishwasher) {\r\n if (currentGroup.length > 0) {\r\n CountertopPositions.prepareCountertopForGroup(currentGroup, textureUrl, countertopPositions, lastHeight);\r\n currentGroup = [];\r\n }\r\n }\r\n\r\n lastHeight = shapeHeight;\r\n currentGroup.push(shape);\r\n }\r\n\r\n if (currentGroup.length > 0) {\r\n CountertopPositions.prepareCountertopForGroup(currentGroup, textureUrl, countertopPositions, lastHeight);\r\n }\r\n };\r\n\r\n // Prepare countertops for the snapped lower_cabinet_boxes\r\n for (const snappedShapeGroup of snappedShapeGroups) {\r\n let shapes = workspaceControllers.snappedShapeGroups.getSnappedShapes(snappedShapeGroup);\r\n\r\n //shapes = shapes.filter(shp => shp.partId !== SHAPE_PART_ID.upper_cabinet_boxes);\r\n // shapes = shapes.filter(shp =>\r\n // partIdsCoveredByCountertop.includes(shp.partId)\r\n // || partIdsCoveredByCountertop.includes(shp.parentPartId)\r\n // || partIdsCoveredByCountertop.includes(shp.subType)\r\n // );\r\n\r\n shapes.sort((a, b) => {\r\n const posA = a.getPosition();\r\n const posB = b.getPosition();\r\n const tolerance = 15; // x tolerance for defining \"one line\"\r\n\r\n if (Math.abs(posA.x - posB.x) <= tolerance) {\r\n return posA.y - posB.y;\r\n }\r\n\r\n return posA.x - posB.x;\r\n });\r\n\r\n if (shapes.length > 0) {\r\n groupShapes(shapes);\r\n }\r\n }\r\n\r\n // Prepare countertops for the single cabinets\r\n const shapes = workspace.getShapes();\r\n const countertopCabinets = shapes.filter(shp =>\r\n partIdsCoveredByCountertop.includes(shp.partId)\r\n || partIdsCoveredByCountertop.includes(shp.parentPartId)\r\n || partIdsCoveredByCountertop.includes(shp.subType)\r\n );\r\n\r\n for (const countertopCabinet of countertopCabinets) {\r\n if (countertopCabinet.shapeAbsolute.getSnappedShapeGroup() === null) {\r\n const countertopCabinetHeight = countertopCabinet.shapeCabinet && countertopCabinet.shapeCabinet.getShapeHeight\r\n ? countertopCabinet.shapeCabinet.getShapeHeight()\r\n : DEFAULT_COUNTERTOP_HEIGHT;\r\n\r\n CountertopPositions.prepareCountertopForGroup(\r\n [countertopCabinet],\r\n textureUrl,\r\n countertopPositions,\r\n countertopCabinetHeight\r\n );\r\n }\r\n }\r\n\r\n return countertopPositions;\r\n }\r\n\r\n static prepareCountertopForGroup = (snappedShapes, textureUrl, countertopPositions, shapeHeight) => {\r\n const measurementPoints = sqftShapeManager.getMinMaxShapesPointsOnWorkspace(snappedShapes);\r\n const contourPoints = sqftShapeManager.getShapesContourPointsOnWorkspace(snappedShapes, true);\r\n const overhang = sqftShapeManager.getShapesOverhangOnWorkspace(contourPoints, snappedShapes);\r\n\r\n if (measurementPoints.length > 0) {\r\n const width = measurementPoints[1].x - measurementPoints[0].x;\r\n const height = measurementPoints[2].y - measurementPoints[1].y;\r\n countertopPositions.push({\r\n 'partId': 'countertop',\r\n 'x': contourPoints[0].x,\r\n 'y': shapeHeight, // Using the shapeHeight parameter instead of hardcoded value\r\n 'z': contourPoints[0].y,\r\n 'width': width,\r\n 'height': height,\r\n 'edge_url': 'https://quotecountertops.com/video/sqft/countertop_edges/Eased Countertop.glb',\r\n 'texture_url': textureUrl,\r\n 'contour_points': contourPoints,\r\n 'overhang': overhang\r\n });\r\n } else {\r\n console.error(\"contourPoints is empty\");\r\n }\r\n }\r\n}\r\n\r\nexport class WallPositions {\r\n static prepareWallPositions() {\r\n const walls = workspaceControllers.walls.getResources();\r\n return walls.map(wall => {\r\n return {\r\n \"partId\": \"wall\",\r\n \"texture_url\": \"https://qc-3dfiles.s3.amazonaws.com/ar-textures/Absolute White - MSI - Marble - color - 1 - 0.16 - 0.33.png\",\r\n \"height\": 100.0,\r\n \"contour_points\": wall.getPoints().map(point => point.getPosition())\r\n }\r\n })\r\n }\r\n}\r\n\r\nexport class CabinetsHelper {\r\n static getHighestCabinetValue(partId = SHAPE_PART_ID.upper_cabinet_boxes) {\r\n const shapes = workspace.getShapes();\r\n if (shapes.length === 0) {\r\n return 0;\r\n }\r\n\r\n return shapes.reduce((acc, current) => {\r\n let currentShapeHeight = 0;\r\n\r\n if (current.partId === partId) {\r\n if (current instanceof sqftShape) {\r\n currentShapeHeight = current.shapeCabinet.getShapeHeight();\r\n } else if (current instanceof MovableImage) {\r\n currentShapeHeight = current.getThickness();\r\n }\r\n }\r\n\r\n if (currentShapeHeight > acc) {\r\n return currentShapeHeight;\r\n }\r\n\r\n return acc;\r\n }, 0);\r\n }\r\n\r\n static getCabinetPosY(shape, shapeDbFeature, url, shapeHeight) {\r\n let posY = 0\r\n const metaData = getThirdPartyAR3DMetaData(shapeDbFeature, url);\r\n const category = getCategoryFromMetadata(metaData);\r\n\r\n if (shape.partId === SHAPE_PART_ID.upper_cabinet_boxes || shape.parentPartId === SHAPE_PART_ID.upper_cabinet_boxes) {\r\n // //todo (shape bottom cabinet height + distance between bottom and top cabinets)\r\n posY = DEFAULT_COUNTERTOP_HEIGHT + DEFAULT_BACKSPLASH_HEIGHT;\r\n\r\n //set hood cabinet height to the level of highest upper_cabinet value\r\n const isHoodCabinet = category === \"Hood\" || containsHEBeforeExtension(url) || shapeHeight <= DEFAULT_BACKSPLASH_HEIGHT;\r\n if (isHoodCabinet) {\r\n const snappedWithShape = shape.shapeAbsolute.getSnappedWithShape();\r\n\r\n //const snappedShapes = workspaceControllers.snappedShapeGroups.getSnappedShapes(shape.shapeAbsolute.snappedShapeGroup);\r\n let upperCabinetHighestCabinetValue;\r\n //todo might be issues here, it is better to search for the closest cabinet\r\n if (snappedWithShape && !isHoodShape(snappedWithShape) && snappedWithShape.partId === SHAPE_PART_ID.upper_cabinet_boxes) {\r\n upperCabinetHighestCabinetValue = parseFloat(snappedWithShape.shapeCabinet.getShapeHeight());\r\n } else {\r\n upperCabinetHighestCabinetValue = parseFloat(CabinetsHelper.getHighestCabinetValue(SHAPE_PART_ID.upper_cabinet_boxes));\r\n }\r\n posY = DEFAULT_COUNTERTOP_HEIGHT + DEFAULT_BACKSPLASH_HEIGHT + upperCabinetHighestCabinetValue - shapeHeight;\r\n //upper cabinets was raised in 3d models\r\n // hardcode for cabinets that is raised in the model\r\n // if (startsFromH(shapeDbFeature.sharedFeatureName)) {\r\n // posY = posY - 30 + shapeHeight\r\n // }\r\n }\r\n\r\n //set upper cabinet height to the level of tall cabinets\r\n const tallCabinetHighestCabinetValue = parseFloat(CabinetsHelper.getHighestCabinetValue(SHAPE_PART_ID.tall_cabinet_boxes));\r\n if (tallCabinetHighestCabinetValue) {\r\n posY = tallCabinetHighestCabinetValue - shapeHeight;\r\n }\r\n }\r\n return posY\r\n }\r\n\r\n static getHandles(shape) {\r\n for (const line of shape.getLines()) {\r\n const handleId = line.getHandleId()\r\n if (handleId) {\r\n const handle3dURL = line.getHandle3dURL();\r\n //todo we need to create handle for each of the position in ar3dFile\r\n return [\r\n {\r\n handle3dURL,\r\n partId: shape.partId,\r\n // pos: {\r\n // x: pos.x + targetWidth / 2,\r\n // y: pos.y + targetHeight / 2,\r\n // z: pos.z + targetDepth,\r\n // }\r\n }\r\n // ,\r\n // {\r\n // handle3dURL,\r\n // partId: shape.partId,\r\n // }, {\r\n // handle3dURL,\r\n // partId: shape.partId,\r\n // }\r\n ]\r\n }\r\n }\r\n }\r\n}\r\n","export function similarity(s1, s2) {\r\n let longer = s1;\r\n let shorter = s2;\r\n if (s1.length < s2.length) {\r\n longer = s2;\r\n shorter = s1;\r\n }\r\n const longerLength = longer.length;\r\n if (longerLength === 0) {\r\n return 1.0;\r\n }\r\n return (longerLength - editDistance(longer, shorter)) / parseFloat(longerLength);\r\n}\r\n\r\n/*\r\n * Track the highest number of matching words\r\n */\r\nexport function similarityByWords(arrayToSearch, nameSearch) {\r\n let highestMatchCount = 0;\r\n let phraseBySimilarity = null;\r\n\r\n arrayToSearch.forEach(url => {\r\n const urlName = url.toLowerCase().split('/').pop().split('.')[0];\r\n const searchWords = nameSearch.toLowerCase().split(' ');\r\n const urlWords = urlName.split('-').join(' ').split(' '); // Adjusted splitting logic for your URLs\r\n\r\n let matchCount = searchWords.reduce((count, word) => {\r\n return count + (urlWords.includes(word) ? 1 : 0);\r\n }, 0);\r\n\r\n //console.log(\"urlName\", urlName);\r\n //console.log(\"matchCount\", matchCount);\r\n if (matchCount > highestMatchCount) {\r\n phraseBySimilarity = url;\r\n highestMatchCount = matchCount;\r\n }\r\n });\r\n\r\n return phraseBySimilarity\r\n}\r\n\r\nfunction editDistance(s1, s2) {\r\n s1 = s1.toLowerCase();\r\n s2 = s2.toLowerCase();\r\n\r\n const costs = [];\r\n for (let i = 0; i <= s1.length; i++) {\r\n let lastValue = i;\r\n for (let j = 0; j <= s2.length; j++) {\r\n if (i === 0) costs[j] = j;\r\n else {\r\n if (j > 0) {\r\n let newValue = costs[j - 1];\r\n if (s1.charAt(i - 1) !== s2.charAt(j - 1)) newValue = Math.min(Math.min(newValue, lastValue), costs[j]) + 1;\r\n costs[j - 1] = lastValue;\r\n lastValue = newValue;\r\n }\r\n }\r\n }\r\n if (i > 0) costs[s2.length] = lastValue;\r\n }\r\n return costs[s2.length];\r\n}\r\n\r\nexport const isSqftPassedDataEmpty = (sqftPassedData) => {\r\n if (sqftPassedData && sqftPassedData.manualCalculate === false) {\r\n return sqftPassedData.countertops.length === 0\r\n } else if (sqftPassedData && sqftPassedData.manualCalculate === true) {\r\n return sqftPassedData.countertops.length === 0\r\n || sqftPassedData.backsplashes.length === 0\r\n || sqftPassedData.edges.length === 0\r\n }\r\n return false\r\n}\r\n\r\n// Function to group URLs by version and sort them in descending order by version number\r\nexport function groupUrlsByVersion(urls) {\r\n // Create an array to store versioned URLs\r\n const versionedUrls = [];\r\n\r\n urls.forEach(url => {\r\n // Extract the version number from the URL (if present)\r\n const versionMatch = url.match(/ar-composer(?:-v(\\d+))?/);\r\n // If no version is present, default to version 1\r\n const version = versionMatch && versionMatch[1] ? parseInt(versionMatch[1], 10) : 1;\r\n\r\n // Add the version and URL to the array as an object\r\n versionedUrls.push({ version, url });\r\n });\r\n\r\n // Sort the array by version in descending order\r\n versionedUrls.sort((a, b) => b.version - a.version);\r\n\r\n // Return an array of sorted URLs based on version\r\n return versionedUrls.map(item => item.url);\r\n}\r\n","import React, {Fragment} from 'react';\r\nimport {connect} from 'react-redux';\r\nimport PropTypes from 'prop-types';\r\nimport findIndex from 'lodash/findIndex';\r\nimport {FormattedMessage, injectIntl} from \"react-intl\";\r\n\r\nimport CheckBox from './../../../common/checkBox';\r\nimport Analytics from './../../../../analytics';\r\nimport {\r\n setExpandedFilters,\r\n setFilterVisible,\r\n setSelectedFilters,\r\n showFilters\r\n} from \"../../../../actions/actionFunctions\";\r\n// import FilterSelection from \"./filterSelection\";\r\nimport FiltersSearch from \"./filtersSearch\";\r\nimport NavigationRequests from \"../navigationRequests\";\r\n\r\nconst toggleArrayValue = (array, value) => {\r\n let index = array.indexOf(value);\r\n (index >= 0) ? array.splice(index, 1) : array.push(value);\r\n return array;\r\n};\r\n\r\nexport const toggleFilterArrayValue = (array, {filterId, filterGroupId}) => {\r\n let index = findIndex(array, {filterId});\r\n if (index >= 0) {\r\n array.splice(index, 1);\r\n } else {\r\n array.push({filterId, filterGroupId});\r\n }\r\n return array;\r\n};\r\n\r\nconst arrayHasValue = (array, value) => {\r\n return (array.indexOf(value) >= 0);\r\n};\r\n\r\nclass FiltersBody extends NavigationRequests {\r\n static propTypes = {\r\n id: PropTypes.string.isRequired,\r\n searchText: PropTypes.string.isRequired,\r\n handleSearchInputChange: PropTypes.func.isRequired,\r\n childItem: PropTypes.object\r\n };\r\n\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n isLoading: false,\r\n filterButtons: [\"Others\", \"Materials\", \"Brand\", \"Color\"]\r\n };\r\n this._isMounted = false;\r\n }\r\n\r\n componentDidMount() {\r\n this._isMounted = true;\r\n this.setAvailableFiltersValues();\r\n }\r\n\r\n componentWillUnmount() {\r\n this._isMounted = false;\r\n }\r\n\r\n setAvailableFiltersValues() {\r\n const activePart = this.props.childItem && this.props.childItem.part;\r\n if (activePart.filtersReceived) {\r\n this.setState({\r\n isLoading: false,\r\n })\r\n } else {\r\n this.setState({\r\n isLoading: true\r\n });\r\n this.checkIfAllFiltersReceived(activePart, this.props.allFilterGroups)\r\n .then(() => {\r\n if (this._isMounted) {\r\n this.setState({\r\n isLoading: false,\r\n })\r\n }\r\n });\r\n }\r\n }\r\n\r\n isFilterSelected = (filter) => findIndex(this.props.selectedFilters, {filterId:filter}) !== -1;\r\n isFilterExpanded = (filter) => arrayHasValue(this.props.expandedFilters, filter);\r\n\r\n handleExpandFilter = (filter) => Analytics.sendClickEvent('filter-expand-' + filter) && this.props.setExpandedFilters(toggleArrayValue([...this.props.expandedFilters], filter));\r\n handleSelectFilter = (filterId, filterGroupId) => Analytics.sendClickEvent('filter-selected-' + filterId) && this.props.setSelectedFilters(toggleFilterArrayValue([...this.props.selectedFilters],\r\n {filterId, filterGroupId}));\r\n\r\n handleGroupClick = (filterName) => {\r\n Analytics.sendClickEvent('show-filter-group-' + filterName);\r\n if (this.props.filterVisible === filterName) {\r\n this.props.showFilters(false);\r\n } else {\r\n this.props.setFilterVisible(filterName);\r\n this.setAvailableFiltersValues(this.props, filterName);\r\n }\r\n };\r\n\r\n handleReset = () => {\r\n this.props.setSelectedFilters([]);\r\n this.props.setExpandedFilters([]);\r\n this.props.handleSearchInputChange({target: {value: ''}});\r\n };\r\n\r\n render() {\r\n const activePart = this.props.childItem.part;\r\n return (\r\n \r\n {this.state.filterButtons.map((filterName) => {\r\n const filterGroup = this.props.allFilterGroups.find(group => group.name === filterName);\r\n const buttonText = (filterName === \"Others\") ? \"+Filters\" : filterName;\r\n const filterNameLowerCased = filterName.toLowerCase();\r\n let buttonEnabled = false;\r\n if (filterName === \"Others\") {\r\n buttonEnabled = Array.isArray(activePart.filtersReceived) && this.props.allFilterGroups.some(filterGroup => {\r\n return ![\"Materials\", \"Brand\", \"Color\"].includes(filterGroup.name) && filterGroup.values.some(filterValue => {\r\n return activePart.filtersReceived.includes(filterValue.id);\r\n })\r\n });\r\n } else {\r\n buttonEnabled = filterGroup && (Array.isArray(activePart.filtersReceived) && filterGroup.values.some(filterValue => {\r\n return activePart.filtersReceived.includes(filterValue.id);\r\n }));\r\n }\r\n return (\r\n \r\n
\r\n {this.state.isLoading || !activePart.filtersReceived\r\n ? \r\n : this.handleGroupClick(filterName)}\r\n className={\"filters-header-icon filters-header-icon--\"+filterNameLowerCased\r\n + (this.props.filterVisible === filterName ? \" filters-header-icon--active filters-header-icon--active--\"+filterNameLowerCased : \"\")\r\n + (!buttonEnabled ? \" filters-header-icon--disabled\" : \"\")}>\r\n \r\n
\r\n )\r\n })}\r\n \r\n \r\n \r\n \r\n
\r\n {this.renderFiltersBody()}
\r\n }\r\n - \r\n {items}\r\n
\r\n
\r\n );\r\n };\r\n\r\n renderBrand = (brandFilterGroup) => {\r\n return (\r\n - \r\n {filterOptions}\r\n
\r\n
\r\n );\r\n };\r\n\r\n renderColor = (colorFilterGroup) => {\r\n return (\r\n - \r\n {this.checkFilterGroupForAvailableFilterValues(brandFilterGroup).map(f => (\r\n
- this.handleSelectFilter(f.id, brandFilterGroup.id)}>\r\n {f.icon ? null : f.displayText}\r\n \r\n ))}\r\n
\r\n
\r\n );\r\n };\r\n}\r\n\r\nconst mapStateToProps = (store) => {\r\n return {\r\n selectedFilters: store.filterState.selectedFilters,\r\n expandedFilters: store.filterState.expandedFilters,\r\n filterVisible: store.filterState.filterVisible,\r\n fabricatorData: store.fabricatorState,\r\n allFilterGroups: store.filterState.filterGroups,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n setSelectedFilters,\r\n setExpandedFilters,\r\n showFilters,\r\n setFilterVisible,\r\n};\r\nexport default injectIntl(\r\n connect(mapStateToProps, mapDispatchToProps)(FiltersBody)\r\n);\r\n","import React from 'react';\r\nimport classNames from 'classnames';\r\nimport {connect} from \"react-redux\";\r\nimport PropTypes from \"prop-types\";\r\n\r\nimport Analytics from './../../analytics';\r\nimport COLOR_THEMES from \"../../colorThemes\";\r\n\r\nconst CheckBox = (props) => {\r\n const {checked, text, onChecked, disabled, textOnly, activeTheme} = props;\r\n return (\r\n - \r\n {this.checkFilterGroupForAvailableFilterValues(colorFilterGroup).map(f => (\r\n
- \r\n
!disabled && !textOnly && Analytics.sendClickEvent(\"checkbox - \" + text, checked) && onChecked(!checked)}>\r\n 
);\r\n }\r\n return ();\r\n }\r\n }\r\n }\r\n}\r\n","export default {\r\n Types: {\r\n NORMAL: 'NORMAL',\r\n NUMERIC: 'NUMERIC',\r\n NUMERIC_EXTENDED: 'NUMERIC_EXTENDED',\r\n BACKSPACE: 'BACKSPACE',\r\n NORMAL_3: 'NORMAL_3',\r\n NORMAL_5: 'NORMAL_5',\r\n NORMAL_2_5: 'NORMAL_2_5',\r\n RIGHT_PANEL: 'RIGHT_PANEL'\r\n },\r\n /**\r\n *\r\n * @param type {string}\r\n */\r\n className: function (type) {\r\n switch (type) {\r\n case this.Types.NUMERIC:\r\n return \"numberpad-keys\";\r\n case this.Types.NUMERIC_EXTENDED:\r\n return \"numberpad-keys-extended\";\r\n case this.Types.BACKSPACE:\r\n return \"numberpad-keys-extended-special keyboard-backspace-key\";\r\n case this.Types.NORMAL:\r\n return 'keyboard-keys';\r\n case this.Types.NORMAL_3:\r\n return \"keyboard-keys keyboard-keys-extended-3x\";\r\n case this.Types.NORMAL_5:\r\n return \"keyboard-keys keyboard-keys-extended-5x\";\r\n case this.Types.NORMAL_2_5:\r\n return \"keyboard-keys keyboard-keys-extended-2point5x\";\r\n case this.Types.RIGHT_PANEL:\r\n return \"keybard-right-panel-buttons\";\r\n }\r\n }\r\n};","import React, {Component} from 'react';\r\nimport {connect} from 'react-redux';\r\nimport PropTypes from 'prop-types';\r\nimport {FormattedMessage} from \"react-intl\";\r\n\r\nimport DesignNavigationItem from \"../../../visComponents/designNavigationItem\";\r\nimport {PartMenuType} from \"../../constants\";\r\nimport BodyPanel from \"./bodyPanel\";\r\nimport BodyItems from \"./bodyItems\";\r\nimport Analytics from \"../../../../analytics\";\r\nimport FilterSelection from \"../newFilters/filterSelection\";\r\nimport NavigationFilters from \"../newFilters/navigationFilters\";\r\nimport {CABINET_WIZARD_BUTTONS} from \"../../../kvComponent/core/constants\";\r\nimport NavigationFiltersSteps from \"../newFilters/navigationFiltersSteps\";\r\nimport {getCurrentLayout} from \"../../../appLayout\";\r\nimport Config from \"../../../../config\";\r\nimport {getPartThemeThumbnail} from \"../../../../misc/helpers\";\r\n\r\nclass BodyClass extends Component {\r\n\r\n static propTypes = {\r\n parentItem: PropTypes.instanceOf(DesignNavigationItem),\r\n childItem: PropTypes.instanceOf(DesignNavigationItem),\r\n navWidth: PropTypes.number,\r\n searchText: PropTypes.string,\r\n onItemClick: PropTypes.func.isRequired,\r\n toggleApplyWallsCheckbox: PropTypes.func,\r\n isWallItem: PropTypes.func,\r\n handleSubTypeClick: PropTypes.func,\r\n showMenu: PropTypes.bool,\r\n toggleUserPopup: PropTypes.func,\r\n activeFeature: PropTypes.object,\r\n wizardGroups: PropTypes.array,\r\n useWizard: PropTypes.bool,\r\n showFeatureWizard: PropTypes.bool,\r\n enableFeatureWizard: PropTypes.func,\r\n exitFeatureWizard: PropTypes.func,\r\n getFilterDisplayName: PropTypes.func.isRequired,\r\n useFilters: PropTypes.bool,\r\n removeFilterSelection: PropTypes.func,\r\n showFilterSelection: PropTypes.bool,\r\n toggleWizardFilterSelection: PropTypes.func,\r\n refreshCB: PropTypes.func,\r\n setStateActiveFeature: PropTypes.func\r\n };\r\n\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n showLoader: false\r\n }\r\n }\r\n\r\n componentWillReceiveProps(nextProps) {\r\n if (nextProps.selectedFilters.length) {\r\n let updateComponent = false;\r\n if (nextProps.selectedFilters.length === this.props.selectedFilters.length) {\r\n updateComponent = nextProps.selectedFilters.some((filter, index) => {\r\n return filter.filterId !== this.props.selectedFilters[index].filterId\r\n || filter.filterGroupId !== this.props.selectedFilters[index].filterGroupId\r\n });\r\n }\r\n if (updateComponent) {\r\n this.refreshItems();\r\n }\r\n }\r\n if (this.props.navigationLoadingActive && !nextProps.navigationLoadingActive) {\r\n this.refreshItems();\r\n }\r\n }\r\n\r\n refreshItems = () => {\r\n this.setState({\r\n showLoader: true\r\n }, () => {\r\n this.setState({\r\n showLoader: false\r\n })\r\n })\r\n };\r\n\r\n itemsDispatcher = () => {\r\n const parentItem = this.props.parentItem;\r\n if (!parentItem) {\r\n return (\r\n {\r\n Analytics.sendClickEvent('item-clicked');\r\n Analytics.sendClickEvent('item-clicked-' + item.part.partName);\r\n this.props.onItemClick(item)\r\n }}>\r\n \r\n )\r\n })\r\n };\r\n\r\n updateComponent = () => {\r\n this.forceUpdate();\r\n };\r\n\r\n getFeatures = (layout) => {\r\n const {parentItem, childItem, searchText, selectedFilters} = this.props;\r\n const currentParent = (parentItem.part.menuType === PartMenuType.Simple) ? parentItem : childItem;\r\n if (!currentParent) {\r\n return []\r\n }\r\n return layout.designNavigationItems(currentParent, selectedFilters, searchText);\r\n };\r\n\r\n level2ItemsNew = () => {\r\n const layout = getCurrentLayout();\r\n const activePart = this.props.parentItem ? this.props.parentItem.part : null;\r\n const activeSubPart = this.props.childItem ? this.props.childItem.part : null;\r\n const currentPart = activeSubPart || activePart;\r\n const allFeaturesReceived = currentPart && currentPart.allFeaturesReceived\r\n && (!(currentPart.nextFeaturesPageToLoadArray && !currentPart.nextFeaturesPageToLoadArray[layout.getCurrentLayoutAbbreviation()].page));\r\n\r\n return \r\n \r\n {\r\n return \r\n \r\n \r\n ) : null\r\n };\r\n\r\n renderLoadingList = (activePart) => {\r\n if (!activePart.counts) {\r\n return \r\n }\r\n\r\n const counts = getActivePartsCounts(activePart, this.props.layoutName);\r\n\r\n if (!counts) {\r\n return \r\n }\r\n\r\n const navigationViewType = this.props.navigationViewType === 3 ? 2 : 1;\r\n\r\n const elements = [];\r\n for (let i = 0; i < Math.ceil(counts / navigationViewType); i++ ) { // for ex. 28/3 = 10 columns\r\n const innerElements = [];\r\n for (let j = 0; j < navigationViewType;j++ ) {\r\n const currentIndex = j+(i*navigationViewType);\r\n if (currentIndex < counts) {\r\n innerElements.push(\r\n \r\n {innerElements}\r\n \r\n );\r\n }\r\n\r\n return elements\r\n };\r\n\r\n render() {\r\n const activePart = this.props.parentItem ? this.props.parentItem.part : null;\r\n const activeSubPart = this.props.childItem ? this.props.childItem.part : null;\r\n\r\n return (\r\n \r\n : null}\r\n \r\n
\r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = (store) => ({\r\n fabricatorData: store.fabricatorState,\r\n selectedFilters: store.filterState.selectedFilters,\r\n filtersVisible: store.filterState.showFilters,\r\n filterGroups: store.filterState.filterGroups,\r\n bvPresets: store.bathroomVisualizerState.bvPresets,\r\n userPopupOpened: store.userState.userPopupOpened,\r\n activeNavigationFilter: store.navigationState.activeNavigationFilter,\r\n countertopNavigationFilterCompleted: store.navigationState.countertopNavigationFilterCompleted,\r\n newLayoutType: store.sqftState.newLayoutType,\r\n activeQuoteIndex: store.quotesState.activeQuoteIndex,\r\n});\r\n\r\nconst mapDispatchToProps = {\r\n setNavigationViewType,\r\n setModuleContextMenuType,\r\n setDefaultSelectionGroup,\r\n changeActivePartRelatedItemIndex,\r\n setActiveNavigationFilter,\r\n setActiveNavigationFilterStepIndex,\r\n setModuleContextMenuModule,\r\n setNavigationLoading\r\n};\r\n\r\nexport default injectIntl(\r\n connect(mapStateToProps, mapDispatchToProps)(MobileNavigation)\r\n);\r\n","import {Part} from \"../part\";\r\nimport {wallsThumbnail} from \"../../../bvComponent/core/assets\";\r\nimport {PartMenuType} from \"../../../visComponents/constants\";\r\n\r\nimport Attachment from \"../subparts/globals/attachment\";\r\nimport Decor from \"../subparts/globals/decor\";\r\nimport {DECORS_MAX} from \"../constants\";\r\n\r\nexport default class Globals extends Part {\r\n static id = \"Globals\";\r\n constructor() {\r\n super(true, false, PartMenuType.Complex);\r\n\r\n this.menuType = PartMenuType.Complex;\r\n this.partName = \"Globals\";\r\n this.partThumbnail = wallsThumbnail;\r\n\r\n // related items\r\n this.decor1 = null; // can be up to 10\r\n }\r\n\r\n load(dbFeature) {\r\n let\r\n relatedItemName = \"\",\r\n decorCount = 0,\r\n RelatedItemClass = null;\r\n switch (dbFeature.groupName) {\r\n case \"Decor\":\r\n case \"Decore\": {\r\n for (let i = 1; i <= DECORS_MAX; i++) {\r\n const currentDecorFeatureGroup = this[\"decor\" + i];\r\n if (!currentDecorFeatureGroup // we skipped all decors, but didn't find the same\r\n || dbFeature.sharedFeatureName === this[\"decor\" + i].decorName // decors are matching by name\r\n || (dbFeature.metaData[\"MountPosition\"] && this[\"decor\" + i].features.some(feature => { // decors are matching by name\r\n return feature.metaData[\"MountPosition\"] && feature.matchesMetaForCondition(\"MountPosition\", dbFeature.metaData[\"MountPosition\"])\r\n }))) {\r\n relatedItemName = \"decor\" + i;\r\n decorCount = i;\r\n break;\r\n }\r\n }\r\n break;\r\n }\r\n case \"Attachment\": {\r\n relatedItemName = \"attachment\";\r\n RelatedItemClass = Attachment;\r\n break;\r\n }\r\n }\r\n if (relatedItemName) {\r\n if (!this[relatedItemName]) {\r\n if (dbFeature.groupName === \"Decor\" || dbFeature.groupName === \"Decore\") {\r\n this[relatedItemName] = new Decor(true, decorCount, dbFeature);\r\n this[relatedItemName].decorName = dbFeature.sharedFeatureName;\r\n } else {\r\n this[relatedItemName] = new RelatedItemClass(true);\r\n }\r\n this.relatedItems.push(this[relatedItemName]);\r\n }\r\n if (!this.categoryEnabled) {\r\n this.categoryEnabled = true\r\n }\r\n this[relatedItemName].getParent = () => this;\r\n this[relatedItemName].load(dbFeature);\r\n return true\r\n }\r\n return false\r\n }\r\n\r\n isSubTypeWithItems() {\r\n return false;\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport isEqual from \"lodash/isEqual\";\r\n\r\nexport default class Attachment extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = \"attachment\";\r\n this.partName = \"Attachment\";\r\n this.hasAdditionalParts = true;\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new Attachment());\r\n }\r\n\r\n checkIfFeaturePartIsMatching() {\r\n this.activeFeatureParts = this.setActiveFeatureParts();\r\n }\r\n\r\n setActiveFeatureParts() {\r\n const layout = this.getParent().layout;\r\n const activeFeatures = layout.getActiveFeatures(true, true);\r\n // console.log(\"activeFeatures\", activeFeatures);\r\n const matchingFeatures = this.features.filter(feature => {\r\n if (!feature.matchesMetaForArrayOfConditions(this.getArrayOfConditions())) {\r\n return false\r\n }\r\n return feature.metaData[\"MatchingFeature\"] && activeFeatures.some(cartItem => {\r\n if (cartItem.partId === this.partId) { // remove attachment active feature\r\n return false\r\n }\r\n return !cartItem.featureGroup.disabled && cartItem.cartFeature.metaData[\"MatchingFeature\"]\r\n && isEqual(feature.metaData[\"MatchingFeature\"], cartItem.cartFeature.metaData[\"MatchingFeature\"])\r\n && isEqual(feature.metaData[\"Side\"], cartItem.cartFeature.metaData[\"Side\"])\r\n })\r\n })\r\n // console.log(\"matchingFeatures\", matchingFeatures);\r\n return matchingFeatures;\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n\r\n const getZIndex = (feature, partId = null) => {\r\n return feature.metaData[\"ZSorting\"] ? feature.metaData[\"ZSorting\"] * 1000 : zIndexes[partId || this.partId];\r\n }\r\n\r\n if (this.hasAdditionalParts && this.activeFeatureParts && this.activeFeatureParts.length) {\r\n this.activeFeatureParts.forEach((activeFeaturePart) => {\r\n activeFeaturePart.layer.zIndex = getZIndex(activeFeaturePart, this.additionalPartPartId) - 1;\r\n });\r\n }\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport CenterIsland from \"../../parts/centerIsland\";\r\n\r\nexport default class Decor extends IntermediatePart {\r\n constructor(isChild, decorCount, dbFeature) {\r\n super(isChild);\r\n this.decorCount = decorCount;\r\n this.partId = \"decor_\" + decorCount;\r\n this.partName = \"Decor \" + decorCount;\r\n if (dbFeature && dbFeature.metaData && dbFeature.metaData[\"CIShape\"]) {\r\n this.isCenterIslandDecor = true;\r\n }\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new Decor(false, this.decorCount));\r\n }\r\n\r\n getArrayOfConditions() {\r\n const conditions = super.getArrayOfConditions();\r\n if (this.isCenterIslandDecor) {\r\n const centerIslandParent = this.getParent().layout.parts[CenterIsland.id];\r\n if (centerIslandParent && centerIslandParent.cabinet) {\r\n if (centerIslandParent.cabinet.disabled) {\r\n conditions.push({\r\n propName: \"CIShape\",\r\n propValue: \"noCI\"\r\n })\r\n } else if (centerIslandParent.cabinet.activeFeature && centerIslandParent.cabinet.activeFeature.metaData[\"CIShape\"]) {\r\n conditions.push({\r\n propName: \"CIShape\",\r\n propValue: centerIslandParent.cabinet.activeFeature.metaData[\"CIShape\"][0]\r\n })\r\n }\r\n }\r\n }\r\n // console.log(\"conditions\", conditions);\r\n return conditions\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\n\r\nexport default class Cabinet extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.dbName = 'Center Island Cabinet';\r\n this.partId = 'center_island_cabinet';\r\n this.partName = 'Cabinet';\r\n this.translateId = \"visualizer.kitchen.center_island.center_island_cabinet\";\r\n this.canBeDisabled = true;\r\n this.allWallsCanBeApplied = true;\r\n }\r\n\r\n disabledClick() {\r\n const centerIslandParent = this.getParent();\r\n centerIslandParent.relatedItems.forEach(featureGroup => {\r\n featureGroup.disabled = this.disabled;\r\n })\r\n const ponyWall = centerIslandParent.layout && centerIslandParent.layout.parts && centerIslandParent.layout.parts.Walls\r\n ? centerIslandParent.layout.parts.Walls.ponyWall\r\n : null;\r\n if (ponyWall) {\r\n ponyWall.disabled = this.disabled;\r\n }\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport {PLACEMENTS} from \"../../constants\";\r\n\r\nexport default class Faucet extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'center_island_faucet';\r\n this.partName = 'Faucet';\r\n this.translateId = \"visualizer.kitchen.center_island.center_island_faucet\";\r\n this.canBeDisabled = true;\r\n }\r\n\r\n load(dbFeature) {\r\n // dbFeature.metaData[\"RoomLayout\"] = (dbFeature.metaData[\"RoomLayout\"] && dbFeature.metaData[\"RoomLayout\"].filter(roomLayout => roomLayout.includes(\"I\"))) || [];\r\n if (dbFeature.s3Bindings && dbFeature.metaData && (!dbFeature.metaData[\"Placement\"]\r\n || !dbFeature.metaData[\"Placement\"].includes(PLACEMENTS.Island))) {\r\n return false\r\n }\r\n return super.load_(dbFeature, new Faucet());\r\n }\r\n\r\n disabledClick() {\r\n const centerIslandParent = this.getParent();\r\n const relatedSink = centerIslandParent.sink;\r\n if (relatedSink) {\r\n relatedSink.disabled = this.disabled;\r\n }\r\n const stovetop = centerIslandParent.stovetop;\r\n if (stovetop && !this.disabled && !stovetop.disabled) {\r\n stovetop.disabled = true;\r\n }\r\n const range = centerIslandParent.range;\r\n if (range && !this.disabled && !range.disabled) {\r\n range.disabled = true;\r\n }\r\n }\r\n\r\n // getArrayOfConditions() {\r\n // const sink = this.getParent().sink;\r\n // if (sink && sink.activeFeature) {\r\n // return [{\r\n // propName: \"FaucetPlacement\",\r\n // propValue: sink.activeFeature.metaData[\"FaucetPlacement\"] || \"Moved\"\r\n // }]\r\n // }\r\n // return [];\r\n // }\r\n\r\n tryToSetTheSameFeature(filteredFeatures = [], partName = \"\") {\r\n if (this.activeFeature && this.activeFeature.partName) {\r\n const splittedName = (partName || this.activeFeature.partName).split(\" M\")[0];\r\n this.activeFeature = filteredFeatures.find(feature => {\r\n if (feature.partName) {\r\n const splittedCurrentName = feature.partName.split(\" M\")[0];\r\n return splittedCurrentName === splittedName\r\n }\r\n return false\r\n });\r\n // console.log('AF', filteredFeatures, this.activeFeature);\r\n if (this.activeFeature) {\r\n return true\r\n }\r\n }\r\n return false\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport {PLACEMENTS} from \"../../constants\";\r\n\r\nexport default class Sink extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'center_island_sink';\r\n this.partName = 'Sink';\r\n this.translateId = \"visualizer.kitchen.center_island.center_island_sink\";\r\n this.canBeDisabled = true;\r\n }\r\n\r\n load(dbFeature) {\r\n // dbFeature.metaData[\"RoomLayout\"] = (dbFeature.metaData[\"RoomLayout\"] && dbFeature.metaData[\"RoomLayout\"].filter(roomLayout => roomLayout.includes(\"I\"))) || [];\r\n if (dbFeature.s3Bindings && dbFeature.metaData && (!dbFeature.metaData[\"Placement\"]\r\n || !dbFeature.metaData[\"Placement\"].includes(PLACEMENTS.Island))) {\r\n return false\r\n }\r\n return super.load_(dbFeature, new Sink());\r\n }\r\n\r\n disabledClick() {\r\n const centerIslandParent = this.getParent();\r\n const relatedFaucet = centerIslandParent.faucet;\r\n if (relatedFaucet) {\r\n relatedFaucet.disabled = this.disabled;\r\n }\r\n const stovetop = centerIslandParent.stovetop;\r\n if (stovetop && !this.disabled && !stovetop.disabled) {\r\n stovetop.disabled = true;\r\n }\r\n const range = centerIslandParent.range;\r\n if (range && !this.disabled && !range.disabled) {\r\n range.disabled = true;\r\n }\r\n }\r\n}\r\n","import EdgeCommon from \"../edgeCommon\";\r\n\r\nexport default class Edge extends EdgeCommon {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'center_island_edge';\r\n this.partName = 'Edge';\r\n this.dbName = 'Edge Profile';\r\n // this.isStoneFeature = true;\r\n this.customClassName = \"edge\";\r\n this.translateId = \"visualizer.kitchen.center_island.center_island_edge\";\r\n this.hasNoVisualizerLayers = true;\r\n }\r\n\r\n}\r\n","import CountertopCommon from \"../countertopCommon\";\r\nimport {LayoutAbbreviations} from \"../../constants\";\r\n\r\nexport default class Countertop extends CountertopCommon {\r\n constructor(isChild, partNumber = 0) {\r\n super(isChild);\r\n this.partNumber = partNumber;\r\n this.partId = 'center_island_countertop';\r\n this.dbName = 'Center Island Countertop';\r\n this.partName = 'Island Countertop';\r\n this.homePageTitle = 'Center Island Countertop';\r\n this.translateId = \"visualizer.kitchen.center_island.center_island_countertop\";\r\n this.isStoneFeature = true;\r\n this.toggleSwitchedOffByUser = false; // is used for returning toggle back when feature is found\r\n this.hasAdditionalParts = false;\r\n this.allWallsCanBeApplied = true;\r\n if (isChild) {\r\n this.nextFeaturesPageToLoadArray = {};\r\n LayoutAbbreviations.forEach(layoutAbbreviation => {\r\n this.nextFeaturesPageToLoadArray[layoutAbbreviation] = {\r\n page: 0,\r\n allReceived: false,\r\n };\r\n });\r\n }\r\n }\r\n\r\n disabledClick() {\r\n const centerIslandParent = this.getParent();\r\n if (!this.disabled && centerIslandParent.cabinet.disabled) {\r\n centerIslandParent.cabinet.disabled = false;\r\n centerIslandParent.cabinet.disabledClick();\r\n }\r\n }\r\n\r\n load(dbFeature) {\r\n this.fixEdgeMeta(dbFeature);\r\n if (dbFeature.metaData[\"RoomLayout\"] && dbFeature.metaData[\"RoomLayout\"].includes(\"6\")) {\r\n if (!dbFeature.metaData[\"MountType\"]) {\r\n dbFeature.metaData[\"MountType\"] = [\"0\"]\r\n }\r\n }\r\n if (dbFeature.metaData[\"Part\"]) {\r\n const partNumber = (dbFeature.metaData[\"Part\"] && +dbFeature.metaData[\"Part\"][0]) === 1 ? 1 : 2;\r\n return super.load_(dbFeature, new Countertop(false, partNumber), true, partNumber === 1 ? 'features' : 'featuresParts');\r\n }\r\n return super.load_(dbFeature, new Countertop())\r\n }\r\n\r\n setLayers(layout) {\r\n\r\n const cabinet = this.getParent().cabinet;\r\n if (cabinet && (cabinet.disabled || !cabinet.featureGroupEnabled)) {\r\n super.hideLayers();\r\n return\r\n }\r\n\r\n return super.setLayers(layout);\r\n }\r\n\r\n getArrayOfConditions() {\r\n const conditions = super.getArrayOfConditions();\r\n const centerIslandParent = this.getParent();\r\n if (centerIslandParent.layout.type === 6) {\r\n if (centerIslandParent.sink && centerIslandParent.sink.activeFeature) {\r\n conditions.push({\r\n propName: \"MountType\",\r\n propValue: centerIslandParent.sink.activeFeature.metaData && Array.isArray(centerIslandParent.sink.activeFeature.metaData[\"MountType\"])\r\n && centerIslandParent.sink.activeFeature.metaData[\"MountType\"].includes(\"ST\") ? \"ST\" : \"0\"\r\n })\r\n }\r\n }\r\n // console.log(\"conditions\", conditions);\r\n return conditions;\r\n }\r\n\r\n canUseNavigationFilterSteps() {\r\n const parent = this.getParent();\r\n return parent.edge // display filters only if edges exist\r\n }\r\n\r\n canUseNavigationFilter() {\r\n return true //TODO[Artem] add here features filters check\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\n\r\nexport default class IslandHood extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'center_island_hood';\r\n this.partName = 'Island Hood';\r\n this.translateId = \"visualizer.kitchen.center_island.center_island_hood\";\r\n this.canBeDisabled = true;\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new IslandHood());\r\n }\r\n\r\n disabledClick() {\r\n const centerIslandParent = this.getParent();\r\n if (!this.disabled && centerIslandParent.cabinet) {\r\n centerIslandParent.cabinet.disabled = false;\r\n centerIslandParent.cabinet.disabledClick();\r\n } else {\r\n const stovetop = centerIslandParent.stovetop;\r\n if (stovetop && !this.disabled && stovetop.disabled) {\r\n stovetop.disabled = false;\r\n }\r\n }\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\n\r\nexport default class Stovetop extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'center_island_stovetop';\r\n this.partName = 'Stovetop';\r\n this.dbName = 'Island Stove'; // temporarily\r\n this.translateId = \"visualizer.kitchen.center_island.center_island_stovetop\";\r\n this.canBeDisabled = true;\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new Stovetop());\r\n }\r\n\r\n disabledClick() {\r\n const centerIslandParent = this.getParent();\r\n if (!this.disabled && centerIslandParent.cabinet) {\r\n centerIslandParent.cabinet.disabled = false;\r\n centerIslandParent.cabinet.disabledClick();\r\n } else {\r\n const islandHood = centerIslandParent.islandHood;\r\n if (islandHood) {\r\n islandHood.disabled = this.disabled;\r\n }\r\n }\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\n\r\nexport default class Pendants extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'center_island_pendants';\r\n this.partName = 'Pendants';\r\n this.translateId = \"visualizer.kitchen.center_island.center_island_pendants\";\r\n this.canBeDisabled = true;\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new Pendants());\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\n\r\nexport default class RightIsland extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'center_island_right_island';\r\n this.partName = 'Right Island';\r\n this.translateId = \"visualizer.kitchen.center_island.center_island_right_island\";\r\n this.canBeDisabled = true;\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new RightIsland());\r\n }\r\n}\r\n","import snakeCase from \"lodash/snakeCase\";\r\nimport {Part} from \"../part\";\r\nimport {PartMenuType} from \"../../../visComponents/constants\";\r\nimport NonVisualizerSubPart from \"../subparts/nonVisualizerSubPart\";\r\n\r\nconst alreadyExistingGroups = [\"Edge Profile\", \"Faucet\", \"Sink\"];\r\n\r\nexport default class Other extends Part {\r\n static id = 'Other';\r\n constructor() {\r\n super(true, false, PartMenuType.Complex);\r\n\r\n this.menuType = PartMenuType.Complex;\r\n this.partName = 'Other';\r\n this.categoryEnabled = false;\r\n }\r\n\r\n load(dbFeature) {\r\n // console.log(\"load other\", dbFeature.groupName);\r\n if (alreadyExistingGroups.includes(dbFeature.groupName)) { // they should be loaded in their groups!\r\n return false\r\n }\r\n const partId = snakeCase(dbFeature.groupName);\r\n let relatedItem = this.relatedItems.find(relatedItem => relatedItem.partId === partId);\r\n if (!relatedItem) {\r\n relatedItem = new NonVisualizerSubPart(true, partId, dbFeature.groupName);\r\n this.relatedItems.push(relatedItem);\r\n }\r\n relatedItem.getParent = () => this;\r\n relatedItem.load(dbFeature);\r\n return true\r\n }\r\n\r\n isSubTypeWithItems() {\r\n return false;\r\n }\r\n\r\n handleSubPartClick() {\r\n\r\n }\r\n\r\n}\r\n","import {Part} from \"../part\";\r\nimport {PartMenuType} from \"../../../visComponents/constants\";\r\nimport BackgroundBG from \"../subparts/backgrounds/BackgroundBG\";\r\n\r\nexport default class Background extends Part {\r\n static id = 'Background';\r\n constructor() {\r\n super(true, false, PartMenuType.Complex);\r\n\r\n this.menuType = PartMenuType.Complex;\r\n this.partName = 'Background';\r\n this.categoryEnabled = false;\r\n this.relatedGroupNames = [\"BG\"];\r\n }\r\n\r\n load(dbFeature, loadFeature = true) {\r\n let relatedItemName = \"\",\r\n RelatedItemClass = null;\r\n switch (dbFeature.groupName) {\r\n case \"BG\":\r\n relatedItemName = \"backgroundBG\";\r\n RelatedItemClass = BackgroundBG;\r\n break;\r\n default:\r\n break;\r\n }\r\n return this.loadCommon(relatedItemName, RelatedItemClass, dbFeature, loadFeature)\r\n }\r\n\r\n isSubTypeWithItems() {\r\n return false;\r\n }\r\n\r\n handleSubPartClick() {\r\n\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\n\r\nexport default class BackgroundBG extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'background_bg';\r\n this.partName = 'Background BG';\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new BackgroundBG());\r\n }\r\n}\r\n","import {Part} from \"../part\";\r\nimport {PartMenuType} from \"../../../visComponents/constants\";\r\nimport {floorThumbnail} from \"../../../kvComponent/core/assets\";\r\n\r\nimport {IntermediatePart} from \"../intermediatePart\";\r\nimport CenterIsland from \"./centerIsland\";\r\nimport {METADATA} from \"../constants\";\r\n\r\nexport default class Floor extends Part {\r\n static id = 'Floor';\r\n\r\n constructor() {\r\n super(true, false, PartMenuType.Complex);\r\n this.partId = 'parent_floor';\r\n this.menuType = PartMenuType.Complex;\r\n this.partName = 'Floor';\r\n this.translateId = \"visualizer.kitchen.kitchen_floor\";\r\n this.partThumbnail = floorThumbnail;\r\n this.relatedGroupNames = [\"Floor\"];\r\n }\r\n\r\n load(dbFeature, loadFeature = true) {\r\n let relatedItemName = \"\",\r\n RelatedItemClass = null;\r\n switch (dbFeature.groupName) {\r\n case \"Flor\":\r\n case \"Floor\":\r\n relatedItemName = \"floorBody\";\r\n RelatedItemClass = FloorBody;\r\n break;\r\n }\r\n return this.loadCommon(relatedItemName, RelatedItemClass, dbFeature, loadFeature)\r\n }\r\n\r\n}\r\n\r\nclass FloorBody extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'kitchen_floor';\r\n this.partName = 'Floor';\r\n this.translateId = \"visualizer.kitchen.kitchen_floor\";\r\n this.isStoneFeature = true;\r\n }\r\n\r\n load(dbFeature) {\r\n if (!dbFeature.metaData[\"CIShape\"]) {\r\n // if floor has no metadata CIShape and island has no metadata CIShape - just show without the meta\r\n dbFeature.metaData[\"CIShape\"] = METADATA.FloorWithIsland\r\n }\r\n return super.load_(dbFeature, new FloorBody());\r\n }\r\n\r\n getArrayOfConditions() {\r\n const conditions = super.getArrayOfConditions();\r\n const layout = this.getParent().layout;\r\n const centerIslandParent = layout.parts[CenterIsland.id];\r\n if (centerIslandParent && centerIslandParent.cabinet && (layout.type !== 4)) {\r\n if (centerIslandParent.cabinet.disabled) {\r\n conditions.push({\r\n propName: \"CIShape\",\r\n propValue: \"noCI\"\r\n })\r\n } else if (centerIslandParent.cabinet.activeFeature && centerIslandParent.cabinet.activeFeature.metaData[\"CIShape\"]) {\r\n conditions.push({\r\n propName: \"CIShape\",\r\n propValue: centerIslandParent.cabinet.activeFeature.metaData[\"CIShape\"][0]\r\n })\r\n } else {\r\n conditions.push({\r\n propName: \"CIShape\",\r\n propValue: METADATA.FloorWithIsland\r\n })\r\n }\r\n }\r\n // console.log(\"floor conditions\", conditions);\r\n return conditions\r\n }\r\n\r\n}\r\n\r\n\r\n","import {Part} from \"../part\";\r\nimport {wallsThumbnail} from \"../assets\";\r\nimport {PartMenuType} from \"../../../visComponents/constants\";\r\nimport DesignNavigationItem from \"../../../visComponents/designNavigationItem\";\r\n\r\nimport store from \"../../../../store\";\r\nimport Backsplash from \"../subparts/walls/backsplash\";\r\nimport LeftWall from \"../subparts/walls/leftWall\";\r\nimport RightWall from \"../subparts/walls/rightWall\";\r\nimport CenterWall from \"../subparts/walls/centerWall\";\r\nimport FrontWall from \"../subparts/walls/frontWall\";\r\nimport PonyWall from \"../subparts/walls/ponyWall\";\r\nimport SplitWall from \"../subparts/walls/splitWall\";\r\n\r\nexport default class Walls extends Part {\r\n static id = 'Walls';\r\n constructor() {\r\n super(true, false, PartMenuType.Complex);\r\n\r\n this.menuType = PartMenuType.Complex;\r\n this.partName = 'Walls';\r\n this.partThumbnail = wallsThumbnail;\r\n this.translateId = \"visualizer.kitchen.walls\";\r\n\r\n // related items\r\n this.leftWall = null;\r\n this.rightWall = null;\r\n this.centerWall = null;\r\n this.frontWall = null;\r\n this.ceiling = null;\r\n this.backsplash = null;\r\n this.splitWall = null;\r\n this.relatedGroupNames = [\"Backsplash\", \"Left Wall\", \"Right Wall\", \"Center Wall\", \"Front Wall\", \"Pony Wall\",\r\n \"Split Wall\"];\r\n }\r\n\r\n load(dbFeature, loadFeature = true) {\r\n let relatedItemName = \"\",\r\n RelatedItemClass = null;\r\n switch (dbFeature.groupName) {\r\n case \"Backsplash\":\r\n case \"backsplash\":\r\n relatedItemName = \"backsplash\";\r\n RelatedItemClass = Backsplash;\r\n break;\r\n case \"Left Wall\":\r\n relatedItemName = \"leftWall\";\r\n RelatedItemClass = LeftWall;\r\n break;\r\n case \"Right Wall\":\r\n relatedItemName = \"rightWall\";\r\n RelatedItemClass = RightWall;\r\n break;\r\n case \"Center Wall\":\r\n relatedItemName = \"centerWall\";\r\n RelatedItemClass = CenterWall;\r\n break;\r\n case \"Front Wall\":\r\n relatedItemName = \"frontWall\";\r\n RelatedItemClass = FrontWall;\r\n break;\r\n case \"Pony Wall\":\r\n relatedItemName = \"ponyWall\";\r\n RelatedItemClass = PonyWall;\r\n break;\r\n case \"Split Wall\":\r\n relatedItemName = \"splitWall\";\r\n RelatedItemClass = SplitWall;\r\n break;\r\n // case \"Shower Shadow\":\r\n // if (\r\n // dbFeature.displayName.includes(\"Shower Shadow - Divider Wall\")\r\n // || dbFeature.displayName.includes(\"Shower Shadow - EX L\")\r\n // || dbFeature.displayName.includes(\"Shower Shadow - EX R\")\r\n // || dbFeature.displayName.includes(\"Shower Shadow - Popout\")\r\n // || dbFeature.displayName.includes(\"Shower Shadow - Pony Wall\")\r\n // ) {\r\n // relatedItemName = \"shadows\";\r\n // RelatedItemClass = Shadow;\r\n // }\r\n // break;\r\n }\r\n return this.loadCommon(relatedItemName, RelatedItemClass, dbFeature, loadFeature)\r\n }\r\n\r\n isSubTypeWithItems() {\r\n return false;\r\n }\r\n\r\n subParts(withHidden = true) {\r\n return this.relatedItems\r\n .filter(item => this.filterRelatedItem(item, withHidden))\r\n .map(_ => new DesignNavigationItem(_.partName, _));\r\n }\r\n\r\n handleSubPartClick() {\r\n\r\n }\r\n\r\n recoverPrevioslySelected(activeRelatedPart) {\r\n const {activeQuoteIndex} = store.getState().quotesState;\r\n this.relatedItems.forEach(relatedItem => {\r\n if (relatedItem.partId !== activeRelatedPart.partId && relatedItem.activeFeatureBeforeAllWalls) {\r\n if (relatedItem.activeFeatureBeforeAllWalls === \"placeholder\") {\r\n relatedItem.placeholderChanged = false;\r\n relatedItem.firstClick[activeQuoteIndex] = false;\r\n } else if (!relatedItem.selectedByUser) {\r\n relatedItem.activeFeatureBeforeAllWalls.clickFromAllWalls();\r\n }\r\n }\r\n });\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport Cabinet from \"../../parts/cabinet\";\r\nimport {LayoutAbbreviations} from \"../../constants\";\r\nimport {IS_LIXIL_UI} from \"../../../../../config\";\r\n\r\nexport default class Backsplash extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'backsplash';\r\n this.partName = 'Backsplash';\r\n this.translateId = \"visualizer.kitchen.walls.backsplash\";\r\n this.isStoneFeature = true;\r\n this.allWallsCanBeApplied = true;\r\n if (isChild) {\r\n this.nextFeaturesPageToLoadArray = {};\r\n LayoutAbbreviations.forEach(layoutAbbreviation => {\r\n this.nextFeaturesPageToLoadArray[layoutAbbreviation] = {\r\n page: 0,\r\n allReceived: false,\r\n };\r\n });\r\n }\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new Backsplash());\r\n }\r\n\r\n alreadyAddedIndex(featureList, name) {\r\n return featureList.findIndex(feature => feature.getSplittedFeatureName() === name)\r\n }\r\n\r\n getBacksplashNavItems(filters, searchText) {\r\n const filteredAvailableFeatures = super.getFeaturesBySearchText(super.getFilteredFeaturesByFilters(filters), searchText);\r\n let availableFeatures = super.navigationSubItemsWithFilterMultipleConditions(this.getArrayOfConditions(true), filteredAvailableFeatures);\r\n let featuresToDisplay = [];\r\n const activeType = this.getFeatureBacksplashType(this.activeFeature);\r\n let cabinetLayoutMetaData = null;\r\n if (this.activeFeature && this.featureIsFullWall(this.activeFeature)) { // full backsplashes should be filtered by CabinetLayout metaData\r\n const cabinetParent = this.getParent().layout.parts[Cabinet.id];\r\n cabinetLayoutMetaData = cabinetParent && cabinetParent.topCabinet && cabinetParent.topCabinet.activeFeature\r\n && cabinetParent.topCabinet.activeFeature.metaData && cabinetParent.topCabinet.activeFeature.metaData[\"CabinetLayout\"];\r\n }\r\n for (let feature of availableFeatures) {\r\n const currentName = feature.getSplittedFeatureName();\r\n if (feature.notAvailableInVisualizer) {\r\n continue;\r\n }\r\n const alreadyAddedFeatureIndex = this.alreadyAddedIndex(featuresToDisplay, currentName);\r\n const matchByType = !activeType || (this.getFeatureBacksplashType(feature) === activeType);\r\n const matchByCabLayout = !cabinetLayoutMetaData || (feature.metaData && feature.metaData[\"CabinetLayout\"]\r\n && feature.metaData[\"CabinetLayout\"].includes(cabinetLayoutMetaData[0]));\r\n\r\n if (IS_LIXIL_UI) {\r\n if (alreadyAddedFeatureIndex > -1) {\r\n if (matchByType && matchByCabLayout) {\r\n featuresToDisplay.splice(alreadyAddedFeatureIndex, 1, feature);\r\n }\r\n } else {\r\n featuresToDisplay.push(feature);\r\n }\r\n } else if ((alreadyAddedFeatureIndex === -1) && matchByType && matchByCabLayout) {\r\n featuresToDisplay.push(feature);\r\n }\r\n }\r\n return featuresToDisplay\r\n }\r\n\r\n navigationSubItems(filters, searchText) {\r\n const featuresToDisplay = this.getBacksplashNavItems(filters, searchText);\r\n return this.returnUniqueNavFeatures(featuresToDisplay);\r\n }\r\n\r\n getFeatureByBacksplashType(neededType, featureName = \"\", sameNameOnly = false) {\r\n const conditions = this.getArrayOfConditions();\r\n let featuresToDisplay = super.navigationSubItemsWithFilterMultipleConditions(conditions);\r\n const matchingFeatures = featuresToDisplay.filter(feature => this.getFeatureBacksplashType(feature) === neededType);\r\n\r\n let currentPartName = featureName;\r\n if (!currentPartName && this.activeFeature) {\r\n currentPartName = this.activeFeature.getSplittedFeatureName();\r\n }\r\n\r\n const matchByName = matchingFeatures.filter(feature => {\r\n return feature.getSplittedFeatureName() === currentPartName\r\n });\r\n if (matchByName.length > 1) {\r\n const cabinetLayoutMetaData = this.getTopCabinetCabinetLayoutMetadata();\r\n const sameCabinetType = matchByName.find(feature => {\r\n if (this.featureIsFullWall(feature)) {\r\n return feature.matchesMetaForArrayOfConditions([\r\n {\r\n propName: 'CabinetLayout',\r\n propValue: cabinetLayoutMetaData\r\n }\r\n ])\r\n }\r\n });\r\n return sameCabinetType || matchByName[0];\r\n }\r\n if (sameNameOnly) {\r\n return matchByName[0]\r\n }\r\n return matchByName[0] || matchingFeatures[0];\r\n }\r\n\r\n featureIsFullWall = (feature) => {\r\n return this.getFeatureBacksplashType(feature) === \"Full\"\r\n }\r\n\r\n getFeatureBacksplashType = (feature) => {\r\n return feature && Array.isArray(feature.metaData[\"BacksplashType\"]) ? feature.metaData[\"BacksplashType\"][0] : null\r\n }\r\n\r\n getCurrentActiveFeatureType() {\r\n return this.getFeatureBacksplashType(this.activeFeature)\r\n }\r\n\r\n // setFeatureByName = async () => {\r\n // window.requestInProcess = true;\r\n // loaderEnable();\r\n // const splittedName = this.activeFeature.getSplittedFeatureName();\r\n // await Navigation.searchFeaturesByName(this, splittedName);\r\n // const neededFeature = this.findFeatureByPartName(splittedName, true);\r\n // if (neededFeature) {\r\n // this.activeFeature = neededFeature;\r\n // }\r\n // window.requestInProcess = false;\r\n // loaderDisable();\r\n // $(window).trigger(ActionTypes.CHANGE_LAYOUT); // update canvas\r\n // };\r\n\r\n getTopCabinetCabinetLayoutMetadata() {\r\n const cabinetParent = this.getParent().layout.parts[Cabinet.id];\r\n return cabinetParent && cabinetParent.topCabinet && cabinetParent.topCabinet.activeFeature\r\n && cabinetParent.topCabinet.activeFeature.metaData && cabinetParent.topCabinet.activeFeature.metaData[\"CabinetLayout\"];\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\n\r\nexport default class LeftWall extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'left_wall';\r\n this.partName = 'Left Wall';\r\n this.translateId = \"visualizer.kitchen.walls.left_wall\";\r\n this.activeFeatureBeforeAllWalls = null;\r\n this.allWallsApplied = true;\r\n this.isStoneFeature = true;\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new LeftWall());\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\n\r\nexport default class RightWall extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'right_wall';\r\n this.partName = 'Right Wall';\r\n this.translateId = \"visualizer.kitchen.walls.right_wall\";\r\n this.activeFeatureBeforeAllWalls = null;\r\n this.allWallsApplied = true;\r\n this.isStoneFeature = true;\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new RightWall());\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\n\r\nexport default class CenterWall extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'center_wall';\r\n this.partName = 'Center Wall';\r\n this.translateId = \"visualizer.bathroom.walls.center_wall\";\r\n this.activeFeatureBeforeAllWalls = null;\r\n this.allWallsApplied = true;\r\n this.isStoneFeature = true;\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new CenterWall());\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\n\r\nexport default class FrontWall extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'front_wall';\r\n this.partName = 'Front Wall';\r\n this.translateId = \"visualizer.bathroom.walls.front_wall\";\r\n this.activeFeatureBeforeAllWalls = null;\r\n this.allWallsApplied = true;\r\n this.isStoneFeature = true;\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new FrontWall());\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\n\r\nexport default class PonyWall extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'pony_wall';\r\n this.visible = true;\r\n this.partName = 'Pony Wall';\r\n this.translateId = \"visualizer.bathroom.walls.pony_wall\";\r\n this.activeFeatureBeforeAllWalls = null;\r\n this.allWallsApplied = true;\r\n this.isStoneFeature = true;\r\n }\r\n\r\n load(dbFeature) {\r\n if (dbFeature.metaData[\"Part\"]) {\r\n const partNumber = +dbFeature.metaData[\"Part\"][0];\r\n return this.load_(dbFeature, new this.constructor(false, partNumber), true, partNumber === 0 ? 'features' : 'featuresParts');\r\n }\r\n return this.load_(dbFeature, new this.constructor());\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\n\r\nexport default class SplitWall extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'split_wall';\r\n this.partName = 'Split Wall';\r\n this.translateId = \"visualizer.bathroom.walls.split_wall\";\r\n this.activeFeatureBeforeAllWalls = null;\r\n this.allWallsApplied = true;\r\n this.isStoneFeature = true;\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new SplitWall());\r\n }\r\n}\r\n","import React from 'react';\r\nimport {connect} from \"react-redux\";\r\nimport classNames from 'classnames';\r\nimport $ from 'jquery';\r\n\r\nimport {\r\n toggleDesktopNavigation,\r\n setActiveNavigationNames,\r\n setModuleContextMenuType,\r\n setActiveNavigationFilter, setActiveNavigationFilterStepIndex, setNavigationViewType, setNavigationLoading\r\n} from \"../../../actions/navigationFunctions\";\r\nimport {setDefaultSelectionGroup, changeActivePartRelatedItemIndex} from \"../../../actions/actionFunctions\";\r\nimport DesktopNavigationCommon from \"../../visComponents/navigation/desktopNavigationCommon\";\r\nimport Z from \"../core/zIndex\";\r\nimport {getCurrentLayout} from \"../../appLayout\";\r\n\r\nimport LockedView from \"../../common/lockedView\";\r\nimport {ContentType} from \"../../visComponents/constants\";\r\nimport ContextMenuSimple from \"./contextMenuSimple\";\r\n// import CabinetContextMenu from \"./cabinetContextMenu\";\r\nimport MobileMenuSelect from \"../../visComponents/navigation/mobile/mobileMenuSelect\";\r\nimport {setVisualizerTutorialStep, showVisualizerTutorial} from \"../../../actions/tutorialFunctions\";\r\nimport CenterIsland from \"../core/parts/centerIsland\";\r\n\r\nclass DesktopNavigation extends DesktopNavigationCommon {\r\n\r\n bindCanvasClick = (event) => {\r\n const layout = getCurrentLayout();\r\n // const canvas = document.getElementById(this.props.canvasId);\r\n this.props.setHoveredLayer(event);\r\n\r\n if (document.hoveredLayer) {\r\n\r\n const layoutType = layout.getCurrentLayoutName();\r\n\r\n const hoveredZone = Z.getMenuByHoveredLayer(layoutType, document.hoveredLayer);\r\n\r\n // console.log('hoveredZone', hoveredZone);\r\n\r\n if (hoveredZone) {\r\n if (hoveredZone.contextMenuPartId && !this.state.showNavigation) {\r\n if (this.state.contextMenuOpen) {\r\n this.setState({\r\n contextMenuOpen: false,\r\n hoveredLayer: {}\r\n });\r\n } else {\r\n this.openContextMenu(hoveredZone, event);\r\n }\r\n return false;\r\n } else if (this.state.contentType === 0) {\r\n this.setState({\r\n showNavigation: true,\r\n contentType: ContentType.Design,\r\n contextMenuOpen: false,\r\n hoveredLayer: {}\r\n }, () => {\r\n this.setNewActiveFeature();\r\n this.menuOpened();\r\n setTimeout(() => {\r\n $(document).on('click', this.handleWrapperBlur);\r\n }, 0)\r\n });\r\n }\r\n\r\n hoveredZone.child\r\n ? this.triggerOpenNavigationMenu(hoveredZone.child, hoveredZone.parent)\r\n : this.triggerOpenNavigationMenu(hoveredZone)\r\n\r\n }\r\n\r\n }\r\n\r\n };\r\n\r\n openContextMenu = (contextMenuOpen, event) => {\r\n let contextMenuButtons = [];\r\n if (contextMenuOpen.contextMenuPartId === \"top_cabinet\") {\r\n // const hoveredParent = this.props.designNavigationItems.find(navItem => {\r\n // return navItem.text === \"Cabinet\"\r\n // });\r\n // if (hoveredParent) {\r\n //\r\n // }\r\n contextMenuButtons = [1, 2, 3, 4, 5]\r\n }\r\n // const receiveBackSplashes = () => {\r\n // const layout = getCurrentLayout();\r\n // const wallsParent = layout.parts[\"Walls\"];\r\n // const backsplashSubPart = wallsParent.subParts().find(subPart => subPart.part.partId === \"backsplash\");\r\n // this.checkIfAllFeaturesReceived(backsplashSubPart);\r\n // };\r\n switch (contextMenuOpen.contextMenuPartId) {\r\n case \"countertop_group_custom\":\r\n contextMenuOpen = \"Countertop\";\r\n break;\r\n case \"right_wall_custom\":\r\n contextMenuOpen = \"right_wall_custom\";\r\n break;\r\n case \"left_wall_custom\":\r\n contextMenuOpen = \"left_wall_custom\";\r\n break;\r\n case \"backsplash_custom_left\": {\r\n // receiveBackSplashes();\r\n contextMenuOpen = \"backsplash_custom_left\";\r\n break;\r\n }\r\n case \"backsplash_custom_right\": {\r\n // receiveBackSplashes();\r\n contextMenuOpen = \"backsplash_custom_right\";\r\n break;\r\n }\r\n case \"backsplash_custom\": {\r\n // receiveBackSplashes();\r\n contextMenuOpen = \"backsplash_custom\";\r\n break;\r\n }\r\n case \"center_island_custom\":\r\n contextMenuOpen = CenterIsland.id;\r\n break;\r\n default:\r\n break;\r\n }\r\n const isMobile = $(window).width() < 991;\r\n\r\n let left = isMobile ? '50%' : event.clientX - 50;\r\n let top = isMobile ? '50%' : event.clientY - 50;\r\n let right = 'auto';\r\n\r\n const maxAllowedWidth = contextMenuButtons.length > 2 ? 300 : 210;\r\n\r\n let maxAllowedHeight = 110;\r\n if (contextMenuButtons.length > 6) {\r\n maxAllowedHeight = 330;\r\n } else if (contextMenuButtons.length > 3) {\r\n maxAllowedHeight = 220;\r\n }\r\n if (!isMobile && (left > window.innerWidth - maxAllowedWidth)) {\r\n left = 'auto';\r\n right = 0\r\n }\r\n if (!isMobile && (top > window.innerHeight - maxAllowedHeight)) {\r\n let negativeMargin = 50;\r\n if (contextMenuButtons.length > 6) {\r\n negativeMargin = 250;\r\n } else if (contextMenuButtons.length > 3) {\r\n negativeMargin = 150;\r\n }\r\n top = top - negativeMargin;\r\n }\r\n this.setState({\r\n contextMenuOpen,\r\n hoveredLayer: document.hoveredLayer,\r\n contextMenuPosition: {\r\n left,\r\n right,\r\n top,\r\n }\r\n });\r\n };\r\n\r\n handleNavigationItemClick = (item, ignoreLocked = false) => {\r\n this.navigationItemClickCommon(item);\r\n this.itemClick(item, ignoreLocked);\r\n\r\n const updateSideBarIds = [\"center_island_cabinet\", \"top_cabinet\"];\r\n if (updateSideBarIds.includes(item.part.partId)) {\r\n this.updateSideBar();\r\n }\r\n\r\n if (this.state.parentNavigationItem) { // update canvas only if it is child\r\n this.props.refreshCB();\r\n }\r\n };\r\n\r\n render() {\r\n const layout = getCurrentLayout();\r\n // const fabricatorSettings = this.props.fabricatorSettings;\r\n const activePart = this.state.parentNavigationItem ? this.state.parentNavigationItem.part : null;\r\n const activeSubPart = this.state.childNavigationItem ? this.state.childNavigationItem.part : null;\r\n // const activeNavPart = activeSubPart || activePart;\r\n const parentItems = layout.designNavigationItems(); // parent list without filters\r\n\r\n const useWizard = false, wizardGroups = [];\r\n\r\n let showNavigationFiltersSteps = false;\r\n\r\n if (activeSubPart && activeSubPart.canUseNavigationFilterSteps\r\n && activeSubPart.canUseNavigationFilterSteps()) {\r\n showNavigationFiltersSteps = !this.props.countertopNavigationFilterCompleted;\r\n }\r\n\r\n const showLockedView = this.currentActiveItemIsLocked(useWizard);\r\n\r\n const useFilters = false;\r\n const availableNavButtons = [ContentType.Design, ContentType.Layout, ContentType.RoomScene, ContentType.DisplayRoom];\r\n\r\n return (\r\n \r\n {textOnly ? null :\r\n \r\n }\r\n {checked ?\r\n ,\r\n items: vanityItems,\r\n },\r\n {\r\n title: ,\r\n items: showerAndBathTubItems,\r\n },\r\n {\r\n title: ,\r\n items: otherItems,\r\n },\r\n\r\n ]\r\n };\r\n\r\n getKitchenHomeSections = () => {\r\n const layout = getCurrentLayout();\r\n if (layout.qtCategories) {\r\n // console.log(\"parentParts\", parentParts);\r\n return layout.qtCategories.map((qtCategory) => {\r\n return {\r\n title: qtCategory.name,\r\n // items: this.checkForWallsComplexGroup(qtCategory)\r\n items: qtCategory.subParts\r\n }\r\n });\r\n } else {\r\n const parentParts = layout.getFeatures();\r\n return parentParts.map((parentGroup) => {\r\n return {\r\n title: parentGroup.partName,\r\n items: parentGroup.subParts(false)\r\n }\r\n });\r\n }\r\n };\r\n\r\n getSections = () => {\r\n switch (document.kvConfig.visualizerType) {\r\n case \"Kitchen\":\r\n case \"KV\":\r\n case \"kvMaster\":\r\n case \"kvScene\":\r\n default:\r\n return this.getKitchenHomeSections();\r\n case \"Bathroom\":\r\n case \"BV\":\r\n case \"bvScene\":\r\n case \"bvLook\":\r\n return this.getBathroomHomeSections();\r\n }\r\n };\r\n\r\n}\r\n","import {connect} from \"react-redux\";\r\n\r\nimport {setQuotes} from \"../../../actions/roomsFunctions\";\r\nimport Analytics from \"../../../analytics\";\r\nimport {\r\n changeSqftFeaturesPopup,\r\n setSqftFromFeature,\r\n setSqftMeasureUnit,\r\n setSquareFeet\r\n} from \"../../../actions/sqftFunctions\";\r\nimport {setMaterialsPageSubSteps} from \"../../../actions/selectionFunctions\";\r\nimport {MEASURE_UNITS, SQFT_POST_MESSAGE_ACTIONS} from \"../constants\";\r\nimport {getCurrentLayout} from \"../../appLayout\";\r\nimport {\r\n changeCartItemQuantity,\r\n changeSelectionInfoQuantity,\r\n setCameFromPage,\r\n toggleSelectionFeatureInfo\r\n} from \"../../../actions/actionFunctions\";\r\nimport {toggleShowManualCalculation} from \"../../../actions/sqftManualCalculationFunctions\";\r\nimport {clearAllMenusEvents} from \"../components/canvas/core/workspace/workspaceEvents\";\r\nimport {prepareSQFTData} from \"../components/canvas/core/workspace/workspaceDataMapper\";\r\nimport {useCloseSQFTCalc} from \"./useCloseSQFTCalc\";\r\nimport sqftShapeIntersectionsManager from \"../components/canvas/store/sqftShapeIntersectionsManager\";\r\nimport {saveSQFTDataToQuote} from \"../helpers/sqftQuotesHelper\";\r\n\r\nconst WithAddToQuote = (props) => {\r\n const {activeQuoteIndex} = props;\r\n const {children} = props;\r\n const {closeSQFTCalc} = useCloseSQFTCalc();\r\n\r\n const handleAddToQuoteClick = async () => {\r\n props.changeSqftFeaturesPopup({\r\n opened: true,\r\n sqftPassedData: null,\r\n })\r\n //update slabs features just in case they wasn't changed\r\n sqftShapeIntersectionsManager.updateShapesIntersections();\r\n sqftShapeIntersectionsManager.updateSlabPlaceholderFeatureId();\r\n\r\n let sqftCalcData = await prepareSQFTData();\r\n clearAllMenusEvents();\r\n await saveSQFTDataToQuote(sqftCalcData);\r\n setDataToQt(sqftCalcData, true);\r\n };\r\n\r\n const setDataToQt = (data, stayOnSqft = false) => {\r\n if (data) {\r\n Analytics.sendDataEnteredEvent(\"square-foot-calc-data-entered\");\r\n //this.props.setSqftMeasureUnit(data.measureUnit);\r\n const sqftPassedData = Object.assign({}, data, {\r\n canvasImage: \"\",\r\n sqFtSlabImage: \"\",\r\n sqFtSlabCalcImage:\"\",\r\n sqftApplianceImages: \"\",\r\n images3D: \"\"\r\n });\r\n console.log(\"sqft passedData\", sqftPassedData);\r\n let isLocationNotUsesPopup = false; //always use new popup\r\n // (\r\n // window.location.href.includes(\"quotekitchenandbath\")\r\n // //|| window.location.href.includes(\"quotekandb\")\r\n // //|| window.location.href.includes(\"quotesflooring\")\r\n // //|| window.location.href.includes(\"localhost\")\r\n // )\r\n // && !window.location.href.includes(\"use_sqft_popup=1\");\r\n\r\n if (isLocationNotUsesPopup || !props.useSqftCartPopup) {\r\n setEdgesQuantity(data);\r\n setRadiusQuantity(data);\r\n setBacksplashesQuantity(data);\r\n setCountertopsQuantity(data);\r\n stayOnSqft = false;\r\n } else {\r\n props.changeSqftFeaturesPopup({\r\n opened: true,\r\n sqftPassedData,\r\n })\r\n }\r\n\r\n // this.addSQFTCanvasImageToDocuments(data); // not used anymore! we keep sqFtCalcImage in the quote\r\n\r\n // we already saving data on handleAddToQuoteClick\r\n // // set backup data\r\n // if (!isSqftPassedDataEmpty(data)) {\r\n // updateActiveQuoteWithSQFTData(data);\r\n // }\r\n\r\n // set squareFeet\r\n props.setSquareFeet(data.squareFeet); // param needed to be set to call confirm popup\r\n // set quoting tool sub steps (only if minimum 2 items added)\r\n props.setMaterialsPageSubSteps({\r\n edges: data.edges && data.edges.length > 1 ? data.edges : [],\r\n backsplashes: data.backsplashes && data.backsplashes.length > 1 ? data.backsplashes : [],\r\n });\r\n }\r\n\r\n if (!stayOnSqft) {\r\n closeSQFTCalc();\r\n }\r\n\r\n saveSQFTHistory();\r\n };\r\n\r\n // const saveSQFTData = (data) => {\r\n // const {quotes, activeQuoteIndex} = store.getState().quotesState;\r\n // const newQuotes = [...quotes.map((quote, qIndex) => {\r\n // if (qIndex === activeQuoteIndex) {\r\n // quote.sqFtCalcData = Object.assign({}, data)\r\n // }\r\n // return quote\r\n // })];\r\n //\r\n // setQuotes(newQuotes);\r\n // };\r\n\r\n const setEdgesQuantity = (data) => {\r\n const dataEdges = data.edges;\r\n const edgesIdsObject = {};\r\n dataEdges.forEach((edge) => { // here we need to check all added edges with the same it and plus their length\r\n const edgeLength = data.measureUnit === MEASURE_UNITS.Metric ? edge.length : Math.ceil(edge.length);\r\n const edgeId = +edge.id;\r\n edgesIdsObject[edgeId] = edgesIdsObject[edgeId] ? edgesIdsObject[edgeId] + edgeLength : edgeLength;\r\n });\r\n Object.keys(edgesIdsObject).forEach(edgeId => {\r\n if (data.measureUnit === MEASURE_UNITS.Metric) {\r\n edgesIdsObject[edgeId] = +(edgesIdsObject[edgeId]).toFixed(2)\r\n }\r\n [\"center_island_edge\", \"edge_profile\"].forEach(partId => {\r\n setSubPartQuantity(partId, edgesIdsObject[edgeId], +edgeId)\r\n })\r\n })\r\n };\r\n\r\n const setRadiusQuantity = (data) => {\r\n const radiusCount = [...data.radii, ...data.angles].length;\r\n // let quantity = 0;\r\n // dataRadiuses.forEach(radius => {\r\n // quantity += +radius;\r\n // });\r\n if (radiusCount) {\r\n setSubPartQuantity(\"radius\", radiusCount)\r\n }\r\n };\r\n\r\n const setBacksplashesQuantity = (data) => {\r\n const dataBacksplashes = data.backsplashes;\r\n let quantity = 0;\r\n dataBacksplashes.forEach(backsplash => {\r\n quantity += backsplash.length;\r\n });\r\n if (quantity) {\r\n const backsplashLength = data.measureUnit === MEASURE_UNITS.Metric ? quantity : Math.ceil(quantity);\r\n setSubPartQuantity(\"backsplash\", backsplashLength)\r\n }\r\n };\r\n\r\n const setCountertopsQuantity = (data) => {\r\n const layout = getCurrentLayout();\r\n if (data.manualCalculate && data.squareFeet) { // manual calculate\r\n setSubPartQuantity(\"countertop\", data.squareFeet);\r\n setSubPartQuantity(\"center_island_countertop\", data.squareFeet);\r\n } else {\r\n let countertopSquareFeet = 0;\r\n let centerIslandCountertopSquareFeet = 0;\r\n data.countertops.forEach(shape => {\r\n if (shape.squareFeet) { // countertop & center_island_countertop\r\n (shape.partId === \"countertop\")\r\n ? countertopSquareFeet += shape.squareFeet\r\n : centerIslandCountertopSquareFeet += shape.squareFeet;\r\n }\r\n });\r\n if (layout.qtCategories) {\r\n const countertopIsAdded = countertopIsAddedToQtCategory(\"countertop\");\r\n const centerIslandCountertopIsAdded = countertopIsAddedToQtCategory(\"center_island_countertop\");\r\n if (countertopIsAdded && centerIslandCountertopIsAdded) { // both\r\n setSubPartQuantity(\"countertop\", countertopSquareFeet);\r\n setSubPartQuantity(\"center_island_countertop\", centerIslandCountertopSquareFeet);\r\n } else if (countertopIsAdded && !centerIslandCountertopIsAdded) { // only countertop is added to QTCategories\r\n setSubPartQuantity(\"countertop\", data.squareFeet);\r\n } else if (!countertopIsAdded && centerIslandCountertopIsAdded) {\r\n setSubPartQuantity(\"center_island_countertop\", data.squareFeet);\r\n }\r\n } else {\r\n setSubPartQuantity(\"countertop\", countertopSquareFeet);\r\n setSubPartQuantity(\"center_island_countertop\", centerIslandCountertopSquareFeet);\r\n }\r\n }\r\n };\r\n\r\n const countertopIsAddedToQtCategory = (partId) => {\r\n let countertopExist = false;\r\n const layout = getCurrentLayout();\r\n layout.qtCategories.forEach(qtCategory => {\r\n const subParts = qtCategory.subParts;\r\n const neededSubPart = subParts.find(subPart => subPart.part.partId === partId);\r\n if (neededSubPart) {\r\n countertopExist = true;\r\n }\r\n });\r\n return countertopExist\r\n };\r\n\r\n const setSubPartQuantity = (partId, quantity, dbFeatureId = null) => {\r\n /*** if dbFeatureId is passed - we need to set to the Feature quantity, not the feature group! ***/\r\n const layout = getCurrentLayout();\r\n // 1) update cart items quantity\r\n const cartItem = props.cartItems.find(cartItem => {\r\n return (dbFeatureId\r\n ? cartItem.cartFeature.dbFeature.id === dbFeatureId\r\n : cartItem.partId === partId) && cartItem.currentQuote === activeQuoteIndex;\r\n });\r\n if (cartItem) {\r\n props.changeCartItemQuantity(cartItem, quantity);\r\n }\r\n // 2) update feature info (current) quantity\r\n const activeFeature = props.selectionFeatureInfo;\r\n const updateCurrentFeature = dbFeatureId\r\n ? activeFeature && activeFeature.dbFeature.id === dbFeatureId\r\n : activeFeature && activeFeature.partId === partId\r\n if (updateCurrentFeature) {\r\n props.changeSelectionInfoQuantity(quantity)\r\n }\r\n // 3) update not current quantities\r\n if (layout.qtCategories) {\r\n layout.qtCategories.forEach(qtCategory => {\r\n setFeatureGroupSqftQuantity(qtCategory.subParts, partId, quantity, dbFeatureId)\r\n })\r\n } else {\r\n layout.getFeatures().forEach(parentItem => {\r\n setFeatureGroupSqftQuantity(parentItem.subParts(), partId, quantity, dbFeatureId)\r\n })\r\n }\r\n };\r\n\r\n const setSqftQuantityToSubPartFinal = (dbFeatureId, neededSubPart, quantity) => {\r\n if (dbFeatureId) {\r\n const navItems = neededSubPart.part.navigationSubItems();\r\n const neededFeature = navItems.find(navItem => navItem.part.dbFeature.id === dbFeatureId);\r\n if (neededFeature) {\r\n if (!neededFeature.part.sqftQuantity) {\r\n neededFeature.part.sqftQuantity = {};\r\n }\r\n neededFeature.part.sqftQuantity[activeQuoteIndex] = quantity\r\n } else {\r\n // console.log(\"feature not found, what should we do?\");\r\n }\r\n } else {\r\n if (!neededSubPart.part.sqftQuantity) {\r\n neededSubPart.part.sqftQuantity = {};\r\n }\r\n neededSubPart.part.sqftQuantity[activeQuoteIndex] = quantity\r\n }\r\n };\r\n\r\n const setFeatureGroupSqftQuantity = (subParts, partId, quantity, dbFeatureId) => {\r\n const neededSubPart = subParts.find(subPart => subPart.part.partId === partId);\r\n if (neededSubPart) {\r\n if (!neededSubPart.part.allFeaturesReceived && neededSubPart.part.partId.includes(\"edge\")) {\r\n //todo sqftReact\r\n //this.checkIfAllFeaturesReceived(neededSubPart, \"\", () => {\r\n setSqftQuantityToSubPartFinal(dbFeatureId, neededSubPart, quantity)\r\n //})\r\n } else {\r\n setSqftQuantityToSubPartFinal(dbFeatureId, neededSubPart, quantity)\r\n }\r\n }\r\n };\r\n\r\n // const closeSQFTCalc = (payload) => {\r\n // sendPostMessageToSqft(SQFT_POST_MESSAGE_ACTIONS.stopRender);\r\n // clearAllMenusEvents();\r\n // setSqftFromFeature(null);\r\n // Analytics.sendClickEvent('sqft-close');\r\n // if (payload && payload.measureUnit) {\r\n // props.setSqftMeasureUnit(payload.measureUnit);\r\n // }\r\n // const leaveSqft = () => {\r\n // const redirectToPage = cameFromPage && cameFromPage !== \"sqft\" ? cameFromPage : \"materials\"\r\n // closeSQFTTool(redirectToPage, changeWizardStepRoute);\r\n // if (isObject(cameFromPage) && cameFromPage.partId) {\r\n // props.toggleSelectionFeatureInfo(cameFromPage);\r\n // }\r\n // props.setCameFromPage(\"sqft\");\r\n // };\r\n // if (isFirefox()) {\r\n // setTimeout(() => {\r\n // leaveSqft();\r\n // }, 0)\r\n // } else {\r\n // leaveSqft();\r\n // }\r\n // };\r\n\r\n const sendPostMessageToSqft = () => {\r\n // if (this.iframeElement && this.iframeElement.contentWindow) {\r\n // this.iframeElement.contentWindow.postMessage({action, payload}, window.location.href);\r\n // }\r\n };\r\n // const resetData() {\r\n // closeSQFTCalc();\r\n // sendPostMessageToSqft(SQFT_POST_MESSAGE_ACTIONS.resetHistory);\r\n // }\r\n const saveSQFTHistory = () => {\r\n sendPostMessageToSqft(SQFT_POST_MESSAGE_ACTIONS.saveHistory);\r\n };\r\n\r\n return children(handleAddToQuoteClick, prepareSQFTData);\r\n};\r\n\r\nconst mapStateToProps = (store) => ({\r\n measureUnit: store.sqftState.measureUnit,\r\n quotes: store.quotesState.quotes,\r\n qtActiveCategory: store.qtState.qtActiveCategory,\r\n activeRoomType: store.sqftMenuState.activeRoomType,\r\n cartItems: store.cartState.cartItems,\r\n selectionFeatureInfo: store.selectionState.selectionFeatureInfo,\r\n activeQuoteIndex: store.quotesState.activeQuoteIndex,\r\n sqftVisited: store.sqftState.sqftFeaturesPopup.visited,\r\n isSlabToolVisited: store.sqftSlabState.isSlabToolVisited,\r\n useSqftCartPopup: store.sqftState.sqftFeaturesPopup.enabled,\r\n cameFromPage: store.cartState.cameFromPage\r\n});\r\n\r\nconst mapDispatchToProps = {\r\n setQuotes,\r\n setSquareFeet,\r\n setMaterialsPageSubSteps,\r\n changeSqftFeaturesPopup,\r\n toggleSelectionFeatureInfo,\r\n setCameFromPage,\r\n changeCartItemQuantity,\r\n changeSelectionInfoQuantity,\r\n setSqftMeasureUnit,\r\n toggleShowManualCalculation,\r\n setSqftFromFeature,\r\n};\r\n\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(WithAddToQuote);\r\n","import EventManager from \"../canvas/store/sqftEventManager\";\r\nimport workspace from \"../canvas/core/workspace\";\r\nimport config from \"../canvas/store/sqftConfig\";\r\nimport MiteredController from \"../canvas/core/controls/mitered\";\r\nimport FreeDraw from \"../canvas/core/controls/freeDraw\";\r\nimport UnderlaymentController from \"../canvas/core/controls/underlayment\";\r\n\r\nexport const resetEvents = function () {\r\n EventManager.stealCursor(true);\r\n EventManager.resetCursor(self);\r\n workspace.setAllowEdges(false);\r\n workspace.setAllowBumpoutEdges(false);\r\n};\r\n\r\nexport const handleResizeClick = function () {\r\n EventManager.stealCursor(true);\r\n EventManager.resetCursor(this);\r\n workspace.setAllowEdges(true);\r\n workspace.setAllowLineHighlight(true);\r\n setTimeout(function () {\r\n workspace.setAllowLineHighlight(false)\r\n }, 1000)\r\n};\r\n\r\nexport const handleSpacerClick = function () {\r\n // EventManager.stealCursor(true);\r\n // EventManager.resetCursor(this);\r\n // workspace.setAllowEdges(true);\r\n // workspace.setAllowLineHighlight(true);\r\n // setTimeout(function () {\r\n // workspace.setAllowLineHighlight(false)\r\n // }, 1000)\r\n};\r\n\r\nexport const handleRotateClick = function () {\r\n //EventManager.stealCursor(true);\r\n //EventManager.setCursor(\"rotate-left\", this, true);\r\n EventManager.stealCursor(true);\r\n config.workspace.menuItemActive = \"rotate-left\";\r\n};\r\n\r\nexport const handleWallClick = function () {\r\n EventManager.stealCursor(true);\r\n config.workspace.menuItemActive = \"wall\";\r\n FreeDraw.init();\r\n};\r\n\r\nexport const handleDuplicateClick = function () {\r\n EventManager.stealCursor(true);\r\n EventManager.setCursor(\"duplicate\", this, true);\r\n config.workspace.menuItemActive = \"duplicate\";\r\n};\r\n\r\nexport const handleAngleClick = function () {\r\n EventManager.stealCursor(true);\r\n EventManager.resetCursor(self);\r\n config.highlight.rotateAngle = true;\r\n workspace.getShapes().forEach((shape) => {\r\n if (Array.isArray(shape.rotateAngleParts) && shape.rotateAngleParts.length) {\r\n // todo fix bumpout rotation and remove this\r\n if (shape.isWithBumpout()) return;\r\n /////////////////////////////////////////\r\n shape.activateRotateAngle();\r\n }\r\n });\r\n};\r\n\r\nexport const handleTextClick = function () {\r\n};\r\n\r\nexport const handleResetClick = function () {\r\n EventManager.stealCursor(true);\r\n EventManager.resetCursor(self);\r\n};\r\n\r\n//todo sqft-react\r\nexport const handleMiteredClick = () => {\r\n EventManager.stealCursor(true);\r\n EventManager.resetCursor(self);\r\n\r\n // let cursor = new Cursor();\r\n // cursor.setCursorImage('./images/cursors/plus_blue.png');\r\n\r\n if (workspace.miteredController === null) {\r\n workspace.miteredController = new MiteredController();\r\n }\r\n workspace.miteredController.createCursor();\r\n workspace.miteredController.registerEvents();\r\n\r\n workspace.setAllowMiteredEdges(true);\r\n workspace.setAllowLineHighlight(true);\r\n\r\n //Bumpout.addBumpout_onClick();\r\n setTimeout(function () {\r\n workspace.setAllowLineHighlight(false)\r\n }, 1000)\r\n}\r\n\r\n//todo sqft-react\r\nexport const handleUnderlaymentClick = () => {\r\n EventManager.stealCursor(true);\r\n EventManager.resetCursor();\r\n\r\n // let cursor = new Cursor();\r\n // cursor.setCursorImage('./images/cursors/plus_blue.png');\r\n\r\n if (workspace.underlaymentController === null) {\r\n workspace.underlaymentController = new UnderlaymentController();\r\n }\r\n workspace.underlaymentController.createCursor();\r\n workspace.underlaymentController.registerEvents();\r\n\r\n workspace.setAllowMiteredEdges(true);\r\n workspace.setAllowLineHighlight(true);\r\n\r\n //Bumpout.addBumpout_onClick();\r\n setTimeout(function () {\r\n workspace.setAllowLineHighlight(false)\r\n }, 1000)\r\n}\r\n","import React, {Fragment} from \"react\";\r\nimport {connect} from \"react-redux\";\r\nimport PropTypes from \"prop-types\";\r\nimport {injectIntl} from \"react-intl\";\r\n\r\nimport CloseIcon from \"@mui/icons-material/Close\";\r\nimport IconButton from \"@mui/material/IconButton\";\r\nimport SearchIcon from '@mui/icons-material/Search';\r\n\r\nimport LookViewTypeSwitcher from \"../../../../../../../look/lookNavigation/lookMain/lookViewTypeSwitcher\";\r\nimport {\r\n SIDEBAR_NAVIGATION_BUTTONS,\r\n SIDEBAR_NAVIGATION_BUTTONS_LEVEL3\r\n} from \"../../../../../../constants\";\r\nimport {\r\n setSQFTActiveButton,\r\n setSQFTActiveLevel3Button,\r\n setSQFTMenuOpened\r\n} from \"../../../../../../../../actions/sqftMenuFunctions\";\r\nimport {setLookActiveCategory} from \"../../../../../../../../actions/lookFunctions\";\r\nimport {showFilters} from \"../../../../../../../../actions/actionFunctions\";\r\nimport {setGroheFiltersSearchText} from \"../../../../../../../../actions/groheFunctions\";\r\nimport {getFeatureGroupName} from \"../../../../../../../../misc/helpers\";\r\nimport {getCurrentLayout} from \"../../../../../../../appLayout\";\r\n\r\nconst SQFTFeaturesHeader = (props) => {\r\n const { headerTitle, partId } = props;\r\n //const {searchInputValue , setSearchInput} = props;\r\n const { intl, setSQFTActiveButton, setSQFTMenuOpened, activeLevel3Button, setSQFTActiveLevel3Button,\r\n setLookActiveCategory, showFilters, isFiltersOpened, setGroheFiltersSearchText, fabricatorData } = props;\r\n\r\n const handleClose = () => {\r\n setSQFTMenuOpened(SIDEBAR_NAVIGATION_BUTTONS.move);\r\n setSQFTActiveButton(SIDEBAR_NAVIGATION_BUTTONS.move);\r\n }\r\n\r\n const handleSearchClick = (e) => {\r\n void e;\r\n if (activeLevel3Button === SIDEBAR_NAVIGATION_BUTTONS_LEVEL3.filters) {\r\n setSQFTActiveLevel3Button(null);\r\n setGroheFiltersSearchText(\"\");\r\n showFilters(false);\r\n } else {\r\n setLookActiveCategory(partId); // set filters featureGroup\r\n showFilters(!isFiltersOpened);\r\n setSQFTActiveLevel3Button(SIDEBAR_NAVIGATION_BUTTONS_LEVEL3.filters);\r\n }\r\n }\r\n\r\n // const handleInputChange = (e) => {\r\n // setSearchInput(e.target.value);\r\n // }\r\n let featureGroupName = \"\";\r\n if (partId) {\r\n const layout = getCurrentLayout();\r\n const featureGroup = layout.getFeatureGroupByPartId(partId);\r\n featureGroupName = getFeatureGroupName(featureGroup, intl, fabricatorData);\r\n }\r\n\r\n return (\r\n \r\n \r\n )\r\n}\r\n\r\nSQFTFeaturesHeader.protoTypes = {\r\n featureTitleId: PropTypes.string,\r\n partId: PropTypes.string\r\n}\r\n\r\nconst mapStateToProps = (store) => ({\r\n activeLevel3Button: store.sqftMenuState.activeLevel3Button,\r\n isFiltersOpened: store.filterState.showFilters,\r\n fabricatorData: store.fabricatorState,\r\n});\r\n\r\nconst mapDispatchToProps = {\r\n setSQFTActiveButton,\r\n setSQFTMenuOpened,\r\n setSQFTActiveLevel3Button,\r\n setLookActiveCategory,\r\n showFilters,\r\n setGroheFiltersSearchText\r\n};\r\n\r\nexport default injectIntl(\r\n connect(mapStateToProps, mapDispatchToProps)(SQFTFeaturesHeader)\r\n);\r\n","import * as types from './actionTypes';\r\n\r\nexport const setIframeIntegrationRequest = (iframeIntegrationRequest) => ({\r\n type: types.SET_IFRAME_INTEGRATION_REQUEST,\r\n payload: {iframeIntegrationRequest}\r\n})\r\n\r\nexport const setIframeIntegrationResponse = (iframeIntegrationResponse) => ({\r\n type: types.SET_IFRAME_INTEGRATION_RESPONSE,\r\n payload: {iframeIntegrationResponse}\r\n})\r\n","import React, {useState} from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport PropTypes from \"prop-types\";\r\nimport {FormattedMessage, injectIntl} from \"react-intl\";\r\n\r\nimport IconButton from \"@mui/material/IconButton\";\r\nimport ExpandMore from \"@mui/icons-material/ExpandMore\";\r\n\r\nimport FeatureThumbnail from \"../../visComponents/featureThumbnail\";\r\nimport FeatureName from \"../../visComponents/featureName\";\r\nimport LookFeaturePrice from \"../lookNavigation/lookMain/lookListFeature/lookFeaturePrice\";\r\nimport LookListMainFeatureActions from \"./listFeatureActions/lookListMainFeatureActions\";\r\nimport LookFeatureQuantity from \"./lookFeatureQuantity\";\r\nimport {cartItemInterface} from \"../../shoppingCart/cartItemInterface\";\r\nimport LookListBundleFeatures from \"./lookListBundleFeatures\";\r\nimport {cartItemInStock, featureIsBundle, getBundledFeatures} from \"../lookNavigation/lookFunctions2\";\r\nimport {IS_LIXIL_SERVERS, IS_PRODUCT_JOURNEY} from \"../../../config\";\r\nimport GroheCartItemActions from \"../grohe/groheCart/groheCartItemActions\";\r\nimport LookListMainFeatureCheckbox from \"./lookListMainFeatureCheckbox\";\r\nimport LookListMainFeatureShipping from \"./lookListMainFeatureShipping\";\r\nimport {getFeatureGroupName, getFeatureIsLocked} from \"../../../misc/helpers\";\r\nimport LookFeatureSku from \"../lookNavigation/lookMain/lookFeature/lookFeatureSku\";\r\n\r\nconst LookListMainFeature = (props) => {\r\n\r\n const {intl, cartItem, quantity, cartItems, isBundleChild, showUnlockCalculations, showCartItems, cItemsAddedToParentCart,\r\n isMobile, withShipping, isPhoneNumberValidated, fabricatorData} = props;\r\n\r\n const fabricatorSettings = fabricatorData.settings;\r\n const {cartFeature} = cartItem;\r\n const [bundleExpanded, setBundleExpanded] = useState(true);\r\n\r\n const outOfStock = (\r\n \r\n \r\n \r\n );\r\n\r\n const expandBundleButton = (\r\n setBundleExpanded(!bundleExpanded)}>\r\n \r\n );\r\n\r\n const relatedFeatures = getBundledFeatures(cartFeature);\r\n const isBundle = featureIsBundle(cartFeature, cartItems);\r\n const inStock = cartItemInStock(cartItem);\r\n const isBundleParent = isBundle && cartFeature.partId === \"shower_fixture\" && relatedFeatures.length > 1;\r\n\r\n const showPriceLocked = getFeatureIsLocked(cartFeature) || (fabricatorSettings.enableQuote && !isPhoneNumberValidated);\r\n\r\n return (\r\n \r\n : null}\r\n \r\n )\r\n};\r\n\r\nLookListMainFeature.propTypes = {\r\n cartItem: PropTypes.shape(cartItemInterface).isRequired,\r\n withShipping: PropTypes.bool,\r\n}\r\n\r\nconst mapStateToProps = (store, ownProps) => {\r\n const {lookExpanded, lookViewType} = store.lookState;\r\n const {cartItems, cItemsAddedToParentCart} = store.cartState;\r\n const {showUnlockCalculations, showCartItems} = store.unlockCalculationsState;\r\n const {isMobile} = store.serverState;\r\n const {isPhoneNumberValidated} = store.userState;\r\n const fabricatorData = store.fabricatorState;\r\n\r\n return {\r\n lookExpanded,\r\n lookViewType,\r\n quantity: ownProps.cartItem.quantity,\r\n cartItems,\r\n showUnlockCalculations,\r\n showCartItems,\r\n cItemsAddedToParentCart,\r\n isMobile,\r\n fabricatorData,\r\n isPhoneNumberValidated,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n\r\n};\r\n\r\nexport default injectIntl(\r\n connect(mapStateToProps, mapDispatchToProps)(LookListMainFeature)\r\n)\r\n","import React, {PureComponent} from 'react';\r\nimport { hashHistory } from \"react-router\";\r\nimport classnames from 'classnames';\r\nimport {FormattedMessage} from \"react-intl\";\r\n\r\nclass HomeButton extends PureComponent {\r\n render() {\r\n return (\r\n \r\n );\r\n }\r\n}\r\n\r\nexport default HomeButton\r\n","import React from 'react';\r\nimport { connect } from \"react-redux\";\r\nimport PropTypes from \"prop-types\";\r\nimport $ from 'jquery';\r\nimport {FormattedMessage} from \"react-intl\";\r\n\r\nimport {\r\n toggleSelectionWindow, setCameFromPage, setQtActiveCategory, changeActivePartRelatedItemIndex\r\n} from \"../../actions/actionFunctions\";\r\nimport Analytics from './../../analytics';\r\nimport {getCurrentLayout} from \"../appLayout\";\r\nimport ProjectScopeFunctions from '../projectScope/projectScopeFunctions';\r\n\r\nclass MobileMenu extends ProjectScopeFunctions {\r\n\r\n static propTypes = {\r\n smallButton: PropTypes.bool,\r\n smallButtonClassName: PropTypes.string\r\n };\r\n\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n toggle: false,\r\n showRelatedItems: false,\r\n showSubNav: false\r\n };\r\n }\r\n\r\n componentWillUnmount() {\r\n $(document).off('click', this.handleMobileBlur);\r\n }\r\n\r\n handleItemClick = (bvDataPart) => {\r\n Analytics.sendClickEvent(\"mobile-menu-item\");\r\n const layout = getCurrentLayout();\r\n if(bvDataPart === \"Return to Website\") {\r\n this.setState({showSubNav: true});\r\n } else {\r\n $(document).off('click', this.handleMobileBlur);\r\n if (layout.qtCategories) {\r\n const qtCategory = layout.qtCategories.find(qtCategory => qtCategory.name === bvDataPart);\r\n this.goToMaterialsPageCommon(qtCategory.subParts[0].part, bvDataPart);\r\n } else {\r\n this.goToMaterialsPageCommon(layout.parts[bvDataPart].subParts(false)[0].part, bvDataPart);\r\n }\r\n }\r\n };\r\n\r\n handleBack = () => {\r\n if(this.state.showSubNav) {\r\n this.setState({showSubNav: false});\r\n } else {\r\n this.handleToggleDropdown();\r\n }\r\n };\r\n\r\n handleToggleDropdown = () => {\r\n Analytics.sendClickEvent(\"mobile-menu-toggle-\" + (this.state.toggle ? 'show': 'hide'));\r\n this.setState({\r\n toggle: !this.state.toggle,\r\n showSubNav: false\r\n }, () => {\r\n this.state.toggle\r\n ? $(document).on('click', this.handleMobileBlur)\r\n : $(document).off('click', this.handleMobileBlur)\r\n })\r\n };\r\n\r\n handleMobileBlur = (e) => {\r\n const navClick = e.target.closest('[class*=\"mobmenu\"]');\r\n const backButtonClick = e.target.closest('.ui-back');\r\n if (!navClick && !backButtonClick) {\r\n this.handleToggleDropdown();\r\n }\r\n };\r\n\r\n getMenuItems = () => {\r\n const layout = getCurrentLayout();\r\n if (!layout) {\r\n return []\r\n }\r\n if (this.props.mobileNav && this.props.mobileNav.length > 0 && window.location.href.includes(\"materials\")) {\r\n return [\"Return to Website\"]\r\n }\r\n let menu = (layout.qtCategories)\r\n ? layout.qtCategories.map(qtCategory => qtCategory.name)\r\n : [...this.props.layoutParts]\r\n if (this.props.mobileNav && this.props.mobileNav.length > 0) {\r\n menu.unshift(\r\n \"Return to Website\"\r\n );\r\n }\r\n return menu\r\n };\r\n\r\n render() {\r\n\r\n const menuItems = this.getMenuItems();\r\n\r\n return menuItems.length ? (\r\n \r\n }\r\n\r\n return (\r\n
\r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = (store) => {\r\n return {\r\n windowWidth: store.serverState.windowWidth,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n\r\n};\r\nexport default injectIntl(\r\n connect(mapStateToProps, mapDispatchToProps)(FiltersSearch)\r\n)\r\n","import React from \"react\";\r\nimport KeyType from \"./keyboardKeyType\";\r\nimport Analytics from './../../../analytics';\r\n\r\nexport default class KeyboardKey extends React.PureComponent {\r\n handleClick = (e) => {\r\n e.stopPropagation();\r\n e.preventDefault();\r\n let key = this.props.keyValue;\r\n if (!this.props.raw && this.props.isUpperCase && this.props.keyValue2) {\r\n key = this.props.keyValue2;\r\n }\r\n Analytics.sendClickEvent('osk-keyboard-key');\r\n\r\n this.props.runKeyStroke(key);\r\n };\r\n\r\n render() {\r\n let enabled = true;\r\n if (this.props.isUpperCase) {\r\n if (!this.props.keyValue2) {\r\n enabled = false;\r\n }\r\n }\r\n\r\n let key = this.props.keyValue;\r\n switch (key) {\r\n case 'backspace':\r\n case \"|<\":\r\n case \"|>\":\r\n key = '';\r\n break;\r\n default:\r\n if (this.props.isUpperCase) {\r\n if (this.props.keyValue2) {\r\n key = this.props.keyValue2;\r\n } else if (this.props.type === KeyType.Types.RIGHT_PANEL) {\r\n key = key.toUpperCase();\r\n }\r\n }\r\n break;\r\n }\r\n\r\n let className = KeyType.className(this.props.type);\r\n if (this.props.type === KeyType.Types.NORMAL) {\r\n if (!enabled) {\r\n className += \" keyboard-keys-shifted-enabled\";\r\n } else if (this.props.isUpperCase) {\r\n className += \" keyboard-keys-shifted\";\r\n }\r\n\r\n if (this.props.keyValue === 'backspace') {\r\n className += \" keyboard-backspace-key\";\r\n }\r\n }\r\n\r\n switch (this.props.type) {\r\n case KeyType.Types.NUMERIC:\r\n case KeyType.Types.NUMERIC_EXTENDED:\r\n return (\r\n \r\n :
\r\n );\r\n};\r\n\r\nCheckBox.displayName = 'CheckBox';\r\n\r\nCheckBox.propTypes = {\r\n checked: PropTypes.bool,\r\n disabled: PropTypes.bool,\r\n textOnly: PropTypes.bool,\r\n text: PropTypes.any,\r\n onChecked: PropTypes.func,\r\n}\r\n\r\nconst mapStateToProps = (store) => {\r\n return {\r\n activeTheme: store.serverState.activeTheme,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {};\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(CheckBox)\r\n","import React, {Fragment} from 'react';\r\nimport { connect } from \"react-redux\";\r\nimport {loaderEnable} from \"../ui/loaderView\";\r\nimport {\r\n toggleUserPopup, setCanvasId, setLayoutDataParts, setDefaultSelectionGroup, loadFilters, setCameFromPage,\r\n toggleBathroomVisualizerOpen, toggleSelectionFeatureInfo, changeMessageBoxState,\r\n addVisualizersLoaded } from \"../../actions/actionFunctions\";\r\nimport {\r\n getBathroomVisualizerData,\r\n getBvGroups,\r\n getBvGroupFeatures,\r\n getQtCategories,\r\n getNavigationButtons\r\n} from \"../../api/server-api\";\r\nimport ImageCanvasCommon from \"../visComponents/imageCanvasCommon\";\r\nimport {Layout} from \"./core/layout\";\r\nimport CountertopGroup from \"./core/parts/countertopGroup\";\r\nimport Cabinet from \"./core/parts/cabinet\";\r\nimport DesktopNavigation from \"./navigation/desktopNavigation\";\r\nimport MobileNavigation from \"./navigation/mobileNavigation\";\r\nimport MainButtons from \"../common/mainButtons\";\r\nimport DemoPoints from \"../common/demoPoints/demoPoints\";\r\nimport MessageBox from \"../popups/messageBox\";\r\n\r\nimport Visualizer from \"../visComponents/visualizer\";\r\nimport VisualizerTutorial from \"../tutorials/visualizerTutorial\";\r\nimport {showVisualizerTutorial} from \"../../actions/tutorialFunctions\";\r\nimport Copyright from \"../ui/copyright\";\r\nimport {IS_QKB_UI} from \"../../config\";\r\n\r\nexport const layout = new Layout();\r\n\r\nclass KitchenVisualizer extends Visualizer {\r\n\r\n static displayName = 'Kitchen Visualizer';\r\n\r\n constructor(props) {\r\n super(props);\r\n this.layout = layout;\r\n }\r\n\r\n componentDidMount() {\r\n if (this.props.visualizersLoaded.includes(this.layout.visualizerType)) {\r\n this.setSubscribers();\r\n return false\r\n }\r\n loaderEnable();\r\n Promise.all([\r\n getBathroomVisualizerData(),\r\n getQtCategories(this.layout.getCurrentLayoutAbbreviation())\r\n ]).then(baseResponse => {\r\n Promise.all([\r\n Promise.resolve(baseResponse[0]),\r\n getBvGroups(),\r\n getBvGroupFeatures(\"Countertop\", 0, 200),\r\n getBvGroupFeatures(\"Crown Molding\", 0, 500),\r\n getBvGroupFeatures(\"Top Cabinet\", 0, 200),\r\n getBvGroupFeatures(\"Bottom Cabinet\", 0, 200),\r\n getBvGroupFeatures(\"Top Handle\", 0, 200),\r\n getBvGroupFeatures(\"Bottom Handle\", 0, 200),\r\n Promise.resolve(baseResponse[1])\r\n ])\r\n .then((allResponse) => {\r\n const mainResponse = allResponse[0];\r\n const kvGroupsResponse = allResponse[1].data;\r\n const qtCategories = allResponse[8];\r\n\r\n // 1) set default (placeholders)\r\n this.layout.loadNewFeatures(mainResponse);\r\n this.layout.setGroupsItemsCount(kvGroupsResponse); // should be loaded before & after all features are received\r\n\r\n // 2) set counterTop features\r\n const countertopParent = this.layout.parts[CountertopGroup.id];\r\n if (countertopParent && countertopParent.countertop && allResponse[2]) {\r\n countertopParent.countertop.setGroupFeatures(allResponse[2], 200, false)\r\n }\r\n\r\n // 3) set counterTop features\r\n const cabinetParent = this.layout.parts[Cabinet.id];\r\n if (cabinetParent && cabinetParent.crownMolding && allResponse[3]) {\r\n cabinetParent.crownMolding.setGroupFeatures(allResponse[3], 500, false)\r\n }\r\n\r\n // 4) set top cabinet features\r\n if (cabinetParent && cabinetParent.topCabinet && allResponse[4]) {\r\n cabinetParent.topCabinet.setGroupFeatures(allResponse[4], 200, false)\r\n }\r\n\r\n // 5) set bottom cabinet features\r\n if (cabinetParent && cabinetParent.bottomCabinet && allResponse[5]) {\r\n cabinetParent.bottomCabinet.setGroupFeatures(allResponse[5], 200, false)\r\n }\r\n\r\n // 6) set top handle features\r\n if (cabinetParent && cabinetParent.topHandle && allResponse[6]) {\r\n cabinetParent.topHandle.setGroupFeatures(allResponse[6], 200, false)\r\n }\r\n\r\n // 7) set bottom handle features\r\n if (cabinetParent && cabinetParent.bottomHandle && allResponse[7]) {\r\n cabinetParent.bottomHandle.setGroupFeatures(allResponse[7], 200, false)\r\n }\r\n return this.setVisualizerInfo(mainResponse, kvGroupsResponse, qtCategories);\r\n })\r\n .then(this.checkShareUrl)\r\n .then(this.onBvLoad)\r\n .then(this.finishLoading);\r\n });\r\n\r\n this.setSubscribers();\r\n getNavigationButtons();\r\n }\r\n\r\n render() {\r\n\r\n if (!IS_QKB_UI) {\r\n return null\r\n }\r\n\r\n const showPlaceHolders = document.bvConfig ? document.bvConfig.showPlaceholders : false;\r\n const fabricatorSettings = this.props.fabricatorSettings;\r\n const layers = this.layout.getLayers(showPlaceHolders);\r\n const layoutType = this.layout.getCurrentLayoutName();\r\n const isMobile = this.props.windowWidth < 991;\r\n const showTutorial = this.checkToShowTutorial();\r\n\r\n return (\r\n }\r\n
\r\n {text}
\r\n \r\n this.navBar = node}\r\n refreshCB={this.handleRefresh}\r\n setHoveredLayer={this.setHoveredLayer}\r\n canvasId={this.state.canvasId}\r\n renderGreenLayerByZindex={this.renderGreenLayerByZindex}\r\n toggleUserPopup={this.props.toggleUserPopup}\r\n changeMessageBoxState={this.changeMessageBoxState}\r\n setActiveFeature={this.setActiveFeature}\r\n activeFeature={this.state.activeFeature}\r\n fabricatorSettings={fabricatorSettings}\r\n setDemoPointClicked={this.setDemoPointClicked}\r\n />\r\n )\r\n ) : null}\r\n {this.props.cookieAccepted ? : null}\r\n {showTutorial ? : null}\r\n
\r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = (store) => {\r\n const {cookieAccepted, windowWidth, visualizersLoaded} = store.serverState;\r\n const {bvOpened, bvVisited, canvasId, showRestorePopup, canvasDimensions, canvasCount} = store.bathroomVisualizerState;\r\n const {mobileNav, desktopNavigationOpened, activeNavigationParentName, activeNavigationChildName} = store.navigationState;\r\n const {isPhoneNumberValidated, userIsLoggedIn} = store.userState;\r\n const {visualizerTutorialIsOpened, visualizerTutorialFinished} = store.tutorialState;\r\n const {initialFlowRoomLayout, initialFlowRoom, initialFlowStep} = store.initialFlowState;\r\n return {\r\n bvOpened,\r\n bvVisited,\r\n mobileNav,\r\n isPhoneNumberValidated,\r\n userIsLoggedIn,\r\n windowWidth,\r\n canvasId,\r\n fabricatorSettings: store.fabricatorState.settings,\r\n desktopNavigationOpened,\r\n activeNavigationParentName,\r\n activeNavigationChildName,\r\n showRestorePopup,\r\n visualizerTutorialIsOpened,\r\n visualizerTutorialFinished,\r\n initialFlowRoomLayout,\r\n initialFlowRoom,\r\n initialFlowStep,\r\n cookieAccepted,\r\n canvasDimensions,\r\n visualizersLoaded,\r\n canvasCount,\r\n };\r\n};\r\n\r\nexport default connect(mapStateToProps, {\r\n setCameFromPage,\r\n toggleBathroomVisualizerOpen,\r\n setDefaultSelectionGroup,\r\n setLayoutDataParts,\r\n toggleUserPopup,\r\n setCanvasId,\r\n loadFilters,\r\n toggleSelectionFeatureInfo,\r\n changeMessageBoxState,\r\n showVisualizerTutorial,\r\n addVisualizersLoaded\r\n})(KitchenVisualizer);\r\n","import React, {Fragment} from 'react';\r\nimport { connect } from \"react-redux\";\r\nimport invert from \"lodash/invert\";\r\n\r\nimport {loaderEnable} from \"../ui/loaderView\";\r\nimport {\r\n toggleUserPopup, setCanvasId, setLayoutDataParts, setDefaultSelectionGroup, loadFilters, setCameFromPage,\r\n toggleBathroomVisualizerOpen, toggleSelectionFeatureInfo, changeMessageBoxState,\r\n addVisualizersLoaded } from \"../../actions/actionFunctions\";\r\nimport {\r\n getBathroomVisualizerData,\r\n getBvGroups,\r\n // getNavigationButtons\r\n} from \"../../api/server-api\";\r\nimport ImageCanvasCommonNew from \"../visComponents/imageCanvasCommonNew\";\r\nimport {Layout} from \"./core/layout\";\r\nimport DesktopNavigation from \"./navigation/desktopNavigation\";\r\nimport MobileNavigation from \"./navigation/mobileNavigation\";\r\nimport MainButtons from \"../common/mainButtons\";\r\nimport DemoPoints from \"../common/demoPoints/demoPoints\";\r\nimport MessageBox from \"../popups/messageBox\";\r\n\r\nimport Visualizer from \"../visComponents/visualizer\";\r\nimport VisualizerTutorial from \"../tutorials/visualizerTutorial\";\r\nimport {showVisualizerTutorial} from \"../../actions/tutorialFunctions\";\r\nimport Copyright from \"../ui/copyright\";\r\nimport {LayoutType} from \"./core/constants\";\r\nimport {IS_QKB_UI} from \"../../config\";\r\n\r\nexport const layout = new Layout();\r\n\r\nclass KvSceneVisualizer extends Visualizer {\r\n\r\n static displayName = 'KvSceneVisualizer';\r\n\r\n constructor(props) {\r\n super(props);\r\n this.layout = layout;\r\n }\r\n\r\n componentDidMount() {\r\n console.log(\"kvScene loaded\", );\r\n if (this.props.visualizersLoaded.includes(this.layout.visualizerType)) {\r\n this.setSubscribers();\r\n return false\r\n }\r\n loaderEnable();\r\n Promise.all([\r\n getBathroomVisualizerData(),\r\n this.getQtCategoriesCommon(),\r\n ]).then(baseResponse => {\r\n Promise.all([\r\n Promise.resolve(baseResponse[0]),\r\n getBvGroups(),\r\n Promise.resolve(baseResponse[1])\r\n ])\r\n .then((allResponse) => {\r\n const mainResponse = allResponse[0];\r\n const kvGroupsResponse = allResponse[1].data;\r\n const qtCategories = allResponse[2];\r\n // 1) set default (placeholders)\r\n this.layout.loadNewFeatures(mainResponse);\r\n this.layout.setGroupsItemsCount(kvGroupsResponse); // should be loaded before & after all features are received\r\n return this.setVisualizerInfo(mainResponse, kvGroupsResponse, qtCategories, invert(LayoutType));\r\n })\r\n .then(this.checkShareUrl)\r\n .then(this.onBvLoad)\r\n .then(this.finishLoading);\r\n });\r\n\r\n this.setSubscribers();\r\n // getNavigationButtons();\r\n }\r\n\r\n render() {\r\n\r\n if (!IS_QKB_UI) {\r\n return null\r\n }\r\n\r\n const showPlaceHolders = document.bvConfig ? document.bvConfig.showPlaceholders : false;\r\n const fabricatorSettings = this.props.fabricatorSettings;\r\n const layers = this.layout.getLayers(showPlaceHolders);\r\n const layoutType = this.layout.getCurrentLayoutName();\r\n const layoutScene = this.layout.scene;\r\n const isMobile = this.props.windowWidth < 991;\r\n const showTutorial = this.checkToShowTutorial();\r\n\r\n return (\r\n \r\n {(this.props.bvOpened || this.props.bvVisited) ? (\r\n \r\n this.imageCanvas = node}\r\n layoutType={layoutType}\r\n layout={this.layout}\r\n width={this.props.canvasDimensions.width}\r\n height={this.props.canvasDimensions.height}\r\n useMouseHovering={this.props.useMouseHovering}\r\n useTouchZoom={this.props.useTouchZoom}\r\n />\r\n \r\n ) : null}\r\n \r\n ) : null}\r\n
\r\n {(this.layout.initialized && this.props.bvVisited) ? ( // keep navigation opened if someone got to QT and back\r\n isMobile ? (\r\n \r\n this.navBar = node}\r\n refreshCB={this.handleRefresh}\r\n setHoveredLayer={this.setHoveredLayer}\r\n canvasId={this.state.canvasId}\r\n renderGreenLayerByZindex={this.renderGreenLayerByZindex}\r\n toggleUserPopup={this.props.toggleUserPopup}\r\n changeMessageBoxState={this.changeMessageBoxState}\r\n setActiveFeature={this.setActiveFeature}\r\n activeFeature={this.state.activeFeature}\r\n fabricatorSettings={fabricatorSettings}\r\n setDemoPointClicked={this.setDemoPointClicked}\r\n />\r\n )\r\n ) : null}\r\n {this.props.cookieAccepted ? : null}\r\n {showTutorial ? : null}\r\n
\r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = (store) => {\r\n const {cookieAccepted, windowWidth, visualizersLoaded} = store.serverState;\r\n const {bvOpened, bvVisited, canvasId, showRestorePopup, canvasDimensions, canvasCount} = store.bathroomVisualizerState;\r\n const {mobileNav, desktopNavigationOpened, activeNavigationParentName, activeNavigationChildName} = store.navigationState;\r\n const {isPhoneNumberValidated, userIsLoggedIn} = store.userState;\r\n const {visualizerTutorialIsOpened, visualizerTutorialFinished} = store.tutorialState;\r\n const {initialFlowRoomLayout, initialFlowRoom, initialFlowStep} = store.initialFlowState;\r\n const {qtCategoriesRequested} = store.qtState;\r\n return {\r\n bvOpened,\r\n bvVisited,\r\n mobileNav,\r\n isPhoneNumberValidated,\r\n userIsLoggedIn,\r\n windowWidth,\r\n canvasId,\r\n fabricatorSettings: store.fabricatorState.settings,\r\n desktopNavigationOpened,\r\n activeNavigationParentName,\r\n activeNavigationChildName,\r\n showRestorePopup,\r\n visualizerTutorialIsOpened,\r\n visualizerTutorialFinished,\r\n initialFlowRoomLayout,\r\n initialFlowRoom,\r\n initialFlowStep,\r\n cookieAccepted,\r\n canvasDimensions,\r\n visualizersLoaded,\r\n qtCategoriesRequested,\r\n canvasCount,\r\n };\r\n};\r\n\r\nexport default connect(mapStateToProps, {\r\n setCameFromPage,\r\n toggleBathroomVisualizerOpen,\r\n setDefaultSelectionGroup,\r\n setLayoutDataParts,\r\n toggleUserPopup,\r\n setCanvasId,\r\n loadFilters,\r\n toggleSelectionFeatureInfo,\r\n changeMessageBoxState,\r\n showVisualizerTutorial,\r\n addVisualizersLoaded\r\n})(KvSceneVisualizer);\r\n","import React, {Fragment} from 'react';\r\nimport { connect } from \"react-redux\";\r\nimport invert from \"lodash/invert\";\r\n\r\nimport {loaderEnable} from \"../ui/loaderView\";\r\nimport {\r\n toggleUserPopup, setCanvasId, setLayoutDataParts, setDefaultSelectionGroup, loadFilters, setCameFromPage,\r\n toggleBathroomVisualizerOpen, toggleSelectionFeatureInfo, changeMessageBoxState,\r\n addVisualizersLoaded } from \"../../actions/actionFunctions\";\r\nimport {\r\n getBathroomVisualizerData,\r\n getBvGroups,\r\n getQtCategories,\r\n getNavigationButtons\r\n} from \"../../api/server-api\";\r\nimport ImageCanvasCommon from \"../visComponents/imageCanvasCommon\";\r\nimport {Layout} from \"./core/layout\";\r\nimport DesktopNavigation from \"./navigation/desktopNavigation\";\r\nimport MobileNavigation from \"./navigation/mobileNavigation\";\r\nimport MainButtons from \"../common/mainButtons\";\r\nimport DemoPoints from \"../common/demoPoints/demoPoints\";\r\nimport MessageBox from \"../popups/messageBox\";\r\n\r\nimport Visualizer from \"../visComponents/visualizer\";\r\nimport VisualizerTutorial from \"../tutorials/visualizerTutorial\";\r\nimport {showVisualizerTutorial} from \"../../actions/tutorialFunctions\";\r\nimport Copyright from \"../ui/copyright\";\r\nimport {LayoutType} from \"./core/constants\";\r\nimport {IS_QKB_UI} from \"../../config\";\r\n\r\nexport const layout = new Layout();\r\n\r\nclass BvSceneVisualizer extends Visualizer {\r\n\r\n static displayName = 'BvSceneVisualizer';\r\n\r\n constructor(props) {\r\n super(props);\r\n this.layout = layout;\r\n }\r\n\r\n componentDidMount() {\r\n if (this.props.visualizersLoaded.includes(this.layout.visualizerType)) {\r\n this.setSubscribers();\r\n return false\r\n }\r\n loaderEnable();\r\n Promise.all([\r\n getBathroomVisualizerData(),\r\n getQtCategories(this.layout.getCurrentLayoutAbbreviation())\r\n ]).then(baseResponse => {\r\n Promise.all([\r\n Promise.resolve(baseResponse[0]),\r\n getBvGroups(),\r\n Promise.resolve(baseResponse[1]),\r\n ])\r\n .then((allResponse) => {\r\n const mainResponse = allResponse[0];\r\n const bvGroupsResponse = allResponse[1].data;\r\n const qtCategories = allResponse[2];\r\n this.layout.loadNewFeatures(mainResponse); // 1) set default (placeholders)\r\n this.layout.setGroupsItemsCount(bvGroupsResponse); // should be loaded before & after all features are received\r\n return this.setVisualizerInfo(mainResponse, bvGroupsResponse, qtCategories, invert(LayoutType));\r\n })\r\n .then(this.checkShareUrl)\r\n .then(this.onBvLoad)\r\n .then(this.finishLoading);\r\n });\r\n\r\n this.setSubscribers();\r\n getNavigationButtons();\r\n }\r\n\r\n render() {\r\n\r\n if (!IS_QKB_UI) {\r\n return null\r\n }\r\n\r\n const showPlaceHolders = document.bvConfig ? document.bvConfig.showPlaceholders : false;\r\n const fabricatorSettings = this.props.fabricatorSettings;\r\n const layers = this.layout.getLayers(showPlaceHolders);\r\n const layoutType = this.layout.getCurrentLayoutName();\r\n const isMobile = this.props.windowWidth < 991;\r\n const showTutorial = this.checkToShowTutorial();\r\n\r\n return (\r\n \r\n {(this.props.bvOpened || this.props.bvVisited) ? (\r\n \r\n this.imageCanvas = node}\r\n layoutType={layoutType}\r\n layout={this.layout}\r\n layoutScene={layoutScene}\r\n width={this.props.canvasDimensions.width}\r\n height={this.props.canvasDimensions.height}\r\n useMouseHovering={this.props.useMouseHovering}\r\n useTouchZoom={this.props.useTouchZoom}\r\n />\r\n \r\n ) : null}\r\n \r\n ) : null}\r\n
\r\n {(this.layout.initialized && this.props.bvVisited) ? ( // keep navigation opened if someone got to QT and back\r\n isMobile ? (\r\n \r\n this.navBar = node}\r\n refreshCB={this.handleRefresh}\r\n setHoveredLayer={this.setHoveredLayer}\r\n canvasId={this.state.canvasId}\r\n renderGreenLayerByZindex={this.renderGreenLayerByZindex}\r\n toggleUserPopup={this.props.toggleUserPopup}\r\n changeMessageBoxState={this.changeMessageBoxState}\r\n setActiveFeature={this.setActiveFeature}\r\n activeFeature={this.state.activeFeature}\r\n fabricatorSettings={fabricatorSettings}\r\n setDemoPointClicked={this.setDemoPointClicked}\r\n />\r\n )\r\n ) : null}\r\n {this.props.cookieAccepted ? : null}\r\n {showTutorial ? : null}\r\n
\r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = (store) => {\r\n const {cookieAccepted, windowWidth, visualizersLoaded} = store.serverState;\r\n const {bvOpened, bvVisited, canvasId, showRestorePopup, canvasDimensions, canvasCount} = store.bathroomVisualizerState;\r\n const {mobileNav, desktopNavigationOpened, activeNavigationParentName, activeNavigationChildName} = store.navigationState;\r\n const {isPhoneNumberValidated, userIsLoggedIn} = store.userState;\r\n const {visualizerTutorialIsOpened, visualizerTutorialFinished} = store.tutorialState;\r\n const {initialFlowRoomLayout, initialFlowRoom, initialFlowStep} = store.initialFlowState;\r\n return {\r\n bvOpened,\r\n bvVisited,\r\n mobileNav,\r\n isPhoneNumberValidated,\r\n userIsLoggedIn,\r\n windowWidth,\r\n canvasId,\r\n fabricatorSettings: store.fabricatorState.settings,\r\n desktopNavigationOpened,\r\n activeNavigationParentName,\r\n activeNavigationChildName,\r\n showRestorePopup,\r\n visualizerTutorialIsOpened,\r\n visualizerTutorialFinished,\r\n initialFlowRoomLayout,\r\n initialFlowRoom,\r\n initialFlowStep,\r\n cookieAccepted,\r\n canvasDimensions,\r\n visualizersLoaded,\r\n canvasCount\r\n };\r\n};\r\n\r\nexport default connect(mapStateToProps, {\r\n setCameFromPage,\r\n toggleBathroomVisualizerOpen,\r\n setDefaultSelectionGroup,\r\n setLayoutDataParts,\r\n toggleUserPopup,\r\n setCanvasId,\r\n loadFilters,\r\n toggleSelectionFeatureInfo,\r\n changeMessageBoxState,\r\n showVisualizerTutorial,\r\n addVisualizersLoaded\r\n})(BvSceneVisualizer);\r\n","import React, {Fragment} from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport invert from \"lodash/invert\";\r\n\r\nimport {loaderEnable} from \"../ui/loaderView\";\r\nimport {\r\n toggleUserPopup, setCanvasId, setLayoutDataParts, setDefaultSelectionGroup, loadFilters, setCameFromPage,\r\n toggleBathroomVisualizerOpen, toggleSelectionFeatureInfo, changeMessageBoxState,\r\n addVisualizersLoaded, addToCart, setFirstLoadedPreset, updateCanvasCount\r\n} from \"../../actions/actionFunctions\";\r\nimport {getBathroomVisualizerData, getBvGroups} from \"../../api/server-api\";\r\nimport {Layout} from \"./core/layout\";\r\n\r\nimport Visualizer from \"../visComponents/visualizer\";\r\nimport {IS_QKB_UI} from \"../../config\";\r\nimport {LayoutType, LOCAL_STORAGE_KEYS} from \"./core/constants\";\r\nimport {setLocalStorageItem} from \"./lookNavigation/lookFunctions\";\r\nimport {setLookOverlayOpened} from \"../../actions/lookFunctions\";\r\nimport {getPassedUserInfo, getSaveTempData} from \"../../api/look-api\";\r\nimport Misc from \"../../misc/misc\";\r\nimport ImageCanvasCommonNew from \"../visComponents/imageCanvasCommonNew\";\r\nimport Copyright from \"../ui/copyright\";\r\nimport MainButtons from \"../common/mainButtons\";\r\nimport MobileNavigation from \"./navigation/mobileNavigation\";\r\nimport DesktopNavigation from \"./navigation/desktopNavigation.js\";\r\nimport MessageBox from \"../popups/messageBox\";\r\nimport VisualizerTutorial from \"../tutorials/visualizerTutorial\";\r\nimport {loadAdditionalVisualizerGroups} from \"../../misc/loadVisualizer\";\r\nimport {showVisualizerTutorial} from \"../../actions/tutorialFunctions\";\r\n\r\nexport const layout = new Layout();\r\n\r\nclass LookVisualizer extends Visualizer {\r\n\r\n static displayName = 'BvLookVisualizer';\r\n\r\n constructor(props) {\r\n super(props);\r\n this.layout = layout;\r\n }\r\n\r\n componentDidMount() {\r\n if (this.props.visualizersLoaded.includes(this.layout.visualizerType)) {\r\n this.setSubscribers();\r\n return false\r\n }\r\n if (!IS_QKB_UI) {\r\n this.props.toggleBathroomVisualizerOpen(true);\r\n }\r\n loaderEnable();\r\n Promise.all([\r\n getBathroomVisualizerData(),\r\n loadAdditionalVisualizerGroups(\"bvLook\"),\r\n this.getQtCategoriesCommon(),\r\n ]).then(baseResponse => {\r\n let otherData = [\r\n Promise.resolve(baseResponse[0]),\r\n Promise.resolve(baseResponse[1]),\r\n Promise.resolve(baseResponse[2]),\r\n getBvGroups(),\r\n ];\r\n const searchParams = new URLSearchParams(\r\n (window.location.search).replace(/amp;/g, \"\")\r\n || (window.location.hash).replace(/(.*)\\?/g, \"\")\r\n || \"\"\r\n );\r\n // console.log(\"searchParams\", searchParams.toString());\r\n if (searchParams && searchParams.get(\"userid\")) {\r\n otherData.push(getPassedUserInfo(searchParams))\r\n }\r\n if (searchParams && (searchParams.get(\"tempID\") || searchParams.get(\"TempID\"))) {\r\n otherData.push(getSaveTempData(searchParams.get(\"tempID\") || searchParams.get(\"TempID\")))\r\n }\r\n Promise.all(otherData)\r\n .then((allResponse) => {\r\n const mainResponse = allResponse[0];\r\n const decorAndAttachmentResponses = Array.isArray(allResponse[1]) ? allResponse[1] : [];\r\n const qtCategories = allResponse[2];\r\n const bvGroupsResponse = allResponse[3];\r\n const userDataResponse = allResponse[4];\r\n const savedTempData = JSON.parse(searchParams && searchParams.get(\"userid\") ? allResponse[5] || null : allResponse[4] || null);\r\n this.layout.loadNewFeatures(Object.assign({}, mainResponse, {\r\n features: [...mainResponse.features, ...decorAndAttachmentResponses]\r\n })); // 1) set default (placeholders)\r\n // this.layout.setGroupsItemsCount(mainResponse);\r\n let userIsLoggedIn = false;\r\n if (userDataResponse && userDataResponse.email) {\r\n userIsLoggedIn = true;\r\n this.needToSaveQuote = !document.kvConfig.jobId;\r\n console.log(\"userDataResponse\", userDataResponse);\r\n const updatedUserInfo = Misc.parseUserResponse(userDataResponse)\r\n setLocalStorageItem(LOCAL_STORAGE_KEYS.introVisited, true);\r\n\r\n this.props.toggleUserPopup({\r\n userPopupOpened: false,\r\n userIsLoggedIn: true,\r\n isPhoneNumberValidated: userDataResponse.isPhoneNumberValidated || !userDataResponse.pendingPhoneVerification,\r\n userInfo: updatedUserInfo,\r\n // email: userDataResponse.email,\r\n encodedUserId: userDataResponse.encodedUserId,\r\n // phoneNumber: userDataResponse.phoneNumber,\r\n // values: userDataResponse.values\r\n })\r\n }\r\n return this.setVisualizerInfo(\r\n mainResponse,\r\n bvGroupsResponse ? bvGroupsResponse.data : {},\r\n qtCategories,\r\n invert(LayoutType),\r\n userIsLoggedIn,\r\n savedTempData\r\n );\r\n })\r\n .then(this.checkShareUrl)\r\n .then(this.onBvLoad)\r\n .then(this.finishLoading);\r\n });\r\n\r\n this.setSubscribers();\r\n }\r\n\r\n render() {\r\n if (!IS_QKB_UI) {\r\n return null\r\n }\r\n\r\n const showPlaceHolders = document.bvConfig ? document.bvConfig.showPlaceholders : false;\r\n const fabricatorSettings = this.props.fabricatorSettings;\r\n const layers = this.layout.getLayers(showPlaceHolders);\r\n const layoutType = this.layout.getCurrentLayoutName();\r\n const layoutScene = this.layout.scene;\r\n const isMobile = this.props.windowWidth < 991;\r\n const showTutorial = this.checkToShowTutorial();\r\n\r\n return (\r\n \r\n {this.props.bvOpened || this.props.bvVisited ? (\r\n \r\n this.imageCanvas = node}\r\n layoutType={layoutType}\r\n layout={this.layout}\r\n width={this.props.canvasDimensions.width}\r\n height={this.props.canvasDimensions.height}\r\n useMouseHovering={this.props.useMouseHovering}\r\n useTouchZoom={this.props.useTouchZoom}\r\n />\r\n \r\n ) : null}\r\n \r\n ) : null}\r\n
\r\n {(this.layout.initialized && this.props.bvVisited) ? ( // keep navigation opened if someone got to QT and back\r\n isMobile ? (\r\n \r\n this.navBar = node}\r\n refreshCB={this.handleRefresh}\r\n setHoveredLayer={this.setHoveredLayer}\r\n canvasId={this.state.canvasId}\r\n renderGreenLayerByZindex={this.renderGreenLayerByZindex}\r\n toggleUserPopup={this.props.toggleUserPopup}\r\n changeMessageBoxState={this.changeMessageBoxState}\r\n setActiveFeature={this.setActiveFeature}\r\n activeFeature={this.state.activeFeature}\r\n fabricatorSettings={fabricatorSettings}\r\n setDemoPointClicked={this.setDemoPointClicked}\r\n />\r\n )\r\n ) : null}\r\n {this.props.cookieAccepted ? : null}\r\n {showTutorial ? : null}\r\n
\r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = (store) => {\r\n const {windowWidth, cookieAccepted, visualizersLoaded} = store.serverState;\r\n const {canvasId} = store.bathroomVisualizerState;\r\n const {isPhoneNumberValidated, userIsLoggedIn} = store.userState;\r\n const {activePreset} = store.bathroomVisualizerState;\r\n\r\n if (!IS_QKB_UI) {\r\n return {\r\n isPhoneNumberValidated,\r\n userIsLoggedIn,\r\n windowWidth,\r\n canvasId,\r\n activePreset,\r\n fabricatorSettings: store.fabricatorState.settings,\r\n qtActiveCategory: store.qtState.qtActiveCategory,\r\n visualizersLoaded,\r\n };\r\n }\r\n\r\n const {bvOpened, bvVisited, showRestorePopup, canvasDimensions, canvasCount} = store.bathroomVisualizerState;\r\n const {mobileNav, desktopNavigationOpened, activeNavigationParentName, activeNavigationChildName} = store.navigationState;\r\n const {visualizerTutorialIsOpened, visualizerTutorialFinished} = store.tutorialState;\r\n const {initialFlowRoomLayout, initialFlowRoom, initialFlowStep} = store.initialFlowState;\r\n const {qtCategoriesRequested} = store.qtState;\r\n\r\n return {\r\n isPhoneNumberValidated,\r\n userIsLoggedIn,\r\n windowWidth,\r\n canvasId,\r\n activePreset,\r\n fabricatorSettings: store.fabricatorState.settings,\r\n qtActiveCategory: store.qtState.qtActiveCategory,\r\n //** qkb ui ** //\r\n bvOpened,\r\n bvVisited,\r\n mobileNav,\r\n desktopNavigationOpened,\r\n activeNavigationParentName,\r\n activeNavigationChildName,\r\n showRestorePopup,\r\n visualizerTutorialIsOpened,\r\n visualizerTutorialFinished,\r\n initialFlowRoomLayout,\r\n initialFlowRoom,\r\n initialFlowStep,\r\n cookieAccepted,\r\n canvasDimensions,\r\n visualizersLoaded,\r\n qtCategoriesRequested,\r\n canvasCount,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n setCameFromPage,\r\n toggleBathroomVisualizerOpen,\r\n setDefaultSelectionGroup,\r\n setLayoutDataParts,\r\n toggleUserPopup,\r\n setCanvasId,\r\n loadFilters,\r\n toggleSelectionFeatureInfo,\r\n changeMessageBoxState,\r\n addVisualizersLoaded,\r\n addToCart,\r\n setLookOverlayOpened,\r\n setFirstLoadedPreset,\r\n updateCanvasCount,\r\n showVisualizerTutorial,\r\n};\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(LookVisualizer)\r\n","import React, {Fragment} from 'react';\r\nimport { connect } from \"react-redux\";\r\nimport {loaderEnable} from \"../ui/loaderView\";\r\nimport {\r\n toggleUserPopup, setCanvasId, setLayoutDataParts, setDefaultSelectionGroup, loadFilters, setCameFromPage,\r\n toggleBathroomVisualizerOpen, toggleSelectionFeatureInfo, changeMessageBoxState,\r\n addVisualizersLoaded } from \"../../actions/actionFunctions\";\r\nimport {\r\n getBathroomVisualizerData,\r\n getBvGroups,\r\n getQtCategories,\r\n getNavigationButtons\r\n} from \"../../api/server-api\";\r\nimport ImageCanvasCommonNew from \"../visComponents/imageCanvasCommonNew\";\r\nimport {Layout} from \"./core/layout\";\r\nimport DesktopNavigation from \"./navigation/desktopNavigation\";\r\nimport MobileNavigation from \"./navigation/mobileNavigation\";\r\nimport MainButtons from \"../common/mainButtons\";\r\nimport DemoPoints from \"../common/demoPoints/demoPoints\";\r\nimport MessageBox from \"../popups/messageBox\";\r\n\r\nimport Visualizer from \"../visComponents/visualizer\";\r\nimport VisualizerTutorial from \"../tutorials/visualizerTutorial\";\r\nimport {showVisualizerTutorial} from \"../../actions/tutorialFunctions\";\r\nimport Copyright from \"../ui/copyright\";\r\nimport {IS_QKB_UI} from \"../../config\";\r\n\r\nexport const layout = new Layout();\r\n\r\nclass FireplaceVisualizer extends Visualizer {\r\n\r\n static displayName = 'FireplaceVisualizer';\r\n\r\n constructor(props) {\r\n super(props);\r\n this.layout = layout;\r\n }\r\n\r\n componentDidMount() {\r\n if (this.props.visualizersLoaded.includes(this.layout.visualizerType)) {\r\n this.setSubscribers();\r\n return false\r\n }\r\n loaderEnable();\r\n Promise.all([\r\n getBathroomVisualizerData(),\r\n getQtCategories(this.layout.getCurrentLayoutAbbreviation())\r\n ]).then(baseResponse => {\r\n Promise.all([\r\n Promise.resolve(baseResponse[0]),\r\n getBvGroups(),\r\n Promise.resolve(baseResponse[1])\r\n ])\r\n .then((allResponse) => {\r\n const mainResponse = allResponse[0];\r\n const kvGroupsResponse = allResponse[1].data;\r\n const qtCategories = allResponse[2];\r\n // 1) set default (placeholders)\r\n this.layout.loadNewFeatures(mainResponse);\r\n this.layout.setGroupsItemsCount(kvGroupsResponse); // should be loaded before & after all features are received\r\n return this.setVisualizerInfo(mainResponse, kvGroupsResponse, qtCategories);\r\n })\r\n .then(this.checkShareUrl)\r\n .then(this.onBvLoad)\r\n .then(this.finishLoading);\r\n });\r\n\r\n this.setSubscribers();\r\n getNavigationButtons(\"kv\");\r\n }\r\n\r\n render() {\r\n\r\n if (!IS_QKB_UI) {\r\n return null\r\n }\r\n\r\n const showPlaceHolders = document.bvConfig ? document.bvConfig.showPlaceholders : false;\r\n const fabricatorSettings = this.props.fabricatorSettings;\r\n const layers = this.layout.getLayers(showPlaceHolders);\r\n const layoutType = this.layout.getCurrentLayoutName();\r\n const isMobile = this.props.windowWidth < 991;\r\n const showTutorial = this.checkToShowTutorial();\r\n\r\n return (\r\n \r\n {this.props.bvOpened || this.props.bvVisited ? (\r\n \r\n this.imageCanvas = node}\r\n layoutType={layoutType}\r\n layout={this.layout}\r\n layoutScene={layoutScene}\r\n width={this.props.canvasDimensions.width}\r\n height={this.props.canvasDimensions.height}\r\n useMouseHovering={this.props.useMouseHovering}\r\n useTouchZoom={this.props.useTouchZoom}\r\n />\r\n \r\n ) : null}\r\n
\r\n {(this.layout.initialized && this.props.bvVisited) ? ( // keep navigation opened if someone got to QT and back\r\n isMobile ? (\r\n \r\n this.navBar = node}\r\n refreshCB={this.handleRefresh}\r\n setHoveredLayer={this.setHoveredLayer}\r\n canvasId={this.state.canvasId}\r\n renderGreenLayerByZindex={this.renderGreenLayerByZindex}\r\n toggleUserPopup={this.props.toggleUserPopup}\r\n changeMessageBoxState={this.changeMessageBoxState}\r\n setActiveFeature={this.setActiveFeature}\r\n activeFeature={this.state.activeFeature}\r\n fabricatorSettings={fabricatorSettings}\r\n setDemoPointClicked={this.setDemoPointClicked}\r\n />\r\n )\r\n ) : null}\r\n {this.props.cookieAccepted ? : null}\r\n {showTutorial ? : null}\r\n
\r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = (store) => {\r\n const {cookieAccepted, windowWidth, visualizersLoaded} = store.serverState;\r\n const {bvOpened, bvVisited, canvasId, showRestorePopup, canvasDimensions, canvasCount} = store.bathroomVisualizerState;\r\n const {mobileNav, desktopNavigationOpened, activeNavigationParentName, activeNavigationChildName} = store.navigationState;\r\n const {isPhoneNumberValidated, userIsLoggedIn} = store.userState;\r\n const {visualizerTutorialIsOpened, visualizerTutorialFinished} = store.tutorialState;\r\n const {initialFlowRoomLayout, initialFlowRoom, initialFlowStep} = store.initialFlowState;\r\n return {\r\n bvOpened,\r\n bvVisited,\r\n mobileNav,\r\n isPhoneNumberValidated,\r\n userIsLoggedIn,\r\n windowWidth,\r\n canvasId,\r\n fabricatorSettings: store.fabricatorState.settings,\r\n desktopNavigationOpened,\r\n activeNavigationParentName,\r\n activeNavigationChildName,\r\n showRestorePopup,\r\n visualizerTutorialIsOpened,\r\n visualizerTutorialFinished,\r\n initialFlowRoomLayout,\r\n initialFlowRoom,\r\n initialFlowStep,\r\n cookieAccepted,\r\n canvasDimensions,\r\n visualizersLoaded,\r\n canvasCount\r\n };\r\n};\r\n\r\nexport default connect(mapStateToProps, {\r\n setCameFromPage,\r\n toggleBathroomVisualizerOpen,\r\n setDefaultSelectionGroup,\r\n setLayoutDataParts,\r\n toggleUserPopup,\r\n setCanvasId,\r\n loadFilters,\r\n toggleSelectionFeatureInfo,\r\n changeMessageBoxState,\r\n showVisualizerTutorial,\r\n addVisualizersLoaded\r\n})(FireplaceVisualizer);\r\n","import invert from 'lodash/invert';\r\nimport snakeCase from 'lodash/snakeCase';\r\n\r\nimport LayoutCommonNew from \"../../visComponents/layoutCommonNew\";\r\nimport {LayoutType, LayoutAbbreviation} from \"./constants\";\r\nimport zIndexes from \"./zIndex\";\r\nimport Other from \"./parts/other\";\r\nimport NonVisualizerSubPart from \"./subparts/nonVisualizerSubPart\";\r\nimport DesignNavigationItem from \"../../visComponents/designNavigationItem\";\r\nimport Background from \"./parts/background\";\r\nimport Floor from \"./parts/floor\";\r\nimport Walls from \"./parts/walls\";\r\nimport {AVAILABLE_VISUALIZER_TYPES} from \"../../../config\";\r\nimport Globals from \"./parts/globals\";\r\nimport Cabinet from \"./parts/cabinet\";\r\nimport Accessories from \"./parts/accessories\";\r\n\r\nexport class LaundryRoomLayout extends LayoutCommonNew {\r\n\r\n /**\r\n * @type {int}\r\n */\r\n defaultType = LayoutType.Layout41;\r\n type = this.defaultType;\r\n scene = \"1\";\r\n visualizerType = AVAILABLE_VISUALIZER_TYPES.LaundryRoom;\r\n localStorageKey = \"LaundryRoomState\";\r\n layersBinding = \"LaundryRoom\";\r\n layoutNames = LayoutAbbreviation;\r\n layoutTypes = LayoutType;\r\n layoutThumbnails = {};\r\n zIndexes = zIndexes.layouts;\r\n excludedPartIdsFromHover = [\"decor_\", \"background_bg\", \"walls_ceiling\", \"attachment\"];\r\n\r\n constructor(props) {\r\n super(props);\r\n this.parts[Globals.id] = new Globals();\r\n this.parts[Background.id] = new Background();\r\n this.parts[Cabinet.id] = new Cabinet();\r\n this.parts[Walls.id] = new Walls();\r\n this.parts[Floor.id] = new Floor();\r\n this.parts[Accessories.id] = new Accessories();\r\n this.parts[Other.id] = new Other();\r\n Object.values(this.parts).forEach(part => part.layout = this);\r\n }\r\n\r\n getCurrentLayoutName(type = this.type) {\r\n return invert(LayoutType)[type];\r\n }\r\n\r\n getCurrentLayoutAbbreviation() {\r\n return LayoutAbbreviation[this.getCurrentLayoutName()]\r\n }\r\n\r\n addNonVisualizerSubPart(featureGroupName){\r\n const otherParent = this.parts[Other.id];\r\n const partId = snakeCase(featureGroupName);\r\n let relatedItem = otherParent.relatedItems.find(relatedItem => relatedItem.partId === partId);\r\n if (!relatedItem) {\r\n relatedItem = new NonVisualizerSubPart(true, partId, featureGroupName);\r\n relatedItem.getParent = () => otherParent;\r\n otherParent.relatedItems.push(relatedItem);\r\n }\r\n return new DesignNavigationItem(relatedItem.partName, relatedItem)\r\n }\r\n\r\n addSpecificPropertiesToLocalStorage(bvState, useNames, returnAllFeatures= false) {\r\n const cabinet = this.parts[Cabinet.id];\r\n if (cabinet && cabinet.slatWall) {\r\n bvState.slatWallType = cabinet.slatWall.slatWallType;\r\n }\r\n return super.addSpecificPropertiesToLocalStorage(bvState, useNames, returnAllFeatures)\r\n }\r\n\r\n setActiveFeaturesFromObject(...props) {\r\n const cabinet = this.parts[Cabinet.id];\r\n if (cabinet && cabinet.slatWall && props.slatWallType) {\r\n cabinet.slatWall.slatWallType = props.slatWallType;\r\n }\r\n return super.setActiveFeaturesFromObject(...props)\r\n }\r\n\r\n}\r\n\r\nexport default new LaundryRoomLayout()\r\n","import React, {Component} from 'react';\r\nimport {FormattedMessage} from \"react-intl\";\r\n\r\nimport {BathTubType} from \"../bvComponent/core/constants\";\r\nimport {changeQTRoutePath, changeRoutePath} from \"../../misc/changeRoutePath\";\r\nimport {getCurrentLayout} from \"../appLayout\";\r\n\r\nexport default class ProjectScopeFunctions extends Component {\r\n\r\n goToMaterialsPageCommon = (subPart, parentName) => {\r\n const layout = getCurrentLayout();\r\n let nextSubPartIndex = 0;\r\n // console.log('subPart', subPart);\r\n if (subPart.partId === \"bathtub\") {\r\n // console.log('subPart', subPart.getParent());\r\n subPart.getParent().handleSubTypeClick(BathTubType.FreeStanding)\r\n }\r\n const subPartName = subPart.partName.replace(/ /g,\"-\").toLowerCase();\r\n if (layout.qtCategories) {\r\n const qtCategory = layout.qtCategories.find(qtCategory => qtCategory.name === parentName);\r\n nextSubPartIndex = qtCategory.subParts.findIndex(subPartItem => {\r\n return subPartItem.part.partId === subPart.partId\r\n });\r\n this.props.setQtActiveCategory(parentName);\r\n } else if (subPart.getParent) {\r\n const subParts = subPart.getParent().subParts(false);\r\n nextSubPartIndex = subParts.findIndex(subPartItem => {\r\n return subPartItem.part.partName.replace(/ /g,\"-\").toLowerCase() === subPartName\r\n });\r\n }\r\n this.props.changeActivePartRelatedItemIndex(nextSubPartIndex);\r\n const parentSimple = (subPart.partName === \"Floor\" && subPart.partId !== \"shower_floor\")\r\n || subPart.partName === \"Toilet\"\r\n || (subPart.partName === \"Ceiling\" &&\r\n (document.kvConfig.visualizerType === \"Bathroom\" || document.kvConfig.visualizerType === \"BV\"))\r\n || subPart.partName === \"Window\";\r\n this.props.toggleSelectionWindow(true, parentSimple ? subPart.partName : subPart.getParent().partName);\r\n this.props.setCameFromPage('quote-design');\r\n if (layout.qtCategories) {\r\n changeQTRoutePath(parentName, nextSubPartIndex);\r\n } else {\r\n changeRoutePath(subPart.getParent ? subPart.getParent() : subPart, nextSubPartIndex, false);\r\n }\r\n };\r\n\r\n getBathroomHomeSections = () => {\r\n const layout = getCurrentLayout();\r\n let\r\n vanityItems = [],\r\n showerAndBathTubItems = [],\r\n otherItems = [];\r\n\r\n if (layout.qtCategories) {\r\n // console.log(\"parentParts\", parentParts);\r\n return layout.qtCategories.map((qtCategory) => {\r\n return {\r\n title: qtCategory.name,\r\n // items: this.checkForWallsComplexGroup(qtCategory)\r\n items: qtCategory.subParts\r\n }\r\n });\r\n }\r\n\r\n layout.getFeatures().forEach((parentGroup) => {\r\n // console.log(partData);\r\n let subParts = parentGroup.subParts();\r\n if (parentGroup) {\r\n if (parentGroup.partName === \"Vanity\") {\r\n subParts.forEach((subPart) => {\r\n if (subPart.part.partId !== \"accent_wall\") {\r\n vanityItems.push(subPart)\r\n }\r\n });\r\n } else if (parentGroup.partName === \"Shower\") {\r\n subParts.forEach((subPart) => {\r\n showerAndBathTubItems.push(subPart)\r\n });\r\n } else if (parentGroup.partName === \"Shower Tub Combo\") {\r\n const excluded = [\"wall_configuration\", \"shower_interior_wall\", \"shower_interior_wall_accent\", \"shower_fixture\", \"shower_door\", \"shower_door_handle\"];\r\n subParts.forEach((subPart) => {\r\n if (!excluded.includes(subPart.part.partId)) {\r\n showerAndBathTubItems.push(subPart)\r\n }\r\n });\r\n } else if (parentGroup.partName === \"Bathtub\") {\r\n // console.log(parentGroup);\r\n if (parentGroup.bathTubBody) {\r\n showerAndBathTubItems.push({\r\n text: parentGroup.bathTubBody.partName,\r\n part: parentGroup.bathTubBody\r\n });\r\n }\r\n if (parentGroup.bathTubFixture) {\r\n showerAndBathTubItems.push({\r\n text: parentGroup.bathTubFixture.partName,\r\n part: parentGroup.bathTubFixture\r\n });\r\n }\r\n } else {\r\n subParts.forEach((subPart) => {\r\n if ((!subPart.part.partId.includes(\"wall\") || subPart.part.partId === \"wall_c\")\r\n && subPart.part.partId !== \"shower_fixture\" && !subPart.part.disableOnHomeSections) {\r\n otherItems.push(subPart)\r\n }\r\n });\r\n }\r\n }\r\n });\r\n\r\n return [\r\n {\r\n title: \r\n {this.props.bvOpened || this.props.bvVisited ? (\r\n \r\n this.imageCanvas = node}\r\n layoutType={layoutType}\r\n layout={this.layout}\r\n width={this.props.canvasDimensions.width}\r\n height={this.props.canvasDimensions.height}\r\n useMouseHovering={this.props.useMouseHovering}\r\n useTouchZoom={this.props.useTouchZoom}\r\n />\r\n \r\n ) : null}\r\n \r\n ) : null}\r\n
\r\n {(this.layout.initialized && this.props.bvVisited) ? ( // keep navigation opened if someone got to QT and back\r\n isMobile ? (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n {/*\r\n { headerTitle ? headerTitle : featureGroupName }\r\n
\r\n */}\r\n {/* */}\r\n {/* /!**!/*/}\r\n {/*
*/}\r\n \r\n {withShipping ? null : }\r\n \r\n : }\r\n
\r\n {isBundle && bundleExpanded ? \r\n \r\n
\r\n \r\n \r\n {isBundle\r\n ? \r\n : null}\r\n
\r\n {(isMobile && withShipping) || !fabricatorSettings.showPricing ? null : (\r\n \r\n {IS_LIXIL_SERVERS\r\n ?
\r\n
\r\n {isBundleParent ? null : (\r\n inStock ? : outOfStock\r\n )}\r\n
\r\n )}\r\n {isBundle ? (\r\n \r\n {expandBundleButton}\r\n
\r\n ) : null}\r\n {isBundleParent ? null : (\r\n \r\n \r\n
\r\n )}\r\n {(isMobile && withShipping) || !fabricatorSettings.showPricing ? null\r\n : IS_PRODUCT_JOURNEY\r\n ? \r\n {this.props.smallButton ? (\r\n \r\n ) : (\r\n \r\n )}\r\n
\r\n ) : null\r\n }\r\n}\r\n\r\nconst mapStateToProps = (store) => {\r\n return {\r\n layoutParts: store.stepsState.layoutParts,\r\n mobileNav: store.navigationState.mobileNav\r\n };\r\n};\r\n\r\nexport default connect(mapStateToProps, {\r\n toggleSelectionWindow,\r\n setCameFromPage,\r\n setQtActiveCategory,\r\n changeActivePartRelatedItemIndex\r\n})(MobileMenu);\r\n","import React from \"react\";\r\nimport PropTypes from \"prop-types\";\r\nimport {connect} from \"react-redux\";\r\nimport {injectIntl} from \"react-intl\";\r\n\r\nimport {toFixedFeatureCost, TAX_DISCOUNT_PCT, getFeatureUnit, getPriceWithCurrency} from \"../../../misc/helpers\";\r\nimport {cartItemInterface} from \"../../shoppingCart/cartItemInterface\";\r\nimport {getPriceWithIncluded} from \"../../../misc/priceFunctions\";\r\nimport FeaturePriceInput from \"./featurePriceInput\";\r\n\r\nconst FeatureInfoPrice = (props) => {\r\n\r\n let {\r\n mainFeaturePrice = false,\r\n selectionFeatureInfo,\r\n showDiscount = false,\r\n fabricatorData,\r\n isPhoneNumberValidated,\r\n intl,\r\n unitAfter,\r\n withTotalSlabCost,\r\n cartItemEditFeature,\r\n qtActiveCategory,\r\n showPrice,\r\n } = props;\r\n const fabricatorSettings = fabricatorData.settings;\r\n\r\n if (mainFeaturePrice && fabricatorSettings.leadCaptureShoppingCart && !isPhoneNumberValidated) {\r\n return null\r\n }\r\n\r\n if ((typeof showPrice !== 'undefined') && !showPrice && !(document.kvConfig.isBackend && selectionFeatureInfo && selectionFeatureInfo.dbFeature\r\n && selectionFeatureInfo.dbFeature.priceEditable)) {\r\n return null\r\n }\r\n\r\n selectionFeatureInfo = props.feature || selectionFeatureInfo;\r\n\r\n let quantity = 1;\r\n if (mainFeaturePrice) { // price is changing depending on quantity\r\n quantity = (props.accItemQuantity || (props.accItemQuantity === 0))\r\n ? props.accItemQuantity\r\n : props.selectionInfoQuantity || 1\r\n }\r\n const price = toFixedFeatureCost(selectionFeatureInfo, quantity, qtActiveCategory, withTotalSlabCost, cartItemEditFeature);\r\n const salePercentage = TAX_DISCOUNT_PCT;\r\n const priceOld = Math.trunc((price + price*salePercentage/100) * 100) / 100;\r\n\r\n if (mainFeaturePrice) {\r\n return (\r\n \r\n
\r\n \r\n \r\n
\r\n {this.props.mobileNav && this.props.mobileNav.length > 0 ?\r\n \r\n : null }\r\n \r\n \r\n
\r\n )\r\n }\r\n\r\n const unit = getFeatureUnit(selectionFeatureInfo, intl, fabricatorData, quantity);\r\n\r\n const getPriceSection = () => {\r\n\r\n // if unitAfter then it is row item, we don't need it to show in row view\r\n if (!unitAfter && document.kvConfig.isBackend && selectionFeatureInfo && selectionFeatureInfo.dbFeature\r\n && selectionFeatureInfo.dbFeature.priceEditable) {\r\n return \r\n {getPriceWithIncluded(price, selectionFeatureInfo, fabricatorData, intl.messages)}\r\n
\r\n {/*(${selectionFeatureInfo.dbFeature.unit || \"Each\"})
*/}\r\n \r\n \r\n {!price\r\n ? getPriceWithIncluded(price, selectionFeatureInfo, fabricatorData, intl.messages)\r\n : unitAfter\r\n ? getPriceWithCurrency(fabricatorSettings, price, selectionFeatureInfo)\r\n : `${getPriceWithCurrency(fabricatorSettings, price, selectionFeatureInfo)} (${unit})`}\r\n \r\n {price && unitAfter ? ({unit}) : null}\r\n
\r\n )\r\n }\r\n\r\n return (\r\n \r\n {showDiscount && price ? {getPriceWithCurrency(fabricatorSettings, priceOld, selectionFeatureInfo)} : null}\r\n {getPriceSection()}\r\n {showDiscount && price ? (\r\n \r\n {`${intl.formatMessage({id: \"quotingTool.featureInfo.discountSavePercent\"})} ${getPriceWithCurrency(fabricatorSettings, Math.trunc((priceOld - price) * 100) / 100, selectionFeatureInfo)} (${salePercentage}%)`}\r\n \r\n ) : null}\r\n
\r\n )\r\n};\r\n\r\nconst mapStateToProps = (store) => {\r\n return {\r\n selectionFeatureInfo: store.selectionState.selectionFeatureInfo,\r\n featureInfoCount: store.selectionState.featureInfoCount, // to update component when price is changed\r\n fabricatorData: store.fabricatorState,\r\n isPhoneNumberValidated: store.userState.isPhoneNumberValidated,\r\n selectionInfoQuantity: store.selectionState.selectionInfoQuantity,\r\n qtActiveCategory: store.qtState.qtActiveCategory,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n\r\n};\r\n\r\nFeatureInfoPrice.propTypes = {\r\n feature: PropTypes.object,\r\n mainFeaturePrice: PropTypes.bool,\r\n accItemQuantity: PropTypes.number,\r\n size: PropTypes.string,\r\n unitAfter: PropTypes.bool,\r\n withTotalSlabCost: PropTypes.bool,\r\n showPrice: PropTypes.bool,\r\n cartItemEditFeature: PropTypes.shape(cartItemInterface),\r\n};\r\n\r\nexport default injectIntl(\r\n connect(mapStateToProps, mapDispatchToProps)(FeatureInfoPrice)\r\n);\r\n","export const getListItemHeight = (props) => {\r\n\r\n const {isMobile, selectionWindowView, itemsList} = props;\r\n\r\n // console.log(\"itemsList\", itemsList);\r\n\r\n if (isMobile || !itemsList || !itemsList.current) {\r\n return 0\r\n }\r\n let widthPercentage = 32.3;\r\n switch(selectionWindowView) {\r\n case 1:\r\n widthPercentage = 32.3;\r\n break;\r\n case 2:\r\n widthPercentage = 24;\r\n break;\r\n case 3:\r\n widthPercentage = 19;\r\n break;\r\n default:\r\n break;\r\n }\r\n return Math.round(itemsList.current.clientWidth*widthPercentage/100);\r\n\r\n};\r\n\r\nexport const shouldReplaceSelectionInfoFeature = (selectedFeature) => {\r\n if ((document.kvConfig.visualizerType === \"bvScene\" || document.kvConfig.visualizerType === \"bvLook\")\r\n && selectedFeature.getParent) {\r\n const featureG = selectedFeature.getParent();\r\n if (featureG && featureG.oneLayerPosition && featureG.activeFeature\r\n && (featureG.activeFeature.dbFeature.id !== selectedFeature.dbFeature.id)\r\n && featureG.activeFeature.getMatchingFeatureName && selectedFeature.getMatchingFeatureName\r\n && (featureG.activeFeature.getMatchingFeatureName() === selectedFeature.getMatchingFeatureName())) {\r\n selectedFeature = featureG.activeFeature; // we changed left change to right in nav position modal\r\n }\r\n }\r\n return selectedFeature\r\n}\r\n","import React, {Component, Fragment} from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport {connect} from \"react-redux\";\r\nimport {FormattedMessage, injectIntl} from \"react-intl\";\r\n\r\nimport {\r\n setCameFromPage,\r\n toggleSelectionFeatureInfo\r\n} from \"../../../actions/actionFunctions\";\r\n\r\nimport {UserPopupTypes} from \"../../visComponents/constants\";\r\nimport Analytics from \"../../../analytics\";\r\nimport {getFeatureIsLocked, toFixedFeatureCost} from '../../../misc/helpers';\r\nimport FeatureThumbnail from \"../../visComponents/featureThumbnail\";\r\nimport FeatureName from \"../../visComponents/featureName\";\r\nimport FeatureCartItemsCount from \"../featureCartItemsCount\";\r\nimport {getPriceWithIncluded} from \"../../../misc/priceFunctions\";\r\nimport Config from \"../../../config\";\r\nimport {wizardGroupInterface} from \"../../../interfaces/wizardItemInterface\";\r\nimport {shouldReplaceSelectionInfoFeature} from \"../../qkbPages/materialsCommon/materialsCommonFunctions\";\r\n// import MaterialsWizardAddToCartAndSkipButton\r\n// from \"../../qkbPages/materialsWizard/materialsWizardAddToCartAndSkipButton\";\r\n\r\nclass SelectionGridItem extends Component {\r\n\r\n static propTypes = {\r\n currentFeature: PropTypes.object.isRequired,\r\n handleFeatureClick: PropTypes.func.isRequired,\r\n checkIfFeatureSelected: PropTypes.func.isRequired,\r\n styles: PropTypes.object.isRequired,\r\n handleUserLoginClick: PropTypes.func.isRequired,\r\n isWizard: PropTypes.bool,\r\n wizardGroup: PropTypes.shape(wizardGroupInterface),\r\n };\r\n\r\n // handleInfoClick = () => {\r\n // const {isPhoneNumberValidated, fabricatorData, currentFeature, handleUserLoginClick} = this.props;\r\n // const fabricatorSettings = fabricatorData.settings;\r\n //\r\n // if ((fabricatorSettings.leadCaptureOnQuote && !(document.kvConfig.isBackend && document.kvConfig.jobId && document.kvConfig.canSaveQuote)) && (!currentFeature.part.dbFeature.unlocked && !isPhoneNumberValidated)){\r\n // handleUserLoginClick();\r\n // } else {\r\n // toggleSelectionFeatureInfo(currentFeature.part);\r\n // }\r\n // };\r\n\r\n goToFeatureInfo = () => {\r\n const selectedFeature = shouldReplaceSelectionInfoFeature(this.props.currentFeature.part);\r\n this.props.toggleSelectionFeatureInfo(selectedFeature);\r\n this.props.setCameFromPage(\"materials\"); // no more visualizer or shoppingcart switch\r\n };\r\n\r\n render() {\r\n\r\n const {currentFeature, fabricatorData, isPhoneNumberValidated, styles, showAdvancedQuoting, qtActiveCategory, intl,\r\n language, isWizard, wizardGroup} = this.props;\r\n const selected = this.props.checkIfFeatureSelected(currentFeature.part);\r\n const fabricatorSettings = this.props.fabricatorData.settings;\r\n const featureIsLocked = getFeatureIsLocked(currentFeature.part);\r\n\r\n const wizardSkipAndAddToCartButtonVisible = isWizard && wizardGroup && wizardGroup.skipProductInfo;\r\n\r\n const getQuoteEnabled = fabricatorSettings.enableQuote && !featureIsLocked;\r\n const quoteOrUnlockButtonVisible = (featureIsLocked || (getQuoteEnabled && !isPhoneNumberValidated))\r\n && !wizardSkipAndAddToCartButtonVisible;\r\n\r\n const showPrice = fabricatorSettings.showPricing && !fabricatorData.hideCheckoutBreakdownCost && !featureIsLocked && !fabricatorData.hidePricesFromUser;\r\n\r\n const isAddToCartButtonVisible = selected && fabricatorSettings.showPricing && !featureIsLocked && !quoteOrUnlockButtonVisible && !showAdvancedQuoting\r\n && !wizardSkipAndAddToCartButtonVisible;\r\n\r\n const infoButtonVisible = !wizardSkipAndAddToCartButtonVisible;\r\n\r\n const price = toFixedFeatureCost(currentFeature.part, 1, qtActiveCategory);\r\n\r\n return (\r\n this.props.handleFeatureClick(currentFeature, event)}\r\n onDoubleClick={infoButtonVisible ? this.goToFeatureInfo : null}>\r\n \r\n {currentFeature.part.vanitySize ?\r\n {currentFeature.part.vanitySize}\" : null\r\n }\r\n \r\n {selected ? (\r\n
\r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = (store) => {\r\n const {language} = store.serverState;\r\n return {\r\n isPhoneNumberValidated: store.userState.isPhoneNumberValidated,\r\n fabricatorData: store.fabricatorState,\r\n filterGroups: store.filterState.filterGroups,\r\n showAdvancedQuoting: store.advancedQuotingState.showAdvancedQuoting,\r\n qtActiveCategory: store.qtState.qtActiveCategory,\r\n language,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n toggleSelectionFeatureInfo,\r\n setCameFromPage\r\n}\r\n\r\nexport default injectIntl(\r\n connect(mapStateToProps, mapDispatchToProps)(SelectionGridItem)\r\n);\r\n","import PropTypes from \"prop-types\";\r\n\r\nexport const shiftFilterTitleInterface = {\r\n shiftTitleIndex: PropTypes.number,\r\n filterValue: PropTypes.object.isRequired,\r\n elementIndex: PropTypes.number,\r\n positionTop: PropTypes.number,\r\n columnPosition: PropTypes.number,\r\n type: PropTypes.string\r\n};\r\n","import React, {useEffect} from 'react';\r\nimport {connect} from \"react-redux\";\r\nimport PropTypes from \"prop-types\";\r\nimport {getCurrentLayout} from \"../appLayout\";\r\nimport {setStaticCanvasImage} from \"../../actions/visualizerFunctions\";\r\nimport {getRoomImageFromQtCategory} from \"../../misc/categorySwitchingFunctions\";\r\nimport {getCommonVisualizerType} from \"../../config\";\r\n\r\nconst HardcodedCanvasImage = (props) => {\r\n\r\n const {disableLoader, enableLoader, staticCanvasImage, fabricatorData, qtActiveCategory, setStaticCanvasImage,\r\n activePartRelatedItemIndex, activeQuoteIndex, cartItems, visualizerIsChanging} = props;\r\n\r\n useEffect(() => {\r\n // console.log(\"qtActiveCategory\", qtActiveCategory);\r\n if (!fabricatorData.settings.useCategorySwitching || !qtActiveCategory || !window.location.href.includes(\"materials\")) {\r\n return null\r\n }\r\n\r\n const layout = getCurrentLayout();\r\n if (!layout.qtCategories) {\r\n return null\r\n }\r\n const currentRoomName = qtActiveCategory.trim().toLowerCase();\r\n const currentQtCat = layout.qtCategories.find(qtCategory => qtCategory.name === qtActiveCategory);\r\n\r\n const {fabricatorSubscriptions} = fabricatorData;\r\n\r\n if (currentRoomName !== getCommonVisualizerType().toLowerCase()\r\n && currentQtCat\r\n && currentQtCat.subParts[activePartRelatedItemIndex]\r\n && currentQtCat.subParts[activePartRelatedItemIndex].part.partId !== \"room\"\r\n && (!fabricatorData.settings.allowVisualizerSwitching || !fabricatorSubscriptions.some(subscription => subscription && subscription.service.toLowerCase() === currentRoomName))) {\r\n // allowVisualizerSwitching is turned off - show image, or check, if there are no available visualizers with clicked room\r\n setStaticCanvasImage(getRoomImageFromQtCategory(qtActiveCategory, fabricatorData.settings));\r\n } else if (staticCanvasImage) {\r\n setStaticCanvasImage(\"\");\r\n }\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [qtActiveCategory])\r\n\r\n useEffect(() => {\r\n if (visualizerIsChanging) {\r\n return\r\n }\r\n setStaticCanvasImage(getRoomImageFromQtCategory(\"\", activeQuoteIndex));\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [activeQuoteIndex, cartItems, visualizerIsChanging]) // update when visualizer is switched\r\n\r\n if (!staticCanvasImage) {\r\n return null\r\n }\r\n\r\n return (\r\n \r\n {isAddToCartButtonVisible ? (\r\n \r\n ) : null}\r\n {/*{wizardSkipAndAddToCartButtonVisible*/}\r\n {/* ? */}\r\n {/* : null}*/}\r\n {quoteOrUnlockButtonVisible ? (\r\n \r\n ) : null}\r\n {infoButtonVisible ? : null}\r\n
\r\n ) : null}\r\n {/*{currentFeature.part.notAvailableInVisualizer ? (*/}\r\n {/*Not in Visualizer*/}\r\n {/*) : null}*/}\r\n \r\n {showPrice ? (\r\n \r\n {getPriceWithIncluded(price, currentFeature.part, fabricatorData, intl.messages)}\r\n \r\n ) : null}\r\n {featureIsLocked ? null :
\r\n \r\n ![]()
disableLoader ? disableLoader() : null}\r\n onLoadStart={() => enableLoader ? enableLoader() : null}\r\n alt=\"\"\r\n src={staticCanvasImage} />\r\n
\r\n )\r\n};\r\n\r\nHardcodedCanvasImage.propTypes = {\r\n enableLoader: PropTypes.func,\r\n disableLoader: PropTypes.func,\r\n};\r\n\r\nconst mapStateToProps = (store) => {\r\n const {staticCanvasImage} = store.bathroomVisualizerState;\r\n const fabricatorData = store.fabricatorState;\r\n const {qtActiveCategory} = store.qtState;\r\n const {activePartRelatedItemIndex} = store.selectionState;\r\n const {activeQuoteIndex} = store.quotesState;\r\n const {cartItems} = store.cartState;\r\n const {visualizerIsChanging} = store.serverState;\r\n\r\n return {\r\n staticCanvasImage,\r\n fabricatorData,\r\n qtActiveCategory,\r\n activePartRelatedItemIndex,\r\n activeQuoteIndex,\r\n cartItems,\r\n visualizerIsChanging,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n setStaticCanvasImage\r\n};\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(HardcodedCanvasImage);\r\n","import React from 'react';\r\nimport { connect } from \"react-redux\";\r\nimport {FormattedMessage} from \"react-intl\";\r\nimport {loaderDisable, loaderEnable} from \"./loaderView\";\r\nimport {getNavigationButtons} from \"../../api/server-api\";\r\nimport NoInternetIcon from \"./icons/noInternetIcon\";\r\n\r\nconst NoInternetOverlay = (props) => {\r\n\r\n // const {networkConnection, showAdvancedQuoting, isMobile} = props;\r\n const {networkConnection} = props;\r\n\r\n if (networkConnection) { // show only if internet is offline\r\n return null\r\n }\r\n\r\n const retryConnectionClick = async () => {\r\n loaderEnable();\r\n await getNavigationButtons(true);\r\n loaderDisable();\r\n }\r\n\r\n return (\r\n // \r\n \r\n // \r\n // \r\n // \r\n // ),\r\n \"shower_fixture\": (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n ),\r\n \"shower_head\": (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n ),\r\n \"shower_arm\": (\r\n \r\n \r\n \r\n \r\n \r\n ),\r\n \"shower_head_bundle\": (\r\n \r\n \r\n ),\r\n \"shower_door\": (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n ),\r\n \"shower_wall\": (\r\n \r\n \r\n ),\r\n \"shower_pan_combo\": (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n ),\r\n \"hand_shower_kit\": (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n ),\r\n \"replacement_tub\": (\r\n \r\n \r\n ),\r\n \"toilet\": (\r\n \r\n \r\n \r\n ),\r\n \"vanity_sink\": (\r\n \r\n \r\n \r\n ),\r\n \"vanity_pedestal_sink\": (\r\n \r\n \r\n ),\r\n \"vanity_countertop\": (\r\n \r\n \r\n ),\r\n \"submenu_accessories\": (\r\n \r\n \r\n \r\n ),\r\n \"vanity_cabinet\": (\r\n \r\n ),\r\n \"vanity_console\": (\r\n \r\n \r\n \r\n ),\r\n \"vanity_legs\": (\r\n \r\n \r\n ),\r\n \"vanity_middle\": (\r\n \r\n ),\r\n \"vanity_washstand\": (\r\n \r\n \r\n ),\r\n \"vanity_ptrap\": (\r\n \r\n ),\r\n \"soap_dish\": (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n ),\r\n \"glass_holder\": (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n ),\r\n \"paper_holder\": (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n ),\r\n \"robe_hook\": (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n ),\r\n \"towel_bar\": (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n ),\r\n \"towel_ring\": (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n ),\r\n \"corner_shelf\": (\r\n \r\n \r\n ),\r\n \"shower_seats\": (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n ),\r\n //*** KITCHEN ICONS ***//\r\n \"faucet\": (\r\n \r\n ),\r\n \"backsplash\": (\r\n \r\n \r\n ),\r\n \"sink\": (\r\n \r\n \r\n \r\n ),\r\n \"top_cabinet\": (\r\n \r\n \r\n \r\n \r\n ),\r\n \"bottom_cabinet\": (\r\n \r\n \r\n \r\n \r\n ),\r\n \"hood\": (\r\n \r\n \r\n ),\r\n \"countertop\": (\r\n \r\n \r\n \r\n \r\n \r\n ),\r\n \"crown_molding\": (\r\n \r\n ),\r\n \"range\": (\r\n \r\n \r\n \r\n ),\r\n \"oven\": (\r\n \r\n \r\n \r\n ),\r\n \"fridge\": (\r\n \r\n \r\n ),\r\n \"handle\": (\r\n \r\n ),\r\n \"stove\": (\r\n \r\n ),\r\n \"center_island_stovetop\": (\r\n \r\n ),\r\n \"center_island_countertop\": (\r\n \r\n ),\r\n \"center_island_faucet\": (\r\n \r\n ),\r\n \"center_island_sink\": (\r\n \r\n \r\n \r\n ),\r\n \"floor\": (\r\n \r\n \r\n ),\r\n \"bathroom_floor\": (\r\n \r\n \r\n ),\r\n \"kitchen_floor\": (\r\n \r\n \r\n ),\r\n \"edge_profile\": (\r\n \r\n \r\n ),\r\n \"center_island_edge\": (\r\n \r\n \r\n ),\r\n \"vanity_backsplash\": (\r\n \r\n \r\n ),\r\n \"wall_union\": (\r\n \r\n \r\n )\r\n }\r\n\r\n return (\r\n \r\n )\r\n};\r\n\r\nGroheFeatureSQFTButton.propTypes = {\r\n featureOpened: PropTypes.shape(featureInterface),\r\n className: PropTypes.string,\r\n isIcon: PropTypes.bool,\r\n}\r\n\r\nconst mapStateToProps = (store) => {\r\n const {shopPageOpened} = store.shopState;\r\n const {settings} = store.fabricatorState;\r\n return {\r\n shopPageOpened,\r\n fabricatorSettings: settings,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n setCameFromPage,\r\n setSqftFromFeature,\r\n setSquareFootageGroup,\r\n enableSquareFootage,\r\n};\r\n\r\nexport default withRouter(\r\n injectIntl(\r\n connect(mapStateToProps, mapDispatchToProps)(GroheFeatureSQFTButton)\r\n )\r\n)\r\n","import React from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport {FormattedMessage, injectIntl} from \"react-intl\";\r\nimport PropTypes from \"prop-types\";\r\n\r\nimport IconButton from \"@mui/material/IconButton\";\r\nimport ErrorIcon from \"@mui/icons-material/Error\";\r\n\r\n\r\nconst GroheFeatureSoldOut = (props) => {\r\n const {disabled, intl, fabricatorData} = props;\r\n if (!disabled) {\r\n return null\r\n }\r\n\r\n return (\r\n \r\n }\r\n\r\n let featureGroupName = \"\";\r\n if (IS_PRODUCT_JOURNEY) {\r\n featureGroupName = getFeatureGroupName(featureGroup, intl, fabricatorData);\r\n }\r\n\r\n const showFeaturesOnly = lookActiveCategory && !layout.partIdExistInQtCategory(lookActiveCategory, true); // to prevent calculating features on each render\r\n // const showAllWallsCheckbox = lookActiveFeature && showFeaturesOnly && LOOK_WALLS_ONLY.includes(lookActiveFeature.partId);\r\n\r\n const desRecNavItemList = navItemsLists.find(navItemList => navItemList.type === LOOK_NAVIGATION_LIST_TYPES.designRec);\r\n const regularNavItemList = navItemsLists.find(navItemList => navItemList.type === LOOK_NAVIGATION_LIST_TYPES.regular);\r\n const notMatchingNavItemList = navItemsLists.filter(navItemList => navItemList.type === LOOK_NAVIGATION_LIST_TYPES.notMatchingMeta);\r\n\r\n if (!regularNavItemList) {\r\n return null\r\n }\r\n\r\n const onScrollHandler = async (scrollObject) => {\r\n if (!featureGroup || allFeaturesWereLoaded.includes(document.kvConfig.visualizerType)) {\r\n return;\r\n }\r\n if (featureGroup.getRealFeaturesReceivedProperty() || !scrolledVerticalToTheEnd(scrollObject)) {\r\n return\r\n }\r\n setNavigationLoading(true);\r\n await getAdditionalFeaturesOnScroll(featureGroup);\r\n await setReceivedFeatures();\r\n await new Promise(resolve => setTimeout(resolve, 300));\r\n setNavigationLoading(false);\r\n }\r\n\r\n const onEventScrollHandler = (event) => {\r\n onScrollHandler(event.target)\r\n }\r\n\r\n if (IS_PRODUCT_JOURNEY) {\r\n let allProducts = regularNavItemList.navItems;\r\n if (desRecNavItemList && desRecNavItemList.navItems) {\r\n allProducts = [...desRecNavItemList.navItems, ...regularNavItemList.navItems];\r\n }\r\n if (notMatchingNavItemList && notMatchingNavItemList.length) {\r\n notMatchingNavItemList.forEach(navItemList => {\r\n allProducts = [...allProducts, ...navItemList.navItems];\r\n })\r\n }\r\n const {isLixil, pricingLocked} = pricingIsLocked();\r\n if (!isLixil && pricingLocked) {\r\n allProducts = getSortedNavItems(allProducts);\r\n }\r\n return (\r\n \r\n {isMobile ? null : (\r\n \r\n \r\n )}\r\n \r\n )\r\n }\r\n\r\n return (\r\n \r\n {(updateLookCartItem) => {\r\n\r\n if (!selectedFilters.length && !desRecNavItemList && !notMatchingNavItemList.length && regularNavItemList) {\r\n // simple list, react virtualized, all as usual\r\n return (\r\n \r\n \r\n )\r\n }\r\n\r\n return (\r\n \r\n \r\n )\r\n }}\r\n \r\n )\r\n};\r\n\r\nLookMainCategory.propTypes = {\r\n contentHeight: PropTypes.number\r\n}\r\n\r\nconst mapStateToProps = (store) => {\r\n const {lookActiveFeature, lookViewType, lookActiveCategory, lookActiveFeaturePositionInList, lookViewTypeWasChanged,\r\n navigationCount, lookLockedTutorial, contextMenu, lookOverlayOpened} = store.lookState;\r\n const {visualizersLoaded, isMobile, allFeaturesWereLoaded} = store.serverState;\r\n const partId = lookActiveFeature ? lookActiveFeature.getParent().partId : \"\";\r\n const {selectedFilters, filterGroups} = store.filterState;\r\n const {groheFiltersSearchText, requiredButNotIncludedFeature} = store.groheState;\r\n const {wizardActiveItem} = store.wizardState;\r\n const {navigationLoadingActive} = store.navigationState;\r\n const {isPhoneNumberValidated} = store.userState;\r\n // const {activePreset} = store.bathroomVisualizerState;\r\n\r\n return {\r\n isMobile,\r\n lookActiveFeature,\r\n lookViewType,\r\n lookActiveCategory,\r\n lookViewTypeWasChanged,\r\n visualizersLoadedLength: visualizersLoaded.length,\r\n partId,\r\n fabricatorData: store.fabricatorState,\r\n filterGroups,\r\n groheFiltersSearchText,\r\n selectedFilters,\r\n requiredButNotIncludedFeature,\r\n lookActiveFeaturePositionInList,\r\n navigationCount,\r\n lookLockedTutorial,\r\n allFeaturesWereLoaded,\r\n contextMenu,\r\n wizardActiveItem,\r\n navigationLoadingActive,\r\n isPhoneNumberValidated,\r\n lookOverlayOpened,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n setGroheRequiredButNotIncludedFeature,\r\n setLookLockedTutorial,\r\n setNavigationLoading,\r\n};\r\n\r\nexport default injectIntl (\r\n connect(mapStateToProps, mapDispatchToProps)(LookMainCategory)\r\n);\r\n","import React, {Fragment, useEffect, useRef} from \"react\";\r\nimport {connect} from \"react-redux\";\r\nimport {injectIntl} from \"react-intl\";\r\n\r\nimport IconButton from \"@mui/material/IconButton\";\r\nimport ReplayIcon from '@mui/icons-material/Replay';\r\nimport {setLookRestoreState, updateNavigationCount} from \"../../../../../actions/lookFunctions\";\r\nimport WithZoomToFeature from \"../../../hocs/withZoomToFeature\";\r\nimport LookCanvasContext from \"../../../lookCanvasContext\";\r\n// import LookFeatureRevertButtonModal from \"./lookFeatureRevertButtonModal\";\r\nimport {getCurrentLayout} from \"../../../../appLayout\";\r\nimport WithUpdateLookCartItem from \"../../../hocs/withUpdateLookCartItem\";\r\nimport {IS_PRODUCT_JOURNEY} from \"../../../../../config\";\r\n\r\n\r\nconst LookFeatureRevertButton = (props) => {\r\n\r\n const {lookActiveFeature, intl, updateNavigationCount, lookRestoreState, setLookRestoreState, isMobile,\r\n lookActiveCategory, currentActiveFeature} = props;\r\n const anchorRef = useRef(null);\r\n // const [showRevertModal, setShowRevertModal] = useState(false);\r\n\r\n useEffect(() => {\r\n if (((!isMobile && lookActiveFeature) || (isMobile && lookActiveCategory)) && !lookRestoreState) {\r\n const layout = getCurrentLayout();\r\n setLookRestoreState(layout.getActiveFeaturesAsObject(false, false, true));\r\n }\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [lookActiveFeature, lookActiveCategory])\r\n\r\n if (!isMobile && !lookActiveFeature) {\r\n return null\r\n }\r\n\r\n if (isMobile && !lookActiveCategory) {\r\n return null\r\n }\r\n\r\n const layout = getCurrentLayout();\r\n const featureGroup = lookActiveFeature ? lookActiveFeature.getParent() : layout.getFeatureGroupByPartId(lookActiveCategory);\r\n\r\n if (!featureGroup) {\r\n return null\r\n }\r\n\r\n const revertButtonClick = (zoomToFeatureGroup, updateLookCartItem) => {\r\n if (!lookRestoreState) {\r\n return false\r\n }\r\n const layout = getCurrentLayout();\r\n layout.setActiveFeaturesFromObject(lookRestoreState);\r\n if (!isMobile) {\r\n zoomToFeatureGroup(featureGroup.partId);\r\n setLookRestoreState(null);\r\n }\r\n updateNavigationCount();\r\n updateLookCartItem(featureGroup.lookActiveFeature, true);\r\n };\r\n\r\n const disabled = !lookRestoreState\r\n || !lookRestoreState[featureGroup.partId]\r\n || (currentActiveFeature && (lookRestoreState[featureGroup.partId] === currentActiveFeature.dbFeature.id))\r\n\r\n return (\r\n \r\n {(imageCanvas) => (\r\n \r\n {(zoomToFeatureGroup) => (\r\n \r\n {(updateLookCartItem) => {\r\n\r\n if (IS_PRODUCT_JOURNEY) {\r\n return isMobile ? (\r\n revertButtonClick(zoomToFeatureGroup, updateLookCartItem)}>\r\n \r\n ) : (\r\n \r\n setShowRevertModal(true)}\r\n // onMouseLeave={() => setShowRevertModal(false)}\r\n onClick={() => revertButtonClick(zoomToFeatureGroup, updateLookCartItem)}>\r\n \r\n {/*{isMobile ? null : (*/}\r\n {/* \r\n )\r\n }}\r\n \r\n )}\r\n \r\n )}\r\n \r\n )\r\n};\r\n\r\nLookFeatureRevertButton.propTypes = {\r\n // lookFeature: PropTypes.shape(featureInterface),\r\n}\r\n\r\nconst mapStateToProps = (store) => {\r\n const {lookActiveFeature, lookRestoreState, lookActiveCategory} = store.lookState;\r\n const {isMobile} = store.serverState;\r\n\r\n let currentActiveFeature = lookActiveFeature;\r\n if (isMobile && lookActiveCategory) {\r\n const layout = getCurrentLayout();\r\n const featureGroup = layout.getFeatureGroupByPartId(lookActiveCategory);\r\n currentActiveFeature = featureGroup ? featureGroup.activeFeature : null;\r\n }\r\n\r\n return {\r\n lookActiveCategory,\r\n lookActiveFeature,\r\n lookRestoreState,\r\n isMobile,\r\n currentActiveFeature,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n updateNavigationCount,\r\n setLookRestoreState,\r\n};\r\n\r\nexport default injectIntl(\r\n connect(mapStateToProps, mapDispatchToProps)(LookFeatureRevertButton)\r\n)\r\n","import React, {Fragment} from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport {FormattedMessage, injectIntl} from \"react-intl\";\r\n\r\nimport Button from \"@mui/material/Button\";\r\nimport ChevronRightIcon from \"@mui/icons-material/ChevronRight\";\r\nimport IconButton from \"@mui/material/IconButton\";\r\nimport ChevronLeftIcon from \"@mui/icons-material/ChevronLeft\";\r\n\r\nimport {\r\n setWizardActiveStep,\r\n setWizardSelectedValues,\r\n setWizardShowFeatureSection\r\n} from \"../../../../../actions/wizardFunctions\";\r\nimport {getCurrentGroups, getCurrentWizardNavItems} from \"./lookWizardFunctions\";\r\nimport LookWizardContentFinalPrice from \"./lookWizardContentFinalPrice\";\r\nimport GroheWizardCompletedButtons from \"../../../grohe/groheNavigation/groheWizard/groheWizardCompletedButtons\";\r\nimport {IS_PRODUCT_JOURNEY} from \"../../../../../config\";\r\nimport GroheMobileFooterFiltersButton from \"../../../grohe/groheMobile/groheMobileFooterFiltersButton\";\r\nimport GroheMobileFooterViewButton from \"../../../grohe/groheMobile/groheMobileFooterViewButton\";\r\nimport WithUpdateLookCartItem from \"../../../hocs/withUpdateLookCartItem\";\r\n\r\nconst LookWizardContentButtons = (props) => {\r\n\r\n const {wizardActiveItem, wizardActiveStep, setWizardActiveStep, wizardSelectedValues, setWizardSelectedValues,\r\n isMobile, intl, filterGroups, wizardShowFeatureSection, setWizardShowFeatureSection,\r\n groheActiveFeatureQuantity} = props;\r\n\r\n if (!wizardActiveItem) {\r\n return null\r\n }\r\n\r\n const currentGroups = getCurrentGroups(wizardActiveItem, wizardActiveStep, wizardSelectedValues);\r\n const wizardGroup = currentGroups[0];\r\n\r\n const onSkipClick = () => {\r\n // const featureGroup = getFeatureGroupFromWizardGroup(wizardGroup);\r\n // if (featureGroup && featureGroup.activeFeature) {\r\n // disableFeature(featureGroup.activeFeature, updateLookCartItem);\r\n // updateCanvasCount();\r\n // }\r\n setWizardSelectedValues({\r\n [wizardActiveStep]: {\r\n wizardGroup,\r\n }\r\n });\r\n setWizardActiveStep(wizardActiveStep + 1);\r\n }\r\n\r\n const startAgain = () => {\r\n setWizardSelectedValues({}, true);\r\n setWizardActiveStep(0);\r\n }\r\n\r\n const previousClick = () => {\r\n // const newValues = Object.assign({}, wizardSelectedValues);\r\n // delete newValues[wizardActiveStep];\r\n // delete newValues[wizardActiveStep - 1];\r\n // setWizardSelectedValues(newValues, true);\r\n setWizardActiveStep(wizardActiveStep - 1)\r\n }\r\n\r\n const nextClick = () => {\r\n if (!wizardSelectedValues[wizardActiveStep]) {\r\n onSkipClick();\r\n } else {\r\n if (IS_PRODUCT_JOURNEY) {\r\n setWizardSelectedValues({\r\n [wizardActiveStep]: {\r\n ...(wizardSelectedValues[wizardActiveStep] || {}),\r\n quantity: groheActiveFeatureQuantity,\r\n }\r\n });\r\n }\r\n setWizardActiveStep(wizardActiveStep + 1);\r\n }\r\n }\r\n\r\n const returnClick = () => {\r\n setWizardShowFeatureSection(false);\r\n }\r\n\r\n // const closeWizardClick = () => {\r\n // Analytics.sendClickEvent(LOOK_JOURNEY_ANALYTIC_EVENTS.lookWizardCompletedClose);\r\n // history.push(getLookIdUrl());\r\n // };\r\n\r\n const skipEnabled = wizardActiveStep > -1 && currentGroups.length === 1 && wizardGroup.notRequired;\r\n const isCompletedStep = wizardActiveStep > -1 && !currentGroups.length;\r\n\r\n let nextDisabled = !wizardSelectedValues[wizardActiveStep];\r\n if (nextDisabled && currentGroups.length === 1 && wizardGroup.nodeType === \"group\") {\r\n const navItems = getCurrentWizardNavItems(wizardSelectedValues, wizardActiveStep, wizardActiveItem, wizardGroup, null, filterGroups);\r\n nextDisabled = !!navItems.length;\r\n }\r\n\r\n if (isMobile) {\r\n\r\n if (IS_PRODUCT_JOURNEY) {\r\n\r\n if (wizardActiveStep === -1) {\r\n return (\r\n \r\n )\r\n }\r\n\r\n if (isCompletedStep) {\r\n return \r\n {isCompletedStep || currentGroups.length > 1 ? null : (\r\n \r\n \r\n )}\r\n \r\n {wizardShowFeatureSection ? null : (\r\n \r\n {skipEnabled ? (\r\n \r\n ) : null}\r\n \r\n \r\n )}\r\n \r\n )\r\n }\r\n\r\n return (\r\n \r\n \r\n )\r\n\r\n};\r\n\r\nconst mapStateToProps = (store) => {\r\n // const {activePreset, bvPresets} = store.bathroomVisualizerState;\r\n const {wizardActiveItem, wizardActiveStep, wizardSelectedValues, wizardShowFeatureSection} = store.wizardState;\r\n const {isMobile} = store.serverState;\r\n const {filterGroups} = store.filterState;\r\n // const fabricatorData = store.fabricatorState;\r\n const {groheActiveFeatureQuantity} = store.groheState;\r\n\r\n return {\r\n // activePreset,\r\n // bvPresets,\r\n wizardActiveItem,\r\n wizardActiveStep,\r\n wizardSelectedValues,\r\n isMobile,\r\n filterGroups,\r\n wizardShowFeatureSection,\r\n // fabricatorData,\r\n groheActiveFeatureQuantity,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n setWizardActiveStep,\r\n setWizardSelectedValues,\r\n setWizardShowFeatureSection\r\n};\r\n\r\nexport default injectIntl(\r\n connect(mapStateToProps, mapDispatchToProps)((props) => {\r\n return (\r\n \r\n {(updateLookCartItem) => }\r\n \r\n )\r\n })\r\n)\r\n","import { combineReducers } from 'redux';\r\nimport { loadingBarReducer } from 'react-redux-loading-bar';\r\n\r\nimport stepsReducer from \"./stepsReducer\";\r\nimport selectionReducer from \"./selectionReducer\";\r\nimport serverReducer from \"./serverReducer\";\r\nimport bathroomVisualizerReducer from \"./bathroomVisualizerReducer\";\r\nimport loaderReducer from \"./loaderReducer\";\r\nimport userReducer from \"./userReducer\";\r\nimport cartReducer from \"./cartReducer\";\r\nimport instReducer from \"./instReducer\";\r\nimport messageBoxReducer from \"./messageBoxReducer\";\r\nimport filterReducer from './filterReducer';\r\nimport navigationReducer from './navigationReducer';\r\nimport fabricatorReducer from './fabricatorReducer';\r\nimport sqftReducer from './sqftReducer';\r\nimport docuSignReducer from './docuSignReducer';\r\nimport qtReducer from './qtReducer';\r\nimport tutorialReducer from './tutorialReducer';\r\nimport contractSigningReducer from \"./contractSigningReducer\";\r\nimport initialFlowReducer from \"./initialFlowReducer\";\r\nimport priceWorksheetReducer from \"./priceWorksheetReducer\";\r\nimport unlockCalculationsReducer from \"./unlockCalculationsReducer\";\r\nimport quotesReducer from \"./quotesReducer\";\r\nimport advancedQuotingReducer from \"./advancedQuotingReducer\";\r\nimport assignQuoteReducer from \"./assignQuoteReducer\";\r\nimport printReducer from \"./printReducer\";\r\nimport wizardReducer from \"./wizardReducer\";\r\nimport sqftMenuReducer from \"./sqftMenuReducer\";\r\nimport sqftManualCalculationReducer from \"./sqftManualCalculationReducer\";\r\nimport sqftSlabReducer from \"./sqftSlabReducer\";\r\nimport sqftResourcesReducer from \"./sqftResourcesReducer\";\r\nimport sqftMiteredReducer from \"./sqftMiteredReducer\";\r\nimport lookReducer from \"./lookReducer\";\r\nimport groheReducer from \"./groheReducer\";\r\nimport iframeIntegrationReducer from \"./iframeIntegrationReducer\";\r\nimport groheQuotingToolReducer from \"./groheQuotingToolReducer\";\r\nimport paymentReducer from \"./paymentReducer\";\r\nimport historyReducer from \"./historyReducer\";\r\nimport shopReducer from \"./shopReducer\";\r\nimport sqftTutorialReducer from \"./sqftTutorialReducer\";\r\n\r\n// Combine Reducers\r\nexport const reducers = combineReducers({\r\n advancedQuotingState: advancedQuotingReducer,\r\n assignQuoteState: assignQuoteReducer,\r\n bathroomVisualizerState: bathroomVisualizerReducer,\r\n cartState: cartReducer,\r\n contractSigningState: contractSigningReducer,\r\n docuSignState: docuSignReducer,\r\n fabricatorState: fabricatorReducer,\r\n filterState: filterReducer,\r\n groheQuotingToolState: groheQuotingToolReducer,\r\n groheState: groheReducer,\r\n historyState: historyReducer,\r\n iframeIntegrationState: iframeIntegrationReducer,\r\n initialFlowState: initialFlowReducer,\r\n instState: instReducer,\r\n loaderState: loaderReducer,\r\n loadingBar: loadingBarReducer,\r\n lookState: lookReducer,\r\n messageBoxState: messageBoxReducer,\r\n navigationState: navigationReducer,\r\n paymentState: paymentReducer,\r\n priceWorksheetState: priceWorksheetReducer,\r\n printState: printReducer,\r\n qtState: qtReducer,\r\n quotesState: quotesReducer,\r\n selectionState: selectionReducer,\r\n serverState: serverReducer,\r\n shopState: shopReducer,\r\n sqftManualCalculationState: sqftManualCalculationReducer,\r\n sqftMenuState: sqftMenuReducer,\r\n sqftMiteredState: sqftMiteredReducer,\r\n sqftResourceState: sqftResourcesReducer,\r\n sqftSlabState: sqftSlabReducer,\r\n sqftState: sqftReducer,\r\n sqftTutorialState: sqftTutorialReducer,\r\n stepsState: stepsReducer,\r\n tutorialState: tutorialReducer,\r\n unlockCalculationsState: unlockCalculationsReducer,\r\n userState: userReducer,\r\n wizardState: wizardReducer\r\n});\r\n\r\n","import * as types from '../actions/actionTypes';\r\n\r\nconst initialState = {\r\n isSwitching : false,\r\n activeStep: 0,\r\n layoutParts: [],\r\n};\r\n\r\nexport default function(state = initialState, action) {\r\n\r\n switch(action.type) {\r\n\r\n case types.SET_STEP:\r\n\r\n if (state.isSwitching) {\r\n return Object.assign({}, state) // don't do anything until animation will finish\r\n }\r\n\r\n if (action.payload.activeStep > state.layoutParts.length - 1) {\r\n return Object.assign({}, state, {\r\n activeStep: action.payload.activeStep - 1\r\n })\r\n } else {\r\n return Object.assign({}, state, {\r\n activeStep: action.payload.activeStep <= 0 ? 0 : action.payload.activeStep\r\n });\r\n }\r\n\r\n case types.SET_STEP_SWITCHING:\r\n case types.SET_LAYOUT_DATA_PARTS:\r\n return Object.assign({}, state, {\r\n ...action.payload\r\n });\r\n\r\n }\r\n\r\n return state;\r\n\r\n}","import * as types from '../actions/actionTypes';\r\n\r\nconst initialState = {\r\n selectionOpened: false,\r\n selectionGroup: \"\",\r\n activePartRelatedItemIndex: 0,\r\n selectionWindowView: 3,\r\n selectionInfoQuantity: 1,\r\n pulseFeatureInfoQuantity: false,\r\n materialsInfoFeatureModules: [], // arrayOf {partId: 123, quantity: 1}\r\n selectionFeatureInfo: null,\r\n vanityTypeSelected: false,\r\n showerTypeSelected: false,\r\n activeFeature: null,\r\n updateFeatureCount: 0, // counter - is used for update footer items\r\n relatedGroups: [],\r\n relatedGroupsSearch: \"\",\r\n showDescriptionCover: true,\r\n galleryVisible: false,\r\n galleryShowActiveFeature: false, // show related product gallery\r\n galleryActiveImageIndex: 0,\r\n subSteps: {\r\n edges: [],\r\n backsplashes: [],\r\n },\r\n activeSubStep: 0,\r\n showNotCompatibleView: false,\r\n productNoteEditorVisible: false,\r\n rowItems: [],\r\n materialsCanvasClass: \"\",\r\n featureInfoCount: 0, // is used to update feature info page\r\n};\r\n\r\nexport default function(state = initialState, action) {\r\n\r\n switch(action.type) {\r\n\r\n case types.TOGGLE_SELECTION_WINDOW:\r\n case types.SET_SELECTION_WINDOW_VIEW:\r\n case types.TOGGLE_SELECTION_INFO:\r\n case types.SET_VANITY_TYPE:\r\n case types.CHANGE_SELECTION_INFO_QUANTITY:\r\n case types.TOGGLE_PULSE_FEATURE_INFO_QUANTITY:\r\n case types.CHANGE_MATERIALS_INFO_FEATURE_MODULES:\r\n case types.SET_DEFAULT_SELECTION_GROUP:\r\n case types.SET_SHOWER_TYPE:\r\n case types.CHANGE_SELECTION_ACTIVE_PART_RELATED_INDEX:\r\n case types.SET_RELATED_GROUPS_SEARCH:\r\n case types.TOGGLE_SHOW_DESCRIPTION_COVER:\r\n case types.TOGGLE_GALLERY_VISIBLE:\r\n case types.SET_GALLERY_ACTIVE_IMAGE_INDEX:\r\n case types.SET_MATERIALS_PAGE_ACTIVE_SUB_STEP:\r\n case types.TOGGLE_NOT_COMPATIBLE_VIEW:\r\n case types.TOGGLE_PRODUCT_NOTE_EDITOR_VISIBLE:\r\n case types.SET_ROW_ITEMS:\r\n case types.SET_MATERIALS_PAGE_CANVAS_CLASS:\r\n return Object.assign({}, state, {\r\n ...action.payload\r\n });\r\n case types.SET_RELATED_GROUPS:\r\n return Object.assign({}, state, {\r\n relatedGroups: [...action.payload.relatedGroups]\r\n });\r\n case types.SET_MATERIALS_PAGE_SUB_STEPS:\r\n state = {...state, subSteps: Object.assign({}, state.subSteps, action.payload.subSteps)};\r\n break;\r\n case types.SET_ACTIVE_FEATURE:\r\n return Object.assign({}, state, {\r\n activeFeature: action.payload.activeFeature || null,\r\n updateFeatureCount: ++state.updateFeatureCount\r\n });\r\n case types.UPDATE_FEATURE_INFO_COUNT:\r\n return Object.assign({}, state, {\r\n featureInfoCount: ++state.featureInfoCount\r\n });\r\n\r\n }\r\n\r\n return state;\r\n\r\n}\r\n","import uniq from \"lodash/uniq\";\r\n\r\nimport * as types from '../actions/actionTypes';\r\nimport {getShareUrl, getUrlParam} from \"../misc/helpers\";\r\nimport {AVAILABLE_LANGUAGES, IS_LOOK_JOURNEY, IS_PRODUCT_JOURNEY, IS_LIXIL_UI} from \"../config\";\r\nimport COLOR_THEMES from \"../colorThemes\";\r\nimport {\r\n parseFabricatorSettings\r\n} from \"./fabricatorReducer\";\r\nimport {WHITE_PAGE_ROUTES} from \"../bvcomponents/look/core/constants\";\r\nimport {\r\n hardCodeIsAmericanStandard,\r\n hardCodeIsAmericanImport,\r\n hardCodeIsCaesarStone,\r\n hardCodeIsModerno,\r\n hardCodeIsNhance\r\n} from \"../misc/fabricatorHardcode\";\r\nimport {isTouchDevice} from \"../misc/utils\";\r\nimport Misc from \"../misc/misc\";\r\n\r\nconst urlLanguage = (getUrlParam(\"language\") || \"\").replace(\"/\", \"\");\r\nconst urlTheme = (getUrlParam(\"theme\") || \"\").replace(\"/\", \"\");\r\n\r\nconst getDefaultTheme = () => {\r\n if (hardCodeIsCaesarStone()) {\r\n return \"caes\"\r\n } else if (hardCodeIsAmericanImport() || hardCodeIsAmericanStandard()) {\r\n return \"as\"\r\n } else if (hardCodeIsModerno()) {\r\n return \"moderno\"\r\n } else if (hardCodeIsNhance()) {\r\n return \"nhance\"\r\n } else if (IS_PRODUCT_JOURNEY || window.location.href.includes(\"nav=product\")) {\r\n return \"grohe\"\r\n } else if (IS_LOOK_JOURNEY || window.location.href.includes(\"nav=look\")) {\r\n return \"look\"\r\n }\r\n return Object.keys(COLOR_THEMES)[0];\r\n}\r\n\r\nconst activeTheme = urlTheme && COLOR_THEMES[urlTheme] ? urlTheme : getDefaultTheme();\r\n\r\nconst initialState = {\r\n bvData: {\r\n features: []\r\n },\r\n newQuoteData: {},\r\n groupedFeatures: {},\r\n groupedFeaturesDescriptions: {},\r\n windowWidth: window.innerWidth || 0,\r\n windowHeight: window.innerHeight || 0,\r\n isMobile: false,\r\n jobId: 0,\r\n stonePricing: {},\r\n documents: [],\r\n visualizersLoaded: [],\r\n cookieAccepted: false,\r\n successNotification: {\r\n show: false,\r\n icon: \"calculate\",\r\n title: \"\",\r\n message: \"\"\r\n },\r\n introVideo: {\r\n introVideoStarted: false,\r\n introVideoFinished: false,\r\n },\r\n shareUrl: \"\",\r\n javascriptErrors: [],\r\n language: urlLanguage && AVAILABLE_LANGUAGES.includes(urlLanguage) ? urlLanguage : \"en-US\",\r\n agreeEmailCheckbox: true,\r\n networkConnection: true,\r\n activeTheme,\r\n amazonImageUrl: \"\",\r\n allFeaturesWereLoaded: [], // to check for lixil room layouts // includes kvState, bvLook, so on\r\n initialVisualizerType: \"\",\r\n allowRouting: false,\r\n allowMainLoading: !(window.location.hash === \"#/shop\" || window.location.hash.startsWith(\"#/shop/\")),\r\n actionAfterRoomChange: null, // a function that runs after visualizer is changed\r\n visualizerIsChanging: false, // a boolean which is true when visualizer type is changing (from bathroom to kitchen fo example)\r\n initialRoute: window.location.hash,\r\n};\r\n\r\nexport default function (state = initialState, action) {\r\n\r\n switch (action.type) {\r\n case types.SET_WINDOW_WIDTH: {\r\n if (IS_LIXIL_UI && action.payload.windowWidth >= 1024 && document.body.style.overflow === \"hidden\"\r\n && !(WHITE_PAGE_ROUTES.some(route => window.location.href.includes(\"#\" + route)))) {\r\n document.body.style.overflow = \"\";\r\n }\r\n const isMobile = action.payload.windowWidth <= (IS_PRODUCT_JOURNEY || IS_LOOK_JOURNEY ? 1023 : 991);\r\n const isTouch = isMobile || Misc.isMobile() || isTouchDevice();\r\n isTouch ? document.body.classList.add(\"bv--touch\") : document.body.classList.remove(\"bv--touch\");\r\n return Object.assign({}, state, {\r\n isMobile,\r\n isTouch,\r\n ...action.payload,\r\n })\r\n }\r\n case types.SET_WINDOW_HEIGHT:\r\n case types.SET_COOKIE_ACCEPTED:\r\n case types.SET_LANGUAGE:\r\n case types.SET_AGREE_EMAIL_CHECKBOX:\r\n case types.SET_ACTIVE_THEME:\r\n case types.SET_NETWORK_CONNECTION:\r\n case types.SET_INITIAL_VISUALIZER_TYPE:\r\n case types.SET_AMAZON_IMAGE_URL:\r\n case types.SET_ALLOW_ROUTING:\r\n case types.SET_ALLOW_MAIN_LOADING:\r\n case types.SET_ACTION_AFTER_VISUALIZER_TYPE_CHANGED:\r\n case types.SET_VISUALIZER_TYPE_CHANGING:\r\n return Object.assign({}, state, {\r\n ...action.payload\r\n });\r\n case types.SET_STONE_PRICING:\r\n return Object.assign({}, state, {\r\n stonePricing: Object.assign({}, state.stonePricing, action.payload.stonePricing)\r\n });\r\n case types.SET_ALL_FEATURES_LOADED:\r\n if (state.allFeaturesWereLoaded.includes(action.payload.allFeaturesWereLoaded)) {\r\n return state\r\n }\r\n return Object.assign({}, state, {\r\n allFeaturesWereLoaded: [...state.allFeaturesWereLoaded, action.payload.allFeaturesWereLoaded]\r\n });\r\n case types.SET_JAVASCRIPT_ERRORS:\r\n return Object.assign({}, state, {\r\n javascriptErrors: uniq([...state.javascriptErrors, action.payload.javascriptError])\r\n });\r\n case types.SET_JOB_ID: {\r\n const shareUrl = getShareUrl(action.payload.jobId)\r\n window.shareUrl = shareUrl; // analytics only, we can't use getState() there\r\n return {\r\n ...state,\r\n shareUrl,\r\n jobId: action.payload.jobId,\r\n };\r\n }\r\n case types.TOGGLE_USER_POPUP:\r\n return handleToggleUserPopup(state, action.payload);\r\n case types.ADD_PROJECT_DOCUMENT:\r\n case types.SET_PROJECT_DOCUMENTS_IDS:\r\n return Object.assign({}, state, {\r\n documents: [...action.payload]\r\n });\r\n case types.ADD_VISUALIZERS_LOADED:\r\n return Object.assign({}, state, {\r\n visualizersLoaded: [...state.visualizersLoaded, action.payload.newLoadedVisualizer],\r\n });\r\n case types.SHOW_SUCCESS_NOTIFICATION:\r\n return Object.assign({}, state, {\r\n ...state, successNotification: {...state.successNotification, ...action.payload}\r\n });\r\n case types.SET_INTRO_VIDEO:\r\n return Object.assign({}, state, {\r\n ...state, introVideo: {...state.introVideo, ...action.payload}\r\n });\r\n case types.SET_FABRICATOR_DATA: {\r\n const {settings} = parseFabricatorSettings(action.payload);\r\n const language = settings.language;\r\n return Object.assign({}, state, {\r\n ...state, language: urlLanguage || (language && AVAILABLE_LANGUAGES.includes(language) ? language : state.language)\r\n });\r\n }\r\n }\r\n\r\n return state;\r\n\r\n}\r\n\r\nfunction handleToggleUserPopup(state, {userIsLoggedIn}) {\r\n if (typeof(userIsLoggedIn) != 'undefined' && !userIsLoggedIn) {\r\n return {...state, jobId: 0};\r\n }\r\n\r\n return state;\r\n}\r\n","// this is a \"marching ants\" algorithm used to calc the outline path\r\nexport default function(data, width, height, imgUrl, start) {\r\n // d3-plugin for calculating outline paths\r\n // License: https://github.com/d3/d3-plugins/blob/master/LICENSE\r\n //\r\n // Copyright (c) 2012-2014, Michael Bostock\r\n // All rights reserved.\r\n //\r\n // Redistribution and use in source and binary forms, with or without\r\n // modification, are permitted provided that the following conditions are met:\r\n //* Redistributions of source code must retain the above copyright notice, this\r\n // list of conditions and the following disclaimer.\r\n //* Redistributions in binary form must reproduce the above copyright notice,\r\n // this list of conditions and the following disclaimer in the documentation\r\n // and/or other materials provided with the distribution.\r\n //* The name Michael Bostock may not be used to endorse or promote products\r\n // derived from this software without specific prior written permission.\r\n // THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS \"AS IS\" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL MICHAEL BOSTOCK BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.\r\n\r\n // lookup tables for marching directions\r\n var d3_geom_contourDx = [1, 0, 1, 1,-1, 0,-1, 1,0, 0,0,0,-1, 0,-1,NaN],\r\n d3_geom_contourDy = [0,-1, 0, 0, 0,-1, 0, 0,1,-1,1,1, 0,-1, 0,NaN];\r\n\r\n function d3_geom_contourStart(grid) {\r\n var x = 0,\r\n y = 0;\r\n\r\n // search for a starting point; begin at origin\r\n // and proceed along outward-expanding diagonals\r\n while (true) {\r\n if (grid(x,y)) {\r\n return [x,y];\r\n }\r\n if ((x === width) && (y === height)) {\r\n console.error('image is empty, can\\'t create polygon -> ', imgUrl);\r\n return false\r\n }\r\n if (x === 0) {\r\n x = y + 1;\r\n y = 0;\r\n } else {\r\n x = x - 1;\r\n y = y + 1;\r\n }\r\n }\r\n }\r\n\r\n function grid(x,y){\r\n const a=data[(y*width+x)*4+3];\r\n return(a>20);\r\n }\r\n\r\n var s = start || d3_geom_contourStart(grid); // starting point\r\n if (!s) {\r\n return [] // return empty array of points if layer is empty\r\n }\r\n var\r\n c = [], // contour polygon\r\n x = s[0], // current x position\r\n y = s[1], // current y position\r\n dx = 0, // next x direction\r\n dy = 0, // next y direction\r\n pdx = NaN, // previous x direction\r\n pdy = NaN, // previous y direction\r\n i = 0;\r\n\r\n do {\r\n // determine marching squares index\r\n i = 0;\r\n if (grid(x-1, y-1)) i += 1;\r\n if (grid(x, y-1)) i += 2;\r\n if (grid(x-1, y )) i += 4;\r\n if (grid(x, y )) i += 8;\r\n\r\n // determine next direction\r\n if (i === 6) {\r\n dx = pdy === -1 ? -1 : 1;\r\n dy = 0;\r\n } else if (i === 9) {\r\n dx = 0;\r\n dy = pdx === 1 ? -1 : 1;\r\n } else {\r\n dx = d3_geom_contourDx[i];\r\n dy = d3_geom_contourDy[i];\r\n }\r\n\r\n // update contour polygon\r\n if (dx != pdx && dy != pdy) {\r\n c.push([x, y]);\r\n pdx = dx;\r\n pdy = dy;\r\n }\r\n\r\n x += dx;\r\n y += dy;\r\n } while (s[0] != x || s[1] != y);\r\n\r\n return c;\r\n\r\n}","'use strict';\r\n\r\nObject.defineProperty(exports, \"__esModule\", {\r\n value: true\r\n});\r\n\r\nvar _slicedToArray = function () {\r\n function sliceIterator(arr, i) {\r\n var _arr = [];\r\n var _n = true;\r\n var _d = false;\r\n var _e = undefined;\r\n try {\r\n for (var _i = arr[window.Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {\r\n _arr.push(_s.value);\r\n if (i && _arr.length === i) break;\r\n }\r\n } catch (err) {\r\n _d = true;\r\n _e = err;\r\n } finally {\r\n try {\r\n if (!_n && _i[\"return\"]) _i[\"return\"]();\r\n } finally {\r\n if (_d) throw _e;\r\n }\r\n }\r\n return _arr;\r\n }\r\n\r\n return function (arr, i) {\r\n if (Array.isArray(arr)) {\r\n return arr;\r\n } else if (window.Symbol.iterator in Object(arr)) {\r\n return sliceIterator(arr, i);\r\n } else {\r\n throw new TypeError(\"Invalid attempt to destructure non-iterable instance\");\r\n }\r\n };\r\n}();\r\n\r\nexports.default = loadingBarMiddleware;\r\n\r\nvar _loading_bar_ducks = require('./loading_bar_ducks');\r\n\r\nvar defaultTypeSuffixes = ['PENDING', 'FULFILLED', 'REJECTED'];\r\n\r\nfunction loadingBarMiddleware() {\r\n var config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};\r\n\r\n var promiseTypeSuffixes = config.promiseTypeSuffixes || defaultTypeSuffixes;\r\n var scope = config.scope || _loading_bar_ducks.DEFAULT_SCOPE;\r\n\r\n return function (_ref) {\r\n var dispatch = _ref.dispatch;\r\n return function (next) {\r\n return function (action) {\r\n if (action.type) {\r\n var _promiseTypeSuffixes = _slicedToArray(promiseTypeSuffixes, 3),\r\n PENDING = _promiseTypeSuffixes[0],\r\n FULFILLED = _promiseTypeSuffixes[1],\r\n REJECTED = _promiseTypeSuffixes[2];\r\n\r\n var isPending = new RegExp(PENDING + '$', 'g');\r\n var isFulfilled = new RegExp(FULFILLED + '$', 'g');\r\n var isRejected = new RegExp(REJECTED + '$', 'g');\r\n\r\n var actionScope = action.meta && action.meta.scope || action.scope || scope;\r\n\r\n if (action.type.match(isPending)) {\r\n dispatch((0, _loading_bar_ducks.showLoading)(actionScope));\r\n } else if (action.type.match(isFulfilled) || action.type.match(isRejected)) {\r\n dispatch((0, _loading_bar_ducks.hideLoading)(actionScope));\r\n }\r\n }\r\n\r\n return next(action);\r\n };\r\n };\r\n };\r\n}","'use strict';\r\n\r\nObject.defineProperty(exports, \"__esModule\", {\r\n value: true\r\n});\r\n\r\nvar _reactRedux = require('react-redux');\r\n\r\nvar _loading_bar = require('./loading_bar');\r\n\r\nvar _loading_bar_ducks = require('./loading_bar_ducks');\r\n\r\nvar mapImmutableStateToProps = function mapImmutableStateToProps(state, ownProps) {\r\n return {\r\n loading: state.get('loadingBar')[ownProps.scope || _loading_bar_ducks.DEFAULT_SCOPE]\r\n };\r\n};\r\n\r\nexports.default = (0, _reactRedux.connect)(mapImmutableStateToProps)(_loading_bar.LoadingBar);","import {Font, StyleSheet} from '@react-pdf/renderer';\r\nimport {baseNewImagesPath} from \"../../assets\";\r\nimport {IS_LIXIL_UI} from \"../../../config\";\r\nimport styleHelpers from \"./styles/printDocumentStylesHelpers\";\r\nimport printDocumentStylesDiscounts from \"./styles/printDocumentStylesDiscounts\";\r\n\r\ntry {\r\n Font.register({\r\n family: \"Play\",\r\n src: `${baseNewImagesPath}fonts/play-regular.ttf`\r\n });\r\n Font.register({\r\n family: \"PlayBold\",\r\n src: `${baseNewImagesPath}fonts/play-bold.ttf`\r\n });\r\n Font.register({\r\n family: \"FrutigerLTStd-Light\",\r\n src: `${baseNewImagesPath}fonts/frutiger/FrutigerLTStd-Light.ttf`\r\n });\r\n Font.register({\r\n family: \"Frutiger-Roman\",\r\n src: `${baseNewImagesPath}fonts/frutiger/Frutiger-Roman.ttf`\r\n });\r\n Font.register({\r\n family: \"Roboto\",\r\n src: `${baseNewImagesPath}fonts/Roboto/Roboto-Regular.ttf`\r\n });\r\n Font.register({\r\n family: \"Roboto500\",\r\n src: `${baseNewImagesPath}fonts/Roboto/Roboto-Medium.ttf`\r\n });\r\n} catch (error) {\r\n console.log(\"error registering fonts\", error);\r\n}\r\n\r\nexport default function getPrintColors(activeTheme) {\r\n\r\n const COLORS = {\r\n black: \"#000000\",\r\n red: \"#d0021b\",\r\n gray: \"#828282\",\r\n gray2: \"#7e7e7e\",\r\n gray3: \"#9f9f9f\",\r\n light: \"#c8c8c8\",\r\n white: \"#ffffff\",\r\n };\r\n\r\n switch (activeTheme) {\r\n case \"qc\":\r\n default: {\r\n COLORS.green = IS_LIXIL_UI ? \"#000000\" : \"#9FC522\";\r\n COLORS.blue = IS_LIXIL_UI ? \"#000000\" : \"#4a90e2\";\r\n COLORS.lightBlue = \"#98C3FA\";\r\n COLORS.regular = IS_LIXIL_UI ? \"Roboto\" : \"Play\";\r\n COLORS.bold = IS_LIXIL_UI ? \"Roboto500\" : \"PlayBold\";\r\n COLORS.black = \"#000000\";\r\n break;\r\n }\r\n case \"caes\": {\r\n COLORS.green = \"#f46c42\";\r\n COLORS.blue = \"#58595b\";\r\n COLORS.lightBlue = \"#717275\"; // lighten primary 10%\r\n COLORS.regular = \"FrutigerLTStd-Light\";\r\n COLORS.bold = \"Frutiger-Roman\";\r\n COLORS.black = \"#000000\";\r\n break;\r\n }\r\n case \"moderno\": {\r\n COLORS.green = \"#d0021b\";\r\n COLORS.blue = \"#1b1b1b\";\r\n COLORS.lightBlue = \"#444444\"; // lighten primary 10%\r\n COLORS.regular = \"Play\";\r\n COLORS.bold = \"PlayBold\";\r\n COLORS.black = \"#000000\";\r\n break;\r\n }\r\n case \"as\": {\r\n COLORS.green = \"#E70026\";\r\n COLORS.blue = \"#000000\";\r\n COLORS.lightBlue = \"#292929\"; // lighten primary 10%\r\n COLORS.regular = \"Play\";\r\n COLORS.bold = \"PlayBold\";\r\n COLORS.black = \"#000000\";\r\n break;\r\n }\r\n }\r\n\r\n return getStyles(COLORS)\r\n\r\n}\r\n\r\nconst getStyles = (COLORS) => StyleSheet.create({\r\n ...styleHelpers,\r\n page: {\r\n paddingTop: 35,\r\n paddingBottom: 65,\r\n paddingHorizontal: 35,\r\n fontFamily: COLORS.regular,\r\n color: COLORS.gray,\r\n fontSize: 10,\r\n },\r\n pageAS: {\r\n paddingTop: 100,\r\n paddingBottom: 65,\r\n paddingHorizontal: 35,\r\n fontFamily: COLORS.regular,\r\n color: COLORS.gray,\r\n fontSize: 10,\r\n },\r\n bold: {\r\n fontFamily: COLORS.bold,\r\n },\r\n black: {\r\n color: COLORS.black,\r\n },\r\n gray: {\r\n color: COLORS.gray,\r\n },\r\n primary: {\r\n color: COLORS.blue,\r\n },\r\n active: {\r\n color: COLORS.green,\r\n },\r\n header: {\r\n // borderColor: \"#fff000\",\r\n // borderStyle: \"solid\",\r\n // borderWidth: 2,\r\n maxHeight: 60,\r\n minHeight: 40,\r\n marginBottom: 25,\r\n display: \"flex\",\r\n flexDirection: \"row\",\r\n alignItems: \"flex-start\",\r\n justifyContent: \"space-between\",\r\n },\r\n headerInfo: {\r\n // textAlign: \"right\",\r\n },\r\n headerLogo: {\r\n display: \"flex\",\r\n alignItems: \"center\",\r\n justifyContent: \"center\",\r\n marginTop: 3,\r\n flex: 1,\r\n },\r\n headerLogoAS: {\r\n marginTop: -35,\r\n paddingLeft: 70,\r\n paddingRight: 70,\r\n },\r\n headerLogoImage: {\r\n maxWidth: \"100%\",\r\n maxHeight: \"100%\",\r\n alignSelf: \"center\",\r\n objectFit : \"contain\",\r\n },\r\n headerText: {\r\n width: \"100%\",\r\n flexDirection: \"row\",\r\n justifyContent: \"flex-end\"\r\n },\r\n headerTextBold: {\r\n fontFamily: COLORS.bold,\r\n },\r\n specSheet: {\r\n position: 'absolute',\r\n left: 0,\r\n right: 0,\r\n top: 0,\r\n paddingTop: 35,\r\n paddingHorizontal: 35,\r\n height: 100,\r\n // width: \"100%\",\r\n display: \"flex\",\r\n flexDirection: \"row\",\r\n justifyContent: \"space-between\",\r\n },\r\n headerTextASSheet: {\r\n width: \"20%\",\r\n flex: \"0 0 20%\",\r\n fontSize: 15,\r\n color: COLORS.gray3,\r\n },\r\n headerTextASInfo: {\r\n width: \"20%\",\r\n flex: \"0 0 20%\",\r\n },\r\n headerTextValue: {\r\n paddingLeft: 5,\r\n // width: 50,\r\n // textAlign: \"right\",\r\n },\r\n main: {\r\n width: \"100%\",\r\n display: \"flex\",\r\n flexDirection: \"row\",\r\n justifyContent: \"space-between\",\r\n },\r\n section: {\r\n width: \"33%\",\r\n flex: \"0 0 33%\"\r\n },\r\n sectionTwo: {\r\n width: \"45%\",\r\n flex: \"0 0 45%\"\r\n },\r\n sectionLeft: {\r\n paddingRight: 10\r\n },\r\n sectionCenter: {\r\n paddingLeft: 10,\r\n paddingRight: 10,\r\n },\r\n sectionRight: {\r\n paddingLeft: 10\r\n },\r\n mainTitle: {\r\n fontFamily: COLORS.bold,\r\n borderBottomWidth: 1,\r\n borderBottomColor: COLORS.gray2,\r\n paddingBottom: 3,\r\n marginBottom: 5,\r\n },\r\n mainText: {\r\n marginBottom: 2,\r\n },\r\n mainTextEmail: {\r\n marginTop: 10,\r\n },\r\n room: {\r\n borderLeftColor: COLORS.light,\r\n borderLeftWidth: 1,\r\n borderLeftStyle: \"solid\",\r\n marginTop: 30,\r\n borderBottomColor: COLORS.light,\r\n borderBottomWidth: 1,\r\n },\r\n roomTitle: {\r\n color: COLORS.gray2,\r\n padding: 5,\r\n backgroundColor: COLORS.light,\r\n fontSize: 11,\r\n textTransform: \"uppercase\",\r\n fontFamily: COLORS.bold,\r\n },\r\n roomBody: {\r\n paddingLeft: 20\r\n },\r\n subPartTitle: {\r\n color: COLORS.blue,\r\n borderBottomWidth: 1,\r\n borderBottomColor: COLORS.blue,\r\n padding: 2,\r\n marginRight: 2,\r\n marginBottom: 10,\r\n marginTop: 10,\r\n marginLeft: -10\r\n },\r\n cartItem: {\r\n borderBottomWidth: 1,\r\n borderBottomColor: COLORS.light,\r\n paddingBottom: 2,\r\n marginBottom: 5,\r\n },\r\n cartItemWithThumbnail: {\r\n flexDirection: \"row\",\r\n paddingBottom: 5,\r\n },\r\n cartItemWithThumbnailBody: {\r\n flex: 1,\r\n overflow: \"hidden\",\r\n },\r\n cartItemThumbnail: {\r\n borderWidth: 1,\r\n borderColor: COLORS.light,\r\n borderRadius: 5,\r\n padding: 8,\r\n marginRight: 5,\r\n width: 64,\r\n height: 64,\r\n flexBasis: 64,\r\n },\r\n cartItemThumbnailImage: {\r\n width: 48,\r\n height: 48,\r\n flexBasis: 48,\r\n objectFit: \"contain\",\r\n },\r\n cartItemSkuFullWidth: {\r\n flex: 1,\r\n color: COLORS.gray,\r\n fontSize: 9,\r\n marginBottom: 10,\r\n },\r\n cartItemDescription: {\r\n marginTop: 4,\r\n marginBottom: 4,\r\n },\r\n cartItemName: {\r\n fontFamily: COLORS.bold,\r\n color: COLORS.gray,\r\n },\r\n cartItemNameBig: {\r\n fontSize: 11,\r\n },\r\n cartItemNameCentered: {\r\n marginTop: 10,\r\n },\r\n cartItemInfo: {\r\n flexDirection: \"row\",\r\n justifyContent: \"space-around\",\r\n alignSelf: \"stretch\",\r\n width: \"100%\",\r\n color: COLORS.gray,\r\n marginTop: 5,\r\n },\r\n cartItemUnit: {\r\n flexGrow: 1,\r\n flexShrink: 1,\r\n flexBasis: 40,\r\n width: 40,\r\n color: COLORS.gray,\r\n fontSize: 9,\r\n },\r\n wizardItemDescription: {\r\n flexGrow: 1,\r\n flexShrink: 1,\r\n color: COLORS.gray,\r\n fontSize: 9,\r\n },\r\n cartItemUnitSKU: {\r\n flexBasis: 80,\r\n width: 80,\r\n },\r\n cartItemUnitItem: {},\r\n cartItemPrice: {\r\n flexGrow: 5,\r\n flexShrink: 5,\r\n flexBasis: 100,\r\n width: 100,\r\n justifyContent: \"flex-end\",\r\n alignSelf: \"flex-end\",\r\n textAlign: \"right\",\r\n fontFamily: COLORS.bold,\r\n },\r\n cartItemNote: {\r\n marginTop: 3,\r\n marginBottom: 3,\r\n padding: 5,\r\n borderColor: COLORS.light,\r\n borderStyle: \"solid\",\r\n borderWidth: 1,\r\n borderRadius: 5,\r\n color: COLORS.blue\r\n },\r\n cartItemSimilar: {\r\n width: \"100%\",\r\n marginTop: 10,\r\n // marginBottom: 10,\r\n // paddingLeft: 10,\r\n },\r\n cartItemSimilarTitle: {\r\n padding: 5,\r\n color: COLORS.white,\r\n backgroundColor: COLORS.lightBlue,\r\n fontSize: 10,\r\n marginBottom: 10,\r\n },\r\n cartItemSimilarTitleBundled: {\r\n marginBottom: 5,\r\n },\r\n cartItemBundled: {\r\n marginBottom: 10,\r\n },\r\n cartItemSimilarTitlePadding: {\r\n marginLeft: 10\r\n },\r\n cartItemSimilarContent: {\r\n width: \"100%\",\r\n flexDirection: \"row\",\r\n justifyContent: \"space-between\",\r\n },\r\n cartItemSimilarContentCell: {\r\n width: \"50%\",\r\n flex: \"0 0 50%\"\r\n },\r\n cartItemSimilarItem: {\r\n flexDirection: \"row\",\r\n justifyContent: \"space-between\",\r\n alignSelf: \"stretch\",\r\n width: \"100%\",\r\n borderBottomWidth: 1,\r\n borderBottomStyle: \"dashed\",\r\n borderBottomColor: COLORS.light,\r\n paddingBottom: 2,\r\n marginBottom: 5,\r\n // alignItems: \"center\", places price to center\r\n },\r\n cartItemSimilarItemNoBorder: {\r\n borderBottomWidth: 0,\r\n },\r\n cartItemSimilarItemBlock: {\r\n },\r\n cartItemSimilarItemName: {\r\n color: COLORS.blue,\r\n fontSize: 10,\r\n },\r\n cartItemSimilarItemLabel: {\r\n textTransform: \"uppercase\",\r\n fontFamily: COLORS.bold,\r\n color: COLORS.gray2,\r\n fontSize: 8,\r\n },\r\n cartItemSimilarItemPrice: {\r\n fontSize: 12,\r\n color: COLORS.blue\r\n },\r\n cartItemSimilarItemExample: {\r\n fontSize: 8,\r\n color: COLORS.gray\r\n },\r\n roomTotal: {\r\n marginVertical: 10,\r\n textAlign: \"right\",\r\n },\r\n roomTotalSecond: {\r\n marginTop: 0,\r\n marginBottom: 10,\r\n textAlign: \"right\",\r\n },\r\n roomTotalText: {\r\n fontFamily: COLORS.bold,\r\n },\r\n roomTotalAmount: {\r\n fontSize: 12,\r\n color: COLORS.blue,\r\n },\r\n footer: {\r\n marginTop: 20,\r\n flexDirection: \"row\",\r\n justifyContent: \"space-around\",\r\n alignSelf: \"stretch\",\r\n width: \"100%\",\r\n },\r\n footerLeft: {\r\n flexGrow: 1,\r\n flexShrink: 1,\r\n textAlign: \"center\"\r\n },\r\n notification: {\r\n padding: 20,\r\n borderColor: COLORS.red,\r\n borderStyle: \"solid\",\r\n borderWidth: 1,\r\n borderRadius: 5,\r\n },\r\n notificationMargin: {\r\n marginTop: 20,\r\n },\r\n notificationImage: {\r\n width: 25,\r\n height: 21,\r\n marginTop: -5,\r\n marginBottom: 10,\r\n marginHorizontal: \"auto\"\r\n },\r\n notificationText: {\r\n color: COLORS.red,\r\n width: \"66.5%\",\r\n },\r\n total: {\r\n flexBasis: 160,\r\n textAlign: \"right\",\r\n },\r\n totalSectionFirst: {\r\n textAlign: \"right\",\r\n },\r\n totalSection: {\r\n marginTop: 15,\r\n textAlign: \"right\",\r\n },\r\n totalSectionText: {\r\n fontFamily: COLORS.bold,\r\n },\r\n totalSectionAmount: {\r\n fontSize: 14,\r\n color: COLORS.blue,\r\n },\r\n totalSectionFinal: {\r\n marginTop: 30,\r\n textAlign: \"right\",\r\n },\r\n totalSectionAmountFinal: {\r\n fontSize: 22,\r\n color: COLORS.green,\r\n },\r\n pageNumber: {\r\n position: \"absolute\",\r\n fontSize: 13,\r\n bottom: 30,\r\n left: 0,\r\n right: 0,\r\n textAlign: \"center\",\r\n color: COLORS.gray,\r\n },\r\n signature: {\r\n width: \"100%\",\r\n display: \"flex\",\r\n flexDirection: \"row\",\r\n justifyContent: \"space-between\",\r\n alignItems: \"flex-end\",\r\n marginTop: 30,\r\n height: 50,\r\n },\r\n signatureText: {\r\n width: \"100%\",\r\n borderTopWidth: 1,\r\n borderTopColor: COLORS.light,\r\n borderTopStyle: \"solid\",\r\n textAlign: \"center\"\r\n },\r\n signatureValue: {\r\n textAlign: \"center\",\r\n marginBottom: 5,\r\n },\r\n signatureImage: {\r\n maxWidth: \"100%\",\r\n width: \"auto\",\r\n marginHorizontal: \"auto\",\r\n },\r\n discountSection: {\r\n marginTop: 10,\r\n marginLeft: 10, // to remove negative margin of subTitle\r\n },\r\n ...printDocumentStylesDiscounts,\r\n});\r\n","export default {\r\n width100: {\r\n width: \"100%\",\r\n },\r\n flex: {\r\n display: \"flex\",\r\n },\r\n flexRow: {\r\n flexDirection: \"row\",\r\n },\r\n flexColumn: {\r\n flexDirection: \"column\",\r\n },\r\n flexCenter: {\r\n alignItems: \"center\",\r\n },\r\n marginT5: {\r\n marginTop: 5\r\n },\r\n marginT8: {\r\n marginTop: 8\r\n },\r\n marginT10: {\r\n marginTop: 10\r\n },\r\n marginT16: {\r\n marginTop: 16\r\n },\r\n marginT20: {\r\n marginTop: 20\r\n },\r\n marginT30: {\r\n marginTop: 30\r\n },\r\n marginT40: {\r\n marginTop: 40\r\n },\r\n marginB5: {\r\n marginBottom: 5\r\n },\r\n marginB8: {\r\n marginBottom: 8\r\n },\r\n marginB10: {\r\n marginBottom: 10\r\n },\r\n marginB16: {\r\n marginBottom: 16\r\n },\r\n marginB20: {\r\n marginBottom: 20\r\n },\r\n marginB30: {\r\n marginBottom: 30\r\n },\r\n marginB40: {\r\n marginBottom: 40\r\n },\r\n marginL10: {\r\n marginLeft: 10\r\n },\r\n marginL20: {\r\n marginLeft: 20\r\n },\r\n marginR10: {\r\n marginRight: 10\r\n },\r\n marginR20: {\r\n marginRight: 20\r\n },\r\n}\r\n","export default {\r\n discountDeposit: {\r\n backgroundColor: \"#d8d8d8\",\r\n padding: 8,\r\n marginTop: 0,\r\n marginBottom: 5\r\n },\r\n discountPercent: {\r\n paddingLeft: 10,\r\n },\r\n financeCell: {\r\n flexGrow: 1,\r\n borderWidth: 1,\r\n borderColor: \"#d8d8d8\",\r\n borderStyle: \"solid\",\r\n borderRadius: 5,\r\n padding: 5,\r\n },\r\n financeCellMonths: {\r\n fontSize: 11,\r\n },\r\n financeCellText: {\r\n fontSize: 15,\r\n }\r\n}\r\n","import React, {useContext} from \"react\";\r\nimport {Text, Image, View} from '@react-pdf/renderer';\r\nimport PropTypes from \"prop-types\";\r\n\r\nimport {PrintDocumentContext} from \"./printDocumentContext\";\r\n\r\nconst PrintDocumentHeader = (props) => {\r\n const {styles, jobId, fabricatorData, printLogo} = props;\r\n\r\n const date = new Date();\r\n const printContext = useContext(PrintDocumentContext);\r\n\r\n const logoView = printLogo ? (\r\n \r\n \r\n ) : null;\r\n\r\n const jobInfoView = (\r\n \r\n {document.kvConfig.jobId || jobId ? (\r\n \r\n {printContext.messages[\"receipt.header.quoteNumber\"]} \r\n {document.kvConfig.jobId || jobId} \r\n \r\n ) : null}\r\n \r\n {printContext.messages[\"receipt.header.date\"]} \r\n {date.toLocaleDateString().replace(/\\//gi, \"-\")} \r\n \r\n \r\n {printContext.messages[\"receipt.header.time\"]} \r\n {date.toLocaleTimeString()} \r\n \r\n \r\n )\r\n\r\n if (fabricatorData.isAmericanStandard) {\r\n return (\r\n \r\n \r\n Specification Sheet \r\n \r\n {logoView}\r\n {jobInfoView} \r\n \r\n )\r\n }\r\n\r\n return (\r\n \r\n \r\n {logoView}\r\n {jobInfoView} \r\n \r\n )\r\n};\r\n\r\nPrintDocumentHeader.propTypes = {\r\n fabricatorData: PropTypes.object,\r\n jobId: PropTypes.number,\r\n styles: PropTypes.object.isRequired,\r\n printLogo: PropTypes.string,\r\n};\r\n\r\nexport default PrintDocumentHeader\r\n","import React, {useContext, Fragment} from \"react\";\r\nimport {Text, View} from '@react-pdf/renderer';\r\nimport PropTypes from \"prop-types\";\r\n\r\nimport {ADDRESSES_TYPES} from \"./constants\";\r\nimport {PrintDocumentContext} from \"./printDocumentContext\";\r\n\r\n\r\nconst PrintDocumentInfoFabricator = (props) => {\r\n const {styles, fabricatorData, threeColumns} = props;\r\n\r\n const mainAddress = Array.isArray(fabricatorData.addresses) && fabricatorData.addresses.find(adr => {\r\n return adr.addressType === ADDRESSES_TYPES.Shipping\r\n })\r\n\r\n const city = mainAddress && mainAddress.city ? mainAddress.city : fabricatorData.city || \"\";\r\n const address = mainAddress && mainAddress.address1 ? mainAddress.address1 : fabricatorData.address1 || fabricatorData.address2 || \"\";\r\n const postal = mainAddress && mainAddress.postal ? mainAddress.postal : fabricatorData.postal || \"\";\r\n const provence = mainAddress && mainAddress.provence ? mainAddress.provence : fabricatorData.provence || \"\";\r\n let displayAddress = \"\";\r\n [city, provence, postal].forEach(addressPart => { // 1) city 2) provence 3) postal\r\n if (addressPart) {\r\n if (displayAddress) {\r\n displayAddress += \", \"\r\n }\r\n displayAddress += addressPart\r\n }\r\n });\r\n const contactEmail = fabricatorData.contactEmail || \"\";\r\n const emails = contactEmail.includes(\",\") ? contactEmail.split(\",\") : [];\r\n const printContext = useContext(PrintDocumentContext);\r\n\r\n return (\r\n \r\n {printContext.messages[\"receipt.mainInfo.fabricatorInformation\"]} \r\n {fabricatorData.companyName} \r\n {address ? {address} : null}\r\n {displayAddress ? {displayAddress} : null}\r\n {fabricatorData.isCaesarStone ? null : (\r\n \r\n {emails ? emails.map((email, emailIndex) => {\r\n return (\r\n \r\n {email}\r\n \r\n )\r\n }) : {contactEmail} }\r\n {fabricatorData.phone || \"\"} \r\n \r\n )}\r\n \r\n )\r\n};\r\n\r\nPrintDocumentInfoFabricator.propTypes = {\r\n fabricatorData: PropTypes.object.isRequired,\r\n threeColumns: PropTypes.bool,\r\n styles: PropTypes.object.isRequired,\r\n};\r\n\r\nexport default PrintDocumentInfoFabricator\r\n","export const ADDRESSES_TYPES = {\r\n Billing: \"Billing\",\r\n Shipping: \"Shipping\",\r\n}\r\n","import React, {Fragment, useContext} from \"react\";\r\nimport {View, Text} from '@react-pdf/renderer';\r\nimport PropTypes from \"prop-types\";\r\n\r\nimport {getCurrencySign, getPriceWithCurrency, getRoomName, getTotalPrice, toFixedPrice} from \"../../../misc/helpers\";\r\nimport {getCurrentLayout} from \"../../appLayout\";\r\nimport PrintDocumentBodyCartItem from \"./printDocumentBodyCartItem\";\r\nimport {PrintDocumentContext} from \"./printDocumentContext\";\r\nimport PrintSimilarProducts from \"./similarProducts/printSimilarProducts\";\r\nimport {filterCartItems} from \"../../look/lookNavigation/lookFunctions2\";\r\nimport {getCommonVisualizerType, IS_LIXIL_UI} from \"../../../config\";\r\nimport {getShowPrice} from \"../../../misc/priceFunctions\";\r\nimport {\r\n getFeatureGroupFromWizardGroup,\r\n showWizardInsteadOfQT\r\n} from \"../../look/lookNavigation/lookMain/lookWizard/lookWizardFunctions\";\r\nimport {WIZARD_GROUP_TYPES} from \"../../../interfaces/wizardItemInterface\";\r\nimport PrintDocumentBodyWizardItem from \"./printDocumentBodyWizardItem\";\r\nimport {getDifferentCurrencyCartItems} from \"../../../misc/misc2\";\r\nimport {\r\n getWizardGroupName,\r\n isSameVisualizerWizard\r\n} from \"../../look/lookNavigation/lookMain/lookWizard/lookWizardFunctions2\";\r\n\r\nconst PrintDocumentBody = (props) => {\r\n let {styles, quotes, cartItems, fabricatorData, locale, filterGroups, wizardState, sqftSlabState,\r\n cartItemsThumbnails} = props;\r\n const fabricatorSettings = fabricatorData.settings;\r\n\r\n const printContext = useContext(PrintDocumentContext);\r\n\r\n if (IS_LIXIL_UI) {\r\n cartItems = filterCartItems(cartItems, true, true);\r\n }\r\n\r\n const getGroupName = (featureGroup, quoteIndex) => {\r\n const lowerCasedName = featureGroup.partName.toLowerCase();\r\n console.log(\"featureGroup.customNames\", featureGroup.customNames);\r\n if (featureGroup.customNames && featureGroup.customNames[quoteIndex]) {\r\n return featureGroup.customNames[quoteIndex]\r\n }\r\n if (fabricatorData.isLowes || fabricatorData.isCaesarStone) {\r\n if (locale === \"fr-FR\" && printContext.messages[\"transDoc.customDisplayName_FR.\"+ lowerCasedName]) {\r\n return printContext.messages[\"transDoc.customDisplayName_FR.\"+ lowerCasedName]\r\n } else if (locale === \"pl-PL\" && printContext.messages[\"transDoc.customTranslateName_PL.\"+ lowerCasedName]) {\r\n return printContext.messages[\"transDoc.customTranslateName_PL.\"+ lowerCasedName]\r\n }\r\n }\r\n return featureGroup.customGroupDisplayName || featureGroup.partName\r\n };\r\n\r\n const showPrice = getShowPrice(fabricatorData, true);\r\n\r\n return quotes.map((quote, quoteIndex) => {\r\n\r\n const layout = getCurrentLayout(fabricatorSettings.allowVisualizerSwitching && quote.room ? quote.room : document.kvConfig.visualizerType);\r\n const visType = getCommonVisualizerType(fabricatorSettings.allowVisualizerSwitching && quote.room ? quote.room : document.kvConfig.visualizerType);\r\n\r\n const quoteTotalPrice = getTotalPrice(quoteIndex, false);\r\n // const subTotalPrice = getQuotePriceWithTaxes(quoteTotalPrice);\r\n const subTotalPrice = quoteTotalPrice.materialPrice;\r\n const fixedPrice = toFixedPrice(subTotalPrice);\r\n\r\n let uniqueCartItemIds = [];\r\n const quoteCartItems = cartItems.filter((cartItem) => cartItem.cartFeature && (cartItem.currentQuote === quoteIndex));\r\n\r\n const {wizardList, wizardIsActive, allWizardsValues} = wizardState;\r\n const showWizardSteps = showWizardInsteadOfQT(wizardList, wizardIsActive);\r\n\r\n const differentCurrencyObjects = getDifferentCurrencyCartItems(fabricatorSettings, quoteCartItems);\r\n\r\n return (\r\n \r\n \r\n {printContext.messages[\"receipt.content.roomTitle\"]} {getRoomName(quoteIndex, cartItems, quotes, printContext.messages, locale, fabricatorData)}\r\n \r\n \r\n {showWizardSteps ? wizardList.map(wizardItem => {\r\n const existingAllObject = allWizardsValues.find(wizSelObject => {\r\n return wizSelObject.wizardItemId === wizardItem.id && wizSelObject.quoteIndex === quoteIndex\r\n && isSameVisualizerWizard(wizSelObject, visType)\r\n });\r\n if (!existingAllObject || !existingAllObject.wizardSelectedValues) {\r\n return null\r\n }\r\n return Object.keys(existingAllObject.wizardSelectedValues).map(key => {\r\n const wizardGroup = existingAllObject.wizardSelectedValues[key].wizardGroup;\r\n if (wizardGroup && wizardGroup.nodeType === WIZARD_GROUP_TYPES.custom && !wizardGroup.hideInCartAndReceipt) {\r\n return \r\n }\r\n let currentCartItems = cartItems.filter(cartItem => {\r\n if (cartItem.bundleParentId) {\r\n return false\r\n }\r\n return cartItem.cartFeature && (cartItem.currentQuote === quoteIndex)\r\n && (wizardGroup && cartItem.fromWizardGroupId\r\n ? (wizardGroup.id === cartItem.fromWizardGroupId)\r\n : +key === cartItem.fromWizardStep)\r\n && !uniqueCartItemIds.includes(cartItem.id)\r\n });\r\n if (currentCartItems.length) {\r\n uniqueCartItemIds = [...uniqueCartItemIds, ...currentCartItems.map(cItem => cItem.id)];\r\n const slabsCartItems = currentCartItems.filter(cartItem => cartItem.partId === \"slabs\");\r\n const featureGroup = getFeatureGroupFromWizardGroup(wizardGroup, layout);\r\n const mainCartItems = (\r\n \r\n \r\n {featureGroup ? getGroupName(featureGroup, quoteIndex) || getWizardGroupName(wizardGroup) : getWizardGroupName(wizardGroup)}\r\n \r\n {currentCartItems.map((cartItem, cartItemIndex) => {\r\n if (cartItem.partId === \"slabs\") {\r\n return null\r\n }\r\n return \r\n })}\r\n \r\n )\r\n return slabsCartItems.length ? (\r\n \r\n {mainCartItems}\r\n \r\n \r\n {printContext.messages[\"sqftFeaturesPopup.title.slabs\"]}\r\n \r\n {slabsCartItems.map((cartItem, cartItemIndex) => {\r\n return \r\n })}\r\n \r\n \r\n ) : mainCartItems\r\n // } else if (wizardGroup && existingAllObject.wizardSelectedValues[key].selectedFeature && !wizardGroup.hideInCartAndReceipt) {\r\n // return \r\n }\r\n })\r\n }) : null}\r\n {layout.qtCategories && !showWizardSteps ? (\r\n layout.qtCategories.map(qtCategory => {\r\n return qtCategory.subParts.map((subPart, subPartIndex) => {\r\n let currentCartItems = quoteCartItems.filter(cartItem => {\r\n if (cartItem.bundleParentId) {\r\n return false\r\n }\r\n return (subPart.part.partId === cartItem.partId || (cartItem.relatedProductParent && subPart.part.partId === cartItem.relatedProductParent.partId))\r\n && !uniqueCartItemIds.includes(cartItem.id)\r\n });\r\n if (!currentCartItems.length) {\r\n return null\r\n }\r\n uniqueCartItemIds = [...uniqueCartItemIds, ...currentCartItems.map(cItem => cItem.id)];\r\n return (\r\n \r\n {getGroupName(subPart.part, quoteIndex)} \r\n {currentCartItems.map((cartItem, cartItemIndex) => {\r\n return \r\n })}\r\n \r\n )\r\n })\r\n })\r\n ) : null}\r\n {quoteCartItems.map((cartItem) => {\r\n if (!uniqueCartItemIds.includes(cartItem.id) && !cartItem.bundleParentId) {\r\n uniqueCartItemIds.push(cartItem.id);\r\n return (\r\n \r\n \r\n {cartItem.displayFakeFeatureGroupName\r\n ? printContext.messages[\"sqftFeaturesPopup.title.\" + cartItem.displayFakeFeatureGroupName]\r\n : cartItem.cartFeature.dbFeature.customGroupName || cartItem.selectionGroup\r\n || (cartItem.cartFeature && cartItem.cartFeature.getParent ? getGroupName(cartItem.cartFeature.getParent(), quoteIndex) : null)}\r\n \r\n \r\n \r\n )\r\n }\r\n return null\r\n })}\r\n \r\n {showPrice ? (\r\n \r\n \r\n {printContext.messages[\"shoppingCart.totalColumnsSubTotal\"]}: \r\n \r\n {getPriceWithCurrency(fabricatorSettings, fixedPrice)}\r\n \r\n \r\n {differentCurrencyObjects.length ? differentCurrencyObjects.map(currObject => {\r\n const currentTotal = getTotalPrice(quoteIndex, false, currObject.cartItems);\r\n return (\r\n \r\n {printContext.messages[\"shoppingCart.totalColumnsSubTotal\"]}: \r\n \r\n {getCurrencySign(currObject.currency, fabricatorSettings) + toFixedPrice(currentTotal.materialPrice, true)}\r\n \r\n \r\n )\r\n }) : null}\r\n \r\n \r\n ) : null}\r\n \r\n )\r\n })\r\n};\r\n\r\nPrintDocumentBody.propTypes = {\r\n quotes: PropTypes.array.isRequired,\r\n cartItems: PropTypes.array.isRequired,\r\n fabricatorData: PropTypes.object.isRequired,\r\n locale: PropTypes.string.isRequired,\r\n filterGroups: PropTypes.array,\r\n styles: PropTypes.object.isRequired,\r\n};\r\n\r\nexport default PrintDocumentBody\r\n","import React, {useContext} from \"react\";\r\nimport {View, Text} from \"@react-pdf/renderer\";\r\nimport PropTypes from \"prop-types\";\r\n\r\nimport {PrintDocumentContext} from \"./printDocumentContext\";\r\nimport {cartItemInterface} from \"../../shoppingCart/cartItemInterface\";\r\nimport PrintDocumentBodyCartItem from \"./printDocumentBodyCartItem\";\r\nimport {IS_LIXIL_UI} from \"../../../config\";\r\n\r\n\r\nconst PrintDocumentBodyBundledCartItems = (props) => {\r\n const {styles, cartItem, fabricatorData, locale, cartItems} = props;\r\n // const fabricatorSettings = fabricatorData.settings;\r\n\r\n const bundleProducts = cartItems ? cartItems.filter(cItem => {\r\n return cItem.bundleParentId && (cItem.bundleParentId === cartItem.id)\r\n }) : [];\r\n\r\n const printContext = useContext(PrintDocumentContext);\r\n\r\n if (fabricatorData.isAmericanStandard && !IS_LIXIL_UI) {\r\n // the quoting tool needs to have the bundled products hidden (only for American standard) in the cart and receipt,\r\n // but still send items through the API to LP.\r\n return null;\r\n }\r\n\r\n return (\r\n \r\n \r\n {printContext.messages[\"shoppingCart.bundledItems\"]}\r\n \r\n \r\n {bundleProducts.map(bundleCartItem => {\r\n return \r\n })}\r\n \r\n \r\n )\r\n};\r\n\r\nPrintDocumentBodyBundledCartItems.propTypes = {\r\n cartItem: PropTypes.shape(cartItemInterface),\r\n fabricatorData: PropTypes.object.isRequired,\r\n locale: PropTypes.string.isRequired,\r\n styles: PropTypes.object.isRequired,\r\n};\r\n\r\nexport default PrintDocumentBodyBundledCartItems\r\n","export default [\r\n \"granite_transformations_of_cambridge\",\r\n \"granite_transformations_of_watford\",\r\n \"granite_transformations_of_norwich\",\r\n \"granite_transformations_of_holt\",\r\n \"granite_transformations_of_newcastle\",\r\n \"granite_transformations_of_newark\",\r\n \"granite_transformations_of_nottingham\",\r\n \"granite_transformations_of_wakefield\",\r\n \"granite_transformations_of_york\",\r\n \"granite_transformations_north_leeds\",\r\n \"granite_transformations_of_ipswich\",\r\n \"granite_transformations_of_colchester\",\r\n \"granite_transformations_of_belfast\",\r\n \"granite_transformations_of_hinckley\",\r\n \"granite_transformations_of_tees_valley\",\r\n \"granite_transformations_of_tunbridge_wells\",\r\n \"granite_transformations_of_ruxley\",\r\n \"granite_transformations_of_sevenoaks\",\r\n \"granite_transformations_of_derby\",\r\n \"granite_transformations_of_bridgemere\",\r\n \"granite_transformations_congleton\",\r\n \"granite_transformations_of_cheltenham\",\r\n \"granite_transformations_of_bristol\",\r\n \"granite_transformations_of_banbury\",\r\n \"granite_transformations_of_warwick\",\r\n \"granite_transformations_of_rugby\",\r\n \"granite_transformations_of_gyle\",\r\n \"granite_transformations_of_exeter\",\r\n \"trend_transformations_of_bolton\",\r\n \"trend_transformations_of_kutsford\",\r\n \"trend_transformations_of_maidstone\",\r\n \"trend_transformations_of_ellesmere_port\",\r\n \"trend_transformations_of_burton\",\r\n \"trend_transformations_of_speke\",\r\n \"trend_transformations_of_perth\",\r\n \"trend_transformations_of_plymouth\",\r\n \"trend_transformations_of_birmingham_east\",\r\n \"trend_transformations_of_milton_keynes\",\r\n \"trend_transformations_of_eastbourne\",\r\n \"trend_transformations_uk\"\r\n];\r\n","import React, {useContext} from \"react\";\r\nimport PropTypes from \"prop-types\";\r\nimport {View, Text} from \"@react-pdf/renderer\";\r\n\r\nimport PrintSimilarProductsListItem from \"./printSimilarProductsListItem\";\r\nimport {PrintDocumentContext} from \"../printDocumentContext\";\r\nimport {getFeaturesCollectionsList} from \"../../../shoppingCart/similarProducts/similarProductsFunctions\";\r\n\r\nconst PrintSimilarProducts = (props) => {\r\n\r\n const {styles, cartItems, fabricatorData, filterGroups, locale, quoteIndex} = props;\r\n const similarOpened = true;\r\n const printContext = useContext(PrintDocumentContext);\r\n\r\n const insideQuote = Number.isInteger(quoteIndex);\r\n\r\n const addedCountertops = insideQuote\r\n ? cartItems.filter(cItem => cItem.currentQuote === quoteIndex && cItem.partId.includes(\"countertop\"))\r\n : cartItems.filter(cItem => cItem.partId.includes(\"countertop\"));\r\n\r\n const cartItem = addedCountertops[0];\r\n\r\n if (!cartItem) {\r\n return null\r\n }\r\n\r\n const featuresCollectionsList = getFeaturesCollectionsList(cartItem, filterGroups);\r\n if (!featuresCollectionsList || !featuresCollectionsList.length) {\r\n return null\r\n }\r\n\r\n const totalCountertopsQuantity = addedCountertops.reduce(((accumulator, cItem) => accumulator + cItem.quantity), 0);\r\n\r\n return (\r\n \r\n \r\n {printContext.messages[\"similar.title\"]}\r\n \r\n \r\n \r\n \r\n \r\n {printContext.messages[\"similar.filterName\"]} \r\n \r\n \r\n {printContext.messages[\"similar.product.priceProject\"]} \r\n \r\n \r\n {similarOpened ? featuresCollectionsList.map((featureCollection, featureCollectionIndex) => {\r\n return \r\n }) : null}\r\n \r\n \r\n \r\n )\r\n};\r\n\r\nPrintSimilarProducts.propTypes = {\r\n quoteIndex: PropTypes.number,\r\n cartItems: PropTypes.array.isRequired,\r\n filterGroups: PropTypes.array,\r\n fabricatorData: PropTypes.object.isRequired,\r\n locale: PropTypes.string.isRequired,\r\n styles: PropTypes.object.isRequired,\r\n};\r\n\r\nexport default PrintSimilarProducts\r\n","import React, {useContext} from \"react\";\r\nimport PropTypes from \"prop-types\";\r\nimport {View, Text} from \"@react-pdf/renderer\";\r\n\r\nimport {cartItemInterface} from \"../../../shoppingCart/cartItemInterface\";\r\nimport {getPriceWithCurrency} from \"../../../../misc/helpers\";\r\nimport {PrintDocumentContext} from \"../printDocumentContext\";\r\nimport {getCartItemName} from \"../printDocumentFunctions\";\r\nimport {getSimilarItemInfoObject} from \"../../../shoppingCart/similarProducts/similarProductsFunctions\";\r\nimport {featureCollectionInterface} from \"../../../../interfaces/featureInterface\";\r\n\r\nconst PrintSimilarProductsListItem = (props) => {\r\n\r\n const {styles, cartItem, addedCountertops, fabricatorData, locale, featureCollection, filterGroups, quoteIndex, lastItem,\r\n totalCountertopsQuantity} = props;\r\n const fabricatorSettings = fabricatorData.settings;\r\n const printContext = useContext(PrintDocumentContext);\r\n\r\n const {filterValueName, feature, subTotalPrice} = getSimilarItemInfoObject(\r\n cartItem,\r\n addedCountertops,\r\n featureCollection,\r\n totalCountertopsQuantity,\r\n quoteIndex,\r\n filterGroups\r\n );\r\n\r\n return (\r\n \r\n \r\n \r\n {filterValueName}\r\n \r\n \r\n {printContext.messages[\"similar.product.example\"]} {getCartItemName(feature, fabricatorData, printContext, locale)}\r\n \r\n \r\n \r\n {getPriceWithCurrency(fabricatorSettings, subTotalPrice, feature)} \r\n \r\n \r\n )\r\n};\r\n\r\nPrintSimilarProductsListItem.propTypes = {\r\n quoteIndex: PropTypes.number.isRequired,\r\n cartItem: PropTypes.shape(cartItemInterface),\r\n addedCountertops: PropTypes.arrayOf(PropTypes.shape(cartItemInterface)),\r\n featureCollection: PropTypes.shape(featureCollectionInterface),\r\n fabricatorData: PropTypes.object.isRequired,\r\n locale: PropTypes.string.isRequired,\r\n filterGroups: PropTypes.array.isRequired,\r\n lastItem: PropTypes.bool.isRequired,\r\n styles: PropTypes.object.isRequired,\r\n totalCountertopsQuantity: PropTypes.number.isRequired,\r\n};\r\n\r\n\r\nexport default PrintSimilarProductsListItem\r\n","export const getGroupDescription = (groupName) => {\r\n groupName = (groupName || '').toLowerCase();\r\n // console.log(\"groupName\", groupName);\r\n switch (groupName) {\r\n case 'material':\r\n return \"quotingTool.featureGroupDescription.material\";\r\n case \"room\":\r\n return \"quotingTool.featureGroupDescription.room\";\r\n case \"edge profile\":\r\n case \"edge\":\r\n return \"quotingTool.featureGroupDescription.edgeProfile\";\r\n case \"cutouts\":\r\n return \"quotingTool.featureGroupDescription.cutouts\";\r\n case \"faucets\":\r\n case \"faucet\":\r\n return \"quotingTool.featureGroupDescription.faucet\";\r\n case \"sinks\":\r\n case \"sink\":\r\n return \"quotingTool.featureGroupDescription.sink\";\r\n case \"counter top removal\":\r\n case \"countertop removal\":\r\n return \"quotingTool.featureGroupDescription.countertopRemoval\";\r\n case \"counter top disposal\":\r\n case \"countertop disposal\":\r\n return \"quotingTool.featureGroupDescription.countertopDisposal\";\r\n case \"radius\":\r\n return \"quotingTool.featureGroupDescription.radius\";\r\n case \"plumbing\":\r\n return \"quotingTool.featureGroupDescription.plumbing\";\r\n case \"backsplash\":\r\n return \"quotingTool.featureGroupDescription.backsplash\";\r\n case \"sealer\":\r\n return \"quotingTool.featureGroupDescription.sealer\";\r\n case \"hourly labor\":\r\n return \"quotingTool.featureGroupDescription.hourly\";\r\n case \"trip charge\":\r\n return \"quotingTool.featureGroupDescription.tripCharge\";\r\n case \"milling down\":\r\n return \"quotingTool.featureGroupDescription.millingDown\";\r\n case \"template\":\r\n return \"quotingTool.featureGroupDescription.template\";\r\n case \"15 year sealer\":\r\n return \"quotingTool.featureGroupDescription.15YearsSealer\";\r\n case \"10 year sealer\":\r\n return \"quotingTool.featureGroupDescription.10YearsSealer\";\r\n case \"finishes\":\r\n return \"quotingTool.featureGroupDescription.finishes\";\r\n case \"flat metal support brackets\":\r\n return \"quotingTool.featureGroupDescription.flatMetalSupportBrackets\";\r\n case \"bump out\":\r\n return \"quotingTool.featureGroupDescription.bumpOut\";\r\n case \"inside corner\":\r\n return \"quotingTool.featureGroupDescription.insideCorner\";\r\n case \"45 degree inside corner\":\r\n return \"quotingTool.featureGroupDescription.45DegreeInsideCorner\";\r\n case \"arch\":\r\n return \"quotingTool.featureGroupDescription.arch\";\r\n case \"cooktop type\":\r\n return \"quotingTool.featureGroupDescription.cooktopType\";\r\n case \"sink type\":\r\n return \"quotingTool.featureGroupDescription.sinkType\";\r\n case 'stove type':\r\n return 'quotingTool.featureGroupDescription.stoveType';\r\n case 'protection plan':\r\n return 'quotingTool.featureGroupDescription.protectionPlan';\r\n default:\r\n return 'quotingTool.featureGroupDescription.default';\r\n }\r\n}\r\n","import axios from \"axios\";\r\nimport store from \"../store\";\r\nimport {setNetworkConnection} from \"../actions/serverFunctions\";\r\n\r\nconst headers = {\r\n \"Content-Type\": \"application/json\"\r\n};\r\n\r\nconst AxiosInstance = axios.create({\r\n // baseURL: process.env.REACT_APP_API_BASE_URL + '/api/',\r\n // timeout: 120000,\r\n headers\r\n});\r\n\r\nAxiosInstance.interceptors.response.use((response) => {\r\n const {serverState} = store.getState();\r\n if (!serverState.networkConnection) {\r\n store.dispatch(setNetworkConnection(true))\r\n }\r\n return response;\r\n}, (error) => {\r\n // Do something with response error\r\n if (error && error.toJSON && error.toJSON().message === \"Network Error\") {\r\n store.dispatch(setNetworkConnection(false))\r\n }\r\n return Promise.reject(error);\r\n});\r\n\r\nexport default AxiosInstance;\r\n\r\n\r\nexport const apiResponseError = response => {\r\n // console.log(\"apiResponseError\", response);\r\n if (response && response.data && response.data.errors) {\r\n return Object.keys(response.data.errors)\r\n .map(k => `${k} - ${response.data.errors[k]}`)\r\n .join('
');\r\n }\r\n if (response && response.error) {\r\n return response.error;\r\n }\r\n\r\n return null;\r\n};\r\n\r\nexport const apiGet = async url => {\r\n try {\r\n const response = await AxiosInstance.get(url);\r\n return {data: {...response.data}, error: apiResponseError(response)};\r\n } catch (error) {\r\n return {error: apiResponseError(error)};\r\n }\r\n};\r\n\r\nexport const apiPost = async (url, data) => {\r\n console.log(\"url to post\", url);\r\n console.log(\"data to post\", data);\r\n try {\r\n const response = await AxiosInstance.post(url, data);\r\n console.log(\"response1\", response);\r\n return {data: {...response.data}, error: apiResponseError(response)};\r\n } catch (error) {\r\n console.log(\"response1 error\", error);\r\n return {error: apiResponseError(error)};\r\n }\r\n}\r\n\r\n","export default \"// This is our input from js world\\r\\nattribute vec2 coords;\\r\\n// This is output for the fragment shader\\r\\n// varying variables are a little special\\r\\n// you will see why later\\r\\nvarying highp vec2 vTextureCoord;\\r\\n\\r\\nvoid main (void) {\\r\\n // Texture and verticies have different coordinate spaces\\r\\n // we do this to invert Y axis\\r\\n vTextureCoord = -coords;\\r\\n\\r\\n // Setting vertix position for shape assembler\\r\\n // GLSL has many convenient vector functions\\r\\n // here we extending 2D coords vector to 4D with 2 values\\r\\n // 0.0 is a Z coordinate\\r\\n // 1.1 is a W, special value needed for 3D math\\r\\n // just leave it 1 for now\\r\\n gl_Position = vec4(coords, 0.0, 1.0);\\r\\n}\";","export default \"precision mediump float;\\r\\nvarying highp vec2 vTextureCoord;\\r\\nuniform sampler2D uSampler;\\r\\n\\r\\nvec2 coords;\\r\\nfloat x;\\r\\nfloat y;\\r\\nfloat l;\\r\\nfloat a;\\r\\nvec4 color;\\r\\nvec4 color2;\\r\\n\\r\\nfloat to_srgb(float v) {\\r\\n float result = 0.0;\\r\\n if (v < 0.003) {\\r\\n result = v * 12.920;\\r\\n } else {\\r\\n result = pow(v, 0.417);\\r\\n result = result * 1.055;\\r\\n result = result - 0.055;\\r\\n }\\r\\n return result;\\r\\n}\\r\\n\\r\\nvec4 vec_to_srgb(vec4 v) {\\r\\n vec4 result;\\r\\n result.r = to_srgb(v.r);\\r\\n result.g = to_srgb(v.g);\\r\\n result.b = to_srgb(v.b);\\r\\n result.a = v.a;\\r\\n return result;\\r\\n}\\r\\n\\r\\nfloat from_srgb(float v) {\\r\\n float result = 0.0;\\r\\n if (v < 0.040) {\\r\\n result = v / 12.920;\\r\\n } else {\\r\\n result = v + 0.055;\\r\\n result = result / 1.055;\\r\\n result = pow(result, 2.4);\\r\\n }\\r\\n return result;\\r\\n}\\r\\n\\r\\nvec4 vec_from_srgb(vec4 v) {\\r\\n vec4 result;\\r\\n result.r = from_srgb(v.r);\\r\\n result.g = from_srgb(v.g);\\r\\n result.b = from_srgb(v.b);\\r\\n result.a = v.a;\\r\\n return result;\\r\\n}\\r\\n\\r\\nvoid main(void){\\r\\n float gamma = 2.4;\\r\\n float out_gamma = 0.41666;\\r\\n x = vTextureCoord[0];\\r\\n y = vTextureCoord[1];\\r\\n coords[0] = (1.0 - x) / 2.0;\\r\\n coords[1] = (y + 1.0) / 2.0;\\r\\n color = vec_from_srgb(texture2D(uSampler, coords));\\r\\n a = color.a;\\r\\n color2 = vec4(8, 8, 8, 0) * color + vec4(1, 1, 1, 0);\\r\\n color2 = vec4(8, 8, 8, 0) * color / color2;\\r\\n color2.a = a;\\r\\n gl_FragColor = vec_to_srgb(color2);\\r\\n}\";","import $ from \"jquery\";\r\n\r\nconst sqftCursorManager = {\r\n canvas: null,\r\n currentCursor: null,\r\n currentCursorOwner: null,\r\n noCursorStealing: false,\r\n\r\n init(canvas) {\r\n this.canvas = canvas;\r\n this.resetCursor(null);\r\n },\r\n\r\n setCursor(cursor, owner, noStealing = false) {\r\n this.noCursorStealing = noStealing || this.noCursorStealing;\r\n\r\n if (this.currentCursorOwner === null || this.currentCursorOwner === owner) {\r\n if (this.currentCursor !== cursor) {\r\n const prefix = \"cursor-\";\r\n const classes = this.canvas.className.split(\" \").filter(c => c.lastIndexOf(prefix, 0) !== 0);\r\n this.canvas.className = classes.join(\" \").trim();\r\n $(this.canvas).addClass(`cursor-${cursor}`);\r\n $(this.canvas).css({ cursor: null });\r\n this.currentCursorOwner = owner;\r\n this.currentCursor = cursor;\r\n }\r\n }\r\n },\r\n\r\n setCursorImage(cursorImage, owner, noStealing = false) {\r\n this.setCursor(\"image\", owner, noStealing);\r\n $(this.canvas).css({ cursor: `url(${cursorImage}), default !important` });\r\n },\r\n\r\n resetCursor(owner) {\r\n if (this.currentCursorOwner === owner) {\r\n this.currentCursorOwner = null;\r\n this.setCursor(\"grab\", null);\r\n this.releaseStealLock(owner);\r\n }\r\n },\r\n\r\n getCursor() {\r\n const prefix = \"cursor-\";\r\n const classes = this.canvas.className.split(\" \").filter(c => c.lastIndexOf(prefix, 0) === 0);\r\n return classes.map(c => c.replace(prefix, \"\"));\r\n },\r\n\r\n stealCursor(override = false, revertBackAfterMouseUp = false) {\r\n if (override && this.currentCursorOwner) {\r\n if (this.currentCursorOwner.destroy) {\r\n this.currentCursorOwner.destroy(true, revertBackAfterMouseUp);\r\n }\r\n }\r\n\r\n if (!this.noCursorStealing || override) {\r\n this.resetCursor(this.currentCursorOwner);\r\n }\r\n },\r\n\r\n releaseStealLock(owner) {\r\n if (this.currentCursorOwner === owner) {\r\n this.noCursorStealing = false;\r\n }\r\n }\r\n};\r\n\r\nexport default sqftCursorManager;\r\n","import EventManager from \"../../../store/sqftEventManager\";\r\nimport config from \"../../../store/sqftConfig\";\r\nimport {getFontsize, inchesToMm, isDisabledInPopupWithParents, isInnerCorner} from \"../../../../../helpers/sqftHelper\";\r\n//import shapeHelper from \"../../../../../helpers/shapeHelper\";\r\nimport {isDisabledInPopupShouldBeHidden} from \"../../../../../constants\";\r\n\r\nexport default function() {\r\n var self = this,\r\n point = null;\r\n\r\n function setPoint(value) { point = value; }\r\n\r\n this.destroy = function(protect) {\r\n if(!protect) {\r\n EventManager.removeEvent(self);\r\n }\r\n };\r\n\r\n this.init = function(point) {\r\n setPoint(point);\r\n this.initEvents();\r\n };\r\n this.initEvents = () => {\r\n EventManager.addEvent(\r\n EventManager.events.RENDER,\r\n self.render,\r\n self,\r\n EventManager.priorities.OVERLAY\r\n );\r\n }\r\n this.deregisterPartEvents = () => {\r\n EventManager.removeEvent(this);\r\n };\r\n this.reInitPartEvents = () => {\r\n this.initEvents();\r\n };\r\n this.render = (ctx) => {\r\n if (isDisabledInPopupShouldBeHidden() && isDisabledInPopupWithParents(point)) {\r\n return\r\n }\r\n\r\n if (point.arcLength > 0 || point.angle > 0) {\r\n const line = point.getParent(),\r\n shape = line.getParent(),\r\n //nextLine = shape.getNextLine(line),\r\n //nextLineTo = nextLine.calculateRenderPosition(nextLine.to),\r\n prevLine = shape.getPrevLine(line),\r\n prevLineFrom = prevLine.calculateRenderPosition(prevLine.from),\r\n renderTo = line.calculateRenderPosition(line.to),\r\n renderFrom = line.calculateRenderPosition(line.from),\r\n isInner = isInnerCorner(shape, prevLineFrom, renderFrom, renderTo);\r\n\r\n let fontSize = getFontsize(),\r\n font = (config.measureUnit === \"Imperial\" ? fontSize : fontSize - 5).toString() + \"px \" + config.activeFontBold,\r\n radius = point.arcLength || point.angle,\r\n //dir = shape.getAngleDirection(shape.getPrevLine(line)),\r\n //isInner = shapeHelper.isAngleInner(dir),\r\n pointCorner = point.corner ? point.corner : isInner,\r\n cornerMargin = pointCorner\r\n ? point.arcLength ? +point.arcLength - 8 : +point.angle\r\n : point.arcLength ? -point.arcLength + 8 : -point.angle,\r\n radiusLetter = point.arcLength ? \"r\" : \"\",\r\n dstring = config.measureUnit === \"Metric\"\r\n ? radiusLetter + new Fraction(inchesToMm(radius)) + \"mm\"\r\n : radiusLetter + new Fraction(radius) + \"\\\"\",\r\n mtext = ctx.measureText(dstring),\r\n tLen = mtext.width,\r\n offset = point.getPointField(),\r\n renderPos = {\r\n x: offset.x + offset.width,\r\n y: offset.y + (offset.height / 2)\r\n };\r\n ctx.beginPath();\r\n ctx.font = font;\r\n ctx.textAlign = \"center\";\r\n renderPos.y += fontSize / 2;\r\n // ctx.fillStyle = \"rgb(178, 99, 168)\";\r\n // ctx.fillRect(offset.x - 4, offset.y + 2 + (fontSize * 2), tLen + 6, fontSize + 4);\r\n ctx.beginPath();\r\n ctx.fillStyle = \"#b263a8\";\r\n\r\n //todo correct positions\r\n switch (point.pointDirection) {\r\n case \"lefttop\":\r\n ctx.wrapText(\r\n dstring,\r\n renderPos.x - offset.width + tLen,//- (tLen + cornerMargin) * config.scale / config.defaultScale,\r\n renderPos.y - (fontSize + cornerMargin) * config.scale / config.defaultScale, mtext, fontSize\r\n );\r\n break;\r\n case \"righttop\":\r\n ctx.wrapText(\r\n dstring,\r\n renderPos.x + cornerMargin * config.scale / config.defaultScale,\r\n renderPos.y - (fontSize + cornerMargin) * config.scale / config.defaultScale, mtext, fontSize\r\n );\r\n break;\r\n case \"rightbottom\":\r\n ctx.wrapText(\r\n dstring,\r\n renderPos.x + (fontSize + cornerMargin) * config.scale / config.defaultScale,\r\n renderPos.y + (fontSize + cornerMargin) * config.scale / config.defaultScale, mtext, fontSize\r\n );\r\n break;\r\n case \"leftbottom\":\r\n ctx.wrapText(\r\n dstring,\r\n renderPos.x - (60 + cornerMargin) * config.scale / config.defaultScale,\r\n renderPos.y + (fontSize + cornerMargin) * config.scale / config.defaultScale,\r\n mtext, fontSize\r\n );\r\n break;\r\n default:\r\n ctx.wrapText(\r\n dstring,\r\n renderPos.x,\r\n renderPos.y - (fontSize / 2) + (fontSize * 2), mtext, fontSize\r\n );\r\n break;\r\n }\r\n }\r\n };\r\n}\r\n","import {SQFTResourceController} from \"./SQFTResourceController\";\r\nimport Spacer from \"../../core/shapes/spacer\";\r\nimport {WORKSPACE_RESOURCES} from \"../../../../constants\";\r\n\r\nexport class SpacersController extends SQFTResourceController {\r\n isJustCreated: false;\r\n\r\n constructor(props) {\r\n super(props);\r\n this.resourceName = WORKSPACE_RESOURCES.spacers;\r\n }\r\n\r\n setIsJustCreated(value) {\r\n this.isJustCreated = value\r\n }\r\n\r\n createSpacer(point1, point2, pos) {\r\n if (!this.isNotCreatedSpacerExist()) {\r\n this.addResource(new Spacer([point1, point2], pos));\r\n }\r\n }\r\n\r\n /**\r\n * Used to skip mouse up in workspace events\r\n **/\r\n isNotCreatedSpacerExist() {\r\n const resources = this.getResources();\r\n return resources.some(spacer => !spacer.getIsCreated())\r\n }\r\n}\r\n\r\n","import * as uuid from \"uuid\";\r\n\r\nimport EventManager from \"../../store/sqftEventManager\";\r\nimport {SHAPE_PART_ID, SIDEBAR_BUTTONS_MENU} from \"../../../../constants\";\r\nimport COLOR_THEMES from \"../../../../../../colorThemes\";\r\nimport eventManager from \"../../store/sqftEventManager\";\r\nimport store from \"../../../../../../store\";\r\nimport workspaceControllers from \"../../store/workspaceControllers\";\r\nimport {\r\n getDistanceFromPointToLine,\r\n getMousePositionOnShape,\r\n getParallelPoints,\r\n getPointField\r\n} from \"../../../../helpers/sqftHelper\";\r\nimport sqftEventManager from \"../../store/sqftEventManager\";\r\nimport {\r\n adjustPointsRelativeToTopLeft,\r\n findTopLeftPoint,\r\n getThePositionOfAPointToTheLeftOrRightOfALine, sortPointsClockwise\r\n} from \"../../../../helpers/coordinatesHelper\";\r\nimport sqftConfig from \"../../store/sqftConfig\";\r\nimport {createShapeFromPoints} from \"../../../../helpers/freeDrawHelper\";\r\nimport sqftShapeManager from \"../../store/sqftShapeManager\";\r\nimport ShapeCabinet from \"./shapeParts/shapeCabinet\";\r\n\r\nexport default class Spacer {\r\n id;\r\n state = {\r\n centerPoint: {x: 0, y: 0},\r\n betweenPoints: [],\r\n isCreated: false,\r\n isHovering: false,\r\n mouseDown: false,\r\n mouseDownPosition: null,\r\n };\r\n\r\n constructor(points, centerPoint) {\r\n this.id = uuid.v4();\r\n this.state.betweenPoints = points\r\n this.state.centerPoint = centerPoint\r\n this.initEvents();\r\n }\r\n\r\n getIsCreated() { return this.state.isCreated }\r\n setCreated(value) { this.state.isCreated = value}\r\n\r\n initEvents() {\r\n EventManager.addEvent(\r\n EventManager.events.RENDER,\r\n this.render.bind(this),\r\n this,\r\n EventManager.priorities.WALL\r\n );\r\n EventManager.addEvent(\r\n EventManager.events.MOUSE_DOWN,\r\n this.onMouseDown.bind(this),\r\n this,\r\n EventManager.priorities.OVERALL\r\n );\r\n EventManager.addEvent(\r\n EventManager.events.MOUSE_MOVE,\r\n this.onMouseMove.bind(this),\r\n this,\r\n EventManager.priorities.SEGMENT\r\n );\r\n }\r\n\r\n destroy() {\r\n this.deregisterEvents();\r\n this.destroyPoints();\r\n }\r\n\r\n destroyPoints() {\r\n for (const addedPoints of this.state.betweenPoints) {\r\n addedPoints.destroy()\r\n }\r\n }\r\n\r\n deregisterEvents() {\r\n eventManager.removeEvent(this);\r\n }\r\n\r\n onMouseDown(mousePos) {\r\n void mousePos;\r\n if (this.state.isHovering) {\r\n const reduxState = store.getState();\r\n if (reduxState.sqftMenuState.activeButton === SIDEBAR_BUTTONS_MENU.delete) {\r\n workspaceControllers.spacer.destroyResource(this)\r\n return true\r\n }\r\n }\r\n\r\n if (!this.state.isCreated) {\r\n this.createShapeFromSpacerPoints()\r\n this.setCreated(true);\r\n workspaceControllers.spacer.destroyResource(this);\r\n workspaceControllers.spacer.setIsJustCreated(true);\r\n return true\r\n }\r\n\r\n return false\r\n }\r\n\r\n createShapeFromSpacerPoints = () => {\r\n const [point3, point4] = this.getPointsToTheMouse();\r\n const shape = this.state.betweenPoints[0].getParent().getParent();\r\n\r\n // Получаем позиции точек на шейпе\r\n const point3PointField = getMousePositionOnShape(point3.x, point3.y, shape);\r\n const point4PointField = getMousePositionOnShape(point4.x, point4.y, shape);\r\n\r\n // Собираем точки шейпа\r\n const shapePoints = [\r\n this.state.betweenPoints[1],\r\n point3PointField,\r\n point4PointField,\r\n this.state.betweenPoints[0]\r\n ];\r\n\r\n const topLeftPoint = findTopLeftPoint(shapePoints);\r\n const adjustedShapePoints = adjustPointsRelativeToTopLeft(shapePoints, topLeftPoint);\r\n const sortedPoints = sortPointsClockwise(adjustedShapePoints);\r\n if (!sortedPoints) {\r\n console.warn(\"Shape creation skipped due to undefined points.\");\r\n return;\r\n }\r\n\r\n const shapePosition = shape.getPosition();\r\n const newShapePosition = {\r\n x: topLeftPoint.x + shapePosition.x,\r\n y: topLeftPoint.y + shapePosition.y\r\n };\r\n\r\n const shapeParams = {\r\n ...shape.shapeParams,\r\n isSpacer: true,\r\n canSnap: true,\r\n };\r\n\r\n const spacerShapeId = createShapeFromPoints(sortedPoints, SHAPE_PART_ID.spacer,\r\n false,\r\n newShapePosition,\r\n false,\r\n null,\r\n shapeParams\r\n );\r\n\r\n let spacerShape = sqftShapeManager.getShapeById(spacerShapeId);\r\n spacerShape.featureId = shape.featureId;\r\n spacerShape.relatedParentFeatureId = shape.relatedParentFeatureId;\r\n spacerShape.parentPartId = shape.partId;\r\n spacerShape.featureName = shape.featureName;\r\n spacerShape.colorSet = shape.colorSet;\r\n if (shape.shapeCabinet) {\r\n spacerShape.shapeCabinet = new ShapeCabinet(spacerShape)\r\n }\r\n }\r\n\r\n onMouseMove(mousePos) {\r\n void mousePos\r\n //this.state.isHovering = this.isMouseOverWall(mousePos) || this.state.mouseDown;\r\n }\r\n\r\n render(ctx) {\r\n if (this.state.isCreated) {\r\n //this.renderLines(ctx);\r\n } else {\r\n this.renderLinesToMouse(ctx);\r\n }\r\n }\r\n\r\n getPointsToTheMouse() {\r\n const betweenPoint1 = this.state.betweenPoints[0];\r\n const betweenPoint2 = this.state.betweenPoints[1];\r\n let pointField1 = getPointField(betweenPoint1.x, betweenPoint1.y, betweenPoint1.getParent().getParent());\r\n let pointField2 = getPointField(betweenPoint2.x, betweenPoint2.y, betweenPoint1.getParent().getParent());\r\n let mousePos = sqftEventManager.LastKnownMousePos;\r\n const distanceFromMouseToTheLine = getDistanceFromPointToLine(\r\n mousePos.x,\r\n mousePos.y,\r\n pointField1.x,\r\n pointField1.y,\r\n pointField2.x,\r\n pointField2.y,\r\n )\r\n const pointLeftRightPosition = getThePositionOfAPointToTheLeftOrRightOfALine(pointField1, pointField2, mousePos);\r\n const parallelPoints = getParallelPoints(\r\n pointField1,\r\n pointField2,\r\n pointLeftRightPosition > 0\r\n ? -distanceFromMouseToTheLine\r\n : distanceFromMouseToTheLine\r\n );\r\n void parallelPoints;\r\n // console.log(\"pointField1\", pointField1);\r\n // console.log(\"pointField2\", pointField2);\r\n // console.log(\"distanceFromMouseToTheLine\", distanceFromMouseToTheLine);\r\n // console.log(\"mousePos\", mousePos);\r\n // console.log(\"parallelPoints0\", parallelPoints[0]);\r\n // console.log(\"parallelPoints1\", parallelPoints[1]);\r\n // console.log(\"pointLeftRightPosition\", pointLeftRightPosition);\r\n return parallelPoints\r\n }\r\n\r\n renderLinesToMouse(ctx) {\r\n const [point3, point4] = this.getPointsToTheMouse();\r\n ctx.lineWidth = this.state.lineWidth;\r\n ctx.fillStyle = COLOR_THEMES[sqftConfig.activeTheme].primary;\r\n ctx.strokeStyle = this.state.lineColor;\r\n\r\n const betweenPoint1 = this.state.betweenPoints[0];\r\n const betweenPoint2 = this.state.betweenPoints[1];\r\n let pointField1 = getPointField(betweenPoint1.x, betweenPoint1.y, betweenPoint1.getParent().getParent());\r\n let pointField2 = getPointField(betweenPoint2.x, betweenPoint2.y, betweenPoint1.getParent().getParent());\r\n ctx.beginPath()\r\n ctx.moveTo(pointField1.x, pointField1.y);\r\n ctx.lineTo(pointField2.x, pointField2.y);\r\n ctx.lineTo(point3.x, point3.y);\r\n ctx.lineTo(point4.x, point4.y);\r\n ctx.fill();\r\n ctx.closePath();\r\n ctx.stroke();\r\n }\r\n\r\n // renderLines(ctx) {\r\n // const reduxState = store.getState();\r\n // const activeButton = reduxState.sqftMenuState.activeButton;\r\n // ctx.lineWidth = this.state.lineWidth;\r\n // ctx.fillStyle = COLOR_THEMES[sqftConfig.activeTheme].primary;\r\n // ctx.strokeStyle = this.state.isHovering && activeButton === SIDEBAR_BUTTONS_MENU.delete\r\n // ? COLORS.red\r\n // : this.state.lineColor;\r\n //\r\n // const betweenPoint1 = this.state.betweenPoints[0];\r\n // const betweenPoint2 = this.state.betweenPoints[1];\r\n // const betweenPoint3 = this.state.betweenPoints[3];\r\n // const betweenPoint4 = this.state.betweenPoints[4];\r\n // let pointField1 = getPointField(betweenPoint1.x, betweenPoint1.y, betweenPoint1.getParent().getParent());\r\n // let pointField2 = getPointField(betweenPoint2.x, betweenPoint2.y, betweenPoint1.getParent().getParent());\r\n // let pointField3 = getPointField(betweenPoint3.x, betweenPoint3.y, betweenPoint1.getParent().getParent());\r\n // let pointField4 = getPointField(betweenPoint4.x, betweenPoint4.y, betweenPoint1.getParent().getParent());\r\n //\r\n // ctx.beginPath()\r\n // ctx.moveTo(pointField1.x, pointField1.y);\r\n // ctx.lineTo(pointField2.x, pointField2.y);\r\n // ctx.lineTo(pointField3.x, pointField3.y);\r\n // ctx.lineTo(pointField4.x, pointField4.y);\r\n // ctx.fill();\r\n // ctx.closePath();\r\n // ctx.stroke();\r\n // }\r\n}\r\n","import sqftConfig from \"../../../../store/sqftConfig\";\r\nimport workspace from \"../../../workspace\";\r\n\r\nexport default class ModelCorePoint {\r\n _x;\r\n _y;\r\n _parent;\r\n _mixins = {\r\n movable: null\r\n };\r\n\r\n constructor(x, y, parent, mixins) {\r\n this._x = x;\r\n this._y = y;\r\n this._parent = parent;\r\n this._mixins = mixins;\r\n }\r\n\r\n get x() {\r\n return this.mixins.movable ? this.mixins.movable.posX : this._x;\r\n }\r\n\r\n set x(value) {\r\n this.mixins.movable ? this.mixins.movable.posX = value : this._x = value;\r\n }\r\n\r\n get y() {\r\n return this.mixins.movable ? this.mixins.movable.posX : this._y;\r\n }\r\n\r\n set y(value) {\r\n this.mixins.movable ? this.mixins.movable.posY = value : this._y = value;\r\n }\r\n\r\n get parent() {\r\n return this._parent;\r\n }\r\n\r\n set parent(value) {\r\n this._parent = value;\r\n }\r\n\r\n get mixins() {\r\n return this._mixins;\r\n }\r\n\r\n set mixins(value) {\r\n this._mixins = value;\r\n }\r\n\r\n getPosX() {\r\n return this.mixins.movable ? this.mixins.movable.posX : this.x;\r\n }\r\n\r\n getPosY() {\r\n return this.mixins.movable ? this.mixins.movable.posY : this.y;\r\n }\r\n\r\n setPosX(value) {\r\n return this.mixins.movable ? this.mixins.movable.posX = value : this.x = value;\r\n }\r\n\r\n setPosY(value) {\r\n return this.mixins.movable ? this.mixins.movable.posY = value : this.y = value;\r\n }\r\n\r\n rotate = (origin, angle, isSlabMode) => {\r\n let ret = {x: 0, y: 0};\r\n let tr = {x: this.getPosX() - origin.x, y: this.getPosY() - origin.y};\r\n\r\n ret.x = tr.x * Math.cos(angle) - tr.y * Math.sin(angle);\r\n ret.y = tr.x * Math.sin(angle) + tr.y * Math.cos(angle);\r\n\r\n //console.log(\"isSlabMode in point rotation\", isSlabMode)\r\n if (isSlabMode) {\r\n //todo rotation in slab mode\r\n this.setPosX(Math.round10(ret.x, -5) + Math.round10(origin.x, -1));\r\n this.setPosY(Math.round10(ret.y, -5) + Math.round10(origin.y, -1));\r\n } else {\r\n this.setPosX(Math.round10(ret.x, -5) + Math.round10(origin.x, -1));\r\n this.setPosY(Math.round10(ret.y, -5) + Math.round10(origin.y, -1));\r\n }\r\n };\r\n\r\n getPointField = () => {\r\n let fieldWidth = sqftConfig.fieldWidth,\r\n center = fieldWidth / 2,\r\n scale = workspace.getScale(),\r\n offset = parent.getOffset();\r\n\r\n return {\r\n x: (this.x * scale) - center + offset.x,\r\n y: (this.y * scale) - center + offset.y,\r\n width: fieldWidth\r\n };\r\n };\r\n\r\n getPointCords = () => {\r\n let pointField = this.getPointField();\r\n\r\n return {\r\n x: pointField.x + pointField.width / 2,\r\n y: pointField.y + pointField.width / 2\r\n }\r\n };\r\n}\r\n","import RenderMeasurementsInsideShape from \"./renderMeasurementsInsideShape\";\r\nimport workspace from \"../../workspace\";\r\nimport sqftConfig from \"../../../store/sqftConfig\";\r\nimport {getPointField} from \"../../../../../helpers/sqftHelper\";\r\nimport RenderFigures from \"../../../helpers/renderFigures\";\r\nimport RenderSVG from \"./renderSVG\";\r\n\r\nclass RenderMovableImage {\r\n constructor(movableImage) {\r\n this.movableImage = movableImage;\r\n this.renderMeasurementsInsideShape = new RenderMeasurementsInsideShape(movableImage);\r\n this.renderSVG = new RenderSVG(movableImage);\r\n }\r\n\r\n destroy = () => {\r\n //this.renderMeasurementsInsideShape.destroy();\r\n }\r\n\r\n setOuterShape = (value) => {\r\n this.renderMeasurementsInsideShape.outerShape = value\r\n }\r\n\r\n render = (ctx) => {\r\n if (workspace && workspace.getState().loading) return;\r\n if (this.movableImage.getIsRotatable()) {\r\n this.movableImage.shapeRotatable.render(ctx);\r\n }\r\n\r\n if (this.movableImage.attachedTo) {\r\n //this.renderSVG.renderAttachedTo(ctx);\r\n } else {\r\n this.renderSVG.render(ctx);\r\n\r\n //render measurements inside the shape\r\n const outerShape = this.movableImage.getOuterShape();\r\n if (this.movableImage.shouldRenderMeasurementsInsideTheShape() && outerShape) {\r\n this.movableImage.revealMeasurementsInsideShape();\r\n this.setOuterShape(outerShape);\r\n this.renderMeasurementsInsideShape.render(ctx);\r\n } else {\r\n this.movableImage.hideMeasurementsInsideShape();\r\n }\r\n }\r\n\r\n //render lines in dev mode\r\n if (sqftConfig.isDevMode()) {\r\n this.movableImage.getLines().forEach((activeShapeLine) => {\r\n let pointFieldActiveShapeLineFrom = getPointField(activeShapeLine.from.x, activeShapeLine.from.y, this.movableImage);\r\n RenderFigures.renderCircle(pointFieldActiveShapeLineFrom, 20, 1, '#63b141');\r\n });\r\n }\r\n return []; //no triangles for images\r\n }\r\n}\r\n\r\nexport default RenderMovableImage\r\n","import store from \"../../../../../../../store\";\r\nimport {\r\n rotatePoint,\r\n getPointDistance,\r\n getPointField,\r\n findClosestPointPairs, inchesToMm,\r\n} from \"../../../../../helpers/sqftHelper\";\r\n// import ShapeHelper from \"../../../../../helpers/shapeHelper\";\r\nimport RenderFigures from \"../../../helpers/renderFigures\";\r\nimport {getClosestIntersectionPoints, getIntersectionPointsAndLines} from \"../shapeParts/slabParts/seamToolHelper\";\r\nimport {COLORS} from \"../../../../../../../colorThemes\";\r\nimport sqftConfig from \"../../../store/sqftConfig\";\r\nimport {MEASURE_UNITS} from \"../../../../../constants\";\r\n\r\nclass RenderMeasurementsInsideShape {\r\n constructor(movableImage) {\r\n this.movableImage = movableImage;\r\n this.outerShape = null;\r\n this.lineOffset = 1;\r\n\r\n const serverState = store.getState().serverState;\r\n this.lineStartVertical = { x: -serverState.windowWidth, y: 0 };\r\n this.lineEndVertical = { x: serverState.windowWidth, y: 0 };\r\n this.lineStartHorizontal = { x: 0, y: -serverState.windowHeight };\r\n this.lineEndHorizontal = { x: 0, y: serverState.windowHeight };\r\n }\r\n\r\n setOuterShape = (value) => {\r\n this.outerShape = value\r\n }\r\n\r\n updateLinePoints() {\r\n const serverState = store.getState().serverState;\r\n const imageCenter = this.movableImage.getCenter();\r\n const angle = this.movableImage.rotatedDegrees;\r\n const imagePosOnField = this.movableImage.getCenterPosition();\r\n const pos = this.outerShape.getPosition();\r\n const imagePosOnShape = {x: imagePosOnField.x - pos.x, y: imagePosOnField.y - pos.y};\r\n void imagePosOnShape;\r\n void imageCenter;\r\n\r\n this.lineStartVertical = rotatePoint({ x: -serverState.windowWidth, y: imagePosOnShape.y }, imagePosOnShape, -angle);\r\n this.lineEndVertical = rotatePoint( { x: serverState.windowWidth, y: imagePosOnShape.y }, imagePosOnShape, -angle);\r\n this.lineStartVerticalOnImage = rotatePoint( { x: -serverState.windowWidth, y: imageCenter.y }, imageCenter, -angle);\r\n this.lineEndVerticalOnImage = rotatePoint({ x: serverState.windowWidth, y: imageCenter.y }, imageCenter, -angle);\r\n\r\n this.lineStartHorizontal = rotatePoint( { x: imagePosOnShape.x, y: -serverState.windowHeight }, imagePosOnShape, -angle);\r\n this.lineEndHorizontal = rotatePoint({ x: imagePosOnShape.x, y: serverState.windowHeight }, imagePosOnShape, -angle);\r\n this.lineStartHorizontalOnImage = rotatePoint( { x: imageCenter.x, y: -serverState.windowHeight }, imageCenter, -angle);\r\n this.lineEndHorizontalOnImage = rotatePoint({ x: imageCenter.x, y: serverState.windowHeight }, imageCenter, -angle);\r\n }\r\n\r\n render = (ctx) => {\r\n this.updateLinePoints();\r\n const imageCenterPosOnField = this.movableImage.getCenterPosition();\r\n const pos = this.outerShape.getPosition();\r\n const imageCenterPosOnShape = {x: imageCenterPosOnField.x - pos.x, y: imageCenterPosOnField.y - pos.y};\r\n const imagePosOnField = this.movableImage.getPosition();\r\n const imagePosOnShape = {x: imagePosOnField.x - pos.x, y: imagePosOnField.y - pos.y};\r\n\r\n ctx.lineWidth = 1;\r\n ctx.strokeStyle = COLORS.red; //COLOR_THEMES[sqftConfig.activeTheme].primary;\r\n\r\n // horizontal line\r\n const sideImagePoints = this.getImageSidePoints(this.lineStartVerticalOnImage, this.lineEndVerticalOnImage);\r\n const sideShapePoints = this.getShapeSidePoints(this.lineStartVertical, this.lineEndVertical);\r\n this.renderLineToBorder(ctx, sideShapePoints, sideImagePoints, imagePosOnShape);\r\n\r\n // vertical line\r\n this.renderArrowLineToCenter(ctx, imageCenterPosOnShape);\r\n }\r\n\r\n getImageSidePoints = (verticalLinePoint1, verticalLinePoint2) => {\r\n const lines = this.movableImage.getLines();\r\n\r\n return getIntersectionPointsAndLines(\r\n lines, verticalLinePoint1, verticalLinePoint2\r\n );\r\n }\r\n\r\n getShapeSidePoints = (verticalLinePoint1, verticalLinePoint2) => {\r\n return getIntersectionPointsAndLines(\r\n this.outerShape.getLines(true), verticalLinePoint1, verticalLinePoint2\r\n );\r\n }\r\n\r\n renderLineToBorder = (ctx, sideShapePoints, sideImagePoints, imagePosOnShape) => {\r\n if (!sideShapePoints.length) {\r\n return\r\n }\r\n const shapePos = this.outerShape.getPosition();\r\n const intersectionsWithShape = sideShapePoints.map(sideShapePoint => {\r\n return sideShapePoint.intersectionCords;\r\n });\r\n\r\n const intersectionsWithImage = sideImagePoints.map(sideImagePoint => {\r\n return {\r\n x: sideImagePoint.intersectionCords.x + imagePosOnShape.x,\r\n y: sideImagePoint.intersectionCords.y + imagePosOnShape.y,\r\n imageLine: sideImagePoint.line\r\n };\r\n });\r\n\r\n const closestPointPairs = findClosestPointPairs(intersectionsWithShape, intersectionsWithImage);\r\n\r\n for (const [index, closestPointPair] of closestPointPairs.entries()) {\r\n if (closestPointPair.pointA && closestPointPair.pointB) {\r\n const startPointField = getPointField(closestPointPair.pointA.x, closestPointPair.pointA.y, this.outerShape);\r\n const endPointField = getPointField(closestPointPair.pointB.x, closestPointPair.pointB.y, this.outerShape);\r\n\r\n ctx.beginPath();\r\n ctx.moveTo(startPointField.x, startPointField.y);\r\n ctx.lineTo(endPointField.x, endPointField.y);\r\n\r\n ctx.closePath();\r\n ctx.stroke();\r\n\r\n //const fontSize = getFontSizeFromContext(ctx);\r\n //let midPoint = getMidPoint(closestPointPair.pointA, closestPointPair.pointB);\r\n //midPoint = {x: midPoint.x + shapePos.x, y: midPoint.y + shapePos.y - fontSize / 2 / scale}\r\n const length = sqftConfig.measureUnit === MEASURE_UNITS.Metric\r\n ? inchesToMm(closestPointPair.distance, false, true)\r\n : closestPointPair.distance;\r\n\r\n // this.renderLineMeasurement(ctx,\r\n // midPoint,\r\n // length < 0.3 ? '' : length,\r\n // )\r\n const betweenPointFrom = {\r\n x: closestPointPair.pointA.x + shapePos.x,\r\n y: closestPointPair.pointA.y + shapePos.y\r\n }\r\n const betweenPointTo = {\r\n x: closestPointPair.pointB.x + shapePos.x,\r\n y: closestPointPair.pointB.y + shapePos.y\r\n }\r\n\r\n //closestPointPair.pointB.imageLine.measurementInsideShape.setPos(midPoint);\r\n closestPointPair.pointB.imageLine.measurementInsideShape.setPos({x: 1, y: 1}); // this is needed to render measurements\r\n closestPointPair.pointB.imageLine.measurementInsideShape.setValue(length);\r\n\r\n void index;\r\n if (closestPointPair.pointB.imageLine.lineIndex === 1) {\r\n closestPointPair.pointB.imageLine.measurementInsideShape.setBetweenPoints(betweenPointTo, betweenPointFrom); // this will override pos value\r\n } else {\r\n closestPointPair.pointB.imageLine.measurementInsideShape.setBetweenPoints(betweenPointFrom, betweenPointTo); // this will override pos value\r\n }\r\n }\r\n }\r\n }\r\n\r\n renderArrowLineToCenter = (ctx, imageCenterPosOnShape) => {\r\n let imageCenterPosOnShapePointField = getPointField(imageCenterPosOnShape.x, imageCenterPosOnShape.y, this.outerShape);\r\n let [intersectionXPointAndLine1, intersectionXPointAndLine2] = getClosestIntersectionPoints(\r\n this.outerShape.getLines(true), this.lineStartHorizontal, this.lineEndHorizontal, imageCenterPosOnShape\r\n );\r\n\r\n // we need only image lines that was intersected with the center line that supposed to be lines with the index 0 and 2\r\n let [intersectionXPointAndLine1WithImage, intersectionXPointAndLine2WithImage] = getClosestIntersectionPoints(\r\n this.movableImage.getLines(true), this.lineStartHorizontalOnImage, this.lineEndHorizontalOnImage, this.movableImage.getCenterPosition()\r\n );\r\n\r\n if (intersectionXPointAndLine1 && intersectionXPointAndLine2) {\r\n let intersectionXPoint1 = intersectionXPointAndLine1.intersectionCords;\r\n let intersectionXPoint2 = intersectionXPointAndLine2.intersectionCords;\r\n let intersectionXPoint1PointField = getPointField(intersectionXPoint1.x, intersectionXPoint1.y, this.outerShape);\r\n let intersectionXPoint2PointField = getPointField(intersectionXPoint2.x, intersectionXPoint2.y, this.outerShape);\r\n\r\n ctx.beginPath();\r\n RenderFigures.drawArrow(ctx,\r\n intersectionXPoint1PointField.x,\r\n intersectionXPoint1PointField.y + this.lineOffset,\r\n imageCenterPosOnShapePointField.x,\r\n imageCenterPosOnShapePointField.y - this.lineOffset\r\n );\r\n\r\n RenderFigures.drawArrow(ctx,\r\n imageCenterPosOnShapePointField.x,\r\n imageCenterPosOnShapePointField.y + this.lineOffset,\r\n intersectionXPoint2PointField.x,\r\n intersectionXPoint2PointField.y - this.lineOffset\r\n );\r\n ctx.closePath();\r\n ctx.stroke();\r\n\r\n //const scale = sqftConfig.scale;\r\n let measurement1Distance = getPointDistance(intersectionXPoint1, imageCenterPosOnShape);\r\n measurement1Distance = sqftConfig.measureUnit === MEASURE_UNITS.Metric\r\n ? inchesToMm(measurement1Distance, false, true)\r\n : measurement1Distance;\r\n\r\n const shapePos = this.outerShape.getPosition();\r\n const betweenPointTo = {\r\n x: intersectionXPoint1.x + shapePos.x,\r\n y: intersectionXPoint1.y + shapePos.y\r\n }\r\n const betweenPointFrom = {\r\n x: imageCenterPosOnShape.x + shapePos.x,\r\n y: imageCenterPosOnShape.y + shapePos.y\r\n }\r\n if (intersectionXPointAndLine1WithImage) {\r\n intersectionXPointAndLine1WithImage.line.measurementInsideShape.setPos({x: 1, y: 1});\r\n intersectionXPointAndLine1WithImage.line.measurementInsideShape.setValue(measurement1Distance);\r\n intersectionXPointAndLine1WithImage.line.measurementInsideShape.setBetweenPoints(betweenPointFrom, betweenPointTo);\r\n }\r\n\r\n // THIS CALCULATIONS WAS USED TO GET POS WITHOUT USING BETWEEN POINTS\r\n //const measurement1Midpoint = getMidPoint(intersectionXPoint1, imageCenterPosOnShape);\r\n //const metrics1Point = ctx.measureText(measurement1Distance);\r\n //const shapePos = this.outerShape.getPosition();\r\n // const offsetPoint1 = {\r\n // x: measurement1Midpoint.x + shapePos.x + metrics1Point.width / 2 / scale,\r\n // y: measurement1Midpoint.y + shapePos.y\r\n // }\r\n //const measurement1angle = getAngleBetweenTwoPoints(intersectionXPoint2, imageCenterPosOnShape);\r\n //intersectionXPointAndLine1WithImage.line.measurementInsideShape.setAngle(measurement1angle);\r\n //intersectionXPointAndLine1WithImage.line.measurementInsideShape.setPos(offsetPoint2);\r\n //intersectionXPointAndLine1WithImage.line.measurementInsideShape.setBetweenPoints(null, null);\r\n\r\n // THIS CALCULATIONS WAS USED TO GET POS WITHOUT USING BETWEEN POINTS\r\n // const measurement2Midpoint = getMidPoint(intersectionXPoint2, imageCenterPosOnShape);\r\n // const metrics2Point = ctx.measureText(measurement2Distance);\r\n // const offsetPoint2 = {\r\n // x: measurement2Midpoint.x + shapePos.x + metrics2Point.width / 2 / scale,\r\n // y: measurement2Midpoint.y + shapePos.y\r\n // }\r\n // const measurement2angle = getAngleBetweenTwoPoints(intersectionXPoint2, imageCenterPosOnShape);\r\n // intersectionXPointAndLine2WithImage.line.measurementInsideShape.setPos(offsetPoint2);\r\n // intersectionXPointAndLine2WithImage.line.measurementInsideShape.setAngle(measurement2angle);\r\n\r\n let measurement2Distance = getPointDistance(intersectionXPoint2, imageCenterPosOnShape);\r\n measurement2Distance = sqftConfig.measureUnit === MEASURE_UNITS.Metric\r\n ? inchesToMm(measurement2Distance, false, true)\r\n : measurement2Distance;\r\n\r\n const measurement2BetweenPointTo = {\r\n x: intersectionXPoint2.x + shapePos.x,\r\n y: intersectionXPoint2.y + shapePos.y\r\n }\r\n const measurement2BetweenPointFrom = {\r\n x: imageCenterPosOnShape.x + shapePos.x,\r\n y: imageCenterPosOnShape.y + shapePos.y\r\n }\r\n if (intersectionXPointAndLine1WithImage) {\r\n intersectionXPointAndLine2WithImage.line.measurementInsideShape.setPos({x: 1, y: 1});\r\n intersectionXPointAndLine2WithImage.line.measurementInsideShape.setValue(measurement2Distance);\r\n intersectionXPointAndLine2WithImage.line.measurementInsideShape.setBetweenPoints(measurement2BetweenPointFrom, measurement2BetweenPointTo);\r\n }\r\n }\r\n }\r\n\r\n // renderLineMeasurement = (ctx, measurementPos, measurementDistance) => {\r\n // this.__measurement.pos.x = measurementPos.x;\r\n // this.__measurement.pos.y = measurementPos.y;\r\n // this.__measurement.value = measurementDistance;\r\n //\r\n // this.__measurement.render(ctx);\r\n // }\r\n}\r\n\r\nexport default RenderMeasurementsInsideShape\r\n","import sqftConfig from \"../../../store/sqftConfig\";\r\nimport RenderFigures from \"../../../helpers/renderFigures\";\r\nimport {SQFT_APPLIANCES} from \"../../../../../constants\";\r\nimport RenderParts from \"../../../helpers/renderParts\";\r\n\r\nclass RenderSVG {\r\n constructor(movableImage) {\r\n this.movableImage = movableImage;\r\n }\r\n\r\n render = (ctx) => {\r\n let svgImageDataURI = \"\";\r\n const scale = sqftConfig.scale;\r\n\r\n if (this.movableImage.isIE() && this.movableImage.isSVG(this.movableImage.image)) {\r\n svgImageDataURI = atob(this.movableImage.getSrc(this.movableImage.image).replace(/data:image\\/svg\\+xml;base64,/, ''));\r\n }\r\n\r\n //let canvas = workspace.getCanvas();\r\n\r\n ctx.save();\r\n let posField = this.movableImage.getPosField();\r\n ctx.translate(posField.x, posField.y);\r\n ctx.rotate(-this.movableImage.rotatedDegrees * Math.PI / 180);\r\n let imgOffset = {\r\n x: this.movableImage.size.width / -2 * scale,\r\n y: this.movableImage.size.height / -2 * scale\r\n };\r\n\r\n this.renderHovering(ctx, imgOffset);\r\n\r\n if (!this.movableImage.isIE()) {\r\n if (this.movableImage.subType === SQFT_APPLIANCES.sink) {\r\n RenderFigures.sink(ctx, imgOffset.x, imgOffset.y, this.movableImage.size.width * scale, this.movableImage.size.height * scale);\r\n } else if (this.movableImage.subType === SQFT_APPLIANCES.doubleSink) {\r\n RenderFigures.doubleSink(ctx, imgOffset.x, imgOffset.y, this.movableImage.size.width * scale, this.movableImage.size.height * scale);\r\n } else {\r\n const containerSize = {width: this.movableImage.size.width * scale, height: this.movableImage.size.height * scale}\r\n const size = this.getContainSize();\r\n RenderParts.drawStripedRectangle(ctx, imgOffset.x, imgOffset.y, containerSize.width, containerSize.height);\r\n RenderFigures.drawBorder(ctx, imgOffset, containerSize.width, containerSize.height);\r\n ctx.drawImage(this.movableImage.image, imgOffset.x, imgOffset.y, size.width, size.height);\r\n }\r\n } else if (svgImageDataURI) {\r\n ctx.drawSvg(svgImageDataURI, imgOffset.x, imgOffset.y, this.movableImage.size.width * scale, this.movableImage.size.height * scale);\r\n }\r\n ctx.restore();\r\n\r\n //render border points in dev mode\r\n if (sqftConfig.isDevMode()) {\r\n //dev movable point\r\n // ctx.beginPath();\r\n // ctx.strokeStyle = '#000'\r\n // ctx.arc(imgOffset.x, imgOffset.y, 20, 0, 2 * Math.PI);\r\n // ctx.stroke();\r\n // ctx.closePath();\r\n //\r\n // //dev border points\r\n // let testImagePoints = this.movableImage.getLinePointsPointField();\r\n // for (let testPoint of testImagePoints) {\r\n // ctx.beginPath();\r\n // ctx.strokeStyle = '#a02f2f';\r\n // ctx.lineWidth = 1;\r\n // ctx.arc(testPoint.x, testPoint.y, 10, 0, 2 * Math.PI);\r\n // ctx.stroke();\r\n // ctx.closePath();\r\n // //debugger // eslint-disable-line no-debugger\r\n // }\r\n }\r\n }\r\n\r\n getContainSize = () => {\r\n const aspectRatio = this.movableImage.initialSize.width / this.movableImage.initialSize.height;\r\n const scale = sqftConfig.scale;\r\n let newWidth, newHeight;\r\n if (this.movableImage.size.width / this.movableImage.size.height > aspectRatio) {\r\n // The width is larger than needed by the aspect ratio, so we base it on the height\r\n newHeight = this.movableImage.size.height;\r\n newWidth = newHeight * aspectRatio;\r\n } else {\r\n // The height is larger than needed based on the aspect ratio, so we base it on the width\r\n newWidth = this.movableImage.size.width;\r\n newHeight = newWidth / aspectRatio;\r\n }\r\n\r\n return {width: newWidth * scale, height: newHeight * scale}\r\n }\r\n\r\n renderHovering = (ctx, imgOffset) => {\r\n let scale = sqftConfig.scale;\r\n\r\n if (this.movableImage.isHovering() && !this.movableImage.isAnyLineHovering()) {\r\n ctx.beginPath();\r\n ctx.rect(imgOffset.x, imgOffset.y, this.movableImage.size.width * scale, this.movableImage.size.height * scale);\r\n ctx.strokeStyle = this.movableImage.hoverColor;\r\n ctx.lineWidth = 5;\r\n ctx.stroke();\r\n ctx.closePath();\r\n }\r\n }\r\n\r\n renderAttachedTo = () => {\r\n // if (this.movableImage.image) {\r\n // let midPoint = getMidPoint(this.movableImage.attachedTo.from, this.movableImage.attachedTo.to);\r\n // let lineOffset = this.movableImage.attachedTo.getOffset();\r\n // let imgOffset = {\r\n // x: 0,\r\n // y: -32\r\n // },\r\n // pointData = {\r\n // x: (midPoint.x * scale) + lineOffset.x - 4,\r\n // y: (midPoint.y * scale) + lineOffset.y - (size.height * scale) - 4,\r\n // radius: size.width * scale / 2 + 8,\r\n // arcStart: 0,\r\n // arcEnd: 2 * Math.PI\r\n // };\r\n // if (this.movableImage.attachedTo.getOrientation) {\r\n // if (this.movableImage.attachedTo.getOrientation() == 1) { //horizontal\r\n // pointData.x -= 64;\r\n // pointData.y += 5 * scale;\r\n // } else {\r\n // // console.log(scale);\r\n // if (scale >= 6) {\r\n // pointData.y -= ((6 - scale) * scale / 2);\r\n // } else {\r\n // pointData.y += (6 - scale) * 6;\r\n // }\r\n // }\r\n // }\r\n // if (!this.movableImage.isIE() || !this.movableImage.isSVG()) {\r\n // ctx.drawImage(this.movableImage.image, pointData.x - (size.width * scale / 2) + imgOffset.x, (midPoint.y * scale) + lineOffset.y - (size.height * scale / 2) - 4 + imgOffset.y + (this.movableImage.attachedTo.getOrientation() == 1 ? 32 : 0), size.width * scale, size.height * scale);\r\n // } else {\r\n // ctx.drawSvg(svgImageDataURI, pointData.x - (size.width * scale / 2) + imgOffset.x, (midPoint.y * scale) + lineOffset.y - (size.height * scale / 2) - 4 + imgOffset.y + (this.movableImage.attachedTo.getOrientation() == 1 ? 32 : 0), size.width * scale, size.height * scale);\r\n // }\r\n // ctx.save();\r\n // ctx.beginPath();\r\n // ctx.arc(pointData.x, pointData.y, pointData.radius, pointData.arcStart, pointData.arcEnd);\r\n // ctx.strokeStyle = COLOR_THEMES[sqftConfig.activeTheme].primary;\r\n // ctx.lineWidth = 4;\r\n // ctx.stroke();\r\n // ctx.fillStyle = \"RGBA(0,0,192,0.1)\";\r\n // ctx.fill();\r\n // ctx.closePath();\r\n // ctx.restore();\r\n // }\r\n }\r\n}\r\n\r\nexport default RenderSVG\r\n","import { v4 as uuidv4 } from 'uuid';\r\n\r\nexport default class MiteredSegment {\r\n id;\r\n _length = {}; /* NumberText */\r\n height; /* int */\r\n thickness = {}; /* NumberText */\r\n priority; /* int */\r\n\r\n\r\n constructor(length, height, thickness) {\r\n this.id = uuidv4();\r\n this._length = length;\r\n this.height = height;\r\n this.thickness = thickness;\r\n this.priority = 0;\r\n }\r\n\r\n set length(length) {\r\n this._length = length;\r\n }\r\n\r\n get length() {\r\n return this._length;\r\n }\r\n\r\n setPriority = (priority) => {\r\n this.priority = priority\r\n };\r\n\r\n exportSegment = () => ({\r\n height: this.height,\r\n thickness: this.thickness ? this.thickness.value : this.thickness,\r\n length: this.length.value,\r\n })\r\n}\r\n","import workspace from \"../workspace\";\r\nimport {getBacksplashesPos, getBumpoutPointCords, getShapePosAndPoints} from \"./slabHelper\";\r\nimport sqftShapeManager from \"../../store/sqftShapeManager\";\r\nimport {SHAPE_PART_ID, WATERFALL_SHAPES_KEY} from \"../../../../constants\";\r\nimport SlabAdditionalShape from \"./slabAdditionalShape\";\r\nimport Polygon from \"../shapes/layouts/polygon\";\r\nimport sqftConfig from \"../../store/sqftConfig\";\r\nimport {\r\n getParallelPoints,\r\n getPointOnTheLine,\r\n mmToInches\r\n} from \"../../../../helpers/sqftHelper\";\r\nimport {addEdgeToTheLines, addFakeEdgeToLines, setLineParams} from \"../../helpers/lineHelper\";\r\nimport workspaceControllers from \"../../store/workspaceControllers\";\r\nimport {getMiterEdgeFeature, getMiterEdgeHeight, isFeatureUnitUseEach} from \"../../../../helpers/featureHelper\";\r\nimport config from \"../../store/sqftConfig\";\r\nimport sqftResourcesManager from \"../../store/sqftResoursesManager\";\r\n\r\nclass SlabAdditionalShapes {\r\n additionalShapes = [];\r\n\r\n initBacksplashAndEdgeShapes = () => {\r\n let lines = workspace.getLines();\r\n lines.forEach((line) => {\r\n if (!this.isInited(line)) {\r\n let posOnField, pointsCords;\r\n const parentShape = line.getParent();\r\n const attachedToLineResource = sqftResourcesManager.getAttachedToLineResource(line);\r\n const miterEdgeHeight = getMiterEdgeHeight(attachedToLineResource ? attachedToLineResource.featureId : null);\r\n\r\n // 1.) init backsplash shapes\r\n if (line.isWithBacksplash()) {\r\n [posOnField, pointsCords] = getBacksplashesPos(line, +line.getBacksplashHeight());\r\n\r\n // 2.) init mitered edgeShapes for waterfall tool\r\n } else if ((line.isWithMiterEdge() || line.isWithFakeEdge())\r\n && parentShape.partId === SHAPE_PART_ID.waterfallPiece\r\n ) {\r\n // skip creation for one mitered edge shape that was created with waterfall tool\r\n if (line.getState().slabModeSkipMiteredEdgeCreation) {\r\n return;\r\n }\r\n const segment = workspaceControllers.waterfall.getSegmentById(parentShape.slabModeWaterfallSegmentId);\r\n if (!segment) {\r\n //todo fix missing segment\r\n return;\r\n }\r\n [posOnField, pointsCords] = getBacksplashesPos(line, segment.thickness);\r\n // 3.) init mitered edgeShapes but skip mitered tool\r\n } else if (line.isWithMiterEdge() && !line.isWithMitered() && miterEdgeHeight > 0.5) {\r\n [posOnField, pointsCords] = getBacksplashesPos(line, miterEdgeHeight);\r\n\r\n // 4.) init waterfall edgeShapes but skip mitered tool\r\n } else if (line.isWithWaterfallEdgeFeature() && !isFeatureUnitUseEach(line.getAttachedFeature())) {\r\n [posOnField, pointsCords] = getBacksplashesPos(line, sqftConfig.waterfallImperialHeight);\r\n } else {\r\n return; // Skip the current iteration if neither condition is met\r\n }\r\n\r\n // create shape\r\n let shapeId = sqftShapeManager.addShape(new Polygon(pointsCords), 'square', posOnField, SHAPE_PART_ID.backsplashPiece);\r\n const shape = workspace.getShapeById(shapeId);\r\n\r\n // set shape additional params\r\n shape.setIsPointsChanged(false);\r\n shape.setSlabModeCoreParentId(\r\n line.getParent().slabModeCoreParentId ? line.getParent().slabModeCoreParentId : line.getParent().id\r\n );\r\n shape.setSlabModeCoreParentPartId(\r\n line.getParent().slabParentPartId ? line.getParent().slabParentPartId : line.getParent().partId\r\n )\r\n //set shape feature id\r\n let featureId\r\n if (line.isWithBacksplash()) {\r\n featureId = line.getBacksplashFeatureId();\r\n featureId = featureId ? featureId : line.getParent().featureId;\r\n } else {\r\n featureId = line.getParent().featureId;\r\n }\r\n shape.setFeatureId(featureId);\r\n shape.setColorSet(line.getParent().colorSet);\r\n\r\n this.addActiveBacksplash(new SlabAdditionalShape(line, shapeId));\r\n }\r\n });\r\n };\r\n\r\n initBumpoutShapes = () => {\r\n let lines = workspace.getLines();\r\n lines.forEach((line) => {\r\n if (line.isWithBumpout() && !this.isInited(line)) {\r\n let pointsCords = getBumpoutPointCords(line);\r\n let posOnFiled = line.getParent().getPosition();//ShapeHelper.getCenterPoint(pointsCords);\r\n let shapeId = sqftShapeManager.addShape(new Polygon(pointsCords), 'square', posOnFiled, SHAPE_PART_ID.backsplashPiece);\r\n const shape = workspace.getShapeById(shapeId);\r\n shape.setIsPointsChanged(false);\r\n shape.setFeatureId(line.getParent().featureId);\r\n shape.setSlabModeCoreParentId(line.getParent().id);\r\n shape.setSlabModeCoreParentPartId(line.getParent().partId);\r\n shape.setColorSet(line.getParent().colorSet);\r\n\r\n this.addActiveBacksplash(new SlabAdditionalShape(line, shapeId));\r\n }\r\n });\r\n };\r\n\r\n initMiteredToolShapes = () => {\r\n let lines = workspace.getLines();\r\n lines.forEach((line) => {\r\n if (line.isWithMitered() && !this.isInited(line)) {\r\n const miteredPoints = line.miteredOverlay.getPoints();\r\n miteredPoints.forEach((point, index) => {\r\n let next = index + 1;\r\n if (miteredPoints[next]) {\r\n let segment = line.miteredOverlay.getSegmentBetweenPoints(point, miteredPoints[next]);\r\n //let widthValue = segment.width.value;\r\n let heightValue = segment.height / sqftConfig.getMeasureMultiplier();\r\n if (heightValue > 0.005) {\r\n let [posOnFiled, pointsCords] = getShapePosAndPoints(line.getParent(), point, miteredPoints[next], heightValue);\r\n\r\n let shapeId = sqftShapeManager.addShape(new Polygon(pointsCords), 'square', posOnFiled, SHAPE_PART_ID.backsplashPiece);\r\n const shape = workspace.getShapeById(shapeId);\r\n shape.setIsPointsChanged(false);\r\n shape.setFeatureId(line.getParent().featureId);\r\n shape.setSlabModeCoreParentId(line.getParent().id);\r\n shape.setSlabModeCoreParentPartId(line.getParent().partId);\r\n shape.setColorSet(line.getParent().colorSet);\r\n\r\n this.addActiveBacksplash(new SlabAdditionalShape(line, shapeId));\r\n }\r\n }\r\n });\r\n }\r\n });\r\n };\r\n\r\n initUnderlaymentToolShapes = () => {\r\n let lines = workspace.getLines();\r\n lines.forEach((line) => {\r\n if (line.isWithUnderlayment() && !this.isInited(line)) {\r\n const underlaymentPoints = line.underlaymentOverlay.getPoints();\r\n underlaymentPoints.forEach((point, index) => {\r\n let next = index + 1;\r\n if (underlaymentPoints[next]) {\r\n let segment = line.underlaymentOverlay.getSegmentBetweenPoints(point, underlaymentPoints[next]);\r\n //let widthValue = segment.width.value;\r\n let heightValue = segment.height;\r\n let [posOnFiled, pointsCords] = getShapePosAndPoints(line.getParent(), point, underlaymentPoints[next], heightValue);\r\n\r\n let shapeId = sqftShapeManager.addShape(new Polygon(pointsCords), 'square', posOnFiled, SHAPE_PART_ID.backsplashPiece);\r\n const shape = workspace.getShapeById(shapeId);\r\n shape.setIsPointsChanged(false);\r\n shape.setFeatureId(line.getParent().featureId);\r\n shape.setSlabModeCoreParentId(line.getParent().id);\r\n shape.setSlabModeCoreParentPartId(line.getParent().partId);\r\n shape.setColorSet(line.getParent().colorSet);\r\n\r\n this.addActiveBacksplash(new SlabAdditionalShape(line, shapeId));\r\n }\r\n });\r\n }\r\n });\r\n };\r\n\r\n initWaterfallToolShapes = () => {\r\n let lines = workspace.getLines();\r\n lines.forEach((line) => {\r\n if ((line.isWithWaterfallToolEdge() || line.isWithPeninsulaUnderwrapEdge())\r\n && !this.isInited(line)\r\n ) {\r\n const waterfallSegments = line.waterfallOverlay.getSegments();\r\n\r\n waterfallSegments.forEach((segment) => {\r\n const [from, to] = this.getWaterfallPoints(line, segment);\r\n if (from && to) {\r\n const height = config.measureUnit === \"Imperial\" ? segment.height : mmToInches(segment.height);\r\n let [posOnFiled, pointsCords] = getShapePosAndPoints(line.getParent(), from, to, height);\r\n\r\n let shapeId = sqftShapeManager.addShape(new Polygon(pointsCords.reverse()), 'square', posOnFiled, SHAPE_PART_ID.waterfallPiece);\r\n const shape = workspace.getShapeById(shapeId);\r\n shape.setIsPointsChanged(false);\r\n shape.setFeatureId(line.getParent().featureId);\r\n shape.setColorSet(line.getParent().colorSet);\r\n shape.setSlabModeCoreParentId(line.getParent().id);\r\n shape.setSlabModeCoreParentPartId(line.getParent().partId);\r\n shape.setSlabModeWaterfallSegmentId(segment.id);\r\n\r\n this.addMiteredEdgesToWaterfallShape(shapeId, segment);\r\n\r\n this.addActiveBacksplash(new SlabAdditionalShape(line, shapeId));\r\n\r\n }\r\n });\r\n }\r\n });\r\n };\r\n\r\n addMiteredEdgesToWaterfallShape = (shapeId, segment) => {\r\n const miteredEdge = getMiterEdgeFeature();\r\n\r\n const waterfallShapes = WATERFALL_SHAPES_KEY;\r\n const edgeParams = {\r\n [waterfallShapes.cabinetReturn]: [3],\r\n [waterfallShapes.waterfall]: [1, 2, 3],\r\n [waterfallShapes.overhangReturn]: [1],\r\n [waterfallShapes.underlayment]: [0]\r\n };\r\n if (edgeParams[segment.name]) {\r\n if (miteredEdge) {\r\n addEdgeToTheLines(shapeId, miteredEdge, edgeParams[segment.name], false);\r\n } else {\r\n addFakeEdgeToLines(shapeId, edgeParams[segment.name]);\r\n }\r\n }\r\n\r\n if (segment.name === waterfallShapes.waterfall) {\r\n setLineParams(shapeId, [1, 2, 3], { slabModeSkipMiteredEdgeCreation: true });\r\n }\r\n };\r\n\r\n getWaterfallPoints = (line, segment) => {\r\n const key = segment.key;\r\n const length = config.measureUnit === \"Imperial\" ? segment.length : mmToInches(segment.length);\r\n if (segment.isDisabled) {\r\n return [null, null]\r\n }\r\n switch (key) {\r\n case WATERFALL_SHAPES_KEY.cabinetReturn: {\r\n const secondPoint = getPointOnTheLine(line.to, line.from, -length);\r\n return [secondPoint, line.to]\r\n }\r\n case WATERFALL_SHAPES_KEY.waterfall: {\r\n const distanceFromLine = -segment.height * 2 / sqftConfig.getMeasureMultiplier();\r\n const [firstPoint, secondPoint] = getParallelPoints(line.from, line.to, distanceFromLine);\r\n return [firstPoint, secondPoint]\r\n }\r\n case WATERFALL_SHAPES_KEY.overhangReturn: {\r\n const secondPoint = getPointOnTheLine(line.from, line.to, -length);\r\n return [line.from, secondPoint]\r\n }\r\n case WATERFALL_SHAPES_KEY.underlayment: {\r\n const nextLine = line.getParent().getNextLine(line);\r\n //const secondPoint = getPointOnTheLine(nextLine.to, line.from, -segment.length);\r\n //return [nextLine.from, nextLine.to]\r\n const miteredEdgeDistance = -getMiterEdgeHeight();\r\n const [firstPoint, secondPoint] = getParallelPoints(nextLine.from, nextLine.to, miteredEdgeDistance);\r\n return [secondPoint, firstPoint]\r\n }\r\n case WATERFALL_SHAPES_KEY.peninsulaUnderwrap: {\r\n const [firstPoint, secondPoint] = getParallelPoints(line.from, line.to, -segment.height);\r\n return [firstPoint, secondPoint]\r\n }\r\n default:\r\n return [null, null]\r\n }\r\n }\r\n\r\n isInited = (line) => {\r\n return this.additionalShapes.some( SlabAdditionalShape => {\r\n return SlabAdditionalShape.line.id === line.id\r\n })\r\n }\r\n\r\n getShapeAdditionalShapes = (shape) => {\r\n return this.additionalShapes.filter( SlabAdditionalShape => {\r\n return SlabAdditionalShape.line.getParent().id === shape.id\r\n })\r\n }\r\n\r\n updateAdditionalShapeFeature = (line, featureId) => {\r\n const additionalShape = this.findAdditionalShapeByLine(line);\r\n if (additionalShape) {\r\n const backsplashShape = workspace.getShapeById(additionalShape.backsplashShapeId);\r\n backsplashShape.setFeatureId(featureId);\r\n }\r\n }\r\n\r\n resetBacksplashes = () => {\r\n this.additionalShapes = [];\r\n }\r\n\r\n importData = (data) => {\r\n for (let activeBacksplashData of data) {\r\n let shape = workspace.importShape(activeBacksplashData.backsplashShape);\r\n shape.deregisterEvents();\r\n let line = workspace.getLineById(activeBacksplashData.line.id);\r\n let slabAdditionalShape = new SlabAdditionalShape(line, shape.id);\r\n this.addActiveBacksplash(slabAdditionalShape);\r\n }\r\n }\r\n\r\n exportData = () => {\r\n return this.additionalShapes\r\n .filter( SlabAdditionalShape => {\r\n let backsplashShape = workspace.getShapeById(SlabAdditionalShape.backsplashShapeId);\r\n return backsplashShape.partId !== SHAPE_PART_ID.seamPiece;\r\n })\r\n .map( SlabAdditionalShape => {\r\n let backsplashShape = workspace.getShapeById(SlabAdditionalShape.backsplashShapeId);\r\n\r\n return {\r\n backsplashShape: backsplashShape.export(),\r\n line: SlabAdditionalShape.line.export()\r\n }\r\n })\r\n }\r\n\r\n addActiveBacksplash = (SlabAdditionalShape) => {\r\n this.additionalShapes.push(SlabAdditionalShape);\r\n }\r\n\r\n findAdditionalShapeByLine = (line) => {\r\n return this.additionalShapes.find(additionalShape => additionalShape.line.id === line.id);\r\n }\r\n\r\n removeActiveBacksplashByLine = (line) => {\r\n for (let i = this.additionalShapes.length - 1; i >= 0; i--) {\r\n if (this.additionalShapes[i].line.id === line.id) {\r\n const shape = workspace.getShapeById(this.additionalShapes[i].backsplashShapeId);\r\n this.removeAllActiveBacksplashesAttachedToShape(shape);\r\n workspace.removeShapeById(this.additionalShapes[i].backsplashShapeId);\r\n }\r\n }\r\n }\r\n\r\n findOneByBacksplashShapeId = (backsplashShapeId) => {\r\n return this.additionalShapes.find(activeBacksplash => {\r\n return activeBacksplash.backsplashShapeId === backsplashShapeId\r\n })\r\n };\r\n\r\n /**\r\n * This will hide all additional shapes that was created for mitered edges, backsplashes and mitered segments\r\n */\r\n hideAdditionalShapes = () => {\r\n this.additionalShapes.forEach(SlabAdditionalShape => {\r\n let backsplashShape = workspace.getShapeById(SlabAdditionalShape.backsplashShapeId);\r\n if (backsplashShape) {\r\n backsplashShape.deregisterEvents();\r\n } else {\r\n console.error(\"SlabAdditionalShape not found, backsplashShapeId:\", SlabAdditionalShape.backsplashShapeId);\r\n }\r\n });\r\n };\r\n\r\n removeAllActiveBacksplashesAttachedToShape = (shape) => {\r\n const lines = shape.getLines();\r\n for (const line of lines) {\r\n this.removeActiveBacksplashByLine(line);\r\n }\r\n };\r\n\r\n restoreBacksplashShapes = () => {\r\n this.additionalShapes.forEach(SlabAdditionalShape => {\r\n let backsplashShape = workspace.getShapeById(SlabAdditionalShape.backsplashShapeId);\r\n if (backsplashShape.isHidden && backsplashShape.shapePieces.length === 0) {\r\n backsplashShape.reInitEvents();\r\n }\r\n });\r\n };\r\n\r\n removeShapeFromList = (shapeToRemove) => {\r\n this.additionalShapes = this.additionalShapes.filter(additionalShape => additionalShape.backsplashShapeId !== shapeToRemove.id);\r\n }\r\n}\r\n\r\nexport default SlabAdditionalShapes;\r\n","import {getParallelPoints, mmToInches} from \"../../../../helpers/sqftHelper\";\r\nimport config from \"../../store/sqftConfig\";\r\n\r\nexport const getBacksplashesPos = (line, thickness = -5) => {\r\n thickness = config.measureUnit === \"Imperial\" ? thickness : mmToInches(thickness);\r\n const shape = line.getParent();\r\n let shapePoints = [];\r\n const parallelPoints = getParallelPoints(line.from, line.to, -thickness);\r\n shapePoints.push(...parallelPoints);\r\n shapePoints.push(line.from);\r\n shapePoints.push(line.to);\r\n\r\n return [shape.pos, shapePoints]\r\n}\r\n\r\nexport const getShapePosAndPoints = (parent, from, to, thickness = -5) => {\r\n const shape = parent;\r\n let shapePoints = [];\r\n const parallelPoints = getParallelPoints(from, to, -thickness);\r\n shapePoints.push(...parallelPoints);\r\n shapePoints.push(from);\r\n shapePoints.push(to);\r\n\r\n return [shape.pos, shapePoints]\r\n}\r\n\r\nexport const getBumpoutPointCords = (line) => {\r\n return line.bumpoutOverlay.getBumpoutPointCords()\r\n}\r\n","import eventManager from \"../../store/sqftEventManager\";\r\nimport config from \"../../store/sqftConfig\";\r\nimport workspace from \"../workspace\";\r\nimport store from \"../../../../../../store\";\r\nimport {setSQFTMenuOpened} from \"../../../../../../actions/sqftMenuFunctions\";\r\nimport {updateSQFTCalculations} from \"../../../../../../actions/sqftFunctions\";\r\nimport {attachResource} from \"./resourseCanas\";\r\nimport $ from \"jquery\";\r\nimport {iconPlusBlue} from \"../../../../assetsSQFT\";\r\nimport {\r\n RESOURCE_ATTACHED_TO_TYPE,\r\n SIDEBAR_NAVIGATION_BUTTONS,\r\n SIDEBAR_NAVIGATION_CABINET_BUTTONS,\r\n SQFT_GROUP\r\n} from \"../../../../constants\";\r\n\r\nconst endCapCanvas = function() {\r\n this.cursorImage = null;\r\n this.addedImages = null; //like in edges\r\n this.img = null;\r\n this.isWaitingToRestoreCursor = false;\r\n\r\n this.setHighlighting = (disallowDemo) => {\r\n eventManager.stealCursor(true); // remove all other cursors\r\n workspace.setAllowEdges(false); // removing sizing lines\r\n workspace.setAllowBumpoutEdges(false); // removing bumpout lines\r\n config.highlight.points = false;\t// remove radiuses\r\n config.highlight.lines = true; // enable lines highlighting\r\n config.highlight.type = RESOURCE_ATTACHED_TO_TYPE.end_cap;\r\n\r\n if (!disallowDemo) {\r\n config.highlight.demoShow = true;\r\n }\r\n setTimeout(function () {\r\n config.highlight.demoShow = false;\r\n }, 1000);\r\n };\r\n\r\n this.setCursorImage = () => {\r\n let bounds = 18,\r\n imgWidth = bounds,\r\n imgHeight = bounds;\r\n\r\n let domImg = document.createElement('img');\r\n domImg.crossOrigin = \"Anonymous\";\r\n\r\n let $img = $(domImg);\r\n $img.css({\r\n position: 'absolute',\r\n width: '1px',\r\n height: '1px'\r\n });\r\n\r\n const imgOnLoad = () => {\r\n let bounds = 18;\r\n let ratio;\r\n if (imgWidth > imgHeight) {\r\n ratio = imgHeight / imgWidth;\r\n imgWidth = bounds;\r\n imgHeight = bounds * ratio;\r\n } else {\r\n ratio = imgWidth / imgHeight;\r\n imgHeight = bounds;\r\n imgWidth = bounds * ratio;\r\n }\r\n eventManager.setCursor('edge-select', this, true);\r\n this.cursorImage = { image: domImg, width: imgWidth, height: imgHeight };\r\n this.registerEvents(); // only after image is load!\r\n }\r\n $img.on('load', imgOnLoad);\r\n $img.appendTo($('body'));\r\n $img.attr('src', iconPlusBlue);\r\n\r\n this.img = $img;\r\n };\r\n\r\n this.registerEvents = () => {\r\n eventManager.setCursor('radius-select', this, true);\r\n eventManager.addEvent(\r\n eventManager.events.RENDER,\r\n this.renderCursor,\r\n this,\r\n eventManager.priorities.OVERALL\r\n );\r\n eventManager.addEvent(\r\n eventManager.events.MOUSE_UP,\r\n this.onMouseUp,\r\n this,\r\n eventManager.priorities.OVERALL\r\n );\r\n };\r\n\r\n this.deregisterEvents = () => {\r\n eventManager.resetCursor(this);\r\n eventManager.removeEvent(this);\r\n config.highlight.lines = false;\r\n }\r\n this.destroy = (protect, revertBackAfterMouseUp) => {\r\n if (revertBackAfterMouseUp) {\r\n eventManager.removeEvent(this, eventManager.events.RENDER); //remove render only, but wait for mouse up to set cursor again\r\n this.isWaitingToRestoreCursor = true;\r\n } else {\r\n this.deregisterEvents();\r\n }\r\n };\r\n\r\n this.onMouseUp = (mousePos) => {\r\n void mousePos;\r\n let hoveredLine = workspace.getHoveredLine();\r\n let hoveredLineCorner = workspace.getHoveredLineCorner();\r\n if (hoveredLine) {\r\n const state = store.getState();\r\n const updateCalculations = state.sqftState.updateCalculations;\r\n const SQFTGroup = state.sqftMenuState.SQFTGroup;\r\n const button = SQFTGroup === SQFT_GROUP.cabinets ? SIDEBAR_NAVIGATION_CABINET_BUTTONS.end_panel : SIDEBAR_NAVIGATION_BUTTONS.end_cap;\r\n const selectedFeature = state.sqftResourceState.selectedFeature;\r\n const featureNameTranslated = selectedFeature.getFeatureName();\r\n\r\n if (hoveredLine || hoveredLineCorner) {\r\n attachResource(hoveredLine, hoveredLineCorner, RESOURCE_ATTACHED_TO_TYPE.end_cap, selectedFeature.dbFeature.id, selectedFeature.partId, featureNameTranslated);\r\n } else {\r\n store.dispatch(setSQFTMenuOpened(button));\r\n }\r\n\r\n store.dispatch(updateSQFTCalculations(updateCalculations + 1));\r\n }\r\n this.checkForRestoreCursor();\r\n };\r\n this.checkForRestoreCursor = function() {\r\n if (this.isWaitingToRestoreCursor) {\r\n this.isWaitingToRestoreCursor = false;\r\n eventManager.removeEvent(this, eventManager.events.MOUSE_UP); //remove mouse up, it will be added in setCursorImage\r\n this.setHighlighting(true);\r\n this.setCursorImage();\r\n }\r\n };\r\n this.renderCursor = (ctx) => {\r\n if (this.cursorImage.image && ($(window).width() > 768)) {\r\n let mPos = eventManager.LastKnownMousePos;\r\n if (mPos) {\r\n ctx.drawImage(this.cursorImage.image, mPos.x + 10, mPos.y + 10, this.cursorImage.width, this.cursorImage.height);\r\n }\r\n }\r\n };\r\n};\r\n\r\nexport default new endCapCanvas();\r\n","import store from \"../../../store\";\r\nimport sqftConfig from \"../components/canvas/store/sqftConfig\";\r\nimport {setSlabImageHeight, setSlabImageWidth} from \"../../../actions/sqftSlabFunctions\";\r\nimport Radius from \"../components/canvas/core/controls/radius\";\r\n\r\nexport const onMeasureUnitChange = () => {\r\n Radius.onMeasureUnitChange();\r\n\r\n switch(sqftConfig.measureUnit) {\r\n case \"Metric\":\r\n store.dispatch(setSlabImageWidth(sqftConfig.slab.imageWidthMetric));\r\n store.dispatch(setSlabImageHeight(sqftConfig.slab.imageHeightMetric));\r\n break;\r\n case \"Imperial\":\r\n default:\r\n store.dispatch(setSlabImageWidth(sqftConfig.slab.imageWidthImperial));\r\n store.dispatch(setSlabImageHeight(sqftConfig.slab.imageHeightImperial));\r\n }\r\n}\r\n","import sqftEventManager from \"../../../store/sqftEventManager\";\r\nimport DrawImage from \"../textBox/draw/drawImage\";\r\nimport {pnpolyArray} from \"../../../../../lib/pnpoly\";\r\nimport config from \"../../../store/sqftConfig\";\r\nimport sqftConfig from \"../../../store/sqftConfig\";\r\nimport RenderFigures from \"../../../helpers/renderFigures\";\r\n\r\nclass StaticImage {\r\n svgImageId;\r\n ctx;\r\n x;\r\n y;\r\n width;\r\n height;\r\n isCentered = true;\r\n isScale = true;\r\n beforeRenderCallback = function (){};\r\n\r\n /**\r\n * returns a list needed for integration\r\n * @param svgImageId {string}\r\n * @param x {int}\r\n * @param y {int}\r\n * @param width {int}\r\n * @param height {int}\r\n * @param isCentered {boolean}\r\n * @param isScale {boolean}\r\n * @param beforeRenderCallback {function}\r\n */\r\n constructor(svgImageId, x, y, width, height, isCentered, isScale, beforeRenderCallback) {\r\n this.svgImageId = svgImageId;\r\n this.ctx = sqftEventManager.getCtx();\r\n this.x = x;\r\n this.y = y;\r\n this.width = width;\r\n this.height = height;\r\n this.isCentered = isCentered;\r\n this.isScale = isScale;\r\n this.beforeRenderCallback = beforeRenderCallback ? beforeRenderCallback : function (){};\r\n }\r\n\r\n isHovered = (mousePos) => {\r\n return pnpolyArray(this.getHoverArray(), mousePos);\r\n }\r\n\r\n getHoverArray = () => {\r\n const width = this.width * config.defaultScale;\r\n const height = this.height * config.defaultScale;\r\n\r\n if (this.isCentered) {\r\n return [\r\n [this.x - width / 2, this.y - height / 2],\r\n [this.x + width / 2, this.y - height / 2],\r\n [this.x + width / 2, this.y + height / 2],\r\n [this.x - width / 2, this.y + height / 2],\r\n ];\r\n } else {\r\n return [\r\n [this.x, this.y],\r\n [this.x + width, this.y],\r\n [this.x + width, this.y + height],\r\n [this.x, this.y + height],\r\n ];\r\n }\r\n }\r\n\r\n render = () => {\r\n this.beforeRenderCallback();\r\n DrawImage.renderImage(this.svgImageId,\r\n this.ctx,\r\n this.x,\r\n this.y,\r\n this.width,\r\n this.height,\r\n this.isCentered,\r\n this.isScale\r\n );\r\n if (sqftConfig.isDevMode()) {\r\n RenderFigures.renderPolygonArray(this.getHoverArray());\r\n }\r\n }\r\n}\r\n\r\nexport default StaticImage\r\n","import * as uuid from \"uuid\";\r\nimport EventManager from \"../../store/sqftEventManager\";\r\nimport workspace from \"../workspace\";\r\n\r\nexport default class SQFTShapeOffset {\r\n id;\r\n parent;\r\n animationPoints = [];\r\n state = {\r\n isHidden: false\r\n };\r\n params = {\r\n priority: EventManager.priorities.SEGMENT,\r\n };\r\n design = {\r\n lineWidth: 1,\r\n strokeStyle: 'rgba(137,137,137,0.6)',\r\n };\r\n\r\n constructor(parent, state = {}, params = {}, design = {}) {\r\n this.state = Object.assign(this.state, state);\r\n this.params = Object.assign(this.params, params);\r\n this.design = Object.assign(this.design, design);\r\n this.parent = parent;\r\n this.id = uuid.v4();\r\n this.initEvents();\r\n }\r\n\r\n getParent = () => {\r\n return this.parent;\r\n }\r\n\r\n setParent = (value) => {\r\n this.parent = value;\r\n }\r\n\r\n getPosition = () => {\r\n return this.parent.getPosition();\r\n }\r\n\r\n init = () => {\r\n this.initEvents();\r\n }\r\n\r\n initEvents() {\r\n EventManager.addEvent(\r\n EventManager.events.MOUSE_MOVE,\r\n this.onMouseMove.bind(this),\r\n this,\r\n this.params.priority\r\n );\r\n EventManager.addEvent(\r\n EventManager.events.MOUSE_DOWN,\r\n this.onMouseDown.bind(this),\r\n this,\r\n this.params.priority\r\n );\r\n EventManager.addEvent(\r\n EventManager.events.MOUSE_UP,\r\n this.onMouseUp.bind(this),\r\n this,\r\n this.params.priority\r\n );\r\n EventManager.addEvent(\r\n EventManager.events.RENDER,\r\n this.render.bind(this),\r\n this,\r\n this.params.priority\r\n );\r\n }\r\n\r\n onMouseMove() {\r\n }\r\n\r\n onMouseUp() {\r\n }\r\n\r\n onMouseDown() {\r\n }\r\n\r\n delete() {\r\n this.deregisterEvents();\r\n }\r\n\r\n destroy() {\r\n this.delete();\r\n }\r\n\r\n hide() {\r\n if (!this.state.isHidden) {\r\n this.deregisterEvents();\r\n this.state.isHidden = true\r\n }\r\n }\r\n\r\n restore() {\r\n if (this.state.isHidden) {\r\n this.reInitEvents();\r\n this.state.isHidden = false\r\n }\r\n }\r\n\r\n deregisterEvents = () => {\r\n EventManager.removeEvent(this);\r\n }\r\n\r\n reInitEvents = () => {\r\n this.initEvents();\r\n }\r\n\r\n animateShapeTransition(newShape, callback, duration = 0.75 * 1000) { // 10 seconds = 10000 milliseconds\r\n if (!newShape) {\r\n console.error(\"Invalid new shape.\");\r\n return;\r\n }\r\n\r\n if (newShape.id === this.parent.id) {\r\n return;\r\n }\r\n\r\n const originalShapePoints = this.calculateOutlineV2(this.parent.getPointsPointField(), 10);\r\n const newShapePoints = this.calculateOutlineV2(newShape.getPointsPointField(), 10);\r\n\r\n // Animation start time\r\n const startTime = new Date().getTime();\r\n\r\n const animate = () => {\r\n const elapsed = new Date().getTime() - startTime;\r\n const t = Math.min(elapsed / duration, 1);\r\n\r\n let interpolatedShape = [];\r\n for (let i = 0; i < Math.max(originalShapePoints.length, newShapePoints.length); i++) {\r\n // if we have less points in new shape\r\n const pointNew = newShapePoints[i % newShapePoints.length];\r\n // if we have less points in original shape\r\n const pointOriginal = originalShapePoints[i % originalShapePoints.length];\r\n\r\n interpolatedShape.push({\r\n x: pointOriginal.x + t * (pointNew.x - pointOriginal.x),\r\n y: pointOriginal.y + t * (pointNew.y - pointOriginal.y)\r\n });\r\n }\r\n\r\n this.animationPoints = interpolatedShape;\r\n\r\n if (t < 1) {\r\n requestAnimationFrame(animate);\r\n } else {\r\n this.animationPoints = [];\r\n this.setParent(newShape);\r\n callback();\r\n }\r\n };\r\n // begin animation\r\n animate();\r\n }\r\n\r\n render = (ctx) => {\r\n if (workspace && workspace.getState().loading) return;\r\n let offsetPoints;\r\n\r\n // if we have animation points the we will render them otherwise we will render shape points\r\n if (this.animationPoints.length > 0) {\r\n offsetPoints = this.calculateOutlineV2(this.animationPoints, 10);\r\n } else {\r\n const parentPoints = this.parent.getPointsPointField();\r\n offsetPoints = this.calculateOutlineV2(parentPoints, 10);\r\n }\r\n\r\n //console.log(\"parentPoints\", parentPoints);\r\n //console.log(\"offsetPoints\", offsetPoints);\r\n\r\n // let tempPoints = [\r\n // {x: 50, y: 50},\r\n // {x: 150, y: 50},\r\n // {x: 150, y: 150},\r\n // {x: 50, y: 150}\r\n // ];\r\n //let tempPointsOffset = this.calculateOffsetPoints(tempPoints, 10);\r\n //console.log(\"tempPoints\", tempPoints);\r\n //console.log(\"tempPointsOffset\", tempPointsOffset);\r\n\r\n //debugger // eslint-disable-line no-debugger\r\n ctx.save();\r\n ctx.beginPath();\r\n ctx.setLineDash([7, 5]);\r\n offsetPoints.forEach((p, i) => {\r\n if (i === 0) ctx.moveTo(p.x, p.y);\r\n else ctx.lineTo(p.x, p.y);\r\n });\r\n ctx.strokeStyle = this.design.strokeStyle;\r\n ctx.lineWidth = 1;\r\n ctx.closePath();\r\n ctx.stroke();\r\n ctx.restore();\r\n };\r\n\r\n calculateOutlineV2(points, offset) {\r\n let outlinePoints = [];\r\n\r\n for (let i = 0; i < points.length; i++) {\r\n let A = points[i];\r\n let B = points[(i + 1) % points.length];\r\n\r\n // Вектор AB\r\n let dx = B.x - A.x;\r\n let dy = B.y - A.y;\r\n\r\n // Вектор нормали (-dy, dx) или (dy, -dx)\r\n // В зависимости от того, в каком направлении идут точки\r\n let nx = dy;\r\n let ny = -dx;\r\n\r\n // Нормализуем вектор нормали\r\n let length = Math.sqrt(nx * nx + ny * ny);\r\n nx /= length;\r\n ny /= length;\r\n\r\n // Добавляем точки обводки с учетом смещения\r\n outlinePoints.push({\r\n x: A.x + nx * offset,\r\n y: A.y + ny * offset\r\n });\r\n outlinePoints.push({\r\n x: B.x + nx * offset,\r\n y: B.y + ny * offset\r\n });\r\n }\r\n\r\n return outlinePoints;\r\n }\r\n\r\n calculateOffsetPoints = (points, offsetDistance) => {\r\n let offsetPoints = [];\r\n\r\n points = [points[points.length-1], ...points, points[0], points[1]];\r\n\r\n for (let i = 1; i < points.length-2; i++) {\r\n let prev = points[i-1];\r\n let curr = points[i];\r\n let next = points[i+1];\r\n\r\n let dir1 = {x: curr.x - prev.x, y: curr.y - prev.y};\r\n let dir2 = {x: next.x - curr.x, y: next.y - curr.y};\r\n\r\n let norm1 = {x: dir1.y, y: -dir1.x};\r\n let norm2 = {x: dir2.y, y: -dir2.x};\r\n\r\n // Проверка острого угла\r\n let dotProduct = norm1.x * norm2.x + norm1.y * norm2.y;\r\n let avgNorm;\r\n if (dotProduct < 0) {\r\n avgNorm = i === 1 ? norm1 : norm2; // Использование нормали для более \"плоского\" отрезка\r\n } else {\r\n avgNorm = {x: (norm1.x + norm2.x) / 2, y: (norm1.y + norm2.y) / 2};\r\n }\r\n\r\n let length = Math.sqrt(avgNorm.x * avgNorm.x + avgNorm.y * avgNorm.y);\r\n let unitNorm = {x: avgNorm.x / length, y: avgNorm.y / length};\r\n\r\n offsetPoints.push({\r\n x: curr.x + unitNorm.x * offsetDistance,\r\n y: curr.y + unitNorm.y * offsetDistance\r\n });\r\n }\r\n return offsetPoints;\r\n }\r\n\r\n // offsetLine = (points, distance) => {\r\n // let offsetPoints = [];\r\n //\r\n // for (let i = 0; i < points.length - 1; i++) {\r\n // let p0 = points[i];\r\n // let p1 = points[i + 1];\r\n //\r\n // // Вычислить направление отрезка\r\n // let dx = p1.x - p0.x;\r\n // let dy = p1.y - p0.y;\r\n //\r\n // // Вычислить длину вектора\r\n // let len = Math.sqrt(dx * dx + dy * dy);\r\n //\r\n // // Нормализовать вектор\r\n // dx /= len;\r\n // dy /= len;\r\n //\r\n // // Вычислить нормаль (перпендикуляр)\r\n // //let nx = -dy;\r\n // //let ny = dx;\r\n // let nx = dy;\r\n // let ny = -dx;\r\n //\r\n // // Создать офсетную точку\r\n // offsetPoints.push({\r\n // x: p0.x + nx * distance,\r\n // y: p0.y + ny * distance\r\n // });\r\n // }\r\n //\r\n // // Добавить последнюю точку\r\n // let p0 = points[points.length - 2];\r\n // let p1 = points[points.length - 1];\r\n //\r\n // // Вычислить направление отрезка\r\n // let dx = p1.x - p0.x;\r\n // let dy = p1.y - p0.y;\r\n //\r\n // // Вычислить длину вектора\r\n // let len = Math.sqrt(dx * dx + dy * dy);\r\n //\r\n // // Нормализовать вектор\r\n // dx /= len;\r\n // dy /= len;\r\n //\r\n // // Вычислить нормаль (перпендикуляр)\r\n // //let nx = -dy;\r\n // //let ny = dx;\r\n // let nx = dy;\r\n // let ny = -dx;\r\n //\r\n // offsetPoints.push({\r\n // x: p1.x + nx * distance,\r\n // y: p1.y + ny * distance\r\n // });\r\n // //console.log(\"offsetPoints\", offsetPoints);\r\n // return offsetPoints;\r\n // }\r\n}\r\n","export default function createEventManager() {\r\n const listeners = {};\r\n\r\n return {\r\n on(eventName, callback) {\r\n if (!listeners[eventName]) {\r\n listeners[eventName] = [];\r\n }\r\n listeners[eventName].push(callback);\r\n },\r\n off(eventName, callback) {\r\n if (!listeners[eventName]) return;\r\n const index = listeners[eventName].indexOf(callback);\r\n if (index !== -1) {\r\n listeners[eventName].splice(index, 1);\r\n }\r\n },\r\n emit(eventName, data) {\r\n if (!listeners[eventName]) return;\r\n listeners[eventName].forEach(callback => callback(data));\r\n },\r\n };\r\n}\r\n","import LineImage from \"../core/shapes/imageParts/lineImage\";\r\nimport EventManager from \"../store/sqftEventManager\";\r\nimport PointV2, {CORE_POINT_LAYOUTS} from \"../core/shapes/pointV2\";\r\n//import line from \"../core/shapes/line\";\r\n\r\n/**\r\n *\r\n * @param points[]\r\n * @param parent\r\n * @return lines[{}]\r\n */\r\nexport const createImageLinesFromPoints = (points, parent) => {\r\n let lines = [];\r\n\r\n for (let i = 0; i < points.length; i++) {\r\n const shapeLine = new LineImage(\r\n points[i],\r\n points[(i + 1) % points.length],\r\n parent,\r\n i\r\n );\r\n // const shapeLine = new line([i], points[(i + 1) % points.length]);\r\n // void parent;\r\n\r\n lines.push(shapeLine);\r\n }\r\n\r\n return lines;\r\n};\r\n\r\n\r\n/**\r\n * @param x\r\n * @param y\r\n * @param parent\r\n * @return {PointV2}\r\n */\r\nexport const getImagePoint = (x, y, parent) => {\r\n let pointState = {\r\n priority: EventManager.priorities.BOX_POINT,\r\n movable: false,\r\n isCentered: true,\r\n isResizedByPoint: false,\r\n isScaledByPoint: false,\r\n isVisibleOnHover: false,\r\n };\r\n let pointDesign = {\r\n radius: 0, // hide corner points\r\n lineWidth: 1,\r\n layout: CORE_POINT_LAYOUTS.black\r\n };\r\n\r\n return new PointV2(x, y, parent, pointState, pointDesign);\r\n}\r\n","import SimpleLine from \"../simpleLine\";\r\nimport NumberText from \"../../workspace/text/numberText\";\r\nimport {COLORS} from \"../../../../../../../colorThemes\";\r\nimport workspace from \"../../workspace\";\r\nimport sqftEventManager from \"../../../store/sqftEventManager\";\r\nimport EventManager from \"../../../store/sqftEventManager\";\r\nimport {DIRECTIONS, getLineDirection, getLineOrientation} from \"../../../../../helpers/shapeHelper\";\r\nimport {mmToInches, orientation} from \"../../../../../helpers/sqftHelper\";\r\nimport moveDiagonalLine from \"../../../../../lib/moveDiagonalLine\";\r\nimport sqftConfig from \"../../../store/sqftConfig\";\r\nimport {MEASURE_UNITS} from \"../../../../../constants\";\r\n\r\nclass LineImage extends SimpleLine {\r\n constructor(from, to, parent, lineIndex) {\r\n super(from, to, parent)\r\n\r\n this.movableImage = parent;\r\n this.lineIndex = lineIndex;\r\n const design = {fontColor: COLORS.red, eventsPriority: sqftEventManager.priorities.IMAGE_LINE};\r\n let xOffset = 0;\r\n let yOffset = 0;\r\n switch (lineIndex) {\r\n case 0:\r\n xOffset = 0;\r\n yOffset = 15;\r\n break;\r\n case 1:\r\n xOffset = 0;\r\n yOffset = -15;\r\n break;\r\n case 2:\r\n xOffset = 0;\r\n yOffset = 15;\r\n break;\r\n case 3:\r\n xOffset = 0;\r\n yOffset = 15;\r\n break;\r\n }\r\n // const xOffset = lineIndex === 0 || lineIndex === 2 ? 0 : 15;\r\n // const yOffset = lineIndex === 0 || lineIndex === 2 ? 15 : 0;\r\n this.measurementInsideShape = new NumberText(0, {xOffset: xOffset, yOffset}, design, workspace, this.updatePosInsideShape, false);\r\n }\r\n\r\n destroy = (protect) => {\r\n if (!protect) {\r\n EventManager.removeEvent(this);\r\n this.from.destroy(protect);\r\n this.lineLengthText.destroy();\r\n this.measurementInsideShape.destroy();\r\n }\r\n };\r\n\r\n deregisterEvents = (protect) => {\r\n if (!protect) {\r\n EventManager.removeEvent(this);\r\n this.isHidden = true;\r\n this.from.deregisterEvents();\r\n this.lineLengthText.deregisterEvents();\r\n this.measurementInsideShape.deregisterEvents();\r\n }\r\n };\r\n\r\n reInitEvents = () => {\r\n if (this.isHidden) {\r\n this.initEvents();\r\n this.isHidden = false;\r\n\r\n this.from.reInitEvents();\r\n this.lineLengthText.reInitEvents();\r\n\r\n if (this.movableImage.shouldRenderMeasurementsInsideTheShape()) {\r\n const outerShape = this.movableImage.getOuterShape();\r\n if (outerShape) {\r\n this.measurementInsideShape.reInitEvents();\r\n }\r\n }\r\n }\r\n }\r\n\r\n updatePosInsideShape = (val, numberText, prevValue) => {\r\n let diff = prevValue - val;\r\n diff = sqftConfig.measureUnit === MEASURE_UNITS.Metric\r\n ? mmToInches(diff)\r\n : diff;\r\n\r\n const angleInRadians = this.movableImage.rotatedDegrees * Math.PI / 180; // Предполагая, что rotationAngle - это угол вращения в градусах\r\n\r\n // Calculate the offset taking into account the rotation angle\r\n const deltaX = diff * Math.cos(angleInRadians);\r\n const deltaY = diff * Math.sin(angleInRadians);\r\n\r\n const movableImage = this.from.parent;\r\n const lineIndex = this.lineIndex;\r\n let posXDiff = 0;\r\n let posYDiff = 0;\r\n switch (lineIndex) {\r\n case 0:\r\n posXDiff = -deltaY;\r\n posYDiff = -deltaX;\r\n break;\r\n case 1:\r\n posXDiff = +deltaX;\r\n posYDiff = +deltaY;\r\n break;\r\n case 2:\r\n posXDiff = +deltaY;\r\n posYDiff = +deltaX;\r\n break;\r\n case 3:\r\n posXDiff = -deltaX;\r\n posYDiff = -deltaY;\r\n break;\r\n }\r\n\r\n const newPosition = {x: movableImage.pos.x + posXDiff, y: movableImage.pos.y + posYDiff}\r\n movableImage.setPosition(newPosition);\r\n movableImage.shapeAbsolute.setAbsolutePos(newPosition);\r\n };\r\n\r\n /**\r\n * parent method override\r\n * @param xDiff\r\n * @param yDiff\r\n */\r\n moveLine = (xDiff, yDiff) => {\r\n const currentSize = this.parent.getSize();\r\n let newImageWidth = currentSize.width;\r\n let newImageHeight = currentSize.height;\r\n\r\n const o = getLineOrientation(this.from, this.to);\r\n const lineDirection = getLineDirection(this.from, this.to);\r\n\r\n if (o === orientation.VERTICAL) {\r\n if (lineDirection === DIRECTIONS.SOUTH) {\r\n //set min and max line length\r\n let testNewImageValue = newImageWidth - xDiff;\r\n if (sqftConfig.maxApplianceLineLength > testNewImageValue\r\n && sqftConfig.minApplianceLineLength < testNewImageValue\r\n ) {\r\n newImageWidth = testNewImageValue;\r\n this.from.x -= xDiff;\r\n this.to.x -= xDiff;\r\n }\r\n } else if (lineDirection === DIRECTIONS.NORTH) {\r\n let testNewImageValue = newImageWidth + xDiff;\r\n if (sqftConfig.maxApplianceLineLength > testNewImageValue\r\n && sqftConfig.minApplianceLineLength < testNewImageValue\r\n ) {\r\n newImageWidth = testNewImageValue;\r\n this.parent.setPosition({x: this.parent.pos.x - xDiff, y: this.parent.pos.y});\r\n this.parent.updateSnappedPos(); //resolve snapping v1\r\n //this.parent.resetAbsolutePos(); //resolve snapping v2\r\n\r\n //move points for the parallel line\r\n const parallelLine = this.getParallelLine();\r\n parallelLine.from.x += xDiff;\r\n parallelLine.to.x += xDiff;\r\n\r\n //console.log(\"newImageWidth\", testNewImageValue);\r\n //console.log(\"parallelLine.from.y\", parallelLine.to.x);\r\n //console.log(\"parallelLine.to.y\", parallelLine.to.x);\r\n //console.log(\"xDiff\", xDiff);\r\n }\r\n }\r\n } else if (o === orientation.HORIZONTAL) {\r\n if (lineDirection === DIRECTIONS.WEST) {\r\n let testNewImageValue = newImageHeight - yDiff;\r\n if (sqftConfig.maxApplianceLineLength > testNewImageValue\r\n && sqftConfig.minApplianceLineLength < testNewImageValue\r\n ) {\r\n newImageHeight = testNewImageValue;\r\n this.from.y -= yDiff;\r\n this.to.y -= yDiff;\r\n }\r\n } else if (lineDirection === DIRECTIONS.EAST) {\r\n let testNewImageValue = newImageHeight + yDiff;\r\n if (sqftConfig.maxApplianceLineLength > testNewImageValue\r\n && sqftConfig.minApplianceLineLength < testNewImageValue\r\n ) {\r\n newImageHeight = testNewImageValue;\r\n this.parent.setPosition({x: this.parent.pos.x, y: this.parent.pos.y - yDiff});\r\n this.parent.updateSnappedPos(); //resolve snapping v1\r\n //this.parent.resetAbsolutePos(); //resolve snapping v2\r\n\r\n //move points for the parallel line\r\n const parallelLine = this.getParallelLine();\r\n parallelLine.from.y += yDiff;\r\n parallelLine.to.y += yDiff;\r\n }\r\n }\r\n } else {\r\n const nextLine = this.parent.getNextLine(this);\r\n const prevLine = this.parent.getPrevLine(this);\r\n moveDiagonalLine(this, nextLine, prevLine, this.state.movePointDistance, yDiff, o);\r\n //newImageWidth += xDiff;\r\n //newImageHeight += yDiff;\r\n }\r\n\r\n this.parent.updateLinesLength();\r\n this.updatePrentSize(newImageWidth, newImageHeight);\r\n }\r\n getMaxLength = () => sqftConfig.maxApplianceLineLength * sqftConfig.getMeasureMultiplier()\r\n}\r\n\r\nexport default LineImage;\r\n","import * as uuid from \"uuid\";\r\n\r\nimport sqftConfig from \"../../store/sqftConfig\";\r\nimport workspace from \"../workspace\";\r\nimport EventManager from \"../../store/sqftEventManager\";\r\nimport {getMidPoint, getPointDistance, getPointField, orientation} from \"../../../../helpers/sqftHelper\";\r\nimport {\r\n DIRECTIONS,\r\n getLineDirection,\r\n getLineLengthNumberTextV2ForTheImage,\r\n getLineOrientation,\r\n getPointDirection\r\n} from \"../../../../helpers/shapeHelper\";\r\nimport {isPointInsidePolygon} from \"../../../../lib/pnpoly\";\r\nimport {getLineBordersArrayV2} from \"../../helpers/lineHelper\";\r\nimport moveDiagonalLine from \"../../../../lib/moveDiagonalLine\";\r\nimport SqftStore from \"../../store/sqftStore\";\r\nimport COLOR_THEMES from \"../../../../../../colorThemes\";\r\nimport store from \"../../../../../../store\";\r\nimport {SIDEBAR_NAVIGATION_BUTTONS} from \"../../../../constants\";\r\nimport resizeLine from \"./overlays/resizeLine\";\r\n\r\nclass SimpleLine {\r\n id;\r\n from;\r\n to;\r\n parent;\r\n lineLengthText;\r\n\r\n constructor(from, to, parent) {\r\n this.id = uuid.v4();\r\n this.from = from;\r\n this.to = to;\r\n this.parent = parent;\r\n this.design = {\r\n lineThickness: 1,\r\n lineHoveredArea: 10\r\n };\r\n this.state = {\r\n isHovering: false,\r\n mouseDown: false,\r\n mouseDownPosition: null,\r\n movePointDistance: null\r\n };\r\n this.initLineLength();\r\n this.initEvents();\r\n }\r\n\r\n exportData = () => {\r\n return {\r\n id: this.id,\r\n from: this.from.exportData(),\r\n to: this.to.exportData()\r\n }\r\n }\r\n\r\n importData = (lineData) => {\r\n this.id = lineData.id;\r\n this.from.importData(lineData.from);\r\n this.to.importData(lineData.to);\r\n }\r\n\r\n isHovering = () => {\r\n return this.state.isHovering\r\n }\r\n\r\n getParent = () => {\r\n return this.parent\r\n }\r\n\r\n initEvents = () => {\r\n EventManager.addEvent(\r\n EventManager.events.MOUSE_MOVE,\r\n this.onMouseMove,\r\n this,\r\n EventManager.priorities.IMAGE_LINE\r\n );\r\n EventManager.addEvent(\r\n EventManager.events.MOUSE_DOWN,\r\n this.onMouseDown,\r\n this,\r\n EventManager.priorities.IMAGE_LINE\r\n );\r\n EventManager.addEvent(\r\n EventManager.events.MOUSE_UP,\r\n this.onMouseUp,\r\n this,\r\n EventManager.priorities.IMAGE_LINE\r\n );\r\n EventManager.addEvent(\r\n EventManager.events.MOUSE_LEAVE,\r\n this.onMouseLeave,\r\n this,\r\n EventManager.priorities.OVERALL\r\n );\r\n EventManager.addEvent(\r\n EventManager.events.MOUSE_LEAVE,\r\n this.onMouseLeave,\r\n this,\r\n EventManager.priorities.OVERALL\r\n );\r\n EventManager.addEvent(\r\n EventManager.events.RENDER,\r\n this.render,\r\n this,\r\n EventManager.priorities.IMAGE_LINE\r\n );\r\n };\r\n\r\n initLineLength = () => {\r\n this.lineLengthText = getLineLengthNumberTextV2ForTheImage(this.from, this.to, this, this.setLineLengthFromNumberValue, true);\r\n }\r\n\r\n destroy = (protect) => {\r\n if (!protect) {\r\n EventManager.removeEvent(this);\r\n this.from.destroy(protect);\r\n this.lineLengthText.destroy();\r\n }\r\n };\r\n\r\n deregisterEvents = () => {\r\n EventManager.removeEvent(this);\r\n this.isHidden = true;\r\n this.from.deregisterEvents();\r\n this.lineLengthText.deregisterEvents();\r\n }\r\n\r\n reInitEvents = () => {\r\n if (this.isHidden) {\r\n this.initEvents();\r\n this.isHidden = false;\r\n\r\n this.from.reInitEvents();\r\n this.lineLengthText.reInitEvents();\r\n }\r\n }\r\n\r\n onMouseLeave() {\r\n this.state.isHovering = false;\r\n this.state.mouseDown = false;\r\n }\r\n\r\n onMouseUp(mousePos, e) {\r\n void mousePos;\r\n void e;\r\n if (this.state.mouseDown) {\r\n this.state.mouseDown = false;\r\n this.state.mouseDownPosition = null;\r\n //this.from.snapToGrid();\r\n //this.to.snapToGrid();\r\n }\r\n }\r\n onMouseDown(mousePos, e) {\r\n void e;\r\n if (this.state.isHovering) {\r\n this.state.mouseDown = true;\r\n this.state.movePointDistance = getPointDistance(this.from, this.to);\r\n this.state.mouseDownPosition = mousePos;\r\n return true;\r\n }\r\n return false;\r\n }\r\n\r\n isMouseOverLineV2 = (mousePos) => {\r\n const lineBordersArray = getLineBordersArrayV2(this.from,\r\n this.to,\r\n this.design.lineHoveredArea\r\n )\r\n //this.state.isHovering\r\n return isPointInsidePolygon(mousePos, lineBordersArray);// || this.state.mouseDown;\r\n }\r\n\r\n onMouseMove = (mousePos, e) => {\r\n void e;\r\n // if (e.terminate && !parent.isHovering()) {\r\n // this.state.isHovering = false;\r\n // return false;\r\n // }\r\n const isMouseOverLine = this.isMouseOverLineV2(mousePos);\r\n this.state.isHovering = isMouseOverLine;\r\n\r\n if (this.state.mouseDown || isMouseOverLine) {\r\n if (workspace.getAllowEdges() && !this.from.angleIsChanged && !this.to.angleIsChanged) {\r\n if (this.state.mouseDown) {\r\n this.moveLineWithMouse(mousePos);\r\n }\r\n EventManager.releaseStealLock(this.parent);\r\n EventManager.stealCursor();\r\n switch(getLineOrientation(this.from, this.to)) {\r\n case orientation.HORIZONTAL:\r\n EventManager.setCursor(\"n-resize\", this);\r\n break;\r\n case orientation.VERTICAL:\r\n EventManager.setCursor(\"e-resize\", this);\r\n break;\r\n case orientation.NORTHWEST:\r\n case orientation.SOUTHEAST:\r\n EventManager.setCursor(\"ne-resize\", this);\r\n break;\r\n case orientation.NORTHEAST:\r\n case orientation.SOUTHWEST:\r\n EventManager.setCursor(\"nw-resize\", this);\r\n break;\r\n }\r\n return this.state.mouseDown;\r\n }\r\n\r\n if (sqftConfig.highlight.lines && this.state.isHovering) {\r\n EventManager.releaseStealLock(this.parent);\r\n EventManager.stealCursor();\r\n return false;\r\n }\r\n // prevent all other mouseover's\r\n }\r\n\r\n if (workspace.getHoverShape() !== this.parent) {\r\n this.state.isHovering = false;\r\n }\r\n EventManager.resetCursor(this);\r\n return false;\r\n }\r\n\r\n setLineLengthFromNumberValue = (newValue) => {\r\n newValue = newValue / sqftConfig.getMeasureMultiplier()\r\n const currentDistance = getPointDistance(this.from, this.to);\r\n const diff = newValue - currentDistance;\r\n resizeLine(this, diff, false);\r\n\r\n //adjust parent size\r\n const currentSize = this.parent.getSize();\r\n let newImageWidth = currentSize.width;\r\n let newImageHeight = currentSize.height;\r\n const o = getLineOrientation(this.from, this.to);\r\n const lineDirection = getLineDirection(this.from, this.to);\r\n\r\n if (o === orientation.VERTICAL) {\r\n this.parent.setPosition({x: this.parent.pos.x, y: this.parent.pos.y - diff / 2});\r\n if (lineDirection === DIRECTIONS.SOUTH) {\r\n newImageHeight = newValue;\r\n } else if (lineDirection === DIRECTIONS.NORTH) {\r\n newImageHeight = newValue;\r\n }\r\n this.from.y += diff / 2;\r\n this.to.y += diff / 2;\r\n //move points for the parallel line\r\n const parallelLine = this.getParallelLine();\r\n parallelLine.from.y += diff / 2;\r\n parallelLine.to.y += diff / 2;\r\n } else if (o === orientation.HORIZONTAL) {\r\n this.parent.setPosition({x: this.parent.pos.x - diff / 2, y: this.parent.pos.y});\r\n if (lineDirection === DIRECTIONS.WEST) {\r\n newImageWidth = newValue;\r\n } else if (lineDirection === DIRECTIONS.EAST) {\r\n newImageWidth = newValue;\r\n }\r\n\r\n this.from.x += diff / 2;\r\n this.to.x += diff / 2;\r\n //move points for the parallel line\r\n const parallelLine = this.getParallelLine();\r\n parallelLine.from.x += diff / 2;\r\n parallelLine.to.x += diff / 2;\r\n } else {\r\n // const nextLine = this.parent.getNextLine(this);\r\n // const prevLine = this.parent.getPrevLine(this);\r\n // moveDiagonalLine(this, nextLine, prevLine, this.state.movePointDistance, yDiff, o);\r\n //newImageWidth += xDiff;\r\n //newImageHeight += yDiff;\r\n }\r\n\r\n this.parent.updateLinesLength();\r\n this.parent.updateSnappedPos(); //resolve snapping v1\r\n this.updatePrentSize(newImageWidth, newImageHeight);\r\n }\r\n\r\n moveLineWithMouse = (mousePos) => {\r\n\r\n // console.log(\"mousePos\", mousePos);\r\n // console.log(\"this.from.x\", this.from.x);\r\n // console.log(\"this.from.x\", this.to.x);\r\n\r\n const scale = workspace.getScale();\r\n const xDiff = (this.state.mouseDownPosition.x - mousePos.x) / scale;\r\n const yDiff = (this.state.mouseDownPosition.y - mousePos.y) / scale;\r\n const o = getLineOrientation(this.from, this.to);\r\n if (o === orientation.VERTICAL) {\r\n this.state.mouseDownPosition.x = mousePos.x;\r\n } else if (o === orientation.HORIZONTAL) {\r\n this.state.mouseDownPosition.y = mousePos.y;\r\n } else {\r\n this.state.mouseDownPosition = mousePos;\r\n }\r\n\r\n // console.log(\"xDiff\", xDiff);\r\n // console.log(\"yDiff\", yDiff);\r\n // console.log(\"this.state.mouseDownPosition\", this.state.mouseDownPosition);\r\n // console.log(\"mousePos\", mousePos);\r\n this.moveLine(xDiff, yDiff);\r\n };\r\n\r\n moveLine = (xDiff, yDiff) => {\r\n const currentSize = this.parent.getSize();\r\n let newImageWidth = currentSize.width;\r\n let newImageHeight = currentSize.height;\r\n\r\n const o = getLineOrientation(this.from, this.to);\r\n const lineDirection = getLineDirection(this.from, this.to);\r\n\r\n if (o === orientation.VERTICAL) {\r\n if (lineDirection === DIRECTIONS.SOUTH) {\r\n newImageWidth -= xDiff;\r\n this.from.x -= xDiff;\r\n this.to.x -= xDiff;\r\n } else if (lineDirection === DIRECTIONS.NORTH) {\r\n newImageWidth += xDiff;\r\n this.parent.setPosition({x: this.parent.pos.x - xDiff, y: this.parent.pos.y});\r\n this.parent.updateSnappedPos(); //resolve snapping v1\r\n //this.parent.resetAbsolutePos(); //resolve snapping v2\r\n\r\n //move points for the parallel line\r\n const parallelLine = this.getParallelLine();\r\n parallelLine.from.x += xDiff;\r\n parallelLine.to.x += xDiff;\r\n }\r\n } else if (o === orientation.HORIZONTAL) {\r\n if (lineDirection === DIRECTIONS.WEST) {\r\n newImageHeight -= yDiff;\r\n this.from.y -= yDiff;\r\n this.to.y -= yDiff;\r\n } else if (lineDirection === DIRECTIONS.EAST) {\r\n newImageHeight += yDiff;\r\n this.parent.setPosition({x: this.parent.pos.x, y: this.parent.pos.y - yDiff});\r\n this.parent.updateSnappedPos(); //resolve snapping v1\r\n //this.parent.resetAbsolutePos(); //resolve snapping v2\r\n\r\n //move points for the parallel line\r\n const parallelLine = this.getParallelLine();\r\n parallelLine.from.y += yDiff;\r\n parallelLine.to.y += yDiff;\r\n }\r\n } else {\r\n const nextLine = this.parent.getNextLine(this);\r\n const prevLine = this.parent.getPrevLine(this);\r\n moveDiagonalLine(this, nextLine, prevLine, this.state.movePointDistance, yDiff, o);\r\n //newImageWidth += xDiff;\r\n //newImageHeight += yDiff;\r\n }\r\n\r\n this.parent.updateLinesLength();\r\n this.updatePrentSize(newImageWidth, newImageHeight);\r\n }\r\n\r\n updatePrentSize = (newImageWidth, newImageHeight) => {\r\n const imageState = this.parent.getState();\r\n if (newImageHeight >= imageState.minimumHeight && newImageWidth >= imageState.minimumWidth ) {\r\n this.parent.setSize({\r\n width: +newImageWidth,\r\n height: +newImageHeight\r\n });\r\n }\r\n\r\n SqftStore.updateCalculations();\r\n }\r\n\r\n updateLineLength = () => {\r\n const midPoint = getMidPoint(this.from, this.to);\r\n const distance = getPointDistance(this.from, this.to);\r\n this.lineLengthText.pos.x = midPoint.x;\r\n this.lineLengthText.pos.y = midPoint.y;\r\n this.lineLengthText.value = distance;\r\n }\r\n\r\n getLineDirection = () => {\r\n const prevLine = this.parent.getPrevLine(this);\r\n const nextLine = this.parent.getNextLine(this);\r\n\r\n return getPointDirection(this.from, this.to, nextLine.to, prevLine.from);\r\n }\r\n\r\n render = (ctx) => {\r\n this.renderHovering(ctx);\r\n }\r\n\r\n renderHovering = (ctx) => {\r\n const reduxState = store.getState();\r\n const activeButton = reduxState.sqftMenuState.activeButton;\r\n if (this.state.isHovering && activeButton === SIDEBAR_NAVIGATION_BUTTONS.resize) {\r\n let pointFieldFrom = getPointField(this.from.x, this.from.y, this.parent);\r\n let pointFieldTo = getPointField(this.to.x, this.to.y, this.parent);\r\n void pointFieldFrom;\r\n void pointFieldTo;\r\n void ctx;\r\n\r\n ctx.beginPath();\r\n ctx.lineWidth = 3;\r\n ctx.strokeStyle = COLOR_THEMES[sqftConfig.activeTheme].primary;\r\n ctx.moveTo(pointFieldFrom.x, pointFieldFrom.y);\r\n ctx.lineTo(pointFieldTo.x, pointFieldTo.y);\r\n\r\n ctx.stroke();\r\n ctx.closePath();\r\n }\r\n }\r\n\r\n getParallelLine = () => {\r\n const lines = this.parent.getLines();\r\n const lineIndex = lines.indexOf(this);\r\n const parallelLineIndex = (lineIndex + 2) % 4;\r\n\r\n return lines[parallelLineIndex];\r\n }\r\n\r\n getOffset = () => {\r\n let scale = sqftConfig.scale;\r\n let workspacePos = workspace.getOffset();\r\n if (this.parent) {\r\n let _pos = this.parent.getPosition();\r\n if (sqftConfig.workspace.snapToGrid) {\r\n _pos = this.parent.getSnappedPosition();\r\n }\r\n return {\r\n x: workspacePos.x + (_pos.x * scale),\r\n y: workspacePos.y + (_pos.y * scale)\r\n }\r\n } else {\r\n return {x: 0, y: 0};\r\n }\r\n };\r\n\r\n deleteAttachedItem = () => {\r\n return true\r\n }\r\n\r\n isWithBumpout = () => {\r\n return false\r\n }\r\n\r\n isWithMitered = () => {\r\n return false\r\n }\r\n}\r\n\r\nexport default SimpleLine;\r\n","import {RENDER_TEMPLATES} from \"../../../../../constants\";\r\nimport workspace from \"../../workspace\";\r\nimport sqftConfig from \"../../../store/sqftConfig\";\r\nimport COLOR_THEMES from \"../../../store/colorThemes\";\r\nimport store from \"../../../../../../../store\";\r\nimport sqftShapeManager from \"../../../store/sqftShapeManager\";\r\nimport EventManager from \"../../../store/sqftEventManager\";\r\nimport PointV2, {CORE_POINT_LAYOUTS} from \"../pointV2\";\r\nimport {getParallelPoints, getPointField, getPointOnTheLine} from \"../../../../../helpers/sqftHelper\";\r\nimport {getAngleBetween3Points} from \"../../../../../helpers/shapeHelper\";\r\nimport {changeValuePopup} from \"../../../../../../../actions/sqftMenuFunctions\";\r\nimport SqftStore from \"../../../store/sqftStore\";\r\nimport sqftImageManager from \"../../../store/sqftImageManager\";\r\nimport sqftShape from \"../sqftShape\";\r\nimport RenderFigures from \"../../../helpers/renderFigures\";\r\n\r\nexport default class ShapeRotatable {\r\n __shape;\r\n __cornerPoints = [];\r\n rotateToPointAngle = null; // angle between shape center, hovered point and zero shape point\r\n\r\n constructor(shape) {\r\n this.__shape = shape;\r\n //this.__shape.setCenter(ShapeHelper.getCenterPoint(shape.getLines().map(line => line.from)));\r\n this.initCornerBorderPoints();\r\n if (shape instanceof sqftShape) {\r\n this.hideShapePoints();\r\n }\r\n }\r\n\r\n getCornerPoint() {\r\n return this.__shape.staticCenterPoint\r\n }\r\n\r\n getCornerPoints() {\r\n return this.__cornerPoints\r\n }\r\n\r\n reInitShapePoints() {\r\n if (this.__shape instanceof sqftShape) {\r\n const lines = this.__shape.getLines();\r\n for (const line of lines) {\r\n line.from.initEvents();\r\n }\r\n }\r\n }\r\n\r\n hideShapePoints() {\r\n const lines = this.__shape.getLines();\r\n for (const line of lines) {\r\n line.from.deregisterEvents();\r\n }\r\n }\r\n\r\n initCornerBorderPoints = () => {\r\n let minMaxPoints;\r\n if (this.__shape instanceof sqftShape) {\r\n minMaxPoints = sqftShapeManager.getMinMaxShapePoints(this.__shape, true, false)\r\n } else {\r\n minMaxPoints = sqftImageManager.getMinMaxShapePoints(this.__shape, true, false);\r\n }\r\n const {minX, maxX, minY, maxY} = minMaxPoints;\r\n console.log(\"minX, maxX, minY, maxY\", minX, maxX, minY, maxY);\r\n\r\n let pointParams = {\r\n priority: EventManager.priorities.BOX_POINT,\r\n movable: true,\r\n isCentered: true,\r\n // isCenteredByY: pointParams.isCenteredByY,\r\n // isResizedByPoint: pointParams.isResizedByPoint,\r\n // isScaledByPoint: pointParams.isScaledByPoint,\r\n isVisibleOnHover: false,\r\n\r\n // Move point callback\r\n moveCallback: (mousePos, movablePoint) => {\r\n // get angles\r\n const isSlabMode = store.getState().sqftSlabState.isShowSlabTool;\r\n const shape = movablePoint.grandParent;\r\n const shapeCenter = shape.getCenter();\r\n const shapeCenterOnField = getPointField(shapeCenter.x, shapeCenter.y, shape);\r\n const movablePointOnField = getPointField(movablePoint.posX, movablePoint.posY, shape);\r\n const shapeZeroAnglePoint = {x: shapeCenterOnField.x, y: shapeCenterOnField.y - 50};\r\n let rotateToMouseAngle = getAngleBetween3Points(mousePos, shapeCenterOnField, shapeZeroAnglePoint);\r\n let rotatedDegrees;\r\n isSlabMode ? rotatedDegrees = shape.rotatedDegreesSlab : rotatedDegrees = shape.rotatedDegrees;\r\n\r\n if (!shape.shapeRotatable) {\r\n return;\r\n }\r\n\r\n // remember rotateToPointAngle angle (it is always the same)\r\n if (!shape.shapeRotatable.rotateToPointAngle) {\r\n shape.shapeRotatable.rotateToPointAngle = getAngleBetween3Points(movablePointOnField, shapeCenterOnField, shapeZeroAnglePoint);\r\n shape.shapeRotatable.rotateToPointAngle = mousePos.x < shapeCenterOnField.x ? 360 - shape.shapeRotatable.rotateToPointAngle : shape.shapeRotatable.rotateToPointAngle;\r\n //shape.shapeRotatable.rotateToPointAngle -= rotatedDegrees;\r\n }\r\n\r\n // ROTATE TO LEFT\r\n const rotateToAngleIn360 = mousePos.x < shapeCenterOnField.x ? 360 - rotateToMouseAngle : rotateToMouseAngle;\r\n const rotateToAngleWithoutHoveredPointAngle = shape.shapeRotatable.rotateToPointAngle - rotateToAngleIn360 - rotatedDegrees;\r\n const rotateToDegreesValue = Math.round(rotateToAngleWithoutHoveredPointAngle);\r\n\r\n // Normalize angle to range [0, 360)\r\n const normalizedRotateToDegreesValue = (rotateToDegreesValue % 360 + 360) % 360;\r\n\r\n if (normalizedRotateToDegreesValue) {\r\n this.__shape.rotate(normalizedRotateToDegreesValue, shape.Direction.LEFT, isSlabMode, this.getCornerPoint());\r\n\r\n // ROTATE TO RIGHT\r\n // const rotateToAngleWithoutHoveredPointAngle = rotateToAngle - shape.shapeRotatable.rotateToPointAngle - rotatedDegrees;\r\n // const rotateToDegreesValue = Math.round(rotateToAngleWithoutHoveredPointAngle);\r\n // this.__shape.rotate(rotateToDegreesValue, shape.Direction.RIGHT, isSlabMode, this.getCornerPoint());\r\n\r\n isSlabMode\r\n ? shape.rotatedDegreesSlab = (shape.rotatedDegreesSlab % 360 + 360) % 360\r\n : shape.rotatedDegrees = (shape.rotatedDegrees % 360 + 360) % 360;\r\n\r\n // update valuePopup\r\n const state = store.getState();\r\n const valuePopup = state.sqftMenuState.changeValuePopups.find(valuePopup => valuePopup.id === 'shape' + shape.id);\r\n const displayValueInPopup = isSlabMode ? shape.rotatedDegreesSlab : shape.rotatedDegrees;\r\n store.dispatch(changeValuePopup({\r\n ...valuePopup,\r\n value: displayValueInPopup\r\n }));\r\n }\r\n\r\n\r\n // Debugging information\r\n // console.log(\"rotateToDegreesValue\", rotateToDegreesValue);\r\n // console.log(\"normalizedRotateToDegreesValue\", normalizedRotateToDegreesValue);\r\n // console.log(\"shape.rotatedDegrees2\", shape.rotatedDegrees);\r\n // console.log('movablePointOnField', movablePointOnField);\r\n // console.log(\"mousePos.x < shapeCenter.x\", mousePos.x < shapeCenter.x);\r\n // console.log('rotatePointAngle', shape.shapeRotatable.rotateToPointAngle);\r\n // console.log('rotateToMouseAngle', rotateToMouseAngle);\r\n // console.log('rotateToAngle', rotateToAngle);\r\n // console.log(\"rotateToAngleWithoutHoveredPointAngle\", rotateToAngleWithoutHoveredPointAngle);\r\n // console.log('shapeCenterOnField', shapeCenterOnField);\r\n // console.log('mousePos', mousePos);\r\n // console.log('movablePoint', movablePoint);\r\n // console.log('-------------------------------');\r\n },\r\n mouseUpCallback: (mousePos, movablePoint) => {\r\n const shape = movablePoint.grandParent;\r\n shape.shapeRotatable.rotateToPointAngle = null;\r\n }\r\n };\r\n let pointDesign = {\r\n radius: 5,\r\n lineWidth: 1,\r\n layout: CORE_POINT_LAYOUTS.green\r\n };\r\n this.__cornerPoints = [\r\n new PointV2(minX, minY, this.__shape, pointParams, pointDesign),\r\n new PointV2(maxX, minY, this.__shape, pointParams, pointDesign),\r\n new PointV2(maxX, maxY, this.__shape, pointParams, pointDesign),\r\n new PointV2(minX, maxY, this.__shape, pointParams, pointDesign),\r\n ];\r\n }\r\n\r\n destroy = () => {\r\n for (const cornerPoint of this.__cornerPoints) {\r\n cornerPoint.destroy()\r\n }\r\n }\r\n\r\n rotateShapeRotatablePoints = (aroundPoint, angle, isSlabMode) => {\r\n if (this.__shape) {\r\n for (const cornerPoint of this.getCornerPoints()) {\r\n cornerPoint.rotate(aroundPoint, angle, isSlabMode);\r\n }\r\n }\r\n }\r\n\r\n getCornerPointsPointField = () => {\r\n let cornerPointsPointField = [];\r\n for (const currentPoint of this.__cornerPoints) {\r\n cornerPointsPointField.push(\r\n getPointField( currentPoint.modelCorePoint.getPosX(), currentPoint.modelCorePoint.getPosY(), this.__shape)\r\n );\r\n }\r\n\r\n return cornerPointsPointField;\r\n }\r\n\r\n render = (ctx, template= RENDER_TEMPLATES.default) => {\r\n //this.updatePointCords();\r\n this.renderFrameBorder(ctx, this.__shape);\r\n this.renderFramePoints(ctx, this.__shape);\r\n if (this.__shape instanceof sqftShape) {\r\n this.renderLines(ctx, template);\r\n }\r\n };\r\n\r\n renderLines = (ctx, template= RENDER_TEMPLATES.default) => {\r\n if (workspace && workspace.getState().loading) return;\r\n const isSlabMode = SqftStore.isSlabMode();\r\n let lines = this.__shape.getLines();\r\n\r\n ctx.beginPath();\r\n for (let i = 0; i < lines.length; i++) {\r\n lines[i].render(ctx, i > 0);\r\n }\r\n if (this.__shape.isHovering() && workspace.getHoverShape() === this.__shape ) {\r\n ctx.strokeStyle = COLOR_THEMES[sqftConfig.activeTheme].active_hover;\r\n } else {\r\n ctx.strokeStyle = COLOR_THEMES[sqftConfig.activeTheme].active;\r\n }\r\n ctx.fillStyle = COLOR_THEMES[sqftConfig.activeTheme].active_disabled;\r\n switch (template) {\r\n case RENDER_TEMPLATES.linesOnly:\r\n ctx.lineWidth = 0;\r\n ctx.fill();\r\n ctx.closePath();\r\n break;\r\n case RENDER_TEMPLATES.default:\r\n default:\r\n ctx.fillStyle = isSlabMode ? COLOR_THEMES[sqftConfig.activeTheme].active_disabled : this.__shape.getFillColor();\r\n ctx.lineWidth = 2; // Math.ceil(scale);\r\n ctx.fill();\r\n ctx.closePath();\r\n ctx.stroke();\r\n break;\r\n }\r\n\r\n if (this.__shape.isHovering() && workspace.getHoveredSqftShape() === this.__shape ) {\r\n let sqftMenuState = store.getState().sqftMenuState;\r\n void sqftMenuState;\r\n }\r\n };\r\n\r\n renderFrameBorder = (ctx) => {\r\n ctx.beginPath();\r\n ctx.lineWidth = 2;\r\n\r\n let pointField = getPointField(\r\n this.__cornerPoints[0].modelCorePoint.getPosX(),\r\n this.__cornerPoints[0].modelCorePoint.getPosY(),\r\n this.__shape\r\n );\r\n ctx.moveTo(pointField.x, pointField.y);\r\n\r\n for (const cornerPoint of this.__cornerPoints) {\r\n pointField = getPointField(\r\n cornerPoint.modelCorePoint.getPosX(),\r\n cornerPoint.modelCorePoint.getPosY(),\r\n this.__shape\r\n );\r\n ctx.lineTo(pointField.x, pointField.y);\r\n }\r\n\r\n ctx.strokeStyle = COLOR_THEMES[sqftConfig.activeTheme].active;\r\n ctx.closePath();\r\n ctx.stroke();\r\n }\r\n\r\n renderFramePoints = (ctx) => {\r\n let len = this.__cornerPoints.length;\r\n const cornerPointsPointField = this.getCornerPointsPointField();\r\n for (const index in cornerPointsPointField) {\r\n //cornerPoint.render(ctx);\r\n if (cornerPointsPointField.hasOwnProperty(index)) {\r\n let current = cornerPointsPointField[+index];\r\n let previous = cornerPointsPointField[(+index + len - 1) % len];\r\n let next = cornerPointsPointField[(+index + 1) % len];\r\n\r\n ctx.save();\r\n ctx.beginPath();\r\n // ctx.translate(\r\n // cornerPointsPointField[index].x,\r\n // cornerPointsPointField[index].y,\r\n // );\r\n //ctx.rotate(90 * cornerPointIndex * (Math.PI / 180));\r\n // RenderFigures.drawRotatedArrow(ctx,\r\n // - 20, 0,\r\n // 0, - 20,\r\n // - 20, - 20,\r\n // 10\r\n // )\r\n const from = getPointOnTheLine(current, previous, 20);\r\n const to = getPointOnTheLine(current, next, 20);\r\n const [midPoint, midPoint2] = getParallelPoints(from, current,20);\r\n void midPoint;\r\n RenderFigures.drawRotatedArrow(ctx,\r\n from.x, from.y,\r\n to.x, to.y,\r\n midPoint2.x, midPoint2.y,\r\n 10\r\n )\r\n\r\n //console.log(\"from\", from);\r\n //console.log(\"to\", to);\r\n //debugger // eslint-disable-line no-debugger\r\n ctx.lineWidth = 2;\r\n ctx.strokeStyle = 'rgba(159,197,34,0.47)';\r\n ctx.fillStyle = 'rgba(159,197,34,0.47)';\r\n ctx.stroke();\r\n ctx.closePath();\r\n ctx.restore();\r\n\r\n //RenderFigures.renderCircle(from, 5,1, '#63b141');\r\n //RenderFigures.renderCircle(to, 8,1, '#63b141');\r\n //RenderFigures.renderCircle({x:to.x, y: from.y}, 12,1, '#63b141');\r\n }\r\n }\r\n }\r\n\r\n\r\n // renderLinesBetweenPoints = (ctx) => {\r\n // ctx.beginPath();\r\n // ctx.lineWidth = lineWidth;\r\n // ctx.strokeStyle = color;\r\n // drawLines(ctx);\r\n //\r\n // ctx.stroke();\r\n // };\r\n}\r\n","export default class ChangeValuePopup {\r\n id;\r\n min;\r\n max;\r\n confirmCallback;\r\n increaseCallback;\r\n decreaseCallback;\r\n inputChangeCallback;\r\n value;\r\n position;\r\n\r\n constructor(id, min, max, confirmCallback, increaseCallback, decreaseCallback, inputChangeCallback, value, position) {\r\n this.id = id;\r\n this.min = min;\r\n this.max = max;\r\n this.confirmCallback = confirmCallback;\r\n this.increaseCallback = increaseCallback;\r\n this.decreaseCallback = decreaseCallback;\r\n this.inputChangeCallback = inputChangeCallback;\r\n this.value = value;\r\n this.position = position;\r\n }\r\n}\r\n","import {SQFTResourceController} from \"./SQFTResourceController\";\r\nimport {WORKSPACE_RESOURCES} from \"../../../../constants\";\r\nimport store from \"../../../../../../store\";\r\nimport workspace from \"../../core/workspace\";\r\nimport {LineHandlesModel} from \"../models/LineHandlesModel\";\r\n\r\nexport class HandlesController extends SQFTResourceController {\r\n\r\n constructor(props) {\r\n super(props);\r\n this.resourceName = WORKSPACE_RESOURCES.handles;\r\n }\r\n\r\n generateHandles() {\r\n const reduxState = store.getState();\r\n const selectedPartIds = reduxState.sqftResourceState.selectedPartIds\r\n const shapes = workspace.getShapes();\r\n for (const shape of shapes) {\r\n if (selectedPartIds.includes(shape.partId)) {\r\n this.addHandleToTheShape(shape);\r\n }\r\n }\r\n }\r\n\r\n addHandleToTheShape(shape) {\r\n const reduxState = store.getState();\r\n const selectedFeature = reduxState.sqftResourceState.selectedFeature\r\n const lines = shape.getLines();\r\n for (const lineIndex in lines) {\r\n if (+lineIndex === 2) {\r\n if (lines.hasOwnProperty(lineIndex)) {\r\n lines[lineIndex].setHandleId(selectedFeature.part.dbFeature.id);\r\n const handle3dURL = this.findGLBModel(selectedFeature.part.dbFeature.thirdPartyAR3DUrls, 'V')\r\n lines[lineIndex].setHandle3dURL(handle3dURL);\r\n this.addResource(new LineHandlesModel(lines[lineIndex].id, selectedFeature.part.dbFeature.id));\r\n }\r\n }\r\n }\r\n }\r\n\r\n /**\r\n * Function to find a .glb model in the array based on H or V suffix.\r\n * If the parameter is not passed or no matching model is found, it returns the first .glb model found.\r\n *\r\n * @param {Array} urls - Array of URLs.\r\n * @param {String} [suffix] - Optional. Suffix 'H' or 'V' to search for in the URL.\r\n * @returns {String} - The found .glb model URL or the first .glb model in the array.\r\n */\r\n findGLBModel(urls, suffix) {\r\n if (!urls) {\r\n return null\r\n }\r\n\r\n const glbModels = urls.filter(url => url.endsWith('.glb'));\r\n\r\n if (!glbModels.length) {\r\n return null;\r\n }\r\n\r\n // If suffix is provided (either 'H' or 'V'), search for a model with that suffix\r\n if (suffix) {\r\n const modelWithSuffix = glbModels.find(url => url.endsWith(`-${suffix}.glb`));\r\n if (modelWithSuffix) {\r\n return modelWithSuffix;\r\n }\r\n }\r\n\r\n return glbModels[0];\r\n }\r\n\r\n exportHandles() {\r\n return this.export()\r\n }\r\n}\r\n\r\n","import * as uuid from \"uuid\";\r\nimport {getQtCatName} from \"../../../../helpers/sqftQuotesHelper\";\r\n\r\nexport class LineHandlesModel {\r\n lineId;\r\n id;\r\n featureId;\r\n qtCatName;\r\n\r\n constructor(lineId, handleId, qtCatName = null, id = uuid.v4()) {\r\n this.id = id;\r\n this.lineId = lineId;\r\n this.featureId = handleId;\r\n this.qtCatName = qtCatName ? qtCatName : getQtCatName();\r\n }\r\n}\r\n","import {SQFTResourceController} from \"./SQFTResourceController\";\r\nimport {WORKSPACE_RESOURCES} from \"../../../../constants\";\r\nimport workspace from \"../../core/workspace\";\r\n\r\n\r\nexport class WallsController extends SQFTResourceController {\r\n\r\n constructor(props) {\r\n super(props);\r\n this.resourceName = WORKSPACE_RESOURCES.walls;\r\n }\r\n\r\n getWallByPoint(searchPoint) {\r\n return workspace.walls.find(wall => {\r\n for (const wallPoint of wall.getPoints()) {\r\n if (wallPoint.id === searchPoint.id) {\r\n return wall\r\n }\r\n }\r\n })\r\n }\r\n\r\n}\r\n\r\n","import * as uuid from \"uuid\";\r\nimport {SQFTResourceController} from \"./SQFTResourceController\";\r\nimport {WORKSPACE_RESOURCES} from \"../../../../constants\";\r\nimport {ShapeColorModel} from \"../models/ShapeColor\";\r\nimport {getFeatureNameById} from \"../../../../helpers/featureHelper\";\r\n\r\nexport class ShapeColorsController extends SQFTResourceController {\r\n\r\n defaultColorSets = [\r\n {\r\n id: uuid.v4(),\r\n primary: 'rgba(74, 144, 226, 0.17)',\r\n primary_border: '#4a90e2',\r\n primary_hover: 'rgba(61,115,173,0.33)',\r\n }, {\r\n id: uuid.v4(),\r\n primary: 'rgba(159, 197, 34, 0.17)',\r\n primary_border: '#9fc522',\r\n primary_hover: 'rgba(138,173,30,0.33)',\r\n }, {\r\n id: uuid.v4(),\r\n primary: 'rgba(201, 28, 123, 0.17)',\r\n primary_border: '#c91c7b',\r\n primary_hover: 'rgba(146,20,91, 0.33)',\r\n }, {\r\n id: uuid.v4(),\r\n primary: 'rgba(28, 201, 201, 0.17)',\r\n primary_border: '#1cc9c9',\r\n primary_hover: 'rgba(28, 201, 201, 0.33)',\r\n }, {\r\n id: uuid.v4(),\r\n primary: 'rgba(175, 201, 28, 0.17)',\r\n primary_border: '#afc91c',\r\n primary_hover: 'rgba(175, 201, 28, 0.33)',\r\n }, {\r\n id: uuid.v4(),\r\n primary: 'rgba(201, 158, 28, 0.17)',\r\n primary_border: '#c99e1c',\r\n primary_hover: 'rgba(201, 158, 28,0.33)',\r\n }, {\r\n id: uuid.v4(),\r\n primary: 'rgba(201, 109, 28, 0.17)',\r\n primary_border: '#c96d1c',\r\n primary_hover: 'rgba(201, 109, 28, 0.33)',\r\n }, {\r\n id: uuid.v4(),\r\n primary: 'rgba(28, 201, 146, 0.17)',\r\n primary_border: '#1cc992',\r\n primary_hover: 'rgba(28, 201, 146, 0.33)',\r\n }, {\r\n id: uuid.v4(),\r\n primary: 'rgba(28, 201, 86, 0.17)',\r\n primary_border: '#1cc956',\r\n primary_hover: 'rgba(28, 201, 86, 0.33)',\r\n }, {\r\n id: uuid.v4(),\r\n primary: 'rgba(94, 201, 28, 0.17)',\r\n primary_border: '#5ec91c',\r\n primary_hover: 'rgba(94, 201, 28, 0.33)',\r\n },{\r\n id: uuid.v4(),\r\n primary: 'rgba(169, 28, 201, 0.17)',\r\n primary_border: '#a91cc9',\r\n primary_hover: 'rgba(169, 28, 201, 0.33)',\r\n }, {\r\n id: uuid.v4(),\r\n primary: 'rgba(94, 28, 201, 0.17)',\r\n primary_border: '#5e1cc9',\r\n primary_hover: 'rgba(94, 28, 201,0.33)',\r\n },\r\n ]\r\n\r\n constructor(props) {\r\n super(props);\r\n this.resourceName = WORKSPACE_RESOURCES.shapeColors;\r\n }\r\n\r\n getShapeColorByFeatureId(featureId) {\r\n return this.getResources().find(resource => resource.featureId === featureId);\r\n }\r\n\r\n getOrGenerateNewShapeColorByFeatureId(featureId) {\r\n let colorSet = this.getShapeColorByFeatureId(featureId);\r\n if (!colorSet) {\r\n return this.createShapeColor(featureId);\r\n }\r\n return colorSet;\r\n }\r\n\r\n generateRandomRGB() {\r\n return {\r\n r: Math.floor(Math.random() * 256),\r\n g: Math.floor(Math.random() * 256),\r\n b: Math.floor(Math.random() * 256)\r\n };\r\n }\r\n\r\n darkenColor({r, g, b}, factor = 0.9) {\r\n return {\r\n r: Math.floor(r * factor),\r\n g: Math.floor(g * factor),\r\n b: Math.floor(b * factor)\r\n };\r\n }\r\n\r\n createShapeColor(featureId) {\r\n let colorSet = this.defaultColorSets.find(set => !this.getResourceById(set.id));\r\n if (!colorSet) {\r\n const baseColor = this.generateRandomRGB();\r\n const hoverColor = baseColor//this.darkenColor(baseColor);\r\n\r\n colorSet = {\r\n id: uuid.v4(),\r\n primary: `rgba(${baseColor.r}, ${baseColor.g}, ${baseColor.b}, 0.17)`,\r\n primary_border: `rgb(${baseColor.r}, ${baseColor.g}, ${baseColor.b})`,\r\n primary_hover: `rgb(${hoverColor.r}, ${hoverColor.g}, ${hoverColor.b}, 0.33)`\r\n };\r\n } else {\r\n this.defaultColorSets = this.defaultColorSets.filter(set => set.id !== colorSet.id);\r\n }\r\n\r\n const featureName = getFeatureNameById(featureId);\r\n\r\n const shapeColorModel = new ShapeColorModel(\r\n colorSet.id,\r\n featureId,\r\n featureName,\r\n colorSet.primary,\r\n colorSet.primary_border,\r\n colorSet.primary_hover\r\n );\r\n\r\n this.addResource(shapeColorModel);\r\n\r\n return shapeColorModel\r\n }\r\n}\r\n","export class ShapeColorModel {\r\n id;\r\n featureId;\r\n primary;\r\n primary_border;\r\n primary_hover;\r\n\r\n constructor(id, featureId, featureName, primary, primary_border, primary_hover) {\r\n this.id = id;\r\n this.featureId = featureId;\r\n this.featureName = featureName;\r\n this.primary = primary;\r\n this.primary_border = primary_border;\r\n this.primary_hover = primary_hover;\r\n }\r\n}\r\n","import {SQFTResourceController} from \"../SQFTResourceController\";\r\nimport {\r\n RESOURCE_TYPE,\r\n WATERFALL_OVERLAY_TYPE,\r\n WATERFALL_SHAPES_KEY,\r\n WORKSPACE_RESOURCES\r\n} from \"../../../../../constants\";\r\nimport store from \"../../../../../../../store\";\r\nimport WaterfallOverlay from \"../../../core/shapes/overlays/waterfallOverlay\";\r\nimport {addResource, changeResource, deleteResource} from \"../../../../../../../actions/sqftResourceFunctions\";\r\nimport workspace from \"../../../core/workspace\";\r\nimport {WaterfallSegmentController} from \"./WaterfallSegmentController\";\r\n\r\nexport class WaterfallController extends SQFTResourceController {\r\n\r\n constructor(props) {\r\n super(props);\r\n this.resourceName = WORKSPACE_RESOURCES.waterfall;\r\n this.segmentController = new WaterfallSegmentController(this);\r\n }\r\n\r\n createWaterfallOverlay = (line, waterfallData = null) => {\r\n const reduxState = store.getState();\r\n const waterfallSectionsData = reduxState.sqftResourceState.waterfallSectionsData;\r\n const waterfallOverlay = new WaterfallOverlay(line, waterfallSectionsData.length + 1, waterfallData);\r\n\r\n this.addResource(waterfallOverlay);\r\n this.addWaterfallToStore(waterfallOverlay);\r\n\r\n return waterfallOverlay\r\n }\r\n\r\n createPeninsulaUnderwrapOverlay = (line, waterfallData = null) => {\r\n const reduxState = store.getState();\r\n const waterfallSectionsData = reduxState.sqftResourceState.waterfallSectionsData;\r\n\r\n const sectionIndex = waterfallSectionsData.length + 1;\r\n const waterfallOverlay = new WaterfallOverlay(line, sectionIndex, waterfallData, WATERFALL_OVERLAY_TYPE.peninsulaUnderwrap);\r\n\r\n this.addResource(waterfallOverlay);\r\n this.addWaterfallToStore(waterfallOverlay);\r\n\r\n return waterfallOverlay\r\n }\r\n\r\n getResources = () => {\r\n return workspace[this.resourceName]\r\n }\r\n\r\n getResourceByLineId = (id) => {\r\n return workspace[this.resourceName].find(waterFallOverlay => waterFallOverlay.line.id === id);\r\n }\r\n\r\n getSegmentById = (id) => {\r\n for (const overlay of this.getResources()) {\r\n for (const segment of overlay.getSegments()) {\r\n if (segment.id === id) {\r\n return segment\r\n }\r\n }\r\n }\r\n }\r\n\r\n updateWaterfallLength = (line) => {\r\n if (line.isWithWaterfallToolEdge() || line.isWithPeninsulaUnderwrapEdge()) {\r\n const waterfallOverlay = this.getResourceByLineId(line.id);\r\n for (const waterfallOverlaySegment of waterfallOverlay.getSegments()) {\r\n if (waterfallOverlaySegment.name === WATERFALL_SHAPES_KEY.waterfall) {\r\n waterfallOverlaySegment.length = line.getLineLength();\r\n }\r\n if (waterfallOverlaySegment.name === WATERFALL_SHAPES_KEY.underlayment) {\r\n const nextLine = line.getParent().getNextLine(line);\r\n waterfallOverlaySegment.length = nextLine.getLineLength();\r\n }\r\n }\r\n this.changeWaterfallSectionInStore(waterfallOverlay.exportData());\r\n }\r\n }\r\n\r\n changeWaterfallSectionInStore = (waterfallSectionData) => {\r\n store.dispatch(changeResource(RESOURCE_TYPE.waterfallSectionsData, waterfallSectionData));\r\n }\r\n\r\n addWaterfallToStore = (waterfallOverlay) => {\r\n store.dispatch(addResource(RESOURCE_TYPE.waterfallSectionsData, waterfallOverlay.exportData()));\r\n }\r\n\r\n destroy = (waterfallOverlay) => {\r\n store.dispatch(deleteResource(RESOURCE_TYPE.waterfallSectionsData, waterfallOverlay.id));\r\n this.destroyResource(waterfallOverlay);\r\n }\r\n}\r\n","import uuid from \"uuid\";\r\nimport EventManager from \"../../../store/sqftEventManager\";\r\nimport WaterfallSegment from \"../shapeParts/models/waterfallSegment\";\r\nimport {WATERFALL_OVERLAY_TYPE, WATERFALL_SHAPES_KEY, WATERFALL_SHAPES_NAME} from \"../../../../../constants\";\r\nimport config from \"../../../store/sqftConfig\";\r\nimport {isWesternHemisphere} from \"../../../helpers/lineHelper\";\r\n\r\nexport default class WaterfallOverlay {\r\n id;\r\n sectionIndex;\r\n line;\r\n type; // WATERFALL_OVERLAY_TYPE\r\n state = {\r\n };\r\n design = {\r\n };\r\n segments = []; // array of WaterfallSegments\r\n\r\n constructor(line, sectionIndex, importData, type = WATERFALL_OVERLAY_TYPE.waterfall) {\r\n this.line = line;\r\n this.sectionIndex = sectionIndex;\r\n this.id = uuid();\r\n this.type = type;\r\n if (importData) {\r\n this.importData(importData)\r\n } else {\r\n switch (type) {\r\n case WATERFALL_OVERLAY_TYPE.peninsulaUnderwrap:\r\n this.createPeninsulaUnderwrapSections();\r\n break;\r\n case WATERFALL_OVERLAY_TYPE.waterfall:\r\n default:\r\n this.createWaterfallSections();\r\n break;\r\n }\r\n }\r\n }\r\n\r\n getSegments = () => { return this.segments; }\r\n getEnabledSegments = () => { return this.segments.filter(segment => !segment.isDisabled) }\r\n getParent = () => { return this.line; }\r\n setSegments = (value) => { this.segments = value; }\r\n addSegment = (segment) => { this.segments.push(segment); }\r\n\r\n destroy = (protect) => {\r\n if (!protect) {\r\n EventManager.removeEvent(this);\r\n this.segments.forEach((segment) => {\r\n segment.destroy();\r\n });\r\n }\r\n };\r\n\r\n initEvents = () => {\r\n };\r\n\r\n deregisterEvents = () => {\r\n EventManager.removeEvent(this);\r\n };\r\n\r\n reInitEvents = () => {\r\n this.initEvents();\r\n };\r\n\r\n export = () => {\r\n return this.exportData();\r\n }\r\n\r\n exportData = () => {\r\n return {\r\n id: this.id,\r\n lineId: this.line.id,\r\n state: this.state,\r\n type: this.type,\r\n segments: this.segments.map((segment) => {\r\n return segment.exportData()\r\n }),\r\n }\r\n };\r\n\r\n importData = (importData) => {\r\n this.state = importData.state;\r\n for (const segmentData of importData.segments) {\r\n this.addSegment(new WaterfallSegment(\r\n segmentData.key,\r\n segmentData.name,\r\n segmentData.length,\r\n segmentData.height,\r\n segmentData.thickness,\r\n this,\r\n segmentData.isDisabled\r\n ));\r\n }\r\n };\r\n\r\n createWaterfallSections = () => {\r\n const nextLine = this.line.getParent().getNextLine(this.line);\r\n const thickness = config.measureUnit === \"Imperial\" ? 1.5 : 40;\r\n const height = config.measureUnit === \"Imperial\" ? 36 : 900;\r\n const waterfallLength = config.measureUnit === \"Imperial\" ? this.line.getLineLength() : this.line.getLineLengthMm();\r\n const underlaymentLength = config.measureUnit === \"Imperial\" ? nextLine.getLineLength() : nextLine.getLineLengthMm();\r\n\r\n //place mirror shape in the slab mode\r\n const lineDirection = this.line.getLineDirectionV2();\r\n const isLineInWesternHemisphere = isWesternHemisphere(lineDirection) ;\r\n const defaultCabinetReturnLength = config.measureUnit === \"Imperial\" ? 4 : 60;\r\n const defaultOverhangReturnLength = config.measureUnit === \"Imperial\" ? 20 : 300;\r\n const cabinetReturnLength = isLineInWesternHemisphere ? defaultCabinetReturnLength : defaultOverhangReturnLength;\r\n const overhangReturnLength = isLineInWesternHemisphere ? defaultOverhangReturnLength : defaultCabinetReturnLength;\r\n\r\n const segments = [\r\n new WaterfallSegment(WATERFALL_SHAPES_KEY.waterfall, WATERFALL_SHAPES_NAME.waterfall, waterfallLength, height, thickness, this),\r\n new WaterfallSegment(WATERFALL_SHAPES_KEY.cabinetReturn, WATERFALL_SHAPES_NAME.cabinetReturn, cabinetReturnLength, height, thickness, this, true),\r\n new WaterfallSegment(WATERFALL_SHAPES_KEY.overhangReturn, WATERFALL_SHAPES_NAME.overhangReturn,overhangReturnLength, height, thickness, this, true),\r\n new WaterfallSegment(WATERFALL_SHAPES_KEY.underlayment, WATERFALL_SHAPES_NAME.underlayment, underlaymentLength, height, thickness, this, true),\r\n ];\r\n this.setSegments(segments);\r\n }\r\n\r\n createPeninsulaUnderwrapSections = () => {\r\n const segments = [\r\n new WaterfallSegment(WATERFALL_SHAPES_KEY.peninsulaUnderwrap, WATERFALL_SHAPES_NAME.peninsulaUnderwrap, this.line.getLineLength(), 36, 1.5, this, false),\r\n ];\r\n this.setSegments(segments);\r\n }\r\n\r\n getArea = () => {\r\n return this.segments.reduce((sum, segment) => sum + segment.getArea(), 0)\r\n }\r\n}\r\n","import { v4 as uuidv4 } from 'uuid';\r\nimport {WATERFALL_SHAPES_KEY} from \"../../../../../../constants\";\r\n\r\nexport default class WaterfallSegment {\r\n id;\r\n key; /* string */\r\n name; /* string */\r\n length; /* int */\r\n height; /* int */\r\n thickness; /* int */\r\n parentSection; /* object */\r\n isDisabled; /* bool */\r\n COMMON_HEIGHT = [\r\n // WATERFALL_SHAPES_KEY.waterfall,\r\n // WATERFALL_SHAPES_KEY.cabinetReturn,\r\n // WATERFALL_SHAPES_KEY.overhangReturn,\r\n ];\r\n USE_DEPTH_INSTEAD_OF_HEIGHT = [\r\n WATERFALL_SHAPES_KEY.underlayment,\r\n WATERFALL_SHAPES_KEY.peninsulaUnderwrap\r\n ];\r\n USE_LINE_LENGTH = [\r\n WATERFALL_SHAPES_KEY.underlayment,\r\n WATERFALL_SHAPES_KEY.waterfall\r\n ];\r\n\r\n constructor(key, name, length, height, thickness, parentSection, isDisabled = false) {\r\n this.id = uuidv4();\r\n this.key = key;\r\n this.name = name;\r\n this.length = length;\r\n this.height = height;\r\n this.thickness = thickness;\r\n this.parentSection = parentSection;\r\n this.isDisabled = isDisabled;\r\n }\r\n\r\n exportData = () => ({\r\n id: this.id,\r\n overlayId: this.getParent().id,\r\n key: this.key,\r\n name: this.name,\r\n height: this.height,\r\n thickness: this.thickness,\r\n length: this.length,\r\n isDisabled: this.isDisabled,\r\n })\r\n\r\n setIsDisabled = (value) => {\r\n this.isDisabled = value\r\n }\r\n\r\n getParent = () => {\r\n return this.parentSection\r\n }\r\n\r\n getArea = () => {\r\n if (this.isDisabled) {\r\n return 0\r\n }\r\n\r\n let area = 0;\r\n\r\n // this will add mitered edge area\r\n if (this.key === WATERFALL_SHAPES_KEY.overhangReturn) {\r\n area += this.height * this.thickness\r\n } else if (this.key === WATERFALL_SHAPES_KEY.waterfall) {\r\n area += (this.height * this.thickness) * 2 //we have two mitered edges from sides\r\n } else if (this.key === WATERFALL_SHAPES_KEY.cabinetReturn) {\r\n area += this.height * this.thickness\r\n }\r\n\r\n // shape area\r\n area += this.height * this.length\r\n\r\n return area\r\n }\r\n\r\n destroy = () => {\r\n\r\n }\r\n}\r\n","import {WATERFALL_SHAPES_KEY} from \"../../../../../constants\";\r\nimport SqftStore from \"../../sqftStore\";\r\nimport SlabWorkspace from \"../../../core/slab/slabWorkspace\";\r\nimport {createSlabModeWaterfallShapes} from \"../../canvasHelper\";\r\n\r\nexport class WaterfallSegmentController {\r\n\r\n constructor(parentController) {\r\n this.parentController = parentController;\r\n }\r\n\r\n updateWaterfallLength = (line) => {\r\n if (!line.isWithWaterfallToolEdge() || !line.isWithPeninsulaUnderwrapEdge()) {\r\n return\r\n }\r\n const waterfallOverlay = this.parentController.getResourceByLineId(line.id);\r\n for (const waterfallOverlaySegment of waterfallOverlay.getSegments()) {\r\n if (waterfallOverlaySegment.name === WATERFALL_SHAPES_KEY.waterfall\r\n || waterfallOverlaySegment.name === WATERFALL_SHAPES_KEY.underlayment\r\n ) {\r\n waterfallOverlaySegment.length = line.getLineLength();\r\n }\r\n }\r\n this.parentController.changeWaterfallSectionInStore(waterfallOverlay.exportData());\r\n }\r\n\r\n changeSegmentLength = (segmentId, newValue) => {\r\n const segment = this.parentController.getSegmentById(segmentId);\r\n const waterfallOverlay = segment.getParent();\r\n segment.length = +newValue\r\n\r\n this.parentController.changeWaterfallSectionInStore(waterfallOverlay.exportData());\r\n this.postChangeValue(waterfallOverlay.id);\r\n }\r\n\r\n changeSegmentHeight = (segmentId, newValue) => {\r\n const updatedSegment = this.parentController.getSegmentById(segmentId);\r\n const waterfallOverlay = updatedSegment.getParent();\r\n\r\n if (updatedSegment.COMMON_HEIGHT.includes(updatedSegment.name)) {\r\n for (const waterfallOverlaySegment of waterfallOverlay.getSegments()) {\r\n if (waterfallOverlaySegment.COMMON_HEIGHT.includes(waterfallOverlaySegment.name)) {\r\n waterfallOverlaySegment.height = +newValue;\r\n }\r\n }\r\n } else {\r\n updatedSegment.height = +newValue;\r\n }\r\n\r\n this.parentController.changeWaterfallSectionInStore(waterfallOverlay.exportData());\r\n this.postChangeValue(waterfallOverlay.id);\r\n }\r\n\r\n changeSegmentThickness = (segmentId, newValue) => {\r\n const segment = this.parentController.getSegmentById(segmentId);\r\n const waterfallOverlay = segment.getParent();\r\n segment.thickness = +newValue\r\n\r\n this.parentController.changeWaterfallSectionInStore(waterfallOverlay.exportData());\r\n this.postChangeValue(waterfallOverlay.id);\r\n }\r\n\r\n changeSegmentIsDisabled = (segmentId, newValue) => {\r\n const waterfallSegment = this.parentController.getSegmentById(segmentId);\r\n const waterfallOverlay = waterfallSegment.getParent();\r\n waterfallSegment.setIsDisabled(newValue);\r\n\r\n this.parentController.changeWaterfallSectionInStore(waterfallOverlay.exportData());\r\n this.postChangeValue(waterfallOverlay.id);\r\n }\r\n\r\n postChangeValue = (overlayId) => {\r\n // remove all slab shapes\r\n const overlay = this.parentController.getResourceById(overlayId);\r\n SlabWorkspace.slabAdditionalShapes.removeActiveBacksplashByLine(overlay.line);\r\n\r\n //reCreate Slab Shapes\r\n createSlabModeWaterfallShapes();\r\n\r\n // update calculations\r\n SqftStore.updateCalculations();\r\n }\r\n\r\n}\r\n","import {SQFTResourceController} from \"./SQFTResourceController\";\r\nimport {WORKSPACE_RESOURCES} from \"../../../../constants\";\r\n\r\nexport class RemovedFeaturesController extends SQFTResourceController {\r\n\r\n constructor(props) {\r\n super(props);\r\n this.resourceName = WORKSPACE_RESOURCES.walls;\r\n }\r\n\r\n}\r\n\r\n","import sqftShapeManager from \"../sqftShapeManager\";\r\nimport workspace from \"../../core/workspace\";\r\nimport {WORKSPACE_RESOURCES} from \"../../../../constants\";\r\nimport {SQFTResourceController} from \"./SQFTResourceController\";\r\nimport ShapeHelper from \"../../../../helpers/shapeHelper\";\r\nimport workspaceControllers from \"../workspaceControllers\";\r\nimport store from \"../../../../../../store\";\r\nimport sqftShape from \"../../core/shapes/sqftShape\";\r\nimport MovableImage from \"../../core/shapes/movableImage\";\r\n//import sqftShapeIntersectionsManager from \"../sqftShapeIntersectionsManager\";\r\n\r\nexport class SnappedShapeGroupsController extends SQFTResourceController {\r\n //snappedShapeGroups = [];\r\n\r\n constructor(props) {\r\n super(props);\r\n this.resourceName = WORKSPACE_RESOURCES.snappedShapeGroups;\r\n }\r\n\r\n addNewSnappedShapeGroupNumber = () => {\r\n const snappedShapeGroups = this.getResources();\r\n const newNumber = snappedShapeGroups.length > 0\r\n ? snappedShapeGroups[snappedShapeGroups.length - 1] + 1\r\n : 0;\r\n this.addResource(newNumber);\r\n\r\n return newNumber\r\n }\r\n\r\n setSameSnappedShapesGroup = (snappedShape, snappedWithShape) => {\r\n const snappedShapeGroup = snappedShape.shapeAbsolute.getSnappedShapeGroup();\r\n const snappedWithShapeGroup = snappedWithShape.shapeAbsolute.getSnappedShapeGroup();\r\n if (snappedWithShapeGroup !== null) {\r\n snappedShape.shapeAbsolute.setSnappedShapeGroup(snappedWithShapeGroup);\r\n } else if (snappedShapeGroup !== null) {\r\n snappedWithShape.shapeAbsolute.setSnappedShapeGroup(snappedShapeGroup);\r\n } else {\r\n const groupNumber = this.addNewSnappedShapeGroupNumber();\r\n snappedShape.shapeAbsolute.setSnappedShapeGroup(groupNumber);\r\n snappedWithShape.shapeAbsolute.setSnappedShapeGroup(groupNumber);\r\n }\r\n }\r\n\r\n // isShapeGroupConsistsOfOnlyCabinetShapes = (snappedShapeGroup) => {\r\n // const shapes = this.getSnappedShapes(snappedShapeGroup);\r\n // return !shapes.some(shape => shape.shapeCabinet === null);\r\n // }\r\n\r\n getMeasurementPoints = (snappedShapeGroup) => {\r\n const shapes = this.getSnappedShapes(snappedShapeGroup);\r\n if (shapes.length > 0) {\r\n let shapesPoints = [];\r\n shapes.forEach(shp => {\r\n shapesPoints.push(...shp.getPointsPointField());\r\n });\r\n let pointsMinMax = sqftShapeManager.getMinMaxPoints(shapesPoints, false);\r\n\r\n //console.log(\"shapesMinMax\", pointsMinMax);\r\n\r\n return [\r\n {x: pointsMinMax.minX, y: pointsMinMax.minY},\r\n {x: pointsMinMax.maxX, y: pointsMinMax.minY},\r\n {x: pointsMinMax.maxX, y: pointsMinMax.maxY},\r\n {x: pointsMinMax.minX, y: pointsMinMax.maxY}\r\n ];\r\n }\r\n return []\r\n }\r\n\r\n getSnappedShapes = (snappedShapeGroup) => {\r\n const shapes = workspace.getShapes(true);\r\n return shapes.filter(shp => {\r\n return !!(shp.shapeAbsolute && (shp.shapeAbsolute.getSnappedShapeGroup() === snappedShapeGroup))\r\n || !!(shp.shapeSlab && shp.shapeSlab.shapeAbsolute && (shp.shapeSlab.shapeAbsolute.getSnappedShapeGroup() === snappedShapeGroup))\r\n })\r\n }\r\n\r\n // Updates the groups of snapped shapes in the workspace\r\n updateShapesSnappedGroups = (shouldUpdateAbsolutePos = false) => {\r\n // Sort shapes by their position\r\n const shapes = workspace.getShapes(true)\r\n .filter(shp => shp instanceof MovableImage || shp instanceof sqftShape)\r\n .sort((a, b) => {\r\n let aPos = a.getPosition();\r\n let bPos = b.getPosition();\r\n return aPos.x - bPos.x || aPos.y - bPos.y;\r\n });\r\n //const shapesPosition = shapes.map(shp => {return {id: shp.id, ...shp.getPosition()}});\r\n //sqftShapeIntersectionsManager.logSnappedShapeGroups();\r\n //console.log(\"shapesPosition\", shapesPosition);\r\n const visitedShapes = new Set(); // To keep track of already processed shapes\r\n\r\n this.resetShapesSnappedGroups();\r\n\r\n for (const shape of shapes) {\r\n if ((shape instanceof sqftShape || shape instanceof MovableImage) && !visitedShapes.has(shape)) {\r\n this.updateGroupForShapeAndConnected(shape, visitedShapes, shouldUpdateAbsolutePos);\r\n }\r\n }\r\n\r\n //sqftShapeIntersectionsManager.logSnappedShapeGroups();\r\n }\r\n\r\n // Updates the groups of snapped shapes in the workspace\r\n resetShapesSnappedGroups = () => {\r\n const isShowSlabTool = store.getState().sqftSlabState.isShowSlabTool;\r\n const shapes = workspace.getShapes(true);\r\n\r\n for (const shape of shapes) {\r\n if (shape instanceof sqftShape) {\r\n const shapeAbsolute = isShowSlabTool ? shape.shapeSlab.shapeAbsolute : shape.shapeAbsolute;\r\n this.resetShapeSnappedGroup(shapeAbsolute);\r\n } else if (shape instanceof MovableImage) {\r\n this.resetShapeSnappedGroup(shape.shapeAbsolute);\r\n }\r\n }\r\n }\r\n\r\n // Updates the groups of snapped shapes in the workspace\r\n resetShapeSnappedGroup = (shapeAbsolute) => {\r\n shapeAbsolute.setSnappedWithShape(null);\r\n shapeAbsolute.setSnappedShapeGroup(null);\r\n }\r\n\r\n // Recursive function to update groups for a shape and all connected shapes\r\n updateGroupForShapeAndConnected = (shape, visitedShapes, shouldUpdateAbsolutePos) => {\r\n visitedShapes.add(shape);\r\n const connectedShapes = this.updateShapeSnappedGroup(shape, shouldUpdateAbsolutePos); // Update group for the current shape\r\n\r\n //console.log(\"shape id\", shape.id);\r\n //console.log(\"shape shapeSlab.shapeAbsolute.getSnappedShapeGroup()\", shape.shapeSlab.shapeAbsolute.getSnappedShapeGroup());\r\n // if (connectedShapes[0]) {\r\n // console.log(\"connectedShapes 0 id\", connectedShapes[0].id);\r\n // console.log(\"shape shapeSlab.shapeAbsolute.getSnappedShapeGroup()\", connectedShapes[0].shapeSlab.shapeAbsolute.getSnappedShapeGroup());\r\n // }\r\n // if (connectedShapes[1]) {\r\n // console.log(\"connectedShapes 1 id\", connectedShapes[1].id);\r\n // console.log(\"shape shapeSlab.shapeAbsolute.getSnappedShapeGroup()\", connectedShapes[1].shapeSlab.shapeAbsolute.getSnappedShapeGroup());\r\n // }\r\n //debugger // eslint-disable-line no-debugger\r\n\r\n // Retrieve connected shapes (this logic might vary based on your application)\r\n //const connectedShapes = ShapeHelper.getConnectedShapes(shape);\r\n\r\n for (const connectedShape of connectedShapes) {\r\n if (!visitedShapes.has(connectedShape)) {\r\n this.updateGroupForShapeAndConnected(connectedShape, visitedShapes);\r\n }\r\n }\r\n }\r\n\r\n /**\r\n * Update absolute shape position in regular or in slab mode. Also updates snapped shape group.\r\n * @param shape\r\n * @param shouldUpdateAbsolutePos\r\n * @return {*[]}\r\n */\r\n updateShapeSnappedGroup = (shape, shouldUpdateAbsolutePos) => {\r\n let isShowSlabTool = store.getState().sqftSlabState.isShowSlabTool;\r\n let snapPossibilitiesToShapes = [];\r\n let snapPossibilitiesToImages = [];\r\n let snapPossibilitiesToWalls = [];\r\n let shapeAbsolute;\r\n let pos;\r\n\r\n if (shape instanceof sqftShape) {\r\n shapeAbsolute = isShowSlabTool ? shape.shapeSlab.shapeAbsolute : shape.shapeAbsolute;\r\n pos = isShowSlabTool ? shape.slabPos : shape.pos;\r\n } else if (shape instanceof MovableImage) {\r\n shapeAbsolute = shape.shapeAbsolute;\r\n pos = shape.pos;\r\n }\r\n\r\n if (shouldUpdateAbsolutePos) {\r\n shapeAbsolute.setAbsolutePos(null); //reset minLength for correct calculations without stacking\r\n }\r\n // shapeAbsolute.setSnappedWithShape(null);\r\n // shapeAbsolute.setSnappedShapeGroup(null);\r\n\r\n let distancesToWalls = ShapeHelper.getDistancesToWalls(shape);\r\n let distancesToShapes = ShapeHelper.getDistancesToShapes(shape);\r\n let distancesToImages = ShapeHelper.getDistancesToImages(shape);\r\n //console.log(\"distancesToWalls\", distancesToWalls);\r\n //console.log(\"distancesToShapes\", distancesToShapes);\r\n //console.log(\"distancesToImages\", distancesToImages);\r\n\r\n const itemBoundsWithSamePartId = ShapeHelper.getItemBoundsForTheSamePartIdIfExist(distancesToShapes, shape.partId);\r\n snapPossibilitiesToShapes = ShapeHelper.getSnappingPossibilities(itemBoundsWithSamePartId);\r\n if (snapPossibilitiesToShapes.length === 0) {\r\n snapPossibilitiesToShapes = ShapeHelper.getSnappingPossibilities(distancesToShapes);\r\n }\r\n //console.log(\"snapPossibilitiesToShapes\", snapPossibilitiesToShapes);\r\n snapPossibilitiesToImages = ShapeHelper.getSnappingPossibilities(distancesToImages);\r\n snapPossibilitiesToWalls = ShapeHelper.getSnappingPossibilities(distancesToWalls);\r\n //console.log(\"snapPossibilitiesToShapes\", snapPossibilitiesToShapes);\r\n\r\n //walls\r\n let [absolutePosToWalls, snappedWithWalls] = ShapeHelper.getAbsolutePosFromSnapPossibilities(snapPossibilitiesToWalls, pos);\r\n if (absolutePosToWalls) {\r\n if (shouldUpdateAbsolutePos) {\r\n shapeAbsolute.setAbsolutePos(absolutePosToWalls);\r\n }\r\n void snappedWithWalls;\r\n //snappedWithImage.shapeAbsolute.setSnappedWithImage(this);\r\n }\r\n\r\n //shapes\r\n let [absolutePosToShapes, snappedWithShape] = ShapeHelper.getAbsolutePosFromSnapPossibilities(snapPossibilitiesToShapes, pos);\r\n if (absolutePosToShapes) {\r\n if (shouldUpdateAbsolutePos) {\r\n shapeAbsolute.setAbsolutePos(absolutePosToShapes);\r\n }\r\n if (isShowSlabTool) {\r\n if (snappedWithShape.shapeSlab && snappedWithShape.shapeSlab.shapeAbsolute) {\r\n snappedWithShape.shapeSlab.shapeAbsolute.setSnappedWithShape(shape.shapeSlab);\r\n }\r\n if (shape.shapeSlab && shape.shapeSlab.shapeAbsolute) {\r\n shape.shapeSlab.shapeAbsolute.setSnappedWithShape(snappedWithShape);\r\n }\r\n } else {\r\n snappedWithShape.shapeAbsolute.setSnappedWithShape(shape);\r\n shape.shapeAbsolute.setSnappedWithShape(snappedWithShape);\r\n }\r\n\r\n // set same snapped shape group for all shapes\r\n const snappedShape = isShowSlabTool && shape.shapeSlab ? shape.shapeSlab : shape;\r\n const snappedShapeIds = Object.keys(distancesToShapes);\r\n for (const shapeId of snappedShapeIds) {\r\n const snappedShapeFromAllPossibilities = workspace.getShapeById(parseInt(shapeId));\r\n const shapeSlab = snappedShapeFromAllPossibilities.shapeSlab\r\n snappedWithShape = isShowSlabTool && shapeSlab ? shapeSlab : snappedShapeFromAllPossibilities;\r\n workspaceControllers.snappedShapeGroups.setSameSnappedShapesGroup(snappedShape, snappedWithShape);\r\n }\r\n }\r\n\r\n //images\r\n let [absolutePosToImages, snappedWithImage] = ShapeHelper.getAbsolutePosFromSnapPossibilities(snapPossibilitiesToImages, pos);\r\n if (absolutePosToImages) {\r\n if (shouldUpdateAbsolutePos) {\r\n shapeAbsolute.setAbsolutePos(absolutePosToImages);\r\n }\r\n void snappedWithImage;\r\n //snappedWithImage.shapeAbsolute.setSnappedWithImage(this);\r\n }\r\n\r\n //allSnappedPossibilities\r\n return [\r\n ...snapPossibilitiesToShapes.map(snapPossibility => snapPossibility.shape),\r\n ...snapPossibilitiesToImages.map(snapPossibility => snapPossibility.shape)\r\n ];\r\n }\r\n}\r\n","import {SQFTResourceController} from \"./SQFTResourceController\";\r\nimport {WORKSPACE_RESOURCES} from \"../../../../constants\";\r\n\r\nexport class SelectedShapesController extends SQFTResourceController {\r\n\r\n constructor(props) {\r\n super(props);\r\n this.resourceName = WORKSPACE_RESOURCES.selectedShapes;\r\n }\r\n\r\n addShapeToSelection = (shape) => {\r\n this.addResource(shape);\r\n };\r\n\r\n removeShapeFromSelection = (shape) => {\r\n this.removeResource(shape);\r\n };\r\n\r\n clearSelection = () => {\r\n this.removeAllResources();\r\n };\r\n\r\n isShapeSelected = (shape) => {\r\n return this.getResources().includes(shape);\r\n };\r\n\r\n render = (ctx) => {\r\n void ctx\r\n // for (const ctx1 of ctx) {\r\n //\r\n // }\r\n\r\n }\r\n}\r\n\r\n","import {SQFTResourceController} from \"./SQFTResourceController\";\r\nimport {WORKSPACE_RESOURCES} from \"../../../../constants\";\r\n\r\nexport class Images3dController extends SQFTResourceController {\r\n\r\n constructor(props) {\r\n super(props);\r\n this.resourceName = WORKSPACE_RESOURCES.images3d;\r\n }\r\n}\r\n\r\n","import {getDistanceFromPointToLine} from \"./sqftHelper\";\r\nimport {getAngleBetween3Points} from \"./shapeHelper\";\r\n\r\nexport default class FitSize {\r\n\r\n shape;\r\n line;\r\n nextLine;\r\n prevLine;\r\n outlineDistance = 0;\r\n\r\n constructor(line) {\r\n this.line = line;\r\n this.shape = line.getParent();\r\n this.nextLine = this.shape.getNextLine(line);\r\n this.prevLine = this.shape.getPrevLine(line);\r\n }\r\n\r\n isFitSize = (additionalLength) => {\r\n return [\r\n this.isFitLineLength(additionalLength),\r\n this.isFitSiblingLineCorner(additionalLength),\r\n this.isFitBumpout(additionalLength),\r\n this.isFitPontDistancesToCornerLine(additionalLength),\r\n this.isFitByAngleBetweenLines(additionalLength)\r\n ]\r\n .every(isFit => isFit)\r\n };\r\n\r\n isFitPontDistancesToCornerLine = (additionalLength) => {\r\n const prevPointToCurrentLineLength = getDistanceFromPointToLine(\r\n this.prevLine.from.x,\r\n this.prevLine.from.y,\r\n this.line.from.x,\r\n this.line.from.y,\r\n this.line.to.x,\r\n this.line.to.y,\r\n )\r\n const nextPointToCurrentLineLength = getDistanceFromPointToLine(\r\n this.line.to.x,\r\n this.line.to.y,\r\n this.prevLine.from.x,\r\n this.prevLine.from.y,\r\n this.prevLine.to.x,\r\n this.prevLine.to.y,\r\n )\r\n\r\n return [prevPointToCurrentLineLength, nextPointToCurrentLineLength].every((lineLength) => {\r\n return additionalLength + this.outlineDistance <= lineLength\r\n })\r\n }\r\n\r\n isFitLineLength = (additionalLength) => {\r\n return [this.line.getLineLength(), this.prevLine.getLineLength()].every((lineLength) => {\r\n return additionalLength <= lineLength\r\n })\r\n };\r\n\r\n isFitSiblingLineCorner = (additionalLength) => {\r\n let siblingCornerLength = 0;\r\n let cornerTotalLength = 0;\r\n\r\n if (this.nextLine.from.arcLength > 0 || this.nextLine.from.angle > 0) {\r\n siblingCornerLength = this.nextLine.from.getArcLength() || this.nextLine.from.getAngle();\r\n cornerTotalLength = +siblingCornerLength + +additionalLength;\r\n if(cornerTotalLength >= this.line.getLineLength()) {\r\n return false\r\n }\r\n }\r\n if (this.prevLine.from.arcLength > 0 || this.prevLine.from.angle > 0) {\r\n siblingCornerLength = this.prevLine.from.getArcLength() || this.prevLine.from.getAngle();\r\n cornerTotalLength = +siblingCornerLength + +additionalLength;\r\n if(cornerTotalLength >= this.prevLine.getLineLength() ) {\r\n return false\r\n }\r\n }\r\n\r\n return true\r\n };\r\n\r\n isFitBumpout = (additionalLength) => {\r\n if(this.line.isWithBumpout()){\r\n let bumpoutTextParameters = this.line.bumpoutOverlay.getBumpoutTextParameter();\r\n\r\n if(additionalLength >= bumpoutTextParameters.length4to.pointsDistance) {\r\n return false\r\n }\r\n } else if(this.prevLine.isWithBumpout()){\r\n let bumpoutTextParameters = this.prevLine.bumpoutOverlay.getBumpoutTextParameter();\r\n\r\n if(additionalLength >= bumpoutTextParameters.length4to.pointsDistance) {\r\n return false\r\n }\r\n }\r\n\r\n return true\r\n };\r\n\r\n isFitByAngleBetweenLines = (radius) => {\r\n const angle = getAngleBetween3Points(\r\n this.prevLine.from, this.line.from, this.line.to\r\n );\r\n\r\n // d = r/tan(α/2)\r\n const minDistanceNeeded = radius / Math.tan((angle / 2) * (Math.PI / 180));\r\n\r\n const prevLineLength = this.prevLine.getLineLength();\r\n const lineLength = this.line.getLineLength();\r\n\r\n return prevLineLength >= minDistanceNeeded && lineLength >= minDistanceNeeded;\r\n };\r\n}\r\n","import cloneDeep from \"lodash/cloneDeep\";\r\nimport uuid from \"uuid\";\r\n\r\nimport EventManager from \"../../../store/sqftEventManager\";\r\nimport {pnpolyArray} from \"../../../../../lib/pnpoly\";\r\nimport resizeLine, {getMaxResizeWidth} from \"./resizeLine\";\r\nimport config from \"../../../store/sqftConfig\";\r\nimport {\r\n getPointDistance,\r\n orientation,\r\n measureDistanceToInches,\r\n distanceToMillimeters,\r\n distanceToInches,\r\n getFontsize,\r\n get45CornerLegDistanceByHypotenuse,\r\n getAngleBetweenTwoPoints,\r\n getParallelPoints,\r\n getPointField,\r\n rotatePoint,\r\n mmToInches,\r\n} from \"../../../../../helpers/sqftHelper\";\r\nimport COLOR_THEMES, {COLOR} from \"../../../store/colorThemes\";\r\nimport store from \"../../../../../../../store\";\r\nimport {updateSQFTCalculations} from \"../../../../../../../actions/sqftFunctions\";\r\nimport sqftConfig from \"../../../store/sqftConfig\";\r\nimport Config from \"../../../../../../../config\";\r\nimport RenderFigures from \"../../../helpers/renderFigures\";\r\nimport {updateMiteredLength, updateShapeWaterfallLength, updateUnderlaymentLength} from \"../../../helpers/lineHelper\";\r\nimport workspace from \"../../workspace\";\r\nimport {createAdjustableInput} from \"../../../../../helpers/uiHelper\";\r\nimport {MEASURE_UNITS} from \"../../../../../constants\";\r\n\r\nexport default function() {\r\n var self = this,\r\n state = {\r\n isHovered: false,\r\n isEditInputDisplayed: false,\r\n hoveredColor: \"#FF9844\",\r\n textWidth: 0,\r\n withBumpout: false,\r\n midPoint: {\r\n x: 0,\r\n y: 0,\r\n xOffset: 0,\r\n yOffset: 0\r\n },\r\n originalLineText: '',\r\n lineTextResized: '',\r\n lineText: '',\r\n },\r\n line = null,\r\n lineType = 'edge', // by default\r\n lineTextColor = COLOR_THEMES[config.activeTheme].primary;\r\n this.id = uuid();\r\n this.isInited = false;\r\n this.design = {\r\n offsetFromLineEnd: 15\r\n }\r\n\r\n function setLine(value) { line = value; }\r\n this.getLine = () => { return line; }\r\n function getMidPoint(from, to) {\r\n return {\r\n x: from.x + (to.x - from.x)/2,\r\n y: from.y + (to.y - from.y)/2\r\n };\r\n }\r\n\r\n const isMouseOverText = (mousePos) => {\r\n const lineDirection = line.getLineDirection();\r\n const pointsArray = this.getHoveredArea();\r\n\r\n return {isHovered: pnpolyArray(pointsArray, mousePos), orientation: lineDirection.orientation};\r\n }\r\n\r\n this.getHoveredArea = () => {\r\n const lineDirection = line.getLineDirection();\r\n let pointsArray = [];\r\n //console.log(\"lineDirection.orientation\", lineDirection.orientation);\r\n switch (lineDirection.orientation) {\r\n case \"vertical\":\r\n if (lineDirection.newDirection === \"south\") {\r\n pointsArray = [\r\n [state.midPoint.x + 40, state.midPoint.y - state.textWidth / 2 - 10],\r\n [state.midPoint.x + 15, state.midPoint.y - state.textWidth / 2 - 10],\r\n [state.midPoint.x + 15, state.midPoint.y + state.textWidth / 2 - 5],\r\n [state.midPoint.x + 40, state.midPoint.y + state.textWidth / 2 - 5],\r\n ];\r\n } else if (lineDirection.newDirection === \"north\") {\r\n pointsArray = [\r\n [state.midPoint.x - 40, state.midPoint.y - state.textWidth / 2 - 10],\r\n [state.midPoint.x - 15, state.midPoint.y - state.textWidth / 2 - 10],\r\n [state.midPoint.x - 15, state.midPoint.y + state.textWidth / 2 - 5],\r\n [state.midPoint.x - 40, state.midPoint.y + state.textWidth / 2 - 5],\r\n ];\r\n }\r\n break;\r\n case \"horizontal\": {\r\n pointsArray = [\r\n [state.midPoint.x - state.textWidth / 2 - 10, state.midPoint.y - 15],\r\n [state.midPoint.x + state.textWidth / 2 + 10, state.midPoint.y - 15],\r\n [state.midPoint.x + state.textWidth / 2 + 10, state.midPoint.y + 10],\r\n [state.midPoint.x - state.textWidth / 2 - 10, state.midPoint.y + 10],\r\n ]\r\n break;\r\n }\r\n case \"northeast\":\r\n case \"northwest\":\r\n case \"southeast\":\r\n case \"southwest\":\r\n default: {\r\n let angle = getAngleBetweenTwoPoints(line.from, line.to);\r\n let pointToRotate1 = {x: state.midPoint.x - state.textWidth / 2 - 10, y: state.midPoint.y - 15};\r\n let rotatedPoint1 = rotatePoint(pointToRotate1, state.midPoint, angle);\r\n let pointToRotate2 = {x: state.midPoint.x + state.textWidth / 2 + 10, y: state.midPoint.y - 15};\r\n let rotatedPoint2 = rotatePoint(pointToRotate2, state.midPoint, angle);\r\n let pointToRotate3 = {x: state.midPoint.x + state.textWidth / 2 + 10, y: state.midPoint.y + 10};\r\n let rotatedPoint3 = rotatePoint(pointToRotate3, state.midPoint, angle);\r\n let pointToRotate4 = {x: state.midPoint.x - state.textWidth / 2 - 10, y: state.midPoint.y + 10};\r\n let rotatedPoint4 = rotatePoint(pointToRotate4, state.midPoint, angle);\r\n pointsArray = [\r\n [rotatedPoint1.x, rotatedPoint1.y],\r\n [rotatedPoint2.x, rotatedPoint2.y],\r\n [rotatedPoint3.x, rotatedPoint3.y],\r\n [rotatedPoint4.x, rotatedPoint4.y],\r\n // [state.midPoint.x - state.textWidth / 2 - 10, state.midPoint.y - 15],\r\n // [state.midPoint.x + state.textWidth / 2 + 10, state.midPoint.y - 15],\r\n // [state.midPoint.x + state.textWidth / 2 + 10, state.midPoint.y + 10],\r\n // [state.midPoint.x - state.textWidth / 2 - 10, state.midPoint.y + 10],\r\n ]\r\n break\r\n }\r\n }\r\n return pointsArray\r\n }\r\n\r\n function onMouseMove(mousePos, e) {\r\n void e;\r\n const {isHovered, orientation} = isMouseOverText(mousePos);\r\n state.isHovered = isHovered;\r\n if (state.isHovered) {\r\n EventManager.stealCursor();\r\n EventManager.setCursor((orientation === \"horizontal\") ? \"text\" : \"text-vertical\", self);\r\n } else {\r\n EventManager.resetCursor(self);\r\n }\r\n }\r\n\r\n const onMouseDown = () => {\r\n if (state.isHovered && !document.querySelector(\".line-input\")) {\r\n window.lineInputFocused = true;\r\n EventManager.stealCursor();\r\n state.isEditInputDisplayed = true;\r\n\r\n const maxLength = Math.round(getMaxResizeWidth(line) * config.getMeasureMultiplier());\r\n let initialValue;\r\n if (sqftConfig.measureUnit === MEASURE_UNITS.Imperial) {\r\n initialValue = Math.round10(self.getLineDistanceFull() * config.getMeasureMultiplier(), -6);\r\n initialValue = distanceToInches(initialValue).replace(\"\\\"\", \"\");\r\n } else if (sqftConfig.measureUnit === MEASURE_UNITS.Metric) {\r\n initialValue = Math.round10(self.getLineDistanceFull() * config.getMeasureMultiplier());\r\n }\r\n //console.log(\"initialValue\", initialValue);\r\n //const pointDistance = Math.sqrt(Math.pow(line.to.x - line.from.x, 2) + Math.pow(line.to.y - line.from.y, 2));\r\n //console.log(\"pointDistance\", pointDistance);\r\n\r\n\r\n const pos = { x: state.midPoint.x, y: state.midPoint.y };\r\n\r\n const inputWrapper = createAdjustableInput({\r\n position: pos,\r\n initialValue: initialValue.toString(),\r\n min: 1,\r\n max: maxLength,\r\n orientation: \"horizontal\",\r\n onChange: (value) => {\r\n if (sqftConfig.measureUnit === MEASURE_UNITS.Metric) {\r\n value = mmToInches(value);\r\n }\r\n setNewLineWidth(value - self.getAdditionalLineDistance())\r\n }, // Update line width on change\r\n onClose: () => {\r\n window.lineInputFocused = false;\r\n state.isEditInputDisplayed = false;\r\n },\r\n step: 1,\r\n });\r\n\r\n document.querySelector(\".sqft-main-grid\").appendChild(inputWrapper);\r\n\r\n // Focus and select input on creation\r\n const input = inputWrapper.querySelector(\".line-input-field\");\r\n input.focus();\r\n }\r\n };\r\n\r\n function setNewLineWidth(lineWidth) {\r\n const distance = getPointDistance(line.from, line.to);\r\n const diff = lineWidth - distance;\r\n const roundedDiff = Math.round10(diff, -4)\r\n //console.log(\"setNewLineWidth roundedDiff\", roundedDiff);\r\n const reduxState = store.getState();\r\n const isWallsLockMode = reduxState.sqftMenuState.isWallsLockMode;\r\n resizeLine(line, roundedDiff, isWallsLockMode);\r\n updateShapeWaterfallLength(line);\r\n updateMiteredLength(line);\r\n updateUnderlaymentLength(line);\r\n\r\n const state = store.getState();\r\n const updateCalculations = state.sqftState.updateCalculations;\r\n store.dispatch(updateSQFTCalculations(updateCalculations + 1));\r\n }\r\n function getCtxColor(ctx, lineType) {\r\n return (lineType === \"wall\")\r\n ? state.isHovered ? state.hoveredColor : ctx.fillStyle\r\n : state.isHovered ? state.hoveredColor : COLOR_THEMES[config.activeTheme].primary;\r\n }\r\n this.destroy = (protect) => {\r\n if (!protect) {\r\n EventManager.removeEvent(self);\r\n this.isInited = false\r\n }\r\n };\r\n this.import = (data) => {\r\n state = data.state;\r\n this.id = data.id\r\n };\r\n this.export = () => {\r\n return { id: this.id, state: cloneDeep(state) }\r\n };\r\n this.init = function(line) {\r\n setLine(line);\r\n this.initEvents();\r\n };\r\n this.initEvents = () => {\r\n this.isInited = true;\r\n EventManager.addEvent(\r\n EventManager.events.MOUSE_MOVE,\r\n onMouseMove,\r\n this,\r\n EventManager.priorities.SEGMENT\r\n );\r\n EventManager.addEvent(\r\n EventManager.events.MOUSE_DOWN,\r\n onMouseDown,\r\n this,\r\n EventManager.priorities.SEGMENT\r\n );\r\n EventManager.addEvent(\r\n EventManager.events.RENDER,\r\n this.render,\r\n this,\r\n EventManager.priorities.OVERLAY\r\n );\r\n };\r\n this.deregisterEvents = () => {\r\n EventManager.removeEvent(this);\r\n this.isInited = false;\r\n };\r\n this.reInitEvents = () => {\r\n if (!this.isInited) {\r\n this.initEvents();\r\n }\r\n };\r\n this.removeLineText = function () {\r\n state.originalLineText = '';\r\n lineType = 'edge'; // by default\r\n lineTextColor = COLOR_THEMES[config.activeTheme].primary;\r\n };\r\n this.renderEdgeText = (edgeName) => {\r\n state.originalLineText = edgeName;\r\n lineType = 'edge';\r\n lineTextColor = COLOR_THEMES[config.activeTheme].active;\r\n };\r\n this.renderBacksplashText = (backsplashName, type) => {\r\n //lineText = backsplashName;\r\n state.originalLineText = line.getBacksplashHeight() + sqftConfig.getMeasureUnitPostfix() +\" \" + workspace.intl.formatMessage({id: \"sqft.navigation.submenu.backsplash\"});\r\n lineType = type;\r\n lineTextColor = (type === \"wall\") ? \"#000000\" : COLOR_THEMES[config.activeTheme].primary;\r\n };\r\n this.renderWaterfallText = (name, type) => {\r\n state.originalLineText = name;\r\n lineType = type;\r\n lineTextColor = (type === \"wall\") ? \"#000000\" : COLOR_THEMES[config.activeTheme].primary;\r\n };\r\n this.getMidpoint = function () {\r\n return state.midPoint;\r\n };\r\n this.setMidpointOffset = function (xOffset, yOffset) {\r\n state.midPoint.xOffset = xOffset;\r\n state.midPoint.yOffset = yOffset;\r\n };\r\n this.getLineLength = function () {\r\n var distance = getPointDistance(line.from, line.to);\r\n\r\n return measureDistanceToInches(distance);\r\n };\r\n this.getLineLengthText = function () {\r\n let distance = this.getLineDistanceFull();\r\n\r\n return config.measureUnit === \"Metric\" ? distanceToMillimeters(distance) : distanceToInches(distance);\r\n };\r\n this.getLineDistanceFull = function () {\r\n return getPointDistance(line.from, line.to) + this.getAdditionalLineDistance();\r\n };\r\n this.getLineDistanceFullInPixels = function () {\r\n const lineLengthInPx = getPointDistance(line.calculateRenderPosition(line.from), line.calculateRenderPosition(line.to));\r\n const scale = config.scale;\r\n let additionalLineDistance = this.getAdditionalLineDistance() * scale;\r\n if (additionalLineDistance < 0) {\r\n additionalLineDistance -= this.design.offsetFromLineEnd; // add gray line margin\r\n } else if (additionalLineDistance > 0) {\r\n additionalLineDistance += this.design.offsetFromLineEnd; // add gray line margin\r\n }\r\n\r\n return lineLengthInPx + additionalLineDistance;\r\n };\r\n this.getAdditionalLineDistance = function () {\r\n let additionalDistance = 0;\r\n const prevLine = line.getParent().getPrevLine(line);\r\n if (line.to.angle > 0 || line.to.arcLength > 0) {\r\n additionalDistance -= get45CornerLegDistanceByHypotenuse(line.to.angle || line.to.arcLength);\r\n }\r\n\r\n if (prevLine.to.angle > 0 || prevLine.to.arcLength > 0 ) {\r\n additionalDistance -= get45CornerLegDistanceByHypotenuse(prevLine.to.angle || prevLine.to.arcLength);\r\n }\r\n\r\n return +additionalDistance;\r\n };\r\n\r\n this.render = function(ctx) {\r\n if (state.isEditInputDisplayed) {\r\n return;\r\n }\r\n\r\n let scale = config.scale,\r\n fontSize = getFontsize(),\r\n font = (fontSize).toString() + \"px \" + config.activeFontBold,\r\n lineDirection = line.getLineDirection(),\r\n offset = line.getOffset(),\r\n distance = this.getLineDistanceFullInPixels(),\r\n dstring = this.getLineLengthText(),\r\n midPoint = getMidPoint(line.from, line.to),\r\n orientationValue = line.getOrientation(),\r\n space,\r\n mtext,\r\n medgeText,\r\n xOffset = 0,\r\n yOffset = 0,\r\n lineCornerWidth = 0,\r\n fromPosOnField = getPointField(line.from.x, line.from.y, line),\r\n prevLine;\r\n\r\n state.lineTextResized = _.clone(state.originalLineText);\r\n const parent = line.getParent();\r\n\r\n ctx.beginPath();\r\n ctx.font = font;\r\n\r\n mtext = ctx.measureText(dstring);\r\n medgeText = ctx.measureText(state.lineTextResized);\r\n space = ctx.measureText(' ');\r\n state.textWidth = Math.round(mtext.width * 100) / 100;\r\n\r\n let marginTotal = 0;\r\n\r\n for (let i in lineDirection.cornerMargins) {\r\n marginTotal += lineDirection.cornerMargins[i];\r\n }\r\n\r\n if (medgeText.width + ctx.measureText(dstring).width > distance) {\r\n fontSize = 14;\r\n ctx.font = \"14px \" + config.activeFontBold;\r\n mtext = ctx.measureText(dstring);\r\n medgeText = ctx.measureText(state.lineTextResized);\r\n space = ctx.measureText(' ');\r\n\r\n // Adjust text size based on distance\r\n if (distance < 20 * config.scale + marginTotal * 40) {\r\n state.lineTextResized = '';\r\n medgeText = ctx.measureText(state.lineTextResized);\r\n } else {\r\n if (state.originalLineText && (medgeText.width + ctx.measureText(dstring).width > distance - marginTotal * 40)) {\r\n while (medgeText.width && (medgeText.width + ctx.measureText(dstring).width > distance - marginTotal * 40)) {\r\n state.lineTextResized = state.lineTextResized.slice(0, -1);\r\n medgeText = ctx.measureText(state.lineTextResized);\r\n }\r\n }\r\n }\r\n }\r\n\r\n lineCornerWidth += line.get45CornerLegDistance() / 2 * scale;\r\n prevLine = parent.getPrevLine(line);\r\n lineCornerWidth -= prevLine.get45CornerLegDistance() / 2 * scale;\r\n\r\n midPoint.y = midPoint.y * scale + offset.y;\r\n midPoint.x = midPoint.x * scale + offset.x;\r\n ctx.textAlign = \"center\";\r\n //midPoint.y += fontSize / 2;\r\n // ctx.fillStyle = \"rgba(255,255,255,0)\";\r\n // ctx.fillRect(midPoint.x - tLen/2 - 4, midPoint.y - (fontSize), tLen + 4, fontSize + 4);\r\n ctx.beginPath();\r\n ctx.fillStyle = state.isHovered\r\n ? state.hoveredColor\r\n : (lineType === \"wall\") ? \"#000000\" : COLOR_THEMES[config.activeTheme].primary;\r\n\r\n let marginFrom = 0,\r\n marginTo = 0;\r\n\r\n switch (lineDirection.orientation) {\r\n case \"horizontal\": {\r\n if (lineDirection.newDirection === \"east\") {\r\n midPoint.x -= lineCornerWidth;\r\n marginFrom = (lineDirection.cornerMargins.fromLeft) ? marginFrom + 9 : marginFrom;\r\n marginTo = (lineDirection.cornerMargins.fromRight) ? marginTo + 9 : marginTo;\r\n } else if (lineDirection.newDirection === \"west\") {\r\n midPoint.x += lineCornerWidth;\r\n marginFrom = (lineDirection.cornerMargins.fromRight) ? marginFrom + 9 : marginFrom;\r\n marginTo = (lineDirection.cornerMargins.fromLeft) ? marginTo + 9 : marginTo;\r\n }\r\n yOffset = (lineDirection.newDirection === \"west\" ? 33 : -20) + (state.midPoint.yOffset * scale);\r\n if (state.lineTextResized) {\r\n ctx.fillStyle = lineTextColor;\r\n ctx.wrapText(state.lineTextResized, midPoint.x - mtext.width / 2 - marginFrom + marginTo, midPoint.y + yOffset, medgeText, fontSize);\r\n ctx.fillStyle = getCtxColor(ctx, lineType);\r\n state.midPoint.x = midPoint.x + medgeText.width / 2 + space.width - marginFrom + marginTo;\r\n state.midPoint.y = midPoint.y + yOffset;\r\n } else {\r\n state.midPoint.x = midPoint.x - marginFrom + marginTo;\r\n state.midPoint.y = midPoint.y + yOffset;\r\n }\r\n ctx.wrapText(dstring, state.midPoint.x, state.midPoint.y, mtext, fontSize);\r\n break;\r\n }\r\n case \"vertical\": {\r\n if (lineDirection.newDirection === \"south\") {\r\n marginFrom = (lineDirection.cornerMargins.fromTop) ? marginFrom + 9 : marginFrom;\r\n marginTo = (lineDirection.cornerMargins.fromBottom) ? marginTo + 9 : marginTo;\r\n midPoint.y -= lineCornerWidth;\r\n } else if (lineDirection.newDirection === \"north\") {\r\n marginTo = (lineDirection.cornerMargins.fromTop) ? marginTo + 9 : marginTo;\r\n marginFrom = (lineDirection.cornerMargins.fromBottom) ? marginFrom + 9 : marginFrom;\r\n midPoint.y += lineCornerWidth;\r\n }\r\n xOffset += state.midPoint.xOffset * scale;\r\n state.midPoint.x = midPoint.x + xOffset;\r\n state.midPoint.y = midPoint.y + yOffset\r\n ? lineDirection.newDirection === \"south\"\r\n ? midPoint.y + medgeText.width / 2 + space.width\r\n : midPoint.y - medgeText.width / 2 + space.width\r\n : midPoint.y;\r\n ctx.save();\r\n ctx.translate(\r\n lineDirection.newDirection === \"south\" ? midPoint.x + xOffset : midPoint.x + xOffset,\r\n lineDirection.newDirection === \"south\" ? midPoint.y - 5 : midPoint.y - 10\r\n );\r\n ctx.rotate(lineDirection.newDirection === \"south\" ? Math.PI / 2 : -Math.PI / 2);\r\n if (state.lineTextResized) {\r\n ctx.fillStyle = lineTextColor;\r\n ctx.wrapText(state.lineTextResized, 0 - mtext.width / 2 + marginFrom - marginTo, -fontSize, medgeText, fontSize);\r\n ctx.fillStyle = getCtxColor(ctx, lineType);\r\n ctx.wrapText(dstring, 0 + medgeText.width / 2 + space.width + marginFrom - marginTo, -fontSize - yOffset, mtext, fontSize);\r\n } else {\r\n ctx.wrapText(dstring, 0 + marginFrom - marginTo, -fontSize, mtext, fontSize);\r\n }\r\n break;\r\n }\r\n case \"NORTHWEST\":\r\n case \"NORTHEAST\":\r\n case \"SOUTHWEST\":\r\n case \"SOUTHEAST\": {\r\n ctx.save();\r\n if (state.lineTextResized) {\r\n dstring = state.lineTextResized + ' ' + dstring;\r\n }\r\n //this.renderFrameBorder(ctx, dstring, fontSize, midPoint, orientationValue);\r\n const [parallelPoint1] = getParallelPoints(fromPosOnField, midPoint, -30);\r\n state.midPoint.x = parallelPoint1.x;\r\n state.midPoint.y = parallelPoint1.y;\r\n this.renderText(ctx, dstring, state.midPoint, fontSize, orientationValue);\r\n break;\r\n }\r\n default:\r\n break;\r\n }\r\n\r\n ctx.restore();\r\n\r\n if (Config.isDevMode()) {\r\n this.renderHoveredArea(ctx);\r\n }\r\n };\r\n\r\n this.renderHoveredArea = (ctx) => {\r\n //console.log(\"state.midPoint.\", state.midPoint);\r\n const hoveredArea = this.getHoveredArea();\r\n ctx.beginPath();\r\n ctx.moveTo(hoveredArea[0][0], hoveredArea[0][1]);\r\n ctx.lineTo(hoveredArea[1][0], hoveredArea[1][1]);\r\n ctx.lineTo(hoveredArea[2][0], hoveredArea[2][1]);\r\n ctx.lineTo(hoveredArea[3][0], hoveredArea[3][1]);\r\n ctx.lineTo(hoveredArea[0][0], hoveredArea[0][1]);\r\n ctx.lineWidth = 2;\r\n ctx.strokeStyle = 'rgba(0, 0, 0, 0.5)';\r\n ctx.stroke();\r\n ctx.closePath();\r\n }\r\n\r\n this.getFrameBorderPosition = (ctx, pos, value, fontHeight, orientationValue) => {\r\n const mText = ctx.measureText(value);\r\n let position = {\r\n x: pos.x,\r\n y: pos.y\r\n };\r\n\r\n switch (orientationValue) {\r\n case orientation.HORIZONTAL: {\r\n break;\r\n }\r\n case orientation.VERTICAL: {\r\n break;\r\n }\r\n case orientation.NORTHWEST: {\r\n position = {\r\n x: pos.x - mText.width,\r\n y: pos.y - this.design.offsetFromLineEnd\r\n };\r\n break;\r\n }\r\n case orientation.NORTHEAST: {\r\n position = {\r\n x: pos.x - mText.width,\r\n y: pos.y - this.design.offsetFromLineEnd\r\n };\r\n break;\r\n }\r\n case orientation.SOUTHWEST: {\r\n\r\n break;\r\n }\r\n case orientation.SOUTHEAST: {\r\n\r\n break;\r\n }\r\n default:\r\n break;\r\n }\r\n return position\r\n }\r\n\r\n this.renderFrameBorder = (ctx, value, fontHeight, pos, orientationValue) => {\r\n ctx.beginPath();\r\n const mText = ctx.measureText(value);\r\n ctx.strokeStyle = COLOR_THEMES[sqftConfig.activeTheme].primary;\r\n ctx.lineWidth = 2;\r\n ctx.fillStyle = COLOR.white\r\n\r\n const angle = getAngleBetweenTwoPoints(line.from, line.to);\r\n let position = this.getFrameBorderPosition(ctx, pos, value, fontHeight, orientationValue);\r\n\r\n ctx.save();\r\n ctx.translate(\r\n position.x,\r\n position.y,\r\n );\r\n ctx.rotate(angle * (Math.PI / 180));\r\n RenderFigures.roundedRect(ctx,\r\n 0, // absolute pos: //pos.x - mText.width / 1.25 / sqftConfig.scale * sqftConfig.defaultScale,\r\n 0, // absolute pos: //pos.y - fontHeight,\r\n mText.width * 1.5 + sqftConfig.scale / sqftConfig.defaultScale,\r\n fontHeight + 6,\r\n 5,\r\n true,\r\n true\r\n );\r\n ctx.restore();\r\n ctx.closePath();\r\n }\r\n\r\n this.renderText = (ctx, value, pos, fontHeight, orientationValue) => {\r\n const //scale = sqftConfig.scale,\r\n font = fontHeight + \"px \" + config.activeFontBold,\r\n mText = ctx.measureText(value);\r\n\r\n //let position = this.getTextPosition(ctx, pos, value, fontHeight, orientationValue);\r\n\r\n ctx.beginPath();\r\n ctx.font = font;\r\n ctx.textAlign = \"center\";\r\n ctx.fillStyle = getCtxColor(ctx, lineType);\r\n\r\n let angle = getAngleBetweenTwoPoints(line.from, line.to);\r\n //this will help to rotate upside down text\r\n if ([orientation.NORTHWEST, orientation.SOUTHWEST].indexOf(orientationValue) !== -1) {\r\n angle += 180;\r\n }\r\n ctx.save();\r\n //RenderFigures.renderCircle(pos, 5,1, '#284da8');\r\n ctx.translate(\r\n pos.x,\r\n pos.y\r\n );\r\n ctx.rotate(angle * (Math.PI / 180));\r\n //ctx.wrapText(value, fontHeight / 2, mText.width / ( 2 * scale), mText, fontHeight);\r\n ctx.wrapText(value, 0, 0, mText, fontHeight);\r\n ctx.restore();\r\n ctx.closePath();\r\n }\r\n}\r\n","import { v4 as uuidv4 } from 'uuid';\r\nimport {\r\n distanceToInches,\r\n distanceToMillimeters, getFontsize, getFontsizeSmall, getIntersectCordsBetweenLines,\r\n getMidPoint,\r\n getPointDistance, isDisabledInPopupWithParents,\r\n measureDistanceToInches,\r\n mmToInches,\r\n orientation\r\n} from \"../../../../../helpers/sqftHelper\";\r\nimport point from \"../point\";\r\nimport shapeLine from \"../line\";\r\nimport {getMaxResizeWidth} from \"./resizeLine\";\r\nimport COLOR_THEMES from \"../../../store/colorThemes\";\r\nimport Config from \"../../../store/sqftConfig\";\r\nimport configGlobal from \"../../../store/sqftConfig\";\r\nimport EventManager from \"../../../store/sqftEventManager\";\r\nimport {pnpolyArray} from \"../../../../../lib/pnpoly\";\r\nimport workspace from \"../../workspace\";\r\nimport $ from \"jquery\";\r\nimport store from \"../../../../../../../store\";\r\nimport {updateSQFTCalculations} from \"../../../../../../../actions/sqftFunctions\";\r\nimport sqftEventManager from \"../../../store/sqftEventManager\";\r\nimport {isDisabledInPopupShouldBeHidden, MEASURE_UNITS} from \"../../../../../constants\";\r\nimport SqftStore from \"../../../store/sqftStore\";\r\nimport {renderResetSeamPopup, shouldResetSlabModePopupOnPointMoveBeDisplayed} from \"../../../canvasPopup/resetSeam\";\r\nimport {crossProduct2D} from \"../../../../../helpers/coordinatesHelper\";\r\nimport {getBumpoutFeature} from \"../../../../../helpers/featureHelper\";\r\nimport {createAdjustableInput} from \"../../../../../helpers/uiHelper\";\r\nimport sqftConfig from \"../../../store/sqftConfig\";\r\n\r\nexport default function() {\r\n var self = this,\r\n state = {\r\n mousePos: {},\r\n mouseDown: false,\r\n mouseDownPosition: null,\r\n isHoveringRect: false,\r\n isHoveringPoint: false,\r\n hoveredPoint: null,\r\n isHoveredOverText: false,\r\n hoveredText: {\r\n area:[],\r\n midPoint: {x: 0, y: 0},\r\n pointsDistance: 0,\r\n points: {point1: null, point2: null},\r\n orientation: 0\r\n },\r\n midPoint: {\r\n x: 0,\r\n y: 0,\r\n }\r\n },\r\n config = {\r\n initialSize: 30,\r\n minBumpoutSize: 1,\r\n dragPointMargin: 28,\r\n rulerMargin: 25,\r\n movePointOffset: 100,\r\n lineTextColor: COLOR_THEMES[Config.activeTheme].primary\r\n },\r\n bumpoutPoints = {\r\n point1: null,\r\n point2: null,\r\n point3: null,\r\n point4: null,\r\n dragPoint: null\r\n },\r\n bumpoutTextParameters = {\r\n lengthFrom1 : {\r\n area:[],\r\n midPoint: {x: 0, y: 0},\r\n pointsDistance: 0,\r\n points: {point1: null, point2: null},\r\n orientation: 0\r\n },\r\n length14 : {\r\n area:[],\r\n midPoint: {x: 0, y: 0},\r\n pointsDistance: 0,\r\n points: {point1: null, point2: null},\r\n orientation: 0\r\n },\r\n length34 : {\r\n area:[],\r\n midPoint: {x: 0, y: 0},\r\n pointsDistance: 0,\r\n points: {point1: null, point2: null},\r\n orientation: 0\r\n },\r\n length4to : {\r\n area:[],\r\n midPoint: {x: 0, y: 0},\r\n pointsDistance: 0,\r\n points: {point1: null, point2: null},\r\n orientation: 0\r\n },\r\n },\r\n deleteFillStyle = \"rgba(253,2,33, 0.5)\",\r\n line = null,\r\n bumpoutLines = null;\r\n\r\n this.id = uuidv4(); // sqftId (this is not attached resource id)\r\n this.featureId = null; // will be assigned on init\r\n\r\n //private property setters\r\n function setLine(value) { line = value; }\r\n function setBumpoutPoints(value) { bumpoutPoints = value; }\r\n\r\n //private functions\r\n function preparePoints() {\r\n var midPoint = getMidPoint(line.from, line.to),\r\n point1,\r\n point2,\r\n point3,\r\n point4,\r\n dragPoint,\r\n dragPointMargin,\r\n flipPoints = false;\r\n\r\n const lineDirection = line.getLineDirection();\r\n\r\n switch (lineDirection.orientation) {\r\n case \"horizontal\": {\r\n flipPoints = lineDirection.newDirection === \"west\";\r\n dragPointMargin = flipPoints ? config.dragPointMargin : -config.dragPointMargin;\r\n point1 = new point(midPoint.x - config.initialSize / 2, midPoint.y, undefined, undefined, false);\r\n point2 = new point(midPoint.x - config.initialSize / 2, midPoint.y, undefined, undefined, false);\r\n point3 = new point(midPoint.x + config.initialSize / 2, midPoint.y, undefined, undefined, false);\r\n point4 = new point(midPoint.x + config.initialSize / 2, midPoint.y, undefined, undefined, false);\r\n dragPoint = new point(midPoint.x, midPoint.y + dragPointMargin, undefined, undefined, false);\r\n\r\n break;\r\n }\r\n case \"vertical\": {\r\n flipPoints = lineDirection.newDirection === \"north\";\r\n dragPointMargin = flipPoints ? -config.dragPointMargin : config.dragPointMargin;\r\n point1 = new point(midPoint.x, midPoint.y - config.initialSize / 2, undefined, undefined, false);\r\n point2 = new point(midPoint.x, midPoint.y - config.initialSize / 2, undefined, undefined, false);\r\n point3 = new point(midPoint.x, midPoint.y + config.initialSize / 2, undefined, undefined, false);\r\n point4 = new point(midPoint.x, midPoint.y + config.initialSize / 2, undefined, undefined, false);\r\n dragPoint = new point(midPoint.x + dragPointMargin, midPoint.y, undefined, undefined, false);\r\n break;\r\n }\r\n case \"NORTHWEST\":\r\n case \"NORTHEAST\":\r\n case \"SOUTHWEST\":\r\n case \"SOUTHEAST\": {\r\n //todo rotation\r\n point1 = new point(midPoint.x, midPoint.y - bumpoutPoints.initialSize / 2, undefined, undefined, false);\r\n point4 = new point(midPoint.x, midPoint.y + bumpoutPoints.initialSize / 2, undefined, undefined, false);\r\n dragPoint = new point(midPoint.x, midPoint.y, undefined, undefined, false);\r\n\r\n break;\r\n }\r\n default:\r\n break;\r\n }\r\n\r\n setBumpoutPoints ({\r\n point1: flipPoints ? point4 : point1,\r\n point2: flipPoints ? point3 : point2,\r\n point3: flipPoints ? point2 : point3,\r\n point4: flipPoints ? point1 : point4,\r\n dragPoint: dragPoint\r\n });\r\n }\r\n\r\n function movePointInOrStop(point1, point2, axis, diff, biggestPoint, smallestPoint, stopPoint) {\r\n // stop on other bumpout move point\r\n if (point1[axis] > stopPoint[axis]) {\r\n smallestPoint = stopPoint[axis] + config.minBumpoutSize;\r\n } else {\r\n biggestPoint = stopPoint[axis] - config.minBumpoutSize;\r\n }\r\n\r\n if (point1[axis] - diff >= biggestPoint) {\r\n point1[axis] = point2[axis] = biggestPoint;\r\n } else if (point1[axis] - diff <= smallestPoint) {\r\n point1[axis] = point2[axis] = smallestPoint;\r\n } else {\r\n point1[axis] -= diff;\r\n point2[axis] -= diff;\r\n }\r\n }\r\n\r\n function movePointOutOrStop(point1, point2, axis, diff, biggestPoint, smallestPoint) {\r\n let direction = line.getLineDirection().newDirection;\r\n let dragPointMargin;\r\n let lengthMidPoint;\r\n\r\n if (point1[axis] - diff > smallestPoint && (direction === \"east\" || direction === \"north\")) {\r\n dragPointMargin = -config.dragPointMargin;\r\n point1[axis] = point2[axis] = smallestPoint;\r\n bumpoutPoints.dragPoint[axis] = smallestPoint + dragPointMargin\r\n } else if (point1[axis] - diff < biggestPoint && (direction === \"west\" || direction === \"south\")) {\r\n dragPointMargin = +config.dragPointMargin;\r\n point1[axis] = point2[axis] = biggestPoint;\r\n bumpoutPoints.dragPoint[axis] = smallestPoint + dragPointMargin\r\n } else {\r\n point1[axis] -= diff;\r\n point2[axis] -= diff;\r\n bumpoutPoints.dragPoint[axis] -= diff;\r\n lengthMidPoint = line.overlay.getMidpoint();\r\n line.overlay.setMidpointOffset(lengthMidPoint.xOffset - diff, lengthMidPoint.yOffset - diff);\r\n }\r\n }\r\n\r\n function move23Point(point1, point2, axis, diff) {\r\n // Check for intersection with all lines in the parent shape\r\n point1[axis] -= diff;\r\n point2[axis] -= diff;\r\n let intersects = line.getParent().getLines().some(parentLine => {\r\n // Don't check against itself\r\n if (parentLine === line) return false;\r\n\r\n // Check if bumpoutPoints {from: point1, to: point2} line would intersect this parent line\r\n return getIntersectCordsBetweenLines(\r\n { x: parentLine.from.x, y: parentLine.from.y },\r\n { x: parentLine.to.x, y: parentLine.to.y },\r\n { x: bumpoutPoints.point1.x, y: bumpoutPoints.point1.y },\r\n { x: bumpoutPoints.point2.x, y: bumpoutPoints.point2.y }\r\n );\r\n });\r\n\r\n // Only move points if no intersection detected\r\n if (!intersects) {\r\n let lengthMidPoint = line.overlay.getMidpoint();\r\n bumpoutPoints.dragPoint[axis] -= diff;\r\n line.overlay.setMidpointOffset(lengthMidPoint.xOffset - diff, lengthMidPoint.yOffset - diff);\r\n } else {\r\n // rollback points if intersection was found\r\n point1[axis] += diff;\r\n point2[axis] += diff;\r\n }\r\n }\r\n\r\n function getMousePosPointDiff(diff, point, mousePos, sameOrientation = false) {\r\n if (configGlobal.measureUnit === \"Metric\") {\r\n var offset = 0;\r\n switch(line.getOrientation()) {\r\n case orientation.HORIZONTAL:\r\n offset = sameOrientation ? mousePos.x - point.getPointField().x : mousePos.y - point.getPointField().y;\r\n break;\r\n case orientation.VERTICAL:\r\n offset = sameOrientation? mousePos.y - point.getPointField().y : mousePos.x - point.getPointField().x;\r\n break;\r\n case orientation.NORTHWEST:\r\n case orientation.SOUTHEAST:\r\n break;\r\n case orientation.NORTHEAST:\r\n case orientation.SOUTHWEST:\r\n break;\r\n }\r\n\r\n if (-config.movePointOffset < offset && offset < config.movePointOffset) {\r\n diff = diff / configGlobal.millimetersMultiplier;\r\n }\r\n }\r\n\r\n return diff\r\n }\r\n\r\n //public property getters\r\n\r\n this.getParent = () => { return line; };\r\n this.getGrandParent = () => {\r\n const parent = this.getParent();\r\n if (parent && parent.getParent) {\r\n return parent.getParent();\r\n }\r\n return null\r\n };\r\n this.getBumpoutPoints = function() { return bumpoutPoints; };\r\n this.getBumpoutLines = () => {\r\n if (bumpoutLines) {\r\n return bumpoutLines\r\n }\r\n return this.createBumpoutLines();\r\n };\r\n this.createBumpoutLines = () => {\r\n const points = this.getBumpoutPoints();\r\n bumpoutLines = [\r\n new shapeLine(line.from, points.point1, line.getParent()),\r\n new shapeLine(points.point1, points.point2, line.getParent()),\r\n new shapeLine(points.point2, points.point3, line.getParent()),\r\n new shapeLine(points.point3, points.point4, line.getParent()),\r\n new shapeLine(points.point4, line.to, line.getParent()),\r\n ];\r\n\r\n return bumpoutLines\r\n };\r\n this.getBumpoutPointCords = function() {\r\n let bumpoutPointsCords = [];\r\n for (const bumpoutPointsKey in bumpoutPoints) {\r\n if (bumpoutPointsKey !== 'dragPoint') {\r\n bumpoutPointsCords.push(bumpoutPoints[bumpoutPointsKey]);\r\n }\r\n }\r\n return bumpoutPointsCords\r\n };\r\n this.getBumpoutTextParameter = function() { return bumpoutTextParameters; };\r\n\r\n this.destroy = function(protect) {\r\n if (!protect) {\r\n EventManager.removeEvent(self);\r\n }\r\n const reduxState = store.getState();\r\n const updateCalculations = reduxState.sqftState.updateCalculations;\r\n store.dispatch(updateSQFTCalculations(updateCalculations + 1));\r\n };\r\n\r\n this.init = (line, importPoints = null, featureId = null) => {\r\n setLine(line);\r\n if (!importPoints) {\r\n preparePoints();\r\n }\r\n this.featureId = featureId\r\n if (!featureId) {\r\n const bumpoutFeature = getBumpoutFeature();\r\n const isFeatureExist = Array.isArray(bumpoutFeature)\r\n && bumpoutFeature.length\r\n && bumpoutFeature[0].part\r\n && bumpoutFeature[0].part.dbFeature\r\n\r\n this.featureId = isFeatureExist ? bumpoutFeature[0].part.dbFeature.id : null;\r\n }\r\n this.initEvents();\r\n\r\n //points\r\n bumpoutPoints.point1.init(self);\r\n bumpoutPoints.point1.layout = 'white-circle';\r\n\r\n bumpoutPoints.point2.init(self);\r\n bumpoutPoints.point2.layout = 'blank';\r\n\r\n bumpoutPoints.point3.init(self);\r\n bumpoutPoints.point3.layout = 'blank';\r\n\r\n bumpoutPoints.point4.init(self);\r\n bumpoutPoints.point4.layout = 'white-circle';\r\n\r\n bumpoutPoints.dragPoint.init(self);\r\n bumpoutPoints.dragPoint.layout = 'arrow-circle';\r\n\r\n // set line overlay length offset\r\n if (!importPoints) {\r\n var xOffset = 0;\r\n var yOffset = 0;\r\n var lineDirection = line.getLineDirection();\r\n switch (lineDirection.orientation) {\r\n case \"horizontal\": {\r\n yOffset = (lineDirection.newDirection === \"west\" ? config.dragPointMargin - 15 : -config.dragPointMargin + 15);\r\n break;\r\n }\r\n case \"vertical\": {\r\n xOffset = (lineDirection.newDirection === \"south\" ? config.dragPointMargin - 15 : -config.dragPointMargin + 15);\r\n break;\r\n }\r\n // todo rotation\r\n case \"NORTHWEST\": { break;}\r\n case \"NORTHEAST\": { break;}\r\n case \"SOUTHWEST\": { break;}\r\n case \"SOUTHEAST\": { break;}\r\n default:\r\n break;\r\n }\r\n line.overlay.setMidpointOffset(xOffset, yOffset)\r\n }\r\n\r\n // todo fix bumpout rotation and remove this\r\n $('.button--angle').addClass('button--disabled');\r\n /////////////////////////////////////////\r\n };\r\n this.initEvents = () => {\r\n EventManager.addEvent(\r\n EventManager.events.RENDER,\r\n self.render,\r\n self,\r\n EventManager.priorities.SEGMENT\r\n );\r\n //todo priority\r\n EventManager.addEvent(\r\n EventManager.events.MOUSE_MOVE,\r\n onMouseMove,\r\n self,\r\n EventManager.priorities.SEGMENT\r\n );\r\n EventManager.addEvent(\r\n EventManager.events.MOUSE_DOWN,\r\n onMouseDown,\r\n self,\r\n EventManager.priorities.SEGMENT\r\n );\r\n EventManager.addEvent(\r\n EventManager.events.MOUSE_UP,\r\n onMouseUp,\r\n self,\r\n EventManager.priorities.SEGMENT\r\n );\r\n EventManager.addEvent(\r\n EventManager.events.MOUSE_LEAVE,\r\n onMouseLeave,\r\n self,\r\n EventManager.priorities.OVERALL\r\n );\r\n }\r\n this.deregisterEvents = () => {\r\n sqftEventManager.removeEvent(this);\r\n this.isHidden = true;\r\n for (let i = 0; i < bumpoutPoints.length; i++) {\r\n bumpoutPoints[i].deregisterEvents();\r\n }\r\n };\r\n this.reInitEvents = () => {\r\n this.initEvents();\r\n this.isHidden = false;\r\n for (let i = 0; i < bumpoutPoints.length; i++) {\r\n bumpoutPoints[i].reInitEvents();\r\n }\r\n };\r\n this.export = function() {\r\n return {\r\n bumpoutPoints : {\r\n point1: bumpoutPoints.point1.export(),\r\n point2: bumpoutPoints.point2.export(),\r\n point3: bumpoutPoints.point3.export(),\r\n point4: bumpoutPoints.point4.export(),\r\n dragPoint: bumpoutPoints.dragPoint.export()\r\n },\r\n overlay: {\r\n midpoint: line.overlay.getMidpoint(),\r\n id: this.id\r\n }\r\n }\r\n };\r\n this.import = (line, bumpoutData) => {\r\n for (let bumpoutPoint in bumpoutData.bumpoutPoints) {\r\n bumpoutPoints[bumpoutPoint] = new point();\r\n bumpoutPoints[bumpoutPoint].import(bumpoutData.bumpoutPoints[bumpoutPoint])\r\n }\r\n this.init(line, bumpoutData.bumpoutPoints, bumpoutData.overlay.id);\r\n };\r\n this.getOffset = function() {\r\n return line.getOffset();\r\n };\r\n this.getBumpoutLength = function () {\r\n var bumpoutDistance = getPointDistance(bumpoutPoints.point1, bumpoutPoints.point2);\r\n\r\n return measureDistanceToInches(bumpoutDistance);\r\n };\r\n this.getBumpoutTotalHeight = function () {\r\n var bumpoutDistance = getPointDistance(bumpoutPoints.point1, bumpoutPoints.point2);\r\n\r\n return measureDistanceToInches(bumpoutDistance * 2);\r\n };\r\n this.getBumpoutTotalArea = () => {\r\n if (this.bumpoutInOrOut() === 'in') {\r\n return {\r\n inches: 0,\r\n millimeters: 0\r\n }\r\n }\r\n\r\n var lineLengthInches = line.getLineLength(),\r\n lineLengthMm = line.getLineLengthMm(),\r\n\r\n bumpoutLength = this.getBumpoutLength(),\r\n bumpoutLengthInches = line.addDecimalToLength(bumpoutLength),\r\n bumpoutLengthMM = bumpoutLength.millimeters;\r\n\r\n return {\r\n inches : lineLengthInches * bumpoutLengthInches,\r\n millimeters : lineLengthMm * bumpoutLengthMM\r\n }\r\n };\r\n\r\n this.isHoveringRect = () => { return state.isHoveringRect };\r\n\r\n this.moveBumpout = function(xDiff = 0, yDiff = 0) {\r\n for (let bumpoutPoint in bumpoutPoints ) {\r\n bumpoutPoints[bumpoutPoint].x -= xDiff;\r\n bumpoutPoints[bumpoutPoint].y -= yDiff;\r\n }\r\n };\r\n\r\n this.moveLineWithMouse = function(mousePos) {\r\n let scale = workspace.getScale();\r\n let xDiff = (state.mouseDownPosition.x - mousePos.x) / scale;\r\n let yDiff = (state.mouseDownPosition.y - mousePos.y) / scale;\r\n\r\n yDiff = getMousePosPointDiff(yDiff, bumpoutPoints.dragPoint, mousePos);\r\n xDiff = getMousePosPointDiff(xDiff, bumpoutPoints.dragPoint, mousePos);\r\n\r\n this.moveLine(xDiff, yDiff);\r\n\r\n state.mouseDownPosition.y = mousePos.y;\r\n state.mouseDownPosition.x = mousePos.x;\r\n };\r\n\r\n this.isBumpoutPointMoving = () => { return state.mouseDown};\r\n this.moveLine = function(xDiff, yDiff) {\r\n if (SqftStore.isRegularMode() && shouldResetSlabModePopupOnPointMoveBeDisplayed(this.getGrandParent())) {\r\n renderResetSeamPopup(this.getGrandParent())\r\n }\r\n\r\n var o = line.getOrientation();\r\n\r\n if (o === orientation.VERTICAL) {\r\n move23Point(bumpoutPoints.point2, bumpoutPoints.point3, 'x', xDiff);\r\n void movePointOutOrStop\r\n //movePointOutOrStop(bumpoutPoints.point2, bumpoutPoints.point3, 'x', xDiff, line.getBiggestXPoint().x, line.getSmallestXPoint().x, false);\r\n } else if (o === orientation.HORIZONTAL) {\r\n // let distance = line.getSmallestYPoint().y;\r\n // const closetParallelLineAndPoint = findClosestIntersectingPointAndLine(line, line.getParent().getLines());\r\n // if (closetParallelLineAndPoint) {\r\n // const midPoint = getMidPoint(line.from, line.to);\r\n // distance = getPointDistance(midPoint, closetParallelLineAndPoint.point);\r\n // }\r\n // movePointOutOrStop(bumpoutPoints.point2, bumpoutPoints.point3, 'y', yDiff, distance, distance, false);\r\n\r\n move23Point(bumpoutPoints.point2, bumpoutPoints.point3, 'y', yDiff);\r\n } else {\r\n //todo\r\n // const nextLine = parent.getNextLine(self);\r\n // const prevLine = parent.getPrevLine(self);\r\n // moveDiagonalLine(self, nextLine, prevLine, state.movePointDistance, yDiff, o);\r\n }\r\n\r\n const state = store.getState();\r\n const updateCalculations = state.sqftState.updateCalculations;\r\n\r\n store.dispatch(updateSQFTCalculations(updateCalculations + 1));\r\n };\r\n\r\n this.movePointWithMouse = function(mousePos, point1, point2, stopPoint) {\r\n var scale = workspace.getScale();\r\n var xDiff = (state.mouseDownPosition.x - mousePos.x) / scale;\r\n var yDiff = (state.mouseDownPosition.y - mousePos.y) / scale;\r\n\r\n yDiff = getMousePosPointDiff(yDiff, point1, mousePos, true);\r\n xDiff = getMousePosPointDiff(xDiff, point1, mousePos, true);\r\n\r\n this.movePoint(xDiff, yDiff, point1, point2, stopPoint);\r\n\r\n state.mouseDownPosition.y = mousePos.y;\r\n state.mouseDownPosition.x = mousePos.x;\r\n };\r\n\r\n this.resizeBumpoutPart = function(value, hoveredText) {\r\n let yDiff = 0,\r\n xDiff = 0,\r\n pointDistance = getPointDistance(hoveredText.points.point1, hoveredText.points.point2),\r\n lineDirection = line.getLineDirection();\r\n\r\n switch(line.getOrientation()) {\r\n case orientation.HORIZONTAL:\r\n\r\n switch (hoveredText.part) {\r\n case \"lengthFrom1\":\r\n xDiff = lineDirection.newDirection === \"west\" ? value - pointDistance: -value + pointDistance;\r\n this.movePoint(xDiff, yDiff, bumpoutPoints.point1, bumpoutPoints.point2, bumpoutPoints.point4);\r\n break;\r\n case \"length4to\":\r\n xDiff = lineDirection.newDirection === \"west\" ? -value + pointDistance : value - pointDistance;\r\n this.movePoint(xDiff, yDiff, bumpoutPoints.point3, bumpoutPoints.point4, bumpoutPoints.point1);\r\n break;\r\n case \"length14\":\r\n xDiff = lineDirection.newDirection === \"west\" ? -value + pointDistance: value - pointDistance;\r\n this.movePoint(xDiff / 2, yDiff, bumpoutPoints.point1, bumpoutPoints.point2, bumpoutPoints.point4);\r\n\r\n xDiff = lineDirection.newDirection === \"west\" ? value - pointDistance: -value + pointDistance;\r\n this.movePoint(xDiff / 2, yDiff, bumpoutPoints.point3, bumpoutPoints.point4, bumpoutPoints.point1);\r\n\r\n break;\r\n case \"length34\":\r\n pointDistance = this.bumpoutInOrOut() === \"in\" ? -pointDistance : pointDistance;\r\n yDiff = lineDirection.newDirection === \"west\" ? -value + pointDistance: value - pointDistance;\r\n this.moveLine(xDiff, yDiff);\r\n break;\r\n }\r\n break;\r\n case orientation.VERTICAL:\r\n switch (hoveredText.part) {\r\n case \"lengthFrom1\":\r\n yDiff = lineDirection.newDirection === \"south\" ? -value + pointDistance: value - pointDistance;\r\n this.movePoint(xDiff, yDiff, bumpoutPoints.point1, bumpoutPoints.point2, bumpoutPoints.point4);\r\n break;\r\n case \"length4to\":\r\n yDiff = lineDirection.newDirection === \"south\" ? value - pointDistance : -value + pointDistance;\r\n this.movePoint(xDiff, yDiff, bumpoutPoints.point3, bumpoutPoints.point4, bumpoutPoints.point1);\r\n break;\r\n case \"length14\":\r\n yDiff = lineDirection.newDirection === \"south\" ? -value + pointDistance: value - pointDistance;\r\n this.movePoint(xDiff, yDiff / 2, bumpoutPoints.point3, bumpoutPoints.point4, bumpoutPoints.point1);\r\n\r\n yDiff = lineDirection.newDirection === \"south\" ? value - pointDistance : -value + pointDistance;\r\n this.movePoint(xDiff, yDiff / 2, bumpoutPoints.point1, bumpoutPoints.point2, bumpoutPoints.point4);\r\n break;\r\n case \"length34\":\r\n pointDistance = this.bumpoutInOrOut() === \"in\" ? -pointDistance : pointDistance;\r\n xDiff = lineDirection.newDirection === \"south\" ? -value + pointDistance: value - pointDistance;\r\n this.moveLine(xDiff, yDiff);\r\n break;\r\n }\r\n break;\r\n case orientation.NORTHWEST:\r\n case orientation.SOUTHEAST:\r\n break;\r\n case orientation.NORTHEAST:\r\n case orientation.SOUTHWEST:\r\n break;\r\n }\r\n };\r\n\r\n this.movePoint = function(xDiff, yDiff, point1, point2, stopPoint) {\r\n if (SqftStore.isRegularMode() && shouldResetSlabModePopupOnPointMoveBeDisplayed(this.getGrandParent())) {\r\n renderResetSeamPopup(this.getGrandParent())\r\n }\r\n let o = line.getOrientation(),\r\n midPoint,\r\n dragPointMargin,\r\n lineDirection = line.getLineDirection(),\r\n toCornerLength = line.to.getArcLength() || line.get45CornerLegDistance(),\r\n prevLine = line.getParent().getPrevLine(line),\r\n fromCornerLength = prevLine.to.getArcLength() || prevLine.get45CornerLegDistance(),\r\n toCornerMargin = 0,\r\n fromCornerMargin = 0;\r\n\r\n if (o === orientation.VERTICAL) {\r\n midPoint = getMidPoint(bumpoutPoints.point2, bumpoutPoints.point3);\r\n dragPointMargin = lineDirection.newDirection === \"north\" ? -config.dragPointMargin : +config.dragPointMargin;\r\n bumpoutPoints.dragPoint.x = midPoint.x + dragPointMargin;\r\n bumpoutPoints.dragPoint.y = midPoint.y;\r\n toCornerMargin = lineDirection.newDirection === \"north\" ? -fromCornerLength : -toCornerLength;\r\n fromCornerMargin = lineDirection.newDirection === \"north\" ? +toCornerLength : +fromCornerLength;\r\n\r\n // stop point on overline move\r\n movePointInOrStop(\r\n point1, point2, 'y', yDiff,\r\n line.getBiggestYPoint().y + toCornerMargin,\r\n line.getSmallestYPoint().y + fromCornerMargin,\r\n stopPoint\r\n );\r\n } else if (o === orientation.HORIZONTAL) {\r\n midPoint = getMidPoint(bumpoutPoints.point2, bumpoutPoints.point3);\r\n dragPointMargin = lineDirection.newDirection === \"east\" ? -config.dragPointMargin : +config.dragPointMargin;\r\n bumpoutPoints.dragPoint.x = midPoint.x;\r\n bumpoutPoints.dragPoint.y = midPoint.y + dragPointMargin;\r\n toCornerMargin = lineDirection.newDirection === \"east\" ? -toCornerLength : -fromCornerLength;\r\n fromCornerMargin = lineDirection.newDirection === \"east\" ? +fromCornerLength : +toCornerLength;\r\n\r\n // stop point on overline move\r\n movePointInOrStop(\r\n point1, point2, 'x', xDiff,\r\n line.getBiggestXPoint().x + toCornerMargin,\r\n line.getSmallestXPoint().x + fromCornerMargin,\r\n stopPoint\r\n );\r\n } else {\r\n //todo rotation\r\n // const nextLine = parent.getNextLine(self);\r\n // const prevLine = parent.getPrevLine(self);\r\n // moveDiagonalLine(self, nextLine, prevLine, state.movePointDistance, yDiff, o);\r\n // state.mouseDownPosition = mousePos;\r\n }\r\n\r\n\r\n // self.from = lockPointToCanvas(self.from); // removed locking because of this issue http://jira.mozidev.com/browse/QC-802\r\n // self.to = lockPointToCanvas(self.to);\r\n };\r\n\r\n\r\n\r\n // Define a function to determine if the bumpout is in or out.\r\n this.bumpoutInOrOut = (pointA = line.from, pointB = line.to, dragPoint = bumpoutPoints.point2) => {\r\n // Calculate vectors.\r\n const vectorAB = { x: pointB.x - pointA.x, y: pointB.y - pointA.y };\r\n const vectorADrag = { x: dragPoint.x - pointA.x, y: dragPoint.y - pointA.y };\r\n\r\n // Calculate the cross product of vectorAB and vectorADrag.\r\n const crossProdZ = crossProduct2D(vectorAB, vectorADrag);\r\n\r\n // Determine if the bumpout is in or out based on the cross product.\r\n if (crossProdZ > 0) {\r\n // Positive Z component indicates an outward bumpout (peak).\r\n return 'in';\r\n } else {\r\n // Negative Z component indicates an inward bumpout (valley).\r\n return 'out';\r\n }\r\n }\r\n\r\n this.drawBumpoutRect = (ctx) => {\r\n var point1 = line.calculateRenderPosition(bumpoutPoints.point1),\r\n point2 = line.calculateRenderPosition(bumpoutPoints.point2),\r\n point3 = line.calculateRenderPosition(bumpoutPoints.point3),\r\n point4 = line.calculateRenderPosition(bumpoutPoints.point4);\r\n //bumpoutHeight = getPointDistance(bumpoutPoints.point1, bumpoutPoints.point2),\r\n //bumpoutLength = getPointDistance(bumpoutPoints.point1, bumpoutPoints.point4);\r\n\r\n ctx.save();\r\n ctx.beginPath();\r\n ctx.moveTo(point1.x, point1.y);\r\n ctx.lineTo(point2.x, point2.y);\r\n ctx.lineTo(point3.x, point3.y);\r\n ctx.lineTo(point4.x, point4.y);\r\n ctx.closePath();\r\n ctx.fillStyle = deleteFillStyle;\r\n ctx.stroke();\r\n ctx.fill();\r\n ctx.restore();\r\n };\r\n\r\n this.render = function(ctx) {\r\n if (isDisabledInPopupShouldBeHidden() && isDisabledInPopupWithParents(line)) {\r\n return\r\n }\r\n renderTopBlueLine(ctx);\r\n renderRuler(ctx);\r\n renderMeasurements(ctx);\r\n };\r\n\r\n //blue line between middle points\r\n function renderTopBlueLine(ctx) {\r\n var renderFrom = line.calculateRenderPosition(bumpoutPoints.point2),\r\n renderTo = line.calculateRenderPosition(bumpoutPoints.point3);\r\n\r\n ctx.beginPath();\r\n ctx.moveTo(renderFrom.x, renderFrom.y);\r\n ctx.lineTo(renderTo.x, renderTo.y);\r\n ctx.lineWidth = 8;\r\n ctx.strokeStyle = config.lineTextColor;\r\n ctx.stroke();\r\n ctx.closePath();\r\n }\r\n\r\n const renderRuler = (ctx) => {\r\n let\r\n //toCornerLength = line.to.getAngle() || line.to.getArcLength(),\r\n //prevLine = line.getParent().getPrevLine(line),\r\n //fromCornerLength = prevLine.to.getAngle() || prevLine.to.getArcLength(),\r\n lineDirection = line.getLineDirection(),\r\n renderTo = line.calculateRenderPosition(line.to),\r\n renderFrom = line.calculateRenderPosition(line.from),\r\n point1 = line.calculateRenderPosition(bumpoutPoints.point1),\r\n point4 = line.calculateRenderPosition(bumpoutPoints.point4),\r\n xMargin = 0,\r\n yMargin = 0,\r\n xOffset = 3,\r\n yOffset = 3,\r\n bumpoutXOffset = 0,\r\n bumpoutYOffset = 0,\r\n scale = configGlobal.scale,\r\n pointDistance34 = getPointDistance(bumpoutPoints.point3, bumpoutPoints.point4);\r\n\r\n switch (lineDirection.orientation) {\r\n case \"horizontal\": {\r\n yMargin = (lineDirection.newDirection === \"west\" ? config.rulerMargin : -config.rulerMargin);\r\n bumpoutYOffset = (lineDirection.newDirection === \"west\" ? pointDistance34 * scale : -(pointDistance34 * scale));\r\n // we need to change sign of bumpoutYOffset if it is bumoutIN\r\n if (this.bumpoutInOrOut(line.from, line.to, bumpoutPoints.point2) === \"in\") {\r\n bumpoutYOffset = -bumpoutYOffset\r\n }\r\n xOffset = (lineDirection.newDirection === \"west\") ? -xOffset : xOffset;\r\n yOffset = 0;\r\n break;\r\n }\r\n case \"vertical\": {\r\n xMargin = (lineDirection.newDirection === \"south\" ? config.rulerMargin: -config.rulerMargin);\r\n bumpoutXOffset = (lineDirection.newDirection === \"south\" ? pointDistance34 * scale: -(pointDistance34 * scale));\r\n // we need to change sign of bumpoutYOffset if it is bumoutIN\r\n if (this.bumpoutInOrOut(line.from, line.to, bumpoutPoints.point2) === \"in\") {\r\n bumpoutXOffset = -bumpoutXOffset\r\n }\r\n yOffset = (lineDirection.newDirection === \"south\") ? yOffset : -yOffset;\r\n xOffset = 0;\r\n break;\r\n }\r\n // todo rotation\r\n case \"NORTHWEST\": { break;}\r\n case \"NORTHEAST\": { break;}\r\n case \"SOUTHWEST\": { break;}\r\n case \"SOUTHEAST\": { break;}\r\n default:\r\n break;\r\n }\r\n\r\n ctx.beginPath();\r\n drawArrow(ctx, renderFrom.x + xMargin, renderFrom.y + yMargin, point1.x + xMargin, point1.y + yMargin);\r\n drawArrow( ctx,\r\n point1.x + xMargin + xOffset + bumpoutXOffset,\r\n point1.y + yMargin + yOffset + bumpoutYOffset,\r\n point4.x + xMargin - xOffset + bumpoutXOffset,\r\n point4.y + yMargin - yOffset + bumpoutYOffset\r\n );\r\n drawArrow(ctx, point4.x + xMargin, point4.y + yMargin, renderTo.x + xMargin, renderTo.y + yMargin);\r\n ctx.lineWidth = 1;\r\n ctx.strokeStyle = config.lineTextColor;\r\n ctx.stroke();\r\n ctx.closePath();\r\n }\r\n\r\n const renderMeasurements = (ctx) => {\r\n var scale = configGlobal.scale,\r\n fontSize = getFontsizeSmall(),\r\n font = (fontSize).toString() + \"px \" + Config.activeFontBold,\r\n lineDirection = line.getLineDirection(),\r\n lineTextColor = config.lineTextColor,\r\n xOffset = 0,\r\n yOffset = 0;\r\n\r\n ctx.beginPath();\r\n ctx.font = font;\r\n ctx.textAlign = \"center\";\r\n ctx.fillStyle = lineTextColor;\r\n\r\n //todo rotation\r\n // const rotateAnglePart = line.from.rotateAnglePart;\r\n // const rotatedAngleValue = line.from.rotateAnglePart ? line.from.rotateAnglePart.rotatedAngleValue : 0;\r\n // const parent = line.getParent();\r\n // let moveFrom, moveTo, prevLine, nextLine, prevParallelLine, nextParallelLine;\r\n // if (lineDirection.orientation !== \"horizontal\" && lineDirection.orientation !== \"vertical\") {\r\n // prevLine = parent.getPrevLine(line);\r\n // nextLine = parent.getNextLine(line);\r\n // prevParallelLine = parent.getPrevLine(prevLine);\r\n // nextParallelLine = parent.getNextLine(nextLine);\r\n // }\r\n\r\n switch (lineDirection.orientation) {\r\n case \"horizontal\": {\r\n // renderTextBetweenPoints34\r\n xOffset = (lineDirection.newDirection === \"west\" ? -45 : 45);\r\n yOffset = (lineDirection.newDirection === \"west\" ? 60 : -60);\r\n renderHorizontalText(bumpoutPoints.point3, bumpoutPoints.point4, xOffset, yOffset, fontSize, ctx, bumpoutTextParameters.length34, 'length34');\r\n\r\n //renderTextBetweenPoints14\r\n let pointDistance34 = getPointDistance(bumpoutPoints.point3, bumpoutPoints.point4);\r\n // we need to change sign of bumpoutYOffset if it is bumoutIN\r\n if (this.bumpoutInOrOut(line.from, line.to, bumpoutPoints.point2) === \"in\") {\r\n pointDistance34 = -pointDistance34\r\n }\r\n xOffset = (lineDirection.newDirection === \"west\" ? -10 : 10);\r\n yOffset = (lineDirection.newDirection === \"west\" ? 45 + (pointDistance34 * scale) : -45 - (pointDistance34 * scale));\r\n renderHorizontalText(bumpoutPoints.point1, bumpoutPoints.point4, xOffset, yOffset, fontSize, ctx, bumpoutTextParameters.length14, 'length14');\r\n\r\n // renderTextBetweenPointsFrom1\r\n xOffset = (lineDirection.newDirection === \"west\" ? 40 : -30);\r\n yOffset = (lineDirection.newDirection === \"west\" ? 45 : -45);\r\n renderHorizontalText(line.from, bumpoutPoints.point1, xOffset, yOffset, fontSize, ctx, bumpoutTextParameters.lengthFrom1, 'lengthFrom1');\r\n\r\n //renderTextBetweenPoints4To\r\n xOffset = (lineDirection.newDirection === \"west\" ? -40 : 40);\r\n yOffset = (lineDirection.newDirection === \"west\" ? 45 : -45);\r\n renderHorizontalText(bumpoutPoints.point4, line.to, xOffset, yOffset, fontSize, ctx, bumpoutTextParameters.length4to, 'length4to');\r\n\r\n //ctx.wrapText(dstring, state.midPoint.x, state.midPoint.y, medgeText, fontSize);\r\n break;\r\n }\r\n case \"vertical\": {\r\n //renderTextBetweenPoints34\r\n yOffset = (lineDirection.newDirection === \"south\" ? 25 : -25 );\r\n xOffset = (lineDirection.newDirection === \"south\" ? 80 : -80 );\r\n\r\n renderHorizontalText(bumpoutPoints.point3, bumpoutPoints.point4, xOffset, yOffset, fontSize, ctx, bumpoutTextParameters.length34, 'length34');\r\n\r\n xOffset = (lineDirection.newDirection === \"south\" ? 35 : -35);\r\n yOffset = (lineDirection.newDirection === \"south\" ? -45 : 30 );\r\n\r\n // renderTextBetweenPointsFrom1\r\n renderRotatedText(ctx, line.from, bumpoutPoints.point1, fontSize, xOffset, yOffset, bumpoutTextParameters.lengthFrom1, 'lengthFrom1');\r\n\r\n yOffset = (lineDirection.newDirection === \"south\" ? 30 : -45 );\r\n // renderTextBetweenPoints4To\r\n renderRotatedText(ctx, bumpoutPoints.point4, line.to, fontSize, xOffset, yOffset, bumpoutTextParameters.length4to, 'length4to');\r\n\r\n // renderTextBetweenPoints14\r\n let pointDistance34 = getPointDistance(bumpoutPoints.point3, bumpoutPoints.point4);\r\n // we need to change sign of bumpoutYOffset if it is bumoutIN\r\n if (this.bumpoutInOrOut(line.from, line.to, bumpoutPoints.point2) === \"in\") {\r\n pointDistance34 = -pointDistance34\r\n }\r\n xOffset = (lineDirection.newDirection === \"south\" ? 35 + (pointDistance34 * scale) : -35 - (pointDistance34 * scale));\r\n yOffset = 0;\r\n renderRotatedText(ctx, bumpoutPoints.point1, bumpoutPoints.point4, fontSize, xOffset, yOffset, bumpoutTextParameters.length14, 'length14');\r\n\r\n break;\r\n }\r\n //TODO rotation\r\n case \"NORTHWEST\": {\r\n break;\r\n }\r\n case \"NORTHEAST\": {\r\n break;\r\n }\r\n case \"SOUTHWEST\": {\r\n break;\r\n }\r\n case \"SOUTHEAST\": {\r\n break;\r\n }\r\n default:\r\n break;\r\n }\r\n }\r\n\r\n // private functions\r\n function renderHorizontalText(point1, point2, xOffset, yOffset, fontSize, ctx, bumpoutTextParameter, part) {\r\n let scale = configGlobal.scale,\r\n midPoint = getMidPoint(point1, point2),\r\n offset = line.getOffset(),\r\n pointsDistance = getPointDistance(point1, point2),\r\n renderText = configGlobal.measureUnit === \"Metric\" ? distanceToMillimeters(pointsDistance.toString()) : distanceToInches(pointsDistance.toString()),\r\n mText = ctx.measureText(renderText);\r\n\r\n midPoint.x = midPoint.x * scale + offset.x;\r\n midPoint.y = midPoint.y * scale + offset.y + fontSize / 2;\r\n ctx.wrapText(renderText, midPoint.x + xOffset, midPoint.y + yOffset, mText, fontSize);\r\n\r\n bumpoutTextParameter.area = getTextPointsArea(midPoint.x + xOffset, midPoint.y + yOffset, mText, orientation.HORIZONTAL);\r\n bumpoutTextParameter.midPoint = {x: midPoint.x + xOffset, y: midPoint.y + yOffset};\r\n bumpoutTextParameter.pointsDistance = pointsDistance;\r\n bumpoutTextParameter.points = { point1: point1, point2: point2 };\r\n bumpoutTextParameter.part = part;\r\n bumpoutTextParameter.orientation = orientation.HORIZONTAL;\r\n }\r\n\r\n function renderRotatedText(ctx, point1, point2, fontSize, xOffset, yOffset, bumpoutTextParameter, part) {\r\n let scale = configGlobal.scale,\r\n midPoint = getMidPoint(point1, point2),\r\n offset = line.getOffset(),\r\n pointsDistance = getPointDistance(point1, point2),\r\n textToRender = configGlobal.measureUnit === \"Metric\" ? distanceToMillimeters(pointsDistance.toString()) : distanceToInches(pointsDistance.toString()),\r\n mText = ctx.measureText(textToRender),\r\n lineDirection = line.getLineDirection();\r\n\r\n midPoint.x = midPoint.x * scale + offset.x;\r\n midPoint.y = midPoint.y * scale + offset.y + fontSize / 2;\r\n\r\n ctx.save();\r\n ctx.translate(\r\n lineDirection.newDirection === \"south\" ? midPoint.x + xOffset : midPoint.x + xOffset,\r\n lineDirection.newDirection === \"south\" ? midPoint.y + yOffset : midPoint.y + yOffset\r\n );\r\n ctx.rotate(lineDirection.newDirection === \"south\" ? Math.PI / 2 : -Math.PI / 2);\r\n ctx.wrapText(textToRender, 0, 0, ctx.measureText(textToRender), fontSize);\r\n ctx.restore();\r\n\r\n bumpoutTextParameter.area = getTextPointsArea(midPoint.x + xOffset, midPoint.y + yOffset, mText, orientation.VERTICAL);\r\n bumpoutTextParameter.midPoint = {x: midPoint.x + xOffset, y: midPoint.y + yOffset};\r\n bumpoutTextParameter.pointsDistance = pointsDistance;\r\n bumpoutTextParameter.points = { point1: point1, point2: point2 };\r\n bumpoutTextParameter.part = part;\r\n bumpoutTextParameter.orientation = orientation.VERTICAL;\r\n }\r\n\r\n function drawArrow(context, fromX, fromY, toX, toY) {\r\n var headLen = 10; // length of head in pixels\r\n var dx = toX - fromX;\r\n var dy = toY - fromY;\r\n var angle = Math.atan2(dy, dx);\r\n\r\n context.moveTo(fromX, fromY);\r\n context.lineTo(toX, toY);\r\n context.lineTo(toX - headLen * Math.cos(angle - Math.PI / 6), toY - headLen * Math.sin(angle - Math.PI / 6));\r\n context.moveTo(toX, toY);\r\n context.lineTo(toX - headLen * Math.cos(angle + Math.PI / 6), toY - headLen * Math.sin(angle + Math.PI / 6));\r\n\r\n context.moveTo(fromX, fromY);\r\n context.lineTo(fromX + headLen * Math.cos(angle - Math.PI / 6), fromY + headLen * Math.sin(angle - Math.PI / 6));\r\n context.moveTo(fromX, fromY);\r\n context.lineTo(fromX + headLen * Math.cos(angle + Math.PI / 6), fromY + headLen * Math.sin(angle + Math.PI / 6));\r\n }\r\n\r\n function onMouseMove(mousePos, e) {\r\n void e;\r\n state.isHoveredOverText = false;\r\n state.isHoveringRect = false;\r\n\r\n for (const property in bumpoutTextParameters) {\r\n if (isMouseOverText(bumpoutTextParameters[property].area, mousePos)) {\r\n state.isHoveredOverText = true;\r\n state.hoveredText = bumpoutTextParameters[property];\r\n break;\r\n }\r\n }\r\n\r\n if (isMouseOverRect(mousePos)) {\r\n state.isHoveringRect = true;\r\n }\r\n\r\n if (isMouseOverPoint(mousePos, bumpoutPoints.dragPoint)) {\r\n // todo angle\r\n // if (workspace.getAllowBumpoutEdges() && !line.from.angleIsChanged && !line.to.angleIsChanged) {\r\n\r\n if (state.mouseDown) {\r\n self.moveLineWithMouse(mousePos);\r\n }\r\n EventManager.releaseStealLock(parent); //TODO Cursor\r\n EventManager.stealCursor(true, true);\r\n switch(line.getOrientation()) {\r\n case orientation.HORIZONTAL:\r\n EventManager.setCursor(\"n-resize\", self);\r\n break;\r\n case orientation.VERTICAL:\r\n EventManager.setCursor(\"e-resize\", self);\r\n break;\r\n case orientation.NORTHWEST:\r\n case orientation.SOUTHEAST:\r\n EventManager.setCursor(\"ne-resize\", self);\r\n break;\r\n case orientation.NORTHEAST:\r\n case orientation.SOUTHWEST:\r\n EventManager.setCursor(\"nw-resize\", self);\r\n break;\r\n }\r\n\r\n return state.mouseDown;\r\n\r\n\r\n // if (configGlobal.highlight.lines && state.isHoveringPoint) {\r\n // EventManager.releaseStealLock(line.parent);\r\n // EventManager.stealCursor();\r\n // return false;\r\n // }\r\n\r\n } else if (isMouseOverPoint(mousePos, bumpoutPoints.point1)) {\r\n // todo angle\r\n // if (workspace.getAllowBumpoutEdges() && !line.from.angleIsChanged && !line.to.angleIsChanged) {\r\n if (state.mouseDown) {\r\n self.movePointWithMouse(mousePos, bumpoutPoints.point1, bumpoutPoints.point2, bumpoutPoints.point4);\r\n }\r\n return state.mouseDown;\r\n\r\n } else if (isMouseOverPoint(mousePos, bumpoutPoints.point4)) {\r\n if (state.mouseDown) {\r\n self.movePointWithMouse(mousePos, bumpoutPoints.point4, bumpoutPoints.point3, bumpoutPoints.point1);\r\n }\r\n return state.mouseDown;\r\n\r\n } else if (state.isHoveredOverText) {\r\n EventManager.stealCursor();\r\n EventManager.setCursor((state.hoveredText.orientation === orientation.HORIZONTAL) ? \"text\" : \"text-vertical\", self);\r\n\r\n } else {\r\n EventManager.resetCursor(self);\r\n return false;\r\n }\r\n\r\n // if (workspace.getHoverShape() !== parent) {\r\n // state.isHoveringPoint = false;\r\n // }\r\n\r\n }\r\n\r\n function isMouseOverPoint(mousePos, point) {\r\n state.isHoveringPoint = !!point.isOverPointField();\r\n // console.log(\"point\", point.id);\r\n // console.log(\"state.hoveredPoint\", state.hoveredPoint.id);\r\n // console.log(\"mousePos\", state.isHoveringPoint);\r\n return state.isHoveringPoint || state.mouseDown && state.hoveredPoint && point.id === state.hoveredPoint.id;\r\n }\r\n\r\n function isMouseOverText(pointArea, mousePos) {\r\n return pnpolyArray(pointArea, mousePos);\r\n }\r\n\r\n function isMouseOverRect(mousePos) {\r\n let point1 = line.calculateRenderPosition(bumpoutPoints.point1),\r\n point2 = line.calculateRenderPosition(bumpoutPoints.point2),\r\n point3 = line.calculateRenderPosition(bumpoutPoints.point3),\r\n point4 = line.calculateRenderPosition(bumpoutPoints.point4);\r\n\r\n let pointArea = [\r\n [point1.x, point1.y],\r\n [point2.x, point2.y],\r\n [point3.x, point3.y],\r\n [point4.x, point4.y]\r\n ];\r\n\r\n return pnpolyArray(pointArea, mousePos);\r\n }\r\n\r\n function getTextPointsArea(x, y, mtext, textOrientation) {\r\n const lineDirection = line.getLineDirection();\r\n let pointsArray = [];\r\n if (textOrientation === orientation.HORIZONTAL) {\r\n pointsArray = [\r\n [x - Math.ceil10(mtext.width ,-2)/2 - 10, y - 15],\r\n [x + Math.ceil10(mtext.width ,-2)/2 + 10, y - 15],\r\n [x + Math.ceil10(mtext.width ,-2)/2 + 10, y + 10],\r\n [x - Math.ceil10(mtext.width ,-2)/2 - 10, y + 10],\r\n ]\r\n } else if (textOrientation === orientation.VERTICAL) {\r\n if (lineDirection.newDirection === \"south\") {\r\n pointsArray = [\r\n [x + 25, y - Math.ceil10(mtext.width ,-2)/2 - 10],\r\n [x + 5, y - Math.ceil10(mtext.width ,-2)/2 - 10],\r\n [x + 5, y + Math.ceil10(mtext.width ,-2)/2 - 5],\r\n [x + 25, y + Math.ceil10(mtext.width ,-2)/2 - 5],\r\n ];\r\n } else if (lineDirection.newDirection === \"north\") {\r\n pointsArray = [\r\n [x - 25, y - Math.ceil10(mtext.width ,-2)/2 - 10],\r\n [x - 5, y - Math.ceil10(mtext.width ,-2)/2 - 10],\r\n [x - 5, y + Math.ceil10(mtext.width ,-2)/2 + 5],\r\n [x - 25, y + Math.ceil10(mtext.width ,-2)/2 + 5],\r\n ];\r\n }\r\n } else {\r\n // debugger;//eslint-disable-line\r\n }\r\n\r\n return pointsArray;\r\n }\r\n\r\n function onMouseUp(mousePos, e) {\r\n void mousePos;\r\n void e;\r\n if (state.mouseDown) {\r\n state.mouseDown = false;\r\n state.mouseDownPosition = null;\r\n }\r\n }\r\n\r\n function onMouseDown(mousePos, e) {\r\n void e;\r\n if (state.isHoveringPoint) {\r\n state.mouseDown = true;\r\n state.mouseDownPosition = mousePos;\r\n for (const point in bumpoutPoints) {\r\n if (bumpoutPoints[point].isOverPointField(mousePos)) {\r\n state.hoveredPoint = bumpoutPoints[point];\r\n }\r\n }\r\n return true;\r\n }\r\n\r\n if (state.isHoveredOverText && !document.querySelector(\".line-input\")) {\r\n window.lineInputFocused = true;\r\n EventManager.stealCursor();\r\n\r\n const maxLength = Math.round(getMaxResizeWidth(line) * configGlobal.getMeasureMultiplier());\r\n const fontSize = getFontsize();\r\n const parent = line.getParent();\r\n const nextLine = parent.getNextLine(line);\r\n const minValue = -nextLine.getLineDistance();\r\n const inputPosition = { x: state.hoveredText.midPoint.x, y: state.hoveredText.midPoint.y };\r\n\r\n // Set orientation and position adjustments based on line direction\r\n let inputClass = \"line-input\";\r\n if (state.hoveredText.orientation === orientation.HORIZONTAL) {\r\n inputClass = \"line-input\";\r\n } else if (state.hoveredText.orientation === orientation.VERTICAL) {\r\n const lineDirection = line.getLineDirection();\r\n if (lineDirection.newDirection === \"south\") {\r\n inputClass = \"line-input line-input--vertical-rotated\";\r\n inputPosition.x -= fontSize;\r\n } else {\r\n inputClass = \"line-input line-input--vertical\";\r\n inputPosition.x += fontSize;\r\n }\r\n }\r\n\r\n const inputValue = self.bumpoutInOrOut() === \"in\"\r\n ? -Math.round(state.hoveredText.pointsDistance * configGlobal.getMeasureMultiplier())\r\n : Math.round(state.hoveredText.pointsDistance * configGlobal.getMeasureMultiplier());\r\n\r\n const hoveredText = state.hoveredText;\r\n // Create adjustable input\r\n const inputWrapper = createAdjustableInput({\r\n position: inputPosition,\r\n initialValue: inputValue.toString(),\r\n min: minValue,\r\n max: maxLength,\r\n orientation: inputClass.includes(\"vertical\") ? \"vertical\" : \"horizontal\",\r\n onChange: (value) => {\r\n if (sqftConfig.measureUnit === MEASURE_UNITS.Metric) {\r\n value = mmToInches(value);\r\n }\r\n let scaledValue = Math.round10(value / configGlobal.getMeasureMultiplier(), -2);\r\n self.resizeBumpoutPart(scaledValue, hoveredText);\r\n },\r\n onClose: () => {\r\n window.lineInputFocused = false;\r\n EventManager.removeEvent({ name: 'lineInput' });\r\n },\r\n step: 1,\r\n });\r\n\r\n // Append the input wrapper to the DOM\r\n document.querySelector(\".sqft-main-grid\").appendChild(inputWrapper);\r\n // Focus and select input on creation\r\n const input = inputWrapper.querySelector(\".line-input-field\");\r\n input.focus();\r\n\r\n return false;\r\n }\r\n\r\n return false;\r\n }\r\n\r\n function onMouseLeave() {\r\n state.isHoveringPoint = false;\r\n state.mouseDown = false;\r\n state.hoveredPoint = null;\r\n state.isHoveredOverText = false;\r\n state.hoveredText = {};\r\n }\r\n}\r\n","import config from \"../../../../store/sqftConfig\";\r\nimport COLOR_THEMES, {COLOR} from \"../../../../store/colorThemes\";\r\nimport {RESOURCE_ATTACHED_TO_TYPE} from \"../../../../../../constants\";\r\n\r\nexport default class Color {\r\n static getOutlineHoverStrokeStyle() {\r\n switch (config.highlight.type) {\r\n case 'edge':\r\n default:\r\n return COLOR_THEMES[config.activeTheme].active_transparent;\r\n case 'backsplash':\r\n return COLOR_THEMES[config.activeTheme].primary_hover;\r\n case 'wall':\r\n return 'rgba(0,0,0,0.5)';\r\n }\r\n }\r\n\r\n static getOutlineStrokeStyle(type) {\r\n switch (type) {\r\n case 'edge':\r\n return COLOR_THEMES[config.activeTheme].active;\r\n case 'backsplash':\r\n return COLOR_THEMES[config.activeTheme].primary;\r\n case 'wall':\r\n return '#000000';\r\n case RESOURCE_ATTACHED_TO_TYPE.end_cap:\r\n return COLOR.red;\r\n default:\r\n return COLOR_THEMES[config.activeTheme].active_transparent;\r\n }\r\n }\r\n}\r\n","class LineAttachmentsComposite {\r\n constructor() {\r\n this.children = [];\r\n }\r\n\r\n add(component) {\r\n this.children.push(component);\r\n }\r\n\r\n execute() {\r\n this.children.forEach(child => child.execute());\r\n }\r\n}\r\n\r\nexport default LineAttachmentsComposite\r\n","import {orientation} from \"../../../../helpers/sqftHelper\";\r\nimport point from \"./point\";\r\n\r\nexport const getAngle = (rotateAnglePart, angleValue) => {\r\n return (rotateAnglePart && rotateAnglePart.angleDirection === \"right\")\r\n ? (angleValue < 90) ? -angleValue : 90 - angleValue\r\n : (angleValue < 90) ? angleValue : angleValue - 90;\r\n};\r\n\r\nexport const getRotationCentrePoint = (rotateAnglePart, angleValue, bottomLine, basePoint, secondaryPoint) => {\r\n let {\r\n basePointX, basePointX2, basePointY, basePointY2, baseOldX, baseOldY, baseOldX1, baseOldY1, widthDiff, rotated90_1, rotated90_2\r\n } = rotateAnglePart.baseConfiguration;\r\n\r\n void baseOldX; void baseOldY; void baseOldX1; void baseOldY1; void rotated90_1; void rotated90_2;\r\n let rotationCenterPoint;\r\n let line;\r\n let newDirection;\r\n widthDiff = Math.round(widthDiff);\r\n\r\n if (rotateAnglePart && rotateAnglePart.shapeType === \"horseshoe\" || rotateAnglePart && rotateAnglePart.shapeType === \"wideangle\") {\r\n if(angleValue < 90) {\r\n rotationCenterPoint = {\r\n x: basePointX2,\r\n y: basePointY2\r\n };\r\n } else {\r\n if(rotateAnglePart && rotateAnglePart.angleDirection === \"right\") {\r\n line = secondaryPoint.getParent();\r\n newDirection = line.getLineDirection().newDirection;\r\n\r\n switch (line.getOrientation()) {\r\n case orientation.HORIZONTAL:{\r\n if (newDirection === \"east\") { rotationCenterPoint = { x: basePointX + widthDiff, y: basePointY }}\r\n if (newDirection === \"west\") { rotationCenterPoint = { x: basePointX - widthDiff, y: basePointY }}\r\n break;\r\n }\r\n case orientation.VERTICAL: {\r\n if (newDirection === \"north\") { rotationCenterPoint = { x: basePointX, y: basePointY - widthDiff }}\r\n if (newDirection === \"south\") { rotationCenterPoint = { x: basePointX, y: basePointY + widthDiff }}\r\n break;\r\n }\r\n default:\r\n break;\r\n }\r\n } else {\r\n line = basePoint.getParent();\r\n newDirection = line.getLineDirection().newDirection;\r\n\r\n switch (line.getOrientation()) {\r\n case orientation.HORIZONTAL:{\r\n if (newDirection === \"east\") { rotationCenterPoint = { x: basePointX + widthDiff, y: basePointY }}\r\n if (newDirection === \"west\") { rotationCenterPoint = { x: basePointX - widthDiff, y: basePointY }}\r\n break;\r\n }\r\n case orientation.VERTICAL: {\r\n if (newDirection === \"north\") { rotationCenterPoint = { x: basePointX, y: basePointY - widthDiff }}\r\n if (newDirection === \"south\") { rotationCenterPoint = { x: basePointX, y: basePointY + widthDiff }}\r\n break;\r\n }\r\n default:\r\n break;\r\n }\r\n }\r\n }\r\n }\r\n\r\n if (rotationCenterPoint === undefined) {\r\n var tempLinePointFrom = new point(line.from.x, line.from.y);\r\n var tempLinePointTo = new point(line.to.x, line.to.y);\r\n tempLinePointFrom.init(bottomLine);\r\n tempLinePointFrom.layout = 'white-circle';\r\n\r\n tempLinePointTo.init(bottomLine);\r\n tempLinePointTo.layout = 'white-circle';\r\n\r\n rotationCenterPoint = getRotationCentrePointByBottomLine(rotateAnglePart, angleValue, bottomLine);\r\n }\r\n\r\n return rotationCenterPoint\r\n};\r\n\r\nexport const getRotationCentrePointByBottomLine = (rotateAnglePart, angleValue, bottomLine) => {\r\n const {\r\n basePointX, basePointX2, basePointY, basePointY2, baseOldX, baseOldY, baseOldX1, baseOldY1, widthDiff, rotated90_1, rotated90_2\r\n } = rotateAnglePart.baseConfiguration;\r\n void baseOldX; void baseOldY; void baseOldX1; void baseOldY1; void rotated90_1; void rotated90_2;\r\n\r\n let rotationCenterPoint;\r\n if (rotateAnglePart && rotateAnglePart.shapeType === \"wideangle\") {\r\n rotationCenterPoint = {\r\n x: angleValue < 90 ? basePointX2 : (rotateAnglePart && rotateAnglePart.angleDirection === \"right\") ? basePointX - widthDiff : basePointX + widthDiff,\r\n y: angleValue < 90 ? basePointY2 : basePointY,\r\n };\r\n } else if (rotateAnglePart && rotateAnglePart.shapeType === \"horseshoe\") {\r\n if(angleValue < 90) {\r\n rotationCenterPoint = {\r\n x: basePointX2,\r\n y: basePointY2\r\n };\r\n } else {\r\n if(rotateAnglePart && rotateAnglePart.angleDirection === \"right\") {\r\n switch (bottomLine.getOrientation()) {\r\n case orientation.HORIZONTAL:{ rotationCenterPoint = { x: basePointX, y: basePointY }; break;}\r\n case orientation.VERTICAL: { rotationCenterPoint = { x: basePointX, y: basePointY }; break;}\r\n case orientation.SOUTHEAST: { rotationCenterPoint = { x: basePointX - widthDiff, y: basePointY}; break;}\r\n case orientation.NORTHEAST: { rotationCenterPoint = { x: basePointX, y: basePointY + widthDiff }; break; }\r\n case orientation.SOUTHWEST: { rotationCenterPoint = { x: basePointX, y: basePointY - widthDiff}; break; }\r\n case orientation.NORTHWEST: { rotationCenterPoint = { x: basePointX + widthDiff, y: basePointY }; break; }\r\n default:\r\n break;\r\n }\r\n } else {\r\n switch (bottomLine.getOrientation()) {\r\n case orientation.HORIZONTAL: { rotationCenterPoint = { x: basePointX, y: basePointY }; break; }\r\n case orientation.VERTICAL: { rotationCenterPoint = { x: basePointX, y: basePointY }; break; }\r\n case orientation.SOUTHEAST: { rotationCenterPoint = { x: basePointX, y: basePointY + widthDiff}; break; }\r\n case orientation.NORTHEAST: { rotationCenterPoint = { x: basePointX + widthDiff, y: basePointY}; break; }\r\n case orientation.SOUTHWEST: { rotationCenterPoint = { x: basePointX - widthDiff, y: basePointY}; break; }\r\n case orientation.NORTHWEST: { rotationCenterPoint = { x: basePointX, y: basePointY - widthDiff}; break; }\r\n default:\r\n break;\r\n }\r\n }\r\n }\r\n }\r\n\r\n return rotationCenterPoint\r\n};\r\n","import workspace from \"../../workspace\";\r\nimport COLOR_THEMES from \"../../../store/colorThemes\";\r\nimport sqftConfig from \"../../../store/sqftConfig\";\r\nimport store from \"../../../../../../../store\";\r\nimport SeamTool from \"./slabParts/seamTool\";\r\nimport {RENDER_TEMPLATES, SHAPE_PART_ID, SIDEBAR_SLAB_SEAM_BUTTONS} from \"../../../../../constants\";\r\nimport RenderParts from \"../../../helpers/renderParts\";\r\nimport ShapeMeasurementArrows from \"./shapeMeasurementArrows\";\r\nimport ShapeAbsolute from \"./shapeAbsolute\";\r\nimport workspaceControllers from \"../../../store/workspaceControllers\";\r\nimport {getPointField} from \"../../../../../helpers/sqftHelper\";\r\nimport RenderFigures from \"../../../helpers/renderFigures\";\r\n\r\nclass ShapeSlab {\r\n __shape;\r\n __seamTool;\r\n __intersectionPoints = [];\r\n __minLengthToIntersectionPoints;\r\n __absolutePos = null; //not used?\r\n shapeAbsolute = new ShapeAbsolute(this);\r\n\r\n constructor(shape) {\r\n this.__shape = shape;\r\n this.__seamTool = new SeamTool(shape);\r\n this.__measurementArrows = new ShapeMeasurementArrows(shape);\r\n }\r\n setSlabPos(pos) {\r\n this.__shape.slabPos = pos\r\n }\r\n setParentId(parentId) {\r\n this.__shape.shapeParent = parentId\r\n }\r\n setRotationDegreesSlab(rotationDegrees) {\r\n this.__shape.rotatedDegreesSlab = rotationDegrees\r\n }\r\n addSeamPieceVertical = (mousePos) => {\r\n this.__seamTool.addSeamPieceVertical(mousePos);\r\n workspaceControllers.snappedShapeGroups.updateShapesSnappedGroups(false);\r\n };\r\n addSeamPieceHorizontal = (mousePos) => {\r\n this.__seamTool.addSeamPieceHorizontal(mousePos);\r\n workspaceControllers.snappedShapeGroups.updateShapesSnappedGroups(false);\r\n };\r\n setAbsolutePos = (pos) => {\r\n //this.__absolutePos = pos;\r\n this.shapeAbsolute.setAbsolutePos(pos);\r\n };\r\n getAbsolutePosition = () => {\r\n //return this.__absolutePos;\r\n return this.shapeAbsolute.getAbsolutePosition();\r\n };\r\n getPosition = () => {\r\n let absolutePos = this.getAbsolutePosition();\r\n\r\n if (absolutePos) {\r\n return absolutePos\r\n }\r\n\r\n return this.__shape.slabPos;\r\n };\r\n setIntersectionsPoints = (points) => {\r\n this.__intersectionPoints = points;\r\n };\r\n setMinLengthToIntersectionPoints = (length) => {\r\n this.__minLengthToIntersectionPoints = length;\r\n };\r\n resetShapeSeams = () => {\r\n for (let i = this.__shape.shapePieces.length - 1; i >= 0; i--) {\r\n let shp = workspace.getShapeById(this.__shape.shapePieces[i]);\r\n if (shp.shapePieces) {\r\n shp.shapeSlab.resetShapeSeams();\r\n }\r\n workspace.removeShape(shp);\r\n }\r\n this.__shape.shapePieces.splice(0, this.__shape.shapePieces.length);\r\n };\r\n import = (data) => {\r\n this.shapeAbsolute.setAbsolutePos(data ? data.absolutePosition : null);\r\n }\r\n export = () => {\r\n return {\r\n absolutePosition: this.getAbsolutePosition()\r\n }\r\n }\r\n\r\n render = (ctx,\r\n staticOffset = null,\r\n strokeTemplate= RENDER_TEMPLATES.default,\r\n fillTemplate = RENDER_TEMPLATES.accordingToFeature\r\n ) => {\r\n if (workspace && workspace.getState().loading) return;\r\n if (this.__shape.partId === SHAPE_PART_ID.slabPlaceHolder) {\r\n RenderParts.drawDiagonalStripes(ctx, this.__shape, 2);\r\n } else {\r\n RenderParts.drawShapeBorders(ctx, staticOffset, strokeTemplate, fillTemplate, this.__shape);\r\n }\r\n const reduxState = store.getState()\r\n let isMeasurementVisibleInSlabMode = reduxState.sqftSlabState.isMeasurementVisibleInSlabMode;\r\n if (isMeasurementVisibleInSlabMode) {\r\n this.renderMeasurementArrows(ctx);\r\n }\r\n this.renderSeamLinesOnHover(ctx);\r\n this.renderSeamCutPoints(ctx);\r\n };\r\n\r\n renderSeamLinesOnHover = (ctx) => {\r\n if (this.__shape.isHovering() && workspace.getHoveredSqftShape() === this.__shape ) {\r\n let sqftMenuState = store.getState().sqftMenuState;\r\n if (sqftMenuState.activeButton === SIDEBAR_SLAB_SEAM_BUTTONS.addSeamVertical) {\r\n this.__seamTool.seamToolRender.renderSeamVerticalIntersection(ctx);\r\n } else if (sqftMenuState.activeButton === SIDEBAR_SLAB_SEAM_BUTTONS.addSeamHorizontal) {\r\n this.__seamTool.seamToolRender.renderSeamHorizontalIntersection(ctx);\r\n }\r\n }\r\n }\r\n\r\n renderSeamCutPoints = (ctx) => {\r\n const strokeStyle = '#e01333';\r\n for (const seamCutPoint of this.__shape.seamCutPoints) {\r\n const seamCutPointOnField = getPointField(seamCutPoint.x, seamCutPoint.y, this.__shape);\r\n RenderFigures.renderCircle(seamCutPointOnField, 4, 1, strokeStyle, strokeStyle);\r\n RenderFigures.renderCircle(seamCutPointOnField, 7, 1, strokeStyle);\r\n }\r\n if (this.__shape.seamCutPoints.length === 2) {\r\n const startPoint = this.__shape.seamCutPoints[0];\r\n const endPoint = this.__shape.seamCutPoints[1];\r\n const startPointOnField = getPointField(startPoint.x, startPoint.y, this.__shape);\r\n const endPointOnField = getPointField(endPoint.x, endPoint.y, this.__shape);\r\n ctx.moveTo(startPointOnField.x, startPointOnField.y);\r\n ctx.lineTo(endPointOnField.x, endPointOnField.y);\r\n ctx.strokeStyle = strokeStyle;\r\n ctx.stroke();\r\n }\r\n }\r\n\r\n renderLinesWithoutStroke = (ctx, staticOffset = null, sqftMode) => {\r\n if (workspace && workspace.getState().loading) return;\r\n let lines = this.__shape.getLines();\r\n ctx.lineWidth = 2;\r\n ctx.strokeStyle = COLOR_THEMES[sqftConfig.activeTheme].active;\r\n for (let i = 0; i < lines.length; i++) {\r\n lines[i].staticOffset = staticOffset;\r\n lines[i].render(ctx, i > 0, sqftMode);\r\n lines[i].staticOffset = null;\r\n }\r\n };\r\n\r\n renderMeasurementArrows = (ctx) => {\r\n const snappedShapeGroup = this.shapeAbsolute.getSnappedShapeGroup();\r\n //We will render measurement arrows only if there are no shapes snaps to the current shape;\r\n if (snappedShapeGroup !== null) {\r\n const snappedShapes = workspaceControllers.snappedShapeGroups.getSnappedShapes(snappedShapeGroup);\r\n if (snappedShapes.length > 1) {\r\n return\r\n }\r\n }\r\n\r\n this.__measurementArrows.render(ctx);\r\n };\r\n}\r\n\r\nexport default ShapeSlab\r\n","import _ from 'lodash';\r\n\r\nimport {\r\n getPointField,\r\n} from \"../../../../../../helpers/sqftHelper\";\r\nimport sqftShapeManager from \"../../../../store/sqftShapeManager\";\r\nimport {SHAPE_PART_ID, SHAPE_ROTATE_DIRECTION} from \"../../../../../../constants\";\r\nimport SqftStore from \"../../../../store/sqftStore\";\r\nimport ShapeHelper from \"../../../../../../helpers/shapeHelper\";\r\nimport SeamToolRender from \"./seamToolRender\";\r\nimport SlabWorkspace from \"../../../slab/slabWorkspace\";\r\nimport SlabAdditionalShape from \"../../../slab/slabAdditionalShape\";\r\nimport {getHorizontalLineIntersectionPoints, getVerticalLineIntersectionPoints} from \"./seamToolHelper\";\r\nimport {createShapeFromPoints} from \"../../../../../../helpers/freeDrawHelper\";\r\n\r\nclass SeamTool {\r\n __shape;\r\n seamToolRender;\r\n\r\n constructor(_shape) {\r\n this.__shape = _shape;\r\n this.seamToolRender = new SeamToolRender(this);\r\n }\r\n\r\n getMaxLength = () => {\r\n //todo\r\n return 10\r\n }\r\n //todo\r\n addSeamPieceHorizontal = (mousePos) => {\r\n // const mousePosOnFiled = getMousePositionOnField(mousePos.x, mousePos.y);\r\n // const serverState = store.getState().serverState;\r\n // const pos = this.__shape.getPosition();\r\n //let intersectionPoint1 = {x: -serverState.windowWidth, y: mousePosOnFiled.y - pos.y};\r\n //let intersectionPoint2 = {x: serverState.windowWidth, y: mousePosOnFiled.y - pos.y};\r\n\r\n let absoluteLinePoint1Pos = this.seamToolRender.absoluteLinePoint1Pos;\r\n let toPoint = {...mousePos};\r\n if (absoluteLinePoint1Pos && absoluteLinePoint1Pos.y) {\r\n let pf = getPointField(absoluteLinePoint1Pos.x, absoluteLinePoint1Pos.y, this.__shape);\r\n toPoint.y = pf.y;\r\n }\r\n const lines = this.__shape.getLines();\r\n console.log(\"linesPoints\", lines.map((line) => { return {x: line.from.x, y: line.from.y}}));\r\n\r\n const linesWithoutAnglePoints = this.__shape.createLinesWithoutAngle();\r\n let [intersectionPointAndLine1, intersectionPointAndLine2] = getHorizontalLineIntersectionPoints(toPoint, this.__shape, linesWithoutAnglePoints);\r\n if (intersectionPointAndLine1 && intersectionPointAndLine2) {\r\n let seamShapesPoints = this.splitShape(linesWithoutAnglePoints, intersectionPointAndLine1, intersectionPointAndLine2, 'vertical');\r\n console.log(\"intersectionPoint1\", intersectionPointAndLine1);\r\n console.log(\"intersectionPoint2\", intersectionPointAndLine2);\r\n\r\n console.log(\"linesWithoutAnglePoints\", linesWithoutAnglePoints.map((line) => { return {x: line.from.x, y: line.from.y}}));\r\n console.log(\"piece1Points\", seamShapesPoints[0].map(point => { return {x: point.x, y: point.y}}));\r\n console.log(\"piece2Points\", seamShapesPoints[1].map(point => { return {x: point.x, y: point.y}}));\r\n this.createShapesFromSeamPointsAndSetSlabRotation(seamShapesPoints);\r\n\r\n this.__shape.deregisterEvents();\r\n //this.__shape.shapeSlab.setRotationDegreesSlab(0); //? not needed\r\n SqftStore.addSeamHistory(this.__shape);\r\n } else {\r\n console.log(\"getHorizontalLineIntersectionPoints error missing intersections\");\r\n }\r\n }\r\n\r\n createShapesFromSeamPointsAndSetSlabRotation = (seamShapesPoints) => {\r\n let parentShapeCenter = this.__shape.getCenter();\r\n\r\n for (let seamPoints of seamShapesPoints) {\r\n let isBacksplashPiece = [SHAPE_PART_ID.backsplashPiece, SHAPE_PART_ID.waterfallPiece].includes(this.__shape.partId);\r\n let partId = SHAPE_PART_ID.seamPiece;\r\n seamPoints = this.preparePointCords(seamPoints);\r\n let shapePieceId = createShapeFromPoints(seamPoints, partId, true);\r\n let shapePiece = sqftShapeManager.getShapeById(shapePieceId);\r\n shapePiece.featureId = this.__shape.featureId;\r\n shapePiece.featureName = this.__shape.featureName;\r\n shapePiece.colorSet = this.__shape.colorSet;\r\n shapePiece.deregisterPartEvents();\r\n let rotatedDiffPos = {x: 0, y: 0};\r\n\r\n if (isBacksplashPiece) {\r\n //add additional backsplash to slabWorkspace\r\n let parentSlabAdditionalShape = SlabWorkspace.slabAdditionalShapes.findOneByBacksplashShapeId(this.__shape.id);\r\n let newSlabAdditionalShape = new SlabAdditionalShape(parentSlabAdditionalShape.line, shapePieceId);\r\n SlabWorkspace.slabAdditionalShapes.addActiveBacksplash(newSlabAdditionalShape);\r\n }\r\n\r\n shapePiece.shapeSlab.setSlabPos(Object.assign({}, this.__shape.slabPos));\r\n if (this.__shape.rotatedDegreesSlab !== 0) {\r\n\r\n // this will rotate sqft and slab shape points to 0 it is required for correct rotation and drawing images in the right part\r\n let shapePieceCenterPointBeforeRotation = ShapeHelper.getCenterPoint(shapePiece.getLines().map(line => line.from));\r\n let reqRotatedDegreesToZero = 360 - this.__shape.rotatedDegreesSlab;\r\n //console.log(\"piece before rotate1\", shapePiece.getLines().map((line) => { return {x: line.from.x, y: line.from.y}}));\r\n shapePiece.rotate(reqRotatedDegreesToZero, SHAPE_ROTATE_DIRECTION.left, true, parentShapeCenter);\r\n //console.log(\"piece rotate2\", shapePiece.getLines().map((line) => { return {x: line.from.x, y: line.from.y}}));\r\n shapePiece.rotate(360, SHAPE_ROTATE_DIRECTION.left, false, parentShapeCenter);\r\n //console.log(\"piece rotate3\", shapePiece.getLines().map((line) => { return {x: line.from.x, y: line.from.y}}));\r\n shapePiece.setRotationDegrees(0);\r\n shapePiece.shapeSlab.setRotationDegreesSlab(0);\r\n\r\n //rotate shape and move it to diff position (this is for correct displaying right part)\r\n shapePiece.rotate(this.__shape.rotatedDegreesSlab, SHAPE_ROTATE_DIRECTION.left, true);\r\n let shapePieceCenterPointAfterRotation = ShapeHelper.getCenterPoint(shapePiece.getLines().map(line => line.from));\r\n this.__shape.setIsPointsChanged(false); // prevent points change after rotation\r\n console.log(\"piece rotate4\", shapePiece.getLines().map((line) => { return {x: line.from.x, y: line.from.y}}));\r\n\r\n rotatedDiffPos = {\r\n x: shapePieceCenterPointBeforeRotation.x - shapePieceCenterPointAfterRotation.x,\r\n y: shapePieceCenterPointBeforeRotation.y - shapePieceCenterPointAfterRotation.y,\r\n }\r\n }\r\n let coreShapeAbsolutePosition = this.__shape.getSlabAbsolutePosition()\r\n let slabAbsolutePosition = coreShapeAbsolutePosition ? coreShapeAbsolutePosition : this.__shape.getSlabPosition();\r\n shapePiece.slabPos = {\r\n x: slabAbsolutePosition.x + rotatedDiffPos.x,\r\n y: slabAbsolutePosition.y + rotatedDiffPos.y,\r\n }\r\n\r\n shapePiece.shapeSlab.setParentId(this.__shape.id); //this is not needed maybe in future\r\n shapePiece.setPosition(Object.assign({}, this.__shape.getRegularPosition()));\r\n\r\n this.__shape.addShapePieceId(shapePiece.id);\r\n }\r\n };\r\n\r\n addSeamPieceVertical = (mousePos) => {\r\n // const mousePosOnFiled = getMousePositionOnField(mousePos.x, mousePos.y);\r\n // const serverState = store.getState().serverState;\r\n // const pos = this.__shape.getPosition();\r\n //\r\n // let intersectionPoint1 = {x: mousePosOnFiled.x - pos.x, y: -serverState.windowHeight};\r\n // let intersectionPoint2 = {x: mousePosOnFiled.x - pos.x, y: serverState.windowHeight};\r\n let absoluteLinePoint1Pos = this.seamToolRender.absoluteLinePoint1Pos;\r\n let toPoint = {...mousePos};\r\n if (absoluteLinePoint1Pos && absoluteLinePoint1Pos.x) {\r\n let pf = getPointField(absoluteLinePoint1Pos.x, absoluteLinePoint1Pos.y, this.__shape);\r\n toPoint.x = pf.x;\r\n }\r\n const linesWithoutAnglePoints = this.__shape.createLinesWithoutAngle();\r\n let [intersectionPointAndLine1, intersectionPointAndLine2] = getVerticalLineIntersectionPoints(toPoint, this.__shape, linesWithoutAnglePoints);\r\n\r\n if (intersectionPointAndLine1 && intersectionPointAndLine2) {\r\n let seamShapesPoints = this.splitShape(linesWithoutAnglePoints, intersectionPointAndLine1, intersectionPointAndLine2, 'horizontal');\r\n // console.log(\"intersectionPoint1\", intersectionPointAndLine1);\r\n // console.log(\"intersectionPoint2\", intersectionPointAndLine2);\r\n // console.log(\"shapePoints\", this.__shape.getLines().map((line) => { return {x: line.from.x, y: line.from.y}}));\r\n // console.log(\"piece1Points\", seamShapesPoints[0].map(point => { return {x: point.x, y: point.y}}));\r\n // console.log(\"piece2Points\", seamShapesPoints[1].map(point => { return {x: point.x, y: point.y}}));\r\n this.createShapesFromSeamPointsAndSetSlabRotation(seamShapesPoints);\r\n\r\n this.__shape.deregisterEvents();\r\n //this.__shape.shapeSlab.setRotationDegreesSlab(0); //? not needed\r\n SqftStore.addSeamHistory(this.__shape);\r\n } else {\r\n console.log(\"getVerticalLineIntersectionPoints error missing intersections\");\r\n }\r\n };\r\n\r\n preparePointCords = (seamPoints) => {\r\n return seamPoints.map((seamPoint) => {\r\n seamPoint.x = Math.round10(seamPoint.x, -1);\r\n seamPoint.y = Math.round10(seamPoint.y, -1);\r\n return seamPoint\r\n })\r\n };\r\n\r\n /**\r\n * @param {[]} lines\r\n * @param {*} intersectionPointAndLine1\r\n * @param {*} intersectionPointAndLine2\r\n * @param {string} splitOnlyOrientation\r\n */\r\n splitShape = (lines, intersectionPointAndLine1, intersectionPointAndLine2, splitOnlyOrientation) => {\r\n let piece1Points = [];\r\n let piece2Points = [];\r\n let intersectionNumber = 1;\r\n let lastPoint;\r\n let intersectionPoint1 = intersectionPointAndLine1.intersectionCords\r\n let intersectionPoint2 = intersectionPointAndLine2.intersectionCords\r\n\r\n lines.forEach((line) => {\r\n let intersectionCords = null;\r\n void splitOnlyOrientation;\r\n\r\n // version 1.0 search cords again\r\n //if (line.getLineDirection().orientation === splitOnlyOrientation || !splitOnlyOrientation) {\r\n // intersectionCords = getIntersectCords(\r\n // Math.round10(line.from.x, -1), Math.round10(line.from.y, -1),\r\n // Math.round10(line.to.x, -1), Math.round10(line.from.y, -1),\r\n // Math.round10(intersectionPoint1.x, -1), Math.round10(intersectionPoint1.y, -1),\r\n // Math.round10(intersectionPoint2.x, -1), Math.round10(intersectionPoint2.y,-1),\r\n // false\r\n // )\r\n //}\r\n\r\n // version 2.0 use existing intersection cords\r\n if ((line === intersectionPointAndLine1.line || line === intersectionPointAndLine2.line)) {\r\n intersectionCords = line === intersectionPointAndLine1.line\r\n ? intersectionPointAndLine1.intersectionCords\r\n : intersectionPointAndLine2.intersectionCords\r\n }\r\n\r\n if (intersectionCords) {\r\n let ip = (Math.round10(intersectionCords.x, -1) === Math.round10(intersectionPoint1.x, -1)\r\n && Math.round10(intersectionCords.y, -1) === Math.round10(intersectionPoint1.y, -1))\r\n ? intersectionPoint1 : intersectionPoint2\r\n if (piece2Points.length === 1) { // triangle shape\r\n piece2Points.push(line.from);\r\n }\r\n const nextLine = line.getParent().getNextLine(line, undefined, true);\r\n if (piece1Points.length === 1\r\n && (nextLine.id === intersectionPointAndLine1.line.id || nextLine.id === intersectionPointAndLine2.line.id)\r\n ) {\r\n piece1Points.push(line.to); // triangle shape\r\n }\r\n piece1Points.push(ip);\r\n piece2Points.push(ip);\r\n } else {\r\n if (intersectionNumber % 2 !== 0) {\r\n lastPoint = piece1Points[piece1Points.length - 1];\r\n if (!lastPoint || !lastPoint.id || lastPoint.id !== line.from.id) {\r\n piece1Points.push(line.from);\r\n }\r\n if (piece1Points[0] !== line.to) {\r\n piece1Points.push(line.to);\r\n }\r\n }\r\n if (intersectionNumber % 2 === 0) {\r\n lastPoint = piece2Points[piece2Points.length - 1];\r\n if (!lastPoint || !lastPoint.id || lastPoint.id !== line.from.id) {\r\n piece2Points.push(line.from);\r\n }\r\n if (piece2Points[0] !== line.to) {\r\n piece2Points.push(line.to);\r\n }\r\n }\r\n }\r\n\r\n if (intersectionCords) {\r\n intersectionNumber += 1;\r\n }\r\n //console.log(\"intersectionCords\", intersectionCords);\r\n });\r\n //console.log(\"piece1Points before filter\", piece1Points.map(point => { return {x: point.x, y: point.y}}));\r\n //console.log(\"piece2Points before filter\", piece2Points.map(point => { return {x: point.x, y: point.y}}));\r\n\r\n function filterEqualAndPointsOnTheSameLine(pointsArray) {\r\n return pointsArray.filter((point, index, array) => {\r\n let prev = array[index - 1];\r\n let next = array[index + 1];\r\n if (!prev) { // include first point\r\n prev = array[array.length - 1];\r\n }\r\n if (!next) {\r\n next = array[0]; // next point for the last point in array is the first point in array\r\n }\r\n const isEqual = _.isEqual({x: point.x, y: point.y}, {x: prev.x, y: prev.y});\r\n const isOnTheSameLine = point.x === prev.x && point.x === next.x || point.y === prev.y && point.y === next.y\r\n return !isEqual && !isOnTheSameLine\r\n })\r\n }\r\n\r\n return [filterEqualAndPointsOnTheSameLine(piece1Points), filterEqualAndPointsOnTheSameLine(piece2Points)]\r\n }\r\n}\r\n\r\nexport default SeamTool\r\n","import store from \"../../../../../../../../store\";\r\nimport sqftEventManager from \"../../../../store/sqftEventManager\";\r\nimport {\r\n getMidPoint,\r\n getMousePositionOnField,\r\n getPointDistance,\r\n getPointField\r\n} from \"../../../../../../helpers/sqftHelper\";\r\nimport COLOR_THEMES from \"../../../../store/colorThemes\";\r\nimport sqftConfig from \"../../../../store/sqftConfig\";\r\nimport NumberText from \"../../../workspace/text/numberText\";\r\nimport workspace from \"../../../workspace\";\r\nimport {\r\n getClosestIntersectionPoints,\r\n getIntersectionPointsAndLines,\r\n} from \"./seamToolHelper\";\r\nimport ShapeHelper from \"../../../../../../helpers/shapeHelper\";\r\nimport RenderFigures from \"../../../../helpers/renderFigures\";\r\nimport config from \"../../../../store/sqftConfig\";\r\n\r\nclass SeamToolRender {\r\n __measurement1 = new NumberText(0, {}, {}, workspace, Function(), false);\r\n __measurement2 = new NumberText(0, {}, {}, workspace, Function(), false);\r\n seamTool;\r\n absoluteLinePoint1Pos = {};\r\n absoluteLinePoint2Pos = {};\r\n\r\n constructor(seamTool) {\r\n this.seamTool = seamTool;\r\n }\r\n\r\n renderSeamHorizontalIntersection = (ctx) => {\r\n const serverState = store.getState().serverState;\r\n const mousePos = sqftEventManager.getMousePos();\r\n const mousePosOnFiled = getMousePositionOnField(mousePos.x, mousePos.y);\r\n const pos = this.seamTool.__shape.getPosition();\r\n const mousePosOnShape = {x: mousePosOnFiled.x - pos.x, y: mousePosOnFiled.y - pos.y};\r\n this.absoluteLinePoint1Pos = null; //reset minLength for correct calculations without stacking\r\n this.absoluteLinePoint2Pos = null; //reset minLength for correct calculations without stacking\r\n\r\n // vertical line\r\n let verticalLinePoint1 = {x: -serverState.windowWidth, y: mousePosOnShape.y};\r\n let verticalLinePoint2 = {x: serverState.windowWidth, y: mousePosOnShape.y};\r\n let distancesToLines = ShapeHelper.getDistancesToPoint(mousePos);\r\n let snappingPossibilitiesToLines = ShapeHelper.getSnappingPossibilitiesToLines(distancesToLines);\r\n if (snappingPossibilitiesToLines.length > 0) {\r\n //console.log(\"distancesToLines\", distancesToLines);\r\n //console.log(\"getSnappingPossibilitiesToLines\", snappingPossibilitiesToLines);\r\n this.setAbsolutePosFromSnapPossibilities(snappingPossibilitiesToLines, verticalLinePoint1, verticalLinePoint2);\r\n verticalLinePoint1 = this.absoluteLinePoint1Pos;\r\n verticalLinePoint2 = this.absoluteLinePoint2Pos;\r\n }\r\n this.renderSeamDashedLine(ctx, verticalLinePoint1, verticalLinePoint2);\r\n\r\n // horizontal line\r\n let horizontalLinePoint1 = {x: mousePosOnShape.x , y: -serverState.windowHeight};\r\n let horizontalLinePoint2 = {x: mousePosOnShape.x, y: serverState.windowHeight};\r\n if (snappingPossibilitiesToLines.length > 0) {\r\n mousePosOnShape.y = this.absoluteLinePoint1Pos.y\r\n }\r\n this.renderSeamArrowLine(ctx, horizontalLinePoint1, horizontalLinePoint2, mousePos, mousePosOnShape);\r\n }\r\n\r\n renderSeamVerticalIntersection = (ctx) => {\r\n const serverState = store.getState().serverState;\r\n const mousePos = sqftEventManager.getMousePos();\r\n const mousePosOnFiled = getMousePositionOnField(mousePos.x, mousePos.y);\r\n const pos = this.seamTool.__shape.getPosition();\r\n const mousePosOnShape = {x: mousePosOnFiled.x - pos.x, y: mousePosOnFiled.y - pos.y};\r\n this.absoluteLinePoint1Pos = null; //reset minLength for correct calculations without stacking\r\n this.absoluteLinePoint2Pos = null; //reset minLength for correct calculations without stacking\r\n\r\n // vertical line\r\n let verticalLinePoint1 = {x: mousePosOnShape.x, y: -serverState.windowHeight};\r\n let verticalLinePoint2 = {x: mousePosOnShape.x, y: serverState.windowHeight};\r\n let distancesToLines = ShapeHelper.getDistancesToPoint(mousePos);\r\n let snappingPossibilitiesToLines = ShapeHelper.getSnappingPossibilitiesToLines(distancesToLines);\r\n if (snappingPossibilitiesToLines.length > 0) {\r\n //console.log(\"distancesToLines\", distancesToLines);\r\n //console.log(\"getSnappingPossibilitiesToLines\", snappingPossibilitiesToLines);\r\n this.setAbsolutePosFromSnapPossibilities(snappingPossibilitiesToLines, verticalLinePoint1, verticalLinePoint2);\r\n verticalLinePoint1 = this.absoluteLinePoint1Pos;\r\n verticalLinePoint2 = this.absoluteLinePoint2Pos;\r\n }\r\n this.renderSeamDashedLine(ctx, verticalLinePoint1, verticalLinePoint2);\r\n\r\n // horizontal line\r\n let horizontalLinePoint1 = {x: -serverState.windowWidth , y: mousePosOnShape.y};\r\n let horizontalLinePoint2 = {x: serverState.windowWidth, y: mousePosOnShape.y};\r\n if (snappingPossibilitiesToLines.length > 0) {\r\n mousePosOnShape.x = this.absoluteLinePoint1Pos.x\r\n }\r\n this.renderSeamArrowLine(ctx, horizontalLinePoint1, horizontalLinePoint2, mousePos, mousePosOnShape);\r\n };\r\n\r\n setAbsolutePosFromSnapPossibilities = (snapPossibilities, verticalLinePoint1, verticalLinePoint2) => {\r\n if (snapPossibilities.length > 0) {\r\n let scale = sqftConfig.scale;\r\n let absoluteLinePoint1Pos = {...verticalLinePoint1};\r\n let absoluteLinePoint2Pos = {...verticalLinePoint2};\r\n snapPossibilities.forEach((snap) => {\r\n switch (snap.orientation) {\r\n case \"horizontal\":\r\n absoluteLinePoint1Pos.y -= snap.diff / scale\r\n absoluteLinePoint2Pos.y -= snap.diff / scale\r\n break;\r\n case \"vertical\":\r\n absoluteLinePoint1Pos.x -= snap.diff / scale\r\n absoluteLinePoint2Pos.x -= snap.diff / scale\r\n break;\r\n }\r\n this.absoluteLinePoint1Pos = absoluteLinePoint1Pos;\r\n this.absoluteLinePoint2Pos = absoluteLinePoint2Pos;\r\n })\r\n }\r\n }\r\n\r\n renderSeamDashedLine = (ctx, verticalLinePoint1, verticalLinePoint2) => {\r\n let [intersection1, intersection2] = getIntersectionPointsAndLines(\r\n this.seamTool.__shape.getLines(), verticalLinePoint1, verticalLinePoint2\r\n );\r\n ctx.strokeStyle = COLOR_THEMES[sqftConfig.activeTheme].primary;\r\n\r\n if (intersection1 && intersection2) {\r\n let intersectionYPoint1 = intersection1.intersectionCords;\r\n let intersectionYPoint2 = intersection2.intersectionCords;\r\n let intersectionYPoint1PointField = getPointField(intersectionYPoint1.x, intersectionYPoint1.y, this.seamTool.__shape);\r\n let intersectionYPoint2PointField = getPointField(intersectionYPoint2.x, intersectionYPoint2.y, this.seamTool.__shape);\r\n ctx.beginPath();\r\n ctx.setLineDash([10, 10]);\r\n ctx.moveTo(intersectionYPoint1PointField.x , intersectionYPoint1PointField.y);\r\n ctx.lineTo(intersectionYPoint2PointField.x, intersectionYPoint2PointField.y);\r\n ctx.closePath();\r\n ctx.stroke();\r\n ctx.setLineDash([0]);\r\n }\r\n }\r\n\r\n renderSeamArrowLine = (ctx, horizontalLinePoint1, horizontalLinePoint2, mousePos, mousePosOnShape) => {\r\n let mousePosOnShapePointField = getPointField(mousePosOnShape.x, mousePosOnShape.y, this.seamTool.__shape);\r\n let [intersectionXPointAndLine1, intersectionXPointAndLine2] = getClosestIntersectionPoints(\r\n this.seamTool.__shape.getLines(), horizontalLinePoint1, horizontalLinePoint2, mousePosOnShape\r\n );\r\n\r\n if (intersectionXPointAndLine1 && intersectionXPointAndLine2) {\r\n let intersectionXPoint1 = intersectionXPointAndLine1.intersectionCords;\r\n let intersectionXPoint2 = intersectionXPointAndLine2.intersectionCords;\r\n let intersectionXPoint1PointField = getPointField(intersectionXPoint1.x, intersectionXPoint1.y, this.seamTool.__shape);\r\n let intersectionXPoint2PointField = getPointField(intersectionXPoint2.x, intersectionXPoint2.y, this.seamTool.__shape);\r\n ctx.beginPath();\r\n RenderFigures.drawArrow(ctx,\r\n intersectionXPoint1PointField.x,\r\n intersectionXPoint1PointField.y,\r\n mousePosOnShapePointField.x,\r\n mousePosOnShapePointField.y\r\n );\r\n let measurement1Midpoint = getMidPoint(mousePosOnShapePointField, intersectionXPoint1PointField);\r\n let measurement1Distance = getPointDistance(intersectionXPoint1, mousePosOnShape);\r\n RenderFigures.drawArrow(ctx,\r\n mousePosOnShapePointField.x,\r\n mousePosOnShapePointField.y,\r\n intersectionXPoint2PointField.x,\r\n intersectionXPoint2PointField.y\r\n );\r\n let measurement2Midpoint = getMidPoint(mousePosOnShapePointField, intersectionXPoint2PointField);\r\n let measurement2Distance = getPointDistance(intersectionXPoint2, mousePosOnShape);\r\n ctx.closePath();\r\n ctx.stroke();\r\n\r\n this.renderMeasurements(ctx, measurement1Midpoint, measurement1Distance, measurement2Midpoint, measurement2Distance)\r\n }\r\n }\r\n\r\n renderMeasurements = (ctx, measurement1Midpoint, measurement1Distance, measurement2Midpoint, measurement2Distance) => {\r\n let measurement1Pos = getMousePositionOnField(measurement1Midpoint.x, measurement1Midpoint.y);\r\n let measurement2Pos = getMousePositionOnField(measurement2Midpoint.x, measurement2Midpoint.y);\r\n\r\n this.__measurement1.pos.x = measurement1Pos.x;\r\n this.__measurement1.pos.y = measurement1Pos.y;\r\n this.__measurement1.value = Math.round(config.getMeasureMultiplier() * measurement1Distance);\r\n\r\n this.__measurement2.pos.x = measurement2Pos.x;\r\n this.__measurement2.pos.y = measurement2Pos.y;\r\n this.__measurement2.value = Math.round(config.getMeasureMultiplier() * measurement2Distance);\r\n\r\n this.__measurement1.render(ctx);\r\n this.__measurement2.render(ctx);\r\n }\r\n}\r\n\r\nexport default SeamToolRender\r\n","import workspace from \"../../workspace\";\r\nimport RenderParts from \"../../../helpers/renderParts\";\r\nimport RenderFigures from \"../../../helpers/renderFigures\";\r\n\r\nclass ShapeMeasurementArrows {\r\n __shape;\r\n\r\n constructor(shape) {\r\n this.__shape = shape;\r\n }\r\n\r\n import = (data) => {\r\n void data\r\n }\r\n\r\n render = (ctx) => {\r\n if (workspace && workspace.getState().loading) return;\r\n //this.renderDimensionsInsideShape(ctx);\r\n if (!this.__shape.shapeAbsolute.getAbsolutePosition() && !this.__shape.shapeAbsolute.getSnappedWithShape()) {\r\n this.renderDimensionsOutsideShape(ctx);\r\n }\r\n }\r\n\r\n renderMeasurementArrows = (ctx) => {\r\n const points = this.__shape.getPointsPointField();\r\n RenderFigures.drawArrowsAroundPoints(ctx, points, 10)\r\n }\r\n\r\n renderMeasurementLength = (ctx) => {\r\n const points = this.__shape.getPointsPointField();\r\n RenderParts.drawMeasurementAroundPoints(ctx, points);\r\n }\r\n\r\n renderDimensionsOutsideShape = (ctx) => {\r\n ctx.save();\r\n ctx.beginPath();\r\n this.renderMeasurementArrows(ctx);\r\n this.renderMeasurementLength(ctx);\r\n ctx.closePath();\r\n ctx.restore();\r\n }\r\n}\r\n\r\nexport default ShapeMeasurementArrows\r\n","import {RENDER_TEMPLATES} from \"../../../../../constants\";\r\nimport workspace from \"../../workspace\";\r\nimport sqftConfig from \"../../../store/sqftConfig\";\r\nimport COLOR_THEMES from \"../../../store/colorThemes\";\r\nimport store from \"../../../../../../../store\";\r\n\r\nexport default class ShapeEditable {\r\n __shape;\r\n\r\n constructor(shape) {\r\n this.__shape = shape;\r\n }\r\n\r\n render = (ctx, template= RENDER_TEMPLATES.default) => {\r\n if (workspace && workspace.getState().loading) return;\r\n let lines = this.__shape.getLines();\r\n\r\n ctx.beginPath();\r\n for (let i = 0; i < lines.length; i++) {\r\n lines[i].render(ctx, i > 0);\r\n }\r\n if (this.__shape.isHovering() && workspace.getHoverShape() === this.__shape ) {\r\n ctx.strokeStyle = COLOR_THEMES[sqftConfig.activeTheme].active_hover;\r\n } else {\r\n ctx.strokeStyle = COLOR_THEMES[sqftConfig.activeTheme].active;\r\n }\r\n ctx.fillStyle = COLOR_THEMES[sqftConfig.activeTheme].active_disabled;\r\n switch (template) {\r\n case RENDER_TEMPLATES.linesOnly:\r\n ctx.lineWidth = 0;\r\n ctx.closePath();\r\n break;\r\n case RENDER_TEMPLATES.default:\r\n default:\r\n //ctx.fill();\r\n ctx.lineWidth = 2; // Math.ceil(scale);\r\n ctx.closePath();\r\n ctx.stroke();\r\n break;\r\n }\r\n\r\n if (this.__shape.isHovering() && workspace.getHoveredSqftShape() === this.__shape ) {\r\n let sqftMenuState = store.getState().sqftMenuState;\r\n void sqftMenuState;\r\n }\r\n };\r\n\r\n // renderLinesBetweenPoints = (ctx) => {\r\n // ctx.beginPath();\r\n // ctx.lineWidth = lineWidth;\r\n // ctx.strokeStyle = color;\r\n // drawLines(ctx);\r\n //\r\n // ctx.stroke();\r\n // };\r\n}\r\n","import workspace from \"../../workspace\";\r\nimport RenderParts from \"../../../helpers/renderParts\";\r\nimport RenderFigures from \"../../../helpers/renderFigures\";\r\nimport COLOR_THEMES from \"../../../store/colorThemes\";\r\nimport sqftConfig from \"../../../store/sqftConfig\";\r\n\r\nclass ShapeSpacer {\r\n __shape;\r\n\r\n constructor(shape) {\r\n this.__shape = shape;\r\n }\r\n\r\n import = (data) => {\r\n void data\r\n }\r\n\r\n export = () => {\r\n return {\r\n }\r\n }\r\n\r\n render = (ctx, staticOffset = null) => {\r\n if (workspace && workspace.getState().loading) return;\r\n\r\n this.renderBorders(ctx, staticOffset);\r\n if (!this.__shape.shapeAbsolute.getAbsolutePosition() && !this.__shape.shapeAbsolute.getSnappedWithShape()) {\r\n //this.renderCrownMolding(ctx);\r\n this.renderDimensionsOutsideShape(ctx);\r\n }\r\n }\r\n\r\n renderBorders = (ctx,\r\n staticOffset = null,\r\n ) => {\r\n RenderParts.drawSpacerBorders(ctx, staticOffset, this.__shape);\r\n };\r\n\r\n renderDimensionsOutsideShape = (ctx) => {\r\n ctx.save();\r\n ctx.beginPath();\r\n ctx.strokeStyle = COLOR_THEMES[sqftConfig.activeTheme].primary_hover;\r\n this.renderMeasurementArrows(ctx);\r\n this.renderMeasurementLength(ctx);\r\n ctx.closePath();\r\n ctx.restore();\r\n }\r\n\r\n renderMeasurementArrows = (ctx) => {\r\n const points = this.__shape.getPointsPointField();\r\n void ctx; void points;\r\n RenderFigures.drawArrowsAroundPoints(ctx, points, 10)\r\n }\r\n\r\n renderMeasurementLength = (ctx) => {\r\n const points = this.__shape.getPointsPointField();\r\n RenderParts.drawMeasurementAroundPoints(ctx, points);\r\n }\r\n\r\n}\r\n\r\nexport default ShapeSpacer\r\n","import SqftStore from \"../../../store/sqftStore\";\r\nimport sqftSlabManager from \"../../../store/sqftSlabManager\";\r\nimport sqftShapeIntersectionsManager from \"../../../store/sqftShapeIntersectionsManager\";\r\n\r\nexport default class ShapeIntersections {\r\n __shape;\r\n overlappedWithShapeIds = [];\r\n\r\n constructor(shape) {\r\n this.__shape = shape;\r\n }\r\n\r\n setOverlappedWithShapeIds = (ids) => {\r\n this.overlappedWithShapeIds = ids\r\n }\r\n\r\n addOverlappedWithShape = (id) => {\r\n if (!this.overlappedWithShapeIds.includes(id)) {\r\n this.overlappedWithShapeIds.push(id);\r\n }\r\n }\r\n\r\n removeOverlappedWithShape = (id) => {\r\n if (this.overlappedWithShapeIds.includes(id)) {\r\n this.overlappedWithShapeIds = this.overlappedWithShapeIds.filter(overlappedId => id !== overlappedId);\r\n }\r\n }\r\n\r\n handleSlabPlaceholderIntersections = () => {\r\n if (SqftStore.isSlabMode()) {\r\n const slabPlaceHolderShapes = sqftSlabManager.getSlabPlaceHolderShapes();\r\n if (slabPlaceHolderShapes.length) {\r\n\r\n // if (this.__shape.partId === SHAPE_PART_ID.slabPlaceHolder) {\r\n // this.onSlabPlaceHolderMove();\r\n // } else {\r\n // this.onCountertopShapeMove(slabPlaceHolderShapes);\r\n // }\r\n sqftShapeIntersectionsManager.updateShapesIntersections();\r\n sqftShapeIntersectionsManager.updateSlabPlaceholderFeatureId();\r\n\r\n const errorCallback = () => {\r\n this.__shape.shapeMemory.restoreShapePosition();\r\n this.__shape.resetMouseDown();\r\n sqftShapeIntersectionsManager.updateShapesIntersections();\r\n }\r\n\r\n sqftShapeIntersectionsManager.showSlabPlaceHolderErrorMessage(slabPlaceHolderShapes, errorCallback);\r\n }\r\n }\r\n }\r\n\r\n // onSlabPlaceHolderMove = () => {\r\n // const counterTopShapes = sqftShapeManager.getCounterTopShapes();\r\n // let overlapsWithIds = [];\r\n // this.setOverlappedWithShapeIds([]);\r\n //\r\n // for (const counterTopShape of counterTopShapes) {\r\n // const shapeIntersections = ShapeHelper.getTwoShapesIntersections(this.__shape, counterTopShape);\r\n // const shapeIds = Object.keys(shapeIntersections);\r\n // if (shapeIds.length) {\r\n // this.__shape.setFeatureId(_.clone(counterTopShape.featureId))\r\n // overlapsWithIds.push(shapeIds[0]);\r\n // }\r\n // //console.log(\"shapeIntersections\", shapeIntersections);\r\n // }\r\n // this.setOverlappedWithShapeIds(overlapsWithIds);\r\n // }\r\n //\r\n // onCountertopShapeMove = (slabPlaceHolderShapes) => {\r\n // for (const slabPlaceHolderShape of slabPlaceHolderShapes) {\r\n // slabPlaceHolderShape.shapeIntersections.removeOverlappedWithShape(this.__shape.id);\r\n // const shapeIntersections = ShapeHelper.getTwoShapesIntersections(slabPlaceHolderShape, this.__shape);\r\n // //console.log(\"shapeIntersections\", shapeIntersections);\r\n // const shapeIds = Object.keys(shapeIntersections);\r\n // if (shapeIds.length) {\r\n // slabPlaceHolderShape.setFeatureId(_.clone(this.__shape.featureId));\r\n // slabPlaceHolderShape.shapeIntersections.addOverlappedWithShape(+shapeIds[0]);\r\n // }\r\n // }\r\n // }\r\n\r\n\r\n}\r\n","import _ from 'lodash';\r\n\r\nexport default class ShapeMemory {\r\n __shape;\r\n memory = {\r\n pos: {x: 0, y: 0},\r\n slabPos: {x: 0, y: 0},\r\n absolutePos: {x: 0, y: 0}\r\n };\r\n\r\n constructor(shape) {\r\n this.__shape = shape;\r\n }\r\n\r\n rememberShapePosition = () => {\r\n this.memory = {\r\n pos: _.clone(this.__shape.pos),\r\n slabPos: _.clone(this.__shape.slabPos),\r\n shapeSlabAbsolutePos: _.clone(this.__shape.shapeSlab.getAbsolutePosition()),\r\n shapeAbsolutePos: _.clone(this.__shape.shapeAbsolute.getAbsolutePosition())\r\n }\r\n }\r\n\r\n restoreShapePosition = () => {\r\n this.__shape.pos = _.clone(this.memory.pos)\r\n this.__shape.slabPos = _.clone(this.memory.slabPos)\r\n this.__shape.shapeSlab.setAbsolutePos( _.clone(this.memory.shapeSlabAbsolutePos));\r\n this.__shape.shapeAbsolute.setAbsolutePos( _.clone(this.memory.shapeAbsolutePos));\r\n }\r\n}\r\n","import workspace from \"../../workspace\";\r\nimport {isDisabledInPopupShouldBeHidden} from \"../../../../../constants\";\r\nimport {getPointField, isDisabledInPopupWithParents} from \"../../../../../helpers/sqftHelper\";\r\nimport SqftStore from \"../../../store/sqftStore\";\r\nimport config from \"../../../store/sqftConfig\";\r\nimport COLOR_THEMES from \"../../../store/colorThemes\";\r\nimport sqftConfig from \"../../../store/sqftConfig\";\r\nimport sqftEventManager from \"../../../store/sqftEventManager\";\r\nimport BlinkingHighlight from \"../../../helpers/commonParts/blink\";\r\n\r\nexport default class ShapeRender {\r\n __shape;\r\n\r\n constructor(shape) {\r\n this.__shape = shape;\r\n this.blink = new BlinkingHighlight;\r\n }\r\n\r\n render(ctx) {\r\n // if (sqftStore && sqftStore.getState().loading) return;\r\n if (workspace && workspace.getState().loading) {\r\n return\r\n }\r\n if (isDisabledInPopupShouldBeHidden() && isDisabledInPopupWithParents(this)) {\r\n return\r\n }\r\n\r\n const isShowSlabTool = SqftStore.isSlabMode();\r\n const shapeState = this.__shape.getState();\r\n this.renderDevMode(ctx);\r\n\r\n if (isShowSlabTool) {\r\n return this.__shape.shapeSlab.render(ctx);\r\n } else if (shapeState.isPointsMovable) {\r\n return this.__shape.shapeEditable.render(ctx);\r\n } else if (shapeState.isRotatable) {\r\n return this.__shape.shapeRotatable.render(ctx);\r\n } else if (this.__shape.shapeParams !== undefined && this.__shape.shapeParams.shapeCabinet && !this.__shape.shapeParams.isSpacer) {\r\n return this.__shape.shapeCabinet.render(ctx);\r\n } else if (this.__shape.shapeParams !== undefined && this.__shape.shapeParams.isSpacer && this.__shape.shapeSpacer) {\r\n return this.__shape.shapeSpacer.render(ctx);\r\n }\r\n\r\n this.renderRegularShape(ctx);\r\n }\r\n\r\n renderDevMode = (ctx) => {\r\n if (config.isDevMode()) {\r\n // render center pos\r\n ctx.save();\r\n ctx.beginPath();\r\n let pf = getPointField(this.__shape.pos.x, this.__shape.pos.y);\r\n ctx.arc(pf.x, pf.y, 5, 0, 2 * Math.PI);\r\n ctx.stroke();\r\n ctx.closePath();\r\n\r\n ctx.beginPath();\r\n let shapeCenter = this.__shape.getCenter();\r\n const pos = getPointField(shapeCenter.x, shapeCenter.y, this.__shape);\r\n ctx.arc(pos.x, pos.y, 12, 0, 2 * Math.PI);\r\n\r\n ctx.stroke();\r\n ctx.closePath();\r\n ctx.restore();\r\n\r\n // render shape group\r\n if (this.__shape.getSnappedShapeGroup) {\r\n const renderText = this.__shape.getSnappedShapeGroup() + \".group\";\r\n const mText = ctx.measureText(renderText);\r\n ctx.wrapText(renderText, pos.x, pos.y, mText, 16);\r\n }\r\n\r\n // render shape center\r\n // ctx.beginPath();\r\n // let position = this.__shape.getOffset();\r\n // ctx.arc(position.x, position.y, 50, 0, 2 * Math.PI);\r\n //\r\n // ctx.stroke();\r\n // ctx.closePath();\r\n }\r\n }\r\n\r\n renderRegularShape = (ctx) => {\r\n // const scale = sqftConfig.scale;\r\n // const canvas = sqftStore.getCanvas();\r\n const lines = this.__shape.getLines();\r\n const shapeDesign = this.__shape.getDesign();\r\n const shapeColorSet = this.__shape.getColorset();\r\n\r\n ctx.save();\r\n ctx.beginPath();\r\n for (let i = 0; i < lines.length; i++) {\r\n lines[i].render(ctx, i > 0);\r\n }\r\n if (this.__shape.isHovering() && workspace.getHoverShape() === this.__shape) {\r\n ctx.strokeStyle = shapeColorSet ? shapeColorSet.primary_border : COLOR_THEMES[sqftConfig.activeTheme].primary_hover;\r\n } else {\r\n ctx.strokeStyle = shapeColorSet ? shapeColorSet.primary_border : COLOR_THEMES[sqftConfig.activeTheme].primary;\r\n }\r\n ctx.lineWidth = 2; // Math.ceil(scale);\r\n ctx.closePath();\r\n ctx.stroke();\r\n\r\n if (this.__shape.isHoveringOnlyShape()\r\n && workspace.getHoverShape()\r\n && !sqftConfig.highlight.rotateAngle\r\n && ( sqftEventManager.getCursor().indexOf(\"move\") >= 0\r\n || sqftEventManager.getCursor().indexOf(\"rotate-left\") >= 0\r\n || sqftEventManager.getCursor().indexOf(\"delete\") >= 0\r\n )\r\n ) {\r\n if (sqftEventManager.getCursor().indexOf(\"delete\") >= 0\r\n && !workspace.textBoxManager.isBoxActive()\r\n && !this.__shape.getHoverLabel()\r\n ) {\r\n const hoverLine = this.__shape.getHoverSegment(),\r\n hoverPoint = this.__shape.getHoverPointOnClick();\r\n\r\n // if ((hoverLine && hoverLine.getAttachedItems()) || (hoverPoint && (hoverPoint.getAngle() || hoverPoint.getArcLength()))) {\r\n if (hoverLine || hoverPoint) {\r\n ctx.fillStyle = shapeColorSet ? shapeColorSet.primary_hover : shapeDesign.fillColor;\r\n } else {\r\n ctx.fillStyle = shapeDesign.redHoverShapeColor;\r\n }\r\n } else {\r\n ctx.fillStyle = shapeColorSet ? shapeColorSet.primary_hover : shapeDesign.hoverShapeColor;\r\n }\r\n } else {\r\n if (this.blink.isHighlightedLightOn) {\r\n ctx.fillStyle = shapeColorSet ? shapeColorSet.primary_hover : shapeDesign.fillColor;\r\n } else {\r\n ctx.fillStyle = shapeColorSet ? shapeColorSet.primary : shapeDesign.fillColor;\r\n }\r\n }\r\n ctx.fill();\r\n ctx.restore();\r\n\r\n for (let i = 0; i < lines.length; i++) {\r\n lines[i].renderLineField(ctx); // renderLineField should be called after render method and ctx.fill()\r\n }\r\n\r\n // red highlight bumpout\r\n lines.forEach((line) => {\r\n if (line.isWithBumpout()) {\r\n if (sqftEventManager.getCursor().indexOf(\"delete\") >= 0 && line.bumpoutOverlay.isHoveringRect() && !workspace.textBoxManager.isBoxActive()) {\r\n line.bumpoutOverlay.drawBumpoutRect(ctx);\r\n }\r\n }\r\n });\r\n\r\n //green highlight selected part\r\n if (sqftConfig.highlight.rotateAngle) {\r\n // todo fix bumpout rotation and remove this\r\n if (!this.__shape.isWithBumpout() && !this.__shape.isWithBumpout() && !this.__shape.isPointsMoved && this.__shape.rotatedDegrees === 0) {\r\n /////////////////////////////////////////\r\n for (const rotateAnglePart of this.__shape.rotateAngleParts) {\r\n if (this.__shape.isAngleRotatedPartsWithCorner(rotateAnglePart)) {\r\n continue;\r\n }\r\n if (rotateAnglePart.isActive || rotateAnglePart.isHovered) {\r\n this.__shape.renderAnglePartActive(rotateAnglePart, ctx);\r\n }\r\n if (rotateAnglePart.isPulsing) { //green highlight selected part intro\r\n this.__shape.renderAnglePartActive(rotateAnglePart, ctx);\r\n setTimeout(() => {\r\n rotateAnglePart.isPulsing = false;\r\n }, 1000);\r\n }\r\n }\r\n }\r\n }\r\n\r\n //render counter?\r\n // var vertices = [];\r\n // for (var i = 0; i < lines.length; i++) {\r\n // var s = lines[i];\r\n // vertices.push([s.from.x, s.from.y]);\r\n // }\r\n //var newTriangles = earcut([vertices]);\r\n\r\n if (sqftConfig.workspace.debug) {\r\n ctx.beginPath();\r\n // for (var n = 0; n < newTriangles.length; n+=3) {\r\n // var lines = new triangle(newTriangles[n], newTriangles[n+1], newTriangles[n+2]);\r\n // for (let i = 0; i < lines.length; i++) {\r\n // var l = lines[i];\r\n // l.init(this.__shape, true); //initialize as temporary line\r\n // l.render(ctx, false); //render temp line\r\n // }\r\n // }\r\n ctx.lineWidth = 1;\r\n ctx.closePath();\r\n ctx.strokeStyle = \"#FF0000\";\r\n ctx.stroke();\r\n }\r\n //return newTriangles;\r\n };\r\n}\r\n","import {className} from \"../../misc/utils\";\r\n\r\nexport class Exception {\r\n message = '';\r\n\r\n /**\r\n *\r\n * @param message {string}\r\n */\r\n constructor(message) {\r\n this.message = message;\r\n }\r\n\r\n static NotImplemented(message) {\r\n console.error(message || \"Not implemented.\");\r\n }\r\n\r\n static NotImplementedBaseClass(instance) {\r\n console.error(`Not implemented in base class ${className(instance)}`);\r\n }\r\n}\r\n\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport {Vanity} from \"../../parts/vanity\";\r\nimport {createParentPositions} from \"../../constants\";\r\n\r\nexport default class VanityHandle extends IntermediatePart {\r\n\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'vanity_handle';\r\n this.partName = 'Handle';\r\n this.translateId = \"visualizer.bathroom.vanity.vanity_handle\";\r\n this.dbName = \"Vanity Handle\";\r\n this.visible = [Vanity.Types.Custom];\r\n this.canBeDisabled = false;\r\n if (isChild) {\r\n createParentPositions(this);\r\n }\r\n }\r\n\r\n disabledClick() {\r\n this.getParent().toggleVanityParts(this.disabled);\r\n }\r\n\r\n getArrayOfConditions() {\r\n const conditions = super.getArrayOfConditions();\r\n const vanityParent = this.getParent();\r\n conditions.push({\r\n propName: \"VanitySize\",\r\n propValue: vanityParent.counterTopSize(this)\r\n })\r\n conditions.push({\r\n propName: \"CabinetStyle\",\r\n propValue: vanityParent.vanityCabinet && vanityParent.vanityCabinet.activeFeature\r\n && vanityParent.vanityCabinet.activeFeature.metaData[\"CabinetStyle\"]\r\n ? vanityParent.vanityCabinet.activeFeature.metaData[\"CabinetStyle\"]\r\n : \"No handles\" // if no cabinet style - hide handles\r\n });\r\n return conditions\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport {Vanity} from \"../../parts/vanity\";\r\nimport store from \"../../../../../store\";\r\nimport {Layout} from \"../../layout\";\r\nimport {createParentPositions, METADATA, SIDE_POSITIONS, VANITY_TYPES, LOOK_ROOM_TYPES} from \"../../constants\";\r\nimport {updateSinkWithNewFeature} from \"../../../lookNavigation/lookNavigationFunctions\";\r\nimport {getCurrentRoomType} from \"../../../../appLayout\";\r\n\r\nexport default class VanityCabinet extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'vanity_cabinet';\r\n this.partName = 'Vanity Cabinet';\r\n this.translateId = \"visualizer.bathroom.vanity.vanity_cabinet\";\r\n this.dbName = \"Vanitie\";\r\n this.homePageTitle = 'Vanity Bases';\r\n this.visible = [Vanity.Types.Custom];\r\n this.canBeDisabled = true;\r\n this.canUseWizard = true;\r\n if (isChild) {\r\n createParentPositions(this);\r\n }\r\n }\r\n\r\n load(dbFeature) {\r\n if (dbFeature.groupName === \"Vanitie\") {\r\n dbFeature.groupName = \"Vanity\"\r\n }\r\n if (!dbFeature.metaData[\"MatchingFeature\"]) {\r\n dbFeature.metaData[\"MatchingFeature\"] = [METADATA.NO];\r\n }\r\n if (!dbFeature.metaData[\"Side\"]) {\r\n dbFeature.metaData[\"Side\"] = [METADATA.LeftSide];\r\n }\r\n if (Array.isArray(dbFeature.metaData[\"VanitySize\"]) && dbFeature.metaData[\"VanitySize\"][0]) {\r\n dbFeature.metaData[\"VanityWidth\"] = +dbFeature.metaData[\"VanitySize\"][0];\r\n if (dbFeature.metaData[\"VanityWidth\"] === 72) {\r\n dbFeature.metaData[\"VanityWidth\"] = 64;\r\n }\r\n } else if (dbFeature.metaData[\"VanitySize\"]) {\r\n console.log(\"dbFeature.metaData[\\\"VanitySize\\\"] should be an array!\", dbFeature.metaData[\"VanitySize\"]);\r\n }\r\n return super.load(dbFeature);\r\n }\r\n\r\n disabledClick() {\r\n const vanityParent = this.getParent();\r\n if (getCurrentRoomType(vanityParent.layout) === LOOK_ROOM_TYPES.as) {\r\n this.toggleLayerPositions();\r\n [\"drawerPull\", \"vanityLegs\", \"vanityMiddle\"].forEach(name => {\r\n if (vanityParent && vanityParent[name]) {\r\n vanityParent[name].disabled = this.disabled || !vanityParent[name].canBeEnabled(); // true or check if it can be enabled;\r\n }\r\n });\r\n if (this.activeFeature && this.activeFeature.metaData[\"MatchingFeature\"] && this.activeFeature.metaData[\"MatchingFeature\"].includes(METADATA.NO)) {\r\n [\"sink\", \"countertop\", \"vanityPTrap\", \"faucet\"].forEach(name => {\r\n if (vanityParent && vanityParent[name]) {\r\n vanityParent[name].disabled = this.disabled || !vanityParent[name].canBeEnabled(); // true or check if it can be enabled;\r\n }\r\n });\r\n }\r\n }\r\n }\r\n\r\n handleClick(ignoreLocked, updateSink = true) {\r\n const vanityParent = this.getParent().getParent();\r\n vanityParent.vanity_type = VANITY_TYPES.vanity_cabinet;\r\n super.handleClick(ignoreLocked);\r\n if (updateSink) {\r\n updateSinkWithNewFeature(this);\r\n }\r\n vanityParent.updateVanityParts();\r\n }\r\n\r\n // navigationSubItems() {\r\n // return super.navigationSubItemsWithFilter('VanitySize', this.getParent().counterTopSize(this));\r\n // }\r\n\r\n // disabledClick() {\r\n // this.getParent().toggleVanityParts(this.disabled);\r\n // }\r\n\r\n hideLayerCondition() {\r\n const vanityParent = this.getParent();\r\n return (getCurrentRoomType(vanityParent.layout) === LOOK_ROOM_TYPES.as) && (vanityParent.vanity_type !== VANITY_TYPES.vanity_cabinet)\r\n }\r\n\r\n setActiveFeatureByFilter(filterName, filterValue) {\r\n\r\n // console.log('filterName', filterName);\r\n // console.log('filterValue', filterValue);\r\n\r\n const filterGroups = store.getState().filterState.filterGroups;\r\n const group = filterGroups.find(group => group.name === filterName);\r\n const groupId = group.id;\r\n const filterValueId = Layout.getfilterValueIdByValue(groupId, filterValue);\r\n const filteredFeatures = this.features.filter(\r\n feature => feature.dbFeature && feature.dbFeature.filterValueIDs[groupId] && feature.dbFeature.filterValueIDs[groupId].includes(filterValueId)\r\n ); // find among all features only those, who have filter with value === props size\r\n if (!super.tryToSetTheSameFeature(filteredFeatures, null, \"ustom\")) {\r\n this.activeFeature = filteredFeatures[0];\r\n const placeholderAvailableFeatures = filteredFeatures.filter(feature => {\r\n return feature.dbFeature.displayName.includes(\"laceholder\") && feature.dbFeature.displayName.includes(\"ustom\")\r\n });\r\n this.placeholderFeature = placeholderAvailableFeatures[0];\r\n }\r\n }\r\n\r\n // getAvailableFeatures() {\r\n // return this.features.filter(f => f.vanitySize+'in' === this.getParent().counterTopSize(this));\r\n // }\r\n\r\n canDisplayDemoPoint(parentObject) {\r\n if (getCurrentRoomType() === LOOK_ROOM_TYPES.as && parentObject.layerPosition === SIDE_POSITIONS[0]) {\r\n return false\r\n }\r\n return this.getParent().vanity_type === VANITY_TYPES.vanity_cabinet\r\n }\r\n}\r\n","import snakeCase from \"lodash/snakeCase\";\r\nimport {Part} from \"../part\";\r\nimport {PartMenuType} from \"../../../visComponents/constants\";\r\nimport NonVisualizerSubPart from \"../subparts/nonVisualizerSubPart\";\r\n\r\nexport default class Other extends Part {\r\n static id = 'Other';\r\n constructor() {\r\n super(true, false, PartMenuType.Complex);\r\n\r\n this.menuType = PartMenuType.Complex;\r\n this.partName = 'Other';\r\n this.categoryEnabled = false;\r\n }\r\n\r\n load(dbFeature) {\r\n // console.log(\"load other\", dbFeature.groupName);\r\n const partId = snakeCase(dbFeature.groupName);\r\n let relatedItem = this.relatedItems.find(relatedItem => relatedItem.partId === partId);\r\n if (!relatedItem) {\r\n relatedItem = new NonVisualizerSubPart(true, partId, dbFeature.groupName);\r\n this.relatedItems.push(relatedItem);\r\n }\r\n relatedItem.getParent = () => this;\r\n relatedItem.load(dbFeature);\r\n return true\r\n }\r\n\r\n isSubTypeWithItems() {\r\n return false;\r\n }\r\n\r\n handleSubPartClick() {\r\n\r\n }\r\n\r\n}\r\n","import {Part} from \"../part\";\r\nimport {PartMenuType} from \"../../../visComponents/constants\";\r\nimport BackgroundBG from \"../subparts/backgrounds/BackgroundBG\";\r\n\r\nexport default class Background extends Part {\r\n static id = 'Background';\r\n constructor() {\r\n super(true, false, PartMenuType.Complex);\r\n\r\n this.menuType = PartMenuType.Complex;\r\n this.partName = 'Background';\r\n this.categoryEnabled = false;\r\n this.relatedGroupNames = [\"Background\"];\r\n }\r\n\r\n load(dbFeature, loadFeature = true) {\r\n let relatedItemName = \"\",\r\n RelatedItemClass = null;\r\n switch (dbFeature.groupName) {\r\n case \"Background\":\r\n switch (true) {\r\n case (!loadFeature || (dbFeature.displayName && dbFeature.displayName.includes(\"Background - BG\"))):\r\n relatedItemName = \"backgroundBG\";\r\n RelatedItemClass = BackgroundBG;\r\n break;\r\n }\r\n break;\r\n default:\r\n break;\r\n }\r\n return this.loadCommon(relatedItemName, RelatedItemClass, dbFeature, loadFeature)\r\n }\r\n\r\n isSubTypeWithItems() {\r\n return false;\r\n }\r\n\r\n handleSubPartClick() {\r\n\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport {Shower} from \"../../parts/shower\";\r\nimport {IS_BATHROOM_OLD_BV_SCENE} from \"../../../../../config\";\r\n\r\nexport default class BackgroundBG extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'background_bg';\r\n this.partName = 'Background BG';\r\n this.windowNeededLayouts = [1];\r\n }\r\n\r\n getArrayOfConditions() {\r\n const layout = this.getParent().layout;\r\n let conditions = super.getArrayOfConditions(); //roomLayout\r\n // const windowParent = layout.parts[WindowParent.id];\r\n const showerParent = layout.parts[Shower.id];\r\n\r\n // const windowBody = windowParent.windowBody;\r\n // if (windowBody && this.windowNeededLayouts.includes(layout.type)) {\r\n // conditions.push({\r\n // propName: \"Window\",\r\n // propValue: (windowBody && windowBody.activeFeature && windowBody.disabled) ? \"Off\" : \"On\"\r\n // })\r\n // }\r\n\r\n if (showerParent && showerParent.showerSize() && !IS_BATHROOM_OLD_BV_SCENE) {\r\n conditions.push({\r\n propName: \"ShowerSize\",\r\n propValue: showerParent.showerSize()\r\n })\r\n }\r\n\r\n return conditions\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n if (zIndexes && this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndexes.Background.BackgroundBG;\r\n }\r\n }\r\n}\r\n","import TubCommon from \"./tubCommon\";\r\n\r\nexport default class BathTubLiner extends TubCommon {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = \"bathtub_liner\";\r\n this.bottomTubId = \"bathtub_liner\";\r\n this.visible = true;\r\n this.partName = \"Tub Liner\";\r\n this.translateId = \"visualizer.bathroom.shower_tub_combo.bathtub_liner\";\r\n this.dbName = \"Bathtub Liner\";\r\n this.isStoneFeature = false;\r\n this.disableOnHomeSections = true;\r\n }\r\n}\r\n","import TubCommon from \"./tubCommon\";\r\nimport {IS_LIXIL_SERVERS} from \"../../../../../config\";\r\n\r\nexport default class ReplacementTub extends TubCommon {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'replacement_tub';\r\n this.bottomTubId = \"replacement_tub\";\r\n this.visible = true;\r\n this.partName = 'Replacement Tub';\r\n this.translateId = \"visualizer.bathroom.shower_tub_combo.replacement_tub\";\r\n this.isStoneFeature = false;\r\n this.disableOnHomeSections = true;\r\n this.canBeDisabled = IS_LIXIL_SERVERS; // request by Lixil\r\n if (isChild) {\r\n this.oneLayerPosition = true;\r\n }\r\n }\r\n\r\n navigationSubItems(filters, searchText) {\r\n return this.navigationSubItemsWithSides(filters, searchText);\r\n }\r\n}\r\n","import TubCommon from \"./tubCommon\";\r\nimport {getSkuWithoutDot} from \"../../../lookNavigation/lookFunctions2\";\r\n\r\nexport default class WalkInTub extends TubCommon {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'walk_in_tub';\r\n this.bottomTubId = \"walk_in_tub\";\r\n this.visible = true;\r\n this.partName = 'Walk In Tub';\r\n this.translateId = \"visualizer.bathroom.shower_tub_combo.walk_in_tub\";\r\n this.isStoneFeature = false;\r\n if (isChild) {\r\n this.oneLayerPosition = true;\r\n }\r\n }\r\n\r\n load(dbFeature) {\r\n dbFeature.metaData[\"layerPosition\"] = dbFeature.metaData[\"Side\"] ? dbFeature.metaData[\"Side\"][0] : \"\";\r\n if (dbFeature.metaData[\"ActualDisplayedName\"] && dbFeature.metaData[\"ActualDisplayedName\"][0]) {\r\n dbFeature.metaData[\"ActualDisplayedName\"] = getSkuWithoutDot(dbFeature.metaData[\"ActualDisplayedName\"][0]);\r\n } else {\r\n dbFeature.metaData[\"ActualDisplayedName\"] = getSkuWithoutDot(dbFeature.sharedFeatureName);\r\n }\r\n return super.load_(dbFeature, new WalkInTub());\r\n }\r\n\r\n navigationSubItems(filters, searchText) {\r\n return this.navigationSubItemsWithSides(filters, searchText);\r\n }\r\n\r\n}\r\n","import TubCommon from \"./tubCommon\";\r\n\r\nexport default class JettedTub extends TubCommon {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'jetted_tub';\r\n this.bottomTubId = \"jetted_tub\";\r\n this.visible = true;\r\n this.partName = 'Jetted Tub';\r\n this.translateId = \"visualizer.bathroom.shower_tub_combo.jetted_tub\";\r\n this.isStoneFeature = false;\r\n this.disableOnHomeSections = true;\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\n\r\nexport default class WallConfiguration extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'wall_configuration';\r\n this.partName = 'Wall Configuration';\r\n this.translateId = \"visualizer.bathroom.shower_tub_combo.wall_configuration\";\r\n this.visible = true;\r\n this.isStoneFeature = false;\r\n this.disableOnHomeSections = true;\r\n this.createdManually = true;\r\n }\r\n\r\n // setLayers(layout) {\r\n // this.activeFeature = this.features.find((feature) => {\r\n // return feature.partName === this.getParent().showerBody.activeFeature.partName // set the same glass as Body\r\n // });\r\n // return super.setLayers(layout);\r\n // }\r\n\r\n handleClick() {\r\n super.handleClick();\r\n const showerTubComboParent = this.getParent().getParent();\r\n showerTubComboParent.setShowerTubCombo();\r\n showerTubComboParent.setShowerSize(this.leftShowerWallType, this.showerComboSize);\r\n this.featureClicked();\r\n }\r\n\r\n setZIndex() {}\r\n}\r\n","import TubCommon from \"./tubCommon\";\r\n\r\nexport default class WalkInTubFixture extends TubCommon {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'walk_in_tub_fixture';\r\n this.visible = true;\r\n this.partName = 'Walk In Tub Fixture';\r\n this.translateId = \"visualizer.bathroom.shower_tub_combo.walk_in_tub_fixture\";\r\n this.bottomTubId = \"walk_in_tub\";\r\n this.canBeDisabled = true;\r\n }\r\n\r\n getArrayOfConditions() {\r\n let conditions = super.getArrayOfConditions(); //roomLayout\r\n const showerComboParent = this.getParent();\r\n if (showerComboParent.walkInTub && showerComboParent.walkInTub.activeFeature\r\n && !showerComboParent.walkInTub.disabled) {\r\n conditions.push({\r\n propName: \"MatchingFeature\",\r\n propValue: showerComboParent.walkInTub.activeFeature.metaData[\"ActualDisplayedName\"]\r\n });\r\n }\r\n return conditions\r\n }\r\n\r\n}\r\n","import TubCommon from \"./tubCommon\";\r\nimport {Shower} from \"../../parts/shower\";\r\nimport {createParentPositions, LOOK_ROOM_TYPES, METADATA, ShowerHeadTypes} from \"../../constants\";\r\nimport {getCurrentRoomType} from \"../../../../appLayout\";\r\n\r\nexport default class ReplacementTubFixture extends TubCommon {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'replacement_tub_fixture';\r\n this.visible = true;\r\n this.partName = 'Replacement Tub Fixture';\r\n this.dbName = 'Replacement tub Fixture';\r\n this.translateId = \"visualizer.bathroom.shower_tub_combo.replacement_tub_fixture\";\r\n this.bottomTubId = \"replacement_tub\";\r\n this.canBeDisabled = true;\r\n if (isChild) {\r\n createParentPositions(this);\r\n }\r\n }\r\n\r\n load(dbFeature) {\r\n if (!dbFeature.metaData[\"Side\"] || (Array.isArray(dbFeature.metaData[\"Side\"]) && dbFeature.metaData[\"Side\"][0] === \"0\")) {\r\n dbFeature.metaData[\"Side\"] = [METADATA.LeftSide];\r\n }\r\n dbFeature.metaData[\"layerPosition\"] = dbFeature.metaData[\"Side\"] ? dbFeature.metaData[\"Side\"][0] : \"\";\r\n if (Array.isArray(dbFeature.metaData[\"ShowerSize\"]) && dbFeature.metaData[\"ShowerSize\"].includes(\"0\")) {\r\n dbFeature.metaData[\"ShowerSize\"] = [METADATA.ALL];\r\n }\r\n return super.load(dbFeature)\r\n }\r\n\r\n handleClick() {\r\n const showerTubComboParent = this.getParent().getParent();\r\n const showerParent = showerTubComboParent.layout.parts[\"Shower\"];\r\n showerParent.setShowerHeadType(ShowerHeadTypes.shower_fixture);\r\n if (getCurrentRoomType() === LOOK_ROOM_TYPES.as) {\r\n if (Array.isArray(this.metaData[\"MountType\"]) && this.metaData[\"MountType\"].includes(\"S\")\r\n && ((showerParent.shower_head_type === ShowerHeadTypes.shower_arm && showerParent.showerArm && !showerParent.showerArm.disabled)\r\n || (showerParent.shower_head_type === ShowerHeadTypes.shower_head_bundle && showerParent.showerHeadBundle && !showerParent.showerHeadBundle.disabled))) {\r\n // store.dispatch(setLookOverlayOpened(LOOK_OVERLAYS.notCompatiblePopup));\r\n // return;\r\n this.applyFeatureIfNotCompatible();\r\n }\r\n }\r\n super.handleClick();\r\n }\r\n\r\n applyFeatureIfNotCompatible() {\r\n const showerParent = this.getParent().getParent();\r\n if (showerParent.showerArm) {\r\n showerParent.showerArm.disabled = true;\r\n }\r\n if (showerParent.showerHead) {\r\n showerParent.showerHead.disabled = true;\r\n }\r\n if (showerParent.showerHeadBundle) {\r\n showerParent.showerHeadBundle.disabled = true;\r\n }\r\n }\r\n\r\n hideLayerCondition() {\r\n const showerTubComboParent = this.getParent();\r\n const showerParent = showerTubComboParent.layout.parts[\"Shower\"];\r\n if (!showerTubComboParent.showerTubComboIsActive || showerTubComboParent.bottomTub === \"walk_in_tub\") { // they don't have repl tub fixture\r\n return false\r\n }\r\n return showerParent.shower_head_type !== ShowerHeadTypes.shower_fixture && this.activeFeature\r\n }\r\n\r\n getArrayOfConditions() {\r\n let conditions = super.getArrayOfConditions(); //roomLayout\r\n // const showerComboParent = this.getParent();\r\n // if (showerComboParent.replacementTub && showerComboParent.replacementTub.activeFeature\r\n // && !showerComboParent.replacementTub.disabled) {\r\n // conditions.push({\r\n // propName: \"MatchingFeature\",\r\n // propValue: showerComboParent.replacementTub.activeFeature.metaData[\"ActualDisplayedName\"]\r\n // });\r\n // } else if (showerComboParent.walkInTub && showerComboParent.walkInTub.activeFeature\r\n // && !showerComboParent.walkInTub.disabled) {\r\n // conditions.push({\r\n // propName: \"MatchingFeature\",\r\n // propValue: showerComboParent.walkInTub.activeFeature.metaData[\"ActualDisplayedName\"]\r\n // });\r\n // }\r\n const layout = this.getParent().layout;\r\n const showerParent = layout.parts[Shower.id];\r\n const showerSize = showerParent.showerSize();\r\n if (showerParent && showerSize) {\r\n conditions.push({\r\n propName: \"ShowerSize\",\r\n propValue: showerSize\r\n });\r\n }\r\n return conditions\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport {METADATA, LOOK_ROOM_TYPES, ShowerHeadTypes, createParentPositions, ShowerComboTubType} from \"../../constants\";\r\nimport {ShowerTubCombo} from \"../../parts/showerTubCombo\";\r\nimport {getCurrentRoomType} from \"../../../../appLayout\";\r\nimport {IS_LIXIL_SERVERS} from \"../../../../../config\";\r\n// import {setLookOverlayOpened} from \"../../../../../actions/lookFunctions\";\r\n// import store from \"../../../../../store\";\r\n\r\nexport default class ShowerFixture extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'shower_fixture';\r\n this.partName = 'Fixture';\r\n this.translateId = \"visualizer.bathroom.shower.shower_fixture\";\r\n this.dbName = 'Shower Fixture';\r\n this.layerPriority = 4;\r\n this.canBeDisabled = true;\r\n if (isChild) {\r\n createParentPositions(this);\r\n }\r\n }\r\n\r\n load(dbFeature) {\r\n if (!dbFeature.metaData[\"Side\"] || (Array.isArray(dbFeature.metaData[\"Side\"]) && dbFeature.metaData[\"Side\"][0] === \"0\")) {\r\n dbFeature.metaData[\"Side\"] = [METADATA.LeftSide];\r\n }\r\n dbFeature.metaData[\"layerPosition\"] = dbFeature.metaData[\"Side\"] ? dbFeature.metaData[\"Side\"][0] : \"\";\r\n if (dbFeature.isFromAsRoom) {\r\n // Eugene Balan: добавил для Shower Fixture в метадату MountType значения для бандлов\r\n // S - прячем эти группы Shower Arm, Shower Head (т.к. они уже включены в набор)\r\n // T - показываем только если включен Replacement Tub + тоже что и S + прячем Tub Spout\r\n // 0 - можем показывать группы Shower Arm, Shower Head, Tub Spout (если включен Replacement Tub)\r\n // 0 - Hand Shower Kit должен показываться вместе с shower fixture у которых MountType: 0\r\n // if (Array.isArray(dbFeature.metaData[\"MountType\"]) && !dbFeature.metaData[\"MountType\"].includes(\"T\")) {\r\n // dbFeature.metaData[\"MountType\"].push(METADATA.ALL)\r\n // }\r\n if (!Array.isArray(dbFeature.metaData[\"MountType\"])) {\r\n console.log(\"alarm, alarm , this shower fixture has no MountType metadata!\", dbFeature);\r\n }\r\n if (Array.isArray(dbFeature.metaData[\"ShowerSize\"]) && dbFeature.metaData[\"ShowerSize\"].includes(\"0\")) {\r\n dbFeature.metaData[\"ShowerSize\"] = [METADATA.ALL];\r\n }\r\n }\r\n return super.load(dbFeature)\r\n }\r\n\r\n handleClick() {\r\n const showerParent = this.getParent().getParent();\r\n showerParent.setShowerHeadType(ShowerHeadTypes.shower_fixture);\r\n if (getCurrentRoomType() === LOOK_ROOM_TYPES.as) {\r\n if (Array.isArray(this.metaData[\"MountType\"]) && this.metaData[\"MountType\"].includes(\"S\")\r\n && ((showerParent.shower_head_type === ShowerHeadTypes.shower_arm && showerParent.showerArm && !showerParent.showerArm.disabled)\r\n || (showerParent.shower_head_type === ShowerHeadTypes.shower_head_bundle && showerParent.showerHeadBundle && !showerParent.showerHeadBundle.disabled))) {\r\n // store.dispatch(setLookOverlayOpened(LOOK_OVERLAYS.notCompatiblePopup));\r\n // return;\r\n this.applyFeatureIfNotCompatible();\r\n }\r\n }\r\n super.handleClick();\r\n }\r\n\r\n hideLayerCondition() {\r\n const showerParent = this.getParent();\r\n const showerTubComboParent = showerParent.layout.parts[\"Shower Tub Combo\"];\r\n if (showerTubComboParent && showerTubComboParent.showerTubComboIsActive\r\n && showerTubComboParent.bottomTub !== \"walk_in_tub\" && !IS_LIXIL_SERVERS) { // they don't have repl tub fixture\r\n return true\r\n }\r\n return showerParent.shower_head_type !== ShowerHeadTypes.shower_fixture && this.activeFeature\r\n }\r\n\r\n applyFeatureIfNotCompatible() {\r\n const showerParent = this.getParent().getParent();\r\n if (showerParent.showerArm) {\r\n showerParent.showerArm.disabled = true;\r\n }\r\n if (showerParent.showerHead) {\r\n showerParent.showerHead.disabled = true;\r\n }\r\n if (showerParent.showerHeadBundle) {\r\n showerParent.showerHeadBundle.disabled = true;\r\n }\r\n }\r\n\r\n getArrayOfConditions() {\r\n const showerParent = this.getParent();\r\n if (getCurrentRoomType(showerParent.layout) === LOOK_ROOM_TYPES.as) {\r\n const showerComboParent = showerParent.layout.parts[ShowerTubCombo.id];\r\n\r\n let conditions = super.getArrayOfConditions(); //roomLayout\r\n const showerSize = showerParent.showerSize();\r\n if (showerSize) {\r\n conditions.push({\r\n propName: \"ShowerSize\",\r\n propValue: showerSize\r\n })\r\n }\r\n conditions.push({\r\n propName: \"MountType\",\r\n propValue: (showerComboParent && showerParent.showerTubComboIsActive()\r\n && showerComboParent.bottomTub === ShowerComboTubType.replacement_tub) ? \"T\" : \"S\"\r\n })\r\n return conditions\r\n }\r\n return super.getArrayOfConditions()\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport Walls from \"../../parts/walls\";\r\n\r\nexport default class ShowerScreen extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'shower_screen';\r\n this.partName = 'Shower Screen';\r\n this.translateId = \"visualizer.bathroom.shower.shower_screen\";\r\n this.layerPriority = 12;\r\n this.canBeDisabled = true;\r\n }\r\n\r\n handleClick() {\r\n const wallParent = this.getParent().getParent().layout.parts[Walls.id];\r\n if (wallParent && wallParent.splitWall) {\r\n wallParent.splitWall.disabled = true;\r\n }\r\n super.handleClick();\r\n }\r\n\r\n setLayers(layout) {\r\n const wallParent = layout.parts[Walls.id];\r\n if (wallParent && wallParent.splitWall && wallParent.splitWall.activeFeature && !wallParent.splitWall.disabled) {\r\n super.hideLayers();\r\n return;\r\n }\r\n return super.setLayers(layout);\r\n }\r\n\r\n}\r\n","import WallCommon from \"./wallCommon\";\r\nimport {createPageToLoadArray} from \"../../constants\";\r\n\r\nexport default class LeftWall extends WallCommon {\r\n constructor(isChild, partNumber = 0) {\r\n super(isChild);\r\n this.partNumber = partNumber;\r\n this.partId = 'left_wall';\r\n this.partName = 'Left Wall';\r\n this.dbName = 'Left Wall';\r\n this.translateId = \"visualizer.bathroom.walls.left_wall\";\r\n this.activeFeatureBeforeAllWalls = null;\r\n this.allWallsApplied = true;\r\n this.isStoneFeature = true;\r\n this.hasAdditionalParts = true;\r\n this.additionalPartPartId = \"left_wall_crop\";\r\n if (isChild) {\r\n createPageToLoadArray(this);\r\n }\r\n }\r\n\r\n load(dbFeature) {\r\n const partNumber = dbFeature.groupName === this.dbName ? 1 : 2;\r\n return super.load_(dbFeature, new LeftWall(false, partNumber),\r\n true, partNumber === 1 ? 'features' : 'featuresParts');\r\n }\r\n\r\n}\r\n","import WallCommon from \"./wallCommon\";\r\nimport {createPageToLoadArray} from \"../../constants\";\r\n\r\nexport default class RightWall extends WallCommon {\r\n constructor(isChild, partNumber = 0) {\r\n super(isChild);\r\n this.partNumber = partNumber;\r\n this.partId = 'right_wall';\r\n this.partName = 'Right Wall';\r\n this.dbName = 'Right Wall';\r\n this.translateId = \"visualizer.bathroom.walls.right_wall\";\r\n this.activeFeatureBeforeAllWalls = null;\r\n this.allWallsApplied = true;\r\n this.isStoneFeature = true;\r\n this.hasAdditionalParts = true;\r\n this.additionalPartPartId = \"right_wall_crop\";\r\n if (isChild) {\r\n createPageToLoadArray(this);\r\n }\r\n }\r\n\r\n load(dbFeature) {\r\n const partNumber = dbFeature.groupName === this.dbName ? 1 : 2;\r\n return super.load_(dbFeature, new RightWall(false, partNumber),\r\n true, partNumber === 1 ? 'features' : 'featuresParts');\r\n }\r\n\r\n}\r\n\r\n","import WallCommon from \"./wallCommon\";\r\nimport {createPageToLoadArray} from \"../../constants\";\r\n\r\nexport default class CenterWall extends WallCommon {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'center_wall';\r\n this.partName = 'Center Wall';\r\n this.translateId = \"visualizer.bathroom.walls.center_wall\";\r\n this.activeFeatureBeforeAllWalls = null;\r\n this.allWallsApplied = true;\r\n this.isStoneFeature = true;\r\n if (isChild) {\r\n createPageToLoadArray(this);\r\n }\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n if(zIndexes) {\r\n const zIndex = zIndexes.Background.CenterWall;\r\n if (this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndex;\r\n }\r\n }\r\n }\r\n}\r\n","import WallCommon from \"./wallCommon\";\r\nimport {createPageToLoadArray} from \"../../constants\";\r\n\r\nexport default class BackWall extends WallCommon {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'back_wall';\r\n this.partName = 'Back Wall';\r\n this.translateId = \"visualizer.bathroom.walls.back_wall\";\r\n this.activeFeatureBeforeAllWalls = null;\r\n this.allWallsApplied = true;\r\n this.isStoneFeature = true;\r\n if (isChild) {\r\n createPageToLoadArray(this);\r\n }\r\n }\r\n}\r\n","import WallCommon from \"./wallCommon\";\r\n\r\nexport default class Ceiling extends WallCommon {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'walls_ceiling';\r\n this.partName = 'Ceiling';\r\n this.translateId = \"visualizer.kitchen.walls.walls_ceiling\";\r\n this.isStoneFeature = true;\r\n }\r\n}\r\n","import WallCommon from \"./wallCommon\";\r\nimport {createPageToLoadArray} from \"../../constants\";\r\n\r\nexport default class FrontWall extends WallCommon {\r\n constructor(isChild, partNumber = 0) {\r\n super(isChild);\r\n this.partNumber = partNumber;\r\n this.partId = 'front_wall';\r\n this.partName = 'Front Wall';\r\n this.dbName = 'Front Wall';\r\n this.translateId = \"visualizer.bathroom.walls.front_wall\";\r\n this.activeFeatureBeforeAllWalls = null;\r\n this.allWallsApplied = true;\r\n this.isStoneFeature = true;\r\n this.hasAdditionalParts = true;\r\n this.additionalPartPartId = \"front_wall_crop\";\r\n if (isChild) {\r\n createPageToLoadArray(this);\r\n }\r\n }\r\n\r\n load(dbFeature) {\r\n const partNumber = dbFeature.groupName === this.dbName ? 1 : 2;\r\n return super.load_(dbFeature, new FrontWall(false, partNumber),\r\n true, partNumber === 1 ? 'features' : 'featuresParts');\r\n }\r\n\r\n}\r\n","import WallCommon from \"./wallCommon\";\r\nimport {Shower} from \"../../parts/shower\";\r\nimport {createPageToLoadArray} from \"../../constants\";\r\n\r\nexport default class SplitWall extends WallCommon {\r\n constructor(isChild, partNumber = 0) {\r\n super(isChild);\r\n this.partNumber = partNumber;\r\n this.partId = 'split_wall';\r\n this.partName = 'Split Wall';\r\n this.translateId = \"visualizer.bathroom.walls.split_wall\";\r\n this.activeFeatureBeforeAllWalls = null;\r\n this.allWallsApplied = true;\r\n this.isStoneFeature = true;\r\n // this.hasAdditionalParts = true;\r\n // this.additionalPartPartId = \"split_wall_crop\";\r\n if (isChild) {\r\n createPageToLoadArray(this);\r\n }\r\n }\r\n\r\n handleClick() {\r\n const showerParent = this.getParent().getParent().layout.parts[Shower.id];\r\n if (showerParent && showerParent.showerScreen) {\r\n showerParent.showerScreen.disabled = true;\r\n }\r\n super.handleClick();\r\n }\r\n\r\n // setLayers(layout) { // we can't enable it since nothing will be selected on the very first load\r\n // const wallParent = layout.parts[Shower.id];\r\n // if (wallParent && wallParent.showerScreen && !wallParent.showerScreen.disabled) {\r\n // super.hideLayers();\r\n // return;\r\n // }\r\n // return super.setLayers(layout);\r\n // }\r\n\r\n}\r\n\r\n","import WallCommon from \"./wallCommon\";\r\nimport {createPageToLoadArray} from \"../../constants\";\r\n\r\nexport default class LeftWallSplitter extends WallCommon {\r\n constructor(isChild, partNumber = 0) {\r\n super(isChild);\r\n this.partNumber = partNumber;\r\n this.partId = 'left_wall_splitter';\r\n this.partName = 'Left Wall Splitter';\r\n this.translateId = \"visualizer.bathroom.walls.left_wall_splitter\";\r\n this.activeFeatureBeforeAllWalls = null;\r\n this.allWallsApplied = true;\r\n this.isStoneFeature = true;\r\n // this.hasAdditionalParts = true;\r\n // this.additionalPartPartId = \"split_wall_crop\";\r\n if (isChild) {\r\n createPageToLoadArray(this);\r\n }\r\n }\r\n}\r\n\r\n","import WallCommon from \"./wallCommon\";\r\n\r\nexport default class CeilingPanels extends WallCommon {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'ceiling_panels';\r\n this.partName = 'Ceiling Panels';\r\n this.translateId = \"visualizer.bathroom.ceiling_panels\";\r\n this.isStoneFeature = true;\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\n\r\nexport default class ShowerGlass extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'shower_glass';\r\n this.partName = 'Shower Glass';\r\n this.translateId = \"visualizer.bathroom.shower.shower_glass\";\r\n this.layerPriority = 12;\r\n this.canBeDisabled = true;\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport {Vanity} from \"../../parts/vanity\";\r\n\r\nimport {LayoutType} from \"../../constants\";\r\nimport {ShowerTubCombo} from \"../../parts/showerTubCombo\";\r\nimport {\r\n custom30in15X4Shower,\r\n custom30in30X8Shower,\r\n custom30inPonyShower,\r\n custom60in15X4Shower,\r\n custom60in30X8Shower,\r\n custom60inPonyShower\r\n} from \"../../../../bvComponent/core/assets\";\r\n\r\nexport default class ShowerBody extends IntermediatePart {\r\n\r\n constructor(isChild, partNumber = 0) {\r\n super(isChild);\r\n this.partId = 'shower_body';\r\n this.partName = 'Shower Body';\r\n this.translateId = \"visualizer.bathroom.shower.shower_body\";\r\n this.homePageTitle = 'Shower Doors & Glass';\r\n this.partNumber = partNumber;\r\n this.activeFeatureParts = [];\r\n this.canBeDisabled = false;\r\n this.placeholderChanged = true; // never show placeholder to body\r\n this.firstClick = {\r\n \"0\": true // never show placeholder to body\r\n }\r\n this.layerPriority = 1;\r\n this.createdManually = true;\r\n }\r\n\r\n load(dbFeature) {\r\n const loadedShowerBody = super.load_(dbFeature, new ShowerBody());\r\n if (loadedShowerBody) { // it can be false (just skip it)\r\n const featureName = loadedShowerBody.dbFeature.sharedFeatureName;\r\n loadedShowerBody.featureName = featureName;\r\n loadedShowerBody.showerBodyType = 'Custom';\r\n loadedShowerBody.showerDimensions = this.loadShowerDimensions(featureName);\r\n loadedShowerBody.metaData = this.loadShowerMetaData(featureName, loadedShowerBody.showerDimensions);\r\n loadedShowerBody.showerBodyId = featureName.toLowerCase().replace(/ /gi, \"-\");\r\n loadedShowerBody.notAvailableInVisualizer = false;\r\n if (!loadedShowerBody.dbFeature.thumbnailUrl) {\r\n loadedShowerBody.customThumbnail = this.loadThumbnail(featureName)\r\n }\r\n }\r\n return loadedShowerBody\r\n }\r\n\r\n loadShowerDimensions(featureName = this.activeFeature.featureName) {\r\n switch (true) {\r\n case featureName.includes(\"15X4\"):\r\n return \"15X4\"\r\n case featureName.includes(\"Pony\"):\r\n return \"Pony\"\r\n case featureName.includes(\"30X8\"):\r\n default:\r\n return \"30X8\"\r\n }\r\n }\r\n\r\n loadShowerMetaData(featureName = this.activeFeature.featureName, showerDimensions) {\r\n const featureNameSplitted = featureName.split(\"in\")[0];\r\n return {\r\n \"ShowerSize\": featureNameSplitted.length > 1 ? [featureNameSplitted.substr(featureNameSplitted.length - 2)] : ['60'],\r\n \"CountertopSize\": showerDimensions === \"30X8\" ? [\"72in\"] : [\"20in\", \"24in\", \"30in\", \"36in\", \"48in\", \"60in\"]\r\n }\r\n }\r\n\r\n loadThumbnail(featureName = this.activeFeature.featureName) {\r\n switch (true) {\r\n case featureName.includes(\"15X4\"):\r\n return featureName.includes(\"30in\") ? custom30in15X4Shower : custom60in15X4Shower\r\n case featureName.includes(\"Pony\"):\r\n return featureName.includes(\"30in\") ? custom30inPonyShower : custom60inPonyShower\r\n case featureName.includes(\"30X8\"):\r\n default:\r\n return featureName.includes(\"30in\") ? custom30in30X8Shower : custom60in30X8Shower\r\n }\r\n }\r\n\r\n handleClick() {\r\n const parent = this.getParent();\r\n if (parent.getParent && parent.getParent()) {\r\n super.handleClick();\r\n parent.activeFeatureParts = parent.setActiveFeatureParts();\r\n } else {\r\n parent.showerBody.activeFeature = this;\r\n }\r\n this.getParent().showerBodySelectedByUser = true;\r\n const shower = this.getParent().layout ? this.getParent() : this.getParent().getParent(); // workaround for complete & custom click\r\n if (shower.showerTubComboIsActive) {\r\n const comboPart = shower.layout.parts[ShowerTubCombo.id];\r\n comboPart.showerTubComboIsActive = false;\r\n }\r\n this.featureClicked();\r\n }\r\n\r\n disabledClick() {\r\n const showerParent = this.getParent();\r\n showerParent.relatedItems.forEach((relItem) => {\r\n relItem.disabled = this.disabled;\r\n if (relItem.activeFeatureParts && relItem.activeFeatureParts.length) {\r\n relItem.activeFeatureParts.forEach((activeFeaturePart) => {\r\n if (activeFeaturePart) {\r\n activeFeaturePart.disabled = this.disabled\r\n }\r\n });\r\n }\r\n });\r\n if (showerParent.layout && showerParent.showerTubComboIsActive) {\r\n const comboPart = showerParent.layout.parts[ShowerTubCombo.id];\r\n comboPart.showerTubComboIsActive = false;\r\n }\r\n this.activeFeatureParts.forEach((activeFeaturePart) => {\r\n activeFeaturePart.disabled = this.disabled\r\n });\r\n const wallParent = showerParent.layout.parts.Walls;\r\n wallParent.wallExL.disabled = this.disabled;\r\n // wallParent.wallExR.disabled = this.disabled;\r\n\r\n const bathtubParent = showerParent.layout.parts.Bathtub;\r\n\r\n if (showerParent.layout.type === LayoutType.Small && !this.disabled && bathtubParent) { // switch off all bathtub features\r\n if (bathtubParent.bathTubBody) {\r\n bathtubParent.bathTubBody.disabled = true;\r\n }\r\n if (bathtubParent.bathTubBody) {\r\n bathtubParent.bathTubBase.disabled = true;\r\n bathtubParent.bathTubBase.disabledClick();\r\n }\r\n }\r\n }\r\n\r\n availableFeatures(filters) {\r\n const layout = this.getParent().layout;\r\n const filteredAvailableFeatures = filters ? super.getFilteredFeaturesByFilters(filters) : this.features;\r\n const counterTopSize = layout.parts[Vanity.id].counterTopSize(this);\r\n return filteredAvailableFeatures.filter((feature) => {\r\n if (counterTopSize === '72in' && layout.type === 1) {\r\n return feature.showerDimensions === \"30X8\" || feature.showerDimensions === \"Pony\"\r\n }\r\n return true\r\n })\r\n }\r\n\r\n getArrayOfConditions() {\r\n return []\r\n }\r\n\r\n setActiveFeatureParts() {\r\n const activeFeatureParts = (this.activeFeature && this.activeFeature.partNumber) ? this.featuresParts.filter((feature) => {\r\n return feature.partName === this.activeFeature.partName\r\n }) : [];\r\n activeFeatureParts.forEach((activeFeaturePart) => {\r\n activeFeaturePart.disabled = this.disabled\r\n });\r\n return activeFeatureParts\r\n }\r\n\r\n setDefault() {\r\n const availableFeatures = this.availableFeatures();\r\n const layout = this.getParent().layout;\r\n let hardCodedDefault = availableFeatures.find((feature) => {\r\n return feature.partName === \"Custom B 60in 15X4\";\r\n });\r\n const counterTopSize = layout.parts[Vanity.id].counterTopSize(this);\r\n if (counterTopSize === '72in' && layout.type === 1 && this.activeFeature) {\r\n hardCodedDefault = availableFeatures.find((feature) => {\r\n return this.activeFeature.partName.includes(\"60in\")\r\n ? feature.partName.includes(\"60in\")\r\n : feature.partName.includes(\"30in\")\r\n });\r\n }\r\n this.activeFeature = hardCodedDefault || availableFeatures[0];\r\n this.activeFeatureParts = this.setActiveFeatureParts();\r\n }\r\n\r\n setLayers(layout) {\r\n if (this.getParent().showerTubComboIsActive()) {\r\n super.hideLayers();\r\n return;\r\n }\r\n super.setLayers(layout);\r\n }\r\n\r\n setZIndex() {}\r\n\r\n changeLayout(layoutType) {\r\n if (layoutType === 1 && this.disabled) {\r\n this.disabled = false;\r\n this.disabledClick();\r\n }\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport Walls from \"../../parts/walls\";\r\nimport {getCurrentRoomType} from \"../../../../appLayout\";\r\nimport {createPageToLoadArray, LOOK_ROOM_TYPES} from \"../../constants\";\r\n\r\nexport default class ShowerWall extends IntermediatePart {\r\n\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'shower_wall';\r\n this.partName = 'Shower Wall';\r\n this.translateId = \"visualizer.bathroom.shower.shower_wall\";\r\n this.homePageTitle = 'Interior Shower Walls';\r\n this.isStoneFeature = true;\r\n this.canUseWizard = true;\r\n this.layerPriority = 2;\r\n if (isChild) {\r\n createPageToLoadArray(this);\r\n }\r\n }\r\n\r\n getArrayOfConditions() {\r\n const conditions = super.getArrayOfConditions();\r\n const showerParent = this.getParent();\r\n const showerSize = showerParent ? showerParent.showerSize() : null;\r\n if (showerSize) {\r\n conditions.push({\r\n propName: \"ShowerSize\",\r\n propValue: showerSize\r\n })\r\n }\r\n // if (wallParent && wallParent.splitWallType) {\r\n // conditions.push({\r\n // propName: \"SplitWallType\",\r\n // propValue: wallParent.splitWallType\r\n // })\r\n // }\r\n const wallParent = showerParent.layout.parts[Walls.id];\r\n if (getCurrentRoomType(showerParent.layout) === LOOK_ROOM_TYPES.as && wallParent && wallParent.splitWall) {\r\n conditions.push({\r\n propName: \"SplitWallType\",\r\n propValue: wallParent.getSplitWallType()\r\n })\r\n }\r\n return conditions\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport {getFeatureIsLocked} from \"../../../../../misc/helpers\";\r\n\r\nexport default class ShowerWallAccent extends IntermediatePart {\r\n\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = \"shower_wall_accent\";\r\n this.partName = \"Shower Walls Accent\";\r\n this.translateId = \"visualizer.bathroom.shower.shower_wall_accent\";\r\n this.dbName = \"Shower Wall Accent\";\r\n this.homePageTitle = 'Interior Shower Walls';\r\n this.isStoneFeature = true;\r\n this.canUseWizard = true;\r\n this.layerPriority = 2;\r\n }\r\n\r\n handleClick(ignoreLocked) {\r\n const parent = this.getParent();\r\n super.handleClick(ignoreLocked);\r\n const shower = parent.getParent();\r\n if (shower.showerWallAccent && shower.showerWallAccent.canBeDisabled\r\n && !shower.showerWallAccent.placeholderChanged && !getFeatureIsLocked(this)) {\r\n shower.showerWallAccent.disabled = true;\r\n shower.showerWallAccent.disabledClick();\r\n }\r\n this.featureClicked();\r\n }\r\n\r\n getArrayOfConditions() {\r\n let conditions = super.getArrayOfConditions(); //roomLayout\r\n const showerParent = this.getParent();\r\n conditions.push({\r\n propName: \"ShowerSize\",\r\n propValue: showerParent.showerSize()\r\n });\r\n return conditions\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n const zIndex = zIndexes.ShowerWallAccent;\r\n if (zIndexes && this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndex;\r\n }\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport {getFeatureIsLocked} from \"../../../../../misc/helpers\";\r\n// import {ShowerComboTubType} from \"../../constants\";\r\nimport {ShowerTubCombo} from \"../../parts/showerTubCombo\";\r\nimport {ShowerAccessories} from \"../../parts/showerAccessories\";\r\nimport {removeLookPointFor} from \"../../../lookNavigation/lookFunctions2\";\r\nimport {getCurrentRoomType} from \"../../../../appLayout\";\r\nimport {LayoutType, LOOK_ROOM_TYPES, METADATA, ShowerComboTubType} from \"../../constants\";\r\nimport {IS_QKB_UI} from \"../../../../../config\";\r\n\r\nexport default class ShowerDoor extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'shower_door';\r\n this.partName = 'Shower Door';\r\n this.translateId = \"visualizer.bathroom.shower.shower_door\";\r\n this.visible = true;\r\n this.isStoneFeature = false;\r\n this.canBeDisabled = true;\r\n this.layerPriority = 5;\r\n\r\n /* only shower door properties */\r\n if (isChild) {\r\n this.previouslySelectedFeatures = {};\r\n this.oneLayerPosition = true;\r\n Object.keys(LayoutType).forEach(layoutName => {\r\n this.previouslySelectedFeatures[layoutName] = {};\r\n })\r\n }\r\n this.currentShowerBodyId = \"\"; // for example \"custom-a-60in-30x8\"\r\n }\r\n\r\n load(dbFeature) {\r\n if (!dbFeature.metaData[\"Side\"]) {\r\n dbFeature.metaData[\"Side\"] = [METADATA.LeftSide];\r\n }\r\n dbFeature.metaData[\"layerPosition\"] = dbFeature.metaData[\"Side\"] ? dbFeature.metaData[\"Side\"][0] : \"\";\r\n dbFeature.lixilProductSubCategory = \"Shower Doors\"; // because some of them are missing this subcategory!\r\n return super.load(dbFeature);\r\n }\r\n\r\n navigationSubItems(...props) {\r\n if (IS_QKB_UI) {\r\n return this.navigationSubItemsWithSides(...props);\r\n }\r\n return super.navigationSubItems(...props);\r\n }\r\n\r\n disabledClick() {\r\n const showerParent = this.getParent();\r\n const showerDoorHandle = showerParent.showerDoorHandle;\r\n if (showerDoorHandle && showerDoorHandle) {\r\n showerDoorHandle.disabled = this.disabled || !showerDoorHandle.canBeEnabled(); // true or check if it can be enabled;\r\n }\r\n const accParent = showerParent.layout.parts[ShowerAccessories.id]\r\n if (!this.disabled && accParent && accParent.showerRod && !accParent.showerRod.disabled\r\n && accParent.showerRod) {\r\n accParent.showerRod.disabled = true\r\n }\r\n }\r\n\r\n handleClick() {\r\n super.handleClick();\r\n if (!this.notAvailableInVisualizer && !getFeatureIsLocked(this)) {\r\n // this.getParent().getParent().setShowerTubCombo();\r\n // let doorWithLiner = false;\r\n // if(this.metaData && this.metaData.length) {\r\n // const activeDoorMetadata = this.metaData.find(metaDataObject => metaDataObject.isFor);\r\n // const showerPanValues = activeDoorMetadata.conditions.find(condition => condition.name === \"BathtubLiner\");\r\n // if (showerPanValues) {\r\n // doorWithLiner = true;\r\n // }\r\n // }\r\n // this.getParent().getParent().setLinerActive(doorWithLiner);\r\n const shower = this.getParent().getParent();\r\n const showerPanCondition = this.metaData[\"ShowerPan\"];\r\n if (!shower.showerTubComboIsActive()) {\r\n shower.showerFloorIsActive = showerPanCondition && showerPanCondition.includes(\"Threshold\");\r\n }\r\n const accParent = shower.layout.parts[ShowerAccessories.id]\r\n if (accParent && accParent.showerRod && !accParent.showerRod.disabled) {\r\n accParent.showerRod.disabled = true\r\n }\r\n if(!this.matchesMetaForArrayOfConditions(this.getParent().getArrayOfConditions())) {\r\n const showerSizeValues = this.metaData[\"ShowerSize\"];\r\n const showerBodyParent = this.getParent().getParent().showerBody;\r\n if (showerSizeValues) {\r\n const showerBodyThatFits = showerBodyParent.features.filter(showerBodyFeature => {\r\n const showerSizeValues2 = showerBodyFeature.metaData[\"ShowerSize\"];\r\n return showerSizeValues.some(condValue => {\r\n return showerSizeValues2.some(condValue2 => condValue === condValue2);\r\n });\r\n });\r\n if (showerBodyThatFits.length && showerBodyThatFits.every(shBody => shBody.partName !== showerBodyParent.activeFeature.partName)) {\r\n let showerBodyToSet = showerBodyThatFits.find(shBody => {\r\n return shBody.showerDimensions === showerBodyParent.activeFeature.showerDimensions\r\n }) || showerBodyThatFits[0];\r\n showerBodyParent.showerBodySelectedByUser = true;\r\n showerBodyParent.activeFeature = showerBodyToSet;\r\n }\r\n }\r\n }\r\n this.featureClicked();\r\n }\r\n }\r\n\r\n // setLayers(layout) {\r\n // const showerParent = this.getParent();\r\n // // const comboParent = showerParent.layout.parts[ShowerTubCombo.id];\r\n // // if (showerParent.showerTubComboIsActive() && comboParent.bottomTub === ShowerComboTubType.walk_in_tub) {\r\n // if (showerParent.showerTubComboIsActive()) {\r\n // super.hideLayers();\r\n // return;\r\n // }\r\n // return super.setLayers(layout);\r\n // }\r\n\r\n getArrayOfConditions() {\r\n const showerParent = this.getParent();\r\n const comboParent = showerParent.layout.parts[ShowerTubCombo.id];\r\n let conditions = super.getArrayOfConditions(); //roomLayout\r\n const showerSize = showerParent.showerSize();\r\n if (showerSize) {\r\n conditions.push({\r\n propName: \"ShowerSize\",\r\n propValue: showerSize\r\n })\r\n }\r\n // if (showerParent.showerTubComboIsActive() && comboParent.bottomTub === ShowerComboTubType.replacement_tub\r\n // && comboParent.replacementTub && comboParent.replacementTub.activeFeature && comboParent.replacementTub.activeFeature.metaData[\"ShowerPanHeight\"]) {\r\n // conditions.push({\r\n // propName: \"ShowerPanHeight\",\r\n // propValue: comboParent.replacementTub.activeFeature.metaData[\"ShowerPanHeight\"]\r\n // })\r\n if (showerParent.showerTubComboIsActive()) {\r\n if (comboParent && comboParent.bottomTub === ShowerComboTubType.replacement_tub) {\r\n if (comboParent.replacementTub && comboParent.replacementTub.activeFeature\r\n && comboParent.replacementTub.activeFeature.metaData\r\n && comboParent.replacementTub.activeFeature.metaData[\"ShowerPanHeight\"]) {\r\n conditions.push({\r\n propName: \"ShowerPanHeight\",\r\n propValue: comboParent.replacementTub.activeFeature.metaData[\"ShowerPanHeight\"]\r\n })\r\n }\r\n } else {\r\n conditions.push({\r\n propName: \"NOT_EXISTING_METADATA\",\r\n propValue: \"whatever\"\r\n })\r\n }\r\n } else if (showerParent && showerParent.showerPanCombo\r\n && showerParent.showerPanCombo.activeFeature && showerParent.showerPanCombo.activeFeature.metaData[\"ShowerPanHeight\"]) {\r\n conditions.push({\r\n propName: \"ShowerPanHeight\",\r\n propValue: showerParent.showerPanCombo.activeFeature.metaData[\"ShowerPanHeight\"]\r\n })\r\n }\r\n return conditions\r\n }\r\n\r\n canDisplayDemoPoint(parentObject) {\r\n if (getCurrentRoomType() === LOOK_ROOM_TYPES.as) {\r\n return removeLookPointFor(parentObject, 3, \"1\") && removeLookPointFor(parentObject, 6, \"1\")\r\n }\r\n return true\r\n }\r\n}\r\n","import {Shower} from \"../../parts/shower\";\r\nimport {createParentPositions} from \"../../constants\";\r\nimport AccessoryCommon from \"./accessoryCommon\";\r\n\r\nexport default class LargeCornerSeat extends AccessoryCommon {\r\n constructor(isChild, partNumber = 0) {\r\n super(isChild);\r\n this.partNumber = partNumber;\r\n this.partId = 'large_corner_seat';\r\n this.partName = 'Large Corner Seat';\r\n this.translateId = \"visualizer.bathroom.accessories.large_corner_seat\";\r\n this.visible = true;\r\n this.canBeDisabled = true;\r\n if (isChild) {\r\n createParentPositions(this);\r\n }\r\n }\r\n\r\n setLayers(layout) {\r\n\r\n const showerParent = this.getParent().layout.parts[Shower.id];\r\n if (showerParent && showerParent.showerTubComboIsActive()) { // shower tub combo - remove\r\n super.hideLayers();\r\n return;\r\n }\r\n\r\n if (this.activeFeature && (this.activeFeature.matchesMetaForArrayOfConditions(this.getArrayOfConditions()))) {\r\n // this.checkIfFeaturePartIsMatching();\r\n return super.setLayers(layout);\r\n }\r\n\r\n this.setDefault();\r\n return super.setLayers(layout);\r\n }\r\n\r\n // setZIndex(zIndexes) {\r\n // if (zIndexes) {\r\n // Object.keys(this.layerPositions).forEach((key, keyIndex) => {\r\n // if (this.layerPositions[key]) {\r\n // this.layerPositions[key].layer.zIndex = zIndexes.Accessories.LargeCornerSeat + keyIndex*10;\r\n // }\r\n // })\r\n // }\r\n // }\r\n\r\n}\r\n\r\n","import {ShowerTubCombo} from \"../../parts/showerTubCombo\";\r\nimport {Shower} from \"../../parts/shower\";\r\nimport {createParentPositions, METADATA, SIDE_POSITIONS} from \"../../constants\";\r\nimport AccessoryCommon from \"./accessoryCommon\";\r\n\r\nexport default class SoapDish extends AccessoryCommon {\r\n constructor(isChild, partNumber = 0) {\r\n super(isChild);\r\n this.partNumber = partNumber;\r\n this.partId = 'soap_dish';\r\n this.partName = 'Soap Dish';\r\n this.translateId = \"visualizer.bathroom.accessories.soap_dish\";\r\n this.visible = true;\r\n this.canBeDisabled = true;\r\n if (isChild) {\r\n createParentPositions(this);\r\n }\r\n }\r\n\r\n load(dbFeature) {\r\n dbFeature.metaData[\"layerPosition\"] = dbFeature.metaData[\"Side\"] ? dbFeature.metaData[\"Side\"][0] : METADATA.LeftSide;\r\n const partNumber = dbFeature.metaData[\"layerPosition\"] === SIDE_POSITIONS[0] ? 1 : 2;\r\n return super.load_(dbFeature, new SoapDish(false, partNumber),\r\n true, partNumber === 1 ? 'features' : 'featuresParts');\r\n }\r\n\r\n disabledClick() {\r\n if (!this.disabled && this.activeFeature) {\r\n this.activeFeature.handleClick() // check soapDish\r\n }\r\n }\r\n\r\n availableFeatures(features) {\r\n return features.filter(feature => feature.partNumber === 1)\r\n }\r\n\r\n setLayers(layout) {\r\n\r\n const showerParent = this.getParent().layout.parts[Shower.id];\r\n const showerComboParent = layout.parts[ShowerTubCombo.id];\r\n\r\n if (showerParent && showerComboParent && showerParent.showerTubComboIsActive() && showerComboParent.bottomTub === \"walk_in_tub\") {\r\n super.hideLayers();\r\n return;\r\n }\r\n\r\n const conditions = this.getArrayOfConditions();\r\n if ((this.activeFeature && this.activeFeature.matchesMetaForArrayOfConditions(conditions)\r\n || (this.activeFeature && this.activeFeature.notAvailableInVisualizer && this.placeholderFeature))) {\r\n return super.setLayers(layout);\r\n }\r\n\r\n this.setDefault();\r\n return super.setLayers(layout);\r\n }\r\n\r\n // setZIndex(zIndexes) {\r\n // if (zIndexes) {\r\n // Object.keys(this.layerPositions).forEach((key, keyIndex) => {\r\n // if (this.layerPositions[key]) {\r\n // this.layerPositions[key].layer.zIndex = zIndexes.Accessories.SoapDish + keyIndex*10;\r\n // }\r\n // })\r\n // }\r\n // }\r\n}\r\n","import {createParentPositions} from \"../../constants\";\r\nimport AccessoryCommon from \"./accessoryCommon\";\r\n\r\nexport default class CornerCaddie extends AccessoryCommon {\r\n constructor(isChild, partNumber = 0) {\r\n super(isChild);\r\n this.partNumber = partNumber;\r\n this.partId = 'corner_caddie';\r\n this.partName = 'Corner Caddie';\r\n this.translateId = \"visualizer.bathroom.accessories.corner_caddie\";\r\n this.visible = true;\r\n this.canBeDisabled = true;\r\n if (isChild) {\r\n createParentPositions(this);\r\n }\r\n }\r\n\r\n availableFeatures(features) {\r\n return features.filter(feature => feature.partNumber === 1)\r\n }\r\n\r\n handleClick() {\r\n const accessoriesParent = this.getParent().getParent();\r\n accessoriesParent.caddie_type = this.partId;\r\n super.handleClick();\r\n }\r\n\r\n setLayers(layout) {\r\n\r\n const accessoriesParent = this.getParent();\r\n if (accessoriesParent.caddie_type !== this.partId) {\r\n super.hideLayers();\r\n return;\r\n }\r\n\r\n if (this.activeFeature && (this.activeFeature.matchesMetaForArrayOfConditions(this.getArrayOfConditions()))) {\r\n // this.checkIfFeaturePartIsMatching();\r\n return super.setLayers(layout);\r\n }\r\n\r\n this.setDefault();\r\n return super.setLayers(layout);\r\n }\r\n\r\n // setZIndex(zIndexes) {\r\n // if (zIndexes) {\r\n // Object.keys(this.layerPositions).forEach((key, keyIndex) => {\r\n // if (this.layerPositions[key]) {\r\n // this.layerPositions[key].layer.zIndex = zIndexes.Accessories.CornerCaddie + keyIndex*10;\r\n // }\r\n // })\r\n // }\r\n // }\r\n\r\n}\r\n","import {createParentPositions} from \"../../constants\";\r\nimport AccessoryCommon from \"./accessoryCommon\";\r\n\r\nexport default class LargeCornerCaddie extends AccessoryCommon {\r\n constructor(isChild, partNumber = 0) {\r\n super(isChild);\r\n this.partNumber = partNumber;\r\n this.partId = 'large_corner_caddie';\r\n this.partName = 'Large Corner Caddie';\r\n this.translateId = \"visualizer.bathroom.accessories.large_corner_caddie\";\r\n this.visible = true;\r\n this.canBeDisabled = true;\r\n if (isChild) {\r\n createParentPositions(this);\r\n }\r\n }\r\n\r\n handleClick() {\r\n const accessoriesParent = this.getParent().getParent();\r\n accessoriesParent.caddie_type = this.partId;\r\n super.handleClick();\r\n }\r\n\r\n setLayers(layout) {\r\n\r\n const accessoriesParent = this.getParent();\r\n if (accessoriesParent.caddie_type !== this.partId) {\r\n super.hideLayers();\r\n return;\r\n }\r\n\r\n if (this.activeFeature && (this.activeFeature.matchesMetaForArrayOfConditions(this.getArrayOfConditions()))) {\r\n // this.checkIfFeaturePartIsMatching();\r\n return super.setLayers(layout);\r\n }\r\n\r\n this.setDefault();\r\n return super.setLayers(layout);\r\n }\r\n\r\n // setZIndex(zIndexes) {\r\n // if (zIndexes) {\r\n // Object.keys(this.layerPositions).forEach((key, keyIndex) => {\r\n // if (this.layerPositions[key]) {\r\n // this.layerPositions[key].layer.zIndex = zIndexes.Accessories.LargeCornerCaddie + keyIndex*10;\r\n // }\r\n // })\r\n // }\r\n // }\r\n\r\n}\r\n","import {METADATA, SIDE_POSITIONS} from \"../../constants\";\r\nimport AccessoryCommon from \"./accessoryCommon\";\r\nimport {Shower} from \"../../parts/shower\";\r\n\r\nexport default class GrabBar extends AccessoryCommon {\r\n constructor(isChild, partNumber = 0) {\r\n super(isChild);\r\n this.partNumber = partNumber;\r\n this.partId = 'grab_bar';\r\n this.partName = 'Grab Bar';\r\n this.translateId = \"visualizer.bathroom.accessories.grab_bar\";\r\n this.visible = true;\r\n this.canBeDisabled = true;\r\n if (isChild) {\r\n this.layerPositions = {\r\n [SIDE_POSITIONS[0]]: null,\r\n [SIDE_POSITIONS[1]]: null,\r\n [SIDE_POSITIONS[2]]: null,\r\n };\r\n }\r\n }\r\n\r\n load(dbFeature) {\r\n dbFeature.metaData[\"layerPosition\"] = dbFeature.metaData[\"Side\"] ? dbFeature.metaData[\"Side\"][0] : METADATA.LeftSide;\r\n const partNumber = dbFeature.metaData[\"layerPosition\"] !== SIDE_POSITIONS[1] ? 1 : 2;\r\n return super.load_(dbFeature, new GrabBar(false, partNumber),\r\n true, partNumber === 1 ? 'features' : 'featuresParts');\r\n }\r\n\r\n disabledClick() {\r\n if (!this.disabled && this.activeFeature) {\r\n this.activeFeature.handleClick() // check soapDish\r\n }\r\n }\r\n\r\n availableFeatures(features) {\r\n return features.filter(feature => feature.partNumber === 1)\r\n }\r\n\r\n handleClick() { // \"this\" is feature!! not the feature group\r\n super.handleClick();\r\n const parent = this.getParent();\r\n const accessoriesParent = parent.getParent();\r\n const showerParent = accessoriesParent.layout.parts[Shower.id];\r\n const showerSize = showerParent.showerSize();\r\n if (showerSize !== \"60\" && parent.activeFeature) {\r\n parent.layerPositions[parent.activeFeature.metaData[\"layerPosition\"]] = parent.activeFeature;\r\n }\r\n // parent.checkRelatedFeatureGroupPositions(this.metaData[\"layerPosition\"]);\r\n }\r\n\r\n checkCenterGrabWall(clickedPosition) { // L or R and C can't be together\r\n if (!clickedPosition) {\r\n return\r\n }\r\n Object.keys(this.layerPositions).forEach(position => {\r\n if (clickedPosition === \"C\") {\r\n if (position !== \"C\") {\r\n this.layerPositions[position] = null;\r\n }\r\n } else if (position === \"C\") {\r\n this.layerPositions[position] = null;\r\n }\r\n })\r\n }\r\n\r\n checkCurrentPositions(position) {\r\n const feature = this.layerPositions[position];\r\n if (!feature) {\r\n return\r\n }\r\n const nameSplitted = feature.dbFeature.sharedFeatureName.split(\" \");\r\n const size = nameSplitted[nameSplitted.length - 1] ? nameSplitted[nameSplitted.length - 1].replace(\"in\", \"\") : \"\";\r\n const newPosition = position === SIDE_POSITIONS[0] ? SIDE_POSITIONS[1] : SIDE_POSITIONS[0];\r\n if (!size || !this.layerPositions[newPosition]) {\r\n return\r\n }\r\n if (this.layerPositions[newPosition]) {\r\n const nameSplitted2 = this.layerPositions[newPosition].dbFeature.sharedFeatureName.split(\" \");\r\n const size2 = nameSplitted2[nameSplitted2.length - 1] ? nameSplitted2[nameSplitted2.length - 1].replace(\"in\", \"\") : \"\";\r\n if (!size || (+size2 === 12 && +size === 12)) { // last chance to keep other side layer\r\n return;\r\n }\r\n }\r\n this.layerPositions[newPosition] = null;\r\n }\r\n\r\n showLayerPositionsModal(forFeature) {\r\n const showerParent = this.getParent().layout.parts[Shower.id];\r\n if (showerParent.showerSize() !== \"60\") {\r\n return false\r\n }\r\n return super.showLayerPositionsModal(forFeature)\r\n }\r\n\r\n}\r\n","import {CORNER_SHELVES_POSITIONS} from \"../../constants\";\r\nimport AccessoryCommon from \"./accessoryCommon\";\r\n\r\nexport default class CornerShelf extends AccessoryCommon {\r\n constructor(isChild, partNumber = 0) {\r\n super(isChild);\r\n this.partNumber = partNumber;\r\n this.partId = \"corner_shelf\";\r\n this.partName = \"Corner Shelf\";\r\n this.translateId = \"visualizer.bathroom.accessories.corner_shelf\";\r\n this.dbName = \"Small Corner Shelf\";\r\n this.visible = true;\r\n this.canBeDisabled = true;\r\n if (isChild) {\r\n this.layerPositions = {};\r\n CORNER_SHELVES_POSITIONS.forEach(pos => {\r\n this.layerPositions[pos] = null\r\n })\r\n }\r\n }\r\n\r\n load(dbFeature) {\r\n dbFeature.metaData[\"layerPosition\"] = (dbFeature.metaData[\"Side\"] && dbFeature.metaData[\"Part\"])\r\n ? dbFeature.metaData[\"Side\"][0] + dbFeature.metaData[\"Part\"][0]\r\n : \"\"\r\n const partNumber = dbFeature.metaData[\"layerPosition\"] === CORNER_SHELVES_POSITIONS[0] ? 1 : 2;\r\n return super.load_(dbFeature, new CornerShelf(false, partNumber),\r\n true, partNumber === 1 ? 'features' : 'featuresParts');\r\n }\r\n\r\n handleClick() {\r\n const accessoriesParent = this.getParent().getParent();\r\n accessoriesParent.caddie_type = this.partId;\r\n super.handleClick();\r\n }\r\n\r\n setLayers(layout) {\r\n\r\n const accessoriesParent = this.getParent();\r\n if (accessoriesParent.caddie_type !== this.partId) {\r\n super.hideLayers();\r\n return;\r\n }\r\n\r\n if (this.activeFeature && (this.activeFeature.matchesMetaForArrayOfConditions(this.getArrayOfConditions()))) {\r\n // this.checkIfFeaturePartIsMatching();\r\n super.setLayers(layout);\r\n } else {\r\n this.setDefault();\r\n super.setLayers(layout);\r\n }\r\n\r\n // if (this.layerPositions) {\r\n // const windowParent = this.getParent().layout.parts.Window;\r\n // if (windowParent && windowParent.windowKits && !windowParent.windowKits.disabled) {\r\n // Object.keys(this.layerPositions).forEach(key => {\r\n // if (!key.includes(\"3\") && this.layerPositions[key]) {\r\n // this.layerPositions[key].layer.src = '';\r\n // }\r\n // })\r\n // }\r\n // }\r\n\r\n }\r\n\r\n // setZIndex(zIndexes) {\r\n // if (zIndexes) {\r\n // Object.keys(this.layerPositions).forEach((key, keyIndex) => {\r\n // if (this.layerPositions[key]) {\r\n // this.layerPositions[key].layer.zIndex = zIndexes.Accessories.CornerShelf1 + keyIndex*10;\r\n // }\r\n // })\r\n // }\r\n // }\r\n\r\n showLayerPositionsModal() {\r\n return true\r\n }\r\n\r\n}\r\n","import AccessoryCommon from \"./accessoryCommon\";\r\n// import DesignNavigationItem from \"../../../../visComponents/designNavigationItem\";\r\n\r\nexport default class ShowerPod extends AccessoryCommon {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'shower_pod';\r\n this.partName = 'Shower Pod';\r\n this.translateId = \"visualizer.bathroom.accessories.shower_pod\";\r\n this.dbName = document.kvConfig.userId === 157639 ? 'Storage Pods' : 'Storage Pod'; // window.location.href.includes(\"american_standard_website\")\r\n this.visible = true;\r\n this.canBeDisabled = true;\r\n }\r\n\r\n load(dbFeature) {\r\n if (document.kvConfig.userId !== 157639 && dbFeature.groupName !== 'Storage Pod') {\r\n return false\r\n }\r\n return super.load_(dbFeature, new ShowerPod());\r\n }\r\n\r\n // navigationSubItems(filters, searchText) {\r\n // const filteredAvailableFeatures = super.getFeaturesBySearchText(super.getFilteredFeaturesByFilters(filters), searchText);\r\n // const featuresToDisplay = super.navigationSubItemsWithFilterMultipleConditions(this.getArrayOfConditions(), filteredAvailableFeatures);\r\n // const parent = this.getParent();\r\n // featuresToDisplay.forEach(feature => {\r\n // if (parent.layout.parts.Window && parent.layout.parts.Window.windowKits && !parent.layout.parts.Window.windowKits.disabled) {\r\n // feature.matchesMetaFailed = true;\r\n // } else if (feature.matchesMetaFailed) {\r\n // feature.matchesMetaFailed = false;\r\n // }\r\n // });\r\n // return featuresToDisplay.map(_ => new DesignNavigationItem(_.featureName, _));\r\n // }\r\n\r\n handleChangeParent(nonCompatibleWith) {\r\n if (nonCompatibleWith === \"Window Kit\") {\r\n const showerPodParent = this.getParent();\r\n const accessoriesParent = showerPodParent.getParent();\r\n accessoriesParent.layout.parts.Window.windowKits.disabled = true;\r\n showerPodParent.disabled = false;\r\n this.handleClick();\r\n }\r\n }\r\n\r\n disabledClick() {\r\n const accessoriesParent = this.getParent();\r\n const windowParent = accessoriesParent.layout.parts.Window;\r\n if (windowParent && windowParent.windowKits && !windowParent.windowKits.disabled) {\r\n windowParent.windowKits.disabled = true;\r\n }\r\n }\r\n\r\n // setZIndex(zIndexes) {\r\n // const zIndex = zIndexes.Accessories.ShowerPod;\r\n // if (zIndexes && this.activeFeature) {\r\n // this.activeFeature.layer.zIndex = zIndex;\r\n // }\r\n // if (zIndexes && this.placeholderFeature) {\r\n // this.placeholderFeature.layer.zIndex = zIndex;\r\n // }\r\n // }\r\n\r\n}\r\n","import AccessoryCommon from \"./accessoryCommon\";\r\nimport {createParentPositions, SIDE_POSITIONS} from \"../../constants\";\r\nimport {Shower} from \"../../parts/shower\";\r\n\r\nexport default class Seats extends AccessoryCommon {\r\n constructor(isChild, partNumber = 0) {\r\n super(isChild);\r\n this.partNumber = partNumber;\r\n this.partId = 'shower_seats';\r\n this.partName = 'Seats';\r\n this.dbName = 'Seats';\r\n this.translateId = \"visualizer.bathroom.accessories.shower_seats\";\r\n this.visible = true;\r\n this.canBeDisabled = true;\r\n this.conflictingPositions = [\"valve_trim\"];\r\n if (isChild) {\r\n createParentPositions(this);\r\n }\r\n }\r\n\r\n load(dbFeature) {\r\n dbFeature.metaData[\"layerPosition\"] = dbFeature.metaData[\"Side\"] ? dbFeature.metaData[\"Side\"][0] : \"\";\r\n const partNumber = dbFeature.metaData[\"layerPosition\"] === SIDE_POSITIONS[0] ? 1 : 2;\r\n return super.load_(dbFeature, new Seats(false, partNumber),\r\n true, partNumber === 1 ? 'features' : 'featuresParts');\r\n }\r\n\r\n setLayers(layout) {\r\n const showerParent = this.getParent().layout.parts[Shower.id];\r\n if (showerParent && showerParent.showerTubComboIsActive()) { // shower tub combo - remove\r\n super.hideLayers();\r\n return;\r\n }\r\n\r\n return super.setLayers(layout);\r\n }\r\n //\r\n // setZIndex(zIndexes) {\r\n // if (zIndexes) {\r\n // Object.keys(this.layerPositions).forEach((key, keyIndex) => {\r\n // if (this.layerPositions[key]) {\r\n // this.layerPositions[key].layer.zIndex = zIndexes.Accessories.Seats + keyIndex*10;\r\n // }\r\n // })\r\n // }\r\n // }\r\n\r\n}\r\n","import AccessoryCommon from \"./accessoryCommon\";\r\nimport {Shower} from \"../../parts/shower\";\r\n// import DesignNavigationItem from \"../../../../visComponents/designNavigationItem\";\r\n\r\nexport default class ShowerRod extends AccessoryCommon {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'shower_rod';\r\n this.partName = 'Shower Rod';\r\n this.translateId = \"visualizer.bathroom.accessories.shower_rod\";\r\n this.visible = true;\r\n this.canBeDisabled = true;\r\n }\r\n\r\n handleClick(ignoreLocked = false) {\r\n const parent = this.getParent()\r\n const showerParent = parent.getParent().layout.parts[Shower.id];\r\n if (showerParent && showerParent.showerDoor && !showerParent.showerDoor.disabled) { // shower tub combo - remove\r\n showerParent.showerDoor.disabled = true\r\n }\r\n super.handleClick(ignoreLocked);\r\n }\r\n\r\n // navigationSubItems(filters, searchText) {\r\n // const filteredAvailableFeatures = super.getFeaturesBySearchText(super.getFilteredFeaturesByFilters(filters), searchText);\r\n // const featuresToDisplay = super.navigationSubItemsWithFilterMultipleConditions(this.getArrayOfConditions(), filteredAvailableFeatures);\r\n // const parent = this.getParent();\r\n // featuresToDisplay.forEach(feature => {\r\n // if (parent.layout.parts.Window && parent.layout.parts.Window.windowKits && !parent.layout.parts.Window.windowKits.disabled) {\r\n // feature.matchesMetaFailed = true;\r\n // } else if (feature.matchesMetaFailed) {\r\n // feature.matchesMetaFailed = false;\r\n // }\r\n // });\r\n // return featuresToDisplay.map(_ => new DesignNavigationItem(_.featureName, _));\r\n // }\r\n\r\n // handleChangeParent(nonCompatibleWith) {\r\n // if (nonCompatibleWith === \"Window Kit\") {\r\n // const showerRodParent = this.getParent();\r\n // const accessoriesParent = showerRodParent.getParent();\r\n // accessoriesParent.layout.parts.Window.windowKits.disabled = true;\r\n // showerRodParent.disabled = false;\r\n // this.handleClick();\r\n // }\r\n // }\r\n\r\n disabledClick() {\r\n const showerParent = this.getParent().layout.parts[Shower.id];\r\n if (!this.disabled && showerParent && showerParent.showerDoor && !showerParent.showerDoor.disabled) { // shower tub combo - remove\r\n showerParent.showerDoor.disabled = true\r\n }\r\n }\r\n\r\n // setZIndex(zIndexes) {\r\n // const zIndex = zIndexes.Accessories.ShowerRod;\r\n // if (zIndexes && this.activeFeature) {\r\n // this.activeFeature.layer.zIndex = zIndex;\r\n // }\r\n // }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\n\r\nexport default class ToiletBrush extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'toilet_brush';\r\n this.partName = 'Toilet Brush';\r\n this.translateId = \"visualizer.bathroom.accessories.toilet_brush\";\r\n this.canBeDisabled = true;\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport {Toilet} from \"../../parts/toilet\";\r\nimport {removeLookPointFor} from \"../../../lookNavigation/lookFunctions2\";\r\nimport {getCurrentRoomType} from \"../../../../appLayout\";\r\nimport {LOOK_ROOM_TYPES} from \"../../constants\";\r\n\r\nexport default class PaperHolder extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'paper_holder';\r\n this.partName = 'Paper Holder';\r\n this.translateId = \"visualizer.bathroom.accessories.paper_holder\";\r\n this.canBeDisabled = true;\r\n }\r\n\r\n disabledClick() {\r\n const toiletParent = this.getParent().layout.parts[Toilet.id];\r\n if (toiletParent && toiletParent.toilet && toiletParent.toilet.disabled) {\r\n toiletParent.toilet.disabled = this.disabled || !toiletParent.toilet.canBeEnabled(); // true or check if it can be enabled;\r\n }\r\n }\r\n\r\n canDisplayDemoPoint(parentObject) {\r\n if (getCurrentRoomType() === LOOK_ROOM_TYPES.as) {\r\n return true\r\n }\r\n return removeLookPointFor(parentObject, 3, \"2\")\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport {createParentPositions, LOOK_ROOM_TYPES, SIDE_POSITIONS} from \"../../constants\";\r\nimport {removeLookPointFor} from \"../../../lookNavigation/lookFunctions2\";\r\nimport {getCurrentRoomType} from \"../../../../appLayout\";\r\n\r\nexport default class RobeHook extends IntermediatePart {\r\n constructor(isChild, partNumber = 0) {\r\n super(isChild);\r\n this.partNumber = partNumber;\r\n this.partId = 'robe_hook';\r\n this.partName = 'Robe Hook';\r\n this.translateId = \"visualizer.bathroom.accessories.robe_hook\";\r\n this.canBeDisabled = true;\r\n if (isChild) {\r\n createParentPositions(this);\r\n }\r\n }\r\n\r\n canDisplayDemoPoint(parentObject) {\r\n if (getCurrentRoomType() === LOOK_ROOM_TYPES.as) {\r\n return true\r\n }\r\n return removeLookPointFor(parentObject, 1, \"1\", SIDE_POSITIONS[1])\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport {createParentPositions} from \"../../constants\";\r\n\r\nexport default class TowelBar extends IntermediatePart {\r\n constructor(isChild, partNumber = 0) {\r\n super(isChild);\r\n this.partNumber = partNumber;\r\n this.partId = 'towel_bar';\r\n this.partName = 'Towel Bar';\r\n this.translateId = \"visualizer.bathroom.accessories.towel_bar\";\r\n this.canBeDisabled = true;\r\n if (isChild) {\r\n createParentPositions(this);\r\n }\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport {LOOK_ROOM_TYPES, SIDE_POSITIONS} from \"../../constants\";\r\nimport {removeLookPointFor} from \"../../../lookNavigation/lookFunctions2\";\r\nimport {getCurrentRoomType} from \"../../../../appLayout\";\r\n\r\nexport default class TowelRing extends IntermediatePart {\r\n constructor(isChild, partNumber = 0) {\r\n super(isChild);\r\n this.partNumber = partNumber;\r\n this.partId = 'towel_ring';\r\n this.partName = 'Towel Ring';\r\n this.translateId = \"visualizer.bathroom.accessories.towel_ring\";\r\n this.canBeDisabled = true;\r\n if (isChild) {\r\n this.layerPositions = {\r\n [SIDE_POSITIONS[0]]: null,\r\n [SIDE_POSITIONS[1]]: null,\r\n };\r\n }\r\n }\r\n\r\n load(dbFeature) {\r\n dbFeature.lixilProductSubCategory = \"Towel Rings\"; // hardcode to match other towel rings // LX-846\r\n return super.load(dbFeature);\r\n }\r\n\r\n canDisplayDemoPoint(parentObject) {\r\n if (getCurrentRoomType() === LOOK_ROOM_TYPES.as) {\r\n return removeLookPointFor(parentObject, 6, \"1\", SIDE_POSITIONS[1])\r\n }\r\n return removeLookPointFor(parentObject, 3, \"2\", SIDE_POSITIONS[1])\r\n && removeLookPointFor(parentObject, 1, \"1\", SIDE_POSITIONS[1])\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport {createParentPositions} from \"../../constants\";\r\nimport {IS_PRODUCT_JOURNEY} from \"../../../../../config\";\r\n\r\nexport default class GlassHolder extends IntermediatePart {\r\n constructor(isChild, partNumber = 0) {\r\n super(isChild);\r\n this.partNumber = partNumber;\r\n this.partId = 'glass_holder';\r\n this.partName = 'Glass Holder';\r\n this.translateId = \"visualizer.bathroom.shower.glass_holder\";\r\n this.layerPriority = 13;\r\n if (isChild) {\r\n createParentPositions(this);\r\n }\r\n }\r\n\r\n canDisplayDemoPoint() {\r\n return IS_PRODUCT_JOURNEY\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\n\r\nexport default class TowelRack extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'towel_rack';\r\n this.partName = 'Towel Rack';\r\n this.translateId = \"visualizer.bathroom.accessories.towel_rack\";\r\n this.canBeDisabled = true;\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\n\r\nexport default class Wainscoting extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'wainscoting';\r\n this.partName = 'Wainscoting';\r\n this.translateId = \"visualizer.bathroom.accessories.wainscoting\";\r\n this.canBeDisabled = true;\r\n this.isStoneFeature = true;\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\n\r\nexport default class Towel extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = \"towel\";\r\n this.partName = \"Towel\";\r\n this.translateId = \"visualizer.bathroom.accessories.towel\";\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport {createParentPositions} from \"../../constants\";\r\n\r\nexport default class TowelTowelRing extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = \"towel_towel_ring\";\r\n this.partName = \"Towel\";\r\n this.translateId = \"visualizer.bathroom.accessories.towel\";\r\n if (isChild) {\r\n createParentPositions(this);\r\n }\r\n }\r\n\r\n getArrayOfConditions() {\r\n const conditions = super.getArrayOfConditions();\r\n const towelRing = this.getParent().towelRing;\r\n if (towelRing && towelRing.layerPositions && towelRing.activeFeature) {\r\n conditions.push({\r\n propName: \"MatchingFeature\",\r\n propValue: towelRing.activeFeature.getSplittedSku()\r\n });\r\n }\r\n return conditions\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport {createParentPositions} from \"../../constants\";\r\n\r\nexport default class TowelTowelBar extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = \"towel_towel_bar\";\r\n this.partName = \"Towel\";\r\n this.translateId = \"visualizer.bathroom.accessories.towel\";\r\n if (isChild) {\r\n createParentPositions(this);\r\n }\r\n }\r\n\r\n getArrayOfConditions() {\r\n const conditions = super.getArrayOfConditions();\r\n const towelBar = this.getParent().towelBar;\r\n if (towelBar && towelBar.layerPositions && towelBar.activeFeature) {\r\n conditions.push({\r\n propName: \"MatchingFeature\",\r\n propValue: towelBar.activeFeature.getSplittedSku()\r\n });\r\n }\r\n return conditions\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport {createParentPositions} from \"../../constants\";\r\n\r\nexport default class TowelTowelHook extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = \"towel_towel_hook\";\r\n this.partName = \"Towel\";\r\n this.translateId = \"visualizer.bathroom.accessories.towel\";\r\n if (isChild) {\r\n createParentPositions(this);\r\n }\r\n }\r\n\r\n getArrayOfConditions() {\r\n const conditions = super.getArrayOfConditions();\r\n const robeHook = this.getParent().robeHook;\r\n if (robeHook && robeHook.layerPositions && robeHook.activeFeature) {\r\n conditions.push({\r\n propName: \"MatchingFeature\",\r\n propValue: robeHook.activeFeature.getSplittedSku()\r\n });\r\n }\r\n return conditions\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport {ShowerTubCombo} from \"../../parts/showerTubCombo\";\r\nimport {SIDE_POSITIONS} from \"../../constants\";\r\nimport {IS_LIXIL_SERVERS} from \"../../../../../config\";\r\n\r\nconst hardcodedSkus = [\"6438AM-FCOL.218\", \"6434AM-FCOL.218\", \"A8007D-FCO.020\", \"A8007D-FCO.020\", \"A8004L-CO.020\", \"4836SM-COL.218\"];\r\n\r\nexport default class ShowerPanCombo extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'shower_pan_combo';\r\n this.partName = 'Shower Pan';\r\n this.translateId = \"visualizer.bathroom.shower.shower_pan_combo\";\r\n this.visible = true;\r\n this.isStoneFeature = false;\r\n this.layerPriority = 8;\r\n this.canBeDisabled = true;\r\n if (isChild) {\r\n this.oneLayerPosition = true;\r\n }\r\n }\r\n\r\n load(dbFeature) {\r\n // dbFeature.metaData[\"layerPosition\"] = dbFeature.metaData[\"Side\"] ? dbFeature.metaData[\"Side\"][0] : \"\";\r\n\r\n // Our Shower Doors only fit openings: 56\"-60\" (1422-1524mm) The skus below are too wide and would not be compatible.\r\n // If a user selects one of these shower bases please hide/do not display a shower door with it.\r\n if (IS_LIXIL_SERVERS && Array.isArray(dbFeature.metaData[\"ShowerPanHeight\"]) && hardcodedSkus.some(sku => dbFeature.sharedFeatureName === sku)) {\r\n dbFeature.metaData[\"ShowerPanHeight\"] = [\"99\"]; // do not show shower door for these sku's\r\n }\r\n dbFeature.metaData[\"CustomShowerPanSide\"] = (dbFeature.sharedFeatureName || \"\").includes(\"LHO\")\r\n ? \"LHO\"\r\n : (dbFeature.sharedFeatureName || \"\").includes(\"RHO\") ? \"RHO\" : \"\";\r\n dbFeature.metaData[\"layerPosition\"] = dbFeature.metaData[\"Side\"] && dbFeature.metaData[\"Side\"][0] !== \"0\"\r\n ? dbFeature.metaData[\"Side\"][0]\r\n : (dbFeature.metaData[\"CustomShowerPanSide\"] === \"RHO\") ? \"R\" : SIDE_POSITIONS[0];\r\n dbFeature.metaData[\"CustomNameWithoutShowerPanSide\"] = (dbFeature.sharedFeatureName || \"\")\r\n .replace(/LHO/g, \"\").replace(/RHO/g, \"\");\r\n\r\n return super.load_(dbFeature, new ShowerPanCombo())\r\n }\r\n\r\n disabledClick() {\r\n const shower = this.getParent();\r\n shower.showerFloorIsActive = !this.disabled;\r\n if (shower.showerDoor) {\r\n shower.showerDoor.disabled = this.disabled;\r\n shower.showerDoor.disabledClick(); // accessories and shower door handle\r\n }\r\n }\r\n\r\n applyFeatureIfNotCompatible() {\r\n const parent = this.getParent();\r\n const shower = parent.getParent();\r\n shower.showerFloorIsActive = false;\r\n if (shower.layout && shower.showerTubComboIsActive()) {\r\n const comboPart = shower.layout.parts[ShowerTubCombo.id];\r\n comboPart.showerTubComboIsActive = false;\r\n }\r\n }\r\n\r\n hideLayerCondition() {\r\n return this.getParent().showerTubComboIsActive()\r\n }\r\n\r\n handleClick(ignoreLocked) {\r\n super.handleClick(ignoreLocked); // set active item & not in visualizer item\r\n this.applyFeatureIfNotCompatible();\r\n }\r\n\r\n /**\r\n * @param navItems {[navItemInterface]}\r\n * @param forFeature {featureInterface}\r\n */\r\n filterNavigationItems = (navItems, forFeature = null) => {\r\n let finalNavItems = [];\r\n const forMeta = forFeature && forFeature.metaData && forFeature.metaData[\"CustomShowerPanSide\"] ? forFeature.metaData[\"CustomShowerPanSide\"] : \"LHO\";\r\n const leftNavItems = navItems.filter(navItem => {\r\n if (!navItem.part.metaData[\"CustomShowerPanSide\"] || (navItem.part.metaData[\"CustomShowerPanSide\"] === forMeta)) {\r\n finalNavItems.push(navItem);\r\n return false\r\n }\r\n return true\r\n })\r\n leftNavItems.forEach(navItem => {\r\n if (!finalNavItems.some(existingNavItem => {\r\n if (IS_LIXIL_SERVERS) {\r\n return existingNavItem.part.metaData[\"CustomNameWithoutShowerPanSide\"] &&\r\n navItem.part.metaData[\"CustomNameWithoutShowerPanSide\"] === existingNavItem.part.metaData[\"CustomNameWithoutShowerPanSide\"]\r\n }\r\n return existingNavItem.part.metaData[\"MatchingFeature\"] && navItem.part.metaData[\"MatchingFeature\"] &&\r\n navItem.part.metaData[\"MatchingFeature\"][0] === existingNavItem.part.metaData[\"MatchingFeature\"][0]\r\n })) {\r\n finalNavItems.push(navItem)\r\n }\r\n })\r\n return finalNavItems\r\n }\r\n\r\n // /**\r\n // * @param neededPosition {string} LHO|RHO\r\n // * @param lookActiveFeature {featureInterface}\r\n // */\r\n // getMatchingOutletFeature = (neededPosition = \"\", lookActiveFeature) => {\r\n // if (IS_LIXIL_SERVERS) {\r\n // const nameWithoutPos = lookActiveFeature.metaData[\"CustomNameWithoutShowerPanSide\"];\r\n // const allNavItems = this.navigationSubItemsSimple();\r\n // return allNavItems.find(navItem => {\r\n // return (navItem.part.dbFeature.metaData[\"CustomShowerPanSide\"] === neededPosition)\r\n // && (navItem.part.metaData[\"CustomNameWithoutShowerPanSide\"] === nameWithoutPos)\r\n // })\r\n // }\r\n // const nameWithoutPos = lookActiveFeature.metaData[\"MatchingFeature\"];\r\n // const allNavItems = this.navigationSubItemsSimple();\r\n // return allNavItems.find(navItem => {\r\n // return (navItem.part.dbFeature.metaData[\"CustomShowerPanSide\"] === neededPosition)\r\n // && (navItem.part.metaData[\"MatchingFeature\"][0] === nameWithoutPos)\r\n // })\r\n // }\r\n\r\n // navigationSubItems(filters, searchText) {\r\n // return this.navigationSubItemsWithSides(filters, searchText);\r\n // }\r\n\r\n setLayers(layout) {\r\n const showerParent = this.getParent();\r\n if (showerParent.showerTubComboIsActive() || showerParent.showerFloorIsActive) {\r\n super.hideLayers();\r\n return;\r\n }\r\n return super.setLayers(layout);\r\n }\r\n\r\n // getArrayOfConditions() {\r\n // let conditions = super.getArrayOfConditions(); //roomLayout\r\n // const showerParent = this.getParent();\r\n // conditions.push({\r\n // propName: \"ShowerSize\",\r\n // propValue: showerParent.showerSize()\r\n // });\r\n // return conditions\r\n // }\r\n\r\n canDisplayDemoPoint() {\r\n const shower = this.getParent();\r\n return !shower.showerTubComboIsActive()\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\n\r\nexport default class ShowerDoorHandle extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'shower_door_handle';\r\n this.partName = 'Handle';\r\n this.translateId = \"visualizer.bathroom.shower.shower_door_handle\";\r\n this.dbName = 'Shower Door Handle';\r\n this.visible = true;\r\n this.isStoneFeature = false;\r\n this.layerPriority = 9;\r\n if (isChild) {\r\n this.previouslySelectedFeatures = {\r\n Layout1: {},\r\n };\r\n }\r\n }\r\n\r\n load(dbFeature) {\r\n const handle = this.load_(dbFeature, new ShowerDoorHandle());\r\n if (handle) {\r\n ShowerDoorHandle.setAdditionalMetaData(handle);\r\n }\r\n }\r\n\r\n static setAdditionalMetaData(handle) {\r\n const compatible = handle.metaData[\"CompatibleTub\"];\r\n const showerSize = handle.metaData[\"ShowerSize\"];\r\n if (!compatible) {\r\n handle.metaData[\"CompatibleTub\"] = [\"None\"];\r\n }\r\n if (!showerSize) {\r\n handle.metaData[\"ShowerSize\"] = [\"60in\"];\r\n }\r\n }\r\n\r\n disabledClick() {\r\n const showerDoor = this.getParent().showerDoor;\r\n if (showerDoor) {\r\n showerDoor.disabled = this.disabled || !showerDoor.canBeEnabled(); // true or check if it can be enabled;\r\n }\r\n }\r\n\r\n handleClick() {\r\n super.handleClick();\r\n // this.getParent().getParent().setShowerTubCombo();\r\n //\r\n // let doorWithLiner = false;\r\n // if(this.metaData && this.metaData.length) {\r\n // const activeDoorMetadata = this.metaData.find(metaDataObject => metaDataObject.isFor);\r\n // const showerPanValues = activeDoorMetadata.conditions.find(condition => condition.name === \"BathtubLiner\");\r\n // if (showerPanValues) {\r\n // doorWithLiner = true;\r\n // }\r\n // }\r\n //\r\n // this.getParent().getParent().setLinerActive(doorWithLiner);\r\n // this.featureClicked();\r\n }\r\n\r\n setLayers(layout) {\r\n\r\n const showerParent = this.getParent();\r\n\r\n if (!showerParent.showerDoor || !showerParent.showerDoor.activeFeature ||\r\n (showerParent.showerDoor.activeFeature.metaData && showerParent.showerDoor.activeFeature.metaData[\"ShowerHandle\"]\r\n && showerParent.showerDoor.activeFeature.metaData[\"ShowerHandle\"][0] === \"None\")) {\r\n super.hideLayers();\r\n return;\r\n }\r\n\r\n if (this.activeFeature && (this.activeFeature.matchesMetaForArrayOfConditions(this.getArrayOfConditions())\r\n || (this.activeFeature.notAvailableInVisualizer && this.placeholderFeature))) {\r\n return super.setLayers(layout);\r\n }\r\n\r\n this.setDefault();\r\n return super.setLayers(layout);\r\n }\r\n\r\n // getArrayOfConditions() {\r\n // const layout = this.getParent().layout;\r\n // const showerComboParent = layout.parts[ShowerTubCombo.id];\r\n // const showerParent = this.getParent();\r\n // const layoutAbr = layout.getCurrentLayoutAbbreviation();\r\n //\r\n // let showerSize = showerComboParent.showerTubComboIsActive\r\n // ? showerComboParent.showerSize()\r\n // : showerParent.showerSize();\r\n //\r\n // let compatibleValue = \"None\";\r\n // if (showerComboParent.showerTubComboIsActive) {\r\n // if (showerComboParent.bottomTub === ShowerComboTubType.bathtub_liner) {\r\n // compatibleValue = \"BathtubLiner\"\r\n // } else if (showerComboParent.bottomTub === ShowerComboTubType.replacement_tub) {\r\n // compatibleValue = \"ReplacementTub\"\r\n // } else if (showerComboParent.bottomTub === ShowerComboTubType.walk_in_tub) {\r\n // compatibleValue = \"WalkInTub\"\r\n // } else if (showerComboParent.bottomTub === ShowerComboTubType.jetted_tub) {\r\n // compatibleValue = \"JettedTub\"\r\n // }\r\n // }\r\n //\r\n // const conditions = [{\r\n // propName: 'ShowerSize',\r\n // propValue: showerSize\r\n // },{\r\n // propName: 'CompatibleTub',\r\n // propValue: compatibleValue\r\n // }];\r\n //\r\n // if (layoutAbr === LayoutAbbreviation.Large) {\r\n // let showerDimensions = showerComboParent.showerTubComboIsActive\r\n // ? showerComboParent.showerDimensions()\r\n // : showerParent.showerDimensions();\r\n //\r\n // showerDimensions = getMetadataByDimensions(showerDimensions);\r\n //\r\n // const vanity = layout.parts[Vanity.id];\r\n // let counterTopSize = vanity.counterTopSize(this);\r\n // if (counterTopSize === '72in' && layout.type === 1 && (showerDimensions !== \"Full\" || showerDimensions !== \"Pony\")) {\r\n // showerDimensions = \"Full\"\r\n // }\r\n //\r\n // conditions.push({\r\n // propName: \"EX L\",\r\n // propValue: showerDimensions\r\n // })\r\n // }\r\n //\r\n // if (showerParent.showerDoor && showerParent.showerDoor.activeFeature) { // add shower pan condition only if it is shower\r\n // const doorCondition = showerParent.showerDoor.activeFeature.metaData[\"ShowerDoor\"];\r\n // const handleCondition = showerParent.showerDoor.activeFeature.metaData[\"ShowerHandle\"];\r\n // // console.log('doorCondition', doorCondition);\r\n // if (doorCondition) {\r\n // conditions.push({\r\n // propName: 'ShowerDoor',\r\n // propValue: doorCondition\r\n // })\r\n // }\r\n // if (handleCondition) {\r\n // conditions.push({\r\n // propName: 'ShowerHandle',\r\n // propValue: handleCondition\r\n // })\r\n // }\r\n // }\r\n //\r\n // if (!showerParent.showerTubComboIsActive()) {\r\n // if (showerParent.showerFloorIsActive) {\r\n // conditions.push({\r\n // propName: \"ShowerPan\",\r\n // propValue: \"Threshold\"\r\n // })\r\n // } else if (showerParent.showerPanCombo && showerParent.showerPanCombo.activeFeature) {\r\n // conditions.push({\r\n // propName: \"ShowerPan\",\r\n // propValue: showerParent.showerPanCombo.activeFeature.metaData[\"ShowerPan\"]\r\n // })\r\n // }\r\n // }\r\n // // console.log('conditions', conditions);\r\n // return conditions\r\n // }\r\n\r\n setDefault() {\r\n const shower = this.getParent();\r\n const currentActiveFeature = this.activeFeature;\r\n const filteredFeatures = this.features.filter(f => f.matchesMetaForArrayOfConditions(this.getArrayOfConditions()));\r\n if (!super.tryToSetTheSameFeature(filteredFeatures)) {\r\n this.setDefaultAccordingToPreviousSelect(shower, filteredFeatures, \"Brantford\");\r\n }\r\n this.rememberPreviousSelection(shower, currentActiveFeature);\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n const zIndex = zIndexes.Shower.ShowerDoorHandle;\r\n if (zIndexes && this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndex;\r\n }\r\n if (zIndexes && this.placeholderFeature) {\r\n this.placeholderFeature.layer.zIndex = zIndex;\r\n }\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport {LayoutAbbreviation} from \"../../constants\";\r\n\r\nexport default class PonyWallCap extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'pony_wall_cap';\r\n this.isPonyWallPart = true;\r\n this.visible = true;\r\n this.partName = 'Pony Wall Cap';\r\n this.translateId = \"visualizer.bathroom.shower.pony_wall_cap\";\r\n this.isStoneFeature = true;\r\n this.disableOnHomeSections = true;\r\n this.layerPriority = 11;\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n const zIndex = zIndexes.Shower.PonyWallCap;\r\n if (zIndexes && this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndex;\r\n }\r\n if (zIndexes && this.placeholderFeature) {\r\n this.placeholderFeature.layer.zIndex = zIndex;\r\n }\r\n }\r\n\r\n setLayers(layout) {\r\n\r\n const showerParent = this.getParent().getActiveShowerGroup();\r\n if (showerParent.showerDimensions() !== \"Pony\") {\r\n super.hideLayers();\r\n return;\r\n }\r\n\r\n const conditions = this.getArrayOfConditions();\r\n\r\n const layoutAbr = layout.getCurrentLayoutAbbreviation();\r\n const matchesByBindings = this.activeFeature && this.activeFeature.dbFeature && this.activeFeature.s3Bindings && this.activeFeature.dbFeature.s3Bindings.some(binding => {\r\n return binding.layout === LayoutAbbreviation.All || binding.layout === layoutAbr\r\n });\r\n if (matchesByBindings && (this.activeFeature.matchesMetaForArrayOfConditions(conditions)\r\n || (this.activeFeature.notAvailableInVisualizer && this.placeholderFeature))) {\r\n return super.setLayers(layout);\r\n }\r\n\r\n this.setDefault();\r\n return super.setLayers(layout);\r\n }\r\n\r\n // getArrayOfConditions() {\r\n // const parent = this.getParent();\r\n // const layout = parent.layout;\r\n // const layoutAbr = layout.getCurrentLayoutAbbreviation();\r\n // if (layoutAbr === LayoutAbbreviation.Small){\r\n // const activeShower = parent.showerTubComboIsActive()\r\n // ? layout.parts[ShowerTubCombo.id]\r\n // : layout.parts[Shower.id];\r\n // const showerSize = activeShower.showerSize(); // 60in, 30in, ..\r\n // // const showerDimensions = activeShower.showerDimensions(); // 15x4, Pony, ...\r\n // return [{\r\n // propName: 'Shower',\r\n // propValue: 'Custom'\r\n // }, {\r\n // propName: 'Size',\r\n // propValue: showerSize\r\n // }];\r\n // }\r\n //\r\n // return []\r\n // }\r\n\r\n setDefault() {\r\n const filteredFeatures = this.features.filter(f => f.matchesMetaForArrayOfConditions(this.getArrayOfConditions()));\r\n if (!super.tryToSetTheSameFeature(filteredFeatures, '', '', true)) {\r\n const hardCodedDefault = filteredFeatures.find((feature) => {\r\n return feature.dbFeature.displayName\r\n && feature.dbFeature.displayName.includesCI(\"Pony Wall Cap - Model[For=Shower=(Custom)=Size=(30in_60in)]\");\r\n });\r\n const placeholderDefault = filteredFeatures.find((feature) => {\r\n return feature.dbFeature.displayName && feature.dbFeature.displayName.includesCI(\" - Placeholder\");\r\n });\r\n this.activeFeature = hardCodedDefault || filteredFeatures[0];\r\n this.placeholderFeature = placeholderDefault || null;\r\n }\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\n\r\nexport default class PonyWallGlass extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'pony_wall_glass';\r\n this.isPonyWallPart = true;\r\n this.visible = true;\r\n this.partName = 'Pony Wall Glass';\r\n this.translateId = \"visualizer.bathroom.shower.pony_wall_glass\";\r\n this.isStoneFeature = false;\r\n this.disableOnHomeSections = true;\r\n this.layerPriority = 10;\r\n }\r\n\r\n getArrayOfConditions() {\r\n const conditions = super.getArrayOfConditions();\r\n const showerParent = this.getParent();\r\n if (showerParent && showerParent.showerDoor && showerParent.showerDoor.activeFeature) {\r\n if (showerParent.showerDoor.activeFeature.metaData[\"ShowerPanHeight\"]) {\r\n conditions.push({\r\n propName: \"ShowerPanHeight\",\r\n propValue: showerParent.showerDoor.activeFeature.metaData[\"ShowerPanHeight\"]\r\n })\r\n }\r\n if (showerParent.showerDoor.activeFeature.metaData[\"DoorHeight\"]) {\r\n conditions.push({\r\n propName: \"DoorHeight\",\r\n propValue: showerParent.showerDoor.activeFeature.metaData[\"DoorHeight\"]\r\n })\r\n }\r\n }\r\n return conditions\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport {LOOK_OVERLAYS, ShowerBodyType} from \"../../constants\";\r\nimport {ShowerTubCombo} from \"../../parts/showerTubCombo\";\r\nimport {getFeatureIsLocked} from \"../../../../../misc/helpers\";\r\nimport store from \"../../../../../store\";\r\nimport {setLookOverlayOpened} from \"../../../../../actions/lookFunctions\";\r\n\r\nexport default class ShowerFloor extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'shower_floor';\r\n this.translateId = \"visualizer.bathroom.shower.shower_floor\";\r\n this.partName = 'Floor';\r\n this.homePageTitle = 'Shower Flooring';\r\n this.dbName = 'Shower Floor';\r\n this.isStoneFeature = true;\r\n this.selectedByUser = false;\r\n this.layerPriority = 6;\r\n }\r\n\r\n applyFeatureIfNotCompatible() {\r\n const parent = this.getParent();\r\n const shower = parent.getParent();\r\n shower.showerFloorIsActive = true;\r\n if (shower.layout && shower.showerTubComboIsActive()) {\r\n const comboPart = shower.layout.parts[ShowerTubCombo.id];\r\n comboPart.showerTubComboIsActive = false;\r\n }\r\n }\r\n\r\n handleClick(ignoreLocked) {\r\n super.handleClick(ignoreLocked);\r\n if (this.notAvailableInVisualizer || getFeatureIsLocked(this)) {\r\n return\r\n }\r\n const parent = this.getParent();\r\n const shower = parent.getParent();\r\n if ((!shower.showerFloorIsActive || shower.showerTubComboIsActive()) && !window.location.hash.includes(\"visualizer\")) {\r\n store.dispatch(setLookOverlayOpened(LOOK_OVERLAYS.notCompatiblePopup));\r\n return;\r\n }\r\n\r\n this.applyFeatureIfNotCompatible();\r\n\r\n this.getParent().selectedByUser = true;\r\n const threshold = shower.threshold;\r\n if (threshold && !threshold.selectedByUser) {\r\n const thresholdAvailableFeatures = threshold.navigationSubItems();\r\n const currentFloorName = this.getSplittedFeatureName();\r\n const sameThreshold = thresholdAvailableFeatures.find(tr => tr.part.getSplittedFeatureName() === currentFloorName);\r\n if (sameThreshold) {\r\n super.handleClick.call(sameThreshold.part);\r\n threshold.selectedByUser = false;\r\n }\r\n }\r\n }\r\n\r\n setLayers(layout) {\r\n\r\n if (this.getParent().showerTubComboIsActive()) {\r\n super.hideLayers();\r\n return;\r\n }\r\n\r\n if (this.getParent().customBodyType === ShowerBodyType.Door) {\r\n const showerDoorParent = this.getParent().showerDoor;\r\n if (showerDoorParent && showerDoorParent.activeFeature) {\r\n const currentShowerPanCondition = showerDoorParent.activeFeature.metaData[\"ShowerPan\"];\r\n if (!currentShowerPanCondition || (currentShowerPanCondition && !currentShowerPanCondition.includes(\"Threshold\"))) {\r\n super.hideLayers();\r\n return;\r\n }\r\n }\r\n }\r\n\r\n const conditions = this.getArrayOfConditions();\r\n if (this.activeFeature && (this.activeFeature.matchesMetaForArrayOfConditions(conditions)\r\n || (this.activeFeature.notAvailableInVisualizer && this.placeholderFeature))) {\r\n return super.setLayers(layout);\r\n }\r\n this.setDefault();\r\n return super.setLayers(layout);\r\n }\r\n\r\n getArrayOfConditions() {\r\n let conditions = super.getArrayOfConditions(); //roomLayout\r\n const showerParent = this.getParent();\r\n conditions.push({\r\n propName: \"ShowerSize\",\r\n propValue: showerParent.showerSize()\r\n });\r\n return conditions\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport {LOOK_OVERLAYS, ShowerBodyType} from \"../../constants\";\r\nimport {Shower} from \"../../parts/shower\";\r\nimport {ShowerTubCombo} from \"../../parts/showerTubCombo\";\r\nimport {getFeatureIsLocked} from \"../../../../../misc/helpers\";\r\nimport store from \"../../../../../store\";\r\nimport {setLookOverlayOpened} from \"../../../../../actions/lookFunctions\";\r\n\r\nexport default class Threshold extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'threshold';\r\n this.partName = 'Threshold';\r\n this.translateId = \"visualizer.bathroom.shower.threshold\";\r\n this.homePageTitle = 'Threshold';\r\n this.dbName = 'ShowerPan';\r\n this.isStoneFeature = true;\r\n this.selectedByUser = false;\r\n this.layerPriority = 7;\r\n }\r\n\r\n applyFeatureIfNotCompatible() {\r\n const parent = this.getParent();\r\n const shower = parent.getParent();\r\n shower.showerFloorIsActive = true;\r\n if (shower.layout && shower.showerTubComboIsActive()) {\r\n const comboPart = shower.layout.parts[ShowerTubCombo.id];\r\n comboPart.showerTubComboIsActive = false;\r\n }\r\n }\r\n\r\n handleClick(ignoreLocked) {\r\n super.handleClick(ignoreLocked);\r\n if (this.notAvailableInVisualizer || getFeatureIsLocked(this)) {\r\n return\r\n }\r\n const parent = this.getParent();\r\n const shower = parent.getParent();\r\n if ((!shower.showerFloorIsActive || shower.showerTubComboIsActive()) && !window.location.hash.includes(\"visualizer\")) {\r\n store.dispatch(setLookOverlayOpened(LOOK_OVERLAYS.notCompatiblePopup));\r\n return;\r\n }\r\n\r\n this.applyFeatureIfNotCompatible();\r\n\r\n this.getParent().selectedByUser = true;\r\n const showerFloor = shower.showerFloor;\r\n if (showerFloor && !showerFloor.selectedByUser) {\r\n const showerFloorAvailableFeatures = showerFloor.navigationSubItems();\r\n const currentThresholdName = this.getSplittedFeatureName();\r\n const sameShowerFloor = showerFloorAvailableFeatures.find(navItemFloor => {\r\n return navItemFloor.part.getSplittedFeatureName() === currentThresholdName\r\n });\r\n if (sameShowerFloor) {\r\n super.handleClick.call(sameShowerFloor.part);\r\n showerFloor.selectedByUser = false;\r\n }\r\n }\r\n }\r\n\r\n setLayers(layout) {\r\n\r\n if (this.getParent().showerTubComboIsActive() || !this.getParent().showerFloorIsActive) {\r\n super.hideLayers();\r\n return;\r\n }\r\n\r\n if (this.getParent().customBodyType === ShowerBodyType.Door) {\r\n const showerDoorParent = this.getParent().showerDoor;\r\n if (showerDoorParent && showerDoorParent.activeFeature) {\r\n const currentShowerPanCondition = showerDoorParent.activeFeature.metaData[\"ShowerPan\"];\r\n if (!currentShowerPanCondition || (currentShowerPanCondition && !currentShowerPanCondition.includes(\"Threshold\"))) {\r\n super.hideLayers();\r\n return;\r\n }\r\n }\r\n }\r\n const conditions = this.getArrayOfConditions();\r\n if (this.activeFeature && (this.activeFeature.matchesMetaForArrayOfConditions(conditions)\r\n || (this.activeFeature.notAvailableInVisualizer && this.placeholderFeature))) {\r\n return super.setLayers(layout);\r\n }\r\n this.setDefault();\r\n return super.setLayers(layout);\r\n }\r\n\r\n // getArrayOfConditions() {\r\n // const layout = this.getParent().layout;\r\n // const showerSize = this.getParent().showerSize();\r\n // let showerDimensions = getMetadataByDimensions(this.getParent().showerDimensions());\r\n //\r\n // const vanity = layout.parts[Vanity.id];\r\n // let counterTopSize = vanity.counterTopSize(this);\r\n // if (counterTopSize === '72in' && layout.type === 1 && (showerDimensions !== \"Full\" || showerDimensions !== \"Pony\")) {\r\n // showerDimensions = \"Full\"\r\n // }\r\n //\r\n // return [{\r\n // propName: 'ShowerSize',\r\n // propValue: showerSize\r\n // }, {\r\n // propName: 'EX L',\r\n // propValue: showerDimensions\r\n // }];\r\n // }\r\n\r\n getArrayOfConditions() {\r\n let conditions = super.getArrayOfConditions(); //roomLayout\r\n const showerParent = this.getParent();\r\n conditions.push({\r\n propName: \"ShowerSize\",\r\n propValue: showerParent.showerSize()\r\n });\r\n return conditions\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n if (this.getParent().activeSubType() === Shower.Type.Custom) {\r\n const zIndex = zIndexes.Shower.Threshold;\r\n if (zIndexes && this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndex;\r\n }\r\n if (zIndexes && this.placeholderFeature) {\r\n this.placeholderFeature.layer.zIndex = zIndex;\r\n }\r\n }\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\n\r\nexport default class ShowerDrain extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'shower_drain';\r\n this.partName = 'Shower Drain';\r\n this.translateId = \"visualizer.bathroom.shower.shower_drain\";\r\n this.homePageTitle = 'Shower Drain';\r\n this.visible = false;\r\n this.layerPriority = 14;\r\n }\r\n\r\n setLayers(layout) {\r\n const showerParent = this.getParent();\r\n if (!showerParent.showerFloorIsActive || showerParent.showerTubComboIsActive()) {\r\n super.hideLayers();\r\n return;\r\n }\r\n if (this.activeFeature && (this.activeFeature.matchesMetaForArrayOfConditions(this.getArrayOfConditions())\r\n || (this.activeFeature.notAvailableInVisualizer && this.placeholderFeature))) {\r\n return super.setLayers(layout);\r\n }\r\n this.setDefault();\r\n return super.setLayers(layout);\r\n }\r\n\r\n getArrayOfConditions() {\r\n const showerParent = this.getParent();\r\n let conditions = super.getArrayOfConditions(); //roomLayout\r\n conditions.push({\r\n propName: \"ShowerSize\",\r\n propValue: showerParent.showerSize()\r\n })\r\n return conditions\r\n }\r\n\r\n setDefault() {\r\n const filteredFeatures = this.features.filter(f => f.matchesMetaForArrayOfConditions(this.getArrayOfConditions()));\r\n this.activeFeature = filteredFeatures[0];\r\n this.placeholderFeature = filteredFeatures[0];\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n const zIndex = zIndexes.Shower.ShowerDrain;\r\n if (zIndexes && this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndex;\r\n }\r\n if (zIndexes && this.placeholderFeature) {\r\n this.placeholderFeature.layer.zIndex = zIndex;\r\n }\r\n }\r\n}\r\n","import {createParentPositions, METADATA, ShowerHeadTypes} from \"../../constants\";\r\nimport ShowerCommon from \"../showerNew/showerCommon\";\r\nimport store from \"../../../../../store\";\r\nimport {IS_QKB_UI} from \"../../../../../config\";\r\n\r\nexport default class ShowerHead extends ShowerCommon {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'shower_head';\r\n this.partName = 'Shower Head';\r\n this.translateId = \"visualizer.bathroom.shower.shower_head\";\r\n this.layerPriority = 4;\r\n this.canBeDisabled = true;\r\n // this.useMatchingFeatureReplacement = \"MountPosition\";\r\n if (isChild) {\r\n this.previouslySelectedFeatures = {\r\n Layout1: {},\r\n Layout4: {},\r\n };\r\n createParentPositions(this);\r\n }\r\n }\r\n\r\n navigationSubItems(...props) {\r\n if (IS_QKB_UI) {\r\n return this.navigationSubItemsWithSides(...props)\r\n }\r\n return super.navigationSubItems(...props);\r\n }\r\n\r\n load(dbFeature) {\r\n if (!dbFeature.metaData[\"Side\"] || (Array.isArray(dbFeature.metaData[\"Side\"]) && dbFeature.metaData[\"Side\"][0] === \"0\")) {\r\n dbFeature.metaData[\"Side\"] = [METADATA.LeftSide];\r\n }\r\n return super.load(dbFeature)\r\n }\r\n\r\n handleClick() {\r\n this.setArmHeadType();\r\n super.handleClick();\r\n }\r\n\r\n applyFeatureIfNotCompatible() {\r\n const showerParent = this.getParent().getParent();\r\n if (showerParent.showerFixture) {\r\n showerParent.showerFixture.disabled = true;\r\n }\r\n }\r\n\r\n disabledClick() {\r\n const showerArm = this.getParent().showerArm;\r\n if (showerArm) {\r\n showerArm.disabled = this.disabled || !showerArm.canBeEnabled(); // true or check if it can be enabled\r\n }\r\n }\r\n\r\n hideLayerCondition() {\r\n const showerParent = this.getParent();\r\n return showerParent.shower_head_type !== ShowerHeadTypes.shower_arm && this.activeFeature\r\n }\r\n\r\n setLayers(layout) {\r\n const showerParent = this.getParent();\r\n if (this.hideLayerCondition()) {\r\n super.hideLayers();\r\n return;\r\n }\r\n if (showerParent.showerArm && showerParent.showerArm.layerPositions && this.layerPositions && this.activeFeature) {\r\n Object.keys(showerParent.showerArm.layerPositions).forEach(position => {\r\n if (!this.layerPositions[position] && showerParent.showerArm.layerPositions[position]) {\r\n this.layerPositions[position] = this.getMatchingPositionFeature(position)\r\n } else if (this.layerPositions[position] && !showerParent.showerArm.layerPositions[position]) {\r\n const {wizardActiveItem} = store.getState().wizardState;\r\n if (!wizardActiveItem || !wizardActiveItem.hideItems) {\r\n this.layerPositions[position] = null\r\n }\r\n }\r\n })\r\n }\r\n return super.setLayers(layout);\r\n }\r\n\r\n getArrayOfConditions() {\r\n const conditions = super.getArrayOfConditions();\r\n const showerParent = this.getParent();\r\n const showerSize = showerParent.showerSize();\r\n if (showerSize) {\r\n conditions.push({\r\n propName: \"ShowerSize\",\r\n propValue: showerSize\r\n });\r\n }\r\n if (showerParent.showerArm && showerParent.showerArm.activeFeature && showerParent.showerArm.activeFeature.metaData[\"MountType\"]) {\r\n conditions.push({\r\n propName: \"MountType\",\r\n propValue: showerParent.showerArm.activeFeature.metaData[\"MountType\"][0]\r\n })\r\n }\r\n if (showerParent.showerArm && showerParent.showerArm.activeFeature && showerParent.showerArm.activeFeature.metaData[\"MountPosition\"]) {\r\n conditions.push({\r\n propName: \"MountPosition\",\r\n propValue: showerParent.showerArm.activeFeature.metaData[\"MountPosition\"][0]\r\n })\r\n }\r\n return conditions;\r\n }\r\n\r\n canDisplayDemoPoint() {\r\n return this.getParent().shower_head_type === ShowerHeadTypes.shower_arm\r\n }\r\n\r\n}\r\n","import ShowerCommon from \"../showerNew/showerCommon\";\r\nimport {createParentPositions, METADATA, ShowerHeadTypes} from \"../../constants\";\r\nimport store from \"../../../../../store\";\r\nimport {IS_QKB_UI} from \"../../../../../config\";\r\n\r\nexport default class ShowerArm extends ShowerCommon {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'shower_arm';\r\n this.partName = 'Shower Arm';\r\n this.translateId = \"visualizer.bathroom.accessories.shower_arm\";\r\n this.canBeDisabled = true;\r\n this.layerPriority = 8;\r\n // this.useMatchingFeatureReplacement = \"MountPosition\";\r\n if (isChild) {\r\n createParentPositions(this);\r\n }\r\n }\r\n\r\n navigationSubItems(...props) {\r\n if (IS_QKB_UI) {\r\n return this.navigationSubItemsWithSides(...props)\r\n }\r\n return super.navigationSubItems(...props);\r\n }\r\n\r\n load(dbFeature) {\r\n if (!dbFeature.metaData[\"Side\"] || (Array.isArray(dbFeature.metaData[\"Side\"]) && dbFeature.metaData[\"Side\"][0] === \"0\")) {\r\n dbFeature.metaData[\"Side\"] = [METADATA.LeftSide];\r\n }\r\n return super.load(dbFeature)\r\n }\r\n\r\n handleClick() {\r\n this.setArmHeadType();\r\n super.handleClick();\r\n }\r\n\r\n checkForSameMountPosition(newFeature) {\r\n if (newFeature.metaData[\"MountPosition\"] || newFeature.metaData[\"MountType\"]) {\r\n let conditions = [];\r\n if (newFeature.metaData[\"MountPosition\"]) {\r\n conditions.push({\r\n propName: \"MountPosition\",\r\n propValue: newFeature.metaData[\"MountPosition\"]\r\n });\r\n }\r\n if (newFeature.metaData[\"MountType\"]) {\r\n conditions.push({\r\n propName: \"MountType\",\r\n propValue: newFeature.metaData[\"MountType\"]\r\n });\r\n }\r\n Object.keys(this.layerPositions).forEach(position => {\r\n if ((position !== newFeature.metaData.layerPosition) && this.layerPositions[position]\r\n && !this.layerPositions[position].matchesMetaForArrayOfConditions(conditions)) {\r\n this.layerPositions[position] = null; // erase current position\r\n }\r\n })\r\n }\r\n }\r\n\r\n applyFeatureIfNotCompatible() {\r\n const showerParent = this.getParent().getParent();\r\n if (showerParent.showerFixture) {\r\n showerParent.showerFixture.disabled = true;\r\n }\r\n }\r\n\r\n disabledClick() {\r\n const showerHead = this.getParent().showerHead;\r\n if (showerHead) {\r\n showerHead.disabled = this.disabled || !showerHead.canBeEnabled(); // true or check if it can be enabled;\r\n }\r\n }\r\n\r\n hideLayerCondition() {\r\n const showerParent = this.getParent();\r\n return showerParent.shower_head_type !== ShowerHeadTypes.shower_arm && this.activeFeature\r\n }\r\n\r\n setLayers(layout) {\r\n const showerParent = this.getParent();\r\n if (this.hideLayerCondition()) {\r\n super.hideLayers();\r\n return;\r\n }\r\n if (showerParent.showerHead && showerParent.showerHead.layerPositions && this.layerPositions && this.activeFeature) {\r\n Object.keys(showerParent.showerHead.layerPositions).forEach(position => {\r\n if (!this.layerPositions[position] && showerParent.showerHead.layerPositions[position]) {\r\n this.layerPositions[position] = this.getMatchingPositionFeature(position)\r\n } else if (this.layerPositions[position] && !showerParent.showerHead.layerPositions[position]) {\r\n const {wizardActiveItem} = store.getState().wizardState;\r\n if (!wizardActiveItem || !wizardActiveItem.hideItems) {\r\n this.layerPositions[position] = null\r\n }\r\n }\r\n })\r\n }\r\n return super.setLayers(layout);\r\n }\r\n\r\n canDisplayDemoPoint() {\r\n return this.getParent().shower_head_type === ShowerHeadTypes.shower_arm\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport {ShowerHeadTypes} from \"../../constants\";\r\n\r\nexport default class ShowerHeadBundle extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'shower_head_bundle';\r\n this.partName = 'Shower Head Bundle';\r\n this.translateId = \"visualizer.bathroom.shower.shower_head_bundle\";\r\n this.canBeDisabled = true;\r\n this.layerPriority = 12;\r\n }\r\n\r\n handleClick() {\r\n const showerParent = this.getParent().getParent();\r\n showerParent.setShowerHeadType(ShowerHeadTypes.shower_head_bundle);\r\n if (showerParent.showerFixture && showerParent.showerFixture.activeFeature && showerParent.showerFixture.activeFeature.metaData[\"MountType\"]\r\n && !showerParent.showerFixture.activeFeature.metaData[\"MountType\"].includes(\"0\") && !showerParent.showerFixture.disabled) {\r\n // store.dispatch(setLookOverlayOpened(LOOK_OVERLAYS.notCompatiblePopup));\r\n // return;\r\n this.applyFeatureIfNotCompatible();\r\n }\r\n super.handleClick();\r\n }\r\n\r\n applyFeatureIfNotCompatible() {\r\n const showerParent = this.getParent().getParent();\r\n if (showerParent.showerFixture) {\r\n showerParent.showerFixture.disabled = true;\r\n }\r\n }\r\n\r\n hideLayerCondition() {\r\n const showerParent = this.getParent();\r\n return showerParent.shower_head_type !== ShowerHeadTypes.shower_head_bundle && this.activeFeature\r\n }\r\n\r\n getArrayOfConditions() {\r\n const conditions = super.getArrayOfConditions();\r\n const showerParent = this.getParent();\r\n const showerSize = showerParent.showerSize();\r\n if (showerSize) {\r\n conditions.push({\r\n propName: \"ShowerSize\",\r\n propValue: showerSize\r\n });\r\n }\r\n // if (showerParent.showerHead && showerParent.showerHead.activeFeature && showerParent.showerHead.activeFeature.metaData[\"MountType\"]) {\r\n // conditions.push({\r\n // propName: \"MountType\",\r\n // propValue: showerParent.showerHead.activeFeature.metaData[\"MountType\"][0]\r\n // })\r\n // }\r\n return conditions;\r\n }\r\n\r\n canDisplayDemoPoint() {\r\n return this.getParent().shower_head_type === ShowerHeadTypes.shower_head_bundle\r\n }\r\n\r\n}\r\n","import {Shower} from \"../../parts/shower\";\r\nimport {ShowerTubCombo} from \"../../parts/showerTubCombo\";\r\nimport {IntermediatePart} from \"../../intermediatePart\";\r\n\r\nexport default class TubSpout extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'tub_spout';\r\n this.partName = 'Tub Spout';\r\n this.translateId = \"visualizer.bathroom.shower.tub_spout\";\r\n this.canBeDisabled = true;\r\n }\r\n\r\n hideLayerCondition() {\r\n const showerParent = this.getParent();\r\n const showerComboParent = showerParent.layout.parts[ShowerTubCombo.id];\r\n if (!showerParent.showerTubComboIsActive() || showerComboParent.bottomTub !== \"replacement_tub\") {\r\n return true\r\n }\r\n if (showerParent.showerFixture && showerParent.showerFixture.activeFeature && showerParent.showerFixture.activeFeature.metaData[\"MountType\"]\r\n && showerParent.showerFixture.activeFeature.metaData[\"MountType\"].includes(\"T\")) { // S and 0 is ok\r\n return true;\r\n }\r\n return false\r\n }\r\n\r\n getArrayOfConditions() {\r\n const showerParent = this.getParent();\r\n let conditions = super.getArrayOfConditions(); //roomLayout\r\n const showerSize = showerParent.showerSize();\r\n if (showerSize) {\r\n conditions.push({\r\n propName: \"ShowerSize\",\r\n propValue: showerSize\r\n })\r\n }\r\n return conditions\r\n }\r\n\r\n canDisplayDemoPoint() {\r\n const layout = this.getParent().layout;\r\n const showerParent = layout.parts[Shower.id];\r\n const showerComboParent = layout.parts[ShowerTubCombo.id];\r\n return showerParent.showerTubComboIsActive() && showerComboParent.bottomTub === \"replacement_tub\";\r\n }\r\n\r\n}\r\n","import {ShowerHeadTypes, ShowerHandTypes} from \"../../constants\";\r\nimport ShowerCommon from \"../showerNew/showerCommon\";\r\n\r\nexport default class HandShowerKit extends ShowerCommon {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'hand_shower_kit';\r\n this.partName = 'Hand Shower Kit';\r\n this.translateId = \"visualizer.bathroom.shower.hand_shower_kit\";\r\n this.canBeDisabled = true;\r\n }\r\n\r\n load(dbFeature) {\r\n if (!Array.isArray(dbFeature.metaData[\"MountType\"])) {\r\n dbFeature.metaData[\"MountType\"] = [\"0\"]\r\n }\r\n return super.load_(dbFeature, new HandShowerKit());\r\n }\r\n\r\n handleClick() {\r\n const showerParent = this.getParent().getParent();\r\n showerParent.setShowerHeadType(ShowerHeadTypes.shower_arm);\r\n showerParent.setShowerHandType(ShowerHandTypes.hand_shower_kit);\r\n super.handleClick();\r\n }\r\n\r\n hideLayerCondition() {\r\n const showerParent = this.getParent();\r\n return showerParent.shower_head_type !== ShowerHeadTypes.shower_arm || showerParent.shower_hand_type !== ShowerHandTypes.hand_shower_kit\r\n }\r\n\r\n getArrayOfConditions() {\r\n const showerParent = this.getParent();\r\n let conditions = super.getArrayOfConditions(); //roomLayout\r\n //Hand Shower Kit should be displayed with the fixtures that have MountType: 0\r\n if (showerParent.showerFixture && showerParent.showerFixture.activeFeature && showerParent.showerFixture.activeFeature.metaData[\"MountType\"]) {\r\n conditions.push({\r\n propName: \"MountType\",\r\n propValue: showerParent.showerFixture.activeFeature.metaData[\"MountType\"]\r\n })\r\n }\r\n return conditions\r\n }\r\n\r\n canDisplayDemoPoint() {\r\n return this.getParent().shower_head_type !== ShowerHeadTypes.shower_head_bundle\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\n\r\nexport default class ShowerCurb extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'shower_curb';\r\n this.partName = 'Shower Curb';\r\n this.translateId = \"visualizer.bathroom.shower.shower_curb\";\r\n this.canBeDisabled = false;\r\n this.isStoneFeature = true;\r\n }\r\n\r\n getArrayOfConditions() {\r\n const showerParent = this.getParent();\r\n let conditions = super.getArrayOfConditions(); //roomLayout\r\n const showerSize = showerParent.showerSize();\r\n if (showerSize) {\r\n conditions.push({\r\n propName: \"ShowerSize\",\r\n propValue: showerSize\r\n })\r\n }\r\n return conditions\r\n }\r\n\r\n}\r\n","import ShowerCommon from \"./showerCommon\";\r\nimport {CORNER_SHELVES_POSITIONS} from \"../../constants\";\r\n\r\nexport default class BodySpray extends ShowerCommon {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'body_spray';\r\n this.partName = 'Body Spray';\r\n this.translateId = \"visualizer.bathroom.shower.body_spray\";\r\n this.canBeDisabled = true;\r\n if (isChild) {\r\n this.layerPositions = {};\r\n CORNER_SHELVES_POSITIONS.forEach(pos => {\r\n this.layerPositions[pos] = null\r\n })\r\n }\r\n }\r\n\r\n load(dbFeature) {\r\n dbFeature.metaData[\"layerPosition\"] = (dbFeature.metaData[\"Side\"] && dbFeature.metaData[\"MountPosition\"])\r\n ? dbFeature.metaData[\"Side\"][0] + dbFeature.metaData[\"MountPosition\"][0]\r\n : CORNER_SHELVES_POSITIONS[0] // should be \"\" here!!!\r\n const partNumber = dbFeature.metaData[\"layerPosition\"] === CORNER_SHELVES_POSITIONS[0] ? 1 : 2;\r\n return super.load_(dbFeature, new this.constructor(false, partNumber),\r\n true, partNumber === 1 ? 'features' : 'featuresParts');\r\n }\r\n\r\n handleClick() {\r\n this.setArmHeadType(); // body spray can be used with everything? not sure\r\n super.handleClick();\r\n }\r\n\r\n setLayers(layout) {\r\n // const showerParent = this.getParent();\r\n // if (showerParent.shower_head_type !== ShowerHeadTypes.shower_arm || !this.isActiveFeatureGroup(\"diverterTrim\")) {\r\n // super.hideLayers();\r\n // return;\r\n // }\r\n return super.setLayers(layout);\r\n }\r\n\r\n // getArrayOfConditions() {\r\n // const showerParent = this.getParent();\r\n // let conditions = super.getArrayOfConditions(); //roomLayout\r\n // if (showerParent.handShowerHolder && showerParent.handShowerHolder.activeFeature) {\r\n // conditions.push({\r\n // propName: \"MountPosition\",\r\n // propValue: showerParent.handShowerHolder.activeFeature.metaData[\"MountPosition\"]\r\n // ? showerParent.handShowerHolder.activeFeature.metaData[\"MountPosition\"]\r\n // : [\"2\"]\r\n // })\r\n // }\r\n // return conditions\r\n // }\r\n\r\n}\r\n","import ShowerCommon from \"./showerCommon\";\r\nimport {createParentPositions, ShowerHeadTypes} from \"../../constants\";\r\n\r\nexport default class DiverterTrim extends ShowerCommon {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'diverter_trim';\r\n this.partName = 'Diverter Trim';\r\n this.translateId = \"visualizer.bathroom.shower.diverter_trim\";\r\n this.canBeDisabled = true;\r\n this.disabled = true;\r\n if (isChild) {\r\n createParentPositions(this);\r\n }\r\n }\r\n\r\n handleClick() {\r\n this.setArmHeadType();\r\n super.handleClick();\r\n }\r\n\r\n hideLayerCondition() {\r\n const showerParent = this.getParent();\r\n return showerParent.shower_head_type !== ShowerHeadTypes.shower_arm\r\n }\r\n\r\n}\r\n","import ShowerCommon from \"./showerCommon\";\r\nimport {createParentPositions, ShowerHandTypes, ShowerHeadTypes} from \"../../constants\";\r\n\r\nexport default class HandShowerHolder extends ShowerCommon {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'hand_shower_holder';\r\n this.partName = 'Hand Shower Holder';\r\n this.translateId = \"visualizer.bathroom.shower.hand_shower_holder\";\r\n this.canBeDisabled = true;\r\n if (isChild) {\r\n createParentPositions(this);\r\n }\r\n }\r\n\r\n handleClick() {\r\n const showerParent = this.getParent().getParent();\r\n showerParent.setShowerHandType(ShowerHeadTypes.shower_arm);\r\n showerParent.setShowerHandType(ShowerHandTypes.hand_shower_holder);\r\n super.handleClick();\r\n }\r\n\r\n hideLayerCondition() {\r\n const showerParent = this.getParent();\r\n return showerParent.shower_head_type !== ShowerHeadTypes.shower_arm || showerParent.shower_hand_type !== ShowerHandTypes.hand_shower_holder\r\n }\r\n\r\n // getArrayOfConditions() {\r\n // const showerParent = this.getParent();\r\n // let conditions = super.getArrayOfConditions(); //roomLayout\r\n // //Hand Shower Kit should be displayed with the fixtures that have MountType: 0\r\n // if (showerParent.wallUnion && showerParent.wallUnion.activeFeature && showerParent.wallUnion.activeFeature.metaData[\"MountPosition\"]) {\r\n // conditions.push({\r\n // propName: \"MountPosition\",\r\n // propValue: showerParent.showerFixture.activeFeature.metaData[\"MountPosition\"]\r\n // })\r\n // }\r\n // return conditions\r\n // }\r\n\r\n}\r\n","import ShowerCommon from \"./showerCommon\";\r\nimport {createParentPositions, ShowerHandTypes, ShowerHeadTypes} from \"../../constants\";\r\n\r\nexport default class HandShowerOnly extends ShowerCommon {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'hand_shower_only';\r\n this.partName = 'Hand Shower Only';\r\n this.translateId = \"visualizer.bathroom.shower.hand_shower_only\";\r\n this.canBeDisabled = true;\r\n this.useMatchingFeatureReplacement = \"MountPosition\";\r\n if (isChild) {\r\n createParentPositions(this);\r\n }\r\n }\r\n\r\n handleClick() {\r\n const showerParent = this.getParent().getParent();\r\n showerParent.setShowerHeadType(ShowerHeadTypes.shower_arm);\r\n showerParent.setShowerHandType(ShowerHandTypes.hand_shower_holder);\r\n super.handleClick();\r\n }\r\n\r\n hideLayerCondition() {\r\n const showerParent = this.getParent();\r\n return showerParent.shower_head_type !== ShowerHeadTypes.shower_arm || showerParent.shower_hand_type !== ShowerHandTypes.hand_shower_holder\r\n }\r\n\r\n getArrayOfConditions() {\r\n const showerParent = this.getParent();\r\n let conditions = super.getArrayOfConditions(); //roomLayout\r\n //Hand Shower Kit should be displayed with the fixtures that have MountType: 0\r\n if (showerParent.handShowerHolder && showerParent.handShowerHolder.activeFeature) {\r\n conditions.push({\r\n propName: \"MountPosition\",\r\n propValue: showerParent.handShowerHolder.activeFeature.metaData[\"MountPosition\"]\r\n ? showerParent.handShowerHolder.activeFeature.metaData[\"MountPosition\"]\r\n : [\"2\"]\r\n })\r\n }\r\n return conditions\r\n }\r\n\r\n}\r\n","import ShowerCommon from \"./showerCommon\";\r\nimport {createParentPositions, ShowerHandTypes, ShowerHeadTypes} from \"../../constants\";\r\n\r\nexport default class ShowerHose extends ShowerCommon {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'shower_hose';\r\n this.partName = 'Shower Hose';\r\n this.translateId = \"visualizer.bathroom.shower.shower_hose\";\r\n this.canBeDisabled = true;\r\n if (isChild) {\r\n createParentPositions(this);\r\n }\r\n }\r\n\r\n handleClick() {\r\n const showerParent = this.getParent().getParent();\r\n showerParent.setShowerHeadType(ShowerHeadTypes.shower_arm);\r\n showerParent.setShowerHandType(ShowerHandTypes.hand_shower_holder);\r\n super.handleClick();\r\n }\r\n\r\n hideLayerCondition() {\r\n const showerParent = this.getParent();\r\n return showerParent.shower_head_type !== ShowerHeadTypes.shower_arm || showerParent.shower_hand_type !== ShowerHandTypes.hand_shower_holder\r\n }\r\n\r\n getArrayOfConditions() {\r\n const showerParent = this.getParent();\r\n let conditions = super.getArrayOfConditions(); //roomLayout\r\n if (showerParent.handShowerHolder && showerParent.handShowerHolder.activeFeature) {\r\n conditions.push({\r\n propName: \"MountPosition\",\r\n propValue: showerParent.handShowerHolder.activeFeature.metaData[\"MountPosition\"]\r\n ? showerParent.handShowerHolder.activeFeature.metaData[\"MountPosition\"]\r\n : [\"2\"]\r\n })\r\n }\r\n return conditions\r\n }\r\n\r\n}\r\n","import ShowerCommon from \"./showerCommon\";\r\nimport {createParentPositions, ShowerHeadTypes} from \"../../constants\";\r\n\r\nexport default class ShowerSystem extends ShowerCommon {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'shower_system';\r\n this.partName = 'Shower System';\r\n this.translateId = \"visualizer.bathroom.shower.shower_system\";\r\n this.canBeDisabled = true;\r\n if (isChild) {\r\n createParentPositions(this);\r\n }\r\n }\r\n\r\n handleClick() {\r\n const showerParent = this.getParent().getParent();\r\n showerParent.setShowerHeadType(ShowerHeadTypes.shower_system);\r\n super.handleClick();\r\n }\r\n\r\n hideLayerCondition() {\r\n const showerParent = this.getParent();\r\n return showerParent.shower_head_type !== ShowerHeadTypes.shower_system && this.activeFeature\r\n }\r\n}\r\n","import ShowerCommon from \"./showerCommon\";\r\nimport {createParentPositions, ShowerHeadTypes} from \"../../constants\";\r\n\r\nexport default class ShowerTrimKit extends ShowerCommon {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'shower_trim_kit';\r\n this.partName = 'Shower Trim Kit';\r\n this.translateId = \"visualizer.bathroom.shower.shower_trim_kit\";\r\n this.canBeDisabled = true;\r\n if (isChild) {\r\n createParentPositions(this);\r\n }\r\n }\r\n\r\n handleClick() {\r\n const showerParent = this.getParent().getParent();\r\n showerParent.setShowerHeadType(ShowerHeadTypes.shower_trim_kit);\r\n super.handleClick();\r\n }\r\n\r\n hideLayerCondition() {\r\n const showerParent = this.getParent();\r\n return showerParent.shower_head_type !== ShowerHeadTypes.shower_trim_kit && this.activeFeature\r\n }\r\n}\r\n","import ShowerCommon from \"./showerCommon\";\r\nimport {createParentPositions, ShowerHeadTypes} from \"../../constants\";\r\n\r\nexport default class ValveTrim extends ShowerCommon {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'valve_trim';\r\n this.partName = 'Valve Trim';\r\n this.translateId = \"visualizer.bathroom.shower.valve_trim\";\r\n this.canBeDisabled = true;\r\n this.conflictingPositions = [\"shower_seats\"];\r\n if (isChild) {\r\n createParentPositions(this);\r\n }\r\n }\r\n\r\n handleClick() {\r\n this.setArmHeadType();\r\n super.handleClick();\r\n }\r\n\r\n hideLayerCondition() {\r\n const showerParent = this.getParent();\r\n return showerParent.shower_head_type !== ShowerHeadTypes.shower_arm\r\n }\r\n}\r\n","import ShowerCommon from \"./showerCommon\";\r\nimport {createParentPositions, ShowerHandTypes, ShowerHeadTypes} from \"../../constants\";\r\n\r\nexport default class WallUnion extends ShowerCommon {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'wall_union';\r\n this.partName = 'Wall Union';\r\n this.translateId = \"visualizer.bathroom.shower.wall_union\";\r\n this.canBeDisabled = true;\r\n this.useMatchingFeatureReplacement = \"MountPosition\";\r\n if (isChild) {\r\n createParentPositions(this);\r\n }\r\n }\r\n handleClick() {\r\n this.setArmHeadType();\r\n super.handleClick();\r\n }\r\n\r\n hideLayerCondition() {\r\n const showerParent = this.getParent();\r\n return showerParent.shower_head_type !== ShowerHeadTypes.shower_arm\r\n }\r\n\r\n getArrayOfConditions() {\r\n const showerParent = this.getParent();\r\n let conditions = super.getArrayOfConditions(); //roomLayout\r\n if (showerParent.shower_hand_type === ShowerHandTypes.hand_shower_kit) {\r\n if (showerParent.handShowerKit && showerParent.handShowerKit.activeFeature && showerParent.handShowerKit.activeFeature.metaData[\"MountPosition\"]) {\r\n conditions.push({\r\n propName: \"MountPosition\",\r\n propValue: [\"3\"]\r\n })\r\n }\r\n } else if (showerParent.shower_hand_type === ShowerHandTypes.hand_shower_holder) {\r\n if (showerParent.handShowerHolder && showerParent.handShowerHolder.activeFeature) {\r\n conditions.push({\r\n propName: \"MountPosition\",\r\n propValue: showerParent.handShowerHolder.activeFeature.metaData[\"MountPosition\"]\r\n ? showerParent.handShowerHolder.activeFeature.metaData[\"MountPosition\"]\r\n : [\"2\"]\r\n })\r\n }\r\n }\r\n\r\n return conditions\r\n }\r\n\r\n}\r\n","import {Part} from \"../part\";\r\nimport {windowThumbnail} from '../../../bvComponent/core/assets';\r\nimport {PartMenuType} from \"../../../visComponents/constants\";\r\nimport WindowKits from \"../subparts/window/windowKits\";\r\nimport WindowBody from \"../subparts/window/windowBody\";\r\n\r\nexport class WindowParent extends Part {\r\n static id = 'Window';\r\n\r\n constructor() {\r\n super(true, false, PartMenuType.Complex);\r\n this.menuType = PartMenuType.Complex;\r\n this.partName = 'Window';\r\n this.homePageTitle = 'Windows';\r\n this.translateId = \"visualizer.bathroom.window\";\r\n this.partThumbnail = windowThumbnail;\r\n this.windowBody = null;\r\n this.relatedGroupNames = [\"Window Kit\", \"Window\"];\r\n }\r\n\r\n load(dbFeature, loadFeature = true) {\r\n let relatedItemName = \"\",\r\n RelatedItemClass = null;\r\n switch (dbFeature.groupName) {\r\n case \"Window Kit\":\r\n case \"Window Kits\": {\r\n relatedItemName = \"windowKits\";\r\n RelatedItemClass = WindowKits;\r\n break;\r\n }\r\n case \"Window\": {\r\n relatedItemName = \"windowBody\";\r\n RelatedItemClass = WindowBody;\r\n break;\r\n }\r\n }\r\n return this.loadCommon(relatedItemName, RelatedItemClass, dbFeature, loadFeature)\r\n }\r\n\r\n isSubTypeWithItems() {\r\n return false;\r\n }\r\n\r\n setDefaultPartAfterSubTypeClick() {\r\n return this.subParts()[0]\r\n }\r\n\r\n setDefault(layout) {\r\n this.relatedItems.forEach(_ => _.setDefault(layout));\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport {Shower} from \"../../parts/shower\";\r\n// import DesignNavigationItem from \"../../../../visComponents/designNavigationItem\";\r\nimport {ShowerAccessories} from \"../../parts/showerAccessories\";\r\nimport {CORNER_SHELVES_POSITIONS} from \"../../constants\";\r\n\r\nexport default class WindowKits extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = \"window_kits\";\r\n this.dbName = window.location.href.includes(\"quotekandb\") ? \"Window Kits\" : \"Window Kit\";\r\n this.partName = \"Window Kits\";\r\n this.translateId = \"visualizer.bathroom.window.kits\";\r\n this.canBeDisabled = true;\r\n }\r\n\r\n // navigationSubItems(filters, searchText) {\r\n // const filteredAvailableFeatures = super.getFeaturesBySearchText(super.getFilteredFeaturesByFilters(filters), searchText);\r\n // const featuresToDisplay = super.navigationSubItemsWithFilterMultipleConditions(this.getArrayOfConditions(), filteredAvailableFeatures);\r\n // const windowParent = this.getParent();\r\n // const accessoriesParent = windowParent.layout.parts[ShowerAccessories.id];\r\n // featuresToDisplay.forEach(feature => {\r\n // if (accessoriesParent && accessoriesParent.showerPod && !accessoriesParent.showerPod.disabled) {\r\n // feature.matchesMetaFailed = \"shower_pod\";\r\n // } else if (accessoriesParent.cornerShelf && !accessoriesParent.cornerShelf.disabled\r\n // && CORNER_SHELVES_POSITIONS.some(pos => accessoriesParent.cornerShelf.layerPositions[pos] && !pos.includes(\"3\"))) {\r\n // feature.matchesMetaFailed = \"corner_shelf\";\r\n // } else if (feature.matchesMetaFailed) {\r\n // feature.matchesMetaFailed = false;\r\n // }\r\n // });\r\n // return featuresToDisplay.map(_ => new DesignNavigationItem(_.featureName, _));\r\n // }\r\n\r\n // handleChangeParent(nonCompatibleWith) {\r\n // if (nonCompatibleWith === \"Shower Pod\") {\r\n //\r\n // }\r\n // }\r\n handleChangeParent() {\r\n // this.removeInterferingParts();\r\n this.getParent().disabled = false;\r\n this.handleClick();\r\n }\r\n\r\n removeInterferingParts = () => {\r\n const kitsParent = this.getParent();\r\n const windowParent = kitsParent.getParent();\r\n const accessoriesParent = windowParent.layout.parts[ShowerAccessories.id];\r\n if (accessoriesParent) {\r\n if (accessoriesParent.showerPod) {\r\n accessoriesParent.showerPod.disabled = true;\r\n }\r\n if (accessoriesParent.cornerShelf) {\r\n CORNER_SHELVES_POSITIONS.forEach(pos => {\r\n if (accessoriesParent.cornerShelf.layerPositions[pos] && !pos.includes(\"3\")) {\r\n accessoriesParent.cornerShelf.layerPositions[pos] = null;\r\n }\r\n })\r\n }\r\n }\r\n }\r\n\r\n // disabledClick() {\r\n // if (!this.disabled) {\r\n // this.removeInterferingParts();\r\n // }\r\n // }\r\n\r\n getArrayOfConditions() {\r\n let conditions = super.getArrayOfConditions(); //roomLayout\r\n const windowParent = this.getParent();\r\n const layout = windowParent.layout;\r\n const showerParent = layout.parts[Shower.id];\r\n const showerSize = showerParent.showerSize();\r\n if (showerParent && showerSize) {\r\n conditions.push({\r\n propName: \"ShowerSize\",\r\n propValue: showerSize\r\n });\r\n }\r\n // if (windowBody && this.windowNeededLayouts.includes(layout.type)) {\r\n // conditions.push({\r\n // propName: \"Window\",\r\n // propValue: (windowBody && windowBody.activeFeature && windowBody.disabled) ? \"Off\" : \"On\"\r\n // })\r\n // }\r\n return conditions\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n if (zIndexes && this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndexes.Window.WindowKits;\r\n }\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport {Shower} from \"../../parts/shower\";\r\n\r\nexport default class WindowBody extends IntermediatePart {\r\n\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'window_body';\r\n this.partName = 'Window';\r\n this.translateId = \"visualizer.bathroom.window\";\r\n this.canBeDisabled = true;\r\n }\r\n\r\n getArrayOfConditions() {\r\n let conditions = super.getArrayOfConditions(); //roomLayout\r\n const layout = this.getParent().layout;\r\n const showerParent = layout.parts[Shower.id];\r\n const showerSize = showerParent.showerSize();\r\n if (showerParent && showerSize) {\r\n conditions.push({\r\n propName: \"ShowerSize\",\r\n propValue: showerSize\r\n });\r\n }\r\n return conditions\r\n }\r\n\r\n}\r\n","import {Part} from \"../part\";\r\nimport {PartMenuType} from \"../../../visComponents/constants\";\r\nimport {floorThumbnail} from \"../../../kvComponent/core/assets\";\r\n\r\nimport {IntermediatePart} from \"../intermediatePart\";\r\nimport {Shower} from \"./shower\";\r\nimport Walls from \"./walls\";\r\nimport {getCurrentRoomType} from \"../../../appLayout\";\r\nimport {LOOK_ROOM_TYPES} from \"../constants\";\r\n\r\nexport default class Floor extends Part {\r\n static id = 'Floor';\r\n\r\n constructor() {\r\n super(true, false, PartMenuType.Complex);\r\n this.partId = 'parent_floor';\r\n this.menuType = PartMenuType.Complex;\r\n this.partName = 'Floor';\r\n this.translateId = \"visualizer.bathroom.floor\";\r\n this.partThumbnail = floorThumbnail;\r\n this.relatedGroupNames = [\"Floor\"];\r\n }\r\n\r\n load(dbFeature, loadFeature = true) {\r\n let relatedItemName = \"\",\r\n RelatedItemClass = null;\r\n switch (dbFeature.groupName) {\r\n case \"Flor\":\r\n case \"Floor\":\r\n relatedItemName = \"floorBody\";\r\n RelatedItemClass = FloorBody;\r\n break;\r\n }\r\n return this.loadCommon(relatedItemName, RelatedItemClass, dbFeature, loadFeature)\r\n }\r\n\r\n}\r\n\r\nclass FloorBody extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'bathroom_floor';\r\n this.partName = 'Floor';\r\n this.translateId = \"visualizer.bathroom.floor\";\r\n this.isStoneFeature = true;\r\n }\r\n\r\n getArrayOfConditions() {\r\n let conditions = super.getArrayOfConditions(); //roomLayout\r\n const layout = this.getParent().layout;\r\n const showerParent = layout.parts[Shower.id];\r\n const showerSize = showerParent ? showerParent.showerSize() : null;\r\n if (showerSize) {\r\n conditions.push({\r\n propName: \"ShowerSize\",\r\n propValue: showerSize\r\n })\r\n }\r\n const wallParent = layout.parts[Walls.id];\r\n if ((getCurrentRoomType(layout) === LOOK_ROOM_TYPES.as) && wallParent && wallParent.splitWall) {\r\n conditions.push({\r\n propName: \"SplitWallType\",\r\n propValue: wallParent.getSplitWallType()\r\n })\r\n }\r\n return conditions\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n if(zIndexes) {\r\n const zIndex = zIndexes.Background.Floor;\r\n if (this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndex;\r\n }\r\n }\r\n }\r\n}\r\n\r\n\r\n","import {Part} from \"../part\";\r\nimport {wallsThumbnail} from \"../../../bvComponent/core/assets\";\r\nimport {PartMenuType} from \"../../../visComponents/constants\";\r\n\r\nimport Attachment from \"../subparts/globals/attachment\";\r\nimport Decor from \"../subparts/globals/decor\";\r\nimport ShowerWallMirror from \"../subparts/globals/showerWallMirror\";\r\nimport {DECORS_MAX} from \"../constants\";\r\n\r\nconst compareMountPosition = (checkFeature, dbFeatureLoading) => {\r\n return checkFeature.metaData[\"MountPosition\"] && checkFeature.matchesMetaForCondition(\"MountPosition\", dbFeatureLoading.metaData[\"MountPosition\"])\r\n}\r\n\r\nconst checkForExistingDecor = (currentDecorFeatureGroup, dbFeature) => {\r\n if (!currentDecorFeatureGroup) { // we skipped all decors, but didn't find the same\r\n return true\r\n }\r\n if (dbFeature.sharedFeatureName === currentDecorFeatureGroup.decorName) { // decors are matching by name\r\n return true\r\n }\r\n if (dbFeature.metaData[\"MountPosition\"]) {\r\n if (Array.isArray(dbFeature.metaData[\"RoomLayout\"])) {\r\n return dbFeature.metaData[\"RoomLayout\"].some(layoutName => {\r\n return currentDecorFeatureGroup.featuresList && Array.isArray(currentDecorFeatureGroup.featuresList[layoutName])\r\n && currentDecorFeatureGroup.featuresList[layoutName].some(feature => compareMountPosition(feature, dbFeature))\r\n })\r\n } else {\r\n return currentDecorFeatureGroup.some(feature => compareMountPosition(feature, dbFeature))\r\n }\r\n }\r\n return false\r\n}\r\n\r\nexport default class Globals extends Part {\r\n static id = \"Globals\";\r\n constructor() {\r\n super(true, false, PartMenuType.Complex);\r\n\r\n this.menuType = PartMenuType.Complex;\r\n this.partName = \"Globals\";\r\n this.partThumbnail = wallsThumbnail;\r\n\r\n // related items\r\n this.toiletPaper = null;\r\n this.decor1 = null; // can be up to 10\r\n this.showerWallMirror = null; // mirror reflection\r\n this.lamp = null; // mirror reflection\r\n this.mirrors = null; // mirror reflection\r\n }\r\n\r\n load(dbFeature) {\r\n let\r\n relatedItemName = \"\",\r\n decorCount = 0,\r\n RelatedItemClass = null;\r\n switch (dbFeature.groupName) {\r\n case \"Decor\":\r\n case \"Decore\": {\r\n for (let i = 1; i <= DECORS_MAX; i++) {\r\n const currentDecorFeatureGroup = this[\"decor\" + i];\r\n if (checkForExistingDecor(currentDecorFeatureGroup, dbFeature)) {\r\n relatedItemName = \"decor\" + i;\r\n decorCount = i;\r\n break;\r\n }\r\n }\r\n break;\r\n }\r\n case \"Attachment\": {\r\n relatedItemName = \"attachment\";\r\n RelatedItemClass = Attachment;\r\n break;\r\n }\r\n case \"Shower Wall Mirror\": {\r\n relatedItemName = \"showerWallMirror\";\r\n RelatedItemClass = ShowerWallMirror;\r\n break;\r\n }\r\n }\r\n if (relatedItemName) {\r\n if (!this[relatedItemName]) {\r\n if (dbFeature.groupName === \"Decor\" || dbFeature.groupName === \"Decore\") {\r\n this[relatedItemName] = new Decor(true, decorCount);\r\n this[relatedItemName].decorName = dbFeature.sharedFeatureName;\r\n } else {\r\n this[relatedItemName] = new RelatedItemClass(true);\r\n }\r\n this.relatedItems.push(this[relatedItemName]);\r\n }\r\n if (!this.categoryEnabled) {\r\n this.categoryEnabled = true\r\n }\r\n this[relatedItemName].getParent = () => this;\r\n this[relatedItemName].load(dbFeature);\r\n return true\r\n }\r\n return false\r\n }\r\n\r\n isSubTypeWithItems() {\r\n return false;\r\n }\r\n\r\n handleSubPartClick() {}\r\n\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport isEqual from \"lodash/isEqual\";\r\nimport {METADATA} from \"../../constants\";\r\n\r\nexport default class Attachment extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = \"attachment\";\r\n this.partName = \"Attachment\";\r\n this.hasAdditionalParts = true;\r\n }\r\n\r\n load(dbFeature) {\r\n if (!dbFeature.metaData[\"Side\"] && dbFeature.sharedFeatureName.includes(\"ountertop\")) {\r\n dbFeature.metaData[\"Side\"] = [METADATA.LeftSide];\r\n }\r\n return super.load(dbFeature);\r\n }\r\n\r\n checkIfFeaturePartIsMatching() {\r\n this.activeFeatureParts = this.setActiveFeatureParts();\r\n }\r\n\r\n setActiveFeatureParts() {\r\n const layout = this.getParent().layout;\r\n const activeFeatures = layout.getActiveFeatures(true, true);\r\n let matchingFeatures = [];\r\n const currentConditions = this.getArrayOfConditions();\r\n const selectFrom = this.features.filter(attFeature => attFeature.matchesMetaForArrayOfConditions(currentConditions));\r\n activeFeatures.forEach(cartItem => {\r\n if (!cartItem.cartFeature || cartItem.featureGroup.disabled || !cartItem.cartFeature.metaData[\"MatchingFeature\"]\r\n || (cartItem.partId === this.partId)) {\r\n return\r\n }\r\n selectFrom.forEach(attFeature => {\r\n if (attFeature.metaData[\"MatchingFeature\"] && attFeature.metaData[\"MatchingFeature\"].includes(\"Splitwall\")) {\r\n const splitWall = layout.parts.Walls.splitWall;\r\n if (splitWall && !splitWall.disabled && splitWall.activeFeature && splitWall.activeFeature.layer.src\r\n && !matchingFeatures.some(alreadyAddedFeature => alreadyAddedFeature.metaData[\"MatchingFeature\"]\r\n && alreadyAddedFeature.metaData[\"MatchingFeature\"].includes(\"Splitwall\"))) {\r\n matchingFeatures.push(attFeature);\r\n }\r\n } else if (isEqual(attFeature.metaData[\"MatchingFeature\"], cartItem.cartFeature.metaData[\"MatchingFeature\"])\r\n && isEqual(attFeature.metaData[\"Side\"], cartItem.cartFeature.metaData[\"Side\"])\r\n && !matchingFeatures.some(alreadyAddedFeature => {\r\n return isEqual(attFeature.metaData[\"MatchingFeature\"], alreadyAddedFeature.metaData[\"MatchingFeature\"])\r\n && isEqual(attFeature.metaData[\"Side\"], alreadyAddedFeature.metaData[\"Side\"])\r\n })) {\r\n matchingFeatures.push(attFeature)\r\n }\r\n })\r\n })\r\n return matchingFeatures;\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\n\r\nexport default class Decor extends IntermediatePart {\r\n constructor(isChild, decorCount) {\r\n super(isChild);\r\n this.decorCount = decorCount;\r\n this.partId = \"decor_\" + decorCount;\r\n this.partName = \"Decor \" + decorCount;\r\n }\r\n\r\n load(dbFeature) {\r\n if (dbFeature.metaData && dbFeature.metaData[\"ShowerSize\"]) {\r\n this.needShowerSizeMeta = true;\r\n }\r\n return super.load_(dbFeature, new Decor(false, this.decorCount));\r\n }\r\n\r\n getArrayOfConditions() {\r\n const conditions = super.getArrayOfConditions();\r\n if (this.needShowerSizeMeta) {\r\n const showerParent = this.getParent().layout.parts[\"Shower\"];\r\n conditions.push({\r\n propName: \"ShowerSize\",\r\n propValue: showerParent.showerSize()\r\n });\r\n }\r\n return conditions\r\n }\r\n\r\n}\r\n","import {Shower} from \"../../parts/shower\";\r\nimport Walls from \"../../parts/walls\";\r\nimport {IntermediatePart} from \"../../intermediatePart\";\r\n\r\nexport default class ShowerWallMirror extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = \"shower_wall_mirror\";\r\n this.partName = \"Shower Wall Mirror\";\r\n }\r\n\r\n load(dbFeature) {\r\n dbFeature.metaData[\"MatchingWallName\"] = dbFeature.metaData[\"ActualDisplayedName\"];\r\n return super.load_(dbFeature, new ShowerWallMirror());\r\n }\r\n\r\n setLayers(layout) {\r\n const showerParent = layout.parts[Shower.id];\r\n if (!showerParent || !showerParent.showerWall || !showerParent.showerWall.activeFeature || showerParent.showerWall.disabled) {\r\n super.hideLayers();\r\n return;\r\n }\r\n super.setLayers(layout);\r\n }\r\n\r\n getArrayOfConditions() {\r\n const conditions = super.getArrayOfConditions();\r\n const layout = this.getParent().layout;\r\n const showerParent = layout.parts[Shower.id];\r\n const wallParent = layout.parts[Walls.id];\r\n\r\n const showerSize = showerParent ? showerParent.showerSize() : null;\r\n if (showerSize) {\r\n conditions.push({\r\n propName: \"ShowerSize\",\r\n propValue: showerSize\r\n })\r\n }\r\n if (wallParent && wallParent.splitWall) {\r\n conditions.push({\r\n propName: \"SplitWallType\",\r\n propValue: wallParent.getSplitWallType()\r\n })\r\n }\r\n if (showerParent && showerParent.showerWall && showerParent.showerWall.activeFeature) {\r\n conditions.push({\r\n propName: \"MatchingWallName\",\r\n propValue: showerParent.showerWall.activeFeature.dbFeature.sharedFeatureName\r\n })\r\n }\r\n return conditions\r\n }\r\n\r\n}\r\n","import {Part} from \"../part\";\r\nimport {PartMenuType} from \"../../../visComponents/constants\";\r\n// import {BathTubType, LayoutType} from \"../constants\";\r\nimport {bathTubThumbnail} from \"../../../bvComponent/core/assets\";\r\n\r\nimport BathTubBody from \"../subparts/bathTub/bathTubBody\";\r\nimport BathTubFixture from \"../subparts/bathTub/bathTubFixture\";\r\nimport EnclosureTop from \"../subparts/bathTub/enclosureTop\";\r\nimport EnclosureBottom from \"../subparts/bathTub/enclosureBottom\";\r\nimport SkirtingBoard from \"../subparts/bathTub/skirtingBoard\";\r\n\r\nexport class Bathtub extends Part {\r\n static id = 'Bathtub';\r\n\r\n constructor() {\r\n super(true, false, PartMenuType.Complex);\r\n this.menuType = PartMenuType.Complex;\r\n this.partName = 'Bathtub';\r\n this.translateId = \"visualizer.bathroom.bathtub\";\r\n this.partThumbnail = bathTubThumbnail;\r\n this.bathTubBody = null;\r\n this.bathTubFixture = null;\r\n this.enclosureTop = null;\r\n this.enclosureBottom = null;\r\n this.skirtingBoard = null;\r\n this.relatedItems = [];\r\n this.relatedGroupNames = [\"Bathtub\", \"Bathtub Fixture\", \"Enclosure Top\", \"Enclosure Bottom\", \"Skirting Board\"];\r\n\r\n }\r\n\r\n load(dbFeature, loadFeature = true) {\r\n let relatedItemName = \"\",\r\n RelatedItemClass = null;\r\n switch (dbFeature.groupName) {\r\n case \"Bathtub\":\r\n relatedItemName = \"bathTubBody\";\r\n RelatedItemClass = BathTubBody;\r\n break;\r\n case \"Bathtub Fixture\":\r\n relatedItemName = \"bathTubFixture\";\r\n RelatedItemClass = BathTubFixture;\r\n break;\r\n case \"Enclosure Top\":\r\n case \"EnclosureTop\":\r\n relatedItemName = \"enclosureTop\";\r\n RelatedItemClass = EnclosureTop;\r\n break;\r\n case \"Enclosure Bottom\":\r\n case \"EnclosureBottom\":\r\n relatedItemName = \"enclosureBottom\";\r\n RelatedItemClass = EnclosureBottom;\r\n break;\r\n case \"Skirting Board\":\r\n relatedItemName = \"skirtingBoard\";\r\n RelatedItemClass = SkirtingBoard;\r\n break;\r\n }\r\n return this.loadCommon(relatedItemName, RelatedItemClass, dbFeature, loadFeature)\r\n }\r\n\r\n changeLayout() {\r\n // changeLayout(layoutType) {\r\n // if (layoutType === LayoutType.Layout1 && this.bathTubBody) {\r\n // // this.activeSubType_ = BathTubType.Custom60in;\r\n // // this.bathTubType_ = BathTubType.Custom60in;\r\n // if (!this.layout.parts.Shower.showerBody.disabled) { // disable bathtub if shower is active\r\n // if (this.bathTubBody) {\r\n // this.bathTubBody.disabled = true;\r\n // }\r\n // }\r\n // } else {\r\n // if (this.bathTubBody) {\r\n // this.bathTubBody.disabled = false;\r\n // }\r\n // }\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport {METADATA} from \"../../constants\";\r\n\r\nexport default class BathTubBody extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = \"bathtub_body\";\r\n this.partName = 'Bathtub';\r\n this.translateId = \"visualizer.bathroom.bathtub.bathtub\";\r\n this.canBeDisabled = true;\r\n }\r\n\r\n load(dbFeature) {\r\n if (!dbFeature.metaData[\"BathType\"]) {\r\n dbFeature.metaData[\"BathType\"] = [METADATA.BathtubWithoutEnclosures]; // remove enclosure top and bottom\r\n }\r\n return super.load(dbFeature);\r\n }\r\n\r\n disabledClick() {\r\n const bathParent = this.getParent();\r\n [\"bathTubFixture\", \"enclosureTop\", \"enclosureBottom\"].forEach(relName => {\r\n if (bathParent[relName]) {\r\n bathParent[relName].disabled = this.disabled;\r\n }\r\n })\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport {LOOK_ROOM_TYPES} from \"../../constants\";\r\nimport {getCurrentRoomType} from \"../../../../appLayout\";\r\n\r\nexport default class BathTubFixture extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = \"bathtub_fixture\";\r\n this.partName = \"Fixture\";\r\n this.translateId = \"visualizer.bathroom.bathtub.bathtub_fixture\";\r\n this.dbName = \"Bathtub Fixture\";\r\n this.canBeDisabled = true;\r\n }\r\n\r\n disabledClick() {\r\n const bathTubBody = this.getParent().bathTubBody;\r\n if (bathTubBody) {\r\n bathTubBody.disabled = this.disabled || !bathTubBody.canBeEnabled(); // true or check if it can be enabled;\r\n }\r\n }\r\n\r\n getArrayOfConditions() {\r\n if (getCurrentRoomType() === LOOK_ROOM_TYPES.as) {\r\n const bathtubParent = this.getParent();\r\n let conditions = super.getArrayOfConditions(); //roomLayout\r\n if (bathtubParent.bathTubBody && bathtubParent.bathTubBody.activeFeature && bathtubParent.bathTubBody.activeFeature.metaData[\"MountType\"]) {\r\n conditions.push({\r\n propName: \"MountType\",\r\n propValue: bathtubParent.bathTubBody.activeFeature.metaData[\"MountType\"]\r\n })\r\n }\r\n return conditions\r\n }\r\n return super.getArrayOfConditions()\r\n }\r\n\r\n}\r\n","import EnclosureCommon from \"./enclosureCommon\";\r\n\r\nexport default class EnclosureTop extends EnclosureCommon {\r\n\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'enclosure_top';\r\n this.dbName = 'EnclosureTop';\r\n this.partName = 'Enclosure Top';\r\n this.translateId = \"visualizer.bathroom.shower.enclosure_top\";\r\n this.canBeDisabled = false;\r\n this.isStoneFeature = true;\r\n }\r\n\r\n}\r\n","import EnclosureCommon from \"./enclosureCommon\";\r\n\r\nexport default class EnclosureBottom extends EnclosureCommon {\r\n\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'enclosure_bottom';\r\n this.dbName = 'EnclosureBottom';\r\n this.partName = 'Enclosure Bottom';\r\n this.translateId = \"visualizer.bathroom.shower.enclosure_bottom\";\r\n this.canBeDisabled = false;\r\n this.isStoneFeature = true;\r\n }\r\n\r\n}\r\n","import EnclosureCommon from \"./enclosureCommon\";\r\nimport {METADATA} from \"../../constants\";\r\n\r\nexport default class SkirtingBoard extends EnclosureCommon {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'skirting_board';\r\n this.partName = 'Skirting Board';\r\n this.translateId = \"visualizer.bathroom.accessories.skirting_board\";\r\n this.canBeDisabled = true;\r\n }\r\n\r\n load(dbFeature) {\r\n if (!dbFeature.metaData[\"BathType\"]) {\r\n dbFeature.metaData[\"BathType\"] = [METADATA.BathtubWithoutEnclosures]; // for free standing bath\r\n }\r\n return super.load(dbFeature);\r\n }\r\n\r\n}\r\n","import {Part} from \"../part\";\r\nimport {PartMenuType} from \"../../../visComponents/constants\";\r\nimport { showerAccessoriesThumbnail } from '../../../bvComponent/core/assets';\r\n\r\nimport Table from \"../subparts/accessories/table\";\r\nimport Chair from \"../subparts/accessories/chair\";\r\nimport Carpet from \"../subparts/accessories/carpet\";\r\nimport Lamp from \"../subparts/accessories/lamp\";\r\nimport Basket from \"../subparts/accessories/basket\";\r\nimport Frame from \"../subparts/accessories/frame\";\r\nimport Plant from \"../subparts/accessories/plant\";\r\n\r\nexport class Accessories extends Part {\r\n static id = 'Accessories';\r\n\r\n constructor() {\r\n super(true, false, PartMenuType.Complex);\r\n\r\n this.menuType = PartMenuType.Complex;\r\n this.partThumbnail = showerAccessoriesThumbnail;\r\n this.partName = 'Accessories';\r\n this.translateId = \"visualizer.bathroom.accessories2\";\r\n this.relatedItems = [];\r\n\r\n // related items\r\n this.table = null;\r\n this.chair = null;\r\n this.lamp = null;\r\n this.carpet = null;\r\n this.basket = null;\r\n this.frame = null;\r\n this.plant = null;\r\n\r\n //current active caddie type\r\n this.relatedGroupNames = [\"Table\", \"Chair\", \"Lamp\", \"Carpet\", \"Basket\", \"Frame\", \"Plant\"];\r\n }\r\n load(dbFeature, loadFeature = true) {\r\n let relatedItemName = \"\",\r\n RelatedItemClass = null;\r\n switch (dbFeature.groupName) {\r\n case \"Table\": {\r\n relatedItemName = \"table\";\r\n RelatedItemClass = Table;\r\n break;\r\n }\r\n case \"Chair\": {\r\n relatedItemName = \"chair\";\r\n RelatedItemClass = Chair;\r\n break;\r\n }\r\n case \"Lamp\":\r\n case \"Lamps\": {\r\n relatedItemName = \"lamp\";\r\n RelatedItemClass = Lamp;\r\n break;\r\n }\r\n case \"Carpet\":\r\n case \"Carpets\": {\r\n relatedItemName = \"carpet\";\r\n RelatedItemClass = Carpet;\r\n break;\r\n }\r\n case \"Basket\": {\r\n relatedItemName = \"basket\";\r\n RelatedItemClass = Basket;\r\n break;\r\n }\r\n case \"Frame\": {\r\n relatedItemName = \"frame\";\r\n RelatedItemClass = Frame;\r\n break;\r\n }\r\n case \"Plant\": {\r\n relatedItemName = \"plant\";\r\n RelatedItemClass = Plant;\r\n break;\r\n }\r\n }\r\n return this.loadCommon(relatedItemName, RelatedItemClass, dbFeature, loadFeature)\r\n }\r\n\r\n}\r\n\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\n\r\nexport default class Table extends IntermediatePart {\r\n\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'table';\r\n this.partName = 'Table';\r\n this.translateId = \"visualizer.bathroom.shower.table\";\r\n this.canBeDisabled = true;\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\n\r\nexport default class Chair extends IntermediatePart {\r\n\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'chair';\r\n this.partName = 'Chair';\r\n this.translateId = \"visualizer.bathroom.shower.chair\";\r\n this.canBeDisabled = true;\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\n\r\nexport default class Carpet extends IntermediatePart {\r\n\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'carpet';\r\n this.partName = 'Carpet';\r\n this.translateId = \"visualizer.bathroom.shower.carpet\";\r\n this.canBeDisabled = true;\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\n\r\nexport default class Lamp extends IntermediatePart {\r\n\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'lamp';\r\n this.partName = 'Lamp';\r\n this.translateId = \"visualizer.bathroom.shower.lamp\";\r\n this.canBeDisabled = true;\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\n\r\nexport default class Basket extends IntermediatePart {\r\n\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'basket';\r\n this.partName = 'Basket';\r\n this.translateId = \"visualizer.bathroom.basket\";\r\n this.canBeDisabled = true;\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\n\r\nexport default class Frame extends IntermediatePart {\r\n\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'frame';\r\n this.partName = 'Frame';\r\n this.translateId = \"visualizer.bathroom.frame\";\r\n this.canBeDisabled = true;\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\n\r\nexport default class Plant extends IntermediatePart {\r\n\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'plant';\r\n this.partName = 'Plant';\r\n this.translateId = \"visualizer.bathroom.plant\";\r\n this.canBeDisabled = true;\r\n }\r\n\r\n}\r\n","import {Vanity} from \"../../parts/vanity\";\r\nimport {createParentPositions, METADATA, LOOK_ROOM_TYPES, LayoutAbbreviations} from \"../../constants\";\r\nimport VanityCommon from \"./vanityCommon\";\r\nimport {getCurrentRoomType} from \"../../../../appLayout\";\r\n\r\nexport default class VanityCountertop extends VanityCommon {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'vanity_countertop';\r\n this.partName = 'Countertop';\r\n this.translateId = \"visualizer.bathroom.vanity.vanity_countertop\";\r\n this.homePageTitle = 'Countertops';\r\n this.visible = [Vanity.Types.Custom];\r\n this.isStoneFeature = true;\r\n this.canBeDisabled = true;\r\n if (isChild) {\r\n createParentPositions(this);\r\n this.nextFeaturesPageToLoadArray = {};\r\n LayoutAbbreviations.forEach(layoutAbbreviation => {\r\n this.nextFeaturesPageToLoadArray[layoutAbbreviation] = {\r\n page: 0,\r\n allReceived: false,\r\n };\r\n });\r\n }\r\n }\r\n\r\n load(dbFeature) {\r\n if (!dbFeature.metaData[\"MatchingFeature\"]) {\r\n dbFeature.metaData[\"MatchingFeature\"] = [METADATA.NO];\r\n }\r\n if (!dbFeature.metaData[\"Side\"]) {\r\n dbFeature.metaData[\"Side\"] = [METADATA.LeftSide];\r\n }\r\n return super.load(dbFeature);\r\n }\r\n\r\n disabledClick() {\r\n // this.getParent().toggleVanityParts(this.disabled); // temporary removed for demo\r\n }\r\n\r\n getArrayOfConditions() {\r\n const vanityParent = this.getParent();\r\n let conditions = super.getArrayOfConditions();\r\n if (getCurrentRoomType(vanityParent.layout) === LOOK_ROOM_TYPES.as) {\r\n const activeMatchingSink = vanityParent.getActiveMatchingMetaFromRelatedItem(\"vanity_sink\");\r\n const activeMatchingSinkSku = vanityParent.getActiveSkuFromRelatedItem(\"vanity_sink\");\r\n if ((activeMatchingSink && activeMatchingSink.includes(METADATA.NO)) || activeMatchingSinkSku) {\r\n const propValue = !activeMatchingSink.includes(METADATA.NO) && activeMatchingSinkSku ? activeMatchingSinkSku : activeMatchingSink;\r\n conditions.push({\r\n propName: \"MatchingFeature\",\r\n propValue,\r\n });\r\n if (!(Array.isArray(propValue) && propValue[0] === METADATA.NO)) { // remove since we need to use Lixil matchingfeature logic\r\n conditions = conditions.filter(condition => condition.propName !== \"VanitySize\");\r\n }\r\n }\r\n const activeSideMeta = vanityParent.getActiveMatchingMetaFromRelatedItem(vanityParent.vanity_type, \"Side\");\r\n if (activeSideMeta && activeSideMeta.includes(\"C\")) {\r\n conditions.push({\r\n propName: \"Side\",\r\n propValue: activeSideMeta\r\n });\r\n }\r\n }\r\n return conditions\r\n }\r\n}\r\n","import {Vanity} from \"../../parts/vanity\";\r\nimport VanityCommon from \"./vanityCommon\";\r\nimport {createParentPositions, LayoutAbbreviations, METADATA, VANITY_TYPES} from \"../../constants\";\r\n\r\nexport default class VanityBacksplash extends VanityCommon {\r\n\r\n constructor(isChild, partNumber = 0) {\r\n super(isChild);\r\n this.partNumber = partNumber;\r\n this.partId = 'vanity_backsplash';\r\n this.partName = 'Backsplash';\r\n this.translateId = \"visualizer.bathroom.vanity.vanity_backsplash\";\r\n this.visible = [Vanity.Types.Custom];\r\n this.canBeDisabled = true;\r\n this.isStoneFeature = true;\r\n if (isChild) {\r\n createParentPositions(this);\r\n this.nextFeaturesPageToLoadArray = {};\r\n LayoutAbbreviations.forEach(layoutAbbreviation => {\r\n this.nextFeaturesPageToLoadArray[layoutAbbreviation] = {\r\n page: 0,\r\n allReceived: false,\r\n };\r\n });\r\n }\r\n }\r\n\r\n hideLayerCondition() {\r\n const vanityParent = this.getParent();\r\n return !vanityParent.vanityCabinet\r\n || !vanityParent.vanityCabinet.activeFeature\r\n || vanityParent.vanity_type !== VANITY_TYPES.vanity_cabinet\r\n || !vanityParent.vanityCabinet.activeFeature.metaData[\"MatchingFeature\"].includes(METADATA.NO)\r\n }\r\n\r\n}\r\n","import {Vanity} from \"../../parts/vanity\";\r\nimport VanityCommon from \"./vanityCommon\";\r\nimport {createParentPositions, METADATA} from \"../../constants\";\r\n\r\nexport default class Mirror extends VanityCommon {\r\n constructor(isChild, partNumber = 0) {\r\n super(isChild);\r\n this.partNumber = partNumber;\r\n this.partId = 'vanity_mirror';\r\n this.partName = 'Mirror';\r\n this.translateId = \"visualizer.bathroom.vanity.vanity_mirror\";\r\n this.homePageTitle = 'Mirrors';\r\n this.visible = [Vanity.Types.Complete, Vanity.Types.Custom];\r\n this.canBeDisabled = false;\r\n if (isChild) {\r\n createParentPositions(this);\r\n }\r\n }\r\n load(dbFeature) {\r\n if (Array.isArray(dbFeature.metaData[\"VanitySize\"]) && dbFeature.metaData[\"VanitySize\"][0] === \"0\") {\r\n dbFeature.metaData[\"VanitySize\"] = [METADATA.ALL];\r\n }\r\n if (Array.isArray(dbFeature.metaData[\"MirrorShape\"]) && dbFeature.metaData[\"MirrorShape\"][0] === \"00\") {\r\n dbFeature.metaData[\"MirrorShape\"] = [METADATA.ALL];\r\n }\r\n return super.load(dbFeature);\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport { Vanity } from \"../../parts/vanity\";\r\nimport {createParentPositions, METADATA, SIDE_POSITIONS, VANITY_TYPES, LOOK_ROOM_TYPES} from \"../../constants\";\r\nimport {getSkuWithoutDot, removeLookPointFor} from \"../../../lookNavigation/lookFunctions2\";\r\nimport {navFeatureCLick} from \"../../../lookNavigation/lookFunctions\";\r\nimport {getCurrentRoomType} from \"../../../../appLayout\";\r\nimport {findNextVanityTypeFeature} from \"../../../lookNavigation/lookNavigationFunctions\";\r\nimport {IS_QKB_UI} from \"../../../../../config\";\r\nimport {getFeatureIsLocked} from \"../../../../../misc/helpers\";\r\n\r\nexport default class Sink extends IntermediatePart {\r\n constructor(isChild, partNumber = 0) {\r\n super(isChild);\r\n this.partNumber = partNumber;\r\n this.partId = 'vanity_sink';\r\n this.partName = 'Sink';\r\n this.translateId = \"visualizer.bathroom.vanity.vanity_sink\";\r\n this.homePageTitle = 'Sinks';\r\n this.visible = [Vanity.Types.Custom];\r\n // this.canBeDisabled = true;\r\n if (isChild) {\r\n createParentPositions(this);\r\n }\r\n }\r\n\r\n load(dbFeature) {\r\n if (!dbFeature.metaData[\"MountType\"]) {\r\n dbFeature.metaData[\"MountType\"] = [METADATA.Inner]\r\n }\r\n if (!dbFeature.metaData[\"MatchingFeature\"] || dbFeature.metaData[\"MountLevel\"]) {\r\n // added MountLevel for new sinks that can be applied for vanities with countertops\r\n dbFeature.metaData[\"MatchingFeature\"] = [METADATA.NO];\r\n dbFeature.metaData[\"CustomVanityType\"] = VANITY_TYPES.vanity_cabinet;\r\n }\r\n if (dbFeature.metaData[\"MountHoles\"] && dbFeature.metaData[\"MountHoles\"].includes(\"0\")) {\r\n dbFeature.metaData[\"MountHoles\"] = [\"0\", \"1\", \"4\", \"8\"]; // UnderMount Sinks - they can be used with all faucet types\r\n }\r\n // if (!dbFeature.metaData[\"SingleHole\"]) {\r\n // dbFeature.metaData[\"SingleHole\"] = dbFeature.lixilProductSubCategory === METADATA.WallHungSinks // todo change to filters\r\n // ? [METADATA.WallHungSinks]\r\n // : [METADATA.ALL];\r\n // }\r\n if (Array.isArray(dbFeature.metaData[\"SinkWidth\"]) && dbFeature.metaData[\"SinkWidth\"][0]) {\r\n dbFeature.metaData[\"SinkWidth\"] = +dbFeature.metaData[\"SinkWidth\"][0] + 5; // convert to number\r\n // for example, width is 23, 23 + 5 = 28, vanities with VanitySize 24 will be hidden\r\n }\r\n if (Array.isArray(dbFeature.metaData[\"WaterLevel\"]) && dbFeature.metaData[\"WaterLevel\"][0]) {\r\n dbFeature.metaData[\"WaterLevel\"] = +dbFeature.metaData[\"WaterLevel\"][0] + 3; // convert to number and add 3! they should be higher + 3\r\n }\r\n dbFeature.metaData[\"layerPosition\"] = !dbFeature.metaData[\"Side\"]\r\n ? SIDE_POSITIONS[0]\r\n : dbFeature.metaData[\"Side\"] ? dbFeature.metaData[\"Side\"][0] : \"\";\r\n const partNumber = dbFeature.metaData[\"layerPosition\"] === SIDE_POSITIONS[0] ? 1 : 2;\r\n return super.load_(dbFeature, new Sink(false, partNumber), true, partNumber === 1 ? 'features' : 'featuresParts');\r\n }\r\n\r\n // eslint-disable-next-line no-unused-vars\r\n navigationSubItems(filters, searchText, forFeature, filterGroups, restOptions = {}) {\r\n const {firstOpenedConditions, returnAllFeatures} = restOptions;\r\n if (getCurrentRoomType() === LOOK_ROOM_TYPES.as && !IS_QKB_UI) {\r\n const featuresList = this.getFeaturesForNavigationFrom(returnAllFeatures);\r\n const filteredAvailableFeatures = this.getFeaturesBySearchText(this.getFilteredFeaturesByFilters(filters, featuresList), searchText);\r\n let featuresToDisplay = this.navigationSubItemsWithFilterMultipleConditions(firstOpenedConditions || this.getArrayOfConditions(true), filteredAvailableFeatures);\r\n filteredAvailableFeatures.forEach(feature => {\r\n if (!feature.metaData[\"CustomVanityType\"] || !feature.metaData[\"CustomVanityType\"].length\r\n && featuresToDisplay.every(shownFeature => shownFeature.dbFeature.id !== feature.dbFeature.id)) {\r\n featuresToDisplay.push(feature);\r\n }\r\n });\r\n let sinkFeatures = [];\r\n if (this.activeFeature && this.activeFeature.metaData.layerPosition && Array.isArray(this.activeFeature.metaData.MountType)) {\r\n for (let sinkFeature of featuresToDisplay) {\r\n const alreadyExistingIndex = sinkFeatures.findIndex(feature => {\r\n return feature.dbFeature.sharedFeatureName === sinkFeature.dbFeature.sharedFeatureName\r\n });\r\n if (alreadyExistingIndex > -1) {\r\n if (sinkFeature.metaData.layerPosition && (this.activeFeature.metaData.layerPosition === sinkFeature.metaData.layerPosition)\r\n && sinkFeature.metaData.MountType && (this.activeFeature.metaData.MountType[0] === sinkFeature.metaData.MountType[0])) {\r\n sinkFeatures.splice(alreadyExistingIndex, 1, sinkFeature)\r\n }\r\n } else {\r\n sinkFeatures.push(sinkFeature);\r\n }\r\n }\r\n } else {\r\n sinkFeatures = featuresToDisplay;\r\n }\r\n return this.navigationItemsWithOptions(filters, forFeature, filterGroups, sinkFeatures)\r\n }\r\n return super.navigationSubItems(filters, searchText, forFeature, filterGroups, restOptions)\r\n }\r\n\r\n getNextVanityTypeFeature(shouldCheckSize = false) {\r\n const vanityParent = this.getParent().getParent();\r\n const currentActiveMatchingFeatureSku = vanityParent.getActiveSkuFromRelatedItem(vanityParent.vanity_type);\r\n const currentActiveMatchingFeatureMeta = vanityParent.getActiveMatchingMetaFromRelatedItem(vanityParent.vanity_type);\r\n const sinkSku = getSkuWithoutDot(this.dbFeature.sharedFeatureName);\r\n\r\n const currentMatchingMatchingFeature = this.metaData[\"MatchingFeature\"] && (!currentActiveMatchingFeatureSku || !this.metaData[\"MatchingFeature\"].includes(currentActiveMatchingFeatureSku));\r\n const currentMatchingMatchingSku = currentActiveMatchingFeatureMeta && !currentActiveMatchingFeatureMeta.includes(sinkSku);\r\n if (currentMatchingMatchingFeature || currentMatchingMatchingSku) {\r\n const relatedItem = vanityParent.relatedItems.find(relItem => relItem.partId === vanityParent.vanity_type);\r\n if (relatedItem) {\r\n return findNextVanityTypeFeature(this, relatedItem, shouldCheckSize)\r\n }\r\n }\r\n return null\r\n }\r\n\r\n handleClick(forceClick = false, setVanityOnly = false) {\r\n const asBathroom = getCurrentRoomType() === LOOK_ROOM_TYPES.as;\r\n const featureIsLocked = getFeatureIsLocked(this, forceClick);\r\n if (asBathroom && !featureIsLocked) {\r\n const vanityParent = this.getParent().getParent();\r\n if (!this.metaData[\"CustomVanityType\"] || !this.metaData[\"CustomVanityType\"].length) {\r\n vanityParent.vanity_type = null;\r\n // } else if (!vanityParent.vanity_type || !this.metaData[\"CustomVanityType\"].includes(vanityParent.vanity_type)) {\r\n } else if (!this.metaData[\"CustomVanityType\"].includes(vanityParent.vanity_type)) {\r\n vanityParent.vanity_type = this.metaData[\"CustomVanityType\"][0];\r\n }\r\n if (setVanityOnly) {\r\n return // vanity should be set after the sink updates it's layer positions\r\n }\r\n const matchFeature = this.getNextVanityTypeFeature();\r\n console.log(\"matchFeature\", matchFeature);\r\n // console.log(\"forceClick\", forceClick);\r\n if (matchFeature) {\r\n navFeatureCLick(matchFeature, false, forceClick, false)\r\n }\r\n // if (vanityParent.sink_type && vanityParent.sink_type.includes(SINK_TYPES.standAlone)) {\r\n // // vanityParent.vanityCabinet.disabled = true;\r\n // if (vanityParent.vanityCabinet.layerPositions) {\r\n // Object.keys(vanityParent.vanityCabinet.layerPositions).forEach(position => {\r\n // vanityParent.vanityCabinet.layerPositions[position] = null;\r\n // })\r\n // }\r\n // } else {\r\n // // vanityParent.vanityCabinet.disabled = false;\r\n // if (vanityParent.vanityCabinet.layerPositions) {\r\n // Object.keys(vanityParent.vanityCabinet.layerPositions).forEach(position => {\r\n // vanityParent.vanityCabinet.layerPositions[position] = vanityParent.vanityCabinet.getMatchingPositionFeature(position, vanityParent.vanityCabinet.activeFeature);\r\n // })\r\n // }\r\n // }\r\n }\r\n super.handleClick(forceClick);\r\n if (asBathroom && !featureIsLocked) {\r\n const vanityParent = this.getParent().getParent();\r\n vanityParent.updateVanityParts();\r\n }\r\n }\r\n\r\n handleChangeParent(nonCompatibleWith) {\r\n if (nonCompatibleWith === \"faucet\") {\r\n // some additional logic if needed\r\n } else {\r\n this.getParent().getParent().vanityCabinet.setActiveFeatureByFilter(\"Size\", this.metaData[\"VanitySize\"] ? this.metaData[\"VanitySize\"][0] : null); // \"60in\", etc.\r\n }\r\n }\r\n\r\n setActiveFeatureByFilter(filterName, filterValue) {\r\n const featuresToDisplay = super.navigationSubItemsWithFilterMultipleConditions(this.getArrayOfConditions());\r\n const filteredFeatures = featuresToDisplay.filter((feature) => {\r\n return feature.metaData[filterName] && feature.metaData[filterName].includes(filterValue);\r\n });\r\n if (!super.tryToSetTheSameFeature(filteredFeatures)) {\r\n this.activeFeature = filteredFeatures.find(feature => !feature.dbFeature.displayName.includes(\"laceholder\")) || filteredFeatures[0];\r\n const placeholderAvailableFeatures = filteredFeatures.filter(feature => {\r\n return feature.dbFeature.displayName.includes(\"laceholder\")\r\n });\r\n this.placeholderFeature = placeholderAvailableFeatures[0];\r\n }\r\n }\r\n\r\n getCurrentFaucetMetaData() {\r\n const faucetParent = this.getParent().faucet;\r\n let metaObject = {};\r\n if (faucetParent && faucetParent.activeFeature) {\r\n const singleHoleMeta = faucetParent.activeFeature.dbFeature.lixilProductSubCategory === METADATA.SingleHole\r\n || faucetParent.activeFeature.dbFeature.lixilProductSubCategory === METADATA.WidespreadFaucets // todo change to filters\r\n ? METADATA.WallHungSinks\r\n : METADATA.ALL\r\n if (singleHoleMeta) {\r\n metaObject[\"SingleHole\"] = singleHoleMeta\r\n }\r\n }\r\n return metaObject\r\n }\r\n\r\n // getArrayOfConditions(forNavigation = false) {\r\n getArrayOfConditions(forNavigation = false) {\r\n const conditions = super.getArrayOfConditions();\r\n // const currentFaucetMetaData = this.getCurrentFaucetMetaData();\r\n // if (currentFaucetMetaData[\"SingleHole\"]) {\r\n // conditions.push({\r\n // propName: 'SingleHole',\r\n // propValue: currentFaucetMetaData[\"SingleHole\"]\r\n // })\r\n // }\r\n const vanityParent = this.getParent();\r\n if (getCurrentRoomType(vanityParent.layout) === LOOK_ROOM_TYPES.as) {\r\n if (vanityParent.vanity_type && !forNavigation) {\r\n conditions.push({\r\n propName: \"CustomVanityType\",\r\n propValue: vanityParent.vanity_type\r\n });\r\n const activeMatchingVanity = vanityParent.getActiveSkuFromRelatedItem(vanityParent.vanity_type);\r\n const activeMatchingFeatures = vanityParent.getActiveMatchingMetaFromRelatedItem(vanityParent.vanity_type);\r\n const activeSideMeta = vanityParent.getActiveMatchingMetaFromRelatedItem(vanityParent.vanity_type, \"Side\");\r\n if (activeMatchingVanity) {\r\n conditions.push({\r\n propName: \"MatchingFeature\",\r\n propValue: activeMatchingFeatures.includes(METADATA.NO) ? METADATA.NO : activeMatchingVanity\r\n });\r\n }\r\n if (activeMatchingFeatures) {\r\n conditions.push({\r\n propName: \"FeatureSku\",\r\n propValue: activeMatchingFeatures\r\n });\r\n }\r\n if (activeSideMeta && activeSideMeta.includes(\"C\") && !vanityParent.isDoubleVanity()) {\r\n conditions.push({\r\n propName: \"Side\",\r\n propValue: activeSideMeta\r\n });\r\n }\r\n }\r\n }\r\n return conditions;\r\n }\r\n\r\n getActiveFeatureConditions(fromFeature = this.activeFeature) {\r\n let arrayOfConditions = super.getArrayOfConditions();\r\n ['MountType', 'MountHoles'].forEach((propName) => {\r\n if (fromFeature.metaData[propName]) {\r\n arrayOfConditions.push({\r\n propName,\r\n propValue: fromFeature.metaData[propName]\r\n })\r\n }\r\n })\r\n return arrayOfConditions\r\n }\r\n\r\n canDisplayDemoPoint(parentObject) {\r\n if (getCurrentRoomType() === LOOK_ROOM_TYPES.as) {\r\n const vanityParent = this.getParent();\r\n return !vanityParent.vanity_type // pedestal sink only\r\n }\r\n return removeLookPointFor(parentObject, 3, \"2\", SIDE_POSITIONS[1])\r\n && removeLookPointFor(parentObject, 1, \"1\", SIDE_POSITIONS[1])\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport { Vanity } from \"../../parts/vanity\";\r\nimport {createParentPositions, METADATA, SIDE_POSITIONS, LOOK_ROOM_TYPES} from \"../../constants\";\r\nimport {getSkuWithoutDot, removeLookPointFor} from \"../../../lookNavigation/lookFunctions2\";\r\nimport {navFeatureCLick} from \"../../../lookNavigation/lookFunctions\";\r\nimport store from \"../../../../../store\";\r\nimport {getCurrentRoomType} from \"../../../../appLayout\";\r\n\r\nexport default class VanityFaucet extends IntermediatePart {\r\n constructor(isChild, partNumber = 0) {\r\n super(isChild);\r\n this.partNumber = partNumber;\r\n this.partId = 'vanity_faucet';\r\n this.partName = 'Faucet';\r\n this.homePageTitle = 'Faucets';\r\n this.translateId = \"visualizer.bathroom.vanity.vanity_faucet\";\r\n this.visible = [Vanity.Types.Custom];\r\n this.useMatchesFailedNavigation = true;\r\n // this.canBeDisabled = true;\r\n if (isChild) {\r\n createParentPositions(this);\r\n }\r\n }\r\n\r\n load(dbFeature) {\r\n if (dbFeature.filterValueIDs && Array.isArray(dbFeature.filterValueIDs[\"27\"])) { // Collection\r\n const concettoTMIndex = dbFeature.filterValueIDs[\"27\"].findIndex(filterValueId => filterValueId === 10410);\r\n if (concettoTMIndex > -1) { // here we remove Concetto™ filter as it comes from the feed, we can't remove if rome dashboard\r\n // we replace it to \"Concetto\"\r\n dbFeature.filterValueIDs[\"27\"].includes(9755)\r\n ? dbFeature.filterValueIDs[\"27\"].splice(concettoTMIndex, 1)\r\n : dbFeature.filterValueIDs[\"27\"].splice(concettoTMIndex, 1, 9755)\r\n }\r\n }\r\n if (!dbFeature.metaData[\"MountType\"]) {\r\n dbFeature.metaData[\"MountType\"] = [METADATA.Inner]\r\n // } else if(dbFeature.metaData[\"MountType\"].includes(METADATA.Outer) && !dbFeature.metaData[\"MountType\"].includes(METADATA.Inner)) {\r\n // dbFeature.metaData[\"MountType\"].push(METADATA.Inner)\r\n // }\r\n }\r\n if (!dbFeature.metaData[\"MountHoles\"]) {\r\n if (dbFeature.customDisplayName.includes(\"8 inch\")) {\r\n dbFeature.metaData[\"MountHoles\"] = [\"8\"]\r\n } else if (dbFeature.customDisplayName.includes(\"Single Hole\")) {\r\n dbFeature.metaData[\"MountHoles\"] = [\"1\"]\r\n } else if (dbFeature.customDisplayName.includes(\"Centerset\")) {\r\n dbFeature.metaData[\"MountHoles\"] = [\"4\"]\r\n } else {\r\n console.log(\"NO FAUCET DBFEATURE META MountHoles!\", dbFeature.customDisplayName);\r\n }\r\n // } else if(dbFeature.metaData[\"MountType\"].includes(METADATA.Outer) && !dbFeature.metaData[\"MountType\"].includes(METADATA.Inner)) {\r\n // dbFeature.metaData[\"MountType\"].push(METADATA.Inner)\r\n // }\r\n } else if (dbFeature.metaData[\"MountHoles\"].includes(\"0\")) {\r\n dbFeature.metaData[\"MountHoles\"] = [\"0\", \"1\", \"4\", \"8\"]\r\n }\r\n if (Array.isArray(dbFeature.metaData[\"Height\"]) && dbFeature.metaData[\"Height\"][0]) {\r\n dbFeature.metaData[\"Height\"] = +dbFeature.metaData[\"Height\"][0]; // convert to number\r\n }\r\n if (dbFeature.isFromAsRoom) {\r\n\r\n if (!dbFeature.metaData[\"MountLevel\"]) {\r\n if (Array.isArray(dbFeature.metaData[\"MountType\"]) && dbFeature.metaData[\"MountType\"][0]) {\r\n if (dbFeature.metaData[\"MountType\"][0] === \"U\") {\r\n dbFeature.metaData[\"MountLevel\"] = [\"0\"]\r\n } else if (dbFeature.metaData[\"MountType\"][0] === \"S\") {\r\n dbFeature.metaData[\"MountLevel\"] = [\"2\"]\r\n }\r\n } else {\r\n dbFeature.metaData[\"MountLevel\"] = [\"2\"]\r\n }\r\n }\r\n\r\n if (dbFeature.metaData[\"MountType\"].includes(METADATA.Outer)) {\r\n [\"ST\", \"T\", \"W\", \"S\", \"A\"].forEach(metaValue => {\r\n if (!dbFeature.metaData[\"MountType\"].includes(metaValue)) {\r\n dbFeature.metaData[\"MountType\"].push(metaValue);\r\n }\r\n })\r\n }\r\n if (dbFeature.metaData[\"MountType\"].includes(METADATA.StandAlone) && !dbFeature.metaData[\"MountType\"].includes(METADATA.Outer)) {\r\n dbFeature.metaData[\"MountType\"].push(METADATA.Outer);\r\n }\r\n }\r\n // if (!dbFeature.metaData[\"SingleHole\"]) {\r\n // dbFeature.metaData[\"SingleHole\"] = [dbFeature.lixilProductSubCategory]; // todo change to filters\r\n // }\r\n dbFeature.metaData[\"layerPosition\"] = dbFeature.metaData[\"Side\"] ? dbFeature.metaData[\"Side\"][0] : \"\";\r\n const partNumber = dbFeature.metaData[\"layerPosition\"] === SIDE_POSITIONS[0] ? 1 : 2;\r\n return super.load_(dbFeature, new VanityFaucet(false, partNumber), true, partNumber === 1 ? 'features' : 'featuresParts');\r\n }\r\n\r\n getMatchingSinks() { // method is used for feature, to find the same sink as the current one\r\n const faucetParent = this.getParent();\r\n const vanityParent = faucetParent.getParent();\r\n const sinkParent = vanityParent.sink;\r\n const layout = vanityParent.layout;\r\n const currentSinkNavItems = layout.designNavigationItems({part: sinkParent});\r\n const matchingByCabinetType = currentSinkNavItems.filter(navItem => {\r\n return faucetParent.getActiveFeatureConditions(this).every(condition => navItem.part.matchesMetaForCondition(condition.propName, condition.propValue))\r\n });\r\n const withCurrentVanityType = matchingByCabinetType.filter(navItem => {\r\n if (!vanityParent.vanity_type) {\r\n return navItem.part.metaData[\"MountType\"] && navItem.part.metaData[\"MountType\"].includes(\"ST\")\r\n }\r\n return navItem.part.matchesMetaForCondition(\"CustomVanityType\", vanityParent.vanity_type)\r\n });\r\n const {filterGroups} = store.getState().filterState;\r\n const sinkCollectionName = vanityParent.sink && vanityParent.sink.activeFeature\r\n ? vanityParent.sink.activeFeature.getCollectionName(filterGroups)\r\n : \"\";\r\n const sinkCustomFullDisplayName = vanityParent.sink && vanityParent.sink.activeFeature\r\n ? vanityParent.sink.activeFeature.getCustomFullDisplayName()\r\n : \"\";\r\n const sameCollectionName = !sinkCollectionName ? withCurrentVanityType : withCurrentVanityType.filter(navItem => {\r\n return navItem.part.getCollectionName(filterGroups) === sinkCollectionName\r\n });\r\n const sameCustomName = !sinkCustomFullDisplayName ? sameCollectionName : sameCollectionName.filter(navItem => {\r\n return navItem.part.getCustomFullDisplayName() === sinkCustomFullDisplayName\r\n });\r\n return {\r\n matchingByCabinetType,\r\n withCurrentVanityType,\r\n sameCollectionName,\r\n sameCustomName,\r\n }\r\n }\r\n\r\n getSinkToClickFromMatchingSinks = (sinkActiveFeature) => {\r\n const {\r\n matchingByCabinetType,\r\n withCurrentVanityType,\r\n sameCollectionName,\r\n sameCustomName,\r\n } = this.getMatchingSinks();\r\n // console.log(\"matchingByCabinetType\", matchingByCabinetType);\r\n // console.log(\"withCurrentVanityType\", withCurrentVanityType);\r\n // console.log(\"sameCollectionName\", sameCollectionName);\r\n // console.log(\"sameCustomName\", sameCustomName);\r\n const fromWhereToPick = sameCustomName.length\r\n ? sameCustomName\r\n : sameCollectionName.length\r\n ? sameCollectionName\r\n : withCurrentVanityType.length\r\n ? withCurrentVanityType\r\n : matchingByCabinetType;\r\n let featureToCLick = null;\r\n if (sinkActiveFeature) {\r\n const faucetParent = this.getParent();\r\n const vanityParent = faucetParent.getParent();\r\n const relatedItem = vanityParent.relatedItems.find(relItem => relItem.partId === vanityParent.vanity_type);\r\n if (relatedItem && relatedItem.activeFeature && sinkActiveFeature.metaData[\"MatchingFeature\"]) {\r\n featureToCLick = fromWhereToPick.find(navItem => {\r\n return navItem.part.metaData[\"MatchingFeature\"].includes(getSkuWithoutDot(relatedItem.activeFeature.dbFeature.sharedFeatureName))\r\n })\r\n }\r\n if (!featureToCLick) {\r\n featureToCLick = fromWhereToPick.find(navItem => navItem.part.getColorName() === sinkActiveFeature.getColorName())\r\n }\r\n }\r\n if (!featureToCLick) {\r\n featureToCLick = fromWhereToPick[0];\r\n }\r\n console.log(\"featureToCLick\", featureToCLick);\r\n return featureToCLick ? featureToCLick.part : null;\r\n }\r\n\r\n handleClick(ignoreLocked = false) {\r\n const faucetParent = this.getParent();\r\n const vanityParent = faucetParent.getParent();\r\n const sinkParent = vanityParent.sink;\r\n\r\n if (!sinkParent.activeFeature || !sinkParent.activeFeature.matchesMetaForArrayOfConditions(faucetParent.getActiveFeatureConditions(this))) {\r\n const featureToCLick = this.getSinkToClickFromMatchingSinks(sinkParent.activeFeature)\r\n if (featureToCLick) {\r\n console.log(\"sink featureToCLick\", featureToCLick);\r\n navFeatureCLick(featureToCLick, false, ignoreLocked, false);\r\n }\r\n }\r\n\r\n super.handleClick(ignoreLocked);\r\n }\r\n\r\n getCurrentSinkMetaData() {\r\n const sinkParent = this.getParent().sink;\r\n let metaObject = {};\r\n if (sinkParent && sinkParent.activeFeature) {\r\n const sinkMeta = sinkParent.activeFeature.metaData[\"MountType\"];\r\n if (sinkMeta) {\r\n metaObject[\"MountType\"] = Array.isArray(sinkMeta) ? sinkMeta[0] : sinkMeta\r\n }\r\n // const singleHoleMeta = sinkParent.activeFeature.dbFeature.lixilProductSubCategory === \"Wall Hung Sinks\" //\r\n // if (singleHoleMeta) {\r\n // metaObject[\"SingleHole\"] = METADATA.SingleHole\r\n // }\r\n const mountHolesMeta = sinkParent.activeFeature.metaData[\"MountHoles\"] // American Standard\r\n if (mountHolesMeta && !(getCurrentRoomType() === LOOK_ROOM_TYPES.grohe && mountHolesMeta.includes(\"0\"))) {\r\n metaObject[\"MountHoles\"] = mountHolesMeta\r\n }\r\n }\r\n return metaObject\r\n }\r\n\r\n getArrayOfConditions(forNavigation = false) {\r\n // const counterTopSize = this.getParent().counterTopSize(this);\r\n // const conditions = [{\r\n // propName: 'VanitySize',\r\n // propValue: counterTopSize\r\n // }];\r\n const conditions = super.getArrayOfConditions();\r\n const currentSinkMetaData = this.getCurrentSinkMetaData();\r\n [\"MountType\", \"MountHoles\"].forEach(propName => {\r\n if ((!forNavigation || ((getCurrentRoomType() === LOOK_ROOM_TYPES.grohe) && propName === \"MountType\")) && currentSinkMetaData[propName]\r\n && !(propName === \"MountHoles\" && currentSinkMetaData[propName].includes(\"0\") && currentSinkMetaData[\"MountType\"] && currentSinkMetaData[\"MountType\"].includes(\"U\"))) {\r\n if (propName === \"MountType\" && (currentSinkMetaData[propName] === \"V\")) { // do not check V sinks\r\n return\r\n }\r\n conditions.push({\r\n propName,\r\n propValue: currentSinkMetaData[propName]\r\n })\r\n }\r\n })\r\n // if (currentSinkMetaData[\"SingleHole\"]) {\r\n // conditions.push({\r\n // propName: 'SingleHole',\r\n // propValue: currentSinkMetaData[\"SingleHole\"]\r\n // })\r\n // }\r\n const vanityParent = this.getParent();\r\n const activeSideMeta = vanityParent.getActiveMatchingMetaFromRelatedItem(vanityParent.vanity_type, \"Side\");\r\n if (activeSideMeta && activeSideMeta.includes(\"C\") && !vanityParent.isDoubleVanity()) {\r\n conditions.push({\r\n propName: \"Side\",\r\n propValue: activeSideMeta\r\n });\r\n }\r\n // const countertopSize = vanityParent.counterTopSize(this);\r\n // if (countertopSize) {\r\n // conditions.push({\r\n // propName: \"VanitySize\",\r\n // propValue: countertopSize && countertopSize[0] && (countertopSize[0] === \"32\") ? \"48\" : countertopSize\r\n // })\r\n // }\r\n if (vanityParent.sink && vanityParent.sink.activeFeature) {\r\n const sinkType = vanityParent.sink.activeFeature.metaData[\"SinkType\"]\r\n if (sinkType) {\r\n conditions.push({\r\n propName: \"SinkType\",\r\n propValue: vanityParent.sink.activeFeature.metaData[\"SinkType\"]\r\n })\r\n }\r\n const mountLevel = vanityParent.sink.activeFeature.metaData[\"MountLevel\"]\r\n if (mountLevel) {\r\n conditions.push({\r\n propName: \"MountLevel\",\r\n propValue: vanityParent.sink.activeFeature.metaData[\"MountLevel\"]\r\n });\r\n if ((Array.isArray(mountLevel) && mountLevel[0] === \"0\") || mountLevel === \"0\") {\r\n const waterLevel = vanityParent.sink.activeFeature.metaData[\"WaterLevel\"]\r\n if (waterLevel) {\r\n conditions.push({\r\n propName: \"WaterLevel\", // sink WaterLevel - is faucet Height, all logic is in the matchesMetaForCondition func\r\n propValue: vanityParent.sink.activeFeature.metaData[\"WaterLevel\"]\r\n })\r\n }\r\n }\r\n }\r\n }\r\n // console.log(\"conditions\", conditions);\r\n return conditions;\r\n }\r\n\r\n getActiveFeatureConditions(fromFeature = this.activeFeature) {\r\n let arrayOfConditions = this.getArrayOfConditions();\r\n arrayOfConditions = arrayOfConditions.map(condition => {\r\n if ((condition.propName === 'MountType' || condition.propName === 'MountHoles') && fromFeature.metaData[condition.propName]) {\r\n return {\r\n propName: condition.propName,\r\n propValue: fromFeature.metaData[condition.propName]\r\n }\r\n }\r\n return condition\r\n });\r\n if (fromFeature.metaData[\"MountLevel\"]) {\r\n arrayOfConditions.push({\r\n propName: \"MountLevel\",\r\n propValue: fromFeature.metaData[\"MountLevel\"]\r\n })\r\n }\r\n return arrayOfConditions\r\n }\r\n\r\n getAvailableFeatures() {\r\n return this.features.filter(f => f.matchesMetaForCondition('VanitySize', this.getParent().counterTopSize(this)));\r\n }\r\n\r\n handleChangeParent(nonCompatibleWith) {\r\n if (nonCompatibleWith === \"sink\") {\r\n this.getParent().getParent().sink.setActiveFeatureByFilter(\"MountType\", METADATA.Inner)\r\n } else {\r\n this.getParent().getParent().vanityCabinet.setActiveFeatureByFilter(\"Size\", this.metaData[\"VanitySize\"] ? this.metaData[\"VanitySize\"][0] : null); // \"60in\", etc.\r\n }\r\n }\r\n\r\n canDisplayDemoPoint(parentObject) {\r\n if (getCurrentRoomType() === LOOK_ROOM_TYPES.as) {\r\n return removeLookPointFor(parentObject, 6, \"1\", SIDE_POSITIONS[1])\r\n }\r\n return removeLookPointFor(parentObject, 3, \"2\", SIDE_POSITIONS[1])\r\n && removeLookPointFor(parentObject, 1, \"1\", SIDE_POSITIONS[1])\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport {Vanity} from \"../../parts/vanity\";\r\nimport {createParentPositions, SIDE_POSITIONS, VANITY_TYPES} from \"../../constants\";\r\n\r\nexport default class Ptrap extends IntermediatePart {\r\n\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'vanity_ptrap';\r\n this.partName = 'Ptrap';\r\n this.translateId = \"visualizer.bathroom.vanity.vanity_ptrap\";\r\n this.visible = [Vanity.Types.Custom];\r\n // this.canBeDisabled = true;\r\n if (isChild) {\r\n createParentPositions(this);\r\n }\r\n }\r\n\r\n disabledClick() {\r\n this.toggleLayerPositions();\r\n }\r\n\r\n // handleClick(ignoreLocked) {\r\n // const vanityParent = this.getParent().getParent();\r\n // if ((vanityParent.vanity_type !== VANITY_TYPES.vanity_washstand && vanityParent.vanity_type !== VANITY_TYPES.vanity_console)) {\r\n // if (vanityParent.vanityConsole && vanityParent.vanityConsole.activeFeature) {\r\n // vanityParent.vanityConsole.disabled = false;\r\n // vanityParent.vanity_type = VANITY_TYPES.vanity_console;\r\n // } else if (vanityParent.vanityWashstand && vanityParent.vanityWashstand.activeFeature) {\r\n // vanityParent.vanityWashstand.disabled = false;\r\n // vanityParent.vanity_type = VANITY_TYPES.vanity_washstand;\r\n // }\r\n // }\r\n // super.handleClick(ignoreLocked);\r\n // vanityParent.updateVanityParts();\r\n // }\r\n\r\n hideLayerCondition() {\r\n const vanityParent = this.getParent();\r\n return (vanityParent.vanity_type === VANITY_TYPES.vanity_cabinet && (!vanityParent.vanityCabinet || !vanityParent.vanityCabinet.activeFeature))\r\n || (vanityParent.vanity_type === VANITY_TYPES.vanity_washstand && (!vanityParent.vanityWashstand || !vanityParent.vanityWashstand.activeFeature))\r\n || (vanityParent.vanity_type === VANITY_TYPES.vanity_console && (!vanityParent.vanityConsole || !vanityParent.vanityConsole.activeFeature))\r\n }\r\n\r\n // getArrayOfConditions() {\r\n // const conditions = super.getArrayOfConditions();\r\n // const activeMatchingSink = this.getParent().getActiveSkuFromRelatedItem(\"vanity_sink\");\r\n // if (activeMatchingSink) {\r\n // conditions.push({\r\n // propName: \"MatchingFeature\",\r\n // propValue: activeMatchingSink\r\n // });\r\n // }\r\n // console.log(\"conditions\", conditions);\r\n // console.log(\"this\", this.activeFeature ? this.activeFeature.metaData : \"\");\r\n // return conditions\r\n // }\r\n\r\n getArrayOfConditions() {\r\n const conditions = super.getArrayOfConditions();\r\n const vanityParent = this.getParent();\r\n const activeSideMeta = vanityParent.getActiveMatchingMetaFromRelatedItem(vanityParent.vanity_type, \"Side\");\r\n if (activeSideMeta && activeSideMeta.includes(\"C\")) {\r\n conditions.push({\r\n propName: \"Side\",\r\n propValue: activeSideMeta\r\n });\r\n }\r\n // console.log(\"conditions\", conditions);\r\n return conditions;\r\n }\r\n\r\n canDisplayDemoPoint(parentObject) {\r\n const vanityParent = this.getParent();\r\n return vanityParent.vanity_type && (vanityParent.vanity_type !== VANITY_TYPES.vanity_cabinet) && (parentObject.layerPosition !== SIDE_POSITIONS[0])\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport {Vanity} from \"../../parts/vanity\";\r\nimport {createParentPositions, SIDE_POSITIONS, VANITY_TYPES} from \"../../constants\";\r\nimport {updateSinkWithNewFeature} from \"../../../lookNavigation/lookNavigationFunctions\";\r\n\r\nexport default class VanityWashstand extends IntermediatePart {\r\n\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'vanity_washstand';\r\n this.partName = 'Washstand';\r\n this.translateId = \"visualizer.bathroom.vanity.vanity_washstand\";\r\n this.visible = [Vanity.Types.Custom];\r\n this.canBeDisabled = true;\r\n if (isChild) {\r\n createParentPositions(this);\r\n }\r\n }\r\n\r\n disabledClick() {\r\n this.toggleLayerPositions();\r\n const vanityParent = this.getParent();\r\n if (vanityParent && vanityParent.wsTowelBar) {\r\n vanityParent.wsTowelBar.disabled = this.disabled || !vanityParent.wsTowelBar.canBeEnabled(); // true or check if it can be enabled;;\r\n }\r\n }\r\n\r\n handleClick(ignoreLocked) {\r\n const vanityParent = this.getParent().getParent();\r\n vanityParent.vanity_type = VANITY_TYPES.vanity_washstand;\r\n super.handleClick(ignoreLocked);\r\n updateSinkWithNewFeature(this);\r\n vanityParent.updateVanityParts();\r\n }\r\n\r\n hideLayerCondition() {\r\n const vanityParent = this.getParent();\r\n return vanityParent.vanity_type !== VANITY_TYPES.vanity_washstand && !!this.activeFeature\r\n }\r\n\r\n // getArrayOfConditions() {\r\n // const conditions = super.getArrayOfConditions();\r\n // const activeMatchingSink = this.getParent().getActiveSkuFromRelatedItem(\"vanity_sink\");\r\n // if (activeMatchingSink) {\r\n // conditions.push({\r\n // propName: \"MatchingFeature\",\r\n // propValue: activeMatchingSink\r\n // });\r\n // }\r\n // return conditions\r\n // }\r\n\r\n canDisplayDemoPoint(parentObject) {\r\n return this.getParent().vanity_type === VANITY_TYPES.vanity_washstand && (parentObject.layerPosition !== SIDE_POSITIONS[0])\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport {Vanity} from \"../../parts/vanity\";\r\nimport {VANITY_TYPES} from \"../../constants\";\r\n\r\nexport default class VanityMiddle extends IntermediatePart {\r\n\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'vanity_middle';\r\n this.partName = 'Vanity Middle';\r\n this.translateId = \"visualizer.bathroom.vanity.vanity_middle\";\r\n this.visible = [Vanity.Types.Custom];\r\n this.canBeDisabled = true;\r\n this.isStoneFeature = true;\r\n }\r\n\r\n hideLayerCondition() {\r\n const vanityParent = this.getParent();\r\n return !vanityParent.vanityCabinet\r\n || !vanityParent.vanityCabinet.activeFeature\r\n || vanityParent.vanity_type !== VANITY_TYPES.vanity_cabinet\r\n || (vanityParent.vanityCabinet.layerPositions && vanityParent.vanityCabinet.layerPositions[\"C\"])\r\n || (this.activeFeature && !this.activeFeature.matchesMetaForArrayOfConditions(this.getArrayOfConditions()))\r\n }\r\n\r\n getArrayOfConditions() {\r\n const conditions = super.getArrayOfConditions();\r\n const activeMatchingVanity = this.getParent().getActiveSkuFromRelatedItem(\"vanity_cabinet\");\r\n if (activeMatchingVanity) {\r\n conditions.push({\r\n propName: \"MatchingFeature\",\r\n propValue: activeMatchingVanity\r\n });\r\n }\r\n return conditions\r\n }\r\n\r\n canDisplayDemoPoint() {\r\n return this.getParent().vanity_type === VANITY_TYPES.vanity_cabinet\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport {Vanity} from \"../../parts/vanity\";\r\nimport {createParentPositions, VANITY_TYPES} from \"../../constants\";\r\n\r\nexport default class DrawerPull extends IntermediatePart {\r\n\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'vanity_drawer_pull';\r\n this.partName = 'Drawer Pull';\r\n this.translateId = \"visualizer.bathroom.vanity.vanity_drawer_pull\";\r\n this.visible = [Vanity.Types.Custom];\r\n this.canBeDisabled = true;\r\n if (isChild) {\r\n createParentPositions(this);\r\n }\r\n }\r\n\r\n disabledClick() {\r\n this.toggleLayerPositions();\r\n }\r\n\r\n handleClick(ignoreLocked) {\r\n const vanityParent = this.getParent().getParent();\r\n vanityParent.vanity_type = VANITY_TYPES.vanity_cabinet;\r\n super.handleClick(ignoreLocked);\r\n vanityParent.updateVanityParts();\r\n }\r\n\r\n hideLayerCondition() {\r\n const vanityParent = this.getParent();\r\n return !vanityParent.vanityCabinet || !vanityParent.vanityCabinet.activeFeature || vanityParent.vanity_type !== VANITY_TYPES.vanity_cabinet\r\n }\r\n\r\n getArrayOfConditions() {\r\n const conditions = super.getArrayOfConditions();\r\n const activeMatchingVanity = this.getParent().getActiveSkuFromRelatedItem(VANITY_TYPES.vanity_cabinet);\r\n if (activeMatchingVanity) {\r\n conditions.push({\r\n propName: \"MatchingFeature\",\r\n propValue: activeMatchingVanity\r\n });\r\n }\r\n return conditions\r\n }\r\n\r\n canDisplayDemoPoint() {\r\n return this.getParent().vanity_type === VANITY_TYPES.vanity_cabinet\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport {Vanity} from \"../../parts/vanity\";\r\nimport {createParentPositions, VANITY_TYPES} from \"../../constants\";\r\n\r\nexport default class WSTowelBar extends IntermediatePart {\r\n\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'vanity_ws_towel_bar';\r\n this.partName = 'WS Towel Bar';\r\n this.translateId = \"visualizer.bathroom.vanity.vanity_ws_towel_bar\";\r\n this.visible = [Vanity.Types.Custom];\r\n this.canBeDisabled = true;\r\n if (isChild) {\r\n createParentPositions(this);\r\n }\r\n }\r\n\r\n disabledClick() {\r\n this.toggleLayerPositions();\r\n }\r\n\r\n handleClick(ignoreLocked) {\r\n const vanityParent = this.getParent().getParent();\r\n vanityParent.vanity_type = VANITY_TYPES.vanity_washstand;\r\n super.handleClick(ignoreLocked);\r\n vanityParent.updateVanityParts();\r\n }\r\n\r\n hideLayerCondition() {\r\n const vanityParent = this.getParent();\r\n return !vanityParent.vanityWashstand || !vanityParent.vanityWashstand.activeFeature || vanityParent.vanity_type !== VANITY_TYPES.vanity_washstand\r\n }\r\n\r\n getArrayOfConditions() {\r\n const conditions = super.getArrayOfConditions();\r\n const activeMatchingSink = this.getParent().getActiveSkuFromRelatedItem(\"vanity_washstand\");\r\n if (activeMatchingSink) {\r\n conditions.push({\r\n propName: \"MatchingFeature\",\r\n propValue: activeMatchingSink\r\n });\r\n }\r\n return conditions\r\n }\r\n\r\n canDisplayDemoPoint() {\r\n return this.getParent().vanity_type === VANITY_TYPES.vanity_washstand\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport {Vanity} from \"../../parts/vanity\";\r\nimport {createParentPositions, SIDE_POSITIONS, VANITY_TYPES, LOOK_ROOM_TYPES} from \"../../constants\";\r\nimport {removeLookPointFor} from \"../../../lookNavigation/lookFunctions2\";\r\nimport {getCurrentRoomType} from \"../../../../appLayout\";\r\n\r\nexport default class VanityLegs extends IntermediatePart {\r\n\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'vanity_legs';\r\n this.partName = 'Vanity Legs';\r\n this.translateId = \"visualizer.bathroom.vanity.vanity_legs\";\r\n this.visible = [Vanity.Types.Custom];\r\n this.canBeDisabled = true;\r\n if (isChild) {\r\n createParentPositions(this);\r\n }\r\n }\r\n\r\n disabledClick() {\r\n this.toggleLayerPositions();\r\n }\r\n\r\n hideLayerCondition() {\r\n const vanityParent = this.getParent();\r\n return !vanityParent.vanityCabinet || !vanityParent.vanityCabinet.activeFeature || vanityParent.vanity_type !== VANITY_TYPES.vanity_cabinet\r\n }\r\n\r\n getArrayOfConditions() {\r\n const conditions = super.getArrayOfConditions();\r\n const vanityParent = this.getParent();\r\n const activeMatchingVanity = vanityParent.getActiveSkuFromRelatedItem(\"vanity_cabinet\");\r\n if (activeMatchingVanity) {\r\n conditions.push({\r\n propName: \"MatchingFeature\",\r\n propValue: activeMatchingVanity\r\n });\r\n }\r\n const activeSideMeta = vanityParent.getActiveMatchingMetaFromRelatedItem(\"vanity_cabinet\", \"Side\");\r\n if (activeSideMeta && activeSideMeta.includes(\"C\")) {\r\n conditions.push({\r\n propName: \"Side\",\r\n propValue: activeSideMeta\r\n });\r\n }\r\n return conditions\r\n }\r\n\r\n canDisplayDemoPoint(parentObject) {\r\n if (getCurrentRoomType() === LOOK_ROOM_TYPES.as) {\r\n return parentObject.layerPosition !== SIDE_POSITIONS[0] && removeLookPointFor(parentObject, 6, \"1\")\r\n }\r\n return this.getParent().vanity_type === VANITY_TYPES.vanity_cabinet\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport {Vanity} from \"../../parts/vanity\";\r\nimport {createParentPositions, SIDE_POSITIONS, VANITY_TYPES} from \"../../constants\";\r\nimport {updateSinkWithNewFeature} from \"../../../lookNavigation/lookNavigationFunctions\";\r\n\r\nexport default class VanityConsole extends IntermediatePart {\r\n\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'vanity_console';\r\n this.partName = 'Console';\r\n this.translateId = \"visualizer.bathroom.vanity.vanity_console\";\r\n this.visible = [Vanity.Types.Custom];\r\n this.canBeDisabled = true;\r\n if (isChild) {\r\n createParentPositions(this);\r\n }\r\n }\r\n\r\n disabledClick() {\r\n this.toggleLayerPositions();\r\n }\r\n\r\n handleClick(ignoreLocked) {\r\n const vanityParent = this.getParent().getParent();\r\n vanityParent.vanity_type = VANITY_TYPES.vanity_console;\r\n super.handleClick(ignoreLocked);\r\n updateSinkWithNewFeature(this);\r\n vanityParent.updateVanityParts();\r\n }\r\n\r\n hideLayerCondition() {\r\n const vanityParent = this.getParent();\r\n return vanityParent.vanity_type !== VANITY_TYPES.vanity_console && !!this.activeFeature\r\n }\r\n\r\n // getArrayOfConditions() {\r\n // const conditions = super.getArrayOfConditions();\r\n // const activeMatchingSink = this.getParent().getActiveSkuFromRelatedItem(\"vanity_sink\");\r\n // if (activeMatchingSink) {\r\n // conditions.push({\r\n // propName: \"MatchingFeature\",\r\n // propValue: activeMatchingSink\r\n // });\r\n // }\r\n // return conditions\r\n // }\r\n\r\n canDisplayDemoPoint(parentObject) {\r\n return this.getParent().vanity_type === VANITY_TYPES.vanity_console && (parentObject.layerPosition !== SIDE_POSITIONS[0])\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport {Vanity} from \"../../parts/vanity\";\r\nimport {createParentPositions} from \"../../constants\";\r\n\r\nexport default class DoorHandle extends IntermediatePart {\r\n\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'door_handle';\r\n this.partName = 'Door Handle';\r\n this.translateId = \"visualizer.kitchen.cabinet.door_handle\";\r\n this.visible = [Vanity.Types.Custom];\r\n this.canBeDisabled = false;\r\n if (isChild) {\r\n createParentPositions(this);\r\n }\r\n }\r\n\r\n disabledClick() {\r\n this.getParent().toggleVanityParts(this.disabled);\r\n }\r\n\r\n getArrayOfConditions() {\r\n const conditions = super.getArrayOfConditions();\r\n const vanityParent = this.getParent();\r\n conditions.push({\r\n propName: \"VanitySize\",\r\n propValue: vanityParent.counterTopSize(this)\r\n })\r\n return conditions\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport {Vanity} from \"../../parts/vanity\";\r\nimport {createParentPositions} from \"../../constants\";\r\n\r\nexport default class DrawerHandle extends IntermediatePart {\r\n\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'drawer_handle';\r\n this.partName = 'Drawer Handle';\r\n this.translateId = \"visualizer.kitchen.cabinet.drawer_handle\";\r\n this.visible = [Vanity.Types.Custom];\r\n this.canBeDisabled = false;\r\n if (isChild) {\r\n createParentPositions(this);\r\n }\r\n }\r\n\r\n disabledClick() {\r\n this.getParent().toggleVanityParts(this.disabled);\r\n }\r\n\r\n getArrayOfConditions() {\r\n const conditions = super.getArrayOfConditions();\r\n const vanityParent = this.getParent();\r\n conditions.push({\r\n propName: \"VanitySize\",\r\n propValue: vanityParent.counterTopSize(this)\r\n })\r\n return conditions\r\n }\r\n}\r\n","import workspace from \"../../workspace\";\r\nimport {findLowestRightmostPoint} from \"../../../../../helpers/coordinatesHelper\";\r\nimport {canShapeBeAutoShifted, getLineDirection} from \"../../../../../helpers/shapeHelper\";\r\nimport sqftShapeManager from \"../../../store/sqftShapeManager\";\r\nimport {getPointDistance} from \"../../../../../helpers/sqftHelper\";\r\nimport {isHorizontalDirection, isVerticalDirection} from \"../../../helpers/lineHelper\";\r\nimport workspaceControllers from \"../../../store/workspaceControllers\";\r\nimport sqftShapeIntersectionsManager from \"../../../store/sqftShapeIntersectionsManager\";\r\n\r\nexport default class ShapeAutoShuffle {\r\n __shape;\r\n\r\n constructor(shape) {\r\n this.__shape = shape;\r\n }\r\n\r\n handlePlaceShapeOnTheLine = () => {\r\n //Auto Shuffle\r\n const hoveredLines = workspace.getHoveredLines([this.__shape.id]);\r\n\r\n if (hoveredLines.length > 0) {\r\n // Get relevant shapes and lines\r\n const hoveredLine = this.getHoveredLine(hoveredLines);\r\n const hoveredShape = hoveredLine.getParent();\r\n\r\n if (canShapeBeAutoShifted(this.__shape, hoveredShape)) {\r\n const newPosition = this.calculateNewPosition(hoveredLine, hoveredShape);\r\n\r\n if (newPosition) {\r\n // Move shape to new positions\r\n this.moveShapeToPositionAndRotate(newPosition, hoveredLine);\r\n\r\n //set same snapped shape group before get shapes to shift\r\n workspaceControllers.snappedShapeGroups.setSameSnappedShapesGroup(this.__shape, hoveredShape);\r\n\r\n //Get shapes to shift\r\n const shapesToShift = this.getShapesToShift(hoveredShape, newPosition);\r\n //console.log(\"shapesToShift\", shapesToShift);\r\n\r\n // Calculate new positions\r\n const [xDiff, yDiff] = this.calculatePositionDiffForOtherShapes(hoveredLine);\r\n this.moveShapesToPositions(shapesToShift, xDiff, yDiff);\r\n\r\n this.__shape.resetState();\r\n sqftShapeIntersectionsManager.updateShapesIntersections();\r\n workspaceControllers.snappedShapeGroups.updateShapesSnappedGroups(true);\r\n workspace.getHoveredLines(); // update hovered lines\r\n return true\r\n }\r\n }\r\n }\r\n }\r\n\r\n /**\r\n * Will return line for the lowest and rightmost shape\r\n * @param hoveredLines\r\n */\r\n getHoveredLine = (hoveredLines) => {\r\n const hoveredLinesShapes = hoveredLines.map(line => line.getParent());\r\n const lowestRightmostPoint = findLowestRightmostPoint(hoveredLinesShapes.map(shape => shape.getPosition()));\r\n const shapeToShift = hoveredLinesShapes.find(shape => {\r\n return shape.getPosition() === lowestRightmostPoint\r\n && shape.id !== this.__shape.id // skip current moving shape\r\n });\r\n\r\n return hoveredLines.find(line => line.getParent().id === shapeToShift.id);\r\n }\r\n\r\n /**\r\n * Will return all shapes that are lower or on the same line then point\r\n * @param hoveredShape\r\n * @param point\r\n */\r\n getShapesToShift = (hoveredShape, point) => {\r\n const snappedShapeGroup = hoveredShape.shapeAbsolute.getSnappedShapeGroup();\r\n if (snappedShapeGroup !== null && snappedShapeGroup !== undefined) {\r\n const snappedShapes = workspaceControllers.snappedShapeGroups.getSnappedShapes(snappedShapeGroup);\r\n if (snappedShapes) {\r\n const snappedShapesWithoutMovingShape = snappedShapes.filter(shape =>\r\n shape.id !== this.__shape.id\r\n && (hoveredShape.partId === shape.partId\r\n || hoveredShape.partId === shape.parentPartId\r\n || (hoveredShape.parentPartId && hoveredShape.parentPartId === shape.partId) //add spacers\r\n )\r\n )\r\n return this.findShapesRightAndBelow(snappedShapesWithoutMovingShape, point);\r\n } else {\r\n return this.findShapesRightAndBelow(hoveredShape, point);\r\n }\r\n }\r\n return []\r\n }\r\n\r\n /**\r\n * TODO diagonal\r\n */\r\n calculateNewPosition(hoveredLine, shapeToShift) {\r\n const shapeToShiftMeasurementPoints = sqftShapeManager.getMinMaxShapesPointsOnWorkspace([shapeToShift]);\r\n //console.log(\"shapeToShiftMeasurementPoints\", shapeToShiftMeasurementPoints);\r\n //console.log(\"shapeToShift\", shapeToShift);\r\n\r\n const hoveredLineDirection = getLineDirection(hoveredLine.from, hoveredLine.to);\r\n\r\n let newShapePosition = null;\r\n const hoveredLinePointFromPosOnWorkspace = hoveredLine.from.getPointPosOnWorkspace();\r\n if (isVerticalDirection(hoveredLineDirection)) {\r\n // Check whether it is shape start or end\r\n if (shapeToShiftMeasurementPoints[1].x === hoveredLinePointFromPosOnWorkspace.x) {\r\n newShapePosition = shapeToShiftMeasurementPoints[1];\r\n // Shift shape only if it is first line\r\n } else if (shapeToShiftMeasurementPoints[0].x === hoveredLinePointFromPosOnWorkspace.x) {\r\n newShapePosition = shapeToShiftMeasurementPoints[0];\r\n }\r\n } else if (isHorizontalDirection(hoveredLineDirection)) {\r\n // Check whether it is shape start or end\r\n if (shapeToShiftMeasurementPoints[0].y === hoveredLinePointFromPosOnWorkspace.y) {\r\n newShapePosition = shapeToShiftMeasurementPoints[0];\r\n // Shift shape only if it is first line\r\n } else if (shapeToShiftMeasurementPoints[3].y === hoveredLinePointFromPosOnWorkspace.y) {\r\n newShapePosition = shapeToShiftMeasurementPoints[3];\r\n }\r\n }\r\n\r\n return newShapePosition\r\n }\r\n\r\n /**\r\n *\r\n */\r\n calculatePositionDiffForOtherShapes(hoveredLine) {\r\n let xDiff = 0;\r\n let yDiff = 0;\r\n const thisShapeMeasurementPoints = sqftShapeManager.getMinMaxShapesPointsOnWorkspace([this.__shape]);\r\n const hoveredLineDirection = getLineDirection(hoveredLine.from, hoveredLine.to);\r\n if (isVerticalDirection(hoveredLineDirection)) {\r\n xDiff = getPointDistance(thisShapeMeasurementPoints[0], thisShapeMeasurementPoints[1]);\r\n } else if (isHorizontalDirection(hoveredLineDirection)) {\r\n yDiff = getPointDistance(thisShapeMeasurementPoints[3], thisShapeMeasurementPoints[0]);\r\n }\r\n\r\n return [xDiff, yDiff]\r\n }\r\n\r\n /**\r\n *\r\n */\r\n moveShapesToPositions(shapesToShift, xDiff, yDiff) {\r\n shapesToShift.forEach(shape => {\r\n const shapeCurrentPos = shape.getPosition();\r\n const shapeNewPos = {x: shapeCurrentPos.x + xDiff, y: shapeCurrentPos.y + yDiff};\r\n shape.setPosition(shapeNewPos);\r\n shape.shapeAbsolute.setAbsolutePos(shapeNewPos);\r\n })\r\n }\r\n\r\n /**\r\n * Moves and rotates the shape based on the line's orientation and the current rotation angle.\r\n */\r\n moveShapeToPositionAndRotate(newPosition, hoveredLine) {\r\n // Set the new position\r\n this.__shape.setPosition(newPosition);\r\n this.__shape.shapeAbsolute.setAbsolutePos(newPosition);\r\n\r\n // Determine the required rotation based on the line direction\r\n const hoveredLineDirection = getLineDirection(hoveredLine.from, hoveredLine.to);\r\n\r\n const isHorizontal = isHorizontalDirection(hoveredLineDirection);\r\n const isVertical = isVerticalDirection(hoveredLineDirection);\r\n const hoveredShape = hoveredLine.getParent();\r\n\r\n // Rotate by -90 degrees (right) if the current angle is 90 and the line is vertical\r\n if (hoveredShape.rotatedDegrees === 270 && isHorizontal) {\r\n let desiredAngle = 270;\r\n let normalizedCurrentAngle = ((this.__shape.rotatedDegrees % 360) + 360) % 360;\r\n let angleDifference = desiredAngle - normalizedCurrentAngle;\r\n this.__shape.rotate(angleDifference, this.__shape.Direction.LEFT, false);\r\n //todo\r\n //console.log(\"shape.getPosition()\", this.__shape.getPosition());\r\n //this.moveShapesToPositions([this.__shape], -this.__shape.getWidth(), -this.__shape.getHeight());\r\n //console.log(\"shape.getPosition()\", this.__shape.getPosition());\r\n //debugger // eslint-disable-line no-debugger\r\n }\r\n // Rotate by 90 degrees if the current angle is 0 and the line is horizontal\r\n else if (this.__shape.rotatedDegrees === 0 && isHorizontal) {\r\n this.__shape.rotate(90, this.__shape.Direction.LEFT, false);\r\n }\r\n // Rotate by -90 degrees (right) if the current angle is 90 and the line is vertical\r\n else if (this.__shape.rotatedDegrees === 90 && isVertical) {\r\n this.__shape.rotate(-90, this.__shape.Direction.LEFT, false);\r\n }\r\n\r\n // Calculate the new coordinates for the upper left corner after potential rotation\r\n if (isHorizontalDirection(hoveredLineDirection)) {\r\n // Calculate shift is not needed if the center remains in place\r\n const cos = Math.cos(this.__shape.rotatedDegrees * Math.PI / 180);\r\n const sin = Math.sin(this.__shape.rotatedDegrees * Math.PI / 180);\r\n const originalWidth = this.__shape.getWidth();\r\n const originalHeight = this.__shape.getHeight();\r\n\r\n // Calculate the center coordinates\r\n const centerX = newPosition.x + originalWidth / 2;\r\n const centerY = newPosition.y + originalHeight / 2;\r\n\r\n // Coordinates of the upper left corner after rotation\r\n const upperLeftX = centerX - (originalWidth / 2 * cos + originalHeight / 2 * sin);\r\n const upperLeftY = centerY - (originalWidth / 2 * sin - originalHeight / 2 * cos);\r\n\r\n // Set the new coordinates for the upper left corner\r\n this.__shape.setPosition({\r\n x: upperLeftX,\r\n y: upperLeftY\r\n });\r\n this.__shape.shapeAbsolute.setAbsolutePos({\r\n x: upperLeftX,\r\n y: upperLeftY\r\n });\r\n }\r\n }\r\n\r\n /**\r\n * Function for finding all shapes that are to the right and below a point\r\n * @param {Array} shapes\r\n * @param referencePosition\r\n * @returns {Array}\r\n */\r\n findShapesRightAndBelow(shapes, referencePosition) {\r\n const resultShapes = [];\r\n\r\n shapes.forEach(shape => {\r\n const shapeMeasurementPoints = sqftShapeManager.getMinMaxShapesPointsOnWorkspace([shape]);\r\n const shapeTopLeftPoint = shapeMeasurementPoints[0];\r\n\r\n if (shapeTopLeftPoint.x >= referencePosition.x && shapeTopLeftPoint.y >= referencePosition.y) {\r\n resultShapes.push(shape);\r\n }\r\n });\r\n\r\n return resultShapes;\r\n }\r\n}\r\n","import Polygon from \"../shapes/layouts/polygon\";\r\nimport {IRONING_BOARD_DIRECTION} from \"./cabinetShapes\";\r\n\r\nexport const createIroningBoardShape = (width, height, radius, direction) => {\r\n const points = [];\r\n const steps = 20; // number of points for the arc\r\n\r\n // Straight lines\r\n points.push({ x: 0, y: 0 });\r\n points.push({ x: width, y: 0 });\r\n //points.push({ x: width, y: height});\r\n\r\n if (direction === IRONING_BOARD_DIRECTION.left) {\r\n for (let i = steps; i >= 0; i--) {\r\n const angle = (Math.PI / 2) * (i / steps); // quarter circle\r\n const x = width - radius * Math.cos(angle);\r\n const y = height - radius + radius * Math.sin(angle);\r\n points.push({x, y});\r\n }\r\n }\r\n\r\n if (direction === IRONING_BOARD_DIRECTION.right) {\r\n for (let i = 0; i <= steps; i++) {\r\n const angle = (Math.PI / 2) * (i / steps); // quarter circle\r\n const x = width - radius + radius * Math.cos(angle);\r\n const y = height - radius + radius * Math.sin(angle);\r\n points.push({ x, y });\r\n }\r\n }\r\n\r\n // Straight lines\r\n //points.push({ x: 0, y: height - radius });\r\n\r\n return new Polygon(points, true, true);\r\n};\r\n","import {post} from \"../../../api/api\";\r\n//import {getResponse, handleHttpError} from \"../../../api/api\";\r\n\r\nexport function getUrlBase() {\r\n let {subDomain} = document.kvConfig;\r\n let {domain} = document.kvConfig;\r\n domain = domain || 'quotesflooring.com';\r\n subDomain = subDomain ? subDomain + '.' : '';\r\n\r\n return (location.port === \"9007\" || document.kvConfig.kioskMode) ? `${subDomain}${domain}` : \"\";\r\n}\r\n\r\nexport const sqftPost = async (url, data, options = {}) => {\r\n return post(url, data, options);\r\n //void post;\r\n\r\n // const fullUrl = 'https://quotekitchenandbath.com' + url;\r\n // const isFormData = Object.prototype.toString.call(data) === '[object FormData]';\r\n // const headers = {\r\n // 'Accept': 'application/json'\r\n // };\r\n // if (!isFormData) {\r\n // headers['Content-Type'] = 'application/json';\r\n // }\r\n //\r\n // return fetch(fullUrl, {\r\n // method: 'post',\r\n // body: isFormData ? data : JSON.stringify(data),\r\n // headers: new Headers(headers),\r\n // signal: options.signal,\r\n // })\r\n // .then(handleHttpError)\r\n // .then(response => getResponse(response))\r\n // .catch(reason => {\r\n // if (reason.name === 'AbortError') {\r\n // console.log('Fetch aborted');\r\n // } else {\r\n // return Promise.reject(reason);\r\n // }\r\n // });\r\n};\r\n\r\nexport const fetchDataWithCancellation = (url, key, shouldSaveDataInStore = false) => {\r\n return async () => {\r\n const controller = new AbortController();\r\n const signal = controller.signal;\r\n\r\n store.dispatch({ type: 'REQUEST_STARTED', payload: { key, controller } });\r\n\r\n try {\r\n const response = await fetch(url, { signal });\r\n if (!response.ok) {\r\n throw new Error('Network response was not ok.');\r\n }\r\n\r\n const data = await response.json();\r\n store.dispatch({ type: 'REQUEST_SUCCESS', payload: { key, data: shouldSaveDataInStore ? data : null} });\r\n\r\n return data\r\n } catch (error) {\r\n if (error.name === 'AbortError') {\r\n console.log('Fetch aborted:', key);\r\n } else {\r\n store.dispatch({ type: 'REQUEST_FAILURE', payload: { key, error: error.message } });\r\n }\r\n }\r\n };\r\n};\r\n\r\nexport const cancelFetch = (key) => {\r\n return () => {\r\n const state = store.getState();\r\n const controller = state.sqftState.requests[key];\r\n\r\n if (controller) {\r\n controller.abort();\r\n store.dispatch({ type: 'REQUEST_CANCELLED', payload: { key } });\r\n store.dispatch({ type: 'REMOVE_CONTROLLER', payload: { key } });\r\n }\r\n };\r\n};\r\n","import EventManager from \"../../../store/sqftEventManager\";\r\nimport workspace from \"../../workspace\";\r\nimport config from \"../../../store/sqftConfig\";\r\nimport {getPointField} from \"../../../../../helpers/sqftHelper\";\r\nimport Movable from \"./../mixin/movable\";\r\nimport COLOR_THEMES from \"../../../store/colorThemes\";\r\nimport PointV2, {CORE_POINT_LAYOUTS} from \"../../shapes/pointV2\";\r\nimport RenderFigures from \"../../../helpers/renderFigures\";\r\n\r\nexport default class Box {\r\n\r\n design = {\r\n fillStyle: '#6A6A6A',\r\n fillStyleDelete: 'rgba(208,1,27,0.3)', //'rgba(253,2,33, 0.5)',\r\n strokeStyle: COLOR_THEMES[config.activeTheme].primary,\r\n lineWidth: 1,\r\n borderRadius: 10,\r\n shadowColor: '#eeeeee',\r\n shadowBlur: 15,\r\n minimumHeight: 4,\r\n minimumWidth: 15,\r\n width: 50,\r\n height: 10\r\n };\r\n params = {\r\n isCenteredByY: false\r\n };\r\n points = {};\r\n children = [];\r\n _mixin = {\r\n movable: null\r\n };\r\n\r\n constructor(pos, design) {\r\n this.design = Object.assign(this.design, design);\r\n\r\n this.mixin.movable = new Movable(pos.x, pos.y, this.design.width, this.design.height, EventManager.priorities.SEGMENT, this);\r\n this.initPoints();\r\n this.initEvents();\r\n }\r\n\r\n initEvents() {\r\n EventManager.addEvent(\r\n EventManager.events.RENDER,\r\n this.render.bind(this),\r\n this,\r\n EventManager.priorities.BOX\r\n );\r\n\r\n EventManager.addEvent(\r\n EventManager.events.MOUSE_UP,\r\n this.onMouseUp.bind(this),\r\n this,\r\n EventManager.priorities.SEGMENT\r\n );\r\n }\r\n\r\n delete() {\r\n this.deleteEvents();\r\n workspace.textBoxManager.removeBox(this);\r\n }\r\n\r\n deregisterEvents = () => {\r\n EventManager.removeEvent(this);\r\n if (this.mixin.movable) {\r\n this.mixin.movable.deregisterEvents();\r\n }\r\n for (const point in this.points) {\r\n if (this.points.hasOwnProperty(point)) {\r\n this.points[point].deregisterEvents();\r\n }\r\n }\r\n this.isHidden = true;\r\n }\r\n\r\n reInitEvents = () => {\r\n this.initEvents();\r\n if (this.mixin.movable) {\r\n this.mixin.movable.reInitEvents();\r\n }\r\n for (const point in this.points) {\r\n if (this.points.hasOwnProperty(point)) {\r\n this.points[point].reInitEvents();\r\n }\r\n }\r\n this.isHidden = true;\r\n }\r\n\r\n deleteEvents() {\r\n EventManager.resetCursor(this);\r\n EventManager.removeEvent(this);\r\n EventManager.removeEvent(this.mixin.movable);\r\n\r\n for(let child of this.children) {\r\n child.delete();\r\n }\r\n\r\n for (const point in this.points) {\r\n if (this.points.hasOwnProperty(point)) {\r\n this.points[point].delete();\r\n }\r\n }\r\n }\r\n\r\n get width() {\r\n return this.design.width;\r\n }\r\n\r\n set width(value) {\r\n this.design.width = value;\r\n }\r\n\r\n get height() {\r\n return this.design.height;\r\n }\r\n\r\n set height(value) {\r\n this.design.height = value;\r\n }\r\n\r\n get mixin() {\r\n return this._mixin;\r\n }\r\n\r\n set mixin(value) {\r\n this._mixin = value;\r\n }\r\n\r\n get posX() {\r\n return this.mixin.movable.posX;\r\n }\r\n\r\n get posY() {\r\n return this.mixin.movable.posY;\r\n }\r\n\r\n set posX(value) {\r\n this.mixin.movable.posX = value;\r\n }\r\n\r\n set posY(value) {\r\n this.mixin.movable.posY = value;\r\n }\r\n\r\n initPoints() {\r\n let point;\r\n\r\n // 0 1 2\r\n // 3 4\r\n // 5 6 7\r\n\r\n let pointsParams = [\r\n // {x: 0, y: 0}, // {x: this.posX, y: this.posY},\r\n // {x: this.design.width / 2, y: 0},\r\n // {x: this.design.width, y: 0},\r\n // {x: 0, y: this.design.height / 2},\r\n {id: 'p4', x: this.design.width, y: this.design.height / 2, isCenteredByY: true, isResizedByPoint: true, isScaledByPoint: false, radius: 10, layout: CORE_POINT_LAYOUTS.ear},\r\n // {x: 0, y: this.design.height},\r\n // {x: this.design.width / 2, y: this.design.height},\r\n {id: 'p7', x: this.design.width, y: this.design.height, isCenteredByY: true, isResizedByPoint: false, isScaledByPoint: true, radius: 10, layout: CORE_POINT_LAYOUTS.resize}\r\n ];\r\n for (let [i, pointParams] of pointsParams.entries()) {\r\n void i;\r\n let pointState = {\r\n priority: EventManager.priorities.BOX_POINT,\r\n movable: true,\r\n isCenteredByY: pointParams.isCenteredByY,\r\n isResizedByPoint: pointParams.isResizedByPoint,\r\n isScaledByPoint: pointParams.isScaledByPoint,\r\n isVisibleOnHover: true\r\n };\r\n let pointDesign = {\r\n radius: pointParams.radius,\r\n lineWidth: 1,\r\n layout: pointParams.layout\r\n };\r\n point = new PointV2(pointParams.x, pointParams.y, this, pointState, pointDesign);\r\n point.isResizedByPoint = true;\r\n\r\n this.points[pointParams.id] = point;\r\n }\r\n }\r\n\r\n getOffset = function() {\r\n let self = this;\r\n\r\n return getPointField(self.posX, self.posY);\r\n };\r\n\r\n getPosition = function() {\r\n let self = this;\r\n\r\n return {x: self.posX, y: self.posY};\r\n };\r\n\r\n getPointField = function(posX, posY) {\r\n let fieldWidth = config.fieldWidth,\r\n center = fieldWidth / 2;\r\n\r\n let scale = workspace.getScale(),\r\n offset = workspace.getOffset();\r\n\r\n return {\r\n x: (posX * scale) + offset.x - center,\r\n y: (posY * scale) + offset.y - center\r\n };\r\n };\r\n\r\n onMouseUp = () => {\r\n if (EventManager.getCursor().indexOf(\"delete\") >= 0 && this.mixin.movable.state.hovering) {\r\n this.delete();\r\n }\r\n };\r\n\r\n render = (ctx) => {\r\n let pointField = getPointField(this.posX, this.posY);\r\n let scale = config.scale;\r\n let width = this.mixin.movable.width * scale;\r\n let height = this.mixin.movable.height * scale;\r\n let radius = this.design.borderRadius;\r\n let fill = this.design.fillStyle;\r\n\r\n ctx.save();\r\n ctx.beginPath();\r\n ctx.fillStyle = this.design.fillStyle;\r\n ctx.strokeStyle = this.design.strokeStyle;\r\n ctx.lineWidth = this.design.lineWidth;\r\n //ctx.shadowColor = this.design.shadowColor;\r\n //ctx.shadowBlur = this.design.shadowBlur;\r\n\r\n if(EventManager.getCursor().indexOf(\"delete\") >= 0 && this.mixin.movable.state.hovering) {\r\n ctx.fillStyle = this.design.fillStyleDelete;\r\n }\r\n\r\n //ctx.rect(pointField.x, pointField.y, this.design.width * scale, this.design.height * scale);\r\n //ctx.rect(pointField.x, pointField.y, this.mixin.movable.width * scale, this.mixin.movable.height * scale);\r\n RenderFigures.roundedRect(ctx, pointField.x, pointField.y, width, height, radius, fill, true);\r\n\r\n ctx.stroke();\r\n ctx.fill();\r\n ctx.closePath();\r\n ctx.restore();\r\n };\r\n}\r\n","import EventManager from \"../../../store/sqftEventManager\";\r\nimport workspace from \"../../workspace\";\r\nimport config from \"../../../store/sqftConfig\";\r\nimport ModelText from \"./model/modelText\";\r\nimport {getPointField} from \"../../../../../helpers/sqftHelper\";\r\nimport $ from \"jquery\";\r\nimport {setIsItextEditing} from \"../../../../../../../actions/sqftMenuFunctions\";\r\nimport store from \"../../../../../../../store\";\r\n\r\nexport default class IText {\r\n\r\n _modelText;\r\n _fontHeight = 1;\r\n _hMargin = 11;\r\n wMargin = 14;\r\n fillStyle = '#999999'; // fontColor\r\n fillStyleGray = '#999999';\r\n fillStyleTransparent = \"rgba(255, 255, 255, 0.5)\";\r\n lineHeight = 1.2; //1.286;\r\n placeholder = 'Add text by dbl click';\r\n state = {\r\n active: false\r\n };\r\n\r\n constructor(txt, font, posX, posY, width, height, angle, parent = workspace) {\r\n if(txt === ''){\r\n txt = this.placeholder;\r\n }\r\n this.modelText = new ModelText(txt, font, posX, posY, width, height, angle, parent);\r\n this.initEvents();\r\n if(parent.children) {\r\n parent.children.push(this);\r\n }\r\n }\r\n\r\n get modelText() {\r\n return this._modelText;\r\n }\r\n\r\n set modelText(value) {\r\n this._modelText = value;\r\n }\r\n\r\n get fontHeight() {\r\n return this._fontHeight * config.scale / config.defaultScale + (this.getHeight() / 5); // todo wtf /5 ?\r\n }\r\n\r\n set fontHeight(value) {\r\n this._fontHeight = value;\r\n }\r\n\r\n get hMargin() {\r\n // todo perhaps make borders smaller\r\n // return this._hMargin * config.scale / config.defaultScale;\r\n return this._hMargin;\r\n }\r\n\r\n set hMargin(value) {\r\n this._hMargin = value;\r\n }\r\n\r\n initEvents() {\r\n EventManager.addEvent(\r\n EventManager.events.RENDER,\r\n this.render.bind(this),\r\n this,\r\n EventManager.priorities.BOX\r\n );\r\n\r\n EventManager.addEvent(\r\n EventManager.events.DBLCLICK,\r\n this.onDblClick.bind(this),\r\n this,\r\n EventManager.priorities.IMAGE\r\n );\r\n\r\n //todo remove deleting from menu here\r\n // EventManager.addEvent(\r\n // EventManager.events.MOUSE_UP,\r\n // this.onMouseUp.bind(this),\r\n // this,\r\n // EventManager.priorities.BOX\r\n // );\r\n }\r\n\r\n delete() {\r\n this.deleteEvents();\r\n }\r\n\r\n deleteEvents() {\r\n EventManager.removeEvent(this);\r\n }\r\n\r\n deregisterEvents = () => {\r\n EventManager.removeEvent(this);\r\n this.isHidden = true;\r\n }\r\n\r\n reInitEvents = () => {\r\n this.initEvents();\r\n this.isHidden = false;\r\n }\r\n\r\n getWidth() {\r\n let scale = config.scale;\r\n let parentWidth = this.modelText.parent.width * scale;\r\n\r\n return parentWidth ? parentWidth: this.modelText.width * scale ;\r\n }\r\n\r\n getHeight() {\r\n let scale = config.scale;\r\n let parentHeight = this.modelText.parent.height * scale;\r\n\r\n return parentHeight ? parentHeight : this.modelText.height * scale ;\r\n }\r\n\r\n getPosX() {\r\n return this.modelText.parent.posX ? this.modelText.parent.posX : this.modelText.posX;\r\n }\r\n\r\n getPosY() {\r\n return this.modelText.parent.posY ? this.modelText.parent.posY : this.modelText.posY;\r\n }\r\n\r\n onDblClick(mousePos) {\r\n void mousePos;\r\n let self = this;\r\n let state = this.modelText.parent\r\n ? this.modelText.parent.mixin.movable.state\r\n : this.modelText.state; //todo\r\n\r\n if (state.hovering && !document.querySelector(\".i-text\")) {\r\n window.lineInputFocused = true;\r\n EventManager.stealCursor();\r\n const ENTER_KEY = 13;\r\n const textarea = this.createTextArea();\r\n\r\n document.querySelector(\".sqft-main-grid\").appendChild(textarea);\r\n\r\n textarea.focus();\r\n textarea.onkeydown = function(e) {\r\n if (e.keyCode === ENTER_KEY) {\r\n e.target.blur();\r\n }\r\n };\r\n\r\n const blur = function (e) {\r\n if (!e.target.closest('.i-text')) {\r\n textarea.blur();\r\n }\r\n };\r\n\r\n textarea.oninput = function() {\r\n this.style.height = \"5px\";\r\n this.style.height = (this.scrollHeight)+\"px\";\r\n };\r\n\r\n textarea.onblur = function () {\r\n window.lineInputFocused = false;\r\n self.modelText.txt = textarea.value;\r\n // restore placeholder\r\n if (textarea.value === '') {\r\n self.modelText.txt = self.placeholder;\r\n }\r\n self.fillStyle = self.fillStyleGray; // return color back to gray\r\n textarea.parentNode.removeChild(textarea);\r\n document.removeEventListener(\"click\", blur);\r\n store.dispatch(setIsItextEditing(false));\r\n };\r\n\r\n this.fillStyle = this.fillStyleTransparent; // make color transparent\r\n\r\n $(textarea).on(\"change keyup paste\", function() {\r\n self.modelText.txt = $(this).val();\r\n });\r\n textarea.onchange = function (event) {\r\n void event;\r\n self.modelText.txt = textarea.value;\r\n }.bind({ hoveredText: state.hoveredText});\r\n\r\n setTimeout(() => {\r\n document.addEventListener(\"click\", blur);\r\n }, 500);\r\n store.dispatch(setIsItextEditing(true));\r\n return false;\r\n }\r\n }\r\n\r\n wrapText(ctx, text, x, y, maxWidth, fontSize, fontFace) {\r\n let firstY = y;\r\n let lineHeight = fontSize * this.lineHeight;\r\n\r\n ctx.font = fontSize + \"px \" + fontFace; // Set the font for the context\r\n\r\n // Split the text into lines using wrapWord (handles word wrapping and ellipsis)\r\n let lines = this.wrapWords(ctx, text, maxWidth, 1);\r\n\r\n // Loop through each line and draw it on the canvas\r\n for (let line of lines) {\r\n ctx.fillText(line, x, y);\r\n y += lineHeight;\r\n }\r\n\r\n let scale = workspace.getScale();\r\n\r\n // Adjust the parent box height based on the new text block height\r\n this.modelText.parent.mixin.movable.height = (y - firstY) / scale + (lineHeight + this.hMargin * 2) / scale;\r\n\r\n // Adjust point positions based on the new height\r\n this.modelText.parent.points.p4.modelCorePoint.mixins.movable.posY = this.modelText.parent.mixin.movable.height / 2;\r\n this.modelText.parent.points.p7.modelCorePoint.mixins.movable.posY = this.modelText.parent.mixin.movable.height;\r\n }\r\n\r\n\r\n // onMouseUp = () => {\r\n // if (EventManager.getCursor().indexOf(\"delete\") >= 0 && this.modelText.parent.mixin.movable.state.hovering) {\r\n // this.delete();\r\n // }\r\n // };\r\n\r\n render(ctx) {\r\n //let angle = this.modelText.angle || 0;\r\n\r\n let fontHeight = this.fontHeight;\r\n let pointField = getPointField(this.modelText.posX, this.modelText.posY, this.modelText.parent);\r\n // let pointField = getPointField(this.getPosX(), this.getPosY(), this.modelText.parent);\r\n\r\n //let txtWidth = ctx.measureText(this.modelText.txt).width + 2 * this.hMargin;\r\n //let scale = config.scale;\r\n let width = this.getWidth();\r\n //let height = this.getHeight();\r\n\r\n ctx.save();\r\n ctx.font = fontHeight + 'px ' + this.modelText.font;\r\n ctx.textAlign = 'left';\r\n ctx.textBaseline = 'top';\r\n ctx.fillStyle = this.fillStyle;\r\n\r\n //TODO remove\r\n //ctx.translate(pointField.x, pointField.y);\r\n //ctx.translate(pointField.x + width / 2, pointField.y); //centering for scale\r\n //ctx.rotate(angle); // text rotation\r\n //ctx.lineWidth = 1;\r\n //ctx.strokeRect(-width / 2, 0, width, height); //rect around text\r\n //ctx.scale(width / txtWidth, height / fontHeight); // text scale\r\n //ctx.translate(this.hMargin, 0);\r\n //ctx.fillText(this.modelText.txt, -txtWidth/2, 0, width / 2);\r\n // this.wrapText(ctx, this.modelText.txt, -txtWidth/2, 0, width, this.fontHeight, this.modelText.font);\r\n //ctx.fillText(this.modelText.txt, pointField.x, pointField.y);\r\n this.wrapText(\r\n ctx,\r\n this.modelText.txt,\r\n pointField.x + this.wMargin,\r\n pointField.y + this.hMargin,\r\n width - this.wMargin,\r\n this.fontHeight,\r\n this.modelText.font\r\n );\r\n\r\n ctx.restore();\r\n }\r\n\r\n createTextArea() {\r\n let textarea = document.createElement(\"textarea\");\r\n let pointField = getPointField(this.modelText.posX, this.modelText.posY, this.modelText.parent);\r\n let scale = workspace.getScale();\r\n\r\n textarea.className = \"i-text\";\r\n textarea.style.left = pointField.x + this.wMargin + \"px\";\r\n textarea.style.top = pointField.y + this.hMargin + \"px\"; // todo -2 hook for first line\r\n textarea.style.width = this.getWidth() - this.wMargin + \"px\";\r\n // textarea.style.height = this.getHeight() + \"px\";\r\n textarea.style.height = this.modelText.parent.mixin.movable.height * scale + \"px\";\r\n textarea.style.fontSize = this.fontHeight + \"px\";\r\n textarea.style.lineHeight = this.fontHeight * this.lineHeight + 0.8 + \"px\"; // 2 hook for first line\r\n textarea.style.fontFamily = this.modelText.font;\r\n textarea.style.color = this.fillStyle;\r\n if (this.modelText.txt === this.placeholder) {\r\n textarea.value = '';\r\n } else {\r\n textarea.value = this.modelText.txt;\r\n }\r\n return textarea\r\n }\r\n\r\n /**\r\n * Split the text into lines using wrapWord (handles word wrapping and ellipsis)\r\n * @param ctx\r\n * @param testLine\r\n * @param maxWidth\r\n * @param spaces\r\n * @return {[]}\r\n */\r\n wrapWords(ctx, testLine, maxWidth, spaces) {\r\n let i = 0;\r\n let lines = [];\r\n let currentLine = '';\r\n const ellipsis = '...';\r\n\r\n // Split the text into individual words\r\n const words = testLine.split(' ');\r\n\r\n // Iterate through the words and add them to lines while checking for width\r\n for (let word of words) {\r\n let testLine = currentLine + word + ' ';\r\n let testWidth = ctx.measureText(testLine).width;\r\n\r\n // If adding the word exceeds maxWidth, move it to the next line\r\n if (testWidth > maxWidth) {\r\n // If the word itself is too long, truncate it and add ellipsis\r\n if (ctx.measureText(word).width > maxWidth) {\r\n while (ctx.measureText(word).width > maxWidth && i < word.length) {\r\n if (ctx.measureText(word.slice(0, i + spaces) + ellipsis).width >= maxWidth) {\r\n lines.push(word.slice(0, i) + ellipsis);\r\n return lines;\r\n }\r\n i++;\r\n }\r\n }\r\n // Push the current line and start a new line with the current word\r\n lines.push(currentLine.trim());\r\n currentLine = word + ' ';\r\n } else {\r\n currentLine = testLine; // Add the word to the current line\r\n }\r\n }\r\n\r\n // Add the last line to the lines array\r\n if (currentLine.length > 0) {\r\n lines.push(currentLine.trim());\r\n }\r\n\r\n return lines;\r\n }\r\n}\r\n","export default class ModelText {\r\n _txt;\r\n _font;\r\n _posX;\r\n _posY;\r\n _width;\r\n _height;\r\n _angle;\r\n _parent;\r\n\r\n constructor(txt, font, posX, posY, width, height, angle, parent) {\r\n this._txt = txt;\r\n this._font = font;\r\n this._posX = posX;\r\n this._posY = posY;\r\n this._width = width;\r\n this._height = height;\r\n this._angle = angle;\r\n this._parent = parent;\r\n }\r\n\r\n get txt() {\r\n return this._txt;\r\n }\r\n\r\n set txt(value) {\r\n this._txt = value;\r\n }\r\n\r\n get font() {\r\n return this._font;\r\n }\r\n\r\n set font(value) {\r\n this._font = value;\r\n }\r\n\r\n get posX() {\r\n return this._posX;\r\n }\r\n\r\n set posX(value) {\r\n this._posX = value;\r\n }\r\n\r\n get posY() {\r\n return this._posY;\r\n }\r\n\r\n set posY(value) {\r\n this._posY = value;\r\n }\r\n\r\n get width() {\r\n return this._width;\r\n }\r\n\r\n set width(value) {\r\n this._width = value;\r\n }\r\n\r\n get height() {\r\n return this._height;\r\n }\r\n\r\n set height(value) {\r\n this._height = value;\r\n }\r\n\r\n get angle() {\r\n return this._angle;\r\n }\r\n\r\n set angle(value) {\r\n this._angle = value;\r\n }\r\n\r\n get parent() {\r\n return this._parent;\r\n }\r\n\r\n set parent(value) {\r\n this._parent = value;\r\n }\r\n\r\n}\r\n","/**\r\n * @param e KeyboardEvent\r\n */\r\nexport const isBackspaceKeyCode = (e) => {\r\n return e.keyCode === 8\r\n}\r\n\r\n/**\r\n * @param e KeyboardEvent\r\n */\r\nexport const isDeleteKeyCode = (e) => {\r\n return e.keyCode === 46\r\n}\r\n\r\n/**\r\n * @param e KeyboardEvent\r\n */\r\nexport const isLengthKeyCode = (e) => {\r\n return isNumericKey(e) || isCommaKey(e) || isPeriodKey(e) || isSpace(e) || isSlash(e) || e.key === \"'\" || e.key === \"\\\"\"\r\n}\r\n\r\n/**\r\n * @param e KeyboardEvent\r\n */\r\nexport const isNumericKey = (e) => {\r\n return (e.keyCode >= 48 && e.keyCode <= 57) || (e.keyCode >= 96 && e.keyCode <= 105)\r\n}\r\n\r\n/**\r\n * is \",\"\r\n * @param e KeyboardEvent\r\n */\r\nexport const isCommaKey = (e) => {\r\n return e.keyCode === 188\r\n}\r\n\r\n/**\r\n * is \".\"\r\n * @param e KeyboardEvent\r\n */\r\nexport const isPeriodKey = (e) => {\r\n return e.keyCode === 190\r\n}\r\n\r\n/**\r\n * is \" \"\r\n * @param e KeyboardEvent\r\n */\r\nexport const isSpace = (e) => {\r\n return e.keyCode === 32\r\n}\r\n\r\n/**\r\n * is \"/\"\r\n * @param e KeyboardEvent\r\n */\r\nexport const isSlash = (e) => {\r\n return e.keyCode === 191\r\n}\r\n","import uuid from \"uuid\";\r\nimport workspace from \"../workspace\";\r\nimport {attachResource} from \"./resourseCanas\";\r\nimport store from \"../../../../../../store\";\r\nimport {addSqftCroppedSlabImage} from \"../../../../../../actions/sqftSlabFunctions\";\r\nimport {MOVABLE_IMAGE_TYPES, SHAPE_PART_ID} from \"../../../../constants\";\r\nimport {initTitle} from \"./labels/labelsHelper\";\r\nimport {SLAB_IMAGE_TYPES} from \"../../../../../../reducers/sqftSlabReducer\";\r\n\r\nconst Duplicate = function () {\r\n this.cloneShape = (shape) => {\r\n let shapeData = shape.export();\r\n const workspaceIds = workspace.getObjIds();\r\n const newId = workspaceIds + 1;\r\n const currentShapePosition = shape.getPosition();\r\n\r\n const newShape = workspace.importShape(shapeData);\r\n newShape.setPosition({\r\n x: currentShapePosition.x + 10,\r\n y: currentShapePosition.y + 10,\r\n });\r\n newShape.shapeSlab.__absolutePos = null;\r\n newShape.shapePieces = [];\r\n newShape.setId(newId);\r\n workspace.setObjIds(newId);\r\n this.cloneShapeLines(newShape);\r\n if (newShape.partId === SHAPE_PART_ID.slabPlaceHolder) {\r\n newShape.init({\r\n x: currentShapePosition.x + 10,\r\n y: currentShapePosition.y + 10,\r\n });\r\n initTitle('PLACEHOLDER', SLAB_IMAGE_TYPES.placeholder, newShape);\r\n }\r\n }\r\n this.cloneShapeLines = (shape) => {\r\n const lines = shape.getLines();\r\n for (const line of lines) {\r\n this.cloneShapeLine(line);\r\n }\r\n }\r\n this.cloneShapeLine = (line) => {\r\n const attachedResource = workspace.getAttachedTo(line);\r\n line.id = uuid();\r\n line.from.id = uuid();\r\n if (attachedResource) {\r\n line.isDisabledInPopup = attachedResource.isDisabledInPopup;\r\n attachResource(line, null, attachedResource.type, attachedResource.featureId, null, attachedResource.name, attachedResource.height, uuid());\r\n }\r\n }\r\n\r\n this.cloneMovableImage = (shape) => {\r\n let imageData = shape.export();\r\n const workspaceIds = workspace.getObjIds();\r\n const newId = workspaceIds + 1;\r\n const currentMovableImagePosition = shape.getPosition();\r\n const movableImage = workspace.importImage(imageData);\r\n movableImage.setPosition({\r\n x: currentMovableImagePosition.x + 10,\r\n y: currentMovableImagePosition.y + 10,\r\n });\r\n movableImage.setId(newId);\r\n workspace.setObjIds(newId);\r\n\r\n if (movableImage.type === MOVABLE_IMAGE_TYPES.slabImage) {\r\n store.dispatch(addSqftCroppedSlabImage(movableImage));\r\n }\r\n }\r\n}\r\n\r\nexport default new Duplicate()\r\n","import EventManager from \"../../store/sqftEventManager\";\r\nimport workspace from \"../workspace\";\r\nimport config from \"../../store/sqftConfig\";\r\n\r\nexport default new function() {\r\n var self = this;\r\n const fontColor = \"#999999\";\r\n\r\n this.init = function() {\r\n EventManager.addEvent(\r\n EventManager.events.RENDER,\r\n self.render,\r\n self,\r\n EventManager.priorities.OVERLAY - 1\r\n );\r\n };\r\n this.render = function(ctx) {\r\n let i, text, width, posText,\r\n canvas = workspace.getCanvas(),\r\n canvasWidth = canvas.width,\r\n canvasHeight = canvas.height,\r\n scale = config.scale,\r\n gridSize = config.workspace.gridSize * scale,\r\n adjustedSize = (gridSize / 3),\r\n rulerSize = adjustedSize + 6,\r\n pos = workspace.getPosition(),\r\n start = {\r\n x: (pos.x % gridSize) * -1,\r\n y: (pos.y % gridSize) * -1\r\n };\r\n while(start.y < rulerSize || start.y < 0) {\r\n start.y += gridSize;\r\n }\r\n while(start.x < rulerSize || start.x < 0) {\r\n start.x += gridSize;\r\n }\r\n //render ruler\r\n ctx.clearRect(0, 0, canvasWidth, rulerSize);\r\n ctx.clearRect(0, 0, rulerSize, canvasHeight);\r\n //horizontal ruler\r\n ctx.font = adjustedSize.toString() + \"px sans-serif\";\r\n ctx.fillStyle = fontColor;\r\n for(i = start.x; i < canvasWidth; i+=gridSize) {\r\n text = getText(pos.x + i);\r\n width = ctx.measureText(text).width;\r\n posText = {\r\n x: i - (width / 2),\r\n y: adjustedSize,\r\n width: width,\r\n height: adjustedSize,\r\n text: text\r\n };\r\n ctx.fillText(posText.text, posText.x, posText.y);\r\n }\r\n //vertical ruler\r\n for(i = start.y; i < canvasHeight; i+=gridSize) {\r\n text = Math.round((pos.y + i) / scale).toString();\r\n width = ctx.measureText(text).width;\r\n posText = {\r\n x: adjustedSize,\r\n y: i,\r\n width: width,\r\n height: adjustedSize,\r\n text: text\r\n };\r\n ctx.save();\r\n ctx.translate(posText.x, posText.y);\r\n ctx.rotate(-Math.PI/2);\r\n ctx.textAlign = \"center\";\r\n ctx.fillText(posText.text, 0, 0);\r\n ctx.restore();\r\n }\r\n\r\n ctx.beginPath();\r\n ctx.lineWidth = 1;\r\n ctx.strokeStyle = fontColor;\r\n ctx.moveTo(0,rulerSize);\r\n ctx.lineTo(canvasWidth, rulerSize);\r\n ctx.stroke();\r\n\r\n ctx.beginPath();\r\n ctx.lineWidth = 1;\r\n ctx.moveTo(rulerSize, 0);\r\n ctx.lineTo(rulerSize, canvasHeight);\r\n ctx.stroke();\r\n\r\n };\r\n function getText(pos) {\r\n let text = Math.round((pos) / config.scale * config.getMeasureMultiplier());\r\n if(config.measureUnit === \"Metric\") {\r\n text = Math.round(text / 100) * 100;\r\n }\r\n\r\n return text.toString();\r\n }\r\n};\r\n","import config from \"../../store/sqftConfig\";\r\nimport {enableRegularMode, enableSlabMode} from \"../../store/canvasHelper\";\r\nimport store from \"../../../../../../store\";\r\nimport SqftStore from \"../../store/sqftStore\";\r\nimport {showSlabTool} from \"../../../../../../actions/sqftSlabFunctions\";\r\nimport SlabWorkspace from \"../slab/slabWorkspace\";\r\nimport {renderSlabRightPart} from \"../slab/sqftSlabDraw\";\r\nimport sqftEventManager from \"../../store/sqftEventManager\";\r\nimport sqftImageManager from \"../../store/sqftImageManager\";\r\nimport sqftShapeManager from \"../../store/sqftShapeManager\";\r\nimport workspace from \"../workspace\";\r\nimport {MOVABLE_IMAGE_TYPES, SHAPE_PART_ID} from \"../../../../constants\";\r\n\r\nexport default class ResultImages {\r\n workspace;\r\n dimensionsMultiplier = 3;\r\n\r\n constructor(workspace) {\r\n this.workspace = workspace;\r\n }\r\n\r\n getCanvasImageScaled = () => {\r\n const isSlabMode = SqftStore.isSlabMode();\r\n let shouldReturnToSlabMode = false;\r\n if (isSlabMode) {\r\n enableRegularMode();\r\n store.dispatch(showSlabTool(false));\r\n shouldReturnToSlabMode = true;\r\n }\r\n\r\n const pointsMinMax = sqftShapeManager.getMinMaxShapesPointsOnWorkspace(this.workspace.getShapes());\r\n\r\n if (pointsMinMax.length > 0) {\r\n const minX = pointsMinMax[0].x;\r\n const minY = pointsMinMax[0].y;\r\n const maxX = pointsMinMax[2].x;\r\n const maxY = pointsMinMax[2].y;\r\n\r\n const offset = 200;\r\n const startPoint = {\r\n x: minX * config.defaultScaleExport - offset,\r\n y: minY * config.defaultScaleExport - offset\r\n }\r\n const clippingWidth = (maxX - minX) * config.defaultScaleExport + offset * 2;\r\n const clippingHeight = (maxY - minY) * config.defaultScaleExport + offset * 2;\r\n\r\n const resultImage = this.getCanvasScreen(\r\n config.defaultScaleExport,\r\n 0,\r\n 0,\r\n clippingWidth,\r\n clippingHeight,\r\n startPoint,\r\n this.updateCanvasAtStartPoint\r\n );\r\n\r\n //todo not needed to change back\r\n void shouldReturnToSlabMode\r\n // if (shouldReturnToSlabMode) {\r\n // enableSlabMode();\r\n // store.dispatch(showSlabTool(true));\r\n // }\r\n\r\n return resultImage;\r\n }\r\n\r\n return \"\"\r\n };\r\n\r\n getSlabResultImage = () => {\r\n const isSlabMode = SqftStore.isSlabMode();\r\n let shouldReturnToRegularMode = false;\r\n if (!isSlabMode) {\r\n enableSlabMode();\r\n store.dispatch(showSlabTool(true));\r\n shouldReturnToRegularMode = true\r\n }\r\n\r\n //1. Lets get only countertop shapes\r\n const shapesWithoutSlabImages = this.workspace.getShapesWithoutAttachedResources().filter(shp => {\r\n return shp.partId !== SHAPE_PART_ID.slabPlaceHolder\r\n && shp.type !== MOVABLE_IMAGE_TYPES.slabImage\r\n });\r\n\r\n //2. Now get minimum point\r\n const pointsMinMaxRegular = sqftShapeManager.getMinMaxShapesPointsOnWorkspace(shapesWithoutSlabImages, true);\r\n\r\n if (pointsMinMaxRegular.length > 0) {\r\n const minX = pointsMinMaxRegular[0].x;\r\n const minY = pointsMinMaxRegular[0].y;\r\n const maxX = pointsMinMaxRegular[2].x;\r\n const maxY = pointsMinMaxRegular[2].y;\r\n\r\n const workspacePos = workspace.getPosition();\r\n const offset = 200;\r\n\r\n //3. This is minimum point on field\r\n let startPoint = {\r\n x: (minX) * config.defaultScaleExport - offset - workspacePos.x,\r\n y: (minY) * config.defaultScaleExport - offset - workspacePos.y\r\n }\r\n\r\n //4.Canvas width\r\n const clippingWidth = (maxX - minX) * config.defaultScaleExport + offset * 2;\r\n const clippingHeight = (maxY - minY) * config.defaultScaleExport + offset * 2;\r\n\r\n //5.Lets distract canvas width (see renderSlabRightPart staticOffset)\r\n startPoint = {\r\n x: startPoint.x + clippingWidth / 2,\r\n y: startPoint.y\r\n }\r\n\r\n const resultImage = this.getCanvasScreen(\r\n config.defaultScaleExport,\r\n 0,\r\n 0,\r\n clippingWidth,\r\n clippingHeight,\r\n startPoint,\r\n this.updateCanvasSlab\r\n );\r\n\r\n if (shouldReturnToRegularMode) {\r\n enableRegularMode();\r\n store.dispatch(showSlabTool(false));\r\n }\r\n\r\n return resultImage\r\n }\r\n\r\n return \"\"\r\n };\r\n\r\n getSlabCalcImage = () => {\r\n const isSlabMode = SqftStore.isSlabMode();\r\n let shouldReturnToRegularMode = false;\r\n if (!isSlabMode) {\r\n enableSlabMode();\r\n store.dispatch(showSlabTool(true));\r\n shouldReturnToRegularMode = true\r\n }\r\n SlabWorkspace.disableSlabImages();\r\n\r\n const pointsMinMax = sqftShapeManager.getMinMaxShapesPointsOnWorkspace(this.workspace.getShapes());\r\n\r\n if (pointsMinMax.length > 0) {\r\n const minX = pointsMinMax[0].x;\r\n const minY = pointsMinMax[0].y;\r\n const maxX = pointsMinMax[2].x;\r\n const maxY = pointsMinMax[2].y;\r\n\r\n const offset = 200;\r\n const startPoint = {\r\n x: (minX) * config.defaultScaleExport - offset,\r\n y: (minY) * config.defaultScaleExport - offset\r\n }\r\n const clippingWidth = (maxX - minX) * config.defaultScaleExport + offset * 2;\r\n const clippingHeight = (maxY - minY) * config.defaultScaleExport + offset * 2;\r\n\r\n const resultImage = this.getCanvasScreen(\r\n config.defaultScaleExport,\r\n 0,\r\n 0,\r\n clippingWidth,\r\n clippingHeight,\r\n startPoint,\r\n this.updateCanvasAtStartPoint\r\n );\r\n\r\n if (shouldReturnToRegularMode) {\r\n enableRegularMode();\r\n store.dispatch(showSlabTool(false));\r\n }\r\n // else {\r\n // SlabWorkspace.init();\r\n // }\r\n\r\n return resultImage\r\n }\r\n\r\n return \"\"\r\n }\r\n\r\n /**\r\n * Will return array of zoomed shape + AppliancesThatShouldRenderMeasurementsInsideTheShape images. One image per shape\r\n * @return {*}\r\n */\r\n getCanvasApplianceImages = () => {\r\n const applianceImages = sqftImageManager.getAppliancesThatShouldRenderMeasurementsInsideTheShape();\r\n const createdImagesForShapes = new Set();\r\n\r\n return applianceImages.reduce((result, applianceImage) => {\r\n const outerShape = applianceImage.getOuterShape();\r\n if (outerShape) {\r\n\r\n if (createdImagesForShapes.has(outerShape.id)) {\r\n return result;\r\n }\r\n\r\n createdImagesForShapes.add(outerShape.id);\r\n\r\n const outerShapePosition = outerShape.getPosition();\r\n let shapesPoints = outerShape.getPoints();\r\n let pointsMinMax = sqftShapeManager.getMinMaxPoints(shapesPoints, false);\r\n\r\n const offset = 200;\r\n const startPoint = {\r\n x: (outerShapePosition.x + pointsMinMax.minX) * config.defaultScaleExport - offset,\r\n y: (outerShapePosition.y + pointsMinMax.minY) * config.defaultScaleExport - offset\r\n };\r\n const clippingWidth = (pointsMinMax.maxX - pointsMinMax.minX) * config.defaultScaleExport + offset * 2;\r\n const clippingHeight = (pointsMinMax.maxY - pointsMinMax.minY) * config.defaultScaleExport + offset * 2;\r\n\r\n const canvasImage = this.getCanvasImage(config.defaultScaleExport,\r\n startPoint,\r\n clippingWidth,\r\n clippingHeight\r\n );\r\n result.push(canvasImage);\r\n }\r\n return result;\r\n }, []);\r\n };\r\n\r\n getCanvasImage = (newScale = config.defaultScaleExport, startPoint, imageWidth, imageHeight) => {\r\n const isSlabMode = SqftStore.isSlabMode();\r\n if (isSlabMode) {\r\n enableRegularMode();\r\n store.dispatch(showSlabTool(false));\r\n }\r\n\r\n return this.getCanvasScreen(\r\n newScale,\r\n 0,\r\n 0,\r\n imageWidth,\r\n imageHeight,\r\n startPoint,\r\n this.updateCanvasAtStartPoint\r\n );\r\n };\r\n\r\n getCanvasScreen = (newScale, startClippingX, startClippingY, clippingWidth, clippingHeight, centerPoint, updateCallback) => {\r\n // fix transparent background by drawing canvas onto another canvas with a white background\r\n // https://stackoverflow.com/questions/18609715/html5-canvas-todataurl-image-has-no-background-color\r\n\r\n const srcCanvas = this.workspace.getCanvas();\r\n const temp = {\r\n scale: config.scale,\r\n width: srcCanvas.width,\r\n height: srcCanvas.height,\r\n };\r\n updateCallback(srcCanvas, newScale, clippingWidth, clippingHeight, centerPoint);\r\n\r\n //create a dummy CANVAS\r\n const destinationCanvas = document.createElement(\"canvas\");\r\n const destCtx = destinationCanvas.getContext('2d');\r\n destinationCanvas.width = srcCanvas.width ;\r\n destinationCanvas.height = srcCanvas.height ;\r\n\r\n //create a rectangle with the desired color\r\n destCtx.fillStyle = \"#FFFFFF\";\r\n destCtx.fillRect(0,0, destinationCanvas.width, destinationCanvas.height);\r\n\r\n //draw the original canvas onto the destination canvas\r\n if (clippingWidth > srcCanvas.width) clippingWidth = srcCanvas.width;\r\n if (clippingHeight > srcCanvas.height) clippingHeight = srcCanvas.height;\r\n\r\n destCtx.drawImage(\r\n srcCanvas,\r\n startClippingX,\r\n startClippingY,\r\n clippingWidth,\r\n clippingHeight,\r\n 0,\r\n 0,\r\n srcCanvas.width,\r\n srcCanvas.height\r\n );\r\n\r\n //restore canvas\r\n updateCallback(srcCanvas, temp.scale, temp.width, temp.height, centerPoint);\r\n\r\n return destinationCanvas.toDataURL();\r\n }\r\n\r\n updateCanvas = (srcCanvas, scale, width, height, centerPoint) => {\r\n srcCanvas.width = width;\r\n srcCanvas.height = height;\r\n config.scale = scale;\r\n this.workspace.setCenter(centerPoint.width, centerPoint.height); // return canvas to default position\r\n sqftEventManager.trigger(sqftEventManager.events.RENDER);\r\n sqftEventManager.trigger(sqftEventManager.events.RENDER);\r\n }\r\n\r\n updateCanvasAtStartPoint = (srcCanvas, scale, width, height, startPoint) => {\r\n srcCanvas.width = width;\r\n srcCanvas.height = height;\r\n config.scale = scale;\r\n this.workspace.setPosition(startPoint); // return canvas to default position\r\n\r\n sqftEventManager.trigger(sqftEventManager.events.RENDER);\r\n sqftEventManager.trigger(sqftEventManager.events.RENDER);\r\n }\r\n\r\n updateCanvasSlab = (srcCanvas, scale, width, height, centerPoint) => {\r\n srcCanvas.width = width;\r\n srcCanvas.height = height;\r\n config.scale = scale;\r\n //this.workspace.setCenter(centerPoint.width, centerPoint.height); // return canvas to default position\r\n //this.workspace.setPosition({x: 0, y: 0}); // return canvas to default position NOTE setPosition will also update SlabWorkspace position\r\n SlabWorkspace.setPos(centerPoint); // return canvas to default position\r\n renderSlabRightPart(sqftEventManager.getCtx(), true);\r\n }\r\n}\r\n","import store from \"../../../../../../store\";\r\nimport {getCurrentLayout} from \"../../../../../appLayout\";\r\nimport {ALLOWED_LABEL_NAV_ITEMS, BACKSPLASH_LABELS, COUNTERTOP_LABELS, EDGE_LABELS} from \"../../../../constants\";\r\nimport {IS_LIXIL_UI} from \"../../../../../../config\";\r\nimport {SHAPE_HARDCODED_PART_IDS} from \"../../../../constantsFeature\";\r\n\r\n/**\r\n * is used for category switching available partIds\r\n * @param {string} partId default part id used for shape type\r\n * @return {string} final partId\r\n */\r\nexport const checkShapeForAvailablePartId = (partId) => {\r\n const {fabricatorState, qtState, sqftState, wizardState} = store.getState();\r\n const layout = getCurrentLayout();\r\n const wizardIsActive = wizardState.wizardIsActive;\r\n\r\n if (SHAPE_HARDCODED_PART_IDS.includes(partId)) {\r\n return partId\r\n }\r\n\r\n if (IS_LIXIL_UI || !layout.qtCategories && document.kvConfig.visualizerType === \"Fireplace\") {\r\n // lixil-1) if we opened feature from QuotingTool - try to assign this partId\r\n if (sqftState.sqftFromFeature && sqftState.sqftFromFeature.cartFeature\r\n && !Object.keys(BACKSPLASH_LABELS).includes(sqftState.sqftFromFeature.cartFeature.partId)\r\n && !Object.keys(EDGE_LABELS).includes(sqftState.sqftFromFeature.cartFeature.partId)\r\n && Object.keys(ALLOWED_LABEL_NAV_ITEMS).includes(sqftState.sqftFromFeature.cartFeature.partId)\r\n ) {\r\n return sqftState.sqftFromFeature.cartFeature.partId\r\n }\r\n }\r\n\r\n if (wizardIsActive) {\r\n if (sqftState.sqftFromFeature && sqftState.sqftFromFeature.cartFeature\r\n && Object.keys(COUNTERTOP_LABELS).includes(sqftState.sqftFromFeature.cartFeature.partId)\r\n ) {\r\n return sqftState.sqftFromFeature.cartFeature.partId\r\n }\r\n return partId\r\n }\r\n\r\n if ((!fabricatorState.settings.useCategorySwitching || !layout.qtCategories || !qtState.qtActiveCategory)) {\r\n return partId\r\n }\r\n\r\n const currentCategory = layout.qtCategories.find(qtCat => qtCat.name === qtState.qtActiveCategory);\r\n if (!currentCategory || !currentCategory.subParts) {\r\n return partId\r\n }\r\n\r\n // 1) if we opened feature from QuotingTool - try to assign this partId\r\n if (sqftState.sqftFromFeature && sqftState.sqftFromFeature.cartFeature\r\n && currentCategory.subParts.some(subPart => subPart.part.partId === sqftState.sqftFromFeature.cartFeature.partId)\r\n && !Object.keys(BACKSPLASH_LABELS).includes(sqftState.sqftFromFeature.cartFeature.partId)\r\n && !Object.keys(EDGE_LABELS).includes(sqftState.sqftFromFeature.cartFeature.partId)\r\n && Object.keys(ALLOWED_LABEL_NAV_ITEMS).includes(sqftState.sqftFromFeature.cartFeature.partId)\r\n ) {\r\n return sqftState.sqftFromFeature.cartFeature.partId\r\n }\r\n\r\n // 2) check for center island feature group\r\n const isCountertop = partId === \"countertop\" || partId === \"center_island_countertop\";\r\n if (isCountertop) {\r\n const countertopNavItem = currentCategory.subParts.find(subPart => {\r\n return subPart.part.partId.includes(partId)\r\n });\r\n\r\n if (countertopNavItem) {\r\n return countertopNavItem.part.partId\r\n }\r\n }\r\n\r\n // 3) check for existing navItem\r\n const existingPartId = currentCategory.subParts.some(subPart => {\r\n return subPart.part.partId === partId\r\n });\r\n if (existingPartId) {\r\n return partId\r\n }\r\n\r\n // 4) here we replace default partId with existing in category partId\r\n for (let i = 0; i < currentCategory.subParts.length; i++) {\r\n if (ALLOWED_LABEL_NAV_ITEMS[currentCategory.subParts[i].part.partId]) {\r\n return currentCategory.subParts[i].part.partId\r\n }\r\n }\r\n\r\n // 5) if nothing found - let it be at least default shape's partId\r\n return partId\r\n}\r\n","import {getCurrentLayout} from \"../../../../../appLayout\";\r\nimport cabinetWorkspace from \"./cabinetWorkspace\";\r\nimport {SHAPE_PART_ID} from \"../../../../constants\";\r\n\r\nclass CabinetShapesLayout {\r\n\r\n /**\r\n * Create cabinets from cabinets data\r\n * @param data\r\n */\r\n createShapesFromCabinetSet = (data) => {\r\n data.positions.forEach((cabinetData) => {\r\n if ([SHAPE_PART_ID.lower_cabinet_boxes, SHAPE_PART_ID.upper_cabinet_boxes].includes(cabinetData.partId)) {\r\n const layout = getCurrentLayout();\r\n const feature = layout.getFeatureById(cabinetData.featureId, true);\r\n const parentFeature = layout.getFeatureById(cabinetData.parentFeatureId);\r\n const position = {x: cabinetData.x, y: cabinetData.z};\r\n cabinetWorkspace.cabinetShapes.addShape(feature, parentFeature, position)\r\n }\r\n })\r\n }\r\n}\r\n\r\nexport default CabinetShapesLayout;\r\n","// textBoxManager.js\r\nimport TextBox from \"./textBox\";\r\nimport workspace from \"../workspace\";\r\n\r\nclass TextBoxManager {\r\n constructor() {\r\n this.textBoxes = [];\r\n }\r\n\r\n getExportedTextBoxes = () => {\r\n return this.textBoxes.map(box => box.export());\r\n };\r\n\r\n setImportedTextBoxes = (_textBoxes) => {\r\n if (_textBoxes === undefined) {\r\n return []\r\n }\r\n for (let i = 0; i < _textBoxes.length; i++) {\r\n let textBox = new TextBox(_textBoxes[i].posOnField, _textBoxes[i].placeholder, _textBoxes[i].design);\r\n textBox.init();\r\n }\r\n\r\n return this.textBoxes;\r\n };\r\n\r\n getTextBoxes = () => {\r\n return this.textBoxes;\r\n };\r\n\r\n getHoveredTextBox = () => {\r\n\r\n }\r\n\r\n addTextBox = (box) => {\r\n this.textBoxes.push(box);\r\n\r\n return this.textBoxes;\r\n };\r\n\r\n removeBox = (box) => {\r\n let boxes = this.textBoxes.map((textBox => textBox.box));\r\n const index = boxes.indexOf(box);\r\n if (index > -1) {\r\n this.textBoxes.splice(index, 1);\r\n }\r\n\r\n return this.textBoxes;\r\n };\r\n\r\n removeAllTextBoxes = () => {\r\n for (let i = this.textBoxes.length - 1; i >= 0; i--) {\r\n this.textBoxes[i].box.delete();\r\n //textBoxes[i].text.delete();\r\n }\r\n this.textBoxes = [];\r\n\r\n return this.textBoxes;\r\n };\r\n\r\n isBoxActive() {\r\n const boxes = workspace.textBoxManager.getTextBoxes();\r\n\r\n if (boxes.length > 0) {\r\n for (let textBox of boxes) {\r\n if (textBox.box.mixin.movable.state.hovering) {\r\n return true;\r\n }\r\n }\r\n }\r\n\r\n return false;\r\n }\r\n\r\n getHoveredTexBox() {\r\n const boxes = workspace.textBoxManager.getTextBoxes();\r\n\r\n if (boxes.length > 0) {\r\n for (let textBox of boxes) {\r\n if (textBox.box.mixin.movable.state.hovering) {\r\n return textBox;\r\n }\r\n }\r\n }\r\n\r\n return false;\r\n }\r\n\r\n}\r\n\r\nexport default TextBoxManager;\r\n","import {getQtCatName} from \"../helpers/sqftQuotesHelper\";\r\n\r\nexport class FeatureObjectDTO {\r\n constructor(id, partId, featureId, quantity = 1) {\r\n this.id = id;\r\n this.qtCatName = getQtCatName();\r\n this.partId = partId;\r\n this.featureId = featureId;\r\n this.quantity = quantity;\r\n }\r\n\r\n addBumpoutArea(area) {\r\n this.area = area;\r\n }\r\n}\r\n","import JsonApi from \"./jsonApi\";\r\n\r\nexport const getMarkUpForFeatures = (featuresArray = []) => {\r\n const arrayIds = featuresArray.map(dbFeature => dbFeature.id);\r\n return JsonApi.getMarkUpForFeatures(arrayIds)\r\n .then(response => response.data)\r\n .catch(error => {\r\n console.log(\"Server error getMarkUpForFeatures \"+new Error(error));\r\n })\r\n};\r\n","import {getPercentage} from \"./misc2\";\r\nimport Config from \"../config\";\r\n\r\nexport const MARK_UP_APPLY_TO_TYPES = { // QKB\r\n retailPrice: \"retailPrice\",\r\n cost: \"cost\",\r\n retailPriceAndCost: \"retailPriceAndCost\",\r\n shippingCost: \"shippingCost\",\r\n discount: \"discount\",\r\n}\r\n\r\nconst MARK_UP_PROPS_MATCH = { // CAES\r\n Retail: \"cost\",\r\n Cost: \"price\",\r\n Discount: \"fabricatorCost\",\r\n};\r\n\r\n/**\r\n * @param dbFeaturesArray {[dbFeatureInterface]}\r\n * @param markUpResponse {object}\r\n * @return {[dbFeatureInterface]}\r\n */\r\nexport const setResponseFeaturesMarkUp = (dbFeaturesArray, markUpResponse) => {\r\n if (Config.isDevMode()) {\r\n console.log(\"markUpResponse\", markUpResponse);\r\n }\r\n if (!Array.isArray(dbFeaturesArray) || (typeof markUpResponse !== \"object\") || (markUpResponse === null)\r\n || !Object.keys(markUpResponse).length) {\r\n return dbFeaturesArray\r\n }\r\n Object.keys(markUpResponse).forEach(dbFeatureIdString => {\r\n const dbFeatureId = +dbFeatureIdString;\r\n let dbFeature = dbFeaturesArray.find(feature => feature.id === dbFeatureId);\r\n if (dbFeature && !dbFeature.markUpString) {\r\n // if (Config.isDevMode()) {\r\n // console.log(\"featureWithMarkUp\", dbFeature.customDisplayName, dbFeature);\r\n // }\r\n // here we update dbFeature with new mark up price!\r\n dbFeature = setFeaturePriceFromMarkItem(markUpResponse[dbFeatureIdString], dbFeature);\r\n }\r\n })\r\n return dbFeaturesArray\r\n}\r\n\r\nconst getUpdatedFeaturePriceFromMarkItem = (markUpListItem, originalValue, isCaes = false) => {\r\n const type = isCaes ? markUpListItem.Type : markUpListItem.type;\r\n const priceType = isCaes ? markUpListItem.PriceType : markUpListItem.priceType;\r\n const value = isCaes ? markUpListItem.Value : markUpListItem.value;\r\n\r\n const changeValue = (priceType === \"currency\")\r\n ? +value\r\n : getPercentage(+originalValue, +value);\r\n let newValue = (type === \"mark_up\" || type === \"MarkUp\")\r\n ? +originalValue + changeValue\r\n : +originalValue - changeValue;\r\n return newValue < 0 ? 0 : +(newValue.toFixed(2));\r\n}\r\n\r\n/**\r\n * QKB set\r\n * @param markUpItem {object}\r\n * @param dbFeature {dbFeatureInterface}\r\n * @return {dbFeatureInterface}\r\n */\r\nexport const setFeaturePriceFromMarkItemQKB = (markUpItem, dbFeature) => {\r\n // console.log(\"markUpItem\", markUpItem, newDbFeature);\r\n const {price, cost, shippingCost, discount} = markUpItem.originalValues;\r\n switch (markUpItem.applyTo) {\r\n case MARK_UP_APPLY_TO_TYPES.retailPrice: {\r\n dbFeature.price = getUpdatedFeaturePriceFromMarkItem(markUpItem, price);\r\n break;\r\n }\r\n case MARK_UP_APPLY_TO_TYPES.cost: {\r\n dbFeature.cost = getUpdatedFeaturePriceFromMarkItem(markUpItem, cost);\r\n break;\r\n }\r\n case MARK_UP_APPLY_TO_TYPES.retailPriceAndCost: {\r\n dbFeature.cost = getUpdatedFeaturePriceFromMarkItem(markUpItem, cost);\r\n dbFeature.price = getUpdatedFeaturePriceFromMarkItem(markUpItem, price);\r\n break;\r\n }\r\n case MARK_UP_APPLY_TO_TYPES.shippingCost: {\r\n dbFeature.shippingCost = getUpdatedFeaturePriceFromMarkItem(markUpItem, shippingCost);\r\n break;\r\n }\r\n case MARK_UP_APPLY_TO_TYPES.discount: {\r\n dbFeature.fabricatorCost = getUpdatedFeaturePriceFromMarkItem(markUpItem, discount);\r\n break;\r\n }\r\n default:\r\n break;\r\n }\r\n // console.log(\"newDbFeature\", newDbFeature);\r\n return dbFeature\r\n}\r\n\r\n/**\r\n * @param markUpString {string}\r\n * @param dbFeature {dbFeatureInterface}\r\n * @return {dbFeatureInterface}\r\n */\r\nconst setFeaturePriceFromMarkItem = (markUpString = \"\", dbFeature) => {\r\n if (!dbFeature || !markUpString) {\r\n return dbFeature\r\n }\r\n // console.log(\"markUpObject\", markUpObject, newDbFeature);\r\n const markUpObject = JSON.parse(markUpString); // {Retail: {Type: \"MarkUp\", Value: 10}, Cost, Discount}\r\n\r\n if (Array.isArray(markUpObject)) { // QKB format\r\n markUpObject.forEach(markUpListItem => {\r\n // console.log(\"dbFeature price cost\", dbFeature.price, dbFeature.cost);\r\n dbFeature = setFeaturePriceFromMarkItemQKB(markUpListItem, dbFeature);\r\n // console.log(\"dbFeature price cost\", dbFeature.price, dbFeature.cost);\r\n })\r\n } else if (typeof markUpObject === \"object\" && (markUpObject !== null)) { // CAES format!!\r\n // console.log(\"\", markUpObject);\r\n // {\r\n // Cost: {Type: 'MarkDown', Value: 10}\r\n // Discount : {Type: 'MarkDown', Value: 0}\r\n // Retail : {Type: 'MarkDown', Value: 10}\r\n // }\r\n Object.keys(markUpObject).forEach(key => {\r\n if (!markUpObject[key].Value || !MARK_UP_PROPS_MATCH[key]) {\r\n return\r\n }\r\n dbFeature[MARK_UP_PROPS_MATCH[key]] = getUpdatedFeaturePriceFromMarkItem(markUpObject[key], dbFeature[MARK_UP_PROPS_MATCH[key]], true);\r\n })\r\n }\r\n dbFeature.markUpString = markUpString; // just to be able to find it after job is saved on restore\r\n // console.log(\"newDbFeature\", newDbFeature);\r\n return dbFeature\r\n}\r\n","/**\r\n * // Example usage\r\n * const rate = 0.05 / 12; // Monthly interest rate (5% annual)\r\n * const nper = 60; // Number of payments (5 years)\r\n * const pv = 30000; // Loan amount (present value)\r\n * */\r\nexport function PMT(rate, nper, pv, fv = 0, type = 0) {\r\n if (rate === 0) {\r\n return -(pv + fv) / nper;\r\n }\r\n\r\n const pvif = Math.pow(1 + rate, nper);\r\n let pmt = (rate * (pv * pvif + fv)) / (pvif - 1);\r\n\r\n // Adjust for payments at the beginning of the period\r\n if (type === 1) {\r\n pmt /= (1 + rate);\r\n }\r\n\r\n return -pmt; // Return negative for outflow\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport Appliance from \"../../parts/appliance\";\r\n\r\nexport default class Handle extends IntermediatePart {\r\n constructor(isChild, partNumber = 0) {\r\n super(isChild);\r\n this.partNumber = partNumber;\r\n this.partId = 'handle';\r\n this.partName = 'Handle';\r\n this.translateId = \"visualizer.kitchen.cabinet.handle\";\r\n this.hasAdditionalParts = true;\r\n this.layerPriority = 8;\r\n }\r\n\r\n load(dbFeature) {\r\n const partNumber = (dbFeature.metaData[\"Part\"] && +dbFeature.metaData[\"Part\"][0]) === 0 ? 1 : 2;\r\n return super.load_(dbFeature, new Handle(false, partNumber), true, partNumber === 1 ? 'features' : 'featuresParts');\r\n }\r\n\r\n getActiveFeaturePartsAccordingToActiveFeature(fromFeature = this.activeFeature, activeFeatureConditions = []) {\r\n let activeFeatureParts = [];\r\n if (fromFeature && fromFeature.partNumber) {\r\n const name1 = fromFeature.getSplittedFeatureName();\r\n // console.log(\"name1\", name1);\r\n let arrayOfConditions = activeFeatureConditions.length\r\n ? activeFeatureConditions\r\n : this.getActiveFeatureConditions(fromFeature);\r\n\r\n const cabinetParent = this.getParent();\r\n const applianceParent = cabinetParent.layout.parts[Appliance.id];\r\n\r\n // part 0 - показываем всегда\r\n // part 1 - только если выключен холодильник\r\n // part 2 - показываем всегда, но зависит от MountType part 2 нижних кабинетов (S, U или ST, FM, SM)\r\n // part 3 - если включен part 3 нижних кабинетов (это срабатывает при выключенной посудомойке)\r\n // part 4 - если включен part 4 нижних кабинетов (это срабатывает при выключенной плите)\r\n // part 5 - если включен part 2 верхних кабинетов (это срабатывает при выключенной вытяжке)\r\n // part 6 - если включен fridge и матчим по его метадате Width и Height, так же как и кабинеты\r\n activeFeatureParts = this.featuresParts.filter((feature) => {\r\n if (feature.metaData[\"Part\"] && feature.metaData[\"Part\"].includes(\"1\")\r\n && (!applianceParent || !applianceParent.fridge || !applianceParent.fridge.activeFeature && applianceParent.fridge.disabled)) {\r\n return false\r\n }\r\n if (feature.metaData[\"Part\"] && feature.metaData[\"Part\"].includes(\"2\")) {\r\n if (cabinetParent && cabinetParent.bottomCabinet && cabinetParent.bottomCabinet.activeFeatureParts) {\r\n const part2 = cabinetParent.bottomCabinet.activeFeatureParts.find(featuresPart => featuresPart.metaData[\"Part\"].includes(\"2\"));\r\n if (part2) {\r\n return name1 === feature.getSplittedFeatureName() && feature.matchesMetaForArrayOfConditions([\r\n ...arrayOfConditions,\r\n {propName: \"MountType\", propValue: part2.metaData[\"MountType\"]}\r\n ])\r\n }\r\n }\r\n return false\r\n }\r\n if (feature.metaData[\"Part\"] && feature.metaData[\"Part\"].includes(\"3\")\r\n && applianceParent && applianceParent.dishwasher && !applianceParent.dishwasher.disabled && applianceParent.dishwasher.activeFeature) {\r\n return false\r\n }\r\n if (feature.metaData[\"Part\"] && feature.metaData[\"Part\"].includes(\"4\")\r\n && applianceParent && applianceParent.stove && !applianceParent.stove.disabled && applianceParent.stove.activeFeature) {\r\n return false\r\n }\r\n if (feature.metaData[\"Part\"] && feature.metaData[\"Part\"].includes(\"5\")\r\n && applianceParent && applianceParent.hood && !applianceParent.hood.disabled && applianceParent.hood.activeFeature) {\r\n return false\r\n }\r\n if (feature.metaData[\"Part\"] && feature.metaData[\"Part\"].includes(\"6\")) { // 6 is fridge related\r\n if (!applianceParent || !applianceParent.fridge || applianceParent.fridge.disabled || !applianceParent.fridge.activeFeature) {\r\n return false\r\n }\r\n const fridgeConditions = applianceParent.fridge.getFridgeWidthAndHeightConditions();\r\n return name1 === feature.getSplittedFeatureName() && feature.matchesMetaForArrayOfConditions([...arrayOfConditions, ...fridgeConditions])\r\n }\r\n return name1 === feature.getSplittedFeatureName() && feature.matchesMetaForArrayOfConditions(arrayOfConditions)\r\n });\r\n\r\n // console.log(\"this.featuresParts\", this.featuresParts);\r\n // console.log(\"activeFeatureParts\", activeFeatureParts);\r\n activeFeatureParts.forEach((activeFeaturePart) => {\r\n activeFeaturePart.disabled = this.disabled\r\n });\r\n }\r\n return activeFeatureParts\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\n\r\nexport default class Dishwasher extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'dishwasher';\r\n this.partName = 'Dishwasher';\r\n this.translateId = \"visualizer.kitchen.appliance.dishwasher\";\r\n this.canBeDisabled = true;\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new Dishwasher());\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\n\r\nconst widthAndHeightArray = [\"Width\", \"Height\"];\r\n\r\nexport default class Fridge extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'fridge';\r\n this.partName = 'Fridge';\r\n this.translateId = \"visualizer.kitchen.appliance.fridge\";\r\n this.canBeDisabled = true;\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new Fridge());\r\n }\r\n\r\n getFridgeWidthAndHeightConditions = () => {\r\n let widthHeightConditions = []\r\n if (!this.activeFeature || !this.activeFeature.metaData) {\r\n return widthHeightConditions\r\n }\r\n widthAndHeightArray.forEach(metaName => {\r\n if (this.activeFeature.metaData[metaName]) {\r\n widthHeightConditions.push({\r\n propName: metaName,\r\n propValue: Array.isArray(this.activeFeature.metaData[metaName])\r\n ? this.activeFeature.metaData[metaName][0]\r\n : this.activeFeature.metaData[metaName],\r\n })\r\n }\r\n });\r\n return widthHeightConditions\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport store from \"../../../../../store\";\r\nimport {getFeatureIsLocked} from \"../../../../../misc/helpers\";\r\n\r\nexport default class Hood extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'hood';\r\n this.partName = 'Hood';\r\n this.translateId = \"visualizer.kitchen.appliance.hood\";\r\n this.canBeDisabled = true;\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new Hood());\r\n }\r\n\r\n handleClick(ignoreLocked = false, clickFrom = \"\") {\r\n const {isEncore} = store.getState().fabricatorState;\r\n if (isEncore) {\r\n const featureIsLocked = getFeatureIsLocked(this, ignoreLocked);\r\n if (ignoreLocked || !featureIsLocked) {\r\n const applianceParent = this.getParent().getParent();\r\n if (applianceParent.layout.type === 6) {\r\n if (applianceParent.range && !applianceParent.range.disabled) {\r\n applianceParent.range.disabled = true;\r\n }\r\n if (applianceParent.stovetop && applianceParent.stovetop.disabled) {\r\n applianceParent.stovetop.disabled = false;\r\n }\r\n }\r\n }\r\n }\r\n return super.handleClick(ignoreLocked, clickFrom);\r\n }\r\n\r\n // add dependency on stove width, if width is 24 - we need width 30, if stove is 60 - we need 48\r\n\r\n disabledClick() {\r\n const applianceParent = this.getParent();\r\n const stove = applianceParent.stove;\r\n if (stove && !this.disabled && stove.disabled) {\r\n stove.disabled = false;\r\n }\r\n if ((applianceParent.layout.type === 6) && !this.disabled && applianceParent.microwave\r\n && !applianceParent.microwave.disabled) {\r\n applianceParent.microwave.disabled = true;\r\n }\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport store from \"../../../../../store\";\r\nimport {getFeatureIsLocked} from \"../../../../../misc/helpers\";\r\n\r\nexport default class Microwave extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'microwave';\r\n this.partName = 'Microwave';\r\n this.translateId = \"visualizer.kitchen.appliance.microwave\";\r\n this.canBeDisabled = true;\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new Microwave());\r\n }\r\n\r\n handleClick(ignoreLocked = false, clickFrom = \"\") {\r\n const {isEncore} = store.getState().fabricatorState;\r\n if (isEncore) {\r\n const featureIsLocked = getFeatureIsLocked(this, ignoreLocked);\r\n if (ignoreLocked || !featureIsLocked) {\r\n const applianceParent = this.getParent().getParent();\r\n if (applianceParent.layout.type === 6) {\r\n if (applianceParent.stovetop && !applianceParent.stovetop.disabled) {\r\n applianceParent.stovetop.disabled = true;\r\n }\r\n if (applianceParent.oven && !applianceParent.oven.disabled) {\r\n applianceParent.oven.disabled = true;\r\n }\r\n if (applianceParent.range && applianceParent.range.disabled) {\r\n applianceParent.range.disabled = false;\r\n }\r\n }\r\n }\r\n }\r\n return super.handleClick(ignoreLocked, clickFrom);\r\n }\r\n\r\n disabledClick() {\r\n const applianceParent = this.getParent();\r\n if ((applianceParent.layout.type === 6) && !this.disabled && applianceParent.hood\r\n && !applianceParent.hood.disabled) {\r\n applianceParent.hood.disabled = true;\r\n }\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport store from \"../../../../../store\";\r\nimport {getFeatureIsLocked} from \"../../../../../misc/helpers\";\r\n\r\nexport default class Range extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'range';\r\n this.partName = 'Range';\r\n this.translateId = \"visualizer.kitchen.appliance.range\";\r\n this.canBeDisabled = true;\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new Range());\r\n // const rangeType = dbFeature.metaData && dbFeature.metaData[\"RangeType\"];\r\n // if (!rangeType) {\r\n // dbFeature.metaData[\"RangeType\"] = [\"ALL\"];\r\n // }\r\n }\r\n\r\n handleClick(ignoreLocked = false, clickFrom = \"\") {\r\n const {isEncore} = store.getState().fabricatorState;\r\n const applianceParent = this.getParent().getParent();\r\n const featureIsLocked = getFeatureIsLocked(this, ignoreLocked);\r\n\r\n if (isEncore) {\r\n if (ignoreLocked || !featureIsLocked) {\r\n if (applianceParent.layout.type === 6) {\r\n if (applianceParent.hood && !applianceParent.hood.disabled) {\r\n applianceParent.hood.disabled = true;\r\n }\r\n if (applianceParent.oven && !applianceParent.oven.disabled) {\r\n applianceParent.oven.disabled = true;\r\n }\r\n if (applianceParent.microwave && applianceParent.microwave.disabled) {\r\n applianceParent.microwave.disabled = false;\r\n }\r\n }\r\n }\r\n }\r\n if (ignoreLocked || !featureIsLocked) {\r\n const currentHoodWidth = applianceParent.hood.activeFeature.metaData[\"Width\"];\r\n const newWidth = this.metaData[\"Width\"];\r\n if (newWidth && (!currentHoodWidth || (newWidth[0] !== currentHoodWidth[0]))) {\r\n const currentHoodNavItems = applianceParent.hood.navigationSubItems();\r\n const sameWidth = currentHoodNavItems.filter(navItem => {\r\n if (!navItem.part.metaData[\"Width\"]) {\r\n return false\r\n }\r\n if (newWidth[0] === \"24\") {\r\n return navItem.part.metaData[\"Width\"][0] === newWidth[0] || navItem.part.metaData[\"Width\"][0] === \"30\"\r\n }\r\n return navItem.part.metaData[\"Width\"][0] === newWidth[0]\r\n });\r\n console.log(\"newWidth\", newWidth[0]);\r\n console.log(\"sameWidth\", sameWidth);\r\n if (sameWidth.length) { // here we can filter by the same name, color etc.\r\n applianceParent.hood.activeFeature = sameWidth[0].part;\r\n }\r\n }\r\n if (applianceParent && applianceParent.stove && !applianceParent.stove.disabled) {\r\n applianceParent.stove.disabled = true;\r\n }\r\n }\r\n return super.handleClick(ignoreLocked, clickFrom);\r\n }\r\n\r\n disabledClick() {\r\n const applianceParent = this.getParent();\r\n if ((applianceParent.layout.type === 6) && !this.disabled && applianceParent.stovetop\r\n && !applianceParent.stovetop.disabled) {\r\n applianceParent.stovetop.disabled = true;\r\n }\r\n if (applianceParent.hood) {\r\n applianceParent.hood.disabled = this.disabled;\r\n }\r\n if (!this.disabled && applianceParent.stove && !applianceParent.stove.disabled) {\r\n applianceParent.stove.disabled = true;\r\n }\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport store from \"../../../../../store\";\r\nimport {getFeatureIsLocked} from \"../../../../../misc/helpers\";\r\n\r\nexport default class Oven extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'oven';\r\n this.partName = 'Oven';\r\n this.translateId = \"visualizer.kitchen.appliance.oven\";\r\n this.canBeDisabled = true;\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new Oven());\r\n }\r\n\r\n handleClick(ignoreLocked = false, clickFrom = \"\") {\r\n const {isEncore} = store.getState().fabricatorState;\r\n if (isEncore) {\r\n const featureIsLocked = getFeatureIsLocked(this, ignoreLocked);\r\n if (ignoreLocked || !featureIsLocked) {\r\n const applianceParent = this.getParent().getParent();\r\n if (applianceParent.layout.type === 6) {\r\n if (applianceParent.stovetop && applianceParent.stovetop.disabled) {\r\n applianceParent.stovetop.disabled = false;\r\n }\r\n if (applianceParent.hood && applianceParent.hood.disabled) {\r\n applianceParent.hood.disabled = false;\r\n }\r\n if (applianceParent.range && !applianceParent.range.disabled) {\r\n applianceParent.range.disabled = true;\r\n }\r\n if (applianceParent.microwave && !applianceParent.microwave.disabled) {\r\n applianceParent.microwave.disabled = true;\r\n }\r\n }\r\n }\r\n }\r\n return super.handleClick(ignoreLocked, clickFrom);\r\n }\r\n\r\n hideLayerCondition() {\r\n const applianceParent = this.getParent();\r\n // on the second layout we should show Oven only if stove has Metadata \"T\" (top)\r\n return (applianceParent.layout.type === 2) && applianceParent && applianceParent.stove && applianceParent.stove.activeFeature\r\n && applianceParent.stove.activeFeature && (!applianceParent.stove.activeFeature.metaData[\"Stove Type\"]\r\n || (applianceParent.stove.activeFeature.metaData[\"Stove Type\"][0] !== \"T\"))\r\n }\r\n\r\n getArrayOfConditions() {\r\n const conditions = super.getArrayOfConditions();\r\n if (this.hideLayerCondition()) {\r\n conditions.push({\r\n propName: \"Stove Type\",\r\n propValue: \"F\"\r\n });\r\n }\r\n return conditions\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport {getFeatureIsLocked} from \"../../../../../misc/helpers\";\r\n\r\nexport default class Stove extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'stove';\r\n this.partName = 'Stove';\r\n this.translateId = \"visualizer.kitchen.appliance.stove\";\r\n this.canBeDisabled = true;\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new Stove());\r\n }\r\n\r\n handleClick(ignoreLocked, clickFrom = \"\") {\r\n const applianceParent = this.getParent().getParent();\r\n const featureIsLocked = getFeatureIsLocked(this, ignoreLocked);\r\n if (ignoreLocked || !featureIsLocked) {\r\n if (applianceParent && applianceParent.hood && applianceParent.hood.activeFeature) {\r\n const currentHoodWidth = applianceParent.hood.activeFeature.metaData[\"Width\"];\r\n const newWidth = this.metaData[\"Width\"];\r\n if (newWidth && (!currentHoodWidth || (newWidth[0] !== currentHoodWidth[0]))) {\r\n const currentHoodNavItems = applianceParent.hood.navigationSubItems();\r\n const sameWidth = currentHoodNavItems.filter(navItem => {\r\n if (!navItem.part.metaData[\"Width\"]) {\r\n return false\r\n }\r\n if (newWidth[0] === \"24\") {\r\n return navItem.part.metaData[\"Width\"][0] === newWidth[0] || navItem.part.metaData[\"Width\"][0] === \"30\"\r\n }\r\n return navItem.part.metaData[\"Width\"][0] === newWidth[0]\r\n });\r\n console.log(\"newWidth\", newWidth[0]);\r\n console.log(\"sameWidth\", sameWidth);\r\n if (sameWidth.length) { // here we can filter by the same name, color etc.\r\n applianceParent.hood.activeFeature = sameWidth[0].part;\r\n }\r\n }\r\n }\r\n if (applianceParent && applianceParent.range && applianceParent.range.activeFeature && !applianceParent.range.disabled) {\r\n applianceParent.range.disabled = true\r\n }\r\n }\r\n super.handleClick(ignoreLocked, clickFrom);\r\n }\r\n\r\n hideLayerCondition() {\r\n const applianceParent = this.getParent();\r\n const hideLayer = applianceParent && applianceParent.range && applianceParent.range.activeFeature\r\n && !applianceParent.range.disabled;\r\n if (hideLayer && !this.disabled) {\r\n this.disabled = true;\r\n }\r\n return hideLayer\r\n }\r\n\r\n disabledClick() {\r\n const applianceParent = this.getParent();\r\n if (applianceParent.hood) {\r\n applianceParent.hood.disabled = this.disabled;\r\n }\r\n if (!this.disabled && applianceParent.range && !applianceParent.range.disabled) {\r\n applianceParent.range.disabled = true;\r\n }\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport {useOldCabinetLogic} from \"../../constants\";\r\n\r\nexport default class FridgeEnclosure extends IntermediatePart {\r\n constructor(isChild, partNumber = 0) {\r\n super(isChild);\r\n this.partNumber = partNumber;\r\n this.partId = 'fridge_enclosure';\r\n this.partName = 'Fridge Enclosure';\r\n this.dbName = \"Fridge Enclosure\";\r\n this.visible = true;\r\n this.translateId = \"visualizer.kitchen.appliance.fridge_enclosure\";\r\n this.hasAdditionalParts = true;\r\n this.allWallsCanBeApplied = true;\r\n this.canBeDisabled = true;\r\n }\r\n\r\n load(dbFeature) {\r\n if (dbFeature.metaData[\"RoomLayout\"] && dbFeature.metaData[\"RoomLayout\"].includes(\"Layout4\")) {\r\n dbFeature.metaData[\"Part\"] = [\"0\"]; // we don't have part 0 on Layout4\r\n }\r\n if (useOldCabinetLogic) {\r\n const partNumber = dbFeature.metaData[\"Part\"] ? +dbFeature.metaData[\"Part\"][0] : 0;\r\n return super.load_(dbFeature, new FridgeEnclosure(false, partNumber), true, partNumber === 0 ? 'features' : 'featuresParts');\r\n }\r\n const partNumber = dbFeature.metaData[\"Part\"] ? dbFeature.metaData[\"Part\"][0] : \"1\";\r\n return super.load_(dbFeature, new FridgeEnclosure(false, partNumber), true, partNumber === \"1\" ? 'features' : 'featuresParts');\r\n }\r\n\r\n setLayers(layout) {\r\n\r\n if (layout.type === 4) {\r\n const fridge = this.getParent().fridge;\r\n // show layers only if fridge is disabled\r\n if (!(!fridge || fridge.disabled || !fridge.activeFeature || !fridge.activeFeature.layer || !fridge.activeFeature.layer.src)) {\r\n super.hideLayers();\r\n return\r\n }\r\n }\r\n\r\n return super.setLayers(layout);\r\n }\r\n\r\n setActiveFeatureParts(fromFeature = this.activeFeature, activeFeatureConditions = []) {\r\n const parent = this.getParent();\r\n //show second part only if fridge is disabled\r\n if (!parent.fridge || parent.fridge.disabled || !parent.fridge.activeFeature || !parent.fridge.activeFeature.layer || !parent.fridge.activeFeature.layer.src) {\r\n return this.getActiveFeaturePartsAccordingToActiveFeature(fromFeature, activeFeatureConditions, true);\r\n }\r\n return []\r\n }\r\n\r\n getArrayOfConditions() {\r\n const conditions = super.getArrayOfConditions();\r\n const applianceParent = this.getParent();\r\n if (applianceParent && applianceParent.fridge && !applianceParent.fridge.disabled && applianceParent.fridge.activeFeature) {\r\n const fridgeConditions = applianceParent.fridge.getFridgeWidthAndHeightConditions();\r\n if (!fridgeConditions.some(condition => condition.propName === \"Width\")) {\r\n conditions.push({\r\n propName: \"Width\",\r\n propValue: \"36\"\r\n });\r\n }\r\n return [...conditions, ...fridgeConditions]\r\n }\r\n return conditions\r\n }\r\n\r\n getFridgeEnclosureSplittedFeatureName = () => {\r\n if (this._fridgeEnclosureSplittedFeatureName == null) {\r\n this._fridgeEnclosureSplittedFeatureName = this.getSplittedFeatureName().split(/.{5}$/)[0]; // \"Benton Maple Stone-NC-Aspen-00 1 21\" -> \"Benton Maple Stone-NC-Aspen-00\"\r\n }\r\n return this._fridgeEnclosureSplittedFeatureName\r\n };\r\n\r\n getActiveFeaturePartsAccordingToActiveFeature(fromFeature = this.activeFeature, activeFeatureConditions = []) {\r\n let activeFeatureParts = [];\r\n if (fromFeature && Number.isInteger(fromFeature.partNumber)) {\r\n let activeFeaturePart;\r\n const name1 = fromFeature.getFridgeEnclosureSplittedFeatureName();\r\n // console.log(\"name1\", name1);\r\n let arrayOfConditions = activeFeatureConditions.length\r\n ? activeFeatureConditions\r\n : this.getActiveFeatureConditions(fromFeature);\r\n // if (this.partId === \"right_wall\") {\r\n // arrayOfConditions = arrayOfConditions.filter(condition => condition.propName !== \"MirrorSize\");\r\n // }\r\n activeFeatureParts = this.featuresParts.filter((feature) => name1 === feature.getFridgeEnclosureSplittedFeatureName());\r\n // console.log(\"this.featuresParts\", this.featuresParts);\r\n // console.log(\"activeFeatureParts\", activeFeatureParts);\r\n if (activeFeatureParts.length) {\r\n activeFeaturePart = activeFeatureParts.find((feature) => {\r\n return feature.matchesMetaForArrayOfConditions(arrayOfConditions)\r\n });\r\n if (!activeFeaturePart) {\r\n activeFeaturePart = activeFeatureParts[0];\r\n }\r\n }\r\n activeFeatureParts = activeFeaturePart ? [activeFeaturePart] : [];\r\n activeFeatureParts.forEach((activeFeaturePart) => {\r\n activeFeaturePart.disabled = this.disabled\r\n });\r\n }\r\n return activeFeatureParts\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\n\r\nexport default class FridgeEnclosureHandle extends IntermediatePart {\r\n constructor(isChild, partNumber = 0) {\r\n super(isChild);\r\n this.partNumber = partNumber;\r\n this.partId = 'fridge_enclosure_handle';\r\n this.partName = \"Fridge Enclosure Handle\";\r\n this.visible = true;\r\n this.translateId = \"visualizer.kitchen.appliance.fridge_enclosure_handle\";\r\n this.hasAdditionalParts = true;\r\n this.allWallsCanBeApplied = true;\r\n this.canBeDisabled = true;\r\n }\r\n\r\n load(dbFeature) {\r\n if (dbFeature.metaData[\"RoomLayout\"] && dbFeature.metaData[\"RoomLayout\"].includes(\"Layout4\")) {\r\n dbFeature.metaData[\"Part\"] = [\"0\"]; // we don't have part 0 on Layout4\r\n }\r\n const partNumber = dbFeature.metaData[\"Part\"] ? dbFeature.metaData[\"Part\"][0] : \"1\";\r\n return super.load_(dbFeature, new FridgeEnclosureHandle(false, partNumber), true, partNumber === \"1\" ? 'features' : 'featuresParts');\r\n }\r\n\r\n getArrayOfConditions() {\r\n const conditions = super.getArrayOfConditions();\r\n const applianceParent = this.getParent();\r\n if (applianceParent && applianceParent.fridge && !applianceParent.fridge.disabled && applianceParent.fridge.activeFeature) {\r\n const fridgeConditions = applianceParent.fridge.getFridgeWidthAndHeightConditions();\r\n if (!fridgeConditions.some(condition => condition.propName === \"Width\")) {\r\n conditions.push({\r\n propName: \"Width\",\r\n propValue: \"36\"\r\n });\r\n }\r\n return [...conditions, ...fridgeConditions]\r\n }\r\n return conditions\r\n }\r\n\r\n setLayers(layout) {\r\n\r\n if (layout.type === 4) {\r\n const fridge = this.getParent().fridge;\r\n // show layers only if fridge is disabled\r\n if (!(!fridge || fridge.disabled || !fridge.activeFeature || !fridge.activeFeature.layer || !fridge.activeFeature.layer.src)) {\r\n super.hideLayers();\r\n return\r\n }\r\n }\r\n\r\n return super.setLayers(layout);\r\n }\r\n\r\n setActiveFeatureParts(fromFeature = this.activeFeature, activeFeatureConditions = []) {\r\n const parent = this.getParent();\r\n //show second part only if fridge is disabled\r\n if (!parent.fridge || parent.fridge.disabled || !parent.fridge.activeFeature || !parent.fridge.activeFeature.layer || !parent.fridge.activeFeature.layer.src) {\r\n return this.getActiveFeaturePartsAccordingToActiveFeature(fromFeature, activeFeatureConditions, true);\r\n }\r\n return []\r\n }\r\n\r\n getFridgeEnclosureSplittedFeatureName = () => {\r\n if (this._fridgeEnclosureSplittedFeatureName == null) {\r\n this._fridgeEnclosureSplittedFeatureName = this.getSplittedFeatureName().split(/.{5}$/)[0]; // \"Benton Maple Stone-NC-Aspen-00 1 21\" -> \"Benton Maple Stone-NC-Aspen-00\"\r\n }\r\n return this._fridgeEnclosureSplittedFeatureName\r\n };\r\n\r\n getActiveFeaturePartsAccordingToActiveFeature(fromFeature = this.activeFeature, activeFeatureConditions = []) {\r\n let activeFeatureParts = [];\r\n if (fromFeature && Number.isInteger(fromFeature.partNumber)) {\r\n let activeFeaturePart;\r\n const name1 = fromFeature.getFridgeEnclosureSplittedFeatureName();\r\n // console.log(\"name1\", name1);\r\n let arrayOfConditions = activeFeatureConditions.length\r\n ? activeFeatureConditions\r\n : this.getActiveFeatureConditions(fromFeature);\r\n // if (this.partId === \"right_wall\") {\r\n // arrayOfConditions = arrayOfConditions.filter(condition => condition.propName !== \"MirrorSize\");\r\n // }\r\n activeFeatureParts = this.featuresParts.filter((feature) => name1 === feature.getFridgeEnclosureSplittedFeatureName());\r\n // console.log(\"this.featuresParts\", this.featuresParts);\r\n // console.log(\"activeFeatureParts\", activeFeatureParts);\r\n if (activeFeatureParts.length) {\r\n activeFeaturePart = activeFeatureParts.find((feature) => {\r\n return feature.matchesMetaForArrayOfConditions(arrayOfConditions)\r\n });\r\n if (!activeFeaturePart) {\r\n activeFeaturePart = activeFeatureParts[0];\r\n }\r\n }\r\n activeFeatureParts = activeFeaturePart ? [activeFeaturePart] : [];\r\n activeFeatureParts.forEach((activeFeaturePart) => {\r\n activeFeaturePart.disabled = this.disabled\r\n });\r\n }\r\n return activeFeatureParts\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport store from \"../../../../../store\";\r\nimport {getFeatureIsLocked} from \"../../../../../misc/helpers\";\r\n\r\nexport default class Stovetop extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'stovetop';\r\n this.partName = 'Stovetop';\r\n this.translateId = \"visualizer.kitchen.center_island.center_island_stovetop\";\r\n this.canBeDisabled = true;\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new Stovetop());\r\n }\r\n\r\n handleClick(ignoreLocked = false, clickFrom = \"\") {\r\n const {isEncore} = store.getState().fabricatorState;\r\n if (isEncore) {\r\n const featureIsLocked = getFeatureIsLocked(this, ignoreLocked);\r\n if (ignoreLocked || !featureIsLocked) {\r\n const applianceParent = this.getParent().getParent();\r\n if (applianceParent.layout.type === 6) {\r\n if (applianceParent.microwave && !applianceParent.microwave.disabled) {\r\n applianceParent.microwave.disabled = true;\r\n }\r\n if (applianceParent.hood && applianceParent.hood.disabled) {\r\n applianceParent.hood.disabled = false;\r\n }\r\n }\r\n }\r\n }\r\n return super.handleClick(ignoreLocked, clickFrom);\r\n }\r\n\r\n disabledClick() {\r\n const applianceParent = this.getParent();\r\n // if (!this.disabled) {\r\n // // centerIslandParent.cabinet.disabled = false;\r\n // // centerIslandParent.cabinet.disabledClick();\r\n // } else {\r\n // if (applianceParent.hood) {\r\n // applianceParent.hood.disabled = this.disabled;\r\n // }\r\n // }\r\n if ((applianceParent.layout.type === 6) && !this.disabled && applianceParent.range\r\n && !applianceParent.range.disabled) {\r\n applianceParent.range.disabled = true;\r\n }\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport Appliance from \"../../parts/appliance\";\r\nimport {LayoutAbbreviations, useOldCabinetLogic} from \"../../constants\";\r\n\r\nexport default class TopCabinet extends IntermediatePart {\r\n constructor(isChild, partNumber = 0) {\r\n super(isChild);\r\n this.partNumber = partNumber;\r\n this.partId = 'top_cabinet';\r\n this.partName = 'Top Cabinet';\r\n this.translateId = \"visualizer.kitchen.cabinet.top_cabinet\";\r\n this.canBeDisabled = false;\r\n this.hasAdditionalParts = true;\r\n this.layerPriority = 1;\r\n this.allWallsCanBeApplied = true;\r\n if (isChild) {\r\n this.nextFeaturesPageToLoadArray = {};\r\n LayoutAbbreviations.forEach(layoutAbbreviation => {\r\n this.nextFeaturesPageToLoadArray[layoutAbbreviation] = {\r\n page: 0,\r\n allReceived: false,\r\n };\r\n });\r\n }\r\n }\r\n\r\n load(dbFeature) {\r\n const partNumber = (dbFeature.metaData[\"Part\"] && +dbFeature.metaData[\"Part\"][0]) === 1 ? 1 : 2;\r\n return super.load_(dbFeature, new TopCabinet(false, partNumber), true, partNumber === 1 ? 'features' : 'featuresParts');\r\n }\r\n\r\n disabledClick() {\r\n this.activeFeatureParts.forEach((activeFeaturePart) => {\r\n activeFeaturePart.disabled = this.disabled\r\n });\r\n const topHandle = this.getParent().topHandle;\r\n if (topHandle) {\r\n topHandle.disabled = this.disabled;\r\n }\r\n const crownMolding = this.getParent().crownMolding;\r\n if (crownMolding) {\r\n crownMolding.disabled = this.disabled;\r\n }\r\n }\r\n\r\n getArrayOfConditions() {\r\n const conditions = super.getArrayOfConditions();\r\n if (useOldCabinetLogic) {\r\n return conditions\r\n }\r\n const cabinetParent = this.getParent();\r\n const applianceParent = cabinetParent.layout.parts[Appliance.id];\r\n const hoodIsVisible = applianceParent && applianceParent.hood && applianceParent.hood.activeFeature && !applianceParent.hood.disabled;\r\n const microwaveIsVisible = applianceParent && applianceParent.microwave && applianceParent.microwave.activeFeature && !applianceParent.microwave.disabled;\r\n conditions.push({\r\n propName: \"Hood\",\r\n propValue: hoodIsVisible || ((cabinetParent.layout.type === 6) && microwaveIsVisible) ? \"H\" : \"C\"\r\n });\r\n if (hoodIsVisible && applianceParent.hood.activeFeature.metaData[\"Width\"]) {\r\n conditions.push({\r\n propName: \"Width\",\r\n propValue: applianceParent.hood.activeFeature.metaData[\"Width\"]\r\n });\r\n }\r\n return conditions\r\n }\r\n\r\n getActiveFeatureConditions() {\r\n return this.getArrayOfConditions().filter(metaObject => {\r\n return metaObject.propName !== \"Hood\" && metaObject.propName !== \"Width\"\r\n })\r\n }\r\n\r\n getActiveFeaturePartsAccordingToActiveFeature(fromFeature = this.activeFeature, activeFeatureConditions = []) {\r\n let activeFeatureParts = [];\r\n if (fromFeature && fromFeature.partNumber) {\r\n const name1 = fromFeature.getSplittedFeatureName();\r\n // console.log(\"name1\", name1);\r\n let arrayOfConditions = activeFeatureConditions.length\r\n ? activeFeatureConditions\r\n : this.getActiveFeatureConditions(fromFeature);\r\n\r\n const cabinetParent = this.getParent();\r\n const applianceParent = cabinetParent.layout.parts[Appliance.id];\r\n\r\n // part1 - depends on hood - H hood enabled, С - disabled\r\n // part1 - depends on hood \"Width\"\r\n // part2 - depends on Fridge\r\n // part3 - was part 6\r\n activeFeatureParts = this.featuresParts.filter((feature) => {\r\n if (useOldCabinetLogic) {\r\n if (feature.metaData[\"Part\"] && feature.metaData[\"Part\"].includes(\"2\")\r\n && (!applianceParent || !applianceParent.hood || applianceParent.hood.disabled || !applianceParent.hood.activeFeature)) {\r\n return name1 === feature.getSplittedFeatureName() && feature.matchesMetaForArrayOfConditions(arrayOfConditions)\r\n }\r\n if (cabinetParent.layout.type === 4 && feature.metaData[\"Part\"] && feature.metaData[\"Part\"].includes(\"3\")\r\n && applianceParent && applianceParent.fridge && (applianceParent.fridge.disabled || !applianceParent.fridge.activeFeature)) {\r\n return name1 === feature.getSplittedFeatureName() && feature.matchesMetaForArrayOfConditions(arrayOfConditions)\r\n }\r\n if (feature.metaData[\"Part\"] && feature.metaData[\"Part\"].includes(\"6\")) { // 6 is fridge related\r\n if (!applianceParent || !applianceParent.fridge || applianceParent.fridge.disabled || !applianceParent.fridge.activeFeature) {\r\n return false\r\n }\r\n const fridgeConditions = applianceParent.fridge.getFridgeWidthAndHeightConditions();\r\n return name1 === feature.getSplittedFeatureName() && feature.matchesMetaForArrayOfConditions([...arrayOfConditions, ...fridgeConditions])\r\n }\r\n } else {\r\n if (feature.metaData[\"Part\"] && feature.metaData[\"Part\"].includes(\"2\")) {\r\n const fridgeIsVisible = applianceParent && applianceParent.fridge && !applianceParent.fridge.disabled\r\n && applianceParent.fridge.activeFeature;\r\n const fridgeConditions = applianceParent && applianceParent.fridge\r\n ? applianceParent.fridge.getFridgeWidthAndHeightConditions()\r\n : [];\r\n return name1 === feature.getSplittedFeatureName() && feature.matchesMetaForArrayOfConditions([\r\n ...arrayOfConditions, {\r\n propName: \"Fridge\",\r\n propValue: fridgeIsVisible ? \"F\" : \"C\"\r\n }, ...fridgeConditions\r\n ])\r\n } else if (feature.metaData[\"Part\"] && feature.metaData[\"Part\"].includes(\"3\")) {\r\n if (!applianceParent || !applianceParent.oven || applianceParent.oven.disabled || !applianceParent.oven.activeFeature) {\r\n return false\r\n }\r\n return name1 === feature.getSplittedFeatureName() && feature.matchesMetaForArrayOfConditions(arrayOfConditions)\r\n }\r\n }\r\n return false\r\n });\r\n\r\n // console.log(\"this.featuresParts\", this.featuresParts);\r\n // console.log(\"activeFeatureParts\", activeFeatureParts);\r\n activeFeatureParts.forEach((activeFeaturePart) => {\r\n activeFeaturePart.disabled = this.disabled\r\n });\r\n }\r\n return activeFeatureParts\r\n }\r\n\r\n}\r\n\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport Appliance from \"../../parts/appliance\";\r\nimport {LayoutAbbreviations, useOldCabinetLogic} from \"../../constants\";\r\nimport CountertopGroup from \"../../parts/countertopGroup\";\r\n\r\nexport default class TallCabinet extends IntermediatePart {\r\n constructor(isChild, partNumber = 0) {\r\n super(isChild);\r\n this.partNumber = partNumber;\r\n this.partId = 'tall_cabinet';\r\n this.partName = 'Tall Cabinet';\r\n this.translateId = \"visualizer.kitchen.cabinet.tall_cabinet\";\r\n this.canBeDisabled = false;\r\n this.hasAdditionalParts = true;\r\n this.layerPriority = 1;\r\n this.allWallsCanBeApplied = true;\r\n if (isChild) {\r\n this.nextFeaturesPageToLoadArray = {};\r\n LayoutAbbreviations.forEach(layoutAbbreviation => {\r\n this.nextFeaturesPageToLoadArray[layoutAbbreviation] = {\r\n page: 0,\r\n allReceived: false,\r\n };\r\n });\r\n }\r\n }\r\n\r\n load(dbFeature) {\r\n const partNumber = (dbFeature.metaData[\"Part\"] && +dbFeature.metaData[\"Part\"][0]) === 1 ? 1 : 2;\r\n return super.load_(dbFeature, new TallCabinet(false, partNumber), true, partNumber === 1 ? 'features' : 'featuresParts');\r\n }\r\n\r\n disabledClick() {\r\n this.activeFeatureParts.forEach((activeFeaturePart) => {\r\n activeFeaturePart.disabled = this.disabled\r\n });\r\n }\r\n\r\n getArrayOfConditions() {\r\n const conditions = super.getArrayOfConditions();\r\n if (useOldCabinetLogic) {\r\n return conditions\r\n }\r\n const cabinetParent = this.getParent();\r\n const countertopParent = cabinetParent.layout.parts[CountertopGroup.id];\r\n // const applianceParent = cabinetParent.layout.parts[Appliance.id];\r\n const sinkIsVisible = countertopParent && countertopParent.sink && countertopParent.sink.activeFeature && !countertopParent.sink.disabled;\r\n if (sinkIsVisible) {\r\n conditions.push({\r\n propName: \"MountType\",\r\n propValue: countertopParent.sink.activeFeature.metaData[\"MountType\"]\r\n });\r\n }\r\n return conditions\r\n }\r\n\r\n getActiveFeatureConditions() {\r\n return this.getArrayOfConditions().filter(metaObject => {\r\n return metaObject.propName !== \"MountType\"\r\n })\r\n }\r\n\r\n getActiveFeaturePartsAccordingToActiveFeature(fromFeature = this.activeFeature, activeFeatureConditions = []) {\r\n let activeFeatureParts = [];\r\n if (fromFeature && fromFeature.partNumber) {\r\n const name1 = fromFeature.getSplittedFeatureName();\r\n // console.log(\"name1\", name1);\r\n let arrayOfConditions = activeFeatureConditions.length\r\n ? activeFeatureConditions\r\n : this.getActiveFeatureConditions(fromFeature);\r\n\r\n const cabinetParent = this.getParent();\r\n const countertopParent = cabinetParent.layout.parts[CountertopGroup.id];\r\n const applianceParent = cabinetParent.layout.parts[Appliance.id];\r\n const sink = countertopParent.sink;\r\n\r\n //part 1 will be with MountType\r\n // part 2 dishwasher - depends on dishwasher metaData Width\r\n //part 3 depends on stove metaData Width\r\n // part 4 - fridge\r\n // part 5 - peninsula\r\n\r\n const withStoveConditions = [...arrayOfConditions, {\r\n propName: \"Width\",\r\n propValue: applianceParent && applianceParent.stove && applianceParent.stove.activeFeature\r\n && applianceParent.stove.activeFeature.metaData[\"Width\"]\r\n ? applianceParent.stove.activeFeature.metaData[\"Width\"]\r\n : \"30\",\r\n }];\r\n const withDishWasherConditions = [...arrayOfConditions, {\r\n propName: \"Width\",\r\n propValue: applianceParent && applianceParent.dishwasher && applianceParent.dishwasher.activeFeature\r\n && applianceParent.dishwasher.activeFeature.metaData[\"Width\"]\r\n ? applianceParent.dishwasher.activeFeature.metaData[\"Width\"]\r\n : \"24\",\r\n }];\r\n const withFridgeConditions = [...arrayOfConditions, {\r\n propName: \"Width\",\r\n propValue: applianceParent && applianceParent.fridge && applianceParent.fridge.activeFeature\r\n && applianceParent.fridge.activeFeature.metaData[\"Width\"]\r\n ? applianceParent.fridge.activeFeature.metaData[\"Width\"]\r\n : \"36\",\r\n }];\r\n activeFeatureParts = this.featuresParts.filter((feature) => {\r\n if (useOldCabinetLogic) {\r\n if (feature.metaData[\"Part\"] && feature.metaData[\"Part\"].includes(\"2\")\r\n && sink && !sink.disabled && sink.activeFeature) {\r\n return name1 === feature.getSplittedFeatureName() && feature.matchesMetaForArrayOfConditions([\r\n ...arrayOfConditions,\r\n {propName: \"MountType\", propValue: sink.activeFeature.metaData[\"MountType\"]}\r\n ])\r\n }\r\n if (feature.metaData[\"Part\"] && feature.metaData[\"Part\"].includes(\"3\")\r\n && applianceParent && applianceParent.dishwasher && !applianceParent.dishwasher.disabled && applianceParent.dishwasher.activeFeature) {\r\n return false\r\n }\r\n if (feature.metaData[\"Part\"] && feature.metaData[\"Part\"].includes(\"4\")\r\n && applianceParent && applianceParent.stove && !applianceParent.stove.disabled && applianceParent.stove.activeFeature) {\r\n return false\r\n }\r\n if (feature.metaData[\"Part\"] && feature.metaData[\"Part\"].includes(\"6\")) { // 6 is fridge related\r\n if (!applianceParent || !applianceParent.fridge || applianceParent.fridge.disabled || !applianceParent.fridge.activeFeature) {\r\n return false\r\n }\r\n const fridgeConditions = applianceParent.fridge.getFridgeWidthAndHeightConditions();\r\n return name1 === feature.getSplittedFeatureName() && feature.matchesMetaForArrayOfConditions([...arrayOfConditions, ...fridgeConditions])\r\n }\r\n } else {\r\n if (name1 !== feature.getSplittedFeatureName()) {\r\n return false\r\n }\r\n if (feature.metaData[\"Part\"] && feature.metaData[\"Part\"].includes(\"2\")) {\r\n return feature.matchesMetaForArrayOfConditions(withDishWasherConditions)\r\n }\r\n if (feature.metaData[\"Part\"] && feature.metaData[\"Part\"].includes(\"3\")) {\r\n return feature.matchesMetaForArrayOfConditions(withStoveConditions)\r\n }\r\n if (feature.metaData[\"Part\"] && feature.metaData[\"Part\"].includes(\"4\")) {\r\n return feature.matchesMetaForArrayOfConditions(withFridgeConditions)\r\n }\r\n if (feature.metaData[\"Part\"] && feature.metaData[\"Part\"].includes(\"5\")) {\r\n if (!applianceParent || !applianceParent.oven || applianceParent.oven.disabled || !applianceParent.oven.activeFeature) {\r\n return false\r\n }\r\n }\r\n return feature.matchesMetaForArrayOfConditions(arrayOfConditions)\r\n }\r\n\r\n return name1 === feature.getSplittedFeatureName() && feature.matchesMetaForArrayOfConditions(arrayOfConditions)\r\n });\r\n\r\n // console.log(\"this.featuresParts\", this.featuresParts);\r\n // console.log(\"activeFeatureParts\", activeFeatureParts);\r\n activeFeatureParts.forEach((activeFeaturePart) => {\r\n activeFeaturePart.disabled = this.disabled\r\n });\r\n }\r\n return activeFeatureParts\r\n }\r\n\r\n\r\n}\r\n\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport {PLACEMENTS} from \"../../../../kvComponent/core/constants\";\r\n\r\nexport default class Sink extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'sink';\r\n this.partName = 'Sink';\r\n this.translateId = \"visualizer.kitchen.countertop.sink\";\r\n this.canBeDisabled = true;\r\n }\r\n\r\n load(dbFeature) {\r\n if (dbFeature.metaData && dbFeature.metaData[\"Placement\"] && dbFeature.metaData[\"Placement\"].includes(PLACEMENTS.Island)) {\r\n return false\r\n }\r\n return super.load_(dbFeature, new Sink());\r\n }\r\n\r\n disabledClick() {\r\n const relatedFaucet = this.getParent().faucet;\r\n if (relatedFaucet) {\r\n relatedFaucet.disabled = this.disabled;\r\n }\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport {METADATA, PLACEMENTS} from \"../../constants\";\r\n\r\nexport default class Faucet extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'faucet';\r\n this.partName = 'Faucet';\r\n this.translateId = \"visualizer.kitchen.countertop.faucet\";\r\n this.canBeDisabled = true;\r\n }\r\n\r\n load(dbFeature) {\r\n if (dbFeature.metaData && dbFeature.metaData[\"Placement\"] && dbFeature.metaData[\"Placement\"].includes(PLACEMENTS.Island)) {\r\n return false\r\n }\r\n const mountTypeMeta = dbFeature.metaData[\"MountType\"];\r\n if (mountTypeMeta && mountTypeMeta.includes(\"U\")) {\r\n METADATA.sinkUTypes.forEach(metaValue => {\r\n if (!mountTypeMeta.includes(metaValue)){\r\n mountTypeMeta.push(metaValue)\r\n }\r\n })\r\n }\r\n return super.load_(dbFeature, new Faucet());\r\n }\r\n\r\n getCurrentSinkMetaData() {\r\n const sinkParent = this.getParent().sink;\r\n let metaObject = {};\r\n if (sinkParent && sinkParent.activeFeature) {\r\n const sinkMeta = sinkParent.activeFeature.metaData[\"MountType\"];\r\n if (sinkMeta && (sinkMeta !== \"0\") && !sinkMeta.includes(\"0\")) {\r\n metaObject[\"MountType\"] = Array.isArray(sinkMeta) ? sinkMeta[0] : sinkMeta\r\n }\r\n const mountHolesMeta = sinkParent.activeFeature.metaData[\"MountHoles\"];\r\n if (mountHolesMeta && (mountHolesMeta !== \"0\") && !mountHolesMeta.includes(\"0\")) { // if 0 - we are showing all faucets\r\n metaObject[\"MountHoles\"] = mountHolesMeta\r\n }\r\n }\r\n return metaObject\r\n }\r\n\r\n getArrayOfConditions() {\r\n const conditions = super.getArrayOfConditions();\r\n const currentSinkMetaData = this.getCurrentSinkMetaData();\r\n [\"MountType\", \"MountHoles\"].forEach(propName => {\r\n if (currentSinkMetaData[propName]) {\r\n conditions.push({\r\n propName,\r\n propValue: currentSinkMetaData[propName]\r\n })\r\n }\r\n })\r\n // console.log(\"conditions\", conditions);\r\n return conditions;\r\n }\r\n\r\n disabledClick() {\r\n const relatedFaucet = this.getParent().sink;\r\n if (relatedFaucet) {\r\n relatedFaucet.disabled = this.disabled;\r\n }\r\n }\r\n}\r\n","import EdgeCommon from \"../edgeCommon\";\r\n\r\nexport default class EdgeProfile extends EdgeCommon {\r\n constructor(isChild, partNumber = 0) {\r\n super(isChild);\r\n this.partNumber = partNumber;\r\n this.partId = 'edge_profile';\r\n this.partName = 'Edge Profile';\r\n this.translateId = \"visualizer.kitchen.countertop.edge_profile\";\r\n // this.isStoneFeature = true;\r\n this.customClassName = \"edge\";\r\n this.hasNoVisualizerLayers = true;\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\n\r\nexport default class Cutouts extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'cutouts';\r\n this.partName = 'Cutouts';\r\n this.translateId = \"visualizer.kitchen.countertop.cutouts\";\r\n this.isStoneFeature = true;\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new Cutouts());\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\n\r\nexport default class Radius extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'radius';\r\n this.partName = 'Radius';\r\n this.translateId = \"visualizer.kitchen.countertop.radius\";\r\n this.isStoneFeature = true;\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new Radius());\r\n }\r\n}\r\n","import orderBy from \"lodash/orderBy\";\r\n\r\nimport {IntermediatePart} from \"../../intermediatePart\";\r\nimport store from \"../../../../../store\";\r\nimport {getColorFilterValue} from \"../../../../../misc/filtersFunctions\";\r\nimport Appliance from \"../../parts/appliance\";\r\n\r\n\r\nexport default class CrownMolding extends IntermediatePart {\r\n constructor(isChild, partNumber = 0) {\r\n super(isChild);\r\n this.partNumber = partNumber;\r\n this.partId = 'crown_molding';\r\n this.partName = 'Crown Molding';\r\n this.canBeDisabled = true;\r\n this.layerPriority = 3;\r\n this.translateId = \"visualizer.kitchen.cabinet.crown_molding\";\r\n this.hasAdditionalParts = true;\r\n }\r\n\r\n load(dbFeature) {\r\n const partNumber = (dbFeature.metaData[\"Part\"] && dbFeature.metaData[\"Part\"][0]) === \"1\" ? 1 : 2;\r\n return super.load_(dbFeature, new CrownMolding(false, partNumber), true, partNumber === 1 ? 'features' : 'featuresParts');\r\n }\r\n\r\n sortNavigationItems(navItems) {\r\n\r\n const cabinetParent = this.getParent();\r\n if (!cabinetParent.topCabinet || !cabinetParent.topCabinet.activeFeature) {\r\n return navItems\r\n }\r\n\r\n const filterGroups = store.getState().filterState.filterGroups;\r\n const colorFilterGroup = filterGroups.find(group => group.name === \"Color\");\r\n if (!colorFilterGroup) {\r\n return navItems\r\n }\r\n\r\n const currentTopCabinetColor = getColorFilterValue(cabinetParent.topCabinet.activeFeature, filterGroups, colorFilterGroup);\r\n if (!currentTopCabinetColor) {\r\n return navItems\r\n }\r\n\r\n navItems = orderBy(navItems, (navItem) => {\r\n const colorFilterValue = getColorFilterValue(navItem.part, filterGroups, colorFilterGroup);\r\n if (!colorFilterValue) {\r\n return false\r\n }\r\n return colorFilterValue.id === currentTopCabinetColor.id\r\n }, ['desc'])\r\n return navItems\r\n }\r\n\r\n disabledClick() {\r\n this.activeFeatureParts.forEach((activeFeaturePart) => {\r\n activeFeaturePart.disabled = this.disabled\r\n });\r\n const topCabinet = this.getParent().topCabinet;\r\n if (topCabinet && topCabinet.disabled && !this.disabled) {\r\n topCabinet.disabled = this.disabled;\r\n topCabinet.activeFeatureParts.forEach((activeFeaturePart) => {\r\n activeFeaturePart.disabled = this.disabled\r\n });\r\n const topHandle = this.getParent().topHandle;\r\n if (topHandle) {\r\n topHandle.disabled = this.disabled;\r\n }\r\n }\r\n }\r\n\r\n handleClick(ignoreLocked) {\r\n const parent = this.getParent();\r\n if (parent.getParent && parent.getParent()) {\r\n super.handleClick(ignoreLocked);\r\n parent.activeFeatureParts = parent.setActiveFeatureParts();\r\n } else {\r\n parent.crownMolding.activeFeature = this;\r\n }\r\n this.featureClicked();\r\n }\r\n\r\n availableFeatures(cabinetFeatures) {\r\n return cabinetFeatures.filter(cabinetFeature => cabinetFeature.partNumber === 1)\r\n }\r\n\r\n setLayers(layout) {\r\n const topCabinet = this.getParent().topCabinet;\r\n if (topCabinet && (topCabinet.disabled || !topCabinet.featureGroupEnabled)) {\r\n super.hideLayers();\r\n return\r\n }\r\n super.setLayers(layout);\r\n }\r\n\r\n getArrayOfConditions() {\r\n let conditions = super.getArrayOfConditions();\r\n const cabinetParent = this.getParent();\r\n if (cabinetParent.topCabinet && cabinetParent.topCabinet.activeFeature\r\n && cabinetParent.topCabinet.activeFeature.metaData[\"MatchingFeature\"]) {\r\n conditions.push({\r\n propName: 'MatchingFeature',\r\n propValue: cabinetParent.topCabinet.activeFeature.metaData[\"MatchingFeature\"]\r\n })\r\n }\r\n return conditions\r\n }\r\n\r\n getActiveFeaturePartsAccordingToActiveFeature(fromFeature = this.activeFeature, activeFeatureConditions = []) {\r\n let activeFeatureParts = [];\r\n if (fromFeature && fromFeature.partNumber) {\r\n const name1 = fromFeature.getSplittedFeatureName();\r\n // console.log(\"name1\", name1);\r\n let arrayOfConditions = activeFeatureConditions.length\r\n ? activeFeatureConditions\r\n : this.getActiveFeatureConditions(fromFeature);\r\n\r\n const cabinetParent = this.getParent();\r\n const applianceParent = cabinetParent.layout.parts[Appliance.id];\r\n\r\n activeFeatureParts = this.featuresParts.filter((feature) => {\r\n if (feature.metaData[\"Part\"] && feature.metaData[\"Part\"].includes(\"3\")) {\r\n if (!applianceParent || !applianceParent.oven || applianceParent.oven.disabled || !applianceParent.oven.activeFeature) {\r\n return false\r\n }\r\n return name1 === feature.getSplittedFeatureName() && feature.matchesMetaForArrayOfConditions(arrayOfConditions)\r\n }\r\n return false\r\n });\r\n\r\n // console.log(\"this.featuresParts\", this.featuresParts);\r\n // console.log(\"activeFeatureParts\", activeFeatureParts);\r\n activeFeatureParts.forEach((activeFeaturePart) => {\r\n activeFeaturePart.disabled = this.disabled\r\n });\r\n }\r\n return activeFeatureParts\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport Appliance from \"../../parts/appliance\";\r\nimport CountertopGroup from \"../../parts/countertopGroup\";\r\nimport {LayoutAbbreviations, METADATA, useOldCabinetLogic} from \"../../constants\";\r\n\r\nexport default class BottomCabinet extends IntermediatePart {\r\n constructor(isChild, partNumber = 0) {\r\n super(isChild);\r\n this.partNumber = partNumber;\r\n this.partId = 'bottom_cabinet';\r\n this.partName = 'Bottom Cabinet';\r\n this.translateId = \"visualizer.kitchen.cabinet.bottom_cabinet\";\r\n this.hasAdditionalParts = true;\r\n this.layerPriority = 4;\r\n this.allWallsCanBeApplied = true;\r\n if (isChild) {\r\n this.nextFeaturesPageToLoadArray = {};\r\n LayoutAbbreviations.forEach(layoutAbbreviation => {\r\n this.nextFeaturesPageToLoadArray[layoutAbbreviation] = {\r\n page: 0,\r\n allReceived: false,\r\n };\r\n });\r\n }\r\n }\r\n\r\n load(dbFeature) {\r\n const partNumber = (dbFeature.metaData[\"Part\"] && +dbFeature.metaData[\"Part\"][0]) === 1 ? 1 : 2;\r\n if (Array.isArray(dbFeature.metaData[\"MountType\"]) && dbFeature.metaData[\"MountType\"][0] === \"0\") {\r\n if (!dbFeature.metaData[\"MountType\"].includes(\"FM\")) {\r\n dbFeature.metaData[\"MountType\"].push(\"FM\")\r\n }\r\n if (!dbFeature.metaData[\"MountType\"].includes(\"ST\")) {\r\n dbFeature.metaData[\"MountType\"].push(\"ST\")\r\n }\r\n }\r\n if (dbFeature.metaData[\"RoomLayout\"]\r\n && (dbFeature.metaData[\"RoomLayout\"].includes(\"Layout3\") || dbFeature.metaData[\"RoomLayout\"].includes(\"3\"))) {\r\n // на этом лаяуте синки с разным маунтайпом, а у bottom есть только один парт с маунтайпом S, U\r\n // т.е. тут можно вообще игнорить маунттайп и матчить все синки с боттом кабинетами\r\n dbFeature.metaData[\"MountType\"] = METADATA.ALL\r\n }\r\n if (!dbFeature.metaData[\"Stovetop\"]) {\r\n dbFeature.metaData[\"Stovetop\"] = METADATA.NO\r\n }\r\n return super.load_(dbFeature, new BottomCabinet(false, partNumber), true, partNumber === 1 ? 'features' : 'featuresParts');\r\n }\r\n\r\n disabledClick() {\r\n this.activeFeatureParts.forEach((activeFeaturePart) => {\r\n activeFeaturePart.disabled = this.disabled\r\n });\r\n const applianceParent = this.getParent().layout.parts[Appliance.id];\r\n if (applianceParent && applianceParent.stovetop) {\r\n applianceParent.stovetop.disabled = this.disabled\r\n }\r\n }\r\n\r\n handleClick(ignoreLocked, clickFrom = \"\") {\r\n const parent = this.getParent();\r\n if (parent.getParent && parent.getParent()) {\r\n super.handleClick(ignoreLocked, clickFrom);\r\n parent.activeFeatureParts = parent.setActiveFeatureParts();\r\n } else {\r\n parent.bottomCabinet.activeFeature = this;\r\n }\r\n this.featureClicked();\r\n }\r\n\r\n getArrayOfConditions() {\r\n const conditions = super.getArrayOfConditions();\r\n if (useOldCabinetLogic) {\r\n return conditions\r\n }\r\n const cabinetParent = this.getParent();\r\n const countertopParent = cabinetParent.layout.parts[CountertopGroup.id];\r\n // const applianceParent = cabinetParent.layout.parts[Appliance.id];\r\n conditions.push({\r\n propName: \"MountType\",\r\n propValue: countertopParent && countertopParent.sink && countertopParent.sink.activeFeature\r\n && !countertopParent.sink.disabled && countertopParent.sink.featureGroupEnabled\r\n ? countertopParent.sink.activeFeature.metaData[\"MountType\"]\r\n : [\"U\"]\r\n });\r\n return conditions\r\n }\r\n\r\n getActiveFeatureConditions() {\r\n return this.getArrayOfConditions().filter(metaObject => {\r\n return metaObject.propName !== \"MountType\"\r\n })\r\n }\r\n\r\n getActiveFeaturePartsAccordingToActiveFeature(fromFeature = this.activeFeature, activeFeatureConditions = []) {\r\n let activeFeatureParts = [];\r\n if (fromFeature && fromFeature.partNumber) {\r\n const name1 = fromFeature.getSplittedFeatureName();\r\n // console.log(\"name1\", name1);\r\n let arrayOfConditions = activeFeatureConditions.length\r\n ? activeFeatureConditions\r\n : this.getActiveFeatureConditions(fromFeature);\r\n\r\n const cabinetParent = this.getParent();\r\n const countertopParent = cabinetParent.layout.parts[CountertopGroup.id];\r\n const applianceParent = cabinetParent.layout.parts[Appliance.id];\r\n const sink = countertopParent.sink;\r\n\r\n //part 1 will be with MountType\r\n // part 2 dishwasher - depends on dishwasher metaData Width\r\n //part 3 depends on stove metaData Width // on Room Layout 6 we have Range + Stovetop, not Stove\r\n // part 4 - fridge\r\n // part 5 - peninsula\r\n\r\n let withStoveConditions = [...arrayOfConditions];\r\n const rangeIsActive = applianceParent && applianceParent.range && !applianceParent.range.disabled && applianceParent.range.activeFeature;\r\n if (applianceParent && applianceParent.layout.type === 6) {\r\n withStoveConditions.push({\r\n propName: \"Stovetop\",\r\n propValue: rangeIsActive ? METADATA.NO : \"ST\",\r\n });\r\n }\r\n withStoveConditions.push({\r\n propName: \"Width\",\r\n propValue: rangeIsActive\r\n ? applianceParent.range.activeFeature.metaData[\"Width\"] || \"30\"\r\n : applianceParent\r\n && applianceParent.stove\r\n && applianceParent.stove.activeFeature\r\n && applianceParent.stove.activeFeature.metaData[\"Width\"]\r\n ? applianceParent.stove.activeFeature.metaData[\"Width\"]\r\n : \"30\"\r\n })\r\n // console.log(\"withStoveConditions\", withStoveConditions);\r\n const withDishWasherConditions = [...arrayOfConditions, {\r\n propName: \"Width\",\r\n propValue: applianceParent && applianceParent.dishwasher && applianceParent.dishwasher.activeFeature\r\n && applianceParent.dishwasher.activeFeature.metaData[\"Width\"]\r\n ? applianceParent.dishwasher.activeFeature.metaData[\"Width\"]\r\n : \"24\",\r\n }];\r\n const withFridgeConditions = [...arrayOfConditions, {\r\n propName: \"Width\",\r\n propValue: applianceParent && applianceParent.fridge && applianceParent.fridge.activeFeature\r\n && applianceParent.fridge.activeFeature.metaData[\"Width\"]\r\n ? applianceParent.fridge.activeFeature.metaData[\"Width\"]\r\n : \"36\",\r\n }];\r\n activeFeatureParts = this.featuresParts.filter((feature) => {\r\n if (useOldCabinetLogic) {\r\n if (feature.metaData[\"Part\"] && feature.metaData[\"Part\"].includes(\"2\")\r\n && sink && !sink.disabled && sink.activeFeature) {\r\n return name1 === feature.getSplittedFeatureName() && feature.matchesMetaForArrayOfConditions([\r\n ...arrayOfConditions,\r\n {propName: \"MountType\", propValue: sink.activeFeature.metaData[\"MountType\"]}\r\n ])\r\n }\r\n if (feature.metaData[\"Part\"] && feature.metaData[\"Part\"].includes(\"3\")\r\n && applianceParent && applianceParent.dishwasher && !applianceParent.dishwasher.disabled && applianceParent.dishwasher.activeFeature) {\r\n return false\r\n }\r\n if (feature.metaData[\"Part\"] && feature.metaData[\"Part\"].includes(\"4\")\r\n && applianceParent && applianceParent.stove && !applianceParent.stove.disabled && applianceParent.stove.activeFeature) {\r\n return false\r\n }\r\n if (feature.metaData[\"Part\"] && feature.metaData[\"Part\"].includes(\"6\")) { // 6 is fridge related\r\n if (!applianceParent || !applianceParent.fridge || applianceParent.fridge.disabled || !applianceParent.fridge.activeFeature) {\r\n return false\r\n }\r\n const fridgeConditions = applianceParent.fridge.getFridgeWidthAndHeightConditions();\r\n return name1 === feature.getSplittedFeatureName() && feature.matchesMetaForArrayOfConditions([...arrayOfConditions, ...fridgeConditions])\r\n }\r\n } else {\r\n if (name1 !== feature.getSplittedFeatureName()) {\r\n return false\r\n }\r\n if (feature.metaData[\"Part\"] && feature.metaData[\"Part\"].includes(\"2\")) {\r\n return feature.matchesMetaForArrayOfConditions(withDishWasherConditions)\r\n }\r\n if (feature.metaData[\"Part\"] && feature.metaData[\"Part\"].includes(\"3\")) {\r\n return feature.matchesMetaForArrayOfConditions(withStoveConditions)\r\n }\r\n if (feature.metaData[\"Part\"] && feature.metaData[\"Part\"].includes(\"4\")) {\r\n return feature.matchesMetaForArrayOfConditions(withFridgeConditions)\r\n }\r\n if (feature.metaData[\"Part\"] && feature.metaData[\"Part\"].includes(\"5\")) {\r\n if (!applianceParent || !applianceParent.oven || applianceParent.oven.disabled || !applianceParent.oven.activeFeature) {\r\n return false\r\n }\r\n }\r\n return feature.matchesMetaForArrayOfConditions(arrayOfConditions)\r\n }\r\n\r\n return name1 === feature.getSplittedFeatureName() && feature.matchesMetaForArrayOfConditions(arrayOfConditions)\r\n });\r\n\r\n // console.log(\"this.featuresParts\", this.featuresParts);\r\n // console.log(\"activeFeatureParts\", activeFeatureParts);\r\n activeFeatureParts.forEach((activeFeaturePart) => {\r\n activeFeaturePart.disabled = this.disabled\r\n });\r\n }\r\n return activeFeatureParts\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport Appliance from \"../../parts/appliance\";\r\nimport CountertopGroup from \"../../parts/countertopGroup\";\r\nimport {METADATA} from \"../../constants\";\r\n\r\nexport default class BottomHandle extends IntermediatePart {\r\n\r\n constructor(isChild, partNumber = 0) {\r\n super(isChild);\r\n this.partNumber = partNumber;\r\n this.partId = 'bottom_handle';\r\n this.partName = 'Bottom Handle';\r\n this.translateId = \"visualizer.kitchen.cabinet.bottom_handle\";\r\n this.canBeDisabled = true;\r\n this.layerPriority = 5;\r\n this.hasAdditionalParts = true;\r\n }\r\n\r\n load(dbFeature) {\r\n if (Array.isArray(dbFeature.metaData[\"MountType\"]) && dbFeature.metaData[\"MountType\"][0] === \"0\") {\r\n if (!dbFeature.metaData[\"MountType\"].includes(\"FM\")) {\r\n dbFeature.metaData[\"MountType\"].push(\"FM\")\r\n }\r\n if (!dbFeature.metaData[\"MountType\"].includes(\"ST\")) {\r\n dbFeature.metaData[\"MountType\"].push(\"ST\")\r\n }\r\n }\r\n if (dbFeature.metaData[\"RoomLayout\"]\r\n && (dbFeature.metaData[\"RoomLayout\"].includes(\"Layout3\") || dbFeature.metaData[\"RoomLayout\"].includes(\"3\"))) {\r\n // if (!dbFeature.metaData[\"MountType\"].includes(\"U\")) {\r\n // dbFeature.metaData[\"MountType\"].push(\"U\")\r\n // }\r\n // if (!dbFeature.metaData[\"MountType\"].includes(\"S\")) {\r\n // dbFeature.metaData[\"MountType\"].push(\"S\")\r\n // }\r\n dbFeature.metaData[\"MountType\"] = METADATA.ALL\r\n }\r\n if (!dbFeature.metaData[\"Stovetop\"]) {\r\n dbFeature.metaData[\"Stovetop\"] = METADATA.NO\r\n }\r\n const partNumber = (dbFeature.metaData[\"Part\"] && dbFeature.metaData[\"Part\"][0]) === \"1\" ? 1 : 2;\r\n return super.load_(dbFeature, new BottomHandle(false, partNumber), true, partNumber === 1 ? 'features' : 'featuresParts');\r\n }\r\n\r\n handleClick(ignoreLocked, clickFrom = \"\") {\r\n const parent = this.getParent();\r\n if (parent.getParent && parent.getParent()) {\r\n super.handleClick(ignoreLocked, clickFrom);\r\n parent.activeFeatureParts = parent.setActiveFeatureParts();\r\n } else {\r\n parent.bottomHandle.activeFeature = this;\r\n }\r\n this.featureClicked();\r\n }\r\n\r\n getArrayOfConditions() {\r\n const conditions = super.getArrayOfConditions();\r\n const cabinetParent = this.getParent();\r\n const countertopParent = cabinetParent.layout.parts[CountertopGroup.id];\r\n // const applianceParent = cabinetParent.layout.parts[Appliance.id];\r\n conditions.push({\r\n propName: \"MountType\",\r\n propValue: countertopParent && countertopParent.sink && countertopParent.sink.activeFeature\r\n && !countertopParent.sink.disabled && countertopParent.sink.featureGroupEnabled\r\n ? countertopParent.sink.activeFeature.metaData[\"MountType\"]\r\n : [\"U\"]\r\n });\r\n return conditions\r\n }\r\n\r\n getActiveFeatureConditions() {\r\n return this.getArrayOfConditions().filter(metaObject => {\r\n return metaObject.propName !== \"MountType\"\r\n })\r\n }\r\n\r\n getActiveFeaturePartsAccordingToActiveFeature(fromFeature = this.activeFeature, activeFeatureConditions = []) {\r\n let activeFeatureParts = [];\r\n if (fromFeature && fromFeature.partNumber) {\r\n const name1 = fromFeature.getSplittedFeatureName();\r\n // console.log(\"name1\", name1);\r\n let arrayOfConditions = activeFeatureConditions.length\r\n ? activeFeatureConditions\r\n : this.getActiveFeatureConditions(fromFeature);\r\n\r\n const cabinetParent = this.getParent();\r\n const applianceParent = cabinetParent.layout.parts[Appliance.id];\r\n\r\n //part 1 will be with MountType\r\n // part 2 dishwasher - depends on dishwasher metaData Width\r\n //part 3 depends on stove metaData Width // on Room Layout 6 we have Range + Stovetop, not Stove\r\n // part 4 - fridge\r\n // part 5 - peninsula\r\n\r\n let withStoveConditions = [...arrayOfConditions];\r\n const rangeIsActive = applianceParent && applianceParent.range && !applianceParent.range.disabled && applianceParent.range.activeFeature;\r\n if (applianceParent && applianceParent.layout.type === 6) {\r\n withStoveConditions.push({\r\n propName: \"Stovetop\",\r\n propValue: rangeIsActive ? METADATA.NO : \"ST\",\r\n });\r\n }\r\n withStoveConditions.push({\r\n propName: \"Width\",\r\n propValue: rangeIsActive\r\n ? applianceParent.range.activeFeature.metaData[\"Width\"] || \"30\"\r\n : applianceParent\r\n && applianceParent.stove\r\n && applianceParent.stove.activeFeature\r\n && applianceParent.stove.activeFeature.metaData[\"Width\"]\r\n ? applianceParent.stove.activeFeature.metaData[\"Width\"]\r\n : \"30\"\r\n })\r\n const withDishWasherConditions = [...arrayOfConditions, {\r\n propName: \"Width\",\r\n propValue: applianceParent && applianceParent.dishwasher && applianceParent.dishwasher.activeFeature\r\n && applianceParent.dishwasher.activeFeature.metaData[\"Width\"]\r\n ? applianceParent.dishwasher.activeFeature.metaData[\"Width\"]\r\n : \"24\",\r\n }];\r\n const withFridgeConditions = [...arrayOfConditions, {\r\n propName: \"Width\",\r\n propValue: applianceParent && applianceParent.fridge && applianceParent.fridge.activeFeature\r\n && applianceParent.fridge.activeFeature.metaData[\"Width\"]\r\n ? applianceParent.fridge.activeFeature.metaData[\"Width\"]\r\n : \"36\",\r\n }];\r\n activeFeatureParts = this.featuresParts.filter((feature) => {\r\n if (name1 !== feature.getSplittedFeatureName()) {\r\n return false\r\n }\r\n if (feature.metaData[\"Part\"] && feature.metaData[\"Part\"].includes(\"2\")) {\r\n return feature.matchesMetaForArrayOfConditions(withDishWasherConditions)\r\n }\r\n if (feature.metaData[\"Part\"] && feature.metaData[\"Part\"].includes(\"3\")) {\r\n return feature.matchesMetaForArrayOfConditions(withStoveConditions)\r\n }\r\n if (feature.metaData[\"Part\"] && feature.metaData[\"Part\"].includes(\"4\")) {\r\n return feature.matchesMetaForArrayOfConditions(withFridgeConditions)\r\n }\r\n if (feature.metaData[\"Part\"] && feature.metaData[\"Part\"].includes(\"5\")) {\r\n if (!applianceParent || !applianceParent.oven || applianceParent.oven.disabled || !applianceParent.oven.activeFeature) {\r\n return false\r\n }\r\n }\r\n return feature.matchesMetaForArrayOfConditions(arrayOfConditions)\r\n });\r\n\r\n // console.log(\"this.featuresParts\", this.featuresParts);\r\n // console.log(\"activeFeatureParts\", activeFeatureParts);\r\n activeFeatureParts.forEach((activeFeaturePart) => {\r\n activeFeaturePart.disabled = this.disabled\r\n });\r\n }\r\n return activeFeatureParts\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport Appliance from \"../../parts/appliance\";\r\n\r\nexport default class TopHandle extends IntermediatePart {\r\n\r\n constructor(isChild, partNumber = 0) {\r\n super(isChild);\r\n this.partNumber = partNumber;\r\n this.partId = 'top_handle';\r\n this.partName = 'Top Handle';\r\n this.canBeDisabled = true;\r\n this.layerPriority = 2;\r\n this.translateId = \"visualizer.kitchen.cabinet.top_handle\";\r\n this.hasAdditionalParts = true;\r\n }\r\n\r\n load(dbFeature) {\r\n const partNumber = (dbFeature.metaData[\"Part\"] && dbFeature.metaData[\"Part\"][0]) === \"1\" ? 1 : 2;\r\n return super.load_(dbFeature, new TopHandle(false, partNumber), true, partNumber === 1 ? 'features' : 'featuresParts');\r\n }\r\n\r\n getArrayOfConditions() {\r\n const conditions = super.getArrayOfConditions();\r\n const cabinetParent = this.getParent();\r\n const applianceParent = cabinetParent.layout.parts[Appliance.id];\r\n const hoodIsVisible = applianceParent && applianceParent.hood && applianceParent.hood.activeFeature && !applianceParent.hood.disabled;\r\n const microwaveIsVisible = applianceParent && applianceParent.microwave && applianceParent.microwave.activeFeature && !applianceParent.microwave.disabled;\r\n conditions.push({\r\n propName: \"Hood\",\r\n propValue: hoodIsVisible || ((cabinetParent.layout.type === 6) && microwaveIsVisible) ? \"H\" : \"C\"\r\n });\r\n if (hoodIsVisible && applianceParent.hood.activeFeature.metaData[\"Width\"]) {\r\n conditions.push({\r\n propName: \"Width\",\r\n propValue: applianceParent.hood.activeFeature.metaData[\"Width\"]\r\n });\r\n }\r\n return conditions\r\n }\r\n\r\n getActiveFeatureConditions() {\r\n return this.getArrayOfConditions().filter(metaObject => {\r\n return metaObject.propName !== \"Hood\" && metaObject.propName !== \"Width\"\r\n })\r\n }\r\n\r\n getActiveFeaturePartsAccordingToActiveFeature(fromFeature = this.activeFeature, activeFeatureConditions = []) {\r\n let activeFeatureParts = [];\r\n if (fromFeature && fromFeature.partNumber) {\r\n const name1 = fromFeature.getSplittedFeatureName();\r\n // console.log(\"name1\", name1);\r\n let arrayOfConditions = activeFeatureConditions.length\r\n ? activeFeatureConditions\r\n : this.getActiveFeatureConditions(fromFeature);\r\n\r\n const cabinetParent = this.getParent();\r\n const applianceParent = cabinetParent.layout.parts[Appliance.id];\r\n\r\n // part1 - depends on hood - H hood enabled, С - disabled\r\n // part1 - depends on hood \"Width\"\r\n // part2 - depends on Fridge\r\n activeFeatureParts = this.featuresParts.filter((feature) => {\r\n if (feature.metaData[\"Part\"] && feature.metaData[\"Part\"].includes(\"2\")) {\r\n const fridgeIsVisible = applianceParent && applianceParent.fridge && !applianceParent.fridge.disabled\r\n && applianceParent.fridge.activeFeature;\r\n const fridgeConditions = applianceParent && applianceParent.fridge\r\n ? applianceParent.fridge.getFridgeWidthAndHeightConditions()\r\n : [];\r\n return name1 === feature.getSplittedFeatureName() && feature.matchesMetaForArrayOfConditions([\r\n ...arrayOfConditions, {\r\n propName: \"Fridge\",\r\n propValue: fridgeIsVisible ? \"F\" : \"C\"\r\n }, ...fridgeConditions\r\n ])\r\n } else if (feature.metaData[\"Part\"] && feature.metaData[\"Part\"].includes(\"3\")) {\r\n if (!applianceParent || !applianceParent.oven || applianceParent.oven.disabled || !applianceParent.oven.activeFeature) {\r\n return false\r\n }\r\n return name1 === feature.getSplittedFeatureName() && feature.matchesMetaForArrayOfConditions(arrayOfConditions)\r\n }\r\n return false\r\n });\r\n\r\n // console.log(\"this.featuresParts\", this.featuresParts);\r\n // console.log(\"activeFeatureParts\", activeFeatureParts);\r\n activeFeatureParts.forEach((activeFeaturePart) => {\r\n activeFeaturePart.disabled = this.disabled\r\n });\r\n }\r\n return activeFeatureParts\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport Appliance from \"../../parts/appliance\";\r\nimport {METADATA} from \"../../constants\";\r\nimport Countertop from \"../countertop/countertop\";\r\n\r\nexport default class DoorHandle extends IntermediatePart {\r\n\r\n constructor(isChild, partNumber = 0) {\r\n super(isChild);\r\n this.partNumber = partNumber;\r\n this.partId = 'door_handle';\r\n this.partName = 'Door Handle';\r\n this.canBeDisabled = true;\r\n this.layerPriority = 2;\r\n this.translateId = \"visualizer.kitchen.cabinet.door_handle\";\r\n this.hasAdditionalParts = true;\r\n // Door Handle and Drawer Handle are the same as Top Handle and Bottom Handle\r\n // Top Handle, part 1, size 30, H --> Door Handle, part 1, size 30, H\r\n // Top Handle, part 1, size 30, C --> Door Handle, part 1, size 30, C\r\n // Top Handle, part 2, size 36 --> Door Handle, part 2, size 36\r\n // Top Handle, part 3, size 30 --> Door Handle, part 3, size 30\r\n // 9:42\r\n // Bottom Handle, part 1, size 0, S U --> Drawer Handle, part 1, size 0, S U /// Placement Bottom\r\n // --> Door Handle, part 1, size 0, S U /// Placement Bottom\r\n // 2. Bottom Handle, part 3, size 30 --> Drawer Handle, part 3, size 30 /// Placement Bottom\r\n // --> Door Handle, part 3, size 30 /// Placement Bottom\r\n // 3. Bottom Handle, part 3, size 30, ST --> Drawer Handle, part 3, size 30, ST /// Placement Bottom\r\n // --> Door Handle, part 3, size 30, ST /// Placement Bottom\r\n // 4. Bottom Handle, part 4, size 36 --> Drawer Handle, part 4, size 36 /// Placement Bottom\r\n // --> Door Handle, part 4, size 36 /// Placement Bottom\r\n // 5. Bottom Handle, part 5, size 30, O --> Drawer Handle, part 5, size 30, O (edited) /// Placement Bottom\r\n }\r\n\r\n load(dbFeature) {\r\n if (((dbFeature.metaData[\"Part\"] && dbFeature.metaData[\"Part\"][0]) === \"1\") && dbFeature.metaData[\"Placement\"]\r\n && dbFeature.metaData[\"Placement\"].includes(\"Bottom\")) {\r\n dbFeature.metaData[\"Part\"] = [\"6\"];\r\n // console.log(\"dbFeaturedbF6\", dbFeature);\r\n } else if (((dbFeature.metaData[\"Part\"] && dbFeature.metaData[\"Part\"][0]) === \"3\") && dbFeature.metaData[\"Placement\"]\r\n && dbFeature.metaData[\"Placement\"].includes(\"Bottom\")) {\r\n dbFeature.metaData[\"Part\"] = [\"7\"];\r\n // console.log(\"dbFeaturedbFeature7\", dbFeature);\r\n }\r\n if (Array.isArray(dbFeature.metaData[\"MountType\"]) && dbFeature.metaData[\"MountType\"][0] === \"0\") {\r\n if (!dbFeature.metaData[\"MountType\"].includes(\"FM\")) {\r\n dbFeature.metaData[\"MountType\"].push(\"FM\")\r\n }\r\n if (!dbFeature.metaData[\"MountType\"].includes(\"ST\")) {\r\n dbFeature.metaData[\"MountType\"].push(\"ST\")\r\n }\r\n }\r\n if (dbFeature.metaData[\"RoomLayout\"]\r\n && (dbFeature.metaData[\"RoomLayout\"].includes(\"Layout3\") || dbFeature.metaData[\"RoomLayout\"].includes(\"3\"))) {\r\n dbFeature.metaData[\"MountType\"] = METADATA.ALL\r\n }\r\n if (dbFeature.metaData[\"RoomLayout\"]\r\n && (dbFeature.metaData[\"RoomLayout\"].includes(\"Layout6\") || dbFeature.metaData[\"RoomLayout\"].includes(\"6\"))) {\r\n if (!dbFeature.metaData[\"Stovetop\"]) {\r\n dbFeature.metaData[\"Stovetop\"] = METADATA.NO\r\n }\r\n }\r\n const partNumber = (dbFeature.metaData[\"Part\"] && dbFeature.metaData[\"Part\"][0]) === \"1\" ? 1 : 2;\r\n return super.load_(dbFeature, new DoorHandle(false, partNumber), true, partNumber === 1 ? 'features' : 'featuresParts');\r\n }\r\n\r\n getArrayOfConditions() {\r\n const conditions = super.getArrayOfConditions();\r\n const cabinetParent = this.getParent();\r\n const applianceParent = cabinetParent.layout.parts[Appliance.id];\r\n const hoodIsVisible = applianceParent && applianceParent.hood && applianceParent.hood.activeFeature && !applianceParent.hood.disabled;\r\n const microwaveIsVisible = applianceParent && applianceParent.microwave && applianceParent.microwave.activeFeature && !applianceParent.microwave.disabled;\r\n conditions.push({\r\n propName: \"Hood\",\r\n propValue: hoodIsVisible || ((cabinetParent.layout.type === 6) && microwaveIsVisible) ? \"H\" : \"C\"\r\n });\r\n if (hoodIsVisible && applianceParent.hood.activeFeature.metaData[\"Width\"]) {\r\n conditions.push({\r\n propName: \"Width\",\r\n propValue: applianceParent.hood.activeFeature.metaData[\"Width\"]\r\n });\r\n }\r\n return conditions\r\n }\r\n\r\n getActiveFeatureConditions() {\r\n return this.getArrayOfConditions().filter(metaObject => {\r\n return metaObject.propName !== \"Hood\" && metaObject.propName !== \"Width\"\r\n })\r\n }\r\n\r\n getActiveFeaturePartsAccordingToActiveFeature(fromFeature = this.activeFeature, activeFeatureConditions = []) {\r\n let activeFeatureParts = [];\r\n if (fromFeature && fromFeature.partNumber) {\r\n const name1 = fromFeature.getSplittedFeatureName();\r\n // console.log(\"name1\", name1);\r\n let arrayOfConditions = activeFeatureConditions.length\r\n ? activeFeatureConditions\r\n : this.getActiveFeatureConditions(fromFeature);\r\n\r\n const cabinetParent = this.getParent();\r\n const applianceParent = cabinetParent.layout.parts[Appliance.id];\r\n const countertopParent = cabinetParent.layout.parts[Countertop.id];\r\n\r\n //part 1 will be with MountType\r\n // part 2 dishwasher - depends on dishwasher metaData Width\r\n //part 3 depends on stove metaData Width // on Room Layout 6 we have Range + Stovetop, not Stove\r\n // part 4 - fridge\r\n // part 5 - peninsula\r\n\r\n let withStoveConditions = [...arrayOfConditions];\r\n if (applianceParent && applianceParent.layout.type === 6) {\r\n const rangeIsActive = applianceParent && applianceParent.range && !applianceParent.range.disabled && applianceParent.range.activeFeature;\r\n withStoveConditions.push({\r\n propName: \"Stovetop\",\r\n propValue: rangeIsActive ? METADATA.NO : \"ST\",\r\n });\r\n if (rangeIsActive && applianceParent.range.activeFeature.metaData[\"Width\"]) {\r\n withStoveConditions.push({\r\n propName: \"Width\",\r\n propValue: applianceParent.range.activeFeature.metaData[\"Width\"],\r\n })\r\n }\r\n } else {\r\n withStoveConditions.push({\r\n propName: \"Width\",\r\n propValue: applianceParent && applianceParent.stove && applianceParent.stove.activeFeature\r\n && applianceParent.stove.activeFeature.metaData[\"Width\"]\r\n ? applianceParent.stove.activeFeature.metaData[\"Width\"]\r\n : \"30\",\r\n })\r\n }\r\n const withFridgeConditions = [...arrayOfConditions, {\r\n propName: \"Width\",\r\n propValue: applianceParent && applianceParent.fridge && applianceParent.fridge.activeFeature\r\n && applianceParent.fridge.activeFeature.metaData[\"Width\"]\r\n ? applianceParent.fridge.activeFeature.metaData[\"Width\"]\r\n : \"36\",\r\n }];\r\n activeFeatureParts = this.featuresParts.filter((feature) => {\r\n if (name1 !== feature.getSplittedFeatureName()) {\r\n return false\r\n }\r\n if (feature.metaData[\"Part\"] && feature.metaData[\"Part\"].includes(\"2\")) {\r\n const fridgeIsVisible = applianceParent && applianceParent.fridge && !applianceParent.fridge.disabled\r\n && applianceParent.fridge.activeFeature;\r\n const fridgeConditions = applianceParent && applianceParent.fridge\r\n ? applianceParent.fridge.getFridgeWidthAndHeightConditions()\r\n : [];\r\n return feature.matchesMetaForArrayOfConditions([\r\n ...arrayOfConditions, {\r\n propName: \"Fridge\",\r\n propValue: fridgeIsVisible ? \"F\" : \"C\"\r\n }, ...fridgeConditions\r\n ])\r\n } else if (feature.metaData[\"Part\"] && feature.metaData[\"Part\"].includes(\"3\")) {\r\n if (!applianceParent || !applianceParent.oven || applianceParent.oven.disabled || !applianceParent.oven.activeFeature) {\r\n return false\r\n }\r\n return feature.matchesMetaForArrayOfConditions(arrayOfConditions)\r\n }\r\n if (feature.metaData[\"Part\"] && feature.metaData[\"Part\"].includes(\"4\")) {\r\n return feature.matchesMetaForArrayOfConditions(withFridgeConditions)\r\n }\r\n if (feature.metaData[\"Part\"] && feature.metaData[\"Part\"].includes(\"5\")) {\r\n if (!applianceParent || !applianceParent.oven || applianceParent.oven.disabled || !applianceParent.oven.activeFeature) {\r\n return false\r\n }\r\n }\r\n if (feature.metaData[\"Part\"] && feature.metaData[\"Part\"].includes(\"6\")) {\r\n if (countertopParent && countertopParent.sink && countertopParent.sink.activeFeature && !countertopParent.sink.disabled) {\r\n return feature.matchesMetaForArrayOfConditions([\r\n ...arrayOfConditions, {\r\n propName: \"MountType\",\r\n propValue: countertopParent.sink.activeFeature.metaData[\"MountType\"]\r\n }])\r\n }\r\n }\r\n if (feature.metaData[\"Part\"] && feature.metaData[\"Part\"].includes(\"7\")) {\r\n return feature.matchesMetaForArrayOfConditions(withStoveConditions)\r\n }\r\n return feature.matchesMetaForArrayOfConditions(arrayOfConditions)\r\n });\r\n\r\n // console.log(\"this.featuresParts\", this.featuresParts);\r\n // console.log(\"activeFeatureParts\", activeFeatureParts);\r\n activeFeatureParts.forEach((activeFeaturePart) => {\r\n activeFeaturePart.disabled = this.disabled\r\n });\r\n }\r\n return activeFeatureParts\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport Appliance from \"../../parts/appliance\";\r\nimport CountertopGroup from \"../../parts/countertopGroup\";\r\nimport {METADATA} from \"../../constants\";\r\n\r\nexport default class DrawerHandle extends IntermediatePart {\r\n\r\n constructor(isChild, partNumber = 0) {\r\n super(isChild);\r\n this.partNumber = partNumber;\r\n this.partId = 'drawer_handle';\r\n this.partName = 'Drawer Handle';\r\n this.translateId = \"visualizer.kitchen.cabinet.drawer_handle\";\r\n this.canBeDisabled = true;\r\n this.layerPriority = 5;\r\n this.hasAdditionalParts = true;\r\n }\r\n\r\n load(dbFeature) {\r\n if (Array.isArray(dbFeature.metaData[\"MountType\"]) && dbFeature.metaData[\"MountType\"][0] === \"0\") {\r\n if (!dbFeature.metaData[\"MountType\"].includes(\"FM\")) {\r\n dbFeature.metaData[\"MountType\"].push(\"FM\")\r\n }\r\n if (!dbFeature.metaData[\"MountType\"].includes(\"ST\")) {\r\n dbFeature.metaData[\"MountType\"].push(\"ST\")\r\n }\r\n }\r\n if (dbFeature.metaData[\"RoomLayout\"]\r\n && (dbFeature.metaData[\"RoomLayout\"].includes(\"Layout3\") || dbFeature.metaData[\"RoomLayout\"].includes(\"3\"))) {\r\n // if (!dbFeature.metaData[\"MountType\"].includes(\"U\")) {\r\n // dbFeature.metaData[\"MountType\"].push(\"U\")\r\n // }\r\n // if (!dbFeature.metaData[\"MountType\"].includes(\"S\")) {\r\n // dbFeature.metaData[\"MountType\"].push(\"S\")\r\n // }\r\n dbFeature.metaData[\"MountType\"] = METADATA.ALL\r\n }\r\n if (dbFeature.metaData[\"RoomLayout\"]\r\n && (dbFeature.metaData[\"RoomLayout\"].includes(\"Layout6\") || dbFeature.metaData[\"RoomLayout\"].includes(\"6\"))) {\r\n if (!dbFeature.metaData[\"Stovetop\"]) {\r\n dbFeature.metaData[\"Stovetop\"] = METADATA.NO\r\n }\r\n }\r\n const partNumber = (dbFeature.metaData[\"Part\"] && dbFeature.metaData[\"Part\"][0]) === \"1\" ? 1 : 2;\r\n return super.load_(dbFeature, new DrawerHandle(false, partNumber), true, partNumber === 1 ? 'features' : 'featuresParts');\r\n }\r\n\r\n handleClick(ignoreLocked, clickFrom = \"\") {\r\n const parent = this.getParent();\r\n if (parent.getParent && parent.getParent()) {\r\n super.handleClick(ignoreLocked, clickFrom);\r\n parent.activeFeatureParts = parent.setActiveFeatureParts();\r\n } else {\r\n parent.bottomHandle.activeFeature = this;\r\n }\r\n this.featureClicked();\r\n }\r\n\r\n getArrayOfConditions() {\r\n const conditions = super.getArrayOfConditions();\r\n const cabinetParent = this.getParent();\r\n const countertopParent = cabinetParent.layout.parts[CountertopGroup.id];\r\n // const applianceParent = cabinetParent.layout.parts[Appliance.id];\r\n const sinkIsVisible = countertopParent && countertopParent.sink && countertopParent.sink.activeFeature && !countertopParent.sink.disabled;\r\n if (sinkIsVisible) {\r\n conditions.push({\r\n propName: \"MountType\",\r\n propValue: countertopParent.sink.activeFeature.metaData[\"MountType\"]\r\n });\r\n }\r\n return conditions\r\n }\r\n\r\n getActiveFeatureConditions() {\r\n return this.getArrayOfConditions().filter(metaObject => {\r\n return metaObject.propName !== \"MountType\"\r\n })\r\n }\r\n\r\n getActiveFeaturePartsAccordingToActiveFeature(fromFeature = this.activeFeature, activeFeatureConditions = []) {\r\n let activeFeatureParts = [];\r\n if (fromFeature && fromFeature.partNumber) {\r\n const name1 = fromFeature.getSplittedFeatureName();\r\n // console.log(\"name1\", name1);\r\n let arrayOfConditions = activeFeatureConditions.length\r\n ? activeFeatureConditions\r\n : this.getActiveFeatureConditions(fromFeature);\r\n\r\n const cabinetParent = this.getParent();\r\n const applianceParent = cabinetParent.layout.parts[Appliance.id];\r\n\r\n //part 1 will be with MountType\r\n // part 2 dishwasher - depends on dishwasher metaData Width\r\n //part 3 depends on stove metaData Width // on Room Layout 6 we have Range + Stovetop, not Stove\r\n // part 4 - fridge\r\n // part 5 - peninsula\r\n\r\n let withStoveConditions = [...arrayOfConditions];\r\n if (applianceParent && applianceParent.layout.type === 6) {\r\n const rangeIsActive = applianceParent && applianceParent.range && !applianceParent.range.disabled && applianceParent.range.activeFeature;\r\n withStoveConditions.push({\r\n propName: \"Stovetop\",\r\n propValue: rangeIsActive ? METADATA.NO : \"ST\",\r\n });\r\n if (rangeIsActive && applianceParent.range.activeFeature.metaData[\"Width\"]) {\r\n withStoveConditions.push({\r\n propName: \"Width\",\r\n propValue: applianceParent.range.activeFeature.metaData[\"Width\"],\r\n })\r\n }\r\n } else {\r\n withStoveConditions.push({\r\n propName: \"Width\",\r\n propValue: applianceParent && applianceParent.stove && applianceParent.stove.activeFeature\r\n && applianceParent.stove.activeFeature.metaData[\"Width\"]\r\n ? applianceParent.stove.activeFeature.metaData[\"Width\"]\r\n : \"30\",\r\n })\r\n }\r\n const withDishWasherConditions = [...arrayOfConditions, {\r\n propName: \"Width\",\r\n propValue: applianceParent && applianceParent.dishwasher && applianceParent.dishwasher.activeFeature\r\n && applianceParent.dishwasher.activeFeature.metaData[\"Width\"]\r\n ? applianceParent.dishwasher.activeFeature.metaData[\"Width\"]\r\n : \"24\",\r\n }];\r\n const withFridgeConditions = [...arrayOfConditions, {\r\n propName: \"Width\",\r\n propValue: applianceParent && applianceParent.fridge && applianceParent.fridge.activeFeature\r\n && applianceParent.fridge.activeFeature.metaData[\"Width\"]\r\n ? applianceParent.fridge.activeFeature.metaData[\"Width\"]\r\n : \"36\",\r\n }];\r\n activeFeatureParts = this.featuresParts.filter((feature) => {\r\n if (name1 !== feature.getSplittedFeatureName()) {\r\n return false\r\n }\r\n if (feature.metaData[\"Part\"] && feature.metaData[\"Part\"].includes(\"2\")) {\r\n return feature.matchesMetaForArrayOfConditions(withDishWasherConditions)\r\n }\r\n if (feature.metaData[\"Part\"] && feature.metaData[\"Part\"].includes(\"3\")) {\r\n return feature.matchesMetaForArrayOfConditions(withStoveConditions)\r\n }\r\n if (feature.metaData[\"Part\"] && feature.metaData[\"Part\"].includes(\"4\")) {\r\n return feature.matchesMetaForArrayOfConditions(withFridgeConditions)\r\n }\r\n if (feature.metaData[\"Part\"] && feature.metaData[\"Part\"].includes(\"5\")) {\r\n if (!applianceParent || !applianceParent.oven || applianceParent.oven.disabled || !applianceParent.oven.activeFeature) {\r\n return false\r\n }\r\n }\r\n return feature.matchesMetaForArrayOfConditions(arrayOfConditions)\r\n });\r\n\r\n // console.log(\"this.featuresParts\", this.featuresParts);\r\n // console.log(\"activeFeatureParts\", activeFeatureParts);\r\n activeFeatureParts.forEach((activeFeaturePart) => {\r\n activeFeaturePart.disabled = this.disabled\r\n });\r\n }\r\n return activeFeatureParts\r\n }\r\n}\r\n","import React, {Fragment} from \"react\";\r\nimport {View, Text, Image} from \"@react-pdf/renderer\";\r\nimport PropTypes from \"prop-types\";\r\n\r\nimport {wizardGroupInterface} from \"../../../interfaces/wizardItemInterface\";\r\nimport {getCartItemName} from \"./printDocumentFunctions\";\r\n\r\nconst PrintDocumentBodyWizardItem = (props) => {\r\n\r\n const {styles, wizardGroup, selectedFeature, fabricatorData, printContext, locale, cartItemsThumbnails} = props;\r\n\r\n const baseInfo = (\r\n\r\n \r\n {selectedFeature\r\n ? getCartItemName(selectedFeature, fabricatorData, printContext, locale)\r\n : wizardGroup.productCartTitle || wizardGroup.title || wizardGroup.groupName}\r\n \r\n \r\n \r\n {wizardGroup.productCartDescription || \"\"}\r\n \r\n \r\n \r\n )\r\n\r\n const withThumbnail = fabricatorData.receiptSettings && fabricatorData.receiptSettings.showThumbnailsAndDescriptions\r\n && cartItemsThumbnails\r\n && cartItemsThumbnails[wizardGroup.id];\r\n\r\n return (\r\n \r\n \r\n {wizardGroup.title || wizardGroup.groupName}\r\n \r\n \r\n {withThumbnail ? (\r\n \r\n \r\n \r\n \r\n {baseInfo}\r\n \r\n \r\n ) : baseInfo}\r\n \r\n \r\n )\r\n};\r\n\r\nPrintDocumentBodyWizardItem.propTypes = {\r\n wizardGroup: PropTypes.shape(wizardGroupInterface),\r\n // locale: PropTypes.string.isRequired,\r\n styles: PropTypes.object.isRequired,\r\n};\r\n\r\nexport default PrintDocumentBodyWizardItem\r\n","import React, {useContext} from \"react\";\r\nimport {View, Text} from '@react-pdf/renderer';\r\nimport PropTypes from \"prop-types\";\r\n\r\nimport {\r\n getCurrencySign,\r\n getPriceWithCurrency,\r\n getQuotePriceWithTaxes,\r\n getTotalPrice, sortByOrder,\r\n toFixedPrice\r\n} from \"../../../misc/helpers\";\r\nimport {DISCOUNT_TYPES} from \"../../priceWorksheet/discounstInterface\";\r\nimport {\r\n getDepositAmount, getDepositDiscount,\r\n getDiscountsForSection,\r\n getSubTotalPrice,\r\n shouldCalculateDiscount\r\n} from \"../../priceWorksheet/discountFunctions\";\r\nimport {PrintDocumentContext} from \"./printDocumentContext\";\r\nimport PrintDocumentDisclaimer from \"./printDocumentDisclaimer\";\r\nimport {getShowPrice} from \"../../../misc/priceFunctions\";\r\nimport {getDifferentCurrencyCartItems} from \"../../../misc/misc2\";\r\nimport {isCafeCountetops} from \"../../../misc/fabricatorHardcode\";\r\n\r\nconst PrintDocumentTotal = (props) => {\r\n const {styles, priceWorksheetState, fabricatorData, locale, cartItems} = props;\r\n const {discountSections, customAddedDiscounts} = priceWorksheetState;\r\n const fabricatorSettings = fabricatorData.settings;\r\n const printContext = useContext(PrintDocumentContext);\r\n\r\n if (fabricatorData.isAmericanImport) {\r\n return null\r\n }\r\n\r\n let subTotalPrice = getTotalPrice(null, false).materialPrice;\r\n const totalPrice = getTotalPrice();\r\n let grandTotal = getQuotePriceWithTaxes(totalPrice);\r\n\r\n let allTaxes = totalPrice.priceTaxes.length\r\n ? totalPrice.priceTaxes\r\n : [{name: \"\", materialTax: totalPrice.materialTaxes}];\r\n const showTaxes = allTaxes.some(tax => tax.materialTax > 0);\r\n\r\n const roundedPrice = (price) => toFixedPrice(Math.trunc(price * 100) / 100);\r\n\r\n const getDiscountPercentageAmount = (discountSections, discountSection, discount) => {\r\n const currentTotal = getSubTotalPrice(discountSections, discountSection, discount, true, customAddedDiscounts);\r\n const priceTaken = currentTotal * discount.amount / 100 // for ex. 25% from 2700 = 625\r\n return roundedPrice(priceTaken);\r\n };\r\n\r\n let discountsTotalAmount = 0;\r\n if (discountSections.length) {\r\n discountSections.forEach(discountSection => {\r\n const allDiscounts = sortByOrder(getDiscountsForSection(discountSection, customAddedDiscounts));\r\n allDiscounts.forEach(discount => {\r\n if (shouldCalculateDiscount(discount)) {\r\n const discountAmount = (discount.type === DISCOUNT_TYPES.price)\r\n ? discount.amount\r\n : getDiscountPercentageAmount(discountSections, discountSection, discount);\r\n discountsTotalAmount = discountsTotalAmount + (+discountAmount);\r\n }\r\n })\r\n })\r\n }\r\n\r\n const showPrice = getShowPrice(fabricatorData, true);\r\n\r\n if (!showPrice) {\r\n return (\r\n \r\n \r\n \r\n )\r\n }\r\n\r\n const differentCurrencyObjects = getDifferentCurrencyCartItems(fabricatorSettings, cartItems);\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n {differentCurrencyObjects.length ? differentCurrencyObjects.map((currObject, currObjectIndex) => {\r\n let currencySubTotal = getTotalPrice(null, false, currObject.cartItems).materialPrice;\r\n currencySubTotal = toFixedPrice(currencySubTotal, true);\r\n return (\r\n \r\n {printContext.messages[\"receipt.total.subTotal\"]}: \r\n \r\n {getCurrencySign(currObject.currency, fabricatorSettings) + currencySubTotal}\r\n \r\n \r\n )\r\n }) : null}\r\n \r\n {printContext.messages[\"receipt.total.subTotal\"]}: \r\n {getPriceWithCurrency(fabricatorSettings, subTotalPrice, null, false, true)} \r\n \r\n {discountsTotalAmount ? (\r\n \r\n {printContext.messages[\"receipt.total.discounts\"]}: \r\n -{getPriceWithCurrency(fabricatorSettings, roundedPrice(discountsTotalAmount), null, false, true)} \r\n \r\n ) : null}\r\n {showTaxes ? allTaxes.map((taxObject, taxObjectIndex) => {\r\n const taxTotal = taxObject.materialTax;\r\n const taxName = taxObject.nameIntl && taxObject.nameIntl[locale]\r\n ? taxObject.nameIntl[locale]\r\n : taxObject.state || printContext.messages[\"receipt.total.tax\"]\r\n return (\r\n \r\n {taxName} \r\n {getPriceWithCurrency(fabricatorSettings, taxTotal, null, false, true)} \r\n \r\n )\r\n }) : null}\r\n {totalPrice.installationTaxes ? (\r\n \r\n {printContext.messages[\"receipt.total.installationTaxes\"]} \r\n {getPriceWithCurrency(fabricatorSettings, totalPrice.installationTaxes, null, false, true)} \r\n \r\n ) : null}\r\n {fabricatorSettings.useShipping || isCafeCountetops ? (\r\n \r\n {printContext.messages[\"grohe.cart.confirm.columns.delivery\"]} \r\n {getPriceWithCurrency(fabricatorSettings, totalPrice.totalDeliveryCost, null, false, true)} \r\n \r\n ) : null}\r\n {(fabricatorSettings.deposit && fabricatorSettings.enableDeposit) || getDepositDiscount(discountSections) ? (\r\n \r\n {printContext.messages[\"depositPopup.depositAmount\"]}: \r\n \r\n {getPriceWithCurrency(fabricatorSettings, getDepositAmount(discountSections, grandTotal, fabricatorData), null, false, true)}\r\n \r\n \r\n ) : null}\r\n {differentCurrencyObjects.length ? differentCurrencyObjects.map(currObject => {\r\n const currentTotal = getTotalPrice(null, true, currObject.cartItems);\r\n const total = toFixedPrice(getQuotePriceWithTaxes(currentTotal), true)\r\n return (\r\n \r\n {printContext.messages[\"receipt.total.total\"]}: \r\n {getCurrencySign(currObject.currency, fabricatorSettings) + total} \r\n \r\n )\r\n }) : null}\r\n \r\n {printContext.messages[\"receipt.total.total\"]}: \r\n {getPriceWithCurrency(fabricatorSettings, grandTotal, null, false, true)} \r\n \r\n \r\n \r\n )\r\n};\r\n\r\nPrintDocumentTotal.propTypes = {\r\n priceWorksheetState: PropTypes.object.isRequired,\r\n fabricatorData: PropTypes.object.isRequired,\r\n styles: PropTypes.object.isRequired,\r\n cartItems: PropTypes.array.isRequired,\r\n};\r\n\r\nexport default PrintDocumentTotal\r\n","import React, {useContext} from \"react\";\r\nimport {View, Text, Image} from '@react-pdf/renderer';\r\nimport PropTypes from \"prop-types\";\r\n\r\nimport {PrintDocumentContext} from \"./printDocumentContext\";\r\n\r\nconst PrintDocumentSignature = (props) => {\r\n const {styles, isContractSign, receiptSignature, userInfo, assignQuotePopupCustomer, locale, fabricatorData} = props;\r\n const {receiptSettings} = fabricatorData;\r\n const printContext = useContext(PrintDocumentContext);\r\n\r\n const customerName = assignQuotePopupCustomer\r\n ? assignQuotePopupCustomer.fullName\r\n : userInfo.firstName + (userInfo.lastName ? (\" \" + userInfo.lastName) : \"\");\r\n\r\n const formattedDate = (new Date().toLocaleString(locale,\r\n {year: 'numeric', month: 'numeric', day: 'numeric', hour: '2-digit', minute: '2-digit'}\r\n )).replace(/,/g, \"\");\r\n\r\n return (\r\n \r\n \r\n \r\n {receiptSettings && receiptSettings.doNotFillNameAndDate ? null : customerName}\r\n \r\n {printContext.messages[\"receipt.signature.name\"]} \r\n \r\n \r\n \r\n {receiptSettings && receiptSettings.doNotFillNameAndDate ? null : formattedDate}\r\n \r\n {printContext.messages[\"receipt.signature.date\"]} \r\n \r\n \r\n {receiptSignature && !isContractSign\r\n && !(fabricatorData.receiptSettings && fabricatorData.receiptSettings.hideSignatureField)\r\n ? {printContext.messages[\"receipt.signature.signature\"]} \r\n \r\n \r\n )\r\n};\r\n\r\nPrintDocumentSignature.propTypes = {\r\n styles: PropTypes.object.isRequired,\r\n locale: PropTypes.string.isRequired,\r\n userInfo: PropTypes.object.isRequired,\r\n assignQuotePopupCustomer: PropTypes.object,\r\n isContractSign: PropTypes.bool,\r\n receiptSignature: PropTypes.string,\r\n};\r\n\r\nexport default PrintDocumentSignature\r\n","import React from \"react\";\r\nimport {View, Text} from '@react-pdf/renderer';\r\nimport PropTypes from \"prop-types\";\r\n\r\nimport PrintDocumentDiscount from \"./printDocumentDiscount\";\r\nimport {\r\n getDiscountsForSection,\r\n isSaveOnlyDiscount,\r\n shouldCalculateDiscount\r\n} from \"../../priceWorksheet/discountFunctions\";\r\nimport {getQuotePriceWithTaxes, getTotalPrice, sortByOrder} from \"../../../misc/helpers\";\r\nimport {DISCOUNT_SECTION_TYPES} from \"../../priceWorksheet/discounstInterface\";\r\n\r\n\r\nconst PrintDocumentDiscountsList = (props) => {\r\n const {styles, priceWorksheetState, fabricatorSettings} = props;\r\n const {discountSections, customAddedDiscounts} = priceWorksheetState;\r\n\r\n const totalPrice = getTotalPrice();\r\n const grandTotal = getQuotePriceWithTaxes(totalPrice);\r\n\r\n return (\r\n \r\n {discountSections.map((discountSection, discountSectionIndex) => {\r\n if (discountSection.type === DISCOUNT_SECTION_TYPES.finance) {\r\n return null\r\n }\r\n const allDiscounts = getDiscountsForSection(discountSection, customAddedDiscounts);\r\n const displayDiscounts = sortByOrder(allDiscounts.filter(discount => {\r\n return shouldCalculateDiscount(discount) || isSaveOnlyDiscount(discount)\r\n }));\r\n if (!displayDiscounts.length) {\r\n return null\r\n }\r\n return (\r\n \r\n {discountSection.name} \r\n {displayDiscounts.map((discount, discountIndex) => {\r\n return \r\n })}\r\n \r\n )\r\n })}\r\n \r\n )\r\n};\r\n\r\nPrintDocumentDiscountsList.propTypes = {\r\n priceWorksheetState: PropTypes.object.isRequired,\r\n fabricatorSettings: PropTypes.object.isRequired,\r\n styles: PropTypes.object.isRequired,\r\n};\r\n\r\nexport default PrintDocumentDiscountsList\r\n","import React, {Fragment, useContext} from \"react\";\r\nimport {View, Text} from '@react-pdf/renderer';\r\nimport PropTypes from \"prop-types\";\r\n\r\nimport {DISCOUNT_MAIN_TYPES, DISCOUNT_TYPES} from \"../../priceWorksheet/discounstInterface\";\r\nimport {getPriceWithCurrency, toFixedPrice} from \"../../../misc/helpers\";\r\nimport {getCustomDepositAmount, getSubTotalPrice} from \"../../priceWorksheet/discountFunctions\";\r\nimport PrintDocumentDiscountFinance from \"./printDocumentDiscountFinance\";\r\nimport {PrintDocumentContext} from \"./printDocumentContext\";\r\n\r\nconst PrintDocumentDiscount = (props) => {\r\n const {styles, discount, priceWorksheetState, discountSection, fabricatorSettings, grandTotal} = props;\r\n const {discountSections, customAddedDiscounts} = priceWorksheetState;\r\n\r\n const printContext = useContext(PrintDocumentContext);\r\n\r\n const getDiscountPercentageAmount = () => {\r\n const grandTotal = getSubTotalPrice(discountSections, discountSection, discount, true, customAddedDiscounts);\r\n const priceTaken = grandTotal * discount.amount / 100 // for ex. 25% from 2700 = 625\r\n return toFixedPrice(Math.trunc(priceTaken * 100) / 100);\r\n };\r\n\r\n if (discount.discountType === DISCOUNT_MAIN_TYPES.deposit) {\r\n return (\r\n \r\n {discount.name} \r\n \r\n {getPriceWithCurrency(fabricatorSettings, getCustomDepositAmount(discountSections, grandTotal))}\r\n \r\n \r\n )\r\n }\r\n\r\n if (discount.discountType === DISCOUNT_MAIN_TYPES.finance) {\r\n return \r\n \r\n \r\n {discount.name} \r\n {approveOptions && approveOptions.selectedOption ? (\r\n \r\n {printContext.messages[\"receipt.discount.approvedBy\"]}: \r\n {approveOptions.selectedOption} \r\n \r\n ) : null}\r\n \r\n {discountAmount} \r\n \r\n \r\n )\r\n};\r\n\r\nPrintDocumentDiscount.propTypes = {\r\n discount: PropTypes.object.isRequired,\r\n priceWorksheetState: PropTypes.object.isRequired,\r\n discountSection: PropTypes.object.isRequired,\r\n fabricatorSettings: PropTypes.object.isRequired,\r\n styles: PropTypes.object.isRequired,\r\n grandTotal: PropTypes.number,\r\n};\r\n\r\nexport default PrintDocumentDiscount\r\n","import React, {useContext} from \"react\";\r\nimport {View, Text} from '@react-pdf/renderer';\r\nimport PropTypes from \"prop-types\";\r\n\r\nimport {PrintDocumentContext} from \"./printDocumentContext\";\r\nimport {DISCOUNT_SECTION_TYPES, DISCOUNT_FINANCE_CELLS} from \"../../priceWorksheet/discounstInterface\";\r\nimport {calculateCellValue} from \"../../priceWorksheet/discountFunctions\";\r\n\r\nconst PrintDocumentDiscountFinance = (props) => {\r\n const {styles, discount, priceWorksheetState, fabricatorSettings, grandTotal} = props;\r\n const {discountSections, financePercentage, financeCellsVisible} = priceWorksheetState;\r\n\r\n const printContext = useContext(PrintDocumentContext);\r\n\r\n const financeSection = discountSections.find(sec => sec.type === DISCOUNT_SECTION_TYPES.finance);\r\n if (!financeSection) {\r\n return null;\r\n }\r\n\r\n let parsedOptions = typeof discount.financeOptions === \"string\"\r\n ? JSON.parse(discount.financeOptions)\r\n : [];\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n {printContext.messages[\"shoppingCart.discounts.financeTitle\"]}\r\n \r\n \r\n \r\n \r\n {printContext.messages[\"shoppingCart.discounts.financeSubTitle\"]}\r\n \r\n \r\n {priceWorksheetState.financePercentage + \"%\"}\r\n \r\n \r\n \r\n \r\n {Object.keys(DISCOUNT_FINANCE_CELLS).map((property, propertyIndex) => {\r\n const cellStyles = propertyIndex === 1\r\n ? [styles.financeCell, styles.marginL10, styles.marginR10]\r\n : styles.financeCell;\r\n const selectedDiscount = financeSection.discounts.find(dis => dis.uuId === parsedOptions[propertyIndex]);\r\n return (\r\n \r\n \r\n {selectedDiscount\r\n ? selectedDiscount.financeMonths + \" \" + printContext.messages[\"shoppingCart.discounts.months\"]\r\n : null}\r\n \r\n \r\n \r\n {financeCellsVisible ? calculateCellValue(\r\n {discountSections, financePercentage, fabricatorSettings},\r\n selectedDiscount ? selectedDiscount.financeMonths : 0,\r\n grandTotal,\r\n ) : null}\r\n \r\n \r\n \r\n )\r\n })}\r\n \r\n \r\n )\r\n};\r\n\r\nPrintDocumentDiscountFinance.propTypes = {\r\n discount: PropTypes.object.isRequired,\r\n priceWorksheetState: PropTypes.object.isRequired,\r\n discountSection: PropTypes.object.isRequired,\r\n fabricatorSettings: PropTypes.object.isRequired,\r\n styles: PropTypes.object.isRequired,\r\n};\r\n\r\nexport default PrintDocumentDiscountFinance\r\n","import React from \"react\";\r\nimport {View, Text} from '@react-pdf/renderer';\r\n\r\nconst PrintDocumentAsCentralText = (props) => {\r\n const {styles} = props;\r\n return (\r\n \r\n Buyer(s) listed above hereby jointly and severally agrees to purchase the goods and/or services listed below, in accordance with the prices and terms described on this Specification Sheet and the front and the reverse of the accompanying CUSTOM REMODELING AGREEMENT, of which this Specification Sheet is a part. \r\n \r\n )\r\n};\r\n\r\n\r\nexport default PrintDocumentAsCentralText\r\n","import {leadApiGet} from \"./api\";\r\nimport {fixWizardItem} from \"../../bvcomponents/look/lookNavigation/lookMain/lookWizard/wizardFunctionsCommon\";\r\n\r\nexport const getWizardListFromBackend = async () => {\r\n // const mainResponse = await leadApiGet(`/api/public/bvdata/${document.kvConfig.userId}/30?mode=leadForm`);\r\n const mainResponse = await leadApiGet(`/api/Public/Wizard/Get/${document.kvConfig.userId}/leadform`);\r\n // if (mainResponse.data) {\r\n // console.log(\"mainResponse\", mainResponse.data);\r\n // }\r\n if (mainResponse && mainResponse.data) {\r\n const wizardList = JSON.parse(mainResponse.data)\r\n .filter(wizardItem => wizardItem.enabled)\r\n .map((wizardItem, wizardItemIndex) => {\r\n wizardItem = fixWizardItem(wizardItem, wizardItemIndex,true);\r\n // wizardItem.id = getUpdatedWizardId(wizardItem.visualizer, wizardItem.id);\r\n return wizardItem\r\n });\r\n\r\n return {wizardList, error: mainResponse.data.error}\r\n }\r\n return {wizardList: [], error: mainResponse.error}\r\n}\r\n","import {getLixilCampaignInfo} from \"../lixilLogic/lixilActions\";\r\nimport {\r\n formatCalendarDateToMatchAvailableDate,\r\n getSelectedLixilDateObject\r\n} from \"../appointmentLogic/appointmentActions\";\r\nimport {replaceMaskToPassPhoneOnTheBackend} from \"../userLogic/userActions\";\r\n\r\n/**\r\n * returns feature compressed object that can be passed on the backend (without redundant info)\r\n * @param fromFeature {featureInterface}\r\n * @returns {object}\r\n */\r\nconst getCompressedFeature = (fromFeature) => {\r\n if (!fromFeature) {\r\n return null\r\n }\r\n return {\r\n partName: fromFeature.customDisplayName || fromFeature.displayName,\r\n sharedFeatureName: fromFeature.sharedFeatureName,\r\n dbFeatureId: fromFeature.id,\r\n sku: fromFeature.sku,\r\n partId: fromFeature.partId,\r\n groupName: fromFeature.groupName,\r\n featureDefinitionID: fromFeature.featureDefinitionID,\r\n }\r\n}\r\n\r\n/**\r\n * is used to compress the data that will be passed in the job data back and force\r\n * @param allWizardsValues {array}\r\n * @param allWizardsValues {array}\r\n */\r\nconst getCompressedAllWizardValues = (allWizardsValues) => {\r\n const allWizardsValuesToSave = allWizardsValues.map(newWizObject => {\r\n let wizValues = {};\r\n Object.keys(newWizObject.wizardSelectedValues).forEach(stepIndex => {\r\n wizValues[stepIndex] = Object.assign({}, newWizObject.wizardSelectedValues[stepIndex])\r\n if (newWizObject.wizardSelectedValues[stepIndex].wizardGroup) {\r\n wizValues[stepIndex].wizardGroup = Object.assign(\r\n {},\r\n newWizObject.wizardSelectedValues[stepIndex].wizardGroup,\r\n {featuresExcluded: [], featuresIncluded: []} // to keep clean in json\r\n )\r\n if (wizValues[stepIndex].wizardGroup.mergedGroups) {\r\n wizValues[stepIndex].wizardGroup.mergedGroups = wizValues[stepIndex].wizardGroup.mergedGroups.map(wizGroup => {\r\n return {id: wizGroup.id, groupName: wizGroup.groupName}\r\n });\r\n }\r\n }\r\n if (newWizObject.wizardSelectedValues[stepIndex].selectedFeature) {\r\n wizValues[stepIndex].selectedFeature = getCompressedFeature(\r\n newWizObject.wizardSelectedValues[stepIndex].selectedFeature,\r\n newWizObject.quoteIndex\r\n ); // to keep clean in json\r\n }\r\n if (newWizObject.wizardSelectedValues[stepIndex].selectedFeatures) {\r\n wizValues[stepIndex].selectedFeatures = newWizObject.wizardSelectedValues[stepIndex].selectedFeatures.map(feature => getCompressedFeature(\r\n feature,\r\n newWizObject.quoteIndex\r\n ))\r\n }\r\n })\r\n return Object.assign({}, newWizObject, {wizardSelectedValues: wizValues})\r\n });\r\n // console.log(\"allWizardsValues to save ->\", allWizardsValuesToSave);\r\n return allWizardsValuesToSave\r\n}\r\nconst getJobRecords = (store) => {\r\n const {wizardState, userState} = store;\r\n return [{\r\n bvImage: \"\",\r\n features: [],\r\n imageUrl: null,\r\n installationCost: 0,\r\n installationTaxes: 0,\r\n isCreatedInSQFT: false,\r\n isVisibleInSQFT: false,\r\n layoutType: 1,\r\n leadFeatures: [],\r\n materialCost: 0,\r\n materialTaxes: 0,\r\n priceTaxes: [],\r\n qtCatName: \"\",\r\n room: \"LeadForm\",\r\n sFtCalcDataJson: null,\r\n sqFtCalcImage: null,\r\n staticCanvasImage: \"\",\r\n data: JSON.stringify({ // here is the main stored info\r\n id: 1,\r\n lookId: 1,\r\n layout_type: 1,\r\n cartState: {},\r\n navigationType: \"LeadForm\",\r\n toolVersion: 1,\r\n userState: Object.assign({}, userState, {\r\n userInfo: Object.assign({}, userState.userInfo, {\r\n phone: replaceMaskToPassPhoneOnTheBackend(userState.userInfo.phone)\r\n })\r\n }),\r\n allWizardsValues: getCompressedAllWizardValues(wizardState.allWizardsValues)\r\n })\r\n }]\r\n}\r\n\r\nexport const getSaveJobData = (store, isDelayedSave = false) => {\r\n const {globalState, userState, appointmentState} = store;\r\n\r\n const {salesRepID, appointmentDate, appointmentTimeSlot, availableAppointmentDates} = appointmentState;\r\n\r\n const lixilCampaignInfo = getLixilCampaignInfo(store);\r\n if (appointmentDate) {\r\n const appDate = new Date(appointmentDate);\r\n lixilCampaignInfo.appointment_date_stc = formatCalendarDateToMatchAvailableDate(appDate, true);\r\n if (appointmentTimeSlot) {\r\n const selectedLixilDateObject = getSelectedLixilDateObject(appDate, availableAppointmentDates);\r\n if (selectedLixilDateObject) {\r\n const timeSlotObject = selectedLixilDateObject.salesRepsInSlots.find(timeSlotObject => timeSlotObject.timeSlot === appointmentTimeSlot)\r\n if (timeSlotObject && timeSlotObject.slotStartTime) {\r\n lixilCampaignInfo.appointment_time_stc = timeSlotObject.slotStartTime[0] === \"0\"\r\n ? timeSlotObject.slotStartTime.substring(1) // 04:00 -> 4:00\r\n : timeSlotObject.slotStartTime;\r\n }\r\n }\r\n }\r\n }\r\n\r\n const lixilData = {\r\n salesRepID,\r\n receiveSmsCheckbox: userState.userInfo.receiveSmsCheckbox,\r\n ...lixilCampaignInfo,\r\n isDelayedSave,\r\n }\r\n\r\n const appForm = document.getElementById(\"app-form\");\r\n if (appForm && appForm.children) {\r\n [].slice.call(appForm.children).forEach(input => {\r\n if (input.name && input.value) {\r\n lixilData[input.name] = input.value;\r\n }\r\n })\r\n }\r\n\r\n const saveDataBeforeConverting = {\r\n // fast\r\n jobId: document.kvConfig.jobId || globalState.jobId,\r\n fromBV: true,\r\n fabricatorId: document.kvConfig.userId,\r\n notes: [],\r\n documents: [],\r\n employeeId: 0,\r\n shareUrl: \"\",\r\n discountSections: [],\r\n installations: [],\r\n subId: document.subId && document.subId.toString ? document.subId.toString() : null,\r\n total: {\r\n materialCost: 0,\r\n installationCost: 0,\r\n installationTaxes: 0,\r\n materialTaxes: 0,\r\n priceTaxes: [],\r\n totalWithTaxes: 0,\r\n },\r\n records: getJobRecords(store),\r\n // fast end\r\n yesNoConsultationRequest: false,\r\n submit: true,\r\n fromCheckOutPage: false,\r\n sendConsumerEmail: true,\r\n customerEmail: userState.userInfo.email || userState.registeredUser.email || \"\",\r\n salesPerson: \"\",\r\n salesPersonEmail: \"\",\r\n leadOriginatorId: (window.salesPerson ? window.salesPerson.rawVal / ( Math.floor(Math.PI * 1000)) : 0),\r\n postalCode: userState.userInfo.postal,\r\n // isNewUser: !(code below) || (userState.registeredUser.email !== userState.userInfo.email), // not sure if we need it\r\n isNewUser: !(document.kvConfig.jobId || globalState.jobId),\r\n state: \"quote\",\r\n fromTool: \"LF\", //\"BV\",\r\n toolVersion: document.kvConfig.toolVersion,\r\n visualizerType: \"LeadForm\",\r\n navigationType: \"LeadForm\",\r\n quoteRequestType: \"ScheduleAnAppointment\", // QuoteRequestType\r\n currency: \"USD\",\r\n installationTaxesRate: 0,\r\n materialTaxesRate: 0,\r\n fromDashboard: document.kvConfig.isBackend,\r\n callFabricator: document.kvConfig.callFabricatorOnSave || false,\r\n language: \"en-US\",\r\n salesRepID,\r\n lixilData,\r\n }\r\n console.log(\"saveData\", saveDataBeforeConverting);\r\n const formData = new FormData();\r\n formData.append('json', JSON.stringify(saveDataBeforeConverting));\r\n return formData\r\n}\r\n","import {leadApiPost} from \"./api\";\r\n\r\nexport const postSaveJob = async (postData) => {\r\n const mainResponse = await leadApiPost(`api/Public/SaveQuote/`, postData);\r\n console.log(\"post SaveQuote response\", mainResponse);\r\n return mainResponse\r\n}\r\n\r\nexport const postScheduleAppointment = async (postData) => {\r\n const mainResponse = await leadApiPost(`api/Public/Schedule/`, postData);\r\n console.log(\"post Schedule response\", mainResponse);\r\n return mainResponse\r\n}\r\n","import {getSelectedLixilDateObject} from \"../appointmentLogic/appointmentActions\";\r\n\r\nexport const getSaveAppointmentData = (store, jobId) => {\r\n const {appointmentDate, appointmentTime, appointmentTimeSlot, availableAppointmentDates} = store.appointmentState;\r\n const {useLixilCalendar} = store.fabricatorState;\r\n\r\n let timeToPass = appointmentTime;\r\n\r\n if (appointmentDate && useLixilCalendar && appointmentTimeSlot) {\r\n const appDate = new Date(appointmentDate);\r\n const selectedLixilDateObject = getSelectedLixilDateObject(appDate, availableAppointmentDates);\r\n if (selectedLixilDateObject) {\r\n const timeSlotObject = selectedLixilDateObject.salesRepsInSlots.find(timeSlotObject => timeSlotObject.timeSlot === appointmentTimeSlot)\r\n if (timeSlotObject && timeSlotObject.slotStartTime) {\r\n timeToPass = timeSlotObject.slotStartTime;\r\n }\r\n }\r\n }\r\n\r\n const splittedTime = timeToPass.split(\":00\");\r\n const am = splittedTime[1] && splittedTime[1].toLowerCase().includes(\"am\");\r\n\r\n let date = \"\"+appointmentDate.getDate();\r\n let month = \"\"+(appointmentDate.getMonth() + 1); // +1 because getMonth returns starting from 0 (January is 0)\r\n let year = \"\"+appointmentDate.getFullYear();\r\n\r\n date = date.length === 1 ? \"0\" + date : date;\r\n month = month.length === 1 ? \"0\" + month : month;\r\n\r\n const scheduleData = {\r\n scheduleEntryData: {\r\n // date: \"03/02/2024\",\r\n date: `${month}/${date}/${year}`,\r\n time: `${splittedTime[0].length === 1 ? \"0\" + splittedTime[0] : splittedTime[0]}:00`, // 1:00 -> 01:00\r\n am: am,\r\n duration: 60,\r\n alert: 30,\r\n appointmentType: 'Quote'\r\n },\r\n jobId,\r\n jobIdType: 'JobQuote'\r\n };\r\n\r\n console.log(\"scheduleData\", scheduleData);\r\n return scheduleData\r\n}\r\n","import {leadApiPost} from \"./api\";\r\nimport {parseUrl} from \"../helperFunctions\";\r\n\r\nconst parsedUrl = parseUrl();\r\n\r\nconst getUserRegisterOrUpdateData = (store) => {\r\n\r\n const {userInfo, userLocation} = store.userState;\r\n const {email, firstName, lastName, phone, city, state, country, postal, address2} = userInfo; // address is not used\r\n const {streetNumber, streetName} = userLocation;\r\n\r\n return {\r\n email,\r\n firstName,\r\n lastName,\r\n phone,\r\n address1: (streetNumber ? streetNumber + \" \" : \"\") + streetName,\r\n address2,\r\n city,\r\n state,\r\n country,\r\n phone2: \"\",\r\n agreedToTerms: true,\r\n subscribeToNewsletter: true,\r\n isNew: true,\r\n postal,\r\n salesPersonEmail: (window.salesPerson ? window.salesPerson.email : \"\"),\r\n salesPersonFullName: (window.salesPerson ? window.salesPerson.name : \"\"),\r\n employeeId: window.salesPerson\r\n ? window.salesPerson.rawVal / ( Math.floor(Math.PI * 1000))\r\n : (parsedUrl && parsedUrl.p) ? +parsedUrl.p.split(\"/\")[0] : \"\",\r\n fabricatorId: document.kvConfig.userId || 61986,\r\n quoteRequestType: \"ScheduleAnAppointment\", // QuoteRequestType\r\n yesNoConsultationRequest: false,\r\n preferredCommunicationMethod: \"\",\r\n howDidYouHearAboutUs: \"\",\r\n language: \"en-US\",\r\n subId: document.subId && document.subId.toString ? document.subId.toString() : null,\r\n };\r\n}\r\n\r\nexport const registerUser = (store) => {\r\n return leadApiPost(\"/api/Public/RegisterClient\", getUserRegisterOrUpdateData(store))\r\n}\r\n\r\nexport const updateUser = (store) => {\r\n const {registeredUserAuthToken} = store.userState;\r\n const headers = {\r\n \"Content-Type\": \"application/json\",\r\n \"Authorization\": \"Bearer \" + registeredUserAuthToken,\r\n }\r\n return leadApiPost(\"/api/client/update-with-token\", getUserRegisterOrUpdateData(store), headers)\r\n}\r\n","export function parseUrl(queryString = null) {\r\n queryString = queryString || window.location.search;\r\n const query = {};\r\n const pairs = (queryString[0] === '?' ? queryString.substr(1) : queryString).split('&');\r\n for (let i = 0; i < pairs.length; i++) {\r\n let pair = pairs[i].split('=');\r\n query[decodeURIComponent(pair[0]).toLowerCase()] = decodeURIComponent(pair[1] || '');\r\n }\r\n return query;\r\n}\r\n","export const getErrorPopupObject = (text, buttons) => {\r\n return {\r\n visible: true,\r\n title: \"Error\",\r\n text,\r\n buttons: buttons || [{\r\n text: \"Close\",\r\n }],\r\n }\r\n}\r\n","import {IS_LIXIL_UI} from \"../config\";\r\nimport {getCurrentZIndexes} from \"../bvcomponents/appLayout\";\r\n\r\n\r\nexport const makeHoveringLayer = (layer, image, layoutType = \"Large\", canvasDimensions = null, fabricatorData = null) => {\r\n\r\n const zIndexesObject = getCurrentZIndexes();\r\n\r\n // console.log('layer+', layer);\r\n const withNewBackgrounds = [\"bvLook\", \"kvScene\", \"Fireplace\", \"LaundryRoom\"].some(visType => document.kvConfig.visualizerType === visType);\r\n\r\n const isBackgroundLayer =\r\n ((document.kvConfig.visualizerType === \"bvScene\") && Object.values(zIndexesObject.layouts[layoutType].Background).includes(layer.zIndex))\r\n || (withNewBackgrounds && layer.zIndex >= 50000);\r\n\r\n // step 1 - create an image from layer // get layerDimensions\r\n let layerDimensions = zIndexesObject.getLayerDimensions(withNewBackgrounds ? layer : layer.zIndex, layoutType, canvasDimensions);\r\n // console.log('layerDimensions+', layerDimensions);\r\n if (!layerDimensions) {\r\n console.log('layerDimensions not found!', layer);\r\n // return makeHoveringLayerOld(layer, image)\r\n layerDimensions = {\r\n polygonArray: [[0, 0], [canvasDimensions.width, 0], [canvasDimensions.width, canvasDimensions.height], [0, canvasDimensions.height]],\r\n width: canvasDimensions.width,\r\n height: canvasDimensions.height\r\n };\r\n // return makeHoveringLayerOld(layer, image)\r\n }\r\n\r\n const width = layer.cropCoords ? layer.cropCoords[2] - layer.cropCoords[0] : layerDimensions.width;\r\n const height = layer.cropCoords ? layer.cropCoords[3] - layer.cropCoords[1] : layerDimensions.height;\r\n\r\n // step 2 - create for each layer fake canvas\r\n const fakeCanvas = document.createElement('canvas');\r\n fakeCanvas.setAttribute('width', `${width}px`);\r\n fakeCanvas.setAttribute('height', `${height}px`);\r\n const context2D = fakeCanvas.getContext(\"2d\", { willReadFrequently: true });\r\n\r\n // step 3 - make canvas layer 0.5 transparent\r\n // if (!backGroundIndexes.includes(layer.zIndex)) { // do it for all layers\r\n context2D.globalAlpha = fabricatorData && fabricatorData.isAmericanStandard ? 0.75 : 0.5;\r\n // }\r\n\r\n // step 4 - put layer image on fake canvas\r\n context2D.clearRect(0, 0, fakeCanvas.width, fakeCanvas.height);\r\n const x1 = layer.cropCoords ? 0 : layerDimensions.polygonArray[0][0];\r\n const y1 = layer.cropCoords ? 0 : layerDimensions.polygonArray[0][1];\r\n context2D.drawImage(image, x1, y1, width, height, 0, 0, width, height);\r\n\r\n // step 5 - create green map for this layer\r\n let imageData = null\r\n try {\r\n imageData = context2D.getImageData(0, 0, width, height);\r\n } catch (error) {\r\n console.log(\"error creating hovering layer\", layer, image, layoutType, canvasDimensions, error);\r\n return null\r\n }\r\n // const imageData = context2D.getImageData(300, 400, 300, 400);\r\n\r\n const map = imageData.data;\r\n\r\n let r, g, b, a;\r\n\r\n const multipliers = {\r\n r: IS_LIXIL_UI ? 0 : 0.2,\r\n g: 0.7,\r\n b: IS_LIXIL_UI ? 1 : 0.2,\r\n }\r\n\r\n for (let p = 0, len = imageData.data.length; p < len; p += 4) {\r\n\r\n r = map[p];\r\n g = map[p + 1];\r\n b = map[p + 2];\r\n a = map[p + 3];\r\n\r\n if (a !== 0 && (r > 2) && (b > 2) && (g > 2)) { // not a background or not dark\r\n if (fabricatorData && fabricatorData.isAmericanStandard) {\r\n r = 231;\r\n g = 0;\r\n b = 38;\r\n } else {\r\n r = r * multipliers.r;\r\n g = g * multipliers.g;\r\n b = b * multipliers.b;\r\n }\r\n if (g > 255) {\r\n g = 255;\r\n }\r\n map[p] = r;\r\n map[p + 1] = g;\r\n map[p + 2] = b;\r\n map[p + 3] = a;\r\n } else if (isBackgroundLayer) {\r\n map[p] = 0;\r\n map[p + 1] = 0;\r\n map[p + 2] = 0;\r\n map[p + 3] = 0;\r\n }\r\n }\r\n\r\n // step 6 - put green map on canvas\r\n context2D.clearRect(0, 0, width, height);\r\n context2D.putImageData(imageData, 0, 0);\r\n\r\n const greenImage = fakeCanvas.toDataURL();\r\n const hoveringImage = new Image();\r\n hoveringImage.crossOrigin = 'Anonymous';\r\n hoveringImage.layerDimensions = layer.layerDimensions || null;\r\n hoveringImage.coords = layer.coords || null;\r\n try {\r\n hoveringImage.src = greenImage;\r\n } catch (e) {\r\n console.log(e, 'Can\\'t apply layer Hovering src', greenImage);\r\n }\r\n return {\r\n layer,\r\n context2D,\r\n layerDimensions,\r\n greenImage,\r\n hoveringImage,\r\n };\r\n};\r\n\r\nexport const makeHoveringLayerOld = (layer, image, width = 1620, height = 1080) => {\r\n // window.t0 = performance.now();\r\n\r\n // step 1 - create an image from layer // no needed it more, it comes rendered from this.draw() method\r\n // const img = new Image();\r\n // img.crossOrigin = \"Anonymous\";\r\n // img.src = layer.image;\r\n\r\n // step 2 - create for each layer fake canvas\r\n const fakeCanvas = document.createElement('canvas');\r\n fakeCanvas.setAttribute('height', `${height}px`);\r\n fakeCanvas.setAttribute('width', `${width}px`);\r\n const context2D = fakeCanvas.getContext(\"2d\", { willReadFrequently: true });\r\n\r\n // step 3 - make canvas layer 0.5 transparent\r\n context2D.globalAlpha = 0.5;\r\n\r\n // step 4 - put layer image on fake canvas\r\n context2D.clearRect(0, 0, fakeCanvas.width, fakeCanvas.height);\r\n\r\n if (!(image.complete && image.naturalHeight !== 0)) {\r\n return {\r\n layer,\r\n context2D,\r\n greenImage: \"\"\r\n }\r\n }\r\n\r\n context2D.drawImage(image, 0, 0);\r\n\r\n // step 5 - create green map for this layer\r\n const imageData = context2D.getImageData(0, 0, width, height);\r\n // const imageData = context2D.getImageData(300, 400, 300, 400);\r\n\r\n const map = imageData.data;\r\n\r\n let r, g, b, a;\r\n for (let p = 0, len = imageData.data.length; p < len; p += 4) {\r\n\r\n r = map[p];\r\n g = map[p + 1];\r\n b = map[p + 2];\r\n a = map[p + 3];\r\n\r\n if (a !== 0) {\r\n r = r * 0.2;\r\n b = b * 0.2;\r\n g = g * 0.7;\r\n if (g > 255) {\r\n g = 255;\r\n }\r\n map[p] = r;\r\n map[p + 1] = g;\r\n map[p + 2] = b;\r\n map[p + 3] = a;\r\n }\r\n }\r\n\r\n // step 6 - put green map on canvas\r\n context2D.clearRect(0, 0, fakeCanvas.width, fakeCanvas.height);\r\n context2D.putImageData(imageData, 0, 0);\r\n\r\n // step 7 - set values in reverse order (we need top layers to be hoverable first)\r\n // window.t1 = performance.now();\r\n // console.log(\"Call to doSomething took \" + (window.t1 - window.t0) + \" milliseconds.\");\r\n return {\r\n layer,\r\n context2D,\r\n greenImage: fakeCanvas.toDataURL()\r\n };\r\n\r\n};\r\n","/*\r\n\r\n Copyright (c) Manuel Stofer 2013 - today, PinchZoom.js\r\n\r\n Permission is hereby granted, free of charge, to any person obtaining a copy\r\n of this software and associated documentation files (the \"Software\"), to deal\r\n in the Software without restriction, including without limitation the rights\r\n to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\r\n copies of the Software, and to permit persons to whom the Software is\r\n furnished to do so, subject to the following conditions:\r\n\r\n The above copyright notice and this permission notice shall be included in\r\n all copies or substantial portions of the Software.\r\n\r\n THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\r\n IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\r\n FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\r\n AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\r\n LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\r\n OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\r\n THE SOFTWARE.\r\n\r\n*/\r\n// import $ from 'jquery';\r\n// import ActionTypes from \"../misc/actionTypes\";\r\n\r\nimport pinchScroll from \"./pinchScroll\";\r\nimport ActionTypes from \"../misc/actionTypes\";\r\nimport {GROHE_CONFIG} from \"../bvcomponents/look/grohe/groheConfig\";\r\nimport {IS_PRODUCT_JOURNEY} from \"../config\";\r\nimport store from \"../store\";\r\nimport {setCanvasScale} from \"../actions/actionFunctions\";\r\n\r\n// polyfills\r\nif (typeof Object.assign != 'function') {\r\n // Must be writable: true, enumerable: false, configurable: true\r\n Object.defineProperty(Object, \"assign\", {\r\n value: function assign(target) { // .length of function is 2\r\n if (target == null) { // TypeError if undefined or null\r\n throw new TypeError('Cannot convert undefined or null to object');\r\n }\r\n\r\n var to = Object(target);\r\n\r\n for (var index = 1; index < arguments.length; index++) {\r\n var nextSource = arguments[index];\r\n\r\n if (nextSource != null) { // Skip over if undefined or null\r\n for (var nextKey in nextSource) {\r\n // Avoid bugs when hasOwnProperty is shadowed\r\n if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) {\r\n to[nextKey] = nextSource[nextKey];\r\n }\r\n }\r\n }\r\n }\r\n return to;\r\n },\r\n writable: true,\r\n configurable: true\r\n });\r\n}\r\n\r\nif (typeof Array.from != 'function') {\r\n Array.from = function (object) {\r\n return [].slice.call(object);\r\n };\r\n}\r\n\r\n// utils\r\nvar buildElement = function(str) {\r\n // empty string as title argument required by IE and Edge\r\n var tmp = document.implementation.createHTMLDocument('');\r\n tmp.body.innerHTML = str;\r\n return Array.from(tmp.body.children)[0];\r\n};\r\n\r\nvar triggerEvent = function(el, name) {\r\n var event = document.createEvent('HTMLEvents');\r\n event.initEvent(name, true, false);\r\n el.dispatchEvent(event);\r\n};\r\n\r\nconst sanitizeValue = (newValue) => {\r\n return isNaN(newValue) ? 0 : newValue\r\n}\r\n\r\nvar definePinchZoom = function () {\r\n\r\n /**\r\n * Pinch zoom\r\n * @version 2.0.0\r\n * @author Manuel Stofer \r\n * @param el\r\n * @param options\r\n * @constructor\r\n */\r\n var PinchZoom = function (el, options) {\r\n this.el = el;\r\n this.elText = document.querySelector('.canvas-text');\r\n this.zoomFactor = 1;\r\n this.lastScale = 1;\r\n this.offset = {\r\n x: 0,\r\n y: 0\r\n };\r\n this.mousePos = {\r\n x: 0,\r\n y: 0\r\n };\r\n this.coImage = null;\r\n this.containerScrolled = false;\r\n this.mouseDown = false;\r\n this.timerId = null;\r\n this.timerId = null;\r\n this.options = Object.assign({}, this.defaults, options);\r\n this.setupMarkup();\r\n this.bindEvents();\r\n if (this.options.canUseUpdate) {\r\n this.update();\r\n }\r\n // default enable.\r\n this.enable();\r\n\r\n },\r\n sum = function (a, b) {\r\n return a + b;\r\n },\r\n isCloseTo = function (value, expected) {\r\n return value > expected - 0.01 && value < expected + 0.01;\r\n },\r\n interaction = null;\r\n\r\n PinchZoom.prototype = {\r\n\r\n defaults: {\r\n tapZoomFactor: 1.75,\r\n zoomOutFactor: 1.3,\r\n animationDuration: 500,\r\n maxZoom: 1.75,\r\n minZoom: 1,\r\n lockDragAxis: false,\r\n use2d: true,\r\n dragPixelsBeforeClick: 6,\r\n zoomStartEventName: 'pz_zoomstart',\r\n zoomEndEventName: 'pz_zoomend',\r\n dragStartEventName: 'pz_dragstart',\r\n dragEndEventName: 'pz_dragend',\r\n doubleTapEventName: 'pz_doubletap',\r\n canUseUpdate: true\r\n },\r\n\r\n /**\r\n * Event handler for 'dragstart'\r\n * @param event\r\n * @param isMobile {boolean}\r\n */\r\n handleDragStart: function (event, isMobile = true) {\r\n triggerEvent(this.el, this.options.dragStartEventName);\r\n this.stopAnimation();\r\n this.lastDragPosition = false;\r\n this.hasInteraction = true;\r\n isMobile ? this.handleDrag(event) : this.handleMove(event);\r\n },\r\n\r\n /**\r\n * Event handler for 'drag'\r\n * @param event\r\n */\r\n handleDrag: function (event) {\r\n if (this.zoomFactor > 1.0) {\r\n var touch = this.getTouches(event)[0];\r\n this.drag(touch, this.lastDragPosition);\r\n this.offset = this.sanitizeOffset(this.offset);\r\n this.lastDragPosition = touch;\r\n }\r\n },\r\n /**\r\n * Event handler for 'drag'\r\n * @param event\r\n */\r\n handleMove: function (event) {\r\n let mousePos = this.getTouches({\r\n touches: [{\r\n pageX: event.pageX,\r\n pageY: event.pageY,\r\n }]\r\n })[0];\r\n // console.log(\"mousePos\", mousePos);\r\n this.drag(mousePos, this.lastDragPosition);\r\n this.offset = this.sanitizeOffset(this.offset);\r\n this.lastDragPosition = mousePos;\r\n },\r\n\r\n handleDragEnd: function () {\r\n triggerEvent(this.el, this.options.dragEndEventName);\r\n this.end();\r\n },\r\n\r\n /**\r\n * Event handler for 'zoomstart'\r\n * @param event\r\n */\r\n handleZoomStart: function () {\r\n triggerEvent(this.el, this.options.zoomStartEventName);\r\n this.stopAnimation();\r\n this.lastScale = 1;\r\n this.nthZoom = 0;\r\n this.lastZoomCenter = false;\r\n this.hasInteraction = true;\r\n },\r\n\r\n /**\r\n * Event handler for 'zoom'\r\n * @param event\r\n */\r\n handleZoom: function (event, newScale) {\r\n // a relative scale factor is used\r\n var touchCenter = this.getTouchCenter(this.getTouches(event)),\r\n scale = newScale / this.lastScale;\r\n this.lastScale = newScale;\r\n\r\n // the first touch events are thrown away since they are not precise\r\n this.nthZoom += 1;\r\n if (this.nthZoom > 3) {\r\n\r\n this.scale(scale, touchCenter);\r\n this.drag(touchCenter, this.lastZoomCenter);\r\n }\r\n this.lastZoomCenter = touchCenter;\r\n },\r\n\r\n handleZoomEnd: function () {\r\n triggerEvent(this.el, this.options.zoomEndEventName);\r\n const closeToOne = isCloseTo(this.zoomFactor, 1);\r\n store.dispatch(setCanvasScale(closeToOne ? 1 : this.zoomFactor));\r\n this.end();\r\n },\r\n\r\n /**\r\n * Event handler for 'doubletap'\r\n * @param event\r\n */\r\n handleDoubleTap: function (event) {\r\n // document.querySelector('.canvas-text').innerHTML = 'doubleTap' + JSON.stringify(event);\r\n var center = this.getTouches(event)[0],\r\n zoomFactor = this.zoomFactor > 1 ? 1 : this.options.tapZoomFactor,\r\n startZoomFactor = this.zoomFactor,\r\n updateProgress = (function (progress) {\r\n this.scaleTo(startZoomFactor + progress * (zoomFactor - startZoomFactor), center);\r\n }).bind(this);\r\n\r\n if (this.hasInteraction) {\r\n return;\r\n }\r\n if (startZoomFactor > zoomFactor) {\r\n center = this.getCurrentZoomCenter();\r\n }\r\n\r\n this.animate(this.options.animationDuration, updateProgress, this.swing);\r\n triggerEvent(this.el, this.options.doubleTapEventName);\r\n },\r\n\r\n /**\r\n * Zoom on canvas click\r\n * @param center {object}\r\n * @param zoomFactor {number}\r\n * @param allowMoving {boolean} // only for nav = product for similar products\r\n * @param withFeatureScreen {boolean} // determines whether we display feature selections with feature screen or only feature selections\r\n */\r\n zoomToCenter: function (center, zoomFactor, allowMoving = false, withFeatureScreen = true) {\r\n // this.elText.innerHTML = 'zoomToCenter' + this.isZooming;\r\n // var center = this.getTouches(event)[0],\r\n\r\n // window.clearTimeout(this.mouseDownTimeoutId);\r\n\r\n const zoomOut = !center && zoomFactor === 1;\r\n const zoomOutFromLeft = zoomOut && this.offset.x < 0;\r\n\r\n if (!zoomFactor) {\r\n zoomFactor = this.zoomFactor > 1 ? this.zoomFactor : this.options.tapZoomFactor;\r\n }\r\n\r\n if (!center) {\r\n center = {\r\n x: this.el.clientWidth / 2,\r\n y: this.el.clientHeight / 2,\r\n }\r\n }\r\n\r\n // console.log(\"this.zoomFactor\", this.zoomFactor);\r\n // console.log(\"zoomFactor\", zoomFactor);\r\n\r\n // const alreadyZoomed = (this.zoomFactor > 1) && (zoomFactor > 1) && (zoomFactor !== this.options.maxZoom);\r\n // const alreadyZoomed = false; // here is always false, because we removed moving canvas in zoomed mode\r\n const alreadyZoomed = IS_PRODUCT_JOURNEY && allowMoving && (this.zoomFactor === this.options.maxZoom) // allow moving canvas in zoomed mode for new navigation type\r\n const startZoomFactor = this.zoomFactor;\r\n const startOffset = {\r\n x: this.zoomFactor === 1 ? 0 : this.offset.x,\r\n y: this.zoomFactor === 1 ? 0 : this.offset.y\r\n };\r\n const targetOffset = {\r\n x: sanitizeValue((zoomFactor - 1) * center.x),\r\n y: sanitizeValue((zoomFactor - 1) * center.y)\r\n };\r\n // console.log(\"this.offset\", this.offset);\r\n // console.log(\"targetOffset\", targetOffset);\r\n\r\n if (this.hasInteraction) {\r\n return;\r\n }\r\n if (startZoomFactor > zoomFactor) {\r\n center = this.getCurrentZoomCenter();\r\n }\r\n\r\n if (alreadyZoomed) { // keep it as is, old support, not sure how it works if we delete it\r\n\r\n const updateProgress = alreadyZoomed\r\n ? (function (progress) {\r\n this.offset.x = sanitizeValue(startOffset.x + progress * (targetOffset.x - startOffset.x));\r\n this.offset.y = sanitizeValue(startOffset.y + progress * (targetOffset.y - startOffset.y));\r\n this.update();\r\n }).bind(this)\r\n : (function (progress) {\r\n // console.log(\"startZoomFactor + progress * (zoomFactor - startZoomFactor)\", startZoomFactor + progress * (zoomFactor - startZoomFactor));\r\n this.scaleTo(startZoomFactor + progress * (zoomFactor - startZoomFactor), center, false);\r\n }).bind(this);\r\n\r\n this.animate(this.options.animationDuration, updateProgress, this.swing, () => {\r\n triggerEvent(this.el, this.options.zoomEndEventName);\r\n // console.log(\"finished\", );\r\n if (zoomOutFromLeft) {\r\n this.moveContainer(center, zoomFactor);\r\n }\r\n this.stopAnimation();\r\n this.end();\r\n // if (this.isInsaneOffset(this.offset)) {\r\n // this.sanitizeOffsetAnimation();\r\n // }\r\n this.offset = targetOffset;\r\n // window.clearTimeout(this.mouseDownTimeoutId);\r\n // console.log(\"end zoom\", );\r\n });\r\n } else {\r\n // console.log(\"targetOffset.x\", targetOffset.x);\r\n // if (targetOffset.x > 500) { // magic number to zoom in correct position\r\n // targetOffset.x = targetOffset.x * 1.8 // magic number to zoom in correct position\r\n // }\r\n this.update(targetOffset); // set canvas transform\r\n if (zoomOutFromLeft) {\r\n this.moveContainer(center, zoomFactor);\r\n }\r\n this.scaleTo(zoomFactor, center, false);\r\n this.offset = this.sanitizeOffset(targetOffset);\r\n this.stopAnimation();\r\n this.hasInteraction = false;\r\n this.offset = this.sanitizeOffset(targetOffset);\r\n this.end();\r\n triggerEvent(this.el, this.options.zoomEndEventName);\r\n }\r\n\r\n if (!zoomOutFromLeft) {\r\n this.moveContainer(center, zoomFactor, withFeatureScreen);\r\n }\r\n },\r\n\r\n /**\r\n * removes container and blurres from the co image\r\n * @param withAnimation {boolean}\r\n */\r\n removeContainerScroll: function (withAnimation = false) {\r\n // if (this.coImage) {\r\n // this.coImage.classList.remove(\"blurred\");\r\n // }\r\n this.setContainerTransform(null, withAnimation);\r\n this.containerScrolled = false;\r\n\r\n // if (withAnimation) {\r\n // this.setContainerTransform(null, withAnimation);\r\n // this.containerScrolled = false;\r\n // } else {\r\n // const center = this.getCurrentZoomCenter();\r\n // const updateProgress = (function (progress) {\r\n // this.scaleTo(this.zoomFactor + progress * (1 - this.zoomFactor), center, false);\r\n // }).bind(this);\r\n // this.animate(this.options.animationDuration, updateProgress, this.swing, () => {\r\n // triggerEvent(this.el, this.options.zoomEndEventName);\r\n // this.offset = {x: 0, y: 0};\r\n // this.containerScrolled = false;\r\n // });\r\n // }\r\n\r\n },\r\n\r\n /**\r\n * moves container and blurres the co image\r\n * @param center\r\n * @param zoomFactor\r\n * @param withFeatureScreen {boolean}\r\n */\r\n moveContainer: function (center, zoomFactor, withFeatureScreen) {\r\n // console.log(\"moveContainer center\", center, zoomFactor);\r\n if (zoomFactor === 1 && this.containerScrolled) {\r\n this.removeContainerScroll();\r\n return\r\n }\r\n if (IS_PRODUCT_JOURNEY) {\r\n this.moveGroheContainer(center, zoomFactor, withFeatureScreen);\r\n return;\r\n }\r\n if (center && center.featureX) {\r\n if (center.isMobile) {\r\n // const menuWidth = 316;\r\n // const shiftX = center.clientWidth - (center.clientWidth * center.featureX / 100);\r\n // // console.log(\"shiftX\", shiftX);\r\n // if (shiftX < menuWidth) {\r\n // // if (center.x === center.clientWidth) {\r\n // this.setContainerTransform('translateX(-'+menuWidth+'px)');\r\n // this.containerScrolled = true;\r\n // }\r\n } else if (!center.x) {\r\n const offsetX = center.x === 0 ? 420 : 0;\r\n const percentX = center.clientWidth * center.featureX / 100;\r\n const shiftX = percentX > 420 ? 0 : 420 - percentX;\r\n const offsetY = 0;\r\n const transform2d = 'translate(' + (offsetX + shiftX) + 'px,' + offsetY + 'px)';\r\n this.setContainerTransform(transform2d);\r\n this.containerScrolled = true;\r\n // } else {\r\n // this.removeContainerScroll();\r\n }\r\n } else if (center && !center.isMobile && center.x && this.containerScrolled) {\r\n this.removeContainerScroll();\r\n }\r\n },\r\n\r\n /**\r\n * moves container and blurres the co image (for nav type = grohe)\r\n * @param center\r\n * @param zoomFactor\r\n * @param withFeatureScreen {boolean}\r\n */\r\n moveGroheContainer: function (center, zoomFactor, withFeatureScreen) {\r\n if (center && center.featureX) {\r\n const state = store.getState();\r\n let menuWidth = center.isMobile ? GROHE_CONFIG.sidebarWidth.mobile : GROHE_CONFIG.mainBarWidth.desktop;\r\n if ((state.groheState.similarProductsOpened || state.lookState.lookActiveCategory) && !center.isMobile) {\r\n menuWidth = withFeatureScreen ? menuWidth + GROHE_CONFIG.similarProductsWidth.desktop : GROHE_CONFIG.similarProductsWidth.desktop\r\n }\r\n // console.log(\"shiftX\", shiftX);\r\n // console.log(\"center.featureX\", center.featureX);\r\n if (center.featureX > 20 && (window.innerWidth <= 1920)) { // no need to move container on full hd monitors\r\n // if feature X is less than 20 - it is ok not to scroll anywhere\r\n let translate = 0;\r\n if (center.featureX > 80) {\r\n translate = menuWidth // for the very right positions\r\n } else {\r\n translate = center.featureX * 3.4 // magic number for moving container\r\n if (center.featureX > 70) {\r\n translate = translate + 20; // plus 20 pixels\r\n } else if (center.featureX > 60) {\r\n translate = translate + 50; // plus 50 pixels if more than 60\r\n } else if (center.featureX > 50) {\r\n translate = translate + 80; // plus 80 pixels if between 50 and 70\r\n }\r\n if (translate > menuWidth) {\r\n translate = menuWidth; // just in case we are overscrolling\r\n }\r\n }\r\n this.setContainerTransform('translateX(-' + translate + 'px)', true);\r\n this.containerScrolled = true;\r\n } else if (this.containerScrolled) {\r\n // this.removeContainerScroll(true);\r\n }\r\n } else if (center && !center.isMobile && center.x && this.containerScrolled) {\r\n this.removeContainerScroll(true);\r\n }\r\n },\r\n\r\n /**\r\n * sets container transform position\r\n * @param transform2d\r\n * @param withAnimation {boolean}\r\n */\r\n setContainerTransform: function (transform2d, withAnimation = false) {\r\n // this.elText.innerHTML = 'setContainerTransform' + withAnimation;\r\n\r\n if (transform2d) {\r\n // if (this.coImage && !this.coImage.classList.contains(\"blurred\")) {\r\n // this.coImage.classList.add(\"blurred\");\r\n // }\r\n if (!this.containerScrolled) {\r\n this.containerScrolled = true;\r\n }\r\n }\r\n clearTimeout(this.containerTransition);\r\n if (withAnimation) {\r\n this.container.style.transition = \"all 0.5s ease\";\r\n }\r\n this.container.style.webkitTransform = transform2d;\r\n this.container.style.mozTransform = transform2d;\r\n this.container.style.msTransform = transform2d;\r\n this.container.style.oTransform = transform2d;\r\n this.container.style.transform = transform2d;\r\n if (withAnimation) {\r\n this.containerTransition = setTimeout(() => {\r\n this.container.style.transition = \"none\";\r\n }, 500)\r\n }\r\n },\r\n\r\n /**\r\n * Max / min values for the offset\r\n * @param offset\r\n * @return {Object} the sanitized offset\r\n */\r\n sanitizeOffset: function (offset) {\r\n var maxX = (this.zoomFactor - 1) * this.getContainerX(),\r\n maxY = (this.zoomFactor - 1) * this.getContainerY(),\r\n maxOffsetX = Math.max(maxX, 0),\r\n maxOffsetY = Math.max(maxY, 0),\r\n minOffsetX = Math.min(maxX, 0),\r\n minOffsetY = Math.min(maxY, 0);\r\n\r\n return {\r\n x: sanitizeValue(Math.min(Math.max(offset.x, minOffsetX), maxOffsetX)),\r\n y: sanitizeValue(Math.min(Math.max(offset.y, minOffsetY), maxOffsetY))\r\n };\r\n },\r\n\r\n /**\r\n * Scale to a specific zoom factor (not relative)\r\n * @param zoomFactor\r\n * @param needToMoveContainer {boolean}\r\n * @param center\r\n */\r\n scaleTo: function (zoomFactor, center, needToMoveContainer = true) {\r\n this.scale(zoomFactor / this.zoomFactor, center);\r\n if (needToMoveContainer && zoomFactor === 1) {\r\n this.moveContainer(null, zoomFactor);\r\n }\r\n },\r\n\r\n /**\r\n * Scales the element from specified center\r\n * @param scale\r\n * @param center\r\n */\r\n scale: function (scale, center) {\r\n scale = this.scaleZoomFactor(scale);\r\n this.addOffset({\r\n x: sanitizeValue((scale - 1) * (center.x + this.offset.x)),\r\n y: sanitizeValue((scale - 1) * (center.y + this.offset.y))\r\n });\r\n },\r\n\r\n /**\r\n * Scales the zoom factor relative to current state\r\n * @param scale\r\n * @return the actual scale (can differ because of max min zoom factor)\r\n */\r\n scaleZoomFactor: function (scale) {\r\n var originalZoomFactor = this.zoomFactor;\r\n this.zoomFactor *= scale;\r\n this.zoomFactor = Math.round(Math.min(this.options.maxZoom, Math.max(this.zoomFactor, this.options.minZoom)) * 1000) / 1000;\r\n return this.zoomFactor / originalZoomFactor;\r\n },\r\n\r\n /**\r\n * Drags the element\r\n * @param center\r\n * @param lastCenter\r\n */\r\n drag: function (center, lastCenter) {\r\n if (lastCenter) {\r\n if(this.options.lockDragAxis) {\r\n // lock scroll to position that was changed the most\r\n if(Math.abs(center.x - lastCenter.x) > Math.abs(center.y - lastCenter.y)) {\r\n this.addOffset({\r\n x: -(center.x - lastCenter.x),\r\n y: 0\r\n });\r\n }\r\n else {\r\n this.addOffset({\r\n y: -(center.y - lastCenter.y),\r\n x: 0\r\n });\r\n }\r\n }\r\n else {\r\n this.addOffset({\r\n y: -(center.y - lastCenter.y),\r\n x: -(center.x - lastCenter.x)\r\n });\r\n }\r\n }\r\n },\r\n\r\n /**\r\n * Calculates the touch center of multiple touches\r\n * @param touches\r\n * @return {Object}\r\n */\r\n getTouchCenter: function (touches) {\r\n return this.getVectorAvg(touches);\r\n },\r\n\r\n /**\r\n * Calculates the average of multiple vectors (x, y values)\r\n */\r\n getVectorAvg: function (vectors) {\r\n return {\r\n x: vectors.map(function (v) { return v.x; }).reduce(sum) / vectors.length,\r\n y: vectors.map(function (v) { return v.y; }).reduce(sum) / vectors.length\r\n };\r\n },\r\n\r\n /**\r\n * Adds an offset\r\n * @param offset the offset to add\r\n * @return return true when the offset change was accepted\r\n */\r\n addOffset: function (offset) {\r\n this.offset = {\r\n x: sanitizeValue(this.offset.x + offset.x),\r\n y: sanitizeValue(this.offset.y + offset.y)\r\n };\r\n },\r\n\r\n sanitize: function () {\r\n if (this.zoomFactor < this.options.zoomOutFactor) {\r\n this.zoomOutAnimation();\r\n } else if (this.isInsaneOffset(this.offset)) {\r\n this.sanitizeOffsetAnimation();\r\n }\r\n },\r\n\r\n /**\r\n * Checks if the offset is ok with the current zoom factor\r\n * @param offset\r\n * @return {Boolean}\r\n */\r\n isInsaneOffset: function (offset) {\r\n var sanitizedOffset = this.sanitizeOffset(offset);\r\n return sanitizedOffset.x !== offset.x ||\r\n sanitizedOffset.y !== offset.y;\r\n },\r\n\r\n /**\r\n * Creates an animation moving to a sane offset\r\n */\r\n sanitizeOffsetAnimation: function () {\r\n var targetOffset = this.sanitizeOffset(this.offset),\r\n startOffset = {\r\n x: this.offset.x,\r\n y: this.offset.y\r\n },\r\n updateProgress = (function (progress) {\r\n this.offset.x = sanitizeValue(startOffset.x + progress * (targetOffset.x - startOffset.x));\r\n this.offset.y = sanitizeValue(startOffset.y + progress * (targetOffset.y - startOffset.y));\r\n this.update();\r\n }).bind(this);\r\n\r\n this.animate(\r\n this.options.animationDuration,\r\n updateProgress,\r\n this.swing\r\n );\r\n },\r\n\r\n /**\r\n * Zooms back to the original position,\r\n * (no offset and zoom factor 1)\r\n */\r\n zoomOutAnimation: function () {\r\n var startZoomFactor = this.zoomFactor,\r\n zoomFactor = 1,\r\n center = this.getCurrentZoomCenter(),\r\n updateProgress = (function (progress) {\r\n this.scaleTo(startZoomFactor + progress * (zoomFactor - startZoomFactor), center);\r\n }).bind(this);\r\n\r\n this.animate(\r\n this.options.animationDuration,\r\n updateProgress,\r\n this.swing\r\n );\r\n },\r\n\r\n /**\r\n * Updates the aspect ratio\r\n */\r\n updateAspectRatio: function () {\r\n this.setContainerY(this.getContainerX() / this.getAspectRatio());\r\n },\r\n\r\n /**\r\n * Calculates the initial zoom factor (for the element to fit into the container)\r\n * @return the initial zoom factor\r\n */\r\n getInitialZoomFactor: function () {\r\n return this.container.offsetWidth / this.el.offsetWidth;\r\n },\r\n\r\n /**\r\n * Calculates the aspect ratio of the element\r\n * @return the aspect ratio\r\n */\r\n getAspectRatio: function () {\r\n return this.el.offsetWidth / this.el.offsetHeight;\r\n },\r\n\r\n /**\r\n * Calculates the virtual zoom center for the current offset and zoom factor\r\n * (used for reverse zoom)\r\n * @return {Object} the current zoom center\r\n */\r\n getCurrentZoomCenter: function () {\r\n\r\n // uses following formula to calculate the zoom center x value\r\n // offset_left / offset_right = zoomcenter_x / (container_x - zoomcenter_x)\r\n var length = this.container.offsetWidth * this.zoomFactor,\r\n offsetLeft = this.offset.x,\r\n offsetRight = length - offsetLeft - this.container.offsetWidth,\r\n widthOffsetRatio = offsetLeft / offsetRight,\r\n centerX = widthOffsetRatio * this.container.offsetWidth / (widthOffsetRatio + 1),\r\n\r\n // the same for the zoomcenter y\r\n height = this.container.offsetHeight * this.zoomFactor,\r\n offsetTop = this.offset.y,\r\n offsetBottom = height - offsetTop - this.container.offsetHeight,\r\n heightOffsetRatio = offsetTop / offsetBottom,\r\n centerY = heightOffsetRatio * this.container.offsetHeight / (heightOffsetRatio + 1);\r\n\r\n // prevents division by zero\r\n if (offsetRight === 0) { centerX = this.container.offsetWidth; }\r\n if (offsetBottom === 0) { centerY = this.container.offsetHeight; }\r\n\r\n return {\r\n x: centerX,\r\n y: centerY\r\n };\r\n },\r\n\r\n canDrag: function () {\r\n return !isCloseTo(this.zoomFactor, 1);\r\n },\r\n\r\n /**\r\n * Returns the touches of an event relative to the container offset\r\n * @param event\r\n * @return array touches\r\n */\r\n getTouches: function (event) {\r\n var rect = this.container.getBoundingClientRect();\r\n var posTop = rect.top + document.body.scrollTop;\r\n var posLeft = rect.left + document.body.scrollLeft;\r\n\r\n return Array.prototype.slice.call(event.touches).map(function (touch) {\r\n return {\r\n x: touch.pageX - posLeft,\r\n y: touch.pageY - posTop,\r\n };\r\n });\r\n },\r\n //\r\n // /**\r\n // * Returns the touches of an event relative to the container offset\r\n // * @param event\r\n // * @return array touches\r\n // */\r\n // getMousePosition: function (event, container) {\r\n // var rect = container.getBoundingClientRect();\r\n // var posTop = rect.top + document.body.scrollTop;\r\n // var posLeft = rect.left + document.body.scrollLeft;\r\n //\r\n // return {\r\n // x: event.pageX - posLeft,\r\n // y: event.pageY - posTop,\r\n // };\r\n // },\r\n\r\n /**\r\n * Animation loop\r\n * does not support simultaneous animations\r\n * @param duration\r\n * @param framefn\r\n * @param timefn\r\n * @param callback\r\n */\r\n animate: function (duration, framefn, timefn, callback) {\r\n\r\n let start = performance.now();\r\n this.inAnimation = true;\r\n const _self = this;\r\n\r\n requestAnimationFrame(function animateNew(time) {\r\n // timeFraction изменяется от 0 до 1\r\n if (!_self.inAnimation) { return; }\r\n let timeFraction = (time - start) / duration;\r\n if (timeFraction > 1) timeFraction = 1;\r\n\r\n // вычисление текущего состояния анимации\r\n let progress = timeFraction;\r\n\r\n framefn(progress); // отрисовать её\r\n _self.update();\r\n\r\n if (timeFraction < 1) {\r\n requestAnimationFrame(animateNew);\r\n } else {\r\n framefn(1);\r\n if (callback) {\r\n callback();\r\n }\r\n _self.update();\r\n _self.stopAnimation();\r\n _self.update();\r\n }\r\n });\r\n\r\n // var startTime = new Date().getTime(),\r\n // renderFrame = (function () {\r\n // if (!this.inAnimation) { return; }\r\n // var frameTime = new Date().getTime() - startTime,\r\n // progress = frameTime / duration;\r\n // if (frameTime >= duration) {\r\n // framefn(1);\r\n // if (callback) {\r\n // callback();\r\n // }\r\n // this.update();\r\n // this.stopAnimation();\r\n // this.update();\r\n // } else {\r\n // if (timefn) {\r\n // progress = timefn(progress);\r\n // }\r\n // framefn(progress);\r\n // this.update();\r\n // requestAnimationFrame(renderFrame);\r\n // }\r\n // }).bind(this);\r\n // this.inAnimation = true;\r\n // requestAnimationFrame(renderFrame);\r\n },\r\n\r\n /**\r\n * Stops the animation\r\n */\r\n stopAnimation: function () {\r\n this.inAnimation = false;\r\n },\r\n\r\n /**\r\n * Swing timing function for animations\r\n * @param p\r\n * @return {Number}\r\n */\r\n swing: function (p) {\r\n return -Math.cos(p * Math.PI) / 2 + 0.5;\r\n },\r\n\r\n getContainerX: function () {\r\n return this.container.offsetWidth;\r\n },\r\n\r\n getContainerY: function () {\r\n return this.container.offsetHeight;\r\n },\r\n\r\n setContainerY: function (y) {\r\n return this.container.style.height = y + 'px';\r\n },\r\n\r\n /**\r\n * Creates the expected html structure\r\n */\r\n setupMarkup: function () {\r\n this.container = buildElement('');\r\n this.coImage = document.getElementsByClassName(\"canvas-co-image\")[0];\r\n this.el.parentNode.insertBefore(this.container, this.el);\r\n this.container.appendChild(this.el);\r\n\r\n this.container.style.overflow = 'hidden';\r\n this.container.style.position = 'relative';\r\n\r\n this.el.style.webkitTransformOrigin = '0% 0%';\r\n this.el.style.mozTransformOrigin = '0% 0%';\r\n this.el.style.msTransformOrigin = '0% 0%';\r\n this.el.style.oTransformOrigin = '0% 0%';\r\n this.el.style.transformOrigin = '0% 0%';\r\n\r\n // this.el.style.position = 'absolute';\r\n },\r\n\r\n end: function () {\r\n this.hasInteraction = false;\r\n this.sanitize();\r\n // document.querySelector('.canvas-text').innerHTML = 'update end';\r\n this.update();\r\n },\r\n\r\n /**\r\n * Binds all required event listeners\r\n */\r\n bindEvents: function () {\r\n var self = this;\r\n detectGestures(this.container, this, this.elText);\r\n\r\n window.addEventListener('resize', this.updateCheck.bind(this));\r\n Array.from(this.el.querySelectorAll('img')).forEach(function(imgEl) {\r\n imgEl.addEventListener('load', self.update.bind(self));\r\n });\r\n\r\n if (this.el.nodeName === 'IMG') {\r\n this.el.addEventListener('load', this.update.bind(this));\r\n }\r\n },\r\n\r\n updateCheck: function () {\r\n if (!(window.canvasIsDragging || window.mobileMenuOpened)) {\r\n // document.querySelector('.canvas-text').innerHTML = 'update resize';\r\n this.update();\r\n }\r\n },\r\n\r\n getCanvasTransform: function (targetOffset = this.offset, targetZoomFactor = this.zoomFactor, useNewScale = false) {\r\n // if (useNewScale) {\r\n // debugger;//eslint-disable-line\r\n // }\r\n var zoomFactor = this.getInitialZoomFactor() * targetZoomFactor,\r\n offsetX = -targetOffset.x / zoomFactor,\r\n offsetY = -targetOffset.y / zoomFactor;\r\n if (useNewScale) {\r\n offsetX = offsetX * 1.8 // magic number to zoom in correct position\r\n }\r\n var transform3d = useNewScale\r\n ? 'translate3d(' + (offsetX > 0 ? 0 : offsetX) + 'px,' + offsetY + 'px,0px)' + ' scale3d(' + zoomFactor + ', ' + zoomFactor + ',1)'\r\n : 'scale3d(' + zoomFactor + ', ' + zoomFactor + ',1)' + 'translate3d(' + (offsetX > 0 ? 0 : offsetX) + 'px,' + offsetY + 'px,0px)',\r\n transform2d = useNewScale\r\n ? 'translate(' + (offsetX > 0 ? 0 : offsetX) + 'px,' + offsetY + 'px)' + ' scale(' + zoomFactor + ', ' + zoomFactor + ')'\r\n : 'scale(' + zoomFactor + ', ' + zoomFactor + ') ' + 'translate(' + (offsetX > 0 ? 0 : offsetX) + 'px,' + offsetY + 'px)';\r\n\r\n return {zoomFactor, offsetX, offsetY, transform2d, transform3d}\r\n },\r\n\r\n setCanvasTransform: function (transform2d, transform3d = \"\") {\r\n this.el.style.webkitTransform = transform3d || transform2d;\r\n this.el.style.mozTransform = transform2d;\r\n this.el.style.msTransform = transform2d;\r\n this.el.style.oTransform = transform2d;\r\n this.el.style.transform = transform3d || transform2d;\r\n },\r\n\r\n /**\r\n * Updates the css values according to the current zoom factor and offset\r\n */\r\n update: function (targetOffset = this.offset) {\r\n if (this.updatePlaned || window.canvasIsDragging) {\r\n return;\r\n }\r\n this.updatePlaned = true;\r\n\r\n // document.querySelector('.canvas-text').innerHTML = 'ahahah update';\r\n // document.querySelector('.canvas-text').innerHTML = this.enabled;\r\n\r\n window.setTimeout((function () {\r\n this.updatePlaned = false;\r\n this.updateAspectRatio();\r\n\r\n // this.elText.innerHTML = this.offset.x + \" / \" + this.offset.y;\r\n const isMobile = this.el.dataset.mobile === \"true\";\r\n\r\n var {offsetX, transform2d, transform3d}\r\n = this.getCanvasTransform(targetOffset, this.zoomFactor, true); // new for desktop\r\n\r\n var removeClone = (function () {\r\n if (this.clone) {\r\n this.clone.parentNode.removeChild(this.clone);\r\n delete this.clone;\r\n }\r\n }).bind(this);\r\n\r\n const offsetXForContainer = offsetX / 1.8; // because we increased it in getCanvasTransform func\r\n if (offsetXForContainer > 0 && !interaction && !IS_PRODUCT_JOURNEY) {\r\n const shiftXFromLeft = isMobile ? 2 : 2.5;\r\n const translateX = offsetXForContainer > 10 ? offsetXForContainer * shiftXFromLeft : offsetXForContainer;\r\n this.setContainerTransform('translateX('+(translateX)+'px)');\r\n }\r\n\r\n // Scale 3d and translate3d are faster (at least on ios)\r\n // but they also reduce the quality.\r\n // PinchZoom uses the 3d transformations during interactions\r\n // after interactions it falls back to 2d transformations\r\n if (!this.options.use2d || this.hasInteraction || this.inAnimation) {\r\n this.is3d = true;\r\n removeClone();\r\n this.setCanvasTransform(transform2d, transform3d);\r\n } else {\r\n // When changing from 3d to 2d transform webkit has some glitches.\r\n // To avoid this, a copy of the 3d transformed element is displayed in the\r\n // foreground while the element is converted from 3d to 2d transform\r\n if (this.is3d) {\r\n this.clone = this.el.cloneNode(true);\r\n this.clone.style.pointerEvents = 'none';\r\n this.container.appendChild(this.clone);\r\n window.setTimeout(removeClone, 200);\r\n }\r\n\r\n this.setCanvasTransform(transform2d);\r\n\r\n this.is3d = false;\r\n }\r\n }).bind(this), 0);\r\n },\r\n\r\n /**\r\n * Enables event handling for gestures\r\n */\r\n enable: function() {\r\n this.enabled = true;\r\n },\r\n\r\n /**\r\n * Disables event handling for gestures\r\n */\r\n disable: function() {\r\n this.enabled = false;\r\n },\r\n\r\n /**\r\n * Returns scale\r\n */\r\n getScale: function() {\r\n return this.zoomFactor\r\n },\r\n\r\n reset: function() {\r\n // var currentTranslate = getTranslate(this.el);\r\n // this.elText.innerHTML = JSON.stringify(currentTranslate);\r\n this.zoomFactor = 1;\r\n this.offset = {\r\n x: 0,\r\n y: 0\r\n };\r\n // this.end();\r\n // this.elText.innerHTML = 'reset!';\r\n\r\n },\r\n\r\n imageCanvasScroll: function (canvasClass, removeAllClasses, layoutType) {\r\n\r\n // document.querySelector('.canvas-text').innerHTML = 'imageCanvasScroll ' + canvasClass;\r\n clearTimeout(this.timerId);\r\n if (removeAllClasses) {\r\n window.imageCanvasScroll = true;\r\n this.el.style.transition = 'all 0.5s ease';\r\n this.el.style.WebkitTransition = 'all 0.5s ease';\r\n this.el.style.MozTransition = 'all 0.5s ease';\r\n this.timerId = setTimeout(() => {\r\n if (this.el.style.transition === 'all 0.5s ease') {\r\n this.el.style.transition = 'none';\r\n this.el.style.WebkitTransition = 'none';\r\n this.el.style.MozTransition = 'none';\r\n }\r\n window.imageCanvasScroll = false;\r\n }, 500);\r\n } else {\r\n window.imageCanvasScroll2 = true;\r\n this.el.style.transition = 'all 1.3s cubic-bezier(0.4, 0.01, 0.51, 1)';\r\n this.el.style.WebkitTransition = 'all 1.3s cubic-bezier(0.4, 0.01, 0.51, 1)';\r\n this.el.style.MozTransition = 'all 1.3s cubic-bezier(0.4, 0.01, 0.51, 1)';\r\n this.timerId = setTimeout(() => {\r\n if (this.el.style.transition === 'all 1.3s cubic-bezier(0.4, 0.01, 0.51, 1)') {\r\n this.el.style.transition = 'none';\r\n this.el.style.WebkitTransition = 'none';\r\n this.el.style.MozTransition = 'none';\r\n }\r\n window.imageCanvasScroll2 = false;\r\n }, 1300);\r\n }\r\n\r\n const\r\n zoomFactor = 1,\r\n offsetX = pinchScroll(canvasClass, this.getContainerX(), layoutType),\r\n offsetY = '0';\r\n\r\n const transform2d = 'scale(' + zoomFactor + ', ' + zoomFactor + ') ' +\r\n 'translate(' + offsetX + ',' + offsetY + 'px)';\r\n this.setCanvasTransform(transform2d);\r\n },\r\n\r\n onMouseDown: function (event) {\r\n // console.log(\"mousedown\", );\r\n if (this.zoomFactor > 1) {\r\n this.firstMove = true; // was true\r\n this.mouseDown = [event.pageX, event.pageY];\r\n // this.elText.innerHTML = 'mousedown' + this.mousePos[0] + \"\";\r\n window.touchMove = false;\r\n }\r\n },\r\n onMouseMove: function (event) {\r\n if (this.mouseDown) {\r\n if (this.firstMove) {\r\n this.handleDragStart(event, false);\r\n triggerEvent(window, ActionTypes.REMOVE_GREEN_ZONE_ON_CANVAS);\r\n window.touchMove = true;\r\n this.el.classList.add(\"drag\");\r\n event.stopPropagation();\r\n event.preventDefault();\r\n } else {\r\n this.handleMove(event);\r\n this.update();\r\n }\r\n this.firstMove = false;\r\n }\r\n },\r\n onMouseUp: function (event, lookCanvasClick) {\r\n // console.log(\"mouseup\", );\r\n\r\n if (this.mouseDown) {\r\n const diffX = Math.abs(event.pageX - this.mouseDown[0]);\r\n const diffY = Math.abs(event.pageY - this.mouseDown[1]);\r\n\r\n this.mouseDown = null;\r\n window.touchMove = false;\r\n this.el.classList.remove(\"drag\");\r\n if (this.hasInteraction) {\r\n this.hasInteraction = false\r\n }\r\n\r\n if (diffX < this.options.dragPixelsBeforeClick && diffY < this.options.dragPixelsBeforeClick) {\r\n lookCanvasClick(event); // Click! we moved less than 6 pixels\r\n } else {\r\n // console.log(\"this.handleDragEnd :(\");\r\n // window.clearTimeout(this.mouseDownTimeoutId);\r\n this.handleDragEnd();\r\n }\r\n } else if (lookCanvasClick) {\r\n lookCanvasClick(event)\r\n }\r\n },\r\n\r\n };\r\n\r\n var detectGestures = function (el, target) {\r\n let fingers = 0,\r\n // lastTouchStart = null,\r\n startTouches = null,\r\n\r\n setInteraction = function (newInteraction, event) {\r\n if (interaction !== newInteraction) {\r\n\r\n if (interaction && !newInteraction) {\r\n switch (interaction) {\r\n case \"zoom\":\r\n target.handleZoomEnd(event);\r\n break;\r\n case 'drag':\r\n target.handleDragEnd(event);\r\n break;\r\n }\r\n }\r\n\r\n switch (newInteraction) {\r\n case 'zoom':\r\n target.handleZoomStart(event);\r\n break;\r\n case 'drag':\r\n target.handleDragStart(event);\r\n break;\r\n }\r\n }\r\n interaction = newInteraction;\r\n },\r\n\r\n updateInteraction = function (event) {\r\n if (fingers === 2) {\r\n setInteraction('zoom');\r\n } else if (fingers === 1 && target.canDrag()) {\r\n setInteraction('drag', event);\r\n } else {\r\n setInteraction(null, event);\r\n }\r\n },\r\n\r\n targetTouches = function (touches) {\r\n return Array.from(touches).map(function (touch) {\r\n return {\r\n x: touch.pageX,\r\n y: touch.pageY\r\n };\r\n });\r\n },\r\n\r\n getDistance = function (a, b) {\r\n var x, y;\r\n x = a.x - b.x;\r\n y = a.y - b.y;\r\n return Math.sqrt(x * x + y * y);\r\n },\r\n\r\n calculateScale = function (startTouches, endTouches) {\r\n var startDistance = getDistance(startTouches[0], startTouches[1]),\r\n endDistance = getDistance(endTouches[0], endTouches[1]);\r\n return endDistance / startDistance;\r\n },\r\n\r\n cancelEvent = function (event) {\r\n event.stopPropagation();\r\n event.preventDefault();\r\n },\r\n\r\n // detectDoubleTap = function (event) {\r\n // var time = (new Date()).getTime();\r\n //\r\n // if (fingers > 1) {\r\n // lastTouchStart = null;\r\n // }\r\n //\r\n // if (time - lastTouchStart < 300) {\r\n // cancelEvent(event);\r\n //\r\n // target.handleDoubleTap(event);\r\n // switch (interaction) {\r\n // case \"zoom\":\r\n // target.handleZoomEnd(event);\r\n // break;\r\n // case 'drag':\r\n // target.handleDragEnd(event);\r\n // break;\r\n // }\r\n // }\r\n //\r\n // if (fingers === 1) {\r\n // lastTouchStart = time;\r\n // }\r\n // },\r\n firstMove = true;\r\n\r\n el.addEventListener('touchstart', function (event) {\r\n try {\r\n // target.elText.innerHTML = 'touchstart';\r\n if(target.enabled) {\r\n firstMove = true;\r\n fingers = event.touches.length;\r\n // target.elText.innerHTML = 'touchstart 2 ' + fingers;\r\n\r\n // if (!window.mobileMenuOpened) {\r\n // detectDoubleTap(event);\r\n // }\r\n }\r\n window.touchMove = false;\r\n } catch (e) {\r\n // alert(e)\r\n }\r\n\r\n });\r\n\r\n el.addEventListener('touchmove', function (event) {\r\n try {\r\n if(target.enabled) {\r\n if (firstMove) {\r\n updateInteraction(event);\r\n if (interaction) {\r\n cancelEvent(event);\r\n }\r\n startTouches = targetTouches(event.touches);\r\n } else {\r\n switch (interaction) {\r\n case 'zoom':\r\n target.handleZoom(event, calculateScale(startTouches, targetTouches(event.touches)));\r\n break;\r\n case 'drag':\r\n target.handleDrag(event);\r\n break;\r\n }\r\n if (interaction) {\r\n cancelEvent(event);\r\n target.update();\r\n }\r\n }\r\n\r\n firstMove = false;\r\n }\r\n // target.elText.innerHTML = 'touchmove';\r\n window.touchMove = true;\r\n } catch (e) {\r\n // alert(e)\r\n target.reset();\r\n target.zoomOutAnimation()\r\n }\r\n });\r\n\r\n el.addEventListener('touchend', function (event) {\r\n try {\r\n // target.elText.innerHTML = 'touchend';\r\n window.touchMove = false;\r\n target.stopAnimation();\r\n if (+isCloseTo(target.zoomFactor, 1) && interaction) {\r\n // target.elText.innerHTML = 'touchend 2' + target.zoomFactor;\r\n target.handleDragEnd();\r\n target.reset();\r\n target.zoomOutAnimation()\r\n }\r\n if (target.enabled) {\r\n // target.elText.innerHTML = 'touchend 1' + target.zoomFactor;\r\n fingers = event.touches.length;\r\n updateInteraction(event);\r\n }\r\n } catch (e) {\r\n // alert(e)\r\n target.reset();\r\n target.zoomOutAnimation()\r\n }\r\n });\r\n\r\n };\r\n\r\n return PinchZoom;\r\n};\r\n\r\nvar PinchZoom = definePinchZoom();\r\n\r\nexport default PinchZoom;\r\n","import KitchenZIndex from \"../bvcomponents/kvComponent/core/zIndex\";\r\nimport store from \"../store\";\r\n\r\nexport default function (canvasClass, containerX, layoutType, layoutScene) {\r\n // console.log('canvasClass', canvasClass);\r\n // console.log('layoutType', layoutType);\r\n // console.log('layoutScene', layoutScene);\r\n switch(document.kvConfig.visualizerType) {\r\n case \"Bathroom\":\r\n case \"BV\":\r\n switch (canvasClass) {\r\n case 'shower':\r\n case 'shower-shower':\r\n case 'shower-shower-body':\r\n case 'shower-interior-wall':\r\n case 'shower-shower-walls':\r\n case 'shower-fixture':\r\n case 'shower-shower_head':\r\n case 'shower-shower-head':\r\n case 'shower-floor':\r\n case 'shower-pan':\r\n case 'shower-tub-combo':\r\n case 'shower-shower-door':\r\n case 'shower-shower-door-handle':\r\n case 'shower-handle':\r\n case 'shower-shower-pan':\r\n case 'shower-interior-wall-accent':\r\n case 'shower-shower-walls-accent':\r\n case 'shower-tub-combo-wall-configuration':\r\n case 'shower-tub-combo-shower-door':\r\n case 'shower-tub-combo-handle':\r\n case 'shower-tub-combo-tub-liner':\r\n case 'shower-tub-combo-jetted-tub':\r\n case 'shower-tub-combo-replacement-tub':\r\n case 'shower-tub-combo-walk-in-tub':\r\n case 'shower-tub-combo-fixture':\r\n case 'shower-tub-combo-shower-head':\r\n case 'shower-tub-combo-shower_head':\r\n case 'shower-tub-combo-interior-wall':\r\n case 'shower-tub-combo-interior-wall-accent':\r\n case 'shower-tub-combo-shower-walls':\r\n case 'shower-tub-combo-shower-walls-accent':\r\n case 'shower-tub-combo-pony-wall-cap':\r\n case 'shower-tub-combo-pony-wall-glass':\r\n case 'shower-threshold':\r\n case 'shower-accessories':\r\n case 'shower-accessories-soap-dish':\r\n case 'shower-accessories-large-corner-seat':\r\n case 'shower-accessories-corner-caddie':\r\n case 'shower-accessories-large-corner-caddie':\r\n case 'shower-accessories-small-corner-shelf':\r\n case 'shower-accessories-grab-bar':\r\n return containerX < 680 ? '-38%' : '-33%';\r\n case 'shower-pony-wall':\r\n case 'shower-pony-wall-cap':\r\n case 'shower-pony-wall-glass':\r\n case 'pony-wall':\r\n case 'wall-pony-wall':\r\n if (layoutType === \"Small\") { // small room layout\r\n return containerX < 680 ? '-60%' : '-50%';\r\n } else { // large room layout\r\n return containerX < 680 ? '-38%' : '-33%';\r\n }\r\n case 'window':\r\n case 'wall-c':\r\n case 'wall-wall-c':\r\n return containerX < 680 ? '-60%' : '-50%';\r\n case 'bathtub':\r\n case 'bathtub-bathtub':\r\n case 'bathtub-fixture':\r\n case 'bathtub-base':\r\n case 'bathtub-rim':\r\n case 'bathtub-spa':\r\n if (window.innerWidth < 991) {\r\n window.scrollTo({\r\n top: window.innerHeight,\r\n behavior: \"smooth\"\r\n });\r\n }\r\n return containerX < 680 ? '-60%' : '-50%';\r\n case 'toilet':\r\n case 'toilet-toilet':\r\n return containerX < 680 ? '-18%' : '-14.5%';\r\n case 'left-shower-wall':\r\n case 'wall-left-shower-wall':\r\n if (layoutType === \"Small\") { // small room layout\r\n return containerX < 680 ? '-50%' : '-45%';\r\n } else { // large room layout\r\n return containerX < 680 ? '-22%' : '-18%';\r\n }\r\n case 'right-shower-wall':\r\n case 'wall-right-shower-wall':\r\n if (layoutType === \"Small\") { // small room layout\r\n return containerX < 680 ? '-22%' : '-18%';\r\n } else { // large room layout\r\n return containerX < 680 ? '-50%' : '-45%';\r\n }\r\n case 'floor':\r\n return containerX < 680 ? '-40%' : '-35%';\r\n default:\r\n return \"0\"\r\n }\r\n case \"bvScene\":\r\n case \"bvLook\": {\r\n switch (canvasClass) {\r\n case 'shower':\r\n case 'shower-head':\r\n case 'shower-shower':\r\n case 'shower-shower-body':\r\n case 'shower-interior-wall':\r\n case 'shower-shower-walls':\r\n case 'shower-fixture':\r\n case 'shower-shower_head':\r\n case 'shower-shower-head':\r\n case 'shower-floor':\r\n case 'shower-pan':\r\n case 'shower-tub-combo':\r\n case 'shower-shower-door':\r\n case 'shower-shower-door-handle':\r\n case 'shower-handle':\r\n case 'shower-shower-pan':\r\n case 'shower-interior-wall-accent':\r\n case 'shower-shower-walls-accent':\r\n case 'shower-tub-combo-wall-configuration':\r\n case 'shower-tub-combo-shower-door':\r\n case 'shower-tub-combo-handle':\r\n case 'shower-tub-combo-tub-liner':\r\n case 'shower-tub-combo-jetted-tub':\r\n case 'shower-tub-combo-replacement-tub':\r\n case 'shower-tub-combo-walk-in-tub':\r\n case 'shower-tub-combo-fixture':\r\n case 'shower-tub-combo-shower-head':\r\n case 'shower-tub-combo-shower_head':\r\n case 'shower-tub-combo-interior-wall':\r\n case 'shower-tub-combo-interior-wall-accent':\r\n case 'shower-tub-combo-shower-walls':\r\n case 'shower-tub-combo-shower-walls-accent':\r\n case 'shower-tub-combo-pony-wall-cap':\r\n case 'shower-tub-combo-pony-wall-glass':\r\n case 'shower-threshold':\r\n case 'shower-accessories':\r\n case 'shower-accessories-soap-dish':\r\n case 'shower-accessories-large-corner-seat':\r\n case 'shower-accessories-corner-caddie':\r\n case 'shower-accessories-large-corner-caddie':\r\n case 'shower-accessories-small-corner-shelf':\r\n case 'shower-accessories-grab-bar':\r\n case 'shower-pony-wall':\r\n case 'shower-pony-wall-cap':\r\n case 'shower-pony-wall-glass':\r\n case 'pony-wall':\r\n case 'wall-pony-wall':\r\n if (layoutType === \"Layout4\") { // small room layout\r\n return containerX < 680 ? '-40%' : '-23%';\r\n } else { // large room layout\r\n return \"0\";\r\n }\r\n case 'window':\r\n case 'wall-c':\r\n case 'wall-wall-c':\r\n case 'right-wall':\r\n return containerX < 680 ? '-60%' : '-50%';\r\n case 'bathtub':\r\n case 'bathtub-bathtub':\r\n case 'bathtub-fixture':\r\n case 'bathtub-base':\r\n case 'bathtub-rim':\r\n case 'bathtub-spa':\r\n if (window.innerWidth < 991) {\r\n window.scrollTo({\r\n top: window.innerHeight,\r\n behavior: \"smooth\"\r\n });\r\n }\r\n return containerX < 680 ? '-60%' : '-50%';\r\n case 'toilet':\r\n case 'toilet-toilet': {\r\n switch (layoutType) {\r\n case \"Layout1\":\r\n return containerX < 680 ? '-18%' : '-14.5%';\r\n default:\r\n break;\r\n }\r\n break;\r\n }\r\n case 'left-shower-wall':\r\n case 'wall-left-shower-wall':\r\n if (layoutType === \"Small\") { // small room layout\r\n return containerX < 680 ? '-50%' : '-45%';\r\n } else { // large room layout\r\n return containerX < 680 ? '-22%' : '-18%';\r\n }\r\n case 'right-shower-wall':\r\n case 'wall-right-shower-wall':\r\n if (layoutType === \"Small\") { // small room layout\r\n return containerX < 680 ? '-22%' : '-18%';\r\n } else { // large room layout\r\n return containerX < 680 ? '-50%' : '-45%';\r\n }\r\n case 'floor':\r\n return containerX < 680 ? '-22%' : '-18%';\r\n default:\r\n return \"0\"\r\n }\r\n return \"0\"\r\n }\r\n case \"Kitchen\":\r\n case \"KV\":\r\n switch (canvasClass) {\r\n //APPLIANCE\r\n case 'hood':\r\n case 'microwave':\r\n case 'range':\r\n case 'appliance-hood':\r\n case 'appliance-range':\r\n case 'appliance-microwave':\r\n return containerX < 680 ? '-39%' : '-37%';\r\n case 'dishwasher':\r\n case 'appliance-dishwasher':\r\n return containerX < 680 ? '-23%' : '-20%';\r\n case 'fridge':\r\n case 'appliance-fridge':\r\n switch (layoutType) {\r\n case \"Small\":\r\n case \"SmallWithPeninsula\":\r\n case \"SmallWithIsland\":\r\n case \"SmallWithPeninsulaWithIsland\":\r\n return containerX < 680 ? '-15%' : '-13%';\r\n default:\r\n return \"0\";\r\n }\r\n //CABINET\r\n case \"cabinet\":\r\n case \"top-cabinet\":\r\n case \"cabinet-top-cabinet\":\r\n case \"handle\":\r\n case \"cabinet-top-handle\":\r\n case \"cabinet-bottom-handle\":\r\n case \"crown-molding\":\r\n case \"cabinet-crown-molding\":\r\n case 'bottom-cabinet':\r\n case 'cabinet-bottom-cabinet': {\r\n if (document.hoveredLayer\r\n && (document.hoveredLayer.zIndex === KitchenZIndex.layouts[layoutType].Cabinet.Peninsula)\r\n && window.innerWidth < 991) {\r\n window.scrollTo({\r\n top: window.innerHeight,\r\n behavior: \"smooth\"\r\n });\r\n }\r\n const module = store.getState().navigationState.moduleContextMenuModule;\r\n // console.log('module', module);\r\n switch (module) {\r\n case \"1\":\r\n case \"2\":\r\n case \"3\":\r\n return \"0\";\r\n case \"4\":\r\n return containerX < 680 ? '-19%' : '-17%';\r\n case \"5\":\r\n return containerX < 680 ? '-27%' : '-25%';\r\n case \"6\":\r\n return containerX < 680 ? '-43%' : '-40%';\r\n case null:\r\n default:\r\n return containerX < 680 ? '-60%' : '-50%';\r\n }\r\n }\r\n //CENTER ISLAND\r\n case 'center-island':\r\n case 'center-island-countertop':\r\n case 'center-island-edge':\r\n case 'center-island-cabinet':\r\n case 'center-island-sink':\r\n case 'center-island-faucet':\r\n return containerX < 680 ? '-22%' : '-18%';\r\n case 'chairs':\r\n case 'center-island-chairs':\r\n return containerX < 680 ? '-5%' : '-4%';\r\n case 'center-island-handle':\r\n return containerX < 680 ? '-27%' : '-25%';\r\n //COUNTERTOP\r\n case 'countertop-countertop':\r\n case 'countertop-edge-profile':\r\n case 'countertop-sink':\r\n case 'countertop-faucet':\r\n return containerX < 680 ? '-60%' : '-50%';\r\n case 'countertop':\r\n if (document.hoveredLayer) {\r\n switch (document.hoveredLayer.zIndex) {\r\n case KitchenZIndex.layouts[layoutType].CenterIsland.Countertop:\r\n return containerX < 680 ? '-22%' : '-18%';\r\n case KitchenZIndex.layouts[layoutType].CountertopGroup.Countertop2:\r\n return containerX < 680 ? '-60%' : '-50%';\r\n case KitchenZIndex.layouts[layoutType].CountertopGroup.Countertop:\r\n return containerX < 680 ? '-15%' : '-13%';\r\n default:\r\n return \"0\"\r\n }\r\n }\r\n return \"0\";\r\n case 'faucet':\r\n if (document.hoveredLayer && document.hoveredLayer.zIndex === KitchenZIndex.layouts[layoutType].CenterIsland.Faucet) {\r\n return containerX < 680 ? '-22%' : '-18%';\r\n } else {\r\n return containerX < 680 ? '-60%' : '-50%';\r\n }\r\n case 'sink':\r\n if (document.hoveredLayer && document.hoveredLayer.zIndex === KitchenZIndex.layouts[layoutType].CenterIsland.Sink) {\r\n return containerX < 680 ? '-22%' : '-18%';\r\n } else {\r\n return containerX < 680 ? '-60%' : '-50%';\r\n }\r\n //WALLS\r\n case \"backsplash\":\r\n case \"walls-backsplash\":\r\n case \"ceiling\":\r\n case \"walls-ceiling\":\r\n return containerX < 680 ? '-15%' : '-13%';\r\n case \"right-wall\":\r\n case \"walls-right-wall\":\r\n return containerX < 680 ? '-37%' : '-35%';\r\n default:\r\n return \"0\"\r\n }\r\n case \"kvScene\":\r\n switch(layoutType) {\r\n case \"Layout1\": {\r\n switch (layoutScene) {\r\n case \"1\": {\r\n switch (canvasClass) {\r\n //CENTER ISLAND\r\n case 'center-island':\r\n case 'center-island-countertop':\r\n case 'center-island-island-countertop':\r\n case 'center-island-stovetop':\r\n case 'center-island-edge':\r\n case 'center-island-cabinet':\r\n case 'center-island-sink':\r\n case 'center-island-faucet':\r\n case 'centerisland':\r\n case 'centerisland-countertop':\r\n case 'centerisland-island-countertop':\r\n case 'centerisland-stovetop':\r\n case 'centerisland-edge':\r\n case 'centerisland-cabinet':\r\n case 'centerisland-sink':\r\n case 'centerisland-faucet':\r\n return containerX < 680 ? '-30%' : '-23%';\r\n case 'chairs':\r\n case 'centerisland-chairs':\r\n case 'centerisland-handle':\r\n case 'centerisland-island-hood':\r\n return containerX < 680 ? '-35%' : '-30%';\r\n case 'faucet':\r\n case 'countertop-faucet':\r\n case 'sink':\r\n case 'countertop-sink':\r\n return containerX < 680 ? '-15%' : '-10%';\r\n case 'walls-right-wall':\r\n return containerX < 680 ? '-40%' : '-32%';\r\n case 'walls-center-wall':\r\n return containerX < 680 ? '-48%' : '-44%';\r\n case 'walls-front-wall':\r\n return '-50%';\r\n default:\r\n return \"0\"\r\n }\r\n }\r\n case \"2\": {\r\n switch (canvasClass) {\r\n //CENTER ISLAND\r\n case 'center-island':\r\n case 'center-island-countertop':\r\n case 'center-island-island-countertop':\r\n case 'center-island-stovetop':\r\n case 'center-island-edge':\r\n case 'center-island-cabinet':\r\n case 'center-island-sink':\r\n case 'center-island-faucet':\r\n case 'centerisland':\r\n case 'centerisland-countertop':\r\n case 'centerisland-island-countertop':\r\n case 'centerisland-stovetop':\r\n case 'centerisland-edge':\r\n case 'centerisland-cabinet':\r\n case 'centerisland-sink':\r\n case 'centerisland-faucet':\r\n return containerX < 680 ? '-30%' : '-23%';\r\n case 'chairs':\r\n case 'centerisland-chairs':\r\n case 'centerisland-handle':\r\n case 'centerisland-island-hood':\r\n return containerX < 680 ? '-35%' : '-30%';\r\n case 'faucet':\r\n case 'countertop-faucet':\r\n case 'sink':\r\n case 'countertop-sink':\r\n return containerX < 680 ? '-15%' : '-10%';\r\n case 'walls-center-wall':\r\n return containerX < 680 ? '-48%' : '-44%';\r\n case 'walls-front-wall':\r\n case 'walls-right-wall':\r\n return '-50%';\r\n default:\r\n return \"0\"\r\n }\r\n }\r\n case \"3\": {\r\n switch (canvasClass) {\r\n //CENTER ISLAND\r\n case 'center-island':\r\n case 'center-island-countertop':\r\n case 'center-island-island-countertop':\r\n case 'center-island-stovetop':\r\n case 'center-island-edge':\r\n case 'center-island-cabinet':\r\n case 'center-island-sink':\r\n case 'center-island-faucet':\r\n case 'centerisland':\r\n case 'centerisland-countertop':\r\n case 'centerisland-island-countertop':\r\n case 'centerisland-stovetop':\r\n case 'centerisland-edge':\r\n case 'centerisland-cabinet':\r\n case 'centerisland-sink':\r\n case 'centerisland-faucet':\r\n case 'appliances-hood':\r\n case 'appliances-stove':\r\n case 'appliances-stovetop':\r\n case 'walls-backsplash':\r\n return containerX < 680 ? '-30%' : '-23%';\r\n case 'appliances-dishwasher':\r\n return containerX < 680 ? '-35%' : '-30%';\r\n case 'faucet':\r\n case 'countertop-faucet':\r\n case 'sink':\r\n case 'countertop-sink':\r\n case 'walls-right-wall':\r\n case 'countertop-edge-profile':\r\n case 'countertop-countertop':\r\n return '-50%';\r\n default:\r\n return \"0\"\r\n }\r\n }\r\n default:\r\n return \"0\"\r\n }\r\n }\r\n case \"Layout2\": {\r\n switch (canvasClass) {\r\n //CENTER ISLAND\r\n case 'faucet':\r\n case 'countertop-faucet':\r\n case 'sink':\r\n case 'countertop-sink':\r\n case 'countertop-edge-profile':\r\n case 'walls-front-wall':\r\n case 'countertop-countertop':\r\n case 'walls-backsplash':\r\n return containerX < 680 ? '-25%' : '-20%';\r\n case 'appliances-hood':\r\n case 'appliances-stove':\r\n case 'appliances-oven':\r\n return containerX < 680 ? '-45%' : '-37%';\r\n case 'walls-center-wall':\r\n return containerX < 680 ? '-48%' : '-44%';\r\n case 'walls-right-wall':\r\n case 'appliances-fridge':\r\n case 'appliances-fridge-enclosure':\r\n return '-50%';\r\n default:\r\n return \"0\"\r\n }\r\n }\r\n case \"Layout3\": {\r\n switch (canvasClass) {\r\n //CENTER ISLAND\r\n case 'faucet':\r\n case 'countertop-faucet':\r\n case 'sink':\r\n case 'countertop-sink':\r\n case 'countertop-edge-profile':\r\n case 'walls-front-wall':\r\n case 'countertop-countertop':\r\n case 'walls-backsplash':\r\n return containerX < 680 ? '-25%' : '-20%';\r\n case 'appliances-hood':\r\n case 'appliances-stove':\r\n case 'appliances-oven':\r\n return containerX < 680 ? '-18%' : '-15%';\r\n case 'center-island':\r\n case 'center-island-countertop':\r\n case 'center-island-island-countertop':\r\n case 'center-island-stovetop':\r\n case 'center-island-edge':\r\n case 'center-island-cabinet':\r\n case 'center-island-sink':\r\n case 'center-island-faucet':\r\n case 'centerisland':\r\n case 'centerisland-countertop':\r\n case 'centerisland-island-countertop':\r\n case 'centerisland-stovetop':\r\n case 'centerisland-edge':\r\n case 'centerisland-cabinet':\r\n case 'centerisland-sink':\r\n case 'centerisland-faucet':\r\n return '-50%';\r\n default:\r\n return \"0\"\r\n }\r\n }\r\n default:\r\n return \"0\"\r\n }\r\n default:\r\n return \"0\"\r\n }\r\n}\r\n","import orderBy from \"lodash/orderBy\";\r\n\r\nimport {getCurrentRoomType} from \"../appLayout\";\r\nimport {LOOK_ROOM_TYPES} from \"../look/core/constants\";\r\n\r\nexport const getLayerPartToRender = (layerHovering, hoveredLayerIndex, layers) => {\r\n return {\r\n zIndex: layers[hoveredLayerIndex].zIndex,\r\n cropCoords: layers[hoveredLayerIndex].cropCoords,\r\n coords: layers[hoveredLayerIndex].coords,\r\n image: layerHovering.greenImage,\r\n layerDimensions: layerHovering.layerDimensions,\r\n partId: layerHovering.layer.partId || \"\",\r\n isGreenHovering: true,\r\n hoveringImage: layerHovering.hoveringImage,\r\n }\r\n}\r\n\r\nexport const checkForLayerParts = (imageCanvasComponent, layers, hoveredLayerIndex, layerHovering, allLayers) => {\r\n // 1) add new Green Layer\r\n layers.splice(hoveredLayerIndex + 1, 0, getLayerPartToRender(layerHovering, hoveredLayerIndex, layers));\r\n\r\n // 2) Check if it needs additional Part\r\n // console.log(\"layerHovering\", layerHovering);\r\n // console.log(\"layersHoverings\", layersHoverings);\r\n switch (document.kvConfig.visualizerType) {\r\n case \"Bathroom\":\r\n case \"BV\": {\r\n const ShowerBodyIndexes = imageCanvasComponent.props.layout.zIndexes[imageCanvasComponent.props.layoutType].Shower.Steam60in.Body;\r\n const ShowerIndexes = imageCanvasComponent.props.layout.zIndexes[imageCanvasComponent.props.layoutType].Shower.Custom60in;\r\n if (layerHovering.layer.zIndex === ShowerBodyIndexes[\"1\"] || layerHovering.layer.zIndex === ShowerBodyIndexes[\"2\"]) {\r\n\r\n const missingBodyPart = layerHovering.layer.zIndex === ShowerBodyIndexes[\"1\"] ? \"2\" : \"1\";\r\n\r\n const layerHovering2 = imageCanvasComponent.state.layersHoverings.find((layersHoveringItem) => {\r\n return layersHoveringItem.layer.zIndex === ShowerBodyIndexes[missingBodyPart]\r\n });\r\n const hoveredLayerIndex = layers.findIndex((layer) => {\r\n return layer.zIndex === layerHovering2.layer.zIndex\r\n });\r\n\r\n layers.splice(hoveredLayerIndex + 1, 0, {\r\n zIndex: ShowerBodyIndexes[missingBodyPart],\r\n image: layerHovering2.greenImage,\r\n layerDimensions: layerHovering2.layerDimensions,\r\n isGreenHovering: true,\r\n hoveringImage: layerHovering2.hoveringImage,\r\n });\r\n }\r\n if (layerHovering.layer.zIndex === ShowerIndexes.Wall || layerHovering.layer.zIndex === ShowerIndexes.Wall2\r\n || layerHovering.layer.zIndex === ShowerIndexes.WallAccent || layerHovering.layer.zIndex === ShowerIndexes.WallAccent2) {\r\n let missingZIndex = 0;\r\n if (layerHovering.layer.zIndex === ShowerIndexes.Wall || layerHovering.layer.zIndex === ShowerIndexes.Wall2) {\r\n missingZIndex = layerHovering.layer.zIndex === ShowerIndexes.Wall ? ShowerIndexes.Wall2 : ShowerIndexes.Wall;\r\n }\r\n if (layerHovering.layer.zIndex === ShowerIndexes.WallAccent || layerHovering.layer.zIndex === ShowerIndexes.WallAccent2) {\r\n missingZIndex = layerHovering.layer.zIndex === ShowerIndexes.WallAccent ? ShowerIndexes.WallAccent2 : ShowerIndexes.WallAccent;\r\n }\r\n const layerHovering2 = imageCanvasComponent.state.layersHoverings.find((layersHoveringItem) => {\r\n return layersHoveringItem.layer.zIndex === missingZIndex\r\n });\r\n if (layerHovering2) {\r\n const hoveredLayerIndex = layers.findIndex((layer) => {\r\n return layer.zIndex === layerHovering2.layer.zIndex\r\n });\r\n layers.splice(hoveredLayerIndex + 1, 0, {\r\n zIndex: missingZIndex,\r\n image: layerHovering2.greenImage,\r\n layerDimensions: layerHovering2.layerDimensions,\r\n isGreenHovering: true,\r\n hoveringImage: layerHovering2.hoveringImage,\r\n });\r\n }\r\n }\r\n break;\r\n }\r\n case \"bvScene\": {\r\n // const CabinetIndexes = imageCanvasComponent.props.layout.zIndexes[imageCanvasComponent.props.layoutType].Cabinet;\r\n let missingZindex = 0;\r\n let missingZindex2 = 0;\r\n // switch(layerHovering.layer.zIndex) {\r\n // case CabinetIndexes[\"CrownMolding\"]:\r\n // missingZindex = CabinetIndexes[\"CrownMolding2\"];\r\n // break;\r\n // }\r\n if (missingZindex) {\r\n const layerHovering2 = imageCanvasComponent.state.layersHoverings.find((layersHoveringItem) => {\r\n return layersHoveringItem.layer.zIndex === missingZindex\r\n });\r\n const hoveredLayerIndex2 = layers.findIndex((layer) => {\r\n return layer.zIndex === missingZindex\r\n });\r\n if (layerHovering2 && hoveredLayerIndex2) {\r\n layers.splice(hoveredLayerIndex2 + 1, 0, {\r\n zIndex: missingZindex,\r\n image: layerHovering2.greenImage,\r\n layerDimensions: layerHovering2.layerDimensions,\r\n isGreenHovering: true,\r\n hoveringImage: layerHovering2.hoveringImage,\r\n });\r\n }\r\n }\r\n if (missingZindex2) {\r\n const layerHovering3 = imageCanvasComponent.state.layersHoverings.find((layersHoveringItem) => {\r\n return layersHoveringItem.layer.zIndex === missingZindex2\r\n });\r\n const hoveredLayerIndex3 = layers.findIndex((layer) => {\r\n return layer.zIndex === missingZindex2\r\n });\r\n if (layerHovering3 && hoveredLayerIndex3) {\r\n layers.splice(hoveredLayerIndex3 + 1, 0, {\r\n zIndex: missingZindex2,\r\n image: layerHovering3.greenImage,\r\n layerDimensions: layerHovering3.layerDimensions,\r\n isGreenHovering: true,\r\n hoveringImage: layerHovering3.hoveringImage,\r\n });\r\n }\r\n }\r\n break;\r\n }\r\n case \"Kitchen\": {\r\n const CabinetIndexes = imageCanvasComponent.props.layout.zIndexes[imageCanvasComponent.props.layoutType].Cabinet;\r\n const CountertopGroupIndexes = imageCanvasComponent.props.layout.zIndexes[imageCanvasComponent.props.layoutType].CountertopGroup;\r\n let missingZindex = 0;\r\n let missingZindex2 = 0;\r\n switch(layerHovering.layer.zIndex) {\r\n case CabinetIndexes[\"TopCabinet\"]:\r\n missingZindex = CabinetIndexes[\"TopCabinet2\"];\r\n break;\r\n case CabinetIndexes[\"TopCabinet2\"]:\r\n missingZindex = CabinetIndexes[\"TopCabinet\"];\r\n break;\r\n case CabinetIndexes[\"BottomCabinet\"]:\r\n missingZindex = CabinetIndexes[\"BottomCabinet2\"];\r\n missingZindex2 = CabinetIndexes[\"Peninsula\"];\r\n break;\r\n case CabinetIndexes[\"BottomCabinet2\"]:\r\n missingZindex = CabinetIndexes[\"BottomCabinet\"];\r\n missingZindex2 = CabinetIndexes[\"Peninsula\"];\r\n break;\r\n case CabinetIndexes[\"Peninsula\"]:\r\n missingZindex = CabinetIndexes[\"BottomCabinet\"];\r\n missingZindex2 = CabinetIndexes[\"BottomCabinet2\"];\r\n break;\r\n case CabinetIndexes[\"CrownMolding\"]:\r\n missingZindex = CabinetIndexes[\"CrownMolding2\"];\r\n break;\r\n case CabinetIndexes[\"CrownMolding2\"]:\r\n missingZindex = CabinetIndexes[\"CrownMolding\"];\r\n break;\r\n case CountertopGroupIndexes[\"Countertop\"]:\r\n missingZindex = CountertopGroupIndexes[\"Countertop2\"];\r\n break;\r\n case CountertopGroupIndexes[\"Countertop2\"]:\r\n missingZindex = CountertopGroupIndexes[\"Countertop\"];\r\n break;\r\n case CabinetIndexes[\"TopHandle\"]:\r\n missingZindex = CabinetIndexes[\"TopHandle2\"];\r\n break;\r\n case CabinetIndexes[\"TopHandle2\"]:\r\n missingZindex = CabinetIndexes[\"TopHandle\"];\r\n break;\r\n case CabinetIndexes[\"BottomHandle\"]:\r\n missingZindex = CabinetIndexes[\"BottomHandle2\"];\r\n break;\r\n case CabinetIndexes[\"BottomHandle2\"]:\r\n missingZindex = CabinetIndexes[\"BottomHandle\"];\r\n break;\r\n }\r\n if (missingZindex) {\r\n const layerHovering2 = imageCanvasComponent.state.layersHoverings.find((layersHoveringItem) => {\r\n return layersHoveringItem.layer.zIndex === missingZindex\r\n });\r\n const hoveredLayerIndex2 = layers.findIndex((layer) => {\r\n return layer.zIndex === missingZindex\r\n });\r\n if (layerHovering2 && hoveredLayerIndex2) {\r\n layers.splice(hoveredLayerIndex2 + 1, 0, {\r\n zIndex: missingZindex,\r\n image: layerHovering2.greenImage,\r\n layerDimensions: layerHovering2.layerDimensions,\r\n isGreenHovering: true,\r\n hoveringImage: layerHovering2.hoveringImage,\r\n });\r\n }\r\n }\r\n if (missingZindex2) {\r\n const layerHovering3 = imageCanvasComponent.state.layersHoverings.find((layersHoveringItem) => {\r\n return layersHoveringItem.layer.zIndex === missingZindex2\r\n });\r\n const hoveredLayerIndex3 = layers.findIndex((layer) => {\r\n return layer.zIndex === missingZindex2\r\n });\r\n if (layerHovering3 && hoveredLayerIndex3) {\r\n layers.splice(hoveredLayerIndex3 + 1, 0, {\r\n zIndex: missingZindex2,\r\n image: layerHovering3.greenImage,\r\n layerDimensions: layerHovering3.layerDimensions,\r\n isGreenHovering: true,\r\n hoveringImage: layerHovering3.hoveringImage,\r\n });\r\n }\r\n }\r\n break;\r\n }\r\n case \"kvMaster\": {\r\n // 2) Check if it needs additional Part\r\n const CabinetIndexes = imageCanvasComponent.props.layout.zIndexes[imageCanvasComponent.props.layoutType].Cabinet;\r\n const CountertopGroupIndexes = imageCanvasComponent.props.layout.zIndexes[imageCanvasComponent.props.layoutType].CountertopGroup;\r\n let missingZindex = 0;\r\n let missingZindex2 = 0;\r\n switch(layerHovering.layer.zIndex) {\r\n case CabinetIndexes[\"TopCabinet\"]:\r\n missingZindex = CabinetIndexes[\"TopCabinet2\"];\r\n break;\r\n case CabinetIndexes[\"TopCabinet2\"]:\r\n missingZindex = CabinetIndexes[\"TopCabinet\"];\r\n break;\r\n case CabinetIndexes[\"BottomCabinet\"]:\r\n missingZindex = CabinetIndexes[\"BottomCabinet2\"];\r\n missingZindex2 = CabinetIndexes[\"Peninsula\"];\r\n break;\r\n case CabinetIndexes[\"BottomCabinet2\"]:\r\n missingZindex = CabinetIndexes[\"BottomCabinet\"];\r\n missingZindex2 = CabinetIndexes[\"Peninsula\"];\r\n break;\r\n case CabinetIndexes[\"Peninsula\"]:\r\n missingZindex = CabinetIndexes[\"BottomCabinet\"];\r\n missingZindex2 = CabinetIndexes[\"BottomCabinet2\"];\r\n break;\r\n case CabinetIndexes[\"CrownMolding\"]:\r\n missingZindex = CabinetIndexes[\"CrownMolding2\"];\r\n break;\r\n case CabinetIndexes[\"CrownMolding2\"]:\r\n missingZindex = CabinetIndexes[\"CrownMolding\"];\r\n break;\r\n case CountertopGroupIndexes[\"Countertop\"]:\r\n missingZindex = CountertopGroupIndexes[\"Countertop2\"];\r\n break;\r\n case CountertopGroupIndexes[\"Countertop2\"]:\r\n missingZindex = CountertopGroupIndexes[\"Countertop\"];\r\n break;\r\n case CabinetIndexes[\"TopHandle\"]:\r\n missingZindex = CabinetIndexes[\"TopHandle2\"];\r\n break;\r\n case CabinetIndexes[\"TopHandle2\"]:\r\n missingZindex = CabinetIndexes[\"TopHandle\"];\r\n break;\r\n case CabinetIndexes[\"BottomHandle\"]:\r\n missingZindex = CabinetIndexes[\"BottomHandle2\"];\r\n break;\r\n case CabinetIndexes[\"BottomHandle2\"]:\r\n missingZindex = CabinetIndexes[\"BottomHandle\"];\r\n break;\r\n }\r\n if (missingZindex) {\r\n const layerHovering2 = imageCanvasComponent.state.layersHoverings.find((layersHoveringItem) => {\r\n return layersHoveringItem.layer.zIndex === missingZindex\r\n });\r\n const hoveredLayerIndex2 = layers.findIndex((layer) => {\r\n return layer.zIndex === missingZindex\r\n });\r\n if (layerHovering2 && hoveredLayerIndex2) {\r\n layers.splice(hoveredLayerIndex2 + 1, 0, {\r\n zIndex: missingZindex,\r\n image: layerHovering2.greenImage,\r\n layerDimensions: layerHovering2.layerDimensions,\r\n isGreenHovering: true,\r\n hoveringImage: layerHovering2.hoveringImage,\r\n });\r\n }\r\n }\r\n if (missingZindex2) {\r\n const layerHovering3 = imageCanvasComponent.state.layersHoverings.find((layersHoveringItem) => {\r\n return layersHoveringItem.layer.zIndex === missingZindex2\r\n });\r\n const hoveredLayerIndex3 = layers.findIndex((layer) => {\r\n return layer.zIndex === missingZindex2\r\n });\r\n if (layerHovering3 && hoveredLayerIndex3) {\r\n layers.splice(hoveredLayerIndex3 + 1, 0, {\r\n zIndex: missingZindex2,\r\n image: layerHovering3.greenImage,\r\n layerDimensions: layerHovering3.layerDimensions,\r\n isGreenHovering: true,\r\n hoveringImage: layerHovering3.hoveringImage,\r\n });\r\n }\r\n }\r\n break;\r\n }\r\n case \"kvScene\":\r\n case \"bvLook\":\r\n case \"LaundryRoom\":\r\n case \"Laundryroom\":\r\n case \"laundryroom\":\r\n case \"laundryRoom\": {\r\n let needToCheck = false;\r\n if (document.kvConfig.visualizerType === \"kvScene\") {\r\n const withParts = [\"countertop\", \"top_cabinet\", \"bottom_cabinet\", \"handle\", \"crown_molding\",\r\n \"top_handle\", \"bottom_handle\", \"door_handle\", \"drawer_handle\"];\r\n needToCheck = withParts.includes(layerHovering.layer.partId);\r\n } else if (document.kvConfig.visualizerType === \"bvLook\") {\r\n needToCheck = getCurrentRoomType() === LOOK_ROOM_TYPES.as && layerHovering.layer.partId.includes(\"vanity_\");\r\n } else {\r\n const withParts = [\"slat_wall\", \"bottom_cabinet\", \"tall_cabinet\"];\r\n needToCheck = withParts.includes(layerHovering.layer.partId);\r\n }\r\n if (!needToCheck && !allLayers) {\r\n break;\r\n }\r\n imageCanvasComponent.state.layersHoverings.forEach(layerHov => {\r\n if (layerHov.layer.partId === layerHovering.layer.partId && (layerHov.layer.zIndex !== layerHovering.layer.zIndex)) {\r\n layers.push({\r\n zIndex: layerHov.layer.zIndex,\r\n cropCoords: layerHov.layer.cropCoords,\r\n image: layerHov.greenImage,\r\n layerDimensions: layerHov.layerDimensions,\r\n coords: layerHov.layer.coords || null,\r\n partId: layerHov.layer.partId || \"\",\r\n isGreenHovering: true,\r\n hoveringImage: layerHov.hoveringImage,\r\n });\r\n }\r\n });\r\n return orderBy(layers, ['zIndex'], ['desc']);\r\n }\r\n default:\r\n break;\r\n }\r\n\r\n return layers;\r\n};\r\n","import {Part} from \"./part\";\r\nimport DesignNavigationItem from \"../../../visComponents/designNavigationItem\";\r\nimport {PartMenuType} from \"../../../visComponents/constants\";\r\nimport {BathTubType, bathTubTypeToString, LayoutType} from \"../constants\";\r\nimport {bathTubThumbnail} from \"../assets\";\r\n\r\nimport BathTubBody from \"../subparts/bathTub/bathTubBody\";\r\nimport BathTubBase from \"../subparts/bathTub/bathTubBase\";\r\nimport BathTubFixture from \"../subparts/bathTub/bathTubFixture\";\r\nimport BathTubRim from \"../subparts/bathTub/bathTubRim\";\r\nimport BathTubSpa from \"../subparts/bathTub/bathTubSpa\";\r\nimport BathTubTowelRack from \"../subparts/bathTub/bathTubTowelRack\";\r\n\r\nexport class Bathtub extends Part {\r\n static id = 'Bathtub';\r\n\r\n constructor() {\r\n super(true, false, PartMenuType.Complex);\r\n this.menuType = PartMenuType.Complex;\r\n this.partName = 'Bathtub';\r\n this.translateId = \"visualizer.bathroom.bathtub\";\r\n this.partThumbnail = bathTubThumbnail;\r\n this.activeSubType_ = BathTubType.FreeStanding;\r\n this.bathTubBody = null;\r\n this.towelRack = null;\r\n this.bathtubRim = null;\r\n this.bathTubBase = null;\r\n this.bathTubFixture = null;\r\n this.bathTubSpa = null;\r\n this.relatedItems = [];\r\n this.bathTubType_ = BathTubType.FreeStanding;\r\n }\r\n\r\n load(dbFeature) {\r\n let relatedItemName = \"\",\r\n RelatedItemClass = null;\r\n switch (dbFeature.groupName) {\r\n case \"Bathtub\":\r\n relatedItemName = \"bathTubBody\";\r\n RelatedItemClass = BathTubBody;\r\n break;\r\n case \"Fixture\":\r\n relatedItemName = \"bathTubFixture\";\r\n RelatedItemClass = BathTubFixture;\r\n break;\r\n case \"BathtubBase\":\r\n relatedItemName = \"bathTubBase\";\r\n RelatedItemClass = BathTubBase;\r\n break;\r\n case \"Bathtub - Spa\":\r\n relatedItemName = \"bathTubSpa\";\r\n RelatedItemClass = BathTubSpa;\r\n break;\r\n case \"BathtubRim\":\r\n relatedItemName = \"bathtubRim\";\r\n RelatedItemClass = BathTubRim;\r\n break;\r\n case \"Towel Rack\":\r\n relatedItemName = \"towelRack\";\r\n RelatedItemClass = BathTubTowelRack;\r\n break;\r\n }\r\n if (relatedItemName) {\r\n if (!this[relatedItemName]) {\r\n this[relatedItemName] = new RelatedItemClass(true);\r\n this.relatedItems.push(this[relatedItemName]);\r\n }\r\n if (!this.categoryEnabled) {\r\n this.categoryEnabled = true\r\n }\r\n this[relatedItemName].getParent = () => this;\r\n this[relatedItemName].load(dbFeature);\r\n return true\r\n }\r\n return false\r\n }\r\n\r\n changeLayout(layoutType) {\r\n if (layoutType === LayoutType.Small) {\r\n // this.activeSubType_ = BathTubType.Custom60in;\r\n // this.bathTubType_ = BathTubType.Custom60in;\r\n if (!this.layout.parts.Shower.showerBody.disabled) { // disable bathtub if shower is active\r\n if (this.bathTubBody) {\r\n this.bathTubBody.disabled = true;\r\n }\r\n if (this.bathTubBase) {\r\n this.bathTubBase.disabled = true;\r\n this.bathTubBase.disabledClick();\r\n }\r\n }\r\n } else {\r\n if (this.bathTubBody) {\r\n this.bathTubBody.disabled = false;\r\n }\r\n if (this.bathTubBase) {\r\n this.bathTubBase.disabled = false;\r\n this.bathTubBase.disabledClick();\r\n }\r\n }\r\n }\r\n\r\n setLayers(layout, placeholdersNeeded) {\r\n const layers = [];\r\n this.getRelatedItems().forEach(relatedItem => {\r\n relatedItem.setLayers(layout);\r\n (placeholdersNeeded && !relatedItem.placeholderChanged && relatedItem.placeholderFeature)\r\n ? relatedItem.placeholderFeature.layer.addTo(layers)\r\n : relatedItem.activeFeature && relatedItem.activeFeature.layer.addTo(layers)\r\n });\r\n\r\n return layers;\r\n }\r\n\r\n navigationItem() {\r\n return new DesignNavigationItem('Bathtub', this)\r\n }\r\n\r\n subTypes() {\r\n return (this.bathTubBody && this.bathTubBase\r\n && this.bathTubBody.features.some(feature => feature.partName && !feature.partName.includes(\"laceholder\"))\r\n && this.bathTubBase.features.some(feature => feature.partName && !feature.partName.includes(\"laceholder\"))\r\n ) ? [\r\n BathTubType.Custom60in,\r\n BathTubType.FreeStanding\r\n ] : [];\r\n }\r\n\r\n subTypeToString(subType) {\r\n return bathTubTypeToString(subType);\r\n }\r\n\r\n isSubTypeWithItems() {\r\n return true;\r\n }\r\n\r\n getRelatedItems() {\r\n return this.relatedItems.filter(item => item.visible.includes(this.bathTubType_))\r\n .sort((a, b) => a.partName !== b.partName ? a.partName < b.partName ? -1 : 1 : 0); // sort by partName\r\n }\r\n\r\n subParts() {\r\n return this.getRelatedItems().map(_ => new DesignNavigationItem(_.partName, _));\r\n }\r\n\r\n setDefault(layout) {\r\n this.getRelatedItems().forEach(relatedItem => relatedItem.setDefault(layout));\r\n }\r\n\r\n handleSubPartClick() {}\r\n\r\n handleSubTypeClick(subType) {\r\n this.bathTubType_ = subType;\r\n this.activeSubType_ = subType; // BathTubType.Custom60in or BathTubType.FreeStanding\r\n this.bathTubFixture.disabled = (this.activeSubType_=== BathTubType.Custom60in)\r\n ? this.bathTubBase.disabled\r\n : this.bathTubBody.disabled\r\n }\r\n\r\n setDefaultPartAfterSubTypeClick() {\r\n // return (this.bathTubType_ === BathTubType.Custom60in) ? this.subParts()[0] : null\r\n return this.subParts()[0]\r\n }\r\n\r\n activeSubType() {\r\n return this.activeSubType_;\r\n }\r\n\r\n getFixtureType() {\r\n if (this.activeSubType_ === BathTubType.FreeStanding && this.bathTubBody && this.bathTubBody.activeFeature) {\r\n return this.bathTubBody.activeFeature.metaData[\"Fixture\"]\r\n }\r\n return [\"All\"]\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../parts/intermediatePart\";\r\nimport {BathTubType, LayoutType, ShowerComboTubType} from \"../../constants\";\r\nimport {ShowerTubCombo} from \"../../parts/showerTubCombo\";\r\nimport DesignNavigationItem from \"../../../../visComponents/designNavigationItem\";\r\n\r\nexport default class BathTubBody extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'bathtub';\r\n this.partName = 'Bathtub';\r\n this.translateId = \"visualizer.bathroom.bathtub.bathtub\";\r\n this.homePageTitle = 'Bathtubs';\r\n this.visible = [BathTubType.FreeStanding];\r\n this.canBeDisabled = true;\r\n }\r\n\r\n load(dbFeature) {\r\n // return super.load_(dbFeature, this, false);\r\n const feature = this.load_(dbFeature, new BathTubBody());\r\n if (feature) {\r\n BathTubBody.setAdditionalMetaData(feature);\r\n }\r\n }\r\n\r\n static setAdditionalMetaData(feature) {\r\n if (!feature.metaData[\"Fixture\"]) {\r\n feature.metaData[\"Fixture\"] = [\"All\"];\r\n }\r\n if (!feature.metaData[\"CompatibleTub\"]) {\r\n feature.metaData[\"CompatibleTub\"] = [\"All\"];\r\n }\r\n }\r\n\r\n disabledClick() {\r\n const bathTubFixture = this.getParent().bathTubFixture;\r\n if (bathTubFixture) {\r\n bathTubFixture.disabled = this.disabled;\r\n }\r\n const bathtubParent = this.getParent();\r\n if (bathtubParent.layout.type === LayoutType.Small && !this.disabled) { // switch off all shower features\r\n const showerBody = bathtubParent.layout.parts.Shower.showerBody;\r\n if (showerBody) {\r\n showerBody.disabled = true;\r\n showerBody.disabledClick();\r\n }\r\n const comboPart = bathtubParent.layout.parts[ShowerTubCombo.id];\r\n if (comboPart) {\r\n comboPart.showerTubComboIsActive = false;\r\n }\r\n }\r\n }\r\n\r\n handleClick() {\r\n const bathTubParent = this.getParent().getParent();\r\n bathTubParent.bathTubType_ = BathTubType.FreeStanding;\r\n bathTubParent.activeSubType_ = BathTubType.FreeStanding;\r\n super.handleClick();\r\n }\r\n\r\n navigationSubItems(filters, searchText) {\r\n const filteredAvailableFeatures = super.getFeaturesBySearchText(super.getFilteredFeaturesByFilters(filters), searchText);\r\n const featuresToDisplay = super.navigationSubItemsWithFilterMultipleConditions(this.getArrayOfConditions(), filteredAvailableFeatures);\r\n return featuresToDisplay.map(_ => new DesignNavigationItem(_.featureName, _));\r\n }\r\n\r\n setLayers(layout) {\r\n if (this.activeFeature && (this.activeFeature.matchesMetaForArrayOfConditions(this.getArrayOfConditions())\r\n || (this.activeFeature.notAvailableInVisualizer && this.placeholderFeature))) {\r\n return super.setLayers(layout);\r\n }\r\n\r\n this.setDefault();\r\n return super.setLayers(layout);\r\n }\r\n\r\n getArrayOfConditions() {\r\n const showerTubCombo = this.getParent().layout.parts[ShowerTubCombo.id];\r\n const compatibleTubValue = (showerTubCombo.showerTubComboIsActive && showerTubCombo.bottomTub === ShowerComboTubType.walk_in_tub)\r\n ? [\"All\"]\r\n : [\"All\", \"WalkInTub\"];\r\n return [{\r\n propName: 'CompatibleTub',\r\n propValue: compatibleTubValue\r\n }];\r\n }\r\n\r\n setDefault(layout) {\r\n const filteredFeatures = this.features.filter(f => f.matchesMetaForArrayOfConditions(this.getArrayOfConditions()));\r\n if (!super.tryToSetTheSameFeature(filteredFeatures)) {\r\n const hardCodedDefault = filteredFeatures.find((feature) => {\r\n return feature.dbFeature.displayName && feature.dbFeature.displayName.includes(\"Kingston Elegance 258GRA\");\r\n });\r\n const placeholderDefault = filteredFeatures.find((feature) => {\r\n return feature.dbFeature.displayName && feature.dbFeature.displayName.includes(\"laceholder\");\r\n });\r\n this.activeFeature = hardCodedDefault || super.setDefault(layout) || filteredFeatures[0];\r\n this.placeholderFeature = placeholderDefault || null;\r\n }\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n if (zIndexes && this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndexes.BathTub.FreeStanding.Base;\r\n }\r\n if(zIndexes && this.placeholderFeature) {\r\n this.placeholderFeature.layer.zIndex = zIndexes.BathTub.FreeStanding.Base;\r\n }\r\n }\r\n}\r\n","import TubCommon from \"./tubCommon\";\r\n\r\nexport default class BathTubLiner extends TubCommon {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = \"bathtub_liner\";\r\n this.bottomTubId = \"bathtub_liner\";\r\n this.visible = true;\r\n this.partName = \"Tub Liner\";\r\n this.translateId = \"visualizer.bathroom.shower_tub_combo.bathtub_liner\";\r\n this.dbName = \"Bathtub Liner\";\r\n this.isStoneFeature = false;\r\n this.disableOnHomeSections = true;\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new BathTubLiner());\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n const zIndex = zIndexes.Shower.TubCombo.Liner;\r\n if (zIndexes && this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndex;\r\n }\r\n if (zIndexes && this.placeholderFeature) {\r\n this.placeholderFeature.layer.zIndex = zIndex;\r\n }\r\n }\r\n}\r\n","import TubCommon from \"./tubCommon\";\r\n\r\nexport default class ReplacementTub extends TubCommon {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'replacement_tub';\r\n this.bottomTubId = \"replacement_tub\";\r\n this.visible = true;\r\n this.partName = 'Replacement Tub';\r\n this.translateId = \"visualizer.bathroom.shower_tub_combo.replacement_tub\";\r\n this.isStoneFeature = false;\r\n this.disableOnHomeSections = true;\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new ReplacementTub());\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n const zIndex = zIndexes.Shower.TubCombo.ReplacementTub;\r\n if (zIndexes && this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndex;\r\n }\r\n if (zIndexes && this.placeholderFeature) {\r\n this.placeholderFeature.layer.zIndex = zIndex;\r\n }\r\n }\r\n}\r\n","import TubCommon from \"./tubCommon\";\r\n\r\nexport default class WalkInTub extends TubCommon {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'walk_in_tub';\r\n this.bottomTubId = \"walk_in_tub\";\r\n this.visible = true;\r\n this.partName = 'Walk In Tub';\r\n this.translateId = \"visualizer.bathroom.shower_tub_combo.walk_in_tub\";\r\n this.isStoneFeature = false;\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new WalkInTub());\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n const zIndex = zIndexes.Shower.TubCombo.WalkInTub;\r\n if (zIndexes && this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndex;\r\n }\r\n if (zIndexes && this.placeholderFeature) {\r\n this.placeholderFeature.layer.zIndex = zIndex;\r\n }\r\n }\r\n\r\n getFeatureByPartName(partName) {\r\n if (!partName) {\r\n return null\r\n }\r\n let walkInTubType = null;\r\n const possibleWalkInTubTypes = [\" AMD\", \" BSC\", \" WH\"];\r\n for (let i = 0; i < possibleWalkInTubTypes.length; i++) {\r\n if (partName.includes(possibleWalkInTubTypes[i])) {\r\n walkInTubType = possibleWalkInTubTypes[i];\r\n break;\r\n }\r\n }\r\n if (walkInTubType) {\r\n partName = partName.split(walkInTubType).join(\"\");\r\n }\r\n partName = partName.toLowerCase();\r\n if (partName[partName.length-1] === \"r\") {\r\n partName = partName.slice(0, partName.length-1);\r\n }\r\n return this.features.find(feature => {\r\n if (!feature.partName) {\r\n return false\r\n }\r\n let featurePartName = feature.partName;\r\n if (walkInTubType) {\r\n featurePartName = featurePartName.split(walkInTubType).join(\"\");\r\n }\r\n featurePartName = featurePartName.toLowerCase();\r\n if (featurePartName[featurePartName.length-1] === \"r\") {\r\n featurePartName = featurePartName.slice(0, featurePartName.length-1);\r\n }\r\n return partName === featurePartName\r\n });\r\n }\r\n\r\n}\r\n","import TubCommon from \"./tubCommon\";\r\n\r\nexport default class JettedTub extends TubCommon {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'jetted_tub';\r\n this.bottomTubId = \"jetted_tub\";\r\n this.visible = true;\r\n this.partName = 'Jetted Tub';\r\n this.translateId = \"visualizer.bathroom.shower_tub_combo.jetted_tub\";\r\n this.isStoneFeature = false;\r\n this.disableOnHomeSections = true;\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new JettedTub());\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n const zIndex = zIndexes.Shower.TubCombo.JettedTub;\r\n if (zIndexes && this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndex;\r\n }\r\n if (zIndexes && this.placeholderFeature) {\r\n this.placeholderFeature.layer.zIndex = zIndex;\r\n }\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../parts/intermediatePart\";\r\n\r\nexport default class WallConfiguration extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'wall_configuration';\r\n this.partName = 'Wall Configuration';\r\n this.translateId = \"visualizer.bathroom.shower_tub_combo.wall_configuration\";\r\n this.visible = true;\r\n this.isStoneFeature = false;\r\n this.disableOnHomeSections = true;\r\n this.createdManually = true;\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new WallConfiguration())\r\n }\r\n\r\n // setLayers(layout) {\r\n // this.activeFeature = this.features.find((feature) => {\r\n // return feature.partName === this.getParent().showerBody.activeFeature.partName // set the same glass as Body\r\n // });\r\n // return super.setLayers(layout);\r\n // }\r\n\r\n handleClick() {\r\n super.handleClick();\r\n const showerTubComboParent = this.getParent().getParent();\r\n showerTubComboParent.setShowerTubCombo();\r\n showerTubComboParent.setShowerSize(this.leftShowerWallType, this.showerComboSize);\r\n this.featureClicked();\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n const zIndex = zIndexes.Shower.TubCombo.WallConfiguration;\r\n if (zIndexes && this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndex;\r\n }\r\n if (zIndexes && this.placeholderFeature) {\r\n this.placeholderFeature.layer.zIndex = zIndex;\r\n }\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../parts/intermediatePart\";\r\nimport {BathTubType, LayoutType} from \"../../constants\";\r\n\r\nexport default class BathTubBase extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'bathtub_base';\r\n this.visible = [BathTubType.Custom60in];\r\n this.partName = 'Base';\r\n this.translateId = \"visualizer.bathroom.bathtub.bathtub_base\";\r\n this.dbName = 'BathtubBase';\r\n this.homePageTitle = 'Bathtubs';\r\n this.canBeDisabled = true;\r\n this.isStoneFeature = true;\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new BathTubBase());\r\n }\r\n\r\n disabledClick() {\r\n const bathtubParent = this.getParent();\r\n [bathtubParent.bathtubRim, bathtubParent.bathTubSpa, bathtubParent.bathTubFixture].forEach(subPart => {\r\n if (subPart) {\r\n subPart.disabled = this.disabled;\r\n }\r\n });\r\n if (bathtubParent.layout.type === LayoutType.Small && !this.disabled) { // switch off all shower features\r\n bathtubParent.layout.parts.Shower.showerBody.disabled = true;\r\n bathtubParent.layout.parts.Shower.showerBody.disabledClick();\r\n }\r\n }\r\n\r\n setDefault(layout) {\r\n const filteredFeatures = this.features;\r\n if (!super.tryToSetTheSameFeature(filteredFeatures)) {\r\n const sameStoneAsWalls = this.getParent().layout.parts.Walls.wallA.activeFeature\r\n && this.getParent().layout.parts.Walls.wallA.activeFeature.partName;\r\n const hardCodedDefault = filteredFeatures.find((feature) => {\r\n return feature.dbFeature.displayName && feature.dbFeature.displayName.includes(sameStoneAsWalls || \"Sahara Autumn Porcelain Tile\");\r\n });\r\n const placeholderDefault = filteredFeatures.find((feature) => {\r\n return feature.dbFeature.displayName && feature.dbFeature.displayName.includes(\"laceholder\");\r\n });\r\n this.activeFeature = hardCodedDefault || super.setDefault(layout) || filteredFeatures[0];\r\n this.placeholderFeature = placeholderDefault || super.setDefault(layout) || null;\r\n }\r\n }\r\n\r\n handleClick() {\r\n const bathtubParent = this.getParent().getParent();\r\n bathtubParent.bathTubType_ = BathTubType.Custom60in;\r\n bathtubParent.activeSubType_ = BathTubType.Custom60in;\r\n super.handleClick();\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n if (zIndexes && this.getParent().activeSubType() === BathTubType.Custom60in) {\r\n if (this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndexes.BathTub.Custom60in.Base;\r\n }\r\n if (this.placeholderFeature) {\r\n this.placeholderFeature.layer.zIndex = zIndexes.BathTub.Custom60in.Base;\r\n }\r\n }\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../parts/intermediatePart\";\r\nimport {BathTubType, LayoutType} from \"../../constants\";\r\nimport store from \"../../../../../store\";\r\nimport DesignNavigationItem from \"../../../../visComponents/designNavigationItem\";\r\nimport {ShowerTubCombo} from \"../../parts/showerTubCombo\";\r\n\r\nexport default class BathTubFixture extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = \"bathtub_fixture\";\r\n this.translateId = \"visualizer.bathroom.bathtub.bathtub_fixture\";\r\n this.visible = [BathTubType.Custom60in, BathTubType.FreeStanding];\r\n this.partName = 'Fixture';\r\n this.homePageTitle = 'Bathtub Fixtures';\r\n this.canBeDisabled = true;\r\n }\r\n\r\n load(dbFeature) {\r\n const feature = this.load_(dbFeature, new BathTubFixture());\r\n if (feature) {\r\n BathTubFixture.setAdditionalMetaData(feature);\r\n }\r\n }\r\n\r\n static setAdditionalMetaData(feature) {\r\n feature.metaData[\"Fixture\"] = [\"All\"];\r\n }\r\n\r\n disabledClick() {\r\n const bathTubBody = this.getParent().bathTubBody;\r\n if (bathTubBody && bathTubBody.disabled && !this.disabled) {\r\n bathTubBody.disabled = false;\r\n }\r\n const bathtubParent = this.getParent();\r\n if (bathtubParent.layout.type === LayoutType.Small && !this.disabled) { // switch off all shower features\r\n const showerBody = bathtubParent.layout.parts.Shower.showerBody;\r\n if (showerBody) {\r\n showerBody.disabled = true;\r\n showerBody.disabledClick();\r\n }\r\n const comboPart = bathtubParent.layout.parts[ShowerTubCombo.id];\r\n if (comboPart) {\r\n comboPart.showerTubComboIsActive = false;\r\n }\r\n }\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n let activeSubType = \"\";\r\n switch (this.getParent().activeSubType()) {\r\n case BathTubType.Custom60in:\r\n activeSubType = \"Custom60in\";\r\n break;\r\n case BathTubType.FreeStanding:\r\n activeSubType = \"FreeStanding\";\r\n break;\r\n }\r\n let floorMount = false;\r\n if (zIndexes && this.activeFeature) {\r\n const filterGroups = store.getState().filterState.filterGroups;\r\n const placeTypeGroup = filterGroups.find(filterGroup => filterGroup.name === \"PlaceType\");\r\n if (placeTypeGroup) {\r\n const featurePlaceTypeValue = this.activeFeature.dbFeature.filterValueIDs[placeTypeGroup.id];\r\n if (featurePlaceTypeValue && featurePlaceTypeValue.length) {\r\n const currentValue = placeTypeGroup.values.find(filterValue => filterValue.id === featurePlaceTypeValue[0]);\r\n if (currentValue && currentValue.value === \"FloorMount\") {\r\n floorMount = true;\r\n }\r\n }\r\n }\r\n floorMount\r\n ? this.activeFeature.layer.zIndex = zIndexes.BathTub[activeSubType].FixtureFloorMount\r\n : this.activeFeature.layer.zIndex = zIndexes.BathTub[activeSubType].Fixture\r\n }\r\n if (zIndexes && this.placeholderFeature) {\r\n floorMount\r\n ? this.placeholderFeature.layer.zIndex = zIndexes.BathTub[activeSubType].FixtureFloorMount\r\n : this.placeholderFeature.layer.zIndex = zIndexes.BathTub[activeSubType].Fixture\r\n }\r\n }\r\n\r\n navigationSubItems(filters, searchText) {\r\n const filteredAvailableFeatures = super.getFeaturesBySearchText(super.getFilteredFeaturesByFilters(filters), searchText);\r\n const featuresToDisplay = super.navigationSubItemsWithFilterMultipleConditions(this.getArrayOfConditions(), filteredAvailableFeatures);\r\n return featuresToDisplay.map(_ => new DesignNavigationItem(_.featureName, _));\r\n }\r\n\r\n setLayers(layout) {\r\n if (this.activeFeature && (this.activeFeature.matchesMetaForArrayOfConditions(this.getArrayOfConditions())\r\n || (this.activeFeature.notAvailableInVisualizer && this.placeholderFeature))) {\r\n return super.setLayers(layout);\r\n }\r\n\r\n this.setDefault();\r\n return super.setLayers(layout);\r\n }\r\n\r\n getArrayOfConditions() {\r\n return [{\r\n propName: 'Fixture',\r\n propValue: this.getParent().getFixtureType()\r\n }];\r\n }\r\n\r\n setDefault(layout) {\r\n const filteredFeatures = this.features.filter(f => f.matchesMetaForArrayOfConditions(this.getArrayOfConditions()));\r\n if (!super.tryToSetTheSameFeature(filteredFeatures)) {\r\n const hardCodedDefault = filteredFeatures.find((feature) => {\r\n return feature.dbFeature.displayName && feature.dbFeature.displayName.includes(\"Sahara Autumn Porcelain Tile\");\r\n });\r\n const placeholderDefault = filteredFeatures.find((feature) => {\r\n return feature.dbFeature.displayName && feature.dbFeature.displayName.includes(\"laceholder\");\r\n });\r\n this.activeFeature = hardCodedDefault || super.setDefault(layout) || filteredFeatures[0];\r\n this.placeholderFeature = placeholderDefault || null;\r\n }\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../parts/intermediatePart\";\r\nimport {BathTubType} from \"../../constants\";\r\n\r\nexport default class BathTubRim extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'bathtub_rim';\r\n this.translateId = \"visualizer.bathroom.bathtub.bathtub_rim\";\r\n this.visible = [BathTubType.Custom60in];\r\n this.partName = 'Rim';\r\n this.dbName = \"BathtubRim\";\r\n this.isStoneFeature = true;\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new BathTubRim());\r\n }\r\n\r\n disabledClick() {\r\n if (this.disabled) {\r\n this.getParent().bathTubBase.disabled = true;\r\n } else {\r\n this.getParent().bathTubBase.disabled = false;\r\n }\r\n }\r\n\r\n handleClick() {\r\n const bathtubParent = this.getParent().getParent();\r\n bathtubParent.bathTubType_ = BathTubType.Custom60in;\r\n bathtubParent.activeSubType_ = BathTubType.Custom60in;\r\n super.handleClick();\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n // if (layout.type === LayoutType.Large) {\r\n // if (this.getParent().activeSubType() === BathTubType.Custom60in) {\r\n // this.activeFeature.layer.zIndex = Z.layouts.Large.BathTub.Custom60in.Top;\r\n // }\r\n // } else {\r\n // Exception.NotImplemented();\r\n // }\r\n if (zIndexes && this.getParent().activeSubType() === BathTubType.Custom60in) {\r\n if (this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndexes.BathTub.Custom60in.Top;\r\n }\r\n if (this.placeholderFeature) {\r\n this.placeholderFeature.layer.zIndex = zIndexes.BathTub.Custom60in.Top;\r\n }\r\n }\r\n }\r\n\r\n setDefault(layout) {\r\n const filteredFeatures = this.features;\r\n if (!super.tryToSetTheSameFeature(filteredFeatures)) {\r\n const hardCodedDefault = filteredFeatures.find((feature) => {\r\n return feature.dbFeature.displayName && feature.dbFeature.displayName.includes(\"Sahara Autumn Porcelain Tile\");\r\n });\r\n const placeholderDefault = filteredFeatures.find((feature) => {\r\n return feature.dbFeature.displayName && feature.dbFeature.displayName.includes(\"laceholder\");\r\n });\r\n this.activeFeature = hardCodedDefault || super.setDefault(layout) || filteredFeatures[0];\r\n this.placeholderFeature = placeholderDefault || super.setDefault(layout) || null;\r\n }\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../parts/intermediatePart\";\r\nimport {BathTubType} from \"../../constants\";\r\n\r\nexport default class BathTubSpa extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'bathtub_spa';\r\n this.translateId = \"visualizer.bathroom.bathtub.bathtub_spa\";\r\n this.partName = 'Spa';\r\n this.visible = [BathTubType.Custom60in];\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new BathTubSpa());\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n if (zIndexes && this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndexes.BathTub.Custom60in.Spa;\r\n }\r\n if (zIndexes && this.placeholderFeature) {\r\n this.placeholderFeature.layer.zIndex = zIndexes.BathTub.Custom60in.Spa;\r\n }\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../parts/intermediatePart\";\r\n\r\nexport default class BathTubTowelRack extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'bathtub_towel_rack';\r\n this.translateId = \"visualizer.bathroom.bathtub.bathtub_towel_rack\";\r\n this.partName = 'Towel Rack';\r\n this.visible = [];\r\n // this.visible = [BathTubType.Custom60in, BathTubType.FreeStanding];\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new BathTubTowelRack());\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n // if (layout.type === LayoutType.Large) {\r\n // this.activeFeature.layer.zIndex = Z.layouts.Large.Towel_Rack;\r\n // } else {\r\n // Exception.NotImplemented();\r\n // }\r\n if (zIndexes && this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndexes.Towel_Rack;\r\n }\r\n }\r\n}\r\n","import {Part} from \"./part\";\r\nimport DesignNavigationItem from \"../../../visComponents/designNavigationItem\";\r\nimport {PartMenuType} from \"../../../visComponents/constants\";\r\nimport {floorThumbnail} from \"../assets\";\r\n\r\nimport {IntermediatePart} from \"./intermediatePart\";\r\n\r\nexport default class Floor extends Part {\r\n static id = 'Floor';\r\n\r\n constructor() {\r\n super(true, false, PartMenuType.Complex);\r\n this.partId = 'bathroom_floor';\r\n this.menuType = PartMenuType.Complex;\r\n this.partName = 'Floor';\r\n this.homePageTitle = 'Flooring';\r\n this.translateId = \"visualizer.bathroom.floor\";\r\n this.partThumbnail = floorThumbnail;\r\n }\r\n\r\n load(dbFeature) {\r\n let relatedItemName = \"\",\r\n RelatedItemClass = null;\r\n switch (dbFeature.groupName) {\r\n case \"Floor\":\r\n relatedItemName = \"floorBody\";\r\n RelatedItemClass = FloorBody;\r\n break;\r\n }\r\n if (relatedItemName) {\r\n if (!this[relatedItemName]) {\r\n this[relatedItemName] = new RelatedItemClass(true);\r\n if (relatedItemName !== \"shadows\") {\r\n this.relatedItems.push(this[relatedItemName]);\r\n }\r\n }\r\n if (!this.categoryEnabled) {\r\n this.categoryEnabled = true\r\n }\r\n this[relatedItemName].getParent = () => this;\r\n this[relatedItemName].load(dbFeature);\r\n return true\r\n }\r\n return false\r\n }\r\n\r\n navigationItem() {\r\n return new DesignNavigationItem('Floor', this)\r\n }\r\n\r\n setLayers(layout, placeholdersNeeded) {\r\n const layers = [];\r\n this.getRelatedItems().forEach(relatedItem => {\r\n relatedItem.setLayers(layout);\r\n (placeholdersNeeded && !relatedItem.placeholderChanged && relatedItem.placeholderFeature)\r\n ? relatedItem.placeholderFeature.layer.addTo(layers)\r\n : relatedItem.activeFeature && relatedItem.activeFeature.layer.addTo(layers)\r\n });\r\n\r\n return layers;\r\n }\r\n}\r\n\r\nclass FloorBody extends IntermediatePart {\r\n\r\n constructor(isChild) {\r\n super(isChild);\r\n this.isStoneFeature = true;\r\n this.partId = 'bathroom_floor';\r\n this.partName = 'Floor';\r\n this.translateId = \"visualizer.bathroom.floor\";\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new FloorBody());\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n if (zIndexes && this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndexes.Floor;\r\n }\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../parts/intermediatePart\";\r\n\r\nexport default class CompleteVanity extends IntermediatePart {\r\n\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'vanity';\r\n this.partName = 'Vanity';\r\n this.translateId = \"visualizer.bathroom.vanity.vanity\";\r\n this.homePageTitle = 'Complete Vanities';\r\n this.visible = true;\r\n this.canBeDisabled = true;\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new CompleteVanity());\r\n }\r\n\r\n setDefault(layout) {\r\n const availableCompleteFeatures = this.features.filter(feature => {\r\n return feature.metaData[\"Vanity\"] && feature.metaData[\"Vanity\"].includes(\"Complete\")\r\n });\r\n const hardCodedDefault = this.features.find((feature) => {\r\n return feature.dbFeature.displayName && feature.dbFeature.displayName.includes(\"Buffalo Complete Sand 987SANBLK17VK24\");\r\n });\r\n // const placeholderDefault =\r\n // (\r\n // this.getParent().pedestalSink\r\n // && this.getParent().pedestalSink.features\r\n // && this.getParent().pedestalSink.features.length\r\n // && this.getParent().pedestalSink.features.find((feature) => +feature.vanitySize === 24 && feature.dbFeature.displayName.includes(\"laceholder\"))\r\n // ) || this.features.find((feature) => {\r\n // return feature.dbFeature.displayName && feature.dbFeature.displayName.includes(\"Placeholder S\");\r\n // });\r\n const placeholderDefault = this.features.find((feature) => {\r\n return feature.dbFeature.displayName && feature.dbFeature.displayName.includes(\"Placeholder S\");\r\n });\r\n // console.log('this.features', this.features);\r\n // console.log('placeholderDefault', placeholderDefault);\r\n this.activeFeature = hardCodedDefault || super.setDefault(layout) || availableCompleteFeatures[0];\r\n this.placeholderFeature = placeholderDefault || super.setDefault(layout) || null;\r\n }\r\n\r\n // setLayers(layout) {\r\n // // const s3Binding = find(this.dbFeature.s3Bindings, {entityID: this.featureDefinitionId(this)});\r\n // if (!this.activeFeature) {\r\n // this.setDefault(layout);\r\n // }\r\n //\r\n // let s3Binding = find(this.activeFeature.dbFeature.s3Bindings, {\r\n // entityID: this.getParent().featureDefinitionId(this),\r\n // layout: layout.getCurrentLayoutAbbreviation()\r\n // });\r\n // if (!s3Binding) {\r\n // s3Binding = find(this.activeFeature.dbFeature.s3Bindings, {entityID: this.featureDefinitionId(this)});\r\n // }\r\n // this.activeFeature.layer.fromS3Binding(s3Binding);\r\n // }\r\n\r\n setZIndex(zIndexes) {\r\n if (zIndexes && this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndexes.Vanity.Complete.Cabinet;\r\n if (this.placeholderFeature) {\r\n this.placeholderFeature.layer.zIndex = zIndexes.Vanity.Complete.Cabinet;\r\n }\r\n }\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../parts/intermediatePart\";\r\nimport {Vanity} from \"../../parts/vanity\";\r\nimport DesignNavigationItem from \"../../../../visComponents/designNavigationItem\";\r\n\r\nexport default class VanityHandle extends IntermediatePart {\r\n\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'vanity_handle';\r\n this.partName = 'Handle';\r\n this.translateId = \"visualizer.bathroom.vanity.vanity_handle\";\r\n this.dbName = \"Vanity Handle\";\r\n this.visible = [Vanity.Types.Custom];\r\n this.canBeDisabled = false;\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new VanityHandle())\r\n }\r\n\r\n disabledClick() {\r\n this.getParent().toggleVanityParts(this.disabled);\r\n }\r\n\r\n navigationSubItems(filters, searchText) {\r\n const filteredAvailableFeatures = super.getFeaturesBySearchText(super.getFilteredFeaturesByFilters(filters), searchText);\r\n const featuresToDisplay = super.navigationSubItemsWithFilterMultipleConditions(this.getArrayOfConditions(), filteredAvailableFeatures);\r\n return featuresToDisplay.map(_ => new DesignNavigationItem(_.featureName, _));\r\n }\r\n\r\n getArrayOfConditions() {\r\n const counterTopSize = this.getParent().counterTopSize();\r\n return [{\r\n propName: 'VanitySize',\r\n propValue: counterTopSize\r\n }];\r\n }\r\n\r\n getAvailableFeatures() {\r\n return this.features && this.features.filter(f => f.matchesMetaForCondition('VanitySize', this.getParent().counterTopSize())) || [];\r\n }\r\n\r\n setDefault(layout) {\r\n const filteredFeatures = this.getAvailableFeatures();\r\n if (!super.tryToSetTheSameFeature(filteredFeatures)) {\r\n const hardCodedDefault = filteredFeatures.find((feature) => {\r\n return feature.dbFeature.displayName && feature.dbFeature.displayName.includes(\"Aliveri\");\r\n });\r\n const placeholderDefault = filteredFeatures.find((feature) => {\r\n return feature.dbFeature.displayName && feature.dbFeature.displayName.includes(\"laceholder\");\r\n });\r\n this.activeFeature = hardCodedDefault || super.setDefault(layout) || filteredFeatures[0];\r\n this.placeholderFeature = placeholderDefault || null;\r\n }\r\n }\r\n\r\n setLayers(layout) {\r\n\r\n const vanityPedestal = this.getParent().pedestalSink;\r\n if (vanityPedestal && vanityPedestal.activeFeature) {\r\n const handleMeta = vanityPedestal.activeFeature.metaData[\"VanityHandle\"];\r\n const hardCodedWizardConditions = vanityPedestal.activeFeature.partName.includes(\"WizardPlaceholder\") &&\r\n (\r\n vanityPedestal.activeFeature.partName.includes(\"WizardPlaceholder52 in36 S\")\r\n || (handleMeta && handleMeta.includes(\"true\")) // WizardPlaceholder QC Liberty\r\n );\r\n if (handleMeta && handleMeta.includes(\"None\") || hardCodedWizardConditions) {\r\n super.hideLayers();\r\n return;\r\n }\r\n }\r\n\r\n if (this.activeFeature && (this.activeFeature.matchesMetaForArrayOfConditions(this.getArrayOfConditions())\r\n || (this.activeFeature.notAvailableInVisualizer && this.placeholderFeature))) {\r\n return super.setLayers(layout);\r\n }\r\n this.setDefault();\r\n return super.setLayers(layout);\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n if (zIndexes && this.getParent().activeSubType_ === Vanity.Types.Custom) {\r\n const zIndex = zIndexes.Vanity.Custom.Handle;\r\n if (this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndex;\r\n }\r\n if (this.placeholderFeature) {\r\n this.placeholderFeature.layer.zIndex = zIndex;\r\n }\r\n }\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../parts/intermediatePart\";\r\nimport {Vanity} from \"../../parts/vanity\";\r\nimport store from \"../../../../../store\";\r\nimport {Layout} from \"../../layout\";\r\n\r\nexport default class VanityPedestal extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'vanity_cabinet';\r\n this.partName = 'Cabinet';\r\n this.translateId = \"visualizer.bathroom.vanity.vanity_cabinet\";\r\n this.dbName = \"Vanity\";\r\n this.homePageTitle = 'Vanity Bases';\r\n this.visible = [Vanity.Types.Custom];\r\n this.canBeDisabled = true;\r\n this.canUseWizard = true;\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new VanityPedestal())\r\n }\r\n\r\n // navigationSubItems() {\r\n // return super.navigationSubItemsWithFilter('VanitySize', this.getParent().counterTopSize());\r\n // }\r\n\r\n disabledClick() {\r\n this.getParent().toggleVanityParts(this.disabled);\r\n }\r\n\r\n setActiveFeatureByFilter(filterName, filterValue) {\r\n\r\n // console.log('filterName', filterName);\r\n // console.log('filterValue', filterValue);\r\n\r\n const filterGroups = store.getState().filterState.filterGroups;\r\n const group = filterGroups.find(group => group.name === filterName);\r\n const groupId = group.id;\r\n const filterValueId = Layout.getfilterValueIdByValue(groupId, filterValue);\r\n const filteredFeatures = this.features.filter(\r\n feature => feature.dbFeature && feature.dbFeature.filterValueIDs[groupId] && feature.dbFeature.filterValueIDs[groupId].includes(filterValueId)\r\n ); // find among all features only those, who have filter with value === props size\r\n if (!super.tryToSetTheSameFeature(filteredFeatures, null, \"ustom\")) {\r\n this.activeFeature = filteredFeatures[0];\r\n const placeholderAvailableFeatures = filteredFeatures.filter(feature => {\r\n return feature.dbFeature.displayName.includes(\"laceholder\") && feature.dbFeature.displayName.includes(\"ustom\")\r\n });\r\n this.placeholderFeature = placeholderAvailableFeatures[0];\r\n }\r\n }\r\n\r\n // getAvailableFeatures() {\r\n // return this.features.filter(f => f.vanitySize+'in' === this.getParent().counterTopSize());\r\n // }\r\n\r\n setDefault(layout) {\r\n super.setDefault(layout);\r\n const hardCodedDefault = this.features.find((feature) => {\r\n return +feature.vanitySize === 48\r\n });\r\n this.activeFeature = hardCodedDefault || super.setDefault(layout);\r\n this.placeholderFeature = this.features.find((feature) => {\r\n return +feature.vanitySize === 48\r\n && feature.dbFeature.displayName\r\n && feature.dbFeature.displayName.includes(\"laceholder\")\r\n && feature.dbFeature.displayName.includes(\"ustom\")\r\n }) || null;\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n if (zIndexes && this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndexes.Vanity.Custom.Cabinet;\r\n }\r\n if(zIndexes && this.placeholderFeature) {\r\n this.placeholderFeature.layer.zIndex = zIndexes.Vanity.Custom.Cabinet;\r\n }\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../parts/intermediatePart\";\r\nimport {Vanity} from \"../../parts/vanity\";\r\nimport DesignNavigationItem from \"../../../../visComponents/designNavigationItem\";\r\nimport uniqBy from \"lodash/uniqBy\";\r\n\r\nexport default class VanityCountertop extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'vanity_countertop';\r\n this.partName = 'Countertop';\r\n this.translateId = \"visualizer.bathroom.vanity.vanity_countertop\";\r\n this.homePageTitle = 'Countertops';\r\n this.visible = [Vanity.Types.Custom];\r\n this.isStoneFeature = true;\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new VanityCountertop())\r\n }\r\n\r\n disabledClick() {\r\n this.getParent().toggleVanityParts(this.disabled);\r\n }\r\n\r\n navigationSubItems(filters, searchText) {\r\n const filteredAvailableFeatures = super.getFeaturesBySearchText(super.getFilteredFeaturesByFilters(filters), searchText);\r\n // return super.navigationSubItemsWithFilter('CountertopSize', this.getParent().counterTopSize(), filteredAvailableFeatures);\r\n let counterTopsAvailable = filteredAvailableFeatures.filter(feature => {\r\n return feature.matchesMetaForCondition('CountertopSize', this.getParent().counterTopSize())\r\n })\r\n return uniqBy(counterTopsAvailable, (feature) => feature.dbFeature.id)\r\n .map(_ => new DesignNavigationItem(_.featureName, _));\r\n }\r\n\r\n setDefault(layout) {\r\n const counterTopSize = this.getParent().counterTopSize();\r\n const filteredFeatures = this.features && this.features.filter(f => f.matchesMetaForCondition('CountertopSize', counterTopSize)) || [];\r\n if (!super.tryToSetTheSameFeature(filteredFeatures)) {\r\n const hardCodedDefault = filteredFeatures.find((feature) => {\r\n return feature.dbFeature.displayName && feature.dbFeature.displayName.includes(\"Aliveri\");\r\n });\r\n const placeholderDefault = filteredFeatures.find((feature) => {\r\n return feature.dbFeature.displayName && feature.dbFeature.displayName.includes(\"laceholder\");\r\n });\r\n this.activeFeature = hardCodedDefault || super.setDefault(layout) || filteredFeatures[0];\r\n this.placeholderFeature = placeholderDefault || super.setDefault(layout) || null;\r\n }\r\n }\r\n\r\n setLayers(layout) {\r\n const counterTopSize = this.getParent().counterTopSize();\r\n if (this.activeFeature && (this.activeFeature.matchesMetaForCondition('CountertopSize', counterTopSize)\r\n || (this.activeFeature.notAvailableInVisualizer && this.placeholderFeature))) {\r\n return super.setLayers(layout);\r\n }\r\n\r\n this.setDefault(layout);\r\n return super.setLayers(layout);\r\n\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n if (zIndexes && this.getParent().activeSubType_ === Vanity.Types.Custom) {\r\n if (this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndexes.Vanity.Custom.CounterTop;\r\n }\r\n if(this.placeholderFeature) {\r\n this.placeholderFeature.layer.zIndex = zIndexes.Vanity.Custom.CounterTop;\r\n }\r\n }\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../parts/intermediatePart\";\r\nimport {Vanity} from \"../../parts/vanity\";\r\n\r\nexport default class LightingFixture extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'vanity_lightning_fixture';\r\n this.partName = 'Lighting Fixture';\r\n this.visible = [Vanity.Types.Complete, Vanity.Types.Custom];\r\n }\r\n\r\n setZIndex() {\r\n console.log('layout');\r\n }\r\n}","import {IntermediatePart} from \"../../parts/intermediatePart\";\r\nimport {Vanity} from \"../../parts/vanity\";\r\n\r\nexport default class VanityBacksplash extends IntermediatePart {\r\n\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'vanity_backsplash';\r\n this.partName = 'Backsplash';\r\n this.translateId = \"visualizer.bathroom.vanity.vanity_backsplash\";\r\n this.dbName = 'Backsplash';\r\n this.visible = [Vanity.Types.Custom];\r\n this.canBeDisabled = true;\r\n this.isStoneFeature = true;\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new VanityBacksplash())\r\n }\r\n\r\n navigationSubItems(filters, searchText) {\r\n const filteredAvailableFeatures = super.getFeaturesBySearchText(super.getFilteredFeaturesByFilters(filters), searchText);\r\n return super.navigationSubItemsWithFilter('CountertopSize', this.getParent().counterTopSize(), filteredAvailableFeatures);\r\n }\r\n\r\n setDefault(layout) {\r\n const counterTopSize = this.getParent().counterTopSize();\r\n const filteredFeatures = this.features && this.features.filter(f => f.matchesMetaForCondition('CountertopSize', counterTopSize)) || [];\r\n if (!super.tryToSetTheSameFeature(filteredFeatures)) {\r\n const hardCodedDefault = filteredFeatures.find((feature) => {\r\n return feature.dbFeature.displayName && feature.dbFeature.displayName.includes(\"Aliveri\");\r\n });\r\n const placeholderDefault = filteredFeatures.find((feature) => {\r\n return feature.dbFeature.displayName && feature.dbFeature.displayName.includes(\"laceholder\");\r\n });\r\n this.activeFeature = hardCodedDefault || super.setDefault(layout) || filteredFeatures[0];\r\n this.placeholderFeature = placeholderDefault || super.setDefault(layout) || null;\r\n }\r\n }\r\n\r\n setLayers(layout) {\r\n const counterTopSize = this.getParent().counterTopSize();\r\n if (this.activeFeature && (this.activeFeature.matchesMetaForCondition('CountertopSize', counterTopSize)\r\n || (this.activeFeature.notAvailableInVisualizer && this.placeholderFeature))) {\r\n return super.setLayers(layout);\r\n }\r\n\r\n this.setDefault(layout);\r\n return super.setLayers(layout);\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n if (zIndexes && this.getParent().activeSubType_ === Vanity.Types.Custom) {\r\n const zIndex = zIndexes.Vanity.Custom.VanityBacksplash;\r\n if (this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndex;\r\n }\r\n if (this.placeholderFeature) {\r\n this.placeholderFeature.layer.zIndex = zIndex;\r\n }\r\n }\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../parts/intermediatePart\";\r\nimport {Vanity} from \"../../parts/vanity\";\r\nimport {NotQCVanityDoorStylesFilters} from \"../../constants\";\r\nimport store from \"../../../../../store\";\r\n\r\nexport default class Mirror extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'vanity_mirror';\r\n this.partName = 'Mirror';\r\n this.translateId = \"visualizer.bathroom.vanity.vanity_mirror\";\r\n this.homePageTitle = 'Mirrors';\r\n this.visible = [Vanity.Types.Complete, Vanity.Types.Custom];\r\n this.canBeDisabled = true;\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new Mirror())\r\n }\r\n\r\n navigationSubItems(filters, searchText) {\r\n const filteredAvailableFeatures = super.getFeaturesBySearchText(super.getFilteredFeaturesByFilters(filters), searchText);\r\n let navItems = super.navigationSubItemsWithFilter('Pedestal', this.getParent().counterTopSize(), filteredAvailableFeatures);\r\n // console.log('navItems1', navItems.slice());\r\n const vanityParent = this.getParent();\r\n const vanityPart = (vanityParent.activeSubType_ === Vanity.Types.Custom)\r\n ? vanityParent.pedestalSink\r\n : vanityParent.completeVanity;\r\n /*** return Mirrors with the same Color and DoorStyle or Material - as the current selected Vanity ***/\r\n if (vanityPart && vanityPart.activeFeature && vanityPart.activeFeature.dbFeature && vanityPart.activeFeature.dbFeature.filterValueIDs) {\r\n const oldVanityType = NotQCVanityDoorStylesFilters.some(filterName => {\r\n const partName = vanityPart.activeFeature.partName;\r\n return partName.includes(filterName) && !partName.includes(\"QC\");\r\n });\r\n const filterGroups = store.getState().filterState.filterGroups;\r\n const colorFilter = filterGroups.find(group => group.name === \"Color\");\r\n const activeFilterValueIDs = vanityPart.activeFeature.dbFeature.filterValueIDs;\r\n const secondFilter = filterGroups.find(group => group.name === (oldVanityType ? \"Material\" : \"DoorStyle\"));\r\n\r\n if (colorFilter && secondFilter) {\r\n navItems = navItems.map(item => {\r\n item.mathesToCurrentVanity = IntermediatePart.featureHasFilters(item.part, activeFilterValueIDs, colorFilter, secondFilter);\r\n return item\r\n }).sort((itemA, itemB) => {\r\n return (itemA.mathesToCurrentVanity < itemB.mathesToCurrentVanity)\r\n ? 1\r\n : ((itemB.mathesToCurrentVanity < itemA.mathesToCurrentVanity)\r\n ? -1\r\n : 0)\r\n });\r\n }\r\n\r\n // console.log('sorted!', navItems);\r\n }\r\n return navItems\r\n }\r\n\r\n setDefault(layout) {\r\n const counterTopSize = this.getParent().counterTopSize();\r\n const filteredFeatures = this.features && this.features.filter(f => f.matchesMetaForCondition('Pedestal', counterTopSize)) || [];\r\n\r\n let name = null;\r\n if (this.activeFeature) {\r\n name = this.activeFeature.partName\r\n }\r\n if (name) {\r\n name = name.split(\" Single\")[0].split(\" Double\")[0].split(\" S\")[0].split(\" D\")[0]\r\n }\r\n\r\n if (!this.tryToSetTheSameFeatureByFilters(filteredFeatures) && !this.tryToSetTheSameFeature(filteredFeatures, name || null)) {\r\n const hardCodedDefault = filteredFeatures.find((feature) => {\r\n return feature.dbFeature.displayName && feature.dbFeature.displayName.includes(\"Elegant BLK\");\r\n });\r\n this.activeFeature = hardCodedDefault || super.setDefault(layout) || filteredFeatures[0];\r\n this.setPlaceholderFeature(filteredFeatures, layout);\r\n }\r\n }\r\n\r\n tryToSetTheSameFeatureByFilters(filteredFeatures, layout) {\r\n const vanityParent = this.getParent();\r\n const vanityPart = (vanityParent.activeSubType_ === Vanity.Types.Custom)\r\n ? vanityParent.pedestalSink\r\n : vanityParent.completeVanity;\r\n if (vanityPart && vanityPart.activeFeature && !vanityPart.activeFeature.partName.includes(\"WizardPlaceholder\")\r\n && vanityPart.activeFeature.dbFeature && vanityPart.activeFeature.dbFeature.filterValueIDs) {\r\n const vanityFilters = vanityPart.activeFeature.dbFeature.filterValueIDs;\r\n const filterGroups = store.getState().filterState.filterGroups;\r\n const materialFilter = filterGroups.find(group => group.name === \"Material\");\r\n const colorFilter = filterGroups.find(group => group.name === \"Color\");\r\n\r\n const matchingFilterFeature = filteredFeatures.find((feature) => {\r\n return feature.dbFeature && materialFilter && colorFilter\r\n && feature.dbFeature.filterValueIDs[materialFilter.id]\r\n && vanityFilters[materialFilter.id]\r\n && vanityFilters[colorFilter.id]\r\n && feature.dbFeature.filterValueIDs[materialFilter.id].includes(vanityFilters[materialFilter.id][0])\r\n && feature.dbFeature.filterValueIDs[colorFilter.id]\r\n && feature.dbFeature.filterValueIDs[colorFilter.id].includes(vanityFilters[colorFilter.id][0])\r\n });\r\n if (matchingFilterFeature) {\r\n this.activeFeature = matchingFilterFeature;\r\n this.setPlaceholderFeature(filteredFeatures, layout);\r\n return true\r\n }\r\n }\r\n return false\r\n }\r\n\r\n tryToSetTheSameFeature(filteredFeatures, partName, placeholderName) {\r\n if (this.activeFeature && this.activeFeature.partName) {\r\n const nameSplitted = (partName || this.activeFeature.partName).split(\" FM\")[0];\r\n this.activeFeature = filteredFeatures.find(feature => {\r\n const currentNameSplitted = feature.partName.split(\" FM\")[0];\r\n return nameSplitted === currentNameSplitted\r\n });\r\n // console.log('AF', filteredFeatures, this.activeFeature);\r\n this.placeholderFeature = filteredFeatures.find((feature) => {\r\n return placeholderName\r\n ? feature.dbFeature.displayName && feature.dbFeature.displayName.includesCI(\"placeholder\")\r\n && feature.dbFeature.displayName.includes(placeholderName)\r\n : feature.dbFeature.displayName && feature.dbFeature.displayName.includesCI(\"placeholder\")\r\n });\r\n if (this.activeFeature) {\r\n return true\r\n }\r\n }\r\n return false\r\n }\r\n\r\n setPlaceholderFeature(filteredFeatures, layout) {\r\n const placeholderDefault = filteredFeatures.find((feature) => {\r\n return feature.dbFeature.displayName && feature.dbFeature.displayName.includes(\"laceholder\");\r\n });\r\n this.placeholderFeature = placeholderDefault || super.setDefault(layout) || null;\r\n }\r\n\r\n setLayers(layout) {\r\n const counterTopSize = this.getParent().counterTopSize();\r\n if (this.activeFeature && (this.activeFeature.matchesMetaForCondition('Pedestal', counterTopSize)\r\n || (this.activeFeature.notAvailableInVisualizer && this.placeholderFeature))) {\r\n return super.setLayers(layout);\r\n }\r\n this.setDefault(layout);\r\n return super.setLayers(layout);\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n // if ((this.getParent().activeSubType_ === Vanity.Types.Custom) && this.activeFeature) {\r\n if (zIndexes && this.activeFeature) {\r\n // this.activeFeature.layer.zIndex = Z.layouts.Large.Vanity.Custom.Mirror;\r\n this.activeFeature.layer.zIndex = zIndexes.Vanity.Custom.Mirror;\r\n }\r\n if(zIndexes && this.placeholderFeature) {\r\n this.placeholderFeature.layer.zIndex = zIndexes.Vanity.Custom.Mirror;\r\n }\r\n }\r\n}\r\n","import filter from 'lodash/filter';\r\n\r\nimport {IntermediatePart} from \"../../parts/intermediatePart\";\r\nimport Config from \"../../../../../config\";\r\nimport { Vanity } from \"../../parts/vanity\";\r\nimport DesignNavigationItem from \"../../../../visComponents/designNavigationItem\";\r\n\r\nexport default class Sink extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'vanity_sink';\r\n this.partName = 'Sink';\r\n this.translateId = \"visualizer.bathroom.vanity.vanity_sink\";\r\n this.homePageTitle = 'Sinks';\r\n this.visible = [Vanity.Types.Custom];\r\n if (Config.isDevMode()) {\r\n this.canBeDisabled = true;\r\n }\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new Sink())\r\n }\r\n //\r\n // navigationSubItems(filters, searchText) {\r\n // const filteredAvailableFeatures = super.getFeaturesBySearchText(super.getFilteredFeaturesByFilters(filters), searchText);\r\n // return super.navigationSubItemsWithFilterWithInactive('VanitySize', this.getParent().counterTopSize(), filteredAvailableFeatures);\r\n // }\r\n\r\n navigationSubItems(filters, searchText) {\r\n const filteredAvailableFeatures = super.getFeaturesBySearchText(super.getFilteredFeaturesByFilters(filters), searchText);\r\n const featuresToDisplay = super.navigationSubItemsWithFilterMultipleConditions(this.getArrayOfConditions(), filteredAvailableFeatures);\r\n return featuresToDisplay.map(_ => new DesignNavigationItem(_.featureName, _));\r\n }\r\n\r\n disabledClick() {\r\n this.getParent().toggleVanityParts(this.disabled);\r\n }\r\n\r\n getArrayOfConditions() {\r\n const counterTopSize = this.getParent().counterTopSize();\r\n return [{\r\n propName: 'VanitySize',\r\n propValue: counterTopSize\r\n }];\r\n }\r\n\r\n setLayers(layout) {\r\n if (this.activeFeature && (this.activeFeature.matchesMetaForArrayOfConditions(this.getArrayOfConditions())\r\n || (this.activeFeature.notAvailableInVisualizer && this.placeholderFeature))) {\r\n return super.setLayers(layout);\r\n }\r\n this.setDefault();\r\n return super.setLayers(layout);\r\n }\r\n\r\n handleChangeParent(nonCompatibleWith) {\r\n if (nonCompatibleWith === \"faucet\") {\r\n // some additional logic if needed\r\n } else {\r\n this.getParent().getParent().pedestalSink.setActiveFeatureByFilter(\"Size\", this.metaData[\"VanitySize\"] ? this.metaData[\"VanitySize\"][0] : null); // \"60in\", etc.\r\n }\r\n }\r\n\r\n getAvailableFeatures() {\r\n return filter(this.features, f => f.matchesMetaForCondition('VanitySize', this.getParent().counterTopSize()));\r\n }\r\n\r\n setActiveFeatureByFilter(filterName, filterValue) {\r\n const featuresToDisplay = super.navigationSubItemsWithFilterMultipleConditions(this.getArrayOfConditions());\r\n const filteredFeatures = featuresToDisplay.filter((feature) => {\r\n return feature.metaData[filterName] && feature.metaData[filterName].includes(filterValue);\r\n });\r\n if (!super.tryToSetTheSameFeature(filteredFeatures)) {\r\n this.activeFeature = filteredFeatures[0];\r\n const placeholderAvailableFeatures = filteredFeatures.filter(feature => {\r\n return feature.dbFeature.displayName.includes(\"laceholder\")\r\n });\r\n this.placeholderFeature = placeholderAvailableFeatures[0];\r\n }\r\n }\r\n\r\n setDefault() {\r\n const filteredFeatures = this.getAvailableFeatures();\r\n let name = null;\r\n if (this.activeFeature) {\r\n name = this.activeFeature.partName\r\n }\r\n if (!super.tryToSetTheSameFeature(filteredFeatures, name ? name.substring(0, name.length - 2) : null)) { // remove 2 last letters\r\n this.activeFeature = filteredFeatures[0];\r\n this.placeholderFeature = filteredFeatures.find((feature) => {\r\n return feature.dbFeature.displayName && feature.dbFeature.displayName.includes(\"laceholder\");\r\n });\r\n }\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n if (zIndexes && this.getParent().activeSubType_ === Vanity.Types.Custom) {\r\n if(this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndexes.Vanity.Custom.Sink;\r\n }\r\n if(this.placeholderFeature) {\r\n this.placeholderFeature.layer.zIndex = zIndexes.Vanity.Custom.Sink;\r\n }\r\n }\r\n }\r\n}\r\n","import filter from 'lodash/filter';\r\n\r\nimport {IntermediatePart} from \"../../parts/intermediatePart\";\r\nimport DesignNavigationItem from \"../../../../visComponents/designNavigationItem\";\r\nimport Config from \"../../../../../config\";\r\nimport { Vanity } from \"../../parts/vanity\";\r\n\r\nexport default class VanityFaucet extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'vanity_faucet';\r\n this.partName = 'Faucet';\r\n this.translateId = \"visualizer.bathroom.vanity.vanity_faucet\";\r\n this.homePageTitle = 'Faucets';\r\n this.useMatchesFailedNavigation = true;\r\n this.visible = [Vanity.Types.Custom];\r\n if (Config.isDevMode()) {\r\n this.canBeDisabled = true;\r\n }\r\n }\r\n\r\n load(dbFeature) {\r\n const vanityFaucetFeature = this.load_(dbFeature, new VanityFaucet());\r\n if (vanityFaucetFeature) {\r\n VanityFaucet.setAdditionalMetaData(vanityFaucetFeature);\r\n }\r\n }\r\n\r\n static setAdditionalMetaData(vanityFaucetFeature) {\r\n const compatible = vanityFaucetFeature.metaData[\"SinkSize\"];\r\n const size = vanityFaucetFeature.metaData[\"Size\"];\r\n if (compatible && compatible.includes(\"Outer\") && !compatible.includes(\"Inner\")) {\r\n compatible.push(\"Inner\")\r\n }\r\n if (size && !compatible) {\r\n vanityFaucetFeature.metaData[\"SinkSize\"] = size.includes(\"21in\") ? [\"Outer\", \"Inner\"] : [];\r\n }\r\n }\r\n\r\n disabledClick() {\r\n this.getParent().toggleVanityParts(this.disabled);\r\n }\r\n\r\n getCurrentSinkSize() {\r\n const sinkParent = this.getParent().sink;\r\n if (sinkParent && sinkParent.activeFeature) {\r\n const sinkMeta = sinkParent.activeFeature.metaData[\"SinkSize\"];\r\n if (sinkMeta) {\r\n return Array.isArray(sinkMeta) ? sinkMeta[0] : sinkMeta\r\n } else if (sinkParent.activeFeature.partName.includes(\"Placeholder\")) {\r\n return \"Outer\"\r\n }\r\n }\r\n return null\r\n }\r\n\r\n navigationSubItems(filters, searchText) {\r\n const filteredAvailableFeatures = super.getFeaturesBySearchText(super.getFilteredFeaturesByFilters(filters), searchText);\r\n const featuresToDisplay = super.navigationSubItemsWithFilterMultipleConditions(this.getArrayOfConditions(), filteredAvailableFeatures);\r\n const sinkSize = this.getCurrentSinkSize();\r\n if (sinkSize) {\r\n return super.navigationSubItemsWithFilterWithInactive('SinkSize', sinkSize, featuresToDisplay)\r\n }\r\n return featuresToDisplay.map(_ => new DesignNavigationItem(_.featureName, _));\r\n }\r\n\r\n getArrayOfConditions(withSinkSize) {\r\n const counterTopSize = this.getParent().counterTopSize();\r\n const conditions = [{\r\n propName: 'VanitySize',\r\n propValue: counterTopSize\r\n }];\r\n if (withSinkSize) {\r\n conditions.push({\r\n propName: 'SinkSize',\r\n propValue: this.getCurrentSinkSize()\r\n })\r\n }\r\n return conditions;\r\n }\r\n\r\n setLayers(layout) {\r\n if (this.activeFeature && (this.activeFeature.matchesMetaForArrayOfConditions(this.getArrayOfConditions(true))\r\n || (this.activeFeature.notAvailableInVisualizer && this.placeholderFeature))) {\r\n return super.setLayers(layout);\r\n }\r\n this.setDefault();\r\n return super.setLayers(layout);\r\n }\r\n\r\n getAvailableFeatures() {\r\n return filter(this.features, f => f.matchesMetaForCondition('VanitySize', this.getParent().counterTopSize()));\r\n }\r\n\r\n handleChangeParent(nonCompatibleWith) {\r\n if (nonCompatibleWith === \"sink\") {\r\n this.getParent().getParent().sink.setActiveFeatureByFilter(\"SinkSize\", \"Inner\")\r\n } else {\r\n this.getParent().getParent().pedestalSink.setActiveFeatureByFilter(\"Size\", this.metaData[\"VanitySize\"] ? this.metaData[\"VanitySize\"][0] : null); // \"60in\", etc.\r\n }\r\n }\r\n\r\n setDefault(layout) {\r\n const filteredFeatures = this.features && this.features.filter(f => f.matchesMetaForArrayOfConditions(this.getArrayOfConditions(true))) || [];\r\n let name = null;\r\n if (this.activeFeature) {\r\n name = this.activeFeature.partName\r\n }\r\n if (!super.tryToSetTheSameFeature(filteredFeatures, name ? name.substring(0, name.length - 2) : null)) { // remove 2 last letters // \"Platte 456AS D\"\r\n const hardCodedDefault = filteredFeatures.find((feature) => {\r\n return feature.dbFeature.displayName && feature.dbFeature.displayName.includes(\"Platte 456AS\");\r\n });\r\n const placeholderDefault = filteredFeatures.find((feature) => {\r\n return feature.dbFeature.displayName && feature.dbFeature.displayName.includes(\"laceholder\");\r\n });\r\n this.activeFeature = hardCodedDefault || super.setDefault(layout) || filteredFeatures[0];\r\n this.placeholderFeature = placeholderDefault || null;\r\n }\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n if (zIndexes && this.getParent().activeSubType_ === Vanity.Types.Custom) {\r\n if (this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndexes.Vanity.Custom.Faucet;\r\n }\r\n if(this.placeholderFeature) {\r\n this.placeholderFeature.layer.zIndex = zIndexes.Vanity.Custom.Faucet;\r\n }\r\n }\r\n }\r\n}\r\n","import find from \"lodash/find\";\r\n\r\nimport {Part} from \"./part\";\r\nimport {LayoutType} from \"../constants\";\r\nimport {windowThumbnail} from \"../assets\";\r\nimport {NN} from \"../../../../misc/utils\";\r\nimport {PartMenuType} from \"../../../visComponents/constants\";\r\nimport DesignNavigationItem from \"../../../visComponents/designNavigationItem\";\r\nimport {IntermediatePart} from \"./intermediatePart\";\r\n\r\nexport class Window extends Part {\r\n static id = 'Window';\r\n\r\n constructor() {\r\n super(true, false, PartMenuType.Simple);\r\n this.partId = 'window';\r\n this.menuType = PartMenuType.Simple;\r\n this.partName = 'Window';\r\n this.translateId = \"visualizer.bathroom.window\";\r\n this.homePageTitle = 'Window Coverings';\r\n this.dbName = 'Window Covering';\r\n this.partThumbnail = windowThumbnail;\r\n }\r\n\r\n load(dbFeature) {\r\n const isWindowCovering = dbFeature.groupName === 'Window Covering';\r\n const isWindow = dbFeature.groupName === 'Window';\r\n\r\n if (!isWindowCovering && !isWindow)\r\n return false;\r\n\r\n const part = new WindowBody();\r\n part.getParent = () => this;\r\n\r\n if (!this.categoryEnabled) {\r\n this.categoryEnabled = true\r\n }\r\n\r\n if (isWindowCovering) {\r\n part.load(dbFeature);\r\n } else {\r\n this.windowDefault = part;\r\n this.windowDefault.dbFeature = dbFeature;\r\n }\r\n return true\r\n }\r\n\r\n setLayers(layout, placeholdersNeeded) {\r\n if (layout.type === LayoutType.Small)\r\n return null;\r\n\r\n if (!this.activeFeature)\r\n return null;\r\n\r\n const res = [];\r\n // let s3Binding = find(this.activeFeature.dbFeature.s3Bindings, {entityID: this.activeFeature.featureDefinitionId()});\r\n let s3Binding = find(this.activeFeature.dbFeature.s3Bindings, {entityID: this.activeFeature.featureDefinitionId(), layout: layout.getCurrentLayoutAbbreviation()});\r\n if (!s3Binding) {\r\n s3Binding = find(this.activeFeature.dbFeature.s3Bindings, {entityID: this.activeFeature.featureDefinitionId()});\r\n }\r\n\r\n if (this.activeFeature.notAvailableInVisualizer && this.placeholderFeature) {\r\n s3Binding = find(this.placeholderFeature.dbFeature.s3Bindings, {entityID: this.featureDefinitionId(this.placeholderFeature), layout: layout.getCurrentLayoutAbbreviation()});\r\n if (!s3Binding) {\r\n s3Binding = find(this.placeholderFeature.dbFeature.s3Bindings, {entityID: this.featureDefinitionId(this.placeholderFeature)});\r\n }\r\n }\r\n\r\n this.activeFeature.layer.fromS3Binding(s3Binding);\r\n // this.activeFeature.layer.addTo(res);\r\n\r\n if (this.placeholderFeature) {\r\n let s3Binding = find(this.placeholderFeature.dbFeature.s3Bindings, {entityID: this.featureDefinitionId(this.placeholderFeature), layout: layout.getCurrentLayoutAbbreviation()});\r\n if (!s3Binding) {\r\n s3Binding = find(this.placeholderFeature.dbFeature.s3Bindings, {entityID: this.featureDefinitionId(this.placeholderFeature)});\r\n }\r\n this.placeholderFeature.layer.fromS3Binding(s3Binding);\r\n }\r\n\r\n if (this.windowDefault && this.windowDefault.dbFeature.s3Bindings) {\r\n const dbFeature = this.windowDefault.dbFeature;\r\n s3Binding = dbFeature.s3Bindings[0];\r\n this.windowDefault.layer.fromS3Binding(s3Binding);\r\n this.windowDefault.layer.addTo(res);\r\n }\r\n\r\n (placeholdersNeeded && !this.placeholderChanged && this.placeholderFeature)\r\n ? this.placeholderFeature.layer.addTo(res)\r\n : this.activeFeature.layer.addTo(res);\r\n\r\n return res;\r\n }\r\n\r\n setDefault() {\r\n const hardCodedDefault = this.features.find((feature) => {\r\n return feature.dbFeature.displayName && feature.dbFeature.displayName.includes(\"Stylewise Snowblind\");\r\n });\r\n const placeholderDefault = this.features.find((feature) => {\r\n return feature.dbFeature.displayName && feature.dbFeature.displayName.includes(\"laceholder\");\r\n });\r\n this.activeFeature = hardCodedDefault || this.features[0];\r\n this.placeholderFeature = placeholderDefault || this.features[0];\r\n }\r\n\r\n navigationItem() {\r\n return new DesignNavigationItem(this.partName, this);\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n // if (layout.type === LayoutType.Large) {\r\n // NN(this.windowDefault, _ => _.layer.zIndex = Z.layouts.Large.Window_Default);\r\n // NN(this.activeFeature, _ => _.layer.zIndex = Z.layouts.Large.Window_Covering);\r\n // }\r\n if(zIndexes) {\r\n NN(this.windowDefault, _ => _.layer.zIndex = zIndexes.Window_Default);\r\n NN(this.activeFeature, _ => _.layer.zIndex = zIndexes.Window_Covering);\r\n if(this.placeholderFeature) {\r\n this.placeholderFeature.layer.zIndex = zIndexes.Window_Covering;\r\n }\r\n }\r\n }\r\n\r\n subParts() {\r\n return [{\r\n text: this.partName,\r\n part: this\r\n }]\r\n }\r\n\r\n}\r\n\r\nclass WindowBody extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'window';\r\n this.partName = 'Window';\r\n this.translateId = \"visualizer.bathroom.window\";\r\n }\r\n\r\n load(dbFeature) {\r\n super.load_.call(this.getParent(), dbFeature, this, false);\r\n }\r\n}\r\n","import find from \"lodash/find\";\r\n\r\nimport {Part} from \"./part\";\r\nimport {ceilingThumbnail, ceilingPlaceholder} from \"../assets\";\r\nimport {PartMenuType} from \"../../../visComponents/constants\";\r\nimport DesignNavigationItem from \"../../../visComponents/designNavigationItem\";\r\nimport {IntermediatePart} from \"./intermediatePart\";\r\n\r\nexport class Ceiling extends Part {\r\n static id = 'Ceiling';\r\n\r\n constructor() {\r\n super(true, false, PartMenuType.Simple);\r\n this.partId = 'ceiling';\r\n this.menuType = PartMenuType.Simple;\r\n this.partName = 'Ceiling';\r\n this.translateId = \"visualizer.bathroom.ceiling\";\r\n this.homePageTitle = 'Ceilings';\r\n this.partThumbnail = ceilingThumbnail;\r\n this.ceilingLight = null;\r\n }\r\n\r\n load(dbFeature) {\r\n let part = null;\r\n switch (dbFeature.groupName) {\r\n case \"Ceiling\":\r\n part = new CeilingBody();\r\n break;\r\n case \"Ceiling Lights\":\r\n if (!this.ceilingLight) {\r\n this.ceilingLight = new CeilingLight(true);\r\n this.relatedItems.push(this.ceilingLight);\r\n }\r\n part = this.ceilingLight;\r\n break;\r\n }\r\n if (part) {\r\n part.getParent = () => this;\r\n if (!this.categoryEnabled) {\r\n this.categoryEnabled = true\r\n }\r\n part.load(dbFeature);\r\n return true\r\n }\r\n return false\r\n }\r\n\r\n setLayers(layout, placeholdersNeeded) {\r\n const layers = [];\r\n\r\n if (placeholdersNeeded && !this.placeholderChanged && this.placeholderFeature) {\r\n this.placeholderFeature.layer.src = ceilingPlaceholder;\r\n this.placeholderFeature.layer.fromS3 = false;\r\n this.placeholderFeature.layer.addTo(layers)\r\n } else if (this.activeFeature) {\r\n this.activeFeature.setLayers(layout);\r\n this.activeFeature.layer.addTo(layers);\r\n }\r\n\r\n this.relatedItems.forEach(relatedItem => {\r\n relatedItem.setLayers(layout);\r\n if (relatedItem && relatedItem.activeFeature) {\r\n relatedItem.activeFeature.layer.addTo(layers);\r\n }\r\n });\r\n\r\n return layers;\r\n }\r\n\r\n setDefault(layout) {\r\n this.relatedItems.forEach(_ => _.setDefault(layout));\r\n const hardCodedDefault = this.features.find((feature) => {\r\n return feature.dbFeature.displayName && feature.dbFeature.displayName.includes(\"BR Frost\");\r\n });\r\n const placeholderDefault = this.features.find((feature) => {\r\n return feature.dbFeature.displayName && feature.dbFeature.displayName.includes(\"laceholder\");\r\n });\r\n this.activeFeature = hardCodedDefault || this.features[0];\r\n this.placeholderFeature = placeholderDefault || this.features[0];\r\n }\r\n\r\n navigationItem() {\r\n return new DesignNavigationItem(this.partName, this);\r\n }\r\n\r\n handleSubPartClick() {}\r\n\r\n setZIndex(zIndexes) {\r\n if(zIndexes) {\r\n this.relatedItems.forEach(_ => _.setZIndex(zIndexes));\r\n this.activeFeature && this.activeFeature.setZIndex(zIndexes);\r\n if(this.placeholderFeature) {\r\n this.placeholderFeature.layer.zIndex = zIndexes.Ceiling;\r\n }\r\n }\r\n }\r\n\r\n subParts() {\r\n return [{\r\n text: this.partName,\r\n part: this\r\n }]\r\n }\r\n}\r\n\r\nclass CeilingBody extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n\r\n this.partName = 'Ceiling';\r\n this.isStoneFeature = true;\r\n }\r\n\r\n load(dbFeature) {\r\n super.load_.call(this.getParent(), dbFeature, this, false);\r\n }\r\n\r\n setLayers(layout) {\r\n // const s3Binding = find(this.dbFeature.s3Bindings, {entityID: this.featureDefinitionId(this)});\r\n let s3Binding = find(this.dbFeature.s3Bindings, {entityID: this.featureDefinitionId(this), layout: layout.getCurrentLayoutAbbreviation()});\r\n if (!s3Binding) {\r\n s3Binding = find(this.dbFeature.s3Bindings, {entityID: this.featureDefinitionId(this)});\r\n }\r\n this.layer.fromS3Binding(s3Binding);\r\n }\r\n\r\n setDefault(layout) {\r\n this.activeFeature = super.setDefault(layout) || this.features[0];\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n if(zIndexes)\r\n this.layer.zIndex = zIndexes.Ceiling;\r\n }\r\n}\r\n\r\nclass CeilingLight extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partName = 'Ceiling Light';\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new CeilingLight());\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n if (zIndexes && this.activeFeature && this.activeFeature.layer) {\r\n this.activeFeature.layer.zIndex = zIndexes.Ceiling_Lights;\r\n }\r\n }\r\n}\r\n\r\n","import {Part} from \"./part\";\r\nimport {toiletThumbnail} from '../assets';\r\nimport {PartMenuType} from \"../../../visComponents/constants\";\r\nimport DesignNavigationItem from \"../../../visComponents/designNavigationItem\";\r\nimport {IntermediatePart} from \"./intermediatePart\";\r\nimport {Vanity} from \"./vanity\";\r\n\r\nexport class Toilet extends Part {\r\n static id = 'Toilet';\r\n\r\n constructor() {\r\n super(true, false, PartMenuType.Complex);\r\n this.menuType = PartMenuType.Complex;\r\n this.partName = 'Toilet';\r\n this.translateId = \"visualizer.bathroom.toilet\";\r\n this.homePageTitle = 'Toilets';\r\n this.partThumbnail = toiletThumbnail;\r\n this.toilet = null;\r\n }\r\n\r\n setLayers(layout, placeholdersNeeded){\r\n const layers = [];\r\n this.relatedItems.forEach(relatedItem => {\r\n relatedItem.setLayers(layout);\r\n (placeholdersNeeded && !relatedItem.placeholderChanged && relatedItem.placeholderFeature)\r\n ? relatedItem.placeholderFeature.layer.addTo(layers)\r\n : relatedItem.activeFeature ? relatedItem.activeFeature.layer.addTo(layers) : null\r\n\r\n });\r\n return layers;\r\n }\r\n\r\n load(dbFeature) {\r\n if (dbFeature.groupName === \"Toilet\") {\r\n if (!this.toilet) {\r\n this.toilet = new ToiletBody(true);\r\n this.relatedItems.push(this.toilet);\r\n this.toilet.getParent = () => this;\r\n }\r\n if (!this.categoryEnabled) {\r\n this.categoryEnabled = true\r\n }\r\n this.toilet.load(dbFeature);\r\n return true\r\n }\r\n return false\r\n }\r\n\r\n isSubTypeWithItems() {\r\n return false;\r\n }\r\n\r\n subParts() {\r\n return this.relatedItems.map(_ => new DesignNavigationItem(_.partName, _));\r\n }\r\n\r\n setDefaultPartAfterSubTypeClick() {\r\n return this.subParts()[0]\r\n }\r\n\r\n navigationItem() {\r\n return new DesignNavigationItem('Toilet', this)\r\n }\r\n\r\n setDefault(layout) {\r\n this.relatedItems.forEach(_ => _.setDefault(layout));\r\n }\r\n}\r\n\r\nclass ToiletBody extends IntermediatePart {\r\n\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'toilet';\r\n this.partName = 'Toilet';\r\n this.translateId = \"visualizer.bathroom.toilet\";\r\n this.homePageTitle = 'Toilets';\r\n this.canBeDisabled = true;\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new ToiletBody());\r\n }\r\n\r\n setLayers(layout) {\r\n\r\n const vanitySize = layout.parts[Vanity.id].counterTopSize();\r\n\r\n // console.log('Toilet - vanity size: ', vanitySize);\r\n if (vanitySize === '72in' || vanitySize === '60in') {\r\n // console.warn('Toilet - not visible for current vanity size: ', vanitySize);\r\n super.hideLayers();\r\n return;\r\n }\r\n\r\n return super.setLayers(layout);\r\n }\r\n\r\n setDefault(layout) {\r\n const hardCodedDefault = this.features.find((feature) => {\r\n return feature.dbFeature.displayName && feature.dbFeature.displayName.includes(\"Melbourne MR4CGR\");\r\n });\r\n const placeholderDefault = this.features.find((feature) => {\r\n return feature.dbFeature.displayName && feature.dbFeature.displayName.includes(\"laceholder\");\r\n });\r\n this.activeFeature = hardCodedDefault || super.setDefault(layout) || this.features[0];\r\n this.placeholderFeature = placeholderDefault || super.setDefault(layout) || null;\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n if (zIndexes && this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndexes.Toilet;\r\n }\r\n if (zIndexes && this.placeholderFeature) {\r\n this.placeholderFeature.layer.zIndex = zIndexes.Toilet;\r\n }\r\n }\r\n}\r\n\r\n\r\n","import {IntermediatePart} from \"../../parts/intermediatePart\";\r\nimport {ShowerTubCombo} from \"../../parts/showerTubCombo\";\r\nimport DesignNavigationItem from \"../../../../visComponents/designNavigationItem\";\r\nimport {Shower} from \"../../parts/shower\";\r\nimport {getFeatureIsLocked} from \"../../../../../misc/helpers\";\r\nimport store from \"../../../../../store\";\r\nimport {toggleNotCompatibleView} from \"../../../../../actions/selectionFunctions\";\r\nimport {ShowerComboTubType} from \"../../constants\";\r\n\r\nexport default class ShowerFixture extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'shower_fixture';\r\n this.partName = 'Fixture';\r\n this.translateId = \"visualizer.bathroom.shower.shower_fixture\";\r\n this.homePageTitle = 'Shower Fixtures';\r\n this.dbName = 'Shower Fixture';\r\n this.layerPriority = 4;\r\n if (isChild) {\r\n this.previouslySelectedFeatures = {\r\n LG: {},\r\n SM: {}\r\n };\r\n }\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new ShowerFixture());\r\n }\r\n\r\n setLayers(layout) {\r\n\r\n const showerTubCombo = this.getParent().layout.parts[ShowerTubCombo.id];\r\n\r\n if (this.getParent().showerTubComboIsActive() && showerTubCombo && showerTubCombo.walkInTub\r\n && showerTubCombo.bottomTub === showerTubCombo.walkInTub.bottomTubId) {\r\n super.hideLayers();\r\n return;\r\n }\r\n if (this.activeFeature && (this.activeFeature.matchesMetaForArrayOfConditions(this.getArrayOfConditions())\r\n || (this.activeFeature.notAvailableInVisualizer && this.placeholderFeature))) {\r\n return super.setLayers(layout);\r\n }\r\n this.setDefault();\r\n return super.setLayers(layout);\r\n }\r\n\r\n navigationSubItems(filters, searchText) {\r\n const filteredAvailableFeatures = super.getFeaturesBySearchText(super.getFilteredFeaturesByFilters(filters), searchText);\r\n const featuresToDisplay = super.navigationSubItemsWithFilterMultipleConditions(this.getArrayOfConditions(), filteredAvailableFeatures);\r\n return featuresToDisplay.map(_ => new DesignNavigationItem(_.featureName, _));\r\n }\r\n\r\n applyFeatureIfNotCompatible() {\r\n const parent = this.getParent();\r\n const shower = parent.getParent();\r\n if (shower.layout && shower.showerTubComboIsActive()\r\n && shower.layout.parts[ShowerTubCombo.id].bottomTub === ShowerComboTubType.walk_in_tub) {\r\n const comboPart = shower.layout.parts[ShowerTubCombo.id];\r\n comboPart.showerTubComboIsActive = false;\r\n comboPart.bottomTub = ShowerComboTubType.bathtub_liner;\r\n }\r\n }\r\n\r\n handleClick(ignoreLocked) {\r\n super.handleClick(ignoreLocked); // set active item & not in visualizer item\r\n if (this.notAvailableInVisualizer || getFeatureIsLocked(this)) {\r\n return\r\n }\r\n\r\n const showerFixtureParent = this.getParent();\r\n const shower = showerFixtureParent.getParent();\r\n if (shower.showerTubComboIsActive() && shower.layout.parts[ShowerTubCombo.id].bottomTub === ShowerComboTubType.walk_in_tub\r\n && !window.location.hash.includes(\"visualizer\")) {\r\n store.dispatch(toggleNotCompatibleView(true));\r\n return;\r\n }\r\n\r\n this.applyFeatureIfNotCompatible();\r\n }\r\n\r\n getArrayOfConditions() {\r\n const showerParent = this.getParent();\r\n const activeShowerPartId = showerParent.showerTubComboIsActive() ? ShowerTubCombo.id : Shower.id;\r\n const showerSize = showerParent.layout.parts[activeShowerPartId].showerSize();\r\n return [{\r\n propName: \"Shower\",\r\n propValue: showerParent.showerTubComboIsActive()\r\n && (showerParent.layout.parts[activeShowerPartId].bottomTub !== ShowerComboTubType.walk_in_tub)\r\n ? [\"Tub\"]\r\n : showerParent.isComplete() ? \"Complete\" : \"Custom\"\r\n }, {\r\n propName: 'ShowerSize',\r\n propValue: showerSize\r\n }]\r\n }\r\n\r\n setDefault() {\r\n const shower = this.getParent();\r\n const currentActiveFeature = this.activeFeature;\r\n const filteredFeatures = this.features.filter(f => f.matchesMetaForArrayOfConditions(this.getArrayOfConditions()));\r\n if (!super.tryToSetTheSameFeature(filteredFeatures)) {\r\n this.setDefaultAccordingToPreviousSelect(shower, filteredFeatures, \"Brantford\");\r\n }\r\n this.rememberPreviousSelection(shower, currentActiveFeature);\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n const ShowerType = this.getParent().activeSubType() === Shower.Type.Custom || this.getParent().showerTubComboIsActive()\r\n ? 'Custom60in'\r\n : 'Steam60in';\r\n if (zIndexes && this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndexes.Shower[ShowerType].Fixture;\r\n }\r\n if(zIndexes && this.placeholderFeature) {\r\n this.placeholderFeature.layer.zIndex = zIndexes.Shower[ShowerType].Fixture;\r\n }\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../parts/intermediatePart\";\r\nimport {ShowerBodyType} from \"../../constants\";\r\nimport {Shower} from \"../../parts/shower\";\r\n\r\nexport default class ShowerGlass extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'shower_glass';\r\n this.translateId = \"visualizer.bathroom.shower.shower_glass\";\r\n this.partName = 'Glass';\r\n this.visible = false;\r\n this.layerPriority = 12;\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new ShowerGlass())\r\n }\r\n\r\n // navigationSubItems() {\r\n // const showerSize = this.getParent().showerSize().split('in')[0];\r\n // return super.navigationSubItemsWithFilter('ShowerSize', showerSize);\r\n // }\r\n setLayers(layout) {\r\n\r\n if (this.getParent().showerTubComboIsActive()) {\r\n super.hideLayers();\r\n return;\r\n }\r\n\r\n if (this.getParent().customBodyType === ShowerBodyType.Door) {\r\n this.disabled = true;\r\n }\r\n this.activeFeature = this.features.find((feature) => {\r\n const showerBodyActiveFeature = this.getParent().showerBody.activeFeature;\r\n return showerBodyActiveFeature && feature.partName === showerBodyActiveFeature.partName // set the same glass as Body\r\n });\r\n return super.setLayers(layout);\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n if (zIndexes && this.getParent().activeSubType() === Shower.Type.Custom && this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndexes.Shower.Custom60in.Glass;\r\n }\r\n }\r\n}\r\n","import DesignNavigationItem from \"../../../../visComponents/designNavigationItem\";\r\n\r\nimport {IntermediatePart} from \"../../parts/intermediatePart\";\r\nimport {Vanity} from \"../../parts/vanity\";\r\n\r\nimport {ShowerType, LayoutType} from \"../../constants\";\r\nimport {ShowerTubCombo} from \"../../parts/showerTubCombo\";\r\nimport {Shower} from \"../../parts/shower\";\r\nimport {\r\n custom30in15X4Shower,\r\n custom30in30X8Shower,\r\n custom30inPonyShower,\r\n custom60in15X4Shower,\r\n custom60in30X8Shower,\r\n custom60inPonyShower\r\n} from \"../../assets\";\r\n\r\nexport default class ShowerBody extends IntermediatePart {\r\n\r\n constructor(isChild, partNumber = 0) {\r\n super(isChild);\r\n this.partId = 'shower_body';\r\n this.partName = 'Shower Body';\r\n this.translateId = \"visualizer.bathroom.shower.shower_body\";\r\n this.homePageTitle = 'Shower Doors & Glass';\r\n this.partNumber = partNumber;\r\n this.activeFeatureParts = [];\r\n this.canBeDisabled = false;\r\n this.placeholderChanged = true; // never show placeholder to body\r\n this.firstClick = {\r\n \"0\": true // never show placeholder to body\r\n }\r\n this.layerPriority = 1;\r\n this.createdManually = true;\r\n }\r\n\r\n load(dbFeature) {\r\n const parts = dbFeature.metaData[\"Parts\"];\r\n if (parts) {\r\n const partNumber = +dbFeature.metaData[\"Part\"][0];\r\n return super.load_(dbFeature, new ShowerBody(false, partNumber), true, partNumber === 1 ? 'features' : 'featuresParts');\r\n } else {\r\n const loadedShowerBody = super.load_(dbFeature, new ShowerBody());\r\n if (loadedShowerBody) { // it can be false (just skip it)\r\n const featureName = loadedShowerBody.dbFeature.sharedFeatureName;\r\n loadedShowerBody.featureName = featureName;\r\n loadedShowerBody.showerBodyType = 'Custom';\r\n loadedShowerBody.type = ShowerType.Custom;\r\n loadedShowerBody.showerDimensions = this.loadShowerDimensions(featureName);\r\n loadedShowerBody.metaData = this.loadShowerMetaData(featureName, loadedShowerBody.showerDimensions);\r\n loadedShowerBody.showerBodyId = featureName.toLowerCase().replace(/ /gi, \"-\");\r\n loadedShowerBody.notAvailableInVisualizer = false;\r\n if (!loadedShowerBody.dbFeature.thumbnailUrl) {\r\n loadedShowerBody.customThumbnail = this.loadThumbnail(featureName)\r\n }\r\n }\r\n return loadedShowerBody\r\n }\r\n }\r\n\r\n loadShowerDimensions(featureName = this.activeFeature.featureName) {\r\n switch (true) {\r\n case featureName.includes(\"15X4\"):\r\n return \"15X4\"\r\n case featureName.includes(\"Pony\"):\r\n return \"Pony\"\r\n case featureName.includes(\"30X8\"):\r\n default:\r\n return \"30X8\"\r\n }\r\n }\r\n\r\n loadShowerMetaData(featureName = this.activeFeature.featureName, showerDimensions) {\r\n const featureNameSplitted = featureName.split(\" \");\r\n return {\r\n \"ShowerSize\": featureName.includes(\"Custom\") ? [featureNameSplitted[2]] : ['60in'],\r\n \"CountertopSize\": showerDimensions === \"30X8\" ? [\"72in\"] : [\"20in\", \"24in\", \"30in\", \"36in\", \"48in\", \"60in\"]\r\n }\r\n }\r\n\r\n loadThumbnail(featureName = this.activeFeature.featureName) {\r\n switch (true) {\r\n case featureName.includes(\"15X4\"):\r\n return featureName.includes(\"30in\") ? custom30in15X4Shower : custom60in15X4Shower\r\n case featureName.includes(\"Pony\"):\r\n return featureName.includes(\"30in\") ? custom30inPonyShower : custom60inPonyShower\r\n case featureName.includes(\"30X8\"):\r\n default:\r\n return featureName.includes(\"30in\") ? custom30in30X8Shower : custom60in30X8Shower\r\n }\r\n }\r\n\r\n handleClick() {\r\n const parent = this.getParent();\r\n if (parent.getParent && parent.getParent()) {\r\n super.handleClick();\r\n parent.activeFeatureParts = parent.setActiveFeatureParts();\r\n } else {\r\n parent.showerBody.activeFeature = this;\r\n }\r\n this.getParent().showerBodySelectedByUser = true;\r\n const shower = this.getParent().layout ? this.getParent() : this.getParent().getParent(); // workaround for complete & custom click\r\n if (shower.showerTubComboIsActive) {\r\n const comboPart = shower.layout.parts[ShowerTubCombo.id];\r\n comboPart.showerTubComboIsActive = false;\r\n }\r\n this.featureClicked();\r\n }\r\n\r\n disabledClick() {\r\n const showerParent = this.getParent();\r\n showerParent.relatedItems.forEach((relItem) => {\r\n relItem.disabled = this.disabled;\r\n if (relItem.activeFeatureParts && relItem.activeFeatureParts.length) {\r\n relItem.activeFeatureParts.forEach((activeFeaturePart) => {\r\n if (activeFeaturePart) {\r\n activeFeaturePart.disabled = this.disabled\r\n }\r\n });\r\n }\r\n });\r\n if (showerParent.layout && showerParent.showerTubComboIsActive) {\r\n const comboPart = showerParent.layout.parts[ShowerTubCombo.id];\r\n comboPart.showerTubComboIsActive = false;\r\n }\r\n this.activeFeatureParts.forEach((activeFeaturePart) => {\r\n activeFeaturePart.disabled = this.disabled\r\n });\r\n const wallParent = showerParent.layout.parts.Walls;\r\n wallParent.wallExL.disabled = this.disabled;\r\n // wallParent.wallExR.disabled = this.disabled;\r\n\r\n const bathtubParent = showerParent.layout.parts.Bathtub;\r\n\r\n if (showerParent.layout.type === LayoutType.Small && !this.disabled && bathtubParent) { // switch off all bathtub features\r\n if (bathtubParent.bathTubBody) {\r\n bathtubParent.bathTubBody.disabled = true;\r\n }\r\n if (bathtubParent.bathTubBody) {\r\n bathtubParent.bathTubBase.disabled = true;\r\n bathtubParent.bathTubBase.disabledClick();\r\n }\r\n }\r\n }\r\n\r\n availableFeatures(filters) {\r\n const layout = this.getParent().layout;\r\n const filteredAvailableFeatures = filters ? super.getFilteredFeaturesByFilters(filters) : this.features;\r\n const counterTopSize = layout.parts[Vanity.id].counterTopSize();\r\n return filteredAvailableFeatures.filter((feature) => {\r\n if (this.getParent().activeSubType_ === Shower.Type.Custom) {\r\n return counterTopSize === '72in' && layout.type === 1\r\n ? feature.showerDimensions === \"30X8\" || feature.showerDimensions === \"Pony\"\r\n : feature.showerBodyType === Shower.Type.Custom\r\n } else {\r\n return (feature.showerBodyType !== Shower.Type.Custom) && feature.partNumber === 1\r\n }\r\n })\r\n }\r\n\r\n navigationSubItems(filters, searchText) {\r\n const filteredAvailableFeatures = super.getFeaturesBySearchText(this.availableFeatures(filters), searchText);\r\n return filteredAvailableFeatures.map(_ => new DesignNavigationItem(_.featureName, _));\r\n }\r\n\r\n setActiveFeatureParts() {\r\n const activeFeatureParts = (this.activeFeature && this.activeFeature.partNumber) ? this.featuresParts.filter((feature) => {\r\n return feature.partName === this.activeFeature.partName\r\n }) : [];\r\n activeFeatureParts.forEach((activeFeaturePart) => {\r\n activeFeaturePart.disabled = this.disabled\r\n });\r\n return activeFeatureParts\r\n }\r\n\r\n setDefault() {\r\n const availableFeatures = this.availableFeatures();\r\n const layout = this.getParent().layout;\r\n let hardCodedDefault = availableFeatures.find((feature) => {\r\n return feature.partName === \"Custom B 60in 15X4\";\r\n });\r\n const counterTopSize = layout.parts[Vanity.id].counterTopSize();\r\n if (counterTopSize === '72in' && layout.type === 1 && this.activeFeature) {\r\n hardCodedDefault = availableFeatures.find((feature) => {\r\n return this.activeFeature.partName.includes(\"60in\")\r\n ? feature.partName.includes(\"60in\")\r\n : feature.partName.includes(\"30in\")\r\n });\r\n }\r\n this.activeFeature = hardCodedDefault || availableFeatures[0];\r\n this.activeFeatureParts = this.setActiveFeatureParts();\r\n }\r\n\r\n setLayers(layout) {\r\n\r\n if (this.getParent().showerTubComboIsActive()) {\r\n super.hideLayers();\r\n return;\r\n }\r\n\r\n if (this.getParent().activeSubType_ === Shower.Type.Custom && this.activeFeature) {\r\n this.activeFeature.layer.src = '';\r\n const counterTopSize = layout.parts[Vanity.id].counterTopSize();\r\n const showerDimensions = this.getParent().showerDimensions();\r\n if (counterTopSize === '72in' && layout.type === 1 && (showerDimensions === \"15X4\")) {\r\n // removed showerBodySelectedByUser detect cause we need to change shower body in any case! if it is not full!\r\n this.setDefault();\r\n } else if (counterTopSize !== '72in' && layout.type === 1 && !this.showerBodySelectedByUser // set default shower back\r\n && (showerDimensions !== \"15X4\")) {\r\n this.setDefault();\r\n }\r\n } else {\r\n super.setLayers(layout);\r\n }\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n const ShowerType = (this.getParent().activeSubType() === Shower.Type.Custom) ? 'Custom60in' : 'Steam60in';\r\n if (zIndexes && this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndexes.Shower[ShowerType].Body[this.activeFeature.partNumber];\r\n }\r\n if (this.activeFeatureParts && this.activeFeatureParts.length) {\r\n this.activeFeatureParts.forEach((activeFeaturePart) => {\r\n activeFeaturePart.layer.zIndex = zIndexes.Shower[ShowerType].Body[activeFeaturePart.partNumber];\r\n })\r\n }\r\n }\r\n\r\n changeLayout(layoutType) {\r\n if (layoutType === 1 && this.disabled) {\r\n this.disabled = false;\r\n this.disabledClick();\r\n }\r\n }\r\n}\r\n","import isEqual from \"lodash/isEqual\";\r\nimport {IntermediatePart} from \"../../parts/intermediatePart\";\r\nimport DesignNavigationItem from \"../../../../visComponents/designNavigationItem\";\r\n\r\nimport { Shower } from \"../../parts/shower\";\r\nimport { ShowerTubCombo } from \"../../parts/showerTubCombo\";\r\nimport {getFeatureIsLocked} from \"../../../../../misc/helpers\";\r\n\r\nexport default class ShowerInteriorWall extends IntermediatePart {\r\n\r\n constructor(isChild, partNumber = 0) {\r\n super(isChild);\r\n this.partId = 'shower_interior_wall';\r\n this.partName = 'Shower Walls';\r\n this.translateId = \"visualizer.bathroom.shower.shower_interior_wall\";\r\n this.homePageTitle = 'Interior Shower Walls';\r\n this.dbName = \"Shower Wall\";\r\n this.isStoneFeature = true;\r\n this.canUseWizard = true;\r\n this.partNumber = partNumber;\r\n this.activeFeatureParts = [];\r\n this.shadowName = \"Interior Wall\";\r\n this.layerPriority = 2;\r\n }\r\n\r\n load(dbFeature) {\r\n const parts = dbFeature.metaData && dbFeature.metaData[\"Parts\"];\r\n if (parts) {\r\n const partNumber = +dbFeature.metaData[\"Part\"][0];\r\n return super.load_(dbFeature, new ShowerInteriorWall(false, partNumber),\r\n true, partNumber === 1 ? 'features' : 'featuresParts');\r\n } else {\r\n return super.load_(dbFeature, new ShowerInteriorWall());\r\n }\r\n }\r\n\r\n handleClick(ignoreLocked) {\r\n const parent = this.getParent();\r\n super.handleClick(ignoreLocked);\r\n parent.activeFeatureParts = parent.setActiveFeatureParts();\r\n const shower = parent.getParent();\r\n if (shower.showerInteriorWallAccent && shower.showerInteriorWallAccent.canBeDisabled\r\n && !shower.showerInteriorWallAccent.placeholderChanged && !getFeatureIsLocked(this)) {\r\n shower.showerInteriorWallAccent.disabled = true;\r\n shower.showerInteriorWallAccent.disabledClick();\r\n }\r\n this.featureClicked();\r\n }\r\n\r\n navigationSubItems(filters, searchText) {\r\n const filteredAvailableFeatures = super.getFeaturesBySearchText(this.availableFeatures(super.getFilteredFeaturesByFilters(filters)), searchText);\r\n const featuresToDisplay = super.navigationSubItemsWithFilterMultipleConditions(this.getArrayOfConditions(), filteredAvailableFeatures);\r\n return featuresToDisplay.map(_ => new DesignNavigationItem(_.featureName, _));\r\n }\r\n\r\n availableFeatures(wallFeatures) {\r\n return wallFeatures.filter(wallFeature => wallFeature.partNumber === 1)\r\n }\r\n\r\n setLayers(layout) {\r\n if (this.shadowFeature && !this.shadowFeature.matchesMetaForArrayOfConditions(this.getArrayOfConditions())) {\r\n this.setShadowFeature();\r\n }\r\n if (this.activeFeature && (this.activeFeature.matchesMetaForArrayOfConditions(this.getArrayOfConditions())\r\n || (this.activeFeature.notAvailableInVisualizer && this.placeholderFeature))) {\r\n this.activeFeatureParts = this.setActiveFeatureParts();\r\n super.setLayers(layout);\r\n } else {\r\n this.setDefault();\r\n super.setLayers(layout);\r\n }\r\n }\r\n\r\n setDefault() {\r\n const filteredFeatures = this.features.filter(f => f.matchesMetaForArrayOfConditions(this.getArrayOfConditions()));\r\n const matchingFeatureExist = super.tryToSetTheSameFeature(filteredFeatures, null, null, true);\r\n if (!matchingFeatureExist) {\r\n const hardCodedDefault = filteredFeatures.find((feature) => {\r\n return feature.dbFeature.displayName && feature.dbFeature.displayName.includes(\"Tan Hexagon\");\r\n });\r\n const placeholderDefault = filteredFeatures.find((feature) => {\r\n return feature.dbFeature.displayName && feature.dbFeature.displayName.includesCI(\"placeholder\");\r\n });\r\n\r\n this.activeFeature = hardCodedDefault || filteredFeatures[0];\r\n this.activeFeatureParts = this.setActiveFeatureParts();\r\n this.placeholderFeature = placeholderDefault || null;\r\n } else {\r\n this.activeFeatureParts = this.setActiveFeatureParts();\r\n }\r\n this.setShadowFeature();\r\n }\r\n\r\n getArrayOfConditions() {\r\n const showerParent = this.getParent();\r\n const activeShowerPartId = showerParent.showerTubComboIsActive() ? ShowerTubCombo.id : Shower.id;\r\n const showerSize = showerParent.layout.parts[activeShowerPartId].showerSize();\r\n return [{\r\n propName: 'ShowerSize',\r\n propValue: showerSize\r\n }];\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n const zIndex = zIndexes.Shower.Custom60in.Wall;\r\n const zIndex2 = zIndexes.Shower.Custom60in.Wall2;\r\n const zIndex3 = zIndexes.Shower.Custom60in.WallShadow;\r\n if (zIndexes && this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndex;\r\n }\r\n if (zIndexes && this.placeholderFeature) {\r\n this.placeholderFeature.layer.zIndex = zIndex;\r\n }\r\n if (zIndexes && this.activeFeatureParts.length) {\r\n this.activeFeatureParts.forEach((activeFeaturePart) => {\r\n if (activeFeaturePart && activeFeaturePart.layer) {\r\n activeFeaturePart.layer.zIndex = zIndex2\r\n }\r\n })\r\n }\r\n if(zIndexes && this.shadowFeature) {\r\n this.shadowFeature.layer.zIndex = zIndex3;\r\n }\r\n }\r\n\r\n setActiveFeatureParts(fromFeature = this.activeFeature) {\r\n if (!fromFeature) {\r\n return []\r\n }\r\n const showerSize = fromFeature.metaData[\"ShowerSize\"];\r\n const name1 = fromFeature.getSplittedFeatureName().split(\"30in \")[0].split(\"60in \")[0];\r\n const activeFeaturePart = fromFeature && fromFeature.partNumber && showerSize ? this.featuresParts.find((feature) => {\r\n const showerSize2 = feature.metaData[\"ShowerSize\"];\r\n const name2 = feature.getSplittedFeatureName().split(\"30in \")[0].split(\"60in \")[0];\r\n return showerSize2 && isEqual(showerSize, showerSize2) && (feature.partName === fromFeature.partName || name1 === name2)\r\n }) : null;\r\n if (activeFeaturePart) {\r\n activeFeaturePart.disabled = this.disabled\r\n return [activeFeaturePart]\r\n }\r\n return []\r\n }\r\n}\r\n","import isEqual from \"lodash/isEqual\";\r\nimport {IntermediatePart} from \"../../parts/intermediatePart\";\r\nimport DesignNavigationItem from \"../../../../visComponents/designNavigationItem\";\r\n\r\nimport { Shower } from \"../../parts/shower\";\r\nimport { ShowerTubCombo } from \"../../parts/showerTubCombo\";\r\n\r\nexport default class ShowerInteriorWallAccent extends IntermediatePart {\r\n\r\n constructor(isChild, partNumber = 0) {\r\n super(isChild);\r\n this.partId = \"shower_interior_wall_accent\";\r\n this.partName = \"Shower Walls Accent\";\r\n this.translateId = \"visualizer.bathroom.shower.shower_interior_wall_accent\";\r\n this.dbName = \"Shower Wall Accent\";\r\n // this.homePageTitle = 'Interior Shower Walls';\r\n this.isStoneFeature = true;\r\n this.partNumber = partNumber;\r\n this.activeFeatureParts = [];\r\n this.canBeDisabled = true;\r\n this.layerPriority = 3;\r\n }\r\n\r\n load(dbFeature) {\r\n const parts = dbFeature.metaData && dbFeature.metaData[\"Parts\"];\r\n if (parts) {\r\n const partNumber = +dbFeature.metaData[\"Part\"][0];\r\n return super.load_(\r\n dbFeature,\r\n new ShowerInteriorWallAccent(false, partNumber),\r\n true,\r\n partNumber === 1 ? 'features' : 'featuresParts'\r\n );\r\n } else {\r\n return super.load_(dbFeature, new ShowerInteriorWallAccent());\r\n }\r\n }\r\n\r\n disabledClick() {\r\n this.activeFeatureParts.forEach((activeFeaturePart) => {\r\n activeFeaturePart.disabled = this.disabled\r\n });\r\n }\r\n\r\n handleClick(ignoreLocked) {\r\n const parent = this.getParent();\r\n if (parent.getParent && parent.getParent()) {\r\n super.handleClick(ignoreLocked);\r\n parent.activeFeatureParts = parent.setActiveFeatureParts();\r\n } else {\r\n parent.showerInteriorWallAccent.activeFeature = this;\r\n }\r\n this.featureClicked();\r\n }\r\n\r\n navigationSubItems(filters, searchText) {\r\n const filteredAvailableFeatures = super.getFeaturesBySearchText(this.availableFeatures(super.getFilteredFeaturesByFilters(filters)), searchText);\r\n const featuresToDisplay = super.navigationSubItemsWithFilterMultipleConditions(this.getArrayOfConditions(), filteredAvailableFeatures);\r\n return featuresToDisplay.map(_ => new DesignNavigationItem(_.featureName, _));\r\n }\r\n\r\n availableFeatures(wallFeatures) {\r\n return wallFeatures.filter(wallFeature => wallFeature.partNumber === 1)\r\n }\r\n\r\n setLayers(layout) {\r\n if (this.activeFeature && (this.activeFeature.matchesMetaForArrayOfConditions(this.getArrayOfConditions())\r\n || (this.activeFeature.notAvailableInVisualizer && this.placeholderFeature))) {\r\n this.activeFeatureParts = this.setActiveFeatureParts();\r\n super.setLayers(layout);\r\n } else {\r\n this.setDefault();\r\n super.setLayers(layout);\r\n }\r\n }\r\n\r\n setDefault() {\r\n const filteredFeatures = this.features.filter(f => f.matchesMetaForArrayOfConditions(this.getArrayOfConditions()));\r\n const matchingFeatureExist = super.tryToSetTheSameFeature(filteredFeatures, null, null, true);\r\n if (!matchingFeatureExist) {\r\n const hardCodedDefault = filteredFeatures.find((feature) => {\r\n return feature.dbFeature.displayName && feature.dbFeature.displayName.includes(\"Tan Hexagon\");\r\n });\r\n const placeholderDefault = filteredFeatures.find((feature) => {\r\n return feature.dbFeature.displayName && feature.dbFeature.displayName.includes(\"laceholder\");\r\n });\r\n this.activeFeature = hardCodedDefault || filteredFeatures[0];\r\n this.placeholderFeature = placeholderDefault || null;\r\n this.activeFeatureParts = this.setActiveFeatureParts();\r\n } else {\r\n this.activeFeatureParts = this.setActiveFeatureParts();\r\n }\r\n this.setShadowFeature();\r\n }\r\n\r\n getArrayOfConditions() {\r\n const showerParent = this.getParent();\r\n const activeShowerPartId = showerParent.showerTubComboIsActive() ? ShowerTubCombo.id : Shower.id;\r\n const showerSize = showerParent.layout.parts[activeShowerPartId].showerSize();\r\n return [{\r\n propName: 'ShowerSize',\r\n propValue: showerSize\r\n }];\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n const zIndex = zIndexes.Shower.Custom60in.WallAccent;\r\n const zIndex2 = zIndexes.Shower.Custom60in.WallAccent2;\r\n\r\n if (zIndexes && this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndex;\r\n }\r\n if (zIndexes && this.placeholderFeature) {\r\n this.placeholderFeature.layer.zIndex = zIndex;\r\n }\r\n if (zIndexes && this.activeFeatureParts.length) {\r\n this.activeFeatureParts.forEach((activeFeaturePart) => {\r\n if (activeFeaturePart && activeFeaturePart.layer) {\r\n activeFeaturePart.layer.zIndex = zIndex2\r\n }\r\n })\r\n }\r\n }\r\n\r\n setActiveFeatureParts() {\r\n const activeFeature = this.placeholderChanged ? this.activeFeature : this.placeholderFeature;\r\n if (activeFeature) {\r\n const showerSize = activeFeature.metaData[\"ShowerSize\"];\r\n const name1 = activeFeature.getSplittedFeatureName().split(\"30in \")[0].split(\"60in \")[0];\r\n const activeFeaturePart = activeFeature.partNumber && showerSize ? this.featuresParts.find((feature) => {\r\n const showerSize2 = feature.metaData[\"ShowerSize\"];\r\n const name2 = feature.getSplittedFeatureName().split(\"30in \")[0].split(\"60in \")[0];\r\n return showerSize2 && isEqual(showerSize, showerSize2) && (feature.partName === activeFeature.partName || name1 === name2)\r\n }) : [];\r\n if (activeFeaturePart) {\r\n activeFeaturePart.disabled = this.disabled;\r\n return [activeFeaturePart]\r\n }\r\n }\r\n return []\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../parts/intermediatePart\";\r\nimport DesignNavigationItem from \"../../../../visComponents/designNavigationItem\";\r\n\r\nimport {ShowerTubCombo} from \"../../parts/showerTubCombo\";\r\nimport {Vanity} from \"../../parts/vanity\";\r\nimport { ShowerComboTubType } from \"../../constants\";\r\nimport { getMetadataByDimensions } from \"../../../../../misc/utils\";\r\nimport {getFeatureIsLocked} from \"../../../../../misc/helpers\";\r\n\r\nexport default class ShowerDoor extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'shower_door';\r\n this.partName = 'Shower Door';\r\n this.translateId = \"visualizer.bathroom.shower.shower_door\";\r\n this.visible = true;\r\n this.isStoneFeature = false;\r\n this.canBeDisabled = true;\r\n this.layerPriority = 5;\r\n\r\n /* only shower door properties */\r\n if (isChild) {\r\n this.previouslySelectedFeatures = {\r\n LG: {},\r\n SM: {}\r\n };\r\n }\r\n this.currentShowerBodyId = \"\"; // for example \"custom-a-60in-30x8\"\r\n }\r\n\r\n load(dbFeature) {\r\n const doorFeature = this.load_(dbFeature, new ShowerDoor());\r\n if (doorFeature) {\r\n ShowerDoor.setAdditionalMetaData(doorFeature);\r\n }\r\n }\r\n\r\n static setAdditionalMetaData(doorFeature) {\r\n if (!doorFeature.metaData[\"CompatibleTub\"]) {\r\n doorFeature.metaData[\"CompatibleTub\"] = [\"None\"];\r\n }\r\n }\r\n\r\n disabledClick() {\r\n const showerDoorHandle = this.getParent().showerDoorHandle;\r\n if (showerDoorHandle) {\r\n showerDoorHandle.disabled = this.disabled;\r\n }\r\n }\r\n\r\n handleClick() {\r\n super.handleClick();\r\n if (!this.notAvailableInVisualizer && !getFeatureIsLocked(this)) {\r\n // this.getParent().getParent().setShowerTubCombo();\r\n // let doorWithLiner = false;\r\n // if(this.metaData && this.metaData.length) {\r\n // const activeDoorMetadata = this.metaData.find(metaDataObject => metaDataObject.isFor);\r\n // const showerPanValues = activeDoorMetadata.conditions.find(condition => condition.name === \"BathtubLiner\");\r\n // if (showerPanValues) {\r\n // doorWithLiner = true;\r\n // }\r\n // }\r\n // this.getParent().getParent().setLinerActive(doorWithLiner);\r\n const shower = this.getParent().getParent();\r\n const showerPanCondition = this.metaData[\"ShowerPan\"];\r\n if (!shower.showerTubComboIsActive()) {\r\n shower.showerFloorIsActive = showerPanCondition && showerPanCondition.includes(\"Threshold\");\r\n }\r\n if(!this.matchesMetaForArrayOfConditions(this.getParent().getArrayOfConditions())) {\r\n const showerSizeValues = this.metaData[\"ShowerSize\"];\r\n const showerBodyParent = this.getParent().getParent().showerBody;\r\n if (showerSizeValues) {\r\n const showerBodyThatFits = showerBodyParent.features.filter(showerBodyFeature => {\r\n const showerSizeValues2 = showerBodyFeature.metaData[\"ShowerSize\"];\r\n return showerSizeValues.some(condValue => {\r\n return showerSizeValues2.some(condValue2 => condValue === condValue2);\r\n });\r\n });\r\n if (showerBodyThatFits.length && showerBodyThatFits.every(shBody => shBody.partName !== showerBodyParent.activeFeature.partName)) {\r\n let showerBodyToSet = showerBodyThatFits.find(shBody => {\r\n return shBody.showerDimensions === showerBodyParent.activeFeature.showerDimensions\r\n }) || showerBodyThatFits[0];\r\n showerBodyParent.showerBodySelectedByUser = true;\r\n showerBodyParent.activeFeature = showerBodyToSet;\r\n }\r\n }\r\n }\r\n this.featureClicked();\r\n }\r\n }\r\n\r\n navigationSubItems(filters, searchText) {\r\n const shower = this.getParent();\r\n const filteredAvailableFeatures = super.getFeaturesBySearchText(super.getFilteredFeaturesByFilters(filters), searchText);\r\n const featuresToDisplay = super.navigationSubItemsWithFilterMultipleConditions(this.getArrayOfConditions(shower.showerFloorIsActive), filteredAvailableFeatures);\r\n return featuresToDisplay.map(_ => new DesignNavigationItem(_.featureName, _));\r\n }\r\n\r\n setLayers(layout) {\r\n const shower = this.getParent();\r\n const currentConditions = this.getArrayOfConditions(shower.showerFloorIsActive);\r\n\r\n if (this.activeFeature && !this.activeFeature.notAvailableInVisualizer && this.activeFeature.matchesMetaForArrayOfConditions(currentConditions)) {\r\n this.checkIfPlaceHolderFits(currentConditions); // here we need to check if placeholder is the same as active feature\r\n return super.setLayers(layout);\r\n }\r\n\r\n this.setDefault();\r\n this.checkIfPlaceHolderFits(currentConditions);\r\n return super.setLayers(layout);\r\n }\r\n\r\n checkIfPlaceHolderFits(currentConditions) {\r\n if (this.activeFeature && !this.placeholderChanged) {\r\n const activeFeatureShowerPanCondition = this.activeFeature.metaData[\"ShowerPan\"];\r\n if (activeFeatureShowerPanCondition) {\r\n currentConditions.push({\r\n propName: \"ShowerPan\",\r\n propValue: activeFeatureShowerPanCondition\r\n });\r\n if (!this.placeholderFeature || this.placeholderFeature.notAvailableInVisualizer\r\n || (this.placeholderFeature && !this.placeholderFeature.matchesMetaForArrayOfConditions(currentConditions))) {\r\n this.setNewPlaceHolderFeature(currentConditions);\r\n }\r\n }\r\n }\r\n }\r\n\r\n setNewPlaceHolderFeature(newConditions) {\r\n // console.log('newConditions', newConditions);\r\n const filteredFeatures = this.features ? this.features.filter(f => f.matchesMetaForArrayOfConditions(newConditions)) : [];\r\n const placeholderDefault = filteredFeatures.find((feature) => {\r\n return feature.dbFeature.displayName && feature.dbFeature.displayName.includesCI(\"placeholder\");\r\n });\r\n this.placeholderFeature = placeholderDefault || null;\r\n }\r\n\r\n getArrayOfConditions(showerFloorIsActive) {\r\n const layout = this.getParent().layout;\r\n const showerComboParent = layout.parts[ShowerTubCombo.id];\r\n const showerParent = this.getParent();\r\n\r\n let showerDimensions = showerComboParent.showerTubComboIsActive\r\n ? showerComboParent.showerDimensions()\r\n : showerParent.showerDimensions();\r\n\r\n showerDimensions = getMetadataByDimensions(showerDimensions);\r\n\r\n const vanity = layout.parts[Vanity.id];\r\n let counterTopSize = vanity.counterTopSize();\r\n if (counterTopSize === '72in' && layout.type === 1 && (showerDimensions !== \"Full\" || showerDimensions !== \"Pony\")) {\r\n showerDimensions = \"Full\"\r\n }\r\n\r\n let showerSize = showerComboParent.showerTubComboIsActive\r\n ? showerComboParent.showerSize()\r\n : showerParent.showerSize();\r\n\r\n let compatibleValue = \"None\";\r\n if (showerComboParent.showerTubComboIsActive) {\r\n if (showerComboParent.bottomTub === ShowerComboTubType.bathtub_liner) {\r\n compatibleValue = \"BathtubLiner\"\r\n } else if (showerComboParent.bottomTub === ShowerComboTubType.replacement_tub) {\r\n compatibleValue = \"ReplacementTub\"\r\n } else if (showerComboParent.bottomTub === ShowerComboTubType.walk_in_tub) {\r\n compatibleValue = \"WalkInTub\"\r\n } else if (showerComboParent.bottomTub === ShowerComboTubType.jetted_tub) {\r\n compatibleValue = \"JettedTub\"\r\n }\r\n }\r\n const conditions = [{\r\n propName: 'ShowerSize',\r\n propValue: showerSize\r\n },{\r\n propName: \"EX L\",\r\n propValue: showerDimensions\r\n },{\r\n propName: 'CompatibleTub',\r\n propValue: compatibleValue\r\n }];\r\n if (!showerComboParent.showerTubComboIsActive) {\r\n if (showerFloorIsActive) {\r\n conditions.push({\r\n propName: \"ShowerPan\",\r\n propValue: [\"Threshold\"]\r\n })\r\n } else if (showerParent.showerPanCombo && showerParent.showerPanCombo.activeFeature) {\r\n let showerPanCondition = showerParent.showerPanCombo.activeFeature.metaData[\"ShowerPan\"];\r\n // console.log('showerPanCondition', showerPanCondition);\r\n if (showerPanCondition) {\r\n conditions.push({\r\n propName: \"ShowerPan\",\r\n propValue: showerPanCondition\r\n })\r\n }\r\n }\r\n }\r\n return conditions\r\n }\r\n\r\n setDefault() {\r\n const shower = this.getParent();\r\n const currentActiveFeature = this.activeFeature;\r\n const currentConditions = this.getArrayOfConditions(shower.showerFloorIsActive)\r\n const filteredFeatures = this.features.filter(f => !f.notAvailableInVisualizer && f.matchesMetaForArrayOfConditions(currentConditions));\r\n if (!this.tryToSetTheSameFeature(filteredFeatures)) {\r\n this.setDefaultAccordingToPreviousSelect(shower, filteredFeatures, \"\", \"Placeholder\");\r\n }\r\n this.rememberPreviousSelection(shower, currentActiveFeature);\r\n // shower.showerFloorIsActive = !!(this.activeFeature && this.activeFeature.metaData[\"ShowerPan\"]\r\n // && this.activeFeature.metaData[\"ShowerPan\"].includes(\"Threshold\"));\r\n }\r\n\r\n tryToSetTheSameFeature(filteredFeatures) {\r\n if (this.activeFeature && this.activeFeature.partName) {\r\n const nameToFind = this.activeFeature.partName.replace(\" 30\", \"\").replace(\" 60\", \"\");\r\n this.activeFeature = !nameToFind.includes(\"laceholder\") && filteredFeatures.find(feature => {\r\n if (feature.partName) {\r\n const fName = feature.partName.replace(\" 30\", \"\").replace(\" 60\", \"\");\r\n return fName.includes(nameToFind)\r\n }\r\n });\r\n this.placeholderFeature = filteredFeatures.find((feature) => {\r\n return feature.dbFeature.displayName && feature.dbFeature.displayName.includesCI(\"placeholder\")\r\n });\r\n if (this.activeFeature) {\r\n return true\r\n }\r\n }\r\n return false\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n const zIndex = zIndexes.Shower.Custom60in.ShowerDoor;\r\n if (zIndexes && this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndex;\r\n }\r\n if (zIndexes && this.placeholderFeature) {\r\n this.placeholderFeature.layer.zIndex = zIndex;\r\n }\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../parts/intermediatePart\";\r\nimport {getMetadataByDimensions, iStartWith} from \"../../../../../misc/utils\";\r\nimport DesignNavigationItem from \"../../../../visComponents/designNavigationItem\";\r\nimport store from \"../../../../../store\";\r\nimport {getFeatureIsLocked} from \"../../../../../misc/helpers\";\r\nimport {ShowerTubCombo} from \"../../parts/showerTubCombo\";\r\nimport {toggleNotCompatibleView} from \"../../../../../actions/selectionFunctions\";\r\n\r\nexport default class ShowerPanCombo extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'shower_pan_combo';\r\n this.partName = 'Shower Pan';\r\n this.translateId = \"visualizer.bathroom.shower.shower_pan_combo\";\r\n this.visible = true;\r\n this.isStoneFeature = false;\r\n this.layerPriority = 8;\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new ShowerPanCombo())\r\n }\r\n\r\n applyFeatureIfNotCompatible() {\r\n const parent = this.getParent();\r\n const shower = parent.getParent();\r\n shower.showerFloorIsActive = false;\r\n if (shower.layout && shower.showerTubComboIsActive()) {\r\n const comboPart = shower.layout.parts[ShowerTubCombo.id];\r\n comboPart.showerTubComboIsActive = false;\r\n }\r\n }\r\n\r\n handleClick(ignoreLocked) {\r\n const showerPanComboParent = this.getParent();\r\n const shower = showerPanComboParent.getParent();\r\n super.handleClick(ignoreLocked); // set active item & not in visualizer item\r\n\r\n if (this.notAvailableInVisualizer || getFeatureIsLocked(this)) {\r\n return\r\n }\r\n\r\n if ((shower.showerFloorIsActive || shower.showerTubComboIsActive()) && !window.location.hash.includes(\"visualizer\")) {\r\n store.dispatch(toggleNotCompatibleView(true));\r\n return;\r\n }\r\n\r\n this.applyFeatureIfNotCompatible();\r\n\r\n if (!this.matchesMetaForArrayOfConditions(this.getParent().getArrayOfConditions())) {\r\n const showerSizeValues = this.metaData[\"ShowerSize\"];\r\n const showerPanValues = this.metaData[\"ShowerPan\"];\r\n\r\n if (showerSizeValues && showerPanValues) {\r\n const showerDoorParent = shower.showerDoor;\r\n const showerDoorsThatFits = showerDoorParent.features.filter(showerDoorFeature => {\r\n const showerSizeValues2 = showerDoorFeature.metaData[\"ShowerSize\"];\r\n const showerPanValues2 = showerDoorFeature.metaData[\"ShowerPan\"];\r\n let showerSizePassed = showerSizeValues2 && showerSizeValues.some(condValue => {\r\n return showerSizeValues2.some(condValue2 => condValue === condValue2);\r\n });\r\n let showerPanPassed = showerPanValues2 && showerPanValues.some(condPanValue => {\r\n return showerPanValues2.some(condPanValue2 => condPanValue === condPanValue2);\r\n });\r\n return showerSizePassed && showerPanPassed\r\n });\r\n if (showerDoorsThatFits && showerDoorsThatFits.length) {\r\n const showerDimensions = getMetadataByDimensions(showerDoorParent.getParent().showerBody.activeFeature.showerDimensions);\r\n const sameWallFeatures = showerDoorsThatFits.filter((showerDoorsThatFit) => {\r\n const wallValue = showerDoorsThatFit.metaData[\"Wall\"] || showerDoorsThatFit.metaData[\"EX L\"];\r\n return wallValue && wallValue.some(val => val === showerDimensions)\r\n });\r\n\r\n showerDoorParent.activeFeature = sameWallFeatures.length ? sameWallFeatures[0] : showerDoorsThatFits[0];\r\n showerDoorParent.placeholderFeature = (sameWallFeatures.length ? sameWallFeatures : showerDoorsThatFits).find((feature) => {\r\n return feature.dbFeature.displayName && feature.dbFeature.displayName.includes(\"laceholder\");\r\n });\r\n }\r\n }\r\n const showerBodyParent = this.getParent().getParent().showerBody;\r\n if (showerSizeValues) {\r\n const showerBodyThatFits = showerBodyParent.features.filter(showerBodyFeature => {\r\n const showerSizeValues2 = showerBodyFeature.metaData[\"ShowerSize\"];\r\n return showerSizeValues2 && showerSizeValues.some(condValue => {\r\n return showerSizeValues2.some(condValue2 => condValue === condValue2);\r\n });\r\n });\r\n if (showerBodyThatFits.length && showerBodyThatFits.every(shBody => shBody.partName !== showerBodyParent.activeFeature.partName)) {\r\n let showerBodyToSet = showerBodyThatFits.find(shBody => {\r\n return shBody.showerDimensions === showerBodyParent.activeFeature.showerDimensions\r\n }) || showerBodyThatFits[0];\r\n showerBodyParent.showerBodySelectedByUser = true;\r\n showerBodyParent.activeFeature = showerBodyToSet;\r\n }\r\n }\r\n this.featureClicked();\r\n }\r\n }\r\n\r\n navigationSubItems(filters, searchText) {\r\n const filteredAvailableFeatures = super.getFeaturesBySearchText(super.getFilteredFeaturesByFilters(filters), searchText);\r\n const featuresToDisplay = super.navigationSubItemsWithFilterMultipleConditions(this.getArrayOfConditions(true), filteredAvailableFeatures);\r\n return featuresToDisplay.map(_ => new DesignNavigationItem(_.featureName, _));\r\n }\r\n\r\n setLayers(layout) {\r\n\r\n const showerParent = this.getParent();\r\n\r\n if (showerParent.showerTubComboIsActive() || showerParent.showerFloorIsActive) {\r\n super.hideLayers();\r\n return;\r\n }\r\n\r\n if (this.activeFeature && !this.activeFeature.notAvailableInVisualizer\r\n && this.activeFeature.matchesMetaForArrayOfConditions(this.getArrayOfConditions())) {\r\n return super.setLayers(layout);\r\n }\r\n\r\n this.setDefault();\r\n return super.setLayers(layout);\r\n }\r\n\r\n getArrayOfConditions(dontFilterByDoorPanMeta) {\r\n const showerParent = this.getParent();\r\n const showerSize = showerParent.showerSize();\r\n let showerDoorType = '';\r\n const showerDoor = showerParent.showerDoor;\r\n const showerDoorActiveFeature = showerDoor ? (showerDoor.activeFeature || showerDoor.placeholderFeature) : null;\r\n if (!dontFilterByDoorPanMeta && showerDoorActiveFeature) {\r\n const showerPanValues = showerDoorActiveFeature.metaData[\"ShowerPan\"];\r\n if (showerPanValues) {\r\n showerDoorType = showerPanValues;\r\n }\r\n }\r\n\r\n // console.log('showerDoorType', showerDoorType);\r\n // const showerDimensions = this.getParent().showerDimensions() === \"30X8\" ? \"Full\" : \"Half\";\r\n const conditions = [{\r\n propName: 'ShowerSize',\r\n propValue: showerSize\r\n }];\r\n if (!dontFilterByDoorPanMeta && showerDoorType) {\r\n conditions.push({\r\n propName: 'ShowerPan',\r\n propValue: showerDoorType\r\n })\r\n }\r\n return conditions;\r\n }\r\n\r\n setDefault() {\r\n const filteredFeatures = this.features.filter(f => !f.notAvailableInVisualizer && f.matchesMetaForArrayOfConditions(this.getArrayOfConditions()));\r\n let currentShowerPanMetadata = this.activeFeature && this.activeFeature.metaData[\"ShowerPan\"]\r\n ? [...this.activeFeature.metaData[\"ShowerPan\"]]\r\n : null;\r\n let previousFeature = null;\r\n if (this.activeFeature) {\r\n previousFeature = Object.assign({} , this.activeFeature);\r\n }\r\n if (!super.tryToSetTheSameFeature(filteredFeatures)) {\r\n let featureToSet = null;\r\n if (currentShowerPanMetadata) {\r\n\r\n let currentColorArrayValue = null;\r\n const filterGroups = store.getState().filterState.filterGroups;\r\n const colorGroup = filterGroups.length && filterGroups.find(filterGroup => filterGroup.name === \"Color\");\r\n currentColorArrayValue = previousFeature.dbFeature.filterValueIDs\r\n && previousFeature.dbFeature.filterValueIDs[colorGroup.id];\r\n\r\n const existingPans = filteredFeatures.filter((feature) => {\r\n return feature.metaData[\"ShowerPan\"] && feature.metaData[\"ShowerPan\"].some((metaValue) => {\r\n return currentShowerPanMetadata.includes(metaValue)\r\n })\r\n });\r\n featureToSet = currentColorArrayValue\r\n ? existingPans.find(filteredFeature => {\r\n return filteredFeature.dbFeature.filterValueIDs\r\n && filteredFeature.dbFeature.filterValueIDs[colorGroup.id]\r\n && filteredFeature.dbFeature.filterValueIDs[colorGroup.id].some(filteredFeatureColor => {\r\n return currentColorArrayValue.some(col => col === filteredFeatureColor)\r\n })\r\n })\r\n : existingPans[0];\r\n if (!featureToSet) {\r\n let filteredByPan = [];\r\n if (currentShowerPanMetadata.includes(\"Low Threshold\")) {\r\n filteredByPan = super.getFeaturesWithMeta(filteredFeatures, \"ShowerPan\", \"Designer\")\r\n } else if (currentShowerPanMetadata.includes(\"Designer\")) {\r\n filteredByPan = super.getFeaturesWithMeta(filteredFeatures, \"ShowerPan\", \"Low Threshold\")\r\n } else if (currentShowerPanMetadata.includes(\"Custom\")) {\r\n filteredByPan = super.getFeaturesWithMeta(filteredFeatures, \"ShowerPan\", \"Standard\");\r\n if (!filteredByPan.length) {\r\n filteredByPan = super.getFeaturesWithMeta(filteredFeatures, \"ShowerPan\", \"Made In The USA\");\r\n }\r\n } else if (currentShowerPanMetadata.includes(\"Standard\")) {\r\n filteredByPan = super.getFeaturesWithMeta(filteredFeatures, \"ShowerPan\", \"Custom\");\r\n if (!filteredByPan.length) {\r\n filteredByPan = super.getFeaturesWithMeta(filteredFeatures, \"ShowerPan\", \"Made In The USA\");\r\n }\r\n } else if (currentShowerPanMetadata.includes(\"Made In The USA\")) {\r\n filteredByPan = super.getFeaturesWithMeta(filteredFeatures, \"ShowerPan\", \"Custom\");\r\n if (!filteredByPan.length) {\r\n filteredByPan = super.getFeaturesWithMeta(filteredFeatures, \"ShowerPan\", \"Standart\");\r\n }\r\n }\r\n if (filteredByPan.length && previousFeature) {\r\n\r\n if (colorGroup && previousFeature.dbFeature.filterValueIDs) {\r\n const currentColorArrayValue = previousFeature.dbFeature.filterValueIDs[colorGroup.id];\r\n if (currentColorArrayValue) {\r\n featureToSet = filteredByPan.find(filteredFeature => {\r\n return filteredFeature.dbFeature.filterValueIDs\r\n && filteredFeature.dbFeature.filterValueIDs[colorGroup.id]\r\n && filteredFeature.dbFeature.filterValueIDs[colorGroup.id].some(filteredFeatureColor => {\r\n return currentColorArrayValue.some(col => col === filteredFeatureColor)\r\n })\r\n });\r\n // console.log('featureToSet', featureToSet);\r\n }\r\n }\r\n }\r\n if (!featureToSet && filteredByPan.length) {\r\n featureToSet = filteredByPan[0]\r\n }\r\n }\r\n }\r\n const placeholderDefault = filteredFeatures.find((feature) => {\r\n return iStartWith(feature.dbFeature.displayName, 'Shower Pan - Placeholder');\r\n });\r\n this.activeFeature = featureToSet || filteredFeatures[0];\r\n this.placeholderFeature = placeholderDefault || null;\r\n }\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n const zIndex = zIndexes.Shower.Custom60in.ShowerPanCombo;\r\n if (zIndexes && this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndex;\r\n }\r\n if (zIndexes && this.placeholderFeature) {\r\n this.placeholderFeature.layer.zIndex = zIndex;\r\n }\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../parts/intermediatePart\";\r\nimport DesignNavigationItem from \"../../../../visComponents/designNavigationItem\";\r\nimport {ShowerTubCombo} from \"../../parts/showerTubCombo\";\r\nimport {ShowerComboTubType, LayoutAbbreviation} from \"../../constants\";\r\nimport {getMetadataByDimensions} from \"../../../../../misc/utils\";\r\nimport {Vanity} from \"../../parts/vanity\";\r\n\r\nexport default class ShowerDoorHandle extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'shower_door_handle';\r\n this.partName = 'Handle';\r\n this.translateId = \"visualizer.bathroom.shower.shower_door_handle\";\r\n this.dbName = 'Shower Door Handle';\r\n this.visible = true;\r\n this.isStoneFeature = false;\r\n this.layerPriority = 9;\r\n if (isChild) {\r\n this.previouslySelectedFeatures = {\r\n LG: {},\r\n SM: {}\r\n };\r\n }\r\n }\r\n\r\n load(dbFeature) {\r\n const handle = this.load_(dbFeature, new ShowerDoorHandle());\r\n if (handle) {\r\n ShowerDoorHandle.setAdditionalMetaData(handle);\r\n }\r\n }\r\n\r\n static setAdditionalMetaData(handle) {\r\n const compatible = handle.metaData[\"CompatibleTub\"];\r\n const showerSize = handle.metaData[\"ShowerSize\"];\r\n if (!compatible) {\r\n handle.metaData[\"CompatibleTub\"] = [\"None\"];\r\n }\r\n if (!showerSize) {\r\n handle.metaData[\"ShowerSize\"] = [\"60in\"];\r\n }\r\n }\r\n\r\n disabledClick() {\r\n const showerDoor = this.getParent().showerDoor;\r\n if (showerDoor) {\r\n showerDoor.disabled = this.disabled;\r\n }\r\n }\r\n\r\n handleClick() {\r\n super.handleClick();\r\n // this.getParent().getParent().setShowerTubCombo();\r\n //\r\n // let doorWithLiner = false;\r\n // if(this.metaData && this.metaData.length) {\r\n // const activeDoorMetadata = this.metaData.find(metaDataObject => metaDataObject.isFor);\r\n // const showerPanValues = activeDoorMetadata.conditions.find(condition => condition.name === \"BathtubLiner\");\r\n // if (showerPanValues) {\r\n // doorWithLiner = true;\r\n // }\r\n // }\r\n //\r\n // this.getParent().getParent().setLinerActive(doorWithLiner);\r\n // this.featureClicked();\r\n }\r\n\r\n navigationSubItems(filters, searchText) {\r\n const filteredAvailableFeatures = super.getFeaturesBySearchText(super.getFilteredFeaturesByFilters(filters), searchText);\r\n const featuresToDisplay = super.navigationSubItemsWithFilterMultipleConditions(this.getArrayOfConditions(), filteredAvailableFeatures);\r\n return featuresToDisplay.map(_ => new DesignNavigationItem(_.featureName, _));\r\n }\r\n\r\n setLayers(layout) {\r\n\r\n const showerParent = this.getParent();\r\n\r\n if (!showerParent.showerDoor || !showerParent.showerDoor.activeFeature ||\r\n (showerParent.showerDoor.activeFeature.metaData && showerParent.showerDoor.activeFeature.metaData[\"ShowerHandle\"]\r\n && showerParent.showerDoor.activeFeature.metaData[\"ShowerHandle\"][0] === \"None\")) {\r\n super.hideLayers();\r\n return;\r\n }\r\n\r\n if (this.activeFeature && (this.activeFeature.matchesMetaForArrayOfConditions(this.getArrayOfConditions())\r\n || (this.activeFeature.notAvailableInVisualizer && this.placeholderFeature))) {\r\n return super.setLayers(layout);\r\n }\r\n\r\n this.setDefault();\r\n return super.setLayers(layout);\r\n }\r\n\r\n getArrayOfConditions() {\r\n const layout = this.getParent().layout;\r\n const showerComboParent = layout.parts[ShowerTubCombo.id];\r\n const showerParent = this.getParent();\r\n const layoutAbr = layout.getCurrentLayoutAbbreviation();\r\n\r\n let showerSize = showerComboParent.showerTubComboIsActive\r\n ? showerComboParent.showerSize()\r\n : showerParent.showerSize();\r\n\r\n let compatibleValue = \"None\";\r\n if (showerComboParent.showerTubComboIsActive) {\r\n if (showerComboParent.bottomTub === ShowerComboTubType.bathtub_liner) {\r\n compatibleValue = \"BathtubLiner\"\r\n } else if (showerComboParent.bottomTub === ShowerComboTubType.replacement_tub) {\r\n compatibleValue = \"ReplacementTub\"\r\n } else if (showerComboParent.bottomTub === ShowerComboTubType.walk_in_tub) {\r\n compatibleValue = \"WalkInTub\"\r\n } else if (showerComboParent.bottomTub === ShowerComboTubType.jetted_tub) {\r\n compatibleValue = \"JettedTub\"\r\n }\r\n }\r\n\r\n const conditions = [{\r\n propName: 'ShowerSize',\r\n propValue: showerSize\r\n },{\r\n propName: 'CompatibleTub',\r\n propValue: compatibleValue\r\n }];\r\n\r\n if (layoutAbr === LayoutAbbreviation.Large) {\r\n let showerDimensions = showerComboParent.showerTubComboIsActive\r\n ? showerComboParent.showerDimensions()\r\n : showerParent.showerDimensions();\r\n\r\n showerDimensions = getMetadataByDimensions(showerDimensions);\r\n\r\n const vanity = layout.parts[Vanity.id];\r\n let counterTopSize = vanity.counterTopSize();\r\n if (counterTopSize === '72in' && layout.type === 1 && (showerDimensions !== \"Full\" || showerDimensions !== \"Pony\")) {\r\n showerDimensions = \"Full\"\r\n }\r\n\r\n conditions.push({\r\n propName: \"EX L\",\r\n propValue: showerDimensions\r\n })\r\n }\r\n\r\n if (showerParent.showerDoor && showerParent.showerDoor.activeFeature) { // add shower pan condition only if it is shower\r\n const doorCondition = showerParent.showerDoor.activeFeature.metaData[\"ShowerDoor\"];\r\n const handleCondition = showerParent.showerDoor.activeFeature.metaData[\"ShowerHandle\"];\r\n // console.log('doorCondition', doorCondition);\r\n if (doorCondition) {\r\n conditions.push({\r\n propName: 'ShowerDoor',\r\n propValue: doorCondition\r\n })\r\n }\r\n if (handleCondition) {\r\n conditions.push({\r\n propName: 'ShowerHandle',\r\n propValue: handleCondition\r\n })\r\n }\r\n }\r\n\r\n if (!showerParent.showerTubComboIsActive()) {\r\n if (showerParent.showerFloorIsActive) {\r\n conditions.push({\r\n propName: \"ShowerPan\",\r\n propValue: \"Threshold\"\r\n })\r\n } else if (showerParent.showerPanCombo && showerParent.showerPanCombo.activeFeature) {\r\n conditions.push({\r\n propName: \"ShowerPan\",\r\n propValue: showerParent.showerPanCombo.activeFeature.metaData[\"ShowerPan\"]\r\n })\r\n }\r\n }\r\n // console.log('conditions', conditions);\r\n return conditions\r\n }\r\n\r\n setDefault() {\r\n const shower = this.getParent();\r\n const currentActiveFeature = this.activeFeature;\r\n const filteredFeatures = this.features.filter(f => f.matchesMetaForArrayOfConditions(this.getArrayOfConditions()));\r\n if (!super.tryToSetTheSameFeature(filteredFeatures)) {\r\n this.setDefaultAccordingToPreviousSelect(shower, filteredFeatures, \"Brantford\");\r\n }\r\n this.rememberPreviousSelection(shower, currentActiveFeature);\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n const zIndex = zIndexes.Shower.Custom60in.ShowerDoorHandle;\r\n if (zIndexes && this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndex;\r\n }\r\n if (zIndexes && this.placeholderFeature) {\r\n this.placeholderFeature.layer.zIndex = zIndex;\r\n }\r\n }\r\n}\r\n","import DesignNavigationItem from \"../../../../visComponents/designNavigationItem\";\r\nimport {IntermediatePart} from \"../../parts/intermediatePart\";\r\nimport {LayoutAbbreviation} from \"../../constants\";\r\nimport {ShowerTubCombo} from \"../../parts/showerTubCombo\";\r\nimport {Shower} from \"../../parts/shower\";\r\n\r\nexport default class PonyWallCap extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'pony_wall_cap';\r\n this.isPonyWallPart = true;\r\n this.visible = true;\r\n this.partName = 'Pony Wall Cap';\r\n this.translateId = \"visualizer.bathroom.shower.pony_wall_cap\";\r\n this.isStoneFeature = true;\r\n this.disableOnHomeSections = true;\r\n this.shadowName = \"Pony Wall Cap\";\r\n this.layerPriority = 11;\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new PonyWallCap());\r\n }\r\n\r\n disabledClick() {\r\n\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n const zIndex = zIndexes.Shower.Custom60in.PonyWallCap;\r\n const zIndex2 = zIndexes.Shower.Custom60in.PonyWallCapShadow;\r\n if (zIndexes && this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndex;\r\n }\r\n if (zIndexes && this.placeholderFeature) {\r\n this.placeholderFeature.layer.zIndex = zIndex;\r\n }\r\n if (zIndexes && this.shadowFeature) {\r\n this.shadowFeature.layer.zIndex = zIndex2;\r\n }\r\n }\r\n\r\n navigationSubItems(filters, searchText) {\r\n const filteredAvailableFeatures = super.getFeaturesBySearchText(super.getFilteredFeaturesByFilters(filters), searchText);\r\n const featuresToDisplay = super.navigationSubItemsWithFilterMultipleConditions(this.getArrayOfConditions(), filteredAvailableFeatures);\r\n return featuresToDisplay.map(_ => new DesignNavigationItem(_.featureName, _));\r\n }\r\n\r\n setLayers(layout) {\r\n\r\n const showerParent = this.getParent().getActiveShowerGroup();\r\n if (showerParent.showerDimensions() !== \"Pony\") {\r\n super.hideLayers();\r\n return;\r\n }\r\n\r\n const conditions = this.getArrayOfConditions();\r\n if (!this.shadowFeature || (this.shadowFeature && !this.shadowFeature.matchesMetaForArrayOfConditions(conditions))) {\r\n this.setShadowFeature();\r\n }\r\n\r\n const layoutAbr = layout.getCurrentLayoutAbbreviation();\r\n const matchesByBindings = this.activeFeature && this.activeFeature.dbFeature && this.activeFeature.s3Bindings && this.activeFeature.dbFeature.s3Bindings.some(binding => {\r\n return binding.layout === LayoutAbbreviation.All || binding.layout === layoutAbr\r\n });\r\n if (matchesByBindings && (this.activeFeature.matchesMetaForArrayOfConditions(conditions)\r\n || (this.activeFeature.notAvailableInVisualizer && this.placeholderFeature))) {\r\n return super.setLayers(layout);\r\n }\r\n\r\n this.setDefault();\r\n return super.setLayers(layout);\r\n }\r\n\r\n getArrayOfConditions() {\r\n const parent = this.getParent();\r\n const layout = parent.layout;\r\n const layoutAbr = layout.getCurrentLayoutAbbreviation();\r\n if (layoutAbr === LayoutAbbreviation.Small){\r\n const activeShower = parent.showerTubComboIsActive()\r\n ? layout.parts[ShowerTubCombo.id]\r\n : layout.parts[Shower.id];\r\n const showerSize = activeShower.showerSize(); // 60in, 30in, ..\r\n // const showerDimensions = activeShower.showerDimensions(); // 15x4, Pony, ...\r\n return [{\r\n propName: 'Shower',\r\n propValue: 'Custom'\r\n }, {\r\n propName: 'Size',\r\n propValue: showerSize\r\n }];\r\n }\r\n\r\n return []\r\n }\r\n\r\n setDefault() {\r\n const filteredFeatures = this.features.filter(f => f.matchesMetaForArrayOfConditions(this.getArrayOfConditions()));\r\n if (!super.tryToSetTheSameFeature(filteredFeatures, '', '', true)) {\r\n const hardCodedDefault = filteredFeatures.find((feature) => {\r\n return feature.dbFeature.displayName\r\n && feature.dbFeature.displayName.includesCI(\"Pony Wall Cap - Model[For=Shower=(Custom)=Size=(30in_60in)]\");\r\n });\r\n const placeholderDefault = filteredFeatures.find((feature) => {\r\n return feature.dbFeature.displayName && feature.dbFeature.displayName.includesCI(\" - Placeholder\");\r\n });\r\n this.activeFeature = hardCodedDefault || filteredFeatures[0];\r\n this.placeholderFeature = placeholderDefault || null;\r\n this.setShadowFeature();\r\n }\r\n }\r\n\r\n}\r\n","import DesignNavigationItem from \"../../../../visComponents/designNavigationItem\";\r\nimport {IntermediatePart} from \"../../parts/intermediatePart\";\r\nimport {LayoutAbbreviation} from \"../../constants\";\r\nimport {ShowerTubCombo} from \"../../parts/showerTubCombo\";\r\n\r\nexport default class PonyWallGlass extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'pony_wall_glass';\r\n this.isPonyWallPart = true;\r\n this.visible = true;\r\n this.partName = 'Pony Wall Glass';\r\n this.translateId = \"visualizer.bathroom.shower.pony_wall_glass\";\r\n this.isStoneFeature = false;\r\n this.disableOnHomeSections = true;\r\n this.layerPriority = 10;\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new PonyWallGlass());\r\n }\r\n\r\n disabledClick() {\r\n\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n const zIndex = zIndexes.Shower.Custom60in.PonyWallGlass;\r\n if (zIndexes && this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndex;\r\n }\r\n if (zIndexes && this.placeholderFeature) {\r\n this.placeholderFeature.layer.zIndex = zIndex;\r\n }\r\n }\r\n\r\n navigationSubItems(filters, searchText) {\r\n const filteredAvailableFeatures = super.getFeaturesBySearchText(super.getFilteredFeaturesByFilters(filters), searchText);\r\n const featuresToDisplay = super.navigationSubItemsWithFilterMultipleConditions(this.getArrayOfConditions(), filteredAvailableFeatures);\r\n return featuresToDisplay.map(_ => new DesignNavigationItem(_.featureName, _));\r\n }\r\n\r\n setLayers(layout) {\r\n\r\n const showerParent = this.getParent().getActiveShowerGroup();\r\n if (showerParent.showerDimensions() !== \"Pony\") {\r\n super.hideLayers();\r\n return;\r\n }\r\n\r\n const layoutAbr = layout.getCurrentLayoutAbbreviation();\r\n const matchesByBindings = this.activeFeature && this.activeFeature.dbFeature.s3Bindings.some(binding => {\r\n return binding.layout === LayoutAbbreviation.All || binding.layout === layoutAbr\r\n });\r\n\r\n if (matchesByBindings && (this.activeFeature.matchesMetaForArrayOfConditions(this.getArrayOfConditions())\r\n || (this.activeFeature.notAvailableInVisualizer && this.placeholderFeature))) {\r\n return super.setLayers(layout);\r\n }\r\n\r\n this.setDefault();\r\n return super.setLayers(layout);\r\n }\r\n\r\n getArrayOfConditions() {\r\n const showerParent = this.getParent();\r\n const layout = showerParent.layout;\r\n const layoutAbr = layout.getCurrentLayoutAbbreviation();\r\n\r\n if (layoutAbr === LayoutAbbreviation.Small) {\r\n const showerComboParent = this.getParent().layout.parts[ShowerTubCombo.id];\r\n let showerSize = showerComboParent.showerTubComboIsActive\r\n ? showerComboParent.showerSize()\r\n : showerParent.showerSize();\r\n return [{\r\n propName: 'Size',\r\n propValue: showerSize\r\n }]\r\n }\r\n\r\n return []\r\n }\r\n\r\n setDefault() {\r\n const filteredFeatures = this.features.filter(f => f.matchesMetaForArrayOfConditions(this.getArrayOfConditions()));\r\n if (!super.tryToSetTheSameFeature(filteredFeatures)) {\r\n const hardCodedDefault = filteredFeatures.find((feature) => {\r\n return feature.dbFeature.displayName && feature.dbFeature.displayName.includes(\"Standard Pony Wall\");\r\n });\r\n const placeholderDefault = filteredFeatures.find((feature) => {\r\n return feature.dbFeature.displayName && feature.dbFeature.displayName.includes(\"laceholder\");\r\n });\r\n this.activeFeature = hardCodedDefault || filteredFeatures[0];\r\n this.placeholderFeature = placeholderDefault || null;\r\n }\r\n }\r\n\r\n}\r\n","import DesignNavigationItem from \"../../../../visComponents/designNavigationItem\";\r\nimport {IntermediatePart} from \"../../parts/intermediatePart\";\r\nimport {ShowerBodyType} from \"../../constants\";\r\nimport {Shower} from \"../../parts/shower\";\r\nimport {ShowerTubCombo} from \"../../parts/showerTubCombo\";\r\nimport {getFeatureIsLocked} from \"../../../../../misc/helpers\";\r\nimport store from \"../../../../../store\";\r\nimport {toggleNotCompatibleView} from \"../../../../../actions/selectionFunctions\";\r\n\r\nexport default class ShowerFloor extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'shower_floor';\r\n this.partName = 'Floor';\r\n this.translateId = \"visualizer.bathroom.shower.shower_floor\";\r\n this.homePageTitle = 'Shower Flooring';\r\n this.dbName = 'ShowerFloor';\r\n this.isStoneFeature = true;\r\n this.selectedByUser = false;\r\n this.shadowName = \"Floor\";\r\n this.layerPriority = 6;\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new ShowerFloor())\r\n }\r\n\r\n applyFeatureIfNotCompatible() {\r\n const parent = this.getParent();\r\n const shower = parent.getParent();\r\n shower.showerFloorIsActive = true;\r\n if (shower.layout && shower.showerTubComboIsActive()) {\r\n const comboPart = shower.layout.parts[ShowerTubCombo.id];\r\n comboPart.showerTubComboIsActive = false;\r\n }\r\n }\r\n\r\n handleClick(ignoreLocked) {\r\n super.handleClick(ignoreLocked);\r\n if (this.notAvailableInVisualizer || getFeatureIsLocked(this)) {\r\n return\r\n }\r\n const parent = this.getParent();\r\n const shower = parent.getParent();\r\n if ((!shower.showerFloorIsActive || shower.showerTubComboIsActive()) && !window.location.hash.includes(\"visualizer\")) {\r\n store.dispatch(toggleNotCompatibleView(true));\r\n return;\r\n }\r\n\r\n this.applyFeatureIfNotCompatible();\r\n\r\n this.getParent().selectedByUser = true;\r\n const threshold = shower.threshold;\r\n if (threshold && !threshold.selectedByUser) {\r\n const thresholdAvailableFeatures = threshold.navigationSubItems();\r\n const currentFloorName = this.getSplittedFeatureName();\r\n const sameThreshold = thresholdAvailableFeatures.find(tr => tr.part.getSplittedFeatureName() === currentFloorName);\r\n if (sameThreshold) {\r\n super.handleClick.call(sameThreshold.part);\r\n threshold.selectedByUser = false;\r\n }\r\n }\r\n }\r\n\r\n navigationSubItems(filters, searchText) {\r\n const filteredAvailableFeatures = super.getFeaturesBySearchText(super.getFilteredFeaturesByFilters(filters), searchText);\r\n const featuresToDisplay = super.navigationSubItemsWithFilterMultipleConditions(this.getArrayOfConditions(), filteredAvailableFeatures);\r\n return featuresToDisplay.map(_ => new DesignNavigationItem(_.featureName, _));\r\n }\r\n\r\n setLayers(layout) {\r\n\r\n if (this.getParent().showerTubComboIsActive()) {\r\n super.hideLayers();\r\n return;\r\n }\r\n\r\n if (this.getParent().customBodyType === ShowerBodyType.Door) {\r\n const showerDoorParent = this.getParent().showerDoor;\r\n if (showerDoorParent && showerDoorParent.activeFeature) {\r\n const currentShowerPanCondition = showerDoorParent.activeFeature.metaData[\"ShowerPan\"];\r\n if (!currentShowerPanCondition || (currentShowerPanCondition && !currentShowerPanCondition.includes(\"Threshold\"))) {\r\n super.hideLayers();\r\n return;\r\n }\r\n }\r\n }\r\n\r\n const conditions = this.getArrayOfConditions();\r\n if (!this.shadowFeature || (this.shadowFeature && !this.shadowFeature.matchesMetaForArrayOfConditions(conditions))) {\r\n this.setShadowFeature();\r\n }\r\n if (this.activeFeature && (this.activeFeature.matchesMetaForArrayOfConditions(conditions)\r\n || (this.activeFeature.notAvailableInVisualizer && this.placeholderFeature))) {\r\n return super.setLayers(layout);\r\n }\r\n this.setDefault();\r\n return super.setLayers(layout);\r\n }\r\n\r\n getArrayOfConditions() {\r\n return [{\r\n propName: 'ShowerSize',\r\n propValue: this.getParent().showerSize()\r\n }];\r\n }\r\n\r\n setDefault() {\r\n const filteredFeatures = this.features.filter(f => f.matchesMetaForArrayOfConditions(this.getArrayOfConditions()));\r\n if (!super.tryToSetTheSameFeature(filteredFeatures)) {\r\n const hardCodedDefault = filteredFeatures.find((feature) => {\r\n return feature.dbFeature.displayName && feature.dbFeature.displayName.includes(\"Sahara Autumn Porcelain Tile\");\r\n });\r\n const placeholderDefault = filteredFeatures.find((feature) => {\r\n return feature.dbFeature.displayName && feature.dbFeature.displayName.includes(\"laceholder\");\r\n });\r\n this.activeFeature = hardCodedDefault || filteredFeatures[0];\r\n this.placeholderFeature = placeholderDefault || null;\r\n this.setShadowFeature();\r\n }\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n if (this.getParent().activeSubType() === Shower.Type.Custom) {\r\n const zIndex = zIndexes.Shower.Custom60in.Floor;\r\n const zIndex2 = zIndexes.Shower.Custom60in.FloorShadow;\r\n if (zIndexes && this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndex;\r\n }\r\n if (zIndexes && this.placeholderFeature) {\r\n this.placeholderFeature.layer.zIndex = zIndex;\r\n }\r\n if(zIndexes && this.shadowFeature) {\r\n this.shadowFeature.layer.zIndex = zIndex2;\r\n }\r\n }\r\n }\r\n}\r\n","import DesignNavigationItem from \"../../../../visComponents/designNavigationItem\";\r\nimport {IntermediatePart} from \"../../parts/intermediatePart\";\r\nimport {ShowerBodyType} from \"../../constants\";\r\nimport {Shower} from \"../../parts/shower\";\r\nimport { getMetadataByDimensions } from \"../../../../../misc/utils\";\r\nimport {Vanity} from \"../../parts/vanity\";\r\nimport {ShowerTubCombo} from \"../../parts/showerTubCombo\";\r\nimport {getFeatureIsLocked} from \"../../../../../misc/helpers\";\r\nimport store from \"../../../../../store\";\r\nimport {toggleNotCompatibleView} from \"../../../../../actions/selectionFunctions\";\r\n\r\nexport default class Threshold extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'threshold';\r\n this.partName = 'Threshold';\r\n this.translateId = \"visualizer.bathroom.shower.threshold\";\r\n this.homePageTitle = 'Threshold';\r\n this.dbName = 'ShowerPan';\r\n this.isStoneFeature = true;\r\n this.selectedByUser = false;\r\n this.shadowName = \"Pan\";\r\n this.layerPriority = 7;\r\n }\r\n\r\n applyFeatureIfNotCompatible() {\r\n const parent = this.getParent();\r\n const shower = parent.getParent();\r\n shower.showerFloorIsActive = true;\r\n if (shower.layout && shower.showerTubComboIsActive()) {\r\n const comboPart = shower.layout.parts[ShowerTubCombo.id];\r\n comboPart.showerTubComboIsActive = false;\r\n }\r\n }\r\n\r\n handleClick(ignoreLocked) {\r\n super.handleClick(ignoreLocked);\r\n if (this.notAvailableInVisualizer || getFeatureIsLocked(this)) {\r\n return\r\n }\r\n const parent = this.getParent();\r\n const shower = parent.getParent();\r\n if ((!shower.showerFloorIsActive || shower.showerTubComboIsActive()) && !window.location.hash.includes(\"visualizer\")) {\r\n store.dispatch(toggleNotCompatibleView(true));\r\n return;\r\n }\r\n\r\n this.applyFeatureIfNotCompatible();\r\n\r\n this.getParent().selectedByUser = true;\r\n const showerFloor = shower.showerFloor;\r\n if (showerFloor && !showerFloor.selectedByUser) {\r\n const showerFloorAvailableFeatures = showerFloor.navigationSubItems();\r\n const currentThresholdName = this.getSplittedFeatureName();\r\n const sameShowerFloor = showerFloorAvailableFeatures.find(navItemFloor => {\r\n return navItemFloor.part.getSplittedFeatureName() === currentThresholdName\r\n });\r\n if (sameShowerFloor) {\r\n super.handleClick.call(sameShowerFloor.part);\r\n showerFloor.selectedByUser = false;\r\n }\r\n }\r\n }\r\n\r\n load(dbFeature) {\r\n if (dbFeature.metaData) {\r\n if(Array.isArray(dbFeature.metaData[\"EX L\"])) {\r\n if (dbFeature.metaData[\"EX L\"].includes(\"Full\") && !dbFeature.metaData[\"EX L\"].includes(\"Pony\")) {\r\n dbFeature.metaData[\"EX L\"].push(\"Pony\");\r\n } else if (dbFeature.metaData[\"EX L\"].includes(\"Pony\") && !dbFeature.metaData[\"EX L\"].includes(\"Full\")) {\r\n dbFeature.metaData[\"EX L\"].push(\"Full\");\r\n }\r\n } else if (!dbFeature.metaData[\"EX L\"] && Array.isArray(dbFeature.metaData[\"ShowerSize\"]) && dbFeature.metaData[\"ShowerSize\"][0] === \"30in\"\r\n && Array.isArray(dbFeature.s3Bindings) && dbFeature.s3Bindings[0] && dbFeature.s3Bindings[0].layout === \"SM\") {\r\n dbFeature.metaData[\"EX L\"] = [\"Full\", \"Pony\"];\r\n }\r\n }\r\n return super.load_(dbFeature, new Threshold())\r\n }\r\n\r\n navigationSubItems(filters, searchText) {\r\n const filteredAvailableFeatures = super.getFeaturesBySearchText(super.getFilteredFeaturesByFilters(filters), searchText);\r\n const featuresToDisplay = super.navigationSubItemsWithFilterMultipleConditions(this.getArrayOfConditions(), filteredAvailableFeatures);\r\n return featuresToDisplay.map(_ => new DesignNavigationItem(_.featureName, _));\r\n }\r\n\r\n setLayers(layout) {\r\n\r\n if (this.getParent().showerTubComboIsActive() || !this.getParent().showerFloorIsActive) {\r\n super.hideLayers();\r\n return;\r\n }\r\n\r\n if (this.getParent().customBodyType === ShowerBodyType.Door) {\r\n const showerDoorParent = this.getParent().showerDoor;\r\n if (showerDoorParent && showerDoorParent.activeFeature) {\r\n const currentShowerPanCondition = showerDoorParent.activeFeature.metaData[\"ShowerPan\"];\r\n if (!currentShowerPanCondition || (currentShowerPanCondition && !currentShowerPanCondition.includes(\"Threshold\"))) {\r\n super.hideLayers();\r\n return;\r\n }\r\n }\r\n }\r\n const conditions = this.getArrayOfConditions();\r\n if (!this.shadowFeature || (this.shadowFeature && !this.shadowFeature.matchesMetaForArrayOfConditions(conditions))) {\r\n this.setShadowFeature();\r\n }\r\n if (this.activeFeature && (this.activeFeature.matchesMetaForArrayOfConditions(conditions)\r\n || (this.activeFeature.notAvailableInVisualizer && this.placeholderFeature))) {\r\n return super.setLayers(layout);\r\n }\r\n this.setDefault();\r\n return super.setLayers(layout);\r\n }\r\n\r\n getArrayOfConditions() {\r\n const layout = this.getParent().layout;\r\n const showerSize = this.getParent().showerSize();\r\n let showerDimensions = getMetadataByDimensions(this.getParent().showerDimensions());\r\n\r\n const vanity = layout.parts[Vanity.id];\r\n let counterTopSize = vanity.counterTopSize();\r\n if (counterTopSize === '72in' && layout.type === 1 && (showerDimensions !== \"Full\" || showerDimensions !== \"Pony\")) {\r\n showerDimensions = \"Full\"\r\n }\r\n\r\n return [{\r\n propName: 'ShowerSize',\r\n propValue: showerSize\r\n }, {\r\n propName: 'EX L',\r\n propValue: showerDimensions\r\n }];\r\n }\r\n\r\n setDefault() {\r\n const filteredFeatures = this.features.filter(f => f.matchesMetaForArrayOfConditions(this.getArrayOfConditions()));\r\n if (!super.tryToSetTheSameFeature(filteredFeatures)) {\r\n const hardCodedDefault = filteredFeatures.find((feature) => {\r\n return feature.dbFeature.displayName && feature.dbFeature.displayName.includes(\"Sahara Autumn Porcelain Tile\");\r\n });\r\n const placeholderDefault = filteredFeatures.find((feature) => {\r\n return feature.dbFeature.displayName && feature.dbFeature.displayName.includes(\"laceholder\");\r\n });\r\n this.activeFeature = hardCodedDefault || filteredFeatures[0];\r\n this.placeholderFeature = placeholderDefault || null;\r\n this.setShadowFeature();\r\n }\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n if (this.getParent().activeSubType() === Shower.Type.Custom) {\r\n const zIndex = zIndexes.Shower.Custom60in.Threshold;\r\n const zIndex2 = zIndexes.Shower.Custom60in.ThresholdShadow;\r\n if (zIndexes && this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndex;\r\n }\r\n if (zIndexes && this.placeholderFeature) {\r\n this.placeholderFeature.layer.zIndex = zIndex;\r\n }\r\n if(zIndexes && this.shadowFeature) {\r\n this.shadowFeature.layer.zIndex = zIndex2;\r\n }\r\n }\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../parts/intermediatePart\";\r\n\r\nexport default class ShowerDrain extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'shower_drain';\r\n this.partName = 'Shower Drain';\r\n this.translateId = \"visualizer.bathroom.shower.shower_drain\";\r\n this.homePageTitle = 'Shower Drain';\r\n this.visible = false;\r\n this.layerPriority = 14;\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new ShowerDrain())\r\n }\r\n\r\n setLayers(layout) {\r\n const showerParent = this.getParent();\r\n if (!showerParent.showerFloorIsActive || showerParent.showerTubComboIsActive()) {\r\n super.hideLayers();\r\n return;\r\n }\r\n if (this.activeFeature && (this.activeFeature.matchesMetaForArrayOfConditions(this.getArrayOfConditions())\r\n || (this.activeFeature.notAvailableInVisualizer && this.placeholderFeature))) {\r\n return super.setLayers(layout);\r\n }\r\n this.setDefault();\r\n return super.setLayers(layout);\r\n }\r\n\r\n getArrayOfConditions() {\r\n const showerSize = this.getParent().showerSize();\r\n return [{\r\n propName: 'ShowerSize',\r\n propValue: showerSize\r\n }];\r\n }\r\n\r\n setDefault() {\r\n const filteredFeatures = this.features.filter(f => f.matchesMetaForArrayOfConditions(this.getArrayOfConditions()));\r\n this.activeFeature = filteredFeatures[0];\r\n this.placeholderFeature = filteredFeatures[0];\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n const zIndex = zIndexes.Shower.Custom60in.ShowerDrain;\r\n if (zIndexes && this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndex;\r\n }\r\n if (zIndexes && this.placeholderFeature) {\r\n this.placeholderFeature.layer.zIndex = zIndex;\r\n }\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../parts/intermediatePart\";\r\nimport {ShowerTubCombo} from \"../../parts/showerTubCombo\";\r\nimport DesignNavigationItem from \"../../../../visComponents/designNavigationItem\";\r\nimport {Shower} from \"../../parts/shower\";\r\n\r\nexport default class ShowerHead extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'shower_head';\r\n this.translateId = \"visualizer.bathroom.shower.shower_head\";\r\n this.partName = 'Shower Head';\r\n this.layerPriority = 4;\r\n this.canBeDisabled = true;\r\n if (isChild) {\r\n this.previouslySelectedFeatures = {\r\n LG: {},\r\n SM: {}\r\n };\r\n }\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new ShowerHead());\r\n }\r\n\r\n setLayers(layout) {\r\n\r\n const showerTubCombo = this.getParent().layout.parts[ShowerTubCombo.id];\r\n\r\n if (this.getParent().showerTubComboIsActive() && showerTubCombo && showerTubCombo.walkInTub\r\n && showerTubCombo.bottomTub === showerTubCombo.walkInTub.bottomTubId) {\r\n super.hideLayers();\r\n return;\r\n }\r\n if (this.activeFeature && (this.activeFeature.matchesMetaForArrayOfConditions(this.getArrayOfConditions())\r\n || (this.activeFeature.notAvailableInVisualizer && this.placeholderFeature))) {\r\n return super.setLayers(layout);\r\n }\r\n this.setDefault();\r\n return super.setLayers(layout);\r\n }\r\n\r\n navigationSubItems(filters, searchText) {\r\n const filteredAvailableFeatures = super.getFeaturesBySearchText(super.getFilteredFeaturesByFilters(filters), searchText);\r\n const featuresToDisplay = super.navigationSubItemsWithFilterMultipleConditions(this.getArrayOfConditions(), filteredAvailableFeatures);\r\n return featuresToDisplay.map(_ => new DesignNavigationItem(_.featureName, _));\r\n }\r\n\r\n getArrayOfConditions() {\r\n const showerParent = this.getParent();\r\n const activeShowerPartId = showerParent.showerTubComboIsActive() ? ShowerTubCombo.id : Shower.id;\r\n const showerSize = showerParent.layout.parts[activeShowerPartId].showerSize();\r\n return [{\r\n propName: \"Shower\",\r\n propValue: showerParent.showerTubComboIsActive()\r\n ? [\"Tub\"]\r\n : showerParent.isComplete() ? \"Complete\" : \"Custom\"\r\n }, {\r\n propName: 'ShowerSize',\r\n propValue: showerSize\r\n }]\r\n }\r\n\r\n setDefault() {\r\n const shower = this.getParent();\r\n const currentActiveFeature = this.activeFeature;\r\n const filteredFeatures = this.features.filter(f => f.matchesMetaForArrayOfConditions(this.getArrayOfConditions()));\r\n if (!super.tryToSetTheSameFeature(filteredFeatures)) {\r\n this.setDefaultAccordingToPreviousSelect(shower, filteredFeatures, \"Brantford\");\r\n }\r\n this.rememberPreviousSelection(shower, currentActiveFeature);\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n const ShowerType = this.getParent().activeSubType() === Shower.Type.Custom || this.getParent().showerTubComboIsActive()\r\n ? 'Custom60in'\r\n : 'Steam60in';\r\n if (zIndexes && this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndexes.Shower[ShowerType].ShowerHead;\r\n }\r\n if(zIndexes && this.placeholderFeature) {\r\n this.placeholderFeature.layer.zIndex = zIndexes.Shower[ShowerType].ShowerHead;\r\n }\r\n }\r\n}\r\n","import find from \"lodash/find\";\r\n\r\nimport {Part} from \"./part\";\r\nimport {PartMenuType} from \"../../../visComponents/constants\";\r\nimport {IntermediatePart} from \"./intermediatePart\";\r\n\r\nexport default class GlobalShadow extends Part {\r\n static id = 'Global Shadow';\r\n\r\n constructor() {\r\n super(true, false, PartMenuType.Simple);\r\n this.partId = 'global_shadow';\r\n this.menuType = PartMenuType.Simple;\r\n this.partName = 'Global Shadow';\r\n }\r\n\r\n load(dbFeature) {\r\n let part = null;\r\n switch (dbFeature.groupName) {\r\n case \"Global Shadow\":\r\n part = new GlobalShadowBody();\r\n break;\r\n }\r\n if (part) {\r\n part.getParent = () => this;\r\n if (!this.categoryEnabled) {\r\n this.categoryEnabled = true\r\n }\r\n part.load(dbFeature);\r\n return true\r\n }\r\n return false\r\n }\r\n\r\n setLayers(layout) {\r\n const layers = [];\r\n if (this.activeFeature) {\r\n this.activeFeature.setLayers(layout);\r\n this.activeFeature.layer.addTo(layers);\r\n }\r\n return layers;\r\n }\r\n\r\n setDefault() {\r\n this.activeFeature = this.features[0];\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n if (zIndexes && this.activeFeature) {\r\n this.activeFeature.setZIndex(zIndexes);\r\n }\r\n }\r\n\r\n}\r\n\r\nclass GlobalShadowBody extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n\r\n this.partName = 'Global Shadow Body';\r\n }\r\n\r\n load(dbFeature) {\r\n super.load_.call(this.getParent(), dbFeature, this, false);\r\n }\r\n\r\n setLayers(layout) {\r\n // const s3Binding = find(this.dbFeature.s3Bindings, {entityID: this.featureDefinitionId(this)});\r\n let s3Binding = find(this.dbFeature.s3Bindings, {entityID: this.featureDefinitionId(this), layout: layout.getCurrentLayoutAbbreviation()});\r\n if (!s3Binding) {\r\n s3Binding = find(this.dbFeature.s3Bindings, {entityID: this.featureDefinitionId(this)});\r\n }\r\n this.layer.fromS3Binding(s3Binding);\r\n }\r\n\r\n setDefault() {\r\n this.activeFeature = this.features[0];\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n if(zIndexes)\r\n this.layer.zIndex = zIndexes.Global_Shadow_Overlay;\r\n }\r\n}\r\n","import DesignNavigationItem from \"../../../../visComponents/designNavigationItem\";\r\nimport {IntermediatePart} from \"../../parts/intermediatePart\";\r\nimport {Shower} from \"../../parts/shower\";\r\nimport {LayoutAbbreviation} from \"../../constants\";\r\nimport {ShowerTubCombo} from \"../../parts/showerTubCombo\";\r\n\r\nexport default class PonyWall extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'pony_wall';\r\n this.isPonyWallPart = true;\r\n this.visible = true;\r\n this.partName = 'Pony Wall';\r\n this.translateId = \"visualizer.bathroom.walls.pony_wall\";\r\n this.isStoneFeature = true;\r\n this.disableOnHomeSections = true;\r\n this.shadowName = \"Pony Wall\";\r\n this.activeFeatureBeforeAllWalls = null;\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new PonyWall());\r\n }\r\n\r\n disabledClick() {\r\n\r\n }\r\n\r\n handleClick(ignoreLocked, clickFrom) {\r\n super.handleClick(ignoreLocked);\r\n\r\n const wallParent = this.getParent().getParent();\r\n\r\n const layout = wallParent.layout;\r\n const layoutAbr = layout.getCurrentLayoutAbbreviation();\r\n\r\n if (layoutAbr === LayoutAbbreviation.Large) {\r\n if (clickFrom !== 'context' && clickFrom !== 'all_walls') {\r\n const wallExLFeature = wallParent.wallExL && wallParent.wallExL.features.find(feature => {\r\n return feature.partName === this.partName\r\n });\r\n if (wallExLFeature) {\r\n wallExLFeature.handleClick(ignoreLocked, 'context');\r\n }\r\n }\r\n }\r\n\r\n this.featureClicked();\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n const zIndex = zIndexes.Shower.Custom60in.PonyWall;\r\n const zIndex2 = zIndexes.Shower.Custom60in.PonyWallShadow;\r\n if (zIndexes && this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndex;\r\n }\r\n if (zIndexes && this.placeholderFeature) {\r\n this.placeholderFeature.layer.zIndex = zIndex;\r\n }\r\n if (zIndexes && this.shadowFeature) {\r\n this.shadowFeature.layer.zIndex = zIndex2;\r\n }\r\n }\r\n\r\n getAvailableFeatures(filters) {\r\n const filteredAvailableFeatures = super.getFilteredFeaturesByFilters(filters);\r\n return super.navigationSubItemsWithFilterMultipleConditions(this.getArrayOfConditions(), filteredAvailableFeatures);\r\n }\r\n\r\n navigationSubItems(filters, searchText) {\r\n const filteredAvailableFeatures = super.getFeaturesBySearchText(super.getFilteredFeaturesByFilters(filters), searchText);\r\n const featuresToDisplay = super.navigationSubItemsWithFilterMultipleConditions(this.getArrayOfConditions(), filteredAvailableFeatures);\r\n return featuresToDisplay.map(_ => new DesignNavigationItem(_.featureName, _));\r\n }\r\n\r\n setLayers(layout) {\r\n const shower = this.getParent().layout.parts[Shower.id];\r\n const showerParent = shower.getActiveShowerGroup();\r\n if (showerParent.showerDimensions() !== \"Pony\" || (!shower.showerTubComboIsActive()\r\n && shower.showerBody.disabled)) {\r\n super.hideLayers();\r\n return;\r\n }\r\n\r\n if (!this.shadowFeature\r\n || (this.shadowFeature && !this.shadowFeature.matchesMetaForArrayOfConditions(this.getArrayOfConditions()))) {\r\n this.setShadowFeature();\r\n }\r\n\r\n if (this.activeFeature && (this.activeFeature.matchesMetaForArrayOfConditions(this.getArrayOfConditions())\r\n || (this.activeFeature.notAvailableInVisualizer && this.placeholderFeature))) {\r\n return super.setLayers(layout);\r\n }\r\n\r\n this.setDefault(layout);\r\n return super.setLayers(layout);\r\n }\r\n\r\n getArrayOfConditions() {\r\n const parent = this.getParent();\r\n const layout = parent.layout;\r\n const layoutAbr = layout.getCurrentLayoutAbbreviation();\r\n if (layoutAbr === LayoutAbbreviation.Small){\r\n const activeShower = parent.showerTubComboIsActive()\r\n ? layout.parts[ShowerTubCombo.id]\r\n : layout.parts[Shower.id];\r\n const showerSize = activeShower.showerSize(); // 60in, 30in, ..\r\n // const showerDimensions = activeShower.showerDimensions(); // 15x4, Pony, ...\r\n return [{\r\n propName: 'Shower',\r\n propValue: 'Custom'\r\n }, {\r\n propName: 'Size',\r\n propValue: showerSize\r\n }];\r\n }\r\n\r\n return []\r\n }\r\n\r\n setDefault(layout) {\r\n if (!layout)\r\n return ;\r\n\r\n const layoutAbr = layout.getCurrentLayoutAbbreviation();\r\n const filteredFeatures = this.features.filter(f => f.matchesMetaForArrayOfConditions(this.getArrayOfConditions()));\r\n if (!super.tryToSetTheSameFeature(filteredFeatures, null, null, true)) {\r\n let hardCodedName = '';\r\n switch (layoutAbr) {\r\n case LayoutAbbreviation.Small:\r\n hardCodedName = 'Pony Wall - Demo Model';\r\n break;\r\n case LayoutAbbreviation.Large:\r\n hardCodedName = 'Pony Wall - Model[For=Shower=(Custom)=Size=(30in_60in)]';\r\n break;\r\n default:\r\n console.error('PonyWall - Unknown Layout Abr', layoutAbr);\r\n }\r\n\r\n const hardCodedDefault = filteredFeatures.find((feature) => {\r\n return feature.dbFeature.displayName &&\r\n feature.dbFeature.displayName.includesCI(hardCodedName);\r\n });\r\n const placeholderDefault = filteredFeatures.find((feature) => {\r\n return feature.dbFeature.displayName && feature.dbFeature.displayName.includesCI(\"placeholder\");\r\n });\r\n this.activeFeature = hardCodedDefault || filteredFeatures[0];\r\n this.placeholderFeature = placeholderDefault || null;\r\n this.setShadowFeature();\r\n }\r\n }\r\n\r\n // changeLayout(layoutType) {\r\n changeLayout() {\r\n // this.activeFeature = null;\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../parts/intermediatePart\";\r\n\r\nexport default class WallA extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'wall_a';\r\n this.activeFeatureBeforeAllWalls = null;\r\n this.partName = 'Wall A';\r\n this.translateId = \"visualizer.bathroom.walls.wall_a\";\r\n this.allWallsApplied = true;\r\n this.isStoneFeature = true;\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new WallA());\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n if(zIndexes && this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndexes.Wall_A;\r\n if (this.placeholderFeature) {\r\n this.placeholderFeature.layer.zIndex = zIndexes.Wall_A;\r\n }\r\n }\r\n }\r\n\r\n // handleClick(clickFrom) {\r\n // if (clickFrom === 'simpleWall' || clickFrom === 'showerWall' || clickFrom === 'vanityWall') {\r\n // const parent = this.getParent();\r\n // if (clickFrom === 'simpleWall') {\r\n // parent.allWallsApplied = true;\r\n // }\r\n // parent.activeFeatureBeforeAllWalls = parent.activeFeature;\r\n // if (!parent.placeholderChanged) {\r\n // parent.rememberToRecoverPlaceholder = true;\r\n // }\r\n // }\r\n // super.handleClick();\r\n // }\r\n\r\n // unCheckAllWalls(clickFrom, navPart) {\r\n // if (clickFrom === 'simpleWall') {\r\n // this.allWallsApplied = false;\r\n // }\r\n // if (!(navPart instanceof WallA)) {\r\n // if (this.activeFeatureBeforeAllWalls) {\r\n // this.activeFeatureBeforeAllWalls.handleClick();\r\n // this.activeFeatureBeforeAllWalls = null;\r\n // }\r\n // if (this.rememberToRecoverPlaceholder) {\r\n // this.placeholderChanged = false;\r\n // this.rememberToRecoverPlaceholder = false;\r\n // }\r\n // }\r\n // }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../parts/intermediatePart\";\r\n\r\nexport default class WallB extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'wall_b';\r\n this.activeFeatureBeforeAllWalls = null;\r\n this.partName = 'Wall B';\r\n this.translateId = \"visualizer.bathroom.walls.wall_b\";\r\n this.allWallsApplied = true;\r\n this.isStoneFeature = true;\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new WallB());\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n if(zIndexes && this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndexes.Wall_B;\r\n if (this.placeholderFeature) {\r\n this.placeholderFeature.layer.zIndex = zIndexes.Wall_B;\r\n }\r\n }\r\n }\r\n\r\n // handleClick(clickFrom) {\r\n // if (clickFrom === 'simpleWall' || clickFrom === 'showerWall' || clickFrom === 'vanityWall') {\r\n // const parent = this.getParent();\r\n // if (clickFrom === 'simpleWall') {\r\n // parent.allWallsApplied = true;\r\n // }\r\n // parent.activeFeatureBeforeAllWalls = parent.activeFeature;\r\n // if (!parent.placeholderChanged) {\r\n // parent.rememberToRecoverPlaceholder = true;\r\n // }\r\n // }\r\n // super.handleClick();\r\n // }\r\n\r\n // unCheckAllWalls(clickFrom, navPart) {\r\n // if (clickFrom === 'simpleWall') {\r\n // this.allWallsApplied = false;\r\n // }\r\n // if (!(navPart instanceof WallB)) {\r\n // if (this.activeFeatureBeforeAllWalls) {\r\n // this.activeFeatureBeforeAllWalls.handleClick();\r\n // this.activeFeatureBeforeAllWalls = null;\r\n // }\r\n // if (this.rememberToRecoverPlaceholder) {\r\n // this.placeholderChanged = false;\r\n // this.rememberToRecoverPlaceholder = false;\r\n // }\r\n // }\r\n // }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../parts/intermediatePart\";\r\n\r\nexport default class WallC extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'wall_c';\r\n this.activeFeatureBeforeAllWalls = null;\r\n this.partName = 'Wall C';\r\n this.translateId = \"visualizer.bathroom.walls.wall_c\";\r\n this.allWallsApplied = true;\r\n this.isStoneFeature = true;\r\n this.homePageTitle = \"Walls\"\r\n }\r\n\r\n load(dbFeature) {\r\n if (dbFeature.displayName.includes(\"laceholder\")) { // exclude ALL s3binding since WALL C can not be ALL (only LG or SM)\r\n const layoutAbr = this.getParent().layout.getCurrentLayoutAbbreviation();\r\n dbFeature.s3Bindings = dbFeature.s3Bindings && dbFeature.s3Bindings.filter(binding => {\r\n return (binding.layout !== \"ALL\") && (binding.layout === layoutAbr)\r\n });\r\n if (!dbFeature.s3Bindings || !dbFeature.s3Bindings.length) {\r\n return false\r\n }\r\n }\r\n return super.load_(dbFeature, new WallC());\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n if(zIndexes && this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndexes.Wall_C;\r\n if (this.placeholderFeature) {\r\n this.placeholderFeature.layer.zIndex = zIndexes.Wall_C;\r\n }\r\n }\r\n }\r\n\r\n // handleClick(clickFrom) {\r\n // if (clickFrom === 'simpleWall' || clickFrom === 'showerWall' || clickFrom === 'vanityWall') {\r\n // const parent = this.getParent();\r\n // if (clickFrom === 'simpleWall') {\r\n // parent.allWallsApplied = true;\r\n // }\r\n // parent.activeFeatureBeforeAllWalls = parent.activeFeature;\r\n // if (!parent.placeholderChanged) {\r\n // parent.rememberToRecoverPlaceholder = true;\r\n // }\r\n // }\r\n // super.handleClick();\r\n // }\r\n\r\n // unCheckAllWalls(clickFrom, navPart) {\r\n // if (clickFrom === 'simpleWall') {\r\n // this.allWallsApplied = false;\r\n // }\r\n // if (!(navPart instanceof WallC)) {\r\n // if (this.activeFeatureBeforeAllWalls) {\r\n // this.activeFeatureBeforeAllWalls.handleClick();\r\n // this.activeFeatureBeforeAllWalls = null;\r\n // }\r\n // if (this.rememberToRecoverPlaceholder) {\r\n // this.placeholderChanged = false;\r\n // this.rememberToRecoverPlaceholder = false;\r\n // }\r\n // }\r\n // }\r\n\r\n}\r\n","import {LayoutAbbreviation} from \"../../constants\";\r\nimport {iIncludes} from \"../../../../../misc/utils\";\r\nimport {ShowerTubCombo} from \"../../parts/showerTubCombo\";\r\nimport {Shower} from \"../../parts/shower\";\r\nimport {Vanity} from \"../../parts/vanity\";\r\nimport ExternallWall from \"./externallWall\";\r\n\r\nexport default class WallExR extends ExternallWall {\r\n\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = \"right_shower_wall\";\r\n this.partName = \"Right Shower Wall\";\r\n this.translateId = \"visualizer.bathroom.walls.right_shower_wall\";\r\n this.wallName = \"ExtrusionWallRight\";\r\n this.shadowName = \"Popout\";\r\n this.dbName = \"EX R\";\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new WallExR());\r\n }\r\n\r\n getShadowConditions() {\r\n return this.getArrayOfConditions()\r\n }\r\n\r\n getDefaultFeature() {\r\n const layout = this.layout;\r\n const layoutAbr = layout.getCurrentLayoutAbbreviation();\r\n const filteredFeatures = this.getAvailableFeatures();\r\n\r\n let hardCodedName = '';\r\n switch (layoutAbr) {\r\n case LayoutAbbreviation.Small:\r\n hardCodedName = 'Rafter';\r\n break;\r\n case LayoutAbbreviation.Large:\r\n hardCodedName = 'Sahara Autumn Porcelain Tile';\r\n break;\r\n }\r\n const hardCodedDefault = filteredFeatures.find((feature) => {\r\n return iIncludes(feature.dbFeature.displayName, hardCodedName);\r\n });\r\n return hardCodedDefault || filteredFeatures[0];\r\n }\r\n\r\n getArrayOfConditions() {\r\n\r\n const wallParent = this.getParent();\r\n const layout = wallParent.layout;\r\n const layoutAbr = layout.getCurrentLayoutAbbreviation();\r\n\r\n const activeShowerPartId = wallParent.showerTubComboIsActive() ? ShowerTubCombo.id : Shower.id;\r\n const showerSize = wallParent.layout.parts[activeShowerPartId].showerSize();\r\n\r\n const conditions = [{\r\n propName: 'ShowerSize',\r\n propValue: showerSize\r\n }];\r\n\r\n if (layoutAbr === LayoutAbbreviation.Small) {\r\n let counterTopSize = layout.parts[Vanity.id].counterTopSize();\r\n conditions.push({\r\n propName: 'CountertopSize',\r\n propValue: counterTopSize\r\n });\r\n }\r\n\r\n return conditions;\r\n }\r\n}\r\n","import {ShowerTubCombo} from \"../../parts/showerTubCombo\";\r\nimport {Shower} from \"../../parts/shower\";\r\nimport {Vanity} from \"../../parts/vanity\";\r\nimport {LayoutAbbreviation} from \"../../constants\";\r\nimport {getMetadataByDimensions} from \"../../../../../misc/utils\";\r\nimport ExternallWall from \"./externallWall\";\r\n\r\nexport default class WallExL extends ExternallWall {\r\n\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = \"left_shower_wall\";\r\n this.partName = \"Left Shower Wall\";\r\n this.translateId = \"visualizer.bathroom.walls.left_shower_wall\";\r\n this.wallName = \"ExtrusionWallLeft\";\r\n this.shadowName = \"Divider Wall\";\r\n this.shadowSmallRoomName = \"EX L\";\r\n this.dbName = \"EX L\";\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new WallExL());\r\n }\r\n\r\n getArrayOfConditions() {\r\n const parent = this.getParent();\r\n const layout = parent.layout;\r\n const layoutAbr = layout.getCurrentLayoutAbbreviation();\r\n\r\n const activeShower = parent.showerTubComboIsActive()\r\n ? layout.parts[ShowerTubCombo.id]\r\n : layout.parts[Shower.id];\r\n\r\n const showerSize = activeShower.showerSize();\r\n const showerDimensions = activeShower.showerDimensions();\r\n\r\n const showerValue = (showerSize === \"60in\" || showerSize === \"30in\") ? \"Custom\" : showerSize;\r\n let counterTopSize = layout.parts[Vanity.id].counterTopSize();\r\n\r\n counterTopSize = (counterTopSize === '72in' || showerDimensions === \"30X8\") ? '72in' : counterTopSize;\r\n\r\n if (layoutAbr === LayoutAbbreviation.Small) {\r\n let wallWidth = (showerDimensions === '30X8') ? 'Thick' : 'Half';\r\n return [{\r\n propName: 'Shower',\r\n propValue: showerSize\r\n }, {\r\n propName: 'Width',\r\n propValue: wallWidth\r\n }];\r\n }\r\n\r\n return [{\r\n propName: 'Shower',\r\n propValue: showerValue\r\n }, {\r\n propName: 'CountertopSize',\r\n propValue: counterTopSize\r\n }];\r\n\r\n }\r\n\r\n getShadowConditions() {\r\n const layout = this.getParent().layout;\r\n const conditions = this.getArrayOfConditions();\r\n const showerComboParent = layout.parts[ShowerTubCombo.id];\r\n const showerParent = layout.parts[Shower.id];\r\n const layoutAbr = layout.getCurrentLayoutAbbreviation();\r\n\r\n let showerDimensions = showerComboParent.showerTubComboIsActive\r\n ? showerComboParent.showerDimensions()\r\n : showerParent.showerDimensions();\r\n\r\n showerDimensions = getMetadataByDimensions(showerDimensions);\r\n\r\n if (!showerComboParent.showerTubComboIsActive && showerDimensions === \"Half\") {\r\n if (showerParent.showerFloorIsActive) {\r\n conditions.push({\r\n propName: \"ShowerPan\",\r\n propValue: [\"Threshold\"]\r\n })\r\n } else if (showerParent.showerPanCombo && showerParent.showerPanCombo.activeFeature && layoutAbr !== LayoutAbbreviation.Small) {\r\n let showerPanCondition = showerParent.showerPanCombo.activeFeature.metaData[\"ShowerPan\"];\r\n // console.log('showerPanCondition', showerPanCondition);\r\n conditions.push({\r\n propName: \"ShowerPan\",\r\n propValue: showerPanCondition\r\n })\r\n }\r\n }\r\n // console.log('shadow conditions', conditions);\r\n return conditions\r\n }\r\n\r\n setShadowFeature() {\r\n const parentGroup = this.getParent();\r\n\r\n let filteredAvailableFeatures = [];\r\n if (parentGroup.shadows && parentGroup.shadows.features && parentGroup.shadows.features.length) {\r\n const layout = parentGroup.layout;\r\n const layoutAbr = layout.getCurrentLayoutAbbreviation();\r\n const shadowName = (layoutAbr === LayoutAbbreviation.Small) ? this.shadowSmallRoomName : this.shadowName;\r\n\r\n const filteredFeatures = parentGroup.shadows.features.filter((shadow) => {\r\n return Array.isArray(shadow.dbFeature.s3Bindings) && shadow.dbFeature.s3Bindings.some(binding => {\r\n return binding.layout === LayoutAbbreviation.All || binding.layout === layoutAbr\r\n })\r\n });\r\n const compatibleFeatures = filteredFeatures.filter(shadowFeature => {\r\n return shadowFeature.partName && shadowName && shadowFeature.partName === shadowName\r\n });\r\n filteredAvailableFeatures = this.navigationSubItemsWithFilterMultipleConditions(this.getArrayOfConditions(), compatibleFeatures);\r\n }\r\n this.shadowFeature = filteredAvailableFeatures.length ? filteredAvailableFeatures[0] : null;\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../parts/intermediatePart\";\r\nimport {Vanity} from \"../../parts/vanity\";\r\n\r\nexport default class VanityAccent extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = \"accent_wall\";\r\n this.partName = \"Accent Wall\";\r\n this.translateId = \"visualizer.bathroom.walls.accent_wall\";\r\n this.dbName = \"VanityAccent\";\r\n this.activeFeatureBeforeAllWalls = null;\r\n this.selectedByUser = false;\r\n this.visible = true;\r\n this.canBeDisabled = true;\r\n this.allWallsApplied = false;\r\n this.isStoneFeature = true;\r\n this.disabled = false;\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new VanityAccent());\r\n }\r\n\r\n navigationSubItems(filters, searchText) {\r\n const filteredAvailableFeatures = super.getFeaturesBySearchText(super.getFilteredFeaturesByFilters(filters), searchText);\r\n return super.navigationSubItemsWithFilter('CountertopSize', this.getParent().layout.parts[Vanity.id].counterTopSize(), filteredAvailableFeatures);\r\n }\r\n\r\n handleClick() {\r\n const wallParent = this.getParent().getParent();\r\n const vanityParent = wallParent.layout.parts[Vanity.id];\r\n if (vanityParent.vanityBacksplash && vanityParent.vanityBacksplash.canBeDisabled && !vanityParent.vanityBacksplash.placeholderChanged) {\r\n vanityParent.vanityBacksplash.disabled = true;\r\n }\r\n super.handleClick()\r\n }\r\n\r\n // handleClick(clickFrom) {\r\n // if (clickFrom === 'fromAllWalls') {\r\n // if (!this.getParent().vanityAccentSelectedByUser) {\r\n // super.handleClick();\r\n // }\r\n // } else {\r\n // this.getParent().handleChildClick(this);\r\n // this.getParent().vanityAccentSelectedByUser = true;\r\n // }\r\n //\r\n // }\r\n\r\n // handleClick(clickFrom) {\r\n // const parent = this.getParent();\r\n // if (clickFrom === 'simpleWall' || clickFrom === 'showerWall' || clickFrom === 'vanityWall') {\r\n // parent.activeFeatureBeforeAllWalls = parent.activeFeature;\r\n // if (!parent.placeholderChanged) {\r\n // parent.rememberToRecoverPlaceholder = true;\r\n // }\r\n // if (!parent.selectedByUser) {\r\n // super.handleClick();\r\n // }\r\n // } else {\r\n // super.handleClick();\r\n // parent.selectedByUser = true;\r\n // const wallB = this.getParent().getParent().layout.parts[\"Walls\"][\"wallB\"];\r\n // if (wallB.placeholderChanged && wallB.activeFeature.partName === this.partName) {\r\n // parent.selectedByUser = false;\r\n // }\r\n // }\r\n // this.featureClicked();\r\n // }\r\n //\r\n // unCheckAllWalls() {\r\n // if (!this.selectedByUser) {\r\n // const tempSelectedByUser = this.selectedByUser;\r\n // if (this.activeFeatureBeforeAllWalls) {\r\n // this.activeFeatureBeforeAllWalls.handleChildClick(this);\r\n // this.activeFeatureBeforeAllWalls = null;\r\n // }\r\n // this.selectedByUser = tempSelectedByUser;\r\n // if (this.rememberToRecoverPlaceholder) {\r\n // this.placeholderChanged = false;\r\n // this.rememberToRecoverPlaceholder = false;\r\n // }\r\n // }\r\n // }\r\n\r\n setDefault(layout) {\r\n const counterTopSize = this.getParent().layout.parts[Vanity.id].counterTopSize();\r\n const filteredFeatures = this.features && this.features.filter(f => f.matchesMetaForCondition('CountertopSize', counterTopSize)) || [];\r\n if (!super.tryToSetTheSameFeature(filteredFeatures)) {\r\n const hardCodedDefault = filteredFeatures.find((feature) => {\r\n return feature.dbFeature.displayName && feature.dbFeature.displayName.includes(\"Tan Hexagon\");\r\n });\r\n const placeholderDefault = filteredFeatures.find((feature) => {\r\n return feature.dbFeature.displayName && feature.dbFeature.displayName.includes(\"laceholder\");\r\n });\r\n this.activeFeature = hardCodedDefault || super.setDefault(layout) || filteredFeatures[0];\r\n this.placeholderFeature = placeholderDefault || super.setDefault(layout) || null;\r\n }\r\n }\r\n\r\n setLayers(layout) {\r\n const counterTopSize = this.getParent().layout.parts[Vanity.id].counterTopSize();\r\n if (this.activeFeature && (this.activeFeature.matchesMetaForCondition('CountertopSize', counterTopSize)\r\n || (this.activeFeature.notAvailableInVisualizer && this.placeholderFeature))) {\r\n return super.setLayers(layout);\r\n }\r\n\r\n this.setDefault();\r\n return super.setLayers(layout);\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n if (zIndexes && this.activeFeature) {\r\n // this.activeFeature.layer.zIndex = Z.layouts.Large.Wall_A_Accent_Mask;\r\n this.activeFeature.layer.zIndex = zIndexes.Wall_A_Accent_Mask;\r\n }\r\n if (zIndexes && this.placeholderFeature) {\r\n this.placeholderFeature.layer.zIndex = zIndexes.Wall_A_Accent_Mask;\r\n }\r\n }\r\n}\r\n","import snakeCase from \"lodash/snakeCase\";\r\n\r\nimport {Part} from \"./part\";\r\nimport {PartMenuType} from \"../../../visComponents/constants\";\r\nimport DesignNavigationItem from \"../../../visComponents/designNavigationItem\";\r\nimport NonVisualizerSubPart from \"../subparts/nonVisualizerSubPart\";\r\n\r\nexport default class Other extends Part {\r\n static id = 'Other';\r\n constructor() {\r\n super(true, false, PartMenuType.Complex);\r\n\r\n this.menuType = PartMenuType.Complex;\r\n this.partName = 'Other';\r\n this.categoryEnabled = false;\r\n }\r\n\r\n load(dbFeature) {\r\n // console.log(\"load other\", dbFeature.groupName);\r\n const partId = snakeCase(dbFeature.groupName);\r\n let relatedItem = this.relatedItems.find(relatedItem => relatedItem.partId === partId);\r\n if (!relatedItem) {\r\n relatedItem = new NonVisualizerSubPart(true, partId, dbFeature.groupName);\r\n this.relatedItems.push(relatedItem);\r\n }\r\n relatedItem.getParent = () => this;\r\n relatedItem.load(dbFeature);\r\n return true\r\n }\r\n\r\n navigationItem() {\r\n return new DesignNavigationItem('Other', this);\r\n }\r\n\r\n isSubTypeWithItems() {\r\n return false;\r\n }\r\n\r\n handleSubPartClick() {\r\n\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../parts/intermediatePart\";\r\nimport DesignNavigationItem from \"../../../../visComponents/designNavigationItem\";\r\nimport {ShowerTubCombo} from \"../../parts/showerTubCombo\";\r\nimport {Shower} from \"../../parts/shower\";\r\n\r\nexport default class LargeCornerSeat extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'large_corner_seat';\r\n this.partName = 'Large Corner Seat';\r\n this.translateId = \"visualizer.bathroom.accessories.large_corner_seat\";\r\n this.visible = true;\r\n this.canBeDisabled = true;\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new LargeCornerSeat());\r\n }\r\n\r\n // handleClick() {\r\n // const accessoriesParent = this.getParent().getParent();\r\n // accessoriesParent.caddie_type = \"corner_caddie\";\r\n // super.handleClick();\r\n // }\r\n\r\n navigationSubItems(filters, searchText) {\r\n const filteredAvailableFeatures = super.getFeaturesBySearchText(super.getFilteredFeaturesByFilters(filters), searchText);\r\n const featuresToDisplay = super.navigationSubItemsWithFilterMultipleConditions(this.getArrayOfConditions(), filteredAvailableFeatures);\r\n return featuresToDisplay.map(_ => new DesignNavigationItem(_.featureName, _));\r\n }\r\n\r\n setLayers(layout) {\r\n\r\n const showerParent = this.getParent().layout.parts[Shower.id];\r\n if (showerParent && showerParent.showerTubComboIsActive()) { // shower tub combo - remove\r\n super.hideLayers();\r\n return;\r\n }\r\n\r\n const conditions = this.getArrayOfConditions();\r\n if ((this.activeFeature && this.activeFeature.matchesMetaForArrayOfConditions(conditions)\r\n || (this.activeFeature && this.activeFeature.notAvailableInVisualizer && this.placeholderFeature))) {\r\n return super.setLayers(layout);\r\n }\r\n\r\n this.setDefault();\r\n return super.setLayers(layout);\r\n }\r\n\r\n getArrayOfConditions() {\r\n const accParent = this.getParent();\r\n const showerParent = accParent.layout.parts[Shower.id];\r\n const activeShowerPartId = showerParent && showerParent.showerTubComboIsActive() ? ShowerTubCombo.id : Shower.id;\r\n const showerSize = showerParent.layout.parts[activeShowerPartId].showerSize();\r\n return [{\r\n propName: 'ShowerSize',\r\n propValue: showerSize\r\n }]\r\n }\r\n\r\n setDefault() {\r\n const filteredFeatures = this.features.filter(f => f.matchesMetaForArrayOfConditions(this.getArrayOfConditions()));\r\n if (!super.tryToSetTheSameFeature(filteredFeatures, '', '', true)) {\r\n const placeholderDefault = filteredFeatures.find((feature) => {\r\n return feature.dbFeature.displayName && feature.dbFeature.displayName.includesCI(\" - Placeholder\");\r\n });\r\n this.activeFeature = filteredFeatures[0];\r\n this.placeholderFeature = placeholderDefault || null;\r\n }\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n const zIndex = zIndexes.Shower.Custom60in.LargeCornerSeat;\r\n if (zIndexes && this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndex;\r\n }\r\n if (zIndexes && this.placeholderFeature) {\r\n this.placeholderFeature.layer.zIndex = zIndex;\r\n }\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../parts/intermediatePart\";\r\nimport DesignNavigationItem from \"../../../../visComponents/designNavigationItem\";\r\nimport {ShowerTubCombo} from \"../../parts/showerTubCombo\";\r\nimport {Shower} from \"../../parts/shower\";\r\n\r\nexport default class SoapDish extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'soap_dish';\r\n this.partName = 'Soap Dish';\r\n this.translateId = \"visualizer.bathroom.accessories.soap_dish\";\r\n this.visible = true;\r\n this.canBeDisabled = true;\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new SoapDish());\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n const zIndex = zIndexes.Shower.Custom60in.SoapDish;\r\n if (zIndexes && this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndex;\r\n }\r\n if (zIndexes && this.placeholderFeature) {\r\n this.placeholderFeature.layer.zIndex = zIndex;\r\n }\r\n }\r\n\r\n navigationSubItems(filters, searchText) {\r\n const filteredAvailableFeatures = super.getFeaturesBySearchText(super.getFilteredFeaturesByFilters(filters), searchText);\r\n const featuresToDisplay = super.navigationSubItemsWithFilterMultipleConditions(this.getArrayOfConditions(), filteredAvailableFeatures);\r\n return featuresToDisplay.map(_ => new DesignNavigationItem(_.featureName, _));\r\n }\r\n\r\n setLayers(layout) {\r\n\r\n const showerParent = this.getParent().layout.parts[Shower.id];\r\n const showerComboParent = layout.parts[ShowerTubCombo.id];\r\n\r\n if (showerParent && showerComboParent && showerParent.showerTubComboIsActive() && showerComboParent.bottomTub === \"walk_in_tub\") {\r\n super.hideLayers();\r\n return;\r\n }\r\n\r\n const conditions = this.getArrayOfConditions();\r\n if ((this.activeFeature && this.activeFeature.matchesMetaForArrayOfConditions(conditions)\r\n || (this.activeFeature && this.activeFeature.notAvailableInVisualizer && this.placeholderFeature))) {\r\n return super.setLayers(layout);\r\n }\r\n\r\n this.setDefault();\r\n return super.setLayers(layout);\r\n }\r\n\r\n getArrayOfConditions() {\r\n const accParent = this.getParent();\r\n const showerParent = accParent.layout.parts[Shower.id];\r\n const activeShowerPartId = showerParent && showerParent.showerTubComboIsActive() ? ShowerTubCombo.id : Shower.id;\r\n const showerSize = showerParent.layout.parts[activeShowerPartId].showerSize();\r\n return [{\r\n propName: \"Shower\",\r\n propValue: showerParent.showerTubComboIsActive()\r\n ? [\"Tub\"]\r\n : showerParent.isComplete() ? \"Complete\" : \"Custom\"\r\n }, {\r\n propName: 'ShowerSize',\r\n propValue: showerSize\r\n }]\r\n }\r\n\r\n setDefault() {\r\n const filteredFeatures = this.features.filter(f => f.matchesMetaForArrayOfConditions(this.getArrayOfConditions()));\r\n if (!super.tryToSetTheSameFeature(filteredFeatures, '', '', true)) {\r\n const placeholderDefault = filteredFeatures.find((feature) => {\r\n return feature.dbFeature.displayName && feature.dbFeature.displayName.includesCI(\" - Placeholder\");\r\n });\r\n this.activeFeature = filteredFeatures[0];\r\n this.placeholderFeature = placeholderDefault || null;\r\n }\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../parts/intermediatePart\";\r\nimport DesignNavigationItem from \"../../../../visComponents/designNavigationItem\";\r\nimport {ShowerTubCombo} from \"../../parts/showerTubCombo\";\r\nimport {Shower} from \"../../parts/shower\";\r\n\r\nexport default class SmallCornerShelf extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'small_corner_shelf';\r\n this.partName = 'Small Corner Shelf';\r\n this.translateId = \"visualizer.bathroom.accessories.small_corner_shelf\";\r\n this.visible = true;\r\n this.canBeDisabled = true;\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new SmallCornerShelf());\r\n }\r\n\r\n handleClick() {\r\n const accessoriesParent = this.getParent().getParent();\r\n accessoriesParent.caddie_type = this.partId;\r\n super.handleClick();\r\n }\r\n\r\n navigationSubItems(filters, searchText) {\r\n const filteredAvailableFeatures = super.getFeaturesBySearchText(super.getFilteredFeaturesByFilters(filters), searchText);\r\n const featuresToDisplay = super.navigationSubItemsWithFilterMultipleConditions(this.getArrayOfConditions(), filteredAvailableFeatures);\r\n return featuresToDisplay.map(_ => new DesignNavigationItem(_.featureName, _));\r\n }\r\n\r\n setLayers(layout) {\r\n\r\n const accessoriesParent = this.getParent();\r\n if (accessoriesParent.caddie_type !== this.partId) {\r\n super.hideLayers();\r\n return;\r\n }\r\n\r\n const conditions = this.getArrayOfConditions();\r\n if ((this.activeFeature && this.activeFeature.matchesMetaForArrayOfConditions(conditions)\r\n || (this.activeFeature && this.activeFeature.notAvailableInVisualizer && this.placeholderFeature))) {\r\n return super.setLayers(layout);\r\n }\r\n\r\n this.setDefault();\r\n return super.setLayers(layout);\r\n }\r\n\r\n getArrayOfConditions() {\r\n const accParent = this.getParent();\r\n const showerParent = accParent.layout.parts[Shower.id];\r\n const activeShowerPartId = showerParent && showerParent.showerTubComboIsActive() ? ShowerTubCombo.id : Shower.id;\r\n const showerSize = showerParent.layout.parts[activeShowerPartId].showerSize();\r\n return [{\r\n propName: 'ShowerSize',\r\n propValue: showerSize\r\n }]\r\n }\r\n\r\n setDefault() {\r\n const filteredFeatures = this.features.filter(f => f.matchesMetaForArrayOfConditions(this.getArrayOfConditions()));\r\n if (!super.tryToSetTheSameFeature(filteredFeatures, '', '', true)) {\r\n const placeholderDefault = filteredFeatures.find((feature) => {\r\n return feature.dbFeature.displayName && feature.dbFeature.displayName.includesCI(\" - Placeholder\");\r\n });\r\n this.activeFeature = filteredFeatures[0];\r\n this.placeholderFeature = placeholderDefault || null;\r\n }\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n const zIndex = zIndexes.Shower.Custom60in.SmallCornerShelf;\r\n if (zIndexes && this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndex;\r\n }\r\n if (zIndexes && this.placeholderFeature) {\r\n this.placeholderFeature.layer.zIndex = zIndex;\r\n }\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../parts/intermediatePart\";\r\nimport DesignNavigationItem from \"../../../../visComponents/designNavigationItem\";\r\nimport {ShowerTubCombo} from \"../../parts/showerTubCombo\";\r\nimport {Shower} from \"../../parts/shower\";\r\n\r\nexport default class CornerCaddie extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'corner_caddie';\r\n this.translateId = \"visualizer.bathroom.accessories.corner_caddie\";\r\n this.partName = 'Corner Caddie';\r\n this.visible = true;\r\n this.canBeDisabled = true;\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new CornerCaddie());\r\n }\r\n\r\n handleClick() {\r\n const accessoriesParent = this.getParent().getParent();\r\n accessoriesParent.caddie_type = this.partId;\r\n super.handleClick();\r\n }\r\n\r\n navigationSubItems(filters, searchText) {\r\n const filteredAvailableFeatures = super.getFeaturesBySearchText(super.getFilteredFeaturesByFilters(filters), searchText);\r\n const featuresToDisplay = super.navigationSubItemsWithFilterMultipleConditions(this.getArrayOfConditions(), filteredAvailableFeatures);\r\n return featuresToDisplay.map(_ => new DesignNavigationItem(_.featureName, _));\r\n }\r\n\r\n setLayers(layout) {\r\n\r\n const accessoriesParent = this.getParent();\r\n if (accessoriesParent.caddie_type !== this.partId) {\r\n super.hideLayers();\r\n return;\r\n }\r\n\r\n const conditions = this.getArrayOfConditions();\r\n if ((this.activeFeature && this.activeFeature.matchesMetaForArrayOfConditions(conditions)\r\n || (this.activeFeature && this.activeFeature.notAvailableInVisualizer && this.placeholderFeature))) {\r\n return super.setLayers(layout);\r\n }\r\n\r\n this.setDefault();\r\n return super.setLayers(layout);\r\n }\r\n\r\n getArrayOfConditions() {\r\n const accParent = this.getParent();\r\n const showerParent = accParent.layout.parts[Shower.id];\r\n const activeShowerPartId = showerParent && showerParent.showerTubComboIsActive() ? ShowerTubCombo.id : Shower.id;\r\n const showerSize = showerParent.layout.parts[activeShowerPartId].showerSize();\r\n return [{\r\n propName: 'ShowerSize',\r\n propValue: showerSize\r\n }]\r\n }\r\n\r\n setDefault() {\r\n const filteredFeatures = this.features.filter(f => f.matchesMetaForArrayOfConditions(this.getArrayOfConditions()));\r\n if (!super.tryToSetTheSameFeature(filteredFeatures, '', '', true)) {\r\n const placeholderDefault = filteredFeatures.find((feature) => {\r\n return feature.dbFeature.displayName && feature.dbFeature.displayName.includesCI(\" - Placeholder\");\r\n });\r\n this.activeFeature = filteredFeatures[0];\r\n this.placeholderFeature = placeholderDefault || null;\r\n }\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n const zIndex = zIndexes.Shower.Custom60in.CornerCaddie;\r\n if (zIndexes && this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndex;\r\n }\r\n if (zIndexes && this.placeholderFeature) {\r\n this.placeholderFeature.layer.zIndex = zIndex;\r\n }\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../parts/intermediatePart\";\r\nimport DesignNavigationItem from \"../../../../visComponents/designNavigationItem\";\r\nimport {ShowerTubCombo} from \"../../parts/showerTubCombo\";\r\nimport {Shower} from \"../../parts/shower\";\r\n\r\nexport default class LargeCornerCaddie extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'large_corner_caddie';\r\n this.partName = 'Large Corner Caddie';\r\n this.translateId = \"visualizer.bathroom.accessories.large_corner_caddie\";\r\n this.visible = true;\r\n this.canBeDisabled = true;\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new LargeCornerCaddie());\r\n }\r\n\r\n handleClick() {\r\n const accessoriesParent = this.getParent().getParent();\r\n accessoriesParent.caddie_type = this.partId;\r\n super.handleClick();\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n const zIndex = zIndexes.Shower.Custom60in.LargeCornerCaddie;\r\n if (zIndexes && this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndex;\r\n }\r\n if (zIndexes && this.placeholderFeature) {\r\n this.placeholderFeature.layer.zIndex = zIndex;\r\n }\r\n }\r\n\r\n navigationSubItems(filters, searchText) {\r\n const filteredAvailableFeatures = super.getFeaturesBySearchText(super.getFilteredFeaturesByFilters(filters), searchText);\r\n const featuresToDisplay = super.navigationSubItemsWithFilterMultipleConditions(this.getArrayOfConditions(), filteredAvailableFeatures);\r\n return featuresToDisplay.map(_ => new DesignNavigationItem(_.featureName, _));\r\n }\r\n\r\n setLayers(layout) {\r\n\r\n const accessoriesParent = this.getParent();\r\n if (accessoriesParent.caddie_type !== this.partId) {\r\n super.hideLayers();\r\n return;\r\n }\r\n\r\n const conditions = this.getArrayOfConditions();\r\n if ((this.activeFeature && this.activeFeature.matchesMetaForArrayOfConditions(conditions)\r\n || (this.activeFeature && this.activeFeature.notAvailableInVisualizer && this.placeholderFeature))) {\r\n return super.setLayers(layout);\r\n }\r\n\r\n this.setDefault();\r\n return super.setLayers(layout);\r\n }\r\n\r\n getArrayOfConditions() {\r\n const accParent = this.getParent();\r\n const showerParent = accParent.layout.parts[Shower.id];\r\n const activeShowerPartId = showerParent && showerParent.showerTubComboIsActive() ? ShowerTubCombo.id : Shower.id;\r\n const showerSize = showerParent.layout.parts[activeShowerPartId].showerSize();\r\n return [{\r\n propName: 'ShowerSize',\r\n propValue: showerSize\r\n }]\r\n }\r\n\r\n setDefault() {\r\n const filteredFeatures = this.features.filter(f => f.matchesMetaForArrayOfConditions(this.getArrayOfConditions()));\r\n if (!super.tryToSetTheSameFeature(filteredFeatures, '', '', true)) {\r\n const placeholderDefault = filteredFeatures.find((feature) => {\r\n return feature.dbFeature.displayName && feature.dbFeature.displayName.includesCI(\" - Placeholder\");\r\n });\r\n this.activeFeature = filteredFeatures[0];\r\n this.placeholderFeature = placeholderDefault || null;\r\n }\r\n }\r\n\r\n}\r\n","import uniqBy from \"lodash/uniqBy\";\r\n\r\nimport {IntermediatePart} from \"../../parts/intermediatePart\";\r\nimport DesignNavigationItem from \"../../../../visComponents/designNavigationItem\";\r\nimport {ShowerTubCombo} from \"../../parts/showerTubCombo\";\r\nimport {Shower} from \"../../parts/shower\";\r\n\r\nexport default class GrabBar extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'grab_bar';\r\n this.partName = 'Grab Bar';\r\n this.translateId = \"visualizer.bathroom.accessories.grab_bar\";\r\n this.visible = true;\r\n this.canBeDisabled = true;\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new GrabBar());\r\n }\r\n\r\n navigationSubItems(filters, searchText) {\r\n const filteredAvailableFeatures = super.getFeaturesBySearchText(super.getFilteredFeaturesByFilters(filters), searchText);\r\n const featuresToDisplay = super.navigationSubItemsWithFilterMultipleConditions(this.getArrayOfConditions(), filteredAvailableFeatures);\r\n return uniqBy(featuresToDisplay, (feature) => feature.dbFeature.id)\r\n .map(_ => new DesignNavigationItem(_.featureName, _));\r\n }\r\n\r\n // setLayers(layout) {\r\n //\r\n // const conditions = this.getArrayOfConditions();\r\n // if ((this.activeFeature && this.activeFeature.matchesMetaForArrayOfConditions(conditions)\r\n // || (this.activeFeature && this.activeFeature.notAvailableInVisualizer && this.placeholderFeature))) {\r\n // return super.setLayers(layout);\r\n // }\r\n //\r\n // this.setDefault();\r\n // return super.setLayers(layout);\r\n // }\r\n\r\n getArrayOfConditions() {\r\n const accParent = this.getParent();\r\n const showerParent = accParent.layout.parts[Shower.id];\r\n const activeShowerPartId = showerParent && showerParent.showerTubComboIsActive() ? ShowerTubCombo.id : Shower.id;\r\n const showerSize = showerParent.layout.parts[activeShowerPartId].showerSize();\r\n return [{\r\n propName: 'ShowerSize',\r\n propValue: showerSize\r\n }]\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n const zIndex = zIndexes.Shower.Custom60in.GrabBar;\r\n if (zIndexes && this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndex;\r\n }\r\n if (zIndexes && this.placeholderFeature) {\r\n this.placeholderFeature.layer.zIndex = zIndex;\r\n }\r\n }\r\n\r\n}\r\n","import React from 'react';\r\nimport {connect} from \"react-redux\";\r\nimport classNames from 'classnames';\r\nimport $ from 'jquery';\r\n\r\nimport {\r\n setVanityType,\r\n setDefaultSelectionGroup,\r\n changeActivePartRelatedItemIndex\r\n} from \"../../../actions/actionFunctions\";\r\nimport DesktopNavigationCommon from \"../../visComponents/navigation/desktopNavigationCommon\";\r\nimport Z from \"../core/parts/zIndex\";\r\nimport {Vanity} from \"../core/parts/vanity\";\r\nimport LockedView from \"../../common/lockedView\";\r\nimport {ContentType} from \"../../visComponents/constants\";\r\nimport MobileMenuSelect from \"../../visComponents/navigation/mobile/mobileMenuSelect\";\r\nimport ContextMenu from \"./contextMenu\";\r\nimport {\r\n setActiveNavigationNames, setNavigationLoading,\r\n setNavigationViewType,\r\n toggleDesktopNavigation\r\n} from \"../../../actions/navigationFunctions\";\r\nimport {getCurrentLayout} from \"../../appLayout\";\r\nimport {setVisualizerTutorialStep, showVisualizerTutorial} from \"../../../actions/tutorialFunctions\";\r\n\r\nclass DesktopNavigation extends DesktopNavigationCommon {\r\n\r\n bindCanvasClick = (event) => {\r\n const layout = getCurrentLayout();\r\n // const canvas = document.getElementById(this.props.canvasId);\r\n this.props.setHoveredLayer(event);\r\n\r\n if (document.hoveredLayer) {\r\n\r\n const layoutType = layout.getCurrentLayoutName();\r\n\r\n const hoveredZone = Z.getMenuByHoveredLayer(layoutType, document.hoveredLayer);\r\n\r\n // console.log('hoveredZone', hoveredZone);\r\n\r\n if (hoveredZone) {\r\n if ((hoveredZone === \"shower_custom\"\r\n || hoveredZone === \"vanity_custom\"\r\n || hoveredZone === \"bathtub_custom\"\r\n || hoveredZone === \"shower_combo\"\r\n || hoveredZone === \"shower_pony_wall\"\r\n || hoveredZone === \"wall_b_custom\"\r\n || hoveredZone === \"left_wall_custom\")\r\n && !this.state.showNavigation\r\n ) {\r\n if (this.state.contextMenuOpen) {\r\n this.setState({\r\n contextMenuOpen: false,\r\n hoveredLayer: {}\r\n });\r\n } else {\r\n let contextMenuOpen = '';\r\n let ponyWallGroup = false;\r\n switch (hoveredZone) {\r\n case \"shower_custom\":\r\n case \"shower_combo\":\r\n case \"shower_pony_wall\": {\r\n const showerGroup = this.state.designNavigationItems.find(navItem => {\r\n return navItem.text === \"Shower\"\r\n });\r\n contextMenuOpen = showerGroup.part.showerTubComboIsActive() ? \"Shower Tub Combo\" : \"Shower\";\r\n if (hoveredZone === \"shower_pony_wall\") {\r\n ponyWallGroup = true;\r\n }\r\n break;\r\n }\r\n case \"vanity_custom\":\r\n contextMenuOpen = \"Vanity\";\r\n break;\r\n case \"bathtub_custom\":\r\n contextMenuOpen = \"Bathtub\";\r\n break;\r\n case \"left_wall_custom\":\r\n contextMenuOpen = \"Shower Body Selection\";\r\n break;\r\n case \"wall_b_custom\":\r\n contextMenuOpen = \"wall_b_custom\";\r\n break;\r\n }\r\n this.openContextMenu(contextMenuOpen, ponyWallGroup, event);\r\n }\r\n return false;\r\n } else if (this.state.contentType === 0) {\r\n this.setState({\r\n showNavigation: true,\r\n contentType: ContentType.Design,\r\n contextMenuOpen: false,\r\n hoveredLayer: {}\r\n }, () => {\r\n this.setNewActiveFeature();\r\n this.menuOpened();\r\n setTimeout(() => {\r\n $(document).on('click', this.handleWrapperBlur);\r\n }, 0)\r\n });\r\n }\r\n\r\n hoveredZone.child\r\n ? this.triggerOpenNavigationMenu(hoveredZone.child, hoveredZone.parent)\r\n : this.triggerOpenNavigationMenu(hoveredZone)\r\n\r\n }\r\n\r\n }\r\n\r\n };\r\n\r\n getShowerBodySelectionButtons = () => {\r\n const shower = this.state.designNavigationItems.find(desItem => desItem.text === \"Shower\");\r\n const currentShowerSize = shower.part.showerSize();\r\n const showerBody = shower && shower.part.showerBody;\r\n return (showerBody && showerBody.features.length) ? showerBody.features.filter((showerBodyFeature) => {\r\n return showerBodyFeature.partName.includes(currentShowerSize);\r\n }) : [1]\r\n };\r\n\r\n openContextMenu = (contextMenuOpen, ponyWallGroup, event) => {\r\n const hoveredParent = this.state.designNavigationItems.find(navItem => {\r\n return navItem.text === contextMenuOpen\r\n });\r\n let contextMenuButtons = [];\r\n if (contextMenuOpen === \"Shower Body Selection\") {\r\n contextMenuButtons = this.getShowerBodySelectionButtons()\r\n } else if (contextMenuOpen === \"wall_b_custom\") {\r\n contextMenuButtons = [1, 2, 3]\r\n } else {\r\n contextMenuButtons = hoveredParent.part.subParts();\r\n }\r\n if (contextMenuOpen === \"Shower\" || contextMenuOpen === \"Shower Tub Combo\") {\r\n contextMenuButtons = contextMenuButtons.filter(menuButton => {\r\n return ponyWallGroup ? menuButton.part.isPonyWallPart && menuButton.part.partId !== \"pony_wall\" : !menuButton.part.isPonyWallPart\r\n });\r\n }\r\n if (contextMenuOpen === \"Vanity\") {\r\n contextMenuButtons = contextMenuButtons.filter(menuButton => {\r\n return menuButton.part.partId !== \"vanity_mirror\" && menuButton.part.partId !== \"vanity_backsplash\";\r\n });\r\n }\r\n\r\n const isMobile = $(window).width() < 991;\r\n\r\n let left = isMobile ? '50%' : event.clientX - 50;\r\n let top = isMobile ? '50%' : event.clientY - 50;\r\n let right = 'auto';\r\n\r\n const maxAllowedWidth = contextMenuButtons.length > 2 ? 300 : 210;\r\n\r\n let maxAllowedHeight = 110;\r\n if (contextMenuButtons.length > 6) {\r\n maxAllowedHeight = 330;\r\n } else if (contextMenuButtons.length > 3) {\r\n maxAllowedHeight = 220;\r\n }\r\n if (!isMobile && (left > window.innerWidth - maxAllowedWidth)) {\r\n left = 'auto';\r\n right = 0\r\n }\r\n if (!isMobile && (top > window.innerHeight - maxAllowedHeight)) {\r\n let negativeMargin = 50;\r\n if (contextMenuButtons.length > 6) {\r\n negativeMargin = 250;\r\n } else if (contextMenuButtons.length > 3) {\r\n negativeMargin = 150;\r\n }\r\n top = top - negativeMargin;\r\n }\r\n this.setState({\r\n contextMenuPonyWall: ponyWallGroup,\r\n contextMenuOpen,\r\n hoveredLayer: document.hoveredLayer,\r\n contextMenuPosition: {\r\n left,\r\n right,\r\n top,\r\n }\r\n });\r\n };\r\n\r\n handleNavigationItemClick = (item, ignoreLocked = false, featureIsLocked) => {\r\n const layout = getCurrentLayout();\r\n this.navigationItemClickCommon(item);\r\n\r\n const updateSideBarIds = [\"shower_body\", \"wall_configuration\", \"vanity_cabinet\"];\r\n if (updateSideBarIds.includes(item.part.partId)) {\r\n this.updateSideBar();\r\n }\r\n if (this.state.parentNavigationItem && this.state.parentNavigationItem.text === \"Shower Tub Combo\"\r\n && item.part.bottomTubId && (this.state.parentNavigationItem.part.bottomTub !== item.part.bottomTubId)) {\r\n this.updateSideBar();\r\n }\r\n\r\n // console.log('this.state.parentNavigationItem', this.state.parentNavigationItem);\r\n // console.log('this.state.parentNavigationItem.part.subParts()', this.state.parentNavigationItem && this.state.parentNavigationItem.part && this.state.parentNavigationItem.part.subParts());\r\n\r\n if (item.matchesMetaFailed) {\r\n const nonCompatibleWith = item.part.partId === \"vanity_faucet\" ? \"sink\" : \"vanity\";\r\n this.callMetaMathesFailedPopup(item, nonCompatibleWith);\r\n } else if (item.part.partId === \"vanity_sink\" && this.state.parentNavigationItem.part.faucet\r\n && this.state.parentNavigationItem.part.faucet.placeholderChanged\r\n && this.state.parentNavigationItem.part.faucet.activeFeature) {\r\n\r\n const sinkSizeConditionValue = item.part.metaData[\"SinkSize\"][0];\r\n\r\n if (this.state.parentNavigationItem.part.faucet.activeFeature.matchesMetaForCondition('SinkSize', sinkSizeConditionValue)) {\r\n this.itemClick(item, ignoreLocked)\r\n } else {\r\n this.callMetaMathesFailedPopup(item, 'faucet');\r\n }\r\n } else if (item.part.partId === \"toilet\") {\r\n const vanity = layout.parts[Vanity.id];\r\n const counterTopSize = vanity.counterTopSize();\r\n if (counterTopSize === \"60in\" || counterTopSize === \"72in\") {\r\n this.callToiletFailPopup('toilet', item, ignoreLocked)\r\n } else {\r\n this.itemClick(item, ignoreLocked)\r\n }\r\n } else if (item.part.partId === \"vanity_cabinet\") {\r\n // let toilet = layout.parts[Toilet.id];\r\n // if (toilet) {\r\n // toilet = toilet.toilet; // toiletBody\r\n // }\r\n // const counterTopSize = item.part.vanitySize + 'in';\r\n // const vanity = layout.parts[Vanity.id];\r\n // const currentCounterTopSize = vanity.counterTopSize();\r\n // if (toilet && toilet.placeholderChanged && (counterTopSize === \"60in\" || counterTopSize === \"72in\")\r\n // && (currentCounterTopSize !== \"60in\" && currentCounterTopSize !== \"72in\")) {\r\n // this.callToiletFailPopup('vanity', item, ignoreLocked)\r\n // } else {\r\n // this.itemClick(item, ignoreLocked);\r\n // }\r\n this.itemClick(item, ignoreLocked);\r\n if (this.props.fabricatorSettings\r\n && (this.props.fabricatorSettings.wizardConsumers || (this.props.fabricatorSettings.wizardClients && document.kvConfig.isBackend))\r\n ) {\r\n if (!featureIsLocked && !item.part.partName.includes(\"laceholder\")) {\r\n this.setWizardFiltersFromActiveItem(item.part)\r\n }\r\n }\r\n } else if (item.part.partId === \"shower_interior_wall\") {\r\n if (!featureIsLocked && !item.part.partName.includes(\"laceholder\")) {\r\n this.setWizardFiltersFromActiveItem(item.part)\r\n }\r\n this.itemClick(item, ignoreLocked)\r\n } else {\r\n this.itemClick(item, ignoreLocked)\r\n }\r\n\r\n if (this.state.parentNavigationItem) { // update canvas only if it is child\r\n this.props.refreshCB();\r\n }\r\n };\r\n\r\n render() {\r\n const layout = getCurrentLayout();\r\n const fabricatorSettings = this.props.fabricatorSettings;\r\n const activePart = this.state.parentNavigationItem ? this.state.parentNavigationItem.part : null;\r\n const activeSubPart = this.state.childNavigationItem ? this.state.childNavigationItem.part : null;\r\n const parentItems = layout.designNavigationItems(); // parent list without filters\r\n\r\n let useWizard = false;\r\n let wizardGroups = [];\r\n if (fabricatorSettings\r\n && (fabricatorSettings.wizardConsumers || (fabricatorSettings.wizardClients && document.kvConfig.isBackend))\r\n && this.state.contentType === ContentType.Design && activeSubPart && activeSubPart.canUseWizard && activeSubPart.allFeaturesReceived) {\r\n if (activeSubPart.partId === \"shower_interior_wall\") {\r\n const featuresToDisplay = activeSubPart.navigationSubItems();\r\n const tilePatternFilterGroup = this.props.filterGroups.find(group => group.name.trim() === \"TilePattern\");\r\n const acrylicPatternFilterGroup = this.props.filterGroups.find(group => group.name.trim() === \"AcrylicPattern\");\r\n const tileID = tilePatternFilterGroup && tilePatternFilterGroup.id;\r\n const acrID = acrylicPatternFilterGroup && acrylicPatternFilterGroup.id;\r\n useWizard = featuresToDisplay.some(navItem => {\r\n return (tileID && (navItem.part.dbFeature.filterValueIDs[tileID] || navItem.part.dbFeature.fabFilterValueIDs[tileID]))\r\n || (acrID && (navItem.part.dbFeature.filterValueIDs[acrID] || navItem.part.dbFeature.fabFilterValueIDs[acrID]))\r\n })\r\n } else {\r\n useWizard = true;\r\n }\r\n wizardGroups = this.state[this.getWizardGroupsByPartId(activeSubPart.partId)];\r\n }\r\n const showLockedView = this.currentActiveItemIsLocked(useWizard);\r\n\r\n const useFilters = (activePart && activePart.partId === \"floor\" && activePart.allFeaturesReceived)\r\n || (activeSubPart && (this.isWallItem(activeSubPart) || activeSubPart.partId === \"accent_wall\"\r\n || activeSubPart.partId === \"shower_interior_wall_accent\") && activeSubPart.allFeaturesReceived);\r\n\r\n const showSmallRoomLayout = fabricatorSettings &&\r\n (fabricatorSettings.showSmallDesignForClients\r\n || (fabricatorSettings.showSmallDesignFromDashboard && document.kvConfig.isBackend));\r\n\r\n const availableNavButtons = showSmallRoomLayout\r\n ? [ContentType.Design, ContentType.Layout, ContentType.DisplayRoom]\r\n : [ContentType.Design, ContentType.DisplayRoom];\r\n\r\n return (\r\n \r\n : null}\r\n
\r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = (store) => {\r\n const {isPhoneNumberValidated, userIsLoggedIn} = store.userState;\r\n const {visualizerTutorialStep, visualizerTutorialIsOpened} = store.tutorialState;\r\n\r\n return {\r\n filtersVisible: store.filterState.showFilters,\r\n filterGroups: store.filterState.filterGroups,\r\n bvPresets: store.bathroomVisualizerState.bvPresets,\r\n isPhoneNumberValidated,\r\n userIsLoggedIn,\r\n visualizerTutorialIsOpened,\r\n visualizerTutorialStep,\r\n activeQuoteIndex: store.quotesState.activeQuoteIndex,\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = {\r\n setNavigationViewType,\r\n setVanityType,\r\n setDefaultSelectionGroup,\r\n setActiveNavigationNames,\r\n toggleDesktopNavigation,\r\n changeActivePartRelatedItemIndex,\r\n setNavigationLoading,\r\n setVisualizerTutorialStep,\r\n showVisualizerTutorial\r\n};\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(DesktopNavigation);\r\n","import React, {Component} from 'react';\r\nimport {connect} from 'react-redux';\r\nimport PropTypes from 'prop-types';\r\nimport {FormattedMessage, injectIntl} from \"react-intl\";\r\n\r\nimport {PartMenuType} from \"../../constants\";\r\nimport Config from \"../../../../config\";\r\n\r\nimport Filters from \"../newFilters/filters\";\r\nimport * as actions from \"../../../../actions/actionFunctions\";\r\nimport OnScreenKeyboard from \"../../../common/OnScreenKeyboard/keyboard\";\r\nimport {getFeatureGroupName, getPartThemeThumbnail} from \"../../../../misc/helpers\";\r\nimport {getSideBarSubParts} from \"../navUtils\";\r\nimport $ from \"jquery\";\r\nimport ActionTypes from \"../../../../misc/actionTypes\";\r\n\r\nclass SidebarClass extends Component {\r\n\r\n static propTypes = {\r\n part: PropTypes.object,\r\n onBackClick: PropTypes.func.isRequired,\r\n onSubTypeClick: PropTypes.func.isRequired,\r\n handleSearchInputChange: PropTypes.func.isRequired,\r\n searchText: PropTypes.string,\r\n onSubPartClick: PropTypes.func.isRequired,\r\n onSubPartHover: PropTypes.func.isRequired,\r\n activeChildNavigationItem: PropTypes.object,\r\n updateSidebarItems: PropTypes.bool\r\n };\r\n\r\n componentWillReceiveProps(nextProps) {\r\n if (nextProps.updateSidebarItems) {\r\n this.forceUpdate();\r\n }\r\n }\r\n\r\n handleRefresh = () => {\r\n this.forceUpdate();\r\n };\r\n\r\n componentDidMount() {\r\n $(window).on(ActionTypes.UPDATE_ALL_ITEMS, this.handleRefresh);\r\n }\r\n componentWillUnmount() {\r\n $(window).off(ActionTypes.UPDATE_ALL_ITEMS, this.handleRefresh);\r\n }\r\n\r\n getSideBarContent = () => {\r\n const {part, onSubPartClick, onSubPartHover, activeChildNavigationItem, activeNavigationFilter, activeTheme} = this.props;\r\n if (part.menuType === PartMenuType.Simple) {\r\n return \r\n } else if (activeChildNavigationItem && activeChildNavigationItem.part.partId === \"top_cabinet\"\r\n && activeNavigationFilter === \"inlay_type\") {\r\n return \r\n }\r\n const subParts = getSideBarSubParts(part);\r\n return (\r\n \r\n
\r\n )\r\n};\r\n\r\nconst mapStateToProps = (store) => {\r\n const {networkConnection, isMobile} = store.serverState;\r\n const {showAdvancedQuoting} = store.advancedQuotingState;\r\n return {\r\n networkConnection,\r\n isMobile,\r\n showAdvancedQuoting,\r\n };\r\n};\r\n\r\nexport default connect(mapStateToProps)(NoInternetOverlay)\r\n","import React, {Fragment} from \"react\";\r\n\r\nexport default {\r\n \"vanity_faucet\": (\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n {/* old price is cost property, the new one is fabricatorCost*/}\r\n {getPriceWithCurrency(fabricatorSettings, toFixedPrice(lookFeature.dbFeature.cost), lookFeature)}\r\n \r\n \r\n
\r\n )\r\n }\r\n\r\n return \r\n {fabricatorData.isAmericanStandard ? null : (\r\n \r\n \r\n )}\r\n \r\n
\r\n )\r\n};\r\n\r\nGroheFeatureSoldOut.propTypes = {\r\n disabled: PropTypes.bool\r\n};\r\n\r\nconst mapStateToProps = (store) => {\r\n const fabricatorData = store.fabricatorState;\r\n return {\r\n fabricatorData\r\n }\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n};\r\n\r\nexport default injectIntl(\r\n connect(mapStateToProps, mapDispatchToProps)(GroheFeatureSoldOut)\r\n)\r\n","import React from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport {FormattedMessage} from \"react-intl\";\r\n\r\n// import FeatureDescription from \"../../../../visComponents/featureDescription\";\r\nimport FeatureName from \"../../../../visComponents/featureName\";\r\n\r\nimport SvgIcon from \"@mui/material/SvgIcon\";\r\nimport {GroheLockIcon} from \"../../../../common/icons\";\r\nimport Analytics, {PRODUCT_JOURNEY_ANALYTIC_EVENTS} from \"../../../../../analytics\";\r\nimport {setLookOverlayOpened} from \"../../../../../actions/lookFunctions\";\r\nimport {LOOK_OVERLAYS} from \"../../../core/constants\";\r\nimport {IS_PRODUCT_JOURNEY} from \"../../../../../config\";\r\n\r\n\r\nconst GroheFeatureLockedBadge = (props) => {\r\n\r\n const {lookActiveFeature, setLookOverlayOpened} = props;\r\n\r\n if (!lookActiveFeature) {\r\n return null\r\n }\r\n\r\n const lockedButtonClick = () => {\r\n Analytics.sendClickEvent(PRODUCT_JOURNEY_ANALYTIC_EVENTS.productFeatureLockedBadge);\r\n setLookOverlayOpened(LOOK_OVERLAYS.leadCapture);\r\n }\r\n\r\n return (\r\n \r\n
\r\n )\r\n};\r\n\r\nconst mapStateToProps = (store) => {\r\n const {lookActiveFeature} = store.lookState;\r\n\r\n return {\r\n lookActiveFeature,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n setLookOverlayOpened,\r\n};\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(GroheFeatureLockedBadge)\r\n","import * as types from \"./actionTypes\";\r\n\r\nexport const setGroheWizardOpened = (wizardOpened = false) => ({\r\n type: types.SET_GROHE_WIZARD_OPENED,\r\n payload: {wizardOpened}\r\n});\r\n\r\nexport const setGroheWizardName = (wizardName = false) => ({\r\n type: types.SET_GROHE_WIZARD_NAME,\r\n payload: {wizardName}\r\n});\r\n\r\nexport const setGroheWizardStep = (wizardStep = false) => ({\r\n type: types.SET_GROHE_WIZARD_STEP,\r\n payload: {wizardStep}\r\n});\r\n","import React, {useEffect, useState, Fragment} from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport PropTypes from \"prop-types\";\r\nimport {FormattedMessage, injectIntl} from \"react-intl\";\r\n\r\nimport {getCurrentLayout} from \"../../../../appLayout\";\r\nimport MaterialSpinner from \"../../../../ui/materialSpinner\";\r\nimport LookVirtualizedList from \"./lookVirtualizedList\";\r\nimport {useIsMounted, usePrevious} from \"../../../../../misc/helperHooks\";\r\nimport GroheVirtualizedList from \"../../../grohe/groheNavigation/groheFeatures/groheVirtualizedList\";\r\nimport {getFeatureGroupName, getFeatureIsLocked} from \"../../../../../misc/helpers\";\r\nimport {LOOK_NAVIGATION_LIST_TYPES, LOOK_OVERLAYS} from \"../../../core/constants\";\r\nimport {IS_PRODUCT_JOURNEY} from \"../../../../../config\";\r\nimport {getLixilRequiredNotIncludedFeatures} from \"../../../grohe/groheNavigation/groheFunctions\";\r\nimport {setGroheRequiredButNotIncludedFeature} from \"../../../../../actions/groheFunctions\";\r\nimport LookFeatureRemoveButton from \"../lookFeatureRemoveButton\";\r\nimport WithUpdateLookCartItem from \"../../../hocs/withUpdateLookCartItem\";\r\nimport LookListFeature from \"../lookListFeature/lookListFeature\";\r\nimport LookFiltersReset from \"../../lookFilters/lookFiltersReset\";\r\nimport {\r\n getReorderedItems,\r\n getNavigationItemsLists,\r\n getSortedNavItems,\r\n pricingIsLocked, getReplacedNavItemsWithUnlockedFeatures\r\n} from \"../../lookNavigationFunctions\";\r\nimport {setLookLockedTutorial} from \"../../../../../actions/lookFunctions\";\r\nimport {scrolledVerticalToTheEnd} from \"../../../../visComponents/navigation/navUtils\";\r\nimport {checkIfLookFeaturesReceived, getAdditionalFeaturesOnScroll} from \"../../../../../api/look-api\";\r\nimport NavigationLoader from \"../../../ui/navigationLoader\";\r\n// import {COUNTERTOP_GROUP} from \"../../../../kvComponent/core/constants\";\r\nimport {\r\n checkIfNeedToReceiveFeaturesIfFiltersApplied,\r\n getFeaturesFromBackendWithFilters\r\n} from \"../../../../../misc/filtersFunctions\";\r\nimport LookMainCategoryLoading from \"./lookMainCategoryLoading\";\r\nimport Analytics from \"../../../../../analytics\";\r\nimport {getAnalyticsEcommerceItem} from \"../../../../../analyticsEcommerceParams\";\r\nimport {setNavigationLoading} from \"../../../../../actions/navigationFunctions\";\r\n\r\n\r\nconst LookMainCategory = (props) => {\r\n\r\n const {lookActiveFeature, lookViewType, lookActiveCategory, contentHeight, isMobile, filterGroups, intl,\r\n fabricatorData, groheFiltersSearchText, selectedFilters, requiredButNotIncludedFeature, navigationCount,\r\n setGroheRequiredButNotIncludedFeature, lookActiveFeaturePositionInList, lookViewTypeWasChanged, lookLockedTutorial,\r\n setLookLockedTutorial, allFeaturesWereLoaded, contextMenu, wizardActiveItem, navigationLoadingActive,\r\n setNavigationLoading, isPhoneNumberValidated, lookOverlayOpened} = props;\r\n\r\n const [navItemsLists, setNavItemsLists] = useState([]);\r\n const [firstOpenedFeature, setFirstOpenedFeature] = useState(null);\r\n const [firstOpenedConditions, setFirstOpenedConditions] = useState(null);\r\n\r\n const [shouldRunAnalytics, setShouldRunAnalytics] = useState(false);\r\n\r\n const isMounted = useIsMounted();\r\n const prevActiveCategory = usePrevious(lookActiveCategory);\r\n\r\n const layout = getCurrentLayout();\r\n const featureGroup = lookActiveFeature ? lookActiveFeature.getParent() : layout.getFeatureGroupByPartId(lookActiveCategory);\r\n\r\n // const [, forceUpdate] = useReducer(x => x + 1, 0);\r\n\r\n const setReceivedFeatures = async () => {\r\n if (lookActiveCategory && isMounted()) {\r\n let forFeature = lookActiveFeature;\r\n if (featureGroup && !featureGroup.allFeaturesReceived && !featureGroup.requestInProgress) {\r\n setShouldRunAnalytics(true);\r\n checkIfLookFeaturesReceived(featureGroup);\r\n return // we will update this component when navigationCount is changed\r\n }\r\n if (Array.isArray(selectedFilters) && selectedFilters.length && featureGroup && !featureGroup.requestInProgress) {\r\n const checkPassed = checkIfNeedToReceiveFeaturesIfFiltersApplied(selectedFilters, featureGroup);\r\n if (checkPassed) {\r\n setNavigationLoading(true);\r\n await getFeaturesFromBackendWithFilters(featureGroup, checkPassed.arrayOfNeededFiltersToReceive);\r\n if (!isMounted()) {\r\n return\r\n }\r\n setNavigationLoading(false);\r\n }\r\n }\r\n if (!forFeature && featureGroup && isMobile && !IS_PRODUCT_JOURNEY) {\r\n forFeature = featureGroup.activeFeature\r\n }\r\n let navFeatures;\r\n if (requiredButNotIncludedFeature) {\r\n navFeatures = getLixilRequiredNotIncludedFeatures(requiredButNotIncludedFeature).map((feature) => ({part: feature}))\r\n setNavItemsLists([{\r\n type: LOOK_NAVIGATION_LIST_TYPES.regular,\r\n navItems: navFeatures\r\n }]);\r\n } else if (featureGroup) {\r\n const firstFeature = firstOpenedFeature && firstOpenedFeature.partId === lookActiveCategory ? firstOpenedFeature : null;\r\n const firstConditions = firstOpenedFeature && firstOpenedFeature.partId === lookActiveCategory ? firstOpenedConditions : null;\r\n navFeatures = layout.designNavigationItems(\r\n {part: featureGroup},\r\n selectedFilters,\r\n groheFiltersSearchText,\r\n forFeature,\r\n \"all\", // added for non lixil fabricators to display not in visualizer features\r\n filterGroups,\r\n {firstFeature, firstConditions},\r\n );\r\n\r\n if (featureGroup.partId === \"vanity_sink\" && contextMenu.clickedOnItem) {\r\n if (contextMenu.clickedOnItem === \"vanity_pedestal_sink\") {\r\n navFeatures = navFeatures.filter(navItem => {\r\n return navItem.part.metaData[\"MountType\"] && navItem.part.metaData[\"MountType\"].includes(\"ST\")\r\n })\r\n } else if (contextMenu.clickedOnItem === \"vanity_sink\") {\r\n navFeatures = navFeatures.filter(navItem => {\r\n return !navItem.part.metaData[\"MountType\"] || !navItem.part.metaData[\"MountType\"].includes(\"ST\")\r\n })\r\n }\r\n }\r\n\r\n navFeatures = getReplacedNavItemsWithUnlockedFeatures(navFeatures, filterGroups);\r\n\r\n // here we sort features\r\n navFeatures = getReorderedItems(navFeatures, lookActiveFeature, lookActiveCategory, featureGroup);\r\n\r\n if (!wizardActiveItem && lookActiveCategory\r\n && (!prevActiveCategory || (prevActiveCategory !== lookActiveCategory) || shouldRunAnalytics)) {\r\n if (shouldRunAnalytics) {\r\n setShouldRunAnalytics(false);\r\n }\r\n Analytics.sendEcommerceEvent(\"view_item_list\", {\r\n item_list_id: featureGroup.partId,\r\n item_list_name: featureGroup.dbName || featureGroup.partName || \"\",\r\n items: navFeatures.map((navItem, navItemIndex) => getAnalyticsEcommerceItem(navItem.part, 1, navItemIndex))\r\n });\r\n }\r\n\r\n if (typeof lookActiveFeaturePositionInList === \"number\") { // swap places with clicked position (is used only for cases when 1) option click 2) navigation item click)\r\n const currentPositionInList = navFeatures.findIndex(navItem => navItem.part.dbFeature.id === lookActiveFeature.dbFeature.id);\r\n if (currentPositionInList >= 0 && currentPositionInList !== lookActiveFeaturePositionInList) {\r\n [navFeatures[currentPositionInList], navFeatures[lookActiveFeaturePositionInList]] = [navFeatures[lookActiveFeaturePositionInList], navFeatures[currentPositionInList]]\r\n }\r\n }\r\n\r\n const nItemsLists = getNavigationItemsLists(navFeatures, lookActiveFeature);\r\n\r\n if (fabricatorData.settings.leadCapture && !lookLockedTutorial.finished && !isPhoneNumberValidated\r\n && !IS_PRODUCT_JOURNEY && featureGroup.allFeaturesReceived && !(isMobile && lookActiveFeature)\r\n && !wizardActiveItem && !(lookOverlayOpened && (lookOverlayOpened === LOOK_OVERLAYS.intro))) {\r\n let firstLockedIndex, firstUnlockedIndex;\r\n if (nItemsLists.length === 1) {\r\n firstLockedIndex = nItemsLists[0].navItems.findIndex(navItem => getFeatureIsLocked(navItem.part));\r\n firstUnlockedIndex = nItemsLists[0].navItems.findIndex(navItem => !getFeatureIsLocked(navItem.part));\r\n }\r\n setLookLockedTutorial({\r\n visible: true,\r\n withGrid: nItemsLists.length === 1,\r\n firstLockedIndex,\r\n firstUnlockedIndex,\r\n })\r\n }\r\n\r\n setNavItemsLists(nItemsLists);\r\n }\r\n //console.log(\"navItems\", navItems);\r\n // forceUpdate(1);\r\n // setTimeout(() => {\r\n // if (isMounted()) {\r\n // forceUpdate(1);\r\n // }\r\n // }, 500)\r\n // setTimeout(() => {\r\n // if (isMounted()) {\r\n // forceUpdate(1);\r\n // }\r\n // }, 1500)\r\n // setTimeout(() => {\r\n // if (isMounted()) {\r\n // forceUpdate(1);\r\n // }\r\n // }, 3000)\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n setReceivedFeatures();\r\n return () => {\r\n if (requiredButNotIncludedFeature && lookActiveFeature) {\r\n let reqFeatures = getLixilRequiredNotIncludedFeatures(requiredButNotIncludedFeature);\r\n reqFeatures.push(requiredButNotIncludedFeature);\r\n if (!reqFeatures.find(navItem => navItem.dbFeature.id === lookActiveFeature.dbFeature.id)) {\r\n setGroheRequiredButNotIncludedFeature(null);\r\n }\r\n } else if(requiredButNotIncludedFeature && !lookActiveFeature) {\r\n setGroheRequiredButNotIncludedFeature(null);\r\n }\r\n }\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [lookActiveCategory, groheFiltersSearchText, selectedFilters, requiredButNotIncludedFeature,\r\n setGroheRequiredButNotIncludedFeature, navigationCount, lookOverlayOpened]);\r\n\r\n useEffect(() => {\r\n if (lookActiveCategory) {\r\n setFirstOpenedFeature(lookActiveFeature);\r\n if (lookActiveFeature && lookActiveFeature.getParent) {\r\n setFirstOpenedConditions(lookActiveFeature.getParent().getArrayOfConditions(true))\r\n }\r\n }\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [lookActiveCategory]);\r\n\r\n // if (!visualizersLoadedLength) {\r\n // return \r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n {/*{lookActiveFeature.dbFeature.sku ? (*/}\r\n {/*
\r\n \r\n \r\n
\r\n {/*{lookActiveFeature.dbFeature.sku ? (*/}\r\n {/* */}\r\n {/*
*/}\r\n {/* */}\r\n {/*
*/}\r\n {/*) : null}*/}\r\n \r\n \r\n
\r\n \r\n
\r\n
\r\n )\r\n }\r\n\r\n if (featureGroup && !featureGroup.allFeaturesReceived) {\r\n return \r\n {featureGroupName} ({regularNavItemList.navItems.length})\r\n {/*{showAllWallsCheckbox ? (*/}\r\n {/*
\r\n */}\r\n {/*
*/}\r\n {/*) : null}*/}\r\n {/*{!showAllWallsCheckbox && lookActiveFeature && lookActiveFeature.getParent().canBeDisabled && showFeaturesOnly ? (*/}\r\n {lookActiveFeature && lookActiveFeature.getParent().canBeDisabled && showFeaturesOnly ? (\r\n \r\n \r\n
\r\n ) : null}\r\n \r\n
\r\n {navigationLoadingActive ? \r\n \r\n
\r\n \r\n \r\n
\r\n {navigationLoadingActive ? \r\n {desRecNavItemList || selectedFilters.length ? (\r\n \r\n \r\n
\r\n {selectedFilters.length && (!desRecNavItemList || !desRecNavItemList.navItems.length) ? (\r\n \r\n \r\n ) : null}\r\n {desRecNavItemList ? (\r\n \r\n ) : null}\r\n {regularNavItemList.navItems.length ? (\r\n \r\n \r\n {regularNavItemList.navTranslate && notMatchingNavItemList.length ?
\r\n \r\n ) : null}\r\n {notMatchingNavItemList.length ? notMatchingNavItemList.map((navItemList) => {\r\n return (\r\n \r\n \r\n
\r\n \r\n )\r\n }) : null}\r\n
\r\n {navigationLoadingActive ? \r\n \r\n
\r\n {selectedFilters.length && (!desRecNavItemList || !desRecNavItemList.navItems.length) ? (\r\n \r\n \r\n
\r\n \r\n {desRecNavItemList.navItems.map(navItem => {\r\n return \r\n })}\r\n
\r\n ) : null}\r\n \r\n {regularNavItemList.navTranslate && notMatchingNavItemList.length ? : null}\r\n {regularNavItemList.navTranslate && notMatchingNavItemList.length ? \" \" : null}\r\n
\r\n \r\n {regularNavItemList.navItems.map(navItem => {\r\n return \r\n })}\r\n
\r\n \r\n
\r\n \r\n {navItemList.navItems.map(navItem => {\r\n return \r\n })}\r\n
\r\n \r\n setShowRevertModal(true)}\r\n // onMouseLeave={() => setShowRevertModal(false)}\r\n onClick={() => revertButtonClick(zoomToFeatureGroup, updateLookCartItem)}>\r\n \r\n \r\n
\r\n )\r\n }\r\n\r\n return (\r\n \r\n {(wizardActiveStep > -1 && currentGroups.length) ? (\r\n \r\n \r\n ) : null}\r\n
\r\n )\r\n }\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n {skipEnabled ? (\r\n \r\n \r\n \r\n \r\n
\r\n ) : null}\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n {(wizardActiveStep === -1) ? (\r\n \r\n ) : null}\r\n {(wizardActiveStep > -1 && currentGroups.length) ? (\r\n \r\n \r\n \r\n \r\n ) : null}\r\n {isCompletedStep && IS_PRODUCT_JOURNEY ? (\r\n
\r\n \r\n {skipEnabled ? (\r\n \r\n \r\n \r\n ) : null}\r\n {isCompletedStep && IS_PRODUCT_JOURNEY ? */}\r\n {/* */}\r\n {/*) : null}*/}\r\n
\r\n ');\r\n }\r\n if (response && response.error) {\r\n return response.error;\r\n }\r\n\r\n return null;\r\n};\r\n\r\nexport const apiGet = async url => {\r\n try {\r\n const response = await AxiosInstance.get(url);\r\n return {data: {...response.data}, error: apiResponseError(response)};\r\n } catch (error) {\r\n return {error: apiResponseError(error)};\r\n }\r\n};\r\n\r\nexport const apiPost = async (url, data) => {\r\n console.log(\"url to post\", url);\r\n console.log(\"data to post\", data);\r\n try {\r\n const response = await AxiosInstance.post(url, data);\r\n console.log(\"response1\", response);\r\n return {data: {...response.data}, error: apiResponseError(response)};\r\n } catch (error) {\r\n console.log(\"response1 error\", error);\r\n return {error: apiResponseError(error)};\r\n }\r\n}\r\n\r\n","export default \"// This is our input from js world\\r\\nattribute vec2 coords;\\r\\n// This is output for the fragment shader\\r\\n// varying variables are a little special\\r\\n// you will see why later\\r\\nvarying highp vec2 vTextureCoord;\\r\\n\\r\\nvoid main (void) {\\r\\n // Texture and verticies have different coordinate spaces\\r\\n // we do this to invert Y axis\\r\\n vTextureCoord = -coords;\\r\\n\\r\\n // Setting vertix position for shape assembler\\r\\n // GLSL has many convenient vector functions\\r\\n // here we extending 2D coords vector to 4D with 2 values\\r\\n // 0.0 is a Z coordinate\\r\\n // 1.1 is a W, special value needed for 3D math\\r\\n // just leave it 1 for now\\r\\n gl_Position = vec4(coords, 0.0, 1.0);\\r\\n}\";","export default \"precision mediump float;\\r\\nvarying highp vec2 vTextureCoord;\\r\\nuniform sampler2D uSampler;\\r\\n\\r\\nvec2 coords;\\r\\nfloat x;\\r\\nfloat y;\\r\\nfloat l;\\r\\nfloat a;\\r\\nvec4 color;\\r\\nvec4 color2;\\r\\n\\r\\nfloat to_srgb(float v) {\\r\\n float result = 0.0;\\r\\n if (v < 0.003) {\\r\\n result = v * 12.920;\\r\\n } else {\\r\\n result = pow(v, 0.417);\\r\\n result = result * 1.055;\\r\\n result = result - 0.055;\\r\\n }\\r\\n return result;\\r\\n}\\r\\n\\r\\nvec4 vec_to_srgb(vec4 v) {\\r\\n vec4 result;\\r\\n result.r = to_srgb(v.r);\\r\\n result.g = to_srgb(v.g);\\r\\n result.b = to_srgb(v.b);\\r\\n result.a = v.a;\\r\\n return result;\\r\\n}\\r\\n\\r\\nfloat from_srgb(float v) {\\r\\n float result = 0.0;\\r\\n if (v < 0.040) {\\r\\n result = v / 12.920;\\r\\n } else {\\r\\n result = v + 0.055;\\r\\n result = result / 1.055;\\r\\n result = pow(result, 2.4);\\r\\n }\\r\\n return result;\\r\\n}\\r\\n\\r\\nvec4 vec_from_srgb(vec4 v) {\\r\\n vec4 result;\\r\\n result.r = from_srgb(v.r);\\r\\n result.g = from_srgb(v.g);\\r\\n result.b = from_srgb(v.b);\\r\\n result.a = v.a;\\r\\n return result;\\r\\n}\\r\\n\\r\\nvoid main(void){\\r\\n float gamma = 2.4;\\r\\n float out_gamma = 0.41666;\\r\\n x = vTextureCoord[0];\\r\\n y = vTextureCoord[1];\\r\\n coords[0] = (1.0 - x) / 2.0;\\r\\n coords[1] = (y + 1.0) / 2.0;\\r\\n color = vec_from_srgb(texture2D(uSampler, coords));\\r\\n a = color.a;\\r\\n color2 = vec4(8, 8, 8, 0) * color + vec4(1, 1, 1, 0);\\r\\n color2 = vec4(8, 8, 8, 0) * color / color2;\\r\\n color2.a = a;\\r\\n gl_FragColor = vec_to_srgb(color2);\\r\\n}\";","import $ from \"jquery\";\r\n\r\nconst sqftCursorManager = {\r\n canvas: null,\r\n currentCursor: null,\r\n currentCursorOwner: null,\r\n noCursorStealing: false,\r\n\r\n init(canvas) {\r\n this.canvas = canvas;\r\n this.resetCursor(null);\r\n },\r\n\r\n setCursor(cursor, owner, noStealing = false) {\r\n this.noCursorStealing = noStealing || this.noCursorStealing;\r\n\r\n if (this.currentCursorOwner === null || this.currentCursorOwner === owner) {\r\n if (this.currentCursor !== cursor) {\r\n const prefix = \"cursor-\";\r\n const classes = this.canvas.className.split(\" \").filter(c => c.lastIndexOf(prefix, 0) !== 0);\r\n this.canvas.className = classes.join(\" \").trim();\r\n $(this.canvas).addClass(`cursor-${cursor}`);\r\n $(this.canvas).css({ cursor: null });\r\n this.currentCursorOwner = owner;\r\n this.currentCursor = cursor;\r\n }\r\n }\r\n },\r\n\r\n setCursorImage(cursorImage, owner, noStealing = false) {\r\n this.setCursor(\"image\", owner, noStealing);\r\n $(this.canvas).css({ cursor: `url(${cursorImage}), default !important` });\r\n },\r\n\r\n resetCursor(owner) {\r\n if (this.currentCursorOwner === owner) {\r\n this.currentCursorOwner = null;\r\n this.setCursor(\"grab\", null);\r\n this.releaseStealLock(owner);\r\n }\r\n },\r\n\r\n getCursor() {\r\n const prefix = \"cursor-\";\r\n const classes = this.canvas.className.split(\" \").filter(c => c.lastIndexOf(prefix, 0) === 0);\r\n return classes.map(c => c.replace(prefix, \"\"));\r\n },\r\n\r\n stealCursor(override = false, revertBackAfterMouseUp = false) {\r\n if (override && this.currentCursorOwner) {\r\n if (this.currentCursorOwner.destroy) {\r\n this.currentCursorOwner.destroy(true, revertBackAfterMouseUp);\r\n }\r\n }\r\n\r\n if (!this.noCursorStealing || override) {\r\n this.resetCursor(this.currentCursorOwner);\r\n }\r\n },\r\n\r\n releaseStealLock(owner) {\r\n if (this.currentCursorOwner === owner) {\r\n this.noCursorStealing = false;\r\n }\r\n }\r\n};\r\n\r\nexport default sqftCursorManager;\r\n","import EventManager from \"../../../store/sqftEventManager\";\r\nimport config from \"../../../store/sqftConfig\";\r\nimport {getFontsize, inchesToMm, isDisabledInPopupWithParents, isInnerCorner} from \"../../../../../helpers/sqftHelper\";\r\n//import shapeHelper from \"../../../../../helpers/shapeHelper\";\r\nimport {isDisabledInPopupShouldBeHidden} from \"../../../../../constants\";\r\n\r\nexport default function() {\r\n var self = this,\r\n point = null;\r\n\r\n function setPoint(value) { point = value; }\r\n\r\n this.destroy = function(protect) {\r\n if(!protect) {\r\n EventManager.removeEvent(self);\r\n }\r\n };\r\n\r\n this.init = function(point) {\r\n setPoint(point);\r\n this.initEvents();\r\n };\r\n this.initEvents = () => {\r\n EventManager.addEvent(\r\n EventManager.events.RENDER,\r\n self.render,\r\n self,\r\n EventManager.priorities.OVERLAY\r\n );\r\n }\r\n this.deregisterPartEvents = () => {\r\n EventManager.removeEvent(this);\r\n };\r\n this.reInitPartEvents = () => {\r\n this.initEvents();\r\n };\r\n this.render = (ctx) => {\r\n if (isDisabledInPopupShouldBeHidden() && isDisabledInPopupWithParents(point)) {\r\n return\r\n }\r\n\r\n if (point.arcLength > 0 || point.angle > 0) {\r\n const line = point.getParent(),\r\n shape = line.getParent(),\r\n //nextLine = shape.getNextLine(line),\r\n //nextLineTo = nextLine.calculateRenderPosition(nextLine.to),\r\n prevLine = shape.getPrevLine(line),\r\n prevLineFrom = prevLine.calculateRenderPosition(prevLine.from),\r\n renderTo = line.calculateRenderPosition(line.to),\r\n renderFrom = line.calculateRenderPosition(line.from),\r\n isInner = isInnerCorner(shape, prevLineFrom, renderFrom, renderTo);\r\n\r\n let fontSize = getFontsize(),\r\n font = (config.measureUnit === \"Imperial\" ? fontSize : fontSize - 5).toString() + \"px \" + config.activeFontBold,\r\n radius = point.arcLength || point.angle,\r\n //dir = shape.getAngleDirection(shape.getPrevLine(line)),\r\n //isInner = shapeHelper.isAngleInner(dir),\r\n pointCorner = point.corner ? point.corner : isInner,\r\n cornerMargin = pointCorner\r\n ? point.arcLength ? +point.arcLength - 8 : +point.angle\r\n : point.arcLength ? -point.arcLength + 8 : -point.angle,\r\n radiusLetter = point.arcLength ? \"r\" : \"\",\r\n dstring = config.measureUnit === \"Metric\"\r\n ? radiusLetter + new Fraction(inchesToMm(radius)) + \"mm\"\r\n : radiusLetter + new Fraction(radius) + \"\\\"\",\r\n mtext = ctx.measureText(dstring),\r\n tLen = mtext.width,\r\n offset = point.getPointField(),\r\n renderPos = {\r\n x: offset.x + offset.width,\r\n y: offset.y + (offset.height / 2)\r\n };\r\n ctx.beginPath();\r\n ctx.font = font;\r\n ctx.textAlign = \"center\";\r\n renderPos.y += fontSize / 2;\r\n // ctx.fillStyle = \"rgb(178, 99, 168)\";\r\n // ctx.fillRect(offset.x - 4, offset.y + 2 + (fontSize * 2), tLen + 6, fontSize + 4);\r\n ctx.beginPath();\r\n ctx.fillStyle = \"#b263a8\";\r\n\r\n //todo correct positions\r\n switch (point.pointDirection) {\r\n case \"lefttop\":\r\n ctx.wrapText(\r\n dstring,\r\n renderPos.x - offset.width + tLen,//- (tLen + cornerMargin) * config.scale / config.defaultScale,\r\n renderPos.y - (fontSize + cornerMargin) * config.scale / config.defaultScale, mtext, fontSize\r\n );\r\n break;\r\n case \"righttop\":\r\n ctx.wrapText(\r\n dstring,\r\n renderPos.x + cornerMargin * config.scale / config.defaultScale,\r\n renderPos.y - (fontSize + cornerMargin) * config.scale / config.defaultScale, mtext, fontSize\r\n );\r\n break;\r\n case \"rightbottom\":\r\n ctx.wrapText(\r\n dstring,\r\n renderPos.x + (fontSize + cornerMargin) * config.scale / config.defaultScale,\r\n renderPos.y + (fontSize + cornerMargin) * config.scale / config.defaultScale, mtext, fontSize\r\n );\r\n break;\r\n case \"leftbottom\":\r\n ctx.wrapText(\r\n dstring,\r\n renderPos.x - (60 + cornerMargin) * config.scale / config.defaultScale,\r\n renderPos.y + (fontSize + cornerMargin) * config.scale / config.defaultScale,\r\n mtext, fontSize\r\n );\r\n break;\r\n default:\r\n ctx.wrapText(\r\n dstring,\r\n renderPos.x,\r\n renderPos.y - (fontSize / 2) + (fontSize * 2), mtext, fontSize\r\n );\r\n break;\r\n }\r\n }\r\n };\r\n}\r\n","import {SQFTResourceController} from \"./SQFTResourceController\";\r\nimport Spacer from \"../../core/shapes/spacer\";\r\nimport {WORKSPACE_RESOURCES} from \"../../../../constants\";\r\n\r\nexport class SpacersController extends SQFTResourceController {\r\n isJustCreated: false;\r\n\r\n constructor(props) {\r\n super(props);\r\n this.resourceName = WORKSPACE_RESOURCES.spacers;\r\n }\r\n\r\n setIsJustCreated(value) {\r\n this.isJustCreated = value\r\n }\r\n\r\n createSpacer(point1, point2, pos) {\r\n if (!this.isNotCreatedSpacerExist()) {\r\n this.addResource(new Spacer([point1, point2], pos));\r\n }\r\n }\r\n\r\n /**\r\n * Used to skip mouse up in workspace events\r\n **/\r\n isNotCreatedSpacerExist() {\r\n const resources = this.getResources();\r\n return resources.some(spacer => !spacer.getIsCreated())\r\n }\r\n}\r\n\r\n","import * as uuid from \"uuid\";\r\n\r\nimport EventManager from \"../../store/sqftEventManager\";\r\nimport {SHAPE_PART_ID, SIDEBAR_BUTTONS_MENU} from \"../../../../constants\";\r\nimport COLOR_THEMES from \"../../../../../../colorThemes\";\r\nimport eventManager from \"../../store/sqftEventManager\";\r\nimport store from \"../../../../../../store\";\r\nimport workspaceControllers from \"../../store/workspaceControllers\";\r\nimport {\r\n getDistanceFromPointToLine,\r\n getMousePositionOnShape,\r\n getParallelPoints,\r\n getPointField\r\n} from \"../../../../helpers/sqftHelper\";\r\nimport sqftEventManager from \"../../store/sqftEventManager\";\r\nimport {\r\n adjustPointsRelativeToTopLeft,\r\n findTopLeftPoint,\r\n getThePositionOfAPointToTheLeftOrRightOfALine, sortPointsClockwise\r\n} from \"../../../../helpers/coordinatesHelper\";\r\nimport sqftConfig from \"../../store/sqftConfig\";\r\nimport {createShapeFromPoints} from \"../../../../helpers/freeDrawHelper\";\r\nimport sqftShapeManager from \"../../store/sqftShapeManager\";\r\nimport ShapeCabinet from \"./shapeParts/shapeCabinet\";\r\n\r\nexport default class Spacer {\r\n id;\r\n state = {\r\n centerPoint: {x: 0, y: 0},\r\n betweenPoints: [],\r\n isCreated: false,\r\n isHovering: false,\r\n mouseDown: false,\r\n mouseDownPosition: null,\r\n };\r\n\r\n constructor(points, centerPoint) {\r\n this.id = uuid.v4();\r\n this.state.betweenPoints = points\r\n this.state.centerPoint = centerPoint\r\n this.initEvents();\r\n }\r\n\r\n getIsCreated() { return this.state.isCreated }\r\n setCreated(value) { this.state.isCreated = value}\r\n\r\n initEvents() {\r\n EventManager.addEvent(\r\n EventManager.events.RENDER,\r\n this.render.bind(this),\r\n this,\r\n EventManager.priorities.WALL\r\n );\r\n EventManager.addEvent(\r\n EventManager.events.MOUSE_DOWN,\r\n this.onMouseDown.bind(this),\r\n this,\r\n EventManager.priorities.OVERALL\r\n );\r\n EventManager.addEvent(\r\n EventManager.events.MOUSE_MOVE,\r\n this.onMouseMove.bind(this),\r\n this,\r\n EventManager.priorities.SEGMENT\r\n );\r\n }\r\n\r\n destroy() {\r\n this.deregisterEvents();\r\n this.destroyPoints();\r\n }\r\n\r\n destroyPoints() {\r\n for (const addedPoints of this.state.betweenPoints) {\r\n addedPoints.destroy()\r\n }\r\n }\r\n\r\n deregisterEvents() {\r\n eventManager.removeEvent(this);\r\n }\r\n\r\n onMouseDown(mousePos) {\r\n void mousePos;\r\n if (this.state.isHovering) {\r\n const reduxState = store.getState();\r\n if (reduxState.sqftMenuState.activeButton === SIDEBAR_BUTTONS_MENU.delete) {\r\n workspaceControllers.spacer.destroyResource(this)\r\n return true\r\n }\r\n }\r\n\r\n if (!this.state.isCreated) {\r\n this.createShapeFromSpacerPoints()\r\n this.setCreated(true);\r\n workspaceControllers.spacer.destroyResource(this);\r\n workspaceControllers.spacer.setIsJustCreated(true);\r\n return true\r\n }\r\n\r\n return false\r\n }\r\n\r\n createShapeFromSpacerPoints = () => {\r\n const [point3, point4] = this.getPointsToTheMouse();\r\n const shape = this.state.betweenPoints[0].getParent().getParent();\r\n\r\n // Получаем позиции точек на шейпе\r\n const point3PointField = getMousePositionOnShape(point3.x, point3.y, shape);\r\n const point4PointField = getMousePositionOnShape(point4.x, point4.y, shape);\r\n\r\n // Собираем точки шейпа\r\n const shapePoints = [\r\n this.state.betweenPoints[1],\r\n point3PointField,\r\n point4PointField,\r\n this.state.betweenPoints[0]\r\n ];\r\n\r\n const topLeftPoint = findTopLeftPoint(shapePoints);\r\n const adjustedShapePoints = adjustPointsRelativeToTopLeft(shapePoints, topLeftPoint);\r\n const sortedPoints = sortPointsClockwise(adjustedShapePoints);\r\n if (!sortedPoints) {\r\n console.warn(\"Shape creation skipped due to undefined points.\");\r\n return;\r\n }\r\n\r\n const shapePosition = shape.getPosition();\r\n const newShapePosition = {\r\n x: topLeftPoint.x + shapePosition.x,\r\n y: topLeftPoint.y + shapePosition.y\r\n };\r\n\r\n const shapeParams = {\r\n ...shape.shapeParams,\r\n isSpacer: true,\r\n canSnap: true,\r\n };\r\n\r\n const spacerShapeId = createShapeFromPoints(sortedPoints, SHAPE_PART_ID.spacer,\r\n false,\r\n newShapePosition,\r\n false,\r\n null,\r\n shapeParams\r\n );\r\n\r\n let spacerShape = sqftShapeManager.getShapeById(spacerShapeId);\r\n spacerShape.featureId = shape.featureId;\r\n spacerShape.relatedParentFeatureId = shape.relatedParentFeatureId;\r\n spacerShape.parentPartId = shape.partId;\r\n spacerShape.featureName = shape.featureName;\r\n spacerShape.colorSet = shape.colorSet;\r\n if (shape.shapeCabinet) {\r\n spacerShape.shapeCabinet = new ShapeCabinet(spacerShape)\r\n }\r\n }\r\n\r\n onMouseMove(mousePos) {\r\n void mousePos\r\n //this.state.isHovering = this.isMouseOverWall(mousePos) || this.state.mouseDown;\r\n }\r\n\r\n render(ctx) {\r\n if (this.state.isCreated) {\r\n //this.renderLines(ctx);\r\n } else {\r\n this.renderLinesToMouse(ctx);\r\n }\r\n }\r\n\r\n getPointsToTheMouse() {\r\n const betweenPoint1 = this.state.betweenPoints[0];\r\n const betweenPoint2 = this.state.betweenPoints[1];\r\n let pointField1 = getPointField(betweenPoint1.x, betweenPoint1.y, betweenPoint1.getParent().getParent());\r\n let pointField2 = getPointField(betweenPoint2.x, betweenPoint2.y, betweenPoint1.getParent().getParent());\r\n let mousePos = sqftEventManager.LastKnownMousePos;\r\n const distanceFromMouseToTheLine = getDistanceFromPointToLine(\r\n mousePos.x,\r\n mousePos.y,\r\n pointField1.x,\r\n pointField1.y,\r\n pointField2.x,\r\n pointField2.y,\r\n )\r\n const pointLeftRightPosition = getThePositionOfAPointToTheLeftOrRightOfALine(pointField1, pointField2, mousePos);\r\n const parallelPoints = getParallelPoints(\r\n pointField1,\r\n pointField2,\r\n pointLeftRightPosition > 0\r\n ? -distanceFromMouseToTheLine\r\n : distanceFromMouseToTheLine\r\n );\r\n void parallelPoints;\r\n // console.log(\"pointField1\", pointField1);\r\n // console.log(\"pointField2\", pointField2);\r\n // console.log(\"distanceFromMouseToTheLine\", distanceFromMouseToTheLine);\r\n // console.log(\"mousePos\", mousePos);\r\n // console.log(\"parallelPoints0\", parallelPoints[0]);\r\n // console.log(\"parallelPoints1\", parallelPoints[1]);\r\n // console.log(\"pointLeftRightPosition\", pointLeftRightPosition);\r\n return parallelPoints\r\n }\r\n\r\n renderLinesToMouse(ctx) {\r\n const [point3, point4] = this.getPointsToTheMouse();\r\n ctx.lineWidth = this.state.lineWidth;\r\n ctx.fillStyle = COLOR_THEMES[sqftConfig.activeTheme].primary;\r\n ctx.strokeStyle = this.state.lineColor;\r\n\r\n const betweenPoint1 = this.state.betweenPoints[0];\r\n const betweenPoint2 = this.state.betweenPoints[1];\r\n let pointField1 = getPointField(betweenPoint1.x, betweenPoint1.y, betweenPoint1.getParent().getParent());\r\n let pointField2 = getPointField(betweenPoint2.x, betweenPoint2.y, betweenPoint1.getParent().getParent());\r\n ctx.beginPath()\r\n ctx.moveTo(pointField1.x, pointField1.y);\r\n ctx.lineTo(pointField2.x, pointField2.y);\r\n ctx.lineTo(point3.x, point3.y);\r\n ctx.lineTo(point4.x, point4.y);\r\n ctx.fill();\r\n ctx.closePath();\r\n ctx.stroke();\r\n }\r\n\r\n // renderLines(ctx) {\r\n // const reduxState = store.getState();\r\n // const activeButton = reduxState.sqftMenuState.activeButton;\r\n // ctx.lineWidth = this.state.lineWidth;\r\n // ctx.fillStyle = COLOR_THEMES[sqftConfig.activeTheme].primary;\r\n // ctx.strokeStyle = this.state.isHovering && activeButton === SIDEBAR_BUTTONS_MENU.delete\r\n // ? COLORS.red\r\n // : this.state.lineColor;\r\n //\r\n // const betweenPoint1 = this.state.betweenPoints[0];\r\n // const betweenPoint2 = this.state.betweenPoints[1];\r\n // const betweenPoint3 = this.state.betweenPoints[3];\r\n // const betweenPoint4 = this.state.betweenPoints[4];\r\n // let pointField1 = getPointField(betweenPoint1.x, betweenPoint1.y, betweenPoint1.getParent().getParent());\r\n // let pointField2 = getPointField(betweenPoint2.x, betweenPoint2.y, betweenPoint1.getParent().getParent());\r\n // let pointField3 = getPointField(betweenPoint3.x, betweenPoint3.y, betweenPoint1.getParent().getParent());\r\n // let pointField4 = getPointField(betweenPoint4.x, betweenPoint4.y, betweenPoint1.getParent().getParent());\r\n //\r\n // ctx.beginPath()\r\n // ctx.moveTo(pointField1.x, pointField1.y);\r\n // ctx.lineTo(pointField2.x, pointField2.y);\r\n // ctx.lineTo(pointField3.x, pointField3.y);\r\n // ctx.lineTo(pointField4.x, pointField4.y);\r\n // ctx.fill();\r\n // ctx.closePath();\r\n // ctx.stroke();\r\n // }\r\n}\r\n","import sqftConfig from \"../../../../store/sqftConfig\";\r\nimport workspace from \"../../../workspace\";\r\n\r\nexport default class ModelCorePoint {\r\n _x;\r\n _y;\r\n _parent;\r\n _mixins = {\r\n movable: null\r\n };\r\n\r\n constructor(x, y, parent, mixins) {\r\n this._x = x;\r\n this._y = y;\r\n this._parent = parent;\r\n this._mixins = mixins;\r\n }\r\n\r\n get x() {\r\n return this.mixins.movable ? this.mixins.movable.posX : this._x;\r\n }\r\n\r\n set x(value) {\r\n this.mixins.movable ? this.mixins.movable.posX = value : this._x = value;\r\n }\r\n\r\n get y() {\r\n return this.mixins.movable ? this.mixins.movable.posX : this._y;\r\n }\r\n\r\n set y(value) {\r\n this.mixins.movable ? this.mixins.movable.posY = value : this._y = value;\r\n }\r\n\r\n get parent() {\r\n return this._parent;\r\n }\r\n\r\n set parent(value) {\r\n this._parent = value;\r\n }\r\n\r\n get mixins() {\r\n return this._mixins;\r\n }\r\n\r\n set mixins(value) {\r\n this._mixins = value;\r\n }\r\n\r\n getPosX() {\r\n return this.mixins.movable ? this.mixins.movable.posX : this.x;\r\n }\r\n\r\n getPosY() {\r\n return this.mixins.movable ? this.mixins.movable.posY : this.y;\r\n }\r\n\r\n setPosX(value) {\r\n return this.mixins.movable ? this.mixins.movable.posX = value : this.x = value;\r\n }\r\n\r\n setPosY(value) {\r\n return this.mixins.movable ? this.mixins.movable.posY = value : this.y = value;\r\n }\r\n\r\n rotate = (origin, angle, isSlabMode) => {\r\n let ret = {x: 0, y: 0};\r\n let tr = {x: this.getPosX() - origin.x, y: this.getPosY() - origin.y};\r\n\r\n ret.x = tr.x * Math.cos(angle) - tr.y * Math.sin(angle);\r\n ret.y = tr.x * Math.sin(angle) + tr.y * Math.cos(angle);\r\n\r\n //console.log(\"isSlabMode in point rotation\", isSlabMode)\r\n if (isSlabMode) {\r\n //todo rotation in slab mode\r\n this.setPosX(Math.round10(ret.x, -5) + Math.round10(origin.x, -1));\r\n this.setPosY(Math.round10(ret.y, -5) + Math.round10(origin.y, -1));\r\n } else {\r\n this.setPosX(Math.round10(ret.x, -5) + Math.round10(origin.x, -1));\r\n this.setPosY(Math.round10(ret.y, -5) + Math.round10(origin.y, -1));\r\n }\r\n };\r\n\r\n getPointField = () => {\r\n let fieldWidth = sqftConfig.fieldWidth,\r\n center = fieldWidth / 2,\r\n scale = workspace.getScale(),\r\n offset = parent.getOffset();\r\n\r\n return {\r\n x: (this.x * scale) - center + offset.x,\r\n y: (this.y * scale) - center + offset.y,\r\n width: fieldWidth\r\n };\r\n };\r\n\r\n getPointCords = () => {\r\n let pointField = this.getPointField();\r\n\r\n return {\r\n x: pointField.x + pointField.width / 2,\r\n y: pointField.y + pointField.width / 2\r\n }\r\n };\r\n}\r\n","import RenderMeasurementsInsideShape from \"./renderMeasurementsInsideShape\";\r\nimport workspace from \"../../workspace\";\r\nimport sqftConfig from \"../../../store/sqftConfig\";\r\nimport {getPointField} from \"../../../../../helpers/sqftHelper\";\r\nimport RenderFigures from \"../../../helpers/renderFigures\";\r\nimport RenderSVG from \"./renderSVG\";\r\n\r\nclass RenderMovableImage {\r\n constructor(movableImage) {\r\n this.movableImage = movableImage;\r\n this.renderMeasurementsInsideShape = new RenderMeasurementsInsideShape(movableImage);\r\n this.renderSVG = new RenderSVG(movableImage);\r\n }\r\n\r\n destroy = () => {\r\n //this.renderMeasurementsInsideShape.destroy();\r\n }\r\n\r\n setOuterShape = (value) => {\r\n this.renderMeasurementsInsideShape.outerShape = value\r\n }\r\n\r\n render = (ctx) => {\r\n if (workspace && workspace.getState().loading) return;\r\n if (this.movableImage.getIsRotatable()) {\r\n this.movableImage.shapeRotatable.render(ctx);\r\n }\r\n\r\n if (this.movableImage.attachedTo) {\r\n //this.renderSVG.renderAttachedTo(ctx);\r\n } else {\r\n this.renderSVG.render(ctx);\r\n\r\n //render measurements inside the shape\r\n const outerShape = this.movableImage.getOuterShape();\r\n if (this.movableImage.shouldRenderMeasurementsInsideTheShape() && outerShape) {\r\n this.movableImage.revealMeasurementsInsideShape();\r\n this.setOuterShape(outerShape);\r\n this.renderMeasurementsInsideShape.render(ctx);\r\n } else {\r\n this.movableImage.hideMeasurementsInsideShape();\r\n }\r\n }\r\n\r\n //render lines in dev mode\r\n if (sqftConfig.isDevMode()) {\r\n this.movableImage.getLines().forEach((activeShapeLine) => {\r\n let pointFieldActiveShapeLineFrom = getPointField(activeShapeLine.from.x, activeShapeLine.from.y, this.movableImage);\r\n RenderFigures.renderCircle(pointFieldActiveShapeLineFrom, 20, 1, '#63b141');\r\n });\r\n }\r\n return []; //no triangles for images\r\n }\r\n}\r\n\r\nexport default RenderMovableImage\r\n","import store from \"../../../../../../../store\";\r\nimport {\r\n rotatePoint,\r\n getPointDistance,\r\n getPointField,\r\n findClosestPointPairs, inchesToMm,\r\n} from \"../../../../../helpers/sqftHelper\";\r\n// import ShapeHelper from \"../../../../../helpers/shapeHelper\";\r\nimport RenderFigures from \"../../../helpers/renderFigures\";\r\nimport {getClosestIntersectionPoints, getIntersectionPointsAndLines} from \"../shapeParts/slabParts/seamToolHelper\";\r\nimport {COLORS} from \"../../../../../../../colorThemes\";\r\nimport sqftConfig from \"../../../store/sqftConfig\";\r\nimport {MEASURE_UNITS} from \"../../../../../constants\";\r\n\r\nclass RenderMeasurementsInsideShape {\r\n constructor(movableImage) {\r\n this.movableImage = movableImage;\r\n this.outerShape = null;\r\n this.lineOffset = 1;\r\n\r\n const serverState = store.getState().serverState;\r\n this.lineStartVertical = { x: -serverState.windowWidth, y: 0 };\r\n this.lineEndVertical = { x: serverState.windowWidth, y: 0 };\r\n this.lineStartHorizontal = { x: 0, y: -serverState.windowHeight };\r\n this.lineEndHorizontal = { x: 0, y: serverState.windowHeight };\r\n }\r\n\r\n setOuterShape = (value) => {\r\n this.outerShape = value\r\n }\r\n\r\n updateLinePoints() {\r\n const serverState = store.getState().serverState;\r\n const imageCenter = this.movableImage.getCenter();\r\n const angle = this.movableImage.rotatedDegrees;\r\n const imagePosOnField = this.movableImage.getCenterPosition();\r\n const pos = this.outerShape.getPosition();\r\n const imagePosOnShape = {x: imagePosOnField.x - pos.x, y: imagePosOnField.y - pos.y};\r\n void imagePosOnShape;\r\n void imageCenter;\r\n\r\n this.lineStartVertical = rotatePoint({ x: -serverState.windowWidth, y: imagePosOnShape.y }, imagePosOnShape, -angle);\r\n this.lineEndVertical = rotatePoint( { x: serverState.windowWidth, y: imagePosOnShape.y }, imagePosOnShape, -angle);\r\n this.lineStartVerticalOnImage = rotatePoint( { x: -serverState.windowWidth, y: imageCenter.y }, imageCenter, -angle);\r\n this.lineEndVerticalOnImage = rotatePoint({ x: serverState.windowWidth, y: imageCenter.y }, imageCenter, -angle);\r\n\r\n this.lineStartHorizontal = rotatePoint( { x: imagePosOnShape.x, y: -serverState.windowHeight }, imagePosOnShape, -angle);\r\n this.lineEndHorizontal = rotatePoint({ x: imagePosOnShape.x, y: serverState.windowHeight }, imagePosOnShape, -angle);\r\n this.lineStartHorizontalOnImage = rotatePoint( { x: imageCenter.x, y: -serverState.windowHeight }, imageCenter, -angle);\r\n this.lineEndHorizontalOnImage = rotatePoint({ x: imageCenter.x, y: serverState.windowHeight }, imageCenter, -angle);\r\n }\r\n\r\n render = (ctx) => {\r\n this.updateLinePoints();\r\n const imageCenterPosOnField = this.movableImage.getCenterPosition();\r\n const pos = this.outerShape.getPosition();\r\n const imageCenterPosOnShape = {x: imageCenterPosOnField.x - pos.x, y: imageCenterPosOnField.y - pos.y};\r\n const imagePosOnField = this.movableImage.getPosition();\r\n const imagePosOnShape = {x: imagePosOnField.x - pos.x, y: imagePosOnField.y - pos.y};\r\n\r\n ctx.lineWidth = 1;\r\n ctx.strokeStyle = COLORS.red; //COLOR_THEMES[sqftConfig.activeTheme].primary;\r\n\r\n // horizontal line\r\n const sideImagePoints = this.getImageSidePoints(this.lineStartVerticalOnImage, this.lineEndVerticalOnImage);\r\n const sideShapePoints = this.getShapeSidePoints(this.lineStartVertical, this.lineEndVertical);\r\n this.renderLineToBorder(ctx, sideShapePoints, sideImagePoints, imagePosOnShape);\r\n\r\n // vertical line\r\n this.renderArrowLineToCenter(ctx, imageCenterPosOnShape);\r\n }\r\n\r\n getImageSidePoints = (verticalLinePoint1, verticalLinePoint2) => {\r\n const lines = this.movableImage.getLines();\r\n\r\n return getIntersectionPointsAndLines(\r\n lines, verticalLinePoint1, verticalLinePoint2\r\n );\r\n }\r\n\r\n getShapeSidePoints = (verticalLinePoint1, verticalLinePoint2) => {\r\n return getIntersectionPointsAndLines(\r\n this.outerShape.getLines(true), verticalLinePoint1, verticalLinePoint2\r\n );\r\n }\r\n\r\n renderLineToBorder = (ctx, sideShapePoints, sideImagePoints, imagePosOnShape) => {\r\n if (!sideShapePoints.length) {\r\n return\r\n }\r\n const shapePos = this.outerShape.getPosition();\r\n const intersectionsWithShape = sideShapePoints.map(sideShapePoint => {\r\n return sideShapePoint.intersectionCords;\r\n });\r\n\r\n const intersectionsWithImage = sideImagePoints.map(sideImagePoint => {\r\n return {\r\n x: sideImagePoint.intersectionCords.x + imagePosOnShape.x,\r\n y: sideImagePoint.intersectionCords.y + imagePosOnShape.y,\r\n imageLine: sideImagePoint.line\r\n };\r\n });\r\n\r\n const closestPointPairs = findClosestPointPairs(intersectionsWithShape, intersectionsWithImage);\r\n\r\n for (const [index, closestPointPair] of closestPointPairs.entries()) {\r\n if (closestPointPair.pointA && closestPointPair.pointB) {\r\n const startPointField = getPointField(closestPointPair.pointA.x, closestPointPair.pointA.y, this.outerShape);\r\n const endPointField = getPointField(closestPointPair.pointB.x, closestPointPair.pointB.y, this.outerShape);\r\n\r\n ctx.beginPath();\r\n ctx.moveTo(startPointField.x, startPointField.y);\r\n ctx.lineTo(endPointField.x, endPointField.y);\r\n\r\n ctx.closePath();\r\n ctx.stroke();\r\n\r\n //const fontSize = getFontSizeFromContext(ctx);\r\n //let midPoint = getMidPoint(closestPointPair.pointA, closestPointPair.pointB);\r\n //midPoint = {x: midPoint.x + shapePos.x, y: midPoint.y + shapePos.y - fontSize / 2 / scale}\r\n const length = sqftConfig.measureUnit === MEASURE_UNITS.Metric\r\n ? inchesToMm(closestPointPair.distance, false, true)\r\n : closestPointPair.distance;\r\n\r\n // this.renderLineMeasurement(ctx,\r\n // midPoint,\r\n // length < 0.3 ? '' : length,\r\n // )\r\n const betweenPointFrom = {\r\n x: closestPointPair.pointA.x + shapePos.x,\r\n y: closestPointPair.pointA.y + shapePos.y\r\n }\r\n const betweenPointTo = {\r\n x: closestPointPair.pointB.x + shapePos.x,\r\n y: closestPointPair.pointB.y + shapePos.y\r\n }\r\n\r\n //closestPointPair.pointB.imageLine.measurementInsideShape.setPos(midPoint);\r\n closestPointPair.pointB.imageLine.measurementInsideShape.setPos({x: 1, y: 1}); // this is needed to render measurements\r\n closestPointPair.pointB.imageLine.measurementInsideShape.setValue(length);\r\n\r\n void index;\r\n if (closestPointPair.pointB.imageLine.lineIndex === 1) {\r\n closestPointPair.pointB.imageLine.measurementInsideShape.setBetweenPoints(betweenPointTo, betweenPointFrom); // this will override pos value\r\n } else {\r\n closestPointPair.pointB.imageLine.measurementInsideShape.setBetweenPoints(betweenPointFrom, betweenPointTo); // this will override pos value\r\n }\r\n }\r\n }\r\n }\r\n\r\n renderArrowLineToCenter = (ctx, imageCenterPosOnShape) => {\r\n let imageCenterPosOnShapePointField = getPointField(imageCenterPosOnShape.x, imageCenterPosOnShape.y, this.outerShape);\r\n let [intersectionXPointAndLine1, intersectionXPointAndLine2] = getClosestIntersectionPoints(\r\n this.outerShape.getLines(true), this.lineStartHorizontal, this.lineEndHorizontal, imageCenterPosOnShape\r\n );\r\n\r\n // we need only image lines that was intersected with the center line that supposed to be lines with the index 0 and 2\r\n let [intersectionXPointAndLine1WithImage, intersectionXPointAndLine2WithImage] = getClosestIntersectionPoints(\r\n this.movableImage.getLines(true), this.lineStartHorizontalOnImage, this.lineEndHorizontalOnImage, this.movableImage.getCenterPosition()\r\n );\r\n\r\n if (intersectionXPointAndLine1 && intersectionXPointAndLine2) {\r\n let intersectionXPoint1 = intersectionXPointAndLine1.intersectionCords;\r\n let intersectionXPoint2 = intersectionXPointAndLine2.intersectionCords;\r\n let intersectionXPoint1PointField = getPointField(intersectionXPoint1.x, intersectionXPoint1.y, this.outerShape);\r\n let intersectionXPoint2PointField = getPointField(intersectionXPoint2.x, intersectionXPoint2.y, this.outerShape);\r\n\r\n ctx.beginPath();\r\n RenderFigures.drawArrow(ctx,\r\n intersectionXPoint1PointField.x,\r\n intersectionXPoint1PointField.y + this.lineOffset,\r\n imageCenterPosOnShapePointField.x,\r\n imageCenterPosOnShapePointField.y - this.lineOffset\r\n );\r\n\r\n RenderFigures.drawArrow(ctx,\r\n imageCenterPosOnShapePointField.x,\r\n imageCenterPosOnShapePointField.y + this.lineOffset,\r\n intersectionXPoint2PointField.x,\r\n intersectionXPoint2PointField.y - this.lineOffset\r\n );\r\n ctx.closePath();\r\n ctx.stroke();\r\n\r\n //const scale = sqftConfig.scale;\r\n let measurement1Distance = getPointDistance(intersectionXPoint1, imageCenterPosOnShape);\r\n measurement1Distance = sqftConfig.measureUnit === MEASURE_UNITS.Metric\r\n ? inchesToMm(measurement1Distance, false, true)\r\n : measurement1Distance;\r\n\r\n const shapePos = this.outerShape.getPosition();\r\n const betweenPointTo = {\r\n x: intersectionXPoint1.x + shapePos.x,\r\n y: intersectionXPoint1.y + shapePos.y\r\n }\r\n const betweenPointFrom = {\r\n x: imageCenterPosOnShape.x + shapePos.x,\r\n y: imageCenterPosOnShape.y + shapePos.y\r\n }\r\n if (intersectionXPointAndLine1WithImage) {\r\n intersectionXPointAndLine1WithImage.line.measurementInsideShape.setPos({x: 1, y: 1});\r\n intersectionXPointAndLine1WithImage.line.measurementInsideShape.setValue(measurement1Distance);\r\n intersectionXPointAndLine1WithImage.line.measurementInsideShape.setBetweenPoints(betweenPointFrom, betweenPointTo);\r\n }\r\n\r\n // THIS CALCULATIONS WAS USED TO GET POS WITHOUT USING BETWEEN POINTS\r\n //const measurement1Midpoint = getMidPoint(intersectionXPoint1, imageCenterPosOnShape);\r\n //const metrics1Point = ctx.measureText(measurement1Distance);\r\n //const shapePos = this.outerShape.getPosition();\r\n // const offsetPoint1 = {\r\n // x: measurement1Midpoint.x + shapePos.x + metrics1Point.width / 2 / scale,\r\n // y: measurement1Midpoint.y + shapePos.y\r\n // }\r\n //const measurement1angle = getAngleBetweenTwoPoints(intersectionXPoint2, imageCenterPosOnShape);\r\n //intersectionXPointAndLine1WithImage.line.measurementInsideShape.setAngle(measurement1angle);\r\n //intersectionXPointAndLine1WithImage.line.measurementInsideShape.setPos(offsetPoint2);\r\n //intersectionXPointAndLine1WithImage.line.measurementInsideShape.setBetweenPoints(null, null);\r\n\r\n // THIS CALCULATIONS WAS USED TO GET POS WITHOUT USING BETWEEN POINTS\r\n // const measurement2Midpoint = getMidPoint(intersectionXPoint2, imageCenterPosOnShape);\r\n // const metrics2Point = ctx.measureText(measurement2Distance);\r\n // const offsetPoint2 = {\r\n // x: measurement2Midpoint.x + shapePos.x + metrics2Point.width / 2 / scale,\r\n // y: measurement2Midpoint.y + shapePos.y\r\n // }\r\n // const measurement2angle = getAngleBetweenTwoPoints(intersectionXPoint2, imageCenterPosOnShape);\r\n // intersectionXPointAndLine2WithImage.line.measurementInsideShape.setPos(offsetPoint2);\r\n // intersectionXPointAndLine2WithImage.line.measurementInsideShape.setAngle(measurement2angle);\r\n\r\n let measurement2Distance = getPointDistance(intersectionXPoint2, imageCenterPosOnShape);\r\n measurement2Distance = sqftConfig.measureUnit === MEASURE_UNITS.Metric\r\n ? inchesToMm(measurement2Distance, false, true)\r\n : measurement2Distance;\r\n\r\n const measurement2BetweenPointTo = {\r\n x: intersectionXPoint2.x + shapePos.x,\r\n y: intersectionXPoint2.y + shapePos.y\r\n }\r\n const measurement2BetweenPointFrom = {\r\n x: imageCenterPosOnShape.x + shapePos.x,\r\n y: imageCenterPosOnShape.y + shapePos.y\r\n }\r\n if (intersectionXPointAndLine1WithImage) {\r\n intersectionXPointAndLine2WithImage.line.measurementInsideShape.setPos({x: 1, y: 1});\r\n intersectionXPointAndLine2WithImage.line.measurementInsideShape.setValue(measurement2Distance);\r\n intersectionXPointAndLine2WithImage.line.measurementInsideShape.setBetweenPoints(measurement2BetweenPointFrom, measurement2BetweenPointTo);\r\n }\r\n }\r\n }\r\n\r\n // renderLineMeasurement = (ctx, measurementPos, measurementDistance) => {\r\n // this.__measurement.pos.x = measurementPos.x;\r\n // this.__measurement.pos.y = measurementPos.y;\r\n // this.__measurement.value = measurementDistance;\r\n //\r\n // this.__measurement.render(ctx);\r\n // }\r\n}\r\n\r\nexport default RenderMeasurementsInsideShape\r\n","import sqftConfig from \"../../../store/sqftConfig\";\r\nimport RenderFigures from \"../../../helpers/renderFigures\";\r\nimport {SQFT_APPLIANCES} from \"../../../../../constants\";\r\nimport RenderParts from \"../../../helpers/renderParts\";\r\n\r\nclass RenderSVG {\r\n constructor(movableImage) {\r\n this.movableImage = movableImage;\r\n }\r\n\r\n render = (ctx) => {\r\n let svgImageDataURI = \"\";\r\n const scale = sqftConfig.scale;\r\n\r\n if (this.movableImage.isIE() && this.movableImage.isSVG(this.movableImage.image)) {\r\n svgImageDataURI = atob(this.movableImage.getSrc(this.movableImage.image).replace(/data:image\\/svg\\+xml;base64,/, ''));\r\n }\r\n\r\n //let canvas = workspace.getCanvas();\r\n\r\n ctx.save();\r\n let posField = this.movableImage.getPosField();\r\n ctx.translate(posField.x, posField.y);\r\n ctx.rotate(-this.movableImage.rotatedDegrees * Math.PI / 180);\r\n let imgOffset = {\r\n x: this.movableImage.size.width / -2 * scale,\r\n y: this.movableImage.size.height / -2 * scale\r\n };\r\n\r\n this.renderHovering(ctx, imgOffset);\r\n\r\n if (!this.movableImage.isIE()) {\r\n if (this.movableImage.subType === SQFT_APPLIANCES.sink) {\r\n RenderFigures.sink(ctx, imgOffset.x, imgOffset.y, this.movableImage.size.width * scale, this.movableImage.size.height * scale);\r\n } else if (this.movableImage.subType === SQFT_APPLIANCES.doubleSink) {\r\n RenderFigures.doubleSink(ctx, imgOffset.x, imgOffset.y, this.movableImage.size.width * scale, this.movableImage.size.height * scale);\r\n } else {\r\n const containerSize = {width: this.movableImage.size.width * scale, height: this.movableImage.size.height * scale}\r\n const size = this.getContainSize();\r\n RenderParts.drawStripedRectangle(ctx, imgOffset.x, imgOffset.y, containerSize.width, containerSize.height);\r\n RenderFigures.drawBorder(ctx, imgOffset, containerSize.width, containerSize.height);\r\n ctx.drawImage(this.movableImage.image, imgOffset.x, imgOffset.y, size.width, size.height);\r\n }\r\n } else if (svgImageDataURI) {\r\n ctx.drawSvg(svgImageDataURI, imgOffset.x, imgOffset.y, this.movableImage.size.width * scale, this.movableImage.size.height * scale);\r\n }\r\n ctx.restore();\r\n\r\n //render border points in dev mode\r\n if (sqftConfig.isDevMode()) {\r\n //dev movable point\r\n // ctx.beginPath();\r\n // ctx.strokeStyle = '#000'\r\n // ctx.arc(imgOffset.x, imgOffset.y, 20, 0, 2 * Math.PI);\r\n // ctx.stroke();\r\n // ctx.closePath();\r\n //\r\n // //dev border points\r\n // let testImagePoints = this.movableImage.getLinePointsPointField();\r\n // for (let testPoint of testImagePoints) {\r\n // ctx.beginPath();\r\n // ctx.strokeStyle = '#a02f2f';\r\n // ctx.lineWidth = 1;\r\n // ctx.arc(testPoint.x, testPoint.y, 10, 0, 2 * Math.PI);\r\n // ctx.stroke();\r\n // ctx.closePath();\r\n // //debugger // eslint-disable-line no-debugger\r\n // }\r\n }\r\n }\r\n\r\n getContainSize = () => {\r\n const aspectRatio = this.movableImage.initialSize.width / this.movableImage.initialSize.height;\r\n const scale = sqftConfig.scale;\r\n let newWidth, newHeight;\r\n if (this.movableImage.size.width / this.movableImage.size.height > aspectRatio) {\r\n // The width is larger than needed by the aspect ratio, so we base it on the height\r\n newHeight = this.movableImage.size.height;\r\n newWidth = newHeight * aspectRatio;\r\n } else {\r\n // The height is larger than needed based on the aspect ratio, so we base it on the width\r\n newWidth = this.movableImage.size.width;\r\n newHeight = newWidth / aspectRatio;\r\n }\r\n\r\n return {width: newWidth * scale, height: newHeight * scale}\r\n }\r\n\r\n renderHovering = (ctx, imgOffset) => {\r\n let scale = sqftConfig.scale;\r\n\r\n if (this.movableImage.isHovering() && !this.movableImage.isAnyLineHovering()) {\r\n ctx.beginPath();\r\n ctx.rect(imgOffset.x, imgOffset.y, this.movableImage.size.width * scale, this.movableImage.size.height * scale);\r\n ctx.strokeStyle = this.movableImage.hoverColor;\r\n ctx.lineWidth = 5;\r\n ctx.stroke();\r\n ctx.closePath();\r\n }\r\n }\r\n\r\n renderAttachedTo = () => {\r\n // if (this.movableImage.image) {\r\n // let midPoint = getMidPoint(this.movableImage.attachedTo.from, this.movableImage.attachedTo.to);\r\n // let lineOffset = this.movableImage.attachedTo.getOffset();\r\n // let imgOffset = {\r\n // x: 0,\r\n // y: -32\r\n // },\r\n // pointData = {\r\n // x: (midPoint.x * scale) + lineOffset.x - 4,\r\n // y: (midPoint.y * scale) + lineOffset.y - (size.height * scale) - 4,\r\n // radius: size.width * scale / 2 + 8,\r\n // arcStart: 0,\r\n // arcEnd: 2 * Math.PI\r\n // };\r\n // if (this.movableImage.attachedTo.getOrientation) {\r\n // if (this.movableImage.attachedTo.getOrientation() == 1) { //horizontal\r\n // pointData.x -= 64;\r\n // pointData.y += 5 * scale;\r\n // } else {\r\n // // console.log(scale);\r\n // if (scale >= 6) {\r\n // pointData.y -= ((6 - scale) * scale / 2);\r\n // } else {\r\n // pointData.y += (6 - scale) * 6;\r\n // }\r\n // }\r\n // }\r\n // if (!this.movableImage.isIE() || !this.movableImage.isSVG()) {\r\n // ctx.drawImage(this.movableImage.image, pointData.x - (size.width * scale / 2) + imgOffset.x, (midPoint.y * scale) + lineOffset.y - (size.height * scale / 2) - 4 + imgOffset.y + (this.movableImage.attachedTo.getOrientation() == 1 ? 32 : 0), size.width * scale, size.height * scale);\r\n // } else {\r\n // ctx.drawSvg(svgImageDataURI, pointData.x - (size.width * scale / 2) + imgOffset.x, (midPoint.y * scale) + lineOffset.y - (size.height * scale / 2) - 4 + imgOffset.y + (this.movableImage.attachedTo.getOrientation() == 1 ? 32 : 0), size.width * scale, size.height * scale);\r\n // }\r\n // ctx.save();\r\n // ctx.beginPath();\r\n // ctx.arc(pointData.x, pointData.y, pointData.radius, pointData.arcStart, pointData.arcEnd);\r\n // ctx.strokeStyle = COLOR_THEMES[sqftConfig.activeTheme].primary;\r\n // ctx.lineWidth = 4;\r\n // ctx.stroke();\r\n // ctx.fillStyle = \"RGBA(0,0,192,0.1)\";\r\n // ctx.fill();\r\n // ctx.closePath();\r\n // ctx.restore();\r\n // }\r\n }\r\n}\r\n\r\nexport default RenderSVG\r\n","import { v4 as uuidv4 } from 'uuid';\r\n\r\nexport default class MiteredSegment {\r\n id;\r\n _length = {}; /* NumberText */\r\n height; /* int */\r\n thickness = {}; /* NumberText */\r\n priority; /* int */\r\n\r\n\r\n constructor(length, height, thickness) {\r\n this.id = uuidv4();\r\n this._length = length;\r\n this.height = height;\r\n this.thickness = thickness;\r\n this.priority = 0;\r\n }\r\n\r\n set length(length) {\r\n this._length = length;\r\n }\r\n\r\n get length() {\r\n return this._length;\r\n }\r\n\r\n setPriority = (priority) => {\r\n this.priority = priority\r\n };\r\n\r\n exportSegment = () => ({\r\n height: this.height,\r\n thickness: this.thickness ? this.thickness.value : this.thickness,\r\n length: this.length.value,\r\n })\r\n}\r\n","import workspace from \"../workspace\";\r\nimport {getBacksplashesPos, getBumpoutPointCords, getShapePosAndPoints} from \"./slabHelper\";\r\nimport sqftShapeManager from \"../../store/sqftShapeManager\";\r\nimport {SHAPE_PART_ID, WATERFALL_SHAPES_KEY} from \"../../../../constants\";\r\nimport SlabAdditionalShape from \"./slabAdditionalShape\";\r\nimport Polygon from \"../shapes/layouts/polygon\";\r\nimport sqftConfig from \"../../store/sqftConfig\";\r\nimport {\r\n getParallelPoints,\r\n getPointOnTheLine,\r\n mmToInches\r\n} from \"../../../../helpers/sqftHelper\";\r\nimport {addEdgeToTheLines, addFakeEdgeToLines, setLineParams} from \"../../helpers/lineHelper\";\r\nimport workspaceControllers from \"../../store/workspaceControllers\";\r\nimport {getMiterEdgeFeature, getMiterEdgeHeight, isFeatureUnitUseEach} from \"../../../../helpers/featureHelper\";\r\nimport config from \"../../store/sqftConfig\";\r\nimport sqftResourcesManager from \"../../store/sqftResoursesManager\";\r\n\r\nclass SlabAdditionalShapes {\r\n additionalShapes = [];\r\n\r\n initBacksplashAndEdgeShapes = () => {\r\n let lines = workspace.getLines();\r\n lines.forEach((line) => {\r\n if (!this.isInited(line)) {\r\n let posOnField, pointsCords;\r\n const parentShape = line.getParent();\r\n const attachedToLineResource = sqftResourcesManager.getAttachedToLineResource(line);\r\n const miterEdgeHeight = getMiterEdgeHeight(attachedToLineResource ? attachedToLineResource.featureId : null);\r\n\r\n // 1.) init backsplash shapes\r\n if (line.isWithBacksplash()) {\r\n [posOnField, pointsCords] = getBacksplashesPos(line, +line.getBacksplashHeight());\r\n\r\n // 2.) init mitered edgeShapes for waterfall tool\r\n } else if ((line.isWithMiterEdge() || line.isWithFakeEdge())\r\n && parentShape.partId === SHAPE_PART_ID.waterfallPiece\r\n ) {\r\n // skip creation for one mitered edge shape that was created with waterfall tool\r\n if (line.getState().slabModeSkipMiteredEdgeCreation) {\r\n return;\r\n }\r\n const segment = workspaceControllers.waterfall.getSegmentById(parentShape.slabModeWaterfallSegmentId);\r\n if (!segment) {\r\n //todo fix missing segment\r\n return;\r\n }\r\n [posOnField, pointsCords] = getBacksplashesPos(line, segment.thickness);\r\n // 3.) init mitered edgeShapes but skip mitered tool\r\n } else if (line.isWithMiterEdge() && !line.isWithMitered() && miterEdgeHeight > 0.5) {\r\n [posOnField, pointsCords] = getBacksplashesPos(line, miterEdgeHeight);\r\n\r\n // 4.) init waterfall edgeShapes but skip mitered tool\r\n } else if (line.isWithWaterfallEdgeFeature() && !isFeatureUnitUseEach(line.getAttachedFeature())) {\r\n [posOnField, pointsCords] = getBacksplashesPos(line, sqftConfig.waterfallImperialHeight);\r\n } else {\r\n return; // Skip the current iteration if neither condition is met\r\n }\r\n\r\n // create shape\r\n let shapeId = sqftShapeManager.addShape(new Polygon(pointsCords), 'square', posOnField, SHAPE_PART_ID.backsplashPiece);\r\n const shape = workspace.getShapeById(shapeId);\r\n\r\n // set shape additional params\r\n shape.setIsPointsChanged(false);\r\n shape.setSlabModeCoreParentId(\r\n line.getParent().slabModeCoreParentId ? line.getParent().slabModeCoreParentId : line.getParent().id\r\n );\r\n shape.setSlabModeCoreParentPartId(\r\n line.getParent().slabParentPartId ? line.getParent().slabParentPartId : line.getParent().partId\r\n )\r\n //set shape feature id\r\n let featureId\r\n if (line.isWithBacksplash()) {\r\n featureId = line.getBacksplashFeatureId();\r\n featureId = featureId ? featureId : line.getParent().featureId;\r\n } else {\r\n featureId = line.getParent().featureId;\r\n }\r\n shape.setFeatureId(featureId);\r\n shape.setColorSet(line.getParent().colorSet);\r\n\r\n this.addActiveBacksplash(new SlabAdditionalShape(line, shapeId));\r\n }\r\n });\r\n };\r\n\r\n initBumpoutShapes = () => {\r\n let lines = workspace.getLines();\r\n lines.forEach((line) => {\r\n if (line.isWithBumpout() && !this.isInited(line)) {\r\n let pointsCords = getBumpoutPointCords(line);\r\n let posOnFiled = line.getParent().getPosition();//ShapeHelper.getCenterPoint(pointsCords);\r\n let shapeId = sqftShapeManager.addShape(new Polygon(pointsCords), 'square', posOnFiled, SHAPE_PART_ID.backsplashPiece);\r\n const shape = workspace.getShapeById(shapeId);\r\n shape.setIsPointsChanged(false);\r\n shape.setFeatureId(line.getParent().featureId);\r\n shape.setSlabModeCoreParentId(line.getParent().id);\r\n shape.setSlabModeCoreParentPartId(line.getParent().partId);\r\n shape.setColorSet(line.getParent().colorSet);\r\n\r\n this.addActiveBacksplash(new SlabAdditionalShape(line, shapeId));\r\n }\r\n });\r\n };\r\n\r\n initMiteredToolShapes = () => {\r\n let lines = workspace.getLines();\r\n lines.forEach((line) => {\r\n if (line.isWithMitered() && !this.isInited(line)) {\r\n const miteredPoints = line.miteredOverlay.getPoints();\r\n miteredPoints.forEach((point, index) => {\r\n let next = index + 1;\r\n if (miteredPoints[next]) {\r\n let segment = line.miteredOverlay.getSegmentBetweenPoints(point, miteredPoints[next]);\r\n //let widthValue = segment.width.value;\r\n let heightValue = segment.height / sqftConfig.getMeasureMultiplier();\r\n if (heightValue > 0.005) {\r\n let [posOnFiled, pointsCords] = getShapePosAndPoints(line.getParent(), point, miteredPoints[next], heightValue);\r\n\r\n let shapeId = sqftShapeManager.addShape(new Polygon(pointsCords), 'square', posOnFiled, SHAPE_PART_ID.backsplashPiece);\r\n const shape = workspace.getShapeById(shapeId);\r\n shape.setIsPointsChanged(false);\r\n shape.setFeatureId(line.getParent().featureId);\r\n shape.setSlabModeCoreParentId(line.getParent().id);\r\n shape.setSlabModeCoreParentPartId(line.getParent().partId);\r\n shape.setColorSet(line.getParent().colorSet);\r\n\r\n this.addActiveBacksplash(new SlabAdditionalShape(line, shapeId));\r\n }\r\n }\r\n });\r\n }\r\n });\r\n };\r\n\r\n initUnderlaymentToolShapes = () => {\r\n let lines = workspace.getLines();\r\n lines.forEach((line) => {\r\n if (line.isWithUnderlayment() && !this.isInited(line)) {\r\n const underlaymentPoints = line.underlaymentOverlay.getPoints();\r\n underlaymentPoints.forEach((point, index) => {\r\n let next = index + 1;\r\n if (underlaymentPoints[next]) {\r\n let segment = line.underlaymentOverlay.getSegmentBetweenPoints(point, underlaymentPoints[next]);\r\n //let widthValue = segment.width.value;\r\n let heightValue = segment.height;\r\n let [posOnFiled, pointsCords] = getShapePosAndPoints(line.getParent(), point, underlaymentPoints[next], heightValue);\r\n\r\n let shapeId = sqftShapeManager.addShape(new Polygon(pointsCords), 'square', posOnFiled, SHAPE_PART_ID.backsplashPiece);\r\n const shape = workspace.getShapeById(shapeId);\r\n shape.setIsPointsChanged(false);\r\n shape.setFeatureId(line.getParent().featureId);\r\n shape.setSlabModeCoreParentId(line.getParent().id);\r\n shape.setSlabModeCoreParentPartId(line.getParent().partId);\r\n shape.setColorSet(line.getParent().colorSet);\r\n\r\n this.addActiveBacksplash(new SlabAdditionalShape(line, shapeId));\r\n }\r\n });\r\n }\r\n });\r\n };\r\n\r\n initWaterfallToolShapes = () => {\r\n let lines = workspace.getLines();\r\n lines.forEach((line) => {\r\n if ((line.isWithWaterfallToolEdge() || line.isWithPeninsulaUnderwrapEdge())\r\n && !this.isInited(line)\r\n ) {\r\n const waterfallSegments = line.waterfallOverlay.getSegments();\r\n\r\n waterfallSegments.forEach((segment) => {\r\n const [from, to] = this.getWaterfallPoints(line, segment);\r\n if (from && to) {\r\n const height = config.measureUnit === \"Imperial\" ? segment.height : mmToInches(segment.height);\r\n let [posOnFiled, pointsCords] = getShapePosAndPoints(line.getParent(), from, to, height);\r\n\r\n let shapeId = sqftShapeManager.addShape(new Polygon(pointsCords.reverse()), 'square', posOnFiled, SHAPE_PART_ID.waterfallPiece);\r\n const shape = workspace.getShapeById(shapeId);\r\n shape.setIsPointsChanged(false);\r\n shape.setFeatureId(line.getParent().featureId);\r\n shape.setColorSet(line.getParent().colorSet);\r\n shape.setSlabModeCoreParentId(line.getParent().id);\r\n shape.setSlabModeCoreParentPartId(line.getParent().partId);\r\n shape.setSlabModeWaterfallSegmentId(segment.id);\r\n\r\n this.addMiteredEdgesToWaterfallShape(shapeId, segment);\r\n\r\n this.addActiveBacksplash(new SlabAdditionalShape(line, shapeId));\r\n\r\n }\r\n });\r\n }\r\n });\r\n };\r\n\r\n addMiteredEdgesToWaterfallShape = (shapeId, segment) => {\r\n const miteredEdge = getMiterEdgeFeature();\r\n\r\n const waterfallShapes = WATERFALL_SHAPES_KEY;\r\n const edgeParams = {\r\n [waterfallShapes.cabinetReturn]: [3],\r\n [waterfallShapes.waterfall]: [1, 2, 3],\r\n [waterfallShapes.overhangReturn]: [1],\r\n [waterfallShapes.underlayment]: [0]\r\n };\r\n if (edgeParams[segment.name]) {\r\n if (miteredEdge) {\r\n addEdgeToTheLines(shapeId, miteredEdge, edgeParams[segment.name], false);\r\n } else {\r\n addFakeEdgeToLines(shapeId, edgeParams[segment.name]);\r\n }\r\n }\r\n\r\n if (segment.name === waterfallShapes.waterfall) {\r\n setLineParams(shapeId, [1, 2, 3], { slabModeSkipMiteredEdgeCreation: true });\r\n }\r\n };\r\n\r\n getWaterfallPoints = (line, segment) => {\r\n const key = segment.key;\r\n const length = config.measureUnit === \"Imperial\" ? segment.length : mmToInches(segment.length);\r\n if (segment.isDisabled) {\r\n return [null, null]\r\n }\r\n switch (key) {\r\n case WATERFALL_SHAPES_KEY.cabinetReturn: {\r\n const secondPoint = getPointOnTheLine(line.to, line.from, -length);\r\n return [secondPoint, line.to]\r\n }\r\n case WATERFALL_SHAPES_KEY.waterfall: {\r\n const distanceFromLine = -segment.height * 2 / sqftConfig.getMeasureMultiplier();\r\n const [firstPoint, secondPoint] = getParallelPoints(line.from, line.to, distanceFromLine);\r\n return [firstPoint, secondPoint]\r\n }\r\n case WATERFALL_SHAPES_KEY.overhangReturn: {\r\n const secondPoint = getPointOnTheLine(line.from, line.to, -length);\r\n return [line.from, secondPoint]\r\n }\r\n case WATERFALL_SHAPES_KEY.underlayment: {\r\n const nextLine = line.getParent().getNextLine(line);\r\n //const secondPoint = getPointOnTheLine(nextLine.to, line.from, -segment.length);\r\n //return [nextLine.from, nextLine.to]\r\n const miteredEdgeDistance = -getMiterEdgeHeight();\r\n const [firstPoint, secondPoint] = getParallelPoints(nextLine.from, nextLine.to, miteredEdgeDistance);\r\n return [secondPoint, firstPoint]\r\n }\r\n case WATERFALL_SHAPES_KEY.peninsulaUnderwrap: {\r\n const [firstPoint, secondPoint] = getParallelPoints(line.from, line.to, -segment.height);\r\n return [firstPoint, secondPoint]\r\n }\r\n default:\r\n return [null, null]\r\n }\r\n }\r\n\r\n isInited = (line) => {\r\n return this.additionalShapes.some( SlabAdditionalShape => {\r\n return SlabAdditionalShape.line.id === line.id\r\n })\r\n }\r\n\r\n getShapeAdditionalShapes = (shape) => {\r\n return this.additionalShapes.filter( SlabAdditionalShape => {\r\n return SlabAdditionalShape.line.getParent().id === shape.id\r\n })\r\n }\r\n\r\n updateAdditionalShapeFeature = (line, featureId) => {\r\n const additionalShape = this.findAdditionalShapeByLine(line);\r\n if (additionalShape) {\r\n const backsplashShape = workspace.getShapeById(additionalShape.backsplashShapeId);\r\n backsplashShape.setFeatureId(featureId);\r\n }\r\n }\r\n\r\n resetBacksplashes = () => {\r\n this.additionalShapes = [];\r\n }\r\n\r\n importData = (data) => {\r\n for (let activeBacksplashData of data) {\r\n let shape = workspace.importShape(activeBacksplashData.backsplashShape);\r\n shape.deregisterEvents();\r\n let line = workspace.getLineById(activeBacksplashData.line.id);\r\n let slabAdditionalShape = new SlabAdditionalShape(line, shape.id);\r\n this.addActiveBacksplash(slabAdditionalShape);\r\n }\r\n }\r\n\r\n exportData = () => {\r\n return this.additionalShapes\r\n .filter( SlabAdditionalShape => {\r\n let backsplashShape = workspace.getShapeById(SlabAdditionalShape.backsplashShapeId);\r\n return backsplashShape.partId !== SHAPE_PART_ID.seamPiece;\r\n })\r\n .map( SlabAdditionalShape => {\r\n let backsplashShape = workspace.getShapeById(SlabAdditionalShape.backsplashShapeId);\r\n\r\n return {\r\n backsplashShape: backsplashShape.export(),\r\n line: SlabAdditionalShape.line.export()\r\n }\r\n })\r\n }\r\n\r\n addActiveBacksplash = (SlabAdditionalShape) => {\r\n this.additionalShapes.push(SlabAdditionalShape);\r\n }\r\n\r\n findAdditionalShapeByLine = (line) => {\r\n return this.additionalShapes.find(additionalShape => additionalShape.line.id === line.id);\r\n }\r\n\r\n removeActiveBacksplashByLine = (line) => {\r\n for (let i = this.additionalShapes.length - 1; i >= 0; i--) {\r\n if (this.additionalShapes[i].line.id === line.id) {\r\n const shape = workspace.getShapeById(this.additionalShapes[i].backsplashShapeId);\r\n this.removeAllActiveBacksplashesAttachedToShape(shape);\r\n workspace.removeShapeById(this.additionalShapes[i].backsplashShapeId);\r\n }\r\n }\r\n }\r\n\r\n findOneByBacksplashShapeId = (backsplashShapeId) => {\r\n return this.additionalShapes.find(activeBacksplash => {\r\n return activeBacksplash.backsplashShapeId === backsplashShapeId\r\n })\r\n };\r\n\r\n /**\r\n * This will hide all additional shapes that was created for mitered edges, backsplashes and mitered segments\r\n */\r\n hideAdditionalShapes = () => {\r\n this.additionalShapes.forEach(SlabAdditionalShape => {\r\n let backsplashShape = workspace.getShapeById(SlabAdditionalShape.backsplashShapeId);\r\n if (backsplashShape) {\r\n backsplashShape.deregisterEvents();\r\n } else {\r\n console.error(\"SlabAdditionalShape not found, backsplashShapeId:\", SlabAdditionalShape.backsplashShapeId);\r\n }\r\n });\r\n };\r\n\r\n removeAllActiveBacksplashesAttachedToShape = (shape) => {\r\n const lines = shape.getLines();\r\n for (const line of lines) {\r\n this.removeActiveBacksplashByLine(line);\r\n }\r\n };\r\n\r\n restoreBacksplashShapes = () => {\r\n this.additionalShapes.forEach(SlabAdditionalShape => {\r\n let backsplashShape = workspace.getShapeById(SlabAdditionalShape.backsplashShapeId);\r\n if (backsplashShape.isHidden && backsplashShape.shapePieces.length === 0) {\r\n backsplashShape.reInitEvents();\r\n }\r\n });\r\n };\r\n\r\n removeShapeFromList = (shapeToRemove) => {\r\n this.additionalShapes = this.additionalShapes.filter(additionalShape => additionalShape.backsplashShapeId !== shapeToRemove.id);\r\n }\r\n}\r\n\r\nexport default SlabAdditionalShapes;\r\n","import {getParallelPoints, mmToInches} from \"../../../../helpers/sqftHelper\";\r\nimport config from \"../../store/sqftConfig\";\r\n\r\nexport const getBacksplashesPos = (line, thickness = -5) => {\r\n thickness = config.measureUnit === \"Imperial\" ? thickness : mmToInches(thickness);\r\n const shape = line.getParent();\r\n let shapePoints = [];\r\n const parallelPoints = getParallelPoints(line.from, line.to, -thickness);\r\n shapePoints.push(...parallelPoints);\r\n shapePoints.push(line.from);\r\n shapePoints.push(line.to);\r\n\r\n return [shape.pos, shapePoints]\r\n}\r\n\r\nexport const getShapePosAndPoints = (parent, from, to, thickness = -5) => {\r\n const shape = parent;\r\n let shapePoints = [];\r\n const parallelPoints = getParallelPoints(from, to, -thickness);\r\n shapePoints.push(...parallelPoints);\r\n shapePoints.push(from);\r\n shapePoints.push(to);\r\n\r\n return [shape.pos, shapePoints]\r\n}\r\n\r\nexport const getBumpoutPointCords = (line) => {\r\n return line.bumpoutOverlay.getBumpoutPointCords()\r\n}\r\n","import eventManager from \"../../store/sqftEventManager\";\r\nimport config from \"../../store/sqftConfig\";\r\nimport workspace from \"../workspace\";\r\nimport store from \"../../../../../../store\";\r\nimport {setSQFTMenuOpened} from \"../../../../../../actions/sqftMenuFunctions\";\r\nimport {updateSQFTCalculations} from \"../../../../../../actions/sqftFunctions\";\r\nimport {attachResource} from \"./resourseCanas\";\r\nimport $ from \"jquery\";\r\nimport {iconPlusBlue} from \"../../../../assetsSQFT\";\r\nimport {\r\n RESOURCE_ATTACHED_TO_TYPE,\r\n SIDEBAR_NAVIGATION_BUTTONS,\r\n SIDEBAR_NAVIGATION_CABINET_BUTTONS,\r\n SQFT_GROUP\r\n} from \"../../../../constants\";\r\n\r\nconst endCapCanvas = function() {\r\n this.cursorImage = null;\r\n this.addedImages = null; //like in edges\r\n this.img = null;\r\n this.isWaitingToRestoreCursor = false;\r\n\r\n this.setHighlighting = (disallowDemo) => {\r\n eventManager.stealCursor(true); // remove all other cursors\r\n workspace.setAllowEdges(false); // removing sizing lines\r\n workspace.setAllowBumpoutEdges(false); // removing bumpout lines\r\n config.highlight.points = false;\t// remove radiuses\r\n config.highlight.lines = true; // enable lines highlighting\r\n config.highlight.type = RESOURCE_ATTACHED_TO_TYPE.end_cap;\r\n\r\n if (!disallowDemo) {\r\n config.highlight.demoShow = true;\r\n }\r\n setTimeout(function () {\r\n config.highlight.demoShow = false;\r\n }, 1000);\r\n };\r\n\r\n this.setCursorImage = () => {\r\n let bounds = 18,\r\n imgWidth = bounds,\r\n imgHeight = bounds;\r\n\r\n let domImg = document.createElement('img');\r\n domImg.crossOrigin = \"Anonymous\";\r\n\r\n let $img = $(domImg);\r\n $img.css({\r\n position: 'absolute',\r\n width: '1px',\r\n height: '1px'\r\n });\r\n\r\n const imgOnLoad = () => {\r\n let bounds = 18;\r\n let ratio;\r\n if (imgWidth > imgHeight) {\r\n ratio = imgHeight / imgWidth;\r\n imgWidth = bounds;\r\n imgHeight = bounds * ratio;\r\n } else {\r\n ratio = imgWidth / imgHeight;\r\n imgHeight = bounds;\r\n imgWidth = bounds * ratio;\r\n }\r\n eventManager.setCursor('edge-select', this, true);\r\n this.cursorImage = { image: domImg, width: imgWidth, height: imgHeight };\r\n this.registerEvents(); // only after image is load!\r\n }\r\n $img.on('load', imgOnLoad);\r\n $img.appendTo($('body'));\r\n $img.attr('src', iconPlusBlue);\r\n\r\n this.img = $img;\r\n };\r\n\r\n this.registerEvents = () => {\r\n eventManager.setCursor('radius-select', this, true);\r\n eventManager.addEvent(\r\n eventManager.events.RENDER,\r\n this.renderCursor,\r\n this,\r\n eventManager.priorities.OVERALL\r\n );\r\n eventManager.addEvent(\r\n eventManager.events.MOUSE_UP,\r\n this.onMouseUp,\r\n this,\r\n eventManager.priorities.OVERALL\r\n );\r\n };\r\n\r\n this.deregisterEvents = () => {\r\n eventManager.resetCursor(this);\r\n eventManager.removeEvent(this);\r\n config.highlight.lines = false;\r\n }\r\n this.destroy = (protect, revertBackAfterMouseUp) => {\r\n if (revertBackAfterMouseUp) {\r\n eventManager.removeEvent(this, eventManager.events.RENDER); //remove render only, but wait for mouse up to set cursor again\r\n this.isWaitingToRestoreCursor = true;\r\n } else {\r\n this.deregisterEvents();\r\n }\r\n };\r\n\r\n this.onMouseUp = (mousePos) => {\r\n void mousePos;\r\n let hoveredLine = workspace.getHoveredLine();\r\n let hoveredLineCorner = workspace.getHoveredLineCorner();\r\n if (hoveredLine) {\r\n const state = store.getState();\r\n const updateCalculations = state.sqftState.updateCalculations;\r\n const SQFTGroup = state.sqftMenuState.SQFTGroup;\r\n const button = SQFTGroup === SQFT_GROUP.cabinets ? SIDEBAR_NAVIGATION_CABINET_BUTTONS.end_panel : SIDEBAR_NAVIGATION_BUTTONS.end_cap;\r\n const selectedFeature = state.sqftResourceState.selectedFeature;\r\n const featureNameTranslated = selectedFeature.getFeatureName();\r\n\r\n if (hoveredLine || hoveredLineCorner) {\r\n attachResource(hoveredLine, hoveredLineCorner, RESOURCE_ATTACHED_TO_TYPE.end_cap, selectedFeature.dbFeature.id, selectedFeature.partId, featureNameTranslated);\r\n } else {\r\n store.dispatch(setSQFTMenuOpened(button));\r\n }\r\n\r\n store.dispatch(updateSQFTCalculations(updateCalculations + 1));\r\n }\r\n this.checkForRestoreCursor();\r\n };\r\n this.checkForRestoreCursor = function() {\r\n if (this.isWaitingToRestoreCursor) {\r\n this.isWaitingToRestoreCursor = false;\r\n eventManager.removeEvent(this, eventManager.events.MOUSE_UP); //remove mouse up, it will be added in setCursorImage\r\n this.setHighlighting(true);\r\n this.setCursorImage();\r\n }\r\n };\r\n this.renderCursor = (ctx) => {\r\n if (this.cursorImage.image && ($(window).width() > 768)) {\r\n let mPos = eventManager.LastKnownMousePos;\r\n if (mPos) {\r\n ctx.drawImage(this.cursorImage.image, mPos.x + 10, mPos.y + 10, this.cursorImage.width, this.cursorImage.height);\r\n }\r\n }\r\n };\r\n};\r\n\r\nexport default new endCapCanvas();\r\n","import store from \"../../../store\";\r\nimport sqftConfig from \"../components/canvas/store/sqftConfig\";\r\nimport {setSlabImageHeight, setSlabImageWidth} from \"../../../actions/sqftSlabFunctions\";\r\nimport Radius from \"../components/canvas/core/controls/radius\";\r\n\r\nexport const onMeasureUnitChange = () => {\r\n Radius.onMeasureUnitChange();\r\n\r\n switch(sqftConfig.measureUnit) {\r\n case \"Metric\":\r\n store.dispatch(setSlabImageWidth(sqftConfig.slab.imageWidthMetric));\r\n store.dispatch(setSlabImageHeight(sqftConfig.slab.imageHeightMetric));\r\n break;\r\n case \"Imperial\":\r\n default:\r\n store.dispatch(setSlabImageWidth(sqftConfig.slab.imageWidthImperial));\r\n store.dispatch(setSlabImageHeight(sqftConfig.slab.imageHeightImperial));\r\n }\r\n}\r\n","import sqftEventManager from \"../../../store/sqftEventManager\";\r\nimport DrawImage from \"../textBox/draw/drawImage\";\r\nimport {pnpolyArray} from \"../../../../../lib/pnpoly\";\r\nimport config from \"../../../store/sqftConfig\";\r\nimport sqftConfig from \"../../../store/sqftConfig\";\r\nimport RenderFigures from \"../../../helpers/renderFigures\";\r\n\r\nclass StaticImage {\r\n svgImageId;\r\n ctx;\r\n x;\r\n y;\r\n width;\r\n height;\r\n isCentered = true;\r\n isScale = true;\r\n beforeRenderCallback = function (){};\r\n\r\n /**\r\n * returns a list needed for integration\r\n * @param svgImageId {string}\r\n * @param x {int}\r\n * @param y {int}\r\n * @param width {int}\r\n * @param height {int}\r\n * @param isCentered {boolean}\r\n * @param isScale {boolean}\r\n * @param beforeRenderCallback {function}\r\n */\r\n constructor(svgImageId, x, y, width, height, isCentered, isScale, beforeRenderCallback) {\r\n this.svgImageId = svgImageId;\r\n this.ctx = sqftEventManager.getCtx();\r\n this.x = x;\r\n this.y = y;\r\n this.width = width;\r\n this.height = height;\r\n this.isCentered = isCentered;\r\n this.isScale = isScale;\r\n this.beforeRenderCallback = beforeRenderCallback ? beforeRenderCallback : function (){};\r\n }\r\n\r\n isHovered = (mousePos) => {\r\n return pnpolyArray(this.getHoverArray(), mousePos);\r\n }\r\n\r\n getHoverArray = () => {\r\n const width = this.width * config.defaultScale;\r\n const height = this.height * config.defaultScale;\r\n\r\n if (this.isCentered) {\r\n return [\r\n [this.x - width / 2, this.y - height / 2],\r\n [this.x + width / 2, this.y - height / 2],\r\n [this.x + width / 2, this.y + height / 2],\r\n [this.x - width / 2, this.y + height / 2],\r\n ];\r\n } else {\r\n return [\r\n [this.x, this.y],\r\n [this.x + width, this.y],\r\n [this.x + width, this.y + height],\r\n [this.x, this.y + height],\r\n ];\r\n }\r\n }\r\n\r\n render = () => {\r\n this.beforeRenderCallback();\r\n DrawImage.renderImage(this.svgImageId,\r\n this.ctx,\r\n this.x,\r\n this.y,\r\n this.width,\r\n this.height,\r\n this.isCentered,\r\n this.isScale\r\n );\r\n if (sqftConfig.isDevMode()) {\r\n RenderFigures.renderPolygonArray(this.getHoverArray());\r\n }\r\n }\r\n}\r\n\r\nexport default StaticImage\r\n","import * as uuid from \"uuid\";\r\nimport EventManager from \"../../store/sqftEventManager\";\r\nimport workspace from \"../workspace\";\r\n\r\nexport default class SQFTShapeOffset {\r\n id;\r\n parent;\r\n animationPoints = [];\r\n state = {\r\n isHidden: false\r\n };\r\n params = {\r\n priority: EventManager.priorities.SEGMENT,\r\n };\r\n design = {\r\n lineWidth: 1,\r\n strokeStyle: 'rgba(137,137,137,0.6)',\r\n };\r\n\r\n constructor(parent, state = {}, params = {}, design = {}) {\r\n this.state = Object.assign(this.state, state);\r\n this.params = Object.assign(this.params, params);\r\n this.design = Object.assign(this.design, design);\r\n this.parent = parent;\r\n this.id = uuid.v4();\r\n this.initEvents();\r\n }\r\n\r\n getParent = () => {\r\n return this.parent;\r\n }\r\n\r\n setParent = (value) => {\r\n this.parent = value;\r\n }\r\n\r\n getPosition = () => {\r\n return this.parent.getPosition();\r\n }\r\n\r\n init = () => {\r\n this.initEvents();\r\n }\r\n\r\n initEvents() {\r\n EventManager.addEvent(\r\n EventManager.events.MOUSE_MOVE,\r\n this.onMouseMove.bind(this),\r\n this,\r\n this.params.priority\r\n );\r\n EventManager.addEvent(\r\n EventManager.events.MOUSE_DOWN,\r\n this.onMouseDown.bind(this),\r\n this,\r\n this.params.priority\r\n );\r\n EventManager.addEvent(\r\n EventManager.events.MOUSE_UP,\r\n this.onMouseUp.bind(this),\r\n this,\r\n this.params.priority\r\n );\r\n EventManager.addEvent(\r\n EventManager.events.RENDER,\r\n this.render.bind(this),\r\n this,\r\n this.params.priority\r\n );\r\n }\r\n\r\n onMouseMove() {\r\n }\r\n\r\n onMouseUp() {\r\n }\r\n\r\n onMouseDown() {\r\n }\r\n\r\n delete() {\r\n this.deregisterEvents();\r\n }\r\n\r\n destroy() {\r\n this.delete();\r\n }\r\n\r\n hide() {\r\n if (!this.state.isHidden) {\r\n this.deregisterEvents();\r\n this.state.isHidden = true\r\n }\r\n }\r\n\r\n restore() {\r\n if (this.state.isHidden) {\r\n this.reInitEvents();\r\n this.state.isHidden = false\r\n }\r\n }\r\n\r\n deregisterEvents = () => {\r\n EventManager.removeEvent(this);\r\n }\r\n\r\n reInitEvents = () => {\r\n this.initEvents();\r\n }\r\n\r\n animateShapeTransition(newShape, callback, duration = 0.75 * 1000) { // 10 seconds = 10000 milliseconds\r\n if (!newShape) {\r\n console.error(\"Invalid new shape.\");\r\n return;\r\n }\r\n\r\n if (newShape.id === this.parent.id) {\r\n return;\r\n }\r\n\r\n const originalShapePoints = this.calculateOutlineV2(this.parent.getPointsPointField(), 10);\r\n const newShapePoints = this.calculateOutlineV2(newShape.getPointsPointField(), 10);\r\n\r\n // Animation start time\r\n const startTime = new Date().getTime();\r\n\r\n const animate = () => {\r\n const elapsed = new Date().getTime() - startTime;\r\n const t = Math.min(elapsed / duration, 1);\r\n\r\n let interpolatedShape = [];\r\n for (let i = 0; i < Math.max(originalShapePoints.length, newShapePoints.length); i++) {\r\n // if we have less points in new shape\r\n const pointNew = newShapePoints[i % newShapePoints.length];\r\n // if we have less points in original shape\r\n const pointOriginal = originalShapePoints[i % originalShapePoints.length];\r\n\r\n interpolatedShape.push({\r\n x: pointOriginal.x + t * (pointNew.x - pointOriginal.x),\r\n y: pointOriginal.y + t * (pointNew.y - pointOriginal.y)\r\n });\r\n }\r\n\r\n this.animationPoints = interpolatedShape;\r\n\r\n if (t < 1) {\r\n requestAnimationFrame(animate);\r\n } else {\r\n this.animationPoints = [];\r\n this.setParent(newShape);\r\n callback();\r\n }\r\n };\r\n // begin animation\r\n animate();\r\n }\r\n\r\n render = (ctx) => {\r\n if (workspace && workspace.getState().loading) return;\r\n let offsetPoints;\r\n\r\n // if we have animation points the we will render them otherwise we will render shape points\r\n if (this.animationPoints.length > 0) {\r\n offsetPoints = this.calculateOutlineV2(this.animationPoints, 10);\r\n } else {\r\n const parentPoints = this.parent.getPointsPointField();\r\n offsetPoints = this.calculateOutlineV2(parentPoints, 10);\r\n }\r\n\r\n //console.log(\"parentPoints\", parentPoints);\r\n //console.log(\"offsetPoints\", offsetPoints);\r\n\r\n // let tempPoints = [\r\n // {x: 50, y: 50},\r\n // {x: 150, y: 50},\r\n // {x: 150, y: 150},\r\n // {x: 50, y: 150}\r\n // ];\r\n //let tempPointsOffset = this.calculateOffsetPoints(tempPoints, 10);\r\n //console.log(\"tempPoints\", tempPoints);\r\n //console.log(\"tempPointsOffset\", tempPointsOffset);\r\n\r\n //debugger // eslint-disable-line no-debugger\r\n ctx.save();\r\n ctx.beginPath();\r\n ctx.setLineDash([7, 5]);\r\n offsetPoints.forEach((p, i) => {\r\n if (i === 0) ctx.moveTo(p.x, p.y);\r\n else ctx.lineTo(p.x, p.y);\r\n });\r\n ctx.strokeStyle = this.design.strokeStyle;\r\n ctx.lineWidth = 1;\r\n ctx.closePath();\r\n ctx.stroke();\r\n ctx.restore();\r\n };\r\n\r\n calculateOutlineV2(points, offset) {\r\n let outlinePoints = [];\r\n\r\n for (let i = 0; i < points.length; i++) {\r\n let A = points[i];\r\n let B = points[(i + 1) % points.length];\r\n\r\n // Вектор AB\r\n let dx = B.x - A.x;\r\n let dy = B.y - A.y;\r\n\r\n // Вектор нормали (-dy, dx) или (dy, -dx)\r\n // В зависимости от того, в каком направлении идут точки\r\n let nx = dy;\r\n let ny = -dx;\r\n\r\n // Нормализуем вектор нормали\r\n let length = Math.sqrt(nx * nx + ny * ny);\r\n nx /= length;\r\n ny /= length;\r\n\r\n // Добавляем точки обводки с учетом смещения\r\n outlinePoints.push({\r\n x: A.x + nx * offset,\r\n y: A.y + ny * offset\r\n });\r\n outlinePoints.push({\r\n x: B.x + nx * offset,\r\n y: B.y + ny * offset\r\n });\r\n }\r\n\r\n return outlinePoints;\r\n }\r\n\r\n calculateOffsetPoints = (points, offsetDistance) => {\r\n let offsetPoints = [];\r\n\r\n points = [points[points.length-1], ...points, points[0], points[1]];\r\n\r\n for (let i = 1; i < points.length-2; i++) {\r\n let prev = points[i-1];\r\n let curr = points[i];\r\n let next = points[i+1];\r\n\r\n let dir1 = {x: curr.x - prev.x, y: curr.y - prev.y};\r\n let dir2 = {x: next.x - curr.x, y: next.y - curr.y};\r\n\r\n let norm1 = {x: dir1.y, y: -dir1.x};\r\n let norm2 = {x: dir2.y, y: -dir2.x};\r\n\r\n // Проверка острого угла\r\n let dotProduct = norm1.x * norm2.x + norm1.y * norm2.y;\r\n let avgNorm;\r\n if (dotProduct < 0) {\r\n avgNorm = i === 1 ? norm1 : norm2; // Использование нормали для более \"плоского\" отрезка\r\n } else {\r\n avgNorm = {x: (norm1.x + norm2.x) / 2, y: (norm1.y + norm2.y) / 2};\r\n }\r\n\r\n let length = Math.sqrt(avgNorm.x * avgNorm.x + avgNorm.y * avgNorm.y);\r\n let unitNorm = {x: avgNorm.x / length, y: avgNorm.y / length};\r\n\r\n offsetPoints.push({\r\n x: curr.x + unitNorm.x * offsetDistance,\r\n y: curr.y + unitNorm.y * offsetDistance\r\n });\r\n }\r\n return offsetPoints;\r\n }\r\n\r\n // offsetLine = (points, distance) => {\r\n // let offsetPoints = [];\r\n //\r\n // for (let i = 0; i < points.length - 1; i++) {\r\n // let p0 = points[i];\r\n // let p1 = points[i + 1];\r\n //\r\n // // Вычислить направление отрезка\r\n // let dx = p1.x - p0.x;\r\n // let dy = p1.y - p0.y;\r\n //\r\n // // Вычислить длину вектора\r\n // let len = Math.sqrt(dx * dx + dy * dy);\r\n //\r\n // // Нормализовать вектор\r\n // dx /= len;\r\n // dy /= len;\r\n //\r\n // // Вычислить нормаль (перпендикуляр)\r\n // //let nx = -dy;\r\n // //let ny = dx;\r\n // let nx = dy;\r\n // let ny = -dx;\r\n //\r\n // // Создать офсетную точку\r\n // offsetPoints.push({\r\n // x: p0.x + nx * distance,\r\n // y: p0.y + ny * distance\r\n // });\r\n // }\r\n //\r\n // // Добавить последнюю точку\r\n // let p0 = points[points.length - 2];\r\n // let p1 = points[points.length - 1];\r\n //\r\n // // Вычислить направление отрезка\r\n // let dx = p1.x - p0.x;\r\n // let dy = p1.y - p0.y;\r\n //\r\n // // Вычислить длину вектора\r\n // let len = Math.sqrt(dx * dx + dy * dy);\r\n //\r\n // // Нормализовать вектор\r\n // dx /= len;\r\n // dy /= len;\r\n //\r\n // // Вычислить нормаль (перпендикуляр)\r\n // //let nx = -dy;\r\n // //let ny = dx;\r\n // let nx = dy;\r\n // let ny = -dx;\r\n //\r\n // offsetPoints.push({\r\n // x: p1.x + nx * distance,\r\n // y: p1.y + ny * distance\r\n // });\r\n // //console.log(\"offsetPoints\", offsetPoints);\r\n // return offsetPoints;\r\n // }\r\n}\r\n","export default function createEventManager() {\r\n const listeners = {};\r\n\r\n return {\r\n on(eventName, callback) {\r\n if (!listeners[eventName]) {\r\n listeners[eventName] = [];\r\n }\r\n listeners[eventName].push(callback);\r\n },\r\n off(eventName, callback) {\r\n if (!listeners[eventName]) return;\r\n const index = listeners[eventName].indexOf(callback);\r\n if (index !== -1) {\r\n listeners[eventName].splice(index, 1);\r\n }\r\n },\r\n emit(eventName, data) {\r\n if (!listeners[eventName]) return;\r\n listeners[eventName].forEach(callback => callback(data));\r\n },\r\n };\r\n}\r\n","import LineImage from \"../core/shapes/imageParts/lineImage\";\r\nimport EventManager from \"../store/sqftEventManager\";\r\nimport PointV2, {CORE_POINT_LAYOUTS} from \"../core/shapes/pointV2\";\r\n//import line from \"../core/shapes/line\";\r\n\r\n/**\r\n *\r\n * @param points[]\r\n * @param parent\r\n * @return lines[{}]\r\n */\r\nexport const createImageLinesFromPoints = (points, parent) => {\r\n let lines = [];\r\n\r\n for (let i = 0; i < points.length; i++) {\r\n const shapeLine = new LineImage(\r\n points[i],\r\n points[(i + 1) % points.length],\r\n parent,\r\n i\r\n );\r\n // const shapeLine = new line([i], points[(i + 1) % points.length]);\r\n // void parent;\r\n\r\n lines.push(shapeLine);\r\n }\r\n\r\n return lines;\r\n};\r\n\r\n\r\n/**\r\n * @param x\r\n * @param y\r\n * @param parent\r\n * @return {PointV2}\r\n */\r\nexport const getImagePoint = (x, y, parent) => {\r\n let pointState = {\r\n priority: EventManager.priorities.BOX_POINT,\r\n movable: false,\r\n isCentered: true,\r\n isResizedByPoint: false,\r\n isScaledByPoint: false,\r\n isVisibleOnHover: false,\r\n };\r\n let pointDesign = {\r\n radius: 0, // hide corner points\r\n lineWidth: 1,\r\n layout: CORE_POINT_LAYOUTS.black\r\n };\r\n\r\n return new PointV2(x, y, parent, pointState, pointDesign);\r\n}\r\n","import SimpleLine from \"../simpleLine\";\r\nimport NumberText from \"../../workspace/text/numberText\";\r\nimport {COLORS} from \"../../../../../../../colorThemes\";\r\nimport workspace from \"../../workspace\";\r\nimport sqftEventManager from \"../../../store/sqftEventManager\";\r\nimport EventManager from \"../../../store/sqftEventManager\";\r\nimport {DIRECTIONS, getLineDirection, getLineOrientation} from \"../../../../../helpers/shapeHelper\";\r\nimport {mmToInches, orientation} from \"../../../../../helpers/sqftHelper\";\r\nimport moveDiagonalLine from \"../../../../../lib/moveDiagonalLine\";\r\nimport sqftConfig from \"../../../store/sqftConfig\";\r\nimport {MEASURE_UNITS} from \"../../../../../constants\";\r\n\r\nclass LineImage extends SimpleLine {\r\n constructor(from, to, parent, lineIndex) {\r\n super(from, to, parent)\r\n\r\n this.movableImage = parent;\r\n this.lineIndex = lineIndex;\r\n const design = {fontColor: COLORS.red, eventsPriority: sqftEventManager.priorities.IMAGE_LINE};\r\n let xOffset = 0;\r\n let yOffset = 0;\r\n switch (lineIndex) {\r\n case 0:\r\n xOffset = 0;\r\n yOffset = 15;\r\n break;\r\n case 1:\r\n xOffset = 0;\r\n yOffset = -15;\r\n break;\r\n case 2:\r\n xOffset = 0;\r\n yOffset = 15;\r\n break;\r\n case 3:\r\n xOffset = 0;\r\n yOffset = 15;\r\n break;\r\n }\r\n // const xOffset = lineIndex === 0 || lineIndex === 2 ? 0 : 15;\r\n // const yOffset = lineIndex === 0 || lineIndex === 2 ? 15 : 0;\r\n this.measurementInsideShape = new NumberText(0, {xOffset: xOffset, yOffset}, design, workspace, this.updatePosInsideShape, false);\r\n }\r\n\r\n destroy = (protect) => {\r\n if (!protect) {\r\n EventManager.removeEvent(this);\r\n this.from.destroy(protect);\r\n this.lineLengthText.destroy();\r\n this.measurementInsideShape.destroy();\r\n }\r\n };\r\n\r\n deregisterEvents = (protect) => {\r\n if (!protect) {\r\n EventManager.removeEvent(this);\r\n this.isHidden = true;\r\n this.from.deregisterEvents();\r\n this.lineLengthText.deregisterEvents();\r\n this.measurementInsideShape.deregisterEvents();\r\n }\r\n };\r\n\r\n reInitEvents = () => {\r\n if (this.isHidden) {\r\n this.initEvents();\r\n this.isHidden = false;\r\n\r\n this.from.reInitEvents();\r\n this.lineLengthText.reInitEvents();\r\n\r\n if (this.movableImage.shouldRenderMeasurementsInsideTheShape()) {\r\n const outerShape = this.movableImage.getOuterShape();\r\n if (outerShape) {\r\n this.measurementInsideShape.reInitEvents();\r\n }\r\n }\r\n }\r\n }\r\n\r\n updatePosInsideShape = (val, numberText, prevValue) => {\r\n let diff = prevValue - val;\r\n diff = sqftConfig.measureUnit === MEASURE_UNITS.Metric\r\n ? mmToInches(diff)\r\n : diff;\r\n\r\n const angleInRadians = this.movableImage.rotatedDegrees * Math.PI / 180; // Предполагая, что rotationAngle - это угол вращения в градусах\r\n\r\n // Calculate the offset taking into account the rotation angle\r\n const deltaX = diff * Math.cos(angleInRadians);\r\n const deltaY = diff * Math.sin(angleInRadians);\r\n\r\n const movableImage = this.from.parent;\r\n const lineIndex = this.lineIndex;\r\n let posXDiff = 0;\r\n let posYDiff = 0;\r\n switch (lineIndex) {\r\n case 0:\r\n posXDiff = -deltaY;\r\n posYDiff = -deltaX;\r\n break;\r\n case 1:\r\n posXDiff = +deltaX;\r\n posYDiff = +deltaY;\r\n break;\r\n case 2:\r\n posXDiff = +deltaY;\r\n posYDiff = +deltaX;\r\n break;\r\n case 3:\r\n posXDiff = -deltaX;\r\n posYDiff = -deltaY;\r\n break;\r\n }\r\n\r\n const newPosition = {x: movableImage.pos.x + posXDiff, y: movableImage.pos.y + posYDiff}\r\n movableImage.setPosition(newPosition);\r\n movableImage.shapeAbsolute.setAbsolutePos(newPosition);\r\n };\r\n\r\n /**\r\n * parent method override\r\n * @param xDiff\r\n * @param yDiff\r\n */\r\n moveLine = (xDiff, yDiff) => {\r\n const currentSize = this.parent.getSize();\r\n let newImageWidth = currentSize.width;\r\n let newImageHeight = currentSize.height;\r\n\r\n const o = getLineOrientation(this.from, this.to);\r\n const lineDirection = getLineDirection(this.from, this.to);\r\n\r\n if (o === orientation.VERTICAL) {\r\n if (lineDirection === DIRECTIONS.SOUTH) {\r\n //set min and max line length\r\n let testNewImageValue = newImageWidth - xDiff;\r\n if (sqftConfig.maxApplianceLineLength > testNewImageValue\r\n && sqftConfig.minApplianceLineLength < testNewImageValue\r\n ) {\r\n newImageWidth = testNewImageValue;\r\n this.from.x -= xDiff;\r\n this.to.x -= xDiff;\r\n }\r\n } else if (lineDirection === DIRECTIONS.NORTH) {\r\n let testNewImageValue = newImageWidth + xDiff;\r\n if (sqftConfig.maxApplianceLineLength > testNewImageValue\r\n && sqftConfig.minApplianceLineLength < testNewImageValue\r\n ) {\r\n newImageWidth = testNewImageValue;\r\n this.parent.setPosition({x: this.parent.pos.x - xDiff, y: this.parent.pos.y});\r\n this.parent.updateSnappedPos(); //resolve snapping v1\r\n //this.parent.resetAbsolutePos(); //resolve snapping v2\r\n\r\n //move points for the parallel line\r\n const parallelLine = this.getParallelLine();\r\n parallelLine.from.x += xDiff;\r\n parallelLine.to.x += xDiff;\r\n\r\n //console.log(\"newImageWidth\", testNewImageValue);\r\n //console.log(\"parallelLine.from.y\", parallelLine.to.x);\r\n //console.log(\"parallelLine.to.y\", parallelLine.to.x);\r\n //console.log(\"xDiff\", xDiff);\r\n }\r\n }\r\n } else if (o === orientation.HORIZONTAL) {\r\n if (lineDirection === DIRECTIONS.WEST) {\r\n let testNewImageValue = newImageHeight - yDiff;\r\n if (sqftConfig.maxApplianceLineLength > testNewImageValue\r\n && sqftConfig.minApplianceLineLength < testNewImageValue\r\n ) {\r\n newImageHeight = testNewImageValue;\r\n this.from.y -= yDiff;\r\n this.to.y -= yDiff;\r\n }\r\n } else if (lineDirection === DIRECTIONS.EAST) {\r\n let testNewImageValue = newImageHeight + yDiff;\r\n if (sqftConfig.maxApplianceLineLength > testNewImageValue\r\n && sqftConfig.minApplianceLineLength < testNewImageValue\r\n ) {\r\n newImageHeight = testNewImageValue;\r\n this.parent.setPosition({x: this.parent.pos.x, y: this.parent.pos.y - yDiff});\r\n this.parent.updateSnappedPos(); //resolve snapping v1\r\n //this.parent.resetAbsolutePos(); //resolve snapping v2\r\n\r\n //move points for the parallel line\r\n const parallelLine = this.getParallelLine();\r\n parallelLine.from.y += yDiff;\r\n parallelLine.to.y += yDiff;\r\n }\r\n }\r\n } else {\r\n const nextLine = this.parent.getNextLine(this);\r\n const prevLine = this.parent.getPrevLine(this);\r\n moveDiagonalLine(this, nextLine, prevLine, this.state.movePointDistance, yDiff, o);\r\n //newImageWidth += xDiff;\r\n //newImageHeight += yDiff;\r\n }\r\n\r\n this.parent.updateLinesLength();\r\n this.updatePrentSize(newImageWidth, newImageHeight);\r\n }\r\n getMaxLength = () => sqftConfig.maxApplianceLineLength * sqftConfig.getMeasureMultiplier()\r\n}\r\n\r\nexport default LineImage;\r\n","import * as uuid from \"uuid\";\r\n\r\nimport sqftConfig from \"../../store/sqftConfig\";\r\nimport workspace from \"../workspace\";\r\nimport EventManager from \"../../store/sqftEventManager\";\r\nimport {getMidPoint, getPointDistance, getPointField, orientation} from \"../../../../helpers/sqftHelper\";\r\nimport {\r\n DIRECTIONS,\r\n getLineDirection,\r\n getLineLengthNumberTextV2ForTheImage,\r\n getLineOrientation,\r\n getPointDirection\r\n} from \"../../../../helpers/shapeHelper\";\r\nimport {isPointInsidePolygon} from \"../../../../lib/pnpoly\";\r\nimport {getLineBordersArrayV2} from \"../../helpers/lineHelper\";\r\nimport moveDiagonalLine from \"../../../../lib/moveDiagonalLine\";\r\nimport SqftStore from \"../../store/sqftStore\";\r\nimport COLOR_THEMES from \"../../../../../../colorThemes\";\r\nimport store from \"../../../../../../store\";\r\nimport {SIDEBAR_NAVIGATION_BUTTONS} from \"../../../../constants\";\r\nimport resizeLine from \"./overlays/resizeLine\";\r\n\r\nclass SimpleLine {\r\n id;\r\n from;\r\n to;\r\n parent;\r\n lineLengthText;\r\n\r\n constructor(from, to, parent) {\r\n this.id = uuid.v4();\r\n this.from = from;\r\n this.to = to;\r\n this.parent = parent;\r\n this.design = {\r\n lineThickness: 1,\r\n lineHoveredArea: 10\r\n };\r\n this.state = {\r\n isHovering: false,\r\n mouseDown: false,\r\n mouseDownPosition: null,\r\n movePointDistance: null\r\n };\r\n this.initLineLength();\r\n this.initEvents();\r\n }\r\n\r\n exportData = () => {\r\n return {\r\n id: this.id,\r\n from: this.from.exportData(),\r\n to: this.to.exportData()\r\n }\r\n }\r\n\r\n importData = (lineData) => {\r\n this.id = lineData.id;\r\n this.from.importData(lineData.from);\r\n this.to.importData(lineData.to);\r\n }\r\n\r\n isHovering = () => {\r\n return this.state.isHovering\r\n }\r\n\r\n getParent = () => {\r\n return this.parent\r\n }\r\n\r\n initEvents = () => {\r\n EventManager.addEvent(\r\n EventManager.events.MOUSE_MOVE,\r\n this.onMouseMove,\r\n this,\r\n EventManager.priorities.IMAGE_LINE\r\n );\r\n EventManager.addEvent(\r\n EventManager.events.MOUSE_DOWN,\r\n this.onMouseDown,\r\n this,\r\n EventManager.priorities.IMAGE_LINE\r\n );\r\n EventManager.addEvent(\r\n EventManager.events.MOUSE_UP,\r\n this.onMouseUp,\r\n this,\r\n EventManager.priorities.IMAGE_LINE\r\n );\r\n EventManager.addEvent(\r\n EventManager.events.MOUSE_LEAVE,\r\n this.onMouseLeave,\r\n this,\r\n EventManager.priorities.OVERALL\r\n );\r\n EventManager.addEvent(\r\n EventManager.events.MOUSE_LEAVE,\r\n this.onMouseLeave,\r\n this,\r\n EventManager.priorities.OVERALL\r\n );\r\n EventManager.addEvent(\r\n EventManager.events.RENDER,\r\n this.render,\r\n this,\r\n EventManager.priorities.IMAGE_LINE\r\n );\r\n };\r\n\r\n initLineLength = () => {\r\n this.lineLengthText = getLineLengthNumberTextV2ForTheImage(this.from, this.to, this, this.setLineLengthFromNumberValue, true);\r\n }\r\n\r\n destroy = (protect) => {\r\n if (!protect) {\r\n EventManager.removeEvent(this);\r\n this.from.destroy(protect);\r\n this.lineLengthText.destroy();\r\n }\r\n };\r\n\r\n deregisterEvents = () => {\r\n EventManager.removeEvent(this);\r\n this.isHidden = true;\r\n this.from.deregisterEvents();\r\n this.lineLengthText.deregisterEvents();\r\n }\r\n\r\n reInitEvents = () => {\r\n if (this.isHidden) {\r\n this.initEvents();\r\n this.isHidden = false;\r\n\r\n this.from.reInitEvents();\r\n this.lineLengthText.reInitEvents();\r\n }\r\n }\r\n\r\n onMouseLeave() {\r\n this.state.isHovering = false;\r\n this.state.mouseDown = false;\r\n }\r\n\r\n onMouseUp(mousePos, e) {\r\n void mousePos;\r\n void e;\r\n if (this.state.mouseDown) {\r\n this.state.mouseDown = false;\r\n this.state.mouseDownPosition = null;\r\n //this.from.snapToGrid();\r\n //this.to.snapToGrid();\r\n }\r\n }\r\n onMouseDown(mousePos, e) {\r\n void e;\r\n if (this.state.isHovering) {\r\n this.state.mouseDown = true;\r\n this.state.movePointDistance = getPointDistance(this.from, this.to);\r\n this.state.mouseDownPosition = mousePos;\r\n return true;\r\n }\r\n return false;\r\n }\r\n\r\n isMouseOverLineV2 = (mousePos) => {\r\n const lineBordersArray = getLineBordersArrayV2(this.from,\r\n this.to,\r\n this.design.lineHoveredArea\r\n )\r\n //this.state.isHovering\r\n return isPointInsidePolygon(mousePos, lineBordersArray);// || this.state.mouseDown;\r\n }\r\n\r\n onMouseMove = (mousePos, e) => {\r\n void e;\r\n // if (e.terminate && !parent.isHovering()) {\r\n // this.state.isHovering = false;\r\n // return false;\r\n // }\r\n const isMouseOverLine = this.isMouseOverLineV2(mousePos);\r\n this.state.isHovering = isMouseOverLine;\r\n\r\n if (this.state.mouseDown || isMouseOverLine) {\r\n if (workspace.getAllowEdges() && !this.from.angleIsChanged && !this.to.angleIsChanged) {\r\n if (this.state.mouseDown) {\r\n this.moveLineWithMouse(mousePos);\r\n }\r\n EventManager.releaseStealLock(this.parent);\r\n EventManager.stealCursor();\r\n switch(getLineOrientation(this.from, this.to)) {\r\n case orientation.HORIZONTAL:\r\n EventManager.setCursor(\"n-resize\", this);\r\n break;\r\n case orientation.VERTICAL:\r\n EventManager.setCursor(\"e-resize\", this);\r\n break;\r\n case orientation.NORTHWEST:\r\n case orientation.SOUTHEAST:\r\n EventManager.setCursor(\"ne-resize\", this);\r\n break;\r\n case orientation.NORTHEAST:\r\n case orientation.SOUTHWEST:\r\n EventManager.setCursor(\"nw-resize\", this);\r\n break;\r\n }\r\n return this.state.mouseDown;\r\n }\r\n\r\n if (sqftConfig.highlight.lines && this.state.isHovering) {\r\n EventManager.releaseStealLock(this.parent);\r\n EventManager.stealCursor();\r\n return false;\r\n }\r\n // prevent all other mouseover's\r\n }\r\n\r\n if (workspace.getHoverShape() !== this.parent) {\r\n this.state.isHovering = false;\r\n }\r\n EventManager.resetCursor(this);\r\n return false;\r\n }\r\n\r\n setLineLengthFromNumberValue = (newValue) => {\r\n newValue = newValue / sqftConfig.getMeasureMultiplier()\r\n const currentDistance = getPointDistance(this.from, this.to);\r\n const diff = newValue - currentDistance;\r\n resizeLine(this, diff, false);\r\n\r\n //adjust parent size\r\n const currentSize = this.parent.getSize();\r\n let newImageWidth = currentSize.width;\r\n let newImageHeight = currentSize.height;\r\n const o = getLineOrientation(this.from, this.to);\r\n const lineDirection = getLineDirection(this.from, this.to);\r\n\r\n if (o === orientation.VERTICAL) {\r\n this.parent.setPosition({x: this.parent.pos.x, y: this.parent.pos.y - diff / 2});\r\n if (lineDirection === DIRECTIONS.SOUTH) {\r\n newImageHeight = newValue;\r\n } else if (lineDirection === DIRECTIONS.NORTH) {\r\n newImageHeight = newValue;\r\n }\r\n this.from.y += diff / 2;\r\n this.to.y += diff / 2;\r\n //move points for the parallel line\r\n const parallelLine = this.getParallelLine();\r\n parallelLine.from.y += diff / 2;\r\n parallelLine.to.y += diff / 2;\r\n } else if (o === orientation.HORIZONTAL) {\r\n this.parent.setPosition({x: this.parent.pos.x - diff / 2, y: this.parent.pos.y});\r\n if (lineDirection === DIRECTIONS.WEST) {\r\n newImageWidth = newValue;\r\n } else if (lineDirection === DIRECTIONS.EAST) {\r\n newImageWidth = newValue;\r\n }\r\n\r\n this.from.x += diff / 2;\r\n this.to.x += diff / 2;\r\n //move points for the parallel line\r\n const parallelLine = this.getParallelLine();\r\n parallelLine.from.x += diff / 2;\r\n parallelLine.to.x += diff / 2;\r\n } else {\r\n // const nextLine = this.parent.getNextLine(this);\r\n // const prevLine = this.parent.getPrevLine(this);\r\n // moveDiagonalLine(this, nextLine, prevLine, this.state.movePointDistance, yDiff, o);\r\n //newImageWidth += xDiff;\r\n //newImageHeight += yDiff;\r\n }\r\n\r\n this.parent.updateLinesLength();\r\n this.parent.updateSnappedPos(); //resolve snapping v1\r\n this.updatePrentSize(newImageWidth, newImageHeight);\r\n }\r\n\r\n moveLineWithMouse = (mousePos) => {\r\n\r\n // console.log(\"mousePos\", mousePos);\r\n // console.log(\"this.from.x\", this.from.x);\r\n // console.log(\"this.from.x\", this.to.x);\r\n\r\n const scale = workspace.getScale();\r\n const xDiff = (this.state.mouseDownPosition.x - mousePos.x) / scale;\r\n const yDiff = (this.state.mouseDownPosition.y - mousePos.y) / scale;\r\n const o = getLineOrientation(this.from, this.to);\r\n if (o === orientation.VERTICAL) {\r\n this.state.mouseDownPosition.x = mousePos.x;\r\n } else if (o === orientation.HORIZONTAL) {\r\n this.state.mouseDownPosition.y = mousePos.y;\r\n } else {\r\n this.state.mouseDownPosition = mousePos;\r\n }\r\n\r\n // console.log(\"xDiff\", xDiff);\r\n // console.log(\"yDiff\", yDiff);\r\n // console.log(\"this.state.mouseDownPosition\", this.state.mouseDownPosition);\r\n // console.log(\"mousePos\", mousePos);\r\n this.moveLine(xDiff, yDiff);\r\n };\r\n\r\n moveLine = (xDiff, yDiff) => {\r\n const currentSize = this.parent.getSize();\r\n let newImageWidth = currentSize.width;\r\n let newImageHeight = currentSize.height;\r\n\r\n const o = getLineOrientation(this.from, this.to);\r\n const lineDirection = getLineDirection(this.from, this.to);\r\n\r\n if (o === orientation.VERTICAL) {\r\n if (lineDirection === DIRECTIONS.SOUTH) {\r\n newImageWidth -= xDiff;\r\n this.from.x -= xDiff;\r\n this.to.x -= xDiff;\r\n } else if (lineDirection === DIRECTIONS.NORTH) {\r\n newImageWidth += xDiff;\r\n this.parent.setPosition({x: this.parent.pos.x - xDiff, y: this.parent.pos.y});\r\n this.parent.updateSnappedPos(); //resolve snapping v1\r\n //this.parent.resetAbsolutePos(); //resolve snapping v2\r\n\r\n //move points for the parallel line\r\n const parallelLine = this.getParallelLine();\r\n parallelLine.from.x += xDiff;\r\n parallelLine.to.x += xDiff;\r\n }\r\n } else if (o === orientation.HORIZONTAL) {\r\n if (lineDirection === DIRECTIONS.WEST) {\r\n newImageHeight -= yDiff;\r\n this.from.y -= yDiff;\r\n this.to.y -= yDiff;\r\n } else if (lineDirection === DIRECTIONS.EAST) {\r\n newImageHeight += yDiff;\r\n this.parent.setPosition({x: this.parent.pos.x, y: this.parent.pos.y - yDiff});\r\n this.parent.updateSnappedPos(); //resolve snapping v1\r\n //this.parent.resetAbsolutePos(); //resolve snapping v2\r\n\r\n //move points for the parallel line\r\n const parallelLine = this.getParallelLine();\r\n parallelLine.from.y += yDiff;\r\n parallelLine.to.y += yDiff;\r\n }\r\n } else {\r\n const nextLine = this.parent.getNextLine(this);\r\n const prevLine = this.parent.getPrevLine(this);\r\n moveDiagonalLine(this, nextLine, prevLine, this.state.movePointDistance, yDiff, o);\r\n //newImageWidth += xDiff;\r\n //newImageHeight += yDiff;\r\n }\r\n\r\n this.parent.updateLinesLength();\r\n this.updatePrentSize(newImageWidth, newImageHeight);\r\n }\r\n\r\n updatePrentSize = (newImageWidth, newImageHeight) => {\r\n const imageState = this.parent.getState();\r\n if (newImageHeight >= imageState.minimumHeight && newImageWidth >= imageState.minimumWidth ) {\r\n this.parent.setSize({\r\n width: +newImageWidth,\r\n height: +newImageHeight\r\n });\r\n }\r\n\r\n SqftStore.updateCalculations();\r\n }\r\n\r\n updateLineLength = () => {\r\n const midPoint = getMidPoint(this.from, this.to);\r\n const distance = getPointDistance(this.from, this.to);\r\n this.lineLengthText.pos.x = midPoint.x;\r\n this.lineLengthText.pos.y = midPoint.y;\r\n this.lineLengthText.value = distance;\r\n }\r\n\r\n getLineDirection = () => {\r\n const prevLine = this.parent.getPrevLine(this);\r\n const nextLine = this.parent.getNextLine(this);\r\n\r\n return getPointDirection(this.from, this.to, nextLine.to, prevLine.from);\r\n }\r\n\r\n render = (ctx) => {\r\n this.renderHovering(ctx);\r\n }\r\n\r\n renderHovering = (ctx) => {\r\n const reduxState = store.getState();\r\n const activeButton = reduxState.sqftMenuState.activeButton;\r\n if (this.state.isHovering && activeButton === SIDEBAR_NAVIGATION_BUTTONS.resize) {\r\n let pointFieldFrom = getPointField(this.from.x, this.from.y, this.parent);\r\n let pointFieldTo = getPointField(this.to.x, this.to.y, this.parent);\r\n void pointFieldFrom;\r\n void pointFieldTo;\r\n void ctx;\r\n\r\n ctx.beginPath();\r\n ctx.lineWidth = 3;\r\n ctx.strokeStyle = COLOR_THEMES[sqftConfig.activeTheme].primary;\r\n ctx.moveTo(pointFieldFrom.x, pointFieldFrom.y);\r\n ctx.lineTo(pointFieldTo.x, pointFieldTo.y);\r\n\r\n ctx.stroke();\r\n ctx.closePath();\r\n }\r\n }\r\n\r\n getParallelLine = () => {\r\n const lines = this.parent.getLines();\r\n const lineIndex = lines.indexOf(this);\r\n const parallelLineIndex = (lineIndex + 2) % 4;\r\n\r\n return lines[parallelLineIndex];\r\n }\r\n\r\n getOffset = () => {\r\n let scale = sqftConfig.scale;\r\n let workspacePos = workspace.getOffset();\r\n if (this.parent) {\r\n let _pos = this.parent.getPosition();\r\n if (sqftConfig.workspace.snapToGrid) {\r\n _pos = this.parent.getSnappedPosition();\r\n }\r\n return {\r\n x: workspacePos.x + (_pos.x * scale),\r\n y: workspacePos.y + (_pos.y * scale)\r\n }\r\n } else {\r\n return {x: 0, y: 0};\r\n }\r\n };\r\n\r\n deleteAttachedItem = () => {\r\n return true\r\n }\r\n\r\n isWithBumpout = () => {\r\n return false\r\n }\r\n\r\n isWithMitered = () => {\r\n return false\r\n }\r\n}\r\n\r\nexport default SimpleLine;\r\n","import {RENDER_TEMPLATES} from \"../../../../../constants\";\r\nimport workspace from \"../../workspace\";\r\nimport sqftConfig from \"../../../store/sqftConfig\";\r\nimport COLOR_THEMES from \"../../../store/colorThemes\";\r\nimport store from \"../../../../../../../store\";\r\nimport sqftShapeManager from \"../../../store/sqftShapeManager\";\r\nimport EventManager from \"../../../store/sqftEventManager\";\r\nimport PointV2, {CORE_POINT_LAYOUTS} from \"../pointV2\";\r\nimport {getParallelPoints, getPointField, getPointOnTheLine} from \"../../../../../helpers/sqftHelper\";\r\nimport {getAngleBetween3Points} from \"../../../../../helpers/shapeHelper\";\r\nimport {changeValuePopup} from \"../../../../../../../actions/sqftMenuFunctions\";\r\nimport SqftStore from \"../../../store/sqftStore\";\r\nimport sqftImageManager from \"../../../store/sqftImageManager\";\r\nimport sqftShape from \"../sqftShape\";\r\nimport RenderFigures from \"../../../helpers/renderFigures\";\r\n\r\nexport default class ShapeRotatable {\r\n __shape;\r\n __cornerPoints = [];\r\n rotateToPointAngle = null; // angle between shape center, hovered point and zero shape point\r\n\r\n constructor(shape) {\r\n this.__shape = shape;\r\n //this.__shape.setCenter(ShapeHelper.getCenterPoint(shape.getLines().map(line => line.from)));\r\n this.initCornerBorderPoints();\r\n if (shape instanceof sqftShape) {\r\n this.hideShapePoints();\r\n }\r\n }\r\n\r\n getCornerPoint() {\r\n return this.__shape.staticCenterPoint\r\n }\r\n\r\n getCornerPoints() {\r\n return this.__cornerPoints\r\n }\r\n\r\n reInitShapePoints() {\r\n if (this.__shape instanceof sqftShape) {\r\n const lines = this.__shape.getLines();\r\n for (const line of lines) {\r\n line.from.initEvents();\r\n }\r\n }\r\n }\r\n\r\n hideShapePoints() {\r\n const lines = this.__shape.getLines();\r\n for (const line of lines) {\r\n line.from.deregisterEvents();\r\n }\r\n }\r\n\r\n initCornerBorderPoints = () => {\r\n let minMaxPoints;\r\n if (this.__shape instanceof sqftShape) {\r\n minMaxPoints = sqftShapeManager.getMinMaxShapePoints(this.__shape, true, false)\r\n } else {\r\n minMaxPoints = sqftImageManager.getMinMaxShapePoints(this.__shape, true, false);\r\n }\r\n const {minX, maxX, minY, maxY} = minMaxPoints;\r\n console.log(\"minX, maxX, minY, maxY\", minX, maxX, minY, maxY);\r\n\r\n let pointParams = {\r\n priority: EventManager.priorities.BOX_POINT,\r\n movable: true,\r\n isCentered: true,\r\n // isCenteredByY: pointParams.isCenteredByY,\r\n // isResizedByPoint: pointParams.isResizedByPoint,\r\n // isScaledByPoint: pointParams.isScaledByPoint,\r\n isVisibleOnHover: false,\r\n\r\n // Move point callback\r\n moveCallback: (mousePos, movablePoint) => {\r\n // get angles\r\n const isSlabMode = store.getState().sqftSlabState.isShowSlabTool;\r\n const shape = movablePoint.grandParent;\r\n const shapeCenter = shape.getCenter();\r\n const shapeCenterOnField = getPointField(shapeCenter.x, shapeCenter.y, shape);\r\n const movablePointOnField = getPointField(movablePoint.posX, movablePoint.posY, shape);\r\n const shapeZeroAnglePoint = {x: shapeCenterOnField.x, y: shapeCenterOnField.y - 50};\r\n let rotateToMouseAngle = getAngleBetween3Points(mousePos, shapeCenterOnField, shapeZeroAnglePoint);\r\n let rotatedDegrees;\r\n isSlabMode ? rotatedDegrees = shape.rotatedDegreesSlab : rotatedDegrees = shape.rotatedDegrees;\r\n\r\n if (!shape.shapeRotatable) {\r\n return;\r\n }\r\n\r\n // remember rotateToPointAngle angle (it is always the same)\r\n if (!shape.shapeRotatable.rotateToPointAngle) {\r\n shape.shapeRotatable.rotateToPointAngle = getAngleBetween3Points(movablePointOnField, shapeCenterOnField, shapeZeroAnglePoint);\r\n shape.shapeRotatable.rotateToPointAngle = mousePos.x < shapeCenterOnField.x ? 360 - shape.shapeRotatable.rotateToPointAngle : shape.shapeRotatable.rotateToPointAngle;\r\n //shape.shapeRotatable.rotateToPointAngle -= rotatedDegrees;\r\n }\r\n\r\n // ROTATE TO LEFT\r\n const rotateToAngleIn360 = mousePos.x < shapeCenterOnField.x ? 360 - rotateToMouseAngle : rotateToMouseAngle;\r\n const rotateToAngleWithoutHoveredPointAngle = shape.shapeRotatable.rotateToPointAngle - rotateToAngleIn360 - rotatedDegrees;\r\n const rotateToDegreesValue = Math.round(rotateToAngleWithoutHoveredPointAngle);\r\n\r\n // Normalize angle to range [0, 360)\r\n const normalizedRotateToDegreesValue = (rotateToDegreesValue % 360 + 360) % 360;\r\n\r\n if (normalizedRotateToDegreesValue) {\r\n this.__shape.rotate(normalizedRotateToDegreesValue, shape.Direction.LEFT, isSlabMode, this.getCornerPoint());\r\n\r\n // ROTATE TO RIGHT\r\n // const rotateToAngleWithoutHoveredPointAngle = rotateToAngle - shape.shapeRotatable.rotateToPointAngle - rotatedDegrees;\r\n // const rotateToDegreesValue = Math.round(rotateToAngleWithoutHoveredPointAngle);\r\n // this.__shape.rotate(rotateToDegreesValue, shape.Direction.RIGHT, isSlabMode, this.getCornerPoint());\r\n\r\n isSlabMode\r\n ? shape.rotatedDegreesSlab = (shape.rotatedDegreesSlab % 360 + 360) % 360\r\n : shape.rotatedDegrees = (shape.rotatedDegrees % 360 + 360) % 360;\r\n\r\n // update valuePopup\r\n const state = store.getState();\r\n const valuePopup = state.sqftMenuState.changeValuePopups.find(valuePopup => valuePopup.id === 'shape' + shape.id);\r\n const displayValueInPopup = isSlabMode ? shape.rotatedDegreesSlab : shape.rotatedDegrees;\r\n store.dispatch(changeValuePopup({\r\n ...valuePopup,\r\n value: displayValueInPopup\r\n }));\r\n }\r\n\r\n\r\n // Debugging information\r\n // console.log(\"rotateToDegreesValue\", rotateToDegreesValue);\r\n // console.log(\"normalizedRotateToDegreesValue\", normalizedRotateToDegreesValue);\r\n // console.log(\"shape.rotatedDegrees2\", shape.rotatedDegrees);\r\n // console.log('movablePointOnField', movablePointOnField);\r\n // console.log(\"mousePos.x < shapeCenter.x\", mousePos.x < shapeCenter.x);\r\n // console.log('rotatePointAngle', shape.shapeRotatable.rotateToPointAngle);\r\n // console.log('rotateToMouseAngle', rotateToMouseAngle);\r\n // console.log('rotateToAngle', rotateToAngle);\r\n // console.log(\"rotateToAngleWithoutHoveredPointAngle\", rotateToAngleWithoutHoveredPointAngle);\r\n // console.log('shapeCenterOnField', shapeCenterOnField);\r\n // console.log('mousePos', mousePos);\r\n // console.log('movablePoint', movablePoint);\r\n // console.log('-------------------------------');\r\n },\r\n mouseUpCallback: (mousePos, movablePoint) => {\r\n const shape = movablePoint.grandParent;\r\n shape.shapeRotatable.rotateToPointAngle = null;\r\n }\r\n };\r\n let pointDesign = {\r\n radius: 5,\r\n lineWidth: 1,\r\n layout: CORE_POINT_LAYOUTS.green\r\n };\r\n this.__cornerPoints = [\r\n new PointV2(minX, minY, this.__shape, pointParams, pointDesign),\r\n new PointV2(maxX, minY, this.__shape, pointParams, pointDesign),\r\n new PointV2(maxX, maxY, this.__shape, pointParams, pointDesign),\r\n new PointV2(minX, maxY, this.__shape, pointParams, pointDesign),\r\n ];\r\n }\r\n\r\n destroy = () => {\r\n for (const cornerPoint of this.__cornerPoints) {\r\n cornerPoint.destroy()\r\n }\r\n }\r\n\r\n rotateShapeRotatablePoints = (aroundPoint, angle, isSlabMode) => {\r\n if (this.__shape) {\r\n for (const cornerPoint of this.getCornerPoints()) {\r\n cornerPoint.rotate(aroundPoint, angle, isSlabMode);\r\n }\r\n }\r\n }\r\n\r\n getCornerPointsPointField = () => {\r\n let cornerPointsPointField = [];\r\n for (const currentPoint of this.__cornerPoints) {\r\n cornerPointsPointField.push(\r\n getPointField( currentPoint.modelCorePoint.getPosX(), currentPoint.modelCorePoint.getPosY(), this.__shape)\r\n );\r\n }\r\n\r\n return cornerPointsPointField;\r\n }\r\n\r\n render = (ctx, template= RENDER_TEMPLATES.default) => {\r\n //this.updatePointCords();\r\n this.renderFrameBorder(ctx, this.__shape);\r\n this.renderFramePoints(ctx, this.__shape);\r\n if (this.__shape instanceof sqftShape) {\r\n this.renderLines(ctx, template);\r\n }\r\n };\r\n\r\n renderLines = (ctx, template= RENDER_TEMPLATES.default) => {\r\n if (workspace && workspace.getState().loading) return;\r\n const isSlabMode = SqftStore.isSlabMode();\r\n let lines = this.__shape.getLines();\r\n\r\n ctx.beginPath();\r\n for (let i = 0; i < lines.length; i++) {\r\n lines[i].render(ctx, i > 0);\r\n }\r\n if (this.__shape.isHovering() && workspace.getHoverShape() === this.__shape ) {\r\n ctx.strokeStyle = COLOR_THEMES[sqftConfig.activeTheme].active_hover;\r\n } else {\r\n ctx.strokeStyle = COLOR_THEMES[sqftConfig.activeTheme].active;\r\n }\r\n ctx.fillStyle = COLOR_THEMES[sqftConfig.activeTheme].active_disabled;\r\n switch (template) {\r\n case RENDER_TEMPLATES.linesOnly:\r\n ctx.lineWidth = 0;\r\n ctx.fill();\r\n ctx.closePath();\r\n break;\r\n case RENDER_TEMPLATES.default:\r\n default:\r\n ctx.fillStyle = isSlabMode ? COLOR_THEMES[sqftConfig.activeTheme].active_disabled : this.__shape.getFillColor();\r\n ctx.lineWidth = 2; // Math.ceil(scale);\r\n ctx.fill();\r\n ctx.closePath();\r\n ctx.stroke();\r\n break;\r\n }\r\n\r\n if (this.__shape.isHovering() && workspace.getHoveredSqftShape() === this.__shape ) {\r\n let sqftMenuState = store.getState().sqftMenuState;\r\n void sqftMenuState;\r\n }\r\n };\r\n\r\n renderFrameBorder = (ctx) => {\r\n ctx.beginPath();\r\n ctx.lineWidth = 2;\r\n\r\n let pointField = getPointField(\r\n this.__cornerPoints[0].modelCorePoint.getPosX(),\r\n this.__cornerPoints[0].modelCorePoint.getPosY(),\r\n this.__shape\r\n );\r\n ctx.moveTo(pointField.x, pointField.y);\r\n\r\n for (const cornerPoint of this.__cornerPoints) {\r\n pointField = getPointField(\r\n cornerPoint.modelCorePoint.getPosX(),\r\n cornerPoint.modelCorePoint.getPosY(),\r\n this.__shape\r\n );\r\n ctx.lineTo(pointField.x, pointField.y);\r\n }\r\n\r\n ctx.strokeStyle = COLOR_THEMES[sqftConfig.activeTheme].active;\r\n ctx.closePath();\r\n ctx.stroke();\r\n }\r\n\r\n renderFramePoints = (ctx) => {\r\n let len = this.__cornerPoints.length;\r\n const cornerPointsPointField = this.getCornerPointsPointField();\r\n for (const index in cornerPointsPointField) {\r\n //cornerPoint.render(ctx);\r\n if (cornerPointsPointField.hasOwnProperty(index)) {\r\n let current = cornerPointsPointField[+index];\r\n let previous = cornerPointsPointField[(+index + len - 1) % len];\r\n let next = cornerPointsPointField[(+index + 1) % len];\r\n\r\n ctx.save();\r\n ctx.beginPath();\r\n // ctx.translate(\r\n // cornerPointsPointField[index].x,\r\n // cornerPointsPointField[index].y,\r\n // );\r\n //ctx.rotate(90 * cornerPointIndex * (Math.PI / 180));\r\n // RenderFigures.drawRotatedArrow(ctx,\r\n // - 20, 0,\r\n // 0, - 20,\r\n // - 20, - 20,\r\n // 10\r\n // )\r\n const from = getPointOnTheLine(current, previous, 20);\r\n const to = getPointOnTheLine(current, next, 20);\r\n const [midPoint, midPoint2] = getParallelPoints(from, current,20);\r\n void midPoint;\r\n RenderFigures.drawRotatedArrow(ctx,\r\n from.x, from.y,\r\n to.x, to.y,\r\n midPoint2.x, midPoint2.y,\r\n 10\r\n )\r\n\r\n //console.log(\"from\", from);\r\n //console.log(\"to\", to);\r\n //debugger // eslint-disable-line no-debugger\r\n ctx.lineWidth = 2;\r\n ctx.strokeStyle = 'rgba(159,197,34,0.47)';\r\n ctx.fillStyle = 'rgba(159,197,34,0.47)';\r\n ctx.stroke();\r\n ctx.closePath();\r\n ctx.restore();\r\n\r\n //RenderFigures.renderCircle(from, 5,1, '#63b141');\r\n //RenderFigures.renderCircle(to, 8,1, '#63b141');\r\n //RenderFigures.renderCircle({x:to.x, y: from.y}, 12,1, '#63b141');\r\n }\r\n }\r\n }\r\n\r\n\r\n // renderLinesBetweenPoints = (ctx) => {\r\n // ctx.beginPath();\r\n // ctx.lineWidth = lineWidth;\r\n // ctx.strokeStyle = color;\r\n // drawLines(ctx);\r\n //\r\n // ctx.stroke();\r\n // };\r\n}\r\n","export default class ChangeValuePopup {\r\n id;\r\n min;\r\n max;\r\n confirmCallback;\r\n increaseCallback;\r\n decreaseCallback;\r\n inputChangeCallback;\r\n value;\r\n position;\r\n\r\n constructor(id, min, max, confirmCallback, increaseCallback, decreaseCallback, inputChangeCallback, value, position) {\r\n this.id = id;\r\n this.min = min;\r\n this.max = max;\r\n this.confirmCallback = confirmCallback;\r\n this.increaseCallback = increaseCallback;\r\n this.decreaseCallback = decreaseCallback;\r\n this.inputChangeCallback = inputChangeCallback;\r\n this.value = value;\r\n this.position = position;\r\n }\r\n}\r\n","import {SQFTResourceController} from \"./SQFTResourceController\";\r\nimport {WORKSPACE_RESOURCES} from \"../../../../constants\";\r\nimport store from \"../../../../../../store\";\r\nimport workspace from \"../../core/workspace\";\r\nimport {LineHandlesModel} from \"../models/LineHandlesModel\";\r\n\r\nexport class HandlesController extends SQFTResourceController {\r\n\r\n constructor(props) {\r\n super(props);\r\n this.resourceName = WORKSPACE_RESOURCES.handles;\r\n }\r\n\r\n generateHandles() {\r\n const reduxState = store.getState();\r\n const selectedPartIds = reduxState.sqftResourceState.selectedPartIds\r\n const shapes = workspace.getShapes();\r\n for (const shape of shapes) {\r\n if (selectedPartIds.includes(shape.partId)) {\r\n this.addHandleToTheShape(shape);\r\n }\r\n }\r\n }\r\n\r\n addHandleToTheShape(shape) {\r\n const reduxState = store.getState();\r\n const selectedFeature = reduxState.sqftResourceState.selectedFeature\r\n const lines = shape.getLines();\r\n for (const lineIndex in lines) {\r\n if (+lineIndex === 2) {\r\n if (lines.hasOwnProperty(lineIndex)) {\r\n lines[lineIndex].setHandleId(selectedFeature.part.dbFeature.id);\r\n const handle3dURL = this.findGLBModel(selectedFeature.part.dbFeature.thirdPartyAR3DUrls, 'V')\r\n lines[lineIndex].setHandle3dURL(handle3dURL);\r\n this.addResource(new LineHandlesModel(lines[lineIndex].id, selectedFeature.part.dbFeature.id));\r\n }\r\n }\r\n }\r\n }\r\n\r\n /**\r\n * Function to find a .glb model in the array based on H or V suffix.\r\n * If the parameter is not passed or no matching model is found, it returns the first .glb model found.\r\n *\r\n * @param {Array} urls - Array of URLs.\r\n * @param {String} [suffix] - Optional. Suffix 'H' or 'V' to search for in the URL.\r\n * @returns {String} - The found .glb model URL or the first .glb model in the array.\r\n */\r\n findGLBModel(urls, suffix) {\r\n if (!urls) {\r\n return null\r\n }\r\n\r\n const glbModels = urls.filter(url => url.endsWith('.glb'));\r\n\r\n if (!glbModels.length) {\r\n return null;\r\n }\r\n\r\n // If suffix is provided (either 'H' or 'V'), search for a model with that suffix\r\n if (suffix) {\r\n const modelWithSuffix = glbModels.find(url => url.endsWith(`-${suffix}.glb`));\r\n if (modelWithSuffix) {\r\n return modelWithSuffix;\r\n }\r\n }\r\n\r\n return glbModels[0];\r\n }\r\n\r\n exportHandles() {\r\n return this.export()\r\n }\r\n}\r\n\r\n","import * as uuid from \"uuid\";\r\nimport {getQtCatName} from \"../../../../helpers/sqftQuotesHelper\";\r\n\r\nexport class LineHandlesModel {\r\n lineId;\r\n id;\r\n featureId;\r\n qtCatName;\r\n\r\n constructor(lineId, handleId, qtCatName = null, id = uuid.v4()) {\r\n this.id = id;\r\n this.lineId = lineId;\r\n this.featureId = handleId;\r\n this.qtCatName = qtCatName ? qtCatName : getQtCatName();\r\n }\r\n}\r\n","import {SQFTResourceController} from \"./SQFTResourceController\";\r\nimport {WORKSPACE_RESOURCES} from \"../../../../constants\";\r\nimport workspace from \"../../core/workspace\";\r\n\r\n\r\nexport class WallsController extends SQFTResourceController {\r\n\r\n constructor(props) {\r\n super(props);\r\n this.resourceName = WORKSPACE_RESOURCES.walls;\r\n }\r\n\r\n getWallByPoint(searchPoint) {\r\n return workspace.walls.find(wall => {\r\n for (const wallPoint of wall.getPoints()) {\r\n if (wallPoint.id === searchPoint.id) {\r\n return wall\r\n }\r\n }\r\n })\r\n }\r\n\r\n}\r\n\r\n","import * as uuid from \"uuid\";\r\nimport {SQFTResourceController} from \"./SQFTResourceController\";\r\nimport {WORKSPACE_RESOURCES} from \"../../../../constants\";\r\nimport {ShapeColorModel} from \"../models/ShapeColor\";\r\nimport {getFeatureNameById} from \"../../../../helpers/featureHelper\";\r\n\r\nexport class ShapeColorsController extends SQFTResourceController {\r\n\r\n defaultColorSets = [\r\n {\r\n id: uuid.v4(),\r\n primary: 'rgba(74, 144, 226, 0.17)',\r\n primary_border: '#4a90e2',\r\n primary_hover: 'rgba(61,115,173,0.33)',\r\n }, {\r\n id: uuid.v4(),\r\n primary: 'rgba(159, 197, 34, 0.17)',\r\n primary_border: '#9fc522',\r\n primary_hover: 'rgba(138,173,30,0.33)',\r\n }, {\r\n id: uuid.v4(),\r\n primary: 'rgba(201, 28, 123, 0.17)',\r\n primary_border: '#c91c7b',\r\n primary_hover: 'rgba(146,20,91, 0.33)',\r\n }, {\r\n id: uuid.v4(),\r\n primary: 'rgba(28, 201, 201, 0.17)',\r\n primary_border: '#1cc9c9',\r\n primary_hover: 'rgba(28, 201, 201, 0.33)',\r\n }, {\r\n id: uuid.v4(),\r\n primary: 'rgba(175, 201, 28, 0.17)',\r\n primary_border: '#afc91c',\r\n primary_hover: 'rgba(175, 201, 28, 0.33)',\r\n }, {\r\n id: uuid.v4(),\r\n primary: 'rgba(201, 158, 28, 0.17)',\r\n primary_border: '#c99e1c',\r\n primary_hover: 'rgba(201, 158, 28,0.33)',\r\n }, {\r\n id: uuid.v4(),\r\n primary: 'rgba(201, 109, 28, 0.17)',\r\n primary_border: '#c96d1c',\r\n primary_hover: 'rgba(201, 109, 28, 0.33)',\r\n }, {\r\n id: uuid.v4(),\r\n primary: 'rgba(28, 201, 146, 0.17)',\r\n primary_border: '#1cc992',\r\n primary_hover: 'rgba(28, 201, 146, 0.33)',\r\n }, {\r\n id: uuid.v4(),\r\n primary: 'rgba(28, 201, 86, 0.17)',\r\n primary_border: '#1cc956',\r\n primary_hover: 'rgba(28, 201, 86, 0.33)',\r\n }, {\r\n id: uuid.v4(),\r\n primary: 'rgba(94, 201, 28, 0.17)',\r\n primary_border: '#5ec91c',\r\n primary_hover: 'rgba(94, 201, 28, 0.33)',\r\n },{\r\n id: uuid.v4(),\r\n primary: 'rgba(169, 28, 201, 0.17)',\r\n primary_border: '#a91cc9',\r\n primary_hover: 'rgba(169, 28, 201, 0.33)',\r\n }, {\r\n id: uuid.v4(),\r\n primary: 'rgba(94, 28, 201, 0.17)',\r\n primary_border: '#5e1cc9',\r\n primary_hover: 'rgba(94, 28, 201,0.33)',\r\n },\r\n ]\r\n\r\n constructor(props) {\r\n super(props);\r\n this.resourceName = WORKSPACE_RESOURCES.shapeColors;\r\n }\r\n\r\n getShapeColorByFeatureId(featureId) {\r\n return this.getResources().find(resource => resource.featureId === featureId);\r\n }\r\n\r\n getOrGenerateNewShapeColorByFeatureId(featureId) {\r\n let colorSet = this.getShapeColorByFeatureId(featureId);\r\n if (!colorSet) {\r\n return this.createShapeColor(featureId);\r\n }\r\n return colorSet;\r\n }\r\n\r\n generateRandomRGB() {\r\n return {\r\n r: Math.floor(Math.random() * 256),\r\n g: Math.floor(Math.random() * 256),\r\n b: Math.floor(Math.random() * 256)\r\n };\r\n }\r\n\r\n darkenColor({r, g, b}, factor = 0.9) {\r\n return {\r\n r: Math.floor(r * factor),\r\n g: Math.floor(g * factor),\r\n b: Math.floor(b * factor)\r\n };\r\n }\r\n\r\n createShapeColor(featureId) {\r\n let colorSet = this.defaultColorSets.find(set => !this.getResourceById(set.id));\r\n if (!colorSet) {\r\n const baseColor = this.generateRandomRGB();\r\n const hoverColor = baseColor//this.darkenColor(baseColor);\r\n\r\n colorSet = {\r\n id: uuid.v4(),\r\n primary: `rgba(${baseColor.r}, ${baseColor.g}, ${baseColor.b}, 0.17)`,\r\n primary_border: `rgb(${baseColor.r}, ${baseColor.g}, ${baseColor.b})`,\r\n primary_hover: `rgb(${hoverColor.r}, ${hoverColor.g}, ${hoverColor.b}, 0.33)`\r\n };\r\n } else {\r\n this.defaultColorSets = this.defaultColorSets.filter(set => set.id !== colorSet.id);\r\n }\r\n\r\n const featureName = getFeatureNameById(featureId);\r\n\r\n const shapeColorModel = new ShapeColorModel(\r\n colorSet.id,\r\n featureId,\r\n featureName,\r\n colorSet.primary,\r\n colorSet.primary_border,\r\n colorSet.primary_hover\r\n );\r\n\r\n this.addResource(shapeColorModel);\r\n\r\n return shapeColorModel\r\n }\r\n}\r\n","export class ShapeColorModel {\r\n id;\r\n featureId;\r\n primary;\r\n primary_border;\r\n primary_hover;\r\n\r\n constructor(id, featureId, featureName, primary, primary_border, primary_hover) {\r\n this.id = id;\r\n this.featureId = featureId;\r\n this.featureName = featureName;\r\n this.primary = primary;\r\n this.primary_border = primary_border;\r\n this.primary_hover = primary_hover;\r\n }\r\n}\r\n","import {SQFTResourceController} from \"../SQFTResourceController\";\r\nimport {\r\n RESOURCE_TYPE,\r\n WATERFALL_OVERLAY_TYPE,\r\n WATERFALL_SHAPES_KEY,\r\n WORKSPACE_RESOURCES\r\n} from \"../../../../../constants\";\r\nimport store from \"../../../../../../../store\";\r\nimport WaterfallOverlay from \"../../../core/shapes/overlays/waterfallOverlay\";\r\nimport {addResource, changeResource, deleteResource} from \"../../../../../../../actions/sqftResourceFunctions\";\r\nimport workspace from \"../../../core/workspace\";\r\nimport {WaterfallSegmentController} from \"./WaterfallSegmentController\";\r\n\r\nexport class WaterfallController extends SQFTResourceController {\r\n\r\n constructor(props) {\r\n super(props);\r\n this.resourceName = WORKSPACE_RESOURCES.waterfall;\r\n this.segmentController = new WaterfallSegmentController(this);\r\n }\r\n\r\n createWaterfallOverlay = (line, waterfallData = null) => {\r\n const reduxState = store.getState();\r\n const waterfallSectionsData = reduxState.sqftResourceState.waterfallSectionsData;\r\n const waterfallOverlay = new WaterfallOverlay(line, waterfallSectionsData.length + 1, waterfallData);\r\n\r\n this.addResource(waterfallOverlay);\r\n this.addWaterfallToStore(waterfallOverlay);\r\n\r\n return waterfallOverlay\r\n }\r\n\r\n createPeninsulaUnderwrapOverlay = (line, waterfallData = null) => {\r\n const reduxState = store.getState();\r\n const waterfallSectionsData = reduxState.sqftResourceState.waterfallSectionsData;\r\n\r\n const sectionIndex = waterfallSectionsData.length + 1;\r\n const waterfallOverlay = new WaterfallOverlay(line, sectionIndex, waterfallData, WATERFALL_OVERLAY_TYPE.peninsulaUnderwrap);\r\n\r\n this.addResource(waterfallOverlay);\r\n this.addWaterfallToStore(waterfallOverlay);\r\n\r\n return waterfallOverlay\r\n }\r\n\r\n getResources = () => {\r\n return workspace[this.resourceName]\r\n }\r\n\r\n getResourceByLineId = (id) => {\r\n return workspace[this.resourceName].find(waterFallOverlay => waterFallOverlay.line.id === id);\r\n }\r\n\r\n getSegmentById = (id) => {\r\n for (const overlay of this.getResources()) {\r\n for (const segment of overlay.getSegments()) {\r\n if (segment.id === id) {\r\n return segment\r\n }\r\n }\r\n }\r\n }\r\n\r\n updateWaterfallLength = (line) => {\r\n if (line.isWithWaterfallToolEdge() || line.isWithPeninsulaUnderwrapEdge()) {\r\n const waterfallOverlay = this.getResourceByLineId(line.id);\r\n for (const waterfallOverlaySegment of waterfallOverlay.getSegments()) {\r\n if (waterfallOverlaySegment.name === WATERFALL_SHAPES_KEY.waterfall) {\r\n waterfallOverlaySegment.length = line.getLineLength();\r\n }\r\n if (waterfallOverlaySegment.name === WATERFALL_SHAPES_KEY.underlayment) {\r\n const nextLine = line.getParent().getNextLine(line);\r\n waterfallOverlaySegment.length = nextLine.getLineLength();\r\n }\r\n }\r\n this.changeWaterfallSectionInStore(waterfallOverlay.exportData());\r\n }\r\n }\r\n\r\n changeWaterfallSectionInStore = (waterfallSectionData) => {\r\n store.dispatch(changeResource(RESOURCE_TYPE.waterfallSectionsData, waterfallSectionData));\r\n }\r\n\r\n addWaterfallToStore = (waterfallOverlay) => {\r\n store.dispatch(addResource(RESOURCE_TYPE.waterfallSectionsData, waterfallOverlay.exportData()));\r\n }\r\n\r\n destroy = (waterfallOverlay) => {\r\n store.dispatch(deleteResource(RESOURCE_TYPE.waterfallSectionsData, waterfallOverlay.id));\r\n this.destroyResource(waterfallOverlay);\r\n }\r\n}\r\n","import uuid from \"uuid\";\r\nimport EventManager from \"../../../store/sqftEventManager\";\r\nimport WaterfallSegment from \"../shapeParts/models/waterfallSegment\";\r\nimport {WATERFALL_OVERLAY_TYPE, WATERFALL_SHAPES_KEY, WATERFALL_SHAPES_NAME} from \"../../../../../constants\";\r\nimport config from \"../../../store/sqftConfig\";\r\nimport {isWesternHemisphere} from \"../../../helpers/lineHelper\";\r\n\r\nexport default class WaterfallOverlay {\r\n id;\r\n sectionIndex;\r\n line;\r\n type; // WATERFALL_OVERLAY_TYPE\r\n state = {\r\n };\r\n design = {\r\n };\r\n segments = []; // array of WaterfallSegments\r\n\r\n constructor(line, sectionIndex, importData, type = WATERFALL_OVERLAY_TYPE.waterfall) {\r\n this.line = line;\r\n this.sectionIndex = sectionIndex;\r\n this.id = uuid();\r\n this.type = type;\r\n if (importData) {\r\n this.importData(importData)\r\n } else {\r\n switch (type) {\r\n case WATERFALL_OVERLAY_TYPE.peninsulaUnderwrap:\r\n this.createPeninsulaUnderwrapSections();\r\n break;\r\n case WATERFALL_OVERLAY_TYPE.waterfall:\r\n default:\r\n this.createWaterfallSections();\r\n break;\r\n }\r\n }\r\n }\r\n\r\n getSegments = () => { return this.segments; }\r\n getEnabledSegments = () => { return this.segments.filter(segment => !segment.isDisabled) }\r\n getParent = () => { return this.line; }\r\n setSegments = (value) => { this.segments = value; }\r\n addSegment = (segment) => { this.segments.push(segment); }\r\n\r\n destroy = (protect) => {\r\n if (!protect) {\r\n EventManager.removeEvent(this);\r\n this.segments.forEach((segment) => {\r\n segment.destroy();\r\n });\r\n }\r\n };\r\n\r\n initEvents = () => {\r\n };\r\n\r\n deregisterEvents = () => {\r\n EventManager.removeEvent(this);\r\n };\r\n\r\n reInitEvents = () => {\r\n this.initEvents();\r\n };\r\n\r\n export = () => {\r\n return this.exportData();\r\n }\r\n\r\n exportData = () => {\r\n return {\r\n id: this.id,\r\n lineId: this.line.id,\r\n state: this.state,\r\n type: this.type,\r\n segments: this.segments.map((segment) => {\r\n return segment.exportData()\r\n }),\r\n }\r\n };\r\n\r\n importData = (importData) => {\r\n this.state = importData.state;\r\n for (const segmentData of importData.segments) {\r\n this.addSegment(new WaterfallSegment(\r\n segmentData.key,\r\n segmentData.name,\r\n segmentData.length,\r\n segmentData.height,\r\n segmentData.thickness,\r\n this,\r\n segmentData.isDisabled\r\n ));\r\n }\r\n };\r\n\r\n createWaterfallSections = () => {\r\n const nextLine = this.line.getParent().getNextLine(this.line);\r\n const thickness = config.measureUnit === \"Imperial\" ? 1.5 : 40;\r\n const height = config.measureUnit === \"Imperial\" ? 36 : 900;\r\n const waterfallLength = config.measureUnit === \"Imperial\" ? this.line.getLineLength() : this.line.getLineLengthMm();\r\n const underlaymentLength = config.measureUnit === \"Imperial\" ? nextLine.getLineLength() : nextLine.getLineLengthMm();\r\n\r\n //place mirror shape in the slab mode\r\n const lineDirection = this.line.getLineDirectionV2();\r\n const isLineInWesternHemisphere = isWesternHemisphere(lineDirection) ;\r\n const defaultCabinetReturnLength = config.measureUnit === \"Imperial\" ? 4 : 60;\r\n const defaultOverhangReturnLength = config.measureUnit === \"Imperial\" ? 20 : 300;\r\n const cabinetReturnLength = isLineInWesternHemisphere ? defaultCabinetReturnLength : defaultOverhangReturnLength;\r\n const overhangReturnLength = isLineInWesternHemisphere ? defaultOverhangReturnLength : defaultCabinetReturnLength;\r\n\r\n const segments = [\r\n new WaterfallSegment(WATERFALL_SHAPES_KEY.waterfall, WATERFALL_SHAPES_NAME.waterfall, waterfallLength, height, thickness, this),\r\n new WaterfallSegment(WATERFALL_SHAPES_KEY.cabinetReturn, WATERFALL_SHAPES_NAME.cabinetReturn, cabinetReturnLength, height, thickness, this, true),\r\n new WaterfallSegment(WATERFALL_SHAPES_KEY.overhangReturn, WATERFALL_SHAPES_NAME.overhangReturn,overhangReturnLength, height, thickness, this, true),\r\n new WaterfallSegment(WATERFALL_SHAPES_KEY.underlayment, WATERFALL_SHAPES_NAME.underlayment, underlaymentLength, height, thickness, this, true),\r\n ];\r\n this.setSegments(segments);\r\n }\r\n\r\n createPeninsulaUnderwrapSections = () => {\r\n const segments = [\r\n new WaterfallSegment(WATERFALL_SHAPES_KEY.peninsulaUnderwrap, WATERFALL_SHAPES_NAME.peninsulaUnderwrap, this.line.getLineLength(), 36, 1.5, this, false),\r\n ];\r\n this.setSegments(segments);\r\n }\r\n\r\n getArea = () => {\r\n return this.segments.reduce((sum, segment) => sum + segment.getArea(), 0)\r\n }\r\n}\r\n","import { v4 as uuidv4 } from 'uuid';\r\nimport {WATERFALL_SHAPES_KEY} from \"../../../../../../constants\";\r\n\r\nexport default class WaterfallSegment {\r\n id;\r\n key; /* string */\r\n name; /* string */\r\n length; /* int */\r\n height; /* int */\r\n thickness; /* int */\r\n parentSection; /* object */\r\n isDisabled; /* bool */\r\n COMMON_HEIGHT = [\r\n // WATERFALL_SHAPES_KEY.waterfall,\r\n // WATERFALL_SHAPES_KEY.cabinetReturn,\r\n // WATERFALL_SHAPES_KEY.overhangReturn,\r\n ];\r\n USE_DEPTH_INSTEAD_OF_HEIGHT = [\r\n WATERFALL_SHAPES_KEY.underlayment,\r\n WATERFALL_SHAPES_KEY.peninsulaUnderwrap\r\n ];\r\n USE_LINE_LENGTH = [\r\n WATERFALL_SHAPES_KEY.underlayment,\r\n WATERFALL_SHAPES_KEY.waterfall\r\n ];\r\n\r\n constructor(key, name, length, height, thickness, parentSection, isDisabled = false) {\r\n this.id = uuidv4();\r\n this.key = key;\r\n this.name = name;\r\n this.length = length;\r\n this.height = height;\r\n this.thickness = thickness;\r\n this.parentSection = parentSection;\r\n this.isDisabled = isDisabled;\r\n }\r\n\r\n exportData = () => ({\r\n id: this.id,\r\n overlayId: this.getParent().id,\r\n key: this.key,\r\n name: this.name,\r\n height: this.height,\r\n thickness: this.thickness,\r\n length: this.length,\r\n isDisabled: this.isDisabled,\r\n })\r\n\r\n setIsDisabled = (value) => {\r\n this.isDisabled = value\r\n }\r\n\r\n getParent = () => {\r\n return this.parentSection\r\n }\r\n\r\n getArea = () => {\r\n if (this.isDisabled) {\r\n return 0\r\n }\r\n\r\n let area = 0;\r\n\r\n // this will add mitered edge area\r\n if (this.key === WATERFALL_SHAPES_KEY.overhangReturn) {\r\n area += this.height * this.thickness\r\n } else if (this.key === WATERFALL_SHAPES_KEY.waterfall) {\r\n area += (this.height * this.thickness) * 2 //we have two mitered edges from sides\r\n } else if (this.key === WATERFALL_SHAPES_KEY.cabinetReturn) {\r\n area += this.height * this.thickness\r\n }\r\n\r\n // shape area\r\n area += this.height * this.length\r\n\r\n return area\r\n }\r\n\r\n destroy = () => {\r\n\r\n }\r\n}\r\n","import {WATERFALL_SHAPES_KEY} from \"../../../../../constants\";\r\nimport SqftStore from \"../../sqftStore\";\r\nimport SlabWorkspace from \"../../../core/slab/slabWorkspace\";\r\nimport {createSlabModeWaterfallShapes} from \"../../canvasHelper\";\r\n\r\nexport class WaterfallSegmentController {\r\n\r\n constructor(parentController) {\r\n this.parentController = parentController;\r\n }\r\n\r\n updateWaterfallLength = (line) => {\r\n if (!line.isWithWaterfallToolEdge() || !line.isWithPeninsulaUnderwrapEdge()) {\r\n return\r\n }\r\n const waterfallOverlay = this.parentController.getResourceByLineId(line.id);\r\n for (const waterfallOverlaySegment of waterfallOverlay.getSegments()) {\r\n if (waterfallOverlaySegment.name === WATERFALL_SHAPES_KEY.waterfall\r\n || waterfallOverlaySegment.name === WATERFALL_SHAPES_KEY.underlayment\r\n ) {\r\n waterfallOverlaySegment.length = line.getLineLength();\r\n }\r\n }\r\n this.parentController.changeWaterfallSectionInStore(waterfallOverlay.exportData());\r\n }\r\n\r\n changeSegmentLength = (segmentId, newValue) => {\r\n const segment = this.parentController.getSegmentById(segmentId);\r\n const waterfallOverlay = segment.getParent();\r\n segment.length = +newValue\r\n\r\n this.parentController.changeWaterfallSectionInStore(waterfallOverlay.exportData());\r\n this.postChangeValue(waterfallOverlay.id);\r\n }\r\n\r\n changeSegmentHeight = (segmentId, newValue) => {\r\n const updatedSegment = this.parentController.getSegmentById(segmentId);\r\n const waterfallOverlay = updatedSegment.getParent();\r\n\r\n if (updatedSegment.COMMON_HEIGHT.includes(updatedSegment.name)) {\r\n for (const waterfallOverlaySegment of waterfallOverlay.getSegments()) {\r\n if (waterfallOverlaySegment.COMMON_HEIGHT.includes(waterfallOverlaySegment.name)) {\r\n waterfallOverlaySegment.height = +newValue;\r\n }\r\n }\r\n } else {\r\n updatedSegment.height = +newValue;\r\n }\r\n\r\n this.parentController.changeWaterfallSectionInStore(waterfallOverlay.exportData());\r\n this.postChangeValue(waterfallOverlay.id);\r\n }\r\n\r\n changeSegmentThickness = (segmentId, newValue) => {\r\n const segment = this.parentController.getSegmentById(segmentId);\r\n const waterfallOverlay = segment.getParent();\r\n segment.thickness = +newValue\r\n\r\n this.parentController.changeWaterfallSectionInStore(waterfallOverlay.exportData());\r\n this.postChangeValue(waterfallOverlay.id);\r\n }\r\n\r\n changeSegmentIsDisabled = (segmentId, newValue) => {\r\n const waterfallSegment = this.parentController.getSegmentById(segmentId);\r\n const waterfallOverlay = waterfallSegment.getParent();\r\n waterfallSegment.setIsDisabled(newValue);\r\n\r\n this.parentController.changeWaterfallSectionInStore(waterfallOverlay.exportData());\r\n this.postChangeValue(waterfallOverlay.id);\r\n }\r\n\r\n postChangeValue = (overlayId) => {\r\n // remove all slab shapes\r\n const overlay = this.parentController.getResourceById(overlayId);\r\n SlabWorkspace.slabAdditionalShapes.removeActiveBacksplashByLine(overlay.line);\r\n\r\n //reCreate Slab Shapes\r\n createSlabModeWaterfallShapes();\r\n\r\n // update calculations\r\n SqftStore.updateCalculations();\r\n }\r\n\r\n}\r\n","import {SQFTResourceController} from \"./SQFTResourceController\";\r\nimport {WORKSPACE_RESOURCES} from \"../../../../constants\";\r\n\r\nexport class RemovedFeaturesController extends SQFTResourceController {\r\n\r\n constructor(props) {\r\n super(props);\r\n this.resourceName = WORKSPACE_RESOURCES.walls;\r\n }\r\n\r\n}\r\n\r\n","import sqftShapeManager from \"../sqftShapeManager\";\r\nimport workspace from \"../../core/workspace\";\r\nimport {WORKSPACE_RESOURCES} from \"../../../../constants\";\r\nimport {SQFTResourceController} from \"./SQFTResourceController\";\r\nimport ShapeHelper from \"../../../../helpers/shapeHelper\";\r\nimport workspaceControllers from \"../workspaceControllers\";\r\nimport store from \"../../../../../../store\";\r\nimport sqftShape from \"../../core/shapes/sqftShape\";\r\nimport MovableImage from \"../../core/shapes/movableImage\";\r\n//import sqftShapeIntersectionsManager from \"../sqftShapeIntersectionsManager\";\r\n\r\nexport class SnappedShapeGroupsController extends SQFTResourceController {\r\n //snappedShapeGroups = [];\r\n\r\n constructor(props) {\r\n super(props);\r\n this.resourceName = WORKSPACE_RESOURCES.snappedShapeGroups;\r\n }\r\n\r\n addNewSnappedShapeGroupNumber = () => {\r\n const snappedShapeGroups = this.getResources();\r\n const newNumber = snappedShapeGroups.length > 0\r\n ? snappedShapeGroups[snappedShapeGroups.length - 1] + 1\r\n : 0;\r\n this.addResource(newNumber);\r\n\r\n return newNumber\r\n }\r\n\r\n setSameSnappedShapesGroup = (snappedShape, snappedWithShape) => {\r\n const snappedShapeGroup = snappedShape.shapeAbsolute.getSnappedShapeGroup();\r\n const snappedWithShapeGroup = snappedWithShape.shapeAbsolute.getSnappedShapeGroup();\r\n if (snappedWithShapeGroup !== null) {\r\n snappedShape.shapeAbsolute.setSnappedShapeGroup(snappedWithShapeGroup);\r\n } else if (snappedShapeGroup !== null) {\r\n snappedWithShape.shapeAbsolute.setSnappedShapeGroup(snappedShapeGroup);\r\n } else {\r\n const groupNumber = this.addNewSnappedShapeGroupNumber();\r\n snappedShape.shapeAbsolute.setSnappedShapeGroup(groupNumber);\r\n snappedWithShape.shapeAbsolute.setSnappedShapeGroup(groupNumber);\r\n }\r\n }\r\n\r\n // isShapeGroupConsistsOfOnlyCabinetShapes = (snappedShapeGroup) => {\r\n // const shapes = this.getSnappedShapes(snappedShapeGroup);\r\n // return !shapes.some(shape => shape.shapeCabinet === null);\r\n // }\r\n\r\n getMeasurementPoints = (snappedShapeGroup) => {\r\n const shapes = this.getSnappedShapes(snappedShapeGroup);\r\n if (shapes.length > 0) {\r\n let shapesPoints = [];\r\n shapes.forEach(shp => {\r\n shapesPoints.push(...shp.getPointsPointField());\r\n });\r\n let pointsMinMax = sqftShapeManager.getMinMaxPoints(shapesPoints, false);\r\n\r\n //console.log(\"shapesMinMax\", pointsMinMax);\r\n\r\n return [\r\n {x: pointsMinMax.minX, y: pointsMinMax.minY},\r\n {x: pointsMinMax.maxX, y: pointsMinMax.minY},\r\n {x: pointsMinMax.maxX, y: pointsMinMax.maxY},\r\n {x: pointsMinMax.minX, y: pointsMinMax.maxY}\r\n ];\r\n }\r\n return []\r\n }\r\n\r\n getSnappedShapes = (snappedShapeGroup) => {\r\n const shapes = workspace.getShapes(true);\r\n return shapes.filter(shp => {\r\n return !!(shp.shapeAbsolute && (shp.shapeAbsolute.getSnappedShapeGroup() === snappedShapeGroup))\r\n || !!(shp.shapeSlab && shp.shapeSlab.shapeAbsolute && (shp.shapeSlab.shapeAbsolute.getSnappedShapeGroup() === snappedShapeGroup))\r\n })\r\n }\r\n\r\n // Updates the groups of snapped shapes in the workspace\r\n updateShapesSnappedGroups = (shouldUpdateAbsolutePos = false) => {\r\n // Sort shapes by their position\r\n const shapes = workspace.getShapes(true)\r\n .filter(shp => shp instanceof MovableImage || shp instanceof sqftShape)\r\n .sort((a, b) => {\r\n let aPos = a.getPosition();\r\n let bPos = b.getPosition();\r\n return aPos.x - bPos.x || aPos.y - bPos.y;\r\n });\r\n //const shapesPosition = shapes.map(shp => {return {id: shp.id, ...shp.getPosition()}});\r\n //sqftShapeIntersectionsManager.logSnappedShapeGroups();\r\n //console.log(\"shapesPosition\", shapesPosition);\r\n const visitedShapes = new Set(); // To keep track of already processed shapes\r\n\r\n this.resetShapesSnappedGroups();\r\n\r\n for (const shape of shapes) {\r\n if ((shape instanceof sqftShape || shape instanceof MovableImage) && !visitedShapes.has(shape)) {\r\n this.updateGroupForShapeAndConnected(shape, visitedShapes, shouldUpdateAbsolutePos);\r\n }\r\n }\r\n\r\n //sqftShapeIntersectionsManager.logSnappedShapeGroups();\r\n }\r\n\r\n // Updates the groups of snapped shapes in the workspace\r\n resetShapesSnappedGroups = () => {\r\n const isShowSlabTool = store.getState().sqftSlabState.isShowSlabTool;\r\n const shapes = workspace.getShapes(true);\r\n\r\n for (const shape of shapes) {\r\n if (shape instanceof sqftShape) {\r\n const shapeAbsolute = isShowSlabTool ? shape.shapeSlab.shapeAbsolute : shape.shapeAbsolute;\r\n this.resetShapeSnappedGroup(shapeAbsolute);\r\n } else if (shape instanceof MovableImage) {\r\n this.resetShapeSnappedGroup(shape.shapeAbsolute);\r\n }\r\n }\r\n }\r\n\r\n // Updates the groups of snapped shapes in the workspace\r\n resetShapeSnappedGroup = (shapeAbsolute) => {\r\n shapeAbsolute.setSnappedWithShape(null);\r\n shapeAbsolute.setSnappedShapeGroup(null);\r\n }\r\n\r\n // Recursive function to update groups for a shape and all connected shapes\r\n updateGroupForShapeAndConnected = (shape, visitedShapes, shouldUpdateAbsolutePos) => {\r\n visitedShapes.add(shape);\r\n const connectedShapes = this.updateShapeSnappedGroup(shape, shouldUpdateAbsolutePos); // Update group for the current shape\r\n\r\n //console.log(\"shape id\", shape.id);\r\n //console.log(\"shape shapeSlab.shapeAbsolute.getSnappedShapeGroup()\", shape.shapeSlab.shapeAbsolute.getSnappedShapeGroup());\r\n // if (connectedShapes[0]) {\r\n // console.log(\"connectedShapes 0 id\", connectedShapes[0].id);\r\n // console.log(\"shape shapeSlab.shapeAbsolute.getSnappedShapeGroup()\", connectedShapes[0].shapeSlab.shapeAbsolute.getSnappedShapeGroup());\r\n // }\r\n // if (connectedShapes[1]) {\r\n // console.log(\"connectedShapes 1 id\", connectedShapes[1].id);\r\n // console.log(\"shape shapeSlab.shapeAbsolute.getSnappedShapeGroup()\", connectedShapes[1].shapeSlab.shapeAbsolute.getSnappedShapeGroup());\r\n // }\r\n //debugger // eslint-disable-line no-debugger\r\n\r\n // Retrieve connected shapes (this logic might vary based on your application)\r\n //const connectedShapes = ShapeHelper.getConnectedShapes(shape);\r\n\r\n for (const connectedShape of connectedShapes) {\r\n if (!visitedShapes.has(connectedShape)) {\r\n this.updateGroupForShapeAndConnected(connectedShape, visitedShapes);\r\n }\r\n }\r\n }\r\n\r\n /**\r\n * Update absolute shape position in regular or in slab mode. Also updates snapped shape group.\r\n * @param shape\r\n * @param shouldUpdateAbsolutePos\r\n * @return {*[]}\r\n */\r\n updateShapeSnappedGroup = (shape, shouldUpdateAbsolutePos) => {\r\n let isShowSlabTool = store.getState().sqftSlabState.isShowSlabTool;\r\n let snapPossibilitiesToShapes = [];\r\n let snapPossibilitiesToImages = [];\r\n let snapPossibilitiesToWalls = [];\r\n let shapeAbsolute;\r\n let pos;\r\n\r\n if (shape instanceof sqftShape) {\r\n shapeAbsolute = isShowSlabTool ? shape.shapeSlab.shapeAbsolute : shape.shapeAbsolute;\r\n pos = isShowSlabTool ? shape.slabPos : shape.pos;\r\n } else if (shape instanceof MovableImage) {\r\n shapeAbsolute = shape.shapeAbsolute;\r\n pos = shape.pos;\r\n }\r\n\r\n if (shouldUpdateAbsolutePos) {\r\n shapeAbsolute.setAbsolutePos(null); //reset minLength for correct calculations without stacking\r\n }\r\n // shapeAbsolute.setSnappedWithShape(null);\r\n // shapeAbsolute.setSnappedShapeGroup(null);\r\n\r\n let distancesToWalls = ShapeHelper.getDistancesToWalls(shape);\r\n let distancesToShapes = ShapeHelper.getDistancesToShapes(shape);\r\n let distancesToImages = ShapeHelper.getDistancesToImages(shape);\r\n //console.log(\"distancesToWalls\", distancesToWalls);\r\n //console.log(\"distancesToShapes\", distancesToShapes);\r\n //console.log(\"distancesToImages\", distancesToImages);\r\n\r\n const itemBoundsWithSamePartId = ShapeHelper.getItemBoundsForTheSamePartIdIfExist(distancesToShapes, shape.partId);\r\n snapPossibilitiesToShapes = ShapeHelper.getSnappingPossibilities(itemBoundsWithSamePartId);\r\n if (snapPossibilitiesToShapes.length === 0) {\r\n snapPossibilitiesToShapes = ShapeHelper.getSnappingPossibilities(distancesToShapes);\r\n }\r\n //console.log(\"snapPossibilitiesToShapes\", snapPossibilitiesToShapes);\r\n snapPossibilitiesToImages = ShapeHelper.getSnappingPossibilities(distancesToImages);\r\n snapPossibilitiesToWalls = ShapeHelper.getSnappingPossibilities(distancesToWalls);\r\n //console.log(\"snapPossibilitiesToShapes\", snapPossibilitiesToShapes);\r\n\r\n //walls\r\n let [absolutePosToWalls, snappedWithWalls] = ShapeHelper.getAbsolutePosFromSnapPossibilities(snapPossibilitiesToWalls, pos);\r\n if (absolutePosToWalls) {\r\n if (shouldUpdateAbsolutePos) {\r\n shapeAbsolute.setAbsolutePos(absolutePosToWalls);\r\n }\r\n void snappedWithWalls;\r\n //snappedWithImage.shapeAbsolute.setSnappedWithImage(this);\r\n }\r\n\r\n //shapes\r\n let [absolutePosToShapes, snappedWithShape] = ShapeHelper.getAbsolutePosFromSnapPossibilities(snapPossibilitiesToShapes, pos);\r\n if (absolutePosToShapes) {\r\n if (shouldUpdateAbsolutePos) {\r\n shapeAbsolute.setAbsolutePos(absolutePosToShapes);\r\n }\r\n if (isShowSlabTool) {\r\n if (snappedWithShape.shapeSlab && snappedWithShape.shapeSlab.shapeAbsolute) {\r\n snappedWithShape.shapeSlab.shapeAbsolute.setSnappedWithShape(shape.shapeSlab);\r\n }\r\n if (shape.shapeSlab && shape.shapeSlab.shapeAbsolute) {\r\n shape.shapeSlab.shapeAbsolute.setSnappedWithShape(snappedWithShape);\r\n }\r\n } else {\r\n snappedWithShape.shapeAbsolute.setSnappedWithShape(shape);\r\n shape.shapeAbsolute.setSnappedWithShape(snappedWithShape);\r\n }\r\n\r\n // set same snapped shape group for all shapes\r\n const snappedShape = isShowSlabTool && shape.shapeSlab ? shape.shapeSlab : shape;\r\n const snappedShapeIds = Object.keys(distancesToShapes);\r\n for (const shapeId of snappedShapeIds) {\r\n const snappedShapeFromAllPossibilities = workspace.getShapeById(parseInt(shapeId));\r\n const shapeSlab = snappedShapeFromAllPossibilities.shapeSlab\r\n snappedWithShape = isShowSlabTool && shapeSlab ? shapeSlab : snappedShapeFromAllPossibilities;\r\n workspaceControllers.snappedShapeGroups.setSameSnappedShapesGroup(snappedShape, snappedWithShape);\r\n }\r\n }\r\n\r\n //images\r\n let [absolutePosToImages, snappedWithImage] = ShapeHelper.getAbsolutePosFromSnapPossibilities(snapPossibilitiesToImages, pos);\r\n if (absolutePosToImages) {\r\n if (shouldUpdateAbsolutePos) {\r\n shapeAbsolute.setAbsolutePos(absolutePosToImages);\r\n }\r\n void snappedWithImage;\r\n //snappedWithImage.shapeAbsolute.setSnappedWithImage(this);\r\n }\r\n\r\n //allSnappedPossibilities\r\n return [\r\n ...snapPossibilitiesToShapes.map(snapPossibility => snapPossibility.shape),\r\n ...snapPossibilitiesToImages.map(snapPossibility => snapPossibility.shape)\r\n ];\r\n }\r\n}\r\n","import {SQFTResourceController} from \"./SQFTResourceController\";\r\nimport {WORKSPACE_RESOURCES} from \"../../../../constants\";\r\n\r\nexport class SelectedShapesController extends SQFTResourceController {\r\n\r\n constructor(props) {\r\n super(props);\r\n this.resourceName = WORKSPACE_RESOURCES.selectedShapes;\r\n }\r\n\r\n addShapeToSelection = (shape) => {\r\n this.addResource(shape);\r\n };\r\n\r\n removeShapeFromSelection = (shape) => {\r\n this.removeResource(shape);\r\n };\r\n\r\n clearSelection = () => {\r\n this.removeAllResources();\r\n };\r\n\r\n isShapeSelected = (shape) => {\r\n return this.getResources().includes(shape);\r\n };\r\n\r\n render = (ctx) => {\r\n void ctx\r\n // for (const ctx1 of ctx) {\r\n //\r\n // }\r\n\r\n }\r\n}\r\n\r\n","import {SQFTResourceController} from \"./SQFTResourceController\";\r\nimport {WORKSPACE_RESOURCES} from \"../../../../constants\";\r\n\r\nexport class Images3dController extends SQFTResourceController {\r\n\r\n constructor(props) {\r\n super(props);\r\n this.resourceName = WORKSPACE_RESOURCES.images3d;\r\n }\r\n}\r\n\r\n","import {getDistanceFromPointToLine} from \"./sqftHelper\";\r\nimport {getAngleBetween3Points} from \"./shapeHelper\";\r\n\r\nexport default class FitSize {\r\n\r\n shape;\r\n line;\r\n nextLine;\r\n prevLine;\r\n outlineDistance = 0;\r\n\r\n constructor(line) {\r\n this.line = line;\r\n this.shape = line.getParent();\r\n this.nextLine = this.shape.getNextLine(line);\r\n this.prevLine = this.shape.getPrevLine(line);\r\n }\r\n\r\n isFitSize = (additionalLength) => {\r\n return [\r\n this.isFitLineLength(additionalLength),\r\n this.isFitSiblingLineCorner(additionalLength),\r\n this.isFitBumpout(additionalLength),\r\n this.isFitPontDistancesToCornerLine(additionalLength),\r\n this.isFitByAngleBetweenLines(additionalLength)\r\n ]\r\n .every(isFit => isFit)\r\n };\r\n\r\n isFitPontDistancesToCornerLine = (additionalLength) => {\r\n const prevPointToCurrentLineLength = getDistanceFromPointToLine(\r\n this.prevLine.from.x,\r\n this.prevLine.from.y,\r\n this.line.from.x,\r\n this.line.from.y,\r\n this.line.to.x,\r\n this.line.to.y,\r\n )\r\n const nextPointToCurrentLineLength = getDistanceFromPointToLine(\r\n this.line.to.x,\r\n this.line.to.y,\r\n this.prevLine.from.x,\r\n this.prevLine.from.y,\r\n this.prevLine.to.x,\r\n this.prevLine.to.y,\r\n )\r\n\r\n return [prevPointToCurrentLineLength, nextPointToCurrentLineLength].every((lineLength) => {\r\n return additionalLength + this.outlineDistance <= lineLength\r\n })\r\n }\r\n\r\n isFitLineLength = (additionalLength) => {\r\n return [this.line.getLineLength(), this.prevLine.getLineLength()].every((lineLength) => {\r\n return additionalLength <= lineLength\r\n })\r\n };\r\n\r\n isFitSiblingLineCorner = (additionalLength) => {\r\n let siblingCornerLength = 0;\r\n let cornerTotalLength = 0;\r\n\r\n if (this.nextLine.from.arcLength > 0 || this.nextLine.from.angle > 0) {\r\n siblingCornerLength = this.nextLine.from.getArcLength() || this.nextLine.from.getAngle();\r\n cornerTotalLength = +siblingCornerLength + +additionalLength;\r\n if(cornerTotalLength >= this.line.getLineLength()) {\r\n return false\r\n }\r\n }\r\n if (this.prevLine.from.arcLength > 0 || this.prevLine.from.angle > 0) {\r\n siblingCornerLength = this.prevLine.from.getArcLength() || this.prevLine.from.getAngle();\r\n cornerTotalLength = +siblingCornerLength + +additionalLength;\r\n if(cornerTotalLength >= this.prevLine.getLineLength() ) {\r\n return false\r\n }\r\n }\r\n\r\n return true\r\n };\r\n\r\n isFitBumpout = (additionalLength) => {\r\n if(this.line.isWithBumpout()){\r\n let bumpoutTextParameters = this.line.bumpoutOverlay.getBumpoutTextParameter();\r\n\r\n if(additionalLength >= bumpoutTextParameters.length4to.pointsDistance) {\r\n return false\r\n }\r\n } else if(this.prevLine.isWithBumpout()){\r\n let bumpoutTextParameters = this.prevLine.bumpoutOverlay.getBumpoutTextParameter();\r\n\r\n if(additionalLength >= bumpoutTextParameters.length4to.pointsDistance) {\r\n return false\r\n }\r\n }\r\n\r\n return true\r\n };\r\n\r\n isFitByAngleBetweenLines = (radius) => {\r\n const angle = getAngleBetween3Points(\r\n this.prevLine.from, this.line.from, this.line.to\r\n );\r\n\r\n // d = r/tan(α/2)\r\n const minDistanceNeeded = radius / Math.tan((angle / 2) * (Math.PI / 180));\r\n\r\n const prevLineLength = this.prevLine.getLineLength();\r\n const lineLength = this.line.getLineLength();\r\n\r\n return prevLineLength >= minDistanceNeeded && lineLength >= minDistanceNeeded;\r\n };\r\n}\r\n","import cloneDeep from \"lodash/cloneDeep\";\r\nimport uuid from \"uuid\";\r\n\r\nimport EventManager from \"../../../store/sqftEventManager\";\r\nimport {pnpolyArray} from \"../../../../../lib/pnpoly\";\r\nimport resizeLine, {getMaxResizeWidth} from \"./resizeLine\";\r\nimport config from \"../../../store/sqftConfig\";\r\nimport {\r\n getPointDistance,\r\n orientation,\r\n measureDistanceToInches,\r\n distanceToMillimeters,\r\n distanceToInches,\r\n getFontsize,\r\n get45CornerLegDistanceByHypotenuse,\r\n getAngleBetweenTwoPoints,\r\n getParallelPoints,\r\n getPointField,\r\n rotatePoint,\r\n mmToInches,\r\n} from \"../../../../../helpers/sqftHelper\";\r\nimport COLOR_THEMES, {COLOR} from \"../../../store/colorThemes\";\r\nimport store from \"../../../../../../../store\";\r\nimport {updateSQFTCalculations} from \"../../../../../../../actions/sqftFunctions\";\r\nimport sqftConfig from \"../../../store/sqftConfig\";\r\nimport Config from \"../../../../../../../config\";\r\nimport RenderFigures from \"../../../helpers/renderFigures\";\r\nimport {updateMiteredLength, updateShapeWaterfallLength, updateUnderlaymentLength} from \"../../../helpers/lineHelper\";\r\nimport workspace from \"../../workspace\";\r\nimport {createAdjustableInput} from \"../../../../../helpers/uiHelper\";\r\nimport {MEASURE_UNITS} from \"../../../../../constants\";\r\n\r\nexport default function() {\r\n var self = this,\r\n state = {\r\n isHovered: false,\r\n isEditInputDisplayed: false,\r\n hoveredColor: \"#FF9844\",\r\n textWidth: 0,\r\n withBumpout: false,\r\n midPoint: {\r\n x: 0,\r\n y: 0,\r\n xOffset: 0,\r\n yOffset: 0\r\n },\r\n originalLineText: '',\r\n lineTextResized: '',\r\n lineText: '',\r\n },\r\n line = null,\r\n lineType = 'edge', // by default\r\n lineTextColor = COLOR_THEMES[config.activeTheme].primary;\r\n this.id = uuid();\r\n this.isInited = false;\r\n this.design = {\r\n offsetFromLineEnd: 15\r\n }\r\n\r\n function setLine(value) { line = value; }\r\n this.getLine = () => { return line; }\r\n function getMidPoint(from, to) {\r\n return {\r\n x: from.x + (to.x - from.x)/2,\r\n y: from.y + (to.y - from.y)/2\r\n };\r\n }\r\n\r\n const isMouseOverText = (mousePos) => {\r\n const lineDirection = line.getLineDirection();\r\n const pointsArray = this.getHoveredArea();\r\n\r\n return {isHovered: pnpolyArray(pointsArray, mousePos), orientation: lineDirection.orientation};\r\n }\r\n\r\n this.getHoveredArea = () => {\r\n const lineDirection = line.getLineDirection();\r\n let pointsArray = [];\r\n //console.log(\"lineDirection.orientation\", lineDirection.orientation);\r\n switch (lineDirection.orientation) {\r\n case \"vertical\":\r\n if (lineDirection.newDirection === \"south\") {\r\n pointsArray = [\r\n [state.midPoint.x + 40, state.midPoint.y - state.textWidth / 2 - 10],\r\n [state.midPoint.x + 15, state.midPoint.y - state.textWidth / 2 - 10],\r\n [state.midPoint.x + 15, state.midPoint.y + state.textWidth / 2 - 5],\r\n [state.midPoint.x + 40, state.midPoint.y + state.textWidth / 2 - 5],\r\n ];\r\n } else if (lineDirection.newDirection === \"north\") {\r\n pointsArray = [\r\n [state.midPoint.x - 40, state.midPoint.y - state.textWidth / 2 - 10],\r\n [state.midPoint.x - 15, state.midPoint.y - state.textWidth / 2 - 10],\r\n [state.midPoint.x - 15, state.midPoint.y + state.textWidth / 2 - 5],\r\n [state.midPoint.x - 40, state.midPoint.y + state.textWidth / 2 - 5],\r\n ];\r\n }\r\n break;\r\n case \"horizontal\": {\r\n pointsArray = [\r\n [state.midPoint.x - state.textWidth / 2 - 10, state.midPoint.y - 15],\r\n [state.midPoint.x + state.textWidth / 2 + 10, state.midPoint.y - 15],\r\n [state.midPoint.x + state.textWidth / 2 + 10, state.midPoint.y + 10],\r\n [state.midPoint.x - state.textWidth / 2 - 10, state.midPoint.y + 10],\r\n ]\r\n break;\r\n }\r\n case \"northeast\":\r\n case \"northwest\":\r\n case \"southeast\":\r\n case \"southwest\":\r\n default: {\r\n let angle = getAngleBetweenTwoPoints(line.from, line.to);\r\n let pointToRotate1 = {x: state.midPoint.x - state.textWidth / 2 - 10, y: state.midPoint.y - 15};\r\n let rotatedPoint1 = rotatePoint(pointToRotate1, state.midPoint, angle);\r\n let pointToRotate2 = {x: state.midPoint.x + state.textWidth / 2 + 10, y: state.midPoint.y - 15};\r\n let rotatedPoint2 = rotatePoint(pointToRotate2, state.midPoint, angle);\r\n let pointToRotate3 = {x: state.midPoint.x + state.textWidth / 2 + 10, y: state.midPoint.y + 10};\r\n let rotatedPoint3 = rotatePoint(pointToRotate3, state.midPoint, angle);\r\n let pointToRotate4 = {x: state.midPoint.x - state.textWidth / 2 - 10, y: state.midPoint.y + 10};\r\n let rotatedPoint4 = rotatePoint(pointToRotate4, state.midPoint, angle);\r\n pointsArray = [\r\n [rotatedPoint1.x, rotatedPoint1.y],\r\n [rotatedPoint2.x, rotatedPoint2.y],\r\n [rotatedPoint3.x, rotatedPoint3.y],\r\n [rotatedPoint4.x, rotatedPoint4.y],\r\n // [state.midPoint.x - state.textWidth / 2 - 10, state.midPoint.y - 15],\r\n // [state.midPoint.x + state.textWidth / 2 + 10, state.midPoint.y - 15],\r\n // [state.midPoint.x + state.textWidth / 2 + 10, state.midPoint.y + 10],\r\n // [state.midPoint.x - state.textWidth / 2 - 10, state.midPoint.y + 10],\r\n ]\r\n break\r\n }\r\n }\r\n return pointsArray\r\n }\r\n\r\n function onMouseMove(mousePos, e) {\r\n void e;\r\n const {isHovered, orientation} = isMouseOverText(mousePos);\r\n state.isHovered = isHovered;\r\n if (state.isHovered) {\r\n EventManager.stealCursor();\r\n EventManager.setCursor((orientation === \"horizontal\") ? \"text\" : \"text-vertical\", self);\r\n } else {\r\n EventManager.resetCursor(self);\r\n }\r\n }\r\n\r\n const onMouseDown = () => {\r\n if (state.isHovered && !document.querySelector(\".line-input\")) {\r\n window.lineInputFocused = true;\r\n EventManager.stealCursor();\r\n state.isEditInputDisplayed = true;\r\n\r\n const maxLength = Math.round(getMaxResizeWidth(line) * config.getMeasureMultiplier());\r\n let initialValue;\r\n if (sqftConfig.measureUnit === MEASURE_UNITS.Imperial) {\r\n initialValue = Math.round10(self.getLineDistanceFull() * config.getMeasureMultiplier(), -6);\r\n initialValue = distanceToInches(initialValue).replace(\"\\\"\", \"\");\r\n } else if (sqftConfig.measureUnit === MEASURE_UNITS.Metric) {\r\n initialValue = Math.round10(self.getLineDistanceFull() * config.getMeasureMultiplier());\r\n }\r\n //console.log(\"initialValue\", initialValue);\r\n //const pointDistance = Math.sqrt(Math.pow(line.to.x - line.from.x, 2) + Math.pow(line.to.y - line.from.y, 2));\r\n //console.log(\"pointDistance\", pointDistance);\r\n\r\n\r\n const pos = { x: state.midPoint.x, y: state.midPoint.y };\r\n\r\n const inputWrapper = createAdjustableInput({\r\n position: pos,\r\n initialValue: initialValue.toString(),\r\n min: 1,\r\n max: maxLength,\r\n orientation: \"horizontal\",\r\n onChange: (value) => {\r\n if (sqftConfig.measureUnit === MEASURE_UNITS.Metric) {\r\n value = mmToInches(value);\r\n }\r\n setNewLineWidth(value - self.getAdditionalLineDistance())\r\n }, // Update line width on change\r\n onClose: () => {\r\n window.lineInputFocused = false;\r\n state.isEditInputDisplayed = false;\r\n },\r\n step: 1,\r\n });\r\n\r\n document.querySelector(\".sqft-main-grid\").appendChild(inputWrapper);\r\n\r\n // Focus and select input on creation\r\n const input = inputWrapper.querySelector(\".line-input-field\");\r\n input.focus();\r\n }\r\n };\r\n\r\n function setNewLineWidth(lineWidth) {\r\n const distance = getPointDistance(line.from, line.to);\r\n const diff = lineWidth - distance;\r\n const roundedDiff = Math.round10(diff, -4)\r\n //console.log(\"setNewLineWidth roundedDiff\", roundedDiff);\r\n const reduxState = store.getState();\r\n const isWallsLockMode = reduxState.sqftMenuState.isWallsLockMode;\r\n resizeLine(line, roundedDiff, isWallsLockMode);\r\n updateShapeWaterfallLength(line);\r\n updateMiteredLength(line);\r\n updateUnderlaymentLength(line);\r\n\r\n const state = store.getState();\r\n const updateCalculations = state.sqftState.updateCalculations;\r\n store.dispatch(updateSQFTCalculations(updateCalculations + 1));\r\n }\r\n function getCtxColor(ctx, lineType) {\r\n return (lineType === \"wall\")\r\n ? state.isHovered ? state.hoveredColor : ctx.fillStyle\r\n : state.isHovered ? state.hoveredColor : COLOR_THEMES[config.activeTheme].primary;\r\n }\r\n this.destroy = (protect) => {\r\n if (!protect) {\r\n EventManager.removeEvent(self);\r\n this.isInited = false\r\n }\r\n };\r\n this.import = (data) => {\r\n state = data.state;\r\n this.id = data.id\r\n };\r\n this.export = () => {\r\n return { id: this.id, state: cloneDeep(state) }\r\n };\r\n this.init = function(line) {\r\n setLine(line);\r\n this.initEvents();\r\n };\r\n this.initEvents = () => {\r\n this.isInited = true;\r\n EventManager.addEvent(\r\n EventManager.events.MOUSE_MOVE,\r\n onMouseMove,\r\n this,\r\n EventManager.priorities.SEGMENT\r\n );\r\n EventManager.addEvent(\r\n EventManager.events.MOUSE_DOWN,\r\n onMouseDown,\r\n this,\r\n EventManager.priorities.SEGMENT\r\n );\r\n EventManager.addEvent(\r\n EventManager.events.RENDER,\r\n this.render,\r\n this,\r\n EventManager.priorities.OVERLAY\r\n );\r\n };\r\n this.deregisterEvents = () => {\r\n EventManager.removeEvent(this);\r\n this.isInited = false;\r\n };\r\n this.reInitEvents = () => {\r\n if (!this.isInited) {\r\n this.initEvents();\r\n }\r\n };\r\n this.removeLineText = function () {\r\n state.originalLineText = '';\r\n lineType = 'edge'; // by default\r\n lineTextColor = COLOR_THEMES[config.activeTheme].primary;\r\n };\r\n this.renderEdgeText = (edgeName) => {\r\n state.originalLineText = edgeName;\r\n lineType = 'edge';\r\n lineTextColor = COLOR_THEMES[config.activeTheme].active;\r\n };\r\n this.renderBacksplashText = (backsplashName, type) => {\r\n //lineText = backsplashName;\r\n state.originalLineText = line.getBacksplashHeight() + sqftConfig.getMeasureUnitPostfix() +\" \" + workspace.intl.formatMessage({id: \"sqft.navigation.submenu.backsplash\"});\r\n lineType = type;\r\n lineTextColor = (type === \"wall\") ? \"#000000\" : COLOR_THEMES[config.activeTheme].primary;\r\n };\r\n this.renderWaterfallText = (name, type) => {\r\n state.originalLineText = name;\r\n lineType = type;\r\n lineTextColor = (type === \"wall\") ? \"#000000\" : COLOR_THEMES[config.activeTheme].primary;\r\n };\r\n this.getMidpoint = function () {\r\n return state.midPoint;\r\n };\r\n this.setMidpointOffset = function (xOffset, yOffset) {\r\n state.midPoint.xOffset = xOffset;\r\n state.midPoint.yOffset = yOffset;\r\n };\r\n this.getLineLength = function () {\r\n var distance = getPointDistance(line.from, line.to);\r\n\r\n return measureDistanceToInches(distance);\r\n };\r\n this.getLineLengthText = function () {\r\n let distance = this.getLineDistanceFull();\r\n\r\n return config.measureUnit === \"Metric\" ? distanceToMillimeters(distance) : distanceToInches(distance);\r\n };\r\n this.getLineDistanceFull = function () {\r\n return getPointDistance(line.from, line.to) + this.getAdditionalLineDistance();\r\n };\r\n this.getLineDistanceFullInPixels = function () {\r\n const lineLengthInPx = getPointDistance(line.calculateRenderPosition(line.from), line.calculateRenderPosition(line.to));\r\n const scale = config.scale;\r\n let additionalLineDistance = this.getAdditionalLineDistance() * scale;\r\n if (additionalLineDistance < 0) {\r\n additionalLineDistance -= this.design.offsetFromLineEnd; // add gray line margin\r\n } else if (additionalLineDistance > 0) {\r\n additionalLineDistance += this.design.offsetFromLineEnd; // add gray line margin\r\n }\r\n\r\n return lineLengthInPx + additionalLineDistance;\r\n };\r\n this.getAdditionalLineDistance = function () {\r\n let additionalDistance = 0;\r\n const prevLine = line.getParent().getPrevLine(line);\r\n if (line.to.angle > 0 || line.to.arcLength > 0) {\r\n additionalDistance -= get45CornerLegDistanceByHypotenuse(line.to.angle || line.to.arcLength);\r\n }\r\n\r\n if (prevLine.to.angle > 0 || prevLine.to.arcLength > 0 ) {\r\n additionalDistance -= get45CornerLegDistanceByHypotenuse(prevLine.to.angle || prevLine.to.arcLength);\r\n }\r\n\r\n return +additionalDistance;\r\n };\r\n\r\n this.render = function(ctx) {\r\n if (state.isEditInputDisplayed) {\r\n return;\r\n }\r\n\r\n let scale = config.scale,\r\n fontSize = getFontsize(),\r\n font = (fontSize).toString() + \"px \" + config.activeFontBold,\r\n lineDirection = line.getLineDirection(),\r\n offset = line.getOffset(),\r\n distance = this.getLineDistanceFullInPixels(),\r\n dstring = this.getLineLengthText(),\r\n midPoint = getMidPoint(line.from, line.to),\r\n orientationValue = line.getOrientation(),\r\n space,\r\n mtext,\r\n medgeText,\r\n xOffset = 0,\r\n yOffset = 0,\r\n lineCornerWidth = 0,\r\n fromPosOnField = getPointField(line.from.x, line.from.y, line),\r\n prevLine;\r\n\r\n state.lineTextResized = _.clone(state.originalLineText);\r\n const parent = line.getParent();\r\n\r\n ctx.beginPath();\r\n ctx.font = font;\r\n\r\n mtext = ctx.measureText(dstring);\r\n medgeText = ctx.measureText(state.lineTextResized);\r\n space = ctx.measureText(' ');\r\n state.textWidth = Math.round(mtext.width * 100) / 100;\r\n\r\n let marginTotal = 0;\r\n\r\n for (let i in lineDirection.cornerMargins) {\r\n marginTotal += lineDirection.cornerMargins[i];\r\n }\r\n\r\n if (medgeText.width + ctx.measureText(dstring).width > distance) {\r\n fontSize = 14;\r\n ctx.font = \"14px \" + config.activeFontBold;\r\n mtext = ctx.measureText(dstring);\r\n medgeText = ctx.measureText(state.lineTextResized);\r\n space = ctx.measureText(' ');\r\n\r\n // Adjust text size based on distance\r\n if (distance < 20 * config.scale + marginTotal * 40) {\r\n state.lineTextResized = '';\r\n medgeText = ctx.measureText(state.lineTextResized);\r\n } else {\r\n if (state.originalLineText && (medgeText.width + ctx.measureText(dstring).width > distance - marginTotal * 40)) {\r\n while (medgeText.width && (medgeText.width + ctx.measureText(dstring).width > distance - marginTotal * 40)) {\r\n state.lineTextResized = state.lineTextResized.slice(0, -1);\r\n medgeText = ctx.measureText(state.lineTextResized);\r\n }\r\n }\r\n }\r\n }\r\n\r\n lineCornerWidth += line.get45CornerLegDistance() / 2 * scale;\r\n prevLine = parent.getPrevLine(line);\r\n lineCornerWidth -= prevLine.get45CornerLegDistance() / 2 * scale;\r\n\r\n midPoint.y = midPoint.y * scale + offset.y;\r\n midPoint.x = midPoint.x * scale + offset.x;\r\n ctx.textAlign = \"center\";\r\n //midPoint.y += fontSize / 2;\r\n // ctx.fillStyle = \"rgba(255,255,255,0)\";\r\n // ctx.fillRect(midPoint.x - tLen/2 - 4, midPoint.y - (fontSize), tLen + 4, fontSize + 4);\r\n ctx.beginPath();\r\n ctx.fillStyle = state.isHovered\r\n ? state.hoveredColor\r\n : (lineType === \"wall\") ? \"#000000\" : COLOR_THEMES[config.activeTheme].primary;\r\n\r\n let marginFrom = 0,\r\n marginTo = 0;\r\n\r\n switch (lineDirection.orientation) {\r\n case \"horizontal\": {\r\n if (lineDirection.newDirection === \"east\") {\r\n midPoint.x -= lineCornerWidth;\r\n marginFrom = (lineDirection.cornerMargins.fromLeft) ? marginFrom + 9 : marginFrom;\r\n marginTo = (lineDirection.cornerMargins.fromRight) ? marginTo + 9 : marginTo;\r\n } else if (lineDirection.newDirection === \"west\") {\r\n midPoint.x += lineCornerWidth;\r\n marginFrom = (lineDirection.cornerMargins.fromRight) ? marginFrom + 9 : marginFrom;\r\n marginTo = (lineDirection.cornerMargins.fromLeft) ? marginTo + 9 : marginTo;\r\n }\r\n yOffset = (lineDirection.newDirection === \"west\" ? 33 : -20) + (state.midPoint.yOffset * scale);\r\n if (state.lineTextResized) {\r\n ctx.fillStyle = lineTextColor;\r\n ctx.wrapText(state.lineTextResized, midPoint.x - mtext.width / 2 - marginFrom + marginTo, midPoint.y + yOffset, medgeText, fontSize);\r\n ctx.fillStyle = getCtxColor(ctx, lineType);\r\n state.midPoint.x = midPoint.x + medgeText.width / 2 + space.width - marginFrom + marginTo;\r\n state.midPoint.y = midPoint.y + yOffset;\r\n } else {\r\n state.midPoint.x = midPoint.x - marginFrom + marginTo;\r\n state.midPoint.y = midPoint.y + yOffset;\r\n }\r\n ctx.wrapText(dstring, state.midPoint.x, state.midPoint.y, mtext, fontSize);\r\n break;\r\n }\r\n case \"vertical\": {\r\n if (lineDirection.newDirection === \"south\") {\r\n marginFrom = (lineDirection.cornerMargins.fromTop) ? marginFrom + 9 : marginFrom;\r\n marginTo = (lineDirection.cornerMargins.fromBottom) ? marginTo + 9 : marginTo;\r\n midPoint.y -= lineCornerWidth;\r\n } else if (lineDirection.newDirection === \"north\") {\r\n marginTo = (lineDirection.cornerMargins.fromTop) ? marginTo + 9 : marginTo;\r\n marginFrom = (lineDirection.cornerMargins.fromBottom) ? marginFrom + 9 : marginFrom;\r\n midPoint.y += lineCornerWidth;\r\n }\r\n xOffset += state.midPoint.xOffset * scale;\r\n state.midPoint.x = midPoint.x + xOffset;\r\n state.midPoint.y = midPoint.y + yOffset\r\n ? lineDirection.newDirection === \"south\"\r\n ? midPoint.y + medgeText.width / 2 + space.width\r\n : midPoint.y - medgeText.width / 2 + space.width\r\n : midPoint.y;\r\n ctx.save();\r\n ctx.translate(\r\n lineDirection.newDirection === \"south\" ? midPoint.x + xOffset : midPoint.x + xOffset,\r\n lineDirection.newDirection === \"south\" ? midPoint.y - 5 : midPoint.y - 10\r\n );\r\n ctx.rotate(lineDirection.newDirection === \"south\" ? Math.PI / 2 : -Math.PI / 2);\r\n if (state.lineTextResized) {\r\n ctx.fillStyle = lineTextColor;\r\n ctx.wrapText(state.lineTextResized, 0 - mtext.width / 2 + marginFrom - marginTo, -fontSize, medgeText, fontSize);\r\n ctx.fillStyle = getCtxColor(ctx, lineType);\r\n ctx.wrapText(dstring, 0 + medgeText.width / 2 + space.width + marginFrom - marginTo, -fontSize - yOffset, mtext, fontSize);\r\n } else {\r\n ctx.wrapText(dstring, 0 + marginFrom - marginTo, -fontSize, mtext, fontSize);\r\n }\r\n break;\r\n }\r\n case \"NORTHWEST\":\r\n case \"NORTHEAST\":\r\n case \"SOUTHWEST\":\r\n case \"SOUTHEAST\": {\r\n ctx.save();\r\n if (state.lineTextResized) {\r\n dstring = state.lineTextResized + ' ' + dstring;\r\n }\r\n //this.renderFrameBorder(ctx, dstring, fontSize, midPoint, orientationValue);\r\n const [parallelPoint1] = getParallelPoints(fromPosOnField, midPoint, -30);\r\n state.midPoint.x = parallelPoint1.x;\r\n state.midPoint.y = parallelPoint1.y;\r\n this.renderText(ctx, dstring, state.midPoint, fontSize, orientationValue);\r\n break;\r\n }\r\n default:\r\n break;\r\n }\r\n\r\n ctx.restore();\r\n\r\n if (Config.isDevMode()) {\r\n this.renderHoveredArea(ctx);\r\n }\r\n };\r\n\r\n this.renderHoveredArea = (ctx) => {\r\n //console.log(\"state.midPoint.\", state.midPoint);\r\n const hoveredArea = this.getHoveredArea();\r\n ctx.beginPath();\r\n ctx.moveTo(hoveredArea[0][0], hoveredArea[0][1]);\r\n ctx.lineTo(hoveredArea[1][0], hoveredArea[1][1]);\r\n ctx.lineTo(hoveredArea[2][0], hoveredArea[2][1]);\r\n ctx.lineTo(hoveredArea[3][0], hoveredArea[3][1]);\r\n ctx.lineTo(hoveredArea[0][0], hoveredArea[0][1]);\r\n ctx.lineWidth = 2;\r\n ctx.strokeStyle = 'rgba(0, 0, 0, 0.5)';\r\n ctx.stroke();\r\n ctx.closePath();\r\n }\r\n\r\n this.getFrameBorderPosition = (ctx, pos, value, fontHeight, orientationValue) => {\r\n const mText = ctx.measureText(value);\r\n let position = {\r\n x: pos.x,\r\n y: pos.y\r\n };\r\n\r\n switch (orientationValue) {\r\n case orientation.HORIZONTAL: {\r\n break;\r\n }\r\n case orientation.VERTICAL: {\r\n break;\r\n }\r\n case orientation.NORTHWEST: {\r\n position = {\r\n x: pos.x - mText.width,\r\n y: pos.y - this.design.offsetFromLineEnd\r\n };\r\n break;\r\n }\r\n case orientation.NORTHEAST: {\r\n position = {\r\n x: pos.x - mText.width,\r\n y: pos.y - this.design.offsetFromLineEnd\r\n };\r\n break;\r\n }\r\n case orientation.SOUTHWEST: {\r\n\r\n break;\r\n }\r\n case orientation.SOUTHEAST: {\r\n\r\n break;\r\n }\r\n default:\r\n break;\r\n }\r\n return position\r\n }\r\n\r\n this.renderFrameBorder = (ctx, value, fontHeight, pos, orientationValue) => {\r\n ctx.beginPath();\r\n const mText = ctx.measureText(value);\r\n ctx.strokeStyle = COLOR_THEMES[sqftConfig.activeTheme].primary;\r\n ctx.lineWidth = 2;\r\n ctx.fillStyle = COLOR.white\r\n\r\n const angle = getAngleBetweenTwoPoints(line.from, line.to);\r\n let position = this.getFrameBorderPosition(ctx, pos, value, fontHeight, orientationValue);\r\n\r\n ctx.save();\r\n ctx.translate(\r\n position.x,\r\n position.y,\r\n );\r\n ctx.rotate(angle * (Math.PI / 180));\r\n RenderFigures.roundedRect(ctx,\r\n 0, // absolute pos: //pos.x - mText.width / 1.25 / sqftConfig.scale * sqftConfig.defaultScale,\r\n 0, // absolute pos: //pos.y - fontHeight,\r\n mText.width * 1.5 + sqftConfig.scale / sqftConfig.defaultScale,\r\n fontHeight + 6,\r\n 5,\r\n true,\r\n true\r\n );\r\n ctx.restore();\r\n ctx.closePath();\r\n }\r\n\r\n this.renderText = (ctx, value, pos, fontHeight, orientationValue) => {\r\n const //scale = sqftConfig.scale,\r\n font = fontHeight + \"px \" + config.activeFontBold,\r\n mText = ctx.measureText(value);\r\n\r\n //let position = this.getTextPosition(ctx, pos, value, fontHeight, orientationValue);\r\n\r\n ctx.beginPath();\r\n ctx.font = font;\r\n ctx.textAlign = \"center\";\r\n ctx.fillStyle = getCtxColor(ctx, lineType);\r\n\r\n let angle = getAngleBetweenTwoPoints(line.from, line.to);\r\n //this will help to rotate upside down text\r\n if ([orientation.NORTHWEST, orientation.SOUTHWEST].indexOf(orientationValue) !== -1) {\r\n angle += 180;\r\n }\r\n ctx.save();\r\n //RenderFigures.renderCircle(pos, 5,1, '#284da8');\r\n ctx.translate(\r\n pos.x,\r\n pos.y\r\n );\r\n ctx.rotate(angle * (Math.PI / 180));\r\n //ctx.wrapText(value, fontHeight / 2, mText.width / ( 2 * scale), mText, fontHeight);\r\n ctx.wrapText(value, 0, 0, mText, fontHeight);\r\n ctx.restore();\r\n ctx.closePath();\r\n }\r\n}\r\n","import { v4 as uuidv4 } from 'uuid';\r\nimport {\r\n distanceToInches,\r\n distanceToMillimeters, getFontsize, getFontsizeSmall, getIntersectCordsBetweenLines,\r\n getMidPoint,\r\n getPointDistance, isDisabledInPopupWithParents,\r\n measureDistanceToInches,\r\n mmToInches,\r\n orientation\r\n} from \"../../../../../helpers/sqftHelper\";\r\nimport point from \"../point\";\r\nimport shapeLine from \"../line\";\r\nimport {getMaxResizeWidth} from \"./resizeLine\";\r\nimport COLOR_THEMES from \"../../../store/colorThemes\";\r\nimport Config from \"../../../store/sqftConfig\";\r\nimport configGlobal from \"../../../store/sqftConfig\";\r\nimport EventManager from \"../../../store/sqftEventManager\";\r\nimport {pnpolyArray} from \"../../../../../lib/pnpoly\";\r\nimport workspace from \"../../workspace\";\r\nimport $ from \"jquery\";\r\nimport store from \"../../../../../../../store\";\r\nimport {updateSQFTCalculations} from \"../../../../../../../actions/sqftFunctions\";\r\nimport sqftEventManager from \"../../../store/sqftEventManager\";\r\nimport {isDisabledInPopupShouldBeHidden, MEASURE_UNITS} from \"../../../../../constants\";\r\nimport SqftStore from \"../../../store/sqftStore\";\r\nimport {renderResetSeamPopup, shouldResetSlabModePopupOnPointMoveBeDisplayed} from \"../../../canvasPopup/resetSeam\";\r\nimport {crossProduct2D} from \"../../../../../helpers/coordinatesHelper\";\r\nimport {getBumpoutFeature} from \"../../../../../helpers/featureHelper\";\r\nimport {createAdjustableInput} from \"../../../../../helpers/uiHelper\";\r\nimport sqftConfig from \"../../../store/sqftConfig\";\r\n\r\nexport default function() {\r\n var self = this,\r\n state = {\r\n mousePos: {},\r\n mouseDown: false,\r\n mouseDownPosition: null,\r\n isHoveringRect: false,\r\n isHoveringPoint: false,\r\n hoveredPoint: null,\r\n isHoveredOverText: false,\r\n hoveredText: {\r\n area:[],\r\n midPoint: {x: 0, y: 0},\r\n pointsDistance: 0,\r\n points: {point1: null, point2: null},\r\n orientation: 0\r\n },\r\n midPoint: {\r\n x: 0,\r\n y: 0,\r\n }\r\n },\r\n config = {\r\n initialSize: 30,\r\n minBumpoutSize: 1,\r\n dragPointMargin: 28,\r\n rulerMargin: 25,\r\n movePointOffset: 100,\r\n lineTextColor: COLOR_THEMES[Config.activeTheme].primary\r\n },\r\n bumpoutPoints = {\r\n point1: null,\r\n point2: null,\r\n point3: null,\r\n point4: null,\r\n dragPoint: null\r\n },\r\n bumpoutTextParameters = {\r\n lengthFrom1 : {\r\n area:[],\r\n midPoint: {x: 0, y: 0},\r\n pointsDistance: 0,\r\n points: {point1: null, point2: null},\r\n orientation: 0\r\n },\r\n length14 : {\r\n area:[],\r\n midPoint: {x: 0, y: 0},\r\n pointsDistance: 0,\r\n points: {point1: null, point2: null},\r\n orientation: 0\r\n },\r\n length34 : {\r\n area:[],\r\n midPoint: {x: 0, y: 0},\r\n pointsDistance: 0,\r\n points: {point1: null, point2: null},\r\n orientation: 0\r\n },\r\n length4to : {\r\n area:[],\r\n midPoint: {x: 0, y: 0},\r\n pointsDistance: 0,\r\n points: {point1: null, point2: null},\r\n orientation: 0\r\n },\r\n },\r\n deleteFillStyle = \"rgba(253,2,33, 0.5)\",\r\n line = null,\r\n bumpoutLines = null;\r\n\r\n this.id = uuidv4(); // sqftId (this is not attached resource id)\r\n this.featureId = null; // will be assigned on init\r\n\r\n //private property setters\r\n function setLine(value) { line = value; }\r\n function setBumpoutPoints(value) { bumpoutPoints = value; }\r\n\r\n //private functions\r\n function preparePoints() {\r\n var midPoint = getMidPoint(line.from, line.to),\r\n point1,\r\n point2,\r\n point3,\r\n point4,\r\n dragPoint,\r\n dragPointMargin,\r\n flipPoints = false;\r\n\r\n const lineDirection = line.getLineDirection();\r\n\r\n switch (lineDirection.orientation) {\r\n case \"horizontal\": {\r\n flipPoints = lineDirection.newDirection === \"west\";\r\n dragPointMargin = flipPoints ? config.dragPointMargin : -config.dragPointMargin;\r\n point1 = new point(midPoint.x - config.initialSize / 2, midPoint.y, undefined, undefined, false);\r\n point2 = new point(midPoint.x - config.initialSize / 2, midPoint.y, undefined, undefined, false);\r\n point3 = new point(midPoint.x + config.initialSize / 2, midPoint.y, undefined, undefined, false);\r\n point4 = new point(midPoint.x + config.initialSize / 2, midPoint.y, undefined, undefined, false);\r\n dragPoint = new point(midPoint.x, midPoint.y + dragPointMargin, undefined, undefined, false);\r\n\r\n break;\r\n }\r\n case \"vertical\": {\r\n flipPoints = lineDirection.newDirection === \"north\";\r\n dragPointMargin = flipPoints ? -config.dragPointMargin : config.dragPointMargin;\r\n point1 = new point(midPoint.x, midPoint.y - config.initialSize / 2, undefined, undefined, false);\r\n point2 = new point(midPoint.x, midPoint.y - config.initialSize / 2, undefined, undefined, false);\r\n point3 = new point(midPoint.x, midPoint.y + config.initialSize / 2, undefined, undefined, false);\r\n point4 = new point(midPoint.x, midPoint.y + config.initialSize / 2, undefined, undefined, false);\r\n dragPoint = new point(midPoint.x + dragPointMargin, midPoint.y, undefined, undefined, false);\r\n break;\r\n }\r\n case \"NORTHWEST\":\r\n case \"NORTHEAST\":\r\n case \"SOUTHWEST\":\r\n case \"SOUTHEAST\": {\r\n //todo rotation\r\n point1 = new point(midPoint.x, midPoint.y - bumpoutPoints.initialSize / 2, undefined, undefined, false);\r\n point4 = new point(midPoint.x, midPoint.y + bumpoutPoints.initialSize / 2, undefined, undefined, false);\r\n dragPoint = new point(midPoint.x, midPoint.y, undefined, undefined, false);\r\n\r\n break;\r\n }\r\n default:\r\n break;\r\n }\r\n\r\n setBumpoutPoints ({\r\n point1: flipPoints ? point4 : point1,\r\n point2: flipPoints ? point3 : point2,\r\n point3: flipPoints ? point2 : point3,\r\n point4: flipPoints ? point1 : point4,\r\n dragPoint: dragPoint\r\n });\r\n }\r\n\r\n function movePointInOrStop(point1, point2, axis, diff, biggestPoint, smallestPoint, stopPoint) {\r\n // stop on other bumpout move point\r\n if (point1[axis] > stopPoint[axis]) {\r\n smallestPoint = stopPoint[axis] + config.minBumpoutSize;\r\n } else {\r\n biggestPoint = stopPoint[axis] - config.minBumpoutSize;\r\n }\r\n\r\n if (point1[axis] - diff >= biggestPoint) {\r\n point1[axis] = point2[axis] = biggestPoint;\r\n } else if (point1[axis] - diff <= smallestPoint) {\r\n point1[axis] = point2[axis] = smallestPoint;\r\n } else {\r\n point1[axis] -= diff;\r\n point2[axis] -= diff;\r\n }\r\n }\r\n\r\n function movePointOutOrStop(point1, point2, axis, diff, biggestPoint, smallestPoint) {\r\n let direction = line.getLineDirection().newDirection;\r\n let dragPointMargin;\r\n let lengthMidPoint;\r\n\r\n if (point1[axis] - diff > smallestPoint && (direction === \"east\" || direction === \"north\")) {\r\n dragPointMargin = -config.dragPointMargin;\r\n point1[axis] = point2[axis] = smallestPoint;\r\n bumpoutPoints.dragPoint[axis] = smallestPoint + dragPointMargin\r\n } else if (point1[axis] - diff < biggestPoint && (direction === \"west\" || direction === \"south\")) {\r\n dragPointMargin = +config.dragPointMargin;\r\n point1[axis] = point2[axis] = biggestPoint;\r\n bumpoutPoints.dragPoint[axis] = smallestPoint + dragPointMargin\r\n } else {\r\n point1[axis] -= diff;\r\n point2[axis] -= diff;\r\n bumpoutPoints.dragPoint[axis] -= diff;\r\n lengthMidPoint = line.overlay.getMidpoint();\r\n line.overlay.setMidpointOffset(lengthMidPoint.xOffset - diff, lengthMidPoint.yOffset - diff);\r\n }\r\n }\r\n\r\n function move23Point(point1, point2, axis, diff) {\r\n // Check for intersection with all lines in the parent shape\r\n point1[axis] -= diff;\r\n point2[axis] -= diff;\r\n let intersects = line.getParent().getLines().some(parentLine => {\r\n // Don't check against itself\r\n if (parentLine === line) return false;\r\n\r\n // Check if bumpoutPoints {from: point1, to: point2} line would intersect this parent line\r\n return getIntersectCordsBetweenLines(\r\n { x: parentLine.from.x, y: parentLine.from.y },\r\n { x: parentLine.to.x, y: parentLine.to.y },\r\n { x: bumpoutPoints.point1.x, y: bumpoutPoints.point1.y },\r\n { x: bumpoutPoints.point2.x, y: bumpoutPoints.point2.y }\r\n );\r\n });\r\n\r\n // Only move points if no intersection detected\r\n if (!intersects) {\r\n let lengthMidPoint = line.overlay.getMidpoint();\r\n bumpoutPoints.dragPoint[axis] -= diff;\r\n line.overlay.setMidpointOffset(lengthMidPoint.xOffset - diff, lengthMidPoint.yOffset - diff);\r\n } else {\r\n // rollback points if intersection was found\r\n point1[axis] += diff;\r\n point2[axis] += diff;\r\n }\r\n }\r\n\r\n function getMousePosPointDiff(diff, point, mousePos, sameOrientation = false) {\r\n if (configGlobal.measureUnit === \"Metric\") {\r\n var offset = 0;\r\n switch(line.getOrientation()) {\r\n case orientation.HORIZONTAL:\r\n offset = sameOrientation ? mousePos.x - point.getPointField().x : mousePos.y - point.getPointField().y;\r\n break;\r\n case orientation.VERTICAL:\r\n offset = sameOrientation? mousePos.y - point.getPointField().y : mousePos.x - point.getPointField().x;\r\n break;\r\n case orientation.NORTHWEST:\r\n case orientation.SOUTHEAST:\r\n break;\r\n case orientation.NORTHEAST:\r\n case orientation.SOUTHWEST:\r\n break;\r\n }\r\n\r\n if (-config.movePointOffset < offset && offset < config.movePointOffset) {\r\n diff = diff / configGlobal.millimetersMultiplier;\r\n }\r\n }\r\n\r\n return diff\r\n }\r\n\r\n //public property getters\r\n\r\n this.getParent = () => { return line; };\r\n this.getGrandParent = () => {\r\n const parent = this.getParent();\r\n if (parent && parent.getParent) {\r\n return parent.getParent();\r\n }\r\n return null\r\n };\r\n this.getBumpoutPoints = function() { return bumpoutPoints; };\r\n this.getBumpoutLines = () => {\r\n if (bumpoutLines) {\r\n return bumpoutLines\r\n }\r\n return this.createBumpoutLines();\r\n };\r\n this.createBumpoutLines = () => {\r\n const points = this.getBumpoutPoints();\r\n bumpoutLines = [\r\n new shapeLine(line.from, points.point1, line.getParent()),\r\n new shapeLine(points.point1, points.point2, line.getParent()),\r\n new shapeLine(points.point2, points.point3, line.getParent()),\r\n new shapeLine(points.point3, points.point4, line.getParent()),\r\n new shapeLine(points.point4, line.to, line.getParent()),\r\n ];\r\n\r\n return bumpoutLines\r\n };\r\n this.getBumpoutPointCords = function() {\r\n let bumpoutPointsCords = [];\r\n for (const bumpoutPointsKey in bumpoutPoints) {\r\n if (bumpoutPointsKey !== 'dragPoint') {\r\n bumpoutPointsCords.push(bumpoutPoints[bumpoutPointsKey]);\r\n }\r\n }\r\n return bumpoutPointsCords\r\n };\r\n this.getBumpoutTextParameter = function() { return bumpoutTextParameters; };\r\n\r\n this.destroy = function(protect) {\r\n if (!protect) {\r\n EventManager.removeEvent(self);\r\n }\r\n const reduxState = store.getState();\r\n const updateCalculations = reduxState.sqftState.updateCalculations;\r\n store.dispatch(updateSQFTCalculations(updateCalculations + 1));\r\n };\r\n\r\n this.init = (line, importPoints = null, featureId = null) => {\r\n setLine(line);\r\n if (!importPoints) {\r\n preparePoints();\r\n }\r\n this.featureId = featureId\r\n if (!featureId) {\r\n const bumpoutFeature = getBumpoutFeature();\r\n const isFeatureExist = Array.isArray(bumpoutFeature)\r\n && bumpoutFeature.length\r\n && bumpoutFeature[0].part\r\n && bumpoutFeature[0].part.dbFeature\r\n\r\n this.featureId = isFeatureExist ? bumpoutFeature[0].part.dbFeature.id : null;\r\n }\r\n this.initEvents();\r\n\r\n //points\r\n bumpoutPoints.point1.init(self);\r\n bumpoutPoints.point1.layout = 'white-circle';\r\n\r\n bumpoutPoints.point2.init(self);\r\n bumpoutPoints.point2.layout = 'blank';\r\n\r\n bumpoutPoints.point3.init(self);\r\n bumpoutPoints.point3.layout = 'blank';\r\n\r\n bumpoutPoints.point4.init(self);\r\n bumpoutPoints.point4.layout = 'white-circle';\r\n\r\n bumpoutPoints.dragPoint.init(self);\r\n bumpoutPoints.dragPoint.layout = 'arrow-circle';\r\n\r\n // set line overlay length offset\r\n if (!importPoints) {\r\n var xOffset = 0;\r\n var yOffset = 0;\r\n var lineDirection = line.getLineDirection();\r\n switch (lineDirection.orientation) {\r\n case \"horizontal\": {\r\n yOffset = (lineDirection.newDirection === \"west\" ? config.dragPointMargin - 15 : -config.dragPointMargin + 15);\r\n break;\r\n }\r\n case \"vertical\": {\r\n xOffset = (lineDirection.newDirection === \"south\" ? config.dragPointMargin - 15 : -config.dragPointMargin + 15);\r\n break;\r\n }\r\n // todo rotation\r\n case \"NORTHWEST\": { break;}\r\n case \"NORTHEAST\": { break;}\r\n case \"SOUTHWEST\": { break;}\r\n case \"SOUTHEAST\": { break;}\r\n default:\r\n break;\r\n }\r\n line.overlay.setMidpointOffset(xOffset, yOffset)\r\n }\r\n\r\n // todo fix bumpout rotation and remove this\r\n $('.button--angle').addClass('button--disabled');\r\n /////////////////////////////////////////\r\n };\r\n this.initEvents = () => {\r\n EventManager.addEvent(\r\n EventManager.events.RENDER,\r\n self.render,\r\n self,\r\n EventManager.priorities.SEGMENT\r\n );\r\n //todo priority\r\n EventManager.addEvent(\r\n EventManager.events.MOUSE_MOVE,\r\n onMouseMove,\r\n self,\r\n EventManager.priorities.SEGMENT\r\n );\r\n EventManager.addEvent(\r\n EventManager.events.MOUSE_DOWN,\r\n onMouseDown,\r\n self,\r\n EventManager.priorities.SEGMENT\r\n );\r\n EventManager.addEvent(\r\n EventManager.events.MOUSE_UP,\r\n onMouseUp,\r\n self,\r\n EventManager.priorities.SEGMENT\r\n );\r\n EventManager.addEvent(\r\n EventManager.events.MOUSE_LEAVE,\r\n onMouseLeave,\r\n self,\r\n EventManager.priorities.OVERALL\r\n );\r\n }\r\n this.deregisterEvents = () => {\r\n sqftEventManager.removeEvent(this);\r\n this.isHidden = true;\r\n for (let i = 0; i < bumpoutPoints.length; i++) {\r\n bumpoutPoints[i].deregisterEvents();\r\n }\r\n };\r\n this.reInitEvents = () => {\r\n this.initEvents();\r\n this.isHidden = false;\r\n for (let i = 0; i < bumpoutPoints.length; i++) {\r\n bumpoutPoints[i].reInitEvents();\r\n }\r\n };\r\n this.export = function() {\r\n return {\r\n bumpoutPoints : {\r\n point1: bumpoutPoints.point1.export(),\r\n point2: bumpoutPoints.point2.export(),\r\n point3: bumpoutPoints.point3.export(),\r\n point4: bumpoutPoints.point4.export(),\r\n dragPoint: bumpoutPoints.dragPoint.export()\r\n },\r\n overlay: {\r\n midpoint: line.overlay.getMidpoint(),\r\n id: this.id\r\n }\r\n }\r\n };\r\n this.import = (line, bumpoutData) => {\r\n for (let bumpoutPoint in bumpoutData.bumpoutPoints) {\r\n bumpoutPoints[bumpoutPoint] = new point();\r\n bumpoutPoints[bumpoutPoint].import(bumpoutData.bumpoutPoints[bumpoutPoint])\r\n }\r\n this.init(line, bumpoutData.bumpoutPoints, bumpoutData.overlay.id);\r\n };\r\n this.getOffset = function() {\r\n return line.getOffset();\r\n };\r\n this.getBumpoutLength = function () {\r\n var bumpoutDistance = getPointDistance(bumpoutPoints.point1, bumpoutPoints.point2);\r\n\r\n return measureDistanceToInches(bumpoutDistance);\r\n };\r\n this.getBumpoutTotalHeight = function () {\r\n var bumpoutDistance = getPointDistance(bumpoutPoints.point1, bumpoutPoints.point2);\r\n\r\n return measureDistanceToInches(bumpoutDistance * 2);\r\n };\r\n this.getBumpoutTotalArea = () => {\r\n if (this.bumpoutInOrOut() === 'in') {\r\n return {\r\n inches: 0,\r\n millimeters: 0\r\n }\r\n }\r\n\r\n var lineLengthInches = line.getLineLength(),\r\n lineLengthMm = line.getLineLengthMm(),\r\n\r\n bumpoutLength = this.getBumpoutLength(),\r\n bumpoutLengthInches = line.addDecimalToLength(bumpoutLength),\r\n bumpoutLengthMM = bumpoutLength.millimeters;\r\n\r\n return {\r\n inches : lineLengthInches * bumpoutLengthInches,\r\n millimeters : lineLengthMm * bumpoutLengthMM\r\n }\r\n };\r\n\r\n this.isHoveringRect = () => { return state.isHoveringRect };\r\n\r\n this.moveBumpout = function(xDiff = 0, yDiff = 0) {\r\n for (let bumpoutPoint in bumpoutPoints ) {\r\n bumpoutPoints[bumpoutPoint].x -= xDiff;\r\n bumpoutPoints[bumpoutPoint].y -= yDiff;\r\n }\r\n };\r\n\r\n this.moveLineWithMouse = function(mousePos) {\r\n let scale = workspace.getScale();\r\n let xDiff = (state.mouseDownPosition.x - mousePos.x) / scale;\r\n let yDiff = (state.mouseDownPosition.y - mousePos.y) / scale;\r\n\r\n yDiff = getMousePosPointDiff(yDiff, bumpoutPoints.dragPoint, mousePos);\r\n xDiff = getMousePosPointDiff(xDiff, bumpoutPoints.dragPoint, mousePos);\r\n\r\n this.moveLine(xDiff, yDiff);\r\n\r\n state.mouseDownPosition.y = mousePos.y;\r\n state.mouseDownPosition.x = mousePos.x;\r\n };\r\n\r\n this.isBumpoutPointMoving = () => { return state.mouseDown};\r\n this.moveLine = function(xDiff, yDiff) {\r\n if (SqftStore.isRegularMode() && shouldResetSlabModePopupOnPointMoveBeDisplayed(this.getGrandParent())) {\r\n renderResetSeamPopup(this.getGrandParent())\r\n }\r\n\r\n var o = line.getOrientation();\r\n\r\n if (o === orientation.VERTICAL) {\r\n move23Point(bumpoutPoints.point2, bumpoutPoints.point3, 'x', xDiff);\r\n void movePointOutOrStop\r\n //movePointOutOrStop(bumpoutPoints.point2, bumpoutPoints.point3, 'x', xDiff, line.getBiggestXPoint().x, line.getSmallestXPoint().x, false);\r\n } else if (o === orientation.HORIZONTAL) {\r\n // let distance = line.getSmallestYPoint().y;\r\n // const closetParallelLineAndPoint = findClosestIntersectingPointAndLine(line, line.getParent().getLines());\r\n // if (closetParallelLineAndPoint) {\r\n // const midPoint = getMidPoint(line.from, line.to);\r\n // distance = getPointDistance(midPoint, closetParallelLineAndPoint.point);\r\n // }\r\n // movePointOutOrStop(bumpoutPoints.point2, bumpoutPoints.point3, 'y', yDiff, distance, distance, false);\r\n\r\n move23Point(bumpoutPoints.point2, bumpoutPoints.point3, 'y', yDiff);\r\n } else {\r\n //todo\r\n // const nextLine = parent.getNextLine(self);\r\n // const prevLine = parent.getPrevLine(self);\r\n // moveDiagonalLine(self, nextLine, prevLine, state.movePointDistance, yDiff, o);\r\n }\r\n\r\n const state = store.getState();\r\n const updateCalculations = state.sqftState.updateCalculations;\r\n\r\n store.dispatch(updateSQFTCalculations(updateCalculations + 1));\r\n };\r\n\r\n this.movePointWithMouse = function(mousePos, point1, point2, stopPoint) {\r\n var scale = workspace.getScale();\r\n var xDiff = (state.mouseDownPosition.x - mousePos.x) / scale;\r\n var yDiff = (state.mouseDownPosition.y - mousePos.y) / scale;\r\n\r\n yDiff = getMousePosPointDiff(yDiff, point1, mousePos, true);\r\n xDiff = getMousePosPointDiff(xDiff, point1, mousePos, true);\r\n\r\n this.movePoint(xDiff, yDiff, point1, point2, stopPoint);\r\n\r\n state.mouseDownPosition.y = mousePos.y;\r\n state.mouseDownPosition.x = mousePos.x;\r\n };\r\n\r\n this.resizeBumpoutPart = function(value, hoveredText) {\r\n let yDiff = 0,\r\n xDiff = 0,\r\n pointDistance = getPointDistance(hoveredText.points.point1, hoveredText.points.point2),\r\n lineDirection = line.getLineDirection();\r\n\r\n switch(line.getOrientation()) {\r\n case orientation.HORIZONTAL:\r\n\r\n switch (hoveredText.part) {\r\n case \"lengthFrom1\":\r\n xDiff = lineDirection.newDirection === \"west\" ? value - pointDistance: -value + pointDistance;\r\n this.movePoint(xDiff, yDiff, bumpoutPoints.point1, bumpoutPoints.point2, bumpoutPoints.point4);\r\n break;\r\n case \"length4to\":\r\n xDiff = lineDirection.newDirection === \"west\" ? -value + pointDistance : value - pointDistance;\r\n this.movePoint(xDiff, yDiff, bumpoutPoints.point3, bumpoutPoints.point4, bumpoutPoints.point1);\r\n break;\r\n case \"length14\":\r\n xDiff = lineDirection.newDirection === \"west\" ? -value + pointDistance: value - pointDistance;\r\n this.movePoint(xDiff / 2, yDiff, bumpoutPoints.point1, bumpoutPoints.point2, bumpoutPoints.point4);\r\n\r\n xDiff = lineDirection.newDirection === \"west\" ? value - pointDistance: -value + pointDistance;\r\n this.movePoint(xDiff / 2, yDiff, bumpoutPoints.point3, bumpoutPoints.point4, bumpoutPoints.point1);\r\n\r\n break;\r\n case \"length34\":\r\n pointDistance = this.bumpoutInOrOut() === \"in\" ? -pointDistance : pointDistance;\r\n yDiff = lineDirection.newDirection === \"west\" ? -value + pointDistance: value - pointDistance;\r\n this.moveLine(xDiff, yDiff);\r\n break;\r\n }\r\n break;\r\n case orientation.VERTICAL:\r\n switch (hoveredText.part) {\r\n case \"lengthFrom1\":\r\n yDiff = lineDirection.newDirection === \"south\" ? -value + pointDistance: value - pointDistance;\r\n this.movePoint(xDiff, yDiff, bumpoutPoints.point1, bumpoutPoints.point2, bumpoutPoints.point4);\r\n break;\r\n case \"length4to\":\r\n yDiff = lineDirection.newDirection === \"south\" ? value - pointDistance : -value + pointDistance;\r\n this.movePoint(xDiff, yDiff, bumpoutPoints.point3, bumpoutPoints.point4, bumpoutPoints.point1);\r\n break;\r\n case \"length14\":\r\n yDiff = lineDirection.newDirection === \"south\" ? -value + pointDistance: value - pointDistance;\r\n this.movePoint(xDiff, yDiff / 2, bumpoutPoints.point3, bumpoutPoints.point4, bumpoutPoints.point1);\r\n\r\n yDiff = lineDirection.newDirection === \"south\" ? value - pointDistance : -value + pointDistance;\r\n this.movePoint(xDiff, yDiff / 2, bumpoutPoints.point1, bumpoutPoints.point2, bumpoutPoints.point4);\r\n break;\r\n case \"length34\":\r\n pointDistance = this.bumpoutInOrOut() === \"in\" ? -pointDistance : pointDistance;\r\n xDiff = lineDirection.newDirection === \"south\" ? -value + pointDistance: value - pointDistance;\r\n this.moveLine(xDiff, yDiff);\r\n break;\r\n }\r\n break;\r\n case orientation.NORTHWEST:\r\n case orientation.SOUTHEAST:\r\n break;\r\n case orientation.NORTHEAST:\r\n case orientation.SOUTHWEST:\r\n break;\r\n }\r\n };\r\n\r\n this.movePoint = function(xDiff, yDiff, point1, point2, stopPoint) {\r\n if (SqftStore.isRegularMode() && shouldResetSlabModePopupOnPointMoveBeDisplayed(this.getGrandParent())) {\r\n renderResetSeamPopup(this.getGrandParent())\r\n }\r\n let o = line.getOrientation(),\r\n midPoint,\r\n dragPointMargin,\r\n lineDirection = line.getLineDirection(),\r\n toCornerLength = line.to.getArcLength() || line.get45CornerLegDistance(),\r\n prevLine = line.getParent().getPrevLine(line),\r\n fromCornerLength = prevLine.to.getArcLength() || prevLine.get45CornerLegDistance(),\r\n toCornerMargin = 0,\r\n fromCornerMargin = 0;\r\n\r\n if (o === orientation.VERTICAL) {\r\n midPoint = getMidPoint(bumpoutPoints.point2, bumpoutPoints.point3);\r\n dragPointMargin = lineDirection.newDirection === \"north\" ? -config.dragPointMargin : +config.dragPointMargin;\r\n bumpoutPoints.dragPoint.x = midPoint.x + dragPointMargin;\r\n bumpoutPoints.dragPoint.y = midPoint.y;\r\n toCornerMargin = lineDirection.newDirection === \"north\" ? -fromCornerLength : -toCornerLength;\r\n fromCornerMargin = lineDirection.newDirection === \"north\" ? +toCornerLength : +fromCornerLength;\r\n\r\n // stop point on overline move\r\n movePointInOrStop(\r\n point1, point2, 'y', yDiff,\r\n line.getBiggestYPoint().y + toCornerMargin,\r\n line.getSmallestYPoint().y + fromCornerMargin,\r\n stopPoint\r\n );\r\n } else if (o === orientation.HORIZONTAL) {\r\n midPoint = getMidPoint(bumpoutPoints.point2, bumpoutPoints.point3);\r\n dragPointMargin = lineDirection.newDirection === \"east\" ? -config.dragPointMargin : +config.dragPointMargin;\r\n bumpoutPoints.dragPoint.x = midPoint.x;\r\n bumpoutPoints.dragPoint.y = midPoint.y + dragPointMargin;\r\n toCornerMargin = lineDirection.newDirection === \"east\" ? -toCornerLength : -fromCornerLength;\r\n fromCornerMargin = lineDirection.newDirection === \"east\" ? +fromCornerLength : +toCornerLength;\r\n\r\n // stop point on overline move\r\n movePointInOrStop(\r\n point1, point2, 'x', xDiff,\r\n line.getBiggestXPoint().x + toCornerMargin,\r\n line.getSmallestXPoint().x + fromCornerMargin,\r\n stopPoint\r\n );\r\n } else {\r\n //todo rotation\r\n // const nextLine = parent.getNextLine(self);\r\n // const prevLine = parent.getPrevLine(self);\r\n // moveDiagonalLine(self, nextLine, prevLine, state.movePointDistance, yDiff, o);\r\n // state.mouseDownPosition = mousePos;\r\n }\r\n\r\n\r\n // self.from = lockPointToCanvas(self.from); // removed locking because of this issue http://jira.mozidev.com/browse/QC-802\r\n // self.to = lockPointToCanvas(self.to);\r\n };\r\n\r\n\r\n\r\n // Define a function to determine if the bumpout is in or out.\r\n this.bumpoutInOrOut = (pointA = line.from, pointB = line.to, dragPoint = bumpoutPoints.point2) => {\r\n // Calculate vectors.\r\n const vectorAB = { x: pointB.x - pointA.x, y: pointB.y - pointA.y };\r\n const vectorADrag = { x: dragPoint.x - pointA.x, y: dragPoint.y - pointA.y };\r\n\r\n // Calculate the cross product of vectorAB and vectorADrag.\r\n const crossProdZ = crossProduct2D(vectorAB, vectorADrag);\r\n\r\n // Determine if the bumpout is in or out based on the cross product.\r\n if (crossProdZ > 0) {\r\n // Positive Z component indicates an outward bumpout (peak).\r\n return 'in';\r\n } else {\r\n // Negative Z component indicates an inward bumpout (valley).\r\n return 'out';\r\n }\r\n }\r\n\r\n this.drawBumpoutRect = (ctx) => {\r\n var point1 = line.calculateRenderPosition(bumpoutPoints.point1),\r\n point2 = line.calculateRenderPosition(bumpoutPoints.point2),\r\n point3 = line.calculateRenderPosition(bumpoutPoints.point3),\r\n point4 = line.calculateRenderPosition(bumpoutPoints.point4);\r\n //bumpoutHeight = getPointDistance(bumpoutPoints.point1, bumpoutPoints.point2),\r\n //bumpoutLength = getPointDistance(bumpoutPoints.point1, bumpoutPoints.point4);\r\n\r\n ctx.save();\r\n ctx.beginPath();\r\n ctx.moveTo(point1.x, point1.y);\r\n ctx.lineTo(point2.x, point2.y);\r\n ctx.lineTo(point3.x, point3.y);\r\n ctx.lineTo(point4.x, point4.y);\r\n ctx.closePath();\r\n ctx.fillStyle = deleteFillStyle;\r\n ctx.stroke();\r\n ctx.fill();\r\n ctx.restore();\r\n };\r\n\r\n this.render = function(ctx) {\r\n if (isDisabledInPopupShouldBeHidden() && isDisabledInPopupWithParents(line)) {\r\n return\r\n }\r\n renderTopBlueLine(ctx);\r\n renderRuler(ctx);\r\n renderMeasurements(ctx);\r\n };\r\n\r\n //blue line between middle points\r\n function renderTopBlueLine(ctx) {\r\n var renderFrom = line.calculateRenderPosition(bumpoutPoints.point2),\r\n renderTo = line.calculateRenderPosition(bumpoutPoints.point3);\r\n\r\n ctx.beginPath();\r\n ctx.moveTo(renderFrom.x, renderFrom.y);\r\n ctx.lineTo(renderTo.x, renderTo.y);\r\n ctx.lineWidth = 8;\r\n ctx.strokeStyle = config.lineTextColor;\r\n ctx.stroke();\r\n ctx.closePath();\r\n }\r\n\r\n const renderRuler = (ctx) => {\r\n let\r\n //toCornerLength = line.to.getAngle() || line.to.getArcLength(),\r\n //prevLine = line.getParent().getPrevLine(line),\r\n //fromCornerLength = prevLine.to.getAngle() || prevLine.to.getArcLength(),\r\n lineDirection = line.getLineDirection(),\r\n renderTo = line.calculateRenderPosition(line.to),\r\n renderFrom = line.calculateRenderPosition(line.from),\r\n point1 = line.calculateRenderPosition(bumpoutPoints.point1),\r\n point4 = line.calculateRenderPosition(bumpoutPoints.point4),\r\n xMargin = 0,\r\n yMargin = 0,\r\n xOffset = 3,\r\n yOffset = 3,\r\n bumpoutXOffset = 0,\r\n bumpoutYOffset = 0,\r\n scale = configGlobal.scale,\r\n pointDistance34 = getPointDistance(bumpoutPoints.point3, bumpoutPoints.point4);\r\n\r\n switch (lineDirection.orientation) {\r\n case \"horizontal\": {\r\n yMargin = (lineDirection.newDirection === \"west\" ? config.rulerMargin : -config.rulerMargin);\r\n bumpoutYOffset = (lineDirection.newDirection === \"west\" ? pointDistance34 * scale : -(pointDistance34 * scale));\r\n // we need to change sign of bumpoutYOffset if it is bumoutIN\r\n if (this.bumpoutInOrOut(line.from, line.to, bumpoutPoints.point2) === \"in\") {\r\n bumpoutYOffset = -bumpoutYOffset\r\n }\r\n xOffset = (lineDirection.newDirection === \"west\") ? -xOffset : xOffset;\r\n yOffset = 0;\r\n break;\r\n }\r\n case \"vertical\": {\r\n xMargin = (lineDirection.newDirection === \"south\" ? config.rulerMargin: -config.rulerMargin);\r\n bumpoutXOffset = (lineDirection.newDirection === \"south\" ? pointDistance34 * scale: -(pointDistance34 * scale));\r\n // we need to change sign of bumpoutYOffset if it is bumoutIN\r\n if (this.bumpoutInOrOut(line.from, line.to, bumpoutPoints.point2) === \"in\") {\r\n bumpoutXOffset = -bumpoutXOffset\r\n }\r\n yOffset = (lineDirection.newDirection === \"south\") ? yOffset : -yOffset;\r\n xOffset = 0;\r\n break;\r\n }\r\n // todo rotation\r\n case \"NORTHWEST\": { break;}\r\n case \"NORTHEAST\": { break;}\r\n case \"SOUTHWEST\": { break;}\r\n case \"SOUTHEAST\": { break;}\r\n default:\r\n break;\r\n }\r\n\r\n ctx.beginPath();\r\n drawArrow(ctx, renderFrom.x + xMargin, renderFrom.y + yMargin, point1.x + xMargin, point1.y + yMargin);\r\n drawArrow( ctx,\r\n point1.x + xMargin + xOffset + bumpoutXOffset,\r\n point1.y + yMargin + yOffset + bumpoutYOffset,\r\n point4.x + xMargin - xOffset + bumpoutXOffset,\r\n point4.y + yMargin - yOffset + bumpoutYOffset\r\n );\r\n drawArrow(ctx, point4.x + xMargin, point4.y + yMargin, renderTo.x + xMargin, renderTo.y + yMargin);\r\n ctx.lineWidth = 1;\r\n ctx.strokeStyle = config.lineTextColor;\r\n ctx.stroke();\r\n ctx.closePath();\r\n }\r\n\r\n const renderMeasurements = (ctx) => {\r\n var scale = configGlobal.scale,\r\n fontSize = getFontsizeSmall(),\r\n font = (fontSize).toString() + \"px \" + Config.activeFontBold,\r\n lineDirection = line.getLineDirection(),\r\n lineTextColor = config.lineTextColor,\r\n xOffset = 0,\r\n yOffset = 0;\r\n\r\n ctx.beginPath();\r\n ctx.font = font;\r\n ctx.textAlign = \"center\";\r\n ctx.fillStyle = lineTextColor;\r\n\r\n //todo rotation\r\n // const rotateAnglePart = line.from.rotateAnglePart;\r\n // const rotatedAngleValue = line.from.rotateAnglePart ? line.from.rotateAnglePart.rotatedAngleValue : 0;\r\n // const parent = line.getParent();\r\n // let moveFrom, moveTo, prevLine, nextLine, prevParallelLine, nextParallelLine;\r\n // if (lineDirection.orientation !== \"horizontal\" && lineDirection.orientation !== \"vertical\") {\r\n // prevLine = parent.getPrevLine(line);\r\n // nextLine = parent.getNextLine(line);\r\n // prevParallelLine = parent.getPrevLine(prevLine);\r\n // nextParallelLine = parent.getNextLine(nextLine);\r\n // }\r\n\r\n switch (lineDirection.orientation) {\r\n case \"horizontal\": {\r\n // renderTextBetweenPoints34\r\n xOffset = (lineDirection.newDirection === \"west\" ? -45 : 45);\r\n yOffset = (lineDirection.newDirection === \"west\" ? 60 : -60);\r\n renderHorizontalText(bumpoutPoints.point3, bumpoutPoints.point4, xOffset, yOffset, fontSize, ctx, bumpoutTextParameters.length34, 'length34');\r\n\r\n //renderTextBetweenPoints14\r\n let pointDistance34 = getPointDistance(bumpoutPoints.point3, bumpoutPoints.point4);\r\n // we need to change sign of bumpoutYOffset if it is bumoutIN\r\n if (this.bumpoutInOrOut(line.from, line.to, bumpoutPoints.point2) === \"in\") {\r\n pointDistance34 = -pointDistance34\r\n }\r\n xOffset = (lineDirection.newDirection === \"west\" ? -10 : 10);\r\n yOffset = (lineDirection.newDirection === \"west\" ? 45 + (pointDistance34 * scale) : -45 - (pointDistance34 * scale));\r\n renderHorizontalText(bumpoutPoints.point1, bumpoutPoints.point4, xOffset, yOffset, fontSize, ctx, bumpoutTextParameters.length14, 'length14');\r\n\r\n // renderTextBetweenPointsFrom1\r\n xOffset = (lineDirection.newDirection === \"west\" ? 40 : -30);\r\n yOffset = (lineDirection.newDirection === \"west\" ? 45 : -45);\r\n renderHorizontalText(line.from, bumpoutPoints.point1, xOffset, yOffset, fontSize, ctx, bumpoutTextParameters.lengthFrom1, 'lengthFrom1');\r\n\r\n //renderTextBetweenPoints4To\r\n xOffset = (lineDirection.newDirection === \"west\" ? -40 : 40);\r\n yOffset = (lineDirection.newDirection === \"west\" ? 45 : -45);\r\n renderHorizontalText(bumpoutPoints.point4, line.to, xOffset, yOffset, fontSize, ctx, bumpoutTextParameters.length4to, 'length4to');\r\n\r\n //ctx.wrapText(dstring, state.midPoint.x, state.midPoint.y, medgeText, fontSize);\r\n break;\r\n }\r\n case \"vertical\": {\r\n //renderTextBetweenPoints34\r\n yOffset = (lineDirection.newDirection === \"south\" ? 25 : -25 );\r\n xOffset = (lineDirection.newDirection === \"south\" ? 80 : -80 );\r\n\r\n renderHorizontalText(bumpoutPoints.point3, bumpoutPoints.point4, xOffset, yOffset, fontSize, ctx, bumpoutTextParameters.length34, 'length34');\r\n\r\n xOffset = (lineDirection.newDirection === \"south\" ? 35 : -35);\r\n yOffset = (lineDirection.newDirection === \"south\" ? -45 : 30 );\r\n\r\n // renderTextBetweenPointsFrom1\r\n renderRotatedText(ctx, line.from, bumpoutPoints.point1, fontSize, xOffset, yOffset, bumpoutTextParameters.lengthFrom1, 'lengthFrom1');\r\n\r\n yOffset = (lineDirection.newDirection === \"south\" ? 30 : -45 );\r\n // renderTextBetweenPoints4To\r\n renderRotatedText(ctx, bumpoutPoints.point4, line.to, fontSize, xOffset, yOffset, bumpoutTextParameters.length4to, 'length4to');\r\n\r\n // renderTextBetweenPoints14\r\n let pointDistance34 = getPointDistance(bumpoutPoints.point3, bumpoutPoints.point4);\r\n // we need to change sign of bumpoutYOffset if it is bumoutIN\r\n if (this.bumpoutInOrOut(line.from, line.to, bumpoutPoints.point2) === \"in\") {\r\n pointDistance34 = -pointDistance34\r\n }\r\n xOffset = (lineDirection.newDirection === \"south\" ? 35 + (pointDistance34 * scale) : -35 - (pointDistance34 * scale));\r\n yOffset = 0;\r\n renderRotatedText(ctx, bumpoutPoints.point1, bumpoutPoints.point4, fontSize, xOffset, yOffset, bumpoutTextParameters.length14, 'length14');\r\n\r\n break;\r\n }\r\n //TODO rotation\r\n case \"NORTHWEST\": {\r\n break;\r\n }\r\n case \"NORTHEAST\": {\r\n break;\r\n }\r\n case \"SOUTHWEST\": {\r\n break;\r\n }\r\n case \"SOUTHEAST\": {\r\n break;\r\n }\r\n default:\r\n break;\r\n }\r\n }\r\n\r\n // private functions\r\n function renderHorizontalText(point1, point2, xOffset, yOffset, fontSize, ctx, bumpoutTextParameter, part) {\r\n let scale = configGlobal.scale,\r\n midPoint = getMidPoint(point1, point2),\r\n offset = line.getOffset(),\r\n pointsDistance = getPointDistance(point1, point2),\r\n renderText = configGlobal.measureUnit === \"Metric\" ? distanceToMillimeters(pointsDistance.toString()) : distanceToInches(pointsDistance.toString()),\r\n mText = ctx.measureText(renderText);\r\n\r\n midPoint.x = midPoint.x * scale + offset.x;\r\n midPoint.y = midPoint.y * scale + offset.y + fontSize / 2;\r\n ctx.wrapText(renderText, midPoint.x + xOffset, midPoint.y + yOffset, mText, fontSize);\r\n\r\n bumpoutTextParameter.area = getTextPointsArea(midPoint.x + xOffset, midPoint.y + yOffset, mText, orientation.HORIZONTAL);\r\n bumpoutTextParameter.midPoint = {x: midPoint.x + xOffset, y: midPoint.y + yOffset};\r\n bumpoutTextParameter.pointsDistance = pointsDistance;\r\n bumpoutTextParameter.points = { point1: point1, point2: point2 };\r\n bumpoutTextParameter.part = part;\r\n bumpoutTextParameter.orientation = orientation.HORIZONTAL;\r\n }\r\n\r\n function renderRotatedText(ctx, point1, point2, fontSize, xOffset, yOffset, bumpoutTextParameter, part) {\r\n let scale = configGlobal.scale,\r\n midPoint = getMidPoint(point1, point2),\r\n offset = line.getOffset(),\r\n pointsDistance = getPointDistance(point1, point2),\r\n textToRender = configGlobal.measureUnit === \"Metric\" ? distanceToMillimeters(pointsDistance.toString()) : distanceToInches(pointsDistance.toString()),\r\n mText = ctx.measureText(textToRender),\r\n lineDirection = line.getLineDirection();\r\n\r\n midPoint.x = midPoint.x * scale + offset.x;\r\n midPoint.y = midPoint.y * scale + offset.y + fontSize / 2;\r\n\r\n ctx.save();\r\n ctx.translate(\r\n lineDirection.newDirection === \"south\" ? midPoint.x + xOffset : midPoint.x + xOffset,\r\n lineDirection.newDirection === \"south\" ? midPoint.y + yOffset : midPoint.y + yOffset\r\n );\r\n ctx.rotate(lineDirection.newDirection === \"south\" ? Math.PI / 2 : -Math.PI / 2);\r\n ctx.wrapText(textToRender, 0, 0, ctx.measureText(textToRender), fontSize);\r\n ctx.restore();\r\n\r\n bumpoutTextParameter.area = getTextPointsArea(midPoint.x + xOffset, midPoint.y + yOffset, mText, orientation.VERTICAL);\r\n bumpoutTextParameter.midPoint = {x: midPoint.x + xOffset, y: midPoint.y + yOffset};\r\n bumpoutTextParameter.pointsDistance = pointsDistance;\r\n bumpoutTextParameter.points = { point1: point1, point2: point2 };\r\n bumpoutTextParameter.part = part;\r\n bumpoutTextParameter.orientation = orientation.VERTICAL;\r\n }\r\n\r\n function drawArrow(context, fromX, fromY, toX, toY) {\r\n var headLen = 10; // length of head in pixels\r\n var dx = toX - fromX;\r\n var dy = toY - fromY;\r\n var angle = Math.atan2(dy, dx);\r\n\r\n context.moveTo(fromX, fromY);\r\n context.lineTo(toX, toY);\r\n context.lineTo(toX - headLen * Math.cos(angle - Math.PI / 6), toY - headLen * Math.sin(angle - Math.PI / 6));\r\n context.moveTo(toX, toY);\r\n context.lineTo(toX - headLen * Math.cos(angle + Math.PI / 6), toY - headLen * Math.sin(angle + Math.PI / 6));\r\n\r\n context.moveTo(fromX, fromY);\r\n context.lineTo(fromX + headLen * Math.cos(angle - Math.PI / 6), fromY + headLen * Math.sin(angle - Math.PI / 6));\r\n context.moveTo(fromX, fromY);\r\n context.lineTo(fromX + headLen * Math.cos(angle + Math.PI / 6), fromY + headLen * Math.sin(angle + Math.PI / 6));\r\n }\r\n\r\n function onMouseMove(mousePos, e) {\r\n void e;\r\n state.isHoveredOverText = false;\r\n state.isHoveringRect = false;\r\n\r\n for (const property in bumpoutTextParameters) {\r\n if (isMouseOverText(bumpoutTextParameters[property].area, mousePos)) {\r\n state.isHoveredOverText = true;\r\n state.hoveredText = bumpoutTextParameters[property];\r\n break;\r\n }\r\n }\r\n\r\n if (isMouseOverRect(mousePos)) {\r\n state.isHoveringRect = true;\r\n }\r\n\r\n if (isMouseOverPoint(mousePos, bumpoutPoints.dragPoint)) {\r\n // todo angle\r\n // if (workspace.getAllowBumpoutEdges() && !line.from.angleIsChanged && !line.to.angleIsChanged) {\r\n\r\n if (state.mouseDown) {\r\n self.moveLineWithMouse(mousePos);\r\n }\r\n EventManager.releaseStealLock(parent); //TODO Cursor\r\n EventManager.stealCursor(true, true);\r\n switch(line.getOrientation()) {\r\n case orientation.HORIZONTAL:\r\n EventManager.setCursor(\"n-resize\", self);\r\n break;\r\n case orientation.VERTICAL:\r\n EventManager.setCursor(\"e-resize\", self);\r\n break;\r\n case orientation.NORTHWEST:\r\n case orientation.SOUTHEAST:\r\n EventManager.setCursor(\"ne-resize\", self);\r\n break;\r\n case orientation.NORTHEAST:\r\n case orientation.SOUTHWEST:\r\n EventManager.setCursor(\"nw-resize\", self);\r\n break;\r\n }\r\n\r\n return state.mouseDown;\r\n\r\n\r\n // if (configGlobal.highlight.lines && state.isHoveringPoint) {\r\n // EventManager.releaseStealLock(line.parent);\r\n // EventManager.stealCursor();\r\n // return false;\r\n // }\r\n\r\n } else if (isMouseOverPoint(mousePos, bumpoutPoints.point1)) {\r\n // todo angle\r\n // if (workspace.getAllowBumpoutEdges() && !line.from.angleIsChanged && !line.to.angleIsChanged) {\r\n if (state.mouseDown) {\r\n self.movePointWithMouse(mousePos, bumpoutPoints.point1, bumpoutPoints.point2, bumpoutPoints.point4);\r\n }\r\n return state.mouseDown;\r\n\r\n } else if (isMouseOverPoint(mousePos, bumpoutPoints.point4)) {\r\n if (state.mouseDown) {\r\n self.movePointWithMouse(mousePos, bumpoutPoints.point4, bumpoutPoints.point3, bumpoutPoints.point1);\r\n }\r\n return state.mouseDown;\r\n\r\n } else if (state.isHoveredOverText) {\r\n EventManager.stealCursor();\r\n EventManager.setCursor((state.hoveredText.orientation === orientation.HORIZONTAL) ? \"text\" : \"text-vertical\", self);\r\n\r\n } else {\r\n EventManager.resetCursor(self);\r\n return false;\r\n }\r\n\r\n // if (workspace.getHoverShape() !== parent) {\r\n // state.isHoveringPoint = false;\r\n // }\r\n\r\n }\r\n\r\n function isMouseOverPoint(mousePos, point) {\r\n state.isHoveringPoint = !!point.isOverPointField();\r\n // console.log(\"point\", point.id);\r\n // console.log(\"state.hoveredPoint\", state.hoveredPoint.id);\r\n // console.log(\"mousePos\", state.isHoveringPoint);\r\n return state.isHoveringPoint || state.mouseDown && state.hoveredPoint && point.id === state.hoveredPoint.id;\r\n }\r\n\r\n function isMouseOverText(pointArea, mousePos) {\r\n return pnpolyArray(pointArea, mousePos);\r\n }\r\n\r\n function isMouseOverRect(mousePos) {\r\n let point1 = line.calculateRenderPosition(bumpoutPoints.point1),\r\n point2 = line.calculateRenderPosition(bumpoutPoints.point2),\r\n point3 = line.calculateRenderPosition(bumpoutPoints.point3),\r\n point4 = line.calculateRenderPosition(bumpoutPoints.point4);\r\n\r\n let pointArea = [\r\n [point1.x, point1.y],\r\n [point2.x, point2.y],\r\n [point3.x, point3.y],\r\n [point4.x, point4.y]\r\n ];\r\n\r\n return pnpolyArray(pointArea, mousePos);\r\n }\r\n\r\n function getTextPointsArea(x, y, mtext, textOrientation) {\r\n const lineDirection = line.getLineDirection();\r\n let pointsArray = [];\r\n if (textOrientation === orientation.HORIZONTAL) {\r\n pointsArray = [\r\n [x - Math.ceil10(mtext.width ,-2)/2 - 10, y - 15],\r\n [x + Math.ceil10(mtext.width ,-2)/2 + 10, y - 15],\r\n [x + Math.ceil10(mtext.width ,-2)/2 + 10, y + 10],\r\n [x - Math.ceil10(mtext.width ,-2)/2 - 10, y + 10],\r\n ]\r\n } else if (textOrientation === orientation.VERTICAL) {\r\n if (lineDirection.newDirection === \"south\") {\r\n pointsArray = [\r\n [x + 25, y - Math.ceil10(mtext.width ,-2)/2 - 10],\r\n [x + 5, y - Math.ceil10(mtext.width ,-2)/2 - 10],\r\n [x + 5, y + Math.ceil10(mtext.width ,-2)/2 - 5],\r\n [x + 25, y + Math.ceil10(mtext.width ,-2)/2 - 5],\r\n ];\r\n } else if (lineDirection.newDirection === \"north\") {\r\n pointsArray = [\r\n [x - 25, y - Math.ceil10(mtext.width ,-2)/2 - 10],\r\n [x - 5, y - Math.ceil10(mtext.width ,-2)/2 - 10],\r\n [x - 5, y + Math.ceil10(mtext.width ,-2)/2 + 5],\r\n [x - 25, y + Math.ceil10(mtext.width ,-2)/2 + 5],\r\n ];\r\n }\r\n } else {\r\n // debugger;//eslint-disable-line\r\n }\r\n\r\n return pointsArray;\r\n }\r\n\r\n function onMouseUp(mousePos, e) {\r\n void mousePos;\r\n void e;\r\n if (state.mouseDown) {\r\n state.mouseDown = false;\r\n state.mouseDownPosition = null;\r\n }\r\n }\r\n\r\n function onMouseDown(mousePos, e) {\r\n void e;\r\n if (state.isHoveringPoint) {\r\n state.mouseDown = true;\r\n state.mouseDownPosition = mousePos;\r\n for (const point in bumpoutPoints) {\r\n if (bumpoutPoints[point].isOverPointField(mousePos)) {\r\n state.hoveredPoint = bumpoutPoints[point];\r\n }\r\n }\r\n return true;\r\n }\r\n\r\n if (state.isHoveredOverText && !document.querySelector(\".line-input\")) {\r\n window.lineInputFocused = true;\r\n EventManager.stealCursor();\r\n\r\n const maxLength = Math.round(getMaxResizeWidth(line) * configGlobal.getMeasureMultiplier());\r\n const fontSize = getFontsize();\r\n const parent = line.getParent();\r\n const nextLine = parent.getNextLine(line);\r\n const minValue = -nextLine.getLineDistance();\r\n const inputPosition = { x: state.hoveredText.midPoint.x, y: state.hoveredText.midPoint.y };\r\n\r\n // Set orientation and position adjustments based on line direction\r\n let inputClass = \"line-input\";\r\n if (state.hoveredText.orientation === orientation.HORIZONTAL) {\r\n inputClass = \"line-input\";\r\n } else if (state.hoveredText.orientation === orientation.VERTICAL) {\r\n const lineDirection = line.getLineDirection();\r\n if (lineDirection.newDirection === \"south\") {\r\n inputClass = \"line-input line-input--vertical-rotated\";\r\n inputPosition.x -= fontSize;\r\n } else {\r\n inputClass = \"line-input line-input--vertical\";\r\n inputPosition.x += fontSize;\r\n }\r\n }\r\n\r\n const inputValue = self.bumpoutInOrOut() === \"in\"\r\n ? -Math.round(state.hoveredText.pointsDistance * configGlobal.getMeasureMultiplier())\r\n : Math.round(state.hoveredText.pointsDistance * configGlobal.getMeasureMultiplier());\r\n\r\n const hoveredText = state.hoveredText;\r\n // Create adjustable input\r\n const inputWrapper = createAdjustableInput({\r\n position: inputPosition,\r\n initialValue: inputValue.toString(),\r\n min: minValue,\r\n max: maxLength,\r\n orientation: inputClass.includes(\"vertical\") ? \"vertical\" : \"horizontal\",\r\n onChange: (value) => {\r\n if (sqftConfig.measureUnit === MEASURE_UNITS.Metric) {\r\n value = mmToInches(value);\r\n }\r\n let scaledValue = Math.round10(value / configGlobal.getMeasureMultiplier(), -2);\r\n self.resizeBumpoutPart(scaledValue, hoveredText);\r\n },\r\n onClose: () => {\r\n window.lineInputFocused = false;\r\n EventManager.removeEvent({ name: 'lineInput' });\r\n },\r\n step: 1,\r\n });\r\n\r\n // Append the input wrapper to the DOM\r\n document.querySelector(\".sqft-main-grid\").appendChild(inputWrapper);\r\n // Focus and select input on creation\r\n const input = inputWrapper.querySelector(\".line-input-field\");\r\n input.focus();\r\n\r\n return false;\r\n }\r\n\r\n return false;\r\n }\r\n\r\n function onMouseLeave() {\r\n state.isHoveringPoint = false;\r\n state.mouseDown = false;\r\n state.hoveredPoint = null;\r\n state.isHoveredOverText = false;\r\n state.hoveredText = {};\r\n }\r\n}\r\n","import config from \"../../../../store/sqftConfig\";\r\nimport COLOR_THEMES, {COLOR} from \"../../../../store/colorThemes\";\r\nimport {RESOURCE_ATTACHED_TO_TYPE} from \"../../../../../../constants\";\r\n\r\nexport default class Color {\r\n static getOutlineHoverStrokeStyle() {\r\n switch (config.highlight.type) {\r\n case 'edge':\r\n default:\r\n return COLOR_THEMES[config.activeTheme].active_transparent;\r\n case 'backsplash':\r\n return COLOR_THEMES[config.activeTheme].primary_hover;\r\n case 'wall':\r\n return 'rgba(0,0,0,0.5)';\r\n }\r\n }\r\n\r\n static getOutlineStrokeStyle(type) {\r\n switch (type) {\r\n case 'edge':\r\n return COLOR_THEMES[config.activeTheme].active;\r\n case 'backsplash':\r\n return COLOR_THEMES[config.activeTheme].primary;\r\n case 'wall':\r\n return '#000000';\r\n case RESOURCE_ATTACHED_TO_TYPE.end_cap:\r\n return COLOR.red;\r\n default:\r\n return COLOR_THEMES[config.activeTheme].active_transparent;\r\n }\r\n }\r\n}\r\n","class LineAttachmentsComposite {\r\n constructor() {\r\n this.children = [];\r\n }\r\n\r\n add(component) {\r\n this.children.push(component);\r\n }\r\n\r\n execute() {\r\n this.children.forEach(child => child.execute());\r\n }\r\n}\r\n\r\nexport default LineAttachmentsComposite\r\n","import {orientation} from \"../../../../helpers/sqftHelper\";\r\nimport point from \"./point\";\r\n\r\nexport const getAngle = (rotateAnglePart, angleValue) => {\r\n return (rotateAnglePart && rotateAnglePart.angleDirection === \"right\")\r\n ? (angleValue < 90) ? -angleValue : 90 - angleValue\r\n : (angleValue < 90) ? angleValue : angleValue - 90;\r\n};\r\n\r\nexport const getRotationCentrePoint = (rotateAnglePart, angleValue, bottomLine, basePoint, secondaryPoint) => {\r\n let {\r\n basePointX, basePointX2, basePointY, basePointY2, baseOldX, baseOldY, baseOldX1, baseOldY1, widthDiff, rotated90_1, rotated90_2\r\n } = rotateAnglePart.baseConfiguration;\r\n\r\n void baseOldX; void baseOldY; void baseOldX1; void baseOldY1; void rotated90_1; void rotated90_2;\r\n let rotationCenterPoint;\r\n let line;\r\n let newDirection;\r\n widthDiff = Math.round(widthDiff);\r\n\r\n if (rotateAnglePart && rotateAnglePart.shapeType === \"horseshoe\" || rotateAnglePart && rotateAnglePart.shapeType === \"wideangle\") {\r\n if(angleValue < 90) {\r\n rotationCenterPoint = {\r\n x: basePointX2,\r\n y: basePointY2\r\n };\r\n } else {\r\n if(rotateAnglePart && rotateAnglePart.angleDirection === \"right\") {\r\n line = secondaryPoint.getParent();\r\n newDirection = line.getLineDirection().newDirection;\r\n\r\n switch (line.getOrientation()) {\r\n case orientation.HORIZONTAL:{\r\n if (newDirection === \"east\") { rotationCenterPoint = { x: basePointX + widthDiff, y: basePointY }}\r\n if (newDirection === \"west\") { rotationCenterPoint = { x: basePointX - widthDiff, y: basePointY }}\r\n break;\r\n }\r\n case orientation.VERTICAL: {\r\n if (newDirection === \"north\") { rotationCenterPoint = { x: basePointX, y: basePointY - widthDiff }}\r\n if (newDirection === \"south\") { rotationCenterPoint = { x: basePointX, y: basePointY + widthDiff }}\r\n break;\r\n }\r\n default:\r\n break;\r\n }\r\n } else {\r\n line = basePoint.getParent();\r\n newDirection = line.getLineDirection().newDirection;\r\n\r\n switch (line.getOrientation()) {\r\n case orientation.HORIZONTAL:{\r\n if (newDirection === \"east\") { rotationCenterPoint = { x: basePointX + widthDiff, y: basePointY }}\r\n if (newDirection === \"west\") { rotationCenterPoint = { x: basePointX - widthDiff, y: basePointY }}\r\n break;\r\n }\r\n case orientation.VERTICAL: {\r\n if (newDirection === \"north\") { rotationCenterPoint = { x: basePointX, y: basePointY - widthDiff }}\r\n if (newDirection === \"south\") { rotationCenterPoint = { x: basePointX, y: basePointY + widthDiff }}\r\n break;\r\n }\r\n default:\r\n break;\r\n }\r\n }\r\n }\r\n }\r\n\r\n if (rotationCenterPoint === undefined) {\r\n var tempLinePointFrom = new point(line.from.x, line.from.y);\r\n var tempLinePointTo = new point(line.to.x, line.to.y);\r\n tempLinePointFrom.init(bottomLine);\r\n tempLinePointFrom.layout = 'white-circle';\r\n\r\n tempLinePointTo.init(bottomLine);\r\n tempLinePointTo.layout = 'white-circle';\r\n\r\n rotationCenterPoint = getRotationCentrePointByBottomLine(rotateAnglePart, angleValue, bottomLine);\r\n }\r\n\r\n return rotationCenterPoint\r\n};\r\n\r\nexport const getRotationCentrePointByBottomLine = (rotateAnglePart, angleValue, bottomLine) => {\r\n const {\r\n basePointX, basePointX2, basePointY, basePointY2, baseOldX, baseOldY, baseOldX1, baseOldY1, widthDiff, rotated90_1, rotated90_2\r\n } = rotateAnglePart.baseConfiguration;\r\n void baseOldX; void baseOldY; void baseOldX1; void baseOldY1; void rotated90_1; void rotated90_2;\r\n\r\n let rotationCenterPoint;\r\n if (rotateAnglePart && rotateAnglePart.shapeType === \"wideangle\") {\r\n rotationCenterPoint = {\r\n x: angleValue < 90 ? basePointX2 : (rotateAnglePart && rotateAnglePart.angleDirection === \"right\") ? basePointX - widthDiff : basePointX + widthDiff,\r\n y: angleValue < 90 ? basePointY2 : basePointY,\r\n };\r\n } else if (rotateAnglePart && rotateAnglePart.shapeType === \"horseshoe\") {\r\n if(angleValue < 90) {\r\n rotationCenterPoint = {\r\n x: basePointX2,\r\n y: basePointY2\r\n };\r\n } else {\r\n if(rotateAnglePart && rotateAnglePart.angleDirection === \"right\") {\r\n switch (bottomLine.getOrientation()) {\r\n case orientation.HORIZONTAL:{ rotationCenterPoint = { x: basePointX, y: basePointY }; break;}\r\n case orientation.VERTICAL: { rotationCenterPoint = { x: basePointX, y: basePointY }; break;}\r\n case orientation.SOUTHEAST: { rotationCenterPoint = { x: basePointX - widthDiff, y: basePointY}; break;}\r\n case orientation.NORTHEAST: { rotationCenterPoint = { x: basePointX, y: basePointY + widthDiff }; break; }\r\n case orientation.SOUTHWEST: { rotationCenterPoint = { x: basePointX, y: basePointY - widthDiff}; break; }\r\n case orientation.NORTHWEST: { rotationCenterPoint = { x: basePointX + widthDiff, y: basePointY }; break; }\r\n default:\r\n break;\r\n }\r\n } else {\r\n switch (bottomLine.getOrientation()) {\r\n case orientation.HORIZONTAL: { rotationCenterPoint = { x: basePointX, y: basePointY }; break; }\r\n case orientation.VERTICAL: { rotationCenterPoint = { x: basePointX, y: basePointY }; break; }\r\n case orientation.SOUTHEAST: { rotationCenterPoint = { x: basePointX, y: basePointY + widthDiff}; break; }\r\n case orientation.NORTHEAST: { rotationCenterPoint = { x: basePointX + widthDiff, y: basePointY}; break; }\r\n case orientation.SOUTHWEST: { rotationCenterPoint = { x: basePointX - widthDiff, y: basePointY}; break; }\r\n case orientation.NORTHWEST: { rotationCenterPoint = { x: basePointX, y: basePointY - widthDiff}; break; }\r\n default:\r\n break;\r\n }\r\n }\r\n }\r\n }\r\n\r\n return rotationCenterPoint\r\n};\r\n","import workspace from \"../../workspace\";\r\nimport COLOR_THEMES from \"../../../store/colorThemes\";\r\nimport sqftConfig from \"../../../store/sqftConfig\";\r\nimport store from \"../../../../../../../store\";\r\nimport SeamTool from \"./slabParts/seamTool\";\r\nimport {RENDER_TEMPLATES, SHAPE_PART_ID, SIDEBAR_SLAB_SEAM_BUTTONS} from \"../../../../../constants\";\r\nimport RenderParts from \"../../../helpers/renderParts\";\r\nimport ShapeMeasurementArrows from \"./shapeMeasurementArrows\";\r\nimport ShapeAbsolute from \"./shapeAbsolute\";\r\nimport workspaceControllers from \"../../../store/workspaceControllers\";\r\nimport {getPointField} from \"../../../../../helpers/sqftHelper\";\r\nimport RenderFigures from \"../../../helpers/renderFigures\";\r\n\r\nclass ShapeSlab {\r\n __shape;\r\n __seamTool;\r\n __intersectionPoints = [];\r\n __minLengthToIntersectionPoints;\r\n __absolutePos = null; //not used?\r\n shapeAbsolute = new ShapeAbsolute(this);\r\n\r\n constructor(shape) {\r\n this.__shape = shape;\r\n this.__seamTool = new SeamTool(shape);\r\n this.__measurementArrows = new ShapeMeasurementArrows(shape);\r\n }\r\n setSlabPos(pos) {\r\n this.__shape.slabPos = pos\r\n }\r\n setParentId(parentId) {\r\n this.__shape.shapeParent = parentId\r\n }\r\n setRotationDegreesSlab(rotationDegrees) {\r\n this.__shape.rotatedDegreesSlab = rotationDegrees\r\n }\r\n addSeamPieceVertical = (mousePos) => {\r\n this.__seamTool.addSeamPieceVertical(mousePos);\r\n workspaceControllers.snappedShapeGroups.updateShapesSnappedGroups(false);\r\n };\r\n addSeamPieceHorizontal = (mousePos) => {\r\n this.__seamTool.addSeamPieceHorizontal(mousePos);\r\n workspaceControllers.snappedShapeGroups.updateShapesSnappedGroups(false);\r\n };\r\n setAbsolutePos = (pos) => {\r\n //this.__absolutePos = pos;\r\n this.shapeAbsolute.setAbsolutePos(pos);\r\n };\r\n getAbsolutePosition = () => {\r\n //return this.__absolutePos;\r\n return this.shapeAbsolute.getAbsolutePosition();\r\n };\r\n getPosition = () => {\r\n let absolutePos = this.getAbsolutePosition();\r\n\r\n if (absolutePos) {\r\n return absolutePos\r\n }\r\n\r\n return this.__shape.slabPos;\r\n };\r\n setIntersectionsPoints = (points) => {\r\n this.__intersectionPoints = points;\r\n };\r\n setMinLengthToIntersectionPoints = (length) => {\r\n this.__minLengthToIntersectionPoints = length;\r\n };\r\n resetShapeSeams = () => {\r\n for (let i = this.__shape.shapePieces.length - 1; i >= 0; i--) {\r\n let shp = workspace.getShapeById(this.__shape.shapePieces[i]);\r\n if (shp.shapePieces) {\r\n shp.shapeSlab.resetShapeSeams();\r\n }\r\n workspace.removeShape(shp);\r\n }\r\n this.__shape.shapePieces.splice(0, this.__shape.shapePieces.length);\r\n };\r\n import = (data) => {\r\n this.shapeAbsolute.setAbsolutePos(data ? data.absolutePosition : null);\r\n }\r\n export = () => {\r\n return {\r\n absolutePosition: this.getAbsolutePosition()\r\n }\r\n }\r\n\r\n render = (ctx,\r\n staticOffset = null,\r\n strokeTemplate= RENDER_TEMPLATES.default,\r\n fillTemplate = RENDER_TEMPLATES.accordingToFeature\r\n ) => {\r\n if (workspace && workspace.getState().loading) return;\r\n if (this.__shape.partId === SHAPE_PART_ID.slabPlaceHolder) {\r\n RenderParts.drawDiagonalStripes(ctx, this.__shape, 2);\r\n } else {\r\n RenderParts.drawShapeBorders(ctx, staticOffset, strokeTemplate, fillTemplate, this.__shape);\r\n }\r\n const reduxState = store.getState()\r\n let isMeasurementVisibleInSlabMode = reduxState.sqftSlabState.isMeasurementVisibleInSlabMode;\r\n if (isMeasurementVisibleInSlabMode) {\r\n this.renderMeasurementArrows(ctx);\r\n }\r\n this.renderSeamLinesOnHover(ctx);\r\n this.renderSeamCutPoints(ctx);\r\n };\r\n\r\n renderSeamLinesOnHover = (ctx) => {\r\n if (this.__shape.isHovering() && workspace.getHoveredSqftShape() === this.__shape ) {\r\n let sqftMenuState = store.getState().sqftMenuState;\r\n if (sqftMenuState.activeButton === SIDEBAR_SLAB_SEAM_BUTTONS.addSeamVertical) {\r\n this.__seamTool.seamToolRender.renderSeamVerticalIntersection(ctx);\r\n } else if (sqftMenuState.activeButton === SIDEBAR_SLAB_SEAM_BUTTONS.addSeamHorizontal) {\r\n this.__seamTool.seamToolRender.renderSeamHorizontalIntersection(ctx);\r\n }\r\n }\r\n }\r\n\r\n renderSeamCutPoints = (ctx) => {\r\n const strokeStyle = '#e01333';\r\n for (const seamCutPoint of this.__shape.seamCutPoints) {\r\n const seamCutPointOnField = getPointField(seamCutPoint.x, seamCutPoint.y, this.__shape);\r\n RenderFigures.renderCircle(seamCutPointOnField, 4, 1, strokeStyle, strokeStyle);\r\n RenderFigures.renderCircle(seamCutPointOnField, 7, 1, strokeStyle);\r\n }\r\n if (this.__shape.seamCutPoints.length === 2) {\r\n const startPoint = this.__shape.seamCutPoints[0];\r\n const endPoint = this.__shape.seamCutPoints[1];\r\n const startPointOnField = getPointField(startPoint.x, startPoint.y, this.__shape);\r\n const endPointOnField = getPointField(endPoint.x, endPoint.y, this.__shape);\r\n ctx.moveTo(startPointOnField.x, startPointOnField.y);\r\n ctx.lineTo(endPointOnField.x, endPointOnField.y);\r\n ctx.strokeStyle = strokeStyle;\r\n ctx.stroke();\r\n }\r\n }\r\n\r\n renderLinesWithoutStroke = (ctx, staticOffset = null, sqftMode) => {\r\n if (workspace && workspace.getState().loading) return;\r\n let lines = this.__shape.getLines();\r\n ctx.lineWidth = 2;\r\n ctx.strokeStyle = COLOR_THEMES[sqftConfig.activeTheme].active;\r\n for (let i = 0; i < lines.length; i++) {\r\n lines[i].staticOffset = staticOffset;\r\n lines[i].render(ctx, i > 0, sqftMode);\r\n lines[i].staticOffset = null;\r\n }\r\n };\r\n\r\n renderMeasurementArrows = (ctx) => {\r\n const snappedShapeGroup = this.shapeAbsolute.getSnappedShapeGroup();\r\n //We will render measurement arrows only if there are no shapes snaps to the current shape;\r\n if (snappedShapeGroup !== null) {\r\n const snappedShapes = workspaceControllers.snappedShapeGroups.getSnappedShapes(snappedShapeGroup);\r\n if (snappedShapes.length > 1) {\r\n return\r\n }\r\n }\r\n\r\n this.__measurementArrows.render(ctx);\r\n };\r\n}\r\n\r\nexport default ShapeSlab\r\n","import _ from 'lodash';\r\n\r\nimport {\r\n getPointField,\r\n} from \"../../../../../../helpers/sqftHelper\";\r\nimport sqftShapeManager from \"../../../../store/sqftShapeManager\";\r\nimport {SHAPE_PART_ID, SHAPE_ROTATE_DIRECTION} from \"../../../../../../constants\";\r\nimport SqftStore from \"../../../../store/sqftStore\";\r\nimport ShapeHelper from \"../../../../../../helpers/shapeHelper\";\r\nimport SeamToolRender from \"./seamToolRender\";\r\nimport SlabWorkspace from \"../../../slab/slabWorkspace\";\r\nimport SlabAdditionalShape from \"../../../slab/slabAdditionalShape\";\r\nimport {getHorizontalLineIntersectionPoints, getVerticalLineIntersectionPoints} from \"./seamToolHelper\";\r\nimport {createShapeFromPoints} from \"../../../../../../helpers/freeDrawHelper\";\r\n\r\nclass SeamTool {\r\n __shape;\r\n seamToolRender;\r\n\r\n constructor(_shape) {\r\n this.__shape = _shape;\r\n this.seamToolRender = new SeamToolRender(this);\r\n }\r\n\r\n getMaxLength = () => {\r\n //todo\r\n return 10\r\n }\r\n //todo\r\n addSeamPieceHorizontal = (mousePos) => {\r\n // const mousePosOnFiled = getMousePositionOnField(mousePos.x, mousePos.y);\r\n // const serverState = store.getState().serverState;\r\n // const pos = this.__shape.getPosition();\r\n //let intersectionPoint1 = {x: -serverState.windowWidth, y: mousePosOnFiled.y - pos.y};\r\n //let intersectionPoint2 = {x: serverState.windowWidth, y: mousePosOnFiled.y - pos.y};\r\n\r\n let absoluteLinePoint1Pos = this.seamToolRender.absoluteLinePoint1Pos;\r\n let toPoint = {...mousePos};\r\n if (absoluteLinePoint1Pos && absoluteLinePoint1Pos.y) {\r\n let pf = getPointField(absoluteLinePoint1Pos.x, absoluteLinePoint1Pos.y, this.__shape);\r\n toPoint.y = pf.y;\r\n }\r\n const lines = this.__shape.getLines();\r\n console.log(\"linesPoints\", lines.map((line) => { return {x: line.from.x, y: line.from.y}}));\r\n\r\n const linesWithoutAnglePoints = this.__shape.createLinesWithoutAngle();\r\n let [intersectionPointAndLine1, intersectionPointAndLine2] = getHorizontalLineIntersectionPoints(toPoint, this.__shape, linesWithoutAnglePoints);\r\n if (intersectionPointAndLine1 && intersectionPointAndLine2) {\r\n let seamShapesPoints = this.splitShape(linesWithoutAnglePoints, intersectionPointAndLine1, intersectionPointAndLine2, 'vertical');\r\n console.log(\"intersectionPoint1\", intersectionPointAndLine1);\r\n console.log(\"intersectionPoint2\", intersectionPointAndLine2);\r\n\r\n console.log(\"linesWithoutAnglePoints\", linesWithoutAnglePoints.map((line) => { return {x: line.from.x, y: line.from.y}}));\r\n console.log(\"piece1Points\", seamShapesPoints[0].map(point => { return {x: point.x, y: point.y}}));\r\n console.log(\"piece2Points\", seamShapesPoints[1].map(point => { return {x: point.x, y: point.y}}));\r\n this.createShapesFromSeamPointsAndSetSlabRotation(seamShapesPoints);\r\n\r\n this.__shape.deregisterEvents();\r\n //this.__shape.shapeSlab.setRotationDegreesSlab(0); //? not needed\r\n SqftStore.addSeamHistory(this.__shape);\r\n } else {\r\n console.log(\"getHorizontalLineIntersectionPoints error missing intersections\");\r\n }\r\n }\r\n\r\n createShapesFromSeamPointsAndSetSlabRotation = (seamShapesPoints) => {\r\n let parentShapeCenter = this.__shape.getCenter();\r\n\r\n for (let seamPoints of seamShapesPoints) {\r\n let isBacksplashPiece = [SHAPE_PART_ID.backsplashPiece, SHAPE_PART_ID.waterfallPiece].includes(this.__shape.partId);\r\n let partId = SHAPE_PART_ID.seamPiece;\r\n seamPoints = this.preparePointCords(seamPoints);\r\n let shapePieceId = createShapeFromPoints(seamPoints, partId, true);\r\n let shapePiece = sqftShapeManager.getShapeById(shapePieceId);\r\n shapePiece.featureId = this.__shape.featureId;\r\n shapePiece.featureName = this.__shape.featureName;\r\n shapePiece.colorSet = this.__shape.colorSet;\r\n shapePiece.deregisterPartEvents();\r\n let rotatedDiffPos = {x: 0, y: 0};\r\n\r\n if (isBacksplashPiece) {\r\n //add additional backsplash to slabWorkspace\r\n let parentSlabAdditionalShape = SlabWorkspace.slabAdditionalShapes.findOneByBacksplashShapeId(this.__shape.id);\r\n let newSlabAdditionalShape = new SlabAdditionalShape(parentSlabAdditionalShape.line, shapePieceId);\r\n SlabWorkspace.slabAdditionalShapes.addActiveBacksplash(newSlabAdditionalShape);\r\n }\r\n\r\n shapePiece.shapeSlab.setSlabPos(Object.assign({}, this.__shape.slabPos));\r\n if (this.__shape.rotatedDegreesSlab !== 0) {\r\n\r\n // this will rotate sqft and slab shape points to 0 it is required for correct rotation and drawing images in the right part\r\n let shapePieceCenterPointBeforeRotation = ShapeHelper.getCenterPoint(shapePiece.getLines().map(line => line.from));\r\n let reqRotatedDegreesToZero = 360 - this.__shape.rotatedDegreesSlab;\r\n //console.log(\"piece before rotate1\", shapePiece.getLines().map((line) => { return {x: line.from.x, y: line.from.y}}));\r\n shapePiece.rotate(reqRotatedDegreesToZero, SHAPE_ROTATE_DIRECTION.left, true, parentShapeCenter);\r\n //console.log(\"piece rotate2\", shapePiece.getLines().map((line) => { return {x: line.from.x, y: line.from.y}}));\r\n shapePiece.rotate(360, SHAPE_ROTATE_DIRECTION.left, false, parentShapeCenter);\r\n //console.log(\"piece rotate3\", shapePiece.getLines().map((line) => { return {x: line.from.x, y: line.from.y}}));\r\n shapePiece.setRotationDegrees(0);\r\n shapePiece.shapeSlab.setRotationDegreesSlab(0);\r\n\r\n //rotate shape and move it to diff position (this is for correct displaying right part)\r\n shapePiece.rotate(this.__shape.rotatedDegreesSlab, SHAPE_ROTATE_DIRECTION.left, true);\r\n let shapePieceCenterPointAfterRotation = ShapeHelper.getCenterPoint(shapePiece.getLines().map(line => line.from));\r\n this.__shape.setIsPointsChanged(false); // prevent points change after rotation\r\n console.log(\"piece rotate4\", shapePiece.getLines().map((line) => { return {x: line.from.x, y: line.from.y}}));\r\n\r\n rotatedDiffPos = {\r\n x: shapePieceCenterPointBeforeRotation.x - shapePieceCenterPointAfterRotation.x,\r\n y: shapePieceCenterPointBeforeRotation.y - shapePieceCenterPointAfterRotation.y,\r\n }\r\n }\r\n let coreShapeAbsolutePosition = this.__shape.getSlabAbsolutePosition()\r\n let slabAbsolutePosition = coreShapeAbsolutePosition ? coreShapeAbsolutePosition : this.__shape.getSlabPosition();\r\n shapePiece.slabPos = {\r\n x: slabAbsolutePosition.x + rotatedDiffPos.x,\r\n y: slabAbsolutePosition.y + rotatedDiffPos.y,\r\n }\r\n\r\n shapePiece.shapeSlab.setParentId(this.__shape.id); //this is not needed maybe in future\r\n shapePiece.setPosition(Object.assign({}, this.__shape.getRegularPosition()));\r\n\r\n this.__shape.addShapePieceId(shapePiece.id);\r\n }\r\n };\r\n\r\n addSeamPieceVertical = (mousePos) => {\r\n // const mousePosOnFiled = getMousePositionOnField(mousePos.x, mousePos.y);\r\n // const serverState = store.getState().serverState;\r\n // const pos = this.__shape.getPosition();\r\n //\r\n // let intersectionPoint1 = {x: mousePosOnFiled.x - pos.x, y: -serverState.windowHeight};\r\n // let intersectionPoint2 = {x: mousePosOnFiled.x - pos.x, y: serverState.windowHeight};\r\n let absoluteLinePoint1Pos = this.seamToolRender.absoluteLinePoint1Pos;\r\n let toPoint = {...mousePos};\r\n if (absoluteLinePoint1Pos && absoluteLinePoint1Pos.x) {\r\n let pf = getPointField(absoluteLinePoint1Pos.x, absoluteLinePoint1Pos.y, this.__shape);\r\n toPoint.x = pf.x;\r\n }\r\n const linesWithoutAnglePoints = this.__shape.createLinesWithoutAngle();\r\n let [intersectionPointAndLine1, intersectionPointAndLine2] = getVerticalLineIntersectionPoints(toPoint, this.__shape, linesWithoutAnglePoints);\r\n\r\n if (intersectionPointAndLine1 && intersectionPointAndLine2) {\r\n let seamShapesPoints = this.splitShape(linesWithoutAnglePoints, intersectionPointAndLine1, intersectionPointAndLine2, 'horizontal');\r\n // console.log(\"intersectionPoint1\", intersectionPointAndLine1);\r\n // console.log(\"intersectionPoint2\", intersectionPointAndLine2);\r\n // console.log(\"shapePoints\", this.__shape.getLines().map((line) => { return {x: line.from.x, y: line.from.y}}));\r\n // console.log(\"piece1Points\", seamShapesPoints[0].map(point => { return {x: point.x, y: point.y}}));\r\n // console.log(\"piece2Points\", seamShapesPoints[1].map(point => { return {x: point.x, y: point.y}}));\r\n this.createShapesFromSeamPointsAndSetSlabRotation(seamShapesPoints);\r\n\r\n this.__shape.deregisterEvents();\r\n //this.__shape.shapeSlab.setRotationDegreesSlab(0); //? not needed\r\n SqftStore.addSeamHistory(this.__shape);\r\n } else {\r\n console.log(\"getVerticalLineIntersectionPoints error missing intersections\");\r\n }\r\n };\r\n\r\n preparePointCords = (seamPoints) => {\r\n return seamPoints.map((seamPoint) => {\r\n seamPoint.x = Math.round10(seamPoint.x, -1);\r\n seamPoint.y = Math.round10(seamPoint.y, -1);\r\n return seamPoint\r\n })\r\n };\r\n\r\n /**\r\n * @param {[]} lines\r\n * @param {*} intersectionPointAndLine1\r\n * @param {*} intersectionPointAndLine2\r\n * @param {string} splitOnlyOrientation\r\n */\r\n splitShape = (lines, intersectionPointAndLine1, intersectionPointAndLine2, splitOnlyOrientation) => {\r\n let piece1Points = [];\r\n let piece2Points = [];\r\n let intersectionNumber = 1;\r\n let lastPoint;\r\n let intersectionPoint1 = intersectionPointAndLine1.intersectionCords\r\n let intersectionPoint2 = intersectionPointAndLine2.intersectionCords\r\n\r\n lines.forEach((line) => {\r\n let intersectionCords = null;\r\n void splitOnlyOrientation;\r\n\r\n // version 1.0 search cords again\r\n //if (line.getLineDirection().orientation === splitOnlyOrientation || !splitOnlyOrientation) {\r\n // intersectionCords = getIntersectCords(\r\n // Math.round10(line.from.x, -1), Math.round10(line.from.y, -1),\r\n // Math.round10(line.to.x, -1), Math.round10(line.from.y, -1),\r\n // Math.round10(intersectionPoint1.x, -1), Math.round10(intersectionPoint1.y, -1),\r\n // Math.round10(intersectionPoint2.x, -1), Math.round10(intersectionPoint2.y,-1),\r\n // false\r\n // )\r\n //}\r\n\r\n // version 2.0 use existing intersection cords\r\n if ((line === intersectionPointAndLine1.line || line === intersectionPointAndLine2.line)) {\r\n intersectionCords = line === intersectionPointAndLine1.line\r\n ? intersectionPointAndLine1.intersectionCords\r\n : intersectionPointAndLine2.intersectionCords\r\n }\r\n\r\n if (intersectionCords) {\r\n let ip = (Math.round10(intersectionCords.x, -1) === Math.round10(intersectionPoint1.x, -1)\r\n && Math.round10(intersectionCords.y, -1) === Math.round10(intersectionPoint1.y, -1))\r\n ? intersectionPoint1 : intersectionPoint2\r\n if (piece2Points.length === 1) { // triangle shape\r\n piece2Points.push(line.from);\r\n }\r\n const nextLine = line.getParent().getNextLine(line, undefined, true);\r\n if (piece1Points.length === 1\r\n && (nextLine.id === intersectionPointAndLine1.line.id || nextLine.id === intersectionPointAndLine2.line.id)\r\n ) {\r\n piece1Points.push(line.to); // triangle shape\r\n }\r\n piece1Points.push(ip);\r\n piece2Points.push(ip);\r\n } else {\r\n if (intersectionNumber % 2 !== 0) {\r\n lastPoint = piece1Points[piece1Points.length - 1];\r\n if (!lastPoint || !lastPoint.id || lastPoint.id !== line.from.id) {\r\n piece1Points.push(line.from);\r\n }\r\n if (piece1Points[0] !== line.to) {\r\n piece1Points.push(line.to);\r\n }\r\n }\r\n if (intersectionNumber % 2 === 0) {\r\n lastPoint = piece2Points[piece2Points.length - 1];\r\n if (!lastPoint || !lastPoint.id || lastPoint.id !== line.from.id) {\r\n piece2Points.push(line.from);\r\n }\r\n if (piece2Points[0] !== line.to) {\r\n piece2Points.push(line.to);\r\n }\r\n }\r\n }\r\n\r\n if (intersectionCords) {\r\n intersectionNumber += 1;\r\n }\r\n //console.log(\"intersectionCords\", intersectionCords);\r\n });\r\n //console.log(\"piece1Points before filter\", piece1Points.map(point => { return {x: point.x, y: point.y}}));\r\n //console.log(\"piece2Points before filter\", piece2Points.map(point => { return {x: point.x, y: point.y}}));\r\n\r\n function filterEqualAndPointsOnTheSameLine(pointsArray) {\r\n return pointsArray.filter((point, index, array) => {\r\n let prev = array[index - 1];\r\n let next = array[index + 1];\r\n if (!prev) { // include first point\r\n prev = array[array.length - 1];\r\n }\r\n if (!next) {\r\n next = array[0]; // next point for the last point in array is the first point in array\r\n }\r\n const isEqual = _.isEqual({x: point.x, y: point.y}, {x: prev.x, y: prev.y});\r\n const isOnTheSameLine = point.x === prev.x && point.x === next.x || point.y === prev.y && point.y === next.y\r\n return !isEqual && !isOnTheSameLine\r\n })\r\n }\r\n\r\n return [filterEqualAndPointsOnTheSameLine(piece1Points), filterEqualAndPointsOnTheSameLine(piece2Points)]\r\n }\r\n}\r\n\r\nexport default SeamTool\r\n","import store from \"../../../../../../../../store\";\r\nimport sqftEventManager from \"../../../../store/sqftEventManager\";\r\nimport {\r\n getMidPoint,\r\n getMousePositionOnField,\r\n getPointDistance,\r\n getPointField\r\n} from \"../../../../../../helpers/sqftHelper\";\r\nimport COLOR_THEMES from \"../../../../store/colorThemes\";\r\nimport sqftConfig from \"../../../../store/sqftConfig\";\r\nimport NumberText from \"../../../workspace/text/numberText\";\r\nimport workspace from \"../../../workspace\";\r\nimport {\r\n getClosestIntersectionPoints,\r\n getIntersectionPointsAndLines,\r\n} from \"./seamToolHelper\";\r\nimport ShapeHelper from \"../../../../../../helpers/shapeHelper\";\r\nimport RenderFigures from \"../../../../helpers/renderFigures\";\r\nimport config from \"../../../../store/sqftConfig\";\r\n\r\nclass SeamToolRender {\r\n __measurement1 = new NumberText(0, {}, {}, workspace, Function(), false);\r\n __measurement2 = new NumberText(0, {}, {}, workspace, Function(), false);\r\n seamTool;\r\n absoluteLinePoint1Pos = {};\r\n absoluteLinePoint2Pos = {};\r\n\r\n constructor(seamTool) {\r\n this.seamTool = seamTool;\r\n }\r\n\r\n renderSeamHorizontalIntersection = (ctx) => {\r\n const serverState = store.getState().serverState;\r\n const mousePos = sqftEventManager.getMousePos();\r\n const mousePosOnFiled = getMousePositionOnField(mousePos.x, mousePos.y);\r\n const pos = this.seamTool.__shape.getPosition();\r\n const mousePosOnShape = {x: mousePosOnFiled.x - pos.x, y: mousePosOnFiled.y - pos.y};\r\n this.absoluteLinePoint1Pos = null; //reset minLength for correct calculations without stacking\r\n this.absoluteLinePoint2Pos = null; //reset minLength for correct calculations without stacking\r\n\r\n // vertical line\r\n let verticalLinePoint1 = {x: -serverState.windowWidth, y: mousePosOnShape.y};\r\n let verticalLinePoint2 = {x: serverState.windowWidth, y: mousePosOnShape.y};\r\n let distancesToLines = ShapeHelper.getDistancesToPoint(mousePos);\r\n let snappingPossibilitiesToLines = ShapeHelper.getSnappingPossibilitiesToLines(distancesToLines);\r\n if (snappingPossibilitiesToLines.length > 0) {\r\n //console.log(\"distancesToLines\", distancesToLines);\r\n //console.log(\"getSnappingPossibilitiesToLines\", snappingPossibilitiesToLines);\r\n this.setAbsolutePosFromSnapPossibilities(snappingPossibilitiesToLines, verticalLinePoint1, verticalLinePoint2);\r\n verticalLinePoint1 = this.absoluteLinePoint1Pos;\r\n verticalLinePoint2 = this.absoluteLinePoint2Pos;\r\n }\r\n this.renderSeamDashedLine(ctx, verticalLinePoint1, verticalLinePoint2);\r\n\r\n // horizontal line\r\n let horizontalLinePoint1 = {x: mousePosOnShape.x , y: -serverState.windowHeight};\r\n let horizontalLinePoint2 = {x: mousePosOnShape.x, y: serverState.windowHeight};\r\n if (snappingPossibilitiesToLines.length > 0) {\r\n mousePosOnShape.y = this.absoluteLinePoint1Pos.y\r\n }\r\n this.renderSeamArrowLine(ctx, horizontalLinePoint1, horizontalLinePoint2, mousePos, mousePosOnShape);\r\n }\r\n\r\n renderSeamVerticalIntersection = (ctx) => {\r\n const serverState = store.getState().serverState;\r\n const mousePos = sqftEventManager.getMousePos();\r\n const mousePosOnFiled = getMousePositionOnField(mousePos.x, mousePos.y);\r\n const pos = this.seamTool.__shape.getPosition();\r\n const mousePosOnShape = {x: mousePosOnFiled.x - pos.x, y: mousePosOnFiled.y - pos.y};\r\n this.absoluteLinePoint1Pos = null; //reset minLength for correct calculations without stacking\r\n this.absoluteLinePoint2Pos = null; //reset minLength for correct calculations without stacking\r\n\r\n // vertical line\r\n let verticalLinePoint1 = {x: mousePosOnShape.x, y: -serverState.windowHeight};\r\n let verticalLinePoint2 = {x: mousePosOnShape.x, y: serverState.windowHeight};\r\n let distancesToLines = ShapeHelper.getDistancesToPoint(mousePos);\r\n let snappingPossibilitiesToLines = ShapeHelper.getSnappingPossibilitiesToLines(distancesToLines);\r\n if (snappingPossibilitiesToLines.length > 0) {\r\n //console.log(\"distancesToLines\", distancesToLines);\r\n //console.log(\"getSnappingPossibilitiesToLines\", snappingPossibilitiesToLines);\r\n this.setAbsolutePosFromSnapPossibilities(snappingPossibilitiesToLines, verticalLinePoint1, verticalLinePoint2);\r\n verticalLinePoint1 = this.absoluteLinePoint1Pos;\r\n verticalLinePoint2 = this.absoluteLinePoint2Pos;\r\n }\r\n this.renderSeamDashedLine(ctx, verticalLinePoint1, verticalLinePoint2);\r\n\r\n // horizontal line\r\n let horizontalLinePoint1 = {x: -serverState.windowWidth , y: mousePosOnShape.y};\r\n let horizontalLinePoint2 = {x: serverState.windowWidth, y: mousePosOnShape.y};\r\n if (snappingPossibilitiesToLines.length > 0) {\r\n mousePosOnShape.x = this.absoluteLinePoint1Pos.x\r\n }\r\n this.renderSeamArrowLine(ctx, horizontalLinePoint1, horizontalLinePoint2, mousePos, mousePosOnShape);\r\n };\r\n\r\n setAbsolutePosFromSnapPossibilities = (snapPossibilities, verticalLinePoint1, verticalLinePoint2) => {\r\n if (snapPossibilities.length > 0) {\r\n let scale = sqftConfig.scale;\r\n let absoluteLinePoint1Pos = {...verticalLinePoint1};\r\n let absoluteLinePoint2Pos = {...verticalLinePoint2};\r\n snapPossibilities.forEach((snap) => {\r\n switch (snap.orientation) {\r\n case \"horizontal\":\r\n absoluteLinePoint1Pos.y -= snap.diff / scale\r\n absoluteLinePoint2Pos.y -= snap.diff / scale\r\n break;\r\n case \"vertical\":\r\n absoluteLinePoint1Pos.x -= snap.diff / scale\r\n absoluteLinePoint2Pos.x -= snap.diff / scale\r\n break;\r\n }\r\n this.absoluteLinePoint1Pos = absoluteLinePoint1Pos;\r\n this.absoluteLinePoint2Pos = absoluteLinePoint2Pos;\r\n })\r\n }\r\n }\r\n\r\n renderSeamDashedLine = (ctx, verticalLinePoint1, verticalLinePoint2) => {\r\n let [intersection1, intersection2] = getIntersectionPointsAndLines(\r\n this.seamTool.__shape.getLines(), verticalLinePoint1, verticalLinePoint2\r\n );\r\n ctx.strokeStyle = COLOR_THEMES[sqftConfig.activeTheme].primary;\r\n\r\n if (intersection1 && intersection2) {\r\n let intersectionYPoint1 = intersection1.intersectionCords;\r\n let intersectionYPoint2 = intersection2.intersectionCords;\r\n let intersectionYPoint1PointField = getPointField(intersectionYPoint1.x, intersectionYPoint1.y, this.seamTool.__shape);\r\n let intersectionYPoint2PointField = getPointField(intersectionYPoint2.x, intersectionYPoint2.y, this.seamTool.__shape);\r\n ctx.beginPath();\r\n ctx.setLineDash([10, 10]);\r\n ctx.moveTo(intersectionYPoint1PointField.x , intersectionYPoint1PointField.y);\r\n ctx.lineTo(intersectionYPoint2PointField.x, intersectionYPoint2PointField.y);\r\n ctx.closePath();\r\n ctx.stroke();\r\n ctx.setLineDash([0]);\r\n }\r\n }\r\n\r\n renderSeamArrowLine = (ctx, horizontalLinePoint1, horizontalLinePoint2, mousePos, mousePosOnShape) => {\r\n let mousePosOnShapePointField = getPointField(mousePosOnShape.x, mousePosOnShape.y, this.seamTool.__shape);\r\n let [intersectionXPointAndLine1, intersectionXPointAndLine2] = getClosestIntersectionPoints(\r\n this.seamTool.__shape.getLines(), horizontalLinePoint1, horizontalLinePoint2, mousePosOnShape\r\n );\r\n\r\n if (intersectionXPointAndLine1 && intersectionXPointAndLine2) {\r\n let intersectionXPoint1 = intersectionXPointAndLine1.intersectionCords;\r\n let intersectionXPoint2 = intersectionXPointAndLine2.intersectionCords;\r\n let intersectionXPoint1PointField = getPointField(intersectionXPoint1.x, intersectionXPoint1.y, this.seamTool.__shape);\r\n let intersectionXPoint2PointField = getPointField(intersectionXPoint2.x, intersectionXPoint2.y, this.seamTool.__shape);\r\n ctx.beginPath();\r\n RenderFigures.drawArrow(ctx,\r\n intersectionXPoint1PointField.x,\r\n intersectionXPoint1PointField.y,\r\n mousePosOnShapePointField.x,\r\n mousePosOnShapePointField.y\r\n );\r\n let measurement1Midpoint = getMidPoint(mousePosOnShapePointField, intersectionXPoint1PointField);\r\n let measurement1Distance = getPointDistance(intersectionXPoint1, mousePosOnShape);\r\n RenderFigures.drawArrow(ctx,\r\n mousePosOnShapePointField.x,\r\n mousePosOnShapePointField.y,\r\n intersectionXPoint2PointField.x,\r\n intersectionXPoint2PointField.y\r\n );\r\n let measurement2Midpoint = getMidPoint(mousePosOnShapePointField, intersectionXPoint2PointField);\r\n let measurement2Distance = getPointDistance(intersectionXPoint2, mousePosOnShape);\r\n ctx.closePath();\r\n ctx.stroke();\r\n\r\n this.renderMeasurements(ctx, measurement1Midpoint, measurement1Distance, measurement2Midpoint, measurement2Distance)\r\n }\r\n }\r\n\r\n renderMeasurements = (ctx, measurement1Midpoint, measurement1Distance, measurement2Midpoint, measurement2Distance) => {\r\n let measurement1Pos = getMousePositionOnField(measurement1Midpoint.x, measurement1Midpoint.y);\r\n let measurement2Pos = getMousePositionOnField(measurement2Midpoint.x, measurement2Midpoint.y);\r\n\r\n this.__measurement1.pos.x = measurement1Pos.x;\r\n this.__measurement1.pos.y = measurement1Pos.y;\r\n this.__measurement1.value = Math.round(config.getMeasureMultiplier() * measurement1Distance);\r\n\r\n this.__measurement2.pos.x = measurement2Pos.x;\r\n this.__measurement2.pos.y = measurement2Pos.y;\r\n this.__measurement2.value = Math.round(config.getMeasureMultiplier() * measurement2Distance);\r\n\r\n this.__measurement1.render(ctx);\r\n this.__measurement2.render(ctx);\r\n }\r\n}\r\n\r\nexport default SeamToolRender\r\n","import workspace from \"../../workspace\";\r\nimport RenderParts from \"../../../helpers/renderParts\";\r\nimport RenderFigures from \"../../../helpers/renderFigures\";\r\n\r\nclass ShapeMeasurementArrows {\r\n __shape;\r\n\r\n constructor(shape) {\r\n this.__shape = shape;\r\n }\r\n\r\n import = (data) => {\r\n void data\r\n }\r\n\r\n render = (ctx) => {\r\n if (workspace && workspace.getState().loading) return;\r\n //this.renderDimensionsInsideShape(ctx);\r\n if (!this.__shape.shapeAbsolute.getAbsolutePosition() && !this.__shape.shapeAbsolute.getSnappedWithShape()) {\r\n this.renderDimensionsOutsideShape(ctx);\r\n }\r\n }\r\n\r\n renderMeasurementArrows = (ctx) => {\r\n const points = this.__shape.getPointsPointField();\r\n RenderFigures.drawArrowsAroundPoints(ctx, points, 10)\r\n }\r\n\r\n renderMeasurementLength = (ctx) => {\r\n const points = this.__shape.getPointsPointField();\r\n RenderParts.drawMeasurementAroundPoints(ctx, points);\r\n }\r\n\r\n renderDimensionsOutsideShape = (ctx) => {\r\n ctx.save();\r\n ctx.beginPath();\r\n this.renderMeasurementArrows(ctx);\r\n this.renderMeasurementLength(ctx);\r\n ctx.closePath();\r\n ctx.restore();\r\n }\r\n}\r\n\r\nexport default ShapeMeasurementArrows\r\n","import {RENDER_TEMPLATES} from \"../../../../../constants\";\r\nimport workspace from \"../../workspace\";\r\nimport sqftConfig from \"../../../store/sqftConfig\";\r\nimport COLOR_THEMES from \"../../../store/colorThemes\";\r\nimport store from \"../../../../../../../store\";\r\n\r\nexport default class ShapeEditable {\r\n __shape;\r\n\r\n constructor(shape) {\r\n this.__shape = shape;\r\n }\r\n\r\n render = (ctx, template= RENDER_TEMPLATES.default) => {\r\n if (workspace && workspace.getState().loading) return;\r\n let lines = this.__shape.getLines();\r\n\r\n ctx.beginPath();\r\n for (let i = 0; i < lines.length; i++) {\r\n lines[i].render(ctx, i > 0);\r\n }\r\n if (this.__shape.isHovering() && workspace.getHoverShape() === this.__shape ) {\r\n ctx.strokeStyle = COLOR_THEMES[sqftConfig.activeTheme].active_hover;\r\n } else {\r\n ctx.strokeStyle = COLOR_THEMES[sqftConfig.activeTheme].active;\r\n }\r\n ctx.fillStyle = COLOR_THEMES[sqftConfig.activeTheme].active_disabled;\r\n switch (template) {\r\n case RENDER_TEMPLATES.linesOnly:\r\n ctx.lineWidth = 0;\r\n ctx.closePath();\r\n break;\r\n case RENDER_TEMPLATES.default:\r\n default:\r\n //ctx.fill();\r\n ctx.lineWidth = 2; // Math.ceil(scale);\r\n ctx.closePath();\r\n ctx.stroke();\r\n break;\r\n }\r\n\r\n if (this.__shape.isHovering() && workspace.getHoveredSqftShape() === this.__shape ) {\r\n let sqftMenuState = store.getState().sqftMenuState;\r\n void sqftMenuState;\r\n }\r\n };\r\n\r\n // renderLinesBetweenPoints = (ctx) => {\r\n // ctx.beginPath();\r\n // ctx.lineWidth = lineWidth;\r\n // ctx.strokeStyle = color;\r\n // drawLines(ctx);\r\n //\r\n // ctx.stroke();\r\n // };\r\n}\r\n","import workspace from \"../../workspace\";\r\nimport RenderParts from \"../../../helpers/renderParts\";\r\nimport RenderFigures from \"../../../helpers/renderFigures\";\r\nimport COLOR_THEMES from \"../../../store/colorThemes\";\r\nimport sqftConfig from \"../../../store/sqftConfig\";\r\n\r\nclass ShapeSpacer {\r\n __shape;\r\n\r\n constructor(shape) {\r\n this.__shape = shape;\r\n }\r\n\r\n import = (data) => {\r\n void data\r\n }\r\n\r\n export = () => {\r\n return {\r\n }\r\n }\r\n\r\n render = (ctx, staticOffset = null) => {\r\n if (workspace && workspace.getState().loading) return;\r\n\r\n this.renderBorders(ctx, staticOffset);\r\n if (!this.__shape.shapeAbsolute.getAbsolutePosition() && !this.__shape.shapeAbsolute.getSnappedWithShape()) {\r\n //this.renderCrownMolding(ctx);\r\n this.renderDimensionsOutsideShape(ctx);\r\n }\r\n }\r\n\r\n renderBorders = (ctx,\r\n staticOffset = null,\r\n ) => {\r\n RenderParts.drawSpacerBorders(ctx, staticOffset, this.__shape);\r\n };\r\n\r\n renderDimensionsOutsideShape = (ctx) => {\r\n ctx.save();\r\n ctx.beginPath();\r\n ctx.strokeStyle = COLOR_THEMES[sqftConfig.activeTheme].primary_hover;\r\n this.renderMeasurementArrows(ctx);\r\n this.renderMeasurementLength(ctx);\r\n ctx.closePath();\r\n ctx.restore();\r\n }\r\n\r\n renderMeasurementArrows = (ctx) => {\r\n const points = this.__shape.getPointsPointField();\r\n void ctx; void points;\r\n RenderFigures.drawArrowsAroundPoints(ctx, points, 10)\r\n }\r\n\r\n renderMeasurementLength = (ctx) => {\r\n const points = this.__shape.getPointsPointField();\r\n RenderParts.drawMeasurementAroundPoints(ctx, points);\r\n }\r\n\r\n}\r\n\r\nexport default ShapeSpacer\r\n","import SqftStore from \"../../../store/sqftStore\";\r\nimport sqftSlabManager from \"../../../store/sqftSlabManager\";\r\nimport sqftShapeIntersectionsManager from \"../../../store/sqftShapeIntersectionsManager\";\r\n\r\nexport default class ShapeIntersections {\r\n __shape;\r\n overlappedWithShapeIds = [];\r\n\r\n constructor(shape) {\r\n this.__shape = shape;\r\n }\r\n\r\n setOverlappedWithShapeIds = (ids) => {\r\n this.overlappedWithShapeIds = ids\r\n }\r\n\r\n addOverlappedWithShape = (id) => {\r\n if (!this.overlappedWithShapeIds.includes(id)) {\r\n this.overlappedWithShapeIds.push(id);\r\n }\r\n }\r\n\r\n removeOverlappedWithShape = (id) => {\r\n if (this.overlappedWithShapeIds.includes(id)) {\r\n this.overlappedWithShapeIds = this.overlappedWithShapeIds.filter(overlappedId => id !== overlappedId);\r\n }\r\n }\r\n\r\n handleSlabPlaceholderIntersections = () => {\r\n if (SqftStore.isSlabMode()) {\r\n const slabPlaceHolderShapes = sqftSlabManager.getSlabPlaceHolderShapes();\r\n if (slabPlaceHolderShapes.length) {\r\n\r\n // if (this.__shape.partId === SHAPE_PART_ID.slabPlaceHolder) {\r\n // this.onSlabPlaceHolderMove();\r\n // } else {\r\n // this.onCountertopShapeMove(slabPlaceHolderShapes);\r\n // }\r\n sqftShapeIntersectionsManager.updateShapesIntersections();\r\n sqftShapeIntersectionsManager.updateSlabPlaceholderFeatureId();\r\n\r\n const errorCallback = () => {\r\n this.__shape.shapeMemory.restoreShapePosition();\r\n this.__shape.resetMouseDown();\r\n sqftShapeIntersectionsManager.updateShapesIntersections();\r\n }\r\n\r\n sqftShapeIntersectionsManager.showSlabPlaceHolderErrorMessage(slabPlaceHolderShapes, errorCallback);\r\n }\r\n }\r\n }\r\n\r\n // onSlabPlaceHolderMove = () => {\r\n // const counterTopShapes = sqftShapeManager.getCounterTopShapes();\r\n // let overlapsWithIds = [];\r\n // this.setOverlappedWithShapeIds([]);\r\n //\r\n // for (const counterTopShape of counterTopShapes) {\r\n // const shapeIntersections = ShapeHelper.getTwoShapesIntersections(this.__shape, counterTopShape);\r\n // const shapeIds = Object.keys(shapeIntersections);\r\n // if (shapeIds.length) {\r\n // this.__shape.setFeatureId(_.clone(counterTopShape.featureId))\r\n // overlapsWithIds.push(shapeIds[0]);\r\n // }\r\n // //console.log(\"shapeIntersections\", shapeIntersections);\r\n // }\r\n // this.setOverlappedWithShapeIds(overlapsWithIds);\r\n // }\r\n //\r\n // onCountertopShapeMove = (slabPlaceHolderShapes) => {\r\n // for (const slabPlaceHolderShape of slabPlaceHolderShapes) {\r\n // slabPlaceHolderShape.shapeIntersections.removeOverlappedWithShape(this.__shape.id);\r\n // const shapeIntersections = ShapeHelper.getTwoShapesIntersections(slabPlaceHolderShape, this.__shape);\r\n // //console.log(\"shapeIntersections\", shapeIntersections);\r\n // const shapeIds = Object.keys(shapeIntersections);\r\n // if (shapeIds.length) {\r\n // slabPlaceHolderShape.setFeatureId(_.clone(this.__shape.featureId));\r\n // slabPlaceHolderShape.shapeIntersections.addOverlappedWithShape(+shapeIds[0]);\r\n // }\r\n // }\r\n // }\r\n\r\n\r\n}\r\n","import _ from 'lodash';\r\n\r\nexport default class ShapeMemory {\r\n __shape;\r\n memory = {\r\n pos: {x: 0, y: 0},\r\n slabPos: {x: 0, y: 0},\r\n absolutePos: {x: 0, y: 0}\r\n };\r\n\r\n constructor(shape) {\r\n this.__shape = shape;\r\n }\r\n\r\n rememberShapePosition = () => {\r\n this.memory = {\r\n pos: _.clone(this.__shape.pos),\r\n slabPos: _.clone(this.__shape.slabPos),\r\n shapeSlabAbsolutePos: _.clone(this.__shape.shapeSlab.getAbsolutePosition()),\r\n shapeAbsolutePos: _.clone(this.__shape.shapeAbsolute.getAbsolutePosition())\r\n }\r\n }\r\n\r\n restoreShapePosition = () => {\r\n this.__shape.pos = _.clone(this.memory.pos)\r\n this.__shape.slabPos = _.clone(this.memory.slabPos)\r\n this.__shape.shapeSlab.setAbsolutePos( _.clone(this.memory.shapeSlabAbsolutePos));\r\n this.__shape.shapeAbsolute.setAbsolutePos( _.clone(this.memory.shapeAbsolutePos));\r\n }\r\n}\r\n","import workspace from \"../../workspace\";\r\nimport {isDisabledInPopupShouldBeHidden} from \"../../../../../constants\";\r\nimport {getPointField, isDisabledInPopupWithParents} from \"../../../../../helpers/sqftHelper\";\r\nimport SqftStore from \"../../../store/sqftStore\";\r\nimport config from \"../../../store/sqftConfig\";\r\nimport COLOR_THEMES from \"../../../store/colorThemes\";\r\nimport sqftConfig from \"../../../store/sqftConfig\";\r\nimport sqftEventManager from \"../../../store/sqftEventManager\";\r\nimport BlinkingHighlight from \"../../../helpers/commonParts/blink\";\r\n\r\nexport default class ShapeRender {\r\n __shape;\r\n\r\n constructor(shape) {\r\n this.__shape = shape;\r\n this.blink = new BlinkingHighlight;\r\n }\r\n\r\n render(ctx) {\r\n // if (sqftStore && sqftStore.getState().loading) return;\r\n if (workspace && workspace.getState().loading) {\r\n return\r\n }\r\n if (isDisabledInPopupShouldBeHidden() && isDisabledInPopupWithParents(this)) {\r\n return\r\n }\r\n\r\n const isShowSlabTool = SqftStore.isSlabMode();\r\n const shapeState = this.__shape.getState();\r\n this.renderDevMode(ctx);\r\n\r\n if (isShowSlabTool) {\r\n return this.__shape.shapeSlab.render(ctx);\r\n } else if (shapeState.isPointsMovable) {\r\n return this.__shape.shapeEditable.render(ctx);\r\n } else if (shapeState.isRotatable) {\r\n return this.__shape.shapeRotatable.render(ctx);\r\n } else if (this.__shape.shapeParams !== undefined && this.__shape.shapeParams.shapeCabinet && !this.__shape.shapeParams.isSpacer) {\r\n return this.__shape.shapeCabinet.render(ctx);\r\n } else if (this.__shape.shapeParams !== undefined && this.__shape.shapeParams.isSpacer && this.__shape.shapeSpacer) {\r\n return this.__shape.shapeSpacer.render(ctx);\r\n }\r\n\r\n this.renderRegularShape(ctx);\r\n }\r\n\r\n renderDevMode = (ctx) => {\r\n if (config.isDevMode()) {\r\n // render center pos\r\n ctx.save();\r\n ctx.beginPath();\r\n let pf = getPointField(this.__shape.pos.x, this.__shape.pos.y);\r\n ctx.arc(pf.x, pf.y, 5, 0, 2 * Math.PI);\r\n ctx.stroke();\r\n ctx.closePath();\r\n\r\n ctx.beginPath();\r\n let shapeCenter = this.__shape.getCenter();\r\n const pos = getPointField(shapeCenter.x, shapeCenter.y, this.__shape);\r\n ctx.arc(pos.x, pos.y, 12, 0, 2 * Math.PI);\r\n\r\n ctx.stroke();\r\n ctx.closePath();\r\n ctx.restore();\r\n\r\n // render shape group\r\n if (this.__shape.getSnappedShapeGroup) {\r\n const renderText = this.__shape.getSnappedShapeGroup() + \".group\";\r\n const mText = ctx.measureText(renderText);\r\n ctx.wrapText(renderText, pos.x, pos.y, mText, 16);\r\n }\r\n\r\n // render shape center\r\n // ctx.beginPath();\r\n // let position = this.__shape.getOffset();\r\n // ctx.arc(position.x, position.y, 50, 0, 2 * Math.PI);\r\n //\r\n // ctx.stroke();\r\n // ctx.closePath();\r\n }\r\n }\r\n\r\n renderRegularShape = (ctx) => {\r\n // const scale = sqftConfig.scale;\r\n // const canvas = sqftStore.getCanvas();\r\n const lines = this.__shape.getLines();\r\n const shapeDesign = this.__shape.getDesign();\r\n const shapeColorSet = this.__shape.getColorset();\r\n\r\n ctx.save();\r\n ctx.beginPath();\r\n for (let i = 0; i < lines.length; i++) {\r\n lines[i].render(ctx, i > 0);\r\n }\r\n if (this.__shape.isHovering() && workspace.getHoverShape() === this.__shape) {\r\n ctx.strokeStyle = shapeColorSet ? shapeColorSet.primary_border : COLOR_THEMES[sqftConfig.activeTheme].primary_hover;\r\n } else {\r\n ctx.strokeStyle = shapeColorSet ? shapeColorSet.primary_border : COLOR_THEMES[sqftConfig.activeTheme].primary;\r\n }\r\n ctx.lineWidth = 2; // Math.ceil(scale);\r\n ctx.closePath();\r\n ctx.stroke();\r\n\r\n if (this.__shape.isHoveringOnlyShape()\r\n && workspace.getHoverShape()\r\n && !sqftConfig.highlight.rotateAngle\r\n && ( sqftEventManager.getCursor().indexOf(\"move\") >= 0\r\n || sqftEventManager.getCursor().indexOf(\"rotate-left\") >= 0\r\n || sqftEventManager.getCursor().indexOf(\"delete\") >= 0\r\n )\r\n ) {\r\n if (sqftEventManager.getCursor().indexOf(\"delete\") >= 0\r\n && !workspace.textBoxManager.isBoxActive()\r\n && !this.__shape.getHoverLabel()\r\n ) {\r\n const hoverLine = this.__shape.getHoverSegment(),\r\n hoverPoint = this.__shape.getHoverPointOnClick();\r\n\r\n // if ((hoverLine && hoverLine.getAttachedItems()) || (hoverPoint && (hoverPoint.getAngle() || hoverPoint.getArcLength()))) {\r\n if (hoverLine || hoverPoint) {\r\n ctx.fillStyle = shapeColorSet ? shapeColorSet.primary_hover : shapeDesign.fillColor;\r\n } else {\r\n ctx.fillStyle = shapeDesign.redHoverShapeColor;\r\n }\r\n } else {\r\n ctx.fillStyle = shapeColorSet ? shapeColorSet.primary_hover : shapeDesign.hoverShapeColor;\r\n }\r\n } else {\r\n if (this.blink.isHighlightedLightOn) {\r\n ctx.fillStyle = shapeColorSet ? shapeColorSet.primary_hover : shapeDesign.fillColor;\r\n } else {\r\n ctx.fillStyle = shapeColorSet ? shapeColorSet.primary : shapeDesign.fillColor;\r\n }\r\n }\r\n ctx.fill();\r\n ctx.restore();\r\n\r\n for (let i = 0; i < lines.length; i++) {\r\n lines[i].renderLineField(ctx); // renderLineField should be called after render method and ctx.fill()\r\n }\r\n\r\n // red highlight bumpout\r\n lines.forEach((line) => {\r\n if (line.isWithBumpout()) {\r\n if (sqftEventManager.getCursor().indexOf(\"delete\") >= 0 && line.bumpoutOverlay.isHoveringRect() && !workspace.textBoxManager.isBoxActive()) {\r\n line.bumpoutOverlay.drawBumpoutRect(ctx);\r\n }\r\n }\r\n });\r\n\r\n //green highlight selected part\r\n if (sqftConfig.highlight.rotateAngle) {\r\n // todo fix bumpout rotation and remove this\r\n if (!this.__shape.isWithBumpout() && !this.__shape.isWithBumpout() && !this.__shape.isPointsMoved && this.__shape.rotatedDegrees === 0) {\r\n /////////////////////////////////////////\r\n for (const rotateAnglePart of this.__shape.rotateAngleParts) {\r\n if (this.__shape.isAngleRotatedPartsWithCorner(rotateAnglePart)) {\r\n continue;\r\n }\r\n if (rotateAnglePart.isActive || rotateAnglePart.isHovered) {\r\n this.__shape.renderAnglePartActive(rotateAnglePart, ctx);\r\n }\r\n if (rotateAnglePart.isPulsing) { //green highlight selected part intro\r\n this.__shape.renderAnglePartActive(rotateAnglePart, ctx);\r\n setTimeout(() => {\r\n rotateAnglePart.isPulsing = false;\r\n }, 1000);\r\n }\r\n }\r\n }\r\n }\r\n\r\n //render counter?\r\n // var vertices = [];\r\n // for (var i = 0; i < lines.length; i++) {\r\n // var s = lines[i];\r\n // vertices.push([s.from.x, s.from.y]);\r\n // }\r\n //var newTriangles = earcut([vertices]);\r\n\r\n if (sqftConfig.workspace.debug) {\r\n ctx.beginPath();\r\n // for (var n = 0; n < newTriangles.length; n+=3) {\r\n // var lines = new triangle(newTriangles[n], newTriangles[n+1], newTriangles[n+2]);\r\n // for (let i = 0; i < lines.length; i++) {\r\n // var l = lines[i];\r\n // l.init(this.__shape, true); //initialize as temporary line\r\n // l.render(ctx, false); //render temp line\r\n // }\r\n // }\r\n ctx.lineWidth = 1;\r\n ctx.closePath();\r\n ctx.strokeStyle = \"#FF0000\";\r\n ctx.stroke();\r\n }\r\n //return newTriangles;\r\n };\r\n}\r\n","import {className} from \"../../misc/utils\";\r\n\r\nexport class Exception {\r\n message = '';\r\n\r\n /**\r\n *\r\n * @param message {string}\r\n */\r\n constructor(message) {\r\n this.message = message;\r\n }\r\n\r\n static NotImplemented(message) {\r\n console.error(message || \"Not implemented.\");\r\n }\r\n\r\n static NotImplementedBaseClass(instance) {\r\n console.error(`Not implemented in base class ${className(instance)}`);\r\n }\r\n}\r\n\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport {Vanity} from \"../../parts/vanity\";\r\nimport {createParentPositions} from \"../../constants\";\r\n\r\nexport default class VanityHandle extends IntermediatePart {\r\n\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'vanity_handle';\r\n this.partName = 'Handle';\r\n this.translateId = \"visualizer.bathroom.vanity.vanity_handle\";\r\n this.dbName = \"Vanity Handle\";\r\n this.visible = [Vanity.Types.Custom];\r\n this.canBeDisabled = false;\r\n if (isChild) {\r\n createParentPositions(this);\r\n }\r\n }\r\n\r\n disabledClick() {\r\n this.getParent().toggleVanityParts(this.disabled);\r\n }\r\n\r\n getArrayOfConditions() {\r\n const conditions = super.getArrayOfConditions();\r\n const vanityParent = this.getParent();\r\n conditions.push({\r\n propName: \"VanitySize\",\r\n propValue: vanityParent.counterTopSize(this)\r\n })\r\n conditions.push({\r\n propName: \"CabinetStyle\",\r\n propValue: vanityParent.vanityCabinet && vanityParent.vanityCabinet.activeFeature\r\n && vanityParent.vanityCabinet.activeFeature.metaData[\"CabinetStyle\"]\r\n ? vanityParent.vanityCabinet.activeFeature.metaData[\"CabinetStyle\"]\r\n : \"No handles\" // if no cabinet style - hide handles\r\n });\r\n return conditions\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport {Vanity} from \"../../parts/vanity\";\r\nimport store from \"../../../../../store\";\r\nimport {Layout} from \"../../layout\";\r\nimport {createParentPositions, METADATA, SIDE_POSITIONS, VANITY_TYPES, LOOK_ROOM_TYPES} from \"../../constants\";\r\nimport {updateSinkWithNewFeature} from \"../../../lookNavigation/lookNavigationFunctions\";\r\nimport {getCurrentRoomType} from \"../../../../appLayout\";\r\n\r\nexport default class VanityCabinet extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'vanity_cabinet';\r\n this.partName = 'Vanity Cabinet';\r\n this.translateId = \"visualizer.bathroom.vanity.vanity_cabinet\";\r\n this.dbName = \"Vanitie\";\r\n this.homePageTitle = 'Vanity Bases';\r\n this.visible = [Vanity.Types.Custom];\r\n this.canBeDisabled = true;\r\n this.canUseWizard = true;\r\n if (isChild) {\r\n createParentPositions(this);\r\n }\r\n }\r\n\r\n load(dbFeature) {\r\n if (dbFeature.groupName === \"Vanitie\") {\r\n dbFeature.groupName = \"Vanity\"\r\n }\r\n if (!dbFeature.metaData[\"MatchingFeature\"]) {\r\n dbFeature.metaData[\"MatchingFeature\"] = [METADATA.NO];\r\n }\r\n if (!dbFeature.metaData[\"Side\"]) {\r\n dbFeature.metaData[\"Side\"] = [METADATA.LeftSide];\r\n }\r\n if (Array.isArray(dbFeature.metaData[\"VanitySize\"]) && dbFeature.metaData[\"VanitySize\"][0]) {\r\n dbFeature.metaData[\"VanityWidth\"] = +dbFeature.metaData[\"VanitySize\"][0];\r\n if (dbFeature.metaData[\"VanityWidth\"] === 72) {\r\n dbFeature.metaData[\"VanityWidth\"] = 64;\r\n }\r\n } else if (dbFeature.metaData[\"VanitySize\"]) {\r\n console.log(\"dbFeature.metaData[\\\"VanitySize\\\"] should be an array!\", dbFeature.metaData[\"VanitySize\"]);\r\n }\r\n return super.load(dbFeature);\r\n }\r\n\r\n disabledClick() {\r\n const vanityParent = this.getParent();\r\n if (getCurrentRoomType(vanityParent.layout) === LOOK_ROOM_TYPES.as) {\r\n this.toggleLayerPositions();\r\n [\"drawerPull\", \"vanityLegs\", \"vanityMiddle\"].forEach(name => {\r\n if (vanityParent && vanityParent[name]) {\r\n vanityParent[name].disabled = this.disabled || !vanityParent[name].canBeEnabled(); // true or check if it can be enabled;\r\n }\r\n });\r\n if (this.activeFeature && this.activeFeature.metaData[\"MatchingFeature\"] && this.activeFeature.metaData[\"MatchingFeature\"].includes(METADATA.NO)) {\r\n [\"sink\", \"countertop\", \"vanityPTrap\", \"faucet\"].forEach(name => {\r\n if (vanityParent && vanityParent[name]) {\r\n vanityParent[name].disabled = this.disabled || !vanityParent[name].canBeEnabled(); // true or check if it can be enabled;\r\n }\r\n });\r\n }\r\n }\r\n }\r\n\r\n handleClick(ignoreLocked, updateSink = true) {\r\n const vanityParent = this.getParent().getParent();\r\n vanityParent.vanity_type = VANITY_TYPES.vanity_cabinet;\r\n super.handleClick(ignoreLocked);\r\n if (updateSink) {\r\n updateSinkWithNewFeature(this);\r\n }\r\n vanityParent.updateVanityParts();\r\n }\r\n\r\n // navigationSubItems() {\r\n // return super.navigationSubItemsWithFilter('VanitySize', this.getParent().counterTopSize(this));\r\n // }\r\n\r\n // disabledClick() {\r\n // this.getParent().toggleVanityParts(this.disabled);\r\n // }\r\n\r\n hideLayerCondition() {\r\n const vanityParent = this.getParent();\r\n return (getCurrentRoomType(vanityParent.layout) === LOOK_ROOM_TYPES.as) && (vanityParent.vanity_type !== VANITY_TYPES.vanity_cabinet)\r\n }\r\n\r\n setActiveFeatureByFilter(filterName, filterValue) {\r\n\r\n // console.log('filterName', filterName);\r\n // console.log('filterValue', filterValue);\r\n\r\n const filterGroups = store.getState().filterState.filterGroups;\r\n const group = filterGroups.find(group => group.name === filterName);\r\n const groupId = group.id;\r\n const filterValueId = Layout.getfilterValueIdByValue(groupId, filterValue);\r\n const filteredFeatures = this.features.filter(\r\n feature => feature.dbFeature && feature.dbFeature.filterValueIDs[groupId] && feature.dbFeature.filterValueIDs[groupId].includes(filterValueId)\r\n ); // find among all features only those, who have filter with value === props size\r\n if (!super.tryToSetTheSameFeature(filteredFeatures, null, \"ustom\")) {\r\n this.activeFeature = filteredFeatures[0];\r\n const placeholderAvailableFeatures = filteredFeatures.filter(feature => {\r\n return feature.dbFeature.displayName.includes(\"laceholder\") && feature.dbFeature.displayName.includes(\"ustom\")\r\n });\r\n this.placeholderFeature = placeholderAvailableFeatures[0];\r\n }\r\n }\r\n\r\n // getAvailableFeatures() {\r\n // return this.features.filter(f => f.vanitySize+'in' === this.getParent().counterTopSize(this));\r\n // }\r\n\r\n canDisplayDemoPoint(parentObject) {\r\n if (getCurrentRoomType() === LOOK_ROOM_TYPES.as && parentObject.layerPosition === SIDE_POSITIONS[0]) {\r\n return false\r\n }\r\n return this.getParent().vanity_type === VANITY_TYPES.vanity_cabinet\r\n }\r\n}\r\n","import snakeCase from \"lodash/snakeCase\";\r\nimport {Part} from \"../part\";\r\nimport {PartMenuType} from \"../../../visComponents/constants\";\r\nimport NonVisualizerSubPart from \"../subparts/nonVisualizerSubPart\";\r\n\r\nexport default class Other extends Part {\r\n static id = 'Other';\r\n constructor() {\r\n super(true, false, PartMenuType.Complex);\r\n\r\n this.menuType = PartMenuType.Complex;\r\n this.partName = 'Other';\r\n this.categoryEnabled = false;\r\n }\r\n\r\n load(dbFeature) {\r\n // console.log(\"load other\", dbFeature.groupName);\r\n const partId = snakeCase(dbFeature.groupName);\r\n let relatedItem = this.relatedItems.find(relatedItem => relatedItem.partId === partId);\r\n if (!relatedItem) {\r\n relatedItem = new NonVisualizerSubPart(true, partId, dbFeature.groupName);\r\n this.relatedItems.push(relatedItem);\r\n }\r\n relatedItem.getParent = () => this;\r\n relatedItem.load(dbFeature);\r\n return true\r\n }\r\n\r\n isSubTypeWithItems() {\r\n return false;\r\n }\r\n\r\n handleSubPartClick() {\r\n\r\n }\r\n\r\n}\r\n","import {Part} from \"../part\";\r\nimport {PartMenuType} from \"../../../visComponents/constants\";\r\nimport BackgroundBG from \"../subparts/backgrounds/BackgroundBG\";\r\n\r\nexport default class Background extends Part {\r\n static id = 'Background';\r\n constructor() {\r\n super(true, false, PartMenuType.Complex);\r\n\r\n this.menuType = PartMenuType.Complex;\r\n this.partName = 'Background';\r\n this.categoryEnabled = false;\r\n this.relatedGroupNames = [\"Background\"];\r\n }\r\n\r\n load(dbFeature, loadFeature = true) {\r\n let relatedItemName = \"\",\r\n RelatedItemClass = null;\r\n switch (dbFeature.groupName) {\r\n case \"Background\":\r\n switch (true) {\r\n case (!loadFeature || (dbFeature.displayName && dbFeature.displayName.includes(\"Background - BG\"))):\r\n relatedItemName = \"backgroundBG\";\r\n RelatedItemClass = BackgroundBG;\r\n break;\r\n }\r\n break;\r\n default:\r\n break;\r\n }\r\n return this.loadCommon(relatedItemName, RelatedItemClass, dbFeature, loadFeature)\r\n }\r\n\r\n isSubTypeWithItems() {\r\n return false;\r\n }\r\n\r\n handleSubPartClick() {\r\n\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport {Shower} from \"../../parts/shower\";\r\nimport {IS_BATHROOM_OLD_BV_SCENE} from \"../../../../../config\";\r\n\r\nexport default class BackgroundBG extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'background_bg';\r\n this.partName = 'Background BG';\r\n this.windowNeededLayouts = [1];\r\n }\r\n\r\n getArrayOfConditions() {\r\n const layout = this.getParent().layout;\r\n let conditions = super.getArrayOfConditions(); //roomLayout\r\n // const windowParent = layout.parts[WindowParent.id];\r\n const showerParent = layout.parts[Shower.id];\r\n\r\n // const windowBody = windowParent.windowBody;\r\n // if (windowBody && this.windowNeededLayouts.includes(layout.type)) {\r\n // conditions.push({\r\n // propName: \"Window\",\r\n // propValue: (windowBody && windowBody.activeFeature && windowBody.disabled) ? \"Off\" : \"On\"\r\n // })\r\n // }\r\n\r\n if (showerParent && showerParent.showerSize() && !IS_BATHROOM_OLD_BV_SCENE) {\r\n conditions.push({\r\n propName: \"ShowerSize\",\r\n propValue: showerParent.showerSize()\r\n })\r\n }\r\n\r\n return conditions\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n if (zIndexes && this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndexes.Background.BackgroundBG;\r\n }\r\n }\r\n}\r\n","import TubCommon from \"./tubCommon\";\r\n\r\nexport default class BathTubLiner extends TubCommon {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = \"bathtub_liner\";\r\n this.bottomTubId = \"bathtub_liner\";\r\n this.visible = true;\r\n this.partName = \"Tub Liner\";\r\n this.translateId = \"visualizer.bathroom.shower_tub_combo.bathtub_liner\";\r\n this.dbName = \"Bathtub Liner\";\r\n this.isStoneFeature = false;\r\n this.disableOnHomeSections = true;\r\n }\r\n}\r\n","import TubCommon from \"./tubCommon\";\r\nimport {IS_LIXIL_SERVERS} from \"../../../../../config\";\r\n\r\nexport default class ReplacementTub extends TubCommon {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'replacement_tub';\r\n this.bottomTubId = \"replacement_tub\";\r\n this.visible = true;\r\n this.partName = 'Replacement Tub';\r\n this.translateId = \"visualizer.bathroom.shower_tub_combo.replacement_tub\";\r\n this.isStoneFeature = false;\r\n this.disableOnHomeSections = true;\r\n this.canBeDisabled = IS_LIXIL_SERVERS; // request by Lixil\r\n if (isChild) {\r\n this.oneLayerPosition = true;\r\n }\r\n }\r\n\r\n navigationSubItems(filters, searchText) {\r\n return this.navigationSubItemsWithSides(filters, searchText);\r\n }\r\n}\r\n","import TubCommon from \"./tubCommon\";\r\nimport {getSkuWithoutDot} from \"../../../lookNavigation/lookFunctions2\";\r\n\r\nexport default class WalkInTub extends TubCommon {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'walk_in_tub';\r\n this.bottomTubId = \"walk_in_tub\";\r\n this.visible = true;\r\n this.partName = 'Walk In Tub';\r\n this.translateId = \"visualizer.bathroom.shower_tub_combo.walk_in_tub\";\r\n this.isStoneFeature = false;\r\n if (isChild) {\r\n this.oneLayerPosition = true;\r\n }\r\n }\r\n\r\n load(dbFeature) {\r\n dbFeature.metaData[\"layerPosition\"] = dbFeature.metaData[\"Side\"] ? dbFeature.metaData[\"Side\"][0] : \"\";\r\n if (dbFeature.metaData[\"ActualDisplayedName\"] && dbFeature.metaData[\"ActualDisplayedName\"][0]) {\r\n dbFeature.metaData[\"ActualDisplayedName\"] = getSkuWithoutDot(dbFeature.metaData[\"ActualDisplayedName\"][0]);\r\n } else {\r\n dbFeature.metaData[\"ActualDisplayedName\"] = getSkuWithoutDot(dbFeature.sharedFeatureName);\r\n }\r\n return super.load_(dbFeature, new WalkInTub());\r\n }\r\n\r\n navigationSubItems(filters, searchText) {\r\n return this.navigationSubItemsWithSides(filters, searchText);\r\n }\r\n\r\n}\r\n","import TubCommon from \"./tubCommon\";\r\n\r\nexport default class JettedTub extends TubCommon {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'jetted_tub';\r\n this.bottomTubId = \"jetted_tub\";\r\n this.visible = true;\r\n this.partName = 'Jetted Tub';\r\n this.translateId = \"visualizer.bathroom.shower_tub_combo.jetted_tub\";\r\n this.isStoneFeature = false;\r\n this.disableOnHomeSections = true;\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\n\r\nexport default class WallConfiguration extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'wall_configuration';\r\n this.partName = 'Wall Configuration';\r\n this.translateId = \"visualizer.bathroom.shower_tub_combo.wall_configuration\";\r\n this.visible = true;\r\n this.isStoneFeature = false;\r\n this.disableOnHomeSections = true;\r\n this.createdManually = true;\r\n }\r\n\r\n // setLayers(layout) {\r\n // this.activeFeature = this.features.find((feature) => {\r\n // return feature.partName === this.getParent().showerBody.activeFeature.partName // set the same glass as Body\r\n // });\r\n // return super.setLayers(layout);\r\n // }\r\n\r\n handleClick() {\r\n super.handleClick();\r\n const showerTubComboParent = this.getParent().getParent();\r\n showerTubComboParent.setShowerTubCombo();\r\n showerTubComboParent.setShowerSize(this.leftShowerWallType, this.showerComboSize);\r\n this.featureClicked();\r\n }\r\n\r\n setZIndex() {}\r\n}\r\n","import TubCommon from \"./tubCommon\";\r\n\r\nexport default class WalkInTubFixture extends TubCommon {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'walk_in_tub_fixture';\r\n this.visible = true;\r\n this.partName = 'Walk In Tub Fixture';\r\n this.translateId = \"visualizer.bathroom.shower_tub_combo.walk_in_tub_fixture\";\r\n this.bottomTubId = \"walk_in_tub\";\r\n this.canBeDisabled = true;\r\n }\r\n\r\n getArrayOfConditions() {\r\n let conditions = super.getArrayOfConditions(); //roomLayout\r\n const showerComboParent = this.getParent();\r\n if (showerComboParent.walkInTub && showerComboParent.walkInTub.activeFeature\r\n && !showerComboParent.walkInTub.disabled) {\r\n conditions.push({\r\n propName: \"MatchingFeature\",\r\n propValue: showerComboParent.walkInTub.activeFeature.metaData[\"ActualDisplayedName\"]\r\n });\r\n }\r\n return conditions\r\n }\r\n\r\n}\r\n","import TubCommon from \"./tubCommon\";\r\nimport {Shower} from \"../../parts/shower\";\r\nimport {createParentPositions, LOOK_ROOM_TYPES, METADATA, ShowerHeadTypes} from \"../../constants\";\r\nimport {getCurrentRoomType} from \"../../../../appLayout\";\r\n\r\nexport default class ReplacementTubFixture extends TubCommon {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'replacement_tub_fixture';\r\n this.visible = true;\r\n this.partName = 'Replacement Tub Fixture';\r\n this.dbName = 'Replacement tub Fixture';\r\n this.translateId = \"visualizer.bathroom.shower_tub_combo.replacement_tub_fixture\";\r\n this.bottomTubId = \"replacement_tub\";\r\n this.canBeDisabled = true;\r\n if (isChild) {\r\n createParentPositions(this);\r\n }\r\n }\r\n\r\n load(dbFeature) {\r\n if (!dbFeature.metaData[\"Side\"] || (Array.isArray(dbFeature.metaData[\"Side\"]) && dbFeature.metaData[\"Side\"][0] === \"0\")) {\r\n dbFeature.metaData[\"Side\"] = [METADATA.LeftSide];\r\n }\r\n dbFeature.metaData[\"layerPosition\"] = dbFeature.metaData[\"Side\"] ? dbFeature.metaData[\"Side\"][0] : \"\";\r\n if (Array.isArray(dbFeature.metaData[\"ShowerSize\"]) && dbFeature.metaData[\"ShowerSize\"].includes(\"0\")) {\r\n dbFeature.metaData[\"ShowerSize\"] = [METADATA.ALL];\r\n }\r\n return super.load(dbFeature)\r\n }\r\n\r\n handleClick() {\r\n const showerTubComboParent = this.getParent().getParent();\r\n const showerParent = showerTubComboParent.layout.parts[\"Shower\"];\r\n showerParent.setShowerHeadType(ShowerHeadTypes.shower_fixture);\r\n if (getCurrentRoomType() === LOOK_ROOM_TYPES.as) {\r\n if (Array.isArray(this.metaData[\"MountType\"]) && this.metaData[\"MountType\"].includes(\"S\")\r\n && ((showerParent.shower_head_type === ShowerHeadTypes.shower_arm && showerParent.showerArm && !showerParent.showerArm.disabled)\r\n || (showerParent.shower_head_type === ShowerHeadTypes.shower_head_bundle && showerParent.showerHeadBundle && !showerParent.showerHeadBundle.disabled))) {\r\n // store.dispatch(setLookOverlayOpened(LOOK_OVERLAYS.notCompatiblePopup));\r\n // return;\r\n this.applyFeatureIfNotCompatible();\r\n }\r\n }\r\n super.handleClick();\r\n }\r\n\r\n applyFeatureIfNotCompatible() {\r\n const showerParent = this.getParent().getParent();\r\n if (showerParent.showerArm) {\r\n showerParent.showerArm.disabled = true;\r\n }\r\n if (showerParent.showerHead) {\r\n showerParent.showerHead.disabled = true;\r\n }\r\n if (showerParent.showerHeadBundle) {\r\n showerParent.showerHeadBundle.disabled = true;\r\n }\r\n }\r\n\r\n hideLayerCondition() {\r\n const showerTubComboParent = this.getParent();\r\n const showerParent = showerTubComboParent.layout.parts[\"Shower\"];\r\n if (!showerTubComboParent.showerTubComboIsActive || showerTubComboParent.bottomTub === \"walk_in_tub\") { // they don't have repl tub fixture\r\n return false\r\n }\r\n return showerParent.shower_head_type !== ShowerHeadTypes.shower_fixture && this.activeFeature\r\n }\r\n\r\n getArrayOfConditions() {\r\n let conditions = super.getArrayOfConditions(); //roomLayout\r\n // const showerComboParent = this.getParent();\r\n // if (showerComboParent.replacementTub && showerComboParent.replacementTub.activeFeature\r\n // && !showerComboParent.replacementTub.disabled) {\r\n // conditions.push({\r\n // propName: \"MatchingFeature\",\r\n // propValue: showerComboParent.replacementTub.activeFeature.metaData[\"ActualDisplayedName\"]\r\n // });\r\n // } else if (showerComboParent.walkInTub && showerComboParent.walkInTub.activeFeature\r\n // && !showerComboParent.walkInTub.disabled) {\r\n // conditions.push({\r\n // propName: \"MatchingFeature\",\r\n // propValue: showerComboParent.walkInTub.activeFeature.metaData[\"ActualDisplayedName\"]\r\n // });\r\n // }\r\n const layout = this.getParent().layout;\r\n const showerParent = layout.parts[Shower.id];\r\n const showerSize = showerParent.showerSize();\r\n if (showerParent && showerSize) {\r\n conditions.push({\r\n propName: \"ShowerSize\",\r\n propValue: showerSize\r\n });\r\n }\r\n return conditions\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport {METADATA, LOOK_ROOM_TYPES, ShowerHeadTypes, createParentPositions, ShowerComboTubType} from \"../../constants\";\r\nimport {ShowerTubCombo} from \"../../parts/showerTubCombo\";\r\nimport {getCurrentRoomType} from \"../../../../appLayout\";\r\nimport {IS_LIXIL_SERVERS} from \"../../../../../config\";\r\n// import {setLookOverlayOpened} from \"../../../../../actions/lookFunctions\";\r\n// import store from \"../../../../../store\";\r\n\r\nexport default class ShowerFixture extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'shower_fixture';\r\n this.partName = 'Fixture';\r\n this.translateId = \"visualizer.bathroom.shower.shower_fixture\";\r\n this.dbName = 'Shower Fixture';\r\n this.layerPriority = 4;\r\n this.canBeDisabled = true;\r\n if (isChild) {\r\n createParentPositions(this);\r\n }\r\n }\r\n\r\n load(dbFeature) {\r\n if (!dbFeature.metaData[\"Side\"] || (Array.isArray(dbFeature.metaData[\"Side\"]) && dbFeature.metaData[\"Side\"][0] === \"0\")) {\r\n dbFeature.metaData[\"Side\"] = [METADATA.LeftSide];\r\n }\r\n dbFeature.metaData[\"layerPosition\"] = dbFeature.metaData[\"Side\"] ? dbFeature.metaData[\"Side\"][0] : \"\";\r\n if (dbFeature.isFromAsRoom) {\r\n // Eugene Balan: добавил для Shower Fixture в метадату MountType значения для бандлов\r\n // S - прячем эти группы Shower Arm, Shower Head (т.к. они уже включены в набор)\r\n // T - показываем только если включен Replacement Tub + тоже что и S + прячем Tub Spout\r\n // 0 - можем показывать группы Shower Arm, Shower Head, Tub Spout (если включен Replacement Tub)\r\n // 0 - Hand Shower Kit должен показываться вместе с shower fixture у которых MountType: 0\r\n // if (Array.isArray(dbFeature.metaData[\"MountType\"]) && !dbFeature.metaData[\"MountType\"].includes(\"T\")) {\r\n // dbFeature.metaData[\"MountType\"].push(METADATA.ALL)\r\n // }\r\n if (!Array.isArray(dbFeature.metaData[\"MountType\"])) {\r\n console.log(\"alarm, alarm , this shower fixture has no MountType metadata!\", dbFeature);\r\n }\r\n if (Array.isArray(dbFeature.metaData[\"ShowerSize\"]) && dbFeature.metaData[\"ShowerSize\"].includes(\"0\")) {\r\n dbFeature.metaData[\"ShowerSize\"] = [METADATA.ALL];\r\n }\r\n }\r\n return super.load(dbFeature)\r\n }\r\n\r\n handleClick() {\r\n const showerParent = this.getParent().getParent();\r\n showerParent.setShowerHeadType(ShowerHeadTypes.shower_fixture);\r\n if (getCurrentRoomType() === LOOK_ROOM_TYPES.as) {\r\n if (Array.isArray(this.metaData[\"MountType\"]) && this.metaData[\"MountType\"].includes(\"S\")\r\n && ((showerParent.shower_head_type === ShowerHeadTypes.shower_arm && showerParent.showerArm && !showerParent.showerArm.disabled)\r\n || (showerParent.shower_head_type === ShowerHeadTypes.shower_head_bundle && showerParent.showerHeadBundle && !showerParent.showerHeadBundle.disabled))) {\r\n // store.dispatch(setLookOverlayOpened(LOOK_OVERLAYS.notCompatiblePopup));\r\n // return;\r\n this.applyFeatureIfNotCompatible();\r\n }\r\n }\r\n super.handleClick();\r\n }\r\n\r\n hideLayerCondition() {\r\n const showerParent = this.getParent();\r\n const showerTubComboParent = showerParent.layout.parts[\"Shower Tub Combo\"];\r\n if (showerTubComboParent && showerTubComboParent.showerTubComboIsActive\r\n && showerTubComboParent.bottomTub !== \"walk_in_tub\" && !IS_LIXIL_SERVERS) { // they don't have repl tub fixture\r\n return true\r\n }\r\n return showerParent.shower_head_type !== ShowerHeadTypes.shower_fixture && this.activeFeature\r\n }\r\n\r\n applyFeatureIfNotCompatible() {\r\n const showerParent = this.getParent().getParent();\r\n if (showerParent.showerArm) {\r\n showerParent.showerArm.disabled = true;\r\n }\r\n if (showerParent.showerHead) {\r\n showerParent.showerHead.disabled = true;\r\n }\r\n if (showerParent.showerHeadBundle) {\r\n showerParent.showerHeadBundle.disabled = true;\r\n }\r\n }\r\n\r\n getArrayOfConditions() {\r\n const showerParent = this.getParent();\r\n if (getCurrentRoomType(showerParent.layout) === LOOK_ROOM_TYPES.as) {\r\n const showerComboParent = showerParent.layout.parts[ShowerTubCombo.id];\r\n\r\n let conditions = super.getArrayOfConditions(); //roomLayout\r\n const showerSize = showerParent.showerSize();\r\n if (showerSize) {\r\n conditions.push({\r\n propName: \"ShowerSize\",\r\n propValue: showerSize\r\n })\r\n }\r\n conditions.push({\r\n propName: \"MountType\",\r\n propValue: (showerComboParent && showerParent.showerTubComboIsActive()\r\n && showerComboParent.bottomTub === ShowerComboTubType.replacement_tub) ? \"T\" : \"S\"\r\n })\r\n return conditions\r\n }\r\n return super.getArrayOfConditions()\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport Walls from \"../../parts/walls\";\r\n\r\nexport default class ShowerScreen extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'shower_screen';\r\n this.partName = 'Shower Screen';\r\n this.translateId = \"visualizer.bathroom.shower.shower_screen\";\r\n this.layerPriority = 12;\r\n this.canBeDisabled = true;\r\n }\r\n\r\n handleClick() {\r\n const wallParent = this.getParent().getParent().layout.parts[Walls.id];\r\n if (wallParent && wallParent.splitWall) {\r\n wallParent.splitWall.disabled = true;\r\n }\r\n super.handleClick();\r\n }\r\n\r\n setLayers(layout) {\r\n const wallParent = layout.parts[Walls.id];\r\n if (wallParent && wallParent.splitWall && wallParent.splitWall.activeFeature && !wallParent.splitWall.disabled) {\r\n super.hideLayers();\r\n return;\r\n }\r\n return super.setLayers(layout);\r\n }\r\n\r\n}\r\n","import WallCommon from \"./wallCommon\";\r\nimport {createPageToLoadArray} from \"../../constants\";\r\n\r\nexport default class LeftWall extends WallCommon {\r\n constructor(isChild, partNumber = 0) {\r\n super(isChild);\r\n this.partNumber = partNumber;\r\n this.partId = 'left_wall';\r\n this.partName = 'Left Wall';\r\n this.dbName = 'Left Wall';\r\n this.translateId = \"visualizer.bathroom.walls.left_wall\";\r\n this.activeFeatureBeforeAllWalls = null;\r\n this.allWallsApplied = true;\r\n this.isStoneFeature = true;\r\n this.hasAdditionalParts = true;\r\n this.additionalPartPartId = \"left_wall_crop\";\r\n if (isChild) {\r\n createPageToLoadArray(this);\r\n }\r\n }\r\n\r\n load(dbFeature) {\r\n const partNumber = dbFeature.groupName === this.dbName ? 1 : 2;\r\n return super.load_(dbFeature, new LeftWall(false, partNumber),\r\n true, partNumber === 1 ? 'features' : 'featuresParts');\r\n }\r\n\r\n}\r\n","import WallCommon from \"./wallCommon\";\r\nimport {createPageToLoadArray} from \"../../constants\";\r\n\r\nexport default class RightWall extends WallCommon {\r\n constructor(isChild, partNumber = 0) {\r\n super(isChild);\r\n this.partNumber = partNumber;\r\n this.partId = 'right_wall';\r\n this.partName = 'Right Wall';\r\n this.dbName = 'Right Wall';\r\n this.translateId = \"visualizer.bathroom.walls.right_wall\";\r\n this.activeFeatureBeforeAllWalls = null;\r\n this.allWallsApplied = true;\r\n this.isStoneFeature = true;\r\n this.hasAdditionalParts = true;\r\n this.additionalPartPartId = \"right_wall_crop\";\r\n if (isChild) {\r\n createPageToLoadArray(this);\r\n }\r\n }\r\n\r\n load(dbFeature) {\r\n const partNumber = dbFeature.groupName === this.dbName ? 1 : 2;\r\n return super.load_(dbFeature, new RightWall(false, partNumber),\r\n true, partNumber === 1 ? 'features' : 'featuresParts');\r\n }\r\n\r\n}\r\n\r\n","import WallCommon from \"./wallCommon\";\r\nimport {createPageToLoadArray} from \"../../constants\";\r\n\r\nexport default class CenterWall extends WallCommon {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'center_wall';\r\n this.partName = 'Center Wall';\r\n this.translateId = \"visualizer.bathroom.walls.center_wall\";\r\n this.activeFeatureBeforeAllWalls = null;\r\n this.allWallsApplied = true;\r\n this.isStoneFeature = true;\r\n if (isChild) {\r\n createPageToLoadArray(this);\r\n }\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n if(zIndexes) {\r\n const zIndex = zIndexes.Background.CenterWall;\r\n if (this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndex;\r\n }\r\n }\r\n }\r\n}\r\n","import WallCommon from \"./wallCommon\";\r\nimport {createPageToLoadArray} from \"../../constants\";\r\n\r\nexport default class BackWall extends WallCommon {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'back_wall';\r\n this.partName = 'Back Wall';\r\n this.translateId = \"visualizer.bathroom.walls.back_wall\";\r\n this.activeFeatureBeforeAllWalls = null;\r\n this.allWallsApplied = true;\r\n this.isStoneFeature = true;\r\n if (isChild) {\r\n createPageToLoadArray(this);\r\n }\r\n }\r\n}\r\n","import WallCommon from \"./wallCommon\";\r\n\r\nexport default class Ceiling extends WallCommon {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'walls_ceiling';\r\n this.partName = 'Ceiling';\r\n this.translateId = \"visualizer.kitchen.walls.walls_ceiling\";\r\n this.isStoneFeature = true;\r\n }\r\n}\r\n","import WallCommon from \"./wallCommon\";\r\nimport {createPageToLoadArray} from \"../../constants\";\r\n\r\nexport default class FrontWall extends WallCommon {\r\n constructor(isChild, partNumber = 0) {\r\n super(isChild);\r\n this.partNumber = partNumber;\r\n this.partId = 'front_wall';\r\n this.partName = 'Front Wall';\r\n this.dbName = 'Front Wall';\r\n this.translateId = \"visualizer.bathroom.walls.front_wall\";\r\n this.activeFeatureBeforeAllWalls = null;\r\n this.allWallsApplied = true;\r\n this.isStoneFeature = true;\r\n this.hasAdditionalParts = true;\r\n this.additionalPartPartId = \"front_wall_crop\";\r\n if (isChild) {\r\n createPageToLoadArray(this);\r\n }\r\n }\r\n\r\n load(dbFeature) {\r\n const partNumber = dbFeature.groupName === this.dbName ? 1 : 2;\r\n return super.load_(dbFeature, new FrontWall(false, partNumber),\r\n true, partNumber === 1 ? 'features' : 'featuresParts');\r\n }\r\n\r\n}\r\n","import WallCommon from \"./wallCommon\";\r\nimport {Shower} from \"../../parts/shower\";\r\nimport {createPageToLoadArray} from \"../../constants\";\r\n\r\nexport default class SplitWall extends WallCommon {\r\n constructor(isChild, partNumber = 0) {\r\n super(isChild);\r\n this.partNumber = partNumber;\r\n this.partId = 'split_wall';\r\n this.partName = 'Split Wall';\r\n this.translateId = \"visualizer.bathroom.walls.split_wall\";\r\n this.activeFeatureBeforeAllWalls = null;\r\n this.allWallsApplied = true;\r\n this.isStoneFeature = true;\r\n // this.hasAdditionalParts = true;\r\n // this.additionalPartPartId = \"split_wall_crop\";\r\n if (isChild) {\r\n createPageToLoadArray(this);\r\n }\r\n }\r\n\r\n handleClick() {\r\n const showerParent = this.getParent().getParent().layout.parts[Shower.id];\r\n if (showerParent && showerParent.showerScreen) {\r\n showerParent.showerScreen.disabled = true;\r\n }\r\n super.handleClick();\r\n }\r\n\r\n // setLayers(layout) { // we can't enable it since nothing will be selected on the very first load\r\n // const wallParent = layout.parts[Shower.id];\r\n // if (wallParent && wallParent.showerScreen && !wallParent.showerScreen.disabled) {\r\n // super.hideLayers();\r\n // return;\r\n // }\r\n // return super.setLayers(layout);\r\n // }\r\n\r\n}\r\n\r\n","import WallCommon from \"./wallCommon\";\r\nimport {createPageToLoadArray} from \"../../constants\";\r\n\r\nexport default class LeftWallSplitter extends WallCommon {\r\n constructor(isChild, partNumber = 0) {\r\n super(isChild);\r\n this.partNumber = partNumber;\r\n this.partId = 'left_wall_splitter';\r\n this.partName = 'Left Wall Splitter';\r\n this.translateId = \"visualizer.bathroom.walls.left_wall_splitter\";\r\n this.activeFeatureBeforeAllWalls = null;\r\n this.allWallsApplied = true;\r\n this.isStoneFeature = true;\r\n // this.hasAdditionalParts = true;\r\n // this.additionalPartPartId = \"split_wall_crop\";\r\n if (isChild) {\r\n createPageToLoadArray(this);\r\n }\r\n }\r\n}\r\n\r\n","import WallCommon from \"./wallCommon\";\r\n\r\nexport default class CeilingPanels extends WallCommon {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'ceiling_panels';\r\n this.partName = 'Ceiling Panels';\r\n this.translateId = \"visualizer.bathroom.ceiling_panels\";\r\n this.isStoneFeature = true;\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\n\r\nexport default class ShowerGlass extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'shower_glass';\r\n this.partName = 'Shower Glass';\r\n this.translateId = \"visualizer.bathroom.shower.shower_glass\";\r\n this.layerPriority = 12;\r\n this.canBeDisabled = true;\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport {Vanity} from \"../../parts/vanity\";\r\n\r\nimport {LayoutType} from \"../../constants\";\r\nimport {ShowerTubCombo} from \"../../parts/showerTubCombo\";\r\nimport {\r\n custom30in15X4Shower,\r\n custom30in30X8Shower,\r\n custom30inPonyShower,\r\n custom60in15X4Shower,\r\n custom60in30X8Shower,\r\n custom60inPonyShower\r\n} from \"../../../../bvComponent/core/assets\";\r\n\r\nexport default class ShowerBody extends IntermediatePart {\r\n\r\n constructor(isChild, partNumber = 0) {\r\n super(isChild);\r\n this.partId = 'shower_body';\r\n this.partName = 'Shower Body';\r\n this.translateId = \"visualizer.bathroom.shower.shower_body\";\r\n this.homePageTitle = 'Shower Doors & Glass';\r\n this.partNumber = partNumber;\r\n this.activeFeatureParts = [];\r\n this.canBeDisabled = false;\r\n this.placeholderChanged = true; // never show placeholder to body\r\n this.firstClick = {\r\n \"0\": true // never show placeholder to body\r\n }\r\n this.layerPriority = 1;\r\n this.createdManually = true;\r\n }\r\n\r\n load(dbFeature) {\r\n const loadedShowerBody = super.load_(dbFeature, new ShowerBody());\r\n if (loadedShowerBody) { // it can be false (just skip it)\r\n const featureName = loadedShowerBody.dbFeature.sharedFeatureName;\r\n loadedShowerBody.featureName = featureName;\r\n loadedShowerBody.showerBodyType = 'Custom';\r\n loadedShowerBody.showerDimensions = this.loadShowerDimensions(featureName);\r\n loadedShowerBody.metaData = this.loadShowerMetaData(featureName, loadedShowerBody.showerDimensions);\r\n loadedShowerBody.showerBodyId = featureName.toLowerCase().replace(/ /gi, \"-\");\r\n loadedShowerBody.notAvailableInVisualizer = false;\r\n if (!loadedShowerBody.dbFeature.thumbnailUrl) {\r\n loadedShowerBody.customThumbnail = this.loadThumbnail(featureName)\r\n }\r\n }\r\n return loadedShowerBody\r\n }\r\n\r\n loadShowerDimensions(featureName = this.activeFeature.featureName) {\r\n switch (true) {\r\n case featureName.includes(\"15X4\"):\r\n return \"15X4\"\r\n case featureName.includes(\"Pony\"):\r\n return \"Pony\"\r\n case featureName.includes(\"30X8\"):\r\n default:\r\n return \"30X8\"\r\n }\r\n }\r\n\r\n loadShowerMetaData(featureName = this.activeFeature.featureName, showerDimensions) {\r\n const featureNameSplitted = featureName.split(\"in\")[0];\r\n return {\r\n \"ShowerSize\": featureNameSplitted.length > 1 ? [featureNameSplitted.substr(featureNameSplitted.length - 2)] : ['60'],\r\n \"CountertopSize\": showerDimensions === \"30X8\" ? [\"72in\"] : [\"20in\", \"24in\", \"30in\", \"36in\", \"48in\", \"60in\"]\r\n }\r\n }\r\n\r\n loadThumbnail(featureName = this.activeFeature.featureName) {\r\n switch (true) {\r\n case featureName.includes(\"15X4\"):\r\n return featureName.includes(\"30in\") ? custom30in15X4Shower : custom60in15X4Shower\r\n case featureName.includes(\"Pony\"):\r\n return featureName.includes(\"30in\") ? custom30inPonyShower : custom60inPonyShower\r\n case featureName.includes(\"30X8\"):\r\n default:\r\n return featureName.includes(\"30in\") ? custom30in30X8Shower : custom60in30X8Shower\r\n }\r\n }\r\n\r\n handleClick() {\r\n const parent = this.getParent();\r\n if (parent.getParent && parent.getParent()) {\r\n super.handleClick();\r\n parent.activeFeatureParts = parent.setActiveFeatureParts();\r\n } else {\r\n parent.showerBody.activeFeature = this;\r\n }\r\n this.getParent().showerBodySelectedByUser = true;\r\n const shower = this.getParent().layout ? this.getParent() : this.getParent().getParent(); // workaround for complete & custom click\r\n if (shower.showerTubComboIsActive) {\r\n const comboPart = shower.layout.parts[ShowerTubCombo.id];\r\n comboPart.showerTubComboIsActive = false;\r\n }\r\n this.featureClicked();\r\n }\r\n\r\n disabledClick() {\r\n const showerParent = this.getParent();\r\n showerParent.relatedItems.forEach((relItem) => {\r\n relItem.disabled = this.disabled;\r\n if (relItem.activeFeatureParts && relItem.activeFeatureParts.length) {\r\n relItem.activeFeatureParts.forEach((activeFeaturePart) => {\r\n if (activeFeaturePart) {\r\n activeFeaturePart.disabled = this.disabled\r\n }\r\n });\r\n }\r\n });\r\n if (showerParent.layout && showerParent.showerTubComboIsActive) {\r\n const comboPart = showerParent.layout.parts[ShowerTubCombo.id];\r\n comboPart.showerTubComboIsActive = false;\r\n }\r\n this.activeFeatureParts.forEach((activeFeaturePart) => {\r\n activeFeaturePart.disabled = this.disabled\r\n });\r\n const wallParent = showerParent.layout.parts.Walls;\r\n wallParent.wallExL.disabled = this.disabled;\r\n // wallParent.wallExR.disabled = this.disabled;\r\n\r\n const bathtubParent = showerParent.layout.parts.Bathtub;\r\n\r\n if (showerParent.layout.type === LayoutType.Small && !this.disabled && bathtubParent) { // switch off all bathtub features\r\n if (bathtubParent.bathTubBody) {\r\n bathtubParent.bathTubBody.disabled = true;\r\n }\r\n if (bathtubParent.bathTubBody) {\r\n bathtubParent.bathTubBase.disabled = true;\r\n bathtubParent.bathTubBase.disabledClick();\r\n }\r\n }\r\n }\r\n\r\n availableFeatures(filters) {\r\n const layout = this.getParent().layout;\r\n const filteredAvailableFeatures = filters ? super.getFilteredFeaturesByFilters(filters) : this.features;\r\n const counterTopSize = layout.parts[Vanity.id].counterTopSize(this);\r\n return filteredAvailableFeatures.filter((feature) => {\r\n if (counterTopSize === '72in' && layout.type === 1) {\r\n return feature.showerDimensions === \"30X8\" || feature.showerDimensions === \"Pony\"\r\n }\r\n return true\r\n })\r\n }\r\n\r\n getArrayOfConditions() {\r\n return []\r\n }\r\n\r\n setActiveFeatureParts() {\r\n const activeFeatureParts = (this.activeFeature && this.activeFeature.partNumber) ? this.featuresParts.filter((feature) => {\r\n return feature.partName === this.activeFeature.partName\r\n }) : [];\r\n activeFeatureParts.forEach((activeFeaturePart) => {\r\n activeFeaturePart.disabled = this.disabled\r\n });\r\n return activeFeatureParts\r\n }\r\n\r\n setDefault() {\r\n const availableFeatures = this.availableFeatures();\r\n const layout = this.getParent().layout;\r\n let hardCodedDefault = availableFeatures.find((feature) => {\r\n return feature.partName === \"Custom B 60in 15X4\";\r\n });\r\n const counterTopSize = layout.parts[Vanity.id].counterTopSize(this);\r\n if (counterTopSize === '72in' && layout.type === 1 && this.activeFeature) {\r\n hardCodedDefault = availableFeatures.find((feature) => {\r\n return this.activeFeature.partName.includes(\"60in\")\r\n ? feature.partName.includes(\"60in\")\r\n : feature.partName.includes(\"30in\")\r\n });\r\n }\r\n this.activeFeature = hardCodedDefault || availableFeatures[0];\r\n this.activeFeatureParts = this.setActiveFeatureParts();\r\n }\r\n\r\n setLayers(layout) {\r\n if (this.getParent().showerTubComboIsActive()) {\r\n super.hideLayers();\r\n return;\r\n }\r\n super.setLayers(layout);\r\n }\r\n\r\n setZIndex() {}\r\n\r\n changeLayout(layoutType) {\r\n if (layoutType === 1 && this.disabled) {\r\n this.disabled = false;\r\n this.disabledClick();\r\n }\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport Walls from \"../../parts/walls\";\r\nimport {getCurrentRoomType} from \"../../../../appLayout\";\r\nimport {createPageToLoadArray, LOOK_ROOM_TYPES} from \"../../constants\";\r\n\r\nexport default class ShowerWall extends IntermediatePart {\r\n\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'shower_wall';\r\n this.partName = 'Shower Wall';\r\n this.translateId = \"visualizer.bathroom.shower.shower_wall\";\r\n this.homePageTitle = 'Interior Shower Walls';\r\n this.isStoneFeature = true;\r\n this.canUseWizard = true;\r\n this.layerPriority = 2;\r\n if (isChild) {\r\n createPageToLoadArray(this);\r\n }\r\n }\r\n\r\n getArrayOfConditions() {\r\n const conditions = super.getArrayOfConditions();\r\n const showerParent = this.getParent();\r\n const showerSize = showerParent ? showerParent.showerSize() : null;\r\n if (showerSize) {\r\n conditions.push({\r\n propName: \"ShowerSize\",\r\n propValue: showerSize\r\n })\r\n }\r\n // if (wallParent && wallParent.splitWallType) {\r\n // conditions.push({\r\n // propName: \"SplitWallType\",\r\n // propValue: wallParent.splitWallType\r\n // })\r\n // }\r\n const wallParent = showerParent.layout.parts[Walls.id];\r\n if (getCurrentRoomType(showerParent.layout) === LOOK_ROOM_TYPES.as && wallParent && wallParent.splitWall) {\r\n conditions.push({\r\n propName: \"SplitWallType\",\r\n propValue: wallParent.getSplitWallType()\r\n })\r\n }\r\n return conditions\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport {getFeatureIsLocked} from \"../../../../../misc/helpers\";\r\n\r\nexport default class ShowerWallAccent extends IntermediatePart {\r\n\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = \"shower_wall_accent\";\r\n this.partName = \"Shower Walls Accent\";\r\n this.translateId = \"visualizer.bathroom.shower.shower_wall_accent\";\r\n this.dbName = \"Shower Wall Accent\";\r\n this.homePageTitle = 'Interior Shower Walls';\r\n this.isStoneFeature = true;\r\n this.canUseWizard = true;\r\n this.layerPriority = 2;\r\n }\r\n\r\n handleClick(ignoreLocked) {\r\n const parent = this.getParent();\r\n super.handleClick(ignoreLocked);\r\n const shower = parent.getParent();\r\n if (shower.showerWallAccent && shower.showerWallAccent.canBeDisabled\r\n && !shower.showerWallAccent.placeholderChanged && !getFeatureIsLocked(this)) {\r\n shower.showerWallAccent.disabled = true;\r\n shower.showerWallAccent.disabledClick();\r\n }\r\n this.featureClicked();\r\n }\r\n\r\n getArrayOfConditions() {\r\n let conditions = super.getArrayOfConditions(); //roomLayout\r\n const showerParent = this.getParent();\r\n conditions.push({\r\n propName: \"ShowerSize\",\r\n propValue: showerParent.showerSize()\r\n });\r\n return conditions\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n const zIndex = zIndexes.ShowerWallAccent;\r\n if (zIndexes && this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndex;\r\n }\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport {getFeatureIsLocked} from \"../../../../../misc/helpers\";\r\n// import {ShowerComboTubType} from \"../../constants\";\r\nimport {ShowerTubCombo} from \"../../parts/showerTubCombo\";\r\nimport {ShowerAccessories} from \"../../parts/showerAccessories\";\r\nimport {removeLookPointFor} from \"../../../lookNavigation/lookFunctions2\";\r\nimport {getCurrentRoomType} from \"../../../../appLayout\";\r\nimport {LayoutType, LOOK_ROOM_TYPES, METADATA, ShowerComboTubType} from \"../../constants\";\r\nimport {IS_QKB_UI} from \"../../../../../config\";\r\n\r\nexport default class ShowerDoor extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'shower_door';\r\n this.partName = 'Shower Door';\r\n this.translateId = \"visualizer.bathroom.shower.shower_door\";\r\n this.visible = true;\r\n this.isStoneFeature = false;\r\n this.canBeDisabled = true;\r\n this.layerPriority = 5;\r\n\r\n /* only shower door properties */\r\n if (isChild) {\r\n this.previouslySelectedFeatures = {};\r\n this.oneLayerPosition = true;\r\n Object.keys(LayoutType).forEach(layoutName => {\r\n this.previouslySelectedFeatures[layoutName] = {};\r\n })\r\n }\r\n this.currentShowerBodyId = \"\"; // for example \"custom-a-60in-30x8\"\r\n }\r\n\r\n load(dbFeature) {\r\n if (!dbFeature.metaData[\"Side\"]) {\r\n dbFeature.metaData[\"Side\"] = [METADATA.LeftSide];\r\n }\r\n dbFeature.metaData[\"layerPosition\"] = dbFeature.metaData[\"Side\"] ? dbFeature.metaData[\"Side\"][0] : \"\";\r\n dbFeature.lixilProductSubCategory = \"Shower Doors\"; // because some of them are missing this subcategory!\r\n return super.load(dbFeature);\r\n }\r\n\r\n navigationSubItems(...props) {\r\n if (IS_QKB_UI) {\r\n return this.navigationSubItemsWithSides(...props);\r\n }\r\n return super.navigationSubItems(...props);\r\n }\r\n\r\n disabledClick() {\r\n const showerParent = this.getParent();\r\n const showerDoorHandle = showerParent.showerDoorHandle;\r\n if (showerDoorHandle && showerDoorHandle) {\r\n showerDoorHandle.disabled = this.disabled || !showerDoorHandle.canBeEnabled(); // true or check if it can be enabled;\r\n }\r\n const accParent = showerParent.layout.parts[ShowerAccessories.id]\r\n if (!this.disabled && accParent && accParent.showerRod && !accParent.showerRod.disabled\r\n && accParent.showerRod) {\r\n accParent.showerRod.disabled = true\r\n }\r\n }\r\n\r\n handleClick() {\r\n super.handleClick();\r\n if (!this.notAvailableInVisualizer && !getFeatureIsLocked(this)) {\r\n // this.getParent().getParent().setShowerTubCombo();\r\n // let doorWithLiner = false;\r\n // if(this.metaData && this.metaData.length) {\r\n // const activeDoorMetadata = this.metaData.find(metaDataObject => metaDataObject.isFor);\r\n // const showerPanValues = activeDoorMetadata.conditions.find(condition => condition.name === \"BathtubLiner\");\r\n // if (showerPanValues) {\r\n // doorWithLiner = true;\r\n // }\r\n // }\r\n // this.getParent().getParent().setLinerActive(doorWithLiner);\r\n const shower = this.getParent().getParent();\r\n const showerPanCondition = this.metaData[\"ShowerPan\"];\r\n if (!shower.showerTubComboIsActive()) {\r\n shower.showerFloorIsActive = showerPanCondition && showerPanCondition.includes(\"Threshold\");\r\n }\r\n const accParent = shower.layout.parts[ShowerAccessories.id]\r\n if (accParent && accParent.showerRod && !accParent.showerRod.disabled) {\r\n accParent.showerRod.disabled = true\r\n }\r\n if(!this.matchesMetaForArrayOfConditions(this.getParent().getArrayOfConditions())) {\r\n const showerSizeValues = this.metaData[\"ShowerSize\"];\r\n const showerBodyParent = this.getParent().getParent().showerBody;\r\n if (showerSizeValues) {\r\n const showerBodyThatFits = showerBodyParent.features.filter(showerBodyFeature => {\r\n const showerSizeValues2 = showerBodyFeature.metaData[\"ShowerSize\"];\r\n return showerSizeValues.some(condValue => {\r\n return showerSizeValues2.some(condValue2 => condValue === condValue2);\r\n });\r\n });\r\n if (showerBodyThatFits.length && showerBodyThatFits.every(shBody => shBody.partName !== showerBodyParent.activeFeature.partName)) {\r\n let showerBodyToSet = showerBodyThatFits.find(shBody => {\r\n return shBody.showerDimensions === showerBodyParent.activeFeature.showerDimensions\r\n }) || showerBodyThatFits[0];\r\n showerBodyParent.showerBodySelectedByUser = true;\r\n showerBodyParent.activeFeature = showerBodyToSet;\r\n }\r\n }\r\n }\r\n this.featureClicked();\r\n }\r\n }\r\n\r\n // setLayers(layout) {\r\n // const showerParent = this.getParent();\r\n // // const comboParent = showerParent.layout.parts[ShowerTubCombo.id];\r\n // // if (showerParent.showerTubComboIsActive() && comboParent.bottomTub === ShowerComboTubType.walk_in_tub) {\r\n // if (showerParent.showerTubComboIsActive()) {\r\n // super.hideLayers();\r\n // return;\r\n // }\r\n // return super.setLayers(layout);\r\n // }\r\n\r\n getArrayOfConditions() {\r\n const showerParent = this.getParent();\r\n const comboParent = showerParent.layout.parts[ShowerTubCombo.id];\r\n let conditions = super.getArrayOfConditions(); //roomLayout\r\n const showerSize = showerParent.showerSize();\r\n if (showerSize) {\r\n conditions.push({\r\n propName: \"ShowerSize\",\r\n propValue: showerSize\r\n })\r\n }\r\n // if (showerParent.showerTubComboIsActive() && comboParent.bottomTub === ShowerComboTubType.replacement_tub\r\n // && comboParent.replacementTub && comboParent.replacementTub.activeFeature && comboParent.replacementTub.activeFeature.metaData[\"ShowerPanHeight\"]) {\r\n // conditions.push({\r\n // propName: \"ShowerPanHeight\",\r\n // propValue: comboParent.replacementTub.activeFeature.metaData[\"ShowerPanHeight\"]\r\n // })\r\n if (showerParent.showerTubComboIsActive()) {\r\n if (comboParent && comboParent.bottomTub === ShowerComboTubType.replacement_tub) {\r\n if (comboParent.replacementTub && comboParent.replacementTub.activeFeature\r\n && comboParent.replacementTub.activeFeature.metaData\r\n && comboParent.replacementTub.activeFeature.metaData[\"ShowerPanHeight\"]) {\r\n conditions.push({\r\n propName: \"ShowerPanHeight\",\r\n propValue: comboParent.replacementTub.activeFeature.metaData[\"ShowerPanHeight\"]\r\n })\r\n }\r\n } else {\r\n conditions.push({\r\n propName: \"NOT_EXISTING_METADATA\",\r\n propValue: \"whatever\"\r\n })\r\n }\r\n } else if (showerParent && showerParent.showerPanCombo\r\n && showerParent.showerPanCombo.activeFeature && showerParent.showerPanCombo.activeFeature.metaData[\"ShowerPanHeight\"]) {\r\n conditions.push({\r\n propName: \"ShowerPanHeight\",\r\n propValue: showerParent.showerPanCombo.activeFeature.metaData[\"ShowerPanHeight\"]\r\n })\r\n }\r\n return conditions\r\n }\r\n\r\n canDisplayDemoPoint(parentObject) {\r\n if (getCurrentRoomType() === LOOK_ROOM_TYPES.as) {\r\n return removeLookPointFor(parentObject, 3, \"1\") && removeLookPointFor(parentObject, 6, \"1\")\r\n }\r\n return true\r\n }\r\n}\r\n","import {Shower} from \"../../parts/shower\";\r\nimport {createParentPositions} from \"../../constants\";\r\nimport AccessoryCommon from \"./accessoryCommon\";\r\n\r\nexport default class LargeCornerSeat extends AccessoryCommon {\r\n constructor(isChild, partNumber = 0) {\r\n super(isChild);\r\n this.partNumber = partNumber;\r\n this.partId = 'large_corner_seat';\r\n this.partName = 'Large Corner Seat';\r\n this.translateId = \"visualizer.bathroom.accessories.large_corner_seat\";\r\n this.visible = true;\r\n this.canBeDisabled = true;\r\n if (isChild) {\r\n createParentPositions(this);\r\n }\r\n }\r\n\r\n setLayers(layout) {\r\n\r\n const showerParent = this.getParent().layout.parts[Shower.id];\r\n if (showerParent && showerParent.showerTubComboIsActive()) { // shower tub combo - remove\r\n super.hideLayers();\r\n return;\r\n }\r\n\r\n if (this.activeFeature && (this.activeFeature.matchesMetaForArrayOfConditions(this.getArrayOfConditions()))) {\r\n // this.checkIfFeaturePartIsMatching();\r\n return super.setLayers(layout);\r\n }\r\n\r\n this.setDefault();\r\n return super.setLayers(layout);\r\n }\r\n\r\n // setZIndex(zIndexes) {\r\n // if (zIndexes) {\r\n // Object.keys(this.layerPositions).forEach((key, keyIndex) => {\r\n // if (this.layerPositions[key]) {\r\n // this.layerPositions[key].layer.zIndex = zIndexes.Accessories.LargeCornerSeat + keyIndex*10;\r\n // }\r\n // })\r\n // }\r\n // }\r\n\r\n}\r\n\r\n","import {ShowerTubCombo} from \"../../parts/showerTubCombo\";\r\nimport {Shower} from \"../../parts/shower\";\r\nimport {createParentPositions, METADATA, SIDE_POSITIONS} from \"../../constants\";\r\nimport AccessoryCommon from \"./accessoryCommon\";\r\n\r\nexport default class SoapDish extends AccessoryCommon {\r\n constructor(isChild, partNumber = 0) {\r\n super(isChild);\r\n this.partNumber = partNumber;\r\n this.partId = 'soap_dish';\r\n this.partName = 'Soap Dish';\r\n this.translateId = \"visualizer.bathroom.accessories.soap_dish\";\r\n this.visible = true;\r\n this.canBeDisabled = true;\r\n if (isChild) {\r\n createParentPositions(this);\r\n }\r\n }\r\n\r\n load(dbFeature) {\r\n dbFeature.metaData[\"layerPosition\"] = dbFeature.metaData[\"Side\"] ? dbFeature.metaData[\"Side\"][0] : METADATA.LeftSide;\r\n const partNumber = dbFeature.metaData[\"layerPosition\"] === SIDE_POSITIONS[0] ? 1 : 2;\r\n return super.load_(dbFeature, new SoapDish(false, partNumber),\r\n true, partNumber === 1 ? 'features' : 'featuresParts');\r\n }\r\n\r\n disabledClick() {\r\n if (!this.disabled && this.activeFeature) {\r\n this.activeFeature.handleClick() // check soapDish\r\n }\r\n }\r\n\r\n availableFeatures(features) {\r\n return features.filter(feature => feature.partNumber === 1)\r\n }\r\n\r\n setLayers(layout) {\r\n\r\n const showerParent = this.getParent().layout.parts[Shower.id];\r\n const showerComboParent = layout.parts[ShowerTubCombo.id];\r\n\r\n if (showerParent && showerComboParent && showerParent.showerTubComboIsActive() && showerComboParent.bottomTub === \"walk_in_tub\") {\r\n super.hideLayers();\r\n return;\r\n }\r\n\r\n const conditions = this.getArrayOfConditions();\r\n if ((this.activeFeature && this.activeFeature.matchesMetaForArrayOfConditions(conditions)\r\n || (this.activeFeature && this.activeFeature.notAvailableInVisualizer && this.placeholderFeature))) {\r\n return super.setLayers(layout);\r\n }\r\n\r\n this.setDefault();\r\n return super.setLayers(layout);\r\n }\r\n\r\n // setZIndex(zIndexes) {\r\n // if (zIndexes) {\r\n // Object.keys(this.layerPositions).forEach((key, keyIndex) => {\r\n // if (this.layerPositions[key]) {\r\n // this.layerPositions[key].layer.zIndex = zIndexes.Accessories.SoapDish + keyIndex*10;\r\n // }\r\n // })\r\n // }\r\n // }\r\n}\r\n","import {createParentPositions} from \"../../constants\";\r\nimport AccessoryCommon from \"./accessoryCommon\";\r\n\r\nexport default class CornerCaddie extends AccessoryCommon {\r\n constructor(isChild, partNumber = 0) {\r\n super(isChild);\r\n this.partNumber = partNumber;\r\n this.partId = 'corner_caddie';\r\n this.partName = 'Corner Caddie';\r\n this.translateId = \"visualizer.bathroom.accessories.corner_caddie\";\r\n this.visible = true;\r\n this.canBeDisabled = true;\r\n if (isChild) {\r\n createParentPositions(this);\r\n }\r\n }\r\n\r\n availableFeatures(features) {\r\n return features.filter(feature => feature.partNumber === 1)\r\n }\r\n\r\n handleClick() {\r\n const accessoriesParent = this.getParent().getParent();\r\n accessoriesParent.caddie_type = this.partId;\r\n super.handleClick();\r\n }\r\n\r\n setLayers(layout) {\r\n\r\n const accessoriesParent = this.getParent();\r\n if (accessoriesParent.caddie_type !== this.partId) {\r\n super.hideLayers();\r\n return;\r\n }\r\n\r\n if (this.activeFeature && (this.activeFeature.matchesMetaForArrayOfConditions(this.getArrayOfConditions()))) {\r\n // this.checkIfFeaturePartIsMatching();\r\n return super.setLayers(layout);\r\n }\r\n\r\n this.setDefault();\r\n return super.setLayers(layout);\r\n }\r\n\r\n // setZIndex(zIndexes) {\r\n // if (zIndexes) {\r\n // Object.keys(this.layerPositions).forEach((key, keyIndex) => {\r\n // if (this.layerPositions[key]) {\r\n // this.layerPositions[key].layer.zIndex = zIndexes.Accessories.CornerCaddie + keyIndex*10;\r\n // }\r\n // })\r\n // }\r\n // }\r\n\r\n}\r\n","import {createParentPositions} from \"../../constants\";\r\nimport AccessoryCommon from \"./accessoryCommon\";\r\n\r\nexport default class LargeCornerCaddie extends AccessoryCommon {\r\n constructor(isChild, partNumber = 0) {\r\n super(isChild);\r\n this.partNumber = partNumber;\r\n this.partId = 'large_corner_caddie';\r\n this.partName = 'Large Corner Caddie';\r\n this.translateId = \"visualizer.bathroom.accessories.large_corner_caddie\";\r\n this.visible = true;\r\n this.canBeDisabled = true;\r\n if (isChild) {\r\n createParentPositions(this);\r\n }\r\n }\r\n\r\n handleClick() {\r\n const accessoriesParent = this.getParent().getParent();\r\n accessoriesParent.caddie_type = this.partId;\r\n super.handleClick();\r\n }\r\n\r\n setLayers(layout) {\r\n\r\n const accessoriesParent = this.getParent();\r\n if (accessoriesParent.caddie_type !== this.partId) {\r\n super.hideLayers();\r\n return;\r\n }\r\n\r\n if (this.activeFeature && (this.activeFeature.matchesMetaForArrayOfConditions(this.getArrayOfConditions()))) {\r\n // this.checkIfFeaturePartIsMatching();\r\n return super.setLayers(layout);\r\n }\r\n\r\n this.setDefault();\r\n return super.setLayers(layout);\r\n }\r\n\r\n // setZIndex(zIndexes) {\r\n // if (zIndexes) {\r\n // Object.keys(this.layerPositions).forEach((key, keyIndex) => {\r\n // if (this.layerPositions[key]) {\r\n // this.layerPositions[key].layer.zIndex = zIndexes.Accessories.LargeCornerCaddie + keyIndex*10;\r\n // }\r\n // })\r\n // }\r\n // }\r\n\r\n}\r\n","import {METADATA, SIDE_POSITIONS} from \"../../constants\";\r\nimport AccessoryCommon from \"./accessoryCommon\";\r\nimport {Shower} from \"../../parts/shower\";\r\n\r\nexport default class GrabBar extends AccessoryCommon {\r\n constructor(isChild, partNumber = 0) {\r\n super(isChild);\r\n this.partNumber = partNumber;\r\n this.partId = 'grab_bar';\r\n this.partName = 'Grab Bar';\r\n this.translateId = \"visualizer.bathroom.accessories.grab_bar\";\r\n this.visible = true;\r\n this.canBeDisabled = true;\r\n if (isChild) {\r\n this.layerPositions = {\r\n [SIDE_POSITIONS[0]]: null,\r\n [SIDE_POSITIONS[1]]: null,\r\n [SIDE_POSITIONS[2]]: null,\r\n };\r\n }\r\n }\r\n\r\n load(dbFeature) {\r\n dbFeature.metaData[\"layerPosition\"] = dbFeature.metaData[\"Side\"] ? dbFeature.metaData[\"Side\"][0] : METADATA.LeftSide;\r\n const partNumber = dbFeature.metaData[\"layerPosition\"] !== SIDE_POSITIONS[1] ? 1 : 2;\r\n return super.load_(dbFeature, new GrabBar(false, partNumber),\r\n true, partNumber === 1 ? 'features' : 'featuresParts');\r\n }\r\n\r\n disabledClick() {\r\n if (!this.disabled && this.activeFeature) {\r\n this.activeFeature.handleClick() // check soapDish\r\n }\r\n }\r\n\r\n availableFeatures(features) {\r\n return features.filter(feature => feature.partNumber === 1)\r\n }\r\n\r\n handleClick() { // \"this\" is feature!! not the feature group\r\n super.handleClick();\r\n const parent = this.getParent();\r\n const accessoriesParent = parent.getParent();\r\n const showerParent = accessoriesParent.layout.parts[Shower.id];\r\n const showerSize = showerParent.showerSize();\r\n if (showerSize !== \"60\" && parent.activeFeature) {\r\n parent.layerPositions[parent.activeFeature.metaData[\"layerPosition\"]] = parent.activeFeature;\r\n }\r\n // parent.checkRelatedFeatureGroupPositions(this.metaData[\"layerPosition\"]);\r\n }\r\n\r\n checkCenterGrabWall(clickedPosition) { // L or R and C can't be together\r\n if (!clickedPosition) {\r\n return\r\n }\r\n Object.keys(this.layerPositions).forEach(position => {\r\n if (clickedPosition === \"C\") {\r\n if (position !== \"C\") {\r\n this.layerPositions[position] = null;\r\n }\r\n } else if (position === \"C\") {\r\n this.layerPositions[position] = null;\r\n }\r\n })\r\n }\r\n\r\n checkCurrentPositions(position) {\r\n const feature = this.layerPositions[position];\r\n if (!feature) {\r\n return\r\n }\r\n const nameSplitted = feature.dbFeature.sharedFeatureName.split(\" \");\r\n const size = nameSplitted[nameSplitted.length - 1] ? nameSplitted[nameSplitted.length - 1].replace(\"in\", \"\") : \"\";\r\n const newPosition = position === SIDE_POSITIONS[0] ? SIDE_POSITIONS[1] : SIDE_POSITIONS[0];\r\n if (!size || !this.layerPositions[newPosition]) {\r\n return\r\n }\r\n if (this.layerPositions[newPosition]) {\r\n const nameSplitted2 = this.layerPositions[newPosition].dbFeature.sharedFeatureName.split(\" \");\r\n const size2 = nameSplitted2[nameSplitted2.length - 1] ? nameSplitted2[nameSplitted2.length - 1].replace(\"in\", \"\") : \"\";\r\n if (!size || (+size2 === 12 && +size === 12)) { // last chance to keep other side layer\r\n return;\r\n }\r\n }\r\n this.layerPositions[newPosition] = null;\r\n }\r\n\r\n showLayerPositionsModal(forFeature) {\r\n const showerParent = this.getParent().layout.parts[Shower.id];\r\n if (showerParent.showerSize() !== \"60\") {\r\n return false\r\n }\r\n return super.showLayerPositionsModal(forFeature)\r\n }\r\n\r\n}\r\n","import {CORNER_SHELVES_POSITIONS} from \"../../constants\";\r\nimport AccessoryCommon from \"./accessoryCommon\";\r\n\r\nexport default class CornerShelf extends AccessoryCommon {\r\n constructor(isChild, partNumber = 0) {\r\n super(isChild);\r\n this.partNumber = partNumber;\r\n this.partId = \"corner_shelf\";\r\n this.partName = \"Corner Shelf\";\r\n this.translateId = \"visualizer.bathroom.accessories.corner_shelf\";\r\n this.dbName = \"Small Corner Shelf\";\r\n this.visible = true;\r\n this.canBeDisabled = true;\r\n if (isChild) {\r\n this.layerPositions = {};\r\n CORNER_SHELVES_POSITIONS.forEach(pos => {\r\n this.layerPositions[pos] = null\r\n })\r\n }\r\n }\r\n\r\n load(dbFeature) {\r\n dbFeature.metaData[\"layerPosition\"] = (dbFeature.metaData[\"Side\"] && dbFeature.metaData[\"Part\"])\r\n ? dbFeature.metaData[\"Side\"][0] + dbFeature.metaData[\"Part\"][0]\r\n : \"\"\r\n const partNumber = dbFeature.metaData[\"layerPosition\"] === CORNER_SHELVES_POSITIONS[0] ? 1 : 2;\r\n return super.load_(dbFeature, new CornerShelf(false, partNumber),\r\n true, partNumber === 1 ? 'features' : 'featuresParts');\r\n }\r\n\r\n handleClick() {\r\n const accessoriesParent = this.getParent().getParent();\r\n accessoriesParent.caddie_type = this.partId;\r\n super.handleClick();\r\n }\r\n\r\n setLayers(layout) {\r\n\r\n const accessoriesParent = this.getParent();\r\n if (accessoriesParent.caddie_type !== this.partId) {\r\n super.hideLayers();\r\n return;\r\n }\r\n\r\n if (this.activeFeature && (this.activeFeature.matchesMetaForArrayOfConditions(this.getArrayOfConditions()))) {\r\n // this.checkIfFeaturePartIsMatching();\r\n super.setLayers(layout);\r\n } else {\r\n this.setDefault();\r\n super.setLayers(layout);\r\n }\r\n\r\n // if (this.layerPositions) {\r\n // const windowParent = this.getParent().layout.parts.Window;\r\n // if (windowParent && windowParent.windowKits && !windowParent.windowKits.disabled) {\r\n // Object.keys(this.layerPositions).forEach(key => {\r\n // if (!key.includes(\"3\") && this.layerPositions[key]) {\r\n // this.layerPositions[key].layer.src = '';\r\n // }\r\n // })\r\n // }\r\n // }\r\n\r\n }\r\n\r\n // setZIndex(zIndexes) {\r\n // if (zIndexes) {\r\n // Object.keys(this.layerPositions).forEach((key, keyIndex) => {\r\n // if (this.layerPositions[key]) {\r\n // this.layerPositions[key].layer.zIndex = zIndexes.Accessories.CornerShelf1 + keyIndex*10;\r\n // }\r\n // })\r\n // }\r\n // }\r\n\r\n showLayerPositionsModal() {\r\n return true\r\n }\r\n\r\n}\r\n","import AccessoryCommon from \"./accessoryCommon\";\r\n// import DesignNavigationItem from \"../../../../visComponents/designNavigationItem\";\r\n\r\nexport default class ShowerPod extends AccessoryCommon {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'shower_pod';\r\n this.partName = 'Shower Pod';\r\n this.translateId = \"visualizer.bathroom.accessories.shower_pod\";\r\n this.dbName = document.kvConfig.userId === 157639 ? 'Storage Pods' : 'Storage Pod'; // window.location.href.includes(\"american_standard_website\")\r\n this.visible = true;\r\n this.canBeDisabled = true;\r\n }\r\n\r\n load(dbFeature) {\r\n if (document.kvConfig.userId !== 157639 && dbFeature.groupName !== 'Storage Pod') {\r\n return false\r\n }\r\n return super.load_(dbFeature, new ShowerPod());\r\n }\r\n\r\n // navigationSubItems(filters, searchText) {\r\n // const filteredAvailableFeatures = super.getFeaturesBySearchText(super.getFilteredFeaturesByFilters(filters), searchText);\r\n // const featuresToDisplay = super.navigationSubItemsWithFilterMultipleConditions(this.getArrayOfConditions(), filteredAvailableFeatures);\r\n // const parent = this.getParent();\r\n // featuresToDisplay.forEach(feature => {\r\n // if (parent.layout.parts.Window && parent.layout.parts.Window.windowKits && !parent.layout.parts.Window.windowKits.disabled) {\r\n // feature.matchesMetaFailed = true;\r\n // } else if (feature.matchesMetaFailed) {\r\n // feature.matchesMetaFailed = false;\r\n // }\r\n // });\r\n // return featuresToDisplay.map(_ => new DesignNavigationItem(_.featureName, _));\r\n // }\r\n\r\n handleChangeParent(nonCompatibleWith) {\r\n if (nonCompatibleWith === \"Window Kit\") {\r\n const showerPodParent = this.getParent();\r\n const accessoriesParent = showerPodParent.getParent();\r\n accessoriesParent.layout.parts.Window.windowKits.disabled = true;\r\n showerPodParent.disabled = false;\r\n this.handleClick();\r\n }\r\n }\r\n\r\n disabledClick() {\r\n const accessoriesParent = this.getParent();\r\n const windowParent = accessoriesParent.layout.parts.Window;\r\n if (windowParent && windowParent.windowKits && !windowParent.windowKits.disabled) {\r\n windowParent.windowKits.disabled = true;\r\n }\r\n }\r\n\r\n // setZIndex(zIndexes) {\r\n // const zIndex = zIndexes.Accessories.ShowerPod;\r\n // if (zIndexes && this.activeFeature) {\r\n // this.activeFeature.layer.zIndex = zIndex;\r\n // }\r\n // if (zIndexes && this.placeholderFeature) {\r\n // this.placeholderFeature.layer.zIndex = zIndex;\r\n // }\r\n // }\r\n\r\n}\r\n","import AccessoryCommon from \"./accessoryCommon\";\r\nimport {createParentPositions, SIDE_POSITIONS} from \"../../constants\";\r\nimport {Shower} from \"../../parts/shower\";\r\n\r\nexport default class Seats extends AccessoryCommon {\r\n constructor(isChild, partNumber = 0) {\r\n super(isChild);\r\n this.partNumber = partNumber;\r\n this.partId = 'shower_seats';\r\n this.partName = 'Seats';\r\n this.dbName = 'Seats';\r\n this.translateId = \"visualizer.bathroom.accessories.shower_seats\";\r\n this.visible = true;\r\n this.canBeDisabled = true;\r\n this.conflictingPositions = [\"valve_trim\"];\r\n if (isChild) {\r\n createParentPositions(this);\r\n }\r\n }\r\n\r\n load(dbFeature) {\r\n dbFeature.metaData[\"layerPosition\"] = dbFeature.metaData[\"Side\"] ? dbFeature.metaData[\"Side\"][0] : \"\";\r\n const partNumber = dbFeature.metaData[\"layerPosition\"] === SIDE_POSITIONS[0] ? 1 : 2;\r\n return super.load_(dbFeature, new Seats(false, partNumber),\r\n true, partNumber === 1 ? 'features' : 'featuresParts');\r\n }\r\n\r\n setLayers(layout) {\r\n const showerParent = this.getParent().layout.parts[Shower.id];\r\n if (showerParent && showerParent.showerTubComboIsActive()) { // shower tub combo - remove\r\n super.hideLayers();\r\n return;\r\n }\r\n\r\n return super.setLayers(layout);\r\n }\r\n //\r\n // setZIndex(zIndexes) {\r\n // if (zIndexes) {\r\n // Object.keys(this.layerPositions).forEach((key, keyIndex) => {\r\n // if (this.layerPositions[key]) {\r\n // this.layerPositions[key].layer.zIndex = zIndexes.Accessories.Seats + keyIndex*10;\r\n // }\r\n // })\r\n // }\r\n // }\r\n\r\n}\r\n","import AccessoryCommon from \"./accessoryCommon\";\r\nimport {Shower} from \"../../parts/shower\";\r\n// import DesignNavigationItem from \"../../../../visComponents/designNavigationItem\";\r\n\r\nexport default class ShowerRod extends AccessoryCommon {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'shower_rod';\r\n this.partName = 'Shower Rod';\r\n this.translateId = \"visualizer.bathroom.accessories.shower_rod\";\r\n this.visible = true;\r\n this.canBeDisabled = true;\r\n }\r\n\r\n handleClick(ignoreLocked = false) {\r\n const parent = this.getParent()\r\n const showerParent = parent.getParent().layout.parts[Shower.id];\r\n if (showerParent && showerParent.showerDoor && !showerParent.showerDoor.disabled) { // shower tub combo - remove\r\n showerParent.showerDoor.disabled = true\r\n }\r\n super.handleClick(ignoreLocked);\r\n }\r\n\r\n // navigationSubItems(filters, searchText) {\r\n // const filteredAvailableFeatures = super.getFeaturesBySearchText(super.getFilteredFeaturesByFilters(filters), searchText);\r\n // const featuresToDisplay = super.navigationSubItemsWithFilterMultipleConditions(this.getArrayOfConditions(), filteredAvailableFeatures);\r\n // const parent = this.getParent();\r\n // featuresToDisplay.forEach(feature => {\r\n // if (parent.layout.parts.Window && parent.layout.parts.Window.windowKits && !parent.layout.parts.Window.windowKits.disabled) {\r\n // feature.matchesMetaFailed = true;\r\n // } else if (feature.matchesMetaFailed) {\r\n // feature.matchesMetaFailed = false;\r\n // }\r\n // });\r\n // return featuresToDisplay.map(_ => new DesignNavigationItem(_.featureName, _));\r\n // }\r\n\r\n // handleChangeParent(nonCompatibleWith) {\r\n // if (nonCompatibleWith === \"Window Kit\") {\r\n // const showerRodParent = this.getParent();\r\n // const accessoriesParent = showerRodParent.getParent();\r\n // accessoriesParent.layout.parts.Window.windowKits.disabled = true;\r\n // showerRodParent.disabled = false;\r\n // this.handleClick();\r\n // }\r\n // }\r\n\r\n disabledClick() {\r\n const showerParent = this.getParent().layout.parts[Shower.id];\r\n if (!this.disabled && showerParent && showerParent.showerDoor && !showerParent.showerDoor.disabled) { // shower tub combo - remove\r\n showerParent.showerDoor.disabled = true\r\n }\r\n }\r\n\r\n // setZIndex(zIndexes) {\r\n // const zIndex = zIndexes.Accessories.ShowerRod;\r\n // if (zIndexes && this.activeFeature) {\r\n // this.activeFeature.layer.zIndex = zIndex;\r\n // }\r\n // }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\n\r\nexport default class ToiletBrush extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'toilet_brush';\r\n this.partName = 'Toilet Brush';\r\n this.translateId = \"visualizer.bathroom.accessories.toilet_brush\";\r\n this.canBeDisabled = true;\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport {Toilet} from \"../../parts/toilet\";\r\nimport {removeLookPointFor} from \"../../../lookNavigation/lookFunctions2\";\r\nimport {getCurrentRoomType} from \"../../../../appLayout\";\r\nimport {LOOK_ROOM_TYPES} from \"../../constants\";\r\n\r\nexport default class PaperHolder extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'paper_holder';\r\n this.partName = 'Paper Holder';\r\n this.translateId = \"visualizer.bathroom.accessories.paper_holder\";\r\n this.canBeDisabled = true;\r\n }\r\n\r\n disabledClick() {\r\n const toiletParent = this.getParent().layout.parts[Toilet.id];\r\n if (toiletParent && toiletParent.toilet && toiletParent.toilet.disabled) {\r\n toiletParent.toilet.disabled = this.disabled || !toiletParent.toilet.canBeEnabled(); // true or check if it can be enabled;\r\n }\r\n }\r\n\r\n canDisplayDemoPoint(parentObject) {\r\n if (getCurrentRoomType() === LOOK_ROOM_TYPES.as) {\r\n return true\r\n }\r\n return removeLookPointFor(parentObject, 3, \"2\")\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport {createParentPositions, LOOK_ROOM_TYPES, SIDE_POSITIONS} from \"../../constants\";\r\nimport {removeLookPointFor} from \"../../../lookNavigation/lookFunctions2\";\r\nimport {getCurrentRoomType} from \"../../../../appLayout\";\r\n\r\nexport default class RobeHook extends IntermediatePart {\r\n constructor(isChild, partNumber = 0) {\r\n super(isChild);\r\n this.partNumber = partNumber;\r\n this.partId = 'robe_hook';\r\n this.partName = 'Robe Hook';\r\n this.translateId = \"visualizer.bathroom.accessories.robe_hook\";\r\n this.canBeDisabled = true;\r\n if (isChild) {\r\n createParentPositions(this);\r\n }\r\n }\r\n\r\n canDisplayDemoPoint(parentObject) {\r\n if (getCurrentRoomType() === LOOK_ROOM_TYPES.as) {\r\n return true\r\n }\r\n return removeLookPointFor(parentObject, 1, \"1\", SIDE_POSITIONS[1])\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport {createParentPositions} from \"../../constants\";\r\n\r\nexport default class TowelBar extends IntermediatePart {\r\n constructor(isChild, partNumber = 0) {\r\n super(isChild);\r\n this.partNumber = partNumber;\r\n this.partId = 'towel_bar';\r\n this.partName = 'Towel Bar';\r\n this.translateId = \"visualizer.bathroom.accessories.towel_bar\";\r\n this.canBeDisabled = true;\r\n if (isChild) {\r\n createParentPositions(this);\r\n }\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport {LOOK_ROOM_TYPES, SIDE_POSITIONS} from \"../../constants\";\r\nimport {removeLookPointFor} from \"../../../lookNavigation/lookFunctions2\";\r\nimport {getCurrentRoomType} from \"../../../../appLayout\";\r\n\r\nexport default class TowelRing extends IntermediatePart {\r\n constructor(isChild, partNumber = 0) {\r\n super(isChild);\r\n this.partNumber = partNumber;\r\n this.partId = 'towel_ring';\r\n this.partName = 'Towel Ring';\r\n this.translateId = \"visualizer.bathroom.accessories.towel_ring\";\r\n this.canBeDisabled = true;\r\n if (isChild) {\r\n this.layerPositions = {\r\n [SIDE_POSITIONS[0]]: null,\r\n [SIDE_POSITIONS[1]]: null,\r\n };\r\n }\r\n }\r\n\r\n load(dbFeature) {\r\n dbFeature.lixilProductSubCategory = \"Towel Rings\"; // hardcode to match other towel rings // LX-846\r\n return super.load(dbFeature);\r\n }\r\n\r\n canDisplayDemoPoint(parentObject) {\r\n if (getCurrentRoomType() === LOOK_ROOM_TYPES.as) {\r\n return removeLookPointFor(parentObject, 6, \"1\", SIDE_POSITIONS[1])\r\n }\r\n return removeLookPointFor(parentObject, 3, \"2\", SIDE_POSITIONS[1])\r\n && removeLookPointFor(parentObject, 1, \"1\", SIDE_POSITIONS[1])\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport {createParentPositions} from \"../../constants\";\r\nimport {IS_PRODUCT_JOURNEY} from \"../../../../../config\";\r\n\r\nexport default class GlassHolder extends IntermediatePart {\r\n constructor(isChild, partNumber = 0) {\r\n super(isChild);\r\n this.partNumber = partNumber;\r\n this.partId = 'glass_holder';\r\n this.partName = 'Glass Holder';\r\n this.translateId = \"visualizer.bathroom.shower.glass_holder\";\r\n this.layerPriority = 13;\r\n if (isChild) {\r\n createParentPositions(this);\r\n }\r\n }\r\n\r\n canDisplayDemoPoint() {\r\n return IS_PRODUCT_JOURNEY\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\n\r\nexport default class TowelRack extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'towel_rack';\r\n this.partName = 'Towel Rack';\r\n this.translateId = \"visualizer.bathroom.accessories.towel_rack\";\r\n this.canBeDisabled = true;\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\n\r\nexport default class Wainscoting extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'wainscoting';\r\n this.partName = 'Wainscoting';\r\n this.translateId = \"visualizer.bathroom.accessories.wainscoting\";\r\n this.canBeDisabled = true;\r\n this.isStoneFeature = true;\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\n\r\nexport default class Towel extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = \"towel\";\r\n this.partName = \"Towel\";\r\n this.translateId = \"visualizer.bathroom.accessories.towel\";\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport {createParentPositions} from \"../../constants\";\r\n\r\nexport default class TowelTowelRing extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = \"towel_towel_ring\";\r\n this.partName = \"Towel\";\r\n this.translateId = \"visualizer.bathroom.accessories.towel\";\r\n if (isChild) {\r\n createParentPositions(this);\r\n }\r\n }\r\n\r\n getArrayOfConditions() {\r\n const conditions = super.getArrayOfConditions();\r\n const towelRing = this.getParent().towelRing;\r\n if (towelRing && towelRing.layerPositions && towelRing.activeFeature) {\r\n conditions.push({\r\n propName: \"MatchingFeature\",\r\n propValue: towelRing.activeFeature.getSplittedSku()\r\n });\r\n }\r\n return conditions\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport {createParentPositions} from \"../../constants\";\r\n\r\nexport default class TowelTowelBar extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = \"towel_towel_bar\";\r\n this.partName = \"Towel\";\r\n this.translateId = \"visualizer.bathroom.accessories.towel\";\r\n if (isChild) {\r\n createParentPositions(this);\r\n }\r\n }\r\n\r\n getArrayOfConditions() {\r\n const conditions = super.getArrayOfConditions();\r\n const towelBar = this.getParent().towelBar;\r\n if (towelBar && towelBar.layerPositions && towelBar.activeFeature) {\r\n conditions.push({\r\n propName: \"MatchingFeature\",\r\n propValue: towelBar.activeFeature.getSplittedSku()\r\n });\r\n }\r\n return conditions\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport {createParentPositions} from \"../../constants\";\r\n\r\nexport default class TowelTowelHook extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = \"towel_towel_hook\";\r\n this.partName = \"Towel\";\r\n this.translateId = \"visualizer.bathroom.accessories.towel\";\r\n if (isChild) {\r\n createParentPositions(this);\r\n }\r\n }\r\n\r\n getArrayOfConditions() {\r\n const conditions = super.getArrayOfConditions();\r\n const robeHook = this.getParent().robeHook;\r\n if (robeHook && robeHook.layerPositions && robeHook.activeFeature) {\r\n conditions.push({\r\n propName: \"MatchingFeature\",\r\n propValue: robeHook.activeFeature.getSplittedSku()\r\n });\r\n }\r\n return conditions\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport {ShowerTubCombo} from \"../../parts/showerTubCombo\";\r\nimport {SIDE_POSITIONS} from \"../../constants\";\r\nimport {IS_LIXIL_SERVERS} from \"../../../../../config\";\r\n\r\nconst hardcodedSkus = [\"6438AM-FCOL.218\", \"6434AM-FCOL.218\", \"A8007D-FCO.020\", \"A8007D-FCO.020\", \"A8004L-CO.020\", \"4836SM-COL.218\"];\r\n\r\nexport default class ShowerPanCombo extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'shower_pan_combo';\r\n this.partName = 'Shower Pan';\r\n this.translateId = \"visualizer.bathroom.shower.shower_pan_combo\";\r\n this.visible = true;\r\n this.isStoneFeature = false;\r\n this.layerPriority = 8;\r\n this.canBeDisabled = true;\r\n if (isChild) {\r\n this.oneLayerPosition = true;\r\n }\r\n }\r\n\r\n load(dbFeature) {\r\n // dbFeature.metaData[\"layerPosition\"] = dbFeature.metaData[\"Side\"] ? dbFeature.metaData[\"Side\"][0] : \"\";\r\n\r\n // Our Shower Doors only fit openings: 56\"-60\" (1422-1524mm) The skus below are too wide and would not be compatible.\r\n // If a user selects one of these shower bases please hide/do not display a shower door with it.\r\n if (IS_LIXIL_SERVERS && Array.isArray(dbFeature.metaData[\"ShowerPanHeight\"]) && hardcodedSkus.some(sku => dbFeature.sharedFeatureName === sku)) {\r\n dbFeature.metaData[\"ShowerPanHeight\"] = [\"99\"]; // do not show shower door for these sku's\r\n }\r\n dbFeature.metaData[\"CustomShowerPanSide\"] = (dbFeature.sharedFeatureName || \"\").includes(\"LHO\")\r\n ? \"LHO\"\r\n : (dbFeature.sharedFeatureName || \"\").includes(\"RHO\") ? \"RHO\" : \"\";\r\n dbFeature.metaData[\"layerPosition\"] = dbFeature.metaData[\"Side\"] && dbFeature.metaData[\"Side\"][0] !== \"0\"\r\n ? dbFeature.metaData[\"Side\"][0]\r\n : (dbFeature.metaData[\"CustomShowerPanSide\"] === \"RHO\") ? \"R\" : SIDE_POSITIONS[0];\r\n dbFeature.metaData[\"CustomNameWithoutShowerPanSide\"] = (dbFeature.sharedFeatureName || \"\")\r\n .replace(/LHO/g, \"\").replace(/RHO/g, \"\");\r\n\r\n return super.load_(dbFeature, new ShowerPanCombo())\r\n }\r\n\r\n disabledClick() {\r\n const shower = this.getParent();\r\n shower.showerFloorIsActive = !this.disabled;\r\n if (shower.showerDoor) {\r\n shower.showerDoor.disabled = this.disabled;\r\n shower.showerDoor.disabledClick(); // accessories and shower door handle\r\n }\r\n }\r\n\r\n applyFeatureIfNotCompatible() {\r\n const parent = this.getParent();\r\n const shower = parent.getParent();\r\n shower.showerFloorIsActive = false;\r\n if (shower.layout && shower.showerTubComboIsActive()) {\r\n const comboPart = shower.layout.parts[ShowerTubCombo.id];\r\n comboPart.showerTubComboIsActive = false;\r\n }\r\n }\r\n\r\n hideLayerCondition() {\r\n return this.getParent().showerTubComboIsActive()\r\n }\r\n\r\n handleClick(ignoreLocked) {\r\n super.handleClick(ignoreLocked); // set active item & not in visualizer item\r\n this.applyFeatureIfNotCompatible();\r\n }\r\n\r\n /**\r\n * @param navItems {[navItemInterface]}\r\n * @param forFeature {featureInterface}\r\n */\r\n filterNavigationItems = (navItems, forFeature = null) => {\r\n let finalNavItems = [];\r\n const forMeta = forFeature && forFeature.metaData && forFeature.metaData[\"CustomShowerPanSide\"] ? forFeature.metaData[\"CustomShowerPanSide\"] : \"LHO\";\r\n const leftNavItems = navItems.filter(navItem => {\r\n if (!navItem.part.metaData[\"CustomShowerPanSide\"] || (navItem.part.metaData[\"CustomShowerPanSide\"] === forMeta)) {\r\n finalNavItems.push(navItem);\r\n return false\r\n }\r\n return true\r\n })\r\n leftNavItems.forEach(navItem => {\r\n if (!finalNavItems.some(existingNavItem => {\r\n if (IS_LIXIL_SERVERS) {\r\n return existingNavItem.part.metaData[\"CustomNameWithoutShowerPanSide\"] &&\r\n navItem.part.metaData[\"CustomNameWithoutShowerPanSide\"] === existingNavItem.part.metaData[\"CustomNameWithoutShowerPanSide\"]\r\n }\r\n return existingNavItem.part.metaData[\"MatchingFeature\"] && navItem.part.metaData[\"MatchingFeature\"] &&\r\n navItem.part.metaData[\"MatchingFeature\"][0] === existingNavItem.part.metaData[\"MatchingFeature\"][0]\r\n })) {\r\n finalNavItems.push(navItem)\r\n }\r\n })\r\n return finalNavItems\r\n }\r\n\r\n // /**\r\n // * @param neededPosition {string} LHO|RHO\r\n // * @param lookActiveFeature {featureInterface}\r\n // */\r\n // getMatchingOutletFeature = (neededPosition = \"\", lookActiveFeature) => {\r\n // if (IS_LIXIL_SERVERS) {\r\n // const nameWithoutPos = lookActiveFeature.metaData[\"CustomNameWithoutShowerPanSide\"];\r\n // const allNavItems = this.navigationSubItemsSimple();\r\n // return allNavItems.find(navItem => {\r\n // return (navItem.part.dbFeature.metaData[\"CustomShowerPanSide\"] === neededPosition)\r\n // && (navItem.part.metaData[\"CustomNameWithoutShowerPanSide\"] === nameWithoutPos)\r\n // })\r\n // }\r\n // const nameWithoutPos = lookActiveFeature.metaData[\"MatchingFeature\"];\r\n // const allNavItems = this.navigationSubItemsSimple();\r\n // return allNavItems.find(navItem => {\r\n // return (navItem.part.dbFeature.metaData[\"CustomShowerPanSide\"] === neededPosition)\r\n // && (navItem.part.metaData[\"MatchingFeature\"][0] === nameWithoutPos)\r\n // })\r\n // }\r\n\r\n // navigationSubItems(filters, searchText) {\r\n // return this.navigationSubItemsWithSides(filters, searchText);\r\n // }\r\n\r\n setLayers(layout) {\r\n const showerParent = this.getParent();\r\n if (showerParent.showerTubComboIsActive() || showerParent.showerFloorIsActive) {\r\n super.hideLayers();\r\n return;\r\n }\r\n return super.setLayers(layout);\r\n }\r\n\r\n // getArrayOfConditions() {\r\n // let conditions = super.getArrayOfConditions(); //roomLayout\r\n // const showerParent = this.getParent();\r\n // conditions.push({\r\n // propName: \"ShowerSize\",\r\n // propValue: showerParent.showerSize()\r\n // });\r\n // return conditions\r\n // }\r\n\r\n canDisplayDemoPoint() {\r\n const shower = this.getParent();\r\n return !shower.showerTubComboIsActive()\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\n\r\nexport default class ShowerDoorHandle extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'shower_door_handle';\r\n this.partName = 'Handle';\r\n this.translateId = \"visualizer.bathroom.shower.shower_door_handle\";\r\n this.dbName = 'Shower Door Handle';\r\n this.visible = true;\r\n this.isStoneFeature = false;\r\n this.layerPriority = 9;\r\n if (isChild) {\r\n this.previouslySelectedFeatures = {\r\n Layout1: {},\r\n };\r\n }\r\n }\r\n\r\n load(dbFeature) {\r\n const handle = this.load_(dbFeature, new ShowerDoorHandle());\r\n if (handle) {\r\n ShowerDoorHandle.setAdditionalMetaData(handle);\r\n }\r\n }\r\n\r\n static setAdditionalMetaData(handle) {\r\n const compatible = handle.metaData[\"CompatibleTub\"];\r\n const showerSize = handle.metaData[\"ShowerSize\"];\r\n if (!compatible) {\r\n handle.metaData[\"CompatibleTub\"] = [\"None\"];\r\n }\r\n if (!showerSize) {\r\n handle.metaData[\"ShowerSize\"] = [\"60in\"];\r\n }\r\n }\r\n\r\n disabledClick() {\r\n const showerDoor = this.getParent().showerDoor;\r\n if (showerDoor) {\r\n showerDoor.disabled = this.disabled || !showerDoor.canBeEnabled(); // true or check if it can be enabled;\r\n }\r\n }\r\n\r\n handleClick() {\r\n super.handleClick();\r\n // this.getParent().getParent().setShowerTubCombo();\r\n //\r\n // let doorWithLiner = false;\r\n // if(this.metaData && this.metaData.length) {\r\n // const activeDoorMetadata = this.metaData.find(metaDataObject => metaDataObject.isFor);\r\n // const showerPanValues = activeDoorMetadata.conditions.find(condition => condition.name === \"BathtubLiner\");\r\n // if (showerPanValues) {\r\n // doorWithLiner = true;\r\n // }\r\n // }\r\n //\r\n // this.getParent().getParent().setLinerActive(doorWithLiner);\r\n // this.featureClicked();\r\n }\r\n\r\n setLayers(layout) {\r\n\r\n const showerParent = this.getParent();\r\n\r\n if (!showerParent.showerDoor || !showerParent.showerDoor.activeFeature ||\r\n (showerParent.showerDoor.activeFeature.metaData && showerParent.showerDoor.activeFeature.metaData[\"ShowerHandle\"]\r\n && showerParent.showerDoor.activeFeature.metaData[\"ShowerHandle\"][0] === \"None\")) {\r\n super.hideLayers();\r\n return;\r\n }\r\n\r\n if (this.activeFeature && (this.activeFeature.matchesMetaForArrayOfConditions(this.getArrayOfConditions())\r\n || (this.activeFeature.notAvailableInVisualizer && this.placeholderFeature))) {\r\n return super.setLayers(layout);\r\n }\r\n\r\n this.setDefault();\r\n return super.setLayers(layout);\r\n }\r\n\r\n // getArrayOfConditions() {\r\n // const layout = this.getParent().layout;\r\n // const showerComboParent = layout.parts[ShowerTubCombo.id];\r\n // const showerParent = this.getParent();\r\n // const layoutAbr = layout.getCurrentLayoutAbbreviation();\r\n //\r\n // let showerSize = showerComboParent.showerTubComboIsActive\r\n // ? showerComboParent.showerSize()\r\n // : showerParent.showerSize();\r\n //\r\n // let compatibleValue = \"None\";\r\n // if (showerComboParent.showerTubComboIsActive) {\r\n // if (showerComboParent.bottomTub === ShowerComboTubType.bathtub_liner) {\r\n // compatibleValue = \"BathtubLiner\"\r\n // } else if (showerComboParent.bottomTub === ShowerComboTubType.replacement_tub) {\r\n // compatibleValue = \"ReplacementTub\"\r\n // } else if (showerComboParent.bottomTub === ShowerComboTubType.walk_in_tub) {\r\n // compatibleValue = \"WalkInTub\"\r\n // } else if (showerComboParent.bottomTub === ShowerComboTubType.jetted_tub) {\r\n // compatibleValue = \"JettedTub\"\r\n // }\r\n // }\r\n //\r\n // const conditions = [{\r\n // propName: 'ShowerSize',\r\n // propValue: showerSize\r\n // },{\r\n // propName: 'CompatibleTub',\r\n // propValue: compatibleValue\r\n // }];\r\n //\r\n // if (layoutAbr === LayoutAbbreviation.Large) {\r\n // let showerDimensions = showerComboParent.showerTubComboIsActive\r\n // ? showerComboParent.showerDimensions()\r\n // : showerParent.showerDimensions();\r\n //\r\n // showerDimensions = getMetadataByDimensions(showerDimensions);\r\n //\r\n // const vanity = layout.parts[Vanity.id];\r\n // let counterTopSize = vanity.counterTopSize(this);\r\n // if (counterTopSize === '72in' && layout.type === 1 && (showerDimensions !== \"Full\" || showerDimensions !== \"Pony\")) {\r\n // showerDimensions = \"Full\"\r\n // }\r\n //\r\n // conditions.push({\r\n // propName: \"EX L\",\r\n // propValue: showerDimensions\r\n // })\r\n // }\r\n //\r\n // if (showerParent.showerDoor && showerParent.showerDoor.activeFeature) { // add shower pan condition only if it is shower\r\n // const doorCondition = showerParent.showerDoor.activeFeature.metaData[\"ShowerDoor\"];\r\n // const handleCondition = showerParent.showerDoor.activeFeature.metaData[\"ShowerHandle\"];\r\n // // console.log('doorCondition', doorCondition);\r\n // if (doorCondition) {\r\n // conditions.push({\r\n // propName: 'ShowerDoor',\r\n // propValue: doorCondition\r\n // })\r\n // }\r\n // if (handleCondition) {\r\n // conditions.push({\r\n // propName: 'ShowerHandle',\r\n // propValue: handleCondition\r\n // })\r\n // }\r\n // }\r\n //\r\n // if (!showerParent.showerTubComboIsActive()) {\r\n // if (showerParent.showerFloorIsActive) {\r\n // conditions.push({\r\n // propName: \"ShowerPan\",\r\n // propValue: \"Threshold\"\r\n // })\r\n // } else if (showerParent.showerPanCombo && showerParent.showerPanCombo.activeFeature) {\r\n // conditions.push({\r\n // propName: \"ShowerPan\",\r\n // propValue: showerParent.showerPanCombo.activeFeature.metaData[\"ShowerPan\"]\r\n // })\r\n // }\r\n // }\r\n // // console.log('conditions', conditions);\r\n // return conditions\r\n // }\r\n\r\n setDefault() {\r\n const shower = this.getParent();\r\n const currentActiveFeature = this.activeFeature;\r\n const filteredFeatures = this.features.filter(f => f.matchesMetaForArrayOfConditions(this.getArrayOfConditions()));\r\n if (!super.tryToSetTheSameFeature(filteredFeatures)) {\r\n this.setDefaultAccordingToPreviousSelect(shower, filteredFeatures, \"Brantford\");\r\n }\r\n this.rememberPreviousSelection(shower, currentActiveFeature);\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n const zIndex = zIndexes.Shower.ShowerDoorHandle;\r\n if (zIndexes && this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndex;\r\n }\r\n if (zIndexes && this.placeholderFeature) {\r\n this.placeholderFeature.layer.zIndex = zIndex;\r\n }\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport {LayoutAbbreviation} from \"../../constants\";\r\n\r\nexport default class PonyWallCap extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'pony_wall_cap';\r\n this.isPonyWallPart = true;\r\n this.visible = true;\r\n this.partName = 'Pony Wall Cap';\r\n this.translateId = \"visualizer.bathroom.shower.pony_wall_cap\";\r\n this.isStoneFeature = true;\r\n this.disableOnHomeSections = true;\r\n this.layerPriority = 11;\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n const zIndex = zIndexes.Shower.PonyWallCap;\r\n if (zIndexes && this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndex;\r\n }\r\n if (zIndexes && this.placeholderFeature) {\r\n this.placeholderFeature.layer.zIndex = zIndex;\r\n }\r\n }\r\n\r\n setLayers(layout) {\r\n\r\n const showerParent = this.getParent().getActiveShowerGroup();\r\n if (showerParent.showerDimensions() !== \"Pony\") {\r\n super.hideLayers();\r\n return;\r\n }\r\n\r\n const conditions = this.getArrayOfConditions();\r\n\r\n const layoutAbr = layout.getCurrentLayoutAbbreviation();\r\n const matchesByBindings = this.activeFeature && this.activeFeature.dbFeature && this.activeFeature.s3Bindings && this.activeFeature.dbFeature.s3Bindings.some(binding => {\r\n return binding.layout === LayoutAbbreviation.All || binding.layout === layoutAbr\r\n });\r\n if (matchesByBindings && (this.activeFeature.matchesMetaForArrayOfConditions(conditions)\r\n || (this.activeFeature.notAvailableInVisualizer && this.placeholderFeature))) {\r\n return super.setLayers(layout);\r\n }\r\n\r\n this.setDefault();\r\n return super.setLayers(layout);\r\n }\r\n\r\n // getArrayOfConditions() {\r\n // const parent = this.getParent();\r\n // const layout = parent.layout;\r\n // const layoutAbr = layout.getCurrentLayoutAbbreviation();\r\n // if (layoutAbr === LayoutAbbreviation.Small){\r\n // const activeShower = parent.showerTubComboIsActive()\r\n // ? layout.parts[ShowerTubCombo.id]\r\n // : layout.parts[Shower.id];\r\n // const showerSize = activeShower.showerSize(); // 60in, 30in, ..\r\n // // const showerDimensions = activeShower.showerDimensions(); // 15x4, Pony, ...\r\n // return [{\r\n // propName: 'Shower',\r\n // propValue: 'Custom'\r\n // }, {\r\n // propName: 'Size',\r\n // propValue: showerSize\r\n // }];\r\n // }\r\n //\r\n // return []\r\n // }\r\n\r\n setDefault() {\r\n const filteredFeatures = this.features.filter(f => f.matchesMetaForArrayOfConditions(this.getArrayOfConditions()));\r\n if (!super.tryToSetTheSameFeature(filteredFeatures, '', '', true)) {\r\n const hardCodedDefault = filteredFeatures.find((feature) => {\r\n return feature.dbFeature.displayName\r\n && feature.dbFeature.displayName.includesCI(\"Pony Wall Cap - Model[For=Shower=(Custom)=Size=(30in_60in)]\");\r\n });\r\n const placeholderDefault = filteredFeatures.find((feature) => {\r\n return feature.dbFeature.displayName && feature.dbFeature.displayName.includesCI(\" - Placeholder\");\r\n });\r\n this.activeFeature = hardCodedDefault || filteredFeatures[0];\r\n this.placeholderFeature = placeholderDefault || null;\r\n }\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\n\r\nexport default class PonyWallGlass extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'pony_wall_glass';\r\n this.isPonyWallPart = true;\r\n this.visible = true;\r\n this.partName = 'Pony Wall Glass';\r\n this.translateId = \"visualizer.bathroom.shower.pony_wall_glass\";\r\n this.isStoneFeature = false;\r\n this.disableOnHomeSections = true;\r\n this.layerPriority = 10;\r\n }\r\n\r\n getArrayOfConditions() {\r\n const conditions = super.getArrayOfConditions();\r\n const showerParent = this.getParent();\r\n if (showerParent && showerParent.showerDoor && showerParent.showerDoor.activeFeature) {\r\n if (showerParent.showerDoor.activeFeature.metaData[\"ShowerPanHeight\"]) {\r\n conditions.push({\r\n propName: \"ShowerPanHeight\",\r\n propValue: showerParent.showerDoor.activeFeature.metaData[\"ShowerPanHeight\"]\r\n })\r\n }\r\n if (showerParent.showerDoor.activeFeature.metaData[\"DoorHeight\"]) {\r\n conditions.push({\r\n propName: \"DoorHeight\",\r\n propValue: showerParent.showerDoor.activeFeature.metaData[\"DoorHeight\"]\r\n })\r\n }\r\n }\r\n return conditions\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport {LOOK_OVERLAYS, ShowerBodyType} from \"../../constants\";\r\nimport {ShowerTubCombo} from \"../../parts/showerTubCombo\";\r\nimport {getFeatureIsLocked} from \"../../../../../misc/helpers\";\r\nimport store from \"../../../../../store\";\r\nimport {setLookOverlayOpened} from \"../../../../../actions/lookFunctions\";\r\n\r\nexport default class ShowerFloor extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'shower_floor';\r\n this.translateId = \"visualizer.bathroom.shower.shower_floor\";\r\n this.partName = 'Floor';\r\n this.homePageTitle = 'Shower Flooring';\r\n this.dbName = 'Shower Floor';\r\n this.isStoneFeature = true;\r\n this.selectedByUser = false;\r\n this.layerPriority = 6;\r\n }\r\n\r\n applyFeatureIfNotCompatible() {\r\n const parent = this.getParent();\r\n const shower = parent.getParent();\r\n shower.showerFloorIsActive = true;\r\n if (shower.layout && shower.showerTubComboIsActive()) {\r\n const comboPart = shower.layout.parts[ShowerTubCombo.id];\r\n comboPart.showerTubComboIsActive = false;\r\n }\r\n }\r\n\r\n handleClick(ignoreLocked) {\r\n super.handleClick(ignoreLocked);\r\n if (this.notAvailableInVisualizer || getFeatureIsLocked(this)) {\r\n return\r\n }\r\n const parent = this.getParent();\r\n const shower = parent.getParent();\r\n if ((!shower.showerFloorIsActive || shower.showerTubComboIsActive()) && !window.location.hash.includes(\"visualizer\")) {\r\n store.dispatch(setLookOverlayOpened(LOOK_OVERLAYS.notCompatiblePopup));\r\n return;\r\n }\r\n\r\n this.applyFeatureIfNotCompatible();\r\n\r\n this.getParent().selectedByUser = true;\r\n const threshold = shower.threshold;\r\n if (threshold && !threshold.selectedByUser) {\r\n const thresholdAvailableFeatures = threshold.navigationSubItems();\r\n const currentFloorName = this.getSplittedFeatureName();\r\n const sameThreshold = thresholdAvailableFeatures.find(tr => tr.part.getSplittedFeatureName() === currentFloorName);\r\n if (sameThreshold) {\r\n super.handleClick.call(sameThreshold.part);\r\n threshold.selectedByUser = false;\r\n }\r\n }\r\n }\r\n\r\n setLayers(layout) {\r\n\r\n if (this.getParent().showerTubComboIsActive()) {\r\n super.hideLayers();\r\n return;\r\n }\r\n\r\n if (this.getParent().customBodyType === ShowerBodyType.Door) {\r\n const showerDoorParent = this.getParent().showerDoor;\r\n if (showerDoorParent && showerDoorParent.activeFeature) {\r\n const currentShowerPanCondition = showerDoorParent.activeFeature.metaData[\"ShowerPan\"];\r\n if (!currentShowerPanCondition || (currentShowerPanCondition && !currentShowerPanCondition.includes(\"Threshold\"))) {\r\n super.hideLayers();\r\n return;\r\n }\r\n }\r\n }\r\n\r\n const conditions = this.getArrayOfConditions();\r\n if (this.activeFeature && (this.activeFeature.matchesMetaForArrayOfConditions(conditions)\r\n || (this.activeFeature.notAvailableInVisualizer && this.placeholderFeature))) {\r\n return super.setLayers(layout);\r\n }\r\n this.setDefault();\r\n return super.setLayers(layout);\r\n }\r\n\r\n getArrayOfConditions() {\r\n let conditions = super.getArrayOfConditions(); //roomLayout\r\n const showerParent = this.getParent();\r\n conditions.push({\r\n propName: \"ShowerSize\",\r\n propValue: showerParent.showerSize()\r\n });\r\n return conditions\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport {LOOK_OVERLAYS, ShowerBodyType} from \"../../constants\";\r\nimport {Shower} from \"../../parts/shower\";\r\nimport {ShowerTubCombo} from \"../../parts/showerTubCombo\";\r\nimport {getFeatureIsLocked} from \"../../../../../misc/helpers\";\r\nimport store from \"../../../../../store\";\r\nimport {setLookOverlayOpened} from \"../../../../../actions/lookFunctions\";\r\n\r\nexport default class Threshold extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'threshold';\r\n this.partName = 'Threshold';\r\n this.translateId = \"visualizer.bathroom.shower.threshold\";\r\n this.homePageTitle = 'Threshold';\r\n this.dbName = 'ShowerPan';\r\n this.isStoneFeature = true;\r\n this.selectedByUser = false;\r\n this.layerPriority = 7;\r\n }\r\n\r\n applyFeatureIfNotCompatible() {\r\n const parent = this.getParent();\r\n const shower = parent.getParent();\r\n shower.showerFloorIsActive = true;\r\n if (shower.layout && shower.showerTubComboIsActive()) {\r\n const comboPart = shower.layout.parts[ShowerTubCombo.id];\r\n comboPart.showerTubComboIsActive = false;\r\n }\r\n }\r\n\r\n handleClick(ignoreLocked) {\r\n super.handleClick(ignoreLocked);\r\n if (this.notAvailableInVisualizer || getFeatureIsLocked(this)) {\r\n return\r\n }\r\n const parent = this.getParent();\r\n const shower = parent.getParent();\r\n if ((!shower.showerFloorIsActive || shower.showerTubComboIsActive()) && !window.location.hash.includes(\"visualizer\")) {\r\n store.dispatch(setLookOverlayOpened(LOOK_OVERLAYS.notCompatiblePopup));\r\n return;\r\n }\r\n\r\n this.applyFeatureIfNotCompatible();\r\n\r\n this.getParent().selectedByUser = true;\r\n const showerFloor = shower.showerFloor;\r\n if (showerFloor && !showerFloor.selectedByUser) {\r\n const showerFloorAvailableFeatures = showerFloor.navigationSubItems();\r\n const currentThresholdName = this.getSplittedFeatureName();\r\n const sameShowerFloor = showerFloorAvailableFeatures.find(navItemFloor => {\r\n return navItemFloor.part.getSplittedFeatureName() === currentThresholdName\r\n });\r\n if (sameShowerFloor) {\r\n super.handleClick.call(sameShowerFloor.part);\r\n showerFloor.selectedByUser = false;\r\n }\r\n }\r\n }\r\n\r\n setLayers(layout) {\r\n\r\n if (this.getParent().showerTubComboIsActive() || !this.getParent().showerFloorIsActive) {\r\n super.hideLayers();\r\n return;\r\n }\r\n\r\n if (this.getParent().customBodyType === ShowerBodyType.Door) {\r\n const showerDoorParent = this.getParent().showerDoor;\r\n if (showerDoorParent && showerDoorParent.activeFeature) {\r\n const currentShowerPanCondition = showerDoorParent.activeFeature.metaData[\"ShowerPan\"];\r\n if (!currentShowerPanCondition || (currentShowerPanCondition && !currentShowerPanCondition.includes(\"Threshold\"))) {\r\n super.hideLayers();\r\n return;\r\n }\r\n }\r\n }\r\n const conditions = this.getArrayOfConditions();\r\n if (this.activeFeature && (this.activeFeature.matchesMetaForArrayOfConditions(conditions)\r\n || (this.activeFeature.notAvailableInVisualizer && this.placeholderFeature))) {\r\n return super.setLayers(layout);\r\n }\r\n this.setDefault();\r\n return super.setLayers(layout);\r\n }\r\n\r\n // getArrayOfConditions() {\r\n // const layout = this.getParent().layout;\r\n // const showerSize = this.getParent().showerSize();\r\n // let showerDimensions = getMetadataByDimensions(this.getParent().showerDimensions());\r\n //\r\n // const vanity = layout.parts[Vanity.id];\r\n // let counterTopSize = vanity.counterTopSize(this);\r\n // if (counterTopSize === '72in' && layout.type === 1 && (showerDimensions !== \"Full\" || showerDimensions !== \"Pony\")) {\r\n // showerDimensions = \"Full\"\r\n // }\r\n //\r\n // return [{\r\n // propName: 'ShowerSize',\r\n // propValue: showerSize\r\n // }, {\r\n // propName: 'EX L',\r\n // propValue: showerDimensions\r\n // }];\r\n // }\r\n\r\n getArrayOfConditions() {\r\n let conditions = super.getArrayOfConditions(); //roomLayout\r\n const showerParent = this.getParent();\r\n conditions.push({\r\n propName: \"ShowerSize\",\r\n propValue: showerParent.showerSize()\r\n });\r\n return conditions\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n if (this.getParent().activeSubType() === Shower.Type.Custom) {\r\n const zIndex = zIndexes.Shower.Threshold;\r\n if (zIndexes && this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndex;\r\n }\r\n if (zIndexes && this.placeholderFeature) {\r\n this.placeholderFeature.layer.zIndex = zIndex;\r\n }\r\n }\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\n\r\nexport default class ShowerDrain extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'shower_drain';\r\n this.partName = 'Shower Drain';\r\n this.translateId = \"visualizer.bathroom.shower.shower_drain\";\r\n this.homePageTitle = 'Shower Drain';\r\n this.visible = false;\r\n this.layerPriority = 14;\r\n }\r\n\r\n setLayers(layout) {\r\n const showerParent = this.getParent();\r\n if (!showerParent.showerFloorIsActive || showerParent.showerTubComboIsActive()) {\r\n super.hideLayers();\r\n return;\r\n }\r\n if (this.activeFeature && (this.activeFeature.matchesMetaForArrayOfConditions(this.getArrayOfConditions())\r\n || (this.activeFeature.notAvailableInVisualizer && this.placeholderFeature))) {\r\n return super.setLayers(layout);\r\n }\r\n this.setDefault();\r\n return super.setLayers(layout);\r\n }\r\n\r\n getArrayOfConditions() {\r\n const showerParent = this.getParent();\r\n let conditions = super.getArrayOfConditions(); //roomLayout\r\n conditions.push({\r\n propName: \"ShowerSize\",\r\n propValue: showerParent.showerSize()\r\n })\r\n return conditions\r\n }\r\n\r\n setDefault() {\r\n const filteredFeatures = this.features.filter(f => f.matchesMetaForArrayOfConditions(this.getArrayOfConditions()));\r\n this.activeFeature = filteredFeatures[0];\r\n this.placeholderFeature = filteredFeatures[0];\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n const zIndex = zIndexes.Shower.ShowerDrain;\r\n if (zIndexes && this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndex;\r\n }\r\n if (zIndexes && this.placeholderFeature) {\r\n this.placeholderFeature.layer.zIndex = zIndex;\r\n }\r\n }\r\n}\r\n","import {createParentPositions, METADATA, ShowerHeadTypes} from \"../../constants\";\r\nimport ShowerCommon from \"../showerNew/showerCommon\";\r\nimport store from \"../../../../../store\";\r\nimport {IS_QKB_UI} from \"../../../../../config\";\r\n\r\nexport default class ShowerHead extends ShowerCommon {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'shower_head';\r\n this.partName = 'Shower Head';\r\n this.translateId = \"visualizer.bathroom.shower.shower_head\";\r\n this.layerPriority = 4;\r\n this.canBeDisabled = true;\r\n // this.useMatchingFeatureReplacement = \"MountPosition\";\r\n if (isChild) {\r\n this.previouslySelectedFeatures = {\r\n Layout1: {},\r\n Layout4: {},\r\n };\r\n createParentPositions(this);\r\n }\r\n }\r\n\r\n navigationSubItems(...props) {\r\n if (IS_QKB_UI) {\r\n return this.navigationSubItemsWithSides(...props)\r\n }\r\n return super.navigationSubItems(...props);\r\n }\r\n\r\n load(dbFeature) {\r\n if (!dbFeature.metaData[\"Side\"] || (Array.isArray(dbFeature.metaData[\"Side\"]) && dbFeature.metaData[\"Side\"][0] === \"0\")) {\r\n dbFeature.metaData[\"Side\"] = [METADATA.LeftSide];\r\n }\r\n return super.load(dbFeature)\r\n }\r\n\r\n handleClick() {\r\n this.setArmHeadType();\r\n super.handleClick();\r\n }\r\n\r\n applyFeatureIfNotCompatible() {\r\n const showerParent = this.getParent().getParent();\r\n if (showerParent.showerFixture) {\r\n showerParent.showerFixture.disabled = true;\r\n }\r\n }\r\n\r\n disabledClick() {\r\n const showerArm = this.getParent().showerArm;\r\n if (showerArm) {\r\n showerArm.disabled = this.disabled || !showerArm.canBeEnabled(); // true or check if it can be enabled\r\n }\r\n }\r\n\r\n hideLayerCondition() {\r\n const showerParent = this.getParent();\r\n return showerParent.shower_head_type !== ShowerHeadTypes.shower_arm && this.activeFeature\r\n }\r\n\r\n setLayers(layout) {\r\n const showerParent = this.getParent();\r\n if (this.hideLayerCondition()) {\r\n super.hideLayers();\r\n return;\r\n }\r\n if (showerParent.showerArm && showerParent.showerArm.layerPositions && this.layerPositions && this.activeFeature) {\r\n Object.keys(showerParent.showerArm.layerPositions).forEach(position => {\r\n if (!this.layerPositions[position] && showerParent.showerArm.layerPositions[position]) {\r\n this.layerPositions[position] = this.getMatchingPositionFeature(position)\r\n } else if (this.layerPositions[position] && !showerParent.showerArm.layerPositions[position]) {\r\n const {wizardActiveItem} = store.getState().wizardState;\r\n if (!wizardActiveItem || !wizardActiveItem.hideItems) {\r\n this.layerPositions[position] = null\r\n }\r\n }\r\n })\r\n }\r\n return super.setLayers(layout);\r\n }\r\n\r\n getArrayOfConditions() {\r\n const conditions = super.getArrayOfConditions();\r\n const showerParent = this.getParent();\r\n const showerSize = showerParent.showerSize();\r\n if (showerSize) {\r\n conditions.push({\r\n propName: \"ShowerSize\",\r\n propValue: showerSize\r\n });\r\n }\r\n if (showerParent.showerArm && showerParent.showerArm.activeFeature && showerParent.showerArm.activeFeature.metaData[\"MountType\"]) {\r\n conditions.push({\r\n propName: \"MountType\",\r\n propValue: showerParent.showerArm.activeFeature.metaData[\"MountType\"][0]\r\n })\r\n }\r\n if (showerParent.showerArm && showerParent.showerArm.activeFeature && showerParent.showerArm.activeFeature.metaData[\"MountPosition\"]) {\r\n conditions.push({\r\n propName: \"MountPosition\",\r\n propValue: showerParent.showerArm.activeFeature.metaData[\"MountPosition\"][0]\r\n })\r\n }\r\n return conditions;\r\n }\r\n\r\n canDisplayDemoPoint() {\r\n return this.getParent().shower_head_type === ShowerHeadTypes.shower_arm\r\n }\r\n\r\n}\r\n","import ShowerCommon from \"../showerNew/showerCommon\";\r\nimport {createParentPositions, METADATA, ShowerHeadTypes} from \"../../constants\";\r\nimport store from \"../../../../../store\";\r\nimport {IS_QKB_UI} from \"../../../../../config\";\r\n\r\nexport default class ShowerArm extends ShowerCommon {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'shower_arm';\r\n this.partName = 'Shower Arm';\r\n this.translateId = \"visualizer.bathroom.accessories.shower_arm\";\r\n this.canBeDisabled = true;\r\n this.layerPriority = 8;\r\n // this.useMatchingFeatureReplacement = \"MountPosition\";\r\n if (isChild) {\r\n createParentPositions(this);\r\n }\r\n }\r\n\r\n navigationSubItems(...props) {\r\n if (IS_QKB_UI) {\r\n return this.navigationSubItemsWithSides(...props)\r\n }\r\n return super.navigationSubItems(...props);\r\n }\r\n\r\n load(dbFeature) {\r\n if (!dbFeature.metaData[\"Side\"] || (Array.isArray(dbFeature.metaData[\"Side\"]) && dbFeature.metaData[\"Side\"][0] === \"0\")) {\r\n dbFeature.metaData[\"Side\"] = [METADATA.LeftSide];\r\n }\r\n return super.load(dbFeature)\r\n }\r\n\r\n handleClick() {\r\n this.setArmHeadType();\r\n super.handleClick();\r\n }\r\n\r\n checkForSameMountPosition(newFeature) {\r\n if (newFeature.metaData[\"MountPosition\"] || newFeature.metaData[\"MountType\"]) {\r\n let conditions = [];\r\n if (newFeature.metaData[\"MountPosition\"]) {\r\n conditions.push({\r\n propName: \"MountPosition\",\r\n propValue: newFeature.metaData[\"MountPosition\"]\r\n });\r\n }\r\n if (newFeature.metaData[\"MountType\"]) {\r\n conditions.push({\r\n propName: \"MountType\",\r\n propValue: newFeature.metaData[\"MountType\"]\r\n });\r\n }\r\n Object.keys(this.layerPositions).forEach(position => {\r\n if ((position !== newFeature.metaData.layerPosition) && this.layerPositions[position]\r\n && !this.layerPositions[position].matchesMetaForArrayOfConditions(conditions)) {\r\n this.layerPositions[position] = null; // erase current position\r\n }\r\n })\r\n }\r\n }\r\n\r\n applyFeatureIfNotCompatible() {\r\n const showerParent = this.getParent().getParent();\r\n if (showerParent.showerFixture) {\r\n showerParent.showerFixture.disabled = true;\r\n }\r\n }\r\n\r\n disabledClick() {\r\n const showerHead = this.getParent().showerHead;\r\n if (showerHead) {\r\n showerHead.disabled = this.disabled || !showerHead.canBeEnabled(); // true or check if it can be enabled;\r\n }\r\n }\r\n\r\n hideLayerCondition() {\r\n const showerParent = this.getParent();\r\n return showerParent.shower_head_type !== ShowerHeadTypes.shower_arm && this.activeFeature\r\n }\r\n\r\n setLayers(layout) {\r\n const showerParent = this.getParent();\r\n if (this.hideLayerCondition()) {\r\n super.hideLayers();\r\n return;\r\n }\r\n if (showerParent.showerHead && showerParent.showerHead.layerPositions && this.layerPositions && this.activeFeature) {\r\n Object.keys(showerParent.showerHead.layerPositions).forEach(position => {\r\n if (!this.layerPositions[position] && showerParent.showerHead.layerPositions[position]) {\r\n this.layerPositions[position] = this.getMatchingPositionFeature(position)\r\n } else if (this.layerPositions[position] && !showerParent.showerHead.layerPositions[position]) {\r\n const {wizardActiveItem} = store.getState().wizardState;\r\n if (!wizardActiveItem || !wizardActiveItem.hideItems) {\r\n this.layerPositions[position] = null\r\n }\r\n }\r\n })\r\n }\r\n return super.setLayers(layout);\r\n }\r\n\r\n canDisplayDemoPoint() {\r\n return this.getParent().shower_head_type === ShowerHeadTypes.shower_arm\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport {ShowerHeadTypes} from \"../../constants\";\r\n\r\nexport default class ShowerHeadBundle extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'shower_head_bundle';\r\n this.partName = 'Shower Head Bundle';\r\n this.translateId = \"visualizer.bathroom.shower.shower_head_bundle\";\r\n this.canBeDisabled = true;\r\n this.layerPriority = 12;\r\n }\r\n\r\n handleClick() {\r\n const showerParent = this.getParent().getParent();\r\n showerParent.setShowerHeadType(ShowerHeadTypes.shower_head_bundle);\r\n if (showerParent.showerFixture && showerParent.showerFixture.activeFeature && showerParent.showerFixture.activeFeature.metaData[\"MountType\"]\r\n && !showerParent.showerFixture.activeFeature.metaData[\"MountType\"].includes(\"0\") && !showerParent.showerFixture.disabled) {\r\n // store.dispatch(setLookOverlayOpened(LOOK_OVERLAYS.notCompatiblePopup));\r\n // return;\r\n this.applyFeatureIfNotCompatible();\r\n }\r\n super.handleClick();\r\n }\r\n\r\n applyFeatureIfNotCompatible() {\r\n const showerParent = this.getParent().getParent();\r\n if (showerParent.showerFixture) {\r\n showerParent.showerFixture.disabled = true;\r\n }\r\n }\r\n\r\n hideLayerCondition() {\r\n const showerParent = this.getParent();\r\n return showerParent.shower_head_type !== ShowerHeadTypes.shower_head_bundle && this.activeFeature\r\n }\r\n\r\n getArrayOfConditions() {\r\n const conditions = super.getArrayOfConditions();\r\n const showerParent = this.getParent();\r\n const showerSize = showerParent.showerSize();\r\n if (showerSize) {\r\n conditions.push({\r\n propName: \"ShowerSize\",\r\n propValue: showerSize\r\n });\r\n }\r\n // if (showerParent.showerHead && showerParent.showerHead.activeFeature && showerParent.showerHead.activeFeature.metaData[\"MountType\"]) {\r\n // conditions.push({\r\n // propName: \"MountType\",\r\n // propValue: showerParent.showerHead.activeFeature.metaData[\"MountType\"][0]\r\n // })\r\n // }\r\n return conditions;\r\n }\r\n\r\n canDisplayDemoPoint() {\r\n return this.getParent().shower_head_type === ShowerHeadTypes.shower_head_bundle\r\n }\r\n\r\n}\r\n","import {Shower} from \"../../parts/shower\";\r\nimport {ShowerTubCombo} from \"../../parts/showerTubCombo\";\r\nimport {IntermediatePart} from \"../../intermediatePart\";\r\n\r\nexport default class TubSpout extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'tub_spout';\r\n this.partName = 'Tub Spout';\r\n this.translateId = \"visualizer.bathroom.shower.tub_spout\";\r\n this.canBeDisabled = true;\r\n }\r\n\r\n hideLayerCondition() {\r\n const showerParent = this.getParent();\r\n const showerComboParent = showerParent.layout.parts[ShowerTubCombo.id];\r\n if (!showerParent.showerTubComboIsActive() || showerComboParent.bottomTub !== \"replacement_tub\") {\r\n return true\r\n }\r\n if (showerParent.showerFixture && showerParent.showerFixture.activeFeature && showerParent.showerFixture.activeFeature.metaData[\"MountType\"]\r\n && showerParent.showerFixture.activeFeature.metaData[\"MountType\"].includes(\"T\")) { // S and 0 is ok\r\n return true;\r\n }\r\n return false\r\n }\r\n\r\n getArrayOfConditions() {\r\n const showerParent = this.getParent();\r\n let conditions = super.getArrayOfConditions(); //roomLayout\r\n const showerSize = showerParent.showerSize();\r\n if (showerSize) {\r\n conditions.push({\r\n propName: \"ShowerSize\",\r\n propValue: showerSize\r\n })\r\n }\r\n return conditions\r\n }\r\n\r\n canDisplayDemoPoint() {\r\n const layout = this.getParent().layout;\r\n const showerParent = layout.parts[Shower.id];\r\n const showerComboParent = layout.parts[ShowerTubCombo.id];\r\n return showerParent.showerTubComboIsActive() && showerComboParent.bottomTub === \"replacement_tub\";\r\n }\r\n\r\n}\r\n","import {ShowerHeadTypes, ShowerHandTypes} from \"../../constants\";\r\nimport ShowerCommon from \"../showerNew/showerCommon\";\r\n\r\nexport default class HandShowerKit extends ShowerCommon {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'hand_shower_kit';\r\n this.partName = 'Hand Shower Kit';\r\n this.translateId = \"visualizer.bathroom.shower.hand_shower_kit\";\r\n this.canBeDisabled = true;\r\n }\r\n\r\n load(dbFeature) {\r\n if (!Array.isArray(dbFeature.metaData[\"MountType\"])) {\r\n dbFeature.metaData[\"MountType\"] = [\"0\"]\r\n }\r\n return super.load_(dbFeature, new HandShowerKit());\r\n }\r\n\r\n handleClick() {\r\n const showerParent = this.getParent().getParent();\r\n showerParent.setShowerHeadType(ShowerHeadTypes.shower_arm);\r\n showerParent.setShowerHandType(ShowerHandTypes.hand_shower_kit);\r\n super.handleClick();\r\n }\r\n\r\n hideLayerCondition() {\r\n const showerParent = this.getParent();\r\n return showerParent.shower_head_type !== ShowerHeadTypes.shower_arm || showerParent.shower_hand_type !== ShowerHandTypes.hand_shower_kit\r\n }\r\n\r\n getArrayOfConditions() {\r\n const showerParent = this.getParent();\r\n let conditions = super.getArrayOfConditions(); //roomLayout\r\n //Hand Shower Kit should be displayed with the fixtures that have MountType: 0\r\n if (showerParent.showerFixture && showerParent.showerFixture.activeFeature && showerParent.showerFixture.activeFeature.metaData[\"MountType\"]) {\r\n conditions.push({\r\n propName: \"MountType\",\r\n propValue: showerParent.showerFixture.activeFeature.metaData[\"MountType\"]\r\n })\r\n }\r\n return conditions\r\n }\r\n\r\n canDisplayDemoPoint() {\r\n return this.getParent().shower_head_type !== ShowerHeadTypes.shower_head_bundle\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\n\r\nexport default class ShowerCurb extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'shower_curb';\r\n this.partName = 'Shower Curb';\r\n this.translateId = \"visualizer.bathroom.shower.shower_curb\";\r\n this.canBeDisabled = false;\r\n this.isStoneFeature = true;\r\n }\r\n\r\n getArrayOfConditions() {\r\n const showerParent = this.getParent();\r\n let conditions = super.getArrayOfConditions(); //roomLayout\r\n const showerSize = showerParent.showerSize();\r\n if (showerSize) {\r\n conditions.push({\r\n propName: \"ShowerSize\",\r\n propValue: showerSize\r\n })\r\n }\r\n return conditions\r\n }\r\n\r\n}\r\n","import ShowerCommon from \"./showerCommon\";\r\nimport {CORNER_SHELVES_POSITIONS} from \"../../constants\";\r\n\r\nexport default class BodySpray extends ShowerCommon {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'body_spray';\r\n this.partName = 'Body Spray';\r\n this.translateId = \"visualizer.bathroom.shower.body_spray\";\r\n this.canBeDisabled = true;\r\n if (isChild) {\r\n this.layerPositions = {};\r\n CORNER_SHELVES_POSITIONS.forEach(pos => {\r\n this.layerPositions[pos] = null\r\n })\r\n }\r\n }\r\n\r\n load(dbFeature) {\r\n dbFeature.metaData[\"layerPosition\"] = (dbFeature.metaData[\"Side\"] && dbFeature.metaData[\"MountPosition\"])\r\n ? dbFeature.metaData[\"Side\"][0] + dbFeature.metaData[\"MountPosition\"][0]\r\n : CORNER_SHELVES_POSITIONS[0] // should be \"\" here!!!\r\n const partNumber = dbFeature.metaData[\"layerPosition\"] === CORNER_SHELVES_POSITIONS[0] ? 1 : 2;\r\n return super.load_(dbFeature, new this.constructor(false, partNumber),\r\n true, partNumber === 1 ? 'features' : 'featuresParts');\r\n }\r\n\r\n handleClick() {\r\n this.setArmHeadType(); // body spray can be used with everything? not sure\r\n super.handleClick();\r\n }\r\n\r\n setLayers(layout) {\r\n // const showerParent = this.getParent();\r\n // if (showerParent.shower_head_type !== ShowerHeadTypes.shower_arm || !this.isActiveFeatureGroup(\"diverterTrim\")) {\r\n // super.hideLayers();\r\n // return;\r\n // }\r\n return super.setLayers(layout);\r\n }\r\n\r\n // getArrayOfConditions() {\r\n // const showerParent = this.getParent();\r\n // let conditions = super.getArrayOfConditions(); //roomLayout\r\n // if (showerParent.handShowerHolder && showerParent.handShowerHolder.activeFeature) {\r\n // conditions.push({\r\n // propName: \"MountPosition\",\r\n // propValue: showerParent.handShowerHolder.activeFeature.metaData[\"MountPosition\"]\r\n // ? showerParent.handShowerHolder.activeFeature.metaData[\"MountPosition\"]\r\n // : [\"2\"]\r\n // })\r\n // }\r\n // return conditions\r\n // }\r\n\r\n}\r\n","import ShowerCommon from \"./showerCommon\";\r\nimport {createParentPositions, ShowerHeadTypes} from \"../../constants\";\r\n\r\nexport default class DiverterTrim extends ShowerCommon {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'diverter_trim';\r\n this.partName = 'Diverter Trim';\r\n this.translateId = \"visualizer.bathroom.shower.diverter_trim\";\r\n this.canBeDisabled = true;\r\n this.disabled = true;\r\n if (isChild) {\r\n createParentPositions(this);\r\n }\r\n }\r\n\r\n handleClick() {\r\n this.setArmHeadType();\r\n super.handleClick();\r\n }\r\n\r\n hideLayerCondition() {\r\n const showerParent = this.getParent();\r\n return showerParent.shower_head_type !== ShowerHeadTypes.shower_arm\r\n }\r\n\r\n}\r\n","import ShowerCommon from \"./showerCommon\";\r\nimport {createParentPositions, ShowerHandTypes, ShowerHeadTypes} from \"../../constants\";\r\n\r\nexport default class HandShowerHolder extends ShowerCommon {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'hand_shower_holder';\r\n this.partName = 'Hand Shower Holder';\r\n this.translateId = \"visualizer.bathroom.shower.hand_shower_holder\";\r\n this.canBeDisabled = true;\r\n if (isChild) {\r\n createParentPositions(this);\r\n }\r\n }\r\n\r\n handleClick() {\r\n const showerParent = this.getParent().getParent();\r\n showerParent.setShowerHandType(ShowerHeadTypes.shower_arm);\r\n showerParent.setShowerHandType(ShowerHandTypes.hand_shower_holder);\r\n super.handleClick();\r\n }\r\n\r\n hideLayerCondition() {\r\n const showerParent = this.getParent();\r\n return showerParent.shower_head_type !== ShowerHeadTypes.shower_arm || showerParent.shower_hand_type !== ShowerHandTypes.hand_shower_holder\r\n }\r\n\r\n // getArrayOfConditions() {\r\n // const showerParent = this.getParent();\r\n // let conditions = super.getArrayOfConditions(); //roomLayout\r\n // //Hand Shower Kit should be displayed with the fixtures that have MountType: 0\r\n // if (showerParent.wallUnion && showerParent.wallUnion.activeFeature && showerParent.wallUnion.activeFeature.metaData[\"MountPosition\"]) {\r\n // conditions.push({\r\n // propName: \"MountPosition\",\r\n // propValue: showerParent.showerFixture.activeFeature.metaData[\"MountPosition\"]\r\n // })\r\n // }\r\n // return conditions\r\n // }\r\n\r\n}\r\n","import ShowerCommon from \"./showerCommon\";\r\nimport {createParentPositions, ShowerHandTypes, ShowerHeadTypes} from \"../../constants\";\r\n\r\nexport default class HandShowerOnly extends ShowerCommon {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'hand_shower_only';\r\n this.partName = 'Hand Shower Only';\r\n this.translateId = \"visualizer.bathroom.shower.hand_shower_only\";\r\n this.canBeDisabled = true;\r\n this.useMatchingFeatureReplacement = \"MountPosition\";\r\n if (isChild) {\r\n createParentPositions(this);\r\n }\r\n }\r\n\r\n handleClick() {\r\n const showerParent = this.getParent().getParent();\r\n showerParent.setShowerHeadType(ShowerHeadTypes.shower_arm);\r\n showerParent.setShowerHandType(ShowerHandTypes.hand_shower_holder);\r\n super.handleClick();\r\n }\r\n\r\n hideLayerCondition() {\r\n const showerParent = this.getParent();\r\n return showerParent.shower_head_type !== ShowerHeadTypes.shower_arm || showerParent.shower_hand_type !== ShowerHandTypes.hand_shower_holder\r\n }\r\n\r\n getArrayOfConditions() {\r\n const showerParent = this.getParent();\r\n let conditions = super.getArrayOfConditions(); //roomLayout\r\n //Hand Shower Kit should be displayed with the fixtures that have MountType: 0\r\n if (showerParent.handShowerHolder && showerParent.handShowerHolder.activeFeature) {\r\n conditions.push({\r\n propName: \"MountPosition\",\r\n propValue: showerParent.handShowerHolder.activeFeature.metaData[\"MountPosition\"]\r\n ? showerParent.handShowerHolder.activeFeature.metaData[\"MountPosition\"]\r\n : [\"2\"]\r\n })\r\n }\r\n return conditions\r\n }\r\n\r\n}\r\n","import ShowerCommon from \"./showerCommon\";\r\nimport {createParentPositions, ShowerHandTypes, ShowerHeadTypes} from \"../../constants\";\r\n\r\nexport default class ShowerHose extends ShowerCommon {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'shower_hose';\r\n this.partName = 'Shower Hose';\r\n this.translateId = \"visualizer.bathroom.shower.shower_hose\";\r\n this.canBeDisabled = true;\r\n if (isChild) {\r\n createParentPositions(this);\r\n }\r\n }\r\n\r\n handleClick() {\r\n const showerParent = this.getParent().getParent();\r\n showerParent.setShowerHeadType(ShowerHeadTypes.shower_arm);\r\n showerParent.setShowerHandType(ShowerHandTypes.hand_shower_holder);\r\n super.handleClick();\r\n }\r\n\r\n hideLayerCondition() {\r\n const showerParent = this.getParent();\r\n return showerParent.shower_head_type !== ShowerHeadTypes.shower_arm || showerParent.shower_hand_type !== ShowerHandTypes.hand_shower_holder\r\n }\r\n\r\n getArrayOfConditions() {\r\n const showerParent = this.getParent();\r\n let conditions = super.getArrayOfConditions(); //roomLayout\r\n if (showerParent.handShowerHolder && showerParent.handShowerHolder.activeFeature) {\r\n conditions.push({\r\n propName: \"MountPosition\",\r\n propValue: showerParent.handShowerHolder.activeFeature.metaData[\"MountPosition\"]\r\n ? showerParent.handShowerHolder.activeFeature.metaData[\"MountPosition\"]\r\n : [\"2\"]\r\n })\r\n }\r\n return conditions\r\n }\r\n\r\n}\r\n","import ShowerCommon from \"./showerCommon\";\r\nimport {createParentPositions, ShowerHeadTypes} from \"../../constants\";\r\n\r\nexport default class ShowerSystem extends ShowerCommon {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'shower_system';\r\n this.partName = 'Shower System';\r\n this.translateId = \"visualizer.bathroom.shower.shower_system\";\r\n this.canBeDisabled = true;\r\n if (isChild) {\r\n createParentPositions(this);\r\n }\r\n }\r\n\r\n handleClick() {\r\n const showerParent = this.getParent().getParent();\r\n showerParent.setShowerHeadType(ShowerHeadTypes.shower_system);\r\n super.handleClick();\r\n }\r\n\r\n hideLayerCondition() {\r\n const showerParent = this.getParent();\r\n return showerParent.shower_head_type !== ShowerHeadTypes.shower_system && this.activeFeature\r\n }\r\n}\r\n","import ShowerCommon from \"./showerCommon\";\r\nimport {createParentPositions, ShowerHeadTypes} from \"../../constants\";\r\n\r\nexport default class ShowerTrimKit extends ShowerCommon {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'shower_trim_kit';\r\n this.partName = 'Shower Trim Kit';\r\n this.translateId = \"visualizer.bathroom.shower.shower_trim_kit\";\r\n this.canBeDisabled = true;\r\n if (isChild) {\r\n createParentPositions(this);\r\n }\r\n }\r\n\r\n handleClick() {\r\n const showerParent = this.getParent().getParent();\r\n showerParent.setShowerHeadType(ShowerHeadTypes.shower_trim_kit);\r\n super.handleClick();\r\n }\r\n\r\n hideLayerCondition() {\r\n const showerParent = this.getParent();\r\n return showerParent.shower_head_type !== ShowerHeadTypes.shower_trim_kit && this.activeFeature\r\n }\r\n}\r\n","import ShowerCommon from \"./showerCommon\";\r\nimport {createParentPositions, ShowerHeadTypes} from \"../../constants\";\r\n\r\nexport default class ValveTrim extends ShowerCommon {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'valve_trim';\r\n this.partName = 'Valve Trim';\r\n this.translateId = \"visualizer.bathroom.shower.valve_trim\";\r\n this.canBeDisabled = true;\r\n this.conflictingPositions = [\"shower_seats\"];\r\n if (isChild) {\r\n createParentPositions(this);\r\n }\r\n }\r\n\r\n handleClick() {\r\n this.setArmHeadType();\r\n super.handleClick();\r\n }\r\n\r\n hideLayerCondition() {\r\n const showerParent = this.getParent();\r\n return showerParent.shower_head_type !== ShowerHeadTypes.shower_arm\r\n }\r\n}\r\n","import ShowerCommon from \"./showerCommon\";\r\nimport {createParentPositions, ShowerHandTypes, ShowerHeadTypes} from \"../../constants\";\r\n\r\nexport default class WallUnion extends ShowerCommon {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'wall_union';\r\n this.partName = 'Wall Union';\r\n this.translateId = \"visualizer.bathroom.shower.wall_union\";\r\n this.canBeDisabled = true;\r\n this.useMatchingFeatureReplacement = \"MountPosition\";\r\n if (isChild) {\r\n createParentPositions(this);\r\n }\r\n }\r\n handleClick() {\r\n this.setArmHeadType();\r\n super.handleClick();\r\n }\r\n\r\n hideLayerCondition() {\r\n const showerParent = this.getParent();\r\n return showerParent.shower_head_type !== ShowerHeadTypes.shower_arm\r\n }\r\n\r\n getArrayOfConditions() {\r\n const showerParent = this.getParent();\r\n let conditions = super.getArrayOfConditions(); //roomLayout\r\n if (showerParent.shower_hand_type === ShowerHandTypes.hand_shower_kit) {\r\n if (showerParent.handShowerKit && showerParent.handShowerKit.activeFeature && showerParent.handShowerKit.activeFeature.metaData[\"MountPosition\"]) {\r\n conditions.push({\r\n propName: \"MountPosition\",\r\n propValue: [\"3\"]\r\n })\r\n }\r\n } else if (showerParent.shower_hand_type === ShowerHandTypes.hand_shower_holder) {\r\n if (showerParent.handShowerHolder && showerParent.handShowerHolder.activeFeature) {\r\n conditions.push({\r\n propName: \"MountPosition\",\r\n propValue: showerParent.handShowerHolder.activeFeature.metaData[\"MountPosition\"]\r\n ? showerParent.handShowerHolder.activeFeature.metaData[\"MountPosition\"]\r\n : [\"2\"]\r\n })\r\n }\r\n }\r\n\r\n return conditions\r\n }\r\n\r\n}\r\n","import {Part} from \"../part\";\r\nimport {windowThumbnail} from '../../../bvComponent/core/assets';\r\nimport {PartMenuType} from \"../../../visComponents/constants\";\r\nimport WindowKits from \"../subparts/window/windowKits\";\r\nimport WindowBody from \"../subparts/window/windowBody\";\r\n\r\nexport class WindowParent extends Part {\r\n static id = 'Window';\r\n\r\n constructor() {\r\n super(true, false, PartMenuType.Complex);\r\n this.menuType = PartMenuType.Complex;\r\n this.partName = 'Window';\r\n this.homePageTitle = 'Windows';\r\n this.translateId = \"visualizer.bathroom.window\";\r\n this.partThumbnail = windowThumbnail;\r\n this.windowBody = null;\r\n this.relatedGroupNames = [\"Window Kit\", \"Window\"];\r\n }\r\n\r\n load(dbFeature, loadFeature = true) {\r\n let relatedItemName = \"\",\r\n RelatedItemClass = null;\r\n switch (dbFeature.groupName) {\r\n case \"Window Kit\":\r\n case \"Window Kits\": {\r\n relatedItemName = \"windowKits\";\r\n RelatedItemClass = WindowKits;\r\n break;\r\n }\r\n case \"Window\": {\r\n relatedItemName = \"windowBody\";\r\n RelatedItemClass = WindowBody;\r\n break;\r\n }\r\n }\r\n return this.loadCommon(relatedItemName, RelatedItemClass, dbFeature, loadFeature)\r\n }\r\n\r\n isSubTypeWithItems() {\r\n return false;\r\n }\r\n\r\n setDefaultPartAfterSubTypeClick() {\r\n return this.subParts()[0]\r\n }\r\n\r\n setDefault(layout) {\r\n this.relatedItems.forEach(_ => _.setDefault(layout));\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport {Shower} from \"../../parts/shower\";\r\n// import DesignNavigationItem from \"../../../../visComponents/designNavigationItem\";\r\nimport {ShowerAccessories} from \"../../parts/showerAccessories\";\r\nimport {CORNER_SHELVES_POSITIONS} from \"../../constants\";\r\n\r\nexport default class WindowKits extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = \"window_kits\";\r\n this.dbName = window.location.href.includes(\"quotekandb\") ? \"Window Kits\" : \"Window Kit\";\r\n this.partName = \"Window Kits\";\r\n this.translateId = \"visualizer.bathroom.window.kits\";\r\n this.canBeDisabled = true;\r\n }\r\n\r\n // navigationSubItems(filters, searchText) {\r\n // const filteredAvailableFeatures = super.getFeaturesBySearchText(super.getFilteredFeaturesByFilters(filters), searchText);\r\n // const featuresToDisplay = super.navigationSubItemsWithFilterMultipleConditions(this.getArrayOfConditions(), filteredAvailableFeatures);\r\n // const windowParent = this.getParent();\r\n // const accessoriesParent = windowParent.layout.parts[ShowerAccessories.id];\r\n // featuresToDisplay.forEach(feature => {\r\n // if (accessoriesParent && accessoriesParent.showerPod && !accessoriesParent.showerPod.disabled) {\r\n // feature.matchesMetaFailed = \"shower_pod\";\r\n // } else if (accessoriesParent.cornerShelf && !accessoriesParent.cornerShelf.disabled\r\n // && CORNER_SHELVES_POSITIONS.some(pos => accessoriesParent.cornerShelf.layerPositions[pos] && !pos.includes(\"3\"))) {\r\n // feature.matchesMetaFailed = \"corner_shelf\";\r\n // } else if (feature.matchesMetaFailed) {\r\n // feature.matchesMetaFailed = false;\r\n // }\r\n // });\r\n // return featuresToDisplay.map(_ => new DesignNavigationItem(_.featureName, _));\r\n // }\r\n\r\n // handleChangeParent(nonCompatibleWith) {\r\n // if (nonCompatibleWith === \"Shower Pod\") {\r\n //\r\n // }\r\n // }\r\n handleChangeParent() {\r\n // this.removeInterferingParts();\r\n this.getParent().disabled = false;\r\n this.handleClick();\r\n }\r\n\r\n removeInterferingParts = () => {\r\n const kitsParent = this.getParent();\r\n const windowParent = kitsParent.getParent();\r\n const accessoriesParent = windowParent.layout.parts[ShowerAccessories.id];\r\n if (accessoriesParent) {\r\n if (accessoriesParent.showerPod) {\r\n accessoriesParent.showerPod.disabled = true;\r\n }\r\n if (accessoriesParent.cornerShelf) {\r\n CORNER_SHELVES_POSITIONS.forEach(pos => {\r\n if (accessoriesParent.cornerShelf.layerPositions[pos] && !pos.includes(\"3\")) {\r\n accessoriesParent.cornerShelf.layerPositions[pos] = null;\r\n }\r\n })\r\n }\r\n }\r\n }\r\n\r\n // disabledClick() {\r\n // if (!this.disabled) {\r\n // this.removeInterferingParts();\r\n // }\r\n // }\r\n\r\n getArrayOfConditions() {\r\n let conditions = super.getArrayOfConditions(); //roomLayout\r\n const windowParent = this.getParent();\r\n const layout = windowParent.layout;\r\n const showerParent = layout.parts[Shower.id];\r\n const showerSize = showerParent.showerSize();\r\n if (showerParent && showerSize) {\r\n conditions.push({\r\n propName: \"ShowerSize\",\r\n propValue: showerSize\r\n });\r\n }\r\n // if (windowBody && this.windowNeededLayouts.includes(layout.type)) {\r\n // conditions.push({\r\n // propName: \"Window\",\r\n // propValue: (windowBody && windowBody.activeFeature && windowBody.disabled) ? \"Off\" : \"On\"\r\n // })\r\n // }\r\n return conditions\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n if (zIndexes && this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndexes.Window.WindowKits;\r\n }\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport {Shower} from \"../../parts/shower\";\r\n\r\nexport default class WindowBody extends IntermediatePart {\r\n\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'window_body';\r\n this.partName = 'Window';\r\n this.translateId = \"visualizer.bathroom.window\";\r\n this.canBeDisabled = true;\r\n }\r\n\r\n getArrayOfConditions() {\r\n let conditions = super.getArrayOfConditions(); //roomLayout\r\n const layout = this.getParent().layout;\r\n const showerParent = layout.parts[Shower.id];\r\n const showerSize = showerParent.showerSize();\r\n if (showerParent && showerSize) {\r\n conditions.push({\r\n propName: \"ShowerSize\",\r\n propValue: showerSize\r\n });\r\n }\r\n return conditions\r\n }\r\n\r\n}\r\n","import {Part} from \"../part\";\r\nimport {PartMenuType} from \"../../../visComponents/constants\";\r\nimport {floorThumbnail} from \"../../../kvComponent/core/assets\";\r\n\r\nimport {IntermediatePart} from \"../intermediatePart\";\r\nimport {Shower} from \"./shower\";\r\nimport Walls from \"./walls\";\r\nimport {getCurrentRoomType} from \"../../../appLayout\";\r\nimport {LOOK_ROOM_TYPES} from \"../constants\";\r\n\r\nexport default class Floor extends Part {\r\n static id = 'Floor';\r\n\r\n constructor() {\r\n super(true, false, PartMenuType.Complex);\r\n this.partId = 'parent_floor';\r\n this.menuType = PartMenuType.Complex;\r\n this.partName = 'Floor';\r\n this.translateId = \"visualizer.bathroom.floor\";\r\n this.partThumbnail = floorThumbnail;\r\n this.relatedGroupNames = [\"Floor\"];\r\n }\r\n\r\n load(dbFeature, loadFeature = true) {\r\n let relatedItemName = \"\",\r\n RelatedItemClass = null;\r\n switch (dbFeature.groupName) {\r\n case \"Flor\":\r\n case \"Floor\":\r\n relatedItemName = \"floorBody\";\r\n RelatedItemClass = FloorBody;\r\n break;\r\n }\r\n return this.loadCommon(relatedItemName, RelatedItemClass, dbFeature, loadFeature)\r\n }\r\n\r\n}\r\n\r\nclass FloorBody extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'bathroom_floor';\r\n this.partName = 'Floor';\r\n this.translateId = \"visualizer.bathroom.floor\";\r\n this.isStoneFeature = true;\r\n }\r\n\r\n getArrayOfConditions() {\r\n let conditions = super.getArrayOfConditions(); //roomLayout\r\n const layout = this.getParent().layout;\r\n const showerParent = layout.parts[Shower.id];\r\n const showerSize = showerParent ? showerParent.showerSize() : null;\r\n if (showerSize) {\r\n conditions.push({\r\n propName: \"ShowerSize\",\r\n propValue: showerSize\r\n })\r\n }\r\n const wallParent = layout.parts[Walls.id];\r\n if ((getCurrentRoomType(layout) === LOOK_ROOM_TYPES.as) && wallParent && wallParent.splitWall) {\r\n conditions.push({\r\n propName: \"SplitWallType\",\r\n propValue: wallParent.getSplitWallType()\r\n })\r\n }\r\n return conditions\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n if(zIndexes) {\r\n const zIndex = zIndexes.Background.Floor;\r\n if (this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndex;\r\n }\r\n }\r\n }\r\n}\r\n\r\n\r\n","import {Part} from \"../part\";\r\nimport {wallsThumbnail} from \"../../../bvComponent/core/assets\";\r\nimport {PartMenuType} from \"../../../visComponents/constants\";\r\n\r\nimport Attachment from \"../subparts/globals/attachment\";\r\nimport Decor from \"../subparts/globals/decor\";\r\nimport ShowerWallMirror from \"../subparts/globals/showerWallMirror\";\r\nimport {DECORS_MAX} from \"../constants\";\r\n\r\nconst compareMountPosition = (checkFeature, dbFeatureLoading) => {\r\n return checkFeature.metaData[\"MountPosition\"] && checkFeature.matchesMetaForCondition(\"MountPosition\", dbFeatureLoading.metaData[\"MountPosition\"])\r\n}\r\n\r\nconst checkForExistingDecor = (currentDecorFeatureGroup, dbFeature) => {\r\n if (!currentDecorFeatureGroup) { // we skipped all decors, but didn't find the same\r\n return true\r\n }\r\n if (dbFeature.sharedFeatureName === currentDecorFeatureGroup.decorName) { // decors are matching by name\r\n return true\r\n }\r\n if (dbFeature.metaData[\"MountPosition\"]) {\r\n if (Array.isArray(dbFeature.metaData[\"RoomLayout\"])) {\r\n return dbFeature.metaData[\"RoomLayout\"].some(layoutName => {\r\n return currentDecorFeatureGroup.featuresList && Array.isArray(currentDecorFeatureGroup.featuresList[layoutName])\r\n && currentDecorFeatureGroup.featuresList[layoutName].some(feature => compareMountPosition(feature, dbFeature))\r\n })\r\n } else {\r\n return currentDecorFeatureGroup.some(feature => compareMountPosition(feature, dbFeature))\r\n }\r\n }\r\n return false\r\n}\r\n\r\nexport default class Globals extends Part {\r\n static id = \"Globals\";\r\n constructor() {\r\n super(true, false, PartMenuType.Complex);\r\n\r\n this.menuType = PartMenuType.Complex;\r\n this.partName = \"Globals\";\r\n this.partThumbnail = wallsThumbnail;\r\n\r\n // related items\r\n this.toiletPaper = null;\r\n this.decor1 = null; // can be up to 10\r\n this.showerWallMirror = null; // mirror reflection\r\n this.lamp = null; // mirror reflection\r\n this.mirrors = null; // mirror reflection\r\n }\r\n\r\n load(dbFeature) {\r\n let\r\n relatedItemName = \"\",\r\n decorCount = 0,\r\n RelatedItemClass = null;\r\n switch (dbFeature.groupName) {\r\n case \"Decor\":\r\n case \"Decore\": {\r\n for (let i = 1; i <= DECORS_MAX; i++) {\r\n const currentDecorFeatureGroup = this[\"decor\" + i];\r\n if (checkForExistingDecor(currentDecorFeatureGroup, dbFeature)) {\r\n relatedItemName = \"decor\" + i;\r\n decorCount = i;\r\n break;\r\n }\r\n }\r\n break;\r\n }\r\n case \"Attachment\": {\r\n relatedItemName = \"attachment\";\r\n RelatedItemClass = Attachment;\r\n break;\r\n }\r\n case \"Shower Wall Mirror\": {\r\n relatedItemName = \"showerWallMirror\";\r\n RelatedItemClass = ShowerWallMirror;\r\n break;\r\n }\r\n }\r\n if (relatedItemName) {\r\n if (!this[relatedItemName]) {\r\n if (dbFeature.groupName === \"Decor\" || dbFeature.groupName === \"Decore\") {\r\n this[relatedItemName] = new Decor(true, decorCount);\r\n this[relatedItemName].decorName = dbFeature.sharedFeatureName;\r\n } else {\r\n this[relatedItemName] = new RelatedItemClass(true);\r\n }\r\n this.relatedItems.push(this[relatedItemName]);\r\n }\r\n if (!this.categoryEnabled) {\r\n this.categoryEnabled = true\r\n }\r\n this[relatedItemName].getParent = () => this;\r\n this[relatedItemName].load(dbFeature);\r\n return true\r\n }\r\n return false\r\n }\r\n\r\n isSubTypeWithItems() {\r\n return false;\r\n }\r\n\r\n handleSubPartClick() {}\r\n\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport isEqual from \"lodash/isEqual\";\r\nimport {METADATA} from \"../../constants\";\r\n\r\nexport default class Attachment extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = \"attachment\";\r\n this.partName = \"Attachment\";\r\n this.hasAdditionalParts = true;\r\n }\r\n\r\n load(dbFeature) {\r\n if (!dbFeature.metaData[\"Side\"] && dbFeature.sharedFeatureName.includes(\"ountertop\")) {\r\n dbFeature.metaData[\"Side\"] = [METADATA.LeftSide];\r\n }\r\n return super.load(dbFeature);\r\n }\r\n\r\n checkIfFeaturePartIsMatching() {\r\n this.activeFeatureParts = this.setActiveFeatureParts();\r\n }\r\n\r\n setActiveFeatureParts() {\r\n const layout = this.getParent().layout;\r\n const activeFeatures = layout.getActiveFeatures(true, true);\r\n let matchingFeatures = [];\r\n const currentConditions = this.getArrayOfConditions();\r\n const selectFrom = this.features.filter(attFeature => attFeature.matchesMetaForArrayOfConditions(currentConditions));\r\n activeFeatures.forEach(cartItem => {\r\n if (!cartItem.cartFeature || cartItem.featureGroup.disabled || !cartItem.cartFeature.metaData[\"MatchingFeature\"]\r\n || (cartItem.partId === this.partId)) {\r\n return\r\n }\r\n selectFrom.forEach(attFeature => {\r\n if (attFeature.metaData[\"MatchingFeature\"] && attFeature.metaData[\"MatchingFeature\"].includes(\"Splitwall\")) {\r\n const splitWall = layout.parts.Walls.splitWall;\r\n if (splitWall && !splitWall.disabled && splitWall.activeFeature && splitWall.activeFeature.layer.src\r\n && !matchingFeatures.some(alreadyAddedFeature => alreadyAddedFeature.metaData[\"MatchingFeature\"]\r\n && alreadyAddedFeature.metaData[\"MatchingFeature\"].includes(\"Splitwall\"))) {\r\n matchingFeatures.push(attFeature);\r\n }\r\n } else if (isEqual(attFeature.metaData[\"MatchingFeature\"], cartItem.cartFeature.metaData[\"MatchingFeature\"])\r\n && isEqual(attFeature.metaData[\"Side\"], cartItem.cartFeature.metaData[\"Side\"])\r\n && !matchingFeatures.some(alreadyAddedFeature => {\r\n return isEqual(attFeature.metaData[\"MatchingFeature\"], alreadyAddedFeature.metaData[\"MatchingFeature\"])\r\n && isEqual(attFeature.metaData[\"Side\"], alreadyAddedFeature.metaData[\"Side\"])\r\n })) {\r\n matchingFeatures.push(attFeature)\r\n }\r\n })\r\n })\r\n return matchingFeatures;\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\n\r\nexport default class Decor extends IntermediatePart {\r\n constructor(isChild, decorCount) {\r\n super(isChild);\r\n this.decorCount = decorCount;\r\n this.partId = \"decor_\" + decorCount;\r\n this.partName = \"Decor \" + decorCount;\r\n }\r\n\r\n load(dbFeature) {\r\n if (dbFeature.metaData && dbFeature.metaData[\"ShowerSize\"]) {\r\n this.needShowerSizeMeta = true;\r\n }\r\n return super.load_(dbFeature, new Decor(false, this.decorCount));\r\n }\r\n\r\n getArrayOfConditions() {\r\n const conditions = super.getArrayOfConditions();\r\n if (this.needShowerSizeMeta) {\r\n const showerParent = this.getParent().layout.parts[\"Shower\"];\r\n conditions.push({\r\n propName: \"ShowerSize\",\r\n propValue: showerParent.showerSize()\r\n });\r\n }\r\n return conditions\r\n }\r\n\r\n}\r\n","import {Shower} from \"../../parts/shower\";\r\nimport Walls from \"../../parts/walls\";\r\nimport {IntermediatePart} from \"../../intermediatePart\";\r\n\r\nexport default class ShowerWallMirror extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = \"shower_wall_mirror\";\r\n this.partName = \"Shower Wall Mirror\";\r\n }\r\n\r\n load(dbFeature) {\r\n dbFeature.metaData[\"MatchingWallName\"] = dbFeature.metaData[\"ActualDisplayedName\"];\r\n return super.load_(dbFeature, new ShowerWallMirror());\r\n }\r\n\r\n setLayers(layout) {\r\n const showerParent = layout.parts[Shower.id];\r\n if (!showerParent || !showerParent.showerWall || !showerParent.showerWall.activeFeature || showerParent.showerWall.disabled) {\r\n super.hideLayers();\r\n return;\r\n }\r\n super.setLayers(layout);\r\n }\r\n\r\n getArrayOfConditions() {\r\n const conditions = super.getArrayOfConditions();\r\n const layout = this.getParent().layout;\r\n const showerParent = layout.parts[Shower.id];\r\n const wallParent = layout.parts[Walls.id];\r\n\r\n const showerSize = showerParent ? showerParent.showerSize() : null;\r\n if (showerSize) {\r\n conditions.push({\r\n propName: \"ShowerSize\",\r\n propValue: showerSize\r\n })\r\n }\r\n if (wallParent && wallParent.splitWall) {\r\n conditions.push({\r\n propName: \"SplitWallType\",\r\n propValue: wallParent.getSplitWallType()\r\n })\r\n }\r\n if (showerParent && showerParent.showerWall && showerParent.showerWall.activeFeature) {\r\n conditions.push({\r\n propName: \"MatchingWallName\",\r\n propValue: showerParent.showerWall.activeFeature.dbFeature.sharedFeatureName\r\n })\r\n }\r\n return conditions\r\n }\r\n\r\n}\r\n","import {Part} from \"../part\";\r\nimport {PartMenuType} from \"../../../visComponents/constants\";\r\n// import {BathTubType, LayoutType} from \"../constants\";\r\nimport {bathTubThumbnail} from \"../../../bvComponent/core/assets\";\r\n\r\nimport BathTubBody from \"../subparts/bathTub/bathTubBody\";\r\nimport BathTubFixture from \"../subparts/bathTub/bathTubFixture\";\r\nimport EnclosureTop from \"../subparts/bathTub/enclosureTop\";\r\nimport EnclosureBottom from \"../subparts/bathTub/enclosureBottom\";\r\nimport SkirtingBoard from \"../subparts/bathTub/skirtingBoard\";\r\n\r\nexport class Bathtub extends Part {\r\n static id = 'Bathtub';\r\n\r\n constructor() {\r\n super(true, false, PartMenuType.Complex);\r\n this.menuType = PartMenuType.Complex;\r\n this.partName = 'Bathtub';\r\n this.translateId = \"visualizer.bathroom.bathtub\";\r\n this.partThumbnail = bathTubThumbnail;\r\n this.bathTubBody = null;\r\n this.bathTubFixture = null;\r\n this.enclosureTop = null;\r\n this.enclosureBottom = null;\r\n this.skirtingBoard = null;\r\n this.relatedItems = [];\r\n this.relatedGroupNames = [\"Bathtub\", \"Bathtub Fixture\", \"Enclosure Top\", \"Enclosure Bottom\", \"Skirting Board\"];\r\n\r\n }\r\n\r\n load(dbFeature, loadFeature = true) {\r\n let relatedItemName = \"\",\r\n RelatedItemClass = null;\r\n switch (dbFeature.groupName) {\r\n case \"Bathtub\":\r\n relatedItemName = \"bathTubBody\";\r\n RelatedItemClass = BathTubBody;\r\n break;\r\n case \"Bathtub Fixture\":\r\n relatedItemName = \"bathTubFixture\";\r\n RelatedItemClass = BathTubFixture;\r\n break;\r\n case \"Enclosure Top\":\r\n case \"EnclosureTop\":\r\n relatedItemName = \"enclosureTop\";\r\n RelatedItemClass = EnclosureTop;\r\n break;\r\n case \"Enclosure Bottom\":\r\n case \"EnclosureBottom\":\r\n relatedItemName = \"enclosureBottom\";\r\n RelatedItemClass = EnclosureBottom;\r\n break;\r\n case \"Skirting Board\":\r\n relatedItemName = \"skirtingBoard\";\r\n RelatedItemClass = SkirtingBoard;\r\n break;\r\n }\r\n return this.loadCommon(relatedItemName, RelatedItemClass, dbFeature, loadFeature)\r\n }\r\n\r\n changeLayout() {\r\n // changeLayout(layoutType) {\r\n // if (layoutType === LayoutType.Layout1 && this.bathTubBody) {\r\n // // this.activeSubType_ = BathTubType.Custom60in;\r\n // // this.bathTubType_ = BathTubType.Custom60in;\r\n // if (!this.layout.parts.Shower.showerBody.disabled) { // disable bathtub if shower is active\r\n // if (this.bathTubBody) {\r\n // this.bathTubBody.disabled = true;\r\n // }\r\n // }\r\n // } else {\r\n // if (this.bathTubBody) {\r\n // this.bathTubBody.disabled = false;\r\n // }\r\n // }\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport {METADATA} from \"../../constants\";\r\n\r\nexport default class BathTubBody extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = \"bathtub_body\";\r\n this.partName = 'Bathtub';\r\n this.translateId = \"visualizer.bathroom.bathtub.bathtub\";\r\n this.canBeDisabled = true;\r\n }\r\n\r\n load(dbFeature) {\r\n if (!dbFeature.metaData[\"BathType\"]) {\r\n dbFeature.metaData[\"BathType\"] = [METADATA.BathtubWithoutEnclosures]; // remove enclosure top and bottom\r\n }\r\n return super.load(dbFeature);\r\n }\r\n\r\n disabledClick() {\r\n const bathParent = this.getParent();\r\n [\"bathTubFixture\", \"enclosureTop\", \"enclosureBottom\"].forEach(relName => {\r\n if (bathParent[relName]) {\r\n bathParent[relName].disabled = this.disabled;\r\n }\r\n })\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport {LOOK_ROOM_TYPES} from \"../../constants\";\r\nimport {getCurrentRoomType} from \"../../../../appLayout\";\r\n\r\nexport default class BathTubFixture extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = \"bathtub_fixture\";\r\n this.partName = \"Fixture\";\r\n this.translateId = \"visualizer.bathroom.bathtub.bathtub_fixture\";\r\n this.dbName = \"Bathtub Fixture\";\r\n this.canBeDisabled = true;\r\n }\r\n\r\n disabledClick() {\r\n const bathTubBody = this.getParent().bathTubBody;\r\n if (bathTubBody) {\r\n bathTubBody.disabled = this.disabled || !bathTubBody.canBeEnabled(); // true or check if it can be enabled;\r\n }\r\n }\r\n\r\n getArrayOfConditions() {\r\n if (getCurrentRoomType() === LOOK_ROOM_TYPES.as) {\r\n const bathtubParent = this.getParent();\r\n let conditions = super.getArrayOfConditions(); //roomLayout\r\n if (bathtubParent.bathTubBody && bathtubParent.bathTubBody.activeFeature && bathtubParent.bathTubBody.activeFeature.metaData[\"MountType\"]) {\r\n conditions.push({\r\n propName: \"MountType\",\r\n propValue: bathtubParent.bathTubBody.activeFeature.metaData[\"MountType\"]\r\n })\r\n }\r\n return conditions\r\n }\r\n return super.getArrayOfConditions()\r\n }\r\n\r\n}\r\n","import EnclosureCommon from \"./enclosureCommon\";\r\n\r\nexport default class EnclosureTop extends EnclosureCommon {\r\n\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'enclosure_top';\r\n this.dbName = 'EnclosureTop';\r\n this.partName = 'Enclosure Top';\r\n this.translateId = \"visualizer.bathroom.shower.enclosure_top\";\r\n this.canBeDisabled = false;\r\n this.isStoneFeature = true;\r\n }\r\n\r\n}\r\n","import EnclosureCommon from \"./enclosureCommon\";\r\n\r\nexport default class EnclosureBottom extends EnclosureCommon {\r\n\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'enclosure_bottom';\r\n this.dbName = 'EnclosureBottom';\r\n this.partName = 'Enclosure Bottom';\r\n this.translateId = \"visualizer.bathroom.shower.enclosure_bottom\";\r\n this.canBeDisabled = false;\r\n this.isStoneFeature = true;\r\n }\r\n\r\n}\r\n","import EnclosureCommon from \"./enclosureCommon\";\r\nimport {METADATA} from \"../../constants\";\r\n\r\nexport default class SkirtingBoard extends EnclosureCommon {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'skirting_board';\r\n this.partName = 'Skirting Board';\r\n this.translateId = \"visualizer.bathroom.accessories.skirting_board\";\r\n this.canBeDisabled = true;\r\n }\r\n\r\n load(dbFeature) {\r\n if (!dbFeature.metaData[\"BathType\"]) {\r\n dbFeature.metaData[\"BathType\"] = [METADATA.BathtubWithoutEnclosures]; // for free standing bath\r\n }\r\n return super.load(dbFeature);\r\n }\r\n\r\n}\r\n","import {Part} from \"../part\";\r\nimport {PartMenuType} from \"../../../visComponents/constants\";\r\nimport { showerAccessoriesThumbnail } from '../../../bvComponent/core/assets';\r\n\r\nimport Table from \"../subparts/accessories/table\";\r\nimport Chair from \"../subparts/accessories/chair\";\r\nimport Carpet from \"../subparts/accessories/carpet\";\r\nimport Lamp from \"../subparts/accessories/lamp\";\r\nimport Basket from \"../subparts/accessories/basket\";\r\nimport Frame from \"../subparts/accessories/frame\";\r\nimport Plant from \"../subparts/accessories/plant\";\r\n\r\nexport class Accessories extends Part {\r\n static id = 'Accessories';\r\n\r\n constructor() {\r\n super(true, false, PartMenuType.Complex);\r\n\r\n this.menuType = PartMenuType.Complex;\r\n this.partThumbnail = showerAccessoriesThumbnail;\r\n this.partName = 'Accessories';\r\n this.translateId = \"visualizer.bathroom.accessories2\";\r\n this.relatedItems = [];\r\n\r\n // related items\r\n this.table = null;\r\n this.chair = null;\r\n this.lamp = null;\r\n this.carpet = null;\r\n this.basket = null;\r\n this.frame = null;\r\n this.plant = null;\r\n\r\n //current active caddie type\r\n this.relatedGroupNames = [\"Table\", \"Chair\", \"Lamp\", \"Carpet\", \"Basket\", \"Frame\", \"Plant\"];\r\n }\r\n load(dbFeature, loadFeature = true) {\r\n let relatedItemName = \"\",\r\n RelatedItemClass = null;\r\n switch (dbFeature.groupName) {\r\n case \"Table\": {\r\n relatedItemName = \"table\";\r\n RelatedItemClass = Table;\r\n break;\r\n }\r\n case \"Chair\": {\r\n relatedItemName = \"chair\";\r\n RelatedItemClass = Chair;\r\n break;\r\n }\r\n case \"Lamp\":\r\n case \"Lamps\": {\r\n relatedItemName = \"lamp\";\r\n RelatedItemClass = Lamp;\r\n break;\r\n }\r\n case \"Carpet\":\r\n case \"Carpets\": {\r\n relatedItemName = \"carpet\";\r\n RelatedItemClass = Carpet;\r\n break;\r\n }\r\n case \"Basket\": {\r\n relatedItemName = \"basket\";\r\n RelatedItemClass = Basket;\r\n break;\r\n }\r\n case \"Frame\": {\r\n relatedItemName = \"frame\";\r\n RelatedItemClass = Frame;\r\n break;\r\n }\r\n case \"Plant\": {\r\n relatedItemName = \"plant\";\r\n RelatedItemClass = Plant;\r\n break;\r\n }\r\n }\r\n return this.loadCommon(relatedItemName, RelatedItemClass, dbFeature, loadFeature)\r\n }\r\n\r\n}\r\n\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\n\r\nexport default class Table extends IntermediatePart {\r\n\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'table';\r\n this.partName = 'Table';\r\n this.translateId = \"visualizer.bathroom.shower.table\";\r\n this.canBeDisabled = true;\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\n\r\nexport default class Chair extends IntermediatePart {\r\n\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'chair';\r\n this.partName = 'Chair';\r\n this.translateId = \"visualizer.bathroom.shower.chair\";\r\n this.canBeDisabled = true;\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\n\r\nexport default class Carpet extends IntermediatePart {\r\n\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'carpet';\r\n this.partName = 'Carpet';\r\n this.translateId = \"visualizer.bathroom.shower.carpet\";\r\n this.canBeDisabled = true;\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\n\r\nexport default class Lamp extends IntermediatePart {\r\n\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'lamp';\r\n this.partName = 'Lamp';\r\n this.translateId = \"visualizer.bathroom.shower.lamp\";\r\n this.canBeDisabled = true;\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\n\r\nexport default class Basket extends IntermediatePart {\r\n\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'basket';\r\n this.partName = 'Basket';\r\n this.translateId = \"visualizer.bathroom.basket\";\r\n this.canBeDisabled = true;\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\n\r\nexport default class Frame extends IntermediatePart {\r\n\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'frame';\r\n this.partName = 'Frame';\r\n this.translateId = \"visualizer.bathroom.frame\";\r\n this.canBeDisabled = true;\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\n\r\nexport default class Plant extends IntermediatePart {\r\n\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'plant';\r\n this.partName = 'Plant';\r\n this.translateId = \"visualizer.bathroom.plant\";\r\n this.canBeDisabled = true;\r\n }\r\n\r\n}\r\n","import {Vanity} from \"../../parts/vanity\";\r\nimport {createParentPositions, METADATA, LOOK_ROOM_TYPES, LayoutAbbreviations} from \"../../constants\";\r\nimport VanityCommon from \"./vanityCommon\";\r\nimport {getCurrentRoomType} from \"../../../../appLayout\";\r\n\r\nexport default class VanityCountertop extends VanityCommon {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'vanity_countertop';\r\n this.partName = 'Countertop';\r\n this.translateId = \"visualizer.bathroom.vanity.vanity_countertop\";\r\n this.homePageTitle = 'Countertops';\r\n this.visible = [Vanity.Types.Custom];\r\n this.isStoneFeature = true;\r\n this.canBeDisabled = true;\r\n if (isChild) {\r\n createParentPositions(this);\r\n this.nextFeaturesPageToLoadArray = {};\r\n LayoutAbbreviations.forEach(layoutAbbreviation => {\r\n this.nextFeaturesPageToLoadArray[layoutAbbreviation] = {\r\n page: 0,\r\n allReceived: false,\r\n };\r\n });\r\n }\r\n }\r\n\r\n load(dbFeature) {\r\n if (!dbFeature.metaData[\"MatchingFeature\"]) {\r\n dbFeature.metaData[\"MatchingFeature\"] = [METADATA.NO];\r\n }\r\n if (!dbFeature.metaData[\"Side\"]) {\r\n dbFeature.metaData[\"Side\"] = [METADATA.LeftSide];\r\n }\r\n return super.load(dbFeature);\r\n }\r\n\r\n disabledClick() {\r\n // this.getParent().toggleVanityParts(this.disabled); // temporary removed for demo\r\n }\r\n\r\n getArrayOfConditions() {\r\n const vanityParent = this.getParent();\r\n let conditions = super.getArrayOfConditions();\r\n if (getCurrentRoomType(vanityParent.layout) === LOOK_ROOM_TYPES.as) {\r\n const activeMatchingSink = vanityParent.getActiveMatchingMetaFromRelatedItem(\"vanity_sink\");\r\n const activeMatchingSinkSku = vanityParent.getActiveSkuFromRelatedItem(\"vanity_sink\");\r\n if ((activeMatchingSink && activeMatchingSink.includes(METADATA.NO)) || activeMatchingSinkSku) {\r\n const propValue = !activeMatchingSink.includes(METADATA.NO) && activeMatchingSinkSku ? activeMatchingSinkSku : activeMatchingSink;\r\n conditions.push({\r\n propName: \"MatchingFeature\",\r\n propValue,\r\n });\r\n if (!(Array.isArray(propValue) && propValue[0] === METADATA.NO)) { // remove since we need to use Lixil matchingfeature logic\r\n conditions = conditions.filter(condition => condition.propName !== \"VanitySize\");\r\n }\r\n }\r\n const activeSideMeta = vanityParent.getActiveMatchingMetaFromRelatedItem(vanityParent.vanity_type, \"Side\");\r\n if (activeSideMeta && activeSideMeta.includes(\"C\")) {\r\n conditions.push({\r\n propName: \"Side\",\r\n propValue: activeSideMeta\r\n });\r\n }\r\n }\r\n return conditions\r\n }\r\n}\r\n","import {Vanity} from \"../../parts/vanity\";\r\nimport VanityCommon from \"./vanityCommon\";\r\nimport {createParentPositions, LayoutAbbreviations, METADATA, VANITY_TYPES} from \"../../constants\";\r\n\r\nexport default class VanityBacksplash extends VanityCommon {\r\n\r\n constructor(isChild, partNumber = 0) {\r\n super(isChild);\r\n this.partNumber = partNumber;\r\n this.partId = 'vanity_backsplash';\r\n this.partName = 'Backsplash';\r\n this.translateId = \"visualizer.bathroom.vanity.vanity_backsplash\";\r\n this.visible = [Vanity.Types.Custom];\r\n this.canBeDisabled = true;\r\n this.isStoneFeature = true;\r\n if (isChild) {\r\n createParentPositions(this);\r\n this.nextFeaturesPageToLoadArray = {};\r\n LayoutAbbreviations.forEach(layoutAbbreviation => {\r\n this.nextFeaturesPageToLoadArray[layoutAbbreviation] = {\r\n page: 0,\r\n allReceived: false,\r\n };\r\n });\r\n }\r\n }\r\n\r\n hideLayerCondition() {\r\n const vanityParent = this.getParent();\r\n return !vanityParent.vanityCabinet\r\n || !vanityParent.vanityCabinet.activeFeature\r\n || vanityParent.vanity_type !== VANITY_TYPES.vanity_cabinet\r\n || !vanityParent.vanityCabinet.activeFeature.metaData[\"MatchingFeature\"].includes(METADATA.NO)\r\n }\r\n\r\n}\r\n","import {Vanity} from \"../../parts/vanity\";\r\nimport VanityCommon from \"./vanityCommon\";\r\nimport {createParentPositions, METADATA} from \"../../constants\";\r\n\r\nexport default class Mirror extends VanityCommon {\r\n constructor(isChild, partNumber = 0) {\r\n super(isChild);\r\n this.partNumber = partNumber;\r\n this.partId = 'vanity_mirror';\r\n this.partName = 'Mirror';\r\n this.translateId = \"visualizer.bathroom.vanity.vanity_mirror\";\r\n this.homePageTitle = 'Mirrors';\r\n this.visible = [Vanity.Types.Complete, Vanity.Types.Custom];\r\n this.canBeDisabled = false;\r\n if (isChild) {\r\n createParentPositions(this);\r\n }\r\n }\r\n load(dbFeature) {\r\n if (Array.isArray(dbFeature.metaData[\"VanitySize\"]) && dbFeature.metaData[\"VanitySize\"][0] === \"0\") {\r\n dbFeature.metaData[\"VanitySize\"] = [METADATA.ALL];\r\n }\r\n if (Array.isArray(dbFeature.metaData[\"MirrorShape\"]) && dbFeature.metaData[\"MirrorShape\"][0] === \"00\") {\r\n dbFeature.metaData[\"MirrorShape\"] = [METADATA.ALL];\r\n }\r\n return super.load(dbFeature);\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport { Vanity } from \"../../parts/vanity\";\r\nimport {createParentPositions, METADATA, SIDE_POSITIONS, VANITY_TYPES, LOOK_ROOM_TYPES} from \"../../constants\";\r\nimport {getSkuWithoutDot, removeLookPointFor} from \"../../../lookNavigation/lookFunctions2\";\r\nimport {navFeatureCLick} from \"../../../lookNavigation/lookFunctions\";\r\nimport {getCurrentRoomType} from \"../../../../appLayout\";\r\nimport {findNextVanityTypeFeature} from \"../../../lookNavigation/lookNavigationFunctions\";\r\nimport {IS_QKB_UI} from \"../../../../../config\";\r\nimport {getFeatureIsLocked} from \"../../../../../misc/helpers\";\r\n\r\nexport default class Sink extends IntermediatePart {\r\n constructor(isChild, partNumber = 0) {\r\n super(isChild);\r\n this.partNumber = partNumber;\r\n this.partId = 'vanity_sink';\r\n this.partName = 'Sink';\r\n this.translateId = \"visualizer.bathroom.vanity.vanity_sink\";\r\n this.homePageTitle = 'Sinks';\r\n this.visible = [Vanity.Types.Custom];\r\n // this.canBeDisabled = true;\r\n if (isChild) {\r\n createParentPositions(this);\r\n }\r\n }\r\n\r\n load(dbFeature) {\r\n if (!dbFeature.metaData[\"MountType\"]) {\r\n dbFeature.metaData[\"MountType\"] = [METADATA.Inner]\r\n }\r\n if (!dbFeature.metaData[\"MatchingFeature\"] || dbFeature.metaData[\"MountLevel\"]) {\r\n // added MountLevel for new sinks that can be applied for vanities with countertops\r\n dbFeature.metaData[\"MatchingFeature\"] = [METADATA.NO];\r\n dbFeature.metaData[\"CustomVanityType\"] = VANITY_TYPES.vanity_cabinet;\r\n }\r\n if (dbFeature.metaData[\"MountHoles\"] && dbFeature.metaData[\"MountHoles\"].includes(\"0\")) {\r\n dbFeature.metaData[\"MountHoles\"] = [\"0\", \"1\", \"4\", \"8\"]; // UnderMount Sinks - they can be used with all faucet types\r\n }\r\n // if (!dbFeature.metaData[\"SingleHole\"]) {\r\n // dbFeature.metaData[\"SingleHole\"] = dbFeature.lixilProductSubCategory === METADATA.WallHungSinks // todo change to filters\r\n // ? [METADATA.WallHungSinks]\r\n // : [METADATA.ALL];\r\n // }\r\n if (Array.isArray(dbFeature.metaData[\"SinkWidth\"]) && dbFeature.metaData[\"SinkWidth\"][0]) {\r\n dbFeature.metaData[\"SinkWidth\"] = +dbFeature.metaData[\"SinkWidth\"][0] + 5; // convert to number\r\n // for example, width is 23, 23 + 5 = 28, vanities with VanitySize 24 will be hidden\r\n }\r\n if (Array.isArray(dbFeature.metaData[\"WaterLevel\"]) && dbFeature.metaData[\"WaterLevel\"][0]) {\r\n dbFeature.metaData[\"WaterLevel\"] = +dbFeature.metaData[\"WaterLevel\"][0] + 3; // convert to number and add 3! they should be higher + 3\r\n }\r\n dbFeature.metaData[\"layerPosition\"] = !dbFeature.metaData[\"Side\"]\r\n ? SIDE_POSITIONS[0]\r\n : dbFeature.metaData[\"Side\"] ? dbFeature.metaData[\"Side\"][0] : \"\";\r\n const partNumber = dbFeature.metaData[\"layerPosition\"] === SIDE_POSITIONS[0] ? 1 : 2;\r\n return super.load_(dbFeature, new Sink(false, partNumber), true, partNumber === 1 ? 'features' : 'featuresParts');\r\n }\r\n\r\n // eslint-disable-next-line no-unused-vars\r\n navigationSubItems(filters, searchText, forFeature, filterGroups, restOptions = {}) {\r\n const {firstOpenedConditions, returnAllFeatures} = restOptions;\r\n if (getCurrentRoomType() === LOOK_ROOM_TYPES.as && !IS_QKB_UI) {\r\n const featuresList = this.getFeaturesForNavigationFrom(returnAllFeatures);\r\n const filteredAvailableFeatures = this.getFeaturesBySearchText(this.getFilteredFeaturesByFilters(filters, featuresList), searchText);\r\n let featuresToDisplay = this.navigationSubItemsWithFilterMultipleConditions(firstOpenedConditions || this.getArrayOfConditions(true), filteredAvailableFeatures);\r\n filteredAvailableFeatures.forEach(feature => {\r\n if (!feature.metaData[\"CustomVanityType\"] || !feature.metaData[\"CustomVanityType\"].length\r\n && featuresToDisplay.every(shownFeature => shownFeature.dbFeature.id !== feature.dbFeature.id)) {\r\n featuresToDisplay.push(feature);\r\n }\r\n });\r\n let sinkFeatures = [];\r\n if (this.activeFeature && this.activeFeature.metaData.layerPosition && Array.isArray(this.activeFeature.metaData.MountType)) {\r\n for (let sinkFeature of featuresToDisplay) {\r\n const alreadyExistingIndex = sinkFeatures.findIndex(feature => {\r\n return feature.dbFeature.sharedFeatureName === sinkFeature.dbFeature.sharedFeatureName\r\n });\r\n if (alreadyExistingIndex > -1) {\r\n if (sinkFeature.metaData.layerPosition && (this.activeFeature.metaData.layerPosition === sinkFeature.metaData.layerPosition)\r\n && sinkFeature.metaData.MountType && (this.activeFeature.metaData.MountType[0] === sinkFeature.metaData.MountType[0])) {\r\n sinkFeatures.splice(alreadyExistingIndex, 1, sinkFeature)\r\n }\r\n } else {\r\n sinkFeatures.push(sinkFeature);\r\n }\r\n }\r\n } else {\r\n sinkFeatures = featuresToDisplay;\r\n }\r\n return this.navigationItemsWithOptions(filters, forFeature, filterGroups, sinkFeatures)\r\n }\r\n return super.navigationSubItems(filters, searchText, forFeature, filterGroups, restOptions)\r\n }\r\n\r\n getNextVanityTypeFeature(shouldCheckSize = false) {\r\n const vanityParent = this.getParent().getParent();\r\n const currentActiveMatchingFeatureSku = vanityParent.getActiveSkuFromRelatedItem(vanityParent.vanity_type);\r\n const currentActiveMatchingFeatureMeta = vanityParent.getActiveMatchingMetaFromRelatedItem(vanityParent.vanity_type);\r\n const sinkSku = getSkuWithoutDot(this.dbFeature.sharedFeatureName);\r\n\r\n const currentMatchingMatchingFeature = this.metaData[\"MatchingFeature\"] && (!currentActiveMatchingFeatureSku || !this.metaData[\"MatchingFeature\"].includes(currentActiveMatchingFeatureSku));\r\n const currentMatchingMatchingSku = currentActiveMatchingFeatureMeta && !currentActiveMatchingFeatureMeta.includes(sinkSku);\r\n if (currentMatchingMatchingFeature || currentMatchingMatchingSku) {\r\n const relatedItem = vanityParent.relatedItems.find(relItem => relItem.partId === vanityParent.vanity_type);\r\n if (relatedItem) {\r\n return findNextVanityTypeFeature(this, relatedItem, shouldCheckSize)\r\n }\r\n }\r\n return null\r\n }\r\n\r\n handleClick(forceClick = false, setVanityOnly = false) {\r\n const asBathroom = getCurrentRoomType() === LOOK_ROOM_TYPES.as;\r\n const featureIsLocked = getFeatureIsLocked(this, forceClick);\r\n if (asBathroom && !featureIsLocked) {\r\n const vanityParent = this.getParent().getParent();\r\n if (!this.metaData[\"CustomVanityType\"] || !this.metaData[\"CustomVanityType\"].length) {\r\n vanityParent.vanity_type = null;\r\n // } else if (!vanityParent.vanity_type || !this.metaData[\"CustomVanityType\"].includes(vanityParent.vanity_type)) {\r\n } else if (!this.metaData[\"CustomVanityType\"].includes(vanityParent.vanity_type)) {\r\n vanityParent.vanity_type = this.metaData[\"CustomVanityType\"][0];\r\n }\r\n if (setVanityOnly) {\r\n return // vanity should be set after the sink updates it's layer positions\r\n }\r\n const matchFeature = this.getNextVanityTypeFeature();\r\n console.log(\"matchFeature\", matchFeature);\r\n // console.log(\"forceClick\", forceClick);\r\n if (matchFeature) {\r\n navFeatureCLick(matchFeature, false, forceClick, false)\r\n }\r\n // if (vanityParent.sink_type && vanityParent.sink_type.includes(SINK_TYPES.standAlone)) {\r\n // // vanityParent.vanityCabinet.disabled = true;\r\n // if (vanityParent.vanityCabinet.layerPositions) {\r\n // Object.keys(vanityParent.vanityCabinet.layerPositions).forEach(position => {\r\n // vanityParent.vanityCabinet.layerPositions[position] = null;\r\n // })\r\n // }\r\n // } else {\r\n // // vanityParent.vanityCabinet.disabled = false;\r\n // if (vanityParent.vanityCabinet.layerPositions) {\r\n // Object.keys(vanityParent.vanityCabinet.layerPositions).forEach(position => {\r\n // vanityParent.vanityCabinet.layerPositions[position] = vanityParent.vanityCabinet.getMatchingPositionFeature(position, vanityParent.vanityCabinet.activeFeature);\r\n // })\r\n // }\r\n // }\r\n }\r\n super.handleClick(forceClick);\r\n if (asBathroom && !featureIsLocked) {\r\n const vanityParent = this.getParent().getParent();\r\n vanityParent.updateVanityParts();\r\n }\r\n }\r\n\r\n handleChangeParent(nonCompatibleWith) {\r\n if (nonCompatibleWith === \"faucet\") {\r\n // some additional logic if needed\r\n } else {\r\n this.getParent().getParent().vanityCabinet.setActiveFeatureByFilter(\"Size\", this.metaData[\"VanitySize\"] ? this.metaData[\"VanitySize\"][0] : null); // \"60in\", etc.\r\n }\r\n }\r\n\r\n setActiveFeatureByFilter(filterName, filterValue) {\r\n const featuresToDisplay = super.navigationSubItemsWithFilterMultipleConditions(this.getArrayOfConditions());\r\n const filteredFeatures = featuresToDisplay.filter((feature) => {\r\n return feature.metaData[filterName] && feature.metaData[filterName].includes(filterValue);\r\n });\r\n if (!super.tryToSetTheSameFeature(filteredFeatures)) {\r\n this.activeFeature = filteredFeatures.find(feature => !feature.dbFeature.displayName.includes(\"laceholder\")) || filteredFeatures[0];\r\n const placeholderAvailableFeatures = filteredFeatures.filter(feature => {\r\n return feature.dbFeature.displayName.includes(\"laceholder\")\r\n });\r\n this.placeholderFeature = placeholderAvailableFeatures[0];\r\n }\r\n }\r\n\r\n getCurrentFaucetMetaData() {\r\n const faucetParent = this.getParent().faucet;\r\n let metaObject = {};\r\n if (faucetParent && faucetParent.activeFeature) {\r\n const singleHoleMeta = faucetParent.activeFeature.dbFeature.lixilProductSubCategory === METADATA.SingleHole\r\n || faucetParent.activeFeature.dbFeature.lixilProductSubCategory === METADATA.WidespreadFaucets // todo change to filters\r\n ? METADATA.WallHungSinks\r\n : METADATA.ALL\r\n if (singleHoleMeta) {\r\n metaObject[\"SingleHole\"] = singleHoleMeta\r\n }\r\n }\r\n return metaObject\r\n }\r\n\r\n // getArrayOfConditions(forNavigation = false) {\r\n getArrayOfConditions(forNavigation = false) {\r\n const conditions = super.getArrayOfConditions();\r\n // const currentFaucetMetaData = this.getCurrentFaucetMetaData();\r\n // if (currentFaucetMetaData[\"SingleHole\"]) {\r\n // conditions.push({\r\n // propName: 'SingleHole',\r\n // propValue: currentFaucetMetaData[\"SingleHole\"]\r\n // })\r\n // }\r\n const vanityParent = this.getParent();\r\n if (getCurrentRoomType(vanityParent.layout) === LOOK_ROOM_TYPES.as) {\r\n if (vanityParent.vanity_type && !forNavigation) {\r\n conditions.push({\r\n propName: \"CustomVanityType\",\r\n propValue: vanityParent.vanity_type\r\n });\r\n const activeMatchingVanity = vanityParent.getActiveSkuFromRelatedItem(vanityParent.vanity_type);\r\n const activeMatchingFeatures = vanityParent.getActiveMatchingMetaFromRelatedItem(vanityParent.vanity_type);\r\n const activeSideMeta = vanityParent.getActiveMatchingMetaFromRelatedItem(vanityParent.vanity_type, \"Side\");\r\n if (activeMatchingVanity) {\r\n conditions.push({\r\n propName: \"MatchingFeature\",\r\n propValue: activeMatchingFeatures.includes(METADATA.NO) ? METADATA.NO : activeMatchingVanity\r\n });\r\n }\r\n if (activeMatchingFeatures) {\r\n conditions.push({\r\n propName: \"FeatureSku\",\r\n propValue: activeMatchingFeatures\r\n });\r\n }\r\n if (activeSideMeta && activeSideMeta.includes(\"C\") && !vanityParent.isDoubleVanity()) {\r\n conditions.push({\r\n propName: \"Side\",\r\n propValue: activeSideMeta\r\n });\r\n }\r\n }\r\n }\r\n return conditions;\r\n }\r\n\r\n getActiveFeatureConditions(fromFeature = this.activeFeature) {\r\n let arrayOfConditions = super.getArrayOfConditions();\r\n ['MountType', 'MountHoles'].forEach((propName) => {\r\n if (fromFeature.metaData[propName]) {\r\n arrayOfConditions.push({\r\n propName,\r\n propValue: fromFeature.metaData[propName]\r\n })\r\n }\r\n })\r\n return arrayOfConditions\r\n }\r\n\r\n canDisplayDemoPoint(parentObject) {\r\n if (getCurrentRoomType() === LOOK_ROOM_TYPES.as) {\r\n const vanityParent = this.getParent();\r\n return !vanityParent.vanity_type // pedestal sink only\r\n }\r\n return removeLookPointFor(parentObject, 3, \"2\", SIDE_POSITIONS[1])\r\n && removeLookPointFor(parentObject, 1, \"1\", SIDE_POSITIONS[1])\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport { Vanity } from \"../../parts/vanity\";\r\nimport {createParentPositions, METADATA, SIDE_POSITIONS, LOOK_ROOM_TYPES} from \"../../constants\";\r\nimport {getSkuWithoutDot, removeLookPointFor} from \"../../../lookNavigation/lookFunctions2\";\r\nimport {navFeatureCLick} from \"../../../lookNavigation/lookFunctions\";\r\nimport store from \"../../../../../store\";\r\nimport {getCurrentRoomType} from \"../../../../appLayout\";\r\n\r\nexport default class VanityFaucet extends IntermediatePart {\r\n constructor(isChild, partNumber = 0) {\r\n super(isChild);\r\n this.partNumber = partNumber;\r\n this.partId = 'vanity_faucet';\r\n this.partName = 'Faucet';\r\n this.homePageTitle = 'Faucets';\r\n this.translateId = \"visualizer.bathroom.vanity.vanity_faucet\";\r\n this.visible = [Vanity.Types.Custom];\r\n this.useMatchesFailedNavigation = true;\r\n // this.canBeDisabled = true;\r\n if (isChild) {\r\n createParentPositions(this);\r\n }\r\n }\r\n\r\n load(dbFeature) {\r\n if (dbFeature.filterValueIDs && Array.isArray(dbFeature.filterValueIDs[\"27\"])) { // Collection\r\n const concettoTMIndex = dbFeature.filterValueIDs[\"27\"].findIndex(filterValueId => filterValueId === 10410);\r\n if (concettoTMIndex > -1) { // here we remove Concetto™ filter as it comes from the feed, we can't remove if rome dashboard\r\n // we replace it to \"Concetto\"\r\n dbFeature.filterValueIDs[\"27\"].includes(9755)\r\n ? dbFeature.filterValueIDs[\"27\"].splice(concettoTMIndex, 1)\r\n : dbFeature.filterValueIDs[\"27\"].splice(concettoTMIndex, 1, 9755)\r\n }\r\n }\r\n if (!dbFeature.metaData[\"MountType\"]) {\r\n dbFeature.metaData[\"MountType\"] = [METADATA.Inner]\r\n // } else if(dbFeature.metaData[\"MountType\"].includes(METADATA.Outer) && !dbFeature.metaData[\"MountType\"].includes(METADATA.Inner)) {\r\n // dbFeature.metaData[\"MountType\"].push(METADATA.Inner)\r\n // }\r\n }\r\n if (!dbFeature.metaData[\"MountHoles\"]) {\r\n if (dbFeature.customDisplayName.includes(\"8 inch\")) {\r\n dbFeature.metaData[\"MountHoles\"] = [\"8\"]\r\n } else if (dbFeature.customDisplayName.includes(\"Single Hole\")) {\r\n dbFeature.metaData[\"MountHoles\"] = [\"1\"]\r\n } else if (dbFeature.customDisplayName.includes(\"Centerset\")) {\r\n dbFeature.metaData[\"MountHoles\"] = [\"4\"]\r\n } else {\r\n console.log(\"NO FAUCET DBFEATURE META MountHoles!\", dbFeature.customDisplayName);\r\n }\r\n // } else if(dbFeature.metaData[\"MountType\"].includes(METADATA.Outer) && !dbFeature.metaData[\"MountType\"].includes(METADATA.Inner)) {\r\n // dbFeature.metaData[\"MountType\"].push(METADATA.Inner)\r\n // }\r\n } else if (dbFeature.metaData[\"MountHoles\"].includes(\"0\")) {\r\n dbFeature.metaData[\"MountHoles\"] = [\"0\", \"1\", \"4\", \"8\"]\r\n }\r\n if (Array.isArray(dbFeature.metaData[\"Height\"]) && dbFeature.metaData[\"Height\"][0]) {\r\n dbFeature.metaData[\"Height\"] = +dbFeature.metaData[\"Height\"][0]; // convert to number\r\n }\r\n if (dbFeature.isFromAsRoom) {\r\n\r\n if (!dbFeature.metaData[\"MountLevel\"]) {\r\n if (Array.isArray(dbFeature.metaData[\"MountType\"]) && dbFeature.metaData[\"MountType\"][0]) {\r\n if (dbFeature.metaData[\"MountType\"][0] === \"U\") {\r\n dbFeature.metaData[\"MountLevel\"] = [\"0\"]\r\n } else if (dbFeature.metaData[\"MountType\"][0] === \"S\") {\r\n dbFeature.metaData[\"MountLevel\"] = [\"2\"]\r\n }\r\n } else {\r\n dbFeature.metaData[\"MountLevel\"] = [\"2\"]\r\n }\r\n }\r\n\r\n if (dbFeature.metaData[\"MountType\"].includes(METADATA.Outer)) {\r\n [\"ST\", \"T\", \"W\", \"S\", \"A\"].forEach(metaValue => {\r\n if (!dbFeature.metaData[\"MountType\"].includes(metaValue)) {\r\n dbFeature.metaData[\"MountType\"].push(metaValue);\r\n }\r\n })\r\n }\r\n if (dbFeature.metaData[\"MountType\"].includes(METADATA.StandAlone) && !dbFeature.metaData[\"MountType\"].includes(METADATA.Outer)) {\r\n dbFeature.metaData[\"MountType\"].push(METADATA.Outer);\r\n }\r\n }\r\n // if (!dbFeature.metaData[\"SingleHole\"]) {\r\n // dbFeature.metaData[\"SingleHole\"] = [dbFeature.lixilProductSubCategory]; // todo change to filters\r\n // }\r\n dbFeature.metaData[\"layerPosition\"] = dbFeature.metaData[\"Side\"] ? dbFeature.metaData[\"Side\"][0] : \"\";\r\n const partNumber = dbFeature.metaData[\"layerPosition\"] === SIDE_POSITIONS[0] ? 1 : 2;\r\n return super.load_(dbFeature, new VanityFaucet(false, partNumber), true, partNumber === 1 ? 'features' : 'featuresParts');\r\n }\r\n\r\n getMatchingSinks() { // method is used for feature, to find the same sink as the current one\r\n const faucetParent = this.getParent();\r\n const vanityParent = faucetParent.getParent();\r\n const sinkParent = vanityParent.sink;\r\n const layout = vanityParent.layout;\r\n const currentSinkNavItems = layout.designNavigationItems({part: sinkParent});\r\n const matchingByCabinetType = currentSinkNavItems.filter(navItem => {\r\n return faucetParent.getActiveFeatureConditions(this).every(condition => navItem.part.matchesMetaForCondition(condition.propName, condition.propValue))\r\n });\r\n const withCurrentVanityType = matchingByCabinetType.filter(navItem => {\r\n if (!vanityParent.vanity_type) {\r\n return navItem.part.metaData[\"MountType\"] && navItem.part.metaData[\"MountType\"].includes(\"ST\")\r\n }\r\n return navItem.part.matchesMetaForCondition(\"CustomVanityType\", vanityParent.vanity_type)\r\n });\r\n const {filterGroups} = store.getState().filterState;\r\n const sinkCollectionName = vanityParent.sink && vanityParent.sink.activeFeature\r\n ? vanityParent.sink.activeFeature.getCollectionName(filterGroups)\r\n : \"\";\r\n const sinkCustomFullDisplayName = vanityParent.sink && vanityParent.sink.activeFeature\r\n ? vanityParent.sink.activeFeature.getCustomFullDisplayName()\r\n : \"\";\r\n const sameCollectionName = !sinkCollectionName ? withCurrentVanityType : withCurrentVanityType.filter(navItem => {\r\n return navItem.part.getCollectionName(filterGroups) === sinkCollectionName\r\n });\r\n const sameCustomName = !sinkCustomFullDisplayName ? sameCollectionName : sameCollectionName.filter(navItem => {\r\n return navItem.part.getCustomFullDisplayName() === sinkCustomFullDisplayName\r\n });\r\n return {\r\n matchingByCabinetType,\r\n withCurrentVanityType,\r\n sameCollectionName,\r\n sameCustomName,\r\n }\r\n }\r\n\r\n getSinkToClickFromMatchingSinks = (sinkActiveFeature) => {\r\n const {\r\n matchingByCabinetType,\r\n withCurrentVanityType,\r\n sameCollectionName,\r\n sameCustomName,\r\n } = this.getMatchingSinks();\r\n // console.log(\"matchingByCabinetType\", matchingByCabinetType);\r\n // console.log(\"withCurrentVanityType\", withCurrentVanityType);\r\n // console.log(\"sameCollectionName\", sameCollectionName);\r\n // console.log(\"sameCustomName\", sameCustomName);\r\n const fromWhereToPick = sameCustomName.length\r\n ? sameCustomName\r\n : sameCollectionName.length\r\n ? sameCollectionName\r\n : withCurrentVanityType.length\r\n ? withCurrentVanityType\r\n : matchingByCabinetType;\r\n let featureToCLick = null;\r\n if (sinkActiveFeature) {\r\n const faucetParent = this.getParent();\r\n const vanityParent = faucetParent.getParent();\r\n const relatedItem = vanityParent.relatedItems.find(relItem => relItem.partId === vanityParent.vanity_type);\r\n if (relatedItem && relatedItem.activeFeature && sinkActiveFeature.metaData[\"MatchingFeature\"]) {\r\n featureToCLick = fromWhereToPick.find(navItem => {\r\n return navItem.part.metaData[\"MatchingFeature\"].includes(getSkuWithoutDot(relatedItem.activeFeature.dbFeature.sharedFeatureName))\r\n })\r\n }\r\n if (!featureToCLick) {\r\n featureToCLick = fromWhereToPick.find(navItem => navItem.part.getColorName() === sinkActiveFeature.getColorName())\r\n }\r\n }\r\n if (!featureToCLick) {\r\n featureToCLick = fromWhereToPick[0];\r\n }\r\n console.log(\"featureToCLick\", featureToCLick);\r\n return featureToCLick ? featureToCLick.part : null;\r\n }\r\n\r\n handleClick(ignoreLocked = false) {\r\n const faucetParent = this.getParent();\r\n const vanityParent = faucetParent.getParent();\r\n const sinkParent = vanityParent.sink;\r\n\r\n if (!sinkParent.activeFeature || !sinkParent.activeFeature.matchesMetaForArrayOfConditions(faucetParent.getActiveFeatureConditions(this))) {\r\n const featureToCLick = this.getSinkToClickFromMatchingSinks(sinkParent.activeFeature)\r\n if (featureToCLick) {\r\n console.log(\"sink featureToCLick\", featureToCLick);\r\n navFeatureCLick(featureToCLick, false, ignoreLocked, false);\r\n }\r\n }\r\n\r\n super.handleClick(ignoreLocked);\r\n }\r\n\r\n getCurrentSinkMetaData() {\r\n const sinkParent = this.getParent().sink;\r\n let metaObject = {};\r\n if (sinkParent && sinkParent.activeFeature) {\r\n const sinkMeta = sinkParent.activeFeature.metaData[\"MountType\"];\r\n if (sinkMeta) {\r\n metaObject[\"MountType\"] = Array.isArray(sinkMeta) ? sinkMeta[0] : sinkMeta\r\n }\r\n // const singleHoleMeta = sinkParent.activeFeature.dbFeature.lixilProductSubCategory === \"Wall Hung Sinks\" //\r\n // if (singleHoleMeta) {\r\n // metaObject[\"SingleHole\"] = METADATA.SingleHole\r\n // }\r\n const mountHolesMeta = sinkParent.activeFeature.metaData[\"MountHoles\"] // American Standard\r\n if (mountHolesMeta && !(getCurrentRoomType() === LOOK_ROOM_TYPES.grohe && mountHolesMeta.includes(\"0\"))) {\r\n metaObject[\"MountHoles\"] = mountHolesMeta\r\n }\r\n }\r\n return metaObject\r\n }\r\n\r\n getArrayOfConditions(forNavigation = false) {\r\n // const counterTopSize = this.getParent().counterTopSize(this);\r\n // const conditions = [{\r\n // propName: 'VanitySize',\r\n // propValue: counterTopSize\r\n // }];\r\n const conditions = super.getArrayOfConditions();\r\n const currentSinkMetaData = this.getCurrentSinkMetaData();\r\n [\"MountType\", \"MountHoles\"].forEach(propName => {\r\n if ((!forNavigation || ((getCurrentRoomType() === LOOK_ROOM_TYPES.grohe) && propName === \"MountType\")) && currentSinkMetaData[propName]\r\n && !(propName === \"MountHoles\" && currentSinkMetaData[propName].includes(\"0\") && currentSinkMetaData[\"MountType\"] && currentSinkMetaData[\"MountType\"].includes(\"U\"))) {\r\n if (propName === \"MountType\" && (currentSinkMetaData[propName] === \"V\")) { // do not check V sinks\r\n return\r\n }\r\n conditions.push({\r\n propName,\r\n propValue: currentSinkMetaData[propName]\r\n })\r\n }\r\n })\r\n // if (currentSinkMetaData[\"SingleHole\"]) {\r\n // conditions.push({\r\n // propName: 'SingleHole',\r\n // propValue: currentSinkMetaData[\"SingleHole\"]\r\n // })\r\n // }\r\n const vanityParent = this.getParent();\r\n const activeSideMeta = vanityParent.getActiveMatchingMetaFromRelatedItem(vanityParent.vanity_type, \"Side\");\r\n if (activeSideMeta && activeSideMeta.includes(\"C\") && !vanityParent.isDoubleVanity()) {\r\n conditions.push({\r\n propName: \"Side\",\r\n propValue: activeSideMeta\r\n });\r\n }\r\n // const countertopSize = vanityParent.counterTopSize(this);\r\n // if (countertopSize) {\r\n // conditions.push({\r\n // propName: \"VanitySize\",\r\n // propValue: countertopSize && countertopSize[0] && (countertopSize[0] === \"32\") ? \"48\" : countertopSize\r\n // })\r\n // }\r\n if (vanityParent.sink && vanityParent.sink.activeFeature) {\r\n const sinkType = vanityParent.sink.activeFeature.metaData[\"SinkType\"]\r\n if (sinkType) {\r\n conditions.push({\r\n propName: \"SinkType\",\r\n propValue: vanityParent.sink.activeFeature.metaData[\"SinkType\"]\r\n })\r\n }\r\n const mountLevel = vanityParent.sink.activeFeature.metaData[\"MountLevel\"]\r\n if (mountLevel) {\r\n conditions.push({\r\n propName: \"MountLevel\",\r\n propValue: vanityParent.sink.activeFeature.metaData[\"MountLevel\"]\r\n });\r\n if ((Array.isArray(mountLevel) && mountLevel[0] === \"0\") || mountLevel === \"0\") {\r\n const waterLevel = vanityParent.sink.activeFeature.metaData[\"WaterLevel\"]\r\n if (waterLevel) {\r\n conditions.push({\r\n propName: \"WaterLevel\", // sink WaterLevel - is faucet Height, all logic is in the matchesMetaForCondition func\r\n propValue: vanityParent.sink.activeFeature.metaData[\"WaterLevel\"]\r\n })\r\n }\r\n }\r\n }\r\n }\r\n // console.log(\"conditions\", conditions);\r\n return conditions;\r\n }\r\n\r\n getActiveFeatureConditions(fromFeature = this.activeFeature) {\r\n let arrayOfConditions = this.getArrayOfConditions();\r\n arrayOfConditions = arrayOfConditions.map(condition => {\r\n if ((condition.propName === 'MountType' || condition.propName === 'MountHoles') && fromFeature.metaData[condition.propName]) {\r\n return {\r\n propName: condition.propName,\r\n propValue: fromFeature.metaData[condition.propName]\r\n }\r\n }\r\n return condition\r\n });\r\n if (fromFeature.metaData[\"MountLevel\"]) {\r\n arrayOfConditions.push({\r\n propName: \"MountLevel\",\r\n propValue: fromFeature.metaData[\"MountLevel\"]\r\n })\r\n }\r\n return arrayOfConditions\r\n }\r\n\r\n getAvailableFeatures() {\r\n return this.features.filter(f => f.matchesMetaForCondition('VanitySize', this.getParent().counterTopSize(this)));\r\n }\r\n\r\n handleChangeParent(nonCompatibleWith) {\r\n if (nonCompatibleWith === \"sink\") {\r\n this.getParent().getParent().sink.setActiveFeatureByFilter(\"MountType\", METADATA.Inner)\r\n } else {\r\n this.getParent().getParent().vanityCabinet.setActiveFeatureByFilter(\"Size\", this.metaData[\"VanitySize\"] ? this.metaData[\"VanitySize\"][0] : null); // \"60in\", etc.\r\n }\r\n }\r\n\r\n canDisplayDemoPoint(parentObject) {\r\n if (getCurrentRoomType() === LOOK_ROOM_TYPES.as) {\r\n return removeLookPointFor(parentObject, 6, \"1\", SIDE_POSITIONS[1])\r\n }\r\n return removeLookPointFor(parentObject, 3, \"2\", SIDE_POSITIONS[1])\r\n && removeLookPointFor(parentObject, 1, \"1\", SIDE_POSITIONS[1])\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport {Vanity} from \"../../parts/vanity\";\r\nimport {createParentPositions, SIDE_POSITIONS, VANITY_TYPES} from \"../../constants\";\r\n\r\nexport default class Ptrap extends IntermediatePart {\r\n\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'vanity_ptrap';\r\n this.partName = 'Ptrap';\r\n this.translateId = \"visualizer.bathroom.vanity.vanity_ptrap\";\r\n this.visible = [Vanity.Types.Custom];\r\n // this.canBeDisabled = true;\r\n if (isChild) {\r\n createParentPositions(this);\r\n }\r\n }\r\n\r\n disabledClick() {\r\n this.toggleLayerPositions();\r\n }\r\n\r\n // handleClick(ignoreLocked) {\r\n // const vanityParent = this.getParent().getParent();\r\n // if ((vanityParent.vanity_type !== VANITY_TYPES.vanity_washstand && vanityParent.vanity_type !== VANITY_TYPES.vanity_console)) {\r\n // if (vanityParent.vanityConsole && vanityParent.vanityConsole.activeFeature) {\r\n // vanityParent.vanityConsole.disabled = false;\r\n // vanityParent.vanity_type = VANITY_TYPES.vanity_console;\r\n // } else if (vanityParent.vanityWashstand && vanityParent.vanityWashstand.activeFeature) {\r\n // vanityParent.vanityWashstand.disabled = false;\r\n // vanityParent.vanity_type = VANITY_TYPES.vanity_washstand;\r\n // }\r\n // }\r\n // super.handleClick(ignoreLocked);\r\n // vanityParent.updateVanityParts();\r\n // }\r\n\r\n hideLayerCondition() {\r\n const vanityParent = this.getParent();\r\n return (vanityParent.vanity_type === VANITY_TYPES.vanity_cabinet && (!vanityParent.vanityCabinet || !vanityParent.vanityCabinet.activeFeature))\r\n || (vanityParent.vanity_type === VANITY_TYPES.vanity_washstand && (!vanityParent.vanityWashstand || !vanityParent.vanityWashstand.activeFeature))\r\n || (vanityParent.vanity_type === VANITY_TYPES.vanity_console && (!vanityParent.vanityConsole || !vanityParent.vanityConsole.activeFeature))\r\n }\r\n\r\n // getArrayOfConditions() {\r\n // const conditions = super.getArrayOfConditions();\r\n // const activeMatchingSink = this.getParent().getActiveSkuFromRelatedItem(\"vanity_sink\");\r\n // if (activeMatchingSink) {\r\n // conditions.push({\r\n // propName: \"MatchingFeature\",\r\n // propValue: activeMatchingSink\r\n // });\r\n // }\r\n // console.log(\"conditions\", conditions);\r\n // console.log(\"this\", this.activeFeature ? this.activeFeature.metaData : \"\");\r\n // return conditions\r\n // }\r\n\r\n getArrayOfConditions() {\r\n const conditions = super.getArrayOfConditions();\r\n const vanityParent = this.getParent();\r\n const activeSideMeta = vanityParent.getActiveMatchingMetaFromRelatedItem(vanityParent.vanity_type, \"Side\");\r\n if (activeSideMeta && activeSideMeta.includes(\"C\")) {\r\n conditions.push({\r\n propName: \"Side\",\r\n propValue: activeSideMeta\r\n });\r\n }\r\n // console.log(\"conditions\", conditions);\r\n return conditions;\r\n }\r\n\r\n canDisplayDemoPoint(parentObject) {\r\n const vanityParent = this.getParent();\r\n return vanityParent.vanity_type && (vanityParent.vanity_type !== VANITY_TYPES.vanity_cabinet) && (parentObject.layerPosition !== SIDE_POSITIONS[0])\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport {Vanity} from \"../../parts/vanity\";\r\nimport {createParentPositions, SIDE_POSITIONS, VANITY_TYPES} from \"../../constants\";\r\nimport {updateSinkWithNewFeature} from \"../../../lookNavigation/lookNavigationFunctions\";\r\n\r\nexport default class VanityWashstand extends IntermediatePart {\r\n\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'vanity_washstand';\r\n this.partName = 'Washstand';\r\n this.translateId = \"visualizer.bathroom.vanity.vanity_washstand\";\r\n this.visible = [Vanity.Types.Custom];\r\n this.canBeDisabled = true;\r\n if (isChild) {\r\n createParentPositions(this);\r\n }\r\n }\r\n\r\n disabledClick() {\r\n this.toggleLayerPositions();\r\n const vanityParent = this.getParent();\r\n if (vanityParent && vanityParent.wsTowelBar) {\r\n vanityParent.wsTowelBar.disabled = this.disabled || !vanityParent.wsTowelBar.canBeEnabled(); // true or check if it can be enabled;;\r\n }\r\n }\r\n\r\n handleClick(ignoreLocked) {\r\n const vanityParent = this.getParent().getParent();\r\n vanityParent.vanity_type = VANITY_TYPES.vanity_washstand;\r\n super.handleClick(ignoreLocked);\r\n updateSinkWithNewFeature(this);\r\n vanityParent.updateVanityParts();\r\n }\r\n\r\n hideLayerCondition() {\r\n const vanityParent = this.getParent();\r\n return vanityParent.vanity_type !== VANITY_TYPES.vanity_washstand && !!this.activeFeature\r\n }\r\n\r\n // getArrayOfConditions() {\r\n // const conditions = super.getArrayOfConditions();\r\n // const activeMatchingSink = this.getParent().getActiveSkuFromRelatedItem(\"vanity_sink\");\r\n // if (activeMatchingSink) {\r\n // conditions.push({\r\n // propName: \"MatchingFeature\",\r\n // propValue: activeMatchingSink\r\n // });\r\n // }\r\n // return conditions\r\n // }\r\n\r\n canDisplayDemoPoint(parentObject) {\r\n return this.getParent().vanity_type === VANITY_TYPES.vanity_washstand && (parentObject.layerPosition !== SIDE_POSITIONS[0])\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport {Vanity} from \"../../parts/vanity\";\r\nimport {VANITY_TYPES} from \"../../constants\";\r\n\r\nexport default class VanityMiddle extends IntermediatePart {\r\n\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'vanity_middle';\r\n this.partName = 'Vanity Middle';\r\n this.translateId = \"visualizer.bathroom.vanity.vanity_middle\";\r\n this.visible = [Vanity.Types.Custom];\r\n this.canBeDisabled = true;\r\n this.isStoneFeature = true;\r\n }\r\n\r\n hideLayerCondition() {\r\n const vanityParent = this.getParent();\r\n return !vanityParent.vanityCabinet\r\n || !vanityParent.vanityCabinet.activeFeature\r\n || vanityParent.vanity_type !== VANITY_TYPES.vanity_cabinet\r\n || (vanityParent.vanityCabinet.layerPositions && vanityParent.vanityCabinet.layerPositions[\"C\"])\r\n || (this.activeFeature && !this.activeFeature.matchesMetaForArrayOfConditions(this.getArrayOfConditions()))\r\n }\r\n\r\n getArrayOfConditions() {\r\n const conditions = super.getArrayOfConditions();\r\n const activeMatchingVanity = this.getParent().getActiveSkuFromRelatedItem(\"vanity_cabinet\");\r\n if (activeMatchingVanity) {\r\n conditions.push({\r\n propName: \"MatchingFeature\",\r\n propValue: activeMatchingVanity\r\n });\r\n }\r\n return conditions\r\n }\r\n\r\n canDisplayDemoPoint() {\r\n return this.getParent().vanity_type === VANITY_TYPES.vanity_cabinet\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport {Vanity} from \"../../parts/vanity\";\r\nimport {createParentPositions, VANITY_TYPES} from \"../../constants\";\r\n\r\nexport default class DrawerPull extends IntermediatePart {\r\n\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'vanity_drawer_pull';\r\n this.partName = 'Drawer Pull';\r\n this.translateId = \"visualizer.bathroom.vanity.vanity_drawer_pull\";\r\n this.visible = [Vanity.Types.Custom];\r\n this.canBeDisabled = true;\r\n if (isChild) {\r\n createParentPositions(this);\r\n }\r\n }\r\n\r\n disabledClick() {\r\n this.toggleLayerPositions();\r\n }\r\n\r\n handleClick(ignoreLocked) {\r\n const vanityParent = this.getParent().getParent();\r\n vanityParent.vanity_type = VANITY_TYPES.vanity_cabinet;\r\n super.handleClick(ignoreLocked);\r\n vanityParent.updateVanityParts();\r\n }\r\n\r\n hideLayerCondition() {\r\n const vanityParent = this.getParent();\r\n return !vanityParent.vanityCabinet || !vanityParent.vanityCabinet.activeFeature || vanityParent.vanity_type !== VANITY_TYPES.vanity_cabinet\r\n }\r\n\r\n getArrayOfConditions() {\r\n const conditions = super.getArrayOfConditions();\r\n const activeMatchingVanity = this.getParent().getActiveSkuFromRelatedItem(VANITY_TYPES.vanity_cabinet);\r\n if (activeMatchingVanity) {\r\n conditions.push({\r\n propName: \"MatchingFeature\",\r\n propValue: activeMatchingVanity\r\n });\r\n }\r\n return conditions\r\n }\r\n\r\n canDisplayDemoPoint() {\r\n return this.getParent().vanity_type === VANITY_TYPES.vanity_cabinet\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport {Vanity} from \"../../parts/vanity\";\r\nimport {createParentPositions, VANITY_TYPES} from \"../../constants\";\r\n\r\nexport default class WSTowelBar extends IntermediatePart {\r\n\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'vanity_ws_towel_bar';\r\n this.partName = 'WS Towel Bar';\r\n this.translateId = \"visualizer.bathroom.vanity.vanity_ws_towel_bar\";\r\n this.visible = [Vanity.Types.Custom];\r\n this.canBeDisabled = true;\r\n if (isChild) {\r\n createParentPositions(this);\r\n }\r\n }\r\n\r\n disabledClick() {\r\n this.toggleLayerPositions();\r\n }\r\n\r\n handleClick(ignoreLocked) {\r\n const vanityParent = this.getParent().getParent();\r\n vanityParent.vanity_type = VANITY_TYPES.vanity_washstand;\r\n super.handleClick(ignoreLocked);\r\n vanityParent.updateVanityParts();\r\n }\r\n\r\n hideLayerCondition() {\r\n const vanityParent = this.getParent();\r\n return !vanityParent.vanityWashstand || !vanityParent.vanityWashstand.activeFeature || vanityParent.vanity_type !== VANITY_TYPES.vanity_washstand\r\n }\r\n\r\n getArrayOfConditions() {\r\n const conditions = super.getArrayOfConditions();\r\n const activeMatchingSink = this.getParent().getActiveSkuFromRelatedItem(\"vanity_washstand\");\r\n if (activeMatchingSink) {\r\n conditions.push({\r\n propName: \"MatchingFeature\",\r\n propValue: activeMatchingSink\r\n });\r\n }\r\n return conditions\r\n }\r\n\r\n canDisplayDemoPoint() {\r\n return this.getParent().vanity_type === VANITY_TYPES.vanity_washstand\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport {Vanity} from \"../../parts/vanity\";\r\nimport {createParentPositions, SIDE_POSITIONS, VANITY_TYPES, LOOK_ROOM_TYPES} from \"../../constants\";\r\nimport {removeLookPointFor} from \"../../../lookNavigation/lookFunctions2\";\r\nimport {getCurrentRoomType} from \"../../../../appLayout\";\r\n\r\nexport default class VanityLegs extends IntermediatePart {\r\n\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'vanity_legs';\r\n this.partName = 'Vanity Legs';\r\n this.translateId = \"visualizer.bathroom.vanity.vanity_legs\";\r\n this.visible = [Vanity.Types.Custom];\r\n this.canBeDisabled = true;\r\n if (isChild) {\r\n createParentPositions(this);\r\n }\r\n }\r\n\r\n disabledClick() {\r\n this.toggleLayerPositions();\r\n }\r\n\r\n hideLayerCondition() {\r\n const vanityParent = this.getParent();\r\n return !vanityParent.vanityCabinet || !vanityParent.vanityCabinet.activeFeature || vanityParent.vanity_type !== VANITY_TYPES.vanity_cabinet\r\n }\r\n\r\n getArrayOfConditions() {\r\n const conditions = super.getArrayOfConditions();\r\n const vanityParent = this.getParent();\r\n const activeMatchingVanity = vanityParent.getActiveSkuFromRelatedItem(\"vanity_cabinet\");\r\n if (activeMatchingVanity) {\r\n conditions.push({\r\n propName: \"MatchingFeature\",\r\n propValue: activeMatchingVanity\r\n });\r\n }\r\n const activeSideMeta = vanityParent.getActiveMatchingMetaFromRelatedItem(\"vanity_cabinet\", \"Side\");\r\n if (activeSideMeta && activeSideMeta.includes(\"C\")) {\r\n conditions.push({\r\n propName: \"Side\",\r\n propValue: activeSideMeta\r\n });\r\n }\r\n return conditions\r\n }\r\n\r\n canDisplayDemoPoint(parentObject) {\r\n if (getCurrentRoomType() === LOOK_ROOM_TYPES.as) {\r\n return parentObject.layerPosition !== SIDE_POSITIONS[0] && removeLookPointFor(parentObject, 6, \"1\")\r\n }\r\n return this.getParent().vanity_type === VANITY_TYPES.vanity_cabinet\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport {Vanity} from \"../../parts/vanity\";\r\nimport {createParentPositions, SIDE_POSITIONS, VANITY_TYPES} from \"../../constants\";\r\nimport {updateSinkWithNewFeature} from \"../../../lookNavigation/lookNavigationFunctions\";\r\n\r\nexport default class VanityConsole extends IntermediatePart {\r\n\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'vanity_console';\r\n this.partName = 'Console';\r\n this.translateId = \"visualizer.bathroom.vanity.vanity_console\";\r\n this.visible = [Vanity.Types.Custom];\r\n this.canBeDisabled = true;\r\n if (isChild) {\r\n createParentPositions(this);\r\n }\r\n }\r\n\r\n disabledClick() {\r\n this.toggleLayerPositions();\r\n }\r\n\r\n handleClick(ignoreLocked) {\r\n const vanityParent = this.getParent().getParent();\r\n vanityParent.vanity_type = VANITY_TYPES.vanity_console;\r\n super.handleClick(ignoreLocked);\r\n updateSinkWithNewFeature(this);\r\n vanityParent.updateVanityParts();\r\n }\r\n\r\n hideLayerCondition() {\r\n const vanityParent = this.getParent();\r\n return vanityParent.vanity_type !== VANITY_TYPES.vanity_console && !!this.activeFeature\r\n }\r\n\r\n // getArrayOfConditions() {\r\n // const conditions = super.getArrayOfConditions();\r\n // const activeMatchingSink = this.getParent().getActiveSkuFromRelatedItem(\"vanity_sink\");\r\n // if (activeMatchingSink) {\r\n // conditions.push({\r\n // propName: \"MatchingFeature\",\r\n // propValue: activeMatchingSink\r\n // });\r\n // }\r\n // return conditions\r\n // }\r\n\r\n canDisplayDemoPoint(parentObject) {\r\n return this.getParent().vanity_type === VANITY_TYPES.vanity_console && (parentObject.layerPosition !== SIDE_POSITIONS[0])\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport {Vanity} from \"../../parts/vanity\";\r\nimport {createParentPositions} from \"../../constants\";\r\n\r\nexport default class DoorHandle extends IntermediatePart {\r\n\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'door_handle';\r\n this.partName = 'Door Handle';\r\n this.translateId = \"visualizer.kitchen.cabinet.door_handle\";\r\n this.visible = [Vanity.Types.Custom];\r\n this.canBeDisabled = false;\r\n if (isChild) {\r\n createParentPositions(this);\r\n }\r\n }\r\n\r\n disabledClick() {\r\n this.getParent().toggleVanityParts(this.disabled);\r\n }\r\n\r\n getArrayOfConditions() {\r\n const conditions = super.getArrayOfConditions();\r\n const vanityParent = this.getParent();\r\n conditions.push({\r\n propName: \"VanitySize\",\r\n propValue: vanityParent.counterTopSize(this)\r\n })\r\n return conditions\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport {Vanity} from \"../../parts/vanity\";\r\nimport {createParentPositions} from \"../../constants\";\r\n\r\nexport default class DrawerHandle extends IntermediatePart {\r\n\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'drawer_handle';\r\n this.partName = 'Drawer Handle';\r\n this.translateId = \"visualizer.kitchen.cabinet.drawer_handle\";\r\n this.visible = [Vanity.Types.Custom];\r\n this.canBeDisabled = false;\r\n if (isChild) {\r\n createParentPositions(this);\r\n }\r\n }\r\n\r\n disabledClick() {\r\n this.getParent().toggleVanityParts(this.disabled);\r\n }\r\n\r\n getArrayOfConditions() {\r\n const conditions = super.getArrayOfConditions();\r\n const vanityParent = this.getParent();\r\n conditions.push({\r\n propName: \"VanitySize\",\r\n propValue: vanityParent.counterTopSize(this)\r\n })\r\n return conditions\r\n }\r\n}\r\n","import workspace from \"../../workspace\";\r\nimport {findLowestRightmostPoint} from \"../../../../../helpers/coordinatesHelper\";\r\nimport {canShapeBeAutoShifted, getLineDirection} from \"../../../../../helpers/shapeHelper\";\r\nimport sqftShapeManager from \"../../../store/sqftShapeManager\";\r\nimport {getPointDistance} from \"../../../../../helpers/sqftHelper\";\r\nimport {isHorizontalDirection, isVerticalDirection} from \"../../../helpers/lineHelper\";\r\nimport workspaceControllers from \"../../../store/workspaceControllers\";\r\nimport sqftShapeIntersectionsManager from \"../../../store/sqftShapeIntersectionsManager\";\r\n\r\nexport default class ShapeAutoShuffle {\r\n __shape;\r\n\r\n constructor(shape) {\r\n this.__shape = shape;\r\n }\r\n\r\n handlePlaceShapeOnTheLine = () => {\r\n //Auto Shuffle\r\n const hoveredLines = workspace.getHoveredLines([this.__shape.id]);\r\n\r\n if (hoveredLines.length > 0) {\r\n // Get relevant shapes and lines\r\n const hoveredLine = this.getHoveredLine(hoveredLines);\r\n const hoveredShape = hoveredLine.getParent();\r\n\r\n if (canShapeBeAutoShifted(this.__shape, hoveredShape)) {\r\n const newPosition = this.calculateNewPosition(hoveredLine, hoveredShape);\r\n\r\n if (newPosition) {\r\n // Move shape to new positions\r\n this.moveShapeToPositionAndRotate(newPosition, hoveredLine);\r\n\r\n //set same snapped shape group before get shapes to shift\r\n workspaceControllers.snappedShapeGroups.setSameSnappedShapesGroup(this.__shape, hoveredShape);\r\n\r\n //Get shapes to shift\r\n const shapesToShift = this.getShapesToShift(hoveredShape, newPosition);\r\n //console.log(\"shapesToShift\", shapesToShift);\r\n\r\n // Calculate new positions\r\n const [xDiff, yDiff] = this.calculatePositionDiffForOtherShapes(hoveredLine);\r\n this.moveShapesToPositions(shapesToShift, xDiff, yDiff);\r\n\r\n this.__shape.resetState();\r\n sqftShapeIntersectionsManager.updateShapesIntersections();\r\n workspaceControllers.snappedShapeGroups.updateShapesSnappedGroups(true);\r\n workspace.getHoveredLines(); // update hovered lines\r\n return true\r\n }\r\n }\r\n }\r\n }\r\n\r\n /**\r\n * Will return line for the lowest and rightmost shape\r\n * @param hoveredLines\r\n */\r\n getHoveredLine = (hoveredLines) => {\r\n const hoveredLinesShapes = hoveredLines.map(line => line.getParent());\r\n const lowestRightmostPoint = findLowestRightmostPoint(hoveredLinesShapes.map(shape => shape.getPosition()));\r\n const shapeToShift = hoveredLinesShapes.find(shape => {\r\n return shape.getPosition() === lowestRightmostPoint\r\n && shape.id !== this.__shape.id // skip current moving shape\r\n });\r\n\r\n return hoveredLines.find(line => line.getParent().id === shapeToShift.id);\r\n }\r\n\r\n /**\r\n * Will return all shapes that are lower or on the same line then point\r\n * @param hoveredShape\r\n * @param point\r\n */\r\n getShapesToShift = (hoveredShape, point) => {\r\n const snappedShapeGroup = hoveredShape.shapeAbsolute.getSnappedShapeGroup();\r\n if (snappedShapeGroup !== null && snappedShapeGroup !== undefined) {\r\n const snappedShapes = workspaceControllers.snappedShapeGroups.getSnappedShapes(snappedShapeGroup);\r\n if (snappedShapes) {\r\n const snappedShapesWithoutMovingShape = snappedShapes.filter(shape =>\r\n shape.id !== this.__shape.id\r\n && (hoveredShape.partId === shape.partId\r\n || hoveredShape.partId === shape.parentPartId\r\n || (hoveredShape.parentPartId && hoveredShape.parentPartId === shape.partId) //add spacers\r\n )\r\n )\r\n return this.findShapesRightAndBelow(snappedShapesWithoutMovingShape, point);\r\n } else {\r\n return this.findShapesRightAndBelow(hoveredShape, point);\r\n }\r\n }\r\n return []\r\n }\r\n\r\n /**\r\n * TODO diagonal\r\n */\r\n calculateNewPosition(hoveredLine, shapeToShift) {\r\n const shapeToShiftMeasurementPoints = sqftShapeManager.getMinMaxShapesPointsOnWorkspace([shapeToShift]);\r\n //console.log(\"shapeToShiftMeasurementPoints\", shapeToShiftMeasurementPoints);\r\n //console.log(\"shapeToShift\", shapeToShift);\r\n\r\n const hoveredLineDirection = getLineDirection(hoveredLine.from, hoveredLine.to);\r\n\r\n let newShapePosition = null;\r\n const hoveredLinePointFromPosOnWorkspace = hoveredLine.from.getPointPosOnWorkspace();\r\n if (isVerticalDirection(hoveredLineDirection)) {\r\n // Check whether it is shape start or end\r\n if (shapeToShiftMeasurementPoints[1].x === hoveredLinePointFromPosOnWorkspace.x) {\r\n newShapePosition = shapeToShiftMeasurementPoints[1];\r\n // Shift shape only if it is first line\r\n } else if (shapeToShiftMeasurementPoints[0].x === hoveredLinePointFromPosOnWorkspace.x) {\r\n newShapePosition = shapeToShiftMeasurementPoints[0];\r\n }\r\n } else if (isHorizontalDirection(hoveredLineDirection)) {\r\n // Check whether it is shape start or end\r\n if (shapeToShiftMeasurementPoints[0].y === hoveredLinePointFromPosOnWorkspace.y) {\r\n newShapePosition = shapeToShiftMeasurementPoints[0];\r\n // Shift shape only if it is first line\r\n } else if (shapeToShiftMeasurementPoints[3].y === hoveredLinePointFromPosOnWorkspace.y) {\r\n newShapePosition = shapeToShiftMeasurementPoints[3];\r\n }\r\n }\r\n\r\n return newShapePosition\r\n }\r\n\r\n /**\r\n *\r\n */\r\n calculatePositionDiffForOtherShapes(hoveredLine) {\r\n let xDiff = 0;\r\n let yDiff = 0;\r\n const thisShapeMeasurementPoints = sqftShapeManager.getMinMaxShapesPointsOnWorkspace([this.__shape]);\r\n const hoveredLineDirection = getLineDirection(hoveredLine.from, hoveredLine.to);\r\n if (isVerticalDirection(hoveredLineDirection)) {\r\n xDiff = getPointDistance(thisShapeMeasurementPoints[0], thisShapeMeasurementPoints[1]);\r\n } else if (isHorizontalDirection(hoveredLineDirection)) {\r\n yDiff = getPointDistance(thisShapeMeasurementPoints[3], thisShapeMeasurementPoints[0]);\r\n }\r\n\r\n return [xDiff, yDiff]\r\n }\r\n\r\n /**\r\n *\r\n */\r\n moveShapesToPositions(shapesToShift, xDiff, yDiff) {\r\n shapesToShift.forEach(shape => {\r\n const shapeCurrentPos = shape.getPosition();\r\n const shapeNewPos = {x: shapeCurrentPos.x + xDiff, y: shapeCurrentPos.y + yDiff};\r\n shape.setPosition(shapeNewPos);\r\n shape.shapeAbsolute.setAbsolutePos(shapeNewPos);\r\n })\r\n }\r\n\r\n /**\r\n * Moves and rotates the shape based on the line's orientation and the current rotation angle.\r\n */\r\n moveShapeToPositionAndRotate(newPosition, hoveredLine) {\r\n // Set the new position\r\n this.__shape.setPosition(newPosition);\r\n this.__shape.shapeAbsolute.setAbsolutePos(newPosition);\r\n\r\n // Determine the required rotation based on the line direction\r\n const hoveredLineDirection = getLineDirection(hoveredLine.from, hoveredLine.to);\r\n\r\n const isHorizontal = isHorizontalDirection(hoveredLineDirection);\r\n const isVertical = isVerticalDirection(hoveredLineDirection);\r\n const hoveredShape = hoveredLine.getParent();\r\n\r\n // Rotate by -90 degrees (right) if the current angle is 90 and the line is vertical\r\n if (hoveredShape.rotatedDegrees === 270 && isHorizontal) {\r\n let desiredAngle = 270;\r\n let normalizedCurrentAngle = ((this.__shape.rotatedDegrees % 360) + 360) % 360;\r\n let angleDifference = desiredAngle - normalizedCurrentAngle;\r\n this.__shape.rotate(angleDifference, this.__shape.Direction.LEFT, false);\r\n //todo\r\n //console.log(\"shape.getPosition()\", this.__shape.getPosition());\r\n //this.moveShapesToPositions([this.__shape], -this.__shape.getWidth(), -this.__shape.getHeight());\r\n //console.log(\"shape.getPosition()\", this.__shape.getPosition());\r\n //debugger // eslint-disable-line no-debugger\r\n }\r\n // Rotate by 90 degrees if the current angle is 0 and the line is horizontal\r\n else if (this.__shape.rotatedDegrees === 0 && isHorizontal) {\r\n this.__shape.rotate(90, this.__shape.Direction.LEFT, false);\r\n }\r\n // Rotate by -90 degrees (right) if the current angle is 90 and the line is vertical\r\n else if (this.__shape.rotatedDegrees === 90 && isVertical) {\r\n this.__shape.rotate(-90, this.__shape.Direction.LEFT, false);\r\n }\r\n\r\n // Calculate the new coordinates for the upper left corner after potential rotation\r\n if (isHorizontalDirection(hoveredLineDirection)) {\r\n // Calculate shift is not needed if the center remains in place\r\n const cos = Math.cos(this.__shape.rotatedDegrees * Math.PI / 180);\r\n const sin = Math.sin(this.__shape.rotatedDegrees * Math.PI / 180);\r\n const originalWidth = this.__shape.getWidth();\r\n const originalHeight = this.__shape.getHeight();\r\n\r\n // Calculate the center coordinates\r\n const centerX = newPosition.x + originalWidth / 2;\r\n const centerY = newPosition.y + originalHeight / 2;\r\n\r\n // Coordinates of the upper left corner after rotation\r\n const upperLeftX = centerX - (originalWidth / 2 * cos + originalHeight / 2 * sin);\r\n const upperLeftY = centerY - (originalWidth / 2 * sin - originalHeight / 2 * cos);\r\n\r\n // Set the new coordinates for the upper left corner\r\n this.__shape.setPosition({\r\n x: upperLeftX,\r\n y: upperLeftY\r\n });\r\n this.__shape.shapeAbsolute.setAbsolutePos({\r\n x: upperLeftX,\r\n y: upperLeftY\r\n });\r\n }\r\n }\r\n\r\n /**\r\n * Function for finding all shapes that are to the right and below a point\r\n * @param {Array} shapes\r\n * @param referencePosition\r\n * @returns {Array}\r\n */\r\n findShapesRightAndBelow(shapes, referencePosition) {\r\n const resultShapes = [];\r\n\r\n shapes.forEach(shape => {\r\n const shapeMeasurementPoints = sqftShapeManager.getMinMaxShapesPointsOnWorkspace([shape]);\r\n const shapeTopLeftPoint = shapeMeasurementPoints[0];\r\n\r\n if (shapeTopLeftPoint.x >= referencePosition.x && shapeTopLeftPoint.y >= referencePosition.y) {\r\n resultShapes.push(shape);\r\n }\r\n });\r\n\r\n return resultShapes;\r\n }\r\n}\r\n","import Polygon from \"../shapes/layouts/polygon\";\r\nimport {IRONING_BOARD_DIRECTION} from \"./cabinetShapes\";\r\n\r\nexport const createIroningBoardShape = (width, height, radius, direction) => {\r\n const points = [];\r\n const steps = 20; // number of points for the arc\r\n\r\n // Straight lines\r\n points.push({ x: 0, y: 0 });\r\n points.push({ x: width, y: 0 });\r\n //points.push({ x: width, y: height});\r\n\r\n if (direction === IRONING_BOARD_DIRECTION.left) {\r\n for (let i = steps; i >= 0; i--) {\r\n const angle = (Math.PI / 2) * (i / steps); // quarter circle\r\n const x = width - radius * Math.cos(angle);\r\n const y = height - radius + radius * Math.sin(angle);\r\n points.push({x, y});\r\n }\r\n }\r\n\r\n if (direction === IRONING_BOARD_DIRECTION.right) {\r\n for (let i = 0; i <= steps; i++) {\r\n const angle = (Math.PI / 2) * (i / steps); // quarter circle\r\n const x = width - radius + radius * Math.cos(angle);\r\n const y = height - radius + radius * Math.sin(angle);\r\n points.push({ x, y });\r\n }\r\n }\r\n\r\n // Straight lines\r\n //points.push({ x: 0, y: height - radius });\r\n\r\n return new Polygon(points, true, true);\r\n};\r\n","import {post} from \"../../../api/api\";\r\n//import {getResponse, handleHttpError} from \"../../../api/api\";\r\n\r\nexport function getUrlBase() {\r\n let {subDomain} = document.kvConfig;\r\n let {domain} = document.kvConfig;\r\n domain = domain || 'quotesflooring.com';\r\n subDomain = subDomain ? subDomain + '.' : '';\r\n\r\n return (location.port === \"9007\" || document.kvConfig.kioskMode) ? `${subDomain}${domain}` : \"\";\r\n}\r\n\r\nexport const sqftPost = async (url, data, options = {}) => {\r\n return post(url, data, options);\r\n //void post;\r\n\r\n // const fullUrl = 'https://quotekitchenandbath.com' + url;\r\n // const isFormData = Object.prototype.toString.call(data) === '[object FormData]';\r\n // const headers = {\r\n // 'Accept': 'application/json'\r\n // };\r\n // if (!isFormData) {\r\n // headers['Content-Type'] = 'application/json';\r\n // }\r\n //\r\n // return fetch(fullUrl, {\r\n // method: 'post',\r\n // body: isFormData ? data : JSON.stringify(data),\r\n // headers: new Headers(headers),\r\n // signal: options.signal,\r\n // })\r\n // .then(handleHttpError)\r\n // .then(response => getResponse(response))\r\n // .catch(reason => {\r\n // if (reason.name === 'AbortError') {\r\n // console.log('Fetch aborted');\r\n // } else {\r\n // return Promise.reject(reason);\r\n // }\r\n // });\r\n};\r\n\r\nexport const fetchDataWithCancellation = (url, key, shouldSaveDataInStore = false) => {\r\n return async () => {\r\n const controller = new AbortController();\r\n const signal = controller.signal;\r\n\r\n store.dispatch({ type: 'REQUEST_STARTED', payload: { key, controller } });\r\n\r\n try {\r\n const response = await fetch(url, { signal });\r\n if (!response.ok) {\r\n throw new Error('Network response was not ok.');\r\n }\r\n\r\n const data = await response.json();\r\n store.dispatch({ type: 'REQUEST_SUCCESS', payload: { key, data: shouldSaveDataInStore ? data : null} });\r\n\r\n return data\r\n } catch (error) {\r\n if (error.name === 'AbortError') {\r\n console.log('Fetch aborted:', key);\r\n } else {\r\n store.dispatch({ type: 'REQUEST_FAILURE', payload: { key, error: error.message } });\r\n }\r\n }\r\n };\r\n};\r\n\r\nexport const cancelFetch = (key) => {\r\n return () => {\r\n const state = store.getState();\r\n const controller = state.sqftState.requests[key];\r\n\r\n if (controller) {\r\n controller.abort();\r\n store.dispatch({ type: 'REQUEST_CANCELLED', payload: { key } });\r\n store.dispatch({ type: 'REMOVE_CONTROLLER', payload: { key } });\r\n }\r\n };\r\n};\r\n","import EventManager from \"../../../store/sqftEventManager\";\r\nimport workspace from \"../../workspace\";\r\nimport config from \"../../../store/sqftConfig\";\r\nimport {getPointField} from \"../../../../../helpers/sqftHelper\";\r\nimport Movable from \"./../mixin/movable\";\r\nimport COLOR_THEMES from \"../../../store/colorThemes\";\r\nimport PointV2, {CORE_POINT_LAYOUTS} from \"../../shapes/pointV2\";\r\nimport RenderFigures from \"../../../helpers/renderFigures\";\r\n\r\nexport default class Box {\r\n\r\n design = {\r\n fillStyle: '#6A6A6A',\r\n fillStyleDelete: 'rgba(208,1,27,0.3)', //'rgba(253,2,33, 0.5)',\r\n strokeStyle: COLOR_THEMES[config.activeTheme].primary,\r\n lineWidth: 1,\r\n borderRadius: 10,\r\n shadowColor: '#eeeeee',\r\n shadowBlur: 15,\r\n minimumHeight: 4,\r\n minimumWidth: 15,\r\n width: 50,\r\n height: 10\r\n };\r\n params = {\r\n isCenteredByY: false\r\n };\r\n points = {};\r\n children = [];\r\n _mixin = {\r\n movable: null\r\n };\r\n\r\n constructor(pos, design) {\r\n this.design = Object.assign(this.design, design);\r\n\r\n this.mixin.movable = new Movable(pos.x, pos.y, this.design.width, this.design.height, EventManager.priorities.SEGMENT, this);\r\n this.initPoints();\r\n this.initEvents();\r\n }\r\n\r\n initEvents() {\r\n EventManager.addEvent(\r\n EventManager.events.RENDER,\r\n this.render.bind(this),\r\n this,\r\n EventManager.priorities.BOX\r\n );\r\n\r\n EventManager.addEvent(\r\n EventManager.events.MOUSE_UP,\r\n this.onMouseUp.bind(this),\r\n this,\r\n EventManager.priorities.SEGMENT\r\n );\r\n }\r\n\r\n delete() {\r\n this.deleteEvents();\r\n workspace.textBoxManager.removeBox(this);\r\n }\r\n\r\n deregisterEvents = () => {\r\n EventManager.removeEvent(this);\r\n if (this.mixin.movable) {\r\n this.mixin.movable.deregisterEvents();\r\n }\r\n for (const point in this.points) {\r\n if (this.points.hasOwnProperty(point)) {\r\n this.points[point].deregisterEvents();\r\n }\r\n }\r\n this.isHidden = true;\r\n }\r\n\r\n reInitEvents = () => {\r\n this.initEvents();\r\n if (this.mixin.movable) {\r\n this.mixin.movable.reInitEvents();\r\n }\r\n for (const point in this.points) {\r\n if (this.points.hasOwnProperty(point)) {\r\n this.points[point].reInitEvents();\r\n }\r\n }\r\n this.isHidden = true;\r\n }\r\n\r\n deleteEvents() {\r\n EventManager.resetCursor(this);\r\n EventManager.removeEvent(this);\r\n EventManager.removeEvent(this.mixin.movable);\r\n\r\n for(let child of this.children) {\r\n child.delete();\r\n }\r\n\r\n for (const point in this.points) {\r\n if (this.points.hasOwnProperty(point)) {\r\n this.points[point].delete();\r\n }\r\n }\r\n }\r\n\r\n get width() {\r\n return this.design.width;\r\n }\r\n\r\n set width(value) {\r\n this.design.width = value;\r\n }\r\n\r\n get height() {\r\n return this.design.height;\r\n }\r\n\r\n set height(value) {\r\n this.design.height = value;\r\n }\r\n\r\n get mixin() {\r\n return this._mixin;\r\n }\r\n\r\n set mixin(value) {\r\n this._mixin = value;\r\n }\r\n\r\n get posX() {\r\n return this.mixin.movable.posX;\r\n }\r\n\r\n get posY() {\r\n return this.mixin.movable.posY;\r\n }\r\n\r\n set posX(value) {\r\n this.mixin.movable.posX = value;\r\n }\r\n\r\n set posY(value) {\r\n this.mixin.movable.posY = value;\r\n }\r\n\r\n initPoints() {\r\n let point;\r\n\r\n // 0 1 2\r\n // 3 4\r\n // 5 6 7\r\n\r\n let pointsParams = [\r\n // {x: 0, y: 0}, // {x: this.posX, y: this.posY},\r\n // {x: this.design.width / 2, y: 0},\r\n // {x: this.design.width, y: 0},\r\n // {x: 0, y: this.design.height / 2},\r\n {id: 'p4', x: this.design.width, y: this.design.height / 2, isCenteredByY: true, isResizedByPoint: true, isScaledByPoint: false, radius: 10, layout: CORE_POINT_LAYOUTS.ear},\r\n // {x: 0, y: this.design.height},\r\n // {x: this.design.width / 2, y: this.design.height},\r\n {id: 'p7', x: this.design.width, y: this.design.height, isCenteredByY: true, isResizedByPoint: false, isScaledByPoint: true, radius: 10, layout: CORE_POINT_LAYOUTS.resize}\r\n ];\r\n for (let [i, pointParams] of pointsParams.entries()) {\r\n void i;\r\n let pointState = {\r\n priority: EventManager.priorities.BOX_POINT,\r\n movable: true,\r\n isCenteredByY: pointParams.isCenteredByY,\r\n isResizedByPoint: pointParams.isResizedByPoint,\r\n isScaledByPoint: pointParams.isScaledByPoint,\r\n isVisibleOnHover: true\r\n };\r\n let pointDesign = {\r\n radius: pointParams.radius,\r\n lineWidth: 1,\r\n layout: pointParams.layout\r\n };\r\n point = new PointV2(pointParams.x, pointParams.y, this, pointState, pointDesign);\r\n point.isResizedByPoint = true;\r\n\r\n this.points[pointParams.id] = point;\r\n }\r\n }\r\n\r\n getOffset = function() {\r\n let self = this;\r\n\r\n return getPointField(self.posX, self.posY);\r\n };\r\n\r\n getPosition = function() {\r\n let self = this;\r\n\r\n return {x: self.posX, y: self.posY};\r\n };\r\n\r\n getPointField = function(posX, posY) {\r\n let fieldWidth = config.fieldWidth,\r\n center = fieldWidth / 2;\r\n\r\n let scale = workspace.getScale(),\r\n offset = workspace.getOffset();\r\n\r\n return {\r\n x: (posX * scale) + offset.x - center,\r\n y: (posY * scale) + offset.y - center\r\n };\r\n };\r\n\r\n onMouseUp = () => {\r\n if (EventManager.getCursor().indexOf(\"delete\") >= 0 && this.mixin.movable.state.hovering) {\r\n this.delete();\r\n }\r\n };\r\n\r\n render = (ctx) => {\r\n let pointField = getPointField(this.posX, this.posY);\r\n let scale = config.scale;\r\n let width = this.mixin.movable.width * scale;\r\n let height = this.mixin.movable.height * scale;\r\n let radius = this.design.borderRadius;\r\n let fill = this.design.fillStyle;\r\n\r\n ctx.save();\r\n ctx.beginPath();\r\n ctx.fillStyle = this.design.fillStyle;\r\n ctx.strokeStyle = this.design.strokeStyle;\r\n ctx.lineWidth = this.design.lineWidth;\r\n //ctx.shadowColor = this.design.shadowColor;\r\n //ctx.shadowBlur = this.design.shadowBlur;\r\n\r\n if(EventManager.getCursor().indexOf(\"delete\") >= 0 && this.mixin.movable.state.hovering) {\r\n ctx.fillStyle = this.design.fillStyleDelete;\r\n }\r\n\r\n //ctx.rect(pointField.x, pointField.y, this.design.width * scale, this.design.height * scale);\r\n //ctx.rect(pointField.x, pointField.y, this.mixin.movable.width * scale, this.mixin.movable.height * scale);\r\n RenderFigures.roundedRect(ctx, pointField.x, pointField.y, width, height, radius, fill, true);\r\n\r\n ctx.stroke();\r\n ctx.fill();\r\n ctx.closePath();\r\n ctx.restore();\r\n };\r\n}\r\n","import EventManager from \"../../../store/sqftEventManager\";\r\nimport workspace from \"../../workspace\";\r\nimport config from \"../../../store/sqftConfig\";\r\nimport ModelText from \"./model/modelText\";\r\nimport {getPointField} from \"../../../../../helpers/sqftHelper\";\r\nimport $ from \"jquery\";\r\nimport {setIsItextEditing} from \"../../../../../../../actions/sqftMenuFunctions\";\r\nimport store from \"../../../../../../../store\";\r\n\r\nexport default class IText {\r\n\r\n _modelText;\r\n _fontHeight = 1;\r\n _hMargin = 11;\r\n wMargin = 14;\r\n fillStyle = '#999999'; // fontColor\r\n fillStyleGray = '#999999';\r\n fillStyleTransparent = \"rgba(255, 255, 255, 0.5)\";\r\n lineHeight = 1.2; //1.286;\r\n placeholder = 'Add text by dbl click';\r\n state = {\r\n active: false\r\n };\r\n\r\n constructor(txt, font, posX, posY, width, height, angle, parent = workspace) {\r\n if(txt === ''){\r\n txt = this.placeholder;\r\n }\r\n this.modelText = new ModelText(txt, font, posX, posY, width, height, angle, parent);\r\n this.initEvents();\r\n if(parent.children) {\r\n parent.children.push(this);\r\n }\r\n }\r\n\r\n get modelText() {\r\n return this._modelText;\r\n }\r\n\r\n set modelText(value) {\r\n this._modelText = value;\r\n }\r\n\r\n get fontHeight() {\r\n return this._fontHeight * config.scale / config.defaultScale + (this.getHeight() / 5); // todo wtf /5 ?\r\n }\r\n\r\n set fontHeight(value) {\r\n this._fontHeight = value;\r\n }\r\n\r\n get hMargin() {\r\n // todo perhaps make borders smaller\r\n // return this._hMargin * config.scale / config.defaultScale;\r\n return this._hMargin;\r\n }\r\n\r\n set hMargin(value) {\r\n this._hMargin = value;\r\n }\r\n\r\n initEvents() {\r\n EventManager.addEvent(\r\n EventManager.events.RENDER,\r\n this.render.bind(this),\r\n this,\r\n EventManager.priorities.BOX\r\n );\r\n\r\n EventManager.addEvent(\r\n EventManager.events.DBLCLICK,\r\n this.onDblClick.bind(this),\r\n this,\r\n EventManager.priorities.IMAGE\r\n );\r\n\r\n //todo remove deleting from menu here\r\n // EventManager.addEvent(\r\n // EventManager.events.MOUSE_UP,\r\n // this.onMouseUp.bind(this),\r\n // this,\r\n // EventManager.priorities.BOX\r\n // );\r\n }\r\n\r\n delete() {\r\n this.deleteEvents();\r\n }\r\n\r\n deleteEvents() {\r\n EventManager.removeEvent(this);\r\n }\r\n\r\n deregisterEvents = () => {\r\n EventManager.removeEvent(this);\r\n this.isHidden = true;\r\n }\r\n\r\n reInitEvents = () => {\r\n this.initEvents();\r\n this.isHidden = false;\r\n }\r\n\r\n getWidth() {\r\n let scale = config.scale;\r\n let parentWidth = this.modelText.parent.width * scale;\r\n\r\n return parentWidth ? parentWidth: this.modelText.width * scale ;\r\n }\r\n\r\n getHeight() {\r\n let scale = config.scale;\r\n let parentHeight = this.modelText.parent.height * scale;\r\n\r\n return parentHeight ? parentHeight : this.modelText.height * scale ;\r\n }\r\n\r\n getPosX() {\r\n return this.modelText.parent.posX ? this.modelText.parent.posX : this.modelText.posX;\r\n }\r\n\r\n getPosY() {\r\n return this.modelText.parent.posY ? this.modelText.parent.posY : this.modelText.posY;\r\n }\r\n\r\n onDblClick(mousePos) {\r\n void mousePos;\r\n let self = this;\r\n let state = this.modelText.parent\r\n ? this.modelText.parent.mixin.movable.state\r\n : this.modelText.state; //todo\r\n\r\n if (state.hovering && !document.querySelector(\".i-text\")) {\r\n window.lineInputFocused = true;\r\n EventManager.stealCursor();\r\n const ENTER_KEY = 13;\r\n const textarea = this.createTextArea();\r\n\r\n document.querySelector(\".sqft-main-grid\").appendChild(textarea);\r\n\r\n textarea.focus();\r\n textarea.onkeydown = function(e) {\r\n if (e.keyCode === ENTER_KEY) {\r\n e.target.blur();\r\n }\r\n };\r\n\r\n const blur = function (e) {\r\n if (!e.target.closest('.i-text')) {\r\n textarea.blur();\r\n }\r\n };\r\n\r\n textarea.oninput = function() {\r\n this.style.height = \"5px\";\r\n this.style.height = (this.scrollHeight)+\"px\";\r\n };\r\n\r\n textarea.onblur = function () {\r\n window.lineInputFocused = false;\r\n self.modelText.txt = textarea.value;\r\n // restore placeholder\r\n if (textarea.value === '') {\r\n self.modelText.txt = self.placeholder;\r\n }\r\n self.fillStyle = self.fillStyleGray; // return color back to gray\r\n textarea.parentNode.removeChild(textarea);\r\n document.removeEventListener(\"click\", blur);\r\n store.dispatch(setIsItextEditing(false));\r\n };\r\n\r\n this.fillStyle = this.fillStyleTransparent; // make color transparent\r\n\r\n $(textarea).on(\"change keyup paste\", function() {\r\n self.modelText.txt = $(this).val();\r\n });\r\n textarea.onchange = function (event) {\r\n void event;\r\n self.modelText.txt = textarea.value;\r\n }.bind({ hoveredText: state.hoveredText});\r\n\r\n setTimeout(() => {\r\n document.addEventListener(\"click\", blur);\r\n }, 500);\r\n store.dispatch(setIsItextEditing(true));\r\n return false;\r\n }\r\n }\r\n\r\n wrapText(ctx, text, x, y, maxWidth, fontSize, fontFace) {\r\n let firstY = y;\r\n let lineHeight = fontSize * this.lineHeight;\r\n\r\n ctx.font = fontSize + \"px \" + fontFace; // Set the font for the context\r\n\r\n // Split the text into lines using wrapWord (handles word wrapping and ellipsis)\r\n let lines = this.wrapWords(ctx, text, maxWidth, 1);\r\n\r\n // Loop through each line and draw it on the canvas\r\n for (let line of lines) {\r\n ctx.fillText(line, x, y);\r\n y += lineHeight;\r\n }\r\n\r\n let scale = workspace.getScale();\r\n\r\n // Adjust the parent box height based on the new text block height\r\n this.modelText.parent.mixin.movable.height = (y - firstY) / scale + (lineHeight + this.hMargin * 2) / scale;\r\n\r\n // Adjust point positions based on the new height\r\n this.modelText.parent.points.p4.modelCorePoint.mixins.movable.posY = this.modelText.parent.mixin.movable.height / 2;\r\n this.modelText.parent.points.p7.modelCorePoint.mixins.movable.posY = this.modelText.parent.mixin.movable.height;\r\n }\r\n\r\n\r\n // onMouseUp = () => {\r\n // if (EventManager.getCursor().indexOf(\"delete\") >= 0 && this.modelText.parent.mixin.movable.state.hovering) {\r\n // this.delete();\r\n // }\r\n // };\r\n\r\n render(ctx) {\r\n //let angle = this.modelText.angle || 0;\r\n\r\n let fontHeight = this.fontHeight;\r\n let pointField = getPointField(this.modelText.posX, this.modelText.posY, this.modelText.parent);\r\n // let pointField = getPointField(this.getPosX(), this.getPosY(), this.modelText.parent);\r\n\r\n //let txtWidth = ctx.measureText(this.modelText.txt).width + 2 * this.hMargin;\r\n //let scale = config.scale;\r\n let width = this.getWidth();\r\n //let height = this.getHeight();\r\n\r\n ctx.save();\r\n ctx.font = fontHeight + 'px ' + this.modelText.font;\r\n ctx.textAlign = 'left';\r\n ctx.textBaseline = 'top';\r\n ctx.fillStyle = this.fillStyle;\r\n\r\n //TODO remove\r\n //ctx.translate(pointField.x, pointField.y);\r\n //ctx.translate(pointField.x + width / 2, pointField.y); //centering for scale\r\n //ctx.rotate(angle); // text rotation\r\n //ctx.lineWidth = 1;\r\n //ctx.strokeRect(-width / 2, 0, width, height); //rect around text\r\n //ctx.scale(width / txtWidth, height / fontHeight); // text scale\r\n //ctx.translate(this.hMargin, 0);\r\n //ctx.fillText(this.modelText.txt, -txtWidth/2, 0, width / 2);\r\n // this.wrapText(ctx, this.modelText.txt, -txtWidth/2, 0, width, this.fontHeight, this.modelText.font);\r\n //ctx.fillText(this.modelText.txt, pointField.x, pointField.y);\r\n this.wrapText(\r\n ctx,\r\n this.modelText.txt,\r\n pointField.x + this.wMargin,\r\n pointField.y + this.hMargin,\r\n width - this.wMargin,\r\n this.fontHeight,\r\n this.modelText.font\r\n );\r\n\r\n ctx.restore();\r\n }\r\n\r\n createTextArea() {\r\n let textarea = document.createElement(\"textarea\");\r\n let pointField = getPointField(this.modelText.posX, this.modelText.posY, this.modelText.parent);\r\n let scale = workspace.getScale();\r\n\r\n textarea.className = \"i-text\";\r\n textarea.style.left = pointField.x + this.wMargin + \"px\";\r\n textarea.style.top = pointField.y + this.hMargin + \"px\"; // todo -2 hook for first line\r\n textarea.style.width = this.getWidth() - this.wMargin + \"px\";\r\n // textarea.style.height = this.getHeight() + \"px\";\r\n textarea.style.height = this.modelText.parent.mixin.movable.height * scale + \"px\";\r\n textarea.style.fontSize = this.fontHeight + \"px\";\r\n textarea.style.lineHeight = this.fontHeight * this.lineHeight + 0.8 + \"px\"; // 2 hook for first line\r\n textarea.style.fontFamily = this.modelText.font;\r\n textarea.style.color = this.fillStyle;\r\n if (this.modelText.txt === this.placeholder) {\r\n textarea.value = '';\r\n } else {\r\n textarea.value = this.modelText.txt;\r\n }\r\n return textarea\r\n }\r\n\r\n /**\r\n * Split the text into lines using wrapWord (handles word wrapping and ellipsis)\r\n * @param ctx\r\n * @param testLine\r\n * @param maxWidth\r\n * @param spaces\r\n * @return {[]}\r\n */\r\n wrapWords(ctx, testLine, maxWidth, spaces) {\r\n let i = 0;\r\n let lines = [];\r\n let currentLine = '';\r\n const ellipsis = '...';\r\n\r\n // Split the text into individual words\r\n const words = testLine.split(' ');\r\n\r\n // Iterate through the words and add them to lines while checking for width\r\n for (let word of words) {\r\n let testLine = currentLine + word + ' ';\r\n let testWidth = ctx.measureText(testLine).width;\r\n\r\n // If adding the word exceeds maxWidth, move it to the next line\r\n if (testWidth > maxWidth) {\r\n // If the word itself is too long, truncate it and add ellipsis\r\n if (ctx.measureText(word).width > maxWidth) {\r\n while (ctx.measureText(word).width > maxWidth && i < word.length) {\r\n if (ctx.measureText(word.slice(0, i + spaces) + ellipsis).width >= maxWidth) {\r\n lines.push(word.slice(0, i) + ellipsis);\r\n return lines;\r\n }\r\n i++;\r\n }\r\n }\r\n // Push the current line and start a new line with the current word\r\n lines.push(currentLine.trim());\r\n currentLine = word + ' ';\r\n } else {\r\n currentLine = testLine; // Add the word to the current line\r\n }\r\n }\r\n\r\n // Add the last line to the lines array\r\n if (currentLine.length > 0) {\r\n lines.push(currentLine.trim());\r\n }\r\n\r\n return lines;\r\n }\r\n}\r\n","export default class ModelText {\r\n _txt;\r\n _font;\r\n _posX;\r\n _posY;\r\n _width;\r\n _height;\r\n _angle;\r\n _parent;\r\n\r\n constructor(txt, font, posX, posY, width, height, angle, parent) {\r\n this._txt = txt;\r\n this._font = font;\r\n this._posX = posX;\r\n this._posY = posY;\r\n this._width = width;\r\n this._height = height;\r\n this._angle = angle;\r\n this._parent = parent;\r\n }\r\n\r\n get txt() {\r\n return this._txt;\r\n }\r\n\r\n set txt(value) {\r\n this._txt = value;\r\n }\r\n\r\n get font() {\r\n return this._font;\r\n }\r\n\r\n set font(value) {\r\n this._font = value;\r\n }\r\n\r\n get posX() {\r\n return this._posX;\r\n }\r\n\r\n set posX(value) {\r\n this._posX = value;\r\n }\r\n\r\n get posY() {\r\n return this._posY;\r\n }\r\n\r\n set posY(value) {\r\n this._posY = value;\r\n }\r\n\r\n get width() {\r\n return this._width;\r\n }\r\n\r\n set width(value) {\r\n this._width = value;\r\n }\r\n\r\n get height() {\r\n return this._height;\r\n }\r\n\r\n set height(value) {\r\n this._height = value;\r\n }\r\n\r\n get angle() {\r\n return this._angle;\r\n }\r\n\r\n set angle(value) {\r\n this._angle = value;\r\n }\r\n\r\n get parent() {\r\n return this._parent;\r\n }\r\n\r\n set parent(value) {\r\n this._parent = value;\r\n }\r\n\r\n}\r\n","/**\r\n * @param e KeyboardEvent\r\n */\r\nexport const isBackspaceKeyCode = (e) => {\r\n return e.keyCode === 8\r\n}\r\n\r\n/**\r\n * @param e KeyboardEvent\r\n */\r\nexport const isDeleteKeyCode = (e) => {\r\n return e.keyCode === 46\r\n}\r\n\r\n/**\r\n * @param e KeyboardEvent\r\n */\r\nexport const isLengthKeyCode = (e) => {\r\n return isNumericKey(e) || isCommaKey(e) || isPeriodKey(e) || isSpace(e) || isSlash(e) || e.key === \"'\" || e.key === \"\\\"\"\r\n}\r\n\r\n/**\r\n * @param e KeyboardEvent\r\n */\r\nexport const isNumericKey = (e) => {\r\n return (e.keyCode >= 48 && e.keyCode <= 57) || (e.keyCode >= 96 && e.keyCode <= 105)\r\n}\r\n\r\n/**\r\n * is \",\"\r\n * @param e KeyboardEvent\r\n */\r\nexport const isCommaKey = (e) => {\r\n return e.keyCode === 188\r\n}\r\n\r\n/**\r\n * is \".\"\r\n * @param e KeyboardEvent\r\n */\r\nexport const isPeriodKey = (e) => {\r\n return e.keyCode === 190\r\n}\r\n\r\n/**\r\n * is \" \"\r\n * @param e KeyboardEvent\r\n */\r\nexport const isSpace = (e) => {\r\n return e.keyCode === 32\r\n}\r\n\r\n/**\r\n * is \"/\"\r\n * @param e KeyboardEvent\r\n */\r\nexport const isSlash = (e) => {\r\n return e.keyCode === 191\r\n}\r\n","import uuid from \"uuid\";\r\nimport workspace from \"../workspace\";\r\nimport {attachResource} from \"./resourseCanas\";\r\nimport store from \"../../../../../../store\";\r\nimport {addSqftCroppedSlabImage} from \"../../../../../../actions/sqftSlabFunctions\";\r\nimport {MOVABLE_IMAGE_TYPES, SHAPE_PART_ID} from \"../../../../constants\";\r\nimport {initTitle} from \"./labels/labelsHelper\";\r\nimport {SLAB_IMAGE_TYPES} from \"../../../../../../reducers/sqftSlabReducer\";\r\n\r\nconst Duplicate = function () {\r\n this.cloneShape = (shape) => {\r\n let shapeData = shape.export();\r\n const workspaceIds = workspace.getObjIds();\r\n const newId = workspaceIds + 1;\r\n const currentShapePosition = shape.getPosition();\r\n\r\n const newShape = workspace.importShape(shapeData);\r\n newShape.setPosition({\r\n x: currentShapePosition.x + 10,\r\n y: currentShapePosition.y + 10,\r\n });\r\n newShape.shapeSlab.__absolutePos = null;\r\n newShape.shapePieces = [];\r\n newShape.setId(newId);\r\n workspace.setObjIds(newId);\r\n this.cloneShapeLines(newShape);\r\n if (newShape.partId === SHAPE_PART_ID.slabPlaceHolder) {\r\n newShape.init({\r\n x: currentShapePosition.x + 10,\r\n y: currentShapePosition.y + 10,\r\n });\r\n initTitle('PLACEHOLDER', SLAB_IMAGE_TYPES.placeholder, newShape);\r\n }\r\n }\r\n this.cloneShapeLines = (shape) => {\r\n const lines = shape.getLines();\r\n for (const line of lines) {\r\n this.cloneShapeLine(line);\r\n }\r\n }\r\n this.cloneShapeLine = (line) => {\r\n const attachedResource = workspace.getAttachedTo(line);\r\n line.id = uuid();\r\n line.from.id = uuid();\r\n if (attachedResource) {\r\n line.isDisabledInPopup = attachedResource.isDisabledInPopup;\r\n attachResource(line, null, attachedResource.type, attachedResource.featureId, null, attachedResource.name, attachedResource.height, uuid());\r\n }\r\n }\r\n\r\n this.cloneMovableImage = (shape) => {\r\n let imageData = shape.export();\r\n const workspaceIds = workspace.getObjIds();\r\n const newId = workspaceIds + 1;\r\n const currentMovableImagePosition = shape.getPosition();\r\n const movableImage = workspace.importImage(imageData);\r\n movableImage.setPosition({\r\n x: currentMovableImagePosition.x + 10,\r\n y: currentMovableImagePosition.y + 10,\r\n });\r\n movableImage.setId(newId);\r\n workspace.setObjIds(newId);\r\n\r\n if (movableImage.type === MOVABLE_IMAGE_TYPES.slabImage) {\r\n store.dispatch(addSqftCroppedSlabImage(movableImage));\r\n }\r\n }\r\n}\r\n\r\nexport default new Duplicate()\r\n","import EventManager from \"../../store/sqftEventManager\";\r\nimport workspace from \"../workspace\";\r\nimport config from \"../../store/sqftConfig\";\r\n\r\nexport default new function() {\r\n var self = this;\r\n const fontColor = \"#999999\";\r\n\r\n this.init = function() {\r\n EventManager.addEvent(\r\n EventManager.events.RENDER,\r\n self.render,\r\n self,\r\n EventManager.priorities.OVERLAY - 1\r\n );\r\n };\r\n this.render = function(ctx) {\r\n let i, text, width, posText,\r\n canvas = workspace.getCanvas(),\r\n canvasWidth = canvas.width,\r\n canvasHeight = canvas.height,\r\n scale = config.scale,\r\n gridSize = config.workspace.gridSize * scale,\r\n adjustedSize = (gridSize / 3),\r\n rulerSize = adjustedSize + 6,\r\n pos = workspace.getPosition(),\r\n start = {\r\n x: (pos.x % gridSize) * -1,\r\n y: (pos.y % gridSize) * -1\r\n };\r\n while(start.y < rulerSize || start.y < 0) {\r\n start.y += gridSize;\r\n }\r\n while(start.x < rulerSize || start.x < 0) {\r\n start.x += gridSize;\r\n }\r\n //render ruler\r\n ctx.clearRect(0, 0, canvasWidth, rulerSize);\r\n ctx.clearRect(0, 0, rulerSize, canvasHeight);\r\n //horizontal ruler\r\n ctx.font = adjustedSize.toString() + \"px sans-serif\";\r\n ctx.fillStyle = fontColor;\r\n for(i = start.x; i < canvasWidth; i+=gridSize) {\r\n text = getText(pos.x + i);\r\n width = ctx.measureText(text).width;\r\n posText = {\r\n x: i - (width / 2),\r\n y: adjustedSize,\r\n width: width,\r\n height: adjustedSize,\r\n text: text\r\n };\r\n ctx.fillText(posText.text, posText.x, posText.y);\r\n }\r\n //vertical ruler\r\n for(i = start.y; i < canvasHeight; i+=gridSize) {\r\n text = Math.round((pos.y + i) / scale).toString();\r\n width = ctx.measureText(text).width;\r\n posText = {\r\n x: adjustedSize,\r\n y: i,\r\n width: width,\r\n height: adjustedSize,\r\n text: text\r\n };\r\n ctx.save();\r\n ctx.translate(posText.x, posText.y);\r\n ctx.rotate(-Math.PI/2);\r\n ctx.textAlign = \"center\";\r\n ctx.fillText(posText.text, 0, 0);\r\n ctx.restore();\r\n }\r\n\r\n ctx.beginPath();\r\n ctx.lineWidth = 1;\r\n ctx.strokeStyle = fontColor;\r\n ctx.moveTo(0,rulerSize);\r\n ctx.lineTo(canvasWidth, rulerSize);\r\n ctx.stroke();\r\n\r\n ctx.beginPath();\r\n ctx.lineWidth = 1;\r\n ctx.moveTo(rulerSize, 0);\r\n ctx.lineTo(rulerSize, canvasHeight);\r\n ctx.stroke();\r\n\r\n };\r\n function getText(pos) {\r\n let text = Math.round((pos) / config.scale * config.getMeasureMultiplier());\r\n if(config.measureUnit === \"Metric\") {\r\n text = Math.round(text / 100) * 100;\r\n }\r\n\r\n return text.toString();\r\n }\r\n};\r\n","import config from \"../../store/sqftConfig\";\r\nimport {enableRegularMode, enableSlabMode} from \"../../store/canvasHelper\";\r\nimport store from \"../../../../../../store\";\r\nimport SqftStore from \"../../store/sqftStore\";\r\nimport {showSlabTool} from \"../../../../../../actions/sqftSlabFunctions\";\r\nimport SlabWorkspace from \"../slab/slabWorkspace\";\r\nimport {renderSlabRightPart} from \"../slab/sqftSlabDraw\";\r\nimport sqftEventManager from \"../../store/sqftEventManager\";\r\nimport sqftImageManager from \"../../store/sqftImageManager\";\r\nimport sqftShapeManager from \"../../store/sqftShapeManager\";\r\nimport workspace from \"../workspace\";\r\nimport {MOVABLE_IMAGE_TYPES, SHAPE_PART_ID} from \"../../../../constants\";\r\n\r\nexport default class ResultImages {\r\n workspace;\r\n dimensionsMultiplier = 3;\r\n\r\n constructor(workspace) {\r\n this.workspace = workspace;\r\n }\r\n\r\n getCanvasImageScaled = () => {\r\n const isSlabMode = SqftStore.isSlabMode();\r\n let shouldReturnToSlabMode = false;\r\n if (isSlabMode) {\r\n enableRegularMode();\r\n store.dispatch(showSlabTool(false));\r\n shouldReturnToSlabMode = true;\r\n }\r\n\r\n const pointsMinMax = sqftShapeManager.getMinMaxShapesPointsOnWorkspace(this.workspace.getShapes());\r\n\r\n if (pointsMinMax.length > 0) {\r\n const minX = pointsMinMax[0].x;\r\n const minY = pointsMinMax[0].y;\r\n const maxX = pointsMinMax[2].x;\r\n const maxY = pointsMinMax[2].y;\r\n\r\n const offset = 200;\r\n const startPoint = {\r\n x: minX * config.defaultScaleExport - offset,\r\n y: minY * config.defaultScaleExport - offset\r\n }\r\n const clippingWidth = (maxX - minX) * config.defaultScaleExport + offset * 2;\r\n const clippingHeight = (maxY - minY) * config.defaultScaleExport + offset * 2;\r\n\r\n const resultImage = this.getCanvasScreen(\r\n config.defaultScaleExport,\r\n 0,\r\n 0,\r\n clippingWidth,\r\n clippingHeight,\r\n startPoint,\r\n this.updateCanvasAtStartPoint\r\n );\r\n\r\n //todo not needed to change back\r\n void shouldReturnToSlabMode\r\n // if (shouldReturnToSlabMode) {\r\n // enableSlabMode();\r\n // store.dispatch(showSlabTool(true));\r\n // }\r\n\r\n return resultImage;\r\n }\r\n\r\n return \"\"\r\n };\r\n\r\n getSlabResultImage = () => {\r\n const isSlabMode = SqftStore.isSlabMode();\r\n let shouldReturnToRegularMode = false;\r\n if (!isSlabMode) {\r\n enableSlabMode();\r\n store.dispatch(showSlabTool(true));\r\n shouldReturnToRegularMode = true\r\n }\r\n\r\n //1. Lets get only countertop shapes\r\n const shapesWithoutSlabImages = this.workspace.getShapesWithoutAttachedResources().filter(shp => {\r\n return shp.partId !== SHAPE_PART_ID.slabPlaceHolder\r\n && shp.type !== MOVABLE_IMAGE_TYPES.slabImage\r\n });\r\n\r\n //2. Now get minimum point\r\n const pointsMinMaxRegular = sqftShapeManager.getMinMaxShapesPointsOnWorkspace(shapesWithoutSlabImages, true);\r\n\r\n if (pointsMinMaxRegular.length > 0) {\r\n const minX = pointsMinMaxRegular[0].x;\r\n const minY = pointsMinMaxRegular[0].y;\r\n const maxX = pointsMinMaxRegular[2].x;\r\n const maxY = pointsMinMaxRegular[2].y;\r\n\r\n const workspacePos = workspace.getPosition();\r\n const offset = 200;\r\n\r\n //3. This is minimum point on field\r\n let startPoint = {\r\n x: (minX) * config.defaultScaleExport - offset - workspacePos.x,\r\n y: (minY) * config.defaultScaleExport - offset - workspacePos.y\r\n }\r\n\r\n //4.Canvas width\r\n const clippingWidth = (maxX - minX) * config.defaultScaleExport + offset * 2;\r\n const clippingHeight = (maxY - minY) * config.defaultScaleExport + offset * 2;\r\n\r\n //5.Lets distract canvas width (see renderSlabRightPart staticOffset)\r\n startPoint = {\r\n x: startPoint.x + clippingWidth / 2,\r\n y: startPoint.y\r\n }\r\n\r\n const resultImage = this.getCanvasScreen(\r\n config.defaultScaleExport,\r\n 0,\r\n 0,\r\n clippingWidth,\r\n clippingHeight,\r\n startPoint,\r\n this.updateCanvasSlab\r\n );\r\n\r\n if (shouldReturnToRegularMode) {\r\n enableRegularMode();\r\n store.dispatch(showSlabTool(false));\r\n }\r\n\r\n return resultImage\r\n }\r\n\r\n return \"\"\r\n };\r\n\r\n getSlabCalcImage = () => {\r\n const isSlabMode = SqftStore.isSlabMode();\r\n let shouldReturnToRegularMode = false;\r\n if (!isSlabMode) {\r\n enableSlabMode();\r\n store.dispatch(showSlabTool(true));\r\n shouldReturnToRegularMode = true\r\n }\r\n SlabWorkspace.disableSlabImages();\r\n\r\n const pointsMinMax = sqftShapeManager.getMinMaxShapesPointsOnWorkspace(this.workspace.getShapes());\r\n\r\n if (pointsMinMax.length > 0) {\r\n const minX = pointsMinMax[0].x;\r\n const minY = pointsMinMax[0].y;\r\n const maxX = pointsMinMax[2].x;\r\n const maxY = pointsMinMax[2].y;\r\n\r\n const offset = 200;\r\n const startPoint = {\r\n x: (minX) * config.defaultScaleExport - offset,\r\n y: (minY) * config.defaultScaleExport - offset\r\n }\r\n const clippingWidth = (maxX - minX) * config.defaultScaleExport + offset * 2;\r\n const clippingHeight = (maxY - minY) * config.defaultScaleExport + offset * 2;\r\n\r\n const resultImage = this.getCanvasScreen(\r\n config.defaultScaleExport,\r\n 0,\r\n 0,\r\n clippingWidth,\r\n clippingHeight,\r\n startPoint,\r\n this.updateCanvasAtStartPoint\r\n );\r\n\r\n if (shouldReturnToRegularMode) {\r\n enableRegularMode();\r\n store.dispatch(showSlabTool(false));\r\n }\r\n // else {\r\n // SlabWorkspace.init();\r\n // }\r\n\r\n return resultImage\r\n }\r\n\r\n return \"\"\r\n }\r\n\r\n /**\r\n * Will return array of zoomed shape + AppliancesThatShouldRenderMeasurementsInsideTheShape images. One image per shape\r\n * @return {*}\r\n */\r\n getCanvasApplianceImages = () => {\r\n const applianceImages = sqftImageManager.getAppliancesThatShouldRenderMeasurementsInsideTheShape();\r\n const createdImagesForShapes = new Set();\r\n\r\n return applianceImages.reduce((result, applianceImage) => {\r\n const outerShape = applianceImage.getOuterShape();\r\n if (outerShape) {\r\n\r\n if (createdImagesForShapes.has(outerShape.id)) {\r\n return result;\r\n }\r\n\r\n createdImagesForShapes.add(outerShape.id);\r\n\r\n const outerShapePosition = outerShape.getPosition();\r\n let shapesPoints = outerShape.getPoints();\r\n let pointsMinMax = sqftShapeManager.getMinMaxPoints(shapesPoints, false);\r\n\r\n const offset = 200;\r\n const startPoint = {\r\n x: (outerShapePosition.x + pointsMinMax.minX) * config.defaultScaleExport - offset,\r\n y: (outerShapePosition.y + pointsMinMax.minY) * config.defaultScaleExport - offset\r\n };\r\n const clippingWidth = (pointsMinMax.maxX - pointsMinMax.minX) * config.defaultScaleExport + offset * 2;\r\n const clippingHeight = (pointsMinMax.maxY - pointsMinMax.minY) * config.defaultScaleExport + offset * 2;\r\n\r\n const canvasImage = this.getCanvasImage(config.defaultScaleExport,\r\n startPoint,\r\n clippingWidth,\r\n clippingHeight\r\n );\r\n result.push(canvasImage);\r\n }\r\n return result;\r\n }, []);\r\n };\r\n\r\n getCanvasImage = (newScale = config.defaultScaleExport, startPoint, imageWidth, imageHeight) => {\r\n const isSlabMode = SqftStore.isSlabMode();\r\n if (isSlabMode) {\r\n enableRegularMode();\r\n store.dispatch(showSlabTool(false));\r\n }\r\n\r\n return this.getCanvasScreen(\r\n newScale,\r\n 0,\r\n 0,\r\n imageWidth,\r\n imageHeight,\r\n startPoint,\r\n this.updateCanvasAtStartPoint\r\n );\r\n };\r\n\r\n getCanvasScreen = (newScale, startClippingX, startClippingY, clippingWidth, clippingHeight, centerPoint, updateCallback) => {\r\n // fix transparent background by drawing canvas onto another canvas with a white background\r\n // https://stackoverflow.com/questions/18609715/html5-canvas-todataurl-image-has-no-background-color\r\n\r\n const srcCanvas = this.workspace.getCanvas();\r\n const temp = {\r\n scale: config.scale,\r\n width: srcCanvas.width,\r\n height: srcCanvas.height,\r\n };\r\n updateCallback(srcCanvas, newScale, clippingWidth, clippingHeight, centerPoint);\r\n\r\n //create a dummy CANVAS\r\n const destinationCanvas = document.createElement(\"canvas\");\r\n const destCtx = destinationCanvas.getContext('2d');\r\n destinationCanvas.width = srcCanvas.width ;\r\n destinationCanvas.height = srcCanvas.height ;\r\n\r\n //create a rectangle with the desired color\r\n destCtx.fillStyle = \"#FFFFFF\";\r\n destCtx.fillRect(0,0, destinationCanvas.width, destinationCanvas.height);\r\n\r\n //draw the original canvas onto the destination canvas\r\n if (clippingWidth > srcCanvas.width) clippingWidth = srcCanvas.width;\r\n if (clippingHeight > srcCanvas.height) clippingHeight = srcCanvas.height;\r\n\r\n destCtx.drawImage(\r\n srcCanvas,\r\n startClippingX,\r\n startClippingY,\r\n clippingWidth,\r\n clippingHeight,\r\n 0,\r\n 0,\r\n srcCanvas.width,\r\n srcCanvas.height\r\n );\r\n\r\n //restore canvas\r\n updateCallback(srcCanvas, temp.scale, temp.width, temp.height, centerPoint);\r\n\r\n return destinationCanvas.toDataURL();\r\n }\r\n\r\n updateCanvas = (srcCanvas, scale, width, height, centerPoint) => {\r\n srcCanvas.width = width;\r\n srcCanvas.height = height;\r\n config.scale = scale;\r\n this.workspace.setCenter(centerPoint.width, centerPoint.height); // return canvas to default position\r\n sqftEventManager.trigger(sqftEventManager.events.RENDER);\r\n sqftEventManager.trigger(sqftEventManager.events.RENDER);\r\n }\r\n\r\n updateCanvasAtStartPoint = (srcCanvas, scale, width, height, startPoint) => {\r\n srcCanvas.width = width;\r\n srcCanvas.height = height;\r\n config.scale = scale;\r\n this.workspace.setPosition(startPoint); // return canvas to default position\r\n\r\n sqftEventManager.trigger(sqftEventManager.events.RENDER);\r\n sqftEventManager.trigger(sqftEventManager.events.RENDER);\r\n }\r\n\r\n updateCanvasSlab = (srcCanvas, scale, width, height, centerPoint) => {\r\n srcCanvas.width = width;\r\n srcCanvas.height = height;\r\n config.scale = scale;\r\n //this.workspace.setCenter(centerPoint.width, centerPoint.height); // return canvas to default position\r\n //this.workspace.setPosition({x: 0, y: 0}); // return canvas to default position NOTE setPosition will also update SlabWorkspace position\r\n SlabWorkspace.setPos(centerPoint); // return canvas to default position\r\n renderSlabRightPart(sqftEventManager.getCtx(), true);\r\n }\r\n}\r\n","import store from \"../../../../../../store\";\r\nimport {getCurrentLayout} from \"../../../../../appLayout\";\r\nimport {ALLOWED_LABEL_NAV_ITEMS, BACKSPLASH_LABELS, COUNTERTOP_LABELS, EDGE_LABELS} from \"../../../../constants\";\r\nimport {IS_LIXIL_UI} from \"../../../../../../config\";\r\nimport {SHAPE_HARDCODED_PART_IDS} from \"../../../../constantsFeature\";\r\n\r\n/**\r\n * is used for category switching available partIds\r\n * @param {string} partId default part id used for shape type\r\n * @return {string} final partId\r\n */\r\nexport const checkShapeForAvailablePartId = (partId) => {\r\n const {fabricatorState, qtState, sqftState, wizardState} = store.getState();\r\n const layout = getCurrentLayout();\r\n const wizardIsActive = wizardState.wizardIsActive;\r\n\r\n if (SHAPE_HARDCODED_PART_IDS.includes(partId)) {\r\n return partId\r\n }\r\n\r\n if (IS_LIXIL_UI || !layout.qtCategories && document.kvConfig.visualizerType === \"Fireplace\") {\r\n // lixil-1) if we opened feature from QuotingTool - try to assign this partId\r\n if (sqftState.sqftFromFeature && sqftState.sqftFromFeature.cartFeature\r\n && !Object.keys(BACKSPLASH_LABELS).includes(sqftState.sqftFromFeature.cartFeature.partId)\r\n && !Object.keys(EDGE_LABELS).includes(sqftState.sqftFromFeature.cartFeature.partId)\r\n && Object.keys(ALLOWED_LABEL_NAV_ITEMS).includes(sqftState.sqftFromFeature.cartFeature.partId)\r\n ) {\r\n return sqftState.sqftFromFeature.cartFeature.partId\r\n }\r\n }\r\n\r\n if (wizardIsActive) {\r\n if (sqftState.sqftFromFeature && sqftState.sqftFromFeature.cartFeature\r\n && Object.keys(COUNTERTOP_LABELS).includes(sqftState.sqftFromFeature.cartFeature.partId)\r\n ) {\r\n return sqftState.sqftFromFeature.cartFeature.partId\r\n }\r\n return partId\r\n }\r\n\r\n if ((!fabricatorState.settings.useCategorySwitching || !layout.qtCategories || !qtState.qtActiveCategory)) {\r\n return partId\r\n }\r\n\r\n const currentCategory = layout.qtCategories.find(qtCat => qtCat.name === qtState.qtActiveCategory);\r\n if (!currentCategory || !currentCategory.subParts) {\r\n return partId\r\n }\r\n\r\n // 1) if we opened feature from QuotingTool - try to assign this partId\r\n if (sqftState.sqftFromFeature && sqftState.sqftFromFeature.cartFeature\r\n && currentCategory.subParts.some(subPart => subPart.part.partId === sqftState.sqftFromFeature.cartFeature.partId)\r\n && !Object.keys(BACKSPLASH_LABELS).includes(sqftState.sqftFromFeature.cartFeature.partId)\r\n && !Object.keys(EDGE_LABELS).includes(sqftState.sqftFromFeature.cartFeature.partId)\r\n && Object.keys(ALLOWED_LABEL_NAV_ITEMS).includes(sqftState.sqftFromFeature.cartFeature.partId)\r\n ) {\r\n return sqftState.sqftFromFeature.cartFeature.partId\r\n }\r\n\r\n // 2) check for center island feature group\r\n const isCountertop = partId === \"countertop\" || partId === \"center_island_countertop\";\r\n if (isCountertop) {\r\n const countertopNavItem = currentCategory.subParts.find(subPart => {\r\n return subPart.part.partId.includes(partId)\r\n });\r\n\r\n if (countertopNavItem) {\r\n return countertopNavItem.part.partId\r\n }\r\n }\r\n\r\n // 3) check for existing navItem\r\n const existingPartId = currentCategory.subParts.some(subPart => {\r\n return subPart.part.partId === partId\r\n });\r\n if (existingPartId) {\r\n return partId\r\n }\r\n\r\n // 4) here we replace default partId with existing in category partId\r\n for (let i = 0; i < currentCategory.subParts.length; i++) {\r\n if (ALLOWED_LABEL_NAV_ITEMS[currentCategory.subParts[i].part.partId]) {\r\n return currentCategory.subParts[i].part.partId\r\n }\r\n }\r\n\r\n // 5) if nothing found - let it be at least default shape's partId\r\n return partId\r\n}\r\n","import {getCurrentLayout} from \"../../../../../appLayout\";\r\nimport cabinetWorkspace from \"./cabinetWorkspace\";\r\nimport {SHAPE_PART_ID} from \"../../../../constants\";\r\n\r\nclass CabinetShapesLayout {\r\n\r\n /**\r\n * Create cabinets from cabinets data\r\n * @param data\r\n */\r\n createShapesFromCabinetSet = (data) => {\r\n data.positions.forEach((cabinetData) => {\r\n if ([SHAPE_PART_ID.lower_cabinet_boxes, SHAPE_PART_ID.upper_cabinet_boxes].includes(cabinetData.partId)) {\r\n const layout = getCurrentLayout();\r\n const feature = layout.getFeatureById(cabinetData.featureId, true);\r\n const parentFeature = layout.getFeatureById(cabinetData.parentFeatureId);\r\n const position = {x: cabinetData.x, y: cabinetData.z};\r\n cabinetWorkspace.cabinetShapes.addShape(feature, parentFeature, position)\r\n }\r\n })\r\n }\r\n}\r\n\r\nexport default CabinetShapesLayout;\r\n","// textBoxManager.js\r\nimport TextBox from \"./textBox\";\r\nimport workspace from \"../workspace\";\r\n\r\nclass TextBoxManager {\r\n constructor() {\r\n this.textBoxes = [];\r\n }\r\n\r\n getExportedTextBoxes = () => {\r\n return this.textBoxes.map(box => box.export());\r\n };\r\n\r\n setImportedTextBoxes = (_textBoxes) => {\r\n if (_textBoxes === undefined) {\r\n return []\r\n }\r\n for (let i = 0; i < _textBoxes.length; i++) {\r\n let textBox = new TextBox(_textBoxes[i].posOnField, _textBoxes[i].placeholder, _textBoxes[i].design);\r\n textBox.init();\r\n }\r\n\r\n return this.textBoxes;\r\n };\r\n\r\n getTextBoxes = () => {\r\n return this.textBoxes;\r\n };\r\n\r\n getHoveredTextBox = () => {\r\n\r\n }\r\n\r\n addTextBox = (box) => {\r\n this.textBoxes.push(box);\r\n\r\n return this.textBoxes;\r\n };\r\n\r\n removeBox = (box) => {\r\n let boxes = this.textBoxes.map((textBox => textBox.box));\r\n const index = boxes.indexOf(box);\r\n if (index > -1) {\r\n this.textBoxes.splice(index, 1);\r\n }\r\n\r\n return this.textBoxes;\r\n };\r\n\r\n removeAllTextBoxes = () => {\r\n for (let i = this.textBoxes.length - 1; i >= 0; i--) {\r\n this.textBoxes[i].box.delete();\r\n //textBoxes[i].text.delete();\r\n }\r\n this.textBoxes = [];\r\n\r\n return this.textBoxes;\r\n };\r\n\r\n isBoxActive() {\r\n const boxes = workspace.textBoxManager.getTextBoxes();\r\n\r\n if (boxes.length > 0) {\r\n for (let textBox of boxes) {\r\n if (textBox.box.mixin.movable.state.hovering) {\r\n return true;\r\n }\r\n }\r\n }\r\n\r\n return false;\r\n }\r\n\r\n getHoveredTexBox() {\r\n const boxes = workspace.textBoxManager.getTextBoxes();\r\n\r\n if (boxes.length > 0) {\r\n for (let textBox of boxes) {\r\n if (textBox.box.mixin.movable.state.hovering) {\r\n return textBox;\r\n }\r\n }\r\n }\r\n\r\n return false;\r\n }\r\n\r\n}\r\n\r\nexport default TextBoxManager;\r\n","import {getQtCatName} from \"../helpers/sqftQuotesHelper\";\r\n\r\nexport class FeatureObjectDTO {\r\n constructor(id, partId, featureId, quantity = 1) {\r\n this.id = id;\r\n this.qtCatName = getQtCatName();\r\n this.partId = partId;\r\n this.featureId = featureId;\r\n this.quantity = quantity;\r\n }\r\n\r\n addBumpoutArea(area) {\r\n this.area = area;\r\n }\r\n}\r\n","import JsonApi from \"./jsonApi\";\r\n\r\nexport const getMarkUpForFeatures = (featuresArray = []) => {\r\n const arrayIds = featuresArray.map(dbFeature => dbFeature.id);\r\n return JsonApi.getMarkUpForFeatures(arrayIds)\r\n .then(response => response.data)\r\n .catch(error => {\r\n console.log(\"Server error getMarkUpForFeatures \"+new Error(error));\r\n })\r\n};\r\n","import {getPercentage} from \"./misc2\";\r\nimport Config from \"../config\";\r\n\r\nexport const MARK_UP_APPLY_TO_TYPES = { // QKB\r\n retailPrice: \"retailPrice\",\r\n cost: \"cost\",\r\n retailPriceAndCost: \"retailPriceAndCost\",\r\n shippingCost: \"shippingCost\",\r\n discount: \"discount\",\r\n}\r\n\r\nconst MARK_UP_PROPS_MATCH = { // CAES\r\n Retail: \"cost\",\r\n Cost: \"price\",\r\n Discount: \"fabricatorCost\",\r\n};\r\n\r\n/**\r\n * @param dbFeaturesArray {[dbFeatureInterface]}\r\n * @param markUpResponse {object}\r\n * @return {[dbFeatureInterface]}\r\n */\r\nexport const setResponseFeaturesMarkUp = (dbFeaturesArray, markUpResponse) => {\r\n if (Config.isDevMode()) {\r\n console.log(\"markUpResponse\", markUpResponse);\r\n }\r\n if (!Array.isArray(dbFeaturesArray) || (typeof markUpResponse !== \"object\") || (markUpResponse === null)\r\n || !Object.keys(markUpResponse).length) {\r\n return dbFeaturesArray\r\n }\r\n Object.keys(markUpResponse).forEach(dbFeatureIdString => {\r\n const dbFeatureId = +dbFeatureIdString;\r\n let dbFeature = dbFeaturesArray.find(feature => feature.id === dbFeatureId);\r\n if (dbFeature && !dbFeature.markUpString) {\r\n // if (Config.isDevMode()) {\r\n // console.log(\"featureWithMarkUp\", dbFeature.customDisplayName, dbFeature);\r\n // }\r\n // here we update dbFeature with new mark up price!\r\n dbFeature = setFeaturePriceFromMarkItem(markUpResponse[dbFeatureIdString], dbFeature);\r\n }\r\n })\r\n return dbFeaturesArray\r\n}\r\n\r\nconst getUpdatedFeaturePriceFromMarkItem = (markUpListItem, originalValue, isCaes = false) => {\r\n const type = isCaes ? markUpListItem.Type : markUpListItem.type;\r\n const priceType = isCaes ? markUpListItem.PriceType : markUpListItem.priceType;\r\n const value = isCaes ? markUpListItem.Value : markUpListItem.value;\r\n\r\n const changeValue = (priceType === \"currency\")\r\n ? +value\r\n : getPercentage(+originalValue, +value);\r\n let newValue = (type === \"mark_up\" || type === \"MarkUp\")\r\n ? +originalValue + changeValue\r\n : +originalValue - changeValue;\r\n return newValue < 0 ? 0 : +(newValue.toFixed(2));\r\n}\r\n\r\n/**\r\n * QKB set\r\n * @param markUpItem {object}\r\n * @param dbFeature {dbFeatureInterface}\r\n * @return {dbFeatureInterface}\r\n */\r\nexport const setFeaturePriceFromMarkItemQKB = (markUpItem, dbFeature) => {\r\n // console.log(\"markUpItem\", markUpItem, newDbFeature);\r\n const {price, cost, shippingCost, discount} = markUpItem.originalValues;\r\n switch (markUpItem.applyTo) {\r\n case MARK_UP_APPLY_TO_TYPES.retailPrice: {\r\n dbFeature.price = getUpdatedFeaturePriceFromMarkItem(markUpItem, price);\r\n break;\r\n }\r\n case MARK_UP_APPLY_TO_TYPES.cost: {\r\n dbFeature.cost = getUpdatedFeaturePriceFromMarkItem(markUpItem, cost);\r\n break;\r\n }\r\n case MARK_UP_APPLY_TO_TYPES.retailPriceAndCost: {\r\n dbFeature.cost = getUpdatedFeaturePriceFromMarkItem(markUpItem, cost);\r\n dbFeature.price = getUpdatedFeaturePriceFromMarkItem(markUpItem, price);\r\n break;\r\n }\r\n case MARK_UP_APPLY_TO_TYPES.shippingCost: {\r\n dbFeature.shippingCost = getUpdatedFeaturePriceFromMarkItem(markUpItem, shippingCost);\r\n break;\r\n }\r\n case MARK_UP_APPLY_TO_TYPES.discount: {\r\n dbFeature.fabricatorCost = getUpdatedFeaturePriceFromMarkItem(markUpItem, discount);\r\n break;\r\n }\r\n default:\r\n break;\r\n }\r\n // console.log(\"newDbFeature\", newDbFeature);\r\n return dbFeature\r\n}\r\n\r\n/**\r\n * @param markUpString {string}\r\n * @param dbFeature {dbFeatureInterface}\r\n * @return {dbFeatureInterface}\r\n */\r\nconst setFeaturePriceFromMarkItem = (markUpString = \"\", dbFeature) => {\r\n if (!dbFeature || !markUpString) {\r\n return dbFeature\r\n }\r\n // console.log(\"markUpObject\", markUpObject, newDbFeature);\r\n const markUpObject = JSON.parse(markUpString); // {Retail: {Type: \"MarkUp\", Value: 10}, Cost, Discount}\r\n\r\n if (Array.isArray(markUpObject)) { // QKB format\r\n markUpObject.forEach(markUpListItem => {\r\n // console.log(\"dbFeature price cost\", dbFeature.price, dbFeature.cost);\r\n dbFeature = setFeaturePriceFromMarkItemQKB(markUpListItem, dbFeature);\r\n // console.log(\"dbFeature price cost\", dbFeature.price, dbFeature.cost);\r\n })\r\n } else if (typeof markUpObject === \"object\" && (markUpObject !== null)) { // CAES format!!\r\n // console.log(\"\", markUpObject);\r\n // {\r\n // Cost: {Type: 'MarkDown', Value: 10}\r\n // Discount : {Type: 'MarkDown', Value: 0}\r\n // Retail : {Type: 'MarkDown', Value: 10}\r\n // }\r\n Object.keys(markUpObject).forEach(key => {\r\n if (!markUpObject[key].Value || !MARK_UP_PROPS_MATCH[key]) {\r\n return\r\n }\r\n dbFeature[MARK_UP_PROPS_MATCH[key]] = getUpdatedFeaturePriceFromMarkItem(markUpObject[key], dbFeature[MARK_UP_PROPS_MATCH[key]], true);\r\n })\r\n }\r\n dbFeature.markUpString = markUpString; // just to be able to find it after job is saved on restore\r\n // console.log(\"newDbFeature\", newDbFeature);\r\n return dbFeature\r\n}\r\n","/**\r\n * // Example usage\r\n * const rate = 0.05 / 12; // Monthly interest rate (5% annual)\r\n * const nper = 60; // Number of payments (5 years)\r\n * const pv = 30000; // Loan amount (present value)\r\n * */\r\nexport function PMT(rate, nper, pv, fv = 0, type = 0) {\r\n if (rate === 0) {\r\n return -(pv + fv) / nper;\r\n }\r\n\r\n const pvif = Math.pow(1 + rate, nper);\r\n let pmt = (rate * (pv * pvif + fv)) / (pvif - 1);\r\n\r\n // Adjust for payments at the beginning of the period\r\n if (type === 1) {\r\n pmt /= (1 + rate);\r\n }\r\n\r\n return -pmt; // Return negative for outflow\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport Appliance from \"../../parts/appliance\";\r\n\r\nexport default class Handle extends IntermediatePart {\r\n constructor(isChild, partNumber = 0) {\r\n super(isChild);\r\n this.partNumber = partNumber;\r\n this.partId = 'handle';\r\n this.partName = 'Handle';\r\n this.translateId = \"visualizer.kitchen.cabinet.handle\";\r\n this.hasAdditionalParts = true;\r\n this.layerPriority = 8;\r\n }\r\n\r\n load(dbFeature) {\r\n const partNumber = (dbFeature.metaData[\"Part\"] && +dbFeature.metaData[\"Part\"][0]) === 0 ? 1 : 2;\r\n return super.load_(dbFeature, new Handle(false, partNumber), true, partNumber === 1 ? 'features' : 'featuresParts');\r\n }\r\n\r\n getActiveFeaturePartsAccordingToActiveFeature(fromFeature = this.activeFeature, activeFeatureConditions = []) {\r\n let activeFeatureParts = [];\r\n if (fromFeature && fromFeature.partNumber) {\r\n const name1 = fromFeature.getSplittedFeatureName();\r\n // console.log(\"name1\", name1);\r\n let arrayOfConditions = activeFeatureConditions.length\r\n ? activeFeatureConditions\r\n : this.getActiveFeatureConditions(fromFeature);\r\n\r\n const cabinetParent = this.getParent();\r\n const applianceParent = cabinetParent.layout.parts[Appliance.id];\r\n\r\n // part 0 - показываем всегда\r\n // part 1 - только если выключен холодильник\r\n // part 2 - показываем всегда, но зависит от MountType part 2 нижних кабинетов (S, U или ST, FM, SM)\r\n // part 3 - если включен part 3 нижних кабинетов (это срабатывает при выключенной посудомойке)\r\n // part 4 - если включен part 4 нижних кабинетов (это срабатывает при выключенной плите)\r\n // part 5 - если включен part 2 верхних кабинетов (это срабатывает при выключенной вытяжке)\r\n // part 6 - если включен fridge и матчим по его метадате Width и Height, так же как и кабинеты\r\n activeFeatureParts = this.featuresParts.filter((feature) => {\r\n if (feature.metaData[\"Part\"] && feature.metaData[\"Part\"].includes(\"1\")\r\n && (!applianceParent || !applianceParent.fridge || !applianceParent.fridge.activeFeature && applianceParent.fridge.disabled)) {\r\n return false\r\n }\r\n if (feature.metaData[\"Part\"] && feature.metaData[\"Part\"].includes(\"2\")) {\r\n if (cabinetParent && cabinetParent.bottomCabinet && cabinetParent.bottomCabinet.activeFeatureParts) {\r\n const part2 = cabinetParent.bottomCabinet.activeFeatureParts.find(featuresPart => featuresPart.metaData[\"Part\"].includes(\"2\"));\r\n if (part2) {\r\n return name1 === feature.getSplittedFeatureName() && feature.matchesMetaForArrayOfConditions([\r\n ...arrayOfConditions,\r\n {propName: \"MountType\", propValue: part2.metaData[\"MountType\"]}\r\n ])\r\n }\r\n }\r\n return false\r\n }\r\n if (feature.metaData[\"Part\"] && feature.metaData[\"Part\"].includes(\"3\")\r\n && applianceParent && applianceParent.dishwasher && !applianceParent.dishwasher.disabled && applianceParent.dishwasher.activeFeature) {\r\n return false\r\n }\r\n if (feature.metaData[\"Part\"] && feature.metaData[\"Part\"].includes(\"4\")\r\n && applianceParent && applianceParent.stove && !applianceParent.stove.disabled && applianceParent.stove.activeFeature) {\r\n return false\r\n }\r\n if (feature.metaData[\"Part\"] && feature.metaData[\"Part\"].includes(\"5\")\r\n && applianceParent && applianceParent.hood && !applianceParent.hood.disabled && applianceParent.hood.activeFeature) {\r\n return false\r\n }\r\n if (feature.metaData[\"Part\"] && feature.metaData[\"Part\"].includes(\"6\")) { // 6 is fridge related\r\n if (!applianceParent || !applianceParent.fridge || applianceParent.fridge.disabled || !applianceParent.fridge.activeFeature) {\r\n return false\r\n }\r\n const fridgeConditions = applianceParent.fridge.getFridgeWidthAndHeightConditions();\r\n return name1 === feature.getSplittedFeatureName() && feature.matchesMetaForArrayOfConditions([...arrayOfConditions, ...fridgeConditions])\r\n }\r\n return name1 === feature.getSplittedFeatureName() && feature.matchesMetaForArrayOfConditions(arrayOfConditions)\r\n });\r\n\r\n // console.log(\"this.featuresParts\", this.featuresParts);\r\n // console.log(\"activeFeatureParts\", activeFeatureParts);\r\n activeFeatureParts.forEach((activeFeaturePart) => {\r\n activeFeaturePart.disabled = this.disabled\r\n });\r\n }\r\n return activeFeatureParts\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\n\r\nexport default class Dishwasher extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'dishwasher';\r\n this.partName = 'Dishwasher';\r\n this.translateId = \"visualizer.kitchen.appliance.dishwasher\";\r\n this.canBeDisabled = true;\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new Dishwasher());\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\n\r\nconst widthAndHeightArray = [\"Width\", \"Height\"];\r\n\r\nexport default class Fridge extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'fridge';\r\n this.partName = 'Fridge';\r\n this.translateId = \"visualizer.kitchen.appliance.fridge\";\r\n this.canBeDisabled = true;\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new Fridge());\r\n }\r\n\r\n getFridgeWidthAndHeightConditions = () => {\r\n let widthHeightConditions = []\r\n if (!this.activeFeature || !this.activeFeature.metaData) {\r\n return widthHeightConditions\r\n }\r\n widthAndHeightArray.forEach(metaName => {\r\n if (this.activeFeature.metaData[metaName]) {\r\n widthHeightConditions.push({\r\n propName: metaName,\r\n propValue: Array.isArray(this.activeFeature.metaData[metaName])\r\n ? this.activeFeature.metaData[metaName][0]\r\n : this.activeFeature.metaData[metaName],\r\n })\r\n }\r\n });\r\n return widthHeightConditions\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport store from \"../../../../../store\";\r\nimport {getFeatureIsLocked} from \"../../../../../misc/helpers\";\r\n\r\nexport default class Hood extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'hood';\r\n this.partName = 'Hood';\r\n this.translateId = \"visualizer.kitchen.appliance.hood\";\r\n this.canBeDisabled = true;\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new Hood());\r\n }\r\n\r\n handleClick(ignoreLocked = false, clickFrom = \"\") {\r\n const {isEncore} = store.getState().fabricatorState;\r\n if (isEncore) {\r\n const featureIsLocked = getFeatureIsLocked(this, ignoreLocked);\r\n if (ignoreLocked || !featureIsLocked) {\r\n const applianceParent = this.getParent().getParent();\r\n if (applianceParent.layout.type === 6) {\r\n if (applianceParent.range && !applianceParent.range.disabled) {\r\n applianceParent.range.disabled = true;\r\n }\r\n if (applianceParent.stovetop && applianceParent.stovetop.disabled) {\r\n applianceParent.stovetop.disabled = false;\r\n }\r\n }\r\n }\r\n }\r\n return super.handleClick(ignoreLocked, clickFrom);\r\n }\r\n\r\n // add dependency on stove width, if width is 24 - we need width 30, if stove is 60 - we need 48\r\n\r\n disabledClick() {\r\n const applianceParent = this.getParent();\r\n const stove = applianceParent.stove;\r\n if (stove && !this.disabled && stove.disabled) {\r\n stove.disabled = false;\r\n }\r\n if ((applianceParent.layout.type === 6) && !this.disabled && applianceParent.microwave\r\n && !applianceParent.microwave.disabled) {\r\n applianceParent.microwave.disabled = true;\r\n }\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport store from \"../../../../../store\";\r\nimport {getFeatureIsLocked} from \"../../../../../misc/helpers\";\r\n\r\nexport default class Microwave extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'microwave';\r\n this.partName = 'Microwave';\r\n this.translateId = \"visualizer.kitchen.appliance.microwave\";\r\n this.canBeDisabled = true;\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new Microwave());\r\n }\r\n\r\n handleClick(ignoreLocked = false, clickFrom = \"\") {\r\n const {isEncore} = store.getState().fabricatorState;\r\n if (isEncore) {\r\n const featureIsLocked = getFeatureIsLocked(this, ignoreLocked);\r\n if (ignoreLocked || !featureIsLocked) {\r\n const applianceParent = this.getParent().getParent();\r\n if (applianceParent.layout.type === 6) {\r\n if (applianceParent.stovetop && !applianceParent.stovetop.disabled) {\r\n applianceParent.stovetop.disabled = true;\r\n }\r\n if (applianceParent.oven && !applianceParent.oven.disabled) {\r\n applianceParent.oven.disabled = true;\r\n }\r\n if (applianceParent.range && applianceParent.range.disabled) {\r\n applianceParent.range.disabled = false;\r\n }\r\n }\r\n }\r\n }\r\n return super.handleClick(ignoreLocked, clickFrom);\r\n }\r\n\r\n disabledClick() {\r\n const applianceParent = this.getParent();\r\n if ((applianceParent.layout.type === 6) && !this.disabled && applianceParent.hood\r\n && !applianceParent.hood.disabled) {\r\n applianceParent.hood.disabled = true;\r\n }\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport store from \"../../../../../store\";\r\nimport {getFeatureIsLocked} from \"../../../../../misc/helpers\";\r\n\r\nexport default class Range extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'range';\r\n this.partName = 'Range';\r\n this.translateId = \"visualizer.kitchen.appliance.range\";\r\n this.canBeDisabled = true;\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new Range());\r\n // const rangeType = dbFeature.metaData && dbFeature.metaData[\"RangeType\"];\r\n // if (!rangeType) {\r\n // dbFeature.metaData[\"RangeType\"] = [\"ALL\"];\r\n // }\r\n }\r\n\r\n handleClick(ignoreLocked = false, clickFrom = \"\") {\r\n const {isEncore} = store.getState().fabricatorState;\r\n const applianceParent = this.getParent().getParent();\r\n const featureIsLocked = getFeatureIsLocked(this, ignoreLocked);\r\n\r\n if (isEncore) {\r\n if (ignoreLocked || !featureIsLocked) {\r\n if (applianceParent.layout.type === 6) {\r\n if (applianceParent.hood && !applianceParent.hood.disabled) {\r\n applianceParent.hood.disabled = true;\r\n }\r\n if (applianceParent.oven && !applianceParent.oven.disabled) {\r\n applianceParent.oven.disabled = true;\r\n }\r\n if (applianceParent.microwave && applianceParent.microwave.disabled) {\r\n applianceParent.microwave.disabled = false;\r\n }\r\n }\r\n }\r\n }\r\n if (ignoreLocked || !featureIsLocked) {\r\n const currentHoodWidth = applianceParent.hood.activeFeature.metaData[\"Width\"];\r\n const newWidth = this.metaData[\"Width\"];\r\n if (newWidth && (!currentHoodWidth || (newWidth[0] !== currentHoodWidth[0]))) {\r\n const currentHoodNavItems = applianceParent.hood.navigationSubItems();\r\n const sameWidth = currentHoodNavItems.filter(navItem => {\r\n if (!navItem.part.metaData[\"Width\"]) {\r\n return false\r\n }\r\n if (newWidth[0] === \"24\") {\r\n return navItem.part.metaData[\"Width\"][0] === newWidth[0] || navItem.part.metaData[\"Width\"][0] === \"30\"\r\n }\r\n return navItem.part.metaData[\"Width\"][0] === newWidth[0]\r\n });\r\n console.log(\"newWidth\", newWidth[0]);\r\n console.log(\"sameWidth\", sameWidth);\r\n if (sameWidth.length) { // here we can filter by the same name, color etc.\r\n applianceParent.hood.activeFeature = sameWidth[0].part;\r\n }\r\n }\r\n if (applianceParent && applianceParent.stove && !applianceParent.stove.disabled) {\r\n applianceParent.stove.disabled = true;\r\n }\r\n }\r\n return super.handleClick(ignoreLocked, clickFrom);\r\n }\r\n\r\n disabledClick() {\r\n const applianceParent = this.getParent();\r\n if ((applianceParent.layout.type === 6) && !this.disabled && applianceParent.stovetop\r\n && !applianceParent.stovetop.disabled) {\r\n applianceParent.stovetop.disabled = true;\r\n }\r\n if (applianceParent.hood) {\r\n applianceParent.hood.disabled = this.disabled;\r\n }\r\n if (!this.disabled && applianceParent.stove && !applianceParent.stove.disabled) {\r\n applianceParent.stove.disabled = true;\r\n }\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport store from \"../../../../../store\";\r\nimport {getFeatureIsLocked} from \"../../../../../misc/helpers\";\r\n\r\nexport default class Oven extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'oven';\r\n this.partName = 'Oven';\r\n this.translateId = \"visualizer.kitchen.appliance.oven\";\r\n this.canBeDisabled = true;\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new Oven());\r\n }\r\n\r\n handleClick(ignoreLocked = false, clickFrom = \"\") {\r\n const {isEncore} = store.getState().fabricatorState;\r\n if (isEncore) {\r\n const featureIsLocked = getFeatureIsLocked(this, ignoreLocked);\r\n if (ignoreLocked || !featureIsLocked) {\r\n const applianceParent = this.getParent().getParent();\r\n if (applianceParent.layout.type === 6) {\r\n if (applianceParent.stovetop && applianceParent.stovetop.disabled) {\r\n applianceParent.stovetop.disabled = false;\r\n }\r\n if (applianceParent.hood && applianceParent.hood.disabled) {\r\n applianceParent.hood.disabled = false;\r\n }\r\n if (applianceParent.range && !applianceParent.range.disabled) {\r\n applianceParent.range.disabled = true;\r\n }\r\n if (applianceParent.microwave && !applianceParent.microwave.disabled) {\r\n applianceParent.microwave.disabled = true;\r\n }\r\n }\r\n }\r\n }\r\n return super.handleClick(ignoreLocked, clickFrom);\r\n }\r\n\r\n hideLayerCondition() {\r\n const applianceParent = this.getParent();\r\n // on the second layout we should show Oven only if stove has Metadata \"T\" (top)\r\n return (applianceParent.layout.type === 2) && applianceParent && applianceParent.stove && applianceParent.stove.activeFeature\r\n && applianceParent.stove.activeFeature && (!applianceParent.stove.activeFeature.metaData[\"Stove Type\"]\r\n || (applianceParent.stove.activeFeature.metaData[\"Stove Type\"][0] !== \"T\"))\r\n }\r\n\r\n getArrayOfConditions() {\r\n const conditions = super.getArrayOfConditions();\r\n if (this.hideLayerCondition()) {\r\n conditions.push({\r\n propName: \"Stove Type\",\r\n propValue: \"F\"\r\n });\r\n }\r\n return conditions\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport {getFeatureIsLocked} from \"../../../../../misc/helpers\";\r\n\r\nexport default class Stove extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'stove';\r\n this.partName = 'Stove';\r\n this.translateId = \"visualizer.kitchen.appliance.stove\";\r\n this.canBeDisabled = true;\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new Stove());\r\n }\r\n\r\n handleClick(ignoreLocked, clickFrom = \"\") {\r\n const applianceParent = this.getParent().getParent();\r\n const featureIsLocked = getFeatureIsLocked(this, ignoreLocked);\r\n if (ignoreLocked || !featureIsLocked) {\r\n if (applianceParent && applianceParent.hood && applianceParent.hood.activeFeature) {\r\n const currentHoodWidth = applianceParent.hood.activeFeature.metaData[\"Width\"];\r\n const newWidth = this.metaData[\"Width\"];\r\n if (newWidth && (!currentHoodWidth || (newWidth[0] !== currentHoodWidth[0]))) {\r\n const currentHoodNavItems = applianceParent.hood.navigationSubItems();\r\n const sameWidth = currentHoodNavItems.filter(navItem => {\r\n if (!navItem.part.metaData[\"Width\"]) {\r\n return false\r\n }\r\n if (newWidth[0] === \"24\") {\r\n return navItem.part.metaData[\"Width\"][0] === newWidth[0] || navItem.part.metaData[\"Width\"][0] === \"30\"\r\n }\r\n return navItem.part.metaData[\"Width\"][0] === newWidth[0]\r\n });\r\n console.log(\"newWidth\", newWidth[0]);\r\n console.log(\"sameWidth\", sameWidth);\r\n if (sameWidth.length) { // here we can filter by the same name, color etc.\r\n applianceParent.hood.activeFeature = sameWidth[0].part;\r\n }\r\n }\r\n }\r\n if (applianceParent && applianceParent.range && applianceParent.range.activeFeature && !applianceParent.range.disabled) {\r\n applianceParent.range.disabled = true\r\n }\r\n }\r\n super.handleClick(ignoreLocked, clickFrom);\r\n }\r\n\r\n hideLayerCondition() {\r\n const applianceParent = this.getParent();\r\n const hideLayer = applianceParent && applianceParent.range && applianceParent.range.activeFeature\r\n && !applianceParent.range.disabled;\r\n if (hideLayer && !this.disabled) {\r\n this.disabled = true;\r\n }\r\n return hideLayer\r\n }\r\n\r\n disabledClick() {\r\n const applianceParent = this.getParent();\r\n if (applianceParent.hood) {\r\n applianceParent.hood.disabled = this.disabled;\r\n }\r\n if (!this.disabled && applianceParent.range && !applianceParent.range.disabled) {\r\n applianceParent.range.disabled = true;\r\n }\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport {useOldCabinetLogic} from \"../../constants\";\r\n\r\nexport default class FridgeEnclosure extends IntermediatePart {\r\n constructor(isChild, partNumber = 0) {\r\n super(isChild);\r\n this.partNumber = partNumber;\r\n this.partId = 'fridge_enclosure';\r\n this.partName = 'Fridge Enclosure';\r\n this.dbName = \"Fridge Enclosure\";\r\n this.visible = true;\r\n this.translateId = \"visualizer.kitchen.appliance.fridge_enclosure\";\r\n this.hasAdditionalParts = true;\r\n this.allWallsCanBeApplied = true;\r\n this.canBeDisabled = true;\r\n }\r\n\r\n load(dbFeature) {\r\n if (dbFeature.metaData[\"RoomLayout\"] && dbFeature.metaData[\"RoomLayout\"].includes(\"Layout4\")) {\r\n dbFeature.metaData[\"Part\"] = [\"0\"]; // we don't have part 0 on Layout4\r\n }\r\n if (useOldCabinetLogic) {\r\n const partNumber = dbFeature.metaData[\"Part\"] ? +dbFeature.metaData[\"Part\"][0] : 0;\r\n return super.load_(dbFeature, new FridgeEnclosure(false, partNumber), true, partNumber === 0 ? 'features' : 'featuresParts');\r\n }\r\n const partNumber = dbFeature.metaData[\"Part\"] ? dbFeature.metaData[\"Part\"][0] : \"1\";\r\n return super.load_(dbFeature, new FridgeEnclosure(false, partNumber), true, partNumber === \"1\" ? 'features' : 'featuresParts');\r\n }\r\n\r\n setLayers(layout) {\r\n\r\n if (layout.type === 4) {\r\n const fridge = this.getParent().fridge;\r\n // show layers only if fridge is disabled\r\n if (!(!fridge || fridge.disabled || !fridge.activeFeature || !fridge.activeFeature.layer || !fridge.activeFeature.layer.src)) {\r\n super.hideLayers();\r\n return\r\n }\r\n }\r\n\r\n return super.setLayers(layout);\r\n }\r\n\r\n setActiveFeatureParts(fromFeature = this.activeFeature, activeFeatureConditions = []) {\r\n const parent = this.getParent();\r\n //show second part only if fridge is disabled\r\n if (!parent.fridge || parent.fridge.disabled || !parent.fridge.activeFeature || !parent.fridge.activeFeature.layer || !parent.fridge.activeFeature.layer.src) {\r\n return this.getActiveFeaturePartsAccordingToActiveFeature(fromFeature, activeFeatureConditions, true);\r\n }\r\n return []\r\n }\r\n\r\n getArrayOfConditions() {\r\n const conditions = super.getArrayOfConditions();\r\n const applianceParent = this.getParent();\r\n if (applianceParent && applianceParent.fridge && !applianceParent.fridge.disabled && applianceParent.fridge.activeFeature) {\r\n const fridgeConditions = applianceParent.fridge.getFridgeWidthAndHeightConditions();\r\n if (!fridgeConditions.some(condition => condition.propName === \"Width\")) {\r\n conditions.push({\r\n propName: \"Width\",\r\n propValue: \"36\"\r\n });\r\n }\r\n return [...conditions, ...fridgeConditions]\r\n }\r\n return conditions\r\n }\r\n\r\n getFridgeEnclosureSplittedFeatureName = () => {\r\n if (this._fridgeEnclosureSplittedFeatureName == null) {\r\n this._fridgeEnclosureSplittedFeatureName = this.getSplittedFeatureName().split(/.{5}$/)[0]; // \"Benton Maple Stone-NC-Aspen-00 1 21\" -> \"Benton Maple Stone-NC-Aspen-00\"\r\n }\r\n return this._fridgeEnclosureSplittedFeatureName\r\n };\r\n\r\n getActiveFeaturePartsAccordingToActiveFeature(fromFeature = this.activeFeature, activeFeatureConditions = []) {\r\n let activeFeatureParts = [];\r\n if (fromFeature && Number.isInteger(fromFeature.partNumber)) {\r\n let activeFeaturePart;\r\n const name1 = fromFeature.getFridgeEnclosureSplittedFeatureName();\r\n // console.log(\"name1\", name1);\r\n let arrayOfConditions = activeFeatureConditions.length\r\n ? activeFeatureConditions\r\n : this.getActiveFeatureConditions(fromFeature);\r\n // if (this.partId === \"right_wall\") {\r\n // arrayOfConditions = arrayOfConditions.filter(condition => condition.propName !== \"MirrorSize\");\r\n // }\r\n activeFeatureParts = this.featuresParts.filter((feature) => name1 === feature.getFridgeEnclosureSplittedFeatureName());\r\n // console.log(\"this.featuresParts\", this.featuresParts);\r\n // console.log(\"activeFeatureParts\", activeFeatureParts);\r\n if (activeFeatureParts.length) {\r\n activeFeaturePart = activeFeatureParts.find((feature) => {\r\n return feature.matchesMetaForArrayOfConditions(arrayOfConditions)\r\n });\r\n if (!activeFeaturePart) {\r\n activeFeaturePart = activeFeatureParts[0];\r\n }\r\n }\r\n activeFeatureParts = activeFeaturePart ? [activeFeaturePart] : [];\r\n activeFeatureParts.forEach((activeFeaturePart) => {\r\n activeFeaturePart.disabled = this.disabled\r\n });\r\n }\r\n return activeFeatureParts\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\n\r\nexport default class FridgeEnclosureHandle extends IntermediatePart {\r\n constructor(isChild, partNumber = 0) {\r\n super(isChild);\r\n this.partNumber = partNumber;\r\n this.partId = 'fridge_enclosure_handle';\r\n this.partName = \"Fridge Enclosure Handle\";\r\n this.visible = true;\r\n this.translateId = \"visualizer.kitchen.appliance.fridge_enclosure_handle\";\r\n this.hasAdditionalParts = true;\r\n this.allWallsCanBeApplied = true;\r\n this.canBeDisabled = true;\r\n }\r\n\r\n load(dbFeature) {\r\n if (dbFeature.metaData[\"RoomLayout\"] && dbFeature.metaData[\"RoomLayout\"].includes(\"Layout4\")) {\r\n dbFeature.metaData[\"Part\"] = [\"0\"]; // we don't have part 0 on Layout4\r\n }\r\n const partNumber = dbFeature.metaData[\"Part\"] ? dbFeature.metaData[\"Part\"][0] : \"1\";\r\n return super.load_(dbFeature, new FridgeEnclosureHandle(false, partNumber), true, partNumber === \"1\" ? 'features' : 'featuresParts');\r\n }\r\n\r\n getArrayOfConditions() {\r\n const conditions = super.getArrayOfConditions();\r\n const applianceParent = this.getParent();\r\n if (applianceParent && applianceParent.fridge && !applianceParent.fridge.disabled && applianceParent.fridge.activeFeature) {\r\n const fridgeConditions = applianceParent.fridge.getFridgeWidthAndHeightConditions();\r\n if (!fridgeConditions.some(condition => condition.propName === \"Width\")) {\r\n conditions.push({\r\n propName: \"Width\",\r\n propValue: \"36\"\r\n });\r\n }\r\n return [...conditions, ...fridgeConditions]\r\n }\r\n return conditions\r\n }\r\n\r\n setLayers(layout) {\r\n\r\n if (layout.type === 4) {\r\n const fridge = this.getParent().fridge;\r\n // show layers only if fridge is disabled\r\n if (!(!fridge || fridge.disabled || !fridge.activeFeature || !fridge.activeFeature.layer || !fridge.activeFeature.layer.src)) {\r\n super.hideLayers();\r\n return\r\n }\r\n }\r\n\r\n return super.setLayers(layout);\r\n }\r\n\r\n setActiveFeatureParts(fromFeature = this.activeFeature, activeFeatureConditions = []) {\r\n const parent = this.getParent();\r\n //show second part only if fridge is disabled\r\n if (!parent.fridge || parent.fridge.disabled || !parent.fridge.activeFeature || !parent.fridge.activeFeature.layer || !parent.fridge.activeFeature.layer.src) {\r\n return this.getActiveFeaturePartsAccordingToActiveFeature(fromFeature, activeFeatureConditions, true);\r\n }\r\n return []\r\n }\r\n\r\n getFridgeEnclosureSplittedFeatureName = () => {\r\n if (this._fridgeEnclosureSplittedFeatureName == null) {\r\n this._fridgeEnclosureSplittedFeatureName = this.getSplittedFeatureName().split(/.{5}$/)[0]; // \"Benton Maple Stone-NC-Aspen-00 1 21\" -> \"Benton Maple Stone-NC-Aspen-00\"\r\n }\r\n return this._fridgeEnclosureSplittedFeatureName\r\n };\r\n\r\n getActiveFeaturePartsAccordingToActiveFeature(fromFeature = this.activeFeature, activeFeatureConditions = []) {\r\n let activeFeatureParts = [];\r\n if (fromFeature && Number.isInteger(fromFeature.partNumber)) {\r\n let activeFeaturePart;\r\n const name1 = fromFeature.getFridgeEnclosureSplittedFeatureName();\r\n // console.log(\"name1\", name1);\r\n let arrayOfConditions = activeFeatureConditions.length\r\n ? activeFeatureConditions\r\n : this.getActiveFeatureConditions(fromFeature);\r\n // if (this.partId === \"right_wall\") {\r\n // arrayOfConditions = arrayOfConditions.filter(condition => condition.propName !== \"MirrorSize\");\r\n // }\r\n activeFeatureParts = this.featuresParts.filter((feature) => name1 === feature.getFridgeEnclosureSplittedFeatureName());\r\n // console.log(\"this.featuresParts\", this.featuresParts);\r\n // console.log(\"activeFeatureParts\", activeFeatureParts);\r\n if (activeFeatureParts.length) {\r\n activeFeaturePart = activeFeatureParts.find((feature) => {\r\n return feature.matchesMetaForArrayOfConditions(arrayOfConditions)\r\n });\r\n if (!activeFeaturePart) {\r\n activeFeaturePart = activeFeatureParts[0];\r\n }\r\n }\r\n activeFeatureParts = activeFeaturePart ? [activeFeaturePart] : [];\r\n activeFeatureParts.forEach((activeFeaturePart) => {\r\n activeFeaturePart.disabled = this.disabled\r\n });\r\n }\r\n return activeFeatureParts\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport store from \"../../../../../store\";\r\nimport {getFeatureIsLocked} from \"../../../../../misc/helpers\";\r\n\r\nexport default class Stovetop extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'stovetop';\r\n this.partName = 'Stovetop';\r\n this.translateId = \"visualizer.kitchen.center_island.center_island_stovetop\";\r\n this.canBeDisabled = true;\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new Stovetop());\r\n }\r\n\r\n handleClick(ignoreLocked = false, clickFrom = \"\") {\r\n const {isEncore} = store.getState().fabricatorState;\r\n if (isEncore) {\r\n const featureIsLocked = getFeatureIsLocked(this, ignoreLocked);\r\n if (ignoreLocked || !featureIsLocked) {\r\n const applianceParent = this.getParent().getParent();\r\n if (applianceParent.layout.type === 6) {\r\n if (applianceParent.microwave && !applianceParent.microwave.disabled) {\r\n applianceParent.microwave.disabled = true;\r\n }\r\n if (applianceParent.hood && applianceParent.hood.disabled) {\r\n applianceParent.hood.disabled = false;\r\n }\r\n }\r\n }\r\n }\r\n return super.handleClick(ignoreLocked, clickFrom);\r\n }\r\n\r\n disabledClick() {\r\n const applianceParent = this.getParent();\r\n // if (!this.disabled) {\r\n // // centerIslandParent.cabinet.disabled = false;\r\n // // centerIslandParent.cabinet.disabledClick();\r\n // } else {\r\n // if (applianceParent.hood) {\r\n // applianceParent.hood.disabled = this.disabled;\r\n // }\r\n // }\r\n if ((applianceParent.layout.type === 6) && !this.disabled && applianceParent.range\r\n && !applianceParent.range.disabled) {\r\n applianceParent.range.disabled = true;\r\n }\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport Appliance from \"../../parts/appliance\";\r\nimport {LayoutAbbreviations, useOldCabinetLogic} from \"../../constants\";\r\n\r\nexport default class TopCabinet extends IntermediatePart {\r\n constructor(isChild, partNumber = 0) {\r\n super(isChild);\r\n this.partNumber = partNumber;\r\n this.partId = 'top_cabinet';\r\n this.partName = 'Top Cabinet';\r\n this.translateId = \"visualizer.kitchen.cabinet.top_cabinet\";\r\n this.canBeDisabled = false;\r\n this.hasAdditionalParts = true;\r\n this.layerPriority = 1;\r\n this.allWallsCanBeApplied = true;\r\n if (isChild) {\r\n this.nextFeaturesPageToLoadArray = {};\r\n LayoutAbbreviations.forEach(layoutAbbreviation => {\r\n this.nextFeaturesPageToLoadArray[layoutAbbreviation] = {\r\n page: 0,\r\n allReceived: false,\r\n };\r\n });\r\n }\r\n }\r\n\r\n load(dbFeature) {\r\n const partNumber = (dbFeature.metaData[\"Part\"] && +dbFeature.metaData[\"Part\"][0]) === 1 ? 1 : 2;\r\n return super.load_(dbFeature, new TopCabinet(false, partNumber), true, partNumber === 1 ? 'features' : 'featuresParts');\r\n }\r\n\r\n disabledClick() {\r\n this.activeFeatureParts.forEach((activeFeaturePart) => {\r\n activeFeaturePart.disabled = this.disabled\r\n });\r\n const topHandle = this.getParent().topHandle;\r\n if (topHandle) {\r\n topHandle.disabled = this.disabled;\r\n }\r\n const crownMolding = this.getParent().crownMolding;\r\n if (crownMolding) {\r\n crownMolding.disabled = this.disabled;\r\n }\r\n }\r\n\r\n getArrayOfConditions() {\r\n const conditions = super.getArrayOfConditions();\r\n if (useOldCabinetLogic) {\r\n return conditions\r\n }\r\n const cabinetParent = this.getParent();\r\n const applianceParent = cabinetParent.layout.parts[Appliance.id];\r\n const hoodIsVisible = applianceParent && applianceParent.hood && applianceParent.hood.activeFeature && !applianceParent.hood.disabled;\r\n const microwaveIsVisible = applianceParent && applianceParent.microwave && applianceParent.microwave.activeFeature && !applianceParent.microwave.disabled;\r\n conditions.push({\r\n propName: \"Hood\",\r\n propValue: hoodIsVisible || ((cabinetParent.layout.type === 6) && microwaveIsVisible) ? \"H\" : \"C\"\r\n });\r\n if (hoodIsVisible && applianceParent.hood.activeFeature.metaData[\"Width\"]) {\r\n conditions.push({\r\n propName: \"Width\",\r\n propValue: applianceParent.hood.activeFeature.metaData[\"Width\"]\r\n });\r\n }\r\n return conditions\r\n }\r\n\r\n getActiveFeatureConditions() {\r\n return this.getArrayOfConditions().filter(metaObject => {\r\n return metaObject.propName !== \"Hood\" && metaObject.propName !== \"Width\"\r\n })\r\n }\r\n\r\n getActiveFeaturePartsAccordingToActiveFeature(fromFeature = this.activeFeature, activeFeatureConditions = []) {\r\n let activeFeatureParts = [];\r\n if (fromFeature && fromFeature.partNumber) {\r\n const name1 = fromFeature.getSplittedFeatureName();\r\n // console.log(\"name1\", name1);\r\n let arrayOfConditions = activeFeatureConditions.length\r\n ? activeFeatureConditions\r\n : this.getActiveFeatureConditions(fromFeature);\r\n\r\n const cabinetParent = this.getParent();\r\n const applianceParent = cabinetParent.layout.parts[Appliance.id];\r\n\r\n // part1 - depends on hood - H hood enabled, С - disabled\r\n // part1 - depends on hood \"Width\"\r\n // part2 - depends on Fridge\r\n // part3 - was part 6\r\n activeFeatureParts = this.featuresParts.filter((feature) => {\r\n if (useOldCabinetLogic) {\r\n if (feature.metaData[\"Part\"] && feature.metaData[\"Part\"].includes(\"2\")\r\n && (!applianceParent || !applianceParent.hood || applianceParent.hood.disabled || !applianceParent.hood.activeFeature)) {\r\n return name1 === feature.getSplittedFeatureName() && feature.matchesMetaForArrayOfConditions(arrayOfConditions)\r\n }\r\n if (cabinetParent.layout.type === 4 && feature.metaData[\"Part\"] && feature.metaData[\"Part\"].includes(\"3\")\r\n && applianceParent && applianceParent.fridge && (applianceParent.fridge.disabled || !applianceParent.fridge.activeFeature)) {\r\n return name1 === feature.getSplittedFeatureName() && feature.matchesMetaForArrayOfConditions(arrayOfConditions)\r\n }\r\n if (feature.metaData[\"Part\"] && feature.metaData[\"Part\"].includes(\"6\")) { // 6 is fridge related\r\n if (!applianceParent || !applianceParent.fridge || applianceParent.fridge.disabled || !applianceParent.fridge.activeFeature) {\r\n return false\r\n }\r\n const fridgeConditions = applianceParent.fridge.getFridgeWidthAndHeightConditions();\r\n return name1 === feature.getSplittedFeatureName() && feature.matchesMetaForArrayOfConditions([...arrayOfConditions, ...fridgeConditions])\r\n }\r\n } else {\r\n if (feature.metaData[\"Part\"] && feature.metaData[\"Part\"].includes(\"2\")) {\r\n const fridgeIsVisible = applianceParent && applianceParent.fridge && !applianceParent.fridge.disabled\r\n && applianceParent.fridge.activeFeature;\r\n const fridgeConditions = applianceParent && applianceParent.fridge\r\n ? applianceParent.fridge.getFridgeWidthAndHeightConditions()\r\n : [];\r\n return name1 === feature.getSplittedFeatureName() && feature.matchesMetaForArrayOfConditions([\r\n ...arrayOfConditions, {\r\n propName: \"Fridge\",\r\n propValue: fridgeIsVisible ? \"F\" : \"C\"\r\n }, ...fridgeConditions\r\n ])\r\n } else if (feature.metaData[\"Part\"] && feature.metaData[\"Part\"].includes(\"3\")) {\r\n if (!applianceParent || !applianceParent.oven || applianceParent.oven.disabled || !applianceParent.oven.activeFeature) {\r\n return false\r\n }\r\n return name1 === feature.getSplittedFeatureName() && feature.matchesMetaForArrayOfConditions(arrayOfConditions)\r\n }\r\n }\r\n return false\r\n });\r\n\r\n // console.log(\"this.featuresParts\", this.featuresParts);\r\n // console.log(\"activeFeatureParts\", activeFeatureParts);\r\n activeFeatureParts.forEach((activeFeaturePart) => {\r\n activeFeaturePart.disabled = this.disabled\r\n });\r\n }\r\n return activeFeatureParts\r\n }\r\n\r\n}\r\n\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport Appliance from \"../../parts/appliance\";\r\nimport {LayoutAbbreviations, useOldCabinetLogic} from \"../../constants\";\r\nimport CountertopGroup from \"../../parts/countertopGroup\";\r\n\r\nexport default class TallCabinet extends IntermediatePart {\r\n constructor(isChild, partNumber = 0) {\r\n super(isChild);\r\n this.partNumber = partNumber;\r\n this.partId = 'tall_cabinet';\r\n this.partName = 'Tall Cabinet';\r\n this.translateId = \"visualizer.kitchen.cabinet.tall_cabinet\";\r\n this.canBeDisabled = false;\r\n this.hasAdditionalParts = true;\r\n this.layerPriority = 1;\r\n this.allWallsCanBeApplied = true;\r\n if (isChild) {\r\n this.nextFeaturesPageToLoadArray = {};\r\n LayoutAbbreviations.forEach(layoutAbbreviation => {\r\n this.nextFeaturesPageToLoadArray[layoutAbbreviation] = {\r\n page: 0,\r\n allReceived: false,\r\n };\r\n });\r\n }\r\n }\r\n\r\n load(dbFeature) {\r\n const partNumber = (dbFeature.metaData[\"Part\"] && +dbFeature.metaData[\"Part\"][0]) === 1 ? 1 : 2;\r\n return super.load_(dbFeature, new TallCabinet(false, partNumber), true, partNumber === 1 ? 'features' : 'featuresParts');\r\n }\r\n\r\n disabledClick() {\r\n this.activeFeatureParts.forEach((activeFeaturePart) => {\r\n activeFeaturePart.disabled = this.disabled\r\n });\r\n }\r\n\r\n getArrayOfConditions() {\r\n const conditions = super.getArrayOfConditions();\r\n if (useOldCabinetLogic) {\r\n return conditions\r\n }\r\n const cabinetParent = this.getParent();\r\n const countertopParent = cabinetParent.layout.parts[CountertopGroup.id];\r\n // const applianceParent = cabinetParent.layout.parts[Appliance.id];\r\n const sinkIsVisible = countertopParent && countertopParent.sink && countertopParent.sink.activeFeature && !countertopParent.sink.disabled;\r\n if (sinkIsVisible) {\r\n conditions.push({\r\n propName: \"MountType\",\r\n propValue: countertopParent.sink.activeFeature.metaData[\"MountType\"]\r\n });\r\n }\r\n return conditions\r\n }\r\n\r\n getActiveFeatureConditions() {\r\n return this.getArrayOfConditions().filter(metaObject => {\r\n return metaObject.propName !== \"MountType\"\r\n })\r\n }\r\n\r\n getActiveFeaturePartsAccordingToActiveFeature(fromFeature = this.activeFeature, activeFeatureConditions = []) {\r\n let activeFeatureParts = [];\r\n if (fromFeature && fromFeature.partNumber) {\r\n const name1 = fromFeature.getSplittedFeatureName();\r\n // console.log(\"name1\", name1);\r\n let arrayOfConditions = activeFeatureConditions.length\r\n ? activeFeatureConditions\r\n : this.getActiveFeatureConditions(fromFeature);\r\n\r\n const cabinetParent = this.getParent();\r\n const countertopParent = cabinetParent.layout.parts[CountertopGroup.id];\r\n const applianceParent = cabinetParent.layout.parts[Appliance.id];\r\n const sink = countertopParent.sink;\r\n\r\n //part 1 will be with MountType\r\n // part 2 dishwasher - depends on dishwasher metaData Width\r\n //part 3 depends on stove metaData Width\r\n // part 4 - fridge\r\n // part 5 - peninsula\r\n\r\n const withStoveConditions = [...arrayOfConditions, {\r\n propName: \"Width\",\r\n propValue: applianceParent && applianceParent.stove && applianceParent.stove.activeFeature\r\n && applianceParent.stove.activeFeature.metaData[\"Width\"]\r\n ? applianceParent.stove.activeFeature.metaData[\"Width\"]\r\n : \"30\",\r\n }];\r\n const withDishWasherConditions = [...arrayOfConditions, {\r\n propName: \"Width\",\r\n propValue: applianceParent && applianceParent.dishwasher && applianceParent.dishwasher.activeFeature\r\n && applianceParent.dishwasher.activeFeature.metaData[\"Width\"]\r\n ? applianceParent.dishwasher.activeFeature.metaData[\"Width\"]\r\n : \"24\",\r\n }];\r\n const withFridgeConditions = [...arrayOfConditions, {\r\n propName: \"Width\",\r\n propValue: applianceParent && applianceParent.fridge && applianceParent.fridge.activeFeature\r\n && applianceParent.fridge.activeFeature.metaData[\"Width\"]\r\n ? applianceParent.fridge.activeFeature.metaData[\"Width\"]\r\n : \"36\",\r\n }];\r\n activeFeatureParts = this.featuresParts.filter((feature) => {\r\n if (useOldCabinetLogic) {\r\n if (feature.metaData[\"Part\"] && feature.metaData[\"Part\"].includes(\"2\")\r\n && sink && !sink.disabled && sink.activeFeature) {\r\n return name1 === feature.getSplittedFeatureName() && feature.matchesMetaForArrayOfConditions([\r\n ...arrayOfConditions,\r\n {propName: \"MountType\", propValue: sink.activeFeature.metaData[\"MountType\"]}\r\n ])\r\n }\r\n if (feature.metaData[\"Part\"] && feature.metaData[\"Part\"].includes(\"3\")\r\n && applianceParent && applianceParent.dishwasher && !applianceParent.dishwasher.disabled && applianceParent.dishwasher.activeFeature) {\r\n return false\r\n }\r\n if (feature.metaData[\"Part\"] && feature.metaData[\"Part\"].includes(\"4\")\r\n && applianceParent && applianceParent.stove && !applianceParent.stove.disabled && applianceParent.stove.activeFeature) {\r\n return false\r\n }\r\n if (feature.metaData[\"Part\"] && feature.metaData[\"Part\"].includes(\"6\")) { // 6 is fridge related\r\n if (!applianceParent || !applianceParent.fridge || applianceParent.fridge.disabled || !applianceParent.fridge.activeFeature) {\r\n return false\r\n }\r\n const fridgeConditions = applianceParent.fridge.getFridgeWidthAndHeightConditions();\r\n return name1 === feature.getSplittedFeatureName() && feature.matchesMetaForArrayOfConditions([...arrayOfConditions, ...fridgeConditions])\r\n }\r\n } else {\r\n if (name1 !== feature.getSplittedFeatureName()) {\r\n return false\r\n }\r\n if (feature.metaData[\"Part\"] && feature.metaData[\"Part\"].includes(\"2\")) {\r\n return feature.matchesMetaForArrayOfConditions(withDishWasherConditions)\r\n }\r\n if (feature.metaData[\"Part\"] && feature.metaData[\"Part\"].includes(\"3\")) {\r\n return feature.matchesMetaForArrayOfConditions(withStoveConditions)\r\n }\r\n if (feature.metaData[\"Part\"] && feature.metaData[\"Part\"].includes(\"4\")) {\r\n return feature.matchesMetaForArrayOfConditions(withFridgeConditions)\r\n }\r\n if (feature.metaData[\"Part\"] && feature.metaData[\"Part\"].includes(\"5\")) {\r\n if (!applianceParent || !applianceParent.oven || applianceParent.oven.disabled || !applianceParent.oven.activeFeature) {\r\n return false\r\n }\r\n }\r\n return feature.matchesMetaForArrayOfConditions(arrayOfConditions)\r\n }\r\n\r\n return name1 === feature.getSplittedFeatureName() && feature.matchesMetaForArrayOfConditions(arrayOfConditions)\r\n });\r\n\r\n // console.log(\"this.featuresParts\", this.featuresParts);\r\n // console.log(\"activeFeatureParts\", activeFeatureParts);\r\n activeFeatureParts.forEach((activeFeaturePart) => {\r\n activeFeaturePart.disabled = this.disabled\r\n });\r\n }\r\n return activeFeatureParts\r\n }\r\n\r\n\r\n}\r\n\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport {PLACEMENTS} from \"../../../../kvComponent/core/constants\";\r\n\r\nexport default class Sink extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'sink';\r\n this.partName = 'Sink';\r\n this.translateId = \"visualizer.kitchen.countertop.sink\";\r\n this.canBeDisabled = true;\r\n }\r\n\r\n load(dbFeature) {\r\n if (dbFeature.metaData && dbFeature.metaData[\"Placement\"] && dbFeature.metaData[\"Placement\"].includes(PLACEMENTS.Island)) {\r\n return false\r\n }\r\n return super.load_(dbFeature, new Sink());\r\n }\r\n\r\n disabledClick() {\r\n const relatedFaucet = this.getParent().faucet;\r\n if (relatedFaucet) {\r\n relatedFaucet.disabled = this.disabled;\r\n }\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport {METADATA, PLACEMENTS} from \"../../constants\";\r\n\r\nexport default class Faucet extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'faucet';\r\n this.partName = 'Faucet';\r\n this.translateId = \"visualizer.kitchen.countertop.faucet\";\r\n this.canBeDisabled = true;\r\n }\r\n\r\n load(dbFeature) {\r\n if (dbFeature.metaData && dbFeature.metaData[\"Placement\"] && dbFeature.metaData[\"Placement\"].includes(PLACEMENTS.Island)) {\r\n return false\r\n }\r\n const mountTypeMeta = dbFeature.metaData[\"MountType\"];\r\n if (mountTypeMeta && mountTypeMeta.includes(\"U\")) {\r\n METADATA.sinkUTypes.forEach(metaValue => {\r\n if (!mountTypeMeta.includes(metaValue)){\r\n mountTypeMeta.push(metaValue)\r\n }\r\n })\r\n }\r\n return super.load_(dbFeature, new Faucet());\r\n }\r\n\r\n getCurrentSinkMetaData() {\r\n const sinkParent = this.getParent().sink;\r\n let metaObject = {};\r\n if (sinkParent && sinkParent.activeFeature) {\r\n const sinkMeta = sinkParent.activeFeature.metaData[\"MountType\"];\r\n if (sinkMeta && (sinkMeta !== \"0\") && !sinkMeta.includes(\"0\")) {\r\n metaObject[\"MountType\"] = Array.isArray(sinkMeta) ? sinkMeta[0] : sinkMeta\r\n }\r\n const mountHolesMeta = sinkParent.activeFeature.metaData[\"MountHoles\"];\r\n if (mountHolesMeta && (mountHolesMeta !== \"0\") && !mountHolesMeta.includes(\"0\")) { // if 0 - we are showing all faucets\r\n metaObject[\"MountHoles\"] = mountHolesMeta\r\n }\r\n }\r\n return metaObject\r\n }\r\n\r\n getArrayOfConditions() {\r\n const conditions = super.getArrayOfConditions();\r\n const currentSinkMetaData = this.getCurrentSinkMetaData();\r\n [\"MountType\", \"MountHoles\"].forEach(propName => {\r\n if (currentSinkMetaData[propName]) {\r\n conditions.push({\r\n propName,\r\n propValue: currentSinkMetaData[propName]\r\n })\r\n }\r\n })\r\n // console.log(\"conditions\", conditions);\r\n return conditions;\r\n }\r\n\r\n disabledClick() {\r\n const relatedFaucet = this.getParent().sink;\r\n if (relatedFaucet) {\r\n relatedFaucet.disabled = this.disabled;\r\n }\r\n }\r\n}\r\n","import EdgeCommon from \"../edgeCommon\";\r\n\r\nexport default class EdgeProfile extends EdgeCommon {\r\n constructor(isChild, partNumber = 0) {\r\n super(isChild);\r\n this.partNumber = partNumber;\r\n this.partId = 'edge_profile';\r\n this.partName = 'Edge Profile';\r\n this.translateId = \"visualizer.kitchen.countertop.edge_profile\";\r\n // this.isStoneFeature = true;\r\n this.customClassName = \"edge\";\r\n this.hasNoVisualizerLayers = true;\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\n\r\nexport default class Cutouts extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'cutouts';\r\n this.partName = 'Cutouts';\r\n this.translateId = \"visualizer.kitchen.countertop.cutouts\";\r\n this.isStoneFeature = true;\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new Cutouts());\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\n\r\nexport default class Radius extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'radius';\r\n this.partName = 'Radius';\r\n this.translateId = \"visualizer.kitchen.countertop.radius\";\r\n this.isStoneFeature = true;\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new Radius());\r\n }\r\n}\r\n","import orderBy from \"lodash/orderBy\";\r\n\r\nimport {IntermediatePart} from \"../../intermediatePart\";\r\nimport store from \"../../../../../store\";\r\nimport {getColorFilterValue} from \"../../../../../misc/filtersFunctions\";\r\nimport Appliance from \"../../parts/appliance\";\r\n\r\n\r\nexport default class CrownMolding extends IntermediatePart {\r\n constructor(isChild, partNumber = 0) {\r\n super(isChild);\r\n this.partNumber = partNumber;\r\n this.partId = 'crown_molding';\r\n this.partName = 'Crown Molding';\r\n this.canBeDisabled = true;\r\n this.layerPriority = 3;\r\n this.translateId = \"visualizer.kitchen.cabinet.crown_molding\";\r\n this.hasAdditionalParts = true;\r\n }\r\n\r\n load(dbFeature) {\r\n const partNumber = (dbFeature.metaData[\"Part\"] && dbFeature.metaData[\"Part\"][0]) === \"1\" ? 1 : 2;\r\n return super.load_(dbFeature, new CrownMolding(false, partNumber), true, partNumber === 1 ? 'features' : 'featuresParts');\r\n }\r\n\r\n sortNavigationItems(navItems) {\r\n\r\n const cabinetParent = this.getParent();\r\n if (!cabinetParent.topCabinet || !cabinetParent.topCabinet.activeFeature) {\r\n return navItems\r\n }\r\n\r\n const filterGroups = store.getState().filterState.filterGroups;\r\n const colorFilterGroup = filterGroups.find(group => group.name === \"Color\");\r\n if (!colorFilterGroup) {\r\n return navItems\r\n }\r\n\r\n const currentTopCabinetColor = getColorFilterValue(cabinetParent.topCabinet.activeFeature, filterGroups, colorFilterGroup);\r\n if (!currentTopCabinetColor) {\r\n return navItems\r\n }\r\n\r\n navItems = orderBy(navItems, (navItem) => {\r\n const colorFilterValue = getColorFilterValue(navItem.part, filterGroups, colorFilterGroup);\r\n if (!colorFilterValue) {\r\n return false\r\n }\r\n return colorFilterValue.id === currentTopCabinetColor.id\r\n }, ['desc'])\r\n return navItems\r\n }\r\n\r\n disabledClick() {\r\n this.activeFeatureParts.forEach((activeFeaturePart) => {\r\n activeFeaturePart.disabled = this.disabled\r\n });\r\n const topCabinet = this.getParent().topCabinet;\r\n if (topCabinet && topCabinet.disabled && !this.disabled) {\r\n topCabinet.disabled = this.disabled;\r\n topCabinet.activeFeatureParts.forEach((activeFeaturePart) => {\r\n activeFeaturePart.disabled = this.disabled\r\n });\r\n const topHandle = this.getParent().topHandle;\r\n if (topHandle) {\r\n topHandle.disabled = this.disabled;\r\n }\r\n }\r\n }\r\n\r\n handleClick(ignoreLocked) {\r\n const parent = this.getParent();\r\n if (parent.getParent && parent.getParent()) {\r\n super.handleClick(ignoreLocked);\r\n parent.activeFeatureParts = parent.setActiveFeatureParts();\r\n } else {\r\n parent.crownMolding.activeFeature = this;\r\n }\r\n this.featureClicked();\r\n }\r\n\r\n availableFeatures(cabinetFeatures) {\r\n return cabinetFeatures.filter(cabinetFeature => cabinetFeature.partNumber === 1)\r\n }\r\n\r\n setLayers(layout) {\r\n const topCabinet = this.getParent().topCabinet;\r\n if (topCabinet && (topCabinet.disabled || !topCabinet.featureGroupEnabled)) {\r\n super.hideLayers();\r\n return\r\n }\r\n super.setLayers(layout);\r\n }\r\n\r\n getArrayOfConditions() {\r\n let conditions = super.getArrayOfConditions();\r\n const cabinetParent = this.getParent();\r\n if (cabinetParent.topCabinet && cabinetParent.topCabinet.activeFeature\r\n && cabinetParent.topCabinet.activeFeature.metaData[\"MatchingFeature\"]) {\r\n conditions.push({\r\n propName: 'MatchingFeature',\r\n propValue: cabinetParent.topCabinet.activeFeature.metaData[\"MatchingFeature\"]\r\n })\r\n }\r\n return conditions\r\n }\r\n\r\n getActiveFeaturePartsAccordingToActiveFeature(fromFeature = this.activeFeature, activeFeatureConditions = []) {\r\n let activeFeatureParts = [];\r\n if (fromFeature && fromFeature.partNumber) {\r\n const name1 = fromFeature.getSplittedFeatureName();\r\n // console.log(\"name1\", name1);\r\n let arrayOfConditions = activeFeatureConditions.length\r\n ? activeFeatureConditions\r\n : this.getActiveFeatureConditions(fromFeature);\r\n\r\n const cabinetParent = this.getParent();\r\n const applianceParent = cabinetParent.layout.parts[Appliance.id];\r\n\r\n activeFeatureParts = this.featuresParts.filter((feature) => {\r\n if (feature.metaData[\"Part\"] && feature.metaData[\"Part\"].includes(\"3\")) {\r\n if (!applianceParent || !applianceParent.oven || applianceParent.oven.disabled || !applianceParent.oven.activeFeature) {\r\n return false\r\n }\r\n return name1 === feature.getSplittedFeatureName() && feature.matchesMetaForArrayOfConditions(arrayOfConditions)\r\n }\r\n return false\r\n });\r\n\r\n // console.log(\"this.featuresParts\", this.featuresParts);\r\n // console.log(\"activeFeatureParts\", activeFeatureParts);\r\n activeFeatureParts.forEach((activeFeaturePart) => {\r\n activeFeaturePart.disabled = this.disabled\r\n });\r\n }\r\n return activeFeatureParts\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport Appliance from \"../../parts/appliance\";\r\nimport CountertopGroup from \"../../parts/countertopGroup\";\r\nimport {LayoutAbbreviations, METADATA, useOldCabinetLogic} from \"../../constants\";\r\n\r\nexport default class BottomCabinet extends IntermediatePart {\r\n constructor(isChild, partNumber = 0) {\r\n super(isChild);\r\n this.partNumber = partNumber;\r\n this.partId = 'bottom_cabinet';\r\n this.partName = 'Bottom Cabinet';\r\n this.translateId = \"visualizer.kitchen.cabinet.bottom_cabinet\";\r\n this.hasAdditionalParts = true;\r\n this.layerPriority = 4;\r\n this.allWallsCanBeApplied = true;\r\n if (isChild) {\r\n this.nextFeaturesPageToLoadArray = {};\r\n LayoutAbbreviations.forEach(layoutAbbreviation => {\r\n this.nextFeaturesPageToLoadArray[layoutAbbreviation] = {\r\n page: 0,\r\n allReceived: false,\r\n };\r\n });\r\n }\r\n }\r\n\r\n load(dbFeature) {\r\n const partNumber = (dbFeature.metaData[\"Part\"] && +dbFeature.metaData[\"Part\"][0]) === 1 ? 1 : 2;\r\n if (Array.isArray(dbFeature.metaData[\"MountType\"]) && dbFeature.metaData[\"MountType\"][0] === \"0\") {\r\n if (!dbFeature.metaData[\"MountType\"].includes(\"FM\")) {\r\n dbFeature.metaData[\"MountType\"].push(\"FM\")\r\n }\r\n if (!dbFeature.metaData[\"MountType\"].includes(\"ST\")) {\r\n dbFeature.metaData[\"MountType\"].push(\"ST\")\r\n }\r\n }\r\n if (dbFeature.metaData[\"RoomLayout\"]\r\n && (dbFeature.metaData[\"RoomLayout\"].includes(\"Layout3\") || dbFeature.metaData[\"RoomLayout\"].includes(\"3\"))) {\r\n // на этом лаяуте синки с разным маунтайпом, а у bottom есть только один парт с маунтайпом S, U\r\n // т.е. тут можно вообще игнорить маунттайп и матчить все синки с боттом кабинетами\r\n dbFeature.metaData[\"MountType\"] = METADATA.ALL\r\n }\r\n if (!dbFeature.metaData[\"Stovetop\"]) {\r\n dbFeature.metaData[\"Stovetop\"] = METADATA.NO\r\n }\r\n return super.load_(dbFeature, new BottomCabinet(false, partNumber), true, partNumber === 1 ? 'features' : 'featuresParts');\r\n }\r\n\r\n disabledClick() {\r\n this.activeFeatureParts.forEach((activeFeaturePart) => {\r\n activeFeaturePart.disabled = this.disabled\r\n });\r\n const applianceParent = this.getParent().layout.parts[Appliance.id];\r\n if (applianceParent && applianceParent.stovetop) {\r\n applianceParent.stovetop.disabled = this.disabled\r\n }\r\n }\r\n\r\n handleClick(ignoreLocked, clickFrom = \"\") {\r\n const parent = this.getParent();\r\n if (parent.getParent && parent.getParent()) {\r\n super.handleClick(ignoreLocked, clickFrom);\r\n parent.activeFeatureParts = parent.setActiveFeatureParts();\r\n } else {\r\n parent.bottomCabinet.activeFeature = this;\r\n }\r\n this.featureClicked();\r\n }\r\n\r\n getArrayOfConditions() {\r\n const conditions = super.getArrayOfConditions();\r\n if (useOldCabinetLogic) {\r\n return conditions\r\n }\r\n const cabinetParent = this.getParent();\r\n const countertopParent = cabinetParent.layout.parts[CountertopGroup.id];\r\n // const applianceParent = cabinetParent.layout.parts[Appliance.id];\r\n conditions.push({\r\n propName: \"MountType\",\r\n propValue: countertopParent && countertopParent.sink && countertopParent.sink.activeFeature\r\n && !countertopParent.sink.disabled && countertopParent.sink.featureGroupEnabled\r\n ? countertopParent.sink.activeFeature.metaData[\"MountType\"]\r\n : [\"U\"]\r\n });\r\n return conditions\r\n }\r\n\r\n getActiveFeatureConditions() {\r\n return this.getArrayOfConditions().filter(metaObject => {\r\n return metaObject.propName !== \"MountType\"\r\n })\r\n }\r\n\r\n getActiveFeaturePartsAccordingToActiveFeature(fromFeature = this.activeFeature, activeFeatureConditions = []) {\r\n let activeFeatureParts = [];\r\n if (fromFeature && fromFeature.partNumber) {\r\n const name1 = fromFeature.getSplittedFeatureName();\r\n // console.log(\"name1\", name1);\r\n let arrayOfConditions = activeFeatureConditions.length\r\n ? activeFeatureConditions\r\n : this.getActiveFeatureConditions(fromFeature);\r\n\r\n const cabinetParent = this.getParent();\r\n const countertopParent = cabinetParent.layout.parts[CountertopGroup.id];\r\n const applianceParent = cabinetParent.layout.parts[Appliance.id];\r\n const sink = countertopParent.sink;\r\n\r\n //part 1 will be with MountType\r\n // part 2 dishwasher - depends on dishwasher metaData Width\r\n //part 3 depends on stove metaData Width // on Room Layout 6 we have Range + Stovetop, not Stove\r\n // part 4 - fridge\r\n // part 5 - peninsula\r\n\r\n let withStoveConditions = [...arrayOfConditions];\r\n const rangeIsActive = applianceParent && applianceParent.range && !applianceParent.range.disabled && applianceParent.range.activeFeature;\r\n if (applianceParent && applianceParent.layout.type === 6) {\r\n withStoveConditions.push({\r\n propName: \"Stovetop\",\r\n propValue: rangeIsActive ? METADATA.NO : \"ST\",\r\n });\r\n }\r\n withStoveConditions.push({\r\n propName: \"Width\",\r\n propValue: rangeIsActive\r\n ? applianceParent.range.activeFeature.metaData[\"Width\"] || \"30\"\r\n : applianceParent\r\n && applianceParent.stove\r\n && applianceParent.stove.activeFeature\r\n && applianceParent.stove.activeFeature.metaData[\"Width\"]\r\n ? applianceParent.stove.activeFeature.metaData[\"Width\"]\r\n : \"30\"\r\n })\r\n // console.log(\"withStoveConditions\", withStoveConditions);\r\n const withDishWasherConditions = [...arrayOfConditions, {\r\n propName: \"Width\",\r\n propValue: applianceParent && applianceParent.dishwasher && applianceParent.dishwasher.activeFeature\r\n && applianceParent.dishwasher.activeFeature.metaData[\"Width\"]\r\n ? applianceParent.dishwasher.activeFeature.metaData[\"Width\"]\r\n : \"24\",\r\n }];\r\n const withFridgeConditions = [...arrayOfConditions, {\r\n propName: \"Width\",\r\n propValue: applianceParent && applianceParent.fridge && applianceParent.fridge.activeFeature\r\n && applianceParent.fridge.activeFeature.metaData[\"Width\"]\r\n ? applianceParent.fridge.activeFeature.metaData[\"Width\"]\r\n : \"36\",\r\n }];\r\n activeFeatureParts = this.featuresParts.filter((feature) => {\r\n if (useOldCabinetLogic) {\r\n if (feature.metaData[\"Part\"] && feature.metaData[\"Part\"].includes(\"2\")\r\n && sink && !sink.disabled && sink.activeFeature) {\r\n return name1 === feature.getSplittedFeatureName() && feature.matchesMetaForArrayOfConditions([\r\n ...arrayOfConditions,\r\n {propName: \"MountType\", propValue: sink.activeFeature.metaData[\"MountType\"]}\r\n ])\r\n }\r\n if (feature.metaData[\"Part\"] && feature.metaData[\"Part\"].includes(\"3\")\r\n && applianceParent && applianceParent.dishwasher && !applianceParent.dishwasher.disabled && applianceParent.dishwasher.activeFeature) {\r\n return false\r\n }\r\n if (feature.metaData[\"Part\"] && feature.metaData[\"Part\"].includes(\"4\")\r\n && applianceParent && applianceParent.stove && !applianceParent.stove.disabled && applianceParent.stove.activeFeature) {\r\n return false\r\n }\r\n if (feature.metaData[\"Part\"] && feature.metaData[\"Part\"].includes(\"6\")) { // 6 is fridge related\r\n if (!applianceParent || !applianceParent.fridge || applianceParent.fridge.disabled || !applianceParent.fridge.activeFeature) {\r\n return false\r\n }\r\n const fridgeConditions = applianceParent.fridge.getFridgeWidthAndHeightConditions();\r\n return name1 === feature.getSplittedFeatureName() && feature.matchesMetaForArrayOfConditions([...arrayOfConditions, ...fridgeConditions])\r\n }\r\n } else {\r\n if (name1 !== feature.getSplittedFeatureName()) {\r\n return false\r\n }\r\n if (feature.metaData[\"Part\"] && feature.metaData[\"Part\"].includes(\"2\")) {\r\n return feature.matchesMetaForArrayOfConditions(withDishWasherConditions)\r\n }\r\n if (feature.metaData[\"Part\"] && feature.metaData[\"Part\"].includes(\"3\")) {\r\n return feature.matchesMetaForArrayOfConditions(withStoveConditions)\r\n }\r\n if (feature.metaData[\"Part\"] && feature.metaData[\"Part\"].includes(\"4\")) {\r\n return feature.matchesMetaForArrayOfConditions(withFridgeConditions)\r\n }\r\n if (feature.metaData[\"Part\"] && feature.metaData[\"Part\"].includes(\"5\")) {\r\n if (!applianceParent || !applianceParent.oven || applianceParent.oven.disabled || !applianceParent.oven.activeFeature) {\r\n return false\r\n }\r\n }\r\n return feature.matchesMetaForArrayOfConditions(arrayOfConditions)\r\n }\r\n\r\n return name1 === feature.getSplittedFeatureName() && feature.matchesMetaForArrayOfConditions(arrayOfConditions)\r\n });\r\n\r\n // console.log(\"this.featuresParts\", this.featuresParts);\r\n // console.log(\"activeFeatureParts\", activeFeatureParts);\r\n activeFeatureParts.forEach((activeFeaturePart) => {\r\n activeFeaturePart.disabled = this.disabled\r\n });\r\n }\r\n return activeFeatureParts\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport Appliance from \"../../parts/appliance\";\r\nimport CountertopGroup from \"../../parts/countertopGroup\";\r\nimport {METADATA} from \"../../constants\";\r\n\r\nexport default class BottomHandle extends IntermediatePart {\r\n\r\n constructor(isChild, partNumber = 0) {\r\n super(isChild);\r\n this.partNumber = partNumber;\r\n this.partId = 'bottom_handle';\r\n this.partName = 'Bottom Handle';\r\n this.translateId = \"visualizer.kitchen.cabinet.bottom_handle\";\r\n this.canBeDisabled = true;\r\n this.layerPriority = 5;\r\n this.hasAdditionalParts = true;\r\n }\r\n\r\n load(dbFeature) {\r\n if (Array.isArray(dbFeature.metaData[\"MountType\"]) && dbFeature.metaData[\"MountType\"][0] === \"0\") {\r\n if (!dbFeature.metaData[\"MountType\"].includes(\"FM\")) {\r\n dbFeature.metaData[\"MountType\"].push(\"FM\")\r\n }\r\n if (!dbFeature.metaData[\"MountType\"].includes(\"ST\")) {\r\n dbFeature.metaData[\"MountType\"].push(\"ST\")\r\n }\r\n }\r\n if (dbFeature.metaData[\"RoomLayout\"]\r\n && (dbFeature.metaData[\"RoomLayout\"].includes(\"Layout3\") || dbFeature.metaData[\"RoomLayout\"].includes(\"3\"))) {\r\n // if (!dbFeature.metaData[\"MountType\"].includes(\"U\")) {\r\n // dbFeature.metaData[\"MountType\"].push(\"U\")\r\n // }\r\n // if (!dbFeature.metaData[\"MountType\"].includes(\"S\")) {\r\n // dbFeature.metaData[\"MountType\"].push(\"S\")\r\n // }\r\n dbFeature.metaData[\"MountType\"] = METADATA.ALL\r\n }\r\n if (!dbFeature.metaData[\"Stovetop\"]) {\r\n dbFeature.metaData[\"Stovetop\"] = METADATA.NO\r\n }\r\n const partNumber = (dbFeature.metaData[\"Part\"] && dbFeature.metaData[\"Part\"][0]) === \"1\" ? 1 : 2;\r\n return super.load_(dbFeature, new BottomHandle(false, partNumber), true, partNumber === 1 ? 'features' : 'featuresParts');\r\n }\r\n\r\n handleClick(ignoreLocked, clickFrom = \"\") {\r\n const parent = this.getParent();\r\n if (parent.getParent && parent.getParent()) {\r\n super.handleClick(ignoreLocked, clickFrom);\r\n parent.activeFeatureParts = parent.setActiveFeatureParts();\r\n } else {\r\n parent.bottomHandle.activeFeature = this;\r\n }\r\n this.featureClicked();\r\n }\r\n\r\n getArrayOfConditions() {\r\n const conditions = super.getArrayOfConditions();\r\n const cabinetParent = this.getParent();\r\n const countertopParent = cabinetParent.layout.parts[CountertopGroup.id];\r\n // const applianceParent = cabinetParent.layout.parts[Appliance.id];\r\n conditions.push({\r\n propName: \"MountType\",\r\n propValue: countertopParent && countertopParent.sink && countertopParent.sink.activeFeature\r\n && !countertopParent.sink.disabled && countertopParent.sink.featureGroupEnabled\r\n ? countertopParent.sink.activeFeature.metaData[\"MountType\"]\r\n : [\"U\"]\r\n });\r\n return conditions\r\n }\r\n\r\n getActiveFeatureConditions() {\r\n return this.getArrayOfConditions().filter(metaObject => {\r\n return metaObject.propName !== \"MountType\"\r\n })\r\n }\r\n\r\n getActiveFeaturePartsAccordingToActiveFeature(fromFeature = this.activeFeature, activeFeatureConditions = []) {\r\n let activeFeatureParts = [];\r\n if (fromFeature && fromFeature.partNumber) {\r\n const name1 = fromFeature.getSplittedFeatureName();\r\n // console.log(\"name1\", name1);\r\n let arrayOfConditions = activeFeatureConditions.length\r\n ? activeFeatureConditions\r\n : this.getActiveFeatureConditions(fromFeature);\r\n\r\n const cabinetParent = this.getParent();\r\n const applianceParent = cabinetParent.layout.parts[Appliance.id];\r\n\r\n //part 1 will be with MountType\r\n // part 2 dishwasher - depends on dishwasher metaData Width\r\n //part 3 depends on stove metaData Width // on Room Layout 6 we have Range + Stovetop, not Stove\r\n // part 4 - fridge\r\n // part 5 - peninsula\r\n\r\n let withStoveConditions = [...arrayOfConditions];\r\n const rangeIsActive = applianceParent && applianceParent.range && !applianceParent.range.disabled && applianceParent.range.activeFeature;\r\n if (applianceParent && applianceParent.layout.type === 6) {\r\n withStoveConditions.push({\r\n propName: \"Stovetop\",\r\n propValue: rangeIsActive ? METADATA.NO : \"ST\",\r\n });\r\n }\r\n withStoveConditions.push({\r\n propName: \"Width\",\r\n propValue: rangeIsActive\r\n ? applianceParent.range.activeFeature.metaData[\"Width\"] || \"30\"\r\n : applianceParent\r\n && applianceParent.stove\r\n && applianceParent.stove.activeFeature\r\n && applianceParent.stove.activeFeature.metaData[\"Width\"]\r\n ? applianceParent.stove.activeFeature.metaData[\"Width\"]\r\n : \"30\"\r\n })\r\n const withDishWasherConditions = [...arrayOfConditions, {\r\n propName: \"Width\",\r\n propValue: applianceParent && applianceParent.dishwasher && applianceParent.dishwasher.activeFeature\r\n && applianceParent.dishwasher.activeFeature.metaData[\"Width\"]\r\n ? applianceParent.dishwasher.activeFeature.metaData[\"Width\"]\r\n : \"24\",\r\n }];\r\n const withFridgeConditions = [...arrayOfConditions, {\r\n propName: \"Width\",\r\n propValue: applianceParent && applianceParent.fridge && applianceParent.fridge.activeFeature\r\n && applianceParent.fridge.activeFeature.metaData[\"Width\"]\r\n ? applianceParent.fridge.activeFeature.metaData[\"Width\"]\r\n : \"36\",\r\n }];\r\n activeFeatureParts = this.featuresParts.filter((feature) => {\r\n if (name1 !== feature.getSplittedFeatureName()) {\r\n return false\r\n }\r\n if (feature.metaData[\"Part\"] && feature.metaData[\"Part\"].includes(\"2\")) {\r\n return feature.matchesMetaForArrayOfConditions(withDishWasherConditions)\r\n }\r\n if (feature.metaData[\"Part\"] && feature.metaData[\"Part\"].includes(\"3\")) {\r\n return feature.matchesMetaForArrayOfConditions(withStoveConditions)\r\n }\r\n if (feature.metaData[\"Part\"] && feature.metaData[\"Part\"].includes(\"4\")) {\r\n return feature.matchesMetaForArrayOfConditions(withFridgeConditions)\r\n }\r\n if (feature.metaData[\"Part\"] && feature.metaData[\"Part\"].includes(\"5\")) {\r\n if (!applianceParent || !applianceParent.oven || applianceParent.oven.disabled || !applianceParent.oven.activeFeature) {\r\n return false\r\n }\r\n }\r\n return feature.matchesMetaForArrayOfConditions(arrayOfConditions)\r\n });\r\n\r\n // console.log(\"this.featuresParts\", this.featuresParts);\r\n // console.log(\"activeFeatureParts\", activeFeatureParts);\r\n activeFeatureParts.forEach((activeFeaturePart) => {\r\n activeFeaturePart.disabled = this.disabled\r\n });\r\n }\r\n return activeFeatureParts\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport Appliance from \"../../parts/appliance\";\r\n\r\nexport default class TopHandle extends IntermediatePart {\r\n\r\n constructor(isChild, partNumber = 0) {\r\n super(isChild);\r\n this.partNumber = partNumber;\r\n this.partId = 'top_handle';\r\n this.partName = 'Top Handle';\r\n this.canBeDisabled = true;\r\n this.layerPriority = 2;\r\n this.translateId = \"visualizer.kitchen.cabinet.top_handle\";\r\n this.hasAdditionalParts = true;\r\n }\r\n\r\n load(dbFeature) {\r\n const partNumber = (dbFeature.metaData[\"Part\"] && dbFeature.metaData[\"Part\"][0]) === \"1\" ? 1 : 2;\r\n return super.load_(dbFeature, new TopHandle(false, partNumber), true, partNumber === 1 ? 'features' : 'featuresParts');\r\n }\r\n\r\n getArrayOfConditions() {\r\n const conditions = super.getArrayOfConditions();\r\n const cabinetParent = this.getParent();\r\n const applianceParent = cabinetParent.layout.parts[Appliance.id];\r\n const hoodIsVisible = applianceParent && applianceParent.hood && applianceParent.hood.activeFeature && !applianceParent.hood.disabled;\r\n const microwaveIsVisible = applianceParent && applianceParent.microwave && applianceParent.microwave.activeFeature && !applianceParent.microwave.disabled;\r\n conditions.push({\r\n propName: \"Hood\",\r\n propValue: hoodIsVisible || ((cabinetParent.layout.type === 6) && microwaveIsVisible) ? \"H\" : \"C\"\r\n });\r\n if (hoodIsVisible && applianceParent.hood.activeFeature.metaData[\"Width\"]) {\r\n conditions.push({\r\n propName: \"Width\",\r\n propValue: applianceParent.hood.activeFeature.metaData[\"Width\"]\r\n });\r\n }\r\n return conditions\r\n }\r\n\r\n getActiveFeatureConditions() {\r\n return this.getArrayOfConditions().filter(metaObject => {\r\n return metaObject.propName !== \"Hood\" && metaObject.propName !== \"Width\"\r\n })\r\n }\r\n\r\n getActiveFeaturePartsAccordingToActiveFeature(fromFeature = this.activeFeature, activeFeatureConditions = []) {\r\n let activeFeatureParts = [];\r\n if (fromFeature && fromFeature.partNumber) {\r\n const name1 = fromFeature.getSplittedFeatureName();\r\n // console.log(\"name1\", name1);\r\n let arrayOfConditions = activeFeatureConditions.length\r\n ? activeFeatureConditions\r\n : this.getActiveFeatureConditions(fromFeature);\r\n\r\n const cabinetParent = this.getParent();\r\n const applianceParent = cabinetParent.layout.parts[Appliance.id];\r\n\r\n // part1 - depends on hood - H hood enabled, С - disabled\r\n // part1 - depends on hood \"Width\"\r\n // part2 - depends on Fridge\r\n activeFeatureParts = this.featuresParts.filter((feature) => {\r\n if (feature.metaData[\"Part\"] && feature.metaData[\"Part\"].includes(\"2\")) {\r\n const fridgeIsVisible = applianceParent && applianceParent.fridge && !applianceParent.fridge.disabled\r\n && applianceParent.fridge.activeFeature;\r\n const fridgeConditions = applianceParent && applianceParent.fridge\r\n ? applianceParent.fridge.getFridgeWidthAndHeightConditions()\r\n : [];\r\n return name1 === feature.getSplittedFeatureName() && feature.matchesMetaForArrayOfConditions([\r\n ...arrayOfConditions, {\r\n propName: \"Fridge\",\r\n propValue: fridgeIsVisible ? \"F\" : \"C\"\r\n }, ...fridgeConditions\r\n ])\r\n } else if (feature.metaData[\"Part\"] && feature.metaData[\"Part\"].includes(\"3\")) {\r\n if (!applianceParent || !applianceParent.oven || applianceParent.oven.disabled || !applianceParent.oven.activeFeature) {\r\n return false\r\n }\r\n return name1 === feature.getSplittedFeatureName() && feature.matchesMetaForArrayOfConditions(arrayOfConditions)\r\n }\r\n return false\r\n });\r\n\r\n // console.log(\"this.featuresParts\", this.featuresParts);\r\n // console.log(\"activeFeatureParts\", activeFeatureParts);\r\n activeFeatureParts.forEach((activeFeaturePart) => {\r\n activeFeaturePart.disabled = this.disabled\r\n });\r\n }\r\n return activeFeatureParts\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport Appliance from \"../../parts/appliance\";\r\nimport {METADATA} from \"../../constants\";\r\nimport Countertop from \"../countertop/countertop\";\r\n\r\nexport default class DoorHandle extends IntermediatePart {\r\n\r\n constructor(isChild, partNumber = 0) {\r\n super(isChild);\r\n this.partNumber = partNumber;\r\n this.partId = 'door_handle';\r\n this.partName = 'Door Handle';\r\n this.canBeDisabled = true;\r\n this.layerPriority = 2;\r\n this.translateId = \"visualizer.kitchen.cabinet.door_handle\";\r\n this.hasAdditionalParts = true;\r\n // Door Handle and Drawer Handle are the same as Top Handle and Bottom Handle\r\n // Top Handle, part 1, size 30, H --> Door Handle, part 1, size 30, H\r\n // Top Handle, part 1, size 30, C --> Door Handle, part 1, size 30, C\r\n // Top Handle, part 2, size 36 --> Door Handle, part 2, size 36\r\n // Top Handle, part 3, size 30 --> Door Handle, part 3, size 30\r\n // 9:42\r\n // Bottom Handle, part 1, size 0, S U --> Drawer Handle, part 1, size 0, S U /// Placement Bottom\r\n // --> Door Handle, part 1, size 0, S U /// Placement Bottom\r\n // 2. Bottom Handle, part 3, size 30 --> Drawer Handle, part 3, size 30 /// Placement Bottom\r\n // --> Door Handle, part 3, size 30 /// Placement Bottom\r\n // 3. Bottom Handle, part 3, size 30, ST --> Drawer Handle, part 3, size 30, ST /// Placement Bottom\r\n // --> Door Handle, part 3, size 30, ST /// Placement Bottom\r\n // 4. Bottom Handle, part 4, size 36 --> Drawer Handle, part 4, size 36 /// Placement Bottom\r\n // --> Door Handle, part 4, size 36 /// Placement Bottom\r\n // 5. Bottom Handle, part 5, size 30, O --> Drawer Handle, part 5, size 30, O (edited) /// Placement Bottom\r\n }\r\n\r\n load(dbFeature) {\r\n if (((dbFeature.metaData[\"Part\"] && dbFeature.metaData[\"Part\"][0]) === \"1\") && dbFeature.metaData[\"Placement\"]\r\n && dbFeature.metaData[\"Placement\"].includes(\"Bottom\")) {\r\n dbFeature.metaData[\"Part\"] = [\"6\"];\r\n // console.log(\"dbFeaturedbF6\", dbFeature);\r\n } else if (((dbFeature.metaData[\"Part\"] && dbFeature.metaData[\"Part\"][0]) === \"3\") && dbFeature.metaData[\"Placement\"]\r\n && dbFeature.metaData[\"Placement\"].includes(\"Bottom\")) {\r\n dbFeature.metaData[\"Part\"] = [\"7\"];\r\n // console.log(\"dbFeaturedbFeature7\", dbFeature);\r\n }\r\n if (Array.isArray(dbFeature.metaData[\"MountType\"]) && dbFeature.metaData[\"MountType\"][0] === \"0\") {\r\n if (!dbFeature.metaData[\"MountType\"].includes(\"FM\")) {\r\n dbFeature.metaData[\"MountType\"].push(\"FM\")\r\n }\r\n if (!dbFeature.metaData[\"MountType\"].includes(\"ST\")) {\r\n dbFeature.metaData[\"MountType\"].push(\"ST\")\r\n }\r\n }\r\n if (dbFeature.metaData[\"RoomLayout\"]\r\n && (dbFeature.metaData[\"RoomLayout\"].includes(\"Layout3\") || dbFeature.metaData[\"RoomLayout\"].includes(\"3\"))) {\r\n dbFeature.metaData[\"MountType\"] = METADATA.ALL\r\n }\r\n if (dbFeature.metaData[\"RoomLayout\"]\r\n && (dbFeature.metaData[\"RoomLayout\"].includes(\"Layout6\") || dbFeature.metaData[\"RoomLayout\"].includes(\"6\"))) {\r\n if (!dbFeature.metaData[\"Stovetop\"]) {\r\n dbFeature.metaData[\"Stovetop\"] = METADATA.NO\r\n }\r\n }\r\n const partNumber = (dbFeature.metaData[\"Part\"] && dbFeature.metaData[\"Part\"][0]) === \"1\" ? 1 : 2;\r\n return super.load_(dbFeature, new DoorHandle(false, partNumber), true, partNumber === 1 ? 'features' : 'featuresParts');\r\n }\r\n\r\n getArrayOfConditions() {\r\n const conditions = super.getArrayOfConditions();\r\n const cabinetParent = this.getParent();\r\n const applianceParent = cabinetParent.layout.parts[Appliance.id];\r\n const hoodIsVisible = applianceParent && applianceParent.hood && applianceParent.hood.activeFeature && !applianceParent.hood.disabled;\r\n const microwaveIsVisible = applianceParent && applianceParent.microwave && applianceParent.microwave.activeFeature && !applianceParent.microwave.disabled;\r\n conditions.push({\r\n propName: \"Hood\",\r\n propValue: hoodIsVisible || ((cabinetParent.layout.type === 6) && microwaveIsVisible) ? \"H\" : \"C\"\r\n });\r\n if (hoodIsVisible && applianceParent.hood.activeFeature.metaData[\"Width\"]) {\r\n conditions.push({\r\n propName: \"Width\",\r\n propValue: applianceParent.hood.activeFeature.metaData[\"Width\"]\r\n });\r\n }\r\n return conditions\r\n }\r\n\r\n getActiveFeatureConditions() {\r\n return this.getArrayOfConditions().filter(metaObject => {\r\n return metaObject.propName !== \"Hood\" && metaObject.propName !== \"Width\"\r\n })\r\n }\r\n\r\n getActiveFeaturePartsAccordingToActiveFeature(fromFeature = this.activeFeature, activeFeatureConditions = []) {\r\n let activeFeatureParts = [];\r\n if (fromFeature && fromFeature.partNumber) {\r\n const name1 = fromFeature.getSplittedFeatureName();\r\n // console.log(\"name1\", name1);\r\n let arrayOfConditions = activeFeatureConditions.length\r\n ? activeFeatureConditions\r\n : this.getActiveFeatureConditions(fromFeature);\r\n\r\n const cabinetParent = this.getParent();\r\n const applianceParent = cabinetParent.layout.parts[Appliance.id];\r\n const countertopParent = cabinetParent.layout.parts[Countertop.id];\r\n\r\n //part 1 will be with MountType\r\n // part 2 dishwasher - depends on dishwasher metaData Width\r\n //part 3 depends on stove metaData Width // on Room Layout 6 we have Range + Stovetop, not Stove\r\n // part 4 - fridge\r\n // part 5 - peninsula\r\n\r\n let withStoveConditions = [...arrayOfConditions];\r\n if (applianceParent && applianceParent.layout.type === 6) {\r\n const rangeIsActive = applianceParent && applianceParent.range && !applianceParent.range.disabled && applianceParent.range.activeFeature;\r\n withStoveConditions.push({\r\n propName: \"Stovetop\",\r\n propValue: rangeIsActive ? METADATA.NO : \"ST\",\r\n });\r\n if (rangeIsActive && applianceParent.range.activeFeature.metaData[\"Width\"]) {\r\n withStoveConditions.push({\r\n propName: \"Width\",\r\n propValue: applianceParent.range.activeFeature.metaData[\"Width\"],\r\n })\r\n }\r\n } else {\r\n withStoveConditions.push({\r\n propName: \"Width\",\r\n propValue: applianceParent && applianceParent.stove && applianceParent.stove.activeFeature\r\n && applianceParent.stove.activeFeature.metaData[\"Width\"]\r\n ? applianceParent.stove.activeFeature.metaData[\"Width\"]\r\n : \"30\",\r\n })\r\n }\r\n const withFridgeConditions = [...arrayOfConditions, {\r\n propName: \"Width\",\r\n propValue: applianceParent && applianceParent.fridge && applianceParent.fridge.activeFeature\r\n && applianceParent.fridge.activeFeature.metaData[\"Width\"]\r\n ? applianceParent.fridge.activeFeature.metaData[\"Width\"]\r\n : \"36\",\r\n }];\r\n activeFeatureParts = this.featuresParts.filter((feature) => {\r\n if (name1 !== feature.getSplittedFeatureName()) {\r\n return false\r\n }\r\n if (feature.metaData[\"Part\"] && feature.metaData[\"Part\"].includes(\"2\")) {\r\n const fridgeIsVisible = applianceParent && applianceParent.fridge && !applianceParent.fridge.disabled\r\n && applianceParent.fridge.activeFeature;\r\n const fridgeConditions = applianceParent && applianceParent.fridge\r\n ? applianceParent.fridge.getFridgeWidthAndHeightConditions()\r\n : [];\r\n return feature.matchesMetaForArrayOfConditions([\r\n ...arrayOfConditions, {\r\n propName: \"Fridge\",\r\n propValue: fridgeIsVisible ? \"F\" : \"C\"\r\n }, ...fridgeConditions\r\n ])\r\n } else if (feature.metaData[\"Part\"] && feature.metaData[\"Part\"].includes(\"3\")) {\r\n if (!applianceParent || !applianceParent.oven || applianceParent.oven.disabled || !applianceParent.oven.activeFeature) {\r\n return false\r\n }\r\n return feature.matchesMetaForArrayOfConditions(arrayOfConditions)\r\n }\r\n if (feature.metaData[\"Part\"] && feature.metaData[\"Part\"].includes(\"4\")) {\r\n return feature.matchesMetaForArrayOfConditions(withFridgeConditions)\r\n }\r\n if (feature.metaData[\"Part\"] && feature.metaData[\"Part\"].includes(\"5\")) {\r\n if (!applianceParent || !applianceParent.oven || applianceParent.oven.disabled || !applianceParent.oven.activeFeature) {\r\n return false\r\n }\r\n }\r\n if (feature.metaData[\"Part\"] && feature.metaData[\"Part\"].includes(\"6\")) {\r\n if (countertopParent && countertopParent.sink && countertopParent.sink.activeFeature && !countertopParent.sink.disabled) {\r\n return feature.matchesMetaForArrayOfConditions([\r\n ...arrayOfConditions, {\r\n propName: \"MountType\",\r\n propValue: countertopParent.sink.activeFeature.metaData[\"MountType\"]\r\n }])\r\n }\r\n }\r\n if (feature.metaData[\"Part\"] && feature.metaData[\"Part\"].includes(\"7\")) {\r\n return feature.matchesMetaForArrayOfConditions(withStoveConditions)\r\n }\r\n return feature.matchesMetaForArrayOfConditions(arrayOfConditions)\r\n });\r\n\r\n // console.log(\"this.featuresParts\", this.featuresParts);\r\n // console.log(\"activeFeatureParts\", activeFeatureParts);\r\n activeFeatureParts.forEach((activeFeaturePart) => {\r\n activeFeaturePart.disabled = this.disabled\r\n });\r\n }\r\n return activeFeatureParts\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport Appliance from \"../../parts/appliance\";\r\nimport CountertopGroup from \"../../parts/countertopGroup\";\r\nimport {METADATA} from \"../../constants\";\r\n\r\nexport default class DrawerHandle extends IntermediatePart {\r\n\r\n constructor(isChild, partNumber = 0) {\r\n super(isChild);\r\n this.partNumber = partNumber;\r\n this.partId = 'drawer_handle';\r\n this.partName = 'Drawer Handle';\r\n this.translateId = \"visualizer.kitchen.cabinet.drawer_handle\";\r\n this.canBeDisabled = true;\r\n this.layerPriority = 5;\r\n this.hasAdditionalParts = true;\r\n }\r\n\r\n load(dbFeature) {\r\n if (Array.isArray(dbFeature.metaData[\"MountType\"]) && dbFeature.metaData[\"MountType\"][0] === \"0\") {\r\n if (!dbFeature.metaData[\"MountType\"].includes(\"FM\")) {\r\n dbFeature.metaData[\"MountType\"].push(\"FM\")\r\n }\r\n if (!dbFeature.metaData[\"MountType\"].includes(\"ST\")) {\r\n dbFeature.metaData[\"MountType\"].push(\"ST\")\r\n }\r\n }\r\n if (dbFeature.metaData[\"RoomLayout\"]\r\n && (dbFeature.metaData[\"RoomLayout\"].includes(\"Layout3\") || dbFeature.metaData[\"RoomLayout\"].includes(\"3\"))) {\r\n // if (!dbFeature.metaData[\"MountType\"].includes(\"U\")) {\r\n // dbFeature.metaData[\"MountType\"].push(\"U\")\r\n // }\r\n // if (!dbFeature.metaData[\"MountType\"].includes(\"S\")) {\r\n // dbFeature.metaData[\"MountType\"].push(\"S\")\r\n // }\r\n dbFeature.metaData[\"MountType\"] = METADATA.ALL\r\n }\r\n if (dbFeature.metaData[\"RoomLayout\"]\r\n && (dbFeature.metaData[\"RoomLayout\"].includes(\"Layout6\") || dbFeature.metaData[\"RoomLayout\"].includes(\"6\"))) {\r\n if (!dbFeature.metaData[\"Stovetop\"]) {\r\n dbFeature.metaData[\"Stovetop\"] = METADATA.NO\r\n }\r\n }\r\n const partNumber = (dbFeature.metaData[\"Part\"] && dbFeature.metaData[\"Part\"][0]) === \"1\" ? 1 : 2;\r\n return super.load_(dbFeature, new DrawerHandle(false, partNumber), true, partNumber === 1 ? 'features' : 'featuresParts');\r\n }\r\n\r\n handleClick(ignoreLocked, clickFrom = \"\") {\r\n const parent = this.getParent();\r\n if (parent.getParent && parent.getParent()) {\r\n super.handleClick(ignoreLocked, clickFrom);\r\n parent.activeFeatureParts = parent.setActiveFeatureParts();\r\n } else {\r\n parent.bottomHandle.activeFeature = this;\r\n }\r\n this.featureClicked();\r\n }\r\n\r\n getArrayOfConditions() {\r\n const conditions = super.getArrayOfConditions();\r\n const cabinetParent = this.getParent();\r\n const countertopParent = cabinetParent.layout.parts[CountertopGroup.id];\r\n // const applianceParent = cabinetParent.layout.parts[Appliance.id];\r\n const sinkIsVisible = countertopParent && countertopParent.sink && countertopParent.sink.activeFeature && !countertopParent.sink.disabled;\r\n if (sinkIsVisible) {\r\n conditions.push({\r\n propName: \"MountType\",\r\n propValue: countertopParent.sink.activeFeature.metaData[\"MountType\"]\r\n });\r\n }\r\n return conditions\r\n }\r\n\r\n getActiveFeatureConditions() {\r\n return this.getArrayOfConditions().filter(metaObject => {\r\n return metaObject.propName !== \"MountType\"\r\n })\r\n }\r\n\r\n getActiveFeaturePartsAccordingToActiveFeature(fromFeature = this.activeFeature, activeFeatureConditions = []) {\r\n let activeFeatureParts = [];\r\n if (fromFeature && fromFeature.partNumber) {\r\n const name1 = fromFeature.getSplittedFeatureName();\r\n // console.log(\"name1\", name1);\r\n let arrayOfConditions = activeFeatureConditions.length\r\n ? activeFeatureConditions\r\n : this.getActiveFeatureConditions(fromFeature);\r\n\r\n const cabinetParent = this.getParent();\r\n const applianceParent = cabinetParent.layout.parts[Appliance.id];\r\n\r\n //part 1 will be with MountType\r\n // part 2 dishwasher - depends on dishwasher metaData Width\r\n //part 3 depends on stove metaData Width // on Room Layout 6 we have Range + Stovetop, not Stove\r\n // part 4 - fridge\r\n // part 5 - peninsula\r\n\r\n let withStoveConditions = [...arrayOfConditions];\r\n if (applianceParent && applianceParent.layout.type === 6) {\r\n const rangeIsActive = applianceParent && applianceParent.range && !applianceParent.range.disabled && applianceParent.range.activeFeature;\r\n withStoveConditions.push({\r\n propName: \"Stovetop\",\r\n propValue: rangeIsActive ? METADATA.NO : \"ST\",\r\n });\r\n if (rangeIsActive && applianceParent.range.activeFeature.metaData[\"Width\"]) {\r\n withStoveConditions.push({\r\n propName: \"Width\",\r\n propValue: applianceParent.range.activeFeature.metaData[\"Width\"],\r\n })\r\n }\r\n } else {\r\n withStoveConditions.push({\r\n propName: \"Width\",\r\n propValue: applianceParent && applianceParent.stove && applianceParent.stove.activeFeature\r\n && applianceParent.stove.activeFeature.metaData[\"Width\"]\r\n ? applianceParent.stove.activeFeature.metaData[\"Width\"]\r\n : \"30\",\r\n })\r\n }\r\n const withDishWasherConditions = [...arrayOfConditions, {\r\n propName: \"Width\",\r\n propValue: applianceParent && applianceParent.dishwasher && applianceParent.dishwasher.activeFeature\r\n && applianceParent.dishwasher.activeFeature.metaData[\"Width\"]\r\n ? applianceParent.dishwasher.activeFeature.metaData[\"Width\"]\r\n : \"24\",\r\n }];\r\n const withFridgeConditions = [...arrayOfConditions, {\r\n propName: \"Width\",\r\n propValue: applianceParent && applianceParent.fridge && applianceParent.fridge.activeFeature\r\n && applianceParent.fridge.activeFeature.metaData[\"Width\"]\r\n ? applianceParent.fridge.activeFeature.metaData[\"Width\"]\r\n : \"36\",\r\n }];\r\n activeFeatureParts = this.featuresParts.filter((feature) => {\r\n if (name1 !== feature.getSplittedFeatureName()) {\r\n return false\r\n }\r\n if (feature.metaData[\"Part\"] && feature.metaData[\"Part\"].includes(\"2\")) {\r\n return feature.matchesMetaForArrayOfConditions(withDishWasherConditions)\r\n }\r\n if (feature.metaData[\"Part\"] && feature.metaData[\"Part\"].includes(\"3\")) {\r\n return feature.matchesMetaForArrayOfConditions(withStoveConditions)\r\n }\r\n if (feature.metaData[\"Part\"] && feature.metaData[\"Part\"].includes(\"4\")) {\r\n return feature.matchesMetaForArrayOfConditions(withFridgeConditions)\r\n }\r\n if (feature.metaData[\"Part\"] && feature.metaData[\"Part\"].includes(\"5\")) {\r\n if (!applianceParent || !applianceParent.oven || applianceParent.oven.disabled || !applianceParent.oven.activeFeature) {\r\n return false\r\n }\r\n }\r\n return feature.matchesMetaForArrayOfConditions(arrayOfConditions)\r\n });\r\n\r\n // console.log(\"this.featuresParts\", this.featuresParts);\r\n // console.log(\"activeFeatureParts\", activeFeatureParts);\r\n activeFeatureParts.forEach((activeFeaturePart) => {\r\n activeFeaturePart.disabled = this.disabled\r\n });\r\n }\r\n return activeFeatureParts\r\n }\r\n}\r\n","import React, {Fragment} from \"react\";\r\nimport {View, Text, Image} from \"@react-pdf/renderer\";\r\nimport PropTypes from \"prop-types\";\r\n\r\nimport {wizardGroupInterface} from \"../../../interfaces/wizardItemInterface\";\r\nimport {getCartItemName} from \"./printDocumentFunctions\";\r\n\r\nconst PrintDocumentBodyWizardItem = (props) => {\r\n\r\n const {styles, wizardGroup, selectedFeature, fabricatorData, printContext, locale, cartItemsThumbnails} = props;\r\n\r\n const baseInfo = (\r\n
\r\n \r\n
\r\n {showLockedView\r\n ? this.navWrapper = node}>\r\n
\r\n {this.state.contextMenuOpen\r\n ? \r\n
\r\n {this.navigationMenuButtons(availableNavButtons)}\r\n {useWizard ? null : (\r\n \r\n {this.content(useWizard, wizardGroups, useFilters, activePart, activeSubPart)}\r\n
\r\n \r\n \r\n
\r\n )}\r\n {/**/}\r\n {/*
*/}\r\n */}\r\n {/**/}\r\n {/*
*/}\r\n {/*- \r\n {subParts.map((dni, dniIndex) => {\r\n // if (name === \"Island Countertop\") {\r\n // name = \"Countertop\"\r\n // }\r\n return (\r\n
- onSubPartHover(dni)}\r\n key={dni.text}\r\n data-index={dniIndex}\r\n data-text={dni.text}\r\n onClick={() => onSubPartClick(dni)}>\r\n {getFeatureGroupName(dni.part, this.props.intl, this.props.fabricatorData)}\r\n \r\n )\r\n })}\r\n
\r\n
\r\n );\r\n }\r\n\r\n}\r\n\r\nconst mapStateToProps = (store) => {\r\n const {navigationCount} = store.lookState;\r\n return {\r\n activeNavigationFilter: store.navigationState.activeNavigationFilter,\r\n selectedFilters: store.filterState.selectedFilters,\r\n activeTheme: store.serverState.activeTheme,\r\n fabricatorData: store.fabricatorState,\r\n navigationCount, // update when newLayout features received\r\n };\r\n};\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n showFiltersIfHidden: () => dispatch(actions.showFiltersIfHidden('sidebar'))\r\n };\r\n};\r\n\r\nexport default injectIntl(\r\n connect(mapStateToProps, mapDispatchToProps)(SidebarClass)\r\n);\r\n","import React, {PureComponent} from 'react';\r\nimport {connect} from 'react-redux';\r\nimport PropTypes from 'prop-types';\r\nimport $ from 'jquery';\r\nimport {FormattedMessage, injectIntl} from \"react-intl\";\r\n\r\nimport OnScreenKeyboard from '../../../common/OnScreenKeyboard/keyboard';\r\nimport { browserIsSafari } from '../../../../misc/helpers';\r\nimport Analytics from './../../../../analytics';\r\n\r\nclass FiltersSearch extends PureComponent {\r\n static propTypes = {\r\n searchText: PropTypes.string.isRequired,\r\n handleSearchInputChange: PropTypes.func.isRequired,\r\n };\r\n\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n searchVisible: false,\r\n };\r\n }\r\n\r\n handleToggleSearch = () => {\r\n Analytics.sendClickEvent('filter-search-' + (this.state.searchVisible ? 'hide' : 'show'));\r\n this.setState({searchVisible: !this.state.searchVisible}, () => this.state.searchVisible && $(this.searchInputNode).focus());\r\n };\r\n\r\n handleInputSearchFocus = () => {\r\n if (this.props.windowWidth < 991 && browserIsSafari()) { // scroll to the top of the window on mobile (Safari workarounds)\r\n window.scrollTo(0, 0);\r\n setTimeout(() => {\r\n window.scrollTo(0, 0);\r\n }, 0);\r\n setTimeout(() => {\r\n window.scrollTo(0, 0);\r\n }, 300)\r\n }\r\n };\r\n\r\n render() {\r\n const {intl} = this.props;\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n 12 ? \" search-input--with-close\" : \"\")\r\n }\r\n value={searchText}\r\n onChange={handleSearchInputChange}\r\n placeholder={intl.formatMessage({id: \"mobileMenu.searchPlaceholder\"})}\r\n id=\"main-search\" />\r\n {searchText ?
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n {this.getSideBarContent()}\r\n this.handleToggleSearch()}>\r\n \r\n e.stopPropagation()}>\r\n this.searchInputNode = node}\r\n className=\"filters-header-input-search\"\r\n placeholder={intl.formatMessage({id: \"filterSelection.searchPlaceholder\"})}\r\n value={this.props.searchText}\r\n onFocus={this.handleInputSearchFocus}\r\n onChange={this.props.handleSearchInputChange}\r\n onClick={(e) => e.stopPropagation()}\r\n id=\"filter-search\"\r\n />\r\n this.props.handleSearchInputChange({target: {value: v}})}\r\n type=\"text\"\r\n prependTo=\".filters-container\"\r\n top=\"40px\"\r\n left=\"10px\"\r\n />\r\n
\r\n {key}
\r\n );\r\n case KeyType.Types.RIGHT_PANEL:\r\n return ({key}
);\r\n default: {\r\n let img = null;\r\n if (this.props.image) {\r\n img = ({this.props.keyValue2}
{key}
{img}\r\n- \r\n {this.level1Items()}\r\n
\r\n
\r\n \r\n {activePart\r\n ?
\r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = (store) => {\r\n return {\r\n fabricatorData: store.fabricatorState,\r\n filterGroups: store.filterState.filterGroups,\r\n filtersVisible: store.filterState.showFilters,\r\n selectedFilters: store.filterState.selectedFilters,\r\n navigationViewType: store.navigationState.navigationViewType,\r\n activeNavigationFilter: store.navigationState.activeNavigationFilter,\r\n countertopNavigationFilterCompleted: store.navigationState.countertopNavigationFilterCompleted,\r\n navigationLoadingActive: store.navigationState.navigationLoadingActive,\r\n activeTheme: store.serverState.activeTheme,\r\n };\r\n};\r\nconst mapDispatchToProps = () => {\r\n return {};\r\n};\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(BodyClass);\r\n","import React, {Component} from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport {FormattedMessage} from \"react-intl\";\r\n\r\nimport Analytics from \"../../../../analytics\";\r\n\r\nexport default class BodyPanelCheckbox extends Component {\r\n\r\n static propTypes = {\r\n activeSubPart: PropTypes.object.isRequired,\r\n toggleApplyWallsCheckbox: PropTypes.func.isRequired,\r\n };\r\n\r\n allWallsClick = () => {\r\n Analytics.sendClickEvent('all-walls-toggled');\r\n this.props.toggleApplyWallsCheckbox();\r\n setTimeout(() => {\r\n this.forceUpdate();\r\n }, 0)\r\n };\r\n\r\n render() {\r\n return (\r\n \r\n )\r\n }\r\n}\r\n","import React, {Component} from 'react';\r\nimport {connect} from 'react-redux';\r\nimport {FormattedMessage, injectIntl} from \"react-intl\";\r\nimport PropTypes from 'prop-types';\r\n\r\nclass BodyPanelWizardSteps extends Component {\r\n\r\n static propTypes = {\r\n availableSteps: PropTypes.array,\r\n featureWizardStep: PropTypes.number,\r\n setFeatureWizardStep: PropTypes.func,\r\n exitFeatureWizard: PropTypes.func,\r\n enableFeatureWizard: PropTypes.func,\r\n toggleWizardFilterSelection: PropTypes.func,\r\n getFilterDisplayName: PropTypes.func.isRequired,\r\n showFeatureWizard: PropTypes.bool,\r\n activeSubPart: PropTypes.object,\r\n };\r\n\r\n setFeatureWizardStep = (nextStep) => {\r\n switch (nextStep) {\r\n case \"back\":\r\n nextStep = this.props.featureWizardStep === 0 ? 0 : this.props.featureWizardStep - 1;\r\n break;\r\n case \"next\":\r\n if (this.props.featureWizardStep === (this.props.availableSteps.length - 1)) {\r\n this.props.exitFeatureWizard(this.state.availableSteps, this.props.featureWizardStep);\r\n } else {\r\n nextStep = this.props.featureWizardStep + 1;\r\n }\r\n break;\r\n default:\r\n break;\r\n }\r\n const currentStep = this.props.availableSteps[nextStep - 1];\r\n const fabricatorSettings = this.props.fabricatorSettings;\r\n const allStepsCompleted = this.props.availableSteps.filter(step => !step.hidden).every(step => step.selectedValueId);\r\n if ((nextStep > this.props.featureWizardStep) && currentStep && !allStepsCompleted\r\n && (!currentStep.selectedValueId || (fabricatorSettings.leadCapture && currentStep.selectedItemIsLocked && !this.props.isPhoneNumberValidated))) {\r\n return\r\n }\r\n if (this.props.showFeatureWizard) {\r\n this.props.setFeatureWizardStep(nextStep);\r\n if (nextStep === 0) {\r\n this.props.toggleWizardFilterSelection(false);\r\n }\r\n } else {\r\n this.props.enableFeatureWizard(nextStep);\r\n }\r\n };\r\n\r\n render() {\r\n const fabricatorSettings = this.props.fabricatorSettings;\r\n const availableSteps = this.props.availableSteps.filter(step => !step.hidden);\r\n const allStepsCompleted = availableSteps.every(step => step.selectedValueId);\r\n\r\n const activeSubPart = this.props.activeSubPart;\r\n const itemIsSelected = (!fabricatorSettings.leadCapture\r\n || (activeSubPart.activeFeature && !activeSubPart.activeFeature.partName.includes(\"WizardPlaceholder\")\r\n && activeSubPart.firstClick[this.props.activeQuoteIndex] && activeSubPart.placeholderChanged));\r\n\r\n return (\r\n \r\n
\r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = (store) => ({\r\n filterGroups: store.filterState.filterGroups,\r\n fabricatorSettings: store.fabricatorState.settings,\r\n activeQuoteIndex: store.quotesState.activeQuoteIndex,\r\n});\r\n\r\nconst mapDispatchToProps = () => ({});\r\n\r\nexport default injectIntl(\r\n connect(mapStateToProps, mapDispatchToProps)(BodyPanelWizardSteps)\r\n);\r\n","import React, {Component} from 'react';\r\nimport {connect} from 'react-redux';\r\nimport {FormattedMessage} from \"react-intl\";\r\nimport PropTypes from 'prop-types';\r\n\r\nimport {\r\n setActiveNavigationFilter,\r\n setActiveNavigationFilterStepIndex,\r\n setNavigationViewType\r\n} from \"../../../../actions/navigationFunctions\";\r\nimport {CABINET_WIZARD_BUTTONS, COUNTERTOP_WIZARD_BUTTONS} from \"../../../kvComponent/core/constants\";\r\nimport {setSelectedFilters} from \"../../../../actions/actionFunctions\";\r\n\r\nclass BodyPanelNavigationFiltersSteps extends Component {\r\n\r\n static propTypes = {\r\n activePart: PropTypes.object.isRequired,\r\n };\r\n\r\n setNavigationWizardStep = (buttonId, wizardButtonIndex) => {\r\n this.props.setActiveNavigationFilter(buttonId);\r\n this.props.setActiveNavigationFilterStepIndex(wizardButtonIndex);\r\n if (buttonId === COUNTERTOP_WIZARD_BUTTONS[2].buttonId) {\r\n this.props.setNavigationViewType(2)\r\n } else if (this.props.navigationViewType !== 3) {\r\n this.props.setNavigationViewType(3)\r\n }\r\n if (buttonId !== COUNTERTOP_WIZARD_BUTTONS[2].buttonId) {\r\n this.props.setSelectedFilters([]); // reset filters on stones & color step\r\n }\r\n };\r\n\r\n getAvailableSteps = () => {\r\n let wizardButtons = [];\r\n switch (this.props.activePart.partId) {\r\n case \"top_cabinet\":\r\n case \"bottom_cabinet\":\r\n wizardButtons = CABINET_WIZARD_BUTTONS.filter(wizardButton => wizardButton.buttonId !== \"inlay_type\");\r\n break;\r\n case \"countertop\":\r\n case \"edge_profile\":\r\n case \"backsplash\":\r\n wizardButtons = COUNTERTOP_WIZARD_BUTTONS;\r\n break;\r\n case \"center_island_countertop\":\r\n case \"center_island_edge\":\r\n wizardButtons = COUNTERTOP_WIZARD_BUTTONS.slice(0, 4);\r\n break;\r\n default:\r\n break;\r\n }\r\n return wizardButtons.map((wizardButton, wizardButtonIndex) => {\r\n wizardButton.onClick = () => this.setNavigationWizardStep(wizardButton.buttonId, wizardButtonIndex);\r\n return wizardButton\r\n })\r\n };\r\n\r\n render() {\r\n const countertopWizardPartIds = [\"countertop\", \"center_island_countertop\", \"edge_profile\", \"center_island_edge\", \"backsplash\"];\r\n let allowIcons = true;\r\n if (this.props.activePart.partId === \"backsplash\" && this.props.windowWidth < 1400) {\r\n allowIcons = false\r\n }\r\n\r\n return (\r\n - \r\n
- this.props.exitFeatureWizard(availableSteps, this.props.featureWizardStep)}>\r\n {/**/}\r\n \r\n
\r\n \r\n \r\n {availableSteps.map((wizardButton, index) => {\r\n const prevStep = availableSteps[index - 1];\r\n const disabled = this.props.showFeatureWizard\r\n ? (index && !allStepsCompleted && (!prevStep.selectedValueId\r\n || (fabricatorSettings.leadCapture && prevStep.selectedItemIsLocked && !this.props.isPhoneNumberValidated)))\r\n : (index && !itemIsSelected && !availableSteps[index - 1].selectedValueId);\r\n return (\r\n - this.setFeatureWizardStep(index)}>\r\n \r\n \r\n {this.props.getFilterDisplayName(wizardButton.filterName, this.props.intl)}\r\n \r\n \r\n )\r\n })}\r\n
\r\n
\r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = (store) => ({\r\n // fabricatorSettings: store.fabricatorState.settings,\r\n windowWidth: store.serverState.windowWidth,\r\n activeNavigationFilter: store.navigationState.activeNavigationFilter,\r\n activeNavigationFilterStepIndex: store.navigationState.activeNavigationFilterStepIndex,\r\n moduleContextMenuModule: store.navigationState.moduleContextMenuModule,\r\n moduleContextMenuModulePart: store.navigationState.moduleContextMenuModulePart,\r\n navigationViewType: store.navigationState.navigationViewType,\r\n});\r\n\r\nconst mapDispatchToProps = {\r\n setActiveNavigationFilter,\r\n setActiveNavigationFilterStepIndex,\r\n setNavigationViewType,\r\n setSelectedFilters\r\n};\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(BodyPanelNavigationFiltersSteps);\r\n","import React, {useEffect, useRef, useState} from \"react\";\r\nimport {FormattedMessage} from \"react-intl\";\r\nimport PropTypes from \"prop-types\";\r\nimport {connect} from \"react-redux\";\r\n\r\nimport Switch from '@mui/material/Switch';\r\nimport FormControlLabel from '@mui/material/FormControlLabel';\r\nimport Popper from \"@mui/material/Popper\";\r\nimport Grow from \"@mui/material/Grow\";\r\n\r\nimport {useIsMounted} from \"../../../../misc/helperHooks\";\r\nimport {featureInterface} from \"../../../../interfaces/featureInterface\";\r\nimport {IS_PRODUCT_JOURNEY} from \"../../../../config\";\r\n\r\n\r\nlet timeoutId = null;\r\n\r\nconst LookAllWallsRadioButtonSmall = (props) => {\r\n\r\n const {allWallsCheckboxClick, translateId, checked, viewType, lookActiveCategory, showTutorialToolTip, isMobile,\r\n lookFeature} = props;\r\n\r\n const [showTooltip, setShowTooltip] = useState(false);\r\n const anchorRef = useRef(null);\r\n const isMounted = useIsMounted();\r\n\r\n useEffect(() => {\r\n return () => clearTimeout(timeoutId);\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (showTutorialToolTip) {\r\n timeoutId = setTimeout(() => {\r\n if (isMounted()) {\r\n setShowTooltip(true);\r\n }\r\n }, 0);\r\n }\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [isMounted, showTutorialToolTip]);\r\n\r\n const buttonClick = () => {\r\n setShowTooltip(true);\r\n clearTimeout(timeoutId);\r\n allWallsCheckboxClick();\r\n timeoutId = setTimeout(() => {\r\n if (isMounted()) {\r\n setShowTooltip(false);\r\n }\r\n }, 2000);\r\n }\r\n\r\n const placement = viewType !== 1 || showTutorialToolTip\r\n ? isMobile && IS_PRODUCT_JOURNEY ? \"left\" : \"right\"\r\n : \"bottom\";\r\n\r\n const getToolTipTranslate = () => {\r\n if (!showTutorialToolTip) {\r\n return translateId\r\n }\r\n switch (lookFeature ? lookFeature.partId : lookActiveCategory) {\r\n case \"countertop\":\r\n case \"center_island_countertop\":\r\n case \"vanity_countertop\":\r\n return \"look.allWallsOverlay.countertop.text\"\r\n case \"backsplash\":\r\n case \"vanity_backsplash\":\r\n return \"look.allWallsOverlay.backsplash.text\"\r\n case \"top_cabinet\":\r\n case \"bottom_cabinet\":\r\n case \"center_island_cabinet\":\r\n case \"fridge_enclosure\":\r\n return \"look.allWallsOverlay.cabinet.text\"\r\n case \"edge\":\r\n case \"edge_profile\":\r\n case \"center_island_edge\":\r\n return \"look.allWallsOverlay.edge.text\"\r\n default:\r\n return \"look.allWallsOverlay.text\"\r\n }\r\n }\r\n\r\n return (\r\n - \r\n {this.getAvailableSteps().map((wizardButton, index) => {\r\n const disabled = false;\r\n const buttonIcon = countertopWizardPartIds.includes(this.props.activePart.partId)\r\n && wizardButton.buttonId === \"all_products\" ? \"stones\" : wizardButton.buttonId;\r\n return (\r\n
- {} : wizardButton.onClick}>\r\n {(buttonIcon !== CABINET_WIZARD_BUTTONS[0].buttonId) && allowIcons ? (\r\n \r\n ) : null}\r\n \r\n
\r\n \r\n \r\n )\r\n })}\r\n
\r\n \r\n {({ TransitionProps }) => (\r\n \r\n \r\n
\r\n )\r\n};\r\n\r\nLookAllWallsRadioButtonSmall.propTypes = {\r\n translateId: PropTypes.string,\r\n checked: PropTypes.bool.isRequired,\r\n allWallsCheckboxClick: PropTypes.func.isRequired,\r\n viewType: PropTypes.number,\r\n showTutorialToolTip: PropTypes.bool,\r\n lookFeature: PropTypes.shape(featureInterface),\r\n}\r\n\r\nconst mapStateToProps = (store) => {\r\n const {lookActiveCategory} = store.lookState;\r\n const {isMobile} = store.serverState;\r\n return {\r\n lookActiveCategory,\r\n isMobile,\r\n };\r\n};\r\n\r\nexport default (\r\n connect(mapStateToProps)(LookAllWallsRadioButtonSmall)\r\n)\r\n","import React, {Fragment} from 'react';\r\nimport {connect} from 'react-redux';\r\nimport {Grid} from 'react-virtualized';\r\nimport PropTypes from 'prop-types';\r\nimport $ from \"jquery\";\r\n\r\nimport NavigationItemsList from \"../navigationItemsList\";\r\nimport DesignNavigationItem from \"../../../visComponents/designNavigationItem\";\r\nimport {UserPopupTypes} from \"../../constants\";\r\nimport {getActivePartsCounts} from \"../navUtils\";\r\nimport {\r\n changeActivePartRelatedItemIndex, setCameFromPage, setQtActiveCategory, toggleBathroomVisualizerOpen,\r\n toggleSelectionFeatureInfo, toggleSelectionWindow\r\n} from \"../../../../actions/actionFunctions\";\r\n\r\nimport BodySwipable from \"./bodySwipable\";\r\nimport LoadingSpinner from \"../../../ui/loadingSpinner\";\r\nimport {checkIfNeedToReceiveFeaturesIfFiltersApplied} from \"../../../../misc/filtersFunctions\";\r\n\r\nclass BodyItemsClass extends NavigationItemsList {\r\n\r\n static propTypes = {\r\n features: PropTypes.arrayOf(PropTypes.instanceOf(DesignNavigationItem)),\r\n parentItem: PropTypes.instanceOf(DesignNavigationItem),\r\n childItem: PropTypes.instanceOf(DesignNavigationItem),\r\n onItemClick: PropTypes.func,\r\n showMenu: PropTypes.bool,\r\n existInQtCategory: PropTypes.bool,\r\n toggleUserPopup: PropTypes.func,\r\n activeFeature: PropTypes.object,\r\n searchText: PropTypes.string,\r\n layoutName: PropTypes.string,\r\n parentUpdate: PropTypes.func\r\n };\r\n\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n showPlaceHolders: document.bvConfig ? document.bvConfig.showPlaceholders : false,\r\n reorderedFeatures: [],\r\n showLoader: false,\r\n childItemText: \"\",\r\n parentItemText: \"\",\r\n additionalFeaturesLoading: false\r\n };\r\n }\r\n\r\n componentDidMount() {\r\n this.reorderItems(this.props);\r\n const childItem = this.props.childItem && this.props.childItem.part;\r\n if (childItem && childItem.partId.includes(\"countertop\") && this.props.selectedFilters.length && !this.props.activeNavigationFilter) {\r\n const checkPassed = checkIfNeedToReceiveFeaturesIfFiltersApplied(this.props.selectedFilters, childItem);\r\n if (checkPassed) {\r\n this.getFeaturesFromBackendWithFilters(childItem, checkPassed.arrayOfNeededFiltersToReceive, 1);\r\n }\r\n }\r\n }\r\n\r\n componentWillReceiveProps(nextProps) {\r\n if (\r\n (nextProps.childItem && (nextProps.childItem.text !== this.state.childItemText))\r\n || (nextProps.showMenu && !this.props.showMenu)\r\n || (!nextProps.childItem && nextProps.parentItem && (nextProps.parentItem.text !== this.state.parentItemText))\r\n || (this.props.selectedFilters.length !== nextProps.selectedFilters.length)\r\n || (this.props.searchText !== nextProps.searchText)\r\n || (nextProps.allFeaturesReceived && !this.props.allFeaturesReceived)\r\n || (nextProps.bvOpened && !this.props.bvOpened)\r\n || (this.props.features.length && nextProps.features.length && nextProps.features[0] && this.props.features[0]\r\n && nextProps.features[0].part.getParent && this.props.features[0].part.getParent\r\n && nextProps.features[0].part.getParent().partName !== this.props.features[0].part.getParent().partName)\r\n ) {\r\n this.setState({\r\n showLoader: true\r\n }, () => {\r\n this.reorderItems(nextProps);\r\n });\r\n }\r\n if (!nextProps.filtersVisible && this.props.filtersVisible) {\r\n setTimeout(() => {\r\n this.forceUpdate()\r\n }, 200);\r\n }\r\n if (this.needToUpdate && nextProps.features.length !== this.props.features.length) {\r\n this.reorderItems(nextProps);\r\n }\r\n if (nextProps.childItem && nextProps.selectedFilters.length) {\r\n const checkPassed = checkIfNeedToReceiveFeaturesIfFiltersApplied(nextProps.selectedFilters, nextProps.childItem.part);\r\n if (checkPassed) {\r\n this.setState({\r\n additionalFeaturesLoading: true\r\n })\r\n this.getFeaturesFromBackendWithFilters(nextProps.childItem.part, checkPassed.arrayOfNeededFiltersToReceive, 1);\r\n }\r\n }\r\n }\r\n\r\n reorderItems = (props) => {\r\n const selectedFirstItemIndex = this.getActiveItemIndex(props);\r\n const otherSelectedWallsIndexes = this.getSelectedWallIndexes(props.childItem, props.features, selectedFirstItemIndex); // this part is looking for the same stones that are already selected\r\n\r\n const selectedExist = (selectedFirstItemIndex || selectedFirstItemIndex === 0) && selectedFirstItemIndex > -1;\r\n const indexesToReplace = selectedExist ? [selectedFirstItemIndex, ...otherSelectedWallsIndexes] : [...otherSelectedWallsIndexes];\r\n\r\n // console.log('indexesToReplace', indexesToReplace);\r\n\r\n this.setState({\r\n childItemText: props.childItem ? props.childItem.text : \"\",\r\n parentItemText: props.parentItem ? props.parentItem.text : \"\",\r\n reorderedFeatures: this.getReorderedItems(indexesToReplace, props, selectedExist)\r\n }, () => {\r\n this.setState({\r\n showLoader: false\r\n });\r\n if (this.needToUpdate) {\r\n const $gridBody = $(\".categories-list .ReactVirtualized__Grid\");\r\n $gridBody.scrollLeft(this.needToUpdate);\r\n this.needToUpdate = false;\r\n }\r\n });\r\n };\r\n\r\n handleUserLoginClick = (userPopupType = UserPopupTypes.Unlock) => {\r\n const fabricatorSettings = this.props.fabricatorData.settings;\r\n\r\n if (this.props.userIsLoggedIn) {\r\n if (fabricatorSettings.twoFA) {\r\n if (!this.props.isPhoneNumberValidated) {\r\n this.props.toggleUserPopup({\r\n userPopupOpened: true,\r\n userPopupType\r\n });\r\n } else {\r\n this.toggleMobileButton('userLogoutActive');\r\n }\r\n } else {\r\n this.toggleMobileButton('userLogoutActive');\r\n }\r\n } else {\r\n this.props.toggleUserPopup({\r\n userPopupOpened: true,\r\n userPopupType\r\n });\r\n if (userPopupType === UserPopupTypes.GetQuote) {\r\n window.allowClickLeadCapturePopup = false;\r\n }\r\n }\r\n };\r\n\r\n toggleMobileButton = (activeFeature) => {\r\n this.setState({\r\n [activeFeature]: !this.state[activeFeature]\r\n })\r\n };\r\n\r\n renderVirtualizedGrid = () => {\r\n\r\n const elements = this.getNavItemsList();\r\n const menuBody = document.querySelector(\".categories-list\");\r\n const navigationViewType = this.props.navigationViewType === 3 ? 2 : 1; // 2\r\n const columnsCount = Math.ceil(elements.length / navigationViewType); // for ex. 28/3 = 10 columns\r\n\r\n const list = [[]]; // making list for React Virtualized\r\n if (navigationViewType === 2) {\r\n list.push([]);\r\n elements.forEach((element, index) => {\r\n let rowIndex = (index % navigationViewType === 0) ? 0 : 1;\r\n list[rowIndex].push(React.cloneElement(element))\r\n });\r\n } else {\r\n elements.forEach((element) => list[0].push(React.cloneElement(element)));\r\n }\r\n\r\n // console.log('list', list);\r\n\r\n return menuBody ? (\r\n \r\n \r\n \r\n : \r\n
\r\n \r\n )}\r\n \r\n {list[rowIndex][columnIndex]}\r\n
\r\n }}>\r\n \r\n \r\n
\r\n );\r\n }\r\n }\r\n elements.push(\r\n \r\n {this.state.showLoader\r\n ? \r\n {this.state.additionalFeaturesLoading || this.props.navigationLoadingActive ? this.getLoadingFeatures() : null}\r\n {this.renderVirtualizedGrid()}\r\n \r\n )\r\n : this.renderLoadingList(activeSubPart || activePart)\r\n }\r\n
\r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = (store) => {\r\n const {isPhoneNumberValidated, userIsLoggedIn} = store.userState;\r\n return {\r\n isPhoneNumberValidated,\r\n userIsLoggedIn,\r\n bvOpened: store.bathroomVisualizerState.bvOpened,\r\n filtersVisible: store.filterState.showFilters,\r\n selectedFilters: store.filterState.selectedFilters,\r\n filterGroups: store.filterState.filterGroups,\r\n fabricatorData: store.fabricatorState,\r\n cartItems: store.cartState.cartItems,\r\n navigationViewType: store.navigationState.navigationViewType,\r\n activeNavigationFilter: store.navigationState.activeNavigationFilter,\r\n navigationLoadingActive: store.navigationState.navigationLoadingActive,\r\n activeQuoteIndex: store.quotesState.activeQuoteIndex,\r\n windowWidth: store.serverState.windowWidth, // re-render grid on resize\r\n }\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n changeActivePartRelatedItemIndex,\r\n toggleSelectionWindow,\r\n toggleSelectionFeatureInfo,\r\n setCameFromPage,\r\n setQtActiveCategory,\r\n toggleBathroomVisualizerOpen\r\n};\r\n\r\nconst BodyItems = connect(mapStateToProps, mapDispatchToProps)(BodyItemsClass);\r\n\r\n\r\nexport default BodyItems;\r\n","import React from 'react';\r\nimport {FormattedMessage, injectIntl} from \"react-intl\";\r\nimport classNames from 'classnames';\r\n\r\nimport {s3FeatureImagePath, THUMBNAIL_SIZES} from \"../../../misc/utils\";\r\nimport Analytics from \"../../../analytics\";\r\nimport {UserPopupTypes} from \"../constants\";\r\nimport {getFeatureIsLocked, toFixedFeatureCost} from '../../../misc/helpers';\r\nimport FeatureName from \"../featureName\";\r\nimport {isFeatureEnabled} from \"../../../misc/displayLogic\";\r\nimport {getPriceWithIncluded} from \"../../../misc/priceFunctions\";\r\n\r\nconst navigationItem = (props) => {\r\n\r\n if (!props.currentFeature) {\r\n return props.isMobile\r\n ? \r\n : \r\n }\r\n\r\n const { fabricatorData, isPhoneNumberValidated, currentFeatureCartItemsCount } = props;\r\n\r\n const currentFeature = props.currentFeature.part;\r\n\r\n let styles = {};\r\n if (currentFeature.dbFeature.thumbnailUrl) {\r\n const size = props.isMobile\r\n ? THUMBNAIL_SIZES.small\r\n : props.largeThumbnail ? null : THUMBNAIL_SIZES.medium\r\n styles.backgroundImage = `url('${s3FeatureImagePath(currentFeature.dbFeature.thumbnailUrl, size)}')`;\r\n } else if (props.currentFeature && currentFeature.customThumbnail) {\r\n styles.backgroundImage = `url('${currentFeature.customThumbnail}')`;\r\n }\r\n\r\n const featureIsEnabledForQt = isFeatureEnabled(currentFeature, \"quotingTool\");\r\n\r\n const fabricatorSettings = fabricatorData.settings;\r\n const allPagesEnabled = !document.kvConfig.visualizerOnly;\r\n\r\n let showPrice = false;\r\n if (fabricatorSettings.showPricing && !fabricatorData.hideCheckoutBreakdownCost && !fabricatorData.hidePricesFromUser) {\r\n if (!featureIsEnabledForQt) {\r\n showPrice = false;\r\n } else if ((fabricatorSettings.leadCapture && !(document.kvConfig.isBackend && document.kvConfig.jobId && document.kvConfig.canSaveQuote)) && !currentFeature.dbFeature.unlocked) {\r\n if (props.isPhoneNumberValidated) {\r\n showPrice = true\r\n }\r\n } else {\r\n showPrice = true\r\n }\r\n }\r\n\r\n const featureIsLocked = getFeatureIsLocked(currentFeature);\r\n\r\n const getQuoteEnabled = fabricatorSettings.enableQuote && !featureIsLocked;\r\n const quoteOrUnlockButtonVisible = featureIsLocked || (getQuoteEnabled && !isPhoneNumberValidated);\r\n\r\n const isAddToCartButtonVisible = props.isActive && allPagesEnabled && fabricatorSettings.showPricing && featureIsEnabledForQt && (\r\n (fabricatorSettings.leadCapture && (currentFeature.dbFeature.unlocked || props.isPhoneNumberValidated))\r\n || !(fabricatorSettings.leadCapture && !(document.kvConfig.isBackend && document.kvConfig.jobId && document.kvConfig.canSaveQuote)))\r\n && props.existInQtCategory && !quoteOrUnlockButtonVisible;\r\n\r\n const price = toFixedFeatureCost(currentFeature, 1);\r\n\r\n return props.isMobile ? (\r\n \r\n \r\n ) : (\r\n \r\n \r\n );\r\n }\r\n\r\n return elements\r\n };\r\n\r\n renderVirtualizedGrid = () => {\r\n\r\n const elements = this.getNavItemsList(true);\r\n\r\n const list = [[]]; // making list for React Virtualized\r\n let columnIndex = 0;\r\n elements.forEach((element, index) => {\r\n if (index % this.props.navigationViewType === 0 && (index !== 0)) {\r\n list.push([]);\r\n columnIndex++;\r\n }\r\n list[columnIndex].push(React.cloneElement(element))\r\n });\r\n // console.log('list', list);\r\n\r\n const menuBody = document.querySelector('.menu-body__content');\r\n const menuList = document.querySelector('.menu-list');\r\n return menuList ? (\r\n {\r\n cellRenderer={({columnIndex, key, rowIndex, style}) => {\r\n // if (isScrolling) {\r\n // return ( \r\n ) : null\r\n };\r\n\r\n render() {\r\n const activePart = this.props.parentItem ? this.props.parentItem.part : null;\r\n const activeSubPart = this.props.childItem ? this.props.childItem.part : null;\r\n const activeNavPart = activeSubPart || activePart;\r\n\r\n const fabricatorSettings = this.props.fabricatorData.settings;\r\n const useWizard = fabricatorSettings &&\r\n (fabricatorSettings.wizardConsumers || (fabricatorSettings.wizardClients && document.kvConfig.isBackend));\r\n\r\n const showNavigationFilters = useWizard && this.props.activeNavigationFilter && activeNavPart\r\n && this.props.activeNavigationFilter !== CABINET_WIZARD_BUTTONS[0].buttonId\r\n && activeNavPart.canUseNavigationFilter && activeNavPart.canUseNavigationFilter();\r\n // const showNavigationFiltersSteps = showNavigationFilters && this.props.activeNavigationFilter !== \"inlay_type\";\r\n\r\n return (\r\n }\r\n * @param layout\r\n */\r\nconst setNotesToFeatures = (notesFeatures = [], layout) => {\r\n const parents = layout.getFeatures(true); // we need other groups too\r\n notesFeatures.forEach((notesFeature) => {\r\n parents.forEach(parent => {\r\n const subParts = parent.subParts();\r\n subParts.forEach(subPart => {\r\n Object.keys(subPart.part.featuresList).forEach(layoutName => {\r\n const featureFound = subPart.part.featuresList[layoutName].find(feature => {\r\n return feature.dbFeature.id === notesFeature.id\r\n })\r\n if (featureFound) {\r\n featureFound.notesList[notesFeature.currentQuote] = notesFeature.noteText;\r\n // console.log(\"featureFound\", featureFound);\r\n }\r\n })\r\n });\r\n })\r\n })\r\n};\r\n\r\n\r\n/**\r\n * checks if we need to do multiple features requests\r\n * @param records {Array<{}>}\r\n * @param fabricatorState {object}\r\n * @param serverState {object}\r\n * @returns boolean\r\n */\r\nconst hasMultipleVisualizers = (records, fabricatorState, serverState) => {\r\n console.log(\"serverState.initialVisualizerType\", serverState.initialVisualizerType);\r\n return fabricatorState.settings.allowVisualizerSwitching\r\n && records.some(room => {\r\n return room.data && room.data.visualizerType && (room.data.visualizerType !== serverState.initialVisualizerType)\r\n })\r\n}\r\n\r\n/**\r\n * when the new customer is created - the system creates a job for him with only one userState property\r\n * @param jobResponse {object}\r\n * @param bvState {object}\r\n * @returns {boolean}\r\n */\r\nexport const isNewlyCreatedJob = (jobResponse, bvState) => {\r\n\r\n if (jobResponse && !bvState) {\r\n if (Array.isArray(jobResponse.records) && jobResponse.records.length) {\r\n const records = jobResponse.records.filter(record => record && record.data);\r\n if (records.length === 1) {\r\n bvState = records[0].data;\r\n }\r\n } else { // whoa, nothing there, so it's probably a brand new job, let's load default preset\r\n return true\r\n }\r\n }\r\n\r\n return bvState && (Object.keys(bvState).length === 1) && bvState.userState\r\n}\r\n\r\n/**\r\n * loads features and notes and also stone pricings\r\n * @param records {Array<{}>}\r\n * @param activeQuoteIndex {number}\r\n * @returns {Promise} loaded features\r\n */\r\nconst loadFeaturesAndNotesForMultipleLayouts = async (records, activeQuoteIndex) => {\r\n let featuresToReturn = [];\r\n\r\n const differentVisualizers = {};\r\n records.forEach((record, recordIndex) => {\r\n if (!differentVisualizers[record.data.visualizerType]) {\r\n differentVisualizers[record.data.visualizerType] = {\r\n arrayOfFeaturesIds: [],\r\n notesFeatures: [],\r\n }\r\n }\r\n const currentObject = differentVisualizers[record.data.visualizerType];\r\n record.features.forEach((feature) => {\r\n if (feature.fabricatorFeature_id) {\r\n if (!currentObject.arrayOfFeaturesIds.includes(feature.fabricatorFeature_id)) {\r\n currentObject.arrayOfFeaturesIds.push(feature.fabricatorFeature_id);\r\n }\r\n if (feature.noteText) {\r\n currentObject.notesFeatures.push({\r\n id: feature.fabricatorFeature_id,\r\n noteText: feature.noteText,\r\n currentQuote: recordIndex\r\n })\r\n }\r\n }\r\n });\r\n currentObject.arrayOfFeaturesIds = uniq([\r\n ...currentObject.arrayOfFeaturesIds, // here we add all cartItems features\r\n ...getArrayOfIdsFromBvState(record.data) // and then we add all active features from the quotes\r\n ]);\r\n });\r\n for (const visualizerType of Object.keys(differentVisualizers)) {\r\n const currentObject = differentVisualizers[visualizerType];\r\n const forLayout = getCurrentLayout(visualizerType);\r\n const featuresFromJob = await getBvFeatures(currentObject.arrayOfFeaturesIds, null, false, visualizerType);\r\n if (featuresFromJob && featuresFromJob.data) {\r\n // console.log(\"featuresFromJob\", featuresFromJob.data);\r\n const nextBvState = records[activeQuoteIndex] ? records[activeQuoteIndex].data : null;\r\n forLayout.loadNewFeatures(featuresFromJob.data, null, true, nextBvState);\r\n if (visualizerType === document.kvConfig.visualizerType) {\r\n featuresToReturn = featuresFromJob.data;\r\n }\r\n }\r\n setNotesToFeatures(currentObject.notesFeatures, forLayout) // here we set notes\r\n\r\n // we also need stone pricing!! to be able to show correct price\r\n if (visualizerType !== document.kvConfig.visualizerType) { // skip current, it was already downloaded\r\n const mainResponse = await JsonApi.getBathroomVisualizerData(30, visualizerType);\r\n console.log(\"mainResponse for stonePricing\", mainResponse);\r\n if (mainResponse && mainResponse.data && mainResponse.data.stonePricing) {\r\n store.dispatch(setStonePricing(mainResponse.data.stonePricing)); // we need to set stone pricing for cart features\r\n }\r\n if (mainResponse && mainResponse.data && (mainResponse.data.wizardData || mainResponse.data.wizardDataV2)) {\r\n const wizardList = getParsedWizardList(mainResponse.data, false, visualizerType);\r\n store.dispatch(setWizardList(wizardList));\r\n }\r\n }\r\n }\r\n\r\n return featuresToReturn\r\n}\r\n\r\nconst getBvStateProperty = (responseData, activeQuoteIndex, property = \"\") => {\r\n if (!responseData.records || !Array.isArray(responseData.records) || !responseData.records.length) {\r\n return null\r\n }\r\n return responseData.records[0].data[property] ||\r\n responseData.records[activeQuoteIndex] && responseData.records[activeQuoteIndex].data\r\n ? responseData.records[activeQuoteIndex].data[property]\r\n : null;\r\n}\r\n\r\nexport const parseJobIdResponse = async (responseData, isDesignOnly = false) => {\r\n const {fabricatorState, serverState} = store.getState();\r\n const layout = getCurrentLayout();\r\n if (Config.isDevMode()) {\r\n console.log(`getJobId ${document.kvConfig.jobId}:`, responseData);\r\n }\r\n let activeQuoteIndex = 0;\r\n if (Array.isArray(responseData.records) && responseData.records.length) {\r\n responseData.records = responseData.records.filter(record => record && record.data);\r\n const firstRecord = responseData.records[0];\r\n if (firstRecord) {\r\n activeQuoteIndex = firstRecord.data.activeQuoteIndex || 0;\r\n let loadedFeaturesFromJob = [];\r\n if (hasMultipleVisualizers(responseData.records, fabricatorState, serverState)) {\r\n loadedFeaturesFromJob = await loadFeaturesAndNotesForMultipleLayouts(responseData.records, activeQuoteIndex);\r\n } else {\r\n let notesFeatures = [];\r\n let arrayOfFeaturesIds = [];\r\n responseData.records.forEach((rec, recIndex) => {\r\n if (Array.isArray(rec.features) && rec.features.length) {\r\n rec.features.forEach((feature) => {\r\n if (feature.fabricatorFeature_id) {\r\n arrayOfFeaturesIds.push(feature.fabricatorFeature_id)\r\n if (feature.noteText) {\r\n notesFeatures.push({\r\n id: feature.fabricatorFeature_id,\r\n noteText: feature.noteText,\r\n currentQuote: recIndex\r\n })\r\n }\r\n }\r\n })\r\n }\r\n });\r\n responseData.records.forEach((rec) => {\r\n arrayOfFeaturesIds = uniq([\r\n ...arrayOfFeaturesIds, // here we add all cartItems features\r\n ...getArrayOfIdsFromBvState(rec.data) // and then we add all active features from the quotes\r\n ])\r\n })\r\n const featuresFromJob = await getBvFeatures(arrayOfFeaturesIds);\r\n if (featuresFromJob && featuresFromJob.data) {\r\n loadedFeaturesFromJob = featuresFromJob.data;\r\n // console.log(\"featuresFromJob\", featuresFromJob.data);\r\n const nextBvState = responseData.records[activeQuoteIndex] ? responseData.records[activeQuoteIndex].data : null;\r\n layout.loadNewFeatures(featuresFromJob.data, null, true, nextBvState);\r\n }\r\n setNotesToFeatures(notesFeatures, layout) // here we set notes\r\n }\r\n\r\n // restore wizard before the cart! to make sure cart is restored with proper display logic items that need wizard selections\r\n const allWizardValues = getBvStateProperty(responseData, activeQuoteIndex, \"allWizardsValues\");\r\n if (allWizardValues) {\r\n await store.dispatch(restoreAllWizardSelectedValues([...allWizardValues]));\r\n delete firstRecord.data.allWizardsValues; // we don't need it anymore, prevent overwriting\r\n if (responseData.records[activeQuoteIndex] && responseData.records[activeQuoteIndex].data && responseData.records[activeQuoteIndex].data.allWizardsValues) {\r\n delete responseData.records[activeQuoteIndex].data.allWizardsValues\r\n }\r\n }\r\n\r\n if (responseData.records[activeQuoteIndex] && responseData.records[activeQuoteIndex].data) { // just in case\r\n const restoreCartFeatures = isDesignOnly ? false : loadedFeaturesFromJob\r\n const nextBvState = responseData.records[activeQuoteIndex].data;\r\n if (isNewlyCreatedJob(null, nextBvState)) {\r\n if (restoreCartFeatures) {\r\n layout.setCartStateAndUserStateFromBvState(nextBvState);\r\n }\r\n } else {\r\n layout.setActiveFeaturesFromObject(\r\n responseData.records[activeQuoteIndex].data,\r\n restoreCartFeatures,\r\n false,\r\n true,\r\n true,\r\n false\r\n ); // here we set bvState! and restore cart!!\r\n }\r\n }\r\n if (firstRecord.imageUrl) {\r\n store.dispatch(setAmazonImageUrl(firstRecord.imageUrl));\r\n }\r\n if (firstRecord.data.id) {\r\n store.dispatch(setFirstLoadedPreset(firstRecord.data.id));\r\n }\r\n }\r\n\r\n let newQuotes = [];\r\n for (const [recordIndex, record] of responseData.records.entries()) {\r\n //1) detect visualizer layout\r\n const visType = getVisualizerTypeFromBvScene(record.data, record);\r\n\r\n record.room = visType; // this might change coming incorrect visualizer!\r\n\r\n let image = \"\";\r\n if (responseData.records.length === 1 || (recordIndex === activeQuoteIndex)) {\r\n image = await getImagePromiseFromLayout(layout, null, 0.7, true);\r\n } else {\r\n let fakeLayout = createFakeLayout(getCurrentLayout(visType));\r\n let bvState = record.data;\r\n if (responseData.records.length === 1 && Object.keys(bvState).length <= 2) { // new created quote\r\n bvState = layout.getActiveFeaturesAsObject(false, false, true);\r\n }\r\n //2) set visualizer layout features\r\n await fakeLayout.setItemsFromBvState(bvState, false, null, true);\r\n //3) create quote image\r\n image = await getImagePromiseFromLayout(fakeLayout, null, 0.7, true);\r\n }\r\n\r\n //4) set quote other info\r\n let quoteObject = await getQuoteInfo(recordIndex, null, false, \"\", image);\r\n\r\n quoteObject.quoteId = record.id;\r\n quoteObject.data = objectWithoutProperties(record.data, [\"installations\", \"cartState\", \"userState\", \"allWizardsValues\"]);\r\n quoteObject.layoutType = record.data.layout_type;\r\n quoteObject.room = record.room;\r\n quoteObject.sqFtCalcData = record.sqFtCalcData;\r\n quoteObject.bvImage = image;\r\n newQuotes.push(quoteObject);\r\n }\r\n\r\n if (newQuotes.length) {\r\n store.dispatch(setQuotes([...newQuotes]));\r\n if (newQuotes[activeQuoteIndex]) {\r\n store.dispatch(setActiveQuoteIndex(activeQuoteIndex));\r\n }\r\n }\r\n }\r\n if (Array.isArray(responseData.discountSections) && responseData.discountSections.length && !isDesignOnly) {\r\n await getDiscounts();\r\n let allDiscountSections = store.getState().priceWorksheetState.discountSections;\r\n // console.log(\"allDiscountSections\", allDiscountSections);\r\n // console.log(\"responseData.discountSections\", responseData.discountSections);\r\n const priceWorkSheetLogic = getBvStateProperty(responseData, activeQuoteIndex, \"priceWorkSheetLogic\");\r\n if (priceWorkSheetLogic) {\r\n if (Array.isArray(priceWorkSheetLogic.customAddedDiscounts) && priceWorkSheetLogic.customAddedDiscounts.length) {\r\n store.dispatch(setCustomAddedDiscounts(priceWorkSheetLogic.customAddedDiscounts));\r\n }\r\n if (priceWorkSheetLogic.financePercentage) {\r\n store.dispatch(setFinancePercentage(priceWorkSheetLogic.financePercentage));\r\n }\r\n if (priceWorkSheetLogic.selectedDiscounts) {\r\n allDiscountSections = allDiscountSections.map((discountSection) => {\r\n discountSection.discounts = discountSection.discounts.map(discount => {\r\n const sameDiscountSaved = priceWorkSheetLogic.selectedDiscounts.find(dis => {\r\n return (discount.uuId === dis.uuId) || (discount.id === dis.id && (discountSection.id === dis.categoryId))\r\n });\r\n if (sameDiscountSaved) {\r\n discount.selected = true;\r\n if (discount.isRidged) {\r\n discount.name = sameDiscountSaved.name;\r\n discount.amount = sameDiscountSaved.amount;\r\n } else if (sameDiscountSaved.discountType === DISCOUNT_MAIN_TYPES.deposit) {\r\n discount.amount = sameDiscountSaved.amount;\r\n discount.type = sameDiscountSaved.type; // if it was percentage - we convert it to price\r\n } else if (sameDiscountSaved.discountType === DISCOUNT_MAIN_TYPES.finance) {\r\n discount.financeOptions = sameDiscountSaved.financeOptions\r\n }\r\n }\r\n return discount\r\n })\r\n return discountSection\r\n })\r\n }\r\n } else {\r\n responseData.discountSections.forEach((selectedDiscountSection) => {\r\n let discountSectionFound = false;\r\n allDiscountSections = allDiscountSections.map((discountSection) => {\r\n if (selectedDiscountSection.id === discountSection.id || selectedDiscountSection.name === discountSection.name) {\r\n selectedDiscountSection.discounts.forEach(selectedDiscount => {\r\n let discountFound = false;\r\n discountSection.discounts.map(discount => {\r\n if (selectedDiscount.id === discount.id\r\n || [\"name\", \"amount\"].every(property => selectedDiscount[property] === discount[property])\r\n || [\"isRidged\", \"mode\", \"order\", \"type\"].every(property => selectedDiscount[property] === discount[property])) {\r\n discount.selected = true;\r\n discountFound = true;\r\n if (discount.isRidged) {\r\n discount.name = selectedDiscount.name;\r\n discount.amount = selectedDiscount.amount;\r\n }\r\n }\r\n return discount\r\n });\r\n if (!discountFound) {\r\n console.log(\"No discount found! Pls call administrator\"); // haha funny. this happens when discounts are changed, and old quotes opened\r\n selectedDiscount.id = Misc.getRandomInt(0, 9999999999);\r\n selectedDiscount.oldDeleted = true;\r\n discountSection.discounts.push(selectedDiscount)\r\n }\r\n })\r\n discountSectionFound = true;\r\n }\r\n return discountSection\r\n });\r\n if (!discountSectionFound) {\r\n selectedDiscountSection.discounts.forEach(disc => {\r\n disc.oldDeleted = true;\r\n })\r\n allDiscountSections.push(selectedDiscountSection)\r\n }\r\n })\r\n }\r\n store.dispatch(setDiscountSections(allDiscountSections));\r\n }\r\n if (responseData.user && responseData.user.values && !isDesignOnly) { // update user state\r\n const savedCountry = responseData.records\r\n && responseData.records[activeQuoteIndex]\r\n && responseData.records[activeQuoteIndex].data\r\n && responseData.records[activeQuoteIndex].data.userState\r\n && responseData.records[activeQuoteIndex].data.userState.userInfo\r\n && responseData.records[activeQuoteIndex].data.userState.userInfo.shipping\r\n && responseData.records[activeQuoteIndex].data.userState.userInfo.shipping.country\r\n ? responseData.records[activeQuoteIndex].data.userState.userInfo.shipping.country\r\n : responseData.user.shippingAddress ? responseData.user.shippingAddress.country : \"\";\r\n const newUserInfo = Misc.parseUserResponse(responseData.user, savedCountry);\r\n if (Config.isDevMode()) {\r\n console.log(\"parseResponse newUserInfo\", newUserInfo);\r\n }\r\n store.dispatch(changeUserInfo(newUserInfo));\r\n store.dispatch(setUserPhoneNumberValidated(true));\r\n if (responseData.user.encodedUserId) {\r\n Analytics.setUserId(responseData.user.encodedUserId);\r\n store.dispatch(toggleUserPopup({\r\n encodedUserId: responseData.user.encodedUserId,\r\n }));\r\n }\r\n }\r\n if (responseData.user && (responseData.user.billingAddress || responseData.user.shippingAddress)) { // update user state\r\n store.dispatch(restorePaymentInfo(Misc.parseShippingAndBillingResponse(responseData.user)));\r\n }\r\n if (responseData.jobMarkUp) {// restore mark up\r\n const globalMarkUp = parseMarkUp(responseData.jobMarkUp);\r\n if (globalMarkUp) {\r\n store.dispatch(setMarkUpLogic(globalMarkUp)) // override cartState, because it was changed in the job board\r\n }\r\n }\r\n}\r\n","import uniqBy from \"lodash/uniqBy\";\r\n\r\nimport {Part} from \"../part\";\r\nimport DesignNavigationItem from \"../../../visComponents/designNavigationItem\";\r\nimport {PartMenuType} from \"../../../visComponents/constants\";\r\nimport {floorThumbnail} from \"../assets\";\r\n\r\nimport {IntermediatePart} from \"../intermediatePart\";\r\n\r\nexport default class Floor extends Part {\r\n static id = 'Floor';\r\n\r\n constructor() {\r\n super(true, false, PartMenuType.Complex);\r\n this.partId = 'kitchen_floor';\r\n this.menuType = PartMenuType.Complex;\r\n this.partName = 'Floor';\r\n this.homePageTitle = 'Flooring';\r\n this.translateId = \"visualizer.kitchen.kitchen_floor\";\r\n this.partThumbnail = floorThumbnail;\r\n }\r\n\r\n load(dbFeature) {\r\n let relatedItemName = \"\",\r\n RelatedItemClass = null;\r\n switch (dbFeature.groupName) {\r\n case \"Floor\":\r\n relatedItemName = \"floorBody\";\r\n RelatedItemClass = FloorBody;\r\n break;\r\n }\r\n if (relatedItemName) {\r\n if (!this[relatedItemName]) {\r\n this[relatedItemName] = new RelatedItemClass(true);\r\n if (relatedItemName !== \"shadows\") {\r\n this.relatedItems.push(this[relatedItemName]);\r\n }\r\n }\r\n if (!this.categoryEnabled) {\r\n this.categoryEnabled = true\r\n }\r\n this[relatedItemName].getParent = () => this;\r\n this[relatedItemName].load(dbFeature);\r\n return true\r\n }\r\n return false\r\n }\r\n\r\n navigationItem() {\r\n return new DesignNavigationItem('Floor', this)\r\n }\r\n}\r\n\r\nclass FloorBody extends IntermediatePart {\r\n\r\n constructor(isChild) {\r\n super(isChild);\r\n this.isStoneFeature = true;\r\n this.partId = 'kitchen_floor';\r\n this.partName = 'Floor';\r\n this.translateId = \"visualizer.kitchen.kitchen_floor\";\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new FloorBody());\r\n }\r\n\r\n navigationSubItems(filters, searchText) {\r\n const navSubItems = this.getFeaturesBySearchText(this.getFilteredFeaturesByFilters(filters), searchText)\r\n .map(_ => new DesignNavigationItem(_.featureName, _)); // 1) filter them by filters 2) filter them by search\r\n return uniqBy(navSubItems, (navItem) => navItem.part.dbFeature.sharedFeatureName)\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n if (zIndexes && this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndexes.Floor;\r\n }\r\n }\r\n}\r\n","import {Part} from \"../part\";\r\nimport {wallsThumbnail} from \"../assets\";\r\nimport {PartMenuType} from \"../../../visComponents/constants\";\r\nimport DesignNavigationItem from \"../../../visComponents/designNavigationItem\";\r\n\r\nimport Baseboard from \"../subparts/globals/baseboard\";\r\n// import CeilingHighlights from \"../subparts/globals/ceilingHighlights\";\r\nimport CeilingLights from \"../subparts/globals/ceilingLights\";\r\nimport GlobalShadow from \"../subparts/globals/globalShadow\";\r\nimport Decor1 from \"../subparts/globals/decor1\";\r\nimport Decor2 from \"../subparts/globals/decor2\";\r\nimport Decor3 from \"../subparts/globals/decor3\";\r\n\r\nexport default class Globals extends Part {\r\n static id = 'Globals';\r\n constructor() {\r\n super(true, false, PartMenuType.Complex);\r\n\r\n this.menuType = PartMenuType.Complex;\r\n this.partName = 'Globals';\r\n this.partThumbnail = wallsThumbnail;\r\n\r\n // related items\r\n this.baseboard = null;\r\n this.ceilingHighlights = null;\r\n this.ceilingLights = null;\r\n this.globalShadow = null;\r\n this.decor1 = null;\r\n this.decor2 = null;\r\n this.decor3 = null;\r\n }\r\n\r\n load(dbFeature) {\r\n let relatedItemName = \"\",\r\n RelatedItemClass = null;\r\n switch (dbFeature.groupName) {\r\n case \"Baseboard\":\r\n relatedItemName = \"baseboard\";\r\n RelatedItemClass = Baseboard;\r\n break;\r\n // case \"Ceiling Highlight\":\r\n // relatedItemName = \"ceilingHighlights\";\r\n // RelatedItemClass = CeilingHighlights;\r\n // break;\r\n case \"Ceiling Lights\":\r\n relatedItemName = \"ceilingLights\";\r\n RelatedItemClass = CeilingLights;\r\n break;\r\n case \"Global Shadow\":\r\n relatedItemName = \"globalShadow\";\r\n RelatedItemClass = GlobalShadow;\r\n break;\r\n case \"Decor\":\r\n if (dbFeature.displayName.includes(\"Part2\")) {\r\n relatedItemName = \"decor2\";\r\n RelatedItemClass = Decor2;\r\n } else if (dbFeature.displayName.includes(\"Island\")) {\r\n relatedItemName = \"decor3\";\r\n RelatedItemClass = Decor3;\r\n } else {\r\n relatedItemName = \"decor1\";\r\n RelatedItemClass = Decor1;\r\n }\r\n break;\r\n }\r\n if (relatedItemName) {\r\n if (!this[relatedItemName]) {\r\n this[relatedItemName] = new RelatedItemClass(true);\r\n this.relatedItems.push(this[relatedItemName]);\r\n }\r\n if (!this.categoryEnabled) {\r\n this.categoryEnabled = true\r\n }\r\n this[relatedItemName].getParent = () => this;\r\n this[relatedItemName].load(dbFeature);\r\n return true\r\n }\r\n return false\r\n }\r\n\r\n navigationItem() {\r\n return new DesignNavigationItem('Globals', this);\r\n }\r\n\r\n isSubTypeWithItems() {\r\n return false;\r\n }\r\n\r\n handleSubPartClick() {\r\n\r\n }\r\n\r\n}","import {IntermediatePart} from \"../../intermediatePart\";\r\n\r\nexport default class Baseboard extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'baseboard';\r\n this.partName = 'Baseboard';\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new Baseboard());\r\n }\r\n\r\n setLayers(layout) {\r\n if (this.activeFeature && (this.activeFeature.matchesMetaForArrayOfConditions(this.getArrayOfConditions())\r\n || (this.activeFeature.notAvailableInVisualizer && this.placeholderFeature))) {\r\n return super.setLayers(layout);\r\n }\r\n\r\n this.setDefault(layout);\r\n return super.setLayers(layout);\r\n }\r\n\r\n getArrayOfConditions() {\r\n return [{\r\n propName: 'RoomLayout',\r\n propValue: this.getParent().layout.getCurrentLayoutAbbreviation()\r\n }];\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n if (zIndexes && this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndexes.Globals.Baseboard;\r\n }\r\n }\r\n}","import {IntermediatePart} from \"../../intermediatePart\";\r\n\r\nexport default class CeilingLights extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'ceiling_lights';\r\n this.partName = 'Ceiling Lights';\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new CeilingLights());\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n if (zIndexes && this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndexes.Globals.CeilingLights;\r\n }\r\n }\r\n}","import {IntermediatePart} from \"../../intermediatePart\";\r\n\r\nexport default class GlobalShadow extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'global_shadow';\r\n this.partName = 'Global Shadow';\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new GlobalShadow());\r\n }\r\n\r\n setLayers(layout) {\r\n if (this.activeFeature && (this.activeFeature.matchesMetaForArrayOfConditions(this.getArrayOfConditions())\r\n || (this.activeFeature.notAvailableInVisualizer && this.placeholderFeature))) {\r\n return super.setLayers(layout);\r\n }\r\n\r\n this.setDefault(layout);\r\n return super.setLayers(layout);\r\n }\r\n\r\n getArrayOfConditions() {\r\n return [{\r\n propName: 'RoomLayout',\r\n propValue: this.getParent().layout.getCurrentLayoutAbbreviation()\r\n }];\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n if (zIndexes && this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndexes.Globals.GlobalShadow;\r\n }\r\n }\r\n}","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport Cabinet from \"../../parts/cabinet\";\r\n\r\nexport default class Decor1 extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'decor_1';\r\n this.partName = 'Decor1';\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new Decor1());\r\n }\r\n\r\n setLayers(layout) {\r\n\r\n const cabinetParent = this.getParent().layout.parts[Cabinet.id];\r\n const bottomCabinet = cabinetParent && cabinetParent.bottomCabinet;\r\n if (bottomCabinet && (bottomCabinet.disabled || !bottomCabinet.featureGroupEnabled)) {\r\n super.hideLayers();\r\n return\r\n }\r\n\r\n if (this.activeFeature && (this.activeFeature.matchesMetaForArrayOfConditions(this.getArrayOfConditions())\r\n || (this.activeFeature.notAvailableInVisualizer && this.placeholderFeature))) {\r\n return super.setLayers(layout);\r\n }\r\n\r\n this.setDefault(layout);\r\n return super.setLayers(layout);\r\n }\r\n\r\n getArrayOfConditions() {\r\n return [{\r\n propName: 'RoomLayout',\r\n propValue: this.getParent().layout.getCurrentLayoutAbbreviation()\r\n }];\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n if (zIndexes && this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndexes.Globals.Decor1;\r\n }\r\n }\r\n}","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport CountertopGroup from \"../../parts/countertopGroup\";\r\nimport Cabinet from \"../../parts/cabinet\";\r\n\r\nexport default class Decor2 extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'decor_2';\r\n this.partName = 'Decor2';\r\n }\r\n\r\n load(dbFeature) {\r\n if (!dbFeature.metaData[\"Sink\"]) {\r\n dbFeature.metaData[\"Sink\"] = [\"All\"]\r\n }\r\n return super.load_(dbFeature, new Decor2());\r\n }\r\n\r\n setLayers(layout) {\r\n\r\n const cabinetParent = this.getParent().layout.parts[Cabinet.id];\r\n const bottomCabinet = cabinetParent && cabinetParent.bottomCabinet;\r\n if (bottomCabinet && (bottomCabinet.disabled || !bottomCabinet.featureGroupEnabled)) {\r\n super.hideLayers();\r\n return\r\n }\r\n\r\n if (this.activeFeature && (this.activeFeature.matchesMetaForArrayOfConditions(this.getArrayOfConditions())\r\n || (this.activeFeature.notAvailableInVisualizer && this.placeholderFeature))) {\r\n return super.setLayers(layout);\r\n }\r\n\r\n this.setDefault(layout);\r\n return super.setLayers(layout);\r\n }\r\n\r\n getArrayOfConditions() {\r\n const countertopGroup = this.getParent().layout.parts[CountertopGroup.id];\r\n return [{\r\n propName: 'RoomLayout',\r\n propValue: this.getParent().layout.getCurrentLayoutAbbreviation()\r\n },{\r\n propName: 'Sink',\r\n propValue: (countertopGroup && countertopGroup.sink && countertopGroup.sink.disabled) ? 'None' : 'All'\r\n }];\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n if (zIndexes && this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndexes.Globals.Decor2;\r\n }\r\n }\r\n}","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport CenterIsland from \"../../parts/centerIsland\";\r\n\r\nexport default class Decor3 extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'decor_3';\r\n this.partName = 'Decor3';\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new Decor3());\r\n }\r\n\r\n setLayers(layout) {\r\n const centerIslandParent = this.getParent().layout.parts[CenterIsland.id];\r\n const cabinet = centerIslandParent.cabinet;\r\n\r\n if (cabinet && (cabinet.disabled || !cabinet.featureGroupEnabled)) {\r\n super.hideLayers();\r\n return\r\n }\r\n\r\n if (this.activeFeature && (this.activeFeature.matchesMetaForArrayOfConditions(this.getArrayOfConditions())\r\n || (this.activeFeature.notAvailableInVisualizer && this.placeholderFeature))) {\r\n return super.setLayers(layout);\r\n }\r\n\r\n this.setDefault(layout);\r\n return super.setLayers(layout);\r\n }\r\n\r\n getArrayOfConditions() {\r\n return [{\r\n propName: 'RoomLayout',\r\n propValue: this.getParent().layout.getCurrentLayoutAbbreviation()\r\n }];\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n if (zIndexes && this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndexes.Globals.Decor3;\r\n }\r\n }\r\n}","import snakeCase from \"lodash/snakeCase\";\r\nimport {Part} from \"../part\";\r\nimport {PartMenuType} from \"../../../visComponents/constants\";\r\nimport DesignNavigationItem from \"../../../visComponents/designNavigationItem\";\r\nimport NonVisualizerSubPart from \"../subparts/nonVisualizerSubPart\";\r\n\r\nconst alreadyExistingGroups = [\"Edge Profile\", \"Faucet\", \"Sink\", \"Stovetop\", \"Range\"];\r\n\r\nexport default class Other extends Part {\r\n static id = 'Other';\r\n constructor() {\r\n super(true, false, PartMenuType.Complex);\r\n\r\n this.menuType = PartMenuType.Complex;\r\n this.partName = 'Other';\r\n this.categoryEnabled = false;\r\n }\r\n\r\n load(dbFeature) {\r\n // console.log(\"load other\", dbFeature.groupName);\r\n if (alreadyExistingGroups.includes(dbFeature.groupName)) { // they should be loaded in their groups!\r\n return false\r\n }\r\n const partId = snakeCase(dbFeature.groupName);\r\n let relatedItem = this.relatedItems.find(relatedItem => relatedItem.partId === partId);\r\n if (!relatedItem) {\r\n relatedItem = new NonVisualizerSubPart(true, partId, dbFeature.groupName);\r\n this.relatedItems.push(relatedItem);\r\n }\r\n relatedItem.getParent = () => this;\r\n relatedItem.load(dbFeature);\r\n return true\r\n }\r\n\r\n navigationItem() {\r\n return new DesignNavigationItem('Other', this);\r\n }\r\n\r\n isSubTypeWithItems() {\r\n return false;\r\n }\r\n\r\n handleSubPartClick() {\r\n\r\n }\r\n\r\n}\r\n","import React from 'react';\r\nimport {connect} from \"react-redux\";\r\nimport classNames from 'classnames';\r\nimport $ from 'jquery';\r\n\r\nimport {\r\n toggleDesktopNavigation,\r\n setActiveNavigationNames,\r\n setModuleContextMenuType,\r\n setActiveNavigationFilter, setActiveNavigationFilterStepIndex, setNavigationViewType, setNavigationLoading\r\n} from \"../../../actions/navigationFunctions\";\r\nimport {setDefaultSelectionGroup, changeActivePartRelatedItemIndex} from \"../../../actions/actionFunctions\";\r\nimport DesktopNavigationCommon from \"../../visComponents/navigation/desktopNavigationCommon\";\r\nimport Z from \"../core/zIndex\";\r\nimport {getCurrentLayout} from \"../../appLayout\";\r\n\r\nimport LockedView from \"../../common/lockedView\";\r\nimport {ContentType} from \"../../visComponents/constants\";\r\nimport ContextMenuSimple from \"./contextMenuSimple\";\r\nimport CabinetContextMenu from \"./cabinetContextMenu\";\r\nimport MobileMenuSelect from \"../../visComponents/navigation/mobile/mobileMenuSelect\";\r\nimport {CABINET_WIZARD_BUTTONS, COUNTERTOP_WIZARD_BUTTONS} from \"../core/constants\";\r\nimport {setVisualizerTutorialStep, showVisualizerTutorial} from \"../../../actions/tutorialFunctions\";\r\n\r\nclass DesktopNavigation extends DesktopNavigationCommon {\r\n\r\n componentWillReceiveProps(nextProps) {\r\n if (nextProps.activeNavigationFilter !== this.props.activeNavigationFilter\r\n && COUNTERTOP_WIZARD_BUTTONS.some(btn => btn.buttonId === nextProps.activeNavigationFilter)) {\r\n if (this.state.parentNavigationItem && this.state.parentNavigationItem.part.partName === \"Countertop\") {\r\n const subParts = this.state.parentNavigationItem.part.subParts();\r\n let subPart = null;\r\n switch (nextProps.activeNavigationFilter) {\r\n case COUNTERTOP_WIZARD_BUTTONS[0].buttonId:\r\n case COUNTERTOP_WIZARD_BUTTONS[1].buttonId:\r\n case COUNTERTOP_WIZARD_BUTTONS[2].buttonId:\r\n subPart = subParts.find(sPart => sPart.part.partId === \"countertop\");\r\n break;\r\n case COUNTERTOP_WIZARD_BUTTONS[3].buttonId:\r\n subPart = subParts.find(sPart => sPart.part.partId === \"edge_profile\");\r\n break;\r\n case COUNTERTOP_WIZARD_BUTTONS[4].buttonId:\r\n if (!this.state.childNavigationItem\r\n || (this.state.childNavigationItem && this.state.childNavigationItem.part.partId !== \"backsplash\")) {\r\n this.triggerOpenNavigationMenu(\"Backsplash\", \"Walls\", nextProps.activeNavigationFilter);\r\n }\r\n break;\r\n }\r\n if (subPart && (!this.state.childNavigationItem\r\n || (this.state.childNavigationItem && this.state.childNavigationItem.part.partId !== subPart.part.partId))) {\r\n this.handleSubPartClick(subPart, nextProps.activeNavigationFilter)\r\n }\r\n } else if (this.state.parentNavigationItem && this.state.parentNavigationItem.part.partName === \"Walls\") {\r\n switch (nextProps.activeNavigationFilter) {\r\n case COUNTERTOP_WIZARD_BUTTONS[0].buttonId:\r\n case COUNTERTOP_WIZARD_BUTTONS[1].buttonId:\r\n case COUNTERTOP_WIZARD_BUTTONS[2].buttonId:\r\n if (!this.state.childNavigationItem\r\n || (this.state.childNavigationItem && this.state.childNavigationItem.part.partId !== \"countertop\")) {\r\n this.triggerOpenNavigationMenu(\"Countertop\", \"Countertop\", nextProps.activeNavigationFilter);\r\n }\r\n break;\r\n case COUNTERTOP_WIZARD_BUTTONS[3].buttonId:\r\n if (!this.state.childNavigationItem\r\n || (this.state.childNavigationItem && this.state.childNavigationItem.part.partId !== \"edge_profile\")) {\r\n this.triggerOpenNavigationMenu(\"Edge Profile\", \"Countertop\", nextProps.activeNavigationFilter);\r\n }\r\n break;\r\n }\r\n } else if (this.state.parentNavigationItem && this.state.parentNavigationItem.part.partName === \"CenterIsland\") {\r\n const subParts = this.state.parentNavigationItem.part.subParts();\r\n let subPart = null;\r\n switch (nextProps.activeNavigationFilter) {\r\n case COUNTERTOP_WIZARD_BUTTONS[0].buttonId:\r\n case COUNTERTOP_WIZARD_BUTTONS[1].buttonId:\r\n case COUNTERTOP_WIZARD_BUTTONS[2].buttonId:\r\n subPart = subParts.find(sPart => sPart.part.partId === \"center_island_countertop\");\r\n break;\r\n case COUNTERTOP_WIZARD_BUTTONS[3].buttonId:\r\n subPart = subParts.find(sPart => sPart.part.partId === \"center_island_edge\");\r\n break;\r\n }\r\n if (subPart && (!this.state.childNavigationItem\r\n || (this.state.childNavigationItem && this.state.childNavigationItem.part.partId !== subPart.part.partId))) {\r\n this.handleSubPartClick(subPart, nextProps.activeNavigationFilter)\r\n }\r\n }\r\n }\r\n this._componentWillReceiveProps(nextProps)\r\n }\r\n\r\n bindCanvasClick = (event) => {\r\n const layout = getCurrentLayout();\r\n // const canvas = document.getElementById(this.props.canvasId);\r\n this.props.setHoveredLayer(event);\r\n\r\n if (document.hoveredLayer) {\r\n\r\n const layoutType = layout.getCurrentLayoutName();\r\n\r\n const hoveredZone = Z.getMenuByHoveredLayer(layoutType, document.hoveredLayer);\r\n\r\n // console.log('hoveredZone', hoveredZone);\r\n\r\n if (hoveredZone) {\r\n if (hoveredZone.contextMenuPartId && !this.state.showNavigation) {\r\n if (this.state.contextMenuOpen) {\r\n this.setState({\r\n contextMenuOpen: false,\r\n hoveredLayer: {}\r\n });\r\n } else {\r\n this.openContextMenu(hoveredZone, event);\r\n }\r\n return false;\r\n } else if (this.state.contentType === 0) {\r\n this.setState({\r\n showNavigation: true,\r\n contentType: ContentType.Design,\r\n contextMenuOpen: false,\r\n hoveredLayer: {}\r\n }, () => {\r\n this.setNewActiveFeature();\r\n this.menuOpened();\r\n setTimeout(() => {\r\n $(document).on('click', this.handleWrapperBlur);\r\n }, 0)\r\n });\r\n }\r\n\r\n hoveredZone.child\r\n ? this.triggerOpenNavigationMenu(hoveredZone.child, hoveredZone.parent)\r\n : this.triggerOpenNavigationMenu(hoveredZone)\r\n\r\n }\r\n\r\n }\r\n\r\n };\r\n\r\n openContextMenu = (contextMenuOpen, event) => {\r\n let contextMenuButtons = [];\r\n if (contextMenuOpen.contextMenuPartId === \"top_cabinet\") {\r\n // const hoveredParent = this.props.designNavigationItems.find(navItem => {\r\n // return navItem.text === \"Cabinet\"\r\n // });\r\n // if (hoveredParent) {\r\n //\r\n // }\r\n contextMenuButtons = [1, 2, 3, 4, 5]\r\n }\r\n // const receiveBackSplashes = () => {\r\n // const layout = getCurrentLayout();\r\n // const wallsParent = layout.parts[\"Walls\"];\r\n // const backsplashSubPart = wallsParent.subParts().find(subPart => subPart.part.partId === \"backsplash\");\r\n // this.checkIfAllFeaturesReceived(backsplashSubPart);\r\n // };\r\n switch (contextMenuOpen.contextMenuPartId) {\r\n case \"countertop_group_custom\":\r\n contextMenuOpen = \"Countertop\";\r\n break;\r\n case \"right_wall_custom\":\r\n contextMenuOpen = \"right_wall_custom\";\r\n break;\r\n case \"left_wall_custom\":\r\n contextMenuOpen = \"left_wall_custom\";\r\n break;\r\n case \"backsplash_custom_left\": {\r\n // receiveBackSplashes();\r\n contextMenuOpen = \"backsplash_custom_left\";\r\n break;\r\n }\r\n case \"backsplash_custom_right\": {\r\n // receiveBackSplashes();\r\n contextMenuOpen = \"backsplash_custom_right\";\r\n break;\r\n }\r\n case \"backsplash_custom\": {\r\n // receiveBackSplashes();\r\n contextMenuOpen = \"backsplash_custom\";\r\n break;\r\n }\r\n case \"center_island_custom\":\r\n contextMenuOpen = \"Center Island\";\r\n break;\r\n default:\r\n break;\r\n }\r\n const isMobile = $(window).width() < 991;\r\n\r\n let left = isMobile ? '50%' : event.clientX - 50;\r\n let top = isMobile ? '50%' : event.clientY - 50;\r\n let right = 'auto';\r\n\r\n const maxAllowedWidth = contextMenuButtons.length > 2 ? 300 : 210;\r\n\r\n let maxAllowedHeight = 110;\r\n if (contextMenuButtons.length > 6) {\r\n maxAllowedHeight = 330;\r\n } else if (contextMenuButtons.length > 3) {\r\n maxAllowedHeight = 220;\r\n }\r\n if (!isMobile && (left > window.innerWidth - maxAllowedWidth)) {\r\n left = 'auto';\r\n right = 0\r\n }\r\n if (!isMobile && (top > window.innerHeight - maxAllowedHeight)) {\r\n let negativeMargin = 50;\r\n if (contextMenuButtons.length > 6) {\r\n negativeMargin = 250;\r\n } else if (contextMenuButtons.length > 3) {\r\n negativeMargin = 150;\r\n }\r\n top = top - negativeMargin;\r\n }\r\n this.setState({\r\n contextMenuOpen,\r\n hoveredLayer: document.hoveredLayer,\r\n contextMenuPosition: {\r\n left,\r\n right,\r\n top,\r\n }\r\n });\r\n };\r\n\r\n handleNavigationItemClick = (item, ignoreLocked = false) => {\r\n this.navigationItemClickCommon(item);\r\n\r\n this.itemClick(item, ignoreLocked);\r\n\r\n const updateSideBarIds = [\"center_island_cabinet\", \"top_cabinet\"];\r\n if (updateSideBarIds.includes(item.part.partId)) {\r\n this.updateSideBar();\r\n }\r\n\r\n if (this.state.parentNavigationItem) { // update canvas only if it is child\r\n this.props.refreshCB();\r\n }\r\n };\r\n\r\n render() {\r\n const layout = getCurrentLayout();\r\n // const fabricatorSettings = this.props.fabricatorSettings;\r\n const activePart = this.state.parentNavigationItem ? this.state.parentNavigationItem.part : null;\r\n const activeSubPart = this.state.childNavigationItem ? this.state.childNavigationItem.part : null;\r\n // const activeNavPart = activeSubPart || activePart;\r\n const parentItems = layout.designNavigationItems(); // parent list without filters\r\n\r\n const useWizard = false, wizardGroups = [];\r\n\r\n let showNavigationFiltersSteps = activeSubPart\r\n && this.props.activeNavigationFilter !== CABINET_WIZARD_BUTTONS[0].buttonId\r\n && this.props.activeNavigationFilter !== \"inlay_type\"\r\n && activeSubPart.canUseNavigationFilter && activeSubPart.canUseNavigationFilter() ;\r\n\r\n if (activeSubPart && activeSubPart.canUseNavigationFilterSteps\r\n && activeSubPart.canUseNavigationFilterSteps()) {\r\n showNavigationFiltersSteps = !this.props.countertopNavigationFilterCompleted;\r\n }\r\n\r\n const showLockedView = this.currentActiveItemIsLocked(useWizard);\r\n\r\n const useFilters = false;\r\n const availableNavButtons = [ContentType.Design, ContentType.Layout, ContentType.DisplayRoom];\r\n\r\n return (\r\n \r\n : null}\r\n
\r\n )\r\n }\r\n\r\n}\r\n\r\nconst mapStateToProps = (store) => ({\r\n filtersVisible: store.filterState.showFilters,\r\n filterGroups: store.filterState.filterGroups,\r\n bvPresets: store.bathroomVisualizerState.bvPresets,\r\n userIsLoggedIn: store.userState.userIsLoggedIn,\r\n isPhoneNumberValidated: store.userState.isPhoneNumberValidated,\r\n activeNavigationFilter: store.navigationState.activeNavigationFilter,\r\n countertopNavigationFilterCompleted: store.navigationState.countertopNavigationFilterCompleted,\r\n visualizerTutorialStep: store.tutorialState.visualizerTutorialStep,\r\n visualizerTutorialIsOpened: store.tutorialState.visualizerTutorialIsOpened,\r\n activeQuoteIndex: store.quotesState.activeQuoteIndex,\r\n});\r\n\r\nconst mapDispatchToProps = {\r\n setNavigationViewType,\r\n toggleDesktopNavigation,\r\n setActiveNavigationNames,\r\n setModuleContextMenuType,\r\n setActiveNavigationFilter,\r\n setActiveNavigationFilterStepIndex,\r\n setDefaultSelectionGroup,\r\n changeActivePartRelatedItemIndex,\r\n setVisualizerTutorialStep,\r\n showVisualizerTutorial,\r\n setNavigationLoading\r\n};\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(DesktopNavigation);\r\n","import React from 'react';\r\nimport {connect} from 'react-redux';\r\nimport {injectIntl} from \"react-intl\";\r\n\r\nimport MobileNavigationCommon from \"../../visComponents/navigation/mobileNavigationCommon\";\r\n\r\nimport {ContentType} from \"../../visComponents/constants\";\r\nimport Z from \"../core/zIndex\";\r\n\r\nimport MobileNavigationButtons from '../../visComponents/navigation/mobile/mobileNavigationButtons';\r\nimport MobileNavigationAllWallsCheckbox from '../../visComponents/navigation/mobile/mobileNavigationAllWallsCheckbox';\r\nimport FeatureWizardSteps from \"../../visComponents/navigation/featureWizard/featureWizardSteps\";\r\n\r\nimport {changeActivePartRelatedItemIndex, setDefaultSelectionGroup} from \"../../../actions/actionFunctions\";\r\nimport {\r\n setActiveNavigationFilter,\r\n setModuleContextMenuType,\r\n setModuleContextMenuModule,\r\n setActiveNavigationFilterStepIndex, setNavigationViewType, setNavigationLoading\r\n} from \"../../../actions/navigationFunctions\";\r\n\r\nimport MobileMenuSelect from '../../visComponents/navigation/mobile/mobileMenuSelect';\r\nimport LockedView from \"../../common/lockedView\";\r\n\r\nimport Filters from \"../../visComponents/navigation/newFilters/filters\";\r\nimport BodyPanelRadio from \"../../visComponents/navigation/desktop/bodyPanelRadio\";\r\nimport ContextMenuSimple from \"./contextMenuSimple\";\r\nimport CabinetContextMenu from \"./cabinetContextMenu\";\r\nimport FilterSwitchers from \"../../visComponents/navigation/newFilters/filterSwitchers\";\r\nimport FilterSelection from \"../../visComponents/navigation/newFilters/filterSelection\";\r\n// import {CABINET_WIZARD_BUTTONS} from \"../core/constants\";\r\nimport NavigationFiltersSteps from \"../../visComponents/navigation/newFilters/navigationFiltersSteps\";\r\nimport {CABINET_GROUP, COUNTERTOP_GROUP, COUNTERTOP_WIZARD_BUTTONS} from \"../core/constants\";\r\n\r\nimport {getCurrentLayout} from \"../../appLayout\";\r\nimport CabinetSwitchers from \"./cabinetSwitchers\";\r\nimport CountertopSwitchers from \"./countertopSwitchers\";\r\nimport LookAllWallsRadioButton from \"../../look/lookNavigation/lookMain/lookAllWallsRadioButton\";\r\n\r\nclass MobileNavigation extends MobileNavigationCommon {\r\n\r\n componentWillReceiveProps(nextProps) {\r\n if (nextProps.activeNavigationFilter !== this.props.activeNavigationFilter\r\n && COUNTERTOP_WIZARD_BUTTONS.some(btn => btn.buttonId === nextProps.activeNavigationFilter)) {\r\n if (this.state.parentNavigationItem && this.state.parentNavigationItem.part.partName === \"Countertop\") {\r\n const subParts = this.state.parentNavigationItem.part.subParts();\r\n let subPart = null;\r\n switch (nextProps.activeNavigationFilter) {\r\n case COUNTERTOP_WIZARD_BUTTONS[0].buttonId:\r\n case COUNTERTOP_WIZARD_BUTTONS[1].buttonId:\r\n case COUNTERTOP_WIZARD_BUTTONS[2].buttonId:\r\n subPart = subParts.find(sPart => sPart.part.partId === \"countertop\");\r\n break;\r\n case COUNTERTOP_WIZARD_BUTTONS[3].buttonId:\r\n subPart = subParts.find(sPart => sPart.part.partId === \"edge_profile\");\r\n break;\r\n case COUNTERTOP_WIZARD_BUTTONS[4].buttonId:\r\n if (!this.state.childNavigationItem\r\n || (this.state.childNavigationItem && this.state.childNavigationItem.part.partId !== \"backsplash\")) {\r\n this.triggerOpenNavigationMenu(\"Backsplash\", \"Walls\", nextProps.activeNavigationFilter);\r\n }\r\n break;\r\n }\r\n if (subPart && (!this.state.childNavigationItem\r\n || (this.state.childNavigationItem && this.state.childNavigationItem.part.partId !== subPart.part.partId))) {\r\n this.handleSubPartClick(subPart, nextProps.activeNavigationFilter)\r\n }\r\n } else if (this.state.parentNavigationItem && this.state.parentNavigationItem.part.partName === \"Walls\") {\r\n switch (nextProps.activeNavigationFilter) {\r\n case COUNTERTOP_WIZARD_BUTTONS[0].buttonId:\r\n case COUNTERTOP_WIZARD_BUTTONS[1].buttonId:\r\n case COUNTERTOP_WIZARD_BUTTONS[2].buttonId:\r\n if (!this.state.childNavigationItem\r\n || (this.state.childNavigationItem && this.state.childNavigationItem.part.partId !== \"countertop\")) {\r\n this.triggerOpenNavigationMenu(\"Countertop\", \"Countertop\", nextProps.activeNavigationFilter);\r\n }\r\n break;\r\n case COUNTERTOP_WIZARD_BUTTONS[3].buttonId:\r\n if (!this.state.childNavigationItem\r\n || (this.state.childNavigationItem && this.state.childNavigationItem.part.partId !== \"edge_profile\")) {\r\n this.triggerOpenNavigationMenu(\"Edge Profile\", \"Countertop\", nextProps.activeNavigationFilter);\r\n }\r\n break;\r\n }\r\n } else if (this.state.parentNavigationItem && this.state.parentNavigationItem.part.partName === \"CenterIsland\") {\r\n const subParts = this.state.parentNavigationItem.part.subParts();\r\n let subPart = null;\r\n switch (nextProps.activeNavigationFilter) {\r\n case COUNTERTOP_WIZARD_BUTTONS[0].buttonId:\r\n case COUNTERTOP_WIZARD_BUTTONS[1].buttonId:\r\n case COUNTERTOP_WIZARD_BUTTONS[2].buttonId:\r\n subPart = subParts.find(sPart => sPart.part.partId === \"center_island_countertop\");\r\n break;\r\n case COUNTERTOP_WIZARD_BUTTONS[3].buttonId:\r\n subPart = subParts.find(sPart => sPart.part.partId === \"center_island_edge\");\r\n break;\r\n }\r\n if (subPart && (!this.state.childNavigationItem\r\n || (this.state.childNavigationItem && this.state.childNavigationItem.part.partId !== subPart.part.partId))) {\r\n this.handleSubPartClick(subPart, nextProps.activeNavigationFilter)\r\n }\r\n }\r\n }\r\n this._componentWillReceiveProps(nextProps)\r\n }\r\n\r\n bindCanvasClick = (event) => {\r\n const layout = getCurrentLayout();\r\n // console.log(\"bindCanvasClick event\");\r\n\r\n const canvas = document.getElementById(this.props.canvasId);\r\n\r\n if (!window.touchMove && !this.state.showNavigation && !this.state.contextMenuOpen) {\r\n this.props.setHoveredLayer(event);\r\n }\r\n\r\n if (document.hoveredLayer && !window.touchMove) {\r\n // $('.canvas-text').html(`CLICK3`);\r\n const layoutType = layout.getCurrentLayoutName();\r\n\r\n let hoveredZone = Z.getMenuByHoveredLayer(layoutType, document.hoveredLayer, canvas);\r\n if (hoveredZone) {\r\n if (hoveredZone.contextMenuPartId && !this.state.showNavigation) {\r\n if (this.state.contextMenuOpen) {\r\n this.setState({\r\n contextMenuOpen: false,\r\n hoveredLayer: {}\r\n });\r\n document.removeEventListener('click', this.handleContextMenuBlur);\r\n } else {\r\n let contextMenuOpen = \"\";\r\n\r\n const receiveBackSplashes = () => {\r\n const wallsParent = layout.parts[\"Walls\"];\r\n const backsplashSubPart = wallsParent.subParts().find(subPart => subPart.part.partId === \"backsplash\");\r\n this.checkIfAllFeaturesReceived(backsplashSubPart);\r\n };\r\n\r\n switch (hoveredZone.contextMenuPartId) {\r\n case \"countertop_group_custom\":\r\n contextMenuOpen = \"Countertop\";\r\n break;\r\n case \"right_wall_custom\":\r\n contextMenuOpen = \"right_wall_custom\";\r\n break;\r\n case \"left_wall_custom\":\r\n contextMenuOpen = \"left_wall_custom\";\r\n break;\r\n case \"backsplash_custom_left\": {\r\n receiveBackSplashes();\r\n contextMenuOpen = \"backsplash_custom_left\";\r\n break;\r\n }\r\n case \"backsplash_custom_right\": {\r\n receiveBackSplashes();\r\n contextMenuOpen = \"backsplash_custom_right\";\r\n break;\r\n }\r\n case \"backsplash_custom\": {\r\n receiveBackSplashes();\r\n contextMenuOpen = \"backsplash_custom\";\r\n break;\r\n }\r\n case \"center_island_custom\":\r\n contextMenuOpen = \"Center Island\";\r\n break;\r\n default:\r\n break;\r\n }\r\n this.setState({\r\n contextMenuOpen: contextMenuOpen || hoveredZone,\r\n hoveredLayer: document.hoveredLayer\r\n }, () => {\r\n if (contextMenuOpen) {\r\n setTimeout(() => {\r\n document.addEventListener('click', this.handleContextMenuBlur);\r\n }, 0)\r\n }\r\n });\r\n }\r\n return false;\r\n } else if (this.state.contentType === 0) {\r\n if (!window.canvasIsDragging) {\r\n this.props.setCanvasClass((hoveredZone.child || hoveredZone.parent || hoveredZone).toLowerCase().replace(/ /g, \"-\"));\r\n }\r\n this.openMobileMenu();\r\n }\r\n\r\n hoveredZone.child\r\n ? this.triggerOpenNavigationMenu(hoveredZone.child, hoveredZone.parent, false)\r\n : this.triggerOpenNavigationMenu(hoveredZone)\r\n\r\n }\r\n\r\n }\r\n\r\n };\r\n\r\n handleNavigationItemClick = (item, ignoreLocked = false) => {\r\n\r\n if (window.location.port === '9007' || document.kvConfig.kioskMode) {\r\n console.log('item', item);\r\n }\r\n this.itemClick(item, ignoreLocked);\r\n\r\n this.props.setActiveFeature(item.part);\r\n\r\n const canvasClass = this.state.childNavigationItem\r\n ? this.state.parentNavigationItem.text + '-' + this.state.childNavigationItem.text\r\n : this.state.parentNavigationItem.text;\r\n\r\n if (!window.canvasIsDragging) {\r\n this.props.setCanvasClass(canvasClass.toLowerCase().replace(/ /g, \"-\"));\r\n }\r\n\r\n if (this.state.parentNavigationItem) { // update canvas only if it is child\r\n this.props.refreshCB();\r\n }\r\n if (item.part.partId === \"top_cabinet\" && !item.part.metaData[\"Module\"]) {\r\n this.props.setModuleContextMenuModule(null)\r\n }\r\n };\r\n\r\n handleSubPartClick = (subNavigationItem, activeNavigationFilter = null) => { // sidebar list item click\r\n const subItemPart = subNavigationItem.part;\r\n const childNavigationItemPartId = subItemPart.partId;\r\n subItemPart.getParent().handleSubPartClick(subItemPart);\r\n this.setState({\r\n childNavigationItem: subNavigationItem,\r\n showFilterSelection: subItemPart.allFeaturesReceived, // show filters only if subItemPart has all features\r\n showerWallWizardGroupsSelected: false,\r\n searchText: \"\"\r\n }, () => {\r\n this.scrollContentToTop();\r\n this.rememberWallsSelection();\r\n this.checkIfAllFeaturesReceived(subNavigationItem, \"childNavigationItem\");\r\n });\r\n /*set new materials page subIndex*/\r\n this.setActivePartRelatedItemIndex(subNavigationItem);\r\n // console.log('subItemPart', subItemPart);\r\n if (!window.canvasIsDragging) {\r\n const canvasClass = this.state.parentNavigationItem.text + '-' + subNavigationItem.text\r\n .toLowerCase().replace(/ /g, \"-\");\r\n this.props.setCanvasClass(canvasClass);\r\n }\r\n this.setNewActiveFeature(subNavigationItem);\r\n\r\n this.setNavigationFilterIfTheChildWasChanged(childNavigationItemPartId, activeNavigationFilter);\r\n\r\n };\r\n\r\n backsplashSelectClick = () => {\r\n this.props.refreshCB(); // update canvas\r\n this.reRenderComponent(); // update nav items\r\n };\r\n\r\n render() {\r\n const layout = getCurrentLayout();\r\n const activePart = this.state.parentNavigationItem ? this.state.parentNavigationItem.part : null;\r\n const activeSubPart = this.state.childNavigationItem ? this.state.childNavigationItem.part : null;\r\n const activeNavPart = activeSubPart || activePart;\r\n const parentItems = layout.designNavigationItems(); // parent list without filters\r\n const allFeaturesReceived = activeNavPart && activeNavPart.allFeaturesReceived;\r\n\r\n // console.log('activePart', activePart);\r\n // console.log('activeSubPart', activeSubPart);\r\n // console.log('activePart.subTypes()', activePart && activePart.subTypes());\r\n // console.log('this.state.childNavigationItemv1111', this.state.childNavigationItem);\r\n\r\n let useWizard = false;\r\n let wizardGroups = [];\r\n if (this.props.fabricatorSettings\r\n && (this.props.fabricatorSettings.wizardConsumers || (this.props.fabricatorSettings.wizardClients && document.kvConfig.isBackend))\r\n && this.state.contentType === ContentType.Design && activeSubPart && activeSubPart.canUseWizard && activeSubPart.allFeaturesReceived) {\r\n useWizard = true;\r\n wizardGroups = this.state[this.getWizardGroupsByPartId(this.state.childNavigationItem.part.partId)];\r\n }\r\n\r\n const features = this.getFeatures(layout);\r\n\r\n const showLockedView = this.currentActiveItemIsLocked(useWizard);\r\n\r\n const useFilters = (activePart && activePart.partId === \"kitchen_floor\" && activePart.allFeaturesReceived)\r\n || (activeSubPart && (this.isWallItem(activeSubPart) || activeSubPart.partId === \"accent_wall\"\r\n || activeSubPart.partId === \"shower_interior_wall_accent\") && activeSubPart.allFeaturesReceived);\r\n\r\n const filterSelectionHasValues = activeNavPart && FilterSelection.getAvailableFilterValues(\r\n this.props.filterGroups, \"Material\", activeNavPart, this.props.fabricatorData\r\n ).length;\r\n\r\n const itemIsSelected = (!this.props.fabricatorSettings.leadCapture\r\n || (activeSubPart && activeSubPart.activeFeature && activeSubPart.firstClick[this.props.activeQuoteIndex] && activeSubPart.placeholderChanged));\r\n\r\n const useKVWizard = false;\r\n //TODO change it when BE is ready\r\n\r\n const showNavigationFilters = useKVWizard &&activeNavPart\r\n // && this.props.activeNavigationFilter !== CABINET_WIZARD_BUTTONS[0].buttonId\r\n && activeNavPart.canUseNavigationFilter && activeNavPart.canUseNavigationFilter();\r\n\r\n let showNavigationFiltersSteps = false;\r\n if (useKVWizard && activeNavPart && activeNavPart.canUseNavigationFilterSteps\r\n && activeNavPart.canUseNavigationFilterSteps()) {\r\n showNavigationFiltersSteps = !this.props.countertopNavigationFilterCompleted;\r\n }\r\n\r\n const isCabinet = activeSubPart && CABINET_GROUP.includes(activeSubPart.partId);\r\n const isCountertop = activeSubPart && COUNTERTOP_GROUP.includes(activeSubPart.partId);\r\n\r\n return (\r\n Analytics.sendClickEvent('feature-clicked-' + currentFeature.partName)\r\n && props.onItemClick(props.currentFeature, featureIsLocked, event)}>\r\n {currentFeature.notAvailableInVisualizer ? (\r\n
\r\n {props.isActive && !currentFeature.dbFeature.autoAddToCart ? (\r\n \r\n {showPrice ? (\r\n \r\n {getPriceWithIncluded(price, currentFeature, fabricatorData, props.intl.messages)}\r\n \r\n ) : null}\r\n {featureIsLocked\r\n ? \r\n :
\r\n \r\n {isAddToCartButtonVisible ? (\r\n \r\n ) : null}\r\n {quoteOrUnlockButtonVisible ? (\r\n \r\n ) : null}\r\n {allPagesEnabled && props.existInQtCategory && !isAddToCartButtonVisible && !quoteOrUnlockButtonVisible && featureIsEnabledForQt ? (\r\n {\r\n Analytics.sendClickEvent('feature-clicked-show-feature-info') &&\r\n Analytics.sendClickEvent('feature-clicked-show-feature-info-' + currentFeature.partName) &&\r\n props.switchToFeatureInfo(props.currentFeature)\r\n }}/>\r\n ) : null}\r\n
\r\n ) : null}\r\n Analytics.sendClickEvent('feature-clicked')\r\n && Analytics.sendClickEvent('feature-clicked-' + currentFeature.partName)\r\n && props.onItemClick(props.currentFeature, featureIsLocked, event)}>\r\n\r\n {currentFeature.vanitySize ?\r\n {currentFeature.vanitySize}\" : null\r\n }\r\n {currentFeatureCartItemsCount > 0 ?\r\n {currentFeatureCartItemsCount} : null\r\n }\r\n {props.isActive && !currentFeature.dbFeature.autoAddToCart ? (\r\n
\r\n );\r\n}\r\n\r\nnavigationItem.displayName = \"navigationItem\";\r\nexport default injectIntl(navigationItem)\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\n\r\nexport default class Ceiling extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'walls_ceiling';\r\n this.partName = 'Ceiling';\r\n this.translateId = \"visualizer.kitchen.walls.walls_ceiling\";\r\n this.isStoneFeature = true;\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new Ceiling());\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n if(zIndexes) {\r\n const zIndex = zIndexes.Walls.Ceiling;\r\n if (this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndex;\r\n }\r\n if (this.placeholderFeature) {\r\n this.placeholderFeature.layer.zIndex = zIndex;\r\n }\r\n }\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\n\r\nexport default class LeftWall extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'left_wall';\r\n this.partName = 'Left Wall';\r\n this.translateId = \"visualizer.kitchen.walls.left_wall\";\r\n this.activeFeatureBeforeAllWalls = null;\r\n this.allWallsApplied = true;\r\n this.isStoneFeature = true;\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new LeftWall());\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n if(zIndexes) {\r\n const zIndex = zIndexes.Walls.LeftWall;\r\n if (this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndex;\r\n }\r\n if (this.placeholderFeature) {\r\n this.placeholderFeature.layer.zIndex = zIndex;\r\n }\r\n }\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\n\r\nexport default class RightWall extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'right_wall';\r\n this.partName = 'Right Wall';\r\n this.translateId = \"visualizer.kitchen.walls.right_wall\";\r\n this.activeFeatureBeforeAllWalls = null;\r\n this.allWallsApplied = true;\r\n this.isStoneFeature = true;\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new RightWall());\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n if(zIndexes) {\r\n const zIndex = zIndexes.Walls.RightWall;\r\n if (this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndex;\r\n }\r\n if (this.placeholderFeature) {\r\n this.placeholderFeature.layer.zIndex = zIndex;\r\n }\r\n }\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\n\r\nexport default class PopoutWall extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'popout_wall';\r\n this.partName = 'Popout Wall';\r\n this.translateId = \"visualizer.kitchen.walls.popout_wall\";\r\n this.activeFeatureBeforeAllWalls = null;\r\n this.allWallsApplied = true;\r\n this.isStoneFeature = true;\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new PopoutWall());\r\n }\r\n\r\n setDefault() {\r\n if (!this.tryToSetTheSameFeature(this.features)) {\r\n const leftWall = this.getParent().leftWall;\r\n let sameWallAsLeftWall = null;\r\n if (leftWall && leftWall.activeFeature && leftWall.activeFeature.partName) {\r\n const leftWallName = leftWall.activeFeature.getSplittedFeatureName();\r\n sameWallAsLeftWall = this.features.find(wall => wall.getSplittedFeatureName() === leftWallName);\r\n }\r\n this.activeFeature = sameWallAsLeftWall || this.features[0]\r\n }\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n if(zIndexes) {\r\n const zIndex = zIndexes.Walls.PopoutWall;\r\n if (this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndex;\r\n }\r\n if (this.placeholderFeature) {\r\n this.placeholderFeature.layer.zIndex = zIndex;\r\n }\r\n }\r\n }\r\n}\r\n","// import $ from \"jquery\";\r\nimport uniqBy from \"lodash/uniqBy\";\r\n\r\nimport {IntermediatePart} from \"../../intermediatePart\";\r\nimport {BACKSPLASH_TYPES, LayoutAbbreviations} from \"../../constants\";\r\nimport DesignNavigationItem from \"../../../../visComponents/designNavigationItem\";\r\nimport Cabinet from \"../../parts/cabinet\";\r\nimport {loaderDisable, loaderEnable} from \"../../../../ui/loaderView\";\r\nimport Navigation from \"../../../../visComponents/navigation/navigation\";\r\n// import ActionTypes from \"../../../../../misc/actionTypes\";\r\n\r\nexport default class Backsplash extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'backsplash';\r\n this.partName = 'Backsplash';\r\n this.translateId = \"visualizer.kitchen.walls.backsplash\";\r\n this.isStoneFeature = true;\r\n this.canBeDisabled = true;\r\n this.toggleSwitchedOffByUser = false;\r\n if (isChild) {\r\n this.nextFeaturesPageToLoadArray = {};\r\n LayoutAbbreviations.forEach(layoutAbbreviation => {\r\n this.nextFeaturesPageToLoadArray[layoutAbbreviation] = {\r\n page: 0,\r\n allReceived: false,\r\n };\r\n });\r\n }\r\n }\r\n\r\n load(dbFeature) {\r\n if (Array.isArray(dbFeature.metaData[\"CabinetLayout\"])\r\n && dbFeature.metaData[\"CabinetLayout\"].includes(\"4\")\r\n && !dbFeature.metaData[\"CabinetLayout\"].includes(\"5\")) {\r\n dbFeature.metaData[\"CabinetLayout\"].push(\"5\");\r\n }\r\n // if (!(Array.isArray(dbFeature.metaData[\"backsplashType\"]) || Array.isArray(dbFeature.metaData[\"BacksplashType\"]))) {\r\n // if (dbFeature.description && dbFeature.description.includes(\"4in\")) {\r\n // dbFeature.metaData[\"BacksplashType\"] = [\"4in\"];\r\n // } else if (dbFeature.description && dbFeature.description.includes(\"6in\")) {\r\n // dbFeature.metaData[\"BacksplashType\"] = [\"6in\"];\r\n // } else if (dbFeature.metaData[\"CabinetLayout\"]) {\r\n // dbFeature.metaData[\"BacksplashType\"] = [\"18in\"];\r\n // }\r\n // console.log(\"backsplash custom\", dbFeature.sharedFeatureName, dbFeature.metaData[\"BacksplashType\"]);\r\n // }\r\n return super.load_(dbFeature, new Backsplash());\r\n }\r\n\r\n navigationSubItems(filters, searchText) {\r\n const filteredAvailableFeatures = super.getFeaturesBySearchText(super.getFilteredFeaturesByFilters(filters), searchText);\r\n let featuresToDisplay = super.navigationSubItemsWithFilterMultipleConditions(this.getArrayOfConditions(true), filteredAvailableFeatures);\r\n if (this.activeFeature) {\r\n // const withInches = BACKSPLASH_TYPES.filter(bType => bType.includes(\"in\"));\r\n // const filterByInchSize = withInches.find(bType => this.activeFeature.partName.includes(bType));\r\n featuresToDisplay = featuresToDisplay.filter(feature => {\r\n if (Array.isArray(this.activeFeature.metaData[\"BacksplashType\"]) && Array.isArray(feature.metaData[\"BacksplashType\"])) {\r\n return feature.metaData[\"BacksplashType\"].includes(this.activeFeature.metaData[\"BacksplashType\"][0])\r\n }\r\n return false\r\n // if (!feature.partName) {\r\n // return false\r\n // }\r\n // return filterByInchSize\r\n // ? feature.partName.includes(filterByInchSize)\r\n // : withInches.every(withInchesType => !feature.partName.includes(withInchesType))\r\n }); // filter by 4in, 6in, Full\r\n\r\n if (this.featureIsFullWall(this.activeFeature)) { // full backsplashes should be filtered by CabinetLayout metaData\r\n const cabinetParent = this.getParent().layout.parts[Cabinet.id];\r\n const cabinetLayoutMetaData = cabinetParent && cabinetParent.topCabinet && cabinetParent.topCabinet.activeFeature\r\n && cabinetParent.topCabinet.activeFeature.metaData && cabinetParent.topCabinet.activeFeature.metaData[\"CabinetLayout\"];\r\n if (cabinetLayoutMetaData) {\r\n featuresToDisplay = featuresToDisplay.filter(feature => feature.metaData && feature.metaData[\"CabinetLayout\"]\r\n && feature.metaData[\"CabinetLayout\"].includes(cabinetLayoutMetaData[0]))\r\n }\r\n }\r\n }\r\n\r\n return uniqBy(this.getUniqueFeatures(featuresToDisplay), (feature) => feature.dbFeature.id)\r\n .map(_ => new DesignNavigationItem(_.featureName, _));\r\n }\r\n\r\n getUniqueFeatures(featuresToDisplay) { // remove bathroom backsplashes (with the same name and not in visualizer)\r\n return featuresToDisplay.filter(feature => {\r\n const featureSplittedName = feature.getSplittedFeatureName();\r\n return !(feature.notAvailableInVisualizer && featuresToDisplay.some(countertop => {\r\n return countertop.getSplittedFeatureName() === featureSplittedName\r\n }));\r\n })\r\n }\r\n\r\n getFeatureByBacksplashType(neededType, featureName = \"\") {\r\n // const withInches = BACKSPLASH_TYPES.filter(bType => bType.includes(\"in\"));\r\n const matchingFeatures = this.features.filter(feature => {\r\n if (Array.isArray(feature.metaData[\"BacksplashType\"]) && feature.metaData[\"BacksplashType\"].includes(neededType)) {\r\n return true\r\n }\r\n // return feature.partName && (withInches.includes(neededType)\r\n // ? feature.partName.includes(\" \"+neededType)\r\n // : withInches.every(withInchesType => !feature.partName.includes(withInchesType)))\r\n });\r\n\r\n let currentPartName = featureName;\r\n if (!currentPartName && this.activeFeature) {\r\n // currentPartName = this.activeFeature.removeLayoutFromPartName(this.activeFeature.partName); // remove layout name\r\n // withInches.forEach(bType => currentPartName = currentPartName.split(\" \"+bType).join(\"\")); // 2) remove 6in or 4in\r\n // currentPartName = this.activeFeature.removeCabinetLayoutFromPartName(currentPartName);\r\n currentPartName = this.activeFeature.getCountertopGroupsSplittedFeatureName();\r\n }\r\n\r\n const matchByName = matchingFeatures.filter(feature => {\r\n // let featurePartName = feature.removeLayoutFromPartName(feature.partName); // remove layout name\r\n // withInches.forEach(bType => featurePartName = featurePartName.split(\" \"+bType).join(\"\")); // 2) remove 6in or 4in\r\n // featurePartName = feature.removeCabinetLayoutFromPartName(featurePartName);\r\n return feature.getCountertopGroupsSplittedFeatureName() === currentPartName\r\n });\r\n if (matchByName.length > 1) {\r\n const cabinetLayoutMetaData = this.getTopCabinetCabinetLayoutMetadata();\r\n const sameCabinetType = matchByName.find(feature => {\r\n if (this.featureIsFullWall(feature)) {\r\n return feature.matchesMetaForArrayOfConditions([\r\n {\r\n propName: 'CabinetLayout',\r\n propValue: cabinetLayoutMetaData\r\n }\r\n ])\r\n }\r\n });\r\n return sameCabinetType || matchByName[0];\r\n }\r\n return matchByName[0] || matchingFeatures[0];\r\n }\r\n\r\n featureIsFullWall = (feature) => {\r\n // const withInches = BACKSPLASH_TYPES.filter(bType => bType.includes(\"in\"));\r\n // return !withInches.some(bType => feature.partName.includes(bType))\r\n // || (Array.isArray(feature.metaData[\"BacksplashType\"]) && feature.metaData[\"BacksplashType\"][0] === \"18in\");\r\n return Array.isArray(feature.metaData[\"BacksplashType\"]) && feature.metaData[\"BacksplashType\"][0] === \"18in\"\r\n }\r\n\r\n getCurrentActiveFeatureType() {\r\n if (this.activeFeature && Array.isArray(this.activeFeature.metaData[\"BacksplashType\"])) {\r\n return this.activeFeature.metaData[\"BacksplashType\"][0]\r\n }\r\n return \"18in\"\r\n // const withInches = BACKSPLASH_TYPES.filter(bType => bType.includes(\"in\"));\r\n // return this.activeFeature && (withInches.find(bType => {\r\n // return this.activeFeature.partName.includes(bType)\r\n // }) || BACKSPLASH_TYPES[2])\r\n }\r\n\r\n setLayers(layout) {\r\n if (this.activeFeature && (this.activeFeature.matchesMetaForArrayOfConditions(this.getArrayOfConditions())\r\n || (this.activeFeature.notAvailableInVisualizer && this.placeholderFeature))) {\r\n return super.setLayers(layout);\r\n }\r\n\r\n this.setDefault(layout);\r\n return super.setLayers(layout);\r\n }\r\n\r\n setDefault() {\r\n const filteredFeatures = this.getArrayOfConditions\r\n ? this.features.filter(f => f.matchesMetaForArrayOfConditions(this.getArrayOfConditions()))\r\n : this.features;\r\n const matchingFeatureExist = this.tryToSetTheSameFeature(filteredFeatures, null);\r\n if (!matchingFeatureExist && !window.requestInProcess) {\r\n this.activeFeature = filteredFeatures[0];\r\n }\r\n if (this.setActiveFeatureParts) {\r\n this.activeFeatureParts = this.setActiveFeatureParts();\r\n }\r\n }\r\n\r\n tryToSetTheSameFeature(filteredFeatures = [], partName = \"\") {\r\n if (this.activeFeature && this.activeFeature.partName) {\r\n this.activeFeature = this.findFeatureByPartName(\r\n partName || this.activeFeature.getCountertopGroupsSplittedFeatureName(),\r\n !partName,\r\n filteredFeatures\r\n );\r\n if (this.activeFeature) {\r\n return true\r\n }\r\n }\r\n return false\r\n }\r\n\r\n findFeatureByPartName(splittedName, alReadySplitted = true) {\r\n if (!alReadySplitted) {\r\n splittedName = this.removeLayoutFromPartName(splittedName);\r\n splittedName = this.removeCabinetLayoutFromPartName(splittedName);\r\n }\r\n const navFeature = this.navigationSubItems().find((feature) => {\r\n if (feature.part && feature.part.partName) {\r\n let currentFeatureSplittedName = feature.part.getCountertopGroupsSplittedFeatureName();\r\n return currentFeatureSplittedName === splittedName\r\n }\r\n });\r\n return navFeature && navFeature.part\r\n }\r\n\r\n setFeatureByName = async (passedName = \"\") => {\r\n window.requestInProcess = true;\r\n loaderEnable();\r\n const splittedName = passedName || this.activeFeature.getCountertopGroupsSplittedFeatureName();\r\n await Navigation.searchFeaturesByName(this, splittedName);\r\n const neededFeature = this.findFeatureByPartName(splittedName, true);\r\n if (neededFeature) {\r\n this.activeFeature = neededFeature;\r\n }\r\n window.requestInProcess = false;\r\n loaderDisable();\r\n // $(window).trigger(ActionTypes.CHANGE_LAYOUT); // update canvas\r\n return true\r\n };\r\n\r\n getTopCabinetCabinetLayoutMetadata() {\r\n const cabinetParent = this.getParent().layout.parts[Cabinet.id];\r\n return cabinetParent && cabinetParent.topCabinet && cabinetParent.topCabinet.activeFeature\r\n && cabinetParent.topCabinet.activeFeature.metaData && cabinetParent.topCabinet.activeFeature.metaData[\"CabinetLayout\"];\r\n }\r\n\r\n getArrayOfConditions() {\r\n\r\n const conditions = [{\r\n propName: 'RoomLayout',\r\n propValue: this.getParent().layout.getCurrentLayoutAbbreviation()\r\n }];\r\n\r\n const cabinetLayoutMetaData = this.getTopCabinetCabinetLayoutMetadata();\r\n\r\n if (cabinetLayoutMetaData && this.activeFeature) {\r\n if (this.featureIsFullWall(this.activeFeature)) {\r\n conditions.push({\r\n propName: 'CabinetLayout',\r\n propValue: cabinetLayoutMetaData\r\n });\r\n }\r\n }\r\n return conditions;\r\n }\r\n\r\n removeBacksplashTypeFromPartName(partName) {\r\n BACKSPLASH_TYPES.forEach(abbr => {\r\n partName = partName.replace(\" \"+abbr, \"\")\r\n });\r\n return partName\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n if(zIndexes) {\r\n const zIndex = zIndexes.Walls.Backsplash;\r\n if (this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndex;\r\n }\r\n if (this.placeholderFeature) {\r\n this.placeholderFeature.layer.zIndex = zIndex;\r\n }\r\n }\r\n }\r\n\r\n canUseNavigationFilterSteps() {\r\n return true\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport DesignNavigationItem from \"../../../../visComponents/designNavigationItem\";\r\nimport {bottomCabinetModuleSystem} from \"./cabinetModuleSystem\";\r\n\r\nexport default class BottomCabinet extends IntermediatePart {\r\n constructor(isChild, partNumber = 0) {\r\n super(isChild);\r\n this.partNumber = partNumber;\r\n this.partId = 'bottom_cabinet';\r\n this.partName = 'Bottom Cabinet';\r\n this.layerPriority = 4;\r\n this.translateId = \"visualizer.kitchen.cabinet.bottom_cabinet\";\r\n if (isChild) {\r\n this.moduleSystem = bottomCabinetModuleSystem;\r\n this.defaultInlayType = \"Wood\";\r\n this.inlayTypes = []; // array of objects, for ex. {name: \"Cascade\", moduleParts: [\"3_2\", \"7_56\"]}\r\n }\r\n }\r\n\r\n load(dbFeature) {\r\n const parts = dbFeature.metaData && dbFeature.metaData[\"Parts\"];\r\n const module = dbFeature.metaData && dbFeature.metaData[\"Module\"];\r\n if (module && module[0] !== \"0\") {\r\n return super.load_(dbFeature, new BottomCabinet(false, null),true, 'moduleParts');\r\n } else if (parts) {\r\n dbFeature.displayName = dbFeature.displayName.replace(/M_0(.*?) /, \"M \").replace(/ Part1/, \"\");\r\n const partNumber = +dbFeature.metaData[\"Part\"][0];\r\n return super.load_(dbFeature, new BottomCabinet(false, partNumber),\r\n true, partNumber === 1 ? 'features' : 'featuresParts');\r\n }\r\n return super.load_(dbFeature, new BottomCabinet());\r\n }\r\n\r\n navigationSubItems(filters, searchText) {\r\n const filteredAvailableFeatures = super.getFeaturesBySearchText(super.getFilteredFeaturesByFilters(filters), searchText);\r\n let featuresToDisplay = super.navigationSubItemsWithFilterMultipleConditions(this.getArrayOfConditions(), filteredAvailableFeatures);\r\n featuresToDisplay = featuresToDisplay.filter((feature) => {\r\n if (feature.metaData[\"Module\"]) {\r\n return (feature.metaData[\"Module\"][0] === \"0\" && feature.metaData[\"Part\"][0] === \"1\")\r\n && feature.metaData[\"Appliance\"] && feature.metaData[\"Appliance\"].includes(\"Range\")\r\n }\r\n return true\r\n });\r\n\r\n return featuresToDisplay.map(_ => new DesignNavigationItem(_.featureName, _));\r\n }\r\n\r\n disabledClick() {\r\n this.activeFeatureParts.forEach((activeFeaturePart) => {\r\n activeFeaturePart.disabled = this.disabled\r\n });\r\n }\r\n\r\n handleClick(ignoreLocked, clickFrom = \"\") {\r\n const parent = this.getParent();\r\n if (parent.getParent && parent.getParent()) {\r\n super.handleClick(ignoreLocked, clickFrom);\r\n parent.activeFeatureParts = parent.setActiveFeatureParts();\r\n } else {\r\n parent.bottomCabinet.activeFeature = this;\r\n }\r\n this.featureClicked();\r\n }\r\n\r\n availableFeatures(cabinetFeatures) {\r\n return cabinetFeatures.filter(cabinetFeature => cabinetFeature.partNumber === 1)\r\n }\r\n\r\n getArrayOfConditions() {\r\n return [{\r\n propName: 'RoomLayout',\r\n propValue: this.getParent().layout.getCurrentLayoutAbbreviation()\r\n }];\r\n }\r\n\r\n setLayers(layout) {\r\n if (this.activeFeature && (this.activeFeature.matchesMetaForArrayOfConditions(this.getArrayOfConditions()))) {\r\n this.checkIfFeaturePartIsMatching();\r\n super.setLayers(layout);\r\n } else {\r\n this.setDefault();\r\n super.setLayers(layout);\r\n }\r\n }\r\n\r\n getActiveFeatureConditions(fromFeature = this.activeFeature) {\r\n const arrayOfConditions = this.getArrayOfConditions();\r\n const applianceType = fromFeature.metaData[\"Appliance\"] ? fromFeature.metaData[\"Appliance\"][0] : null;\r\n const cabinetLayout = fromFeature.metaData[\"CabinetLayout\"] ? fromFeature.metaData[\"CabinetLayout\"][0] : null;\r\n const doorSet = fromFeature.metaData[\"DoorSet\"] ? fromFeature.metaData[\"DoorSet\"][0] : null;\r\n if (applianceType) {\r\n arrayOfConditions.push({\r\n propName: 'Appliance',\r\n propValue: applianceType\r\n })\r\n }\r\n if (cabinetLayout) {\r\n arrayOfConditions.push({\r\n propName: 'CabinetLayout',\r\n propValue: cabinetLayout\r\n })\r\n }\r\n if (doorSet) {\r\n arrayOfConditions.push({\r\n propName: 'DoorSet',\r\n propValue: doorSet\r\n })\r\n }\r\n return arrayOfConditions\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n if(zIndexes) {\r\n const zIndex = zIndexes.Cabinet.BottomCabinet;\r\n const zIndex2 = zIndexes.Cabinet.BottomCabinet2;\r\n const zIndex3 = zIndexes.Cabinet.Peninsula;\r\n const zIndexBox = zIndexes.Cabinet.BottomCabinetModuleBox;\r\n // const zIndexBox2 = zIndexes.Cabinet.BottomCabinetModuleBox2;\r\n if (this.activeFeature) {\r\n if (this.activeFeature.metaData[\"Module\"] && this.activeFeature.metaData[\"Module\"][0] === \"0\") {\r\n this.activeFeature.layer.zIndex = zIndexBox;\r\n } else {\r\n this.activeFeature.layer.zIndex = zIndex;\r\n }\r\n }\r\n if (this.activeFeatureParts && this.activeFeatureParts.length) {\r\n this.activeFeatureParts.forEach((activeFeaturePart, activeFeaturePartIndex) => {\r\n if (activeFeaturePart && activeFeaturePart.layer) {\r\n if (activeFeaturePart.metaData[\"Module\"] && !activeFeaturePart.metaData[\"Part\"]) {\r\n const module = activeFeaturePart.metaData[\"Module\"][0];\r\n const modulePart = activeFeaturePart.metaData[\"ModulePart\"][0];\r\n activeFeaturePart.layer.zIndex = zIndexes.Cabinet.BottomCabinetModules[module+\"_\"+modulePart];\r\n } else {\r\n activeFeaturePart.layer.zIndex = activeFeaturePartIndex === 0 ? zIndex2 : zIndex3;\r\n // if (activeFeaturePart.partName.includes(\"Part2\")) {\r\n // if (this.activeFeature.metaData[\"Module\"] && this.activeFeature.metaData[\"Module\"][0] === \"0\") {\r\n // activeFeaturePart.layer.zIndex = zIndexBox2;\r\n // } else {\r\n // activeFeaturePart.layer.zIndex = zIndex2;\r\n // }\r\n // } else if (activeFeaturePart.partName.includes(\"Part3\")) {\r\n // activeFeaturePart.layer.zIndex = zIndex3;\r\n // }\r\n }\r\n }\r\n });\r\n // go again & try to find the same zIndex, cause we might have 3_3 - 2 times...\r\n // this.activeFeatureParts\r\n // .filter(activeFeaturePart => activeFeaturePart && activeFeaturePart.layer)\r\n // .forEach((activeFeaturePart) => {\r\n // const hasTheSameZIndex = this.activeFeatureParts.some(testFeaturePart => {\r\n // return (testFeaturePart.layer.zIndex === activeFeaturePart.layer.zIndex)\r\n // && (testFeaturePart.partName !== activeFeaturePart.partName)\r\n // });\r\n // if (hasTheSameZIndex) {\r\n // activeFeaturePart.layer.zIndex++;\r\n // }\r\n // })\r\n }\r\n }\r\n }\r\n\r\n setActiveFeatureParts(fromFeature = this.activeFeature, activeFeatureConditions = []) {\r\n let activeFeatureParts = this.getActiveFeaturePartsAccordingToActiveFeature(fromFeature, activeFeatureConditions);\r\n if (fromFeature && fromFeature.metaData[\"Module\"]) {\r\n const featureName = fromFeature.getModuleFeatureName();\r\n const availableFeatures = this.moduleParts.filter((currentFeature) => {\r\n // 1) filter by module names, e.g. \"Hudson Linen White\"\r\n return featureName === currentFeature.getModuleFeatureName();\r\n });\r\n for (let i = 1; i <= this.moduleSystem.length; i++ ) {\r\n const currentModuleSystemNumber = i - 1;\r\n for (let k = 0; k <= this.moduleSystem[currentModuleSystemNumber].length - 1; k++ ) {\r\n const modulePart = this.moduleSystem[currentModuleSystemNumber][k];\r\n const modulePartSplitted = modulePart.split(\"_\");\r\n const moduleMatchingPart = availableFeatures.find((feature) => {\r\n return feature.metaData[\"ModulePartWidth\"] && feature.metaData[\"ModulePartHeight\"]\r\n && +feature.metaData[\"Module\"][0] === i\r\n && feature.metaData[\"ModulePartWidth\"][0] === modulePartSplitted[0]\r\n && feature.metaData[\"ModulePartHeight\"][0] === modulePartSplitted[1]\r\n && feature.metaData[\"ModulePart\"][0] === modulePartSplitted[2]\r\n });\r\n if (moduleMatchingPart) {\r\n activeFeatureParts.push(moduleMatchingPart);\r\n // } else { // this is for debugging only - look for features which are not exist\r\n // console.log(\"this.moduleSystem[i]\", i);\r\n // console.log(\"modulePartIndex\", k);\r\n }\r\n }\r\n }\r\n activeFeatureParts.forEach((activeFeaturePart) => {\r\n activeFeaturePart.disabled = this.disabled\r\n });\r\n }\r\n return activeFeatureParts\r\n }\r\n\r\n canUseNavigationFilter() {\r\n return this.activeFeature && this.activeFeature.metaData[\"Module\"]\r\n && this.activeFeature.metaData[\"Module\"][0] === \"0\";\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport DesignNavigationItem from \"../../../../visComponents/designNavigationItem\";\r\nimport {topCabinetModuleSystem} from \"./cabinetModuleSystem\";\r\nimport store from \"../../../../../store\";\r\n\r\nexport default class TopCabinet extends IntermediatePart {\r\n constructor(isChild, partNumber = 0) {\r\n super(isChild);\r\n this.partNumber = partNumber;\r\n this.partId = 'top_cabinet';\r\n this.partName = 'Top Cabinet';\r\n this.translateId = \"visualizer.kitchen.cabinet.top_cabinet\";\r\n this.canBeDisabled = true;\r\n this.layerPriority = 1;\r\n if (isChild) {\r\n this.moduleSystem = topCabinetModuleSystem;\r\n this.defaultInlayType = \"Wood\"; // Cascade or Wood\r\n this.inlayTypes = [{\r\n name: \"Cascade\",\r\n moduleParts: [\"2_4\", \"2_5\", \"5_4\", \"5_5\",\"7_4\", \"7_5\",]\r\n }]; // array of objects, for ex. {name: \"Cascade\", moduleParts: [\"3_2\", \"7_56\"]}\r\n }\r\n }\r\n\r\n load(dbFeature) {\r\n const parts = dbFeature.metaData && dbFeature.metaData[\"Parts\"];\r\n const module = dbFeature.metaData && dbFeature.metaData[\"Module\"];\r\n if (module && module[0] !== \"0\") {\r\n return super.load_(dbFeature, new TopCabinet(false, null),true, 'moduleParts');\r\n } else if (parts) {\r\n dbFeature.displayName = dbFeature.displayName.replace(/M_0(.*?) /, \"M \").replace(/ Part1/, \"\");\r\n const partNumber = +dbFeature.metaData[\"Part\"][0];\r\n return super.load_(dbFeature, new TopCabinet(false, partNumber),\r\n true, partNumber === 1 ? 'features' : 'featuresParts');\r\n }\r\n return super.load_(dbFeature, new TopCabinet());\r\n }\r\n\r\n navigationSubItems(filters, searchText) {\r\n const filteredAvailableFeatures = super.getFeaturesBySearchText(super.getFilteredFeaturesByFilters(filters), searchText);\r\n let featuresToDisplay = super.navigationSubItemsWithFilterMultipleConditions(this.getArrayOfConditions(), filteredAvailableFeatures);\r\n const topCabinetApplianceType = this.getParent().getTopCabinetApplianceType();\r\n const allowedPorticos = [\r\n \"Portico White Chocolate S Hood Layout 2\",\r\n \"Portico White Chocolate L Hood Layout 2\",\r\n \"Portico White Chocolate SP Hood Layout 2\",\r\n \"Portico White Chocolate S Microwave Layout 2\",\r\n \"Portico White Chocolate L Microwave Layout 2\",\r\n \"Portico White Chocolate SP Microwave Layout 2\"\r\n ];\r\n featuresToDisplay = featuresToDisplay\r\n .filter((feature) => {\r\n return feature.metaData[\"Appliance\"] && feature.metaData[\"Appliance\"].includes(topCabinetApplianceType)\r\n })\r\n .filter((feature) => {\r\n if (feature.metaData[\"Module\"]) {\r\n return (feature.metaData[\"Module\"][0] === \"0\" && feature.metaData[\"Part\"][0] === \"1\")\r\n }\r\n return true\r\n })\r\n .filter((feature) => {\r\n if (feature.partName.includes(\"Portico White Chocolate\") && !allowedPorticos.includes(feature.partName)) {\r\n return false\r\n }\r\n return true\r\n });\r\n\r\n return featuresToDisplay.map(_ => new DesignNavigationItem(_.featureName, _));\r\n }\r\n\r\n changeLayout() {\r\n if (this.disabled) {\r\n this.disabled = false;\r\n this.disabledClick();\r\n }\r\n }\r\n\r\n disabledClick() {\r\n this.activeFeatureParts.forEach((activeFeaturePart) => {\r\n activeFeaturePart.disabled = this.disabled\r\n });\r\n const topHandle = this.getParent().topHandle;\r\n if (topHandle) {\r\n topHandle.disabled = this.disabled;\r\n }\r\n const crownMolding = this.getParent().crownMolding;\r\n if (crownMolding) {\r\n crownMolding.disabled = this.disabled;\r\n }\r\n }\r\n\r\n async handleClick(ignoreLocked, clickFrom = \"\") {\r\n const parent = this.getParent();\r\n const layout = parent.getParent().layout;\r\n const backsplash = layout.parts[\"Walls\"] && layout.parts[\"Walls\"].backsplash;\r\n const backsplashActiveFeature = backsplash ? backsplash.activeFeature : null;\r\n\r\n if (backsplashActiveFeature && backsplash.featureIsFullWall(backsplashActiveFeature) && this.metaData[\"CabinetLayout\"]) {\r\n const splittedName = backsplashActiveFeature.getCountertopGroupsSplittedFeatureName();\r\n const conditions = [{\r\n propName: 'CabinetLayout',\r\n propValue: this.metaData[\"CabinetLayout\"]\r\n }];\r\n if (!backsplashActiveFeature.matchesMetaForArrayOfConditions(conditions)) {\r\n const matchedByName = backsplash.findFeatureByPartName(splittedName);\r\n if (!matchedByName || !matchedByName.matchesMetaForArrayOfConditions(conditions)) {\r\n await backsplash.setFeatureByName(splittedName);\r\n }\r\n }\r\n }\r\n\r\n super.handleClick(ignoreLocked, clickFrom);\r\n parent.activeFeatureParts = parent.setActiveFeatureParts();\r\n\r\n this.featureClicked();\r\n }\r\n\r\n availableFeatures(cabinetFeatures) {\r\n return cabinetFeatures.filter(cabinetFeature => cabinetFeature.partNumber === 1)\r\n }\r\n\r\n getArrayOfConditions() {\r\n const cabinetParent = this.getParent();\r\n return [{\r\n propName: 'RoomLayout',\r\n propValue: cabinetParent.layout.getCurrentLayoutAbbreviation()\r\n // },{\r\n // propName: 'Appliance',\r\n // propValue: cabinetParent.getTopCabinetApplianceType()\r\n }];\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n if(zIndexes) {\r\n const zIndex = zIndexes.Cabinet.TopCabinet;\r\n const zIndex2 = zIndexes.Cabinet.TopCabinet2;\r\n const zIndexBox = zIndexes.Cabinet.TopCabinetModuleBox;\r\n const zIndexBox2 = zIndexes.Cabinet.TopCabinetModuleBox2;\r\n if (this.activeFeature) {\r\n if (this.activeFeature.metaData[\"Module\"] && this.activeFeature.metaData[\"Module\"][0] === \"0\") {\r\n this.activeFeature.layer.zIndex = zIndexBox;\r\n } else {\r\n this.activeFeature.layer.zIndex = zIndex;\r\n }\r\n }\r\n if (this.activeFeatureParts && this.activeFeatureParts.length) {\r\n this.activeFeatureParts.forEach((activeFeaturePart) => {\r\n if (activeFeaturePart && activeFeaturePart.layer) {\r\n if (activeFeaturePart.metaData[\"Module\"] && !activeFeaturePart.metaData[\"Part\"]) {\r\n const module = activeFeaturePart.metaData[\"Module\"][0];\r\n const modulePart = activeFeaturePart.metaData[\"ModulePart\"][0];\r\n activeFeaturePart.layer.zIndex = zIndexes.Cabinet.TopCabinetModules[module+\"_\"+modulePart];\r\n } else if (this.activeFeature.metaData[\"Module\"] && this.activeFeature.metaData[\"Module\"][0] === \"0\") {\r\n activeFeaturePart.layer.zIndex = zIndexBox2;\r\n } else {\r\n activeFeaturePart.layer.zIndex = zIndex2;\r\n }\r\n }\r\n });\r\n // // go again & try to find the same zIndex, cause we might have 3_3 - 2 times...\r\n // this.activeFeatureParts\r\n // .filter(activeFeaturePart => activeFeaturePart && activeFeaturePart.layer)\r\n // .forEach((activeFeaturePart) => {\r\n // const hasTheSameZIndex = this.activeFeatureParts.some(testFeaturePart => {\r\n // return (testFeaturePart.layer.zIndex === activeFeaturePart.layer.zIndex)\r\n // && (testFeaturePart.partName !== activeFeaturePart.partName)\r\n // });\r\n // if (hasTheSameZIndex) {\r\n // activeFeaturePart.layer.zIndex++;\r\n // }\r\n // })\r\n }\r\n }\r\n }\r\n\r\n matchesInlayType(feature, module = \"1\", modulePart = \"1\") {\r\n\r\n const featureFilterValueIDs = feature.dbFeature.filterValueIDs;\r\n if (!featureFilterValueIDs) {\r\n return true\r\n }\r\n\r\n const filterGroups = store.getState().filterState.filterGroups;\r\n const filterGroup = filterGroups.find(group => group.name === \"Inlay Type\");\r\n if (!filterGroup) {\r\n return true\r\n }\r\n\r\n const modulePartJoined = module + \"_\" + modulePart;\r\n\r\n if (this.inlayTypes.length) {\r\n for (let i = 0; i <= this.inlayTypes.length - 1; i++) {\r\n const inlayTypeObject = this.inlayTypes[i];\r\n const fValue = filterGroup.values.find(val => {\r\n return (inlayTypeObject.moduleParts.includes(modulePartJoined))\r\n ? val.value === inlayTypeObject.name\r\n : val.value === this.defaultInlayType\r\n });\r\n // console.log(\"fValue\", fValue);\r\n // console.log(\"featureFilterValueIDs[filterGroup.id]\", featureFilterValueIDs[filterGroup.id]);\r\n return fValue && featureFilterValueIDs[filterGroup.id] && featureFilterValueIDs[filterGroup.id].includes(fValue.id)\r\n }\r\n } else {\r\n const fValue = filterGroup.values.find(val => val.value === this.defaultInlayType);\r\n return fValue && featureFilterValueIDs[filterGroup.id] && featureFilterValueIDs[filterGroup.id].includes(fValue.id)\r\n }\r\n }\r\n\r\n setLayers(layout) {\r\n if (this.activeFeature && (this.activeFeature.matchesMetaForArrayOfConditions(this.getArrayOfConditions()))) {\r\n this.checkIfFeaturePartIsMatching();\r\n super.setLayers(layout);\r\n } else {\r\n this.setDefault();\r\n super.setLayers(layout);\r\n }\r\n }\r\n\r\n getActiveFeatureConditions(fromFeature = this.activeFeature) {\r\n const arrayOfConditions = this.getArrayOfConditions();\r\n const applianceType = fromFeature.metaData[\"Appliance\"] ? fromFeature.metaData[\"Appliance\"][0] : null;\r\n const cabinetLayout = fromFeature.metaData[\"CabinetLayout\"] ? fromFeature.metaData[\"CabinetLayout\"][0] : null;\r\n const doorSet = fromFeature.metaData[\"DoorSet\"] ? fromFeature.metaData[\"DoorSet\"][0] : null;\r\n if (applianceType) {\r\n arrayOfConditions.push({\r\n propName: 'Appliance',\r\n propValue: applianceType\r\n })\r\n }\r\n if (cabinetLayout) {\r\n arrayOfConditions.push({\r\n propName: 'CabinetLayout',\r\n propValue: cabinetLayout\r\n })\r\n }\r\n if (doorSet) {\r\n arrayOfConditions.push({\r\n propName: 'DoorSet',\r\n propValue: doorSet\r\n })\r\n }\r\n return arrayOfConditions\r\n }\r\n\r\n setActiveFeatureParts(fromFeature = this.activeFeature, activeFeatureConditions = []) {\r\n let activeFeatureParts = this.getActiveFeaturePartsAccordingToActiveFeature(fromFeature, activeFeatureConditions);\r\n if (fromFeature && fromFeature.metaData[\"Module\"]) {\r\n activeFeatureParts = [...activeFeatureParts, ...this.findFeaturesByModuleSystem(fromFeature)];\r\n if (fromFeature.metaData[\"Appliance\"] && fromFeature.metaData[\"Appliance\"].includes(\"Hood\")) {\r\n activeFeatureParts = activeFeatureParts.filter(fPart => fPart.metaData[\"Module\"]\r\n && !fPart.metaData[\"Module\"].includes(\"6\"))\r\n }\r\n activeFeatureParts.forEach((activeFeaturePart) => {\r\n activeFeaturePart.disabled = this.disabled\r\n });\r\n }\r\n return activeFeatureParts\r\n }\r\n\r\n findFeaturesByModuleSystem(fromFeature = this.activeFeature) {\r\n let activeFeatureParts = [];\r\n const featureName = fromFeature.getModuleFeatureName();\r\n const availableFeatures = this.moduleParts.filter((currentFeature) => {\r\n // 1) filter by module names, e.g. \"Hudson Linen White\"\r\n return featureName === currentFeature.getModuleFeatureName();\r\n });\r\n for (let i = 1; i <= this.moduleSystem.length; i++ ) {\r\n const currentModuleSystemNumber = i - 1;\r\n for (let k = 0; k <= this.moduleSystem[currentModuleSystemNumber].length - 1; k++ ) {\r\n const modulePart = this.moduleSystem[currentModuleSystemNumber][k];\r\n const modulePartSplitted = modulePart.split(\"_\");\r\n const moduleMatchingPart = availableFeatures.find((feature) => {\r\n return +feature.metaData[\"Module\"][0] === i\r\n && feature.metaData[\"ModulePartWidth\"][0] === modulePartSplitted[0]\r\n && feature.metaData[\"ModulePartHeight\"][0] === modulePartSplitted[1]\r\n && feature.metaData[\"ModulePart\"][0] === modulePartSplitted[2]\r\n && this.matchesInlayType(feature, feature.metaData[\"Module\"][0], modulePartSplitted[2])\r\n });\r\n if (moduleMatchingPart) {\r\n activeFeatureParts.push(moduleMatchingPart);\r\n // } else { // this is for debugging only - look for features which are not exist\r\n // console.log(\"this.moduleSystem[i]\", i);\r\n // console.log(\"modulePartIndex\", k);\r\n }\r\n }\r\n }\r\n return activeFeatureParts\r\n }\r\n\r\n getFilterGroupObjectByInlayType(inlayTypeName) {\r\n const filterGroups = store.getState().filterState.filterGroups;\r\n const filterGroup = filterGroups.find(group => group.name === \"Inlay Type\");\r\n return {\r\n filterGroup,\r\n fValue: filterGroup && filterGroup.values.find(val => val.value === inlayTypeName)\r\n };\r\n }\r\n\r\n findFeatureByModuleAndModulePart(modulePart = \"1_1\", inlayTypeName = \"Wood\") {\r\n const featureName = this.activeFeature.getModuleFeatureName();\r\n const availableFeatures = this.moduleParts.filter((currentFeature) => {\r\n // 1) filter by module names, e.g. \"Hudson Linen White\"\r\n return featureName === currentFeature.getModuleFeatureName();\r\n });\r\n const modulePartSplitted = modulePart.split(\"_\");\r\n const filterObject = this.getFilterGroupObjectByInlayType(inlayTypeName);\r\n\r\n for (let i = 1; i <= this.moduleSystem.length; i++ ) {\r\n const currentModuleSystemNumber = i - 1;\r\n for (let k = 0; k <= this.moduleSystem[currentModuleSystemNumber].length - 1; k++ ) {\r\n const moduleMatchingPart = availableFeatures.find((feature) => {\r\n\r\n if (!feature.dbFeature.filterValueIDs[filterObject.filterGroup.id]) {\r\n // console.log(\"No Inlay Type Filter\", feature);\r\n return false\r\n }\r\n\r\n return +feature.metaData[\"Module\"][0] === i\r\n && feature.metaData[\"ModulePartWidth\"][0] === modulePartSplitted[0]\r\n && feature.metaData[\"ModulePartHeight\"][0] === modulePartSplitted[1]\r\n && feature.metaData[\"ModulePart\"][0] === modulePartSplitted[2]\r\n && filterObject.filterGroup && filterObject.fValue &&\r\n feature.dbFeature.filterValueIDs[filterObject.filterGroup.id].includes(filterObject.fValue.id)\r\n });\r\n if (moduleMatchingPart) {\r\n return moduleMatchingPart\r\n }\r\n }\r\n }\r\n }\r\n\r\n canUseNavigationFilter() {\r\n return this.activeFeature && this.activeFeature.metaData[\"Module\"]\r\n && this.activeFeature.metaData[\"Module\"][0] === \"0\";\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport DesignNavigationItem from \"../../../../visComponents/designNavigationItem\";\r\nimport Cabinet from \"../../parts/cabinet\";\r\nimport Appliance from \"../../parts/appliance\";\r\nimport store from \"../../../../../store\";\r\n\r\nexport default class CrownMolding extends IntermediatePart {\r\n constructor(isChild, partNumber = 0) {\r\n super(isChild);\r\n this.partNumber = partNumber;\r\n this.partId = 'crown_molding';\r\n this.partName = 'Crown Molding';\r\n this.canBeDisabled = true;\r\n this.layerPriority = 3;\r\n this.dbName = \"crown Molding\";\r\n this.translateId = \"visualizer.kitchen.cabinet.crown_molding\";\r\n }\r\n\r\n load(dbFeature) {\r\n if (!dbFeature.metaData[\"CabinetLayout\"]) {\r\n dbFeature.metaData[\"CabinetLayout\"] = [\"All\"]\r\n }\r\n if (!dbFeature.metaData[\"HoodType\"]) {\r\n dbFeature.metaData[\"HoodType\"] = [\"All\"]// it can be \"Wood\"\r\n }\r\n const parts = dbFeature.metaData && dbFeature.metaData[\"Parts\"];\r\n if (parts) {\r\n const partNumber = +dbFeature.metaData[\"Part\"][0];\r\n return super.load_(dbFeature, new CrownMolding(false, partNumber),\r\n true, partNumber === 1 ? 'features' : 'featuresParts');\r\n } else {\r\n return super.load_(dbFeature, new CrownMolding());\r\n }\r\n }\r\n\r\n disabledClick() {\r\n this.activeFeatureParts.forEach((activeFeaturePart) => {\r\n activeFeaturePart.disabled = this.disabled\r\n });\r\n const topCabinet = this.getParent().topCabinet;\r\n if (topCabinet && topCabinet.disabled && !this.disabled) {\r\n topCabinet.disabled = this.disabled;\r\n topCabinet.activeFeatureParts.forEach((activeFeaturePart) => {\r\n activeFeaturePart.disabled = this.disabled\r\n });\r\n const topHandle = this.getParent().topHandle;\r\n if (topHandle) {\r\n topHandle.disabled = this.disabled;\r\n }\r\n }\r\n }\r\n\r\n handleClick(ignoreLocked) {\r\n const parent = this.getParent();\r\n if (parent.getParent && parent.getParent()) {\r\n super.handleClick(ignoreLocked);\r\n parent.activeFeatureParts = parent.setActiveFeatureParts();\r\n } else {\r\n parent.crownMolding.activeFeature = this;\r\n }\r\n this.featureClicked();\r\n }\r\n\r\n availableFeatures(cabinetFeatures) {\r\n return cabinetFeatures.filter(cabinetFeature => cabinetFeature.partNumber === 1)\r\n }\r\n\r\n navigationSubItems(filters, searchText) {\r\n const filteredAvailableFeatures = super.getFeaturesBySearchText(super.getFilteredFeaturesByFilters(filters), searchText);\r\n let featuresToDisplay = super.navigationSubItemsWithFilterMultipleConditions(this.getArrayOfConditions(), filteredAvailableFeatures);\r\n featuresToDisplay = this.getFilteredFeaturesByTopCabinetFilters(featuresToDisplay);\r\n return featuresToDisplay.map(_ => new DesignNavigationItem(_.featureName, _));\r\n }\r\n\r\n getFilteredFeaturesByTopCabinetFilters(filteredFeatures) {\r\n const cabinetParent = this.getParent().layout.parts[Cabinet.id];\r\n const topCabinet = cabinetParent.topCabinet;\r\n\r\n if (topCabinet && topCabinet.activeFeature && topCabinet.activeFeature.dbFeature && topCabinet.activeFeature.dbFeature.filterValueIDs) {\r\n const activeTopCabinetFilters = topCabinet.activeFeature.dbFeature.filterValueIDs;\r\n const filterGroups = store.getState().filterState.filterGroups;\r\n const woodTypeFilter = filterGroups.find(group => group.name === \"WoodType\");\r\n const stainColorFilter = filterGroups.find(group => group.name === \"StainColor\");\r\n\r\n return filteredFeatures.filter((currentFeature) => {\r\n return woodTypeFilter && stainColorFilter && this.featureIsMatchingFilters(currentFeature, activeTopCabinetFilters, [\r\n woodTypeFilter, stainColorFilter\r\n ])\r\n });\r\n }\r\n return filteredFeatures\r\n }\r\n\r\n setLayers(layout) {\r\n\r\n const topCabinet = this.getParent().topCabinet;\r\n if (topCabinet && (topCabinet.disabled || !topCabinet.featureGroupEnabled)) {\r\n super.hideLayers();\r\n return\r\n }\r\n\r\n if (this.activeFeature && this.matchesByMetaDataAndFilters()\r\n && (this.activeFeature.matchesMetaForArrayOfConditions(this.getArrayOfConditions()))) {\r\n this.checkIfFeaturePartIsMatching();\r\n super.setLayers(layout);\r\n } else {\r\n this.setDefault();\r\n super.setLayers(layout);\r\n }\r\n }\r\n\r\n matchesByMetaDataAndFilters() {\r\n const cabinetParent = this.getParent().layout.parts[Cabinet.id];\r\n const topCabinet = cabinetParent.topCabinet;\r\n\r\n if (topCabinet && topCabinet.activeFeature && topCabinet.activeFeature.dbFeature && topCabinet.activeFeature.dbFeature.filterValueIDs) {\r\n const activeTopCabinetFilters = topCabinet.activeFeature.dbFeature.filterValueIDs;\r\n const filterGroups = store.getState().filterState.filterGroups;\r\n const woodTypeFilter = filterGroups.find(group => group.name === \"WoodType\");\r\n const stainColorFilter = filterGroups.find(group => group.name === \"StainColor\");\r\n return woodTypeFilter && stainColorFilter && this.featureIsMatchingFilters(this.activeFeature, activeTopCabinetFilters, [\r\n woodTypeFilter, stainColorFilter\r\n ]) && this.activeFeature.matchesMetaForArrayOfConditions(this.getArrayOfConditions())\r\n }\r\n return this.activeFeature.matchesMetaForArrayOfConditions(this.getArrayOfConditions())\r\n }\r\n\r\n setDefault() {\r\n const filteredFeatures = this.features.filter(f => f.matchesMetaForArrayOfConditions(this.getArrayOfConditions()));\r\n const filteredFeaturesByTopCabinetFilters = this.getFilteredFeaturesByTopCabinetFilters(filteredFeatures);\r\n this.activeFeature = filteredFeaturesByTopCabinetFilters[0] || null;\r\n this.activeFeatureParts = this.setActiveFeatureParts();\r\n }\r\n\r\n getArrayOfConditions() {\r\n const cabinetParent = this.getParent();\r\n let cabinetLayout = [\"All\"];\r\n if (cabinetParent.topCabinet && cabinetParent.topCabinet.activeFeature) {\r\n if (cabinetParent.topCabinet.activeFeature.metaData[\"CabinetLayout\"]) {\r\n cabinetLayout = cabinetParent.topCabinet.activeFeature.metaData[\"CabinetLayout\"][0]\r\n }\r\n }\r\n return [{\r\n propName: 'CabinetLayout',\r\n propValue: cabinetLayout\r\n }, {\r\n propName: \"Appliance\",\r\n propValue: cabinetParent.getTopCabinetApplianceType()\r\n }, {\r\n propName: 'RoomLayout',\r\n propValue: cabinetParent.layout.getCurrentLayoutAbbreviation()\r\n }];\r\n }\r\n\r\n getActiveFeatureConditions() {\r\n let hoodType = [\"All\"];\r\n const cabinetParent = this.getParent();\r\n const isHood = cabinetParent.getTopCabinetApplianceType() === \"Hood\";\r\n const isMicrowave = cabinetParent.getTopCabinetApplianceType() === \"Microwave\";\r\n const applianceParent = cabinetParent.layout.parts[Appliance.id];\r\n if (isHood && applianceParent.hood && applianceParent.hood.activeFeature\r\n && applianceParent.hood.activeFeature.metaData && applianceParent.hood.activeFeature.metaData[\"HoodType\"]) {\r\n hoodType = applianceParent.hood.activeFeature.metaData[\"HoodType\"][0];\r\n }\r\n const conditions = this.getArrayOfConditions();\r\n conditions.push({\r\n propName: \"HoodType\",\r\n propValue: isMicrowave ? \"Wood\" : hoodType\r\n });\r\n return conditions\r\n }\r\n\r\n setActiveFeatureParts(fromFeature = this.activeFeature, activeFeatureConditions = []) {\r\n return this.getActiveFeaturePartsAccordingToActiveFeature(fromFeature, activeFeatureConditions);\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n if(zIndexes) {\r\n const zIndex = zIndexes.Cabinet.CrownMolding;\r\n const zIndex2 = zIndexes.Cabinet.CrownMolding2;\r\n if (this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndex;\r\n }\r\n if (this.placeholderFeature) {\r\n this.placeholderFeature.layer.zIndex = zIndex;\r\n }\r\n if (this.activeFeatureParts && this.activeFeatureParts.length) {\r\n this.activeFeatureParts.forEach((activeFeaturePart) => {\r\n if(activeFeaturePart && activeFeaturePart.layer) activeFeaturePart.layer.zIndex = zIndex2;\r\n })\r\n }\r\n }\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\n\r\nexport default class Fridge extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'fridge';\r\n this.partName = 'Fridge';\r\n this.translateId = \"visualizer.kitchen.appliance.fridge\";\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new Fridge());\r\n }\r\n\r\n setLayers(layout) {\r\n if (this.activeFeature && (this.activeFeature.matchesMetaForArrayOfConditions(this.getArrayOfConditions())\r\n || (this.activeFeature.notAvailableInVisualizer && this.placeholderFeature))) {\r\n return super.setLayers(layout);\r\n }\r\n\r\n this.setDefault(layout);\r\n return super.setLayers(layout);\r\n }\r\n\r\n getArrayOfConditions() {\r\n return [{\r\n propName: 'RoomLayout',\r\n propValue: this.getParent().layout.getCurrentLayoutAbbreviation()\r\n }];\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n if(zIndexes) {\r\n const zIndex = zIndexes.Appliances.Fridge;\r\n if (this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndex;\r\n }\r\n if (this.placeholderFeature) {\r\n this.placeholderFeature.layer.zIndex = zIndex;\r\n }\r\n }\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\n\r\nexport default class FridgeShadow extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'fridge_shadow';\r\n this.partName = 'Fridge Shadow';\r\n this.visible = false;\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new FridgeShadow());\r\n }\r\n\r\n setLayers(layout) {\r\n\r\n const fridge = this.getParent().fridge;\r\n if (fridge && fridge.disabled) {\r\n super.hideLayers();\r\n return\r\n }\r\n\r\n if (this.activeFeature && (this.activeFeature.matchesMetaForArrayOfConditions(this.getArrayOfConditions())\r\n || (this.activeFeature.notAvailableInVisualizer && this.placeholderFeature))) {\r\n return super.setLayers(layout);\r\n }\r\n\r\n this.setDefault(layout);\r\n return super.setLayers(layout);\r\n }\r\n\r\n setDefault() {\r\n const filteredFeatures = this.features.filter(f => f.matchesMetaForArrayOfConditions(this.getArrayOfConditions()));\r\n this.activeFeature = filteredFeatures[0];\r\n }\r\n\r\n getArrayOfConditions() {\r\n return [{\r\n propName: 'RoomLayout',\r\n propValue: this.getParent().layout.getCurrentLayoutAbbreviation()\r\n }];\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n if (zIndexes && this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndexes.Appliances.FridgeShadow;\r\n }\r\n }\r\n}","import uniqBy from \"lodash/uniqBy\";\r\n\r\nimport {IntermediatePart} from \"../../intermediatePart\";\r\nimport DesignNavigationItem from \"../../../../visComponents/designNavigationItem\";\r\nimport Cabinet from \"../../parts/cabinet\";\r\nimport store from \"../../../../../store\";\r\nimport {METADATA} from \"../../constants\";\r\nimport {getFeatureIsLocked} from \"../../../../../misc/helpers\";\r\n\r\nexport default class Hood extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'hood';\r\n this.partName = 'Hood';\r\n this.canBeDisabled = true;\r\n this.translateId = \"visualizer.kitchen.appliance.hood\";\r\n }\r\n\r\n load(dbFeature) {\r\n dbFeature.metaData.Appliance = [\"Hood\"];\r\n if (!dbFeature.metaData[\"CabinetLayout\"]) {\r\n dbFeature.metaData[\"CabinetLayout\"] = [METADATA.ALL]\r\n }\r\n if (!dbFeature.metaData[\"Cabinet\"]) {\r\n dbFeature.metaData[\"Cabinet\"] = [METADATA.ALL]\r\n }\r\n return super.load_(dbFeature, new Hood());\r\n }\r\n\r\n handleClick(ignoreLocked) {\r\n super.handleClick(ignoreLocked); // 1) set hood\r\n if (!this.notAvailableInVisualizer && !getFeatureIsLocked(this, ignoreLocked)) {\r\n const parent = this.getParent();\r\n const applianceParent = parent.getParent();\r\n const cabinetParent = applianceParent.layout.parts[Cabinet.id];\r\n if (cabinetParent && cabinetParent.topCabinet && cabinetParent.topCabinet.activeFeature\r\n && cabinetParent.getTopCabinetApplianceType() !== \"Hood\") {\r\n const topCabinetConditions = cabinetParent.topCabinet.getArrayOfConditions();\r\n topCabinetConditions.push({\r\n propName: \"Appliance\",\r\n propValue: \"Hood\"\r\n });\r\n const matchingCabinets = super.navigationSubItemsWithFilterMultipleConditions(\r\n topCabinetConditions,\r\n cabinetParent.topCabinet.features\r\n );\r\n if (matchingCabinets.length) {\r\n const currentName = cabinetParent.topCabinet.activeFeature.partName.split(\" Microwave\")[0];\r\n const matchingCabinet = matchingCabinets.find(cabinet => {\r\n return cabinet.partName.split(\" Hood\")[0] === currentName\r\n });\r\n (matchingCabinet || matchingCabinets[0]).handleClick(ignoreLocked);\r\n }\r\n }\r\n this.featureClicked();\r\n }\r\n }\r\n\r\n navigationSubItems(filters, searchText) {\r\n const filteredAvailableFeatures = super.getFeaturesBySearchText(super.getFilteredFeaturesByFilters(filters), searchText);\r\n let featuresToDisplay = super.navigationSubItemsWithFilterMultipleConditions(this.getArrayOfConditions(true), filteredAvailableFeatures);\r\n featuresToDisplay = [\r\n ...this.getFilteredFeaturesByTopCabinetFilters(featuresToDisplay),\r\n ...this.getFeaturesMatchingAllCabinets(featuresToDisplay)\r\n ];\r\n return uniqBy(featuresToDisplay, (feature) => feature.dbFeature.id)\r\n .map(_ => new DesignNavigationItem(_.featureName, _));\r\n }\r\n\r\n setLayers(layout) {\r\n const cabinetParent = this.getParent().layout.parts[Cabinet.id];\r\n if (cabinetParent && cabinetParent.getTopCabinetApplianceType() === \"Microwave\") {\r\n super.hideLayers();\r\n return\r\n }\r\n\r\n if (this.activeFeature && ((\r\n this.matchesByMetaDataAndFilters() || this.getFeaturesMatchingAllCabinets()\r\n .some(feature => feature.dbFeature.id === this.activeFeature.dbFeature.id)\r\n ) || (this.activeFeature.notAvailableInVisualizer && this.placeholderFeature))) {\r\n super.setLayers(layout);\r\n } else {\r\n this.setDefault();\r\n super.setLayers(layout);\r\n }\r\n }\r\n\r\n matchesByMetaDataAndFilters() {\r\n const cabinetParent = this.getParent().layout.parts[Cabinet.id];\r\n const topCabinet = cabinetParent.topCabinet;\r\n\r\n if (topCabinet && topCabinet.activeFeature && topCabinet.activeFeature.dbFeature && topCabinet.activeFeature.dbFeature.filterValueIDs) {\r\n const activeTopCabinetFilters = topCabinet.activeFeature.dbFeature.filterValueIDs;\r\n const filterGroups = store.getState().filterState.filterGroups;\r\n const woodTypeFilter = filterGroups.find(group => group.name === \"WoodType\");\r\n const stainColorFilter = filterGroups.find(group => group.name === \"StainColor\");\r\n return woodTypeFilter && stainColorFilter && this.featureIsMatchingFilters(this.activeFeature, activeTopCabinetFilters, [\r\n woodTypeFilter, stainColorFilter\r\n ])\r\n }\r\n return this.activeFeature.matchesMetaForArrayOfConditions(this.getArrayOfConditions())\r\n }\r\n\r\n setDefault() {\r\n const filteredFeatures = this.features.filter(f => f.matchesMetaForArrayOfConditions(this.getArrayOfConditions()));\r\n const filteredFeaturesByTopCabinetFilters = this.getFilteredFeaturesByTopCabinetFilters(filteredFeatures);\r\n const featuresMatchingAllCabinets = this.getFeaturesMatchingAllCabinets(filteredFeatures);\r\n if (filteredFeaturesByTopCabinetFilters.length) {\r\n this.activeFeature = filteredFeaturesByTopCabinetFilters[0]\r\n } else {\r\n // const matchingFeatureExist = super.tryToSetTheSameFeature(filteredFeatures, null);\r\n // if (!matchingFeatureExist) {\r\n this.activeFeature = featuresMatchingAllCabinets[0] || filteredFeatures[0] || null;\r\n // }\r\n }\r\n }\r\n\r\n getFeaturesMatchingAllCabinets(filteredFeatures = this.features) {\r\n return filteredFeatures.filter((feature) => {\r\n return feature.dbFeature.metaData[\"CabinetLayout\"].includes(METADATA.ALL)\r\n || feature.dbFeature.metaData[\"Cabinet\"].includes(METADATA.ALL)\r\n });\r\n }\r\n\r\n getFilteredFeaturesByTopCabinetFilters(filteredFeatures) {\r\n const cabinetParent = this.getParent().layout.parts[Cabinet.id];\r\n const topCabinet = cabinetParent.topCabinet;\r\n\r\n if (topCabinet && topCabinet.activeFeature && topCabinet.activeFeature.dbFeature && topCabinet.activeFeature.dbFeature.filterValueIDs) {\r\n const activeTopCabinetFilters = topCabinet.activeFeature.dbFeature.filterValueIDs;\r\n const filterGroups = store.getState().filterState.filterGroups;\r\n const woodTypeFilter = filterGroups.find(group => group.name === \"WoodType\");\r\n const stainColorFilter = filterGroups.find(group => group.name === \"StainColor\");\r\n\r\n return filteredFeatures.filter((currentFeature) => {\r\n return woodTypeFilter && stainColorFilter && this.featureIsMatchingFilters(currentFeature, activeTopCabinetFilters, [\r\n woodTypeFilter, stainColorFilter\r\n ])\r\n });\r\n }\r\n return filteredFeatures\r\n }\r\n\r\n getArrayOfConditions(ignoreConditions) {\r\n const cabinetParent = this.getParent().layout.parts[Cabinet.id];\r\n const conditions = [{\r\n propName: \"Cabinet\",\r\n propValue: cabinetParent.getTopCabinetType()\r\n },{\r\n propName: 'CabinetLayout',\r\n propValue: cabinetParent.getTopCabinetShadowLayout()\r\n }];\r\n if (!ignoreConditions) {\r\n conditions.push({\r\n propName: \"Appliance\",\r\n propValue: cabinetParent.getTopCabinetApplianceType()\r\n })\r\n }\r\n return conditions;\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n if(zIndexes) {\r\n const zIndex = zIndexes.Appliances.Hood;\r\n if (this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndex;\r\n }\r\n if (this.placeholderFeature) {\r\n this.placeholderFeature.layer.zIndex = zIndex;\r\n }\r\n }\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\n\r\nexport default class Dishwasher extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'dishwasher';\r\n this.partName = 'Dishwasher';\r\n this.translateId = \"visualizer.kitchen.appliance.dishwasher\";\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new Dishwasher());\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n if(zIndexes) {\r\n const zIndex = zIndexes.Appliances.Dishwasher;\r\n if (this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndex;\r\n }\r\n if (this.placeholderFeature) {\r\n this.placeholderFeature.layer.zIndex = zIndex;\r\n }\r\n }\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport DesignNavigationItem from \"../../../../visComponents/designNavigationItem\";\r\nimport Cabinet from \"../../parts/cabinet\";\r\n\r\nexport default class Microwave extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'microwave';\r\n this.partName = 'Microwave';\r\n this.translateId = \"visualizer.kitchen.appliance.microwave\";\r\n }\r\n\r\n load(dbFeature) {\r\n dbFeature.metaData.Appliance = [\"Microwave\"];\r\n return super.load_(dbFeature, new Microwave());\r\n }\r\n\r\n handleClick(ignoreLocked) {\r\n const parent = this.getParent();\r\n super.handleClick(ignoreLocked); // 1) set microwave\r\n\r\n const applianceParent = parent.getParent();\r\n const cabinetParent = applianceParent.layout.parts[Cabinet.id];\r\n if (cabinetParent && cabinetParent.topCabinet && cabinetParent.topCabinet.activeFeature\r\n && cabinetParent.getTopCabinetApplianceType() !== \"Microwave\") {\r\n const topCabinetConditions = cabinetParent.topCabinet.getArrayOfConditions();\r\n topCabinetConditions.push({\r\n propName: \"Appliance\",\r\n propValue: \"Microwave\"\r\n });\r\n const matchingCabinets = super.navigationSubItemsWithFilterMultipleConditions(\r\n topCabinetConditions,\r\n cabinetParent.topCabinet.features\r\n );\r\n if (matchingCabinets.length) {\r\n const currentName = cabinetParent.topCabinet.activeFeature.getSplittedFeatureName();\r\n const matchingCabinet = matchingCabinets.find(cabinet => {\r\n return cabinet.getSplittedFeatureName() === currentName\r\n });\r\n (matchingCabinet || matchingCabinets[0]).handleClick(ignoreLocked);\r\n }\r\n }\r\n\r\n if (cabinetParent && cabinetParent.topCabinet && cabinetParent.topCabinet.disabled && !this.disabled) {\r\n cabinetParent.topCabinet.disabled = this.disabled;\r\n cabinetParent.topCabinet.activeFeatureParts.forEach((activeFeaturePart) => {\r\n activeFeaturePart.disabled = this.disabled\r\n });\r\n const topHandle = cabinetParent.topHandle;\r\n if (topHandle) {\r\n topHandle.disabled = this.disabled;\r\n }\r\n }\r\n\r\n this.featureClicked();\r\n }\r\n\r\n navigationSubItems(filters, searchText) {\r\n const filteredAvailableFeatures = super.getFeaturesBySearchText(super.getFilteredFeaturesByFilters(filters), searchText);\r\n const featuresToDisplay = super.navigationSubItemsWithFilterMultipleConditions(this.getArrayOfConditions(true), filteredAvailableFeatures);\r\n return featuresToDisplay.map(_ => new DesignNavigationItem(_.featureName, _));\r\n }\r\n\r\n setLayers(layout) {\r\n\r\n const cabinetParent = this.getParent().layout.parts[Cabinet.id];\r\n const topCabinet = cabinetParent && cabinetParent.topCabinet;\r\n if (topCabinet && (topCabinet.disabled || !topCabinet.featureGroupEnabled)) {\r\n super.hideLayers();\r\n return\r\n }\r\n\r\n if (this.activeFeature && (this.activeFeature.matchesMetaForArrayOfConditions(this.getArrayOfConditions())\r\n || (this.activeFeature.notAvailableInVisualizer && this.placeholderFeature))) {\r\n super.setLayers(layout);\r\n } else {\r\n this.setDefault();\r\n super.setLayers(layout);\r\n }\r\n }\r\n\r\n getArrayOfConditions(ignoreAppliance) {\r\n return ignoreAppliance\r\n ? []\r\n : [{\r\n propName: \"Appliance\",\r\n propValue: this.getParent().layout.parts[\"Cabinet\"].getTopCabinetApplianceType()\r\n }];\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n if(zIndexes) {\r\n const zIndex = zIndexes.Appliances.Microwave;\r\n if (this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndex;\r\n }\r\n if (this.placeholderFeature) {\r\n this.placeholderFeature.layer.zIndex = zIndex;\r\n }\r\n }\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport {PLACEMENTS} from \"../../constants\";\r\nimport Cabinet from \"../../parts/cabinet\";\r\n\r\nexport default class Range extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'range';\r\n this.partName = 'Range';\r\n this.translateId = \"visualizer.kitchen.appliance.range\";\r\n }\r\n\r\n load(dbFeature) {\r\n if (dbFeature.metaData && dbFeature.metaData[\"Placement\"]\r\n && !dbFeature.metaData[\"Placement\"].includes(PLACEMENTS.Countertop)) {\r\n return false\r\n }\r\n return super.load_(dbFeature, new Range());\r\n }\r\n\r\n setLayers(layout) {\r\n\r\n const cabinetParent = this.getParent().layout.parts[Cabinet.id];\r\n if (cabinetParent && cabinetParent.bottomCabinet && cabinetParent.bottomCabinet.activeFeature\r\n && cabinetParent.bottomCabinet.activeFeature.metaData[\"Appliance\"]\r\n && cabinetParent.bottomCabinet.activeFeature.metaData[\"Appliance\"].includes(\"None\")) {\r\n super.hideLayers();\r\n return\r\n }\r\n\r\n if (this.activeFeature && (this.activeFeature.matchesMetaForArrayOfConditions(this.getArrayOfConditions())\r\n || (this.activeFeature.notAvailableInVisualizer && this.placeholderFeature))) {\r\n super.setLayers(layout);\r\n } else {\r\n this.setDefault();\r\n super.setLayers(layout);\r\n }\r\n }\r\n\r\n getArrayOfConditions() {\r\n return []\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n if(zIndexes) {\r\n const zIndex = zIndexes.Appliances.Range;\r\n if (this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndex;\r\n }\r\n if (this.placeholderFeature) {\r\n this.placeholderFeature.layer.zIndex = zIndex;\r\n }\r\n }\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport DesignNavigationItem from \"../../../../visComponents/designNavigationItem\";\r\nimport Appliance from \"../../parts/appliance\";\r\n\r\nexport default class TopHandle extends IntermediatePart {\r\n\r\n constructor(isChild, partNumber = 0) {\r\n super(isChild);\r\n this.partNumber = partNumber;\r\n this.partId = 'top_handle';\r\n this.partName = 'Top Handle';\r\n this.canBeDisabled = true;\r\n this.layerPriority = 2;\r\n this.translateId = \"visualizer.kitchen.cabinet.top_handle\";\r\n }\r\n\r\n load(dbFeature) {\r\n if (!dbFeature.metaData[\"HoodType\"]) {\r\n dbFeature.metaData[\"HoodType\"] = [\"All\"]// it can be \"Wood\"\r\n }\r\n if (!dbFeature.metaData[\"CabinetLayout\"]) {\r\n dbFeature.metaData[\"CabinetLayout\"] = [\"All\"]\r\n }\r\n if (!dbFeature.metaData[\"DoorSet\"]) {\r\n dbFeature.metaData[\"DoorSet\"] = [\"All\"]\r\n }\r\n const parts = dbFeature.metaData && dbFeature.metaData[\"Parts\"];\r\n if (parts) {\r\n const partNumber = +dbFeature.metaData[\"Part\"][0];\r\n return super.load_(dbFeature, new TopHandle(false, partNumber),\r\n true, partNumber === 1 ? 'features' : 'featuresParts');\r\n } else {\r\n return super.load_(dbFeature, new TopHandle());\r\n }\r\n }\r\n\r\n disabledClick() {\r\n const topCabinet = this.getParent().topCabinet;\r\n if (topCabinet && topCabinet.disabled && !this.disabled) {\r\n topCabinet.disabled = this.disabled;\r\n topCabinet.activeFeatureParts.forEach((activeFeaturePart) => {\r\n activeFeaturePart.disabled = this.disabled\r\n });\r\n const crownMolding = this.getParent().crownMolding;\r\n if (crownMolding) {\r\n crownMolding.disabled = this.disabled;\r\n }\r\n }\r\n }\r\n\r\n navigationSubItems(filters, searchText) {\r\n const filteredAvailableFeatures = super.getFeaturesBySearchText(super.getFilteredFeaturesByFilters(filters), searchText);\r\n let featuresToDisplay = super.navigationSubItemsWithFilterMultipleConditions(this.getArrayOfConditions(true), filteredAvailableFeatures);\r\n const topCabinet = this.getParent().topCabinet;\r\n if (topCabinet && topCabinet.activeFeature && topCabinet.activeFeature.partName.includes(\"Portico White Chocolate\")) {\r\n return []\r\n }\r\n return featuresToDisplay.map(_ => new DesignNavigationItem(_.featureName, _));\r\n }\r\n\r\n setLayers(layout) {\r\n\r\n const topCabinet = this.getParent().topCabinet;\r\n if (topCabinet && (topCabinet.disabled || !topCabinet.featureGroupEnabled)\r\n || (topCabinet && topCabinet.activeFeature && topCabinet.activeFeature.partName.includes(\"Portico White Chocolate\"))) {\r\n super.hideLayers();\r\n return\r\n }\r\n if (this.activeFeature && (this.activeFeature.matchesMetaForArrayOfConditions(this.getArrayOfConditions()))) {\r\n this.checkIfFeaturePartIsMatching();\r\n super.setLayers(layout);\r\n } else {\r\n this.setDefault();\r\n super.setLayers(layout);\r\n }\r\n }\r\n\r\n getArrayOfConditions() {\r\n\r\n const cabinetParent = this.getParent();\r\n let cabinetLayout = [\"All\"];\r\n let doorSet = [\"All\"];\r\n if (cabinetParent.topCabinet && cabinetParent.topCabinet.activeFeature) {\r\n if (cabinetParent.topCabinet.activeFeature.metaData[\"CabinetLayout\"]) {\r\n cabinetLayout = cabinetParent.topCabinet.activeFeature.metaData[\"CabinetLayout\"][0]\r\n }\r\n if (cabinetParent.topCabinet.activeFeature.metaData[\"DoorSet\"]) {\r\n doorSet = cabinetParent.topCabinet.activeFeature.metaData[\"DoorSet\"][0];\r\n }\r\n }\r\n\r\n return [{\r\n propName: \"Appliance\",\r\n propValue: cabinetParent.getTopCabinetApplianceType()\r\n }, {\r\n propName: 'RoomLayout',\r\n propValue: cabinetParent.layout.getCurrentLayoutAbbreviation()\r\n },{\r\n propName: 'CabinetLayout',\r\n propValue: cabinetLayout\r\n },{\r\n propName: \"DoorSet\",\r\n propValue: doorSet\r\n }];\r\n }\r\n\r\n getActiveFeatureConditions() {\r\n let hoodType = [\"All\"];\r\n const cabinetParent = this.getParent();\r\n const isHood = cabinetParent.getTopCabinetApplianceType() === \"Hood\";\r\n const applianceParent = cabinetParent.layout.parts[Appliance.id];\r\n if (isHood && applianceParent.hood && applianceParent.hood.activeFeature\r\n && applianceParent.hood.activeFeature.metaData && applianceParent.hood.activeFeature.metaData[\"HoodType\"]) {\r\n hoodType = applianceParent.hood.activeFeature.metaData[\"HoodType\"][0];\r\n }\r\n const conditions = this.getArrayOfConditions();\r\n conditions.push({\r\n propName: \"HoodType\",\r\n propValue: hoodType\r\n });\r\n return conditions\r\n }\r\n\r\n setDefault() {\r\n const filteredFeatures = this.features.filter(f => f.matchesMetaForArrayOfConditions(this.getArrayOfConditions()));\r\n const matchingFeatureExist = this.tryToSetTheSameFeature(filteredFeatures, null);\r\n if (!matchingFeatureExist) {\r\n this.activeFeature = filteredFeatures[0];\r\n }\r\n this.activeFeatureParts = this.setActiveFeatureParts();\r\n }\r\n\r\n setActiveFeatureParts(fromFeature = this.activeFeature, activeFeatureConditions = []) {\r\n return this.getActiveFeaturePartsAccordingToActiveFeature(fromFeature, activeFeatureConditions);\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n if (zIndexes) {\r\n const zIndex = zIndexes.Cabinet.TopHandle;\r\n const zIndex2 = zIndexes.Cabinet.TopHandle2;\r\n if (this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndex;\r\n }\r\n if (this.activeFeatureParts && this.activeFeatureParts.length) {\r\n this.activeFeatureParts.forEach((activeFeaturePart) => {\r\n if (activeFeaturePart && activeFeaturePart.layer) {\r\n activeFeaturePart.layer.zIndex = zIndex2;\r\n }\r\n })\r\n }\r\n }\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport DesignNavigationItem from \"../../../../visComponents/designNavigationItem\";\r\n\r\nexport default class BottomHandle extends IntermediatePart {\r\n\r\n constructor(isChild, partNumber = 0) {\r\n super(isChild);\r\n this.partNumber = partNumber;\r\n this.partId = 'bottom_handle';\r\n this.partName = 'Bottom Handle';\r\n this.translateId = \"visualizer.kitchen.cabinet.bottom_handle\";\r\n this.canBeDisabled = true;\r\n this.layerPriority = 5;\r\n }\r\n\r\n load(dbFeature) {\r\n if (!dbFeature.metaData[\"CabinetLayout\"]) {\r\n dbFeature.metaData[\"CabinetLayout\"] = [\"All\"]\r\n }\r\n if (!dbFeature.metaData[\"DoorSet\"]) {\r\n dbFeature.metaData[\"DoorSet\"] = [\"All\"]\r\n }\r\n if (!dbFeature.metaData[\"Appliance\"]) {\r\n dbFeature.metaData[\"Appliance\"] = [\"All\"]\r\n }\r\n const parts = dbFeature.metaData && dbFeature.metaData[\"Parts\"];\r\n if (parts) {\r\n const partNumber = +dbFeature.metaData[\"Part\"][0];\r\n return super.load_(dbFeature, new BottomHandle(false, partNumber),\r\n true, partNumber === 1 ? 'features' : 'featuresParts');\r\n } else {\r\n return super.load_(dbFeature, new BottomHandle());\r\n }\r\n }\r\n\r\n navigationSubItems(filters, searchText) {\r\n const filteredAvailableFeatures = super.getFeaturesBySearchText(super.getFilteredFeaturesByFilters(filters), searchText);\r\n const featuresToDisplay = super.navigationSubItemsWithFilterMultipleConditions(this.getArrayOfConditions(true), filteredAvailableFeatures);\r\n return featuresToDisplay.map(_ => new DesignNavigationItem(_.featureName, _));\r\n }\r\n\r\n setLayers(layout) {\r\n\r\n const bottomCabinet = this.getParent().bottomCabinet;\r\n if (bottomCabinet && (bottomCabinet.disabled || !bottomCabinet.featureGroupEnabled)) {\r\n super.hideLayers();\r\n return\r\n }\r\n\r\n if (this.activeFeature && (this.activeFeature.matchesMetaForArrayOfConditions(this.getArrayOfConditions()))) {\r\n this.checkIfFeaturePartIsMatching();\r\n super.setLayers(layout);\r\n } else {\r\n this.setDefault();\r\n super.setLayers(layout);\r\n }\r\n }\r\n\r\n getArrayOfConditions() {\r\n const cabinetParent = this.getParent();\r\n let cabinetLayout = [\"All\"];\r\n let doorSet = [\"All\"];\r\n if (cabinetParent.bottomCabinet && cabinetParent.bottomCabinet.activeFeature) {\r\n if (cabinetParent.bottomCabinet.activeFeature.metaData[\"CabinetLayout\"]) {\r\n cabinetLayout = cabinetParent.bottomCabinet.activeFeature.metaData[\"CabinetLayout\"][0]\r\n }\r\n if (cabinetParent.bottomCabinet.activeFeature.metaData[\"DoorSet\"]) {\r\n doorSet = cabinetParent.bottomCabinet.activeFeature.metaData[\"DoorSet\"][0];\r\n }\r\n }\r\n return [{\r\n propName: \"Appliance\",\r\n propValue: cabinetParent.getBottomCabinetApplianceType()\r\n }, {\r\n propName: 'RoomLayout',\r\n propValue: cabinetParent.layout.getCurrentLayoutAbbreviation()\r\n },{\r\n propName: 'CabinetLayout',\r\n propValue: cabinetLayout\r\n },{\r\n propName: \"DoorSet\",\r\n propValue: doorSet\r\n }];\r\n }\r\n\r\n setDefault() {\r\n const filteredFeatures = this.features.filter(f => f.matchesMetaForArrayOfConditions(this.getArrayOfConditions()));\r\n const matchingFeatureExist = this.tryToSetTheSameFeature(filteredFeatures, null);\r\n if (!matchingFeatureExist) {\r\n this.activeFeature = filteredFeatures[0];\r\n }\r\n this.activeFeatureParts = this.setActiveFeatureParts();\r\n }\r\n\r\n getActiveFeatureConditions() {\r\n return this.getArrayOfConditions()\r\n }\r\n\r\n setActiveFeatureParts(fromFeature = this.activeFeature, activeFeatureConditions = []) {\r\n return this.getActiveFeaturePartsAccordingToActiveFeature(fromFeature, activeFeatureConditions);\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n if (zIndexes) {\r\n const zIndex = zIndexes.Cabinet.BottomHandle;\r\n const zIndex2 = zIndexes.Cabinet.BottomHandle2;\r\n if (this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndex;\r\n }\r\n if (this.activeFeatureParts && this.activeFeatureParts.length) {\r\n this.activeFeatureParts.forEach((activeFeaturePart) => {\r\n if (activeFeaturePart && activeFeaturePart.layer) {\r\n activeFeaturePart.layer.zIndex = zIndex2;\r\n }\r\n })\r\n }\r\n }\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\n\r\nexport default class TopCabinetShadow extends IntermediatePart {\r\n constructor(isChild, partNumber = 0) {\r\n super(isChild);\r\n this.partNumber = partNumber;\r\n this.partId = 'top_cabinet_shadow';\r\n this.partName = 'Top Cabinet Shadow';\r\n this.visible = false;\r\n this.layerPriority = 6;\r\n }\r\n\r\n load(dbFeature) {\r\n const parts = dbFeature.metaData && dbFeature.metaData[\"Parts\"];\r\n if (parts) {\r\n const partNumber = +dbFeature.metaData[\"Part\"][0];\r\n return super.load_(dbFeature, new TopCabinetShadow(false, partNumber),\r\n true, partNumber === 1 ? 'features' : 'featuresParts');\r\n } else {\r\n return super.load_(dbFeature, new TopCabinetShadow());\r\n }\r\n }\r\n\r\n setLayers(layout) {\r\n\r\n const topCabinet = this.getParent().topCabinet;\r\n if (topCabinet && (topCabinet.disabled || !topCabinet.featureGroupEnabled)) {\r\n super.hideLayers();\r\n return\r\n }\r\n\r\n if (this.activeFeature && (this.activeFeature.matchesMetaForArrayOfConditions(this.getArrayOfConditions())\r\n || (this.activeFeature.notAvailableInVisualizer && this.placeholderFeature))) {\r\n this.activeFeatureParts = this.setActiveFeatureParts();\r\n return super.setLayers(layout);\r\n }\r\n\r\n this.setDefault(layout);\r\n return super.setLayers(layout);\r\n }\r\n\r\n setActiveFeatureParts(fromFeature = this.activeFeature) {\r\n const activeFeatureParts = fromFeature && fromFeature.partNumber ? this.featuresParts.filter((feature) => {\r\n const name1 = fromFeature.partName.split(\" Part\")[0];\r\n // console.log(\"name1\", name1);\r\n const name2 = feature.partName.split(\"Part2 \").join(\"\");\r\n // console.log(\"name2\", name2);\r\n return name1 === name2\r\n }) : [];\r\n activeFeatureParts.forEach((activeFeaturePart) => {\r\n activeFeaturePart.disabled = this.disabled\r\n });\r\n return activeFeatureParts\r\n }\r\n\r\n getArrayOfConditions() {\r\n const cabinetParent = this.getParent();\r\n return [{\r\n propName: \"Appliance\",\r\n propValue: cabinetParent.getTopCabinetApplianceType()\r\n }, {\r\n propName: 'CabinetLayout',\r\n propValue: cabinetParent.getTopCabinetShadowLayout()\r\n }, {\r\n propName: 'RoomLayout',\r\n propValue: cabinetParent.layout.getCurrentLayoutAbbreviation()\r\n }, {\r\n propName: 'CrownMolding',\r\n propValue: cabinetParent && cabinetParent.crownMolding &&\r\n cabinetParent.crownMolding.activeFeature && !cabinetParent.crownMolding.disabled ? \"On\" : \"Off\"\r\n }];\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n if (zIndexes && this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndexes.Cabinet.TopCabinetShadow;\r\n }\r\n if (this.activeFeatureParts && this.activeFeatureParts.length) {\r\n this.activeFeatureParts.forEach((activeFeaturePart) => {\r\n activeFeaturePart.layer.zIndex = zIndexes.Cabinet.TopCabinetShadowPart2\r\n })\r\n }\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\n\r\nexport default class BottomCabinetShadow extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'bottom_cabinet_shadow';\r\n this.partName = 'Bottom Cabinet Shadow';\r\n this.visible = false;\r\n this.layerPriority = 7;\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new BottomCabinetShadow());\r\n }\r\n\r\n setLayers(layout) {\r\n\r\n const bottomCabinet = this.getParent().bottomCabinet;\r\n if (bottomCabinet && (bottomCabinet.disabled || !bottomCabinet.featureGroupEnabled)) {\r\n super.hideLayers();\r\n return\r\n }\r\n\r\n if (this.activeFeature && (this.activeFeature.matchesMetaForArrayOfConditions(this.getArrayOfConditions())\r\n || (this.activeFeature.notAvailableInVisualizer && this.placeholderFeature))) {\r\n return super.setLayers(layout);\r\n }\r\n\r\n this.setDefault(layout);\r\n return super.setLayers(layout);\r\n }\r\n\r\n setDefault() {\r\n const filteredFeatures = this.features.filter(f => f.matchesMetaForArrayOfConditions(this.getArrayOfConditions()));\r\n this.activeFeature = filteredFeatures[0];\r\n }\r\n\r\n getArrayOfConditions() {\r\n return [{\r\n propName: 'RoomLayout',\r\n propValue: this.getParent().layout.getCurrentLayoutAbbreviation()\r\n }];\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n if (zIndexes && this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndexes.Cabinet.BottomCabinetShadow;\r\n }\r\n }\r\n}","import store from \"../../../../../store\";\r\nimport Cabinet from \"../../parts/cabinet\";\r\nimport {LayoutAbbreviations} from \"../../constants\";\r\nimport CountertopCommon from \"../countertopCommon\";\r\n\r\nexport default class Countertop extends CountertopCommon {\r\n constructor(isChild, partNumber = 0) {\r\n super(isChild);\r\n this.partNumber = partNumber;\r\n this.partId = 'countertop';\r\n this.partName = 'Countertop';\r\n this.translateId = \"visualizer.kitchen.countertop.countertop\";\r\n this.isStoneFeature = true;\r\n this.toggleSwitchedOffByUser = false; // is used for returning toggle back when feature is found\r\n if (isChild) {\r\n this.nextFeaturesPageToLoadArray = {};\r\n LayoutAbbreviations.forEach(layoutAbbreviation => {\r\n this.nextFeaturesPageToLoadArray[layoutAbbreviation] = {\r\n page: 0,\r\n allReceived: false,\r\n };\r\n });\r\n }\r\n }\r\n\r\n load(dbFeature) {\r\n const parts = dbFeature.metaData && dbFeature.metaData[\"Parts\"];\r\n if (parts) {\r\n const partNumber = +dbFeature.metaData[\"Part\"][0];\r\n if (partNumber === 3) {\r\n dbFeature.metaData[\"RoomLayout\"] = (dbFeature.metaData[\"RoomLayout\"] && dbFeature.metaData[\"RoomLayout\"].filter(roomLayout => roomLayout.includes(\"N\"))) || [];\r\n }\r\n return super.load_(dbFeature, new Countertop(false, partNumber),\r\n true, partNumber === 1 ? 'features' : 'featuresParts');\r\n } else {\r\n return super.load_(dbFeature, new Countertop());\r\n }\r\n }\r\n\r\n disabledClick() {\r\n this.activeFeatureParts.forEach((activeFeaturePart) => {\r\n activeFeaturePart.disabled = this.disabled\r\n });\r\n }\r\n\r\n handleClick(ignoreLocked, clickFrom = \"\") {\r\n const parent = this.getParent();\r\n if (parent.getParent && parent.getParent()) {\r\n super.handleClick(ignoreLocked, clickFrom);\r\n parent.activeFeatureParts = parent.setActiveFeatureParts();\r\n } else {\r\n parent.countertop.activeFeature = this;\r\n }\r\n this.featureClicked();\r\n }\r\n\r\n availableFeatures(cabinetFeatures) {\r\n return cabinetFeatures.filter(cabinetFeature => cabinetFeature.partNumber === 1)\r\n }\r\n\r\n setLayers(layout) {\r\n\r\n const cabinetParent = this.getParent().layout.parts[Cabinet.id];\r\n const bottomCabinet = cabinetParent && cabinetParent.bottomCabinet;\r\n if (bottomCabinet && (bottomCabinet.disabled || !bottomCabinet.featureGroupEnabled)) {\r\n super.hideLayers();\r\n return\r\n }\r\n\r\n if (this.activeFeature && (this.activeFeature.matchesMetaForArrayOfConditions(this.getArrayOfConditions())\r\n || (this.activeFeature.notAvailableInVisualizer && this.placeholderFeature))) {\r\n this.activeFeatureParts = this.setActiveFeatureParts();\r\n return super.setLayers(layout);\r\n }\r\n\r\n this.setDefault();\r\n return super.setLayers(layout);\r\n }\r\n\r\n getArrayOfConditions() {\r\n return [{\r\n propName: 'RoomLayout',\r\n propValue: this.getParent().layout.getCurrentLayoutAbbreviation()\r\n }];\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n if(zIndexes) {\r\n const zIndex = zIndexes.CountertopGroup.Countertop;\r\n if (this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndex;\r\n }\r\n if (this.placeholderFeature) {\r\n this.placeholderFeature.layer.zIndex = zIndex;\r\n }\r\n if (this.activeFeatureParts.length) {\r\n this.activeFeatureParts.forEach((activeFeaturePart) => {\r\n if(activeFeaturePart && activeFeaturePart.layer && activeFeaturePart.dbFeature.metaData[\"Part\"]) {\r\n const partNumber = +activeFeaturePart.dbFeature.metaData[\"Part\"][0];\r\n activeFeaturePart.layer.zIndex = zIndexes.CountertopGroup[\"Countertop\"+partNumber];\r\n }\r\n })\r\n }\r\n }\r\n }\r\n\r\n setActiveFeatureParts(fromFeature = this.activeFeature) {\r\n let activeFeatureParts = [];\r\n if (fromFeature && fromFeature.partNumber) {\r\n const name1 = fromFeature.getCountertopGroupsSplittedFeatureName();\r\n const conditions = this.getArrayOfConditions();\r\n activeFeatureParts = this.featuresParts.filter((feature) => {\r\n const name2 = feature.getCountertopGroupsSplittedFeatureName();\r\n return (name1 === name2) && feature.matchesMetaForArrayOfConditions(conditions);\r\n });\r\n const filterGroups = store.getState().filterState.filterGroups;\r\n const edgeFilterGroup = filterGroups.find(group => group.name === \"Edge\" || group.name === \"Edge Profile\");\r\n const fromFeatureFilters = fromFeature.dbFeature.filterValueIDs;\r\n if (edgeFilterGroup && fromFeatureFilters && fromFeatureFilters[edgeFilterGroup.id]) {\r\n const edgeFilterGroupId = edgeFilterGroup.id;\r\n const realActiveFeaturePart = activeFeatureParts.find(activeFeaturePart => {\r\n return this.featureIsMatchingEdgeFilters(activeFeaturePart, fromFeatureFilters[edgeFilterGroupId], edgeFilterGroupId)\r\n });\r\n activeFeatureParts = realActiveFeaturePart ? [realActiveFeaturePart] : []\r\n }\r\n }\r\n activeFeatureParts.forEach((activeFeaturePart) => {\r\n if(activeFeaturePart) {\r\n activeFeaturePart.disabled = this.disabled\r\n }\r\n });\r\n return activeFeatureParts\r\n }\r\n\r\n featureIsMatchingEdgeFilters(currentCheckFeature, activeEdgeFilter, edgeFilterGroupId) {\r\n const currentFeatureEdgeFilters = currentCheckFeature && currentCheckFeature.dbFeature\r\n && currentCheckFeature.dbFeature.filterValueIDs\r\n && currentCheckFeature.dbFeature.filterValueIDs[edgeFilterGroupId];\r\n return currentFeatureEdgeFilters && currentFeatureEdgeFilters.some(filterValueId => filterValueId === activeEdgeFilter[0]);\r\n }\r\n\r\n canUseNavigationFilterSteps() {\r\n const parent = this.getParent();\r\n return parent.edge // display filters only if edges exist\r\n }\r\n\r\n canUseNavigationFilter() {\r\n return true //TODO[Artem] add here features filters check\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport {PLACEMENTS} from \"../../constants\";\r\nimport Cabinet from \"../../parts/cabinet\";\r\n\r\nexport default class Faucet extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'faucet';\r\n this.partName = 'Faucet';\r\n this.translateId = \"visualizer.kitchen.countertop.faucet\";\r\n this.canBeDisabled = true;\r\n }\r\n\r\n load(dbFeature) {\r\n if (dbFeature.metaData && dbFeature.metaData[\"Placement\"]\r\n && !dbFeature.metaData[\"Placement\"].includes(PLACEMENTS.Countertop)) {\r\n return false\r\n }\r\n return super.load_(dbFeature, new Faucet());\r\n }\r\n\r\n disabledClick() {\r\n const relatedSink = this.getParent().sink;\r\n if (relatedSink) {\r\n relatedSink.disabled = this.disabled;\r\n }\r\n }\r\n\r\n setLayers(layout) {\r\n\r\n const cabinetParent = this.getParent().layout.parts[Cabinet.id];\r\n const bottomCabinet = cabinetParent && cabinetParent.bottomCabinet;\r\n if (bottomCabinet && (bottomCabinet.disabled || !bottomCabinet.featureGroupEnabled)) {\r\n super.hideLayers();\r\n return\r\n }\r\n\r\n if (this.activeFeature && (this.activeFeature.matchesMetaForArrayOfConditions(this.getArrayOfConditions())\r\n || (this.activeFeature.notAvailableInVisualizer && this.placeholderFeature))) {\r\n return super.setLayers(layout);\r\n }\r\n\r\n this.setDefault(layout);\r\n return super.setLayers(layout);\r\n }\r\n\r\n getArrayOfConditions() {\r\n return [{\r\n propName: 'RoomLayout',\r\n propValue: this.getParent().layout.getCurrentLayoutAbbreviation()\r\n }];\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n if(zIndexes) {\r\n const zIndex = zIndexes.CountertopGroup.Faucet;\r\n if (this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndex;\r\n }\r\n if (this.placeholderFeature) {\r\n this.placeholderFeature.layer.zIndex = zIndex;\r\n }\r\n }\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport {PLACEMENTS} from \"../../constants\";\r\nimport Cabinet from \"../../parts/cabinet\";\r\n\r\nexport default class Sink extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'sink';\r\n this.partName = 'Sink';\r\n this.translateId = \"visualizer.kitchen.countertop.sink\";\r\n this.canBeDisabled = true;\r\n }\r\n\r\n load(dbFeature) {\r\n if (dbFeature.metaData && dbFeature.metaData[\"Placement\"]\r\n && !dbFeature.metaData[\"Placement\"].includes(PLACEMENTS.Countertop)) {\r\n return false\r\n }\r\n return super.load_(dbFeature, new Sink());\r\n }\r\n\r\n disabledClick() {\r\n const relatedFaucet = this.getParent().faucet;\r\n if (relatedFaucet) {\r\n relatedFaucet.disabled = this.disabled;\r\n }\r\n }\r\n\r\n setLayers(layout) {\r\n\r\n const cabinetParent = this.getParent().layout.parts[Cabinet.id];\r\n const bottomCabinet = cabinetParent && cabinetParent.bottomCabinet;\r\n if (bottomCabinet && (bottomCabinet.disabled || !bottomCabinet.featureGroupEnabled)) {\r\n super.hideLayers();\r\n return\r\n }\r\n\r\n if (this.activeFeature && (this.activeFeature.matchesMetaForArrayOfConditions(this.getArrayOfConditions())\r\n || (this.activeFeature.notAvailableInVisualizer && this.placeholderFeature))) {\r\n return super.setLayers(layout);\r\n }\r\n\r\n this.setDefault(layout);\r\n return super.setLayers(layout);\r\n }\r\n\r\n getArrayOfConditions() {\r\n return [{\r\n propName: 'RoomLayout',\r\n propValue: this.getParent().layout.getCurrentLayoutAbbreviation()\r\n }];\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n if(zIndexes) {\r\n const zIndex = zIndexes.CountertopGroup.Sink;\r\n if (this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndex;\r\n }\r\n if (this.placeholderFeature) {\r\n this.placeholderFeature.layer.zIndex = zIndex;\r\n }\r\n }\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport {PLACEMENTS} from \"../../constants\";\r\nimport Cabinet from \"../../parts/cabinet\";\r\n\r\nexport default class Stovetop extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'stovetop';\r\n this.partName = 'Stovetop';\r\n this.translateId = \"visualizer.kitchen.countertop.stovetop\";\r\n }\r\n\r\n load(dbFeature) {\r\n if (dbFeature.metaData && dbFeature.metaData[\"Placement\"]\r\n && !dbFeature.metaData[\"Placement\"].includes(PLACEMENTS.Countertop)) {\r\n return false\r\n }\r\n return super.load_(dbFeature, new Stovetop());\r\n }\r\n\r\n setLayers(layout) {\r\n\r\n const cabinetParent = this.getParent().layout.parts[Cabinet.id];\r\n const bottomCabinet = cabinetParent && cabinetParent.bottomCabinet;\r\n if (bottomCabinet && (bottomCabinet.disabled || !bottomCabinet.featureGroupEnabled)) {\r\n super.hideLayers();\r\n return\r\n }\r\n\r\n if (this.activeFeature && (this.activeFeature.matchesMetaForArrayOfConditions(this.getArrayOfConditions())\r\n || (this.activeFeature.notAvailableInVisualizer && this.placeholderFeature))) {\r\n return super.setLayers(layout);\r\n }\r\n\r\n this.setDefault();\r\n return super.setLayers(layout);\r\n }\r\n\r\n getArrayOfConditions() {\r\n return [{\r\n propName: 'RoomLayout',\r\n propValue: this.getParent().layout.getCurrentLayoutAbbreviation()\r\n }];\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n if(zIndexes) {\r\n const zIndex = zIndexes.CountertopGroup.Stovetop;\r\n if (this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndex;\r\n }\r\n }\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\n\r\nexport default class Cutouts extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'cutouts';\r\n this.partName = 'Cutouts';\r\n this.translateId = \"visualizer.kitchen.countertop.cutouts\";\r\n this.isStoneFeature = true;\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new Cutouts());\r\n }\r\n\r\n setZIndex() {\r\n\r\n }\r\n}\r\n","import EdgeCommon from \"../edgeCommon\";\r\n\r\nexport default class EdgeProfile extends EdgeCommon {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'edge_profile';\r\n this.partName = 'Edge Profile';\r\n this.translateId = \"visualizer.kitchen.countertop.edge_profile\";\r\n // this.isStoneFeature = true;\r\n this.customClassName = \"edge\";\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new EdgeProfile());\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\n\r\nexport default class Radius extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'radius';\r\n this.partName = 'Radius';\r\n this.translateId = \"visualizer.kitchen.countertop.radius\";\r\n this.isStoneFeature = true;\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new Radius());\r\n }\r\n\r\n setZIndex() {\r\n\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\n\r\nexport default class Cabinet extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.dbName = 'center Island';\r\n this.partId = 'center_island_cabinet';\r\n this.partName = 'Cabinet';\r\n this.translateId = \"visualizer.kitchen.center_island.center_island_cabinet\";\r\n this.canBeDisabled = true;\r\n }\r\n\r\n load(dbFeature) {\r\n dbFeature.metaData[\"RoomLayout\"] = (dbFeature.metaData[\"RoomLayout\"] && dbFeature.metaData[\"RoomLayout\"].filter(roomLayout => roomLayout.includes(\"I\"))) || [];\r\n return super.load_(dbFeature, new Cabinet());\r\n }\r\n\r\n changeLayout() {\r\n const layoutAbbreviation = this.getParent().layout.getCurrentLayoutAbbreviation();\r\n if (layoutAbbreviation.includes(\"I\") && this.disabled) {\r\n this.disabled = false;\r\n this.disabledClick();\r\n }\r\n }\r\n\r\n disabledClick() {\r\n const centerIslandParent = this.getParent();\r\n centerIslandParent.relatedItems.forEach(relItem => {\r\n relItem.disabled = this.disabled;\r\n });\r\n }\r\n\r\n setDefault() {\r\n\r\n if (!this.tryToSetTheSameFeature(this.features)) {\r\n const layout = this.getParent().layout;\r\n if (layout.selectedLayoutFeatures[layout.type] && layout.selectedLayoutFeatures[layout.type][this.partId]) {\r\n this.activeFeature = this.getFeatureByPartName(layout.selectedLayoutFeatures[layout.type][this.partId]);\r\n } else {\r\n const existInSomeLayout = Object.keys(layout.selectedLayoutFeatures).find(layoutType => {\r\n return layout.selectedLayoutFeatures[layoutType] && layout.selectedLayoutFeatures[layoutType][this.partId];\r\n });\r\n if (existInSomeLayout) {\r\n this.activeFeature = this.getFeatureByPartName(layout.selectedLayoutFeatures[existInSomeLayout][this.partId]);\r\n }\r\n }\r\n if (!this.activeFeature) {\r\n this.activeFeature = this.features[0];\r\n }\r\n }\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n if(zIndexes) {\r\n const zIndex = zIndexes.CenterIsland.Cabinet;\r\n if (this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndex;\r\n }\r\n if (this.placeholderFeature) {\r\n this.placeholderFeature.layer.zIndex = zIndex;\r\n }\r\n }\r\n }\r\n}\r\n","import CountertopCommon from \"../countertopCommon\";\r\n\r\nexport default class Countertop extends CountertopCommon {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'center_island_countertop';\r\n this.dbName = 'Center Island Countertop';\r\n this.partName = 'Island Countertop';\r\n this.homePageTitle = 'Center Island Countertop';\r\n this.translateId = \"visualizer.kitchen.center_island.center_island_countertop\";\r\n this.isStoneFeature = true;\r\n this.toggleSwitchedOffByUser = false; // is used for returning toggle back when feature is found\r\n }\r\n\r\n disabledClick() {\r\n const centerIslandParent = this.getParent();\r\n if (!this.disabled && centerIslandParent.cabinet.disabled) {\r\n centerIslandParent.cabinet.disabled = false;\r\n centerIslandParent.cabinet.disabledClick();\r\n }\r\n }\r\n\r\n load(dbFeature) {\r\n dbFeature.metaData[\"RoomLayout\"] = (dbFeature.metaData[\"RoomLayout\"] && dbFeature.metaData[\"RoomLayout\"].filter(roomLayout => roomLayout.includes(\"I\"))) || [];\r\n return super.load_(dbFeature, new Countertop());\r\n }\r\n\r\n setLayers(layout) {\r\n\r\n const cabinet = this.getParent().cabinet;\r\n if (cabinet && (cabinet.disabled || !cabinet.featureGroupEnabled)) {\r\n super.hideLayers();\r\n return\r\n }\r\n\r\n return super.setLayers(layout);\r\n }\r\n\r\n setDefault() { // this is added because of the layout\r\n const layout = this.getParent && this.getParent().layout;\r\n if (layout && layout.getCurrentLayoutAbbreviation) {\r\n const currentLayoutAbbreviation = layout.getCurrentLayoutAbbreviation();\r\n if (currentLayoutAbbreviation && !currentLayoutAbbreviation.includes(\"I\")) {\r\n return null\r\n }\r\n }\r\n return super.setDefault()\r\n }\r\n\r\n getArrayOfConditions() {\r\n return [{\r\n propName: 'RoomLayout',\r\n propValue: this.getParent().layout.getCurrentLayoutAbbreviation()\r\n }];\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n if(zIndexes) {\r\n const zIndex = zIndexes.CenterIsland.Countertop;\r\n if (this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndex;\r\n }\r\n if (this.placeholderFeature) {\r\n this.placeholderFeature.layer.zIndex = zIndex;\r\n }\r\n }\r\n }\r\n\r\n canUseNavigationFilterSteps() {\r\n const parent = this.getParent();\r\n return parent.edge // display filters only if edges exist\r\n }\r\n\r\n canUseNavigationFilter() {\r\n return true //TODO[Artem] add here features filters check\r\n }\r\n\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\n\r\nexport default class Chairs extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'center_island_chairs';\r\n this.partName = 'Chairs';\r\n this.dbName = 'Chair';\r\n this.translateId = \"visualizer.kitchen.center_island.center_island_chairs\";\r\n this.canBeDisabled = true;\r\n }\r\n\r\n load(dbFeature) {\r\n dbFeature.metaData[\"RoomLayout\"] = (dbFeature.metaData[\"RoomLayout\"] && dbFeature.metaData[\"RoomLayout\"].filter(roomLayout => roomLayout.includes(\"I\"))) || [];\r\n return super.load_(dbFeature, new Chairs());\r\n }\r\n\r\n setLayers(layout) {\r\n\r\n const cabinet = this.getParent().cabinet;\r\n if (cabinet && (cabinet.disabled || !cabinet.featureGroupEnabled)) {\r\n super.hideLayers();\r\n return\r\n }\r\n\r\n return super.setLayers(layout);\r\n }\r\n\r\n disabledClick() {\r\n const centerIslandParent = this.getParent();\r\n if (!this.disabled && centerIslandParent.cabinet.disabled) {\r\n centerIslandParent.cabinet.disabled = false;\r\n centerIslandParent.cabinet.disabledClick();\r\n }\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n if(zIndexes) {\r\n const zIndex = zIndexes.CenterIsland.Chairs;\r\n if (this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndex;\r\n }\r\n if (this.placeholderFeature) {\r\n this.placeholderFeature.layer.zIndex = zIndex;\r\n }\r\n }\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport {PLACEMENTS} from \"../../constants\";\r\nimport DesignNavigationItem from \"../../../../visComponents/designNavigationItem\";\r\n\r\nexport default class Faucet extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'center_island_faucet';\r\n this.partName = 'Faucet';\r\n this.translateId = \"visualizer.kitchen.center_island.center_island_faucet\";\r\n this.canBeDisabled = true;\r\n }\r\n\r\n load(dbFeature) {\r\n dbFeature.metaData[\"RoomLayout\"] = (dbFeature.metaData[\"RoomLayout\"] && dbFeature.metaData[\"RoomLayout\"].filter(roomLayout => roomLayout.includes(\"I\"))) || [];\r\n if (dbFeature.metaData && dbFeature.metaData[\"Placement\"]\r\n && !dbFeature.metaData[\"Placement\"].includes(PLACEMENTS.Island)) {\r\n return false\r\n }\r\n return super.load_(dbFeature, new Faucet());\r\n }\r\n\r\n disabledClick() {\r\n const centerIslandParent = this.getParent();\r\n if (!this.disabled && centerIslandParent.cabinet && centerIslandParent.cabinet.disabled) {\r\n centerIslandParent.cabinet.disabled = false;\r\n centerIslandParent.cabinet.disabledClick();\r\n }\r\n const relatedSink = centerIslandParent.sink;\r\n if (relatedSink) {\r\n relatedSink.disabled = this.disabled;\r\n }\r\n const stovetop = centerIslandParent.stovetop;\r\n if (stovetop && !this.disabled && !stovetop.disabled) {\r\n stovetop.disabled = true;\r\n }\r\n const range = centerIslandParent.range;\r\n if (range && !this.disabled && !range.disabled) {\r\n range.disabled = true;\r\n }\r\n }\r\n\r\n navigationSubItems(filters, searchText) {\r\n const filteredAvailableFeatures = super.getFeaturesBySearchText(super.getFilteredFeaturesByFilters(filters), searchText);\r\n const featuresToDisplay = super.navigationSubItemsWithFilterMultipleConditions(this.getArrayOfConditions(true), filteredAvailableFeatures);\r\n return featuresToDisplay.map(_ => new DesignNavigationItem(_.featureName, _));\r\n }\r\n\r\n setLayers(layout) {\r\n\r\n const cabinet = this.getParent().cabinet;\r\n if (cabinet && (cabinet.disabled || !cabinet.featureGroupEnabled)) {\r\n super.hideLayers();\r\n return\r\n }\r\n\r\n if (this.activeFeature && (this.activeFeature.matchesMetaForArrayOfConditions(this.getArrayOfConditions())\r\n || (this.activeFeature.notAvailableInVisualizer && this.placeholderFeature))) {\r\n super.setLayers(layout);\r\n } else {\r\n this.setDefault();\r\n super.setLayers(layout);\r\n }\r\n }\r\n\r\n getArrayOfConditions() {\r\n const sink = this.getParent().sink;\r\n if (sink && sink.activeFeature) {\r\n return [{\r\n propName: \"FaucetPlacement\",\r\n propValue: sink.activeFeature.metaData[\"FaucetPlacement\"] || \"Moved\"\r\n }]\r\n }\r\n return [];\r\n }\r\n\r\n tryToSetTheSameFeature(filteredFeatures = [], partName = \"\") {\r\n if (this.activeFeature && this.activeFeature.partName) {\r\n const splittedName = (partName || this.activeFeature.partName).split(\" M\")[0];\r\n this.activeFeature = filteredFeatures.find(feature => {\r\n if (feature.partName) {\r\n const splittedCurrentName = feature.partName.split(\" M\")[0];\r\n return splittedCurrentName === splittedName\r\n }\r\n return false\r\n });\r\n // console.log('AF', filteredFeatures, this.activeFeature);\r\n if (this.activeFeature) {\r\n return true\r\n }\r\n }\r\n return false\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n if(zIndexes) {\r\n const zIndex = zIndexes.CenterIsland.Faucet;\r\n if (this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndex;\r\n }\r\n if (this.placeholderFeature) {\r\n this.placeholderFeature.layer.zIndex = zIndex;\r\n }\r\n }\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport {PLACEMENTS} from \"../../constants\";\r\n\r\nexport default class Sink extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'center_island_sink';\r\n this.partName = 'Sink';\r\n this.translateId = \"visualizer.kitchen.center_island.center_island_sink\";\r\n this.canBeDisabled = true;\r\n }\r\n\r\n load(dbFeature) {\r\n dbFeature.metaData[\"RoomLayout\"] = (dbFeature.metaData[\"RoomLayout\"] && dbFeature.metaData[\"RoomLayout\"].filter(roomLayout => roomLayout.includes(\"I\"))) || [];\r\n if (dbFeature.metaData && dbFeature.metaData[\"Placement\"]\r\n && !dbFeature.metaData[\"Placement\"].includes(PLACEMENTS.Island)) {\r\n return false\r\n }\r\n return super.load_(dbFeature, new Sink());\r\n }\r\n\r\n disabledClick() {\r\n const centerIslandParent = this.getParent();\r\n if (!this.disabled && centerIslandParent.cabinet && centerIslandParent.cabinet.disabled) {\r\n centerIslandParent.cabinet.disabled = false;\r\n centerIslandParent.cabinet.disabledClick();\r\n }\r\n const relatedFaucet = centerIslandParent.faucet;\r\n if (relatedFaucet) {\r\n relatedFaucet.disabled = this.disabled;\r\n }\r\n const stovetop = centerIslandParent.stovetop;\r\n if (stovetop && !this.disabled && !stovetop.disabled) {\r\n stovetop.disabled = true;\r\n }\r\n const range = centerIslandParent.range;\r\n if (range && !this.disabled && !range.disabled) {\r\n range.disabled = true;\r\n }\r\n }\r\n\r\n setLayers(layout) {\r\n\r\n const cabinet = this.getParent().cabinet;\r\n if (cabinet && (cabinet.disabled || !cabinet.featureGroupEnabled)) {\r\n super.hideLayers();\r\n return\r\n }\r\n\r\n return super.setLayers(layout);\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n if(zIndexes) {\r\n const zIndex = zIndexes.CenterIsland.Sink;\r\n if (this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndex;\r\n }\r\n if (this.placeholderFeature) {\r\n this.placeholderFeature.layer.zIndex = zIndex;\r\n }\r\n }\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport DesignNavigationItem from \"../../../../visComponents/designNavigationItem\";\r\n\r\nexport default class Handle extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'center_island_handle';\r\n this.dbName = 'Center Island Handle';\r\n this.partName = 'Handle';\r\n this.translateId = \"visualizer.kitchen.center_island.center_island_handle\";\r\n this.canBeDisabled = true;\r\n }\r\n\r\n load(dbFeature) {\r\n dbFeature.metaData[\"RoomLayout\"] = (dbFeature.metaData[\"RoomLayout\"] && dbFeature.metaData[\"RoomLayout\"].filter(roomLayout => roomLayout.includes(\"I\"))) || [];\r\n return super.load_(dbFeature, new Handle());\r\n }\r\n\r\n disabledClick() {\r\n const centerIslandParent = this.getParent();\r\n if (!this.disabled && centerIslandParent.cabinet.disabled) {\r\n centerIslandParent.cabinet.disabled = false;\r\n centerIslandParent.cabinet.disabledClick();\r\n }\r\n }\r\n\r\n navigationSubItems(filters, searchText) {\r\n const filteredAvailableFeatures = super.getFeaturesBySearchText(super.getFilteredFeaturesByFilters(filters), searchText);\r\n const featuresToDisplay = super.navigationSubItemsWithFilterMultipleConditions(this.getArrayOfConditions(true), filteredAvailableFeatures);\r\n return featuresToDisplay.map(_ => new DesignNavigationItem(_.featureName, _));\r\n }\r\n\r\n setLayers(layout) {\r\n\r\n const cabinet = this.getParent().cabinet;\r\n if (cabinet && (cabinet.disabled || !cabinet.featureGroupEnabled)) {\r\n super.hideLayers();\r\n return\r\n }\r\n\r\n if (this.activeFeature && (this.activeFeature.matchesMetaForArrayOfConditions(this.getArrayOfConditions())\r\n || (this.activeFeature.notAvailableInVisualizer && this.placeholderFeature))) {\r\n super.setLayers(layout);\r\n } else {\r\n this.setDefault();\r\n super.setLayers(layout);\r\n }\r\n }\r\n\r\n getArrayOfConditions() {\r\n const cabinetType = this.getParent().getCabinetType();\r\n return [{\r\n propName: \"Cabinet\",\r\n propValue: cabinetType\r\n }];\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n if(zIndexes) {\r\n const zIndex = zIndexes.CenterIsland.Handle;\r\n if (this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndex;\r\n }\r\n if (this.placeholderFeature) {\r\n this.placeholderFeature.layer.zIndex = zIndex;\r\n }\r\n }\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\n\r\nexport default class CenterIslandShadow extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'center_island_shadow';\r\n this.partName = 'Center Island Shadow';\r\n this.visible = false;\r\n }\r\n\r\n load(dbFeature) {\r\n dbFeature.metaData[\"RoomLayout\"] = (dbFeature.metaData[\"RoomLayout\"] && dbFeature.metaData[\"RoomLayout\"].filter(roomLayout => roomLayout.includes(\"I\"))) || [];\r\n return super.load_(dbFeature, new CenterIslandShadow());\r\n }\r\n\r\n setLayers(layout) {\r\n\r\n const cabinet = this.getParent().cabinet;\r\n if (cabinet && (cabinet.disabled || !cabinet.featureGroupEnabled)) {\r\n super.hideLayers();\r\n return\r\n }\r\n\r\n if (this.activeFeature && (this.activeFeature.matchesMetaForArrayOfConditions(this.getArrayOfConditions())\r\n || (this.activeFeature.notAvailableInVisualizer && this.placeholderFeature))) {\r\n return super.setLayers(layout);\r\n }\r\n\r\n this.setDefault(layout);\r\n return super.setLayers(layout);\r\n }\r\n\r\n getArrayOfConditions() {\r\n const cabinetType = this.getParent().getCabinetType();\r\n return [{\r\n propName: \"Cabinet\",\r\n propValue: cabinetType\r\n }, {\r\n propName: 'RoomLayout',\r\n propValue: this.getParent().layout.getCurrentLayoutAbbreviation()\r\n }];\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n if (zIndexes && this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndexes.CenterIsland.CenterIslandShadow;\r\n }\r\n }\r\n}","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport {PLACEMENTS} from \"../../constants\";\r\n\r\nexport default class Stovetop extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'center_island_stovetop';\r\n this.partName = 'Stovetop';\r\n this.translateId = \"visualizer.kitchen.center_island.center_island_stovetop\";\r\n this.canBeDisabled = true;\r\n this.defaultDisabled = true;\r\n this.disabled = true;\r\n }\r\n\r\n load(dbFeature) {\r\n if (dbFeature.metaData && dbFeature.metaData[\"Placement\"]\r\n && !dbFeature.metaData[\"Placement\"].includes(PLACEMENTS.Island)) {\r\n return false\r\n }\r\n dbFeature.metaData[\"RoomLayout\"] = (dbFeature.metaData[\"RoomLayout\"] && dbFeature.metaData[\"RoomLayout\"].filter(roomLayout => roomLayout.includes(\"I\"))) || [];\r\n return super.load_(dbFeature, new Stovetop());\r\n }\r\n\r\n disabledClick() {\r\n const centerIslandParent = this.getParent();\r\n const cabinet = centerIslandParent.cabinet;\r\n\r\n if (!cabinet.featureGroupEnabled) {\r\n super.hideLayers();\r\n return\r\n }\r\n\r\n if (!this.disabled && cabinet.disabled) {\r\n cabinet.disabled = false;\r\n cabinet.disabledClick();\r\n }\r\n const sink = centerIslandParent.sink;\r\n const range = centerIslandParent.range;\r\n if (sink && !this.disabled && !sink.disabled) {\r\n sink.disabled = true;\r\n sink.disabledClick();\r\n }\r\n if (range && !this.disabled && !range.disabled) {\r\n range.disabled = true;\r\n }\r\n }\r\n\r\n setLayers(layout) {\r\n\r\n const centerIslandParent = this.getParent();\r\n const sink = centerIslandParent.sink;\r\n const range = centerIslandParent.range;\r\n if ((sink && !sink.disabled) || (sink && !range.disabled)) {\r\n super.hideLayers();\r\n return\r\n }\r\n\r\n if (this.activeFeature && (this.activeFeature.matchesMetaForArrayOfConditions(this.getArrayOfConditions())\r\n || (this.activeFeature.notAvailableInVisualizer && this.placeholderFeature))) {\r\n super.setLayers(layout);\r\n } else {\r\n this.setDefault();\r\n super.setLayers(layout);\r\n }\r\n }\r\n\r\n getArrayOfConditions() {\r\n return [{\r\n propName: 'RoomLayout',\r\n propValue: this.getParent().layout.getCurrentLayoutAbbreviation()\r\n }];\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n if(zIndexes) {\r\n const zIndex = zIndexes.CenterIsland.Stovetop;\r\n if (this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndex;\r\n }\r\n }\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\nimport {PLACEMENTS} from \"../../constants\";\r\n\r\nexport default class Range extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'center_island_range';\r\n this.partName = 'Range';\r\n this.translateId = \"visualizer.kitchen.center_island.center_island_range\";\r\n this.canBeDisabled = true;\r\n this.defaultDisabled = true;\r\n this.disabled = true;\r\n }\r\n\r\n load(dbFeature) {\r\n if ((dbFeature.metaData && dbFeature.metaData[\"Placement\"]\r\n && !dbFeature.metaData[\"Placement\"].includes(PLACEMENTS.Island)) || !dbFeature.metaData[\"Placement\"]) {\r\n return false\r\n }\r\n dbFeature.metaData[\"RoomLayout\"] = (dbFeature.metaData[\"RoomLayout\"] && dbFeature.metaData[\"RoomLayout\"].filter(roomLayout => roomLayout.includes(\"I\"))) || [];\r\n return super.load_(dbFeature, new Range());\r\n }\r\n\r\n disabledClick() {\r\n const centerIslandParent = this.getParent();\r\n const sink = centerIslandParent.sink;\r\n const stovetop = centerIslandParent.stovetop;\r\n if (sink && !this.disabled && !sink.disabled) {\r\n sink.disabled = true;\r\n sink.disabledClick();\r\n }\r\n if (stovetop && !this.disabled && !stovetop.disabled) {\r\n stovetop.disabled = true;\r\n }\r\n }\r\n\r\n setLayers(layout) {\r\n const centerIslandParent = this.getParent();\r\n const cabinet = centerIslandParent.cabinet;\r\n\r\n if (!cabinet.featureGroupEnabled) {\r\n super.hideLayers();\r\n return\r\n }\r\n\r\n if (!this.disabled && cabinet.disabled) {\r\n cabinet.disabled = false;\r\n cabinet.disabledClick();\r\n }\r\n const sink = centerIslandParent.sink;\r\n const stovetop = centerIslandParent.stovetop;\r\n if ((sink && !sink.disabled) || (stovetop && !stovetop.disabled)) {\r\n super.hideLayers();\r\n return\r\n }\r\n\r\n if (this.activeFeature && (this.activeFeature.matchesMetaForArrayOfConditions(this.getArrayOfConditions())\r\n || (this.activeFeature.notAvailableInVisualizer && this.placeholderFeature))) {\r\n super.setLayers(layout);\r\n } else {\r\n this.setDefault();\r\n super.setLayers(layout);\r\n }\r\n }\r\n\r\n getArrayOfConditions() {\r\n return [{\r\n propName: 'RoomLayout',\r\n propValue: this.getParent().layout.getCurrentLayoutAbbreviation()\r\n }];\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n if(zIndexes) {\r\n const zIndex = zIndexes.CenterIsland.Range;\r\n if (this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndex;\r\n }\r\n }\r\n }\r\n}\r\n","import EdgeCommon from \"../edgeCommon\";\r\n\r\nexport default class Edge extends EdgeCommon {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'center_island_edge';\r\n this.partName = 'Edge';\r\n this.dbName = 'Edge Profile';\r\n this.translateId = \"visualizer.kitchen.center_island.center_island_edge\";\r\n // this.isStoneFeature = true;\r\n this.customClassName = \"edge\";\r\n }\r\n\r\n load(dbFeature) {\r\n return super.load_(dbFeature, new Edge());\r\n }\r\n}\r\n","import {IntermediatePart} from \"../../intermediatePart\";\r\n\r\nexport default class ChairsShadow extends IntermediatePart {\r\n constructor(isChild) {\r\n super(isChild);\r\n this.partId = 'center_island_chairs_shadow';\r\n this.partName = 'Center Island Chairs Shadow';\r\n this.visible = false;\r\n }\r\n\r\n load(dbFeature) {\r\n dbFeature.metaData[\"RoomLayout\"] = (dbFeature.metaData[\"RoomLayout\"] && dbFeature.metaData[\"RoomLayout\"].filter(roomLayout => roomLayout.includes(\"I\"))) || [];\r\n return super.load_(dbFeature, new ChairsShadow());\r\n }\r\n\r\n setLayers(layout) {\r\n\r\n const chairs = this.getParent().chairs;\r\n if (!chairs || (chairs.disabled || !chairs.featureGroupEnabled)) {\r\n super.hideLayers();\r\n return\r\n }\r\n\r\n if (this.activeFeature && (this.activeFeature.matchesMetaForArrayOfConditions(this.getArrayOfConditions())\r\n || (this.activeFeature.notAvailableInVisualizer && this.placeholderFeature))) {\r\n return super.setLayers(layout);\r\n }\r\n\r\n this.setDefault(layout);\r\n return super.setLayers(layout);\r\n }\r\n\r\n getArrayOfConditions() {\r\n const chairsType = this.getParent().getChairType();\r\n return [{\r\n propName: \"Chair\",\r\n propValue: chairsType\r\n }, {\r\n propName: 'RoomLayout',\r\n propValue: this.getParent().layout.getCurrentLayoutAbbreviation()\r\n }];\r\n }\r\n\r\n setZIndex(zIndexes) {\r\n if (zIndexes && this.activeFeature) {\r\n this.activeFeature.layer.zIndex = zIndexes.CenterIsland.ChairsShadow;\r\n }\r\n }\r\n}\r\n","import React, {Component} from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport {connect} from \"react-redux\";\r\nimport FeatureWizardBodyItem from \"./featureWizardBodyItem\";\r\nimport FeatureWizardSelection from \"./featureWizardSelection\";\r\nimport {s3FilterImagePath} from \"../../../../misc/utils\";\r\n\r\nclass FeatureWizardBody extends Component {\r\n\r\n static propTypes = {\r\n currentStep: PropTypes.object.isRequired,\r\n activeSubPart: PropTypes.object.isRequired,\r\n filterGroups: PropTypes.array.isRequired,\r\n features: PropTypes.array,\r\n onItemClick: PropTypes.func.isRequired,\r\n onItemClickDisabled: PropTypes.func.isRequired,\r\n availableSteps: PropTypes.array,\r\n featureWizardStep: PropTypes.number,\r\n isPhoneNumberValidated: PropTypes.bool,\r\n isMobile: PropTypes.bool,\r\n handleUserLoginClick: PropTypes.func,\r\n setFeatureWizardStep: PropTypes.func,\r\n showerWallWizardGroupsSelected: PropTypes.bool,\r\n searchText: PropTypes.string,\r\n };\r\n\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n currentValues: []\r\n }\r\n }\r\n\r\n componentDidMount() {\r\n this.setCurrentValues();\r\n }\r\n\r\n componentWillReceiveProps(nextProps) {\r\n if (nextProps.currentStep && this.props.currentStep && (nextProps.currentStep.id !== this.props.currentStep.id)) {\r\n this.setCurrentValues(nextProps);\r\n }\r\n }\r\n\r\n setCurrentValues(nextProps = this.props) {\r\n const currentGroup = nextProps.filterGroups.find((filterGroup) => {\r\n return filterGroup.id === nextProps.currentStep.id\r\n });\r\n const fabricatorSettings = this.props.fabricatorSettings;\r\n const filteredFeatures = nextProps.features.filter(feature => {\r\n return !feature.dbFeature.displayName.includes(\"laceholder\")\r\n });\r\n const selectedId = nextProps.currentStep.selectedValueId;\r\n const currentValues = nextProps.currentStep.values\r\n .map((wizardValueObject) => {\r\n const currentFilterValue = this.getFilterValueObjectById(currentGroup, wizardValueObject.filterValue);\r\n const itemIsLocked = this.getLockedPropertyValueObjectById(currentFilterValue, filteredFeatures, wizardValueObject.filterValue, fabricatorSettings, nextProps);\r\n wizardValueObject.itemIsLocked = itemIsLocked;\r\n // console.log('wizardValueObject', wizardValueObject);\r\n return wizardValueObject\r\n })\r\n .sort((a,b) => {\r\n const selectedA = selectedId === a.filterValue;\r\n const selectedB = selectedId === b.filterValue;\r\n if (selectedA < selectedB) {\r\n return 1\r\n } else if (selectedB < selectedA) {\r\n return - 1\r\n } else {\r\n if (a.selectionAvailable < b.selectionAvailable) {\r\n return 1\r\n } else if (b.selectionAvailable < a.selectionAvailable) {\r\n return - 1\r\n } else {\r\n return (a.itemIsLocked > b.itemIsLocked) ? 1 : ((b.itemIsLocked > a.itemIsLocked) ? -1 : 0)\r\n }\r\n }\r\n });\r\n this.setState({\r\n currentValues\r\n })\r\n }\r\n\r\n getFilterValueObjectById = (currentGroup, filterValueId) => {\r\n return currentGroup.values.find(currentGroupValue => {\r\n return currentGroupValue.id === filterValueId\r\n });\r\n };\r\n\r\n getLockedPropertyValueObjectById = (currentFilterValue, filteredFeatures, filterValueId, fabricatorSettings, nextProps = this.props) => {\r\n\r\n const {isBackend, jobId, canSaveQuote, visualizerManagement} = document.kvConfig;\r\n\r\n if (!fabricatorSettings.leadCapture\r\n || (fabricatorSettings.leadCapture && visualizerManagement)\r\n || (fabricatorSettings.leadCapture && nextProps.isPhoneNumberValidated)\r\n || (fabricatorSettings.leadCapture && (isBackend && jobId && canSaveQuote))){\r\n return false\r\n }\r\n\r\n return currentFilterValue.lockedInWizard || !filteredFeatures.some(feature => {\r\n // console.log('bject.keys(feature.dbFeature.filterValueIDs)', Object.keys(feature.dbFeature.filterValueIDs));\r\n const filterToFind = feature.dbFeature.filterValueIDs[nextProps.currentStep.id];\r\n return filterToFind && filterToFind.includes(filterValueId) && feature.dbFeature.unlocked;\r\n })\r\n };\r\n\r\n getFeatureBodyItemThumbnail = (currentFilterValue) => {\r\n const additionalImages = currentFilterValue.additionalImages;\r\n if (Array.isArray(additionalImages) && additionalImages.length) {\r\n // console.log('props.currentFilterValue', currentFilterValue);\r\n if (this.props.activeSubPart.partId === \"vanity_cabinet\" && this.props.currentStep.filterName === \"Color\") {\r\n const materialFilter = this.props.availableSteps.find(step => step.filterName === \"Material\");\r\n if (materialFilter && materialFilter.selectedValueId) {\r\n const neededImage = additionalImages.find(image => image.filterValueIds.includes(materialFilter.selectedValueId));\r\n if (neededImage && neededImage.imageUrl) {\r\n return neededImage.imageUrl\r\n }\r\n return additionalImages[0].imageUrl\r\n }\r\n }\r\n return additionalImages[0].imageUrl\r\n }\r\n return s3FilterImagePath(currentFilterValue.icon);\r\n };\r\n\r\n getFeatureWizardBodyItem = (currentFilterValue, currentGroup, wizardValueObject, filteredFeatures, fabricatorSettings, key) => {\r\n\r\n // const thumbNailPath = `${basePath}images/thumbnails/${parentGroup}/${props.isMobile ? \"100\" : \"400\"}/${featureName}.JPG`;\r\n // console.log('thumbNailPath', thumbNailPath);\r\n\r\n /*** image ***/\r\n const styles = {\r\n backgroundImage: \"url(\" + this.getFeatureBodyItemThumbnail(currentFilterValue) + \")\"\r\n };\r\n const bgFilterName = this.props.currentStep.filterName.replace(/ /g,\"\");\r\n const bgFilterNameFilters = [\"Material\", \"Color\", \"TilePattern\", \"AcrylicPattern\", \"AcrylicColor\"];\r\n const backGroundSizeCover = bgFilterNameFilters.includes(bgFilterName);\r\n\r\n // const parentGroup = props.currentStep.filterName.replace(/ /g,\"\");\r\n // let featureName = props.currentFilterValue.displayText.replace(/ /g,\"\");\r\n // if (parentGroup === \"Color\") {\r\n // const woodType = props.availableSteps.find(step => step.filterName === \"Material\");\r\n // featureName = woodType.selectedValueName.replace(/ /g,\"\") + \"_\" + featureName;\r\n // if (featureName === \"Alder_Eggshell\" || featureName === \"Alder_Graphite\" || featureName === \"Alder_White\" // temporary hardcode until we have BE for multi thumbnails ready\r\n // || featureName === \"Oak_Eggshell\" || featureName === \"Oak_Graphite\" || featureName === \"Oak_White\") {\r\n // featureName = \"custom/\" + featureName;\r\n // }\r\n // }\r\n\r\n /*** active ***/\r\n const isActive = currentFilterValue && (this.props.currentStep.selectedValueId === currentFilterValue.id);\r\n\r\n /*** locked ***/\r\n const itemIsLocked = this.getLockedPropertyValueObjectById(currentFilterValue, filteredFeatures, wizardValueObject.filterValue, fabricatorSettings);\r\n\r\n /*** pulsating ***/\r\n let isPulsating = false;\r\n if ((fabricatorSettings.leadCapture && !(document.kvConfig.isBackend && document.kvConfig.jobId && document.kvConfig.canSaveQuote)) && !this.props.isPhoneNumberValidated\r\n && !itemIsLocked) {\r\n if (!this.props.currentStep.selectedValueId) {\r\n isPulsating = true\r\n } else {\r\n const selectedFilterValue = this.getFilterValueObjectById(currentGroup, this.props.currentStep.selectedValueId);\r\n const selectedItemIsLocked = this.getLockedPropertyValueObjectById(selectedFilterValue, filteredFeatures, this.props.currentStep.selectedValueId, fabricatorSettings);\r\n if (selectedItemIsLocked) {\r\n isPulsating = true\r\n }\r\n }\r\n }\r\n\r\n /*** disabled ***/\r\n let disabled = (this.props.featureWizardStep === 0) ? false : !wizardValueObject.selectionAvailable;\r\n\r\n const getQuoteEnabled = fabricatorSettings.enableQuote;\r\n\r\n return (\r\n \r\n {isAddToCartButtonVisible ? (\r\n \r\n ) : null}\r\n {quoteOrUnlockButtonVisible ? (\r\n \r\n ) : null}\r\n {allPagesEnabled && props.existInQtCategory && featureIsEnabledForQt ? (\r\n {\r\n Analytics.sendClickEvent('feature-clicked-show-feature-info') &&\r\n Analytics.sendClickEvent('feature-clicked-show-feature-info-' + currentFeature.partName) &&\r\n props.switchToFeatureInfo(props.currentFeature)\r\n }}/>\r\n ) : null}\r\n
\r\n ) : null}\r\n {currentFeature.notAvailableInVisualizer ? (\r\n \r\n {showPrice ? (\r\n \r\n {getPriceWithIncluded(price, currentFeature, fabricatorData, props.intl.messages)}\r\n \r\n ) : null}\r\n {!featureIsLocked ?
\r\n \r\n );\r\n } else {\r\n const currentFilterValue = this.getFilterValueObjectById(currentGroup, wizardValueObject.filterValue);\r\n innerElements.push(this.getFeatureWizardBodyItem(\r\n currentFilterValue,\r\n currentGroup,\r\n wizardValueObject,\r\n filteredFeatures,\r\n fabricatorSettings,\r\n \"item\"+j+i\r\n )\r\n );\r\n }\r\n }\r\n elements.push(\r\n \r\n {innerElements}\r\n \r\n );\r\n }\r\n // console.log('elements', elements);\r\n return elements\r\n };\r\n\r\n render() {\r\n // console.log('currentStep', this.props.currentStep);\r\n const currentGroup = this.props.filterGroups.find((filterGroup) => {\r\n return filterGroup.id === this.props.currentStep.id\r\n });\r\n const filteredFeatures = this.props.features.filter(feature => {\r\n return !feature.dbFeature.displayName.includes(\"laceholder\");\r\n });\r\n const fabricatorSettings = this.props.fabricatorSettings;\r\n\r\n const interiorShowerWallWizard = this.props.activeSubPart.partId === \"shower_interior_wall\";\r\n if (interiorShowerWallWizard && !this.props.showerWallWizardGroupsSelected) {\r\n return (\r\n \r\n \r\n ) : (\r\n props.setWizardValue(props.currentFilterValue)}>\r\n {props.currentFilterValue.displayText}\r\n \r\n );\r\n};\r\n\r\nFeatureWizardSelectionItem.displayName = 'FeatureWizardSelectionItem';\r\n\r\nexport default FeatureWizardSelectionItem;","import React, {useState} from \"react\";\r\nimport { connect } from \"react-redux\";\r\n\r\nimport {getCurrentLayout} from \"../../appLayout\";\r\nimport RoomSceneNavigationItem from \"./roomSceneNavigationItem\";\r\nimport {getAvailableRoomScenes} from \"./navUtils\";\r\n\r\nconst RoomSceneNavigation = () => {\r\n\r\n const layout = getCurrentLayout();\r\n const [activeScene, setActiveScene] = useState(layout.scene);\r\n\r\n const availableRoomScenes = getAvailableRoomScenes();\r\n // console.log(\"availableRoomScenes\", availableRoomScenes);\r\n\r\n return (\r\n roomSceneClick(roomScene)}\r\n style={{backgroundImage: `url(${thumbnailUrl})`}}>\r\n {thumbnailUrl ? null : \r\n )\r\n};\r\n\r\nRoomSceneNavigationItem.propTypes = {\r\n roomScene: PropTypes.string.isRequired,\r\n}\r\n\r\nconst mapStateToProps = () => {\r\n return {};\r\n};\r\n\r\nconst mapDispatchToProps = {};\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(RoomSceneNavigationItem)\r\n","import React, {useEffect, useRef, useState} from \"react\";\r\nimport {connect} from \"react-redux\";\r\nimport PropTypes from \"prop-types\";\r\n\r\nimport {getCurrentLayout} from \"../../appLayout\";\r\nimport {getAvailableLayouts} from \"./navUtils\";\r\nimport LayoutNavigationItem from \"../layoutNavigationItem\";\r\n\r\nconst DesktopNavigationLayoutsContent = (props) => {\r\n\r\n const {handleLayoutItemClick, desktopNavigationOpened} = props;\r\n\r\n const [allowLoading, setAllowLoading] = useState(desktopNavigationOpened);\r\n const timeoutRef = useRef();\r\n\r\n useEffect(() => {\r\n timeoutRef.current = setTimeout(() => {\r\n setAllowLoading(true);\r\n }, allowLoading ? 300 : 400)\r\n return () => {\r\n clearTimeout(timeoutRef.current)\r\n }\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, []);\r\n\r\n if (!allowLoading) {\r\n return null\r\n }\r\n\r\n const layout = getCurrentLayout();\r\n const layoutNames = getAvailableLayouts();\r\n return (\r\n \r\n : null}\r\n \r\n
\r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = (store) => ({\r\n fabricatorData: store.fabricatorState,\r\n selectedFilters: store.filterState.selectedFilters,\r\n filtersVisible: store.filterState.showFilters,\r\n filterGroups: store.filterState.filterGroups,\r\n bvPresets: store.bathroomVisualizerState.bvPresets,\r\n userPopupOpened: store.userState.userPopupOpened,\r\n layoutParts: store.stepsState.layoutParts,\r\n activeQuoteIndex: store.quotesState.activeQuoteIndex,\r\n});\r\n\r\nconst mapDispatchToProps = {\r\n setNavigationViewType,\r\n setVanityType,\r\n setDefaultSelectionGroup,\r\n changeActivePartRelatedItemIndex,\r\n setNavigationLoading\r\n};\r\n\r\nexport default injectIntl(\r\n connect(mapStateToProps, mapDispatchToProps)(MobileNavigation)\r\n);\r\n","import React, {Fragment} from 'react';\r\nimport {connect} from 'react-redux';\r\nimport PropTypes from 'prop-types';\r\nimport {Grid} from 'react-virtualized';\r\n\r\nimport NavigationItemsList from \"../navigationItemsList\";\r\nimport DesignNavigationItem from \"../../../visComponents/designNavigationItem\";\r\nimport UserLoginButton from \"../../../ui/userLoginButton\";\r\nimport {UserPopupTypes} from \"../../constants\";\r\nimport {CABINET_WIZARD_BUTTONS} from \"../../../kvComponent/core/constants\";\r\nimport NavigationFilters from \"../newFilters/navigationFilters\";\r\nimport {getActivePartsCounts} from \"../navUtils\";\r\nimport {\r\n changeActivePartRelatedItemIndex, setCameFromPage, setQtActiveCategory, toggleBathroomVisualizerOpen,\r\n toggleSelectionFeatureInfo, toggleSelectionWindow\r\n} from \"../../../../actions/actionFunctions\";\r\nimport {checkIfNeedToReceiveFeaturesIfFiltersApplied} from \"../../../../misc/filtersFunctions\";\r\n\r\nclass MobileNavigationBodyNewClass extends NavigationItemsList {\r\n\r\n static propTypes = {\r\n features: PropTypes.arrayOf(PropTypes.instanceOf(DesignNavigationItem)),\r\n parentItem: PropTypes.instanceOf(DesignNavigationItem),\r\n childItem: PropTypes.instanceOf(DesignNavigationItem),\r\n toggleUserPopup: PropTypes.func,\r\n onItemClick: PropTypes.func,\r\n userIsLoggedIn: PropTypes.bool,\r\n showMobileMenu: PropTypes.bool,\r\n isPhoneNumberValidated: PropTypes.bool,\r\n activeFeature: PropTypes.object,\r\n searchText: PropTypes.string,\r\n allFeaturesReceived: PropTypes.bool,\r\n existInQtCategory: PropTypes.bool,\r\n layoutName: PropTypes.string\r\n };\r\n\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n showPlaceHolders: document.bvConfig ? document.bvConfig.showPlaceholders : false,\r\n itemClicked: false,\r\n reorderedFeatures: [],\r\n // showLoader: false,\r\n };\r\n this.childItemText = \"\";\r\n this.parentItemText = \"\";\r\n // this._isMounted = false;\r\n }\r\n\r\n componentDidMount() {\r\n this.reorderItems(this.props);\r\n }\r\n\r\n componentWillReceiveProps(nextProps) {\r\n if (\r\n (nextProps.childItem && (nextProps.childItem.text !== this.childItemText))\r\n || (nextProps.showMobileMenu && !this.props.showMobileMenu)\r\n || (!nextProps.childItem && nextProps.parentItem && (nextProps.parentItem.text !== this.parentItemText))\r\n || (this.props.selectedFilters.length !== nextProps.selectedFilters.length)\r\n || (this.props.searchText !== nextProps.searchText)\r\n || (nextProps.allFeaturesReceived && !this.props.allFeaturesReceived)\r\n || (nextProps.bvOpened && !this.props.bvOpened)\r\n || (this.props.features.length !== nextProps.features.length)\r\n || (this.props.features.length && nextProps.features.length && nextProps.features[0] && this.props.features[0] &&\r\n nextProps.features[0].part.getParent().partName !== this.props.features[0].part.getParent().partName)\r\n ) {\r\n // this.setState({\r\n // showLoader: true\r\n // }, () => {\r\n // this.reorderItems(nextProps);\r\n // });\r\n this.reorderItems(nextProps);\r\n }\r\n\r\n if (!nextProps.isPhoneNumberValidated && this.props.isPhoneNumberValidated) { // if user logged out\r\n const fabricatorSettings = nextProps.fabricatorData.settings;\r\n if (fabricatorSettings.leadCapture\r\n && !(document.kvConfig.isBackend && document.kvConfig.jobId && document.kvConfig.canSaveQuote)) {\r\n setTimeout(() => {\r\n this.reorderItems(nextProps);\r\n },0)\r\n }\r\n }\r\n\r\n if (this.needToUpdate && nextProps.features.length !== this.props.features.length) {\r\n this.reorderItems(nextProps);\r\n this.needToUpdate = false;\r\n }\r\n\r\n const childItem = nextProps.childItem && nextProps.childItem.part;\r\n if (childItem && nextProps.selectedFilters.length) {\r\n const checkPassed = checkIfNeedToReceiveFeaturesIfFiltersApplied(nextProps.selectedFilters, childItem);\r\n if (checkPassed) {\r\n this.getFeaturesFromBackendWithFilters(nextProps.childItem.part, checkPassed.arrayOfNeededFiltersToReceive, 1);\r\n }\r\n }\r\n\r\n }\r\n\r\n componentWillUnmount() {\r\n this._isMounted = false;\r\n }\r\n\r\n reorderItems = (props) => {\r\n const selectedFirstItemIndex = this.getActiveItemIndex(props);\r\n const otherSelectedWallsIndexes = this.getSelectedWallIndexes(props.childItem, props.features, selectedFirstItemIndex); // this part is looking for the same stones that are already selected\r\n\r\n const selectedExist = (selectedFirstItemIndex || selectedFirstItemIndex === 0) && selectedFirstItemIndex > -1;\r\n const indexesToReplace = selectedExist ? [selectedFirstItemIndex, ...otherSelectedWallsIndexes] : [...otherSelectedWallsIndexes];\r\n\r\n this.childItemText = props.childItem ? props.childItem.text : \"\";\r\n this.parentItemText = props.parentItem ? props.parentItem.text : \"\";\r\n this.setState({\r\n reorderedFeatures: this.getReorderedItems(indexesToReplace, props, selectedExist)\r\n // }, () => {\r\n // setTimeout(() => {\r\n // if (this._isMounted) {\r\n // this.setState({\r\n // showLoader: false\r\n // })\r\n // }\r\n // }, 50)\r\n });\r\n };\r\n\r\n handleUserLoginClick = (userPopupType = UserPopupTypes.Unlock) => {\r\n UserLoginButton.handleLoginClick({...this.props, userPopupType});\r\n };\r\n\r\n renderLoadingList = (activePart) => {\r\n if (!activePart.counts) {\r\n return \r\n }\r\n // console.log('ctivePart.counts', activePart.counts);\r\n const counts = getActivePartsCounts(activePart, this.props.layoutName);\r\n // console.log('counts', counts);\r\n\r\n if (!counts) {\r\n return \r\n }\r\n\r\n const elements = [];\r\n for (let i = 0; i < counts; i++ ) {\r\n elements.push(\r\n \r\n
\r\n ) : (\r\n - \r\n {values.map((wizardValueObject, filterValueIndex) => {\r\n const currentFilterValue = this.getFilterValueObjectById(currentGroup, wizardValueObject.filterValue);\r\n return this.getFeatureWizardBodyItem(\r\n currentFilterValue,\r\n currentGroup,\r\n wizardValueObject,\r\n filteredFeatures,\r\n fabricatorSettings,\r\n \"item\"+filterValueIndex\r\n )\r\n })}\r\n
- \r\n {this.renderItemsList(currentGroup, filteredFeatures, values, fabricatorSettings)}\r\n
(props.disabled && !props.itemIsLocked)\r\n ? props.onItemClickDisabled(props.currentFilterValue, props.itemIsLocked, props.currentStep.filterName)\r\n : props.onItemClick(props.currentFilterValue, props.itemIsLocked, props.currentStep.filterName)}\r\n style={props.styles}>\r\n
\r\n {props.isActive && (props.itemIsLocked || (!props.userIsLoggedIn && props.getQuoteEnabled)) ? (\r\n \r\n {props.itemIsLocked\r\n ? \r\n : {props.currentFilterValue.displayText}}\r\n
\r\n \r\n \r\n
\r\n ) : null}\r\n (props.disabled && !props.itemIsLocked)\r\n ? props.onItemClickDisabled(props.currentFilterValue, props.itemIsLocked, props.currentStep.filterName)\r\n : props.onItemClick(props.currentFilterValue, props.itemIsLocked, props.currentStep.filterName)}>\r\n {props.isActive && (props.itemIsLocked || (!props.userIsLoggedIn && props.getQuoteEnabled)) ? (\r\n
\r\n )\r\n};\r\n\r\nFeatureWizardBodyItem.displayName = 'FeatureWizardBodyItem';\r\n\r\nexport default FeatureWizardBodyItem;\r\n","import React, {Component} from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport {FormattedMessage} from \"react-intl\";\r\n\r\nimport FeatureWizardSelectionItem from \"./featureWizardSelectionItem\";\r\n\r\nexport default class FeatureWizardSelection extends Component {\r\n\r\n static propTypes = {\r\n toggleWizardFilterSelection: PropTypes.func.isRequired,\r\n getFilterValueObjectById: PropTypes.func.isRequired,\r\n onItemClick: PropTypes.func.isRequired,\r\n exitFeatureWizard: PropTypes.func.isRequired,\r\n setFeatureWizardStep: PropTypes.func.isRequired,\r\n currentStep: PropTypes.object.isRequired,\r\n isMobile: PropTypes.bool,\r\n };\r\n\r\n componentDidMount() {\r\n this.props.setFeatureWizardStep(0);\r\n }\r\n\r\n setWizardValue = (clickedFilterValue) => {\r\n this.props.toggleWizardFilterSelection(true);\r\n this.props.onItemClick(clickedFilterValue, false, this.props.currentStep.filterName);\r\n this.props.setFeatureWizardStep(1);\r\n };\r\n\r\n setAllItems = () => {\r\n setTimeout(() => {\r\n this.props.toggleWizardFilterSelection(true);\r\n }, 300);\r\n this.props.exitFeatureWizard();\r\n };\r\n\r\n render() {\r\n return (\r\n \r\n \r\n
\r\n ) : null}\r\n \r\n {props.itemIsLocked ? null : (\r\n {props.currentFilterValue.displayText}\r\n )}\r\n
\r\n \r\n
\r\n )\r\n }\r\n}\r\n","import React from 'react';\r\n\r\nconst FeatureWizardSelectionItem = (props) => {\r\n return (\r\n - \r\n
- \r\n
\r\n \r\n {this.props.currentStep.values.map((wizardValueObject, index) => {\r\n const currentFilterValue = this.props.getFilterValueObjectById(this.props.currentGroup, wizardValueObject.filterValue);\r\n return (\r\n
\r\n
\r\n )\r\n};\r\n\r\nconst mapStateToProps = () => {\r\n return {};\r\n};\r\n\r\nconst mapDispatchToProps = {};\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(RoomSceneNavigation)\r\n","import React, {useEffect, useState} from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport $ from \"jquery\";\r\nimport PropTypes from \"prop-types\";\r\n\r\nimport {createFakeLayout, getCurrentLayout} from \"../../appLayout\";\r\nimport LoadingSpinner from \"../../ui/loadingSpinner\";\r\nimport ActionTypes from \"../../../misc/actionTypes\";\r\nimport {loaderDisable, loaderEnable} from \"../../ui/loaderView\";\r\nimport {getImagePromiseFromLayout} from \"../../../misc/getCanvasImageFromLayout\";\r\nimport {useIsMounted} from \"../../../misc/helperHooks\";\r\n\r\nconst RoomSceneNavigationItem = (props) => {\r\n\r\n const {roomScene, isActive, setActiveScene} = props;\r\n\r\n const [thumbnailUrl, setThumbnailUrl] = useState();\r\n const layout = getCurrentLayout();\r\n const isMounted = useIsMounted();\r\n\r\n useEffect(() => {\r\n if (!thumbnailUrl) {\r\n const getLayoutThumbnail = async () => {\r\n const fakeLayout = layout.scene === roomScene ? layout : createFakeLayout();\r\n if (!isActive) {\r\n await fakeLayout.selectLayout(layout.type, null, null, roomScene, null, true);\r\n }\r\n // console.log(\"layout.getLayers(showPlaceHolders)\", roomScene, fakeLayout, fakeLayout.getLayers(false));\r\n const imageResponse = await getImagePromiseFromLayout(fakeLayout);\r\n if (isMounted() && imageResponse) {\r\n setThumbnailUrl(imageResponse);\r\n }\r\n\r\n }\r\n getLayoutThumbnail();\r\n }\r\n }, []); // eslint-disable-line react-hooks/exhaustive-deps\r\n\r\n const roomSceneClick = async () => {\r\n if (!isActive) {\r\n loaderEnable();\r\n setActiveScene(roomScene);\r\n await layout.selectLayout(layout.type, null, null, roomScene);\r\n $(window).trigger(ActionTypes.UPDATE_ALL_ITEMS); // update canvas\r\n loaderDisable();\r\n }\r\n };\r\n\r\n return (\r\n - \r\n {availableRoomScenes.map(roomScene => {\r\n return
\r\n
\r\n )\r\n}\r\n\r\nDesktopNavigationLayoutsContent.propTypes = {\r\n handleLayoutItemClick: PropTypes.func,\r\n}\r\n\r\nconst mapStateToProps = (store) => {\r\n const {desktopNavigationOpened} = store.navigationState;\r\n return {\r\n desktopNavigationOpened\r\n };\r\n};\r\n\r\nexport default connect(mapStateToProps)(DesktopNavigationLayoutsContent);\r\n","import React from 'react';\r\nimport {connect} from 'react-redux';\r\nimport {injectIntl} from \"react-intl\";\r\n\r\nimport MobileNavigationCommon from \"../../visComponents/navigation/mobileNavigationCommon\";\r\n\r\nimport {\r\n setVanityType,\r\n setDefaultSelectionGroup,\r\n changeActivePartRelatedItemIndex\r\n} from \"../../../actions/actionFunctions\";\r\n\r\nimport {ContentType} from \"../../visComponents/constants\";\r\nimport {Vanity} from \"../core/parts/vanity\";\r\nimport Z from \"../core/parts/zIndex\";\r\n\r\nimport MobileNavigationButtons from '../../visComponents/navigation/mobile/mobileNavigationButtons';\r\nimport MobileNavigationAllWallsCheckbox from '../../visComponents/navigation/mobile/mobileNavigationAllWallsCheckbox';\r\nimport FeatureWizardSteps from \"../../visComponents/navigation/featureWizard/featureWizardSteps\";\r\n\r\nimport MobileMenuSelect from '../../visComponents/navigation/mobile/mobileMenuSelect';\r\nimport LockedView from \"../../common/lockedView\";\r\n\r\nimport Filters from \"../../visComponents/navigation/newFilters/filters\";\r\nimport BodyPanelRadio from \"../../visComponents/navigation/desktop/bodyPanelRadio\";\r\nimport ContextMenu from \"./contextMenu\";\r\nimport FilterSwitchers from \"../../visComponents/navigation/newFilters/filterSwitchers\";\r\nimport FilterSelection from \"../../visComponents/navigation/newFilters/filterSelection\";\r\nimport {setNavigationLoading, setNavigationViewType} from \"../../../actions/navigationFunctions\";\r\nimport {getCurrentLayout} from \"../../appLayout\";\r\n\r\nclass MobileNavigation extends MobileNavigationCommon {\r\n\r\n bindCanvasClick = (event) => {\r\n const layout = getCurrentLayout();\r\n // const canvas = document.getElementById(this.props.canvasId);\r\n\r\n if (!window.touchMove && !this.state.showNavigation && !this.state.contextMenuOpen) {\r\n this.props.setHoveredLayer(event);\r\n }\r\n\r\n if (document.hoveredLayer && !window.touchMove) {\r\n // $('.canvas-text').html(`CLICK3`);\r\n const layoutType = layout.getCurrentLayoutName();\r\n\r\n const hoveredZone = Z.getMenuByHoveredLayer(layoutType, document.hoveredLayer);\r\n let ponyWallGroup = false;\r\n\r\n if (hoveredZone) {\r\n if ((hoveredZone === \"shower_custom\" || hoveredZone === \"vanity_custom\" || hoveredZone === \"bathtub_custom\"\r\n || hoveredZone === \"shower_combo\" || hoveredZone === \"shower_pony_wall\" || hoveredZone === \"left_wall_custom\"\r\n || hoveredZone === \"wall_b_custom\") && !this.state.showNavigation) {\r\n if (this.state.contextMenuOpen) {\r\n this.setState({\r\n contextMenuOpen: false,\r\n hoveredLayer: {}\r\n });\r\n document.removeEventListener('click', this.handleContextMenuBlur);\r\n } else {\r\n let contextMenuOpen = '';\r\n switch (hoveredZone) {\r\n case \"shower_custom\":\r\n case \"shower_combo\":\r\n case \"shower_pony_wall\": {\r\n const showerGroup = this.state.designNavigationItems.find(navItem => {\r\n return navItem.text === \"Shower\"\r\n });\r\n contextMenuOpen = showerGroup.part.showerTubComboIsActive() ? \"Shower Tub Combo\" : \"Shower\";\r\n if (hoveredZone === \"shower_pony_wall\") {\r\n ponyWallGroup = true;\r\n }\r\n break;\r\n }\r\n case \"vanity_custom\":\r\n contextMenuOpen = \"Vanity\";\r\n break;\r\n case \"bathtub_custom\":\r\n contextMenuOpen = \"Bathtub\";\r\n break;\r\n case \"left_wall_custom\":\r\n contextMenuOpen = \"Shower Body Selection\";\r\n break;\r\n case \"wall_b_custom\":\r\n contextMenuOpen = \"wall_b_custom\";\r\n break;\r\n }\r\n this.setState({\r\n contextMenuOpen,\r\n contextMenuPonyWall: ponyWallGroup,\r\n hoveredLayer: document.hoveredLayer\r\n }, () => {\r\n if (contextMenuOpen) {\r\n setTimeout(() => {\r\n document.addEventListener('click', this.handleContextMenuBlur);\r\n }, 0)\r\n }\r\n });\r\n }\r\n return false;\r\n } else if (this.state.contentType === 0) {\r\n if (!window.canvasIsDragging) {\r\n this.props.setCanvasClass((hoveredZone.child || hoveredZone.parent || hoveredZone).toLowerCase().replace(/ /g, \"-\"));\r\n }\r\n this.openMobileMenu();\r\n }\r\n\r\n hoveredZone.child\r\n ? this.triggerOpenNavigationMenu(hoveredZone.child, hoveredZone.parent, ponyWallGroup)\r\n : this.triggerOpenNavigationMenu(hoveredZone)\r\n\r\n }\r\n\r\n }\r\n\r\n };\r\n\r\n handleNavigationItemClick = (item, ignoreLocked = false, featureIsLocked) => {\r\n const layout = getCurrentLayout();\r\n //console.log('item', item);\r\n if (item.matchesMetaFailed) {\r\n const nonCompatibleWith = item.part.partId === \"vanity_faucet\" ? \"sink\" : \"vanity\";\r\n this.callMetaMathesFailedPopup(item, nonCompatibleWith);\r\n } else if (item.part.partId === \"vanity_sink\" && this.state.parentNavigationItem.part.faucet.placeholderChanged\r\n && this.state.parentNavigationItem.part.faucet.activeFeature) {\r\n const sinkSizeConditionValue = item.part.metaData[\"SinkSize\"][0];\r\n if (this.state.parentNavigationItem.part.faucet.activeFeature.matchesMetaForCondition('SinkSize', sinkSizeConditionValue)) {\r\n this.itemClick(item, ignoreLocked)\r\n } else {\r\n this.callMetaMathesFailedPopup(item, 'faucet');\r\n }\r\n } else if (item.part.partId === \"toilet\") {\r\n const vanity = layout.parts[Vanity.id];\r\n const counterTopSize = vanity.counterTopSize();\r\n if (counterTopSize === \"60in\" || counterTopSize === \"72in\") {\r\n this.callToiletFailPopup('toilet', item, ignoreLocked)\r\n } else {\r\n this.itemClick(item, ignoreLocked)\r\n }\r\n } else if (item.part.partId === \"vanity_cabinet\") {\r\n // let toilet = layout.parts[Toilet.id];\r\n // if (toilet) {\r\n // toilet = toilet.toilet; // toiletBody\r\n // }\r\n // const counterTopSize = item.part.vanitySize + 'in';\r\n // const vanity = layout.parts[Vanity.id];\r\n // const currentCounterTopSize = vanity.counterTopSize();\r\n // if (toilet && toilet.placeholderChanged && (counterTopSize === \"60in\" || counterTopSize === \"72in\")\r\n // && (currentCounterTopSize !== \"60in\" && currentCounterTopSize !== \"72in\")) {\r\n // this.callToiletFailPopup('vanity', item, ignoreLocked)\r\n // } else {\r\n // this.itemClick(item, ignoreLocked)\r\n // }\r\n this.itemClick(item, ignoreLocked);\r\n if (this.props.fabricatorSettings\r\n && (this.props.fabricatorSettings.wizardConsumers || (this.props.fabricatorSettings.wizardClients && document.kvConfig.isBackend))\r\n ) {\r\n if (!featureIsLocked && !item.part.partName.includes(\"laceholder\")) {\r\n this.setWizardFiltersFromActiveItem(item.part)\r\n }\r\n }\r\n } else if (item.part.partId === \"shower_interior_wall\") {\r\n if (!featureIsLocked && !item.part.partName.includes(\"laceholder\")) {\r\n this.setWizardFiltersFromActiveItem(item.part)\r\n }\r\n this.itemClick(item, ignoreLocked)\r\n } else {\r\n this.itemClick(item, ignoreLocked)\r\n }\r\n\r\n this.props.setActiveFeature(item.part);\r\n\r\n const canvasClass = this.state.childNavigationItem\r\n ? this.state.parentNavigationItem.text + '-' + this.state.childNavigationItem.text\r\n : this.state.parentNavigationItem.text;\r\n\r\n if (!window.canvasIsDragging) {\r\n this.props.setCanvasClass(canvasClass.toLowerCase().replace(/ /g, \"-\"));\r\n }\r\n\r\n if (this.state.parentNavigationItem) { // update canvas only if it is child\r\n this.props.refreshCB();\r\n }\r\n };\r\n\r\n handleSubPartClick = subNavigationItem => { // sidebar list item click\r\n const subItemPart = subNavigationItem.part;\r\n subItemPart.getParent().handleSubPartClick(subItemPart);\r\n this.setState({\r\n childNavigationItem: subNavigationItem,\r\n showFilterSelection: subItemPart.allFeaturesReceived, // show filters only if subItemPart has all features\r\n showerWallWizardGroupsSelected: false,\r\n searchText: \"\"\r\n }, () => {\r\n this.scrollContentToTop();\r\n this.rememberWallsSelection();\r\n this.checkIfAllFeaturesReceived(subNavigationItem, \"childNavigationItem\");\r\n });\r\n /*set new materials page subIndex*/\r\n this.setActivePartRelatedItemIndex(subNavigationItem);\r\n // console.log('subItemPart', subItemPart);\r\n if ((subItemPart.getParent() && subItemPart.getParent().partName === \"Walls\")\r\n || subItemPart.partName === \"Accent Wall\" && !window.canvasIsDragging) {\r\n this.props.setCanvasClass(subNavigationItem.text.toLowerCase().replace(/ /g, \"-\"));\r\n }\r\n this.setNewActiveFeature(subNavigationItem);\r\n };\r\n\r\n render() {\r\n const layout = getCurrentLayout();\r\n const activePart = this.state.parentNavigationItem ? this.state.parentNavigationItem.part : null;\r\n const activeSubPart = this.state.childNavigationItem ? this.state.childNavigationItem.part : null;\r\n const parentItems = layout.designNavigationItems(); // parent list without filters\r\n const allFeaturesReceived = (activeSubPart || activePart) && (activeSubPart || activePart).allFeaturesReceived;\r\n\r\n // console.log('activePart', activePart);\r\n // console.log('activeSubPart', activeSubPart);\r\n // console.log('activePart.subTypes()', activePart && activePart.subTypes());\r\n // console.log('this.state.childNavigationItemv1111', this.state.childNavigationItem);\r\n\r\n let useWizard = false;\r\n let wizardGroups = [];\r\n if (this.props.fabricatorSettings\r\n && (this.props.fabricatorSettings.wizardConsumers || (this.props.fabricatorSettings.wizardClients && document.kvConfig.isBackend))\r\n && this.state.contentType === ContentType.Design && activeSubPart && activeSubPart.canUseWizard && activeSubPart.allFeaturesReceived) {\r\n useWizard = true;\r\n wizardGroups = this.state[this.getWizardGroupsByPartId(this.state.childNavigationItem.part.partId)];\r\n }\r\n\r\n const features = this.getFeatures(layout);\r\n\r\n const showLockedView = this.currentActiveItemIsLocked(useWizard);\r\n\r\n // console.log('featuresfeaturesfeatures', features);\r\n\r\n const useFilters = (activePart && activePart.partId === \"floor\" && activePart.allFeaturesReceived)\r\n || (activeSubPart && (this.isWallItem(activeSubPart) || activeSubPart.partId === \"accent_wall\"\r\n || activeSubPart.partId === \"shower_interior_wall_accent\") && activeSubPart.allFeaturesReceived);\r\n\r\n const filterSelectionHasValues = (activeSubPart || activePart) && FilterSelection.getAvailableFilterValues(\r\n this.props.filterGroups, \"Material\", activeSubPart || activePart, this.props.fabricatorData\r\n ).length;\r\n\r\n const itemIsSelected = (!this.props.fabricatorSettings.leadCapture\r\n || (activeSubPart && activeSubPart.activeFeature && activeSubPart.firstClick[this.props.activeQuoteIndex] && activeSubPart.placeholderChanged));\r\n\r\n return (\r\n - \r\n {layoutNames.map(key => {\r\n return
\r\n
\r\n {this.state.contextMenuOpen\r\n ? \r\n {/*
\r\n \r\n \r\n
\r\n \r\n // {this.emptyStone}\r\n // {this.emptyStone}\r\n //
);\r\n //\r\n // // ({this.emptyStone}
);\r\n // }\r\n // console.log('rowIndex:', rowIndex);\r\n // console.log('columnIndex:', columnIndex);\r\n // console.log('===================');\r\n // console.log('element', element);\r\n return \r\n {list[rowIndex][columnIndex]}\r\n
\r\n }}>\r\n - \r\n {/*{this.state.showLoader ? (*/}\r\n {/**/}\r\n {/*) : this.renderItemsList()}*/}\r\n {this.props.allFeaturesReceived\r\n ? showNavigationFilters\r\n ?
- \r\n {parentItems.map((parentItem, parentItemIndex) => {\r\n const style = {\r\n backgroundImage: `url(${parentItem.part.partThumbnail})`,//TODO\r\n };\r\n if (parentItem.part.partThumbnailSize) {\r\n style.backgroundSize = Math.round(parentItem.part.partThumbnailSize.split(\"%\")[0]/1.5)+\"%\";\r\n style.backgroundPosition = \"top 30% center\";\r\n }\r\n if (parentItem.part.partThumbnail.includes(\"countertop\")\r\n || parentItem.part.partThumbnail.includes(\"toilet\")) {\r\n style.backgroundSize = \"80%\";\r\n }\r\n return (\r\n
- this.parentItemClick(parentItem.text)}>\r\n \r\n\r\n\r\n \r\n {getFeatureGroupName(parentItem.part, intl, fabricatorData)}\r\n \r\n\r\n \r\n )\r\n })}\r\n
\r\n \r\n
\r\n )\r\n }\r\n\r\n}\r\nconst mapStateToProps = (store) => ({\r\n userIsLoggedIn: store.userState.userIsLoggedIn,\r\n isPhoneNumberValidated: store.userState.isPhoneNumberValidated,\r\n fabricatorData: store.fabricatorState,\r\n visualizerTutorialStep: store.tutorialState.visualizerTutorialStep,\r\n visualizersLoadedLength: store.serverState.visualizersLoaded.length,\r\n});\r\nexport default connect(mapStateToProps, {\r\n toggleUserPopup,\r\n changeMessageBoxState\r\n})(DesignButton);\r\n","import React from \"react\";\r\nimport {connect} from \"react-redux\";\r\nimport {FormattedMessage} from \"react-intl\";\r\n\r\nimport goToMaterialPage from \"./goToMaterialPage\";\r\nimport {showMaterialsTutorial} from \"../../actions/tutorialFunctions\";\r\nimport {toggleBathroomVisualizerOpen} from \"../../actions/actionFunctions\";\r\n\r\nclass MinimizeButton extends React.Component {\r\n\r\n componentWillReceiveProps(nextProps) {\r\n if (nextProps.visualizerTutorialStep === 1 && !this.props.visualizerTutorialStep) {\r\n this.backToQuote();\r\n }\r\n }\r\n\r\n backToQuote = () => {\r\n goToMaterialPage('visualizer');\r\n this.props.toggleBathroomVisualizerOpen(false);\r\n if (!this.props.materialsTutorialFinished) {\r\n this.props.showMaterialsTutorial(true);\r\n }\r\n };\r\n\r\n render() {\r\n return (\r\n \r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = (store) => {\r\n return {\r\n visualizerTutorialStep: store.tutorialState.visualizerTutorialStep,\r\n materialsTutorialFinished: store.tutorialState.materialsTutorialFinished,\r\n };\r\n};\r\n\r\nexport default connect(mapStateToProps, {\r\n toggleBathroomVisualizerOpen,\r\n showMaterialsTutorial\r\n})(MinimizeButton);\r\n","export function downloadCSV(data) {\r\n\r\n let csvRows = []; //https://gist.github.com/yangshun/01b81762e8d30f0d7f8f\r\n for (let i = 0; i < data.length; ++i) {\r\n // for (var j = 0; j < data[i].length; ++j) {\r\n // data[i][j] = '\\\"' + data[i][j] + '\\\"'; // Handle elements that contain commas\r\n // }\r\n csvRows.push(data[i].join(','));\r\n }\r\n\r\n const csvContent = csvRows.join('\\r\\n');\r\n\r\n// The download function takes a CSV string, the filename and mimeType as parameters\r\n// Scroll/look down at the bottom of this snippet to see how download is called\r\n const download = function(content) {\r\n const a = document.createElement('a');\r\n const fileName = 'download.csv';\r\n const blobConfig = {\r\n encoding: \"UTF-8\",\r\n type: \"text/plain;charset=UTF-8\" // 'application/octet-stream'; // 'text/csv;encoding:utf-8'\r\n };\r\n if (navigator.msSaveBlob) { // IE10\r\n navigator.msSaveBlob(new Blob([content], blobConfig), fileName);\r\n } else if (URL && 'download' in a) { //html5 A[download]\r\n a.href = URL.createObjectURL(new Blob([content], blobConfig));\r\n a.setAttribute('download', fileName);\r\n document.body.appendChild(a);\r\n a.click();\r\n document.body.removeChild(a);\r\n } else {\r\n location.href = 'data:application/octet-stream,' + encodeURIComponent(content); // only this mime type is supported\r\n }\r\n };\r\n\r\n download(csvContent);\r\n}\r\n","import React from \"react\";\r\n\r\nconst DemoPoint = (props) => (\r\n - \r\n
- \r\n \r\n \r\n
- \r\n \r\n \r\n {showOtherLayouts ? (\r\n
- \r\n \r\n \r\n ) : null}\r\n
- \r\n \r\n \r\n
- */}\r\n {/*
*/}\r\n {/* */}\r\n {/*) : null}*/}\r\n
\r\n \r\n \r\n \r\n
\r\n);\r\n\r\nDemoPoint.displayName = \"DemoPoint\";\r\nexport default DemoPoint","import React from \"react\";\r\nimport {connect} from \"react-redux\";\r\n\r\nimport COLOR_THEMES from \"../../../colorThemes\";\r\n\r\n\r\nconst ExclamationMarkIcon = (props) => {\r\n\r\n const {activeTheme} = props;\r\n\r\n return (\r\n \r\n )\r\n}\r\n\r\nconst mapStateToProps = store => {\r\n const {activeTheme} = store.serverState;\r\n return {\r\n activeTheme\r\n }\r\n};\r\n\r\nexport default connect(mapStateToProps)(ExclamationMarkIcon)\r\n","import uniq from \"lodash/uniq\";\r\n\r\nimport Config from \"../config\";\r\nimport store from \"../store\";\r\nimport {setCustomAddedDiscounts, setDiscountSections, setFinancePercentage} from \"../actions/priceWorksheetActions\";\r\nimport {getBvFeatures, getDiscounts} from \"./server-api\";\r\nimport {getArrayOfIdsFromBvState} from \"../misc/helpers\";\r\nimport {setActiveQuoteIndex, setQuotes} from \"../actions/roomsFunctions\";\r\nimport {objectWithoutProperties} from \"../misc/helpers\";\r\nimport {createFakeLayout, getCurrentLayout, getVisualizerTypeFromBvScene} from \"../bvcomponents/appLayout\";\r\nimport {\r\n changeUserInfo,\r\n setFirstLoadedPreset, setStonePricing,\r\n setUserPhoneNumberValidated,\r\n toggleUserPopup\r\n} from \"../actions/actionFunctions\";\r\nimport {getImagePromiseFromLayout} from \"../misc/getCanvasImageFromLayout\";\r\nimport Misc from \"../misc/misc\";\r\nimport {setAmazonImageUrl} from \"../actions/serverFunctions\";\r\nimport {restorePaymentInfo} from \"../actions/paymentFunctions\";\r\nimport Analytics from \"../analytics\";\r\nimport {restoreAllWizardSelectedValues, setWizardList} from \"../actions/wizardFunctions\";\r\nimport {getQuoteInfo} from \"../misc/quotesFunctions\";\r\nimport JsonApi from \"./jsonApi\";\r\nimport {getParsedWizardList} from \"../bvcomponents/look/lookNavigation/lookMain/lookWizard/lookWizardFunctions2\";\r\nimport {parseMarkUp} from \"../misc/priceFunctions\";\r\nimport {setMarkUpLogic} from \"../actions/shoppingCartFunctions\";\r\nimport {DISCOUNT_MAIN_TYPES} from \"../bvcomponents/priceWorksheet/discounstInterface\";\r\n\r\n/**\r\n * Sets noteText for loaded features\r\n * @param notesFeatures {Array.\r\n \r\n
\r\n {showLockedView\r\n ? this.navWrapper = node}>\r\n
\r\n {this.state.contextMenuOpen && this.state.contextMenuOpen.module\r\n ? \r\n
\r\n {this.navigationMenuButtons(availableNavButtons)}\r\n {showNavigationFiltersSteps ? null : (\r\n \r\n {this.content(useWizard, wizardGroups, useFilters, activePart, activeSubPart)}\r\n
\r\n \r\n \r\n
\r\n )}\r\n {/**/}\r\n {/*
*/}\r\n */}\r\n {/**/}\r\n {/*
*/}\r\n {/*\r\n
\r\n {this.state.contextMenuOpen && this.state.contextMenuOpen.module\r\n ? \r\n {/*
\r\n \r\n \r\n
\r\n {showLockedView\r\n ? this.navWrapper = node}>\r\n
\r\n {this.state.contextMenuOpen && !this.state.contextMenuOpen.module\r\n ? \r\n
\r\n {this.navigationMenuButtons(availableNavButtons)}\r\n {showNavigationFiltersSteps ? null : (\r\n \r\n {this.content(useWizard, wizardGroups, useFilters, activePart, activeSubPart)}\r\n
\r\n \r\n \r\n
\r\n )}\r\n {/**/}\r\n {/*
*/}\r\n */}\r\n {/**/}\r\n {/*
*/}\r\n {/*\r\n
\r\n {this.state.contextMenuOpen && !this.state.contextMenuOpen.module\r\n ? \r\n {/*
\r\n \r\n \r\n
\r\n {this.props.bvOpened ? this.navWrapper = node}>\r\n
\r\n {this.state.contextMenuOpen && !this.state.contextMenuOpen.module\r\n ? \r\n
\r\n {this.navigationMenuButtons(availableNavButtons)}\r\n {showNavigationFiltersSteps ? null : (\r\n \r\n {this.content(useWizard, wizardGroups, useFilters, activePart, activeSubPart)}\r\n
\r\n \r\n \r\n
\r\n )}\r\n {/**/}\r\n {/*
*/}\r\n */}\r\n {/**/}\r\n {/*
*/}\r\n {/*\r\n \r\n
\r\n )\r\n};\r\n\r\nNavItemPositionModalSlatWall.propTypes = {\r\n styles: PropTypes.object,\r\n triangleStyles: PropTypes.object,\r\n parent: PropTypes.object.isRequired,\r\n isWizard: PropTypes.bool,\r\n checkboxesUpdated: PropTypes.bool.isRequired,\r\n updateCheckboxes: PropTypes.func.isRequired,\r\n activeFeature: PropTypes.shape(featureInterface),\r\n}\r\n\r\nconst mapStateToProps = (store) => {\r\n return {\r\n navItemPositionModal: store.navigationState.navItemPositionModal\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n updateCanvasCount,\r\n};\r\nexport default injectIntl(\r\n connect(mapStateToProps, mapDispatchToProps)(NavItemPositionModalSlatWall)\r\n)\r\n","import React from 'react';\r\nimport {connect} from 'react-redux';\r\nimport {injectIntl} from \"react-intl\";\r\n\r\nimport MobileNavigationCommon from \"../../visComponents/navigation/mobileNavigationCommon\";\r\n\r\nimport {ContentType} from \"../../visComponents/constants\";\r\nimport Z from \"../core/zIndex\";\r\n\r\nimport MobileNavigationButtons from '../../visComponents/navigation/mobile/mobileNavigationButtons';\r\nimport MobileNavigationAllWallsCheckbox from '../../visComponents/navigation/mobile/mobileNavigationAllWallsCheckbox';\r\nimport FeatureWizardSteps from \"../../visComponents/navigation/featureWizard/featureWizardSteps\";\r\n\r\nimport {changeActivePartRelatedItemIndex, setDefaultSelectionGroup} from \"../../../actions/actionFunctions\";\r\nimport {\r\n setActiveNavigationFilter,\r\n setModuleContextMenuType,\r\n setModuleContextMenuModule,\r\n setActiveNavigationFilterStepIndex, setNavigationViewType, setNavigationLoading, toggleNavItemPositionModal\r\n} from \"../../../actions/navigationFunctions\";\r\n\r\nimport MobileMenuSelect from '../../visComponents/navigation/mobile/mobileMenuSelect';\r\nimport LockedView from \"../../common/lockedView\";\r\n\r\nimport Filters from \"../../visComponents/navigation/newFilters/filters\";\r\nimport BodyPanelRadio from \"../../visComponents/navigation/desktop/bodyPanelRadio\";\r\nimport FilterSwitchers from \"../../visComponents/navigation/newFilters/filterSwitchers\";\r\nimport FilterSelection from \"../../visComponents/navigation/newFilters/filterSelection\";\r\n// import {CABINET_WIZARD_BUTTONS} from \"../core/constants\";\r\nimport NavigationFiltersSteps from \"../../visComponents/navigation/newFilters/navigationFiltersSteps\";\r\nimport ContextMenu from \"./contextMenu\";\r\n\r\nimport {getCurrentLayout} from \"../../appLayout\";\r\nimport {COUNTERTOP_GROUP_BATHROOM} from \"../core/constants\";\r\nimport CountertopSwitchers from \"../../kvComponent/navigation/countertopSwitchers\";\r\nimport {Vanity} from \"../core/parts/vanity\";\r\nimport NavItemPositionModal from \"../../visComponents/navigation/navItemPositionModal\";\r\nimport LookAllWallsRadioButton from \"../../look/lookNavigation/lookMain/lookAllWallsRadioButton\";\r\n\r\nclass MobileNavigation extends MobileNavigationCommon {\r\n\r\n componentWillReceiveProps(nextProps) {\r\n this._componentWillReceiveProps(nextProps)\r\n }\r\n\r\n bindCanvasClick = (event) => {\r\n const layout = getCurrentLayout();\r\n // const canvas = document.getElementById(this.props.canvasId);\r\n\r\n if (!window.touchMove && !this.state.showNavigation && !this.state.contextMenuOpen) {\r\n this.props.setHoveredLayer(event);\r\n }\r\n\r\n if (document.hoveredLayer && !window.touchMove) {\r\n // $('.canvas-text').html(`CLICK3`);\r\n const layoutType = layout.getCurrentLayoutName();\r\n\r\n const hoveredZone = Z.getMenuByHoveredLayer(layoutType, document.hoveredLayer);\r\n let ponyWallGroup = false;\r\n\r\n if (hoveredZone) {\r\n if ((hoveredZone === \"shower_custom\" || hoveredZone === \"vanity_custom\" || hoveredZone === \"bathtub_custom\"\r\n || hoveredZone === \"shower_combo\" || hoveredZone === \"shower_pony_wall\" || hoveredZone === \"left_wall_custom\"\r\n || hoveredZone === \"wall_b_custom\") && !this.state.showNavigation) {\r\n if (this.state.contextMenuOpen) {\r\n this.setState({\r\n contextMenuOpen: false,\r\n hoveredLayer: {}\r\n });\r\n document.removeEventListener('click', this.handleContextMenuBlur);\r\n } else {\r\n let contextMenuOpen = '';\r\n switch (hoveredZone) {\r\n case \"shower_custom\":\r\n case \"shower_combo\":\r\n case \"shower_pony_wall\": {\r\n const showerGroup = this.state.designNavigationItems.find(navItem => {\r\n return navItem.text === \"Shower\"\r\n });\r\n contextMenuOpen = showerGroup.part.showerTubComboIsActive() ? \"Shower Tub Combo\" : \"Shower\";\r\n if (hoveredZone === \"shower_pony_wall\") {\r\n ponyWallGroup = true;\r\n }\r\n break;\r\n }\r\n case \"vanity_custom\":\r\n contextMenuOpen = \"Vanity\";\r\n break;\r\n case \"bathtub_custom\":\r\n contextMenuOpen = \"Bathtub\";\r\n break;\r\n case \"left_wall_custom\":\r\n contextMenuOpen = \"Shower Body Selection\";\r\n break;\r\n case \"wall_b_custom\":\r\n contextMenuOpen = \"wall_b_custom\";\r\n break;\r\n }\r\n this.setState({\r\n contextMenuOpen,\r\n contextMenuPonyWall: ponyWallGroup,\r\n hoveredLayer: document.hoveredLayer\r\n }, () => {\r\n if (contextMenuOpen) {\r\n setTimeout(() => {\r\n document.addEventListener('click', this.handleContextMenuBlur);\r\n }, 0)\r\n }\r\n });\r\n }\r\n return false;\r\n } else if (this.state.contentType === 0) {\r\n if (!window.canvasIsDragging) {\r\n this.props.setCanvasClass((hoveredZone.child || hoveredZone.parent || hoveredZone).toLowerCase().replace(/ /g, \"-\"));\r\n }\r\n this.openMobileMenu();\r\n }\r\n\r\n hoveredZone.child\r\n ? this.triggerOpenNavigationMenu(hoveredZone.child, hoveredZone.parent, ponyWallGroup)\r\n : this.triggerOpenNavigationMenu(hoveredZone)\r\n\r\n }\r\n\r\n }\r\n\r\n };\r\n\r\n handleNavigationItemClick = (item, ignoreLocked = false, featureIsLocked, event) => {\r\n const layout = getCurrentLayout();\r\n //console.log('item', item);\r\n\r\n if (this.state.childNavigationItem\r\n && this.state.childNavigationItem.part.activeFeature\r\n && Array.isArray(this.state.childNavigationItem.part.activeFeature.metaData[\"SkuName\"])\r\n && this.state.childNavigationItem.part.activeFeature.metaData[\"SkuName\"][0]\r\n && Array.isArray(item.part.metaData[\"SkuName\"])\r\n && (this.state.childNavigationItem.part.activeFeature.metaData[\"SkuName\"][0] === item.part.metaData[\"SkuName\"][0])) {\r\n this.showPositionsPopup(item, event); // move modal to new position\r\n return false // don't change L to R // redundant click\r\n }\r\n\r\n const showPositionPopup = this.showPositionsPopup(item, event);\r\n if (showPositionPopup) {\r\n this.props.setActiveFeature(item.part); // set feature for modal\r\n return // don't click on feature!! we are clicking inside the modal window\r\n }\r\n\r\n if (item.matchesMetaFailed) {\r\n let nonCompatibleWith = \"\";\r\n switch (item.part.partId) {\r\n case \"vanity_faucet\":\r\n nonCompatibleWith = \"sink\";\r\n break;\r\n case \"sink\":\r\n nonCompatibleWith = \"vanity\";\r\n break;\r\n case \"shower_pod\":\r\n nonCompatibleWith = \"Window Kit\";\r\n break;\r\n case \"window_kits\":\r\n nonCompatibleWith = item.matchesMetaFailed === \"shower_pod\" ? \"Shower Pod\" : \"Corner Shelf\";\r\n break;\r\n default:\r\n break;\r\n }\r\n this.callMetaMathesFailedPopup(item, nonCompatibleWith);\r\n } else if (item.part.partId === \"vanity_sink\" && this.state.parentNavigationItem.part.faucet.placeholderChanged\r\n && this.state.parentNavigationItem.part.faucet.activeFeature) {\r\n const sinkSizeConditionValue = item.part.metaData[\"SinkSize\"][0];\r\n if (this.state.parentNavigationItem.part.faucet.activeFeature.matchesMetaForCondition('SinkSize', sinkSizeConditionValue)) {\r\n this.itemClick(item, ignoreLocked)\r\n } else {\r\n this.callMetaMathesFailedPopup(item, 'faucet');\r\n }\r\n } else if (item.part.partId === \"toilet\") {\r\n const vanity = layout.parts[Vanity.id];\r\n const counterTopSize = vanity.counterTopSize();\r\n if (counterTopSize === \"60in\" || counterTopSize === \"72in\") {\r\n this.callToiletFailPopup('toilet', item, ignoreLocked)\r\n } else {\r\n this.itemClick(item, ignoreLocked)\r\n }\r\n } else if (item.part.partId === \"vanity_cabinet\") {\r\n // let toilet = layout.parts[Toilet.id];\r\n // if (toilet) {\r\n // toilet = toilet.toilet; // toiletBody\r\n // }\r\n // const counterTopSize = item.part.vanitySize + 'in';\r\n // const vanity = layout.parts[Vanity.id];\r\n // const currentCounterTopSize = vanity.counterTopSize();\r\n // if (toilet && toilet.placeholderChanged && (counterTopSize === \"60in\" || counterTopSize === \"72in\")\r\n // && (currentCounterTopSize !== \"60in\" && currentCounterTopSize !== \"72in\")) {\r\n // this.callToiletFailPopup('vanity', item, ignoreLocked)\r\n // } else {\r\n // this.itemClick(item, ignoreLocked)\r\n // }\r\n this.itemClick(item, ignoreLocked);\r\n if (this.props.fabricatorSettings\r\n && (this.props.fabricatorSettings.wizardConsumers || (this.props.fabricatorSettings.wizardClients && document.kvConfig.isBackend))\r\n ) {\r\n if (!featureIsLocked && !item.part.partName.includes(\"laceholder\")) {\r\n this.setWizardFiltersFromActiveItem(item.part)\r\n }\r\n }\r\n } else if (item.part.partId === \"shower_interior_wall\") {\r\n if (!featureIsLocked && !item.part.partName.includes(\"laceholder\")) {\r\n this.setWizardFiltersFromActiveItem(item.part)\r\n }\r\n this.itemClick(item, ignoreLocked)\r\n } else {\r\n this.itemClick(item, ignoreLocked)\r\n }\r\n\r\n this.props.setActiveFeature(item.part);\r\n\r\n const canvasClass = this.state.childNavigationItem\r\n ? this.state.parentNavigationItem.text + '-' + this.state.childNavigationItem.text\r\n : this.state.parentNavigationItem.text;\r\n\r\n if (!window.canvasIsDragging) {\r\n this.props.setCanvasClass(canvasClass.toLowerCase().replace(/ /g, \"-\"));\r\n }\r\n\r\n if (this.state.parentNavigationItem) { // update canvas only if it is child\r\n this.props.refreshCB();\r\n }\r\n };\r\n\r\n handleSubPartClick = subNavigationItem => { // sidebar list item click\r\n const subItemPart = subNavigationItem.part;\r\n subItemPart.getParent().handleSubPartClick(subItemPart);\r\n this.setState({\r\n childNavigationItem: subNavigationItem,\r\n showFilterSelection: subItemPart.allFeaturesReceived, // show filters only if subItemPart has all features\r\n showerWallWizardGroupsSelected: false,\r\n searchText: \"\"\r\n }, () => {\r\n this.scrollContentToTop();\r\n this.rememberWallsSelection();\r\n this.checkIfAllFeaturesReceived(subNavigationItem, \"childNavigationItem\");\r\n });\r\n /*set new materials page subIndex*/\r\n this.setActivePartRelatedItemIndex(subNavigationItem);\r\n // console.log('subItemPart', subItemPart);\r\n if ((subItemPart.getParent() && subItemPart.getParent().partName === \"Walls\")\r\n || subItemPart.partName === \"Accent Wall\" && !window.canvasIsDragging) {\r\n this.props.setCanvasClass(subNavigationItem.text.toLowerCase().replace(/ /g, \"-\"));\r\n }\r\n this.setNewActiveFeature(subNavigationItem);\r\n };\r\n\r\n render() {\r\n const layout = getCurrentLayout();\r\n const activePart = this.state.parentNavigationItem ? this.state.parentNavigationItem.part : null;\r\n const activeSubPart = this.state.childNavigationItem ? this.state.childNavigationItem.part : null;\r\n const activeNavPart = activeSubPart || activePart;\r\n const parentItems = layout.designNavigationItems(); // parent list without filters\r\n const allFeaturesReceived = activeNavPart && activeNavPart.allFeaturesReceived;\r\n\r\n // console.log('activePart', activePart);\r\n // console.log('activeSubPart', activeSubPart);\r\n // console.log('activePart.subTypes()', activePart && activePart.subTypes());\r\n // console.log('this.state.childNavigationItemv1111', this.state.childNavigationItem);\r\n\r\n let useWizard = false;\r\n let wizardGroups = [];\r\n if (this.props.fabricatorSettings\r\n && (this.props.fabricatorSettings.wizardConsumers || (this.props.fabricatorSettings.wizardClients && document.kvConfig.isBackend))\r\n && this.state.contentType === ContentType.Design && activeSubPart && activeSubPart.canUseWizard && activeSubPart.allFeaturesReceived) {\r\n useWizard = true;\r\n wizardGroups = this.state[this.getWizardGroupsByPartId(this.state.childNavigationItem.part.partId)];\r\n }\r\n\r\n const features = this.getFeatures(layout);\r\n\r\n const showLockedView = this.currentActiveItemIsLocked(useWizard);\r\n\r\n const useFilters = (activePart && activePart.partId === \"kitchen_floor\" && activePart.allFeaturesReceived)\r\n || (activeSubPart && (this.isWallItem(activeSubPart) || activeSubPart.partId === \"accent_wall\"\r\n || activeSubPart.partId === \"shower_wall_accent\") && activeSubPart.allFeaturesReceived);\r\n\r\n const filterSelectionHasValues = activeNavPart && FilterSelection.getAvailableFilterValues(\r\n this.props.filterGroups, \"Material\", activeNavPart, this.props.fabricatorData\r\n ).length;\r\n\r\n const itemIsSelected = (!this.props.fabricatorSettings.leadCapture\r\n || (activeSubPart && activeSubPart.activeFeature && activeSubPart.firstClick[this.props.activeQuoteIndex] && activeSubPart.placeholderChanged));\r\n\r\n const useKVWizard = false;\r\n //TODO change it when BE is ready\r\n\r\n const showNavigationFilters = useKVWizard &&activeNavPart\r\n // && this.props.activeNavigationFilter !== CABINET_WIZARD_BUTTONS[0].buttonId\r\n && activeNavPart.canUseNavigationFilter && activeNavPart.canUseNavigationFilter();\r\n\r\n let showNavigationFiltersSteps = false;\r\n if (useKVWizard && activeNavPart && activeNavPart.canUseNavigationFilterSteps\r\n && activeNavPart.canUseNavigationFilterSteps()) {\r\n showNavigationFiltersSteps = !this.props.countertopNavigationFilterCompleted;\r\n }\r\n\r\n const isCountertop = activeSubPart && COUNTERTOP_GROUP_BATHROOM.includes(activeSubPart.partId);\r\n // console.log(\"isCountertop\", isCountertop);\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n Side
\r\n\r\n {SLAT_WALL_POSITIONS.slice(0, 2).map((position) => getSlatWallButton(position))}\r\n
\r\n \r\n
\r\n \r\n {SLAT_WALL_POSITIONS.slice(2, 4).map((position) => getSlatWallButton(position))}\r\n
\r\n \r\n
\r\n {this.state.contextMenuOpen && !this.state.contextMenuOpen.module\r\n ? \r\n {/*
\r\n \r\n
\r\n \r\n {/*
\r\n \r\n
\r\n )\r\n};\r\n\r\nContextMenuQKBButtons.propTypes = {\r\n handleContextMenuClick: PropTypes.func,\r\n setButtons: PropTypes.func,\r\n}\r\n\r\nconst mapStateToProps = (store) => {\r\n const {contextMenu} = store.lookState;\r\n const {isMobile} = store.serverState;\r\n const {wizardList} = store.wizardState;\r\n const fabricatorData = store.fabricatorState;\r\n const {activeQuoteIndex} = store.quotesState;\r\n\r\n return {\r\n contextMenu,\r\n isMobile,\r\n wizardList,\r\n fabricatorData,\r\n activeQuoteIndex,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n setLookContextMenu,\r\n};\r\n\r\nexport default injectIntl(\r\n withRouter(\r\n connect(mapStateToProps, mapDispatchToProps)(ContextMenuQKBButtons)\r\n )\r\n)\r\n","import React, {Fragment} from 'react';\r\nimport {connect} from \"react-redux\";\r\nimport classNames from 'classnames';\r\nimport $ from 'jquery';\r\n\r\nimport {\r\n toggleDesktopNavigation,\r\n setActiveNavigationNames,\r\n setModuleContextMenuType,\r\n setActiveNavigationFilter,\r\n setActiveNavigationFilterStepIndex,\r\n setNavigationViewType,\r\n setNavigationLoading,\r\n toggleNavItemPositionModal\r\n} from \"../../../actions/navigationFunctions\";\r\nimport {\r\n setDefaultSelectionGroup,\r\n changeActivePartRelatedItemIndex,\r\n updateCanvasCount\r\n} from \"../../../actions/actionFunctions\";\r\nimport DesktopNavigationCommon from \"../../visComponents/navigation/desktopNavigationCommon\";\r\nimport {getCurrentLayout} from \"../../appLayout\";\r\n\r\nimport LockedView from \"../../common/lockedView\";\r\nimport {ContentType} from \"../../visComponents/constants\";\r\nimport ContextMenuQKB from \"./contextMenuQKB\";\r\nimport MobileMenuSelect from \"../../visComponents/navigation/mobile/mobileMenuSelect\";\r\nimport {setVisualizerTutorialStep, showVisualizerTutorial} from \"../../../actions/tutorialFunctions\";\r\nimport {Vanity} from \"../core/parts/vanity\";\r\nimport NavItemPositionModal from \"../../visComponents/navigation/navItemPositionModal\";\r\nimport {checkForContextMenuCommon} from \"../lookNavigation/lookFunctions\";\r\nimport {setLookContextMenu} from \"../../../actions/lookFunctions\";\r\nimport goToMaterialPage from \"../../common/goToMaterialPage\";\r\n\r\nclass DesktopNavigation extends DesktopNavigationCommon {\r\n\r\n bindCanvasClick = (event) => {\r\n // const canvas = document.getElementById(this.props.canvasId);\r\n this.props.setHoveredLayer(event);\r\n\r\n if (document.hoveredLayer) {\r\n\r\n if (this.checkForContextMenu(document.hoveredLayer, event)) {\r\n return false\r\n }\r\n\r\n const hoveredPartId = document.hoveredLayer.partId;\r\n\r\n if (hoveredPartId) {\r\n if (this.state.contentType === 0) {\r\n this.setState({\r\n showNavigation: true,\r\n contentType: ContentType.Design,\r\n hoveredLayer: {}\r\n }, () => {\r\n this.setNewActiveFeature();\r\n this.menuOpened();\r\n setTimeout(() => {\r\n $(document).on('click', this.handleWrapperBlur);\r\n }, 0)\r\n });\r\n }\r\n\r\n const layout = getCurrentLayout();\r\n const featureGroup = layout.getFeatureGroupByPartId(hoveredPartId);\r\n if (featureGroup) {\r\n this.triggerOpenNavigationMenu(featureGroup.partName, featureGroup.getParent().partName)\r\n }\r\n }\r\n }\r\n\r\n };\r\n\r\n checkForContextMenu = (hoveredLayer, event) => {\r\n if (this.props.contextMenu.opened) {\r\n this.props.setLookContextMenu({\r\n opened: false\r\n })\r\n return true\r\n }\r\n if (!hoveredLayer) {\r\n return false\r\n }\r\n\r\n const {showButtons} = checkForContextMenuCommon(hoveredLayer.partId, hoveredLayer.layerPosition);\r\n if ((showButtons.length > 1) && !(hoveredLayer.partId && hoveredLayer.partId === \"vanity_legs\")) {\r\n this.props.setLookContextMenu({\r\n opened: true,\r\n partId: hoveredLayer.partId,\r\n layerPosition: hoveredLayer.layerPosition, // if needed\r\n position: {\r\n x: event.clientX,\r\n y: event.clientY,\r\n }\r\n });\r\n return true\r\n } else if (showButtons.length === 1 && showButtons[0].isWizard) {\r\n goToMaterialPage(\"visualizer\", false, null, \"\",\r\n {wizardItemId: showButtons.wizardId, quoteIndex: this.props.activeQuoteIndex});\r\n return true\r\n }\r\n return false\r\n }\r\n\r\n handleContextMenuClick = (featureToClick, partId) => {\r\n const layout = getCurrentLayout();\r\n let clickedParent = \"\", clickedButton = \"\";\r\n const featureGroup = layout.getFeatureGroupByPartId(partId);\r\n if (featureGroup) {\r\n clickedButton = featureGroup.partName;\r\n clickedParent = featureGroup.getParent().partName;\r\n }\r\n // console.log('clickedButton', clickedButton);\r\n // console.log('clickedParent', clickedParent);\r\n if (!clickedButton) {\r\n return\r\n }\r\n // console.log('menuItem', menuItem);\r\n // if (clickedParent === \"Walls\" && (clickedButton === \"Left Shower Wall\" || clickedButton === \"Pony Wall\")) {\r\n // this.ponyWallAndLeftWallClick(menuItem);\r\n // }\r\n\r\n this.setState({\r\n showNavigation: true,\r\n contentType: ContentType.Design,\r\n contextMenuOpen: false,\r\n hoveredLayer: {}\r\n }, () => {\r\n this.menuOpened();\r\n this.triggerOpenNavigationMenu(clickedButton, clickedParent);\r\n $(document).on('click', this.handleWrapperBlur);\r\n this.setNewActiveFeature();\r\n if (featureToClick && !isBacksplash) {\r\n featureToClick.handleClick();\r\n }\r\n });\r\n };\r\n\r\n handleNavigationItemClick = (item, ignoreLocked = false, featureIsLocked, event) => {\r\n\r\n if (this.state.childNavigationItem\r\n && this.state.childNavigationItem.part.activeFeature\r\n && Array.isArray(this.state.childNavigationItem.part.activeFeature.metaData[\"SkuName\"])\r\n && this.state.childNavigationItem.part.activeFeature.metaData[\"SkuName\"][0]\r\n && Array.isArray(item.part.metaData[\"SkuName\"])\r\n && (this.state.childNavigationItem.part.activeFeature.metaData[\"SkuName\"][0] === item.part.metaData[\"SkuName\"][0])) {\r\n this.showPositionsPopup(item, event); // move modal to new position\r\n return false // don't change L to R // redundant click\r\n }\r\n\r\n const layout = getCurrentLayout();\r\n this.navigationItemClickCommon(item); // set active feature\r\n\r\n const showPositionPopup = this.showPositionsPopup(item, event);\r\n if (showPositionPopup) {\r\n return // don't click on feature!! we are clicking inside the modal window\r\n }\r\n\r\n const updateSideBarIds = [\"shower_body\", \"wall_configuration\", \"vanity_cabinet\", \"shower_pan_combo\"];\r\n if (updateSideBarIds.includes(item.part.partId)) {\r\n this.updateSideBar();\r\n } else if (this.state.parentNavigationItem && this.state.parentNavigationItem.text === \"Shower Tub Combo\"\r\n && item.part.bottomTubId && (this.state.parentNavigationItem.part.bottomTub !== item.part.bottomTubId)) {\r\n this.updateSideBar();\r\n }\r\n\r\n // console.log('this.state.parentNavigationItem', this.state.parentNavigationItem);\r\n // console.log('this.state.parentNavigationItem.part.subParts()', this.state.parentNavigationItem && this.state.parentNavigationItem.part && this.state.parentNavigationItem.part.subParts());\r\n\r\n if (item.matchesMetaFailed) {\r\n let nonCompatibleWith = \"\";\r\n switch (item.part.partId) {\r\n case \"vanity_faucet\":\r\n nonCompatibleWith = \"sink\";\r\n break;\r\n case \"sink\":\r\n nonCompatibleWith = \"vanity\";\r\n break;\r\n case \"shower_pod\":\r\n nonCompatibleWith = \"Window Kit\";\r\n break;\r\n case \"window_kits\":\r\n nonCompatibleWith = item.matchesMetaFailed === \"shower_pod\" ? \"Shower Pod\" : \"Corner Shelf\";\r\n break;\r\n default:\r\n break;\r\n }\r\n this.callMetaMathesFailedPopup(item, nonCompatibleWith);\r\n // } else if (item.part.partId === \"vanity_sink\" && this.state.parentNavigationItem.part.faucet\r\n // && this.state.parentNavigationItem.part.faucet.placeholderChanged\r\n // && this.state.parentNavigationItem.part.faucet.activeFeature) {\r\n //\r\n // const sinkSizeConditionValue = item.part.metaData[\"SinkSize\"][0];\r\n //\r\n // if (this.state.parentNavigationItem.part.faucet.activeFeature.matchesMetaForCondition('SinkSize', sinkSizeConditionValue)) {\r\n // this.itemClick(item, ignoreLocked)\r\n // } else {\r\n // this.callMetaMathesFailedPopup(item, 'faucet');\r\n // }\r\n } else if (item.part.partId === \"toilet\") {\r\n const vanity = layout.parts[Vanity.id];\r\n const counterTopSize = vanity.counterTopSize(item.part);\r\n if (counterTopSize === \"60in\" || counterTopSize === \"72in\") {\r\n this.callToiletFailPopup('toilet', item, ignoreLocked)\r\n } else {\r\n this.itemClick(item, ignoreLocked)\r\n }\r\n } else if (item.part.partId === \"vanity_cabinet\") {\r\n // let toilet = layout.parts[Toilet.id];\r\n // if (toilet) {\r\n // toilet = toilet.toilet; // toiletBody\r\n // }\r\n // const counterTopSize = item.part.vanitySize + 'in';\r\n // const vanity = layout.parts[Vanity.id];\r\n // const currentCounterTopSize = vanity.counterTopSize(item.part);\r\n // if (toilet && toilet.placeholderChanged && (counterTopSize === \"60in\" || counterTopSize === \"72in\")\r\n // && (currentCounterTopSize !== \"60in\" && currentCounterTopSize !== \"72in\")) {\r\n // this.callToiletFailPopup('vanity', item, ignoreLocked)\r\n // } else {\r\n // this.itemClick(item, ignoreLocked);\r\n // }\r\n this.itemClick(item, ignoreLocked);\r\n if (this.props.fabricatorSettings\r\n && (this.props.fabricatorSettings.wizardConsumers || (this.props.fabricatorSettings.wizardClients && document.kvConfig.isBackend))\r\n ) {\r\n if (!featureIsLocked && !item.part.partName.includes(\"laceholder\")) {\r\n this.setWizardFiltersFromActiveItem(item.part)\r\n }\r\n }\r\n } else if (item.part.partId === \"shower_interior_wall\") {\r\n if (!featureIsLocked && !item.part.partName.includes(\"laceholder\")) {\r\n this.setWizardFiltersFromActiveItem(item.part)\r\n }\r\n this.itemClick(item, ignoreLocked)\r\n } else {\r\n this.itemClick(item, ignoreLocked)\r\n }\r\n\r\n if (this.state.parentNavigationItem) { // update canvas only if it is child\r\n this.props.updateCanvasCount();\r\n }\r\n\r\n };\r\n\r\n render() {\r\n const layout = getCurrentLayout();\r\n // const fabricatorSettings = this.props.fabricatorSettings;\r\n const activePart = this.state.parentNavigationItem ? this.state.parentNavigationItem.part : null;\r\n const activeSubPart = this.state.childNavigationItem ? this.state.childNavigationItem.part : null;\r\n // const activeNavPart = activeSubPart || activePart;\r\n const parentItems = layout.designNavigationItems(); // parent list without filters\r\n\r\n const useWizard = false, wizardGroups = [];\r\n\r\n let showNavigationFiltersSteps = false;\r\n\r\n if (activeSubPart && activeSubPart.canUseNavigationFilterSteps\r\n && activeSubPart.canUseNavigationFilterSteps()) {\r\n showNavigationFiltersSteps = !this.props.countertopNavigationFilterCompleted;\r\n }\r\n\r\n const showLockedView = this.currentActiveItemIsLocked(useWizard);\r\n\r\n const useFilters = false;\r\n const availableNavButtons = [ContentType.Design, ContentType.Layout, ContentType.DisplayRoom, ContentType.RoomScene];\r\n\r\n return (\r\n \r\n {buttons.map(button => {\r\n const isVanityParent = isVanity && CONTEXT_MENU_VANITY_ONLY.includes(button.partId);\r\n return (\r\n \r\n )\r\n })}\r\n
\r\n \r\n \r\n
\r\n {this.props.bvOpened ? this.navWrapper = node}>\r\n
\r\n \r\n
\r\n {this.navigationMenuButtons(availableNavButtons)}\r\n {showNavigationFiltersSteps ? null : (\r\n \r\n {this.content(useWizard, wizardGroups, useFilters, activePart, activeSubPart)}\r\n
\r\n \r\n \r\n
\r\n )}\r\n {/**/}\r\n {/*
*/}\r\n */}\r\n {/**/}\r\n {/*
*/}\r\n {/*\r\n \r\n
\r\n {showLockedView\r\n ? this.navWrapper = node}>\r\n
\r\n {this.state.contextMenuOpen && !this.state.contextMenuOpen.module\r\n ? \r\n
\r\n {this.navigationMenuButtons(availableNavButtons)}\r\n {showNavigationFiltersSteps ? null : (\r\n \r\n {this.content(useWizard, wizardGroups, useFilters, activePart, activeSubPart)}\r\n
\r\n \r\n \r\n
\r\n )}\r\n {/**/}\r\n {/*
*/}\r\n */}\r\n {/**/}\r\n {/*
*/}\r\n {/*\r\n
\r\n {this.state.contextMenuOpen && !this.state.contextMenuOpen.module\r\n ? \r\n {/*
\r\n \r\n {userInfoErrors[property].map((error) => {\r\n return (\r\n \r\n \r\n \r\n )\r\n })}\r\n
\r\n )\r\n};\r\n\r\nUserFieldErrors.propTypes = {\r\n property: PropTypes.string.isRequired,\r\n};\r\n\r\nconst mapStateToProps = (store) => {\r\n const {userInfo, userInfoErrors} = store.userState;\r\n return {\r\n userInfo,\r\n userInfoErrors,\r\n // fabricatorData: store.fabricatorState,\r\n };\r\n};\r\n\r\nexport default injectIntl(\r\n connect(mapStateToProps)(UserFieldErrors)\r\n)\r\n","import React, {useEffect, useState} from \"react\";\r\nimport {connect} from \"react-redux\";\r\nimport Axios from \"axios\";\r\nimport $ from \"jquery\";\r\n\r\nimport LoadingSpinner from \"../../ui/loadingSpinner\";\r\nimport {baseNewImagesPath} from \"../../assets\";\r\nimport {IS_LIXIL_UI} from \"../../../config\";\r\n\r\nconst getPrivacyPolicyUrl = (fabricatorData) => {\r\n if (fabricatorData.isRebath) {\r\n return \"rebathTerms.html\"\r\n } else if (fabricatorData.isLowes) {\r\n return \"lowesTerms.html\"\r\n } else if (fabricatorData.isNhance) {\r\n return \"nhanceTerms.html\"\r\n }\r\n return \"qcTerms.html\"\r\n}\r\n\r\nconst PrivacyPolicyTerms = (props) => {\r\n\r\n const {fabricatorData} = props;\r\n const [terms, setTerms] = useState(null);\r\n\r\n const privacyPolicyUrl = getPrivacyPolicyUrl(fabricatorData);\r\n\r\n useEffect(() => {\r\n const getTerms = async () => {\r\n const termsResponse = await Axios.get(baseNewImagesPath + \"privacyPolicy/\" + privacyPolicyUrl);\r\n if (termsResponse && termsResponse.data) {\r\n setTerms(termsResponse.data)\r\n }\r\n }\r\n getTerms();\r\n\r\n window.anchorScroll = (anchor) => {\r\n const $scrollableDiv = $(IS_LIXIL_UI ? \".grohe-lead__content\" : \".user-popup-terms\");\r\n const scrollToDiv = document.querySelector(`[data-anchor=${anchor}]`);\r\n // const scrollTop = $scrollToDiv ? $scrollToDiv.position().top - 50 : 0;\r\n const scrollTop = scrollToDiv ? scrollToDiv.offsetTop - 60 : 0;\r\n if (scrollTop) {\r\n $scrollableDiv.animate({scrollTop}, 1000);\r\n }\r\n }\r\n\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, []);\r\n\r\n return terms ? : \r\n \r\n
\r\n )\r\n};\r\n\r\nSubPartDoneCheckMark.propTypes = {\r\n relatedItem: PropTypes.object.isRequired,\r\n}\r\n\r\nconst mapStateToProps = (store, ownProps) => {\r\n return {\r\n activeQuoteIndex: store.quotesState.activeQuoteIndex,\r\n activeFeature: ownProps.relatedItem.activeFeature,\r\n activeNotInVisualizerFeature: ownProps.relatedItem.activeNotInVisualizerFeature,\r\n firstClick: ownProps.relatedItem.firstClick,\r\n placeholderChanged: ownProps.relatedItem.placeholderChanged,\r\n partId: ownProps.relatedItem.partId,\r\n cartItems: store.cartState.cartItems,\r\n fabricatorData: store.fabricatorState\r\n };\r\n};\r\nconst mapDispatchToProps = {};\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(SubPartDoneCheckMark)\r\n","import React, { Fragment } from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport { FormattedMessage, injectIntl } from \"react-intl\";\r\n\r\nimport Button from \"@mui/material/Button\";\r\nimport SvgIcon from \"@mui/material/SvgIcon\";\r\nimport { Look3DIcon, LookAugmentRealityIcon } from \"../../common/icons\";\r\nimport { LOOK_FEATURE_CONTENT } from \"../../look/core/constants\";\r\nimport COLOR_THEMES from \"../../../colorThemes\";\r\nimport config from \"../../sqft/components/canvas/store/sqftConfig\";\r\nimport {\r\n changeSqftFeaturesPopup,\r\n setAPIErrorMessage,\r\n setSqftCabinetsGlb,\r\n setSQFTViewMode\r\n} from \"../../../actions/sqftFunctions\";\r\nimport { setAbortController, setSQFTAr3dPopup } from \"../../../actions/sqftMenuFunctions\";\r\nimport { SQFT_VIEW_MODE } from \"../../sqft/constants\";\r\nimport { setCabinetGLBFromCabinetsSet } from \"../../sqft/helpers/sqft3dArHelper\";\r\nimport {setMultiLoader} from \"../../../actions/actionFunctions\";\r\n\r\nexport const SqftFeaturesPopup3dButtons = (props) => {\r\n const { changeSqftFeaturesPopup, isMobile, setSQFTViewMode, setMultiLoader, SQFTViewMode } = props;\r\n\r\n const threeDButtonClick = async () => {\r\n changeSqftFeaturesPopup({\r\n opened: false,\r\n sqftPassedData: null\r\n });\r\n if (SQFTViewMode === SQFT_VIEW_MODE.threeDMode) {\r\n setMultiLoader({activeStep: 0, visible: true, finished: false});\r\n }\r\n setSQFTViewMode(SQFT_VIEW_MODE.threeDMode);\r\n await setCabinetGLBFromCabinetsSet().then(r => void r);\r\n // setSQFTAr3dPopup({isOpened: true, contentType: SQFT_AR3D_POPUP_CONTENT_TYPE.threeD})\r\n // await setCabinetGLBFromCabinetsSet().then(r => void r);\r\n }\r\n\r\n const arButtonClick = async () => {\r\n changeSqftFeaturesPopup({\r\n opened: false,\r\n sqftPassedData: null\r\n });\r\n if (SQFTViewMode === SQFT_VIEW_MODE.augmentedReality) {\r\n setMultiLoader({activeStep: 0, visible: true, finished: false});\r\n }\r\n setSQFTViewMode(SQFT_VIEW_MODE.augmentedReality);\r\n await setCabinetGLBFromCabinetsSet().then(r => void r);\r\n // setSQFTAr3dPopup({isOpened: true, contentType: SQFT_AR3D_POPUP_CONTENT_TYPE.ar})\r\n // await setCabinetGLBFromCabinetsSet().then(r => void r);\r\n }\r\n\r\n const threeDButtonID = isMobile ? 'sqft.popup.button.3dButtonMobile' : 'sqft.popup.button.3dButton';\r\n const augButtonID = isMobile ? 'sqft.popup.button.augButtonMobile' : 'sqft.popup.button.augButton';\r\n\r\n return (\r\n \r\n
\r\n\r\n )\r\n\r\n};\r\n\r\nconst mapStateToProps = (store) => {\r\n return {\r\n menuOpened: store.sqftMenuState.menuOpened,\r\n activeButton: store.sqftMenuState.activeButton,\r\n activeRoomType: store.sqftMenuState.activeRoomType,\r\n roomLayouts: store.sqftMenuState.roomLayouts,\r\n qtActiveCategory: store.qtState.qtActiveCategory,\r\n quotes: store.quotesState.quotes,\r\n activeRoomIndex: store.sqftMenuState.activeRoomIndex,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n toggleChangeLayoutPopup,\r\n setSQFTRoomLayouts,\r\n};\r\n\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(SqftNavLayouts);\r\n","import { useState, useEffect, useMemo } from 'react';\r\nimport { checkIfLookFeaturesReceived } from \"../../../api/look-api\";\r\nimport { getCurrentLayout } from \"../../appLayout\";\r\n\r\nconst useFetchFeatures = (partIds, searchText = \"\", shouldGetModelsOnlyWithThirdPartyAR3DUrls = false) => {\r\n const [featuresData, setFeaturesData] = useState({});\r\n const [isLoading, setIsLoading] = useState(true);\r\n\r\n const layout = useMemo(() => getCurrentLayout(), []);\r\n\r\n useEffect(() => {\r\n const fetchAllRows = async () => {\r\n setIsLoading(true);\r\n const newFeaturesData = {};\r\n\r\n for (const partId of partIds) {\r\n const featureGroup = layout.getFeatureGroupByPartId(partId);\r\n let navItems = [];\r\n\r\n if (featureGroup) {\r\n // If features are not received and no request is in progress, wait for the promise\r\n if (!featureGroup.allFeaturesReceived && !featureGroup.requestInProgress) {\r\n await checkIfLookFeaturesReceived(featureGroup);\r\n }\r\n\r\n navItems = layout.designNavigationItems(\r\n { part: featureGroup },\r\n [],\r\n searchText,\r\n null,\r\n \"all\",\r\n [],\r\n { firstFeature: null, firstConditions: null },\r\n )\r\n\r\n if (shouldGetModelsOnlyWithThirdPartyAR3DUrls) {\r\n navItems = navItems.filter(feature => {\r\n return feature.part\r\n && feature.part.dbFeature\r\n && Array.isArray(feature.part.dbFeature.thirdPartyAR3DUrls)\r\n && feature.part.dbFeature.thirdPartyAR3DUrls.length > 0\r\n })\r\n }\r\n }\r\n\r\n newFeaturesData[partId] = {\r\n rows: navItems,\r\n featureGroup: featureGroup,\r\n };\r\n }\r\n\r\n setFeaturesData(newFeaturesData);\r\n setIsLoading(false);\r\n };\r\n\r\n fetchAllRows();\r\n }, [partIds, searchText, layout, shouldGetModelsOnlyWithThirdPartyAR3DUrls]);\r\n\r\n return { featuresData, isLoading };\r\n};\r\n\r\nexport default useFetchFeatures;\r\n","import React from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport {injectIntl} from \"react-intl\";\r\n\r\nimport IconButton from \"@mui/material/IconButton\";\r\nimport ListIcon from \"@mui/icons-material/List\";\r\nimport ViewStreamIcon from '@mui/icons-material/ViewStream';\r\nimport ViewModuleIcon from '@mui/icons-material/ViewModule';\r\n\r\nimport {setLookViewType} from \"../../../../actions/lookFunctions\";\r\nimport Analytics, {LOOK_JOURNEY_ANALYTIC_EVENTS} from \"../../../../analytics\";\r\n\r\nconst LookViewTypeSwitcher = (props) => {\r\n\r\n const {intl, lookExpanded, lookViewType, setLookViewType, isMobile} = props;\r\n\r\n const listButtonClick = () => {\r\n const newViewType = lookViewType === 4 ? 1 : lookViewType + 1;\r\n Analytics.sendClickEvent(LOOK_JOURNEY_ANALYTIC_EVENTS.lookMenuHeaderViewType + newViewType);\r\n setLookViewType(newViewType);\r\n };\r\n\r\n const getViewIcon = () => {\r\n switch (lookViewType) {\r\n case 1:\r\n default:\r\n return \r\n {\r\n SIDEBAR_LAYOUTS_BUTTONS.map((item, index) => (\r\n
\r\n \r\n {\r\n {\r\n const index = rowIndex * columnCount + columnIndex;\r\n if (index >= relatedItemsList.length) return null;\r\n return (\r\n
\r\n )\r\n};\r\n\r\nSqftOptionsRelatedItemList.propTypes = {\r\n activeFeature: PropTypes.shape(featureInterface),\r\n partId: PropTypes.string,\r\n shouldSortByWidth: PropTypes.bool,\r\n itemClickCallback: PropTypes.func,\r\n //searchInputValue: PropTypes.string\r\n};\r\n\r\nconst mapStateToProps = (store) => {\r\n const { menuOpened, reCacheMenuCounter } = store.sqftMenuState;\r\n const { visualizersLoaded } = store.serverState;\r\n const { windowHeight, isMobile } = store.serverState;\r\n const { activeQuoteIndex } = store.quotesState;\r\n const { sqftFromFeature } = store.sqftState;\r\n const { lookViewType } = store.lookState;\r\n const {groheFiltersSearchText} = store.groheState;\r\n const {selectedFilters} = store.filterState;\r\n\r\n return {\r\n menuOpened,\r\n windowHeight,\r\n isMobile,\r\n activeQuoteIndex,\r\n visualizersLoadedLength: visualizersLoaded.length,\r\n fabricatorData: store.fabricatorState,\r\n sqftFromFeature,\r\n reCacheMenuCounter,\r\n groheFiltersSearchText,\r\n selectedFilters,\r\n lookViewType,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n};\r\nexport default injectIntl(\r\n connect(mapStateToProps, mapDispatchToProps)(SqftOptionsRelatedItemList)\r\n)\r\n","import React from \"react\";\r\nimport {connect} from \"react-redux\";\r\nimport PropTypes from \"prop-types\";\r\n\r\nconst LookVirtualizedListLoadingItem = (props) => {\r\n\r\n const {style, currentType, lookExpanded} = props;\r\n\r\n return (\r\n \r\n
\r\n
\r\n \r\n \r\n {currentType === 1 ? (\r\n \r\n \r\n \r\n \r\n \r\n )\r\n};\r\n\r\nLookWizardSectionListFeature.propTypes = {\r\n lookFeature: PropTypes.shape(featureInterface),\r\n featureGroup: PropTypes.object,\r\n viewType: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\r\n wizardGroup: PropTypes.shape(wizardGroupInterface),\r\n style: PropTypes.object,\r\n imageCanvas: PropTypes.object.isRequired,\r\n maxClickCountReached: PropTypes.func,\r\n updateLookCartItem: PropTypes.func,\r\n navItems: PropTypes.array,\r\n isAllWallsTutorialItem: PropTypes.bool,\r\n}\r\n\r\nconst mapStateToProps = (store) => {\r\n const {lookViewType, lookAllWallsTutorial, lookLockedTutorial} = store.lookState;\r\n const {isMobile} = store.serverState;\r\n const {activePreset, bvPresets, canvasScale} = store.bathroomVisualizerState;\r\n const {qtActiveCategory} = store.qtState;\r\n const {wizardSelectedValues, wizardActiveStep} = store.wizardState;\r\n const {cabinetsApplyTo} = store.navigationState;\r\n const {isLixil, isEncore} = store.fabricatorState;\r\n const {groheActiveFeatureQuantity} = store.groheState;\r\n const {isPhoneNumberValidated} = store.userState;\r\n\r\n return {\r\n lookViewType,\r\n isMobile,\r\n activePreset,\r\n bvPresets,\r\n qtActiveCategory,\r\n canvasScale,\r\n wizardSelectedValues,\r\n wizardActiveStep,\r\n cabinetsApplyTo,\r\n isLixil,\r\n groheActiveFeatureQuantity,\r\n lookAllWallsTutorial,\r\n isPhoneNumberValidated,\r\n lookLockedTutorial,\r\n isEncore,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n updateCanvasCount,\r\n addToCart,\r\n setCanvasScale,\r\n setWizardSelectedValues,\r\n setLookActiveFeature,\r\n setLookCompatabilityAlert,\r\n setLookAllWallsTutorial,\r\n};\r\n\r\nexport default withRouter(\r\n connect(mapStateToProps, mapDispatchToProps)(LookWizardSectionListFeature)\r\n)\r\n","import React from 'react';\r\nimport { connect } from \"react-redux\";\r\nimport PropTypes from \"prop-types\";\r\nimport {FormattedMessage} from \"react-intl\";\r\nimport {withRouter} from \"react-router-dom\";\r\nimport {\r\n toggleSelectionWindow, toggleSelectionFeatureInfo, setCameFromPage,\r\n} from \"../../actions/actionFunctions\";\r\n\r\nimport Analytics from \"../../analytics\";\r\nimport {ROUTES} from \"../../routes\";\r\n\r\n\r\nconst ShoppingCartButton = (props) => {\r\n\r\n const {className, cartItems, setCameFromPage, selectionFeatureInfo, toggleSelectionFeatureInfo, toggleSelectionWindow,\r\n selectionOpened, selectionGroup, history, location} = props;\r\n\r\n const shCartButtonClick = () => {\r\n Analytics.sendClickEvent('go-to-shopping-cart');\r\n\r\n if (selectionOpened) {\r\n toggleSelectionWindow(false, selectionGroup);\r\n setCameFromPage(\"materials\");\r\n if (selectionFeatureInfo) {\r\n toggleSelectionFeatureInfo(null);\r\n }\r\n } else if (location && (location.pathname === ROUTES.home || location.pathname === ROUTES.quoteDesign)) {\r\n setCameFromPage(ROUTES.quoteDesign);\r\n }\r\n\r\n if (!window.location.href.includes('shoppingcart')) {\r\n history.push(ROUTES.shoppingcart);\r\n }\r\n\r\n };\r\n\r\n return (\r\n \r\n )\r\n\r\n}\r\n\r\nShoppingCartButton.propTypes = {\r\n text: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),\r\n className: PropTypes.string\r\n};\r\n\r\nconst mapStateToProps = (store) => {\r\n const {cartItems} = store.cartState;\r\n const {selectionFeatureInfo, selectionOpened, selectionGroup} = store.selectionState;\r\n\r\n return {\r\n cartItems,\r\n selectionFeatureInfo,\r\n selectionOpened,\r\n selectionGroup,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n setCameFromPage,\r\n toggleSelectionFeatureInfo,\r\n toggleSelectionWindow,\r\n}\r\n\r\nexport default withRouter(\r\n connect(mapStateToProps, mapDispatchToProps)(ShoppingCartButton)\r\n);\r\n","import React, {useEffect, useState} from 'react';\r\nimport { connect } from \"react-redux\";\r\nimport {FormattedMessage, injectIntl} from \"react-intl\";\r\nimport {setLanguage} from \"../../actions/serverFunctions\";\r\nimport Config, {AVAILABLE_LANGUAGES, POST_MESSAGES} from \"../../config\";\r\nimport {isIframe} from \"../../misc/helpers\";\r\n\r\nconst LanguageSwitcher = (props) => {\r\n\r\n const {language, setLanguage, intl, fabricatorSettings} = props;\r\n const [dropdownVisible, setDropdownVisible] = useState(false);\r\n\r\n useEffect(() => {\r\n return () => {\r\n window.removeEventListener('click', handleWrapperBlur)\r\n }\r\n }, []);\r\n\r\n if (!fabricatorSettings.showLanguageSelect || (!Config.isDevMode() && !document.kvConfig.isBackend)) {\r\n return null\r\n }\r\n\r\n const activeLanguage = language;\r\n\r\n const handleWrapperBlur = (e) => {\r\n const disallowClasses = [\".language\", \".language-list\"];\r\n if (!disallowClasses.some(cls => e.target.closest(cls))) {\r\n setDropdownVisible(false)\r\n }\r\n };\r\n\r\n const handleButtonClick = () => {\r\n const newVisible = !dropdownVisible;\r\n setDropdownVisible(newVisible);\r\n setTimeout(() => {\r\n newVisible\r\n ? window.addEventListener('click', handleWrapperBlur)\r\n : window.removeEventListener('click', handleWrapperBlur)\r\n }, 0)\r\n };\r\n\r\n const handleLocaleClick = (locale) => {\r\n setLanguage(locale);\r\n if (isIframe() && window.parent) {\r\n window.parent.postMessage({\r\n action: POST_MESSAGES.setIframeLanguage,\r\n payload: { language: locale }\r\n }, \"*\");\r\n }\r\n handleButtonClick();\r\n };\r\n\r\n const getLanguageName = (locale) => {\r\n switch (locale) {\r\n case \"en-US\":\r\n return intl.formatMessage({id: \"languageDropdown.english\"})\r\n case \"en-AU\":\r\n return intl.formatMessage({id: \"languageDropdown.australian\"})\r\n case \"fr-FR\":\r\n return intl.formatMessage({id: \"languageDropdown.french\"})\r\n case \"pl-PL\":\r\n return intl.formatMessage({id: \"languageDropdown.polish\"})\r\n case \"es-ES\":\r\n return intl.formatMessage({id: \"languageDropdown.spanish\"})\r\n default:\r\n return locale\r\n }\r\n };\r\n\r\n const styles = {\r\n height: dropdownVisible ? AVAILABLE_LANGUAGES.length * 50 : 0\r\n }\r\n\r\n return (\r\n \r\n \r\n ) : (\r\n \r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = () => {\r\n return {\r\n };\r\n};\r\n\r\nexport default connect(mapStateToProps, {\r\n unlockPricing\r\n})(FeatureInfoPriceLocked);\r\n","import React, {Fragment} from \"react\";\r\nimport {connect} from \"react-redux\";\r\nimport {injectIntl} from \"react-intl\";\r\nimport PropTypes from \"prop-types\";\r\n\r\nimport FeatureDescription from \"../../visComponents/featureDescription\";\r\n\r\nconst FeatureInfoDescription = (props) => {\r\n\r\n const {fabricatorData, intl, selectionFeatureInfo, feature, brief} = props;\r\n const activeFeature = feature || selectionFeatureInfo;\r\n\r\n let pros = [];\r\n let subDescription = activeFeature.dbFeature.subDescription;\r\n if ((fabricatorData.isLowes || fabricatorData.isCaesarStone) && intl.messages) {\r\n if (intl.locale === \"fr-FR\" && intl.messages[\"transDoc.subDescription_FR.\" + activeFeature.dbFeature.sharedFeatureName]) {\r\n subDescription = intl.formatMessage({id: \"transDoc.subDescription_FR.\" + activeFeature.dbFeature.sharedFeatureName})\r\n } else if (intl.locale === \"pl-PL\" && intl.messages[\"transDoc.customSubDescription_PL.\" + activeFeature.dbFeature.sharedFeatureName]) {\r\n subDescription = intl.formatMessage({id: \"transDoc.customSubDescription_PL.\" + activeFeature.dbFeature.sharedFeatureName})\r\n }\r\n }\r\n if (!brief && subDescription && subDescription.length > 0) {\r\n pros = subDescription.split('\\n').filter(n => n);\r\n }\r\n\r\n return (\r\n \r\n \r\n {pros.length ? (\r\n \r\n );\r\n};\r\n\r\nFeatureInfoDescription.propTypes = {\r\n feature: PropTypes.object,\r\n brief: PropTypes.bool,\r\n}\r\n\r\nconst mapStateToProps = (store) => {\r\n return {\r\n fabricatorData: store.fabricatorState,\r\n selectionFeatureInfo: store.selectionState.selectionFeatureInfo,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {};\r\n\r\nexport default injectIntl(\r\n connect(mapStateToProps, mapDispatchToProps)(FeatureInfoDescription)\r\n)\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport {connect} from \"react-redux\";\r\n\r\nimport WithClickCount from \"../../look/hocs/withClickCount\";\r\nimport {wizardGroupInterface} from \"../../../interfaces/wizardItemInterface\";\r\nimport {setWizardSelectedValues} from \"../../../actions/wizardFunctions\";\r\nimport {getFeatureGroupFromWizardGroup} from \"../../look/lookNavigation/lookMain/lookWizard/lookWizardFunctions\";\r\nimport MaterialsWizardSqftButton from \"../../qkbPages/materialsWizard/materialsWizardSqftButton\";\r\nimport {getWizardFeatureAsync} from \"../../look/lookNavigation/lookMain/lookWizard/wizardFunctionsCommon\";\r\n\r\nconst SelectionGridWizardGroupItem = (props) => {\r\n\r\n const {wizardGroup, wizardActiveStep, setWizardSelectedValues, wizardSelectedValues, styles, isRowItem,\r\n handleFeatureClick} = props;\r\n\r\n const featureGroup = getFeatureGroupFromWizardGroup(wizardGroup);\r\n\r\n // const {customImageUrl, uploadedImageUrl} = wizardGroup;\r\n\r\n const isActive = wizardSelectedValues[wizardActiveStep] && wizardSelectedValues[wizardActiveStep].wizardGroup\r\n && wizardSelectedValues[wizardActiveStep].wizardGroup.id === wizardGroup.id;\r\n\r\n const wizardItemClick = async (maxClickCountReached) => {\r\n // Analytics.sendClickEvent(LOOK_JOURNEY_ANALYTIC_EVENTS.lookWizardParent + Analytics.getStringForAnalytics(wizardGroup.groupName));\r\n\r\n if (maxClickCountReached()) { // fabricator settings click lead capture\r\n return false;\r\n }\r\n\r\n // const layout = getCurrentLayout();\r\n // const featureGroup = getFeatureGroupFromWizardGroup(wizardGroup);\r\n // if (featureGroup && featureGroup.activeFeature) {\r\n // if (featureGroup.partId === \"vanity_sink\" && wizardGroup.productCartTitle\r\n // && wizardGroup.productCartTitle.includes(\"edestal\") && featureGroup.getParent().vanity_type) {\r\n // const navItems = layout.designNavigationItems({part: featureGroup});\r\n // const nextPedestal = navItems.find(navItem => Array.isArray(navItem.part.metaData[\"MountType\"]) && navItem.part.metaData[\"MountType\"].includes(\"ST\"));\r\n // if (nextPedestal) {\r\n // navFeatureCLick(nextPedestal.part);\r\n // } else {\r\n // navFeatureCLick(featureGroup.activeFeature);\r\n // }\r\n // }\r\n // navFeatureCLick(featureGroup.activeFeature);\r\n // }\r\n\r\n setWizardSelectedValues({\r\n [wizardActiveStep]: {\r\n wizardGroup,\r\n partId: featureGroup ? featureGroup.partId : \"\"\r\n }\r\n });\r\n console.log(\"wizardGroupwizardGroup\", wizardGroup);\r\n if (wizardGroup.clickOnLogic && wizardGroup.clickOnLogic.enabled && wizardGroup.clickOnLogic.feature\r\n && wizardGroup.clickOnLogic.groupName && handleFeatureClick) {\r\n const featureFound = await getWizardFeatureAsync(wizardGroup.clickOnLogic.feature, wizardGroup.clickOnLogic.groupName);\r\n console.log(\"clickOnLogic featureFound\", featureFound);\r\n if (featureFound) {\r\n handleFeatureClick({part: featureFound}, null, wizardGroup.clickOnLogic);\r\n }\r\n }\r\n }\r\n\r\n return (\r\n \r\n {(maxClickCountReached) => isRowItem ? (\r\n \r\n )\r\n}\r\n\r\nSelectionGridWizardGroupItem.propTypes = {\r\n wizardGroup: PropTypes.shape(wizardGroupInterface),\r\n isRowItem: PropTypes.bool,\r\n handleFeatureClick: PropTypes.func,\r\n}\r\n\r\nconst mapStateToProps = (store) => {\r\n const {wizardActiveItem, wizardActiveStep, wizardSelectedValues} = store.wizardState;\r\n return {\r\n wizardActiveItem,\r\n wizardActiveStep,\r\n wizardSelectedValues,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n setWizardSelectedValues\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(SelectionGridWizardGroupItem);\r\n","import React from \"react\";\r\nimport PropTypes from \"prop-types\";\r\nimport {FormattedMessage} from \"react-intl\";\r\n\r\nimport {s3FeatureImagePath, THUMBNAIL_SIZES} from \"../../misc/utils\";\r\nimport {baseNewImagesPath} from \"../assets\";\r\n\r\nconst NotInVisualizerView = (props) => {\r\n\r\n const getThumbnail = () => {\r\n\r\n if (!props.activeFeature) {\r\n return null\r\n }\r\n\r\n let src = \"\";\r\n let styles = {};\r\n if (props.activeFeature.dbFeature.thumbnailUrl) {\r\n src = s3FeatureImagePath(\r\n props.activeFeature.dbFeature.thumbnailUrl,\r\n props.isMobile ? THUMBNAIL_SIZES.small : THUMBNAIL_SIZES.medium\r\n );\r\n } else if (props.currentFeature && props.activeFeature.customThumbnail) {\r\n src = props.activeFeature.customThumbnail;\r\n } else {\r\n src = `${baseNewImagesPath}images/image-not-found.png`;\r\n }\r\n // if (props.isMobile) {\r\n // const height = (props.listItemHeight - 32) / 2;\r\n // styles.height = height;\r\n // styles.width = height;\r\n // }\r\n // console.log(\"listItemHeight\", );\r\n return (\r\n \r\n \r\n )\r\n};\r\n\r\nLookFeatureNotInStock.propTypes = {\r\n lookFeature: PropTypes.shape(featureInterface),\r\n}\r\n\r\nconst mapStateToProps = (store) => {\r\n const {lookActiveFeatureStockCount} = store.lookState;\r\n return {\r\n lookActiveFeatureStockCount,\r\n };\r\n};\r\n\r\nexport default connect(mapStateToProps)(LookFeatureNotInStock)\r\n","import React, {useMemo} from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport PropTypes from \"prop-types\";\r\nimport {injectIntl} from \"react-intl\";\r\nimport {withRouter} from \"react-router-dom\";\r\nimport orderBy from \"lodash/orderBy\";\r\n\r\nimport MenuList from '@mui/material/MenuList';\r\n\r\nimport {getLookList} from \"../../../lookNavigation/lookFunctions\";\r\nimport {getFeatureGroupName} from \"../../../../../misc/helpers\";\r\nimport {setLookActiveCategory, setLookPageOpened} from \"../../../../../actions/lookFunctions\";\r\n// import GroheCategoriesMenuItemWizard from \"./groheCategoriesMenuItemWizard\";\r\nimport {setGroheWizardName} from \"../../../../../actions/groheQuotingToolFunctions\";\r\nimport GroheCategory from \"./groheCategory\";\r\nimport {IS_PRODUCT_JOURNEY} from \"../../../../../config\";\r\nimport LookMainWizardList from \"../../../lookNavigation/lookMain/lookMainWizardList\";\r\nimport {ROUTES} from \"../../../../../routes\";\r\nimport MaterialSpinner from \"../../../../ui/materialSpinner\";\r\n\r\nconst GroheCategoriesMenu = (props) => {\r\n\r\n const {intl, fabricatorData, isAccessory, showWizardItems, location, visualizersLoadedLength,\r\n qtCategoriesLoadedLength} = props;\r\n\r\n const isShopPage = location.pathname.includes(ROUTES.shop);\r\n\r\n let featureGroups = useMemo(() => {\r\n return getLookList(false, true, false, isShopPage, true)\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [visualizersLoadedLength, qtCategoriesLoadedLength, isShopPage]);\r\n const featureGroupNameSort = (lmFeature) => getFeatureGroupName(lmFeature.featureGroup, intl, fabricatorData)\r\n featureGroups = orderBy(featureGroups,[featureGroupNameSort], ['asc'])\r\n\r\n // console.log(\"featureGroups\", featureGroups);\r\n if (!featureGroups) {\r\n return null\r\n }\r\n\r\n const ACCESSORIES = [\"paper_holder\", \"robe_hook\", \"towel_bar\", \"towel_ring\"];\r\n const acc_groups = featureGroups.filter(parentObject => ACCESSORIES.includes(parentObject.partId));\r\n if (acc_groups.length && IS_PRODUCT_JOURNEY) {\r\n featureGroups = isAccessory ? acc_groups : featureGroups.filter(parentObject => !ACCESSORIES.includes(parentObject.partId));\r\n if (!isAccessory) {\r\n featureGroups.push({partId: \"submenu_accessories\"});\r\n }\r\n }\r\n\r\n return (\r\n \r\n }\r\n const navItem = renderList[(listSettings.columnCount * rowIndex) + columnIndex];\r\n if (!navItem) {\r\n return null\r\n }\r\n if (isWizard) {\r\n return \r\n }\r\n return \r\n }\r\n\r\n const noRowsRenderer = () => \r\n {() => (\r\n \r\n )}\r\n \r\n )\r\n};\r\n\r\nexport default NavigationLoader\r\n","import React, {Fragment} from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport {FormattedMessage, injectIntl} from \"react-intl\";\r\n\r\nimport IconButton from \"@mui/material/IconButton\";\r\nimport CloseIcon from \"@mui/icons-material/Close\";\r\n\r\nimport {LOOK_FEATURE_CONTENT} from \"../../../core/constants\";\r\nimport {IS_PRODUCT_JOURNEY} from \"../../../../../config\";\r\nimport LookFeatureInfoContent from \"./lookFeatureInfoContent\";\r\nimport LookFeatureInfo3d from \"./lookFeatureInfo3d\";\r\nimport {setLookMoreInfoOpened} from \"../../../../../actions/lookFunctions\";\r\nimport LookFeatureInfoButtons from \"./lookFeatureInfoButtons\";\r\nimport LookFeatureInfoAug from \"./lookFeatureInfoAug\";\r\nimport Analytics, {LOOK_JOURNEY_ANALYTIC_EVENTS, PRODUCT_JOURNEY_ANALYTIC_EVENTS} from \"../../../../../analytics\";\r\n\r\nconst LookFeatureInfo = (props) => {\r\n\r\n const {intl, lookActiveFeature, moreInfoOpened, moreInfoContent, setLookMoreInfoOpened, isMobile} = props;\r\n\r\n const backButtonClick = () => {\r\n Analytics.sendClickEvent(IS_PRODUCT_JOURNEY\r\n ? PRODUCT_JOURNEY_ANALYTIC_EVENTS.productFeatureInfoContentHeaderClose\r\n : LOOK_JOURNEY_ANALYTIC_EVENTS.lookFeatureInfoContentHeaderClose\r\n );\r\n setLookMoreInfoOpened(\"\", LOOK_FEATURE_CONTENT.threeD);\r\n }\r\n\r\n const mainContent = () => {\r\n // if (!moreInfoOpened && !isMobile) { // always render on mobile\r\n if (!lookActiveFeature) { // always render on mobile\r\n return null\r\n }\r\n switch (moreInfoContent) {\r\n case LOOK_FEATURE_CONTENT.info:\r\n default:\r\n return \r\n \r\n )\r\n\r\n return (\r\n \r\n }\r\n {showTotal ? (\r\n \r\n )\r\n};\r\n\r\nGroheCartColumns.propTypes = {\r\n isShort: PropTypes.bool,\r\n}\r\n\r\nconst mapStateToProps = (store) => {\r\n const {settings} = store.fabricatorState;\r\n const {discountSections} = store.priceWorksheetState;\r\n const {cartItems, showAllQuotesCartItemsList, sureTax} = store.cartState;\r\n const {isPhoneNumberValidated} = store.userState;\r\n const {language} = store.serverState;\r\n const {quotes, activeQuoteIndex} = store.quotesState;\r\n const {showUnlockCalculations, showTotalItems} = store.unlockCalculationsState;\r\n\r\n return {\r\n fabricatorSettings: settings,\r\n discountSections,\r\n cartItems,\r\n showAllQuotesCartItemsList,\r\n isPhoneNumberValidated,\r\n language,\r\n quotes,\r\n activeQuoteIndex,\r\n showUnlockCalculations,\r\n showTotalItems,\r\n sureTax, // to update when response received\r\n // deliveryList, // to update when delivery changed\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {};\r\n\r\nexport default injectIntl(\r\n withRouter(connect(mapStateToProps, mapDispatchToProps)(GroheCartColumns))\r\n)\r\n","import {useCallback, useEffect} from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport {withRouter} from \"react-router-dom\";\r\nimport PropTypes from \"prop-types\";\r\n\r\nimport {\r\n setWizardActiveItem,\r\n setWizardActiveStep,\r\n setWizardSelectedValues\r\n} from \"../../../../../actions/wizardFunctions\";\r\nimport {getActiveWizardItem} from \"./lookWizardFunctions\";\r\nimport {setLookCompatabilityAlert} from \"../../../../../actions/lookFunctions\";\r\n\r\nconst LookWizard = (props) => {\r\n\r\n const {wizardList, location, setWizardActiveItem, wizardActiveItem, setWizardActiveStep, setWizardSelectedValues,\r\n children, lookCompatabilityAlert, setLookCompatabilityAlert, wizardActiveStep} = props;\r\n\r\n const closeCompatability = useCallback(() => {\r\n setLookCompatabilityAlert({\r\n visible: false,\r\n compatabilityLogic: [],\r\n clickedFeature: null,\r\n applyFunction: null\r\n })\r\n }, [setLookCompatabilityAlert])\r\n\r\n useEffect(() => {\r\n console.log(\"wizardActiveItem\", wizardActiveItem);\r\n if (!wizardActiveItem) {\r\n const wizardItem = getActiveWizardItem(wizardList, location);\r\n console.log(\"wizardItem\", wizardItem);\r\n if (wizardItem) {\r\n setWizardActiveItem(wizardItem)\r\n }\r\n }\r\n return () => {\r\n setWizardActiveItem(null);\r\n setWizardActiveStep(-1);\r\n setWizardSelectedValues({}, true);\r\n if (lookCompatabilityAlert && lookCompatabilityAlert.visible) {\r\n closeCompatability()\r\n }\r\n }\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [wizardList])\r\n\r\n useEffect(() => {\r\n if (lookCompatabilityAlert && lookCompatabilityAlert.visible) {\r\n closeCompatability()\r\n }\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [wizardActiveStep, wizardActiveItem]);\r\n\r\n if (!wizardActiveItem) {\r\n return null\r\n }\r\n\r\n return children\r\n};\r\n\r\nLookWizard.propTypes = {\r\n children: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).isRequired,\r\n}\r\n\r\nconst mapStateToProps = (store) => {\r\n const {wizardList, wizardActiveItem, wizardActiveStep} = store.wizardState;\r\n const {lookCompatabilityAlert} = store.lookState;\r\n\r\n return {\r\n wizardList,\r\n wizardActiveItem,\r\n wizardActiveStep,\r\n lookCompatabilityAlert,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n setWizardActiveItem,\r\n setWizardActiveStep,\r\n setWizardSelectedValues,\r\n setLookCompatabilityAlert,\r\n};\r\n\r\nexport default withRouter(\r\n connect(mapStateToProps, mapDispatchToProps)(LookWizard)\r\n)\r\n","import React from \"react\";\r\nimport {connect} from \"react-redux\";\r\nimport {FormattedMessage} from \"react-intl\";\r\n\r\nimport {getCurrentGroups} from \"./lookWizardFunctions\";\r\n\r\n\r\nconst LookWizardContentTitle = (props) => {\r\n\r\n const {wizardActiveItem, wizardActiveStep, wizardSelectedValues} = props;\r\n\r\n const currentGroups = getCurrentGroups(wizardActiveItem, wizardActiveStep, wizardSelectedValues);\r\n\r\n if (wizardActiveStep === -1) {\r\n // return \r\n {wizardSteps.map((wizardStep, wizardStepIndex) => {\r\n const currentGroups = getCurrentGroups(wizardItem, wizardStepIndex, wizardSelectedValues);\r\n\r\n if (IS_PRODUCT_JOURNEY) {\r\n let classNames = \"grohe-features grohe-section--wizard\"\r\n + ((wizardActiveStep === wizardStepIndex) && !isCompletedStep ? \" grohe-features--opened\" : \"\")\r\n + (shopPageOpened ? \" grohe-section--shop\" : \"\");\r\n if (isMobile) {\r\n if (wizardActiveStep !== wizardStepIndex) {\r\n classNames += wizardActiveStep > wizardStepIndex && !isCompletedStep\r\n ? \" lm-section--slide-left\"\r\n : \" lm-section--slide-right\"\r\n }\r\n }\r\n return (\r\n \r\n \r\n )\r\n }\r\n\r\n if (isMobile) {\r\n let classNames = \"lm-content lm-content--features lm-content--wizard\";\r\n if (wizardActiveStep !== wizardStepIndex) {\r\n classNames += wizardActiveStep > wizardStepIndex && !isCompletedStep\r\n ? \" lm-section--slide-left lm-section--hidden\"\r\n : \" lm-section--slide-right lm-section--hidden\"\r\n }\r\n return (\r\n \r\n \r\n )\r\n })}\r\n \r\n )\r\n\r\n if (IS_PRODUCT_JOURNEY && isMobile) {\r\n return (\r\n \r\n {(imageCanvas) => (\r\n closeButtonClick(imageCanvas)}>\r\n \r\n )}\r\n \r\n )\r\n};\r\n\r\nconst mapStateToProps = () => {\r\n return {\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n setLookOpened,\r\n setCanvasScale,\r\n};\r\n\r\nexport default withRouter(\r\n injectIntl(\r\n connect(mapStateToProps, mapDispatchToProps)(LookMainHeaderCloseButton)\r\n )\r\n)\r\n","const ua = navigator.userAgent || navigator.vendor || window.opera;\r\nexport const isInstagram = ua.indexOf('Instagram') > -1\r\nexport const isFacebook = (ua.indexOf(\"FBAN\") > -1) || (ua.indexOf(\"FBAV\") > -1);\r\n\r\n// if (document.documentElement.classList) {\r\n// if (isInstagram) {\r\n// window.document.body.classList.add('bv--instagram');\r\n// }\r\n// }\r\n","import React, {useEffect, useRef, useState} from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport PropTypes from \"prop-types\";\r\n\r\nimport ClickAwayListener from '@mui/material/ClickAwayListener';\r\nimport Grow from '@mui/material/Grow';\r\nimport Popper from '@mui/material/Popper';\r\n\r\nimport {setLookContextMenu} from \"../../../actions/lookFunctions\";\r\n\r\nimport ContextMenuQKBButtons from \"./contextMenuQKBButtons\";\r\n\r\n// export const checkForContextMenuCommon = (partId, layerPosition) => {\r\nexport const checkForContextMenuCommon = () => {\r\n const returnObject = {\r\n allButtons: [], // {partId: \"\", translateId: \"\", isWizard: true, wizardId: sting|number, hasSubMenu: false}\r\n showButtons: [] // {partId: \"\", translateId: \"\", isWizard: true, wizardId: sting|number, hasSubMenu: false}\r\n }\r\n return returnObject\r\n}\r\n\r\nconst getContextMenuPosition = (contextMenu, position, isMobile) => {\r\n const {partId, layerPosition} = contextMenu;\r\n const {showButtons} = checkForContextMenuCommon(partId, layerPosition);\r\n\r\n let left = isMobile ? '50%' : position.x - 50;\r\n let top = isMobile ? '50%' : position.y - 50;\r\n let right = 'auto';\r\n\r\n const maxAllowedWidth = showButtons.length > 2 ? 300 : 210;\r\n\r\n let maxAllowedHeight = 110;\r\n if (showButtons.length > 6) {\r\n maxAllowedHeight = 330;\r\n } else if (showButtons.length >= 3) {\r\n maxAllowedHeight = 220;\r\n }\r\n if (!isMobile && (left > window.innerWidth - maxAllowedWidth)) {\r\n left = 'auto';\r\n right = 0\r\n }\r\n if (!isMobile && (top > window.innerHeight - maxAllowedHeight)) {\r\n let negativeMargin = 50;\r\n if (showButtons.length > 6) {\r\n negativeMargin = 250;\r\n } else if (showButtons.length >= 3) {\r\n negativeMargin = 150;\r\n }\r\n top = top - negativeMargin;\r\n }\r\n\r\n return {left, top, right}\r\n}\r\n\r\nconst ContextMenuQKB = (props) => {\r\n\r\n const {contextMenu, setLookContextMenu, isMobile, handleContextMenuClick, renderGreenLayerByZindex} = props;\r\n const {opened, position} = contextMenu;\r\n const [styles, setStyles] = useState({left: 0, top: 0, right: 0});\r\n const [buttons, setButtons] = useState([]);\r\n const anchorRef = useRef(null);\r\n\r\n const handleClose = (event) => {\r\n if (document.hoveredLayer && event.target.closest(\".canvas-el\") && ALL_CONTEXT_MENU.includes(document.hoveredLayer.partId)) {\r\n return\r\n }\r\n setLookContextMenu({\r\n opened: false,\r\n layerPosition: \"\",\r\n });\r\n };\r\n\r\n useEffect(() => {\r\n if (!contextMenu.opened) {\r\n return null\r\n }\r\n setStyles(getContextMenuPosition(contextMenu, position, isMobile));\r\n const {showButtons} = checkForContextMenuCommon(contextMenu.partId, contextMenu.layerPosition);\r\n setButtons(showButtons);\r\n }, [contextMenu, position, isMobile]);\r\n\r\n // console.log(\"styles\", styles);\r\n\r\n let contextStyles = styles;\r\n if (buttons.length <= 4) {\r\n contextStyles = Object.assign({}, styles, {maxWidth: \"210px\"});\r\n }\r\n\r\n return (\r\n \r\n \r\n );\r\n }\r\n default:\r\n return \"Text is not set up\"\r\n }\r\n };\r\n\r\n closePopup = () => {\r\n this.props.toggleConfirmPopup(false);\r\n };\r\n\r\n render() {\r\n const {confirmPopupOpened, confirmPopupType} = this.props;\r\n if (!confirmPopupOpened) {\r\n return null\r\n }\r\n return (\r\n \r\n {(hideOverlay) => (\r\n \r\n\r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = (store) => {\r\n const {confirmPopupOpened, confirmPopupType, confirmPopupTag, alreadyRegisteredUserInfo} = store.userState;\r\n const {afterContractSignCallback} = store.contractSigningState;\r\n return {\r\n confirmPopupOpened,\r\n confirmPopupType,\r\n confirmPopupTag,\r\n alreadyRegisteredUserInfo,\r\n // contractSignIsOpened: isVisible,\r\n afterContractSignCallback,\r\n };\r\n};\r\nconst mapDispatchToProps = {\r\n toggleConfirmPopup,\r\n setJobId,\r\n updateSQFT,\r\n setAssignQuotePopupCustomer,\r\n setAlreadyRegisteredUserInfo,\r\n showContractSigning,\r\n setAfterContractSignCallback,\r\n};\r\n\r\nexport default injectIntl(\r\n connect(mapStateToProps, mapDispatchToProps)(ConfirmPopup)\r\n)\r\n","import {connect} from \"react-redux\";\r\n\r\nimport {setCameFromPage, toggleConfirmPopup, toggleSelectionFeatureInfo} from \"../../../actions/actionFunctions\";\r\nimport {setSqftFromFeature} from \"../../../actions/sqftFunctions\";\r\nimport {withRouter} from \"react-router-dom\";\r\nimport {setShowAddedToTheCartSuccess} from \"../../../actions/groheFunctions\";\r\nimport {useCloseSQFTCalc} from \"./useCloseSQFTCalc\";\r\n\r\nconst WithCloseSQFtCalc = (props) => {\r\n const {children} = props;\r\n const {closeSQFTCalc} = useCloseSQFTCalc();\r\n\r\n return children(closeSQFTCalc);\r\n};\r\n\r\nconst mapStateToProps = (store) => ({\r\n cameFromPage: store.cartState.cameFromPage,\r\n activePreset: store.bathroomVisualizerState.activePreset,\r\n bvPresets: store.bathroomVisualizerState.bvPresets,\r\n});\r\n\r\nconst mapDispatchToProps = {\r\n toggleSelectionFeatureInfo,\r\n setCameFromPage,\r\n toggleConfirmPopup,\r\n setSqftFromFeature,\r\n setShowAddedToTheCartSuccess,\r\n};\r\n\r\nexport default withRouter(\r\n connect(mapStateToProps, mapDispatchToProps)(WithCloseSQFtCalc)\r\n);\r\n","import React, {Component} from 'react';\r\nimport {connect} from \"react-redux\";\r\nimport {FormattedMessage} from \"react-intl\";\r\n\r\nimport {isFacebook, isInstagram} from \"../../misc/browsers\";\r\nimport {baseNewImagesPath} from \"../assets\";\r\nimport MobileRotateButtonIcon from \"./mobileRotateButtonIcon\";\r\nimport {AmericanStandardIcon, groheIcon} from \"../common/icons\";\r\n\r\n// const faceBookOldView = (isRebath) => (\r\n// \r\n \r\n );\r\n }\r\n\r\n const noRowsRenderer = () =>
\r\n
\r\n \r\n )\r\n};\r\n\r\nLookVirtualizedListLoadingItem.propTypes = {\r\n style: PropTypes.object,\r\n viewType: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\r\n}\r\n\r\nconst mapStateToProps = (store, ownProps) => {\r\n const {lookExpanded, lookViewType} = store.lookState;\r\n const {isMobile} = store.serverState;\r\n const {viewType} = ownProps;\r\n\r\n return {\r\n lookExpanded,\r\n currentType: viewType || lookViewType,\r\n isMobile,\r\n };\r\n};\r\n\r\nexport default connect(mapStateToProps)(LookVirtualizedListLoadingItem)\r\n","import React from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport {FormattedMessage, injectIntl} from \"react-intl\";\r\nimport PropTypes from \"prop-types\";\r\n\r\nimport SvgIcon from \"@mui/material/SvgIcon\";\r\n\r\nimport {featureInterface} from \"../../../../../interfaces/featureInterface\";\r\nimport {GroheLockIconSmall} from \"../../../../common/icons\";\r\nimport {pricingIsLocked} from \"../../lookNavigationFunctions\";\r\nimport {getCurrentLayout} from \"../../../../appLayout\";\r\nimport {setLookOverlayOpened} from \"../../../../../actions/lookFunctions\";\r\nimport {LOOK_OVERLAYS} from \"../../../core/constants\";\r\n\r\nconst LookFeaturePriceLocked = (props) => {\r\n\r\n const {lookFeature, lockedText, setLookOverlayOpened} = props;\r\n\r\n let {showPrice} = pricingIsLocked();\r\n if (showPrice && lookFeature) {\r\n const layout = getCurrentLayout();\r\n showPrice = layout.partIdExistInQtCategory(lookFeature.partId);\r\n }\r\n\r\n const handlePriceLockClick = () => {\r\n console.log(\"lookFeature\", lookFeature);\r\n setLookOverlayOpened(LOOK_OVERLAYS.leadCapture);\r\n };\r\n\r\n return (\r\n \r\n \r\n
\r\n ) : null}\r\n \r\n
\r\n )\r\n};\r\n\r\nLookFilters.propTypes = {\r\n wrapperStyles: PropTypes.object,\r\n isRelatedItemsFilters: PropTypes.bool,\r\n shouldCloseLevel3Sidebar: PropTypes.bool\r\n}\r\n\r\nconst mapStateToProps = (store) => {\r\n const {lookActiveCategory, lookActiveFeature} = store.lookState;\r\n const {showFilters, selectedFilters} = store.filterState;\r\n const {isMobile} = store.serverState;\r\n const {groheFiltersSearchText} = store.groheState;\r\n\r\n return {\r\n filtersOpened: showFilters,\r\n selectedFilters,\r\n lookActiveCategory,\r\n lookActiveFeature,\r\n isMobile,\r\n groheFiltersSearchText,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n showFilters,\r\n setSelectedFilters,\r\n setSQFTActiveLevel3Button,\r\n};\r\n\r\nexport default injectIntl(\r\n connect(mapStateToProps, mapDispatchToProps)(LookFilters)\r\n);\r\n","import React from \"react\";\r\nimport {FormattedMessage} from \"react-intl\";\r\nimport {connect} from \"react-redux\";\r\nimport PropTypes from \"prop-types\";\r\nimport {useLocation} from \"react-router-dom\";\r\n\r\nimport {IS_PRODUCT_JOURNEY} from \"../../config\";\r\nimport Analytics, {LOOK_JOURNEY_ANALYTIC_EVENTS} from \"../../analytics\";\r\nimport {ROUTES} from \"../../routes\";\r\nimport {isIframe} from \"../../misc/helpers\";\r\nimport {UserPopupContent} from \"../visComponents/constants\";\r\nimport {setUserPopupContent} from \"../../actions/userFunctions\";\r\nimport {setLookOverlayOpened} from \"../../actions/lookFunctions\";\r\nimport {LOOK_OVERLAYS} from \"./core/constants\";\r\n\r\n\r\nconst LookPolicyLinks = (props) => {\r\n\r\n const {position, isSimple, lookPageOpened, isMobile, fabricatorData, setUserPopupContent, setLookOverlayOpened} = props;\r\n const location = useLocation();\r\n\r\n const openLink = (linkKey) => {\r\n const baseUrl = fabricatorData.isAmericanStandard\r\n ? \"https://www.americanstandard-us.com\"\r\n : window.location && window.location.ancestorOrigins && window.location.ancestorOrigins[\"0\"]\r\n ? window.location.ancestorOrigins[\"0\"]\r\n : \"https://grohe.us\";\r\n\r\n Analytics.sendClickEvent(lookPageOpened === ROUTES.list\r\n ? LOOK_JOURNEY_ANALYTIC_EVENTS.lookListPolicyLinks + linkKey\r\n : LOOK_JOURNEY_ANALYTIC_EVENTS.lookCanvasPolicyLinks + linkKey\r\n );\r\n\r\n switch (linkKey) {\r\n case \"terms\": {\r\n const openUrl = fabricatorData.isAmericanStandard\r\n ? baseUrl + \"/terms-of-use#Terms%20of%20Use\"\r\n : baseUrl + \"/legal-info\";\r\n return window.open(openUrl, \"_blank\");\r\n }\r\n case \"privacy\": {\r\n const openUrl = fabricatorData.isAmericanStandard\r\n ? baseUrl + \"/privacy-policy#Privacy\"\r\n : baseUrl + \"/privacy-policy\";\r\n return window.open(openUrl, \"_blank\");\r\n }\r\n // case \"socialPolicy\":\r\n // return window.open(baseUrl + \"/social-policy\", \"_blank\");\r\n // case \"legalInfo\":\r\n // return window.open(baseUrl + (fabricatorData.isAmericanStandard ? \"/lead-generation-policy\" : \"/legal-info\"), \"_blank\");\r\n case \"privacyQC\": {\r\n setUserPopupContent(UserPopupContent.terms);\r\n setLookOverlayOpened(LOOK_OVERLAYS.leadCapture, \"termsOnly\");\r\n break;\r\n }\r\n default:\r\n return\r\n }\r\n }\r\n\r\n const isLixil = isIframe() && fabricatorData.isLixil;\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n )\r\n};\r\n\r\nLookPolicyLinks.propTypes = {\r\n position: PropTypes.string,\r\n isSimple: PropTypes.bool\r\n}\r\n\r\nconst mapStateToProps = (store) => {\r\n const {lookPageOpened} = store.lookState;\r\n const {isMobile} = store.serverState;\r\n const fabricatorData = store.fabricatorState;\r\n return {\r\n lookPageOpened,\r\n isMobile,\r\n fabricatorData\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n setUserPopupContent,\r\n setLookOverlayOpened\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(LookPolicyLinks)\r\n","import {connect} from \"react-redux\";\r\n\r\nimport {postMessageToParent} from \"../lookMessaging\";\r\nimport {GROHE_ON_OPEN_ACTION, GROHE_POST_MESSAGES_ACTIONS} from \"../iframeIntegration\";\r\nimport {getCurrentLayout} from \"../../appLayout\";\r\nimport {getTempIdForPostMessage, LIXIL_USER_QUERY_PARAMS} from \"../../../api/look-api\";\r\nimport {getLookId} from \"../lookNavigation/lookFunctions2\";\r\nimport {loaderEnable} from \"../../ui/loaderView\";\r\n\r\nconst WithLoginPostMessage = (props) => {\r\n\r\n const {children, lookReturnAction, activePreset, bvPresets, exisingTempId} = props;\r\n\r\n const loginPostMessage = async (sessionEnded = false) => {\r\n loaderEnable();\r\n const layout = getCurrentLayout();\r\n await layout.updateLocalStorage();\r\n\r\n let tempId = await getTempIdForPostMessage(lookReturnAction || GROHE_ON_OPEN_ACTION.saveQuote, exisingTempId);\r\n let lookUrl = window.location.href;\r\n\r\n if (sessionEnded) {\r\n const searchParams = new URLSearchParams(\r\n (window.location.search).replace(/amp;/g, \"\")\r\n || (window.location.hash).replace(/(.*)\\?/g, \"\")\r\n || \"\"\r\n );\r\n LIXIL_USER_QUERY_PARAMS.forEach(param => searchParams.delete(param));\r\n\r\n let stringifiedParams = searchParams.toString();\r\n let baseHref = window.location.origin + window.location.pathname;\r\n if (baseHref[baseHref.length - 1] === \"/\") {\r\n baseHref.slice(0, -1);\r\n }\r\n if (stringifiedParams && stringifiedParams.length && stringifiedParams[0] !== \"?\") {\r\n stringifiedParams = \"?\" + stringifiedParams;\r\n }\r\n lookUrl = baseHref + stringifiedParams + window.location.hash;\r\n\r\n }\r\n\r\n if (!lookUrl.includes(\"look-\")) {\r\n const withHashUrl = new URL(lookUrl);\r\n const lookId = getLookId(activePreset, bvPresets);\r\n withHashUrl.hash = `#/look-${lookId}`;\r\n lookUrl = withHashUrl.href;\r\n }\r\n\r\n console.log(\"returnUrl: \", lookUrl);\r\n\r\n postMessageToParent({\r\n \"EventType\": GROHE_POST_MESSAGES_ACTIONS.signIn,\r\n \"returnUrl\": lookUrl,\r\n \"tempID\": tempId\r\n });\r\n }\r\n\r\n return children(loginPostMessage)\r\n};\r\n\r\nconst mapStateToProps = (store) => {\r\n const {lookReturnAction} = store.lookState;\r\n const {exisingTempId} = store.groheState;\r\n const {activePreset, bvPresets} = store.bathroomVisualizerState;\r\n\r\n return {\r\n lookReturnAction,\r\n activePreset,\r\n bvPresets,\r\n exisingTempId,\r\n }\r\n};\r\n\r\nconst mapDispatchToProps = {};\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(WithLoginPostMessage)\r\n","import React, {useEffect} from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport PropTypes from \"prop-types\";\r\nimport {injectIntl} from \"react-intl\";\r\nimport { withRouter } from \"react-router-dom\";\r\n\r\nimport {setLookOpened,\r\n setSidebarModalOpened,\r\n setLookActiveFeature,\r\n setLookActiveCategory} from \"../../../../actions/lookFunctions\";\r\nimport LookSideBarLayoutButton from \"./lookSideBarLayoutButton\";\r\nimport LookSideBarSaveButton from \"./lookSideBarSaveButton\";\r\n// import LookSideBarHomeButton from \"./lookSideBarHomeButton\";\r\nimport LookSideBarEditButton from \"./lookSideBarEditButton\";\r\nimport LookSideBarMoreButton from \"./lookSideBarMoreButton\";\r\nimport LookSideBarFiltersButton from \"./lookSideBarFiltersButton\";\r\nimport {LOOK_INTRO_STEPS, LOOK_OVERLAYS} from \"../../core/constants\";\r\nimport {zoomCanvasOut} from \"../lookFunctions\";\r\nimport {setCanvasScale} from \"../../../../actions/actionFunctions\";\r\nimport LookSideBarPingPilotButton from \"./lookSideBarPingPilotButton\";\r\nimport LookSideBarRevertButton from \"./lookSideBarRevertButton\";\r\nimport WithUpdateLookCartItem from \"../../hocs/withUpdateLookCartItem\";\r\nimport {useShowRoomLayoutsButton} from \"../../../../misc/helperHooks\";\r\n\r\nconst LookSidebar = (props) => {\r\n\r\n const {popupCloseClick, imageCanvas, lookOverlayOpened, lookPageOpened, isMobile, introStep, lookOpened, setLookOpened,\r\n setCanvasScale, setLookActiveFeature, setLookActiveCategory, activePreset, visualizersLoadedLength} = props;\r\n\r\n const highLightForDemo = [LOOK_INTRO_STEPS.wallsAndFloor, LOOK_INTRO_STEPS.layoutsAndRooms, LOOK_INTRO_STEPS.saveAndMore];\r\n\r\n const stylePopups = [LOOK_OVERLAYS.stylePairing, LOOK_OVERLAYS.styleColor, LOOK_OVERLAYS.styleRemove, LOOK_OVERLAYS.styleRemoveBack];\r\n const stylePopupOnMobile = isMobile && stylePopups.some(popupType => popupType === lookOverlayOpened);\r\n\r\n useEffect(() => {\r\n // if (lookPageOpened || lookOverlayOpened) {\r\n if (lookPageOpened) {\r\n zoomCanvasOut(imageCanvas, setCanvasScale)\r\n }\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [lookPageOpened, lookOverlayOpened])\r\n\r\n const sidebarButtonClicked = () => { // closes opened menu and zooms out canvas\r\n if (lookOpened) {\r\n setLookOpened(null);\r\n setLookActiveCategory(\"\");\r\n setLookActiveFeature(null);\r\n }\r\n // revertFeatureBeforeChange(updateCanvasCount);\r\n zoomCanvasOut(imageCanvas, setCanvasScale);\r\n }\r\n\r\n const showRoomLayoutsButton = useShowRoomLayoutsButton(activePreset, isMobile, visualizersLoadedLength);\r\n\r\n return (\r\n \r\n )\r\n};\r\n\r\nLookSidebar.propTypes = {\r\n popupCloseClick: PropTypes.func,\r\n imageCanvas: PropTypes.object,\r\n};\r\n\r\nconst mapStateToProps = (store) => {\r\n const {lookOpened, lookOverlayOpened, lookPageOpened, introStep} = store.lookState;\r\n const {activeTheme, isMobile, visualizersLoaded} = store.serverState;\r\n const {activePreset} = store.bathroomVisualizerState;\r\n\r\n return {\r\n lookOpened,\r\n activeTheme,\r\n lookOverlayOpened,\r\n isMobile,\r\n introStep,\r\n lookPageOpened,\r\n activePreset,\r\n visualizersLoadedLength: visualizersLoaded.length,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n setLookOpened,\r\n setSidebarModalOpened,\r\n setCanvasScale,\r\n setLookActiveFeature,\r\n setLookActiveCategory,\r\n};\r\n\r\nexport default withRouter(\r\n injectIntl(connect(mapStateToProps, mapDispatchToProps)(LookSidebar))\r\n)\r\n","import {useEffect} from \"react\";\r\n\r\nexport const onInputBlur = (event, property, setInputValue, errorsObject, changeErrorsObject, getValidationErrors) => {\r\n const value = (event && event.target && event.target.value ? event.target.value : \"\").trim();\r\n setInputValue(property, value); // set trimmed version\r\n if (changeErrorsObject && getValidationErrors) {\r\n const errors = getValidationErrors(property, value);\r\n if (errors.length) {\r\n changeErrorsObject({\r\n [property]: errors\r\n })\r\n } else if (!errors.length && errorsObject && errorsObject[property]) {\r\n changeErrorsObject({\r\n [property]: errors\r\n })\r\n }\r\n }\r\n}\r\n\r\nexport const onInputChange = (event, property, setInputValue, errorsObject, changeErrorsObject, getValidationErrors) => {\r\n const value = event.target.value;\r\n setInputValue(property, value);\r\n if (errorsObject && errorsObject[property] && getValidationErrors) {\r\n const errors = getValidationErrors(property, value);\r\n if (!errors.length && changeErrorsObject) {\r\n changeErrorsObject({\r\n [property]: errors\r\n })\r\n }\r\n }\r\n};\r\n\r\nexport const useInputsValidation = (inputsValidated, onBlur, inputValue) => {\r\n useEffect(() => {\r\n if (!inputsValidated) {\r\n onBlur({\r\n target: {\r\n value: inputValue\r\n }\r\n });\r\n }\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [inputsValidated]);\r\n};\r\n","import React, {Fragment, useState} from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport {FormattedMessage, injectIntl} from \"react-intl\";\r\nimport {withRouter} from \"react-router-dom\";\r\nimport trim from \"lodash/trim\";\r\nimport PropTypes from \"prop-types\";\r\n\r\nimport PhoneIcon from '@mui/icons-material/Phone';\r\nimport TextField from \"@mui/material/TextField\";\r\nimport CheckIcon from '@mui/icons-material/Check';\r\n\r\nimport {setUserPopupContent, setUserTwoFa} from \"../../../actions/userFunctions\";\r\nimport {LOOK_OVERLAYS} from \"../core/constants\";\r\nimport {IS_PRODUCT_JOURNEY} from \"../../../config\";\r\nimport Analytics, {LOOK_JOURNEY_ANALYTIC_EVENTS, PRODUCT_JOURNEY_ANALYTIC_EVENTS} from \"../../../analytics\";\r\nimport {UserPopupContent} from \"../../visComponents/constants\";\r\nimport {ROUTES} from \"../../../routes\";\r\nimport {\r\n generateTwoFaAuthenticationToken,\r\n sendAuthenticationRequest,\r\n validateTwoFaAuthentication\r\n} from \"../../../api/user-api\";\r\nimport MaterialSpinner from \"../../ui/materialSpinner\";\r\nimport {changeUserInfo, setUserPhoneNumberValidated} from \"../../../actions/actionFunctions\";\r\n\r\nexport const sendAuthRequest = async (twoFALoading, analyticsLabel, userInfo, userIsLoggedIn, type, setUserTwoFa) => {\r\n if (twoFALoading) {\r\n return false\r\n }\r\n setUserTwoFa({\r\n twoFALoading: true\r\n });\r\n Analytics.sendClickEvent(analyticsLabel);\r\n const twoFAToken = await generateTwoFaAuthenticationToken();\r\n if (twoFAToken && userIsLoggedIn) {\r\n setUserTwoFa({ // set token to redux store, so the input can check it\r\n twoFAToken\r\n });\r\n await sendAuthenticationRequest(twoFAToken, `+${userInfo.country.dialCode} ${userInfo.phoneNumber}`, type);\r\n }\r\n setUserTwoFa({\r\n twoFALoading: false\r\n });\r\n}\r\n\r\nconst TwoFaCodeInput = (props) => {\r\n\r\n const {history, intl, setUserPhoneNumberValidated, userInfo, isPhoneNumberValidated, lookOverlayOpened,\r\n setUserPopupContent, userTwoFa, setUserTwoFa, closePopup, location} = props;\r\n const {twoFAToken, twoFALoading} = userTwoFa;\r\n\r\n const [authCode, setAuthCode] = useState(\"\");\r\n const [inValidCode, setInValidCode] = useState(\"\");\r\n const [isBlurred, setIsBlurred] = useState(false);\r\n\r\n const updatePhoneButtonClick = () => {\r\n if (twoFALoading) {\r\n return false\r\n }\r\n if (lookOverlayOpened === LOOK_OVERLAYS.leadCapture) {\r\n const analyticsLabel = IS_PRODUCT_JOURNEY\r\n ? PRODUCT_JOURNEY_ANALYTIC_EVENTS.leadCapturePopupTwoFAUpdatePhone\r\n : LOOK_JOURNEY_ANALYTIC_EVENTS.lookLeadCapturePopupTwoFAUpdatePhone;\r\n Analytics.sendClickEvent(analyticsLabel);\r\n setUserPopupContent(UserPopupContent.twoFA);\r\n return false\r\n }\r\n Analytics.sendClickEvent(PRODUCT_JOURNEY_ANALYTIC_EVENTS.cartTwoFAUpdatePhone);\r\n history.push(ROUTES.cartTwoFA);\r\n };\r\n\r\n const checkCode = async (newAuthCode) => {\r\n setUserTwoFa({\r\n twoFALoading: true\r\n });\r\n const validated = await validateTwoFaAuthentication(twoFAToken, newAuthCode, userInfo.phoneNumber);\r\n console.log(\"validated\", validated);\r\n setUserTwoFa({\r\n twoFALoading: false\r\n });\r\n Analytics.sendEvent(\"PhoneVerification\", validated ? \"Success\" : \"Failure\");\r\n if (validated) {\r\n setUserPhoneNumberValidated(true);\r\n const currentLocation = location.pathname;\r\n history.push(currentLocation + \"/phone-verified-thankyou\");\r\n setTimeout(() => {\r\n if (lookOverlayOpened === LOOK_OVERLAYS.leadCapture && closePopup) {\r\n history.push(currentLocation);\r\n closePopup();\r\n } else {\r\n history.push(ROUTES.cartTerms);\r\n }\r\n }, 2000);\r\n } else {\r\n setInValidCode(intl.formatMessage({id: \"look.inputs.errors.incorrectCode\"}));\r\n }\r\n }\r\n\r\n const onUserInputChange = (e) => {\r\n const newAuthCode = trim(e.target.value).replace(/[^0-9]/g, \"\");\r\n setAuthCode(newAuthCode);\r\n\r\n if (newAuthCode.length === 6) {\r\n if (inValidCode) {\r\n setInValidCode();\r\n }\r\n checkCode(newAuthCode);\r\n } else if (newAuthCode.length > 6) {\r\n setInValidCode(intl.formatMessage({id: \"look.inputs.errors.maxCode\"}));\r\n } else if (isBlurred && newAuthCode.length < 6) {\r\n setInValidCode(intl.formatMessage({id: \"look.inputs.errors.minCode\"}));\r\n } else if (inValidCode) {\r\n setInValidCode(\"\");\r\n }\r\n }\r\n\r\n return (\r\n - \r\n {isLixil ? [\"terms\", \"privacy\"].map(linkKey => {\r\n return (\r\n
- \r\n openLink(linkKey)}>\r\n
\r\n \r\n \r\n )\r\n }) : (\r\n - \r\n openLink(\"privacyQC\")}>\r\n
\r\n \r\n \r\n )}\r\n
\r\n
\r\n )\r\n};\r\n\r\nTwoFaCodeInput.propTypes = {\r\n closePopup: PropTypes.func\r\n}\r\n\r\nconst mapStateToProps = (store) => {\r\n const {userInfo, isPhoneNumberValidated, userIsLoggedIn, userTwoFa} = store.userState;\r\n const {lookOverlayOpened} = store.lookState;\r\n\r\n return {\r\n lookOverlayOpened,\r\n userInfo,\r\n isPhoneNumberValidated,\r\n userIsLoggedIn,\r\n userTwoFa,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n changeUserInfo,\r\n setUserPhoneNumberValidated,\r\n setUserTwoFa,\r\n setUserPopupContent,\r\n};\r\n\r\nexport default injectIntl(\r\n withRouter(\r\n connect(mapStateToProps, mapDispatchToProps)(TwoFaCodeInput)\r\n )\r\n)\r\n","import React, {useMemo, useRef} from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport PropTypes from \"prop-types\";\r\nimport { withRouter } from \"react-router-dom\";\r\nimport $ from \"jquery\";\r\n\r\nimport CheckIcon from '@mui/icons-material/Check';\r\n\r\nimport FeatureName from \"../../../../visComponents/featureName\";\r\nimport {featureInterface} from \"../../../../../interfaces/featureInterface\";\r\nimport FeatureThumbnail from \"../../../../visComponents/featureThumbnail\";\r\nimport Config, {IS_LIXIL_SERVERS, IS_PRODUCT_JOURNEY} from \"../../../../../config\";\r\nimport {getCommonCoords, getFeatureCoords, getLayerCenter, navFeatureCLick, zoomCanvasOut} from \"../../lookFunctions\";\r\nimport {addToCart, setCanvasScale, updateCanvasCount} from \"../../../../../actions/actionFunctions\";\r\nimport {getCurrentLayout} from \"../../../../appLayout\";\r\nimport {LOOK_WALLS_ONLY} from \"../../../core/constants\";\r\n\r\nimport {enableRelatedFeature, getPropertyToMatchActiveFeature} from \"../../lookFunctions2\";\r\nimport Analytics, {LOOK_JOURNEY_ANALYTIC_EVENTS} from \"../../../../../analytics\";\r\nimport LookFeaturePrice from \"../lookListFeature/lookFeaturePrice\";\r\nimport {setWizardSelectedValues} from \"../../../../../actions/wizardFunctions\";\r\nimport {wizardGroupInterface} from \"../../../../../interfaces/wizardItemInterface\";\r\nimport LookWizardSectionListFeatureQuantity from \"./lookWizardSectionListFeatureQuantity\";\r\nimport {\r\n setLookActiveFeature,\r\n setLookAllWallsTutorial,\r\n setLookCompatabilityAlert\r\n} from \"../../../../../actions/lookFunctions\";\r\nimport LookAllWallsRadioButton from \"../lookAllWallsRadioButton\";\r\nimport {\r\n checkForCompatabilityAlert,\r\n clickOnSimilarFeatures,\r\n getApplyToLogic,\r\n getShowMatchRadio,\r\n} from \"../../lookNavigationFunctions\";\r\nimport LookListActiveFeatureMobileButton from \"../lookListFeature/lookListActiveFeatureMobileButton\";\r\nimport {getAnalyticsEcommerceItem} from \"../../../../../analyticsEcommerceParams\";\r\nimport {getCorrectedCenter, shouldZoomPartId, shouldZoomToTheBottom} from \"../../../hocs/withZoomToFeature\";\r\nimport {getFeatureIsLocked} from \"../../../../../misc/helpers\";\r\n\r\nconst LookWizardSectionListFeature = (props) => {\r\n\r\n const {wizardGroup, lookFeature, lookViewType, featureGroup, updateCanvasCount, style, setLookActiveFeature, navItems,\r\n isMobile, addToCart, qtActiveCategory, setCanvasScale, wizardSelectedValues, wizardActiveStep, setWizardSelectedValues,\r\n imageCanvas, maxClickCountReached, updateLookCartItem, setLookCompatabilityAlert, isLixil, groheActiveFeatureQuantity,\r\n lookAllWallsTutorial, setLookAllWallsTutorial, isPhoneNumberValidated, lookLockedTutorial, isEncore, canvasScale,\r\n isAllWallsTutorialItem} = props;\r\n\r\n const featureElement = useRef();\r\n\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n const featureIsLocked = useMemo(() => getFeatureIsLocked(lookFeature), [lookFeature, isPhoneNumberValidated]);\r\n\r\n const applyWizardItemClick = async (zoomFeature) => {\r\n setWizardSelectedValues({\r\n [wizardActiveStep]: {\r\n wizardGroup,\r\n selectedFeature: lookFeature,\r\n partId: lookFeature.partId,\r\n singleFeature: navItems.length === 1,\r\n quantity: groheActiveFeatureQuantity\r\n }\r\n });\r\n\r\n const layout = getCurrentLayout();\r\n if (zoomFeature) {\r\n\r\n const parent = featureGroup || zoomFeature.getParent();\r\n Analytics.sendEcommerceEvent(\"select_item\", {\r\n item_list_id: zoomFeature.partId,\r\n item_list_name: parent.dbName || parent.partName || \"\",\r\n items: [getAnalyticsEcommerceItem(zoomFeature, 1)],\r\n });\r\n\r\n const featureLabel = Analytics.getSkuForAnalytics(zoomFeature);\r\n const analyticsLabel = LOOK_JOURNEY_ANALYTIC_EVENTS.lookWizardListFeature + featureLabel;\r\n Analytics.sendClickEvent(analyticsLabel);\r\n\r\n const positionInList = navItems ? navItems.findIndex(navItem => navItem.part.dbFeature.id === lookFeature.dbFeature.id) : null;\r\n setLookActiveFeature(zoomFeature, positionInList); // to set feature screen options // allow for look journey too\r\n\r\n if (showMatchRadio) { // before nav feature click\r\n const applyToLogic = getApplyToLogic(lookFeature);\r\n if (applyToLogic && Array.isArray(applyToLogic.currentApplyToArray) && applyToLogic.currentApplyToArray.length) {\r\n await clickOnSimilarFeatures(zoomFeature, applyToLogic, true);\r\n }\r\n }\r\n navFeatureCLick(zoomFeature);\r\n enableRelatedFeature(zoomFeature, addToCart, qtActiveCategory);\r\n\r\n // const parent = zoomFeature.getParent();\r\n // if (parent.disabled) {\r\n // parent.disabled = false;\r\n // parent.disabledClick();\r\n // }\r\n if (wizardGroup.multipleAddToCart) {\r\n return\r\n }\r\n updateCanvasCount();\r\n if (imageCanvas && imageCanvas.current && imageCanvas.current.pinchZoom && !LOOK_WALLS_ONLY.includes(zoomFeature.partId)\r\n && shouldZoomPartId(zoomFeature.partId, isMobile)) {\r\n if (zoomFeature.matchesMetaForArrayOfConditions(parent.getArrayOfConditions())) {\r\n const commonCoords = getFeatureCoords(zoomFeature, true) || getCommonCoords(parent, zoomFeature, imageCanvas.current.canvas);\r\n const {center} = getCorrectedCenter(\r\n getLayerCenter(commonCoords, imageCanvas.current.canvas, isMobile),\r\n null, zoomFeature, imageCanvas, isMobile\r\n );\r\n if (center) {\r\n imageCanvas.current.pinchZoom.zoomToCenter(center, 0, false, layout.partIdExistInQtCategory(zoomFeature.partId));\r\n setCanvasScale(imageCanvas.current.pinchZoom.options.tapZoomFactor)\r\n }\r\n }\r\n } else if (canvasScale !== 1) {\r\n zoomCanvasOut(imageCanvas, setCanvasScale);\r\n if (shouldZoomToTheBottom(zoomFeature.partId)) {\r\n $(\"html, body\").animate({scrollTop: document.body.scrollHeight}, 500);\r\n }\r\n }\r\n if (!lookAllWallsTutorial.finished && showMatchRadio && !featureIsLocked && !lookFeature.notAvailableInVisualizer\r\n && featureElement && featureElement.current && !isEncore) {\r\n const applyToLogic = getApplyToLogic(lookFeature);\r\n if (applyToLogic) {\r\n setLookAllWallsTutorial({\r\n visible: true,\r\n // withGrid: navItems.length === 1,\r\n // positionInList,\r\n lookFeature,\r\n top: featureElement.current.getBoundingClientRect().top,\r\n left: featureElement.current.getBoundingClientRect().left,\r\n height: style.height,\r\n width: style.width,\r\n // firstLockedIndex,\r\n // firstUnlockedIndex,\r\n })\r\n }\r\n }\r\n }\r\n updateLookCartItem(zoomFeature);\r\n }\r\n\r\n // const [canRender, setCanRender] = useState(false);\r\n const listFeatureClick = (event) => {\r\n if (event.target.closest(\".look-icon--delete\") || event.target.closest(\".gm-ios-checkbox\") || lookLockedTutorial.visible || isAllWallsTutorialItem) {\r\n return\r\n }\r\n if (Config.isDevMode() && lookFeature) {\r\n console.log(\"lookFeature\", lookFeature, lookFeature.metaData);\r\n }\r\n let zoomFeature = lookFeature;\r\n if (maxClickCountReached()) { // fabricator settings click lead capture\r\n return false;\r\n }\r\n\r\n const compatabilityLogic = isLixil ? [] : checkForCompatabilityAlert(zoomFeature);\r\n if (compatabilityLogic.length) {\r\n Analytics.sendClickEvent(LOOK_JOURNEY_ANALYTIC_EVENTS.lookShowCompatabilityAlert);\r\n setLookCompatabilityAlert({\r\n visible: true,\r\n compatabilityLogic,\r\n clickedFeature: zoomFeature,\r\n applyFunction: applyWizardItemClick.bind(this, zoomFeature) // always apply features from this popup\r\n });\r\n return false\r\n }\r\n\r\n applyWizardItemClick(zoomFeature);\r\n }\r\n\r\n // const realFeatureGroup = (featureGroup || lookFeature.getParent())\r\n // const activeFeature = realFeatureGroup.activeNotInVisualizerFeature || realFeatureGroup.activeFeature;\r\n let isActive = false;\r\n if (wizardSelectedValues[wizardActiveStep] && wizardSelectedValues[wizardActiveStep].selectedFeature) {\r\n const propToMatch = getPropertyToMatchActiveFeature(wizardSelectedValues[wizardActiveStep].selectedFeature);\r\n isActive = lookFeature.dbFeature[propToMatch] === wizardSelectedValues[wizardActiveStep].selectedFeature.dbFeature[propToMatch]\r\n }\r\n const nameLength = IS_PRODUCT_JOURNEY ? 40 : 500;\r\n\r\n const showMatchRadio = getShowMatchRadio(lookFeature);\r\n const showAllWalls = isActive && showMatchRadio;\r\n\r\n return (\r\n \r\n
\r\n \r\n setIsBlurred(true)}\r\n error={!!inValidCode}\r\n helperText={inValidCode}\r\n variant=\"outlined\" />\r\n
\r\n \r\n {isPhoneNumberValidated ? (\r\n \r\n \r\n \r\n ) : twoFALoading ? : (\r\n \r\n \r\n \r\n )}\r\n
\r\n \r\n {isActive ? (IS_PRODUCT_JOURNEY && isMobile) ? (\r\n \r\n ) : (\r\n \r\n {showAllWalls ? : null}\r\n
\r\n \r\n \r\n
\r\n ) : null}\r\n \r\n \r\n \r\n \r\n {(wizardGroup.multipleAddToCart && !IS_PRODUCT_JOURNEY) || !IS_LIXIL_SERVERS ? null : (\r\n
\r\n \r\n
\r\n \r\n
\r\n {wizardGroup.multipleAddToCart && !lookFeature.dbFeature.hideQuantity && !IS_PRODUCT_JOURNEY ? (\r\n \r\n \r\n
\r\n ) : null}\r\n \r\n \r\n
\r\n )\r\n};\r\n\r\nconst mapStateToProps = (store) => {\r\n return {\r\n language: store.serverState.language,\r\n fabricatorSettings: store.fabricatorState.settings\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n setLanguage,\r\n};\r\n\r\nexport default injectIntl(\r\n connect(mapStateToProps, mapDispatchToProps)(LanguageSwitcher)\r\n);\r\n","//********* TUTORIALS *********//\r\nimport * as types from \"./actionTypes\";\r\n\r\nexport const toggleShowAdvancedQuoting = (showAdvancedQuoting) => ({\r\n type: types.TOGGLE_SHOW_ADVANCED_QUOTING,\r\n payload: {showAdvancedQuoting}\r\n});\r\n\r\nexport const setAdvancedQuotingSearchItem = (advancedQuotingSearchItem) => ({\r\n type: types.SET_ADVANCED_QUOTING_SEARCH_ITEM,\r\n payload: {advancedQuotingSearchItem}\r\n});\r\n","import React, { Component } from 'react';\r\nimport { connect } from \"react-redux\";\r\nimport {FormattedMessage} from \"react-intl\";\r\n\r\nimport { toggleInstOpened } from \"../../actions/actionFunctions\";\r\n\r\nimport InstList from \"./instList\";\r\nimport Analytics from './../../analytics';\r\n\r\nclass InstView extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n unmount: false\r\n };\r\n }\r\n\r\n componentDidMount() {\r\n\r\n }\r\n\r\n componentWillReceiveProps(nextProps) {\r\n Analytics.sendClickEvent('installations-close');\r\n if (!nextProps.instOpened && this.props.instOpened) {\r\n this.setState({\r\n unmount: true\r\n }, () => {\r\n setTimeout(() => {\r\n this.setState({\r\n unmount: false\r\n })\r\n }, 500)\r\n })\r\n }\r\n\r\n }\r\n\r\n closeInstallationView = () => {\r\n this.props.toggleInstOpened(false);\r\n };\r\n\r\n render() {\r\n\r\n return (\r\n \r\n
\r\n \r\n {AVAILABLE_LANGUAGES.map((locale, languageIndex) => (\r\n handleLocaleClick(locale)}>\r\n {getLanguageName(locale)}\r\n \r\n ))}\r\n
\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = (store) => {\r\n return {\r\n instOpened: store.instState.instOpened,\r\n instState: store.instState.instState\r\n };\r\n};\r\n\r\nexport default connect(mapStateToProps, {\r\n toggleInstOpened\r\n})(InstView);\r\n","import React from \"react\";\r\nimport PropTypes from 'prop-types';\r\nimport {connect} from \"react-redux\";\r\nimport {FormattedMessage} from \"react-intl\";\r\n\r\nimport {unlockPricing} from \"../../../actions/actionFunctions\";\r\nimport Analytics from \"../../../analytics\";\r\n\r\nclass FeatureInfoPriceLocked extends React.Component {\r\n\r\n static propTypes = {\r\n textOnly: PropTypes.bool\r\n }\r\n\r\n handlePriceLockClick = () => {\r\n Analytics.sendClickEvent('feature-info-price-unlock');\r\n this.props.unlockPricing();\r\n };\r\n\r\n render() {\r\n return this.props.textOnly ? (\r\n \r\n \r\n
\r\n
\r\n - \r\n {pros.map((pros, index) => {\r\n return
- {pros} \r\n })}\r\n
wizardItemClick(maxClickCountReached)}>\r\n
\r\n ) : (\r\n \r\n {wizardGroup.customImageUrl ? (\r\n
\r\n \r\n 
\r\n
\r\n ) : null}\r\n \r\n
\r\n {wizardGroup.productCartTitle || wizardGroup.title || wizardGroup.groupName}
\r\n{wizardGroup.productCartDescription}
\r\n {window.location.href.includes(\"porcelanosa\") && wizardGroup.id === \"29\" ? ( // && wizardGroup.title === \"Xtone Underlayment\" // removed, they can rename\r\n \r\n
\r\n ) : null}\r\n wizardItemClick(maxClickCountReached)}>\r\n
\r\n )}\r\n \r\n {wizardGroup.customImageUrl\r\n ? 
\r\n : null}\r\n
\r\n \r\n {/*{showPrice ? (*/}\r\n {/* */}\r\n {/* {getPriceWithIncluded(price, currentFeature.part, fabricatorData, intl.messages)}\r\n {/**/}\r\n {/*) : null}*/}\r\n \r\n {wizardGroup.productCartTitle || wizardGroup.title || wizardGroup.groupName}\r\n \r\n
\r\n \r\n 
\r\n
\r\n )\r\n }\r\n\r\n if (props.allVisualizerNotAvailable) {\r\n return (\r\n \r\n {getThumbnail()}\r\n \r\n \r\n \r\n
\r\n )\r\n }\r\n\r\n const notAvailableAtAll = !props.activeFeature.dbFeature.s3Bindings || !props.activeFeature.dbFeature.s3Bindings.length;\r\n\r\n return !notAvailableAtAll ? (\r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n ) : (\r\n \r\n {getThumbnail()}\r\n \r\n \r\n \r\n
\r\n )\r\n};\r\n\r\nNotInVisualizerView.displayName = \"NotInVisualizerView\";\r\nNotInVisualizerView.propTypes = {\r\n goToBV: PropTypes.func,\r\n activeFeature: PropTypes.object,\r\n allVisualizerNotAvailable: PropTypes.bool,\r\n};\r\nexport default NotInVisualizerView\r\n","import {renderConfirmPopup} from \"../../../api/api-popups\";\r\nimport {ConfirmPopupTypes} from \"../../visComponents/constants\";\r\nimport store from \"../../../store\";\r\nimport {removeFromCart} from \"../../../actions/actionFunctions\";\r\n\r\n/**\r\n * Common func to call question popup\r\n * @param cartItem {cartItemInterface}\r\n * @param navItem {navItem}\r\n * @param quoteIndex {Number}\r\n * @param fromDelete {boolean}\r\n * @return {boolean}\r\n */\r\nexport const checkForDeletePopup = (cartItem, navItem, quoteIndex, fromDelete = false) => {\r\n const {fabricatorState, cartState} = store.getState();\r\n if (fabricatorState.settings.useCategorySwitching) {\r\n if (cartItem.partId === \"room\" && cartItem.cartFeature && (fromDelete || (navItem.part.dbFeature.id !== cartItem.cartFeature.dbFeature.id))\r\n && cartState.cartItems.some(cItem => cItem.partId !== \"room\" && cItem.currentQuote === quoteIndex)) {\r\n renderConfirmPopup(ConfirmPopupTypes.DeleteCartItemsPopup, {\r\n cartItem, // old\r\n navItem, // new\r\n fromDelete\r\n });\r\n return true\r\n }\r\n }\r\n return false\r\n}\r\n/**\r\n * Common func to remove features\r\n * @param quoteIndex {Number}\r\n * @return {boolean}\r\n */\r\nexport const removeCartItemsWithQuoteIndex = (quoteIndex) => {\r\n const {cartState} = store.getState();\r\n const cartItemsToRemove = cartState.cartItems.filter(cItem => cItem.currentQuote === quoteIndex);\r\n if (cartItemsToRemove.length) {\r\n cartItemsToRemove.forEach(cItem => {\r\n store.dispatch(removeFromCart(cItem));\r\n })\r\n }\r\n}\r\n\r\n/**\r\n * Cheks if we selected something from the previous wizard step\r\n * @param quoteIndex {number}\r\n * @param wizardItemId {number}\r\n * @param wizardStep {number}\r\n * @param applyFunction {function} // will be called on yes click\r\n * @return {boolean}\r\n */\r\nexport const checkForWizardPreviousChanges = (quoteIndex, wizardItemId, wizardStep, applyFunction) => {\r\n const {cartState} = store.getState();\r\n const cartItemsToRemove = cartState.cartItems.filter(cItem => {\r\n return cItem.currentQuote === quoteIndex && cItem.fromWizardId === wizardItemId && cItem.fromWizardStep > wizardStep\r\n });\r\n if (cartItemsToRemove.length) {\r\n console.log(\"cartItemsToRemove\", cartItemsToRemove);\r\n const finalFunction = () => {\r\n cartItemsToRemove.forEach(cItem => {\r\n store.dispatch(removeFromCart(cItem));\r\n })\r\n applyFunction()\r\n }\r\n renderConfirmPopup(ConfirmPopupTypes.ChangeWizardToPreviousStepSelection, {\r\n applyFunction: finalFunction.bind(this)\r\n });\r\n return true\r\n }\r\n return false\r\n}\r\n\r\n","import React from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport {FormattedMessage, injectIntl} from \"react-intl\";\r\n\r\nimport IconButton from \"@mui/material/IconButton\";\r\nimport ErrorIcon from \"@mui/icons-material/Error\";\r\n\r\n\r\nconst GroheFeatureNotInVisualizer = (props) => {\r\n const {intl, fabricatorData} = props;\r\n\r\n return (\r\n \r\n
\r\n {fabricatorData.isAmericanStandard ? null : (\r\n \r\n \r\n )}\r\n \r\n
\r\n )\r\n};\r\nconst mapStateToProps = (store) => {\r\n const fabricatorData = store.fabricatorState;\r\n return {\r\n fabricatorData\r\n }\r\n};\r\n\r\nexport default injectIntl(\r\n connect(mapStateToProps)(GroheFeatureNotInVisualizer)\r\n)\r\n","import React from \"react\";\r\nimport { connect } from \"react-redux\";\r\n\r\nimport GroheMobile3dButton from \"./groheMobile3dButton\";\r\nimport FeatureName from \"../../../../visComponents/featureName\";\r\nimport FeatureThumbnail from \"../../../../visComponents/featureThumbnail\";\r\nimport {IS_PRODUCT_JOURNEY} from \"../../../../../config\";\r\nimport {getFeatureIsLocked} from \"../../../../../misc/helpers\";\r\nimport LookLockedButton from \"../../../lookNavigation/lookMain/lookLockedButton\";\r\nimport LookFeatureNotInStock from \"../../../lookNavigation/lookMain/lookFeature/lookFeatureNotInStock\";\r\nimport LookFeatureSku from \"../../../lookNavigation/lookMain/lookFeature/lookFeatureSku\";\r\n\r\nconst GroheMobileFeatureTop = (props) => {\r\n\r\n const {lookActiveFeature} = props;\r\n\r\n if (!lookActiveFeature) {\r\n return null\r\n }\r\n\r\n const featureIsLocked = getFeatureIsLocked(lookActiveFeature);\r\n\r\n return (\r\n \r\n
\r\n )\r\n};\r\n\r\nconst mapStateToProps = (store) => {\r\n const {lookActiveFeature} = store.lookState;\r\n const {isPhoneNumberValidated} = store.userState; // to update component when user is logged in\r\n\r\n return {\r\n lookActiveFeature,\r\n isPhoneNumberValidated,\r\n };\r\n};\r\n\r\nexport default connect(mapStateToProps)(GroheMobileFeatureTop)\r\n","import React from \"react\";\r\nimport {connect} from \"react-redux\";\r\nimport PropTypes from \"prop-types\";\r\nimport {FormattedMessage} from \"react-intl\";\r\n\r\nimport {featureInterface} from \"../../../../../interfaces/featureInterface\";\r\nimport {isInStock} from \"../../lookFunctions2\";\r\n\r\nconst LookFeatureNotInStock = (props) => {\r\n\r\n const {lookFeature} = props;\r\n\r\n if (isInStock(lookFeature)) {\r\n return null\r\n }\r\n\r\n return (\r\n \r\n \r\n \r\n
\r\n \r\n : null}\r\n
\r\n \r\n
\r\n
\r\n \r\n
\r\n {featureIsLocked ?
\r\n \r\n {!qtCategoriesLoadedLength ? \r\n {featureGroups.map(lmFeature => {\r\n return \r\n )}\r\n
\r\n )\r\n};\r\n\r\nGroheCategoriesMenu.propTypes = {\r\n isAccessory: PropTypes.bool,\r\n showWizardItems: PropTypes.bool,\r\n}\r\n\r\nconst mapStateToProps = (store) => {\r\n const {visualizersLoaded} = store.serverState;\r\n const {qtCategoriesLoaded} = store.qtState;\r\n\r\n return {\r\n fabricatorData: store.fabricatorState,\r\n visualizersLoadedLength: visualizersLoaded.length,\r\n qtCategoriesLoadedLength: qtCategoriesLoaded.length,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n setLookActiveCategory,\r\n setLookPageOpened,\r\n setGroheWizardName,\r\n};\r\n\r\nexport default withRouter(\r\n injectIntl(\r\n connect(mapStateToProps, mapDispatchToProps)(GroheCategoriesMenu)\r\n )\r\n)\r\n","import React from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport {Grid} from \"react-virtualized\";\r\nimport PropTypes from \"prop-types\";\r\n\r\nimport LookListFeature from \"../../../lookNavigation/lookMain/lookListFeature/lookListFeature\";\r\nimport {GROHE_CONFIG} from \"../../groheConfig\";\r\nimport LookWizardSectionListFeature from \"../../../lookNavigation/lookMain/lookWizard/lookWizardSectionListFeature\";\r\nimport {wizardGroupInterface} from \"../../../../../interfaces/wizardItemInterface\";\r\nimport LookVirtualizedListLoadingItem\r\n from \"../../../lookNavigation/lookMain/lookCategory/lookVirtualizedListLoadingItem\";\r\n\r\nconst GroheVirtualizedList = (props) => {\r\n\r\n const {lookViewType, windowHeight, renderList, isMobile, onScrollHandler, isWizard, wizardGroup, wizardActiveItem,\r\n imageCanvas, maxClickCountReached, updateLookCartItem, loadingCount} = props;\r\n\r\n const width = isMobile ? GROHE_CONFIG.sidebarWidth.mobile : GROHE_CONFIG.sidebarWidth.desktop;\r\n let height = isMobile ? windowHeight - (wizardActiveItem ? 98 : 48) : windowHeight - 120;\r\n if (loadingCount) {\r\n height = isMobile ? height + 58 : height + 37;\r\n }\r\n\r\n const columnWidth = lookViewType === 2 ? width / 3 : width;\r\n const columnCount = lookViewType === 2 ? 3 : 1;\r\n const rowCount = Math.ceil((loadingCount || renderList.length) / columnCount);\r\n\r\n const listSettings = {\r\n width,\r\n columnCount,\r\n columnWidth,\r\n rowCount,\r\n height,\r\n rowHeight: lookViewType === 1\r\n ? 120\r\n : 124,\r\n overscanRowCount: 3,\r\n showScrollingPlaceholder: false,\r\n useDynamicRowHeight: false,\r\n }\r\n\r\n const cellRenderer = ({columnIndex, key, rowIndex, style}) => {\r\n if (loadingCount) {\r\n return No Features found
;\r\n\r\n return (\r\n \r\n {isMobile && !IS_PRODUCT_JOURNEY ? null : (\r\n \r\n \r\n )}\r\n {moreInfoContent === LOOK_FEATURE_CONTENT.threeD ? \r\n \r\n )}\r\n {isMobile && (moreInfoContent === LOOK_FEATURE_CONTENT.threeD) ? (\r\n
\r\n )\r\n }\r\n }\r\n\r\n const classNames = !IS_PRODUCT_JOURNEY && isMobile\r\n ? \"lm-content lm-content--filters\" + (!moreInfoOpened ? \" lm-content--slide-up\" : \"\")\r\n : \"lm-content__info\" + (moreInfoOpened ? \" lm-content__info--active lm-content__info--\" + moreInfoContent : \"\")\r\n\r\n return (\r\n \r\n
\r\n
\r\n
\r\n {mainContent()}\r\n
\r\n )\r\n};\r\n\r\nconst mapStateToProps = (store) => {\r\n const {lookActiveFeature, moreInfoOpened, moreInfoContent} = store.lookState;\r\n const {isMobile} = store.serverState;\r\n return {\r\n lookActiveFeature,\r\n moreInfoOpened,\r\n moreInfoContent,\r\n isMobile,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n setLookMoreInfoOpened\r\n};\r\n\r\nexport default injectIntl(\r\n connect(mapStateToProps, mapDispatchToProps)(LookFeatureInfo)\r\n)\r\n","import React from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport {FormattedMessage} from \"react-intl\";\r\n\r\nimport {\r\n getCartItemObject,\r\n getPriceWithCurrency,\r\n getQuotePriceWithTaxes,\r\n getTotalPrice,\r\n toFixedPrice\r\n} from \"../../../../../misc/helpers\";\r\nimport {IS_PRODUCT_JOURNEY} from \"../../../../../config\";\r\n\r\nconst LookWizardContentFinalPrice = (props) => {\r\n\r\n const {wizardSelectedValues, fabricatorSettings, qtActiveCategory} = props;\r\n\r\n if (!fabricatorSettings.showPricing) {\r\n return null\r\n }\r\n\r\n const cartItemsToCount = (Object.keys(wizardSelectedValues)).reduce((total, step) => {\r\n const selectedValue = wizardSelectedValues[step];\r\n if (!selectedValue || !selectedValue.selectedFeature) {\r\n return total\r\n }\r\n const parentPositions = selectedValue.selectedFeature.getParent().layerPositions\r\n const quantity = parentPositions\r\n ? Object.keys(parentPositions).filter(pos => parentPositions[pos]).length\r\n : 1;\r\n return [...total, getCartItemObject(selectedValue.selectedFeature, quantity, qtActiveCategory)]\r\n }, []);\r\n console.log(\"cartItemsToCount\", cartItemsToCount);\r\n\r\n const totalPrice = getTotalPrice(null, false, cartItemsToCount, true);\r\n const grandTotal = getQuotePriceWithTaxes(totalPrice);\r\n\r\n return (\r\n \r\n {IS_PRODUCT_JOURNEY ? (\r\n \r\n :\r\n \r\n ) : null}\r\n {getPriceWithCurrency(fabricatorSettings, toFixedPrice(grandTotal), null, true)}\r\n
\r\n )\r\n};\r\n\r\nconst mapStateToProps = (store) => {\r\n const {wizardSelectedValues} = store.wizardState;\r\n const {settings} = store.fabricatorState;\r\n const {qtActiveCategory} = store.qtState;\r\n\r\n return {\r\n wizardSelectedValues,\r\n fabricatorSettings: settings,\r\n qtActiveCategory,\r\n };\r\n};\r\n\r\nexport default connect(mapStateToProps)(LookWizardContentFinalPrice)\r\n","export const loadScript = (url, callback, id = \"\") => {\r\n let script = document.createElement(\"script\");\r\n script.type = \"text/javascript\";\r\n\r\n if (script.readyState) {\r\n script.onreadystatechange = function() {\r\n if (script.readyState === \"loaded\" || script.readyState === \"complete\") {\r\n script.onreadystatechange = null;\r\n if (callback) {\r\n callback()\r\n }\r\n }\r\n };\r\n } else if (callback) {\r\n script.onload = callback;\r\n }\r\n\r\n script.src = url;\r\n script.id = id;\r\n document.getElementsByTagName(\"head\")[0].appendChild(script);\r\n};\r\n","import React, {Fragment} from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport {FormattedMessage, injectIntl} from \"react-intl\";\r\nimport {withRouter} from \"react-router-dom\";\r\nimport PropTypes from \"prop-types\";\r\n\r\nimport {getPriceWithCurrency, getQuotePriceWithTaxes, getTotalPrice} from \"../../../../misc/helpers\";\r\nimport GroheCartDeliveryColumn from \"./groheCartDeliveryColumn\";\r\n\r\nconst GroheCartColumns = (props) => {\r\n\r\n const {activeQuoteIndex, discountSections, fabricatorSettings, isPhoneNumberValidated, language, intl, isShort,\r\n showUnlockCalculations, showTotalItems} = props;\r\n\r\n const {isBackend, jobId, canSaveQuote} = document.kvConfig;\r\n const totalPrice = getTotalPrice();\r\n let grandTotal = getQuotePriceWithTaxes(totalPrice, discountSections);\r\n const pricingIsLocked = (fabricatorSettings.leadCaptureOnQuote || fabricatorSettings.leadCaptureShoppingCart)\r\n && !(isBackend && jobId && canSaveQuote) && !isPhoneNumberValidated;\r\n\r\n let allTaxes = totalPrice.priceTaxes.length\r\n ? totalPrice.priceTaxes\r\n : [{materialTax: totalPrice.materialTaxes}];\r\n let instTaxes = totalPrice.installationTaxes;\r\n // console.log(\"allTaxes\", allTaxes);\r\n // console.log(\"totalPrice\", totalPrice);\r\n // console.log(\"grandTotal\", grandTotal);\r\n\r\n // const showTaxes = (pricingIsLocked || allTaxes.some(tax => tax.materialTax > 0)) && (!showUnlockCalculations || showTotalItems.includes(\"tax\"));\r\n const showTaxes = !isShort;\r\n const showInstTaxes = instTaxes && (!showUnlockCalculations || showTotalItems.includes(\"tax\"));\r\n const showTotal = !isShort && (!showUnlockCalculations || showTotalItems.includes(\"total\"));\r\n\r\n let subTotalPrice = 0;\r\n // if (quotes.length > 1 && !showAllQuotesCartItemsList) {\r\n const quoteTotalPrice = getTotalPrice(activeQuoteIndex);\r\n // subTotalPrice = getQuotePriceWithTaxes(quoteTotalPrice, discountSections);\r\n subTotalPrice = quoteTotalPrice.materialPrice;\r\n allTaxes = quoteTotalPrice.priceTaxes.length\r\n ? quoteTotalPrice.priceTaxes\r\n : [{materialTax: quoteTotalPrice.materialTaxes}];\r\n instTaxes = quoteTotalPrice.installationTaxes;\r\n // }\r\n subTotalPrice = subTotalPrice.toFixed(2); // always round to 23.65, even if it is 23.00\r\n grandTotal = grandTotal.toFixed(2); // always round to 23.65, even if it is 23.00\r\n\r\n const getTaxColumn = (pricingIsLocked, taxObject, taxObjectIndex) => {\r\n // const showIncluded = !pricingIsLocked && (+taxObject.materialTax > 0);\r\n const taxTotal = taxObject.materialTax.toFixed(2); // always round to 23.65, even if it is 23.00\r\n // if (taxTotal <= 0) {\r\n // return null\r\n // }\r\n const taxName = taxObject.nameIntl && taxObject.nameIntl[language]\r\n ? taxObject.nameIntl[language]\r\n : taxObject.state || intl.formatMessage({id: \"grohe.cart.footer.tax\"})\r\n return (\r\n \r\n {taxName}\r\n
\r\n )\r\n }\r\n\r\n const LockedPrice = () => (\r\n {}}>\r\n \r\n {pricingIsLocked ?
\r\n \r\n \r\n \r\n \r\n
\r\n {showTaxes ? allTaxes.map((taxObject, taxObjectIndex) => {\r\n return getTaxColumn(pricingIsLocked, taxObject, taxObjectIndex)\r\n }) : null}\r\n {showInstTaxes ? (\r\n \r\n {pricingIsLocked ?
\r\n \r\n \r\n {intl.formatMessage({id: \"grohe.cart.footer.instTax\"}) +\r\n (!pricingIsLocked && (+instTaxes > 0)\r\n ? intl.formatMessage({id: \"grohe.cart.footer.taxIncluded\"})\r\n : \"\")}\r\n \r\n
\r\n ) : null}\r\n {/*{(quotes.length > 1) && !showAllQuotesCartItemsList && showTotal ? (*/}\r\n {/* \r\n {pricingIsLocked ?
\r\n */}\r\n {/* */}\r\n {/* */}\r\n {/* */}\r\n {/*
*/}\r\n {/*) : null}*/}\r\n {isShort ? null : */}\r\n {/* {pricingIsLocked ?
*/}\r\n {/* \r\n \r\n \r\n \r\n
\r\n ) : null}\r\n \r\n {pricingIsLocked ?
\r\n 1) ? \"\" : \" lm-content--no-scroll lm-content--product\")}>\r\n {currentGroups.length ? : null}\r\n
\r\n \r\n {currentGroups.length ? : null}\r\n
\r\n )\r\n }\r\n let classNames = \"lm-section lm-section--feature lw-section lm-section--slide-right\";\r\n if (wizardActiveStep !== wizardStepIndex) {\r\n classNames += wizardActiveStep > wizardStepIndex && !isCompletedStep\r\n ? \" lm-section--slide-right-more lm-section--hidden\"\r\n : \" lm-section--slide-none lm-section--hidden\"\r\n }\r\n return (\r\n 1 ? \"\" : \" lm-content--no-scroll\")\r\n + (filtersOpened || lookCompatabilityAlert.visible ? \" lm-content--slide-down\" : \"\")}>\r\n {currentGroups.length ? : null}\r\n
\r\n \r\n {wizardSections}\r\n
\r\n )\r\n }\r\n\r\n return wizardSections\r\n\r\n}\r\n\r\nconst mapStateToProps = (store) => {\r\n const {wizardList, wizardActiveStep, wizardSelectedValues, wizardActiveItem} = store.wizardState;\r\n const {isMobile} = store.serverState;\r\n const {shopPageOpened} = store.shopState;\r\n const {lookCompatabilityAlert} = store.lookState;\r\n const {filtersOpened} = store.groheState;\r\n\r\n return {\r\n wizardList,\r\n wizardActiveStep,\r\n wizardSelectedValues,\r\n isMobile,\r\n wizardActiveItem,\r\n shopPageOpened,\r\n lookCompatabilityAlert,\r\n filtersOpened,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n\r\n};\r\n\r\nexport default withRouter(\r\n injectIntl(\r\n connect(mapStateToProps, mapDispatchToProps)(LookMainWizardSections)\r\n )\r\n)\r\n","import React, {useEffect, useRef} from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport {FormattedMessage, injectIntl} from \"react-intl\";\r\nimport PropTypes from \"prop-types\";\r\n\r\nimport IconButton from \"@mui/material/IconButton\";\r\nimport ErrorIcon from \"@mui/icons-material/Error\";\r\n\r\nimport {setLookCompatabilityAlert} from \"../../../../../actions/lookFunctions\";\r\nimport LookCompatabilitySectionButtons from \"./lookCompatabilitySectionButtons\";\r\nimport LookCompatabilitySectionContent from \"./lookCompatabilitySectionContent\";\r\nimport {IS_PRODUCT_JOURNEY} from \"../../../../../config\";\r\nimport $ from \"jquery\";\r\n\r\nconst LookCompatabilitySection = (props) => {\r\n const {lookCompatabilityAlert, wrapperStyles, intl, isMobile} = props;\r\n\r\n const compatabilityContentElem = useRef();\r\n\r\n //console.log(\"availableFilters\", availableFilters);\r\n\r\n useEffect(() => {\r\n if (lookCompatabilityAlert.visible) {\r\n setTimeout(() => {\r\n if (compatabilityContentElem && compatabilityContentElem.current) {\r\n const buttons = $(compatabilityContentElem.current).find(\".look-popup__buttons\");\r\n if (buttons && buttons[0] && buttons[0].offsetTop) {\r\n $(compatabilityContentElem.current).animate({scrollTop: buttons[0].offsetTop}, 1300);\r\n }\r\n }\r\n }, 700);\r\n }\r\n }, [lookCompatabilityAlert])\r\n\r\n return (\r\n \r\n
\r\n )\r\n};\r\n\r\nLookCompatabilitySection.propTypes = {\r\n wrapperStyles: PropTypes.object\r\n}\r\n\r\nconst mapStateToProps = (store) => {\r\n const {lookCompatabilityAlert, lookActiveFeature} = store.lookState;\r\n const {isMobile} = store.serverState;\r\n return {\r\n lookActiveFeature,\r\n lookCompatabilityAlert,\r\n isMobile,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n setLookCompatabilityAlert\r\n};\r\n\r\nexport default injectIntl(\r\n connect(mapStateToProps, mapDispatchToProps)(LookCompatabilitySection)\r\n);\r\n","import React from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport { withRouter } from \"react-router-dom\";\r\nimport {injectIntl} from \"react-intl\";\r\n\r\nimport IconButton from \"@mui/material/IconButton\";\r\nimport CloseIcon from \"@mui/icons-material/Close\";\r\n\r\nimport {setLookOpened} from \"../../../../actions/lookFunctions\";\r\nimport {ROUTES} from \"../../../../routes\";\r\nimport Analytics, {LOOK_JOURNEY_ANALYTIC_EVENTS} from \"../../../../analytics\";\r\nimport {zoomCanvasOut} from \"../lookFunctions\";\r\nimport {setCanvasScale} from \"../../../../actions/actionFunctions\";\r\nimport LookCanvasContext from \"../../lookCanvasContext\";\r\n\r\nconst LookMainHeaderCloseButton = (props) => {\r\n\r\n const {intl, history, setLookOpened, setCanvasScale} = props;\r\n\r\n const closeButtonClick = (imageCanvas) => {\r\n Analytics.sendClickEvent(LOOK_JOURNEY_ANALYTIC_EVENTS.lookMenuHeaderClose);\r\n setLookOpened(false);\r\n zoomCanvasOut(imageCanvas, setCanvasScale);\r\n history.push(ROUTES.home);\r\n };\r\n\r\n return (\r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n {({ TransitionProps }) => (\r\n \r\n \r\n
\r\n )\r\n};\r\n\r\nContextMenuQKB.propTypes = {\r\n handleContextMenuClick: PropTypes.func,\r\n renderGreenLayerByZindex: PropTypes.func,\r\n}\r\n\r\nconst mapStateToProps = (store) => {\r\n const {contextMenu} = store.lookState;\r\n const {isMobile} = store.serverState;\r\n return {\r\n contextMenu,\r\n isMobile,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n setLookContextMenu\r\n};\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(ContextMenuQKB)\r\n","import Analytics from \"../../../analytics\";\r\nimport Config from \"../../../config\";\r\nimport {loaderDisable, loaderEnable} from \"../../ui/loaderView\";\r\nimport {saveQuote} from \"../../../api/server-api\";\r\nimport {renderErrorPopup} from \"../../../api/api-popups\";\r\nimport {showQuoteSavedNotification} from \"../../ui/successNotification\";\r\n\r\nexport const handleBackToDashboard = () => {\r\n if (window.salesForceLoaded || typeof(sr) != 'undefined') {\r\n Analytics.sendClickEvent('see-job-in-salesforce');\r\n let payload = {QCJobId: document.kvConfig.jobId};\r\n console.log('attempting to view job in SalesForce', payload);\r\n let eventPayload = {name: 'quoteCountertops.viewJobInSF', payload }\r\n try {\r\n window.Sfdc.canvas.client.publish(sr.client, eventPayload);\r\n } catch(e) {\r\n console.log('unable to send via salesforce viewpage');\r\n }\r\n if (typeof(sfdcMessage) !== 'undefined') {\r\n sfdcMessage.postMessage(eventPayload);\r\n }\r\n } else {\r\n Analytics.sendClickEvent('back-to-dashboard');\r\n Config.parent && Config.parent.exitEditQuote && Config.parent.exitEditQuote();\r\n loaderDisable(); // in case it is not an iframe\r\n showQuoteSavedNotification();\r\n }\r\n};\r\n\r\nexport const handleSaveAndBackToDashboard = () => {\r\n\r\n if (!document.kvConfig.jobId) {\r\n renderErrorPopup(\"The Quote can not be saved, no JobId is assigned yet\");\r\n return false\r\n }\r\n\r\n loaderEnable(\"loader.savingQuoteText\");\r\n saveQuote({submit: true})\r\n .then(handleBackToDashboard)\r\n .catch(handleBackToDashboard)\r\n};\r\n","export const VIEW = {\r\n login: 0,\r\n register: 1,\r\n reset: 2,\r\n terms: 3\r\n};","import React from 'react';\r\nimport JsonApi from \"../../api/jsonApi\";\r\nimport PropTypes from 'prop-types';\r\nimport {FormattedMessage, injectIntl} from \"react-intl\";\r\nimport trim from \"lodash/trim\";\r\nimport {connect} from \"react-redux\";\r\n\r\nimport 'react-intl-tel-input/dist/main.css';\r\nimport {browserIsSafari} from \"../../misc/helpers\";\r\nimport OnScreenKeyboard from './OnScreenKeyboard/keyboard';\r\nimport Analytics from './../../analytics';\r\nimport misc from '../../misc/misc';\r\nimport {loaderDisable, loaderEnable} from \"../ui/loaderView\";\r\nimport store from '../../store';\r\nimport LookUserPhoneInput from \"../look/user/lookUserPhoneInput\";\r\nimport {changeUserInfo} from \"../../actions/actionFunctions\";\r\n//import autoPrefixer from 'gulp-autoprefixer';\r\n\r\nconst steps = {\r\n VerifyPhoneNumber: 0,\r\n TermsAndConditions: 1,\r\n UpdatePhone: 2,\r\n Updated: 3,\r\n Verified: 4\r\n};\r\n\r\n//const phoneUtil = PhoneNumberUtil.getInstance();\r\n\r\nexport const getPreferredCountries = () => {\r\n const {fabricatorState} = store.getState();\r\n if (fabricatorState.isCaesarStone && (fabricatorState.settings.currency === \"AUD\" || fabricatorState.settings.currency === \"AUS\")) {\r\n return [\"au\", \"us\", \"gb\", \"ca\"]\r\n }\r\n if (fabricatorState.isLixil) {\r\n return [\"us\", \"gb\", \"ca\"]\r\n }\r\n switch(fabricatorState.settings.currency) {\r\n case \"CAD\":\r\n return fabricatorState.isLowes ? [\"ca\"] : [\"ca\", \"us\", \"gb\", \"pa\", \"es\"];\r\n default:\r\n return [\"us\", \"gb\", \"ca\", \"pa\", \"es\"];\r\n }\r\n}\r\n\r\nclass TwoFactorAuthClass extends React.Component {\r\n static propTypes = {\r\n phoneNumber: PropTypes.string.isRequired,\r\n // (cancel = true, updatePhone = null)\r\n onClose: PropTypes.func.isRequired\r\n };\r\n\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n step: steps.VerifyPhoneNumber,\r\n authCode: '',\r\n validating: false,\r\n valid: true,\r\n phoneUpdateError: false,\r\n oldPhoneNumber: \"\",\r\n oldCountry: {},\r\n };\r\n\r\n this.handleResendSMS();\r\n }\r\n\r\n setStep = (step) => {\r\n this.setState({step});\r\n };\r\n\r\n componentDidMount() {\r\n this.setOldValues();\r\n }\r\n\r\n setOldValues() {\r\n const {phoneNumber, country} = this.props;\r\n this.setState({oldPhoneNumber: phoneNumber, oldCountry: country})\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n \r\n \r\n
\r\n \r\n )}\r\n \r\n \r\n
\r\n \r\n {this.getDialog()}\r\n
\r\n );\r\n }\r\n\r\n getDialogContent = () => {\r\n let content = {\r\n title: \"Invalid Step\",\r\n content: null,\r\n footer: null\r\n };\r\n switch (this.state.step) {\r\n case steps.VerifyPhoneNumber:\r\n content = this.getVerifyPhoneNumberContent();\r\n break;\r\n case steps.TermsAndConditions:\r\n content = this.getTermsAndConditionsContent();\r\n break;\r\n case steps.UpdatePhone:\r\n content = this.getUpdatePhoneContent();\r\n break;\r\n }\r\n return content;\r\n };\r\n\r\n sendAuthenticationRequest = (token, to, type, message) => {\r\n if (message) {\r\n loaderEnable(null, message);\r\n setTimeout(() => {\r\n loaderDisable()\r\n }, 3000);\r\n }\r\n return JsonApi.sendAuthenticationRequest(token, to, type);\r\n };\r\n\r\n handleResendSMS = () => {\r\n Analytics.sendClickEvent(\"resend-sms\");\r\n JsonApi.generateAuthenticationToken()\r\n .then((t) => {\r\n var token = t.data ? t.data : t;\r\n this.setState({token});\r\n this.sendAuthenticationRequest(token, `+${this.props.country.dialCode + this.props.phoneNumber}`, 1, \"loader.authenticationSmsSendTitle\");\r\n }).catch(() => this.props.onClose(false, this.props.phoneNumber));\r\n };\r\n\r\n handleResendVoice = () => {\r\n Analytics.sendClickEvent(\"resend-voice\");\r\n JsonApi.generateAuthenticationToken()\r\n .then((t) => {\r\n var token = t.data ? t.data : t;\r\n this.setState({token});\r\n this.sendAuthenticationRequest(token, `+${this.props.country.dialCode + this.props.phoneNumber}`, 2, 'loader.authenticationCallBackTitle');\r\n }).catch(() => this.props.onClose(false, this.props.phoneNumber));\r\n };\r\n\r\n handleCheckVerificationCode = (e) => {\r\n const authCode = trim(e.target.value).replace(/[^0-9]/g, \"\");\r\n this.setState({authCode});\r\n if (authCode.length === 6) {\r\n this.setState({validating: true}, () => {\r\n JsonApi.validateAuthenticationRequest(this.state.token, authCode, this.props.phoneNumber)\r\n .then((success) => {\r\n if (success.data) {\r\n this.handlePostPhoneNumberUpdated();\r\n Analytics.sendEvent(\"PhoneVerification\", \"Success\");\r\n this.setStep(steps.Verified);\r\n window.setTimeout(() => this.props.onClose(false, this.props.phoneNumber), 3750);\r\n } else\r\n Analytics.sendEvent(\"PhoneVerification\", \"Failure\");\r\n this.setState({valid: false, validating: false}); //, validating: false\r\n });\r\n });\r\n }\r\n };\r\n\r\n handlePostPhoneNumberUpdated = () => {\r\n Analytics.sendClickEvent(\"phone-number-update\");\r\n };\r\n\r\n handleUpdatePhoneNumber = () => {\r\n const {country} = this.props;\r\n var iso2 = country.iso2 || \"US\";\r\n if (misc.isPhoneNumber(this.props.phoneNumber, iso2.toUpperCase())) {\r\n this.handlePostPhoneNumberUpdated();\r\n this.setStep(steps.VerifyPhoneNumber);\r\n this.setState({authCode: \"\"}); // erase previous\r\n this.setOldValues();\r\n this.handleResendSMS();\r\n } else {\r\n this.setState({phoneUpdateError: true});\r\n }\r\n };\r\n\r\n revertUserValues = () => {\r\n this.props.changeUserInfo({\r\n phoneNumber: this.state.oldPhoneNumber,\r\n country: this.state.oldCountry,\r\n }); // set previous values on back click\r\n }\r\n\r\n handleBackClick = () => {\r\n this.revertUserValues(); // set previous values on back click\r\n this.setStep(steps.VerifyPhoneNumber);\r\n }\r\n\r\n getVerifyPhoneNumberContent = () => {\r\n const {intl} = this.props;\r\n const {fabricatorState} = store.getState();\r\n return {\r\n title: intl.formatMessage({id: \"twoFA.title\"}),\r\n content: (\r\n \r\n \r\n this.handleCheckVerificationCode({target: {value: v}})} type=\"numeric\"/>\r\n {!this.state.valid\r\n ? ![\"Validating...\"\r\n](\"/content/views/quickquote-v3/images/icons/loading-spinner-blue.svg\")
\r\n : null}\r\n
\r\n ),\r\n footer: (\r\n \r\n : null}\r\n \r\n \r\n {`+${this.props.country.dialCode} ${this.props.phoneNumber}`}\r\n {/*Please enter it or choose to receive a call with your verification code to unlock.*/}\r\n
\r\n this.setStep(steps.UpdatePhone)}>\r\n \r\n
\r\n \r\n
\r\n {fabricatorState.isLowes ? null : (\r\n this.handleResendSMS()}>
\r\n this.handleResendVoice()}>
\r\n \r\n \r\n
\r\n )}\r\n \r\n
\r\n )\r\n }\r\n };\r\n\r\n getTermsAndConditionsContent = () => {\r\n const {intl} = this.props;\r\n return {\r\n title: intl.formatMessage({id: \"twoFA.termsAndConditions\"}),\r\n content: (\r\n this.setStep(steps.TermsAndConditions)}>
\r\n \r\n
\r\n ),\r\n footer: (\r\n \r\n \r\n
\r\n \r\n
\r\n )\r\n };\r\n };\r\n\r\n getUpdatePhoneContent = () => {\r\n const {intl} = this.props;\r\n return {\r\n title: intl.formatMessage({id: \"twoFA.updatePhoneNumber\"}),\r\n content: (\r\n \r\n
\r\n this.setStep(steps.VerifyPhoneNumber)}>\r\n \r\n
\r\n \r\n
\r\n ),\r\n footer: (\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n {this.state.phoneUpdateError ? (\r\n \r\n \r\n
\r\n ) : null}\r\n \r\n
\r\n )\r\n };\r\n };\r\n\r\n closeButtonClick = () => {\r\n this.revertUserValues();\r\n this.props.onClose(true);\r\n }\r\n\r\n getDialog = () => {\r\n if (this.state.step < steps.Updated) {\r\n let content = this.getDialogContent();\r\n const popupStyles = browserIsSafari() && this.props.windowWidth < 991 ? {height: this.props.windowHeight - 35} : {};\r\n return (\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n );\r\n } else {\r\n return (\r\n \r\n
\r\n {content.content}\r\n {content.footer}\r\n {content.title}
\r\n \r\n X\r\n
\r\n \r\n
\r\n );\r\n }\r\n }\r\n}\r\n\r\nconst mapStateToProps = (store) => {\r\n const {phoneNumber, country} = store.userState.userInfo;\r\n return {\r\n phoneNumber,\r\n country,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n changeUserInfo,\r\n};\r\n\r\nexport default injectIntl(\r\n connect(mapStateToProps, mapDispatchToProps)(TwoFactorAuthClass)\r\n)\r\n","import React, {Component, Fragment} from 'react';\r\nimport {connect} from \"react-redux\";\r\nimport {FormattedMessage, injectIntl} from \"react-intl\";\r\n\r\nimport {\r\n toggleConfirmPopup,\r\n setJobId\r\n} from \"../../actions/actionFunctions\";\r\nimport {\r\n showContractSigning,\r\n setAfterContractSignCallback\r\n} from \"../../actions/contractsActions\";\r\nimport {updateSQFT} from \"../../actions/sqftFunctions\";\r\nimport {ConfirmPopupTypes, QuoteRequestType, SqftUpdateTypes, UserAction} from \"../visComponents/constants\";\r\nimport {setUserLoginResponse, userLogin, userRegister} from \"../../api/user-api\";\r\nimport Analytics from './../../analytics';\r\nimport WithCloseSQFtCalc from \"../sqft/hocs/withCloseSQFtCalc\";\r\nimport workspace from \"../sqft/components/canvas/core/workspace\";\r\nimport WithOverlay from \"./withOverlayHoc\";\r\nimport {setAssignQuotePopupCustomer} from \"../../actions/assignPopupFunctions\";\r\nimport {setAlreadyRegisteredUserInfo} from \"../../actions/userFunctions\";\r\nimport {loaderEnable} from \"../ui/loaderView\";\r\nimport {renderConfirmPopup} from \"../../api/api-popups\";\r\nimport {ROUTES} from \"../../routes\";\r\n\r\nclass ConfirmPopup extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n this.state = {};\r\n }\r\n\r\n componentWillReceiveProps(nextProps) {\r\n if (nextProps.applyPopupOpened && !this.props.applyPopupOpened) {\r\n document.body.classList.add('body--apply-popup');\r\n }\r\n }\r\n\r\n handleApply = (confirm, hideOverlay, closeSQFtCalc) => {\r\n // Analytics.sendClickEvent('confirm-popup-apply-' + (confirm ? 'yes': 'no'));\r\n hideOverlay(this.closePopup);\r\n document.body.classList.remove('body--apply-popup');\r\n const {confirmPopupType, confirmPopupTag} = this.props;\r\n switch (confirmPopupType) {\r\n case ConfirmPopupTypes.ConsultationRequest: {\r\n const data = {\r\n yesNoConsultationRequest: confirm,\r\n userPopupType: confirmPopupTag.userPopupType,\r\n fromConfirmationDialog: true,\r\n quoteRequestType: QuoteRequestType.RequestConsultation\r\n };\r\n confirm\r\n ? Analytics.sendClickEvent('design-consultation-yes')\r\n : Analytics.sendClickEvent('design-consultation-no');\r\n switch (confirmPopupTag.userAction) {\r\n case UserAction.Login:\r\n userLogin(data);\r\n break;\r\n case UserAction.Register:\r\n userRegister(data)\r\n break;\r\n }\r\n break;\r\n }\r\n case ConfirmPopupTypes.SqftResetChanges: {\r\n if (confirm) {\r\n this.props.updateSQFT(SqftUpdateTypes.Reset);\r\n closeSQFtCalc(false);\r\n workspace.removeAllShapes();\r\n workspace.textBoxManager.removeAllTextBoxes();\r\n workspace.removeAllSlabImages();\r\n setTimeout(() => {\r\n this.props.updateSQFT(null);\r\n }, 0)\r\n }\r\n break;\r\n }\r\n case ConfirmPopupTypes.SqftUpdateQuestion: {\r\n if (confirm) {\r\n this.props.updateSQFT(SqftUpdateTypes.UpdateData);\r\n setTimeout(() => {\r\n this.props.updateSQFT(null);\r\n }, 0)\r\n }\r\n break;\r\n }\r\n case ConfirmPopupTypes.AssignQuoteOnExistingUser: {\r\n if (confirm) {\r\n const {alreadyRegisteredUserInfo} = this.props;\r\n Analytics.sendClickEvent('confirm-assign-quote-on-existing-user');\r\n if (window.location.hash.includes(ROUTES.contract)) {\r\n // this.props.showContractSigning(false, () => {}); // why close contract?\r\n if (this.props.afterContractSignCallback) {\r\n this.props.setAfterContractSignCallback(null);\r\n }\r\n }\r\n if (alreadyRegisteredUserInfo.assignQuote) {\r\n this.props.setAssignQuotePopupCustomer({ // clear current selected customer\r\n id: alreadyRegisteredUserInfo.userId,\r\n email: alreadyRegisteredUserInfo.email,\r\n fullName: alreadyRegisteredUserInfo.values.firstName + (alreadyRegisteredUserInfo.values.lastName ? \" \" + alreadyRegisteredUserInfo.values.lastName : \"\"),\r\n });\r\n this.props.setAlreadyRegisteredUserInfo({confirmedAssign: true}); // trigger assign quote button\r\n } else {\r\n loaderEnable();\r\n setUserLoginResponse(alreadyRegisteredUserInfo, true);\r\n }\r\n }\r\n if (confirmPopupTag.applyFunction) {\r\n confirmPopupTag.applyFunction();\r\n }\r\n break;\r\n }\r\n case ConfirmPopupTypes.DeleteCartItemsPopup: {\r\n if (confirm) {\r\n renderConfirmPopup(0, {allowDelete: true}, false); // clear tag\r\n }\r\n break;\r\n }\r\n // case ConfirmPopupTypes.ChangeWizardToPreviousStepSelection:\r\n // case ConfirmPopupTypes.ReplaceRoomWhenItExistsInCartButWeAddNew: {\r\n // break;\r\n // }\r\n default: {\r\n if (confirm) {\r\n if (confirmPopupTag.applyFunction) {\r\n confirmPopupTag.applyFunction();\r\n }\r\n } else if (confirmPopupTag.declineFunction) {\r\n confirmPopupTag.declineFunction()\r\n }\r\n renderConfirmPopup(0, {}, false); // clear tag\r\n break;\r\n }\r\n }\r\n };\r\n\r\n getConfirmMessage = () => {\r\n const {intl, confirmPopupType, confirmPopupTag} = this.props;\r\n switch (confirmPopupType) {\r\n case ConfirmPopupTypes.ConsultationRequest:\r\n return intl.formatMessage({id: \"confirmPopup.consultationRequest\"});\r\n case ConfirmPopupTypes.SqftResetChanges:\r\n return intl.formatMessage({id: \"confirmPopup.sqftResetChanges\"});\r\n case ConfirmPopupTypes.SqftUpdateQuestion:\r\n return intl.formatMessage({id: \"confirmPopup.sqftUpdateQuestion\"});\r\n case ConfirmPopupTypes.DeleteCartItemsPopup:\r\n return intl.formatMessage({id: confirmPopupTag.fromDelete ? \"confirmPopup.deleteCartItems2\" : \"confirmPopup.deleteCartItems\"});\r\n case ConfirmPopupTypes.ChangeWizardToPreviousStepSelection:\r\n return intl.formatMessage({id: \"confirmPopup.deleteCartItemsWizard\"});\r\n case ConfirmPopupTypes.ReplaceRoomWhenItExistsInCartButWeAddNew:\r\n return intl.formatMessage({id: \"confirmPopup.replaceRoomWhenItExistsInCartButWeAddNew\"});\r\n case ConfirmPopupTypes.AssignQuoteOnExistingUser: {\r\n const {alreadyRegisteredUserInfo} = this.props;\r\n return (\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n ) : null}\r\n {alreadyRegisteredUserInfo.values.firstName + (alreadyRegisteredUserInfo.values.lastName ? \" \" + alreadyRegisteredUserInfo.values.lastName : \"\")}
\r\n{alreadyRegisteredUserInfo.email}
\r\n\r\n {/*
\r\n )}\r\n */}\r\n {/*
*/}\r\n Would you like to add any visualized items to your cart?
*/}\r\n {/*\r\n {this.getConfirmMessage()}\r\n
\r\n \r\n \r\n \r\n {(closeSQFtCalc) => (\r\n \r\n )}\r\n \r\n
\r\n \r\n//
\r\n// );\r\n\r\nclass MobileRotateButton extends Component {\r\n\r\n getIcon = () => {\r\n if (this.props.fabricatorData.isAmericanStandard) {\r\n return AmericanStandardIcon\r\n }\r\n return groheIcon\r\n }\r\n\r\n getLogo = () => {\r\n switch (true) {\r\n case this.props.fabricatorData.isRebath:\r\n return `${baseNewImagesPath}images/Logos/rebath-logo.svg`\r\n case this.props.fabricatorData.isRona:\r\n return `https://qc-cdn.s3.amazonaws.com/Logos/rona.png`\r\n case this.props.fabricatorData.isRenoDepot:\r\n return `https://qc-cdn.s3.amazonaws.com/Logos/reno-depot.png`\r\n case this.props.fabricatorData.isLowes:\r\n return `${baseNewImagesPath}images/Logos/Lowes-Color-Logo.svg`\r\n case this.props.fabricatorData.isCaesarStone:\r\n return `${baseNewImagesPath}images/Logos/csconnect2.png`\r\n default:\r\n // return `${baseNewImagesPath}images/Logos/quote-logo-stacked.svg`\r\n return `${baseNewImagesPath}images/Logos/Quote-Kitchen-and-Bath.svg`\r\n }\r\n };\r\n\r\n render() {\r\n\r\n const {isRebath, isLowes, isRona, isRenoDepot, isAmericanStandard, isLixil} = this.props.fabricatorData;\r\n\r\n return isFacebook || isInstagram\r\n ? null : (\r\n \r\n// Click HERE to open this tool in another browser\r\n//
\r\n// \r\n// Facebook doesn’t support this visualizer in the Facebook app.\r\n//
\r\n// \r\n// 
\r\n//
\r\n// \r\n//
\r\n// OR
\r\n//Copy the following link into your browser:
\r\n//{window.location.href.split(window.location.search)[0]}
\r\n//\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = (store) => ({\r\n fabricatorData: store.fabricatorState\r\n});\r\nexport default connect(mapStateToProps)(MobileRotateButton);\r\n","import React from \"react\";\r\nimport {injectIntl} from \"react-intl\";\r\nimport {connect} from \"react-redux\";\r\n\r\nimport {setAssignQuotePopupSearchText} from \"../../../actions/assignPopupFunctions\";\r\n\r\nconst AssignQuotePopupSearch = (props) => {\r\n\r\n const {setAssignQuotePopupSearchText, assignQuotePopupSearchText, intl} = props;\r\n\r\n const handleSearchInputChange = (event) => {\r\n setAssignQuotePopupSearchText(event.target.value)\r\n };\r\n\r\n const searchText = assignQuotePopupSearchText;\r\n\r\n return (\r\n \r\n {isLixil ? this.getIcon() : }/)
}\r\n
\r\n \r\n
\r\n 12 ? \" search-input--with-close\" : \"\")}\r\n value={searchText}\r\n onChange={handleSearchInputChange}\r\n placeholder={intl.formatMessage({id: \"mobileMenu.searchPlaceholder\"})}\r\n />\r\n \r\n {searchText ?
\r\n )\r\n};\r\n\r\nconst mapStateToProps = (store) => {\r\n return {\r\n assignQuotePopupSearchText: store.assignQuoteState.assignQuotePopupSearchText\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n setAssignQuotePopupSearchText\r\n};\r\n\r\nexport default injectIntl(\r\n connect(mapStateToProps, mapDispatchToProps)(AssignQuotePopupSearch)\r\n)\r\n","import React, {useEffect, useState} from \"react\";\r\nimport {FormattedMessage, injectIntl} from \"react-intl\";\r\nimport PropTypes from \"prop-types\";\r\nimport {List} from \"react-virtualized\";\r\n\r\nimport {customerInterface, employeeInterface} from \"./assignQuoteInterfaces\";\r\nimport {usePrevious} from \"../../../misc/helperHooks\";\r\nimport UiIcon from \"../../ui/icons/uiIcon\";\r\n// import LoadingSpinner from \"../../ui/loadingSpinner\";\r\n\r\nconst AssignQuoteVirtualizedList = (props) => {\r\n\r\n const {renderList, selectEntity, activeEntity, noEntitiesFound, title, contentDimensions, errorMessage,\r\n hideEmployeesColumn} = props;\r\n const [scrollToIndex, setScrollToIndex] = useState(0);\r\n const prevEntity = usePrevious(activeEntity);\r\n\r\n useEffect(() => {\r\n if (activeEntity && !prevEntity) {\r\n let scrollToIn = renderList.findIndex(item => item.id === activeEntity.id)\r\n if (scrollToIn > -1) {\r\n setScrollToIndex(scrollToIn + 3);\r\n }\r\n }\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [activeEntity]);\r\n\r\n const listWidth = contentDimensions && contentDimensions.width\r\n ? hideEmployeesColumn\r\n ? contentDimensions.width - 10\r\n : (contentDimensions.width / 2) - 10\r\n : 320; // 10 is padding\r\n const listHeight = contentDimensions && contentDimensions.height ? contentDimensions.height - 15 : 245; // 15 is title\r\n\r\n const listSettings = {\r\n width: listWidth,\r\n height: listHeight,\r\n rowHeight: 40,\r\n overscanRowCount: 6,\r\n rowCount: renderList.length,\r\n showScrollingPlaceholder: false,\r\n useDynamicRowHeight: false,\r\n }\r\n\r\n const rowRenderer = ({index, key, style}) => {\r\n const customer = renderList[index];\r\n return (\r\n selectEntity(customer)}>\r\n
\r\n selectEntity(customer)}>\r\n {customer.fullName} {customer.email ? ({customer.email}) : null}\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n )\r\n};\r\n\r\nAssignQuoteVirtualizedList.propTypes = {\r\n renderList: PropTypes.array.isRequired,\r\n selectEntity: PropTypes.func.isRequired,\r\n activeEntity: PropTypes.oneOfType([\r\n PropTypes.shape(customerInterface),\r\n PropTypes.shape(employeeInterface)\r\n ]),\r\n title: PropTypes.string.isRequired,\r\n errorMessage: PropTypes.string,\r\n noEntitiesFound: PropTypes.string.isRequired,\r\n contentDimensions: PropTypes.shape({\r\n width: PropTypes.number,\r\n height: PropTypes.number,\r\n }),\r\n}\r\n\r\nexport default injectIntl(AssignQuoteVirtualizedList)\r\n","import React, {useEffect, useRef} from \"react\";\r\nimport {connect} from \"react-redux\";\r\nimport SqftFeaturesPopup from \"./sqftFeaturesPopup\";\r\nimport eventManager from \"../../sqft/components/canvas/store/sqftEventManager\";\r\nimport {changeSqftFeaturesPopup} from \"../../../actions/sqftFunctions\";\r\n\r\nconst SqftFeaturesPopupWrapper = (props) => {\r\n const { sqftFeaturesPopup, changeSqftFeaturesPopup } = props;\r\n const isOpened = sqftFeaturesPopup.opened;\r\n const wrapperRef = useRef(null);\r\n\r\n useEffect(() => {\r\n const closePopup = () => {\r\n changeSqftFeaturesPopup({ opened: false, sqftPassedData: null });\r\n };\r\n\r\n const handleClickOutside = (event) => {\r\n if (wrapperRef.current && !wrapperRef.current.contains(event.target)) {\r\n closePopup();\r\n }\r\n };\r\n\r\n if (isOpened) {\r\n document.addEventListener(\"mousedown\", handleClickOutside);\r\n eventManager.addEvent(\r\n eventManager.events.MOUSE_DOWN,\r\n closePopup,\r\n { name: \"popupWrapper\" },\r\n eventManager.priorities.OVERALL\r\n );\r\n }\r\n\r\n return () => {\r\n document.removeEventListener(\"mousedown\", handleClickOutside);\r\n };\r\n }, [wrapperRef, isOpened, changeSqftFeaturesPopup]);\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nconst mapStateToProps = (store) => {\r\n const {sqftFeaturesPopup, sqftFromFeature} = store.sqftState;\r\n return {\r\n sqftFeaturesPopup,\r\n sqftFromFeature,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n changeSqftFeaturesPopup\r\n};\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(SqftFeaturesPopupWrapper);\r\n","import React from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport PropTypes from \"prop-types\";\r\n\r\nimport FilterListIcon from '@mui/icons-material/FilterList';\r\nimport InfoIcon from \"@mui/icons-material/Info\";\r\nimport IconButton from \"@mui/material/IconButton\";\r\n\r\nimport {getFilterValueThumbnailAndStyles} from \"../../look/lookNavigation/lookMain/lookWizard/lookWizardFunctions\";\r\nimport {getFeatureGroupIconStyles, getFeatureGroupIconURL} from \"../../bvComponent/core/assets\";\r\nimport {wizardGroupInterface, wizardSelectedValueInterface} from \"../../../interfaces/wizardItemInterface\";\r\nimport {featureGroupInterface} from \"../../../interfaces/featureInterface\";\r\n\r\n\r\nconst MaterialsWizardFooterStepThumbnail = (props) => {\r\n\r\n const {wizardGroup, wizardSelectedValue, allFilterGroups, isMobile, activeTheme, featureGroup} = props;\r\n\r\n let selectedFilter = wizardSelectedValue ? wizardSelectedValue.selectedFilter : null;\r\n\r\n // const notSelected = !wizardSelectedValue || !(Object.keys(wizardSelectedValue).length)\r\n // || (!selectedFeature && !selectedFilter);\r\n //\r\n // if (notSelected) {\r\n // const featureGroup = wizardGroup ? getFeatureGroupFromWizardGroup(wizardGroup) : null;\r\n // return \r\n //
\r\n // }\r\n\r\n if (wizardGroup && selectedFilter && wizardGroup.nodeType === \"filter\") {\r\n if (isMobile) {\r\n return (\r\n \r\n \r\n \r\n
\r\n )\r\n }\r\n const filterGroup = allFilterGroups.find(group => group.id === selectedFilter.filterGroup_id);\r\n const {styles} = getFilterValueThumbnailAndStyles(selectedFilter, filterGroup || {});\r\n return \r\n } else if (wizardGroup) {\r\n return (\r\n \r\n )\r\n }\r\n\r\n // just in case\r\n return (\r\n
\r\n {isMobile\r\n ? \r\n {(handleAddToQuoteClick) => (\r\n \r\n )}\r\n \r\n )\r\n};\r\n\r\nconst mapStateToProps = (store) => ({\r\n measureUnit: store.sqftState.measureUnit,\r\n showManualCalculation: store.sqftManualCalculationState.showManualCalculation,\r\n quotes: store.quotesState.quotes,\r\n cartItems: store.cartState.cartItems,\r\n selectionFeatureInfo: store.selectionState.selectionFeatureInfo,\r\n activeQuoteIndex: store.quotesState.activeQuoteIndex,\r\n sqftVisited: store.sqftState.sqftFeaturesPopup.visited,\r\n isSlabToolVisited: store.sqftSlabState.isSlabToolVisited,\r\n useSqftCartPopup: store.sqftState.sqftFeaturesPopup.enabled,\r\n cameFromPage: store.cartState.cameFromPage\r\n});\r\n\r\nconst mapDispatchToProps = {\r\n setQuotes,\r\n setSquareFeet,\r\n setMaterialsPageSubSteps,\r\n changeSqftFeaturesPopup,\r\n toggleSelectionFeatureInfo,\r\n setCameFromPage,\r\n changeCartItemQuantity,\r\n changeSelectionInfoQuantity,\r\n setSqftMeasureUnit,\r\n};\r\n\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(SqftFooterAddToQuoteButton);\r\n","import React from 'react';\r\nimport {connect} from \"react-redux\";\r\nimport {FormattedMessage} from \"react-intl\";\r\nimport {setCameFromPage, toggleConfirmPopup, toggleSelectionFeatureInfo} from \"../../../actions/actionFunctions\";\r\nimport WithSqftFooterCancel from \"../hocs/withSqftFooterCancel\";\r\n\r\nconst SqftFooterCancelButton = (props) => {\r\n\r\n return (\r\n \r\n {(handleCloseSQFtCalc) => (\r\n \r\n )}\r\n \r\n )\r\n};\r\n\r\nconst mapStateToProps = (store) => ({\r\n cameFromPage: store.cartState.cameFromPage,\r\n showManualCalculation: store.sqftManualCalculationState.showManualCalculation,\r\n});\r\n\r\nconst mapDispatchToProps = {\r\n toggleConfirmPopup,\r\n toggleSelectionFeatureInfo,\r\n setCameFromPage\r\n};\r\n\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(SqftFooterCancelButton);\r\n","import {connect} from \"react-redux\";\r\nimport {manualCalculationsCheckForChangesApplied} from \"../helpers/sqftCalculations\";\r\nimport {ConfirmPopupTypes} from \"../../visComponents/constants\";\r\nimport {setCameFromPage, toggleConfirmPopup, toggleSelectionFeatureInfo} from \"../../../actions/actionFunctions\";\r\nimport {setSqftFromFeature} from \"../../../actions/sqftFunctions\";\r\nimport {withRouter} from \"react-router-dom\";\r\n\r\nimport workspaceHistory from \"../components/canvas/core/workspaceHistory\";\r\nimport {useCloseSQFTCalc} from \"./useCloseSQFTCalc\";\r\nimport {enableRegularMode} from \"../components/canvas/store/canvasHelper\";\r\nimport {clearAllMenusEvents} from \"../components/canvas/core/workspace/workspaceEvents\";\r\nimport {showSlabTool} from \"../../../actions/sqftSlabFunctions\";\r\n\r\nconst WithSqftFooterCancel = (props) => {\r\n const {showManualCalculation, toggleConfirmPopup, showSlabTool} = props;\r\n const {children} = props;\r\n const {closeSQFTCalc} = useCloseSQFTCalc();\r\n\r\n const handleCancelClick = () => {\r\n if (showManualCalculation) {\r\n manualCalculationsCheckForChangesApplied() ? callResetDataPopup() : closeSQFTCalc(false);\r\n } else {\r\n showSlabTool(false);\r\n enableRegularMode();\r\n clearAllMenusEvents();\r\n workspaceHistory.checkForChangesApplied() ? callResetDataPopup() : closeSQFTCalc(false);\r\n }\r\n };\r\n\r\n const callResetDataPopup = () => {\r\n toggleConfirmPopup(true, ConfirmPopupTypes.SqftResetChanges);\r\n };\r\n\r\n return children(handleCancelClick);\r\n};\r\n\r\nconst mapStateToProps = (store) => ({\r\n cameFromPage: store.cartState.cameFromPage,\r\n showManualCalculation: store.sqftManualCalculationState.showManualCalculation,\r\n activePreset: store.bathroomVisualizerState.activePreset,\r\n bvPresets: store.bathroomVisualizerState.bvPresets,\r\n});\r\n\r\nconst mapDispatchToProps = {\r\n toggleConfirmPopup,\r\n toggleSelectionFeatureInfo,\r\n setCameFromPage,\r\n setSqftFromFeature,\r\n showSlabTool,\r\n};\r\n\r\nexport default withRouter(\r\n connect(mapStateToProps, mapDispatchToProps)(WithSqftFooterCancel)\r\n);\r\n","import React from 'react'\r\nimport {connect} from \"react-redux\";\r\nimport {setSQFTActiveButton} from \"../../../../actions/sqftMenuFunctions\";\r\nimport {setSqftMeasureUnit} from \"../../../../actions/sqftFunctions\";\r\nimport PropTypes from \"prop-types\";\r\nimport {FormattedMessage} from \"react-intl\";\r\n\r\nconst SqftPopupWindow = (props) => {\r\n const {title, content, isOpened} = props;\r\n const {confirmCallback, confirmText, cancelCallback, cancelText} = props;\r\n\r\n return (\r\n
}\r\n
\r\n )\r\n\r\n};\r\n\r\nMaterialsWizardFooterStepThumbnail.propTypes = {\r\n wizardGroup: PropTypes.shape(wizardGroupInterface),\r\n featureGroup: PropTypes.shape(featureGroupInterface),\r\n wizardSelectedValue: PropTypes.shape(wizardSelectedValueInterface),\r\n}\r\n\r\nconst mapStateToProps = (store) => {\r\n const {filterGroups} = store.filterState;\r\n const {activeTheme} = store.serverState;\r\n\r\n return {\r\n allFilterGroups: filterGroups,\r\n activeTheme,\r\n };\r\n};\r\n\r\nexport default connect(mapStateToProps)(MaterialsWizardFooterStepThumbnail)\r\n","import React from 'react';\r\nimport {injectIntl} from \"react-intl\";\r\nimport {connect} from \"react-redux\";\r\n\r\nimport { polyfill } from 'es6-promise';\r\npolyfill();\r\nimport \"./polyfills/object.dataset\";\r\nimport \"./polyfills/string.includes\";\r\nimport \"./polyfills/string.startsWith\";\r\nimport \"./polyfills/jquery.preBind\";\r\nimport \"./polyfills/arrayMethods\";\r\nimport \"./polyfills/objectMethods\";\r\nimport \"./polyfills/numberMethods\";\r\nimport \"./lib/wrapText\";\r\nimport \"./lib/fraction\";\r\n//import {getNonce} from \"../../misc/utils\";\r\n\r\nimport SqftFooter from \"./components/sqftFooter\";\r\nimport SqftIcons from \"./components/SqftIcons\";\r\nimport ChangeLayoutPopup from \"../popups/changeLayoutPopup\";\r\nimport SqftManualCalculateWindow from \"./components/manualCalculate/SqftManualCalculateWindow\";\r\nimport SqftNavSettingsWindow from \"./components/popup/SqftNavSettingsWindow\";\r\nimport SqftTutorial from \"./components/popup/SqftTutorial\";\r\n// import SqftCabinetsTutorial from \"./components/popup/SqftCabinetsTutorial\";\r\nimport SqftSystemMessage from \"./components/popup/SqftSystemMessage\";\r\nimport AR3DPopup from \"./components/popup/AR3DPopup\";\r\nimport ValidationPopupWindow from \"./components/popup/ValidationPopupWindow\";\r\nimport SqftSystemDeleteMessage from \"./components/popup/SqftSystemDeleteMessage\";\r\nimport SqftLoadSlabWindow from \"./components/slab/SqftLoadSlabWindow\";\r\nimport SqftPopupWindow from \"./components/popup/SqftPopupWindow\";\r\nimport SqftLabelsContextMenuCategorySwitching\r\n from \"./components/canvas/core/controls/labels/sqftLabelsContextMenuCategorySwitching\";\r\nimport SqftLabelsContextMenu from \"./components/canvas/core/controls/labels/sqftLabelsContextMenu\";\r\nimport {\r\n setIsRoomSwitcherVisible,\r\n setSQFTActiveRoomId,\r\n setSQFTActiveRoomIndex,\r\n setSQFTActiveRoomType\r\n} from \"../../actions/sqftMenuFunctions\";\r\nimport SqftContextMenuV2 from \"./components/popup/SqftContextMenuV2\";\r\nimport ChangeValuePopupWindow from \"./components/popup/ChangeValuePopupWindow\";\r\nimport NavigationSidebar from \"./components/navigation/NavigationSidebar\";\r\nimport useUpdateSqftConfig from \"./hocs/onLoad/useUpdateSqftConfig\";\r\nimport useAddDeviceClass from \"./hocs/onLoad/useAddDeviceClass\";\r\n//import useImportSQFTData from \"./hocs/onLoad/useImportSQFTData\";\r\nimport useToggleRoomsSwitcher from \"./hocs/onLoad/useToggleRoomsSwitcher\";\r\nimport useOpenSQFTMenu from \"./hocs/onLoad/useOpenSQFTMenu\";\r\nimport useCheckWizardActiveItem from \"./hocs/onLoad/useCheckWizardActiveItem\";\r\nimport useResetState from \"./hocs/onLoad/useResetState\";\r\nimport SqftHeader from \"./components/header/SqftHeader\";\r\nimport useUpdateCabinetFeatures from \"./hocs/onLoad/useUpdateCabinetFeatures\";\r\nimport SquareFootageToolViewWorkspace from \"./squareFootageToolViewWorkspace\";\r\n//import NavigationSidebarRight from \"./components/navigation/NavigationSidebarRight\";\r\n//import useSetDefaultCabinetViewMode from \"./hocs/onLoad/useSetDefaultCabinetViewMode\";\r\n\r\nconst SquareFootageToolView = (props) => {\r\n const {visualizersLoaded} = props;\r\n const {cartItems, sqftPopup, fabricatorSettings,\r\n setSQFTActiveRoomIndex, setSQFTActiveRoomType, setSQFTActiveRoomId, activeQuoteIndex,\r\n setIsRoomSwitcherVisible, contextMenuV2, quotes, changeValuePopups, validationPopups, isSquareFootageEnabled} = props;\r\n\r\n useResetState();\r\n useUpdateSqftConfig();\r\n useAddDeviceClass();\r\n useToggleRoomsSwitcher( visualizersLoaded, fabricatorSettings, setIsRoomSwitcherVisible, quotes, setSQFTActiveRoomId,\r\n setSQFTActiveRoomIndex, setSQFTActiveRoomType, cartItems, activeQuoteIndex, isSquareFootageEnabled\r\n );\r\n //useSQFTRouting();\r\n //useSetDefaultCabinetViewMode(); //we assume is already in 2d\r\n useUpdateCabinetFeatures();\r\n\r\n useOpenSQFTMenu();\r\n useCheckWizardActiveItem();\r\n\r\n return (\r\n \r\n
\r\n )\r\n};\r\n\r\nconst mapStateToProps = (store) => {\r\n const {sqftFeaturesPopup} = store.sqftState;\r\n\r\n return {\r\n quotes: store.quotesState.quotes,\r\n fabricatorData: store.fabricatorState,\r\n sqftVisited: sqftFeaturesPopup.visited,\r\n sqftPopup: store.sqftMenuState.sqftPopup,\r\n activeButton: store.sqftMenuState.activeButton,\r\n contextMenuV2: store.sqftMenuState.contextMenuV2,\r\n isMobile: store.serverState.isMobile,\r\n cartItems: store.cartState.cartItems,\r\n windowWidth: store.serverState.windowWidth,\r\n visualizersLoaded: store.serverState.visualizersLoaded,\r\n isShowSlabTool: store.sqftSlabState.isShowSlabTool,\r\n fabricatorSettings: store.fabricatorState.settings,\r\n activeQuoteIndex: store.quotesState.activeQuoteIndex,\r\n changeValuePopups: store.sqftMenuState.changeValuePopups,\r\n validationPopups: store.sqftMenuState.validationPopups,\r\n isSquareFootageEnabled: store.sqftState.isSquareFootageEnabled,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n setSQFTActiveRoomId,\r\n setSQFTActiveRoomIndex,\r\n setSQFTActiveRoomType,\r\n setIsRoomSwitcherVisible,\r\n};\r\n\r\nexport default injectIntl(\r\n connect(mapStateToProps, mapDispatchToProps)(SquareFootageToolView)\r\n);\r\n","import React from 'react';\r\nimport {connect} from \"react-redux\";\r\nimport {FormattedMessage} from \"react-intl\";\r\nimport {setQuotes} from \"../../../actions/roomsFunctions\";\r\nimport {changeSqftFeaturesPopup, setSqftMeasureUnit, setSquareFeet} from \"../../../actions/sqftFunctions\";\r\nimport {setMaterialsPageSubSteps} from \"../../../actions/selectionFunctions\";\r\nimport {\r\n changeCartItemQuantity,\r\n changeSelectionInfoQuantity,\r\n setCameFromPage,\r\n toggleSelectionFeatureInfo\r\n} from \"../../../actions/actionFunctions\";\r\nimport WithAddToQuote from \"../hocs/withAddToQuote\";\r\n\r\nconst SqftFooterAddToQuoteButton = (props) => {\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n {\r\n visualizersLoaded.length ?
\r\n \r\n
\r\n \r\n
\r\n )\r\n};\r\n\r\nSqftPopupWindow.propTypes = {\r\n title: PropTypes.oneOfType([\r\n PropTypes.string,\r\n PropTypes.object,\r\n PropTypes.instanceOf(FormattedMessage)\r\n ]),\r\n content: PropTypes.oneOfType([\r\n PropTypes.string,\r\n PropTypes.object,\r\n PropTypes.instanceOf(FormattedMessage)\r\n ]),\r\n isOpened: PropTypes.bool,\r\n confirmCallback: PropTypes.func,\r\n confirmText: PropTypes.oneOfType([\r\n PropTypes.string,\r\n PropTypes.object,\r\n PropTypes.instanceOf(FormattedMessage)\r\n ]),\r\n cancelCallback: PropTypes.func,\r\n cancelText: PropTypes.oneOfType([\r\n PropTypes.string,\r\n PropTypes.object,\r\n PropTypes.instanceOf(FormattedMessage)\r\n ]),\r\n};\r\n\r\nconst mapStateToProps = (store) => ({\r\n activeButton: store.sqftMenuState.activeButton,\r\n measureUnit: store.sqftState.measureUnit,\r\n});\r\n\r\nconst mapDispatchToProps = {\r\n setSQFTActiveButton,\r\n setSqftMeasureUnit\r\n};\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(SqftPopupWindow);\r\n","import point from \"../point\";\r\nimport line from \"../line\";\r\n\r\nconst Square = (size, isIsland = false) => {\r\n let points = isIsland ? [\r\n new point(0, 15, \"lefttop\"),\r\n new point(65, 15, \"righttop\"),\r\n new point(65, 80, \"rightbottom\"),\r\n new point(0, 80, \"leftbottom\")\r\n ] : [\r\n new point(0, 0, \"lefttop\"),\r\n new point(65, 0, \"righttop\"),\r\n new point(65, 65, \"rightbottom\"),\r\n new point(0, 65, \"leftbottom\")\r\n ];\r\n\r\n return [\r\n new line(points[0], points[1]),\r\n new line(points[1], points[2]),\r\n new line(points[2], points[3]),\r\n new line(points[3], points[0])\r\n ];\r\n};\r\n\r\nexport default Square\r\n","import point from \"../point\";\r\nimport line from \"../line\";\r\nimport config from \"../../../store/sqftConfig\";\r\n\r\nconst wideAngle = function() {\r\n let points;\r\n if(config.measureUnit === \"Metric\" ) {\r\n points = [\r\n new point(-13.62, -10, \"lefttop\"),\r\n new point(134, -10, \"righttop\"),\r\n new point(134, 13.62, \"rightbottom\"),\r\n new point(10, 13.62, \"rightbottom\", true),\r\n new point(10, 114, \"rightbottom\"),\r\n new point(-13.62, 114, \"leftbottom\")\r\n ];\r\n } else {\r\n points = [\r\n new point(-16, -10, \"lefttop\"),\r\n new point(134, -10, \"righttop\"),\r\n new point(134, 16, \"rightbottom\"),\r\n new point(10, 16, \"rightbottom\", true),\r\n new point(10, 114, \"rightbottom\"),\r\n new point(-16, 114, \"leftbottom\")\r\n ];\r\n }\r\n\r\n let lines = [\r\n new line(points[0], points[1]),\r\n new line(points[1], points[2]),\r\n new line(points[2], points[3]),\r\n new line(points[3], points[4]),\r\n new line(points[4], points[5]),\r\n new line(points[5], points[0])\r\n ];\r\n\r\n return lines;\r\n};\r\n\r\nexport default wideAngle\r\n","import point from \"../point\";\r\nimport line from \"../line\";\r\nimport config from \"../../../store/sqftConfig\";\r\n\r\nconst horseshoe = function() {\r\n let points;\r\n if(config.measureUnit === \"Metric\" ) {\r\n points = [\r\n new point(0, -20, \"lefttop\"),\r\n new point(181, -20, \"righttop\"),\r\n new point(181, 80, \"rightbottom\"),\r\n new point(157.38, 80, \"leftbottom\"),\r\n new point(157.38, 3.62, \"leftbottom\", true),\r\n new point(23.62, 3.62, \"rightbottom\", true),\r\n new point(23.62, 80, \"rightbottom\"),\r\n new point(0, 80, \"leftbottom\")\r\n ];\r\n } else {\r\n points = [\r\n new point(0, -20, \"lefttop\"),\r\n new point(181, -20, \"righttop\"),\r\n new point(181, 80, \"rightbottom\"),\r\n new point(155, 80, \"leftbottom\"),\r\n new point(155, 6, \"leftbottom\", true),\r\n new point(26, 6, \"rightbottom\", true),\r\n new point(26, 80, \"rightbottom\"),\r\n new point(0, 80, \"leftbottom\")\r\n ];\r\n }\r\n\r\n let lines = [\r\n new line(points[0], points[1]),\r\n new line(points[1], points[2]),\r\n new line(points[2], points[3]),\r\n new line(points[3], points[4]),\r\n new line(points[4], points[5]),\r\n new line(points[5], points[6]),\r\n new line(points[6], points[7]),\r\n new line(points[7], points[0])\r\n ];\r\n\r\n return lines;\r\n};\r\n\r\nexport default horseshoe\r\n","import React, {useEffect} from 'react';\r\nimport { connect } from \"react-redux\";\r\nimport {FormattedMessage} from \"react-intl\";\r\nimport {setSwitcherPosition, toggleShowManualCalculation} from \"../../../../../actions/sqftManualCalculationFunctions\";\r\nimport PropTypes from \"prop-types\";\r\n\r\nconst ManualCalculateSwitcher = (props) => {\r\n const {overlay, setSwitcherPosition, switcherPosition, showManualCalculation, toggleShowManualCalculation, isMobile,\r\n sideBarButtons} = props;\r\n\r\n const handleButtonClick = () => {\r\n // changeStateToQuote();\r\n toggleShowManualCalculation(!showManualCalculation);\r\n };\r\n\r\n useEffect(() => {\r\n if (!overlay) {\r\n const elem = document.getElementById(\"manual-switcher\");\r\n const rect = elem.getBoundingClientRect();\r\n setSwitcherPosition({rect})\r\n }\r\n }, [overlay, sideBarButtons, setSwitcherPosition]);\r\n\r\n const blockStyle = {\r\n left: overlay ? switcherPosition.rect.left : ''\r\n }\r\n isMobile\r\n ? blockStyle.bottom = overlay ? '13px' : ''\r\n : blockStyle.top = overlay ? switcherPosition.rect.top : ''\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n {title}\r\n
\r\n \r\n \r\n {content}\r\n
\r\n \r\n {\r\n cancelText ?\r\n \r\n : null\r\n }\r\n {\r\n confirmText ?\r\n \r\n : null\r\n }\r\n
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n )\r\n};\r\n\r\nManualCalculateSwitcher.propTypes = {\r\n overlay: PropTypes.bool,\r\n sideBarButtons: PropTypes.array,\r\n};\r\n\r\nconst mapStateToProps = (store) => ({\r\n showManualCalculation: store.sqftManualCalculationState.showManualCalculation,\r\n switcherPosition: store.sqftManualCalculationState.switcherPosition,\r\n isMobile: store.serverState.isMobile,\r\n});\r\n\r\nconst mapDispatchToProps = {\r\n toggleShowManualCalculation,\r\n setSwitcherPosition,\r\n};\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(ManualCalculateSwitcher);\r\n","// ExportButton.js\r\nimport React from 'react';\r\nimport {GLTFExporter} from \"three/examples/jsm/exporters/GLTFExporter\";\r\nimport SqftStore from \"../../../canvas/store/sqftStore\";\r\n\r\nconst ExportButton = () => {\r\n const exportScene = () => {\r\n const exporter = new GLTFExporter();\r\n const viewGL = SqftStore.viewGL;\r\n\r\n if (viewGL && viewGL.scene) {\r\n exporter.parse(viewGL.scene, (gltf) => {\r\n const blob = new Blob([JSON.stringify(gltf)], {type: 'text/plain'});\r\n const link = document.createElement('a');\r\n link.style.display = 'none';\r\n document.body.appendChild(link);\r\n link.href = URL.createObjectURL(blob);\r\n link.download = 'scene.gltf';\r\n link.click();\r\n });\r\n } else {\r\n console.error('GLBViewer instance or scene not found');\r\n }\r\n };\r\n\r\n return (\r\n \r\n );\r\n};\r\n\r\nexport default ExportButton;\r\n","import React, {Fragment, useEffect} from 'react';\r\nimport {connect} from \"react-redux\";\r\nimport {setAbortController, setSQFTAr3dPopup} from \"../../../../../actions/sqftMenuFunctions\";\r\nimport ShapesGoogleModelViewer from \"./ShapesGoogleModelViewer\";\r\nimport ShapesThreeJsViewer from \"./ShapesThreeJsViewer\";\r\nimport MultiLoader from \"../../../../ui/multiLoader\";\r\nimport store from \"../../../../../store\";\r\nimport {setMultiLoader} from \"../../../../../actions/actionFunctions\";\r\n//import GroheFeatures from \"../../../look/grohe/groheNavigation/groheFeatures/groheFeatures\";\r\nimport {setLookActiveCategory, setLookOpened} from \"../../../../../actions/lookFunctions\";\r\nimport {setAPIErrorMessage, setSqftCabinetsGlb} from \"../../../../../actions/sqftFunctions\";\r\n//import {setCabinetGLBFromCabinetsSet} from \"../../../helpers/sqft3dArHelper\";\r\n//import sqftShapeManager from \"../canvas/store/sqftShapeManager\";\r\n//import {SHAPE_PART_ID} from \"../../../constants\";\r\n//import {isProd} from \"../../../../misc/fabricatorHardcode\";\r\nimport {IS_QKB_UI} from \"../../../../../config\";\r\nimport PropTypes from \"prop-types\";\r\nimport sqftConfig from \"../../canvas/store/sqftConfig\";\r\n\r\nconst ThreeDWorkspace = (props) => {\r\n const {apiErrorMessage, cabinetsGlb, setLookOpened,\r\n abortRequestController} = props;\r\n //const {lookActiveFeature, setLookActiveCategory, displayDoorsOnly} = props;\r\n\r\n useEffect(()=> {\r\n if (!IS_QKB_UI) {\r\n setLookOpened(false);\r\n }\r\n }, [setLookOpened])\r\n\r\n useEffect(()=> {\r\n return () => {\r\n if (abortRequestController) {\r\n abortRequestController.abort();\r\n }\r\n store.dispatch(setMultiLoader({activeStep: 8, visible: false, finished: true}));\r\n }\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [])\r\n\r\n // //todo lookActiveFeature is always triggered\r\n // //todo CHANGE FEATURES FROM THREE D\r\n // useEffect(()=> {\r\n // // wi will display door styles for this category\r\n // //todo\r\n // setLookActiveCategory(SHAPE_PART_ID.top_cabinet);\r\n //\r\n // store.dispatch(setMultiLoader({activeStep: 0, visible: false, finished: false}));\r\n // store.dispatch(setMultiLoader({activeStep: 0, visible: true, finished: false}));\r\n //\r\n // //todo update lower and bottom separately\r\n // //sqftShapeManager.changeShapesFeatureIDIfColorWasChanged(lookActiveFeature);\r\n //\r\n // setCabinetGLBFromCabinetsSet(displayDoorsOnly).then(r => void r);\r\n //\r\n // // eslint-disable-next-line react-hooks/exhaustive-deps\r\n // }, [lookActiveFeature])\r\n\r\n return (\r\n \r\n {sqftConfig.threeD.useGoogleModelViewer\r\n ? \r\n {cabinetsGlb && !apiErrorMessage ? }\r\n \r\n )}\r\n {/* TODO CHANGE FEATURES FROM THREE D */}\r\n {/*{ !isProd() ?
\r\n )\r\n};\r\n\r\nThreeDWorkspace.propTypes = {\r\n displayDoorsOnly: PropTypes.bool\r\n}\r\n\r\nconst mapStateToProps = (store) => ({\r\n cabinetsGlb: store.sqftState.cabinetsGlb,\r\n apiErrorMessage: store.sqftState.apiErrorMessage,\r\n abortRequestController: store.sqftState.abortRequestController,\r\n lookActiveFeature: store.lookState.lookActiveFeature,\r\n});\r\n\r\nconst mapDispatchToProps = {\r\n setSQFTAr3dPopup,\r\n setLookActiveCategory,\r\n setSqftCabinetsGlb,\r\n setAPIErrorMessage,\r\n setAbortController,\r\n setLookOpened,\r\n};\r\n\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(ThreeDWorkspace);\r\n","import React, {useEffect} from 'react';\r\nimport { connect } from \"react-redux\";\r\nimport PropTypes from \"prop-types\";\r\n\r\nimport {setMultiLoader} from \"../../actions/actionFunctions\";\r\nimport MultiLoaderSteps from \"./multiLoaderSteps\";\r\nimport MaterialSpinner from \"./materialSpinner\";\r\n\r\nconst MultiLoader = (props) => {\r\n\r\n const {multiLoader, setMultiLoader, useCabinetLoader} = props;\r\n\r\n useEffect(() => {\r\n setMultiLoader({finished: false, activeStep: 0, visible: true});\r\n return () => {\r\n setMultiLoader({finished: true, activeStep: 0});\r\n }\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, []);\r\n\r\n // useEffect(() => {\r\n // if (multiLoader.activeStep > multiLoader.renderSteps.length) {\r\n // setTimeout(() => {\r\n // setMultiLoader({visible: false});\r\n // }, 500)\r\n // }\r\n // // eslint-disable-next-line react-hooks/exhaustive-deps\r\n // }, [multiLoader.activeStep]);\r\n\r\n if (!multiLoader.visible) {\r\n return null\r\n }\r\n\r\n if (multiLoader.finished) {\r\n return \r\n \r\n
\r\n )\r\n};\r\n\r\nMultiLoader.propTypes = {\r\n useCabinetLoader: PropTypes.bool,\r\n}\r\n\r\nconst mapStateToProps = (store) => {\r\n const {multiLoader} = store.loaderState;\r\n return {\r\n multiLoader,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n setMultiLoader,\r\n};\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(MultiLoader)\r\n","import React, {useEffect, useState} from 'react';\r\nimport {connect} from \"react-redux\";\r\nimport {setSQFTAr3dPopup} from \"../../../../../actions/sqftMenuFunctions\";\r\nimport {generateQRCode} from \"../../../helpers/sqft3dArHelper\";\r\n//import GLBLoader from \"../ar3d/GLBLoader\";\r\n//import ARButton from \"../ar3d/ARButton\";\r\nimport MultiLoader from \"../../../../ui/multiLoader\";\r\nimport store from \"../../../../../store\";\r\nimport {setMultiLoader} from \"../../../../../actions/actionFunctions\";\r\nimport ARButton from \"./ARButton\";\r\nimport {DEVICE_TYPE, getDeviceType} from \"../../../helpers/sqftMobileHelper\";\r\nimport ARButtonGoogleWebXR from \"./ARButtonGoogleWebXR\";\r\n\r\nconst ARWorkspace = (props) => {\r\n const {cabinetsGlb, apiErrorMessage, abortRequestController} = props;\r\n const {isMobile} = props;\r\n const [qrImage, setQrImage] = useState(null)\r\n\r\n // useEffect(()=> {\r\n // if (isMobile && cabinetsGlb) {\r\n // new GLBLoader(cabinetsGlb);\r\n // }\r\n // }, [isMobile, cabinetsGlb])\r\n\r\n useEffect(()=> {\r\n return () => {\r\n if (abortRequestController) {\r\n abortRequestController.abort();\r\n }\r\n store.dispatch(setMultiLoader({activeStep: 8, visible: false, finished: true}));\r\n }\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [])\r\n\r\n if (!isMobile && cabinetsGlb) {\r\n const getARUrlForGlbFile = () => {\r\n const regex = /composed\\/(.*?)\\.glb/;\r\n const match = cabinetsGlb.match(regex);\r\n\r\n if (match && match.length > 1) {\r\n const extractedString = match[1];\r\n return window.location.origin + '/kitchen/#' + '/sqft-cabinets-ar/' + extractedString;\r\n }\r\n return ''\r\n }\r\n const arUrlForGlbFIle = getARUrlForGlbFile();\r\n generateQRCode(arUrlForGlbFIle).then((imageDataUrl) => {\r\n setQrImage(imageDataUrl);\r\n });\r\n }\r\n\r\n const getArButton = () => {\r\n switch (getDeviceType()) {\r\n case DEVICE_TYPE.Android:\r\n return \r\n
\r\n )\r\n};\r\n\r\n// ARWorkspace.propTypes = {\r\n// displayDoorsOnly: PropTypes.bool\r\n// }\r\n\r\nconst mapStateToProps = (store) => ({\r\n ar3dPopup: store.sqftMenuState.ar3dPopup,\r\n cabinetsGlb: store.sqftState.cabinetsGlb,\r\n apiErrorMessage: store.sqftState.apiErrorMessage,\r\n isMobile: store.serverState.isMobile,\r\n abortRequestController: store.sqftState.abortRequestController,\r\n});\r\n\r\nconst mapDispatchToProps = {\r\n setSQFTAr3dPopup\r\n};\r\n\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(ARWorkspace);\r\n","import React, {useEffect} from 'react';\r\nimport {injectIntl} from \"react-intl\";\r\nimport {connect} from \"react-redux\";\r\nimport {withRouter} from \"react-router-dom\";\r\nimport {LookAugmentRealityIcon} from \"../../../../common/icons\";\r\nimport GLBLoader from \"./GLBLoader\";\r\nimport PropTypes from \"prop-types\";\r\nimport SvgIcon from \"@mui/material/SvgIcon\";\r\nimport Button from \"@mui/material/Button\";\r\n\r\nconst ARButton = (props) => {\r\n const {url, cabinetsARBlobUrl} = props;\r\n\r\n useEffect(() => {\r\n //let url = 'https://s3.amazonaws.com/qc-3dfiles/composed/' + file + '.glb'\r\n //url = 'https://discoverthreejs.com/examples/assets/models/Parrot.glb';\r\n //url = 'https://threejs.org/examples/models/gltf/AnisotropyBarnLamp.glb';\r\n //url = '/images/sqft-icons/3d/Chair.glb';\r\n //url = 'https://qc-3dfiles.s3.amazonaws.com/ar-composer/WBC3630_Brown.glb';\r\n new GLBLoader(url);\r\n\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, []);\r\n\r\n const makeImage = () => {\r\n const c = document.createElement('canvas');\r\n const i = new Image();\r\n i.src = c.toDataURL();\r\n\r\n return i;\r\n }\r\n\r\n const makeLink = (blobUrl) => {\r\n console.log(\"blobUrl\", blobUrl);\r\n return Object.assign(document.createElement('a'), {\r\n download: 'asset.usdz',\r\n rel: \"ar\",\r\n href: blobUrl //URL.createObjectURL(blob)\r\n });\r\n }\r\n\r\n const arClick = () => {\r\n const i = makeImage();\r\n const a = makeLink(cabinetsARBlobUrl)\r\n a.appendChild(i);\r\n\r\n a.click();\r\n }\r\n\r\n return (\r\n \r\n )\r\n};\r\n\r\nARButton.propTypes = {\r\n url: PropTypes.string,\r\n};\r\n\r\nconst mapStateToProps = (store) => {\r\n return {\r\n visualizersLoaded: store.serverState.visualizersLoaded,\r\n cabinetsARBlobUrl: store.sqftState.cabinetsARBlobUrl,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n};\r\n\r\nexport default withRouter(\r\n injectIntl(\r\n connect(mapStateToProps, mapDispatchToProps)(ARButton)\r\n )\r\n);\r\n","export const getDeviceType = () => {\r\n const userAgent = navigator.userAgent || navigator.vendor || window.opera;\r\n\r\n // Проверка на iOS\r\n if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {\r\n return DEVICE_TYPE.iOS;\r\n }\r\n\r\n // Проверка на Android\r\n if (/android/i.test(userAgent)) {\r\n return DEVICE_TYPE.Android;\r\n }\r\n\r\n return DEVICE_TYPE.unknown;\r\n};\r\n\r\nexport const DEVICE_TYPE = {\r\n iOS: 'iOS',\r\n Android: 'Android',\r\n unknown: 'unknown'\r\n}\r\n","import React from 'react';\r\n//import * as ReactDOM from 'react-dom';\r\nimport { injectIntl } from \"react-intl\";\r\nimport { connect } from \"react-redux\";\r\nimport { withRouter } from \"react-router-dom\";\r\nimport { LookAugmentRealityIcon } from \"../../../../common/icons\";\r\nimport PropTypes from \"prop-types\";\r\nimport SvgIcon from \"@mui/material/SvgIcon\";\r\nimport Button from \"@mui/material/Button\";\r\nimport WebXRGoogleModelViewer from \"./WebXRGoogleModelViewer\";\r\n\r\nconst ARButtonGoogleWebXR = (props) => {\r\n const { url } = props;\r\n\r\n const activateAR = () => {\r\n const modelViewer = document.querySelector('#arViewer');\r\n if (modelViewer) {\r\n modelViewer.activateAR();\r\n }\r\n };\r\n\r\n return (\r\n \r\n {cabinetsGlb ? (\r\n isMobile ? (\r\n getArButton()\r\n ) : (\r\n
\r\n \r\n 
\r\n
\r\n )\r\n ) : apiErrorMessage ? (\r\n apiErrorMessage\r\n ) : (\r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nARButtonGoogleWebXR.propTypes = {\r\n url: PropTypes.string,\r\n};\r\n\r\nconst mapStateToProps = (store) => {\r\n return {\r\n visualizersLoaded: store.serverState.visualizersLoaded,\r\n cabinetsARBlobUrl: store.sqftState.cabinetsARBlobUrl,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {};\r\n\r\nexport default withRouter(\r\n injectIntl(\r\n connect(mapStateToProps, mapDispatchToProps)(ARButtonGoogleWebXR)\r\n )\r\n);\r\n","import React from 'react';\r\nimport {connect} from \"react-redux\";\r\nimport {setSQFTSystemMessage} from \"../../../../actions/sqftMenuFunctions\";\r\n\r\nconst ValidationPopupWindow = (props) => {\r\n const {id, text, position, isHidden} = props;\r\n\r\n return (\r\n \r\n \r\n }\r\n\r\n const noRowsRenderer = () => \r\n {() => (\r\n \r\n \r\n \r\n )}\r\n \r\n )\r\n};\r\n\r\nLookListContent.propTypes = {\r\n onBackClick: PropTypes.func.isRequired\r\n}\r\n\r\nconst mapStateToProps = () => {\r\n return {\r\n\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n};\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(LookListContent)\r\n","import React, {Fragment} from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport {FormattedMessage, injectIntl} from \"react-intl\";\r\nimport {useLocation, withRouter} from \"react-router-dom\";\r\nimport PropTypes from \"prop-types\";\r\n\r\nimport IconButton from \"@mui/material/IconButton\";\r\n// import PrintIcon from \"@mui/icons-material/Print\";\r\nimport FavoriteBorderIcon from \"@mui/icons-material/FavoriteBorder\";\r\nimport CloseIcon from \"@mui/icons-material/Close\";\r\n// import Button from \"@mui/material/Button\";\r\n\r\nimport {setLookOpened, setLookOverlayOpened, setLookPageOpened} from \"../../../actions/lookFunctions\";\r\nimport {LOOK_OVERLAYS} from \"../core/constants\";\r\nimport {IS_PRODUCT_JOURNEY} from \"../../../config\";\r\nimport WithSavePostMessage from \"../hocs/withSavePostMessage\";\r\n// import {featureIsBundle, getBundledFeatures, isInStock} from \"../lookNavigation/lookFunctions2\";\r\nimport {cartItemInStock} from \"../lookNavigation/lookFunctions2\";\r\nimport Analytics, {LOOK_JOURNEY_ANALYTIC_EVENTS} from \"../../../analytics\";\r\nimport {ROUTES} from \"../../../routes\";\r\nimport {isIframe} from \"../../../misc/helpers\";\r\n\r\nconst LookListContentHeaderRightSide = (props) => {\r\n\r\n const {intl, isMobile, onBackClick, setLookOverlayOpened, cartItems, userIsLoggedIn, setLookPageOpened, setLookOpened,\r\n history, withoutSave, fabricatorData} = props;\r\n\r\n const location = useLocation();\r\n\r\n // const printButtonClick = () => {\r\n // setLookOverlayOpened(LOOK_OVERLAYS.print)\r\n // }\r\n\r\n const closeCartClick = () => {\r\n setLookPageOpened(\"\");\r\n setLookOpened(null);\r\n history.push(ROUTES.home);\r\n }\r\n\r\n const saveButtonClick = (savePostMessage) => {\r\n Analytics.sendClickEvent(LOOK_JOURNEY_ANALYTIC_EVENTS.lookListHeaderSave);\r\n if (userIsLoggedIn) {\r\n savePostMessage();\r\n } else {\r\n const isLixil = isIframe() && fabricatorData.isLixil;\r\n setLookOverlayOpened(isLixil ? LOOK_OVERLAYS.questionLogin : LOOK_OVERLAYS.leadCapture);\r\n }\r\n }\r\n\r\n let itemsToCount = 0;\r\n cartItems.forEach(cartItem => {\r\n if (!cartItem.relatedProductParent && cartItemInStock(cartItem)\r\n // || (featureIsBundle(cartItem.cartFeature, cartItems) && getBundledFeatures(cartItem.cartFeature).some(relFeature => relFeature.dbFeature.lixilAvailableQty > 0))\r\n ) {\r\n itemsToCount = itemsToCount + cartItem.quantity\r\n }\r\n }); // Items in visualizer should equal total quantity of items minus out of stock (Shower bundle will count as 1 not 7)\r\n\r\n return (\r\n \r\n {[0,1,2].map(stepIndex => )}\r\n \r\n )\r\n};\r\n\r\nconst mapStateToProps = (store) => {\r\n const {unlockCalculationsStep, showTotalItems} = store.unlockCalculationsState;\r\n const {cartItems} = store.cartState;\r\n const {lookPageOpened} = store.lookState;\r\n const {wizardList, wizardIsActive, allWizardsValues} = store.wizardState;\r\n const {quotes} = store.quotesState;\r\n\r\n return {\r\n cartItems,\r\n unlockCalculationsStep,\r\n showTotalItems,\r\n lookPageOpened,\r\n wizardList,\r\n wizardIsActive,\r\n allWizardsValues,\r\n quotes,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n setUnlockCalculationsStep,\r\n showUnlockCalculationsCartItems,\r\n showUnlockCalculationsTotalItems,\r\n};\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(UnlockCalculationSteps)\r\n","import React from 'react';\r\n\r\nconst LoadingDots = () => (\r\n \r\n \r\n \r\n \r\n \r\n);\r\n\r\nLoadingDots.displayName = 'LoadingDots';\r\n\r\nexport default LoadingDots;\r\n","import React from \"react\";\r\nimport PropTypes from \"prop-types\";\r\nimport {connect} from \"react-redux\";\r\nimport {injectIntl} from \"react-intl\";\r\nimport {withRouter} from \"react-router-dom\";\r\n\r\nimport {featureInterface} from \"../../../../../interfaces/featureInterface\";\r\nimport {checkIfFeatureDisabled} from \"../../lookFunctions\";\r\nimport Analytics, {LOOK_JOURNEY_ANALYTIC_EVENTS} from \"../../../../../analytics\";\r\nimport {getFeatureSectionIsHidden, getFeatureUrl} from \"../../lookFunctions2\";\r\nimport {setLookActiveFeature} from \"../../../../../actions/lookFunctions\";\r\nimport LookMobileInfoButtonAnimatedIcon from \"../../../animations/lookMobileInfoButtonAnimatedIcon\";\r\nimport {setWizardShowFeatureSection} from \"../../../../../actions/wizardFunctions\";\r\n\r\nconst LookListActiveFeatureMobileButton = (props) => {\r\n\r\n const {lookFeature, setLookActiveFeature, history, isActive, lookLockedTutorial, isWizard,\r\n setWizardShowFeatureSection} = props;\r\n\r\n if (!isActive || lookLockedTutorial.visible) {\r\n return null\r\n }\r\n\r\n if (!isWizard) {\r\n const featureSectionIsHidden = getFeatureSectionIsHidden(lookFeature);\r\n if (featureSectionIsHidden) {\r\n return null\r\n }\r\n\r\n const parent = lookFeature.getParent();\r\n const alreadyDisabled = checkIfFeatureDisabled(lookFeature, parent, true);\r\n\r\n if (alreadyDisabled) {\r\n return null\r\n }\r\n }\r\n\r\n const infoButtonClick = (event) => {\r\n event.preventDefault();\r\n event.stopPropagation();\r\n Analytics.sendClickEvent(LOOK_JOURNEY_ANALYTIC_EVENTS.lookMobileActiveFeatureButton);\r\n\r\n if (isWizard) {\r\n setWizardShowFeatureSection(true);\r\n return\r\n }\r\n\r\n setLookActiveFeature(lookFeature);\r\n history.push(getFeatureUrl(lookFeature, true));\r\n }\r\n\r\n return (\r\n \r\n ) : (\r\n \r\n )\r\n }\r\n\r\n handleOnDesktopGridScroll = ({clientHeight, scrollHeight, scrollTop}) => {\r\n if (this.props.showItemsList && !this.state.showLoader) {\r\n const ceilScrollHeight = Math.ceil(scrollHeight);\r\n const floorScrollHeight = Math.floor(scrollHeight);\r\n const ceilScrollTop = Math.ceil(scrollTop);\r\n const floorScrollTop = Math.floor(scrollTop);\r\n if ((ceilScrollHeight - ceilScrollTop === clientHeight)\r\n || (ceilScrollHeight - floorScrollTop === clientHeight)\r\n || (floorScrollHeight - ceilScrollTop === clientHeight)\r\n || (floorScrollHeight - floorScrollTop === clientHeight)) {\r\n this.getNewFeaturesOnScroll(scrollTop, {part: this.props.currentParent})\r\n }\r\n }\r\n };\r\n\r\n changeSet = (e) => {\r\n this.props.changeSet(e.target.dataset.set);\r\n };\r\n\r\n renderVirtualizedList = () => {\r\n const {currentParent, isWizard, currentGroups, showListForce} = this.props;\r\n if ((!showListForce && (currentParent && !currentParent.allFeaturesReceived)) || !this.itemsList) {\r\n return \r\n }\r\n\r\n renderList = (isRowView) => {\r\n\r\n const {wizardConfig, currentParent, showListForce} = this.props;\r\n\r\n if (wizardConfig.length) {\r\n const existingWizSetup = wizardConfig.find(wizObject => {\r\n return wizObject.featureGroupName === currentParent.dbName || wizObject.featureGroupName === currentParent.partName\r\n })\r\n if (existingWizSetup && existingWizSetup.filterGroups.length && !existingWizSetup.isFinished && existingWizSetup.enableForQuoting) {\r\n if ((!showListForce && (currentParent && !currentParent.allFeaturesReceived)) || !this.itemsList) {\r\n return \r\n }\r\n }\r\n\r\n return isRowView\r\n ? this.renderVirtualizedList()\r\n : this.renderVirtualizedGrid()\r\n }\r\n\r\n render() {\r\n const {selectionWindowView} = this.props;\r\n const isRowView = selectionWindowView === 4;\r\n return (\r\n \r\n \r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = (store) => {\r\n\r\n const {wizardConfig, wizardSelectedValues, wizardActiveStep} = store.wizardState;\r\n\r\n return {\r\n selectionWindowView: store.selectionState.selectionWindowView,\r\n navigationViewType: store.selectionState.selectionWindowView, // needed for NavigationItemsList\r\n isPhoneNumberValidated: store.userState.isPhoneNumberValidated,\r\n windowWidth: store.serverState.windowWidth,\r\n activeFeature: store.selectionState.activeFeature,\r\n filtersVisible: store.filterState.showFilters,\r\n fabricatorData: store.fabricatorState,\r\n userPopupOpened: store.userState.userPopupOpened,\r\n filterGroups: store.filterState.filterGroups,\r\n showRestorePopup: store.bathroomVisualizerState.showRestorePopup,\r\n selectedFilters: store.filterState.selectedFilters,\r\n userIsLoggedIn: store.userState.userIsLoggedIn,\r\n activeQuoteIndex: store.quotesState.activeQuoteIndex,\r\n navItemPositionModal: store.navigationState.navItemPositionModal,\r\n wizardConfig,\r\n wizardSelectedValues,\r\n wizardActiveStep,\r\n };\r\n};\r\n\r\nexport default connect(mapStateToProps, {\r\n toggleSelectionFeatureInfo,\r\n setActiveFeature,\r\n toggleShowDescriptionCover,\r\n toggleShowRestorePopup,\r\n toggleUpdateDisableFeatureGroupRadio,\r\n toggleNavItemPositionModal,\r\n updateCanvasCount,\r\n})(SelectionMainList);\r\n","import React from 'react';\r\nimport { connect } from \"react-redux\";\r\nimport PropTypes from \"prop-types\";\r\n\r\nimport {setCameFromPage, toggleSelectionFeatureInfo} from \"../../../actions/actionFunctions\";\r\nimport FeatureThumbnail from \"../../visComponents/featureThumbnail\";\r\nimport FeatureName from \"../../visComponents/featureName\";\r\nimport FeatureInfoDescription from \"../selectionFeatureInfo/featureInfoDescription\";\r\nimport FeatureInfoPrice from \"../selectionFeatureInfo/featureInfoPrice\";\r\nimport FeatureInfoPriceLocked from \"../selectionFeatureInfo/featureInfoPriceLocked\";\r\nimport {getFeatureIsLocked} from \"../../../misc/helpers\";\r\nimport SelectionMainListRowItemButtons from \"./rowItemButtons\";\r\nimport RowItemRelatedProductsButton from \"./rowItemRelatedProductsButton\";\r\nimport FeatureCartItemsCount from \"../featureCartItemsCount\";\r\nimport {wizardGroupInterface} from \"../../../interfaces/wizardItemInterface\";\r\nimport {shouldReplaceSelectionInfoFeature} from \"../../qkbPages/materialsCommon/materialsCommonFunctions\";\r\n\r\n\r\nconst RowItem = (props) => {\r\n\r\n const {selected, currentFeature, fabricatorData, handleFeatureClick, toggleSelectionFeatureInfo, setCameFromPage,\r\n isRelated, windowWidth, isWizard, wizardGroup} = props;\r\n const fabricatorSettings = fabricatorData.settings;\r\n\r\n const goToFeatureInfo = () => {\r\n if (isRelated) {\r\n return false\r\n }\r\n const selectedFeature = shouldReplaceSelectionInfoFeature(currentFeature);\r\n toggleSelectionFeatureInfo(selectedFeature);\r\n setCameFromPage(\"materials\"); // no more visualizer or shoppingcart switch\r\n };\r\n\r\n const showPriceLocked = getFeatureIsLocked(currentFeature);\r\n const showPrice = fabricatorSettings.showPricing && !fabricatorData.hideCheckoutBreakdownCost\r\n && !showPriceLocked && !fabricatorData.hidePricesFromUser;\r\n\r\n const handleRowItemClick = (event) => {\r\n if (isRelated) {\r\n return false\r\n }\r\n const preventFeatureClickClasses = [\".m-button\", \".m-quantity\", \".m-triangle\"];\r\n if (!isWizard && event && preventFeatureClickClasses.some(className => event.target.closest(className))) {\r\n return false\r\n }\r\n handleFeatureClick({part: currentFeature}, event);\r\n };\r\n\r\n const isMobile = windowWidth < 991;\r\n\r\n const infoButtonVisible = !isWizard || !wizardGroup || !wizardGroup.skipProductInfo;\r\n\r\n return (\r\n
\r\n
\r\n )\r\n};\r\n\r\nconst mapStateToProps = (store) => ({\r\n validationMessage: store.sqftMenuState.validationMessage\r\n});\r\n\r\nconst mapDispatchToProps = {\r\n setSQFTSystemMessage\r\n};\r\n\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(ValidationPopupWindow);\r\n","import React from \"react\";\r\nimport {connect} from \"react-redux\";\r\nimport {CONTEXT_MENU_TYPE} from \"../../../../../constants\";\r\nimport ContextmenuList from \"./contextmenu/contextmenuList\";\r\nimport ContextmenuButtons from \"./contextmenu/contextmenuButtons\";\r\n\r\nconst SqftContextMenu = (props) => {\r\n const {contextMenuType} = props;\r\n\r\n switch (contextMenuType) {\r\n case CONTEXT_MENU_TYPE.list:\r\n return \r\n {text}\r\n
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n )\r\n};\r\n\r\nconst mapStateToProps = (store) => ({\r\n isShowSlabTool: store.sqftSlabState.isShowSlabTool,\r\n isSlabToolVisited: store.sqftSlabState.isSlabToolVisited,\r\n showManualCalculation: store.sqftManualCalculationState.showManualCalculation,\r\n switcherPosition: store.sqftManualCalculationState.switcherPosition,\r\n});\r\n\r\nconst mapDispatchToProps = {\r\n showSlabTool,\r\n setSQFTActiveButton,\r\n setSQFTMenuOpened,\r\n setSqftSlabToolVisited,\r\n addRoomWithVisitedSlabTool,\r\n};\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(SlabToolSwitcher);\r\n","import eventManager from \"../../store/sqftEventManager\";\r\nimport config from \"../../store/sqftConfig\";\r\nimport workspace from \"../workspace\";\r\nimport store from \"../../../../../../store\";\r\nimport $ from \"jquery\";\r\nimport {iconPlusBlack, iconPlusBlue} from \"../../../../assetsSQFT\";\r\nimport {setSQFTMenuOpened} from \"../../../../../../actions/sqftMenuFunctions\";\r\nimport {updateSQFTCalculations} from \"../../../../../../actions/sqftFunctions\";\r\nimport {attachResource} from \"./resourseCanas\";\r\nimport {SIDEBAR_NAVIGATION_BUTTONS} from \"../../../../constants\";\r\n\r\nconst backsplashCanvas = function() {\r\n let self = this;\r\n this.backSplashFeature = {\r\n size: 0,\r\n name: \"\"\r\n };\r\n this.cursorImage = null;\r\n this.addedImages = null; //like in edges\r\n this.img = null;\r\n this.isWaitingToRestoreCursor = false;\r\n\r\n this.setBackSplashFeature = function (backSplashFeature) {\r\n this.backSplashFeature = backSplashFeature;\r\n };\r\n this.setHighlighting = function (disallowDemo) {\r\n eventManager.stealCursor(true); // remove all other cursors\r\n workspace.setAllowEdges(false); // removing sizing lines\r\n workspace.setAllowBumpoutEdges(false); // removing bumpout lines\r\n config.highlight.points = false;\t// remove radiuses\r\n config.highlight.lines = true; // enable lines highlighting\r\n\r\n if (!disallowDemo) {\r\n config.highlight.demoShow = true;\r\n }\r\n setTimeout(function () {\r\n config.highlight.demoShow = false;\r\n }, 1000);\r\n };\r\n\r\n this.setCursorImage = function () {\r\n let bounds = 18,\r\n imgWidth = bounds,\r\n imgHeight = bounds;\r\n\r\n let domImg = document.createElement('img');\r\n domImg.crossOrigin = \"Anonymous\";\r\n\r\n let $img = $(domImg);\r\n $img.css({\r\n position: 'absolute',\r\n width: '1px',\r\n height: '1px'\r\n });\r\n\r\n $img.attr({\r\n 'data-id': self.backSplashFeature.size,\r\n 'data-name': self.backSplashFeature.name,\r\n });\r\n\r\n function imgOnLoad() {\r\n var bounds = 18;\r\n let ratio;\r\n if(imgWidth > imgHeight) {\r\n ratio = imgHeight / imgWidth;\r\n imgWidth = bounds;\r\n imgHeight = bounds * ratio;\r\n } else {\r\n ratio = imgWidth / imgHeight;\r\n imgHeight = bounds;\r\n imgWidth = bounds * ratio;\r\n }\r\n eventManager.setCursor('edge-select', self, true);\r\n self.cursorImage = { image: domImg, width: imgWidth, height: imgHeight };\r\n self.registerEvents(); // only after image is load!\r\n }\r\n $img.on('load', imgOnLoad);\r\n $img.appendTo($('body'));\r\n\r\n if (self.backSplashFeature.size === \"wall\") {\r\n config.highlight.type = 'wall';\r\n $img.attr('src', iconPlusBlack);\r\n } else {\r\n config.highlight.type = 'backsplash';\r\n $img.attr('src', iconPlusBlue);\r\n }\r\n\r\n this.img = $img;\r\n config.highlight.id = self.backSplashFeature.size;\r\n };\r\n\r\n this.registerEvents = () => {\r\n eventManager.setCursor('radius-select', self, true);\r\n eventManager.addEvent(\r\n eventManager.events.RENDER,\r\n this.renderCursor,\r\n this,\r\n eventManager.priorities.OVERALL\r\n );\r\n eventManager.addEvent(\r\n eventManager.events.MOUSE_UP,\r\n this.onMouseUp,\r\n this,\r\n eventManager.priorities.OVERALL\r\n );\r\n };\r\n this.deregisterEvents = () => {\r\n eventManager.resetCursor(this);\r\n eventManager.removeEvent(this);\r\n config.highlight.lines = false;\r\n //todo sqft-react\r\n //elements.navbacksplash.removeClass('steps-scope-config-button-selected');\r\n }\r\n this.destroy = function(protect, revertBackAfterMouseUp) {\r\n if (revertBackAfterMouseUp) {\r\n eventManager.removeEvent(self, eventManager.events.RENDER); //remove render only, but wait for mouse up to set cursor again\r\n this.isWaitingToRestoreCursor = true;\r\n } else {\r\n this.deregisterEvents();\r\n //$('img[data-id=\"' + this.img.data('id') +'\"]').remove();\r\n //this.addedImages = this.addedImages.filter(image => image.dataset.id === this.img.data('id'));\r\n }\r\n };\r\n this.onMouseUp = function(mousePos) {\r\n void mousePos;\r\n let hoverShape = workspace.getHoverShape();\r\n if (hoverShape && hoverShape.getHoverSegment) {\r\n const reduxState = store.getState();\r\n const activeButton = reduxState.sqftMenuState.activeButton;\r\n if (activeButton !== SIDEBAR_NAVIGATION_BUTTONS.backsplash) {\r\n return\r\n }\r\n\r\n const segCorner = hoverShape.getHoverSegmentOutlineCorner();\r\n const seg = hoverShape.getHoverSegment();\r\n if (seg || segCorner) {\r\n let resourceType = (self.backSplashFeature.size === \"wall\") ? \"wall\" : \"backsplash\";\r\n\r\n //remove incompatible resources\r\n if (seg && seg.isWithMitered()) {\r\n seg.deleteMitered();\r\n } else if (seg && (seg.isWithWaterfallToolEdge() || seg.isWithPeninsulaUnderwrapEdge())) {\r\n seg.deleteAttachedItem();\r\n }\r\n\r\n //add new resource\r\n attachResource(seg, segCorner, resourceType, null, null, this.backSplashFeature.name, this.backSplashFeature.size);\r\n\r\n // let attachedTo = workspace.getImagesAttachedTo(seg);\r\n // if (attachedTo) {\r\n // workspace.removeShape(attachedTo);\r\n // }\r\n //\r\n //\r\n // let historyCallBack;\r\n //\r\n // //add image to line or cornerLine\r\n // if (seg) {\r\n // historyCallBack = seg.addBacksplashToLine.bind(self, this.backSplashFeature.name, type, self.cursorImage.image.dataset.id);\r\n // } else if (segCorner) {\r\n // historyCallBack = segCorner.addBacksplashToCornerLine.bind(self, this.backSplashFeature.name, type, self.cursorImage.image.dataset.id);\r\n // }\r\n //\r\n // workspace.addImage(\r\n // self.cursorImage.image,\r\n // self.cursorImage.width / scale,\r\n // self.cursorImage.height / scale,\r\n // seg || segCorner,\r\n // hoverShape,\r\n // type,\r\n // historyCallBack\r\n // );\r\n //\r\n // historyCallBack();\r\n // config.highlight.lines = true;\r\n } else {\r\n store.dispatch(setSQFTMenuOpened('backsplash'));\r\n // \tderegisterEvents();\r\n // \telements.designDefault.click();\r\n }\r\n\r\n const updateCalculations = reduxState.sqftState.updateCalculations;\r\n store.dispatch(updateSQFTCalculations(updateCalculations + 1));\r\n }\r\n this.checkForRestoreCursor();\r\n };\r\n this.checkForRestoreCursor = function() {\r\n if (self.isWaitingToRestoreCursor) {\r\n self.isWaitingToRestoreCursor = false;\r\n eventManager.removeEvent(self, eventManager.events.MOUSE_UP); //remove mouse up, it will be added in setCursorImage\r\n self.setHighlighting(true);\r\n self.setCursorImage();\r\n }\r\n };\r\n this.renderCursor = function(ctx) {\r\n // if((this.backsplashSize > 0) && ($(window).width() > 768)) {\r\n // var mPos = eventManager.LastKnownMousePos;\r\n // if(mPos) {\r\n // ctx.save();\r\n // ctx.font = \"18px Arial\";\r\n // ctx.fillStyle = \"#000000\";\r\n // ctx.fillText(this.backsplashSize + \"\\\" Backsplash\", mPos.x + (12 * config.scale), mPos.y + 9);\r\n // ctx.restore();\r\n // }\r\n // }\r\n if(self.cursorImage.image && ($(window).width() > 768)) {\r\n var mPos = eventManager.LastKnownMousePos;\r\n if(mPos) {\r\n ctx.drawImage(self.cursorImage.image, mPos.x + 10, mPos.y + 10, self.cursorImage.width, self.cursorImage.height);\r\n }\r\n }\r\n };\r\n};\r\n\r\nexport default new backsplashCanvas();\r\n","import LookVirtualizedListLoadingItem\r\n from \"../../../../../../../look/lookNavigation/lookMain/lookCategory/lookVirtualizedListLoadingItem\";\r\nimport {Grid} from \"react-virtualized\";\r\nimport React from \"react\";\r\nimport PropTypes from \"prop-types\";\r\nimport {connect} from \"react-redux\";\r\n\r\nexport const SqftOptionsLoading = (props) => {\r\n const {isMobile, windowHeight} = props;\r\n\r\n const rowHeight = 135;\r\n const width = isMobile ? 221 : 280;\r\n const columnWidth = width;\r\n const columnCount = 1;\r\n const height = isMobile ? windowHeight - 25 : windowHeight - 60;\r\n const rowCount = Math.floor(height / rowHeight);\r\n\r\n const listSettings = {\r\n width,\r\n columnCount,\r\n columnWidth,\r\n rowCount,\r\n height,\r\n rowHeight: rowHeight,\r\n overscanRowCount: 3,\r\n showScrollingPlaceholder: false,\r\n useDynamicRowHeight: false,\r\n }\r\n\r\n const cellRenderer = ({columnIndex, key, rowIndex, style}) => {\r\n void columnIndex;\r\n void rowIndex;\r\n\r\n return No Features found
;\r\n\r\n return (\r\n \r\n {hidePrice ? null :\r\n {fabricatorSettings.currencySign}}\r\n \r\n {priceEditing || hidePrice\r\n ? null\r\n : IS_QKB_UI ? {price} : price}\r\n {unit && !hidePrice ? ({unit}) : null}\r\n \r\n
\r\n )\r\n};\r\n\r\nFeaturePriceInput.propTypes = {\r\n feature: PropTypes.object,\r\n onBlur: PropTypes.func,\r\n unit: PropTypes.string,\r\n price: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\r\n className: PropTypes.string,\r\n showPrice: PropTypes.bool,\r\n};\r\n\r\nconst mapStateToProps = (store, ownProps) => {\r\n const {activeTheme} = store.serverState;\r\n return {\r\n feature: ownProps.feature || store.selectionState.selectionFeatureInfo,\r\n fabricatorData: store.fabricatorState,\r\n featureInfoCount: store.selectionState.featureInfoCount,\r\n activeTheme,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n updateFeatureInfoCount\r\n}\r\n\r\nexport default injectIntl(\r\n connect(mapStateToProps, mapDispatchToProps)(FeaturePriceInput)\r\n);\r\n","import React, {} from 'react';\r\nimport {connect} from \"react-redux\";\r\nimport PropTypes from \"prop-types\";\r\nimport {miteredSectionInterface} from \"../../../../../../interfaces/sqftInterfaces\";\r\nimport NavMiteredSegment from \"./navMiteredSegment\";\r\n\r\nconst NavMiteredSection = (props) => {\r\n const {sectionName, miteredSection, index} = props;\r\n\r\n let SEGMENTS = miteredSection.getSegments();\r\n\r\n return (\r\n \r\n
\r\n )\r\n};\r\n\r\nNavMiteredSection.propTypes = {\r\n sectionName: PropTypes.string,\r\n miteredSection: PropTypes.shape(miteredSectionInterface)\r\n};\r\n\r\nconst mapStateToProps = (store) => {\r\n return {\r\n menuOpened: store.sqftMenuState.menuOpened,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n};\r\n\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(NavMiteredSection);\r\n","import React from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport {FormattedMessage, injectIntl} from \"react-intl\";\r\nimport debounce from \"lodash/debounce\";\r\n\r\nimport InputLabel from '@mui/material/InputLabel';\r\nimport TextField from '@mui/material/TextField';\r\n\r\nimport COLOR_THEMES from \"../../../../../colorThemes\";\r\n\r\nimport {setGroheFiltersSearchText} from \"../../../../../actions/groheFunctions\";\r\nimport {searchProductRequest} from \"../../../../../api/search-api\";\r\nimport {getCurrentLayout} from \"../../../../appLayout\";\r\nimport {updateNavigationCount} from \"../../../../../actions/lookFunctions\";\r\nimport {setNavigationLoading} from \"../../../../../actions/navigationFunctions\";\r\n\r\nconst GroheFiltersSearchInput = (props) => {\r\n const {activeTheme, groheFiltersSearchText, setGroheFiltersSearchText, lookActiveCategory, updateNavigationCount,\r\n setNavigationLoading} = props;\r\n\r\n const layout = getCurrentLayout();\r\n const featureGroup = layout.getFeatureGroupByPartId(lookActiveCategory);\r\n\r\n const debounceRequest = async (searchText) => {\r\n if (featureGroup && !featureGroup.getRealFeaturesReceivedProperty()) {\r\n return await searchProductRequest(featureGroup, searchText, (ended) => {\r\n setNavigationLoading(ended);\r\n if (!ended) {\r\n updateNavigationCount();\r\n }\r\n })\r\n }\r\n }\r\n\r\n const debounceFn = debounce(debounceRequest, 800);\r\n\r\n const handleSearchInputChange = async (event) => {\r\n setGroheFiltersSearchText(event.currentTarget.value);\r\n await debounceFn(event.target.value)\r\n }\r\n\r\n return (\r\n \r\n {/*${TranslatesProvider.translate(\"sqft.navigation.mitered.title\")}*/}\r\n {sectionName}\r\n \r\n {('0' + (index + 1)).slice(-2)}\r\n \r\n
\r\n\r\n {\r\n SEGMENTS.map((miteredSegment, index) => {\r\n return
\r\n \r\n \r\n \r\n \r\n
\r\n )\r\n};\r\n\r\nconst mapStateToProps = (store) => {\r\n const {groheFiltersSearchText} = store.groheState;\r\n const {activeTheme} = store.serverState;\r\n const {lookActiveCategory} = store.lookState;\r\n\r\n return {\r\n groheFiltersSearchText,\r\n activeTheme,\r\n lookActiveCategory,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n setGroheFiltersSearchText,\r\n updateNavigationCount,\r\n setNavigationLoading,\r\n};\r\n\r\nexport default injectIntl(\r\n connect(mapStateToProps, mapDispatchToProps)(GroheFiltersSearchInput)\r\n);\r\n","import React, {useState, useEffect} from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport {injectIntl} from \"react-intl\";\r\nimport PropTypes from \"prop-types\";\r\n\r\nimport Accordion from '@mui/material/Accordion';\r\nimport AccordionDetails from '@mui/material/AccordionDetails';\r\nimport AccordionSummary from '@mui/material/AccordionSummary';\r\nimport ExpandMoreIcon from \"@mui/icons-material/ExpandMore\";\r\n\r\nimport {setGroheFiltersOpened, setGroheFiltersSearchText} from \"../../../../actions/groheFunctions\";\r\nimport {setSelectedFilters} from \"../../../../actions/actionFunctions\";\r\nimport GroheFiltersValues from \"../../grohe/groheNavigation/groheFilters/groheFiltersValues\";\r\nimport {getCurrentLayout} from \"../../../appLayout\";\r\n// import {AVAILABLE_FILTERS} from \"../../core/constants\";\r\nimport {IS_PRODUCT_JOURNEY} from \"../../../../config\";\r\n\r\nimport Analytics, {LOOK_JOURNEY_ANALYTIC_EVENTS, PRODUCT_JOURNEY_ANALYTIC_EVENTS} from \"../../../../analytics\";\r\n// import {COUNTERTOP_GROUP} from \"../../../kvComponent/core/constants\";\r\nimport {getFeatureGroupFilters} from \"../../../../misc/filtersFunctions\";\r\nimport MaterialSpinner from \"../../../ui/materialSpinner\";\r\nimport {getCurrentGroups, getFeatureGroupFromWizardGroup} from \"../lookMain/lookWizard/lookWizardFunctions\";\r\n\r\n\r\nconst LookFiltersList = (props) => {\r\n const { className, filtersOpened, intl, isMobile, lookActiveFeature, lookActiveCategory, wizardFeatureGroup,\r\n isRelatedItemsFilters } = props;\r\n const [activeFilterId, setActiveFilterId] = useState(null);\r\n\r\n useEffect(() => {\r\n setActiveFilterId(filtersOpened ? \"description\" : isMobile ? activeFilterId : \"\");\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [filtersOpened])\r\n\r\n const handleChange = (filterId, filterName) => (event, isExpanded) => {\r\n const underscoredText = Analytics.getSkuForAnalytics({dbFeature: {sku: filterName}}, false);\r\n if (IS_PRODUCT_JOURNEY) {\r\n Analytics.sendClickEvent(\r\n isExpanded\r\n ? PRODUCT_JOURNEY_ANALYTIC_EVENTS.productFeaturesFiltersAccordionOpen + underscoredText\r\n : PRODUCT_JOURNEY_ANALYTIC_EVENTS.productFeaturesFiltersAccordionClose + underscoredText\r\n );\r\n } else {\r\n Analytics.sendClickEvent(\r\n isExpanded\r\n ? LOOK_JOURNEY_ANALYTIC_EVENTS.lookFeaturesFiltersAccordionOpen + underscoredText\r\n : LOOK_JOURNEY_ANALYTIC_EVENTS.lookFeaturesFiltersAccordionClose + underscoredText\r\n );\r\n }\r\n\r\n setActiveFilterId(isExpanded ? filterId : false);\r\n };\r\n\r\n const layout = getCurrentLayout();\r\n const featureGroup = wizardFeatureGroup\r\n || (lookActiveFeature ? lookActiveFeature.getParent() : layout.getFeatureGroupByPartId(lookActiveCategory));\r\n\r\n const availableFilters = filtersOpened && (featureGroup.allFeaturesReceived || isRelatedItemsFilters)\r\n ? getFeatureGroupFilters(featureGroup)\r\n : [];\r\n\r\n if (!featureGroup) {\r\n return null\r\n }\r\n // .filter(filterGroup => AVAILABLE_FILTERS.includes(filterGroup.name));\r\n\r\n // if (!featureGroup.filtersReceived) {\r\n // return (\r\n // \r\n //
\r\n // )\r\n // }\r\n\r\n return (\r\n \r\n {availableFilters.map(availableFilter => {\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n )\r\n })}\r\n
\r\n )\r\n};\r\n\r\nLookFiltersList.propTypes = {\r\n className: PropTypes.string,\r\n isRelatedItemsFilters: PropTypes.bool\r\n}\r\n\r\nconst mapStateToProps = (store) => {\r\n const {lookActiveFeature, lookActiveCategory} = store.lookState;\r\n const {isMobile} = store.serverState;\r\n const {showFilters, selectedFilters, filtersCount} = store.filterState;\r\n const {filtersOpened} = store.groheState;\r\n const {featureGroupCount} = store.lookState;\r\n\r\n let wizardFeatureGroup = null\r\n const {wizardSelectedValues, wizardActiveItem, wizardActiveStep} = store.wizardState;\r\n if (filtersOpened && wizardActiveItem) {\r\n const currentGroups = getCurrentGroups(wizardActiveItem, wizardActiveStep, wizardSelectedValues);\r\n if (currentGroups.length === 1) {\r\n wizardFeatureGroup = getFeatureGroupFromWizardGroup(currentGroups[0])\r\n }\r\n }\r\n\r\n return {\r\n filtersOpened: showFilters || filtersOpened,\r\n filtersCount,\r\n isMobile,\r\n // allFilterGroups: filterGroups,\r\n lookActiveFeature,\r\n selectedFilters,\r\n lookActiveCategory,\r\n featureGroupCount,\r\n wizardFeatureGroup,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n setGroheFiltersOpened,\r\n setGroheFiltersSearchText,\r\n setSelectedFilters,\r\n};\r\n\r\nexport default injectIntl(\r\n connect(mapStateToProps, mapDispatchToProps)(LookFiltersList)\r\n);\r\n","import React from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport {injectIntl} from \"react-intl\";\r\n\r\nimport Checkbox from '@mui/material/Checkbox';\r\nimport FormGroup from '@mui/material/FormGroup';\r\nimport FormControlLabel from '@mui/material/FormControlLabel';\r\n\r\nimport PropTypes from \"prop-types\";\r\nimport {filterGroupInterface} from \"../../../../../interfaces/filterInterface\";\r\nimport {toggleFilterArrayValue} from \"../../../../visComponents/navigation/newFilters/filtersBody\";\r\nimport {setSelectedFilters} from \"../../../../../actions/actionFunctions\";\r\nimport Analytics, {LOOK_JOURNEY_ANALYTIC_EVENTS, PRODUCT_JOURNEY_ANALYTIC_EVENTS} from \"../../../../../analytics\";\r\nimport {IS_PRODUCT_JOURNEY} from \"../../../../../config\";\r\nimport {featureGroupInterface} from \"../../../../../interfaces/featureInterface\";\r\nimport {getFixedFilterValueName, weShouldHideFilterValue} from \"../../../filtersHardcode\";\r\n\r\nconst GroheFiltersValues = (props) => {\r\n const {availableFilter, selectedFilters, setSelectedFilters} = props;\r\n\r\n const setActiveFilterValue = (filterId, filterGroupId, filterValueText, selected) => {\r\n const underscoredText = Analytics.getSkuForAnalytics({dbFeature: {sku: filterValueText}}, false);\r\n\r\n if (IS_PRODUCT_JOURNEY) {\r\n Analytics.sendClickEvent(\r\n selected\r\n ? PRODUCT_JOURNEY_ANALYTIC_EVENTS.productFeaturesFiltersValuerUnChecked + underscoredText\r\n : PRODUCT_JOURNEY_ANALYTIC_EVENTS.productFeaturesFiltersValueChecked + underscoredText\r\n )\r\n } else {\r\n Analytics.sendClickEvent(\r\n selected\r\n ? LOOK_JOURNEY_ANALYTIC_EVENTS.lookFeaturesFiltersValuerUnChecked + underscoredText\r\n : LOOK_JOURNEY_ANALYTIC_EVENTS.lookFeaturesFiltersValueChecked + underscoredText\r\n )\r\n }\r\n setSelectedFilters(toggleFilterArrayValue([...selectedFilters], {filterId, filterGroupId}));\r\n };\r\n\r\n return (\r\n \r\n \r\n {availableFilter.filterGroupName}\r\n {availableFilter.selectedFiltersLength ? ` (${availableFilter.selectedFiltersLength})` : null}\r\n \r\n {featureGroup.filtersReceived || featureGroup.realFeaturesReceived ? null : }\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n {availableFilter.values.map(filterValue => {\r\n // we did this check already in the getAvailableFiltersForReceivedFilters function\r\n // if (COUNTERTOP_GROUP.includes(featureGroup.partId) && featureGroup && featureGroup.filtersReceived\r\n // && !featureGroup.filtersReceived.includes(filterValue.id)) {\r\n // return null\r\n // }\r\n if (weShouldHideFilterValue(filterValue)) {\r\n return null\r\n }\r\n const selected = selectedFilters.find((filter) => {\r\n return filter.filterGroupId === availableFilter.id && filter.filterId === filterValue.id\r\n })\r\n const checkboxClick = () => {\r\n return setActiveFilterValue(filterValue.id, availableFilter.id, filterValue.displayText, selected)\r\n }\r\n return (\r\n \r\n
\r\n )\r\n};\r\n\r\nGroheFiltersValues.propTypes = {\r\n availableFilter: PropTypes.shape(filterGroupInterface),\r\n featureGroup: PropTypes.shape(featureGroupInterface),\r\n}\r\n\r\nconst mapStateToProps = (store) => {\r\n const {selectedFilters} = store.filterState;\r\n return {\r\n selectedFilters\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n setSelectedFilters\r\n};\r\n\r\nexport default injectIntl(\r\n connect(mapStateToProps, mapDispatchToProps)(GroheFiltersValues)\r\n);\r\n","import React from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport {FormattedMessage, injectIntl} from \"react-intl\";\r\n\r\nimport IconButton from \"@mui/material/IconButton\";\r\nimport RestartAltIcon from '@mui/icons-material/RestartAlt';\r\n\r\nimport {setSelectedFilters} from \"../../../../actions/actionFunctions\";\r\nimport {setGroheFiltersSearchText} from \"../../../../actions/groheFunctions\";\r\nimport Analytics, {LOOK_JOURNEY_ANALYTIC_EVENTS} from \"../../../../analytics\";\r\n\r\n\r\nconst LookFiltersReset = (props) => {\r\n const {setSelectedFilters, intl, setGroheFiltersSearchText} = props;\r\n\r\n const resetFilterClick = () => {\r\n Analytics.sendClickEvent(LOOK_JOURNEY_ANALYTIC_EVENTS.lookFeaturesFiltersReset);\r\n setSelectedFilters([]);\r\n setGroheFiltersSearchText(\"\");\r\n };\r\n\r\n //console.log(\"availableFilters\", availableFilters);\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n )\r\n};\r\n\r\nconst mapStateToProps = (store) => {\r\n const {lookActiveFeature} = store.lookState;\r\n const {showFilters} = store.filterState;\r\n return {\r\n filtersOpened: showFilters,\r\n lookActiveFeature,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n setSelectedFilters,\r\n setGroheFiltersSearchText,\r\n};\r\n\r\nexport default injectIntl(\r\n connect(mapStateToProps, mapDispatchToProps)(LookFiltersReset)\r\n);\r\n","import { useState, useEffect } from 'react';\r\n\r\nfunction getWindowDimensions() {\r\n const { innerWidth: windowWidth, innerHeight: windowHeight } = window;\r\n return {\r\n windowWidth,\r\n windowHeight\r\n };\r\n}\r\n\r\nexport default function useWindowDimensions() {\r\n const [windowDimensions, setWindowDimensions] = useState(getWindowDimensions());\r\n\r\n useEffect(() => {\r\n function handleResize() {\r\n setWindowDimensions(getWindowDimensions());\r\n }\r\n\r\n window.addEventListener('resize', handleResize);\r\n return () => window.removeEventListener('resize', handleResize);\r\n }, []);\r\n\r\n return windowDimensions;\r\n}\r\n","import {useEffect, useState} from \"react\";\r\nimport {connect} from \"react-redux\";\r\n\r\nimport {getCurrentLayout} from \"../../appLayout\";\r\nimport {getImagePromiseFromLayout} from \"../../../misc/getCanvasImageFromLayout\";\r\n\r\nconst WithCanvasImage = (props) => {\r\n\r\n const {children, visualizersLoadedLength} = props;\r\n\r\n const [canvasSrc, setCanvasSrc] = useState(\"\");\r\n\r\n const setCanvasImage = () => {\r\n const layout = getCurrentLayout();\r\n getImagePromiseFromLayout(layout)\r\n .then((response) => setCanvasSrc(response));\r\n };\r\n\r\n useEffect(() => {\r\n setCanvasImage()\r\n }, [visualizersLoadedLength])\r\n\r\n return children(canvasSrc)\r\n};\r\n\r\nconst mapStateToProps = (store) => {\r\n return {\r\n visualizersLoadedLength: store.serverState.visualizersLoaded.length,\r\n };\r\n};\r\n\r\nexport default connect(mapStateToProps)(WithCanvasImage)\r\n","import React from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport PropTypes from \"prop-types\";\r\n\r\nimport LookListContentHeader from \"./lookListContentHeader\";\r\nimport LookListMain from \"./lookListMain\";\r\nimport WithCartAnimationsChecker from \"../hocs/withCartAnimationsChecker\";\r\n\r\nconst LookListContent = (props) => {\r\n\r\n const {onBackClick} = props;\r\n\r\n return (\r\n \r\n {/*\r\n {(savePostMessage) => (\r\n \r\n )}\r\n {!isMobile || !location || !location.pathname ? null : (\r\n \r\n {!IS_PRODUCT_JOURNEY && !location.pathname.includes(ROUTES.cart) ? (\r\n \r\n )}\r\n
\r\n )\r\n};\r\n\r\nLookListContentHeaderRightSide.propTypes = {\r\n onBackClick: PropTypes.func,\r\n withoutSave: PropTypes.bool,\r\n}\r\n\r\nconst mapStateToProps = (store) => {\r\n const {isMobile} = store.serverState;\r\n const {cartItems} = store.cartState;\r\n const {userIsLoggedIn} = store.userState;\r\n const fabricatorData = store.fabricatorState;\r\n\r\n return {\r\n isMobile,\r\n cartItems,\r\n userIsLoggedIn,\r\n fabricatorData,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n setLookOverlayOpened,\r\n setLookPageOpened,\r\n setLookOpened,\r\n};\r\n\r\nexport default injectIntl(\r\n withRouter(\r\n connect(mapStateToProps, mapDispatchToProps)(LookListContentHeaderRightSide)\r\n )\r\n)\r\n","import {useEffect, useState} from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport {withRouter} from \"react-router-dom\";\r\nimport {getCartItemsCount} from \"../grohe/groheNavigation/groheFunctions\";\r\nimport {LOOK_OVERLAYS} from \"../core/constants\";\r\nimport {setLookOverlayOpened} from \"../../../actions/lookFunctions\";\r\nimport {setShowUnlockCalculations} from \"../../../actions/unlockCalculationsFunctions\";\r\n\r\nconst WithCartAnimationsChecker = (props) => {\r\n\r\n const {children, fabricatorSettings, isPhoneNumberValidated, setLookOverlayOpened, setShowUnlockCalculations, cartItems,\r\n instList} = props;\r\n const [leadPopupWasOpened, setLeadPopupWasOpened] = useState(false);\r\n\r\n const cartItemsLength = getCartItemsCount(cartItems);\r\n const shouldOpenLeadCapturePopup = fabricatorSettings.leadCaptureShoppingCart && !isPhoneNumberValidated && !!(cartItemsLength || instList.length);\r\n\r\n useEffect(() => {\r\n if (shouldOpenLeadCapturePopup) {\r\n setLookOverlayOpened(LOOK_OVERLAYS.leadCapture);\r\n setShowUnlockCalculations(true);\r\n setLeadPopupWasOpened(true);\r\n }\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, []);\r\n\r\n return children(leadPopupWasOpened, shouldOpenLeadCapturePopup)\r\n};\r\n\r\nconst mapStateToProps = (store) => {\r\n const {isPhoneNumberValidated} = store.userState;\r\n const {settings} = store.fabricatorState;\r\n const {cartItems} = store.cartState;\r\n const {instList} = store.instState;\r\n\r\n return {\r\n isPhoneNumberValidated,\r\n fabricatorSettings: settings,\r\n cartItems,\r\n instList,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n setLookOverlayOpened,\r\n setShowUnlockCalculations,\r\n};\r\n\r\nexport default withRouter(\r\n connect(mapStateToProps, mapDispatchToProps)(WithCartAnimationsChecker)\r\n)\r\n","import React from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport {FormattedMessage, injectIntl} from \"react-intl\";\r\nimport {withRouter} from \"react-router-dom\";\r\n\r\nimport Button from \"@mui/material/Button\";\r\nimport SvgIcon from \"@mui/material/SvgIcon\";\r\nimport RequestQuoteOutlinedIcon from '@mui/icons-material/RequestQuoteOutlined';\r\n\r\nimport {LookCartIcon} from \"../../common/icons\";\r\nimport {\r\n getPriceWithCurrency,\r\n getQuotePriceWithTaxes,\r\n getTotalPrice,\r\n isIframe,\r\n toFixedPrice\r\n} from \"../../../misc/helpers\";\r\n// import {showQuoteSavedNotification} from \"../../ui/successNotification\";\r\n// import {saveQuote} from \"../../../api/server-api\";\r\nimport WithAddToCartPostMessage from \"../hocs/withAddToCartPostMessage\";\r\nimport {cartItemInStock} from \"../lookNavigation/lookFunctions2\";\r\nimport Analytics, {LOOK_JOURNEY_ANALYTIC_EVENTS} from \"../../../analytics\";\r\nimport WithOpenMiniCartPostMessage from \"../hocs/withOpenMiniCartPostMessage\";\r\nimport {getCartItemsCount} from \"../grohe/groheNavigation/groheFunctions\";\r\nimport {ROUTES} from \"../../../routes\";\r\nimport {pricingIsLocked} from \"../lookNavigation/lookNavigationFunctions\";\r\nimport {setLookOverlayOpened, setLookPageOpened} from \"../../../actions/lookFunctions\";\r\nimport LookFeaturePriceLocked from \"../lookNavigation/lookMain/lookListFeature/lookFeaturePriceLocked\";\r\nimport {LOOK_OVERLAYS} from \"../core/constants\";\r\nimport {getAnalyticsEcommerceValues} from \"../../../analyticsEcommerceParams\";\r\n\r\n\r\nconst LookListFooter = (props) => {\r\n\r\n const {discountSections, fabricatorData, cartItems, isMobile, lookPageOpened, visualizersLoadedLength, history,\r\n setLookPageOpened, isPhoneNumberValidated, showUnlockCalculations, showTotalItems, setLookOverlayOpened,\r\n intl} = props;\r\n const fabricatorSettings = fabricatorData.settings;\r\n\r\n const isLixil = isIframe() && fabricatorData.isLixil;\r\n const withoutCheckout = !fabricatorSettings.checkout;\r\n const totalPrice = getTotalPrice();\r\n let grandTotal = getQuotePriceWithTaxes(totalPrice, discountSections);\r\n\r\n const requestQuoteClick = () => {\r\n Analytics.sendClickEvent(LOOK_JOURNEY_ANALYTIC_EVENTS.lookListRequestQuote);\r\n setLookOverlayOpened(LOOK_OVERLAYS.leadCapture, \"quotation\");\r\n };\r\n\r\n const viewCartClick = (openMiniCartPostMessage) => {\r\n Analytics.sendClickEvent(LOOK_JOURNEY_ANALYTIC_EVENTS.lookListOpenMiniCart);\r\n const {currency, value, items} = getAnalyticsEcommerceValues();\r\n Analytics.sendEcommerceEvent(\"view_cart\", {currency, value, items});\r\n openMiniCartPostMessage();\r\n };\r\n\r\n const disabled = cartItems.every(cartItem => !cartItemInStock(cartItem) || cartItem.isRemoved || !cartItem.quantity);\r\n\r\n let itemsToCount = getCartItemsCount(cartItems, intl);\r\n let {pricingLocked, showPrice} = pricingIsLocked();\r\n if (!pricingLocked && fabricatorSettings.enableQuote && !isPhoneNumberValidated) {\r\n pricingLocked = true;\r\n }\r\n const hideTotal = !showPrice || (showUnlockCalculations && !showTotalItems.includes(\"total\"));\r\n const hideCheckout = (showUnlockCalculations && !showTotalItems.includes(\"checkout\"));\r\n\r\n const getListFooterButtonText = () => {\r\n if (fabricatorSettings.enableQuote && !isPhoneNumberValidated) {\r\n return \"leadCapturePopup.getQuote\"\r\n } else if (withoutCheckout) {\r\n return \"leadCapturePopup.saveDesignButton\"\r\n } else if (pricingLocked) {\r\n return \"look.list.footer.addToCartButtonLocked\"\r\n // } else if (fabricatorSettings.checkout && fabricatorSettings.hasPaymentGateway) {\r\n // return \"buttons.checkout\"\r\n } else {\r\n return \"look.list.footer.addToCartButton\" // lixil text\r\n }\r\n }\r\n\r\n const checkoutClick = (addToCartPostMessage) => {\r\n Analytics.sendClickEvent(LOOK_JOURNEY_ANALYTIC_EVENTS.lookListAddToCart);\r\n if (isLixil || !fabricatorSettings.checkout) {\r\n addToCartPostMessage();\r\n } else if (pricingLocked) {\r\n window.clearTimeout(window.leadCaptureTimeoutId);\r\n setLookOverlayOpened(LOOK_OVERLAYS.leadCapture);\r\n } else {\r\n setLookPageOpened(ROUTES.cart);\r\n history.push(ROUTES.cart);\r\n }\r\n // saveQuote({\r\n // submit: true,\r\n // })\r\n // .then((responseData) => {\r\n // document.kvConfig.jobId = responseData.jobId;\r\n // showQuoteSavedNotification(\"successNotification.titleQuoteCreated\");\r\n // setIsLoading(false);\r\n // })\r\n // .catch(() => {\r\n // setIsLoading(false);\r\n // })\r\n };\r\n\r\n return (\r\n \r\n )\r\n};\r\n\r\nconst mapStateToProps = (store) => {\r\n const fabricatorData = store.fabricatorState;\r\n const {discountSections} = store.priceWorksheetState;\r\n const {cartItems, cItemsAddedToParentCart, sureTax} = store.cartState;\r\n const {isMobile, visualizersLoaded} = store.serverState;\r\n const {lookPageOpened} = store.lookState;\r\n const {isPhoneNumberValidated} = store.userState; // to update component when user is logged in\r\n const {showUnlockCalculations, showTotalItems} = store.unlockCalculationsState;\r\n\r\n return {\r\n fabricatorData,\r\n discountSections,\r\n cartItems,\r\n cItemsAddedToParentCart,\r\n isMobile,\r\n lookPageOpened,\r\n visualizersLoadedLength: visualizersLoaded.length,\r\n isPhoneNumberValidated,\r\n sureTax, // to update when response received\r\n showUnlockCalculations,\r\n showTotalItems\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n setLookPageOpened,\r\n setLookOverlayOpened,\r\n};\r\n\r\nexport default injectIntl(\r\n withRouter(\r\n connect(mapStateToProps, mapDispatchToProps)(LookListFooter)\r\n )\r\n)\r\n","import store from './../store';\r\nimport {useEffect, useState} from \"react\";\r\n\r\nimport {getCurrentLayout} from \"../bvcomponents/appLayout\";\r\nimport {setAllFeaturesLoaded} from \"./serverFunctions\";\r\nimport JsonApi from \"../api/jsonApi\";\r\nimport {useIsMounted} from \"../misc/helperHooks\";\r\nimport {getBvFeatures} from \"../api/server-api\";\r\n\r\n\r\nexport const downloadAllFeatures = async () => {\r\n const mainResponse = await JsonApi.getBathroomVisualizerData(100000);\r\n if (!mainResponse || !mainResponse.data || !mainResponse.data.features) {\r\n return false\r\n }\r\n const layout = getCurrentLayout();\r\n layout.loadNewFeatures(mainResponse.data);\r\n layout.getFeatures().forEach((parentGroup) => {\r\n parentGroup.relatedItems.forEach((relatedItem) => {\r\n relatedItem.allFeaturesReceived = true;\r\n })\r\n })\r\n store.dispatch(setAllFeaturesLoaded(document.kvConfig.visualizerType))\r\n return true\r\n};\r\n\r\nexport const useFeaturesRoomLayoutsChecker = () => { // not used for now!\r\n\r\n const [featuresLoaded, setFeaturesLoaded] = useState(false);\r\n const isMounted = useIsMounted();\r\n\r\n const checkFeatures = async () => {\r\n const layout = getCurrentLayout();\r\n const featureGroupsObjects = layout.getActiveFeatures(true, false, true)\r\n .filter(fgObject => !fgObject.partId.includes(\"decor_\") && !fgObject.partId.includes(\"attachment\")); // they are already received\r\n // console.log(\"featureGroupsObjects\", featureGroupsObjects);\r\n let needToRequestNames = [];\r\n featureGroupsObjects.forEach((featureGroupObject) => {\r\n if (featureGroupObject.featureGroup\r\n && !featureGroupObject.realFeaturesReceived\r\n && featureGroupObject.cartFeature\r\n && featureGroupObject.cartFeature.dbFeature\r\n && featureGroupObject.cartFeature.dbFeature.sharedFeatureName\r\n && !needToRequestNames.includes(featureGroupObject.cartFeature.dbFeature.sharedFeatureName)\r\n && (!featureGroupObject.featureGroup.alreadyRequestedFeatureNames\r\n || !featureGroupObject.featureGroup.alreadyRequestedFeatureNames.includes(featureGroupObject.cartFeature.dbFeature.sharedFeatureName))) {\r\n if (!featureGroupObject.featureGroup.alreadyRequestedFeatureNames) {\r\n featureGroupObject.featureGroup.alreadyRequestedFeatureNames = [];\r\n }\r\n needToRequestNames.push(featureGroupObject.cartFeature.dbFeature.sharedFeatureName)\r\n featureGroupObject.featureGroup.alreadyRequestedFeatureNames.push(featureGroupObject.cartFeature.dbFeature.sharedFeatureName)\r\n }\r\n });\r\n console.log(\"needToRequestNames\", needToRequestNames);\r\n if (!needToRequestNames.length) {\r\n setFeaturesLoaded(true)\r\n return\r\n }\r\n const missingSkusResponse = await getBvFeatures(null, needToRequestNames, true);\r\n if (missingSkusResponse && missingSkusResponse.data) {\r\n console.log(\"missingSkusResponse\", missingSkusResponse.data);\r\n layout.loadNewFeatures(missingSkusResponse.data);\r\n }\r\n if (isMounted()) {\r\n setFeaturesLoaded(true)\r\n }\r\n }\r\n\r\n useEffect(() => {\r\n checkFeatures()\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [])\r\n\r\n return featuresLoaded\r\n}\r\n","import React from \"react\";\r\nimport PropTypes from \"prop-types\";\r\nimport {connect} from \"react-redux\";\r\n\r\nimport CheckIcon from '@mui/icons-material/Check';\r\n\r\nimport {featureInterface} from \"../../../../../interfaces/featureInterface\";\r\nimport {checkIfFeatureDisabled} from \"../../lookFunctions\";\r\n\r\nconst LookListFeatureCheckmark = (props) => {\r\n\r\n const {lookFeature, lookActiveCategory, lookActiveFeature, isEmpty} = props;\r\n\r\n if (!lookActiveCategory || isEmpty || !lookActiveFeature) {\r\n return null\r\n }\r\n\r\n if (lookFeature.getSplittedFeatureName() !== lookActiveFeature.getSplittedFeatureName()) {\r\n return null\r\n }\r\n\r\n const parent = lookFeature.getParent();\r\n const alreadyDisabled = checkIfFeatureDisabled(lookFeature, parent, true);\r\n\r\n if (alreadyDisabled) {\r\n return null\r\n }\r\n\r\n return (\r\n */}\r\n {/* */}\r\n {/* */}\r\n {/* {isMobile ? null : (*/}\r\n {/* */}\r\n {/* */}\r\n {/* */}\r\n {/* )}*/}\r\n {/*
*/}\r\n {withoutSave || fabricatorData.isGrohe || (!IS_PRODUCT_JOURNEY && isMobile) ? null : (\r\n saveButtonClick(savePostMessage)}>\r\n \r\n \r\n {isMobile ? null : (\r\n \r\n \r\n \r\n )}\r\n
\r\n )}\r\n \r\n \r\n \r\n
\r\n ) : null}\r\n {/*{IS_PRODUCT_JOURNEY && (location.pathname === ROUTES.cartLogin) ? (*/}\r\n {/* */}\r\n {/*) : null}*/}\r\n {/*{IS_PRODUCT_JOURNEY && (location.pathname === ROUTES.cartRegister) ? (*/}\r\n {/* */}\r\n {/*) : null}*/}\r\n \r\n \r\n
\r\n )\r\n};\r\n\r\nLookListFeatureCheckmark.propTypes = {\r\n lookFeature: PropTypes.shape(featureInterface),\r\n isEmpty: PropTypes.bool,\r\n}\r\n\r\nconst mapStateToProps = (store) => {\r\n const {lookActiveFeature, lookActiveCategory} = store.lookState;\r\n const {canvasCount} = store.bathroomVisualizerState;\r\n return {\r\n lookActiveFeature,\r\n lookActiveCategory,\r\n canvasCount\r\n };\r\n};\r\n\r\nexport default connect(mapStateToProps)(LookListFeatureCheckmark)\r\n","import React, {Fragment, useEffect} from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport $ from \"jquery\";\r\n\r\nimport {\r\n setUnlockCalculationsStep, showUnlockCalculationsCartItems,\r\n showUnlockCalculationsTotalItems\r\n} from \"../../../../../actions/unlockCalculationsFunctions\";\r\nimport {CART_ITEM_ADDED_BY} from \"../../../../shoppingCart/cartItemInterface\";\r\nimport UnlockCalculationStep from \"./unlockCalculationStep\";\r\nimport {IS_PRODUCT_JOURNEY} from \"../../../../../config\";\r\nimport {sortCartItemsForListPage} from \"../../../lookNavigation/lookFunctions2\";\r\nimport {ROUTES} from \"../../../../../routes\";\r\nimport {showWizardInsteadOfQT} from \"../../../lookNavigation/lookMain/lookWizard/lookWizardFunctions\";\r\nimport {WIZARD_GROUP_TYPES} from \"../../../../../interfaces/wizardItemInterface\";\r\nimport {isSameVisualizerWizard} from \"../../../lookNavigation/lookMain/lookWizard/lookWizardFunctions2\";\r\n\r\nexport const getUnlockCalculationsCartItems = (cartItems, wizardList, wizardIsActive, allWizardsValues, lookPageOpened, quotes) => {\r\n let cartItemsToInclude = [];\r\n if (showWizardInsteadOfQT(wizardList, wizardIsActive)) {\r\n quotes.forEach((quote, quoteIndex) => {\r\n wizardList.forEach(wizardItem => {\r\n const existingAllObject = allWizardsValues.find(wizSelObject => {\r\n return wizSelObject.wizardItemId === wizardItem.id && wizSelObject.quoteIndex === quoteIndex\r\n && isSameVisualizerWizard(wizSelObject)\r\n });\r\n if (existingAllObject && existingAllObject.wizardSelectedValues) {\r\n Object.keys(existingAllObject.wizardSelectedValues).forEach(key => {\r\n if (existingAllObject.wizardSelectedValues[key].wizardGroup\r\n && existingAllObject.wizardSelectedValues[key].wizardGroup.nodeType === WIZARD_GROUP_TYPES.custom) {\r\n cartItemsToInclude.push({\r\n id: quoteIndex + existingAllObject.wizardSelectedValues[key].wizardGroup.id\r\n });\r\n }\r\n let currentCartItems = cartItems.filter(cartItem => {\r\n return cartItem.cartFeature && (cartItem.currentQuote === quoteIndex)\r\n && +key === cartItem.fromWizardStep\r\n && !cartItemsToInclude.includes(cartItem.id)\r\n });\r\n if (currentCartItems.length) {\r\n cartItemsToInclude = [...cartItemsToInclude, ...currentCartItems];\r\n }\r\n })\r\n }\r\n })\r\n cartItems.forEach(cartItem => {\r\n if (!cartItemsToInclude.some(cItem => cItem.id === cartItem.id)) {\r\n cartItemsToInclude = [...cartItemsToInclude, cartItem];\r\n }\r\n })\r\n })\r\n } else {\r\n cartItemsToInclude = cartItems;\r\n }\r\n if (IS_PRODUCT_JOURNEY) {\r\n cartItemsToInclude = cartItemsToInclude.filter(cItem => cItem.addedBy === CART_ITEM_ADDED_BY.user);\r\n } else if (lookPageOpened === ROUTES.list) {\r\n cartItemsToInclude = sortCartItemsForListPage(cartItemsToInclude)\r\n }\r\n\r\n return cartItemsToInclude\r\n}\r\n\r\nconst UnlockCalculationSteps = (props) => {\r\n\r\n const {setUnlockCalculationsStep, cartItems, showUnlockCalculationsCartItems, showUnlockCalculationsTotalItems,\r\n lookPageOpened, wizardList, wizardIsActive, allWizardsValues, quotes} = props;\r\n\r\n const cartItemsToInclude = getUnlockCalculationsCartItems(cartItems, wizardList, wizardIsActive,\r\n allWizardsValues, lookPageOpened, quotes);\r\n\r\n useEffect(() => {\r\n runAnimations()\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n return () => {\r\n showUnlockCalculationsCartItems([]);\r\n showUnlockCalculationsTotalItems([]);\r\n setUnlockCalculationsStep(0);\r\n }\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, []);\r\n\r\n const animateCartItems = async () => {\r\n let showCartItems = [];\r\n for (const [elementIndex, element] of cartItemsToInclude.entries()) {\r\n // const waitTime = this.props.cartItems.length < 7 ? 500*(index + 1) : 300*(index + 1);\r\n if (elementIndex <= 1) {\r\n await new Promise(resolve => setTimeout(resolve, 750));\r\n showCartItems.push(element.id);\r\n showUnlockCalculationsCartItems([...showCartItems]);\r\n } else {\r\n setTimeout(() => {\r\n showCartItems.push(element.id);\r\n showUnlockCalculationsCartItems([...showCartItems]);\r\n }, 750 * (elementIndex - 1))\r\n }\r\n }\r\n };\r\n\r\n const showTotalItems = async () => {\r\n await new Promise(resolve => setTimeout(resolve, 500));\r\n showUnlockCalculationsTotalItems([\"tax\"]);\r\n await new Promise(resolve => setTimeout(resolve, 1000));\r\n showUnlockCalculationsTotalItems([\"tax\", \"total\"]);\r\n await new Promise(resolve => setTimeout(resolve, 1500));\r\n showUnlockCalculationsTotalItems([\"tax\", \"total\", \"checkout\"]);\r\n };\r\n\r\n const runAnimations = async () => {\r\n await new Promise(resolve => setTimeout(resolve, 500));\r\n await animateCartItems();\r\n await new Promise(resolve => setTimeout(resolve, 1500));\r\n setUnlockCalculationsStep(1);\r\n await new Promise(resolve => setTimeout(resolve, 2000));\r\n setUnlockCalculationsStep(2);\r\n await showTotalItems();\r\n await exitAnimations();\r\n };\r\n\r\n const exitAnimations = async () => {\r\n const overlayElement = document.querySelector(\".look-overlay--style\");\r\n if (overlayElement) {\r\n setUnlockCalculationsStep(3);\r\n $(overlayElement).fadeOut(300, () => {\r\n window.clearTimeout(window.leadCaptureTimeoutId);\r\n window.leadCaptureTimeoutId = setTimeout(() => {\r\n setUnlockCalculationsStep(4);\r\n $(overlayElement).fadeIn(300);\r\n }, 4000);\r\n })\r\n } else {\r\n setUnlockCalculationsStep(3);\r\n }\r\n };\r\n\r\n return (\r\n \r\n
\r\n )\r\n};\r\n\r\nLookListActiveFeatureMobileButton.propTypes = {\r\n lookFeature: PropTypes.shape(featureInterface).isRequired,\r\n isActive: PropTypes.bool,\r\n isWizard: PropTypes.bool,\r\n}\r\n\r\nconst mapStateToProps = (store) => {\r\n const {canvasCount} = store.bathroomVisualizerState;\r\n const {lookLockedTutorial} = store.lookState;\r\n\r\n return {\r\n canvasCount,\r\n lookLockedTutorial,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n setLookActiveFeature,\r\n setWizardShowFeatureSection,\r\n};\r\n\r\nexport default withRouter(\r\n injectIntl(\r\n connect(mapStateToProps, mapDispatchToProps)(LookListActiveFeatureMobileButton)\r\n )\r\n)\r\n","import React, { Component } from 'react';\r\nimport { connect } from \"react-redux\";\r\nimport PropTypes from \"prop-types\";\r\nimport {FormattedMessage} from \"react-intl\";\r\n\r\nimport { toggleInstOpened } from \"../../actions/actionFunctions\";\r\n\r\nclass InstallButton extends Component {\r\n\r\n static propTypes = {\r\n questionShown: PropTypes.bool\r\n };\r\n\r\n render() {\r\n let fabSettings = this.props.fabricatorSettings;\r\n return (\r\n \r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = (store) => {\r\n return {\r\n questionNoClicked: store.cartState.questionNoClicked,\r\n instOpened: store.instState.instOpened,\r\n fabricatorSettings: store.fabricatorState.settings,\r\n };\r\n};\r\n\r\nexport default connect(mapStateToProps, {\r\n toggleInstOpened\r\n})(InstallButton);\r\n","import React from 'react';\r\nimport { connect } from \"react-redux\";\r\nimport {FormattedMessage} from \"react-intl\";\r\nimport {toggleShowAllQuotesCartItemsList, toggleShowMobileQuotes} from \"../../actions/shoppingCartFunctions\";\r\n\r\nconst ShoppingCartListSwitcher = (props) => {\r\n\r\n const {quotes, showAllQuotesCartItemsList, toggleShowAllQuotesCartItemsList, toggleShowMobileQuotes} = props;\r\n\r\n if (quotes.length <= 1) {\r\n return null\r\n }\r\n\r\n const handleButtonClick = () => {\r\n toggleShowMobileQuotes(false);\r\n toggleShowAllQuotesCartItemsList(!showAllQuotesCartItemsList);\r\n };\r\n\r\n return (\r\n \r\n
\r\n )\r\n};\r\n\r\nconst mapStateToProps = (store) => {\r\n const {showAllQuotesCartItemsList} = store.cartState;\r\n return {\r\n quotes: store.quotesState.quotes,\r\n showAllQuotesCartItemsList,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n toggleShowAllQuotesCartItemsList,\r\n toggleShowMobileQuotes\r\n};\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(ShoppingCartListSwitcher);\r\n","import React from 'react';\r\nimport { connect } from \"react-redux\";\r\nimport {FormattedMessage} from \"react-intl\";\r\n\r\nimport Analytics from \"../../../analytics\";\r\nimport {changeStateToQuote} from \"../../../actions/actionFunctions\";\r\nimport {toggleShowAdvancedQuoting} from \"../../../actions/advancedQuotingFunctions\";\r\nimport {toggleShowAllQuotesCartItemsList, toggleShowMobileQuotes} from \"../../../actions/shoppingCartFunctions\";\r\n\r\nconst AdvancedQuotingSwitcher = (props) => {\r\n\r\n const {showAdvancedQuoting, changeStateToQuote, toggleShowAdvancedQuoting, toggleShowMobileQuotes} = props;\r\n\r\n if (!document.kvConfig.isBackend) {\r\n return null\r\n }\r\n\r\n const handleButtonClick = () => {\r\n Analytics.sendClickEvent(`advanced-quoting-click-${!showAdvancedQuoting ? \"on\" : \"off\"}`);\r\n changeStateToQuote();\r\n toggleShowMobileQuotes(false);\r\n toggleShowAdvancedQuoting(!showAdvancedQuoting);\r\n };\r\n\r\n return (\r\n \r\n
\r\n )\r\n};\r\n\r\nconst mapStateToProps = (store) => {\r\n const {showAdvancedQuoting} = store.advancedQuotingState;\r\n return {\r\n showAdvancedQuoting,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n changeStateToQuote,\r\n toggleShowAdvancedQuoting,\r\n toggleShowAllQuotesCartItemsList,\r\n toggleShowMobileQuotes\r\n};\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(AdvancedQuotingSwitcher);\r\n","import React from \"react\";\r\nimport {connect} from \"react-redux\";\r\nimport {FormattedMessage} from \"react-intl\";\r\n// import {setJobId} from \"../../../actions/actionFunctions\";\r\nimport {setAssignQuoteCloneMode, toggleShowAssignQuotePopup} from \"../../../actions/assignPopupFunctions\";\r\nimport Analytics from \"../../../analytics\";\r\nimport Config from \"../../../config\";\r\n\r\nconst CloneQuoteButton = (props) => {\r\n\r\n // const {setJobId, toggleShowAssignQuotePopup} = props;\r\n const {toggleShowAssignQuotePopup, fabricatorData, setAssignQuoteCloneMode} = props;\r\n\r\n const cloneButtonIsVisible = Config.isDevMode() || (fabricatorData.isCaesarStone && document.kvConfig.showBackToDashboard);\r\n if (!cloneButtonIsVisible) {\r\n return null\r\n }\r\n\r\n const handleCloneQuoteClick = () => {\r\n Analytics.sendClickEvent(\"order-complete-clone-quote\");\r\n // document.kvConfig.jobId = null; // clear current job\r\n // setJobId(0); // clear current job\r\n setAssignQuoteCloneMode(true); // show new assign quote popup\r\n toggleShowAssignQuotePopup(true); // show new assign quote popup\r\n }\r\n\r\n return (\r\n \r\n )\r\n};\r\n\r\nconst mapStateToProps = (store) => {\r\n return {\r\n fabricatorData: store.fabricatorState,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n // setJobId,\r\n setAssignQuoteCloneMode,\r\n toggleShowAssignQuotePopup\r\n};\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(CloneQuoteButton)\r\n\r\n","import React, { Component } from 'react';\r\nimport { connect } from \"react-redux\";\r\n\r\nimport {baseNewImagesPath} from \"../assets\";\r\nimport MobileMenu from \"../ui/mobileMenu\";\r\nimport ShoppingCartButton from \"../ui/shoppingCartButton\";\r\nimport UserLoginButton from './../ui/userLoginButton';\r\n\r\nclass ProjectScopeMobileHeader extends Component {\r\n\r\n render() {\r\n const fabricatorSettings = this.props.fabricatorData.settings;\r\n const hardCodedLogo = `${baseNewImagesPath}images/Logos/QuoteCountertops-Logo.svg`;\r\n const logoStyles = this.props.fabricatorData.logoUrl ? {} : {\r\n maxWidth: \"500px\",\r\n width: \"100%\"\r\n };\r\n const initialFlowIsRunning = document.kvConfig.initialFlowEnabled && this.props.initialFlowStep !== 3;\r\n return (\r\n \r\n \r\n : null}\r\n
\r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = (store) => {\r\n return {\r\n fabricatorData: store.fabricatorState,\r\n initialFlowStep: store.initialFlowState.initialFlowStep\r\n };\r\n};\r\n\r\nexport default connect(mapStateToProps)(ProjectScopeMobileHeader);\r\n","import React from 'react';\r\nimport { connect } from \"react-redux\";\r\nimport $ from \"jquery\";\r\nimport {FormattedMessage} from \"react-intl\";\r\n\r\nimport { setCameFromPage, toggleSelectionWindow, toggleBathroomVisualizerOpen, changeActivePartRelatedItemIndex,\r\n setQtActiveCategory } from '../../actions/actionFunctions';\r\nimport { homePage, getFeatureGroupIconURL } from \"../bvComponent/core/assets\";\r\n\r\nimport ActionTypes from \"../../misc/actionTypes\";\r\nimport Analytics from './../../analytics';\r\nimport ProjectScopeFunctions from './projectScopeFunctions';\r\n\r\nclass ProjectScopeSections extends ProjectScopeFunctions {\r\n\r\n componentDidMount() {\r\n $(window).on(ActionTypes.UPDATE_ALL_ITEMS, this.updateSections);\r\n }\r\n componentWillUnmount() {\r\n $(window).off(ActionTypes.UPDATE_ALL_ITEMS, this.updateSections);\r\n }\r\n\r\n updateSections = () => {\r\n this.forceUpdate();\r\n };\r\n\r\n goToMaterialsPage = (subPart, parentName) => {\r\n Analytics.sendClickEvent('go-to-materials-' + subPart.partId);\r\n this.goToMaterialsPageCommon(subPart, parentName)\r\n };\r\n\r\n checkForWallsComplexGroup = (qtCategory) => {\r\n return qtCategory.subParts\r\n .map((subPart, subPartIndex) => {\r\n const parent = subPart.part.getParent && subPart.part.getParent(); // floor check\r\n if (parent && parent.partName === \"Walls\" && parent.subParts().every(wallsSubPart => {\r\n return qtCategory.subParts.some(qtCatSubPart => qtCatSubPart.part.partId === wallsSubPart.part.partId)\r\n })) { // here we check - if all walls are included - show just the first one\r\n if (subPartIndex) {\r\n return null\r\n } else {\r\n subPart.part.homePageTitle = \"Walls\";\r\n return subPart\r\n }\r\n }\r\n return subPart\r\n })\r\n .filter(subPart => subPart)\r\n };\r\n\r\n render() {\r\n const sections = this.getSections();\r\n return (\r\n \r\n
\r\n {this.props.fabricatorData.received ? (\r\n \r\n 
\r\n
\r\n ) : null}\r\n {fabricatorSettings.showPricing && !initialFlowIsRunning ? (\r\n \r\n
\r\n ): null}\r\n {(fabricatorSettings.leadCaptureOnQuote && !initialFlowIsRunning &&\r\n !(document.kvConfig.isBackend && document.kvConfig.jobId && document.kvConfig.canSaveQuote))\r\n ? \r\n {sections.map((section, index) => {\r\n return section.items && section.items.length ? (\r\n \r\n \r\n
\r\n \r\n ) : null\r\n })}\r\n
\r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = (store) => {\r\n return {\r\n layoutParts: store.stepsState.layoutParts,\r\n };\r\n};\r\n\r\nexport default connect(mapStateToProps, {\r\n toggleBathroomVisualizerOpen,\r\n toggleSelectionWindow,\r\n setCameFromPage,\r\n changeActivePartRelatedItemIndex,\r\n setQtActiveCategory\r\n})(ProjectScopeSections);\r\n","import React, { Component } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { connect } from \"react-redux\";\r\nimport {FormattedMessage, injectIntl} from \"react-intl\";\r\nimport {withRouter} from \"react-router-dom\";\r\n\r\nimport {\r\n toggleSelectionFeatureInfo,\r\n toggleUserPopup,\r\n changeSelectionInfoQuantity,\r\n unlockPricing,\r\n changeMaterialsInfoFeatureModules,\r\n addToRecentlyViewed,\r\n setQtActiveCategory,\r\n togglePulseFeatureInfoQuantity,\r\n setCameFromPage\r\n} from \"../../../actions/actionFunctions\";\r\nimport Quantity from \"../../ui/quantity\";\r\nimport InstView from \"../../installation/instView\";\r\nimport Analytics from './../../../analytics';\r\nimport {getCurrentLayout} from \"../../appLayout\";\r\nimport FeatureInfoAssociated from \"./featureInfoAssociated\";\r\nimport FeatureInfoDesc from \"./featureInfoDesc\";\r\nimport FeatureInfoPrice from \"./featureInfoPrice\";\r\nimport FeatureInfoImage from \"./featureInfoImage\";\r\nimport FeatureInfoDescription from \"./featureInfoDescription\";\r\nimport FeatureInfoImagesMobile from \"./featureInfoImagesMobile\";\r\nimport {\r\n canShowSqftButtonForFeature,\r\n canShowSqftCabinetButtonForFeature,\r\n getFeatureIsLocked,\r\n getFeatureUnit\r\n} from \"../../../misc/helpers\";\r\nimport AddProductNoteButton from \"../../ui/addProductNoteButton\";\r\nimport AddProductNoteEditor from \"./addProductNoteEditor\";\r\nimport {MEASURE_UNITS, SQFT_GROUP} from \"../../sqft/constants\";\r\nimport {COUNTERTOP_GROUP} from \"../../kvComponent/core/constants\";\r\nimport {toggleNavItemPositionModal} from \"../../../actions/navigationFunctions\";\r\n// import {setCartItemEditFeature} from \"../../../actions/shoppingCartFunctions\";\r\nimport {enableSquareFootage, setSqftFromFeature, setSquareFootageGroup} from \"../../../actions/sqftFunctions\";\r\nimport {isEnglish} from \"../../../translatesProvider\";\r\nimport {showWizardInsteadOfQT} from \"../../look/lookNavigation/lookMain/lookWizard/lookWizardFunctions\";\r\nimport {getFeatureGroupFeaturesQuantity} from \"../../look/lookNavigation/lookNavigationFunctions\";\r\n\r\nclass FeatureInfo extends Component {\r\n\r\n static propTypes = {\r\n features: PropTypes.array.isRequired,\r\n handleFeatureClick: PropTypes.func.isRequired,\r\n changeActivePartRelatedItem: PropTypes.func.isRequired,\r\n activePart: PropTypes.object,\r\n };\r\n\r\n componentDidMount() {\r\n const layout = getCurrentLayout();\r\n const activeFeature = this.props.selectionFeatureInfo;\r\n if (this.props.fabricatorData.settings.showRecentlyViewedItems) {\r\n this.props.addToRecentlyViewed(activeFeature);\r\n }\r\n // console.log('selectionFeatureInfo', this.props.selectionFeatureInfo);\r\n const navItemParent = activeFeature.getParent();\r\n const parentSimple = (navItemParent.partName === \"Floor\" && navItemParent.partId !== \"shower_floor\")\r\n || navItemParent.partName === \"Toilet\"\r\n || (navItemParent.partName === \"Ceiling\" &&\r\n (document.kvConfig.visualizerType === \"Bathroom\" || document.kvConfig.visualizerType === \"BV\"))\r\n || navItemParent.partName === \"Window\";\r\n // console.log('parentSimple', parentSimple);\r\n // console.log('navItemParent', navItemParent);\r\n if (parentSimple && !layout.qtCategories) {\r\n this.props.changeActivePartRelatedItem(0)\r\n } else {\r\n const {wizardList, wizardIsActive} = this.props;\r\n let subParts = [];\r\n if (layout.qtCategories && this.props.qtActiveCategory && !showWizardInsteadOfQT(wizardList, wizardIsActive)) {\r\n const qtActiveCategory = layout.qtCategories.find(qtCategory => qtCategory.name === this.props.qtActiveCategory);\r\n subParts = qtActiveCategory ? qtActiveCategory.subParts : this.props.activePart.subParts(false)\r\n } else {\r\n subParts = this.props.activePart.subParts(false);\r\n }\r\n\r\n const nextActivePartRelatedItemIndex = subParts.findIndex((subPart) => {\r\n return subPart.part.partId === navItemParent.partId\r\n });\r\n // console.log('nextActivePartRelatedItemIndex', nextActivePartRelatedItemIndex);\r\n this.props.changeActivePartRelatedItem(nextActivePartRelatedItemIndex)\r\n }\r\n // console.log('cartItem', cartItem);\r\n if (this.props.selectionInfoQuantity <= 1) {\r\n this.props.changeSelectionInfoQuantity(this.getDefaultFeatureQuantity());\r\n }\r\n\r\n if ((document.kvConfig.visualizerType === \"Kitchen\" || document.kvConfig.visualizerType === \"KV\")\r\n && activeFeature.partId === \"top_cabinet\" && activeFeature.metaData[\"Module\"]) {\r\n const activeFeatures = this.props.activePart.layout.getActiveFeatures();\r\n const materialsInfoFeatureModules = activeFeatures\r\n .filter(feature => feature.partId.includes(\"top_cabinet_module\"))\r\n .map(feature => {\r\n const existInCart = this.props.cartItems.find(cartItem => cartItem.partId === feature.partId);\r\n return {\r\n ...feature,\r\n quantity: existInCart ? existInCart.quantity : feature.quantity\r\n }\r\n });\r\n // console.log(\"this.props.cartItems\", cartItems);\r\n // console.log(\"this.props.activePart.layout.getActiveFeatures\", activeFeatures);\r\n this.props.changeMaterialsInfoFeatureModules(materialsInfoFeatureModules)\r\n }\r\n\r\n if (this.props.navItemPositionModal && this.props.navItemPositionModal.popupOpened) {\r\n this.props.toggleNavItemPositionModal({\r\n popupOpened: false,\r\n });\r\n }\r\n }\r\n\r\n componentWillUnmount() {\r\n this.props.toggleSelectionFeatureInfo(null);\r\n this.props.changeMaterialsInfoFeatureModules([]);\r\n this.props.changeSelectionInfoQuantity(1);\r\n // if (this.props.cartItemEditFeature && !window.location.href.includes(\"sqft\")) {\r\n // this.props.setCartItemEditFeature(null);\r\n // }\r\n }\r\n\r\n getDefaultFeatureQuantity = () => {\r\n const activeFeature = this.props.selectionFeatureInfo;\r\n // const cartItem = this.props.cartItems.find(cartItem => {\r\n // return (cartItem.cartFeature.dbFeature.id === activeFeature.dbFeature.id)\r\n // && (cartItem.currentQuote === this.props.activeQuoteIndex)\r\n // });\r\n // if (cartItem) {\r\n // return cartItem.quantity\r\n // }\r\n if (this.props.cartItemEditFeature) {\r\n return this.props.cartItemEditFeature.quantity\r\n } else if (this.props.advancedQuotingSearchItem) {\r\n return this.props.advancedQuotingSearchItem.quantity\r\n }\r\n\r\n const featureGroup = activeFeature.getParent();\r\n\r\n const sqftQuantity = (activeFeature.sqftQuantity && activeFeature.sqftQuantity[this.props.activeQuoteIndex])\r\n || (featureGroup.sqftQuantity && featureGroup.sqftQuantity[this.props.activeQuoteIndex]);\r\n if (sqftQuantity) {\r\n return sqftQuantity\r\n }\r\n\r\n const defaultOrPositionsQuantity = getFeatureGroupFeaturesQuantity(activeFeature, featureGroup);\r\n\r\n if (defaultOrPositionsQuantity && (defaultOrPositionsQuantity !== 1)) {\r\n return defaultOrPositionsQuantity\r\n }\r\n\r\n const zeroQuantityPartIdsArray = [\"vanity_countertop\", \"vanity_backsplash\", \"countertop\", \"backsplash\", \"center_island_countertop\"];\r\n if (zeroQuantityPartIdsArray.includes(activeFeature.partId)) {\r\n return 0\r\n }\r\n\r\n return 1;\r\n };\r\n\r\n handleChangeItemQuantity = (quantity) => {\r\n if (quantity && this.props.pulseFeatureInfoQuantity) {\r\n this.props.togglePulseFeatureInfoQuantity(false);\r\n }\r\n this.props.changeSelectionInfoQuantity(quantity);\r\n };\r\n\r\n handleSQFTButtonClick = () => {\r\n Analytics.sendClickEvent(\"sqft-opened\");\r\n this.props.setCameFromPage(this.props.selectionFeatureInfo);\r\n this.props.setSqftFromFeature(this.props.cartItemEditFeature || {cartFeature: this.props.selectionFeatureInfo});\r\n //enable sqft trough redux\r\n this.props.enableSquareFootage(true);\r\n\r\n //enable sqft trough url\r\n //hashHistory.push(\"sqft\");\r\n };\r\n\r\n handleSQFTCabnetButtonClick = () => {\r\n Analytics.sendClickEvent(\"sqft-opened\");\r\n this.props.setCameFromPage(this.props.selectionFeatureInfo);\r\n this.props.setSqftFromFeature(this.props.cartItemEditFeature || {cartFeature: this.props.selectionFeatureInfo});\r\n //enable sqft trough redux\r\n this.props.enableSquareFootage(true);\r\n this.props.setSquareFootageGroup(SQFT_GROUP.cabinets);\r\n\r\n //enable sqft trough url\r\n //hashHistory.push(\"sqft?cabinets=1\");\r\n };\r\n\r\n getFeatureModules = () => {\r\n const activeFeatures = this.props.activePart.layout.getActiveFeatures();\r\n return this.props.materialsInfoFeatureModules.map((materialsQuantity, materialsQuantityIndex) => {\r\n const activeFeature = activeFeatures.find(feature => feature.partId === materialsQuantity.partId);\r\n return (\r\n \r\n
\r\n - \r\n {section.items.map((subPart, index) => {\r\n // console.log('subPart.partId', subPart.part.partId);\r\n const image = subPart.part.featuredImage || homePage[subPart.part.partId]\r\n || subPart.part.customImageUrl || getFeatureGroupIconURL(subPart.part.partName);\r\n const isCustom = !homePage[subPart.part.partId] && subPart.part.customImageUrl;\r\n const style = {\r\n backgroundImage: image ? `url(${image})` : 'none'\r\n };\r\n if (subPart.part.featuredImage) {\r\n style.backgroundSize = \"contain\";\r\n }\r\n\r\n return (\r\n
- this.goToMaterialsPage(subPart.part, section.title)}>\r\n \r\n {(subPart.part.activeFeature && subPart.part.activeFeature.dbFeature.customGroupName) || subPart.part.homePageTitle || subPart.text}\r\n\r\n \r\n )\r\n })}\r\n
\r\n \r\n
\r\n )\r\n })\r\n };\r\n\r\n render() {\r\n const activeFeature = this.props.selectionFeatureInfo;\r\n const {productNoteEditorVisible, fabricatorData, intl} = this.props;\r\n const fabricatorSettings = fabricatorData.settings;\r\n\r\n const relatedFeatures = activeFeature.getFeatureRelatedFeatures();\r\n const associatedProduct = Array.isArray(relatedFeatures) && relatedFeatures.length;\r\n\r\n const showPriceLocked = getFeatureIsLocked(activeFeature);\r\n const showPrice = fabricatorSettings.showPricing && !fabricatorData.hideCheckoutBreakdownCost && !showPriceLocked && !fabricatorData.hidePricesFromUser;\r\n\r\n const isMobile = this.props.windowWidth < 991;\r\n\r\n const showFeatureModules = (document.kvConfig.visualizerType === \"Kitchen\" || document.kvConfig.visualizerType === \"KV\")\r\n && activeFeature.partId === \"top_cabinet\" && activeFeature.metaData[\"Module\"];\r\n\r\n const availableMeasureUnits = [...COUNTERTOP_GROUP, \"edge\", \"edge_profile\", \"center_island_edge\"];\r\n const unit = getFeatureUnit(activeFeature, intl, fabricatorData, this.props.selectionInfoQuantity);\r\n const lowerCasedUnit = unit.toLowerCase();\r\n const allowDecimals = (fabricatorSettings.measureUnit === MEASURE_UNITS.Metric) && (\r\n availableMeasureUnits.includes(activeFeature.partId) || [\"lm\", \"sm\", \"mm\"].some(um => um === lowerCasedUnit)\r\n );\r\n const unitText = activeFeature.getParent ? activeFeature.getParent().unitText : null;\r\n\r\n return (\r\n \r\n \r\n {\r\n const materialsInfoFeatureModules = this.props.materialsInfoFeatureModules.map(mQuantity => {\r\n if (mQuantity.partId === materialsQuantity.partId) {\r\n mQuantity.quantity = quantity\r\n }\r\n return mQuantity\r\n });\r\n this.props.changeMaterialsInfoFeatureModules(materialsInfoFeatureModules);\r\n }}\r\n value={materialsQuantity.quantity}/>\r\n
\r\n \r\n
\r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = (store) => {\r\n const {selectionInfoQuantity, pulseFeatureInfoQuantity, materialsInfoFeatureModules, selectionGroup,\r\n selectionFeatureInfo, productNoteEditorVisible, featureInfoCount} = store.selectionState;\r\n const {cartItems, cartItemEditFeature} = store.cartState;\r\n const {wizardList, wizardIsActive} = store.wizardState;\r\n return {\r\n selectionFeatureInfo,\r\n selectionGroup,\r\n selectionInfoQuantity,\r\n pulseFeatureInfoQuantity,\r\n materialsInfoFeatureModules,\r\n productNoteEditorVisible,\r\n windowWidth: store.serverState.windowWidth,\r\n cartItems,\r\n userIsLoggedIn: store.userState.userIsLoggedIn,\r\n isPriceUnlocked: store.userState.userIsLoggedIn && store.userState.isPhoneNumberValidated,\r\n fabricatorData: store.fabricatorState,\r\n qtActiveCategory: store.qtState.qtActiveCategory,\r\n activeQuoteIndex: store.quotesState.activeQuoteIndex,\r\n advancedQuotingSearchItem: store.advancedQuotingState.advancedQuotingSearchItem,\r\n navItemPositionModal: store.navigationState.navItemPositionModal,\r\n cartItemEditFeature,\r\n featureInfoCount,\r\n wizardList,\r\n wizardIsActive,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n toggleUserPopup,\r\n changeSelectionInfoQuantity,\r\n toggleSelectionFeatureInfo,\r\n changeMaterialsInfoFeatureModules,\r\n unlockPricing,\r\n setCameFromPage,\r\n addToRecentlyViewed,\r\n setQtActiveCategory,\r\n togglePulseFeatureInfoQuantity,\r\n toggleNavItemPositionModal,\r\n // setCartItemEditFeature,\r\n setSqftFromFeature,\r\n enableSquareFootage,\r\n setSquareFootageGroup,\r\n};\r\n\r\nexport default withRouter(\r\n injectIntl(\r\n connect(mapStateToProps, mapDispatchToProps)(FeatureInfo)\r\n )\r\n);\r\n","import React from \"react\";\r\nimport {connect} from \"react-redux\";\r\nimport PropTypes from \"prop-types\";\r\n\r\nimport {getFilterGroupValues, s3FilterImagePath} from \"../../../misc/utils\";\r\n\r\nconst FeatureInfoBrand = (props) => {\r\n\r\n const {selectionFeatureInfo, filterGroups, feature} = props;\r\n\r\n const currentFeature = feature || selectionFeatureInfo;\r\n\r\n const brandFilterGroup = filterGroups.find(group => group.name === \"Brand\");\r\n if (!brandFilterGroup) {\r\n return null\r\n }\r\n\r\n const featureBrandValues = getFilterGroupValues(currentFeature, brandFilterGroup);\r\n if (!featureBrandValues) {\r\n return null\r\n }\r\n\r\n const brandFilterValue = brandFilterGroup.values.find(val => val.id === featureBrandValues[0]);\r\n if (!brandFilterValue || !brandFilterValue.icon) {\r\n return null\r\n }\r\n\r\n const styles = {\r\n backgroundImage: `url(${s3FilterImagePath(brandFilterValue.icon)})`\r\n };\r\n\r\n return (\r\n \r\n );\r\n};\r\n\r\nFeatureInfoBrand.propTypes = {\r\n feature: PropTypes.object\r\n}\r\n\r\nconst mapStateToProps = (store) => {\r\n return {\r\n selectionFeatureInfo: store.selectionState.selectionFeatureInfo,\r\n filterGroups: store.filterState.filterGroups,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n\r\n};\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(FeatureInfoBrand);\r\n","import React, {Fragment} from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { connect } from \"react-redux\";\r\nimport $ from \"jquery\";\r\nimport uniq from \"lodash/uniq\";\r\nimport Config from \"../../config\";\r\n\r\nimport {\r\n toggleSelectionFeatureInfo,\r\n setActiveFeature,\r\n toggleShowDescriptionCover, toggleShowRestorePopup, updateCanvasCount\r\n} from \"../../actions/actionFunctions\";\r\n\r\nimport {getEventPosition, getFeatureIsLocked} from \"../../misc/helpers\";\r\n// import {s3FeatureImagePath, THUMBNAIL_SIZES} from \"../../misc/utils\";\r\n\r\nimport ActionTypes from \"../../misc/actionTypes\";\r\nimport NavigationItemsList from \"../visComponents/navigation/navigationItemsList\";\r\nimport CountertopSwitchers from \"../kvComponent/navigation/countertopSwitchers\";\r\nimport CabinetSwitchers from \"../kvComponent/navigation/cabinetSwitchers\";\r\nimport {CABINET_GROUP, COUNTERTOP_GROUP} from \"../kvComponent/core/constants\";\r\nimport {UserPopupTypes} from \"../visComponents/constants\";\r\nimport {toggleNavItemPositionModal, toggleUpdateDisableFeatureGroupRadio} from \"../../actions/navigationFunctions\";\r\nimport {CABINET_GROUP_BATHROOM, COUNTERTOP_GROUP_BATHROOM} from \"../bvSceneComponent/core/constants\";\r\nimport SelectionMainVirtualizedList from \"./selectionRowList/selectionMainVirtualizedList\";\r\nimport LoadingSpinner from \"../ui/loadingSpinner\";\r\nimport WizardList from \"./wizardList/wizardList\";\r\nimport SelectionMainVirtualizedGrid from \"./selectionGridList/selectionMainVirtualizedGrid\";\r\nimport SelectionMainVirtualizedGridMobile from \"./selectionGridList/selectionMainVirtualizedGridMobile\";\r\nimport {wizardGroupInterface} from \"../../interfaces/wizardItemInterface\";\r\nimport {checkIfNeedToReceiveFeaturesIfFiltersApplied} from \"../../misc/filtersFunctions\";\r\nimport {getCurrentLayout} from \"../appLayout\";\r\nimport {clickOnSimilarFeatures, getApplyToLogic} from \"../look/lookNavigation/lookNavigationFunctions\";\r\nimport {navFeatureCLick} from \"../look/lookNavigation/lookFunctions\";\r\nimport {featureCanChangeShowerSize, searchForSameNameWallsBeforeFeatureApply} from \"../look/bathroomFunctions\";\r\n\r\nclass SelectionMainList extends NavigationItemsList {\r\n\r\n static propTypes = {\r\n features: PropTypes.array.isRequired,\r\n handleUserLoginClick: PropTypes.func.isRequired,\r\n setRef: PropTypes.func.isRequired,\r\n currentParent: PropTypes.object,\r\n listItemHeight: PropTypes.number,\r\n showItemsList: PropTypes.bool.isRequired,\r\n layoutName: PropTypes.string,\r\n isWizard: PropTypes.bool,\r\n currentGroups: PropTypes.arrayOf(PropTypes.shape(wizardGroupInterface))\r\n };\r\n\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n showPlaceHolders: document.bvConfig ? document.bvConfig.showPlaceholders : false,\r\n reorderedFeatures: [],\r\n showLoader: false,\r\n currentParentText: \"\"\r\n };\r\n window.itemClickCountQuote = window.itemClickCountQuote || 0;\r\n window.itemClickCount = window.itemClickCount || 0;\r\n }\r\n\r\n componentDidMount() {\r\n this.updatePositions(this.props);\r\n $(document).on(ActionTypes.USER_IS_LOGGED_IN, () => { // click on current active item after unlock\r\n if (this.props.currentParent && (this.props.currentParent.activeLockedFeature || this.props.currentParent.activeFeature)) {\r\n this.handleFeatureClick({\r\n part: this.props.currentParent.activeLockedFeature || this.props.currentParent.activeFeature\r\n });\r\n }\r\n this.forceUpdate(() => {\r\n if (!this.props.listItemHeight || this.props.listItemHeight < 10) { // $(\".bv-item-list\").height()\r\n $(window).trigger('resize'); // squeeze features bug\r\n }\r\n });\r\n });\r\n // console.log(\"|this.props.currentParent\", this.props.currentParent);\r\n if (this.props.currentParent && this.props.currentParent.activeFeature) {\r\n this.props.setActiveFeature(this.props.currentParent.activeFeature);\r\n this.deleteNotInVisualizerFeature(this.props);\r\n }\r\n }\r\n\r\n componentWillUnmount() {\r\n $(document).off(ActionTypes.USER_IS_LOGGED_IN);\r\n }\r\n\r\n componentWillReceiveProps(nextProps) {\r\n if ((nextProps.currentParent && this.props.currentParent && (nextProps.currentParent.partName !== this.props.currentParent.partName))\r\n || (nextProps.currentParent && (nextProps.currentParent.partName !== this.state.currentParentText)) || nextProps.features !== this.props.features) {\r\n this.updatePositions(nextProps);\r\n this.deleteNotInVisualizerFeature(nextProps);\r\n }\r\n if (this.needToUpdate && nextProps.features.length !== this.props.features.length) {\r\n this.updatePositions(nextProps);\r\n }\r\n\r\n let wizardSubStepIsActive = false;\r\n if (nextProps.wizardConfig.length) {\r\n const existingWizSetup = nextProps.wizardConfig.find(wizObject => {\r\n return wizObject.featureGroupName === nextProps.currentParent.dbName || wizObject.featureGroupName === nextProps.currentParent.partName\r\n })\r\n if (existingWizSetup && existingWizSetup.filterGroups.length) {\r\n wizardSubStepIsActive = true;\r\n }\r\n }\r\n\r\n if (nextProps.selectedFilters.length && !wizardSubStepIsActive && nextProps.currentParent) {\r\n const checkPassed = checkIfNeedToReceiveFeaturesIfFiltersApplied(nextProps.selectedFilters, nextProps.currentParent);\r\n if (checkPassed) {\r\n this.getFeaturesFromBackendWithFilters(nextProps.currentParent, checkPassed.arrayOfNeededFiltersToReceive, 1);\r\n }\r\n }\r\n }\r\n\r\n deleteNotInVisualizerFeature = (nextProps) => {\r\n if (nextProps.currentParent && nextProps.currentParent.activeNotInVisualizerFeature\r\n && nextProps.currentParent.activeFeature && !nextProps.currentParent.activeFeature.notAvailableInVisualizer) {\r\n nextProps.currentParent.activeNotInVisualizerFeature = null;\r\n }\r\n }\r\n\r\n updatePositions = (nextProps) => {\r\n this.setState({\r\n indexesToReplace: [],\r\n showLoader: true\r\n }, () => {\r\n this.setRelatedStones(nextProps);\r\n });\r\n };\r\n\r\n checkForDisabled = (navItem) => {\r\n if (!navItem || !navItem.part || !navItem.part.getParent) {\r\n return\r\n }\r\n const parent = navItem.part.getParent();\r\n if (parent.disabled) {\r\n const itemParent = navItem.part.getParent();\r\n let exLAndBathtubAndSmallRoom = false;\r\n if (itemParent.partId === \"left_shower_wall\" && itemParent.getParent().layout.type === 0) {\r\n const showerBody = itemParent.getParent().layout.parts.Shower.showerBody;\r\n if (showerBody && showerBody.disabled) {\r\n exLAndBathtubAndSmallRoom = true\r\n }\r\n }\r\n if (itemParent.disabled && !exLAndBathtubAndSmallRoom) {\r\n itemParent.disabled = false;\r\n itemParent.disabledClick(); // disable also related parts\r\n }\r\n }\r\n if (parent.getParent) { // enable shower if child is clicked\r\n const showerParent = parent.getParent();\r\n if (showerParent.partName === \"Shower\" && showerParent.showerBody && showerParent.showerBody.disabled) {\r\n showerParent.showerBody.disabled = false;\r\n showerParent.showerBody.disabledClick(); // enable also related parts\r\n }\r\n }\r\n }\r\n\r\n handleFeatureClick = async (activeFeature, event, wizardClickOnLogic = null) => {\r\n\r\n if (event && event.target.closest(\".feature-buttons\")) {\r\n return false; // do not set activeFeature again ! // prevent redundant feature click\r\n } else if (this.props.activeFeature && this.props.activeFeature.dbFeature.id === activeFeature.part.dbFeature.id\r\n && (this.props.currentParent && this.props.currentParent.firstClick[this.props.activeQuoteIndex])) {\r\n this.showPositionsPopup(activeFeature.part, event);\r\n if (this.props.handleFeatureClick) {\r\n this.props.handleFeatureClick(activeFeature.part)\r\n }\r\n return false; // the same feature clicked // prevent redundant feature click\r\n }\r\n\r\n if (Config.isDevMode()) {\r\n console.log(\"activeFeature\", activeFeature.part);\r\n console.log(\"sharedFeatureName:\", activeFeature.part.dbFeature.sharedFeatureName, \"\\ngetSplittedFeatureName:\", activeFeature.part.getSplittedFeatureName());\r\n }\r\n const fabricatorSettings = this.props.fabricatorData.settings;\r\n if(!this.props.userIsLoggedIn && fabricatorSettings.clickLeadCaptureOnQuote && fabricatorSettings.clickLeadCountOnQuote\r\n && (++window.itemClickCountQuote >= fabricatorSettings.clickLeadCountOnQuote)) {\r\n this.props.handleUserLoginClick(UserPopupTypes.NewDesign);\r\n return;\r\n }\r\n if (this.props.handleFeatureClick && !wizardClickOnLogic) {\r\n this.props.handleFeatureClick(activeFeature.part) // set wizard selected value\r\n }\r\n if (this.props.showRestorePopup) {\r\n this.props.toggleShowRestorePopup(false);\r\n }\r\n // if (this.isWallItem(activeFeature.part) && activeFeature.part.getParent().getParent().allWallsApplied) {\r\n // this.applyAllWalls(activeFeature.part, ignoreLocked);\r\n // }\r\n\r\n if (!wizardClickOnLogic) {\r\n this.props.setActiveFeature(activeFeature.part); // set selected feature\r\n }\r\n\r\n const showPositionPopup = this.showPositionsPopup(activeFeature.part, event);\r\n if (showPositionPopup && !wizardClickOnLogic) {\r\n return // don't click on feature!! we are clicking inside the modal window\r\n }\r\n\r\n const layout = getCurrentLayout();\r\n\r\n if ((layout.isNewLayout || (layout.visualizerType === \"bvScene\")) && featureCanChangeShowerSize(activeFeature.part)) {\r\n await searchForSameNameWallsBeforeFeatureApply(activeFeature.part);\r\n }\r\n\r\n if (layout.isNewLayout) {\r\n\r\n navFeatureCLick(activeFeature.part);\r\n\r\n const applyToLogic = getApplyToLogic(activeFeature.part);\r\n // const parent = zoomFeature.getParent();\r\n // setActiveFeaturesBeforeAllWalls([], parent); // we don't need it here, as we have remembering logic below\r\n if (applyToLogic && Array.isArray(applyToLogic.currentApplyToArray) && applyToLogic.currentApplyToArray.length) {\r\n clickOnSimilarFeatures(activeFeature.part, applyToLogic, true);\r\n }\r\n } else {\r\n\r\n activeFeature.part.handleClick(false, \"\", wizardClickOnLogic ? {skipNotCompatible: true} : null);\r\n\r\n if (CABINET_GROUP.includes(activeFeature.part.partId) || CABINET_GROUP_BATHROOM.includes(activeFeature.part.partId)) {\r\n const featureIsLocked = getFeatureIsLocked(activeFeature.part);\r\n CabinetSwitchers.applyAllCabinets(activeFeature.part, !featureIsLocked);\r\n } else if (COUNTERTOP_GROUP.includes(activeFeature.part.partId) || COUNTERTOP_GROUP_BATHROOM.includes(activeFeature.part.partId)) {\r\n const featureIsLocked = getFeatureIsLocked(activeFeature.part);\r\n CountertopSwitchers.applyAllCountertops(activeFeature.part, !featureIsLocked);\r\n }\r\n }\r\n\r\n this.checkForDisabled(activeFeature);\r\n // this.props.toggleShowDescriptionCover(false);\r\n // console.log('is visible', $('.feature--selected').is(':visible'));\r\n\r\n if (activeFeature.part.partId === \"room\") {\r\n this.props.checkIfNeedToSwitchRoom(activeFeature.part);\r\n }\r\n\r\n this.props.toggleUpdateDisableFeatureGroupRadio(true);\r\n $(window).trigger(ActionTypes.CHANGE_LAYOUT); // update canvas\r\n this.props.updateCanvasCount();\r\n setTimeout(() => {\r\n this.props.toggleUpdateDisableFeatureGroupRadio(false);\r\n }, 0)\r\n\r\n };\r\n\r\n showPositionsPopup = (clickedFeature, event) => {\r\n if (clickedFeature && !clickedFeature.notAvailableInVisualizer\r\n && this.props.currentParent\r\n && this.props.currentParent.showLayerPositionsModal\r\n && this.props.currentParent.showLayerPositionsModal(clickedFeature)) {\r\n const eventPosition = getEventPosition(event);\r\n this.props.toggleNavItemPositionModal({\r\n popupOpened: true,\r\n popupPosition: {\r\n left: eventPosition.x,\r\n top: eventPosition.y\r\n },\r\n activePartId: clickedFeature.partId,\r\n });\r\n $(window).trigger(ActionTypes.UPDATE_ALL_ITEMS); // update buttons\r\n return true\r\n } else if (this.props.navItemPositionModal && this.props.navItemPositionModal.popupOpened) {\r\n this.props.toggleNavItemPositionModal({\r\n popupOpened: false,\r\n });\r\n }\r\n return false\r\n }\r\n\r\n // isWallItem = (itemPart) => {\r\n // const wallsPartIds = [\"wall_a\", \"wall_b\", \"wall_c\", \"right_shower_wall\", \"left_shower_wall\",\"pony_wall\"];\r\n // return wallsPartIds.includes(itemPart.partId);\r\n // };\r\n\r\n setRelatedStones(nextProps) {\r\n\r\n const selectedFirstItemIndex = this.getActiveItemIndex(nextProps);\r\n const features = nextProps.features.filter(feature => feature);\r\n let otherSelectedWallsIndexes = this.getSelectedWallIndexes(\r\n {part: nextProps.currentParent}, features, selectedFirstItemIndex\r\n );\r\n let unlockedIndexes = [];\r\n\r\n // console.log(\"otherSelectedWallsIndexes\", otherSelectedWallsIndexes);\r\n\r\n const fabricatorSettings = this.props.fabricatorData.settings; // set unlocked on the first positions\r\n if (nextProps.features.length && (fabricatorSettings.leadCaptureOnQuote && !(document.kvConfig.isBackend && document.kvConfig.jobId && document.kvConfig.canSaveQuote)) && !nextProps.isPhoneNumberValidated) {\r\n nextProps.features.forEach((feature, index) => {\r\n if (feature && feature.part && !getFeatureIsLocked(feature.part, false)) {\r\n unlockedIndexes.push(index);\r\n }\r\n });\r\n }\r\n\r\n const selectedExist = (selectedFirstItemIndex || selectedFirstItemIndex === 0) && selectedFirstItemIndex > -1;\r\n const indexesToReplace = selectedExist\r\n ? uniq([selectedFirstItemIndex, ...unlockedIndexes, ...otherSelectedWallsIndexes])\r\n : [...unlockedIndexes, ...otherSelectedWallsIndexes];\r\n this.setState({\r\n currentParentText: nextProps.currentParent ? nextProps.currentParent.partName : \"\",\r\n reorderedFeatures: this.getReorderedItems(indexesToReplace, nextProps, selectedExist, true),\r\n showLoader: false\r\n }, () => {\r\n if (this.needToUpdate) {\r\n const $gridBody = $(this.itemsList).find(\".ReactVirtualized__Grid\");\r\n if (this.props.windowWidth <= 991) {\r\n $gridBody.scrollLeft(this.needToUpdate);\r\n } else {\r\n $gridBody.scrollTop(this.needToUpdate);\r\n }\r\n this.needToUpdate = false;\r\n }\r\n });\r\n }\r\n\r\n getActiveItemIndex = (props) => {\r\n if (props.currentParent && props.currentParent.partId === \"room\") {\r\n return 0\r\n }\r\n const fabricatorSettings = props.fabricatorData.settings;\r\n const showPlaceHolders = document.bvConfig ? document.bvConfig.showPlaceholders : false;\r\n let isActiveItemIndex = null;\r\n if ((fabricatorSettings.leadCaptureOnQuote && !(document.kvConfig.isBackend && document.kvConfig.jobId && document.kvConfig.canSaveQuote))\r\n && !props.isPhoneNumberValidated && props.currentParent && props.currentParent.activeLockedFeature) {\r\n\r\n isActiveItemIndex = props.features.findIndex((item) => {\r\n return props.currentParent.activeLockedFeature.dbFeature.id === item.part.id()\r\n });\r\n // console.log('props.currentParent', props.currentParent);\r\n }\r\n else if (props.currentParent && props.currentParent.activeNotInVisualizerFeature) {\r\n isActiveItemIndex = props.features.findIndex((item) => {\r\n return item && item.part && (props.currentParent.activeNotInVisualizerFeature.dbFeature.id === item.part.id())\r\n })\r\n } else if (props.currentParent && props.currentParent.activeFeature) {\r\n isActiveItemIndex = props.features.findIndex((item) => {\r\n return item && item.part && (props.currentParent.activeFeatureId(showPlaceHolders) === item.part.id())\r\n })\r\n }\r\n return isActiveItemIndex\r\n };\r\n\r\n checkIfFeatureSelected = (currentFeature, currentParent = this.props.currentParent) => {\r\n if (!currentFeature) {\r\n return false\r\n }\r\n\r\n const currentFeatureId = currentFeature.dbFeature.id;\r\n\r\n if (this.props.isWizard) {\r\n const {wizardSelectedValues, wizardActiveStep} = this.props;\r\n if (!wizardSelectedValues || !wizardSelectedValues[wizardActiveStep] || !wizardSelectedValues[wizardActiveStep].selectedFeature) {\r\n return false\r\n }\r\n if (currentFeature.dbFeature.sharedFeatureName && wizardSelectedValues[wizardActiveStep].selectedFeature.dbFeature.sharedFeatureName) {\r\n return currentFeature.dbFeature.sharedFeatureName === wizardSelectedValues[wizardActiveStep].selectedFeature.dbFeature.sharedFeatureName\r\n }\r\n return currentFeatureId === wizardSelectedValues[wizardActiveStep].selectedFeature.dbFeature.id\r\n }\r\n\r\n let selected = false;\r\n if (currentFeatureId && currentParent\r\n && ((this.props.activeFeature && !this.props.activeFeature.notAvailableInVisualizer) || currentParent.firstClick[this.props.activeQuoteIndex])) {\r\n selected = currentParent.activeNotInVisualizerFeature\r\n ? currentParent.activeNotInVisualizerFeature.dbFeature.id === currentFeatureId\r\n : this.props.activeFeature && this.props.activeFeature.dbFeature.id === currentFeatureId\r\n }\r\n return selected\r\n };\r\n\r\n handleOnMobileGridScroll = ({clientWidth, scrollLeft, scrollWidth}) => {\r\n if (this.props.showItemsList && !this.state.showLoader) {\r\n const ceilScrollWidth = Math.ceil(scrollWidth);\r\n const floorScrollWidth = Math.floor(scrollWidth);\r\n const ceilScrollLeft = Math.ceil(scrollLeft);\r\n const floorScrollLeft = Math.floor(scrollLeft);\r\n if ((ceilScrollWidth - ceilScrollLeft === clientWidth)\r\n || (ceilScrollWidth - floorScrollLeft === clientWidth)\r\n || (floorScrollWidth - ceilScrollLeft === clientWidth)\r\n || (floorScrollWidth - floorScrollLeft === clientWidth)) {\r\n this.getNewFeaturesOnScroll(scrollLeft, {part: this.props.currentParent})\r\n }\r\n }\r\n };\r\n\r\n // getLoadingElementsForGrid = (isMobile) => {\r\n // const counts = getActivePartsCounts(this.props.currentParent, this.props.layoutName);\r\n // if (!counts) {\r\n // return null\r\n // }\r\n // let elements = [];\r\n // let styles = isMobile ? {} : {\r\n // height: this.props.listItemHeight\r\n // };\r\n // for (let i = 0; i <= counts ;i++ ) { // for ex. 28/3 = 10 columns\r\n // elements.push(\r\n // \r\n : null}\r\n
\r\n \r\n
\r\n {isMobile ? \r\n
\r\n \r\n \r\n
\r\n {!isMobile ?
\r\n \r\n \r\n
\r\n {!isMobile ? \r\n
\r\n {isMobile ? null : \r\n {showPrice ?
\r\n {canShowSqftButtonForFeature(activeFeature, fabricatorSettings) ? (\r\n \r\n \r\n {(label) => (\r\n \r\n )}\r\n \r\n
\r\n )\r\n }\r\n \r\n \r\n
\r\n ) : null}\r\n {canShowSqftCabinetButtonForFeature(activeFeature, fabricatorSettings) ? (\r\n \r\n \r\n
\r\n ) : null}\r\n {isMobile ? \r\n //
\r\n // );\r\n // }\r\n // return elements\r\n // };\r\n\r\n renderVirtualizedGrid = () => {\r\n const {windowWidth, currentParent, listItemHeight, handleUserLoginClick, isWizard, currentGroups,\r\n showListForce} = this.props;\r\n // console.log(\"renderDesktopVirtualizedGrid currentFeatures\", currentFeatures);\r\n if ((!showListForce && (currentParent && !currentParent.allFeaturesReceived)) || !this.itemsList) {\r\n return {\r\n this.itemsList = node;\r\n this.props.setRef(node);\r\n }}\r\n className={\"bv-item-list bv-item-list--\" + this.props.selectionWindowView\r\n + (this.props.filtersVisible ? \" bv-item-list--filters-visible\" : \"\")\r\n + (isRowView ? \" bv-item-list--row\" : \" bv-item-list--column\")}>\r\n {this.props.showItemsList && !this.state.showLoader\r\n ? this.renderList(isRowView)\r\n :
\r\n {this.state.additionalFeaturesLoading ? this.getLoadingFeatures() : null}\r\n \r\n
\r\n )\r\n};\r\n\r\nRowItem.propTypes = {\r\n selected: PropTypes.bool,\r\n isRelated: PropTypes.bool,\r\n isWizard: PropTypes.bool,\r\n wizardGroup: PropTypes.shape(wizardGroupInterface),\r\n currentFeature: PropTypes.object.isRequired,\r\n handleFeatureClick: PropTypes.func.isRequired,\r\n};\r\n\r\nconst mapStateToProps = (store) => {\r\n const {productNoteEditorVisible} = store.selectionState;\r\n return {\r\n productNoteEditorVisible,\r\n windowWidth: store.serverState.windowWidth,\r\n fabricatorData: store.fabricatorState,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n toggleSelectionFeatureInfo,\r\n setCameFromPage\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(RowItem);\r\n","import React from 'react';\r\nimport { connect } from \"react-redux\";\r\nimport PropTypes from \"prop-types\";\r\n\r\nconst FeatureCartItemsCount = (props) => {\r\n\r\n const {currentFeatureId, cartItems, advancedQuotingSearchItem, activeQuoteIndex} = props;\r\n\r\n const getAddedCartItemsCount = () => {\r\n if (advancedQuotingSearchItem && advancedQuotingSearchItem.cartFeature) {\r\n if (advancedQuotingSearchItem.cartFeature.dbFeature.id === currentFeatureId) {\r\n return advancedQuotingSearchItem.quantity\r\n }\r\n return 0\r\n }\r\n let currentFeatureCartItemsCount = 0;\r\n const matchingCartItems = cartItems.filter((cartItem) => {\r\n return (currentFeatureId === cartItem.cartFeature.dbFeature.id) && (cartItem.currentQuote === activeQuoteIndex)\r\n });\r\n if (matchingCartItems.length) {\r\n currentFeatureCartItemsCount = matchingCartItems.reduce((total, cartItem) => {\r\n if (cartItem.partId === 'slabs') { // do not count slabs QCDES-1730\r\n return total + 0\r\n }\r\n return total + cartItem.quantity\r\n }, 0)\r\n }\r\n return +(+(currentFeatureCartItemsCount).toFixed(3)).toFixed(2)\r\n }\r\n\r\n const currentFeatureCartItemsCount = getAddedCartItemsCount();\r\n if (!currentFeatureCartItemsCount) {\r\n return null\r\n }\r\n\r\n return (\r\n {currentFeatureCartItemsCount}\r\n )\r\n};\r\n\r\nFeatureCartItemsCount.propTypes = {\r\n currentFeatureId: PropTypes.number.isRequired,\r\n};\r\n\r\nconst mapStateToProps = (store) => {\r\n const {cartItems} = store.cartState;\r\n const {activeQuoteIndex} = store.quotesState;\r\n const {advancedQuotingSearchItem} = store.advancedQuotingState;\r\n return {\r\n cartItems,\r\n activeQuoteIndex,\r\n advancedQuotingSearchItem,\r\n };\r\n};\r\n\r\nexport default connect(mapStateToProps)(FeatureCartItemsCount);\r\n","import React from \"react\";\r\nimport {connect} from \"react-redux\";\r\nimport PropTypes from \"prop-types\";\r\nimport {s3FilterImagePath} from \"../../../misc/utils\";\r\nimport {setSelectedFilters} from \"../../../actions/actionFunctions\";\r\nimport {replaceFilterArrayValue} from \"../../visComponents/navigation/newFilters/filterSwitchers\";\r\n\r\nconst WizardFilterItem = (props) => {\r\n const {currentFilterValue, filterGroup, selectedFilters, setSelectedFilters, listItemHeight, isMobile} = props;\r\n\r\n const getFilterItemThumbnail = () => {\r\n const additionalImages = currentFilterValue.additionalImages;\r\n if (Array.isArray(additionalImages) && additionalImages.length) {\r\n return additionalImages[0].imageUrl\r\n }\r\n return s3FilterImagePath(currentFilterValue.icon);\r\n }\r\n\r\n const wizardFilterValueClick = () => {\r\n if (Array.isArray(currentFilterValue.items) && currentFilterValue.items.length) {\r\n debugger;//eslint-disable-line\r\n this.setParentFilterValues(currentFilterValue.items.map(fValue => fValue.id))\r\n } else {\r\n setSelectedFilters(replaceFilterArrayValue([...selectedFilters], {\r\n filterId: currentFilterValue.id,\r\n filterGroupId: filterGroup.id\r\n }));\r\n }\r\n };\r\n\r\n let thumbnail = getFilterItemThumbnail();\r\n const isColor = (filterGroup.name || \"\").toLowerCase().includes(\"color\");\r\n\r\n const styles = {\r\n backgroundSize: isColor ? \"cover\" : \"inherit\",\r\n };\r\n if (thumbnail) {\r\n styles.backgroundImage = \"url(\" + thumbnail + \")\";\r\n }\r\n if (!thumbnail && currentFilterValue && isColor) {\r\n styles.backgroundColor = currentFilterValue.value;\r\n }\r\n\r\n const selected = selectedFilters.some(filterObject => {\r\n return filterObject.filterGroupId === filterGroup.id && filterObject.filterId === currentFilterValue.id\r\n });\r\n\r\n return (\r\n \r\n \r\n {!isRelated && isMobile ? (\r\n \r\n \r\n \r\n ) : null}\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {showPrice ? : null}\r\n {showPriceLocked ?
\r\n {!isRelated && !isMobile ? (\r\n \r\n \r\n
\r\n ) : null}\r\n \r\n \r\n {/**/}\r\n \r\n )\r\n }\r\n}\r\n","import React from \"react\";\r\nimport {connect} from \"react-redux\";\r\nimport {withRouter} from \"react-router-dom\";\r\nimport {FormattedMessage} from \"react-intl\";\r\nimport PropTypes from \"prop-types\";\r\n\r\nimport {\r\n toggleSelectionFeatureInfo, toggleSelectionWindow, toggleBathroomVisualizerOpen\r\n} from \"../../../actions/actionFunctions\";\r\nimport {useChangeWizardStepRoute} from \"../materialsWizard/useChangeWizardStepRoute\";\r\n\r\nconst MaterialsFooterBackButton = (props) => {\r\n\r\n const {cameFromPage, selectionFeatureInfo, showAdvancedQuoting, toggleSelectionWindow, toggleBathroomVisualizerOpen,\r\n selectionGroup, toggleSelectionFeatureInfo, history, wizardActiveStep, checkForSubStepChange, subStepChange,\r\n isWizard} = props;\r\n\r\n const {changeWizardStepRoute} = useChangeWizardStepRoute();\r\n\r\n const handleBackButtonClick = () => {\r\n if (cameFromPage === \"visualizer\") {\r\n toggleSelectionWindow(false, selectionGroup);\r\n toggleBathroomVisualizerOpen(true);\r\n history.push('/visualizer');\r\n return;\r\n } else if (selectionFeatureInfo) {\r\n toggleSelectionFeatureInfo(null);\r\n if (cameFromPage === \"shoppingcart\") {\r\n history.push(\"/shoppingcart\");\r\n }\r\n return;\r\n } else if (showAdvancedQuoting) {\r\n history.push(\"/shoppingcart\");\r\n return;\r\n } else if (checkForSubStepChange && subStepChange && !checkForSubStepChange(\"back\")) {\r\n subStepChange();\r\n return;\r\n }\r\n if (isWizard) {\r\n changeWizardStepRoute(wizardActiveStep - 1);\r\n }\r\n }\r\n\r\n return (\r\n \r\n )\r\n\r\n};\r\n\r\nMaterialsFooterBackButton.propTypes = {\r\n isWizard: PropTypes.bool,\r\n checkForSubStepChange: PropTypes.func,\r\n subStepChange: PropTypes.func,\r\n}\r\n\r\nconst mapStateToProps = (store) => {\r\n const {selectionGroup, selectionFeatureInfo} = store.selectionState;\r\n const {cameFromPage} = store.cartState;\r\n const {wizardActiveStep} = store.wizardState;\r\n const {showAdvancedQuoting} = store.advancedQuotingState;\r\n\r\n return {\r\n selectionGroup,\r\n selectionFeatureInfo,\r\n cameFromPage,\r\n wizardActiveStep,\r\n showAdvancedQuoting,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n toggleSelectionWindow,\r\n toggleBathroomVisualizerOpen,\r\n toggleSelectionFeatureInfo,\r\n};\r\n\r\nexport default withRouter(\r\n connect(mapStateToProps, mapDispatchToProps)(MaterialsFooterBackButton)\r\n)\r\n","import React from 'react';\r\nimport $ from \"jquery\";\r\nimport {connect} from \"react-redux\";\r\nimport {FormattedMessage} from \"react-intl\";\r\n\r\nimport {setMaterialsAgentTutorialFinished, showMaterialsAgentTutorial} from \"../../actions/tutorialFunctions\";\r\nimport Tutorial from \"./tutorial\";\r\n\r\n\r\nclass MaterialsAgentTutorial extends Tutorial {\r\n\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n ringStyles: {\r\n left: 0,\r\n top: 0,\r\n }\r\n };\r\n this.resizeId = 0;\r\n }\r\n\r\n componentDidMount = () => {\r\n if (this.props.materialsAgentTutorialFinished) {\r\n return null\r\n }\r\n const scriptAdded = document.getElementById(\"pingpilot\");\r\n if (!scriptAdded) {\r\n return null\r\n }\r\n const pingButton = document.querySelector(\".pingpilot-button\");\r\n if (!pingButton) {\r\n return null\r\n }\r\n window.materialsAgentTutorialTimeoutId = setTimeout(() => {\r\n this.props.showMaterialsAgentTutorial(true);\r\n this.setButtonsPositions();\r\n $(\".tutorial-overlay--materials\").fadeIn(300);\r\n $(\".tutorial-step__ring, .tutorial-step\").fadeIn(300, () => {\r\n this.setButtonsPositions();\r\n });\r\n window.addEventListener(\"resize\", this.handleResize);\r\n }, 30000);\r\n };\r\n\r\n handleResize = () => {\r\n clearTimeout(this.resizeId);\r\n this.resizeId = setTimeout(this.setButtonsPositions, 500);\r\n };\r\n\r\n setButtonsPositions = () => {\r\n this.changeHighlightRingPosition(\".omnibrowse-code-button\");\r\n };\r\n\r\n componentWillUnmount() {\r\n window.clearTimeout(window.materialsAgentTutorialTimeoutId);\r\n window.removeEventListener(\"resize\", this.handleResize);\r\n }\r\n\r\n handleNextStepClick = () => {\r\n this.exitTutorial(true);\r\n };\r\n\r\n exitTutorial = (forever) => {\r\n $(\".tutorial-overlay--materials\").fadeOut(300, () => {\r\n this.props.showMaterialsAgentTutorial(false);\r\n if (forever) {\r\n this.props.setMaterialsAgentTutorialFinished(true);\r\n try {\r\n window.localStorage.setItem(\"materials_tutorial_finished\", true);\r\n } catch (ex) { console.log(\"localStorage exception\", ex); }\r\n }\r\n });\r\n };\r\n\r\n pingButtonClick = () => {\r\n this.exitTutorial(true);\r\n const pingButton = document.querySelector(\".pingpilot-button\");\r\n if (!pingButton) {\r\n return null\r\n }\r\n pingButton.click();\r\n }\r\n\r\n render() {\r\n\r\n const {materialsAgentTutorialIsOpened, materialsAgentTutorialFinished, isMobile} = this.props;\r\n\r\n if (!materialsAgentTutorialIsOpened || materialsAgentTutorialFinished) {\r\n return null\r\n }\r\n\r\n return (\r\n
\r\n
\r\n )\r\n\r\n}\r\n\r\nWizardFilterItem.propTypes = {\r\n filterGroup: PropTypes.object.isRequired,\r\n currentFilterValue: PropTypes.object.isRequired,\r\n listItemHeight: PropTypes.number,\r\n}\r\n\r\nconst mapStateToProps = (store) => {\r\n const {selectionWindowView} = store.selectionState;\r\n const {selectedFilters} = store.filterState;\r\n const {isMobile} = store.serverState;\r\n return {\r\n selectionWindowView,\r\n selectedFilters,\r\n isMobile\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n setSelectedFilters\r\n};\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(WizardFilterItem)\r\n","import React from \"react\";\r\nimport PropTypes from \"prop-types\";\r\nimport {connect} from \"react-redux\";\r\nimport {shiftFilterTitleInterface} from \"../../../interfaces/shiftFilterTitleInterface\";\r\nimport SelectionGridFiltersTitleDropdown from \"./selectionGridFiltersTitleDropdown\";\r\n\r\nconst SelectionGridFiltersTitle = (props) => {\r\n\r\n const {style, filterTitle, allTitles, filtersGrid, isTopTitle, isHorizontal} = props;\r\n\r\n const prevTitle = allTitles.find(renderFeature => {\r\n return renderFeature.titleIndex === filterTitle.titleIndex - 1\r\n });\r\n const nextTitle = allTitles.find(renderFeature => {\r\n return renderFeature.titleIndex === filterTitle.titleIndex + 1\r\n });\r\n\r\n const scrollToTitle = (title) => {\r\n if (isHorizontal) {\r\n const scrollLeft = title.titleIndex === 0 ? 0 : title.scrollLeft + 1\r\n // console.log(\"title to scroll\", title);\r\n filtersGrid.current.scrollToPosition({scrollLeft});\r\n } else {\r\n const scrollTop = title.titleIndex === 0 ? 0 : title.scrollTop + 5\r\n // console.log(\"title to scroll\", title);\r\n filtersGrid.current.scrollToPosition({scrollTop});\r\n }\r\n\r\n\r\n // const nextTitleElement = document.querySelector(`[data-title=\"${nextTitle.titleIndex}\"]`);\r\n // console.log(\"nextTitleElement\", nextTitleElement);\r\n //\r\n // if (nextTitleElement) {\r\n // const computed = window.getComputedStyle(nextTitleElement);\r\n // const top = computed.getPropertyValue('top')\r\n // console.log(\"realTop.top\", top);\r\n // filtersGrid.current.scrollToPosition({scrollTop: top});\r\n // }\r\n // const {scrollTop} = filtersGrid.current.getOffsetForCell({rowIndex, columnIndex})\r\n // filtersGrid.current.scrollToPosition({scrollTop: scrollTop + 1});\r\n // filtersGrid.current.scrollToCell ({columnIndex, rowIndex});\r\n\r\n // animate({\r\n // fromValue: this.scrollTop,\r\n // toValue: offset,\r\n // onUpdate: (scrollTop, callback) => this.setState({scrollTop}, callback),\r\n // onComplete: () => console.log('Scroll animation complete!'),\r\n // });\r\n }\r\n\r\n const arrowUpDisabled = !prevTitle;\r\n const arrowDownDisabled = !nextTitle;\r\n\r\n return (\r\n {currentFilterValue.displayText}
\r\n \r\n {isHorizontal ? (\r\n {filterTitle.filterValue.displayText}\r\n ) : (\r\n \r\n )}\r\n
\r\n )\r\n}\r\n\r\nSelectionGridFiltersTitle.propTypes = {\r\n style: PropTypes.object,\r\n filterTitle: PropTypes.shape(shiftFilterTitleInterface).isRequired,\r\n allTitles: PropTypes.array.isRequired,\r\n filtersGrid: PropTypes.any,\r\n isTopTitle: PropTypes.bool,\r\n isHorizontal: PropTypes.bool,\r\n}\r\n\r\nconst mapStateToProps = () => {\r\n return {};\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n\r\n};\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(SelectionGridFiltersTitle)\r\n","import {useEffect, useState} from \"react\";\r\n\r\nimport {COUNTERTOP_GROUP} from \"../../kvComponent/core/constants\";\r\nimport {getFilterGroupValues} from \"../../../misc/utils\";\r\nimport {getBvGroupFilterValues} from \"../../../api/server-api\";\r\nimport {setActivePartFilterValues} from \"../../../misc/filtersFunctions\";\r\n\r\n/**\r\n *\r\n * @param currentParent {object}\r\n * @param currentFeatures {array}\r\n * @param filterGroups {array}\r\n * @param fabricatorData {object}\r\n * @returns {object}\r\n */\r\nexport const getWithFilters = (currentParent, currentFeatures, filterGroups, fabricatorData) => {\r\n\r\n if (!currentParent) {\r\n return {withFilters: false, filtersLoading: false}\r\n }\r\n\r\n let withFilters = false;\r\n const materialFilterGroup = filterGroups.find(filterGroup => filterGroup.name.trim() === \"Countertop Material\");\r\n\r\n const caesProfiles = fabricatorData.isCaesarStone && (\r\n (fabricatorData.fabricatorName && fabricatorData.fabricatorName.includes(\"QC Master Account US\"))\r\n || (fabricatorData.fabricatorName && fabricatorData.fabricatorName.includes(\"QC Master Account CAN\"))\r\n || (fabricatorData.fabricatorName && fabricatorData.fabricatorName === \"Caesarstone new versions NEW\")\r\n || (fabricatorData.wasCreatedFromFabricator && fabricatorData.wasCreatedFromFabricator.includes(\"QC Master Account US\"))\r\n || (fabricatorData.wasCreatedFromFabricator && fabricatorData.wasCreatedFromFabricator.includes(\"QC Master Account CAN\"))\r\n || (fabricatorData.wasCreatedFromFabricator && fabricatorData.wasCreatedFromFabricator === \"Caesarstone new versions NEW\")\r\n );\r\n\r\n if ((fabricatorData.isLowes || caesProfiles)\r\n && COUNTERTOP_GROUP.includes(currentParent.partId) && materialFilterGroup && materialFilterGroup.values) {\r\n if (!currentParent.filtersReceived) {\r\n return {withFilters, filtersLoading: true}\r\n } else if (materialFilterGroup.values.some(filterValue => currentParent.filtersReceived.includes(filterValue.id))) {\r\n const filterValuesAvailable = materialFilterGroup.values.filter(filterValue => {\r\n return currentParent.filtersReceived.includes(filterValue.id)\r\n })\r\n // console.log(\"filterValuesAvailable\", filterValuesAvailable);\r\n withFilters = filterValuesAvailable.some((filterValue) => {\r\n const countertopsFiltered = currentFeatures.filter(feature => {\r\n if (!feature || !feature.part) { // just in case\r\n return false\r\n }\r\n const countertopFilters = getFilterGroupValues(feature.part, materialFilterGroup);\r\n return countertopFilters && countertopFilters.includes(filterValue.id)\r\n });\r\n return countertopsFiltered.length\r\n })\r\n }\r\n }\r\n return {withFilters, filtersLoading: false}\r\n}\r\n\r\nexport const useGetFiltersRequest = (useRequest, requestFilters, featureGroup, allFilterGroups) => {\r\n\r\n const [filtersLoaded, setFiltersLoaded] = useState(!requestFilters);\r\n\r\n const checkFilters = async () => {\r\n const featureGroupFiltersResponse = await getBvGroupFilterValues(featureGroup.dbName || featureGroup.partName, null, false);\r\n setActivePartFilterValues(featureGroupFiltersResponse.data, featureGroup, allFilterGroups);\r\n setFiltersLoaded(true)\r\n }\r\n\r\n useEffect(() => {\r\n if (useRequest && requestFilters) {\r\n checkFilters();\r\n }\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [requestFilters, featureGroup])\r\n\r\n return filtersLoaded\r\n}\r\n","import React, {PureComponent} from 'react'\r\nimport { connect } from 'react-redux';\r\nimport classnames from 'classnames';\r\n\r\nimport Analytics from './../../analytics';\r\nimport {setGalleryActiveImageIndex, toggleGalleryVisible} from \"../../actions/selectionFunctions\";\r\nimport {featureThumbnailUrl} from \"../../misc/helpers\";\r\nimport {THUMBNAIL_SIZES} from \"../../misc/utils\";\r\n\r\nclass GalleryViewClass extends PureComponent {\r\n\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n images: [],\r\n galleryOpened: false\r\n };\r\n }\r\n\r\n componentDidMount() {\r\n const {activeFeature, galleryImages} = this.props;\r\n this.setState({\r\n images: [{\r\n id: 1,\r\n url: featureThumbnailUrl(activeFeature),\r\n preview: featureThumbnailUrl(activeFeature, THUMBNAIL_SIZES.medium)\r\n }, // main image thumbnail\r\n ...galleryImages\r\n ]\r\n });\r\n setTimeout(() => {\r\n this.setState({\r\n galleryOpened: true\r\n });\r\n }, 0)\r\n }\r\n\r\n componentWillUnmount() {\r\n this.props.setGalleryActiveImageIndex(0);\r\n }\r\n\r\n handleCloseClick = () => {\r\n Analytics.sendClickEvent('gallery-close');\r\n this.setState({\r\n galleryOpened: false\r\n }, () => {\r\n setTimeout(() => {\r\n this.props.toggleGalleryVisible(false);\r\n }, 300)\r\n })\r\n };\r\n\r\n thumbnailClick = (activeImage, activeImageIndex) => {\r\n Analytics.sendClickEvent('view-gallery-image-' + activeImage.id)\r\n this.props.setGalleryActiveImageIndex(activeImageIndex)\r\n };\r\n\r\n render() {\r\n const activeImage = this.state.images[this.props.galleryActiveImageIndex];\r\n return (\r\n \r\n
\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = (store) => {\r\n let { galleryActiveImageIndex, selectionFeatureInfo, galleryShowActiveFeature, activeFeature} = store.selectionState;\r\n const showFeature = galleryShowActiveFeature ? galleryShowActiveFeature : selectionFeatureInfo || activeFeature;\r\n return {\r\n galleryImages: showFeature.dbFeature.galleryImages || [],\r\n galleryActiveImageIndex,\r\n activeFeature: showFeature,\r\n };\r\n};\r\n\r\nexport default connect(mapStateToProps, {\r\n toggleGalleryVisible,\r\n setGalleryActiveImageIndex\r\n})(GalleryViewClass);\r\n","import React, {useEffect, useState} from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport {connect} from \"react-redux\";\r\nimport {injectIntl} from 'react-intl';\r\n\r\nimport {toggleShowDescriptionCover} from \"../../actions/actionFunctions\";\r\nimport {wizardGroupInterface} from \"../../interfaces/wizardItemInterface\";\r\nimport {useIsMounted, usePrevious} from \"../../misc/helperHooks\";\r\nimport {getFeatureGroupDescription} from \"../look/grohe/groheNavigation/groheFunctions\";\r\n\r\nlet timeoutId = 0;\r\n\r\nconst SelectionDescriptionCover = (props) => {\r\n\r\n const {activePart, wizardGroup, intl, showDescriptionCover, toggleShowDescriptionCover, windowWidth,\r\n fabricatorData} = props;\r\n\r\n const isMounted = useIsMounted();\r\n const prevWizardGroup = usePrevious(wizardGroup);\r\n const prevActivePart = usePrevious(activePart);\r\n const [coverText, setCoverText] = useState(\"\");\r\n\r\n const getDescriptionText = () => {\r\n if (wizardGroup && wizardGroup.description) {\r\n return wizardGroup.description\r\n }\r\n if (!activePart) {\r\n return \"\"\r\n }\r\n return getFeatureGroupDescription(activePart.part, intl, fabricatorData)\r\n };\r\n\r\n const showCover = () => {\r\n clearTimeout(timeoutId);\r\n toggleShowDescriptionCover(false);\r\n timeoutId = setTimeout(() => {\r\n const descText = getDescriptionText();\r\n if (isMounted() && descText) {\r\n setCoverText(descText);\r\n toggleShowDescriptionCover(true);\r\n }\r\n }, 2000);\r\n }\r\n\r\n useEffect(() => {\r\n if (!prevWizardGroup && wizardGroup || (prevWizardGroup && wizardGroup && (prevWizardGroup.id !== wizardGroup.id))) {\r\n showCover();\r\n } else if (!prevActivePart && activePart || (prevActivePart && activePart && (prevActivePart.part.partName !== activePart.part.partName))) {\r\n showCover();\r\n }\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [activePart, wizardGroup]);\r\n\r\n let styles = {};\r\n if (coverText && (coverText.length > 250) && (windowWidth < 991)) {\r\n styles = windowWidth < 640\r\n ? {fontSize: \"10px\"}\r\n : windowWidth < 800 ? {fontSize: \"13px\"} : {}\r\n }\r\n\r\n return (\r\n e.stopPropagation()}>\r\n
\r\n \r\n
\r\n \r\n {activeImage\r\n ? 
window.open(activeImage.url, \"_blank\")}\r\n className=\"gallery-view__main-image\" />\r\n : null}\r\n
\r\n \r\n
\r\n - \r\n {this.state.images.map((g, gIndex) => {\r\n return (\r\n
- this.thumbnailClick(g, gIndex)}/>\r\n )\r\n })}\r\n
\r\n {coverText}\r\n
\r\n )\r\n}\r\n\r\nSelectionDescriptionCover.propTypes = {\r\n activePart: PropTypes.object,\r\n wizardGroup: PropTypes.shape(wizardGroupInterface),\r\n};\r\n\r\nconst mapStateToProps = (store) => {\r\n return {\r\n showDescriptionCover: store.selectionState.showDescriptionCover,\r\n windowWidth: store.serverState.windowWidth,\r\n fabricatorData: store.fabricatorState,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n toggleShowDescriptionCover\r\n}\r\n\r\nexport default injectIntl(\r\n connect(mapStateToProps, mapDispatchToProps)(SelectionDescriptionCover)\r\n)\r\n","import React, {useEffect, useRef} from \"react\";\r\nimport { Player } from 'video-react';\r\nimport { connect } from \"react-redux\";\r\nimport $ from 'jquery';\r\n\r\nimport {toggleNotCompatibleView} from \"../../actions/selectionFunctions\";\r\nimport {toggleShowDescriptionCover} from \"../../actions/actionFunctions\";\r\nimport ActionTypes from \"../../misc/actionTypes\";\r\n\r\nconst NotCompatibleView = (props) => {\r\n\r\n const {activePartRelatedItemIndex, windowWidth, activeFeature} = props;\r\n const player = useRef(null);\r\n\r\n useEffect(() => {\r\n const isMobile = windowWidth < 991;\r\n if (!isMobile) {\r\n player.current.play();\r\n }\r\n props.toggleShowDescriptionCover(false);\r\n return () => {\r\n props.toggleNotCompatibleView(false); // on unmount component\r\n }\r\n }, []); // eslint-disable-line react-hooks/exhaustive-deps\r\n\r\n useEffect(() => {\r\n // skip initial render\r\n return () => {\r\n props.toggleNotCompatibleView(false); // on unmount component\r\n }\r\n }, [activePartRelatedItemIndex]); // eslint-disable-line react-hooks/exhaustive-deps\r\n\r\n const updateDesignButtonClick = () => {\r\n const navFeature = activeFeature.getParent()\r\n .navigationSubItems()\r\n .find(navItem => navItem.part.dbFeature.id === activeFeature.dbFeature.id) // find the real feature\r\n if (navFeature) { // just in case\r\n navFeature.part.applyFeatureIfNotCompatible(); // first set new rules for this feature\r\n navFeature.part.handleClick(); // change item\r\n $(window).trigger(ActionTypes.UPDATE_ALL_ITEMS); // update footer items\r\n }\r\n props.toggleNotCompatibleView(false); // then remove the view\r\n }\r\n\r\n const videoPath = \"https://intro-videos.s3.amazonaws.com/not-compatible-icon_v1.webm\";\r\n const isMobile = windowWidth < 991;\r\n\r\n return (\r\n \r\n {isMobile ? null : (\r\n
\r\n )\r\n};\r\n\r\nconst mapStateToProps = (store) => {\r\n const {activeFeature, activePartRelatedItemIndex} = store.selectionState;\r\n return {\r\n activeFeature,\r\n activePartRelatedItemIndex,\r\n windowWidth: store.serverState.windowWidth,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n toggleNotCompatibleView,\r\n toggleShowDescriptionCover\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(NotCompatibleView);\r\n","import React, {Component} from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { connect } from \"react-redux\";\r\nimport $ from 'jquery';\r\nimport {FormattedMessage} from \"react-intl\";\r\n\r\nimport {\r\n setSelectionWindowView,\r\n} from \"../../actions/actionFunctions\";\r\nimport SelectionViewSwitchers from './selectionViewSwitchers';\r\n\r\nimport Analytics from './../../analytics';\r\n\r\nimport BacksplashSelect from './backsplashSelect';\r\nimport FiltersButton from './filtersButton';\r\nimport CountertopSwitchers from \"../kvComponent/navigation/countertopSwitchers\";\r\nimport CabinetSwitchers from \"../kvComponent/navigation/cabinetSwitchers\";\r\nimport ActionTypes from \"../../misc/actionTypes\";\r\nimport ShareButton from \"../common/shareButton\";\r\nimport BodyPanelRadio from \"../visComponents/navigation/desktop/bodyPanelRadio\";\r\nimport {CABINET_GROUP, COUNTERTOP_GROUP} from \"../kvComponent/core/constants\";\r\nimport LanguageSwitcher from \"../common/languageSwitcher\";\r\nimport ShoppingCartButton from \"../ui/shoppingCartButton\";\r\nimport {COUNTERTOP_GROUP_BATHROOM} from \"../bvSceneComponent/core/constants\";\r\nimport LookAllWallsRadioButton from \"../look/lookNavigation/lookMain/lookAllWallsRadioButton\";\r\nimport {getCurrentLayout} from \"../appLayout\";\r\nimport {getCommonVisualizerType} from \"../../config\";\r\n\r\n\r\nclass SelectionMainHeader extends Component {\r\n\r\n static propTypes = {\r\n activeSubPart: PropTypes.object,\r\n searchText: PropTypes.string.isRequired,\r\n handleSearchInputChange: PropTypes.func.isRequired,\r\n };\r\n\r\n handleChangeListView = (e) => {\r\n Analytics.sendClickEvent(\"change-list-view-\" + e.target.dataset.view);\r\n this.props.handleChangeListView(+e.target.dataset.view);\r\n };\r\n\r\n backsplashSelectClick = () => {\r\n $(window).trigger('resize');\r\n $(window).trigger(ActionTypes.UPDATE_QUOTING_TOOL);\r\n };\r\n\r\n render() {\r\n const {activeSubPart, fabricatorData, isMobile} = this.props;\r\n const layout = getCurrentLayout();\r\n const fabricatorSettings = fabricatorData.settings;\r\n\r\n let subPartPartId = '';\r\n if (activeSubPart) {\r\n subPartPartId = activeSubPart.part.partId;\r\n }\r\n\r\n const isCabinet = CABINET_GROUP.includes(subPartPartId);\r\n\r\n const isCountertop = COUNTERTOP_GROUP.includes(subPartPartId) || COUNTERTOP_GROUP_BATHROOM.includes(subPartPartId);\r\n\r\n const showBacksplashSelect = subPartPartId === \"backsplash\" && (getCommonVisualizerType() === \"kitchen\");\r\n\r\n const showDisabledRadioButtons = activeSubPart && activeSubPart.part.canBeDisabled;\r\n\r\n return (\r\n \r\n
\r\n )}\r\n Not Compatible\r\n Item is not compatible with current design. Would you like to update your design?
\r\n\r\n \r\n
\r\n\r\n {!fabricatorData.isCaesarStone && (showBacksplashSelect || isCabinet || isCountertop || showDisabledRadioButtons) ? (\r\n
\r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = (store) => {\r\n const {selectionWindowView, selectionFeatureInfo, activeFeature} = store.selectionState;\r\n const {isMobile} = store.serverState;\r\n return {\r\n selectionWindowView,\r\n selectionFeatureInfo,\r\n isMobile,\r\n fabricatorData: store.fabricatorState,\r\n activeFeature, // to update active feature\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n handleChangeListView: setSelectionWindowView,\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(SelectionMainHeader);\r\n","import React, {Component} from 'react';\r\nimport $ from 'jquery';\r\nimport {FormattedMessage} from \"react-intl\";\r\n\r\nimport {getCurrentLayout} from '../appLayout';\r\nimport SelectionFooterSubPart from \"./selectionFooterSubPart\";\r\nimport ActionTypes from \"../../misc/actionTypes\";\r\nimport BodySwipable from \"../visComponents/navigation/desktop/bodySwipable\";\r\n\r\nexport default class SelectionFooterSubParts extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n relatedItems: [],\r\n shadowLeft: -100,\r\n shadowRight: 0,\r\n };\r\n }\r\n\r\n componentDidMount() {\r\n this.setRelatedItems(this.props);\r\n // this.footerList.addEventListener(\"scroll\", this.handleFooterListScroll);\r\n $(window).on(ActionTypes.UPDATE_ALL_ITEMS, this.updateItems);\r\n setTimeout(() => {\r\n this.scrollToActiveSubPart(this.props.activePartRelatedItemIndex, 0);\r\n }, 0)\r\n }\r\n\r\n componentWillUnmount() {\r\n $(window).off(ActionTypes.UPDATE_ALL_ITEMS, this.updateItems);\r\n // this.footerList.removeEventListener(\"scroll\", this.handleFooterListScroll);\r\n }\r\n\r\n componentWillReceiveProps(nextProps) {\r\n if (this.props.visualizerIsChanging && !nextProps.visualizerIsChanging) {\r\n this.setRelatedItems(nextProps);\r\n }\r\n }\r\n\r\n scrollToActiveSubPart = (activePartRelatedItemIndex, animationTime = 500) => {\r\n if (this.footerList) {\r\n const maxScroll = this.footerList.scrollWidth - this.footerList.clientWidth;\r\n const scrollIndex = this.props.windowWidth < 991 ? 50 : 40;\r\n const neededScroll = scrollIndex*activePartRelatedItemIndex;\r\n const scrollLeft = (maxScroll > 0) && (neededScroll > maxScroll) ? maxScroll : neededScroll;\r\n $(this.footerList).animate({scrollLeft}, animationTime);\r\n }\r\n };\r\n\r\n handleFooterListScroll = (e) => {\r\n // console.log('e', e.target.scrollLeft);\r\n this.setState({\r\n shadowLeft: e.target.scrollLeft > 100 ? 0 : -100 + e.target.scrollLeft,\r\n shadowRight: e.target.scrollLeft > 100 ? -100 : 0 - e.target.scrollLeft\r\n });\r\n };\r\n\r\n updateItems = () => {\r\n this.setRelatedItems(this.props)\r\n };\r\n\r\n setRelatedItems = (nextProps = this.props) => {\r\n // console.log('nextProps.activePart', nextProps.activePart);\r\n // console.log('activePart.subParts(false)', activePart.subParts(false));\r\n const layout = getCurrentLayout();\r\n // console.log(\"setRelatedItems layout\", layout);\r\n if (layout.qtCategories && nextProps.qtActiveCategory) {\r\n const qtActiveCategory = layout.qtCategories.find(qtCategory => qtCategory.name === nextProps.qtActiveCategory)\r\n || layout.qtCategories[0]; // cases when visualizerType is changed\r\n this.setState({\r\n relatedItems: qtActiveCategory.subParts\r\n });\r\n } else {\r\n this.setState({\r\n relatedItems: nextProps.activePart.subParts(false)\r\n });\r\n }\r\n };\r\n\r\n getSubPartsList = (withShoppingCart = false) => {\r\n const {activePartRelatedItemIndex, showAdvancedQuoting, visualizersLoaded, networkConnection} = this.props;\r\n return (\r\n \r\n {showDisabledRadioButtons && activeSubPart ? : null}\r\n {showBacksplashSelect ? : null}\r\n {(isCabinet || isCountertop) && activeSubPart ? (\r\n
\r\n ) : null}\r\n \r\n {isCabinet\r\n ? layout.isNewLayout\r\n ? \r\n : \r\n : null}\r\n {isCountertop\r\n ? layout.isNewLayout\r\n ? \r\n : \r\n : null}\r\n
\r\n ) : null}\r\n \r\n {subPartPartId === \"backsplash\" && isMobile\r\n ? null\r\n :
\r\n \r\n \r\n {(placeholder) => (\r\n \r\n )}\r\n \r\n {this.props.searchText ? (\r\n
\r\n \r\n {isMobile && fabricatorSettings.enableSharing ? : null}\r\n {isMobile ?
\r\n this.footerList = el}>\r\n {this.state.relatedItems.map((item, index) => {\r\n if (!visualizersLoaded.includes(document.kvConfig.visualizerType)) {\r\n return null\r\n }\r\n if (showAdvancedQuoting && (index !== activePartRelatedItemIndex) && window.location.href.includes(\"materials\")) {\r\n return null\r\n }\r\n if (item.part && item.part.partId === \"slabs\") {\r\n return null\r\n }\r\n return \r\n })}\r\n {withShoppingCart ? (\r\n \r\n ) : null}\r\n
\r\n {/**/}\r\n \r\n \r\n \r\n )\r\n};\r\n\r\nconst mapStateToProps = (store) => {\r\n // const {visualizerIsChanging} = store.serverState;\r\n const {settings} = store.fabricatorState;\r\n return {\r\n quotes: store.quotesState.quotes,\r\n activeQuoteIndex: store.quotesState.activeQuoteIndex,\r\n // visualizerIsChanging,\r\n fabricatorSettings: settings,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n setActiveQuoteIndex,\r\n setQuotes,\r\n changeActivePartRelatedItemIndex,\r\n};\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(Quotes);\r\n","import React, { Component } from 'react';\r\nimport { connect } from \"react-redux\";\r\nimport {FormattedMessage} from \"react-intl\";\r\n\r\nimport PriceWorksheetList from \"./priceWorksheetList\";\r\nimport Analytics from './../../analytics';\r\nimport {togglePriceWorksheetOpened} from \"../../actions/priceWorksheetActions\";\r\nimport {getDiscounts} from \"../../api/server-api\";\r\n\r\nclass PriceWorksheetView extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n unmount: false\r\n };\r\n }\r\n\r\n componentDidMount() {\r\n if (!this.props.discountsReceived) {\r\n getDiscounts();\r\n }\r\n }\r\n\r\n componentWillReceiveProps(nextProps) {\r\n Analytics.sendClickEvent('installations-close');\r\n if (!nextProps.priceWorksheetOpened && this.props.priceWorksheetOpened) {\r\n this.setState({\r\n unmount: true\r\n }, () => {\r\n setTimeout(() => {\r\n this.setState({\r\n unmount: false\r\n })\r\n }, 500)\r\n })\r\n }\r\n\r\n }\r\n\r\n closePriceSheetView = () => {\r\n this.props.togglePriceWorksheetOpened(false);\r\n };\r\n\r\n render() {\r\n\r\n const {fabricatorData} = this.props;\r\n\r\n return (\r\n \r\n : null}\r\n {/*{imageCanvas && imageCanvas.current ? (*/}\r\n {/* */}\r\n {/* {(showPoints) => }*/}\r\n {/* */}\r\n {/*) : null}*/}\r\n {imageCanvas && imageCanvas.current && !IS_PRODUCT_JOURNEY ? : null}\r\n {showCanvasLoader ? (\r\n \r\n )\r\n};\r\n\r\nLookCanvas.propTypes = {\r\n zoomToFeatureGroup: PropTypes.func,\r\n imageCanvas: PropTypes.object,\r\n}\r\n\r\nconst mapStateToProps = (store) => {\r\n const {canvasId, canvasDimensions, canvasCount} = store.bathroomVisualizerState;\r\n const {contextMenu, lookOpened, lookPageOpened, lookOverlayOpened, introStep, introHidden} = store.lookState;\r\n const {isMobile, isTouch, activeTheme, visualizersLoaded} = store.serverState;\r\n const {groheSameColorSectionOpened} = store.groheState;\r\n const {wizardActiveItem, wizardSelectedValues, wizardList} = store.wizardState;\r\n const fabricatorData = store.fabricatorState;\r\n const {activePreset} = store.bathroomVisualizerState;\r\n\r\n return {\r\n canvasId,\r\n canvasDimensions,\r\n // lookOpened,\r\n canvasCount,\r\n isMobile: isMobile || isTouch,\r\n contextMenu,\r\n activeTheme,\r\n visualizersLoaded,\r\n lookOpened,\r\n // lookActiveFeature,\r\n // lookActiveCategory,\r\n groheSameColorSectionOpened,\r\n lookPageOpened,\r\n lookOverlayOpened,\r\n introStep,\r\n introHidden,\r\n wizardActiveItem,\r\n wizardSelectedValues,\r\n fabricatorData,\r\n wizardList,\r\n activePreset,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n setLookContextMenu,\r\n setLookOpened,\r\n setLookActiveCategory,\r\n setCanvasScale,\r\n setGroheSameColorSectionOpened,\r\n setLookDemoPointsClicked,\r\n setLookPageOpened,\r\n setWizardActiveItem,\r\n};\r\n\r\nexport default withRouter(\r\n connect(mapStateToProps, mapDispatchToProps)(LookCanvas)\r\n)\r\n","import React, {Fragment} from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport PropTypes from \"prop-types\";\r\nimport {FormattedMessage, injectIntl} from \"react-intl\";\r\nimport {withRouter} from \"react-router-dom\";\r\n\r\nimport Button from \"@mui/material/Button\";\r\nimport SvgIcon from \"@mui/material/SvgIcon\";\r\nimport CircularProgress from \"@mui/material/CircularProgress\";\r\n\r\nimport {featureInterface} from \"../../../../../interfaces/featureInterface\";\r\nimport {\r\n setLookActiveCategory, setLookActiveFeature,\r\n setLookMoreInfoOpened, setLookOpened, setLookOverlayOpened,\r\n setLookPageOpened\r\n} from \"../../../../../actions/lookFunctions\";\r\nimport MaterialSpinner from \"../../../../ui/materialSpinner\";\r\nimport {removeFromCart, setCanvasScale, updateCanvasCount} from \"../../../../../actions/actionFunctions\";\r\nimport {checkIfFeatureDisabled, zoomCanvasOut} from \"../../../lookNavigation/lookFunctions\";\r\nimport {getFeatureGroupName, getFeatureIsLocked, isIframe} from \"../../../../../misc/helpers\";\r\nimport {\r\n getBundledFeatures,\r\n getCartItemsArrayFromFeature,\r\n getFeatureUrl,\r\n hideFeatureSection,\r\n isInStock\r\n} from \"../../../lookNavigation/lookFunctions2\";\r\nimport WithUpdateLookCartItem from \"../../../hocs/withUpdateLookCartItem\";\r\nimport {\r\n setShowAddedToTheCartSuccess,\r\n setGroheSimilarProductsOpened,\r\n setLastOpenedCategory,\r\n setGroheSimilarFeature\r\n} from \"../../../../../actions/groheFunctions\";\r\nimport {ROUTES} from \"../../../../../routes\";\r\nimport {LookCartIcon} from \"../../../../common/icons\";\r\nimport WithAddToCartPostMessage from \"../../../hocs/withAddToCartPostMessage\";\r\nimport LookCanvasContext from \"../../../lookCanvasContext\";\r\nimport WithZoomToFeature from \"../../../hocs/withZoomToFeature\";\r\nimport {LOOK_OVERLAYS} from \"../../../core/constants\";\r\nimport {COLORS} from \"../../../../../colorThemes\";\r\nimport Analytics, {PRODUCT_JOURNEY_ANALYTIC_EVENTS} from \"../../../../../analytics\";\r\nimport {getCurrentLayout} from \"../../../../appLayout\";\r\n\r\nconst GroheFeatureButtons = (props) => {\r\n\r\n const {lookActiveFeature, intl, fabricatorData, lookActiveCategory, setLookActiveCategory, history,\r\n setGroheSimilarProductsOpened, setLookPageOpened, isMobile, showAddedToTheCartSuccess, removeFromCart,\r\n setShowAddedToTheCartSuccess, setLastOpenedCategory, lookCompatabilityAlert, cartItemEditFeature,\r\n setGroheSimilarFeature, qtActiveCategory, groheActiveFeatureQuantity, lookOverlayOpened, setLookOpened,\r\n setCanvasScale, setLookOverlayOpened, setLookActiveFeature} = props;\r\n\r\n if (!lookActiveFeature) {\r\n return \r\n }\r\n return \r\n }\r\n\r\n if (isMobile) {\r\n return (\r\n \r\n {(imageCanvas) => (\r\n \r\n {(zoomToFeatureGroup) => (\r\n \r\n \r\n {(updateLookCartItem) => (\r\n \r\n {(addToCartPostMessage) => lookActiveCategory ? null : (\r\n \r\n : \r\n )}\r\n \r\n \r\n \r\n )}\r\n \r\n )}\r\n \r\n )\r\n }\r\n\r\n return (\r\n \r\n {(imageCanvas) => (\r\n \r\n {(zoomToFeatureGroup) => (\r\n \r\n )}\r\n \r\n )\r\n};\r\n\r\nGroheFeatureButtons.propTypes = {\r\n lookFeature: PropTypes.shape(featureInterface),\r\n}\r\n\r\nconst mapStateToProps = (store) => {\r\n const {lookActiveFeature, lookActiveCategory, lookOverlayOpened, lookCompatabilityAlert} = store.lookState;\r\n const {isMobile} = store.serverState;\r\n const {showAddedToTheCartSuccess, groheActiveFeatureQuantity} = store.groheState;\r\n const {qtActiveCategory} = store.qtState;\r\n const {isPhoneNumberValidated} = store.userState; // to update component when user is logged in\r\n const {cartItemEditFeature} = store.cartState;\r\n\r\n return {\r\n lookActiveFeature,\r\n lookActiveCategory,\r\n fabricatorData: store.fabricatorState,\r\n isMobile,\r\n showAddedToTheCartSuccess,\r\n qtActiveCategory,\r\n groheActiveFeatureQuantity,\r\n lookOverlayOpened,\r\n isPhoneNumberValidated,\r\n lookCompatabilityAlert,\r\n cartItemEditFeature,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n setLookActiveCategory,\r\n setLookMoreInfoOpened,\r\n updateCanvasCount,\r\n setGroheSimilarProductsOpened,\r\n setLookPageOpened,\r\n setLastOpenedCategory,\r\n setCanvasScale,\r\n setShowAddedToTheCartSuccess,\r\n setGroheSimilarFeature,\r\n setLookOpened,\r\n setLookOverlayOpened,\r\n removeFromCart,\r\n setLookActiveFeature,\r\n};\r\n\r\nexport default withRouter(\r\n injectIntl(\r\n connect(mapStateToProps, mapDispatchToProps)(GroheFeatureButtons)\r\n )\r\n)\r\n","import React, {useEffect, useState} from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport {FormattedMessage} from \"react-intl\";\r\n\r\nimport CheckIcon from '@mui/icons-material/Check';\r\n\r\nimport {setLookActiveCategory, setLookMoreInfoOpened} from \"../../../../../actions/lookFunctions\";\r\nimport MaterialSpinner from \"../../../../ui/materialSpinner\";\r\nimport {updateCanvasCount} from \"../../../../../actions/actionFunctions\";\r\nimport GroheRequiredFeatures from \"./groheRequiredFeatures\";\r\nimport {getLixilRequiredNotIncludedFeatures} from \"../groheFunctions\";\r\nimport GroheFeatureMoreInfoButton from \"./groheFeatureMoreInfoButton\";\r\n\r\nconst GroheFeatureContentInCart = (props) => {\r\n\r\n const [requiredFeatures, setRequiredFeatures] = useState(null);\r\n const {lookActiveFeature, selection} = props;\r\n useEffect(() => {\r\n setRequiredFeatures(getLixilRequiredNotIncludedFeatures(lookActiveFeature))\r\n },[lookActiveFeature, setRequiredFeatures])\r\n\r\n if (!lookActiveFeature) {\r\n if (selection) {\r\n return \r\n {(imageCanvas) => (\r\n \r\n )}\r\n \r\n )\r\n};\r\n\r\nGroheFeatureWizardButton.propTypes = {\r\n feature: PropTypes.shape(featureInterface),\r\n hasWizard: PropTypes.object,\r\n}\r\n\r\nconst mapStateToProps = (store) => {\r\n const {isMobile} = store.serverState;\r\n const {isPhoneNumberValidated} = store.userState; // to update component when user is logged in\r\n\r\n return {\r\n isMobile,\r\n isPhoneNumberValidated,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n setLookOverlayOpened,\r\n setWizardActiveItem,\r\n setCanvasScale,\r\n};\r\n\r\nexport default withRouter(\r\n connect(mapStateToProps, mapDispatchToProps)(GroheFeatureWizardButton)\r\n)\r\n","import {useEffect} from \"react\";\r\nimport Analytics from \"../../../analytics\";\r\nimport {toFixedFeatureCost} from \"../../../misc/helpers\";\r\nimport {getAnalyticsEcommerceItem} from \"../../../analyticsEcommerceParams\";\r\nimport {usePrevious} from \"../../../misc/helperHooks\";\r\n\r\nexport const useViewItemAnalyticsEvent = (lookActiveFeature, wizardActiveItem, fabricatorSettings) => {\r\n\r\n const prevActiveFeature = usePrevious(lookActiveFeature);\r\n\r\n useEffect(() => {\r\n if (!wizardActiveItem && lookActiveFeature && (!prevActiveFeature || (lookActiveFeature.dbFeature.id !== prevActiveFeature.dbFeature.id))) {\r\n Analytics.sendEcommerceEvent(\"view_item\", {\r\n currency: fabricatorSettings.currency,\r\n value: +toFixedFeatureCost(lookActiveFeature, 1),\r\n items: [getAnalyticsEcommerceItem(lookActiveFeature, 1)]\r\n })\r\n }\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [lookActiveFeature])\r\n\r\n}\r\n","import React from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport {FormattedMessage, injectIntl} from \"react-intl\";\r\n\r\nimport IconButton from \"@mui/material/IconButton\";\r\nimport SvgIcon from \"@mui/material/SvgIcon\";\r\n\r\nimport {setLookMoreInfoOpened} from \"../../../../../actions/lookFunctions\";\r\nimport {LOOK_FEATURE_CONTENT} from \"../../../core/constants\";\r\nimport {IS_PRODUCT_JOURNEY} from \"../../../../../config\";\r\nimport {Look3DIcon} from \"../../../../common/icons\";\r\nimport COLOR_THEMES from \"../../../../../colorThemes\";\r\nimport Analytics, {LOOK_JOURNEY_ANALYTIC_EVENTS, PRODUCT_JOURNEY_ANALYTIC_EVENTS} from \"../../../../../analytics\";\r\n\r\nconst GroheMobile3dButton = (props) => {\r\n\r\n const {lookActiveFeature, intl, setLookMoreInfoOpened, activeTheme, moreInfoOpened, moreInfoContent} = props;\r\n\r\n if (!lookActiveFeature) {\r\n return null\r\n }\r\n\r\n const threeDButtonClick = () => {\r\n\r\n const analyticsLabel = IS_PRODUCT_JOURNEY\r\n ? PRODUCT_JOURNEY_ANALYTIC_EVENTS.productFeatureMobile3dButton\r\n : LOOK_JOURNEY_ANALYTIC_EVENTS.lookFeatureMobile3dButton;\r\n\r\n Analytics.sendClickEvent(analyticsLabel);\r\n\r\n const moreInfoType = moreInfoOpened && (moreInfoContent === LOOK_FEATURE_CONTENT.threeD) ? \"\" : \"main\";\r\n setLookMoreInfoOpened(moreInfoType, LOOK_FEATURE_CONTENT.threeD);\r\n }\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n )\r\n};\r\n\r\nconst mapStateToProps = (store) => {\r\n const {lookActiveFeature, moreInfoOpened, moreInfoContent} = store.lookState;\r\n const {activeTheme} = store.serverState;\r\n return {\r\n lookActiveFeature,\r\n moreInfoContent,\r\n moreInfoOpened,\r\n activeTheme,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n setLookMoreInfoOpened\r\n};\r\n\r\nexport default injectIntl(\r\n connect(mapStateToProps, mapDispatchToProps)(GroheMobile3dButton)\r\n)\r\n","import React, {Fragment} from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport {injectIntl} from \"react-intl\";\r\nimport {withRouter} from \"react-router-dom\";\r\n\r\nimport MenuItem from \"@mui/material/MenuItem\";\r\nimport ListItemIcon from \"@mui/material/ListItemIcon\";\r\nimport AutoFixHighIcon from '@mui/icons-material/AutoFixHigh';\r\n\r\nimport Analytics, {LOOK_JOURNEY_ANALYTIC_EVENTS} from \"../../../../analytics\";\r\nimport LookMainFeatureGroupsExpandIcon from \"./lookMainFeatureGroupsExpandIcon\";\r\nimport {getLookIdUrl} from \"../lookFunctions2\";\r\nimport {ROUTES} from \"../../../../routes\";\r\nimport {setWizardActiveItem} from \"../../../../actions/wizardFunctions\";\r\nimport {IS_PRODUCT_JOURNEY} from \"../../../../config\";\r\n\r\nimport {setLookPageOpened} from \"../../../../actions/lookFunctions\";\r\nimport {wizardIsDisabled} from \"./lookWizard/lookWizardFunctions\";\r\n\r\nconst LookMainWizardList = (props) => {\r\n\r\n const {wizardList, history, activePreset, setWizardActiveItem, isMobile, setLookPageOpened, shopPageOpened\r\n } = props;\r\n\r\n if (!Array.isArray(wizardList) || !wizardList.length || wizardList.every(wizardItem => wizardIsDisabled(wizardItem, activePreset))) {\r\n return null\r\n }\r\n\r\n const parentClick = (wizardItem) => {\r\n Analytics.sendClickEvent(LOOK_JOURNEY_ANALYTIC_EVENTS.lookMenuWizard + Analytics.getStringForAnalytics(wizardItem.name));\r\n setWizardActiveItem(wizardItem);\r\n setLookPageOpened(\"\");\r\n\r\n if (!shopPageOpened) {\r\n history.push(`${getLookIdUrl(false) + ROUTES.wizard}/${wizardItem.id}`);\r\n }\r\n }\r\n\r\n return (\r\n \r\n {wizardList.map(wizardItem => {\r\n if (wizardIsDisabled(wizardItem, activePreset) || wizardItem.hideInMenu) {\r\n return null\r\n }\r\n const {customImageUrl, uploadedImageUrl} = wizardItem;\r\n\r\n if (isMobile || IS_PRODUCT_JOURNEY) {\r\n return (\r\n \r\n )\r\n }\r\n\r\n return (\r\n parentClick(wizardItem)}>\r\n \r\n )\r\n })}\r\n \r\n )\r\n};\r\n\r\nconst mapStateToProps = (store) => {\r\n const {wizardList} = store.wizardState;\r\n const {activePreset} = store.bathroomVisualizerState;\r\n const {isMobile} = store.serverState;\r\n const {shopPageOpened} = store.shopState;\r\n\r\n return {\r\n wizardList,\r\n activePreset,\r\n isMobile,\r\n shopPageOpened,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n setWizardActiveItem,\r\n setLookPageOpened\r\n};\r\n\r\nexport default withRouter(\r\n injectIntl(\r\n connect(mapStateToProps, mapDispatchToProps)(LookMainWizardList)\r\n )\r\n)\r\n","import React from \"react\";\r\n\r\nimport SvgIcon from \"@mui/material/SvgIcon\";\r\nimport ChevronRight from \"@mui/icons-material/ChevronRight\";\r\n\r\nconst LookMainFeatureGroupsExpandIcon = () => {\r\n\r\n return (\r\n \r\n )\r\n\r\n if (isWizard) {\r\n return content\r\n }\r\n\r\n return (\r\n \r\n {lookActiveCategory ? \r\n )\r\n }\r\n\r\n return (\r\n \r\n {filtersVisible ? (\r\n \r\n )\r\n};\r\n\r\nconst mapStateToProps = (store) => {\r\n const {lookActiveCategory, lookViewType, lookOpened} = store.lookState;\r\n const {activeTheme, isMobile} = store.serverState;\r\n const {filtersOpened, groheFiltersSearchText} = store.groheState;\r\n const {selectedFilters} = store.filterState;\r\n const fabricatorData = store.fabricatorState;\r\n const {wizardSelectedValues, wizardActiveItem, wizardActiveStep} = store.wizardState;\r\n\r\n let selectedFiltersLength = selectedFilters.length;\r\n if (groheFiltersSearchText) {\r\n selectedFiltersLength += 1;\r\n }\r\n\r\n let filtersVisible = true;\r\n if (fabricatorData.isSolidSurface) {\r\n if (!wizardActiveItem) {\r\n filtersVisible = lookActiveCategory === \"vanity_countertop\"\r\n }\r\n const currentGroups = getCurrentGroups(wizardActiveItem, wizardActiveStep, wizardSelectedValues);\r\n if (currentGroups.length === 1) {\r\n const featureGroup = getFeatureGroupFromWizardGroup(currentGroups[0]);\r\n filtersVisible = featureGroup && featureGroup.partId === \"vanity_countertop\"\r\n }\r\n }\r\n\r\n return {\r\n lookOpened,\r\n lookViewType,\r\n lookActiveCategory,\r\n activeTheme,\r\n filtersOpened,\r\n isMobile,\r\n selectedFiltersLength,\r\n filtersVisible,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n setGroheFiltersOpened,\r\n setLookViewType,\r\n};\r\n\r\nexport default injectIntl(\r\n connect(mapStateToProps, mapDispatchToProps)(GroheFeaturesHeader)\r\n)\r\n","import React from \"react\";\r\nimport { connect } from \"react-redux\";\r\n\r\nimport SvgIcon from \"@mui/material/SvgIcon\";\r\n\r\nimport COLOR_THEMES, {COLORS} from \"../../../../../colorThemes\";\r\nimport {GroheFilterIcon} from \"../../../../common/icons\";\r\n\r\nconst GroheSvgFilterIcon = (props) => {\r\n\r\n const {filtersOpened, activeTheme} = props;\r\n\r\n return (\r\n \r\n \r\n )\r\n};\r\n\r\nconst mapStateToProps = (store) => {\r\n const {activeTheme} = store.serverState;\r\n const {filtersOpened} = store.groheState;\r\n return {\r\n activeTheme,\r\n filtersOpened,\r\n };\r\n};\r\n\r\nexport default connect(mapStateToProps)(GroheSvgFilterIcon)\r\n","import React from \"react\";\r\nimport {connect} from \"react-redux\";\r\nimport PropTypes from \"prop-types\";\r\nimport {injectIntl} from \"react-intl\";\r\n\r\nconst FeatureSubDescription = (props) => {\r\n\r\n const {feature, intl, fabricatorData} = props;\r\n\r\n let pros = [];\r\n let subDescription = feature.dbFeature.subDescription;\r\n if (fabricatorData.isLowes && intl.messages) {\r\n if (intl.locale === \"fr-FR\" && intl.messages[\"transDoc.subDescription_FR.\" + feature.dbFeature.sharedFeatureName]) {\r\n subDescription = intl.formatMessage({id: \"transDoc.subDescription_FR.\" + feature.dbFeature.sharedFeatureName})\r\n } else if (intl.locale === \"pl-PL\" && intl.messages[\"transDoc.customSubDescription_PL.\" + feature.dbFeature.sharedFeatureName]) {\r\n subDescription = intl.formatMessage({id: \"transDoc.customSubDescription_PL.\" + feature.dbFeature.sharedFeatureName})\r\n }\r\n }\r\n if (subDescription && subDescription.length > 0) {\r\n pros = subDescription.split('\\n').filter(n => n);\r\n }\r\n\r\n if (!pros.length) {\r\n return null\r\n }\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n )\r\n};\r\n\r\nconst mapStateToProps = (store) => {\r\n const {selectedFilters} = store.filterState;\r\n const {filtersOpened} = store.groheState;\r\n\r\n return {\r\n selectedFilters,\r\n filtersOpened,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n setGroheFiltersOpened\r\n};\r\n\r\nexport default (\r\n injectIntl(\r\n connect(mapStateToProps, mapDispatchToProps)(GroheMobileFooterFiltersButton)\r\n )\r\n);\r\n","import React from \"react\";\r\nimport {connect} from \"react-redux\";\r\nimport {injectIntl} from \"react-intl\";\r\n\r\nimport IconButton from \"@mui/material/IconButton\";\r\nimport SvgIcon from \"@mui/material/SvgIcon\";\r\nimport ListIcon from '@mui/icons-material/List';\r\n\r\nimport Analytics, {PRODUCT_JOURNEY_ANALYTIC_EVENTS} from \"../../../../analytics\";\r\nimport {setLookViewType} from \"../../../../actions/lookFunctions\";\r\nimport {GroheGridIcon} from \"../../../common/icons\";\r\nimport COLOR_THEMES from \"../../../../colorThemes\";\r\n\r\n\r\nconst GroheMobileFooterViewButton = (props) => {\r\n\r\n const {intl, lookViewType, setLookViewType, activeTheme} = props;\r\n\r\n const viewButtonClick = () => {\r\n const newViewType = lookViewType === 1 ? 2 : 1;\r\n Analytics.sendClickEvent(PRODUCT_JOURNEY_ANALYTIC_EVENTS.productFeaturesListViewType + newViewType);\r\n setLookViewType(newViewType);\r\n }\r\n\r\n return (\r\n \r\n {lookViewType === 1 ? \r\n \r\n \r\n )}\r\n \r\n )\r\n};\r\n\r\nconst mapStateToProps = (store) => {\r\n const {lookViewType} = store.lookState;\r\n const {activeTheme} = store.serverState;\r\n\r\n return {\r\n lookViewType,\r\n activeTheme,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n setLookViewType\r\n};\r\n\r\nexport default (\r\n injectIntl(\r\n connect(mapStateToProps, mapDispatchToProps)(GroheMobileFooterViewButton)\r\n )\r\n);\r\n","import React from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport PropTypes from \"prop-types\";\r\nimport {injectIntl} from \"react-intl\";\r\n\r\nimport FormControlLabel from '@mui/material/FormControlLabel';\r\nimport Switch from '@mui/material/Switch';\r\n\r\nimport {setGroheSameColorCheckboxApplied} from \"../../../../../actions/groheFunctions\";\r\nimport WithUpdateLookCartItem from \"../../../hocs/withUpdateLookCartItem\";\r\nimport Analytics from \"../../../../../analytics\";\r\n\r\n\r\nconst LookFeatureColorMatchCheckbox = (props) => {\r\n\r\n const {sameColorFeatures, currentColorFeatures, groheSameColorCheckboxApplied, setGroheSameColorCheckboxApplied,\r\n intl, groheSameColorActiveFeature, analyticsLabel, checkboxText} = props;\r\n\r\n const checkboxClick = (updateAllLookCartItems) => {\r\n // console.log(\"currentColorFeatures\", currentColorFeatures);\r\n // console.log(\"sameColorFeatures\", sameColorFeatures);\r\n Analytics.sendClickEvent(analyticsLabel + !groheSameColorCheckboxApplied);\r\n\r\n const featuresToClick = groheSameColorCheckboxApplied ? currentColorFeatures : sameColorFeatures;\r\n setGroheSameColorCheckboxApplied(!groheSameColorCheckboxApplied);\r\n updateAllLookCartItems(featuresToClick, groheSameColorActiveFeature, false, true);\r\n }\r\n\r\n return (\r\n \r\n {(updateLookCartItem, updateAllLookCartItems) => (\r\n checkboxClick(updateAllLookCartItems)}\r\n color=\"primary\"\r\n />\r\n }\r\n label={intl.formatMessage({id: checkboxText || \"grohe.sameColor.checkbox\"})}\r\n />\r\n )}\r\n \r\n )\r\n};\r\n\r\nLookFeatureColorMatchCheckbox.propTypes = {\r\n sameColorFeatures: PropTypes.array.isRequired,\r\n currentColorFeatures: PropTypes.array.isRequired,\r\n analyticsLabel: PropTypes.string,\r\n checkboxText: PropTypes.string,\r\n};\r\n\r\nconst mapStateToProps = (store) => {\r\n const {groheSameColorCheckboxApplied, groheSameColorActiveFeature} = store.groheState;\r\n const {filterGroups} = store.filterState;\r\n return {\r\n groheSameColorCheckboxApplied,\r\n groheSameColorActiveFeature,\r\n filterGroups,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n setGroheSameColorCheckboxApplied\r\n};\r\n\r\nexport default injectIntl(\r\n connect(mapStateToProps, mapDispatchToProps)(LookFeatureColorMatchCheckbox)\r\n)\r\n","import React, {useEffect, useState} from \"react\";\r\nimport {connect} from \"react-redux\";\r\n\r\nimport {getLookList, getSameColorFeatures} from \"../lookNavigation/lookFunctions\";\r\nimport {setGroheSameColorActiveFeature, setGroheSameColorCheckboxApplied} from \"../../../actions/groheFunctions\";\r\nimport {checkIfLookFeaturesReceived} from \"../../../api/look-api\";\r\nimport store from \"../../../store\";\r\nimport {updateNavigationCount} from \"../../../actions/lookFunctions\";\r\nimport {getCurrentLayout} from \"../../appLayout\";\r\nimport {useIsMounted} from \"../../../misc/helperHooks\";\r\n\r\nexport default (WrappedComponent) => {\r\n\r\n const WithFeatureColorMatch = (props) => {\r\n\r\n const {lookActiveFeature, filterGroups, setGroheSameColorCheckboxApplied, setGroheSameColorActiveFeature,\r\n wizardActiveItem, updateNavigationCount, navigationCount, currentCategory} = props;\r\n\r\n const [sameColorFeatures, setSameColorFeatures] = useState([]);\r\n const [currentColorFeatures, setCurrentColorFeatures] = useState([]);\r\n\r\n const isMounted = useIsMounted();\r\n\r\n const checkMatchingFeatures = async () => {\r\n if (wizardActiveItem) {\r\n return\r\n }\r\n const layout = getCurrentLayout();\r\n const featureGroup = lookActiveFeature ? lookActiveFeature.getParent() : layout.getFeatureGroupByPartId(currentCategory);\r\n if (featureGroup && !featureGroup.allFeaturesReceived) {\r\n return\r\n }\r\n const featureGroups = getLookList(true);\r\n if (featureGroups) {\r\n let promises = [];\r\n for (let parentObject of featureGroups) {\r\n if (parentObject.featureGroup && !parentObject.featureGroup.allFeaturesReceived && !parentObject.featureGroup.requestInProgress) {\r\n // we have to request features on th background before the colors are applied, so we can match properly\r\n promises.push(checkIfLookFeaturesReceived(parentObject.featureGroup).then(() => {\r\n const {lookActiveCategory} = store.getState().lookState;\r\n if (parentObject.featureGroup.partId === lookActiveCategory) {\r\n store.dispatch(updateNavigationCount()) // if it was launched faster - update navigation list\r\n }\r\n }));\r\n }\r\n }\r\n await Promise.all(promises);\r\n }\r\n if (lookActiveFeature) {\r\n const {sameColorFeatures, differentColorFeatures} = getSameColorFeatures(lookActiveFeature, filterGroups);\r\n setGroheSameColorCheckboxApplied(false);\r\n if (isMounted()) {\r\n setSameColorFeatures(sameColorFeatures); // same color but different feature groups\r\n setCurrentColorFeatures(differentColorFeatures); // same color but different feature groups\r\n }\r\n setGroheSameColorActiveFeature(lookActiveFeature); // same color but different feature groups\r\n }\r\n }\r\n\r\n useEffect(() => {\r\n checkMatchingFeatures();\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [lookActiveFeature, wizardActiveItem, navigationCount]);\r\n\r\n return \r\n\r\n };\r\n\r\n const mapStateToProps = (store) => {\r\n const {lookActiveFeature, lookActiveCategory, navigationCount} = store.lookState;\r\n const {filterGroups} = store.filterState;\r\n const {wizardActiveItem} = store.wizardState;\r\n return {\r\n lookActiveFeature,\r\n currentCategory: lookActiveCategory,\r\n navigationCount,\r\n filterGroups,\r\n wizardActiveItem\r\n };\r\n };\r\n\r\n const mapDispatchToProps = {\r\n setGroheSameColorCheckboxApplied,\r\n setGroheSameColorActiveFeature,\r\n updateNavigationCount,\r\n };\r\n\r\n return connect(mapStateToProps, mapDispatchToProps)(WithFeatureColorMatch)\r\n}\r\n\r\n\r\n","import React, {useEffect} from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport {Redirect, Route, Switch, useLocation} from \"react-router-dom\";\r\n\r\nimport {ROUTES} from \"../../../../routes\";\r\nimport {setLookPageOpened} from \"../../../../actions/lookFunctions\";\r\nimport GroheCartLogin from \"./groheCartLogin/groheCartLogin\";\r\nimport GroheCartSuccess from \"./groheCartPages/groheCartSuccess\";\r\nimport GroheCartTerms from \"./groheCartPages/groheCartTerms\";\r\nimport GroheCartConfirm from \"./groheCartConfirm/groheCartConfirm\";\r\nimport GroheCartTwoFA from \"./groheCartTwoFA/groheCartTwoFA\";\r\nimport GroheCartTwoFAVerify from \"./groheCartTwoFA/groheCartTwoFAVerify\";\r\nimport GroheCart from \"./groheCart\";\r\nimport GroheCartLoginRegister from \"./groheCartLogin/groheCartLoginRegister\";\r\nimport GroheCartBilling from \"./groheCartPayment/groheCartBilling\";\r\nimport GroheCartShipping from \"./groheCartPayment/groheCartShipping\";\r\nimport GroheCartPayment from \"./groheCartPayment/groheCartPayment\";\r\nimport {getCartItemsCount} from \"../groheNavigation/groheFunctions\";\r\nimport GroheCartBillingInfo from \"./groheCartPayment/groheCartBillingInfo\";\r\nimport GroheCartDelivery from \"./groheCartDelivery/groheCartDelivery\";\r\n\r\nconst GroheCartRoutes = (props) => {\r\n\r\n const {lookPageOpened, setLookPageOpened, fabricatorData, isPhoneNumberValidated, cartItems, instList, shopPageOpened} = props;\r\n const fabricatorSettings = fabricatorData.settings;\r\n\r\n let location = useLocation();\r\n\r\n const sectionOpened = lookPageOpened.includes(ROUTES.cart)\r\n || (!shopPageOpened && !lookPageOpened && location.pathname && location.pathname.includes(ROUTES.cart));\r\n\r\n useEffect(() => {\r\n if (!lookPageOpened && location.pathname && location.pathname.includes(ROUTES.cart)) { // on cart first open after page load\r\n setLookPageOpened(ROUTES.cart);\r\n } else if (sectionOpened && (location.pathname && !location.pathname.includes(ROUTES.cart))) { // arrow back in browser\r\n setLookPageOpened(\"\");\r\n }\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [location.pathname]);\r\n\r\n const cartItemsLength = getCartItemsCount(cartItems);\r\n const notPassedLeadCaptureProcess = fabricatorSettings.leadCaptureShoppingCart && !isPhoneNumberValidated && !!(cartItemsLength || instList.length);\r\n\r\n const checkRedirect = () => {\r\n if (!fabricatorSettings.checkout) {\r\n return \r\n \r\n \r\n {checkRedirect() || \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {checkRedirect() || \r\n \r\n {checkRedirect() || \r\n \r\n {checkRedirect() || \r\n \r\n {checkRedirect() || \r\n \r\n {checkRedirect() || \r\n \r\n {checkRedirect() || \r\n \r\n {checkRedirect() || \r\n \r\n \r\n )\r\n};\r\n\r\nconst mapStateToProps = (store) => {\r\n const {lookOpened, lookPageOpened} = store.lookState;\r\n const {userIsLoggedIn, isPhoneNumberValidated} = store.userState;\r\n const {cartItems} = store.cartState;\r\n const {instList} = store.instState;\r\n const {shopPageOpened} = store.shopState;\r\n\r\n return {\r\n lookOpened,\r\n lookPageOpened,\r\n fabricatorData: store.fabricatorState,\r\n userIsLoggedIn,\r\n isPhoneNumberValidated,\r\n cartItems,\r\n instList,\r\n shopPageOpened,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n setLookPageOpened,\r\n};\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(GroheCartRoutes)\r\n","import React, {Fragment} from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport {FormattedMessage} from \"react-intl\";\r\nimport {withRouter} from \"react-router-dom\";\r\n\r\nimport FormGroup from '@mui/material/FormGroup';\r\nimport Button from \"@mui/material/Button\";\r\n\r\nimport GroheCartLoginRegisterInputs from \"./groheCartLoginRegisterInputs\";\r\nimport {ROUTES} from \"../../../../../routes\";\r\nimport GroheCartLoginRegisterCheckbox from \"./groheCartLoginRegisterCheckbox\";\r\nimport GroheCartHeaderCommon from \"../groheCartHeaderCommon\";\r\nimport GroheCartStickyFooter from \"../groheCartStickyFooter\";\r\nimport WithInputValidations from \"../../../hocs/withInputValidations\";\r\nimport {PRODUCT_JOURNEY_ANALYTIC_EVENTS} from \"../../../../../analytics\";\r\nimport {registerButtonCommonClick, saveQuoteAfterSignIn} from \"../../../../../misc/userFunctions\";\r\n\r\nconst GroheCartLoginRegister = (props) => {\r\n\r\n const {isMobile, history, userInfo, fabricatorSettings} = props;\r\n\r\n const executeAfterRegister = async () => {\r\n await saveQuoteAfterSignIn();\r\n if (fabricatorSettings.twoFA) {\r\n history.push(ROUTES.cartTwoFA);\r\n } else if (fabricatorSettings.hasPaymentGateway) {\r\n history.push(ROUTES.cartBilling);\r\n } else {\r\n history.push(ROUTES.cartConfirm);\r\n }\r\n };\r\n\r\n const registerButtonClick = async (updateInputValidations) => {\r\n const registered = await registerButtonCommonClick(updateInputValidations, PRODUCT_JOURNEY_ANALYTIC_EVENTS.cartCheckoutRegister, executeAfterRegister);\r\n if (!registered) {\r\n return false\r\n }\r\n await executeAfterRegister();\r\n }\r\n\r\n const registerForm = (inputsValidated, updateInputValidations) => (\r\n \r\n {isMobile ? null : (\r\n \r\n \r\n
\r\n \r\n )}\r\n \r\n \r\n )\r\n\r\n if (isMobile) {\r\n return (\r\n \r\n {(inputsValidated, updateInputValidations) => {\r\n\r\n const stickyFooterButtons = [\r\n {\r\n translate: \"buttons.back\",\r\n classes: \"look-button--secondary\",\r\n onClick: () => {\r\n history.push(ROUTES.cart);\r\n }\r\n },\r\n {\r\n translate: \"grohe.cart.register.mobile.alreadyRegisteredButton\",\r\n classes: \"look-button--secondary gc-sticky__button--40\",\r\n onClick: () => {\r\n history.push(ROUTES.cartLogin);\r\n }\r\n },\r\n {\r\n translate: \"grohe.cart.login.register.button\",\r\n classes: \"look-button--blue gc-sticky__button--40\",\r\n onClick: () => registerButtonClick(updateInputValidations),\r\n disabled: !userInfo.agreedToTerms\r\n }\r\n ];\r\n\r\n return (\r\n
\r\n \r\n // {/**/}\r\n // {content}\r\n // \r\n // ) : \r\n {content}\r\n \r\n )\r\n\r\n};\r\n\r\nMaterialsWizardFooterSteps.propTypes = {\r\n isShoppingCart: PropTypes.bool,\r\n wizardItem: PropTypes.shape(wizardItemInterface).isRequired,\r\n wizardValues: PropTypes.object,\r\n wizardStep: PropTypes.number,\r\n}\r\n\r\nconst mapStateToProps = (store, ownProps) => {\r\n const {wizardSelectedValues, wizardActiveStep} = store.wizardState;\r\n const {windowWidth, isMobile} = store.serverState;\r\n const {wizardValues} = ownProps;\r\n const {showAdvancedQuoting} = store.advancedQuotingState;\r\n\r\n return {\r\n wizardSelectedValues: wizardValues || wizardSelectedValues,\r\n wizardActiveStep,\r\n // wizardActiveStep: Number.isInteger(wizardStep) ? wizardStep : wizardActiveStep,\r\n windowWidth,\r\n isMobile,\r\n showAdvancedQuoting,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n\r\n};\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(MaterialsWizardFooterSteps)\r\n","import React from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport $ from \"jquery\";\r\n\r\nimport {togglePulseFeatureInfoQuantity} from \"../../../actions/actionFunctions\";\r\nimport {toggleProductNoteEditorVisible} from \"../../../actions/selectionFunctions\";\r\nimport {getCartItemObject} from \"../../../misc/helpers\";\r\n\r\n\r\nexport default (WrappedComponent) => {\r\n\r\n const WithMaterialsWizardFooterCommon = (props) => {\r\n\r\n const {selectionInfoQuantity, selectionFeatureInfo, togglePulseFeatureInfoQuantity, toggleProductNoteEditorVisible,\r\n relatedGroups, qtActiveCategory, selectionGroup} = props;\r\n\r\n const quantityIsZero = () => {\r\n if (!selectionInfoQuantity && selectionFeatureInfo && !selectionFeatureInfo.dbFeature.hideQuantity) {\r\n togglePulseFeatureInfoQuantity(true);\r\n toggleProductNoteEditorVisible(false); // exit add note mode\r\n const $scrollableInfoArea = $(\".selection-main__info-scrollable\");\r\n if ($scrollableInfoArea) {\r\n $scrollableInfoArea.animate({scrollTop: 0}, 500);\r\n }\r\n return true;\r\n }\r\n return false\r\n }\r\n\r\n const getCartFeatureParentName = (activeFeature) => {\r\n let parentName = selectionGroup;\r\n if (activeFeature.getParent) {\r\n const subPart = activeFeature.getParent();\r\n parentName = subPart.getParent ? subPart.getParent().partName : subPart.partName\r\n }\r\n return parentName\r\n }\r\n\r\n const getCurrentRelatedCartItems = (activeFeature, arrayToAddtoTheCart = []) => {\r\n if (Array.isArray(relatedGroups) && relatedGroups.length) {\r\n relatedGroups.forEach(relatedGroup => {\r\n relatedGroup.relatedFeatures.forEach(relatedFeature => {\r\n if (relatedFeature.cartQuantity) {\r\n const relatedItemCartObject = getCartItemObject(relatedFeature, relatedFeature.cartQuantity, qtActiveCategory);\r\n relatedItemCartObject.relatedProductParent = activeFeature;\r\n arrayToAddtoTheCart.push(relatedItemCartObject)\r\n }\r\n });\r\n });\r\n }\r\n return arrayToAddtoTheCart\r\n }\r\n\r\n return \r\n\r\n };\r\n\r\n const mapStateToProps = (store) => {\r\n const {selectionFeatureInfo, selectionInfoQuantity, relatedGroups, selectionGroup} = store.selectionState;\r\n const {qtActiveCategory} = store.qtState;\r\n\r\n return {\r\n selectionFeatureInfo,\r\n selectionInfoQuantity,\r\n relatedGroups,\r\n qtActiveCategory,\r\n selectionGroup,\r\n };\r\n };\r\n\r\n const mapDispatchToProps = {\r\n togglePulseFeatureInfoQuantity,\r\n toggleProductNoteEditorVisible,\r\n };\r\n\r\n return connect(mapStateToProps, mapDispatchToProps)(WithMaterialsWizardFooterCommon)\r\n}\r\n","import React, {Fragment} from 'react';\r\nimport {connect} from \"react-redux\";\r\nimport {hashHistory} from \"react-router\";\r\nimport size from 'lodash/size';\r\nimport flatMap from 'lodash/flatMap';\r\nimport filter from 'lodash/filter';\r\nimport {FormattedMessage, injectIntl} from \"react-intl\";\r\n\r\nimport {\r\n removeFromCart,\r\n toggleSelectionWindow,\r\n changeStateToQuote,\r\n setQtActiveCategory,\r\n changeActivePartRelatedItemIndex\r\n} from \"../../actions/actionFunctions\";\r\nimport {\r\n getCurrencySign,\r\n getFeatureGroupName, getPriceWithCurrency,\r\n getRoomName,\r\n getTotalPrice,\r\n toFixedPrice\r\n} from \"../../misc/helpers\";\r\nimport Analytics from './../../analytics';\r\nimport CommonFeatureItemsMethods from \"../visComponents/commonFeatureItemsMethods\";\r\nimport ChangeRoomButton from \"./changeRoomButton\";\r\nimport ShoppingCartItemsListItem from \"./shoppingCartItemsListItem\";\r\nimport {getCurrentLayout} from \"../appLayout\";\r\nimport {changeQTRoutePath, changeRoutePath} from \"../../misc/changeRoutePath\";\r\nimport ShoppingCartDiscountsList from \"./shoppingCartDiscountsList\";\r\nimport ShoppingCartItemsListInstallationItem from \"./shoppingCartItemsListInstallationItem\";\r\nimport AdvancedQuotingList from \"./advancedQuoting/advancedQuotingList\";\r\nimport {setActiveQuoteIndex} from \"../../actions/roomsFunctions\";\r\nimport SimilarProducts from \"./similarProducts/similarProducts\";\r\nimport {SQFT_FEATURES} from \"../sqft/constants\";\r\nimport {showWizardInsteadOfQT} from \"../look/lookNavigation/lookMain/lookWizard/lookWizardFunctions\";\r\nimport {WIZARD_GROUP_TYPES} from \"../../interfaces/wizardItemInterface\";\r\nimport ShoppingCartItemsListWizardCustomItem from \"./shoppingCartItemsListWizardCustomItem\";\r\nimport {setNewActiveQuote} from \"../../misc/quotesFunctions\";\r\nimport LoadingSpinner from \"../ui/loadingSpinner\";\r\nimport {getDifferentCurrencyCartItems} from \"../../misc/misc2\";\r\nimport {switchToNewVisualizerType} from \"../../misc/visualizerSwitchingFunctions\";\r\nimport goToMaterialPage from \"../common/goToMaterialPage\";\r\nimport {getWizardGroupName} from \"../look/lookNavigation/lookMain/lookWizard/lookWizardFunctions2\";\r\nimport TextInput from \"../ui/textInput\";\r\n\r\nclass ShoppingCartItemsList extends CommonFeatureItemsMethods {\r\n\r\n constructor(props) {\r\n super(props);\r\n this.state = {}\r\n }\r\n\r\n componentDidMount() {\r\n this.props.changeStateToQuote();\r\n }\r\n\r\n shouldComponentUpdate(nextProps) {\r\n return !nextProps.showAssignQuotePopup;\r\n }\r\n\r\n switchToMaterialsPageGroup = async (listItem, quoteIndex, cartItem = null) => {\r\n const {selectionGroup, featureGroupName, featureGroup} = listItem;\r\n Analytics.sendClickEvent(cartItem ? \"shopping-cart-edit-feature\" : \"shopping-cart-items-go-to-materials\");\r\n const {activeQuoteIndex, setActiveQuoteIndex} = this.props;\r\n if (cartItem && (cartItem.fromVisualizerType !== document.kvConfig.visualizerType)) {\r\n await switchToNewVisualizerType(cartItem.fromVisualizerType);\r\n // this.props.setActionAfterVisualizerTypeIsChanged();\r\n }\r\n if (quoteIndex !== activeQuoteIndex) {\r\n await setNewActiveQuote(quoteIndex);\r\n await setActiveQuoteIndex(quoteIndex);\r\n }\r\n if (featureGroup) {\r\n // const switchToProduct = cartItem.relatedProductParent || cartItem.cartFeature;\r\n let wizardAllObject = null;\r\n let stepIndex = 0;\r\n if (cartItem && cartItem.fromWizardId) {\r\n wizardAllObject = {wizardItemId: cartItem.fromWizardId, quoteIndex};\r\n stepIndex = cartItem.fromWizardStep;\r\n }\r\n goToMaterialPage(\"shoppingcart\", false, {part: featureGroup}, \"\", wizardAllObject, stepIndex);\r\n return\r\n }\r\n const layout = getCurrentLayout();\r\n if (layout.qtCategories) {\r\n let subPartIndex = 0;\r\n const neededQtCat = layout.qtCategories.find(qtCat => {\r\n const sIndex = qtCat.defaultSubParts.findIndex(sPart => {\r\n return (sPart.part.customGroupDisplayName || sPart.text) === featureGroupName\r\n })\r\n if (sIndex > -1) {\r\n subPartIndex = sIndex\r\n return true\r\n }\r\n return false\r\n }) || layout.qtCategories[0];\r\n this.props.setQtActiveCategory(neededQtCat.name);\r\n this.props.changeActivePartRelatedItemIndex(subPartIndex);\r\n changeQTRoutePath(neededQtCat.name, subPartIndex);\r\n } else {\r\n this.props.toggleSelectionWindow(true, selectionGroup);\r\n const parentGroup = layout.parts[selectionGroup];\r\n if (parentGroup) {\r\n const subPartIndex = parentGroup.subParts().findIndex(sPart => {\r\n return (sPart.part.customGroupDisplayName || sPart.text) === featureGroupName\r\n })\r\n changeRoutePath(parentGroup, subPartIndex > -1 ? subPartIndex : 0)\r\n } else {\r\n hashHistory.push('materials');\r\n }\r\n }\r\n };\r\n\r\n setFeatureGroupCustomName = (featureGroup, quoteIndex = 0, value) => {\r\n if (!featureGroup.customNames) {\r\n featureGroup.customNames = {}\r\n }\r\n featureGroup.customNames[quoteIndex] = value;\r\n this.forceUpdate();\r\n }\r\n\r\n createCommonParentsList = () => {\r\n const {quotes, cartItems, activeQuoteIndex, showAllQuotesCartItemsList, intl, fabricatorData, wizardList,\r\n wizardIsActive, allWizardsValues} = this.props;\r\n const isWizard = showWizardInsteadOfQT(wizardList, wizardIsActive);\r\n let quotesList = {}; // {quoteIndex: ArrayOf({parentName: \"\", cartItem})}\r\n quotes.forEach((quote, quoteIndex) => {\r\n\r\n const layout = getCurrentLayout(fabricatorData.settings.allowVisualizerSwitching && quote.room ? quote.room : document.kvConfig.visualizerType);\r\n\r\n const cartList = []; //ArrayOf({parentName: \"\", cartItem})\r\n const quoteCartItems = cartItems.filter((cartItem) => cartItem.cartFeature && (cartItem.currentQuote === quoteIndex));\r\n if (showAllQuotesCartItemsList || quoteIndex === activeQuoteIndex) {\r\n let uniqueCartItemIds = [];\r\n\r\n const addToCartList = (cartItem, wizardGroup, wizardItemId) => {\r\n //todo get slab parentGroup and remove displayFakeFeatureGroupName\r\n const parentGroup = cartItem.cartFeature.getParent\r\n ? cartItem.cartFeature.getParent()\r\n : layout.getFeatureGroupByPartId(cartItem.cartFeature.partId);\r\n let featureGroupName;\r\n let featureGroupDisplayName;\r\n\r\n if (cartItem.displayFakeFeatureGroupName) {\r\n featureGroupName = cartItem.displayFakeFeatureGroupName;\r\n featureGroupDisplayName = intl.formatMessage({id: \"sqftFeaturesPopup.title.\" + cartItem.displayFakeFeatureGroupName});\r\n } else {\r\n featureGroupName = parentGroup ? parentGroup.customGroupDisplayName || parentGroup.partName : cartItem.selectionGroup;\r\n if (wizardGroup) {\r\n featureGroupDisplayName = getWizardGroupName(wizardGroup);\r\n }\r\n if (!featureGroupDisplayName || !wizardGroup) {\r\n featureGroupDisplayName = parentGroup ? getFeatureGroupName(parentGroup, intl, fabricatorData) : cartItem.selectionGroup;\r\n }\r\n }\r\n\r\n const parent = cartList.find(listItem => {\r\n if (isWizard && cartItem.fromWizardGroupId) {\r\n return listItem.wizardGroupId === cartItem.fromWizardGroupId && (listItem.wizardItemId === cartItem.fromWizardId)\r\n }\r\n return listItem.featureGroupName === featureGroupName\r\n });\r\n if (parent) {\r\n parent.cartItems.push(cartItem);\r\n } else {\r\n cartList.push({\r\n featureGroupName,\r\n featureGroupDisplayName,\r\n selectionGroup: cartItem.selectionGroup,\r\n cartItems: [cartItem],\r\n featureGroup: parentGroup,\r\n wizardGroupId: wizardGroup ? wizardGroup.id : null,\r\n wizardItemId,\r\n });\r\n }\r\n };\r\n\r\n if (isWizard) {\r\n wizardList.forEach(wizardItem => {\r\n const existingAllObject = allWizardsValues.find(wizSelObject => {\r\n return wizSelObject.wizardItemId === wizardItem.id && wizSelObject.quoteIndex === quoteIndex\r\n });\r\n if (existingAllObject && existingAllObject.wizardSelectedValues) {\r\n Object.keys(existingAllObject.wizardSelectedValues).forEach(key => {\r\n const wizardGroup = existingAllObject.wizardSelectedValues[key].wizardGroup\r\n if (wizardGroup && wizardGroup.nodeType === WIZARD_GROUP_TYPES.custom && !wizardGroup.hideInCartAndReceipt) {\r\n cartList.push({\r\n type: WIZARD_GROUP_TYPES.custom,\r\n wizardSelectedValue: existingAllObject.wizardSelectedValues[key],\r\n wizardAllObject: existingAllObject,\r\n stepIndex: key,\r\n wizardGroup,\r\n });\r\n return\r\n }\r\n let currentCartItems = cartItems.filter(cartItem => {\r\n if (cartItem.bundleParentId) {\r\n return false\r\n }\r\n return cartItem.cartFeature && (cartItem.currentQuote === quoteIndex)\r\n && (wizardGroup && cartItem.fromWizardGroupId\r\n ? (wizardGroup.id === cartItem.fromWizardGroupId)\r\n : +key === cartItem.fromWizardStep)\r\n && !uniqueCartItemIds.includes(cartItem.id)\r\n });\r\n if (currentCartItems.length) {\r\n uniqueCartItemIds = [...uniqueCartItemIds, ...currentCartItems.map(cItem => cItem.id)];\r\n currentCartItems.forEach((cartItem) => addToCartList(cartItem, wizardGroup, wizardItem.id))\r\n // } else if (wizardGroup && !wizardGroup.hideInCartAndReceipt) {\r\n // cartList.push({\r\n // type: WIZARD_GROUP_TYPES.custom,\r\n // wizardSelectedValue: existingAllObject.wizardSelectedValues[key],\r\n // wizardAllObject: existingAllObject,\r\n // stepIndex: key,\r\n // wizardGroup,\r\n // });\r\n }\r\n })\r\n }\r\n });\r\n quoteCartItems.forEach((cartItem) => {\r\n if (!uniqueCartItemIds.includes(cartItem.id) && !cartItem.bundleParentId) {\r\n uniqueCartItemIds.push(cartItem.id);\r\n addToCartList(cartItem)\r\n }\r\n });\r\n } else if (layout.qtCategories) {\r\n layout.qtCategories.forEach(qtCategory => {\r\n qtCategory.subParts.forEach((subPart) => {\r\n let currentCartItems = cartItems.filter(cartItem => {\r\n if (cartItem.bundleParentId) {\r\n return false\r\n }\r\n return cartItem.cartFeature && (cartItem.currentQuote === quoteIndex)\r\n && (subPart.part.partId === cartItem.partId || (cartItem.relatedProductParent && subPart.part.partId === cartItem.relatedProductParent.partId))\r\n && !uniqueCartItemIds.includes(cartItem.id)\r\n });\r\n if (currentCartItems.length) {\r\n uniqueCartItemIds = [...uniqueCartItemIds, ...currentCartItems.map(cItem => cItem.id)];\r\n currentCartItems.forEach((cartItem) => addToCartList(cartItem))\r\n }\r\n })\r\n });\r\n quoteCartItems.forEach((cartItem) => {\r\n if (!uniqueCartItemIds.includes(cartItem.id) && !cartItem.bundleParentId) {\r\n uniqueCartItemIds.push(cartItem.id);\r\n addToCartList(cartItem)\r\n }\r\n })\r\n } else {\r\n quoteCartItems.forEach((cartItem) => addToCartList(cartItem))\r\n }\r\n cartList.push({\r\n type: \"similar\",\r\n quoteIndex\r\n });\r\n if (showAllQuotesCartItemsList) {\r\n cartList.push({\r\n type: \"subTotal\",\r\n quoteIndex\r\n });\r\n }\r\n }\r\n quotesList[quoteIndex] = cartList\r\n });\r\n // console.log(\"quotesList\", quotesList);\r\n return quotesList\r\n };\r\n\r\n getCartItemsList = (isMobile, fabricatorData, fabricatorSettings) => {\r\n const {cartItems, showAllQuotesCartItemsList, isPhoneNumberValidated, quotes, intl} = this.props;\r\n if (!cartItems.length) {\r\n // if (!cartItems.length || (Object.keys(quotesList).every(quoteIndex => !quotesList[quoteIndex].length))) {\r\n return (\r\n \r\n
\r\n )\r\n }\r\n const quotesList = this.createCommonParentsList();\r\n const quotesListArray = Object.keys(quotesList);\r\n\r\n const {isBackend, jobId, canSaveQuote} = document.kvConfig;\r\n const pricingIsLocked = (fabricatorSettings.leadCaptureOnQuote || fabricatorSettings.leadCaptureShoppingCart)\r\n && !(isBackend && jobId && canSaveQuote) && !isPhoneNumberValidated;\r\n\r\n return quotesListArray.map(quoteIndex => {\r\n return (\r\n \r\n {showTaxes || ((allTaxes.length === 1) && fabricatorSettings.sureTax) ? allTaxes.map((taxObject, taxObjectIndex) => {\r\n const taxTotal = taxObject.materialTax.toFixed(2); // always round to 23.65, even if it is 23.00\r\n return (\r\n \r\n )\r\n }\r\n return null\r\n };\r\n\r\n render() {\r\n\r\n const isMobile = this.props.windowWidth < 991;\r\n const totalPrice = getTotalPrice();\r\n const {fabricatorData, installations, showAdvancedQuoting, sureTaxLoading, cartItems} = this.props;\r\n const fabricatorSettings = fabricatorData.settings;\r\n\r\n // console.log(\"this.props.cartItems\", this.props.cartItems);\r\n\r\n return (\r\n \r\n }\r\n\r\n const hasBundleProducts = cartItems.some(cItem => cItem.bundleParentId === cartItem.id);\r\n\r\n return (\r\n \r\n \r\n ) : null}\r\n {hasBundleProducts ? : null}\r\n \r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = (store) => {\r\n const {allWizardsValues, wizardList} = store.wizardState;\r\n return {\r\n cartItems: store.cartState.cartItems,\r\n isPhoneNumberValidated: store.userState.isPhoneNumberValidated,\r\n windowWidth: store.serverState.windowWidth,\r\n fabricatorData: store.fabricatorState,\r\n showUnlockCalculations: store.unlockCalculationsState.showUnlockCalculations,\r\n showCartItems: store.unlockCalculationsState.showCartItems,\r\n activeQuoteIndex: store.quotesState.activeQuoteIndex,\r\n wizardList,\r\n allWizardsValues,\r\n showAssignQuotePopup: store.assignQuoteState.showAssignQuotePopup,\r\n isSlabPricingEnabled: store.sqftSlabState.isSlabPricingEnabled,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n removeFromCart,\r\n changeMessageBoxState,\r\n toggleUserPopup,\r\n setQtActiveCategory,\r\n /*** CommonFeatureItemsMethods needs next methods: ***/\r\n changeActivePartRelatedItemIndex,\r\n toggleSelectionWindow,\r\n toggleSelectionFeatureInfo,\r\n toggleBathroomVisualizerOpen,\r\n setCameFromPage,\r\n /*** CommonFeatureItemsMethods needs methods end ***/\r\n setActiveQuoteIndex,\r\n setCartItemEditFeature\r\n}\r\n\r\nexport default injectIntl(\r\n connect(mapStateToProps, mapDispatchToProps)(ShoppingCartItemsListItem)\r\n)\r\n","import React, {useEffect, useState} from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport PropTypes from \"prop-types\";\r\nimport {FormattedMessage, injectIntl} from \"react-intl\";\r\nimport {changeCartFeature} from \"../../actions/actionFunctions\";\r\n\r\nconst NoteEditor = (props) => {\r\n\r\n let {intl, cartItem, closeEditor, editorVisible, cartItemId, dbFeatureId, quoteIndex, changeCartFeature} = props;\r\n const [noteText, setNoteText] = useState(\"\");\r\n\r\n useEffect(() => {\r\n setNoteText(cartItem.noteText || \"\");\r\n }, [cartItemId, dbFeatureId, quoteIndex]); // eslint-disable-line react-hooks/exhaustive-deps\r\n\r\n const onNoteChange = (e) => {\r\n setNoteText(e.target.value);\r\n if (!editorVisible) {\r\n onNoteSaveClick(); // set parent's editor visible\r\n }\r\n };\r\n\r\n const onNoteFocus = () => {\r\n if (noteText && !editorVisible) {\r\n onNoteSaveClick(); // set parent's editor visible\r\n }\r\n };\r\n\r\n const onBlur = () => {\r\n changeCartFeature(Object.assign({}, cartItem, {\r\n noteText\r\n }), true);\r\n };\r\n\r\n const onNoteSaveClick = () => {\r\n changeCartFeature(Object.assign({}, cartItem, {\r\n noteText\r\n }), true);\r\n closeEditor();\r\n };\r\n\r\n return (\r\n \r\n \r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = (store) => {\r\n const {discountSections, customAddedDiscounts} = store.priceWorksheetState;\r\n return {\r\n discountSections,\r\n customAddedDiscounts,\r\n fabricatorSettings: store.fabricatorState.settings,\r\n cartItems: store.cartState.cartItems,\r\n instList: store.instState.instList,\r\n fabricatorTaxes: store.userState.fabricatorTaxes,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n setDiscountSections\r\n};\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(DiscountSubTotal);\r\n","import React, {Fragment, useEffect, useState} from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport {FormattedMessage, injectIntl} from \"react-intl\";\r\nimport PropTypes from \"prop-types\";\r\nimport uuid from \"uuid\";\r\n\r\nimport AdvancedQuotingListItem from \"./advancedQuotingListItem\";\r\nimport {getFeatureGroupName} from \"../../../misc/helpers\";\r\nimport {wizardAllObjectInterface, wizardGroupInterface} from \"../../../interfaces/wizardItemInterface\";\r\nimport {getWizardGroupName} from \"../../look/lookNavigation/lookMain/lookWizard/lookWizardFunctions2\";\r\n\r\nconst AdvancedQuotingSubpartItems = (props) => {\r\n\r\n const {advancedCartItems, subPart, advancedCartItemsLength, allIds, allSqftIds, quoteIndex, intl, fabricatorData,\r\n qtCategoryName, stepIndex, wizardGroup, wizardAllObject, stepDisabled} = props;\r\n const [cartItems, setCartItems] = useState([]);\r\n\r\n useEffect(() => {\r\n setCartItems([...advancedCartItems])\r\n if (!advancedCartItems.length) {\r\n addEmptyCartItem(false)\r\n }\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [advancedCartItemsLength, allIds, allSqftIds]);\r\n\r\n const addEmptyCartItem = (keepPrevious) => {\r\n const currentCartItemsList = keepPrevious ? cartItems : [];\r\n setCartItems([...currentCartItemsList, {\r\n id: uuid.v4(),\r\n isEmpty: true,\r\n quantity: 0,\r\n partId: subPart.part.partId,\r\n }])\r\n };\r\n\r\n const deleteEmptyCartItem = (cartItem) => {\r\n const index = cartItems.findIndex(cItem => cItem.id === cartItem.id);\r\n if (index > -1) {\r\n cartItems.splice(index, 1);\r\n }\r\n setCartItems([...cartItems])\r\n };\r\n\r\n const isAddProductButtonVisible = [\"room\", \"other_related_products\", \"slabs\"].includes(subPart.part.partId)\r\n || stepDisabled;\r\n\r\n return (\r\n \r\n \r\n )\r\n};\r\n\r\nAdvancedQuotingSubpartItems.propTypes = {\r\n subPart: PropTypes.object.isRequired,\r\n advancedCartItems: PropTypes.array.isRequired,\r\n quoteIndex: PropTypes.number.isRequired,\r\n qtCategoryName: PropTypes.string,\r\n //wizard\r\n wizardAllObject: PropTypes.shape(wizardAllObjectInterface),\r\n wizardGroup: PropTypes.shape(wizardGroupInterface),\r\n stepIndex: PropTypes.number,\r\n stepDisabled: PropTypes.bool,\r\n};\r\n\r\nconst mapStateToProps = (store, ownProps) => {\r\n return {\r\n advancedCartItemsLength: ownProps.advancedCartItems.length,\r\n allIds: ownProps.advancedCartItems.map((cartItem) => cartItem.id).join(),\r\n allSqftIds: ownProps.advancedCartItems.map((cartItem) => cartItem.sqftId).join(),\r\n fabricatorData: store.fabricatorState\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n\r\n};\r\n\r\nexport default injectIntl(\r\n connect(mapStateToProps, mapDispatchToProps)(AdvancedQuotingSubpartItems)\r\n);\r\n","import React, {useCallback, useState} from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport PropTypes from \"prop-types\";\r\nimport {FormattedMessage, injectIntl} from \"react-intl\";\r\n\r\nimport SimilarProductsList from \"./similarProductsList\";\r\nimport {getFeaturesCollectionsList} from \"./similarProductsFunctions\";\r\n\r\nconst SimilarProducts = (props) => {\r\n\r\n const {filterGroups, cartItems, quoteIndex} = props;\r\n const [similarOpened, setSimilarOpened] = useState(true);\r\n const [, updateState] = useState();\r\n const forceUpdate = useCallback(() => updateState({}), []);\r\n\r\n const addedCountertops = cartItems.filter(cItem => cItem.currentQuote === quoteIndex && cItem.partId.includes(\"countertop\"));\r\n const cartItem = addedCountertops[0];\r\n\r\n const featuresCollectionsList = getFeaturesCollectionsList(cartItem, filterGroups);\r\n if (!featuresCollectionsList || !featuresCollectionsList.length) {\r\n return null\r\n }\r\n\r\n const styles = {};\r\n if (similarOpened) {\r\n // styles.height = featuresCollectionsList.length > 3 ? 300 : (featuresCollectionsList.length * 75) + 30 // each item + title\r\n styles.height = (featuresCollectionsList.length * 55) + 45 // each item + title\r\n }\r\n\r\n return (\r\n \r\n }\r\n const layout = getCurrentLayout();\r\n if (!layout.initialized) {\r\n return null\r\n }\r\n if (showWizardInsteadOfQT(wizardList, wizardIsActive)) {\r\n return \r\n }\r\n\r\n render() {\r\n const {fabricatorData, networkConnection, showRecentlyViewedItems, editToken} = this.props;\r\n const fabricatorSettings = fabricatorData.settings;\r\n // const showPriceWorksheet = fabricatorSettings.priceWorksheetEnabled; //TODO[Artem] change after BE done\r\n const showPriceWorksheet = this.props.discountsReceived && this.props.discountSections.length\r\n && (document.kvConfig.isBackend || document.kvConfig.jobId);\r\n\r\n const finalButton = this.getFinalButton();\r\n const finalButtonElement = (\r\n \r\n );\r\n const saveButtonElement = (\r\n \r\n );\r\n\r\n return (\r\n \r\n {sureTaxLoading ? (\r\n \r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = (store) => {\r\n const {showAllQuotesCartItemsList, cartItems, sureTax, sureTaxLoading} = store.cartState;\r\n const {jobId} = store.serverState;\r\n return {\r\n isPhoneNumberValidated: store.userState.isPhoneNumberValidated,\r\n fabricatorSettings: store.fabricatorState.settings,\r\n showTotalItems: store.unlockCalculationsState.showTotalItems,\r\n showUnlockCalculations: store.unlockCalculationsState.showUnlockCalculations,\r\n cartItems,\r\n showAllQuotesCartItemsList,\r\n instList: store.instState.instList,\r\n fabricatorTaxes: store.fabricatorState.fabricatorTaxes,\r\n discountSections: store.priceWorksheetState.discountSections,\r\n fabricatorData: store.fabricatorState,\r\n quotes: store.quotesState.quotes,\r\n activeQuoteIndex: store.quotesState.activeQuoteIndex,\r\n language: store.serverState.language,\r\n showAssignQuotePopup: store.assignQuoteState.showAssignQuotePopup,\r\n sureTax, // update component after api call\r\n sureTaxLoading, // update component after api call\r\n jobId,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n toggleUserPopup,\r\n};\r\n\r\nexport default injectIntl(\r\n connect(mapStateToProps, mapDispatchToProps)(ShoppingCartTotalColumns)\r\n)\r\n","import React, { Component } from 'react';\r\nimport { connect } from \"react-redux\";\r\nimport {hashHistory} from \"react-router\";\r\nimport $ from \"jquery\";\r\n\r\nimport {toggleBathroomVisualizerOpen, toggleUserPopup} from \"../../actions/actionFunctions\";\r\nimport UserLoginButton from \"../ui/userLoginButton\";\r\nimport {getCurrentCanvas, getCurrentLayout} from \"../appLayout\";\r\nimport HomeButton from \"../ui/homeButton\";\r\nimport MobileMenu from \"../ui/mobileMenu\";\r\n// import CoBrowsingButton from \"../ui/coBrowsingButton\";\r\nimport ActionTypes from \"../../misc/actionTypes\"\r\nimport PingPilotButton from \"../visComponents/pingPilotButton\";\r\n\r\nclass ShoppingCartCanvas extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n layers: []\r\n }\r\n }\r\n\r\n componentDidMount() {\r\n this.setStateLayers();\r\n $(window).on(ActionTypes.UPDATE_ALL_ITEMS, this.setStateLayers);\r\n }\r\n\r\n componentWillUnmount() {\r\n $(window).off(ActionTypes.UPDATE_ALL_ITEMS);\r\n }\r\n\r\n componentWillReceiveProps(nextProps) {\r\n const hasDifference = (nextProps.cartItems.length !== this.props.cartItems.length) || nextProps.cartItems.some((cartItem, index) => {\r\n return cartItem.cartFeature.dbFeature.id !== this.props.cartItems[index].cartFeature.dbFeature.id\r\n });\r\n if (hasDifference) {\r\n this.setStateLayers();\r\n }\r\n }\r\n\r\n setStateLayers = () => {\r\n const showPlaceHolders = document.bvConfig ? document.bvConfig.showPlaceholders : false;\r\n const layout = getCurrentLayout();\r\n this.setState({\r\n layers: layout.getLayers(showPlaceHolders)\r\n });\r\n }\r\n\r\n openVisualizer = () => {\r\n const fabricatorSettings = this.props.fabricatorData.settings;\r\n if (fabricatorSettings.leadCaptureShoppingCart && !UserLoginButton.handleLoginClick({...this.props})) {\r\n return false;\r\n }\r\n this.props.toggleBathroomVisualizerOpen(true);\r\n hashHistory.push('visualizer');\r\n };\r\n\r\n render() {\r\n // console.log('this.props.cartItems', this.props.cartItems);\r\n const {materialsCanvasClass} = this.props;\r\n const layout = getCurrentLayout();\r\n const ImageCanvas = getCurrentCanvas();\r\n return (\r\n \r\n
\r\n )\r\n};\r\n\r\nShoppingCartInstallationQuestion.propTypes = {\r\n questionNoClicked: PropTypes.bool.isRequired,\r\n openInstallationView: PropTypes.func.isRequired,\r\n handleNoClick: PropTypes.func.isRequired,\r\n}\r\n\r\nexport default ShoppingCartInstallationQuestion\r\n","import React, {useEffect} from 'react';\r\nimport { connect } from \"react-redux\";\r\nimport {FormattedMessage} from \"react-intl\";\r\n\r\nimport Quote from \"./quote\";\r\nimport {updateCurrentQuote} from \"../../misc/quotesFunctions\";\r\nimport {setActiveQuoteIndex, setQuotes} from \"../../actions/roomsFunctions\";\r\nimport goToMaterialPage from \"../../bvcomponents/common/goToMaterialPage\";\r\nimport {changeActivePartRelatedItemIndex} from \"../../actions/actionFunctions\";\r\nimport BodySwipable from \"../visComponents/navigation/desktop/bodySwipable\";\r\nimport {switchToNewVisualizerType} from \"../../misc/visualizerSwitchingFunctions\";\r\n\r\nconst Quotes = (props) => {\r\n\r\n const {quotes, activeQuoteIndex, fabricatorSettings} = props;\r\n\r\n const updateAllQuotes = async () => {\r\n if (fabricatorSettings.allowVisualizerSwitching && quotes[activeQuoteIndex] && quotes[activeQuoteIndex].room\r\n && (quotes[activeQuoteIndex].room !== document.kvConfig.visualizerType)) {\r\n await switchToNewVisualizerType(quotes[activeQuoteIndex].room) // cases when someone in another category and didn't create a quote yet\r\n }\r\n for (const [currentQuoteIndex, currentQuote] of quotes.entries()) {\r\n if ((activeQuoteIndex === currentQuoteIndex && !document.kvConfig.jobId) || (!currentQuote.staticCanvasImage && !currentQuote.bvImage)) {\r\n // update quote if it has no image (created in sqft for example)\r\n await updateCurrentQuote(currentQuoteIndex);\r\n }\r\n }\r\n }\r\n\r\n useEffect(() => {\r\n updateAllQuotes();\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, []);\r\n\r\n // useEffect(() => {\r\n // if (!fabricatorSettings.allowVisualizerSwitching || visualizerIsChanging) { // don't do anything until it is switched (incorrect picture issue)\r\n // return\r\n // }\r\n // updateAllQuotes();\r\n // // eslint-disable-next-line react-hooks/exhaustive-deps\r\n // }, [visualizerIsChanging]);\r\n\r\n const addNewQuote = async () => {\r\n const currentQuote = await updateCurrentQuote();\r\n const newQuotes = [...currentQuote, {}];\r\n props.setQuotes(newQuotes);\r\n props.setActiveQuoteIndex(newQuotes.length - 1);\r\n props.changeActivePartRelatedItemIndex(0);\r\n goToMaterialPage(\"shoppingcart\", true);\r\n await updateCurrentQuote(); // new quote, create quote img\r\n };\r\n\r\n return (\r\n \r\n
\r\n )\r\n }\r\n\r\n}\r\n\r\nconst mapStateToProps = (store) => {\r\n const {materialsAgentTutorialIsOpened, materialsAgentTutorialFinished} = store.tutorialState;\r\n const {isMobile} = store.serverState;\r\n\r\n return {\r\n materialsAgentTutorialIsOpened,\r\n materialsAgentTutorialFinished,\r\n isMobile,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n showMaterialsAgentTutorial,\r\n setMaterialsAgentTutorialFinished,\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(MaterialsAgentTutorial);\r\n","import React, {useRef} from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport PropTypes from \"prop-types\";\r\n\r\nimport BodySwipable from \"../../visComponents/navigation/desktop/bodySwipable\";\r\nimport MaterialsWizardFooterStep from \"./materialsWizardFooterStep\";\r\nimport {\r\n getWizardStepIsDisabled\r\n} from \"../../look/lookNavigation/lookMain/lookWizard/lookWizardFunctions\";\r\nimport {wizardItemInterface} from \"../../../interfaces/wizardItemInterface\";\r\nimport {getNextWizardSteps} from \"../../look/lookNavigation/lookMain/lookWizard/lookWizardFunctions2\";\r\n\r\n// const stepWidth = 92;\r\nconst MaterialsWizardFooterSteps = (props) => {\r\n\r\n const {wizardItem, wizardSelectedValues, wizardActiveStep, isShoppingCart, showAdvancedQuoting} = props;\r\n\r\n const scrollElementRef = useRef();\r\n\r\n // const stepWidth = isMobile ? 92 : 92;\r\n\r\n const wizardSteps = getNextWizardSteps(wizardItem, wizardActiveStep, wizardSelectedValues);\r\n // console.log(\"wizardSteps\", wizardSteps);\r\n\r\n // const styles = {\r\n // width: (wizardSteps.length + (isShoppingCart ? 1 : 0)) * stepWidth\r\n // }\r\n\r\n // const currentGroups = getCurrentGroups(wizardItem, wizardActiveStep, wizardSelectedValues);\r\n // const isCompletedStep = wizardActiveStep > -1 && !currentGroups.length;\r\n // const menuWidth = windowWidth * 35 / 100; // 35% of screen\r\n // const useContainerOverFlow = styles.width >menuWidth;\r\n\r\n const content = (\r\n \r\n
\r\n \r\n
\r\n
\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {wizardSteps.map((step) => {\r\n const stepDisabled = getWizardStepIsDisabled(step.stepIndex, wizardSelectedValues, wizardSteps);\r\n if (showAdvancedQuoting && (step.stepIndex !== wizardActiveStep) && window.location.href.includes(\"materials\")) {\r\n return null\r\n }\r\n return
\r\n )\r\n\r\n // return useContainerOverFlow ? (\r\n // {content}
\r\n\r\n return (\r\n \r\n \r\n
\r\n )\r\n }\r\n const quotesList = this.createCommonParentsList();\r\n const quotesListArray = Object.keys(quotesList);\r\n\r\n const {isBackend, jobId, canSaveQuote} = document.kvConfig;\r\n const pricingIsLocked = (fabricatorSettings.leadCaptureOnQuote || fabricatorSettings.leadCaptureShoppingCart)\r\n && !(isBackend && jobId && canSaveQuote) && !isPhoneNumberValidated;\r\n\r\n return quotesListArray.map(quoteIndex => {\r\n return (\r\n 1) ? \" scart-room--bordered\" : \"\")} key={quoteIndex}>\r\n {showAllQuotesCartItemsList && (quotesListArray.length > 1) ? (\r\n \r\n
\r\n ) : null}\r\n {quotesList[quoteIndex].map((listItem, index) => {\r\n if (this.props.showUnlockCalculations && listItem.cartItems && !listItem.cartItems.some(cartItem => {\r\n return this.props.showCartItems.includes(cartItem.id)\r\n })) {\r\n return false\r\n }\r\n if (listItem.type === \"subTotal\") {\r\n const quoteTotalPrice = getTotalPrice(listItem.quoteIndex, false);\r\n if (fabricatorData.isAmericanImport || (this.props.showUnlockCalculations && (this.props.unlockCalculationsStep < 2))) {\r\n return null\r\n }\r\n const quoteCartItems = fabricatorSettings.useDifferentCurrencies ? cartItems.filter(cartItem => cartItem.currentQuote === listItem.quoteIndex) : [];\r\n const differentCurrencyObjects = getDifferentCurrencyCartItems(fabricatorSettings, quoteCartItems);\r\n\r\n return (\r\n \r\n } else if (listItem.type === WIZARD_GROUP_TYPES.custom) {\r\n return \r\n }\r\n const isAddMoreDisabled = listItem.featureGroupName === SQFT_FEATURES.slabs;\r\n\r\n const editFeatureGroupClick = (event, editCartItem = null) => {\r\n if (!editCartItem && listItem.cartItems.length && listItem.cartItems[0].fromWizardId) {\r\n editCartItem = listItem.cartItems[0];\r\n }\r\n this.switchToMaterialsPageGroup(listItem, +quoteIndex, editCartItem)\r\n }\r\n // console.log(\"listItem\", listItem);\r\n return (\r\n
\r\n )\r\n })\r\n };\r\n\r\n getInstallations = (isMobile, fabricatorData, fabricatorSettings, installations) => {\r\n\r\n const showInstallations = size(installations) && fabricatorSettings.separateLaborInCart\r\n && (!this.props.showUnlockCalculations || (this.props.unlockCalculationsStep >= 2));\r\n\r\n if (showInstallations) {\r\n return (\r\n \r\n : {getRoomName(quoteIndex, cartItems, quotes, intl.messages, intl.locale, fabricatorData)}\r\n
\r\n ) : null}\r\n {quotesList[quoteIndex].map((listItem, index) => {\r\n if (this.props.showUnlockCalculations && listItem.cartItems && !listItem.cartItems.some(cartItem => {\r\n return this.props.showCartItems.includes(cartItem.id)\r\n })) {\r\n return false\r\n }\r\n if (listItem.type === \"subTotal\") {\r\n const quoteTotalPrice = getTotalPrice(listItem.quoteIndex, false);\r\n if (fabricatorData.isAmericanImport || (this.props.showUnlockCalculations && (this.props.unlockCalculationsStep < 2))) {\r\n return null\r\n }\r\n const quoteCartItems = fabricatorSettings.useDifferentCurrencies ? cartItems.filter(cartItem => cartItem.currentQuote === listItem.quoteIndex) : [];\r\n const differentCurrencyObjects = getDifferentCurrencyCartItems(fabricatorSettings, quoteCartItems);\r\n\r\n return (\r\n \r\n {differentCurrencyObjects.length ? differentCurrencyObjects.map(currObject => {\r\n const currentTotal = getTotalPrice(listItem.quoteIndex, false, currObject.cartItems);\r\n return (\r\n
\r\n )\r\n } else if (listItem.type === \"similar\") {\r\n return listItem.type === \"subTotal\") ? \" scart-block__subtotal--only\" : \"\"\r\n )}>\r\n : \r\n {pricingIsLocked ? (\r\n \r\n \r\n \r\n ) : getCurrencySign(currObject.currency, fabricatorSettings) + toFixedPrice(currentTotal.materialPrice, true)}\r\n
\r\n )\r\n }) : null}\r\n listItem.type === \"subTotal\") ? \" scart-block__subtotal--only\" : \"\"\r\n )}>\r\n : \r\n {pricingIsLocked ? (\r\n \r\n \r\n \r\n ) : getPriceWithCurrency(fabricatorSettings, toFixedPrice(quoteTotalPrice.materialPrice))}\r\n
\r\n \r\n
\r\n );\r\n })}\r\n \r\n {document.kvConfig.isBackend && listItem.featureGroup\r\n ? this.setFeatureGroupCustomName(listItem.featureGroup, quoteIndex, value)}\r\n value={listItem.featureGroup.customNames && listItem.featureGroup.customNames[quoteIndex]\r\n ? listItem.featureGroup.customNames[quoteIndex]\r\n : listItem.featureGroupDisplayName}/>\r\n : listItem.featureGroupDisplayName}\r\n
\r\n {\r\n isAddMoreDisabled\r\n ? null\r\n : \r\n }\r\n - \r\n {listItem.cartItems.map((cartItem, index2) => {\r\n return
\r\n \r\n
\r\n
\r\n )\r\n }\r\n return null\r\n };\r\n\r\n getTaxes = (isMobile, totalPrice, fabricatorSettings, sureTaxLoading) => {\r\n if (isMobile && this.props.cartItems.length && this.props.isPhoneNumberValidated) {\r\n\r\n if (sureTaxLoading) {\r\n return (\r\n \r\n \r\n
\r\n - \r\n {installations.map((instItem, instItemIndex) => {\r\n return
\r\n
\r\n
\r\n )\r\n }\r\n\r\n let allTaxes = totalPrice.priceTaxes.length\r\n ? totalPrice.priceTaxes\r\n : [{name: \"\", materialTax: totalPrice.materialTaxes}];\r\n\r\n const showTaxes = allTaxes.some(tax => tax.materialTax > 0);\r\n\r\n return (\r\n - \r\n
- \r\n \r\n\r\n\r\n\r\n
\r\n \r\n
\r\n {taxObject.state ||
\r\n
\r\n )\r\n }) : null}\r\n {totalPrice.installationTaxes ? (\r\n {taxObject.state || }
\r\n - \r\n
- \r\n \r\n\r\n\r\n \r\n {getPriceWithCurrency(fabricatorSettings, taxTotal)}\r\n \r\n\r\n \r\n
\r\n
\r\n
\r\n ) : null}\r\n - \r\n
- \r\n \r\n\r\n\r\n \r\n {getPriceWithCurrency(fabricatorSettings, totalPrice.installationTaxes.toFixed(2))}\r\n \r\n\r\n \r\n
\r\n {showAdvancedQuoting ?
\r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = (store) => {\r\n const installations = flatMap(store.instState.instList, i => filter(i.services, {selected: true}));\r\n const {wizardList, wizardIsActive, allWizardsValues} = store.wizardState;\r\n const {sureTaxLoading} = store.cartState;\r\n return {\r\n cartItems: store.cartState.cartItems,\r\n installations,\r\n isPhoneNumberValidated: store.userState.isPhoneNumberValidated,\r\n layoutParts: store.stepsState.layoutParts,\r\n questionNoClicked: store.cartState.questionNoClicked,\r\n windowWidth: store.serverState.windowWidth,\r\n fabricatorData: store.fabricatorState,\r\n showUnlockCalculations: store.unlockCalculationsState.showUnlockCalculations,\r\n unlockCalculationsStep: store.unlockCalculationsState.unlockCalculationsStep,\r\n showCartItems: store.unlockCalculationsState.showCartItems,\r\n activeQuoteIndex: store.quotesState.activeQuoteIndex,\r\n quotes: store.quotesState.quotes,\r\n showAllQuotesCartItemsList: store.cartState.showAllQuotesCartItemsList,\r\n showAdvancedQuoting: store.advancedQuotingState.showAdvancedQuoting,\r\n wizardList,\r\n wizardIsActive,\r\n allWizardsValues,\r\n showAssignQuotePopup: store.assignQuoteState.showAssignQuotePopup,\r\n sureTaxLoading,\r\n }\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n removeFromCart,\r\n toggleSelectionWindow,\r\n changeStateToQuote,\r\n setQtActiveCategory,\r\n changeActivePartRelatedItemIndex,\r\n setActiveQuoteIndex\r\n}\r\n\r\nexport default injectIntl(\r\n connect(mapStateToProps, mapDispatchToProps)(ShoppingCartItemsList)\r\n);\r\n","import React from 'react';\r\nimport {connect} from \"react-redux\";\r\nimport PropTypes from \"prop-types\";\r\nimport {FormattedMessage, injectIntl} from \"react-intl\";\r\nimport $ from \"jquery\";\r\n\r\nimport {\r\n removeFromCart,\r\n changeMessageBoxState,\r\n toggleUserPopup,\r\n setQtActiveCategory,\r\n changeActivePartRelatedItemIndex,\r\n toggleSelectionWindow,\r\n toggleSelectionFeatureInfo,\r\n toggleBathroomVisualizerOpen, setCameFromPage\r\n} from \"../../actions/actionFunctions\";\r\nimport {\r\n detectComplexLaborCartItem, getCartItemUnit,\r\n getFeatureIsLocked,\r\n getFeatureUnit, getTotalPrice,\r\n toFixedFeatureCost,\r\n toFixedPrice\r\n} from \"../../misc/helpers\";\r\nimport CommonFeatureItemsMethods from \"../visComponents/commonFeatureItemsMethods\";\r\nimport PriceInput from \"./priceInput\";\r\nimport {getCurrentLayout} from \"../appLayout\";\r\nimport {checkIfInCatProperty} from \"../../misc/displayLogic\";\r\nimport NoteEditor from \"./noteEditor\";\r\nimport ActionTypes from \"../../misc/actionTypes\";\r\nimport {cartItemInterface} from \"./cartItemInterface\";\r\nimport FeatureName from \"../visComponents/featureName\";\r\nimport {setActiveQuoteIndex} from \"../../actions/roomsFunctions\";\r\nimport Config from \"../../config\";\r\nimport {setCartItemEditFeature} from \"../../actions/shoppingCartFunctions\";\r\nimport {getPriceWithIncluded} from \"../../misc/priceFunctions\";\r\nimport {getWizardGroupFromCurrentSteps} from \"../look/lookNavigation/lookMain/lookWizard/lookWizardFunctions\";\r\n// import {setActionAfterVisualizerTypeIsChanged} from \"../../actions/serverFunctions\";\r\nimport {deleteCartItemFromSQFTCalcData, updateCurrentQuote} from \"../../misc/quotesFunctions\";\r\nimport ShoppingCartItemsBundledProducts from \"./shoppingCartItemsBundledProducts\";\r\nimport {SQFT_FEATURES} from \"../sqft/constants\";\r\n// import {COUNTERTOP_GROUP} from \"../kvComponent/core/constants\";\r\n// import {MEASURE_UNITS} from \"../sqft/constants\";\r\n\r\nclass ShoppingCartItemsListItem extends CommonFeatureItemsMethods {\r\n\r\n static propTypes = {\r\n cartItem: PropTypes.shape(cartItemInterface).isRequired,\r\n editFeatureGroupClick: PropTypes.func.isRequired,\r\n isBundleChild: PropTypes.bool,\r\n }\r\n\r\n state = {\r\n editorVisible: false,\r\n editorCanRender: true\r\n }\r\n\r\n componentDidMount() {\r\n $(window).on(ActionTypes.UPDATE_ALL_ITEMS, this.handleRefresh);\r\n }\r\n\r\n componentWillUnmount() {\r\n $(window).off(ActionTypes.UPDATE_ALL_ITEMS, this.handleRefresh);\r\n window.removeEventListener('click', this.handleWrapperBlur);\r\n }\r\n\r\n shouldComponentUpdate(nextProps) {\r\n return !nextProps.showAssignQuotePopup;\r\n }\r\n\r\n handleRefresh = () => {\r\n this.setState({\r\n editorVisible: false,\r\n editorCanRender: false\r\n }, () => {\r\n this.setState({\r\n editorCanRender: true\r\n })\r\n });\r\n this.forceUpdate();\r\n }\r\n\r\n handleRemoveClick = () => {\r\n const {cartItem, fabricatorData} = this.props;\r\n this.props.changeMessageBoxState({\r\n visible: true,\r\n message: {\r\n id: \"shoppingCart.fetureInCartRemovePopupQuestion\",\r\n featureName: cartItem.cartFeature.getFeatureName()\r\n },\r\n buttons: [{\r\n text: \"shoppingCart.fetureInCartRemovePopupNo\",\r\n color: \"blue\",\r\n click: () => {\r\n this.props.changeMessageBoxState({visible: false});\r\n }\r\n }, {\r\n text: \"shoppingCart.fetureInCartRemovePopupYes\",\r\n color: \"green\",\r\n click: async () => {\r\n this.props.removeFromCart(cartItem);\r\n this.props.changeMessageBoxState({visible: false});\r\n if (fabricatorData.settings.useCategorySwitching) {\r\n await updateCurrentQuote(cartItem.currentQuote, undefined, false);\r\n }\r\n deleteCartItemFromSQFTCalcData(cartItem).then(r => void r);\r\n }\r\n }]\r\n });\r\n };\r\n\r\n handleEditClick = () => {\r\n const {cartItem} = this.props;\r\n this.props.editFeatureGroupClick(null, cartItem);\r\n this.props.setCartItemEditFeature(cartItem);\r\n };\r\n\r\n handleAddNoteClick = () => {\r\n this.setState({\r\n editorVisible: !this.state.editorVisible\r\n }, () => {\r\n setTimeout(() => {\r\n this.state.editorVisible\r\n ? window.addEventListener('click', this.handleWrapperBlur)\r\n : window.removeEventListener('click', this.handleWrapperBlur)\r\n }, 0)\r\n })\r\n };\r\n\r\n handleWrapperBlur = (e) => {\r\n const disallowClasses = [\".product-note\", \".link--note\"];\r\n if (this.state.editorVisible && !disallowClasses.some(cls => e.target.closest(cls))) {\r\n this.setState({\r\n editorVisible: false\r\n })\r\n }\r\n };\r\n\r\n onNoteSave = () => {\r\n this.handleAddNoteClick();\r\n };\r\n\r\n toggleUserPopup = () => {\r\n this.props.toggleUserPopup({\r\n userPopupOpened: true\r\n })\r\n };\r\n\r\n render() {\r\n\r\n const layout = getCurrentLayout();\r\n const editingPriceAvailable = Config.isDevMode();\r\n\r\n const isMobile = this.props.windowWidth < 991;\r\n const {fabricatorData, cartItem, activeQuoteIndex, intl, wizardList, allWizardsValues, cartItems, isBundleChild,\r\n isSlabPricingEnabled} = this.props;\r\n const fabricatorSettings = fabricatorData.settings;\r\n\r\n if (this.props.showUnlockCalculations && !this.props.showCartItems.includes(cartItem.id)) {\r\n return false\r\n }\r\n const subPartName = cartItem.cartFeature.getParent ? cartItem.cartFeature.getParent().partName : \"\";\r\n let showPrice = false;\r\n let priceTotal = null;\r\n const priceIsLocked = getFeatureIsLocked(cartItem.cartFeature);\r\n if (fabricatorSettings.showPricing && !fabricatorData.hideCheckoutBreakdownCost && !fabricatorData.hidePricesFromUser) {\r\n const isComplexMultipliedUsed = detectComplexLaborCartItem(cartItem) && getTotalPrice().multipliedCostUsed;\r\n if (isComplexMultipliedUsed || cartItem.displayFakePrice === 0) {\r\n priceTotal = null\r\n } else {\r\n // not sure if we need displayFakePrice?\r\n // priceTotal = cartItem.displayFakePrice ? cartItem.displayFakePrice :\r\n // toFixedFeatureCost(cartItem.cartFeature, cartItem.quantity, cartItem.fromQtCategory, true, cartItem, cartItem.shouldUseSlabPricing);\r\n const shouldUseSlabPricing = cartItem.partId === SQFT_FEATURES.slabs && isSlabPricingEnabled;\r\n priceTotal = toFixedFeatureCost(\r\n cartItem.cartFeature,\r\n cartItem.quantity,\r\n cartItem.fromQtCategory,\r\n true,\r\n cartItem,\r\n shouldUseSlabPricing,\r\n cartItem.currentQuote\r\n );\r\n }\r\n showPrice = !priceIsLocked;\r\n }\r\n // const isEditable = !layout.qtCategories || cartItem.relatedProductParent ||(\r\n // layout.qtCategories.some(qtCategory => qtCategory.subParts && qtCategory.subParts.some(qtCatSubPart => {\r\n // return qtCatSubPart.part.partId === cartItem.cartFeature.partId\r\n // }))\r\n // );\r\n const featureUnit = getFeatureUnit(cartItem.cartFeature, intl, fabricatorData, cartItem.quantity);\r\n const cartItemUnit = getCartItemUnit(cartItem, intl);\r\n let isEditable = ![\"Slab\", \"Slabs\"].includes(cartItemUnit) && !isBundleChild; // always editable except slab, all logic is inside switchToFeatureInfo method\r\n if (cartItem.fromWizardGroupId && allWizardsValues) {\r\n const neededObject = allWizardsValues.find(wizValueObject => (wizValueObject.quoteIndex === cartItem.currentQuote)\r\n && (wizValueObject.wizardItemId === cartItem.fromWizardId));\r\n const selectedWizValues = neededObject && neededObject.wizardSelectedValues ? neededObject.wizardSelectedValues : null;\r\n const wizardItem = wizardList.find(wizItem => wizItem.id === cartItem.fromWizardId);\r\n const {neededStep} = getWizardGroupFromCurrentSteps(wizardItem, selectedWizValues, cartItem.fromWizardGroupId);\r\n if (!neededStep) {\r\n isEditable = false;\r\n }\r\n }\r\n const unit = cartItemUnit ? cartItemUnit : featureUnit;\r\n const getItemTitle = () => {\r\n let itemTitle;\r\n if (cartItem.cartFeature.inCatProperties) {\r\n itemTitle = checkIfInCatProperty(cartItem.cartFeature, \"inCatName\", cartItem.cartFeature.getFeatureName(), cartItem.fromQtCategory)\r\n }\r\n\r\n return itemTitle ? itemTitle : \r\n
\r\n {this.state.editorCanRender && !cartItem.isMinimumCharge && !cartItem.isAddedFromDisplayLogic ? (\r\n \r\n
\r\n {isMobile && !cartItem.isMinimumCharge && !cartItem.isAddedFromDisplayLogic ? (\r\n \r\n {subPartName && !layout.qtCategories ? subPartName + \" - \" : null}\r\n { getItemTitle() }\r\n
\r\n {cartItem.description ? (\r\n \r\n ) : null}\r\n {cartItem.isMinimumCharge && !cartItem.isMinimumChargeItems ? null : (\r\n\r\n {showPrice && isMobile ? (\r\n \r\n {getPriceWithIncluded(priceTotal, cartItem.cartFeature, fabricatorData, intl.messages)}\r\n \r\n ) : null}\r\n {priceIsLocked && isMobile ? (\r\n \r\n \r\n \r\n ) : null}\r\n {fabricatorSettings.useCategorySwitching && cartItem.partId === \"room\" ? null : (\r\n \r\n {unit}: {\r\n toFixedPrice(parseFloat(cartItem.displayFakeQuantity) === cartItem.displayFakeQuantity\r\n ? cartItem.displayFakeQuantity\r\n : cartItem.quantity, fabricatorSettings.useDifferentCurrencies)\r\n }\r\n \r\n )}\r\n
\r\n )}\r\n \r\n
\r\n ) : cartItem.isMinimumCharge || cartItem.isAddedFromDisplayLogic ? null : (\r\n \r\n \r\n {cartItem.cartFeature.notesList[activeQuoteIndex]\r\n ? \r\n : }\r\n \r\n {isEditable ? (\r\n \r\n \r\n \r\n ) : null}\r\n \r\n \r\n \r\n
\r\n )\r\n }\r\n {!isMobile ? (\r\n \r\n\r\n {showPrice\r\n ? editingPriceAvailable\r\n ? \r\n : (\r\n {getPriceWithIncluded(priceTotal, cartItem.cartFeature, fabricatorData, intl.messages)}\r\n )\r\n : null}\r\n {priceIsLocked ? (\r\n \r\n \r\n \r\n ) : null}\r\n
\r\n ) : null}\r\n \r\n {/*
\r\n )\r\n};\r\n\r\nNoteEditor.propTypes = {\r\n cartItem: PropTypes.object.isRequired,\r\n dbFeatureId: PropTypes.number.isRequired,\r\n closeEditor: PropTypes.func,\r\n}\r\n\r\nconst mapStateToProps = (store, ownProps) => {\r\n return {\r\n quoteIndex: ownProps.cartItem.currentQuote,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n changeCartFeature,\r\n};\r\n\r\nexport default injectIntl(\r\n connect(mapStateToProps, mapDispatchToProps)(NoteEditor)\r\n);\r\n","import React from \"react\";\r\nimport {connect} from \"react-redux\";\r\nimport {FormattedMessage} from \"react-intl\";\r\nimport PropTypes from \"prop-types\";\r\n\r\nimport ShoppingCartItemsListItem from \"./shoppingCartItemsListItem\";\r\nimport {cartItemInterface} from \"./cartItemInterface\";\r\nimport AdvancedQuotingListItem from \"./advancedQuoting/advancedQuotingListItem\";\r\n\r\n\r\nconst ShoppingCartItemsBundledProducts = (props) => {\r\n\r\n const {parentCartItem, cartItems, fabricatorData, isMobile, isAdvancedMode, advancedModeProperties} = props;\r\n\r\n const fabricatorSettings = fabricatorData.settings;\r\n\r\n let bundledCartItems = cartItems.filter(cItem => cItem.bundleParentId === parentCartItem.id);\r\n\r\n if (fabricatorData.isAmericanStandard) {\r\n // the quoting tool needs to have the bundled products hidden (only for American standard) in the cart and receipt,\r\n // but still send items through the API to LP.\r\n // For American Standard on production, we need to unhide the side walls for the bundles on the checkout screen only\r\n // (Not the receipt). Only the sidewall bundle feature should display for American Standard.\r\n // All other Fabricators, the bundles features should be visible on both the checkout and receipt.\r\n bundledCartItems = bundledCartItems.filter(cItem => cItem.partId === \"side_walls\");\r\n if (!bundledCartItems.length) {\r\n return null;\r\n }\r\n }\r\n\r\n return (\r\n {noteText}
*/}\r\n \r\n \r\n\r\n
\r\n )\r\n};\r\n\r\nShoppingCartItemsBundledProducts.propTypes = {\r\n parentCartItem: PropTypes.shape(cartItemInterface).isRequired,\r\n}\r\n\r\nconst mapStateToProps = (store) => {\r\n const {cartItems} = store.cartState;\r\n const {isMobile} = store.serverState;\r\n\r\n return {\r\n cartItems,\r\n fabricatorData: store.fabricatorState,\r\n isMobile,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {};\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(ShoppingCartItemsBundledProducts)\r\n\r\n","import React, {useState} from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport PropTypes from \"prop-types\";\r\nimport {FormattedMessage} from \"react-intl\";\r\nimport {cartItemInterface} from \"../cartItemInterface\";\r\nimport CartItemQuantity from \"./cartItemQuantity\";\r\nimport CartItemTotal from \"./cartItemTotal\";\r\nimport CartItemSearch from \"./cartItemSearch\";\r\nimport CartItemSearchButton from \"./cartItemSearchButton\";\r\nimport NoteEditor from \"../noteEditor\";\r\nimport AdvancedQuotingListItemRemoveButton from \"./advancedQuotingListItemRemoveButton\";\r\nimport {setNewActiveQuote} from \"../../../misc/quotesFunctions\";\r\nimport {setActiveQuoteIndex} from \"../../../actions/roomsFunctions\";\r\nimport {checkIfNeedToSetNewCategory} from \"../../../misc/categorySwitchingFunctions\";\r\nimport {SQFT_FEATURES} from \"../../sqft/constants\";\r\nimport {wizardAllObjectInterface, wizardGroupInterface} from \"../../../interfaces/wizardItemInterface\";\r\nimport {IS_OFFLINE_MODE} from \"../../../config\";\r\nimport ShoppingCartItemsBundledProducts from \"../shoppingCartItemsBundledProducts\";\r\n\r\nconst AdvancedQuotingListItem = (props) => {\r\n\r\n let {cartItem, subPart, deleteEmptyCartItem, quoteIndex, activeQuoteIndex, setActiveQuoteIndex, isBundleChild,\r\n qtCategoryName, stepIndex, wizardGroup, wizardAllObject, cartItems, stepDisabled} = props;\r\n\r\n const [quantity, setQuantity] = useState(\"\");\r\n const [editorVisible, setEditorVisible] = useState(\"\");\r\n\r\n const handleNoteButtonClick = () => {\r\n const newVisible = !editorVisible;\r\n setEditorVisible(newVisible);\r\n setTimeout(() => {\r\n newVisible\r\n ? window.addEventListener('click', handleWrapperBlur)\r\n : window.removeEventListener('click', handleWrapperBlur)\r\n }, 0)\r\n };\r\n\r\n const onNoteSave = () => {\r\n handleNoteButtonClick();\r\n };\r\n\r\n const handleWrapperBlur = (event) => {\r\n const disallowClasses = [\".product-note\", \".aq-button--note\"];\r\n if (editorVisible && !disallowClasses.some(cls => event.target.closest(cls))) {\r\n setEditorVisible(false);\r\n }\r\n };\r\n\r\n const setClickedItemActiveQuoteIndex = async () => {\r\n if (quoteIndex !== activeQuoteIndex) {\r\n await setNewActiveQuote(quoteIndex);\r\n setActiveQuoteIndex(quoteIndex);\r\n checkIfNeedToSetNewCategory(quoteIndex);\r\n }\r\n return Promise.resolve()\r\n };\r\n\r\n\r\n const isSearchDisabled = cartItem.partId === SQFT_FEATURES.slabs || isBundleChild || stepDisabled;\r\n const hasBundleProducts = cartItems.some(cItem => cItem.bundleParentId === cartItem.id);\r\n\r\n return (\r\n \r\n \r\n
\r\n - \r\n {bundledCartItems.map(cartItem => {\r\n if (isAdvancedMode) {\r\n return
\r\n null}/> : null}\r\n
\r\n )\r\n};\r\n\r\nAdvancedQuotingListItem.propTypes = {\r\n cartItem: PropTypes.shape(cartItemInterface),\r\n subPart: PropTypes.object.isRequired,\r\n deleteEmptyCartItem: PropTypes.func.isRequired,\r\n quoteIndex: PropTypes.number.isRequired,\r\n qtCategoryName: PropTypes.string,\r\n //wizard\r\n wizardAllObject: PropTypes.shape(wizardAllObjectInterface),\r\n wizardGroup: PropTypes.shape(wizardGroupInterface),\r\n stepIndex: PropTypes.number,\r\n isBundleChild: PropTypes.bool,\r\n stepDisabled: PropTypes.bool,\r\n};\r\n\r\nconst mapStateToProps = (store) => {\r\n const {activeQuoteIndex} = store.quotesState;\r\n const {cartItems} = store.cartState;\r\n return {\r\n activeQuoteIndex,\r\n cartItems,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n setActiveQuoteIndex,\r\n};\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(AdvancedQuotingListItem)\r\n\r\n","import React, {useEffect} from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport PropTypes from \"prop-types\";\r\nimport {removeFromCart} from \"../../../actions/actionFunctions\";\r\nimport {cartItemInterface} from \"../cartItemInterface\";\r\nimport {checkForDeletePopup, removeCartItemsWithQuoteIndex} from \"./advancedQuotingFunctions\";\r\nimport {usePrevious} from \"../../../misc/helperHooks\";\r\nimport {deleteCartItemFromSQFTCalcData, updateCurrentQuote} from \"../../../misc/quotesFunctions\";\r\n\r\nconst AdvancedQuotingListItemRemoveButton = (props) => {\r\n\r\n let {cartItem, removeFromCart, deleteEmptyCartItem, quoteIndex, confirmPopupTag, fabricatorSettings, isDisabled} = props;\r\n\r\n const prevConfirmPopupTag = usePrevious(confirmPopupTag);\r\n\r\n useEffect(() => {\r\n if (confirmPopupTag && confirmPopupTag.allowDelete && prevConfirmPopupTag && prevConfirmPopupTag.fromDelete\r\n && prevConfirmPopupTag.cartItem && (prevConfirmPopupTag.cartItem.id === cartItem.id)) { // update on close and apply\r\n removeCartItemsWithQuoteIndex(quoteIndex, removeFromCart);\r\n deleteCartItem();\r\n }\r\n }, [confirmPopupTag]); // eslint-disable-line react-hooks/exhaustive-deps\r\n\r\n const deleteCartItem = async () => {\r\n cartItem.isEmpty ? deleteEmptyCartItem(cartItem) : removeFromCart(cartItem);\r\n if (fabricatorSettings.useCategorySwitching) {\r\n await updateCurrentQuote(cartItem.currentQuote)\r\n }\r\n deleteCartItemFromSQFTCalcData(cartItem).then(r => void r);\r\n }\r\n\r\n const handleDeleteClick = () => {\r\n if (isDisabled) {\r\n return false\r\n }\r\n if (checkForDeletePopup(cartItem, null, quoteIndex, true)) {\r\n return false\r\n }\r\n deleteCartItem();\r\n };\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n
\r\n {cartItem.isEmpty || cartItem.isMinimumCharge ? null : (\r\n
\r\n \r\n }\r\n
\r\n \r\n \r\n
)}\r\n {hasBundleProducts ? \r\n \r\n
\r\n \r\n \r\n {cartItem.isMinimumCharge ? null :
\r\n )\r\n};\r\n\r\nAdvancedQuotingListItemRemoveButton.propTypes = {\r\n cartItem: PropTypes.shape(cartItemInterface),\r\n deleteEmptyCartItem: PropTypes.func.isRequired,\r\n quoteIndex: PropTypes.number.isRequired,\r\n isDisabled: PropTypes.bool,\r\n};\r\n\r\nconst mapStateToProps = (store) => {\r\n const {confirmPopupTag} = store.userState;\r\n const fabricatorSettings = store.fabricatorState.settings;\r\n return {\r\n confirmPopupTag,\r\n fabricatorSettings,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n removeFromCart,\r\n};\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(AdvancedQuotingListItemRemoveButton)\r\n\r\n","import React from 'react';\r\nimport {connect} from 'react-redux';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport {discountInterFace, discountSectionsInterface} from \"./discounstInterface\";\r\nimport DiscountCommon from \"./discountCommon\";\r\nimport {setDiscountSections} from \"../../actions/priceWorksheetActions\";\r\nimport {getSubTotalPrice} from \"./discountFunctions\";\r\nimport {getPriceWithCurrency} from \"../../misc/helpers\";\r\n\r\nclass DiscountSubTotal extends DiscountCommon {\r\n\r\n static propTypes = {\r\n discount: PropTypes.shape(discountInterFace),\r\n discountSection: PropTypes.shape(discountSectionsInterface),\r\n shoppingCartItem: PropTypes.bool,\r\n };\r\n\r\n render() {\r\n\r\n const {discount, fabricatorSettings, discountSections, discountSection, shoppingCartItem, customAddedDiscounts} = this.props;\r\n\r\n const subTotalPrice = getSubTotalPrice(discountSections, discountSection, discount, false, customAddedDiscounts);\r\n\r\n if (shoppingCartItem) {\r\n return getPriceWithCurrency(fabricatorSettings, subTotalPrice);\r\n }\r\n\r\n return (\r\n \r\n
\r\n \r\n {discount.selected ? discount.name : null}\r\n
\r\n {discount.selected ? (\r\n \r\n {getPriceWithCurrency(fabricatorSettings, subTotalPrice)}\r\n
\r\n ) : null}\r\n \r\n {wizardGroup\r\n ? getWizardGroupName(wizardGroup)\r\n : getFeatureGroupName(subPart.part, intl, fabricatorData)}\r\n
\r\n- \r\n {cartItems.map((cartItem, cartItemIndex) => {\r\n return
\r\n \r\n
\r\n )}\r\n \r\n
\r\n )\r\n};\r\n\r\nSimilarProducts.propTypes = {\r\n quoteIndex: PropTypes.number.isRequired,\r\n};\r\n\r\nconst mapStateToProps = (store) => {\r\n return {\r\n filterGroups: store.filterState.filterGroups,\r\n fabricatorData: store.fabricatorState,\r\n cartItems: store.cartState.cartItems,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {};\r\n\r\nexport default injectIntl(\r\n connect(mapStateToProps, mapDispatchToProps)(SimilarProducts)\r\n)\r\n","import React from 'react';\r\nimport PropTypes from \"prop-types\";\r\nimport { connect } from \"react-redux\";\r\nimport {FormattedMessage, injectIntl} from \"react-intl\";\r\n\r\nimport {\r\n toggleSelectionWindow, toggleSelectionFeatureInfo, changeActivePartRelatedItemIndex, setCameFromPage, setQtActiveCategory\r\n} from \"../../actions/actionFunctions\";\r\nimport CommonFeatureItemsMethods from \"../visComponents/commonFeatureItemsMethods\";\r\nimport {featureThumbnailUrl, toFixedFeatureCost} from \"../../misc/helpers\";\r\nimport {THUMBNAIL_SIZES} from \"../../misc/utils\";\r\nimport FeatureName from \"../visComponents/featureName\";\r\nimport {getPriceWithIncluded} from \"../../misc/priceFunctions\";\r\n\r\nclass RecentlyViewedItems extends CommonFeatureItemsMethods {\r\n\r\n componentDidMount() {\r\n // const recentlyList = document.querySelector(\".recently\");\r\n // const recentlyListHeight = recentlyList && recentlyList.clientHeight - 30;\r\n // if (recentlyListHeight) {\r\n // const columnsCount = (this.props.windowWidth <= 680) ? 2 : 3;\r\n // const rowNumber = Math.ceil(this.props.recentlyItems.length/columnsCount);\r\n // }\r\n }\r\n\r\n\r\n static propTypes = {\r\n isMobile: PropTypes.bool,\r\n recentlyItems: PropTypes.array.isRequired\r\n };\r\n\r\n renderEmptyItems = () => {\r\n const emptyItems = [];\r\n const recentlyItems = this.props.recentlyItems;\r\n const featuresLength = recentlyItems.length;\r\n const minItems = (window.innerWidth <= 680)\r\n ? 6\r\n : (window.innerHeight <= 300)\r\n ? (featuresLength <= 6) ? 6 : 9\r\n : 9;\r\n if ((featuresLength < minItems) && (this.props.windowWidth <= 991)) {\r\n for (let i = 1; i <= minItems - featuresLength;i++) {\r\n emptyItems.push(\r\n \r\n )\r\n }\r\n }\r\n return emptyItems\r\n };\r\n\r\n render() {\r\n const {fabricatorData, intl} = this.props;\r\n const fabricatorSettings = fabricatorData.settings;\r\n return (\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n {this.props.isMobile ? (\r\n \r\n
\r\n ) : null}\r\n {/*
\r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = (store) => {\r\n return {\r\n fabricatorData: store.fabricatorState,\r\n isPhoneNumberValidated: store.userState.isPhoneNumberValidated,\r\n windowWidth: store.serverState.windowWidth,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n toggleSelectionWindow,\r\n toggleSelectionFeatureInfo,\r\n changeActivePartRelatedItemIndex,\r\n setCameFromPage,\r\n setQtActiveCategory\r\n}\r\n\r\nexport default injectIntl(\r\n connect(mapStateToProps, mapDispatchToProps)(RecentlyViewedItems)\r\n)\r\n","import React from \"react\";\r\nimport {injectIntl} from \"react-intl\";\r\nimport {connect} from \"react-redux\";\r\nimport {LOWES_DISCLAIMER_EN} from \"../../misc/fabricatorHardcode\";\r\n\r\nconst DepositDisclaimer = (props) => {\r\n\r\n const {intl, fabricatorData} = props;\r\n\r\n const getDisclaimerMessage = () => {\r\n if ((fabricatorData.isLowes || fabricatorData.isCaesarStone) && intl.messages) {\r\n if (intl.locale === \"fr-FR\" && intl.messages[\"transDoc.description_FR._disclaimer\"]) {\r\n return intl.messages[\"transDoc.description_FR._disclaimer\"]\r\n } else if (intl.locale === \"pl-PL\" && intl.messages[\"transDoc.customTranslateDescription_PL._disclaimer\"]) {\r\n return intl.messages[\"transDoc.customTranslateDescription_PL._disclaimer\"]\r\n } else if (fabricatorData.isLowes) {\r\n return LOWES_DISCLAIMER_EN\r\n }\r\n }\r\n return fabricatorData.settings.depositDisclaimer\r\n }\r\n\r\n return (\r\n \r\n \r\n
\r\n ) : null}\r\n {/*Would you like to add any of these items to your cart?
*/}\r\n- \r\n {this.props.recentlyItems.map((cartItem, index) => {\r\n\r\n let showPrice = false;\r\n if (fabricatorSettings.showPricing && !fabricatorData.hideCheckoutBreakdownCost && !fabricatorData.hidePricesFromUser) {\r\n if ((fabricatorSettings.leadCaptureOnQuote && !(document.kvConfig.isBackend && document.kvConfig.jobId && document.kvConfig.canSaveQuote)) && !cartItem.cartFeature.dbFeature.unlocked) {\r\n if (this.props.isPhoneNumberValidated) {\r\n showPrice = true\r\n }\r\n } else {\r\n showPrice = true\r\n }\r\n }\r\n const priceIsLocked = !this.props.isPhoneNumberValidated && (fabricatorSettings.leadCaptureOnQuote && !(document.kvConfig.isBackend && document.kvConfig.jobId && document.kvConfig.canSaveQuote))\r\n && fabricatorSettings.showPricing && !cartItem.cartFeature.dbFeature.unlocked;\r\n\r\n const style = {\r\n backgroundImage: `url(${featureThumbnailUrl(cartItem.cartFeature, THUMBNAIL_SIZES.medium)})`\r\n };\r\n const price = toFixedFeatureCost(cartItem.cartFeature, 1);\r\n return (\r\n
- this.switchToFeatureInfo(cartItem.cartFeature, 'recently-viewed-switch-to-feature-info', \"\", null, cartItem)}>\r\n \r\n\r\n
\r\n {this.props.isMobile && showPrice\r\n ? {getPriceWithIncluded(price, cartItem.cartFeature, fabricatorData, intl.messages)}\r\n : null}\r\n {this.props.isMobile && priceIsLocked ? (\r\n \r\n \r\n \r\n ) : null}\r\n \r\n )\r\n })}\r\n {this.renderEmptyItems().map(emptyItem => emptyItem)}\r\n
\r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nconst mapStateToProps = (store) => {\r\n return {\r\n fabricatorData: store.fabricatorState,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {}\r\n\r\nexport default injectIntl(\r\n connect(mapStateToProps, mapDispatchToProps)(DepositDisclaimer)\r\n)\r\n","import React from 'react';\r\nimport {connect} from \"react-redux\";\r\nimport {hashHistory} from \"react-router\";\r\nimport PropTypes from \"prop-types\";\r\nimport {FormattedMessage} from \"react-intl\";\r\n\r\nimport RecentlyViewedItems from \"./recentlyViewedItems\";\r\n\r\nimport {\r\n setCameFromPage,\r\n toggleSelectionWindow,\r\n toggleBathroomVisualizerOpen,\r\n changeMessageBoxState, toggleUserPopup,\r\n}\r\n from \"../../actions/actionFunctions\";\r\nimport {getCurrentLayout} from \"../appLayout\";\r\n\r\nimport ShoppingCart from \"./shoppingCart\";\r\nimport PriceWorksheetButton from \"../ui/priceWorksheetButton\";\r\nimport {changeQTRoutePath} from \"../../misc/changeRoutePath\";\r\nimport ShoppingCartTotalColumns from \"./shoppingCartTotalColumns\";\r\nimport VisualizerButton from \"../ui/visualizerButton\";\r\nimport ShoppingCartFooterSubParts from \"./shoppingCartFooterSubParts\";\r\nimport Analytics from \"../../analytics\";\r\nimport {toggleShowAssignQuotePopup} from \"../../actions/assignPopupFunctions\";\r\n// import AgreeEmailCheckbox from \"../common/agreeEmailCheckbox\";\r\nimport ButtonGroup from \"../ui/buttonGroup\";\r\nimport {setCartFooterActiveButtonIndex} from \"../../actions/shoppingCartFunctions\";\r\nimport {handleSaveAndBackToDashboard} from \"../common/dashboardButtons/backToDashboard\";\r\nimport {showWizardInsteadOfQT} from \"../look/lookNavigation/lookMain/lookWizard/lookWizardFunctions\";\r\nimport ShoppingCartWizardFooterSteps from \"../qkbPages/materialsWizard/shoppingCartWizardFooterSteps\";\r\n\r\nclass ShoppingCartFooter extends ShoppingCart {\r\n\r\n finalButton = null;\r\n saveButton = null;\r\n\r\n static propTypes = {\r\n showRecentlyViewedItems: PropTypes.bool.isRequired,\r\n recentlyItems: PropTypes.array.isRequired\r\n };\r\n\r\n handleSaveClick = () => {\r\n Analytics.sendClickEvent(\"shopping-cart-save\");\r\n this.handleCheckOut();\r\n };\r\n\r\n goBack = () => {\r\n switch (this.props.cameFromPage) {\r\n case 'visualizer':\r\n this.props.toggleBathroomVisualizerOpen(true);\r\n hashHistory.push('visualizer');\r\n break;\r\n case 'quote-design':\r\n hashHistory.push('quote-design');\r\n break;\r\n case 'materials':\r\n default: {\r\n const layout = getCurrentLayout();\r\n layout.qtCategories ? changeQTRoutePath() : hashHistory.push('materials');\r\n this.props.toggleSelectionWindow(true, this.props.selectionGroup);\r\n break;\r\n }\r\n }\r\n this.props.setCameFromPage('');\r\n };\r\n\r\n renderFooterLeftSide = () => {\r\n const {showRecentlyViewedItems, recentlyItems, wizardIsActive, wizardList} = this.props;\r\n if (showRecentlyViewedItems) {\r\n return \r\n {showRecentlyViewedItems\r\n ?
\r\n : null}\r\n
\r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = (store) => {\r\n const {cartItems, cameFromPage, recentlyViewedItems, cartFooterActiveButtonIndex} = store.cartState;\r\n const {windowWidth, networkConnection} = store.serverState;\r\n const {wizardList, wizardIsActive} = store.wizardState;\r\n const {editToken} = store.userState;\r\n\r\n return {\r\n windowWidth,\r\n cartItems,\r\n cameFromPage,\r\n selectionGroup: store.selectionState.selectionGroup,\r\n fabricatorData: store.fabricatorState,\r\n recentlyViewedItems,\r\n userIsLoggedIn: store.userState.userIsLoggedIn,\r\n isPhoneNumberValidated: store.userState.isPhoneNumberValidated,\r\n discountSections: store.priceWorksheetState.discountSections,\r\n discountsReceived: store.priceWorksheetState.discountsReceived,\r\n cartFooterActiveButtonIndex,\r\n networkConnection,\r\n wizardList,\r\n wizardIsActive,\r\n editToken,\r\n };\r\n};\r\n\r\nexport default connect(mapStateToProps, {\r\n setCameFromPage,\r\n toggleSelectionWindow,\r\n toggleBathroomVisualizerOpen,\r\n changeMessageBoxState,\r\n toggleUserPopup,\r\n toggleShowAssignQuotePopup,\r\n setCartFooterActiveButtonIndex,\r\n})(ShoppingCartFooter);\r\n","import React, {Fragment} from 'react';\r\nimport {connect} from \"react-redux\";\r\nimport {FormattedMessage, injectIntl} from \"react-intl\";\r\n\r\nimport {toggleUserPopup} from \"../../actions/actionFunctions\";\r\n\r\nimport {\r\n getCurrencySign,\r\n getPriceWithCurrency,\r\n getQuotePriceWithTaxes,\r\n getTotalPrice,\r\n toFixedPrice\r\n} from \"../../misc/helpers\";\r\nimport ShoppingCart from \"./shoppingCart\";\r\nimport LoadingSpinner from \"../ui/loadingSpinner\";\r\nimport {getDifferentCurrencyCartItems} from \"../../misc/misc2\";\r\nimport ShoppingCartTaxInput from \"./shoppingCartTaxInput\";\r\n\r\nclass ShoppingCartTotalColumns extends ShoppingCart {\r\n\r\n shouldComponentUpdate(nextProps) {\r\n return !nextProps.showAssignQuotePopup;\r\n }\r\n\r\n toggleUserPopup = () => {\r\n this.props.toggleUserPopup({\r\n userPopupOpened: true\r\n })\r\n };\r\n\r\n getTaxColumn = (pricingIsLocked, taxObject, taxObjectIndex) => {\r\n const {fabricatorSettings, intl, language} = this.props;\r\n const showIncluded = !pricingIsLocked && (+taxObject.materialTax > 0);\r\n const taxTotal = taxObject.materialTax.toFixed(2); // always round to 23.65, even if it is 23.00\r\n if (taxTotal <= 0 && !fabricatorSettings.sureTax) {\r\n return null\r\n }\r\n const taxName = taxObject.nameIntl && taxObject.nameIntl[language]\r\n ? taxObject.nameIntl[language]\r\n : (taxObject.state || intl.formatMessage({id: \"shoppingCart.totalColumnsTax\"})) + (showIncluded\r\n ? this.props.fabricatorData.isLowes\r\n ? intl.formatMessage({id: \"shoppingCart.totalColumnsTaxIncludedLowes\"})\r\n : intl.formatMessage({id: \"shoppingCart.totalColumnsTaxIncluded\"})\r\n : \"\");\r\n return (\r\n \r\n
\r\n {this.renderFooterLeftSide()}
\r\n \r\n {fabricatorSettings.showPricing && showRecentlyViewedItems && !fabricatorData.hidePricesFromUser ? (\r\n
\r\n \r\n
\r\n ) : null}\r\n \r\n {!showRecentlyViewedItems && !showPriceWorksheet ? {\r\n this.props.toggleShowAssignQuotePopup(true, \"save\");\r\n }\r\n }, {\r\n intlText: finalButton.intlText,\r\n clickFunction: finalButton.onClick.bind(this, \"checkout\")\r\n }]}>\r\n {/* \r\n ) : finalButtonElement}\r\n
\r\n \r\n \r\n \r\n : fabricatorSettings.sureTax\r\n ? \r\n :
\r\n )\r\n }\r\n\r\n render() {\r\n const {fabricatorSettings, isPhoneNumberValidated, discountSections, showAllQuotesCartItemsList,\r\n quotes, activeQuoteIndex, intl, fabricatorData, sureTaxLoading, jobId} = this.props;\r\n\r\n if (fabricatorData.isAmericanImport) {\r\n return null\r\n }\r\n\r\n const {isBackend, canSaveQuote} = document.kvConfig;\r\n const totalPrice = getTotalPrice();\r\n let grandTotal = getQuotePriceWithTaxes(totalPrice, discountSections);\r\n const pricingIsLocked = (fabricatorSettings.leadCaptureOnQuote || fabricatorSettings.leadCaptureShoppingCart)\r\n && !(isBackend && jobId && canSaveQuote) && !isPhoneNumberValidated;\r\n\r\n let allTaxes = totalPrice.priceTaxes.length\r\n ? totalPrice.priceTaxes\r\n : [{materialTax: totalPrice.materialTaxes}];\r\n let instTaxes = totalPrice.installationTaxes;\r\n // console.log(\"allTaxes\", allTaxes);\r\n\r\n const showTaxes = !sureTaxLoading && (pricingIsLocked || allTaxes.some(tax => tax.materialTax > 0)\r\n || (fabricatorSettings.sureTax && isPhoneNumberValidated && jobId)) // show even if it is 0 for sureTax\r\n && !(this.props.showUnlockCalculations && !this.props.showTotalItems.includes(\"tax\"));\r\n let subTotalPrice = 0;\r\n if (quotes.length > 1 && !showAllQuotesCartItemsList) {\r\n //todo remove\r\n const quoteTotalPrice = getTotalPrice(activeQuoteIndex);\r\n // subTotalPrice = getQuotePriceWithTaxes(quoteTotalPrice, discountSections);\r\n subTotalPrice = quoteTotalPrice.materialPrice;\r\n allTaxes = quoteTotalPrice.priceTaxes.length\r\n ? quoteTotalPrice.priceTaxes\r\n : [{materialTax: quoteTotalPrice.materialTaxes}];\r\n instTaxes = quoteTotalPrice.installationTaxes;\r\n }\r\n subTotalPrice = subTotalPrice.toFixed(2); // always round to 23.65, even if it is 23.00\r\n grandTotal = grandTotal.toFixed(2); // always round to 23.65, even if it is 23.00\r\n\r\n const insideQuote = Number.isInteger(activeQuoteIndex);\r\n const addedCountertops = insideQuote\r\n ? this.props.cartItems.filter(cItem => cItem.currentQuote === activeQuoteIndex && cItem.partId.includes(\"countertop\"))\r\n : this.props.cartItems.filter(cItem => cItem.partId.includes(\"countertop\"));\r\n const totalCountertopsQuantity = addedCountertops.reduce(((accumulator, cItem) => accumulator + cItem.quantity), 0);\r\n const avgPerSqftPrice = fabricatorSettings.showAveragePrice ? Math.round10(grandTotal / totalCountertopsQuantity, -2) : null;\r\n //const avgPerSqftPrice = totalCountertopsQuantity;\r\n\r\n const differentCurrencyObjects = getDifferentCurrencyCartItems(fabricatorSettings, this.props.cartItems);\r\n\r\n return (\r\n {taxName}
\r\n {pricingIsLocked\r\n ? \r\n{getPriceWithCurrency(fabricatorSettings, taxTotal)}
\r\n }\r\n\r\n \r\n
\r\n ) : null}\r\n {showTaxes && !sureTaxLoading ? allTaxes.map((taxObject, taxObjectIndex) => {\r\n return this.getTaxColumn(pricingIsLocked, taxObject, taxObjectIndex)\r\n }) : null}\r\n {instTaxes ? (\r\n \r\n \r\n \r\n :
\r\n ) : null}\r\n {(quotes.length > 1) && !showAllQuotesCartItemsList ? (\r\n \r\n {intl.formatMessage({id: \"shoppingCart.installationTaxesTitle\"}) +\r\n (!pricingIsLocked && (+instTaxes > 0)\r\n ? this.props.fabricatorData.isLowes\r\n ? intl.formatMessage({id: \"shoppingCart.totalColumnsTaxIncludedLowes\"})\r\n : intl.formatMessage({id: \"shoppingCart.totalColumnsTaxIncluded\"})\r\n : \"\")}\r\n
\r\n {pricingIsLocked\r\n ? \r\n{getPriceWithCurrency(fabricatorSettings, instTaxes.toFixed(2))}
\r\n }\r\n\r\n
\r\n {pricingIsLocked\r\n ? \r\n \r\n \r\n :
\r\n ) : null}\r\n {avgPerSqftPrice ? (\r\n {getPriceWithCurrency(fabricatorSettings, subTotalPrice)}
\r\n }\r\n\r\n
\r\n
\r\n ) : null}\r\n {!differentCurrencyObjects.length || (this.props.showUnlockCalculations && !this.props.showTotalItems.includes(\"total\")) ? null : (\r\n differentCurrencyObjects.map(currObject => {\r\n const currentTotal = getTotalPrice(null, true, currObject.cartItems);\r\n const total = toFixedPrice(getQuotePriceWithTaxes(currentTotal, discountSections), true)\r\n return (\r\n \r\n {pricingIsLocked\r\n ? \r\n
\r\n
\r\n {pricingIsLocked\r\n ? \r\n \r\n \r\n :
\r\n )\r\n })\r\n )}\r\n {this.props.showUnlockCalculations && !this.props.showTotalItems.includes(\"total\") ? null : (\r\n {getCurrencySign(currObject.currency, fabricatorSettings) + total}
\r\n }\r\n\r\n
\r\n {pricingIsLocked\r\n ? \r\n \r\n \r\n : (\r\n
\r\n )}\r\n \r\n {getPriceWithCurrency(fabricatorSettings, grandTotal, null, false, true)}\r\n
\r\n )\r\n }\r\n\r\n {this.props.windowWidth < 991 ?\r\n this.props.mobileNav && this.props.mobileNav.length > 0\r\n ?
\r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = (store) => {\r\n const {materialsCanvasClass} = store.selectionState;\r\n return {\r\n cartItems: store.cartState.cartItems,\r\n fabricatorData: store.fabricatorState,\r\n windowWidth: store.serverState.windowWidth,\r\n mobileNav: store.navigationState.mobileNav,\r\n canvasDimensions: store.bathroomVisualizerState.canvasDimensions,\r\n materialsCanvasClass,\r\n };\r\n};\r\n\r\nexport default connect(mapStateToProps, {\r\n toggleBathroomVisualizerOpen,\r\n toggleUserPopup\r\n})(ShoppingCartCanvas);\r\n","import React from 'react';\r\nimport {FormattedMessage} from \"react-intl\";\r\nimport PropTypes from \"prop-types\";\r\n\r\nconst ShoppingCartInstallationQuestion = (props) => {\r\n return (\r\n \r\n
\r\n \r\n \r\n
\r\n - \r\n {quotes.map((quote, index) => {\r\n return
- \r\n
\r\n \r\n
\r\n })}\r\n
\r\n
\r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = (store) => {\r\n return {\r\n priceWorksheetOpened: store.priceWorksheetState.priceWorksheetOpened,\r\n discountsReceived: store.priceWorksheetState.discountsReceived,\r\n fabricatorData: store.fabricatorState,\r\n };\r\n};\r\n\r\nexport default connect(mapStateToProps, {\r\n togglePriceWorksheetOpened,\r\n})(PriceWorksheetView);\r\n","import React, {useRef, useState} from \"react\";\r\nimport {FormattedMessage} from \"react-intl\";\r\nimport PropTypes from 'prop-types';\r\n\r\nimport {useOutsideClickSimple} from \"../../../misc/helperHooks\";\r\n\r\nconst DiscountDropdown = (props) => {\r\n\r\n const {dropdownItems, selectItemClick, children, maxItems, useIntl, dropdownTitle} = props;\r\n\r\n const [opened, setOpened] = useState(false);\r\n const selectElement = useRef(null);\r\n\r\n useOutsideClickSimple(selectElement, () => {\r\n setOpened(false);\r\n });\r\n\r\n const handleSelectItemClick = (selectItem) => {\r\n if (selectItem.disabled) {\r\n return false;\r\n }\r\n selectItemClick(selectItem);\r\n setOpened(false);\r\n };\r\n\r\n const selectItemHeight = 33;\r\n let styles = {\r\n height: opened\r\n ? maxItems && (dropdownItems.length > maxItems)\r\n ? (maxItems * selectItemHeight) + (dropdownTitle ? 40 : 0) + \"px\"\r\n : (dropdownItems.length * selectItemHeight) + (dropdownTitle ? 40 : 0) + \"px\"\r\n : 0\r\n }\r\n\r\n return (\r\n \r\n
\r\n {fabricatorData.isAmericanImport ? null : (\r\n
\r\n \r\n
\r\n
\r\n )\r\n}\r\n\r\nDiscountDropdown.propTypes = {\r\n dropdownItems: PropTypes.array.isRequired,\r\n selectItemClick: PropTypes.func.isRequired,\r\n}\r\n\r\nexport default DiscountDropdown;\r\n","import $ from \"jquery\";\r\nimport Tutorial from \"../tutorials/tutorial\";\r\n\r\nexport default class UnlockCalculationsTutorialFunctions extends Tutorial {\r\n\r\n exitTutorial = () => {\r\n if (this.overlayElement) {\r\n $(this.overlayElement).fadeOut(300, () => {\r\n this.props.setShowUnlockCalculationsTutorial(false);\r\n this.props.setUnlockCalculationsTutorialFinished(true);\r\n })\r\n }\r\n };\r\n\r\n}\r\n","import {useEffect} from \"react\";\r\nimport {updateSureTax} from \"../../../misc/updateSureTax\";\r\n\r\n\r\nconst useUpdateSureTax = (visualizersLoadedLength, cartItems, runUpdates = true, withLoader = true) => {\r\n\r\n useEffect(() => {\r\n if (runUpdates && (visualizersLoadedLength > 0) && cartItems.length) {\r\n updateSureTax(withLoader)\r\n }\r\n }, [visualizersLoadedLength, cartItems, runUpdates, withLoader])\r\n\r\n return null\r\n};\r\n\r\n\r\nexport default useUpdateSureTax\r\n","import React, {Fragment, useEffect, useReducer, useState} from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport PropTypes from \"prop-types\";\r\nimport $ from \"jquery\";\r\nimport {withRouter} from \"react-router-dom\";\r\n\r\nimport CircularProgress from '@mui/material/CircularProgress';\r\n\r\nimport ImageCanvasCommonNew from \"../visComponents/imageCanvasCommonNew\";\r\nimport {\r\n setLookActiveCategory,\r\n setLookContextMenu,\r\n setLookDemoPointsClicked,\r\n setLookOpened, setLookPageOpened\r\n} from \"../../actions/lookFunctions\";\r\nimport {getCurrentLayout} from \"../appLayout\";\r\nimport LookZoomer from \"./lookZoomer\";\r\nimport LookContextMenu from \"./lookNavigation/lookContextMenu\";\r\n// import LookDemoPoints from \"./demoPoints/lookDemoPoints\";\r\nimport {checkForContextMenuCommon, zoomCanvasOut} from \"./lookNavigation/lookFunctions\";\r\n// import WithDemoShow from \"./hocs/withDemoShow\";\r\nimport COLOR_THEMES, {COLORS} from \"../../colorThemes\";\r\nimport LoadingBar from '../../lib/react-redux-loading-bar';\r\nimport {setCanvasScale} from \"../../actions/actionFunctions\";\r\nimport {LOOK_INTRO_STEPS_MOBILE, LOOK_OVERLAYS} from \"./core/constants\";\r\nimport {IS_PRODUCT_JOURNEY} from \"../../config\";\r\n// import LookCanvasMetadataTest from \"./lookCanvasMetadataTest\";\r\nimport {setGroheSameColorSectionOpened} from \"../../actions/groheFunctions\";\r\nimport Analytics, {LOOK_JOURNEY_ANALYTIC_EVENTS, PRODUCT_JOURNEY_ANALYTIC_EVENTS} from \"../../analytics\";\r\nimport {getFilteredLayersForActiveWizard} from \"./lookNavigation/lookMain/lookWizard/lookWizardFunctions\";\r\nimport {getLookIdUrl, getWizardWithFirstStepCurrentPartId} from \"./lookNavigation/lookFunctions2\";\r\nimport {ROUTES} from \"../../routes\";\r\nimport {setWizardActiveItem} from \"../../actions/wizardFunctions\";\r\n\r\nconst LookCanvas = (props) => {\r\n\r\n const {canvasDimensions, canvasId, imageCanvas, isMobile, setLookContextMenu, zoomToFeatureGroup, setLookOpened,\r\n setLookActiveCategory, activeTheme, visualizersLoaded, lookOpened, setCanvasScale, history, groheSameColorSectionOpened,\r\n setGroheSameColorSectionOpened, setLookDemoPointsClicked, lookPageOpened, setLookPageOpened, contextMenu,\r\n lookOverlayOpened, introStep, introHidden, wizardActiveItem, wizardSelectedValues, fabricatorData, wizardList,\r\n setWizardActiveItem} = props;\r\n\r\n const [, forceUpdate] = useReducer(x => x + 1, 0);\r\n const [showCanvasLoader, setShowCanvasLoader] = useState(false);\r\n\r\n const layout = getCurrentLayout();\r\n const showPlaceHolders = document.bvConfig ? document.bvConfig.showPlaceholders : false;\r\n\r\n let layers = layout.getLayers(showPlaceHolders);\r\n if (wizardActiveItem && wizardActiveItem.hideItems) {\r\n layers = getFilteredLayersForActiveWizard(wizardActiveItem, wizardSelectedValues, layers)\r\n }\r\n\r\n const layoutType = layout.getCurrentLayoutName();\r\n\r\n useEffect(() => {\r\n $(\"html, body\").animate({scrollTop: document.body.scrollHeight}, 1000);\r\n }, [])\r\n\r\n const updateLookCanvas = () => {\r\n forceUpdate(1)\r\n }\r\n\r\n const checkForContextMenu = (hoveredLayer, event) => {\r\n if (contextMenu.opened) {\r\n setLookContextMenu({\r\n opened: false\r\n })\r\n return true\r\n }\r\n if (!hoveredLayer) {\r\n return false\r\n }\r\n const {showButtons} = checkForContextMenuCommon(hoveredLayer.partId, hoveredLayer.layerPosition, fabricatorData);\r\n if ((showButtons.length > 1) && !(hoveredLayer.partId && hoveredLayer.partId === \"vanity_legs\")) {\r\n // if (imageCanvas.current && imageCanvas.current.setHoveredLayer) {\r\n // imageCanvas.current.renderGreenLayerByZindex(hoveredLayer.zIndex);\r\n // }\r\n const analyticsLabel = IS_PRODUCT_JOURNEY\r\n ? PRODUCT_JOURNEY_ANALYTIC_EVENTS.productCanvasContextMenu + hoveredLayer.partId\r\n : LOOK_JOURNEY_ANALYTIC_EVENTS.lookCanvasContextMenu + hoveredLayer.partId\r\n Analytics.sendClickEvent(analyticsLabel);\r\n setLookContextMenu({\r\n opened: true,\r\n partId: hoveredLayer.partId,\r\n layerPosition: hoveredLayer.layerPosition, // if needed\r\n position: {\r\n x: event.clientX,\r\n y: event.clientY,\r\n }\r\n });\r\n setLookDemoPointsClicked(true);\r\n return true\r\n } else if (showButtons.length === 1 && showButtons[0].partId.includes(\"_wizard\")) {\r\n const wizardId = showButtons[0].partId.split(\"-\")[1];\r\n setLookOpened(true);\r\n setWizardActiveItem(wizardList.find(wizardItem => wizardItem.id === wizardId));\r\n\r\n history.push(`${getLookIdUrl(false) + ROUTES.wizard}/${wizardId}`);\r\n return true\r\n } else {\r\n const shouldOpenWizardItem = getWizardWithFirstStepCurrentPartId(wizardList, hoveredLayer.partId);\r\n if (shouldOpenWizardItem) {\r\n setLookOpened(true);\r\n setWizardActiveItem(shouldOpenWizardItem);\r\n history.push(`${getLookIdUrl(false) + ROUTES.wizard}/${shouldOpenWizardItem.id}`);\r\n return true\r\n }\r\n }\r\n return false\r\n }\r\n\r\n const lookCanvasClick = (event) => {\r\n\r\n if (imageCanvas && imageCanvas.current && imageCanvas.current.pinchZoom) {\r\n // document.querySelector('.canvas-text').innerHTML = 'look click first';\r\n if (imageCanvas.current.pinchZoom.hasInteraction || window.touchMove) {\r\n // document.querySelector('.canvas-text').innerHTML = 'look click 22' + imageCanvas.current.pinchZoom.hasInteraction + \" \" + window.touchMove;\r\n return false;\r\n }\r\n const scale = imageCanvas.current.pinchZoom.getScale();\r\n if (scale !== 1 || lookOpened || (IS_PRODUCT_JOURNEY && (groheSameColorSectionOpened || lookPageOpened))) {\r\n setLookOpened(false);\r\n setLookActiveCategory(\"\");\r\n if (IS_PRODUCT_JOURNEY) {\r\n if (groheSameColorSectionOpened) {\r\n setGroheSameColorSectionOpened(false);\r\n }\r\n if (lookPageOpened) {\r\n setLookPageOpened(\"\");\r\n }\r\n }\r\n zoomCanvasOut(imageCanvas, setCanvasScale);\r\n history.push(\"/\");\r\n return false;\r\n }\r\n }\r\n\r\n if (isMobile && imageCanvas.current && imageCanvas.current.setHoveredLayer) {\r\n imageCanvas.current.setHoveredLayer(event);\r\n }\r\n\r\n if (checkForContextMenu(document.hoveredLayer, event)) {\r\n return false\r\n }\r\n\r\n if (document.hoveredLayer) {\r\n const hoveredPartId = document.hoveredLayer.partId;\r\n const analyticsLabel = IS_PRODUCT_JOURNEY\r\n ? PRODUCT_JOURNEY_ANALYTIC_EVENTS.productCanvasLayer + hoveredPartId\r\n : LOOK_JOURNEY_ANALYTIC_EVENTS.lookCanvasLayer + hoveredPartId\r\n Analytics.sendClickEvent(analyticsLabel);\r\n zoomToFeatureGroup(hoveredPartId, null, null, true, !(!IS_PRODUCT_JOURNEY && isMobile));\r\n }\r\n };\r\n\r\n const color = visualizersLoaded.length ? COLORS.white : COLOR_THEMES[activeTheme].active;\r\n const movedCanvasForIntro = isMobile && !introHidden && (lookOverlayOpened === LOOK_OVERLAYS.intro)\r\n && (introStep <= LOOK_INTRO_STEPS_MOBILE.saveAndMore);\r\n\r\n // console.log(\"layers\", layers);\r\n\r\n return (\r\n setOpened(true)}>\r\n {children || null}\r\n
\r\n \r\n {dropdownTitle ?
\r\n {dropdownTitle}
: null}\r\n - maxItems) ? \" dr-dropdown__list--scroll\" : \"\")}>\r\n {dropdownItems.map((selectItem, selectItemIndex) => {\r\n return (\r\n
- handleSelectItemClick(selectItem)}>\r\n {selectItem.html || (\r\n \r\n {useIntl ?
: selectItem.text}\r\n \r\n )}\r\n \r\n )\r\n })}\r\n
\r\n {visualizersLoaded.length ? ( // this added because it loads faster than the canvas dimensions are set\r\n
\r\n {imageCanvas ? \r\n \r\n
\r\n ) : null}\r\n {/*\r\n
\r\n )}\r\n \r\n {showAddedToTheCartSuccess ? (\r\n \r\n ) : !fabricatorData.settings.checkout ? null : (\r\n \r\n {(updateLookCartItem) => (\r\n \r\n {(addToCartPostMessage) => (\r\n \r\n : featureIsLocked ? null : \r\n \r\n )}\r\n \r\n )}\r\n \r\n )}\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n )\r\n};\r\n\r\nconst mapStateToProps = (store) => {\r\n const {lookActiveFeature, lookActiveCategory} = store.lookState;\r\n return {\r\n lookActiveFeature,\r\n lookActiveCategory,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n setLookActiveCategory,\r\n setLookMoreInfoOpened,\r\n updateCanvasCount,\r\n};\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(GroheFeatureContentInCart)\r\n","import {connect} from \"react-redux\";\r\nimport {withRouter} from \"react-router-dom\";\r\n\r\nimport {addToCart, removeFromCart, updateCanvasCount} from \"../../../actions/actionFunctions\";\r\nimport {setLookActiveCategory} from \"../../../actions/lookFunctions\";\r\nimport {setLookRemovedCartItems} from \"../../../actions/shoppingCartFunctions\";\r\nimport {getCartItemsArrayFromFeature} from \"../lookNavigation/lookFunctions2\";\r\nimport {setWizardSqftCartItems} from \"../../../actions/wizardFunctions\";\r\n\r\nconst WithUpdateCartItems = (props) => {\r\n\r\n const {cartItems, removeFromCart, addToCart, qtActiveCategory, children, lookRemovedCartItems, setLookRemovedCartItems,\r\n setWizardSqftCartItems} = props;\r\n\r\n const updateCartItems = (features, selectedWizardValues, wizardSqftCartItems = []) => {\r\n features.forEach(feature => {\r\n updateLookCartItem(feature, selectedWizardValues, wizardSqftCartItems)\r\n });\r\n if (wizardSqftCartItems.length) {\r\n addToCart(wizardSqftCartItems);\r\n setWizardSqftCartItems([]);\r\n }\r\n }\r\n const updateLookCartItem = (feature, selectedWizardValues, wizardSqftCartItems = []) => {\r\n // const urlPartId = feature.partId.replace(/_/gi, \"-\");\r\n const featureGroup = feature.getParent();\r\n let newQuantity = 1;\r\n\r\n const addedCartItem = cartItems.find(cItem => {\r\n if (featureGroup.layerPositions) {\r\n return (cItem.partId === feature.partId)\r\n && (cItem.cartFeature.metaData.layerPosition === feature.metaData.layerPosition)\r\n }\r\n return cItem.partId === feature.partId\r\n });\r\n if (addedCartItem) {\r\n removeFromCart(addedCartItem);\r\n newQuantity = addedCartItem.quantity;\r\n }\r\n if (selectedWizardValues) {\r\n const selected = selectedWizardValues.find(wizVal => {\r\n return wizVal.selectedFeature && wizVal.selectedFeature.dbFeature.id === feature.dbFeature.id\r\n }) || selectedWizardValues.find(wizVal => wizVal.partId === feature.partId); // not sure if we need this || or, but let it be\r\n if (selected && selected.quantity) {\r\n newQuantity = selected.quantity\r\n }\r\n }\r\n const itemsToAdd = getCartItemsArrayFromFeature(feature, newQuantity, qtActiveCategory);\r\n if (wizardSqftCartItems.length) {\r\n const addedCartItems = wizardSqftCartItems.filter(cItem => {\r\n return cItem.cartFeature && cItem.cartFeature.dbFeature.groupName === feature.dbFeature.groupName\r\n });\r\n if (addedCartItems.length) {\r\n const allQuantity = addedCartItems.reduce((total, cItem) => total + cItem.quantity, 0);\r\n // console.log(\"allQuantity\", allQuantity);\r\n if (allQuantity === newQuantity) {\r\n return // do not add this feature to cart, it will be added with all sqft features\r\n }\r\n }\r\n }\r\n addToCart(itemsToAdd);\r\n\r\n if (lookRemovedCartItems.length) {\r\n let newRemovedCartItems = [...lookRemovedCartItems];\r\n itemsToAdd.forEach(cartItem => {\r\n const existingIndex = newRemovedCartItems.findIndex(removedCartItem => {\r\n if (cartItem.cartFeature.metaData.layerPosition) {\r\n return (removedCartItem.partId === cartItem.partId)\r\n && (cartItem.cartFeature.metaData.layerPosition === removedCartItem.cartFeature.metaData.layerPosition)\r\n }\r\n return removedCartItem.partId === cartItem.partId\r\n });\r\n if (existingIndex > -1) {\r\n newRemovedCartItems.splice(existingIndex, 1);\r\n }\r\n });\r\n if (newRemovedCartItems.length !== lookRemovedCartItems.length) {\r\n setLookRemovedCartItems(newRemovedCartItems);\r\n }\r\n }\r\n }\r\n\r\n return children(updateCartItems)\r\n};\r\n\r\nconst mapStateToProps = (store) => {\r\n const {cartItems, lookRemovedCartItems} = store.cartState;\r\n const {qtActiveCategory} = store.qtState;\r\n const {activePreset} = store.bathroomVisualizerState;\r\n const {filterGroups} = store.filterState;\r\n return {\r\n cartItems,\r\n qtActiveCategory,\r\n activePreset,\r\n lookRemovedCartItems,\r\n filterGroups,\r\n }\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n removeFromCart,\r\n addToCart,\r\n setLookActiveCategory,\r\n updateCanvasCount,\r\n setLookRemovedCartItems,\r\n setWizardSqftCartItems,\r\n};\r\n\r\nexport default withRouter(\r\n connect(mapStateToProps, mapDispatchToProps)(WithUpdateCartItems)\r\n)\r\n","import React from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport PropTypes from \"prop-types\";\r\nimport {FormattedMessage} from \"react-intl\";\r\nimport {withRouter} from \"react-router-dom\";\r\n\r\nimport Button from \"@mui/material/Button\";\r\nimport SvgIcon from \"@mui/material/SvgIcon\";\r\n\r\nimport COLOR_THEMES from \"../../../../../colorThemes\";\r\nimport {featureInterface} from \"../../../../../interfaces/featureInterface\";\r\nimport {setLookActiveCategory, setLookMoreInfoOpened, setLookOverlayOpened} from \"../../../../../actions/lookFunctions\";\r\nimport {LOOK_FEATURE_CONTENT, LOOK_OVERLAYS} from \"../../../core/constants\";\r\nimport {updateCanvasCount} from \"../../../../../actions/actionFunctions\";\r\n\r\nimport {Look3DIcon} from \"../../../../common/icons\";\r\nimport {getFeatureIsLocked} from \"../../../../../misc/helpers\";\r\nimport Analytics, {LOOK_JOURNEY_ANALYTIC_EVENTS, PRODUCT_JOURNEY_ANALYTIC_EVENTS} from \"../../../../../analytics\";\r\nimport LookLockedButton from \"../../../lookNavigation/lookMain/lookLockedButton\";\r\nimport {IS_PRODUCT_JOURNEY} from \"../../../../../config\";\r\nimport {categoryIsInTheWizard} from \"../../../lookNavigation/lookMain/lookWizard/lookWizardFunctions\";\r\nimport GroheFeatureWizardButton from \"./groheFeatureWizardButton\";\r\n\r\nconst GroheFeatureTopButtons = (props) => {\r\n\r\n const {lookActiveFeature, setLookMoreInfoOpened, moreInfoOpened, moreInfoContent, activeTheme, setLookOverlayOpened,\r\n isMobile, lookFeature, lookActiveCategory, wizardList, activePreset, wizardActiveItem} = props;\r\n\r\n if (isMobile) {\r\n return null\r\n }\r\n\r\n const feature = lookFeature || lookActiveFeature;\r\n\r\n const featureIsLocked = getFeatureIsLocked(feature);\r\n const threeDDisabled = !feature.dbFeature.lixilQRCode && !Array.isArray(feature.dbFeature.lixilAR3DUrls);\r\n\r\n const threeDButtonClick = () => {\r\n if (featureIsLocked) {\r\n if (IS_PRODUCT_JOURNEY) {\r\n Analytics.sendClickEvent(PRODUCT_JOURNEY_ANALYTIC_EVENTS.productFeatureLocked3DButton);\r\n }\r\n setLookOverlayOpened(LOOK_OVERLAYS.leadCapture);\r\n return false\r\n }\r\n\r\n let moreInfoType = \"\";\r\n if (IS_PRODUCT_JOURNEY) {\r\n Analytics.sendClickEvent(moreInfoOpened ? PRODUCT_JOURNEY_ANALYTIC_EVENTS.productFeature3dAndArClose : PRODUCT_JOURNEY_ANALYTIC_EVENTS.productFeature3dAndArOpen);\r\n moreInfoType = moreInfoOpened && (moreInfoContent === LOOK_FEATURE_CONTENT.threeD) ? \"\" : feature ? \"select\" : \"main\";\r\n } else {\r\n Analytics.sendClickEvent(moreInfoOpened ? LOOK_JOURNEY_ANALYTIC_EVENTS.lookFeature3dAndArClose : LOOK_JOURNEY_ANALYTIC_EVENTS.lookFeature3dAndArOpen);\r\n moreInfoType = moreInfoOpened && (moreInfoContent !== LOOK_FEATURE_CONTENT.info) ? \"\" : lookActiveCategory ? \"select\" : \"main\";\r\n }\r\n //setLookActiveCategory(\"\");\r\n\r\n const contentToOpen = Array.isArray(feature.dbFeature.lixilAR3DUrls)\r\n ? LOOK_FEATURE_CONTENT.threeD\r\n : LOOK_FEATURE_CONTENT.aug\r\n\r\n setLookMoreInfoOpened(moreInfoType, contentToOpen);\r\n };\r\n\r\n const hasWizard = !wizardActiveItem && categoryIsInTheWizard(wizardList, feature.partId, activePreset);\r\n\r\n return (\r\n \r\n \r\n
\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {Array.isArray(requiredFeatures) && requiredFeatures.length\r\n ? \r\n : null}\r\n
\r\n \r\n \r\n {featureIsLocked && !hasWizard ? : null}\r\n
\r\n )\r\n};\r\n\r\nGroheFeatureTopButtons.propTypes = {\r\n lookFeature: PropTypes.shape(featureInterface),\r\n}\r\n\r\nconst mapStateToProps = (store) => {\r\n const {lookActiveFeature, moreInfoOpened, moreInfoContent, lookActiveCategory} = store.lookState;\r\n const {isMobile, activeTheme} = store.serverState;\r\n const {isPhoneNumberValidated} = store.userState; // to update component when user is logged in\r\n const {wizardActiveItem, wizardList} = store.wizardState;\r\n const {activePreset} = store.bathroomVisualizerState;\r\n\r\n return {\r\n lookActiveFeature,\r\n moreInfoOpened,\r\n moreInfoContent,\r\n lookActiveCategory,\r\n isMobile,\r\n activeTheme,\r\n isPhoneNumberValidated,\r\n wizardList,\r\n activePreset,\r\n wizardActiveItem,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n setLookActiveCategory,\r\n setLookMoreInfoOpened,\r\n updateCanvasCount,\r\n setLookOverlayOpened,\r\n};\r\n\r\nexport default withRouter(\r\n connect(mapStateToProps, mapDispatchToProps)(GroheFeatureTopButtons)\r\n)\r\n","import React from 'react';\r\nimport { connect } from \"react-redux\";\r\nimport PropTypes from \"prop-types\";\r\n\r\nimport SvgIcon from \"@mui/material/SvgIcon\";\r\n\r\nimport Analytics, {LOOK_JOURNEY_ANALYTIC_EVENTS, PRODUCT_JOURNEY_ANALYTIC_EVENTS} from \"../../../../analytics\";\r\nimport {LOOK_OVERLAYS} from \"../../core/constants\";\r\nimport {IS_PRODUCT_JOURNEY} from \"../../../../config\";\r\n\r\nimport {setLookOverlayOpened} from \"../../../../actions/lookFunctions\";\r\nimport {GroheLockIcon} from \"../../../common/icons\";\r\n\r\nconst LookLockedButton = (props) => {\r\n\r\n const {setLookOverlayOpened, className} = props;\r\n\r\n const lockedButtonClick = () => {\r\n const analyticsLabel = IS_PRODUCT_JOURNEY\r\n ? PRODUCT_JOURNEY_ANALYTIC_EVENTS.productLockedButton\r\n : LOOK_JOURNEY_ANALYTIC_EVENTS.lookLockedButton;\r\n Analytics.sendClickEvent(analyticsLabel);\r\n\r\n setLookOverlayOpened(LOOK_OVERLAYS.leadCapture);\r\n }\r\n\r\n return (\r\n \r\n \r\n \r\n
\r\n )\r\n};\r\n\r\nLookLockedButton.propTypes = {\r\n className: PropTypes.string,\r\n}\r\n\r\nconst mapStateToProps = () => {\r\n return {};\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n setLookOverlayOpened\r\n};\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(LookLockedButton)\r\n","import React from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport PropTypes from \"prop-types\";\r\nimport {FormattedMessage} from \"react-intl\";\r\nimport {withRouter} from \"react-router-dom\";\r\n\r\nimport Button from \"@mui/material/Button\";\r\nimport AutoFixHighIcon from '@mui/icons-material/AutoFixHigh';\r\n\r\nimport {featureInterface} from \"../../../../../interfaces/featureInterface\";\r\nimport {setLookOverlayOpened} from \"../../../../../actions/lookFunctions\";\r\nimport {LOOK_OVERLAYS} from \"../../../core/constants\";\r\nimport {setCanvasScale} from \"../../../../../actions/actionFunctions\";\r\n\r\nimport {IS_PRODUCT_JOURNEY} from \"../../../../../config\";\r\nimport {setWizardActiveItem} from \"../../../../../actions/wizardFunctions\";\r\nimport {getLookIdUrl} from \"../../../lookNavigation/lookFunctions2\";\r\nimport {ROUTES} from \"../../../../../routes\";\r\nimport {zoomCanvasOut} from \"../../../lookNavigation/lookFunctions\";\r\nimport LookCanvasContext from \"../../../lookCanvasContext\";\r\nimport {getFeatureIsLocked} from \"../../../../../misc/helpers\";\r\n\r\nconst GroheFeatureWizardButton = (props) => {\r\n\r\n const {setLookOverlayOpened, setWizardActiveItem, history, setCanvasScale, feature, hasWizard} = props;\r\n\r\n\r\n const featureIsLocked = getFeatureIsLocked(feature);\r\n const wizardButtonClick = (imageCanvas) => {\r\n if (featureIsLocked) {\r\n setLookOverlayOpened(LOOK_OVERLAYS.leadCapture);\r\n return false\r\n }\r\n setWizardActiveItem(hasWizard);\r\n zoomCanvasOut(imageCanvas, setCanvasScale);\r\n history.push(`${getLookIdUrl(false) + ROUTES.wizard}/${hasWizard.id}`);\r\n };\r\n\r\n return (\r\n \r\n {customImageUrl || uploadedImageUrl ? (\r\n \r\n ) : null}\r\n
\r\n \r\n {wizardItem.name}\r\n
\r\n {wizardItem.description}
\r\n\r\n \r\n \r\n
\r\n )\r\n};\r\n\r\nexport default LookMainFeatureGroupsExpandIcon\r\n","import {connect} from \"react-redux\";\r\nimport {withRouter} from \"react-router-dom\";\r\n\r\nimport {setLookActiveCategory, setLookActiveFeature} from \"../../../actions/lookFunctions\";\r\nimport {getFeatureUrl} from \"../lookNavigation/lookFunctions2\";\r\nimport {getCurrentLayout} from \"../../appLayout\";\r\n\r\nconst WithChangeFeature = (props) => {\r\n\r\n const {history, children, lookActiveCategory, isMobile, setLookActiveCategory} = props;\r\n\r\n const changeFeature = (feature) => {\r\n const layout = getCurrentLayout();\r\n if (isMobile) {\r\n // const closeOnly = zoomFeature && !layout.partIdExistInQtCategory(zoomFeature.partId) && !LOOK_WALLS.includes(zoomFeature.partId);\r\n const closeOnly = feature && !layout.partIdExistInQtCategory(feature.partId);\r\n if (closeOnly) {\r\n history.push(getFeatureUrl(feature, true));\r\n } else {\r\n setLookActiveCategory(\"\");\r\n history.push(getFeatureUrl(feature)); // always go to feature screen on mobile\r\n }\r\n } else {\r\n history.push(getFeatureUrl(feature, !!lookActiveCategory));\r\n }\r\n }\r\n\r\n return children(changeFeature)\r\n};\r\n\r\nconst mapStateToProps = (store) => {\r\n const {lookActiveCategory, lookActiveFeature} = store.lookState;\r\n const {isMobile} = store.serverState;\r\n return {\r\n isMobile,\r\n lookActiveCategory,\r\n lookActiveFeature,\r\n }\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n setLookActiveCategory,\r\n setLookActiveFeature,\r\n};\r\n\r\nexport default withRouter(\r\n connect(mapStateToProps, mapDispatchToProps)(WithChangeFeature)\r\n)\r\n","import React from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport PropTypes from \"prop-types\";\r\n\r\nimport MaterialSpinner from \"../../../../ui/materialSpinner\";\r\nimport LookVirtualizedList from \"./lookVirtualizedList\";\r\nimport GroheVirtualizedList from \"../../../grohe/groheNavigation/groheFeatures/groheVirtualizedList\";\r\nimport {IS_PRODUCT_JOURNEY} from \"../../../../../config\";\r\nimport {getCurrentLayout} from \"../../../../appLayout\";\r\nimport {featureGroupInterface} from \"../../../../../interfaces/featureInterface\";\r\n\r\nconst onScrollHandler = () => null;\r\n\r\nconst LookMainCategoryLoading = (props) => {\r\n\r\n const {lookViewType, contentHeight, isMobile, featureGroup, isWizard} = props;\r\n\r\n const layout = getCurrentLayout();\r\n\r\n const counts = featureGroup.counts ? featureGroup.counts[layout.type] : 0;\r\n\r\n if (counts > 0) {\r\n\r\n const content = IS_PRODUCT_JOURNEY ? (\r\n \r\n
\r\n ) : (\r\n \r\n \r\n
\r\n \r\n {content}\r\n
\r\n )\r\n }\r\n\r\n return (\r\n \r\n
\r\n )\r\n};\r\n\r\nLookMainCategoryLoading.propTypes = {\r\n contentHeight: PropTypes.number,\r\n featureGroup: PropTypes.shape(featureGroupInterface),\r\n}\r\n\r\nconst mapStateToProps = (store) => {\r\n const {lookViewType} = store.lookState;\r\n const {isMobile} = store.serverState;\r\n const {wizardActiveItem} = store.wizardState;\r\n\r\n return {\r\n isMobile,\r\n lookViewType,\r\n isWizard: !!wizardActiveItem\r\n };\r\n};\r\n\r\nexport default connect(mapStateToProps)(LookMainCategoryLoading)\r\n","import React from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport {FormattedMessage, injectIntl} from \"react-intl\";\r\n\r\nimport IconButton from \"@mui/material/IconButton\";\r\nimport SvgIcon from \"@mui/material/SvgIcon\";\r\nimport ListIcon from '@mui/icons-material/List';\r\nimport Badge from \"@mui/material/Badge\";\r\n\r\nimport COLOR_THEMES from \"../../../../../colorThemes\";\r\nimport {GroheGridIcon} from \"../../../../common/icons\";\r\nimport {setGroheFiltersOpened} from \"../../../../../actions/groheFunctions\";\r\nimport {setLookViewType} from \"../../../../../actions/lookFunctions\";\r\nimport LookMainCategory from \"../../../lookNavigation/lookMain/lookCategory/lookMainCategory\";\r\nimport GroheSvgFilterIcon from \"../groheFilters/groheFiltersIcon\";\r\nimport Analytics, {PRODUCT_JOURNEY_ANALYTIC_EVENTS} from \"../../../../../analytics\";\r\nimport {\r\n getCurrentGroups,\r\n getFeatureGroupFromWizardGroup\r\n} from \"../../../lookNavigation/lookMain/lookWizard/lookWizardFunctions\";\r\n\r\nconst GroheFeaturesHeader = (props) => {\r\n\r\n const {lookActiveCategory, filtersOpened, setGroheFiltersOpened, intl, activeTheme, filtersVisible,\r\n lookViewType, setLookViewType, lookOpened, isMobile, selectedFiltersLength} = props;\r\n\r\n const filtersButtonClick = () => {\r\n Analytics.sendClickEvent(PRODUCT_JOURNEY_ANALYTIC_EVENTS.productFiltersOpen);\r\n setGroheFiltersOpened(!filtersOpened);\r\n }\r\n\r\n const viewButtonClick = () => {\r\n const newViewType = lookViewType === 1 ? 2 : 1;\r\n Analytics.sendClickEvent(PRODUCT_JOURNEY_ANALYTIC_EVENTS.productFeaturesListViewType + newViewType);\r\n setLookViewType(newViewType);\r\n }\r\n\r\n if (isMobile) {\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n ) : null}\r\n \r\n \r\n {lookViewType === 1 ? \r\n \r\n \r\n )}\r\n \r\n \r\n
\r\n - 1 ? \" lk-subdesc--list\" : \"\")}>\r\n {pros.map((pros, index) => {\r\n return
- {pros} \r\n })}\r\n
\r\n \r\n
\r\n \r\n
\r\n
\r\n \r\n
\r\n {isMobile ? null : (\r\n \r\n \r\n
\r\n )}\r\n \r\n \r\n {(inputsValidated, updateInputValidations) => registerForm(inputsValidated, updateInputValidations)}\r\n \r\n )\r\n};\r\n\r\nconst mapStateToProps = (store) => {\r\n const {userInfo} = store.userState;\r\n const {isMobile} = store.serverState;\r\n const {settings} = store.fabricatorState;\r\n return {\r\n userInfo,\r\n fabricatorSettings: settings,\r\n isMobile\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n};\r\n\r\nexport default withRouter(\r\n connect(mapStateToProps, mapDispatchToProps)(GroheCartLoginRegister)\r\n)\r\n","import React, {useState, useEffect, useRef} from \"react\";\r\nimport {injectIntl} from \"react-intl\";\r\nimport PropTypes from \"prop-types\";\r\nimport $ from \"jquery\";\r\n\r\nimport TextField from \"@mui/material/TextField\";\r\n\r\nimport {loadScript} from \"../../../misc/loadScript\";\r\nimport Config, {REACT_APP_GOOGLE_API_KEY} from \"../../../config\";\r\nimport {onInputBlur, onInputChange, useInputsValidation} from \"./inputFunctions\";\r\n\r\nconst googleComponentsToOurProperties = {\r\n \"administrative_area_level_1\": \"state\",\r\n \"locality\": \"city\",\r\n \"postal_code\": \"postal\",\r\n}\r\n\r\n\r\nconst LookAddressInput = (props) => {\r\n\r\n const {property, inputValue, setInputValue, intl, errorsObject, changeErrorsObject, getValidationErrors,\r\n inputsValidated, isRequired, shrink, updateInputValidations} = props;\r\n\r\n const [allowRef, setAllowRef] = useState(false);\r\n const autoCompleteRef = useRef(null);\r\n\r\n const onBlur = (event) => {\r\n onInputBlur(event, property, setInputValue, errorsObject, changeErrorsObject, getValidationErrors);\r\n // setTimeout(() => {\r\n // setAllowRef(false); // blur the Mui input, so the google logic is hidden\r\n // }, 0)\r\n };\r\n\r\n const onChange = (event) => {\r\n onInputChange(event, property, setInputValue, errorsObject, changeErrorsObject, getValidationErrors);\r\n };\r\n\r\n useInputsValidation(inputsValidated, onBlur, inputValue);\r\n\r\n useEffect(() => {\r\n return () => {\r\n if (window.google && window.google.maps && window.google.maps.event) {\r\n window.autoComplete = null;\r\n const pacContainer = document.querySelector(\".pac-container\");\r\n if (pacContainer) {\r\n $(pacContainer).remove();\r\n }\r\n }\r\n }\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [])\r\n\r\n const onFocus = () => {\r\n if (!allowRef) {\r\n setAllowRef(true);\r\n setTimeout(() => {\r\n handleScriptLoad();\r\n }, 0)\r\n }\r\n };\r\n\r\n const handlePlaceSelect = async () => {\r\n const addressObject = autoComplete.getPlace();\r\n if (!addressObject) {\r\n return\r\n }\r\n const {formatted_address, address_components} = addressObject;\r\n if (formatted_address) {\r\n onBlur({target: {value: formatted_address}});\r\n }\r\n if (Config.isDevMode()) {\r\n console.log(addressObject);\r\n }\r\n if (!address_components) {\r\n return\r\n }\r\n Object.keys(googleComponentsToOurProperties).forEach(componentKey => { // here we also set another inputs values\r\n const component = address_components.find(component => component.types.includes(componentKey));\r\n if (component) {\r\n setInputValue(googleComponentsToOurProperties[componentKey], component.long_name || component.short_name);\r\n if (componentKey === \"administrative_area_level_1\" && component.short_name) {\r\n setInputValue(\"stateShort\", component.short_name);\r\n } else if (componentKey === \"postal_code\" && updateInputValidations) {\r\n setTimeout(() => {\r\n updateInputValidations(); // after postal data is set\r\n }, 0)\r\n }\r\n }\r\n })\r\n }\r\n\r\n const handleScriptLoad = () => {\r\n if (window.google && window.google.maps && window.google.maps.places) {\r\n window.autoComplete = new window.google.maps.places.Autocomplete(\r\n autoCompleteRef.current,\r\n // { types: [\"(cities)\"], componentRestrictions: { country: \"us\" } }\r\n );\r\n window.autoComplete.setFields([\"address_components\", \"formatted_address\"]);\r\n window.autoComplete.addListener(\"place_changed\", handlePlaceSelect);\r\n }\r\n }\r\n\r\n useEffect(() => {\r\n if (!document.getElementById(\"googleMapsScript\")) {\r\n loadScript(\r\n `https://maps.googleapis.com/maps/api/js?key=${REACT_APP_GOOGLE_API_KEY}&libraries=places&callback=clearTimeout`,\r\n null,\r\n \"googleMapsScript\"\r\n );\r\n }\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, []);\r\n\r\n const errorsExist = errorsObject && Array.isArray(errorsObject[property]) && !!errorsObject[property].length;\r\n\r\n return (\r\n {creditCardIcons[iconName]} ;\r\n\r\nexport default function getCreditCardType(testCard) {\r\n const cardNumber = testCard.replaceAll(/ /g, \"\");\r\n let amex = new RegExp('^3[47][0-9]{13}$');\r\n let visa = new RegExp('^4[0-9]{12}(?:[0-9]{3})?$');\r\n let cup1 = new RegExp('^62[0-9]{14}[0-9]*$');\r\n let cup2 = new RegExp('^81[0-9]{14}[0-9]*$');\r\n\r\n let mastercard = new RegExp('^5[1-5][0-9]{14}$');\r\n let mastercard2 = new RegExp('^2[2-7][0-9]{14}$');\r\n\r\n let disco1 = new RegExp('^6011[0-9]{12}[0-9]*$');\r\n let disco2 = new RegExp('^62[24568][0-9]{13}[0-9]*$');\r\n let disco3 = new RegExp('^6[45][0-9]{14}[0-9]*$');\r\n\r\n let diners = new RegExp('^3[0689][0-9]{12}[0-9]*$');\r\n let jcb = new RegExp('^35[0-9]{14}[0-9]*$');\r\n\r\n\r\n if (visa.test(cardNumber)) {\r\n return {text: \"Visa\", icon: _getSvgCardIcon(\"visa\")};\r\n }\r\n if (amex.test(cardNumber)) {\r\n return {text: \"AmEx\", icon: _getSvgCardIcon(\"amex\")};\r\n }\r\n if (mastercard.test(cardNumber) || mastercard2.test(cardNumber)) {\r\n return {text: \"Mastercard\", icon: _getSvgCardIcon(\"mastercard\")};\r\n }\r\n if (disco1.test(cardNumber) || disco2.test(cardNumber) || disco3.test(cardNumber)) {\r\n return {text: \"Discover\", icon: _getSvgCardIcon(\"discover\")};\r\n }\r\n if (diners.test(cardNumber)) {\r\n return {text: \"Diners\", icon: {creditCardIcons[\"diners\"]} };\r\n }\r\n if (jcb.test(cardNumber)) {\r\n return {text: \"JCB\", icon: _getSvgCardIcon(\"jcb\")};\r\n }\r\n if (cup1.test(cardNumber) || cup2.test(cardNumber)) {\r\n return {text: \"Union Pay\", icon: _getSvgCardIcon(\"unionPay\")};\r\n }\r\n return {text: \"\", icon: \r\n {(paymentSubmit) => {\r\n\r\n const cartCheckoutClick = async () => {\r\n Analytics.sendClickEvent(PRODUCT_JOURNEY_ANALYTIC_EVENTS.cartCheckoutLogin);\r\n if (!userIsLoggedIn) {\r\n history.push(isMobile ? ROUTES.cartRegister : ROUTES.cartLogin);\r\n return;\r\n }\r\n if (fabricatorSettings.useShipping && !isDeliveryPage) {\r\n history.push(ROUTES.cartDelivery);\r\n return;\r\n }\r\n loaderEnable();\r\n const savedSuccess = await saveQuote({\r\n submit: true,\r\n fromCheckOutPage: true,\r\n showReceipt: false\r\n });\r\n if (savedSuccess) {\r\n document.kvConfig.jobId = savedSuccess.jobId;\r\n }\r\n const {currency, value, items, tax, shipping} = getAnalyticsEcommerceValues();\r\n if (fabricatorSettings.hasPaymentGateway) {\r\n const paymentResponse = await paymentSubmit();\r\n console.log(\"paymentResponse\", paymentResponse);\r\n Analytics.sendEcommerceEvent(\"purchase\", {currency, value, items,\r\n coupon: \"\", // \"SUMMER_FUN\" // we are not using that\r\n tax,\r\n shipping,\r\n transaction_id: paymentResponse && paymentResponse.transactionResponse && paymentResponse.transactionResponse.transId\r\n ? paymentResponse.transactionResponse.transId : \"NO_TRANSACTION_ID\" ,\r\n });\r\n loaderDisable();\r\n if (!paymentResponse || !paymentResponse.transactionResponse || paymentResponse.transactionResponse.responseCode !== '1') {\r\n return false\r\n }\r\n } else {\r\n Analytics.sendEcommerceEvent(\"purchase\", {currency, value, items,\r\n coupon: \"\", // \"SUMMER_FUN\" // we are not using that\r\n tax,\r\n shipping,\r\n transaction_id: \"NO_PAYMENT_GATEWAY_SET\",\r\n });\r\n }\r\n loaderDisable();\r\n if (savedSuccess) {\r\n history.push(ROUTES.cartSuccess);\r\n }\r\n }\r\n\r\n return (\r\n \r\n )\r\n }}\r\n \r\n )\r\n\r\n };\r\n\r\n const mapStateToProps = (store) => {\r\n const {isMobile} = store.serverState;\r\n const {userIsLoggedIn} = store.userState;\r\n const {settings} = store.fabricatorState;\r\n\r\n return {\r\n isMobile,\r\n userIsLoggedIn,\r\n fabricatorSettings: settings,\r\n };\r\n };\r\n\r\n const mapDispatchToProps = {};\r\n\r\n return withRouter(\r\n connect(mapStateToProps, mapDispatchToProps)(WithCartCheckoutClick)\r\n )\r\n}\r\n","import React from \"react\";\r\nimport trim from \"lodash/trim\";\r\nimport PropTypes from \"prop-types\";\r\n\r\nimport FormGroup from \"@mui/material/FormGroup\";\r\n\r\nimport LookInput from \"../../../ui/lookInput\";\r\nimport Misc from \"../../../../../misc/misc\";\r\nimport LookAddressInput from \"../../../ui/lookAddressInput\";\r\nimport WithInputValidations from \"../../../hocs/withInputValidations\";\r\n\r\n\r\nconst GroheBillingAndShippingInputs = (props) => {\r\n\r\n const {addressObject, setAddressInfo, setAddressErrors, addressErrors} = props;\r\n\r\n const shippingInputChange = (property, value) => {\r\n setAddressInfo(property, value);\r\n }\r\n\r\n const getValidationErrors = (property, checkValue) => {\r\n const currentValue = trim(checkValue);\r\n const errors = [];\r\n\r\n switch (property) {\r\n case \"address1\": {\r\n if (!currentValue) {\r\n errors.push(\"look.inputs.errors.noAddress\");\r\n return errors\r\n }\r\n break;\r\n }\r\n case \"postal\": {\r\n if (!currentValue) {\r\n errors.push(\"look.inputs.errors.missingPostal\");\r\n return errors\r\n }\r\n if (!Misc.isZip(currentValue)) {\r\n errors.push(\"look.inputs.errors.incorrectPostal\");\r\n return errors\r\n }\r\n break;\r\n }\r\n }\r\n return errors\r\n }\r\n\r\n return (\r\n \r\n {(inputsValidated, updateInputValidations) => (\r\n \r\n {Object.keys(addressObject).map(inputKey => {\r\n if (inputKey === \"stateShort\") {\r\n return null\r\n }\r\n if (inputKey === \"address1\") {\r\n return (\r\n \r\n )}\r\n \r\n )\r\n};\r\n\r\nGroheBillingAndShippingInputs.propTypes = {\r\n addressObject: PropTypes.object.isRequired,\r\n setAddressInfo: PropTypes.func.isRequired,\r\n addressErrors: PropTypes.object,\r\n setAddressErrors: PropTypes.func,\r\n}\r\n\r\nexport default GroheBillingAndShippingInputs\r\n","import React from \"react\";\r\nimport {FormattedMessage, injectIntl} from \"react-intl\";\r\nimport PropTypes from \"prop-types\";\r\n\r\nimport OutlinedInput from \"@mui/material/OutlinedInput\";\r\nimport TextField from \"@mui/material/TextField\";\r\nimport InputAdornment from \"@mui/material/InputAdornment\";\r\nimport FormControl from \"@mui/material/FormControl\";\r\nimport InputLabel from \"@mui/material/InputLabel\";\r\nimport FormHelperText from \"@mui/material/FormHelperText\";\r\nimport getCreditCardType from \"../grohe/groheCart/getCreditCardType\";\r\nimport {onInputBlur, onInputChange, useInputsValidation} from \"./inputFunctions\";\r\n\r\n\r\nconst LookInput = (props) => {\r\n\r\n const {property, inputValue, setInputValue, intl, errorsObject, changeErrorsObject, getValidationErrors,\r\n inputsValidated, isRequired} = props;\r\n\r\n const onBlur = (event) => {\r\n onInputBlur(event, property, setInputValue, errorsObject, changeErrorsObject, getValidationErrors);\r\n };\r\n\r\n const onChange = (event) => {\r\n onInputChange(event, property, setInputValue, errorsObject, changeErrorsObject, getValidationErrors);\r\n };\r\n\r\n useInputsValidation(inputsValidated, onBlur, inputValue);\r\n\r\n const errorsExist = errorsObject && Array.isArray(errorsObject[property]) && !!errorsObject[property].length;\r\n\r\n const type = property !== \"email\" && property !== \"password\" ? \"text\" : property;\r\n\r\n if (property === \"cardNumber\") {\r\n return (\r\n \r\n // \r\n // \r\n // \r\n // )\r\n};\r\n\r\nconst mapStateToProps = (store) => {\r\n const {lookOpened, lookActiveCategory, lookActiveFeature, lookPageOpened} = store.lookState;\r\n const {activePreset, bvPresets, loadedPresets} = store.bathroomVisualizerState;\r\n // const {activePreset, bvPresets, canvasScale} = store.bathroomVisualizerState;\r\n const {visualizersLoaded} = store.serverState;\r\n const {wizardActiveItem} = store.wizardState;\r\n return {\r\n lookOpened,\r\n lookActiveCategory,\r\n lookActiveFeature,\r\n lookPageOpened,\r\n activePreset,\r\n loadedPresets,\r\n bvPresets,\r\n // canvasScale,\r\n visualizersLoadedLength: visualizersLoaded.length,\r\n wizardActiveItem,\r\n };\r\n};\r\n\r\nLookRouting.propTypes = {\r\n zoomToFeatureGroup: PropTypes.func,\r\n imageCanvas: PropTypes.object,\r\n}\r\n\r\nconst mapDispatchToProps = {\r\n setLookOpened,\r\n setLookActiveFeature,\r\n setLookActiveCategory,\r\n setLookPageOpened,\r\n updateCanvasCount,\r\n // setCanvasScale,\r\n};\r\n\r\nexport default withRouter(\r\n connect(mapStateToProps, mapDispatchToProps)(LookRouting)\r\n)\r\n","import {capitalizeFirstLetters} from \"../../misc/helpers\";\r\n\r\nconst allAvailableSubCategories = [\r\n \"Value\",\r\n \"Accessory Kits\",\r\n \"Bar Centerset Faucets\",\r\n \"Bar Faucets\",\r\n \"Bath Shower Trim Kits\",\r\n \"Bathroom Accessory Parts\",\r\n \"Bathroom Faucet Fittings and Spare Parts\",\r\n \"Bathroom Faucet Handles & Components\",\r\n \"Bathroom Lighting\",\r\n \"Bidet Toilet Faucets\",\r\n \"Centerset Faucets\",\r\n \"Commercial Bathroom Faucets\",\r\n \"Commercial Components\",\r\n \"Commercial Fittings Parts\",\r\n \"Commercial Spare Parts\",\r\n \"Diverter Valves & Trims\",\r\n \"Elongated Toilet Seats\",\r\n \"Floor Mounted Tub Fillers\",\r\n \"Grab Bars\",\r\n \"GROHE Blue Accessories\",\r\n \"Hand Showers & Accessories\",\r\n \"Manual Flush Valves\",\r\n \"Other Bathroom Fittings and Parts\",\r\n \"Other Commercial Parts\",\r\n \"Other Kitchen Accessories\",\r\n \"Pot Fillers\",\r\n \"Pressure Balance Valves & Trims\",\r\n \"Rain Shower Heads\",\r\n \"Robe Hooks\",\r\n \"Roman Tub Faucets\",\r\n \"Rough In Valves\",\r\n \"Rough Valve Spare Parts\",\r\n \"Sense & Guard Water Security\",\r\n \"Shower Body Sprays\",\r\n \"Shower Bundle 1June\",\r\n \"Shower Heads\",\r\n \"Shower System Parts\",\r\n \"Shower System Spare Parts\",\r\n \"Shower Systems\",\r\n \"Shower Systems & Retro-Fit\",\r\n \"Shower Trim Kits Parts\",\r\n \"Single Hole Faucets\",\r\n \"Single Hole Pull Down Faucets\",\r\n \"Single Hole Pull Out Faucets\",\r\n \"Single Hole Semi Pro Faucets\",\r\n \"Soap Dishes & Holders\",\r\n \"Soap Dispensers\",\r\n \"Thermostatic Valves & Trims\",\r\n \"Toilet Brush\",\r\n \"Toilet Paper Holders\",\r\n \"Toilet Parts\",\r\n \"Toilets & Components\",\r\n \"Towel Bars\",\r\n \"Towel Rings\",\r\n \"Trim Kit Fittings and Parts\",\r\n \"Tub Fillers\",\r\n \"Undermount Sinks\",\r\n \"Vessel Faucets\",\r\n \"Wall Carrier Flush Valves\",\r\n \"Wall Hung Sinks\",\r\n \"Wall Mounted Bathroom Faucet\",\r\n \"Wall Plate Components\",\r\n \"Wall Plates\",\r\n \"Widespread Faucets\"\r\n]\r\n\r\nconst allAvailableCategories = [\r\n \"Bathroom Accessories\",\r\n \"Bathroom Sink Faucets\",\r\n \"Bathroom Sinks\",\r\n \"Bathtub Faucets\",\r\n \"Kitchen Faucets\",\r\n \"Showers\",\r\n \"Toilets\",\r\n \"Wall Carriers\"\r\n]\r\n\r\nexport const getPartIdFromLixilCategoryName = (categoryName) => {\r\n if (!categoryName) {\r\n return \"\"\r\n }\r\n categoryName = categoryName.replace(/-/gi, \" \").replace(/list/gi, \"\"); // Single-Hole-Faucets || Single-Hole-Faucets-list -> Single Hole Faucets\r\n let parsedCatName = capitalizeFirstLetters(decodeURIComponent(categoryName)).trim();\r\n if (!allAvailableSubCategories.includes(parsedCatName) && !allAvailableCategories.includes(parsedCatName)) {\r\n return \"\"\r\n }\r\n switch (parsedCatName) {\r\n // CATEGORIES\r\n case \"Bathroom Accessories\":\r\n return \"paper_holder\"\r\n case \"Bathtub Faucets\":\r\n return \"bathtub_fixture\"\r\n case \"Bathroom Sinks\":\r\n return \"vanity_sink\"\r\n case \"Bathroom Sink Faucets\":\r\n case \"Kitchen Faucets\":\r\n return \"vanity_faucet\"\r\n case \"Showers\":\r\n return \"shower_fixture\"\r\n case \"Toilets\":\r\n return \"toilet\"\r\n case \"Wall Carriers\":\r\n return \"left_wall\"\r\n // SUB CATEGORIES\r\n case \"Single Hole Faucets\":\r\n case \"Single Hole Pull Down Faucets\":\r\n case \"Single Hole Pull Out Faucets\":\r\n case \"Single Hole Semi Pro Faucets\":\r\n case \"Centerset Faucets\":\r\n case \"Commercial Bathroom Faucets\":\r\n case \"Bar Centerset Faucets\":\r\n case \"Bar Faucets\":\r\n case \"Bathroom Faucet Fittings and Spare Parts\":\r\n case \"Bathroom Faucet Handles & Components\":\r\n case \"Vessel Faucets\":\r\n case \"Widespread Faucets\":\r\n return \"vanity_faucet\"\r\n case \"Wall Mounted Bathroom Faucet\":\r\n case \"Roman Tub Faucets\":\r\n return \"bathtub_fixture\"\r\n case \"Bath Shower Trim Kits\":\r\n case \"Trim Kit Fittings and Parts\":\r\n return \"trim_kits\"\r\n case \"Grab Bars\":\r\n return \"grab_bar\"\r\n case \"Robe Hooks\":\r\n return \"robe_hook\"\r\n case \"Rain Shower Heads\":\r\n return \"shower_head\"\r\n case \"Shower Bundle 1June\":\r\n case \"Shower Body Sprays\":\r\n case \"Shower Heads\":\r\n case \"Shower System Parts\":\r\n case \"Shower System Spare Parts\":\r\n case \"Shower Systems\":\r\n case \"Shower Systems & Retro-Fit\":\r\n case \"Shower Trim Kits Parts\":\r\n return \"shower_fixture\"\r\n case \"Soap Dishes & Holders\":\r\n case \"Soap Dispensers\":\r\n return \"soap_dish\"\r\n case \"Toilet Brush\":\r\n return \"toilet_brush\"\r\n case \"Toilet Paper Holder\":\r\n return \"paper_holder\"\r\n case \"Toilet Parts\":\r\n case \"Toilet Paper Holders\":\r\n case \"Toilets & Components\":\r\n return \"toilet\"\r\n case \"Towel Bars\":\r\n return \"towel_bar\"\r\n case \"Towel Rings\":\r\n return \"towel_ring\"\r\n case \"Undermount Sinks\":\r\n case \"Wall Hung Sinks\":\r\n return \"vanity_sink\"\r\n default:\r\n return \"\"\r\n }\r\n}\r\n","import React, {useState, useReducer, useRef, useEffect} from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport {withRouter} from \"react-router-dom\";\r\nimport uuid from 'uuid';\r\nimport PropTypes from \"prop-types\";\r\n\r\nimport {getCurrentLayout} from \"../../../../appLayout\";\r\nimport ImageCanvasCommonNew from \"../../../../visComponents/imageCanvasCommonNew\";\r\nimport {getCurrentGroups, getFilteredLayersForActiveWizard, getWizardStepCommonCoords} from \"./lookWizardFunctions\";\r\nimport {getLayerCenter, zoomCanvasOut} from \"../../lookFunctions\";\r\nimport {setCanvasScale} from \"../../../../../actions/actionFunctions\";\r\n\r\n\r\nconst LookWizardContentCanvas = (props) => {\r\n\r\n const {wizardActiveItem, wizardActiveStep, wizardSelectedValues, setCanvasScale} = props;\r\n const [, setShowCanvasLoader] = useState(false);\r\n const [, forceUpdate] = useReducer(x => x + 1, 0);\r\n const [transform, setTransform] = useState(\"\");\r\n const [canvasLoaded, setCanvasLoaded] = useState(false);\r\n\r\n const imageCanvas = useRef();\r\n\r\n const updateLookCanvas = () => {\r\n forceUpdate(1)\r\n }\r\n\r\n const lookCanvasClick = () => {\r\n\r\n }\r\n\r\n useEffect(() => {\r\n let currentGroups = getCurrentGroups(wizardActiveItem, wizardActiveStep, wizardSelectedValues);\r\n if (!currentGroups.length) {\r\n currentGroups = getCurrentGroups(wizardActiveItem, 0, wizardSelectedValues)\r\n || wizardActiveItem.wizardGroups.filter(wizGroup => wizGroup.nodeType === \"group\");\r\n }\r\n // console.log(\"currentGroups\", currentGroups);\r\n const commonCoords = getWizardStepCommonCoords(currentGroups);\r\n // console.log(\"getWizardStepCommonCoords\", commonCoords);\r\n if (commonCoords && imageCanvas && imageCanvas.current && imageCanvas.current.canvas) {\r\n const center = getLayerCenter(commonCoords, imageCanvas.current.canvas, false);\r\n // console.log(\"center\", center);\r\n if (center) {\r\n const xMargin = center.clientWidth === center.x || center.x < 50 ? 18 : 10; // this is for very right wizards (LX-859 framing shower issue)\r\n setTransform(`scale(1) translate(${-center.featureX + xMargin}%, ${-center.y + 80}px)`)\r\n }\r\n } else {\r\n setTransform(\"scale(0.4) translate(0)\");\r\n }\r\n if (wizardActiveStep > -1 && !currentGroups.length) {\r\n zoomCanvasOut(imageCanvas, setCanvasScale);\r\n }\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [wizardActiveStep])\r\n\r\n useEffect(() => {\r\n setTimeout(() => {\r\n setCanvasLoaded(true)\r\n }, 300)\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [])\r\n\r\n const layout = getCurrentLayout();\r\n let layers = layout.getLayers(false);\r\n if (wizardActiveItem && wizardActiveItem.hideItems) {\r\n layers = getFilteredLayersForActiveWizard(wizardActiveItem, wizardSelectedValues, layers);\r\n }\r\n const layoutType = layout.getCurrentLayoutName();\r\n\r\n return (\r\n
\r\n \r\n {registerForm(inputsValidated, updateInputValidations)}\r\n \r\n
\r\n )\r\n }}\r\n \r\n )\r\n }\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n )\r\n}\r\n\r\nLookAddressInput.propTypes = {\r\n property: PropTypes.string.isRequired,\r\n setInputValue: PropTypes.func.isRequired,\r\n isRequired: PropTypes.bool,\r\n // validation below\r\n inputsValidated: PropTypes.bool,\r\n errorsObject: PropTypes.object, // userInfoErrorsLike\r\n changeErrorsObject: PropTypes.func,\r\n getValidationErrors: PropTypes.func,\r\n updateInputValidations: PropTypes.func,\r\n};\r\n\r\nexport default injectIntl(LookAddressInput)\r\n","import React from \"react\";\r\nimport CreditCardIcon from \"@mui/icons-material/CreditCard\";\r\nimport SvgIcon from \"@mui/material/SvgIcon\";\r\n\r\nimport creditCardIcons from \"../../../common/creditCardIcons\";\r\nimport {COLORS} from \"../../../../colorThemes\";\r\n\r\nconst _getSvgCardIcon = (iconName) => \r\n {quotes.map((quote, quoteIndex) => {\r\n\r\n const cartItemsList = cartItems\r\n .filter(cItem => IS_PRODUCT_JOURNEY\r\n ? cItem.addedBy === CART_ITEM_ADDED_BY.user && !cItem.relatedProductParent\r\n : !cItem.relatedProductParent)\r\n .sort((a, b) => featureIsBundle(a.cartFeature, cartItems) - featureIsBundle(b.cartFeature, cartItems))\r\n\r\n if (!cartItemsList.length) {\r\n // if (!cartItems.length || (Object.keys(quotesList).every(quoteIndex => !quotesList[quoteIndex].length))) {\r\n return (\r\n
\r\n )\r\n};\r\n\r\nconst mapStateToProps = (store) => {\r\n const {quotes, activeQuoteIndex} = store.quotesState;\r\n const {cartItems} = store.cartState;\r\n const fabricatorData = store.fabricatorState;\r\n\r\n return {\r\n quotes,\r\n activeQuoteIndex,\r\n cartItems,\r\n fabricatorData,\r\n };\r\n};\r\n\r\nexport default injectIntl(\r\n connect(mapStateToProps)(GroheCartContent)\r\n)\r\n","import React from \"react\";\r\nimport {connect} from \"react-redux\";\r\nimport {withRouter} from \"react-router-dom\";\r\n\r\nimport Analytics, {PRODUCT_JOURNEY_ANALYTIC_EVENTS} from \"../../../analytics\";\r\nimport {loaderDisable, loaderEnable} from \"../../ui/loaderView\";\r\nimport {ROUTES} from \"../../../routes\";\r\nimport {saveQuote} from \"../../../api/server-api\";\r\nimport WithPaymentSubmit from \"./withPaymentSubmit\";\r\nimport {getAnalyticsEcommerceValues} from \"../../../analyticsEcommerceParams\";\r\n\r\nexport default (WrappedComponent) => {\r\n\r\n const WithCartCheckoutClick = (props) => {\r\n\r\n const {history, location, userIsLoggedIn, isMobile, fabricatorSettings} = props;\r\n\r\n const isDeliveryPage = !!(location && location.pathname && location.pathname.includes(ROUTES.cartDelivery));\r\n\r\n return (\r\n \r\n \r\n
\r\n
\r\n )\r\n }\r\n\r\n return (\r\n \r\n \r\n
\r\n \r\n
\r\n )\r\n })}\r\n \r\n {getRoomName(quoteIndex, cartItems, quotes, intl.messages, intl.locale, fabricatorData)}\r\n
\r\n- \r\n {cartItemsList.map(cartItem => {\r\n return
\r\n
\r\n )\r\n }\r\n return (\r\n \r\n
\r\n )\r\n })}\r\n \r\n \r\n \r\n \r\n \r\n {getCreditCardType(inputValue).icon}\r\n \r\n ) : null}\r\n label={intl.formatMessage({id: \"look.inputs.\" + property})}\r\n onChange={onChange}\r\n onBlur={onBlur}\r\n error={errorsExist}\r\n variant=\"outlined\" />\r\n {errorsExist ? (\r\n \r\n \r\n \r\n ) : null}\r\n \r\n
\r\n )\r\n }\r\n\r\n return (\r\n \r\n
\r\n )\r\n};\r\n\r\nLookInput.propTypes = {\r\n property: PropTypes.string.isRequired,\r\n setInputValue: PropTypes.func.isRequired,\r\n isRequired: PropTypes.bool,\r\n // validation below\r\n inputsValidated: PropTypes.bool,\r\n errorsObject: PropTypes.object, // userInfoErrorsLike\r\n changeErrorsObject: PropTypes.func,\r\n getValidationErrors: PropTypes.func,\r\n};\r\n\r\nexport default injectIntl(LookInput)\r\n","import {useEffect} from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport PropTypes from \"prop-types\";\r\n// import {Route, Switch, withRouter} from \"react-router-dom\";\r\nimport {useLocation, withRouter} from \"react-router-dom\";\r\n\r\nimport {\r\n setLookActiveCategory,\r\n setLookActiveFeature,\r\n setLookOpened,\r\n setLookPageOpened\r\n} from \"../../actions/lookFunctions\";\r\n// import LookRoutingURLParse from \"./lookRoutingURLParse\";\r\n// import {ROUTES} from \"../../routes\";\r\nimport {getParsedLookUrl, navFeatureCLick} from \"./lookNavigation/lookFunctions\";\r\nimport {updateCanvasCount} from \"../../actions/actionFunctions\";\r\nimport {getCurrentLayout} from \"../appLayout\";\r\nimport {LOOK_OPENED_TYPES} from \"./core/constants\";\r\nimport {ROUTES} from \"../../routes\";\r\nimport {getPartIdFromLixilCategoryName} from \"./lookLixilCategories\";\r\nimport {getDefaultPresetByLook} from \"./lookNavigation/lookFunctions2\";\r\nimport {\r\n applyNewPreset,\r\n clickOnSimilarFeatures,\r\n getApplyToLogic,\r\n getShowMatchRadio\r\n} from \"./lookNavigation/lookNavigationFunctions\";\r\nimport {getFeatureIsLocked} from \"../../misc/helpers\";\r\nimport {loaderDisable, loaderEnable} from \"../ui/loaderView\";\r\nimport {getFeatureFromTheBackendBySku} from \"../../api/look-api\";\r\nimport {IS_PRODUCT_JOURNEY} from \"../../config\";\r\n\r\nlet skusRequested = [];\r\nlet firstTimeLoaded = false;\r\n\r\n/**\r\n * this class reacts to all route changes and dispatching changes to redux\r\n **/\r\nconst LookRouting = (props) => {\r\n\r\n const {activePreset, bvPresets, setLookOpened, lookOpened, lookActiveFeature, setLookActiveFeature,\r\n setLookActiveCategory, lookActiveCategory, lookPageOpened, setLookPageOpened, wizardActiveItem,\r\n visualizersLoadedLength, updateCanvasCount, loadedPresets} = props;\r\n // visualizersLoadedLength, imageCanvas, canvasScale, setCanvasScale} = props;\r\n\r\n let location = useLocation();\r\n let timeOut = 0;\r\n\r\n const lookHistoryListener = async () => {\r\n // console.log(\"location\", location);\r\n if (location && location.pathname) {\r\n\r\n if (location.pathname === \"/\") {\r\n if (lookOpened) {\r\n setLookOpened(null);\r\n }\r\n if (lookActiveFeature) {\r\n setLookActiveFeature(null);\r\n }\r\n if (lookActiveCategory) {\r\n setLookActiveCategory(\"\");\r\n }\r\n if (lookPageOpened) {\r\n setLookPageOpened(\"\");\r\n }\r\n // revertFeatureBeforeChange(updateCanvasCount);\r\n // if (canvasScale > 1) {\r\n // zoomCanvasOut(imageCanvas, setCanvasScale);\r\n // }\r\n return\r\n }\r\n\r\n const layout = getCurrentLayout();\r\n let {lookIdFromUrl, featureGroupFromUrl, skuFromUrl} = getParsedLookUrl(location.pathname);\r\n\r\n // console.log(\"lookIdFromUrl, featureGroupFromUrl, skuFromUrl\", lookIdFromUrl, featureGroupFromUrl, skuFromUrl);\r\n\r\n let categorySet = false;\r\n let featureSet = false;\r\n let layoutChanged = false;\r\n\r\n if (visualizersLoadedLength && lookIdFromUrl) {\r\n const preset = getDefaultPresetByLook(bvPresets, lookIdFromUrl);\r\n const activePresetState = bvPresets.find(preset => preset.id === activePreset);\r\n if (preset && preset.id && (preset.id !== activePreset) && activePresetState && (activePresetState.lookId !== lookIdFromUrl)) {\r\n // && (presetIdFromUrl !== activePreset)\r\n // && bvPresets[presetIdFromUrl - 1]\r\n // && (bvPresets[presetIdFromUrl - 1].id !== layout.id)\r\n layoutChanged = true;\r\n await applyNewPreset(preset, loadedPresets);\r\n }\r\n }\r\n if (skuFromUrl && !wizardActiveItem) {\r\n const featureGroupPartId = featureGroupFromUrl ? featureGroupFromUrl.replace(/-/gi, \"_\") : \"\"\r\n let featureFound = lookActiveFeature && (lookActiveFeature.dbFeature.sku === skuFromUrl\r\n || lookActiveFeature.dbFeature.sharedFeatureName === skuFromUrl)\r\n ? lookActiveFeature\r\n : layout.getFeatureBySku(skuFromUrl, featureGroupPartId)\r\n || layout.getFeatureBySku(skuFromUrl, featureGroupPartId, false, true);\r\n if (!featureFound && !skusRequested.includes(skuFromUrl)\r\n && (featureGroupFromUrl || !layout.getFeatureGroupByPartId(skuFromUrl.replace(/-/gi, \"_\")))) {\r\n if (!visualizersLoadedLength) {\r\n loaderEnable();\r\n }\r\n featureFound = await getFeatureFromTheBackendBySku(skuFromUrl, featureGroupFromUrl);\r\n if (!visualizersLoadedLength) {\r\n loaderDisable();\r\n }\r\n }\r\n if (featureFound) {\r\n featureSet = featureFound;\r\n if (!firstTimeLoaded && getFeatureIsLocked(featureSet)) {\r\n firstTimeLoaded = true;\r\n featureSet.dbFeature.unlocked = true;\r\n for (let i = 0; i < layout.allDbFeatures.length; i++) {\r\n if (layout.allDbFeatures[i].sharedFeatureName === featureSet.dbFeature.sharedFeatureName) {\r\n layout.allDbFeatures[i].unlocked = true;\r\n }\r\n }\r\n }\r\n if (!lookActiveFeature || (lookActiveFeature.dbFeature.sharedFeatureName !== featureFound.dbFeature.sharedFeatureName)) {\r\n setLookActiveFeature(featureFound);\r\n }\r\n if (IS_PRODUCT_JOURNEY) {\r\n if (featureGroupFromUrl) {\r\n setLookActiveCategory(featureFound.partId);\r\n categorySet = true;\r\n }\r\n } else {\r\n setLookActiveCategory(featureFound.partId);\r\n categorySet = true;\r\n }\r\n if (!lookOpened) {\r\n setLookOpened(LOOK_OPENED_TYPES.featureZoom);\r\n }\r\n }\r\n }\r\n if ((featureGroupFromUrl || skuFromUrl) && !categorySet) {\r\n if (!featureGroupFromUrl) {\r\n featureGroupFromUrl = getPartIdFromLixilCategoryName(skuFromUrl);\r\n if (featureGroupFromUrl) {\r\n const featureGroupFound = layout.getFeatureGroupByPartId(featureGroupFromUrl);\r\n if (!featureSet && featureGroupFound && featureGroupFound.activeFeature) {\r\n featureSet = featureGroupFound.activeFeature;\r\n setLookActiveFeature(featureGroupFound.activeFeature);\r\n }\r\n } else if (!IS_PRODUCT_JOURNEY) {\r\n const featureGroupFound = layout.getFeatureGroupByPartId(skuFromUrl.replace(\"-\", \"_\"));\r\n if (featureGroupFound) {\r\n setLookActiveCategory(featureGroupFound.partId);\r\n if (!lookOpened) {\r\n setLookOpened(LOOK_OPENED_TYPES.featureZoom);\r\n }\r\n // categorySet = true;\r\n }\r\n }\r\n // console.log(\"featureGroupFromUrl\", featureGroupFromUrl);\r\n }\r\n if (featureGroupFromUrl && !wizardActiveItem) {\r\n let featureGroupFound = layout.getFeatureGroupByPartId(featureGroupFromUrl)\r\n || layout.getFeatureGroupByPartId(getPartIdFromLixilCategoryName(featureGroupFromUrl));\r\n if (!featureSet && featureGroupFound && featureGroupFound.activeFeature) {\r\n featureSet = featureGroupFound.activeFeature;\r\n setLookActiveFeature(featureGroupFound.activeFeature);\r\n }\r\n if (!lookOpened) {\r\n setLookOpened(LOOK_OPENED_TYPES.featureZoom);\r\n }\r\n if (featureGroupFound && featureGroupFound.partId !== lookActiveCategory) {\r\n setLookActiveCategory(featureGroupFound.partId);\r\n }\r\n } else if (IS_PRODUCT_JOURNEY && lookActiveCategory) {\r\n setLookActiveCategory(\"\");\r\n }\r\n } else {\r\n if (layoutChanged && lookOpened) {\r\n if (!featureGroupFromUrl) {\r\n setLookOpened(null);\r\n // revertFeatureBeforeChange(updateCanvasCount);\r\n }\r\n }\r\n if (lookActiveFeature && !skuFromUrl) {\r\n setLookActiveFeature(null);\r\n }\r\n if (IS_PRODUCT_JOURNEY) {\r\n if (lookActiveCategory && !featureGroupFromUrl) {\r\n setLookActiveCategory(\"\");\r\n }\r\n } else {\r\n if (lookPageOpened && Object.values(ROUTES).every(route => location.pathname !== route)) {\r\n setLookPageOpened(\"\");\r\n }\r\n }\r\n\r\n // if (!skuFromUrl && !lookActiveCategory && !lookPageOpened\r\n // && Object.values(ROUTES).every(route => location.pathname !== route)\r\n // ) {\r\n // if (IS_PRODUCT_JOURNEY) {\r\n // setLookPageOpened(ROUTES.category)\r\n // }\r\n // }\r\n if (IS_PRODUCT_JOURNEY) {\r\n if (!skuFromUrl && !lookActiveCategory && !lookOpened && [ROUTES.view, ROUTES.rooms].some(route => location.pathname === route)) {\r\n setLookOpened(true);\r\n }\r\n if (lookPageOpened && [ROUTES.view, ROUTES.rooms].some(route => location.pathname === route)) {\r\n setLookOpened(true);\r\n }\r\n }\r\n }\r\n // console.log(\"featureSet\", featureSet);\r\n if (featureSet && !getFeatureIsLocked(featureSet)) {\r\n const parent = featureSet.getParent();\r\n if (!IS_PRODUCT_JOURNEY || (!parent.activeFeature\r\n || (parent.activeFeature.dbFeature.sharedFeatureName !== featureSet.dbFeature.sharedFeatureName))) {\r\n console.log(\"featureSet from URL\", featureSet);\r\n const useAllWallsApplyLogic = getShowMatchRadio(featureSet);\r\n if (useAllWallsApplyLogic) { // before nav feature click\r\n const applyToLogic = getApplyToLogic(featureSet);\r\n if (applyToLogic && Array.isArray(applyToLogic.currentApplyToArray) && applyToLogic.currentApplyToArray.length) {\r\n await clickOnSimilarFeatures(featureSet, applyToLogic, true);\r\n }\r\n }\r\n navFeatureCLick(featureSet, false, true); // set feature on load\r\n updateCanvasCount();\r\n if (!parent.featureBeforeChange) {\r\n parent.featureBeforeChange = featureSet;\r\n }\r\n // if (canvasScale > 1) {\r\n // zoomCanvasOut(imageCanvas, setCanvasScale);\r\n // }\r\n // zoomToFeatureGroup(featureSet.partId, featureSet, null, false);\r\n }\r\n }\r\n if (!firstTimeLoaded) {\r\n firstTimeLoaded = true;\r\n }\r\n }\r\n };\r\n\r\n const updateLocationLogic = () => {\r\n clearTimeout(timeOut);\r\n timeOut = setTimeout(lookHistoryListener, 0);\r\n };\r\n\r\n useEffect(() => {\r\n updateLocationLogic();\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [location.pathname]);\r\n\r\n return null\r\n\r\n // return (\r\n // \r\n
\r\n )\r\n};\r\n\r\nLookWizardContentCanvas.propTypes = {\r\n imageCanvas: PropTypes.oneOfType([\r\n PropTypes.func,\r\n PropTypes.shape({ current: PropTypes.any })\r\n ]),\r\n}\r\n\r\nconst mapStateToProps = (store) => {\r\n const {wizardActiveItem, wizardActiveStep, wizardSelectedValues} = store.wizardState;\r\n const {canvasCount} = store.bathroomVisualizerState;\r\n const {visualizersLoaded} = store.serverState;\r\n\r\n return {\r\n visualizersLoadedLength: visualizersLoaded.length,\r\n wizardActiveItem,\r\n wizardActiveStep,\r\n wizardSelectedValues,\r\n canvasCount,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n setCanvasScale\r\n};\r\n\r\nexport default withRouter(\r\n connect(mapStateToProps, mapDispatchToProps)(LookWizardContentCanvas)\r\n)\r\n","import React, {useEffect, useRef} from \"react\";\r\nimport $ from \"jquery\";\r\nimport { connect } from \"react-redux\";\r\nimport PropTypes from \"prop-types\";\r\n\r\nimport {getCurrentGroups} from \"../../../lookNavigation/lookMain/lookWizard/lookWizardFunctions\";\r\nimport LookMainWizardSelectedStep from \"../../../lookNavigation/lookMain/lookMainWizardSelectedStep\";\r\n\r\n\r\nconst GroheWizardSelectedSteps = (props) => {\r\n\r\n const {wizardActiveItem, wizardSelectedValues, wizardActiveStep, isMobile, styles} = props;\r\n\r\n const stepsContainerElement = useRef();\r\n\r\n useEffect(() => {\r\n if (styles && styles.width && stepsContainerElement && stepsContainerElement.current) {\r\n $(stepsContainerElement.current).animate({scrollLeft: stepsContainerElement.current.scrollWidth}, 800);\r\n }\r\n }, [styles])\r\n\r\n if (!wizardActiveItem || !wizardSelectedValues || !Object.keys(wizardSelectedValues).length) {\r\n return null\r\n }\r\n\r\n const currentGroups = getCurrentGroups(wizardActiveItem, wizardActiveStep, wizardSelectedValues);\r\n const isCompletedStep = wizardActiveStep > -1 && !currentGroups.length;\r\n\r\n return (\r\n \r\n
\r\n )\r\n};\r\n\r\nGroheWizardSelectedSteps.propTypes = {\r\n isMobile: PropTypes.bool\r\n}\r\n\r\nconst mapStateToProps = (store, ownProps) => {\r\n const {wizardActiveItem, wizardSelectedValues, wizardActiveStep} = store.wizardState;\r\n const {isMobile} = ownProps;\r\n const {windowWidth} = store.serverState;\r\n\r\n let styles = null;\r\n if (isMobile) {\r\n const scrollContainerWidth = windowWidth - 360;\r\n const prevStep = wizardActiveStep - 1;\r\n if ((scrollContainerWidth < prevStep * 100)) {\r\n const scrollContainerWidth = windowWidth - 360;\r\n let i = 0;\r\n let amountOfVisibleSteps = 0;\r\n while (i < prevStep) {\r\n if ((scrollContainerWidth - (i * 100)) < 100) {\r\n amountOfVisibleSteps++;\r\n }\r\n i++;\r\n }\r\n // console.log(\"amountOfVisibleSteps\", amountOfVisibleSteps);\r\n styles = {\r\n width: `calc(100% + ${amountOfVisibleSteps * 100}px)`\r\n }\r\n }\r\n }\r\n\r\n return {\r\n wizardActiveItem,\r\n wizardSelectedValues,\r\n wizardActiveStep,\r\n isMobile,\r\n windowWidth,\r\n styles\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n\r\n};\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(GroheWizardSelectedSteps)\r\n","import React, {Fragment, useEffect, useMemo, useState} from \"react\";\r\nimport PropTypes from \"prop-types\";\r\nimport {connect} from \"react-redux\";\r\nimport {FormattedMessage} from \"react-intl\";\r\n\r\nimport FilterListIcon from '@mui/icons-material/FilterList';\r\nimport SvgIcon from \"@mui/material/SvgIcon\";\r\nimport InfoIcon from \"@mui/icons-material/Info\";\r\nimport IconButton from \"@mui/material/IconButton\";\r\nimport UnpublishedIcon from '@mui/icons-material/Unpublished';\r\n\r\nimport {wizardSelectedValueInterface} from \"../../../../interfaces/wizardItemInterface\";\r\nimport {getFeatureGroupFromWizardGroup, getFilterValueThumbnailAndStyles} from \"./lookWizard/lookWizardFunctions\";\r\nimport FeatureThumbnail from \"../../../visComponents/featureThumbnail\";\r\nimport {setWizardActiveStep} from \"../../../../actions/wizardFunctions\";\r\nimport LookFeaturePrice from \"./lookListFeature/lookFeaturePrice\";\r\nimport {\r\n WIZARD_STEP_MOBILE_WIDTH,\r\n WIZARD_STEP_PRODUCT_JOURNEY,\r\n WIZARD_STEP_WIDTH\r\n} from \"../../core/constants\";\r\nimport BathroomFeatureGroupsIcons from \"../../../common/svgIcons/bathroomFeatureGroupIcons\";\r\nimport FeatureName from \"../../../visComponents/featureName\";\r\nimport Misc from \"../../../../misc/misc\";\r\nimport {IS_PRODUCT_JOURNEY} from \"../../../../config\";\r\nimport {isInStock} from \"../lookFunctions2\";\r\nimport {getFeatureIsLocked} from \"../../../../misc/helpers\";\r\nimport {getCurrentLayout} from \"../../../appLayout\";\r\nimport {getWizardGroupName} from \"./lookWizard/lookWizardFunctions2\";\r\n\r\nconst LookMainWizardSelectedStep = (props) => {\r\n\r\n const {wizardSelectedValue, wizardActiveStep, stepIndex, allFilterGroups, setWizardActiveStep, isMobile, fabricatorData\r\n } = props;\r\n const fabricatorSettings = fabricatorData.settings;\r\n const [transform, setTransform] = useState(0);\r\n\r\n const isProductJourneyDesktop = IS_PRODUCT_JOURNEY && !isMobile;\r\n const isProductJourneyMobile = IS_PRODUCT_JOURNEY && isMobile;\r\n\r\n useEffect(() => {\r\n if (wizardSelectedValue && wizardActiveStep >= stepIndex) {\r\n // const currentGroups = getCurrentGroups(wizardActiveItem, wizardActiveStep, wizardSelectedValues);\r\n // const isCompletedStep = wizardActiveStep > -1 && !currentGroups.length;\r\n\r\n const addIndexes = wizardActiveStep - stepIndex;\r\n let transform = stepWidth * addIndexes;\r\n if (isProductJourneyMobile) {\r\n transform = -transform;\r\n }\r\n // if (isCompletedStep) {\r\n // transform = transform - 320;\r\n // }\r\n setTransform(transform)\r\n }\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [wizardActiveStep])\r\n\r\n const featureIsInStock = useMemo(() => {\r\n return wizardSelectedValue && wizardSelectedValue.selectedFeature ? isInStock(wizardSelectedValue.selectedFeature) : true\r\n }, [wizardSelectedValue]);\r\n\r\n const showPriceLocked = useMemo(() => {\r\n return wizardSelectedValue && wizardSelectedValue.selectedFeature ? getFeatureIsLocked(wizardSelectedValue.selectedFeature) : false\r\n }, [wizardSelectedValue]);\r\n\r\n const showPrice = useMemo(() => {\r\n const layout = getCurrentLayout();\r\n return wizardSelectedValue && wizardSelectedValue.selectedFeature\r\n ? fabricatorSettings.showPricing && !fabricatorData.hideCheckoutBreakdownCost && !showPriceLocked\r\n && !fabricatorData.hidePricesFromUser\r\n && layout.partIdExistInQtCategory(wizardSelectedValue.selectedFeature.partId, true)\r\n : true\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [wizardSelectedValue]);\r\n\r\n if (!wizardSelectedValue) {\r\n return null\r\n }\r\n\r\n const stepWidth = isProductJourneyDesktop ? WIZARD_STEP_PRODUCT_JOURNEY : isMobile ? WIZARD_STEP_MOBILE_WIDTH : WIZARD_STEP_WIDTH;\r\n\r\n const {wizardGroup, selectedFeature, selectedFilter} = wizardSelectedValue;\r\n const isVisible = wizardActiveStep > stepIndex;\r\n const style = {\r\n transform: isProductJourneyDesktop ? `translateY(${transform}px)` : `translateX(${transform}px)`\r\n }\r\n\r\n const notSelected = !selectedFeature && !selectedFilter && stepIndex > 0 && (wizardGroup.nodeType !== \"custom\");\r\n\r\n const getThumbnail = () => {\r\n if (fabricatorData.isEncore && !isMobile) {\r\n return null\r\n }\r\n if (notSelected) {\r\n return (\r\n - \r\n {Object.keys(wizardSelectedValues).reverse().map((key) => {\r\n return
\r\n
\r\n )\r\n }\r\n\r\n if (wizardGroup.nodeType === \"custom\" && wizardGroup.customImageUrl && !isMobile) {\r\n const styles = {\r\n backgroundSize: \"cover\",\r\n backgroundRepeat: \"no-repeat\",\r\n backgroundPosition: \"center\",\r\n borderRadius: \"4px\",\r\n backgroundImage: \"url(\" + wizardGroup.customImageUrl + \")\",\r\n };\r\n return \r\n } else if (wizardGroup.nodeType === \"filter\") {\r\n if (isMobile) {\r\n return (\r\n \r\n \r\n )\r\n }\r\n const filterGroup = allFilterGroups.find(group => group.id === selectedFilter.filterGroup_id);\r\n const {styles} = getFilterValueThumbnailAndStyles(selectedFilter, filterGroup || {});\r\n return
\r\n } else if (wizardGroup.nodeType === \"group\") {\r\n const featureGroup = getFeatureGroupFromWizardGroup(wizardGroup);\r\n if (isMobile) {\r\n return (\r\n \r\n {featureGroup && BathroomFeatureGroupsIcons[featureGroup.partId]\r\n ? {BathroomFeatureGroupsIcons[featureGroup.partId]} \r\n : \r\n )\r\n }\r\n const actFeature = wizardSelectedValue && wizardSelectedValue.selectedFeature\r\n ? wizardSelectedValue.selectedFeature\r\n : featureGroup ? featureGroup.activeNotInVisualizerFeature || featureGroup.activeFeature : null;\r\n if (!actFeature) {\r\n console.log(\"no featureGroup or no activeFeature\", featureGroup);\r\n return
\r\n }\r\n return (\r\n
\r\n \r\n
\r\n )\r\n }\r\n return isMobile\r\n ? \r\n }\r\n\r\n\r\n const stepName = getWizardGroupName(wizardGroup);\r\n\r\n return (\r\n isProductJourneyDesktop ? null : setWizardActiveStep(stepIndex)}>\r\n {getThumbnail()}\r\n \r\n \r\n ) : null}\r\n \r\n )\r\n};\r\n\r\nLookMainWizardSelectedStep.propTypes = {\r\n stepIndex: PropTypes.number.isRequired,\r\n wizardSelectedValue: PropTypes.shape(wizardSelectedValueInterface).isRequired\r\n}\r\n\r\nconst mapStateToProps = (store, ownProps) => {\r\n const {wizardActiveStep, wizardSelectedValues} = store.wizardState;\r\n const {filterGroups} = store.filterState;\r\n const {isMobile} = store.serverState;\r\n const {useMobile} = ownProps;\r\n const fabricatorData = store.fabricatorState;\r\n\r\n return {\r\n wizardActiveStep,\r\n // wizardSelectedValues,\r\n allFilterGroups: filterGroups,\r\n wizardSelectedValues,\r\n isMobile: (typeof useMobile !== \"undefined\") ? useMobile : isMobile,\r\n fabricatorData,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n setWizardActiveStep\r\n};\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(LookMainWizardSelectedStep)\r\n","import React, {Fragment, useEffect, useReducer} from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport {withRouter} from \"react-router-dom\";\r\nimport $ from \"jquery\";\r\n\r\nimport WithOverlay from \"../../popups/withOverlayHoc\";\r\nimport ShopFeaturePage from \"./shopFeaturePage.js/shopFeaturePage\";\r\nimport ShopCategoryPage from \"./shopCategory/shopCategoryPage\";\r\nimport {ROUTES} from \"../../../routes\";\r\nimport {setShopPageLoaded, setShopPageOpened} from \"../../../actions/shopFunctions\";\r\nimport MaterialSpinner from \"../../ui/materialSpinner\";\r\nimport ShopContext, {\r\n initialShopContextValues,\r\n shopContextAction,\r\n shopContextReducer\r\n} from \"./shopCategory/shopNavItemsContext\";\r\nimport LookCartButton from \"../lookNavigation/lookCartButton\";\r\nimport {setLookOpened, setLookPageOpened} from \"../../../actions/lookFunctions\";\r\nimport {usePrevious} from \"../../../misc/helperHooks\";\r\nimport ShopPingPilotButton from \"./shopPingPilotButton\";\r\nimport {getCommonVisualizerType, IS_PRODUCT_JOURNEY} from \"../../../config\";\r\nimport {setWizardActiveItem} from \"../../../actions/wizardFunctions\";\r\nimport {getQtCategories, loadFiltersOnly} from \"../../../api/server-api\";\r\nimport {getCurrentLayout} from \"../../appLayout\";\r\nimport {setQtCategoriesRequested} from \"../../../actions/actionFunctions\";\r\nimport {setAllowMainLoading} from \"../../../actions/serverFunctions\";\r\n\r\n\r\nconst ShopPage = (props) => {\r\n\r\n const {shopPageOpened, location, setShopPageOpened, visualizersLoadedLength, lookPageOpened, lookOpened,\r\n setLookPageOpened, setLookOpened, setWizardActiveItem, allowMainLoading, shopPageLoaded, setShopPageLoaded,\r\n setQtCategoriesRequested, setAllowMainLoading} = props;\r\n\r\n const [shopContextState, shopContextDispatch] = useReducer(shopContextReducer, initialShopContextValues);\r\n const {shopActiveCategory, shopActiveFeature} = shopContextState;\r\n const isShopPage = location.pathname.includes(ROUTES.shop);\r\n const wasShopPage = usePrevious(isShopPage);\r\n const cartOpened = lookPageOpened === ROUTES.cart;\r\n\r\n const loadShopPage = async () => {\r\n if (isShopPage) {\r\n if (!visualizersLoadedLength && !allowMainLoading && !shopPageLoaded) {\r\n await loadFiltersOnly();\r\n setShopPageLoaded(true);\r\n const layout = getCurrentLayout();\r\n Object.values(layout.parts).forEach(part => {\r\n part.createRelatedItems();\r\n });\r\n setQtCategoriesRequested(layout.visualizerType);\r\n getQtCategories(layout.getCurrentLayoutAbbreviation()).then(qtCatResponse => {\r\n if (qtCatResponse) {\r\n layout.setQtCategoriesSubparts(qtCatResponse);\r\n }\r\n });\r\n }\r\n if (!shopPageOpened) {\r\n setShopPageOpened(true);\r\n } else if (shopPageOpened) {\r\n const overlay = document.querySelector(\".overlay--shop\");\r\n if (overlay && (!overlay.style.display || overlay.style.display === \"none\")) {\r\n $(overlay).fadeIn(300)\r\n }\r\n }\r\n const splitted = location.pathname.split(ROUTES.shop + \"/\");\r\n if (!splitted[1]) {\r\n splitted[1] = getCommonVisualizerType() === \"bathroom\" ? \"vanity_faucet\" : \"faucet\"; // set faucet by the default\r\n }\r\n if (splitted[1]) {\r\n const splittedAfterShop = splitted[1].split(\"/\");\r\n const categoryId = splittedAfterShop[0];\r\n const skuId = splittedAfterShop[1];\r\n if (categoryId && (categoryId !== shopActiveCategory)) {\r\n shopContextDispatch(shopContextAction({shopActiveCategory: categoryId}))\r\n }\r\n if (skuId && (skuId !== shopActiveFeature)) {\r\n shopContextDispatch(shopContextAction({shopActiveFeature: skuId}))\r\n } else if (shopActiveFeature && !skuId) {\r\n shopContextDispatch(shopContextAction({shopActiveFeature: \"\"}))\r\n }\r\n }\r\n // const category = \"\"\r\n } else if (wasShopPage) {\r\n // other component will unmount logic\r\n if (shopPageOpened && !cartOpened) {\r\n setShopPageOpened(false);\r\n }\r\n if (!allowMainLoading) {\r\n setAllowMainLoading(true); // here we request all data to show View in Visualizer without the loading\r\n }\r\n }\r\n }\r\n\r\n useEffect(() => {\r\n loadShopPage();\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [location.pathname])\r\n\r\n if (!shopPageOpened) {\r\n return null\r\n }\r\n\r\n const overlayClick = (event) => {\r\n if (cartOpened && !event.target.closest(\".look-cart-button--shop\")) {\r\n setLookPageOpened(\"\");\r\n }\r\n if (lookOpened) {\r\n setLookOpened(null);\r\n setLookPageOpened(\"\");\r\n setWizardActiveItem(null);\r\n }\r\n }\r\n\r\n return (\r\n \r\n \r\n {() => {\r\n if (!shopPageLoaded) {\r\n return (\r\n \r\n )\r\n }\r\n return (\r\n \r\n \r\n )\r\n }}\r\n \r\n \r\n )\r\n};\r\n\r\nconst mapStateToProps = (store) => {\r\n const {shopPageOpened, shopActiveCategory, shopActiveFeature, shopPageLoaded} = store.shopState;\r\n const {visualizersLoaded, allowMainLoading} = store.serverState;\r\n const {lookPageOpened, lookOpened} = store.lookState;\r\n\r\n return {\r\n shopPageOpened,\r\n shopActiveCategory,\r\n shopActiveFeature,\r\n fabricatorData: store.fabricatorState,\r\n visualizersLoadedLength: visualizersLoaded.length,\r\n lookPageOpened,\r\n lookOpened,\r\n allowMainLoading,\r\n shopPageLoaded,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n setShopPageOpened,\r\n setLookPageOpened,\r\n setLookOpened,\r\n setWizardActiveItem,\r\n setShopPageLoaded,\r\n setQtCategoriesRequested,\r\n setAllowMainLoading,\r\n};\r\n\r\nexport default withRouter(\r\n connect(mapStateToProps, mapDispatchToProps)(ShopPage)\r\n)\r\n","import {getCurrentLayout} from \"../../appLayout\";\r\nimport {getPartIdFromLixilCategoryName} from \"../lookLixilCategories\";\r\n\r\n/**\r\n * @param shopCategoryId {string}\r\n * @returns {object} featureGroup\r\n */\r\nexport const getFeatureGroupFromUrl = (shopCategoryId) => {\r\n if (!shopCategoryId) {\r\n return null\r\n }\r\n const layout = getCurrentLayout();\r\n return layout.getFeatureGroupByPartId(shopCategoryId)\r\n || layout.getFeatureGroupByPartId(getPartIdFromLixilCategoryName(shopCategoryId));\r\n}\r\n\r\n/**\r\n * @param shopCategoryId {string}\r\n * @param skuId {string}\r\n * @param withSharedFeatureName {boolean}\r\n * @returns {featureInterface} feature\r\n */\r\nexport const getFeatureFromUrl = (shopCategoryId, skuId, withSharedFeatureName = false) => {\r\n if (!shopCategoryId || !skuId) {\r\n return null\r\n }\r\n const layout = getCurrentLayout();\r\n const featureGroup = getFeatureGroupFromUrl(shopCategoryId);\r\n return layout.getFeatureBySku(skuId, featureGroup ? featureGroup.partId : \"\", true, withSharedFeatureName)\r\n}\r\n","import React from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport {withRouter} from \"react-router-dom\";\r\nimport PropTypes from \"prop-types\";\r\nimport $ from \"jquery\";\r\n\r\nimport {featureInterface} from \"../../../../interfaces/featureInterface\";\r\nimport {\r\n setLookActiveCategory,\r\n setLookActiveFeature,\r\n setLookOpened,\r\n} from \"../../../../actions/lookFunctions\";\r\nimport LookCanvasContext from \"../../lookCanvasContext\";\r\nimport WithZoomToFeature from \"../../hocs/withZoomToFeature\";\r\nimport {setShopLastPageVisited, setShopPageLeaved, setShopPageOpened} from \"../../../../actions/shopFunctions\";\r\nimport {getCurrentLayout} from \"../../../appLayout\";\r\nimport {applyNewPreset} from \"../../lookNavigation/lookNavigationFunctions\";\r\nimport {loaderDisable, loaderEnable} from \"../../../ui/loaderView\";\r\nimport {updateCanvasCount} from \"../../../../actions/actionFunctions\";\r\nimport {navFeatureCLick} from \"../../lookNavigation/lookFunctions\";\r\nimport {enableRelatedFeature} from \"../../lookNavigation/lookFunctions2\";\r\nimport {checkIfLookFeaturesReceived} from \"../../../../api/look-api\";\r\n\r\n\r\nconst WithShopFeatureVisualizeClick = (props) => {\r\n\r\n const {feature, children, setShopPageOpened, setLookActiveCategory, isMobile, setShopLastPageVisited, location,\r\n setShopPageLeaved, bvPresets, loadedPresets, updateCanvasCount} = props;\r\n\r\n const visualizeButtonClick = async (zoomToFeatureGroup) => {\r\n console.log(\"visualize feature\", feature);\r\n\r\n if (Array.isArray(feature.metaData[\"RoomLayout\"]) && feature.metaData[\"RoomLayout\"].length) {\r\n const newLayoutType = +((feature.metaData[\"RoomLayout\"][0]).replace(\"Layout\", \"\"));\r\n const layout = getCurrentLayout();\r\n if (newLayoutType !== layout.type) {\r\n const newPreset = bvPresets.find(bvPreset => bvPreset.layout_type === newLayoutType);\r\n loaderEnable();\r\n await checkIfLookFeaturesReceived(feature.getParent()); // this receives sinks to apply faucet\r\n if (newPreset) {\r\n await applyNewPreset(newPreset, loadedPresets);\r\n } else {\r\n const layout = getCurrentLayout();\r\n await layout.selectLayout(newLayoutType);\r\n }\r\n navFeatureCLick(feature, true, true, true);\r\n enableRelatedFeature(feature, () => {}, 0);\r\n updateCanvasCount();\r\n await new Promise(resolve => setTimeout(resolve, 1000)); // this fixes scene jump\r\n loaderDisable();\r\n }\r\n }\r\n document.querySelector(\".shop\").classList.add(\"shop--closing\");\r\n setShopLastPageVisited(location.pathname);\r\n $(\".overlay--white2\").fadeOut(800, () => {\r\n zoomToFeatureGroup(feature.partId, feature);\r\n setShopPageOpened(\"\");\r\n setShopPageLeaved(true);\r\n if (!isMobile) {\r\n setTimeout(() => {\r\n setLookActiveCategory(feature.partId);\r\n }, 300)\r\n }\r\n });\r\n }\r\n\r\n return (\r\n \r\n {(imageCanvas) => (\r\n \r\n {(zoomToFeatureGroup) => children(() => visualizeButtonClick(zoomToFeatureGroup))}\r\n \r\n )}\r\n \r\n )\r\n};\r\n\r\nWithShopFeatureVisualizeClick.propTypes = {\r\n feature: PropTypes.shape(featureInterface).isRequired\r\n}\r\n\r\nconst mapStateToProps = (store) => {\r\n const {isMobile} = store.serverState;\r\n const {bvPresets, loadedPresets} = store.bathroomVisualizerState;\r\n\r\n return {\r\n isMobile,\r\n bvPresets,\r\n loadedPresets,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n setShopPageOpened,\r\n setLookOpened,\r\n setLookActiveFeature,\r\n setLookActiveCategory,\r\n setShopLastPageVisited,\r\n setShopPageLeaved,\r\n updateCanvasCount,\r\n};\r\n\r\nexport default withRouter(\r\n connect(mapStateToProps, mapDispatchToProps)(WithShopFeatureVisualizeClick)\r\n)\r\n","import React, {useEffect, useState} from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport PropTypes from \"prop-types\";\r\nimport {withRouter} from \"react-router-dom\";\r\nimport {FormattedMessage} from \"react-intl\";\r\n\r\nimport {featureInterface} from \"../../../interfaces/featureInterface\";\r\nimport {getFeatureOptions, getOptionStyles} from \"../lookNavigation/lookFunctions\";\r\nimport {capitalizeFirstLetters} from \"../../../misc/helpers\";\r\n\r\n\r\nconst ShopFeatureOptionsCommon = (props) => {\r\n\r\n const {feature, filterGroups, optionsButtonClick, withTitle, navItemOptions} = props;\r\n let {activeOption} = props;\r\n\r\n const [availableOptions, setAvailableOptions] = useState([]);\r\n\r\n useEffect(() => {\r\n const colorOptions = getFeatureOptions(feature, filterGroups, true, navItemOptions);\r\n // console.log(\"colorOptions\", colorOptions);\r\n setAvailableOptions(colorOptions || [])\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [feature.partId]);\r\n\r\n if (!availableOptions.length) {\r\n return null\r\n }\r\n\r\n if (withTitle && !activeOption) {\r\n activeOption = availableOptions.find(colorOption => colorOption.feature.dbFeature.id === feature.dbFeature.id)\r\n }\r\n\r\n const activeOptionText = withTitle && activeOption\r\n ? capitalizeFirstLetters((activeOption.colorValue.displayText || activeOption.colorValue.value).replace(\"GROHE \", \"\"))\r\n : null;\r\n\r\n return (\r\n \r\n {(imageCanvas) => (\r\n \r\n )\r\n};\r\n\r\nLookCartButton.propTypes = {\r\n className: PropTypes.string,\r\n}\r\n\r\nconst mapStateToProps = (store) => {\r\n const fabricatorData = store.fabricatorState;\r\n const {lookPageOpened, lookActiveCategory, lookOpened} = store.lookState;\r\n const {cartItems} = store.cartState;\r\n const {isPhoneNumberValidated} = store.userState;\r\n\r\n return {\r\n lookPageOpened,\r\n lookActiveCategory,\r\n lookOpened,\r\n cartItems,\r\n fabricatorData,\r\n isPhoneNumberValidated,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n setLookOpened,\r\n setLookPageOpened,\r\n setLookActiveCategory,\r\n setCanvasScale,\r\n};\r\n\r\nexport default withRouter(\r\n injectIntl(\r\n connect(mapStateToProps, mapDispatchToProps)(LookCartButton)\r\n )\r\n)\r\n","import React, {useEffect, useRef, useState} from \"react\";\r\nimport {connect} from \"react-redux\";\r\n\r\nimport Paper from \"@mui/material/Paper\";\r\n\r\nimport FeatureThumbnail from \"../../visComponents/featureThumbnail\";\r\nimport GroheFeatureNotInVisualizer from \"../grohe/groheNavigation/groheFeature/groheFeatureNotInVisualizer\";\r\nimport {getFeatureSectionIsHidden, hideFeatureSection} from \"./lookFunctions2\";\r\nimport {usePrevious} from \"../../../misc/helperHooks\";\r\nimport {IS_PRODUCT_JOURNEY} from \"../../../config\";\r\nimport {getCurrentLayout} from \"../../appLayout\";\r\n\r\nconst LookNotInVisualizerPopper = (props) => {\r\n\r\n const {lookActiveFeature, lookActiveCategory, lookCompatabilityAlert, isMobile, wizardActiveItem, wizardActiveStep,\r\n isSquareFootageEnabled} = props;\r\n const [showPopper, setShowPopper] = useState(false);\r\n const anchorRef = useRef(null);\r\n\r\n const prevActiveStep = usePrevious(wizardActiveStep);\r\n\r\n let checkFeature = lookActiveFeature;\r\n if (!checkFeature && isMobile && lookActiveCategory) {\r\n const layout = getCurrentLayout();\r\n const featureGroup = layout.getFeatureGroupByPartId(lookActiveCategory);\r\n if (featureGroup) {\r\n checkFeature = featureGroup.activeNotInVisualizerFeature || featureGroup.activeFeature;\r\n }\r\n }\r\n\r\n useEffect(() => {\r\n setShowPopper(checkFeature && checkFeature.notAvailableInVisualizer);\r\n }, [checkFeature]);\r\n\r\n useEffect(() => {\r\n if (isSquareFootageEnabled && showPopper) {\r\n setShowPopper(false);\r\n }\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [isSquareFootageEnabled]);\r\n\r\n useEffect(() => {\r\n if (wizardActiveItem && showPopper && (prevActiveStep !== wizardActiveStep)) {\r\n setShowPopper(false);\r\n }\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [wizardActiveStep]);\r\n\r\n const showFeaturesOnly = !IS_PRODUCT_JOURNEY\r\n ? !wizardActiveItem && getFeatureSectionIsHidden(lookActiveFeature)\r\n : !wizardActiveItem && hideFeatureSection(true, lookActiveCategory, lookActiveFeature, lookCompatabilityAlert);\r\n\r\n return (\r\n \r\n {(imageCanvas) => (\r\n \r\n : null}*/}\r\n \r\n )}\r\n \r\n )\r\n};\r\n\r\nconst mapStateToProps = (store) => {\r\n const {lookActiveFeature, lookViewType, lookActiveCategory} = store.lookState;\r\n const {isMobile} = store.serverState;\r\n const {isPhoneNumberValidated} = store.userState; // to update component when user is logged in\r\n\r\n return {\r\n isMobile,\r\n lookActiveFeature,\r\n lookViewType,\r\n activeFeatureId: lookActiveFeature ? lookActiveFeature.dbFeature.id : \"\",\r\n fabricatorData: store.fabricatorState,\r\n lookActiveCategory,\r\n isPhoneNumberValidated,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n setLookActiveCategory,\r\n setLookActiveFeature,\r\n setCanvasScale,\r\n};\r\n\r\nexport default withRouter(\r\n injectIntl(\r\n connect(mapStateToProps, mapDispatchToProps)(LookCategoryHeader)\r\n )\r\n)\r\n","import React, {Fragment} from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport {FormattedMessage, injectIntl} from \"react-intl\";\r\nimport { withRouter } from \"react-router-dom\";\r\n\r\nimport IconButton from \"@mui/material/IconButton\";\r\nimport ChevronLeftIcon from '@mui/icons-material/ChevronLeft';\r\n\r\nimport LookCanvasContext from \"../../../lookCanvasContext\";\r\nimport {zoomCanvasOut} from \"../../lookFunctions\";\r\nimport {setCanvasScale} from \"../../../../../actions/actionFunctions\";\r\nimport {getLookIdUrl} from \"../../lookFunctions2\";\r\nimport LookMainHeaderCloseButton from \"../lookMainHeaderCloseButton\";\r\nimport Analytics, {LOOK_JOURNEY_ANALYTIC_EVENTS} from \"../../../../../analytics\";\r\nimport LookViewTypeSwitcher from \"../lookViewTypeSwitcher\";\r\nimport Button from \"@mui/material/Button\";\r\nimport {setWizardActiveStep} from \"../../../../../actions/wizardFunctions\";\r\n\r\nconst LookWizardHeader = (props) => {\r\n\r\n const {intl, history, isMobile, setCanvasScale, setWizardActiveStep, wizardActiveItem} = props;\r\n\r\n const backButtonClick = (imageCanvas) => {\r\n Analytics.sendClickEvent(LOOK_JOURNEY_ANALYTIC_EVENTS.lookMenuHeaderBack);\r\n zoomCanvasOut(imageCanvas, setCanvasScale);\r\n history.push(getLookIdUrl());\r\n };\r\n\r\n return (\r\n \r\n {(imageCanvas) => (\r\n \r\n \r\n )}\r\n \r\n )\r\n};\r\n\r\nconst mapStateToProps = (store) => {\r\n const {isMobile} = store.serverState;\r\n const {wizardActiveItem} = store.wizardState;\r\n return {\r\n isMobile,\r\n wizardActiveItem,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n setCanvasScale,\r\n setWizardActiveStep,\r\n};\r\n\r\nexport default withRouter(\r\n injectIntl(\r\n connect(mapStateToProps, mapDispatchToProps)(LookWizardHeader)\r\n )\r\n)\r\n","import React from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport LookMainWizardSelectedStep from \"./lookMainWizardSelectedStep\";\r\nimport {getCurrentGroups} from \"./lookWizard/lookWizardFunctions\";\r\nimport {WIZARD_STEP_MOBILE_WIDTH, WIZARD_STEP_WIDTH} from \"../../core/constants\";\r\n\r\n\r\nconst LookMainWizardSelectedSteps = (props) => {\r\n\r\n const {wizardActiveItem, wizardSelectedValues, wizardActiveStep, windowWidth, isMobile, fabricatorData} = props;\r\n\r\n if (!wizardActiveItem || !wizardSelectedValues || !Object.keys(wizardSelectedValues).length) {\r\n return null\r\n }\r\n\r\n const stepWidth = isMobile ? WIZARD_STEP_MOBILE_WIDTH : WIZARD_STEP_WIDTH;\r\n\r\n const styles = {\r\n width: Object.keys(wizardSelectedValues).filter(key => key < wizardActiveStep).length * stepWidth\r\n }\r\n\r\n const currentGroups = getCurrentGroups(wizardActiveItem, wizardActiveStep, wizardSelectedValues);\r\n const isCompletedStep = wizardActiveStep > -1 && !currentGroups.length;\r\n const menuWidth = isMobile\r\n ? windowWidth - 384\r\n : windowWidth - (isCompletedStep ? 408 : 728)\r\n const useContainerOverFlow = styles.width > menuWidth;\r\n\r\n return (\r\n \r\n {({ TransitionProps }) => (\r\n \r\n \r\n \r\n \r\n )}\r\n \r\n )\r\n};\r\n\r\nLookWizardCompletedAlertModal.propTypes = {\r\n anchorEl: PropTypes.object.isRequired,\r\n}\r\n\r\nconst mapStateToProps = (store) => {\r\n const {wizardActiveItem, wizardActiveStep, wizardSelectedValues, wizardWasRestored} = store.wizardState;\r\n\r\n return {\r\n wizardActiveItem,\r\n wizardActiveStep,\r\n wizardSelectedValues,\r\n wizardWasRestored,\r\n fabricatorData: store.fabricatorState,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n setWizardActiveStep,\r\n setCanvasScale,\r\n};\r\n\r\nexport default withRouter(\r\n connect(mapStateToProps, mapDispatchToProps)(LookWizardCompletedAlertModal)\r\n)\r\n","import React, {useRef} from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport { withRouter } from \"react-router-dom\";\r\n\r\nimport Button from \"@mui/material/Button\";\r\nimport SvgIcon from \"@mui/material/SvgIcon\";\r\n\r\nimport {LookRoomIdeasIcon} from \"../../common/icons\";\r\nimport COLOR_THEMES from \"../../../colorThemes\";\r\nimport {injectIntl} from \"react-intl\";\r\nimport {ROUTES} from \"../../../routes\";\r\nimport {setLookIntroStep, setLookOpened, setLookPageOpened} from \"../../../actions/lookFunctions\";\r\nimport IconButton from \"@mui/material/IconButton\";\r\nimport LookIntroPopper from \"./lookIntro/lookIntroPopper\";\r\nimport {LOOK_INTRO_STEPS, LOOK_INTRO_STEPS_MOBILE} from \"../core/constants\";\r\nimport Analytics, {LOOK_JOURNEY_ANALYTIC_EVENTS} from \"../../../analytics\";\r\nimport {getCommonVisualizerType} from \"../../../config\";\r\nimport {capitalizeFirstLetters} from \"../../../misc/helpers\";\r\n\r\nexport const getRoomIdeasTranslate = (intl, fabricatorData) => {\r\n if (!intl || !fabricatorData) {\r\n return \"\"\r\n }\r\n if (fabricatorData.isNhance) {\r\n return intl.formatMessage({id: \"rooms.\" + capitalizeFirstLetters(getCommonVisualizerType())})\r\n + \" \" + intl.formatMessage({id: \"tooltip.layouts\"}) // Kitchen Layouts\r\n }\r\n return intl.formatMessage({id: \"buttons.roomIdeas\"});\r\n}\r\n\r\nconst LookRoomIdeasButton = (props) => {\r\n\r\n const {activeTheme, setLookPageOpened, history, lookPageOpened, isMobile, intl, introStep, setLookIntroStep,\r\n lookOpened, setLookOpened, fabricatorData} = props;\r\n const anchorRef = useRef(null);\r\n\r\n const isActive = lookPageOpened === ROUTES.rooms;\r\n const popperStep = isMobile ? LOOK_INTRO_STEPS_MOBILE.rooms : LOOK_INTRO_STEPS.layoutsAndRooms;\r\n\r\n const roomIdeasButtonClick = () => {\r\n if (introStep === popperStep) {\r\n Analytics.sendClickEvent(LOOK_JOURNEY_ANALYTIC_EVENTS.lookRoomIdeasOnIntro);\r\n setLookIntroStep(introStep + 1);\r\n return false;\r\n }\r\n if (isActive) {\r\n Analytics.sendClickEvent(LOOK_JOURNEY_ANALYTIC_EVENTS.lookRoomIdeasClose);\r\n setLookPageOpened(\"\");\r\n history.push(ROUTES.home);\r\n } else {\r\n Analytics.sendClickEvent(LOOK_JOURNEY_ANALYTIC_EVENTS.lookRoomIdeasOpen);\r\n setLookPageOpened(ROUTES.rooms);\r\n history.push(ROUTES.rooms);\r\n }\r\n if (lookOpened) {\r\n setLookOpened(null);\r\n }\r\n }\r\n\r\n const getIcon = (\r\n \r\n \r\n )\r\n\r\n const buttonTranslate = getRoomIdeasTranslate(intl, fabricatorData);\r\n\r\n return (\r\n \r\n \r\n \r\n ,\r\n document.getElementById('app')\r\n);\r\n\r\nwindow.resetKiosk = function () {\r\n if (parent && document.kvConfig.kioskMode) {\r\n if (parent.window.resetKiosk) {\r\n Config.parent.window.resetKiosk();\r\n }\r\n }\r\n};\r\n","import \"url-polyfill\";\r\nimport 'core-js/es/number/index';\r\nimport './lib/babel-core/5.6.15-browser-polyfill.min';\r\n\r\nif (!String.prototype.startsWith) {\r\n Object.defineProperty(String.prototype, 'startsWith', {\r\n enumerable: false,\r\n configurable: false,\r\n writable: false,\r\n value: function(searchString, position) {\r\n position = position || 0;\r\n return this.indexOf(searchString, position) === position;\r\n }\r\n });\r\n}\r\n\r\nif (!String.prototype.includes) {\r\n String.prototype.includes = function(search, start) {\r\n 'use strict';\r\n if (typeof start !== 'number') {\r\n start = 0;\r\n }\r\n\r\n if (start + search.length > this.length) {\r\n return false;\r\n } else {\r\n return this.indexOf(search, start) !== -1;\r\n }\r\n };\r\n}\r\n\r\nif (!String.prototype.includesCI) {\r\n String.prototype.includesCI = function (search, start) {\r\n 'use strict';\r\n if (typeof start !== 'number') {\r\n start = 0;\r\n }\r\n\r\n if (start + search.length > this.length) {\r\n return false;\r\n } else {\r\n return this.toLowerCase().indexOf(search.toLowerCase(), start) !== -1;\r\n }\r\n };\r\n}\r\n\r\nif (typeof Object.assign != 'function') {\r\n Object.assign = function(target) {\r\n 'use strict';\r\n if (target == null) {\r\n throw new TypeError('Cannot convert undefined or null to object');\r\n }\r\n\r\n target = Object(target);\r\n for (var index = 1; index < arguments.length; index++) {\r\n var source = arguments[index];\r\n if (source != null) {\r\n for (var key in source) {\r\n if (Object.prototype.hasOwnProperty.call(source, key)) {\r\n target[key] = source[key];\r\n }\r\n }\r\n }\r\n }\r\n return target;\r\n };\r\n}\r\n\r\nif (!Array.prototype.findIndex) {\r\n Array.prototype.findIndex = function(predicate) {\r\n if (this == null) {\r\n throw new TypeError('Array.prototype.findIndex called on null or undefined');\r\n }\r\n if (typeof predicate !== 'function') {\r\n throw new TypeError('predicate must be a function');\r\n }\r\n var list = Object(this);\r\n var length = list.length >>> 0;\r\n var thisArg = arguments[1];\r\n var value;\r\n\r\n for (var i = 0; i < length; i++) {\r\n value = list[i];\r\n if (predicate.call(thisArg, value, i, list)) {\r\n return i;\r\n }\r\n }\r\n return -1;\r\n };\r\n}\r\n\r\n// https://tc39.github.io/ecma262/#sec-array.prototype.includes\r\nif (!Array.prototype.includes) {\r\n Object.defineProperty(Array.prototype, 'includes', {\r\n value: function(searchElement, fromIndex) {\r\n\r\n // 1. Let O be ? ToObject(this value).\r\n if (this == null) {\r\n throw new TypeError('\"this\" is null or not defined');\r\n }\r\n\r\n var o = Object(this);\r\n\r\n // 2. Let len be ? ToLength(? Get(O, \"length\")).\r\n var len = o.length >>> 0;\r\n\r\n // 3. If len is 0, return false.\r\n if (len === 0) {\r\n return false;\r\n }\r\n\r\n // 4. Let n be ? ToInteger(fromIndex).\r\n // (If fromIndex is undefined, this step produces the value 0.)\r\n var n = fromIndex | 0;\r\n\r\n // 5. If n ≥ 0, then\r\n // a. Let k be n.\r\n // 6. Else n < 0,\r\n // a. Let k be len + n.\r\n // b. If k < 0, let k be 0.\r\n var k = Math.max(n >= 0 ? n : len - Math.abs(n), 0);\r\n\r\n function sameValueZero(x, y) {\r\n return x === y || (typeof x === 'number' && typeof y === 'number' && isNaN(x) && isNaN(y));\r\n }\r\n\r\n // 7. Repeat, while k < len\r\n while (k < len) {\r\n // a. Let elementK be the result of ? Get(O, ! ToString(k)).\r\n // b. If SameValueZero(searchElement, elementK) is true, return true.\r\n // c. Increase k by 1.\r\n if (sameValueZero(o[k], searchElement)) {\r\n return true;\r\n }\r\n k++;\r\n }\r\n\r\n // 8. Return false\r\n return false;\r\n }\r\n });\r\n}\r\n\r\n// https://tc39.github.io/ecma262/#sec-array.prototype.find\r\nif (!Array.prototype.find) {\r\n Object.defineProperty(Array.prototype, 'find', {\r\n value: function(predicate) {\r\n // 1. Let O be ? ToObject(this value).\r\n if (this == null) {\r\n throw new TypeError('\"this\" is null or not defined');\r\n }\r\n\r\n var o = Object(this);\r\n\r\n // 2. Let len be ? ToLength(? Get(O, \"length\")).\r\n var len = o.length >>> 0;\r\n\r\n // 3. If IsCallable(predicate) is false, throw a TypeError exception.\r\n if (typeof predicate !== 'function') {\r\n throw new TypeError('predicate must be a function');\r\n }\r\n\r\n // 4. If thisArg was supplied, let T be thisArg; else let T be undefined.\r\n var thisArg = arguments[1];\r\n\r\n // 5. Let k be 0.\r\n var k = 0;\r\n\r\n // 6. Repeat, while k < len\r\n while (k < len) {\r\n // a. Let Pk be ! ToString(k).\r\n // b. Let kValue be ? Get(O, Pk).\r\n // c. Let testResult be ToBoolean(? Call(predicate, T, « kValue, k, O »)).\r\n // d. If testResult is true, return kValue.\r\n var kValue = o[k];\r\n if (predicate.call(thisArg, kValue, k, o)) {\r\n return kValue;\r\n }\r\n // e. Increase k by 1.\r\n k++;\r\n }\r\n\r\n // 7. Return undefined.\r\n return undefined;\r\n }\r\n });\r\n}\r\nif (!Array.prototype.fill) {\r\n Object.defineProperty(Array.prototype, 'fill', {\r\n value: function(value) {\r\n\r\n // Steps 1-2.\r\n if (this == null) {\r\n throw new TypeError('this is null or not defined');\r\n }\r\n\r\n var O = Object(this);\r\n\r\n // Steps 3-5.\r\n var len = O.length >>> 0;\r\n\r\n // Steps 6-7.\r\n var start = arguments[1];\r\n var relativeStart = start >> 0;\r\n\r\n // Step 8.\r\n var k = relativeStart < 0 ?\r\n Math.max(len + relativeStart, 0) :\r\n Math.min(relativeStart, len);\r\n\r\n // Steps 9-10.\r\n var end = arguments[2];\r\n var relativeEnd = end === undefined ?\r\n len : end >> 0;\r\n\r\n // Step 11.\r\n var finalValue = relativeEnd < 0 ?\r\n Math.max(len + relativeEnd, 0) :\r\n Math.min(relativeEnd, len);\r\n\r\n // Step 12.\r\n while (k < finalValue) {\r\n O[k] = value;\r\n k++;\r\n }\r\n\r\n // Step 13.\r\n return O;\r\n }\r\n });\r\n}\r\nif (Math && !Math.trunc) {\r\n Math.trunc = function (v) {\r\n return v < 0 ? Math.ceil(v) : Math.floor(v);\r\n };\r\n}\r\n\r\n(function(ELEMENT) {\r\n ELEMENT.matches = ELEMENT.matches || ELEMENT.mozMatchesSelector || ELEMENT.msMatchesSelector || ELEMENT.oMatchesSelector || ELEMENT.webkitMatchesSelector;\r\n ELEMENT.closest = ELEMENT.closest || function closest(selector) {\r\n if (!this) return null;\r\n if (this.matches(selector)) return this;\r\n if (!this.parentElement) {return null}\r\n else return this.parentElement.closest(selector)\r\n };\r\n}(Element.prototype));\r\n\r\n\r\n/**\r\n * Decimal adjustment of a number. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/ceil\r\n *\r\n * @param {String} type The type of adjustment.\r\n * @param {Number} value The number.\r\n * @param {Integer} exp The exponent (the 10 logarithm of the adjustment base).\r\n * @returns {Number} The adjusted value.\r\n */\r\nfunction decimalAdjust(type, value, exp) {\r\n // If the exp is undefined or zero...\r\n if (typeof exp === 'undefined' || +exp === 0) {\r\n return Math[type](value);\r\n }\r\n value = +value;\r\n exp = +exp;\r\n // If the value is not a number or the exp is not an integer...\r\n if (isNaN(value) || !(typeof exp === 'number' && exp % 1 === 0)) {\r\n return NaN;\r\n }\r\n // Shift\r\n value = value.toString().split('e');\r\n value = Math[type](+(value[0] + 'e' + (value[1] ? (+value[1] - exp) : -exp)));\r\n // Shift back\r\n value = value.toString().split('e');\r\n return +(value[0] + 'e' + (value[1] ? (+value[1] + exp) : exp));\r\n}\r\n\r\n// Decimal round\r\nif (!Math.round10) {\r\n Math.round10 = function(value, exp) {\r\n return decimalAdjust('round', value, exp);\r\n };\r\n}\r\n// Decimal floor\r\nif (!Math.floor10) {\r\n Math.floor10 = function(value, exp) {\r\n return decimalAdjust('floor', value, exp);\r\n };\r\n}\r\n// Decimal ceil\r\nif (!Math.ceil10) {\r\n Math.ceil10 = function(value, exp) {\r\n return decimalAdjust('ceil', value, exp);\r\n };\r\n}\r\n","/* eslint-disable */\r\n(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require==\"function\"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error(\"Cannot find module '\"+o+\"'\");throw f.code=\"MODULE_NOT_FOUND\",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require==\"function\"&&require;for(var o=0;o=0;i--){var last=parts[i];if(last===\".\"){parts.splice(i,1)}else if(last===\"..\"){parts.splice(i,1);up++}else if(up){parts.splice(i,1);up--}}if(allowAboveRoot){for(;up--;up){parts.unshift(\"..\")}}return parts}var splitPathRe=/^(\\/?|)([\\s\\S]*?)((?:\\.{1,2}|[^\\/]+?|)(\\.[^.\\/]*|))(?:[\\/]*)$/;var splitPath=function(filename){return splitPathRe.exec(filename).slice(1)};exports.resolve=function(){var resolvedPath=\"\",resolvedAbsolute=false;for(var i=arguments.length-1;i>=-1&&!resolvedAbsolute;i--){var path=i>=0?arguments[i]:process.cwd();if(typeof path!==\"string\"){throw new TypeError(\"Arguments to path.resolve must be strings\")}else if(!path){continue}resolvedPath=path+\"/\"+resolvedPath;resolvedAbsolute=path.charAt(0)===\"/\"}resolvedPath=normalizeArray(filter(resolvedPath.split(\"/\"),function(p){return!!p}),!resolvedAbsolute).join(\"/\");return(resolvedAbsolute?\"/\":\"\")+resolvedPath||\".\"};exports.normalize=function(path){var isAbsolute=exports.isAbsolute(path),trailingSlash=substr(path,-1)===\"/\";path=normalizeArray(filter(path.split(\"/\"),function(p){return!!p}),!isAbsolute).join(\"/\");if(!path&&!isAbsolute){path=\".\"}if(path&&trailingSlash){path+=\"/\"}return(isAbsolute?\"/\":\"\")+path};exports.isAbsolute=function(path){return path.charAt(0)===\"/\"};exports.join=function(){var paths=Array.prototype.slice.call(arguments,0);return exports.normalize(filter(paths,function(p,index){if(typeof p!==\"string\"){throw new TypeError(\"Arguments to path.join must be strings\")}return p}).join(\"/\"))};exports.relative=function(from,to){from=exports.resolve(from).substr(1);to=exports.resolve(to).substr(1);function trim(arr){var start=0;for(;start=0;end--){if(arr[end]!==\"\")break}if(start>end)return[];return arr.slice(start,end-start+1)}var fromParts=trim(from.split(\"/\"));var toParts=trim(to.split(\"/\"));var length=Math.min(fromParts.length,toParts.length);var samePartsLength=length;for(var i=0;iindex){value=O[index++];if(value!=value)return true}else for(;length>index;index++)if(IS_INCLUDES||index in O){if(O[index]===el)return IS_INCLUDES||index}return!IS_INCLUDES&&-1}}},{\"./$\":26}],6:[function(require,module,exports){var $=require(\"./$\"),ctx=require(\"./$.ctx\");module.exports=function(TYPE){var IS_MAP=TYPE==1,IS_FILTER=TYPE==2,IS_SOME=TYPE==3,IS_EVERY=TYPE==4,IS_FIND_INDEX=TYPE==6,NO_HOLES=TYPE==5||IS_FIND_INDEX;return function($this,callbackfn,that){var O=Object($.assertDefined($this)),self=$.ES5Object(O),f=ctx(callbackfn,that,3),length=$.toLength(self.length),index=0,result=IS_MAP?Array(length):IS_FILTER?[]:undefined,val,res;for(;length>index;index++)if(NO_HOLES||index in self){val=self[index];res=f(val,index,O);if(TYPE){if(IS_MAP)result[index]=res;else if(res)switch(TYPE){case 3:return true;case 5:return val;case 6:return index;case 2:result.push(val)}else if(IS_EVERY)return false}}return IS_FIND_INDEX?-1:IS_SOME||IS_EVERY?IS_EVERY:result}}},{\"./$\":26,\"./$.ctx\":14}],7:[function(require,module,exports){var $=require(\"./$\");function assert(condition,msg1,msg2){if(!condition)throw TypeError(msg2?msg1+msg2:msg1)}assert.def=$.assertDefined;assert.fn=function(it){if(!$.isFunction(it))throw TypeError(it+\" is not a function!\");return it};assert.obj=function(it){if(!$.isObject(it))throw TypeError(it+\" is not an object!\");return it};assert.inst=function(it,Constructor,name){if(!(it instanceof Constructor))throw TypeError(name+\": use the 'new' operator!\");return it};module.exports=assert},{\"./$\":26}],8:[function(require,module,exports){var $=require(\"./$\"),enumKeys=require(\"./$.enum-keys\");module.exports=Object.assign||function assign(target,source){var T=Object($.assertDefined(target)),l=arguments.length,i=1;while(l>i){var S=$.ES5Object(arguments[i++]),keys=enumKeys(S),length=keys.length,j=0,key;while(length>j)T[key=keys[j++]]=S[key]}return T}},{\"./$\":26,\"./$.enum-keys\":17}],9:[function(require,module,exports){var $=require(\"./$\"),TAG=require(\"./$.wks\")(\"toStringTag\"),toString={}.toString;function cof(it){return toString.call(it).slice(8,-1)}cof.classof=function(it){var O,T;return it==undefined?it===undefined?\"Undefined\":\"Null\":typeof(T=(O=Object(it))[TAG])==\"string\"?T:cof(O)};cof.set=function(it,tag,stat){if(it&&!$.has(it=stat?it:it.prototype,TAG))$.hide(it,TAG,tag)};module.exports=cof},{\"./$\":26,\"./$.wks\":44}],10:[function(require,module,exports){\"use strict\";var $=require(\"./$\"),ctx=require(\"./$.ctx\"),safe=require(\"./$.uid\").safe,assert=require(\"./$.assert\"),forOf=require(\"./$.for-of\"),step=require(\"./$.iter\").step,$has=$.has,set=$.set,isObject=$.isObject,hide=$.hide,isExtensible=Object.isExtensible||isObject,ID=safe(\"id\"),O1=safe(\"O1\"),LAST=safe(\"last\"),FIRST=safe(\"first\"),ITER=safe(\"iter\"),SIZE=$.DESC?safe(\"size\"):\"size\",id=0;function fastKey(it,create){if(!isObject(it))return typeof it==\"symbol\"?it:(typeof it==\"string\"?\"S\":\"P\")+it;if(!$has(it,ID)){if(!isExtensible(it))return\"F\";if(!create)return\"E\";hide(it,ID,++id)}return\"O\"+it[ID]}function getEntry(that,key){var index=fastKey(key),entry;if(index!==\"F\")return that[O1][index];for(entry=that[FIRST];entry;entry=entry.n){if(entry.k==key)return entry}}module.exports={getConstructor:function(wrapper,NAME,IS_MAP,ADDER){var C=wrapper(function(that,iterable){assert.inst(that,C,NAME);set(that,O1,$.create(null));set(that,SIZE,0);set(that,LAST,undefined);set(that,FIRST,undefined);if(iterable!=undefined)forOf(iterable,IS_MAP,that[ADDER],that)});require(\"./$.mix\")(C.prototype,{clear:function clear(){for(var that=this,data=that[O1],entry=that[FIRST];entry;entry=entry.n){entry.r=true;if(entry.p)entry.p=entry.p.n=undefined;delete data[entry.i]}that[FIRST]=that[LAST]=undefined;that[SIZE]=0},\"delete\":function(key){var that=this,entry=getEntry(that,key);if(entry){var next=entry.n,prev=entry.p;delete that[O1][entry.i];entry.r=true;if(prev)prev.n=next;if(next)next.p=prev;if(that[FIRST]==entry)that[FIRST]=next;if(that[LAST]==entry)that[LAST]=prev;that[SIZE]--}return!!entry},forEach:function forEach(callbackfn){var f=ctx(callbackfn,arguments[1],3),entry;while(entry=entry?entry.n:this[FIRST]){f(entry.v,entry.k,this);while(entry&&entry.r)entry=entry.p}},has:function has(key){return!!getEntry(this,key)}});if($.DESC)$.setDesc(C.prototype,\"size\",{get:function(){return assert.def(this[SIZE])}});return C},def:function(that,key,value){var entry=getEntry(that,key),prev,index;if(entry){entry.v=value}else{that[LAST]=entry={i:index=fastKey(key,true),k:key,v:value,p:prev=that[LAST],n:undefined,r:false};if(!that[FIRST])that[FIRST]=entry;if(prev)prev.n=entry;that[SIZE]++;if(index!==\"F\")that[O1][index]=entry}return that},getEntry:getEntry,setIter:function(C,NAME,IS_MAP){require(\"./$.iter-define\")(C,NAME,function(iterated,kind){set(this,ITER,{o:iterated,k:kind})},function(){var iter=this[ITER],kind=iter.k,entry=iter.l;while(entry&&entry.r)entry=entry.p;if(!iter.o||!(iter.l=entry=entry?entry.n:iter.o[FIRST])){iter.o=undefined;return step(1)}if(kind==\"keys\")return step(0,entry.k);if(kind==\"values\")return step(0,entry.v);return step(0,[entry.k,entry.v])},IS_MAP?\"entries\":\"values\",!IS_MAP,true)}}},{\"./$\":26,\"./$.assert\":7,\"./$.ctx\":14,\"./$.for-of\":18,\"./$.iter\":25,\"./$.iter-define\":23,\"./$.mix\":28,\"./$.uid\":42}],11:[function(require,module,exports){var $def=require(\"./$.def\"),forOf=require(\"./$.for-of\");module.exports=function(NAME){$def($def.P,NAME,{toJSON:function toJSON(){var arr=[];forOf(this,false,arr.push,arr);return arr}})}},{\"./$.def\":15,\"./$.for-of\":18}],12:[function(require,module,exports){\"use strict\";var $=require(\"./$\"),safe=require(\"./$.uid\").safe,assert=require(\"./$.assert\"),forOf=require(\"./$.for-of\"),$has=$.has,isObject=$.isObject,hide=$.hide,isExtensible=Object.isExtensible||isObject,id=0,ID=safe(\"id\"),WEAK=safe(\"weak\"),LEAK=safe(\"leak\"),method=require(\"./$.array-methods\"),find=method(5),findIndex=method(6);function findFrozen(store,key){return find(store.array,function(it){return it[0]===key})}function leakStore(that){return that[LEAK]||hide(that,LEAK,{array:[],get:function(key){var entry=findFrozen(this,key);if(entry)return entry[1]},has:function(key){return!!findFrozen(this,key)},set:function(key,value){var entry=findFrozen(this,key);if(entry)entry[1]=value;else this.array.push([key,value])},\"delete\":function(key){var index=findIndex(this.array,function(it){return it[0]===key});if(~index)this.array.splice(index,1);return!!~index}})[LEAK]}module.exports={getConstructor:function(wrapper,NAME,IS_MAP,ADDER){var C=wrapper(function(that,iterable){$.set(assert.inst(that,C,NAME),ID,id++);if(iterable!=undefined)forOf(iterable,IS_MAP,that[ADDER],that)});require(\"./$.mix\")(C.prototype,{\"delete\":function(key){if(!isObject(key))return false;if(!isExtensible(key))return leakStore(this)[\"delete\"](key);return $has(key,WEAK)&&$has(key[WEAK],this[ID])&&delete key[WEAK][this[ID]]},has:function has(key){if(!isObject(key))return false;if(!isExtensible(key))return leakStore(this).has(key);return $has(key,WEAK)&&$has(key[WEAK],this[ID])}});return C},def:function(that,key,value){if(!isExtensible(assert.obj(key))){leakStore(that).set(key,value)}else{$has(key,WEAK)||hide(key,WEAK,{});key[WEAK][that[ID]]=value}return that},leakStore:leakStore,WEAK:WEAK,ID:ID}},{\"./$\":26,\"./$.array-methods\":6,\"./$.assert\":7,\"./$.for-of\":18,\"./$.mix\":28,\"./$.uid\":42}],13:[function(require,module,exports){\"use strict\";var $=require(\"./$\"),$def=require(\"./$.def\"),BUGGY=require(\"./$.iter\").BUGGY,forOf=require(\"./$.for-of\"),species=require(\"./$.species\"),assertInstance=require(\"./$.assert\").inst;module.exports=function(NAME,wrapper,methods,common,IS_MAP,IS_WEAK){var Base=$.g[NAME],C=Base,ADDER=IS_MAP?\"set\":\"add\",proto=C&&C.prototype,O={};function fixMethod(KEY){var fn=proto[KEY];require(\"./$.redef\")(proto,KEY,KEY==\"delete\"?function(a){return fn.call(this,a===0?0:a)}:KEY==\"has\"?function has(a){return fn.call(this,a===0?0:a)}:KEY==\"get\"?function get(a){return fn.call(this,a===0?0:a)}:KEY==\"add\"?function add(a){fn.call(this,a===0?0:a);return this}:function set(a,b){fn.call(this,a===0?0:a,b);return this})}if(!$.isFunction(C)||!(IS_WEAK||!BUGGY&&proto.forEach&&proto.entries)){C=common.getConstructor(wrapper,NAME,IS_MAP,ADDER);require(\"./$.mix\")(C.prototype,methods)}else{var inst=new C,chain=inst[ADDER](IS_WEAK?{}:-0,1),buggyZero;if(!require(\"./$.iter-detect\")(function(iter){new C(iter)})){C=wrapper(function(target,iterable){assertInstance(target,C,NAME);var that=new Base;if(iterable!=undefined)forOf(iterable,IS_MAP,that[ADDER],that);return that});C.prototype=proto;proto.constructor=C}IS_WEAK||inst.forEach(function(val,key){buggyZero=1/key===-Infinity});if(buggyZero){fixMethod(\"delete\");fixMethod(\"has\");IS_MAP&&fixMethod(\"get\")}if(buggyZero||chain!==inst)fixMethod(ADDER)}require(\"./$.cof\").set(C,NAME);O[NAME]=C;$def($def.G+$def.W+$def.F*(C!=Base),O);species(C);species($.core[NAME]);if(!IS_WEAK)common.setIter(C,NAME,IS_MAP);return C}},{\"./$\":26,\"./$.assert\":7,\"./$.cof\":9,\"./$.def\":15,\"./$.for-of\":18,\"./$.iter\":25,\"./$.iter-detect\":24,\"./$.mix\":28,\"./$.redef\":31,\"./$.species\":36}],14:[function(require,module,exports){var assertFunction=require(\"./$.assert\").fn;module.exports=function(fn,that,length){assertFunction(fn);if(~length&&that===undefined)return fn;switch(length){case 1:return function(a){return fn.call(that,a)};case 2:return function(a,b){return fn.call(that,a,b)};case 3:return function(a,b,c){return fn.call(that,a,b,c)}}return function(){return fn.apply(that,arguments)}}},{\"./$.assert\":7}],15:[function(require,module,exports){var $=require(\"./$\"),global=$.g,core=$.core,isFunction=$.isFunction,$redef=require(\"./$.redef\");function ctx(fn,that){return function(){return fn.apply(that,arguments)}}global.core=core;$def.F=1;$def.G=2;$def.S=4;$def.P=8;$def.B=16;$def.W=32;function $def(type,name,source){var key,own,out,exp,isGlobal=type&$def.G,isProto=type&$def.P,target=isGlobal?global:type&$def.S?global[name]:(global[name]||{}).prototype,exports=isGlobal?core:core[name]||(core[name]={});if(isGlobal)source=name;for(key in source){own=!(type&$def.F)&&target&&key in target;out=(own?target:source)[key];if(type&$def.B&&own)exp=ctx(out,global);else exp=isProto&&isFunction(out)?ctx(Function.call,out):out;if(target&&!own)$redef(target,key,out);if(exports[key]!=out)$.hide(exports,key,exp);if(isProto)(exports.prototype||(exports.prototype={}))[key]=out}}module.exports=$def},{\"./$\":26,\"./$.redef\":31}],16:[function(require,module,exports){var $=require(\"./$\"),document=$.g.document,isObject=$.isObject,is=isObject(document)&&isObject(document.createElement);module.exports=function(it){return is?document.createElement(it):{}}},{\"./$\":26}],17:[function(require,module,exports){var $=require(\"./$\");module.exports=function(it){var keys=$.getKeys(it),getDesc=$.getDesc,getSymbols=$.getSymbols;if(getSymbols)$.each.call(getSymbols(it),function(key){if(getDesc(it,key).enumerable)keys.push(key)});return keys}},{\"./$\":26}],18:[function(require,module,exports){var ctx=require(\"./$.ctx\"),get=require(\"./$.iter\").get,call=require(\"./$.iter-call\");module.exports=function(iterable,entries,fn,that){var iterator=get(iterable),f=ctx(fn,that,entries?2:1),step;while(!(step=iterator.next()).done){if(call(iterator,f,step.value,entries)===false){return call.close(iterator)}}}},{\"./$.ctx\":14,\"./$.iter\":25,\"./$.iter-call\":22}],19:[function(require,module,exports){module.exports=function($){$.FW=true;$.path=$.g;return $}},{}],20:[function(require,module,exports){var $=require(\"./$\"),toString={}.toString,getNames=$.getNames;var windowNames=typeof window==\"object\"&&Object.getOwnPropertyNames?Object.getOwnPropertyNames(window):[];function getWindowNames(it){try{return getNames(it)}catch(e){return windowNames.slice()}}module.exports.get=function getOwnPropertyNames(it){if(windowNames&&toString.call(it)==\"[object Window]\")return getWindowNames(it);return getNames($.toObject(it))}},{\"./$\":26}],21:[function(require,module,exports){module.exports=function(fn,args,that){var un=that===undefined;switch(args.length){case 0:return un?fn():fn.call(that);case 1:return un?fn(args[0]):fn.call(that,args[0]);case 2:return un?fn(args[0],args[1]):fn.call(that,args[0],args[1]);case 3:return un?fn(args[0],args[1],args[2]):fn.call(that,args[0],args[1],args[2]);case 4:return un?fn(args[0],args[1],args[2],args[3]):fn.call(that,args[0],args[1],args[2],args[3]);case 5:return un?fn(args[0],args[1],args[2],args[3],args[4]):fn.call(that,args[0],args[1],args[2],args[3],args[4])}return fn.apply(that,args)}},{}],22:[function(require,module,exports){var assertObject=require(\"./$.assert\").obj;function close(iterator){var ret=iterator[\"return\"];if(ret!==undefined)assertObject(ret.call(iterator))}function call(iterator,fn,value,entries){try{return entries?fn(assertObject(value)[0],value[1]):fn(value)}catch(e){close(iterator);throw e}}call.close=close;module.exports=call},{\"./$.assert\":7}],23:[function(require,module,exports){var $def=require(\"./$.def\"),$redef=require(\"./$.redef\"),$=require(\"./$\"),cof=require(\"./$.cof\"),$iter=require(\"./$.iter\"),SYMBOL_ITERATOR=require(\"./$.wks\")(\"iterator\"),FF_ITERATOR=\"@@iterator\",KEYS=\"keys\",VALUES=\"values\",Iterators=$iter.Iterators;module.exports=function(Base,NAME,Constructor,next,DEFAULT,IS_SET,FORCE){$iter.create(Constructor,NAME,next);function createMethod(kind){function $$(that){return new Constructor(that,kind)}switch(kind){case KEYS:return function keys(){return $$(this)};case VALUES:return function values(){return $$(this)}}return function entries(){return $$(this)}}var TAG=NAME+\" Iterator\",proto=Base.prototype,_native=proto[SYMBOL_ITERATOR]||proto[FF_ITERATOR]||DEFAULT&&proto[DEFAULT],_default=_native||createMethod(DEFAULT),methods,key;if(_native){var IteratorPrototype=$.getProto(_default.call(new Base));cof.set(IteratorPrototype,TAG,true);if($.FW&&$.has(proto,FF_ITERATOR))$iter.set(IteratorPrototype,$.that)}if($.FW||FORCE)$iter.set(proto,_default);Iterators[NAME]=_default;Iterators[TAG]=$.that;if(DEFAULT){methods={keys:IS_SET?_default:createMethod(KEYS),values:DEFAULT==VALUES?_default:createMethod(VALUES),entries:DEFAULT!=VALUES?_default:createMethod(\"entries\")};if(FORCE)for(key in methods){if(!(key in proto))$redef(proto,key,methods[key])}else $def($def.P+$def.F*$iter.BUGGY,NAME,methods)}}},{\"./$\":26,\"./$.cof\":9,\"./$.def\":15,\"./$.iter\":25,\"./$.redef\":31,\"./$.wks\":44}],24:[function(require,module,exports){var SYMBOL_ITERATOR=require(\"./$.wks\")(\"iterator\"),SAFE_CLOSING=false;try{var riter=[7][SYMBOL_ITERATOR]();riter[\"return\"]=function(){SAFE_CLOSING=true};Array.from(riter,function(){throw 2})}catch(e){}module.exports=function(exec){if(!SAFE_CLOSING)return false;var safe=false;try{var arr=[7],iter=arr[SYMBOL_ITERATOR]();iter.next=function(){safe=true};arr[SYMBOL_ITERATOR]=function(){return iter};exec(arr)}catch(e){}return safe}},{\"./$.wks\":44}],25:[function(require,module,exports){\"use strict\";var $=require(\"./$\"),cof=require(\"./$.cof\"),classof=cof.classof,assert=require(\"./$.assert\"),assertObject=assert.obj,SYMBOL_ITERATOR=require(\"./$.wks\")(\"iterator\"),FF_ITERATOR=\"@@iterator\",Iterators=require(\"./$.shared\")(\"iterators\"),IteratorPrototype={};setIterator(IteratorPrototype,$.that);function setIterator(O,value){$.hide(O,SYMBOL_ITERATOR,value);if(FF_ITERATOR in[])$.hide(O,FF_ITERATOR,value)}module.exports={BUGGY:\"keys\"in[]&&!(\"next\"in[].keys()),Iterators:Iterators,step:function(done,value){return{value:value,done:!!done}},is:function(it){var O=Object(it),Symbol=$.g.Symbol;return(Symbol&&Symbol.iterator||FF_ITERATOR)in O||SYMBOL_ITERATOR in O||$.has(Iterators,classof(O))},get:function(it){var Symbol=$.g.Symbol,getIter;if(it!=undefined){getIter=it[Symbol&&Symbol.iterator||FF_ITERATOR]||it[SYMBOL_ITERATOR]||Iterators[classof(it)]}assert($.isFunction(getIter),it,\" is not iterable!\");return assertObject(getIter.call(it))},set:setIterator,create:function(Constructor,NAME,next,proto){Constructor.prototype=$.create(proto||IteratorPrototype,{next:$.desc(1,next)});cof.set(Constructor,NAME+\" Iterator\")}}},{\"./$\":26,\"./$.assert\":7,\"./$.cof\":9,\"./$.shared\":35,\"./$.wks\":44}],26:[function(require,module,exports){\"use strict\";var global=typeof self!=\"undefined\"?self:Function(\"return this\")(),core={},defineProperty=Object.defineProperty,hasOwnProperty={}.hasOwnProperty,ceil=Math.ceil,floor=Math.floor,max=Math.max,min=Math.min;var DESC=!!function(){try{return defineProperty({},\"a\",{get:function(){return 2}}).a==2}catch(e){}}();var hide=createDefiner(1);function toInteger(it){return isNaN(it=+it)?0:(it>0?floor:ceil)(it)}function desc(bitmap,value){return{enumerable:!(bitmap&1),configurable:!(bitmap&2),writable:!(bitmap&4),value:value}}function simpleSet(object,key,value){object[key]=value;return object}function createDefiner(bitmap){return DESC?function(object,key,value){return $.setDesc(object,key,desc(bitmap,value))}:simpleSet}function isObject(it){return it!==null&&(typeof it==\"object\"||typeof it==\"function\")}function isFunction(it){return typeof it==\"function\"}function assertDefined(it){if(it==undefined)throw TypeError(\"Can't call method on \"+it);return it}var $=module.exports=require(\"./$.fw\")({g:global,core:core,html:global.document&&document.documentElement,isObject:isObject,isFunction:isFunction,that:function(){return this},toInteger:toInteger,toLength:function(it){return it>0?min(toInteger(it),9007199254740991):0},toIndex:function(index,length){index=toInteger(index);return index<0?max(index+length,0):min(index,length)},has:function(it,key){return hasOwnProperty.call(it,key)},create:Object.create,getProto:Object.getPrototypeOf,DESC:DESC,desc:desc,getDesc:Object.getOwnPropertyDescriptor,setDesc:defineProperty,setDescs:Object.defineProperties,getKeys:Object.keys,getNames:Object.getOwnPropertyNames,getSymbols:Object.getOwnPropertySymbols,assertDefined:assertDefined,ES5Object:Object,toObject:function(it){return $.ES5Object(assertDefined(it))},hide:hide,def:createDefiner(0),set:global.Symbol?simpleSet:hide,each:[].forEach});if(typeof __e!=\"undefined\")__e=core;if(typeof __g!=\"undefined\")__g=global},{\"./$.fw\":19}],27:[function(require,module,exports){var $=require(\"./$\");module.exports=function(object,el){var O=$.toObject(object),keys=$.getKeys(O),length=keys.length,index=0,key;while(length>index)if(O[key=keys[index++]]===el)return key}},{\"./$\":26}],28:[function(require,module,exports){var $redef=require(\"./$.redef\");module.exports=function(target,src){for(var key in src)$redef(target,key,src[key]);return target}},{\"./$.redef\":31}],29:[function(require,module,exports){var $=require(\"./$\"),assertObject=require(\"./$.assert\").obj;module.exports=function ownKeys(it){assertObject(it);var keys=$.getNames(it),getSymbols=$.getSymbols;return getSymbols?keys.concat(getSymbols(it)):keys}},{\"./$\":26,\"./$.assert\":7}],30:[function(require,module,exports){\"use strict\";var $=require(\"./$\"),invoke=require(\"./$.invoke\"),assertFunction=require(\"./$.assert\").fn;module.exports=function(){var fn=assertFunction(this),length=arguments.length,pargs=Array(length),i=0,_=$.path._,holder=false;while(length>i)if((pargs[i]=arguments[i++])===_)holder=true;return function(){var that=this,_length=arguments.length,j=0,k=0,args;if(!holder&&!_length)return invoke(fn,pargs,that);args=pargs.slice();if(holder)for(;length>j;j++)if(args[j]===_)args[j]=arguments[k++];while(_length>k)args.push(arguments[k++]);return invoke(fn,args,that)}}},{\"./$\":26,\"./$.assert\":7,\"./$.invoke\":21}],31:[function(require,module,exports){var $=require(\"./$\"),tpl=String({}.hasOwnProperty),SRC=require(\"./$.uid\").safe(\"src\"),_toString=Function.toString;function $redef(O,key,val,safe){if($.isFunction(val)){var base=O[key];$.hide(val,SRC,base?String(base):tpl.replace(/hasOwnProperty/,String(key)));if(!(\"name\"in val))val.name=key}if(O===$.g){O[key]=val}else{if(!safe)delete O[key];$.hide(O,key,val)}}$redef(Function.prototype,\"toString\",function toString(){return $.has(this,SRC)?this[SRC]:_toString.call(this)});$.core.inspectSource=function(it){return _toString.call(it)};module.exports=$redef},{\"./$\":26,\"./$.uid\":42}],32:[function(require,module,exports){\"use strict\";module.exports=function(regExp,replace,isStatic){var replacer=replace===Object(replace)?function(part){return replace[part]}:replace;return function(it){return String(isStatic?it:this).replace(regExp,replacer)}}},{}],33:[function(require,module,exports){module.exports=Object.is||function is(x,y){return x===y?x!==0||1/x===1/y:x!=x&&y!=y}},{}],34:[function(require,module,exports){var $=require(\"./$\"),assert=require(\"./$.assert\");function check(O,proto){assert.obj(O);assert(proto===null||$.isObject(proto),proto,\": can't set as prototype!\")}module.exports={set:Object.setPrototypeOf||(\"__proto__\"in{}?function(buggy,set){try{set=require(\"./$.ctx\")(Function.call,$.getDesc(Object.prototype,\"__proto__\").set,2);set({},[])}catch(e){buggy=true}return function setPrototypeOf(O,proto){check(O,proto);if(buggy)O.__proto__=proto;else set(O,proto);return O}}():undefined),check:check}},{\"./$\":26,\"./$.assert\":7,\"./$.ctx\":14}],35:[function(require,module,exports){var $=require(\"./$\"),SHARED=\"__core-js_shared__\",store=$.g[SHARED]||($.g[SHARED]={});module.exports=function(key){return store[key]||(store[key]={})}},{\"./$\":26}],36:[function(require,module,exports){var $=require(\"./$\"),SPECIES=require(\"./$.wks\")(\"species\");module.exports=function(C){if($.DESC&&!(SPECIES in C))$.setDesc(C,SPECIES,{configurable:true,get:$.that})}},{\"./$\":26,\"./$.wks\":44}],37:[function(require,module,exports){var $=require(\"./$\");module.exports=function(TO_STRING){return function(that,pos){var s=String($.assertDefined(that)),i=$.toInteger(pos),l=s.length,a,b;if(i<0||i>=l)return TO_STRING?\"\":undefined;a=s.charCodeAt(i);return a<55296||a>56319||i+1===l||(b=s.charCodeAt(i+1))<56320||b>57343?TO_STRING?s.charAt(i):a:TO_STRING?s.slice(i,i+2):(a-55296<<10)+(b-56320)+65536}}},{\"./$\":26}],38:[function(require,module,exports){var $=require(\"./$\"),repeat=require(\"./$.string-repeat\");module.exports=function(that,minLength,fillChar,left){var S=String($.assertDefined(that));if(minLength===undefined)return S;var intMinLength=$.toInteger(minLength);var fillLen=intMinLength-S.length;if(fillLen<0||fillLen===Infinity){throw new RangeError(\"Cannot satisfy string length \"+minLength+\" for string: \"+S)}var sFillStr=fillChar===undefined?\" \":String(fillChar);var sFillVal=repeat.call(sFillStr,Math.ceil(fillLen/sFillStr.length));if(sFillVal.length>fillLen)sFillVal=left?sFillVal.slice(sFillVal.length-fillLen):sFillVal.slice(0,fillLen);return left?sFillVal.concat(S):S.concat(sFillVal)}},{\"./$\":26,\"./$.string-repeat\":39}],39:[function(require,module,exports){\"use strict\";var $=require(\"./$\");module.exports=function repeat(count){var str=String($.assertDefined(this)),res=\"\",n=$.toInteger(count);if(n<0||n==Infinity)throw RangeError(\"Count can't be negative\");for(;n>0;(n>>>=1)&&(str+=str))if(n&1)res+=str;return res}},{\"./$\":26}],40:[function(require,module,exports){\"use strict\";var $=require(\"./$\"),ctx=require(\"./$.ctx\"),cof=require(\"./$.cof\"),invoke=require(\"./$.invoke\"),cel=require(\"./$.dom-create\"),global=$.g,isFunction=$.isFunction,html=$.html,process=global.process,setTask=global.setImmediate,clearTask=global.clearImmediate,MessageChannel=global.MessageChannel,counter=0,queue={},ONREADYSTATECHANGE=\"onreadystatechange\",defer,channel,port;function run(){var id=+this;if($.has(queue,id)){var fn=queue[id];delete queue[id];fn()}}function listner(event){run.call(event.data)}if(!isFunction(setTask)||!isFunction(clearTask)){setTask=function(fn){var args=[],i=1;while(arguments.length>i)args.push(arguments[i++]);queue[++counter]=function(){invoke(isFunction(fn)?fn:Function(fn),args)};defer(counter);return counter};clearTask=function(id){delete queue[id]};if(cof(process)==\"process\"){defer=function(id){process.nextTick(ctx(run,id,1))}}else if(global.addEventListener&&isFunction(global.postMessage)&&!global.importScripts){defer=function(id){global.postMessage(id,\"*\")};global.addEventListener(\"message\",listner,false)}else if(isFunction(MessageChannel)){channel=new MessageChannel;port=channel.port2;channel.port1.onmessage=listner;defer=ctx(port.postMessage,port,1)}else if(ONREADYSTATECHANGE in cel(\"script\")){defer=function(id){html.appendChild(cel(\"script\"))[ONREADYSTATECHANGE]=function(){html.removeChild(this);run.call(id)}}}else{defer=function(id){setTimeout(ctx(run,id,1),0)}}}module.exports={set:setTask,clear:clearTask}},{\"./$\":26,\"./$.cof\":9,\"./$.ctx\":14,\"./$.dom-create\":16,\"./$.invoke\":21}],41:[function(require,module,exports){module.exports=function(exec){try{exec();return false}catch(e){return true}}},{}],42:[function(require,module,exports){var sid=0;function uid(key){return\"Symbol(\".concat(key===undefined?\"\":key,\")_\",(++sid+Math.random()).toString(36))}uid.safe=require(\"./$\").g.Symbol||uid;module.exports=uid},{\"./$\":26}],43:[function(require,module,exports){var UNSCOPABLES=require(\"./$.wks\")(\"unscopables\");if(!(UNSCOPABLES in[]))require(\"./$\").hide(Array.prototype,UNSCOPABLES,{});module.exports=function(key){[][UNSCOPABLES][key]=true}},{\"./$\":26,\"./$.wks\":44}],44:[function(require,module,exports){var global=require(\"./$\").g,store=require(\"./$.shared\")(\"wks\");module.exports=function(name){return store[name]||(store[name]=global.Symbol&&global.Symbol[name]||require(\"./$.uid\").safe(\"Symbol.\"+name))}},{\"./$\":26,\"./$.shared\":35,\"./$.uid\":42}],45:[function(require,module,exports){var $=require(\"./$\"),cel=require(\"./$.dom-create\"),cof=require(\"./$.cof\"),$def=require(\"./$.def\"),invoke=require(\"./$.invoke\"),arrayMethod=require(\"./$.array-methods\"),IE_PROTO=require(\"./$.uid\").safe(\"__proto__\"),assert=require(\"./$.assert\"),assertObject=assert.obj,ObjectProto=Object.prototype,html=$.html,A=[],_slice=A.slice,_join=A.join,classof=cof.classof,has=$.has,defineProperty=$.setDesc,getOwnDescriptor=$.getDesc,defineProperties=$.setDescs,isFunction=$.isFunction,isObject=$.isObject,toObject=$.toObject,toLength=$.toLength,toIndex=$.toIndex,IE8_DOM_DEFINE=false,$indexOf=require(\"./$.array-includes\")(false),$forEach=arrayMethod(0),$map=arrayMethod(1),$filter=arrayMethod(2),$some=arrayMethod(3),$every=arrayMethod(4);if(!$.DESC){try{IE8_DOM_DEFINE=defineProperty(cel(\"div\"),\"x\",{\r\n get:function(){return 8}}).x==8}catch(e){}$.setDesc=function(O,P,Attributes){if(IE8_DOM_DEFINE)try{return defineProperty(O,P,Attributes)}catch(e){}if(\"get\"in Attributes||\"set\"in Attributes)throw TypeError(\"Accessors not supported!\");if(\"value\"in Attributes)assertObject(O)[P]=Attributes.value;return O};$.getDesc=function(O,P){if(IE8_DOM_DEFINE)try{return getOwnDescriptor(O,P)}catch(e){}if(has(O,P))return $.desc(!ObjectProto.propertyIsEnumerable.call(O,P),O[P])};$.setDescs=defineProperties=function(O,Properties){assertObject(O);var keys=$.getKeys(Properties),length=keys.length,i=0,P;while(length>i)$.setDesc(O,P=keys[i++],Properties[P]);return O}}$def($def.S+$def.F*!$.DESC,\"Object\",{getOwnPropertyDescriptor:$.getDesc,defineProperty:$.setDesc,defineProperties:defineProperties});var keys1=(\"constructor,hasOwnProperty,isPrototypeOf,propertyIsEnumerable,\"+\"toLocaleString,toString,valueOf\").split(\",\"),keys2=keys1.concat(\"length\",\"prototype\"),keysLen1=keys1.length;var createDict=function(){var iframe=cel(\"iframe\"),i=keysLen1,gt=\">\",iframeDocument;iframe.style.display=\"none\";html.appendChild(iframe);iframe.src=\"javascript:\";iframeDocument=iframe.contentWindow.document;iframeDocument.open();iframeDocument.write(\"
\r\n \r\n {Misc.textSubStringEllipsis(stepName, 32)}\r\n \r\n {isMobile ? null : (\r\n \r\n {isProductJourneyDesktop && selectedFeature ? (\r\n \r\n \r\n \r\n ) : null}\r\n \r\n {selectedFilter ? selectedFilter.displayText ? selectedFilter.displayText : selectedFilter.value : null}\r\n {showPrice && selectedFeature ? : null}\r\n {!showPrice && selectedFeature ? : null}\r\n {notSelected ? : null}\r\n \r\n {featureIsInStock ? null : (\r\n \r\n \r\n \r\n )}\r\n \r\n )}\r\n
\r\n {isProductJourneyDesktop ? (\r\n setWizardActiveStep(stepIndex)}>\r\n \r\n {shopActiveCategory && !shopActiveFeature ? }\r\n
\r\n \r\n {withTitle ? (\r\n \r\n
\r\n ) : null}\r\n
\r\n )\r\n};\r\n\r\nShopFeatureOptionsCommon.propTypes = {\r\n feature: PropTypes.shape(featureInterface).isRequired,\r\n activeOption: PropTypes.object,\r\n optionsButtonClick: PropTypes.func.isRequired,\r\n withTitle: PropTypes.bool,\r\n navItemOptions: PropTypes.arrayOf(PropTypes.shape(featureInterface)),\r\n}\r\n\r\nconst mapStateToProps = (store) => {\r\n // const {isMobile} = store.serverState;\r\n const {filterGroups} = store.filterState;\r\n // const fabricatorData = store.fabricatorState;\r\n // const {isPhoneNumberValidated} = store.userState; // to update component when user is logged in\r\n\r\n return {\r\n // isMobile,\r\n // fabricatorData,\r\n // isPhoneNumberValidated,\r\n filterGroups,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n};\r\n\r\nexport default withRouter(\r\n connect(mapStateToProps, mapDispatchToProps)(ShopFeatureOptionsCommon)\r\n)\r\n","import React from \"react\";\r\nimport {connect} from \"react-redux\";\r\nimport {injectIntl} from \"react-intl\";\r\nimport {withRouter} from \"react-router-dom\";\r\nimport PropTypes from \"prop-types\";\r\n\r\nimport IconButton from \"@mui/material/IconButton\";\r\nimport SvgIcon from \"@mui/material/SvgIcon\";\r\nimport Badge from \"@mui/material/Badge\";\r\n\r\nimport {LookCartIcon} from \"../../common/icons\";\r\nimport {\r\n setLookActiveCategory,\r\n setLookOpened,\r\n setLookPageOpened\r\n} from \"../../../actions/lookFunctions\";\r\nimport {ROUTES} from \"../../../routes\";\r\nimport Analytics, {LOOK_JOURNEY_ANALYTIC_EVENTS} from \"../../../analytics\";\r\nimport LookCanvasContext from \"../lookCanvasContext\";\r\nimport {zoomCanvasOut} from \"./lookFunctions\";\r\nimport {setCanvasScale} from \"../../../actions/actionFunctions\";\r\nimport {getCartItemsCount} from \"../grohe/groheNavigation/groheFunctions\";\r\nimport {isIframe} from \"../../../misc/helpers\";\r\n\r\n\r\nconst LookCartButton = (props) => {\r\n\r\n const {intl, lookOpened, setLookOpened, setLookPageOpened, lookActiveCategory, fabricatorData, className,\r\n setLookActiveCategory, setCanvasScale, cartItems, history, isPhoneNumberValidated} = props;\r\n const fabricatorSettings = fabricatorData.settings;\r\n\r\n const isLixil = isIframe() && fabricatorData.isLixil;\r\n if (isLixil || !fabricatorSettings.checkout) {\r\n return null\r\n }\r\n\r\n const cartButtonClick = (imageCanvas) => {\r\n Analytics.sendClickEvent(LOOK_JOURNEY_ANALYTIC_EVENTS.lookCartButton);\r\n if (lookOpened) {\r\n setLookOpened(false);\r\n }\r\n if (lookActiveCategory) {\r\n setLookActiveCategory(\"\");\r\n }\r\n if (fabricatorSettings.enableQuote && !isPhoneNumberValidated) {\r\n setLookPageOpened(ROUTES.list);\r\n history.push(ROUTES.list);\r\n } else {\r\n setLookPageOpened(ROUTES.cart);\r\n history.push(ROUTES.cart);\r\n }\r\n zoomCanvasOut(imageCanvas, setCanvasScale);\r\n };\r\n\r\n const cartItemsLength = getCartItemsCount(cartItems, intl);\r\n\r\n return (\r\n \r\n :\r\n {activeOptionText}\r\n
\r\n ) : null}\r\n - \r\n {availableOptions.map(option => {\r\n const isActive = activeOption && (option.colorValue.id === activeOption.colorValue.id);\r\n const styles = getOptionStyles(option.colorValue);\r\n return (\r\n
- optionsButtonClick(option)}\r\n style={styles}/>\r\n )\r\n })}\r\n
\r\n \r\n cartButtonClick(imageCanvas)}>\r\n \r\n \r\n \r\n \r\n {/* cartButtonClick(imageCanvas)}>*/}\r\n {/* */}\r\n {/* */}\r\n
\r\n )}\r\n -1) ? \" look-context--bottom-popper--wizard\" : \"\")\r\n + (!isMobile && (lookActiveCategory || (wizardActiveItem && wizardActiveStep > -1)) ? \" look-context--bottom-popper--with-features\" : \"\")\r\n + (!isMobile && showFeaturesOnly ? \" look-context--bottom-popper--featuresOnly\" : \"\")}\r\n ref={anchorRef}>\r\n \r\n \r\n
\r\n )\r\n};\r\n\r\nconst mapStateToProps = (store) => {\r\n const {lookActiveFeature, lookActiveCategory, lookCompatabilityAlert} = store.lookState;\r\n const {isMobile} = store.serverState;\r\n const {wizardActiveItem, wizardActiveStep} = store.wizardState;\r\n const {isSquareFootageEnabled} = store.sqftState;\r\n const {canvasCount} = store.bathroomVisualizerState;\r\n\r\n return {\r\n canvasCount,\r\n lookActiveFeature,\r\n lookActiveCategory,\r\n lookCompatabilityAlert,\r\n isMobile,\r\n wizardActiveItem,\r\n wizardActiveStep,\r\n isSquareFootageEnabled,\r\n };\r\n};\r\n\r\nexport default connect(mapStateToProps)(LookNotInVisualizerPopper)\r\n","import React, {useRef} from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport LookIntroPopper from \"./lookIntroPopper\";\r\nimport {LOOK_INTRO_STEPS} from \"../../core/constants\";\r\n\r\nconst LookIntroFooterAnchor = (props) => {\r\n\r\n const {introStep, isMobile, currentStep} = props;\r\n const anchorRef = useRef(null);\r\n\r\n if (!introStep) {\r\n return null\r\n }\r\n\r\n return (\r\n \r\n
\r\n \r\n {checkFeature ? : null}\r\n
\r\n \r\n
\r\n This specific product does not display in the visualizer. Please view gallery image examples.
\r\n\r\n
\r\n )\r\n};\r\n\r\nconst mapStateToProps = (store) => {\r\n const {introStep} = store.lookState;\r\n const {isMobile} = store.serverState;\r\n return {\r\n introStep,\r\n isMobile,\r\n };\r\n};\r\n\r\nexport default connect(mapStateToProps)(LookIntroFooterAnchor)\r\n","import React, {Fragment, useEffect} from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport PropTypes from \"prop-types\";\r\n\r\nimport {featureInterface} from \"../../../../../interfaces/featureInterface\";\r\nimport LookFeatureImage from \"./lookFeatureImage\";\r\nimport FeatureName from \"../../../../visComponents/featureName\";\r\nimport LookFeatureOptions from \"./lookFeatureOptions\";\r\nimport {setLookActiveCategory, setLookOverlayOpened} from \"../../../../../actions/lookFunctions\";\r\nimport MaterialSpinner from \"../../../../ui/materialSpinner\";\r\nimport {updateCanvasCount} from \"../../../../../actions/actionFunctions\";\r\nimport LookFeatureMatchingStyleAlert from \"./lookFeatureMatchingStyleAlert\";\r\n// import LookFeatureMobileButtons from \"./lookFeatureMobileButtons\";\r\nimport LookFeatureRemoveButton from \"../lookFeatureRemoveButton\";\r\nimport GroheMobileFeatureTop from \"../../../grohe/groheMobile/groheMobileFeature/groheMobileFeatureTop\";\r\nimport LookFeatureColorMatch from \"./lookFeatureColorMatch\";\r\nimport GroheFeatureOptions from \"../../../grohe/groheNavigation/groheFeature/groheFeatureOptions\";\r\nimport {getFeatureIsLocked} from \"../../../../../misc/helpers\";\r\nimport GroheFeatureLockedBadge from \"../../../grohe/groheNavigation/groheFeature/groheFeatureLockedBadge\";\r\nimport LookFeatureRevertButton from \"./lookFeatureRevertButton\";\r\n// import LookFeatureAddToCartButton from \"./lookFeatureAddToCartButton\";\r\n// import GroheFeatureQuantity from \"../../../grohe/groheNavigation/groheFeature/groheFeatureQuantity\";\r\n// import LookFeatureChangeButton from \"./lookFeatureChangeButton\";\r\nimport store from \"../../../../../store\";\r\nimport {usePrevious} from \"../../../../../misc/helperHooks\";\r\n// import LookFeatureCallForPricingButton from \"./lookFeatureCallForPricingButton\";\r\nimport LookFeatureUnlockButton from \"./lookFeatureUnlockButton\";\r\nimport GroheFeatureTopButtons from \"../../../grohe/groheNavigation/groheFeature/groheFeatureTopButtons\";\r\nimport {useViewItemAnalyticsEvent} from \"../../../hocs/analyticsEventHooks\";\r\nimport LookFeatureNotInStock from \"./lookFeatureNotInStock\";\r\nimport LookFeatureSku from \"./lookFeatureSku\";\r\nimport {IS_LIXIL_SERVERS} from \"../../../../../config\";\r\nimport FeatureInfoBrand from \"../../../../selectionWindow/selectionFeatureInfo/featureInfoBrand\";\r\nimport GroheFeatureMoreInfoButton from \"../../../grohe/groheNavigation/groheFeature/groheFeatureMoreInfoButton\";\r\nimport LookFeaturePairPrice from \"../lookListFeature/lookFeaturePairPrice\";\r\n\r\n\r\nconst LookFeature = (props) => {\r\n\r\n const {lookActiveFeature, lookActiveCategory, isMobile, fabricatorData, leadCaptureClickCount,\r\n wizardActiveItem} = props;\r\n const fabricatorSettings = fabricatorData.settings;\r\n\r\n const featureIsLocked = getFeatureIsLocked(lookActiveFeature);\r\n const prevActiveFeature = usePrevious(lookActiveFeature);\r\n\r\n useEffect(() => {\r\n if (!prevActiveFeature && lookActiveFeature && featureIsLocked && (!fabricatorSettings.clickLeadCapture || ((leadCaptureClickCount + 1) >= fabricatorSettings.clickLeadCount))) {\r\n window.clearTimeout(window.lookLeadCaptureId);\r\n window.lookLeadCaptureId = setTimeout(() => {\r\n const {lookState} = store.getState();\r\n if (lookState.lookActiveFeature) {\r\n // show locked overlay here\r\n // setLookOverlayOpened(LOOK_OVERLAYS.leadCapture);\r\n }\r\n }, 3000)\r\n }\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [lookActiveFeature]);\r\n\r\n useViewItemAnalyticsEvent(lookActiveFeature, wizardActiveItem, fabricatorSettings);\r\n\r\n if (!lookActiveFeature) {\r\n if (lookActiveCategory) {\r\n return \r\n {isMobile ? null :
\r\n )\r\n};\r\n\r\nLookFeature.propTypes = {\r\n lookFeature: PropTypes.shape(featureInterface),\r\n}\r\n\r\nconst mapStateToProps = (store) => {\r\n const {lookActiveFeature, lookActiveCategory} = store.lookState;\r\n const {isMobile} = store.serverState;\r\n const {isPhoneNumberValidated, leadCaptureClickCount} = store.userState; // to update component when user is logged in\r\n const {wizardActiveItem} = store.wizardState;\r\n\r\n return {\r\n lookActiveFeature,\r\n lookActiveCategory,\r\n isMobile,\r\n isPhoneNumberValidated,\r\n leadCaptureClickCount,\r\n fabricatorData: store.fabricatorState,\r\n wizardActiveItem,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n setLookActiveCategory,\r\n updateCanvasCount,\r\n setLookOverlayOpened,\r\n};\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(LookFeature)\r\n","import React, {useEffect, useState, Fragment} from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport {FormattedMessage, injectIntl} from \"react-intl\";\r\nimport { withRouter } from \"react-router-dom\";\r\n\r\nimport IconButton from \"@mui/material/IconButton\";\r\nimport ChevronLeftIcon from '@mui/icons-material/ChevronLeft';\r\n\r\nimport {getFeatureGroupName} from \"../../../../../misc/helpers\";\r\nimport LookViewTypeSwitcher from \"../lookViewTypeSwitcher\";\r\nimport {setLookActiveCategory, setLookActiveFeature} from \"../../../../../actions/lookFunctions\";\r\nimport LookCanvasContext from \"../../../lookCanvasContext\";\r\nimport {zoomCanvasOut} from \"../../lookFunctions\";\r\nimport {setCanvasScale} from \"../../../../../actions/actionFunctions\";\r\nimport {getFeatureParent, getLookIdUrl} from \"../../lookFunctions2\";\r\nimport LookMainHeaderCloseButton from \"../lookMainHeaderCloseButton\";\r\nimport Analytics, {LOOK_JOURNEY_ANALYTIC_EVENTS} from \"../../../../../analytics\";\r\n// import {pricingIsLocked} from \"../../lookNavigationFunctions\";\r\nimport LookFeatureRevertButton from \"../lookFeature/lookFeatureRevertButton\";\r\n// import LookFeatureMatchingStyleAlert from \"../lookFeature/lookFeatureMatchingStyleAlert\";\r\n\r\nconst LookCategoryHeader = (props) => {\r\n\r\n const {intl, activeFeatureId, lookActiveFeature, fabricatorData, history, isMobile, setLookActiveCategory,\r\n setLookActiveFeature, setCanvasScale, lookActiveCategory} = props;\r\n\r\n const [featureGroupName, setFeatureGroupName] = useState(\"\");\r\n\r\n useEffect(() => {\r\n if (lookActiveFeature || lookActiveCategory) {\r\n const featureGroup = getFeatureParent(lookActiveFeature, lookActiveCategory);\r\n setFeatureGroupName(getFeatureGroupName(featureGroup, intl, fabricatorData));\r\n }\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [activeFeatureId, lookActiveCategory]);\r\n\r\n const backButtonClick = (imageCanvas) => {\r\n Analytics.sendClickEvent(LOOK_JOURNEY_ANALYTIC_EVENTS.lookMenuHeaderBack);\r\n setLookActiveCategory(\"\");\r\n setLookActiveFeature(null);\r\n zoomCanvasOut(imageCanvas, setCanvasScale);\r\n history.push(getLookIdUrl());\r\n };\r\n\r\n // const {pricingLocked} = pricingIsLocked();\r\n const showSelectWord = (featureGroupName || \"\").length <= 12;\r\n\r\n return (\r\n \r\n {isMobile ? null : }\r\n {isMobile ? null : }\r\n \r\n \r\n )}\r\n {featureIsLocked || !IS_LIXIL_SERVERS ? null : (\r\n
\r\n {/*\r\n \r\n
\r\n {isMobile ? (\r\n \r\n ) : (\r\n \r\n )}\r\n
\r\n \r\n \r\n
\r\n {isMobile ? (\r\n \r\n
\r\n
\r\n {featureIsLocked ? null : (\r\n
\r\n {featureIsLocked ? \r\n \r\n {/*{fabricatorSettings.callForPricing ?
\r\n )}\r\n \r\n
\r\n {document.kvConfig.visualizerType === \"bvLook\" && !fabricatorData.isEncore ? */}\r\n {/* /!*
*/}\r\n \r\n \r\n
\r\n \r\n backButtonClick(imageCanvas)}>\r\n \r\n backButtonClick(imageCanvas)}>\r\n {showSelectWord ?
\r\n \r\n
\r\n {/*{isMobile && lookActiveFeature ? \r\n backButtonClick(imageCanvas)}>\r\n \r\n backButtonClick(imageCanvas)}>\r\n \r\n \r\n
\r\n \r\n {isMobile && wizardActiveItem ? (\r\n \r\n ) : (\r\n \r\n \r\n )}\r\n
\r\n \r\n
\r\n )\r\n};\r\n\r\nconst mapStateToProps = (store) => {\r\n const {wizardActiveItem, wizardSelectedValues, wizardActiveStep} = store.wizardState;\r\n const {windowWidth, isMobile} = store.serverState;\r\n const fabricatorData = store.fabricatorState;\r\n\r\n return {\r\n wizardActiveItem,\r\n wizardSelectedValues,\r\n wizardActiveStep,\r\n windowWidth,\r\n isMobile,\r\n fabricatorData,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n\r\n};\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(LookMainWizardSelectedSteps)\r\n","import React from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport {withRouter} from \"react-router-dom\";\r\n\r\nimport LookWizardContent from \"./lookWizardContent\";\r\nimport LookCanvasContext from \"../../../lookCanvasContext\";\r\nimport WithUpdateLookCartItem from \"../../../hocs/withUpdateLookCartItem\";\r\nimport LookWizardHeader from \"./lookWizardHeader\";\r\n\r\n\r\nconst LookWizardLmContent = (props) => {\r\n\r\n const {wizardActiveItem, isMobile} = props;\r\n\r\n if (!wizardActiveItem) {\r\n return null\r\n }\r\n\r\n return (\r\n - \r\n {Object.keys(wizardSelectedValues).reverse().map((key) => {\r\n return
\r\n {isMobile ? (\r\n \r\n \r\n ) : null}\r\n \r\n {(imageCanvas) => (\r\n \r\n {(updateLookCartItem) => (\r\n \r\n )}\r\n \r\n )}\r\n \r\n
\r\n )\r\n};\r\n\r\nconst mapStateToProps = (store) => {\r\n const {wizardActiveItem} = store.wizardState;\r\n const {isMobile} = store.serverState;\r\n return {\r\n wizardActiveItem,\r\n isMobile,\r\n };\r\n};\r\n\r\nexport default withRouter(\r\n connect(mapStateToProps)(LookWizardLmContent)\r\n)\r\n","import React from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport {FormattedMessage} from \"react-intl\";\r\nimport PropTypes from \"prop-types\";\r\nimport {withRouter} from \"react-router-dom\";\r\n\r\nimport Grow from '@mui/material/Grow';\r\nimport Paper from '@mui/material/Paper';\r\nimport Popper from '@mui/material/Popper';\r\nimport Button from \"@mui/material/Button\";\r\n\r\nimport {getCurrentGroups} from \"./lookWizardFunctions\";\r\nimport {setWizardActiveStep} from \"../../../../../actions/wizardFunctions\";\r\nimport Analytics, {LOOK_JOURNEY_ANALYTIC_EVENTS} from \"../../../../../analytics\";\r\nimport {getLookIdUrl} from \"../../lookFunctions2\";\r\nimport {setCanvasScale} from \"../../../../../actions/actionFunctions\";\r\nimport {zoomCanvasOut} from \"../../lookFunctions\";\r\nimport LookCanvasContext from \"../../../lookCanvasContext\";\r\n\r\nconst LookWizardCompletedAlertModal = (props) => {\r\n\r\n const {wizardActiveItem, wizardActiveStep, wizardSelectedValues, anchorEl, history, setCanvasScale, fabricatorData,\r\n wizardWasRestored} = props;\r\n\r\n if (!wizardActiveItem) {\r\n return null\r\n }\r\n\r\n const closeWizardButtonClick = (imageCanvas) => {\r\n Analytics.sendClickEvent(LOOK_JOURNEY_ANALYTIC_EVENTS.lookWizardCompletedClose);\r\n zoomCanvasOut(imageCanvas, setCanvasScale);\r\n history.push(getLookIdUrl());\r\n }\r\n\r\n const currentGroups = getCurrentGroups(wizardActiveItem, wizardActiveStep, wizardSelectedValues);\r\n const isCompletedStep = wizardActiveStep > -1 && !currentGroups.length;\r\n\r\n return (\r\n \r\n \r\n
\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {(imageCanvas) => (\r\n \r\n )}\r\n \r\n
\r\n \r\n {isMobile ? (\r\n \r\n {getIcon}\r\n \r\n ) : (\r\n \r\n )}\r\n
\r\n )\r\n};\r\n\r\nconst mapStateToProps = (store) => {\r\n const {lookPageOpened, lookOpened, introStep} = store.lookState;\r\n const {activeTheme, isMobile} = store.serverState;\r\n const fabricatorData = store.fabricatorState;\r\n\r\n return {\r\n activeTheme,\r\n isMobile,\r\n lookPageOpened,\r\n lookOpened,\r\n introStep,\r\n fabricatorData,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n setLookPageOpened,\r\n setLookOpened,\r\n setLookIntroStep,\r\n};\r\n\r\nexport default withRouter(\r\n injectIntl(\r\n connect(mapStateToProps, mapDispatchToProps)(LookRoomIdeasButton)\r\n )\r\n)\r\n","/*eslint-disable strict */\r\nimport \"./polyfills\";\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { Provider } from 'react-redux';\r\nimport store from './store';\r\nimport App from './app';\r\nimport Config from './config';\r\nimport Analytics from './analytics';\r\nimport TranslatesProvider from \"./translatesProvider\";\r\nrequire('es6-promise').polyfill();\r\n\r\nAnalytics.sendEvent('Bathroom-Visualizer-Loaded');\r\nwindow.resetMixpanelId = () => Analytics.logOutMixPanel();\r\n\r\nReactDOM.render(\r\n