# Página de imóvel



# Quero alugar

#### **Para que serve o Quero Alugar**

Quando você clicar no botão **Quero alugar** no perfil de um imóvel você será direcionado para preencher os dados da análise financeira. Esta é uma forma de mostrar ao responsável do imóvel que você tem interesse em alugar!

Para ver todos os detalhes da análise financeira, [clique aqui](https://docs.mellro.com/books/gerador-de-contrato-de-locacao/page/analise-financeira).

---

<div id="bkmrk--1"></div>#### **Quando a análise financeira é necessária:**

A análise financeira sempre vai ser necessária quando precisamos de mais informações para validar se você pode alugar um imóvel.

#### **Já passei na análise financeira de um imóvel, tenho que fazer de volta?**

Toda vez que o valor do aluguel mudar ou toda vez que você se interessar por um novo imóvel você terá que passar novamente pela análise financeira. Fique tranquila, uma vez você preenchendo seus dados, eles são guardados para as próximas consultas. Só vamos pedir mais informações ou mais pessoas para compor a análise se for necessário!

Confira, a seguir, um tutorial em vídeo:

<iframe allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="allowfullscreen" frameborder="0" height="315" src="https://www.youtube.com/embed/5iC9PHd-x3Y?si=im6eIIv_0iXgFylf" title="YouTube video player" width="560"></iframe>

# RN / Página do imóvel

<div id="bkmrk-"></div><div id="bkmrk-%C2%A0"><table border="1" style="border-collapse: collapse; width: 100%;"><colgroup><col style="width: 50.0618%;"></col><col style="width: 50.0618%;"></col></colgroup><tbody><tr><td>[Fluxograma / Não logado](https://www.figma.com/file/RTUbzVX2lvziemaH3erMrC/Fluxograma-%2F-Aplica%C3%A7%C3%A3o-WEB?type=design&node-id=348-3137&mode=design&t=l0ciRtLelakBCSez-4)</td><td>[Fluxograma / Logado](https://www.figma.com/file/RTUbzVX2lvziemaH3erMrC/Fluxograma-%2F-Aplica%C3%A7%C3%A3o-WEB?type=design&node-id=348-0&mode=design&t=l0ciRtLelakBCSez-4)</td></tr><tr><td>[Telas / Não logado](https://www.figma.com/file/aZYucB1du7Di9tlHA8aEgq/Busca?type=design&node-id=332-10&mode=design)</td><td>[Telas / Logado](https://www.figma.com/file/aZYucB1du7Di9tlHA8aEgq/Busca?type=design&node-id=1217-4601&mode=design)</td></tr><tr><td>Protótipo / Não logado / [Mobile](https://www.figma.com/proto/aZYucB1du7Di9tlHA8aEgq/Busca?type=design&node-id=332-10&viewport=-709%2C225%2C0.04&t=U1BkyL6jJE34cj5o-0&scaling=min-zoom&starting-point-node-id=682%3A33148&show-proto-sidebar=1) e [desktop](https://www.figma.com/proto/aZYucB1du7Di9tlHA8aEgq/Busca?type=design&node-id=332-10&viewport=-709%2C225%2C0.04&t=U1BkyL6jJE34cj5o-0&scaling=min-zoom&starting-point-node-id=682%3A33324&show-proto-sidebar=1)</td><td>Protótipo / Logado / [Mobile](https://www.figma.com/proto/aZYucB1du7Di9tlHA8aEgq/Busca?type=design&node-id=1217-4601&viewport=497%2C173%2C0.03&t=U1BkyL6jJE34cj5o-0&scaling=min-zoom&starting-point-node-id=1217%3A4612&show-proto-sidebar=1) e [desktop](https://www.figma.com/proto/aZYucB1du7Di9tlHA8aEgq/Busca?type=design&node-id=1217-4601&viewport=497%2C173%2C0.03&t=U1BkyL6jJE34cj5o-0&scaling=min-zoom&starting-point-node-id=1217%3A6198&show-proto-sidebar=1)</td></tr></tbody></table>

</div>
### <span style="color: rgb(51, 154, 240);">**Descrição**</span>

  
Este documento descreve todos os detalhes sobre as página de imóveis e seus comportamentos

---

### **<span style="color: rgb(51, 154, 240);">Fluxo</span>** 

#### **Imóvel**

##### **URLs**

A URL das páginas de Perfil do imóvel precisam atender a seguinte regra, visando melhorias de SEO: Criar Subpáginas (CIDADE + BAIRRO) para ficarem prontas

Url exemplo:[ https://app.mellro.com/imovel/curitiba/centro](https://app.mellro.com/imovel/curitiba/centro);

As urls dos imóveis não podem conter acentos para que os links quando compartilhados não quebram;

##### **Galeria de imagens:**  


Todas as imagens devem ser exibidas com 100% de sua altura dentro da altura limite da galeria, dessa forma, o usuário consegue visualizar as fotos por inteiro, independente se sua orientação for horizontal ou vertical;

No perfil do imóvel se um usuário clicar em uma das fotos, irá abrir a galeria de fotos para melhor visualização;

A galeria de imagens no topo exibe o número total de imagens e qual está sendo visualizada, logo ao lado o botão para fechar;

A imagem sempre é mostrada centralizada na tela e os botões de navegação aos lados sempre na mesma posição.

A página de perfil do imóvel apresenta os seguintes campos condicionais de acordo com o plano escolhido durante o cadastro do imóvel

[Garantia de pagamento](https://www.figma.com/file/aZYucB1du7Di9tlHA8aEgq/Aplica%C3%A7%C3%A3o-web?node-id=1217%3A18651)

No perfil do imóvel existe um botão **Denunciar irregularidade** que quando é clicado leva para o [helpdesk;](https://mellro.atlassian.net/servicedesk/customer/portals)

Neste caso a mensagem ao time da Mellro deve chegar com o link do imóvel denunciado;

##### **Box direito:**

Este box apresenta o comportamento sticky, conforme o usuário rola a tela para baixo, ao atingir aaltura máxima ele fica fixo na tela;

Logo abaixo do valor do imóvel, são exibidas as [informações de condomínio e de IPTU do imóvel](https://www.figma.com/file/4EmwawftO3kRlOIWzGC7Ha/Cadastrar%2FEditar-im%C3%B3vel?type=design&node-id=1102-26133&mode=design&t=dhrXfnXZB6xT5YZV-4):

Caso o dono pague um desses valores, deve ser exibida a informação de que o Condomínio/IPTU está incluso;

Caso o inquilino pague um desses valores, deve ser exibida a informação de quanto custa o Condomínio/IPTU;

##### **Botão Conversar com responsável**:

Quando clicado pode acontecer duas coisas:

Caso o usuário não esteja logado, irá abrir o modal para o usuário logar em sua conta da Mellro.

Caso o usuário esteja logado, será criada uma negociação com o dono do imóvel, ou seja, será aberta uma conversa entre o interessado e o dono no Chat.

Quando uma nova negociação é criada, o [email \[proposition\] Nova negociação é disparado](https://mc.sendgrid.com/dynamic-templates/d-e6208703c3a440919076962bd6d4ff20/version/0f804e98-8f84-4eb1-a080-d2fa69056591/preview) que direciona para o chat da aplicação, com a nova conversa aberta;

Será aberta uma nova aba com o chat e a conversa aberta em questão;

Os botões de **Favoritar** e **Descartar** funcionam da mesma forma que na listagem;

##### **Botão de compartilhar:**  


[Mobile](https://www.figma.com/file/4EmwawftO3kRlOIWzGC7Ha/Cadastrar%2FEditar-im%C3%B3vel?type=design&node-id=1560-21789&mode=design&t=B4LYa8cL52QvXef6-4): O botão deve ser exibido no lugar do menu do usuário;

[Desktop](https://www.figma.com/file/4EmwawftO3kRlOIWzGC7Ha/Cadastrar%2FEditar-im%C3%B3vel?type=design&node-id=1-7891&mode=design&t=B4LYa8cL52QvXef6-4): O botão de compartilhar deve ser exibido na linha do título do imóvel;

##### **Prévia de compartilhamento de link:**

Quando um dos links de uma página de imóvel é compartilhada, as informações exibidas na prévia do link devem seguir os padrões abaixo:

**Imagem:** Devemos exibir a primeira foto cadastrada do imóvel;

**Título:** Mell.ro: \[Tipo imóvel\] para alugar, R$ \[Valor\] em \[Bairro\], \[Cidade\];

**Descrição:** Aluguel rápido e fácil! \[Quartos\] quarto\[s\], \[metragem\]m², \[Banheiros\] banheiro e \[vagas\] vagas de garagem e \[aceita/não aceita\] animais.

Para os quartos, banheiros e vagas de garagem:

Se existir apenas 1 da variável, a palavra deve ser exibida no singular. Exemplo: quarto, banheiro e vaga;

Se existir mais de um da variável, a palavra deve ser exibida no plural. Exemplo: quartos, banheiros e vagas;

Se o imóvel possuir 0 quartos, banheiros ou vagas de garagem, não deve ser exibida a variável zerada. Exemplo: Aluguel rápido e fácil! 1 quarto, 37 m², 1 banheiro e aceita animais.

##### **Mapa**

É exibido no mapa a localização do imóvel.

Precisamos exibir apenas os campos: \[Endereço\] - \[Cidade\], \[Estado\]

##### **Links para outras plataformas:**

Em nossas telas de perfil do imóvel, precisamos começar a [disponibilizar os links dos imóveis](https://www.figma.com/file/aZYucB1du7Di9tlHA8aEgq/Busca?type=design&node-id=9065-16024&mode=design&t=bI3Qwl41wQmjlASK-4) nas outras plataformas;

**Rastrear nossas páginas de perfil**

Precisamos passar a rastrear apenas as nossas páginas de perfil nas outras plataformas, semelhante ao nosso crawler;

Precisamos rastrear 30 minutos após o envio do xml para o Canal Pro;

Páginas de perfil nas plataformas:

**OLX:** <span class="code" spellcheck="false">https://www.olx.com.br/perfil/mellro-1067bc48</span>

**Viva real:** <span class="code" spellcheck="false">https://www.vivareal.com.br/635579/mellro/?\_\_ab=exp-aa-test-viva%3AB%2Cdescription-phone-cta%3Acontrol</span>

**ZAP imóveis:** <span class="code" spellcheck="false">https://www.zapimoveis.com.br/imobiliaria/635579/?</span>

Nelas vão se encontrar todos os nossos imóveis publicados;

Nas três plataformas, se encontra visível o <span class="code" spellcheck="false">id do imóvel</span> da nossa plataforma nas páginas de imóvel. Dessa forma, conseguimos passar a exibir os links das outras plataformas na tela de perfil de imóvel;

Enquanto os links não são rastreados, a área **Veja o imóvel publicado em outros portais deve ser oculta;

Enquanto um dos links não fica disponível não deve ser exibido o botão relativa a plataforma;

##### **Imóvel despublicado**

Caso o imóvel já esteja alugado ou esteja desativado (em qualquer link cujo backend retorna 404), o usuário é direcionado para a seguinte [tela do Figma](https://www.figma.com/file/aZYucB1du7Di9tlHA8aEgq/Busca?type=design&amp;node-id=8355-54005&amp;mode=design&amp;t=U1BkyL6jJE34cj5o-4);

---

### <span style="color: rgb(51, 154, 240);">**Fluxos relacionados**</span>

<table border="1" id="bkmrk-fluxo-como-os-fluxos" style="border-collapse: collapse; width: 100%;"><colgroup><col style="width: 50.0618%;"></col><col style="width: 50.0618%;"></col></colgroup><tbody><tr><td>**Fluxo**</td><td>**Como os fluxos se relacionam**</td></tr><tr><td>Admin / Crawler</td><td>Descreve como imóveis encontrados pelo crawler podem ser exibidos na busca e gerar sua página.</td></tr><tr><td>Integrações / Redes de imóveis</td><td>Descreve como imóveis exibidos na busca são exibidos em outras redes de imóveis e gerar sua página.</td></tr><tr><td>Plataforma / Meus imóveis</td><td>Descreve como acessar um imóvel pela tela de meus imóveis.</td></tr><tr><td>Plataforma / Criar imóvel</td><td>Descreve como criar um novo imóvel.</td></tr><tr><td>Plataforma / Editar imóvel</td><td>Descreve como editar um imóvel criado.</td></tr><tr><td>Admin / Imóveis</td><td>Descreve como nossa equipe pode acessar todos os detalhes de um imóvel criado pelo admin</td></tr></tbody></table>

---

### <span style="color: rgb(51, 154, 240);">**Requisitos de aceitação**</span>

1. Curtir/favoritar um imóvel
2. Descurtir/desfavoritar um imóvel
3. Campo condicional do perfil do imóvel de acordo com o plano
4. Função conversar com dono no perfil do imóvel

<div id="bkmrk--10"></div><div id="bkmrk--11"></div>

# Página do imóvel

Após a busca e encontrado o imóvel desejado para o aluguel, por meio da [listagem de catálogo](https://docs.mellro.com/books/busca-de-imoveis/page/listagem-de-catalogo), você pode clicar no card do imóvel, que uma nova página será aberta, onde **detalhes e fotos do imóvel** selecionado serão exibidos.

É exibido ao usuário, a galeria de fotos, na qual você pode clicar e observar todas as fotos cadastradas com maiores riquezas de detalhes, será exibido também, informações sobre o imóvel e condomínio, se houver, além das regras a serem seguidas, como a aceitação de animais e um mapa interativo com a localização do imóvel.

Na página de detalhes também existe um box, que nele contém dados de valores de aluguel, IPTU e Condomínio, se incluso ou não, e dois botões, C**onversar com responsável** e o **Quero Alugar**, que iniciaram um chat com o responsável pelo imóvel para a negociação e confirmação do aluguel.