Feature: Add ticket date display options

VERSION

@@ -1 +1 @@
-1.8.0-beta
+1.10.0-beta

backend/app/DomainObjects/Enums/TicketDateDisplayMode.php

@@ -0,0 +1,12 @@
+<?php
+
+namespace HiEvents\DomainObjects\Enums;
+
+enum TicketDateDisplayMode: string
+{
+    use BaseEnum;
+
+    case START_DATE_TIME = 'START_DATE_TIME';
+    case DATE_RANGE = 'DATE_RANGE';
+    case HIDDEN = 'HIDDEN';
+}

backend/app/Http/Request/EventSettings/UpdateEventSettingsRequest.php

@@ -7,6 +7,7 @@
 use HiEvents\DomainObjects\Enums\HomepageFontFamily;
 use HiEvents\DomainObjects\Enums\PaymentProviders;
 use HiEvents\DomainObjects\Enums\PriceDisplayMode;
+use HiEvents\DomainObjects\Enums\TicketDateDisplayMode;
 use HiEvents\Http\Request\BaseRequest;
 use HiEvents\Validators\Rules\RulesHelper;
 use Illuminate\Validation\Rule;
@@ -85,6 +86,7 @@ public function rules(): array
             'ticket_design_settings.logo_image_id' => ['nullable', 'integer'],
             'ticket_design_settings.footer_text' => ['nullable', 'string', 'max:500'],
             'ticket_design_settings.layout_type' => ['nullable', 'string', Rule::in(['default', 'modern'])],
+            'ticket_design_settings.date_display_mode' => ['nullable', 'string', Rule::in(TicketDateDisplayMode::valuesArray())],
             'ticket_design_settings.enabled' => ['boolean'],
 
             // Marketing settings

backend/app/Services/Application/Handlers/EventSettings/DTO/UpdateEventSettingsDTO.php

@@ -8,6 +8,7 @@
 use HiEvents\DomainObjects\Enums\HomepageBackgroundType;
 use HiEvents\DomainObjects\Enums\PaymentProviders;
 use HiEvents\DomainObjects\Enums\PriceDisplayMode;
+use HiEvents\DomainObjects\Enums\TicketDateDisplayMode;
 use HiEvents\DomainObjects\OrganizerDomainObject;
 
 class UpdateEventSettingsDTO extends BaseDTO
@@ -150,6 +151,7 @@ public static function createWithDefaults(
                 'logo_image_id' => null,
                 'footer_text' => null,
                 'layout_type' => 'classic',
+                'date_display_mode' => TicketDateDisplayMode::START_DATE_TIME->value,
                 'enabled' => true,
             ],
 

backend/composer.json

@@ -4,7 +4,7 @@
     "description": "hi.events - Ticket selling and event management.",
     "keywords": ["ticketing", "events"],
     "license": "AGPL-3.0",
