Atualização do Escopo Funcional

 CLUBE DURATEX - Área logada

ESCOPO FUNCIONAL

SOBRE O PROJETO

Criação de uma nova versão para a área logada do Clube Duratex. 

A área logada de Clube Duratex é a parte do site onde os usuários cadastrados realizam as principais operações do clube: envio de nota fiscal para recebimento de duracoins, acompanhamento de status das notas, recebimento, resgate e acompanhamento de suas duracoins, além de ser informado sobre campanhas e promoções vigentes.

A plataforma existente dará lugar a esta nova versão, mas a base de usuários existentes seguirá tendo acesso sem necessitar de um recadastro e seu histórico de operações e seu saldo de duracoins seguirá preservado na nova plataforma.

CONSIDERAÇÕES GERAIS

• Website responsivo desktop e mobile

• Frontend: Html, CSS, JavaScript 

• Backend: NODE, PHP (CMS)

• Idioma: Português

• Sitemap: https://octopus.do/t5owshr5048

• Protótipo Navegável Desktop: https://www.figma.com/proto/wgLiamNSozRnBMQRy1bQLJ/Clube-Duratex-Area-logada?page-id=1%3A2&node-id=567%3A0&viewport=1560%2C-634%2C0.06501638144254684&scaling=min-zoom   

• Protótipo Navegável mobile: https://www.figma.com/proto/wgLiamNSozRnBMQRy1bQLJ/Clube-Duratex-Area-logada?page-id=1%3A12&node-id=1100%3A7876&viewport=700%2C145%2C0.048067606985569&scaling=scale-down&starting-point-node-id=1100%3A7876  

• Cronograma: https://app.instagantt.com/shared/s/T3rrCgwhMDE93m23knYc/latest  

• Fluxo de Login e Cadastro: https://b8t6hu.axshare.com/#g=1&p=fluxo_login_cadastro  

PENDÊNCIAS E RESPONSABILIDADES DA DURATEX

• Produção e cadastro dos conteúdos:

  • Textos dos fluxos nas telas de Login e cadastro

  • Textos dos fluxos nas telas de recuperação de senha

  • Texto do bloco inicial de Cadastro de notas fiscais com

    • Passo a passo de download e envio de notas

    • Telas de feedback de sucesso e/ou erro

  • Imagem e texto do bloco “promoções do clube Duratex”

  • Imagem e texto da vitrine de promoções

  • Imagem(ns) e texto(s) da página interna de Promoção

  • Textos de apoio na tela de Meu Perfil

  • Textos dos fluxos das telas de:

    • Alteração de celular

    • Alteração de Email

    • Alteração de Senha

    • Inclusão de número de CNPJ

  • Texto inicial da página de Fale com a Duratex

  • Texto(s) e imagem(ns) de Perguntas e Respostas do Fale com a Duratex

  • Regulamento(s) de campanhas

  • Regulamento(s) de promoções

  • Regulamento geral do Clube

• Textos de Políticas de Privacidade, Termos de Uso e Política de Cookies - não impeditivo

• Definição da ferramenta para gestão de cookies - não impeditivo

• Código de tracking de Analytics - não impeditivo 

• Código do GTM - não impeditivo

• Definição se será possível utilizar o mesmo analytics para todas os domínios - não impeditivo

• Código do Google Search Console - não impeditivo

• Determinar as opções de assuntos para o formulário de contato e o endereço de email de destino para as mensagens - não impeditivo 

  • O endereço de email não é parametrizável. 

• Definição da integração com ZenDesk. - não impeditivo  

• Definição da aplicação que será utilizada para gestão de cookies - não impeditivo 

DOMÍNIO

• Domínio principal deslogado: clubeduratex.com.br

• Domínio principal logado: http://app.clubeduratex.com.br  

• Domínio CMS: cms.clubeduratex.com.br

ESCOPO FUNCIONAL

CONCEITOS INICIAIS

• Dados validados: 

  • Usuários deverão fazer uma etapa de validação de número de celular e/ou de endereço de email para que estes dados sejam considerados validados na plataforma. 

  • Usuários legados, com dados cadastrais não validados ainda poderão efetuar login com CPF ou Email, mas serão convidados a validar seus dados. 

  • Caso o usuário legado tenha preenchido um número de celular em sua página de perfil, este não será reconhecido como dado válido para login - apenas seu email e/ou CPF.

  • Caso o usuário legado tenha um email (não validado) poderá ser utilizado para login, mas será convidado para fazer a validação de seu email a cada nova entrada na plataforma nova.

ACESSO A ÁREA LOGADA

• Detalhado em formato de fluxo em: https://b8t6hu.axshare.com/#g=1&p=fluxo_login_cadastro

• O acesso a área logada do Clube Duratex poderá ser efetuado através do site http://www.clubeduratex.com.br , a partir do header. 

Open

Figura 1 - layout do site clube Duratex (área deslogada)

• Ao clicar em Entrar ou Cadastrar, o usuário é direcionado para a página de identificação do usuário.  

• As telas do fluxo de cadastro, login e recuperação de senha não são editáveis via CMS, devendo ter seu conteúdo textual definido e validado previamente à etapa de desenvolvimento.

Open

Figura 2 - tela de identificação do usuário / com feedback de erro

• Para ter acesso a área logado, o usuário deverá se identificar através de número de CPF, Email ou Celular.

• O campo deve conter máscaras de formatação para os diferentes formatos de dados possíveis (CPF, Celular ou email). 

  • CPF no formato 999.999.999-99

  • Celular dividido em 2 campos sendo um DDD e outro número no formato [99] [99999-9999]

  • Email com validador de “@dominio”

• Ao informar dados inválidos ou incompatíveis, é apresentada mensagem de feedback de erro, com a delimitação do campo incorretamente preenchido e uma mensagem em vermelho indicando a natureza do erro.

