fix(gallery): hide Like button when guest feedback is off (#506)

Four gallery layouts were rendering the per-photo Like button without
gating on the master "Guest Feedback" toggle, so a guest still saw a
heart icon and could submit likes on events where the host had turned
feedback off. The other layouts (Grid / Justified / Masonry / Story)
already gated correctly with `feedbackEnabled && allowLikes` —
Rekoo-PS's note that "it's hidden in some themes" matches that split.

- CarouselGalleryLayout, MosaicGalleryLayout, TimelineGalleryLayout:
  the existing conditional checked only `feedbackOptions?.allowLikes`,
  missing the `feedbackEnabled` master gate. Added it inline.
- GalleryPremiumLayout: the per-card Like button rendered
  unconditionally because PhotoCard never received the allow-likes
  signal. Added an `allowLikes` prop on PhotoCardProps, plumbed
  `feedbackOptions?.allowLikes` down from the parent, and wrapped the
  button in `feedbackEnabled && allowLikes`.

The follow-up "default guest-feedback ON" request from Rekoo-PS in
the comments is a separate feature (admin > General > Event Creation
default) and out of scope for this fix.
This commit is contained in:
Paul Nothaft
2026-05-17 00:13:21 +02:00
parent d2d55098d6
commit 9d2db9a73b
4 changed files with 21 additions and 12 deletions
@@ -147,7 +147,7 @@ export const CarouselGalleryLayout: React.FC<BaseGalleryLayoutProps> = ({
<Download className="w-5 h-5" />
</Button>
)}
{feedbackOptions?.allowLikes && (
{feedbackEnabled && feedbackOptions?.allowLikes && (
<Button
variant="ghost"
size="sm"
@@ -42,6 +42,10 @@ interface PhotoCardProps {
useEnhancedProtection?: boolean;
useCanvasRendering?: boolean;
feedbackEnabled?: boolean;
// #506: track the per-event "allow likes" toggle so the per-photo
// Like button respects it. `feedbackEnabled` alone isn't enough —
// an event can have feedback on but likes specifically disabled.
allowLikes?: boolean;
index: number;
}
@@ -61,6 +65,7 @@ const PhotoCard: React.FC<PhotoCardProps> = ({
useEnhancedProtection = false,
useCanvasRendering = false,
feedbackEnabled = false,
allowLikes = false,
index
}) => {
// Note: height is passed but not used as we maintain aspect ratio via width
@@ -113,15 +118,18 @@ const PhotoCard: React.FC<PhotoCardProps> = ({
{isSelected && <Check className="w-3.5 h-3.5" strokeWidth={3} />}
</button>
{/* Like Button */}
<button
onClick={onLike}
className={`gallery-premium-like-btn ${isLiked ? 'liked' : ''}`}
>
<Heart
className={`w-5 h-5 ${isLiked ? 'fill-current' : ''}`}
/>
</button>
{/* Like Button — #506: only when feedback master is on AND the
per-event "allow likes" sub-toggle is on. */}
{feedbackEnabled && allowLikes && (
<button
onClick={onLike}
className={`gallery-premium-like-btn ${isLiked ? 'liked' : ''}`}
>
<Heart
className={`w-5 h-5 ${isLiked ? 'fill-current' : ''}`}
/>
</button>
)}
{/* Selection Border */}
{isSelected && (
@@ -502,6 +510,7 @@ export const GalleryPremiumLayout: React.FC<GalleryPremiumLayoutProps> = ({
useEnhancedProtection={useEnhancedProtection}
useCanvasRendering={useCanvasRendering}
feedbackEnabled={feedbackEnabled}
allowLikes={!!feedbackOptions?.allowLikes}
index={photoIndex}
/>
);
@@ -105,7 +105,7 @@ const MosaicPhoto: React.FC<MosaicPhotoProps> = ({
<Download className="w-5 h-5 text-neutral-800" />
</button>
)}
{feedbackOptions?.allowLikes && (
{feedbackEnabled && feedbackOptions?.allowLikes && (
<button
className={`p-2 rounded-full transition-colors ${likedLocal ? 'bg-red-500/90 hover:bg-red-500' : 'bg-white/90 hover:bg-white'}`}
onClick={async (e) => {
@@ -144,7 +144,7 @@ export const TimelineGalleryLayout: React.FC<BaseGalleryLayoutProps> = ({
<Download className="w-5 h-5 text-neutral-800" />
</button>
)}
{feedbackOptions?.allowLikes && (
{feedbackEnabled && feedbackOptions?.allowLikes && (
<button
className={`p-2 rounded-full transition-colors ${likedIds.has(photo.id) ? 'bg-red-500/90 hover:bg-red-500' : 'bg-white/90 hover:bg-white'}`}
onClick={async (e) => {