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" />
|
<Download className="w-5 h-5" />
|
||||||
</Button>
|
</Button>
|
||||||
)}
|
)}
|
||||||
{feedbackOptions?.allowLikes && (
|
{feedbackEnabled && feedbackOptions?.allowLikes && (
|
||||||
<Button
|
<Button
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
size="sm"
|
size="sm"
|
||||||
|
|||||||
@@ -42,6 +42,10 @@ interface PhotoCardProps {
|
|||||||
useEnhancedProtection?: boolean;
|
useEnhancedProtection?: boolean;
|
||||||
useCanvasRendering?: boolean;
|
useCanvasRendering?: boolean;
|
||||||
feedbackEnabled?: 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;
|
index: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -61,6 +65,7 @@ const PhotoCard: React.FC<PhotoCardProps> = ({
|
|||||||
useEnhancedProtection = false,
|
useEnhancedProtection = false,
|
||||||
useCanvasRendering = false,
|
useCanvasRendering = false,
|
||||||
feedbackEnabled = false,
|
feedbackEnabled = false,
|
||||||
|
allowLikes = false,
|
||||||
index
|
index
|
||||||
}) => {
|
}) => {
|
||||||
// Note: height is passed but not used as we maintain aspect ratio via width
|
// Note: height is passed but not used as we maintain aspect ratio via width
|
||||||
@@ -113,7 +118,9 @@ const PhotoCard: React.FC<PhotoCardProps> = ({
|
|||||||
{isSelected && <Check className="w-3.5 h-3.5" strokeWidth={3} />}
|
{isSelected && <Check className="w-3.5 h-3.5" strokeWidth={3} />}
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
{/* Like Button */}
|
{/* Like Button — #506: only when feedback master is on AND the
|
||||||
|
per-event "allow likes" sub-toggle is on. */}
|
||||||
|
{feedbackEnabled && allowLikes && (
|
||||||
<button
|
<button
|
||||||
onClick={onLike}
|
onClick={onLike}
|
||||||
className={`gallery-premium-like-btn ${isLiked ? 'liked' : ''}`}
|
className={`gallery-premium-like-btn ${isLiked ? 'liked' : ''}`}
|
||||||
@@ -122,6 +129,7 @@ const PhotoCard: React.FC<PhotoCardProps> = ({
|
|||||||
className={`w-5 h-5 ${isLiked ? 'fill-current' : ''}`}
|
className={`w-5 h-5 ${isLiked ? 'fill-current' : ''}`}
|
||||||
/>
|
/>
|
||||||
</button>
|
</button>
|
||||||
|
)}
|
||||||
|
|
||||||
{/* Selection Border */}
|
{/* Selection Border */}
|
||||||
{isSelected && (
|
{isSelected && (
|
||||||
@@ -502,6 +510,7 @@ export const GalleryPremiumLayout: React.FC<GalleryPremiumLayoutProps> = ({
|
|||||||
useEnhancedProtection={useEnhancedProtection}
|
useEnhancedProtection={useEnhancedProtection}
|
||||||
useCanvasRendering={useCanvasRendering}
|
useCanvasRendering={useCanvasRendering}
|
||||||
feedbackEnabled={feedbackEnabled}
|
feedbackEnabled={feedbackEnabled}
|
||||||
|
allowLikes={!!feedbackOptions?.allowLikes}
|
||||||
index={photoIndex}
|
index={photoIndex}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -105,7 +105,7 @@ const MosaicPhoto: React.FC<MosaicPhotoProps> = ({
|
|||||||
<Download className="w-5 h-5 text-neutral-800" />
|
<Download className="w-5 h-5 text-neutral-800" />
|
||||||
</button>
|
</button>
|
||||||
)}
|
)}
|
||||||
{feedbackOptions?.allowLikes && (
|
{feedbackEnabled && feedbackOptions?.allowLikes && (
|
||||||
<button
|
<button
|
||||||
className={`p-2 rounded-full transition-colors ${likedLocal ? 'bg-red-500/90 hover:bg-red-500' : 'bg-white/90 hover:bg-white'}`}
|
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) => {
|
onClick={async (e) => {
|
||||||
|
|||||||
@@ -144,7 +144,7 @@ export const TimelineGalleryLayout: React.FC<BaseGalleryLayoutProps> = ({
|
|||||||
<Download className="w-5 h-5 text-neutral-800" />
|
<Download className="w-5 h-5 text-neutral-800" />
|
||||||
</button>
|
</button>
|
||||||
)}
|
)}
|
||||||
{feedbackOptions?.allowLikes && (
|
{feedbackEnabled && feedbackOptions?.allowLikes && (
|
||||||
<button
|
<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'}`}
|
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) => {
|
onClick={async (e) => {
|
||||||
|
|||||||
Reference in New Issue
Block a user