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

Added UI to unsubscribe from comment emails (#253)

Browse source 
refs https://github.com/TryGhost/Team/issues/1664
This commit is contained in:
Simon Backx 2022-07-12 13:53:44 +02:00 • committed by GitHub
parent 36743dc28d
commit 24041d2f70
6 changed files with 93 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
ghost/portal/src/actions.js
View file

@ -268,14 +268,21 @@ async function showPopupNotification({data, state}) {
async function updateNewsletterPreference({data, state, api}) {
try {
const {newsletters} = data;
if (!newsletters) {
const {newsletters, enableCommentNotifications} = data;
if (!newsletters && enableCommentNotifications === undefined) {
return {};
}
const member = await api.member.update({newsletters});
const updateData = {};
if (newsletters) {
updateData.newsletters = newsletters;
}
if (enableCommentNotifications !== undefined) {
updateData.enableCommentNotifications = enableCommentNotifications;
}
const member = await api.member.update(updateData);
const action = 'updateNewsletterPref:success';
return {
action,
action,
member
};
} catch (e) {

44
ghost/portal/src/components/common/NewsletterManagement.js
View file

@ -85,6 +85,38 @@ function NewsletterPrefSection({newsletter, subscribedNewsletters, setSubscribed
);
}
function CommentsSection({updateCommentNotifications, isCommentsEnabled, enableCommentNotifications}) {
const isChecked = !!enableCommentNotifications;
const [showUpdated, setShowUpdated] = useState(false);
const [timeoutId, setTimeoutId] = useState(null);
if (!isCommentsEnabled) {
return null;
}
return (
<section className='gh-portal-list-toggle-wrapper'>
<div className='gh-portal-list-detail'>
<h3>Comments</h3>
<p>Likes and replies to my comments</p>
</div>
<div style={{display: 'flex', alignItems: 'center'}}>
<SuccessIcon show={showUpdated} checked={isChecked} />
<Switch id="comments" onToggle={(e, checked) => {
setShowUpdated(true);
clearTimeout(timeoutId);
let newTimeoutId = setTimeout(() => {
setShowUpdated(false);
}, 2000);
setTimeoutId(newTimeoutId);
updateCommentNotifications(checked);
}} checked={isChecked} />
</div>
</section>
);
}
function NewsletterPrefs({subscribedNewsletters, setSubscribedNewsletters}) {
const {site} = useContext(AppContext);
const newsletters = getSiteNewsletters({site});
@ -113,11 +145,14 @@ export default function NewsletterManagement({
notification,
subscribedNewsletters,
updateSubscribedNewsletters,
updateCommentNotifications,
unsubscribeAll,
isPaidMember
isPaidMember,
isCommentsEnabled,
enableCommentNotifications
}) {
const isDisabled = !subscribedNewsletters?.length;
const {brandColor, site} = useContext(AppContext);
const isDisabled = !subscribedNewsletters?.length && ((isCommentsEnabled && !enableCommentNotifications) || !isCommentsEnabled);
const EmptyNotification = () => {
return null;
};
@ -140,6 +175,11 @@ export default function NewsletterManagement({
updateSubscribedNewsletters(newsletters);
}}
/>
<CommentsSection
isCommentsEnabled={isCommentsEnabled}
enableCommentNotifications={enableCommentNotifications}
updateCommentNotifications={updateCommentNotifications}
/>
</div>
</div>
<footer className='gh-portal-action-footer'>

17
ghost/portal/src/components/pages/AccountEmailPage.js
View file

@ -6,9 +6,11 @@ import NewsletterManagement from '../common/NewsletterManagement';
const React = require('react');
export default function AccountEmailPage() {
const {member, onAction} = useContext(AppContext);
const {member, onAction, site} = useContext(AppContext);
const defaultSubscribedNewsletters = [...(member?.newsletters || [])];
const [subscribedNewsletters, setSubscribedNewsletters] = useState(defaultSubscribedNewsletters);
const {comments_enabled: commentsEnabled} = site;
const {enable_comment_notifications: enableCommentNotifications} = member;
useEffect(() => {
if (!member) {
@ -30,15 +32,24 @@ export default function AccountEmailPage() {
setSubscribedNewsletters(updatedNewsletters);
onAction('updateNewsletterPreference', {newsletters: updatedNewsletters});
}}
updateCommentNotifications={async (enabled) => {
onAction('updateNewsletterPreference', {enableCommentNotifications: enabled});
}}
unsubscribeAll={() => {
setSubscribedNewsletters([]);
onAction('showPopupNotification', {
action: 'updated:success',
message: `Newsletter preference updated.`
message: `Email preference updated.`
});
onAction('updateNewsletterPreference', {newsletters: []});
const data = {newsletters: []};
if (commentsEnabled) {
data.enableCommentNotifications = false;
}
onAction('updateNewsletterPreference', data);
}}
isPaidMember={isPaidMember({member})}
isCommentsEnabled={commentsEnabled !== 'off'}
enableCommentNotifications={enableCommentNotifications}
/>
);
}

4
ghost/portal/src/components/pages/AccountHomePage.js
View file

@ -386,8 +386,8 @@ function EmailPreferencesAction() {
return (
<section>
<div className='gh-portal-list-detail'>
<h3>Newsletters</h3>
<p>Update email preferences</p>
<h3>Emails</h3>
<p>Update your preferences</p>
</div>
<button className='gh-portal-btn gh-portal-btn-list' onClick={(e) => {
onAction('switchPage', {

16
ghost/portal/src/components/pages/UnsubscribePage.js
View file

@ -50,6 +50,8 @@ export default function UnsubscribePage() {
const [hasInteracted, setHasInteracted] = useState(false);
const [subscribedNewsletters, setSubscribedNewsletters] = useState(defaultNewsletters);
const [showPrefs, setShowPrefs] = useState(false);
const {comments_enabled: commentsEnabled} = site;
const {enable_comment_notifications: enableCommentNotifications = false} = member || {};
useEffect(() => {
const ghostApi = setupGhostApi({siteUrl: site.url});
@ -123,7 +125,9 @@ export default function UnsubscribePage() {
});
const hideClassName = hasInteracted ? 'gh-portal-hide' : '';
return (
<p className={`gh-portal-text-center gh-portal-header-message ${hideClassName}`}><strong>{member?.email}</strong> will no longer receive <strong>{unsubscribedNewsletter?.name}</strong> newsletter.</p>
<>
<p className={`gh-portal-text-center gh-portal-header-message ${hideClassName}`}><strong>{member?.email}</strong> will no longer receive <strong>{unsubscribedNewsletter?.name}</strong> newsletter.</p>
</>
);
};
@ -136,16 +140,22 @@ export default function UnsubscribePage() {
setHasInteracted(true);
await api.member.updateNewsletters({uuid: pageData.uuid, newsletters});
}}
updateCommentNotifications={async (enabled) => {
const updatedMember = await api.member.updateNewsletters({uuid: pageData.uuid, enableCommentNotifications: enabled});
setMember(updatedMember);
}}
unsubscribeAll={async () => {
setHasInteracted(true);
setSubscribedNewsletters([]);
onAction('showPopupNotification', {
action: 'updated:success',
message: `Newsletter preference updated.`
message: `Email preference updated.`
});
await api.member.updateNewsletters({uuid: pageData.uuid, newsletters: []});
await api.member.updateNewsletters({uuid: pageData.uuid, newsletters: [], enableCommentNotifications: false});
}}
isPaidMember={member?.status !== 'free'}
isCommentsEnabled={commentsEnabled !== 'off'}
enableCommentNotifications={enableCommentNotifications}
/>
);
}

14
ghost/portal/src/utils/api.js
View file

@ -177,13 +177,17 @@ function setupGhostApi({siteUrl = window.location.origin, apiUrl, apiKey}) {
});
},
update({name, subscribed, newsletters}) {
update({name, subscribed, newsletters, enableCommentNotifications}) {
const url = endpointFor({type: 'members', resource: 'member'});
const body = {
name,
subscribed,
newsletters
};
if (enableCommentNotifications !== undefined) {
body.enable_comment_notifications = enableCommentNotifications;
}
const analyticsData = getAnalyticsMetadata();
if (analyticsData) {
body.metadata = analyticsData;
@ -264,13 +268,17 @@ function setupGhostApi({siteUrl = window.location.origin, apiUrl, apiKey}) {
});
},
async updateNewsletters({uuid, newsletters}) {
async updateNewsletters({uuid, newsletters, enableCommentNotifications}) {
let url = endpointFor({type: 'members', resource: `member/newsletters`});
url = url + `?uuid=${uuid}`;
const body = {
newsletters
};
if (enableCommentNotifications !== undefined) {
body.enable_comment_notifications = enableCommentNotifications;
}
return makeRequest({
url,
method: 'PUT',
@ -282,7 +290,7 @@ function setupGhostApi({siteUrl = window.location.origin, apiUrl, apiKey}) {
if (res.ok) {
return res.json();
} else {
throw new Error('Failed to upadte newsletter preferences');
throw new Error('Failed to update email preferences');
}
});
},