mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-12-15 11:34:24 +03:00
430ba2329d
no refs Reworks the set pricing page on the launch wizard to work similar to membership settings, where instead of being disabled when prices exist, it shows existing monthly/yearly prices as well as handles creation of new prices and updating portal settings.
169 lines
8.4 KiB
Handlebars
169 lines
8.4 KiB
Handlebars
<div class="gh-launch-wizard-settings-container" {{did-insert this.setup}}>
|
|
{{#if this.isConnectDisallowed}}
|
|
<div class="gh-stack overflow-y-auto flex-grow-1">
|
|
<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 class="w-100 mt6">
|
|
<div class="gh-setting-title">Generate secure key</div>
|
|
<div class="flex items-center mb4 gh-members-connectbutton-container justify-between mt2">
|
|
<div class="stripe-connect disabled"><span>Connect with Stripe</span></div>
|
|
<div class="ml2 flex items-center flex-nowrap">
|
|
<span class="mr2 f8 midgrey nowrap">Test mode</span>
|
|
<div class="for-switch small disabled">
|
|
<label class="switch" for="stripe-connect-test-mode">
|
|
<input type="checkbox" class="gh-input" disabled="disabled">
|
|
<span class="input-toggle-component mt1"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="gh-setting-action">
|
|
<GhTextarea
|
|
class="gh-launch-wizard-stripe-connect-token"
|
|
placeholder="Paste your secure key here"
|
|
disabled="disabled"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{else}}
|
|
<div class="gh-stack overflow-y-auto flex-grow-1">
|
|
<div class="gh-stack-item flex-column">
|
|
<div class="w-100">
|
|
<GhFormGroup @class="for-select">
|
|
<div class="gh-setting-title" for="currency">Plan currency</div>
|
|
<span class="gh-select mt2">
|
|
<OneWaySelect
|
|
@disabled={{this.disabled}}
|
|
@value={{this.selectedCurrency}}
|
|
id="currency"
|
|
name="currency"
|
|
@options={{readonly this.allCurrencies}}
|
|
@optionValuePath="value"
|
|
@optionLabelPath="label"
|
|
@update={{this.setStripePlansCurrency}}
|
|
/>
|
|
{{svg-jar "arrow-down-small"}}
|
|
</span>
|
|
</GhFormGroup>
|
|
</div>
|
|
<div class="w-100 flex flex-column flex-row-ns">
|
|
<div class="w-100 w-50-ns mr3-ns">
|
|
<GhFormGroup>
|
|
<div class="gh-setting-title">Monthly price</div>
|
|
|
|
<div class="flex items-center justify-center mt2 gh-input-group gh-labs-price-label">
|
|
<GhTextInput
|
|
@disabled={{this.disabled}}
|
|
@value={{readonly this.stripeMonthlyAmount}}
|
|
@type="number"
|
|
@input={{action (mut this.stripeMonthlyAmount) value="target.value"}}
|
|
{{on "blur" this.validateStripePlans}}
|
|
/>
|
|
<span class="gh-input-append"><span class="ttu">{{this.currency}}</span>/month</span>
|
|
</div>
|
|
</GhFormGroup>
|
|
</div>
|
|
<div class="w-100 w-50-ns ml2-ns">
|
|
<GhFormGroup>
|
|
<div class="gh-setting-title">Yearly price</div>
|
|
<div class="flex items-center justify-center mt2 gh-input-group gh-labs-price-label">
|
|
<GhTextInput
|
|
@disabled={{this.disabled}}
|
|
@value={{readonly this.stripeYearlyAmount}}
|
|
@type="number"
|
|
@input={{action (mut this.stripeYearlyAmount) value="target.value"}}
|
|
{{on "blur" this.validateStripePlans}}
|
|
/>
|
|
<span class="gh-input-append"><span class="ttu">{{this.currency}}</span>/year</span>
|
|
</div>
|
|
</GhFormGroup>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w-100 w-50-l flex flex-column flex-row-ns">
|
|
{{#if this.stripePlanError}}
|
|
<p class="response w-100 red"> {{this.stripePlanError}} </p>
|
|
{{/if}}
|
|
</div>
|
|
|
|
<div class="gh-stack-item gh-setting flex-column">
|
|
<div class="gh-setting-title">Plans available at signup</div>
|
|
<div class="form-group mt2 mb0 for-checkbox">
|
|
<label
|
|
class="checkbox"
|
|
for="free-plan"
|
|
>
|
|
<input
|
|
type="checkbox"
|
|
checked={{this.isFreeChecked}}
|
|
id="free-plan"
|
|
name="free-plan"
|
|
disabled={{this.isFreeDisabled}}
|
|
class="gh-input post-settings-featured"
|
|
{{on "click" this.toggleFreePlan}}
|
|
data-test-checkbox="featured"
|
|
>
|
|
<span class="input-toggle-component"></span>
|
|
<p>Free</p>
|
|
</label>
|
|
</div>
|
|
<div class="form-group mb0 for-checkbox">
|
|
<label
|
|
class="checkbox"
|
|
for="monthly-plan"
|
|
>
|
|
<input
|
|
type="checkbox"
|
|
id="monthly-plan"
|
|
name="monthly-plan"
|
|
checked={{this.isMonthlyChecked}}
|
|
disabled={{this.isPaidPriceDisabled}}
|
|
class="gh-input post-settings-featured"
|
|
{{on "click" this.toggleMonthlyPlan}}
|
|
data-test-checkbox="featured"
|
|
>
|
|
<span class="input-toggle-component"></span>
|
|
<p>Monthly</p>
|
|
</label>
|
|
</div>
|
|
<div class="form-group mb0 for-checkbox">
|
|
<label
|
|
class="checkbox"
|
|
for="yearly-plan"
|
|
>
|
|
<input
|
|
type="checkbox"
|
|
id="yearly-plan"
|
|
name="yearly-plan"
|
|
checked={{this.isYearlyChecked}}
|
|
disabled={{this.isPaidPriceDisabled}}
|
|
class="gh-input post-settings-featured"
|
|
{{on "click" this.toggleYearlyPlan}}
|
|
data-test-checkbox="featured"
|
|
>
|
|
<span class="input-toggle-component"></span>
|
|
<p>Yearly</p>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{/if}}
|
|
|
|
<div class="gh-launch-wizard-nav-buttons">
|
|
<button type="button" class="gh-btn gh-btn-outline gh-btn-icon-dark gh-btn-large w-30" {{on "click" this.backStep}}><span>{{svg-jar "arrow-left-tail"}}</span></button>
|
|
|
|
{{!-- TODO: reset "failed" state automatically --}}
|
|
<GhTaskButton
|
|
@task={{this.saveAndContinue}}
|
|
@runningText="Saving"
|
|
@class="w-70 ml4 right gh-btn gh-btn-black gh-btn-large gh-btn-icon-right"
|
|
data-test-button="wizard-next"
|
|
>
|
|
<span>{{if this.isHidden "Continue" "Save and continue"}}{{svg-jar "arrow-right-tail"}}</span>
|
|
</GhTaskButton>
|
|
</div>
|
|
</div> |