Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-03-11 02:12:21 -05:00
Code Issues Activity

Hooked up the CTA popup to the reply button (#21663)

Browse source 
REF
https://linear.app/ghost/issue/PLG-262/unhide-the-reply-button-when-comments-is-paywalled
- Previously, the reply button was hidden when the comments were
paywalled. Now, the button is visible and triggers a signup or upgrade
popup.
This commit is contained in:
Sanne de Vries 2024-11-20 10:10:50 +01:00 • committed by GitHub
parent 2a0fc6fd1e
commit 5bbb98b661
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 46 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
apps/comments-ui/src/components/content/Comment.tsx
View file

@ -295,11 +295,19 @@ const CommentMenu: React.FC<CommentMenuProps> = ({comment, openReplyForm, highli
const canReply = member && (isPaidMember || !paidOnly) && (labs.commentImprovements ? true : !parent);
return (
<div className="flex items-center gap-4">
{<LikeButton comment={comment} />}
{(canReply && <ReplyButton isReplying={highlightReplyButton} openReplyForm={openReplyForm} />)}
{<MoreButton comment={comment} toggleEdit={openEditMode} />}
</div>
labs.commentImprovements ? (
<div className="flex items-center gap-4">
{<LikeButton comment={comment} />}
{<ReplyButton isReplying={highlightReplyButton} openReplyForm={openReplyForm} />}
{<MoreButton comment={comment} toggleEdit={openEditMode} />}
</div>
) : (
<div className="flex items-center gap-4">
{<LikeButton comment={comment} />}
{(canReply && <ReplyButton isReplying={highlightReplyButton} openReplyForm={openReplyForm} />)}
{<MoreButton comment={comment} toggleEdit={openEditMode} />}
</div>
)
);
};

39
apps/comments-ui/src/components/content/buttons/ReplyButton.tsx
View file

@ -1,5 +1,5 @@
import {ReactComponent as ReplyIcon} from '../../../images/icons/reply.svg';
import {useAppContext} from '../../../AppContext';
import {useAppContext, useLabs} from '../../../AppContext';
type Props = {
disabled?: boolean;
@ -7,12 +7,39 @@ type Props = {
openReplyForm: () => void;
};
const ReplyButton: React.FC<Props> = ({disabled, isReplying, openReplyForm}) => {
const {member, t} = useAppContext();
const {member, t, dispatchAction, commentsEnabled} = useAppContext();
const labs = useLabs();
return member ?
(<button className={`duration-50 group flex items-center font-sans text-base outline-0 transition-all ease-linear sm:text-sm ${isReplying ? 'text-black/90 dark:text-white/90' : 'text-black/50 hover:text-black/75 dark:text-white/60 dark:hover:text-white/75'}`} data-testid="reply-button" disabled={!!disabled} type="button" onClick={openReplyForm}>
<ReplyIcon className={`mr-[6px] ${isReplying ? 'fill-black dark:fill-white' : 'stroke-black/50 group-hover:stroke-black/75 dark:stroke-white/60 dark:group-hover:stroke-white/75'} duration-50 transition ease-linear`} />{t('Reply')}
</button>) : null;
const paidOnly = commentsEnabled === 'paid';
const isPaidMember = member && !!member.paid;
const canReply = member && (isPaidMember || !paidOnly);
const handleClick = () => {
if (!canReply && labs && labs.commentImprovements) {
dispatchAction('openPopup', {
type: 'ctaPopup'
});
return;
}
openReplyForm();
};
if (!member && !labs?.commentImprovements) {
return null;
}
return (
<button
className={`duration-50 group flex items-center font-sans text-base outline-0 transition-all ease-linear sm:text-sm ${isReplying ? 'text-black/90 dark:text-white/90' : 'text-black/50 hover:text-black/75 dark:text-white/60 dark:hover:text-white/75'}`}
data-testid="reply-button"
disabled={!!disabled}
type="button"
onClick={handleClick}
>
<ReplyIcon className={`mr-[6px] ${isReplying ? 'fill-black dark:fill-white' : 'stroke-black/50 group-hover:stroke-black/75 dark:stroke-white/60 dark:group-hover:stroke-white/75'} duration-50 transition ease-linear`} />
{t('Reply')}
</button>
);
};
export default ReplyButton;