feat(market): add Minha Intenções tab with panel, hook, and badge

- Introduced "Minhas Intenções" tab visible only to logged-in users. - Integrated MyPurchaseIntentionsPanel and useMyPurchaseIntentions hook. - Added tab badge showing count of pending intentions. - Extended session API to include user’s main character for downstream features.
2025-11-07 17:25:51 -03:00
1 parent f35fee944d
commit 7f42def478
@@ -0,0 +1,181 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Label } from "@/components/ui/label";
+import { RefreshCw, Loader2 } from "lucide-react";
+import { useQueryClient } from "@tanstack/react-query";
+
+interface ChangePaymentMethodButtonProps {
+  intentionId: number;
+  currentPaymentMethod: string;
+  availableMethods: string[];
+  canChange: boolean;
+}
+
+function getPaymentMethodLabel(method: string): string {
+  switch (method) {
+    case "pix":
+      return "PIX";
+    case "tibia_coins":
+      return "Tibia Coins";
+    case "gold_coins":
+      return "Gold Coins";
+    case "trade":
+      return "Troca";
+    default:
+      return method.toUpperCase();
+  }
+}
+
+export function ChangePaymentMethodButton({
+  intentionId,
+  currentPaymentMethod,
+  availableMethods,
+  canChange,
+}: ChangePaymentMethodButtonProps) {
+  const [open, setOpen] = useState(false);
+  const [selectedMethod, setSelectedMethod] = useState<string>(currentPaymentMethod);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const queryClient = useQueryClient();
+
+  // Filtrar métodos disponíveis (excluir o atual)
+  const availableOptions = availableMethods.filter(
+    (method) => method !== currentPaymentMethod
+  );
+
+  const handleChange = async () => {
+    if (selectedMethod === currentPaymentMethod) {
+      setError("Selecione um método de pagamento diferente do atual");
+      return;
+    }
+
+    setLoading(true);
+    setError(null);
+
+    try {
+      const res = await fetch(
+        `/api/purchase-intentions/${intentionId}/payment-method`,
+        {
+          method: "PATCH",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ payment_method: selectedMethod }),
+        }
+      );
+
+      const data = await res.json();
+
+      if (!res.ok || !data.success) {
+        throw new Error(data.error || "Erro ao trocar método de pagamento");
+      }
+
+      // Invalidar cache para atualizar a lista
+      queryClient.invalidateQueries({ queryKey: ["my-purchase-intentions"] });
+      queryClient.invalidateQueries({ queryKey: ["purchase-intentions"] });
+      queryClient.invalidateQueries({ queryKey: ["listings"] });
+
+      setOpen(false);
+      // Opcional: mostrar toast de sucesso
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Erro ao trocar método de pagamento");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  if (!canChange || availableOptions.length === 0) {
+    return null;
+  }
+
+  return (
+    <>
+      <Button
+        variant="outline"
+        size="sm"
+        onClick={() => {
+          setOpen(true);
+          setSelectedMethod(currentPaymentMethod);
+          setError(null);
+        }}
+        className="gap-2"
+      >
+        <RefreshCw className="h-4 w-4" />
+        Trocar Método
+      </Button>
+
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Trocar Método de Pagamento</DialogTitle>
+            <DialogDescription>
+              Você pode trocar o método de pagamento apenas uma vez. Escolha o novo método:
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="space-y-4">
+            <div className="space-y-2">
+              <Label>Método Atual</Label>
+              <div className="text-sm text-muted-foreground p-2 bg-muted rounded-md">
+                {getPaymentMethodLabel(currentPaymentMethod)}
+              </div>
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="new-method">Novo Método de Pagamento</Label>
+              <Select value={selectedMethod} onValueChange={setSelectedMethod}>
+                <SelectTrigger id="new-method">
+                  <SelectValue placeholder="Selecione um método" />
+                </SelectTrigger>
+                <SelectContent>
+                  {availableOptions.map((method) => (
+                    <SelectItem key={method} value={method}>
+                      {getPaymentMethodLabel(method)}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            {error && (
+              <div className="bg-destructive/10 text-destructive p-3 rounded-lg text-sm">
+                {error}
+              </div>
+            )}
+
+            <div className="flex gap-2 justify-end">
+              <Button variant="outline" onClick={() => setOpen(false)} disabled={loading}>
+                Cancelar
+              </Button>
+              <Button onClick={handleChange} disabled={loading || selectedMethod === currentPaymentMethod}>
+                {loading ? (
+                  <>
+                    <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                    Trocando...
+                  </>
+                ) : (
+                  "Confirmar Troca"
+                )}
+              </Button>
+            </div>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}
+