Pull Request Nathan Garcia

README.md

@@ -1,92 +1,57 @@
 # Venha para Recomb
 
-O desafio é desenvolver um frontend para um módulo de pagamentos no sistema:
-
-*Considere que:*
-- Usuário (já “logado”) escolheu X produtos e clicou em “Pagar”
-
-*Você deve criar:*
-Uma página de pagamento (checkout) com múltiplos passos 
-que possibilite ao usuário:
-
-1 - Escolher a opção de pagamento:
-
- 	* Cartão de Crédito
- 	* Boleto
- 	* Pix
-
-2 - Preencher as informações adicionais dependendo do método:
-
- 	* Cartão de Crédito: Escolha da bandeira e preenchimento das informações (Número de cartão, código CVV, data de vencimento mm/aaaa e Nome do titular, CPF/CNPJ) e número de parcelas
-
-  	* Boleto: CPF, Nome, Sobrenome e e-mail
-
- 	* Pix: Deve pular a segunda etapa
-
-3 - Visualizar o instrumento de pagamento:
-
- 	* Cartão de Crédito: Página aguardando aprovação do pagamento pela operadora
-
- 	* Boleto: Deve exibir o código de barras do boleto, data de vencimento e botão para download do pdf do boleto
-
- 	* Pix: Deve exibir o QRCode e um contador decrescente para expiração do mesmo
-
-4 - Visualizar o resumo da compra:
-
- 	* Produtos comprados (foto, nome e descrição)
-
- 	* Método de pagamento escolhido
-
- 	* Data da compra
-
- 	* Previsão de entrega
-
-**Escolha as tecnologias que você vai usar e tente montar uma solução completa para rodar a aplicação.**
-
-Para enviar o resultado, basta realiazar um Fork deste repositório e abra um Pull Request, com seu nome.
-
-É importante comentar que deve ser enviado apenas o código fonte. Não aceitaremos códigos compilados.
-
-Por fim, o candidato deve atualizar o Readme.md com as seguintes informações:
-
- 1) Documentação da solução;
- 2) Lista dos diferenciais implementados
-
-## Avaliação
-
-O programa será avaliado levando em conta os seguintes critérios:
-|Critério                    |Valor   |
-|----------------------------|--------|
-|Legibilidade do Código 	   |10      |
-|Documentação do código 	   |10      |
-|Documentação da solução 	   |10      |
-|Componentização             |10      |
-|Preocupação com usabilidade |10      |
-|Total 	                     |50      |
-
-A pontuação do candidato será a soma dos valores obtidos nos critérios acima.
+**Documentação da solução de Nathan Garcia**
+Neste documento estará a descrição dos componentes e das funcionalidades do sistema.
+## Lógica de funcionamento e componentes 
+Iniciando pela lógica do fluxo entre as páginas desejadas, adicionei uma etapa adicional a esse fluxo,
+que consiste na escolha dos itens a serem comprados pelo usuário do sistema (já logado). O fluxo fica da seguinte maneira: 
+Usuário escolhe os produtos e vai pagar -> Seleciona a forma de pagamento -> Preenche dados necessários -> Finaliza o pagamento 
+-> Vê resumo do pedido.
+
+## Home e Navbar
+O usuário vê a página principal com itens a disposição para serem selecionados e comprados, 
+sendo cada item dentro de um card com seu nome, descrição e uma foto (Home.vue). Ao longo de todas 
+as páginas haverá também uma Navbar que mostrará o nome do sistema e indicando que "o Usuário está logado". 
+A navbar também possuirá o botão de "Pagar" e de "Resumo da Compra" apenas nas páginas necessárias (Navbar.vue).
+
+## Seleção de método de pagamento
+Após decidir pagar e clicar no botão, o usuário é redirecionado para a aba de pagamento, escolhendo entre
+os três campos referidos na descrição do sistema: Cartão de Crédito, Pix ou Boleto (SelectPayment.vue). Após selecionar,
+o usuário é redirecionado para a forma de pagamento selecionado.
+
+## Cartão de Crédito
+Formulário para preencher informações necessárias: Bandeira e preenchimento das informações do titular 
+(Número de cartão, código CVV, data de vencimento mm/aaaa e Nome do titular, CPF/CNPJ) e número de parcelas (CreditCardInfo.vue). 
+Após efetuar confirmar as informações e estiverem válidas, aparecerá uma tela mostrando que o sistema está aguardando a 
+confirmação da operadora (CreditCardFinishPayment.vue). Nessa mesma página, há o botão de Resumo da compra, que será detalhado a frente.
+
+## Boleto
+Formulário para preencher informações necessárias: CPF, Nome, Sobrenome e e-mail (BankingBilletInfo.vue). 
+Após efetuar confirmar as informações e estiverem válidas, aparecerá uma tela mostrando um código de barras para 
+efetuar o pagamento do boleto (imagem fictícia), junto com a expiração do mesmo e um botão para baixar o PDF 
+do boleto (CreditCardFinishPayment.vue). Nessa mesma página, há o botão de Resumo da compra, que será detalhado a frente.
+
+## Pix
+Como não necessita de informações adicionais, o usuário é levado diretamente para a finalização do pagamento,
+onde haverá um QR Code com um tempo de expiração para o mesmo (PixFinishPayment.vue).
+
+## Resumo
+Apresenta as seguintes informações (Summary.vue):
+* Produtos comprados (foto, nome e descrição)
+* Método de pagamento escolhido
+* Data da compra
+* Previsão de entrega 
+
+## Execução
+Entrar na página recomb-frontend e rodar o comando:
+```
+npm install
+```
+Logo após, apenas executa, no mesmo diretório, o comando:
+```
+npm run dev
+```
+E entre no link: 'http://localhost:5173/'
 
 ## Diferenciais
