From bc65b1f39aea8f0664d2a4f2d812b8a1fe2062e4 Mon Sep 17 00:00:00 2001 From: Richard Liu Date: Mon, 9 Dec 2024 16:56:27 -0800 Subject: [PATCH] add accentColor for zuzalu + zuconnect and pretix + lemonade pipelines --- .../new-components/screens/Home/NewHomeScreen.tsx | 5 +++-- .../screens/NewOneClickLoginScreen2.tsx | 4 +--- .../new-components/shared/Ticket.tsx | 15 +++++++++------ .../new-components/shared/TicketCard.tsx | 10 ++-------- .../pipelines/LemonadePipeline.ts | 7 +++++++ .../generic-issuance/pipelines/PretixPipeline.ts | 9 +++++++++ .../src/services/issuanceService.ts | 6 ++++-- .../src/genericIssuanceTypes.ts | 3 ++- .../pcd/eddsa-ticket-pcd/src/EdDSATicketPCD.ts | 1 + packages/pcd/pod-ticket-pcd/src/schema.ts | 3 ++- packages/ui/eddsa-ticket-pcd-ui/src/CardBody.tsx | 6 +++--- packages/ui/pod-ticket-pcd-ui/src/CardBody.tsx | 6 +++--- 12 files changed, 46 insertions(+), 29 deletions(-) diff --git a/apps/passport-client/new-components/screens/Home/NewHomeScreen.tsx b/apps/passport-client/new-components/screens/Home/NewHomeScreen.tsx index 76e53406b3..7b27129e10 100644 --- a/apps/passport-client/new-components/screens/Home/NewHomeScreen.tsx +++ b/apps/passport-client/new-components/screens/Home/NewHomeScreen.tsx @@ -419,8 +419,9 @@ export const NewHomeScreen = (): ReactElement => { setCurrentPos(e); }} > - {tickets.map(([eventId, packs], i) => { + {tickets.map(([eventId, packs]) => { const eventDetails = getEventDetails(packs[0]); + return ( { title={eventDetails.eventName} imgSource={eventDetails.imageUrl} ticketCount={packs.length} - cardColor={i % 2 === 0 ? "purple" : "orange"} + cardColor={eventDetails.accentColor ?? "#9a4ac9"} /> {packs.map((pack) => { diff --git a/apps/passport-client/new-components/screens/NewOneClickLoginScreen2.tsx b/apps/passport-client/new-components/screens/NewOneClickLoginScreen2.tsx index 5444374085..6ae54839e7 100644 --- a/apps/passport-client/new-components/screens/NewOneClickLoginScreen2.tsx +++ b/apps/passport-client/new-components/screens/NewOneClickLoginScreen2.tsx @@ -200,9 +200,7 @@ export const NewOneClickLoginScreen2 = (): JSX.Element | null => { address={ticketPreviews[0].eventName} imgSource={ticketPreviews[0].imageUrl} ticketCount={ticketPreviews.length} - cardColor={ - ticketPreviews[0].eventName.length % 2 ? "purple" : "orange" - } + cardColor={"rgba(154, 74, 201, 1)"} /> diff --git a/apps/passport-client/new-components/shared/Ticket.tsx b/apps/passport-client/new-components/shared/Ticket.tsx index 060786f09e..f220df8ccd 100644 --- a/apps/passport-client/new-components/shared/Ticket.tsx +++ b/apps/passport-client/new-components/shared/Ticket.tsx @@ -1,4 +1,5 @@ import { QRDisplay } from "@pcd/passport-ui"; +import { Property } from "csstype"; import styled from "styled-components"; import { Typography } from "./Typography"; @@ -30,19 +31,21 @@ interface TicketProps { name: string; type: "Speaker" | "General"; email: string; + accentColor: Property.Color; } -export const Ticket = ({ name, type, email }: TicketProps): JSX.Element => { +export const Ticket = ({ + name, + type, + email, + accentColor +}: TicketProps): JSX.Element => { return ( ; - + {name.toUpperCase()} diff --git a/apps/passport-client/new-components/shared/TicketCard.tsx b/apps/passport-client/new-components/shared/TicketCard.tsx index 197c756c92..c3c0de6f09 100644 --- a/apps/passport-client/new-components/shared/TicketCard.tsx +++ b/apps/passport-client/new-components/shared/TicketCard.tsx @@ -5,12 +5,6 @@ import { Typography } from "./Typography"; export const TicketCardHeight = 300; -type CardColor = "purple" | "orange"; -const CARD_COLORS: Record = { - purple: "rgba(154, 74, 201, 1)", - orange: "rgba(255, 115, 0, 1)" -}; - const TicketCardContainer = styled.div<{ $borderColor: Property.Color; $width: number | string; @@ -105,7 +99,7 @@ interface TicketCardProps { address?: string; ticketWidth?: number | string; ticketCount: number; - cardColor: CardColor; + cardColor: Property.Color; imgSource?: string; } export const TicketCard = forwardRef( @@ -118,7 +112,7 @@ export const TicketCard = forwardRef( {imageLoading && ( diff --git a/apps/passport-server/src/services/generic-issuance/pipelines/LemonadePipeline.ts b/apps/passport-server/src/services/generic-issuance/pipelines/LemonadePipeline.ts index 94b253516d..6d22f089d3 100644 --- a/apps/passport-server/src/services/generic-issuance/pipelines/LemonadePipeline.ts +++ b/apps/passport-server/src/services/generic-issuance/pipelines/LemonadePipeline.ts @@ -615,6 +615,11 @@ export class LemonadePipeline implements BasePipeline { ); } + private atomToAccentColor(atom: LemonadeAtom): string | undefined { + const event = this.lemonadeAtomToEvent(atom); + return event.imageOptions?.accentColor; + } + private atomToEventLocation(atom: LemonadeAtom): string | undefined { const event = this.lemonadeAtomToEvent(atom); return event.imageOptions?.eventLocation; @@ -651,6 +656,7 @@ export class LemonadePipeline implements BasePipeline { qrCodeOverrideImageUrl: event.imageOptions?.qrCodeOverrideImageUrl, eventStartDate: event.imageOptions?.eventStartDate, eventLocation: event.imageOptions?.eventLocation, + accentColor: event.imageOptions?.accentColor, isRevoked: false, timestampSigned: Date.now(), timestampConsumed: checkIn ? checkIn.timestamp.getTime() : 0, @@ -1207,6 +1213,7 @@ export class LemonadePipeline implements BasePipeline { qrCodeOverrideImageUrl: this.atomToQrCodeOverrideImageUrl(atom), eventStartDate: this.atomToEventStartDate(atom), eventLocation: this.atomToEventLocation(atom), + accentColor: this.atomToAccentColor(atom), attendeeSemaphoreId: semaphoreId, isConsumed: atom.checkinDate instanceof Date, isRevoked: false, // Not clear what concept this maps to in Lemonade diff --git a/apps/passport-server/src/services/generic-issuance/pipelines/PretixPipeline.ts b/apps/passport-server/src/services/generic-issuance/pipelines/PretixPipeline.ts index bfa35d641a..33210544ae 100644 --- a/apps/passport-server/src/services/generic-issuance/pipelines/PretixPipeline.ts +++ b/apps/passport-server/src/services/generic-issuance/pipelines/PretixPipeline.ts @@ -1008,6 +1008,7 @@ export class PretixPipeline implements BasePipeline { qrCodeOverrideImageUrl: event.imageOptions?.qrCodeOverrideImageUrl, eventStartDate: event.imageOptions?.eventStartDate, eventLocation: event.imageOptions?.eventLocation, + accentColor: event.imageOptions?.accentColor, isAddOn: product.isAddOnItem, isConsumed: checkIn ? true : false, isRevoked: false, @@ -1044,6 +1045,7 @@ export class PretixPipeline implements BasePipeline { qrCodeOverrideImageUrl: event.imageOptions?.qrCodeOverrideImageUrl, eventStartDate: event.imageOptions?.eventStartDate, eventLocation: event.imageOptions?.eventLocation, + accentColor: event.imageOptions?.accentColor, isAddOn: product.isAddOnItem, isConsumed: checkIn ? true : false, isRevoked: false, @@ -1325,6 +1327,7 @@ export class PretixPipeline implements BasePipeline { qrCodeOverrideImageUrl: this.atomToQrCodeOverrideImageUrl(atom), eventStartDate: this.atomToEventStartDate(atom), eventLocation: this.atomToEventLocation(atom), + accentColor: this.atomToAccentColor(atom), isAddOn: !!atom.parentAtomId, isConsumed: atom.isConsumed, isRevoked: false, @@ -1361,6 +1364,7 @@ export class PretixPipeline implements BasePipeline { qrCodeOverrideImageUrl: this.atomToQrCodeOverrideImageUrl(atom), eventStartDate: this.atomToEventStartDate(atom), eventLocation: this.atomToEventLocation(atom), + accentColor: this.atomToAccentColor(atom), isAddOn: !!atom.parentAtomId, isConsumed: atom.isConsumed, isRevoked: false, @@ -2263,6 +2267,11 @@ export class PretixPipeline implements BasePipeline { ); } + private atomToAccentColor(atom: PretixAtom): string | undefined { + const event = this.getEventById(atom.eventId); + return event.imageOptions?.accentColor; + } + private atomToEventName(atom: PretixAtom): string { return this.getEventById(atom.eventId).name; } diff --git a/apps/passport-server/src/services/issuanceService.ts b/apps/passport-server/src/services/issuanceService.ts index a84eeb2f3f..2863dc5b72 100644 --- a/apps/passport-server/src/services/issuanceService.ts +++ b/apps/passport-server/src/services/issuanceService.ts @@ -696,7 +696,8 @@ export class IssuanceService { ), imageAltText: "Zuzalu logo", eventLocation: "Lustica Bay, Montenegro", - eventStartDate: "2023-03-11T00:00:00.000Z" + eventStartDate: "2023-03-11T00:00:00.000Z", + accentColor: "#147C66" }) ); } @@ -781,7 +782,8 @@ export class IssuanceService { ), imageAltText: "ZuConnect", eventLocation: "Istanbul, Turkey", - eventStartDate: "2023-10-29T00:00:00.000Z" + eventStartDate: "2023-10-29T00:00:00.000Z", + accentColor: "#DBA452" }) ); } diff --git a/packages/lib/passport-interface/src/genericIssuanceTypes.ts b/packages/lib/passport-interface/src/genericIssuanceTypes.ts index f4247408e6..e9a834bf5b 100644 --- a/packages/lib/passport-interface/src/genericIssuanceTypes.ts +++ b/packages/lib/passport-interface/src/genericIssuanceTypes.ts @@ -187,7 +187,8 @@ const ImageOptionsSchema = z.object({ requireCheckedIn: z.boolean(), qrCodeOverrideImageUrl: z.string().optional(), eventStartDate: z.string().optional(), - eventLocation: z.string().optional() + eventLocation: z.string().optional(), + accentColor: z.string().optional() }); /** diff --git a/packages/pcd/eddsa-ticket-pcd/src/EdDSATicketPCD.ts b/packages/pcd/eddsa-ticket-pcd/src/EdDSATicketPCD.ts index bff0999fcd..988ced87cd 100644 --- a/packages/pcd/eddsa-ticket-pcd/src/EdDSATicketPCD.ts +++ b/packages/pcd/eddsa-ticket-pcd/src/EdDSATicketPCD.ts @@ -65,6 +65,7 @@ export interface ITicketData { eventStartDate?: string; isAddOn?: boolean; parentTicketId?: string; + accentColor?: string; } /** diff --git a/packages/pcd/pod-ticket-pcd/src/schema.ts b/packages/pcd/pod-ticket-pcd/src/schema.ts index 736d634934..440983fad5 100644 --- a/packages/pcd/pod-ticket-pcd/src/schema.ts +++ b/packages/pcd/pod-ticket-pcd/src/schema.ts @@ -44,7 +44,8 @@ export const TicketDataSchema = z.object({ eventLocation: z.string().optional(), eventStartDate: z.string().optional(), isAddOn: z.boolean().optional(), - parentTicketId: z.string().uuid().optional() // the "parent" ticket that this is an add-on to + parentTicketId: z.string().uuid().optional(), // the "parent" ticket that this is an add-on to + accentColor: z.string().optional() }); export type IPODTicketData = z.infer; diff --git a/packages/ui/eddsa-ticket-pcd-ui/src/CardBody.tsx b/packages/ui/eddsa-ticket-pcd-ui/src/CardBody.tsx index 3a2fd3c3ee..a6e60b0c7e 100644 --- a/packages/ui/eddsa-ticket-pcd-ui/src/CardBody.tsx +++ b/packages/ui/eddsa-ticket-pcd-ui/src/CardBody.tsx @@ -71,7 +71,7 @@ function EdDSATicketPCDCardBody({ /> )} - + {ticketData?.attendeeName.toUpperCase() || ticketData?.eventName.toUpperCase() || "Unknown"} @@ -171,8 +171,8 @@ const NEW_UI__InfoContainer = styled.div` justify-content: center; align-items: flex-start; `; -const NEW_UI__AttendeeName = styled.div` - color: #9a4ac9; +const NEW_UI__AttendeeName = styled.div<{ color?: string }>` + color: ${({ color }): string => color || "#9a4ac9"}; font-size: 20px; font-style: normal; font-weight: 800; diff --git a/packages/ui/pod-ticket-pcd-ui/src/CardBody.tsx b/packages/ui/pod-ticket-pcd-ui/src/CardBody.tsx index f2e8a5c8ea..f447a97c1f 100644 --- a/packages/ui/pod-ticket-pcd-ui/src/CardBody.tsx +++ b/packages/ui/pod-ticket-pcd-ui/src/CardBody.tsx @@ -67,7 +67,7 @@ export function PODTicketCardBodyImpl({ /> )} - + {ticketData?.attendeeName.toUpperCase() || ticketData.eventName.toUpperCase() || "Unknown"} @@ -200,8 +200,8 @@ const NEW_UI__InfoContainer = styled.div` justify-content: center; align-items: flex-start; `; -const NEW_UI__AttendeeName = styled.div` - color: #9a4ac9; +const NEW_UI__AttendeeName = styled.div<{ color?: string }>` + color: ${({ color }): string => color || "#9a4ac9"}; font-size: 20px; font-style: normal; font-weight: 800;