PDV - Realizar Vendas (src/Sale.js)

Antes de mais nada é importante lembrar que você pode executar o projeto a qualquer momento com o comando:

npm start

Pode ser usado o yarn start também, tanto faz.

O componente Sale, implementado em src/Sale.js é responsável por criar uma nova venda para um cliente na loja física. Nele você pode selecionar um cliente de uma lista, selecionar produtos e inserir em uma lista de itens da venda e finalizar a venda para o cliente.

Trata-se do componente mais complexo do PDV. Ele realiza várias operações e chamadas na API para cada uma de suas operações.

Como você deve lembrar, o componente principal (src/App.js) verifica se existe um employee logado e se existir ele retorna o Sale como componente que será exibido, ou seja, quando o usuário já está logado, o Sale é o que será exibido e visualmente ele é da como na imagem abaixo:

Vamos analisar cada parte.

Primeiro se tem um título com o nome PetTopStore - PDV

Depois existe o texto "Logado como "João Vendedor". Esse é o nome do employee logado que o App.js gerencia e que foi passado como prop (atributo) para o Sale, que mostra o seu nome.

O Botão "Sair do sistema", quando clicado, realiza uma operação super simples: Ele executa a função "props.setEmployee(null)". Essa função está implementada em App.js, e foi passada para o Sale por atributo (props). Efetivamente o que acontece é que o employee logado é setado para nulo e então o React reage a essa mudança e o App.js não exibe mais o componente Sale, e sim o Login.

Logo após temos uma seção chamada "Nova venda"

Essa seção tem inicialmente um Texto "Selecione um cliente", seguido de um SELECT com a lista de clientes cadastrados que veio da API. Esse cliente selecionado será o que será o cliente da venda que o funcionário está cadastrando.

Logo depois temos um botão chamado "Cadastrar um novo cliente". Esse botão faz com que outro componente (AddClient) seja exibido com um simples formulário de cadastro de cliente. É passado para o AddClient uma função que ele pode chamar para dizer que um novo cliente foi cadastrada(clientCreated) e outra para cancelar a operação(cancelCreateClient). Quando um cliente é cadastrado com sucesso pelo AddClient, ele fica automaticamente como o cliente selecionado no select de cliente Em seguida temos uma seção chamada "Inserir item na venda". Basicamente existe um SELECT com uma lista de produtos. O funcionário deve selecionar um produto e clicar em "[+] Inserir" O que faz com que esse produto entre na lista de produtos que fazem parte da venda atualmente sendo cadastrada. Vale lembrar que essa inserção de itens na venda ainda não foi persistida no banco de dados pois ela acontece somente no navegador, que vai exibindo a lista com os nomes dos produtos. Ao se inserir alguns produtos em "produtos inseridos" o formulário fica da seguinte forma:

Veja que no estado atual do componente Sale na imagem acima, existe um cliente selecionado chamado Amanda e 2 produtos na lista de produtos inseridos. A variável insertProductIDs é que guarda os IDs dos produtos que estão nessa listagem.

Quando se clica em "Finalizar venda" o cliente selecionado e os IDs dos produtos selecionados são enviados para a API para se criar uma nova venda (sale) e um logo em seguida é apresentada uma mensagem de sucesso e o formulário é limpo para a próxima venda: