diff --git a/app/api/gql/gql.ts b/app/api/gql/gql.ts index 41497cc..e6fb605 100644 --- a/app/api/gql/gql.ts +++ b/app/api/gql/gql.ts @@ -35,7 +35,7 @@ const documents = { types.UpdateUserDocument, "query myProfile {\n me {\n id\n bio\n lastName\n username\n imageUrl\n isSuperAdmin\n email\n name\n impersonatedUser {\n id\n name\n }\n communities {\n id\n name\n }\n }\n}": types.MyProfileDocument, - "mutation CheckPurchaseOrderStatus($input: CheckForPurchaseOrderInput!) {\n checkPurchaseOrderStatus(input: $input) {\n id\n paymentLink\n status\n finalPrice\n paymentPlatform\n createdAt\n publicId\n currency {\n id\n currency\n }\n tickets {\n id\n approvalStatus\n paymentStatus\n redemptionStatus\n publicId\n ticketTemplate {\n id\n name\n description\n event {\n id\n name\n address\n description\n startDateTime\n endDateTime\n status\n publicShareURL\n logoImage {\n url\n }\n community {\n name\n }\n }\n prices {\n id\n amount\n currency {\n currency\n id\n }\n }\n }\n }\n }\n}": + "mutation CheckPurchaseOrderStatus($input: CheckForPurchaseOrderInput!) {\n checkPurchaseOrderStatus(input: $input) {\n id\n paymentLink\n status\n finalPrice\n paymentPlatform\n createdAt\n publicId\n currency {\n id\n currency\n }\n tickets {\n id\n approvalStatus\n paymentStatus\n redemptionStatus\n publicId\n ticketTemplate {\n id\n name\n description\n isFree\n event {\n id\n name\n address\n description\n startDateTime\n endDateTime\n status\n publicShareURL\n logoImage {\n url\n }\n community {\n name\n }\n }\n prices {\n id\n amount\n currency {\n currency\n id\n }\n }\n }\n }\n }\n}": types.CheckPurchaseOrderStatusDocument, "fragment EventTicketFragment on Ticket {\n id\n name\n description\n quantity\n isFree\n startDateTime\n status\n isUnlimited\n visibility\n prices {\n id\n amount\n currency {\n currency\n id\n }\n }\n}": types.EventTicketFragmentFragmentDoc, @@ -129,8 +129,8 @@ export function graphql( * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients. */ export function graphql( - source: "mutation CheckPurchaseOrderStatus($input: CheckForPurchaseOrderInput!) {\n checkPurchaseOrderStatus(input: $input) {\n id\n paymentLink\n status\n finalPrice\n paymentPlatform\n createdAt\n publicId\n currency {\n id\n currency\n }\n tickets {\n id\n approvalStatus\n paymentStatus\n redemptionStatus\n publicId\n ticketTemplate {\n id\n name\n description\n event {\n id\n name\n address\n description\n startDateTime\n endDateTime\n status\n publicShareURL\n logoImage {\n url\n }\n community {\n name\n }\n }\n prices {\n id\n amount\n currency {\n currency\n id\n }\n }\n }\n }\n }\n}", -): (typeof documents)["mutation CheckPurchaseOrderStatus($input: CheckForPurchaseOrderInput!) {\n checkPurchaseOrderStatus(input: $input) {\n id\n paymentLink\n status\n finalPrice\n paymentPlatform\n createdAt\n publicId\n currency {\n id\n currency\n }\n tickets {\n id\n approvalStatus\n paymentStatus\n redemptionStatus\n publicId\n ticketTemplate {\n id\n name\n description\n event {\n id\n name\n address\n description\n startDateTime\n endDateTime\n status\n publicShareURL\n logoImage {\n url\n }\n community {\n name\n }\n }\n prices {\n id\n amount\n currency {\n currency\n id\n }\n }\n }\n }\n }\n}"]; + source: "mutation CheckPurchaseOrderStatus($input: CheckForPurchaseOrderInput!) {\n checkPurchaseOrderStatus(input: $input) {\n id\n paymentLink\n status\n finalPrice\n paymentPlatform\n createdAt\n publicId\n currency {\n id\n currency\n }\n tickets {\n id\n approvalStatus\n paymentStatus\n redemptionStatus\n publicId\n ticketTemplate {\n id\n name\n description\n isFree\n event {\n id\n name\n address\n description\n startDateTime\n endDateTime\n status\n publicShareURL\n logoImage {\n url\n }\n community {\n name\n }\n }\n prices {\n id\n amount\n currency {\n currency\n id\n }\n }\n }\n }\n }\n}", +): (typeof documents)["mutation CheckPurchaseOrderStatus($input: CheckForPurchaseOrderInput!) {\n checkPurchaseOrderStatus(input: $input) {\n id\n paymentLink\n status\n finalPrice\n paymentPlatform\n createdAt\n publicId\n currency {\n id\n currency\n }\n tickets {\n id\n approvalStatus\n paymentStatus\n redemptionStatus\n publicId\n ticketTemplate {\n id\n name\n description\n isFree\n event {\n id\n name\n address\n description\n startDateTime\n endDateTime\n status\n publicShareURL\n logoImage {\n url\n }\n community {\n name\n }\n }\n prices {\n id\n amount\n currency {\n currency\n id\n }\n }\n }\n }\n }\n}"]; /** * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients. */ diff --git a/app/api/gql/graphql.ts b/app/api/gql/graphql.ts index cb4f948..eb4be8a 100644 --- a/app/api/gql/graphql.ts +++ b/app/api/gql/graphql.ts @@ -1831,6 +1831,7 @@ export type CheckPurchaseOrderStatusMutation = { id: string; name: string; description?: string | null; + isFree: boolean; event: { id: string; name: string; @@ -3385,6 +3386,10 @@ export const CheckPurchaseOrderStatusDocument = { kind: "Field", name: { kind: "Name", value: "description" }, }, + { + kind: "Field", + name: { kind: "Name", value: "isFree" }, + }, { kind: "Field", name: { kind: "Name", value: "event" }, diff --git a/app/components/LoginButton/index.tsx b/app/components/LoginButton/index.tsx index e126898..4e26724 100644 --- a/app/components/LoginButton/index.tsx +++ b/app/components/LoginButton/index.tsx @@ -38,7 +38,5 @@ export function useGetLoginURL() { url.search = searchParams.toString(); } - console.info(url.toString()); - return url.toString(); } diff --git a/app/components/Navbar/index.tsx b/app/components/Navbar/index.tsx index 1dd97c5..9a85430 100644 --- a/app/components/Navbar/index.tsx +++ b/app/components/Navbar/index.tsx @@ -27,8 +27,6 @@ export const Navbar = () => { }); const loginURL = useGetLoginURL(); - console.log({ loginURL }); - const { impersonation, setImpersonation } = useAuthContext(); const [impersonateModal, setImpersonateModal] = useState(false); diff --git a/app/components/PurchaseOrder/Callback.tsx b/app/components/PurchaseOrder/Callback.tsx index 5f4e95c..a3d674d 100644 --- a/app/components/PurchaseOrder/Callback.tsx +++ b/app/components/PurchaseOrder/Callback.tsx @@ -1,6 +1,6 @@ import { Link } from "@remix-run/react"; import { CircleCheck, CircleX } from "lucide-react"; -import { useCallback, useEffect, useRef } from "react"; +import { useCallback, useEffect, useRef, useState } from "react"; import { toast } from "sonner"; import { @@ -9,7 +9,7 @@ import { } from "~/api/gql/graphql"; import { Alert, AlertDescription, AlertTitle } from "~/components/ui/alert"; import { buttonVariants } from "~/components/ui/button"; -import { Card, CardContent } from "~/components/ui/card"; +import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card"; import { Table, TableBody, @@ -29,6 +29,7 @@ import { useCheckPurchaseOrderStatusMutation, CheckPurchaseOrderStatusMutation, } from "./graphql/checkPurchaseOrderStatus.generated"; +import { TicketAmountInput } from "../TicketsSaleFlow/inputs"; type PurchaseCallbackProps = { purchaseOrderId: string; @@ -106,7 +107,7 @@ const PurchaseStatusAlert = ({ return ( svg~*]:pl-11")} + className={cn(alertInfo.classNames, "w-full [&>svg~*]:pl-11")} > {alertInfo.icon} {alertInfo.title} @@ -115,6 +116,49 @@ const PurchaseStatusAlert = ({ ); }; +const MobileCard = ({ + ticket, + count, + selectedCurrency, +}: { + ticket: Ticket; + count: number; + selectedCurrency: Currency; +}) => { + const [isExpanded, setIsExpanded] = useState(false); + + return ( + + + +
+
{ticket.name}
+
+ {ticket.isFree && selectedCurrency + ? "Gratis" + : getFormmatedTicketPrice(ticket, selectedCurrency)} +
+
+
+ {}} /> +
+ + + + + {isExpanded &&

{ticket.description}

} + + + ); +}; + export const PurchaseCallback = ({ purchaseOrderId, }: PurchaseCallbackProps) => { @@ -180,15 +224,18 @@ export const PurchaseCallback = ({ } return ( -
+
{event.name} - - + + +

+ Entrada General +

@@ -250,6 +297,36 @@ export const PurchaseCallback = ({
+
+

+ Entrada General +

+
+ {tickets.map(({ count, ticket }) => ( + + ))} +
+
+
+ {purchaseOrder.status !== PurchaseOrderStatusEnum.Complete + ? "Total a Pagar" + : null} +
+
+ {purchaseOrder.finalPrice + ? formatCurrency( + purchaseOrder.finalPrice, + selectedCurrency?.currency as string, + ) + : "Gratis"} +
+
+
{purchaseOrder.status === PurchaseOrderStatusEnum.Expired && (
( + + + + + + + + + + + + + + +); + +const MobileSkeletonTicket = () => ( + + + + + + + +); + export const CallbackLoadingSkeleton = () => { const tickets = Array.from({ length: 5 }).map((_, index) => index); return ( -
+
- - + + +

+ Entrada General +

@@ -38,25 +68,28 @@ export const CallbackLoadingSkeleton = () => { {tickets.map((ticket: number) => ( - - - - - - - - - - - - - - + ))}
+
+

+ Entrada General +

+
+ {tickets.map((ticket: number) => ( + + ))} +
+
+
Total a Pagar
+
+ +
+
+
diff --git a/app/components/PurchaseOrder/graphql/checkPurchaseOrderStatus.generated.tsx b/app/components/PurchaseOrder/graphql/checkPurchaseOrderStatus.generated.tsx index f090661..a756680 100644 --- a/app/components/PurchaseOrder/graphql/checkPurchaseOrderStatus.generated.tsx +++ b/app/components/PurchaseOrder/graphql/checkPurchaseOrderStatus.generated.tsx @@ -40,6 +40,7 @@ export type CheckPurchaseOrderStatusMutation = { id: string; name: string; description?: string | null; + isFree: boolean; event: { __typename?: "Event"; id: string; @@ -92,6 +93,7 @@ export const CheckPurchaseOrderStatusDocument = gql` id name description + isFree event { id name diff --git a/app/components/PurchaseOrder/graphql/checkPurchaseOrderStatus.gql b/app/components/PurchaseOrder/graphql/checkPurchaseOrderStatus.gql index 1b6daa8..8f3ced5 100644 --- a/app/components/PurchaseOrder/graphql/checkPurchaseOrderStatus.gql +++ b/app/components/PurchaseOrder/graphql/checkPurchaseOrderStatus.gql @@ -21,6 +21,7 @@ mutation CheckPurchaseOrderStatus($input: CheckForPurchaseOrderInput!) { id name description + isFree event { id name diff --git a/app/components/TicketsSaleFlow/ConfirmationTab.tsx b/app/components/TicketsSaleFlow/ConfirmationTab.tsx index f07beb6..af2b44b 100644 --- a/app/components/TicketsSaleFlow/ConfirmationTab.tsx +++ b/app/components/TicketsSaleFlow/ConfirmationTab.tsx @@ -3,8 +3,8 @@ import { MouseEventHandler, useCallback, useState } from "react"; import { toast } from "sonner"; import { useGetLoginURL } from "~/components/LoginButton"; -import { Button } from "~/components/ui/button"; -import { Card, CardContent } from "~/components/ui/card"; +import { Button, buttonVariants } from "~/components/ui/button"; +import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card"; import { Table, TableBody, @@ -15,12 +15,63 @@ import { TableRow, } from "~/components/ui/table"; import { useIsAuthReady, useIsLoggedIn } from "~/utils/supabase/AuthProvider"; +import { cn } from "~/utils/utils"; import { useCreatePurchaseOrderMutation } from "./graphql/createPurchaseOrder.generated"; import { EventTicketFragmentFragment } from "./graphql/EventTicketFragment.generated"; +import { TicketAmountInput } from "./inputs"; import { SecondStepFooter } from "./Stepper"; import { Step, TicketsState } from "./types"; +const MobileCard = ({ + ticket, + getFormmatedTicketPrice, + selectedTickets, +}: { + ticket: EventTicketFragmentFragment; + getFormmatedTicketPrice: ( + ticket: EventTicketFragmentFragment, + ) => string | null; + selectedTickets: TicketsState; +}) => { + const [isExpanded, setIsExpanded] = useState(false); + + return ( + + + +
+
{ticket.name}
+
+ {ticket.isFree || !ticket.prices?.length + ? "Gratis" + : getFormmatedTicketPrice(ticket)} +
+
+
+ {}} + /> +
+ + + + + {isExpanded &&

{ticket.description}

} + + + ); +}; + export const ConfirmationTab = ({ tickets, selectedTickets, @@ -98,7 +149,7 @@ export const ConfirmationTab = ({ return (
- +

Entrada General @@ -161,6 +212,29 @@ export const ConfirmationTab = ({ +
+

+ Entrada General +

+
+ {tickets + .filter((ticket) => selectedTickets[ticket.id]) + .map((ticket) => ( + + ))} +
+
+
Total a Pagar
+
+ {!numberOfTickets || formattedTotal ? formattedTotal : "Gratis"} +
+
+
{ diff --git a/app/components/TicketsSaleFlow/TicketSelectionTab.tsx b/app/components/TicketsSaleFlow/TicketSelectionTab.tsx index 1c90598..1cc770e 100644 --- a/app/components/TicketsSaleFlow/TicketSelectionTab.tsx +++ b/app/components/TicketsSaleFlow/TicketSelectionTab.tsx @@ -1,11 +1,9 @@ import { Minus, Plus } from "lucide-react"; +import { useState } from "react"; -import { - TicketTemplateStatus, - TicketTemplateVisibility, -} from "~/api/gql/graphql"; -import { Button } from "~/components/ui/button"; -import { Card, CardContent } from "~/components/ui/card"; +import { TicketTemplateStatus } from "~/api/gql/graphql"; +import { Button, buttonVariants } from "~/components/ui/button"; +import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card"; import { Table, TableBody, @@ -15,12 +13,93 @@ import { TableHeader, TableRow, } from "~/components/ui/table"; +import { cn } from "~/utils/utils"; import { EventTicketFragmentFragment } from "./graphql/EventTicketFragment.generated"; import { TicketAmountInput } from "./inputs"; import { FirstStepFooter } from "./Stepper"; import { Step, TicketsState } from "./types"; +const MobileCard = ({ + item, + getFormmatedTicketPrice, + selectedTickets, + onMinusButtonClick, + onPlusButtonClick, + onInputChange, +}: { + item: EventTicketFragmentFragment; + getFormmatedTicketPrice: ( + ticket: EventTicketFragmentFragment, + ) => string | null; + selectedTickets: TicketsState; + onMinusButtonClick: (ticketId: string) => void; + onPlusButtonClick: (ticketId: string) => void; + onInputChange: (ticketId: string, amount: number) => void; +}) => { + const [isExpanded, setIsExpanded] = useState(false); + + return ( + + + +
+
{item.name}
+
+ {" "} + {item.isFree || !item.prices?.length + ? "Gratis" + : getFormmatedTicketPrice(item)} +
+
+ {item.status === TicketTemplateStatus.Active ? ( +
+ +
+ { + onInputChange(item.id, parseInt(e.target.value, 10)); + // handleChange(item.id, parseInt(e.target.value, 10)); + }} + /> +
+ +
+ ) : ( + No Disponible + )} + + + + + {isExpanded &&

{item.description}

} + + + ); +}; + export const TicketSelectionTab = ({ getFormmatedTicketPrice, step, @@ -55,7 +134,7 @@ export const TicketSelectionTab = ({ }) => { return (
- +

Entrada General @@ -78,63 +157,58 @@ export const TicketSelectionTab = ({ - {tickets - .filter( - (ticket) => - ticket.visibility === TicketTemplateVisibility.Public, - ) - .map((ticket) => ( - - - {ticket.name} - - - {ticket.description} - - - {ticket.status === TicketTemplateStatus.Active ? ( -
- -
- { - onInputChange( - ticket.id, - parseInt(e.target.value, 10), - ); - // handleChange(ticket.id, parseInt(e.target.value, 10)); - }} - /> -
- + {tickets.map((ticket) => ( + + + {ticket.name} + + + {ticket.description} + + + {ticket.status === TicketTemplateStatus.Active ? ( +
+ +
+ { + onInputChange( + ticket.id, + parseInt(e.target.value, 10), + ); + // handleChange(ticket.id, parseInt(e.target.value, 10)); + }} + />
- ) : ( - No Disponible - )} - - - {" "} - {ticket.isFree || !ticket.prices?.length - ? "Gratis" - : getFormmatedTicketPrice(ticket)} - - - ))} + +
+ ) : ( + No Disponible + )} + + + {" "} + {ticket.isFree || !ticket.prices?.length + ? "Gratis" + : getFormmatedTicketPrice(ticket)} + + + ))} @@ -154,6 +228,30 @@ export const TicketSelectionTab = ({ +
+

+ Entrada General +

+
+ {tickets.map((item) => ( + + ))} +
+
+
Total a Pagar
+
+ {!numberOfTickets || formattedTotal ? formattedTotal : "Gratis"} +
+
+
( + + + + + + + + + + + + + + +); + +const MobileSkeletonTicket = () => ( + + + + + + + +); + export const TicketsSaleFlowSkeleton = () => { const tickets = Array.from({ length: 5 }).map((_, index) => index); @@ -16,15 +43,24 @@ export const TicketsSaleFlowSkeleton = () => {
-
+
- - +

Compra de tickets

+

+ Selecciona la cantidad de tickets que quieres comprar +

+
+
+ + +
-
- - + + +

+ Entrada General +

@@ -44,28 +80,30 @@ export const TicketsSaleFlowSkeleton = () => { {tickets.map((ticket: number) => ( - - - - - - - - - - - - - - + ))}
+
+

+ Entrada General +

+
+ {tickets.map((ticket: number) => ( + + ))} +
+
+
Total a Pagar
+
+ +
+
+
-
diff --git a/app/components/TicketsSaleFlow/ticketSaleFlow.tsx b/app/components/TicketsSaleFlow/ticketSaleFlow.tsx index 390ccf2..9dc97a9 100644 --- a/app/components/TicketsSaleFlow/ticketSaleFlow.tsx +++ b/app/components/TicketsSaleFlow/ticketSaleFlow.tsx @@ -72,6 +72,8 @@ export default function Tickets({ setStep((tmpStep) => { const newStep = tmpStep + 1; + window.scrollTo({ top: 0, left: 0, behavior: "smooth" }); + return Math.min(newStep, steps.length - 1); }); }; @@ -80,6 +82,8 @@ export default function Tickets({ setStep((tmpStep) => { const newStep = tmpStep - 1; + window.scrollTo({ top: 0, left: 0, behavior: "smooth" }); + return Math.max(newStep, 0); }); }; diff --git a/app/entry.server.tsx b/app/entry.server.tsx index a941ddb..c2e56c2 100644 --- a/app/entry.server.tsx +++ b/app/entry.server.tsx @@ -31,10 +31,6 @@ export default async function handleRequest( userAgent.toLowerCase().includes("fxios") || userAgent.toLowerCase().includes("instagram"); - console.log("isWebview", isWebview); - console.log("isAndroid", isAndroid); - console.log("userAgent", userAgent); - if (isWebview && isAndroid) { responseHeaders.set("Content-Type", "application/pdf");