Remove badge lunch tag and add support for hiding the preview (#4158)

Author: marcoacierno

backend/conferences/migrations/0050_alter_deadline_type.py

@@ -0,0 +1,18 @@
+# Generated by Django 5.1.1 on 2024-11-09 21:21
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('conferences', '0049_remove_conference_pretix_hotel_bed_layout_question_id_and_more'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='deadline',
+            name='type',
+            field=models.CharField(choices=[('cfp', 'Call for proposal'), ('voting', 'Voting'), ('refund', 'Ticket refund'), ('grants', 'Grants'), ('badge_preview', 'Badge preview'), ('custom', 'Custom deadline')], max_length=256, verbose_name='type'),
+        ),
+    ]

backend/conferences/models/deadline.py

@@ -21,6 +21,7 @@ class Deadline(TimeFramedModel):
         ("voting", _("Voting")),
         ("refund", _("Ticket refund")),
         ("grants", _("Grants")),
+        ("badge_preview", _("Badge preview")),
         ("custom", _("Custom deadline")),
     )
 
@@ -33,7 +34,7 @@ class Deadline(TimeFramedModel):
 
     name = I18nCharField(_("name"), max_length=100)
     description = I18nTextField(_("description"), blank=True, null=True)
-    type = models.CharField(_("type"), choices=TYPES, max_length=10)
+    type = models.CharField(_("type"), choices=TYPES, max_length=256)
 
     def __str__(self):
         return f"{self.type} ({self.name}) <{self.conference.code}>"

frontend/src/components/badge/index.tsx

@@ -95,7 +95,7 @@ export const Badge = ({
             marginBottom: "20px",
             marginTop: "40px",
           }}
