\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","export const LayoutType = {\r\n Small: 0,\r\n SmallWithPopout: 1,\r\n SmallWithPeninsula: 2,\r\n SmallWithIsland: 3,\r\n SmallWithPopoutWithPeninsula: 4,\r\n SmallWithPopoutWithIsland: 5,\r\n SmallWithPeninsulaWithIsland: 6,\r\n SmallWithPopoutWithPeninsulaWithIsland: 7,\r\n LShape: 8,\r\n LShapeWithPeninsula: 9,\r\n LShapeWithIsland: 10,\r\n LShapeWithPeninsulaWithIsland: 11,\r\n};\r\n\r\nexport const LayoutAbbreviation = {\r\n All: \"ALL\",\r\n Small: \"S\",\r\n SmallWithPopout: \"SP\",\r\n SmallWithPeninsula: \"SN\",\r\n SmallWithIsland: \"SI\",\r\n SmallWithPopoutWithPeninsula: \"SPN\",\r\n SmallWithPopoutWithIsland: \"SPI\",\r\n SmallWithPeninsulaWithIsland: \"SNI\",\r\n SmallWithPopoutWithPeninsulaWithIsland: \"SPNI\",\r\n LShape: \"L\",\r\n LShapeWithPeninsula: \"LN\",\r\n LShapeWithIsland: \"LI\",\r\n LShapeWithPeninsulaWithIsland: \"LNI\",\r\n};\r\n\r\nexport const LayoutAbbreviations = [\"S\",\"SP\",\"SN\",\"SI\",\"SPN\",\"SPI\",\"SNI\",\"SPNI\",\"L\",\"LN\",\"LI\",\"LNI\"];\r\nexport const LayoutAbbreviationsToRemove = [\"LSP\",\"LNI\",\"LI\",\"LN\",\"L\",\"SPNI\",\"SNI\",\"SPI\",\"SPN\",\"SI\",\"SN\",\"SP\",\"S\"];\r\n\r\nexport const PLACEMENTS = {\r\n Island: \"Island\",\r\n Countertop: \"Countertop\"\r\n};\r\n\r\nexport const MODULE_CONTEXT_MENU_TYPES = {\r\n Filters: \"Filters\",\r\n SliceButtons: \"SliceButtons\",\r\n};\r\nexport const MODULE_CONTEXT_MENU_DIRECTIONS = {\r\n Vertical: \"Vertical\",\r\n Horizontal: \"Horizontal\"\r\n};\r\n\r\nexport const CABINET_WIZARD_BUTTONS = [{\r\n text: \"All products\",\r\n buttonId: \"all_products\",\r\n},{\r\n text: \"Door style\",\r\n filtersGroupName: \"DoorStyle\",\r\n buttonId: \"door_style\",\r\n},{\r\n text: \"Wood type\",\r\n filtersGroupName: \"WoodType\",\r\n buttonId: \"wood_type\",\r\n},{\r\n text: \"Stain / color\",\r\n filtersGroupName: \"StainColor\",\r\n buttonId: \"stain_color\",\r\n},{\r\n text: \"Inlay type\",\r\n filtersGroupName: \"Inlay Type\",\r\n buttonId: \"inlay_type\",\r\n}];\r\n\r\nexport const COUNTERTOP_WIZARD_BUTTONS = [{\r\n text: \"Stone\",\r\n pluralText: \"Stones\",\r\n buttonId: \"all_products\",\r\n},{\r\n text: \"Color\",\r\n pluralText: \"Color\",\r\n filtersGroupName: \"Stone Color\",\r\n buttonId: \"color\",\r\n},{\r\n text: \"Material\",\r\n pluralText: \"Materials\",\r\n filtersGroupName: \"Stone Material\",\r\n buttonId: \"materials\",\r\n},{\r\n text: \"Edge\",\r\n pluralText: \"Edges\",\r\n filtersGroupName: \"Edge Profile\",\r\n buttonId: \"edges\",\r\n},{\r\n text: \"Backsplash\",\r\n pluralText: \"Backsplash\",\r\n buttonId: \"backsplash\",\r\n}];\r\n\r\nexport const wizardAllButton = {\r\n id: \"All\",\r\n value: \"All\",\r\n displayText: \"All\",\r\n parent_id: null,\r\n icon: \"\",\r\n lockedInWizard: false,\r\n filterGroup_id: 0,\r\n additionalImages: []\r\n};\r\n\r\nexport const BACKSPLASH_TYPES = [\"4in\", \"6in\", \"18in\"];\r\n\r\nexport const METADATA = {\r\n ALL: \"ALL\"\r\n};\r\n\r\nexport const COUNTERTOP_GROUP = [\"countertop\", \"center_island_countertop\", \"backsplash\"];\r\nexport const CABINET_GROUP = [\"top_cabinet\", \"bottom_cabinet\", \"center_island_cabinet\", \"fridge_enclosure\", \"tall_cabinet\"];\r\nexport const EDGE_GROUP = [\"edge\", \"edge_profile\", \"center_island_edge\"];\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 \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","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","import find from 'lodash/find';\r\nimport last from 'lodash/last';\r\n\r\nimport {splitFeatureName, iStartWith} from \"../../../../misc/utils\";\r\nimport DesignNavigationItem from \"../../../visComponents/designNavigationItem\";\r\nimport {Part} from \"./part\";\r\nimport store from '../../../../store';\r\nimport {LayoutAbbreviation} from \"../constants\";\r\nimport {getFeatureIsLocked} from \"../../../../misc/helpers\";\r\n\r\nconst RgCabinetSize = /[0-9]+/g;\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 {displayName, sharedFeatureName} = 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\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 (iStartWith(displayName, 'Vanity -') || dbFeature.groupName === \"Vanity\") {\r\n if (displayName === \"Vanity - Placeholder D[For=Custom]\") {\r\n part.vanitySize = 72;\r\n } else {\r\n const fromName = sharedFeatureName || displayName || \"\";\r\n const lastDigit = last(fromName.match(RgCabinetSize));\r\n part.vanitySize = lastDigit ? lastDigit.slice(-2) : ''; // take two last digits from the name\r\n }\r\n\r\n }\r\n\r\n part.partName = featureName;\r\n part.metaData = dbFeature.metaData || {};\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 || !dbFeature.s3Bindings.some(binding => binding.bucketName === \"brv\");\r\n\r\n let arrayOfBindings = [];\r\n if(dbFeature.s3Bindings) {\r\n dbFeature.s3Bindings.forEach((binding) => {\r\n if (!arrayOfBindings.includes(\"Small\")\r\n && (binding.layout === LayoutAbbreviation.All || binding.layout === LayoutAbbreviation.Small)) {\r\n arrayOfBindings.push(\"Small\");\r\n }\r\n if (!arrayOfBindings.includes(\"Large\") &&\r\n (binding.layout === LayoutAbbreviation.All || binding.layout === LayoutAbbreviation.Large)) {\r\n arrayOfBindings.push(\"Large\");\r\n }\r\n });\r\n }\r\n\r\n arrayOfBindings.forEach(layoutName => {\r\n this[features+\"List\"][layoutName].push(part);\r\n });\r\n\r\n if (part.notAvailableInVisualizer || !arrayOfBindings.length) { // features not in visualizer should be shown in the QuotingTool\r\n part.notAvailableInVisualizer = true;\r\n Object.keys(LayoutAbbreviation).forEach(layoutName => {\r\n if (layoutName !== \"All\") {\r\n this[features+\"List\"][layoutName].push(part);\r\n }\r\n })\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\r\n let conditionPassed = feature.matchesMetaForCondition(propName, propValue);\r\n if (propName === \"EX L\" && !conditionPassed) {\r\n conditionPassed = feature.matchesMetaForCondition(\"Wall\", propValue);\r\n }\r\n return conditionPassed\r\n\r\n // let {propName, propValue} = conditionObject;\r\n // const excludeProperty = propName.includes('-exclude');\r\n // if (excludeProperty) {\r\n // propName = propName.split('-exclude')[0];\r\n // }\r\n // return excludeProperty\r\n // ? feature.matchesMetaForCondition(propName, propValue)\r\n // : feature.matchesMetaForCondition(propName, propValue)\r\n });\r\n })\r\n }\r\n\r\n // navigationSubItemsWithFilterMultipleConditionsWithInactive(arrayOfConditions, featuresToCheck = this.features) { // shows all items & sets not mathing array\r\n // const refactoredArray = featuresToCheck.map((feature) => {\r\n // feature.matchesMetaFailed = false;\r\n // feature.matchesMetaFailedArray = [];\r\n // arrayOfConditions.forEach((conditionObject) => {\r\n // const {propName, propValue} = conditionObject;\r\n // let conditionPassed = feature.matchesMetaForCondition(propName, propValue);\r\n // if (propName === \"EX L\" && !conditionPassed) {\r\n // conditionPassed = feature.matchesMetaForCondition(\"Wall\", propValue);\r\n // }\r\n // if (!conditionPassed) {\r\n // feature.matchesMetaFailed = true;\r\n // feature.matchesMetaFailedArray.push(propName);\r\n // }\r\n // });\r\n //\r\n // return feature\r\n // });\r\n // return orderBy(refactoredArray, ['matchesMetaFailed'],['asc']).map(_ => new DesignNavigationItem(_.featureName, _));\r\n // }\r\n\r\n setDefault() {\r\n if (!this.tryToSetTheSameFeature(this.features)) {\r\n this.activeFeature = this.features && this.features[0] || null;\r\n this.placeholderFeature = this.features && this.features.find((feature) => {\r\n return feature.dbFeature.displayName && feature.dbFeature.displayName.includes(\"laceholder\");\r\n });\r\n }\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 setFeatureLayer(currentFeature, layout) {\r\n // console.log('currentFeature', currentFeature);\r\n if (!currentFeature || !currentFeature.dbFeature)\r\n return; //feature no longer exists\r\n const layoutAbr = layout.getCurrentLayoutAbbreviation();\r\n\r\n let s3Binding = find(currentFeature.dbFeature.s3Bindings,\r\n {entityID: this.featureDefinitionId(currentFeature), layout: layoutAbr});\r\n if (!s3Binding) {\r\n s3Binding = find(currentFeature.dbFeature.s3Bindings,\r\n {entityID: this.featureDefinitionId(currentFeature), layout: LayoutAbbreviation.All});\r\n }\r\n // !!! we need to check, either a specific layout or ALL layout only !!!\r\n // if (!s3Binding) {\r\n // s3Binding = find(currentFeature.dbFeature.s3Bindings,\r\n // {entityID: this.featureDefinitionId(currentFeature)});\r\n // }\r\n currentFeature.layer.fromS3Binding(s3Binding);\r\n }\r\n\r\n clickFromAllWalls(ignoreLocked) {\r\n this.handleClick(ignoreLocked, \"all_walls\");\r\n }\r\n\r\n tryToSetTheSameFeature(filteredFeatures, partName, placeholderName, shadowNeeded = false) {\r\n if (this.activeFeature) {\r\n const activeName = this.activeFeature.getSplittedFeatureName();\r\n this.activeFeature = filteredFeatures.find(feature => {\r\n const featureName = feature.getSplittedFeatureName();\r\n return activeName === featureName\r\n }) || null;\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 (shadowNeeded) {\r\n this.setShadowFeature();\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 setShadowFeature() {\r\n const parentGroup = this.getParent();\r\n let filteredAvailableFeatures = [];\r\n if (parentGroup.shadows && parentGroup.shadows.features && parentGroup.shadows.features.length) {\r\n const layoutAbr = this.getParent().layout.getCurrentLayoutAbbreviation();\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 && this.shadowName && shadowFeature.partName === this.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 getFeatureWithMeta(featuresArray, metaName, metaValue) {\r\n return featuresArray.find((feature) => {\r\n return feature.metaData[metaName] && feature.metaData[metaName].includes(metaValue);\r\n });\r\n }\r\n\r\n getFeaturesWithMeta(featuresArray, metaName, metaValue) {\r\n return featuresArray.filter((feature) => {\r\n return feature.metaData[metaName] && feature.metaData[metaName].includes(metaValue);\r\n });\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 /** 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 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 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 && 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 /**\r\n * Returns matching feature (for example: return Mirrors with the same Color and DoorStyle as current selected Vanity)\r\n * @param feature {object} // current feature\r\n * @param activeFilterValueIDs {object} // current activeFeature filters (that needed to be matched)\r\n * @param filter1 {object} // featureGroup1\r\n * @param filter2 {object} // featureGroup2\r\n */\r\n static featureHasFilters(feature, activeFilterValueIDs, filter1, filter2) {\r\n const filterValueIDs = feature.dbFeature && feature.dbFeature.filterValueIDs;\r\n if (filterValueIDs) {\r\n const hasValues = filterValueIDs[filter1.id]\r\n && filterValueIDs[filter2.id]\r\n && activeFilterValueIDs[filter1.id]\r\n && activeFilterValueIDs[filter2.id]\r\n && filterValueIDs[filter1.id].includes(activeFilterValueIDs[filter1.id][0])\r\n && filterValueIDs[filter2.id].includes(activeFilterValueIDs[filter2.id][0]);\r\n // hasValues ? console.log('match-', feature) : null;\r\n return hasValues || false // false is needed here, because true !> undefined\r\n }\r\n return false\r\n }\r\n\r\n getSplittedFeatureName = () => {\r\n if(this._customDisplayName == null) {\r\n this._customDisplayName = this.getFeatureName()\r\n // .replace(/ 30/g, \"\") // we can't do that since room layout change is broken after that\r\n // .replace(/ 60/g, \"\")\r\n // .replace(/ LG/g, \"\")\r\n // .replace(/ SM/g, \"\");\r\n }\r\n return this._customDisplayName\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 getMatchingFeatureName = () => {\r\n return this.getSplittedFeatureName()\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, toFixedPrice,\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_DEALER_FLOW, IS_OFFLINE_MODE, IS_QKB_UI,\r\n IS_DASHBOARD_MESSAGING} 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 getDepositAmount,\r\n getPriceWorkSheetSaveValues,\r\n isSaveOnlyDiscount\r\n} from \"../bvcomponents/priceWorksheet/discountFunctions\";\r\nimport {getDifferentCurrencyCartItems} from \"../misc/misc2\";\r\nimport {setDealerUserFromFabricator} from \"../misc/userFunctions\";\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 && !IS_DASHBOARD_MESSAGING) {\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 differentCurrencyObjects = getDifferentCurrencyCartItems(fabricatorState.settings, cartState.cartItems);\r\n const anotherCurrencies = differentCurrencyObjects.length ? JSON.stringify(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 total,\r\n currency: currObject.currency,\r\n }\r\n })) : \"\";\r\n const totalWithTaxes = getQuotePriceWithTaxes(totalPrice);\r\n const customDeposit = +getDepositAmount(priceWorksheetState.discountSections, grandTotal, fabricatorState) || 0;\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,\r\n customDeposit,\r\n balance: totalWithTaxes && customDeposit ? +((grandTotal - customDeposit).toFixed(2)) : totalWithTaxes,\r\n anotherCurrencies,\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 isDealerFlow: IS_DEALER_FLOW,\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 && !IS_DASHBOARD_MESSAGING) {\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 && !IS_DASHBOARD_MESSAGING) {\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 if (IS_DEALER_FLOW) {\r\n setDealerUserFromFabricator(response.data.fabricatorData);\r\n }\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","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\r\nexport const setWizardAllowSkipDoneSteps = (wizardAllowSkipDoneSteps) => ({\r\n type: types.SET_WIZARD_ALLOW_SKIP_DONE_STEPS,\r\n payload: {wizardAllowSkipDoneSteps}\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\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","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 {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 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 loadAsBV6(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 === \"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 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 * @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 * 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 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","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, SQFT_APPLIANCES} 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, shouldOnlyRenderText = false) => {\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 shouldOnlyRenderText: shouldOnlyRenderText,\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 isShapePlacedOnTheFloor = getIsShapePlacedOnTheFloor(shape);\r\n const isShapePlacedOnTheWall = getIsShapePlacedOnTheWall(shape);\r\n\r\n const isTestShapePlacedOnTheFloor = getIsShapePlacedOnTheFloor(testShape);\r\n const isTestShapePlacedOnTheWall = getIsShapePlacedOnTheWall(testShape);\r\n\r\n return (shape.id !== testShape.id &&\r\n (isShapePlacedOnTheWall && isTestShapePlacedOnTheWall)\r\n || (isShapePlacedOnTheFloor && isTestShapePlacedOnTheFloor)\r\n )\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 || shape.subType === SHAPE_PART_ID.fridge\r\n || shape.subType === SHAPE_PART_ID.stove\r\n || shape.subType === SQFT_APPLIANCES.range\r\n || shape.subType === SQFT_APPLIANCES.sink\r\n || shape.subType === SQFT_APPLIANCES.doubleSink\r\n || shape.subType === SQFT_APPLIANCES.dishwasher\r\n || shape.subType === SQFT_APPLIANCES.iceMachine\r\n || shape.subType === SQFT_APPLIANCES.oven\r\n || shape.subType === SQFT_APPLIANCES.stovetop\r\n || shape.subType === SQFT_APPLIANCES.trashCompactor\r\n || shape.subType === SQFT_APPLIANCES.wineFridge\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 || shape.subType === SQFT_APPLIANCES.hood\r\n)}\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","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","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 isOpened: true,\r\n confirmCallback: () => {\r\n const reduxState = store.getState();\r\n const selectedPartIds = reduxState.sqftResourceState.selectedPartIds\r\n const shapes = workspace.getShapesWithoutAttachedResources();\r\n const selectedShapes = shapes.filter(shape => selectedPartIds.includes(shape.partId));\r\n for (const selectedShape of selectedShapes) {\r\n selectedShape.shapeCabinet.deleteAttachedFeatures();\r\n selectedShape.shapeCabinet.generateAttachedFeatures();\r\n }\r\n closeSQFTPopup();\r\n },\r\n confirmText: workspace.intl.formatMessage({id: \"sqft.popup.button.generate\"}),\r\n cancelCallback: closeSQFTPopup,////closePopup,\r\n cancelText: workspace.intl.formatMessage({id: \"sqft.popup.button.cancel\"}),\r\n }\r\n ));\r\n }\r\n }\r\n\r\n return itemClickCallback;\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 {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 = () => {\r\n\r\n const {wizardState, cartState, quotesState} = store.getState();\r\n const {wizardActiveItem, wizardActiveStep, wizardSelectedValues, wizardAllowSkipDoneSteps} = wizardState;\r\n const {cartItems} = cartState;\r\n const {activeQuoteIndex} = quotesState;\r\n\r\n let nextStep = wizardActiveStep + 1;\r\n\r\n if (!wizardAllowSkipDoneSteps) {\r\n return nextStep // use new logic with skip only first time\r\n }\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 wizardSteps.forEach(wizardStep => { // here we are checking steps that should be skipped!\r\n // because they are already selected in another similar wizard group\r\n if (!wizardValues[wizardStep.stepIndex]\r\n && wizardStep.stepGroups.length === 1\r\n && wizardStep.stepGroups[0].hidePriceNoCart) {\r\n const similarSelectedWizardStep = Object.keys(wizardValues).find(key => {\r\n return wizardValues[key].wizardGroup\r\n && (wizardValues[key].wizardGroup.groupName === wizardStep.stepGroups[0].groupName)\r\n && (cartItems.some(cartItem => {\r\n return cartItem.fromWizardGroupId === wizardValues[key].wizardGroup.id\r\n && (wizardValues[key].selectedFeature === cartItem.cartFeature) // make 100% sure!\r\n }))\r\n });\r\n if (similarSelectedWizardStep) {\r\n wizardValues[wizardStep.stepIndex] = { // make it selected too\r\n wizardGroup: wizardStep.stepGroups[0], // with it's own wizard group\r\n partId: wizardValues[similarSelectedWizardStep].partId, // but with same values\r\n selectedFeature: wizardValues[similarSelectedWizardStep].selectedFeature, // but with same values\r\n }\r\n if (!shouldUpdate) {\r\n shouldUpdate = true;\r\n }\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 {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 {\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 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 $ 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, headers) {\r\n return axiosController ? AxiosInstance.get(url, {\r\n signal: axiosController.signal\r\n }) : AxiosInstance.get(url, headers ? {headers} : undefined)\r\n}\r\n\r\nfunction _post(url, data, headers = null) {\r\n return AxiosInstance.post(url, data, headers ? {headers} : {\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 static loginAdmin(data) {\r\n return _post(`${_getUrlBase()}/api/admin-edit/token`, data);\r\n }\r\n static postEditFeatures(data, headers) {\r\n return _post(`${_getUrlBase()}/api/admin-edit/${document.kvConfig.userId}/update-features`, data, headers);\r\n }\r\n static setShipToAddress(data, headers) {\r\n return _post(`${_getUrlBase()}/api/public/setShipToAddress`, data, headers);\r\n }\r\n static getShipToAddress(headers) {\r\n return _get(`${_getUrlBase()}/api/public/getShipToAddress/${document.kvConfig.jobId}`, null, headers);\r\n }\r\n}\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 {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 Object.keys(LayoutType).forEach(layoutName => {\r\n this.featuresList[layoutName] = [];\r\n this.featuresPartsList[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 this.confirmedChange = false; // same as firstClick, but fires after someone changes feature and confirms changes\r\n this.featureBeforeChange = null; // feature that sets when menu is opened (to revert it back if user didn't confirm change)\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\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 (name === \"WaterLevel\" && this.partId === \"vanity_faucet\") {\r\n return this.metaData[\"Height\"] && this.metaData[\"Height\"] > value\r\n }\r\n if (name === \"SinkWidth\" && this.partId === \"vanity_sink\") {\r\n // if no metadata - return true! back compatability\r\n return !this.metaData[\"SinkWidth\"] || (this.metaData[\"SinkWidth\"] < value)// current sink should be smaller than Vanity\r\n }\r\n if (name === \"MountLevel\" && this.partId === \"vanity_sink\"\r\n && (!Array.isArray(this.metaData[\"MountType\"]) || !this.metaData[\"MountType\"].includes(\"V\"))) {\r\n // sinks without the MountType V should ignore MountLevel metaData, they should be checked my MountType only\r\n return true\r\n }\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 {baseNewImagesPath} from \"../../assets\";\r\n\r\nexport const applianceThumbnail = `${baseNewImagesPath}images/kv-icons/kv-filter-icons-stove.svg`;\r\nexport const cabinetThumbnail = `${baseNewImagesPath}images/kv-icons/top_cabinet.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\nexport const floorThumbnail = `${baseNewImagesPath}images/bv_icons_new/Icons_Floor.svg`;\r\n\r\nexport const largeLayoutShadow = `${baseNewImagesPath}images/bv-assets/KV-All-Global-Shadow-Placeholder_L_1620x1080.png`;\r\nexport const SmallLayoutShadow = `${baseNewImagesPath}images/bv-assets/KV-All-Global-Shadow-Placeholder_S_1620x1080.png`;\r\n\r\n/*layouts*/\r\nexport const LayoutThumbnails = {\r\n Small: `${baseNewImagesPath}images/kv-layout-thumbnails/S.png`,\r\n SmallWithPopout: `${baseNewImagesPath}images/kv-layout-thumbnails/SP.png`,\r\n SmallWithPeninsula: `${baseNewImagesPath}images/kv-layout-thumbnails/SN.png`,\r\n SmallWithIsland: `${baseNewImagesPath}images/kv-layout-thumbnails/SI.png`,\r\n SmallWithPopoutWithPeninsula: `${baseNewImagesPath}images/kv-layout-thumbnails/SPN.png`,\r\n SmallWithPopoutWithIsland: `${baseNewImagesPath}images/kv-layout-thumbnails/SPI.png`,\r\n SmallWithPeninsulaWithIsland: `${baseNewImagesPath}images/kv-layout-thumbnails/SNI.png`,\r\n SmallWithPopoutWithPeninsulaWithIsland: `${baseNewImagesPath}images/kv-layout-thumbnails/SPNI.png`,\r\n LShape: `${baseNewImagesPath}images/kv-layout-thumbnails/L.png`,\r\n LShapeWithPeninsula: `${baseNewImagesPath}images/kv-layout-thumbnails/LN.png`,\r\n LShapeWithIsland: `${baseNewImagesPath}images/kv-layout-thumbnails/LI.png`,\r\n LShapeWithPeninsulaWithIsland: `${baseNewImagesPath}images/kv-layout-thumbnails/LNI.png`,\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 deleteChangeValuePopup,\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, FREE_FORM_THICKNESS_POPUP_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\nimport toolsControllers from \"../../store/toolsControllers\";\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 } else if (activeButton === SIDEBAR_SHAPE_BUTTONS.shapeFreeForm\r\n && !workspace.getHoverPoint()\r\n ) {\r\n toolsControllers.shapeFreeForm.initDraw(isWallsLockMode);\r\n toolsControllers.shapeFreeForm.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 toolsControllers.shapeFreeForm.drawFinish();\r\n toolsControllers.shapeFreeForm.closeThicknessPopup();\r\n sqftShapeManager.disableRotatableStateForAllShapes();\r\n store.dispatch(deleteChangeValuePopup(FREE_FORM_THICKNESS_POPUP_ID));\r\n};\r\n\r\n\r\n\r\nexport default new WorkspaceEvents();\r\n","import React from \"react\";\r\nimport {FormattedMessage} from \"react-intl\";\r\n\r\nimport Analytics from './../../analytics';\r\nimport store from \"../../store\";\r\nimport {UserPopupTypes} from \"../visComponents/constants\";\r\n\r\nconst LockedView = (props) => {\r\n const fabricatorSettings = store.getState().fabricatorState.settings;\r\n const getQuoteEnabled = fabricatorSettings.enableQuote;\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","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","/**\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\n/**\r\n * @param key {string} key\r\n */\r\nexport const getLocalStorageItem = (key) => {\r\n let item = null;\r\n try {\r\n const value = window.localStorage.getItem(key);\r\n if (value) {\r\n item = JSON.parse(value);\r\n }\r\n } catch (ex) { console.log(\"localStorage exception\", ex); }\r\n return item\r\n}\r\n\r\n/**\r\n * @param key {string} key\r\n * @param value {any}\r\n */\r\nexport const setSessionStorageItem = (key, value) => {\r\n try {\r\n window.sessionStorage.setItem(key, value);\r\n } catch (ex) { console.log(\"sessionStorage exception\", ex); }\r\n}\r\n/**\r\n * @param key {string} key\r\n */\r\nexport const removeSessionStorageItem = (key) => {\r\n try {\r\n window.sessionStorage.removeItem(key);\r\n } catch (ex) { console.log(\"sessionStorage removeItem exception\", ex); }\r\n}\r\n\r\n/**\r\n * @param key {string} key\r\n * @param withParse {boolean}\r\n */\r\nexport const getSessionStorageItem = (key, withParse = true) => {\r\n let item = null;\r\n try {\r\n const value = window.sessionStorage.getItem(key);\r\n item = (value && withParse) ? JSON.parse(value) : value;\r\n } catch (ex) { console.log(\"sessionStorage exception\", ex); }\r\n return item\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 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 } 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 // {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 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 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 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 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 } 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 : 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
\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 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","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 * 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 hidePriceNoCart: PropTypes.bool,\r\n skipLockDontApply: PropTypes.bool,\r\n dontMatchFeaturesBySku: 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 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) {\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 {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 * as PropTypes from \"prop-types\";\r\n\r\nexport const DISCOUNT_MAIN_TYPES = {\r\n custom: \"custom\",\r\n freeFill: \"freeFill\",\r\n subTotal: \"subTotal\",\r\n nested: \"nested\",\r\n finance: \"finance\",\r\n deposit: \"deposit\",\r\n};\r\n\r\nexport const DISCOUNT_TYPES = {\r\n price: \"Price\",\r\n percent: \"Percent\"\r\n};\r\n\r\nexport const DISCOUNT_MODES = {\r\n and: \"And\",\r\n or: \"Or\"\r\n};\r\n\r\nexport const DISCOUNT_SECTION_TYPES = {\r\n default: \"default\",\r\n finance: \"finance\"\r\n};\r\n\r\nexport const DISCOUNT_FINANCE_CELLS = {\r\n financePercentage: \"Finance Percentage\",\r\n financeMonths: \"Months\",\r\n financeSalesPercentage: \"Sales Person Percentage\",\r\n}\r\n\r\nexport const discountInterFace = {\r\n id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,\r\n order: PropTypes.number.isRequired,\r\n name: PropTypes.string.isRequired,\r\n enabled: PropTypes.bool.isRequired,\r\n type: PropTypes.oneOf([DISCOUNT_TYPES.price, DISCOUNT_TYPES.percent]).isRequired,\r\n mode: PropTypes.oneOf([DISCOUNT_MODES.and, DISCOUNT_MODES.or]).isRequired,\r\n amount: PropTypes.number.isRequired,\r\n isRidged: PropTypes.bool.isRequired,\r\n isSubTotal: PropTypes.bool,\r\n selected: PropTypes.bool, // it is not required, since it is not stored on the backend\r\n // specialVisible: PropTypes.bool, // it is not required, since it is not stored on the backend // we don't have it anymore\r\n oldDeleted: PropTypes.bool, // it is not required, since it is not stored on the backend\r\n uuId: PropTypes.string, // for new added nested\r\n nestedParent: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\r\n discountType: PropTypes.oneOf(Object.keys(DISCOUNT_MAIN_TYPES)),\r\n financePercentage: PropTypes.number,\r\n financeMonths: PropTypes.number,\r\n financeSalesPercentage: PropTypes.number,\r\n financeOptions: PropTypes.string, // \"[12345, 12314, 1233]\" JSON\r\n multiSelections: PropTypes.bool,\r\n approveOptions: PropTypes.string, // \"['Some Name', 'Another Name']\"\r\n};\r\n\r\nexport const discountSectionsInterface = {\r\n id: PropTypes.number.isRequired,\r\n order: PropTypes.number.isRequired,\r\n name: PropTypes.string.isRequired,\r\n type: PropTypes.string,\r\n discounts: PropTypes.arrayOf(PropTypes.shape(discountInterFace))\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","//INITIAL FLOW\r\nimport * as types from \"./actionTypes\";\r\n\r\nexport const addNewQuote = () => ({\r\n type: types.ADD_NEW_QUOTE,\r\n payload: {}\r\n});\r\n\r\nexport const setQuotes = (quotes) => ({\r\n type: types.SET_QUOTES,\r\n payload: {quotes}\r\n});\r\n\r\nexport const updateQuote = (quote, updatedQuote) => ({\r\n type: types.UPDATE_QUOTE,\r\n payload: {quote, updatedQuote}\r\n});\r\n\r\nexport const setActiveQuoteIndex = (activeQuoteIndex) => ({\r\n type: types.SET_ACTIVE_QUOTE_INDEX,\r\n payload: {activeQuoteIndex}\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\r\n parentsLists.forEach(parentsList => {\r\n Object.keys(parentsList).forEach(parentKey => {\r\n if (!parentsList[parentKey]) {\r\n return;\r\n }\r\n\r\n if (parentsList[parentKey].features && parentsList[parentKey].features.length) {\r\n parentsList[parentKey].features.forEach(sqftFeature => {\r\n if (sqftFeature.sqftId) {\r\n SQFTIds.push(sqftFeature.sqftId);\r\n }\r\n });\r\n }\r\n\r\n if (parentsList[parentKey].featuresSubGroups) {\r\n parentsList[parentKey].featuresSubGroups.forEach(featureGroup => {\r\n if (featureGroup && featureGroup.features && featureGroup.features.length) {\r\n featureGroup.features.forEach(sqftFeature => {\r\n if (sqftFeature.sqftId) {\r\n SQFTIds.push(sqftFeature.sqftId);\r\n }\r\n });\r\n }\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 if (SQFTCalcData.controllers && SQFTCalcData.controllers.hinge) {\r\n SQFTCalcData.controllers.hinge.forEach(model => {\r\n SQFTIds.push(model.id.toString());\r\n })\r\n }\r\n\r\n if (SQFTCalcData.controllers && SQFTCalcData.controllers.handles) {\r\n SQFTCalcData.controllers.handles.forEach(model => {\r\n SQFTIds.push(model.id.toString());\r\n })\r\n }\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 {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 {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 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","export const baseDashboardImagesPath = document.kvConfig.kioskMode ? './images/dashboard/images/icons/pj-scope-icons/enabled/' : ((location.port === '9007')\r\n ? 'http://quotekandb.com/content/Views/dashboard/images/icons/pj-scope-icons/enabled/'\r\n : '/content/Views/dashboard/images/icons/pj-scope-icons/enabled/');\r\n\r\n// let isHttpBNIP = baseNewImagesPath.length > 4 && baseNewImagesPath.substring(0, 4).toLowerCase() == \"http\";\r\nconst isLocal = (document.kvConfig.kioskMode || document.kvConfig.noInternetMode || location.port === '9007');\r\nexport const baseAssetsPath = isLocal\r\n ? './'\r\n : (document.querySelectorAll('link')[0].href.substring(0, document.querySelectorAll('link')[0].href.indexOf('/visualizers/') + \"/visualizers/\".length));\r\n // : '/content/Views/visualizers/';\r\n\r\nexport const baseNewImagesPath = isLocal ? baseAssetsPath : baseAssetsPath + \"styles/\"\r\n","import {getPriceWithCurrency} from \"./helpers\";\r\nimport store from \"../store\";\r\n\r\n/**\r\n *\r\n * @param price {string|number|null}\r\n * @param feature {featureInterface}\r\n * @param fabricatorData {object}\r\n * @param messages {object} intl messages object (t obe able to use in the receipt)\r\n * @return {string}\r\n */\r\nexport const getPriceWithIncluded = (price, feature, fabricatorData, messages) => {\r\n if (price) {\r\n return getPriceWithCurrency(fabricatorData.settings, price, feature, false)\r\n }\r\n if (feature && fabricatorData.isLowes && (feature.partId === \"center_island_sink\" || feature.partId === \"sink\")) {\r\n return messages[\"navItem.priceNotIncluded\"]\r\n }\r\n return messages[\"navItem.priceIncluded\"]\r\n}\r\n\r\n/**\r\n * returns actual price property\r\n * @param feature {featureInterface}\r\n * @param fabricatorSettings {object}\r\n * @return {string|number|null}\r\n */\r\nexport const getFeaturePriceProperty = (feature, fabricatorSettings = null) => {\r\n let settings = fabricatorSettings;\r\n if (!settings) {\r\n settings = store.getState().fabricatorState.settings;\r\n }\r\n if (settings.useFabricatorCostPrices) { // show fabricator prices instead of retail prices\r\n return feature.dbFeature.price\r\n }\r\n if (settings.showSalePrices && (typeof feature.dbFeature.fabricatorCost == \"number\") && (feature.dbFeature.fabricatorCost > 0)) {\r\n return feature.dbFeature.fabricatorCost\r\n }\r\n return feature.dbFeature.cost\r\n}\r\n\r\n\r\n/**\r\n *\r\n * @param fabricatorData {object}\r\n * @param forTotal {boolean}\r\n * @return {boolean}\r\n */\r\nexport const getShowPrice = (fabricatorData, forTotal = false) => {\r\n const fabricatorSettings = fabricatorData.settings;\r\n if (forTotal) {\r\n return fabricatorSettings.showPricing && !fabricatorData.hidePricesFromUser;\r\n }\r\n return fabricatorSettings.showPricing && !fabricatorData.hideCheckoutBreakdownCost && !fabricatorData.hidePricesFromUser;\r\n};\r\n\r\nexport function numberWithCommas(x) {\r\n return x.toString().replace(/\\B(?=(\\d{3})+(?!\\d))/g, \",\");\r\n}\r\n\r\n/**\r\n *\r\n * @param price {number}\r\n * @param markUpValue {number}\r\n * @param markUpType {\"mark_up\"|\"mark_down\"|undefined}\r\n * @return {number}\r\n */\r\nconst getMarkUpPrice = (price, markUpValue, markUpType) => {\r\n const percentCost = price * markUpValue / 100;\r\n return markUpType === \"mark_down\" ? price - percentCost : price + percentCost\r\n}\r\n\r\n/**\r\n *\r\n * @param price {number}\r\n * @param markUpLogic {markUpLogic}\r\n * @param fabricatorSettings {object}\r\n * @return {number}\r\n */\r\nexport const updatePriceWithMarkUp = (price, markUpLogic, fabricatorSettings) => {\r\n if (!price || !markUpLogic) {\r\n return price\r\n }\r\n if (fabricatorSettings && fabricatorSettings.useFabricatorCostPrices) {\r\n if (markUpLogic.cost && markUpLogic.cost.value) {\r\n return getMarkUpPrice(price, markUpLogic.cost.value, markUpLogic.cost.type)\r\n }\r\n } else if (fabricatorSettings && fabricatorSettings.showSalePrices) {\r\n if (markUpLogic.discounts && markUpLogic.discounts.value) {\r\n return getMarkUpPrice(price, markUpLogic.discounts.value, markUpLogic.discounts.type)\r\n }\r\n } else if (markUpLogic.retail && markUpLogic.retail.value) {\r\n return getMarkUpPrice(price, markUpLogic.retail.value, markUpLogic.retail.type)\r\n }\r\n return price\r\n}\r\n\r\nexport const parseMarkUp = (markUpString) => {\r\n if (!markUpString) {\r\n return \"\"\r\n }\r\n let globalMarkUp = JSON.parse(markUpString);\r\n if (typeof globalMarkUp === \"object\" && (globalMarkUp != null)) {\r\n // {retail: {value: \"10\", type: \"mark_up\"}} -> {retail: {value: 10, type: \"mark_up\"}}\r\n Object.keys(globalMarkUp).forEach(key => {\r\n if ((typeof globalMarkUp[key] === \"object\") && globalMarkUp[key].value) {\r\n globalMarkUp[key].value = +globalMarkUp[key].value;\r\n }\r\n });\r\n if (globalMarkUp.isUpdatedInJobBoard) {\r\n delete globalMarkUp.isUpdatedInJobBoard // we don't need this property anymore, once we save the job - it should be erased\r\n }\r\n }\r\n return globalMarkUp\r\n}\r\n","import {getAvailableSteps, getFeatureGroupFromWizardGroup, navItemIsExcluded} from \"./lookWizardFunctions\";\r\nimport Config, {getCommonVisualizerType} from \"../../../../../config\";\r\nimport {fixWizardItem} from \"./wizardFunctionsCommon\";\r\nimport {\r\n getVisualizerTypeFromSubscription,\r\n hasSubscriptionForRoom\r\n} from \"../../../../../misc/visualizerSwitchingFunctions\";\r\n\r\nexport const getWizardGroupName = (wizardGroup) => {\r\n if (!wizardGroup) {\r\n return \"\"\r\n }\r\n return wizardGroup.title || wizardGroup.customDisplayName || wizardGroup.productCartTitle || wizardGroup.groupName || \"\"\r\n // if (stepName === \"Vanitie\") { // it should be renamed on the backend so no need for that\r\n // stepName = \"Vanity\"\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 * this returns conflicting with the current selections steps\r\n * @param allWizardSelectedValues {object}\r\n * @param actionPayload {object} // {wizardActiveItem, quoteIndex}\r\n * @param cartItems {[cartItemInterface]}\r\n * @param newWizardSteps {[]}\r\n * @returns {array}\r\n */\r\nexport const getConflictingWizardSteps = (allWizardSelectedValues, actionPayload, cartItems, newWizardSteps) => {\r\n\r\n const {wizardActiveItem, quoteIndex} = actionPayload;\r\n\r\n const currentStep = +Object.keys(actionPayload.wizardSelectedValues)[0];\r\n\r\n let conflictingWizardSteps = [];\r\n\r\n cartItems.forEach(cartItem => {\r\n if (!cartItem.fromWizardGroupId || (cartItem.currentQuote !== quoteIndex) || (cartItem.fromWizardId !== wizardActiveItem.id)) {\r\n return false\r\n }\r\n if ((Object.keys(allWizardSelectedValues).length - 1) === cartItem.fromWizardStep\r\n && (cartItem.fromWizardStep === currentStep)) { // we are reselectecting the same (last selected step), it is not conflicting\r\n return false\r\n }\r\n if (conflictingWizardSteps.some(confObject => confObject.cartItemId === cartItem.id)) { // already added\r\n return false\r\n }\r\n // no more step with this cart item\r\n if (!newWizardSteps.some(step => step.stepGroups.some(wizardGroup => wizardGroup.id === cartItem.fromWizardGroupId))\r\n || !newWizardSteps[cartItem.fromWizardStep]) {\r\n conflictingWizardSteps.push({\r\n stepIndex: cartItem.fromWizardStep,\r\n wizardGroupId: cartItem.fromWizardGroupId,\r\n cartItemId: cartItem.id,\r\n });\r\n } else if (newWizardSteps[cartItem.fromWizardStep + 1] && newWizardSteps[cartItem.fromWizardStep + 1].stepGroups) {\r\n // // here we check if some cart item is added, but his next steps are not anymore in the wizard\r\n //\r\n // // we need to get steps only for before current selected item\r\n // let testValues = {};\r\n // Object.keys(allWizardSelectedValues).forEach(key => {\r\n // if (+key <= cartItem.fromWizardStep) {\r\n // testValues[key] = allWizardSelectedValues[key] // here we create values object just until the current selected value\r\n // }\r\n // });\r\n // const testWizardSteps = getNextWizardSteps(wizardActiveItem, cartItem.fromWizardStep, testValues);\r\n //\r\n // const testGroups = testWizardSteps[cartItem.fromWizardStep + 1] ? testWizardSteps[cartItem.fromWizardStep + 1].stepGroups : null;\r\n // const sameGroupsNew = newWizardSteps[cartItem.fromWizardStep + 1] ? newWizardSteps[cartItem.fromWizardStep + 1].stepGroups : null;\r\n //\r\n // if (testGroups && testGroups.length && sameGroupsNew && sameGroupsNew.length && ((sameGroupsNew.length !== testGroups.length)\r\n // || sameGroupsNew.some((wizardGroup, wizardGroupIndex) => wizardGroup.id !== testGroups[wizardGroupIndex].id))) {\r\n // conflictingWizardSteps.push({\r\n // stepIndex: cartItem.fromWizardStep,\r\n // wizardGroupId: cartItem.fromWizardGroupId,\r\n // cartItemId: cartItem.id,\r\n // });\r\n // }\r\n }\r\n });\r\n\r\n // get current selected wizard value and check if the next one is conflicting - then add the current one to, because it cases the issue\r\n const nextStepKey = currentStep + 1;\r\n if (conflictingWizardSteps.some(confObject => confObject.stepIndex === nextStepKey)) {\r\n cartItems.forEach(cartItem => {\r\n if (!cartItem.fromWizardGroupId || (cartItem.currentQuote !== quoteIndex) || (cartItem.fromWizardId !== wizardActiveItem.id)) {\r\n return false\r\n }\r\n if (conflictingWizardSteps.some(confObject => confObject.cartItemId === cartItem.id)) { // already added\r\n return false\r\n }\r\n // no more step with this cart item\r\n if (cartItem.fromWizardStep === currentStep) {\r\n conflictingWizardSteps.unshift({\r\n stepIndex: cartItem.fromWizardStep,\r\n wizardGroupId: cartItem.fromWizardGroupId,\r\n cartItemId: cartItem.id,\r\n });\r\n }\r\n });\r\n }\r\n\r\n // console.log(\"newWizardSteps\", newWizardSteps);\r\n // console.log(\"conflictingWizardSteps\", conflictingWizardSteps);\r\n\r\n return conflictingWizardSteps\r\n}\r\n\r\n/**\r\n * this changes cart items wizard groups to use new wizard group ids\r\n * @param newWizardSteps {array}\r\n * @param actionPayload {object} // {wizardActiveItem, quoteIndex}\r\n * @param cartItems {[cartItemInterface]}\r\n * @returns {object}\r\n */\r\nexport const switchCartItemsToNewWizardGroups = (newWizardSteps, actionPayload, cartItems) => {\r\n\r\n const {wizardActiveItem, quoteIndex} = actionPayload;\r\n\r\n let shouldReassign = false;\r\n\r\n const newCartItems = cartItems.map(cartItem => {\r\n if (!cartItem.fromWizardGroupId || (cartItem.currentQuote !== quoteIndex) || (cartItem.fromWizardId !== wizardActiveItem.id)) {\r\n return cartItem\r\n }\r\n // no more step with this cart item\r\n if (!newWizardSteps.some(step => step.stepGroups.some(wizardGroup => wizardGroup.id === cartItem.fromWizardGroupId))\r\n || !newWizardSteps[cartItem.fromWizardStep]) {\r\n // here we check all next steps, if there are some step with the same wizardGroup, and it has the cartFeature navItem\r\n newWizardSteps.forEach(step => {\r\n if (!step.stepGroups || !step.stepGroups[0] || (step.stepGroups.length > 1)) {\r\n return\r\n }\r\n let testWizG = step.stepGroups[0];\r\n if (testWizG.groupName !== cartItem.cartFeature.dbFeature.groupName) {\r\n return;\r\n }\r\n if (testWizG.mergedGroups) {\r\n // check only next wizardGroup selectedFeatures, not all of them (merged)\r\n testWizG = testWizG.mergedGroups.find(mergedGroup => mergedGroup.id === step.stepGroups[0].id)\r\n || testWizG.mergedGroups.find(mergedGroup => !navItemIsExcluded({part: cartItem.cartFeature}, mergedGroup))\r\n }\r\n if ((testWizG.mergedGroups && testWizG) || !navItemIsExcluded({part: cartItem.cartFeature}, testWizG)) {\r\n shouldReassign = true;\r\n cartItem.fromWizardStep = step.stepIndex;\r\n cartItem.fromWizardGroupId = testWizG.id;\r\n console.log(\"cartItem changed!\", cartItem);\r\n }\r\n })\r\n }\r\n return cartItem\r\n });\r\n\r\n return {newCartItems, shouldReassign}\r\n}\r\n\r\nexport const selectedWizardGroupIsNotInCurrentStepAnymore = (selectedWizardValue, currentStepGroups) => {\r\n const stepWizGroup = currentStepGroups[0]; // could be merged\r\n const selectedWizardGroup = selectedWizardValue ? selectedWizardValue.wizardGroup : null;\r\n if (currentStepGroups.length > 1 && stepWizGroup && currentStepGroups.some(wG => wG.id === selectedWizardGroup.id)) {\r\n return false\r\n }\r\n return selectedWizardGroup && stepWizGroup && (selectedWizardGroup.id !== stepWizGroup.id)\r\n && (!stepWizGroup.mergedGroups || !stepWizGroup.mergedGroups.length\r\n || !stepWizGroup.mergedGroups.some(mG => mG.id === selectedWizardGroup.id))\r\n}\r\n\r\n/**\r\n * this returns conflicting with the current selections steps\r\n * @param newWizValues {object}\r\n * @param newWizardSteps {array}\r\n // * @param cartItems {[cartItemInterface]}\r\n * @returns {object}\r\n */\r\nexport const changeWizardValuesToUseNewGroups = (newWizValues, newWizardSteps) => {\r\n\r\n let shouldReassignValues = false;\r\n let updatedWizardValues = Object.assign({}, newWizValues);\r\n\r\n Object.keys(updatedWizardValues).forEach(key => { // here we replace wizard values to match new selections! to prevent conflicting\r\n // if there are no wizardGroup anymore in the next flow, but it was selected earlier - set new wizardGroup\r\n if (updatedWizardValues[key].wizardGroup\r\n && updatedWizardValues[key].selectedFeature\r\n && !newWizardSteps.some(step => (step.stepGroups.length === 1) && (step.stepGroups[0].id === updatedWizardValues[key].wizardGroup.id))\r\n && (newWizardSteps[key] && newWizardSteps[key].stepGroups && (newWizardSteps[key].stepGroups.length === 1)\r\n && (updatedWizardValues[key].wizardGroup.groupName === newWizardSteps[key].stepGroups[0].groupName)\r\n && !navItemIsExcluded({part: updatedWizardValues[key].selectedFeature}, newWizardSteps[key].stepGroups[0])\r\n )) {\r\n shouldReassignValues = true;\r\n updatedWizardValues[key].wizardGroup = newWizardSteps[key].stepGroups[0];\r\n // console.log(\"wizardGroup updated!\", updatedWizardValues[key]);\r\n }\r\n });\r\n\r\n const erasedValues = {};\r\n\r\n // here we go through all new wizard steps - and check old values - if there are something selected and it is not\r\n // anymore in the flow - but there is a step - assign new wizard selected value\r\n newWizardSteps.forEach(newWizardStep => {\r\n if (newWizardStep.stepGroups.length !== 1 || newWizardStep.stepGroups[0].nodeType !== \"group\") {\r\n return\r\n }\r\n const stepWizGroup = newWizardStep.stepGroups[0]; // could be merged\r\n if (!updatedWizardValues[newWizardStep.stepIndex] ||\r\n (updatedWizardValues[newWizardStep.stepIndex]\r\n && updatedWizardValues[newWizardStep.stepIndex].wizardGroup\r\n && (updatedWizardValues[newWizardStep.stepIndex].wizardGroup.groupName !== stepWizGroup.groupName\r\n // we still need to get inside if group is not valid - to erase it as we don't need it! we will assign a new one below if needed\r\n || selectedWizardGroupIsNotInCurrentStepAnymore(updatedWizardValues[newWizardStep.stepIndex], newWizardStep.stepGroups))\r\n )) {\r\n // we have a step and the value selected is incorrect - go ahead and find something similar\r\n let updated = false;\r\n Object.keys(newWizValues).forEach(key => { // here we replace wizard values to match new selections! to prevent conflicting\r\n // if there are no wizardGroup anymore in the next flow, but it was selected earlier - set new wizardGroup\r\n if (newWizValues[key].wizardGroup\r\n && newWizValues[key].selectedFeature\r\n && newWizValues[key].wizardGroup.groupName === stepWizGroup.groupName\r\n && (!newWizardSteps[key] || (newWizardSteps[key].stepGroups.length !== 1) || newWizValues[key].wizardGroup.groupName !== newWizardSteps[key].stepGroups[0].groupName)\r\n && !navItemIsExcluded({part: newWizValues[key].selectedFeature}, stepWizGroup)) {\r\n\r\n shouldReassignValues = true;\r\n erasedValues[newWizardStep.stepIndex] = Object.assign({}, updatedWizardValues[newWizardStep.stepIndex]); // save it first, to restore below\r\n updatedWizardValues[newWizardStep.stepIndex] = Object.assign({}, newWizValues[key], {\r\n wizardGroup: stepWizGroup,\r\n });\r\n updated = true;\r\n // updatedWizardValues[key] = {}; // clear old step\r\n // console.log(\"wizardGroup updated throw all steps search!\", updatedWizardValues[key]);\r\n }\r\n });\r\n if (!updated) {\r\n erasedValues[newWizardStep.stepIndex] = Object.assign({}, updatedWizardValues[newWizardStep.stepIndex]); // save it first, to restore below\r\n updatedWizardValues[newWizardStep.stepIndex] = {};\r\n delete updatedWizardValues[newWizardStep.stepIndex];\r\n }\r\n }\r\n });\r\n\r\n // console.log(\"erasedValues\", erasedValues);\r\n\r\n // 3) here we go through again through steps and check if we erased something but it exist in the next flow\r\n newWizardSteps.forEach(newWizardStep => {\r\n if (newWizardStep.stepGroups.length !== 1 || newWizardStep.stepGroups[0].nodeType !== \"group\") {\r\n return\r\n }\r\n const stepWizGroup = newWizardStep.stepGroups[0]; // could be merged\r\n if (!updatedWizardValues[newWizardStep] || !updatedWizardValues[newWizardStep].wizardGroup) {\r\n Object.keys(erasedValues).forEach(key => {\r\n if (erasedValues[key].wizardGroup && erasedValues[key].selectedFeature\r\n && (erasedValues[key].wizardGroup.groupName === stepWizGroup.groupName)\r\n && !navItemIsExcluded({part: erasedValues[key].selectedFeature}, stepWizGroup)) {\r\n updatedWizardValues[newWizardStep.stepIndex] = Object.assign({}, newWizValues[key], {\r\n wizardGroup: stepWizGroup,\r\n });\r\n // console.log(\"USE ERASED LOGIC\", updatedWizardValues[newWizardStep.stepIndex]);\r\n erasedValues[key] = {}; // use it only once! then delete\r\n }\r\n })\r\n }\r\n });\r\n\r\n // now go again and set missing wizard groups\r\n Object.keys(updatedWizardValues).forEach(key => {\r\n if (!updatedWizardValues[key] || !updatedWizardValues[key].wizardGroup || !newWizardSteps[key]\r\n || !newWizardSteps[key].stepGroups.length || (newWizardSteps[key].stepGroups.length !== 1)) { // we set wizard group only if the next one is selected\r\n return\r\n }\r\n // const nextSelectedValue = updatedWizardValues[key + 1];\r\n // const selectedWizGroup = updatedWizardValues[key].wizardGroup;\r\n const newWizGroup = newWizardSteps[key].stepGroups[0];\r\n\r\n if (selectedWizardGroupIsNotInCurrentStepAnymore(updatedWizardValues[key], newWizardSteps[key].stepGroups)) {\r\n // set wizard group as we might have cart items added to this group, we can't have it disabled\r\n updatedWizardValues[key] = {\r\n wizardGroup: newWizGroup\r\n }\r\n }\r\n });\r\n\r\n //last update - make sure that every wizard group is selected if we have cart item in the group below\r\n // const lastSelectedStep = Object.keys(updatedWizardValues).reverse().find(lastKey => updatedWizardValues[lastKey] && updatedWizardValues[lastKey].wizardGroup);\r\n Object.keys(updatedWizardValues).forEach(key => {\r\n if (!updatedWizardValues[key].wizardGroup && newWizardSteps[key] && newWizardSteps[key].stepGroups.length\r\n && (newWizardSteps[key].stepGroups.length === 1) && updatedWizardValues[+key + 1] && updatedWizardValues[+key + 1].wizardGroup) {\r\n // we set wizard group only if the next one is selected\r\n updatedWizardValues[key] = {\r\n wizardGroup: newWizardSteps[key].stepGroups[0]\r\n }\r\n }\r\n });\r\n\r\n return {updatedWizardValues, shouldReassignValues}\r\n}\r\n\r\n/**\r\n * @param partId {string}\r\n * @param featureGroup {featureGroupInterface}\r\n * @param isBathroom {boolean}\r\n * @returns {boolean}\r\n */\r\nconst checkFeatureGroupForOpposite = (partId, featureGroup, isBathroom) => {\r\n switch (partId) {\r\n case \"backsplash\":\r\n return isBathroom && (featureGroup.partId === \"vanity_backsplash\")\r\n case \"center_island_edge\":\r\n return featureGroup.partId === \"edge_profile\"\r\n case \"edge_profile\":\r\n return featureGroup.partId === \"center_island_edge\"\r\n case \"countertop\":\r\n return (featureGroup.partId === \"center_island_countertop\") || (isBathroom && (featureGroup.partId === \"vanity_countertop\"))\r\n case \"center_island_countertop\":\r\n return (featureGroup.partId === \"countertop\") || (isBathroom && (featureGroup.partId === \"vanity_countertop\"))\r\n case \"corners\":\r\n return featureGroup.partId === \"radius\"\r\n default:\r\n return featureGroup.partId === partId\r\n }\r\n}\r\n\r\n/**\r\n * @param wizardSteps {array}\r\n * @param cartItem {cartItemInterface}\r\n * @returns foundStep {object}\r\n */\r\nexport const getWizardStepFromCartItemFeature = (wizardSteps, cartItem) => {\r\n let foundStep = wizardSteps.find(step => step.stepGroups.some(wizardGroup => {\r\n const featureGroup = getFeatureGroupFromWizardGroup(wizardGroup);\r\n return featureGroup && featureGroup.partId === cartItem.partId\r\n }));\r\n if (!foundStep) {\r\n const isBathroom = getCommonVisualizerType() === \"bathroom\";\r\n foundStep = wizardSteps.find(step => step.stepGroups.some(wizardGroup => {\r\n const featureGroup = getFeatureGroupFromWizardGroup(wizardGroup);\r\n if (!featureGroup) {\r\n return false\r\n }\r\n return checkFeatureGroupForOpposite(cartItem.partId, featureGroup, isBathroom)\r\n }));\r\n }\r\n return foundStep\r\n}\r\n\r\n/**\r\n * @param wizardSteps {array}\r\n * @param partId {string}\r\n * @returns {object}\r\n */\r\nexport const getFeatureGroupFromWizardSteps = (wizardSteps, partId) => {\r\n for (const step of wizardSteps) {\r\n for (const wizardGroup of step.stepGroups) {\r\n const featureGroup = getFeatureGroupFromWizardGroup(wizardGroup);\r\n if (featureGroup && featureGroup.partId === partId) {\r\n return {part: featureGroup}\r\n }\r\n }\r\n }\r\n const isBathroom = getCommonVisualizerType() === \"bathroom\";\r\n for (const step of wizardSteps) {\r\n for (const wizardGroup of step.stepGroups) {\r\n const featureGroup = getFeatureGroupFromWizardGroup(wizardGroup);\r\n if (featureGroup && checkFeatureGroupForOpposite(partId, featureGroup, isBathroom)) {\r\n return {part: featureGroup}\r\n }\r\n }\r\n }\r\n}\r\n\r\nconst parseWizardData = (wizardData) => {\r\n let allItems = typeof wizardData === \"string\" ? JSON.parse(wizardData) : [];\r\n if (typeof wizardData === \"object\" && (wizardData != null)) {\r\n Object.keys(wizardData).forEach(key => {\r\n allItems = [...allItems, ...JSON.parse(wizardData[key])]\r\n });\r\n }\r\n return allItems\r\n}\r\n\r\n/**\r\n * @param mainResponse\r\n * @param parseOnly {boolean}\r\n * @param newVisualizerType {string}\r\n * @returns {array}\r\n */\r\nexport const getParsedWizardList = (mainResponse, parseOnly, newVisualizerType = \"\") => {\r\n const {wizardData, wizardDataV2} = mainResponse;\r\n const allItems = parseWizardData(wizardDataV2 || wizardData); // if we have v2 - use it, else old support\r\n if (Config.isDevMode()) {\r\n console.log(\"all wizardItems \", allItems);\r\n }\r\n if (parseOnly) {\r\n return allItems.filter(wizardItem => wizardItem.enabled)\r\n }\r\n const wizardList = allItems\r\n .filter(wizardItem => wizardItem.enabled)\r\n .map((wizardItem, wizardItemIndex) => {\r\n wizardItem = fixWizardItem(wizardItem, wizardItemIndex, false, newVisualizerType);\r\n if (wizardItem.visualizer === \"all\") {\r\n wizardItem.visualizer = getCommonVisualizerType(newVisualizerType); // we keep same wizard as different\r\n wizardItem.id = wizardItem.id + 100;\r\n }\r\n wizardItem.id = getUpdatedWizardId(wizardItem.visualizer, wizardItem.id);\r\n return wizardItem\r\n });\r\n console.log(\"wizardList\", wizardList);\r\n return wizardList\r\n}\r\n\r\n/**\r\n * same function for wizard item and cart item on parse - it returns new wizard id depending on the visualizer\r\n * @param visualizerType {string}\r\n * @param oldWizardItemId {number}\r\n * @returns {number}\r\n */\r\nexport const getUpdatedWizardId = (visualizerType, oldWizardItemId) => {\r\n switch (getCommonVisualizerType(visualizerType)) {\r\n case \"laundryroom\":\r\n if (oldWizardItemId < 3000) {\r\n return oldWizardItemId + 3000 // increase because we don't want to have same id's\r\n }\r\n break;\r\n case \"fireplace\":\r\n if (oldWizardItemId < 2000) {\r\n return oldWizardItemId + 2000 // increase because we don't want to have same id's\r\n }\r\n break;\r\n case \"bathroom\":\r\n if (oldWizardItemId < 1000) {\r\n return oldWizardItemId + 1000 // increase because we don't want to have same id's\r\n }\r\n break;\r\n default:\r\n return oldWizardItemId // keep as is for kitchen\r\n }\r\n}\r\n\r\n/**\r\n * returns lowercased visualizer (bathroom | kitchen | fireplace) same as in the wizard item depending on wizardItem id\r\n * @param wizardItem {wizardItemInterface | wizardAllObjectInterface}\r\n * @param withToolVersion {boolean}\r\n * @returns {string} bathroom | kitchen | fireplace\r\n */\r\nexport const getWizardVisualizerType = (wizardItem, withToolVersion = false) => {\r\n\r\n let commonName = wizardItem.visualizer;\r\n\r\n if (!commonName) {\r\n commonName = \"kitchen\";\r\n const wizardItemId = wizardItem.id || wizardItem.wizardItemId;\r\n if (wizardItemId > 3000) {\r\n commonName = \"laundryroom\";\r\n } if (wizardItemId > 2000) {\r\n commonName = \"fireplace\";\r\n } else if (wizardItemId > 1000) {\r\n commonName = \"bathroom\";\r\n }\r\n }\r\n\r\n if (withToolVersion) {\r\n const existingSubscription = hasSubscriptionForRoom(commonName);\r\n if (existingSubscription) {\r\n return getVisualizerTypeFromSubscription(existingSubscription);\r\n }\r\n return commonName\r\n }\r\n return commonName\r\n}\r\n\r\n/**\r\n * checks if current wizard can be used in the visualizer\r\n * @param wizardItem {wizardItemInterface | wizardAllObjectInterface}\r\n * @param visualizerType {string}\r\n * @returns {boolean}\r\n */\r\nexport const isSameVisualizerWizard = (wizardItem, visualizerType = getCommonVisualizerType()) => {\r\n if (wizardItem.visualizer === \"all\") { // should not ever be here\r\n return true\r\n }\r\n if (wizardItem.visualizer) {\r\n return wizardItem.visualizer === visualizerType\r\n }\r\n return getWizardVisualizerType(wizardItem) === visualizerType\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, SHAPE_LAYOUTS} from \"../cabinet/cabinetShapes\";\r\nimport {getCabinetSimilarFeatureFromAnotherColor} from \"../../../../helpers/sqft3dArHelper\";\r\nimport {\r\n calculatePolygonClippingPolygonArea,\r\n getPointsCoords,\r\n getRotatedPointV1\r\n} from \"../../../../helpers/coordinatesHelper\";\r\nimport {getCabinetDoorsSQFT} from \"../../../../helpers/sqftCalculations\";\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.feature = null; // use getFeature\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 = [];\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 if (featureId !== this.featureId) {\r\n this.featureId = featureId\r\n this.featureName = getFeatureNameById(featureId);\r\n this.feature = null;\r\n if (this.shapeCabinet) {\r\n // workspaceControllers.handles.addOrChangeHandlesToTheShape();\r\n // workspaceControllers.hinge.addOrChangeHandlesToTheShape();\r\n const existingHandles = workspaceControllers.handles.getAllResourcesForTheShape(shape.id);\r\n if (existingHandles) {\r\n this.shapeCabinet.deleteAttachedFeatures();\r\n this.shapeCabinet.generateAttachedFeatures();\r\n }\r\n }\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 };\r\n this.getFeature = () => {\r\n if (!this.feature) {\r\n const layout = getCurrentLayout();\r\n this.feature = layout.getFeatureById(this.featureId, true);\r\n }\r\n return this.feature\r\n }\r\n this.getRelatedParentFeature = () => {\r\n if (!this.relatedParentFeature) {\r\n const layout = getCurrentLayout();\r\n this.relatedParentFeature = layout.getFeatureById(this.relatedParentFeatureId, true);\r\n }\r\n return this.relatedParentFeature\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 if (sqftConfig.shouldUseCabinetDoorsSQFT && FEATURE_QUANTITY_UNITS.includes(this.partId)) {\r\n squareFeet = getCabinetDoorsSQFT(this);\r\n squareFeet = config.measureUnit === \"Imperial\" ? Math.ceil10(sqInchesToSqFoot(squareFeet), -2) : mm2ToM2(squareFeet);\r\n } else if (FEATURE_QUANTITY_UNITS.includes(this.partId)) {\r\n squareFeet = 1\r\n }\r\n\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\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: squareFeet,\r\n quantity: 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 // Update layout types\r\n if (this.shapeParams.layout) {\r\n switch (this.shapeParams.layout) {\r\n case SHAPE_LAYOUTS.lowerLayoutType1:\r\n this.shapeParams.layout = SHAPE_LAYOUTS.LowerLCorner;\r\n break;\r\n case SHAPE_LAYOUTS.lowerLayoutType2:\r\n this.shapeParams.layout = SHAPE_LAYOUTS.LowerDullangle;\r\n break;\r\n case SHAPE_LAYOUTS.lowerLayoutType3:\r\n this.shapeParams.layout = SHAPE_LAYOUTS.LowerIroningBoard;\r\n break;\r\n case SHAPE_LAYOUTS.lowerLayoutType4:\r\n this.shapeParams.layout = SHAPE_LAYOUTS.LowerDimondShape;\r\n break;\r\n case SHAPE_LAYOUTS.lowerLayoutType5:\r\n this.shapeParams.layout = SHAPE_LAYOUTS.LowerDimondCorner;\r\n break;\r\n case SHAPE_LAYOUTS.upperLayoutType2:\r\n this.shapeParams.layout = SHAPE_LAYOUTS.UpperLCorner;\r\n break;\r\n case SHAPE_LAYOUTS.upperLayoutType4:\r\n this.shapeParams.layout = SHAPE_LAYOUTS.UpperDimondShape;\r\n break;\r\n case SHAPE_LAYOUTS.upperLayoutType5:\r\n this.shapeParams.layout = SHAPE_LAYOUTS.UpperDimondCorner;\r\n break;\r\n default:\r\n // If no match, keep the existing layout\r\n break;\r\n }\r\n }\r\n };\r\n this.changeFeatureIdIfColorWasChanged = (newFeature= null) => {\r\n const relatedParentFeature = this.getRelatedParentFeature();\r\n const currentShapeFeature = this.getFeature();\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 getPointsCoords(this.getLines());\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.getBumpoutPointsPosOnWorkspace = () => {\r\n let bumpoutPointsOnWorkspace = [];\r\n this.getLines().forEach(line => {\r\n if (line.isWithBumpout()) {\r\n const bumpoutPoints = line.bumpoutOverlay.getBumpoutPoints();\r\n for (const pointName in bumpoutPoints) {\r\n if (bumpoutPoints.hasOwnProperty(pointName)) {\r\n bumpoutPointsOnWorkspace.push(bumpoutPoints[pointName].getPointPosOnWorkspace());\r\n }\r\n }\r\n }\r\n });\r\n return bumpoutPointsOnWorkspace\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 const intersection = getIntersectCordsBetweenLines(pointsOnWorkspace[1], pointsOnWorkspace[0], pointsOnWorkspace[pointsOnWorkspace.length - 2], pointsOnWorkspace[pointsOnWorkspace.length - 1], true ,true);\r\n if (intersection) {\r\n return intersection\r\n }\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.getTotalVolume = () => {\r\n const totalVolume = this.getTotalInches() * this.getHeight(true);\r\n return sqftConfig.measureUnit === \"Imperial\" ? totalVolume : sqInchesToMM2(totalVolume);\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.rotateOriginalPointCords(aroundPoint, angle);\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.rotateOriginalPointCords = (aroundPoint, angle) => {\r\n this.originalPointsCoords = this.originalPointsCoords.map(pointCoords => {\r\n return getRotatedPointV1(pointCoords, aroundPoint, angle);\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 workspaceControllers.handles.deleteAllResourcesForTheShape(this.id);\r\n workspaceControllers.hinge.deleteAllResourcesForTheShape(this.id);\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 {getCurrentLayout} from \"../../../appLayout\";\r\nimport {getGroupDescription} from \"../../../selectionWindow/selectionDescriptionCoverTranslates\";\r\nimport {CART_ITEM_ADDED_BY} from \"../../../shoppingCart/cartItemInterface\";\r\nimport {cartItemInStock, getDbFeatureProperty} from \"../../lookNavigation/lookFunctions2\";\r\nimport {IS_LIXIL_SERVERS, IS_PRODUCT_JOURNEY} from \"../../../../config\";\r\nimport {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[getDbFeatureProperty(\"lixilRequiredNotIncluded\")]) && feature.dbFeature[getDbFeatureProperty(\"lixilRequiredNotIncluded\")].length) {\r\n // todo remove\r\n //feature.dbFeature[getDbFeatureProperty(\"lixilRequiredNotIncluded\")].push(90068248, 90068237, 90068210, 90074461, 90068828, 90074449,\r\n // 90068281, 90068389, 90069955, 90069948, 90069950, 90071177, 90070070, 90069587 );\r\n // await getMissingFeatures(feature.dbFeature[getDbFeatureProperty(\"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[getDbFeatureProperty(\"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[getDbFeatureProperty(\"lixilAvailableQty\")] > 0))\r\n if (forceCheckAllQuantitties) {\r\n return total + cartItem.quantity\r\n } else if (intl) {\r\n const unit = getFeatureUnit(cartItem.cartFeature, intl, fabricatorData, cartItem.quantity, cartItem);\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 {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 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","//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 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 }\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 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 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 if (currentParent.getRealFeaturesReceivedProperty()) { // all features received, why do we need to request more?\r\n return false\r\n }\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 * @param forceFromNavItems {boolean}\r\n * @returns {array}\r\n */\r\nexport const getAvailableFilters = (featureGroup, partId, allFilterGroups, shopNavItems = null, forceFromNavItems = false) => {\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 && !forceFromNavItems) {\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 EventManager from \"../../store/sqftEventManager\";\r\nimport {renderMeasurementsAroundSnappedShapes, renderSlabRightPart, renderSlabWorkspace} from \"./sqftSlabDraw\";\r\nimport workspace from \"../workspace\";\r\nimport SlabAdditionalShapes from \"./slabAdditionalShapes\";\r\nimport sqftSlabManager from \"../../store/sqftSlabManager\";\r\nimport StaticImage from \"../workspace/image/StaticImage\";\r\nimport workspaceZoom from \"../workspaceZoom\";\r\nimport sqftShape from \"../shapes/sqftShape\";\r\nimport {getClosestHigherNumber} from \"../../../../helpers/sqftHelper\";\r\nimport store from \"../../../../../../store\";\r\n\r\nconst SlabWorkspace = function() {\r\n this.eventManager = EventManager;\r\n this.objectName = {name: 'SlabWorkspace'};\r\n this.leftImagePos = {\r\n x: 0,\r\n y: 0,\r\n };\r\n this.state = {\r\n inEnabled: false,\r\n mouseDown: false,\r\n mouseDownPosition: null,\r\n isCenterButtonRightPartHovered: false,\r\n isCenterButtonLeftPartHovered: false,\r\n rightPartZoomedShapeId: 1,\r\n leftPartZoomedShapeId: 1,\r\n isSlabPlaceHolderPresent: false,\r\n }\r\n this.pos = {\r\n x: 0,\r\n y: 0,\r\n };\r\n this.slabAdditionalShapes = new SlabAdditionalShapes();\r\n this.measurementPoints = [];\r\n this.shapeOffset = null;\r\n this.centerButtonRightPart = null;\r\n this.centerButtonLeftPart = null;\r\n\r\n this.getOffset = function() {\r\n return this.getCenter()\r\n };\r\n\r\n this.getPos = () => {\r\n return this.pos\r\n };\r\n\r\n this.setPos = function(pos) {\r\n this.pos = {...pos}\r\n };\r\n\r\n this.getCenter = function() {\r\n return this.pos\r\n };\r\n\r\n this.setEnabled = (val) => {\r\n this.state.inEnabled = val\r\n };\r\n\r\n this.setSlabPlaceHolderPresent = (val) => {\r\n this.state.isSlabPlaceHolderPresent = val\r\n };\r\n\r\n this.getRightPartWidth = () => {\r\n return workspace.getCanvas().width / 2\r\n };\r\n\r\n this.getShapeOffset = () => {\r\n return this.shapeOffset\r\n };\r\n\r\n this.init = () => {\r\n this.initRightPart();\r\n this.initLeftPart();\r\n }\r\n\r\n this.initRightPart = () => {\r\n this.centerButtonRightPart = new StaticImage(\r\n 'eyeball',\r\n this.eventManager.getCtx().canvas.width - 40 - sqftSlabManager.centerButton.width,\r\n 30,\r\n sqftSlabManager.centerButton.width,\r\n sqftSlabManager.centerButton.height,\r\n false,\r\n true,\r\n this.beforeRenderCenterButtonRightPart.bind(this)\r\n );\r\n this.centerButtonLeftPart = new StaticImage(\r\n 'eyeball',\r\n this.eventManager.getCtx().canvas.width / 2 - 40 - sqftSlabManager.centerButton.width,\r\n 30,\r\n sqftSlabManager.centerButton.width,\r\n sqftSlabManager.centerButton.height,\r\n false,\r\n true,\r\n this.beforeRenderCenterButtonLeftPart.bind(this)\r\n );\r\n this.initSlabWorkspaceEvents();\r\n }\r\n\r\n this.initLeftPart = () => {\r\n this.eventManager.addEvent(\r\n this.eventManager.events.RENDER,\r\n this.renderSlabLeftPartWrapper,\r\n this.objectName,\r\n this.eventManager.priorities.SEGMENT_MEASUREMENTS\r\n );\r\n }\r\n\r\n this.initSlabWorkspaceEvents = function() {\r\n this.eventManager.addEvent(\r\n this.eventManager.events.MOUSE_MOVE,\r\n this.onMouseMove,\r\n this.objectName,\r\n this.eventManager.priorities.SLAB_RIGHT_PART_WORKSPACE\r\n );\r\n this.eventManager.addEvent(\r\n this.eventManager.events.MOUSE_DOWN,\r\n this.onMouseDown,\r\n this.objectName,\r\n EventManager.priorities.SLAB_RIGHT_PART_WORKSPACE\r\n );\r\n this.eventManager.addEvent(\r\n this.eventManager.events.MOUSE_UP,\r\n this.onMouseUp,\r\n this.objectName,\r\n EventManager.priorities.SLAB_RIGHT_PART_WORKSPACE\r\n );\r\n this.eventManager.addEvent(\r\n this.eventManager.events.WHEEL,\r\n this.onWheel,\r\n this.objectName,\r\n this.eventManager.priorities.SLAB_RIGHT_PART_WORKSPACE\r\n );\r\n this.eventManager.addEvent(\r\n this.eventManager.events.RENDER,\r\n renderSlabWorkspace,\r\n this.objectName,\r\n this.eventManager.priorities.SLAB_RIGHT_PART_WORKSPACE\r\n );\r\n this.eventManager.addEvent(\r\n this.eventManager.events.RENDER,\r\n this.renderSlabRightPartWrapper,\r\n this.objectName,\r\n this.eventManager.priorities.SLAB_RIGHT_PART_CONTENT\r\n );\r\n this.eventManager.addEvent(\r\n this.eventManager.events.RENDER,\r\n this.centerButtonRightPart.render,\r\n this.objectName,\r\n this.eventManager.priorities.SLAB_RIGHT_PART_CONTENT\r\n );\r\n this.eventManager.addEvent(\r\n this.eventManager.events.RENDER,\r\n this.centerButtonLeftPart.render,\r\n this.objectName,\r\n this.eventManager.priorities.SLAB_RIGHT_PART_CONTENT\r\n );\r\n };\r\n\r\n this.disableSlabImages = () => {\r\n this.eventManager.removeEvent(this.objectName);\r\n };\r\n\r\n this.deregisterEvents = () => {\r\n this.eventManager.removeEvent(this.objectName);\r\n };\r\n\r\n this.onMouseDown = (mousePos, e) => {\r\n void e;\r\n if (this.state.isCenterButtonLeftPartHovered) {\r\n this.eyeballButtonLeftPartClick();\r\n }\r\n if (!this.isOverRightPart(mousePos)) {\r\n return false;\r\n }\r\n if (this.state.isCenterButtonRightPartHovered) {\r\n this.eyeballButtonRightPartClick();\r\n }\r\n this.eventManager.stealCursor(true, true);\r\n this.state.mouseDown = true;\r\n this.state.mouseDownPosition = mousePos;\r\n this.eventManager.setCursor('grabbing', this, false);\r\n\r\n return true;\r\n };\r\n\r\n this.onMouseUp = (mousePos, e) => {\r\n if (!this.isOverRightPart(mousePos)) {\r\n return false;\r\n }\r\n this.state.mouseDown = false;\r\n this.state.mouseDownPosition = null;\r\n\r\n return this.onMouseMove(mousePos, e);\r\n }\r\n\r\n this.onMouseMove = (mousePos, e) => {\r\n if (e.terminate) {\r\n return false;\r\n }\r\n this.state.isCenterButtonLeftPartHovered = this.centerButtonLeftPart.isHovered(mousePos);\r\n if (!this.isOverRightPart(mousePos)) {\r\n return false;\r\n }\r\n this.state.isCenterButtonRightPartHovered = this.centerButtonRightPart.isHovered(mousePos);\r\n if (this.state.mouseDown) {\r\n this.moveSlabWorkspace(mousePos);\r\n } else {\r\n this.eventManager.resetCursor(this);\r\n }\r\n return true;\r\n }\r\n\r\n this.onWheel = (mousePos, e) => {\r\n void mousePos;\r\n void e;\r\n\r\n return true;\r\n }\r\n this.moveSlabWorkspace = (mousePos) => {\r\n if (!this.isOverRightPart(mousePos)) {\r\n return false;\r\n }\r\n let xDiff = mousePos.x - this.state.mouseDownPosition.x;\r\n let yDiff = mousePos.y - this.state.mouseDownPosition.y;\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 this.beforeRenderCenterButtonRightPart = () => {\r\n this.centerButtonRightPart.x = this.eventManager.getCtx().canvas.width - 40 - sqftSlabManager.centerButton.width;\r\n };\r\n\r\n this.beforeRenderCenterButtonLeftPart = () => {\r\n this.centerButtonLeftPart.x = this.eventManager.getCtx().canvas.width / 2 - 40 - sqftSlabManager.centerButton.width;\r\n };\r\n\r\n this.eyeballButtonRightPartClick = () => {\r\n const shapesIds = workspace.getShapeIds();\r\n const closestHigherNumber = getClosestHigherNumber(this.state.rightPartZoomedShapeId, shapesIds);\r\n const shape = workspace.getShapeById(closestHigherNumber);\r\n\r\n if (shape instanceof sqftShape) {\r\n workspaceZoom.zoomToSlabShape(shape, true);\r\n this.state.rightPartZoomedShapeId = shape.id\r\n } else {\r\n this.state.rightPartZoomedShapeId = closestHigherNumber === null ? 0 : closestHigherNumber;\r\n this.eyeballButtonRightPartClick()\r\n }\r\n return false\r\n };\r\n\r\n this.eyeballButtonLeftPartClick = () => {\r\n const shapesIds = workspace.getShapeIds();\r\n const closestHigherNumber = getClosestHigherNumber(this.state.leftPartZoomedShapeId, shapesIds);\r\n const shape = workspace.getShapeById(closestHigherNumber);\r\n\r\n if (shape instanceof sqftShape) {\r\n workspaceZoom.zoomToShape(shape, true);\r\n this.state.leftPartZoomedShapeId = shape.id\r\n } else {\r\n this.state.leftPartZoomedShapeId = closestHigherNumber === null ? 0 : closestHigherNumber;\r\n this.eyeballButtonLeftPartClick()\r\n }\r\n return false\r\n };\r\n\r\n this.isOverRightPart = (mousePos = {x: 0}) => {\r\n let rpw = this.getRightPartWidth();\r\n\r\n return mousePos.x > rpw\r\n };\r\n\r\n this.renderSlabRightPartWrapper = (ctx, isFullRender = false) => {\r\n //if (this.state.setSlabPlaceHolderPresent) {\r\n return renderSlabRightPart(ctx, isFullRender);\r\n //}\r\n };\r\n this.renderSlabLeftPartWrapper = (ctx) => {\r\n const reduxState = store.getState()\r\n let isMeasurementVisibleInSlabMode = reduxState.sqftSlabState.isMeasurementVisibleInSlabMode;\r\n if (isMeasurementVisibleInSlabMode) {\r\n renderMeasurementsAroundSnappedShapes(ctx, this.measurementPoints);\r\n }\r\n };\r\n};\r\n\r\nexport default new SlabWorkspace;\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\nimport {\r\n findGLBLink,\r\n getDepthFromDbFeature,\r\n getThirdPartyAR3DMetaData,\r\n getUrlMatchingByColor,\r\n getWidthFromDbFeature\r\n} from \"./sqft3dArHelper\";\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\n * This will return sibling feature without special shape with the same height.\r\n * @param feature\r\n * @param parentFeature\r\n * @return {*}\r\n */\r\nexport const getSpacerDbFeature = (feature, parentFeature) => {\r\n if (feature && parentFeature) {\r\n const url = getUrlMatchingByColor(feature.dbFeature, parentFeature);\r\n const metaData = getThirdPartyAR3DMetaData(feature.dbFeature, url);\r\n const shapeHeight = Array.isArray(metaData.Height) ? metaData.Height[0] : 0;\r\n\r\n const relatedFeatures = parentFeature.getFeatureRelatedFeatures();\r\n return relatedFeatures.find(siblingDbFeature => {\r\n const siblingFeatureUrl = getUrlMatchingByColor(siblingDbFeature, parentFeature);\r\n const siblingFeatureMetaData = getThirdPartyAR3DMetaData(siblingDbFeature, siblingFeatureUrl);\r\n const siblingFeatureHeight = Array.isArray(siblingFeatureMetaData.Height) ? siblingFeatureMetaData.Height[0] : 0;\r\n\r\n if (metaData\r\n && !Array.isArray(siblingFeatureMetaData.SpecialShape)\r\n && shapeHeight === siblingFeatureHeight\r\n ) {\r\n return siblingDbFeature\r\n }\r\n });\r\n }\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 createApplianceFromFeature = (feature) => {\r\n const dbFeature = feature.dbFeature;\r\n const partId = feature.partId;\r\n const thirdPartyAR3DUrl = findGLBLink(dbFeature.thirdPartyAR3DUrls);// assume we have only one link to the model\r\n const thirdPartyAR3DMetaData = getThirdPartyAR3DMetaData(dbFeature, thirdPartyAR3DUrl);\r\n const width = getWidthFromDbFeature(dbFeature, thirdPartyAR3DMetaData);\r\n const depth = getDepthFromDbFeature(dbFeature, thirdPartyAR3DMetaData);\r\n\r\n console.log(\"dbFeature displayName\", dbFeature.displayName);\r\n console.log(\"thirdPartyAR3DMetaData\", thirdPartyAR3DMetaData);\r\n\r\n return createApplianceOnTheWorkspace(partId,\r\n dbFeature.id,\r\n {width, height: depth},\r\n {\r\n canSnap: true,\r\n isResizable: false\r\n }\r\n );\r\n}\r\n\r\nexport const createApplianceOnTheWorkspace = (\r\n itemName,\r\n featureId = null,\r\n size = null,\r\n params = {\r\n canSnap: true,\r\n isResizable: true\r\n }) => {\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(\r\n img,\r\n size.width,\r\n size.height,\r\n null,\r\n null,\r\n SHAPE_TYPE.appliances,\r\n itemName,\r\n function () {},\r\n undefined,\r\n null,\r\n null,\r\n null,\r\n featureId,\r\n false,\r\n params\r\n );\r\n void movableImage\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 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, SQFT_FEATURES,\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, setSelectedHandle} from \"../../../actions/sqftResourceFunctions\";\r\nimport {\r\n setSelectedCountertop,\r\n setSelectedWall,\r\n setSQFTPopup\r\n} from \"../../../actions/sqftMenuFunctions\";\r\nimport SqftOptionsHandlesContent\r\n from \"../components/navigation/menu/cabinet/toolMenu/toolHandles/SqftOptionsHandlesContent\";\r\nimport workspace from \"../components/canvas/core/workspace\";\r\nimport {closeSQFTPopup} from \"../components/canvas/core/controls/resourseCanas\";\r\nimport React from \"react\";\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 } else if (menuOpened === SIDEBAR_NAVIGATION_CABINET_BUTTONS.wall) {\r\n partIds = [SQFT_FEATURES.front_wall];\r\n } else if (menuOpened === SIDEBAR_NAVIGATION_CABINET_BUTTONS.handles) {\r\n partIds = [SQFT_FEATURES.top_handle];\r\n }\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 } else if (partId === SHAPE_PART_ID.front_wall) {\r\n itemClickCallback = (e, feature) => {\r\n store.dispatch(setSelectedWall(feature.dbFeature.id));\r\n }\r\n } else if (partId === SQFT_FEATURES.top_handle) {\r\n itemClickCallback = (e, feature) => {\r\n store.dispatch(setSelectedHandle(feature));\r\n store.dispatch(setSQFTPopup(\r\n {\r\n title: workspace.intl.formatMessage({id: \"sqft.popup.title.applyHandlesTo\"}),\r\n content: \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 {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\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 = ShowerComboTubType.replacement_tub;\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 Object.keys(LayoutType).forEach(layoutType => {\r\n this.wallConfiguration.featuresList[layoutType] = [\r\n ShowerTubCombo.createCustomWallConfiguration(\r\n custom60in30X8Shower,\r\n \"Full Wall 60in\",\r\n \"30X8\",\r\n \"60in\",\r\n {\r\n \"RoomLayout\": [layoutType],\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 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 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_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 uuid from \"uuid\";\r\nimport clone from 'lodash/clone';\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 waterfallImportData = 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.getPosition = () => parent.getPosition();\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 waterfallImportData = 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 (waterfallImportData) {\r\n this.addWaterfallToLine(RESOURCE_ATTACHED_TO_NAME.waterfall, waterfallImportData);\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, waterfallImportData) => {\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, waterfallImportData);\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 clone from 'lodash/clone';\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 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 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 {getQuotePriceWithTaxes, getTotalPrice, toFixedFeatureCost} from \"./misc/helpers\";\r\nimport store from \"./store\";\r\nimport {getAllFeatureFilters, getFilterGroupValue} from \"./misc/utils\";\r\nimport {filterCartItems, getDbFeatureProperty} 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[getDbFeatureProperty(\"lixilProductCategory\")] || \"\", // \"Apparel\",\r\n item_category2: feature.dbFeature[getDbFeatureProperty(\"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 {iCmp} from \"../../../../misc/utils\";\r\nimport {PartMenuType} from \"../../../visComponents/constants\";\r\nimport Layer from \"../../../visComponents/layer\";\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 Large: [],\r\n Small: []\r\n };\r\n this.featuresPartsList = {\r\n Large: [],\r\n Small: []\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 // first quote\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.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\r\n featureClicked() {\r\n this.updateLocalStorage();\r\n // other specific events, for ex. Google Analytics, etc.\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 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 let conditionPassed = this.matchesMetaForCondition(condition.propName, condition.propValue);\r\n if (condition.propName === \"EX L\" && !conditionPassed) {\r\n conditionPassed = this.matchesMetaForCondition( \"Wall\", condition.propValue);\r\n } else if (condition.propName === \"Size\" && condition.propValue === \"60in\" && Array.isArray(this.metaData[\"Size\"])\r\n && this.metaData[\"Size\"].includes(\"30in\")) {\r\n conditionPassed = false\r\n }\r\n return conditionPassed\r\n })\r\n }\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","//********* 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 {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 {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 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 \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 {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
\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 $ 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 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 {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 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 \r\n
\r\n \r\n
\r\n \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 {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 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
\r\n \r\n
\r\n \r\n \r\n \r\n
\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","import JsonApi from \"../../../api/jsonApi\";\r\nimport {getLocalStorageItem} from \"../../../misc/storageFunctions\";\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","//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 store from \"../store\";\r\nimport enhanceCanvas from \"../bvcomponents/visComponents/canvasEnhancements\";\r\nimport Misc from \"./misc\";\r\nimport {IS_DASHBOARD_MESSAGING, 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 || IS_DASHBOARD_MESSAGING) {\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 * 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\r\nexport const setSelectedHandle = (selectedHandle) => ({\r\n type: types.SET_SELECTED_HANDLE,\r\n payload: {selectedHandle}\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 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\");\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\r\n return new Promise((resolve, reject) => {\r\n img.onload = () => {\r\n // Draw the QR code image onto the canvas after it loads\r\n ctx.drawImage(img, 0, 0, canvas.width, canvas.height);\r\n\r\n // Resolve the promise with the canvas image data URL\r\n resolve(canvas.toDataURL());\r\n };\r\n\r\n img.onerror = reject; // Reject if there is an error loading the image\r\n img.src = qrData; // Start loading the QR code image\r\n });\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, shouldDisplayFramedDoors = false) => {\r\n const cabinetsData = CabinetsSet.prepareCabinetsSet(displayDoorsOnly, shouldDisplayFramedDoors);\r\n console.log(\"prepared cabinetsData\", cabinetsData);\r\n\r\n if (sqftConfig.threeD.glbViewer === SQFT_AR3D_GLB_VIEWER.singleModel) {\r\n const cabinetsUrl = await getUrlToCabinetGLB(cabinetsData);\r\n setUrlToCabinetGLB(cabinetsUrl);\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 getUrlToCabinetGLB = 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 return cabinetSet\r\n}\r\n\r\nexport const setUrlToCabinetGLB = (cabinetSet) => {\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 {loadScriptPromise} from \"./misc/loadScript\";\r\n\r\nexport const ASYNC_SCRIPTS = {\r\n html2canvas: \"https://d3d4bzhtpt24up.cloudfront.net/shared/js/html2canvas.min.js\",\r\n bundleReactPdf: \"https://d3d4bzhtpt24up.cloudfront.net/custom-scripts/bundle-react-pdf.min.js\",\r\n bundleReactPdfRenderer: \"https://d3d4bzhtpt24up.cloudfront.net/custom-scripts/bundle-react-pdf-renderer.min.js\",\r\n three: \"https://d3d4bzhtpt24up.cloudfront.net/custom-scripts/bundle-three.min.js\",\r\n}\r\n\r\nexport const loadAllAsyncScripts = async () => {\r\n return await Promise.all([\r\n ...Object.keys(ASYNC_SCRIPTS).map(scriptName => {\r\n return loadScriptPromise(ASYNC_SCRIPTS[scriptName], scriptName)\r\n }),\r\n ])\r\n}\r\n\r\nconst _removeElements = (elements) => {\r\n for (let i = 0; i < elements.length; i++) {\r\n console.log(\"removed\", elements[i]);\r\n elements[i].remove();\r\n }\r\n}\r\n\r\nexport const removeLoadingElements = (page) => {\r\n // Get all elements with the specified class \"removeOnLoad\" which are elements to be removed once the tool is loaded to a point where it can display the tool, and remove them\r\n const elements = document.getElementsByClassName(\"removeOnLoad\");\r\n console.log('remove .removeOnLoad classed elements from ' + page, elements);\r\n\r\n if (page !== \"Visualizer\") {\r\n _removeElements(elements);\r\n return\r\n }\r\n\r\n window.setTimeout(() => {\r\n _removeElements(elements);\r\n }, 5000); //delay 5 seconds to allow time for the canvas to render first layer\r\n\r\n}\r\n\r\nexport const runSalesForceLogic = () => {\r\n if(window.Sfdc && window.Sfdc.canvas && typeof(sr) != 'undefined') {\r\n console.log(\"Sfdc available and sr is defined\");\r\n try {\r\n // Subscribe to a custom event.\r\n window.Sfdc.canvas(function() {\r\n window.Sfdc.canvas.client.subscribe(sr.client,\r\n {name : \"quoteCountertops.canvasLoadEvent\",\r\n onData: () => {\r\n console.log('QC Visualizer received quoteCountertops.canvasLoadEvent');\r\n window.salesForceLoaded = true;\r\n window.Sfdc.canvas.client.publish(sr.client, {\r\n name: \"quoteCountertops.canvasOn\",\r\n payload: true\r\n });\r\n }});\r\n\r\n window.Sfdc.canvas.client.publish(sr.client, {\r\n name: \"quoteCountertops.canvasReady\",\r\n payload: true\r\n });\r\n\r\n console.log('sending fake canvasLoadEvent');\r\n window.Sfdc.canvas.client.publish(sr.client, {\r\n name: \"quoteCountertops.canvasLoadEvent\",\r\n payload: true\r\n });\r\n });\r\n } catch(ex) {\r\n console.log('SalesForce capable, but not running in salesforce', ex);\r\n }\r\n }\r\n\r\n window.addEventListener(\"message\", (event) => {\r\n // console.log(event);\r\n if (event.data && event.data.name === \"quoteCountertops.canvasLoadEvent\") {\r\n console.log('Message received', event);\r\n window.sfdcMessage = event.source;\r\n window.salesForceLoaded = true;\r\n }\r\n });\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 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 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 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","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 {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 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 {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 \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 {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 {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, {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","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
\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 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 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\nimport {wizardGroupInterface} from \"../../../../../interfaces/wizardItemInterface\";\r\n\r\nconst LookFeaturePrice = (props) => {\r\n\r\n const {lookFeature, quantity, fabricatorData, intl, withUnit, isBundleChild, className, listPage, mainContentPrice,\r\n isPhoneNumberValidated, showPriceAlways, wizardGroup, shopPageOpened, shopPageLoaded} = 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 if (wizardGroup && wizardGroup.skipLockDontApply) {\r\n showPriceLocked = false;\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
- \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
{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 && !(shopPageOpened && shopPageLoaded)) {\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 wizardGroup: PropTypes.shape(wizardGroupInterface),\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 const {shopPageOpened, shopPageLoaded} = store.shopState;\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 shopPageOpened,\r\n shopPageLoaded,\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","//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 {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 === 0) {\r\n return [];\r\n }\r\n\r\n return polygons.map(polygon =>\r\n polygon[0].map(coord => ({ x: coord[0], y: coord[1] }))\r\n );\r\n}\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/**\r\n * Compares two arrays of points and returns true if at least one coordinate differs.\r\n * @param {Array} arr1 - First array of points.\r\n * @param {Array} arr2 - Second array of points.\r\n * @returns {boolean} - True if at least one coordinate is different, otherwise false.\r\n */\r\nexport function arePointsDifferent(arr1, arr2) {\r\n if (arr1.length !== arr2.length) return true;\r\n\r\n for (let i = 0; i < arr1.length; i++) {\r\n if (arr1[i].x !== arr2[i].x || arr1[i].y !== arr2[i].y) {\r\n return true;\r\n }\r\n }\r\n\r\n return false;\r\n}\r\n\r\nexport function getPointsCoords (shapeLines) {\r\n return shapeLines.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\r\nexport function getRotatedPointV1 (point, aroundPoint, angle) {\r\n let ret = {x: 0, y: 0};\r\n let tr = {x: point.x - aroundPoint.x, y: point.y - aroundPoint.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 const xPos = Math.round10(Math.round10(ret.x, -5) + Math.round10(aroundPoint.x, -5), -5);\r\n const yPos = Math.round10(Math.round10(ret.y, -5) + Math.round10(aroundPoint.y, -5), -5);\r\n\r\n return {...point, x: xPos, y: yPos}\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 } 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","//********* 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 {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 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 : \r\n \r\n
\r\n )\r\n }\r\n\r\n if (type === \"small\") {\r\n return \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 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 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 {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","import React from \"react\";\r\nimport {FormattedMessage, injectIntl} from \"react-intl\";\r\nimport isObject from \"lodash/isObject\";\r\nimport WithOverlay from \"./withOverlayHoc\";\r\nimport ExclamationMarkIcon from \"../ui/icons/exclamationMarkIcon\";\r\nimport {COLORS} from \"../../colorThemes\";\r\n\r\nclass MessageBox extends React.Component {\r\n\r\n displayName = 'MessageBox';\r\n\r\n getMessage = () => {\r\n const {intl} = this.props;\r\n const props = this.props.state || this.props;\r\n const message = props.message;\r\n // console.log(\"message\", message);\r\n if (Array.isArray(message)) {\r\n return message.map((msg, msgIndex) => 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 {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 }\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\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 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 {/**/}\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","'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 $ 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 {pnpolyArray} from \"../../../../../lib/pnpoly\";\r\nimport { v4 as uuidv4 } from 'uuid';\r\nimport clone from 'lodash/clone';\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(design.shouldOnlyRenderText);\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(shouldOnlyRenderText) {\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 if (!shouldOnlyRenderText) {\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\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 * 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","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\r\n/**\r\n * @param url {string}\r\n * @param id {string}\r\n * @returns promise\r\n * */\r\nexport const loadScriptPromise = (url, id) => {\r\n return new Promise(function (resolve, reject) {\r\n if (id && document.getElementById(id)) {\r\n return resolve()\r\n }\r\n let s;\r\n s = document.createElement('script');\r\n s.src = url;\r\n s.id = id;\r\n s.onload = resolve;\r\n s.onerror = reject;\r\n document.body.appendChild(s);\r\n });\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 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 //todo right button click\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 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 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.}\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 = (forQtCategory = \"\") => {\r\n if (!this._featureName) {\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 parent = this.getParent();\r\n this._featureName = (originalName || \"\").replace((this.dbFeature.customGroupName || parent.dbName || parent.partName) + \" - \", \"\");\r\n }\r\n if (forQtCategory) {\r\n return checkIfInCatProperty(this, \"inCatName\", this._featureName, forQtCategory) || this._featureName || \"\";\r\n }\r\n return this._featureName\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 getFeatureSavedFilterName = (filterGroups, filterName, property) => {\r\n if (!this._filterNames) {\r\n this._filterNames = {};\r\n }\r\n if (this._filterNames[property]) {\r\n return this._filterNames[property]\r\n }\r\n const collectionFg = filterGroups ? filterGroups.find(fGroup => fGroup.name === filterName) : 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._filterNames[property] = capitalizeFirstLetters(featureCollectionValueObject.displayText || featureCollectionValueObject.value);\r\n return this._filterNames[property]\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 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 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","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, {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)) || e.target.closest(\".feature-buttons\"))\r\n && 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 \r\n
\r\n {this.getMessage()}
\r\n {buttonsElements}
\r\n 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 {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 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 {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 {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 ?
: 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, getParsedLookUrl} from \"../look/lookNavigation/lookFunctions\";\r\nimport {getLocalStorageItem} from \"../../misc/storageFunctions\";\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\nimport {loadAllAsyncScripts, removeLoadingElements} from \"../../loadingLogic\";\r\nimport {listenToDashboardMessaging} from \"./dashboardMessaging\";\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 payload: {\r\n jobId: document.kvConfig.jobId,\r\n }\r\n }, \"*\");\r\n }\r\n\r\n listenToDashboardMessaging();\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 => {\r\n return !subPart.part.nextFeaturesPageToLoadArray\r\n || !this.layout.hasNavItemsLength(subPart, {}, \"\", null, true, [])\r\n });\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 if (IS_OFFLINE_MODE) {\r\n await loadAllAsyncScripts()\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\r\n removeLoadingElements(\"Visualizer\");\r\n\r\n if (this.props.visualizersLoaded.includes(this.layout.visualizerType)) {\r\n this.setSubscribers();\r\n return false\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 (!Object.keys(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 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 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 {({ 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 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 clone from 'lodash/clone';\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, SIDEBAR_BUTTONS_MENU,\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\nimport ShapeAutoShuffle from \"./shapeParts/shapeAutoShuffle\";\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 shapeAutoShuffle = new ShapeAutoShuffle(this);\r\n\r\n constructor(id, priority = null, subType, params) {\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.shapeAbsolute = new ShapeAbsolute(this); // this is used to snap images\r\n this.params = params\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 resetState = () => {\r\n this._state.mouseDown = false;\r\n this._state.mouseDownPosition = null;\r\n this._state.mouseDownSize = null;\r\n this._state.hovering = false;\r\n this._state.isRotatable = false;\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 EventManager.setCursor('move', this)\r\n if (this._state.mouseDown) {\r\n this._moveImage(mousePos);\r\n\r\n return true;\r\n }\r\n }\r\n\r\n //smooth scrolling\r\n if (this._state.mouseDown) {\r\n this._moveImage(mousePos);\r\n }\r\n\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 if (this._state.mouseDown) {\r\n this.shapeAutoShuffle.handlePlaceShapeOnTheLine();\r\n }\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 || activeButton === SIDEBAR_BUTTONS_MENU.move) {\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\r\n getSnappedPosition = () => { return this._snappedPos(); };\r\n\r\n getPosField = () => {\r\n let position = this.getPosition();\r\n const workspacePos = workspace.getOffset();\r\n const scale = workspace.getScale();\r\n\r\n return {\r\n x: workspacePos.x + ((position.x + (this.size.width / 2)) * scale),\r\n y: workspacePos.y + ((position.y + (this.size.height / 2)) * scale)\r\n }\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 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 = () => {\r\n return this.getSize().width;\r\n };\r\n getHeight = () => {\r\n return this.getSize().height;\r\n };\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 /**\r\n * Not used\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 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 {\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 * Function for drawing a rectangle with angled stripes and transparency.\r\n *\r\n * @param ctx\r\n * @param {Number} x - x-coordinate of the top-left corner of the rectangle\r\n * @param {Number} y - y-coordinate of the top-left corner of the rectangle\r\n * @param {Number} width - width of the rectangle\r\n * @param {Number} height - height of the rectangle\r\n * @param {Number} lineWidth - width of the stripe\r\n * @param {Number} angle - angle of the stripes in degrees\r\n * @param {String} color1 - first color (background with transparency)\r\n * @param {String} color2 - second color (stripe color with transparency)\r\n */\r\n static drawStripedRectangle = (\r\n 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 = \"rgba(255, 255, 255, 0.5)\", // Semi-transparent background\r\n color2 = \"rgba(230, 228, 230, 0.5)\" // Semi-transparent stripes\r\n ) => {\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\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 clone from 'lodash/clone';\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 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\nimport {loadScriptPromise} from \"../../../../../../misc/loadScript\";\r\nimport {ASYNC_SCRIPTS} from \"../../../../../../loadingLogic\";\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 await loadScriptPromise(ASYNC_SCRIPTS.html2canvas, \"html2canvas\");\r\n const canvasElement = await window.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 $ 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 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 // old layout names deprecated\r\n upperLayoutType2: \"upperLayoutType2\",\r\n upperLayoutType4: \"upperLayoutType4\",\r\n upperLayoutType5: \"upperLayoutType5\",\r\n\r\n lowerLayoutType1: \"lowerLayoutType1\",\r\n lowerLayoutType2: \"lowerLayoutType2\",\r\n lowerLayoutType3: \"lowerLayoutType3\",\r\n lowerLayoutType4: \"lowerLayoutType4\",\r\n lowerLayoutType5: \"lowerLayoutType5\",\r\n\r\n // new layout names\r\n rectangle: \"rectangle\",\r\n LowerLCorner: \"LowerLCorner\", //SHAPE_LAYOUTS.lowerLayoutType1,\r\n LowerDullangle: \"LowerDullangle\", //SHAPE_LAYOUTS.lowerLayoutType2,\r\n LowerDualangle: \"LowerDualangle\", //SHAPE_LAYOUTS.lowerLayoutType2,\r\n LowerIroningBoard: \"LowerIroningBoard\",//SHAPE_LAYOUTS.lowerLayoutType3,\r\n LowerDimondShape: \"LowerDimondShape\",//SHAPE_LAYOUTS.lowerLayoutType4,\r\n LowerDimondCorner: \"LowerDimondCorner\",//SHAPE_LAYOUTS.lowerLayoutType5,\r\n\r\n UpperLCorner: \"UpperLCorner\",// SHAPE_LAYOUTS.upperLayoutType2,\r\n UpperDimondShape: \"UpperDimondShape\",//SHAPE_LAYOUTS.upperLayoutType4,\r\n UpperDimondCorner: \"UpperDimondCorner\",//SHAPE_LAYOUTS.upperLayoutType5,\r\n LowerIroningBoardRight: \"LowerIroningBoardRight\",\r\n LowerIroningBoardLeft: \"LowerIroningBoardLeft\",\r\n};\r\n\r\nexport const SHAPE_UPPER_LAYOUTS = [\r\n SHAPE_LAYOUTS.UpperLCorner,\r\n SHAPE_LAYOUTS.UpperDimondShape,\r\n SHAPE_LAYOUTS.UpperDimondCorner,\r\n];\r\n\r\nexport const SHAPE_LOWER_LAYOUTS = [\r\n SHAPE_LAYOUTS.LowerLCorner,\r\n SHAPE_LAYOUTS.LowerDullangle,\r\n SHAPE_LAYOUTS.LowerDualangle,\r\n SHAPE_LAYOUTS.LowerIroningBoard,\r\n SHAPE_LAYOUTS.LowerDimondShape,\r\n SHAPE_LAYOUTS.LowerDimondCorner,\r\n SHAPE_LAYOUTS.LowerIroningBoardRight,\r\n SHAPE_LAYOUTS.LowerIroningBoardLeft,\r\n];\r\nexport const SHAPE_DIAMOND_LAYOUTS = [\r\n SHAPE_LAYOUTS.LowerDimondCorner,\r\n SHAPE_LAYOUTS.LowerDimondShape,\r\n SHAPE_LAYOUTS.UpperDimondCorner,\r\n SHAPE_LAYOUTS.UpperDimondShape,\r\n];\r\n\r\nexport const IRONING_BOARD_DIRECTION = {\r\n left: 'left',\r\n right: 'right'\r\n}\r\n\r\nexport const SHAPE_LAYOUTS_WITHOUT_HANDLES = [\r\n SHAPE_LAYOUTS.LowerIroningBoardRight,\r\n SHAPE_LAYOUTS.LowerIroningBoardLeft,\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 UpperDimondCorner: [\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 UpperLCorner: [\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 LowerLCorner: [\r\n //'SM-ERB36/BER36', 'Providence Cabinets Shaker White 33\" Lazy Susan'\r\n ],\r\n /**\r\n * |‾‾‾/\r\n * | >\r\n * |/\r\n */\r\n LowerDullangle: [\r\n //'SW-BEC24'\r\n ],\r\n /**\r\n * |‾‾‾|\r\n * | |\r\n * | )\r\n */\r\n LowerIroningBoard: [\r\n //'SW-BES12'\r\n ],\r\n LowerIroningBoardRight: [\r\n //'SW-BES12'\r\n ],\r\n /**\r\n * |‾‾‾‾|\r\n * | /\r\n * |__/\r\n */\r\n UpperDimondShape: [],\r\n };\r\n this.specialShapes = {\r\n LowerLCorner: SHAPE_LAYOUTS.LowerLCorner,\r\n LowerDullangle: SHAPE_LAYOUTS.LowerDullangle,\r\n LowerDualangle: SHAPE_LAYOUTS.LowerDualangle,\r\n LowerIroningBoard: SHAPE_LAYOUTS.LowerIroningBoard,\r\n LowerDimondShape: SHAPE_LAYOUTS.LowerDimondShape,\r\n LowerDimondCorner: SHAPE_LAYOUTS.LowerDimondCorner,\r\n LowerIroningBoardRight: SHAPE_LAYOUTS.LowerIroningBoardRight,\r\n LowerIroningBoardLeft: SHAPE_LAYOUTS.LowerIroningBoardLeft,\r\n\r\n UpperLCorner: SHAPE_LAYOUTS.UpperLCorner,\r\n UpperDimondShape: SHAPE_LAYOUTS.UpperDimondShape,\r\n UpperDimondCorner: SHAPE_LAYOUTS.UpperDimondCorner,\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 sqftShapeManager.setShapeFeatureId(shapeId, feature.dbFeature.id);\r\n sqftShapeManager.setShapeRelatedParentFeatureId(shapeId, parentFeature.dbFeature.id);\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 margin = diamondLength ? width - diamondLength : 0;\r\n switch (shapeLayout) {\r\n case SHAPE_LAYOUTS.lowerLayoutType1:\r\n case SHAPE_LAYOUTS.LowerLCorner:\r\n case SHAPE_LAYOUTS.upperLayoutType2:\r\n case SHAPE_LAYOUTS.UpperLCorner:\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 case SHAPE_LAYOUTS.LowerDullangle:\r\n case SHAPE_LAYOUTS.LowerDualangle:\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.LowerIroningBoard:\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 case SHAPE_LAYOUTS.LowerDimondShape:\r\n case SHAPE_LAYOUTS.upperLayoutType4:\r\n case SHAPE_LAYOUTS.UpperDimondShape:\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 case SHAPE_LAYOUTS.LowerDimondCorner:\r\n case SHAPE_LAYOUTS.upperLayoutType5:\r\n case SHAPE_LAYOUTS.UpperDimondCorner:\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: 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 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 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 * 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 {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 {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\r\nexport const setDealerUserFromFabricator = (fabricatorData) => {\r\n const {userIsLoggedIn} = store.getState().userState;\r\n if (userIsLoggedIn) {\r\n return\r\n }\r\n try {\r\n const addressObject = Array.isArray(fabricatorData.addresses) && fabricatorData.addresses[0]\r\n ? fabricatorData.addresses[0]\r\n : {};\r\n let newUserInfo = getUpdatedUserInfoFromTheResponse({}, fabricatorData, true);\r\n newUserInfo = {\r\n ...newUserInfo,\r\n email: fabricatorData.contactEmail,\r\n password: \"\",\r\n firstName: fabricatorData.companyName || fabricatorData.name,\r\n postal: addressObject.postal || \"\",\r\n isNew: false,\r\n lastName: \"\",\r\n phone2: \"\",\r\n address1: addressObject.address1 || \"\",\r\n address2: addressObject.address2 || \"\",\r\n city: addressObject.city || \"\",\r\n provence: addressObject.provence || \"\",\r\n state: addressObject.state || \"\",\r\n // country: addressObject.country || \"\", // it should be an object, not a string!\r\n };\r\n // console.log(\"fab user\", newUserInfo);\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 fabricator\", fabricatorData);\r\n }\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 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 {(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 {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, {useEffect, useState} from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport {FormattedMessage} from \"react-intl\";\r\n\r\nimport {setLookActiveFeature, updateNavigationCount} from \"../../../../../actions/lookFunctions\";\r\nimport {getFeatureOptions, getOptionStyles, navFeatureCLick} from \"../../lookFunctions\";\r\nimport {updateCanvasCount} from \"../../../../../actions/actionFunctions\";\r\nimport {allowCheckForCollection} from \"../../../grohe/groheNavigation/groheFunctions\";\r\nimport Config, {IS_PRODUCT_JOURNEY} from \"../../../../../config\";\r\n\r\nimport WithClickCount from \"../../../hocs/withClickCount\";\r\nimport Analytics, {LOOK_JOURNEY_ANALYTIC_EVENTS, PRODUCT_JOURNEY_ANALYTIC_EVENTS} from \"../../../../../analytics\";\r\nimport {enableRelatedFeature, getDbFeatureProperty} from \"../../lookFunctions2\";\r\nimport PropTypes from \"prop-types\";\r\nimport {setWizardSelectedValues} from \"../../../../../actions/wizardFunctions\";\r\nimport {wizardGroupInterface} from \"../../../../../interfaces/wizardItemInterface\";\r\nimport {featureInterface} from \"../../../../../interfaces/featureInterface\";\r\nimport WithUpdateLookCartItem from \"../../../hocs/withUpdateLookCartItem\";\r\nimport {getColorFilterValue} from \"../../../../../misc/filtersFunctions\";\r\n\r\nconst LookFeatureOptions = (props) => {\r\n\r\n const {lookActiveFeature, filterGroups, setLookActiveFeature, lookActiveFeatureCustomName, updateCanvasCount,\r\n lookActiveFeatureCollection, lookActiveFeatureMatchingFeature, lookActiveFeatureMountType, lookActiveFeatureMountHoles,\r\n lookActiveFeatureLixilSubCategory, isWizard, wizardActiveStep, wizardGroup, setWizardSelectedValues, fabricatorData,\r\n updateNavigationCount, navigationCount, lookActiveFeaturePositionInList} = props;\r\n const [availableOptions, setAvailableOptions] = useState([]);\r\n\r\n const checkCollectionName = lookActiveFeature && !allowCheckForCollection(lookActiveFeature) ? \"\" : lookActiveFeatureCollection;\r\n\r\n useEffect(() => {\r\n if (fabricatorData.isEncore) {\r\n return\r\n }\r\n const colorOptions = getFeatureOptions(lookActiveFeature, filterGroups, \"Color\");\r\n setAvailableOptions(colorOptions || [])\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [lookActiveFeatureCustomName, checkCollectionName, lookActiveFeatureMatchingFeature,\r\n lookActiveFeatureMountType, lookActiveFeatureLixilSubCategory, lookActiveFeatureMountHoles, navigationCount]);\r\n\r\n if (!availableOptions.length || fabricatorData.isEncore) {\r\n return null\r\n }\r\n\r\n const activeFilterGroupValue = getColorFilterValue(lookActiveFeature, filterGroups)\r\n\r\n const optionsButtonClick = (option, maxClickCountReached, updateLookCartItem) => {\r\n\r\n const featureLabel = Analytics.getSkuForAnalytics(lookActiveFeature);\r\n const analyticsLabel = IS_PRODUCT_JOURNEY\r\n ? PRODUCT_JOURNEY_ANALYTIC_EVENTS.productFeatureOptions + featureLabel\r\n : LOOK_JOURNEY_ANALYTIC_EVENTS.lookFeatureOptions + featureLabel;\r\n Analytics.sendClickEvent(analyticsLabel);\r\n\r\n if (maxClickCountReached()) { // fabricator settings click lead capture\r\n return false;\r\n }\r\n\r\n if (Config.isDevMode()) {\r\n console.log(\"option.feature\", option.feature);\r\n }\r\n\r\n if (isWizard) {\r\n setWizardSelectedValues({\r\n [wizardActiveStep]: {\r\n wizardGroup,\r\n selectedFeature: option.feature,\r\n partId: option.feature.partId\r\n }\r\n });\r\n }\r\n\r\n setLookActiveFeature(option.feature, lookActiveFeaturePositionInList);\r\n navFeatureCLick(option.feature);\r\n enableRelatedFeature(option.feature);\r\n updateLookCartItem(option.feature);\r\n updateNavigationCount();\r\n updateCanvasCount();\r\n };\r\n\r\n return (\r\n \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","import {getFeatureCost, getFeatureUnit} from \"./helpers\";\r\nimport {BATHROOM_VISUALIZER_TYPES} from \"../config\";\r\nimport store from \"../store\";\r\nimport {fakeIntl} from \"../translatesProvider\";\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 featureGroup = fromFeature.getParent ? fromFeature.getParent() : null;\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 groupName: fromFeature.dbFeature.groupName,\r\n parentName: featureGroup ? featureGroup.customGroupDisplayName || featureGroup.partName : undefined,\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 {fabricatorState} = store.getState();\r\n const units = getFeatureUnit(ci.cartFeature, fakeIntl, fabricatorState, ci.quantity, ci);\r\n const fabCurrency = fabricatorState.settings.currency;\r\n const cartItem = Object.assign({}, ci, {\r\n cartFeature: getCompressedFeature(ci, ci.cartFeature),\r\n units,\r\n currency: ci.cartFeature.getFeatureCurrency ? ci.cartFeature.getFeatureCurrency() || fabCurrency : fabCurrency,\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","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\nimport {getCountertopPartNames} from \"./shapeHelper\";\r\n\r\nexport const enableFreeDrawMode = () => {\r\n\r\n}\r\n\r\nexport const disableFreeDrawMode = () => {\r\n\r\n}\r\n\r\nexport const createShapeFromFreeDrawPoints = (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/**\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 {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 static saveFiles(data, options = {}) {\r\n return sqftPost(\"/api/AR/Store\", data,{...options, domain: HARDCODED_DOMAIN});\r\n }\r\n\r\n static getCrownMolding(data, options = {}) {\r\n return sqftPost(\"/api/AR/Composer/crown_molding\", data,{...options, domain: HARDCODED_DOMAIN});\r\n }\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 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 {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 handleSubTypeClick = subType => { // sidebar radio button click\r\n Analytics.sendClickEvent('sub-type-clicked-' + subType);\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 {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 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 {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 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 ![]()
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 {/*
\r\n );\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(\"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 * 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, {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 {/* {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 {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","//INITIAL FLOW\r\nimport * as types from \"./actionTypes\";\r\n\r\nexport const setShowUnlockCalculations = (showUnlockCalculations) => ({\r\n type: types.SET_SHOW_UNLOCK_CALCULATIONS,\r\n payload: {showUnlockCalculations}\r\n});\r\n\r\nexport const setUnlockCalculationsStep = (unlockCalculationsStep) => ({\r\n type: types.SET_UNLOCK_CALCULATIONS_STEP,\r\n payload: {unlockCalculationsStep}\r\n});\r\n\r\nexport const showUnlockCalculationsCartItems = (showCartItems) => ({\r\n type: types.SHOW_UNLOCK_CALCULATIONS_CART_ITEM,\r\n payload: {showCartItems}\r\n});\r\n\r\nexport const showUnlockCalculationsTotalItems = (showTotalItems) => ({\r\n type: types.SHOW_UNLOCK_CALCULATIONS_TOTAL_ITEM,\r\n payload: {showTotalItems}\r\n});\r\n\r\nexport const setShowUnlockCalculationsTutorial = (showUnlockCalculationsTutorial) => ({\r\n type: types.SHOW_UNLOCK_CALCULATIONS_TUTORIAL,\r\n payload: {showUnlockCalculationsTutorial}\r\n});\r\n\r\nexport const setUnlockCalculationsTutorialStep = (unlockCalculationsTutorialStep) => ({\r\n type: types.SET_UNLOCK_CALCULATIONS_TUTORIAL_STEP,\r\n payload: {unlockCalculationsTutorialStep}\r\n});\r\n\r\nexport const setUnlockCalculationsTutorialFinished = (unlockCalculationsTutorialIsFinished) => ({\r\n type: types.SET_UNLOCK_CALCULATIONS_TUTORIAL_FINISHED,\r\n payload: {unlockCalculationsTutorialIsFinished}\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\n// import SvgIcon from \"@mui/material/SvgIcon\";\r\nimport Grow from '@mui/material/Grow';\r\nimport Popper from '@mui/material/Popper';\r\n// import Button from \"@mui/material/Button\";\r\n// import ChevronRightIcon from \"@mui/icons-material/ChevronRight\";\r\n\r\n// import {setLookIntroStep, setLookOverlayOpened} from \"../../../../actions/lookFunctions\";\r\n// import {LOOK_INTRO_STEPS} from \"../../core/constants\";\r\n// import {LookIconNavigate} from \"../../../common/icons\";\r\n\r\nconst LookIntroPopper = (props) => {\r\n\r\n const {introStep, anchorRef, currentStep, placement, toolTipText = \"\", className, roomIdeasButtonTranslate} = props;\r\n\r\n // const nextButtonClick = () => {\r\n // if (currentStep === LOOK_INTRO_STEPS.review) {\r\n // setLookIntroStep(introStep + 2); // go to exit, skip rooms\r\n // } else if (currentStep === LOOK_INTRO_STEPS.exit) { // exit button - finish\r\n // setLookOverlayOpened(\"\");\r\n // setLookIntroStep(LOOK_INTRO_STEPS.disabled);\r\n // setLocalStorageItem(LOCAL_STORAGE_KEYS.introVisited, true);\r\n // } else {\r\n // setLookIntroStep(introStep + 1);\r\n // }\r\n // };\r\n\r\n return (\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\n )}\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 {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 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\nexport const 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,\r\n fabricatorData} = 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 const label = property === \"postal\" && fabricatorData.isRenuit\r\n ? \"Postal Code\"\r\n : intl.formatMessage({id: \"look.inputs.\" + property})\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 const fabricatorData = store.fabricatorState;\r\n return {\r\n userInfo,\r\n userInfoErrors,\r\n fabricatorData,\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 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 \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[getDbFeatureProperty(\"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
\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 $ 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 this.keyboardFrame = node} onClick={(e) => e.stopPropagation()}>\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 )\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","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\nimport uuid from \"uuid\";\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 || []).map(taxObject => {\r\n if (!taxObject.id) {\r\n taxObject.id = uuid.v4();\r\n }\r\n if (fabricatorHardcode.hardCodeIsAmericanStandard()) {\r\n taxObject.isCustomEditableTax = true;\r\n }\r\n return taxObject\r\n }),\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","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 {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 {\r\n SET_ADMIN_LOGIN_POPUP_VISIBLE,\r\n SET_ADMIN_LOGOUT_VISIBLE,\r\n SET_ADMIN_TOOL_SETTINGS_POPUP_VISIBLE\r\n} from \"../../../actions/actionTypes\";\r\n\r\nexport const setAdminLoginPopupVisible = (adminLoginPopupVisible = false) => ({\r\n type: SET_ADMIN_LOGIN_POPUP_VISIBLE,\r\n payload: {adminLoginPopupVisible}\r\n});\r\n\r\nexport const setAdminLogoutVisible = (adminLogoutVisible = false) => ({\r\n type: SET_ADMIN_LOGOUT_VISIBLE,\r\n payload: {adminLogoutVisible}\r\n});\r\n\r\nexport const setAdminToolSettingsPopupVisible = (adminToolSettingsPopupVisible = false, adminToolSettingsPopupFeature = null) => ({\r\n type: SET_ADMIN_TOOL_SETTINGS_POPUP_VISIBLE,\r\n payload: {adminToolSettingsPopupVisible, adminToolSettingsPopupFeature}\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 \"./arButtonGoogleWebXR/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 \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
this.keyboardFrame = node}>\r\n {this.state.hidden ? null : (\r\n \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 {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","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 {COUNTERTOP_GROUP} from \"../../../../kvComponent/core/constants\";\r\nimport {COUNTERTOP_GROUP_BATHROOM} from \"../../../core/constants\";\r\nimport {filterCartItems, sortCartItemsForListPage} from \"../../../lookNavigation/lookFunctions2\";\r\n\r\n/**\r\n * @param cartItem {cartItemInterface}\r\n * @param property {string}\r\n * @returns {number|string}\r\n */\r\nexport const getCartItemShippingCost = (cartItem, property = \"shippingCost\") => {\r\n if (property !== \"shippingCost\") {\r\n return cartItem[property] || cartItem.cartFeature.dbFeature[property]\r\n }\r\n return (typeof cartItem.shippingCost === \"number\")\r\n ? cartItem.shippingCost\r\n : (typeof cartItem.cartFeature.dbFeature.shippingCost === \"number\")\r\n ? cartItem.cartFeature.dbFeature.shippingCost\r\n : 0\r\n}\r\n\r\n/**\r\n * returns array of deliveries\r\n * @param cartItems {[cartItemInterface]}\r\n * @returns {array}\r\n */\r\nexport const createDeliverySections = (cartItems) => {\r\n\r\n const cartItemsToInclude = filterCartItems(cartItems, true, true);\r\n const cartItemsList = sortCartItemsForListPage(cartItemsToInclude);\r\n\r\n let deliveries = [];\r\n cartItemsList.forEach(cartItem => {\r\n const cartItemShippingCost = getCartItemShippingCost(cartItem) || 0;\r\n const cartItemShippingName = getCartItemShippingCost(cartItem, \"shippingName\") || \"Free\";\r\n const cartItemShippingTime = getCartItemShippingCost(cartItem, \"shippingTime\") || \"-\";\r\n const cartItemShippingCode = getCartItemShippingCost(cartItem, \"shippingCode\") || \"-\";\r\n const existingDelivery = deliveries.find(delivery => {\r\n return delivery.price === cartItemShippingCost && delivery.name === cartItemShippingName\r\n });\r\n if (existingDelivery) {\r\n existingDelivery.cartItems.push(cartItem.id)\r\n } else {\r\n deliveries.push({\r\n price: cartItemShippingCost,\r\n name: cartItemShippingName,\r\n time: cartItemShippingTime,\r\n code: cartItemShippingCode,\r\n cartItems: [cartItem.id],\r\n // activeDeliveryIndex: deliveries.length,\r\n })\r\n }\r\n })\r\n return deliveries\r\n}\r\n\r\nexport const setCartItemsShipping = (cartItems, shippingOptions = []) => {\r\n return cartItems.map(cartItem => {\r\n if (!cartItem.cartFeature || !cartItem.cartFeature.dbFeature) {\r\n return cartItem // no need to add a delivery\r\n }\r\n const shippingForItem = shippingOptions.find(shippingObject => shippingObject.dbFeatureId === cartItem.cartFeature.dbFeature.id);\r\n if (shippingForItem && shippingForItem.options && shippingForItem.options.length) {\r\n if (cartItem.shippingName && shippingForItem.options.some(option => option.title === cartItem.shippingName)) {\r\n return cartItem // already assigned, we already have been here\r\n }\r\n const firstOption = shippingForItem.options[0];\r\n return Object.assign({}, cartItem, {\r\n shippingCost: Math.trunc(firstOption.cost * 100) / 100,\r\n shippingName: firstOption.title,\r\n shippingTime: firstOption.delivery,\r\n shippingCode: firstOption.code,\r\n })\r\n } else if (cartItem.shippingName) {\r\n return cartItem // already assigned, we already have been here\r\n } else if (cartItem.cartFeature.dbFeature.shippingCost || cartItem.cartFeature.dbFeature.shippingName) {\r\n return Object.assign({}, cartItem, {\r\n shippingCost: cartItem.cartFeature.dbFeature.shippingCost || 0,\r\n shippingName: getCartItemShippingCost(cartItem, \"shippingName\") || \"Free\",\r\n shippingTime: getCartItemShippingCost(cartItem, \"shippingTime\") || \"-\",\r\n shippingCode: getCartItemShippingCost(cartItem, \"shippingCode\") || \"-\",\r\n })\r\n } else {\r\n return Object.assign({}, cartItem, {\r\n shippingCost: 0,\r\n shippingName: \"Free\",\r\n shippingTime: \"-\",\r\n shippingCode: \"-\",\r\n })\r\n }\r\n })\r\n}\r\n\r\nconst area2Codes = [\"MN\", \"WI\", \"MI\", \"NY\", \"VT\", \"NH\", \"ME\", \"MA\", \"RI\", \"CT\", \"NJ\"];\r\nconst area3Codes = [\"WA\", \"OR\", \"CA\", \"AZ\", \"NV\", \"ID\", \"MT\", \"WY\", \"UT\", \"NM\", \"CO\", \"SD\", \"ND\"];\r\n\r\nconst getAreaCost = (postalCode) => {\r\n if (area3Codes.includes(postalCode)) {\r\n return 295\r\n } else if (area2Codes.includes(postalCode)) {\r\n return 245\r\n }\r\n return 225\r\n}\r\n\r\n/**\r\n * @param deliveryCost {number}\r\n * @param cartItems {{cartItemInterface}}\r\n * @param storeState {object}\r\n * @returns {number}\r\n */\r\nexport const getCafeCountertopsDeliveryCost = (deliveryCost = 0, cartItems, storeState) => {\r\n let materialsQuantity = cartItems.reduce(((totalQuantity, cartItem) => {\r\n if (COUNTERTOP_GROUP.includes(cartItem.partId) || COUNTERTOP_GROUP_BATHROOM.includes(cartItem.partId)) {\r\n totalQuantity = totalQuantity + cartItem.quantity;\r\n }\r\n return totalQuantity\r\n }), 0)\r\n if (materialsQuantity === 0) {\r\n return deliveryCost\r\n }\r\n if (materialsQuantity < 10) {\r\n deliveryCost = deliveryCost + (95 * 2)\r\n } else if (materialsQuantity < 25) {\r\n const {stateShort, state} = storeState.paymentState.shippingAddress;\r\n const postalCode = stateShort || (state || \"\").slice(0, 2) || storeState.userState.userInfo.stateShort || (storeState.userState.userInfo.state || \"\").slice(0, 2);\r\n deliveryCost = deliveryCost + (getAreaCost(postalCode) * 2)\r\n } else {\r\n deliveryCost = deliveryCost + ((materialsQuantity * 6) * 2) // $6/sqft of material\r\n }\r\n return deliveryCost\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 {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, {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\nimport {IS_SUPER_ADMIN} from \"../config\";\r\nimport SuperAdminLoginButton from \"./qkbPages/superAdmin/SuperAdminLoginButton\";\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 {n.name}\r\n \r\n ));\r\n }\r\n}\r\n\r\nconst DesktopHeaderWithRouter = withRouter(props => \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 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 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 * 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 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 {\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\nimport sqftConfig from \"../../sqft/components/canvas/store/sqftConfig\";\r\nimport {\r\n groupedDataInControllers, QUANTITY_GROUP,\r\n WORKSPACE_CONTROLLERS_THAT_WILL_ADD_FEATURES\r\n} from \"../../sqft/components/canvas/store/workspaceControllers\";\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 && 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 state = store.getState();\r\n const isSlabPricingEnabled = state.sqftSlabState.isSlabPricingEnabled;\r\n const layout = getCurrentLayout(visualizerType);\r\n\r\n Object.keys(sqftFeatures).forEach(parentKey => {\r\n let featuresPassed = [];\r\n let featuresPassedGroups = [];\r\n const isCountertop = parentKey === \"countertop\" || parentKey === \"center_island_countertop\";\r\n let shouldUseRelatedParentFeatureAsMain = false;\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\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 } else if (parentKey === SQFT_FEATURES.crown_molding) {\r\n featuresPassed = prepareCrownMoldings(sqftPassedData, parentKey);\r\n } else if (Object.values(ALLOWED_LABEL_NAV_ITEMS).includes(parentKey)) {\r\n if (sqftConfig.shouldUseCabinetDoorsSQFT) {\r\n featuresPassed = prepareDefaultFeatureObjectGrouped(sqftPassedData.countertops, parentKey, 'relatedParentFeatureId');\r\n shouldUseRelatedParentFeatureAsMain = true;\r\n } else {\r\n featuresPassed = prepareDefaultFeatureObject(sqftPassedData.countertops, parentKey);\r\n }\r\n } else if (parentKey === SQFT_FEATURES.radius) {\r\n featuresPassed = prepareDefaultFeatureObject(sqftPassedData.radii, parentKey);\r\n } else if (parentKey === SQFT_FEATURES.corners) {\r\n featuresPassed = prepareDefaultFeatureObject(sqftPassedData.corners, parentKey);\r\n } else if (parentKey === SQFT_FEATURES.underlayment && sqftPassedData.underlayment && sqftPassedData.underlayment.sections) {\r\n featuresPassed = prepareDefaultFeatureObject(sqftPassedData.underlayment.sections, parentKey);\r\n } else if (parentKey === SQFT_FEATURES.bumpouts && sqftPassedData.bumpouts) {\r\n featuresPassed = sqftPassedData.bumpouts\r\n } else if ((parentKey === SQFT_FEATURES.top_handle || parentKey === SQFT_FEATURES.bottom_handle)\r\n && sqftPassedData.controllers\r\n && sqftPassedData.controllers.handles\r\n ) {\r\n featuresPassedGroups = prepareHandles(sqftPassedData, parentKey);\r\n } else if (WORKSPACE_CONTROLLERS_THAT_WILL_ADD_FEATURES.includes(parentKey)\r\n && sqftPassedData.controllers\r\n && sqftPassedData.controllers[parentKey]\r\n ) {\r\n if (groupedDataInControllers.includes(parentKey)) {\r\n featuresPassed = prepareDefaultFeatureObjectGrouped(sqftPassedData.controllers[parentKey], parentKey);\r\n } else {\r\n featuresPassed = prepareDefaultFeatureObject(sqftPassedData.controllers[parentKey], parentKey);\r\n }\r\n }\r\n\r\n if (featuresPassed.length > 0) {\r\n // featuresPassedGroups = [{\r\n // featuresPassed: featuresPassed\r\n // }]\r\n sqftFeatures[parentKey].features = featuresPassed.map(featurePassed =>\r\n prepareSQFTFeatures({featurePassed, parentKey, quoteIndex, layout, sqftPassedData, cartItems, isCountertop,\r\n previouslyAddedSqftFeatures, sqftFromFeature, shouldUseRelatedParentFeatureAsMain, intl, fabricatorData})\r\n ).filter(feature => feature !== null);\r\n // set FeatureGroup\r\n sqftFeatures[parentKey].subPart = sqftFeatures[parentKey].features[0] ? sqftFeatures[parentKey].features[0].subPart : null;\r\n }\r\n\r\n if (featuresPassedGroups.length > 0) {\r\n const preparedFeaturesGroups = featuresPassedGroups.map(group => {\r\n return {\r\n groupTitle: group.groupTitle,\r\n features: group.featuresPassed.map(featurePassed =>\r\n prepareSQFTFeatures({\r\n featurePassed, parentKey, quoteIndex, layout, sqftPassedData, cartItems, isCountertop,\r\n previouslyAddedSqftFeatures, sqftFromFeature, shouldUseRelatedParentFeatureAsMain, intl, fabricatorData\r\n })\r\n ).filter(feature => feature !== null)\r\n }});\r\n // find and set FeatureGroup\r\n if (Array.isArray(preparedFeaturesGroups)) {\r\n for (let i = 0; i < preparedFeaturesGroups.length; i++) {\r\n if (preparedFeaturesGroups[i].features && preparedFeaturesGroups[i].features.length > 0) {\r\n sqftFeatures[parentKey].subPart = preparedFeaturesGroups[i].features[0].subPart;\r\n sqftFeatures[parentKey].featuresSubGroups = preparedFeaturesGroups\r\n break;\r\n }\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 return sqftFeatures;\r\n}\r\n\r\nfunction prepareSQFTFeatures(props) {\r\n const {featurePassed, parentKey, quoteIndex, layout, sqftPassedData, cartItems, previouslyAddedSqftFeatures,\r\n sqftFromFeature, shouldUseRelatedParentFeatureAsMain, intl, fabricatorData, isCountertop} = props;\r\n\r\n const relatedParentFeature = featurePassed.relatedParentFeatureId\r\n ? layout.getFeatureById(featurePassed.relatedParentFeatureId)\r\n : null;\r\n const effectivePartId = sqftConfig.shouldUseCabinetDoorsSQFT && relatedParentFeature\r\n ? relatedParentFeature.partId\r\n : parentKey;\r\n const featureGroup = getSimilarFeatureGroup(effectivePartId, effectivePartId, quoteIndex);\r\n\r\n if (featureGroup) {\r\n const quantity = getQuantityFromCalculator(effectivePartId, featurePassed, sqftPassedData);\r\n const displayFakePrice = getFakePriceFromCalculator(effectivePartId, featurePassed, sqftPassedData, cartItems, quoteIndex);\r\n let [feature, isSqftFromFeature, fromWizardGroupId] = getFeatureFromSQFT(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 );\r\n const displayFakeQuantity = effectivePartId === SQFT_FEATURES.slabs ? featurePassed.totalSlabs : null;\r\n const displayFakeFeatureGroupName = effectivePartId === 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 = effectivePartId === SQFT_FEATURES.slabs ? getSlabUnit(featurePassed.totalSlabs, intl) : featureUnit;\r\n sqftShapeManager.setShapeFeature(featurePassed.id, feature);\r\n\r\n return {\r\n disabled: featurePassed.isDisabledInPopup || false, //previouslyAddedSqftFeature ? previouslyAddedSqftFeature.disabled : false,\r\n feature: sqftConfig.shouldUseCabinetDoorsSQFT && relatedParentFeature ? relatedParentFeature : feature,\r\n partId: effectivePartId,\r\n relatedParentFeature,\r\n shouldUseRelatedParentFeatureAsMain,\r\n displayFakeFeatureGroupName,\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 quantityGroup: featurePassed.quantityGroup,\r\n displayFakePrice,\r\n initialQuantity: quantity,\r\n sqftId: featurePassed.id,\r\n sqftIds: featurePassed.ids,\r\n sqftQuantities: featurePassed.sqftQuantities,\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 }\r\n\r\n console.log(\"No feature group added for\", parentKey, featurePassed.partId);\r\n return null;\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\nconst prepareHandles = (sqftPassedData, parentKey) => {\r\n const handlesForDoors = sqftPassedData.controllers.handles.filter(handlesModel => handlesModel.quantityGroup === QUANTITY_GROUP.doors);\r\n const handlesForDrawers = sqftPassedData.controllers.handles.filter(handlesModel => handlesModel.quantityGroup === QUANTITY_GROUP.drawers);\r\n const featuresPassedForDoors = prepareDefaultFeatureObjectGrouped(handlesForDoors, parentKey);\r\n const featuresPassedForDrawers = prepareDefaultFeatureObjectGrouped(handlesForDrawers, parentKey);\r\n\r\n return [\r\n {\r\n groupTitle: \"Doors\",\r\n featuresPassed: featuresPassedForDoors\r\n }, {\r\n groupTitle: \"Drawers\",\r\n featuresPassed: featuresPassedForDrawers\r\n }\r\n ]\r\n}\r\n\r\n/**\r\n * Returns other dataObjects 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 prepareDefaultFeatureObject = (sqftPassedDataHandler, parentKey) => {\r\n return sqftPassedDataHandler\r\n .filter(passedObject => passedObject.partId === parentKey)\r\n .map(passedObject => {\r\n return {\r\n id: passedObject.id,\r\n partId: passedObject.partId,\r\n featureId: passedObject.featureId,\r\n relatedParentFeatureId: passedObject.relatedParentFeatureId,\r\n qtCatName: passedObject.qtCatName,\r\n quantity: passedObject.quantity,\r\n squareFeet: passedObject.squareFeet,\r\n }\r\n });\r\n}\r\n\r\n/**\r\n * Returns other dataObjects that comes from sqft\r\n * @param sqftPassedDataHandler {object} // data that comes from sqft\r\n * @param parentKey {string}\r\n * @param groupByKey {string} // key to group by (e.g., 'featureId' or 'relatedParentFeatureId')\r\n * @returns featuresPassed [array]\r\n */\r\nconst prepareDefaultFeatureObjectGrouped = (sqftPassedDataHandler, parentKey, groupByKey = 'featureId') => {\r\n const filteredData = sqftPassedDataHandler\r\n .filter(passedObject => passedObject[groupByKey] !== null && passedObject.partId === parentKey);\r\n\r\n // Grouping logic by the specified key\r\n const groupedByKey = filteredData.reduce((acc, passedObject) => {\r\n const groupKey = passedObject[groupByKey];\r\n const { id, quantity, squareFeet, quantityInGroup, ...rest } = passedObject;\r\n\r\n if (!acc[groupKey]) {\r\n acc[groupKey] = {\r\n ...rest,\r\n [groupByKey]: groupKey,\r\n ids: [],\r\n sqftQuantities: {},\r\n quantity: 0,\r\n quantityInGroup: 0,\r\n squareFeet: 0, //todo remove squareFeet and use only quantity\r\n };\r\n }\r\n\r\n acc[groupKey].ids.push(id);\r\n acc[groupKey].quantity += quantity ? quantity : 0;\r\n acc[groupKey].squareFeet += squareFeet ? squareFeet : 0;\r\n acc[groupKey].quantityInGroup += quantityInGroup ? quantityInGroup : 0;// not used\r\n acc[groupKey].sqftQuantities[id] = quantity ? quantity : 0;\r\n\r\n return acc;\r\n }, {});\r\n\r\n // Apply rounding to quantity\r\n return Object.values(groupedByKey).map(group => ({\r\n ...group,\r\n quantity: Math.ceil10(group.quantity, -2),\r\n squareFeet: Math.ceil10(group.squareFeet, -2),\r\n shouldShowEyeBall: false\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 * @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) => {\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 }\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, 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","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 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 and checking loaded features. Object! // {\"groupName\": []}\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.}\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 !Object.keys(this.allDbFeatures).some(groupName => {\r\n return this.allDbFeatures[groupName].some(feature => feature.id === dbFeatureId)\r\n })\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 let loadedDbFeatures = null;\r\n if (forParentGroup && dbFeatures[0] && ((forParentGroup.dbName || forParentGroup.partName) === dbFeatures[0].groupName)\r\n && this.allDbFeatures[dbFeatures[0].groupName]) {\r\n loadedDbFeatures = this.allDbFeatures[dbFeatures[0].groupName].slice();\r\n // console.log(\"loadedDbFeatures\", loadedDbFeatures);\r\n }\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, loadedDbFeatures)\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, allDbFeaturesToCheck = null) {\r\n if (!dbFeature || (dbFeature.employeesOnly && !document.kvConfig.isBackend)) {\r\n return;\r\n }\r\n const loadedDbFeatures = allDbFeaturesToCheck || this.allDbFeatures[dbFeature.groupName];\r\n if (loadedDbFeatures && loadedDbFeatures.length) {\r\n for (let i = 0; i < loadedDbFeatures.length; i++) {\r\n if (loadedDbFeatures[i].id === dbFeature.id) {\r\n // console.log(\"featureFound\", featureFound);\r\n updateExistingFeature(dbFeature, loadedDbFeatures[i], this);\r\n return;\r\n }\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[dbFeature.groupName].unshift(dbFeature) : this.allDbFeatures[dbFeature.groupName].push(dbFeature);\r\n if (!this.allDbFeatures[dbFeature.groupName]) {\r\n this.allDbFeatures[dbFeature.groupName] = [];\r\n }\r\n this.allDbFeatures[dbFeature.groupName].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","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\r\nexport const DASHBOARD_MESSAGING_ACTIONS = {\r\n updateCartItems: \"updateCartItems\", // parent -> visualizer\r\n setCostPrices: \"setCostPrices\", // parent -> visualizer\r\n jobDataAfterUpdate: \"jobDataAfterUpdate\", // visualizer -> parent\r\n setReferralData: \"setReferralData\", // parent -> visualizer\r\n}\r\n","import workspace from \"../workspace\";\r\n//import Point from \"../shapes/point\";\r\nimport EventManager from \"../../store/sqftEventManager\";\r\nimport sqftConfig, {MIN_DISTANCE_BETWEEN_FREE_DRAW_POINTS} 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 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_FREE_DRAW_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_FREE_DRAW_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 {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 Appliance from \"../../parts/appliance\";\r\n\r\n/**\r\n * @returns array\r\n * */\r\nconst getHoodConditions = (cabinetParent, forCrownMolding = false) => {\r\n let conditions = [];\r\n const applianceParent = cabinetParent.layout.parts[Appliance.id];\r\n const hoodIsVisible = applianceParent && applianceParent.hood && applianceParent.hood.activeFeature && !applianceParent.hood.disabled;\r\n if (!forCrownMolding) {\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 } else if (microwaveIsVisible && applianceParent.microwave.activeFeature.metaData[\"Width\"]) {\r\n conditions.push({\r\n propName: \"Width\",\r\n propValue: applianceParent.microwave.activeFeature.metaData[\"Width\"]\r\n });\r\n }\r\n }\r\n if (hoodIsVisible && applianceParent.hood.activeFeature.metaData[\"HoodHeight\"]) {\r\n conditions.push({\r\n propName: \"HoodHeight\",\r\n propValue: applianceParent.hood.activeFeature.metaData[\"HoodHeight\"]\r\n });\r\n }\r\n return conditions\r\n}\r\n\r\nexport default getHoodConditions\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 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","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 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 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, {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\nimport takeRight from \"lodash/takeRight\";\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","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 \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.title ? {this.props.title} : null}\r\n {this.props.label ? : null}\r\n
\r\n );\r\n }\r\n}\r\n","export const getDeviceType = () => {\r\n const userAgent = navigator.userAgent || navigator.vendor || window.opera;\r\n\r\n if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {\r\n return DEVICE_TYPE.iOS;\r\n }\r\n\r\n if (/android/i.test(userAgent)) {\r\n return DEVICE_TYPE.Android;\r\n }\r\n\r\n if (/Windows|Macintosh|Linux|X11/.test(userAgent)) {\r\n return DEVICE_TYPE.Desktop;\r\n }\r\n\r\n return DEVICE_TYPE.unknown;\r\n};\r\nexport const DEVICE_TYPE = {\r\n iOS: 'iOS',\r\n Android: 'Android',\r\n Desktop: 'Desktop',\r\n unknown: 'unknown'\r\n}\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\nimport toolsControllers from \"../canvas/store/toolsControllers\";\r\nimport {FREE_FORM_THICKNESS_POPUP_ID} from \"../../constants\";\r\nimport store from \"../../../../store\";\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\r\nexport const handleFreeFormClick = function () {\r\n const state = store.getState();\r\n toolsControllers.shapeFreeForm.init();\r\n if (!state.sqftMenuState.changeValuePopups.find(valuePopup => valuePopup.id === FREE_FORM_THICKNESS_POPUP_ID)) {\r\n toolsControllers.shapeFreeForm.addThicknessPopup();\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 usePropsValue: PropTypes.bool,\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(value);\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 \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
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","'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 {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 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 {baseAssetsPath} 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 fakeIntl = {\r\n formatMessage: ({id}) => {\r\n return TRANSLATES[id]\r\n }\r\n}\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(`${baseAssetsPath}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(`${baseAssetsPath}translates/translates.csv?v=2.2.2`);\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(`${baseAssetsPath}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(`${baseAssetsPath}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(`${baseAssetsPath}translates/translates_sqft_v1.csv?ver=1.1.0`);\r\n // const transSqft = parseTranslatesResponse(responseSqft);\r\n // console.log(\"transSqft\", transSqft);\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 \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 \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 {this.props.children}
\r\n }\r\n return (\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\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, {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\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\nimport SuperAdminFeatureToolSettingsButton from \"../../qkbPages/superAdmin/SuperAdminFeatureToolSettingsButton\";\r\nimport {getDifferentToolSettings} from \"../../qkbPages/superAdmin/adminFunctions\";\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 hidePriceNoCart = isWizard && wizardGroup && wizardGroup.hidePriceNoCart;\r\n const wizardSkipAndAddToCartButtonVisible = isWizard && wizardGroup && (wizardGroup.skipProductInfo || hidePriceNoCart);\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\r\n && !fabricatorData.hidePricesFromUser && !hidePriceNoCart;\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 \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 const {adminToolSettingsPopupVisible} = store.adminState;\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 adminToolSettingsPopupVisible,\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 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","import React from \"react\";\r\nimport PropTypes from \"prop-types\";\r\n\r\nimport PrintDocumentInfoFabricator from \"./printDocumentInfoFabricator\";\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, messages} = props;\r\n\r\n const {View, Text} = window.ReactPdfRenderer;\r\n\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\r\n return (\r\n \r\n \r\n {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 ? {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 {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","export const getFeatureUnit = (cartFeature, fabricatorData, messages, locale, quantity) => {\r\n const dbFeature = cartFeature.dbFeature;\r\n if ((fabricatorData.isLowes || fabricatorData.isCaesarStone) && locale === \"fr-FR\" && messages[\"transDoc.units_FR.\" + dbFeature.sharedFeatureName]) {\r\n if ((messages[\"transDoc.units_FR.\" + dbFeature.sharedFeatureName] === \"pieds carrés\") && dbFeature.unit === \"Each\") {\r\n return \"unité\"\r\n }\r\n return 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 ? messages[\"quotingTool.featureInfo.defaultQuantity\"]\r\n : messages[\"quotingTool.featureInfo.defaultQuantityMultiple\"]\r\n : dbFeature.unit\r\n }\r\n if (cartFeature.isStoneFeature) {\r\n return messages[\"shoppingCart.fetureInCartDefaultQuantitySQFT\"]\r\n }\r\n return messages[\"shoppingCart.fetureInCartDefaultQuantity\"]\r\n};\r\n\r\nexport const getCartItemName = (cartFeature, fabricatorData, messages, locale) => {\r\n const dbFeature = cartFeature.dbFeature;\r\n if (fabricatorData.isLowes || fabricatorData.isCaesarStone) {\r\n if (locale === \"fr-FR\" && messages[\"transDoc.customDisplayName_FR.\"+ dbFeature.sharedFeatureName]) {\r\n return messages[\"transDoc.customDisplayName_FR.\"+ dbFeature.sharedFeatureName]\r\n } else if (locale === \"pl-PL\" && messages[\"transDoc.customTranslateName_PL.\"+ dbFeature.sharedFeatureName]) {\r\n return 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 `${messages[dbFeature.sharedFeatureName]} (${cartFeature.fromFeatureName})`\r\n }\r\n return 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","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 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 'whatwg-fetch';\r\n\r\nconst shouldUseKvConfigDomain = document.location.hostname === 'localhost'\r\n || document.location.hostname.includes(\"192.168\")\r\n || document.location.hostname.includes(\"bs-local.com\") //browserstack\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","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 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 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 $ from 'jquery';\r\nimport clone from 'lodash/clone';\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
\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 \\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 {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,\r\n getCategoryFromMetadata,\r\n getThirdPartyAR3DMetaData,\r\n getUrlMatchingByColor,\r\n isHoodShape,\r\n} from \"./sqft3dArHelper\";\r\nimport workspaceControllers from \"../components/canvas/store/workspaceControllers\";\r\nimport sqftShapeManager from \"../components/canvas/store/sqftShapeManager\";\r\nimport {featureThumbnailUrl} from \"../../../misc/helpers\";\r\nimport {checkIfLookFeaturesReceived} from \"../../../api/look-api\";\r\n// import Misc from \"../../../misc/misc\";\r\n// import {isTouchDevice} from \"../../../misc/utils\";\r\n\r\nexport const DEFAULT_COUNTERTOP_HEIGHT = 34;\r\nexport const DEFAULT_BACKSPLASH_HEIGHT = 18;\r\nexport const MIN_CABINET_HOOD_HEIGHT = 30;\r\n\r\nexport class CabinetsSet {\r\n\r\n /**\r\n * NOT USED\r\n * @param displayDoorsOnly\r\n * @param shouldDisplayFramedDoors\r\n * @return {{doors_only: boolean, positions, should_display_framed_doors: boolean}}\r\n */\r\n static prepareCabinetsSet(displayDoorsOnly = false, shouldDisplayFramedDoors = 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 \"should_display_framed_doors\": shouldDisplayFramedDoors,\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 async prepareCabinetsPositions(shouldDisplayFramedDoors = false) {\r\n const layout = getCurrentLayout();\r\n const shapes = workspace.getShapes();\r\n\r\n const results = [];\r\n for (const shape of shapes) {\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 results.push(CabinetsSet.prepareRegularCabinetSet(shape, shapePosition, shapeDbFeature, relatedParentFeature, shouldDisplayFramedDoors));\r\n } else {\r\n console.log(\"3d model cannot be prepared, its parent not found shape.relatedParentFeatureId:\", shape.relatedParentFeatureId);\r\n }\r\n } else if (shape instanceof MovableImage) {\r\n let absolutePos = shape.shapeAbsolute.getAbsolutePosition();\r\n const shapePosition = absolutePos ? absolutePos : shape.getPosition();\r\n const featureGroup = layout.getFeatureGroupByPartId(shape.subType);\r\n if (!featureGroup.allFeaturesReceived && !featureGroup.requestInProgress) {\r\n await checkIfLookFeaturesReceived(featureGroup);\r\n }\r\n const shapeFeature = layout.getFeatureById(shape.featureId);\r\n\r\n if (shapeFeature) {\r\n results.push(CabinetsSet.prepareImageCabinetSet(shape, shapePosition, shapeFeature));\r\n }\r\n }\r\n }\r\n\r\n return results.filter(cabinetSet => cabinetSet !== null);\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 const xCorrection = (shapeWidth - shapeDepth) / 2 * Math.cos(radians); //7\r\n\r\n // Return the updated position of the model\r\n return {\r\n x: centerX - offsetX + xCorrection, // 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 rotatedDegrees: rotatedDegrees - 90\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, shouldDisplayFramedDoors) => {\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);\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 \"shapeId\": shape.id,\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 \"framed\": shouldDisplayFramedDoors,\r\n \"frame_width\": 0.75,\r\n \"frame_height\": 0.25,\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 let appliancePosition = CabinetsSet.adjustApplianceModelPosition(shapePosition, shapeWidth, shapeDepth, shape.rotatedDegrees);\r\n\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 \"featureId\": shapeFeature.dbFeature.id,\r\n \"shapeId\": shape.id,\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\": appliancePosition.rotatedDegrees,\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 let textureUrl = \"https://features-thumbnails.s3-accelerate.amazonaws.com/feature-env_ReBath_c174af44-eb6f-4a48-9f41-19709afff8b0.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 //const isMobile = Misc.isMobile() || isTouchDevice();\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 static prepareCountertopForGroup = (snappedShapes, textureUrl, countertopPositions, shapeHeight) => {\r\n const measurementPoints = sqftShapeManager.getMinMaxShapesPointsOnWorkspace(snappedShapes);\r\n const contours = sqftShapeManager.getShapesContourPointsOnWorkspace(snappedShapes, true);\r\n\r\n if (contours.length === 0) {\r\n console.error(\"contourPoints is empty\");\r\n return;\r\n }\r\n\r\n for (const contourPoints of contours) {\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\r\n countertopPositions.push({\r\n 'partId': 'countertop',\r\n 'x': contourPoints[0].x,\r\n 'y': shapeHeight,\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 }\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 const getWallTexture = () => {\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.selectedWall) {\r\n const layout = getCurrentLayout();\r\n const wallFeature = layout.getFeatureById(state.sqftState.selectedWall, true);\r\n if (wallFeature) {\r\n if (wallFeature.dbFeature.thirdPartyAR3DUrls) {\r\n const URLByFeatureName = get3dURLsForFeature(wallFeature);\r\n textureUrl = URLByFeatureName ? URLByFeatureName : wallFeature.dbFeature.thirdPartyAR3DUrls[0];\r\n } else {\r\n textureUrl = featureThumbnailUrl(wallFeature);\r\n }\r\n }\r\n }\r\n return textureUrl;\r\n };\r\n \r\n return walls.map(wall => {\r\n return {\r\n \"partId\": \"wall\",\r\n \"texture_url\": getWallTexture(),\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 getCabinetPosYFromShape (shape) {\r\n const layout = getCurrentLayout();\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 const shapeHeight = shape.shapeCabinet ? shape.shapeCabinet.getShapeHeight() : shape.getHeight();\r\n const url = getUrlMatchingByColor(shapeDbFeature, relatedParentFeature);\r\n\r\n return CabinetsHelper.getCabinetPosY(shape, shapeDbFeature, url, shapeHeight)\r\n }\r\n\r\n return 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 = Math.max(MIN_CABINET_HOOD_HEIGHT, parseFloat(snappedWithShape.shapeCabinet.getShapeHeight()));\r\n } else {\r\n upperCabinetHighestCabinetValue = Math.max(MIN_CABINET_HOOD_HEIGHT, 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","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 {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, points) => {\r\n for (let i = 0; i < points.length; i++) {\r\n if (points[i + 1] !== undefined) {\r\n let posX = points[i].modelCorePoint.mixins.movable.posX;\r\n let posY = points[i].modelCorePoint.mixins.movable.posY;\r\n let pointField = getPointField(posX, posY);\r\n\r\n posX = points[i + 1].modelCorePoint.mixins.movable.posX;\r\n posY = points[i + 1].modelCorePoint.mixins.movable.posY;\r\n let nextPointField = getPointField(posX, posY);\r\n // let pointField = points[i].getPointCords();\r\n // let nextPointField = points[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.addedPoints);\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 uuid from \"uuid\";\r\nimport clone from 'lodash/clone';\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 getBacksplashHeight = () => {\r\n return this.state.backsplashHeight\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 \\n' +\r\n ' \\n' +\r\n ' \\n' +\r\n '
\\n' +\r\n ' '+ i +'\"
\\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","//********* 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 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","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 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 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","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 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 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.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
!disabled && !textOnly && Analytics.sendClickEvent(\"checkbox - \" + text, checked) && onChecked(!checked)}>\r\n
\r\n {textOnly ? null :\r\n \r\n }\r\n {checked ?\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};\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, {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 {text}
\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 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 \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 {FormattedMessage} from \"react-intl\";\r\n\r\nimport Analytics from './../../analytics';\r\nimport UserLoginButton from './../ui/userLoginButton';\r\nimport {toggleUserPopup, changeMessageBoxState, showSchedulerPopup} from \"../../actions/actionFunctions\";\r\nimport {loaderDisable, loaderEnable} from \"../ui/loaderView\";\r\nimport {saveQuote} from \"../../api/server-api\";\r\nimport {QuoteRequestType, UserPopupTypes} from \"../visComponents/constants\";\r\nimport {renderMessagePopup} from \"../../api/api-popups\";\r\n\r\nclass ScheduleButton extends Component {\r\n\r\n static propTypes = {\r\n buttonLayoutId: PropTypes.oneOf([\"mobileButton\", \"designButtonMenu\", \"mobileNavigationMenu\"]).isRequired,\r\n scheduleButtonOnClick: PropTypes.func\r\n };\r\n\r\n handleScheduleButtonClick = () => {\r\n if (this.props.scheduleButtonOnClick) {\r\n this.props.scheduleButtonOnClick(); // close design button list, etc.\r\n }\r\n const fabricatorSettings = this.props.fabricatorSettings;\r\n Analytics.sendClickEvent(this.getAnalyticsEvent());\r\n if (!this.props.isPhoneNumberValidated) {\r\n UserLoginButton.handleLoginClick({\r\n ...this.props,\r\n userPopupType: UserPopupTypes.Schedule\r\n });\r\n return;\r\n }\r\n if (fabricatorSettings.enableCalendarForScheduling) {\r\n this.props.showSchedulerPopup(true)\r\n } else {\r\n loaderEnable(\"loader.appointmentText\", \"loader.appointmentTitle\");\r\n saveQuote({submit: true, quoteRequestType: QuoteRequestType.ScheduleAnAppointment})\r\n .then(() => {\r\n loaderDisable();\r\n renderMessagePopup(\"userPopup.messageBox.appointmentRequested\");\r\n });\r\n }\r\n };\r\n\r\n getAnalyticsEvent = () => {\r\n switch (this.props.buttonLayoutId) {\r\n case \"mobileButton\":\r\n default:\r\n return \"schedule-appointment-main-button\";\r\n case \"designButtonMenu\":\r\n return \"design-buttons-schedule-button\";\r\n case \"mobileNavigationMenu\":\r\n return \"menu-option-clicked-design-consultation\";\r\n }\r\n };\r\n\r\n getSchedulingButton =() => {\r\n switch (this.props.buttonLayoutId) {\r\n case \"mobileButton\":\r\n default:\r\n return (\r\n \r\n );\r\n case \"designButtonMenu\":\r\n return (\r\n \r\n \r\n \r\n );\r\n case \"mobileNavigationMenu\":\r\n return (\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 return {\r\n isMobile,\r\n abortRequestController: store.sqftState.abortRequestController,\r\n cabinetsGlb: store.sqftState.cabinetsGlb,\r\n SQFTViewMode: store.sqftState.SQFTViewMode,\r\n };\r\n};\r\nconst mapDispatchToProps = {\r\n setSqftCabinetsGlb,\r\n setSQFTAr3dPopup,\r\n changeSqftFeaturesPopup,\r\n setAPIErrorMessage,\r\n setAbortController,\r\n setSQFTViewMode,\r\n setMultiLoader,\r\n};\r\n\r\nexport default injectIntl(\r\n connect(mapStateToProps, mapDispatchToProps)(SqftFeaturesPopup3dButtons)\r\n)\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, blockClassName} = 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 {getViewIcon(lookViewType)}\r\n \r\n )\r\n};\r\n\r\nconst mapStateToProps = (store) => {\r\n const {lookExpanded, lookViewType} = store.lookState;\r\n const {isMobile} = store.serverState;\r\n return {\r\n lookExpanded,\r\n lookViewType,\r\n isMobile,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = {\r\n setLookViewType\r\n};\r\n\r\nexport default injectIntl(\r\n connect(mapStateToProps, mapDispatchToProps)(LookViewTypeSwitcher)\r\n)\r\n","import React, {useEffect, useMemo, useState} from 'react';\r\nimport {connect} from \"react-redux\";\r\nimport { Grid } from 'react-virtualized';\r\nimport 'react-virtualized/styles.css';\r\nimport {injectIntl} from 'react-intl';\r\nimport PropTypes from \"prop-types\";\r\nimport uniqBy from \"lodash/uniqBy\";\r\n\r\nimport {getCurrentLayout} from \"../../../../../../../appLayout\";\r\nimport {featureInterface} from \"../../../../../../../../interfaces/featureInterface\";\r\nimport SqftFeaturesChecker from \"./SqftFeaturesChecker\";\r\nimport SqftOptionsLoading from \"./SqftOptionsLoading\";\r\nimport SqftOptionsRelatedItemRow from \"./SqftOptionsRelatedItemRow\";\r\nimport {\r\n getFilteredRelatedFeatures,\r\n getRelatedFeaturesFromLayout,\r\n} from \"../../../../../../../../misc/helpers\";\r\nimport {getSortedFeatures} from \"../../../../../../helpers/featureHelper\";\r\nimport {loaderDisable, loaderEnable} from \"../../../../../../../ui/loaderView\";\r\nimport {getGridColumnDimensions, useGridDimensions} from \"../../../commonTools/featuresGrid/gridDimensions\";\r\n\r\nconst SqftOptionsRelatedItemList = (props) => {\r\n const { windowHeight, isMobile, activeFeature, itemClickCallback, partId, shouldSortByWidth, searchInputValue,\r\n reCacheMenuCounter, lookViewType, selectedFilters, groheFiltersSearchText } = props;\r\n const [activeItemIndex, setActiveItemIndex] = React.useState(0);\r\n\r\n const [loading, setLoading] = useState(true);\r\n const [parentFeature, setParentFeature] = useState(null);\r\n\r\n const {gridWidth, gridHeight} = useGridDimensions(windowHeight, isMobile);\r\n\r\n const layout = useMemo(() => getCurrentLayout(), []);\r\n const featureGroup = useMemo(() => layout.getFeatureGroupByPartId(partId), [layout, partId]);\r\n\r\n useEffect(() => {\r\n if (featureGroup) {\r\n setLoading(!featureGroup.allFeaturesReceived);\r\n if (!featureGroup.allFeaturesReceived) {\r\n loaderEnable();\r\n }\r\n } else {\r\n setLoading(false);\r\n }\r\n }, [featureGroup]);\r\n\r\n useEffect(() => {\r\n if (!featureGroup) {\r\n setParentFeature(null);\r\n return;\r\n }\r\n\r\n let parentFeature;\r\n\r\n if (featureGroup.activeFeature) {\r\n parentFeature = featureGroup.activeFeature;\r\n } else if (!featureGroup.allFeaturesReceived) {\r\n setParentFeature(null);\r\n return;\r\n }\r\n\r\n if (!featureGroup.activeFeature) {\r\n //featureGroup.setDefault(layout, true);\r\n parentFeature = featureGroup.activeFeature ? featureGroup.activeFeature : featureGroup.activeNotInVisualizerFeature;\r\n }\r\n\r\n setParentFeature(parentFeature);\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [featureGroup, layout, activeFeature, partId, loading, reCacheMenuCounter]);\r\n\r\n if (!featureGroup) {\r\n return {\r\n if (featureGroup.allFeaturesReceived) {\r\n setLoading(false);\r\n loaderDisable();\r\n }\r\n }} />\r\n )\r\n }\r\n\r\n if (!parentFeature) {\r\n console.log(\"selected feature matched by name not found\", partId);\r\n console.log(\"parentFeature\", parentFeature);\r\n return null;\r\n }\r\n\r\n const relatedFeatures = parentFeature.getFeatureRelatedFeatures();\r\n\r\n if (!Array.isArray(relatedFeatures) || !relatedFeatures.length) {\r\n console.log(\"relatedFeatures are missing\", relatedFeatures);\r\n console.log(\"parentFeature\", parentFeature);\r\n return null;\r\n }\r\n\r\n // Helper function to replace abbreviations in search text\r\n const expandSearchText = (text) => {\r\n return text\r\n .replace(/\\bh(\\d)/gi, 'Height $1')\r\n .replace(/\\bw(\\d)/gi, 'Width $1')\r\n .replace(/\\bd(\\d)/gi, 'Depth $1')\r\n .replace(/\\bh\\b/gi, 'Height')\r\n .replace(/\\bw\\b/gi, 'Width')\r\n .replace(/\\bd\\b/gi, 'Depth');\r\n };\r\n const expandedGroheFiltersSearchText = expandSearchText(groheFiltersSearchText);\r\n\r\n //Now let's search for the related features\r\n const {noFeaturesFound, relatedFeaturesFound} = getRelatedFeaturesFromLayout(\r\n relatedFeatures,\r\n parentFeature,\r\n expandedGroheFiltersSearchText,\r\n selectedFilters\r\n );\r\n if (noFeaturesFound.length) {\r\n console.log(\"ERROR: noFeaturesFound\", noFeaturesFound);\r\n }\r\n\r\n let relatedItemsList = getFilteredRelatedFeatures(relatedFeaturesFound);\r\n relatedItemsList = uniqBy(relatedItemsList, (feature) => feature.dbFeature.id);\r\n let emptyUrlsLog = [];\r\n\r\n relatedItemsList = relatedItemsList.filter(feature => {\r\n if (!feature.dbFeature.thirdPartyAR3DUrls) {\r\n //todo we can remove this searchInputValue and search by filters\r\n if (searchInputValue && feature.getFeatureName().toLowerCase().includes(searchInputValue.toLowerCase())\r\n || !searchInputValue\r\n ) {\r\n emptyUrlsLog.push(feature.dbFeature.sharedFeatureName);\r\n }\r\n } else {\r\n return feature;\r\n }\r\n });\r\n\r\n // const relatedGroups = createRelatedGroups(relatedItemsList, [], activeQuoteIndex, intl, fabricatorData)\r\n // void relatedGroups\r\n // console.log(\"relatedGroups\", relatedGroups);\r\n //\r\n // const groupName = parentFeature.dbFeature.groupName;\r\n // void groupName;\r\n\r\n if (emptyUrlsLog.length > 0) {\r\n console.log(`Features with empty thirdPartyAR3DUrls: ${emptyUrlsLog.join(', ')}`);\r\n }\r\n\r\n if (shouldSortByWidth) {\r\n relatedItemsList = getSortedFeatures(relatedItemsList);\r\n }\r\n\r\n const {columnCount, rowHeight} = getGridColumnDimensions(lookViewType);\r\n\r\n const columnWidth = Math.floor(gridWidth / columnCount) - 8 / columnCount; // Ensure width is an integer to avoid overflow\r\n const rowCount = Math.ceil(relatedItemsList.length / columnCount);\r\n\r\n return (\r\n \r\n
\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 {MODULE_CONTEXT_MENU_DIRECTIONS} from \"../../constants\";\r\n\r\nexport const topCabinetModuleSystem = [\r\n [\"18_18_25\", \"18_18_26\"],\r\n [\"18_36_4\", \"18_36_5\"],\r\n [\"36_36_1\"],\r\n [\"18_36_4\", \"18_18_26\", \"18_18_28\"],\r\n [\"18_36_4\", \"18_36_5\"],\r\n [\"18_18_25\", \"18_18_26\"],\r\n [\"18_36_4\", \"18_36_5\"],\r\n [\"36_36_1\"]\r\n];\r\n\r\nexport const bottomCabinetModuleSystem = [\r\n [],\r\n [\"36_12_41\", \"36_24_10\"],\r\n [\"24_12_44\", \"12_36_8\", \"24_12_46\", \"24_12_48\"],\r\n [\"12_36_6\", \"24_36_3\"],\r\n [\"12_36_6\", \"24_12_45\", \"24_24_18\"],\r\n [\"36_36_1\"],\r\n [\"36_12_41\", \"36_24_10\"],\r\n [\"36_12_41\", \"36_12_42\", \"36_12_43\"]\r\n];\r\n\r\nexport const getModuleCombinations = (moduleContextMenuModulePart, direction = MODULE_CONTEXT_MENU_DIRECTIONS.Vertical) => {\r\n // width-height-id\r\n switch (moduleContextMenuModulePart) {\r\n case \"1\":\r\n switch (direction) {\r\n case MODULE_CONTEXT_MENU_DIRECTIONS.Vertical:\r\n return [\"12_36_6-12_36_7-12_36_8\", \"18_36_4-18_36_5\", \"24_36_2-12_36_8\", \"12_36_6-24_36_3\"];\r\n case MODULE_CONTEXT_MENU_DIRECTIONS.Horizontal:\r\n return [\"36_12_41-36_12_42-36_12_43\", \"36_18_19-36_18_20\", \"36_24_9-36_12_43\", \"36_12_41-36_24_10\"];\r\n default:\r\n return []\r\n }\r\n case \"2\":\r\n switch (direction) {\r\n case MODULE_CONTEXT_MENU_DIRECTIONS.Vertical:\r\n return [\"12_36_6-12_36_7\"];\r\n case MODULE_CONTEXT_MENU_DIRECTIONS.Horizontal:\r\n return [\"24_24_15-24_12_48\", \"24_24_17-24_12_44\", \"24_18_21-24_18_23\", \"24_12_44-24_12_46-24_12_48\"];\r\n default:\r\n return []\r\n }\r\n case \"3\":\r\n switch (direction) {\r\n case MODULE_CONTEXT_MENU_DIRECTIONS.Vertical:\r\n return [\"12_36_7-12_36_8\"];\r\n case MODULE_CONTEXT_MENU_DIRECTIONS.Horizontal:\r\n return [\"24_24_16-24_12_49\", \"24_24_18-24_12_45\", \"24_18_22-24_18_24\", \"24_12_45-24_12_47-24_12_49\"];\r\n default:\r\n return []\r\n }\r\n case \"4\":\r\n return [\"18_24_11-18_12_54\", \"18_24_13-18_12_50\", \"18_18_25-18_18_27\", \"18_12_50-18_12_52-18_12_54\"];\r\n case \"5\":\r\n return [\"18_24_12-18_12_55\", \"18_24_14-18_12_51\", \"18_18_26-18_18_28\", \"18_12_51-18_12_53-18_12_55\"];\r\n case \"6\": // left 18\r\n return [\"12_18_29-12_18_32\", \"12_24_35-12_12_62\", \"12_24_38-12_12_56\", \"12_12_56-12_12_59-12_12_62\"];\r\n case \"7\": // center 18\r\n return [\"12_18_30-12_18_33\", \"12_24_36-12_12_63\", \"12_24_39-12_12_57\", \"12_12_57-12_12_60-12_12_63\"];\r\n case \"8\": // right 18\r\n return [\"12_18_31-12_18_34\", \"12_24_37-12_12_64\", \"12_24_40-12_12_58\", \"12_12_58-12_12_61-12_12_64\"];\r\n case \"9\":\r\n switch (direction) {\r\n case MODULE_CONTEXT_MENU_DIRECTIONS.Vertical:\r\n return [\"18_24_11-18_24_12\", \"24_24_15-12_24_37\", \"24_24_16-12_24_35\", \"12_24_35-12_24_36-12_24_37\"];\r\n case MODULE_CONTEXT_MENU_DIRECTIONS.Horizontal:\r\n return [\"36_12_41-36_12_42\"];\r\n default:\r\n return []\r\n }\r\n case \"10\":\r\n switch (direction) {\r\n case MODULE_CONTEXT_MENU_DIRECTIONS.Vertical:\r\n return [\"18_24_13-18_24_14\", \"24_24_17-12_24_40\", \"24_24_18-12_24_38\", \"12_24_38-12_24_39-12_24_40\"];\r\n case MODULE_CONTEXT_MENU_DIRECTIONS.Horizontal:\r\n return [\"36_12_42-36_12_43\"];\r\n default:\r\n return []\r\n }\r\n case \"11\":\r\n return [\"18_12_50-18_12_52\"];\r\n case \"12\":\r\n return [\"18_12_51-18_12_53\"];\r\n case \"13\":\r\n return [\"18_12_52-18_12_54\"];\r\n case \"14\":\r\n return [\"18_12_53-18_12_55\"];\r\n case \"15\":\r\n return [\"12_24_35-12_24_36\", \"24_12_44-24_12_46\"];\r\n case \"16\":\r\n return [\"12_24_36-12_24_37\", \"24_12_45-24_12_47\"];\r\n case \"17\":\r\n return [\"12_24_38-12_24_39\", \"24_12_46-24_12_48\"];\r\n case \"18\":\r\n return [\"12_24_39-12_24_40\", \"24_12_47-24_12_49\"];\r\n case \"19\":\r\n return [\"24_18_21-12_18_31\", \"24_18_22-12_18_29\", \"18_18_25-18_18_26\", \"12_18_29-12_18_30-12_18_31\"];\r\n case \"20\":\r\n return [\"24_18_23-12_18_34\", \"24_18_24-12_18_32\", \"18_18_27-18_18_28\", \"12_18_32-12_18_33-12_18_34\"];\r\n case \"21\":\r\n return [\"12_18_29-12_18_30\"];\r\n case \"22\":\r\n return [\"12_18_30-12_18_31\"];\r\n case \"23\":\r\n return [\"12_18_32-12_18_33\"];\r\n case \"24\":\r\n return [\"12_18_33-12_18_34\"];\r\n case \"35\":\r\n return [\"12_12_56-12_12_59\"];\r\n case \"36\":\r\n return [\"12_12_57-12_12_60\"];\r\n case \"37\":\r\n return [\"12_12_58-12_12_61\"];\r\n case \"38\":\r\n return [\"12_12_59-12_12_62\"];\r\n case \"39\":\r\n return [\"12_12_60-12_12_63\"];\r\n case \"40\":\r\n return [\"12_12_61-12_12_64\"];\r\n case \"41\":\r\n return [\"24_12_44-12_12_58\", \"24_12_45-12_12_56\", \"12_12_56-12_12_57-12_12_58\"];\r\n case \"42\":\r\n return [\"24_12_46-12_12_61\", \"24_12_47-12_12_59\", \"12_12_59-12_12_60-12_12_61\"];\r\n case \"43\":\r\n return [\"24_12_48-12_12_64\", \"24_12_49-12_12_62\", \"12_12_62-12_12_63-12_12_64\"];\r\n case \"44\":\r\n return [\"12_12_56-12_12_57\"];\r\n case \"45\":\r\n return [\"12_12_57-12_12_58\"];\r\n case \"46\":\r\n return [\"12_12_59-12_12_60\"];\r\n case \"47\":\r\n return [\"12_12_60-12_12_61\"];\r\n case \"48\":\r\n return [\"12_12_62-12_12_63\"];\r\n case \"49\":\r\n return [\"12_12_63-12_12_64\"];\r\n case \"50\":\r\n case \"51\":\r\n case \"52\":\r\n case \"53\":\r\n case \"54\":\r\n case \"55\":\r\n case \"56\":\r\n case \"57\":\r\n case \"58\":\r\n case \"59\":\r\n case \"60\":\r\n case \"61\":\r\n case \"62\":\r\n case \"63\":\r\n case \"64\": // no where to split more!\r\n default:\r\n return []\r\n }\r\n};","import {Part} from \"../part\";\r\nimport {PartMenuType} from \"../../../visComponents/constants\";\r\nimport {applianceThumbnail} from \"../assets\";\r\nimport DesignNavigationItem from \"../../../visComponents/designNavigationItem\";\r\nimport {PLACEMENTS} from \"../constants\";\r\n\r\nimport Fridge from \"../subparts/appliances/fridge\";\r\nimport FridgeShadow from \"../subparts/appliances/fridgeShadow\";\r\nimport Hood from \"../subparts/appliances/hood\";\r\nimport Dishwasher from \"../subparts/appliances/dishwasher\";\r\nimport Microwave from \"../subparts/appliances/microwave\";\r\nimport Range from \"../subparts/appliances/range\";\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.fridge = null;\r\n this.fridgeShadow = null;\r\n this.hood = null;\r\n this.microwave = null;\r\n this.range = null;\r\n this.dishwasher = 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 \"Fridge\":\r\n relatedItemName = \"fridge\";\r\n RelatedItemClass = Fridge;\r\n break;\r\n case \"Fridge Shadow\":\r\n relatedItemName = \"fridgeShadow\";\r\n RelatedItemClass = FridgeShadow;\r\n break;\r\n case \"Hood\":\r\n relatedItemName = \"hood\";\r\n RelatedItemClass = Hood;\r\n break;\r\n case \"Dishwasher\":\r\n relatedItemName = \"dishwasher\";\r\n RelatedItemClass = Dishwasher;\r\n break;\r\n case \"Microwave\":\r\n relatedItemName = \"microwave\";\r\n RelatedItemClass = Microwave;\r\n break;\r\n case \"Range\":\r\n // we still need to keep NotInVisualizer Ranges here\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 = \"range\";\r\n RelatedItemClass = Range;\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('Appliance', 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 {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 Countertop from \"../subparts/centerIsland/countertop\";\r\nimport Chairs from \"../subparts/centerIsland/chairs\";\r\nimport Faucet from \"../subparts/centerIsland/faucet\";\r\nimport Sink from \"../subparts/centerIsland/sink\";\r\nimport Handle from \"../subparts/centerIsland/handle\";\r\nimport CenterIslandShadow from \"../subparts/centerIsland/centerIslandshadow\";\r\nimport Stovetop from \"../subparts/centerIsland/stovetop\";\r\nimport Range from \"../subparts/centerIsland/range\";\r\nimport Edge from \"../subparts/centerIsland/edge\";\r\nimport ChairsShadow from \"../subparts/centerIsland/chairsShadow\";\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.chairs = null;\r\n this.edge = null;\r\n this.faucet = null;\r\n this.sink = null;\r\n this.range = null;\r\n this.centerIslandshadow = 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 \"Center Island\":\r\n relatedItemName = \"cabinet\";\r\n RelatedItemClass = Cabinet;\r\n break;\r\n case \"Center Island Countertop\":\r\n relatedItemName = \"countertop\";\r\n RelatedItemClass = Countertop;\r\n break;\r\n case \"Center Island Handle\":\r\n relatedItemName = \"handle\";\r\n RelatedItemClass = Handle;\r\n break;\r\n case \"Chair Shadow\":\r\n relatedItemName = \"chairsShadow\";\r\n RelatedItemClass = ChairsShadow;\r\n break;\r\n case \"Chair\":\r\n relatedItemName = \"chairs\";\r\n RelatedItemClass = Chairs;\r\n break;\r\n case \"Center Island Shadow\":\r\n relatedItemName = \"centerIslandshadow\";\r\n RelatedItemClass = CenterIslandShadow;\r\n break;\r\n case \"Faucet\":\r\n if ((dbFeature.metaData[\"Placement\"] && dbFeature.metaData[\"Placement\"].includes(PLACEMENTS.Island)) || !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.Island)) || !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.Island)) || !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 case \"Range\":\r\n if ((dbFeature.metaData[\"Placement\"] && dbFeature.metaData[\"Placement\"].includes(PLACEMENTS.Island)) || !dbFeature.metaData[\"Placement\"]) {\r\n if (!dbFeature.metaData[\"Placement\"]) {\r\n shouldLoadInDifferentGroups = true;\r\n }\r\n relatedItemName = \"range\";\r\n RelatedItemClass = Range;\r\n }\r\n break;\r\n case \"Edge Profile\":\r\n shouldLoadInDifferentGroups = true;\r\n relatedItemName = \"edge\";\r\n RelatedItemClass = Edge;\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('Center Island', 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 === \"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}\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
\r\n \r\n {thumbnailUrl ? :
\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 } = 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 {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 blockClassName: PropTypes.string,\r\n};\r\n\r\nexport default injectIntl(LookInput)\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","/**\r\n * @param forFeature {featureInterface}\r\n * @param toolSettings {array}\r\n * @returns {{postDiffData, featuresToUpdate}}\r\n */\r\nexport const getEditFeaturesRequestData = (forFeature, toolSettings) => {\r\n let postDiffData = null, featuresToUpdate = [];\r\n const toolSettingsDiff = getDifferentToolSettings(toolSettings, forFeature.dbFeature.updatedToolSettings || forFeature.dbFeature.toolSettings)\r\n if (!toolSettingsDiff.length) {\r\n return {postDiffData, featuresToUpdate} // we didn't change anything, no need to post\r\n }\r\n featuresToUpdate = getSameNameFeatures(forFeature);\r\n postDiffData = {\r\n \"edit\": toolSettingsDiff.map(toolSetting => {\r\n return {\r\n \"FabricatorFeatureIds\": featuresToUpdate.map(f => f.dbFeature.id),\r\n \"EnableVisualizer\": toolSetting[\"enableVisualizer\"],\r\n \"EnableQuotingTool\": toolSetting[\"enableQuotingTool\"],\r\n \"Tool\": toolSetting.tool,\r\n }\r\n })\r\n }\r\n return {postDiffData, featuresToUpdate}\r\n}\r\n\r\n/**\r\n * @param forFeature {featureInterface}\r\n * @returns featureInterface[]\r\n */\r\nconst getSameNameFeatures = (forFeature) => {\r\n const featureGroup = forFeature.getParent();\r\n let features = [forFeature];\r\n const nameToCompare = forFeature.getMatchingFeatureName();\r\n Object.keys(featureGroup.featuresList).forEach(layoutType => {\r\n [...featureGroup.featuresList[layoutType], ...featureGroup.featuresPartsList[layoutType]].forEach(feature => {\r\n if (nameToCompare === feature.getMatchingFeatureName() && !features.some(f => {\r\n return f.dbFeature.id === feature.dbFeature.id\r\n })) {\r\n features.push(feature);\r\n }\r\n })\r\n });\r\n return features\r\n}\r\n\r\n/**\r\n * @param newToolSettings {array}\r\n * @param oldToolSettings {array}\r\n * @returns array\r\n */\r\nexport const getDifferentToolSettings = (newToolSettings, oldToolSettings) => {\r\n return newToolSettings.filter(toolSetting => {\r\n const existingObject = oldToolSettings.find(set => set.tool === toolSetting.tool)\r\n if (!existingObject) {\r\n return true\r\n }\r\n return (existingObject[\"enableVisualizer\"] !== toolSetting[\"enableVisualizer\"])\r\n || (existingObject[\"enableQuotingTool\"] !== toolSetting[\"enableQuotingTool\"])\r\n })\r\n}\r\n","import React from 'react';\r\nimport {connect} from \"react-redux\";\r\nimport {SIDEBAR_LAYOUTS_BUTTONS} from \"../../../../../constants\";\r\nimport Square from \"../../../../canvas/core/shapes/layouts/square\";\r\nimport WideAngle from \"../../../../canvas/core/shapes/layouts/wideAngle\";\r\nimport Horseshoe from \"../../../../canvas/core/shapes/layouts/horseshoe\";\r\nimport Rectangle from \"../../../../canvas/core/shapes/layouts/rectangle\";\r\nimport RectangleIsland from \"../../../../canvas/core/shapes/layouts/rectangleIsland\";\r\nimport WideAngleReverted from \"../../../../canvas/core/shapes/layouts/wideAngleReverted\";\r\nimport workspace from \"../../../../canvas/core/workspace\";\r\nimport eventManager from \"../../../../canvas/store/sqftEventManager\";\r\nimport config from \"../../../../canvas/store/sqftConfig\";\r\nimport {toggleChangeLayoutPopup, updateSQFTCalculations} from \"../../../../../../../actions/sqftFunctions\";\r\nimport store from \"../../../../../../../store\";\r\nimport {setSQFTRoomLayouts} from \"../../../../../../../actions/sqftMenuFunctions\";\r\nimport {getCountertopPartNames} from \"../../../../../helpers/shapeHelper\";\r\n\r\nexport const setNewLayout = (layoutName) => {\r\n workspace.removeAllShapes();\r\n eventManager.stealCursor(true);\r\n window.setNextLayout = layoutName;\r\n const [countertopPartName, centerIslandPartName] = getCountertopPartNames();\r\n\r\n switch (layoutName) {\r\n case \"S\":\r\n case \"SP\":\r\n workspace.addShape(new Rectangle(), 'square', null, countertopPartName, layoutName);\r\n break;\r\n case \"SI\":\r\n case \"SPI\":\r\n workspace.addShape(new RectangleIsland(config.shapeSize), 'square', null, countertopPartName, layoutName);\r\n break;\r\n case \"SN\":\r\n case \"SNI\":\r\n case \"SPN\":\r\n case \"SPNI\":\r\n workspace.addShape(new WideAngleReverted(config.shapeSize), 'wideangle', null, countertopPartName, layoutName);\r\n break;\r\n case \"L\":\r\n case \"LI\":\r\n workspace.addShape(new WideAngle(config.shapeSize), 'wideangle', null, countertopPartName, layoutName);\r\n break;\r\n case \"LN\":\r\n case \"LNI\":\r\n workspace.addShape(new Horseshoe(config.shapeSize), 'horseshoe', null, countertopPartName, layoutName);\r\n break;\r\n default:\r\n break;\r\n }\r\n if (layoutName.includes(\"I\")) {\r\n workspace.addShape(new Square(config.shapeSize, true), 'square', null, centerIslandPartName, layoutName);\r\n }\r\n\r\n // todo sqft-react remove?\r\n // nodes.layoutButtons.forEach(function (layoutButton) {\r\n // layoutButton.classList.remove(\"shapes-icon--active\");\r\n // });\r\n // document.querySelector(\"[data-layout='\"+layoutName+\"']\").classList.add(\"shapes-icon--active\");\r\n\r\n if (window.innerHeight < 480 && window.innerWidth < 991) {\r\n // todo sqft-react\r\n //Menu.hideSidebarSide();\r\n //Menu.hideSideBarContent();\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\nexport const setRoomLayouts = (itemName) => {\r\n const state = store.getState();\r\n const roomLayouts = state.sqftMenuState.roomLayouts;\r\n const activeRoomIndex = state.sqftMenuState.activeRoomIndex;\r\n const updatedRoomLayouts = [...roomLayouts];\r\n const roomLayoutIndex = updatedRoomLayouts.findIndex(roomLayout => roomLayout.roomIndex === activeRoomIndex);\r\n if (roomLayoutIndex >= 0) {\r\n updatedRoomLayouts[roomLayoutIndex].layoutName = itemName;\r\n setSQFTRoomLayouts(updatedRoomLayouts);\r\n } else {\r\n setSQFTRoomLayouts([...roomLayouts, {roomIndex: activeRoomIndex, layoutName: itemName}]);\r\n }\r\n}\r\n\r\nconst SqftNavLayouts = (props) => {\r\n // other popups, modals and so on\r\n const {menuOpened, activeButton, roomLayouts, activeRoomIndex, setSQFTRoomLayouts} = props;\r\n const expanded = activeButton && menuOpened === \"layouts\";\r\n // const buttonRefs = useRef({});\r\n\r\n const handleButtonClick = async (event, itemName) => {\r\n console.log(\"itemName\", itemName);\r\n event.preventDefault();\r\n event.stopPropagation();\r\n const shapesLength = workspace.getShapes().length;\r\n const isRoomHasLayout = roomLayouts.some(roomLayout => roomLayout.roomIndex === activeRoomIndex);\r\n\r\n if (isRoomHasLayout || shapesLength) {\r\n callChangeLayoutDataPopup(itemName, true);\r\n setRoomLayouts(itemName);\r\n } else {\r\n setNewLayout(itemName);\r\n setSQFTRoomLayouts([...roomLayouts, {roomIndex: activeRoomIndex, layoutName: itemName}]);\r\n }\r\n };\r\n\r\n //todo\r\n const callChangeLayoutDataPopup = (layoutName, applyLayoutOnSqft = false) => {\r\n props.toggleChangeLayoutPopup(true, layoutName, applyLayoutOnSqft);\r\n // window.parent.postMessage({\r\n // action: SQFT_POST_MESSAGE_ACTIONS.callChangeLayoutDataPopup,\r\n // payload: {\r\n // layoutName,\r\n // applyLayoutOnSqft\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\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 Misc from \"../../../config\";\r\nimport {isTouchDevice} from \"../../../misc/utils\";\r\n\r\nexport function exportSceneToGLB (scene, shouldReturnURL) {\r\n const exporter = new window.GLTFExporter();\r\n\r\n return new Promise((resolve, reject) => {\r\n exporter.parse(\r\n scene,(result) => {\r\n //const blob = new Blob([result], { type: 'model/gltf-binary' });\r\n const blob = new Blob([JSON.stringify(result)], {type: 'text/plain'});\r\n resolve(shouldReturnURL ? URL.createObjectURL(blob) : blob);\r\n },\r\n (error) => reject(error)\r\n );\r\n });\r\n}\r\n\r\nexport async function exportSceneToUSDZ(scene, shouldReturnURL) {\r\n const exporter = new window.USDZExporter();\r\n\r\n try {\r\n const arraybuffer = await exporter.parseAsync(scene);\r\n const blob = new Blob( [ arraybuffer ], { type: 'application/octet-stream' } );\r\n\r\n return shouldReturnURL ? URL.createObjectURL(blob) : blob;\r\n } catch (error) {\r\n console.error('Error exporting scene to USDZ:', error);\r\n }\r\n}\r\n\r\nexport async function handleDownloadUSDZ (scene) {\r\n if (!scene) {\r\n console.error('Scene is not available for export.');\r\n return;\r\n }\r\n\r\n try {\r\n const usdzUrl = await exportSceneToUSDZ(scene);\r\n\r\n // open Quick Look\r\n const link = Object.assign(document.createElement('a'), {\r\n download: 'asset.usdz',\r\n rel: \"ar\",\r\n href: usdzUrl,\r\n textContent: \"View in AR\"\r\n });\r\n\r\n document.body.appendChild(link);\r\n link.click();\r\n document.body.removeChild(link);\r\n } catch (error) {\r\n console.error('Failed to export scene to USDZ:', error);\r\n }\r\n}\r\n\r\nexport function blobToBase64 (blob) {\r\n return new Promise((resolve, reject) => {\r\n const reader = new FileReader();\r\n reader.onloadend = () => resolve(reader.result.split(',')[1]); // Убираем часть \"data:...\"\r\n reader.onerror = (error) => reject(error);\r\n reader.readAsDataURL(blob);\r\n });\r\n}\r\n\r\nexport function compressMeshForMobileDevices(mesh) {\r\n if (mesh) {\r\n let originalMaterial = mesh.material;\r\n\r\n const isMobile = Misc.isMobile() || isTouchDevice();\r\n\r\n if (isMobile) {\r\n // Resize all texture maps\r\n [\"map\", \"metalnessMap\", \"normalMap\", \"aoMap\", \"roughnessMap\", \"displacementMap\"].forEach((map) => {\r\n if (originalMaterial[map]) {\r\n resizeExistingTexture(originalMaterial[map], 512); //Texture max sizw\r\n //originalMaterial[map] = this.compressTexture(originalMaterial[map]);\r\n }\r\n });\r\n\r\n //Optimize filtering for performance\r\n if (originalMaterial.map) {\r\n originalMaterial.map.anisotropy = 1;\r\n originalMaterial.map.generateMipmaps = false;\r\n originalMaterial.map.minFilter = window.THREE.LinearFilter;\r\n originalMaterial.map.magFilter = window.THREE.LinearFilter;\r\n }\r\n\r\n originalMaterial.needsUpdate = true;\r\n }\r\n }\r\n}\r\n\r\nexport async function resizeExistingTexture(texture, maxSize = 512) {\r\n const image = texture.image;\r\n const canvas = document.createElement('canvas');\r\n const ctx = canvas.getContext('2d');\r\n\r\n // Calculate new size while maintaining aspect ratio\r\n let width = image.width;\r\n let height = image.height;\r\n if (width > maxSize || height > maxSize) {\r\n if (width > height) {\r\n height *= maxSize / width;\r\n width = maxSize;\r\n } else {\r\n width *= maxSize / height;\r\n height = maxSize;\r\n }\r\n }\r\n\r\n // Resize the texture using Canvas\r\n canvas.width = Math.round(width);\r\n canvas.height = Math.round(height);\r\n ctx.drawImage(image, 0, 0, canvas.width, canvas.height);\r\n\r\n // Create an ImageBitmap to ensure WebGL compatibility\r\n const imageBitmap = await createImageBitmap(canvas);\r\n\r\n // Replace the original image in the texture\r\n texture.image = imageBitmap;\r\n texture.needsUpdate = true;\r\n}\r\n\r\nexport function compressTexture(texture, quality = 0.9) {\r\n const canvas = document.createElement('canvas');\r\n const ctx = canvas.getContext('2d');\r\n const image = texture.image;\r\n\r\n canvas.width = image.width;\r\n canvas.height = image.height;\r\n ctx.drawImage(image, 0, 0, image.width, image.height);\r\n\r\n const webpDataUrl = canvas.toDataURL('image/webp', quality);\r\n\r\n const compressedTexture = new THREE.TextureLoader().load(webpDataUrl);\r\n compressedTexture.needsUpdate = true;\r\n\r\n return compressedTexture;\r\n}\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 {expanded ?\r\n SIDEBAR_LAYOUTS_BUTTONS.map((item, index) => (\r\n
\r\n \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 { useState, useEffect, useMemo } from 'react';\r\nimport { checkIfLookFeaturesReceived } from \"../../../api/look-api\";\r\nimport { getCurrentLayout } from \"../../appLayout\";\r\n\r\nconst useFetchFeatures = (partIds,\r\n searchText = \"\",\r\n shouldGetModelsOnlyWithThirdPartyAR3DUrls = false,\r\n selectedFilters\r\n) => {\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 selectedFilters,\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, selectedFilters]);\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 {\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","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 \r\n \r\n \r\n \r\n \r\n {getCartItemName(cartItem.cartFeature, fabricatorData, messages, locale)}\r\n \r\n {cartItem.cartFeature.dbFeature.sku && !fabricatorSettings.hideSku ? (\r\n \r\n {`${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, messages, 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, messages, locale)}\r\n \r\n \r\n {cartItem.cartFeature.dbFeature.sku && !fabricatorSettings.hideSku ? (\r\n \r\n {`${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, messages, 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","// 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 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 // {disclaimerMessage} \r\n // \r\n // )\r\n // }\r\n\r\n return (\r\n \r\n \r\n {disclaimerMessage}\r\n \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 {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\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) => {\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 = \"leadform\";\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","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","\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 {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","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 {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, {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\nimport {getAvailableFilters} from \"../../../../misc/filtersFunctions\";\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 \r\n )\r\n }\r\n\r\n renderFiltersBody = () => {\r\n const activePart = this.props.childItem.part;\r\n const allReceived = activePart.getRealFeaturesReceivedProperty()\r\n const allFilterGroups = allReceived\r\n ? getAvailableFilters(activePart, activePart.partId, this.props.allFilterGroups, this.getCurrentNavItems(), true)\r\n : this.props.allFilterGroups;\r\n switch (this.props.filterVisible) {\r\n case \"Others\": {\r\n const otherFilterGroups = 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: allReceived ? fg.values : 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 = 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 = 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 = 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 getCurrentNavItems = () => {\r\n if (!this.props.childItem) {\r\n return [];\r\n }\r\n const whichFeatures = !this.props.bvOpened; // if bvOpened - false - vis only\r\n const layout = this.props.childItem.part.getParent().layout;\r\n return layout.designNavigationItems(this.props.childItem, [], \"\", null, whichFeatures, this.props.allFilterGroups);\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 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 } 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 \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 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 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\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 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 const featureIsLocked = useMemo(() => {\r\n if (wizardGroup.skipLockDontApply) {\r\n return false\r\n }\r\n return getFeatureIsLocked(lookFeature)\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [lookFeature, wizardGroup, 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 if (wizardGroup && wizardGroup.skipLockDontApply) {\r\n return false\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 )}\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","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 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","'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 {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\nexport const registerFonts = () => {\r\n const {Font} = window.ReactPdfRenderer;\r\n try {\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\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) => window.ReactPdfRenderer.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 red: {\r\n color: COLORS.red,\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 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","import React, {Fragment} from \"react\";\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 {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, messages} = props;\r\n\r\n const {View, Text, Image} = window.ReactPdfRenderer;\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\r\n const getFeatureQuantity = () => {\r\n return 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, 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 {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 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 clone from 'lodash/clone';\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","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 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 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\nimport sqftShape from \"../sqftShape\";\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 // fix shape if position is in the top left corner\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 instanceof sqftShape ? this.__shape.getWidth() : this.__shape.getHeight();\r\n const originalHeight = this.__shape instanceof sqftShape ? this.__shape.getHeight() : this.__shape.getWidth();\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","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 title;\r\n shouldHideCloseButton;\r\n\r\n constructor(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 title = \"\",\r\n shouldHideCloseButton = false\r\n ) {\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 this.title = title;\r\n this.shouldHideCloseButton = shouldHideCloseButton;\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 export() {\r\n return {\r\n \"addedPoints\": this.state.addedPoints.map(point => point.exportData ? point.exportData() : null),\r\n \"centerPoint\": this.state.centerPoint,\r\n \"lockedAngleStep\": this.state.lockedAngleStep,\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 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 CABINET_FILTER_NAMES,\r\n RENDER_TEMPLATES,\r\n SIDEBAR_BUTTONS_MENU, SIDEBAR_NAVIGATION_BUTTONS,\r\n SIDEBAR_NAVIGATION_CABINET_BUTTONS, SQFT_FEATURES\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\nimport {getQtCatName} from \"../../../../../helpers/sqftQuotesHelper\";\r\nimport * as uuid from \"uuid\";\r\nimport workspaceControllers from \"../../../store/workspaceControllers\";\r\nimport {getCurrentLayout} from \"../../../../../../appLayout\";\r\nimport {HingesModel} from \"../../../store/models/HingesModel\";\r\nimport {getHandleFeatureGroupFromShape} from \"../../../../../helpers/sqftHelperUi\";\r\n\r\nclass ShapeCabinet {\r\n __shape;\r\n __crownMoldingFeatureId = null;\r\n //__attachedFeatures = new Map();\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 // if (data.attachedFeatures) {\r\n // const parsedFeatures = JSON.parse(data.attachedFeatures);\r\n // this.__attachedFeatures = new Map(Object.entries(parsedFeatures));\r\n // }\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 //attachedFeatures: JSON.stringify(Object.fromEntries(this.__attachedFeatures)),\r\n }\r\n }\r\n\r\n /**\r\n * create hinges and handles\r\n */\r\n generateAttachedFeatures = () => {\r\n const { filterGroups } = store.getState().filterState;\r\n const feature = this.__shape.getFeature();\r\n if (feature) {\r\n for (const filterName of Object.keys(CABINET_FILTER_NAMES)) {\r\n const filterKey = CABINET_FILTER_NAMES[filterName];\r\n let quantity = 0;\r\n if (feature) {\r\n quantity = +feature.getFeatureSavedFilterName(filterGroups, filterKey, filterKey);\r\n }\r\n if (quantity) {\r\n //let features = [];\r\n if (CABINET_FILTER_NAMES[filterName] === CABINET_FILTER_NAMES.hinges) {\r\n const layout = getCurrentLayout();\r\n const hingesFeatureGroup = layout.getFeatureGroupByPartId(SQFT_FEATURES.hinge);\r\n if (hingesFeatureGroup) {\r\n const handlesFeature = hingesFeatureGroup.activeFeature ? hingesFeatureGroup.activeFeature : hingesFeatureGroup.features[0]\r\n workspaceControllers.hinge.addResource(new HingesModel(\r\n this.__shape.id,\r\n handlesFeature.dbFeature.id,\r\n getQtCatName(),\r\n uuid.v4(),\r\n hingesFeatureGroup.partId,\r\n quantity)\r\n );\r\n }\r\n }\r\n\r\n //this.__attachedFeatures.set(filterName, {features, quantity})\r\n }\r\n\r\n if (CABINET_FILTER_NAMES[filterName] === CABINET_FILTER_NAMES.knobs) {\r\n const handlesFeatureGroup = getHandleFeatureGroupFromShape(this.__shape);\r\n if (handlesFeatureGroup) {\r\n const reduxState = store.getState();\r\n const selectedHandle = reduxState.sqftResourceState.selectedHandle;\r\n let handlesFeature;\r\n if (selectedHandle) {\r\n handlesFeature = handlesFeatureGroup.features.find(feature => {\r\n return feature.getFeatureName() === selectedHandle.getFeatureName()\r\n })\r\n } else {\r\n handlesFeature = handlesFeatureGroup.features.find(feature => {\r\n return feature.dbFeature\r\n && Array.isArray(feature.dbFeature.thirdPartyAR3DUrls)\r\n && feature.dbFeature.thirdPartyAR3DUrls.length > 0\r\n })\r\n }\r\n\r\n if (handlesFeature) {\r\n workspaceControllers.handles.addHandleToTheShape(this.__shape, handlesFeature);\r\n }\r\n\r\n }\r\n // const newObject = {\r\n // id: uuidv4(),\r\n // createdAt: new Date(),\r\n // };\r\n // features.push(newObject);\r\n }\r\n }\r\n }\r\n }\r\n\r\n deleteAttachedFeatures = () => {\r\n workspaceControllers.hinge.deleteAllResourcesForTheShape(this.__shape.id);\r\n workspaceControllers.handles.deleteAllResourcesForTheShape(this.__shape.id);\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 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 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 // console.log(\"loadRelatedFeatures!!\", dbFeature);\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 Object.keys(layout.allDbFeatures).forEach(groupName => {\r\n for (let i = 0; i < layout.allDbFeatures[groupName].length; i++) {\r\n if (layout.allDbFeatures[groupName][i].id === relFeatureId) {\r\n loadedDbFeature = layout.allDbFeatures[groupName][i];\r\n break;\r\n }\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 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 getPosition() {\r\n return this._posOnField\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","/**\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 {ShapeFreeForm} from \"../core/tools/freeeDraw/ShapeFreeForm\";\r\n\r\nconst toolsControllers = {\r\n shapeFreeForm: new ShapeFreeForm()\r\n};\r\n\r\nexport default toolsControllers\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 wizardAllowSkipDoneSteps: true,\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 case types.SET_WIZARD_ALLOW_SKIP_DONE_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 wizardAllowSkipDoneSteps: action.payload.wizardActiveStep < state.wizardActiveStep\r\n ? false\r\n : state.wizardAllowSkipDoneSteps,\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\":\r\n case \"Polished Edge\":\r\n case \"Top and bottom round\":\r\n case \"Top and Bottom Round\":\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 from \"react\";\r\nimport PropTypes from \"prop-types\";\r\n\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, messages, showPrice} = props;\r\n const fabricatorSettings = fabricatorData.settings;\r\n\r\n const {View, Text, Image} = window.ReactPdfRenderer;\r\n\r\n if (!fabricatorSettings.depositDisclaimer || !fabricatorSettings.enableDisclaimer) {\r\n return null\r\n }\r\n\r\n const hugeDisclaimer = fabricatorSettings.depositDisclaimer.length >= 1500;\r\n\r\n const hideDisclaimer = (withTotal && hugeDisclaimer) // we will display it below total, full width\r\n || (showPrice && !withTotal && !hugeDisclaimer) // it should be in left, or full\r\n\r\n if (hideDisclaimer) {\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\" && messages[\"transDoc.description_FR._disclaimer\"]) {\r\n return messages[\"transDoc.description_FR._disclaimer\"]\r\n } else if (locale === \"pl-PL\" && messages[\"transDoc.customTranslateDescription_PL._disclaimer\"]) {\r\n return messages[\"transDoc.customTranslateDescription_PL._disclaimer\"]\r\n } else if (messages[\"transDoc.customDisplayName_FR._disclaimer\"]) { // it is actually EN ! hardcoded for lowes profiles\r\n return 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 // \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 {sortedItems.map(i => {\r\n return (\r\n
- \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 const {bvOpened} = store.bathroomVisualizerState;\r\n\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 bvOpened,\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, {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 {this.checkFilterGroupForAvailableFilterValues(colorFilterGroup).map(f => (\r\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 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 \r\n \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 {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 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 {(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\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 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 {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 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 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 {(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
\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 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.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.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 {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.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","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 \"../../misc/storageFunctions\";\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.state.contextMenuButtons.map((menuItem) => {\r\n return menuItem ? (\r\n \r\n ) : null\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 {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, {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.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 \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 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 \r\n \r\n
\r\n \r\n )}\r\n \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 {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 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 {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\nconst mapStateToProps = () => {\r\n return {};\r\n};\r\n\r\nconst mapDispatchToProps = {};\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(ContextMenuSimple)\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 {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","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 {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 {({ 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, {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
\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 ? {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 {(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 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
\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 SqftStore from \"../../../canvas/store/sqftStore\";\r\n\r\nconst ExportButton = () => {\r\n const exportScene = () => {\r\n const exporter = new window.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, setLookOpened, 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 {}\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 {HDR_MAP_LOADER, loadHDRMap} from \"./scene/HDRMapLoader\";\r\nimport SceneModelsLoader from \"./scene/SceneModelsLoader\";\r\nimport store from \"../../../../../../store\";\r\nimport {setMultiLoader} from \"../../../../../../actions/actionFunctions\";\r\nimport Misc from \"../../../../../../config\";\r\nimport {isTouchDevice} from \"../../../../../../misc/utils\";\r\n\r\nclass SeparateModelGLBViewer {\r\n spinner = null;\r\n animationFrameId = null;\r\n lightIntensity = null;\r\n modelScale = 39.37;\r\n envMap = null;\r\n gltf = null;\r\n isMobile = false;\r\n modelLoader = null;\r\n modelsCenter = null;\r\n modelsSize = null;\r\n modelsLoaded = false;\r\n\r\n constructor(canvas, glbUrl, lightIntensity, isMobile) {\r\n this.canvas = canvas;\r\n this.glbUrl = glbUrl;\r\n this.lightIntensity = lightIntensity;\r\n this.isMobile = isMobile;\r\n\r\n // this.initSpinner();\r\n this.initScene();\r\n this.modelsLoader = new SceneModelsLoader(this, this.scene, this.modelScale);\r\n }\r\n\r\n initScene() {\r\n const isMobile = Misc.isMobile() || isTouchDevice();\r\n\r\n this.scene = new window.THREE.Scene();\r\n //this.scene.background = new window.THREE.Color(0xf0f0f0);\r\n //this.scene.background = new window.THREE.Color(0xbcc4ce);\r\n this.scene.background = new window.THREE.Color(0xcccccc);\r\n\r\n this.camera = new window.THREE.PerspectiveCamera(\r\n 45,\r\n this.canvas.clientWidth / this.canvas.clientHeight,\r\n 0.1,\r\n 1000\r\n );\r\n this.camera.position.set(0, 0, 5);\r\n\r\n this.renderer = new window.THREE.WebGLRenderer({\r\n canvas: this.canvas,\r\n antialias: true,\r\n //antialias: !isMobile,\r\n preserveDrawingBuffer: true,\r\n powerPreference: isMobile ? \"low-power\" : \"high-performance\",\r\n });\r\n\r\n this.renderer.setSize(this.canvas.clientWidth, this.canvas.clientHeight);\r\n this.renderer.setPixelRatio(isMobile ? 1 : window.devicePixelRatio);\r\n this.renderer.outputColorSpace = window.THREE.SRGBColorSpace;\r\n this.renderer.useLegacyLights = false;\r\n this.renderer.toneMapping = window.THREE.ACESFilmicToneMapping;\r\n this.renderer.toneMappingExposure = 1;\r\n this.renderer.shadowMap.enabled = true;\r\n this.renderer.shadowMap.autoUpdate = true;\r\n this.renderer.shadowMap.type = window.THREE.VSMShadowMap;\r\n this.renderer.gammaOutput = true;\r\n this.renderer.gammaFactor = 2.2;\r\n\r\n this.controls = new window.OrbitControls(this.camera, this.renderer.domElement);\r\n this.controls.target.set(0, 0, 0);\r\n this.controls.update();\r\n this.controls.enableDamping = true;\r\n this.controls.dampingFactor = 0.1;\r\n this.controls.screenSpacePanning = true;\r\n this.controls.minDistance = 0.1;\r\n this.controls.maxDistance = 100;\r\n this.renderer.xr.enabled = true;\r\n\r\n const isIosDevice = navigator && (/iPad|iPhone/.test(navigator.userAgent));\r\n if (isMobile || isIosDevice) {\r\n // this.renderer.antialias = false;\r\n this.renderer.setPixelRatio(1);\r\n //this.renderer.setPixelRatio(0.5);\r\n this.renderer.powerPreference = \"low-power\";\r\n this.renderer.precision = \"lowp\";\r\n this.renderer.shadowMap.enabled = false;\r\n this.renderer.preserveDrawingBuffer = false;\r\n this.renderer.toneMapping = window.THREE.NoToneMapping;\r\n } else {\r\n loadHDRMap(this.scene, this.renderer, HDR_MAP_LOADER.pmremGeneratorEXR);\r\n }\r\n\r\n //const hdrBackgroundPath = \"/images/sqft-icons/3d/comfy_cafe_1k.hdr\"\r\n //this.loadHDRAsBackground(hdrBackgroundPath);\r\n }\r\n\r\n setModelsCenter = (modelsCenter) => {\r\n this.modelsCenter = modelsCenter\r\n }\r\n\r\n closeMultiLoader() {\r\n store.dispatch(setMultiLoader({ activeStep: 8 }));\r\n setTimeout(() => {\r\n store.dispatch(setMultiLoader({ visible: false }));\r\n }, 500);\r\n }\r\n\r\n calculateAndSetCameraPosition(center, size) {\r\n this.controls.reset();\r\n this.controls.target.copy(center);\r\n this.controls.maxDistance = size * 10;\r\n\r\n this.camera.position.copy(center.clone().add(new window.THREE.Vector3(size, size / 5, size * 2)));\r\n this.camera.near = size / 100;\r\n this.camera.far = size * 100;\r\n this.camera.lookAt(center);\r\n this.camera.updateProjectionMatrix();\r\n\r\n // if (this.controls) {\r\n // this.controls.reset();\r\n // this.controls.maxDistance = size * 10;\r\n // }\r\n //\r\n // if (this.camera) {\r\n // this.camera.position.copy(center);\r\n // this.camera.position.x += size; // far distance\r\n // this.camera.position.y += size / 5.0;\r\n // //this.camera.position.z += size;\r\n // this.camera.position.z *= -1; // rotate distance\r\n //\r\n // this.camera.near = size / 100;\r\n // this.camera.far = size * 100;\r\n // this.camera.updateProjectionMatrix();\r\n // }\r\n }\r\n\r\n addLight(boxCenter) {\r\n //console.log(\"boxCenter\", boxCenter);\r\n //const maxSize = Math.max(boxSize.x, boxSize.y, boxSize.z);\r\n const lightOffset = 4.5;\r\n const baseHeight = 2.5;\r\n\r\n const dynamicIntensity = this.lightIntensity ;\r\n\r\n //console.log(`maxSize: ${maxSize}, lightOffset: ${lightOffset}, baseHeight: ${baseHeight}`);\r\n console.log(`this.lightIntensity: ${this.lightIntensity }`);\r\n console.log(`dynamicIntensity: ${dynamicIntensity}`);\r\n\r\n const lightPositions = [\r\n // Central light\r\n { x: 0, y: baseHeight / 2, z: 5 },\r\n { x: 0, y: baseHeight * 2, z: 5 },\r\n\r\n // Upper corner Light\r\n { x: lightOffset, y: baseHeight, z: lightOffset },\r\n { x: -lightOffset, y: baseHeight, z: lightOffset },\r\n { x: lightOffset, y: baseHeight, z: -lightOffset },\r\n { x: -lightOffset, y: baseHeight, z: -lightOffset },\r\n\r\n // Bottom light\r\n { x: lightOffset, y: -baseHeight, z: lightOffset },\r\n { x: -lightOffset, y: -baseHeight, z: lightOffset },\r\n { x: lightOffset, y: -baseHeight, z: -lightOffset },\r\n { x: -lightOffset, y: -baseHeight, z: -lightOffset }\r\n ];\r\n\r\n\r\n lightPositions.forEach(pos => {\r\n let light = new window.THREE.PointLight(0xffffff, dynamicIntensity, 0, 2);\r\n light.position.set(boxCenter.x + pos.x, boxCenter.y + pos.y, boxCenter.z + pos.z);\r\n light.castShadow = true;\r\n this.scene.add(light);\r\n //console.log(`Light position: x: ${pos.x}, y: ${pos.y}, z: ${pos.z}, Intensity: ${dynamicIntensity}`);\r\n });\r\n\r\n // Добавление окружающего света для общего освещения\r\n const ambientLight = new window.THREE.AmbientLight(0xffffff, 0.1);\r\n this.scene.add(ambientLight);\r\n\r\n const directionalLight = new window.THREE.DirectionalLight(0xffffff, 0.8);\r\n directionalLight.position.set(boxCenter.x, boxCenter.y, boxCenter.z + 10);\r\n directionalLight.castShadow = true;\r\n this.scene.add(directionalLight);\r\n }\r\n\r\n addLightV9(boxCenter) {\r\n this.renderer.toneMappingExposure = 0.1;\r\n this.lightIntensity = 800;\r\n this.addLight(boxCenter);\r\n }\r\n\r\n addLightV10(boxCenter) {\r\n this.renderer.toneMappingExposure = 1;\r\n this.lightIntensity = 20;\r\n\r\n this.addLight(boxCenter);\r\n }\r\n\r\n updateSceneLighting(type) {\r\n // Delete current lights\r\n this.scene.children = this.scene.children.filter(child => !(child instanceof window.THREE.Light));\r\n\r\n // Create and add new light\r\n switch (type) {\r\n case 'addLightV9':\r\n this.addLightV9(this.modelsCenter);\r\n break;\r\n case 'addLightV10':\r\n this.addLightV10(this.modelsCenter);\r\n break;\r\n default:\r\n console.warn(`Unknown lighting type: ${type}`);\r\n break;\r\n }\r\n }\r\n\r\n updateLightIntensity(intensity) {\r\n this.lightIntensity = intensity\r\n this.scene.children.forEach(child => {\r\n if (child instanceof window.THREE.PointLight) {\r\n //console.log(\"child.intensity\", child.intensity);\r\n child.intensity = intensity;\r\n }\r\n });\r\n }\r\n\r\n startAnimation() {\r\n const animate = () => {\r\n this.animationFrameId = requestAnimationFrame(animate);\r\n if (this.controls) {\r\n this.controls.update();\r\n }\r\n if (this.renderer) {\r\n this.renderer.render(this.scene, this.camera);\r\n }\r\n\r\n };\r\n\r\n animate();\r\n }\r\n\r\n stopAnimation() {\r\n if (this.animationFrameId) {\r\n cancelAnimationFrame(this.animationFrameId);\r\n this.animationFrameId = null;\r\n }\r\n }\r\n\r\n dispose() {\r\n this.stopAnimation();\r\n this.scene.traverse((child) => {\r\n if (child.isMesh) {\r\n if (child.geometry) child.geometry.dispose();\r\n if (child.material) {\r\n if (Array.isArray(child.material)) {\r\n child.material.forEach((mat) => mat.dispose());\r\n } else {\r\n child.material.dispose();\r\n }\r\n }\r\n }\r\n });\r\n this.renderer.dispose();\r\n this.controls.dispose();\r\n\r\n // Remove spinner\r\n // if (this.spinner) {\r\n // ReactDOM.unmountComponentAtNode(this.spinner);\r\n // this.spinner.remove();\r\n // this.spinner = null;\r\n // }\r\n\r\n // Nullify properties to free up memory\r\n this.scene = null;\r\n this.camera = null;\r\n this.renderer = null;\r\n this.controls = null;\r\n this.canvas = null;\r\n }\r\n\r\n onMouseDown() {\r\n }\r\n\r\n onMouseMove() {\r\n }\r\n\r\n onMouseUp() {\r\n }\r\n\r\n onWheel() {\r\n }\r\n\r\n onWindowResize() {\r\n if (!this.canvas || !this.renderer || !this.camera) return;\r\n\r\n this.canvas.width = this.canvas.clientWidth;\r\n this.canvas.height = this.canvas.clientHeight;\r\n\r\n this.camera.aspect = this.canvas.clientWidth / this.canvas.clientHeight;\r\n this.camera.updateProjectionMatrix();\r\n\r\n this.renderer.setSize(this.canvas.clientWidth, this.canvas.clientHeight, false);\r\n this.renderer.setPixelRatio(window.devicePixelRatio);\r\n }\r\n\r\n // This methods will rotate scene in case OrbitControls wont fit everything\r\n\r\n // onMouseDown(event) {\r\n // this.mouseDown = true;\r\n // this.lastPosition = {\r\n // x: event.clientX,\r\n // y: event.clientY\r\n // };\r\n // }\r\n //\r\n // onMouseMove(event) {\r\n // if (!this.mouseDown) return;\r\n //\r\n // const deltaX = event.clientX - this.lastPosition.x;\r\n // const deltaY = event.clientY - this.lastPosition.y;\r\n //\r\n // this.camera.rotation.y += deltaX * 0.01;\r\n // this.camera.rotation.x += deltaY * 0.01;\r\n //\r\n // this.lastPosition = {\r\n // x: event.clientX,\r\n // y: event.clientY\r\n // };\r\n //\r\n // this.renderer.render(this.scene, this.camera);\r\n // }\r\n //\r\n // onMouseUp() {\r\n // this.mouseDown = false;\r\n // }\r\n //\r\n // onWheel(event) {\r\n // const delta = event.deltaY * 0.001;\r\n // this.camera.position.z += delta;\r\n //\r\n // this.renderer.render(this.scene, this.camera);\r\n // }\r\n // onWindowResize() {\r\n //\r\n // }\r\n}\r\n\r\nexport default SeparateModelGLBViewer;\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 \"./arButton/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","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[getDbFeatureProperty(\"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 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\nimport SuperAdminFeatureToolSettingsButton from \"../../qkbPages/superAdmin/SuperAdminFeatureToolSettingsButton\";\r\nimport {getDifferentToolSettings} from \"../../qkbPages/superAdmin/adminFunctions\";\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 {useMemo} from \"react\";\r\n\r\nexport const getGridColumnDimensions = (lookViewType) => {\r\n // Define column and row settings based on lookViewType\r\n switch (lookViewType) {\r\n case 1:\r\n return {columnCount: 1, rowHeight: 104}\r\n case 2:\r\n return {columnCount: 2, rowHeight: 170}\r\n case 3:\r\n return {columnCount: 1, rowHeight: 320} // Increased row height\r\n case 4:\r\n return {columnCount: 3, rowHeight: 128}\r\n default:\r\n return {columnCount: 1, rowHeight: 135}\r\n }\r\n}\r\n\r\nexport const useGridDimensions = (windowHeight, isMobile) => {\r\n const gridWidth = useMemo(() => isMobile ? 238 : 296, [isMobile]);\r\n const gridHeight = useMemo(() => {\r\n if (isMobile) {\r\n return windowHeight - 74 // 50 header + 24 footer info bar\r\n }\r\n return windowHeight - 110 // 50 header + 60 footer\r\n }, [windowHeight, isMobile]);\r\n\r\n return {gridWidth, gridHeight}\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 && (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 React 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 PropTypes from \"prop-types\";\r\nimport SvgIcon from \"@mui/material/SvgIcon\";\r\nimport Button from \"@mui/material/Button\";\r\n\r\nconst ARViewUSDZButton = (props) => {\r\n const {url} = props;\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 = (url) => {\r\n return Object.assign(document.createElement('a'), {\r\n download: 'asset.usdz',\r\n rel: \"ar\",\r\n href: url\r\n });\r\n }\r\n\r\n const arClick = () => {\r\n const i = makeImage();\r\n const a = makeLink(url);\r\n a.appendChild(i);\r\n a.click();\r\n }\r\n\r\n return (\r\n \r\n )\r\n};\r\n\r\nARViewUSDZButton.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)(ARViewUSDZButton)\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 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, language,\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, language} = 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 language,\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 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\nimport {hashHistory} from \"react-router\";\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 )\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\") || event.target.closest(\".feature-toolSettings\"))) {\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 const {adminToolSettingsPopupVisible} = store.adminState;\r\n return {\r\n productNoteEditorVisible,\r\n windowWidth: store.serverState.windowWidth,\r\n fabricatorData: store.fabricatorState,\r\n adminToolSettingsPopupVisible,\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 {getSessionStorageItem} from \"../../../misc/storageFunctions\";\r\nimport {setAdminToolSettingsPopupVisible} from \"./adminActions\";\r\nimport {IS_SUPER_ADMIN} from \"../../../config\";\r\nimport PropTypes from \"prop-types\";\r\nimport {featureInterface} from \"../../../interfaces/featureInterface\";\r\n\r\n\r\nconst SuperAdminFeatureToolSettingsButton = (props) => {\r\n\r\n const {setAdminToolSettingsPopupVisible, feature} = props;\r\n\r\n const isLoggedAsAdmin = IS_SUPER_ADMIN && getSessionStorageItem(\"superAdminToken\", false);\r\n if (!isLoggedAsAdmin || !feature) {\r\n return null\r\n }\r\n\r\n const handleButtonClick = () => {\r\n setAdminToolSettingsPopupVisible(true, feature);\r\n }\r\n\r\n return (\r\n \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