• Ao clicar em Avançar na tela de identificação: 

  • Se o usuário informar dados já cadastrados na plataforma, será direcionado para a Tela de login, onde ele deverá informar sua senha de acesso. 

    • Tela de login: 

      • A tela contém um link para o fluxo de recuperação de senha (vide fluxo de recuperação de senha).

      • A tela contém captcha para limitar o volume de tentativas de acesso. 

      • Não está previsto limite para tentativas de acesso

• Ao informar um dado não existente, ele é direcionado para a tela de Cadastro de novo usuário.

CADASTRO DE NOVO USUÁRIO

Figura 3 - tela de cadastro de novo usuário

• O cadastro de um novo usuário é feito em etapas. A primeira tela  irá exigir: 

  • Email e confirmação do email

  • CPF

    • O campo de CPF deverá ser validado matematicamente

    • O endereço de email será validado via Validity

    • O número do CPF deverá ser validado via SERPRO  

  • Número do Celular dividido em 2 campos sendo um DDD e outro número do mesmo

    • O número de celular deverá ter formato validado 

  • Checkbox de aceite dos termos de uso (obrigatório). 

    • O texto “termos de uso” é um link para a página de termos de uso da plataforma. 

  • Checkbox de aceite da política de privacidade (obrigatório).

    • O texto “política de privacidade” é um link para a página da política de privacidade da plataforma. 

  • Captcha para limitar o volume de tentativas de acesso. 

• Ao preencher todos os campos corretamente, o usuário é direcionado para tela de validação do telefone celular de cadastro.

Figura 4 - tela de confirmação

• Será enviado através de mensagem de texto por SMS, um código numérico para o telefone celular informado no cadastro, e que deverá ser informado pelo usuário.

  • O usuário deverá  preencher corretamente os números indicados.

  • Caso ele não receba o código, poderá clicar no botão de re-enviar código para fazer uma nova tentativa.

    • Um contador regressivo será apresentado para liberar que o usuário faça uma nova tentativa de envio de código.

• Caso o usuário não efetue a confirmação de cadastro, seus dados deverão ser descartados, não constituindo um cadastro válido na plataforma.

  • Desta forma o usuário poderá efetuar nova tentativa de cadastro utilizando os dados informados anteriormente.

• Ao preencher o código de confirmação corretamente, os dados do usuário passam a pertencer à base de usuários validados, sendo seu CPF e celular validados,  embora seu cadastro ainda não tenha sido concluído. 

• O usuário é direcionado para a tela de dados cadastrais onde deve informar: 

  • Nome

  • Sobrenome

  • Data de Nascimento - campo com máscara no formato dd/mm/aaaa com validação de formato.

    • O sistema deve permitir apenas o cadastro de pessoas maiores de 18 anos.

  • Resposta para 2 questões relacionadas ao perfil demográfico:

    • Você trabalha em uma marcenaria? (S/N)

    • Profissão (lista de profissões com seleção única)

      • A lista de profissões apresentadas depende da resposta para a primeira pergunta. 

        • Caso SIM, a lista traz uma relação de profissões vinculadas ao universo da marcenaria. 

        • Caso NÃO, a lista traz uma relação de profissões de escopo mais aberto.

        • A lista de profissões associadas a cada resposta será parametrizável em CMS.

  • UF (lista de seleção com as UFs)

  • Cidade (lista de seleção de Cidades, de acordo com a UF selecionada previamente)

  • Aceite para receber comunicações via email

  • Aceite para receber comunicado via celular/sms/whatsApp

Figura 5 - tela de dados cadastrais

• Ao preencher todos os campos corretamente, o usuário é direcionado para tela final, para criação de sua senha: 

Figura 6 - tela de criação de senha

• O usuário deve informar uma senha e confirmá-la

• Ao clicar no primeiro campo de senha, é apresentado um componente de validação imediata de formatação da senha. 

  • De acordo com os critérios de formatação de segurança, o elemento vai indicando visualmente quais requisitos foram atendidos e quais ainda não foram, facilitando o entendimento do usuário com relação ao padrão necessário.

  • O componente permanece na tela, até a mudança de tela.

• Padrão da Senha:

  • Mínimo de 8 caracteres

  • Ao menos uma letra

  • Ao menos um número

• Ao finalizar a criação de seus dados cadastrais, o usuário é direcionado para a tela principal da área logada. 

RECUPERAÇÃO DE SENHA

• A recuperação da senha é feita em etapas. No início, o usuário deverá informar o CPF cadastrado.

  • Ao informar um cpf válido:

    • Caso tenha um número de telefone celular validado na plataforma, o usuário receberá um código numérico via mensagem de texto (SMS) em seu número de telefone.

      • Caso ele não receba o código, poderá clicar no botão de re-enviar código para fazer uma nova tentativa.

        • Um contador regressivo será apresentado para liberar que o usuário faça uma nova tentativa de envio de código.

      • Alternativamente, o usuário poderá indicar que prefere receber um email com as instruções de troca de senha (para o caso de seu número de telefone celular ter mudado ou não ter acesso naquele momento ao celular onde recebe o código)

• Caso não tenha um número de telefone celular validado ou tenha indicado preferir receber instruções por email , ele receberá uma mensagem por email, com um link para a tela de troca de senha.

  • Caso ele não receba o código por email, poderá clicar no botão de reenviar código para fazer uma nova tentativa.

  • Um contador regressivo será apresentado para liberar que o usuário faça uma nova tentativa de envio de código.

• Ao informar corretamente o código ou clicar no link recebido por email, ele é direcionado para a tela de troca de senha, com comportamento igual ao indicado na etapa final do processo de cadastro.

Figura 7 - tela de redefinição da senha de acesso

• Caso o endereço de email utilizado para a recuperação de senha não tenha sido previamente validado (casos de usuários legados, por exemplo), ele já pode ser assinalado como validado, uma vez que foi confirmado o recebimento da mensagem com o link de recuperação de senha.

