\n
\n \n
\n \n \n
\n 404
\n{t('PageNotFoundDescription')}
\n\n
\n {showSecondColumn && (\n \n
\n )}\n \n );\n};\n\nHeroBanner.propTypes = props;\n\nexport default withSettingsContext(withTranslation()(HeroBanner));\n","import PropTypes from 'prop-types';\n\nexport const props = {\n t: PropTypes.func,\n title: PropTypes.string,\n items: PropTypes.array,\n className: PropTypes.string,\n settings: PropTypes.object,\n slideHeight: PropTypes.string,\n slideMobileHeight: PropTypes.string,\n quotedColor: PropTypes.string,\n quotedMobileColor: PropTypes.string,\n dotsColor: PropTypes.string,\n dotsSize: PropTypes.string,\n sliderCustomSettings: PropTypes.object,\n};\n","import style from 'styled-components';\nimport styled from 'styled-components';\nimport { LazyLoadImage } from 'react-lazy-load-image-component';\n\nexport const StyledLazyLoadImage = styled(LazyLoadImage)`\n width: 100%;\n height: ${props => props.slideHeight || '600px'};\n object-fit: cover;\n object-position: center right;\n\n @media only screen and (max-width: ${props => props.theme.screens.md}) {\n height: ${props => props.slideMobileHeight || '250px'};\n }\n`;\n\nexport const StyledSlider = style.section`\n margin-right: -15px;\n margin-left: -15px; \n\n @media only screen and (max-width: ${props => props.theme.screens.md}){\n display: flex;\n flex-direction: column;\n }\n\n .slider{\n height: ${props => props.slideHeight || '600px'};\n z-index: 0;\n order: 1;\n overflow: hidden;\n\n @media only screen and (max-width: ${props => props.theme.screens.md}){\n height: ${props => props.slideMobileHeight || '250px'};\n \n }\n }\n .row{\n order: 2;\n }\n .home-form {\n position: absolute;\n z-index: 1;\n max-width: fit-content;\n \n @media only screen and (max-width: 1800px) {\n flex: auto !important;\n }\n @media only screen and (max-width: ${props => props.theme.screens.md}){\n position: relative; \n padding: 0;\n margin-top: 2rem !important;\n\n .quoted {\n color: ${props => props.quotedMobileColor || props.theme.font.colors.primary};\n text-align: center; \n border-bottom: 1px solid #f2f2f2;\n width: 87%;\n margin: auto;\n }\n form {\n box-shadow: 0px 8px 11px rgba(0,0,0,0.05);\n }\n }\n }\n .quoted {\n color: ${props => props.quotedColor || '#fff'};\n }\n\n .lazy-load-image-background.blur.lazy-load-image-loaded {\n width: 100% !important;\n }\n\n .slick-dots {\n bottom: 25px;\n\n li button:before {\n color: ${props => props.dotsColor || '#fff'};\n font-size: ${props => props.dotsSize || '11px'};\n }\n @media only screen and (max-width: ${props => props.theme.screens.md}){\n bottom: 15px;\n\n li button:before {\n font-size: 9px;\n }\n }\n }\n`;\n\nexport const StyledItem = style.div`\n width: 100%;\n background-image: url(${props => props['data-src'] || ''});\n background-size: cover;\n height: ${props => props.slideHeight || '600px'};\n background-position: center right;\n\n @media only screen and (max-width: ${props => props.theme.screens.md}){\n height: ${props => props.slideMobileHeight || '250px'};\n \n }\n`;\n","import React from 'react';\nimport { props } from './SliderComponent.prop';\nimport Slider from 'react-slick';\nimport { StyledSlider, StyledItem, StyledLazyLoadImage } from './SliderComponent.styled';\nimport { withTranslation } from 'react-i18next';\nimport { CompositeComponent, Title } from 'components/';\nimport { Link } from 'react-router-dom';\nimport { tt } from 'utils/translationHelper';\n\nconst sliderSettings = {\n dots: true,\n infinite: false,\n slidesToScroll: 1,\n slidesToShow: 1,\n autoplay: true,\n adaptiveHeight: false,\n responsive: [\n {\n breakpoint: 1000,\n settings: {\n slidesToShow: 1,\n },\n },\n ],\n};\n\nclass SliderComponent extends React.Component {\n static propTypes = props;\n\n constructor(props) {\n super(props);\n this.state = {\n isMobile: false,\n };\n this.handleResize = this.handleResize.bind(this);\n this.itemsRef = [];\n }\n\n handleResize() {\n const isMobile = window.innerWidth <= 600;\n this.setState({ isMobile });\n }\n\n setContentPosition = () => {\n switch (this.props.contentPosition) {\n case 'right':\n return 'justify-content-end';\n case 'center':\n return 'justify-content-center';\n default:\n return 'justify-content-start';\n }\n };\n\n componentDidMount() {\n window.addEventListener('resize', this.handleResize);\n this.handleResize();\n this.itemsRef.forEach(itemRef => {\n if (itemRef) {\n const itemSrc = itemRef.getAttribute('data-src');\n const observer = new IntersectionObserver(\n entries => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n // Load the background image\n itemRef.style.backgroundImage = `url(${itemSrc})`;\n observer.unobserve(entry.target);\n }\n });\n },\n { threshold: 0.9 },\n );\n observer.observe(itemRef);\n }\n });\n }\n\n componentWillUnmount() {\n window.removeEventListener('resize', this.handleResize);\n }\n\n render() {\n const {\n t,\n items,\n className,\n type,\n title,\n italic,\n weight,\n slideHeight,\n quotedColor,\n dotsColor,\n dotsSize,\n slideMobileHeight,\n quotedMobileColor,\n sliderCustomSettings,\n } = this.props;\n\n const { isMobile } = this.state;\n\n const settings = {\n ...sliderSettings,\n ...(sliderCustomSettings ? sliderCustomSettings : {}),\n };\n\n return (\n \n
\n \n
\n \n
\n \n \n {this.state.loading ? (\n \n \n ))\n )}\n \n
\n \n );\n }\n}\n\nPromotions.propTypes = props;\nexport default withSettingsContext(withTranslation()(Promotions));\n","import Promociones from './Promociones';\nimport { connect } from 'react-redux';\nimport { withRouter } from 'react-router-dom';\nimport { fetchPromotions } from 'actions';\n\nconst mapStateToProps = ({ global }) => ({\n listPromotions: global.listPromotions,\n});\n\nexport default withRouter(\n connect(mapStateToProps, {\n fetchPromotions,\n })(Promociones),\n);\n","import PropTypes from 'prop-types';\n\nexport const props = {\n title: PropTypes.string.isRequired,\n subTitle: PropTypes.string,\n leftTitle: PropTypes.string,\n leftStrongTitle: PropTypes.string,\n leftLinkText: PropTypes.string,\n leftLinkUrl: PropTypes.string,\n leftLinkHover: PropTypes.string,\n items: PropTypes.array.isRequired,\n};\n","import style from 'styled-components';\n\nexport const StyledPagaEnCuotas = style.section`\n background: ${(props) => props.bg || props.theme.colors.bg};\n text-align: center;\n overflow-x: hidden;\n\n .home-title {\n margin-top: 5em;\n line-height: 1.5;\n\n h1{\n margin-bottom:0px;\n }\n\n p {\n line-height: 22px;\n font-size: 21px;\n font-weight: 400;\n margin-bottom: 1rem;\n }\n }\n`;\n\nexport const StyledBanksSection = style.section`\n\n border-bottom: ${(props) => (props.showBorder ? '3px' : 0)} solid ${(props) =>\n props.borderColor || props.theme.colors.primary};\n padding-bottom: ${(props) => (props.showBorder ? '30px' : 0)};\n\n h4 {\n font-size: 20px;\n font-style: normal;\n font-weight: 400;\n margin-top: 2em;\n\n strong {\n font-weight: 700;\n }\n }\n p{\n text-transform: uppercase;\n font-size: 0.8rem;\n padding: 0 30px;\n }\n\n a {\n font-size: 13px !important;\n color: ${(props) => props.theme.font.colors.third};\n transition: all .2s;\n }\n\n a:hover {\n text-decoration: none;\n color: ${(props) => props.leftLinkHover || props.theme.font.colors.third} !important; \n }\n\n img {\n cursor: grab;\n }\n\n div.img {\n height: fit-content;\n text-align: center;\n height: 100px;\n width: 150px;\n background-size: contain;\n background-repeat: no-repeat;\n background-position: center center;\n margin: auto;\n }\n\n .slick-track{\n margin: auto auto;\n }\n\n .slick-next{\n right: -10px;\n }\n \n .slick-prev{\n left: -10px;\n }\n\n .slick-next:before {\n content: \"\\f105\" !important;\n font-family: 'Font Awesome 5 Free', 'FontAwesome';\n color: #ccc\n \n }\n\n .slick-prev:before {\n content: \"\\f104\" !important;\n font-family: 'Font Awesome 5 Free', 'FontAwesome';\n color: #ccc\n }\n\n`;\n","import React from 'react';\nimport { props } from '../PagaEnCuotas.props';\nimport { StyledPagaEnCuotas, StyledBanksSection } from './index.styles';\nimport Slider from 'react-slick';\nimport { TranslatedComponent, Title } from 'components/';\nimport { withTranslation } from 'react-i18next';\n\nconst sliderSettings = {\n dots: false,\n infinite: false,\n slidesToScroll: 1,\n slidesToShow: 6,\n autoplay: true,\n responsive: [\n {\n breakpoint: 1000,\n settings: {\n slidesToShow: 4,\n },\n },\n {\n breakpoint: 770,\n settings: {\n slidesToShow: 3,\n },\n },\n {\n breakpoint: 600,\n settings: {\n slidesToShow: 2,\n },\n },\n ],\n};\n\nclass DefaultPagaEnCuotas extends TranslatedComponent {\n static propTypes = props;\n\n render() {\n const {\n title,\n titleType,\n subTitle,\n leftTitle,\n leftStrongTitle,\n leftLinkText,\n leftLinkUrl,\n items,\n showBorder,\n borderColor,\n leftLinkHover,\n hideTitle,\n } = this.props;\n return (\n <>\n {hideTitle === true ? (\n ''\n ) : (\n \n
\n {this.tt(subTitle)}
\n\n \n {this.tt(leftTitle)}\n
\n \n {this.tt(leftLinkText)}\n \n
\n )}\n \n {this.tt(leftTitle)}\n
\n {this.tt(leftStrongTitle)}\n
\n \n {this.tt(leftLinkText)}\n \n \n \n {items.map((promo, key) => (\n \n
\n \n \n );\n }\n}\n\nexport default withTranslation()(DefaultPagaEnCuotas);\n","import style from 'styled-components';\n\nexport const StyledPagaEnCuotas = style.section`\n background: ${props => props.bg || props.theme.colors.bg};\n text-align: center;\n overflow-x: hidden;\n\n .home-title {\n margin-top: 5em;\n line-height: 1.5;\n position:relative;\n left:50px;\n\n h1{\n text-align:left;\n font-size:30px !important;\n font-weight:400;\n color:${props => props.theme.colors.primary};\n }\n\n p {\n line-height: 22px;\n font-size: 21px;\n font-weight: 400;\n margin-bottom: 1rem;\n }\n\n @media (max-width: ${props => props.theme.screens.xs}){\n padding:10px;\n left:0;\n }\n \n @media(max-width:767px){\n h1{\n font-size:25px !important;\n }\n }\n`;\n\nexport const StyledBanksSection = style.section`\n\n border-bottom: ${props => (props.showBorder ? '3px' : 0)} solid ${props =>\n props.borderColor || props.theme.colors.primary};\n padding-bottom: 100px;\n \n h4 {\n margin-bottom:50px;\n text-align:left;\n font-size:20px !important;\n font-weight:400;\n color:${props => props.theme.colors.primary};\n\n strong {\n font-weight: 700;\n }\n }\n p{\n font-size: 0.9rem;\n padding: 0 30px;\n text-align:left !important;\n color:#2E2D35;\n }\n\n .textbold{\n font-weight:bold;\n font-size:17px;\n text-align:center !important;\n border:1px solid #2E2D35;\n border-radius: 20px;\n margin: 15px 30px;\n padding:2px 0;\n }\n\n .textbold:hover{\n background: #ECEEF0;\n border:1px solid ${props => props.theme.colors.primary};\n transition: 0.2s\n }\n\n a {\n font-size: 13px !important;\n color: ${props => props.theme.font.colors.third};\n transition: all .2s;\n }\n\n a:hover {\n text-decoration: none;\n color: ${props => props.leftLinkHover || props.theme.colors.primary} !important; \n }\n\n img {\n cursor: grab;\n }\n\n div.img {\n height: fit-content;\n text-align: center;\n height: 100px;\n width: 170px;\n background-size: contain;\n background-repeat: no-repeat;\n background-position: center center;\n margin: 0 auto;\n\n img{\n width:100%;\n }\n }\n \n .slick-track{\n margin: auto auto;\n }\n\n .slick-next{\n right: -10px;\n }\n \n .slick-prev{\n left: -10px;\n }\n\n .slick-next:before {\n content: \"\\f105\" !important;\n font-family: 'Font Awesome 5 Free', 'FontAwesome';\n color: #ccc\n \n }\n\n .slick-prev:before {\n content: \"\\f104\" !important;\n font-family: 'Font Awesome 5 Free', 'FontAwesome';\n color: #ccc\n }\n\n \n@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) {\n .home-title {\n left:30px;\n}\n}\n`;\n","import React from 'react';\nimport { props } from '../PagaEnCuotas.props';\nimport { StyledPagaEnCuotas, StyledBanksSection } from './index.styles';\nimport Slider from 'react-slick';\nimport { TranslatedComponent, Title } from 'components/';\nimport { withTranslation } from 'react-i18next';\nimport { LazyLoadImage } from 'react-lazy-load-image-component';\nimport 'react-lazy-load-image-component/src/effects/blur.css';\n\nclass ModernPagaEnCuotas extends TranslatedComponent {\n static propTypes = props;\n\n render() {\n const {\n title,\n titleType,\n subTitle,\n leftLinkText,\n leftLinkUrl,\n items,\n showBorder,\n borderColor,\n leftLinkHover,\n hideTitle,\n } = this.props;\n\n const sliderSettings = {\n dots: true,\n infinite: true,\n slidesToScroll: 1,\n slidesToShow: items.length < 6 ? items.length : 6,\n autoplay: true,\n responsive: [\n {\n breakpoint: 1000,\n settings: {\n slidesToShow: 4,\n },\n },\n {\n breakpoint: 770,\n settings: {\n slidesToShow: 3,\n },\n },\n {\n breakpoint: 600,\n settings: {\n slidesToShow: 1,\n },\n },\n ],\n };\n\n return (\n <>\n {hideTitle === true ? (\n ''\n ) : (\n \n
\n ))}\n {this.tt(promo.name)}
}\n\n \n {items.map((promo, key) => (\n \n
\n \n \n );\n }\n}\n\nexport default withTranslation()(ModernPagaEnCuotas);\n","import React from 'react';\nimport { props } from './PagaEnCuotas.props';\nimport { TranslatedComponent } from 'components/';\nimport { withTranslation } from 'react-i18next';\nimport DefaultPagaEnCuotas from './Default';\nimport ModernPagaEnCuotas from './Modern';\nimport withSettingsContext from 'SettingsContext';\nimport { MODERN_THEME } from 'styled/constants';\n\nclass PagaEnCuotas extends TranslatedComponent {\n static propTypes = props;\n\n render() {\n return this.props.settings.theme.template === MODERN_THEME ? (\n \n
\n ))}\n \n
\n \n
\n );\n }\n}\n\nconst mapStateToProps = ({ siteConfiguration }) => ({\n settings: siteConfiguration.settings,\n});\n\nexport default connect(mapStateToProps, { setSearchCarParams })(\n withRouter(withTranslation()(DefaultFlotaItem)),\n);\n","import PropTypes from 'prop-types';\n\nexport const props = {\n model: PropTypes.shape({\n imagePath: PropTypes.string,\n brand: PropTypes.shape({ name: PropTypes.string }),\n doors: PropTypes.number,\n category: PropTypes.shape({ name: PropTypes.string }),\n passengers: PropTypes.number,\n bigLuggage: PropTypes.number,\n smallLuggage: PropTypes.number,\n steering: PropTypes.string,\n gearbox: PropTypes.string,\n airConditioner: PropTypes.string,\n dailyPrice: PropTypes.number,\n name: PropTypes.string,\n multimedia: PropTypes.string,\n t: PropTypes.func,\n lowerPrice: PropTypes.number,\n }),\n prefixForNumeric: PropTypes.string,\n btnDisplay: PropTypes.string,\n oneSlide: PropTypes.bool,\n};\n\nexport const defaultProps = {\n showModelDetail: true,\n};\n","import React from 'react';\nimport { connect } from 'react-redux';\nimport { props } from './../FlotaItem.props';\nimport { withTranslation } from 'react-i18next';\nimport { withRouter, Route } from 'react-router-dom';\nimport { setSearchCarParams } from 'actions';\nimport { Btn, Title, Paragraph, NumberDisplay, ModelDetail } from 'components/';\nimport { tlink } from 'utils/translationHelper';\nimport { LazyLoadImage } from 'react-lazy-load-image-component';\nimport 'react-lazy-load-image-component/src/effects/blur.css';\n\nclass ModernFlotaItem extends React.Component {\n static propTypes = props;\n\n render() {\n const {\n t,\n model,\n currency,\n handleButtonClick,\n getCategoryOrGroupName,\n getCarImage,\n featureFlags,\n prefixForNumeric,\n showModelDetail,\n distanceUnit,\n } = this.props;\n\n return (\n \n
\n \n
\n\n \n
\n \n {featureFlags &&\n featureFlags.showFleetPrice &&\n (!featureFlags.fleetUseLowerPrice && model.dailyPrice > 0 ? (\n
\n \n {t('from')} {currency != null ? currency.prefix : 'ARS'} \n \n
\n {t('from')} {currency != null ? currency.prefix : 'ARS'} \n \n
\n
\n );\n }\n}\n\nconst mapStateToProps = ({ siteConfiguration }) => ({\n settings: siteConfiguration.settings,\n});\n\nexport default connect(mapStateToProps, { setSearchCarParams })(\n withRouter(withTranslation()(ModernFlotaItem)),\n);\n","import React from 'react';\nimport { connect } from 'react-redux';\nimport { withRouter } from 'react-router-dom';\nimport { tlink } from '../../../../utils/translationHelper';\nimport { setSearchCarParams } from 'actions';\nimport { getSippByCategory } from '../../../../utils/categoryGroupHelper';\nimport DefaultFlotaItem from './Default';\nimport ModernFlotaItem from './Modern';\nimport { MODERN_THEME } from 'styled/constants';\nimport { props, defaultProps } from './FlotaItem.props';\nimport { withTranslation } from 'react-i18next';\n\nclass FlotaItem extends React.Component {\n static propTypes = props;\n static defaultProps = defaultProps;\n constructor() {\n super();\n this.handleButtonClick = this.handleButtonClick.bind(this);\n this.getCategoryOrGroupName = this.getCategoryOrGroupName.bind(this);\n this.getCarImage = this.getCarImage.bind(this);\n }\n\n handleButtonClick = () => {\n const { history, bookLink, t, i18n, setSearchCarParams, model, settings } = this.props;\n setSearchCarParams({ categories: [model.category.id] });\n\n history.push(tlink(bookLink, t, i18n, null, settings.configurations.langConfig));\n window.scrollTo(0, 0);\n };\n\n getCategoryOrGroupName = carModel => {\n const {\n showSipp,\n settings: {\n configurations: { categoryGroups },\n },\n } = this.props;\n if (!categoryGroups) return carModel.category.name;\n\n const categoryGroupName = getSippByCategory(categoryGroups, carModel.category).toUpperCase();\n return showSipp && carModel.sipp\n ? `${categoryGroupName} - ${carModel.sipp}`\n : categoryGroupName;\n };\n\n getCarImage = model => {\n if (model.imagePath) return model.imagePath;\n return model.category.imagePath;\n };\n\n render() {\n const {\n model,\n settings: { currency, theme, featureFlags },\n prefixForNumeric,\n oneSlide,\n showModelDetail,\n distanceUnit,\n } = this.props;\n\n return theme.template === MODERN_THEME ? (\n \n
\n \n
\n\n \n
\n \n {featureFlags &&\n featureFlags.showFleetPrice &&\n (!featureFlags.fleetUseLowerPrice & (model.dailyPrice > 0) ? (\n
\n \n {t('from')} {currency != null ? currency.prefix : 'ARS'} \n \n
\n {t('from')} {currency != null ? currency.prefix : 'ARS'} \n \n
\n {!disableTitle && (\n <>\n
\n \n {loading ? (\n \n {listCategories && showOnlyDefaultModels\n ? flotaItems.map((model, index) => (\n
\n \n {!disableTitle &&
\n \n {loading ? (\n \n {listCategories && showOnlyDefaultModels\n ? flotaItems.map((model, index) => (\n
\n \n
\n )}\n \n
\n \n );\n }\n}\n\nexport default withSettingsContext(withTranslation()(CalidadServicio));\n","import CalidadServicio from './CalidadServicio';\nexport default CalidadServicio;\n","import style from 'styled-components';\n\nexport const StyledSection = style.section`\nbackground: ${props => (props.background ? `url(${props.background}) no-repeat` : `#fff`)};\nbackground-size: cover;\nmin-height: 600px;\ndisplay: flex;\njustify-content: ${props => (props.justifyContent || `center`)};\nalign-items: ${props => (props.alignContent || `center`)};\n\n .call-to-action-content {\n align-items: ${props => (props.justifyContent || `center`)};\n padding: 1.5rem;\n flex-direction: column;\n display: flex;\n }\n\n @media only screen and (max-width: 780px)\n {\n align-items: ${props => (props.alignMobileContent || `center`)};\n justify-content: ${props => (props.justifyMobileContent || `center`)};\n\n .call-to-action-content {\n align-items: ${props => (props.justifyMobileContent || `center`)};\n display: flex;\n flex-direction: column;\n width: 100%;\n }\n}\n\n`;","import PropTypes from 'prop-types';\n\nexport const props = {\n background: PropTypes.string,\n title: PropTypes.string,\n titleFontWeight: PropTypes.string,\n titleFontSize: PropTypes.string,\n titleColor: PropTypes.string,\n subTitle: PropTypes.string,\n subTitleFontWeight: PropTypes.string,\n subTitleFontSize: PropTypes.string,\n subTitleColor: PropTypes.string,\n buttonText: PropTypes.string,\n buttonLink: PropTypes.string,\n buttonSize: PropTypes.string,\n buttonIcon: PropTypes.string,\n buttonIconColor: PropTypes.string,\n buttonIconSize: PropTypes.string,\n buttonVariant: PropTypes.string,\n mobileBackground: PropTypes.string,\n titleType: PropTypes.string,\n subtitleType: PropTypes.string,\n contentAlignment: PropTypes.string,\n t: PropTypes.func,\n noParallax: PropTypes.bool,\n showSecondColumn: PropTypes.bool,\n};\n","import CallToAction from \"./CallToAction\";\nexport default CallToAction;","import React from 'react';\nimport { StyledSection } from './CallToAction.styled';\nimport { props } from './CallToAction.props';\nimport { Title, Btn } from 'components/';\nimport { withTranslation } from 'react-i18next';\nimport { useTranslation } from 'react-i18next';\nimport withSettingsContext from 'SettingsContext';\nimport useWindowDimensions from 'utils/windowHelper';\nimport { tt } from 'utils/translationHelper';\n\nconst CallToAction = props => {\n\n const {\n title,\n titleFontWeight,\n titleFontSize,\n titleColor,\n subTitle,\n subTitleFontWeight,\n subTitleFontSize,\n subTitleColor,\n buttonText,\n buttonLink,\n selfLink,\n background,\n mobileBackground,\n titleType,\n subtitleType,\n justifyContent,\n alignContent,\n alignMobileContent,\n noParallax,\n justifyMobileContent,\n } = props;\n\n const { t } = useTranslation();\n\n const setParalax = noParallax ? 'row' : 'row row-p parallax pb-5';\n const { width } = useWindowDimensions();\n const isMobile = width < 768;\n\n return (\n \n {stars.map(id => (\n \n ))}\n
\n {this.tt(text)}
\n{this.tt(statement)}
\n \n )}\n\n \n
\n \n );\n};\n\nCallToAction.propTypes = props;\n\nexport default withSettingsContext(withTranslation()(CallToAction));\n","import PropTypes from 'prop-types';\n\nexport const props = {\n title: PropTypes.string.isRequired,\n subTitle: PropTypes.string,\n leftStrongTitle: PropTypes.string,\n leftLinkHover: PropTypes.string,\n items: PropTypes.array.isRequired,\n};\n","import style from 'styled-components';\n\nexport const StyledTitleRow = style.section`\n background: ${props => props.bg || props.theme.colors.bg};\n text-align: center;\n overflow-x: hidden;\n\n .home-title {\n margin-top: 5em;\n line-height: 1.5;\n position:relative;\n left:50px;\n\n h1{\n text-align:left;\n font-size:30px !important;\n font-weight:400;\n color:${props => props.theme.colors.primary};\n }\n\n p {\n line-height: 22px;\n font-size: 21px;\n font-weight: 400;\n margin-bottom: 1rem;\n }\n\n @media (max-width: ${props => props.theme.screens.xs}){\n padding:10px;\n left:0;\n }\n\n @media(max-width:767px){\n h1{\n font-size:25px !important;\n }\n }\n\n @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) {\n h1 {\n position:relative;\n right:25px !important;\n }\n }\n`;\n\nexport const StyledTestimoniesWrapper = style.section`\n\n border-bottom: ${props => (props.showBorder ? '3px' : 0)} solid ${props =>\n props.borderColor || props.theme.colors.primary};\n padding-bottom: 100px;\n background-image: url(${props => props.backgroundImage});\n background-repeat: no-repeat;\n background-size: cover;\n\n .oneSlide {\n padding: 1rem;\n background-color: ${props => props.theme.colors.primaryTransparent };\n border-radius: 20px;\n\n .slick-dots {\n bottom: -10px;\n\n li button:before{\n color: ${props => props.theme.font.colors.secondary};\n }\n } \n\n p {\n color: ${props => props.theme.font.colors.secondary};\n text-align:center!important;\n }\n }\n \n h4 {\n margin-bottom:50px;\n text-align:left;\n font-size:20px !important;\n font-weight:400;\n color:${props => props.theme.colors.primary};\n\n strong {\n font-weight: 700;\n }\n }\n p{\n font-size: 0.9rem;\n padding: 0 30px;\n text-align:left !important;\n color:#656970;\n }\n\n .source{\n font-style: italic;\n text-align: center!important;\n }\n\n .textbold{\n font-weight:bold;\n font-size:17px;\n text-align:center !important;\n border-radius: 20px;\n margin: 15px 30px;\n padding:2px 0;\n }\n\n .textbold:hover{\n color:${props => props.theme.colors.primary};\n transition: 0.2s\n }\n\n a {\n font-size: 13px !important;\n color: ${props => props.theme.font.colors.third};\n transition: all .2s;\n }\n\n a:hover {\n text-decoration: none;\n color: ${props => props.leftLinkHover || props.theme.colors.primary} !important; \n }\n\n img {\n cursor: grab;\n }\n\n div.img {\n height: fit-content;\n text-align: center;\n height: 70px;\n width: 170px;\n background-size: contain;\n background-repeat: no-repeat;\n background-position: center center;\n margin: 0 auto;\n }\n \n\n div.face {\n height: fit-content;\n text-align: center;\n height: 90px;\n width: 160px;\n background-size: contain;\n background-repeat: no-repeat;\n background-position: center center;\n margin: 0 auto 10px;\n }\n\n .slick-track{\n margin: auto auto;\n }\n\n .slick-next{\n right: -10px;\n }\n \n .slick-prev{\n left: -10px;\n }\n\n .slick-next:before {\n content: \"\\f105\" !important;\n font-family: 'Font Awesome 5 Free', 'FontAwesome';\n color: #ccc\n \n }\n\n .slick-prev:before {\n content: \"\\f104\" !important;\n font-family: 'Font Awesome 5 Free', 'FontAwesome';\n color: #ccc\n }\n\n`;\n","import React from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { props } from './Testimonies.props';\nimport { StyledTitleRow, StyledTestimoniesWrapper } from './Testimonies.styled';\nimport Slider from 'react-slick';\nimport { Title } from 'components/';\nimport withSettingsContext from 'SettingsContext';\nimport { LazyLoadImage } from 'react-lazy-load-image-component';\nimport 'react-lazy-load-image-component/src/effects/blur.css';\nimport useWindowDimensions from 'utils/windowHelper';\n\nconst sliderSettings = {\n dots: true,\n infinite: true,\n slidesToScroll: 1,\n slidesToShow: 4,\n autoplay: true,\n responsive: [\n {\n breakpoint: 1000,\n settings: {\n slidesToShow: 4,\n },\n },\n {\n breakpoint: 770,\n settings: {\n slidesToShow: 3,\n },\n },\n {\n breakpoint: 600,\n settings: {\n slidesToShow: 1,\n },\n },\n ],\n};\n\nconst Testimonies = ({\n title,\n titleType,\n subTitle,\n items,\n showBorder,\n borderColor,\n leftLinkHover,\n hideTitle,\n sliderCustomSettings,\n backgroundImage,\n mobileBackgroundImage,\n}) => {\n const { t } = useTranslation();\n\n const settings = {\n ...sliderSettings,\n ...(sliderCustomSettings ? sliderCustomSettings : {}),\n };\n\n const { width } = useWindowDimensions();\n const isMobile = width < 600;\n\n return (\n <>\n {!hideTitle && (\n \n
\n {t(subTitle)}
\n\n \n {items.map((promo, key) => (\n \n
\n \n \n );\n};\n\nTestimonies.propTypes = props;\n\nexport default withSettingsContext(Testimonies);\n","import Testimonies from './Testimonies';\nexport default Testimonies;\n","import PropTypes from 'prop-types';\n\nexport const props = {\n listPromotions: PropTypes.array,\n};\n","import style from 'styled-components';\n\nexport const StyledPromocionesSection = style.div`\n\tbackground: ${props => (props.background ? `url(${props.background}) no-repeat` : `white`)};\n min-height: 600px;\n padding-left: -15px;\n padding-right: -15px;\n \n h2 {\n margin-bottom: 16px;\n }\n\n h1 {\n margin-bottom: 8px;\n }\n\n p {\n font-size: 12px;\n }\n\n .no-promotion-text{\n font-size: 20px;\n text-align: center;\n }\n\n .card-promotion {\n padding:50px;\n\n &:hover {\n padding:45px;\n border-radius:12px;\n transition: all 0.2s ease 0s;\n } \n\n .card-promotion__img {\n span {\n display: flex!important;\n height: 100%!important;\n position: relative;\n img {\n max-width: 100%;\n height: auto;\n border-radius:12px;\n\n &:hover {\n box-shadow: rgb(45 62 80 / 35%) 0px 1px 6px 0px;\n border-radius:12px;\n }\n }\n }\n }\n }\n }\n\n @media (max-width: 768px) {\n .card-promotion {\n padding: 20px;\n }\n }\n`;\n","import style from 'styled-components';\n\nexport const StyledPromocionesModernSection = style.div`\nbackground: #FFF;\n min-height: 600px;\n padding-left: -15px;\n padding-right: -15px;\n \n h2 {\n margin-bottom: 16px;\n }\n \n .card-promotion {\n padding:50px;\n\n &:hover {\n padding:45px;\n border-radius:12px;\n transition: all 0.2s ease 0s;\n } \n\n .card-promotion__img {\n span {\n display: flex!important;\n height: 100%!important;\n position: relative;\n img {\n max-width: 100%;\n height: auto;\n border-radius:12px;\n\n &:hover {\n box-shadow: rgb(45 62 80 / 35%) 0px 1px 6px 0px;\n border-radius:12px;\n }\n }\n }\n }\n }\n }\n\n h4{\n font-size:21px;\n font-weight:bold;\n color:${props => props.theme.colors.primary};\n }\n\n h1 {\n margin-bottom: 8px;\n }\n\n p {\n font-size: 16px;\n }\n\n .no-promotion-text{\n font-size: 20px;\n text-align: center;\n }\n\n @media (max-width: ${props => props.theme.screens.xs}) {\n\n .card-promotion{\n padding:10px;\n }\n\n .card-promotion:hover{\n padding:12px;\n }\n \n }\n\n \n @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) {\n\n .card-promotion{\n padding:10px;\n }\n\n .card-promotion:hover{\n padding:12px;\n }\n \n }\n\n`;\n","import React from 'react';\nimport { connect } from 'react-redux';\nimport { props } from './PromocionesSection.props';\nimport { Title, Loading } from 'components/';\nimport { StyledPromocionesSection } from './PromocionesSection.styled';\nimport { StyledPromocionesModernSection } from './PromocionesSection.styled.modern';\nimport { MODERN_THEME } from 'styled/constants';\nimport { LazyLoadImage } from 'react-lazy-load-image-component';\nimport 'react-lazy-load-image-component/src/effects/blur.css';\n\nclass PromocionesSection extends React.Component {\n static propTypes = props;\n\n state = {\n loading: true,\n };\n\n async componentDidMount() {\n const { fetchPromotions, i18n } = this.props;\n\n await fetchPromotions(i18n.language);\n\n this.setState(prevState => ({\n ...prevState,\n loading: false,\n }));\n }\n\n noPromotionText() {\n const { t, noPromotionText } = this.props;\n return (\n \n
\n ))}\n \n
\n \n
\n\n {t(promo.customername) && (\n {t(promo.customername)}
\n )}\n {t(promo.source) && (\n{t(promo.source)}
\n )}\n {t(promo.name) &&{t(promo.name)}
}\n\n
\n );\n }\n\n getTemplateStyledComponent() {\n if (this.props.settings.theme.template === MODERN_THEME) {\n return StyledPromocionesModernSection;\n }\n return StyledPromocionesSection;\n }\n\n getColumnWidth() {\n if (this.props.settings.theme.template === MODERN_THEME) {\n return 'col-lg-6 col-md-6';\n }\n return 'col-lg-4 col-md-6';\n }\n\n getTitleSize() {\n if (this.props.settings.theme.template === MODERN_THEME) {\n return 21;\n }\n return 16;\n }\n\n render() {\n const { listPromotions, excludedPromotions, includedPromotions } = this.props;\n const StyledSection = this.getTemplateStyledComponent();\n\n let listPromotionsAux = listPromotions;\n\n if (\n listPromotionsAux != null &&\n listPromotionsAux.length > 0 &&\n includedPromotions !== undefined &&\n includedPromotions.length > 0\n ) {\n listPromotionsAux = listPromotions.filter(f => includedPromotions.includes(f.id));\n } else if (\n listPromotionsAux != null &&\n listPromotionsAux.length > 0 &&\n excludedPromotions !== undefined\n ) {\n listPromotionsAux = listPromotions.filter(f => !excludedPromotions.includes(f.id));\n } else {\n listPromotionsAux = listPromotions;\n }\n\n return (\n {t(noPromotionText || 'noPromotionsText')}
\n\n
\n \n \n
\n \n {this.state.loading ? (\n \n
\n ))\n )}\n \n
\n \n
\n {this.tt(item.name)}
\n{expanded ? fullDescription : collapsedDescription}
\n \n {fullDescription.length > descriptionMaxLength ? collapsedDescription : fullDescription}\n
\n )}\n {fullDescription.length > descriptionMaxLength && (\n \n
\n );\n }\n\n getService(service, additionals) {\n if (additionals && additionals.length > 0 && service.additionalId) {\n var additional = additionals.find(ad => ad.id === service.additionalId);\n\n return { ...additional, ...service };\n }\n\n return service;\n }\n\n getTemplateStyledComponent() {\n if (this.props.settings.theme.template === MODERN_THEME) {\n return StyledServiciosSectionModern;\n }\n return StyledServiciosSection;\n }\n\n render() {\n const {\n groups,\n listAdditionals,\n t,\n size,\n padding,\n sizeHover,\n borderRadius,\n seeLess,\n seeMore,\n descriptionMaxLength,\n descriptionCharsSplit,\n } = this.props;\n const StyledSection = this.getTemplateStyledComponent();\n\n if (this.state.loading) return {title}
\n\n {listAdditionals.map((service, j) => (\n
\n \n {this.GroupTitle(this.tt(group.name))}\n
\n ))}\n \n {group.services.map((service, j) => (\n
\n \n
\n \n {description.map((description, i) => (\n
\n {relatedRoutes && (\n \n
\n ))}\n \n {description.title && (\n
\n {description.img && (\n \n
\n )}\n \n
\n )}\n \n
\n \n
\n {this.tt(relatedRoutes.title)}
\n{this.tt(relatedRoutes.subtitle)}
\n\n {relatedRoutes.routes.map(item => (\n
\n \n
\n ))}\n {item.km}
\n\n {item.customLocation\n ? this.tt(item.location)\n : `${t('to')} ${item.location}`}\n
\n\n {offices.map((office, index) => (\n
\n \n
\n ))}\n \n
\n \n
\n {index === 0 && form !== false ? (\n \n {tt(office.address, t)}
\n {tt(office.hours.first, t)}
\n {tt(office.hours.second, t)}\n
- \n {office.contacts &&\n office.contacts.map((contact, i) => (\n
- \n \n {tt(contact.text, t)}\n \n \n ))}\n
\n
\n ) : (\n ''\n )}\n \n
\n
\n \n );\n };\n\n parseBillingFields = () => {\n const { t, listDocumentTypes } = this.props;\n const {\n paymentInfo: { billingDocumentType, documentId },\n billingDocInputFocus,\n formLoading,\n } = this.state;\n\n return (\n <>\n \n
\n {t('billingInformation.equalToContactInfo')}}\n />\n {this.parseBillingFields()}\n
\n {billingConditions && \n {t('billingInformation.title')}\n
\n {billingSubtitle &&{t(billingSubtitle)}
}\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
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n );\n };\n\n getCustomerInfo = () => {\n if (this.isPayingBooking()) return this.props.bookings.confirmation.customer;\n if (this.isPayingInfraction() && this.props.infractions.current) {\n return this.props.infractions.current.booking\n ? this.props.infractions.current.booking.customer\n : {};\n }\n };\n\n getPaymentMethods = async data => {\n const { bin } = data;\n const { mp } = this.state;\n const { results } = await mp.getPaymentMethods({ bin });\n let icon = '';\n\n if (!results || !results[0]) return;\n\n switch (results[0].id) {\n case 'visa':\n case 'debvisa':\n icon = 'fab fa-cc-visa';\n break;\n case 'amex':\n case 'american-express':\n icon = 'fab fab fa-cc-amex';\n break;\n case 'master':\n case 'debmaster':\n icon = 'fab fa-cc-mastercard';\n break;\n default:\n icon = 'far fa-credit-card';\n break;\n }\n this.setState(prevState => ({\n ...prevState,\n paymentInfo: {\n ...prevState.paymentInfo,\n paymentMethodID: results[0].id,\n bin,\n },\n cardIcon: icon,\n }));\n const issuers = await mp.getIssuers({\n paymentMethodId: results[0].id,\n bin,\n });\n this.issuersHandler(issuers);\n };\n\n render() {\n const {\n t,\n title,\n subtitle,\n script,\n paymentLegend,\n hideInstallmentLink,\n currentCurrency,\n defaultCurrency,\n webCurrency,\n installmentsHelperText,\n } = this.props;\n const {\n paymentInfo: { documentType, document, documents },\n docInputFocus,\n formLoading,\n formErrors,\n } = this.state;\n\n const publicToken = this.getPublicToken();\n if (!publicToken) return null;\n\n const applyExchangeRate = applyCurrencyExchangeRate(currentCurrency, webCurrency);\n\n const showExchangeMsg = applyExchangeRate;\n\n let returnFinalPriceOnly = true;\n\n let showInstalmentsLink = hideInstallmentLink !== undefined ? !hideInstallmentLink : true;\n\n let totalToPay = this.showTotalToPayWithInstallments(returnFinalPriceOnly);\n if (applyExchangeRate)\n totalToPay = getPriceWithExchangeRate(\n totalToPay,\n currentCurrency,\n defaultCurrency,\n webCurrency,\n );\n\n return (\n \n
\n \n
\n \n
\n \n
\n \n {\n this.setState({ billingDocInputFocus: true });\n },\n onBlur: () => {\n this.setState({ billingDocInputFocus: false });\n },\n }}\n legend={\n this.state.sampleBillingDocFormat\n ? t('billingInformation.fields.formatExpected', {\n format_expected: this.state.sampleBillingDocFormat,\n })\n : null\n }\n mask={\n !formLoading &&\n getDocumentMask(\n documentId,\n billingDocumentType,\n billingDocInputFocus,\n listDocumentTypes,\n )\n }\n />\n
\n \n
\n \n
\n \n
\n {tt(subtitle, t)}
\n\n
\n \n
\n \n
\n \n
\n \n \n {t('CompraSegura')}\n \n {t('SafeTransactionsSite')} \n
\n \n \n {`${t('chargedPaymentMsg')} ${\n currentCurrency?.isoCode\n } ${totalToPay.toFixed(2)} `}\n \n )}\n
\n \n
\n
\n {showExchangeMsg && (\n \n {this.showOrderIdentifier()}\n
\n\n \n {t('totalToPay')} {this.showTotalToPayWithInstallments()}\n \n
\n\n
\n
\n \n \n
\n \n {showInstalmentsLink && (\n \n \n {t('promociones')}\n \n )}\n
\n \n
\n \n
\n \n
\n {tt(subtitle, t)}
\n\n
\n \n
\n \n \n {`${t('chargedPaymentMsg')} ${\n currentCurrency?.isoCode\n } ${totalToPay.toFixed(2)} `}\n \n )}\n
\n \n
\n
\n {showExchangeMsg && (\n \n {this.showOrderIdentifier()}\n
\n\n \n {t('totalToPay')} {this.showTotalToPay()}\n \n
\n\n
\n
\n \n \n
\n \n
\n \n
\n \n
\n {tt(subtitle, t)}
\n\n
\n \n
\n \n
\n \n
\n \n \n {t('CompraSegura')}\n \n {t('SafeTransactionsSite')} \n
\n \n \n {`${t('chargedPaymentMsg')} ${\n currentCurrency?.isoCode\n } ${totalToPay.toFixed(2)} `}\n \n )}\n
\n \n
\n
\n {showExchangeMsg && (\n \n {this.showOrderIdentifier()}\n
\n\n \n {t('totalToPay')} {this.showTotalToPay()}\n \n
\n\n
\n
\n \n \n
\n \n
\n \n
\n \n
\n {tt(subtitle, t)}
\n\n
\n \n
\n \n
\n \n
\n \n \n {t('CompraSegura')}\n \n {t('SafeTransactionsSite')} \n
\n \n {forcedCurrencyPrice != 0 ? (\n \n {`${t('chargedPaymentMsg')} ${\n currentCurrency?.isoCode\n } ${totalToPay.toFixed(2)} `}\n \n )}\n
\n \n \n {t('paypalConvertionAlert', forcedCurrencyCode)}\n
\n ) : (\n ''\n )}\n \n
\n
\n {showExchangeMsg && (\n \n {this.showOrderIdentifier()}\n
\n\n \n {t('totalToPay')} {this.showTotalToPay()}\n \n {forcedCurrencyPrice != 0 ? (\n \n {' '}\n = {forcedCurrencyCode}
\n
\n
\n \n {newUrl && (\n 0 ? forcedCurrencyPrice : paymentInfo.price}\n currencyCode={\n forcedCurrencyPrice > 0 ? forcedCurrencyCode : paymentInfo.currencyCode\n }\n onSuccess={this.onSuccess}\n />\n )}\n
\n \n
\n \n
\n \n
\n {tt(subtitle, t)}
\n\n
\n \n
\n \n
\n \n
\n \n \n {t('CompraSegura')}\n \n {t('SafeTransactionsSite')} \n
\n \n \n {`${t('chargedPaymentMsg')} ${\n currentCurrency?.isoCode\n } ${totalToPay.toFixed(2)} `}\n \n )}\n
\n \n
\n
\n {showExchangeMsg && (\n \n {t('orden')} {paymentInfo.bookingId.toString().padStart(7, '0')}\n
\n\n \n {t('totalToPay')} {this.showTotalToPay()}\n \n
\n\n
\n
\n \n \n
\n \n
\n
\n \n );\n };\n\n parseBillingFields = () => {\n const { t } = this.props;\n\n return (\n <>\n \n
\n {t('billingInformation.equalToContactInfo')}}\n />\n {this.parseBillingFields()}\n
\n {billingConditions && \n {t('billingInformation.title')}\n
\n {billingSubtitle &&{t(billingSubtitle)}
}\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
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n );\n };\n\n getCustomerInfo = () => {\n if (this.isPayingBooking()) return this.props.bookings.confirmation.customer;\n if (this.isPayingInfraction() && this.props.infractions.current) {\n return this.props.infractions.current.booking\n ? this.props.infractions.current.booking.customer\n : {};\n }\n };\n\n render() {\n const {\n t,\n title,\n subtitle,\n script,\n currentCurrency,\n defaultCurrency,\n webCurrency,\n } = this.props;\n\n const applyExchangeRate = applyCurrencyExchangeRate(currentCurrency, webCurrency);\n\n const showExchangeMsg = applyExchangeRate;\n\n let returnFinalPriceOnly = true;\n\n let totalToPay = this.showTotalToPay(returnFinalPriceOnly);\n if (applyExchangeRate)\n totalToPay = getPriceWithExchangeRate(\n totalToPay,\n currentCurrency,\n defaultCurrency,\n webCurrency,\n );\n\n return (\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n {tt(subtitle, t)}
\n\n
\n \n
\n \n
\n \n
\n \n \n {t('CompraSegura')}\n \n {t('SafeTransactionsSite')} \n
\n \n \n {`${t('chargedPaymentMsg')} ${\n currentCurrency?.isoCode\n } ${totalToPay.toFixed(2)} `}\n \n )}\n
\n \n
\n
\n {showExchangeMsg && (\n \n {this.showOrderIdentifier()}\n
\n\n \n {t('totalToPay')} {this.showTotalToPay()}\n \n
\n\n
\n
\n \n \n
\n \n
\n \n
\n \n
\n {tt(subtitle, t)}
\n\n
\n \n
\n \n
\n
\n \n {confirmMessage\n ? tt(confirmMessage, t)\n : t('creditCardBookConfirmationExplanation')}\n
\n\n {this.showOrderIdentifier()}\n
\n\n
\n
\n \n \n
\n \n
\n
\n \n );\n };\n\n renderBillingFields = () => {\n const { t } = this.props;\n\n return (\n <>\n \n
\n {t('billingInformation.equalToContactInfo')}}\n />\n {this.renderBillingFields()}\n
\n {billingConditions && \n {t('billingInformation.title')}\n
\n {billingSubtitle &&{t(billingSubtitle)}
}\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
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n );\n };\n\n //#endregion\n\n createPaymentIntent = () => {\n const paymentInfo = this.state.paymentInfo;\n\n stripeCreatePaymentIntent(\n paymentInfo.branchOfficeId,\n paymentInfo.price,\n paymentInfo.currencyCode,\n paymentInfo.bookingId,\n paymentInfo.infractionId,\n paymentInfo.customerId,\n this.sanitizeName(paymentInfo.firstName) + ' ' + this.sanitizeName(paymentInfo.lastName),\n paymentInfo.email,\n )\n .then(res => res)\n .then(data => this.setClientSecret(data));\n\n this.setSuccessStorageElements();\n };\n\n setClientSecret = clientSecret => {\n this.setState({ ...this.state, clientSecret });\n };\n\n setSuccessStorageElements = () => {\n const paymentInfo = this.state.paymentInfo;\n\n var params = {\n bookingId: paymentInfo.bookingId,\n infractionId: paymentInfo.infractionId,\n price: paymentInfo.price,\n currencyCode: paymentInfo.currencyCode,\n exchangeRate: paymentInfo.exchangeRate,\n };\n Storage.setElement('stripeTransactionParams', JSON.stringify(params), false);\n };\n\n render() {\n const { t, title, subtitle, currentCurrency, defaultCurrency, webCurrency } = this.props;\n\n const { stripePromise, clientSecret } = this.state;\n\n const applyExchangeRate = applyCurrencyExchangeRate(currentCurrency, webCurrency);\n\n const showExchangeMsg = applyExchangeRate;\n\n let returnFinalPriceOnly = true;\n\n let totalToPay = this.showTotalToPay(returnFinalPriceOnly);\n if (applyExchangeRate)\n totalToPay = getPriceWithExchangeRate(\n totalToPay,\n currentCurrency,\n defaultCurrency,\n webCurrency,\n );\n\n const appearance = {\n theme: 'stripe',\n };\n const options = {\n clientSecret,\n appearance,\n };\n\n return (\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n {tt(subtitle, t)}
\n\n
\n \n
\n \n
\n \n
\n \n \n {t('CompraSegura')}\n \n {t('SafeTransactionsSite')} \n
\n \n \n {`${t('chargedPaymentMsg')} ${\n currentCurrency?.isoCode\n } ${totalToPay.toFixed(2)} `}\n \n )}\n
\n \n
\n
\n {showExchangeMsg && (\n \n {this.showOrderIdentifier()}\n
\n\n \n {t('totalToPay')} {this.showTotalToPay()}\n \n
\n\n
\n
\n \n {clientSecret && (\n \n \n )}\n
\n \n
\n \n
\n\n {/* \n
\n \n \n
*/}\n \n
\n
\n \n );\n };\n\n parseBillingFields = () => {\n const { t } = this.props;\n\n return (\n <>\n \n
\n {t('billingInformation.equalToContactInfo')}}\n />\n {this.parseBillingFields()}\n
\n {billingConditions && \n {t('billingInformation.title')}\n
\n {billingSubtitle &&{t(billingSubtitle)}
}\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
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n );\n };\n\n getCustomerInfo = () => {\n if (this.isPayingBooking()) return this.props.bookings.confirmation.customer;\n if (this.isPayingInfraction() && this.props.infractions.current) {\n return this.props.infractions.current.booking\n ? this.props.infractions.current.booking.customer\n : {};\n }\n };\n\n render() {\n const {\n t,\n title,\n subtitle,\n script,\n currentCurrency,\n defaultCurrency,\n webCurrency,\n } = this.props;\n\n const applyExchangeRate = applyCurrencyExchangeRate(currentCurrency, webCurrency);\n\n const showExchangeMsg = applyExchangeRate;\n\n let returnFinalPriceOnly = true;\n\n let totalToPay = this.showTotalToPay(returnFinalPriceOnly);\n if (applyExchangeRate)\n totalToPay = getPriceWithExchangeRate(\n totalToPay,\n currentCurrency,\n defaultCurrency,\n webCurrency,\n );\n\n return (\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n {tt(subtitle, t)}
\n\n
\n \n
\n \n
\n \n
\n \n \n {t('CompraSegura')}\n \n {t('SafeTransactionsSite')} \n
\n \n \n {`${t('chargedPaymentMsg')} ${\n currentCurrency?.isoCode\n } ${totalToPay.toFixed(2)} `}\n \n )}\n
\n \n
\n
\n {showExchangeMsg && (\n \n {this.showOrderIdentifier()}\n
\n\n \n {t('totalToPay')} {this.showTotalToPay()}\n \n
\n\n
\n
\n \n \n
\n \n
\n \n
\n \n
\n {tt(subtitle, t)}
\n\n
\n \n
\n \n
\n \n
\n \n \n {t('CompraSegura')}\n \n {t('SafeTransactionsSite')} \n
\n \n \n {`${t('chargedPaymentMsg')} ${\n currentCurrency?.isoCode\n } ${totalToPay.toFixed(2)} `}\n \n )}\n
\n \n
\n
\n {showExchangeMsg && (\n \n {this.showOrderIdentifier()}\n
\n\n \n {t('totalToPay')} {this.showTotalToPay()}\n \n
\n\n
\n
\n \n
\n \n
\n \n
\n \n
\n {tt(subtitle, t)}
\n\n
\n \n
\n \n
\n \n
\n \n \n {t('CompraSegura')}\n \n {t('SafeTransactionsSite')} \n
\n \n \n {`${t('chargedPaymentMsg')} ${\n currentCurrency?.isoCode\n } ${totalToPay.toFixed(2)} `}\n \n )}\n
\n \n
\n
\n {showExchangeMsg && (\n \n {t('orden')} {paymentInfo.bookingId.toString().padStart(7, '0')}\n
\n\n \n {t('totalToPay')} {this.showTotalToPay()}\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 \n
\n \n
\n {tt(subtitle, t)}
\n\n
\n \n
\n \n
\n \n
\n \n \n {t('CompraSegura')}\n \n {t('SafeTransactionsSite')} \n
\n \n
\n \n
\n
\n \n {this.showOrderIdentifier()}\n
\n\n \n {t('totalToPay')} {this.showTotalToPay()}\n \n
\n\n
\n
\n \n \n
\n \n
\n \n
\n \n
\n \n
\n {tt(subtitle, t)}
\n\n
\n \n
\n \n
\n \n
\n \n \n {t('CompraSegura')}\n \n {t('SafeTransactionsSite')} \n
\n \n \n {`${t('chargedPaymentMsg')} ${\n currentCurrency?.isoCode\n } ${totalToPay.toFixed(2)} `}\n \n )}\n
\n \n
\n
\n {showExchangeMsg && (\n \n {this.showOrderIdentifier()}\n
\n\n \n {t('totalToPay')} {this.showTotalToPay()}\n \n
\n\n
\n \n
\n \n
\n \n
\n \n
\n {tt(subtitle, t)}
\n\n
\n \n
\n \n
\n \n {this.showIdMessage()}{' '}\n {paymentInfo.bookingId ? paymentInfo.bookingId.toString().padStart(7, '0') : ''}\n
\n\n {this.showTotalToPay()}\n
\n\n
\n \n
\n \n \n
\n \n
\n \n
\n \n
\n \n
\n \n {model.brand.name} {model.name}\n
\n\n {t('category')} \n {this.getCategoryOrGroupName(model)}\n
\n {theme.template !== MODERN_THEME ? (\n <>\n{model.description}
\n \n ) : (\n <>\n{model.description}
\n\n {featureFlags &&\n featureFlags.showFleetPrice &&\n (!featureFlags.fleetUseLowerPrice && model.dailyPrice > 0 ? (\n
\n \n {t('from')} {currency != null ? currency.prefix : 'ARS'} \n \n
\n {t('from')} {currency != null ? currency.prefix : 'ARS'} \n \n
\n \n
\n \n
\n \n {filteredModels &&\n filteredModels.map((model, index) => (\n
\n \n
\n ))}\n \n
\n \n
\n \n 0}>\n {filteredEntities &&\n filteredEntities.map((entity, index) => {\n const models = categoryGroups\n ? this.getAllModelsFromCategoryGroup(index)\n : entity.models;\n return (\n \n \n {entity.name}\n \n \n \n \n \n );\n })}\n \n
\n - \n {models.map((model, j) => {\n ins++;\n return (\n
\n (this.slider = slider)}>\n {filteredEntities &&\n filteredEntities.map((entity, entityIndex) => {\n const models = categoryGroups\n ? this.getAllModelsFromCategoryGroup(entityIndex)\n : entity.models;\n return models.map((model, index) => (\n \n
\n \n \n \n
\n
\n \n Cat.\n | \n \n \n {t(franchiseTitle)} {t(franchiseDescription)}\n\n | \n \n \n {t(creditTitle)} {t(creditDescription)}\n\n | \n \n \n {t(accidentsTitle)} {t(accidentsDescription)}\n\n | \n {hailTitle && (\n \n \n {t(hailTitle)} {t(hailDescription)}\n\n | \n )}\n
|---|---|---|---|---|
| \n {category.name}\n | \n\n | \n \n | \n \n | \n {hailTitle && (\n \n | \n )}\n
\n
\n \n
\n \n {tt(subtitle, t)} \n
\n \n
\n \n
\n \n
\n
\n
\n \n
\n \n \n {t('categoria')} {(model.category || booking.category).name}\n \n {showDeposit && (\n
\n \n {model.brand.name} {model.name}\n
\n\n |\n \n \n {kmText}\n \n
\n \n
\n 
\n
\n \n
\n
\n \n {booking.deliveryPlace.name} -\n \n {' '}\n {Moment(confirmation.fromDate).format('DD-MM-YYYY HH:mm')} hs\n \n
\n\n {booking.returnPlace.name} -\n \n {' '}\n {Moment(confirmation.toDate).format('DD-MM-YYYY HH:mm')} hs\n \n
\n\n
\n
\n - {this.getPriceItemsContent()}
\n
\n \n {installment ? (\n <>\n
\n \n
\n \n
\n \n
\n
\n \n
\n \n
\n
\n \n
\n \n ) : (\n <>\n \n
\n
\n {this.showBookingLenght(booking)}
\n\n
\n \n )}\n {detailsLegend && (\n \n
\n {t('dailyPrice')}{' '}\n \n
\n {tt(detailsLegend, t)} \n
\n )}\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n
\n \n {!!infraction.act && (\n <>\n \n \n \n \n )}\n
\n {infraction.act}
\n \n )}\n{infraction.creationDate}
\n{infraction.description || ' - '}
\n {infraction.attachment && (\n <>\n\n
\n
\n \n {model.brand.name} {model.name} ({infraction.car.id})\n
\n\n {booking && (\n <>\n\n {booking.deliveryPlace.name} -{' '}\n \n {' '}\n {Moment(booking.fromDate).format('DD-MM-YYYY HH:mm')} hs\n \n
\n\n {booking.returnPlace.name} -{' '}\n \n {Moment(booking.toDate).format('DD-MM-YYYY HH:mm')} hs\n \n
\n \n )}\n\n {installment ? (\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
\n \n
\n \n
\n
\n \n
\n \n {t('tolls.subtitle', t)} \n
\n \n
\n \n
\n \n
\n
\n \n
\n \n \n {t('categoria')} {(model.category || booking.category).name}\n \n {showDeposit && (\n
\n \n {model.brand.name} {model.name}\n
\n\n |\n \n \n {kmText}\n \n
\n \n
\n \n
\n \n
\n
\n \n {booking.deliveryPlace.name} -\n \n {' '}\n {Moment(confirmation.fromDate).format('DD-MM-YYYY HH:mm')} hs\n \n
\n\n {booking.returnPlace.name} -\n \n {' '}\n {Moment(confirmation.toDate).format('DD-MM-YYYY HH:mm')} hs\n \n
\n\n
\n \n {installment ? (\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 )}\n {detailsLegend && (\n \n
\n {tt(detailsLegend, t)} \n
\n )}\n \n \n {faqs.map((faq, key) => (\n \n
\n \n
\n \n );\n }\n\n return (\n <>\n \n
\n \n \n {faqs.slice(0, i).map((faq, key) => (\n \n
\n\n \n \n {faqs.length - i > 0 &&\n faqs\n .slice(i, faqs.length)\n .map((faq, key) => (\n \n
\n \n );\n }\n\n faqsSection(faqs, modernImage) {\n if (faqs && faqs.length > 0) {\n let i = Math.ceil(faqs.length / 2);\n if (i === 0) i = faqs.length;\n\n var faqTag = {\n '@context': 'https://schema.org',\n '@type': 'FAQPage',\n mainEntity: faqs.map(q => {\n return {\n '@type': 'Question',\n name: this.tt(q.question),\n acceptedAnswer: {\n '@type': 'Answer',\n text: this.tt(q.answer),\n },\n };\n }),\n };\n\n const defaultLang = this.props.settings.configurations.defaultLang;\n const conditionsPageSchemaTags = this.props.settings.translations[defaultLang][\n '__PageCondiciones'\n ].schemaTags;\n const theme = this.props.settings.theme.template;\n\n return (\n <>\n {conditionsPageSchemaTags === null ||\n (conditionsPageSchemaTags === undefined && (\n }\n
\n {this.props.onlyFaq ? null : (\n
\n \n );\n }\n\n return null;\n }\n\n getTemplateStyledComponent() {\n if (this.props.settings.theme.template === MODERN_THEME) {\n return StyledCondicionesSectionModern;\n }\n return StyledCondicionesSection;\n }\n\n render() {\n const { conditions, faqs, conditionsColClass, settings, modernImage } = this.props;\n const modernTheme = settings.theme.template === MODERN_THEME;\n const StyledSection = this.getTemplateStyledComponent();\n\n const conditionCol = modernTheme ? 'col-lg-12' : 'col-lg-6';\n const conditionMargin = modernTheme ? 'mt-3 ' : 'mb-5 ';\n const fontSize = modernTheme ? 21 : 18;\n\n return (\n \n
\n )}\n {this.accordionContent(faqs, i, theme, modernImage)}\n \n
\n {this.faqsSection(faqs, modernImage)}\n \n \n
\n \n {conditions &&\n conditions.map((condition, key) => (\n \n
\n ))}\n - \n {condition.items &&\n condition.items.map((cItem, cKey) => (\n
- \n {' '}\n
\n \n ))}\n
\n
\n );\n };\n\n renderItem = (item, key) => {\n return (\n \n \n 
\n \n {this.tt(header.title)}\n
\n {this.tt(header.subTitle)}
\n\n
\n );\n };\n\n renderFooter = footer => {\n return \n
\n {key + 1}
\n icon
\n {this.tt(item.title)}
\n {this.tt(item.description)}
\n {this.tt(footer.text)}
;\n };\n\n render() {\n const { header, items, footer } = this.props;\n\n return (\n\n {this.renderHeader(header)}\n
\n \n
\n \n {items && items.map((item, key) => this.renderItem(item, key))}\n
\n {this.renderFooter(footer)}
\n \n
\n \n {items.map(item => (\n \n })
\n \n ))}\n
\n {categoriesFilter}
\n\n \n
\n )}\n \n {/* \n
\n \n {categoriesFilter}\n
\n {franchiseContent}
\n )}\n {showExchangeMsg && (\n\n
\n {hasLimitedAvailability() && parsePartialAvailabilityAlert('mobile', t, fromDate, toDate)}\n \n 
\n
\n \n |\n \n ${kmText}\n `}\n nonTranslate\n />\n
\n {getCarName(car)}
\n\n
\n {hasLimitedAvailability() &&\n parsePartialAvailabilityAlert('desktop', t, fromDate, toDate)}\n \n
\n \n {showDeposit && (\n <>\n \n ${kmText}\n \n `}\n nonTranslate\n />\n
\n \n \n {alquilerPor || t('alquilerPor')}\n \n {' '}\n {totalDaysString}{' '}\n \n {openRate && t('from').toLowerCase()}\n \n {(!isOnlyQuote() || (isOnlyQuote() && featureFlags.showPriceToRequest)) && (\n \n \n )}\n {showDailyPrice &&\n (!isOnlyQuote() || (isOnlyQuote() && featureFlags.showPriceToRequest)) ? (\n \n {t('dailyPrice')}{' '}\n \n \n ) : null}\n {customCheckOutButtons &&\n customCheckOutButtons?.map(button =>\n button.paymentMethod === 'counter'\n ? ((button.Price = buttonPrice), handleCheckoutLink(button))\n : handleCheckoutBtn(button),\n )}\n {!customCheckOutButtons && handleCheckoutBtn(checkoutButton)}\n {!customCheckOutButtons && handleCheckoutLink(checkoutLink)}\n {loggedAsAgency && (\n <>\n \n {t('myAccount.customer')}:{' '}\n \n \n \n {t('myAccount.agency')}:{' '}\n \n \n \n {t('myAccount.commision')}:{' '}\n \n \n \n )}\n
\n \n );\n }\n}\n\nexport default withTranslation()(DefaultSearchItemRow);\n","import style from 'styled-components';\n\nexport const SearchItemRowStyledModern = style.div`\n background: ${({ background, theme }) => background || theme.colors.third};\n\n\n .car-description{\n display: flex;\n }\n\n .separator {\n color: #6f6f6f;\n }\n\n .car-name {\n color:#2E2D35;\n font-size: 20px;\n font-weight: 700;\n font-style: normal;\n margin-top: 0px;\n margin-bottom: 5px;\n }\n\n .car-image{ \n height: fit-content;\n text-align: center;\n flex: 0 0 33%;\n max-width: 33%;\n } \n\n .franchise {\n font-size: 0.8rem;\n span { \n color: #1A73E8;\n }\n\n i {\n color: #1A73E8;\n margin-right: 5px;\n }\n }\n\n\n.car-image img{\n max-height: 164px; \n}\n\n.car-category{\n font-weight: 600;\n}\n\n.car-price {\n text-align: center;\n\n p.rent-days {\n color:#656970;\n font-weight: 400;\n font-size: 13px;\n }\n\n p.rent-price {\n color:#2E2D35;\n margin-top: 5px !important;\n font-size: 18px;\n font-weight: bold;\n white-space: nowrap;\n\n .long-value{\n font-size: 24px;\n }\n\n .short-value{\n font-size: 24px;\n }\n\n span {\n font-size: 28px;\n }\n }\n\n button {\n width: 100%;\n padding:10px 0;\n float:right\n }\n\n .customButton{\n flex-direction: column;\n\n .button-container {\n display: flex;\n width: 10rem;\n\n .button-icon {\n margin-right: 0.3rem;\n width: 10%;\n }\n\n .button-text{\n width: 100%;\n }\n\n .with-icon{\n width: 90%!important;\n }\n\n }\n\n .button-subtext {\n font-size: 0.6rem;\n margin-top: 0.2rem;\n }\n }\n\n .second-btn {\n color: #2E2D35;\n font-size: 14px;\n border: 1px solid #2E2D35;\n padding: 8px;\n float: left;\n width: 100%;\n border-radius:5px;\n text-align:center;\n\n .CheckoutLink-icon {\n margin-right: 0.5rem;\n }\n}\n .second-btn:hover {\n background:#f1f1f1;\n }\n \n span {\n padding-left: 3px;\n }\n }\n}\n\n\n.details { \n display: flex;\n flex-wrap: wrap;\n margin-bottom: 1.2rem;\n\n .details-item { \n display: flex; \n align-items: center; \n margin-right: 0.5rem;\n\n svg {\n padding-left: 0;\n }\n\n p { \n white-space: nowrap;\n margin: 0;\n }\n\n img{\n border: 1px solid #CCCCCC;\n padding: 5px;\n border-radius: 7px;\n margin-bottom: 5px;\n width: 100%;\n max-width: 40px;\n }\n\n span {\n margin-top: 5px;\n font-weight: 400;\n font-size: .75em;\n }\n }\n}\n\n.car-mobile-details {\n display: none;\n}\n\n.partial-availability-mobile {\n display: none;\n}\n\n.disabled-link {\n cursor: default;\n font-style: italic;\n}\n\n@media (max-width: ${({ theme }) => theme.screens.md}){\n flex-direction: column;\n padding: 20px 5px !important;\n\n .md-hidden{\n display: none;\n }\n\n .car-mobile-details {\n display: block;\n }\n .details{\n .details-item { \n width: 45%;\n }\n }\n}\n\n@media (max-width: ${({ theme }) => theme.screens.lg}) {\n .car-image{\n margin-right: 1rem !important;\n flex: 0 0 40%;\n max-width: 40%;\n }\n\n .car-name {\n font-size: 15px;\n }\n\n .franchise {\n font-size: 12px;\n line-height: 22px;\n }\n}\n\n@media (max-width:${({ theme }) => theme.screens.sm}) {\n .partial-availability-desktop {\n display: none;\n }\n\n .partial-availability-mobile {\n display: block;\n }\n}\n\n\n\n\n`;\n","import React from 'react';\nimport { props } from '../SearchItemRow.props';\nimport { SearchItemRowStyledModern } from './index.styled';\nimport {\n NumberDisplay,\n TranslatedComponent,\n Paragraph,\n ModelDetail,\n TranslatedLink,\n} from 'components/';\nimport { withTranslation } from 'react-i18next';\nimport { tt } from 'utils/translationHelper';\nimport { getPriceWithExchangeRate, applyCurrencyExchangeRate } from 'utils/priceHelper';\nimport ExchangeMessage from 'components/ExchangeMessage';\n\nclass ModernSearchItemRow extends TranslatedComponent {\n static propTypes = props;\n\n render() {\n const {\n car: {\n car,\n category,\n franchise,\n totalDaysString,\n ilimitedKm,\n fromDate,\n toDate,\n maxAllowedDistanceByDay,\n },\n t,\n showDailyPrice,\n featureFlags: { smallDecimals },\n featureFlags,\n franquicia,\n franchiseLink,\n itemMiddleColumnExtraContent,\n alquilerPor,\n background,\n showDeposit,\n checkoutButton,\n customCheckOutButtons,\n isOnlyQuote,\n getCarName,\n getCategoryOrGroupName,\n hasLimitedAvailability,\n parsePartialAvailabilityAlert,\n checkoutLink,\n handleCheckoutLink,\n handleCheckoutBtn,\n openRate,\n showModelDetail,\n currentCurrency,\n defaultCurrency,\n webCurrency,\n chargedMsg,\n chargedMsg2,\n loggedAsAgency,\n agencyPrice,\n customerPrice,\n salesCommision,\n distanceUnit,\n } = this.props;\n\n const applyExchangeRate = applyCurrencyExchangeRate(currentCurrency, webCurrency);\n const showExchangeMsg = applyExchangeRate;\n\n const availabilityGroup = featureFlags.availabilityGroup || 'model';\n\n const franchiseAmount = availabilityGroup === 'category' ? category.franchise : franchise;\n const franchiseInCurrency = applyExchangeRate\n ? getPriceWithExchangeRate(franchiseAmount, currentCurrency, defaultCurrency, webCurrency)\n : franchiseAmount;\n\n const FranchiseInfo = () => {\n const franchiseContent = (\n <>\n {franchiseContent}
\n )}\n {showExchangeMsg && (\n\n
\n {hasLimitedAvailability() && parsePartialAvailabilityAlert('mobile', t, fromDate, toDate)}\n \n \n
\n \n
\n {getCarName(car)}
\n\n
\n {hasLimitedAvailability() &&\n parsePartialAvailabilityAlert('desktop', t, fromDate, toDate)}\n \n
\n {showDeposit &&
\n \n \n {alquilerPor || t('alquilerPor')}\n \n {' '}\n {totalDaysString}{' '}\n \n {openRate && t('from').toLowerCase()}\n \n {(!isOnlyQuote() || (isOnlyQuote() && featureFlags.showPriceToRequest)) && (\n \n \n )}\n {showDailyPrice &&\n (!isOnlyQuote() || (isOnlyQuote() && featureFlags.showPriceToRequest)) ? (\n \n {t('dailyPrice')}{' '}\n \n \n ) : null}\n {customCheckOutButtons &&\n customCheckOutButtons?.map(button =>\n button.paymentMethod === 'counter'\n ? ((button.Price = buttonPrice), handleCheckoutLink(button))\n : handleCheckoutBtn(button),\n )}\n {!customCheckOutButtons && handleCheckoutBtn(checkoutButton)}\n {!customCheckOutButtons && handleCheckoutLink(checkoutLink)}\n {loggedAsAgency && (\n <>\n \n {t('myAccount.customer')}:{' '}\n \n \n \n {t('myAccount.agency')}:{' '}\n \n \n \n {t('myAccount.commision')}:{' '}\n \n \n \n )}\n
\n \n );\n }\n}\n\nexport default withTranslation()(ModernSearchItemRow);\n","import React from 'react';\nimport { connect } from 'react-redux';\nimport { withRouter } from 'react-router-dom';\nimport { setCheckout, fetchPrices, setSearchCarParams } from 'actions/';\nimport { props } from './SearchItemRow.props';\nimport { Btn, CustomAlert, NumberDisplay, TranslatedComponent } from 'components/';\nimport { withTranslation } from 'react-i18next';\nimport { tt, tlink } from 'utils/translationHelper';\nimport moment from 'moment';\nimport { getSippByCategory } from '../../../../utils/categoryGroupHelper';\nimport { is_gtag_enabled, gtag_product_click } from '../../../../utils/googleTagsHelper';\nimport { MODERN_THEME } from 'styled/constants';\nimport DefaultSearchItemRow from './Default';\nimport ModernSearchItemRow from './Modern';\nimport { getPriceWithCommission, getPriceWithoutVat } from 'utils/dataHelper';\nimport { getPriceWithExchangeRate, applyCurrencyExchangeRate } from 'utils/priceHelper';\n\nclass SearchItemRow extends TranslatedComponent {\n static propTypes = props;\n\n constructor() {\n super();\n this.isOnlyQuote = this.isOnlyQuote.bind(this);\n this.getCarName = this.getCarName.bind(this);\n this.getCategoryOrGroupName = this.getCategoryOrGroupName.bind(this);\n this.hasLimitedAvailability = this.hasLimitedAvailability.bind(this);\n this.parsePartialAvailabilityAlert = this.parsePartialAvailabilityAlert.bind(this);\n this.checkoutLink = this.checkoutLink.bind(this);\n this.checkoutButton = this.checkoutButton.bind(this);\n }\n\n goToCheckout = async (onlinePayment, promotion, button) => {\n const {\n history,\n setCheckout,\n t,\n i18n,\n checkoutRoute,\n searchCars: { params },\n settings,\n settings: {\n configurations: { googleTagManager },\n },\n setSearchCarParams,\n car,\n } = this.props;\n\n let isPartial = false;\n let isOnline = false;\n if (this.hasLimitedAvailability()) {\n params['hourFrom'] = this.getCarDateHour(car.fromDate);\n params['hourTo'] = this.getCarDateHour(car.toDate);\n setSearchCarParams(params);\n }\n\n if (is_gtag_enabled(googleTagManager)) gtag_product_click(car, settings);\n\n if (\n button.paymentMethod === 'partial' &&\n button.partialPaymentAmountIsPercentage &&\n button.partialPaymentAmount\n ) {\n isPartial = true;\n }\n\n if (button.paymentMethod === 'online') {\n isOnline = true;\n }\n\n setCheckout({\n booking: {\n ...this.props.car,\n promotion,\n onlyQuote: this.isOnlyQuote(car),\n isPartial: isPartial,\n isOnline: isOnline,\n partialPaymentAmount: button.partialPaymentAmount,\n },\n onlinePayment: onlinePayment,\n });\n\n history.push(tlink(checkoutRoute, t, i18n, null, settings.configurations.langConfig));\n window.scrollTo(0, 0);\n };\n\n sanatizeDetailText(text) {\n return text.length > 3 ? text.substring(0, 3) + '.' : text;\n }\n\n getPromotion(id) {\n const {\n car: { availablePromotions },\n } = this.props;\n return availablePromotions.find(x => x.id === id);\n }\n\n getCarDateHour(date) {\n return date.slice(11).replace(':00Z', '');\n }\n\n hasLimitedAvailability() {\n const { car } = this.props;\n const { params } = this.props.searchCars;\n\n const startParam = moment(params.hourFrom, 'hh:mm');\n const endParam = moment(params.hourTo, 'hh:mm');\n\n const startCar = moment(this.getCarDateHour(car.fromDate), 'hh:mm');\n const endCar = moment(this.getCarDateHour(car.toDate), 'hh:mm');\n\n if (startCar.isAfter(startParam) || endCar.isBefore(endParam)) return true;\n return false;\n }\n\n changePrice(obj, type) {\n const {\n settings: { paymentConfiguration },\n searchCars: {\n params: { pickUpEndpoint, customPromotionId },\n },\n } = this.props;\n\n function priceChanger(obj, promotion) {\n if (promotion)\n obj.Price = getPriceWithCommission(promotion.bookingFinalPrice, paymentConfiguration);\n\n obj.Promotion = promotion?.id;\n }\n\n // CREATE ENUM FOR PAYMENT TYPE\n const ValidPaymentTypeEnum = Object.freeze({\n Both: 0,\n Counter: 1,\n Online: 2,\n });\n\n let promotion = null;\n if (paymentConfiguration?.promotions && paymentConfiguration?.promotions[pickUpEndpoint]) {\n const promoId = obj.Value\n ? paymentConfiguration.promotions[pickUpEndpoint].onlinePromotion\n : paymentConfiguration.promotions[pickUpEndpoint].counterPromotion;\n promotion = this.getPromotion(promoId);\n }\n\n // EVALUATES IF THE PROMOTION IS VALID FOR THE APPROPRIATE PAYMENT METHOD\n const isValidForBoth = promotion && promotion.validForPayment === ValidPaymentTypeEnum.Both;\n const isValidForCounter =\n promotion && promotion.validForPayment === ValidPaymentTypeEnum.Counter;\n const isValidForOnline = promotion && promotion.validForPayment === ValidPaymentTypeEnum.Online;\n\n if (isValidForBoth) {\n priceChanger(obj, promotion);\n } else if (isValidForCounter && !obj.Value) {\n priceChanger(obj, promotion);\n } else if (isValidForOnline && obj.Value) {\n priceChanger(obj, promotion);\n }\n\n if (customPromotionId) {\n promotion = this.getPromotion(Number(customPromotionId));\n }\n\n //APPLIES CUSTOM PROMO IF APPLIES TO THE APPROPRIATE PAYMENT METHOD\n if (promotion) {\n const isValidForBoth = promotion.validForPayment === ValidPaymentTypeEnum.Both;\n const isValidForCounter = promotion.validForPayment === ValidPaymentTypeEnum.Counter;\n const isValidForOnline = promotion.validForPayment === ValidPaymentTypeEnum.Online;\n\n if (\n isValidForBoth ||\n (type === 'counter' && isValidForCounter) ||\n (type === 'online' && isValidForOnline)\n ) {\n priceChanger(obj, promotion);\n }\n }\n }\n\n parsePartialAvailabilityAlert(type, t, fromDate, toDate) {\n const { partialAvailabilityMessage } = this.props;\n let customMessage = null;\n if (partialAvailabilityMessage) customMessage = tt(partialAvailabilityMessage, t);\n\n return (\n \n \n \n {tt(fewUnitsText.title, t) || t('pocasUnidadesTitle')}{' '}\n {tt(fewUnitsText.description, t) || t('pocasUnidadesParagraph')}\n \n \n ) : (\n ''\n )}\n {error ? (\n {t(error.message || error)}\n ) : loading ? (\n \n ) : cars && cars.length > 0 ? (\n cars.map((car, index) => (\n \n )}\n
\n \n \n \n {!expanded && (fullName.length > nameMaxLength ? collapsedName : fullName)}\n {fullName.length > nameMaxLength && (\n this.setState({ expanded: !expanded })}\n aria-controls=\"additional-name-collapse\"\n aria-expanded={expanded}\n className={`additional-name-button ${expanded && seeLess ? 'see-less' : ''}`}\n >\n {expanded ? seeLess : seeMore}\n \n )}\n {additional.isRequired && (\n {t('additionalMandatoryLegend')}\n )}\n {additional.availableStock < 1 && (\n {t('noStock')}\n )}\n
\n {expanded ? fullName : collapsedName}
\n {renderImage(additional)}
\n \n
\n \n \n \n {!expanded && (fullName.length > nameMaxLength ? collapsedName : fullName)}\n {fullName.length > nameMaxLength && (\n setExpanded(!expanded)}\n aria-controls=\"additional-name-collapse\"\n aria-expanded={expanded}\n className={`additional-name-button ${expanded && seeLess ? 'see-less' : ''}`}\n >\n {expanded ? seeLess : seeMore}\n \n )}\n {additional.isRequired ? (\n {t('additionalMandatoryLegend')}\n ) : (\n \n )}\n {additional.availableStock < 1 && (\n {t('noStock')}\n )}\n
\n {expanded ? fullName : collapsedName}
\n {getPrice()}
\n \n \n {additional.maxQuantityPerBooking === 1 ? (\n \n ) : (\n {\n onNumberChange(value ? parseInt(value) : 0);\n }}\n inputClass=\"form-control number constant-arrows\"\n wrapperClass=\"quantity\"\n min={0}\n id={additional.id}\n options={{\n pattern: '[0-9]*',\n inputMode: 'numeric',\n min: 0,\n max: additional.maxQuantityPerBooking,\n }}\n disabled={additional.isRequired || additional.availableStock < 1}\n />\n )}\n
\n \n );\n };\n\n const renderAdditionalWithIcon = additional => (\n \n {' '}\n
{additional.name}
\n \n );\n\n const getAdditionalComponent = additional => {\n const renderImage = !additionalImage ? renderAdditionalWithIcon : renderAdditionalWithImage;\n\n return (\n <>\n{renderImage(additional)}
\n \n \n
\n \n \n \n {!expanded && (fullName.length > nameMaxLength ? collapsedName : fullName)}\n {fullName.length > nameMaxLength && (\n setExpanded(!expanded)}\n aria-controls=\"additional-name-collapse\"\n aria-expanded={expanded}\n className={`additional-name-button ${expanded && seeLess ? 'see-less' : ''}`}\n >\n {expanded ? seeLess : seeMore}\n \n )}\n {additional.isRequired ? (\n {t('additionalMandatoryLegend')}\n ) : (\n \n )}\n {additional.availableStock < 1 && (\n {t('noStock')}\n )}\n
\n {expanded ? fullName : collapsedName}
\n {getPrice()}
\n\n \n {additional.maxQuantityPerBooking === 1 ? (\n \n ) : (\n {\n onNumberChange(value ? parseInt(value) : 0);\n }}\n inputClass=\"form-control number constant-arrows\"\n wrapperClass=\"quantity\"\n min={0}\n id={additional.id}\n options={{\n pattern: '[0-9]*',\n inputMode: 'numeric',\n min: 0,\n max: additional.maxQuantityPerBooking,\n }}\n disabled={additional.isRequired || additional.availableStock < 1}\n />\n )}\n
\n \n );\n };\n\n return (\n \n {additional.type?.toLowerCase() === 'insurance' && getInsuranceComponent(additional)}\n {additional.type?.toLowerCase() === 'additional' && getAdditionalComponent(additional)}\n
\n );\n};\n\nAdditionalCard.propTypes = {\n additional: PropTypes.shape({}),\n listAdditionals: PropTypes.array,\n onAdditionalChange: PropTypes.func,\n seeMore: PropTypes.string,\n seeLess: PropTypes.string,\n nameMaxLength: PropTypes.number,\n nameCharsSplit: PropTypes.number,\n insuranceImage: PropTypes.bool,\n additionalImage: PropTypes.bool,\n t: PropTypes.func,\n settings: PropTypes.shape({\n theme: PropTypes.string,\n }),\n value: PropTypes.shape({\n number: PropTypes.number,\n }),\n};\n\nconst mapStateToProps = ({ bookings, siteConfiguration, global }) => ({\n listAdditionals: bookings.listAdditionals,\n settings: siteConfiguration.settings,\n currentCurrency: global.currentCurrency,\n defaultCurrency: global.defaultCurrency,\n webCurrency: global.webCurrency,\n});\n\nexport default connect(mapStateToProps)(withTranslation()(AdditionalCard));\n","import React from 'react';\nimport { orderBy, groupBy } from 'lodash';\nimport { connect } from 'react-redux';\nimport FormFile from 'react-bootstrap/FormFile';\nimport { props, defaultProps } from './CheckoutAdditionals.props';\nimport { StyledAdditionals } from './CheckoutAdditionals.styled';\nimport {\n Title,\n Btn,\n TextInput,\n Paragraph,\n CustomLoading,\n LoginForm,\n TextAreaInput,\n DateInput,\n} from 'components/';\nimport AdditionalRow from './AdditionalRow';\nimport { withTranslation } from 'react-i18next';\nimport { tt, tlink } from '../../../utils/translationHelper';\nimport { debounce } from '../../../utils/debounceHelper';\nimport { withRouter } from 'react-router-dom';\nimport * as yup from 'yup';\nimport { CheckboxInput, PaymentMethods, SelectInput } from '/components';\nimport { CheckoutMobileDetails, CheckoutFilter } from '/sections';\nimport { history } from '../../../store';\nimport { book } from '../../../actions/bookings.actions';\nimport {\n fetchDocumentTypes,\n fetchCountries,\n fetchCities,\n fetchFiscalConditions,\n} from '../../../actions/global.actions';\nimport { handleLogOut, handleLogIn } from 'actions';\nimport {\n is_gtag_enabled,\n gtag_additional_impresions,\n gtag_checkout_process,\n gtag_purchase,\n gtag_manage_shopping_cart,\n} from '../../../utils/googleTagsHelper';\n\nimport {\n cleanRUT,\n getDocumentSample,\n isValidDocument,\n transformDocTypesToSelectOptions,\n transformFiscalConditionsToSelectOptions,\n} from '../../../utils/documentHelper';\nimport { MODERN_THEME } from 'styled/constants';\nimport { StyledAdditionalsModern } from './CheckoutAdditionals.style.modern';\nimport {\n convertToBase64,\n getDocumentMask,\n getDocumentTypeName,\n isCompanyUser,\n transformCountriesToSelectOptions,\n} from 'utils/dataHelper';\nimport { Modal } from 'react-bootstrap';\nimport { register } from 'services/userService';\nimport moment from 'moment';\nimport Alert from 'react-bootstrap/Alert';\nimport AdditionalCard from './AdditionalCard';\nimport 'react-phone-number-input/style.css';\nimport PhoneInputWithCountrySelect from 'react-phone-number-input';\n\nclass CheckoutAdditionals extends React.Component {\n constructor(props) {\n const {\n t,\n withBillingInformation,\n hideZipCode,\n showIsCompany,\n profile,\n settings: {\n featureFlags,\n configurations: { fiscalConditionValidation },\n myAccountConfiguration,\n },\n bookingsConfiguration,\n booking,\n } = props;\n super(props);\n\n this.state = {\n additionals: [],\n isInsuranceSelected: false,\n documentTypes: [],\n fiscalConditions: [],\n customDelivery: booking?.deliveryPlace?.canAddCustomAddress ? true : false,\n customReturn: booking?.returnPlace?.canAddCustomAddress ? true : false,\n userInfo: {\n isCustomAddress: false,\n tcAccept: featureFlags?.hideTermsCheckbox ? true : false,\n paymentMethod: false,\n paymentMethodObj: null,\n showPaymentMethod:\n this.props.settings.paymentConfiguration != null &&\n this.props.onlinePayment &&\n this.props.settings.paymentConfiguration.paymentMethods != null,\n showBillingFields: withBillingInformation !== undefined ? withBillingInformation : false,\n tenantDocumentTypes: [],\n tenantFiscalConditions: [],\n fiscalConditionId: null,\n hideFiscalCondition: featureFlags?.hideFiscalCondition || false,\n registerMe: false,\n hideAddressField: this.props.hideAddressField || false,\n hideCountryField: this.props.hideCountryField || false,\n hideDocumentField: this.props.hideDocumentField || false,\n hideFlightNumber: this.props.hideFlightNumber || false,\n hidePhoneField: this.props.hidePhoneField || false,\n airlineField: this.props.airlineField || false,\n hideZipCode: hideZipCode !== undefined ? hideZipCode : false,\n showIsCompany: showIsCompany !== undefined ? showIsCompany : false,\n isCompany: false,\n loggedAsCompany: isCompanyUser(profile),\n withPurchaseOrder: null,\n withPurchaseOrderFile: null,\n companyFiles: [],\n enableLicenseData:\n featureFlags.enableLicenseData != undefined ? featureFlags.enableLicenseData : false,\n enableCityInput:\n featureFlags.enableCityInput != undefined ? featureFlags.enableCityInput : false,\n enableStateInput:\n featureFlags.enableStateInput != undefined ? featureFlags.enableStateInput : false,\n showBirthDateField:\n featureFlags.showBirthDateField != undefined ? featureFlags.showBirthDateField : false,\n birthDate: null,\n forceRutWhenChile:\n featureFlags.forceRutWhenChile != undefined ? featureFlags.forceRutWhenChile : false,\n showCompanyExtraDocumentsFields:\n myAccountConfiguration?.showCompanyExtraDocumentsFields != undefined\n ? myAccountConfiguration.showCompanyExtraDocumentsFields\n : false,\n hidePurchaseOrderFields: myAccountConfiguration?.hidePurchaseOrderFields || false,\n requireNotes: myAccountConfiguration?.requireNotes || false,\n showAddressAllFields:\n featureFlags.showAddressAllFields != undefined\n ? featureFlags.showAddressAllFields\n : false,\n },\n formErrors: {\n firstName: '',\n lastName: '',\n email: '',\n country: '',\n birthDay: '',\n city: '',\n cityInput: '',\n stateInput: '',\n phone: '',\n address: '',\n addressNumber: '',\n addressDepartment: '',\n zipCode: '',\n id: '',\n fiscalConditionId: null,\n typeId: '',\n tcAccept: '',\n paymentMethod: '',\n flightNumber: '',\n password: '',\n repeatPassword: '',\n isCompany: '',\n driverFirstName: '',\n driverLastName: '',\n driverEmail: '',\n driverCountry: '',\n driverCity: '',\n driverPhone: '',\n driverAddress: '',\n driverAddressNumber: '',\n driverAddressDepartment: '',\n driverZipCode: '',\n driverId: '',\n driverTypeId: '',\n driverLicenseNumber: '',\n driverLicenseCountry: '',\n driverLicenseExpiration: '',\n purchaseOrder: '',\n companyFiles: '',\n notes: '',\n withPurchaseOrder: '',\n withPurchaseOrderFile: '',\n customDeliveryAddress: '',\n customDeliveryCity: '',\n customReturnAddress: '',\n customReturnCity: '',\n },\n formLoading: false,\n quotationLoading: false,\n popUpErrorShow: false,\n isCheckoutFilterVisible: true,\n modalState: false,\n sampleDocFormat: '',\n docInputFocus: false,\n sampleDriverDocFormat: '',\n docDriverInputFocus: false,\n };\n\n yup.addMethod(yup.string, 'isValidDocument', function(documentId) {\n return this.test(\n 'test-document-format',\n t('billingInformation.errors.wrongDocumentFormat'),\n function(documentId) {\n const { tenantDocumentTypes, typeId } = this.parent;\n return isValidDocument(tenantDocumentTypes, typeId, documentId);\n },\n );\n });\n\n yup.addMethod(yup.string, 'isValidDriverDocument', function(documentId) {\n return this.test(\n 'test-document-format',\n t('billingInformation.errors.wrongDocumentFormat'),\n function(documentId) {\n const { tenantDocumentTypes, driverTypeId } = this.parent;\n return isValidDocument(tenantDocumentTypes, driverTypeId, documentId);\n },\n );\n });\n\n yup.addMethod(yup.string, 'hasValidDocumentType', function(fiscalCondition) {\n return this.test(\n 'test-document-format',\n t('billingInformation.errors.wrongFiscalCondition'),\n function(fiscalCondition) {\n const taxPayerValidation = (fiscalConditionValidation || [])?.find(\n i => `${i.id}` === fiscalCondition,\n );\n\n if (!taxPayerValidation?.validDocumentIds) return true;\n else {\n const validIds = taxPayerValidation?.validDocumentIds;\n if (validIds.includes(this.parent.typeId)) return true;\n return false;\n }\n },\n );\n });\n\n yup.addMethod(yup.string, 'isValidPassword', function(password) {\n return this.test('test-password', t('passwordError'), function(password) {\n return password.length > 5;\n });\n });\n\n yup.addMethod(yup.string, 'isValidRepeatPassword', function(repeatPassword) {\n return this.test('test-password', t('passwordMatch'), function(repeatPassword) {\n const { password } = this.parent;\n return password === repeatPassword;\n });\n });\n\n yup.addMethod(yup.string, 'isValidCity', function(city) {\n return this.test('test-city', t('inputIsRequired', { field: t('city') }), function(city) {\n const { country } = this.parent;\n\n if (country !== 'Chile' || (country === 'Chile' && city)) return true;\n return false;\n });\n });\n\n yup.addMethod(yup.mixed, 'birthDay', function(date) {\n const driverAgeAllowedMin =\n bookingsConfiguration && bookingsConfiguration.driverAgeAllowedMin\n ? bookingsConfiguration.driverAgeAllowedMin\n : 21;\n\n const driverAgeAllowedMax =\n bookingsConfiguration && bookingsConfiguration.driverAgeAllowedMax\n ? bookingsConfiguration.driverAgeAllowedMax\n : 85;\n return this.test(\n 'birthDay',\n t('driverAgeBetween', {\n min: driverAgeAllowedMin,\n max: driverAgeAllowedMax,\n }),\n function(date) {\n const isAgeAllowed = date =>\n moment().diff(date, 'years') >= driverAgeAllowedMin &&\n moment().diff(date, 'years') <= driverAgeAllowedMax;\n return isAgeAllowed(date);\n },\n );\n });\n\n yup.addMethod(yup.mixed, 'driverLicenseExpiration', function(toDate, licenseValidDays) {\n return this.test(\n 'driverLicenseExpiration',\n t('driverLicenseExpirationMessage', { licenseValidDays }),\n function(driverLicenseExpiration) {\n if (!driverLicenseExpiration) {\n return true;\n }\n\n const toDateMoment = moment(toDate, 'DD-MM-YYYY');\n const driverLicenseExpirationMoment = moment(driverLicenseExpiration);\n const toDatePlusDaysMoment = toDateMoment.add(licenseValidDays, 'days');\n\n const isValid = toDatePlusDaysMoment.isSameOrBefore(driverLicenseExpirationMoment);\n\n return isValid;\n },\n );\n });\n\n yup.addMethod(yup.string, 'isValidDriverCity', function(city) {\n return this.test('test-city', t('inputIsRequired', { field: t('city') }), function(city) {\n const { driverCountry } = this.parent;\n\n if (driverCountry !== 'Chile' || (driverCountry === 'Chile' && city)) return true;\n return false;\n });\n });\n\n yup.addMethod(yup.array, 'areCompanyFilesValid', function(companyFiles) {\n return this.test('company-files', t('companyFilesError'), function(companyFiles) {\n if (companyFiles.length === 0 || companyFiles.some(f => !f.name || !f.file)) {\n return false;\n }\n return true;\n });\n });\n\n yup.addMethod(yup.boolean, 'isWithPurchaseOrderSelected', function() {\n return this.test('with-purchase-order', t('withPurchaseOrderError'), function(\n withPurchaseOrder,\n ) {\n if (withPurchaseOrder === null) return false;\n return true;\n });\n });\n\n yup.addMethod(yup.boolean, 'isWithPurchaseOrderFileUndefined', function() {\n return this.test('with-purchase-order-file', t('withPurchaseOrderError'), function(\n withPurchaseOrderFile,\n ) {\n if (withPurchaseOrderFile === null) return false;\n return true;\n });\n });\n\n this.userInfoFormSchema = yup.object().shape({\n firstName: yup.string().required(t('inputIsRequired', { field: t('name') })),\n lastName: yup.string().required(t('inputIsRequired', { field: t('lastname') })),\n email: yup\n .string()\n .email(t('validEmail'))\n .required(t('inputIsRequired', { field: t('mail') })),\n phone: yup.string().when('hidePhoneField', {\n is: hidePhoneField => !hidePhoneField,\n then: yup.string().required(t('inputIsRequired', { field: t('phone') })),\n otherwise: yup.string(),\n }),\n flightNumber: yup.string().when('airlineField', {\n is: true,\n then: yup.string().required(t('inputIsRequired', { field: t('airline') })),\n otherwise: yup.string(),\n }),\n address: yup.string().when('hideAddressField', {\n is: hideAddressField => !hideAddressField,\n then: yup.string().required(t('inputIsRequired', { field: t('address') })),\n otherwise: yup.string(),\n }),\n customDeliveryAddress: yup.string().when('isCustomDeliveryCity', {\n is: true,\n then: yup.string().required(t('inputIsRequired', { field: t('customDeliveryAddress') })),\n otherwise: yup.string(),\n }),\n customDeliveryCity: yup.string().when('isCustomDeliveryAddress', {\n is: true,\n then: yup.string().required(t('inputIsRequired', { field: t('customDeliveryCity') })),\n otherwise: yup.string(),\n }),\n customReturnAddress: yup.string().when('isCustomReturnCity', {\n is: true,\n then: yup.string().required(t('inputIsRequired', { field: t('customReturnAddress') })),\n otherwise: yup.string(),\n }),\n customReturnCity: yup.string().when('isCustomReturnAddress', {\n is: true,\n then: yup.string().required(t('inputIsRequired', { field: t('customReturnCity') })),\n otherwise: yup.string(),\n }),\n id: yup.string().when('forceRutWhenChile', {\n is: true,\n then: yup\n .string()\n .isValidDocument()\n .required(t('inputIsRequired', { field: t('document') })),\n otherwise: yup.string().when('hideDocumentField', {\n is: hideDocumentField => !hideDocumentField,\n then: yup\n .string()\n .isValidDocument()\n .required(t('inputIsRequired', { field: t('document') })),\n otherwise: yup.string(),\n }),\n }),\n isCustomAddress: yup.boolean(),\n tcAccept: yup\n .boolean()\n .required(t('mustAcceptTermAndConditions'))\n .oneOf([true], t('mustAcceptTermAndConditions')),\n showPaymentMethod: yup.boolean(),\n paymentMethod: yup\n .boolean()\n .required(t('mustHaveOnePaymentMethod'))\n .when('showPaymentMethod', {\n is: true,\n then: yup.boolean().oneOf([true], t('mustHaveOnePaymentMethod')),\n }),\n country: yup.string().when(['hideCountryField', 'showBillingFields'], {\n is: (hideCountryField, showBillingFields) => !hideCountryField || showBillingFields,\n then: yup.string().required(t('inputIsRequired', { field: t('country') })),\n otherwise: yup.string(),\n }),\n showBirthDateField: yup.boolean(),\n birthDay: yup.date().when('showBirthDateField', {\n is: true,\n then: yup\n .date()\n .birthDay()\n .required(t('inputIsRequired', { field: t('birthDay') })),\n }),\n addressNumber: yup.string().when('showBillingFields', {\n is: true,\n then: yup\n .string()\n .typeError(t('invalidNumber'))\n .required(t('inputIsRequired', { field: t('addressNumber') })),\n }),\n zipCode: yup.string().when(['showBillingFields', 'hideZipCode'], {\n is: (showBillingFields, hideZipCode) => showBillingFields && !hideZipCode,\n then: yup.string().required(t('inputIsRequired', { field: t('zipCode') })),\n }),\n typeId: yup.number().when('showBillingFields', {\n is: true,\n then: yup.number().required(t('inputIsRequired', { field: t('tipodocumento') })),\n }),\n fiscalConditionId: yup\n .string()\n .nullable()\n .when(['showBillingFields', 'hideFiscalCondition'], {\n is: (showBillingFields, hideFiscalCondition) => showBillingFields && !hideFiscalCondition,\n then: yup\n .string()\n .nullable()\n .hasValidDocumentType()\n .required(\n t('inputIsRequired', {\n field: t('billingInformation.fields.fiscalCondition'),\n }),\n ),\n }),\n city: yup.string().isValidCity(),\n password: yup.string().when('registerMe', {\n is: true,\n then: yup\n .string()\n .isValidPassword()\n .required(t('inputIsRequired', { field: t('myAccount.password') })),\n }),\n repeatPassword: yup.string().when('registerMe', {\n is: true,\n then: yup\n .string()\n .isValidRepeatPassword()\n .required(t('inputIsRequired', { field: t('myAccount.repeatPassword') })),\n }),\n isCompany: yup.boolean(),\n enableLicenseData: yup.boolean(),\n driverFirstName: yup.string().when('isCompany', {\n is: true,\n then: yup.string().required(t('inputIsRequired', { field: t('name') })),\n }),\n driverLastName: yup.string().when('isCompany', {\n is: true,\n then: yup.string().required(t('inputIsRequired', { field: t('lastname') })),\n }),\n driverEmail: yup\n .string()\n .email(t('validEmail'))\n .when('isCompany', {\n is: true,\n then: yup.string().required(t('inputIsRequired', { field: t('mail') })),\n }),\n driverPhone: yup.string().when('isCompany', {\n is: true,\n then: yup.string().required(t('inputIsRequired', { field: t('phone') })),\n }),\n driverAddress: yup.string().when('isCompany', {\n is: true,\n then: yup.string().required(t('inputIsRequired', { field: t('address') })),\n }),\n driverId: yup.string().when('isCompany', {\n is: true,\n then: yup\n .string()\n .isValidDriverDocument()\n .required(t('inputIsRequired', { field: t('document') })),\n }),\n driverCountry: yup.string().when(['isCompany', 'showBillingFields'], {\n is: (isCompany, showBillingFields) => isCompany && showBillingFields,\n then: yup.string().required(t('inputIsRequired', { field: t('country') })),\n }),\n driverAddressNumber: yup.string().when(['isCompany', 'showBillingFields'], {\n is: (isCompany, showBillingFields) => isCompany && showBillingFields,\n then: yup\n .string()\n .typeError(t('invalidNumber'))\n .required(t('inputIsRequired', { field: t('addressNumber') })),\n }),\n driverZipCode: yup.string().when(['isCompany', 'showBillingFields', 'hideZipCode'], {\n is: (isCompany, showBillingFields, hideZipCode) =>\n isCompany && showBillingFields && !hideZipCode,\n then: yup.string().required(t('inputIsRequired', { field: t('zipCode') })),\n }),\n driverTypeId: yup.number().when(['isCompany', 'showBillingFields'], {\n is: (isCompany, showBillingFields) => isCompany && showBillingFields,\n then: yup.number().required(t('inputIsRequired', { field: t('tipodocumento') })),\n }),\n driverCity: yup.string().isValidDriverCity(),\n companyFiles: yup.array().when(['loggedAsCompany', 'withPurchaseOrderFile'], {\n is: true,\n then: yup\n .array()\n .areCompanyFilesValid()\n .required(t('companyFilesError')),\n }),\n cityInput: yup.string().when(['enableCityInput'], {\n is: true,\n then: yup.string().required(t('inputIsRequired', { field: t('cityInput') })),\n }),\n stateInput: yup.string().when(['enableStateInput'], {\n is: true,\n then: yup.string().required(t('inputIsRequired', { field: t('stateInput') })),\n }),\n driverLicenseNumber: yup.string().when(['enableLicenseData'], {\n is: true,\n then: yup.string().required(t('inputIsRequired', { field: t('driverLicenseNumber') })),\n }),\n driverLicenseCountry: yup.string().when(['enableLicenseData'], {\n is: true,\n then: yup.string().required(t('inputIsRequired', { field: t('driverLicenseCountry') })),\n }),\n driverLicenseExpiration: yup.string().when('enableLicenseData', {\n is: true,\n then: yup\n .string()\n .required(t('inputIsRequired', { field: t('driverLicenseExpiration') }))\n .driverLicenseExpiration(\n this.props.bookingParams.dateTo,\n this.props.settings.featureFlags.licenseValidDays,\n ),\n }),\n withPurchaseOrder: yup\n .boolean()\n .nullable()\n .when(['loggedAsCompany', 'showCompanyExtraDocumentsFields', 'hidePurchaseOrderFields'], {\n is: (loggedAsCompany, showCompanyExtraDocumentsFields, hidePurchaseOrderFields) =>\n loggedAsCompany && showCompanyExtraDocumentsFields && !hidePurchaseOrderFields,\n then: yup\n .boolean()\n .nullable()\n .isWithPurchaseOrderSelected()\n .required(t('withPurchaseOrderError')),\n }),\n withPurchaseOrderFile: yup\n .boolean()\n .nullable()\n .when(['loggedAsCompany', 'withPurchaseOrder', 'showCompanyExtraDocumentsFields'], {\n is: true,\n then: yup\n .boolean()\n .nullable()\n .isWithPurchaseOrderFileUndefined(),\n }),\n notes: yup.string().when('requireNotes', {\n is: true,\n then: yup.string().required(t('inputIsRequired', { field: t('notes') })),\n }),\n });\n this.formRef = React.createRef(null);\n }\n\n async componentDidMount() {\n const {\n fetchPrices,\n fetchBookingAdditionals,\n fetchDocumentTypes,\n fetchFiscalConditions,\n bookingParams,\n booking,\n i18n,\n searchCars: {\n checkout: { onlinePayment },\n },\n listDocumentTypes,\n listTaxPayerTypes,\n countries,\n fetchCountries,\n profile,\n } = this.props;\n\n if (this.state.userInfo.showBillingFields) {\n const tenantDocumentTypes =\n listDocumentTypes || (await fetchDocumentTypes(i18n.language)).payload;\n\n const tenantFiscalConditions =\n listTaxPayerTypes || (await fetchFiscalConditions(i18n.language))?.payload;\n\n this.setState(prevState => ({\n ...prevState,\n fiscalConditions: tenantFiscalConditions,\n }));\n\n this.setState(prevState => ({\n ...prevState,\n userInfo: { ...prevState.userInfo, tenantDocumentTypes },\n }));\n }\n\n if (!countries) await fetchCountries(i18n.language);\n\n if (booking && bookingParams) {\n const globalId = profile ? profile.globalId : bookingParams.agencyGuid ?? null;\n fetchBookingAdditionals(bookingParams, booking, i18n.language, globalId);\n fetchPrices(\n i18n.language,\n this.state.additionals,\n bookingParams,\n booking,\n false,\n onlinePayment,\n globalId,\n );\n }\n\n if (profile && !profile.isCompany && !profile.isAgency) {\n if (profile.country && profile.city) {\n const countryInfo = (countries || []).find(c => c.name === profile.country);\n if (countryInfo) await fetchCities(countryInfo.isoCode3166);\n }\n\n this.setState({\n ...this.state,\n userInfo: {\n ...this.state.userInfo,\n firstName: profile.firstName || '',\n lastName: profile.lastName || '',\n id: profile.documentId || '',\n email: profile.emailAddress || '',\n address: profile.address || '',\n ...(profile.addressNumber && {\n addressNumber: profile.addressNumber,\n }),\n ...(profile.addressDepartment && {\n addressDepartment: profile.addressDepartment,\n }),\n ...(profile.documentTypeId && { typeId: profile.documentTypeId }),\n ...(profile.fiscalConditionId && {\n fiscalConditionId: profile.fiscalConditionId,\n }),\n ...(profile.cellPhone && { phone: profile.cellPhone }),\n ...(profile.zipCode && { zipCode: profile.zipCode || '' }),\n ...(profile.country && { country: profile.country }),\n ...(profile.city && { city: profile.city }),\n ...(profile.region && { region: profile.region }),\n ...(profile.state && { state: profile.state }),\n ...(profile.globalId && { globalId: profile.globalId }),\n },\n });\n }\n }\n\n componentDidUpdate(prevProps, prevState) {\n const {\n listAdditionals,\n settings,\n settings: {\n configurations: { googleTagManager },\n },\n isWidget,\n } = this.props;\n\n // Add required additional\n if (prevProps.listAdditionals !== listAdditionals && listAdditionals.length) {\n listAdditionals.forEach(a => {\n if (a.isRequired || a.isDefault) {\n this.onAdditionalChange({ id: a.id, number: 1, type: a.type });\n }\n });\n }\n\n if (prevProps.listAdditionals !== listAdditionals && is_gtag_enabled(googleTagManager)) {\n const groupedAdditionals = this.groupByAdditionals(listAdditionals);\n const additionalTypes = ['additional', 'insurance', 'other'];\n gtag_additional_impresions(groupedAdditionals, additionalTypes, settings);\n gtag_checkout_process({ number: 1, option: 'Additionals' }, this.props.booking, settings);\n }\n\n if (isWidget) {\n window.top.postMessage(\n {\n height: document.body.scrollHeight,\n width: document.body.scrollWidth,\n },\n '*',\n );\n }\n }\n\n debouncedAdditionalChange = debounce((additionals, actionObject) => {\n const {\n fetchPrices,\n searchCars: {\n params,\n checkout: { booking, onlinePayment },\n },\n settings: {\n configurations: { googleTagManager },\n },\n listAdditionals,\n bookingsConfiguration,\n profile,\n i18n,\n t,\n } = this.props;\n const globalId = profile ? profile.globalId : params.agencyGuid ?? null;\n const isInsuranceSelected = additionals.some(\n additional => additional.type.toLowerCase() === 'insurance',\n );\n // Update state isInsuranceSelected\n if (bookingsConfiguration?.mustHaveAtLeastOneInsurance) {\n this.setState({ isInsuranceSelected });\n }\n fetchPrices(i18n.language, additionals, params, booking, false, onlinePayment, globalId);\n\n if (is_gtag_enabled(googleTagManager) && actionObject) {\n const fullInfoAdditional = listAdditionals.find(add => add.id === actionObject.additionalId);\n gtag_manage_shopping_cart(fullInfoAdditional, actionObject, booking);\n }\n }, 500);\n\n getAdditionalInfo = id => {\n const { listAdditionals } = this.props;\n const additional = listAdditionals.find(add => add.id === id);\n\n if (additional) {\n return { ...additional, excludes: additional.excludes || [] };\n }\n return { excludes: [] };\n };\n\n onAdditionalChange = additional => {\n const exists = this.state.additionals.find(a => a.id === additional.id);\n\n let additionals = this.state.additionals;\n\n const actionObject = this.parseActionObject(exists, additional);\n\n if (exists) {\n const index = additionals.indexOf(exists);\n additionals.splice(index, 1);\n }\n\n if (additional.number > 0) {\n additionals.push(additional);\n\n // Removed excluded\n additionals = additionals.filter(a => {\n const notExcludedInCurrent = !this.getAdditionalInfo(additional.id).excludes.includes(a.id);\n const notExcludedInOthers = !this.getAdditionalInfo(a.id).excludes.includes(additional.id);\n\n return notExcludedInCurrent && notExcludedInOthers;\n });\n }\n this.setState({ additionals });\n this.debouncedAdditionalChange(additionals, actionObject);\n };\n\n isExcludedAdditional = additional => {\n return this.state.additionals.find(a => a.id === additional.id) ? false : true;\n };\n\n parseActionObject = (previousAdditional, currentAdditional) => {\n let action = null;\n\n if (!previousAdditional)\n return {\n type: 'add',\n amount: currentAdditional.number,\n additionalId: currentAdditional.id,\n };\n\n if (previousAdditional.number > currentAdditional.number)\n action = {\n type: 'remove',\n amount: currentAdditional.number,\n additionalId: currentAdditional.id,\n };\n\n if (currentAdditional.number > previousAdditional.number)\n action = {\n type: 'add',\n amount: currentAdditional.number,\n additionalId: currentAdditional.id,\n };\n\n return action;\n };\n\n logIn = () => {\n const profile = this.props.profile;\n this.setState({\n ...this.state,\n userInfo: {\n ...this.state.userInfo,\n firstName: profile.firstName || '',\n lastName: profile.lastName || '',\n id: profile.documentId || '',\n email: profile.emailAddress || '',\n address: profile.address || '',\n ...(profile.addressNumber && {\n addressNumber: profile.addressNumber,\n }),\n ...(profile.addressDepartment && {\n addressDepartment: profile.addressDepartment,\n }),\n ...(profile.documentTypeId && { typeId: profile.documentTypeId }),\n ...(profile.fiscalConditionId && {\n fiscalConditionId: profile.fiscalConditionId,\n }),\n ...(profile.cellPhone && { phone: profile.cellPhone }),\n ...(profile.zipCode && { zipCode: profile.zipCode || '' }),\n ...(profile.country && { country: profile.country }),\n ...(profile.city && { city: profile.city }),\n ...(profile.region && { region: profile.region }),\n ...(profile.state && { state: profile.state }),\n ...(profile.globalId && { globalId: profile.globalId }),\n registerMe: false,\n loggedAsCompany: isCompanyUser(profile),\n },\n showLoginModal: false,\n });\n };\n\n logOut = async e => {\n e.preventDefault();\n await this.props.handleLogOut();\n\n const {\n addressNumber,\n addressDepartment,\n typeId,\n fiscalConditionId,\n zipCode,\n city,\n region,\n state,\n globalId,\n ...newUserInfo\n } = this.state.userInfo;\n\n this.setState({\n ...this.state,\n userInfo: newUserInfo,\n });\n };\n\n handleSubmit = e => {\n e.preventDefault();\n const { hideDocumentField, isOnRequest } = this.props;\n\n const idValue = hideDocumentField ? '' : this.state.userInfo.id;\n\n const userInfo = {\n ...this.state.userInfo,\n id: idValue,\n isOnRequest: isOnRequest,\n };\n let popUpErrorShow = this.state.popUpErrorShow;\n const {\n booking,\n settings,\n settings: {\n configurations: { googleTagManager },\n },\n searchCars: { params },\n handleLogIn,\n t,\n profile,\n } = this.props;\n this.userInfoFormSchema\n .validate(userInfo, { abortEarly: false })\n .then(async valid => {\n if (is_gtag_enabled(googleTagManager))\n gtag_checkout_process({ step: 2, option: 'Products selected' }, booking, settings);\n if (valid) {\n let userInfoWithGlobalId = {\n ...userInfo,\n driverAge: params.driverAge,\n profileIsCompany: profile && (profile.isCompany || profile.isAgency),\n profileGlobalId: profile && profile.globalId,\n };\n if (this.state.userInfo.registerMe) {\n try {\n this.setState({ formLoading: true });\n const response = await register(\n userInfo.firstName,\n userInfo.lastName,\n userInfo.email,\n userInfo.password,\n );\n if (response.globalId) {\n userInfoWithGlobalId = {\n ...userInfoWithGlobalId,\n globalId: response.globalId,\n };\n }\n await handleLogIn(userInfo.email, userInfo.password);\n } catch (error) {\n const message = error.response && error.response.data.message;\n this.setState({ formLoading: false });\n return alert(message || t('registerError'));\n }\n }\n this.book(userInfoWithGlobalId);\n }\n })\n .catch(err => {\n const formErrors = err.inner\n ? err.inner.reduce((prevErrors, currentError) => {\n return {\n ...prevErrors,\n [currentError.path]: currentError.message,\n };\n }, {})\n : {};\n window.scrollTo(0, this.formRef.current.offsetTop);\n popUpErrorShow = true;\n this.setState(prevState => ({\n ...prevState,\n formErrors,\n popUpErrorShow,\n }));\n });\n };\n\n handlesendQuotation = e => {\n e.preventDefault();\n let userInfo = this.state.userInfo;\n userInfo['isQuotation'] = true;\n this.setState({ formLoading: true });\n\n this.userInfoFormSchema\n .validate(userInfo, { abortEarly: false })\n .then(valid => {\n if (valid) this.sendQuotation(userInfo);\n })\n .catch(err => {\n const formErrors = err.inner.reduce((prevErrors, currentError) => {\n return { ...prevErrors, [currentError.path]: currentError.message };\n }, {});\n window.scrollTo(0, this.formRef.current.offsetTop);\n this.setState(prevState => ({\n ...prevState,\n formErrors,\n formLoading: false,\n }));\n });\n };\n\n sendQuotation = info => {\n const {\n booking,\n book,\n bookingParams,\n t,\n i18n,\n settings,\n searchCars: { params },\n } = this.props;\n this.setState({ quotationLoading: true });\n\n const userInfo = { ...info, driverAge: params.driverAge };\n\n book(booking, userInfo, bookingParams, true, i18n.language)\n .then(res => {\n if (booking.onlyQuote)\n history.push(\n tlink('__Routes.toRequireSuccess', t, i18n, null, settings.configurations.langConfig),\n );\n\n history.push(\n tlink('__Routes.quotationSuccess', t, i18n, null, settings.configurations.langConfig),\n );\n })\n .catch(error => {\n history.push(\n tlink('__Routes.quotationFail', t, i18n, null, settings.configurations.langConfig),\n );\n });\n };\n\n book = info => {\n const {\n booking,\n book,\n bookingParams,\n t,\n onlinePayment,\n i18n,\n settings,\n settings: {\n configurations: { googleTagManager },\n },\n searchCars: { params },\n bookOnCounterNeedsConfirmation,\n } = this.props;\n\n bookingParams['onlinePayment'] = this.props.onlinePayment;\n this.setState({ formLoading: true });\n let state = this.state;\n let isPaymentsConfig =\n settings.paymentConfiguration && settings.paymentConfiguration.paymentMethods;\n\n var needsCreditCardInformation = bookOnCounterNeedsConfirmation;\n const userInfo = { ...info, driverAge: params.driverAge };\n\n book(booking, userInfo, bookingParams, false, i18n.language)\n .then(res => {\n if (onlinePayment) {\n if (isPaymentsConfig) {\n history.push(\n tlink('__Routes.onlinePayment', t, i18n, null, settings.configurations.langConfig),\n { paymentMethod: state.userInfo.paymentMethodObj.component },\n );\n } else {\n history.push(\n tlink('__Routes.onlinePayment', t, i18n, null, settings.configurations.langConfig),\n );\n }\n window.scrollTo(0, 0);\n } else {\n const subtitle = t('feedbackBoxMessages.book.successSubtitle', {\n booking_id: res.payload.id,\n });\n if (is_gtag_enabled(googleTagManager)) {\n booking.id = res.payload.id;\n booking.customer = res.payload.customer;\n gtag_purchase(booking, settings);\n }\n\n if (needsCreditCardInformation) {\n history.push(\n tlink('__Routes.onlinePayment', t, i18n, null, settings.configurations.langConfig),\n { paymentMethod: 'CreditCardConfirmationComponent' },\n );\n } else {\n history.push(\n tlink('__Routes.bookSuccess', t, i18n, null, settings.configurations.langConfig),\n { subtitle },\n );\n }\n }\n })\n .catch(error => {\n history.push(\n tlink('__Routes.bookFailed', t, i18n, null, settings.configurations.langConfig),\n );\n });\n };\n\n goBack = () => {\n this.props.history.goBack();\n };\n\n getBookingButtonText() {\n const {\n payBookingButtonText,\n bookBookingButtonText,\n t,\n onlinePayment,\n quoteBtn,\n searchCars: {\n checkout: { booking },\n },\n } = this.props;\n\n if (booking.onlyQuote) return t(quoteBtn) || t('quoteBooking');\n if (!onlinePayment) return bookBookingButtonText || t('bookBooking');\n return payBookingButtonText || t('payBooking');\n }\n\n getConditionsLink() {\n const { t, conditionsLink } = this.props;\n if (conditionsLink) {\n return t(conditionsLink);\n }\n return '/condiciones';\n }\n\n getPrivacyLink() {\n const { t, privacyLink } = this.props;\n if (privacyLink) {\n return t(privacyLink);\n }\n return '/privacidad';\n }\n\n openModal = () => {\n const modalState = true;\n const isCheckoutFilterVisible = false;\n\n this.setState({ modalState, isCheckoutFilterVisible });\n };\n\n closeModal = () => {\n const modalState = false;\n const isCheckoutFilterVisible = true;\n\n this.setState({ modalState, isCheckoutFilterVisible });\n };\n\n filterByAgreement = (additionals, commercialAgreementCode, commercialAgreementExtras) => {\n // if no commercial agreement code is provided, filter all commercialAgreementExtras\n const additionalList = additionals || [];\n const extras = commercialAgreementExtras || [];\n if (!commercialAgreementCode)\n return additionalList.filter(a => {\n return !extras.find(c => c.id === a.id);\n });\n\n const matchedExtrasIds = extras\n .filter(c => c.agreementId.includes(commercialAgreementCode))\n .map(c => c.id);\n\n // filter all commercialAgreementExtras except matched ones\n return additionalList.filter(a => {\n return !extras.find(c => c.id === a.id) || matchedExtrasIds.includes(a.id);\n });\n };\n\n groupByAdditionals = additionals => {\n const orderedListAdditionals = orderBy(\n additionals,\n ['isRequired', 'order', 'name'],\n ['desc', 'asc', 'asc'],\n );\n\n return groupBy(orderedListAdditionals, a => a.type.toLowerCase());\n };\n\n parseTermsAndConditionsBlock = () => {\n const { t, customTermsAndConditions } = this.props;\n\n if (customTermsAndConditions) {\n return (\n \n \n
\n {!hidePurchaseOrderFields && (\n \n {bookingBackupInformationTitle\n ? tt(bookingBackupInformationTitle, t)\n : t('confirmationBackup')}\n
\n\n this.handleRequirePurchaseOrder(true)}\n checked={withPurchaseOrder !== null ? withPurchaseOrder : undefined}\n text={t('bookingWithPO')}\n wrapperId=\"with_documents-input\"\n />\n {withPurchaseOrder && (\n <>\n this.handleWithPurchaseOrderFile(true)}\n checked={withPurchaseOrderFile !== null ? withPurchaseOrderFile : false}\n text={t('attachPO')}\n wrapperId=\"with_documents_file-input\"\n className=\"col-md-12\"\n />\n this.handleWithPurchaseOrderFile(false)}\n checked={withPurchaseOrderFile !== null ? !withPurchaseOrderFile : false}\n text={\n <>\n {t('takeBookingWithoutPO')}{' '}\n {t('noPurchaseOrderUploaded')}\n \n }\n wrapperId=\"without_purchase_order-input\"\n className=\"col-md-12 mb-3\"\n />\n {formErrors.withPurchaseOrderFile && (\n this.handleRequirePurchaseOrder(false)}\n checked={withPurchaseOrder !== null ? !withPurchaseOrder : undefined}\n text={t('bookingWithoutPO')}\n error={formErrors.withPurchaseOrder}\n wrapperId=\"without_documents-input\"\n />\n
\n )}\n \n
\n );\n })}\n \n this.onFileNameChange(value, idx)}\n />\n this.handleDeleteFile(idx)}\n >\n \n \n
\n \n
\n \n
\n {formErrors.companyFiles}
\n )}\n \n
\n )}\n \n )}\n {formErrors.withPurchaseOrderFile}
\n\n
\n \n
\n {customAddressAlertContent}
\n\n \n )}\n
\n \n \n
\n\n {!listAdditionals && (\n \n
\n \n {tt(subtitle, t)}
\n\n {listAdditionalsByType?.insurance && (\n <>\n \n \n {listAdditionalsByType?.insurance?.map((additional, key) => (\n
\n )}\n\n {additionalComponentVersionEnum[additionalComponentVersion] === 'NEW' && (\n \n \n {listAdditionalsByType?.additional?.map((additional, key) => (\n
\n )}\n\n {additionalComponentVersionEnum[additionalComponentVersion] === 'NEW' && (\n \n \n {listAdditionalsByType?.other?.map((additional, key) => (\n
\n \n )}\n
\n\n \n
\n {(!additionalComponentVersion ||\n additionalComponentVersionEnum[additionalComponentVersion] === 'CLASSIC') && (\n \n
\n )}\n \n {listAdditionalsByType?.insurance?.map((additional, key) => (\n a.id === additional.id)}\n onAdditionalChange={this.onAdditionalChange}\n seeMore={tt(seeMore, t)}\n seeLess={tt(seeLess, t)}\n insuranceImage={insuranceImage}\n additionalImage={additionalImage}\n nameMaxLength={tt(nameMaxLength, t)}\n nameSplitNumber={tt(nameCharsSplit, t)}\n currentCurrency={this.props.currentCurrency}\n defaultCurrency={this.props.defaultCurrency}\n webCurrency={this.props.webCurrency}\n />\n ))}\n
\n )}\n \n )}\n {listAdditionalsByType?.additional && (\n <>\n \n {listAdditionalsByType?.additional?.map((additional, key) => (\n a.id === additional.id)}\n onAdditionalChange={this.onAdditionalChange}\n seeMore={tt(seeMore, t)}\n seeLess={tt(seeLess, t)}\n insuranceImage={insuranceImage}\n additionalImage={additionalImage}\n nameMaxLength={tt(nameMaxLength, t)}\n nameSplitNumber={tt(nameCharsSplit, t)}\n />\n ))}\n
\n )}\n \n )}\n {listAdditionalsByType?.other && (\n <>\n \n \n {showIsCompany && (!profile || !loggedAsCompany) && (\n
\n {featureFlags && featureFlags.customerRegistration && !isAuthenticated && (\n \n
\n \n
\n \n
\n {featureFlags && featureFlags.customerRegistration && (\n \n {isAuthenticated ? (\n \n ) : (\n \n this.setState({\n ...this.state,\n showLoginModal: true,\n })\n }\n >\n {t('registeredUserLink')}\n \n )}\n
\n )}\n \n
\n )}\n \n
\n \n {}}\n error={this.state.formErrors.birthDay}\n placeholder={t('birthDay')}\n id=\"birthDay-field\"\n showClearDate={true}\n date={birthDay}\n small={true}\n wrapperId=\"birthday-input\"\n wrapperClass=\"col-md-3\"\n />\n )}\n c.name) : []}\n error={this.state.formErrors.city}\n defaultOption={t(cityText) || t('city')}\n wrapperId=\"chile_city-input\"\n wrapperClass=\"col-md-3\"\n />\n )}\n {featureFlags && featureFlags.enableLicenseData && (\n <>\n {}}\n error={this.state.formErrors.driverLicenseExpiration}\n placeholder={t('driverLicenseExpiration')}\n id=\"driver-license-exp\"\n showClearDate={true}\n date={driverLicenseExpiration}\n small={true}\n wrapperId=\"driver_license_expiration-input\"\n wrapperClass=\"col-md-3 DriverLicenseExpirationContainer\"\n />\n \n
\n ) : (\n {this.state.formErrors.phone}
\n )}\n \n {customDelivery && (\n <>\n
\n \n )}\n \n
\n )}\n \n \n
\n \n \n
\n \n
\n \n
\n \n {onlinePayment &&\n paymentConfiguration &&\n paymentConfiguration.paymentMethods && (\n
\n \n
\n )}\n \n
\n \n {!booking.onlyQuote &&\n !(paymentConfiguration && paymentConfiguration.isQuotationHighligthed) &&\n !(showQuotationLink === false) && (\n \n {' '}\n {quotationLoading\n ? t('sending')\n : sendQuotationMsg\n ? tt(sendQuotationMsg, t)\n : t('sendQuotation')}\n \n )}\n {!(showPrintButton === false) && (\n window.print()} className=\"print-btn\">\n {t('print')}\n \n )}\n
\n \n
\n
\n );\n };\n\n getTemplateStyledComponent() {\n if (this.props.settings.theme.template === MODERN_THEME) {\n return StyledDetailsModern;\n }\n return StyledDetails;\n }\n\n getPriceItemsContent = () => {\n const {\n searchCars: {\n checkout: { booking },\n },\n settings: { configurations, paymentConfiguration },\n t,\n currentCurrency,\n defaultCurrency,\n webCurrency,\n } = this.props;\n\n const applyExchangeRate = applyCurrencyExchangeRate(currentCurrency, webCurrency);\n\n const getDescription = item => {\n if (item.isBookingPrice && configurations.openRate) {\n let unitPrice = applyExchangeRate\n ? getPriceWithExchangeRate(item.unitPrice, currentCurrency, defaultCurrency, webCurrency)\n : item.unitPrice;\n\n return (\n <>\n {t('openRatePriceItem', { days: item.quantity })}\n (\n \n
- \n {showFranchiseDamages && (\n
- \n {t(franchiseDamagesText) || t('franchises.franchiseDamages')}:{' '}\n
\n \n )}\n {showFranchiseRollover && (\n - \n {t(franchiseRolloverText) || t('franchises.franchiseRollover')}:{' '}\n
\n \n )}\n {showFranchiseTheft && (\n - \n {t(franchiseTheftText) || t('franchises.franchiseTheft')}:{' '}\n
\n \n )}\n {showFranchiseHail && (\n - \n {t(franchiseHailText) || t('franchises.franchiseHail')}:{' '}\n
\n \n )}\n
\n
\n \n
\n {t('bookingNotFound')}
\n \n \n {t('chooseOtherCar')}\n \n\n
\n \n
\n \n {tt(subtitle, t)} \n
\n \n
\n \n
\n \n
\n
\n
\n \n
\n \n \n {t('categoria')} \n {this.getCategoryOrGroupName(model)}\n \n {showDeposit && (\n
\n {this.getModelName(model)}
\n\n |\n \n \n {kmText}\n \n
\n \n
\n
\n \n
\n
\n \n {booking.deliveryPlace.name} -\n {dateFormatEdition(dateFrom, dateFormat)}{' '}\n {hourFrom} hs\n
\n\n {booking.returnPlace.name} -\n {dateFormatEdition(dateTo, dateFormat)}{' '}\n {hourTo} hs\n
\n\n
\n
\n {(showFranchiseDetails ||\n showFranchiseDamages ||\n showFranchiseRollover ||\n showFranchiseTheft) &&\n this.showFranchiseValues(booking)}\n - \n {this.getPriceItemsContent()}\n\n {commercialAgreementCode && (\n
- \n {' '}\n {t('commercialAgreement')} {' '}\n {commercialAgreementCode}\n \n )}\n
\n
\n {showExchangeMsg && (\n \n
\n \n
\n {this.showBookingLenght(booking)}
\n\n
\n {detailsLegend && (\n \n
\n {t('dailyPrice')}{' '}\n \n
\n {t('myAccount.customer')}:{' '}\n \n
\n {t('myAccount.agency')}:{' '}\n \n
\n {t('myAccount.commision')}:{' '}\n \n
\n {tt(detailsLegend, t)} \n
\n )}\n \n
\n )}\n {t('flexibleBooking.includes')}
\n {t('flexibleBooking.flexBooking')}\n- \n
- \n \n {t('flexibleBooking.cancel48hs')}\n \n
- \n \n {t('flexibleBooking.accidents')}\n \n
- \n \n {t('flexibleBooking.civilEnsurance')}\n \n
\n \n {`${tt(chargedMsg, t) || t('chargedMsg')} ${currentCurrency?.isoCode} ${tt(\n chargedMsg2,\n t,\n ) || t('chargedMsg2')} ${currentCurrency?.exchangeRate}`}\n \n )}\n
\n \n );\n }\n}\n\nconst mapStateToProps = ({ global }) => ({\n defaultCurrency: global.defaultCurrency,\n currentCurrency: global.currentCurrency,\n webCurrency: global.webCurrency,\n});\n\nCheckoutMobileDetails.propTypes = props;\nCheckoutMobileDetails.defaultProps = defaultProps;\n\nconst CheckoutMobileDetailsComp = withTranslation()(withRouter(CheckoutMobileDetails));\n\nexport default connect(mapStateToProps)(CheckoutMobileDetailsComp);\n","import { connect } from 'react-redux';\nimport CheckoutMobileDetails from './CheckoutMobileDetails';\n\nconst mapStateToProps = ({ global, searchCars, siteConfiguration }) => ({\n listAdditionals: global.listAdditionals,\n settings: siteConfiguration.settings,\n searchCars,\n});\n\nexport default connect(mapStateToProps)(CheckoutMobileDetails);\n","import PropTypes from 'prop-types';\n\nconst placeShape = PropTypes.shape({\n address: PropTypes.string,\n category: PropTypes.string,\n id: PropTypes.number,\n name: PropTypes.string,\n price: PropTypes.number,\n rentlyEndpointName: PropTypes.string,\n});\n\nexport const props = {\n params: PropTypes.shape({}),\n places: PropTypes.arrayOf(placeShape),\n setSearchCarParams: PropTypes.func.isRequired,\n fetchBookeableCars: PropTypes.func.isRequired,\n prefixForNumeric: PropTypes.string,\n};\n\nexport const defaultProps = {\n params: {},\n};\n","import style from 'styled-components';\n\nexport const StyledCheckoutFilter = style.section`\n min-height: 600px;\n z-index:2;\n display: none;\n box-shadow: 0 0 20px #00000017;\n margin-bottom: 20px;\n\n &.hidden{\n z-index: 0;\n }\n\n .overlay{\n width: 100%;\n height: 100vh;\n background: #00000042;\n position: absolute;\n z-index: -1;\n }\n\n @media only screen (max-width: ${props => props.theme.screens.lg}) {\n position: -webkit-sticky;\n position: sticky;\n top: 0;\n min-height: 0;\n margin-left: -2%;\n margin-right: -2%;\n width: 100vw;\n padding: 0;\n display:block !important;\n }\n\n @media only screen and (max-width: ${props => props.theme.screens.lg})\n and (min-width: ${props => props.theme.screens.md}){\n position: -webkit-sticky;\n position: sticky;\n top: 0;\n min-height: 0;\n flex: 0 0 104%;\n max-width: initial;\n width: 100vw;\n padding: 0;\n margin-left: -2%;\n margin-right: -2%;\n display: block !important;\n }\n\n @media only screen and (min-width: ${props => props.theme.screens.lg})\n and (max-width: ${props => props.theme.screens.xxl}){\n max-width: 30%;\n margin-right: 0;\n flex: 30%;\n }\n\n .searchFilter{\n box-shadow: 0 0 20px #00000026;\n\n section{\n background: transparent;\n }\n .card{\n border: none;\n margin-bottom: 0;\n background: transparent;\n }\n\n .card-header{\n border-bottom: 1px solid #f2f2f2;\n background: #fff;\n .fa-info-circle{\n display:none;\n }\n .fa-calendar-alt{\n color: ${props => props.theme.colors.buttonPrimaryBgHover};\n }\n .divider{\n color: #c2c2c2;\n }\n }\n .collapse{\n border-bottom: 1px solid #f9f7f7;\n }\n\n .card-body{\n padding: 0;\n margin: 0;\n border: none;\n background: transparent;\n\n form{\n box-shadow: none;\n margin: 0 !important;\n padding: 1.25rem 1.25rem 2rem !important;\n .col-md-12{\n margin-bottom: 0;\n }\n }\n }\n }\n\n .car-block{\n display: flex;\n justify-content: space-between;\n padding: 10px 19px;\n background: #fff;\n z-index: 2;\n\n .car-image{\n flex: 0 0 80px;\n height: fit-content;\n border: 1px solid #eeeeee;\n }\n\n .car-details{\n display:flex;\n min-width: 90%;\n\n p{\n padding: 3px 20px 0 12px;\n font-size: 13px;\n font-weight: bold;\n line-height: 13px;\n margin-bottom: 0;\n }\n span{\n font-weight: normal;\n font-size: 12px;\n margin-top: 3px;\n display: block;\n }\n }\n .othercar{\n height: fit-content;\n margin: auto;\n\n i {\n color: ${props => props.theme.colors.buttonPrimaryBgHover};\n }\n }\n\n }\n\n`;\n","import style from 'styled-components';\n\nexport const StyledCheckoutFilterModern = style.section`\n min-height: 600px;\n z-index:2;\n display: none;\n box-shadow: 0 0 20px #00000017;\n margin-bottom: 20px;\n\n &.hidden{\n z-index: 0;\n }\n\n .overlay{\n width: 100%;\n height: 100vh;\n background: #00000042;\n position: absolute;\n z-index: -1;\n }\n \n .details-item {\n text-align: center;\n margin-right: 10px;\n display: -webkit-inline-box;\n display: -webkit-inline-flex;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n}\n\n @media only screen (max-width: ${props => props.theme.screens.lg}) {\n position: -webkit-sticky;\n position: sticky;\n top: 0;\n min-height: 0;\n margin-left: -2%;\n margin-right: -2%;\n width: 100vw;\n padding: 0;\n display:block !important;\n }\n\n @media only screen and (max-width: ${props => props.theme.screens.lg})\n and (min-width: ${props => props.theme.screens.md}){\n position: -webkit-sticky;\n position: sticky;\n top: 0;\n min-height: 0;\n flex: 0 0 104%;\n max-width: initial;\n width: 100vw;\n padding: 0;\n margin-left: -2%;\n margin-right: -2%;\n display: block !important;\n }\n\n @media only screen and (min-width: ${props => props.theme.screens.lg})\n and (max-width: ${props => props.theme.screens.xxl}){\n max-width: 30%;\n margin-right: 0;\n flex: 30%;\n }\n\n .searchFilter{\n box-shadow: 0 0 20px #00000026;\n\n section{\n background: transparent;\n }\n .card{\n border: none;\n margin-bottom: 0;\n background: transparent;\n }\n\n .card-header{\n border-bottom: 1px solid #f2f2f2;\n background: #fff;\n .fa-info-circle{\n display:none;\n }\n .fa-calendar-alt{\n color: ${props => props.theme.colors.buttonPrimaryBgHover};\n }\n .divider{\n color: #c2c2c2;\n }\n }\n .collapse{\n border-bottom: 1px solid #f9f7f7;\n }\n\n .card-body{\n padding: 0;\n margin: 0;\n border: none;\n background: transparent;\n\n form{\n box-shadow: none;\n margin: 0 !important;\n padding: 1.25rem 1.25rem 2rem !important;\n .col-md-12{\n margin-bottom: 0;\n }\n }\n }\n }\n\n .car-block{\n display: flex;\n justify-content: space-between;\n padding: 10px 19px;\n background: #fff;\n z-index: 2;\n\n .car-image{\n flex: 0 0 80px;\n height: fit-content;\n border: 1px solid #eeeeee;\n }\n\n .car-details{\n display:flex;\n min-width: 90%;\n\n p{\n padding: 3px 20px 0 12px;\n font-size: 13px;\n font-weight: bold;\n line-height: 13px;\n margin-bottom: 0;\n }\n span{\n font-weight: normal;\n font-size: 12px;\n margin-top: 3px;\n display: block;\n }\n }\n .othercar{\n height: fit-content;\n margin: auto;\n\n i {\n color: ${props => props.theme.colors.buttonPrimaryBgHover};\n }\n }\n\n }\n\n`;\n","import React from 'react';\nimport { withTranslation } from 'react-i18next';\nimport { props, defaultProps } from './CheckoutFilter.props';\nimport { StyledCheckoutFilter } from './CheckoutFilter.styled';\nimport { SearchForm, AccordionCard } from 'components/';\nimport { Accordion } from 'react-bootstrap';\nimport { withTheme } from 'styled-components';\nimport withSettingsContext from 'SettingsContext';\nimport { StyledCheckoutFilterModern } from './CheckoutFilter.styled.modern';\nimport { MODERN_THEME } from 'styled/constants';\nimport useWindowDimensions from 'utils/windowHelper';\n\nclass CheckoutFilter extends React.Component {\n constructor(props) {\n super(props);\n this.accordion = React.createRef();\n }\n\n componentDidMount() {\n const { setSearchCarParams, params } = this.props;\n\n setSearchCarParams(params);\n }\n\n closeAccordion = () => {\n this.accordion.current.click();\n };\n\n shapeCarName = name => {\n if (name.length > 50) {\n return name.substring(0, 50) + '...';\n } else {\n return name;\n }\n };\n\n getModelName(model) {\n const {\n t,\n settings: { featureFlags },\n } = this.props;\n const availabilityGroup =\n featureFlags.availabilityGroup === undefined ? 'model' : featureFlags.availabilityGroup;\n const showOrSimilar =\n featureFlags.ShowOrSimilar === undefined ? true : featureFlags.ShowOrSimilar;\n const legend = availabilityGroup === 'category' && showOrSimilar ? t('orSimilar') : '';\n\n return `${model.brand.name} ${model.name} ${legend}`;\n }\n\n getTemplateStyledComponent() {\n if (this.props.settings.theme.template === MODERN_THEME) {\n return StyledCheckoutFilterModern;\n }\n return StyledCheckoutFilter;\n }\n\n render() {\n const {\n searchCars: {\n params: { dateFrom, dateTo, categories },\n checkout: { booking },\n },\n t,\n onClick,\n className,\n width,\n } = this.props;\n\n const StyledComponent = this.getTemplateStyledComponent();\n\n const mobileSearchForm = (\n <>\n \n
\n {showExchangeMsg && (\n \n \n \n \n
\n\n \n
\n \n
\n \n
\n
\n \n
\n {featureFlags.showFranchiseDetails && (\n <>\n - \n {this.getPriceItemsContent()}\n\n {commercialAgreementCode && (\n
- \n {' '}\n {t('commercialAgreement')} {' '}\n {commercialAgreementCode}\n \n )}\n
\n
\n
\n \n )}\n {showExchangeMsg && (\n - \n {featureFlags.showFranchiseDamages && (\n
- \n {' '}\n \n {t('franchises.franchiseDamages')}{' '}\n {' '}\n \n
\n \n \n )}\n {featureFlags.showFranchiseRollover && (\n - \n {' '}\n \n {t('franchises.franchiseRollover')}{' '}\n {' '}\n \n
\n \n \n )}\n {featureFlags.showFranchiseTheft && (\n - \n {' '}\n {t('franchises.franchiseTheft')} {' '}\n \n
\n \n \n )}\n
\n
\n \n
\n \n
\n \n {t('forDaysOfRent', {\n totalDays: booking.totalDays,\n })}{' '}\n {configurations.openRate && t('from').toLowerCase()}\n
\n\n
\n \n
\n {t('dailyPrice')}{' '}\n \n
\n
\n \n
\n {this.showBookingLenght(booking)}
\n\n
\n
\n \n
\n \n
\n \n \n \n \n \n
\n \n {this.shapeCarName(this.getModelName(model))}\n
\n \n {t('categoria')} {model.category.name}\n \n
Component {component} not found
;\n\n return\n
\n \n \n {icon && (\n
\n \n \n
\n )}\n {tt(text, t)}
\n {tt(subText, t)}
\n \n );\n };\n\n const StyledComponent = getTemplateStyledComponent();\n\n return (\n - \n \n
- \n
\n {links.map((navItem, i) => {\n if (navItem && !navItem.noShowInHeader) {\n return (\n
\n\n
: null}\n\n {showCurrenciesDropdown && (\n
\n {currencies.map(currency => {\n if (currentCurrency === currency) return null;\n\n return (\n changeCurrency(currency)}\n >\n {getCurrencyName(currency)}\n \n );\n })}\n
\n \n )\n );\n};\n\nconst mapStateToProps = ({ global }) => ({\n listCurrencies: global.listCurrencies,\n currentCurrency: global.currentCurrency,\n});\n\nexport default connect(mapStateToProps)(withRouter(withTranslation()(CurrenciesDropdown)));\n","import CurrenciesDropdown from './CurrenciesDropdown';\nexport default CurrenciesDropdown;","import Logo from 'components/logo';\nimport TranslatedLink from 'components/TranslatedLink';\nimport React from 'react';\nimport { Col } from 'react-bootstrap';\nimport Nav from 'react-bootstrap/Nav';\nimport Navbar from 'react-bootstrap/Navbar';\nimport NavDropdown from 'react-bootstrap/NavDropdown';\nimport { withTranslation } from 'react-i18next';\nimport { connect } from 'react-redux';\nimport { withRouter } from 'react-router';\nimport { props } from './NavBarHeader.props';\nimport { StyledHeader } from './NavBarHeader.styled';\nimport { tlink } from 'utils/translationHelper';\nimport { LangDropdown, MyAccountNavLink } from 'components';\nimport useWindowDimensions from 'utils/windowHelper';\nimport CurrenciesDropdown from 'components/CurrenciesDropdown';\nimport { changeCurrencyAction } from 'actions/global.actions';\n\nfunction NavBarHeader({\n t,\n settings,\n location,\n i18n,\n bgColor,\n color,\n logo,\n logoWidth,\n rightNav,\n variant,\n activeColor,\n rightBtnColor,\n langs,\n comm,\n listCurrencies,\n defaultCurrency,\n changeCurrencyAction,\n}) {\n const links = settings.configurations.sitemap.links;\n const showMyAccount =\n settings.myAccountConfiguration && settings.myAccountConfiguration.showMyAccount;\n const showCurrenciesDropdown =\n settings.featureFlags && settings.featureFlags.showCurrenciesDropdown;\n\n const { width } = useWindowDimensions();\n const isMobile = width < 1200;\n\n const isActive = navItem => {\n if (\n location.pathname === tlink(navItem.path, t, i18n, null, settings.configurations.langConfig)\n )\n return 'active';\n\n return '';\n };\n\n const settingsCurrency = settings.currency;\n\n return (\n {renderNewIcons(item.name)}
\n \n\n \n
\n );\n })}\n \n \n {icon && 
}\n
\n {/* if there is a socialItem with name 'facebook' or 'instagram' in header */}\n {socialItemFlag ? (\n \n ) : (\n \n )}\n \n );\n }\n\n const contentText = (\n \n {tt(label, t)}\n
\n
\n );\n\n let contentType;\n switch (content.type) {\n case 'link': {\n contentType = (\n \n
{tt(content.text, t)}
\n\n {contentText}\n {iconItem}\n
\n );\n break;\n }\n\n case 'button': {\n contentType = (\n \n \n {label2} \n \n
\n ) : (\n ''\n )}\n \n {label}\n \n \n \n
{tt(subLabel, t)}
\n \n );\n};\n\nHeaderSlogan.propTypes = sloganProps;\nHeaderSlogan.defaultProps = sloganDefaultProps;\n\nexport default HeaderSlogan;\n","import React, { useEffect, useRef } from 'react';\nimport { connect } from 'react-redux';\nimport { props, defaults } from './header.props';\nimport { StyledHeader } from './header.styled';\nimport { StyledHeaderModern } from './header.styled.modern';\nimport HeaderItem from './HeaderItem';\nimport HeaderSlogan from './HeaderSlogan';\nimport Logo from '../logo';\nimport { MODERN_THEME } from 'styled/constants';\nimport useWindowDimensions from 'utils/windowHelper';\n\nconst Header = ({\n items,\n logo,\n mobileLogo,\n slogan,\n associates,\n className,\n comm,\n logoWidth,\n settings,\n bgcolor,\n mobileMenuColor,\n stickyMenu,\n}) => {\n const getTemplateStyledComponent = () => {\n if (settings.theme.template === MODERN_THEME) {\n return StyledHeaderModern;\n }\n return StyledHeader;\n };\n const StyledComponent = getTemplateStyledComponent();\n const { width } = useWindowDimensions();\n const isMobile = width < 768;\n const headerRef = useRef(null);\n const isOpen = comm.isNavBarOpen();\n\n const handleOutsideClick = event => {\n if (isOpen && !isMobile && headerRef.current && !headerRef.current.contains(event.target)) {\n comm.toogleNavBar();\n }\n };\n\n useEffect(() => {\n if (isOpen) {\n document.addEventListener('click', handleOutsideClick);\n } else {\n document.removeEventListener('click', handleOutsideClick);\n }\n\n return () => {\n document.removeEventListener('click', handleOutsideClick);\n };\n }, [isOpen]);\n\n function handleMobileLogo() {\n if (!isMobile) {\n return\n
\n \n \n
\n {handleMobileLogo()}\n \n {items.map(item => (\n
\n \n );\n};\n\nHeader.propTypes = props;\nHeader.defaultProps = defaults;\nHeader.Item = HeaderItem;\nHeader.Slogan = HeaderSlogan;\n\nconst mapStateToProps = ({ siteConfiguration }) => ({\n settings: siteConfiguration.settings,\n});\n\nexport default connect(mapStateToProps)(Header);\n","import Header from './Header';\nexport default Header;\n","import PropTypes from 'prop-types';\n\nexport const props = {\n bgcolor: PropTypes.string,\n borderColor: PropTypes.string,\n borderSize: PropTypes.string,\n borderStyle: PropTypes.string,\n className: PropTypes.string,\n color: PropTypes.string,\n hover: PropTypes.string,\n height: PropTypes.string,\n padding: PropTypes.string,\n width: PropTypes.string,\n configuration: PropTypes.object,\n companyInfo: PropTypes.object,\n collapsible: PropTypes.bool,\n seeMore: PropTypes.string,\n seeLess: PropTypes.string,\n};\n","import style from 'styled-components';\n\nexport const StyledBottomFooter = style.div`\n background-color: #2C2C2C;\n\n\n p{\n font-size: 11px !important;\n color: #888888 !important;\n }\n\n a{\n color: red;\n font-weight: 700;\n\n &:hover{\n text-decoration: none;\n }\n }\n`;\n\nexport const StyledFooter = style.footer`\n background: ${props => props.bgcolor || props.theme.colors.primary};\n box-sizing: border-box;\n border-top-width: ${props => props.borderSize || '1px'};\n border-top-style: ${props => props.borderStyle || 'solid'};\n color: ${props => props.color || props.theme.font.colors.secondary};\n display: flex;\n flex-wrap: wrap;\n height: ${props => props.height || 'auto'};\n padding: ${props => props.padding || '5%'};\n margin-left: -15px;\n margin-right: -15px;\n\n @media print {\n display: none;\n }\n\n .linkItem {\n color: ${props => props.color || props.theme.font.colors.secondary} !important;\n }\n\n .linkItem:hover{\n color: ${props => props.hover || 'inhearit'}!important ;\n }\n\n .companyInfo {\n width: 25%;\n @media (max-width: ${props => props.theme.screens.md}) {\n width: 100%;\n padding: 0 15px;\n }\n @media (max-width: ${props => props.theme.screens.lg}) and (min-width: ${props =>\n props.theme.screens.md}) {\n flex: 0 0 35%;\n max-width: 35%;\n }\n\n }\n\n .companyInfo h3{\n color: ${({ companyInfoTitleColor }) => companyInfoTitleColor || 'inherit'};\n }\n\n .companyInfo p{\n color: ${({ companyInfoTextColor }) => companyInfoTextColor || 'inherit'};\n }\n\n .footerSocial {\n padding: 0px;\n margin-top: 1rem;\n \n .socialItem {\n display: flex;\n justify-content: center;\n align-items: center;\n height: 40px;\n background-color: ${props => props.theme.colors.bg};\n\n p {\n color: ${({ socialColor }) => socialColor || 'inherit'};\n margin: 0;\n \n svg path {\n fill: ${({ socialColor }) => `${socialColor} !important` || 'inherit'};\n }\n }\n\n &:hover {\n color: ${props => props.theme.font.colors.secondary};\n background-color: ${props => props.theme.colors.secondary};\n }\n }\n }\n\n .footerLists {\n width: 75%;\n display: flex;\n justify-content: space-around;\n\n @media print {\n display: none;\n }\n\n @media (max-width: ${props => props.theme.screens.md}) {\n margin-top: 30px;\n }\n @media (max-width: ${props => props.theme.screens.lg}) and (min-width: ${props =>\n props.theme.screens.md}) {\n width: 65%;\n }\n\n .footerLinkList {\n padding: 0 15px;\n margin-bottom: 1rem;\n }\n\n .footerColumn {\n flex-direction: column;\n width: 25%;\n\n h3{\n color: ${props => props.color || props.theme.font.colors.secondary} !important\n }\n\n @media (max-width: ${props => props.theme.screens.lg}) and (min-width: ${props =>\n props.theme.screens.md}) {\n width: 50%;\n &.lg-hide {\n display: none;\n }\n }\n\n @media (max-width: ${props => props.theme.screens.md}) {\n &.md-hide {\n display: none;\n }\n\n width: 100%;\n flex-direction: row;\n }\n }\n }\n\n`;\n","import React from 'react';\nimport { props } from './Footer.props';\nimport { StyledFooter } from './Footer.styled';\nimport { CompanyInfo, LinkList, SocialList } from '../';\nimport { withTranslation } from 'react-i18next';\nimport { connect } from 'react-redux';\nimport { tt } from 'utils/translationHelper';\n\nclass Footer extends React.Component {\n static propTypes = props;\n\n render() {\n const {\n settings: {\n configurations: { sitemap },\n },\n settings: {\n configurations: { socialNetworks },\n },\n showSocialsOnRight,\n collapsible,\n seeLess,\n seeMore,\n t,\n } = this.props;\n\n const compInfo = { ...this.props.companyInfo, showSocialsOnRight };\n compInfo.socialNetworks = socialNetworks;\n\n return (\n <>\n \n {this.props.customSitemap ? (\n
\n \n \n );\n }\n}\n\nconst mapStateToProps = ({ siteConfiguration }) => ({\n settings: siteConfiguration.settings,\n});\n\nconst FooterComp = withTranslation()(Footer);\n\nexport default connect(mapStateToProps, null)(FooterComp);\n","import Footer from './Footer';\nexport default Footer;\n","import style from 'styled-components';\n\nexport const StyledBottomFooter = style.div`\n background-color: #2C2C2C;\n position: absolute;\n clear: both;\n right: 0;\n left: 0;\n bottom: 0;\n padding-left: 2%;\n padding-right: 2%;\n \n p{ \n font-size: 11px !important;\n color: #888888 !important;\n\n @media (max-width: ${props => props.theme.screens.md}) {\n text-align: center;\n }\n }\n a{\n color: #ffa300 !important;\n font-weight: 700;\n\n &:hover{\n text-decoration: none;\n }\n }\n`;\n","import style from 'styled-components';\n\nexport const StyledBottomFooterModern = style.div`\nbackground-color: #2C2C2C;\nposition: absolute;\nclear: both;\nright: 0;\nleft: 0;\nbottom: 0;\npadding: ${props => props.padding || '0 6%'};\n\np{ \n font-size: 11px !important;\n color: #888888 !important;\n\n @media (max-width: ${props => props.theme.screens.md}) {\n text-align: center;\n }\n}\na{\n color: #ffa300 !important;\n font-weight: 500;\n\n &:hover{\n text-decoration: none;\n }\n}\n`;\n","import React from 'react';\nimport { withTranslation } from 'react-i18next';\nimport { connect } from 'react-redux';\nimport { MODERN_THEME } from 'styled/constants';\nimport { StyledBottomFooter } from './RentlyFooter.styled';\nimport { StyledBottomFooterModern } from './RentlyFooter.styled.modern';\n\nclass RentlyFooter extends React.Component {\n getTemplateStyledComponent() {\n if (this.props.settings.theme.template === MODERN_THEME) {\n return StyledBottomFooterModern;\n }\n return StyledBottomFooter;\n }\n\n render() {\n const {\n t,\n settings: {\n configurations: { hideRentlyFooter },\n },\n } = this.props;\n const StyledComponent = this.getTemplateStyledComponent();\n\n if (hideRentlyFooter) return null;\n\n return (\n \n {this.props.doubts && (\n
\n \n {this.props.safeSite && (\n
\n \n {this.props.companyName || (\n \n Powered by Rently\n \n )}{' '}\n © {new Date().getFullYear()} | {t('AllRightsReserved')}\n
\n\n {getList()} \n
\n );\n};\n\nLinkList.propTypes = props;\n\nexport default LinkList;\n","import PropTypes from 'prop-types';\n\nexport const props = {\n show: PropTypes.bool,\n color: PropTypes.string,\n size: PropTypes.string,\n width: PropTypes.string,\n height: PropTypes.string,\n className: PropTypes.string,\n iconClass: PropTypes.string,\n};\n\nexport const defaults = {\n fontAwesomeClass: 'fa fa-cog',\n};\n","import styled from 'styled-components';\n\nexport const StyledLoadingContainer = styled.section`\n display: flex;\n flex-basis: 100%;\n height: 100%;\n justify-content: center;\n align-items: center;\n .loading {\n width: ${props => props.width || '50px'};\n height: ${props => props.height || null};\n z-index: 99999;\n\n .fa-cog {\n font-size: ${props => props.size || '50px'};\n color: ${props => props.color || props.theme.colors.primary};\n }\n\n .rotating {\n -webkit-animation: rotating 2s linear infinite;\n -moz-animation: rotating 2s linear infinite;\n -ms-animation: rotating 2s linear infinite;\n -o-animation: rotating 2s linear infinite;\n animation: rotating 2s linear infinite;\n }\n\n @-webkit-keyframes rotating {\n from {\n -webkit-transform: rotate(0deg);\n -o-transform: rotate(0deg);\n transform: rotate(0deg);\n }\n to {\n -webkit-transform: rotate(360deg);\n -o-transform: rotate(360deg);\n transform: rotate(360deg);\n }\n }\n @keyframes rotating {\n from {\n -ms-transform: rotate(0deg);\n -moz-transform: rotate(0deg);\n -webkit-transform: rotate(0deg);\n -o-transform: rotate(0deg);\n transform: rotate(0deg);\n }\n to {\n -ms-transform: rotate(360deg);\n -moz-transform: rotate(360deg);\n -webkit-transform: rotate(360deg);\n -o-transform: rotate(360deg);\n transform: rotate(360deg);\n }\n }\n }\n`;\n","import React from 'react';\nimport { props, defaults } from './Loading.props';\nimport { StyledLoadingContainer } from './Loading.styled';\n\nconst LoadingComponent = ({ show, color, className, fontAwesomeClass, size }) => {\n if (!show) return null;\n return (\n \n {' '}\n
\n {message}
: null}\n{text}
,\n h2: (text, attr) =>{text}
,\n h3: text =>{text}
,\n h4: text =>{text}
,\n h5: text =>{text}
,\n h6: text =>{text}
,\n p: text =>{text}
,\n};\n\nconst Title = ({\n type = 'h1',\n text,\n bold = true,\n italic = true,\n className,\n color,\n weight,\n fontSize,\n margin,\n lineHeight,\n noMedia,\n paramsObj,\n showTooltip = false,\n forceTranslate = false,\n}) => {\n const { t } = useTranslation();\n const attr = {};\n\n if (showTooltip) {\n attr.title = tt(text, t);\n }\n const translatedText = tt(text, t, forceTranslate, paramsObj);\n if (!translatedText) return null;\n return (\n\n {loadingGif && (\n
\n );\n } else {\n return \n
\n )}\n {loadingMessage && (\n \n
\n )}\n {label}
}\n \n \n
\n {error && {error}
}\n \n );\n }\n}\nexport default withSettingsContext(CheckboxInput);\n","import CheckboxInput from './CheckboxInput';\nexport default CheckboxInput;\n","import PropTypes from 'prop-types';\n\nexport const props = {\n className: PropTypes.string,\n color: PropTypes.string,\n onDateChange: PropTypes.func.isRequired,\n onFocusChange: PropTypes.func.isRequired,\n borderColor: PropTypes.string,\n iconColor: PropTypes.string,\n icon: PropTypes.string,\n error: PropTypes.string,\n label: PropTypes.string,\n id: PropTypes.string.isRequired,\n date: PropTypes.shape({}),\n datePickerOptions: PropTypes.shape({}),\n};\n","import style from 'styled-components';\nimport { INPUT_BORDER_COLOR } from 'styled/constants';\n\nexport const StyledInput = style.div`\n .input-wrapper{\n border-width: ${props => props.borderWidth || '1px'};\n border-style: solid;\n border-color: ${props =>\n props.error ? props.theme.colors.alert : props.borderColor || INPUT_BORDER_COLOR};\n display: flex;\n width: 100%;\n border-radius: 0;\n justify-content: center;\n align-items: center;\n font-weight: 500;\n font-size: 1em;\n color: ${props => props.color || props.theme.font.colors.secondary};\n .CalendarDay__selected{\n background-color: ${props => props.color || props.theme.colors.buttonPrimaryBg};\n border-color: ${props => props.color || props.theme.colors.buttonPrimaryBg};\n }\n &.small-input-padding{\n height: 40px;\n }\n .DateInput_input__focused {\n border-bottom-color: ${props => props.color || props.theme.colors.buttonPrimaryBg};\n }\n span {\n display: flex;\n width: auto;\n height: 100%;\n color: ${props => props.iconColor || props.theme.colors.buttonPrimaryBg};\n justify-content: center;\n align-items: center;\n padding-top: 0;\n padding-bottom: 0;\n padding-left: 10px;\n padding-right: 5px;\n font-size: ${props => props.fontSize || '1.2em'}\n }\n .date-wrapper {\n padding-left: 5px;\n width: 100%;\n height: 100%;\n border: none;\n &:focus {\n outline: none;\n box-shadow: none;\n }\n }\n }\n .error{\n width: 100%;\n padding-left: 10px;\n color: ${props => props.theme.colors.alert};\n font-style: italic\n }\n .label{\n font-weight: bold;\n margin-bottom: 5px;\n }\n`;\n","import PropTypes from 'prop-types';\n\nexport const props = {\n date: PropTypes.object,\n height: PropTypes.string,\n id: PropTypes.string.isRequired,\n numberOfMonths: PropTypes.number,\n onDateChange: PropTypes.func.isRequired,\n onFocusChange: PropTypes.func.isRequired,\n showDefaultInputIcon: PropTypes.bool,\n settings: PropTypes.shape({}),\n};\n\nexport const defaultProps = {\n numberOfMonths: 1,\n verticalHeight: 540,\n showDefaultInputIcon: false,\n noBorder: false,\n block: false,\n settings: {},\n};\n","import React, { Component } from 'react';\nimport 'react-dates/initialize';\nimport 'react-dates/lib/css/_datepicker.css';\nimport { props, defaultProps } from './DatePicker.props';\nimport { SingleDatePicker } from 'react-dates';\nimport moment from 'moment';\n\nclass DatePicker extends Component {\n constructor(props) {\n super(props);\n this.state = {\n date: this.props.date || null,\n focused: false,\n };\n }\n\n handleDateChange(date) {\n const { onDateChange } = this.props;\n onDateChange(date);\n this.setState({ date });\n }\n\n handleFocusChange(focused) {\n const { onFocusChange } = this.props;\n onFocusChange(focused);\n this.setState({ focused });\n }\n\n returnYears = () => {\n let years = [];\n\n const currentYear = moment().year();\n\n for (let i = currentYear - 100; i <= currentYear + 30; i++) {\n years.push();\n }\n return years;\n };\n\n renderMonthElement = ({ month, onYearSelect }) => {\n return (\n \n {month.format('MMMM')}\n \n
\n );\n };\n\n render() {\n const {\n id,\n placeholder,\n small,\n height,\n numberOfMonths,\n showDefaultInputIcon,\n block,\n noBorder,\n verticalHeight,\n settings,\n } = this.props;\n return (\n {label}
}\n \n {icon && }\n
\n {error && \n
\n {error}
}\n \n );\n }\n}\nexport default DateInput;\n","import PropTypes from 'prop-types';\n\nexport const props = {\n className: PropTypes.string,\n color: PropTypes.string,\n onDatesChange: PropTypes.func.isRequired,\n onFocusChange: PropTypes.func.isRequired,\n borderColor: PropTypes.string,\n iconColor: PropTypes.string,\n icon: PropTypes.string,\n error: PropTypes.string,\n label: PropTypes.string,\n datePickerOptions: PropTypes.shape({}),\n focusedInput: PropTypes.string,\n startDateId: PropTypes.string,\n endDateId: PropTypes.string,\n isDayBlocked: PropTypes.func,\n};\n\nexport const defaultProps = {\n datePickerOptions: {},\n focusedInput: 'startDate',\n isDayBlocked: null,\n};\n","import style from 'styled-components';\nimport { INPUT_BORDER_COLOR, THIRD } from 'styled/constants';\n\nexport const StyledInput = style.div`\n .input-wrapper{\n border-width: ${props => props.borderWidth || '1px'};\n border-style: solid;\n border-color: ${props =>\n props.error ? props.theme.colors.alert : props.borderColor || INPUT_BORDER_COLOR};\n display: flex;\n width: 100%;\n border-radius: 0;\n justify-content: center;\n align-items: center;\n font-weight: 500;\n font-size: 1em;\n color: ${props => props.color || props.theme.font.colors.secondary};\n background-color: ${props => props.backgroundColor || 'white'};\n .CalendarDay__selected{\n background-color: ${props => props.color || props.theme.colors.buttonPrimaryBg};\n border-color: ${props => props.color || props.theme.colors.buttonPrimaryBg};\n color: ${THIRD};\n }\n .CalendarDay__hovered_span, .CalendarDay__hovered_span:hover{\n background-color ${props => props.color || props.theme.colors.buttonPrimaryBgHover};\n border-color ${props => props.color || props.theme.colors.buttonPrimaryBg};\n color: ${THIRD};\n }\n .CalendarDay__selected_span.CalendarDay__selected_start, .CalendarDay__selected_span.CalendarDay__selected_end {\n background-color ${props => props.color || props.theme.colors.buttonPrimaryBg};\n border-color ${props => props.color || props.theme.colors.buttonPrimaryBg};\n color ${THIRD};\n }\n .CalendarDay__selected_span {\n background-color ${props => props.color || props.theme.colors.buttonPrimaryBgHover};\n border-color ${props => props.color || props.theme.colors.buttonPrimaryBg};\n color ${THIRD};\n }\n .DateInput_input__focused {\n border-bottom-color: ${props => props.color || props.theme.colors.buttonPrimaryBg};\n }\n span {\n display: flex;\n width: auto;\n height: 100%;\n color: ${props => props.iconColor || props.theme.colors.buttonPrimaryBg};\n justify-content: center;\n align-items: center;\n padding-top: 0;\n padding-bottom: 0;\n padding-left: 10px;\n padding-right: 5px;\n font-size: ${props => props.fontSize || '1.2em'}\n }\n .date-wrapper {\n padding-left: 5px;\n width: 100%;\n height: 100%;\n border: none;\n &:focus {\n outline: none;\n box-shadow: none;\n }\n }\n }\n .error{\n width: 100%;\n padding-left: 10px;\n color: ${props => props.theme.colors.alert};\n font-style: italic\n }\n .label{\n font-weight: bold;\n margin-bottom: 5px;\n }\n`;\n","import React, { Component } from 'react';\nimport 'react-dates/initialize';\nimport 'react-dates/lib/css/_datepicker.css';\nimport { props, defaultProps } from './RangeDatePicker.props';\nimport { START_DATE } from 'react-dates/constants';\nimport { DateRangePicker } from 'react-dates';\nimport { connect } from 'react-redux';\nimport { withTranslation } from 'react-i18next';\nclass RangeDatePicker extends Component {\n static propTypes = props;\n static defaultProps = defaultProps;\n\n constructor(props) {\n super(props);\n this.state = {\n startDate: props.startDate || null,\n endDate: props.endDate || null,\n focusedInput: props.focusedInput || START_DATE,\n };\n }\n\n static getDerivedStateFromProps(nextProps) {\n return { startDate: nextProps.startDate, endDate: nextProps.endDate };\n }\n\n handleDatesChange = (startDate, endDate) => {\n const { onDatesChange } = this.props;\n onDatesChange(startDate, endDate);\n this.setState({ startDate, endDate });\n };\n\n handleFocusChange = focusedInput => {\n const { onFocusChange } = this.props;\n onFocusChange(focusedInput);\n this.setState({ focusedInput });\n };\n\n handleWeekDays = day => {\n const { i18n } = this.props;\n const lang = i18n.language.toUpperCase();\n\n if (lang === 'ES' || lang === 'ES-AR' || lang === 'ES-CL' || lang === 'ES-MX') {\n day._locale._weekdaysMin = ['DOM', 'LUN', 'MAR', 'MIE', 'JUE', 'VIE', 'SAB'];\n } else if (lang === 'PT') {\n day._locale._weekdaysMin = ['DOM', 'SEG', 'TER', 'QUA', 'QUI', 'SEX', 'SAB'];\n } else if (lang === 'PL') {\n day._locale._weekdaysMin = ['NIED', 'PONIE', 'WTOR', 'ŚRO', 'CZWAR', 'PIĄ', 'SOB'];\n } else if (lang === 'LT') {\n day._locale._weekdaysMin = ['PIR', 'ANT', 'TRE', 'KET', 'PEN', 'ŠEš', 'SEK'];\n } else if (lang === 'AL') {\n day._locale._weekdaysMin = ['DIM', 'HËN', 'MAR', 'MËR', 'ENJ', 'PRE', 'SHT'];\n } else if (lang === 'IT') {\n day._locale._weekdaysMin = ['DOM', 'LUN', 'MAR', 'MER', 'GIO', 'VEN', 'SAB'];\n } else if (lang === 'NL') {\n day._locale._weekdaysMin = ['ZON', 'MA', 'DI', 'WO', 'DO', 'VR', 'ZA'];\n } else if (lang === 'RU') {\n day._locale._weekdaysMin = ['ВС', 'ПН', 'ВТ', 'СР', 'ЧТ', 'ПТ', 'СБ'];\n } else {\n day._locale._weekdaysMin = ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'];\n }\n return day.format('D');\n };\n\n handleMonthsName = month => {\n const { i18n } = this.props;\n const lang = i18n.language.toUpperCase();\n\n if (lang === 'ES' || lang === 'ES-AR' || lang === 'ES-CL' || lang === 'ES-MX') {\n month._locale._months = [\n 'Enero',\n 'Febrero',\n 'Marzo',\n 'Abril',\n 'Mayo',\n 'Junio',\n 'Julio',\n 'Agosto',\n 'Septiembre',\n 'Octubre',\n 'Noviembre',\n 'Diciembre',\n ];\n } else if (lang === 'PT') {\n month._locale._months = [\n 'Janeiro',\n 'Fevereiro',\n 'Março',\n 'Abril',\n 'Maio',\n 'Junho',\n 'Julho',\n 'Agosto',\n 'Setembro',\n 'Outubro',\n 'Novembro',\n 'Dezembro',\n ];\n } else if (lang === 'PL') {\n month._locale._months = [\n 'Styczeń',\n 'Luty',\n 'Marsz',\n 'Kwiecień',\n 'Móc',\n 'Czerwiec',\n 'Lipiec',\n 'Sierpień',\n 'Wrzesień',\n 'Październik',\n 'Listopad',\n 'Grudzień',\n ];\n } else if (lang === 'LT') {\n month._locale._months = [\n 'Sausis',\n 'Vasaris',\n 'Kovas',\n 'Balandis',\n 'Gegužė',\n 'Birželis',\n 'Liepa',\n 'Rugpjūtis',\n 'Rugsėjis',\n 'Spalis',\n 'Lapkritis',\n 'Gruodis',\n ];\n } else if (lang === 'AL') {\n month._locale._months = [\n 'Janar',\n 'Shkurt',\n 'Mars',\n 'Prill',\n 'Maj',\n 'Qershor',\n 'Korrik',\n 'Gusht',\n 'Shtator',\n 'Tetor',\n 'Nëntor',\n 'Dhjetor',\n ];\n } else if (lang === 'IT') {\n month._locale._months = [\n 'Gennaio',\n 'Febbraio',\n 'Marzo',\n 'Aprile',\n 'Maggio',\n 'Giugno',\n 'Luglio',\n 'Agosto',\n 'Settembre',\n 'Ottobre',\n 'Novembre',\n 'Dicembre',\n ];\n } else if (lang === 'NL') {\n month._locale._months = [\n 'Januari',\n 'Februari',\n 'Maart',\n 'April',\n 'Mei',\n 'Juni',\n 'Juli',\n 'Augustus',\n 'September',\n 'Oktober',\n 'November',\n 'December',\n ];\n } else {\n month._locale._months = [\n 'January',\n 'February',\n 'March',\n 'April',\n 'May',\n 'June',\n 'July',\n 'August',\n 'September',\n 'October',\n 'November',\n 'December',\n ];\n }\n return month.format('MMMM');\n };\n\n render() {\n const {\n startDateId,\n endDateId,\n showDefaultInputIcon,\n inputIconPosition,\n block,\n noBorder,\n settings,\n isDayBlocked,\n isOutsideRange,\n configurations: { dateDisplayFormat },\n t,\n } = this.props;\n\n const dateFormat = dateDisplayFormat || t('dateFormat');\n\n return (\n \n {icon && }\n
\n {error && \n
\n {error}
}\n \n );\n }\n}\nexport default RangeDateInput;\n","import PropTypes from 'prop-types';\n\nexport const props = {\n className: PropTypes.string,\n color: PropTypes.string,\n onChange: PropTypes.func.isRequired,\n borderColor: PropTypes.string,\n fontSize: PropTypes.string,\n placeholder: PropTypes.string,\n iconColor: PropTypes.string,\n icon: PropTypes.string,\n error: PropTypes.string,\n label: PropTypes.string,\n mask: PropTypes.string,\n};\n","import style from 'styled-components';\nimport { INPUT_BORDER_COLOR } from 'styled/constants';\n\nexport const StyledInput = style.div`\n .input-wrapper{\n border-width: ${props => props.borderWidth || '1px'};\n border-style: solid;\n border-color: ${props =>\n props.error ? props.theme.colors.alert : props.borderColor || INPUT_BORDER_COLOR};\n display: flex;\n width: 100%;\n border-radius: 0;\n justify-content: center;\n align-items: center;\n font-weight: ${props => props.fontWeight || 400};\n font-size: ${props => props.fontSize || '1em'};\n color: ${props => props.color || props.theme.font.colors.secondary};\n span {\n display: flex;\n width: auto;\n height: 100%;\n color: ${props => props.iconColor || props.theme.colors.buttonPrimaryBg};\n justify-content: center;\n align-items: center;\n padding-top: 0;\n padding-bottom: 0;\n padding-left: 10px;\n padding-right: 5px;\n font-size: ${props => props.fontSize || '1.2em'}\n }\n input {\n width: 100%;\n border: none;\n &:focus {\n outline: none;\n box-shadow: none;\n }\n }\n input::-webkit-input-placeholder, select{ \n font-size: 12px;\n color: #6f6f6f;\n }\n \n input::-moz-placeholder { \n font-size: 12px;\n color: #6f6f6f;\n }\n \n input:-ms-input-placeholder { \n font-size: 12px;\n color: #6f6f6f;\n }\n\n }\n .error{\n width: 100%;\n padding-left: 10px;\n color: ${props => props.theme.colors.alert};\n font-style: italic;\n margin-bottom: 15px;\n margin-top:-5px;\n }\n .label{\n font-weight: bold;\n margin-bottom: 5px;\n }\n`;\n","import style from 'styled-components';\nimport { INPUT_BORDER_COLOR } from 'styled/constants';\n\nexport const StyledInputModern = style.div`\n .input-wrapper{\n border-width: ${props => props.borderWidth || '2px'};\n border-style: solid;\n border-color: ${props =>\n props.error ? props.theme.colors.alert : props.borderColor || INPUT_BORDER_COLOR};\n display: flex;\n width: 100%;\n border-radius: 0;\n justify-content: center;\n align-items: center;\n font-weight: ${props => props.fontWeight || 400};\n font-size: ${props => props.fontSize || '1em'};\n color: ${props => props.color || props.theme.font.colors.secondary};\n span {\n display: flex;\n width: auto;\n height: 100%;\n color: ${props => props.iconColor || props.theme.colors.buttonPrimaryBg};\n justify-content: center;\n align-items: center;\n padding-top: 0;\n padding-bottom: 0;\n padding-left: 10px;\n padding-right: 5px;\n font-size: ${props => props.fontSize || '1.2em'}\n }\n input {\n width: 100%;\n border: none;\n &:focus {\n outline: none;\n box-shadow: none;\n }\n }\n input::-webkit-input-placeholder, select{ \n font-size: 14px;\n color: #858C99;\n }\n \n input::-moz-placeholder { \n font-size: 12px;\n color: #6f6f6f;\n }\n \n input:-ms-input-placeholder { \n font-size: 12px;\n color: #6f6f6f;\n }\n\n }\n .error{\n font-size:14px;\n width: 100%;\n padding-left: 10px;\n color: ${props => props.theme.colors.alert};\n margin-bottom: 15px;\n margin-top:-5px;\n }\n .label{\n font-weight: bold;\n margin-bottom: 5px;\n color:red;\n }\n`;\n","import TextInput from './TextInput';\nexport default TextInput;\n","import React from 'react';\nimport InputMask from 'react-input-mask';\nimport withSettingsContext from 'SettingsContext';\nimport { MODERN_THEME } from 'styled/constants';\nimport { props } from './TextInput.props';\nimport { StyledInput } from './TextInput.styled';\nimport { StyledInputModern } from './TextInput.styled.modern';\n\nconst TextInput = ({\n wrapperId,\n wrapperClass,\n inputClass,\n color,\n onChange,\n borderColor,\n fontSize,\n iconColor,\n placeholder,\n icon,\n error,\n label,\n type,\n value,\n options,\n id,\n readOnly,\n legend,\n settings,\n mask,\n disabled,\n}) => {\n const getTemplateStyledComponent = () => {\n if (settings.theme.template === MODERN_THEME) {\n return StyledInputModern;\n }\n return StyledInput;\n };\n\n const StyledComponent = getTemplateStyledComponent();\n\n return (\n \n {icon && }\n {mask ? (\n onChange(e.target.value)}\n placeholder={placeholder}\n id={id}\n readOnly={readOnly || false}\n {...options}\n />\n ) : (\n onChange(e.target.value)}\n placeholder={placeholder}\n id={id}\n readOnly={readOnly || false}\n {...options}\n />\n )}\n
\n {legend && {legend}}\n {error && {error}
}\n \n );\n};\n\nTextInput.propTypes = props;\nexport default withSettingsContext(TextInput);\n","import PropTypes from 'prop-types';\n\nexport const props = {\n className: PropTypes.string,\n color: PropTypes.string,\n onChange: PropTypes.func.isRequired,\n borderColor: PropTypes.string,\n fontSize: PropTypes.string,\n placeholder: PropTypes.string,\n iconColor: PropTypes.string,\n icon: PropTypes.string,\n error: PropTypes.string,\n label: PropTypes.string,\n rows: PropTypes.number,\n cols: PropTypes.number,\n};\n\nexport const defaultProps = {\n cols: 4,\n rows: 4,\n};\n","import style from 'styled-components';\nimport { INPUT_BORDER_COLOR } from 'styled/constants';\n\nexport const StyledInput = style.div`\n .input-wrapper{\n border-width: ${props => props.borderWidth || '1px'};\n border-style: solid;\n border-color: ${props =>\n props.error ? props.theme.colors.alert : props.borderColor || INPUT_BORDER_COLOR};\n display: flex;\n width: 100%;\n height: ${props => props.height || '100px'};\n min-height: 50px;\n border-radius: 0;\n justify-content: center;\n align-items: center;\n font-weight: ${props => props.fontWeight || 500};\n font-size: ${props => props.fontSize || '1em'};\n padding-top:5px;\n color: ${props => props.color || props.theme.font.colors.secondary};\n span {\n display: flex;\n width: auto;\n height: 100%;\n margin-top: 5px;\n color: ${props => props.iconColor || props.theme.colors.buttonPrimaryBg};\n justify-content: center;\n align-items: flex-start;\n padding-left: 10px;\n padding-right: 5px;\n font-size: ${props => props.fontSize || '1.2em'}\n }\n textarea {\n padding-left: 5px;\n width: 100%;\n height: 100%;\n border: none;\n &:focus {\n outline: none;\n box-shadow: none;\n }\n }\n }\n .error{\n width: 100%;\n padding-left: 10px;\n color: ${props => props.theme.colors.alert};\n font-style: italic\n }\n .label{\n font-weight: bold;\n margin-bottom: 5px;\n }\n`;\n","import TextAreaInput from './TextAreaInput';\nexport default TextAreaInput;\n","import React from 'react';\nimport { props } from './TextAreaInput.props';\nimport { StyledInput } from './TextAreaInput.styled';\n\nconst TextAreaInput = ({\n wrapperId,\n wrapperClass,\n inputClass,\n color,\n onChange,\n borderColor,\n fontSize,\n iconColor,\n placeholder,\n icon,\n error,\n cols,\n rows,\n label,\n value,\n}) => (\n {label}
}\n \n {icon && }\n onChange(e.target.value)}\n placeholder={placeholder}\n rows={rows}\n cols={cols}\n />\n
\n {error && {error}
}\n \n);\n\nTextAreaInput.propTypes = props;\nexport default TextAreaInput;\n","import PropTypes from 'prop-types';\n\nexport const props = {\n className: PropTypes.string,\n color: PropTypes.string,\n onChange: PropTypes.func.isRequired,\n borderColor: PropTypes.string,\n fontSize: PropTypes.string,\n placeholder: PropTypes.string,\n iconColor: PropTypes.string,\n icon: PropTypes.string,\n error: PropTypes.string,\n label: PropTypes.string,\n};\n","import style from 'styled-components';\nimport { INPUT_BORDER_COLOR } from 'styled/constants';\n\nexport const StyledInput = style.div`\n .input-wrapper{\n border-width: ${props => props.borderWidth || '1px'};\n border-style: solid;\n border-color: ${props =>\n props.error ? props.theme.colors.alert : props.borderColor || INPUT_BORDER_COLOR};\n display: flex;\n width: 100%;\n height: ${props => props.height || '45px'}\n border-radius: 0;\n justify-content: center;\n align-items: center;\n font-weight: ${props => props.fontWeight || 500};\n font-size: ${props => props.fontSize || '1em'};\n color: ${props => props.color || props.theme.font.colors.secondary};\n span {\n display: flex;\n width: auto;\n height: 100%;\n color: ${props => props.iconColor || props.theme.colors.buttonPrimaryBg};\n justify-content: center;\n align-items: center;\n padding-top: 0;\n padding-bottom: 0;\n padding-left: 10px;\n padding-right: 5px;\n font-size: ${props => props.fontSize || '1.2em'}\n }\n input {\n padding-left: 5px;\n width: 100%;\n height: 100%;\n border: none;\n &:focus {\n outline: none;\n box-shadow: none;\n }\n }\n }\n .error{\n width: 100%;\n padding-left: 10px;\n color: ${props => props.theme.colors.alert};\n font-style: italic\n }\n .label{\n font-weight: bold;\n margin-bottom: 5px;\n }\n`;\n","import NumberInput from './NumberInput';\nexport default NumberInput;\n","import React from 'react';\nimport { props } from './NumberInput.props';\nimport { StyledInput } from './NumberInput.styled';\n\nconst NumberInput = ({\n wrapperClass,\n inputClass,\n color,\n onChange,\n borderColor,\n fontSize,\n iconColor,\n placeholder,\n icon,\n error,\n label,\n}) => (\n {label}
}\n \n {icon && }\n onChange(e.target.value)}\n placeholder={placeholder}\n />\n
\n {error && {error}
}\n \n);\n\nNumberInput.propTypes = props;\nexport default NumberInput;\n","import PropTypes from 'prop-types';\n\nexport const props = {\n className: PropTypes.string,\n color: PropTypes.string,\n onChange: PropTypes.func.isRequired,\n borderColor: PropTypes.string,\n fontSize: PropTypes.string,\n placeholder: PropTypes.string.isRequired,\n iconColor: PropTypes.string,\n icon: PropTypes.string,\n error: PropTypes.string,\n selected: PropTypes.string,\n label: PropTypes.string,\n disabled: PropTypes.bool,\n options: PropTypes.arrayOf(\n PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.shape({\n title: PropTypes.string,\n options: PropTypes.arrayOf(PropTypes.string),\n }),\n ]),\n ),\n};\n\nexport const defaultProps = {\n options: [],\n disabled: false,\n placeholder: 'Select',\n};\n","import style from 'styled-components';\nimport arrow from '../assets/arrow.png';\nimport { INPUT_BORDER_COLOR } from 'styled/constants';\n\nexport const StyledInput = style.div`\n .input-wrapper {\n border-width: ${props => props.borderWidth || '1px'};\n border-style: solid;\n border-color: ${props =>\n props.error ? props.theme.colors.alert : props.borderColor || INPUT_BORDER_COLOR};\n display: flex;\n width: 100%;\n border-radius: 0;\n justify-content: center;\n align-items: center;\n font-weight: ${props => props.fontWeight || 400};\n font-size: ${props => props.fontSize || '1em'};\n color: ${props => props.color || props.theme.font.colors.secondary};\n span {\n display: flex;\n width: auto;\n height: 100%;\n color: ${props =>\n props.disabled ? INPUT_BORDER_COLOR : props.iconColor || props.theme.font.colors.primary};\n justify-content: center;\n align-items: center;\n padding-top: 0;\n padding-bottom: 0;\n padding-left: 10px;\n padding-right: 5px;\n font-size: ${props => props.fontSize || '1.2em'}\n }\n select {\n background: url(${arrow}) no-repeat 97% 50%;\n padding-left: 5px;\n width: 100%;\n border: none;\n margin: 3px;\n &:focus {\n outline: none;\n box-shadow: none;\n }\n -webkit-appearance: none;\n -moz-appearance: none;\n }\n }\n .error {\n width: 100%;\n padding-left: 10px;\n color: ${props => props.theme.colors.alert};\n font-style: italic;\n }\n .label {\n font-size: 13px;\n font-weight: 600;\n margin-bottom: 5px;\n }\n`;\n","import style from 'styled-components';\nimport arrow from '../assets/arrow.png';\nimport { INPUT_BORDER_COLOR } from 'styled/constants';\n\nexport const StyledInputModern = style.div`\n .input-wrapper{\n border-width: ${props => props.borderWidth || '1px'};\n border-style: solid;\n border-color: ${props =>\n props.error ? props.theme.colors.alert : props.borderColor || INPUT_BORDER_COLOR};\n display: flex;\n width: 100%;\n height: ${props => props.height || '45px'}\n border-radius: 0;\n justify-content: center;\n align-items: center;\n font-weight: ${props => props.fontWeight || 500};\n font-size: ${props => props.fontSize || '1em'};\n color: ${props => props.color || props.theme.font.colors.secondary};\n background-color: ${props => props.backgroundColor || 'white'};\n\n span {\n display: flex;\n width: auto;\n height: 100%;\n color: ${props =>\n props.disabled ? INPUT_BORDER_COLOR : props.iconColor || props.theme.font.colors.primary};\n justify-content: center;\n align-items: center;\n padding-top: 0;\n padding-bottom: 0;\n padding-left: 10px;\n padding-right: 5px;\n font-size: ${props => props.fontSize || '1.2em'}\n }\n select {\n background: url(${arrow}) no-repeat 97% 50%;\n width: 100%;\n height: 100%;\n border: none;\n font-size:14px;\n font-weight:400;\n &:focus {\n outline: none;\n box-shadow: none;\n }\n -webkit-appearance: none;\n -moz-appearance: none;\n }\n }\n\n .input-wrapper:hover{\n border:1.3px solid black\n }\n\n\n .error{\n width: 100%;\n padding-left: 10px;\n color: ${props => props.theme.colors.alert};\n font-style: italic\n }\n .label{\n font-size: 13px;\n font-weight: 600;\n margin-bottom: 5px\n }\n`;\n","import React from 'react';\nimport moment from 'moment';\nimport { withTranslation } from 'react-i18next';\nimport withSettingsContext from 'SettingsContext';\nimport { MODERN_THEME } from 'styled/constants';\nimport { props, defaultProps } from './SelectInput.props';\nimport { StyledInput } from './SelectInput.styled';\nimport { StyledInputModern } from './SelectInput.styled.modern';\n\nconst createOption = (option, key, selectedValue) => {\n if (option.value === selectedValue) {\n return (\n \n );\n } else {\n return (\n \n );\n }\n};\n\nconst SelectInput = ({\n wrapperId,\n wrapperClass,\n inputClass,\n color,\n onChange,\n borderColor,\n fontSize,\n iconColor,\n placeholder,\n icon,\n error,\n options,\n label,\n selected,\n disabled,\n readOnly,\n name,\n defaultOption,\n settings,\n props,\n t,\n}) => {\n const getTemplateStyledComponent = () => {\n if (settings.theme.template === MODERN_THEME) {\n return StyledInputModern;\n }\n return StyledInput;\n };\n\n const StyledComponent = getTemplateStyledComponent();\n\n return (\n \n {icon && }\n onChange(e.target.value)}\n placeholder={placeholder}\n disabled={disabled || readOnly}\n value={selected || 0}\n id={name}\n name={name}\n {...props}\n >\n \n {options.map((option, key) => {\n if (option.options) {\n return (\n \n );\n }\n if (option.text && option.value) {\n return createOption(option, key, selected);\n }\n return (\n \n );\n })}\n \n
\n {error && {error}
}\n \n );\n};\n\nSelectInput.propTypes = props;\nSelectInput.defaultProps = defaultProps;\nexport default withSettingsContext(withTranslation()(SelectInput));\n","import SelectInput from './SelectInput';\nexport default SelectInput;\n","import PropTypes from 'prop-types';\n\nexport const props = {\n logoUrl: PropTypes.string,\n title: PropTypes.string,\n address: PropTypes.string,\n hours: PropTypes.array,\n socialNetworks: PropTypes.array,\n color: PropTypes.string,\n logoHeight: PropTypes.string,\n};\n","import style from 'styled-components';\n\nexport const StyledCompanyInfo = style.div`\n color: ${props => props.theme.font.colors.secondary} !important;\n\n .companyInfoTitle {\n margin-top: 20px;\n margin-bottom: .5rem;\n color: ${props => props.color || props.theme.font.colors.secondary};\n }\n\n p, .adress {\n color: ${props => props.color || props.theme.font.colors.secondary};\n margin-block-end: 0;\n margin-block-start: 0;\n line-height: 20px;\n font-size: 12px;\n font-weight: 200;\n }\n`;\n","import CompanyInfo from './CompanyInfo';\nexport default CompanyInfo;\n","import React from 'react';\nimport { props } from './CompanyInfo.props';\nimport { StyledCompanyInfo } from './CompanyInfo.styled';\nimport { Logo, Title, SocialList, TranslatedLink } from '../';\nimport { useTranslation } from 'react-i18next';\nimport { tt } from '../../utils/translationHelper';\nimport ReactMarkdownn from 'react-markdown';\n\nconst CompanyInfo = ({\n logoUrl,\n logoWidth,\n logoHeight,\n title,\n address,\n customText,\n hours = [],\n socialNetworks = [],\n addressPath,\n color,\n showSocialsOnRight,\n}) => {\n const { t } = useTranslation();\n\n return (\n {tt(address, t)}
\n ))}\n {hours.map((hour, index) => (\n{tt(hour, t)}
\n ))}\n {customText &&\n {langs.map(lang => {\n if (this.state.currentLang === lang) return null;\n\n return (\n this.changeLanguague(lang)}\n >\n \n {this.getLanguageText(lang)}\n {this.getLanguageText(lang)}\n \n );\n })}\n
\n \n )\n );\n }\n}\n\nconst mapStateToProps = ({ siteConfiguration, searchCars }) => ({\n langConfig: siteConfiguration.settings.configurations.langConfig,\n});\n\nexport default connect(mapStateToProps)(withTranslation()(LangDropdown));\n","import PropTypes from 'prop-types';\n\nexport const props = {\n link: PropTypes.string,\n text: PropTypes.string,\n isActive: PropTypes.bool,\n};\n","import React from 'react';\nimport { Link } from 'react-router-dom';\nimport { props } from './BreadcrumbItem.props';\nimport { TranslatedComponent } from 'components/';\nimport { withTranslation } from 'react-i18next';\n\nclass BreadcrumbItem extends TranslatedComponent {\n static propTypes = props;\n\n render() {\n return (\n \n
\n - \n {showHome && (\n
\n
\n
\n \n ))}\n Centered Modal
\n \n \n\n prov.name)}\n onChange={this.onProvinceChange}\n error={this.state.formErrors.province}\n />\n )}\n {askForGuestAmount && (\n
\n \n
\n {askForState && (\n \n
\n \n
\n \n {' '}\n
\n )}\n\n \n
\n {this.state.ReCAPTCHAErrorMessage}
\n )}\n\n
\n );\n }\n\n successMessage() {\n const { t } = this.props;\n return (\n {t('contactFormFail')}
\n\n
\n );\n }\n\n render() {\n const { t } = this.props;\n\n if (this.state.step === 0) {\n return this.contactForm();\n } else if (this.state.step === 1) {\n const thanksUrl = this.props.history.location.pathname + '/' + t('graciasUrl');\n window.history.pushState('', '', thanksUrl);\n\n return this.successMessage();\n } else {\n const errorUrl = this.props.history.location.pathname + '/error';\n window.history.pushState('', '', errorUrl);\n return this.errorMessage();\n }\n }\n}\n\nexport default withRouter(withSettingsContext(withTheme(withTranslation()(ContactForm))));\n","import ContactForm from './ContactForm';\nexport default ContactForm;\n","import style from 'styled-components';\n\nexport const StyledQuoteForm = style.form`\npadding-right: 20% !important;\npadding-left: 20% !important;\nmargin-bottom: 20px;\n\n.recaptcha {\n div {\n margin-top: 10px;\n }\n}\n\n.terms-conditions {\n font-size: 0.8em;\n padding: 5px;\n}\n`;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Btn, TextInput, Icon } from 'components/';\nimport { withTranslation } from 'react-i18next';\nimport ReCAPTCHA from 'react-google-recaptcha';\nimport * as yup from 'yup';\nimport { sendCompanyContact } from 'services/api';\nimport { StyledQuoteForm } from './QuoteForm.styled';\nimport { withRouter } from 'react-router';\nimport { CheckboxInput } from '/components';\n\nclass QuoteForm extends React.Component {\n static propTypes = {\n items: PropTypes.array,\n };\n\n constructor(props) {\n super(props);\n\n const { t, items } = props;\n this.submit = this.submit.bind(this);\n this.recaptchaVerify = this.recaptchaVerify.bind(this);\n this.state = {\n companyInfo: {\n formType: 'CompanyContact',\n },\n ReCAPTCHAError: false,\n loading: false,\n isVerified: false,\n step: 0,\n captcha: null,\n ReCAPTCHAErrorMessage: null,\n formErrors: {\n companyName: null,\n companyId: null,\n country: null,\n businessAddress: null,\n fullname: null,\n email: null,\n phone: null,\n termsConditions: null,\n },\n };\n\n this.companyInfoFormSchema = yup.object().shape({\n companyName: yup.string().required(t('inputIsRequired', { field: t('companyName') })),\n companyId: yup\n .number()\n .required(\n t('inputIsRequired', { field: t('companyId', { companyIdType: items.companyIdType }) }),\n ),\n country: yup.string().required(t('inputIsRequired', { field: t('country') })),\n businessAddress: yup.string().required(t('inputIsRequired', { field: t('businessAddress') })),\n fullname: yup.string().required(t('inputIsRequired', { field: t('enterFullName') })),\n email: yup\n .string()\n .email()\n .required(t('inputIsRequired', { field: t('enterEmail') })),\n phone: yup\n .string()\n .matches(\n /^((\\\\+[1-9]{1,4}[ \\\\-]*)|(\\\\([0-9]{2,3}\\\\)[ \\\\-]*)|([0-9]{2,4})[ \\\\-]*)*?[0-9]{3,4}?[ \\\\-]*[0-9]{3,4}?$/,\n t('invalidPhone'),\n ),\n termsConditions: yup\n .boolean()\n .required(t('mustAcceptTermAndConditions'))\n .oneOf([true], t('mustAcceptTermAndConditions')),\n });\n\n this.formRef = React.createRef(null);\n this.ReCAPTCHARef = React.createRef();\n }\n\n recaptchaVerify(res) {\n this.setState({ isVerified: true, captcha: res });\n }\n\n onFullNameChange = fullname => {\n this.setState(prevState => ({\n ...prevState,\n companyInfo: { ...prevState.companyInfo, fullname },\n formErrors: { ...prevState.formErrors, fullname: null },\n }));\n };\n\n onCompanyNameChange = companyName => {\n this.setState(prevState => ({\n ...prevState,\n companyInfo: { ...prevState.companyInfo, companyName },\n formErrors: { ...prevState.formErrors, companyName: null },\n }));\n };\n\n onCompanyIdChange = companyId => {\n this.setState(prevState => ({\n ...prevState,\n companyInfo: { ...prevState.companyInfo, companyId },\n formErrors: { ...prevState.formErrors, companyId: null },\n }));\n };\n\n onCountryChange = country => {\n this.setState(prevState => ({\n ...prevState,\n companyInfo: { ...prevState.companyInfo, country },\n formErrors: { ...prevState.formErrors, country: null },\n }));\n };\n\n onBusinessAddressChange = businessAddress => {\n this.setState(prevState => ({\n ...prevState,\n companyInfo: { ...prevState.companyInfo, businessAddress },\n formErrors: { ...prevState.formErrors, businessAddress: null },\n }));\n };\n\n onMailChange = email => {\n this.setState(prevState => ({\n ...prevState,\n companyInfo: { ...prevState.companyInfo, email },\n formErrors: { ...prevState.formErrors, email: null },\n }));\n };\n\n onTelephoneChange = phone => {\n this.setState(prevState => ({\n ...prevState,\n companyInfo: { ...prevState.companyInfo, phone },\n formErrors: { ...prevState.formErrors, phone: null },\n }));\n };\n\n onTermsConditionsChange = termsConditions => {\n this.setState(prevState => ({\n ...prevState,\n companyInfo: { ...prevState.companyInfo, termsConditions },\n formErrors: { ...prevState.formErrors, termsConditions: null },\n }));\n };\n\n submit = event => {\n event.preventDefault();\n const companyInfo = this.state.companyInfo;\n\n this.companyInfoFormSchema\n .validate(companyInfo, { abortEarly: false })\n .then(valid => {\n if (valid && this.state.isVerified) {\n let parsedContact = this.state.companyInfo;\n parsedContact.reCAPTCHA = this.state.captcha;\n\n this.setState({ loading: true });\n sendCompanyContact(parsedContact)\n .then(res => {\n this.setState({ step: 1 });\n })\n .catch(error => {\n if (\n error.response == null ||\n error.response.data == null ||\n error.response.data.code !== 100\n ) {\n this.setState({ step: 2 });\n } else {\n this.setState({\n loading: false,\n ReCAPTCHAErrorMessage: error.response.data.message,\n ReCAPTCHAError: true,\n });\n this.ReCAPTCHARef.current.reset();\n }\n });\n }\n })\n .catch(err => {\n const formErrors = err.inner.reduce((prevErrors, currentError) => {\n return { ...prevErrors, [currentError.path]: currentError.message };\n }, {});\n window.scrollTo(0, this.formRef.current.offsetTop);\n this.setState(prevState => ({ ...prevState, formErrors }));\n });\n\n return;\n };\n\n QuoteForm() {\n const { t, className, i18n, items } = this.props;\n if (!items) return null;\n\n return (\n {t('contactFormSucces')}
\n\n
\n \n
\n \n
\n \n
\n \n
\n
\n \n
\n \n
\n
\n \n {t('acceptTermConditions')}}\n />\n
\n {items.termsConditionsText}
\n {this.state.ReCAPTCHAErrorMessage}
\n )}\n\n
\n );\n }\n\n successMessage() {\n const { t } = this.props;\n return (\n {t('contactFormFail')}
\n\n
\n );\n }\n\n render() {\n const { t } = this.props;\n\n if (this.state.step === 0) {\n return this.QuoteForm();\n } else if (this.state.step === 1) {\n const thanksUrl = this.props.history.location.pathname + '/' + t('graciasUrl');\n window.history.pushState('', '', thanksUrl);\n\n return this.successMessage();\n } else {\n const errorUrl = this.props.history.location.pathname + '/error';\n window.history.pushState('', '', errorUrl);\n return this.errorMessage();\n }\n }\n}\n\nexport default withRouter(withTranslation()(QuoteForm));\n","import QuoteForm from './QuoteForm';\nexport default QuoteForm;\n","import React from 'react';\nimport { Btn, TextInput } from 'components/';\nimport { withTranslation } from 'react-i18next';\nimport { PropTypes } from 'prop-types';\nimport ReCAPTCHA from 'react-google-recaptcha';\nimport queryString from 'query-string';\nimport * as yup from 'yup';\nimport { cancelReservation } from 'services/api';\nimport { history } from '../../store';\nimport { tt, tlink } from 'utils/translationHelper';\nimport { withRouter } from 'react-router-dom';\nimport withSettingsContext from 'SettingsContext';\nimport { MODERN_THEME } from 'styled/constants';\n\nclass CancelForm extends React.Component {\n constructor(props) {\n super(props);\n\n const { t } = props;\n this.handleCancel = this.handleCancel.bind(this);\n this.recaptchaVerify = this.recaptchaVerify.bind(this);\n this.state = {\n userInfo: {\n tcAccept: false,\n },\n ReCAPTCHAError: false,\n loading: false,\n isVerified: false,\n captcha: null,\n ReCAPTCHAErrorMessage: null,\n formErrors: {\n lastName: null,\n reservationNumber: null,\n },\n };\n\n this.userInfoFormSchema = yup.object().shape({\n lastName: yup.string().required(t('inputIsRequired', { field: t('lastname') })),\n reservationNumber: yup\n .number()\n .required(t('inputIsRequired', { field: t('enterReservationNumber') })),\n });\n\n this.formRef = React.createRef(null);\n this.ReCAPTCHARef = React.createRef();\n }\n\n static propTypes = {\n t: PropTypes.func,\n className: PropTypes.string,\n };\n\n componentDidMount() {\n const { location } = this.props;\n const parseQs = queryString.parse(location.search);\n if (parseQs.lastName && parseQs.reservationNumber) {\n this.setState({\n userInfo: {\n lastName: parseQs.lastName,\n reservationNumber: parseQs.reservationNumber,\n isVerified: false,\n },\n });\n }\n }\n\n onLastNameChange = lastName => {\n this.setState(prevState => ({\n ...prevState,\n userInfo: { ...prevState.userInfo, lastName },\n formErrors: { ...prevState.formErrors, lastName: null },\n }));\n };\n\n onReservationNumberChange = reservationNumber => {\n this.setState(prevState => ({\n ...prevState,\n userInfo: { ...prevState.userInfo, reservationNumber },\n formErrors: { ...prevState.formErrors, reservationNumber: null },\n }));\n };\n\n handleCancel = event => {\n event.preventDefault();\n const { t, i18n, settings } = this.props;\n const userInfo = this.state.userInfo;\n\n this.userInfoFormSchema\n .validate(userInfo, { abortEarly: false })\n .then(valid => {\n if (valid && this.state.isVerified) {\n const parsedCancel = {\n BookingId: this.state.userInfo.reservationNumber,\n Lastname: this.state.userInfo.lastName,\n Captcha: this.state.captcha,\n };\n this.setState({ loading: true });\n cancelReservation(parsedCancel)\n .then(res => {\n history.push(\n `${tlink(\n '__Routes.cancelSuccess',\n t,\n i18n,\n null,\n settings.configurations.langConfig,\n )}`,\n );\n })\n .catch(error => {\n if (\n error.response == null ||\n error.response.data == null ||\n error.response.data.code !== 100\n ) {\n let errorMessage =\n error.response && error.response.data\n ? error.response.data.message\n : tt('__PageCancelarReserva.genericError', t);\n history.push(\n `${tlink(\n '__Routes.cancelFailed',\n t,\n i18n,\n null,\n settings.configurations.langConfig,\n )}`,\n { error: errorMessage },\n );\n } else {\n this.setState({\n loading: false,\n ReCAPTCHAErrorMessage: error.response.data.message,\n ReCAPTCHAError: true,\n });\n this.ReCAPTCHARef.current.reset();\n }\n });\n }\n })\n .catch(err => {\n const formErrors = err.inner.reduce((prevErrors, currentError) => {\n return { ...prevErrors, [currentError.path]: currentError.message };\n }, {});\n window.scrollTo(0, this.formRef.current.offsetTop);\n this.setState(prevState => ({ ...prevState, formErrors }));\n });\n\n return;\n };\n\n recaptchaVerify(res) {\n this.setState({ isVerified: true, captcha: res });\n }\n\n getBtnStyles() {\n if (this.props.settings.theme.template === MODERN_THEME) {\n return 'pl-5 pr-5 pt-3 pb-3';\n }\n return '';\n }\n\n render() {\n const { t, className, i18n } = this.props;\n\n const btnStyles = this.getBtnStyles();\n\n return (\n \n );\n }\n}\n\nexport default withSettingsContext(withTranslation()(withRouter(CancelForm)));\n","import CancelForm from './CancelForm';\nexport default CancelForm;\n","import PropTypes from 'prop-types';\n\nexport const props = {\n page: PropTypes.shape({}),\n settings: PropTypes.shape({ title: PropTypes.string }),\n};\n","import style from 'styled-components';\n\nexport const StyledPageWithTitle = style.section`\n flex: 1;\n @media (max-width: ${props => props.theme.screens.md}){\n h2{\n text-align:left;\n font-size: 16px !important;\n }\n }\n\n h2{\n font-size: 22px;\n margin-top: 15px;\n }\n \n h1{\n font-size: 16px;\n margin-top: 0;\n @media only screen and (min-width: ${props =>\n props.theme.screens.xl}) and (max-width: ${props => props.theme.screens.xxl}){\n font-size: 16px !important;\n }\n\n }\n`;\n\nexport const StyledPageWithTitleModern = style.section`\n flex: 1;\n background:#FFF;\n h2{\n font-size: 34px !important;\n margin-top: 15px;\n color:${props => props.theme.colors.primary};\n font-weight:400\n }\n\n @media (max-width: 767px){\n h2{\n text-align:left;\n font-size: 25px !important;\n }\n }\n \n h1{\n font-size: 16px;\n margin-top: 0;\n @media only screen and (min-width: ${props =>\n props.theme.screens.xl}) and (max-width: ${props => props.theme.screens.xxl}){\n font-size: 16px !important;\n }\n\n }\n`;\n\nexport const StyledBanner = style.section`\n background-image: url(${props => props.bannerImage});\n background-size: cover;\n background-position: center;\n height: ${props => props.height || '200px'};\n`;\n\nexport const StyledMap = style.section`\n position: relative;\n \n .gradient {\n width: 100%;\n height: 80px;\n position: absolute;\n z-index: 2;\n background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);\n bottom: 0;\n }\n .map-container {\n height: ${props => props.mapContainerHeight || '350px'};\n width: 100%;\n position: relative;\n overflow: hidden;\n }\n`;\n","import styled from 'styled-components';\n\nexport const StyledPage = styled.section`\n min-height: 400px;\n background-color: ${props => props.theme.colors.bg};\n\n &.searchPage {\n display: flex;\n background-color: ${props => props.theme.colors.searchBg};\n\n @media only screen and (max-width: ${props => props.theme.screens.md}) {\n flex-direction: column;\n justify-content: center;\n padding: 0;\n margin: 0;\n }\n }\n\n a {\n transition: all 0.2s;\n }\n`;\n\nexport const StyledH2 = styled.h2`\n background-color: red;\n`;\n\nexport const StyledDiv = styled.div`\n header {\n .header-item {\n padding: 0;\n }\n\n .header-slogan {\n white-space: nowrap;\n }\n }\n`;\n","import React from 'react';\nimport { props } from './PageWithTitle.props';\nimport {\n StyledPageWithTitle,\n StyledPageWithTitleModern,\n StyledBanner,\n StyledMap,\n} from './PageWithTitle.styled';\nimport { BasePage, PageTitle, Breadcrumb, CompositeComponent } from 'components/';\nimport { StyledPage } from 'styled/page';\nimport { withTranslation } from 'react-i18next';\nimport withSettingsContext from 'SettingsContext';\nimport { MODERN_THEME } from 'styled/constants';\n\nclass PageWithTitle extends CompositeComponent {\n static propTypes = props;\n\n getTemplateStyledComponent() {\n if (this.props.settings.theme.template === MODERN_THEME) {\n return StyledPageWithTitleModern;\n }\n return StyledPageWithTitle;\n }\n\n render() {\n const {\n height,\n bannerImage,\n breadCrumItems,\n title,\n titleType,\n subTitle,\n subtitleType,\n showBreadcrumb,\n showBanner,\n showMap,\n mapUrl,\n mapHeight,\n mapContainerHeight,\n hideGradient,\n subTitleColor,\n titleColor,\n subTitleSize,\n titleSize,\n } = this.props;\n\n const StyledComponent = this.getTemplateStyledComponent();\n\n return (\n <>\n {showBanner && {t('contactFormSucces')}
\n\n
\n ![\"AFIP\"](\"https://rently.azureedge.net/street/Web/afip.jpg\")
\n \n
\n \n \n
\n \n
\n\n \n {pickUp && pickUp.place && pickUp.place.value && (\n \n {t('differentreturnplace')}\n \n )}\n {showDifferentDropPlace && (\n <>\n \n
\n \n
\n \n )}\n \n
\n \n\n \n
\n\n \n
\n \n \n {t(checkoutText) || t('checkoutMsg')} ({dropOff.checkoutTime})\n
\n )}\n \n {featureFlags.showPromotionCode & !isCompany ? (\n
\n\n \n
\n ) : (\n \n )}\n {!isHome && isCompany && commercialAgreements && commercialAgreements.length > 0 && (\n \n
\n )}\n {featureFlags && featureFlags.kilometerFilters && (\n \n handleKmFilter(e)}\n />\n
\n )}\n {featureFlags && featureFlags.showDriverAge && (\n <>\n \n {!useDriverAgeWithoutCaution ? (\n
\n {!driverAge.betweenMinAndMax && (\n \n \n \n \n \n
\n ) : (\n \n handleDriverAgeChange(e)}\n />\n \n \n \n
\n )}\n \n
\n )}\n \n )}\n \n handleDriverAgeChange(false, value)}\n value={driverAge.age || ''}\n type=\"number\"\n error={driverAge.age && invalidDriverAge ? t('driverAgeError') : ''}\n />\n
\n \n
\n \n );\n }\n}\n\nexport default withSettingsContext(withTheme(withTranslation()(DefaultSearchForm)));\n","import style from 'styled-components';\n\nexport const StyledSearchForm = style.form`\n\tbackground-color: ${props =>\n props.transparent ? props.theme.colors.transparent : props.theme.colors.bg};\n box-shadow: -2px 10px 12px 1px rgba(46,45,53,0.05);\n\tfont-size: 0.93em;\n min-height: auto;\n font-size: 13px;\n border-radius:12px;\n\n .no-gutters>[class*=col-] {\n padding-right: 5px;\n padding-left: 0;\n}\n\n .diff-drop-place {\n color: #2E2D35;\n cursor: pointer;\n display: block; \n margin-bottom: -10px;\n font-size:14px;\n }\n\n\n .diff-drop-place:hover {\n color:${props => props.subItemHover || props.theme.colors.secondary};\n }\n\n .DateRangePicker_picker {\n z-index: 10000;\n }\n \n .DateRangePickerInput{\n background-color:transparent;\n }\n\n .input-wrapper {\n height: 48px;\n background: transparent;\n border: 1px solid #D8DCE2;\n border-radius:8px\n }\n\n .fa-arrow-right {\n color: #e5e5e5 !important;\n font-size: 12px !important;\n }\n\n .range-date-picker {\n .DateInput{\n width: 40%;\n }\n \n .DateInput_input {\n font-size: 14px;\n padding-right: 0;\n font-weight:400;\n }\n }\n\n .label{\n font-size: 13px;\n font-weight: 500;\n position:relative;\n top:18px;\n left:7px;\n background-color:#FFF;\n padding:5px;\n z-index:1\n color: #656970;\n }\n\n .hour-select {\n white-space: nowrap;\n .input-wrapper {\n height: 48px;\n margin-bottom: 0.5rem !important;\n }\n }\n\n p{\n font-size: 13px !important;\n font-weight: 600 !important;\n margin-bottom: 5px !important;\n }\n\n .checkboxes {\n display: flex;\n align-items: flex-end;\n }\n .checkboxes > div:first-child {\n\t\tpadding-right: 10px;\n\t\tmargin-right: 10px;\n }\n\n .submit-btn-row { \n justify-content: center;\n \n } \n\n .submit-btn {\n width: 100%;\n white-space: nowrap;\n padding: 15px 15px;\n border-radius: 8px;\n margin-top:35px;\n }\n\n .label-container {\n display: block;\n position: relative;\n padding-left: 27px;\n margin-bottom: 12px;\n cursor: pointer;\n font-size: 13px;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n\n .form-check-input {\n //position: absolute;\n opacity: 0;\n cursor: pointer;\n }\n\n .checkmark {\n position: absolute;\n top: 0;\n left: 0;\n height: 20px;\n width: 20px;\n background-color: #eee;\n border-radius: 50%;\n &:after {\n content: \"\";\n position: absolute;\n display: none;\n top: 5px;\n left: 5px;\n width: 10px;\n height: 10px;\n border-radius: 50%;\n background: white;\n }\n }\n &:hover input ~ .checkmark {\n background-color: #ccc;\n }\n input:checked ~ .checkmark {\n background-color: ${props => props.theme.colors.buttonPrimaryBgHover};\n }\n input:checked ~ .checkmark:after {\n display: block;\n }\n }\n\n .driver-age { \n .special-checkbox {\n display: flex; \n align-items: center;\n margin-top: -7px;\n\n & > div {\n margin-right: 10px;\n }\n\n i {\n font-size: 1rem;\n position: relative;\n top: -2px;\n color: ${({ theme }) => theme.colors.secondary};\n }\n }\n \n .driver-age-input { \n margin-top: -30px;\n margin-bottom: 20px;\n\n input {\n padding: 0 12px;\n }\n }\n\n .special-label {\n label {\n top: 0px;\n margin-right: 10px;\n font-size: 13px;\n font-weight: 600;\n }\n \n i {\n font-size: 1rem;\n position: relative;\n color: ${({ theme }) => theme.colors.secondary};\n }\n }\n }\n\n @media (max-width: 992px) { \n .submit-btn { \n position: relative; \n margin-bottom: 2rem;\n }\n }\n\n @media (max-width: ${props => props.theme.screens.lg}) {\n .return-place-picker {\n margin-top: 10px;\n margin-bottom: 20px;\n } \n }\n\n @media (max-width: ${props => props.theme.screens.md}) { \n .row > div {\n margin-bottom: 0;\n }\n .row {\n margin-bottom: 0;\n } \n }\n\n @media (max-width: ${props => props.theme.screens.xs}) {\n font-size: 13px; \n .checkboxes {\n flex-direction: column;\n align-items: baseline;\n div {\n margin-bottom: 10px;\n }\n }\n .input-wrapper{\n margin-bottom:0 !important\n }\n\n .label{\n font-size: 12px;\n font-weigth: 500;\n }\n .pickup-place-picker, .filtro-km, .submit-block, .submit-block .col-md-12{\n margin-bottom: 0 !important;\n }\n\n .diff-drop-place{\n font-size: 13px;\n margin-bottom:0;\n }\n .hour-select {\n width: 50%;\n display: inline-block;\n margin-bottom: 0 !important;\n }\n .hour-select-from {\n padding-right: .5rem!important;\n }\n .hour-select-to {\n padding-left: .5rem!important;\n } \n\n \n .submit-btn {\n margin-top:0;\n }\n\n }\n\n @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) {\n .input-wrapper{\n margin-bottom:0 !important\n } \n }\n`;\n","import React from 'react';\nimport { withTranslation } from 'react-i18next';\nimport { Tooltip } from '@material-ui/core';\n\nimport Btn from 'components/Btn';\nimport CheckboxInput from 'components/CheckBoxInput';\nimport RangeDateInput from 'components/RangeDateInput';\nimport SearchBoxPlace from 'components/SearchBoxPlace';\nimport SelectInput from 'components/SelectInput';\nimport TextInput from 'components/TextInput';\nimport withSettingsContext from 'SettingsContext';\nimport { StyledSearchForm } from './index.styled';\nimport { withTheme } from 'styled-components';\nimport { tt } from 'utils/translationHelper';\nimport { Col, Row } from 'react-bootstrap';\nimport moment from 'moment';\nclass ModernSearchForm extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n isMobile: false,\n loading: false,\n };\n this.handleResize = this.handleResize.bind(this);\n }\n\n handleResize() {\n const isMobile = window.innerWidth <= 600;\n this.setState({ isMobile });\n }\n\n componentDidMount() {\n window.addEventListener('resize', this.handleResize);\n this.handleResize();\n }\n\n componentWillUnmount() {\n window.removeEventListener('resize', this.handleResize);\n }\n\n handleSubmit = () => {\n this.setState({ loading: true });\n this.props.submitSearch();\n };\n\n render() {\n const {\n searchText,\n className,\n featureFlags,\n promotionCodeText,\n transparent,\n checkoutText,\n showCity,\n showIATA,\n showDifferentDropPlace,\n orientation,\n focus,\n withFullScreenPortal,\n pickUp,\n dropOff,\n promotionCode,\n showInvalidPromotionMessage,\n kmFilter,\n t,\n theme,\n pickUpSelect,\n toggleDropInput,\n dropOffSelect,\n filteredDropPlaces,\n handleDateSelect,\n handleDateFocus,\n isDayBlocked,\n pickUpHourSelection,\n dropOffHourSelection,\n onPromotionCodeChange,\n handleKmFilter,\n disableSubmit,\n driverMinAge,\n driverMaxAge,\n invalidDriverAge,\n handleDriverAgeChange,\n driverAge,\n driverAgeWarning,\n isCompany,\n useDriverAgeWithoutCaution,\n driverAgeAllowedMin,\n driverAgeAllowedMax,\n useBackendSort,\n customText,\n pickUpPlaces,\n distanceUnit,\n isOutsideRange,\n minStayLength,\n } = this.props;\n\n const kmCheckbox = (\n \n this.handleSubmit()}\n disabled={disableSubmit() || this.state.loading}\n />\n
\n \n handleKmFilter(e)}\n />\n
\n );\n\n return (\n \n \n\n
\n \n {pickUp && pickUp.place && pickUp.place.value && (\n \n {t('differentreturnplace')}\n \n )}\n {showDifferentDropPlace && (\n <>\n \n
\n \n
\n \n )}\n \n
\n \n
\n \n \n {t(checkoutText) || t('checkoutMsg')} ({dropOff.checkoutTime})\n
\n )}\n \n \n
\n ) : (\n \n )}\n \n {!useDriverAgeWithoutCaution ? (\n
\n )}\n \n \n \n \n \n \n
\n ) : (\n <>\n \n handleDriverAgeChange(e)}\n />\n \n \n \n
\n {!driverAge.betweenMinAndMax && (\n \n handleDriverAgeChange(false, value)}\n value={driverAge.age || ''}\n type=\"number\"\n error={driverAge.age && invalidDriverAge ? t('driverAgeError') : ''}\n />\n
\n )}\n \n )}\n \n handleKmFilter(e)}\n />\n
\n );\n\n const showPromotionCode = featureFlags.showPromotionCode\n ? featureFlags.showPromotionCode\n : false;\n\n const categoriesOptions =\n categories?.map(cat => ({ value: cat.id.toString(), text: cat.name })) || [];\n\n return (\n {errorMessage}
}\n\n {pickUp && pickUp.place && pickUp.place.value && (\n
\n \n \n {t('differentreturnplace')}\n
\n )}\n {showDifferentDropPlace && (\n <>\n \n \n
\n \n )}\n \n
\n ) : (\n \n )}\n \n {!useDriverAgeWithoutCaution ? (\n
\n )}\n \n \n \n \n \n \n
\n ) : (\n <>\n \n handleDriverAgeChange(e)}\n />\n \n \n \n
\n {!driverAge.betweenMinAndMax && (\n \n handleDriverAgeChange(false, value)}\n value={driverAge.age || ''}\n type=\"number\"\n error={\n driverAge.age && invalidDriverAge ? t('driverAgeError') : ''\n }\n />\n
\n )}\n \n )}\n \n
\n \n \n
\n \n
\n \n \n {t('differentreturnplace')}\n \n {showDifferentDropPlace && (\n <>\n \n
\n \n
\n \n )}\n \n
\n \n
\n \n
\n \n
\n \n {featureFlags.showPromotionCode && (\n
\n \n
\n )}\n {featureFlags && featureFlags.kilometerFilters && (\n \n this.handleKmFilter(e)}\n />\n
\n )}\n \n
\n \n );\n }\n}\n\nconst mapStateToProps = ({ user, siteConfiguration }) => ({\n profile: user.profile,\n settings: siteConfiguration.settings,\n});\n\nexport default connect(mapStateToProps)(withTheme(withTranslation()(SearchFormWhatsApp)));\n","import SearchFormWhatsApp from './SearchFormWhatsApp';\nimport { withRouter } from 'react-router-dom';\nimport { connect } from 'react-redux';\nimport {\n setSearchCarParams,\n fetchBookeableCars,\n fetchPlaces,\n fetchLanguages,\n fetchSchedules,\n fetchHolidays,\n} from 'actions/';\n\nconst mapStateToProps = ({ router, global, siteConfiguration, searchCars }) => ({\n router,\n places: global.listPlaces,\n featureFlags: siteConfiguration.settings.featureFlags,\n configurations: siteConfiguration.settings.configurations,\n holidays: global.listHolidays,\n schedules: global.listSchedules,\n params: searchCars.params,\n searchCars,\n});\n\nexport default withRouter(\n connect(mapStateToProps, {\n setSearchCarParams,\n fetchBookeableCars,\n fetchPlaces,\n fetchLanguages,\n fetchSchedules,\n fetchHolidays,\n })(SearchFormWhatsApp),\n);\n","import style from 'styled-components';\n\nexport const StyledCategoriesFilter = style.div`\n\n @media (max-width: ${props => props.theme.screens.xs}) {\n }\n\n background-color: ${props => props.theme.colors.bg};\n box-shadow: 3px 3px 6px #00000016;\n\n p{\n font-weight: bold !important;\n font-size: 14px !important;\n }\n\n label{\n text-transform: capitalize;\n }\n\n .special-checkbox{\n display: inline-block;\n margin-bottom: 5px;\n width: 100%;\n }\n \n`;\n","import style from 'styled-components';\n\nexport const StyledCategoriesFilterModern = style.div`\n\n @media (max-width: ${props => props.theme.screens.xs}) {\n }\n\n background-color: ${props => props.theme.colors.bg};\n box-shadow: 3px 3px 6px #00000016;\n\n p{\n font-weight: bold !important;\n font-size: 18px !important;\n }\n\n label{\n text-transform: capitalize;\n }\n\n .special-checkbox{\n display: inline-block;\n margin-bottom: 5px;\n width: 100%;\n }\n \n`;\n","import React from 'react';\nimport { withTranslation } from 'react-i18next';\nimport { StyledCategoriesFilter } from './CategoriesFilter.styled';\nimport { StyledCategoriesFilterModern } from './CategoriesFilter.styled.modern';\nimport { CheckboxInput } from '/components';\nimport { PropTypes } from 'prop-types';\nimport { getAllCategoryIdsInCollection } from '../../utils/categoryGroupHelper';\nimport withSettingsContext from 'SettingsContext';\nimport { MODERN_THEME } from 'styled/constants';\n\nclass CategoriesFilter extends React.Component {\n state = {\n loading: true,\n workWithCategoryGroups: false,\n };\n\n static propTypes = {\n listCategories: PropTypes.array,\n t: PropTypes.func,\n onCategoriesChanged: PropTypes.func,\n };\n\n handleCategoryChange = entity => {\n const {\n onCategoriesChanged,\n listCategories,\n params,\n setSearchCarParams,\n settings: {\n configurations: { categoryGroups },\n },\n } = this.props;\n\n const filterEntities = this.state.workWithCategoryGroups ? categoryGroups : listCategories;\n let categories = params.categories;\n const entityIdentifier = this.getEntityUniqueId(entity);\n\n if (this.state.workWithCategoryGroups) {\n const categoriesInGroup = entity.categories.flatMap(c => c.ids);\n categoriesInGroup.forEach(categoryId => {\n if (!categories.includes(categoryId)) {\n categories.push(categoryId);\n } else {\n const index = categories.indexOf(categoryId);\n if (index !== -1) categories.splice(index, 1);\n }\n });\n\n // check if all categories are included If so, we empty the filters.\n const allCategoriesInGroup = getAllCategoryIdsInCollection(categoryGroups);\n if (categories.length === allCategoriesInGroup.length) {\n categories = [];\n }\n }\n\n if (!this.state.workWithCategoryGroups) {\n const exists = categories.find(category => entityIdentifier === category);\n if (!exists) categories.push(entityIdentifier);\n else {\n const index = categories.indexOf(entityIdentifier);\n if (index !== -1) categories.splice(index, 1);\n }\n\n if (categories.length === filterEntities.length) categories = [];\n }\n\n this.setState(prevState => ({ ...prevState }));\n let newParams = { ...params, ...{ categories: categories } };\n setSearchCarParams(newParams);\n\n if (onCategoriesChanged) onCategoriesChanged(categories);\n };\n\n handleAllCategoriesChange = value => {\n if (value) {\n const { onCategoriesChanged, params, setSearchCarParams } = this.props;\n\n this.setState(prevState => ({\n ...prevState,\n }));\n\n let newParams = { ...params, ...{ categories: [] } };\n\n setSearchCarParams(newParams);\n\n if (onCategoriesChanged) onCategoriesChanged([]);\n }\n };\n\n async componentDidMount() {\n const {\n fetchCategories,\n i18n,\n settings: {\n configurations: { categoryGroups },\n },\n } = this.props;\n\n await fetchCategories(i18n.language);\n\n this.setState(prevState => ({\n ...prevState,\n loading: false,\n workWithCategoryGroups: categoryGroups && categoryGroups.length > 0,\n }));\n }\n\n getEntityUniqueId = entity => {\n return this.state.workWithCategoryGroups ? entity.name : entity.id;\n };\n\n isItemSelected = entity => {\n const {\n categories,\n settings: {\n configurations: { categoryGroups },\n },\n } = this.props;\n\n if (categoryGroups) {\n const categoriesInGroup = entity.categories.flatMap(c => c.ids);\n return categoriesInGroup.every(c => categories.includes(c));\n }\n\n return categories.indexOf(this.getEntityUniqueId(entity)) !== -1;\n };\n\n isAllChecked = () => {\n const {\n listCategories,\n categories,\n settings: {\n configurations: { categoryGroups },\n },\n } = this.props;\n if (!categories || categories.length === 0) return true;\n\n let categoriesToCheck = [];\n if (this.state.workWithCategoryGroups) {\n categoriesToCheck = getAllCategoryIdsInCollection(categoryGroups);\n } else {\n categoriesToCheck = listCategories;\n }\n\n return categoriesToCheck.length === categories.length;\n };\n\n getTemplateStyledComponent() {\n if (this.props.settings.theme.template === MODERN_THEME) {\n return StyledCategoriesFilterModern;\n }\n return StyledCategoriesFilter;\n }\n\n render() {\n if (this.state.loading) return null;\n\n const {\n listCategories,\n t,\n settings: {\n configurations: { categoryGroups },\n },\n } = this.props;\n const filterEntities = this.state.workWithCategoryGroups ? categoryGroups : listCategories;\n\n let i = Math.floor(filterEntities.length / 2);\n if (i === 0) i = filterEntities.length;\n\n const StyledSection = this.getTemplateStyledComponent();\n\n return (\n \n this.submitSearch()}\n disabled={this.disableSubmit()}\n />\n
\n \n
\n {t('categorias')}
\n\n this.handleCategoryChange(entity)}\n />\n ))}\n
\n \n {filterEntities.slice(i, filterEntities.length).map((entity, index) => (\n this.handleCategoryChange(entity)}\n />\n ))}\n
\n \n
\n {t('mapa')}
\n \n\n \n
\n )}\n\n {HideCarDetailIcons && HideCarDetailIcons.bigLuggage === true ? null : (\n \n \n
\n )}\n\n {HideCarDetailIcons && HideCarDetailIcons.smallLuggage === true ? null : (\n \n \n
\n )}\n\n {HideCarDetailIcons && HideCarDetailIcons.gearbox === true\n ? null\n : model.gearbox != null &&\n model.gearbox !== undefined && (\n \n \n
\n )}\n\n {HideCarDetailIcons && HideCarDetailIcons.airConditioner === true\n ? null\n : model.airConditioner != null &&\n model.airConditioner !== undefined && (\n \n \n
\n )}\n {HideCarDetailIcons && HideCarDetailIcons.abs === true ? null : (\n \n \n
\n )}\n\n {HideCarDetailIcons && HideCarDetailIcons.steering === true\n ? null\n : model.steering != null &&\n model.steering !== undefined && (\n \n \n
\n )}\n\n {HideCarDetailIcons && HideCarDetailIcons.airBag === true ? null : (\n \n <>\n \n
\n )}\n \n \n
\n )}\n {HideCarDetailIcons && HideCarDetailIcons.bigLuggage === true ? null : (\n \n \n
\n )}\n {HideCarDetailIcons && HideCarDetailIcons.smallLuggage === true ? null : (\n \n \n
\n )}\n {HideCarDetailIcons && HideCarDetailIcons.gearbox === true ? null : (\n \n \n
\n )}\n {HideCarDetailIcons && HideCarDetailIcons.unlimitedKilometers === true ? null : (\n \n \n
\n )}\n \n
\n
\n \n
\n \n
\n \n {paymentMethodsListFiltered?.map((paymentMethod, i) => {\n return (\n
\n \n
}\n
\n );\n })}\n {showExchangeMsg && (\n \n
\n {!modernTheme && \n {t(paymentMethod.name)}}\n />\n
\n \n
\n }\n
{error}
}\n \n
,\n );\n });\n\n return res;\n };\n\n renderStars = amount => {\n const stars = [];\n\n for (let i = 0; i < amount; i++) stars.push();\n\n for (let i = stars.length; i < MAX_STARS_SCORE; i++)\n stars.push();\n\n return stars;\n };\n\n render() {\n const { title, subtitle } = this.props;\n\n const settings = {\n dots: true,\n infinite: true,\n speed: 500,\n slidesToShow: 3,\n slidesToScroll: 3,\n };\n\n return (\n \n })
\n
\n \n
\n {this.tt(item.name)}
\n{this.renderStars(item.stars)}
\n\n
\n \n \n {this.getItems()}\n \n
\n \n
\n \n
\n \n
\n {this.tt(relatedRoutes.title)}
\n{this.tt(relatedRoutes.subtitle)}
\n\n {relatedRoutes.routes.map(item => (\n
\n \n
\n ))}\n {item.km}
\n\n {item.customLocation ? this.tt(item.location) : `${t('to')} ${item.location}`}\n
\n{form}
: {`${t('delivery')} ${moment(booking.deliveryInfo.date).format(\n dateTimeFormat,\n )} hs - ${booking.deliveryPlace.name}`}
\n );\n } else {\n return (\n{`${t('delivery')} ${moment(booking.fromDate).format(\n dateTimeFormat,\n )} hs - ${booking.deliveryPlace.name}`}
\n );\n }\n };\n\n const returnInfo = () => {\n if (booking.dropoffInfo && booking.currentStatus == 3) {\n return (\n{`${t('return')} ${moment(booking.dropoffInfo.date).format(\n dateTimeFormat,\n )}hs - ${booking.returnPlace.name}`}
\n );\n } else {\n return null;\n }\n };\n\n return (\n#{booking.id}
\n \n\n\n \n \n \n \n \n\n \n
\n \n
\n \n \n \n {t('balance.total')}:\n \n
\n {t('balance.payed')}:\n
\n {t('balance.balance')}:\n
\n {children}\n
\n {t('myAccount.logIn')}
\n \n {t('myAccount.cancelConfirmation', {\n bookingId: item && item.id,\n })}\n
\n {error &&\n \n {item.rate && (\n \n
\n {item.title}
\n{item.description}
\n\n
\n )}\n {!success && (\n {t('myAccount.recoverPasswordEmailSuccess')}
\n\n {customMessage ? (\n
\n ) : (\n \n
\n {contact.legend &&
\n {t(contact.legend) || contact.legend}
}\n {t(contact.name) || contact.name}\n {t(headerText) || headerText}
}\n \n {contactLinks.map((contact, idx) => {\n return
\n \n \n
\n );\n};\n\nHubspotForm.propTypes = props;\n\nexport default HubspotForm;\n","import { fetchInitialSettings } from 'services/api';\nimport { SITE_CONFIGURATION_SET_SETTINGS } from 'utils/types';\nimport Storage from 'utils/storage';\n\nexport const fetchSettings = (\n refreshCache = false,\n version = null,\n isdraft = false,\n) => async dispatch => {\n try {\n if (refreshCache) {\n await Storage.removeElement('fetchInitialSettings', true);\n }\n\n const data = await Storage.getOrUpdateItem(\n 'fetchInitialSettings',\n async () => {\n return (await fetchInitialSettings(version, isdraft)).data;\n },\n 30,\n true,\n );\n\n return dispatch({\n type: SITE_CONFIGURATION_SET_SETTINGS,\n payload: data,\n });\n } catch (error) {\n return Promise.reject(error);\n }\n};\n","import {\n SEARCH_CARS_SET_PARAMS,\n SEARCH_CARS_SET_CARS,\n SEARCH_CARS_SET_CHECKOUT,\n} from 'utils/types';\nimport moment from 'moment';\nimport { fetchCars, fetchPrice } from 'services/api';\n\nexport const setSearchCarParams = params => {\n return {\n type: SEARCH_CARS_SET_PARAMS,\n payload: params,\n };\n};\n\nexport const fetchBookeableCars = (\n {\n dateFrom,\n hourFrom,\n pickUpId,\n pickUpEndpoint,\n dateTo,\n hourTo,\n dropOffId,\n dropOffEndpoint,\n onlyFullAvailability,\n promotions,\n driverAge,\n commercialAgreementCode,\n },\n language = '',\n ilimitedKm,\n showFinalPrice = false,\n globalId,\n listCurrencies,\n setWebCurrencyAction,\n isNewApi = false,\n\n) => async dispatch => {\n try {\n const [hoursFrom, minutesFrom] = hourFrom.split(':');\n const [hoursTo, minutesTo] = hourTo.split(':');\n const from = dateFrom._isAMomentObject\n ? `${dateFrom} ${hourFrom}`\n : moment(dateFrom, 'DD-MM-YYYY')\n .set({ hour: hoursFrom, minutes: minutesFrom })\n .format('YYYY/MM/DD HH:mm');\n const to = dateTo._isAMomentObject\n ? `${dateTo} ${hourTo}`\n : moment(dateTo, 'DD-MM-YYYY')\n .set({ hour: hoursTo, minutes: minutesTo })\n .format('YYYY/MM/DD HH:mm');\n\n dispatch({\n type: SEARCH_CARS_SET_CARS,\n payload: { cars: [], loading: true, error: null },\n });\n const { data } = await fetchCars(\n from,\n to,\n pickUpId,\n pickUpEndpoint,\n dropOffId || pickUpId,\n dropOffEndpoint || pickUpEndpoint,\n language,\n ilimitedKm,\n showFinalPrice,\n onlyFullAvailability,\n promotions,\n globalId,\n driverAge,\n commercialAgreementCode\n );\n\n if (isNewApi && data.length > 0 && listCurrencies && setWebCurrencyAction) {\n var cur = listCurrencies.find(x=>x.isoCode === data[0].currency);\n if (cur != null) {\n await setWebCurrencyAction(cur);\n }\n }\n\n return dispatch({\n type: SEARCH_CARS_SET_CARS,\n payload: { cars: data, loading: false, error: null },\n });\n } catch (err) {\n return dispatch({\n type: SEARCH_CARS_SET_CARS,\n payload: {\n cars: [],\n loading: false,\n error: err.response && err.response.data ? err.response.data : 'searchError',\n },\n });\n }\n};\n\nexport const setCheckout = checkout => ({\n type: SEARCH_CARS_SET_CHECKOUT,\n payload: checkout,\n});\n\nexport const fetchPrices = (\n language = '',\n additionals,\n params,\n booking,\n refreshStore = false,\n onlinePayment,\n globalId,\n) => async dispatch => {\n try {\n const {\n dateFrom,\n hourFrom,\n dateTo,\n hourTo,\n pickUpId,\n pickUpEndpoint,\n dropOffId,\n ilimitedKm,\n driverAge,\n commercialAgreementCode,\n } = params;\n\n if (refreshStore) {\n dispatch({\n type: SEARCH_CARS_SET_CHECKOUT,\n payload: {\n booking: null,\n isLoading: true,\n onlinePayment: onlinePayment,\n },\n });\n }\n\n let { data } = await fetchPrice(\n language,\n additionals,\n `${moment(dateFrom, 'DD-MM-YYYY').format('YYYY/MM/DD')} ${hourFrom}`,\n `${moment(dateTo, 'DD-MM-YYYY').format('YYYY/MM/DD')} ${hourTo}`,\n pickUpId,\n pickUpEndpoint,\n dropOffId,\n booking.car.model.id,\n ilimitedKm,\n booking.promotion,\n globalId,\n driverAge,\n commercialAgreementCode,\n );\n\n // booking came marked as onlyQuote, we want to keep this flag after a fetchPrice\n if (booking.onlyQuote) data['onlyQuote'] = true;\n\n return dispatch({\n type: SEARCH_CARS_SET_CHECKOUT,\n payload: {\n booking: data,\n isLoading: false,\n onlinePayment: onlinePayment,\n },\n });\n } catch (error) {\n return dispatch({\n type: SEARCH_CARS_SET_CHECKOUT,\n payload: {\n booking: null,\n isLoading: false,\n isError: true,\n errorMessage: error.response.data.message,\n onlinePayment: onlinePayment,\n },\n });\n }\n};\n","import userFetcher from 'utils/userFetcher';\n\nconst api = new userFetcher();\nconst apiUrl = process.env.REACT_APP_BACKEND_API;\n\nexport const validateInvitation = async token => {\n return await api.post(`${apiUrl}/UserCompany/validate-invitation?token=${token}`);\n};\n\nexport const registerCompany = async (globalId, password) => {\n return await api.post(`${apiUrl}/UserCompany/register-company`, {\n globalId,\n password,\n });\n};\n","export const getPriceWithExchangeRate = (price, currentCurrency, defaultCurrency, webCurrency) => {\n if (currentCurrency == null || defaultCurrency == null || webCurrency == null) return price;\n\n //selected currency (currentCurrency) is the same as api user currency (webCurrency) -> not apply exchange rate.\n if (currentCurrency?.isoCode == webCurrency?.isoCode) return price;\n //selected currency, is default currency -> apply web currency exchange rate.\n else if (currentCurrency?.isoCode == defaultCurrency?.isoCode)\n return price * (1 / webCurrency?.exchangeRate);\n //selected currency is different from default and web currency -> convert first to default, and then apply current exchange rate.\n else return price * (1 / webCurrency?.exchangeRate) * currentCurrency?.exchangeRate;\n};\n\nexport const applyCurrencyExchangeRate = (currentCurrency, webCurrency) => {\n const applyCurrencyExchange =\n currentCurrency != null &&\n webCurrency != null &&\n currentCurrency?.isoCode !== webCurrency?.isoCode;\n return applyCurrencyExchange;\n};\n","import moment from 'moment';\n\nexport const transformCountriesToSelectOptions = countries => {\n if (!countries) return [];\n\n return countries.map(country => {\n return { value: country.name, text: country.name };\n });\n};\n\nexport const isValidEmail = email => {\n const regExp = /^(([^<>()[\\]\\\\.,;:\\s@\"]+(\\.[^<>()[\\]\\\\.,;:\\s@\"]+)*)|(\".+\"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$/;\n return String(email)\n .toLowerCase()\n .match(regExp);\n};\n\nexport const getDocumentTypeName = (listDocumentTypes, id) => {\n const type = (listDocumentTypes || []).find(d => d.id === parseFloat(id) || d.value === id);\n if (type) return (type.name || type.value).toUpperCase();\n return null;\n};\n\nexport const getDocumentMask = (id, type, isFocused, listDocumentTypes) => {\n if (!id || getDocumentTypeName(listDocumentTypes, type) !== 'RUT') {\n return '******************************';\n }\n\n if (isFocused) return '9999999**';\n\n if (id.length > 8) return '99.999.999-*';\n\n return '9.999.999-*';\n};\n\nexport const invertValueSign = value => {\n if (value) {\n if (value > 0) return `-${value}`;\n return Math.abs(value);\n }\n return 0;\n};\n\nexport const useQuery = location => {\n return new URLSearchParams(location.search);\n};\n\nexport const isCompanyUser = profile => {\n if (!profile) return false;\n\n return profile.isCompany || profile.isAgency || profile.isProvider || profile.isHotel;\n};\n\nexport const isAgencyUser = profile => {\n if (!profile) return false;\n\n return profile.isAgency;\n};\n\nexport const convertToBase64 = file => {\n return new Promise((resolve, reject) => {\n const fileReader = new FileReader();\n fileReader.readAsDataURL(file);\n fileReader.onload = () => {\n resolve(fileReader.result);\n };\n fileReader.onerror = error => {\n reject(error);\n };\n });\n};\n\nconst getCommissionAmount = (price, paymentConfiguration) => {\n // commissionPercentage is a round number for instance 30 = 30%\n return paymentConfiguration?.commissionPercentage\n ? (paymentConfiguration.commissionPercentage / 100) * price\n : 0;\n};\n\nexport const getPriceWithCommission = (price, paymentConfiguration) => {\n const commissionAmount = getCommissionAmount(price, paymentConfiguration);\n\n return price + commissionAmount;\n};\n\nexport const getPriceWithoutVat = priceItems => {\n const totalWithoutVat = priceItems.reduce((acc, item) => {\n if (item.type !== 15) {\n return acc + item.price;\n }\n return acc;\n }, 0);\n\n return totalWithoutVat;\n};\n\nexport const dateFormatEdition = (stringDate, dateFormat) => {\n const day = moment(stringDate, 'DD/MM/YYYY');\n const formattedDate = day.format(dateFormat);\n return formattedDate;\n};\n\nexport const handleGetTotalToPay = (balance, paymentConfiguration, qsamount) => {\n const amount = Math.abs(balance);\n const price = getPriceWithCommission(amount, paymentConfiguration);\n\n if (qsamount && Math.abs(price) >= Math.abs(qsamount)) {\n return Math.abs(qsamount);\n } else {\n if (paymentConfiguration?.onlyPayCommission && paymentConfiguration?.commissionPercentage) {\n return Math.abs(getCommissionAmount(amount, paymentConfiguration));\n }\n if (paymentConfiguration?.percentageToPay) {\n return Math.abs((price / 100) * paymentConfiguration.percentageToPay);\n } else {\n return Math.abs(price);\n }\n }\n};\n","export default class Storage {\n /*\n * store an element on the local/session storage\n * @param {string} index\n * @param {string} data\n * @param {bool} isLocal\n * @return {void}\n * */\n static setElement(index, data, isLocal = true) {\n if (isLocal) {\n window.localStorage.setItem(index, data);\n } else {\n window.sessionStorage.setItem(index, data);\n }\n }\n\n /*\n * get an element on the local/session storage\n * @param {string} index\n * @param {bool} isLocal\n * @return {string}\n * */\n static getElement(index, isLocal = true) {\n if (isLocal) {\n return window.localStorage.getItem(index);\n } else {\n return window.sessionStorage.getItem(index);\n }\n }\n\n /*\n * remove an element on the local/session storage\n * @param {string} index\n * @param {bool} useSession\n * @return {Promise\n \n {partialPayCustomMessage ? tt('__PaymentOptions.PartialPayMessage', t) : t('PartialPay')}\n
\n );\n } else {\n return null;\n }\n}\nexport default withTranslation()(withRouter(withSettingsContext(PartialPayWarning)));\n","import userFetcher from 'utils/userFetcher';\n\nconst api = new userFetcher();\nconst apiUrl = process.env.REACT_APP_BACKEND_API;\n\nexport const logIn = async (email, password, remember) => {\n return await api.post(`${apiUrl}/User/authenticate`, {\n email,\n password,\n remember,\n });\n};\n\nexport const logOut = async () => {\n return await api.get(`${apiUrl}/User/logout`);\n};\n\nexport const register = async (name, lastname, email, password) => {\n return await api.post(`${apiUrl}/User/register`, {\n name,\n lastname,\n email,\n password,\n });\n};\n\nexport const getMicrosoftAuthorizationUrl = async () => {\n return api.get(`${apiUrl}/User/microsoft/get-authorization-url`);\n};\n\nexport const loginWithMicrosoft = async (code, state) => {\n return await api.post(`${apiUrl}/User/microsoft/login`, { code, state });\n};\n\nexport const getUserProfile = async () => {\n return await api.get(`${apiUrl}/User/profile`);\n};\n\nexport const getUserBookings = async (offset = 0, limit = 6) => {\n return await api.get(`${apiUrl}/User/bookings?offset=${offset}&limit=${limit}`);\n};\n\nexport const getUserInfractions = async (offset = 0, limit = 30) => {\n return await api.get(`${apiUrl}/User/infractions?offset=${offset}&limit=${limit}`);\n};\n\nexport const getUserFiles = async (offset = 0, limit = 30) => {\n return await api.get(`${apiUrl}/User/profile/attachments?offset=${offset}&limit=${limit}`);\n};\n\nexport const attachUserFile = async file => {\n return await api.post(`${apiUrl}/User/profile/attachments`, file);\n};\n\nexport const updateUserProfile = async profile => {\n return await api.post(`${apiUrl}/User/profile`, { ...profile });\n};\n\nexport const userCancelReservation = async reservation =>\n api.post(`${apiUrl}/User/cancel`, reservation);\n\nexport const forgotPassword = async email => {\n return await api.post(`${apiUrl}/User/forgot-password?email=${email}`);\n};\n\nexport const forgotPasswordValidation = async token => {\n return await api.post(`${apiUrl}/User/forgot-password-validation?token=${token}`);\n};\n\nexport const resetPassword = async (email, password, token) => {\n return await api.post(`${apiUrl}/User/reset-password`, {\n email,\n password,\n token,\n });\n};\n\nexport const validateCustomerGuidToken = async token => {\n return await api.post(`${apiUrl}/User/validate-customer-guid-token?token=${token}`);\n};\n","import { useState, useEffect } from 'react';\n\nexport default function useWindowDimensions() {\n const hasWindow = typeof window !== 'undefined';\n\n function getWindowDimensions() {\n const width = hasWindow ? window.innerWidth : null;\n const height = hasWindow ? window.innerHeight : null;\n return {\n width,\n height,\n };\n }\n\n const [windowDimensions, setWindowDimensions] = useState(getWindowDimensions());\n\n useEffect(() => {\n if (hasWindow) {\n function handleResize() {\n if (windowDimensions && windowDimensions.width !== window.innerWidth) {\n setWindowDimensions(getWindowDimensions());\n }\n }\n\n window.addEventListener('resize', handleResize);\n return () => window.removeEventListener('resize', handleResize);\n }\n }, [hasWindow]);\n\n return windowDimensions;\n}\n","import {\n BOOKING_SET_BOOK,\n BOOKING_SET_ADDITIONALS,\n SET_BOOKING_PAY_INSTALLMENT,\n BOOKING_SET_CONFIGURATION,\n BOOKING_GET_ATTACHMENTS,\n BOOKING_ADD_ATTACHMENTS,\n} from 'utils/types';\nimport {\n createBooking,\n getBooking,\n getBookingAdditionals,\n getBookingWithPromotion,\n getBookingsConfiguration,\n getBookingAttachments,\n attachBookingFiles,\n} from 'services/api';\n\nexport const book = (\n booking,\n userInfo,\n bookingParams,\n isQuotation,\n currentLanguage,\n) => async dispatch => {\n try {\n const {\n car: {\n model: { id: ModelId },\n },\n ilimitedKm: IlimitedKm,\n additionals,\n promotion,\n } = booking;\n\n let parsedBooking = {\n Customer: {\n FirstName: userInfo.firstName,\n LastName: userInfo.lastName,\n FiscalConditionId:\n userInfo.fiscalConditionId != null ? parseFloat(userInfo.fiscalConditionId) : null,\n DocumentId: userInfo.id,\n DocumentTypeId: userInfo.typeId,\n EmailAddress: userInfo.email,\n Address: userInfo.address,\n AddressNumber: userInfo.addressNumber,\n AddressDepartment: userInfo.addressDepartment,\n CellPhone: userInfo.phone,\n ZipCode: userInfo.zipCode,\n Country: userInfo.country,\n City: userInfo.city || userInfo.cityInput,\n Region: userInfo.region,\n State: userInfo.state || userInfo.stateInput,\n IsCompany: userInfo.isCompany,\n Age: userInfo.driverAge,\n DriverLicenceNumber: userInfo.driverLicenseNumber,\n DriverLicenceCountry: userInfo.driverLicenseCountry,\n DriverLicenseExpiration: userInfo.driverLicenseExpiration,\n },\n CustomDeliveryCity: userInfo.customDeliveryCity,\n CustomDeliveryAddress: userInfo.customDeliveryAddress,\n CustomReturnCity: userInfo.customReturnCity,\n CustomReturnAddress: userInfo.customReturnAddress,\n IsCustomDeliveryAddress: userInfo.isCustomDeliveryAddress,\n IsCustomReturnAddress: userInfo.isCustomReturnAddress,\n isCustomAddress: userInfo.isCustomAddress,\n From: booking.fromDate,\n To: booking.toDate,\n IsQuotation: isQuotation,\n PickupEndpoint: bookingParams.pickUpEndpoint,\n PickupId: bookingParams.pickUpId,\n ReturnEndPoint: bookingParams.dropOffEndpoint,\n ReturnId: bookingParams.dropOffId || bookingParams.pickUpId,\n ModelId,\n Additionals: additionals.map(a => ({\n Quantity: a.quantity,\n AdditionalId: a.additional.id,\n })),\n IlimitedKm,\n fullResponse: true,\n promotion: promotion,\n promotionCode: bookingParams.promotionCode || null,\n onlinePayment: bookingParams.onlinePayment,\n isOnRequest: booking.onlyQuote || false,\n DeliveryTransportationId: userInfo.flightNumber,\n currentLanguage: currentLanguage || '',\n purchaseOrder: userInfo.purchaseOrder,\n extra: userInfo.notes,\n files: userInfo.companyFiles\n ? userInfo.companyFiles.map(a => ({\n name: a.name,\n content: a.file,\n type: a.type,\n }))\n : null,\n AgencyGuid: userInfo.profileIsCompany\n ? userInfo.profileGlobalId\n : bookingParams.agencyGuid ?? null,\n CommercialAgreementCode:\n userInfo.profileIsCompany || bookingParams.agencyGuid\n ? bookingParams.commercialAgreementCode\n : null,\n MaxAllowedDistance: booking.maxAllowedDistance,\n MaxAllowedDistanceByDay: booking.maxAllowedDistanceByDay,\n };\n\n if (userInfo.globalId) {\n parsedBooking = {\n ...parsedBooking,\n Customer: {\n ...parsedBooking.Customer,\n GlobalId: userInfo.globalId,\n },\n };\n }\n\n if (userInfo.isCompany) {\n parsedBooking = {\n ...parsedBooking,\n Driver: {\n FirstName: userInfo.driverFirstName,\n LastName: userInfo.driverLastName,\n DocumentId: userInfo.driverId,\n DocumentTypeId: userInfo.driverTypeId,\n EmailAddress: userInfo.driverEmail,\n Address: userInfo.driverAddress,\n AddressNumber: userInfo.driverAddressNumber,\n AddressDepartment: userInfo.driverAddressDepartment,\n CellPhone: userInfo.driverPhone,\n ZipCode: userInfo.driverZipCode,\n Country: userInfo.driverCountry,\n City: userInfo.driverCity,\n Region: userInfo.driverRegion,\n State: userInfo.driverState,\n Age: userInfo.driverAge,\n },\n };\n }\n\n let data = await createBooking(parsedBooking);\n return Promise.resolve(\n dispatch({\n type: BOOKING_SET_BOOK,\n payload: data,\n }),\n );\n } catch (error) {\n return Promise.reject(error);\n }\n};\n\nexport const SetBook = booking => async dispatch => {\n try {\n return Promise.resolve(\n dispatch({\n type: BOOKING_SET_BOOK,\n payload: booking,\n }),\n );\n } catch (error) {\n return Promise.reject(error);\n }\n};\n\nexport const GetBook = (bookingId, promotionId = null) => async dispatch => {\n try {\n const { data } = promotionId\n ? await getBookingWithPromotion(null, bookingId, promotionId)\n : await getBooking(null, bookingId);\n\n return Promise.resolve(\n dispatch({\n type: BOOKING_SET_BOOK,\n payload: data,\n }),\n );\n } catch (error) {\n return Promise.reject(error);\n }\n};\n\nexport const fetchBookingAdditionals = (params, booking, language, globalId) => async dispatch => {\n try {\n const { data } = await getBookingAdditionals(params, booking, language, globalId);\n\n return Promise.resolve(\n dispatch({\n type: BOOKING_SET_ADDITIONALS,\n payload: data,\n }),\n );\n } catch (error) {\n return Promise.reject(error);\n }\n};\n\nexport const setBookingInstallment = installment => async dispatch => {\n return Promise.resolve(\n dispatch({\n type: SET_BOOKING_PAY_INSTALLMENT,\n payload: installment,\n }),\n );\n};\n\nexport const fetchBookingsConfiguration = () => async dispatch => {\n try {\n const { data } = await getBookingsConfiguration();\n return Promise.resolve(\n dispatch({\n type: BOOKING_SET_CONFIGURATION,\n payload: data,\n }),\n );\n } catch (error) {\n return { error };\n }\n};\n\nexport const getAttachments = (bookingId, category) => async dispatch => {\n try {\n const { data } = await getBookingAttachments(bookingId, category);\n\n return Promise.resolve(\n dispatch({\n type: BOOKING_GET_ATTACHMENTS,\n payload: data,\n }),\n );\n } catch (error) {\n return Promise.reject(error);\n }\n};\n\nexport const attachFiles = (bookingId, bookingFiles) => async dispatch => {\n try {\n let files = bookingFiles\n ? bookingFiles.map(a => ({\n name: a.name,\n content: a.file,\n type: a.type,\n }))\n : null;\n const { data } = await attachBookingFiles(bookingId, files);\n\n return Promise.resolve(\n dispatch({\n type: BOOKING_ADD_ATTACHMENTS,\n payload: data,\n }),\n );\n } catch (error) {\n return Promise.reject(error);\n }\n};\n","export const tt = (key, t, forceTranslate, paramsObj = null) => {\n if (key && typeof key === 'string' && key.indexOf('__') === 0) return t(key, paramsObj);\n\n if (forceTranslate) return t(key, paramsObj);\n\n return key;\n};\n\nexport const translate = (key, t, forceTranslate) => {\n if (key && typeof key === 'string' && key.indexOf('__') === 0) return t(key);\n\n if (forceTranslate) return t(key);\n\n return key;\n};\n\nexport const getLanguagePath = (langConfig, lang) => {\n if (langConfig) {\n return (langConfig[lang] && langConfig[lang].url) || lang;\n }\n return lang;\n};\n\nexport const tlink = (key, t, i18n, lang = null, langConfig = null, params = null) => {\n if (lang) {\n t = i18n.getFixedT(lang);\n }\n\n lang = lang || i18n.language;\n\n let base = lang !== i18n.options.fallbackLng[0] ? `/${getLanguagePath(langConfig, lang)}` : '';\n\n let route = tt(key, t);\n\n if (params) {\n let stringParams = '';\n Object.entries(params).forEach(([key, value]) => {\n stringParams += `${key}=${value}&`;\n });\n route += `?${stringParams}`;\n }\n\n if (route === '/' && base !== '') route = '';\n\n return base + route;\n};\n","export const getAllCategoryIdsInCollection = categoryGroupCollection => {\n return categoryGroupCollection.flatMap(cg => cg.categories.flatMap(c => c.ids));\n};\n\nexport const getSippByCategory = (categoryGroupCollection, category) => {\n let categoryGroupName = '';\n\n categoryGroupCollection.every(cg => {\n const includedCategories = cg.categories.flatMap(c => c.ids);\n if (includedCategories.includes(category.id)) {\n categoryGroupName = cg.name;\n return false;\n }\n return true;\n });\n\n return categoryGroupName;\n};\n","import style from 'styled-components';\n\nexport const StyledApp = style.div`\n display: flex;\n flex-direction: column;\n transition: all 0.3s ease;\n position: relative;\n padding-bottom: 32px;\n min-height: 100vh;\n \n .old-version-message{\n background-color: #fff3cd;\n color: #a27a00;\n text-align: center;\n padding:4px;\n margin:0 -15px;\n }\n\n input, select, textarea {\n border-radius: 0 !important;\n }\n\n textarea::-webkit-input-placeholder, input::-webkit-input-placeholder, select{ \n font-size: 12px;\n color: #6f6f6f;\n }\n\n .pl-0, .px-0 {\n padding-left: 0 !important;\n }\n \n .row-p {\n padding-right: 2% !important;\n padding-left: 2% !important;\n\n @media (min-width: ${props => props.theme.screens.xxxl}) {\n padding-left: 6% !important; padding-right:6% !important; \n }\n }\n\n header.row-p {\n @media (max-width: ${props => props.theme.screens.md}) {\n padding-left: 0 !important; padding-right:0 !important; \n }\n }\n\n .recaptcha{\n margin-bottom: 10px;\n }\n\n .contact-form-centered{\n .recaptcha div, button{\n margin-left: auto;\n margin-right: auto;\n }\n }\n \n a{\n transition: all .2s;\n text-decoration: none;\n color: ${props => props.theme.font.colors.third};\n }\n\n a:hover{\n text-decoration: none;\n color: ${props => props.theme.font.colors.hover};\n }\n \n ul.contact-list li a {\n color: ${props => props.theme.font.colors.primary};\n line-height: 2em;\n font-size: 14px;\n\n &:hover{\n color: ${props => props.theme.colors.secondary};\n text-decoration: none;\n }\n }\n\n ul.contact-list li a i{\n margin-right:10px;\n color: ${props => props.theme.colors.secondary};\n }\n\n .parallax {\n background-attachment: fixed;\n background-position: center;\n background-repeat: no-repeat;\n background-size: cover;\n }\n\n .top-header{\n padding: 10px 0;\n }\n\n @media (max-width: ${props => props.theme.screens.md}) {\n margin-left:0px;\n \n &.mobile-navbar-show{\n margin-left:256px;\n }\n }\n .CalendarMonth_caption{\n text-transform: capitalize;\n }\n`;\n\nexport const StyledError = style.div`\n\n margin-left: auto;\n margin-right: auto;\n text-align: center;\n margin-top: 10%;\n padding: 0px 20%;\n img{\n width:400px;\n margin-bottom:15px;\n }\n\n p{\n font-size:2em;\n color: grey;\n }\n`;\n","import style from 'styled-components';\n\nexport const StyledModernApp = style.div`\n display: flex;\n flex-direction: column;\n transition: all 0.3s ease;\n position: relative;\n padding-bottom: 32px;\n min-height: 100vh;\n\n .old-version-message{\n background-color: #fff3cd;\n color: #a27a00;\n text-align: center;\n padding:4px;\n margin:0 -15px;\n }\n\n input, select, textarea {\n border-radius: 0 !important;\n }\n\n textarea::-webkit-input-placeholder, input::-webkit-input-placeholder, select{\n font-size: 12px;\n color: #6f6f6f;\n }\n\n .pl-0, .px-0 {\n padding-left: 0 !important;\n }\n\n .row-p {\n padding-right: 2% !important;\n padding-left: 2% !important;\n\n @media (min-width: ${props => props.theme.screens.xxxl}) {\n padding-left: 6% !important; padding-right:6% !important;\n }\n }\n\n header.row-p {\n @media (max-width: ${props => props.theme.screens.md}) {\n padding-left: 0 !important; padding-right:0 !important;\n }\n }\n\n .recaptcha{\n margin-bottom: 10px;\n }\n\n .contact-form-centered{\n .recaptcha div, button{\n margin-left: auto;\n margin-right: auto;\n }\n }\n\n a{\n transition: all .2s;\n text-decoration: none;\n color: ${props => props.theme.font.colors.third};\n }\n\n a:hover{\n text-decoration: none;\n color: ${props => props.theme.font.colors.hover};\n }\n\n ul.contact-list li a {\n color: ${props => props.theme.font.colors.primary};\n line-height: 2em;\n font-size: 14px;\n\n &:hover{\n color: ${props => props.theme.colors.secondary};\n text-decoration: none;\n }\n }\n\n ul.contact-list li a i{\n margin-right:10px;\n color: ${props => props.theme.colors.secondary};\n }\n\n .parallax {\n background-attachment: fixed;\n background-position: center;\n background-repeat: no-repeat;\n background-size: cover;\n }\n\n .top-header{\n padding: 10px 0;\n }\n\n @media (max-width: ${props => props.theme.screens.md}) {\n margin-left:0px;\n\n &.mobile-navbar-show{\n margin-left:256px;\n }\n }\n .CalendarMonth_caption{\n text-transform: capitalize;\n }\n`;\n\nexport const StyledError = style.div`\n\n margin-left: auto;\n margin-right: auto;\n text-align: center;\n margin-top: 10%;\n padding: 0px 20%;\n img{\n width:400px;\n margin-bottom:15px;\n }\n\n p{\n font-size:2em;\n color: grey;\n }\n`;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { connect } from 'react-redux';\nimport { Route, Switch, withRouter } from 'react-router-dom';\nimport { CancelModal, RentlyFooter, AccountPrivateRoute } from 'components/';\nimport {\n fetchSettings,\n fetchLanguages,\n fetchCurrencies,\n handleLogIn,\n fetchBookingsConfiguration,\n fetchGeneralSettings,\n setWebCurrencyAction,\n changeCurrencyAction,\n} from 'actions';\nimport { ThemeProvider } from 'styled-components';\nimport BaseTheme from './styled/theme';\nimport queryString from 'query-string';\nimport { history } from '/store';\nimport TagManager from 'react-gtm-module';\n\n// Pages\nimport NotFound from 'pages/NotFound';\n\nimport * as Components from 'components';\nimport * as Sections from 'sections';\nimport * as PageComponents from './pages';\nimport { StyledApp, StyledError } from './App.container.styled';\nimport { StyledModernApp } from './App.container.styled.modern';\nimport { withTranslation, Trans } from 'react-i18next';\nimport { Helmet } from 'react-helmet';\nimport AuthService from 'auth/AuthService';\nimport { getLanguagePath } from 'utils/translationHelper';\nimport { SettingsContext } from './SettingsContext';\nimport { MODERN_THEME } from 'styled/constants';\nimport Storage from 'utils/storage';\n\nconst LoginSection = React.lazy(() => import('./sections/myAccount/login/LoginSection.js'));\nconst RegisterSection = React.lazy(() =>\n import('./sections/myAccount/register/RegisterSection.js'),\n);\nconst CompanyValidateInvitationSection = React.lazy(() =>\n import('./sections/myAccount/loginCompany/CompanyValidateInvitationSection.js'),\n);\nconst ForgotPasswordSection = React.lazy(() =>\n import('./sections/myAccount/forgotPassword/ForgotPasswordSection.js'),\n);\nconst ForgotPasswordValidationSection = React.lazy(() =>\n import('./sections/myAccount/forgotPassword/ForgotPasswordValidationSection.js'),\n);\nconst ProfileSection = React.lazy(() => import('./sections/myAccount/profile/ProfileSection.js'));\n\nconst BookingsSection = React.lazy(() =>\n import('./sections/myAccount/bookings/BookingsSection.js'),\n);\n\nconst BookingDetails = React.lazy(() =>\n import('./sections/myAccount/bookingDetails/BookingDetails.js'),\n);\n\nconst InfractionsSection = React.lazy(() =>\n import('./sections/myAccount/infractions/InfractionsSection.js'),\n);\n\nconst BlogList = React.lazy(() => import('./pages/Blog/BlogList/BlogList.js'));\nconst BlogPage = React.lazy(() => import('./pages/Blog/BlogPost/BlogPost.js'));\n\nconst AxleVerificationSection = React.lazy(() =>\n import('./sections/axleVerification/AxleVerificationSection.js'),\n);\n\nclass AppContainer extends Components.TranslatedComponent {\n static propTypes = {\n fetchSettings: PropTypes.func.isRequired,\n };\n\n constructor() {\n super();\n this.createLayoutRoute = this.createLayoutRoute.bind(this);\n this.createLayoutPageComponent = this.createLayoutPageComponent.bind(this);\n }\n\n state = {\n error: null,\n loading: true,\n mobileNavBarShow: false,\n pathComponents: {},\n };\n pathComponents = {};\n\n async componentDidMount() {\n this.removeLoading();\n await this.fetchApiData();\n //Inicializo Tag Manager\n const {\n settings: { configurations },\n } = this.props;\n if (configurations?.googleTagManager?.id) {\n const tagManagerArgs = {\n gtmId: configurations.googleTagManager.id,\n };\n TagManager.initialize(tagManagerArgs);\n }\n }\n\n removeLoading() {\n var loading = document.getElementById('loading');\n if (loading) {\n loading.parentNode.removeChild(loading);\n }\n }\n\n reactDatesCss(theme) {\n return `\n .CalendarDay__selected_span {\n background-color: ${theme.colors.buttonPrimaryBgHover};\n border-color: ${theme.colors.buttonPrimaryBg};\n }\n .CalendarDay__selected_start, .CalendarDay__selected_end {\n background-color: ${theme.colors.buttonPrimaryBg};\n border-color: ${theme.colors.buttonPrimaryBg};\n }\n `;\n }\n\n header(theme) {\n const {\n settings: { configurations },\n } = this.props;\n\n return (\n ![\"\"](\"images/carani.gif\")
\n \n {t('errorText')} support@rentlysoft.com.\n
\n\n \n Atencion! Estas navegando una version del sitio que no es la publicada.{' '}\n {{ version }} - Volver al sitio publicado\n \n
\n );\n }\n\n return null;\n }\n\n getGoogleLocalBusiness() {\n const {\n settings: {\n configurations: { googleLocalBusiness },\n },\n settings: { configurations },\n } = this.props;\n\n var tag = {\n '@context': 'http://schema.org',\n '@type': 'AutoRental',\n name: configurations.title,\n url: window.location.origin,\n };\n\n return { ...tag, ...googleLocalBusiness };\n }\n\n render() {\n if (this.state.loading) return null;\n if (!this.state.loading && this.state.error) return this.errorPage(this.state.error);\n\n const theme = this.setTheme(BaseTheme);\n const {\n settings: {\n configurations: {\n facebookDomainVerification,\n blogSettings,\n googleSearchConsole,\n defaultLang,\n },\n myAccountConfiguration,\n },\n } = this.props;\n\n const StyledTemplatedApp = theme.template === MODERN_THEME ? StyledModernApp : StyledApp;\n\n const companyLogin =\n myAccountConfiguration != undefined && myAccountConfiguration.companyLoginEnable;\n\n const agencyLogin =\n myAccountConfiguration != undefined && myAccountConfiguration.agencyLoginEnable;\n\n return (\n