From 23670b50a299fb9e21b2ebe9fc95475aedf4718d Mon Sep 17 00:00:00 2001 From: Jose Lezama Date: Sat, 30 Nov 2024 12:07:44 -0300 Subject: [PATCH] feat(MyEvent.Addons): include allow userTicketAddon (#73) ## Summary ### Include Addons to claim on My Event Details --- app/api/gql/gql.ts | 22 +- app/api/gql/graphql.ts | 293 ++++++++++++++++++ app/components/MyEvent/MyEvent.tsx | 185 ++++++++++- app/components/MyEvent/TicketCard.tsx | 26 ++ .../claimUserTicketAddons.generated.tsx | 102 ++++++ .../MyEvent/graphql/claimUserTicketAddons.gql | 20 ++ .../MyEvent/graphql/myEvent.generated.tsx | 7 + app/components/MyEvent/graphql/myEvent.gql | 3 + .../graphql/myEventAddons.generated.tsx | 135 ++++++++ .../MyEvent/graphql/myEventAddons.gql | 22 ++ .../TicketsSaleFlow/TicketSelectionTab.tsx | 6 +- 11 files changed, 810 insertions(+), 11 deletions(-) create mode 100644 app/components/MyEvent/graphql/claimUserTicketAddons.generated.tsx create mode 100644 app/components/MyEvent/graphql/claimUserTicketAddons.gql create mode 100644 app/components/MyEvent/graphql/myEventAddons.generated.tsx create mode 100644 app/components/MyEvent/graphql/myEventAddons.gql diff --git a/app/api/gql/gql.ts b/app/api/gql/gql.ts index e6fb605..0e1a4d6 100644 --- a/app/api/gql/gql.ts +++ b/app/api/gql/gql.ts @@ -15,8 +15,12 @@ import type { TypedDocumentNode as DocumentNode } from "@graphql-typed-document- const documents = { "query FetchExampleEvents($input: PaginatedInputEventsSearchInput!) {\n searchEvents(input: $input) {\n data {\n id\n description\n community {\n id\n name\n }\n tags {\n id\n name\n description\n }\n }\n }\n}": types.FetchExampleEventsDocument, - "query myEvent($input: PaginatedInputEventsSearchInput!, $userTicketSearchInput: EventsTicketsSearchInput) {\n searchEvents(input: $input) {\n data {\n id\n name\n description\n startDateTime\n endDateTime\n address\n publicShareURL\n previewImage {\n url\n }\n bannerImage {\n url\n }\n mobileBannerImage {\n url\n }\n community {\n id\n name\n }\n status\n usersTickets(input: $userTicketSearchInput) {\n id\n approvalStatus\n paymentStatus\n redemptionStatus\n createdAt\n publicId\n ticketTemplate {\n id\n name\n description\n }\n }\n }\n pagination {\n currentPage\n pageSize\n totalPages\n totalRecords\n }\n }\n}": + "mutation claimUserTicketAddons($addonsClaims: [ClaimUserTicketAddonInput!]!) {\n claimUserTicketAddons(addonsClaims: $addonsClaims) {\n __typename\n ... on PurchaseOrder {\n __typename\n id\n status\n userTicketAddons {\n id\n approvalStatus\n redemptionStatus\n }\n }\n ... on RedeemUserTicketAddonsError {\n __typename\n error\n errorMessage\n }\n }\n}": + types.ClaimUserTicketAddonsDocument, + "query myEvent($input: PaginatedInputEventsSearchInput!, $userTicketSearchInput: EventsTicketsSearchInput) {\n searchEvents(input: $input) {\n data {\n id\n name\n description\n startDateTime\n endDateTime\n address\n publicShareURL\n previewImage {\n url\n }\n bannerImage {\n url\n }\n mobileBannerImage {\n url\n }\n community {\n id\n name\n }\n status\n usersTickets(input: $userTicketSearchInput) {\n id\n approvalStatus\n paymentStatus\n redemptionStatus\n createdAt\n publicId\n ticketTemplate {\n id\n name\n description\n }\n userTicketAddons {\n addonId\n }\n }\n }\n pagination {\n currentPage\n pageSize\n totalPages\n totalRecords\n }\n }\n}": types.MyEventDocument, + "query myEventAddons($eventId: String!) {\n searchAddons(eventId: $eventId) {\n id\n description\n isFree\n maxPerTicket\n name\n totalStock\n constraints {\n id\n addonId\n relatedAddonId\n constraintType\n }\n ticketAddons {\n id\n addonId\n orderDisplay\n ticketId\n }\n }\n}": + types.MyEventAddonsDocument, "mutation transferTicket($ticketId: String!, $input: UserTicketTransferInfoInput!) {\n transferMyTicketToUser(ticketId: $ticketId, input: $input) {\n id\n status\n expirationDate\n transferMessage\n sender {\n email\n name\n }\n recipient {\n email\n name\n }\n userTicket {\n id\n approvalStatus\n }\n }\n}": types.TransferTicketDocument, "query myEvents($input: PaginatedInputEventsSearchInput!, $userTicketSearchInput: EventsTicketsSearchInput) {\n searchEvents(input: $input) {\n data {\n id\n name\n description\n startDateTime\n address\n previewImage {\n url\n }\n community {\n id\n name\n }\n status\n usersTickets(input: $userTicketSearchInput) {\n id\n approvalStatus\n paymentStatus\n redemptionStatus\n ticketTemplate {\n description\n id\n }\n }\n }\n pagination {\n currentPage\n pageSize\n totalPages\n totalRecords\n }\n }\n}": @@ -69,8 +73,20 @@ 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: "query myEvent($input: PaginatedInputEventsSearchInput!, $userTicketSearchInput: EventsTicketsSearchInput) {\n searchEvents(input: $input) {\n data {\n id\n name\n description\n startDateTime\n endDateTime\n address\n publicShareURL\n previewImage {\n url\n }\n bannerImage {\n url\n }\n mobileBannerImage {\n url\n }\n community {\n id\n name\n }\n status\n usersTickets(input: $userTicketSearchInput) {\n id\n approvalStatus\n paymentStatus\n redemptionStatus\n createdAt\n publicId\n ticketTemplate {\n id\n name\n description\n }\n }\n }\n pagination {\n currentPage\n pageSize\n totalPages\n totalRecords\n }\n }\n}", -): (typeof documents)["query myEvent($input: PaginatedInputEventsSearchInput!, $userTicketSearchInput: EventsTicketsSearchInput) {\n searchEvents(input: $input) {\n data {\n id\n name\n description\n startDateTime\n endDateTime\n address\n publicShareURL\n previewImage {\n url\n }\n bannerImage {\n url\n }\n mobileBannerImage {\n url\n }\n community {\n id\n name\n }\n status\n usersTickets(input: $userTicketSearchInput) {\n id\n approvalStatus\n paymentStatus\n redemptionStatus\n createdAt\n publicId\n ticketTemplate {\n id\n name\n description\n }\n }\n }\n pagination {\n currentPage\n pageSize\n totalPages\n totalRecords\n }\n }\n}"]; + source: "mutation claimUserTicketAddons($addonsClaims: [ClaimUserTicketAddonInput!]!) {\n claimUserTicketAddons(addonsClaims: $addonsClaims) {\n __typename\n ... on PurchaseOrder {\n __typename\n id\n status\n userTicketAddons {\n id\n approvalStatus\n redemptionStatus\n }\n }\n ... on RedeemUserTicketAddonsError {\n __typename\n error\n errorMessage\n }\n }\n}", +): (typeof documents)["mutation claimUserTicketAddons($addonsClaims: [ClaimUserTicketAddonInput!]!) {\n claimUserTicketAddons(addonsClaims: $addonsClaims) {\n __typename\n ... on PurchaseOrder {\n __typename\n id\n status\n userTicketAddons {\n id\n approvalStatus\n redemptionStatus\n }\n }\n ... on RedeemUserTicketAddonsError {\n __typename\n error\n errorMessage\n }\n }\n}"]; +/** + * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients. + */ +export function graphql( + source: "query myEvent($input: PaginatedInputEventsSearchInput!, $userTicketSearchInput: EventsTicketsSearchInput) {\n searchEvents(input: $input) {\n data {\n id\n name\n description\n startDateTime\n endDateTime\n address\n publicShareURL\n previewImage {\n url\n }\n bannerImage {\n url\n }\n mobileBannerImage {\n url\n }\n community {\n id\n name\n }\n status\n usersTickets(input: $userTicketSearchInput) {\n id\n approvalStatus\n paymentStatus\n redemptionStatus\n createdAt\n publicId\n ticketTemplate {\n id\n name\n description\n }\n userTicketAddons {\n addonId\n }\n }\n }\n pagination {\n currentPage\n pageSize\n totalPages\n totalRecords\n }\n }\n}", +): (typeof documents)["query myEvent($input: PaginatedInputEventsSearchInput!, $userTicketSearchInput: EventsTicketsSearchInput) {\n searchEvents(input: $input) {\n data {\n id\n name\n description\n startDateTime\n endDateTime\n address\n publicShareURL\n previewImage {\n url\n }\n bannerImage {\n url\n }\n mobileBannerImage {\n url\n }\n community {\n id\n name\n }\n status\n usersTickets(input: $userTicketSearchInput) {\n id\n approvalStatus\n paymentStatus\n redemptionStatus\n createdAt\n publicId\n ticketTemplate {\n id\n name\n description\n }\n userTicketAddons {\n addonId\n }\n }\n }\n pagination {\n currentPage\n pageSize\n totalPages\n totalRecords\n }\n }\n}"]; +/** + * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients. + */ +export function graphql( + source: "query myEventAddons($eventId: String!) {\n searchAddons(eventId: $eventId) {\n id\n description\n isFree\n maxPerTicket\n name\n totalStock\n constraints {\n id\n addonId\n relatedAddonId\n constraintType\n }\n ticketAddons {\n id\n addonId\n orderDisplay\n ticketId\n }\n }\n}", +): (typeof documents)["query myEventAddons($eventId: String!) {\n searchAddons(eventId: $eventId) {\n id\n description\n isFree\n maxPerTicket\n name\n totalStock\n constraints {\n id\n addonId\n relatedAddonId\n constraintType\n }\n ticketAddons {\n id\n addonId\n orderDisplay\n ticketId\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 eb4be8a..0bebbfa 100644 --- a/app/api/gql/graphql.ts +++ b/app/api/gql/graphql.ts @@ -1588,6 +1588,29 @@ export type FetchExampleEventsQuery = { }; }; +export type ClaimUserTicketAddonsMutationVariables = Exact<{ + addonsClaims: Array | ClaimUserTicketAddonInput; +}>; + +export type ClaimUserTicketAddonsMutation = { + claimUserTicketAddons: + | { + __typename: "PurchaseOrder"; + id: string; + status?: PurchaseOrderStatusEnum | null; + userTicketAddons: Array<{ + id: string; + approvalStatus: UserTicketAddonApprovalStatus; + redemptionStatus: UserTicketAddonStatus; + }>; + } + | { + __typename: "RedeemUserTicketAddonsError"; + error: boolean; + errorMessage: string; + }; +}; + export type MyEventQueryVariables = Exact<{ input: PaginatedInputEventsSearchInput; userTicketSearchInput?: InputMaybe; @@ -1620,6 +1643,7 @@ export type MyEventQuery = { name: string; description?: string | null; }; + userTicketAddons: Array<{ addonId: string }>; }>; }>; pagination: { @@ -1631,6 +1655,33 @@ export type MyEventQuery = { }; }; +export type MyEventAddonsQueryVariables = Exact<{ + eventId: Scalars["String"]["input"]; +}>; + +export type MyEventAddonsQuery = { + searchAddons: Array<{ + id: string; + description?: string | null; + isFree: boolean; + maxPerTicket?: number | null; + name: string; + totalStock?: number | null; + constraints: Array<{ + id: string; + addonId: string; + relatedAddonId: string; + constraintType: AddonConstraintType; + }>; + ticketAddons: Array<{ + id: string; + addonId: string; + orderDisplay: number; + ticketId: string; + }>; + }>; +}; + export type TransferTicketMutationVariables = Exact<{ ticketId: Scalars["String"]["input"]; input: UserTicketTransferInfoInput; @@ -2082,6 +2133,132 @@ export const FetchExampleEventsDocument = { FetchExampleEventsQuery, FetchExampleEventsQueryVariables >; +export const ClaimUserTicketAddonsDocument = { + kind: "Document", + definitions: [ + { + kind: "OperationDefinition", + operation: "mutation", + name: { kind: "Name", value: "claimUserTicketAddons" }, + variableDefinitions: [ + { + kind: "VariableDefinition", + variable: { + kind: "Variable", + name: { kind: "Name", value: "addonsClaims" }, + }, + type: { + kind: "NonNullType", + type: { + kind: "ListType", + type: { + kind: "NonNullType", + type: { + kind: "NamedType", + name: { kind: "Name", value: "ClaimUserTicketAddonInput" }, + }, + }, + }, + }, + }, + ], + selectionSet: { + kind: "SelectionSet", + selections: [ + { + kind: "Field", + name: { kind: "Name", value: "claimUserTicketAddons" }, + arguments: [ + { + kind: "Argument", + name: { kind: "Name", value: "addonsClaims" }, + value: { + kind: "Variable", + name: { kind: "Name", value: "addonsClaims" }, + }, + }, + ], + selectionSet: { + kind: "SelectionSet", + selections: [ + { kind: "Field", name: { kind: "Name", value: "__typename" } }, + { + kind: "InlineFragment", + typeCondition: { + kind: "NamedType", + name: { kind: "Name", value: "PurchaseOrder" }, + }, + selectionSet: { + kind: "SelectionSet", + selections: [ + { + kind: "Field", + name: { kind: "Name", value: "__typename" }, + }, + { kind: "Field", name: { kind: "Name", value: "id" } }, + { + kind: "Field", + name: { kind: "Name", value: "status" }, + }, + { + kind: "Field", + name: { kind: "Name", value: "userTicketAddons" }, + selectionSet: { + kind: "SelectionSet", + selections: [ + { + kind: "Field", + name: { kind: "Name", value: "id" }, + }, + { + kind: "Field", + name: { kind: "Name", value: "approvalStatus" }, + }, + { + kind: "Field", + name: { kind: "Name", value: "redemptionStatus" }, + }, + ], + }, + }, + ], + }, + }, + { + kind: "InlineFragment", + typeCondition: { + kind: "NamedType", + name: { + kind: "Name", + value: "RedeemUserTicketAddonsError", + }, + }, + selectionSet: { + kind: "SelectionSet", + selections: [ + { + kind: "Field", + name: { kind: "Name", value: "__typename" }, + }, + { kind: "Field", name: { kind: "Name", value: "error" } }, + { + kind: "Field", + name: { kind: "Name", value: "errorMessage" }, + }, + ], + }, + }, + ], + }, + }, + ], + }, + }, + ], +} as unknown as DocumentNode< + ClaimUserTicketAddonsMutation, + ClaimUserTicketAddonsMutationVariables +>; export const MyEventDocument = { kind: "Document", definitions: [ @@ -2290,6 +2467,19 @@ export const MyEventDocument = { ], }, }, + { + kind: "Field", + name: { kind: "Name", value: "userTicketAddons" }, + selectionSet: { + kind: "SelectionSet", + selections: [ + { + kind: "Field", + name: { kind: "Name", value: "addonId" }, + }, + ], + }, + }, ], }, }, @@ -2329,6 +2519,109 @@ export const MyEventDocument = { }, ], } as unknown as DocumentNode; +export const MyEventAddonsDocument = { + kind: "Document", + definitions: [ + { + kind: "OperationDefinition", + operation: "query", + name: { kind: "Name", value: "myEventAddons" }, + variableDefinitions: [ + { + kind: "VariableDefinition", + variable: { + kind: "Variable", + name: { kind: "Name", value: "eventId" }, + }, + type: { + kind: "NonNullType", + type: { + kind: "NamedType", + name: { kind: "Name", value: "String" }, + }, + }, + }, + ], + selectionSet: { + kind: "SelectionSet", + selections: [ + { + kind: "Field", + name: { kind: "Name", value: "searchAddons" }, + arguments: [ + { + kind: "Argument", + name: { kind: "Name", value: "eventId" }, + value: { + kind: "Variable", + name: { kind: "Name", value: "eventId" }, + }, + }, + ], + selectionSet: { + kind: "SelectionSet", + selections: [ + { kind: "Field", name: { kind: "Name", value: "id" } }, + { kind: "Field", name: { kind: "Name", value: "description" } }, + { kind: "Field", name: { kind: "Name", value: "isFree" } }, + { + kind: "Field", + name: { kind: "Name", value: "maxPerTicket" }, + }, + { kind: "Field", name: { kind: "Name", value: "name" } }, + { kind: "Field", name: { kind: "Name", value: "totalStock" } }, + { + kind: "Field", + name: { kind: "Name", value: "constraints" }, + selectionSet: { + kind: "SelectionSet", + selections: [ + { kind: "Field", name: { kind: "Name", value: "id" } }, + { + kind: "Field", + name: { kind: "Name", value: "addonId" }, + }, + { + kind: "Field", + name: { kind: "Name", value: "relatedAddonId" }, + }, + { + kind: "Field", + name: { kind: "Name", value: "constraintType" }, + }, + ], + }, + }, + { + kind: "Field", + name: { kind: "Name", value: "ticketAddons" }, + selectionSet: { + kind: "SelectionSet", + selections: [ + { kind: "Field", name: { kind: "Name", value: "id" } }, + { + kind: "Field", + name: { kind: "Name", value: "addonId" }, + }, + { + kind: "Field", + name: { kind: "Name", value: "orderDisplay" }, + }, + { + kind: "Field", + name: { kind: "Name", value: "ticketId" }, + }, + ], + }, + }, + ], + }, + }, + ], + }, + }, + ], +} as unknown as DocumentNode; export const TransferTicketDocument = { kind: "Document", definitions: [ diff --git a/app/components/MyEvent/MyEvent.tsx b/app/components/MyEvent/MyEvent.tsx index e2c5a3e..b1b5a6d 100644 --- a/app/components/MyEvent/MyEvent.tsx +++ b/app/components/MyEvent/MyEvent.tsx @@ -1,15 +1,27 @@ import { Calendar, ExternalLink, MapPin } from "lucide-react"; +import { useCallback } from "react"; +import { toast } from "sonner"; +import { TicketApprovalStatus } from "~/api/gql/graphql"; +import { Button } from "~/components/ui/button"; +import { Tabs, TabsList, TabsTrigger, TabsContent } from "~/components/ui/tabs"; import { formatDate, formatTime } from "~/utils/date"; import { cn } from "~/utils/utils"; +import { useClaimUserTicketAddonsMutation } from "./graphql/claimUserTicketAddons.generated"; import { MyEventQuery, useMyEventSuspenseQuery, } from "./graphql/myEvent.generated"; +import { + MyEventAddonsQuery, + useMyEventAddonsSuspenseQuery, +} from "./graphql/myEventAddons.generated"; import { TicketCard } from "./TicketCard"; type Event = MyEventQuery["searchEvents"]["data"][0]; +type Addon = MyEventAddonsQuery["searchAddons"][0]; +type UserTicket = Event["usersTickets"][0]; export const MyEvent = ({ id }: { id: string }) => { const { data } = useMyEventSuspenseQuery({ @@ -25,13 +37,101 @@ export const MyEvent = ({ id }: { id: string }) => { }, }, }); - + const { data: addonsData } = useMyEventAddonsSuspenseQuery({ + variables: { eventId: id }, + }); const event: Event = data.searchEvents.data[0]; + const addons = addonsData?.searchAddons || []; const tickets = event?.usersTickets; const parsedDate = new Date(event.startDateTime as string); const formattedDate = formatDate(parsedDate); const formattedTime = formatTime(parsedDate); const formatedAddress = event.address; + const [ + claimUserTicketAddonMutation, + { + data: wasCalledClaimUserTicketAddonMutation, + loading: isLoadingClaimUserTicketAddonMutation, + }, + ] = useClaimUserTicketAddonsMutation(); + + const registerAddon = useCallback( + async ({ + addonId, + userTicketId, + quantity, + }: { + addonId: string; + userTicketId: string; + quantity: number; + }) => { + await claimUserTicketAddonMutation({ + variables: { + addonsClaims: [{ addonId, userTicketId, quantity }], + }, + onCompleted(data) { + // Redirect to payment page + if ( + data.claimUserTicketAddons.__typename === + "RedeemUserTicketAddonsError" + ) { + toast.error(data.claimUserTicketAddons.errorMessage); + } else if ( + data.claimUserTicketAddons.__typename === "PurchaseOrder" + ) { + toast("Tu registro fue exitoso."); + setTimeout(() => { + window?.location.reload(); + }, 2000); + } else { + toast.error( + "Ocurrió un error al intentar comprar tus tickets. Por favor intenta de nuevo.", + ); + } + }, + onError() { + toast.error( + "Ocurrió un error al intentar comprar tus tickets. Por favor intenta de nuevo.", + ); + }, + }); + }, + [claimUserTicketAddonMutation], + ); + + const canGetAddon = useCallback( + (addon: Addon, ticket: UserTicket) => { + const ticketTemplateId = ticket.ticketTemplate.id; + const ticketAddon = addon.ticketAddons.find( + (ticketAddon) => ticketAddon.ticketId === ticketTemplateId, + ); + + if (!ticketAddon) { + return false; + } + + if (ticket.userTicketAddons.length === 0) { + return true; + } + + const constraints: Record = {}; + + addon.constraints.forEach((constraint) => { + if (constraint.addonId === addon.id) { + constraints[constraint.relatedAddonId] = true; + constraints[constraint.addonId] = true; + } + }); + + return !ticket.userTicketAddons.some( + (userTicketAddon) => + constraints[userTicketAddon.addonId] || + userTicketAddon.addonId == addon.id, + ); + }, + // eslint-disable-next-line react-hooks/exhaustive-deps + [addons, tickets], + ); return (
@@ -81,11 +181,84 @@ export const MyEvent = ({ id }: { id: string }) => {
-
- {tickets.map((ticket) => ( - - ))} -
+ + + + Entradas + Extras + + +
+ {tickets.map((ticket) => ( + + ))} +
+ + +
+ {addons.map((addon) => { + const ticket = tickets + .filter((tmpTicket) => + [ + TicketApprovalStatus.Approved, + TicketApprovalStatus.TransferAccepted, + TicketApprovalStatus.NotRequired, + ].includes(tmpTicket.approvalStatus), + ) + .find((tmpTicket) => canGetAddon(addon, tmpTicket)); + + return ( +
+
+
{addon.name}
+
+ {addon.description} +
+
+
+ +
+
+ ); + })} +
+ + ) : null} diff --git a/app/components/MyEvent/TicketCard.tsx b/app/components/MyEvent/TicketCard.tsx index 88d01ed..ee69b9f 100644 --- a/app/components/MyEvent/TicketCard.tsx +++ b/app/components/MyEvent/TicketCard.tsx @@ -16,16 +16,20 @@ import { urls } from "~/utils/urls"; import { cn } from "~/utils/utils"; import { MyEventQuery } from "./graphql/myEvent.generated"; +import { MyEventAddonsQuery } from "./graphql/myEventAddons.generated"; import { TransferTicketDialog } from "./TransferTicketDialog"; type Event = MyEventQuery["searchEvents"]["data"][0]; +type Addon = MyEventAddonsQuery["searchAddons"][0]; export const TicketCard = ({ event, ticket, + addons, }: { event: Event; ticket: Event["usersTickets"]["0"]; + addons: Addon[]; }) => { const [showQR, setShowQR] = useState(false); const [showMore, setShowMore] = useState(false); @@ -111,6 +115,28 @@ export const TicketCard = ({ {formatCalendarDate(ticket.createdAt as string)} +
  • + Extras + + {ticket.userTicketAddons.length ? ( + ticket.userTicketAddons + .map((addon) => { + const addonData = addons.find( + (a) => a.id === addon.addonId, + ); + + if (!addonData) { + return; + } + + return
    {addonData.name}
    ; + }) + .filter(Boolean) + ) : ( + Ninguno + )} +     +
    • diff --git a/app/components/MyEvent/graphql/claimUserTicketAddons.generated.tsx b/app/components/MyEvent/graphql/claimUserTicketAddons.generated.tsx new file mode 100644 index 0000000..4bcdb36 --- /dev/null +++ b/app/components/MyEvent/graphql/claimUserTicketAddons.generated.tsx @@ -0,0 +1,102 @@ +/* eslint-disable @typescript-eslint/ban-ts-comment */ +// @ts-nocheck +/* eslint-disable */ +/* prettier-ignore */ +/* This file is automatically generated. Please do not modify it manually. */ +import * as Types from '../../../api/gql/graphql'; + +import { gql } from "graphql-tag"; +import * as Apollo from "@apollo/client"; +const defaultOptions = {} as const; +export type ClaimUserTicketAddonsMutationVariables = Types.Exact<{ + addonsClaims: + | Array + | Types.ClaimUserTicketAddonInput; +}>; + +export type ClaimUserTicketAddonsMutation = { + __typename?: "Mutation"; + claimUserTicketAddons: + | { + __typename: "PurchaseOrder"; + id: string; + status?: Types.PurchaseOrderStatusEnum | null; + userTicketAddons: Array<{ + __typename?: "UserTicketAddon"; + id: string; + approvalStatus: Types.UserTicketAddonApprovalStatus; + redemptionStatus: Types.UserTicketAddonStatus; + }>; + } + | { + __typename: "RedeemUserTicketAddonsError"; + error: boolean; + errorMessage: string; + }; +}; + +export const ClaimUserTicketAddonsDocument = gql` + mutation claimUserTicketAddons($addonsClaims: [ClaimUserTicketAddonInput!]!) { + claimUserTicketAddons(addonsClaims: $addonsClaims) { + __typename + ... on PurchaseOrder { + __typename + id + status + userTicketAddons { + id + approvalStatus + redemptionStatus + } + } + ... on RedeemUserTicketAddonsError { + __typename + error + errorMessage + } + } + } +`; +export type ClaimUserTicketAddonsMutationFn = Apollo.MutationFunction< + ClaimUserTicketAddonsMutation, + ClaimUserTicketAddonsMutationVariables +>; + +/** + * __useClaimUserTicketAddonsMutation__ + * + * To run a mutation, you first call `useClaimUserTicketAddonsMutation` within a React component and pass it any options that fit your needs. + * When your component renders, `useClaimUserTicketAddonsMutation` returns a tuple that includes: + * - A mutate function that you can call at any time to execute the mutation + * - An object with fields that represent the current status of the mutation's execution + * + * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2; + * + * @example + * const [claimUserTicketAddonsMutation, { data, loading, error }] = useClaimUserTicketAddonsMutation({ + * variables: { + * addonsClaims: // value for 'addonsClaims' + * }, + * }); + */ +export function useClaimUserTicketAddonsMutation( + baseOptions?: Apollo.MutationHookOptions< + ClaimUserTicketAddonsMutation, + ClaimUserTicketAddonsMutationVariables + >, +) { + const options = { ...defaultOptions, ...baseOptions }; + return Apollo.useMutation< + ClaimUserTicketAddonsMutation, + ClaimUserTicketAddonsMutationVariables + >(ClaimUserTicketAddonsDocument, options); +} +export type ClaimUserTicketAddonsMutationHookResult = ReturnType< + typeof useClaimUserTicketAddonsMutation +>; +export type ClaimUserTicketAddonsMutationResult = + Apollo.MutationResult; +export type ClaimUserTicketAddonsMutationOptions = Apollo.BaseMutationOptions< + ClaimUserTicketAddonsMutation, + ClaimUserTicketAddonsMutationVariables +>; diff --git a/app/components/MyEvent/graphql/claimUserTicketAddons.gql b/app/components/MyEvent/graphql/claimUserTicketAddons.gql new file mode 100644 index 0000000..0a82f3e --- /dev/null +++ b/app/components/MyEvent/graphql/claimUserTicketAddons.gql @@ -0,0 +1,20 @@ +mutation claimUserTicketAddons($addonsClaims: [ClaimUserTicketAddonInput!]!) { + claimUserTicketAddons(addonsClaims: $addonsClaims) { + __typename + ... on PurchaseOrder { + __typename + id + status + userTicketAddons { + id + approvalStatus + redemptionStatus + } + } + ... on RedeemUserTicketAddonsError { + __typename + error + errorMessage + } + } +} diff --git a/app/components/MyEvent/graphql/myEvent.generated.tsx b/app/components/MyEvent/graphql/myEvent.generated.tsx index 0d9ee4b..a3a426f 100644 --- a/app/components/MyEvent/graphql/myEvent.generated.tsx +++ b/app/components/MyEvent/graphql/myEvent.generated.tsx @@ -49,6 +49,10 @@ export type MyEventQuery = { name: string; description?: string | null; }; + userTicketAddons: Array<{ + __typename?: "UserTicketAddon"; + addonId: string; + }>; }>; }>; pagination: { @@ -101,6 +105,9 @@ export const MyEventDocument = gql` name description } + userTicketAddons { + addonId + } } } pagination { diff --git a/app/components/MyEvent/graphql/myEvent.gql b/app/components/MyEvent/graphql/myEvent.gql index 5445dfe..1f45805 100644 --- a/app/components/MyEvent/graphql/myEvent.gql +++ b/app/components/MyEvent/graphql/myEvent.gql @@ -37,6 +37,9 @@ query myEvent( name description } + userTicketAddons { + addonId + } } } pagination { diff --git a/app/components/MyEvent/graphql/myEventAddons.generated.tsx b/app/components/MyEvent/graphql/myEventAddons.generated.tsx new file mode 100644 index 0000000..af0040c --- /dev/null +++ b/app/components/MyEvent/graphql/myEventAddons.generated.tsx @@ -0,0 +1,135 @@ +/* eslint-disable @typescript-eslint/ban-ts-comment */ +// @ts-nocheck +/* eslint-disable */ +/* prettier-ignore */ +/* This file is automatically generated. Please do not modify it manually. */ +import * as Types from '../../../api/gql/graphql'; + +import { gql } from "graphql-tag"; +import * as Apollo from "@apollo/client"; +const defaultOptions = {} as const; +export type MyEventAddonsQueryVariables = Types.Exact<{ + eventId: Types.Scalars["String"]["input"]; +}>; + +export type MyEventAddonsQuery = { + __typename?: "Query"; + searchAddons: Array<{ + __typename?: "Addon"; + id: string; + description?: string | null; + isFree: boolean; + maxPerTicket?: number | null; + name: string; + totalStock?: number | null; + constraints: Array<{ + __typename?: "AddonConstraint"; + id: string; + addonId: string; + relatedAddonId: string; + constraintType: Types.AddonConstraintType; + }>; + ticketAddons: Array<{ + __typename?: "TicketAddon"; + id: string; + addonId: string; + orderDisplay: number; + ticketId: string; + }>; + }>; +}; + +export const MyEventAddonsDocument = gql` + query myEventAddons($eventId: String!) { + searchAddons(eventId: $eventId) { + id + description + isFree + maxPerTicket + name + totalStock + constraints { + id + addonId + relatedAddonId + constraintType + } + ticketAddons { + id + addonId + orderDisplay + ticketId + } + } + } +`; + +/** + * __useMyEventAddonsQuery__ + * + * To run a query within a React component, call `useMyEventAddonsQuery` and pass it any options that fit your needs. + * When your component renders, `useMyEventAddonsQuery` returns an object from Apollo Client that contains loading, error, and data properties + * you can use to render your UI. + * + * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options; + * + * @example + * const { data, loading, error } = useMyEventAddonsQuery({ + * variables: { + * eventId: // value for 'eventId' + * }, + * }); + */ +export function useMyEventAddonsQuery( + baseOptions: Apollo.QueryHookOptions< + MyEventAddonsQuery, + MyEventAddonsQueryVariables + > & + ( + | { variables: MyEventAddonsQueryVariables; skip?: boolean } + | { skip: boolean } + ), +) { + const options = { ...defaultOptions, ...baseOptions }; + return Apollo.useQuery( + MyEventAddonsDocument, + options, + ); +} +export function useMyEventAddonsLazyQuery( + baseOptions?: Apollo.LazyQueryHookOptions< + MyEventAddonsQuery, + MyEventAddonsQueryVariables + >, +) { + const options = { ...defaultOptions, ...baseOptions }; + return Apollo.useLazyQuery( + MyEventAddonsDocument, + options, + ); +} +export function useMyEventAddonsSuspenseQuery( + baseOptions?: Apollo.SuspenseQueryHookOptions< + MyEventAddonsQuery, + MyEventAddonsQueryVariables + >, +) { + const options = { ...defaultOptions, ...baseOptions }; + return Apollo.useSuspenseQuery< + MyEventAddonsQuery, + MyEventAddonsQueryVariables + >(MyEventAddonsDocument, options); +} +export type MyEventAddonsQueryHookResult = ReturnType< + typeof useMyEventAddonsQuery +>; +export type MyEventAddonsLazyQueryHookResult = ReturnType< + typeof useMyEventAddonsLazyQuery +>; +export type MyEventAddonsSuspenseQueryHookResult = ReturnType< + typeof useMyEventAddonsSuspenseQuery +>; +export type MyEventAddonsQueryResult = Apollo.QueryResult< + MyEventAddonsQuery, + MyEventAddonsQueryVariables +>; diff --git a/app/components/MyEvent/graphql/myEventAddons.gql b/app/components/MyEvent/graphql/myEventAddons.gql new file mode 100644 index 0000000..640370e --- /dev/null +++ b/app/components/MyEvent/graphql/myEventAddons.gql @@ -0,0 +1,22 @@ +query myEventAddons($eventId: String!) { + searchAddons(eventId: $eventId) { + id + description + isFree + maxPerTicket + name + totalStock + constraints { + id + addonId + relatedAddonId + constraintType + } + ticketAddons { + id + addonId + orderDisplay + ticketId + } + } +} diff --git a/app/components/TicketsSaleFlow/TicketSelectionTab.tsx b/app/components/TicketsSaleFlow/TicketSelectionTab.tsx index 1cc770e..dcce85a 100644 --- a/app/components/TicketsSaleFlow/TicketSelectionTab.tsx +++ b/app/components/TicketsSaleFlow/TicketSelectionTab.tsx @@ -44,7 +44,7 @@ const MobileCard = ({
    -
    {item.name}
    +
    {item.name}
    {" "} {item.isFree || !item.prices?.length @@ -94,7 +94,9 @@ const MobileCard = ({ > {isExpanded ? "Esconder Detalles" : "Ver Detalles"} - {isExpanded &&

    {item.description}

    } + {isExpanded && ( +
    {item.description}
    + )} );