Adding login to the button

app/components/TicketsSaleFlow/ConfirmationTab.tsx

@@ -1,6 +1,8 @@
+import { Link } from "@remix-run/react";
 import { MouseEventHandler, useCallback, useState } from "react";
 import { toast } from "sonner";
 
+import { Button } from "~/components/ui/button";
 import { Card, CardContent } from "~/components/ui/card";
 import {
   Table,
@@ -12,6 +14,7 @@ import {
   TableRow,
 } from "~/components/ui/table";
 import { useIsAuthReady, useIsLoggedIn } from "~/utils/supabase/AuthProvider";
+import { urls } from "~/utils/urls";
 
 import { useCreatePurchaseOrderMutation } from "./graphql/createPurchaseOrder.generated";
 import { EventTicketFragmentFragment } from "./graphql/EventTicketFragment.generated";
@@ -167,8 +170,19 @@ export const ConfirmationTab = ({
         }}
         isDisabled={numberOfTickets === 0 || isDisabled || !hasSession}
         total={formattedTotal}
-        hoverText={
-          !hasSession ? "Debes iniciar sesión para poder comprar tickets" : null
+        popoverContent={
+          !hasSession ? (
+            <div className="flex flex-col gap-4 text-sm">
+              Debes iniciar sesión para poder comprar tickets.
+              <div className="flex justify-center">
+                <Button variant="default" asChild>
+                  <Link to={urls.login}>
+                    <span className="text-xs">Inicia sesión aquí</span>
+                  </Link>
+                </Button>
+              </div>
+            </div>
+          ) : null
         }
       />
     </div>

app/components/TicketsSaleFlow/Stepper.tsx

@@ -11,13 +11,13 @@ export const SecondStepFooter = ({
   onClickPrevious,
   onClickNext,
   isDisabled,
-  hoverText,
+  popoverContent,
 }: SecondStepFooterProps) => (
   <div className="mt-2 flex justify-end gap-2 text-right">
     <Button variant="outline" onClick={onClickPrevious}>
       Atras
     </Button>
-    <ConditionalPopoverWrapper popoverText={hoverText}>
+    <ConditionalPopoverWrapper popoverContent={popoverContent}>
       <Button disabled={isDisabled} onClick={onClickNext}>
         Pagar
       </Button>
@@ -26,17 +26,17 @@ export const SecondStepFooter = ({
 );
 
 const ConditionalPopoverWrapper = ({
-  popoverText,
+  popoverContent,
   children,
 }: {
-  popoverText: string | undefined | null;
+  popoverContent?: React.ReactNode;
   children: React.ReactNode;
 }) => {
-  if (popoverText) {
+  if (popoverContent) {
     return (
       <Popover>
         <PopoverTrigger>{children}</PopoverTrigger>
-        <PopoverContent>{popoverText}.</PopoverContent>
+        <PopoverContent>{popoverContent}</PopoverContent>
       </Popover>
     );
   } else {
@@ -47,10 +47,10 @@ const ConditionalPopoverWrapper = ({
 export const FirstStepFooter = ({
   onClickNext,
   isDisabled,
-  hoverText,
+  popoverContent,
 }: FirstStepFooterProps) => (
   <div className="mt-2 flex justify-end gap-2 text-right">
-    <ConditionalPopoverWrapper popoverText={hoverText}>
+    <ConditionalPopoverWrapper popoverContent={popoverContent}>
       <Button disabled={isDisabled} onClick={onClickNext}>
         Siguiente
       </Button>

app/components/TicketsSaleFlow/TicketSelectionTab.tsx

@@ -160,7 +160,7 @@ export const TicketSelectionTab = ({
         steps={steps}
         step={step}
         total={formattedTotal}
-        hoverText={
+        popoverContent={
           !isActive
             ? "Este evento no está activo"
             : hasFinished

app/components/TicketsSaleFlow/types.ts

@@ -30,13 +30,13 @@ export type FirstStepFooterProps = {
   steps: Step[];
   step: number;
   total: string | null;
-  hoverText?: string | null;
+  popoverContent?: React.ReactNode | null;
 };
 
 export type SecondStepFooterProps = {
   onClickPrevious: MouseEventHandler<HTMLButtonElement>;
   onClickNext: MouseEventHandler<HTMLButtonElement>;
   isDisabled: boolean;
   total: string | null;
-  hoverText?: string | null;
+  popoverContent?: React.ReactNode | null;
 };