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:
@@ -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) => {
|
||||
|
||||
Reference in New Issue
Block a user