-    "version": "1.8.0-beta",
+    "version": "1.10.0-beta",
     "require": {
         "php": "^8.2",
         "ext-intl": "*",

backend/tests/Unit/Http/Request/EventSettings/UpdateEventSettingsRequestTest.php

@@ -0,0 +1,46 @@
+<?php
+
+namespace Tests\Unit\Http\Request\EventSettings;
+
+use HiEvents\DomainObjects\Enums\TicketDateDisplayMode;
+use HiEvents\Http\Request\EventSettings\UpdateEventSettingsRequest;
+use Illuminate\Support\Facades\Validator;
+use Tests\TestCase;
+
+class UpdateEventSettingsRequestTest extends TestCase
+{
+    public function test_valid_date_display_modes_are_accepted(): void
+    {
+        foreach (TicketDateDisplayMode::valuesArray() as $mode) {
+            $validator = Validator::make(
+                ['ticket_design_settings' => ['date_display_mode' => $mode]],
+                (new UpdateEventSettingsRequest)->rules()
+            );
+
+            $this->assertFalse(
+                $validator->errors()->has('ticket_design_settings.date_display_mode'),
+                "Expected '{$mode}' to be a valid date display mode"
+            );
+        }
+    }
+
+    public function test_invalid_date_display_mode_is_rejected(): void
+    {
+        $validator = Validator::make(
+            ['ticket_design_settings' => ['date_display_mode' => 'NOT_A_MODE']],
+            (new UpdateEventSettingsRequest)->rules()
+        );
+
+        $this->assertTrue($validator->errors()->has('ticket_design_settings.date_display_mode'));
+    }
+
+    public function test_date_display_mode_is_optional(): void
+    {
+        $validator = Validator::make(
+            ['ticket_design_settings' => ['accent_color' => '#333333']],
+            (new UpdateEventSettingsRequest)->rules()
+        );
+
+        $this->assertFalse($validator->errors()->has('ticket_design_settings.date_display_mode'));
+    }
+}

frontend/package.json

@@ -1,7 +1,7 @@
 {
   "name": "hievents-frontend",
   "private": true,
-  "version": "1.8.0-beta",
+  "version": "1.10.0-beta",
   "type": "module",
   "scripts": {
     "dev:csr": "vite --port 5678 --host 0.0.0.0",

frontend/src/components/common/AttendeeTicket/index.tsx

@@ -3,6 +3,7 @@ import {Button, CopyButton} from "@mantine/core";
 import {formatCurrency} from "../../../utilites/currency.ts";
 import {t} from "@lingui/macro";
 import {prettyDate} from "../../../utilites/dates.ts";
+import {EventDateRange} from "../EventDateRange";
 import QRCode from "react-qr-code";
 import {IconCopy, IconPrinter, IconLock, IconX} from "@tabler/icons-react";
 import {Address, Attendee, Event, Product} from "../../../types.ts";
@@ -32,6 +33,7 @@ export const AttendeeTicket = ({
     const ticketDesignSettings = event?.settings?.ticket_design_settings;
     const accentColor = ticketDesignSettings?.accent_color || '#6B46C1';
     const footerText = ticketDesignSettings?.footer_text;
+    const dateDisplayMode = ticketDesignSettings?.date_display_mode || 'START_DATE_TIME';
     const logoUrl = imageUrl('TICKET_LOGO', event?.images);
 
     const ticketStyle = {
@@ -71,12 +73,16 @@ export const AttendeeTicket = ({
                 <div className={classes.contentLeft}>
                     {/* Event Details */}
                     <div className={classes.eventDetails}>
-                        <div className={classes.detailRow}>
-                            <div className={classes.detailLabel}>{t`Date & Time`}</div>
-                            <div className={classes.detailValue}>
-                                {prettyDate(event.start_date, event.timezone, true)}
+                        {dateDisplayMode !== 'HIDDEN' && (
+                            <div className={classes.detailRow}>
+                                <div className={classes.detailLabel}>{t`Date & Time`}</div>
+                                <div className={classes.detailValue}>
+                                    {dateDisplayMode === 'DATE_RANGE'
+                                        ? <EventDateRange event={event}/>
+                                        : prettyDate(event.start_date, event.timezone, true)}
+                                </div>
                             </div>
-                        </div>
+                        )}
                         {event?.organizer?.name && (
                             <div className={classes.detailRow}>
                                 <div className={classes.detailLabel}>{t`Organizer`}</div>

frontend/src/components/routes/event/TicketDesigner/TicketPreview.tsx

@@ -10,6 +10,7 @@ interface TicketDesignSettings {
     accent_color: string;
     logo_image_id: IdParam | null;
     footer_text: string | null;
+    date_display_mode: 'START_DATE_TIME' | 'DATE_RANGE' | 'HIDDEN';
     enabled: boolean;
 }
 
@@ -82,6 +83,7 @@ export const TicketPreview = ({settings, eventId, logoUrl}: TicketPreviewProps)
                 accent_color: settings.accent_color,
                 logo_image_id: settings.logo_image_id,
                 footer_text: settings.footer_text,
+                date_display_mode: settings.date_display_mode,
                 enabled: settings.enabled
             },
             location_details: eventSettings?.location_details || {

frontend/src/components/routes/event/TicketDesigner/index.tsx

@@ -8,7 +8,7 @@ import {IdParam} from "../../../../types.ts";
 import {showSuccess} from "../../../../utilites/notifications.tsx";
 import {t} from "@lingui/macro";
 import {useForm} from "@mantine/form";
-import {Button, ColorInput, Textarea, Accordion, Stack, Text, Group} from "@mantine/core";
+import {Button, ColorInput, Textarea, Accordion, Stack, Text, Group, Select} from "@mantine/core";
 import {IconColorSwatch, IconHelp, IconPrinter} from "@tabler/icons-react";
 import {Tooltip} from "../../../common/Tooltip";
 import {ImageUploadDropzone} from "../../../common/ImageUploadDropzone";
@@ -21,6 +21,7 @@ interface TicketDesignSettings {
     accent_color: string;
     logo_image_id: IdParam;
     footer_text: string | null;
+    date_display_mode: 'START_DATE_TIME' | 'DATE_RANGE' | 'HIDDEN';
     enabled: boolean;
 }
 
@@ -39,6 +40,7 @@ const TicketDesigner = () => {
             accent_color: '#333333',
             logo_image_id: undefined,
             footer_text: '',
+            date_display_mode: 'START_DATE_TIME',
             enabled: true,
         }
     });
@@ -52,6 +54,7 @@ const TicketDesigner = () => {
                 accent_color: settings.accent_color || '#333333',
                 logo_image_id: settings.logo_image_id || undefined,
                 footer_text: settings.footer_text || '',
+                date_display_mode: settings.date_display_mode || 'START_DATE_TIME',
                 enabled: settings.enabled !== false,
             });
         }
@@ -73,6 +76,7 @@ const TicketDesigner = () => {
                         accent_color: values.accent_color,
                         logo_image_id: values.logo_image_id,
                         footer_text: values.footer_text || undefined,
+                        date_display_mode: values.date_display_mode,
                         enabled: values.enabled
                     }
                 },
@@ -177,6 +181,21 @@ const TicketDesigner = () => {
                                                     {form.values.footer_text?.length || 0} / 500
                                                 </Text>
                                             </div>
+
+                                            <div>
+                                                <Select
+                                                    label={t`Event date display`}
+                                                    description={t`Choose how the event date is shown on the ticket`}
+                                                    size="sm"
+                                                    allowDeselect={false}
+                                                    data={[
+                                                        {value: 'START_DATE_TIME', label: t`Only show start date and time`},
+                                                        {value: 'DATE_RANGE', label: t`Show entire date range`},
+                                                        {value: 'HIDDEN', label: t`Hide the date`},
+                                                    ]}
+                                                    {...form.getInputProps('date_display_mode')}
+                                                />
+                                            </div>
                                         </Stack>
                                     </Accordion.Panel>
                                 </Accordion.Item>