Jarilson

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": ["next/core-web-vitals", "next/typescript"]
+}

.gitignore

@@ -1,130 +1,40 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-lerna-debug.log*
-.pnpm-debug.log*
-
-# Diagnostic reports (https://nodejs.org/api/report.html)
-report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
-# Runtime data
-pids
-*.pid
-*.seed
-*.pid.lock
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-*.lcov
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
 
-# nyc test coverage
-.nyc_output
+# testing
+/coverage
 
-# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
+# next.js
+/.next/
+/out/
 
-# Bower dependency directory (https://bower.io/)
-bower_components
+# production
+/build
 
-# node-waf configuration
-.lock-wscript
+# misc
+.DS_Store
+*.pem
 
-# Compiled binary addons (https://nodejs.org/api/addons.html)
-build/Release
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
 
-# Dependency directories
-node_modules/
-jspm_packages/
+# env files (can opt-in for committing if needed)
+.env*
 
-# Snowpack dependency directory (https://snowpack.dev/)
-web_modules/
+# vercel
+.vercel
 
-# TypeScript cache
+# typescript
 *.tsbuildinfo
-
-# Optional npm cache directory
-.npm
-
-# Optional eslint cache
-.eslintcache
-
-# Optional stylelint cache
-.stylelintcache
-
-# Microbundle cache
-.rpt2_cache/
-.rts2_cache_cjs/
-.rts2_cache_es/
-.rts2_cache_umd/
-
-# Optional REPL history
-.node_repl_history
-
-# Output of 'npm pack'
-*.tgz
-
-# Yarn Integrity file
-.yarn-integrity
-
-# dotenv environment variable files
-.env
-.env.development.local
-.env.test.local
-.env.production.local
-.env.local
-
-# parcel-bundler cache (https://parceljs.org/)
-.cache
-.parcel-cache
-
-# Next.js build output
-.next
-out
-
-# Nuxt.js build / generate output
-.nuxt
-dist
-
-# Gatsby files
-.cache/
-# Comment in the public line in if your project uses Gatsby and not Next.js
-# https://nextjs.org/blog/next-9-1#public-directory-support
-# public
-
-# vuepress build output
-.vuepress/dist
-
-# vuepress v2.x temp and cache directory
-.temp
-.cache
-
-# Docusaurus cache and generated files
-.docusaurus
-
-# Serverless directories
-.serverless/
-
-# FuseBox cache
-.fusebox/
-
-# DynamoDB Local files
-.dynamodb/
-
-# TernJS port file
-.tern-port
-
-# Stores VSCode versions used for testing VSCode extensions
-.vscode-test
-
-# yarn v2
-.yarn/cache
-.yarn/unplugged
-.yarn/build-state.yml
-.yarn/install-state.gz
-.pnp.*
+next-env.d.ts

README.md

@@ -1,73 +1,151 @@
-# Desafio: Checkout para Compensação de Carbono
+# Checkout Carbon
 
-Neste desafio, você deverá recriar um layout de checkout fictício para compensação de carbono, conforme o design fornecido no Figma. Além disso, será necessário consumir dois endpoints da API:
+## App
 
-1. **Obter o valor do crédito**: Esse endpoint será responsável por retornar o valor do crédito de carbono, que deve ser exibido durante o checkout.
-2. **Simulação de processamento de pagamento**: O segundo endpoint será utilizado para simular o processamento de um pagamento após o usuário completar o checkout.
+- https://frontend-test-tree.vercel.app/
 