Figura 8 - tela de feedback de troca de senha

• Ao concluir a alteração de senha, o usuário é direcionado para a tela de feedback de troca de senha (ele não é logado automaticamente). O link “ fazer login” direciona o usuário para a página inicial do fluxo (tela de identificação do usuário).

DASHBOARD DO USUÁRIO NA ÁREA LOGADA

• Após concluir o processo de login e/ou cadastro, o usuário é direcionado para a tela principal da área logada. 

Figura 9 - Dashboard / Área logada

• Em desktop, a estrutura da área principal é composta por 2 divisões:

  • Menu lateral esquerdo, onde são apresentados os principais links de navegação entre as seções internas.

  • Área central, onde são exibidas as informações de cada seção.

• Em mobile, o menu lateral permanece sob o ícone do “hambúrguer”. Ao ser clicado, apresenta os mesmos elementos que a versão em desktop.

• No menu temos:

Figura 10 - Menu expandido/colapsado em desktop

• Menu hamburger - ao ser clicado, alterna entre as visões do menu expandido ou colapsado. Em desktop, o menu é apresentado como uma pequena faixa na lateral esquerda. 

• Logo clube Duratex - ao ser clicado, direciona o usuário para a tela inicial da área logada.

• Foto e link com meu perfil -  link para a página do perfil do usuário (detalhado mais abaixo).

• Saldo disponível em Duracoins.

• Botão Início - assim como o clique no ícone do Clube Duratex,  ao ser clicado, direciona o usuário para a tela inicial.

• Botão Promoções - link para a página interna de promoções.

• Botão Galeria de Projetos

• Botão Histórico - link para a página interna do histórico de operações na conta do usuário.

• Botão Minhas NF’s - link para a página interna de acompanhamento das notas fiscais.

• Botão indicar Marceneiro

• Botão Fale com o Clube - link para a página interna de perguntas e respostas e formulário de contato.

• Botão Regulamentos - link para a página interna de Regulamento de campanhas e promoções.

• Botão Sair - clique realiza o logoff do usuário, posteriormente direcionando-o para a área deslogada do clube em http://www.clubeduratex.com.br

• Em desktop, cada elemento do menu apresenta-se destacado com cor diferenciada para indicar a seleção da página atual.

• Na área superior central do site temos:

  • Componente de breadcrumbs em duas linhas, indicando a seção do site e página atualmente aberta.

  • Botão de notificações. Ao ser clicado, exibe as notificações mais recentes da plataforma. Vide detalhamento de notificações da plataforma

ÁREA CENTRAL DA HOME

Carrossel de Novidades

• Componente com a listagem de novidades (banner com conteúdo) gerenciável via CMS.

Componente de envio de nota fiscal

• A área central apresenta um componente para envio de Nota fiscal, que têm diversos estágios de apresentação, de acordo com a situação.

Figura 11 - componente de envio de nota fiscal estado inicial, em desktop e mobile

• Inicialmente, o componente exibe 3 passos de instruções para o usuário fazer o download de um arquivo no padrão XML e como enviá-lo para a plataforma.

• Em mobile, o componente é apresentado em formato de carrossel, com cada passo apresentado em um slide.

• Ao clicar em Regras da campanha, o usuário é direcionado para a tela que apresenta as campanhas recentes:

Figura 12 - componente de envio, visão de campanhas ativas

• A tela de regras de campanha exibe até 3 elementos com as campanhas atualmente ativas (mais de uma campanha pode estar ativa). Cada elemento apresenta:

  • Nome da campanha.

  • Período de validade.

  • Link para a página de regulamento da campanha.

  • Em mobile, os elementos são exibidos em um modelo de carrossel, similar ao da visão inicial.

• Clique no botão Voltar, direcionando para a tela anterior (tela inicial).

• A partir da tela inicial, ao clicar em ENVIAR NOTA FISCAL, o componente alterna para a visão abaixo:

Figura 13 - componente de envio, em seleção de arquivo

• Se o perfil do usuário não estiver totalmente completo, será informado que para realizar o envio de nota o mesmo precisa estar completo, apresentando um link para a tela do Perfil do usuário

• O usuário pode arrastar um arquivo compatível a partir de seu dispositivo, ou clicar no link para abrir o componente do sistema operacional para localizar o arquivo desejado.

• A plataforma suporta envio de multiplos arquivo simultâneos.

• Clique no botão Voltar, direcionando para a tela anterior.

• Uma vez selecionado e enviado um arquivo compatível, a tela é alternada para a visão de envio de arquivo, com apresentação de barra progressiva..

Figura 14 - componente de envio, em envio do arquivo

• Após o arquivo enviado com sucesso, é apresentada a tela de feedback:

Figura 15 - componente de envio, feedback de êxito

• Clique em “Acompanhe o status de sua nota fiscal” direciona o usuário para a tela de Minhas Notas Fiscais (descrito mais abaixo).

• A  nota é enviada para análise da plataforma, que fará a interpretação dos dados para a identificação de dados e informações relativas à compra de produtos da linha de painéis Duratex e, quando validado, efetuar o crédito respeitando a campanha ou promoção válida.

• Caso o arquivo selecionado pelo usuário seja incompatível ou incorreto, é apresentada uma mensagem de feedback de erro:

Figura 16 - componente de envio, feedback de erro no envio.

Carrossel de Prêmios

• Abaixo do componente de envio de nota fiscal é apresentado o bloco de “Prêmios para você”  que apresenta uma vitrine em formato de carrossel, com opções de prêmios que podem ser resgatados pelo usuário com suas Duracoins. 

• Este elemento poderá estar indisponível no lançamento da plataforma, neste caso sendo sobreposto pelo elemento com o Histórico de Duracoins do usuário (vide descrição mais abaixo).

