Feature: Liquid Template Engine Support

backend/app/DomainObjects/EventSettingDomainObject.php

@@ -4,6 +4,8 @@
 
 use HiEvents\DataTransferObjects\AddressDTO;
 use HiEvents\Helper\AddressHelper;
+use Liquid\Liquid;
+use Liquid\Template;
 
 class EventSettingDomainObject extends Generated\EventSettingDomainObjectAbstract
 {
@@ -41,4 +43,31 @@ public function getAddress(): AddressDTO
             country: $this->getLocationDetails()['country'] ?? null,
         );
     }
+
+    /**
+     * Get the offline payment instructions with Liquid template variables processed
+     * 
+     * @param array $variables Variables to use in template processing
+     * @return string|null Processed instructions or null if no instructions set
+     */
+    public function getProcessedOfflinePaymentInstructions(array $variables = []): ?string
+    {
+        $instructions = $this->getOfflinePaymentInstructions();
+        if (!$instructions) {
+            return null;
+        }
+
+        try {
+            $template = new Template();
+            $template->parse($instructions);
+            return $template->render($variables);
+        } catch (\Throwable $e) {
+            // If template processing fails, return original instructions
+            \Log::error('Error processing Liquid template for offline payment instructions', [
+                'error' => $e->getMessage(),
+                'instructions' => $instructions
+            ]);
+            return $instructions;
+        }
+    }
 }

backend/composer.json

@@ -19,6 +19,7 @@
         "laravel/tinker": "^2.8",
         "laravel/vapor-core": "^2.37",
         "league/flysystem-aws-s3-v3": "^3.0",
+        "liquid/liquid": "^1.4",
         "maatwebsite/excel": "^3.1",
         "nette/php-generator": "^4.0",
         "php-open-source-saver/jwt-auth": "^2.1",

backend/resources/views/emails/orders/summary.blade.php

@@ -21,7 +21,17 @@
 <div style="border-radius: 4px; background-color: #d7e8f8; color: #204e84; margin-bottom: 1.5rem; padding: 1rem;">
 <h2>{{ __('Payment Instructions') }}</h2>
 {{ __('Please follow the instructions below to complete your payment.') }}
-{!! $eventSettings->getOfflinePaymentInstructions() !!}
+{!! $eventSettings->getProcessedOfflinePaymentInstructions([
+    'order_short_id' => $order->getShortId(),
+    'order_public_id' => $order->getPublicId(),
+    'order_first_name' => $order->getFirstName(),
+    'order_last_name' => $order->getLastName(),
+    'order_email' => $order->getEmail(),
+    'order_total_gross' => $order->getTotalGross(),
+    'order_currency' => $event->getCurrency(),
+    'order_items' => $order->getOrderItems(),
+    'client_language' => app()->getLocale()
+]) !!}
 </div>
 </div>
 @endif

frontend/package.json

@@ -56,6 +56,7 @@
     "cross-env": "^7.0.3",
     "dayjs": "^1.11.8",
     "express": "^4.19.2",
+    "liquidjs": "^10.21.0",
     "qr-scanner": "^1.4.2",
     "query-string": "^8.1.0",
     "react": "^18.2.0",

frontend/src/components/layouts/EventHomepage/EventInformation/index.tsx

@@ -6,9 +6,11 @@ import {Button} from "@mantine/core";
 import {LoadingMask} from "../../../common/LoadingMask";
 import {ShareComponent} from "../../../common/ShareIcon";
 import {eventCoverImageUrl, eventHomepageUrl} from "../../../../utilites/urlHelper.ts";
-import {FC} from "react";
+import {FC, useMemo} from "react";
 import {Event} from "../../../../types.ts";
 import {EventDateRange} from "../../../common/EventDateRange";