-
-O candidato pode aumentar a sua pontuação na seleção implementando um ou mais dos itens abaixo:
-|Item                              |Pontos Ganhos  |
-|----------------------------------|---------------|
-|Consumir API (válido mock)        |30             |
-|Implementar Clean Code 	   |20             |
-|Qualidade de Código com SonarQube |15             |
-|Implementar testes unitários 	   |15             |
-|Implementar testes e2e            |30             |
-|Implementar integração continua   |10             |
-|Implementar usando Vue            |10             |
-|Implementar usado Quasar          |20             |  
-|Total                             |150            |
-
-A nota final do candidato será acrescido dos pontos referente ao item implementado corretamente.
-
-## Penalizações
-
-O candidato será desclassificado nas seguintes situações:
-
-1) Submeter um solução que não funcione;
-2) Não cumprir os critérios presentes no seção Avaliação;
-3) Plágio;
+- Implementar usando Vue

recomb-frontend/.editorconfig

@@ -0,0 +1,9 @@
+[*.{js,jsx,mjs,cjs,ts,tsx,mts,cts,vue}]
+charset = utf-8
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+end_of_line = lf
+max_line_length = 100

recomb-frontend/.gitattributes

@@ -0,0 +1 @@
+* text=auto eol=lf

recomb-frontend/.gitignore

@@ -0,0 +1,30 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+*.tsbuildinfo

recomb-frontend/.vscode/extensions.json

@@ -0,0 +1,7 @@
+{
+  "recommendations": [
+    "Vue.volar",
+    "dbaeumer.vscode-eslint",
+    "EditorConfig.EditorConfig"
+  ]
+}

recomb-frontend/README.md

@@ -0,0 +1,35 @@
+# recomb-frontend
+
+This template should help get you started developing with Vue 3 in Vite.
+
+## Recommended IDE Setup
+
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
+
+## Customize configuration
+
+See [Vite Configuration Reference](https://vite.dev/config/).
+
+## Project Setup
+
+```sh
+npm install
+```
+
+### Compile and Hot-Reload for Development
+
+```sh
+npm run dev
+```
+
+### Compile and Minify for Production
+
+```sh
+npm run build
+```
+
+### Lint with [ESLint](https://eslint.org/)
+
+```sh
+npm run lint
+```

recomb-frontend/cypress.config.js

@@ -0,0 +1,9 @@
+import { defineConfig } from "cypress";
+
+export default defineConfig({
+  e2e: {
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+    },
+  },
+});

recomb-frontend/cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

recomb-frontend/cypress/support/commands.js

@@ -0,0 +1,25 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })

recomb-frontend/cypress/support/e2e.js

@@ -0,0 +1,17 @@
+// ***********************************************************
+// This example support/e2e.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'

recomb-frontend/eslint.config.js

@@ -0,0 +1,17 @@
+import js from '@eslint/js'
+import pluginVue from 'eslint-plugin-vue'
+
+export default [
+  {
+    name: 'app/files-to-lint',
+    files: ['**/*.{js,mjs,jsx,vue}'],
+  },
+
+  {
+    name: 'app/files-to-ignore',
+    ignores: ['**/dist/**', '**/dist-ssr/**', '**/coverage/**'],
+  },
+
+  js.configs.recommended,
+  ...pluginVue.configs['flat/essential'],
+]

recomb-frontend/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="icon" href="/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>

recomb-frontend/jsconfig.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "exclude": ["node_modules", "dist"]
+}