mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-11-29 07:09:48 +03:00
2a4dc849d0
no issue - when signup access is set to "none" the portal preview will be blank and the settings not available so it doesn't make sense to make the customise portal modal available
252 lines
14 KiB
Handlebars
252 lines
14 KiB
Handlebars
<section class="gh-canvas gh-setting-members-canvas" {{did-insert this.setup}}>
|
||
<GhCanvasHeader class="gh-canvas-header gh-setting-members-header">
|
||
<h2 class="gh-canvas-title" data-test-screen-title>
|
||
<LinkTo @route="settings">Settings</LinkTo>
|
||
<span>{{svg-jar "arrow-right"}}</span>
|
||
Membership
|
||
</h2>
|
||
<section class="view-actions">
|
||
<GhTaskButton
|
||
@buttonText="Save"
|
||
@task={{this.saveSettingsTask}}
|
||
@successText="Saved"
|
||
@runningText="Saving"
|
||
@class="gh-btn gh-btn-primary gh-btn-icon"
|
||
data-test-button="save-settings"
|
||
/>
|
||
</section>
|
||
</GhCanvasHeader>
|
||
|
||
<section class="view-container settings-debug">
|
||
|
||
<div class="gh-setting-members-basics">
|
||
<div class="gh-setting-members-basicsform">
|
||
<p class="intro">Fund your work with subscription revenue. Connect your Stripe account and offer premium content to your audience. Our creators are already making over $2 million per year, while Ghost takes 0% payment fees.</p>
|
||
<hr>
|
||
<div>
|
||
<section class="gh-expandable gh-setting-members-portalcta">
|
||
<div class="gh-expandable-block">
|
||
<div class="gh-expandable-header">
|
||
<div>
|
||
<h4 class="gh-expandable-title">Portal Settings</h4>
|
||
<p class="gh-expandable-description">
|
||
Customize members modal signup flow
|
||
</p>
|
||
</div>
|
||
<button type="button" class="gh-btn gh-btn-green" disabled={{eq this.settings.membersSignupAccess "none"}} {{on "click" this.openPortalSettings}} data-test-toggle="portal-settings">
|
||
<span>Customise Portal →</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<div class="gh-setting-members-access">
|
||
<Settings::MembersSubscriptionAccess @onChange={{this.membersSubscriptionAccessChanged}} />
|
||
<Settings::MembersDefaultPostAccess />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="gh-setting-members-portalpreview">
|
||
<div class="gh-setting-members-portal-mock">
|
||
{{#if (or (eq this.settings.membersSignupAccess 'none') this.switchFromNoneTask.isRunning)}}
|
||
<div class="gh-setting-members-portal-disabled">
|
||
<span class="lightgrey">{{svg-jar "portal-logo-stroke"}}</span>
|
||
<h4>Portal disabled</h4>
|
||
<p>Change your Subscription Access setting to re-enable Portal</p>
|
||
</div>
|
||
{{else}}
|
||
<GhSiteIframe
|
||
scrolling="no"
|
||
@src={{this.portalPreviewUrl}}
|
||
@invisibleUntilLoaded="portal-ready"
|
||
@onLoad={{this.portalPreviewLoaded}}
|
||
@onDestroyed={{this.portalPreviewDestroyed}} />
|
||
{{/if}}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="gh-setting-members-tierscontainer">
|
||
<div class="gh-settings-members-tiersheader">
|
||
<h4 class="gh-main-section-header small bn">Membership tiers</h4>
|
||
<button type="button" class="gh-btn gh-btn-outline gh-btn-stripe-status {{if this.isConnectDisallowed "disabled"}} {{if this.settings.stripeConnectAccountId "connected" ""}}" {{on "click" this.openStripeConnect}}>
|
||
<span>
|
||
{{if this.settings.stripeConnectAccountId "Connected to Stripe" "Stripe not connected"}}
|
||
</span>
|
||
</button>
|
||
</div>
|
||
<section class="gh-expandable">
|
||
<div class="gh-expandable-block">
|
||
<div class="gh-expandable-header">
|
||
<div>
|
||
<h4 class="gh-expandable-title">Free</h4>
|
||
<p class="gh-expandable-description">Free member sign up settings</p>
|
||
</div>
|
||
<button type="button" class="gh-btn" {{on "click" (toggle "freeOpen" this)}} data-test-toggle-pub-info><span>{{if this.freeOpen "Close" "Expand"}}</span></button>
|
||
</div>
|
||
<div class="gh-expandable-content">
|
||
{{#liquid-if this.freeOpen}}
|
||
<div class="gh-setting-content-extended">
|
||
<GhFormGroup @errors={{this.settings.errors}} @hasValidated={{this.settings.hasValidated}} @property="free-welcome-page">
|
||
<label for="freeWelcomePage">Welcome page</label>
|
||
<GhUrlInput
|
||
@id="freeWelcomePage"
|
||
@value={{readonly this.settings.membersFreeSignupRedirect}}
|
||
@baseUrl={{readonly this.siteUrl}}
|
||
@setResult={{this.setFreeSignupRedirect}}
|
||
@validateUrl={{this.validateFreeSignupRedirect}}
|
||
@placeholder={{readonly this.siteUrl}}
|
||
/>
|
||
<GhErrorMessage
|
||
@errors={{settings.errors}}
|
||
@property="membersFreeSignupRedirect"
|
||
/>
|
||
<p>Redirect to this URL after signup for a free membership</p>
|
||
</GhFormGroup>
|
||
</div>
|
||
{{/liquid-if}}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section class="gh-expandable">
|
||
<div class="gh-expandable-block">
|
||
<div class="gh-expandable-header">
|
||
<div>
|
||
<h4 class="gh-expandable-title">Premium</h4>
|
||
<p class="gh-expandable-description">Set prices and paid member sign up settings</p>
|
||
</div>
|
||
|
||
{{#if this.settings.stripeConnectAccountId}}
|
||
<button type="button" class="gh-btn" {{on "click" (toggle "paidOpen" this)}} data-test-toggle-pub-info><span>{{if this.paidOpen "Close" "Expand"}}</span></button>
|
||
{{else}}
|
||
<button type="button" class="stripe-connect {{if this.isConnectDisallowed "disabled"}}" {{on "click" this.openStripeConnect}}>
|
||
<span>Connect with Stripe</span>
|
||
</button>
|
||
{{/if}}
|
||
</div>
|
||
{{#if this.isConnectDisallowed}}
|
||
<div class="gh-setting-nossl">
|
||
<div class="gh-setting-nossl-container">
|
||
<span class="red">{{svg-jar "shield-lock"}}</span>
|
||
<h4>Your site is not secured</h4>
|
||
<p>Paid memberships through Ghost can only be run on sites secured by SSL (HTTPS vs. HTTP). More information on adding a free SSL Certificate to your Ghost site can be <a href="https://ghost.org/integrations/lets-encrypt/" target="_blank" rel="noopener noreferrer">found here</a>.</p>
|
||
</div>
|
||
</div>
|
||
{{/if}}
|
||
<div class="gh-expandable-content">
|
||
{{#liquid-if this.paidOpen}}
|
||
<div class="gh-setting-content-extended">
|
||
{{#if this.fetchDefaultProduct.isRunning}}
|
||
Loading...
|
||
{{else}}
|
||
<GhFormGroup @errors={{this.settings.errors}} @hasValidated={{this.settings.hasValidated}} @property="prices">
|
||
<div class="gh-settings-members-pricelabelcont">
|
||
<label for="monthlyPrice">Prices</label>
|
||
<span>–</span>
|
||
<div>
|
||
<span class="gh-setting-members-currency gh-select">
|
||
<div class="gh-setting-members-currencylabel">
|
||
<span>{{this.currency}}</span>
|
||
{{svg-jar "arrow-down-small"}}
|
||
</div>
|
||
<OneWaySelect
|
||
@value={{this.selectedCurrency}}
|
||
id="currency"
|
||
name="currency"
|
||
@options={{readonly this.allCurrencies}}
|
||
@optionValuePath="value"
|
||
@optionLabelPath="label"
|
||
@update={{this.setStripePlansCurrency}}
|
||
/>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div class="gh-setting-members-prices">
|
||
|
||
<div class="gh-input-group">
|
||
<GhTextInput
|
||
@id="monthlyPrice"
|
||
@value={{readonly this.stripeMonthlyAmount}}
|
||
@type="number"
|
||
@input={{action (mut this.stripeMonthlyAmount) value="target.value"}}
|
||
@focus-out={{action "validateStripePlans"}}
|
||
/>
|
||
<span class="gh-input-append"><span class="ttu">{{this.currency}}</span>/month</span>
|
||
</div>
|
||
<div class="gh-input-group">
|
||
<GhTextInput
|
||
@id="yearlyPrice"
|
||
@value={{readonly this.stripeYearlyAmount}}
|
||
@type="number"
|
||
@input={{action (mut this.stripeYearlyAmount) value="target.value"}}
|
||
@focus-out={{this.validateStripePlans}}
|
||
@placeholder=''
|
||
data-test-title-input={{true}}
|
||
/>
|
||
<span class="gh-input-append"><span class="ttu">{{this.currency}}</span>/year</span>
|
||
</div>
|
||
</div>
|
||
{{#if this.stripePlanError}}
|
||
<p class="response w-100"><span class="red">{{this.stripePlanError}}</span></p>
|
||
{{/if}}
|
||
</GhFormGroup>
|
||
|
||
<GhFormGroup @errors={{this.settings.errors}} @hasValidated={{this.settings.hasValidated}} @property="paid-welcome-page">
|
||
<label for="paidWelcomePage">Welcome page</label>
|
||
<GhUrlInput
|
||
@value={{readonly this.settings.membersPaidSignupRedirect}}
|
||
@baseUrl={{readonly this.siteUrl}}
|
||
@setResult={{this.setPaidSignupRedirect}}
|
||
@validateUrl={{this.validatePaidSignupRedirect}}
|
||
@placeholder={{readonly this.siteUrl}}
|
||
/>
|
||
<GhErrorMessage
|
||
@errors={{settings.errors}}
|
||
@property="membersPaidSignupRedirect"
|
||
/>
|
||
<p>Redirect to this URL after signup for premium membership</p>
|
||
</GhFormGroup>
|
||
{{/if}}
|
||
</div>
|
||
{{/liquid-if}}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</section>
|
||
|
||
{{#if this.showLeaveRouteModal}}
|
||
<GhFullscreenModal
|
||
@modal="leave-settings"
|
||
@confirm={{this.confirmLeave}}
|
||
@close={{this.cancelLeave}}
|
||
@modifier="action wide"
|
||
/>
|
||
{{/if}}
|
||
|
||
{{#if this.showPortalSettings}}
|
||
<GhFullscreenModal @modal="portal-settings"
|
||
@model={{hash
|
||
preloadTask=this.saveSettingsTask
|
||
openStripeSettings=this.openStripeConnect
|
||
}}
|
||
@close={{this.closePortalSettings}}
|
||
@modifier="full-overlay portal-settings" />
|
||
{{/if}}
|
||
|
||
{{#if this.showLeavePortalModal}}
|
||
<GhFullscreenModal
|
||
@modal="leave-settings"
|
||
@confirm={{this.confirmClosePortalSettings}}
|
||
@close={{this.cancelClosePortalSettings}}
|
||
@modifier="action wide"
|
||
/>
|
||
{{/if}}
|
||
|
||
{{#if this.showStripeConnect}}
|
||
<GhFullscreenModal
|
||
@modal="stripe-connect"
|
||
@close={{this.closeStripeConnect}}
|
||
@modifier="action wide stripe-connect" />
|
||
{{/if}}
|
||
</section> |