From 59917427c255e771e40577258221a9618d82790f Mon Sep 17 00:00:00 2001
From: Jose Lezama <me@joseglego.io>
Date: Wed, 25 Sep 2024 12:55:03 -0300
Subject: [PATCH] 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            |  2 +-
 app/components/PurchaseOrder/Callback.tsx     |  3 ++-
 .../TicketsSaleFlow/ConfirmationTab.tsx       | 24 +++++++++----------
 3 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/app/components/MyEvent/MyEvent.tsx b/app/components/MyEvent/MyEvent.tsx
index 5ddd81a..7366b40 100644
--- a/app/components/MyEvent/MyEvent.tsx
+++ b/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"
diff --git a/app/components/PurchaseOrder/Callback.tsx b/app/components/PurchaseOrder/Callback.tsx
index 1a959ef..0c57902 100644
--- a/app/components/PurchaseOrder/Callback.tsx
+++ b/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" />,
diff --git a/app/components/TicketsSaleFlow/ConfirmationTab.tsx b/app/components/TicketsSaleFlow/ConfirmationTab.tsx
index 81a26c5..c4bed13 100644
--- a/app/components/TicketsSaleFlow/ConfirmationTab.tsx
+++ b/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>