-Ambos os endpoints devem ser integrados na aplicação de forma que a experiência do usuário no checkout seja fluida e os valores exibidos no sistema estejam corretos.
+#### O Produto
+![Desktop 1](https://github.com/user-attachments/assets/9377c7af-033d-44ea-b3fe-bc9e0a1c1010)
+![Desktop 2](https://github.com/user-attachments/assets/715c3527-2a4b-4ba3-a42b-078d105d330e)
+![Desktop 4](https://github.com/user-attachments/assets/d7c7d36a-3de7-424e-9c56-f665ffc43f9f)
+![Desktop 5](https://github.com/user-attachments/assets/43dfb4d4-d08e-42c6-9206-629ef72a5295)
+![Desktop 6](https://github.com/user-attachments/assets/29a6d9f1-0eda-4d41-9693-bed89b62948b)
 
-## Requisitos
+## Principais Tecnologias utilizadas
 
-- **URL do Checkout:** A aplicação deve utilizar um URL no seguinte formato:
-````https://meu-teste.com/checkout?co2=1&cred=2````
+- Next
+- daisyUI
+- Tailwind
+- Typescript
 
-Onde:
-- **`co2`**: Representa a quantidade de carbono.
-- **`cred`**: Representa o valor unitario do crédito (ou creditPriceId).
+## Instalação
 
-O valor do crédito de carbono, que será atribuído ao parâmetro `cred` (ou `creditPriceId`), deve ser recuperado através do endpoint **`get credit price`**. Esse endpoint está documentado na pasta **`doc`** e retorna o valor do crédito de carbono associado ao `creditPriceId`. A aplicação deve realizar a requisição para esse endpoint para obter o valor correspondente e preenchê-lo dinamicamente o valor no checkout.
+- Clone o repositório com
+  ```
+  git clone https://github.com/Junior331/frontend-test-tree.git
+  ```
+- É necessario ter o Node 20x ou superior instalado
+- Para iniciar o servidor de desenvolvimento rode os comandos abaixo
+
+```
+yarn
+yarn dev
+```
+
+### To do
+
+- [x] Criar estrutura inicial do projeto
+- [x] Implementação de Theme e Style
+- [x] Criar componentes
+- [x] Criar tela Home
+- [x] Criar tela status da compra
+
+  ### Pages
+
+     - [x] Home
+     - [x] StatusTransaction
+
+  ### Components
+
+  ## Elements
+
+     - [x] Text  
+     - [x] Load  
+     - [x] Input 
+     - [x] Title 
+     - [x] Button
+     - [x] Select
+
+  ## Organism
+
+  - [x] Form
+  - [x] Layout
+  - [x] CreditCard
+
+  ## Modules
+
+     - [x] Header
+     - [x] Message
+
+### Descrição da estrutura do projeto
+
+- `Átomo (elements)`: Os átomos são componentes básicos e individuais, como botões, inputs, selects, etc. Um menu lateral geralmente é composto por diversos elementos, como ícones, textos, talvez até mesmo botões para navegação, e cada um desses elementos pode ser considerado um átomo. No entanto, o menu lateral como um todo é mais complexo do que apenas um único átomo.
+
+- `Molécula (modules)`: As moléculas são compostas por átomos e têm uma funcionalidade mais complexa. Um menu lateral poderia ser considerado uma molécula se fosse composto por vários átomos (como botões, ícones, etc.) agrupados de uma maneira específica para uma função específica. No entanto, um menu lateral geralmente representa uma parte maior e mais significativa da interface do usuário.
+
+- `Organismo (organism)`: Os organismos são componentes mais complexos que combinam vários átomos e/ou moléculas para formar uma parte significativa de uma interface. Um menu lateral se encaixa nessa definição, pois geralmente consiste em uma combinação de vários elementos (como itens de menu, ícones, títulos, etc.) agrupados para formar uma parte distinta e funcional da interface do usuário.
+
+- `Hooks`: Os hooks são funções especiais que permitem que você use o estado e outros recursos do React dentro de componentes de função. Eles foram introduzidos no React 16.8 para permitir o uso de estado e outras funcionalidades anteriormente disponíveis apenas em componentes de classe em componentes de função.
+
+- `Context`: A Context API é uma funcionalidade do React que permite compartilhar dados entre componentes sem a necessidade de passá-los explicitamente por meio de props. Ela é especialmente útil quando você tem dados que precisam ser acessados por muitos componentes em diferentes níveis da árvore de componentes. A Context API consiste em três partes principais: o provedor de contexto, o consumidor de contexto e o contexto em si.
+
+- `Pages`: As páginas geralmente representam as diferentes rotas da aplicação, cada uma correspondendo a uma URL específica. As páginas são componentes que são renderizados quando o usuário navega para uma determinada rota. Elas são responsáveis por exibir o conteúdo relevante para essa rota específica e podem conter outros componentes, como formulários, listas, gráficos, etc. As páginas geralmente são compostas por uma combinação de componentes de apresentação e lógica, e podem ser estruturadas de acordo com as necessidades da aplicação.
+
+- `Utils`: desempenha um papel crucial na organização e eficiência do código da aplicação. Ela abriga uma variedade de utilitários que são essenciais para diferentes partes da aplicação, ex: funções e arquivos auxiliares, como emptys, endpoints, types e funções auxiliares.
+
+- `Styles (Theme)`: O tema do projeto é uma parte fundamental da estilização da aplicação, definindo as cores, estilos tipográficos e outros aspectos visuais que são aplicados em toda a interface do usuário. Abaixo, descrevo os principais elementos do tema:
+
+### Estrutura do projeto
+
+    ├── src/
+    │   ├── app/
+    │   │   ├── assets/
+    │   │   │   ├── fonts/
+    │   │   │   │   └── index.ts
+    │   │   │   ├── icons/
+    │   │   │   │   ├── chip.svg
+    │   │   │   │   ├── logo.svg
+    │   │   │   │   ├── plant.svg
+    │   │   │   │   ├── placeholder.png
+    │   │   │   │   ├── error_card_buy.svg
+    │   │   │   │   ├── circular_spinner.png
+    │   │   │   │   ├── success_card_buy.svg
+    │   │   │   │   ├── summary_buy_logo.svg
+    │   │   │   │   └── index.ts
+    │   │   │   ├── images/
+    │   │   │   │   ├── import-png.d.ts
+    │   │   │   │   ├── import-svg.d.ts
+    │   │   │   │   ├── placeholder.png
+    │   │   │   │   ├── bg_credit_card.svg
+    │   │   │   │   ├── image_not_found.png.png
+    │   │   │   │   └── index.ts
+    │   │   ├── components/
+    │   │   │   ├── elements/
+    │   │   │   │   ├── Text
+    │   │   │   │   ├── Load
+    │   │   │   │   ├── Input
+    │   │   │   │   ├── Title
+    │   │   │   │   ├── Button
+    │   │   │   │   ├── Select
+    │   │   │   │   └── index.ts
+    │   │   │   ├── modules/
+    │   │   │   │   ├── Header/
+    │   │   │   │   ├── Message/
+    │   │   │   │   └── index.ts
+    │   │   │   ├── organism/
+    │   │   │   │   ├── Form/
+    │   │   │   │   ├── Layout/
+    │   │   │   │   ├── CreditCard/
+    │   │   │   │   └── index.ts
+    │   │   ├── context/
+    │   │   │   └── formContext.tsx
+    │   │   ├── hooks/
+    │   │   │   ├── useInstallmentOptions.ts
+    │   │   │   └── axiosAdapter.ts
+    │   │   ├── pages/
+    │   │   │   ├── (Home)/
+    │   │   │   └── layout.tsx
+    │   │   ├── state/
+    │   │   │   └── provider.tsx
+    │   │   ├── styles/
+    │   │   │   └── globals.css
+    │   │   ├── utils/
+    │   │   │   ├── utils.ts
+    │   │   │   ├── types.ts
+    │   │   │   ├── emptys.ts
+    │   │   │   └── endpoints.ts
+
+- O diretório `src/app/` contém todos os componentes do projeto, organizados de acordo com o padrão atomic.
+  Cada componente é classificado como `átomo (atom)`, `molécula (molecule)` ou `organismo (organism)`, conforme
+  sua complexidade e reutilização.
 
-A requisição ao endpoint `Get Credit Price` é necessária para garantir que o valor do crédito esteja sempre atualizado e de acordo com as especificações do sistema.
-
-FIGMA:
-[LAYOUT](https://www.figma.com/design/3dbuGSs6oCSLkPw9viSsfT/Front-end-Teste?node-id=0-1&t=KvUCyOT5Miiuh0D5-1)
-
-## Consumo da API Mock
-
-Use a API mock do Postman diponibilizada em /docs.
-
-### Importação da Coleção do Postman
-
-Siga as etapas abaixo para importar a coleção e testar os endpoints do checkout.
-
-1. Abra o Postman.
-2. Clique no botão **Importar** no canto superior esquerdo.
-![Onde clicar no postman para importar](./docs/image.png)
-3. Selecione o arquivo `Carbon_Checkout.postman_collection.json` localizado na pasta `doc/`.
-
-![Como deve ficar apos a importação.](./docs/image-2.png)
-4. Execute os testes com os parâmetros fornecidos para verificar o funcionamento correto da aplicação.
-
------------------------------------------------------
-
-## FRAMEWORK
-
-- [NEXT.JS](https://nextjs.org/docs)
-
------------------------------------------------------
-
-## ESTILOS
-
-- Os estilos deste teste devem ser feitos em styled-components (ou tailwind).
-- O projeto ser o mais proximo possivel do layout fornecido.
-- Deve ser totalmente responsivo.
-
-## REQUISITOS DIFERENCIAIS:
-
-- Back-end (para desenvolvedores full-stack)
-- Código performático.
-- Manutenibilidade do Código.
-- Utilizar inglês no projeto todo.
-- Fazer deploy do mesmo (heroku, netlify, aws, vercel, github pages ou outro da preferência).
-
-## GIT
-- Faça um fork deste repositório.
-- Criar uma branch para codar as suas features.
-- Criar um pull-request quando o teste for finalizado e submetido.
-
-## Contato técnico.
-- Junior Schmidt
-- GSS | Desenvolvedor Back-end & Tech Lead.
-- schmidt@repenso.eco
-- www.gss.eco

jest.config.js

@@ -0,0 +1,16 @@
+/* eslint-disable @typescript-eslint/no-require-imports */
+const nextJest = require("next/jest");
+
+const createJestConfig = nextJest({
+  // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
+  dir: "./",
+});
+
+// Add any custom config to be passed to Jest
+const customJestConfig = {
+  setupFilesAfterEnv: ["<rootDir>/jest.setup.js"],
+  testEnvironment: "jsdom",
+};
+
+// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
+module.exports = createJestConfig(customJestConfig);