\n
\n \n );\n }\n\n return formContent;\n }\n}\n\nCustomFormApp.defaultProps = {\n mainTitle: 'Tenho interesse',\n mainSubtitle:\n 'Preencha o formulário abaixo para receber o contato de um de nossos especialistas:',\n successTitle: 'Solicitação realizada com sucesso!',\n successSubtitle:\n 'Em alguns instantes um de nossos consultores entrará em contato com você.',\n submitButtonText: 'ESTOU INTERESSADO',\n units: [],\n brand: '-',\n module: null,\n categories: [],\n customFormFields: [],\n switchableFields: {\n showEmailField: true,\n showPhoneField: true,\n showCpfField: false,\n showUnitField: false,\n showUploadField: false,\n showLocationField: false,\n showChooseContactMethod: true,\n showDataPermissions: true,\n showVariantSelect: false,\n showVariantImage: false,\n showVariantPrice: false,\n showPrice: false,\n },\n defaultVariant: '',\n dataPermissionsCustomText: null,\n linkPrivacyPolicy: null,\n product: null,\n channel: null,\n category: null,\n bait: null,\n unit: null,\n cloneId: null,\n renderAsModal: false,\n modalId: 'custom-form-modal',\n open: false,\n};\n\nCustomFormApp.propTypes = {\n formId: PropTypes.string.isRequired,\n mainTitle: PropTypes.string,\n mainSubtitle: PropTypes.string,\n successTitle: PropTypes.string,\n successSubtitle: PropTypes.string,\n submitButtonText: PropTypes.string,\n module: PropTypes.string,\n switchableFields: PropTypes.shape({\n showEmailField: PropTypes.bool,\n showPhoneField: PropTypes.bool,\n showCpfField: PropTypes.bool,\n showUnitField: PropTypes.bool,\n showUploadField: PropTypes.bool,\n showLocationField: PropTypes.bool,\n showChooseContactMethod: PropTypes.bool,\n showDataPermissions: PropTypes.bool,\n showVariantSelect: PropTypes.bool,\n showVariantImage: PropTypes.bool,\n showVariantPrice: PropTypes.bool,\n showPrice: PropTypes.bool,\n }),\n dataPermissionsCustomText: PropTypes.string,\n linkPrivacyPolicy: PropTypes.string,\n product: PropTypes.string,\n channel: PropTypes.string,\n category: PropTypes.string,\n brand: PropTypes.string,\n bait: PropTypes.string,\n units: PropTypes.arrayOf(\n PropTypes.shape({\n label: PropTypes.string,\n value: PropTypes.number,\n }),\n ),\n unit: PropTypes.string,\n cloneId: PropTypes.number,\n categories: PropTypes.arrayOf(PropTypes.string),\n customFormFields: PropTypes.arrayOf(\n PropTypes.shape({\n field_type: PropTypes.string,\n title: PropTypes.string,\n placeholder_text: PropTypes.string,\n mask_type: PropTypes.string,\n attribute_name: PropTypes.string,\n field_options: PropTypes.string,\n is_required: PropTypes.bool,\n ordination: PropTypes.number,\n }),\n ),\n renderAsModal: PropTypes.bool,\n modalId: PropTypes.string,\n open: PropTypes.bool,\n};\n\nexport default CustomFormApp;\n","import { Component } from 'preact';\nimport PropTypes from 'prop-types';\nimport validationFactory from '%/utils/validation';\nimport { registerField } from '%/utils/customForm';\nimport getUTM from '%/utils/utm';\nimport {\n FormWrapper,\n FormHeader,\n FormBody,\n FieldGroup,\n Input,\n Checkbox,\n Select,\n FormFooter,\n SubmitButton,\n ContactFieldGroup,\n InputFile,\n LocationGroupField,\n VersionElements,\n} from '../FormComponents';\nimport FormMessageOverlay from '../../FormMessageOverlay';\nimport CustomFields from './CustomFields';\n\nexport default class CustomForm extends Component {\n constructor(props) {\n super(props);\n\n this.handleSubmit = this.handleSubmit.bind(this);\n }\n\n componentDidMount() {\n this.validator = validationFactory(`#${this.props.formId}`);\n }\n\n async handleSubmit(e) {\n e.preventDefault();\n\n const invalidInputs = this.validateInputFields();\n const formIsValid = invalidInputs.length === 0;\n\n if (this.props.switchableFields.showLocationField)\n this.validateLocationFields();\n\n if (!formIsValid) {\n invalidInputs[0].focus();\n return;\n }\n\n this.props.onStartSubmit();\n\n let params;\n\n try {\n params = await this.getFormData();\n } catch (err) {\n console.error(err);\n this.props.onStopSubmit();\n this.props.onErrorSubmit(true);\n this.props.onShowOverlay(true);\n return;\n }\n\n // Se o form for válido, chamamos a prop para gerenciar a submissão do form.\n this.props.handleSubmit(e, params).then(() => {\n this.setState({ ...this.initialState });\n });\n }\n\n async getFormData() {\n const fieldsState = window.store.CustomFormFields.getState().formData;\n const fieldsData = Object.keys(fieldsState).reduce((acc, fieldName) => {\n acc[fieldName] = fieldsState[fieldName].value;\n return acc;\n }, {});\n\n if (this.uploadPromise) {\n const url = await this.uploadPromise;\n if (url) {\n fieldsData.attachment_url = url;\n } else {\n throw new Error('API não retornou a url do arquivo');\n }\n }\n\n const dataFromProps = {\n product: this.props.product,\n product_id: this.props.cloneId,\n bait: this.props.bait,\n category: this.props.category,\n brand: this.props.brand,\n utmz: getUTM(),\n };\n\n if (this.props.unit) {\n dataFromProps.unit = this.props.unit;\n } else if (this.props.units.length === 1) {\n dataFromProps.unit = this.props.units[0].value;\n } else {\n dataFromProps.unit = this.state.unit;\n }\n\n return { ...dataFromProps, ...fieldsData };\n }\n\n validateInputFields() {\n const inputs = document.querySelectorAll('.form__text-field-input');\n const invalidInputs = [];\n\n inputs.forEach(input => {\n if (input.classList.contains('is-invalid')) {\n invalidInputs.push(input);\n }\n });\n\n return invalidInputs;\n }\n\n validateLocationFields() {\n if (!this.state.city) {\n document\n .getElementsByName('city')[0]\n .parentElement.classList.add('is-invalid');\n if (!this.state.uf) {\n document\n .getElementsByName('uf')[0]\n .parentElement.classList.add('is-invalid');\n } else {\n document\n .getElementsByName('uf')[0]\n .parentElement.classList.remove('is-invalid');\n }\n }\n }\n\n render() {\n const {\n formId,\n onShowOverlay,\n errorSendingForm,\n isSubmittingForm,\n mainTitle,\n mainSubtitle,\n submitButtonText,\n switchableFields,\n linkPrivacyPolicy,\n showOverlay,\n } = this.props;\n\n return (\n \n
\n \n
\n \n \n
\n )}\n\n {switchableFields.showLocationField && \n {fieldOptions.map(option => (\n
\n \n {features.map((feature, index) => (\n \n {feature}\n \n ))}\n
\n );\n }\n}\n\nFeaturesDisplay.propTypes = {\n features: PropTypes.arrayOf(PropTypes.string).isRequired,\n};\n\nexport default FeaturesDisplay;\n","import { h } from 'preact';\nimport { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\n\nexport default class FieldGroup extends Component {\n render() {\n const { customClasses, children } = this.props;\n\n return (\n - {items}
\n this.refList[this.listTabs[index]] = node}\n >\n {category && category.length > 0 &&\n category.map((item) => {this.itemToText(item)} )}\n \n
\n\n {seeMoreEnabled &&\n this.refAnchors[this.listTabs[index]] = node}\n onClick={this.handleSeeMore}>\n {this.state.expandedTabs[this.listTabs[index]] ?\n 'Fechar' : seeMoreText ? : 'Ver mais +'}\n \n }\n \n ));\n\n if (seeMoreEnabled) {\n\n const { selectedTab } = this.state;\n\n (() => {\n setTimeout(() => {\n\n if (!this.refList[selectedTab]) return;\n\n const listHeight = this.refList[selectedTab].getBoundingClientRect().height;\n\n if (listHeight > heightLimit) {\n this.refPanel[selectedTab].classList.add('tabs__content--height-limited');\n }\n\n }, 50);\n })()\n }\n\n return {panels}
;\n }\n\n /**\n * Gerencia a exibição de conteúdo da tab e seu estado.\n * @param {Event} e\n * @param {string} selectedTab O label da tab selecionada\n */\n handleSelectTab(e, selectedTab) {\n e.preventDefault();\n this.setState({\n selectedTab,\n });\n }\n\n render() {\n const { detash, showImage, titleMultiline, showLink } = this.props;\n const { selectedImage, selectedTitle, selectedSubTitle, selectedSlug } = this.state;\n return (\n \n
\n );\n }\n}\n\nDetailTabs.Detash = Detash;\n\nDetailTabs.defaultProps = {\n showImage: false,\n showLink: false,\n titleMultiline: false,\n showLinkButtonName: 'Tenho interesse',\n seeMore: {\n enabled: false,\n heightLimit: 500,\n },\n};\n\nDetailTabs.propTypes = {\n detash: PropTypes.node,\n showImage: PropTypes.bool,\n showLink: PropTypes.bool,\n titleMultiline: PropTypes.bool,\n showLinkButtonName: PropTypes.string,\n seeMore: PropTypes.shape({\n enabled: PropTypes.bool,\n heightLimit: PropTypes.number\n }),\n};\n","import { h, Component } from 'preact';\nimport PropTypes from 'prop-types';\nimport CustomSelect from './CustomSelect';\nimport CustomCheck from './CustomCheck';\nimport FormMessageOverlay from './FormMessageOverlay';\nimport SubmitButton from './SubmitButton';\nimport VariantCollection, {\n variantObjectsToCustomSelectOptions,\n} from '%/utils/variantCollection';\nimport getUTM from '%/utils/utm';\nimport handleInputChange from '%/utils/handleInputChange';\nimport ProfileImageTypes from '%/utils/variantProfileImageTypes';\nimport validationFactory from '%/utils/validation';\nimport upperCaseAndRemoveAccent from '%/utils/upperCaseAndRemoveAccent';\nimport IMask from 'imask';\nimport { phoneMasks } from '%/utils/masks';\nimport { PERSON_TYPES } from '%/utils/personTypes';\nimport LazyLoad from 'react-lazyload';\nimport classNames from 'classnames';\nimport InputCpf from './InputCpf';\nimport InputCnpj from './InputCnpj';\nimport LocationFields from './Inputs/Location';\nimport ZFlow from './ZFlow';\n\n/**\n * @property {VariantCollection} variantsCollection\n */\nexport default class ConversionForm extends Component {\n constructor(props) {\n super(props);\n\n this.state = {\n selectedVariant: this.props.defaultVariant,\n name: null,\n email: null,\n phone: null,\n 'veiculo-na-troca': 'nao',\n phoning: false,\n mailing: false,\n whatsapping: false,\n contactOptions: '',\n dataPermissions: false,\n cpf: '',\n cnpj: '',\n customerType: PERSON_TYPES.INDIVIDUAL,\n model_car: '',\n versionValidStatus: true,\n uf: null,\n city: null,\n units: this.props.units,\n subsidiaries: this.props.subsidiaries,\n subsidiary: '',\n subsidiaryDisabled: false,\n };\n\n this.getFormData = this.getFormData.bind(this);\n this.getCurrentVariantItem = this.getCurrentVariantItem.bind(this);\n this.handleInputChange = handleInputChange.bind(this);\n this.handleSubmit = this.handleSubmit.bind(this);\n this.handleVariantChange = this.handleVariantChange.bind(this);\n this.handleContactOptionsChange =\n this.handleContactOptionsChange.bind(this);\n this.handleFandiButton = this.handleFandiButton.bind(this);\n this.handleStateChange = this.handleStateChange.bind(this);\n this.handleCityChange = this.handleCityChange.bind(this);\n\n this.watchStore();\n }\n\n watchStore() {\n window.store.vehicleVersionDetails.watch(({ activeVersion }) => {\n if (activeVersion && this.getCurrentVariantItem()) {\n activeVersion && this.setState({ selectedVariant: activeVersion.slug });\n }\n });\n }\n\n handleVariantChange(e) {\n this.handleInputChange(e);\n\n const currentVariantItem = this.getCurrentVariantItem();\n\n if (currentVariantItem) {\n if (this.props.shouldShowVariantSelect) {\n this.historyPushState();\n }\n this.props.handleVariantChange(currentVariantItem);\n }\n }\n\n handleStateChange(e) {\n const uf = e.target.value;\n this.setState({ uf, subsidiary: '', subsidiaries: [] });\n }\n\n handleCityChange(e) {\n const city = e.target.value;\n this.setState({ city, subsidiary: '' });\n\n if (this.props.filterUnitsByLocation && this.state.uf && this.state.city) {\n this.setState({ subsidiaryDisabled: true });\n\n let apiQuery = [\n { 'q[state_cont]': this.state.uf },\n { 'q[city_cont]': this.state.city },\n ];\n\n const categoryUpperCase = upperCaseAndRemoveAccent(\n this.props.modelCategory,\n );\n\n if (categoryUpperCase == 'ONIBUS') {\n apiQuery.push({ 'q[bus_eq]': true });\n } else {\n apiQuery.push({ 'q[truck_eq]': true });\n }\n\n window.autoServiceApi.getServedRegion(apiQuery).then(res => {\n let subsidiaries = res.entries.map(region => ({\n label: region.display_name,\n value: region.display_name,\n city: region.city,\n }));\n\n let subsidiariesUniq = this.uniqByKeepFirst(\n subsidiaries,\n sub => sub.label,\n );\n\n // TODO atualizar filtro do apicasso para remover nomes parciais, ex: SP cidade Arujá que retorna Guarujá.\n subsidiariesUniq = subsidiariesUniq.filter(\n s => s.city.length == this.state.city.length,\n );\n\n this.setState({\n subsidiaries: subsidiariesUniq,\n subsidiary: '',\n subsidiaryDisabled: false,\n });\n });\n }\n }\n\n uniqByKeepFirst(a, key) {\n let seen = new Set();\n return a.filter(item => {\n let k = key(item);\n return seen.has(k) ? false : seen.add(k);\n });\n }\n\n handleContactOptionsChange(e) {\n this.handleInputChange(e);\n this.state.contactOptions = this.contactOptionsValue() ? 'on' : '';\n }\n\n historyPushState() {\n if (window.history.pushState)\n window.history.pushState({}, null, this.getUrlVersion());\n }\n\n handleFandiButton(e) {\n e.preventDefault();\n\n window.dispatchEvent(\n new CustomEvent('OpenFandi', { detail: this.getFormData() }),\n );\n }\n\n /*\n * Verifica se não há opções de contato selecionadas\n */\n contactOptionsValue() {\n return !!(\n this.state.phoning ||\n this.state.mailing ||\n this.state.whatsapping\n );\n }\n\n /**\n * Retorna a url já com a versão selecionada para ser setada no history\n */\n getUrlVersion() {\n const href = window.location.pathname,\n slugVersion = this.getSlugVersion(),\n currentVersion = this.getCurrentVariantItem(),\n newSlugVersion = currentVersion.getVariantProperty('slug');\n\n const newPathname = href\n .replace(/\\/$/, '')\n .replace(slugVersion, '')\n .replace(/\\/$/, '');\n\n return `${window.location.origin}${newPathname}/${newSlugVersion}${window.location.search}`;\n }\n\n /**\n * Retorna o slug da versão a parti da url\n */\n getSlugVersion() {\n const matches = window.location.pathname.match(/(novo|ofertas).+$/);\n if (matches && matches.length > 0) {\n const pathItems = matches[0].split('/');\n if (pathItems.length > 2) {\n return pathItems[2].replace(/\\//g, '');\n } else if (pathItems.length == 2 && pathItems[0] == 'ofertas') {\n return pathItems[1].replace(/\\//g, '');\n }\n }\n return '';\n }\n\n /**\n * Retorna a posicação no array das variants(versões) a parti do slug da versão\n */\n getIndexBySlugVersion() {\n const slugVersion = this.getSlugVersion();\n const index = this.props.variants.reduce((acc, variant, index) => {\n if (\n variant.slug === slugVersion ||\n (typeof offer_slug !== 'undefined' && offer_slug == variant.slug)\n ) {\n acc = index;\n }\n return acc;\n }, 0);\n\n return index;\n }\n\n /**\n * Validação extra para o cpf\n */\n cpfValid() {\n return !this.props.showCpf || (this.props.showCpf && this.state.cpf);\n }\n\n versionValid() {\n return this.state.model_car;\n }\n\n validateLocationFields() {\n if (!this.state.city) {\n document\n .getElementsByName('city')[0]\n .parentElement.classList.add('is-invalid');\n if (!this.state.uf) {\n document\n .getElementsByName('uf')[0]\n .parentElement.classList.add('is-invalid');\n } else {\n document\n .getElementsByName('uf')[0]\n .parentElement.classList.remove('is-invalid');\n }\n }\n }\n\n validateSubsidiary() {\n const elSubsidiarySelector = document.querySelector(\n '.subsidiary-select .choices__inner',\n );\n elSubsidiarySelector.classList.toggle('is-invalid', !this.state.subsidiary);\n }\n\n handleSubmit(e) {\n e.preventDefault();\n this.setState({ versionValidStatus: true });\n\n if (this.props.filterUnitsByLocation && this.props.showLocationFields)\n this.validateSubsidiary();\n\n const invalidInputs = this.validator.validateAll(this.form);\n const formIsValid = invalidInputs.length === 0;\n if (this.props.versions && this.props.versions.length > 0) {\n if (!this.versionValid()) {\n this.setState({ versionValidStatus: false });\n return;\n }\n }\n\n if (this.props.showLocationFields) this.validateLocationFields();\n\n if (!formIsValid) {\n return;\n }\n if (\n !this.cpfValid() &&\n this.state.customerType === PERSON_TYPES.INDIVIDUAL\n ) {\n alert('O campo de CPF é obrigatório');\n return;\n }\n\n // Se o form for válido, chamamos a prop para gerenciar a submissão do form.\n this.props.handleSubmit(e, this.getFormData());\n }\n\n componentDidMount() {\n const phoneMask = IMask(this.phoneInput, {\n mask: [...phoneMasks],\n });\n phoneMask.on('accept', () => this.setState({ phone: phoneMask.value }));\n this.validator = validationFactory(`#${this.props.formId}`);\n }\n\n /**\n * Retorna o valor configurado pela prop `brand`.\n * Caso nenhum valor esteja informado para essa prop, retorna a marca da\n * variante atualmente selecionada.\n * Se nenhuma das condições acima forem cumpridas, retorna a marca do primeiro\n * item da coleção de variantes.\n *\n * @return {string}\n */\n getCurrentItemBrand() {\n let result = this.props.brand;\n\n if (result) {\n return result;\n }\n\n let currentVariantItem = this.getCurrentVariantItem();\n if (this.getCurrentVariantItem()) {\n return currentVariantItem.getVariantProperty('brand');\n }\n\n return (\n (this.variantsCollection &&\n this.variantsCollection._variants &&\n this.variantsCollection._variants.length > 0 &&\n this.variantsCollection._variants[0]) ||\n ''\n );\n }\n\n /**\n * Retorna os dados pertinentes para a conversão.\n * @return {*}\n */\n getFormData() {\n let state = {\n version: this.props.defaultVariant || this.state.selectedVariant,\n name: this.state.name,\n email: this.state.email,\n phone: this.state.phone,\n mailing: this.state.mailing,\n phoning: this.state.phoning,\n whatsapping: this.state.whatsapping,\n 'veiculo-na-troca': this.state['veiculo-na-troca'],\n model_car: this.state.model_car,\n customerType: this.state.customerType,\n };\n\n if (this.props.showCpf) {\n state.cpf = this.state.cpf;\n }\n\n if (this.props.showCustomerType) {\n state.customerType = this.state.customerType;\n\n if (this.state.customerType === PERSON_TYPES.COMPANY) {\n state.cnpj = this.state.cnpj;\n }\n }\n\n if (this.props.showLastName) {\n state.last_name = this.state.last_name;\n }\n\n if (this.props.shouldShowDataPermissions) {\n state.data_permissions = this.state.dataPermissions;\n }\n\n if (this.props.showLocationFields) {\n state.uf = this.state.uf;\n state.city = this.state.city;\n }\n\n if (this.state.subsidiary) {\n state.subsidiary = this.state.subsidiary;\n }\n\n let props = {\n product: this.props.product,\n bait: -5,\n channel: this.props.channel,\n category: this.props.category,\n brand: this.props.brand,\n utmz: getUTM(),\n };\n\n if (state['version']) {\n props['product'] += ` ${this.getCurrentVariantItem().getVariantProperty(\n 'name',\n )}`;\n }\n\n if (this.props.cloneId) {\n props['product_id'] = this.props.cloneId;\n }\n\n if (this.props.model_year) {\n props['model_year'] = this.props.model_year;\n }\n\n if (this.props.unit) {\n props['unit'] = this.props.unit;\n } else if (this.props.units.length === 1) {\n props['unit'] = this.props.units[0].value;\n } else {\n props['unit'] = this.state.unit;\n }\n\n this.props.customFields.map(field => (props[field.name] = field.value));\n\n return { ...state, ...props };\n }\n\n componentWillUpdate() {\n this.variantsCollection = new VariantCollection(this.props.variants);\n }\n\n /**\n * Se houver apenas uma variante, não precisamos exibir o select, apenas\n * manter a primeira opção selecionada. Essa função trata isso.\n * @return {boolean}\n */\n shouldDisplayCustomSelect() {\n return this.props.shouldShowVariantSelect && this.props.variants.length > 1;\n }\n\n /**\n * Converte a prop de variantes para o formato utilizado no custom select:\n * { value: \"foo\", name: \"bar\" }\n */\n variantOptionsToCustomSelect() {\n return variantObjectsToCustomSelectOptions(\n this.props.variants,\n 'slug',\n 'name',\n );\n }\n\n /**\n * Obtém a foto da variante atualmente selecionada.\n * @return {string}\n */\n getCurrentVariantPhotoUrl() {\n return (\n this.getCurrentVariantItem() &&\n this.getCurrentVariantItem().getProfileImageOfType(\n ProfileImageTypes.MODEL_MIDDLE,\n )\n );\n }\n\n /**\n * Obtém o item da variante atualmente escolhido\n * @return {VariantItem|null}\n */\n getCurrentVariantItem() {\n const selectedVariant =\n this.props.defaultVariant || this.state.selectedVariant;\n return (\n selectedVariant &&\n this.variantsCollection &&\n this.variantsCollection.findVariantBy('slug', selectedVariant)\n );\n }\n\n getCurrentVariantItemPrice() {\n const selectedVariantItem = this.getCurrentVariantItem();\n return selectedVariantItem && selectedVariantItem.price;\n }\n\n getCurrentVariantItemName() {\n const selectedVariantItem = this.getCurrentVariantItem();\n return selectedVariantItem && selectedVariantItem._variant.name;\n }\n\n /**\n * Indica se o preço deve ser exibido\n * @return {bool}\n */\n shouldShowPrice() {\n return this.props.shouldShowPrice && !!this.getCurrentVariantItemPrice();\n }\n\n /**\n * Indica se o nome da versão deve ser exibido\n * @return {bool}\n */\n shouldShowVariantName() {\n return (\n this.props.shouldShowVariantName && !!this.getCurrentVariantItemName()\n );\n }\n\n /**\n * Indica se a foto deve ser exibida\n * @return {bool}\n */\n shouldShowImage() {\n return this.props.shouldShowImage && !!this.getCurrentVariantPhotoUrl();\n }\n\n getSelectedVariant() {\n if (this.state.selectedVariant) {\n return this.state.selectedVariant;\n } else {\n if (this.variantOptionsToCustomSelect().length > 0) {\n const index = this.getIndexBySlugVersion();\n window.store.vehicleVersionDetails.setState({\n activeVersion: this.props.variants[index],\n });\n return this.variantOptionsToCustomSelect()[index].value;\n } else {\n return '';\n }\n }\n }\n\n render() {\n const {\n className,\n titleForm,\n showLastName,\n showFandiButton,\n showLabels,\n mainPhrase,\n showLocationFields,\n } = this.props;\n\n const customerTypeOptions = [\n { label: 'Pessoa física', value: PERSON_TYPES.INDIVIDUAL },\n { label: 'Pessoa jurídica', value: PERSON_TYPES.COMPANY },\n ];\n\n const isPessoaFisica =\n this.props.showCustomerType &&\n this.state.customerType === PERSON_TYPES.INDIVIDUAL;\n const isPessoaJuridica =\n this.props.showCustomerType &&\n this.state.customerType === PERSON_TYPES.COMPANY;\n const shouldShowCpfOnly =\n !this.props.showCustomerType && this.props.showCpf;\n\n return (\n \n {detash}\n {showImage && (\n
\n \n {!titleMultiline && {selectedTitle}}\n {titleMultiline && 
}\n {showLink && {this.props.showLinkButtonName}}\n
\n )}\n {selectedTitle}
}\n {titleMultiline &&{selectedSubTitle}
}\n {selectedImage &&\n {this.renderTabs()}\n {this.renderContentPanels()}\n
\n \n {titleForm && (\n
\n )}\n {this.shouldShowImage() && (\n {titleForm}
\n )}\n {mainPhrase &&{mainPhrase}
}\n\n \n \n
\n )}\n {this.shouldShowVariantName() && (\n \n {this.getCurrentVariantItemName()}\n
\n )}\n {this.shouldShowPrice() && (\n\n A partir de R$ {this.getCurrentVariantItemPrice()}\n
\n )}\n\n
\n \n {showLabels && }\n
\n\n {showLastName && (\n \n
\n )}\n\n \n {showLabels && }\n
\n \n {showLabels && }\n (this.phoneInput = phoneInput)}\n className=\"form-control\"\n name=\"phone\"\n required={\n this.props.contactsWithDynamicRequired\n ? this.state.phoning || this.state.whatsapping\n : true\n }\n type=\"phone\"\n data-bouncer-target=\"#invalid-phone\"\n autoComplete=\"off\"\n placeholder=\"Telefone/Whatsapp\"\n data-should-validate={\n this.props.contactsWithDynamicRequired\n ? String(this.state.phoning || this.state.whatsapping)\n : 'true'\n }\n />\n \n
\n\n {isPessoaFisica && (\n \n \n
\n )}\n \n )}\n\n {!this.props.unit &&\n this.props.units &&\n this.props.units.length > 1 &&\n this.props.showUnits && (\n \n Por favor, selecione esse campo\n
\n \n \n
\n )}\n\n {this.props.filterUnitsByLocation && showLocationFields && (\n \n
\n )}\n {this.props.filterUnitsByLocation && showLocationFields && (\n \n
\n )}\n \n {this.props.zflow && (\n \n