The artis from pagarme

Estrutura de Componentes

Fizemos uma reunião para definir a estrutura de componentes do Checkout e chegamos no resultado abaixo. Essa estrutura não é definitiva, ela deve apenas nortear o desenvolvimento dos componentes.

Layout Mobile: https://app.zeplin.io/project/59e66a2ad508e5fb822f1776/screen/59e75a8daa565b58180d071b

Layout Desktop: https://app.zeplin.io/project/59e66a2ad508e5fb822f1776/screen/59e75a07380b7f748505409e

<Header>
  <Logo />
  <Title text='Dados Pessoais'/>
  <Button>X</Button>
</Header>

<ProgressBar step='1'/>

<Content>
  <Steps>
    <Step>
      <CustomerData>
        <Input
          name='name'
          icon={<Icon className='icon-customer'/>}
        />
      </CustomerData>
    </Step>
    <Step>
      <AddressData>
        <Input
          name='zipcode'
          icon={<Icon className='icon-zipcode'/>}
        />
      </AddressData>
    </Step>
    <Step>
      <PaymentMethod>
        <Radio title="Cartão" subtitle="Em até 4x"/>
        <Radio title="Boleto" subtitle="10% de desconto"/>
        <PaymentCard>
          <Input
            name='card-number'
            icon={<Icon className='icon-payment-card'/>}
          />
        </PaymentCard>
        <PaymentBoleto>
          <Button
            iconAlign='right'
            icon={<Icon className='icon-barcode'/>}>
            Copiar código de barras
          </Button>
          <Button
            iconAlign='right'
            icon={<Icon className='icon-mail'/>}>
            Encaminhar por e-mail
          </Button>
          <Button
            iconAlign='right'
            icon={<Icon className='icon-download'/>}>
            Salvar arquivo
          </Button>
        </PaymentBoleto>
      </PaymentMethod>
    </Step>
    <Step>
      <Result type='success'/>
    </Step>
  </Steps>
</Content>

<Footer>
  Valor a pagar: R$ 99,99
  <Button>Continuar</Button>
  Ambiente Seguro - Pagar.me
</Footer>

Install dependencies:

storybook/storybook-deployer
gh-pages

Add script in package.json

"deploy-storybook": "storybook-to-ghpages"

Enable GH Pages on gh-pages branch

https://github.com/mundipagg/mercurio-checkout/settings

Definição dos dados API (transaction, customer, billing, shipping...)

Precisamos definir uma interface para receber os dados de transaction, customer, billing, shipping e items.

Essa interface deve atender tanto a API da Pagar.me quanto a API da MundiPagg, será necessário 'casar' os dados iguais e definir uma interface final.

Dado que o backend está sob responsabilidade da MundiPagg, precisamos de uma call com eles para alinhar isso.

MVP: Criar validação de inputs

Estrutura inicial do projeto

Precisamos criar a estrutura inicial do projeto como:

bootstrap do create-react-app
storybook
redux
estrutura de pastas
travis
postcss
etc...

Ajustes Finos no style do projeto

E preciso deixar o mais próximo possível do layout exposto no Zeplin.

Temos um problema de CSS para resolver!

Conversando com algumas pessoas da Pagar.me, inclusive com aval do time de Segurança, optamos por não fazer o checkout dentro de um iframe. Porém, nos deparamos com um problema e não sabemos exatamente como resolver, então vamos discutir nessa issue soluções para isso.

O problema

Basicamente o checkout será montado dentro uma div especificada pelo cliente:

<html>
  <body>
    <!-- o cliente escolheu essa div para montar o checkout -->
    <div id="wrapper-checkout">
      <!-- o checkout cria uma outra div aqui dentro -->
      <div class="checkout">
        ...
      </div>
    </div> 
  </body>
</html>

O checkout terá seus próprios styles a partir da div com a classe .checkout. Porém, o cliente pode definir algum style do seu site com !important, e isso pode sobrescrever os styles do checkout, exemplo:

/* style do cliente */
h1 { font-size: 50px !important; }

/* style do checkout */
.checkout h1 { font-size: 30px; }

Como podemos resolver isso?

Componente Botão

Página "endereço de cobrança"

Desktop:
https://app.zeplin.io/project/59e66a2ad508e5fb822f1776/screen/5a2ed6da2e24168d02cfd178

Mobile:
https://app.zeplin.io/project/59e66a2ad508e5fb822f1776/screen/5a1dd5858225fb98afbfd83d

