Lego/chore/feedback (#52)

# Summary
- Purchase: 
  - Filter tickets with 0 quantity
  - Block the button when waiting for a redirect to the Payment Platform
- Purchase Success: Update hero for better understanding
- Event Details: Fix UI error on small screen QR Code

app/components/MyEvent/MyEvent.tsx

@@ -48,7 +48,7 @@ const Ticket = ({
     <Card className="h-full bg-white p-6 text-black">
       <div className="relative mx-auto mt-4 w-full max-w-[90%] text-center">
         <div className={cn(showQR ? "" : "blur-lg")}>
-          <QRCode className="mx-auto" value={ticket.id} />
+          <QRCode className="mx-auto max-w-[90%]" value={ticket.id} />
         </div>
         <Button
           className="mt-8"

app/components/PurchaseOrder/Callback.tsx

@@ -83,7 +83,8 @@ const PurchaseStatusAlert = ({
       classNames:
         "border-green-800/50 text-green-800 dark:border-green-400/50 dark:text-green-400  [&>svg]:text-green-800 dark:[&>svg]:text-green-400",
       title: "Compra completada",
-      description: "Felicidades vas a asistir a la próxima",
+      description:
+        "YA ESTAS LIST@! 🎉. Cuéntale al mundo, Compártelo tus redes!",
     },
     [PurchaseOrderStatusEnum.Expired]: {
       icon: <CircleCheck className="size-4" />,

app/components/TicketsSaleFlow/ConfirmationTab.tsx

@@ -1,4 +1,4 @@
-import { MouseEventHandler, useCallback } from "react";
+import { MouseEventHandler, useCallback, useState } from "react";
 import { toast } from "sonner";
 
 import { Card, CardContent } from "~/components/ui/card";
@@ -39,16 +39,16 @@ export const ConfirmationTab = ({
   ) => string | null;
   currencyId: string;
 }) => {
-  const [purchaseOrderMutation, purchaseOrderMutationResults] =
-    useCreatePurchaseOrderMutation();
+  const [isDisabled, setIsDisabled] = useState(false);
+  const [purchaseOrderMutation] = useCreatePurchaseOrderMutation();
   const createPurchaseOrder = useCallback(async () => {
-    // calls the mutation
-    const purchaseOrder = Object.entries(selectedTickets).map(
-      ([ticketId, quantity]) => ({
+    setIsDisabled(true);
+    const purchaseOrder = Object.entries(selectedTickets)
+      .filter(([, quantity]) => quantity > 0)
+      .map(([ticketId, quantity]) => ({
         ticketId,
         quantity,
-      }),
-    );
+      }));
 
     await purchaseOrderMutation({
       variables: {
@@ -73,18 +73,20 @@ export const ConfirmationTab = ({
             }, 2000);
           }
         } else {
+          setIsDisabled(false);
           toast.error(
             "Ocurrió un error al intentar comprar tus tickets. Por favor intenta de nuevo.",
           );
         }
       },
       onError() {
+        setIsDisabled(false);
         toast.error(
           "Ocurrió un error al intentar comprar tus tickets. Por favor intenta de nuevo.",
         );
       },
     });
-  }, [currencyId, purchaseOrderMutation, selectedTickets]);
+  }, [currencyId, purchaseOrderMutation, selectedTickets, setIsDisabled]);
 
   return (
     <div className="flex flex-col gap-4">
@@ -155,9 +157,7 @@ export const ConfirmationTab = ({
             console.error(error);
           });
         }}
-        isDisabled={
-          numberOfTickets === 0 || purchaseOrderMutationResults.loading
-        }
+        isDisabled={numberOfTickets === 0 || isDisabled}
         total={formattedTotal}
       />
     </div>