Updated members Labs settings UI
no issue - new settings have been introduced for members, switched to expand/collapse UI pattern for members settings
This commit is contained in:
Peter Zimon
parent
acf1fae267
commit
428f4f7e66
|
|
@ -23,6 +23,7 @@ export default Component.extend({
|
|||
subscriptionSettings.stripeConfig = stripeProcessor.config;
|
||||
subscriptionSettings.requirePaymentForSetup = !!subscriptionSettings.requirePaymentForSetup;
|
||||
subscriptionSettings.fromAddress = subscriptionSettings.fromAddress || 'noreply';
|
||||
|
||||
return subscriptionSettings;
|
||||
}),
|
||||
|
||||
|
|
|
|||
|
|
@ -1,106 +1,166 @@
|
|||
<div class="flex flex-column b--whitegrey bt">
|
||||
<section class="flex flex-column bb b--whitegrey pa5">
|
||||
<div class="w-50 mb4">
|
||||
<label class="fw6 f6">Stripe publishable API key</label>
|
||||
{{gh-text-input
|
||||
value=(readonly subscriptionSettings.stripeConfig.public_token)
|
||||
input=(action "setSubscriptionSettings" "public_token")
|
||||
class="mt1"
|
||||
}}
|
||||
</div>
|
||||
<div class="w-50 mb4">
|
||||
<label class="fw6 f6 mt4">Stripe secret API key</label>
|
||||
{{gh-text-input
|
||||
value=(readonly subscriptionSettings.stripeConfig.secret_token)
|
||||
input=(action "setSubscriptionSettings" "secret_token")
|
||||
class="mt1"
|
||||
}}
|
||||
<a href="https://dashboard.stripe.com/account/apikeys" target="_blank" class="mt1 fw4 f8">
|
||||
Where to find Stripe API keys
|
||||
</a>
|
||||
|
||||
<section class="bb b--whitegrey pa5">
|
||||
<div class="flex justify-between">
|
||||
<div>
|
||||
<h4 class="gh-setting-title">Stripe settings</h4>
|
||||
<p class="gh-setting-desc pa0 ma0">Configure Stripe API keys for signups</p>
|
||||
</div>
|
||||
<div>
|
||||
<button type="button" class="gh-btn" {{action (toggle "membersStripeOpen" this)}} data-test-toggle-membersstripe><span>{{if membersStripeOpen "Close" "Expand"}}</span></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-50 flex nb5">
|
||||
<div class="w-50 mr3">
|
||||
{{#gh-form-group}}
|
||||
<label class="fw6 f6">Monthly price</label>
|
||||
<div class="mt1 relative gh-labs-price-label gh-labs-monthly-price">
|
||||
{{#liquid-if membersStripeOpen}}
|
||||
<div class="w-50 mb4 mt5">
|
||||
<label class="fw6 f8">Stripe publishable API key</label>
|
||||
{{gh-text-input
|
||||
value=(readonly subscriptionSettings.stripeConfig.plans.monthly.dollarAmount)
|
||||
type="number"
|
||||
input=(action "setSubscriptionSettings" "month")
|
||||
}}
|
||||
value=(readonly subscriptionSettings.stripeConfig.public_token)
|
||||
input=(action "setSubscriptionSettings" "public_token")
|
||||
class="mt1"
|
||||
}}
|
||||
</div>
|
||||
{{/gh-form-group}}
|
||||
<div class="w-50 mb4">
|
||||
<label class="fw6 f8 mt4">Stripe secret API key</label>
|
||||
{{gh-text-input
|
||||
value=(readonly subscriptionSettings.stripeConfig.secret_token)
|
||||
input=(action "setSubscriptionSettings" "secret_token")
|
||||
class="mt1"
|
||||
}}
|
||||
<a href="https://dashboard.stripe.com/account/apikeys" target="_blank" class="mt1 fw4 f8">
|
||||
Where to find Stripe API keys
|
||||
</a>
|
||||
</div>
|
||||
{{/liquid-if}}
|
||||
</section>
|
||||
|
||||
<section class="bb b--whitegrey pa5">
|
||||
<div class="flex justify-between">
|
||||
<div>
|
||||
<h4 class="gh-setting-title">Pricing</h4>
|
||||
<p class="gh-setting-desc pa0 ma0">Set monthly and yearly subscription prices</p>
|
||||
</div>
|
||||
<div class="w-50 ml2">
|
||||
{{#gh-form-group class="description-container"}}
|
||||
<label class="fw6 f6">Yearly price</label>
|
||||
<div class="mt1 relative gh-labs-price-label gh-labs-yearly-price">
|
||||
{{gh-text-input
|
||||
value=(readonly subscriptionSettings.stripeConfig.plans.yearly.dollarAmount)
|
||||
type="number"
|
||||
input=(action "setSubscriptionSettings" "year")
|
||||
}}
|
||||
<div>
|
||||
<button type="button" class="gh-btn" {{action (toggle "membersPricingOpen" this)}} data-test-toggle-memberspricing><span>{{if membersPricingOpen "Close" "Expand"}}</span></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{#liquid-if membersPricingOpen}}
|
||||
<div class="w-50 flex mb4 mt5">
|
||||
<div class="w-50 mr3">
|
||||
{{#gh-form-group}}
|
||||
<label class="fw6 f8">Monthly price</label>
|
||||
<div class="mt1 relative gh-labs-price-label gh-labs-monthly-price">
|
||||
{{gh-text-input
|
||||
value=(readonly subscriptionSettings.stripeConfig.plans.monthly.dollarAmount)
|
||||
type="number"
|
||||
input=(action "setSubscriptionSettings" "month")
|
||||
}}
|
||||
</div>
|
||||
{{/gh-form-group}}
|
||||
</div>
|
||||
<div class="w-50 ml2">
|
||||
{{#gh-form-group class="description-container"}}
|
||||
<label class="fw6 f8">Yearly price</label>
|
||||
<div class="mt1 relative gh-labs-price-label gh-labs-yearly-price">
|
||||
{{gh-text-input
|
||||
value=(readonly subscriptionSettings.stripeConfig.plans.yearly.dollarAmount)
|
||||
type="number"
|
||||
input=(action "setSubscriptionSettings" "year")
|
||||
}}
|
||||
</div>
|
||||
{{/gh-form-group}}
|
||||
</div>
|
||||
</div>
|
||||
{{/liquid-if}}
|
||||
</section>
|
||||
|
||||
<section class="bb b--whitegrey pa5">
|
||||
<div class="flex justify-between">
|
||||
<div>
|
||||
<h4 class="gh-setting-title">Allow free members signup</h4>
|
||||
<p class="gh-setting-desc pa0 ma0">Allow free members signup</p>
|
||||
</div>
|
||||
<div>
|
||||
<div class="for-switch">
|
||||
<label class="switch" for="members-require-payment"
|
||||
{{action "setSubscriptionSettings" "requirePaymentForSignup" bubbles="false"}}>
|
||||
<input type="checkbox" checked={{subscriptionSettings.requirePaymentForSignup}} class="gh-input"
|
||||
onclick={{action "setSubscriptionSettings" "requirePaymentForSignup"}}
|
||||
data-test-checkbox="members-require-payment">
|
||||
<span class="input-toggle-component mt1"></span>
|
||||
</label>
|
||||
</div>
|
||||
{{/gh-form-group}}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="flex flex-column bb b--whitegrey pa5">
|
||||
<label class="dib f6 fw6 mb4">Default post access</label>
|
||||
|
||||
<div class="gh-radio {{if (eq settings.defaultContentVisibility "public") "active"}}"
|
||||
{{action "setDefaultContentVisibility" "public" on="click"}}>
|
||||
<div class="gh-radio-button" data-test-publishmenu-unpublished-option></div>
|
||||
<div class="gh-radio-content">
|
||||
<div class="gh-radio-label">Public</div>
|
||||
<section class="bb b--whitegrey pa5">
|
||||
<div class="flex justify-between">
|
||||
<div>
|
||||
<h4 class="gh-setting-title">Default post access</h4>
|
||||
<p class="gh-setting-desc pa0 ma0">Configure restrictions for new posts</p>
|
||||
</div>
|
||||
<div>
|
||||
<button type="button" class="gh-btn" {{action (toggle "membersPostAccessOpen" this)}} data-test-toggle-memberspostaccess><span>{{if membersPostAccessOpen "Close" "Expand"}}</span></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="gh-radio {{if (eq settings.defaultContentVisibility "members") "active"}}"
|
||||
{{action "setDefaultContentVisibility" "members" on="click"}}>
|
||||
<div class="gh-radio-button" data-test-publishmenu-published-option></div>
|
||||
<div class="gh-radio-content">
|
||||
<div class="gh-radio-label">Members only</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="gh-radio {{if (eq settings.defaultContentVisibility "paid") "active"}}"
|
||||
{{action "setDefaultContentVisibility" "paid" on="click"}}>
|
||||
<div class="gh-radio-button" data-test-publishmenu-published-option></div>
|
||||
<div class="gh-radio-content">
|
||||
<div class="gh-radio-label">Paid-members only</div>
|
||||
|
||||
{{#liquid-if membersPostAccessOpen}}
|
||||
<div class="flex flex-column w-50 flex mb4 mt5">
|
||||
<div class="gh-radio {{if (eq settings.defaultContentVisibility "public") "active"}}"
|
||||
{{action "setDefaultContentVisibility" "public" on="click"}}>
|
||||
<div class="gh-radio-button" data-test-publishmenu-unpublished-option></div>
|
||||
<div class="gh-radio-content">
|
||||
<div class="gh-radio-label">Public</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="gh-radio {{if (eq settings.defaultContentVisibility "members") "active"}}"
|
||||
{{action "setDefaultContentVisibility" "members" on="click"}}>
|
||||
<div class="gh-radio-button" data-test-publishmenu-published-option></div>
|
||||
<div class="gh-radio-content">
|
||||
<div class="gh-radio-label">Members only</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="gh-radio {{if (eq settings.defaultContentVisibility "paid") "active"}}"
|
||||
{{action "setDefaultContentVisibility" "paid" on="click"}}>
|
||||
<div class="gh-radio-button" data-test-publishmenu-published-option></div>
|
||||
<div class="gh-radio-content">
|
||||
<div class="gh-radio-label">Paid-members only</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{/liquid-if}}
|
||||
</section>
|
||||
|
||||
<div class="flex flex-column bb b--whitegrey pa5">
|
||||
<div class="for-checkbox">
|
||||
<label class="checkbox flex items-center" for="members-require-payment"
|
||||
{{action "setSubscriptionSettings" "requirePaymentForSignup" bubbles="false"}}>
|
||||
<span class="f6 fw6"> Require payment for signups</span>
|
||||
<input type="checkbox" checked={{subscriptionSettings.requirePaymentForSignup}} class="gh-input"
|
||||
onclick={{action "setSubscriptionSettings" "requirePaymentForSignup"}}
|
||||
data-test-checkbox="members-require-payment">
|
||||
<span class="input-toggle-component mt1"></span>
|
||||
</label>
|
||||
<section class="bb b--whitegrey pa5">
|
||||
<div class="flex justify-between">
|
||||
<div>
|
||||
<h4 class="gh-setting-title">Emails</h4>
|
||||
<p class="gh-setting-desc pa0 ma0">Membership related email settings</p>
|
||||
</div>
|
||||
<div>
|
||||
<button type="button" class="gh-btn" {{action (toggle "membersEmailOpen" this)}} data-test-toggle-membersemail><span>{{if membersEmailOpen "Close" "Expand"}}</span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-column pl5 pr5 pt5">
|
||||
<div class="w-50 mr3">
|
||||
|
||||
{{#liquid-if membersEmailOpen}}
|
||||
<div class="flex flex-column w-40 flex mb2 mt5">
|
||||
{{#gh-form-group}}
|
||||
<label class="dib f6 fw6 mb4">Email</label>
|
||||
<div class="flex items-center justify-center">
|
||||
<label class="fw6 f8">Sender email address</label>
|
||||
<div class="flex items-center justify-center mt1">
|
||||
{{gh-text-input
|
||||
value=(readonly subscriptionSettings.fromAddress)
|
||||
input=(action "setSubscriptionSettings" "fromAddress")
|
||||
class="w20"
|
||||
}}
|
||||
<span class="ml3"> @{{config.blogDomain}}</span>
|
||||
</div>
|
||||
<div class="f6 fw4"> "From" address for sending sign up and sign in emails</div>
|
||||
<div class="f8 fw4 midgrey mt1"> "From" address for sign up and sign in emails</div>
|
||||
{{/gh-form-group}}
|
||||
</div>
|
||||
</div>
|
||||
{{/liquid-if}}
|
||||
</section>
|
||||
</div>
|
||||
|
|
@ -86,45 +86,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{#if config.enableDeveloperExperiments}}
|
||||
<div class="gh-setting-header">Members (BETA) </div>
|
||||
<div class="flex flex-column br3 shadow-1 bg-grouped-table mt2">
|
||||
<div class="gh-setting-first gh-setting-last">
|
||||
<div class="gh-members-setting-content">
|
||||
<div class="flex">
|
||||
<div class="flex flex-column flex-grow-1">
|
||||
<div class="gh-setting-title pl5 pt5">Members</div>
|
||||
<div class="gh-setting-desc pl5 pb5">Enable free or paid member registration.</div>
|
||||
</div>
|
||||
{{#if session.user.isOwner}}
|
||||
<div class="gh-setting-action">
|
||||
<div class="for-switch pa5">{{gh-feature-flag "members"}}</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
|
||||
{{#liquid-if feature.labs.members}}
|
||||
{{gh-members-lab-setting
|
||||
settings=settings
|
||||
setDefaultContentVisibility=(action "setDefaultContentVisibility")
|
||||
setMembersSubscriptionSettings=(action "setMembersSubscriptionSettings")
|
||||
}}
|
||||
|
||||
<div class="mb2 mt5 pl5 pr5 pb5">
|
||||
{{gh-task-button "Save members settings"
|
||||
task=saveSettings
|
||||
successText="Saved"
|
||||
runningText="Saving"
|
||||
class="gh-btn gh-btn-blue gh-btn-icon"
|
||||
}}
|
||||
</div>
|
||||
{{/liquid-if}}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
|
||||
<div class="gh-setting-header">Beta features</div>
|
||||
<div class="flex flex-column br3 shadow-1 bg-grouped-table pa5 mt2">
|
||||
<div class="gh-setting-first">
|
||||
|
|
@ -252,6 +214,43 @@
|
|||
{{/gh-uploader}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{#if config.enableDeveloperExperiments}}
|
||||
<div class="gh-setting-header">Members (BETA) </div>
|
||||
<div class="flex flex-column br3 shadow-1 bg-grouped-table mt2">
|
||||
<div class="gh-setting-first gh-setting-last">
|
||||
<div class="gh-members-setting-content">
|
||||
<div class="flex">
|
||||
<div class="flex flex-column flex-grow-1">
|
||||
<div class="gh-setting-title pl5 pt5">Members</div>
|
||||
<div class="gh-setting-desc pl5 pb5">Enable membership for your site</div>
|
||||
</div>
|
||||
<div class="gh-setting-action">
|
||||
<div class="for-switch pa5">{{gh-feature-flag "members"}}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{#liquid-if feature.labs.members}}
|
||||
{{gh-members-lab-setting
|
||||
settings=settings
|
||||
setDefaultContentVisibility=(action "setDefaultContentVisibility")
|
||||
setMembersSubscriptionSettings=(action "setMembersSubscriptionSettings")
|
||||
}}
|
||||
|
||||
<div class="mt5 pl5 pr5 pb5">
|
||||
{{gh-task-button "Save members settings"
|
||||
task=saveSettings
|
||||
successText="Saved"
|
||||
runningText="Saving"
|
||||
class="gh-btn gh-btn-blue gh-btn-icon"
|
||||
}}
|
||||
</div>
|
||||
{{/liquid-if}}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
</section>
|
||||
</section>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue