mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-11-29 07:09:48 +03:00
db09b317eb
no issue - added `@onDestroyed` argument to `<GhSiteIframe>` so consumers can clean up any references - used `@onLoaded` and `@onDestroyed` to handle a reference to the preview iframe - updated portal preview load handler and update method to trigger a resize task - add a 100ms delay to allow for portal to re-render itself - reach through the two iframes to get the portal container element and use it's height to set the style attribute on the portal preview container element
237 lines
13 KiB
Handlebars
237 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}}
|
||
@invisibleUntilLoaded={{true}}
|
||
@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.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>/year</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> |