Tela de Pagamento

Escrever o README.md

Escrever um README para o projeto.

Dúvida sobre o Render do projeto

Questão levantada pelo @vcapretz no Slack:

só que o ponto é: um app react de verdade tem um public/index.html, que contém um div pai, ou mesmo só o body, o webpack processa isso e adiciona o js gerado nos scripts, dentro do header, pra fazer a parada funcionar.

o src/index.js tem o render master do react, que pega o componente paizão e renderiza na div root (ou dentro do body).

a questão aqui é: nós nao sabemos onde renderizar até o cliente dizer em qual elemento o checkout vai abrir. uma possível solução é tirarmos a opcao do cliente de escolher onde renderizar, e deixar com o nosso app a responsabilidade de criar uma div com uma classe/id aleatorio pra nao dar conflito com o html dele e renderizarmos lá.

outra questão que fico pensando: o JS final gerado pelo webpack na build nao faz com o que o React seja dependencia né? pode ser colocado em qualquer pagina que funciona?

Corrigir styles do componente Input

Conforme no zeplin: https://app.zeplin.io/project/59e66a2ad508e5fb822f1776/screen/59e8c0ba367525f917d5019c

Componente Input

Criar testes para ProgressBar

O ProgressBar ainda está sem testes de componente, precisamos adicionar alguns!

Adicionar Título: pages e progressbar

Tivemos algumas mudanças de layout e agora temos titulo na Progressbar e na Página:
https://app.zeplin.io/project/59e66a2ad508e5fb822f1776/screen/5a2ed6521e5fb8ed46013511

Especificações

Vamos manter a discussão das especificações neste tópico. Abaixo podemos comentar o que cada um de nós já tem no "checkout atual" e o que queremos pro próximo. :)

Content container

Stylelint não reclama nas builds

Assim como o eslint, o stylelint deve rodar junto com os comandos de build (storybook, build e start), atualmente se um erro de CSS é apitado ao rodar yarn lint ele não apita também nas builds.

O comportamento esperado é que seja mostrado o log também do stylelint

Corrigir styles do componente Button

Remove isDesktop from each file and place it under a helper file

This const is used (and declared) in a lot of different places, we should export it on a helper file and import where needed

Implementar Grid

Podemos aproveitar o componente Grid que o Pagar.me criou no projeto Pilot da nova dashboard.

https://github.com/pagarme/pilot

Icons (alinhar com Pilot)

Background quebrado quando tela não está em full screen

Ao abrir o checkout e abrir o console na parte debaixo, dá pra ver que ao fazer scroll até o fim o background não acompanha:

ficando essa parte branca no fim.

Imagino que alguma coisa não está com o height certo, tem q ser verificado

Componente MaskedInput

Precisamos desenvolver um componente de MaskedInput, ele basicamente vai ser um wrapper do input, mas contará com a opção de definir qual máscara ele recebe, para que possamos aplicar telefone, cep, cpf, etc

Página "dados pessoais"

Implementar Redux

Criar validação de inputs

BrowserStack - Testes em Browsers e S.O's

Precisamos desenvolver um bot que utiliza o serviço do BrowserStack para automatizar nossos testes e gerar prints de navegação das páginas do Checkout em diversos browsers e sistemas operacionais diferentes. Esses prints deverão ser analisados pela equipe do Checkout com objetivo de encontrar problemas críticos no layout.

Para isso, eu fiz um levantamento pelo Google Analytics dos Browsers e S.O's mais utilizados no Checkout da Pagar.me no período de 1 ano: entre 07/12/2016 à 07/12/2017.

Abaixo, segue os dados coletados que deverão nortear o desenvolvimento do bot:

Browsers

Em ordem, os mais utilizados e a versão mínima que devemos oferecer suporte:

Chrome - 55.0
Firefox - 38.0
Android - 30.0
Edge - 12.1
Safari - 9.0
Internet Explorer - 11.0
Opera - 42.0

S.O's

Em ordem, os mais utilizados e a versão mínima que devemos oferecer suporte:

Windows - 7
Android - 5.1.1
Mac OS X - 10.12 (Sierra)
iOS - 10.2.1

Botão "Voltar" no header deve sumir na primeira página

Atualmente o Header possui um botão com o ícone da flecha de voltar para navegar para trás, mas ele fica visível mesmo na primeira página e clicar nele não gera ação nenhuma.

Seria massa se ele sumisse ou simplesmente ficasse desabilitado se não houver mais páginas para trás.