Figura 17 - carrossel de Prêmios.

• O carrossel poderá conter até 7 elementos no slide, mas a recomendação é de usar apenas três por vez.

• O usuário poderá utilizar as setas ou as bolinhas para avançar ou retroceder entre as opções do carrossel.

• O CTA exibido na área inferior (Resgatar) irá abrir a página do site da Premmiar com o item correspondente, em uma nova janela de browser.

• Cada slide apresenta uma imagem e texto de apoio.

• Clique em ‘Ver Mais’ abre o site de Clube Duratex dentro da Premmiar em uma nova janela de browser.

• Cada slide é editável em CMS, devendo ser definida uma imagem, texto de apoio e link de destino.

Histórico de Duracoins

Figura 18 - Histórico de Duracoins

• Bloco que ocupa uma coluna em Desktop, mas que poderá ser expandido para sobrepor a área do bloco do carrossel de Prêmios, caso ausente. 

Figura 19 - exemplo do bloco com Histórico de DuraCoins , ocupando 2 colunas

• O bloco apresentará até os três últimos lançamentos realizados em sua conta, seguindo o formato detalhado na seção "Histórico de operações”.

• O item mais recente é exibido na parte superior. 

• O clique em qualquer uma das linhas ou no link Ver mais, direciona o usuário para a página interna do histórico. 

Bloco de Promoções

Figura 20 - Bloco de Promoções

• Bloco que direciona para a página interna de promoções. Contém

  • imagem do banner, definida em CMS, sendo uma imagem para a versão Desktop e uma imagem específica para a versão mobile do site.

  • CTA Saiba Mais - link para a página interna de Promoções.

  • Este bloco poderá ser habilitado/desabilitado a critério do usuário administrativo no CMS. Caso desabilitado, ele é apenas oculto na interface para os usuários do Clube. 

PÁGINA DE PROMOÇÕES

• Página com as promoções atualmente disponíveis para os usuários na plataforma 

Figura 21 - interna de Promoções

• Composta por

  • Banner no topo, definido em CMS, sendo uma imagem para desktop e uma imagem para mobile

  • Vitrine de promoções. Cada bloco representa uma promoção vigente. Clique direciona para a página interna da promoção.

  • A imagem de cada bloco é definida em CMS, no cadastro de uma nova promoção. Uma mesma imagem atende a desktop e mobile.

  • A ordem de apresentação das promoções pode ser definida em CMS, mas por default, apresentará a promoção mais recentemente cadastrada.

PÁGINA INTERNA DA PROMOÇÃO

• Página com conteúdo descritivo da promoção selecionada.  

• Conteúdo editável em CMS. 

• O conteúdo poderá ser colocado em modo rascunho, para permitir sua edição antes da publicação.

Figura 22 - interna da Promoção

• Composta por

  • Título da Promoção

  • Imagem de topo definida em CMS, sendo uma imagem para versão desktop e outra para Mobile.

  • Texto livre, editável em CMS com editor Rich Text, permitindo a incorporação de tabelas,  imagens ou link de vídeo do Youtube.

  • A inclusão de tabelas deve prever sua apresentação correta em mobile, sendo uma orientação ao editor que não sejam inseridas tabelas com muitas colunas e texto. Não haverá transposição automática da tabela neste caso (transformação de uma tabela horizontal em vertical)

  • Link para o regulamento da promoção (opcional)

• O cadastro de uma promoção no CMS exigirá a definição da data de início e data final de validade. 

GALERIA DE PROJETOS (NOVIDADE)

•  A galeria de Projetos é um espaço especial para o marceneiro enviar fotos dos seus projetos com produtos Duratex.

  • Os projetos em destaque serão exibidos no site da Duratex.

  • Os Destaques serão selecionados via CMS.

• A página central da Galeria de Projetos será composta por um banner contendo explicações sobre a Galeria de projetos, juntamente com um tutorial de como realizar o envio de seus projetos e um botão de Enviar seu projeto.

  • Ao clicar em enviar será transferido para a página de Envio de Projeto que será detalhada mais abaixo.

