Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-04-01 02:41:39 -05:00
Code Issues Activity

Hooked newsletter subscription toggle to API

Browse source 
refs https://github.com/TryGhost/members.js/issues/20

- Allows paid/free member to update their newsletter subscription status
- Newsletter subscription status is immediately updated on toggle
This commit is contained in:
Rish 2020-05-21 11:54:44 +05:30
parent a859da1aa4
commit ca0bdab60b
3 changed files with 23 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
ghost/portal/src/components/common/Switch.js
View file

@ -8,10 +8,12 @@ function Switch({id, label, onToggle, checked = false}) {
type="checkbox"
checked={checked}
id={id}
onChange={e => onToggle(e)}
onChange={() => {}}
aria-label={label}
/>
<span className="input-toggle-component"></span>
<span className="input-toggle-component" onClick={(e) => {
onToggle(e);
}}></span>
</label>
</div>
);

12
ghost/portal/src/components/pages/AccountProfilePage.js
View file

@ -148,7 +148,15 @@ export default class AccountProfilePage extends React.Component {
);
}
onToggleSubscription(e, subscribed) {
this.context.onAction('updateMember', {subscribed: !subscribed});
}
renderNewsletterOption() {
const {subscribed, paid} = this.context.member;
if (paid) {
return null;
}
return (
<div style={{padding: '0 24px', display: 'flex', alignItems: 'center'}}>
<div style={{flexGrow: 1}}>
@ -164,7 +172,9 @@ export default class AccountProfilePage extends React.Component {
}}> You are not subscribed to email newsletters </div>
</div>
<div>
<Switch onToggle={(e) => {}} />
<Switch onToggle={(e) => {
this.onToggleSubscription(e, subscribed);
}} checked={subscribed} />
</div>
</div>
);

10
ghost/portal/src/components/pages/PaidAccountHomePage.js
View file

@ -128,12 +128,16 @@ export default class PaidAccountHomePage extends React.Component {
this.context.onAction('editBilling');
}
onToggleSubscription(e, subscribed) {
this.context.onAction('updateMember', {subscribed: !subscribed});
}
renderAccountDetails() {
const buttonStyle = {
padding: '6px 9px', border: '1px solid black', width: '60px', display: 'flex', justifyContent: 'center',
borderRadius: '5px', cursor: 'pointer'
};
const {name, email, subscriptions} = this.context.member;
const {name, email, subscriptions, subscribed} = this.context.member;
const {
plan,
@ -184,7 +188,9 @@ export default class PaidAccountHomePage extends React.Component {
</div>
</div>
<div>
<Switch onToggle={(e) => {}}/>
<Switch onToggle={(e) => {
this.onToggleSubscription(e, subscribed);
}} checked={subscribed} />
</div>
</div>
</div>