(O mesmo acontece com o botão continuar, mas esse não é no Header)

Error Boundary

Precisamos criar um Error Boundary para exibir mensagens de erro amigáveis ao usuário. Podemos usar um método chamado componentDidCatch adicionado no lifecycle do React 1.6.

Exemplo: https://reactjs.org/blog/2017/07/26/error-handling-in-react-16.html

Atualizar styles do componente Button

Conforme no zeplin: https://app.zeplin.io/project/59e66a2ad508e5fb822f1776/screen/59e8c0ba367525f917d5019c

Move `./src/config/ErrorReport.js` to `./config`?

Is there a reason for the ErrorReport config file be placed under the src folder instead of the config folder directly?

This way we are creating two config folders and IMO we could move the ErrorReport file outside the src folder!

Let me know if there's a specific reason, otherwise I will open a PR changing it 😃

teste

Componente Icon

Remover autoprefixer do webpack

como descrito na imagem acima, o postcss-next já tem o autoprefixer e não precisamos dele separadamente.

Implementar estratégia de tema

Pretendemos usar a seguinte lib para theming: https://github.com/javivelasco/react-css-themr

Preenchimento automático dos campos a partir do CEP

Quando digitar o CEP buscar por nome de rua, bairro, cidade e estado. Mudar o foco para o input de número da casa.

Aqui teremos que usar container com a lógica de busca e preenchimento

Ao recompilar Storybook, página fica sem estilização do tema

Erro acontece ao modificar qualquer CSS/JS, logo que ele recompila tudo.

Tela de confirmação

MVP: Corrigir styles do componente Button

Telas MVP Checkout

O que é o MPV de Checkout?
Corresponde ao processo de finalização de uma compra usando cartão de crédito ou boleto bancário. Faremos de forma responsiva, então precisaremos das telas desktop e mobile, mantendo consistência entre eles.

Telas MVP

Tema: Dark

Cor default: Situação/cor default caso o lojista não escolha a cor primária do checkout.

Erros: exemplo campos com dados inconsistentes.

Textos: atualizar com textos finais revisados pela Bia

Passos:

Identificação do cliente

Dados pessoais (Nome, E-mail, CPF, DDD e telefone);

Endereço de cobrança

CEP, Rua, número, complemento, bairro, cidade, estado;

Endereço de entrega

mesmo endereço de cobrança e outro endereço já cadastrado;
fluxo de excluir endereço cadastrado;
fluxo de editar endereço cadastrado;
fluxo de cadastrar novo endereço de entrega.

Forma de pagamento

Cartão de crédito:

Boleto bancário

É necessário ter uma confirmação/ clique para gerar o boleto (manter consistência do fluxo de confirmação da tela de cartão de crédito)

Mensagem feedback da transação

Mensagem de sucesso de Cartão de crédito

Mensagem de sucesso de Boleto
Inserir as funcionalidades de:

Salvar arquivo
Encaminhar por email (comportamento)
Copiar código de barras (comportamento)
Mensagem aguardando confirmação

Mensagem de transação recusada
Referência de textos e situações de erro: pagarme-checkout #142

Mensagem de recusa de Cartão de crédito
Mensagem de recusa de Boleto

Criar parâmetro "customerData"

No checkout 1.0 e 1.1 uma das propriedades que o cliente passa é data-customer-data, que habilita os passos necessários para que sejam incluídas informações sobre o comprador e serão posteriormente enviadas para o antifraude.

Isso é algo que pensamos nesse checkout? Se sim, talvez seja necessário criar uma task para que possamos inserir no App alguma prop que valide se deve ou não mostrar os primeiros passos

Ref.: https://github.com/pagarme/mercurio/issues/5

Nome do projeto

Nosso squad acredita que mercurio-checkout não é um nome adequado para o projeto. O nome mercurio foi dado ao nosso squad e é um nome apenas para uso interno aqui na Pagar.me.

Chegou a hora de fazermos um brainstorm! Então convocamos todo mundo para comentar nessa issue sugerindo um nome legal para o projeto. Depois disso podemos fazer uma votação para escolher o nome final.

Se você tem uma sugestão comente aqui, toda ideia é bem vinda =)

pagarme / artis Goto Github PK

artis's People

Contributors

Stargazers

Watchers

Forkers

artis's Issues

Install dependencies:

Add script in package.json

Enable GH Pages on gh-pages branch

O problema

Browsers

S.O's

Recommend Projects

Recommend Topics

Recommend Org