Ghost/ghost/admin/app/components/gh-members-payments-setting.hbs
Kevin Ansfield 58759b3069 Added option to disable member subscriptions (#1925)
refs https://github.com/TryGhost/Team/issues/579

- new Access settings screen that moves subscription access and default post visibility from the Payments settings screen
- expanded "Free signup" toggle into three signup access options
  - "anyone" - same as previous "allow free member signup" option set to `true`
  - "invite only" -  same as previous "allow free member signup" option set to `false`
  - "nobody" - completely disables member signup and login. Removes injected portal and stripe scripts on the front-end and hides member related sections on the admin dashboard

(this commit moves the above changes out from behind the developer experiments flag and cleans up now-unused code)
2021-04-21 12:09:40 +01:00

227 lines
14 KiB
Handlebars
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<div class="gh-main-section">
<h4 class="gh-main-section-header small bn"></h4>
<section class="gh-expandable">
{{#if this.stripeDirect}}
<div class="gh-expandable-block">
<div class="gh-expandable-header">
<div>
<h4 class="gh-expandable-title">Connect to Stripe</h4>
<p class="gh-expandable-description">Configure API keys to create subscriptions and take payments</p>
</div>
<button type="button" class="gh-btn" {{action (toggle "membersStripeOpen" this)}} data-test-toggle-membersstripe><span>{{if this.membersStripeOpen "Close" "Expand"}}</span></button>
</div>
<div class="gh-expandable-content">
{{#liquid-if this.membersStripeOpen}}
<div class="flex flex-column flex-row-l items-start justify-between mb4 mt6">
<div class="w-100 w-50-l">
<div class="mb4">
<label class="fw6 f8">Stripe Publishable key</label>
<GhTextInput
@type="password"
@value={{readonly this.stripeDirectPublicKey}}
@input={{action "setStripeDirectPublicKey"}}
@class="mt1 password"
/>
</div>
<div class="nudge-top--3">
<label class="fw6 f8 mt4">Stripe Secret key</label>
<GhTextInput
@type="password"
@value={{readonly this.stripeDirectSecretKey}}
@input={{action "setStripeDirectSecretKey"}}
@class="mt1 password"
/>
<a href="https://dashboard.stripe.com/account/apikeys" target="_blank" class="mt1 fw4 f8">
Find your Stripe API keys here &raquo;
</a>
</div>
</div>
<div class="ml0 ml5-l mt6">
<div class="gh-members-stripe-info">
<div class="gh-members-stripe-info-header">
<h4>How you get paid</h4>
{{svg-jar "stripe-verified-partner-badge" class="gh-members-stripe-badge"}}
</div>
<p class="f8 mt2 mb0">
Stripe is our exclusive direct payments partner.<br />
Ghost collects <strong>no fees</strong> on any payments! If you dont have a Stripe account yet, you can <a href="https://stripe.com" target="_blank" rel="noopener" class="gh-members-stripe-link">sign up here</a>.
</p>
</div>
</div>
</div>
{{/liquid-if}}
</div>
</div>
{{else}}
<div class="gh-expandable-block">
<div class="gh-expandable-header">
<div>
<h4 class="gh-expandable-title">Connect to Stripe</h4>
<p class="gh-expandable-description">
{{#if this.stripeConnectAccountId}}
{{#if this.hasActiveStripeSubscriptions}}
<span class="red">
Cannot disconnect while there are members with active Stripe subscriptions.
</span>
{{else}}
<span>
{{#if this.stripeConnectSuccess}}
{{svg-jar "check-circle" class="stroke-green w4 h4 nudge-top--3"}} <span class="green-d1">Successfully connected to {{this.stripeConnectAccountName}}</span>
{{else}}
Connected to <a href="https://dashboard.stripe.com/{{this.stripeConnectAccountId}}" target="_blank">{{this.stripeConnectAccountName}}</a>
{{/if}}
{{#unless this.stripeConnectLivemode}}
<span class="gh-members-connect-testmodelabel">Test mode</span>
{{/unless}}
</span>
{{/if}}
{{else}}
<span>Connect to Stripe to create subscriptions and take payments</span>
{{/if}}
</p>
</div>
{{#if this.stripeConnectAccountId}}
<button type="button" class="gh-btn" {{action "openDisconnectStripeModal"}}><span>Disconnect</span></button>
{{else}}
<button type="button" class="gh-btn" {{action (toggle "membersStripeOpen" this)}} data-test-toggle-membersstripe><span>{{if this.membersStripeOpen "Close" "Expand"}}</span></button>
{{/if}}
</div>
<div class="gh-expandable-content">
{{#liquid-if this.membersStripeOpen}}
<div class="mb2">
<div class="flex flex-column flex-row-l items-start justify-between">
<div class="w-100 w-50-l">
<label class="fw6 f8">Generate secure key</label>
<div class="flex items-center mb4 justify-between gh-members-connectbutton-container mt2">
<a href="{{if this.stripeConnectTestMode this.testStripeConnectAuthUrl this.liveStripeConnectAuthUrl}}" class="stripe-connect light-blue" target="_blank"><span>Connect with Stripe</span></a>
<div class="ml2 flex items-center flex-nowrap">
<span class="mr2 f8 midgrey nowrap {{if this.stripeConnectTestMode "gh-members-connect-testmodeon"}}">{{if this.stripeConnectTestMode "Using" "Use"}} test mode</span>
<div class="for-switch small">
<label class="switch" for="stripe-connect-test-mode" {{action (toggle "stripeConnectTestMode" this) bubbles="false"}}>
<input type="checkbox" class="gh-input" checked={{this.stripeConnectTestMode}} onclick={{action (toggle "stripeConnectTestMode" this)}} data-test-checkbox="stripe-connect-test-mode">
<span class="input-toggle-component mt1"></span>
</label>
</div>
</div>
</div>
<div class="nudge-top--3">
<GhTextarea
@class="gh-members-stripe-connect-token"
@placeholder="Paste your secure key here"
@input={{action "setStripeConnectIntegrationToken"}}
/>
{{#if this.stripeConnectError}}<p class="mb0 mt2 f8 red">{{this.stripeConnectError}}</p>{{/if}}
</div>
</div>
<div class="mt5 mt5-m mt8-l ml0 ml5-l">
<div class="gh-members-stripe-info">
<div class="gh-members-stripe-info-header">
<h4>How you get paid</h4>
{{svg-jar "stripe-verified-partner-badge" class="gh-members-stripe-badge"}}
</div>
<p class="f8 mt2 mb0">
Stripe is our exclusive direct payments partner.<br />
Ghost collects <strong>no fees</strong> on any payments! If you dont have a Stripe account yet, you can <a href="https://stripe.com" target="_blank" rel="noopener" class="gh-members-stripe-link">sign up here</a>.
</p>
</div>
</div>
</div>
<div class="gh-members-connect-savecontainer {{if this.settings.stripeConnectIntegrationToken "expanded"}}">
<GhTaskButton @buttonText="Save Stripe settings"
@task={{this.saveStripeSettings}}
@successText="Saved"
@disabled={{is-empty this.settings.stripeConnectIntegrationToken}}
@runningText="Saving"
@class="gh-btn gh-btn-green gh-btn-icon"
/>
</div>
</div>
{{/liquid-if}}
</div>
</div>
{{/if}}
<div class="gh-expandable-block">
<div class="gh-expandable-header">
<div>
<h4 class="gh-expandable-title">Subscription pricing</h4>
<p class="gh-expandable-description">Set monthly and yearly recurring subscription prices</p>
</div>
<button type="button" class="gh-btn" {{action (toggle "membersPricingOpen" this)}} data-test-toggle-memberspricing><span>{{if this.membersPricingOpen "Close" "Expand"}}</span></button>
</div>
<div class="gh-expandable-content">
{{#liquid-if this.membersPricingOpen}}
<div class="w-100 w-50-l flex flex-column flex-row-ns">
<div class="w-100">
<GhFormGroup @class="for-select">
<label class="fw6 f8"for="currency">Plan currency</label>
<span class="gh-select mt1">
{{one-way-select this.selectedCurrency
id="currency"
name="currency"
options=(readonly this.allCurrencies)
optionValuePath="value"
optionLabelPath="label"
update=(action "setStripePlansCurrency")
}}
{{svg-jar "arrow-down-small"}}
</span>
</GhFormGroup>
</div>
</div>
<div class="w-100 w-50-l flex flex-column flex-row-ns">
<div class="w-100 w-50-ns mr3-ns">
<GhFormGroup @errors={{this.settings.errors}} @hasValidated={{settings.hasValidated}} @property="stripePlans">
<label class="fw6 f8">Monthly price</label>
<div class="flex items-center justify-center mt1 gh-input-group gh-labs-price-label">
<GhTextInput
@value={{readonly this.stripePlans.monthly.amount}}
@type="number"
@input={{action (mut this._scratchStripeMonthlyAmount) value="target.value"}}
@focus-out={{action "validateStripePlans"}}
/>
<span class="gh-input-append"><span class="ttu">{{this.stripePlans.monthly.currency}}</span>/month</span>
</div>
</GhFormGroup>
</div>
<div class="w-100 w-50-ns ml2-ns">
<GhFormGroup @errors={{this.settings.errors}} @hasValidated={{settings.hasValidated}} @property="stripePlans">
<label class="fw6 f8">Yearly price</label>
<div class="flex items-center justify-center mt1 gh-input-group gh-labs-price-label">
<GhTextInput
@value={{readonly this.stripePlans.yearly.amount}}
@type="number"
@input={{action (mut this._scratchStripeYearlyAmount) value="target.value"}}
@focus-out={{action "validateStripePlans"}}
/>
<span class="gh-input-append"><span class="ttu">{{this.stripePlans.yearly.currency}}</span>/year</span>
</div>
</GhFormGroup>
</div>
</div>
<div class="w-100 w-50-l flex flex-column flex-row-ns">
<GhErrorMessage @errors={{settings.errors}} @property="stripePlans" class="w-100 red"/>
</div>
{{/liquid-if}}
</div>
</div>
</section>
</div>
{{#if this.showDisconnectStripeConnectModal}}
<GhFullscreenModal @modal="disconnect-stripe"
@model={{hash
stripeConnectAccountName=this.stripeConnectAccountName
}}
@confirm={{action "disconnectStripeConnectIntegration"}}
@close={{action "closeDisconnectStripeModal"}}
@modifier="action wide" />
{{/if}}