event carousel accentColor (#2183)

accentColor is now configurable, rather than being only purple / orange unfortunately this also means another ITicketData / IPODTicketData field, so we may need to remove another field with #2151 https://github.com/user-attachments/assets/6a77d645-d2d1-4b39-8179-36a590bb0e0c
proofcarryingdata · Jan 6, 2025 · 6cea67c · 6cea67c
1 parent 19aaf98
commit 6cea67c
Show file tree

Hide file tree

Showing 12 changed files with 46 additions and 29 deletions.
diff --git 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 (
                     <TicketsContainer
                       eventId={tickets[currentPos][0]}
@@ -433,7 +434,7 @@ export const NewHomeScreen = (): ReactElement => {
                         title={eventDetails.eventName}
                         imgSource={eventDetails.imageUrl}
                         ticketCount={packs.length}
-                        cardColor={i % 2 === 0 ? "purple" : "orange"}
+                        cardColor={eventDetails.accentColor ?? "#9a4ac9"}
                       />
                       <TicketCardsContainer>
                         {packs.map((pack) => {

diff --git 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)"}
         />
         <Button2 onClick={handleOneClickLogin}>
           <Typography color="var(--text-white)" fontSize={18} fontWeight={500}>

diff --git 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 (
     <TicketBody>
       <QRWrapper>
         <QRDisplay value="mock" saved={true} />;
       </QRWrapper>
       <TicketDetails>
-        <Typography
-          fontSize={18}
-          fontWeight={800}
-          color={"rgba(154, 74, 201, 1)"}
-        >
+        <Typography fontSize={18} fontWeight={800} color={accentColor}>
           {name.toUpperCase()}
         </Typography>
         <Typography fontSize={16} fontWeight={500}>

diff --git 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<CardColor, Property.Color> = {
-  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<HTMLDivElement, TicketCardProps>(
@@ -118,7 +112,7 @@ export const TicketCard = forwardRef<HTMLDivElement, TicketCardProps>(
       <TicketCardContainer
         $width={ticketWidth || 300}
         ref={ref}
-        $borderColor={CARD_COLORS[cardColor]}
+        $borderColor={cardColor}
       >
         <TicketCardImageContainer>
           {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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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<typeof TicketDataSchema>;
diff --git 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({
           />
         )}
         <NEW_UI__InfoContainer>
-          <NEW_UI__AttendeeName>
+          <NEW_UI__AttendeeName color={ticketData?.accentColor}>
             {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
@@ -67,7 +67,7 @@ export function PODTicketCardBodyImpl({
           />
         )}
         <NEW_UI__InfoContainer>
-          <NEW_UI__AttendeeName>
+          <NEW_UI__AttendeeName color={ticketData?.accentColor}>
             {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;