diff --git a/app/api/gql/gql.ts b/app/api/gql/gql.ts index dd7f025..41497cc 100644 --- a/app/api/gql/gql.ts +++ b/app/api/gql/gql.ts @@ -41,7 +41,7 @@ const documents = { types.EventTicketFragmentFragmentDoc, "mutation createPurchaseOrder($input: TicketClaimInput!) {\n claimUserTicket(input: $input) {\n __typename\n ... on PurchaseOrder {\n __typename\n id\n currency {\n id\n }\n finalPrice\n paymentLink\n status\n tickets {\n id\n approvalStatus\n redemptionStatus\n paymentStatus\n }\n }\n ... on RedeemUserTicketError {\n __typename\n error\n errorMessage\n }\n }\n}": types.CreatePurchaseOrderDocument, - "query getEventAndTickets($input: String!) {\n event(id: $input) {\n id\n name\n address\n description\n startDateTime\n endDateTime\n status\n logoImage {\n url\n }\n bannerImage {\n url\n }\n mobileBannerImage {\n url\n }\n community {\n name\n }\n users {\n id\n name\n }\n tickets {\n ...EventTicketFragment\n }\n }\n}": + "query getEventAndTickets($id: String!, $coupon: String) {\n event(id: $id) {\n id\n name\n address\n description\n startDateTime\n endDateTime\n status\n logoImage {\n url\n }\n bannerImage {\n url\n }\n mobileBannerImage {\n url\n }\n community {\n name\n }\n users {\n id\n name\n }\n tickets(input: {coupon: $coupon}) {\n ...EventTicketFragment\n }\n }\n}": types.GetEventAndTicketsDocument, }; @@ -147,8 +147,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: "query getEventAndTickets($input: String!) {\n event(id: $input) {\n id\n name\n address\n description\n startDateTime\n endDateTime\n status\n logoImage {\n url\n }\n bannerImage {\n url\n }\n mobileBannerImage {\n url\n }\n community {\n name\n }\n users {\n id\n name\n }\n tickets {\n ...EventTicketFragment\n }\n }\n}", -): (typeof documents)["query getEventAndTickets($input: String!) {\n event(id: $input) {\n id\n name\n address\n description\n startDateTime\n endDateTime\n status\n logoImage {\n url\n }\n bannerImage {\n url\n }\n mobileBannerImage {\n url\n }\n community {\n name\n }\n users {\n id\n name\n }\n tickets {\n ...EventTicketFragment\n }\n }\n}"]; + source: "query getEventAndTickets($id: String!, $coupon: String) {\n event(id: $id) {\n id\n name\n address\n description\n startDateTime\n endDateTime\n status\n logoImage {\n url\n }\n bannerImage {\n url\n }\n mobileBannerImage {\n url\n }\n community {\n name\n }\n users {\n id\n name\n }\n tickets(input: {coupon: $coupon}) {\n ...EventTicketFragment\n }\n }\n}", +): (typeof documents)["query getEventAndTickets($id: String!, $coupon: String) {\n event(id: $id) {\n id\n name\n address\n description\n startDateTime\n endDateTime\n status\n logoImage {\n url\n }\n bannerImage {\n url\n }\n mobileBannerImage {\n url\n }\n community {\n name\n }\n users {\n id\n name\n }\n tickets(input: {coupon: $coupon}) {\n ...EventTicketFragment\n }\n }\n}"]; export function graphql(source: string) { return (documents as any)[source] ?? {}; diff --git a/app/api/gql/graphql.ts b/app/api/gql/graphql.ts index 2382061..cb4f948 100644 --- a/app/api/gql/graphql.ts +++ b/app/api/gql/graphql.ts @@ -325,6 +325,7 @@ export type EventsSearchInput = { }; export type EventsTicketTemplateSearchInput = { + coupon?: InputMaybe; tags?: InputMaybe>; }; @@ -1897,7 +1898,8 @@ export type CreatePurchaseOrderMutation = { }; export type GetEventAndTicketsQueryVariables = Exact<{ - input: Scalars["String"]["input"]; + id: Scalars["String"]["input"]; + coupon?: InputMaybe; }>; export type GetEventAndTicketsQuery = { @@ -3668,10 +3670,7 @@ export const GetEventAndTicketsDocument = { variableDefinitions: [ { kind: "VariableDefinition", - variable: { - kind: "Variable", - name: { kind: "Name", value: "input" }, - }, + variable: { kind: "Variable", name: { kind: "Name", value: "id" } }, type: { kind: "NonNullType", type: { @@ -3680,6 +3679,14 @@ export const GetEventAndTicketsDocument = { }, }, }, + { + kind: "VariableDefinition", + variable: { + kind: "Variable", + name: { kind: "Name", value: "coupon" }, + }, + type: { kind: "NamedType", name: { kind: "Name", value: "String" } }, + }, ], selectionSet: { kind: "SelectionSet", @@ -3693,7 +3700,7 @@ export const GetEventAndTicketsDocument = { name: { kind: "Name", value: "id" }, value: { kind: "Variable", - name: { kind: "Name", value: "input" }, + name: { kind: "Name", value: "id" }, }, }, ], @@ -3764,6 +3771,25 @@ export const GetEventAndTicketsDocument = { { kind: "Field", name: { kind: "Name", value: "tickets" }, + arguments: [ + { + kind: "Argument", + name: { kind: "Name", value: "input" }, + value: { + kind: "ObjectValue", + fields: [ + { + kind: "ObjectField", + name: { kind: "Name", value: "coupon" }, + value: { + kind: "Variable", + name: { kind: "Name", value: "coupon" }, + }, + }, + ], + }, + }, + ], selectionSet: { kind: "SelectionSet", selections: [ diff --git a/app/api/gql/schema.gql b/app/api/gql/schema.gql index be48844..1f99fcc 100644 --- a/app/api/gql/schema.gql +++ b/app/api/gql/schema.gql @@ -330,6 +330,7 @@ input EventsSearchInput { } input EventsTicketTemplateSearchInput { + coupon: String tags: [String!] } diff --git a/app/components/TicketsSaleFlow/graphql/getEventAndTickets.generated.tsx b/app/components/TicketsSaleFlow/graphql/getEventAndTickets.generated.tsx index ea3cab3..838daaf 100644 --- a/app/components/TicketsSaleFlow/graphql/getEventAndTickets.generated.tsx +++ b/app/components/TicketsSaleFlow/graphql/getEventAndTickets.generated.tsx @@ -10,7 +10,8 @@ import { EventTicketFragmentFragmentDoc } from "./EventTicketFragment.generated" import * as Apollo from "@apollo/client"; const defaultOptions = {} as const; export type GetEventAndTicketsQueryVariables = Types.Exact<{ - input: Types.Scalars["String"]["input"]; + id: Types.Scalars["String"]["input"]; + coupon?: Types.InputMaybe; }>; export type GetEventAndTicketsQuery = { @@ -55,8 +56,8 @@ export type GetEventAndTicketsQuery = { }; export const GetEventAndTicketsDocument = gql` - query getEventAndTickets($input: String!) { - event(id: $input) { + query getEventAndTickets($id: String!, $coupon: String) { + event(id: $id) { id name address @@ -80,7 +81,7 @@ export const GetEventAndTicketsDocument = gql` id name } - tickets { + tickets(input: { coupon: $coupon }) { ...EventTicketFragment } } @@ -100,7 +101,8 @@ export const GetEventAndTicketsDocument = gql` * @example * const { data, loading, error } = useGetEventAndTicketsQuery({ * variables: { - * input: // value for 'input' + * id: // value for 'id' + * coupon: // value for 'coupon' * }, * }); */ diff --git a/app/components/TicketsSaleFlow/graphql/getEventAndTickets.gql b/app/components/TicketsSaleFlow/graphql/getEventAndTickets.gql index 996558d..c3178d2 100644 --- a/app/components/TicketsSaleFlow/graphql/getEventAndTickets.gql +++ b/app/components/TicketsSaleFlow/graphql/getEventAndTickets.gql @@ -1,5 +1,5 @@ -query getEventAndTickets($input: String!) { - event(id: $input) { +query getEventAndTickets($id: String!, $coupon: String) { + event(id: $id) { id name address @@ -23,7 +23,7 @@ query getEventAndTickets($input: String!) { id name } - tickets { + tickets(input: { coupon: $coupon }) { ...EventTicketFragment } } diff --git a/app/components/TicketsSaleFlow/index.tsx b/app/components/TicketsSaleFlow/index.tsx index e26cf08..23d00b8 100644 --- a/app/components/TicketsSaleFlow/index.tsx +++ b/app/components/TicketsSaleFlow/index.tsx @@ -26,10 +26,17 @@ const StatusBadge = ({ return null; }; -const LoadTickets = ({ id }: { id: string | null }) => { +const LoadTickets = ({ + id, + coupon, +}: { + id: string | null; + coupon?: string; +}) => { const { data, error } = useGetEventAndTicketsSuspenseQuery({ variables: { - input: id!, + id: id!, + ...(coupon ? { coupon } : {}), }, skip: !id, }); @@ -69,12 +76,18 @@ const LoadTickets = ({ id }: { id: string | null }) => { ); }; -export default function EventPage({ id }: { id: string }) { +export default function EventPage({ + id, + coupon, +}: { + id: string; + coupon?: string; +}) { return (
}>
- +
diff --git a/app/components/TicketsSaleFlow/ticketSaleFlow.tsx b/app/components/TicketsSaleFlow/ticketSaleFlow.tsx index c37a578..390ccf2 100644 --- a/app/components/TicketsSaleFlow/ticketSaleFlow.tsx +++ b/app/components/TicketsSaleFlow/ticketSaleFlow.tsx @@ -1,6 +1,8 @@ import { useCallback, useMemo, useState } from "react"; import { GetEventAndTicketsQuery } from "~/components/TicketsSaleFlow/graphql/getEventAndTickets.generated"; +import { Button } from "~/components/ui/button"; +import { Input } from "~/components/ui/input"; import { Select, SelectContent, @@ -11,6 +13,7 @@ import { } from "~/components/ui/select"; import { Tabs, TabsContent } from "~/components/ui/tabs"; import { formatCurrency } from "~/utils/numbers"; +import { urls } from "~/utils/urls"; import { cn } from "~/utils/utils"; import { ConfirmationTab } from "./ConfirmationTab"; @@ -51,6 +54,7 @@ export default function Tickets({ const tickets = event.tickets; const [step, setStep] = useState(0); const activeStep = steps[step]; + const [coupon, setCoupon] = useState(""); const customStep = (stepSlug: string) => { const stepIndex = steps.findIndex((step) => step.slug == stepSlug); @@ -229,27 +233,45 @@ export default function Tickets({ Selecciona la cantidad de tickets que quieres comprar

-
+
+
+ setCoupon(e.target.value)} + /> + +
{Object.values(currencies).length > 1 ? ( -
- Tipo de Moneda - +
+
+ Tipo de Moneda + +
) : null}
diff --git a/app/routes/_authenticated/events/$eventId/tickets/index.tsx b/app/routes/_authenticated/events/$eventId/tickets/index.tsx index dd9693d..57de3bd 100644 --- a/app/routes/_authenticated/events/$eventId/tickets/index.tsx +++ b/app/routes/_authenticated/events/$eventId/tickets/index.tsx @@ -1,10 +1,13 @@ -import { useParams } from "@remix-run/react"; +import { useParams, useSearchParams } from "@remix-run/react"; import EventPage from "~/components/TicketsSaleFlow"; export default function Tickets() { const params = useParams<{ eventId: string }>(); + const [searchParams] = useSearchParams(); + const eventId = params.eventId!; + const coupon = searchParams.get("coupon") ?? undefined; - return ; + return ; } diff --git a/app/utils/urls.ts b/app/utils/urls.ts index 1e0941d..8b22cf2 100644 --- a/app/utils/urls.ts +++ b/app/utils/urls.ts @@ -6,7 +6,10 @@ export const urls = { }, events: { root: "/events", - tickets: (id: string) => `/events/${id}/tickets`, + tickets: (id: string, coupon?: string) => + coupon + ? `/events/${id}/tickets?coupon=${coupon}` + : `/events/${id}/tickets`, }, myEvents: { root: `/my-events`,