-          src="https://pythonit-email-assets.s3.eu-central-1.amazonaws.com/logo-pycon-2024.png"
+          src="https://cdn.pycon.it/conferences/pycon2025/pycon-italia-2025-logo.png"
         />
         <div
           style={{
@@ -166,25 +166,9 @@ export const Badge = ({
             width: "100%",
             display: "flex",
             alignItems: "flex-end",
-            justifyContent: "space-between",
+            justifyContent: "flex-end",
           }}
         >
-          {side === "front" && (
-            <div className="grid grid-cols-[13px_repeat(3,50px)] bg-coral gap-[2px]">
-              <div className=" flex items-center justify-center text-[#FFFFFF]">
-                <div className="text-[8px] py-2 pl-[3px] uppercase font-bold  whitespace-nowrap	leading-[0.9]">
-                  L<br />u<br />n<br />c<br />h
-                </div>
-              </div>
-              {[23, 24, 25].map((number) => (
-                <div key={number} className={clsx("bg-[#FFFFFF] relative")}>
-                  <span className="absolute top-0 left-[5px]  text-[#b5b5b5] font-bold">
-                    {number}
-                  </span>
-                </div>
-              ))}
-            </div>
-          )}
           {!empty && side === "front" && (
             <div className="p-[2px] bg-white">
               <QRCode

frontend/src/components/customize-ticket-modal/index.tsx

@@ -35,6 +35,7 @@ export const snakeToCamel = (str: string) => {
 
 export type CustomizeTicketModalProps = {
   ticket: MyProfileWithTicketsQuery["me"]["tickets"][0];
+  showBadgePreview: boolean;
 };
 
 type Form = {
@@ -50,6 +51,7 @@ type Form = {
 export const CustomizeTicketModal = ({
   onClose,
   ticket,
+  showBadgePreview,
 }: Props & CustomizeTicketModalProps) => {
   const language = useCurrentLanguage();
   const [updateTicket, { loading: updatingTicket, error: updateTicketError }] =
@@ -204,7 +206,7 @@ export const CustomizeTicketModal = ({
         </div>
       }
     >
-      <Grid cols={3}>
+      <Grid cols={showBadgePreview ? 3 : 1}>
         <GridColumn colSpan={2}>
           <ProductQuestionnaire
             product={ticket.item}
@@ -232,42 +234,44 @@ export const CustomizeTicketModal = ({
             </Text>
           )}
         </GridColumn>
-        <GridColumn>
-          <div className="max-w-[302px] max-h-[453px]">
-            <Badge
-              name={displayAttendeeName({
-                parts: {
-                  given_name: formState.values.attendeeGivenName,
-                  family_name: formState.values.attendeeFamilyName,
-                },
-                scheme: "given_family",
-              })}
-              pronouns={pronounsAnswer}
-              tagline={taglineAnswer}
-              cutLines={false}
-              role={ticket.role}
-              hashedTicketId={ticket.hashid}
-            />
-          </div>
-          <div>
-            <Spacer size="small" />
-            <Text size="label3" as="p">
-              <FormattedMessage id="profile.ticketsEdit.qrCodeDescription" />
-            </Text>
-            <Spacer size="small" />
-            <Link
-              href={createHref({
-                path: "/profile/edit",
-                locale: language,
-              })}
-              target="_blank"
-            >
-              <Text size="label3" as="p" color="none">
-                <FormattedMessage id="profile.ticketsEdit.editProfile" />
+        {showBadgePreview && (
+          <GridColumn>
+            <div className="max-w-[302px] max-h-[453px]">
+              <Badge
+                name={displayAttendeeName({
+                  parts: {
+                    given_name: formState.values.attendeeGivenName,
+                    family_name: formState.values.attendeeFamilyName,
+                  },
+                  scheme: "given_family",
+                })}
+                pronouns={pronounsAnswer}
+                tagline={taglineAnswer}
+                cutLines={false}
+                role={ticket.role}
+                hashedTicketId={ticket.hashid}
+              />
+            </div>
+            <div>
+              <Spacer size="small" />
+              <Text size="label3" as="p">
+                <FormattedMessage id="profile.ticketsEdit.qrCodeDescription" />
               </Text>
-            </Link>
-          </div>
-        </GridColumn>
+              <Spacer size="small" />
+              <Link
+                href={createHref({
+                  path: "/profile/edit",
+                  locale: language,
+                })}
+                target="_blank"
+              >
+                <Text size="label3" as="p" color="none">
+                  <FormattedMessage id="profile.ticketsEdit.editProfile" />
+                </Text>
+              </Link>
+            </div>
+          </GridColumn>
+        )}
       </Grid>
     </Modal>
   );

frontend/src/components/my-tickets-profile-page-handler/index.tsx

@@ -3,16 +3,22 @@ import React from "react";
 import { FormattedMessage } from "react-intl";
 
 import { useCurrentLanguage } from "~/locale/context";
-import { useMyProfileWithTicketsQuery } from "~/types";
+import { DeadlineStatus, useMyProfileWithTicketsQuery } from "~/types";
 
 import { MetaTags } from "../meta-tags";
 import { NoTickets } from "./no-tickets";
 import { TicketCard } from "./ticket-card";
 
+const VISIBLE_BADGE_PREVIEW_DEADLINES = [
+  DeadlineStatus.InThePast,
+  DeadlineStatus.HappeningNow,
+];
+
 export const MyTicketsProfilePageHandler = () => {
   const language = useCurrentLanguage();
   const {
     data: {
+      conference: { badgePreviewDeadline },
       me: { tickets, email },
     },
   } = useMyProfileWithTicketsQuery({
@@ -37,7 +43,14 @@ export const MyTicketsProfilePageHandler = () => {
         <Section>
           <Grid cols={3} mdCols={2} equalHeight>
             {tickets.map((ticket) => (
-              <TicketCard key={ticket.id} ticket={ticket} userEmail={email} />
+              <TicketCard
+                key={ticket.id}
+                ticket={ticket}
+                userEmail={email}
+                showBadgePreview={VISIBLE_BADGE_PREVIEW_DEADLINES.includes(
+                  badgePreviewDeadline?.status,
+                )}
+              />
             ))}
           </Grid>
         </Section>

frontend/src/components/my-tickets-profile-page-handler/profile-with-tickets.graphql

@@ -1,4 +1,12 @@
 query MyProfileWithTickets($conference: String!, $language: String!) {
+  conference(code: $conference) {
+    id
+    badgePreviewDeadline: deadline(type: "badge_preview") {
+      id
+      status
+    }
+  }
+
   me {
     id
     name

frontend/src/components/my-tickets-profile-page-handler/ticket-card.tsx

@@ -25,9 +25,10 @@ import { useSetCurrentModal } from "../modal/context";
 type Props = {
   ticket: MyProfileWithTicketsQuery["me"]["tickets"][0];
   userEmail: string;
+  showBadgePreview: boolean;
 };
 
-export const TicketCard = ({ ticket, userEmail }: Props) => {
+export const TicketCard = ({ ticket, userEmail, showBadgePreview }: Props) => {
   const setCurrentModal = useSetCurrentModal();
 
   const taglineQuestion = ticket.item.questions.find(
@@ -52,6 +53,7 @@ export const TicketCard = ({ ticket, userEmail }: Props) => {
   const openEditTicketModal = () => {
     setCurrentModal("customize-ticket", {
       ticket,
+      showBadgePreview,
     });
   };