83 lines
4.0 KiB
Handlebars
83 lines
4.0 KiB
Handlebars
<h2>Set subscription pricing</h2>
|
|
|
|
<div class="flex mb4 br3 bg-white">
|
|
<div class="pa4">
|
|
<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">
|
|
<OneWaySelect
|
|
@value={{this.selectedCurrency}}
|
|
id="currency"
|
|
name="currency"
|
|
@options={{this.currencies}}
|
|
@optionValuePath="value"
|
|
@optionLabelPath="label"
|
|
@update={{this.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={{this.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.stripeMonthlyAmount) 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={{this.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.stripeYearlyAmount) 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>
|
|
|
|
<div class="gh-setting-first">
|
|
<div class="gh-setting-content">
|
|
<h4 class="gh-setting-title">Allow free member signup</h4>
|
|
<p class="gh-setting-desc pa0 ma0">If disabled, members can only be signed up via payment checkout or API integration</p>
|
|
</div>
|
|
<div class="gh-setting-action">
|
|
<div class="for-switch">
|
|
<label class="switch" for="members-allow-self-signup" {{action "toggleSelfSignup" bubbles="false"}}>
|
|
<input type="checkbox" checked={{this.settings.membersAllowFreeSignup}} class="gh-input" {{on "click" this.toggleSelfSignup}} data-test-checkbox="members-allow-self-signup">
|
|
<span class="input-toggle-component mt1"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{!-- TODO: reset "failed" state automatically --}}
|
|
<GhTaskButton
|
|
@buttonText="Launch my site"
|
|
@task={{this.saveAndContinue}}
|
|
@runningText="Launching"
|
|
@class="right gh-btn gh-btn-green gh-btn-icon"
|
|
data-test-button="wizard-next"
|
|
/> |