+ {isImageBg && coverImage ? (
+
+ ) : isGradientBg ? (
+
+ ) : (
-
-
-
- {/* Main unified card */}
-
- {/* Hero Section */}
-
- {coverImage && (
-
- {coverImageData?.lqip_base64 && (
-
- )}
- 
-
- {statusBadge && (
-
- )}
-
- {/* Event Header */}
-
-
-
- )}
-
-
- {organizer && organizer.status === OrganizerStatus.LIVE ? (
-
- {organizerLogo ? (
- 
- ) : (
-
- {organizer.name.charAt(0).toUpperCase()}
-
- )}
-
- {organizer.name}
-
-
- ) : (
-
- {organizerLogo ? (
-
- ) : (
-
- {organizer?.name?.charAt(0).toUpperCase() || '?'}
-
- )}
-
- {organizer?.name}
-
-
- )}
-
-
-
-
-
- {/* Future enhancement: Favorite/Heart button */}
- {/* */}
-
+ )}
+
+
+ {event &&
+
+ {/* Left Column - Fixed on Desktop */}
+
+ {/* Cover Image Card */}
+ {coverImage && (
+
+ {coverImageData?.lqip_base64 && (
+
+ )}
+
+
+
+ {/* Status Badge Over Image */}
+ {statusBadge && (
+
+
+ )}
-
+
+ {event.title}
- -
- {/* Date/Time */}
-
-
-
-
+
+ )
+ }
+
+ {/* Organizer Card Desktop */}
+ {
+ organizer && organizer.status === OrganizerStatus.LIVE && (
+
-
-
-
-
-
-
-
+ {/* eslint-disable-next-line lingui/no-unlocalized-strings */}
+
+
+
+
+
+ setTimeout(() => { window.location.reload(); }, 1000)}
+ className={`${cardBg} rounded-2xl p-4 flex flex-col gap-4 border-none shadow-sm`}
+ contentClassName="flex flex-col gap-3"
+ textClassName={`font-semibold text-[15px] text-center ${cardTextPrimary}`}
+ buttonClassName="w-full py-2.5 px-4 rounded-xl text-sm font-medium transition flex justify-center items-center gap-2 shadow-sm hover:brightness-[1.15]"
+ buttonStyle={{ backgroundColor: accentColor, color: getContrastColor(accentColor) }}
+ />
+ )}
+
+
+ {/* Right Column - Main Content */}
+ {t`Presented By`}
+
+ {organizerLogo ? (
+
+ ) : (
+
+ )}
+
+ {event?.status && event?.id && (
+
+ {organizer.name.charAt(0).toUpperCase()}
-
- {/* Event Ended */}
- {event.end_date && isDateInPast(event.end_date) && (
-
-
- {/* Online Event */}
- {isOnlineEvent && (
-
-
-
-
+ )}
+ {t`This event has ended`}
-
+
+ {organizer.name}
+
+ {getShortLocationDisplay(organizerLocation) && (
+
+
+ {/* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */}
+
+ {getShortLocationDisplay(organizerLocation)}
+
)}
+
-
- )}
+ {/* Organizer Actions */}
+
-
-
-
- {t`Online Event`}
-
- {t`Join from anywhere`}
-
-
+
- {/* Location */}
- {hasLocation && locationDetails && (
-
-
+
-
-
-
-
- {locationDetails.venue_name}
-
-
- {formatAddress(locationDetails)}
-
- {mapUrl && (
-
- {t`View on Google Maps`}
-
- {/* About Section */}
- {event?.description && (
- ;
+ form: UseFormReturnType; // Need 'any' here due to Mantine form typing complexity with nested arrays, but we will ignore the warning
productIndex: number;
+ colors?: {
+ primary?: string;
+ primaryText?: string;
+ secondaryText?: string;
+ } | undefined;
}
-export const TieredPricing = ({product, event, form, productIndex}: TieredPricingProps) => {
+export const TieredPricing = ({ event, product, form, productIndex, colors }: TieredPricingProps) => {
+ const isDarkMode = colors?.primaryText === '#ffffff';
+ const textPrimaryClass = isDarkMode ? 'text-white' : 'text-gray-900';
+ const textSecondaryClass = isDarkMode ? 'text-gray-300' : 'text-gray-500';
+ const borderClass = isDarkMode ? 'border-white/10' : 'border-gray-100';
+ const mutedBgClass = isDarkMode ? 'bg-white/10' : 'bg-gray-100';
+
+ const [isDonationModalOpen, setIsDonationModalOpen] = useState(false);
+ const [donationModalIndex, setDonationModalIndex] = useState(null);
+ const [tempDonationAmount, setTempDonationAmount] = useState('');
+ const [showHintIndex, setShowHintIndex] = useState(null);
+
+ // To detect when a quantity increments, we can use a ref to store previous quantities
+ const prevQuantitiesRef = useRef([]);
+
+ useEffect(() => {
+ if (product.type !== 'DONATION') return;
+
+ const currentQuantities = product.prices?.map((_, index) => {
+ return form.values.products?.[productIndex]?.quantities?.[index]?.quantity || 0;
+ }) || [];
+
+ let shouldUpdateRef = false;
+ currentQuantities.forEach((qty, index) => {
+ const prevQty = prevQuantitiesRef.current[index] || 0;
+ if (qty > prevQty) {
+ // Quantity increased
+ setShowHintIndex(index);
+ // Hide after 4 seconds
+ setTimeout(() => {
+ setShowHintIndex(curr => curr === index ? null : curr);
+ }, 4000);
+ }
+ if (qty !== prevQty) {
+ shouldUpdateRef = true;
+ }
+ });
+
+ if (shouldUpdateRef || prevQuantitiesRef.current.length === 0) {
+ prevQuantitiesRef.current = currentQuantities;
+ }
+ }, [form.values.products?.[productIndex]?.quantities, product.prices, product.type, productIndex]);
+
+ const handleOpenDonationModal = (index: number) => {
+ const currentPrice = form.values.products?.[productIndex]?.quantities?.[index]?.price || product.price || 0;
+ setTempDonationAmount(currentPrice);
+ setDonationModalIndex(index);
+ setIsDonationModalOpen(true);
+ setShowHintIndex(null); // Hide hint if they clicked
+ };
+
+ const handleConfirmDonation = () => {
+ if (donationModalIndex !== null && tempDonationAmount !== '' && tempDonationAmount >= (product.price || 0)) {
+ form.setFieldValue(`products.${productIndex}.quantities.${donationModalIndex}.price`, tempDonationAmount);
+ setIsDonationModalOpen(false);
+ }
+ };
+
return (
<>
+ {/* Donation Dialog */}
+ setIsDonationModalOpen(false)}
+ centered
+ withCloseButton={false}
+ overlayProps={{
+ color: '#000000',
+ opacity: 0.85,
+ blur: 15,
+ }}
+ styles={{
+ content: {
+ backgroundColor: isDarkMode ? 'rgba(20, 20, 20, 0.65)' : 'rgba(255, 255, 255, 0.85)',
+ backdropFilter: 'blur(40px)',
+ WebkitBackdropFilter: 'blur(40px)',
+ border: `1px solid ${isDarkMode ? 'rgba(255, 255, 255, 0.15)' : 'rgba(0, 0, 0, 0.1)'}`,
+ boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.7)',
+ borderRadius: '28px',
+ color: isDarkMode ? '#fff' : '#000',
+ },
+ body: {
+ padding: '40px 32px',
+ },
+ header: {
+ display: 'none',
+ }
+ }}
+ >
+
{product?.prices?.map((price, index) => {
return (
- (null);
+
+ useEffect(() => {
+ if (!contentRef.current) return;
+
+ const checkTruncation = () => {
+ if (contentRef.current && !expanded) {
+ setMayBeTruncated(contentRef.current.scrollHeight > contentRef.current.clientHeight + 2);
+ }
+ };
+
+ checkTruncation();
+
+ const resizeObserver = new ResizeObserver(() => {
+ checkTruncation();
+ });
+ resizeObserver.observe(contentRef.current);
+ return () => resizeObserver.disconnect();
+ }, [expanded, html]);
+
+ return (
+
-
diff --git a/frontend/src/components/routes/product-widget/SelectProducts/Prices/Tiered/index.tsx b/frontend/src/components/routes/product-widget/SelectProducts/Prices/Tiered/index.tsx
index 5b40ecbf7..0bc00bb10 100644
--- a/frontend/src/components/routes/product-widget/SelectProducts/Prices/Tiered/index.tsx
+++ b/frontend/src/components/routes/product-widget/SelectProducts/Prices/Tiered/index.tsx
@@ -1,93 +1,272 @@
-import {Currency, ProductPriceDisplay} from "../../../../../common/Currency";
-import {Event, Product} from "../../../../../../types.ts";
-import {Group, TextInput} from "@mantine/core";
-import {NumberSelector} from "../../../../../common/NumberSelector";
-import {UseFormReturnType} from "@mantine/form";
-import {t} from "@lingui/macro";
-import {ProductPriceAvailability} from "../../../../../common/ProductPriceAvailability";
-import {getCurrencySymbol} from "../../../../../../utilites/currency.ts";
+/* eslint-disable lingui/no-unlocalized-strings */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { Currency, ProductPriceDisplay } from "../../../../../common/Currency";
+import { Event, Product } from "../../../../../../types.ts";
+import { Group, TextInput, Modal, Button } from "@mantine/core";
+import { NumberSelector } from "../../../../../common/NumberSelector";
+import { useState, useEffect, useRef } from "react";
+import { UseFormReturnType } from "@mantine/form";
+import { t } from "@lingui/macro";
+import { ProductPriceAvailability } from "../../../../../common/ProductPriceAvailability";
+import { getCurrencySymbol } from "../../../../../../utilites/currency.ts";
+import { getContrastColor, hexToRgb } from "../../../../../../utilites/themeUtils";
interface TieredPricingProps {
event: Event;
product: Product;
- form: UseFormReturnType
- ;
}
const OrganizerHomepageDesigner = () => {
- const {organizerId} = useParams();
+ const { organizerId } = useParams();
const organizerSettingsQuery = useGetOrganizerSettings(organizerId);
const organizerQuery = useGetOrganizer(organizerId);
const updateMutation = useUpdateOrganizerSettings();
@@ -120,7 +120,7 @@ const OrganizerHomepageDesigner = () => {
const settingsJson = JSON.stringify(settingsToSend);
if (settingsJson !== lastSentSettings.current) {
iframeRef.current.contentWindow.postMessage(
- {type: "UPDATE_ORGANIZER_SETTINGS", settings: settingsToSend},
+ { type: "UPDATE_ORGANIZER_SETTINGS", settings: settingsToSend },
"*"
);
lastSentSettings.current = settingsJson;
@@ -158,7 +158,7 @@ const OrganizerHomepageDesigner = () => {
const value = Array.isArray(backgroundType) ? backgroundType[0] : backgroundType;
form.setFieldValue('homepage_theme_settings', {
...form.values.homepage_theme_settings,
- background_type: value as 'COLOR' | 'MIRROR_COVER_IMAGE',
+ background_type: value as 'COLOR' | 'GRADIENT' | 'MIRROR_COVER_IMAGE',
});
};
@@ -179,7 +179,7 @@ const OrganizerHomepageDesigner = () => {
className={classes.accordion}
>
- }>
+ {t`Images`}
@@ -189,7 +189,7 @@ const OrganizerHomepageDesigner = () => {
{t`Cover Image`}
-
{
{t`Logo`}
-
{
- }>
+ {t`Theme & Colors`}
{t`About`}
+ {/* Header Details */} +
+
diff --git a/frontend/src/components/routes/organizer/OrganizerHomepageDesigner/index.tsx b/frontend/src/components/routes/organizer/OrganizerHomepageDesigner/index.tsx
index 7d79fdcd2..80e317310 100644
--- a/frontend/src/components/routes/organizer/OrganizerHomepageDesigner/index.tsx
+++ b/frontend/src/components/routes/organizer/OrganizerHomepageDesigner/index.tsx
@@ -1,32 +1,32 @@
-import {useEffect, useRef, useState} from "react";
+import { useEffect, useRef, useState } from "react";
import classes from './OrganizerHomepageDesigner.module.scss';
-import {useParams} from "react-router";
-import {useGetOrganizerSettings} from "../../../../queries/useGetOrganizerSettings.ts";
-import {useUpdateOrganizerSettings} from "../../../../mutations/useUpdateOrganizerSettings.ts";
-import {useFormErrorResponseHandler} from "../../../../hooks/useFormErrorResponseHandler.tsx";
-import {HomepageThemeSettings, IdParam, OrganizerSettings} from "../../../../types.ts";
-import {showSuccess} from "../../../../utilites/notifications.tsx";
-import {t} from "@lingui/macro";
-import {useForm} from "@mantine/form";
-import {Accordion, Button, Group, Stack, Text} from "@mantine/core";
-import {IconColorPicker, IconHelp, IconPalette, IconPhoto} from "@tabler/icons-react";
-import {Tooltip} from "../../../common/Tooltip";
-import {LoadingMask} from "../../../common/LoadingMask";
-import {CustomSelect} from "../../../common/CustomSelect";
-import {GET_ORGANIZER_QUERY_KEY, useGetOrganizer} from "../../../../queries/useGetOrganizer.ts";
-import {ImageUploadDropzone} from "../../../common/ImageUploadDropzone";
-import {organizerPreviewPath} from "../../../../utilites/urlHelper.ts";
-import {queryClient} from "../../../../utilites/queryClient.ts";
-import {GET_ORGANIZER_PUBLIC_QUERY_KEY} from "../../../../queries/useGetOrganizerPublic.ts";
-import {ThemeColorControls} from "../../../common/ThemeColorControls";
-import {computeThemeVariables, validateThemeSettings} from "../../../../utilites/themeUtils.ts";
+import { useParams } from "react-router";
+import { useGetOrganizerSettings } from "../../../../queries/useGetOrganizerSettings.ts";
+import { useUpdateOrganizerSettings } from "../../../../mutations/useUpdateOrganizerSettings.ts";
+import { useFormErrorResponseHandler } from "../../../../hooks/useFormErrorResponseHandler.tsx";
+import { HomepageThemeSettings, IdParam, OrganizerSettings } from "../../../../types.ts";
+import { showSuccess } from "../../../../utilites/notifications.tsx";
+import { t } from "@lingui/macro";
+import { useForm } from "@mantine/form";
+import { Accordion, Button, Group, Stack, Text } from "@mantine/core";
+import { IconColorPicker, IconHelp, IconPalette, IconPhoto } from "@tabler/icons-react";
+import { Tooltip } from "../../../common/Tooltip";
+import { LoadingMask } from "../../../common/LoadingMask";
+import { CustomSelect } from "../../../common/CustomSelect";
+import { GET_ORGANIZER_QUERY_KEY, useGetOrganizer } from "../../../../queries/useGetOrganizer.ts";
+import { ImageUploadDropzone } from "../../../common/ImageUploadDropzone";
+import { organizerPreviewPath } from "../../../../utilites/urlHelper.ts";
+import { queryClient } from "../../../../utilites/queryClient.ts";
+import { GET_ORGANIZER_PUBLIC_QUERY_KEY } from "../../../../queries/useGetOrganizerPublic.ts";
+import { ThemeColorControls } from "../../../common/ThemeColorControls";
+import { computeThemeVariables, validateThemeSettings } from "../../../../utilites/themeUtils.ts";
interface FormValues {
homepage_theme_settings: Partial+ {event.title} +
+ +
+ {/* Date Card */}
+ ;
@@ -27,7 +27,7 @@ interface FormValues {
}
const HomepageDesigner = () => {
- const {eventId} = useParams();
+ const { eventId } = useParams();
const eventSettingsQuery = useGetEventSettings(eventId);
const eventImagesQuery = useGetEventImages(eventId);
const updateMutation = useUpdateEventSettings();
@@ -95,7 +95,7 @@ const HomepageDesigner = () => {
};
updateMutation.mutate(
- {eventSettings, eventId: eventId},
+ { eventSettings, eventId: eventId },
{
onSuccess: () => {
showSuccess(t`Successfully Updated Homepage Design`);
@@ -128,7 +128,7 @@ const HomepageDesigner = () => {
const settingsJson = JSON.stringify(settingsToSend);
if (settingsJson !== lastSentSettings.current) {
iframeRef.current.contentWindow.postMessage(
- {type: "UPDATE_SETTINGS", settings: settingsToSend},
+ { type: "UPDATE_SETTINGS", settings: settingsToSend },
"*"
);
lastSentSettings.current = settingsJson;
@@ -148,7 +148,7 @@ const HomepageDesigner = () => {
const value = Array.isArray(backgroundType) ? backgroundType[0] : backgroundType;
form.setFieldValue('homepage_theme_settings', {
...form.values.homepage_theme_settings,
- background_type: value as 'COLOR' | 'MIRROR_COVER_IMAGE',
+ background_type: value as 'COLOR' | 'GRADIENT' | 'MIRROR_COVER_IMAGE',
});
};
@@ -179,7 +179,7 @@ const HomepageDesigner = () => {
{t`Cover Image`}
-
{
+
- {/* Location Section (with map) */}
+ {/* Location Card */}
{hasLocation && locationDetails && (
-
+ {event.end_date && isDateInPast(event.end_date) ?
+
+
+
+
- )}
+
+ {event.end_date && isDateInPast(event.end_date) ? t`This event has ended` :
-
+
-
diff --git a/frontend/src/components/routes/event/HomepageDesigner/index.tsx b/frontend/src/components/routes/event/HomepageDesigner/index.tsx
index 6332e3e59..3423d063f 100644
--- a/frontend/src/components/routes/event/HomepageDesigner/index.tsx
+++ b/frontend/src/components/routes/event/HomepageDesigner/index.tsx
@@ -1,25 +1,25 @@
-import {useEffect, useRef, useState} from "react";
+import { useEffect, useRef, useState } from "react";
import classes from './HomepageDesigner.module.scss';
-import {useParams} from "react-router";
-import {useGetEventSettings} from "../../../../queries/useGetEventSettings.ts";
-import {useUpdateEventSettings} from "../../../../mutations/useUpdateEventSettings.ts";
-import {useFormErrorResponseHandler} from "../../../../hooks/useFormErrorResponseHandler.tsx";
-import {EventSettings, HomepageThemeSettings, IdParam} from "../../../../types.ts";
-import {showSuccess} from "../../../../utilites/notifications.tsx";
-import {t} from "@lingui/macro";
-import {useForm} from "@mantine/form";
-import {Button, Group, TextInput, Accordion, Stack, Text} from "@mantine/core";
-import {IconColorPicker, IconHelp, IconPhoto, IconPalette, IconTypography} from "@tabler/icons-react";
-import {Tooltip} from "../../../common/Tooltip";
-import {CustomSelect} from "../../../common/CustomSelect";
-import {GET_EVENT_IMAGES_QUERY_KEY, useGetEventImages} from "../../../../queries/useGetEventImages.ts";
-import {eventPreviewPath} from "../../../../utilites/urlHelper.ts";
-import {LoadingMask} from "../../../common/LoadingMask";
-import {ImageUploadDropzone} from "../../../common/ImageUploadDropzone";
-import {queryClient} from "../../../../utilites/queryClient.ts";
-import {GET_EVENT_PUBLIC_QUERY_KEY} from "../../../../queries/useGetEventPublic.ts";
-import {ThemeColorControls} from "../../../common/ThemeColorControls";
-import {validateThemeSettings} from "../../../../utilites/themeUtils.ts";
+import { useParams } from "react-router";
+import { useGetEventSettings } from "../../../../queries/useGetEventSettings.ts";
+import { useUpdateEventSettings } from "../../../../mutations/useUpdateEventSettings.ts";
+import { useFormErrorResponseHandler } from "../../../../hooks/useFormErrorResponseHandler.tsx";
+import { EventSettings, HomepageThemeSettings, IdParam } from "../../../../types.ts";
+import { showSuccess } from "../../../../utilites/notifications.tsx";
+import { t } from "@lingui/macro";
+import { useForm } from "@mantine/form";
+import { Button, Group, TextInput, Accordion, Stack, Text } from "@mantine/core";
+import { IconColorPicker, IconHelp, IconPhoto, IconPalette, IconTypography } from "@tabler/icons-react";
+import { Tooltip } from "../../../common/Tooltip";
+import { CustomSelect } from "../../../common/CustomSelect";
+import { GET_EVENT_IMAGES_QUERY_KEY, useGetEventImages } from "../../../../queries/useGetEventImages.ts";
+import { eventPreviewPath } from "../../../../utilites/urlHelper.ts";
+import { LoadingMask } from "../../../common/LoadingMask";
+import { ImageUploadDropzone } from "../../../common/ImageUploadDropzone";
+import { queryClient } from "../../../../utilites/queryClient.ts";
+import { GET_EVENT_PUBLIC_QUERY_KEY } from "../../../../queries/useGetEventPublic.ts";
+import { ThemeColorControls } from "../../../common/ThemeColorControls";
+import { validateThemeSettings } from "../../../../utilites/themeUtils.ts";
interface FormValues {
homepage_theme_settings: Partial
- }
+ {organizer &&
{/* Background */}
- {(organizerCover && backgroundType === 'MIRROR_COVER_IMAGE') ? (
+ {(organizerCover && (backgroundType === 'MIRROR_COVER_IMAGE')) ? (
) : (
)}
@@ -188,7 +188,7 @@ export const OrganizerHomepage = ({
+
{t`Location`}
+
+
+
+ {/* Registration / Tickets Section */}
+
+
-
-
)}
- {/* Tickets Section */}
-
-
+
- {locationDetails.venue_name}
-
-
- {formatAddress(locationDetails)}
-
- {mapUrl && (
-
-
+
-
{locationDetails.venue_name}
+ {formatAddress(locationDetails)}
{mapUrl && (
-
-
-
-
-
+
+ {t`View Map`}
)}
+ {isOnlineEvent && (
+
+
+
+ )}
+
+
+
+
+ {t`Online Event`}
+ {t`Join from anywhere`}
+
+ {/* A very subtle top highlight line */}
+
+
+
- {/* Organizer Section */}
- {organizer && organizer.status === OrganizerStatus.LIVE && (
-
+
+
+
{
showPoweredBy={false}
/>
+
+
+
+
- setContactModalOpen(false)} organizer={organizer} />
+
);
};
diff --git a/frontend/src/components/layouts/OrganizerHomepage/index.tsx b/frontend/src/components/layouts/OrganizerHomepage/index.tsx
index 8fde5ba47..c636e1205 100644
--- a/frontend/src/components/layouts/OrganizerHomepage/index.tsx
+++ b/frontend/src/components/layouts/OrganizerHomepage/index.tsx
@@ -1,22 +1,22 @@
-import {useLocation, useNavigate} from "react-router";
-import {ActionIcon, Anchor} from '@mantine/core';
-import {EventCard} from './EventCard';
+import { useLocation, useNavigate } from "react-router";
+import { ActionIcon, Anchor } from '@mantine/core';
+import { EventCard } from './EventCard';
import classes from './OrganizerHomepage.module.scss';
-import React, {useEffect, useState} from 'react';
-import {Event, GenericPaginatedResponse, Organizer} from "../../../types.ts";
-import {OrganizerDocumentHead} from "../../common/OrganizerDocumentHead";
-import {IconExternalLink, IconMail, IconMapPin, IconWorld} from '@tabler/icons-react';
-import {t} from "@lingui/macro";
-import {PoweredByFooter} from "../../common/PoweredByFooter";
-import {socialMediaConfig} from "../../../constants/socialMediaConfig";
-import {ContactOrganizerModal} from "../../common/ContactOrganizerModal";
-import {formatAddress, getShortLocationDisplay} from "../../../utilites/addressUtilities.ts";
-import {organizerHomepagePath} from "../../../utilites/urlHelper.ts";
-import {removeTransparency} from "../../../utilites/colorHelper.ts";
-import {StatusToggle} from "../../common/StatusToggle";
-import {getConfig} from "../../../utilites/config.ts";
-import {Pagination} from "../../common/Pagination";
-import {computeThemeVariables, validateThemeSettings} from "../../../utilites/themeUtils.ts";
+import React, { useEffect, useState } from 'react';
+import { Event, GenericPaginatedResponse, Organizer } from "../../../types.ts";
+import { OrganizerDocumentHead } from "../../common/OrganizerDocumentHead";
+import { IconExternalLink, IconMail, IconMapPin, IconWorld } from '@tabler/icons-react';
+import { t } from "@lingui/macro";
+import { PoweredByFooter } from "../../common/PoweredByFooter";
+import { socialMediaConfig } from "../../../constants/socialMediaConfig";
+import { ContactOrganizerModal } from "../../common/ContactOrganizerModal";
+import { formatAddress, getShortLocationDisplay } from "../../../utilites/addressUtilities.ts";
+import { organizerHomepagePath } from "../../../utilites/urlHelper.ts";
+import { removeTransparency } from "../../../utilites/colorHelper.ts";
+import { StatusToggle } from "../../common/StatusToggle";
+import { getConfig } from "../../../utilites/config.ts";
+import { Pagination } from "../../common/Pagination";
+import { computeThemeVariables, validateThemeSettings } from "../../../utilites/themeUtils.ts";
interface OrganizerHomepageProps {
organizer?: Organizer;
@@ -26,7 +26,7 @@ interface OrganizerHomepageProps {
}
const ScrollToTop = () => {
- const {pathname} = useLocation();
+ const { pathname } = useLocation();
useEffect(() => {
setTimeout(() => {
@@ -38,10 +38,10 @@ const ScrollToTop = () => {
}
export const OrganizerHomepage = ({
- organizer,
- eventsData,
- isPastEvents = false,
- }: OrganizerHomepageProps) => {
+ organizer,
+ eventsData,
+ isPastEvents = false,
+}: OrganizerHomepageProps) => {
const navigate = useNavigate();
const [contactModalOpen, setContactModalOpen] = useState(false);
@@ -100,7 +100,7 @@ export const OrganizerHomepage = ({
return (
<>
-
-
- {t`Organizer`}
-
- {organizerLogo ? (
-
- ) : (
-
+
+ {/* Footer */}
+
+
+
- {organizer.name.charAt(0).toUpperCase()}
-
- )}
-
-
+
-
+ {/* About Section */}
+ {event?.description && (
+
-
-
- {getShortLocationDisplay(organizerLocation) && (
-
- )}
-
-
-
- {organizer.name}
-
-
- {getShortLocationDisplay(organizerLocation) && (
-
- )}
-
+
+ )}
- {organizer.description && (
-
- )}
-
- + {t`About`} +
+ +
- {socialLinks.length > 0 && (
-
-
- );
- } catch {
- return null;
- }
- })()}
-
-
+ {/* Location Details block below description */}
+ {hasLocation && locationDetails && (
+
- {socialLinks.map(({platform, handle, config}) => {
- const IconComponent = config.icon;
- const url = config.baseUrl + handle;
- return (
-
-
-
- );
- })}
-
- )}
- {websiteUrl && (() => {
- try {
- const hostname = new URL(websiteUrl).hostname;
- return (
-
-
+
+ )}
+
+ {/* Organizer Card (Mobile View) */}
+ {organizer && organizer.status === OrganizerStatus.LIVE && (
+ {t`Location`}
+
+
+
+
+ {mapUrl && (
+
+
+ {locationDetails.venue_name}
+{formatAddress(locationDetails)}
+ {mapUrl && ( + + {t`View on Google Maps`}
+
+
+
+ )}
+
+
-
- {/* Floating Scroll Button */}
- {showScrollButton && (
-
)}
+ {t`Presented By`}
+
+
- {/* Footer */}
-
-
+ {organizerLogo ? (
+
+ ) : (
+
- )}
-
+ {organizer.name.charAt(0).toUpperCase()}
+ )}
+
+
+ {organizer.name}
+
+ {getShortLocationDisplay(organizerLocation) && (
+
+ {/* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */}
+
+ {getShortLocationDisplay(organizerLocation)}
+
+
+ )}
{getShortLocationDisplay(organizer?.settings?.location_details) && (
)}
{websiteUrl && (
@@ -335,7 +335,7 @@ export const OrganizerHomepage = ({
{t`Terms of Service`}
-
+
+ + {t`Custom Donation Amount`} +
++ {t`Minimum amount:`} {getCurrencySymbol(event?.currency)}{product.price} +
+ +
+
+
+
+ {getCurrencySymbol(event?.currency)}
+ setTempDonationAmount(e.currentTarget.value ? parseFloat(e.currentTarget.value) : '')}
+ min={product.price}
+ step={0.01}
+ className="bg-transparent border-none outline-none w-32 text-center p-0 appearance-none m-0 shadow-none focus:ring-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+ />
+
+ {tempDonationAmount !== '' && tempDonationAmount < (product.price || 0) && (
+
+ {t`Must be at least`} {getCurrencySymbol(event?.currency)}{product.price}
+
+ )}
+
+
+
+
+
-
-
);
})}
diff --git a/frontend/src/components/routes/product-widget/SelectProducts/index.tsx b/frontend/src/components/routes/product-widget/SelectProducts/index.tsx
index 2223f7918..fc5d013ce 100644
--- a/frontend/src/components/routes/product-widget/SelectProducts/index.tsx
+++ b/frontend/src/components/routes/product-widget/SelectProducts/index.tsx
@@ -1,4 +1,5 @@
-import {t, Trans} from "@lingui/macro";
+/* eslint-disable lingui/no-unlocalized-strings */
+import { t, Trans } from "@lingui/macro";
import {
ActionIcon,
Anchor,
@@ -11,31 +12,31 @@ import {
TextInput,
UnstyledButton
} from "@mantine/core";
-import {useNavigate, useParams} from "react-router";
-import {useMutation, useQueryClient} from "@tanstack/react-query";
-import {notifications} from "@mantine/notifications";
+import { useNavigate, useParams } from "react-router";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { notifications } from "@mantine/notifications";
import {
orderClientPublic,
ProductFormPayload,
ProductFormValue,
ProductPriceQuantityFormValue
} from "../../../../api/order.client.ts";
-import {useForm} from "@mantine/form";
-import {range, useInputState, useResizeObserver} from "@mantine/hooks";
-import React, {useEffect, useMemo, useRef, useState} from "react";
-import {showError, showInfo, showSuccess} from "../../../../utilites/notifications.tsx";
-import {addQueryStringToUrl, isObjectEmpty, removeQueryStringFromUrl} from "../../../../utilites/helpers.ts";
-import {TieredPricing} from "./Prices/Tiered";
+import { useForm } from "@mantine/form";
+import { range, useInputState, useResizeObserver } from "@mantine/hooks";
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { showError, showInfo, showSuccess } from "../../../../utilites/notifications.tsx";
+import { addQueryStringToUrl, isObjectEmpty, removeQueryStringFromUrl } from "../../../../utilites/helpers.ts";
+import { TieredPricing } from "./Prices/Tiered";
import classNames from 'classnames';
import '../../../../styles/widget/default.scss';
-import {ProductAvailabilityMessage} from "../../../common/ProductPriceAvailability";
-import {PoweredByFooter} from "../../../common/PoweredByFooter";
-import {Event, Product} from "../../../../types.ts";
-import {eventsClientPublic} from "../../../../api/event.client.ts";
-import {promoCodeClientPublic} from "../../../../api/promo-code.client.ts";
-import {IconChevronRight, IconX} from "@tabler/icons-react"
-import {getSessionIdentifier} from "../../../../utilites/sessionIdentifier.ts";
-import {Constants} from "../../../../constants.ts";
+import { ProductAvailabilityMessage } from "../../../common/ProductPriceAvailability";
+import { PoweredByFooter } from "../../../common/PoweredByFooter";
+import { Event, Product } from "../../../../types.ts";
+import { eventsClientPublic } from "../../../../api/event.client.ts";
+import { promoCodeClientPublic } from "../../../../api/promo-code.client.ts";
+import { IconChevronDown, IconChevronRight, IconX } from "@tabler/icons-react"
+import { getSessionIdentifier } from "../../../../utilites/sessionIdentifier.ts";
+import { Constants } from "../../../../constants.ts";
const AFFILIATE_EXPIRY_DAYS = 30;
@@ -62,7 +63,7 @@ interface SelectProductsProps {
event: Event;
promoCodeValid?: boolean;
promoCode?: string;
- backgroundType?: 'COLOR' | 'MIRROR_COVER_IMAGE';
+ backgroundType?: 'COLOR' | 'GRADIENT' | 'MIRROR_COVER_IMAGE';
colors?: {
primary?: string;
primaryText?: string;
@@ -77,8 +78,56 @@ interface SelectProductsProps {
showPoweredBy?: boolean;
}
+const TextSpoiler = ({ html, isDarkMode, lineClampClass = "line-clamp-3" }: { html: string, isDarkMode: boolean, lineClampClass?: string }) => {
+ const [expanded, setExpanded] = useState(false);
+ // Start as `true` so the button is present in the SSR HTML — preventing CLS.
+ // After hydration, the ResizeObserver will set this to false if text isn't actually truncated.
+ const [mayBeTruncated, setMayBeTruncated] = useState(true);
+ const contentRef = useRef
-
{price.label}
-
- {product.type === 'DONATION' && (
+
+
+
-
+
+ {price.label &&
- {price.label}
}
+
+ {product.type === 'DONATION' && (
+
handleOpenDonationModal(index)}
+ >
+
+ {getCurrencySymbol(event?.currency)}
+ {form.values.products?.[productIndex]?.quantities?.[index]?.price || product.price || 0}
+
+
+
+
+ )}
+ {product.type !== 'DONATION' && (
+
-
- )}
- {product.type !== 'DONATION' && (
-
+
-
- {(product.is_available && price.is_available) && (
- <>
-
+
)}
- {form.errors[`products.${productIndex}.quantities.${index}.quantity`]}
-
- )}
-
- )}
- {(!product.is_available || !price.is_available) && (
-
+ {(product.is_available && price.is_available) && (
+
+ )}
+ {(!product.is_available || !price.is_available) && (
+
+
+
-
- )}
+ />
+ {form.errors[`products.${productIndex}.quantities.${index}.quantity`] && (
+
+ {form.errors[`products.${productIndex}.quantities.${index}.quantity`]}
+
+ )}
+
+
+
+ );
+};
+
const SelectProducts = (props: SelectProductsProps) => {
- const {eventId} = useParams();
+ const { eventId } = useParams();
const queryClient = useQueryClient();
const navigate = useNavigate();
@@ -99,7 +148,7 @@ const SelectProducts = (props: SelectProductsProps) => {
const affiliateCodeFromUrl = new URLSearchParams(window.location.search).get('aff');
if (affiliateCodeFromUrl) {
- const data = {code: affiliateCodeFromUrl, timestamp: now};
+ const data = { code: affiliateCodeFromUrl, timestamp: now };
localStorage.setItem(storageKey, JSON.stringify(data));
setAffiliateCode(affiliateCodeFromUrl);
return;
@@ -201,8 +250,8 @@ const SelectProducts = (props: SelectProductsProps) => {
const selectedProductQuantitySum = useMemo(() => {
let total = 0;
- form.values.products?.forEach(({quantities}) => {
- quantities?.forEach(({quantity}) => {
+ form.values.products?.forEach(({ quantities }) => {
+ quantities?.forEach(({ quantity }) => {
total += Number(quantity);
});
});
@@ -291,22 +340,30 @@ const SelectProducts = (props: SelectProductsProps) => {
|| props.widgetMode === 'preview'
|| products?.every(product => product.is_sold_out);
+ const isDarkMode = props.colors?.primaryText === '#ffffff';
+ const cardBgClass = isDarkMode ? 'bg-black/20 backdrop-blur-2xl border-white/10 hover:bg-black/30 hover:border-white/20 shadow-xl' : 'bg-white/40 backdrop-blur-2xl border-white/50 hover:border-white/70 shadow-xl';
+ const textPrimaryClass = isDarkMode ? 'text-white' : 'text-gray-900';
+ const textSecondaryClass = isDarkMode ? 'text-gray-300' : 'text-gray-500';
+ const mutedBgClass = isDarkMode ? 'bg-black/20 backdrop-blur-xl border-white/10' : 'bg-white/30 backdrop-blur-xl border-white/40';
+ const highlightCardClass = isDarkMode ? 'border-primary bg-primary/20 backdrop-blur-2xl shadow-[0_0_15px_rgba(var(--theme-accent-rgb),0.1)] ring-1 ring-primary/50' : 'border-primary bg-primary/10 backdrop-blur-2xl shadow-xl ring-1 ring-primary/50';
+
let productIndex = 0;
return (
-
+ {(mayBeTruncated || expanded) && (
+
+ )}
+
+
+
{!productAreAvailable && (
-
@@ -334,7 +391,7 @@ const SelectProducts = (props: SelectProductsProps) => {
gap: '16px',
color: props.colors?.primaryText || 'inherit'
}}>
- +
{t`There are no products available for this event`}
+