|
|
@@ -2,90 +2,141 @@
|
|
|
import { onMount } from 'svelte';
|
|
|
import { goto } from '$app/navigation';
|
|
|
import { page } from '$app/stores';
|
|
|
+ import { browser } from '$app/environment';
|
|
|
+
|
|
|
+ import trash_icon from '$lib/assets/trash_white.svg';
|
|
|
+ import arrow_back from '$lib/assets/arrow_back.svg';
|
|
|
+ import add_green from '$lib/assets/add_green.svg';
|
|
|
+ import cart_icon from '$lib/assets/cart_icon.svg';
|
|
|
+
|
|
|
+ let token = null;
|
|
|
+ let company = null;
|
|
|
+ let orderId = null;
|
|
|
+ let tableIdNum = null;
|
|
|
+
|
|
|
+ if (browser) {
|
|
|
+ token = localStorage.getItem('token');
|
|
|
+ company = Number(localStorage.getItem('company'));
|
|
|
+ orderId = Number(localStorage.getItem('order'));
|
|
|
+ tableIdNum = localStorage.getItem('table');
|
|
|
+ }
|
|
|
|
|
|
let selectedCategory = null;
|
|
|
let isPaymentModalOpen = false;
|
|
|
let selectedPaymentMethod = null;
|
|
|
|
|
|
- let tableIdNum = 0;
|
|
|
- let currentTable = undefined;
|
|
|
- let currentOrder = undefined;
|
|
|
+ let orderItems = [];
|
|
|
let products = [];
|
|
|
let categories = [];
|
|
|
|
|
|
- $: tableIdNum = parseInt($page.params.tableId || '0');
|
|
|
+ $: totalAmount = orderItems.reduce(
|
|
|
+ (sum, item) => sum + Number(item.product_details?.product_price ?? 0) * (item.quantity ?? 1),
|
|
|
+ 0
|
|
|
+ );
|
|
|
|
|
|
- async function fetchTableAndOrder() {
|
|
|
+ async function fetchOrderItems() {
|
|
|
try {
|
|
|
- const resTable = await fetch(`/api/table/${tableIdNum}`);
|
|
|
- currentTable = await resTable.json();
|
|
|
+ const myHeaders = new Headers();
|
|
|
+ myHeaders.append('Authorization', `Bearer ${token}`);
|
|
|
+ myHeaders.append('Content-Type', 'application/json');
|
|
|
+
|
|
|
+ if (orderId) {
|
|
|
+ const rawItems = JSON.stringify({
|
|
|
+ order_id: orderId,
|
|
|
+ company_id: company
|
|
|
+ });
|
|
|
|
|
|
- if (currentTable?.orderId) {
|
|
|
- const resOrder = await fetch(`/api/order/${currentTable.orderId}`);
|
|
|
- currentOrder = await resOrder.json();
|
|
|
+ const resItems = await fetch('https://dev2.mixtech.dev.br/order_item/get', {
|
|
|
+ method: 'POST',
|
|
|
+ headers: myHeaders,
|
|
|
+ body: rawItems
|
|
|
+ });
|
|
|
+ const itemsResult = await resItems.json();
|
|
|
+ orderItems = itemsResult.data || [];
|
|
|
+ orderItems = orderItems.map((item) => ({ ...item, quantity: item.quantity ?? 1 }));
|
|
|
} else {
|
|
|
- currentOrder = undefined;
|
|
|
+ orderItems = [];
|
|
|
}
|
|
|
} catch (error) {
|
|
|
- console.error('Erro ao buscar dados da mesa:', error);
|
|
|
+ console.error('Erro ao buscar itens do pedido:', error);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
async function fetchProductsAndCategories() {
|
|
|
try {
|
|
|
- const res = await fetch('/api/products');
|
|
|
- const data = await res.json();
|
|
|
- products = data.products;
|
|
|
- categories = data.categories;
|
|
|
+ const myHeaders = new Headers();
|
|
|
+ myHeaders.append('Authorization', `Bearer ${token}`);
|
|
|
+ myHeaders.append('Content-Type', 'application/json');
|
|
|
+
|
|
|
+ const raw = JSON.stringify({
|
|
|
+ company_id: company
|
|
|
+ });
|
|
|
+
|
|
|
+ const requestOptions = {
|
|
|
+ method: 'POST',
|
|
|
+ headers: myHeaders,
|
|
|
+ body: raw,
|
|
|
+ redirect: 'follow'
|
|
|
+ };
|
|
|
+
|
|
|
+ const resCategories = await fetch('https://dev2.mixtech.dev.br/category/get', requestOptions);
|
|
|
+ const categoriesResult = await resCategories.json();
|
|
|
+ categories = categoriesResult.data || [];
|
|
|
+
|
|
|
+ const resProducts = await fetch('https://dev2.mixtech.dev.br/product/get', requestOptions);
|
|
|
+ const productsResult = await resProducts.json();
|
|
|
+ products = productsResult.data || [];
|
|
|
} catch (error) {
|
|
|
- console.error('Erro ao buscar produtos:', error);
|
|
|
+ console.error('Erro ao buscar produtos e categorias:', error);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
onMount(async () => {
|
|
|
- await fetchTableAndOrder();
|
|
|
+ await fetchOrderItems();
|
|
|
await fetchProductsAndCategories();
|
|
|
});
|
|
|
|
|
|
$: if (categories.length > 0 && !selectedCategory) {
|
|
|
- selectedCategory = categories[0].name;
|
|
|
- }
|
|
|
-
|
|
|
- $: if (currentTable && currentTable.status === 'FREE') {
|
|
|
- console.warn('Mesa n\u00e3o est\u00e1 ocupada ou foi liberada.');
|
|
|
- goto('/tables');
|
|
|
+ selectedCategory = categories[0].category_name;
|
|
|
}
|
|
|
|
|
|
$: filteredProducts = selectedCategory
|
|
|
- ? products.filter((p) => p.category.name === selectedCategory)
|
|
|
+ ? products.filter((p) => {
|
|
|
+ const cat = categories.find((c) => c.category_id === p.category_id);
|
|
|
+ return cat?.category_name === selectedCategory;
|
|
|
+ })
|
|
|
: products;
|
|
|
|
|
|
async function handleAddItem(product) {
|
|
|
- const payload = { productId: product.id, quantity: 1 };
|
|
|
- await fetch(`/api/order/${currentTable.orderId}/add-item`, {
|
|
|
+ const myHeaders = new Headers();
|
|
|
+ myHeaders.append('Authorization', `Bearer ${token}`);
|
|
|
+ myHeaders.append('Content-Type', 'application/json');
|
|
|
+ const payload = {
|
|
|
+ company_id: company,
|
|
|
+ order_id: orderId,
|
|
|
+ product_id: product.product_id
|
|
|
+ };
|
|
|
+ await fetch('https://dev2.mixtech.dev.br/order_item/create', {
|
|
|
method: 'POST',
|
|
|
- headers: { 'Content-Type': 'application/json' },
|
|
|
+ headers: myHeaders,
|
|
|
body: JSON.stringify(payload)
|
|
|
});
|
|
|
- await fetchTableAndOrder();
|
|
|
- }
|
|
|
-
|
|
|
- async function updateItemQuantity(tableId, itemId, newQuantity) {
|
|
|
- await fetch(`/api/order/${currentTable.orderId}/update-item`, {
|
|
|
- method: 'PUT',
|
|
|
- headers: { 'Content-Type': 'application/json' },
|
|
|
- body: JSON.stringify({ itemId, quantity: newQuantity })
|
|
|
- });
|
|
|
- await fetchTableAndOrder();
|
|
|
+ await fetchOrderItems();
|
|
|
}
|
|
|
|
|
|
async function removeItemFromOrder(tableId, itemId) {
|
|
|
- await fetch(`/api/order/${currentTable.orderId}/remove-item`, {
|
|
|
+ const myHeaders = new Headers();
|
|
|
+ myHeaders.append('Authorization', `Bearer ${token}`);
|
|
|
+ myHeaders.append('Content-Type', 'application/json');
|
|
|
+ await fetch('https://dev2.mixtech.dev.br/order_item/delete', {
|
|
|
method: 'DELETE',
|
|
|
- headers: { 'Content-Type': 'application/json' },
|
|
|
- body: JSON.stringify({ itemId })
|
|
|
+ headers: myHeaders,
|
|
|
+ body: JSON.stringify({
|
|
|
+ company_id: company,
|
|
|
+ item_id: itemId
|
|
|
+ })
|
|
|
});
|
|
|
- await fetchTableAndOrder();
|
|
|
+ await fetchOrderItems();
|
|
|
}
|
|
|
|
|
|
async function handlePaymentConfirm() {
|
|
|
@@ -93,205 +144,205 @@
|
|
|
console.warn('Selecione uma forma de pagamento');
|
|
|
return;
|
|
|
}
|
|
|
- await fetch(`/api/order/${currentTable.orderId}/close`, {
|
|
|
+ const myHeaders = new Headers();
|
|
|
+ myHeaders.append('Authorization', `Bearer ${token}`);
|
|
|
+ myHeaders.append('Content-Type', 'application/json');
|
|
|
+ await fetch('https://dev2.mixtech.dev.br/order/close', {
|
|
|
method: 'POST',
|
|
|
- headers: { 'Content-Type': 'application/json' },
|
|
|
- body: JSON.stringify({ paymentMethod: selectedPaymentMethod })
|
|
|
+ headers: myHeaders,
|
|
|
+ body: JSON.stringify({
|
|
|
+ company_id: company,
|
|
|
+ order_id: orderId,
|
|
|
+ payment_method: selectedPaymentMethod
|
|
|
+ })
|
|
|
});
|
|
|
isPaymentModalOpen = false;
|
|
|
goto('/tables');
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
-<!-- restante do componente permanece o mesmo -->
|
|
|
-
|
|
|
-{#if !currentTable || (currentTable.status !== 'FREE' && !currentOrder)}
|
|
|
- <div class="py-10 text-center">Carregando...</div>
|
|
|
-{:else}
|
|
|
- <div class="container mx-auto">
|
|
|
- <div class="mb-6 flex items-center">
|
|
|
- <button
|
|
|
- on:click={() => goto('/tables')}
|
|
|
- class="mr-4 rounded-lg bg-gray-800 p-2 hover:bg-gray-700"
|
|
|
- >
|
|
|
- <!-- <img src="/icons/arrow-left.svg" alt="Voltar" class="w-5 h-5" /> -->
|
|
|
- </button>
|
|
|
- <h1 class="text-2xl font-bold">Mesa {tableIdNum}</h1>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
|
|
|
- <div class="overflow-hidden rounded-lg bg-gray-800 shadow-lg lg:col-span-2">
|
|
|
- <div class="bg-gray-700 p-4">
|
|
|
- <h2 class="text-lg font-semibold">Adicionar Produtos</h2>
|
|
|
- </div>
|
|
|
+<div class="container mx-auto">
|
|
|
+ <div class="mb-6 flex items-center">
|
|
|
+ <button
|
|
|
+ on:click={() => goto('/dashboard/commands')}
|
|
|
+ class="mr-4 rounded-lg bg-gray-800 p-2 hover:bg-gray-700"
|
|
|
+ >
|
|
|
+ <img src={arrow_back} alt="Voltar" class="h-5 w-5" />
|
|
|
+ </button>
|
|
|
+ <h1 class="text-2xl font-bold">Mesa {tableIdNum}</h1>
|
|
|
+ </div>
|
|
|
|
|
|
- <div class="bg-gray-750 flex overflow-x-auto border-b border-gray-700 p-2">
|
|
|
- {#each categories as category}
|
|
|
- <button
|
|
|
- class="mx-1 whitespace-nowrap rounded-md px-4 py-2 text-sm font-medium {selectedCategory ===
|
|
|
- category.name
|
|
|
- ? 'bg-indigo-600 text-white'
|
|
|
- : 'bg-gray-700 text-gray-300 hover:bg-gray-600'}"
|
|
|
- on:click={() => (selectedCategory = category.name)}
|
|
|
- >
|
|
|
- {category.name}
|
|
|
- </button>
|
|
|
- {/each}
|
|
|
- </div>
|
|
|
+ <div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
|
|
|
+ <div class="overflow-hidden rounded-lg bg-gray-800 shadow-lg lg:col-span-2">
|
|
|
+ <div class="bg-gray-700 p-4">
|
|
|
+ <h2 class="text-lg font-semibold">Adicionar Produtos</h2>
|
|
|
+ </div>
|
|
|
|
|
|
- <div
|
|
|
- class="grid max-h-[calc(100vh-400px)] grid-cols-2 gap-4 overflow-y-auto p-4 sm:grid-cols-3 md:grid-cols-4"
|
|
|
- >
|
|
|
- {#each filteredProducts as product}
|
|
|
- <button
|
|
|
- class="hover:bg-gray-650 rounded-lg bg-gray-700 p-4 text-left"
|
|
|
- on:click={() => handleAddItem(product)}
|
|
|
- >
|
|
|
- <div class="flex h-full flex-col">
|
|
|
- <h3 class="mb-2 line-clamp-2 font-medium">{product.name}</h3>
|
|
|
- <div class="mt-auto flex items-center justify-between">
|
|
|
- <span class="font-semibold text-emerald-400">R$ {product.price.toFixed(2)}</span>
|
|
|
- <!-- <img src="/icons/plus.svg" alt="Adicionar" class="w-5 h-5 text-emerald-400" /> -->
|
|
|
- </div>
|
|
|
- {#if product.sendToKitchen}
|
|
|
- <span class="mt-2 rounded-full bg-yellow-800 px-2 py-0.5 text-xs text-yellow-300"
|
|
|
- >Cozinha</span
|
|
|
- >
|
|
|
- {/if}
|
|
|
- </div>
|
|
|
- </button>
|
|
|
- {/each}
|
|
|
- </div>
|
|
|
+ <div class="bg-gray-750 flex overflow-x-auto border-b border-gray-700 p-2">
|
|
|
+ {#each categories as category}
|
|
|
+ <button
|
|
|
+ class="mx-1 whitespace-nowrap rounded-md px-4 py-2 text-sm font-medium {selectedCategory ===
|
|
|
+ category.category_name
|
|
|
+ ? 'bg-indigo-600 text-white'
|
|
|
+ : 'bg-gray-700 text-gray-300 hover:bg-gray-600'}"
|
|
|
+ on:click={() => (selectedCategory = category.category_name)}
|
|
|
+ >
|
|
|
+ {category.category_name}
|
|
|
+ </button>
|
|
|
+ {/each}
|
|
|
</div>
|
|
|
|
|
|
<div
|
|
|
- class="flex h-full flex-col overflow-hidden rounded-lg bg-gray-800 shadow-lg md:h-[calc(100vh-200px)]"
|
|
|
+ class="grid max-h-[calc(100vh-400px)] grid-cols-2 gap-4 overflow-y-auto p-4 sm:grid-cols-3 md:grid-cols-4"
|
|
|
>
|
|
|
- <div class="bg-gray-700 p-4">
|
|
|
- <h2 class="text-lg font-semibold">Comanda</h2>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="flex-1 overflow-y-auto p-4">
|
|
|
- {#if currentOrder?.items.length === 0}
|
|
|
- <div class="py-6 text-center text-gray-400">
|
|
|
- <!-- <img src="/icons/shopping-cart.svg" class="w-10 h-10 mx-auto mb-2 opacity-50" alt="Nenhum item" /> -->
|
|
|
- <p>Nenhum item adicionado</p>
|
|
|
- </div>
|
|
|
- {:else}
|
|
|
- {#each currentOrder.items as item, index}
|
|
|
- <div class="bg-gray-750 flex items-center justify-between rounded-lg p-3">
|
|
|
- <div class="flex-1">
|
|
|
- <h3 class="font-medium">{item.product.name}</h3>
|
|
|
- <p class="text-sm text-gray-400">
|
|
|
- R$ {(item.priceAtOrder ?? 0).toFixed(2)} x {item.quantity}
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- <div class="flex items-center space-x-2">
|
|
|
- <button
|
|
|
- on:click={() => updateItemQuantity(tableIdNum, item.id, item.quantity - 1)}
|
|
|
- class="rounded bg-gray-700 p-1 hover:bg-gray-600"
|
|
|
- >
|
|
|
- <!-- <img src="/icons/minus.svg" class="w-4 h-4" alt="Diminuir" /> -->
|
|
|
- </button>
|
|
|
- <span class="w-8 text-center">{item.quantity}</span>
|
|
|
- <button
|
|
|
- on:click={() => updateItemQuantity(tableIdNum, item.id, item.quantity + 1)}
|
|
|
- class="rounded bg-gray-700 p-1 hover:bg-gray-600"
|
|
|
- >
|
|
|
- <!-- <img src="/icons/plus.svg" class="w-4 h-4" alt="Aumentar" /> -->
|
|
|
- </button>
|
|
|
- <button
|
|
|
- on:click={() => removeItemFromOrder(tableIdNum, item.id)}
|
|
|
- class="ml-2 rounded bg-red-700 p-1 hover:bg-red-600"
|
|
|
- >
|
|
|
- <!-- <img src="/icons/trash.svg" class="w-4 h-4" alt="Remover" /> -->
|
|
|
- </button>
|
|
|
- </div>
|
|
|
+ {#each filteredProducts as product}
|
|
|
+ <button
|
|
|
+ class="hover:bg-gray-650 rounded-lg bg-gray-700 p-4 text-left"
|
|
|
+ on:click={() => handleAddItem(product)}
|
|
|
+ >
|
|
|
+ <div class="flex h-full flex-col">
|
|
|
+ <h3 class="mb-2 line-clamp-2 font-medium">
|
|
|
+ {product.product_name ?? 'Nome Indisponível'}
|
|
|
+ </h3>
|
|
|
+ <div class="mt-auto flex items-center justify-between">
|
|
|
+ <span class="font-semibold text-emerald-400"
|
|
|
+ >R$ {Number(product.product_price ?? 0).toFixed(2)}</span
|
|
|
+ >
|
|
|
+ <img src={add_green} alt="Adicionar" class="h-5 w-5 text-emerald-400" />
|
|
|
</div>
|
|
|
- {/each}
|
|
|
- {/if}
|
|
|
- </div>
|
|
|
+ {#if product.product_is_kitchen}
|
|
|
+ <span class="mt-2 rounded-full bg-yellow-800 px-2 py-0.5 text-xs text-yellow-300"
|
|
|
+ >Cozinha</span
|
|
|
+ >
|
|
|
+ {/if}
|
|
|
+ </div>
|
|
|
+ </button>
|
|
|
+ {/each}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
|
|
|
- <div class="bg-gray-750 border-t border-gray-700 p-4">
|
|
|
- <div class="mb-2 flex justify-between">
|
|
|
- <span class="font-medium">Subtotal:</span>
|
|
|
- <span>R$ {currentOrder?.totalAmount.toFixed(2)}</span>
|
|
|
+ <div
|
|
|
+ class="flex h-full flex-col overflow-hidden rounded-lg bg-gray-800 shadow-lg md:h-[calc(100vh-200px)]"
|
|
|
+ >
|
|
|
+ <div class="bg-gray-700 p-4">
|
|
|
+ <h2 class="text-lg font-semibold">Comanda</h2>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="flex-1 overflow-y-auto p-4">
|
|
|
+ {#if orderItems.length === 0}
|
|
|
+ <div class="py-6 text-center text-gray-400">
|
|
|
+ <img src={cart_icon} class="mx-auto mb-2 h-10 w-10 opacity-50" alt="Nenhum item" />
|
|
|
+ <p>Nenhum item adicionado</p>
|
|
|
</div>
|
|
|
+ {:else}
|
|
|
+ {#each orderItems as item, index}
|
|
|
+ <div class="bg-gray-750 flex items-center justify-between rounded-lg p-3">
|
|
|
+ <div class="flex-1">
|
|
|
+ <h3 class="font-medium">
|
|
|
+ {item.product_details?.product_name ?? 'Nome Indisponível'}
|
|
|
+ </h3>
|
|
|
+ <p class="text-sm text-gray-400">
|
|
|
+ R$ {Number(item.product_details?.product_price ?? 0).toFixed(2)} x {item.quantity ??
|
|
|
+ 1}
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ <div class="flex items-center space-x-2">
|
|
|
+ <button
|
|
|
+ on:click={() => removeItemFromOrder(tableIdNum, item.order_item_id)}
|
|
|
+ class="ml-2 rounded bg-red-700 p-1 hover:bg-red-600"
|
|
|
+ >
|
|
|
+ <img src={trash_icon} class="h-4 w-4" alt="Remover" />
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ {/each}
|
|
|
+ {/if}
|
|
|
+ </div>
|
|
|
|
|
|
- <button
|
|
|
- on:click={() => (isPaymentModalOpen = true)}
|
|
|
- disabled={currentOrder?.items.length === 0}
|
|
|
- class="flex w-full items-center justify-center rounded-lg bg-emerald-600 py-3 font-medium hover:bg-emerald-700 disabled:cursor-not-allowed disabled:opacity-50"
|
|
|
- >
|
|
|
- <!-- <img src="/icons/credit-card.svg" class="w-5 h-5 mr-2" alt="Pagamento" /> -->
|
|
|
- Fechar Atendimento
|
|
|
- </button>
|
|
|
+ <div class="bg-gray-750 border-t border-gray-700 p-4">
|
|
|
+ <div class="mb-2 flex justify-between">
|
|
|
+ <span class="font-medium">Subtotal:</span>
|
|
|
+ <span>R$ {totalAmount.toFixed(2)}</span>
|
|
|
</div>
|
|
|
+
|
|
|
+ <button
|
|
|
+ on:click={() => (isPaymentModalOpen = true)}
|
|
|
+ disabled={orderItems.length === 0}
|
|
|
+ class="flex w-full items-center justify-center rounded-lg bg-emerald-600 py-3 font-medium hover:bg-emerald-700 disabled:cursor-not-allowed disabled:opacity-50"
|
|
|
+ >
|
|
|
+ Fechar Atendimento
|
|
|
+ </button>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
|
|
|
- {#if isPaymentModalOpen}
|
|
|
- <div class="fixed inset-0 z-50 flex items-center justify-center bg-black/70 p-4">
|
|
|
- <div class="w-full max-w-lg rounded-lg bg-gray-800 p-6 shadow-xl">
|
|
|
- <h2 class="mb-4 text-xl font-bold">Finalizar Pedido</h2>
|
|
|
-
|
|
|
- <div class="mb-6">
|
|
|
- <h3 class="mb-3 text-lg font-medium">Resumo do Pedido</h3>
|
|
|
- <div class="mb-4 max-h-60 overflow-y-auto sm:max-h-80">
|
|
|
- {#each currentOrder.items as item, index}
|
|
|
- <div class="flex justify-between border-b border-gray-700 py-2">
|
|
|
- <span>{item.quantity}x {item.product.name}</span>
|
|
|
- <span>R$ {((item.priceAtOrder ?? 0) * item.quantity).toFixed(2)}</span>
|
|
|
- </div>
|
|
|
- {/each}
|
|
|
- </div>
|
|
|
- <div class="flex justify-between text-lg font-semibold">
|
|
|
- <span>Total:</span>
|
|
|
- <span>R$ {currentOrder.totalAmount.toFixed(2)}</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ {#if isPaymentModalOpen}
|
|
|
+ <div class="fixed inset-0 z-50 flex items-center justify-center bg-black/70 p-4">
|
|
|
+ <div class="w-full max-w-lg rounded-lg bg-gray-800 p-6 shadow-xl">
|
|
|
+ <h2 class="mb-4 text-xl font-bold">Finalizar Pedido</h2>
|
|
|
|
|
|
- <h3 class="mb-3 text-lg font-medium">Forma de Pagamento</h3>
|
|
|
- <div class="mb-6 grid grid-cols-1 gap-3 sm:grid-cols-2">
|
|
|
- {#each ['CASH', 'PIX', 'DEBIT', 'CREDIT'] as method}
|
|
|
- <button
|
|
|
- class="flex flex-col items-center justify-center rounded-lg border-2 p-4 transition-colors {selectedPaymentMethod ===
|
|
|
- method
|
|
|
- ? 'border-emerald-500 bg-emerald-900/20'
|
|
|
- : 'border-gray-700 hover:border-gray-600'}"
|
|
|
- on:click={() => (selectedPaymentMethod = method)}
|
|
|
- >
|
|
|
- <!-- <img src="/icons/{method.toLowerCase()}.svg" class="w-8 h-8 mb-2" alt={method} /> -->
|
|
|
+ <div class="mb-6">
|
|
|
+ <h3 class="mb-3 text-lg font-medium">Resumo do Pedido</h3>
|
|
|
+ <div class="mb-4 max-h-60 overflow-y-auto sm:max-h-80">
|
|
|
+ {#each orderItems as item}
|
|
|
+ <div class="flex justify-between border-b border-gray-700 py-2">
|
|
|
+ <span
|
|
|
+ >{item.quantity ?? 1}x {item.product_details?.product_name ??
|
|
|
+ 'Nome Indisponível'}</span
|
|
|
+ >
|
|
|
<span
|
|
|
- >{method === 'CASH'
|
|
|
- ? 'Dinheiro'
|
|
|
- : method === 'PIX'
|
|
|
- ? 'Pix'
|
|
|
- : method === 'DEBIT'
|
|
|
- ? 'Cart\u00e3o de D\u00e9bito'
|
|
|
- : 'Cart\u00e3o de Cr\u00e9dito'}</span
|
|
|
+ >R$ {(
|
|
|
+ Number(item.product_details?.product_price ?? 0) * (item.quantity ?? 1)
|
|
|
+ ).toFixed(2)}</span
|
|
|
>
|
|
|
- </button>
|
|
|
+ </div>
|
|
|
{/each}
|
|
|
</div>
|
|
|
+ <div class="flex justify-between text-lg font-semibold">
|
|
|
+ <span>Total:</span>
|
|
|
+ <span>R$ {totalAmount.toFixed(2)}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
|
|
|
- <div class="flex space-x-3">
|
|
|
+ <h3 class="mb-3 text-lg font-medium">Forma de Pagamento</h3>
|
|
|
+ <div class="mb-6 grid grid-cols-1 gap-3 sm:grid-cols-2">
|
|
|
+ {#each ['CASH', 'PIX', 'DEBIT', 'CREDIT'] as method}
|
|
|
<button
|
|
|
- on:click={() => (isPaymentModalOpen = false)}
|
|
|
- class="flex-1 rounded-lg bg-gray-700 py-3 font-medium hover:bg-gray-600"
|
|
|
+ class="flex flex-col items-center justify-center rounded-lg border-2 p-4 transition-colors {selectedPaymentMethod ===
|
|
|
+ method
|
|
|
+ ? 'border-emerald-500 bg-emerald-900/20'
|
|
|
+ : 'border-gray-700 hover:border-gray-600'}"
|
|
|
+ on:click={() => (selectedPaymentMethod = method)}
|
|
|
>
|
|
|
- Cancelar
|
|
|
- </button>
|
|
|
- <button
|
|
|
- on:click={handlePaymentConfirm}
|
|
|
- disabled={!selectedPaymentMethod}
|
|
|
- class="flex-1 rounded-lg bg-emerald-600 py-3 font-medium hover:bg-emerald-700 disabled:cursor-not-allowed disabled:opacity-50"
|
|
|
- >
|
|
|
- Confirmar Pagamento
|
|
|
+ <span
|
|
|
+ >{method === 'CASH'
|
|
|
+ ? 'Dinheiro'
|
|
|
+ : method === 'PIX'
|
|
|
+ ? 'Pix'
|
|
|
+ : method === 'DEBIT'
|
|
|
+ ? 'Cart\u00e3o de D\u00e9bito'
|
|
|
+ : 'Cart\u00e3o de Cr\u00e9dito'}</span
|
|
|
+ >
|
|
|
</button>
|
|
|
- </div>
|
|
|
+ {/each}
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="flex space-x-3">
|
|
|
+ <button
|
|
|
+ on:click={() => (isPaymentModalOpen = false)}
|
|
|
+ class="flex-1 rounded-lg bg-gray-700 py-3 font-medium hover:bg-gray-600"
|
|
|
+ >
|
|
|
+ Cancelar
|
|
|
+ </button>
|
|
|
+ <button
|
|
|
+ on:click={handlePaymentConfirm}
|
|
|
+ disabled={!selectedPaymentMethod}
|
|
|
+ class="flex-1 rounded-lg bg-emerald-600 py-3 font-medium hover:bg-emerald-700 disabled:cursor-not-allowed disabled:opacity-50"
|
|
|
+ >
|
|
|
+ Confirmar Pagamento
|
|
|
+ </button>
|
|
|
</div>
|
|
|
</div>
|
|
|
- {/if}
|
|
|
- </div>
|
|
|
-{/if}
|
|
|
+ </div>
|
|
|
+ {/if}
|
|
|
+</div>
|
gdias
