\n }\n {\n hasBackground = true\n }\n
\n
\n {\n value.links &&\n value.links.map((link, i) => (\n link && !link.notShow &&\n \n \n {\n link.translationId !== \"\" &&\n {link.name} \n }\n\n\n \n \n\n ))\n }\n \n
\n \n })\n }\n \n }\n \n )\n }\n\n}\n\nexport default MenuLinksV2;\n\nfunction SampleNextArrow(props) {\n const { style, onClick } = props\n return (\n
\n )\n}\n\nfunction SamplePrevArrow(props) {\n const { style, onClick } = props\n return (\n
\n )\n}\n","import React from 'react'\nimport { canViewFurniture, canViewPreorder } from '../../store/login/reducers'\nimport { connect } from 'react-redux'\nimport MenuLinksV2 from '../header/MenuLinksV2'\n\nimport {\n canViewCatalog,\n canViewBaths,\n canViewMktools,\n canViewOutlet,\n canViewPromotions,\n getCenterMktool,\n getCenterShowroom,\n getCenterWarehose,\n getDRIUSACenterId,\n getLowesCenterId,\n getMktoolsShippingCenter,\n getSelectedCenter,\n getSelectedCenterPreferences,\n getShippingMethod,\n getShowroomCenterId,\n getWarehoseCenterId,\n hasPromoActivated,\n isNoSilestoneCenter,\n isAustralianCenter,\n} from '../../store/centers/reducers'\nimport { changeCenter } from '../../store/centers/actions'\nimport { canViewCutToSize, getIsLogged, getIsMallPilotUser, getUserType, canViewConfigurableBath } from '../../store/login/reducers'\nimport { getUserLandings } from '../../store/landing/reducers'\nimport { injectIntl } from 'react-intl'\nimport { getIsXeronBrandVisible, getIsSilestoneBrandVisible } from '../../store/ui/reducers'\n\nconst mapStateToProps = (state, ownProps) => {\n return {\n canViewCatalog: canViewCatalog(state),\n canViewPromotions: canViewPromotions(state),\n canViewPreorder: canViewPreorder(state),\n canViewFurniture: canViewFurniture(state),\n centerPreferences: getSelectedCenterPreferences(state),\n canViewOutlet: canViewOutlet(state),\n hasPromoActivated: hasPromoActivated(state),\n isLogged: getIsLogged(state),\n shippingMethod: getShippingMethod(state),\n userType: getUserType(state),\n selectedCenter: getSelectedCenter(state),\n centerMktool: getCenterMktool(state),\n centerShowroom: getCenterShowroom(state),\n centerWarehouse: getCenterWarehose(state),\n mktoolShippingCenter: getMktoolsShippingCenter(state),\n canViewBaths: canViewBaths(state),\n userLandings: getUserLandings(state),\n isMallPilotUser: getIsMallPilotUser(state),\n warehoseCenterId: getWarehoseCenterId(),\n showroomCenterId: getShowroomCenterId(),\n DRIUSACenterId: getDRIUSACenterId(),\n lowesCenerId: getLowesCenterId(),\n canViewMktools: canViewMktools(state),\n canViewCutToSize: canViewCutToSize(state),\n customClass: ownProps.customClass ? ownProps.customClass : null,\n header: ownProps.comp,\n isWarehouse: getSelectedCenter(state) == getWarehoseCenterId(),\n isNoSilestoneCenter: isNoSilestoneCenter(state),\n canViewConfigurableBath: canViewConfigurableBath(state),\n isAustralianCenter: isAustralianCenter(state),\n isXeronBrandVisible: getIsXeronBrandVisible(state),\n isSilestoneBrandVisible: getIsSilestoneBrandVisible(state)\n }\n}\n\nconst mapDispatchToProps = dispatch => {\n return {\n changeCenter: centerId => {\n dispatch(changeCenter(centerId))\n }\n }\n}\n\nconst Menu = React.forwardRef((props, ref) => {\n return (
)\n})\n\nconst MenuContainer = injectIntl(connect(\n mapStateToProps,\n mapDispatchToProps,\n null,\n { forwardRef: true }\n)(Menu))\n\nexport default MenuContainer\n","import { connect } from 'react-redux'\nimport { getProductsForYou } from '../../store/products/reducers'\nimport { getIsLogged } from '../../store/login/reducers'\nimport Translation from \"../global/Translation\";\nimport React from \"react\";\nimport ProductsSlider from \"./ProductsSlider\";\nimport { fetchProductsForYou } from \"../../store/products/actions\";\nimport { canViewMktools } from \"../../store/centers/reducers\";\n\nconst mapStateToProps = state => {\n return {\n products: getProductsForYou(state),\n hide: !getIsLogged(state) || canViewMktools(state),\n title:
,\n analyticsTag: 'recomended_products_cross',\n gtmLabel: 'ec_carrusel_products_for_you'\n }\n}\n\nconst mapDispatchToProps = dispatch => {\n return {\n fetch: () => {\n return dispatch(fetchProductsForYou())\n }\n }\n}\n\nconst ProductsForYouContainer = connect(\n mapStateToProps,\n mapDispatchToProps\n)(ProductsSlider)\n\n\nexport default ProductsForYouContainer\n","import React from \"react\";\nimport Translation from \"./Translation\";\n\nclass Countdown extends React.Component {\n\n promoDate = null\n state = {now: new Date().getTime()}\n interval = null\n\n componentDidMount() {\n if (!this.props.hide) {\n this.interval = setInterval(this.updateTime, 1)\n const time = new Date(this.props.endDate)\n // time.setDate(time.getDate() + 7)\n this.promoDate = time.getTime()\n }\n }\n\n componentWillUnmount() {\n clearInterval(this.interval)\n }\n\n updateTime = () => this.setState({now: new Date().getTime()})\n\n checkTime = (i) => {\n if (i < 10) {i = \"0\" + i} // add zero in front of numbers < 10\n return i;\n }\n\n render() {\n\n \n let dateFuture = new Date(this.props.endDate);\n let dateNow = new Date();\n\n let seconds = Math.floor((dateFuture - (dateNow)) / 1000);\n let minutes = Math.floor(seconds / 60);\n let hours = Math.floor(minutes / 60);\n let days = Math.floor(hours / 24);\n\n hours = hours - (days * 24);\n minutes = minutes - (days * 24 * 60) - (hours * 60);\n seconds = seconds - (days * 24 * 60 * 60) - (hours * 60 * 60) - (minutes * 60); \n \n if(days < 10) days = \"0\"+days\n if(minutes < 10) minutes = \"0\"+minutes\n if(hours < 10) hours = \"0\"+hours\n if(seconds < 10) seconds = \"0\"+seconds\n\n\n return (\n
\n
\n {days} \n
\n
\n {hours} \n
\n
\n {minutes} \n
\n
\n {seconds} \n
\n
\n )\n }\n}\n\nexport default Countdown\n\n","import { connect } from 'react-redux'\nimport { getIsLogged } from '../../store/login/reducers'\nimport { canViewMktools } from '../../store/centers/reducers'\nimport Translation from \"../global/Translation\";\nimport React from \"react\";\nimport Countdown from \"../global/Countdown\";\nimport RectangleResultContainer from '../catalog/rectangleResult/RectangleResultContainer'\nimport Slider from 'react-slick/lib/slider'\nimport { getUserLandings } from '../../store/landing/reducers'\nimport LocalizedLink from '../global/LocalizedLink'\nimport {fetchProductsLandingsByCenters} from \"../../store/landing/actions\";\nimport {getMallProduct} from \"../landing-templates/utils\";\nimport ProductContext, {MallProductContext} from \"../catalog/rectangleResult/contexts/ProductContext\";\n\nconst mapStateToProps = state => {\n //const products = getProductsForYou(state)/*getLastProductBoughts(state)*/\n\n return {\n //products: products && products.map(el => el.product),\n hide: !getIsLogged(state) || canViewMktools(state),\n userLandings: getUserLandings(state),\n productsLanding: state.landing.productsLanding,\n productsLots: state.landing.productsLots,\n gtmLabel: 'ec_carrusel_promotion_mall'\n }\n}\n\nconst mapDispatchToProps = dispatch => {\n return {\n fetchProductsLandingsByCenters: (landingId, centers, products, portfolioMode) => {\n return dispatch(fetchProductsLandingsByCenters(landingId, centers, products, portfolioMode))\n },\n }\n}\n\n\n\nfunction SampleNextArrow(props) {\n const { style, onClick } = props\n return (\n
\n )\n}\n\nfunction SamplePrevArrow(props) {\n const { style, onClick } = props\n return (\n
\n )\n}\n\nclass MallPreviewContainer extends React.Component {\n state = {\n slideIndex: 0,\n landings: [],\n lastFetchedLanding: -1\n }\n\n resize = () => { \n // let slices = 4\n // if(window.innerWidth < 1430) {\n // slices = 3\n // }\n // if (window.innerWidth < 1010) {\n // slices = 2\n // }\n // if (window.innerWidth < 768) {\n // slices = 1\n // }\n const slidesToShow = this.getSlidesToShow()\n this.setState({ slidesToShow })\n }\n\n componentDidMount() {\n window.addEventListener(\"resize\", this.resize.bind(this));\n }\n\n componentWillUnmount() {\n window.removeEventListener(\"resize\", this.resize.bind(this));\n }\n\n componentDidUpdate(prevProps, prevState, snapshot) {\n\n if (this.state.lastFetchedLanding === -1) this.setState({lastFetchedLanding: 0})\n\n if (this.props.userLandings.length > 0\n && this.state.lastFetchedLanding < this.props.userLandings.length\n && this.state.lastFetchedLanding !== prevState.lastFetchedLanding\n ) {\n let today = new Date()\n const landing = this.props.userLandings[this.state.lastFetchedLanding]\n if(new Date(landing.end_at) > today) {\n this.props.fetchProductsLandingsByCenters(landing.common_id, landing.centers, landing.products, landing.portfolio_mode)\n } else {\n this.setState({\n lastFetchedLanding: this.state.lastFetchedLanding + 1\n })\n }\n }\n\n if (this.props.productsLanding !== prevProps.productsLanding ) {\n const landing = this.props.userLandings[this.state.lastFetchedLanding]\n\n if (landing) {\n landing.products = landing.products.map(product => {\n // return product.data\n return getMallProduct(product, this.props.productsLanding, this.props.productsLots)\n })\n this.state.landings.push(landing)\n this.setState({\n lastFetchedLanding: this.state.lastFetchedLanding + 1\n }, this.resize)\n }\n }\n }\n\n\n getSlidesToShow = () => {\n const maxSlidesToShow = 10\n const minGap = 12\n const minWidth = 250\n const minCardWidth = this.props.minWidth ? this.props.minWidth : minWidth\n const el = document.getElementById('mall-promo-slides')\n if (!el) return 1\n let maxSlides = Math.floor(el.offsetWidth / minCardWidth) //250 Card width\n const gap = (el.offsetWidth - minCardWidth * maxSlides) / (1 + maxSlides)\n if (gap < minGap) --maxSlides\n const slidesCount = this.props.productsLanding.length > maxSlides ? maxSlides : this.props.productsLanding.length\n return Math.min(maxSlidesToShow, slidesCount)\n }\n\n render() {\n const settings = {\n arrows: true,\n nextArrow:
,\n prevArrow:
,\n swipeToSlide: true,\n dots: true,\n speed: 300,\n slidesToShow: this.state.slidesToShow,\n slidesToScroll: 1,\n infinite: false,\n variableWidth: false\n }\n //if (this.props.hide || !this.props.products || !this.props.products[0]) return
hola \n //console.log({ productNormal: this.props.products[0], productMall: this.props.userLandings[0].products[0]});\n \n return(\n this.state.landings.length > 0 &&(\n this.state.landings.map(landing => {\n let today = new Date() \n if(new Date(landing.end_at) > today) \n return(\n\n
\n \n
\n
\n
\n
\n
\n
\n
\n {landing.title} \n \n
\n
\n
\n
\n
\n \n \n \n \n
\n
\n
\n
\n
\n
\n
\n )\n })\n \n )\n \n )\n }\n}\n\nexport default connect(\n mapStateToProps,\n mapDispatchToProps\n)(MallPreviewContainer)\n\n","import React, {Fragment, useState} from 'react'\nimport Translation from '../global/Translation'\n\nimport LocalizedLink from '../global/LocalizedLink'\nimport Button from '../global/Button'\nimport slide from '../../assets/img/home/home-slide.png'\nimport CTS_V2 from '../../assets/img/banners-v2/CTS_V2.png'\nimport Banos_V2 from '../../assets/img/banners-v2/Banos_V2.png'\nimport Outlet_V2 from '../../assets/img/banners-v2/Outlet_V2.png'\nimport Tablas_V2 from '../../assets/img/banners-v2/Tablas_V2.png'\nimport PPCC_V2 from '../../assets/img/banners-v2/PPCC_V2.png'\nimport outlet from '../../assets/img/home/home-slide-outlet.png'\nimport mall from '../../assets/img/home/mall-slide.png'\nimport promoNaturalStoneV2 from '../../assets/img/banners-exclusive-promo-natural-stone/promo_natural_stone_v2.png'\nimport { injectIntl } from 'react-intl'\n\nimport LastBoughtProductsContainer from '../products/LastBoughtProductsContainer'\n\nimport Spinner from '../global/Spinner'\nimport ChangeLogHomeNews from '../changelog/ChangeLogHomeNews'\nimport Alerts from '../alerts/Alerts'\nimport MenuContainer from '../header/MenuContainer'\nimport ProductsForYouContainer from \"../products/ProductsForYouContainer\";\nimport MallPreviewContainer from \"../products/MallPreviewContainer\";\nimport BannerDekton from '../banners/banner-dekton/BannerDekton'\nimport Banner1Mktools from '../../assets/img/banners-mktools/Promo_Card_1.png'\nimport Banner2Mktools from '../../assets/img/banners-mktools/Promo_Card_2.png'\nimport Banner3Mktools from '../../assets/img/banners-mktools/Promo_Card_3.png'\nimport BannerWorkwear from '../../assets/img/banners-mktools/cosentino-workwear.jpg'\nimport BannerSupplies from '../../assets/img/banners-mktools/cosentino-supplies.jpg'\nimport BannerRockMaster from '../banners/banner-rockmaster/BannerRockMaster'\nimport BannerSuma from '../banners/banner-suma/BannerSuma'\nimport BannerSilestoneXM from '../banners/banner-silestone-xm/BannerSilestoneXM'\nimport Slider from 'react-slick'\n\nclass HomeV2 extends React.Component {\n state = {hasMall: true}\n\n componentDidMount() {\n if (this.props.selectedCenter === 7777) this.props.goLowes(this.props.userType, this.props.intl)\n else if (this.props.isIkeaCenter) this.props.goIkea(this.props.intl)\n\n // const slider = document.getElementsByClassName('slick-slider')[0]\n // slider.addEventListener(\"drag\", (e) => {e.stopPropagation()}, false)\n\n // document.addEventListener('DOMContentLoaded', (event) => {\n // const elements = document.getElementsByClassName('slick-slider');\n // for (let element of elements) {\n // element.addEventListener('dragstart', (e) => {\n // e.stopPropagation();\n // });\n // }\n // });\n }\n\n slickSettings = {\n arrows: false,\n swipeToSlide: true,\n dots: false,\n speed: 750,\n autoplaySpeed: 4000,\n slidesToShow: 1,\n slidesToScroll: 1,\n infinite: true,\n autoplay: true,\n variableWidth: false\n }\n\n CustomSlide = (props) => {\n const [isMovin, setIsMovin] = useState(false)\n\n const { id, bannerUrl, bannerTitle, bannerText } = props;\n const handleClick = e => {\n if (isMovin) e.preventDefault()\n }\n\n return (\n
{\n e.preventDefault()\n }}\n onMouseDown={e => {\n if (isMovin===true) setIsMovin(false)\n }}\n onMouseMove={e => {\n if (isMovin===false) setIsMovin(true)\n }}\n >\n
\n \n
\n
\n
\n
\n );\n }\n\n render() {\n\n let homeSlides = [\n {\n title:
,\n colorTitle: 'white',\n subtitle:
,\n colorSubtitle: 'white',\n buttonText:
,\n buttonColor: 'white',\n backgroundImage: slide,\n backgroundImageLazy: slide,\n routeId: 'ROUTE_CATALOG',\n queryString: '?type[0]=TABLA',\n params: { outlet: '' },\n extraClassName: 'card-wide card-tall',\n dataQas: ''\n },\n {\n title:
,\n colorTitle: 'white',\n subtitle:
,\n colorSubtitle: 'white',\n buttonText:
,\n buttonColor: 'white',\n backgroundImage: mall,\n backgroundImageLazy: mall,\n routeId: 'ROUTE_CATALOG',\n queryString: '?type[0]=TABLA',\n params: { outlet: '' },\n extraClassName: '',\n dataQas: ''\n },\n {\n title:
,\n colorTitle: 'white',\n subtitle:
,\n colorSubtitle: 'white',\n buttonText:
,\n buttonColor: 'white',\n backgroundImage: outlet,\n backgroundImageLazy: outlet,\n routeId: 'ROUTE_CATALOG',\n queryString: '?type[0]=TABLA',\n params: { outlet: 'outlet' },\n extraClassName: '',\n dataQas: ''\n },\n\n ]\n if (this.props.typeClient){\n switch (this.props.typeClient) {\n case 1:\n if(this.props.testAB === 'A'){\n homeSlides[0].title =
\n homeSlides[0].subtitle =
\n homeSlides[0].buttonText =
\n homeSlides[0].backgroundImage = CTS_V2\n homeSlides[0].backgroundImageLazy = CTS_V2\n homeSlides[0].queryString = ''\n homeSlides[0].params = { outlet: '' }\n homeSlides[0].routeId = 'ROUTE_CUT_TO_SIZE'\n homeSlides[0].dataQas = 'home_hero-cut-to-size-buy-here-button'\n\n homeSlides[1].title = this.props.isAustralianCenter ?\n
\n :\n
\n homeSlides[1].subtitle =
\n homeSlides[1].buttonText =
\n homeSlides[1].backgroundImage = Tablas_V2\n homeSlides[1].backgroundImageLazy = Tablas_V2\n homeSlides[1].queryString = '?type[0]=TABLA'\n homeSlides[1].params = { outlet: '' }\n homeSlides[1].routeId = 'ROUTE_CATALOG'\n homeSlides[1].dataQas = 'home_hero-slabs-buy-here-button'\n }else{\n homeSlides[0].title = this.props.isAustralianCenter ?\n
\n :\n
\n homeSlides[0].subtitle =
\n homeSlides[0].buttonText =
\n homeSlides[0].backgroundImage = Tablas_V2\n homeSlides[0].backgroundImageLazy = Tablas_V2\n homeSlides[0].queryString = '?type[0]=TABLA'\n homeSlides[0].params = { outlet: '' }\n homeSlides[0].routeId = 'ROUTE_CATALOG'\n homeSlides[0].dataQas = 'home_hero-slabs-buy-here-button'\n\n homeSlides[1].title =
\n homeSlides[1].subtitle =
\n homeSlides[1].buttonText =
\n homeSlides[1].backgroundImage = CTS_V2\n homeSlides[1].backgroundImageLazy = CTS_V2\n homeSlides[1].queryString = ''\n homeSlides[1].params = { outlet: '' }\n homeSlides[1].routeId = 'ROUTE_CUT_TO_SIZE'\n homeSlides[1].dataQas = 'home_hero-cut-to-size-buy-here-button'\n }\n\n homeSlides[2].title =
\n homeSlides[2].subtitle =
\n homeSlides[2].buttonText =
\n homeSlides[2].backgroundImage = Outlet_V2\n homeSlides[2].backgroundImageLazy = Outlet_V2\n homeSlides[2].queryString = '?type[0]=TABLA'\n homeSlides[2].params = { outlet: 'outlet' }\n homeSlides[2].routeId = 'ROUTE_CATALOG'\n homeSlides[2].dataQas = 'home_hero-outlet-buy-here-button'\n\n break\n case 2:\n homeSlides[0].title =
\n homeSlides[0].subtitle =
\n homeSlides[0].buttonText =
\n homeSlides[0].backgroundImage = CTS_V2\n homeSlides[0].backgroundImageLazy = CTS_V2\n homeSlides[0].queryString = ''\n homeSlides[0].params = { outlet: '' }\n homeSlides[0].routeId = 'ROUTE_CUT_TO_SIZE'\n homeSlides[0].dataQas = 'home_hero-cut-to-size-buy-here-button'\n\n homeSlides[1].title = this.props.isAustralianCenter ?\n
\n :\n
\n homeSlides[1].subtitle =
\n homeSlides[1].buttonText =
\n homeSlides[1].backgroundImage = Tablas_V2\n homeSlides[1].backgroundImageLazy = Tablas_V2\n homeSlides[1].queryString = '?type[0]=TABLA'\n homeSlides[1].params = { outlet: '' }\n homeSlides[1].routeId = 'ROUTE_CATALOG'\n homeSlides[1].dataQas = 'home_hero-slabs-buy-here-button'\n\n homeSlides[2].title =
\n homeSlides[2].subtitle =
\n homeSlides[2].buttonText =
\n homeSlides[2].backgroundImage = Outlet_V2\n homeSlides[2].backgroundImageLazy = Outlet_V2\n homeSlides[2].queryString = '?type[0]=TABLA'\n homeSlides[2].params = { outlet: 'outlet' }\n homeSlides[2].routeId = 'ROUTE_CATALOG'\n homeSlides[2].dataQas = 'home_hero-outlet-buy-here-button'\n break\n case 3:\n homeSlides[0].title =
\n homeSlides[0].subtitle =
\n homeSlides[0].buttonText =
\n homeSlides[0].backgroundImage = Banos_V2\n homeSlides[0].backgroundImageLazy = Banos_V2\n homeSlides[0].queryString = '?type[0]=BAÑOS'\n homeSlides[0].params = { outlet: '' }\n homeSlides[0].routeId = 'ROUTE_CATALOG'\n homeSlides[0].dataQas = 'home_hero-baths-cladding-buy-here-button'\n\n homeSlides[1].title =
\n homeSlides[1].subtitle =
\n homeSlides[1].buttonText =
\n homeSlides[1].backgroundImage = CTS_V2\n homeSlides[1].backgroundImageLazy = CTS_V2\n homeSlides[0].queryString = ''\n homeSlides[0].params = { outlet: '' }\n homeSlides[0].routeId = 'ROUTE_CUT_TO_SIZE'\n homeSlides[0].dataQas = 'home_hero-cut-to-size-buy-here-button'\n\n homeSlides[2].title =
\n homeSlides[2].subtitle =
\n homeSlides[2].buttonText =
\n homeSlides[2].backgroundImage = PPCC_V2\n homeSlides[2].backgroundImageLazy = PPCC_V2\n homeSlides[2].queryString = '?type[0]=PPCC'\n homeSlides[2].params = { outlet: '' }\n homeSlides[2].routeId = 'ROUTE_CATALOG'\n homeSlides[2].dataQas = 'home_hero-professional-products-buy-here-button'\n break\n default:\n\n }\n }\n\n if (this.props.canViewMktools && !this.props.isWarehouse) {\n homeSlides[0] = {\n title:
,\n colorTitle: 'white',\n subtitle: '',\n buttonText:
,\n backgroundImage: Banner1Mktools,\n backgroundImageLazy: Banner1Mktools,\n routeId: 'ROUTE_CATALOG',\n queryString: '?webHeading[0]=MK',\n params: { outlet: '' },\n buttonColor: 'white',\n extraClassName: ''\n }\n homeSlides[1] = {\n title:
,\n colorTitle: 'white',\n subtitle: '',\n buttonText:
,\n backgroundImage: Banner2Mktools,\n backgroundImageLazy: Banner2Mktools,\n routeId: 'ROUTE_CATALOG',\n queryString: '?webHeading[0]=SH',\n params: { outlet: '' },\n buttonColor: 'white',\n extraClassName: ''\n }\n delete homeSlides[2]\n }\n\n if (this.props.canViewMktools && this.props.isWarehouse) {\n homeSlides[0] = {\n title:
,\n colorTitle: 'white',\n subtitle: '',\n buttonText:
,\n backgroundImage: BannerWorkwear,\n backgroundImageLazy: BannerWorkwear,\n routeId: 'ROUTE_CATALOG',\n queryString: '?typeId[0]=13',\n params: { outlet: '' },\n buttonColor: 'white',\n extraClassName: 'card-wide card-tall background-position-center'\n }\n homeSlides[1] = {\n title:
,\n colorTitle: 'white',\n subtitle: '',\n buttonText:
,\n backgroundImage: BannerSupplies,\n backgroundImageLazy: BannerSupplies,\n routeId: 'ROUTE_CATALOG',\n queryString: '?typeId[0]=15',\n params: { outlet: '' },\n buttonColor: 'white',\n extraClassName: 'background-position-center'\n }\n homeSlides[2] = {\n title:
,\n colorTitle: 'white',\n subtitle: '',\n buttonText:
,\n backgroundImage: Banner3Mktools,\n backgroundImageLazy: Banner3Mktools,\n routeId: 'ROUTE_CATALOG',\n queryString: '?webHeading[0]=WH',\n params: { outlet: '' },\n buttonColor: 'white',\n extraClassName: 'background-position-center'\n }\n }\n\n if(this.props.showBannerPromo) {\n homeSlides[0]['backgroundImage'] = promoNaturalStoneV2\n homeSlides[0]['title'] =
\n homeSlides[0]['subtitle'] =
\n homeSlides[0]['buttonText'] =
\n homeSlides[0]['URL'] = 'https://forms.cosentino.com/natural-stone-week-eu/'\n }\n\n return (\n
\n {this.props.isLogging &&
}\n\n
\n {this.props.maintenanceScheduledText && (\n
} />\n )}\n
\n\n
\n
\n\n {this.props.hasPromotionLandingActivated &&\n
\n {this.props.promotionData.map(p => {\n const bannerTitle = p.banner_title ? (p.banner_title[this.props.locale] ? p.banner_title[this.props.locale] : p.banner_title[p.banner_title.default]) : null\n const bannerText = p.banner_text ? (p.banner_text[this.props.locale] ? p.banner_text[this.props.locale] : p.banner_text[p.banner_text.default]) : null\n\n return \n }\n
\n\n {\n this.props.isUsaOrCanada &&\n
\n \n
\n \n
\n \n }\n\n
\n {\n // this.props.isMallPilotUser && this.props.userLandings && this.props.userLandings.length > 0 &&\n //this.state.hasMall > 0 &&\n \n \n {/* {this.props.canViewEarthicPromotion && (\n \n
\n )} */}\n\n {this.props.canViewSumaPromotion && (\n \n
\n )}\n\n {this.props.canViewRockMasterPromotion && (\n \n
\n )}\n\n {this.props.canViewSilestonePromotionXM && (\n \n
\n )}\n\n {this.props.isLogged && (\n \n )}\n \n )\n }\n}\n\nexport default injectIntl(HomeV2)\n","import { getUserLandings } from './../../store/landing/reducers';\nimport { connect } from 'react-redux'\n\nimport {\n getShippingMethod,\n canOnlyViewOutlet,\n getCenterName,\n hasPromoActivated,\n getSelectedCenter,\n getIsIkeaCenter,\n getPromoBanners,\n getIsVirtualVisitEnabled,\n hasPromotionLandingActivated,\n getWarehoseCenterId,\n getShowroomCenterId,\n canViewMktools,\n getHQCenterId,\n getLowesCenterId,\n isEuropeOrIberia,\n isUsaOrCanada, isAustralianCenter\n} from '../../store/centers/reducers'\nimport { changeCenter } from '../../store/centers/actions'\nimport { getIsLogged, getSalesOrg, getUserType, getIsLogging, getVirtualVisitURL, canViewRockMasterPromotion, canViewEarthicPromotion, canViewHybriqPromotion, canViewSilestonePromotionXM, getClientType, getIsMallPilotUser, getTypeClient,getTestAB, canViewSumaPromotion } from '../../store/login/reducers'\nimport { getProfileConfiguration } from '../../store/profile-configuration/reducers'\nimport { getLanguage, getMaintenanceScheduled, getMaintenanceScheduledText } from '../../store/ui/reducers'\nimport { dispatchPushURL, fetchMaintenance } from '../../store/ui/actions'\nimport {\n getBannerDescription,\n getBannerTitle,\n getPromotionData,\n getPromotionHomeBanner,\n getPromotionLateralBanner,\n getPromotionLink\n} from '../../store/promotions/reducers'\nimport moment from 'moment/moment'\nimport HomeV2 from \"./HomeV2\";\n\nconst mapStateToProps = (state, { match }) => {\n return {\n shippingMethod: getShippingMethod(state),\n isLogged: getIsLogged(state),\n canOnlyViewOutlet: canOnlyViewOutlet(state),\n userPreferences: getProfileConfiguration(state),\n center: getCenterName(state),\n canViewMktools: canViewMktools(state),\n salesOrg: getSalesOrg(state),\n userType: getUserType(state),\n typeClient: getTypeClient(state),\n testAB: getTestAB(state),\n hasPromoActivated: hasPromoActivated(state),\n hasPromotionLandingActivated: hasPromotionLandingActivated(state),\n selectedCenter: getSelectedCenter(state),\n isIkeaCenter: getIsIkeaCenter(state),\n isLogging: getIsLogging(state),\n locale: getLanguage(state),\n homeBanner: getPromotionHomeBanner(state),\n promotionLateralBanner: getPromotionLateralBanner(state),\n promotionLink: getPromotionLink(state),\n promoBanners: getPromoBanners(state),\n virtualVisitEnabled: getIsVirtualVisitEnabled(state),\n URLVirtualVisit: getVirtualVisitURL(state),\n maintenanceScheduled: getMaintenanceScheduled(state),\n maintenanceScheduledText: getMaintenanceScheduledText(state),\n promotionBannerTitle: getBannerTitle(state),\n promotionBannerDescription: getBannerDescription(state),\n warehoseCenterId: getWarehoseCenterId(),\n showroomCenterId: getShowroomCenterId(),\n HQCenterId: getHQCenterId(),\n LowesCenterId: getLowesCenterId(),\n userLandings: getUserLandings(state),\n isMallPilotUser: getIsMallPilotUser(state),\n showBannerPromo: new moment() < moment('2022-11-18 18:00') && isEuropeOrIberia(state),\n isUsaOrCanada: isUsaOrCanada(state),\n canViewRockMasterPromotion: canViewRockMasterPromotion(state),\n isWarehouse: getSelectedCenter(state) == getWarehoseCenterId(),\n canViewEarthicPromotion: canViewEarthicPromotion(state),\n canViewHybriqPromotion: canViewHybriqPromotion(state),\n isAustralianCenter: isAustralianCenter(state),\n canViewSilestonePromotionXM: canViewSilestonePromotionXM(state),\n canViewSumaPromotion: canViewSumaPromotion(state),\n promotionData: getPromotionData(state)\n\n // showBannerPromo: false\n }\n}\n\nconst mapDispatchToProps = dispatch => {\n return {\n changeCenter: centerId => {\n dispatch(changeCenter(centerId))\n },\n goLowes: (userType, intl) => {\n userType === 'ADMIN'\n ? dispatch(dispatchPushURL(intl.formatMessage({ id: 'ROUTE_CATALOG_LOWES_ADMIN' }).replace(':filter', 'home')))\n : dispatch(dispatchPushURL(intl.formatMessage({ id: 'ROUTE_CATALOG_LOWES' }).replace(':filter', 'home')))\n },\n goIkea: intl => {\n dispatch(dispatchPushURL(intl.formatMessage({ id: 'ROUTE_CATALOG' }).replace(':outlet?', '')))\n },\n fetchMaintenance: () => {\n dispatch(fetchMaintenance())\n } \n }\n}\n\nconst HomeContainer = connect(\n mapStateToProps,\n mapDispatchToProps\n)(HomeV2)\n\nexport default HomeContainer\n","import React from 'react'\n\nimport HomeContainer from '../components/home/HomeContainer'\nconst HomeScreen = props =>
\n\nexport default HomeScreen\n","import React from 'react'\nimport Translation from '../global/Translation'\n\nimport Select from 'react-select'\n\nimport Button from '../global/Button'\nimport groupBy from 'json-groupby'\nimport { injectIntl } from 'react-intl'\nimport * as analytics from '../../analyticsEvents'\nimport axios from 'axios'\nimport FileDownload from 'js-file-download'\nimport FormatCSVModal from '../global/FormatCSVModal'\nimport Modal from '../global/Modal'\n\nclass LotsFilter extends React.Component {\n constructor(props) {\n super(props)\n\n this.state = {\n emailPromptOpen: false,\n showCSVFormat: false,\n selectedOption: ''\n }\n\n this.promptEmail = this.promptEmail.bind(this)\n this.downloadPdf = this.downloadPdf.bind(this)\n }\n\n promptEmail() {\n this.setState({ emailPromptOpen: true })\n }\n\n closeFormatCSVModal(format) {\n this.setState({ showCSVFormat: false })\n\n if (!format) {\n return\n }\n\n const { intl } = this.props\n const fields = ['quarryBlock', 'shade', 'bundleId', 'lotId', 'length', 'width', 'quality', 'qty', 'location', 'qualityOutlet']\n analytics.downloadLots(format, this.props.commonParamsAnalytics)\n const header = fields.map(field => {\n return intl.formatMessage({ id: `${field}` })\n })\n\n const FileDownload = require('js-file-download')\n axios\n .get(\n process.env.REACT_APP_API_HOST +\n `/catalog/${this.props.center}/lots/${this.props.productId}/csv/?format=${format}&lang=${this.props.language}${\n this.props.outlet ? '&outlet=1' : ''\n }&fields=${encodeURIComponent(fields.join(','))}&header=${encodeURIComponent(header.join(','))}`,\n { headers: { Authorization: `Bearer ${this.props.token}` }, 'Content-Type': 'text/plain', responseType: 'blob' }\n )\n .then(response => {\n FileDownload(response.data, `lots.${format}`)\n })\n }\n\n downloadPdf() {\n if (!this.inputEmail.value) {\n return\n }\n\n this.setState({ emailPromptOpen: false })\n analytics.downloadLots('PDF', this.props.commonParamsAnalytics)\n\n const email = this.inputEmail.value\n\n const { intl } = this.props\n const fields = ['image', 'quarryBlock', 'shade', 'bundleId', 'lotId', 'length', 'width', 'quality', 'qty', 'location', 'qualityOutlet']\n const header = fields.map(field => {\n return intl.formatMessage({ id: `${field}` })\n })\n\n const url = `${process.env.REACT_APP_API_HOST}/catalog/${this.props.center}/lots/${this.props.productId}/pdf/?lang=${this.props.language}${\n this.props.outlet ? '&outlet=1' : ''\n }&fields=${encodeURIComponent(fields.join(','))}&header=${encodeURIComponent(header.join(','))}&to=${encodeURIComponent(email)}`\n // }&fields=${encodeURIComponent(fields.join(','))}&header=${encodeURIComponent(header.join(','))}&to=${encodeURIComponent(email)}&authToken=${this.props.token}`\n\n fetch(url, {\n headers: {Authorization: `Bearer ${this.props.token}`}\n })\n }\n\n quarryBlockHandleChange = selectedOption => {\n this.props.handleFilterChange(selectedOption, 'quarryBlock')\n this.setState({ selectedOption })\n }\n\n qualityHandleChange = selectedOption => {\n this.props.handleFilterChange(selectedOption, 'quality')\n this.setState({ selectedOption })\n }\n\n shadeHandleChange = selectedOption => {\n this.props.handleFilterChange(selectedOption, 'shade')\n this.setState({ selectedOption })\n }\n\n locationHandleChange = selectedOption => {\n this.props.handleFilterChange(selectedOption, 'location')\n this.setState({ selectedOption })\n }\n\n render() {\n const { onlyLots, isAdmin, search, searchValue, flush, intl } = this.props\n const groupByQuarryBlock = onlyLots !== undefined ? groupBy(onlyLots, ['quarryBlock'], ['lotId']) : null\n const groupByShade = onlyLots !== undefined ? groupBy(onlyLots, ['shade'], ['lotId']) : null\n const groupByQuality = onlyLots !== undefined ? groupBy(onlyLots, ['quality'], ['lotId']) : null\n const groupByLocation = onlyLots !== undefined ? groupBy(onlyLots, ['location'], ['lotId']) : null\n\n const { selectedOption } = this.state\n \t const selectedValue = selectedOption && selectedOption.value\n\n const searchBar =
\n\n return (\n
\n
\n
\n
\n
\n ({\n label: option + ' (' + groupByQuarryBlock[option].lotId.length + ')',\n value: option\n }))\n }\n value={selectedValue}\n onChange={this.quarryBlockHandleChange}\n />\n
\n\n {!(this.props.original.brand === 'SILESTONE' || this.props.original.brand === 'DEKTON' || this.props.original.brand === 'XERON') && (\n
\n ({\n label: option + ' (' + groupByQuality[option].lotId.length + ')',\n value: option\n }))\n }\n value={selectedValue}\n onChange={this.qualityHandleChange}\n />\n
\n )}\n\n {(isAdmin || this.props.impersonatedBy) && (\n
\n ({\n label: option + ' (' + groupByShade[option].lotId.length + ')',\n value: option\n }))\n }\n value={selectedValue}\n onChange={this.shadeHandleChange}\n />\n
\n )}\n\n {(isAdmin || this.props.impersonatedBy) && (\n
\n ({\n label: option + ' (' + groupByLocation[option].lotId.length + ')',\n value: option\n }))\n }\n value={selectedValue}\n onChange={this.locationHandleChange}\n />\n
\n )}\n\n
\n
\n\n
\n \n \n {/*RELOAD*/}\n {/**/}\n {/* */}\n
\n
\n\n
\n
{searchBar}
\n\n
\n \n
\n this.setState({ showCSVFormat: true })}>\n \n \n \n
\n
\n
\n
\n\n {this.state.showCSVFormat &&
this.closeFormatCSVModal(format)} token={() => this.props.token} />}\n {this.state.emailPromptOpen && (\n \n \n }\n >\n \n
\n \n \n \n \n \n
\n \n )}\n \n )\n }\n}\n\nexport default injectIntl(LotsFilter)\n","import Translation from \"../global/Translation\";\n\nimport React from 'react'\nimport {injectIntl} from \"react-intl\";\nimport DisplayOutletIndicator from \"../catalog/rectangleResult/displays/DisplayOutletIndicator\";\nimport Button from \"../global/Button\";\nimport LocalizedLink from \"../global/LocalizedLink\";\nimport IntegerInputNumber from \"../input-number-other/IntegerInputNumber\";\nimport noBundleImage from '../../assets/img/no-image-bundle.png'\nimport cameraOff from \"../../assets/img/icons/camera-off.svg\";\nimport DisplayNaturalStoneOrigin from \"../catalog/rectangleResult/displays/DisplayNaturalStoneOrigin\";\nimport {v4 as uuidv4} from \"uuid\";\n\n\nclass LotTableRow extends React.Component {\n\n render() {\n\n const { product, centerId, defaultImage, lot, isAdmin, impersonatedBy, outlet, userType, width, length, surface, getMinimumValue,\n isLot, lotImage, maxQuantity, unit, lunit, setQuantity, addToCart, canViewLotId, canViewAllLots, selectedProduct } = this.props\n\n\n let _defaultImage = defaultImage;\n if (!_defaultImage) {\n if (!isLot) _defaultImage = noBundleImage;\n else _defaultImage = cameraOff;\n }\n\n\n return (\n\n
\n\n \n \n {\n lotImage ? (\n
\n {/*\n
\n {/*
*/}\n
\n {\n !defaultImage && (\n \n \n )\n }\n \n\n \n {\n isLot ? (\n \n
\n {/*
{canViewLotId ? lot.lotId : ''}
*/}\n
{lot.lotId}
\n {lot.bundleId &&\n
Bundle ID {lot.bundleId}
\n }\n
\n
Bundle
\n
{lot.bundleId}
\n {\n this.props.isLatinaVitoria ? (\n lot.lots && (\n
this.props.openBundleContent(lot)}\n >\n
\n )\n ) : (\n lot.lotId && canViewLotId && (\n
\n )\n )\n }\n
\n\n \n {lot.quarryBlock}\n \n\n {\n (!canViewAllLots || isAdmin) && (\n \n {lot.quality}\n \n )\n }\n\n {\n outlet && (\n \n {\n lot.qualityOutlet && (\n \n {outlet && (\n
\n )\n }\n \n )\n }\n\n \n {length} x {width} {lunit()}{!isLot && (*
)}\n \n\n \n {surface} {unit}2{!isLot && (*
)}\n \n\n \n\n {(isAdmin || this.props.impersonatedBy || this.props.isMexico) && (\n \n {lot.shade}\n \n )}\n {(isAdmin || this.props.impersonatedBy) && (\n \n {lot.location}\n \n )}\n\n \n \n
\n setQuantity(v)}\n disabled={isAdmin}\n />\n
\n\n {!isAdmin && !this.props.minimumOrder && (\n
addToCart()} inverted icon=\"shopping-cart\" size=\"medium\" customClass=\"square btn-purchase-list\" gtmLabel=\"ec_comprar_lista\">\n {userType === 'SHOP' ? \n )}\n
\n\n \n )\n }\n}\n\nexport default injectIntl(LotTableRow)","import Translation from '../global/Translation'\nimport React from 'react'\nimport { injectIntl } from 'react-intl'\nimport DisplayOutletIndicator from '../catalog/rectangleResult/displays/DisplayOutletIndicator'\nimport IntegerInputNumber from '../input-number-other/IntegerInputNumber'\nimport LocalizedLink from '../global/LocalizedLink'\nimport noBundleImage from '../../assets/img/no-image-bundle.png'\nimport cameraOff from '../../assets/img/icons/camera-off.svg'\nimport DisplayNaturalStoneOrigin from '../catalog/rectangleResult/displays/DisplayNaturalStoneOrigin'\nimport { rejectionCodeMap, getBundleRejectionCode } from './utils'\n\nclass LotGridCell extends React.Component {\n render() {\n const {\n product,\n centerId,\n defaultImage,\n lot,\n isAdmin,\n impersonatedBy,\n outlet,\n userType,\n width,\n length,\n surface,\n getMinimumValue,\n isLot,\n lotImage,\n maxQuantity,\n unit,\n lunit,\n setQuantity,\n addToCart,\n canViewLotId,\n canViewAllLots,\n selectedProduct,\n intl,\n bundlesRejectionCodes\n } = this.props\n\n let _defaultImage = defaultImage\n if (!_defaultImage) {\n if (!isLot) _defaultImage = noBundleImage\n else _defaultImage = cameraOff\n }\n\n return (\n
\n
\n {lotImage ? (\n
\n \n {lot.qualityOutlet && (\n \n {(outlet || true) && (\n \n )}\n \n
\n \n ) : (\n
\n {!defaultImage && (\n \n \n )}\n \n )}\n\n {/*
*/}\n \n {\n lots && lots.map(l => {\n const key = l.bundleId ? l.bundleId : l.lotId\n return (\n
\n )\n\n}\n\nexport default LotsGrid\n","import React from 'react'\nimport Alert from './Alerts'\n\n\nconst CloseableAlerts = ({ alerts, status, onClose }) => {\n\n if (alerts) {\n return (\n 
\n }){kind=icon}
}\n {options[selected].name}\n }){kind=icon}
}\n {/*