+import { getClientLocale } from "../../../../locales.ts";
+import { Liquid } from "liquidjs";
 
 export const EventInformation: FC<{
     event: Event
@@ -17,6 +19,21 @@ export const EventInformation: FC<{
     if (!event) {
         return <LoadingMask/>;
     }
+
+    const processedDescription = useMemo(() => {
+        if (!event.description) return '';
+
+        const engine = new Liquid();
+        try {
+            const clientLocale = getClientLocale();
+            return engine.parseAndRenderSync(event.description, {
+                client_language: clientLocale
+            });
+        } catch (error) {
+            console.error("Error processing liquid template:", error);
+            return event.description;
+        }
+    }, [event.description]);
 
     return (
         <>
@@ -75,7 +92,7 @@ export const EventInformation: FC<{
                 <div className={classes.eventDescription}>
                     <h2>{t`About`}</h2>
                     <div dangerouslySetInnerHTML={{
-                        __html: event.description || '',
+                        __html: processedDescription,
                     }}/>
                 </div>
             )}

frontend/src/components/routes/product-widget/OrderSummaryAndProducts/index.tsx

@@ -15,6 +15,7 @@ import {
     IconPrinter,
     IconUser
 } from "@tabler/icons-react";
+import { OfflinePaymentMethod } from "../Payment/PaymentMethods/Offline";
 
 import {useGetOrderPublic} from "../../../../queries/useGetOrderPublic.ts";
 import {eventCheckoutPath} from "../../../../utilites/urlHelper.ts";
@@ -223,16 +224,9 @@ const PostCheckoutMessage = ({ message }: { message: string }) => (
     </div>
 );
 
-const OfflinePaymentInstructions = ({ event }: { event: Event }) => (
+const OfflinePaymentInstructions = ({ event, order }: { event: Event, order: Order }) => (
     <div style={{ marginTop: '20px', marginBottom: '40px' }}>
-        <h2>{t`Payment Instructions`}</h2>
-        <Card>
-            <div
-                dangerouslySetInnerHTML={{
-                    __html: event?.settings?.offline_payment_instructions || "",
-                }}
-            />
-        </Card>
+        <OfflinePaymentMethod event={event} order={order} />
     </div>
 );
 
@@ -260,7 +254,7 @@ export const OrderSummaryAndProducts = () => {
             <CheckoutContent hasFooter={true}>
                 <WelcomeHeader order={order} event={event}/>
 
-                {order?.status === 'AWAITING_OFFLINE_PAYMENT' && <OfflinePaymentInstructions event={event}/>}
+                {order?.status === 'AWAITING_OFFLINE_PAYMENT' && <OfflinePaymentInstructions event={event} order={order}/>}
 
                 <Group justify="space-between" align="center">
                     <h1 className={classes.heading}>{t`Order Details`}</h1>

frontend/src/components/routes/product-widget/Payment/PaymentMethods/Offline/index.tsx

@@ -1,21 +1,60 @@
-import {Event} from "../../../../../../types.ts";
-import {Card} from "../../../../../common/Card";
-import {t} from "@lingui/macro";
+import { Event, Order } from "../../../../../../types.ts";
+import { Card } from "../../../../../common/Card";
+import {getClientLocale} from "../../../../../../locales";
+import { t } from "@lingui/macro";
+import { Liquid } from 'liquidjs';
+import React from 'react';
 
 interface OfflinePaymentMethodProps {
     event: Event;
+    order?: Order;
 }
 
-export const OfflinePaymentMethod = ({event}: OfflinePaymentMethodProps) => {
+export const OfflinePaymentMethod = ({ event, order }: OfflinePaymentMethodProps) => {
     const eventSettings = event?.settings;
+    // Initialize Liquid engine with default settings
+    const engine = new Liquid();
+
+    const replaceVariables = async (text: string) => {
+        if (!text || !order) return text;
+
+        const variables = {
+            order_short_id: order.short_id,
+            order_public_id: order.public_id,
+            order_first_name: order.first_name,
+            order_last_name: order.last_name,
+            order_email: order.email,
+            order_total_gross: order.total_gross,
+            order_currency: order.currency,
+            order_items: order.order_items,
+            client_language: getClientLocale()
+        };
+
+        try {
+            return await engine.parseAndRender(text, variables);
+        } catch (error) {
+            console.error('Error processing Liquid template:', error);
+            return text;
+        }
+    };
+
+    const [processedInstructions, setProcessedInstructions] = React.useState(eventSettings?.offline_payment_instructions || "");
+
+    React.useEffect(() => {
+        const processInstructions = async () => {
+            const processed = await replaceVariables(eventSettings?.offline_payment_instructions || "");
+            setProcessedInstructions(processed);
+        };
+        processInstructions();
+    }, [eventSettings?.offline_payment_instructions, order]);
 
     return (
         <div>
             <h2>{t`Payment Instructions`}</h2>
             <Card>
                 <div
                     dangerouslySetInnerHTML={{
-                        __html: eventSettings?.offline_payment_instructions || "",
+                        __html: processedInstructions,
                     }}
                 />
             </Card>

frontend/src/components/routes/product-widget/Payment/index.tsx

@@ -90,7 +90,7 @@ const Payment = () => {
 
                 {isOfflineEnabled && (
                     <div style={{display: activePaymentMethod === 'OFFLINE' ? 'block' : 'none'}}>
-                        <OfflinePaymentMethod event={event as Event}/>
+                        <OfflinePaymentMethod event={event as Event} order={order as Order}/>
                     </div>
                 )}