mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-11-29 07:09:48 +03:00
d746265a52
no refs Previously, we were fetching product and prices in the constructor of the controller which did not guarantee settings were updated when picking active prices from the price list. This updates the setup to use `did-insert` modifier to correctly fetch and populate product/price data.
236 lines
13 KiB
Handlebars
236 lines
13 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" {{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.updatePortalPreview}} />
|
||
<Settings::MembersDefaultPostAccess />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="gh-setting-members-portalpreview">
|
||
<div class="gh-setting-members-portal-mock">
|
||
{{#if (eq this.settings.membersSignupAccess 'none')}}
|
||
PORTAL DISABLED
|
||
{{else}}
|
||
<GhSiteIframe
|
||
@src={{this.portalPreviewUrl}}
|
||
@classNames="{{if this.hidePreviewFrame "invisible"}}"
|
||
></GhSiteIframe>
|
||
{{/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.settings.stripeConnectAccountId "connected" ""}}" {{action (toggle "showStripeConnect" this)}}>
|
||
<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 membership signup 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={{action "setFreeSignupRedirect"}}
|
||
@validateUrl={{action "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">Customise prices and premium signup options</p>
|
||
</div>
|
||
|
||
{{#if this.settings.stripeConnectAccountId}}
|
||
<button type="button" class="gh-btn" {{action (toggle "paidOpen" this)}} data-test-toggle-pub-info><span>{{if this.paidOpen "Close" "Expand"}}</span></button>
|
||
{{else}}
|
||
<button type="button" class="stripe-connect" {{action (toggle "showStripeConnect" this)}}>
|
||
<span>Connect with Stripe</span>
|
||
</button>
|
||
{{/if}}
|
||
</div>
|
||
<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={{action "validateStripePlans"}}
|
||
@placeholder=''
|
||
data-test-title-input={{true}}
|
||
/>
|
||
<span class="gh-input-append"><span class="ttu">{{this.currency}}</span>/month</span>
|
||
</div>
|
||
</div>
|
||
{{#if this.stripePlanError}}
|
||
<p class="response w-100 red"> {{this.stripePlanError}} </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={{action "setPaidSignupRedirect"}}
|
||
@validateUrl={{action "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
|
||
openStripeSettings=this.openStripeSettings
|
||
}}
|
||
@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={{action "closeStripeConnect"}}
|
||
@modifier="action wide stripe-connect {{if this.settings.stripeConnectAccountId "stripe-connected" ""}}" />
|
||
{{/if}}
|
||
</section> |