Skip to content

Commit

Permalink
feat(myTransfer): accept transfered ticket
Browse files Browse the repository at this point in the history
  • Loading branch information
joseglego committed Nov 4, 2024
1 parent 1666032 commit a325bc3
Show file tree
Hide file tree
Showing 5 changed files with 250 additions and 4 deletions.
8 changes: 8 additions & 0 deletions app/api/gql/gql.ts
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,8 @@ const documents = {
types.MyEventsDocument,
"query MyPurchaseOrders($input: PaginatedInputMyPurchaseOrdersInput!) {\n myPurchaseOrders(input: $input) {\n data {\n id\n finalPrice\n paymentPlatform\n createdAt\n currency {\n id\n currency\n }\n tickets {\n id\n ticketTemplate {\n id\n name\n event {\n id\n name\n }\n }\n }\n }\n }\n}":
types.MyPurchaseOrdersDocument,
"mutation AcceptTransferredTicket($transferId: String!) {\n acceptTransferredTicket(transferId: $transferId) {\n id\n status\n userTicket {\n id\n user {\n id\n }\n }\n }\n}":
types.AcceptTransferredTicketDocument,
"query myTicketTransfers {\n myTicketTransfers {\n createdAt\n expirationDate\n id\n recipient {\n email\n name\n }\n sender {\n email\n name\n }\n status\n transferMessage\n userTicket {\n id\n ticketTemplate {\n name\n event {\n id\n name\n }\n }\n }\n }\n}":
types.MyTicketTransfersDocument,
"query SearchUsers($input: PaginatedInputUserSearchValues!) {\n userSearch(input: $input) {\n data {\n id\n username\n name\n lastName\n imageUrl\n email\n }\n pagination {\n currentPage\n pageSize\n totalPages\n totalRecords\n }\n }\n}":
Expand Down Expand Up @@ -85,6 +87,12 @@ export function graphql(
export function graphql(
source: "query MyPurchaseOrders($input: PaginatedInputMyPurchaseOrdersInput!) {\n myPurchaseOrders(input: $input) {\n data {\n id\n finalPrice\n paymentPlatform\n createdAt\n currency {\n id\n currency\n }\n tickets {\n id\n ticketTemplate {\n id\n name\n event {\n id\n name\n }\n }\n }\n }\n }\n}",
): (typeof documents)["query MyPurchaseOrders($input: PaginatedInputMyPurchaseOrdersInput!) {\n myPurchaseOrders(input: $input) {\n data {\n id\n finalPrice\n paymentPlatform\n createdAt\n currency {\n id\n currency\n }\n tickets {\n id\n ticketTemplate {\n id\n name\n event {\n id\n name\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.
*/
export function graphql(
source: "mutation AcceptTransferredTicket($transferId: String!) {\n acceptTransferredTicket(transferId: $transferId) {\n id\n status\n userTicket {\n id\n user {\n id\n }\n }\n }\n}",
): (typeof documents)["mutation AcceptTransferredTicket($transferId: String!) {\n acceptTransferredTicket(transferId: $transferId) {\n id\n status\n userTicket {\n id\n user {\n id\n }\n }\n }\n}"];
/**
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
*/
Expand Down
90 changes: 90 additions & 0 deletions app/api/gql/graphql.ts
Original file line number Diff line number Diff line change
Expand Up @@ -1698,6 +1698,18 @@ export type MyPurchaseOrdersQuery = {
};
};

export type AcceptTransferredTicketMutationVariables = Exact<{
transferId: Scalars["String"]["input"];
}>;

export type AcceptTransferredTicketMutation = {
acceptTransferredTicket: {
id: string;
status: TicketTransferAttemptStatus;
userTicket: { id: string; user?: { id: string } | null };
};
};

export type MyTicketTransfersQueryVariables = Exact<{ [key: string]: never }>;

export type MyTicketTransfersQuery = {
Expand Down Expand Up @@ -2755,6 +2767,84 @@ export const MyPurchaseOrdersDocument = {
MyPurchaseOrdersQuery,
MyPurchaseOrdersQueryVariables
>;
export const AcceptTransferredTicketDocument = {
kind: "Document",
definitions: [
{
kind: "OperationDefinition",
operation: "mutation",
name: { kind: "Name", value: "AcceptTransferredTicket" },
variableDefinitions: [
{
kind: "VariableDefinition",
variable: {
kind: "Variable",
name: { kind: "Name", value: "transferId" },
},
type: {
kind: "NonNullType",
type: {
kind: "NamedType",
name: { kind: "Name", value: "String" },
},
},
},
],
selectionSet: {
kind: "SelectionSet",
selections: [
{
kind: "Field",
name: { kind: "Name", value: "acceptTransferredTicket" },
arguments: [
{
kind: "Argument",
name: { kind: "Name", value: "transferId" },
value: {
kind: "Variable",
name: { kind: "Name", value: "transferId" },
},
},
],
selectionSet: {
kind: "SelectionSet",
selections: [
{ kind: "Field", name: { kind: "Name", value: "id" } },
{ kind: "Field", name: { kind: "Name", value: "status" } },
{
kind: "Field",
name: { kind: "Name", value: "userTicket" },
selectionSet: {
kind: "SelectionSet",
selections: [
{ kind: "Field", name: { kind: "Name", value: "id" } },
{
kind: "Field",
name: { kind: "Name", value: "user" },
selectionSet: {
kind: "SelectionSet",
selections: [
{
kind: "Field",
name: { kind: "Name", value: "id" },
},
],
},
},
],
},
},
],
},
},
],
},
},
],
} as unknown as DocumentNode<
AcceptTransferredTicketMutation,
AcceptTransferredTicketMutationVariables
>;
export const MyTicketTransfersDocument = {
kind: "Document",
definitions: [
Expand Down
59 changes: 55 additions & 4 deletions app/components/MyTransfers/MyTransfers.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,11 @@
import { Link } from "@remix-run/react";
import { ArrowUpRight } from "lucide-react";
import { useState } from "react";
import { toast } from "sonner";

import { TicketTransferAttemptStatus } from "~/api/gql/graphql";
import { useMyProfileSuspenseQuery } from "~/components/Profile/graphql/myProfile.generated";
import { buttonVariants } from "~/components/ui/button";
import { Button, buttonVariants } from "~/components/ui/button";
import { Card, CardContent } from "~/components/ui/card";
import {
Table,
Expand All @@ -17,7 +20,11 @@ import { urls } from "~/utils/urls";
import { statusColor, statusLabel } from "~/utils/userTicketTransfer";
import { cn } from "~/utils/utils";

import { useMyTicketTransfersSuspenseQuery } from "./graphql/myTransfers.generated";
import { useAcceptTransferredTicketMutation } from "./graphql/acceptTransferedTicket.generated";
import {
MyTicketTransfersQuery,
useMyTicketTransfersSuspenseQuery,
} from "./graphql/myTransfers.generated";

interface MinUser {
email: string;
Expand All @@ -32,18 +39,50 @@ const getUserInfo = (user: MinUser, me: MinUser) => {
return user.name ? user.name : user.email;
};

type TicketTransfer = MyTicketTransfersQuery["myTicketTransfers"][0];

export const MyTransfers = () => {
const {
data: { me },
} = useMyProfileSuspenseQuery();
const { data } = useMyTicketTransfersSuspenseQuery();

const [acceptTicket] = useAcceptTransferredTicketMutation();
const [isDisabled, setIsDisabled] = useState<Record<string, boolean>>({});
const myTicketTransfers = data?.myTicketTransfers;
const sortedTickets = [...myTicketTransfers].sort(
(ticketTransfer1, ticketTransfer2) =>
ticketTransfer1.createdAt > ticketTransfer2.createdAt ? -1 : 1,
);

const handleAcceptTransfer = async (ticketTransfer: TicketTransfer) => {
setIsDisabled((prev) => ({ ...prev, [ticketTransfer.id]: true }));

await acceptTicket({
variables: {
transferId: ticketTransfer.id,
},
onCompleted(data) {
if (data.acceptTransferredTicket.id) {
setIsDisabled((prev) => ({ ...prev, [ticketTransfer.id]: false }));
toast.success(
`La transferenciaha se ha confirmado exitosamente. Hemos notificado al ${ticketTransfer.sender.email}.`,
);
} else {
setIsDisabled((prev) => ({ ...prev, [ticketTransfer.id]: false }));
toast.error(
"Ocurrió un error al intentar confirmar la transferencia. Por favor intenta de nuevo.",
);
}
},
onError() {
setIsDisabled((prev) => ({ ...prev, [ticketTransfer.id]: false }));
toast.error(
"Ocurrió un error al intentar confirmar la transferencia. Por favor intenta de nuevo.",
);
},
});
};

return (
<div className="flex flex-col gap-10">
<div className="flex w-full items-center justify-between">
Expand Down Expand Up @@ -124,7 +163,7 @@ export const MyTransfers = () => {
<TableCell className="h-[52px] text-center">
{getUserInfo(ticketTransfer.recipient, me as MinUser)}
</TableCell>
<TableCell className="h-[52px]">
<TableCell className="flex h-[52px] justify-center gap-2">
<span className="flex flex-row items-center justify-center gap-2">
<span
className={cn(
Expand All @@ -134,6 +173,18 @@ export const MyTransfers = () => {
/>
{statusLabel(ticketTransfer.status)}
</span>
{ticketTransfer.status ===
TicketTransferAttemptStatus.Pending &&
me.email === ticketTransfer.recipient.email ? (
<Button
onClick={() =>
void handleAcceptTransfer(ticketTransfer)
}
disabled={isDisabled[ticketTransfer.id] ?? false}
>
Aceptar
</Button>
) : null}
</TableCell>
</TableRow>
);
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
/* 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 AcceptTransferredTicketMutationVariables = Types.Exact<{
transferId: Types.Scalars["String"]["input"];
}>;

export type AcceptTransferredTicketMutation = {
__typename?: "Mutation";
acceptTransferredTicket: {
__typename?: "UserTicketTransfer";
id: string;
status: Types.TicketTransferAttemptStatus;
userTicket: {
__typename?: "UserTicket";
id: string;
user?: { __typename?: "User"; id: string } | null;
};
};
};

export const AcceptTransferredTicketDocument = gql`
mutation AcceptTransferredTicket($transferId: String!) {
acceptTransferredTicket(transferId: $transferId) {
id
status
userTicket {
id
user {
id
}
}
}
}
`;
export type AcceptTransferredTicketMutationFn = Apollo.MutationFunction<
AcceptTransferredTicketMutation,
AcceptTransferredTicketMutationVariables
>;

/**
* __useAcceptTransferredTicketMutation__
*
* To run a mutation, you first call `useAcceptTransferredTicketMutation` within a React component and pass it any options that fit your needs.
* When your component renders, `useAcceptTransferredTicketMutation` 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 [acceptTransferredTicketMutation, { data, loading, error }] = useAcceptTransferredTicketMutation({
* variables: {
* transferId: // value for 'transferId'
* },
* });
*/
export function useAcceptTransferredTicketMutation(
baseOptions?: Apollo.MutationHookOptions<
AcceptTransferredTicketMutation,
AcceptTransferredTicketMutationVariables
>,
) {
const options = { ...defaultOptions, ...baseOptions };
return Apollo.useMutation<
AcceptTransferredTicketMutation,
AcceptTransferredTicketMutationVariables
>(AcceptTransferredTicketDocument, options);
}
export type AcceptTransferredTicketMutationHookResult = ReturnType<
typeof useAcceptTransferredTicketMutation
>;
export type AcceptTransferredTicketMutationResult =
Apollo.MutationResult<AcceptTransferredTicketMutation>;
export type AcceptTransferredTicketMutationOptions = Apollo.BaseMutationOptions<
AcceptTransferredTicketMutation,
AcceptTransferredTicketMutationVariables
>;
12 changes: 12 additions & 0 deletions app/components/MyTransfers/graphql/acceptTransferedTicket.gql
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
mutation AcceptTransferredTicket($transferId: String!) {
acceptTransferredTicket(transferId: $transferId) {
id
status
userTicket {
id
user {
id
}
}
}
}

0 comments on commit a325bc3

Please sign in to comment.