{"version":3,"sources":["webpack:///./src/templates/Property/PropertyFeatures.tsx"],"names":["PropertyFeatures","data","pageData","useState","device","setDevice","property","pageContext","drawer","showDrawer","brand","details","logoBrand","getCorrectLogoBrand","Images","amenities","images","videos","Amenities","useEffect","useDevice","active","className","id","style","background","backgroundSize","src","alt","imageLogo","Mesa","Fold","isDesktop","isTablet","title","isMobile","splitToChunks","slice","map","item","index","key","amenity","i","name","length","onClick","targetBanner","onClose","animationDelay","description"],"mappings":"4RA2IeA,UA3HU,SAACC,GACxB,IAAMC,EAAWD,EACjB,EAA4BE,mBAAS,IAA9BC,EAAP,KAAeC,EAAf,KACQC,EAAaJ,EAASK,YAAtBD,SACR,EAA6BH,oBAAS,GAA/BK,EAAP,KAAeC,EAAf,KACQC,EAAUJ,EAASK,QAAnBD,MAEFE,EAAYC,YAAoBH,GAEhCI,EAASR,EAASS,UAAT,sBAAyBT,EAASS,UAAUC,QAA5C,YAAuDV,EAASS,UAAUE,SAAU,GAC7FC,EAAY,YAAIZ,EAASS,UAAUA,WAazC,OAJAI,qBAAU,WACRd,EAAUe,iBACT,IAGD,oCACE,kBAAC,IAAD,CAAgBC,OAAQ,EAAGnB,SAAUA,GACnC,kBAAC,IAAD,CAAkBA,SAAUA,IAC5B,yBAAKoB,UAAU,yBACb,yBAAKA,UAAU,yBACb,yBACEA,UAAU,2BACVC,GAAG,0BACHC,MAAO,CACLC,WAAY,mGACPnB,EAASS,UAAUC,OAAO,GADrB,sBAEVU,eAAgB,UAGlB,yBAAKJ,UAAU,mBACb,yBAAKA,UAAU,cACb,yBAAKK,IAAKf,EAAWgB,IAAI,gBAE3B,yBAAKN,UAAU,yBACb,yBAAKK,IAAKrB,EAASK,QAAQkB,UAAWD,IAAI,mBAG5C,yBAAKN,UAAU,4DACb,yBAAKK,IAAKG,IAAMF,IAAI,YAAYN,UAAU,eAC1C,yBAAKK,IAAKI,IAAMH,IAAI,YAAYN,UAAU,cAC1C,yBAAKA,UAAU,qBACZlB,EAAO4B,WAAa5B,EAAO6B,SAAW,4BAAK3B,EAASS,UAAUmB,OAAc,KAC7E,+BAAQ5B,EAASS,UAAUJ,cAMrC,yBAAKW,UAAU,6BACb,yBAAKA,UAAU,2BACb,yBAAKA,UAAU,wBACb,yBAAKK,IAAKf,EAAWgB,IAAI,aAAaN,UAAU,iBAChD,yBAAKK,IAAKrB,EAASK,QAAQkB,UAAWP,UAAU,oBAAoBM,IAAI,yBAE1E,yBAAKN,UAAU,cACZlB,EAAO+B,SAAW,4BAAK7B,EAASS,UAAUmB,OAAc,KACzD,2BAAI5B,EAASS,UAAUJ,WAG3B,yBAAKW,UAAU,gCACb,yCAEA,yBAAKA,UAAU,mBACZc,YAAclB,EAAUmB,MAAM,EAAG,GAAI,GAAGC,KAAI,SAACC,EAAWC,GACvD,OACE,yBAAKlB,UAAU,gBAAgBmB,IAAKD,GACjCD,EAAKD,KAAI,SAACI,EAAcC,GACvB,OACE,0BAAMF,IAAKE,GACT,uBAAGrB,UAAU,uBADf,IACwCoB,EAAQE,cAS3D1B,EAAU2B,OAAS,GAClB,0BAAMvB,UAAU,iBAAiBwB,QAzE5B,WACjBrC,GAAW,KAwEC,YACYS,EAAU2B,OADtB,eAMJ,kBAAC,IAAD,CAAgBE,aAAa,0BAA0B/B,OAAQF,MAGlEN,GACC,kBAAC,IAAD,CAAQwC,QAtFI,WAClBvC,GAAW,KAsFH,yBAAKa,UAAU,yBACb,yCAECJ,EAAUoB,KAAI,SAACC,EAAWC,GACzB,OACE,yBAAKC,IAAKD,EAAOlB,UAAU,mBACzB,yBAAKA,UAAU,eAAeE,MAAO,CAAEyB,eAAgB,MAAKT,EAAQ,GAAf,MACnD,uBAAGlB,UAAU,uBACb,6BACE,8BAAOiB,EAAKK,MACZ,+BAAQL,EAAKW","file":"component---src-templates-property-property-features-tsx-6980864f08b0364715da.js","sourcesContent":["import React, { useEffect, useState } from 'react'\n\nimport './Property.scss'\nimport './PropertyOverview.scss'\n\nimport PropertyLayout from '../../components/Layout/PropertyLayout'\nimport PropertyBaseMenu from '../../components/PropertyBaseMenu/PropertyBaseMenu'\nimport PropertySlider from '../../components/PropertySlider/PropertySlider'\nimport { splitToChunks } from '../../components/Helpers/helpers'\nimport Drawer from '../../components/Drawer/Drawer'\n\nimport Fold from '../../assets/images/fold.png'\nimport Mesa from '../../assets/svg/mesa.svg'\nimport { getCorrectLogoBrand } from '../../utils/getCorrectLogoBrand'\nimport { DeviceState, useDevice } from '../../utils/checkScreen'\n\nconst PropertyFeatures = (data: any): JSX.Element => {\n  const pageData = data\n  const [device, setDevice] = useState({} as DeviceState)\n  const { property } = pageData.pageContext\n  const [drawer, showDrawer] = useState(false)\n  const { brand } = property.details\n\n  const logoBrand = getCorrectLogoBrand(brand)\n\n  const Images = property.amenities ? [...property.amenities.images, ...property.amenities.videos] : []\n  const Amenities = [...property.amenities.amenities]\n\n  const closeDrawer = (): void => {\n    showDrawer(false)\n  }\n  const openDrawer = (): void => {\n    showDrawer(true)\n  }\n\n  useEffect(() => {\n    setDevice(useDevice())\n  }, [])\n\n  return (\n    <>\n      <PropertyLayout active={4} pageData={pageData}>\n        <PropertyBaseMenu pageData={pageData} />\n        <div className=\"property-page-content\">\n          <div className=\"poperty-overview-page\">\n            <div\n              className=\"property-overview-banner\"\n              id=\"project-overview-banner\"\n              style={{\n                background: `linear-gradient(to right, rgba(26, 25, 25, 0.656), rgba(255, 255, 255, 0)),\n              url('${property.amenities.images[0]}') center no-repeat`,\n                backgroundSize: 'cover'\n              }}\n            >\n              <div className=\"content-wrapper\">\n                <div className=\"brand-logo\">\n                  <img src={logoBrand} alt=\"brand-logo\" />\n                </div>\n                <div className=\"property-logo fade-in\">\n                  <img src={property.details.imageLogo} alt=\"property logo\" />\n                </div>\n\n                <div className=\"page-fold web-view-page-fold no-price features-page-fold\">\n                  <img src={Mesa} alt=\"page fold\" className=\"page-shape\" />\n                  <img src={Fold} alt=\"edge fold\" className=\"edge-fold\" />\n                  <div className=\"page-fold-content\">\n                    {device.isDesktop || device.isTablet ? <h1>{property.amenities.title}</h1> : null}\n                    <small>{property.amenities.details}</small>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          <div className=\"property-overview-content\">\n            <div className=\"mobile-property-context\">\n              <div className=\"property-logo-mobile\">\n                <img src={logoBrand} alt=\"brand-logo\" className=\"x-brand-logo\" />\n                <img src={property.details.imageLogo} className=\"mobile-brand-logo\" alt=\"property-brand-logo\" />\n              </div>\n              <div className=\"type-title\">\n                {device.isMobile ? <h1>{property.amenities.title}</h1> : null}\n                <p>{property.amenities.details}</p>\n              </div>\n            </div>\n            <div className=\"property-text amenities-text\">\n              <h3>Amenities</h3>\n\n              <div className=\"amenities-chunk\">\n                {splitToChunks(Amenities.slice(0, 4), 2).map((item: any, index: any) => {\n                  return (\n                    <div className=\"amenities-row\" key={index}>\n                      {item.map((amenity: any, i: any) => {\n                        return (\n                          <span key={i}>\n                            <i className=\"la la-check-circle\" /> {amenity.name}\n                          </span>\n                        )\n                      })}\n                    </div>\n                  )\n                })}\n              </div>\n\n              {Amenities.length > 4 && (\n                <span className=\"show-amenities\" onClick={openDrawer}>\n                  Show all {Amenities.length} amenities\n                </span>\n              )}\n            </div>\n\n            <PropertySlider targetBanner=\"project-overview-banner\" images={Images} />\n          </div>\n        </div>\n        {drawer && (\n          <Drawer onClose={closeDrawer}>\n            <div className=\"amenities-drawer-list\">\n              <h3>Amenities</h3>\n\n              {Amenities.map((item: any, index: number) => {\n                return (\n                  <div key={index} className=\"amenities-items\">\n                    <div className=\"item fade-in\" style={{ animationDelay: `0.${index + 2}s` }}>\n                      <i className=\"la la-check-circle\" />\n                      <div>\n                        <span>{item.name}</span>\n                        <small>{item.description}</small>\n                      </div>\n                    </div>\n                  </div>\n                )\n              })}\n            </div>\n          </Drawer>\n        )}\n      </PropertyLayout>\n    </>\n  )\n}\n\nexport default PropertyFeatures\n"],"sourceRoot":""}