• Abaixo teremos um banner com explicações da melhor maneira de como fotografar seus projetos. Ao clicar no botão saiba mais, o mesmo será transferido para a pagina explicativa sobre o projeto (https://www.clubeduratex.com.br/mundo-marcenaria/conheca-as-novas-modalidades-galeria-de-projetos-e-marceneiro-indica-marceneiro/ )

• Em seguida teremos o bloco com os projetos já enviados, onde na parte superior teremos campo de busca de projetos. Primeiramente filtrando por Categoria de projetos (esta categoria cadastrado via CMS), Padrão principal do projeto, estado e por último cidade.

ENVIO DE PROJETOS(NOVIDADE)

• Nesta tela serão informados os dados do projeto a ser enviado:

  • Nome da marcenaria: Virá preenchido conforme cadastro, sendo bloqueada a edição do campo

  • Nome do marceneiro: Virá preenchido conforme cadastro, sendo bloqueada a edição do campo

  • Estado: Campo selecionável

  • Cidade: Campo selecionável

  • Categoria de Projeto: Campo Selecionado (opções cadastradas via CMS).

  • Padrão principal utilizado no projeto: Campo selecionável sendo possível adicionar até 3 padrões em um projeto(opções cadastradas via CMS).

  •  Mini descrição do projeto (até 350 caracteres)

  • Qual sua rede social preferencial?: Campo selecionável 

  • Qual a URL do seu perfil?: Campo preenchível

  • Abaixo, quadro para adicionar as fotos dos projetos: permitido envio de até 3 imagens nos formatos JPG/PNG.

HISTÓRICO (DE OPERAÇÕES)

• Página com o “extrato” de Duracoins do usuário, apresentando todas as operações de entrada e saída de Duracoins na conta.

Figura 23 - Página de histórico com detalhe da operação aberto

• Apresenta na sua parte superior um elemento de filtro para que o usuário possa selecionar um mês específico. 

• Na área superior apresenta ainda o indicador com a data de vencimento e total de Duracoins mais próximas de perder seu prazo de uso.

• A seguir é apresentado o extrato do usuário, com os lançamentos de crédito e débito detalhados.

  • A operação mais recente é apresentada na parte superior, a mais antiga na inferior.

  • O extrato contém blocos separados em meses, com a indicação do mês e ano acima de cada conjunto correspondente. 

Figura 24 - modelo do extrato

• Por default, a lista traz os lançamentos do mês corrente. Um botão “Ver Mais” carrega os lançamentos do mês anterior e assim sucessivamente, a cada novo clique.

Figura 25 - exemplo de operação

• Cada elemento do extrato apresenta:

  • ícone relativo ao tipo de operação

  • Descritivo 

  • data da operação

  • Valor da movimentação em Duracoins. Crédito de valores são apresentados em Azul. Débitos são apresentados em vermelho.

• Cada elemento do extrato é clicável para exibir detalhes da operação, onde são exibidos, de acordo com o tipo de operação. 

• Em desktop, os detalhes são apresentados à direita do extrato: 

Figura 26 - exemplo dos detalhes em desktop

• Em mobile, os detalhes são apresentados como um modal, sobre o conteúdo:

Figura 25 - exemplo dos detalhes, em mobile

• Esta página não apresenta detalhes de Notas fiscais não processadas por erros ou problemas de envio.

• Esta página irá apresentar apenas as informações depois que a operação for realizada sistemicamente, não exibindo status de notas fiscais, por exemplo.

MINHAS NOTAS FISCAIS

• Página que apresenta o histórico e extrato de todos os envios de notas fiscais. 

Figura 26 - página de minhas notas fiscais

• Similar a página do histórico, tem um controle na parte superior para a seleção do período desejado para visualização;

• Apresenta também a organização de conteúdo separado por meses, com as movimentações mais recentes na parte superior. 

Figura 26 - exemplo de operação de nota fiscal 

• Cada elemento do histórico de nota fiscal apresenta:

  • Data da Nota fiscal

  • Nº da nota fiscal

  • Valor total da nota

  • Status

  • Duracoins creditados

• Apenas operações com crédito em duracoins irão apresentar também detalhes da operação, apresentando um painel de informações da mesma forma apresentada na tela de histórico.

• Em mobile, os dados da operação que são apresentados na horizontal deverão ser transpostos para um formato na vertical, para permitir que todas as informações sejam visíveis. (vide ref.: https://codepen.io/veekungx/pen/MWgvBxe )

Figura 27 - exemplo da transposição dos dados em mobile

INDICAR MARCENEIRO

• Ao indicar um novo marceneiro para participar do Clube Duratex, a pessoa que fez a indicação ganhará Duracois Extras assim que o indicado tiver a primeira nota fiscal validada junto ao clube.

• Ao clicar no menu Indicar Marceneiro, um modal surgirá com as orientações

• Abaixo das orientações será disponibilizado o link para indicação:

  • Este link pode ser copiado e enviado manualmente

  • Abaixo terá uma opção de compartilhar o link via WhatsApp

PÁGINA DO PERFIL

• Página que apresenta e permite a alteração dos dados cadastrais do usuário.

Figura 28 - página do perfil do usuário

• A estrutura e campos da página de perfil do usuário não é gerenciável em CMS.

• As alterações feitas pelo usuário em sua página de perfil são salvas automaticamente.

• A página do perfil apresenta:

  • Placeholder para imagem do usuário.

    • Enquanto o usuário não inserir uma imagem própria, a plataforma irá exibir um elemento com 2 letras, com as iniciais de Nome e Sobrenome do usuário.

  • Imagem do avatar do usuário. 

    • O usuário pode enviar uma imagem própria que será apresentada no menu lateral esquerdo (desktop) ou na  área superior (mobile)

    • Clique abre o componente do sistema operacional para seleção de arquivo e envio de imagem a escolha do usuário.

    • A imagem sofrerá um crop automático para apresentação no formato circular da página

Informações básicas

• Nome - campo obrigatório, informado na etapa de cadastro. Pode ser alterado.

• Sobrenome - campo obrigatório, informado na etapa de cadastro. Pode ser alterado.

• CPF - campo obrigatório, não pode ser alterado pelo usuário

• Data de nascimento, campo obrigatório, informado na etapa de cadastro. Pode ser alterado.

• Sexo: Seleção de uma opção entre Masc. Fem e Outro. Não obrigatório

• Resposta para 2 questões relacionadas ao perfil demográfico:

  • Você trabalha em uma marcenaria? (S/N)

  • Profissão (lista de profissões com seleção única)

    • A lista de profissões apresentadas depende da resposta para a primeira pergunta. 

      • Caso SIM, a lista traz uma relação de profissões vinculadas ao universo da marcenaria. 

      • Caso NÃO, a lista traz uma relação de profissões de escopo mais aberto.

Dados de contato e acesso

• Email - campo obrigatório, informado na etapa de cadastro. Pode ser alterado através do link “alterar email”.

• Celular - campo obrigatório, informado na etapa de cadastro. Pode ser alterado através do link “alterar telefone”.

• Senha - campo obrigatório, informado na etapa de cadastro. Pode ser alterado através do link “alterar senha”.

• Checkbox de acordo o recebimento de comunicações por email

  • Caso o usuário deixe este campo desmarcado, não deverá receber comunicação promocional da plataforma por e-mail.

• Checkbox de acordo o recebimento de comunicações por SMS ou WhatsApp

  • Caso o usuário deixe este campo desmarcado, não deverá receber comunicação promocional da plataforma por e-mail.

• Disclaimer: Texto indicativo de que comunicações essenciais para o funcionamento da plataforma ainda serão enviadas através de email ou sms/whatsApp 

Localização

• Cidade e Estado são dados obrigatórios, informados na etapa de cadastro, mas podem ser alterados.

• Os demais dados do endereço do usuário são opcionais.

• Busca automática de CEP 

  • Ao preencher com um número de CEP, o sistema deve fazer uma busca automática para preencher os campos de Endereço (logradouro), Bairro,  Estado e Cidade

  • O usuário poderá preencher as informações de Número e Complemento.

• Os dados poderão ser alterados pelo usuário

Dados da marcenaria

• O usuário poderá vincular seu perfil de pessoa física com uma empresa ao adicionar um CNPJ.

  • O usuário somente poderá acrescentar um único CNPJ. Ele poderá alterá-lo somente após decorrido prazo determinado em regra de negócio.

  • Um número de CNPJ somente poderá ser associado a um único usuário da plataforma.

  • Um texto de apoio é apresentado ao lado do campo de CNPJ, indicando a restrição de cadastro e alteração do número de CNPJ.

• Ao clicar em adicionar CNPJ, o usuário é direcionado para a tela de  cadastro de CNPJ. 

• Ao entrar na página de Cadastro de CNPJ, o usuário receberá uma mensagem de aviso para reforçar a restrição de troca de dados. 

• No formulário de cadastro de CNPJ, o usuário deverá informar

  • CNPJ - Campo obrigatório com máscara no formato 00.000.000/0000-00

  • Razão Social - Campo obrigatório com texto aberto.

  • Nome Fantasia - Campo opcional com texto aberto.

  • Ao clicar em Avançar, o CNPJ informado pelo usuário é associado a seu perfil e o usuário é retornado para a tela de perfil do usuário.

  • Na tela de perfil do usuário, passam a ser exibidos campos para o usuário preencher o endereço comercial da empresa e suas redes sociais.

Localização (pessoa jurídica)

• Busca automática de CEP 

  • Ao preencher com um número de CEP, o sistema deve fazer uma busca automática para preencher os campos de Endereço (logradouro), Bairro,  Estado e Cidade

  • O usuário poderá preencher as informações de Número e Complemento.

• Os dados poderão ser alterados pelo usuário.

• Estára disponíveis as seguintes perguntas para preenchimento:

  • Quantos funcionários trabalham na sua marcenaria?

    • Para a resposta, estarão disponíveis as seguintes opções, sendo permitido apenas uma escolha:

      • De 1 a 5 funcionários

      • De 5 a 15 funcionários

      • De 15 a 20 funcionários

      • Mais de 20 funcionários

  • Quais equipamentos você possui na sua marcenaria?

    • Para a resposta, estarão disponíveis as seguintes opções, sendo permitido múltipla escolha:

      • Esquadrejadeira

      • Seccionadora

      • CNC

      • Fitamento de borda manual

      • Fitamento de borda por equipamento

      • Outros - Opção para preenchimento manual

  • Você trabalha com projetos de:

    • Para a resposta, estarão disponíveis as seguintes opções, sendo permitido apenas uma escolha:

      • Arquiteto

      • Consumidor Final

      • Ambos

  • Qual ambiente é mais importante para o seu projeto de marcenaria? Coloque uma nota de 1 a 5, sendo 1 menos importante e 5 o mais importante.

    • Para a resposta, estarão disponíveis linhas de prioridade de 1 a 5

      • Quarto

      • Cozinha

      • Banheiro

      • Lavanderia

      • Sala

      • Outros - Opção de preenchimento manual

• Nenhum dos campos é obrigatório. 

ALTERAÇÃO DE EMAIL E CELULAR

• Para alterar seu endereço de email ou número de telefone, o usuário deverá passar por uma etapa de validação de dados.

Figura 29 - telas da troca de email

• A alteração de email somente poderá ser efetivada se o usuário informar o código recebido no novo endereço de email. 

Figura 30 - telas da troca de telefone

• A alteração de telefone celular somente poderá ser efetivada se o usuário informar o código recebido em seu novo número de telefone celular (via SMS). 

ALTERAÇÃO DE SENHA

• Para alterar a senha do usuário a partir da área logada. Ele deve informar a senha atual e informar uma nova senha e repetir a nova senha;

• Assim como no processo de criação/alteração de senha do usuário deslogado, há um validador online para indicar as regras de criação de nova senha que vai exibindo progressivamente os critérios atendidos

FALE COM O CLUBE

• Página contendo perguntas e respostas e um formulário de contato com o clube.

• As categorias/assuntos de perguntas, os enunciados das perguntas e os conteúdos de respostas deverão ser cadastradas/gerenciadas em CMS ou integradas com ZenDesk.

• A ordem de apresentação das perguntas deve ser gerenciável em CMS.

• O conteúdo de pergunta e resposta (Pergunta frequentes) poderá ser colocado em modo rascunho, para permitir sua edição antes da publicação.

Figura 31 - Página de perguntas

• Apresenta na margem esquerda uma lista de assuntos, com as categorias temáticas das perguntas. Na direita são apresentadas as perguntas relacionadas àquele tema.

• Ao clicar em uma das questões, o usuário é direcionado para a página interna da questão.

• Em mobile, a lista de assuntos é controlada em um droplist. Ao selecionar um dos assuntos, é apresentada a lista de perguntas correspondentes. 

• Após a listagem de perguntas, é apresentada uma caixa de texto para que o usuário entre em contato com o atendimento do clube. Clique em ‘Fale conosco’ abre um modal com um formulário de contato.

Figura 32 - modal de contato

• O formulário contém:

  • Campo Assunto (droplist com opções) de assunto. Pend Duratex: determinar as opções de assuntos.

  • Campo Nome: Pode ser obtido automaticamente a partir do perfil do usuário, mas pode ser alterado no formulário.

  • Enviar arquivo (usuário pode enviar um arquivo). Deve-se observar o limite de anexo em 10MB.

  • O envio de arquivos deve suportar arquivos de imagem (.jpg, .png), documentos em PDF e arquivo em formato .XML

  • Campo mensagem (Texto aberto com até 500 caracteres)

    • O total de caracteres poderá exigir ajuste, dependendo da integração com o Zendesk. 

  • Botão “Enviar mensagem” submete a mensagem para um email de CX da Duratex.  Pend Duratex: determinar o endereço de recebimento.

PÁGINA INTERNA DA RESPOSTA

Figura 33 - página interna da resposta

• Página que apresenta a resposta a uma pergunta frequente na plataforma.

• Os conteúdos de respostas deverão ser cadastradas/gerenciadas em CMS.

• O conteúdo poderá ser colocado em modo rascunho, para permitir sua edição antes da publicação.

• Cada página de resposta deve ser acessível através de uma url própria, para permitir que o conteúdo seja referenciado em outras páginas internas e direcionado para a pergunta correspondente.

• O botão Voltar na área superior deve direcionar o usuário para a página de origem anterior, não necessariamente a página da listagem de assuntos e perguntas, uma vez que o conteúdo poderá ser linkado a partir de outras páginas internas do site.

• Na área superior, apresenta enunciado da pergunta (título)

• O corpo poderá conter texto em formato Rich text e permitir a inclusão de tabela, imagem e/ou embed de vídeos de Youtube.

• Abaixo do texto da resposta, é apresentada a caixa de texto para contato com o atendimento do clube, com o mesmo comportamento descrito anteriormente.

PÁGINA DE REGULAMENTOS

Figura 34 - página de regulamentos

• Página que apresenta os regulamentos associados a campanhas, promoções e o regulamento geral do Clube Duratex.

• Na margem esquerda, apresenta as categorias de regulamentos para:

  • Campanhas. 

    • O clique abre na área central, a relação de campanhas do clube. 

    • Na sua parte superior é apresentada a Campanha padrão. 

      • Ao clicar em Saiba mais, será exibido o regulamento completo desta campanha

    • Abaixo do elemento de Regulamento Geral, serão exibidos filtros para exibição de Campanhas Ativas ou Encerradas.

      • Por default, as campanhas Ativas são exibidas.

    • Será apresentado também um filtro de região, composto de um droplist para seleção de uma UF (unidade da federação)

      • A lista apresentará todas as UFs. 

      • Por default, nenhuma UF aparece pré-selecionada

      • Ao selecionar uma UF, o filtro listará as campanhas específicas para a região selecionada e as campanhas de validade nacional.

        • O objetivo é evitar uma confusão do usuário que selecione um estado que não tenha campanha específica e ache que não há campanhas válidas para ele.

      • Ao selecionar uma UF, a lista de resultados irá priorizar as campanhas específicas da região, e depois listar as campanhas nacionais.

      • Caso a UF não tenha campanhas específicas, irá apresentar uma mensagem de feedback correspondente.

    • Na aba de campanhas ativas, são exibidos os regulamentos das campanhas válidas no ciclo atual e ou anterior, quando o usuário ainda pode enviar suas notas fiscais.

    • Na aba de campanhas encerradas, são exibidos os regulamentos das campanhas cujo período de arrecadação de nota fiscal já está encerrado.

    • Cada campanha ou promoção é representada por um card, que contém:

      • Nome da campanha/promoção;

      • Prazo de validade (início e fim no formato dd/mm/aaaa);

      • Resumo/descrição curta da campanha com até 2 linhas de texto;

      • Botão “saiba mais” que direciona para a interna do Regulamento

• Clube Duratex. O clique abre a página interna do regulamento, sem página intermediária, uma vez que é um regulamento permanentemente ativo na plataforma.

• O título, data de validade e descrição de cada elemento de Campanhas, Promoções é gerenciável em CMS, no cadastro da própria Campanha ou da promoção;

PÁGINA INTERNA DE REGULAMENTO GERAL DE PONTUAÇÃO DE DURACOINS

Figura 35 - página interna do regulamento

• Página que apresenta a regra padrão (campanha padrão) de pontuação do Clube Duratex.

  • As regras apresentadas nesta página devem ser específicas a pontuação padrão atribuída para cada modelo de painel. 

  • Na parte superior, apresenta o texto legal relativo a este aspecto do clube e abaixo apresenta a “tabela de conversão” de DuraCoins válida atualmente.

  • A Campanha Padrão não possui data de vencimento, mas pode sofrer modificações no número de Duracoins dados para cada modelo de painel. Por esta razão, é necessário um controle de datas de alteração para que o histórico de mudanças seja preservado e o usuário possa consultar qual era o valor de tabela em determinada data.

  • Por ser muito extensa, a tabela contará com um filtro na parte superior

Figura 36 - filtro por nome e droplist de Validade

• Filtro por nome:

  • O filtro funciona de forma dinâmica - ao digitar a partir do 3 caracter, a listagem abaixo irá se atualizar para mostrar apenas as linhas de produtos que correspondem a letra/sequência de letras digitadas pelo usuário, simplificando sua busca.

    • A busca funcionará tanto pelo Nome do Padrão quanto pelo nome da linha.

Figura 37 - exemplo de funcionamento do filtro dinâmico

• Validade:

  • O Droplist apresentará os intervalos de datas referentes a alterações de regras de pontuação, permitindo ao usuário identificar rapidamente a “cotação” de duracoins em momentos passados.

Figura 38 - exemplo do droplist de validade aberto

• Por default, a lista apresenta a tabela atual - com a atualização mais recente e sem prazo de validade futuro);

• Ao selecionar um intervalo de datas anterior, a tabela abaixo é refrescada para representar o valor de pontuação que era praticado naquele intervalo de datas.

PÁGINA INTERNA DE REGULAMENTO DE CAMPANHA MODIFICADA

Figura 39 - página interna do regulamento de campanha Modificada

• Página que apresenta o texto completo do regulamento de uma campanha modificada ou promoção na plataforma. 

• A campanha modificada é aquela que apresenta alterações de pontuação em cima da tabela padrão detalhada anteriormente.

  • As campanhas modificadas basicamente servirão para modificar a pontuação padrão (de DuraCoins) atribuídos para cada tipo de painel. Por ex. Se na campanha padrão, o painel Arenito da linha Conceito vale 5 pontos, a campanha modificada poderá dar 10 pontos durante o período de validade da campanha.

• O conteúdo da página é gerenciável em CMS:

  • Deve incluir o período de validade da campanha/promoção com data de início e fim.

  • Deve incluir o título da campanha/promoção

  • Deve incluir o texto descritivo da campanha/Promoção

• Cada página de regulamento deve ser acessível através de uma url própria, para permitir que o conteúdo seja referenciado em outras páginas internas e direcionado para a pergunta correspondente.

• O botão ‘Voltar’ na área superior deve direcionar o usuário para a página de origem anterior, não necessariamente a página da listagem de campanhas e/ou promoções, uma vez que o conteúdo poderá ser linkado a partir de outras páginas internas do site.

• Assim como na página de perguntas e respostas e na página interna da campanha/promoção, o texto terá formatação em Rich Text e também poderá incorporar imagens, vídeos de youtube, além de tabelas. 

• Ao final da página, traz um módulo de Fale Conosco, com o mesmo comportamento de modal e formulário, indicados na página de Perguntas e Respostas.

• No caso das campanhas, onde possuímos tabela de pontuação, a tabela de pontuação será gerada dinamicamente de acordo com as configurações da campanha.

SISTEMA DE NOTIFICAÇÕES

• Componente da área superior em desktop, apresenta as notificações da plataforma para o usuário.

  • A plataforma poderá apresentar notificações individuais para ações realizadas pelo usuário, como créditos de Duracoins, aviso de Duracoins próximas ao vencimento, reprovação de notas fiscais, etc. 

  • A plataforma poderá apresentar também notificações gerais, para os usuários, como início de novas campanhas, novas promoções, encerramento de promoções, novos conteúdos, etc.

  • Cada notificação deve ser clicável e direcionar o usuário para uma página interna do clube duratex (incluindo páginas da área deslogada)  onde ele poderá visualizar a informação indicada na notificação. 

  • As notificações são marcadas como lidas sempre que o usuário clica nelas para visualizar o conteúdo de destino.

  • O sistema deverá exibir todas as notificações não lidas e também as notificações lidas, porém para as notificações lidas deve-se estabelecer um limite de 15 dias (após esse prazo a notificação lida não é mais exibida).

CMS (CONTENT MANAGEMENT SYSTEM0

• O CMS servirá para alimentar a plataforma com informações sobre campanhas, promoções e todo o conteúdo textual, como perguntas e respostas e regulamentos. 

• Deve prever um ambiente de preview, onde o usuário administrador poderá visualizar a página publicada em ambiente de desktop e mobile.

• Alguns itens gerenciáveis do CMS vão contar com funcionalidades de “Rascunho” e “Preview”

  • Rascunho: É a possibilidade de criar um conteúdo, salvar e não deixar ele disponível para o público.

  • Preview: É a funcionalidade de pré-visualizar um conteúdo não publicado, por definição técnica, todo o conteúdo que possuir preview terá que possuir rascunho e para acessar o preview de um conteúdo o rascunho tem que ter sido salvo e após isso o usuário poderá acessar o preview com um acesso específico que pode ser feito através de um botão na interface de edição.

• Quais itens do CMS contam com Rascunho e Preview?

  • Página interna de Promoções / Regulamento de Promoções

  • Página interna de Campanhas / Regulamento de Campanhas

  • Perguntas Frequentes

• Itens parametrizáveis no CMS

  • REFERENTE A CHAPAS

    • Cadastro de Marca

    • Cadastro de Linhas

    • Cadastro de Dimensões

    • Cadastro de Espessuras

  • REFERENTE A CAMPANHAS E REGULAMENTOS

    • Campanhas Customizadas

    • Editar a Campanha Padrão

    • Limite Mensal de Duracoins

    • Texto do Regulamento Geral

    • Dicas

  • REFERENTE AO FALE COM O CLUBE 

    • Listas de Assuntos do Fale Conosco

    • Listas de Assuntos do FAQ

    • Listas de Perguntas do FAQ

    • Notificações Personalizadas

  • REFERENTE A GALERIA DE PROJETOS

    • Cadastro de Categorias

    • Cadastro de Projetos

  • REFERENTE A PARÂMETROS DO CLUBE

    • Lista de profissões associadas a cada resposta do perfil do usuário, de acordo com a resposta a pergunta “Trabalha em uma marcenaria”?

    • Ativação de trava para que o usuário possa submeter apenas notas do mesmo CPF e CNPJ cadastrados na conta.

    • Cadastro de Promoções

      • Disponível no Menu Promoções do Clube

    • Cadastro de Banners

      • Disponível em diversas telas do Clube

    • Cadastro de Equipamentos

      • Disponível na Seção de vinculação de um CNPJ a um Perfil

    • Cadastro de Grupos de Revendas

    • Parâmetros do Clube

      • Robô de Classificação Automática

      • Robô de Aprovação Automática

      • Limite de confiabilidade para aprovação automática (%)

      • Duracoins máxima por mês

      • Prazo de aceite de NFs (dias)

      • Intervalo de dias para apresentar a Modal de Consentimento

      • Mensagem para apresentar na Modal de Consentimento

      • Wallpaper da tela de login (1690px X 1450px)

      • Wallpaper da tela de login (750px X 890px)

      • Título do Wallpaper da tela de login

      • Descrição do Wallpaper da tela de login