Ver carrinho e finalizar compra

No menu existe um link chamado "Ver itens" do carrinho que leva para "/carrinho". Essa rota implementa 4 funcionalidades:

• Listar itens no carrinho
• Limpar carrinho
• Finalizar compra com e-mail/senha do cliente
• Link para "Quero me cadastrar" que é uma página/rota separada e cadastra o cliente caso não tenha cadastro ainda.

O conteúdo de src/routes/carrinho.svelte é:

<script>

import { carrinho } from '../stores/carrinho';

// dados do usuário
let usuario = {
  email: '',
  senha: ''

};

async function limparCarrinho() {
  $carrinho = [];
}

async function finalizarCompra() {
  const productIDs = $carrinho.map((product) => product.id);
  const res = await fetch(`http://localhost:3000/api/auth/client/sign_in`, {
      method: 'post',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        email: usuario.email,
        password: usuario.senha
      })
    });
    if (res.ok) {
      const json = await res.json();
      const client = json.client;
      const res2 = await fetch(`http://localhost:3000/api/sales`, {
        method: 'post',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${client.token}`
        },
        body: JSON.stringify({
          productIDs: productIDs
        })
      });
      if (res2.ok) {
        const json2 = await res2.json();
        alert(`Compra codigo ${json2.sale.id} realizada com sucesso`);
        $carrinho = [];
      } else {
        alert('Erro realizando compra')
      }
    } else {
      alert('Erro no e-mail/senha')
    }

}

</script>

<h2>Carrinho de compras</h2>

{#if $carrinho && $carrinho.length > 0}

<br/>
  Itens: {$carrinho.length}<br/>
  <button on:click={limparCarrinho}>
    Limpar Carrinho
    </button>
  <ul>
  {#each $carrinho as product}
    <li>
      <img width="100px" alt="imagem do produto" src="http://localhost:3000/images/{product.photo}" align="center"/>
      {product.name}
    </li>
  {/each}
  </ul>

  <h2>Finalizar compra</h2>

  <a href="/cadastro">Quero me cadastrar</a><br/>
  E-Mail: <input bind:value={usuario.email} /><br/>
  Senha: <input bind:value={usuario.senha} /><br/>
  <button on:click={finalizarCompra}>
    Finalizar Compra
  </button>

{:else}
  Carrinho vazio

{/if}

Essa página é a maior da loja on-line, mas observe que cada função realiza uma tarefa muito específca.

limparCarrinho() simplesmente atribui um array vazio à store $carrinho, e isso é suficiente para o limpar, inclusive no localStorage, como já vimos.

finalizarCompra() primeiramente extrai somente os IDs dos produtos que estão no carrinho e os guardam em productIDs. Logo em seguida, realiza 2 acessos à API: No primeiro ela tenta autenticar o cliente acessando http://localhost:3000/api/auth/client/sign_in com os dados digitados no formulário de finalizar compra (email e senha). Caso a autenticação passe com sucesso ele tenta fazer outro acesso a API, porém agora tentando criar uma venda acessando http://localhost:3000/api/sales com uma lista de IDs de produtos que foi extraído dos produtos do carrinho e também passando o token recebido no primeiro acesso (tentativa de autenticação).

Caso finalizarCompra() consiga realizar a operação com sucesso, ele ao final limpa o carrinho de compras com:

$carrinho = [];

Além dessas duas funções temos um HTML que simplesmente lista todos os produtos no carrinho, iterando nele com {#each $carrinho as product} e mostrando a sua imagem e nome.

No final do HTML temos um formulário para finalizar compras, solicitando o e-mail e senha do cliente e um botão que chama finalizarCompra().

Repare que também existe um link para "/cadastro" que é nossa última rota que precisa ser implementada.

Sua rota "/carrinho" deve ficar similar a essa (Exemplo já com 2 produtos quaisquer no carrinho):