feat(event.ticketSearch): allow coupon by param or by form

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] ?? {};

app/api/gql/graphql.ts

@@ -325,6 +325,7 @@ export type EventsSearchInput = {
 };
 
 export type EventsTicketTemplateSearchInput = {
+  coupon?: InputMaybe<Scalars["String"]["input"]>;
   tags?: InputMaybe<Array<Scalars["String"]["input"]>>;
 };
 
@@ -1897,7 +1898,8 @@ export type CreatePurchaseOrderMutation = {
 };
 
 export type GetEventAndTicketsQueryVariables = Exact<{
-  input: Scalars["String"]["input"];
+  id: Scalars["String"]["input"];
+  coupon?: InputMaybe<Scalars["String"]["input"]>;
 }>;
 
 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: [

app/api/gql/schema.gql

@@ -330,6 +330,7 @@ input EventsSearchInput {
 }
 
 input EventsTicketTemplateSearchInput {
+  coupon: String
   tags: [String!]
 }
 

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<Types.Scalars["String"]["input"]>;
 }>;
 
 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'
  *   },
  * });
  */

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
     }
   }

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 (
     <main className="mx-auto flex w-full max-w-[1360px] px-6 py-12">
       <Suspense fallback={<TicketsSaleFlowSkeleton />}>
         <div className="flex w-full flex-col gap-10">
-          <LoadTickets id={id} />
+          <LoadTickets id={id} coupon={coupon} />
         </div>
       </Suspense>
     </main>

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
             </p>
           </div>
-          <div className="ml-auto flex w-full gap-4">
+          <div className="ml-auto flex w-full flex-col gap-4">
+            <div className="flex w-full gap-2 md:justify-end">
+              <Input
+                className="w-full md:w-[240px]"
+                placeholder="Cupón de Descuento"
+                value={coupon}
+                onChange={(e) => setCoupon(e.target.value)}
+              />
+              <Button
+                disabled={!coupon.length}
+                onClick={() => {
+                  window.location.href = urls.events.tickets(event.id, coupon);
+                }}
+              >
+                Aplicar
+              </Button>
+            </div>
             {Object.values(currencies).length > 1 ? (
-              <div className="flex w-full flex-col items-start justify-start gap-4 md:flex-row md:items-center md:justify-end">
-                <span className="text-muted-foreground">Tipo de Moneda</span>
-                <Select
-                  onValueChange={handleChangeCurrency}
-                  defaultValue={selectedCurrencyId}
-                >
-                  <SelectTrigger className="w-full md:w-[100px]">
-                    <SelectValue placeholder="Selecciona una Moneda" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectGroup>
-                      {Object.values(currencies).map((currency) => (
-                        <SelectItem key={currency.id} value={currency.id}>
-                          {currency.currency}
-                        </SelectItem>
-                      ))}
-                    </SelectGroup>
-                  </SelectContent>
-                </Select>
+              <div className="ml-auto flex w-full gap-4">
+                <div className="flex w-full flex-col items-start justify-start gap-4 md:flex-row md:items-center md:justify-end">
+                  <span className="text-muted-foreground">Tipo de Moneda</span>
+                  <Select
+                    onValueChange={handleChangeCurrency}
+                    defaultValue={selectedCurrencyId}
+                  >
+                    <SelectTrigger className="w-full md:w-[100px]">
+                      <SelectValue placeholder="Selecciona una Moneda" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectGroup>
+                        {Object.values(currencies).map((currency) => (
+                          <SelectItem key={currency.id} value={currency.id}>
+                            {currency.currency}
+                          </SelectItem>
+                        ))}
+                      </SelectGroup>
+                    </SelectContent>
+                  </Select>
+                </div>
               </div>
             ) : null}
           </div>

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 <EventPage id={eventId} />;
+  return <EventPage id={eventId} coupon={coupon} />;
 }

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`,