Lego/feat/unauthenticated tickets (#67)

## Summary
- /events/:id/tickets is now a unauthenticated route
- Better readability in ticket list.

Author: joseglego

app/components/TicketsSaleFlow/ConfirmationTab.tsx

@@ -11,6 +11,7 @@ import {
   TableHeader,
   TableRow,
 } from "~/components/ui/table";
+import { useIsAuthReady, useIsLoggedIn } from "~/utils/supabase/AuthProvider";
 
 import { useCreatePurchaseOrderMutation } from "./graphql/createPurchaseOrder.generated";
 import { EventTicketFragmentFragment } from "./graphql/EventTicketFragment.generated";
@@ -39,6 +40,9 @@ export const ConfirmationTab = ({
   ) => string | null;
   currencyId: string;
 }) => {
+  const isLogged = useIsLoggedIn();
+  const isAuthReady = useIsAuthReady();
+  const hasSession = isAuthReady && isLogged;
   const [isDisabled, setIsDisabled] = useState(false);
   const [purchaseOrderMutation] = useCreatePurchaseOrderMutation();
   const createPurchaseOrder = useCallback(async () => {
@@ -98,10 +102,10 @@ export const ConfirmationTab = ({
           <Table>
             <TableHeader>
               <TableRow className="border-t hover:bg-transparent">
-                <TableHead className="h-[52px] w-[200px] text-center text-base font-bold text-white">
+                <TableHead className="h-[52px] min-w-[140px] text-center text-base font-bold text-white">
                   Tipo de Ticket
                 </TableHead>
-                <TableHead className="h-[52px] text-center text-base font-bold text-white">
+                <TableHead className="h-[52px] min-w-[300px] text-center text-base font-bold text-white">
                   Descripción
                 </TableHead>
                 <TableHead className="h-[52px] w-[100px] grow-0 text-center text-base font-bold text-white">
@@ -161,8 +165,11 @@ export const ConfirmationTab = ({
             console.error(error);
           });
         }}
-        isDisabled={numberOfTickets === 0 || isDisabled}
+        isDisabled={numberOfTickets === 0 || isDisabled || !hasSession}
         total={formattedTotal}
+        hoverText={
+          !hasSession ? "Debes iniciar sesión para poder comprar tickets" : null
+        }
       />
     </div>
   );

app/components/TicketsSaleFlow/Stepper.tsx

@@ -11,14 +11,17 @@ export const SecondStepFooter = ({
   onClickPrevious,
   onClickNext,
   isDisabled,
+  hoverText,
 }: SecondStepFooterProps) => (
   <div className="mt-2 flex justify-end gap-2 text-right">
     <Button variant="outline" onClick={onClickPrevious}>
       Atras
     </Button>
-    <Button disabled={isDisabled} onClick={onClickNext}>
-      Pagar
-    </Button>
+    <ConditionalPopoverWrapper popoverText={hoverText}>
+      <Button disabled={isDisabled} onClick={onClickNext}>
+        Pagar
+      </Button>
+    </ConditionalPopoverWrapper>
   </div>
 );
 

app/components/TicketsSaleFlow/TicketSelectionTab.tsx

@@ -63,10 +63,10 @@ export const TicketSelectionTab = ({
           <Table>
             <TableHeader>
               <TableRow className="border-t hover:bg-transparent">
-                <TableHead className="h-[52px] w-[200px] text-center text-base font-bold text-white">
+                <TableHead className="h-[52px] min-w-[140px] text-center text-base font-bold text-white">
                   Tipo de Ticket
                 </TableHead>
-                <TableHead className="h-[52px] text-center text-base font-bold text-white">
+                <TableHead className="h-[52px] min-w-[300px] text-center text-base font-bold text-white">
                   Descripción
                 </TableHead>
                 <TableHead className="h-[52px] w-[100px] grow-0 text-center text-base font-bold text-white">

app/components/TicketsSaleFlow/types.ts

@@ -38,4 +38,5 @@ export type SecondStepFooterProps = {
   onClickNext: MouseEventHandler<HTMLButtonElement>;
   isDisabled: boolean;
   total: string | null;
+  hoverText?: string | null;
 };

app/routes/_authenticated/events/$eventId/tickets/index.tsx renamed to app/routes/events.$id/tickets/index.tsx

@@ -3,10 +3,10 @@ import { useParams, useSearchParams } from "@remix-run/react";
 import EventPage from "~/components/TicketsSaleFlow";
 
 export default function Tickets() {
-  const params = useParams<{ eventId: string }>();
+  const params = useParams<{ id: string }>();
   const [searchParams] = useSearchParams();
 
-  const eventId = params.eventId!;
+  const eventId = params.id!;
   const coupon = searchParams.get("coupon") ?? undefined;
 
   return <EventPage id={eventId} coupon={coupon} />;