diff --git a/ghost/portal/src/components/pages/AccountEmailPage.js b/ghost/portal/src/components/pages/AccountEmailPage.js new file mode 100644 index 0000000000..08cb49e99a --- /dev/null +++ b/ghost/portal/src/components/pages/AccountEmailPage.js @@ -0,0 +1,87 @@ +import AppContext from '../../AppContext'; +import CloseButton from '../common/CloseButton'; +import BackButton from '../common/BackButton'; +import {useContext} from 'react'; +import Switch from '../common/Switch'; +import {getSiteNewsletters} from '../../utils/helpers'; +import ActionButton from '../common/ActionButton'; + +const React = require('react'); + +function AccountHeader() { + const {brandColor, lastPage, onAction} = useContext(AppContext); + return ( +
+
+ ); +} + +function NewsletterPrefSection({newsletter}) { + return ( +
+
+

{newsletter.name}

+
+
+ { + // handle newsletter pref toggle + }} checked={false} /> +
+
+ ); +} + +function NewsletterPrefs() { + const {site} = useContext(AppContext); + const newsletters = getSiteNewsletters({site}); + return newsletters.map((newsletter) => { + return ( + <> + + + ); + }); +} + +export default function AccountEmailPage() { + const {brandColor} = useContext(AppContext); + return ( +
+ + +
+
+ +
+
+
+
+
+ {}} + disabled={false} + brandColor={brandColor} + label='Update' + style={{width: '100%'}} + /> +
+ {}} + disabled={false} + brandColor={brandColor} + isPrimary={false} + label='Unsubscribe from all' + isDestructive={true} + style={{width: '100%'}} + /> +
+
+
+ ); +} diff --git a/ghost/portal/src/components/pages/AccountHomePage.js b/ghost/portal/src/components/pages/AccountHomePage.js index c6b18469d1..140a92051e 100644 --- a/ghost/portal/src/components/pages/AccountHomePage.js +++ b/ghost/portal/src/components/pages/AccountHomePage.js @@ -3,7 +3,7 @@ import MemberAvatar from '../common/MemberGravatar'; import ActionButton from '../common/ActionButton'; import CloseButton from '../common/CloseButton'; import Switch from '../common/Switch'; -import {getMemberSubscription, getMemberTierName, getUpdatedOfferPrice, hasMultipleProductsFeature, hasOnlyFreePlan, isComplimentaryMember} from '../../utils/helpers'; +import {getMemberSubscription, getMemberTierName, getUpdatedOfferPrice, hasMultipleNewsletters, hasMultipleProductsFeature, hasOnlyFreePlan, isComplimentaryMember} from '../../utils/helpers'; import {getDateString} from '../../utils/date-time'; import {ReactComponent as LoaderIcon} from '../../images/icons/loader.svg'; import {ReactComponent as OfferTagIcon} from '../../images/icons/offer-tag.svg'; @@ -324,7 +324,7 @@ const AccountActions = () => { - +

Email newsletter

@@ -342,6 +342,26 @@ const AccountActions = () => { ); }; +function EmailPreferencesAction() { + const {site, onAction} = useContext(AppContext); + if (!hasMultipleNewsletters({site})) { + return null; + } + return ( +
+
+

Email Preference

+
+ +
+ ); +} + const SubscribeButton = () => { const {site, action, brandColor, onAction} = useContext(AppContext); const {is_stripe_configured: isStripeConfigured} = site; diff --git a/ghost/portal/src/pages.js b/ghost/portal/src/pages.js index 2718bde9f9..7b21fae585 100644 --- a/ghost/portal/src/pages.js +++ b/ghost/portal/src/pages.js @@ -5,6 +5,7 @@ import MagicLinkPage from './components/pages/MagicLinkPage'; import LoadingPage from './components/pages/LoadingPage'; import AccountPlanPage from './components/pages/AccountPlanPage'; import AccountProfilePage from './components/pages/AccountProfilePage'; +import AccountEmailPage from './components/pages/AccountEmailPage'; import OfferPage from './components/pages/OfferPage'; /** List of all available pages in Portal, mapped to their UI component @@ -16,6 +17,7 @@ const Pages = { accountHome: AccountHomePage, accountPlan: AccountPlanPage, accountProfile: AccountProfilePage, + accountEmail: AccountEmailPage, magiclink: MagicLinkPage, loading: LoadingPage, offer: OfferPage diff --git a/ghost/portal/src/utils/fixtures-generator.js b/ghost/portal/src/utils/fixtures-generator.js index d45b9dc912..5f8985bc15 100644 --- a/ghost/portal/src/utils/fixtures-generator.js +++ b/ghost/portal/src/utils/fixtures-generator.js @@ -36,7 +36,8 @@ export function getSiteData({ portalButtonIcon: portal_button_icon = 'icon-1', portalButtonSignupText: portal_button_signup_text = 'Subscribe now', portalButtonStyle: portal_button_style = 'icon-and-text', - membersSupportAddress: members_support_address = 'support@example.com' + membersSupportAddress: members_support_address = 'support@example.com', + newsletters = [] } = {}) { return { title, @@ -59,7 +60,8 @@ export function getSiteData({ portal_button_icon, portal_button_signup_text, portal_button_style, - members_support_address + members_support_address, + newsletters }; } diff --git a/ghost/portal/src/utils/fixtures.js b/ghost/portal/src/utils/fixtures.js index a4a78783c0..f1f02d8965 100644 --- a/ghost/portal/src/utils/fixtures.js +++ b/ghost/portal/src/utils/fixtures.js @@ -104,7 +104,17 @@ export const site = getSiteData({ portalButtonIcon: 'icon-1', portalButtonSignupText: 'Subscribe now', portalButtonStyle: 'icon-and-text', - membersSupportAddress: 'support@example.com' + membersSupportAddress: 'support@example.com', + newsletters: [ + { + id: 'weekly', + name: 'Weekly Rundown' + }, + { + id: 'daily', + name: 'Daily Brief' + } + ] }); export const offer = getOfferData({ diff --git a/ghost/portal/src/utils/helpers.js b/ghost/portal/src/utils/helpers.js index bfbc4da2ad..b2f33b5e08 100644 --- a/ghost/portal/src/utils/helpers.js +++ b/ghost/portal/src/utils/helpers.js @@ -373,6 +373,20 @@ export function hasFreeProductPrice({site}) { return allowSelfSignup && portalPlans.includes('free'); } +export function getSiteNewsletters({site}) { + const { + newsletters + } = site || {}; + return newsletters; +} + +export function hasMultipleNewsletters({site}) { + const { + newsletters + } = site || {}; + return newsletters?.length > 1; +} + export function hasOnlyFreeProduct({site}) { const products = getSiteProducts({site}); return (products.length === 1 && hasFreeProductPrice({site}));