Skip to content

Commit

Permalink
Lego/improve mobile UI (#72)
Browse files Browse the repository at this point in the history 
## Summary
- Improve Mobile UI
  • Loading branch information
@joseglego
joseglego authored Nov 30, 2024
1 parent e1921aa commit 58331ad
Show file tree
Hide file tree
Showing 13 changed files with 445 additions and 121 deletions.
6 changes: 3 additions & 3 deletions app/api/gql/gql.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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.
*/
Expand Down
5 changes: 5 additions & 0 deletions app/api/gql/graphql.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1831,6 +1831,7 @@ export type CheckPurchaseOrderStatusMutation = {
id: string;
name: string;
description?: string | null;
isFree: boolean;
event: {
id: string;
name: string;
Expand Down Expand Up @@ -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" },
Expand Down
2 changes: 0 additions & 2 deletions app/components/LoginButton/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,5 @@ export function useGetLoginURL() {
url.search = searchParams.toString();
}

console.info(url.toString());

return url.toString();
}
2 changes: 0 additions & 2 deletions app/components/Navbar/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,6 @@ export const Navbar = () => {
});
const loginURL = useGetLoginURL();

console.log({ loginURL });

const { impersonation, setImpersonation } = useAuthContext();

const [impersonateModal, setImpersonateModal] = useState(false);
Expand Down
89 changes: 83 additions & 6 deletions app/components/PurchaseOrder/Callback.tsx
View file
Original file line number Diff line number Diff line change
@@ -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 {
Expand All @@ -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,
Expand All @@ -29,6 +29,7 @@ import {
useCheckPurchaseOrderStatusMutation,
CheckPurchaseOrderStatusMutation,
} from "./graphql/checkPurchaseOrderStatus.generated";
import { TicketAmountInput } from "../TicketsSaleFlow/inputs";

type PurchaseCallbackProps = {
purchaseOrderId: string;
Expand Down Expand Up @@ -106,7 +107,7 @@ const PurchaseStatusAlert = ({
return (
<Alert
variant={alertVariant}
className={cn(alertInfo.classNames, "[&>svg~*]:pl-11")}
className={cn(alertInfo.classNames, "w-full [&>svg~*]:pl-11")}
>
{alertInfo.icon}
<AlertTitle>{alertInfo.title}</AlertTitle>
Expand All @@ -115,6 +116,49 @@ const PurchaseStatusAlert = ({
);
};

const MobileCard = ({
ticket,
count,
selectedCurrency,
}: {
ticket: Ticket;
count: number;
selectedCurrency: Currency;
}) => {
const [isExpanded, setIsExpanded] = useState(false);

return (
<Card className="w-full">
<CardHeader className="cursor-pointer p-4 pb-0">
<CardTitle className="flex items-center justify-between">
<div className="flex flex-col gap-2">
<div>{ticket.name}</div>
<div>
{ticket.isFree && selectedCurrency
? "Gratis"
: getFormmatedTicketPrice(ticket, selectedCurrency)}
</div>
</div>
<div className="text-lg font-bold">
<TicketAmountInput disabled value={count} onChange={() => {}} />
</div>
</CardTitle>
</CardHeader>
<CardContent className="p-4">
<button
className={cn(buttonVariants({ variant: "link" }), "p-0")}
onClick={() => {
setIsExpanded((isExpanded) => !isExpanded);
}}
>
{isExpanded ? "Esconder Detalles" : "Ver Detalles"}
</button>
{isExpanded && <p>{ticket.description}</p>}
</CardContent>
</Card>
);
};

export const PurchaseCallback = ({
purchaseOrderId,
}: PurchaseCallbackProps) => {
Expand Down Expand Up @@ -180,15 +224,18 @@ export const PurchaseCallback = ({
}

return (
<div className="mx-auto flex max-w-[856px] flex-col gap-9">
<div className="mx-auto flex w-full max-w-[856px] flex-col gap-9">
<img
className="mx-auto w-60"
src={event.logoImage?.url}
alt={event.name}
/>
<PurchaseStatusAlert status={purchaseOrder.status} />
<Card className="mx-auto">
<CardContent>
<Card className="hidden sm:block">
<CardContent className="pb-2">
<h2 className="mt-4 text-2xl font-bold leading-[52px]">
Entrada General
</h2>
<Table>
<TableHeader>
<TableRow className="border-t hover:bg-transparent">
Expand Down Expand Up @@ -250,6 +297,36 @@ export const PurchaseCallback = ({
</Table>
</CardContent>
</Card>
<div className="space-y-8 sm:hidden">
<h2 className="mt-4 text-2xl font-bold leading-[52px]">
Entrada General
</h2>
<div className="space-y-4">
{tickets.map(({ count, ticket }) => (
<MobileCard
key={ticket.id}
ticket={ticket}
count={count}
selectedCurrency={selectedCurrency as Currency}
/>
))}
</div>
<div className="mt-12 flex justify-between gap-2">
<div className="text-lg font-bold uppercase">
{purchaseOrder.status !== PurchaseOrderStatusEnum.Complete
? "Total a Pagar"
: null}
</div>
<div className="text-lg font-bold">
{purchaseOrder.finalPrice
? formatCurrency(
purchaseOrder.finalPrice,
selectedCurrency?.currency as string,
)
: "Gratis"}
</div>
</div>
</div>
{purchaseOrder.status === PurchaseOrderStatusEnum.Expired && (
<div className="mt-2 flex justify-end gap-2">
<Link
Expand Down
67 changes: 50 additions & 17 deletions app/components/PurchaseOrder/CallbackLoadingSkeleton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,16 +9,46 @@ import {
TableRow,
} from "~/components/ui/table";

const TableRowSkeletonTicket = () => (
<TableRow>
<TableCell className="p-4 text-center">
<Skeleton className="mx-auto h-4 w-24" />
</TableCell>
<TableCell className="text-center">
<Skeleton className="mx-auto h-4 w-96" />
</TableCell>
<TableCell className="text-center">
<Skeleton className="mx-auto h-4 w-12" />
</TableCell>
<TableCell className="text-center">
<Skeleton className="mx-auto h-4 w-24" />
</TableCell>
</TableRow>
);

const MobileSkeletonTicket = () => (
<Card className="w-full p-0">
<CardContent className="flex flex-col gap-2 p-4">
<Skeleton className="h-8 w-64" />
<Skeleton className="h-8 w-24" />
<Skeleton className="mt-2 h-8 w-32" />
</CardContent>
</Card>
);

export const CallbackLoadingSkeleton = () => {
const tickets = Array.from({ length: 5 }).map((_, index) => index);

return (
<div className="mx-auto flex max-w-[856px] flex-col gap-9">
<div className="mx-auto flex w-full max-w-[856px] flex-col gap-9">
<div className="flex basis-4/12 flex-col gap-4">
<Skeleton className="mx-auto h-40 w-60 rounded-md" />
<Skeleton className="mx-auto h-16 w-full rounded-md" />
<Card>
<CardContent>
<Card className="hidden sm:block">
<CardContent className="pb-2">
<h2 className="mt-4 text-2xl font-bold leading-[52px]">
Entrada General
</h2>
<Table>
<TableHeader>
<TableRow className="border-t hover:bg-transparent">
Expand All @@ -38,25 +68,28 @@ export const CallbackLoadingSkeleton = () => {
</TableHeader>
<TableBody>
{tickets.map((ticket: number) => (
<TableRow key={ticket}>
<TableCell className="p-4 py-6 text-center font-bold">
<Skeleton className="mx-auto h-4 w-24" />
</TableCell>
<TableCell className="py-6 text-center text-muted-foreground">
<Skeleton className="mx-auto h-4 w-96" />
</TableCell>
<TableCell className="py-6 text-center">
<Skeleton className="mx-auto h-4 w-12" />
</TableCell>
<TableCell className="py-6 text-center font-bold">
<Skeleton className="mx-auto h-4 w-24" />
</TableCell>
</TableRow>
<TableRowSkeletonTicket key={ticket} />
))}
</TableBody>
</Table>
</CardContent>
</Card>
<div className="space-y-8 sm:hidden">
<h2 className="mt-4 text-2xl font-bold leading-[52px]">
Entrada General
</h2>
<div className="space-y-4">
{tickets.map((ticket: number) => (
<MobileSkeletonTicket key={ticket} />
))}
</div>
<div className="mt-12 flex justify-between gap-2">
<div className="text-lg font-bold uppercase">Total a Pagar</div>
<div className="text-lg font-bold">
<Skeleton className="h-8 w-32" />
</div>
</div>
</div>
<div className="mt-2 flex w-full flex-col justify-end gap-2 md:flex-row">
<Skeleton className="h-8 w-full md:w-32" />
<Skeleton className="h-8 w-full md:w-32" />
Expand Down
2 changes: 2 additions & 0 deletions app/components/PurchaseOrder/graphql/checkPurchaseOrderStatus.generated.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ export type CheckPurchaseOrderStatusMutation = {
id: string;
name: string;
description?: string | null;
isFree: boolean;
event: {
__typename?: "Event";
id: string;
Expand Down Expand Up @@ -92,6 +93,7 @@ export const CheckPurchaseOrderStatusDocument = gql`
id
name
description
isFree
event {
id
name
Expand Down
1 change: 1 addition & 0 deletions app/components/PurchaseOrder/graphql/checkPurchaseOrderStatus.gql
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ mutation CheckPurchaseOrderStatus($input: CheckForPurchaseOrderInput!) {
id
name
description
isFree
event {
id
name
Expand Down
Loading

0 comments on commit 58331ad

Please sign in to comment.