mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-12-02 08:13:34 +03:00
6165441c30
refs https://github.com/TryGhost/Team/issues/715 Adds new modal and component to handle managing a list of products(tiers) in Admin behind the developer experiments flag. Also adds a new helper for stripe prices to convert amount from decimal value.
106 lines
4.9 KiB
Handlebars
106 lines
4.9 KiB
Handlebars
<header class="modal-header" data-test-modal="webhook-form">
|
||
<h1 data-test-text="title">{{this.title}}</h1>
|
||
</header>
|
||
<button class="close" href title="Close" {{action "closeModal"}} {{action (optional this.noop) on="mouseDown"}}>
|
||
{{svg-jar "close"}}
|
||
</button>
|
||
|
||
<form>
|
||
<div class="modal-body">
|
||
<div class="gh-main-section-block">
|
||
<div class="gh-main-section-content grey gh-product-priceform-block">
|
||
<GhFormGroup @errors={{this.errors}} @property="name">
|
||
<label for="name" class="fw6">Name</label>
|
||
<GhTextInput
|
||
@value={{readonly this.product.name}}
|
||
@input={{action (mut this.product.name) value="target.value"}}
|
||
@name="name"
|
||
@id="name"
|
||
@class="gh-input" />
|
||
<GhErrorMessage @errors={{this.errors}} @property="name" />
|
||
</GhFormGroup>
|
||
<GhFormGroup @errors={{this.errors}} @property="description">
|
||
<label for="description" class="fw6">Description</label>
|
||
<GhTextInput
|
||
@value={{readonly this.product.description}}
|
||
@input={{action (mut this.product.description) value="target.value"}}
|
||
@name="description"
|
||
@id="description"
|
||
@class="gh-input" />
|
||
<GhErrorMessage @errors={{this.errors}} @property="description" />
|
||
</GhFormGroup>
|
||
<div class="">
|
||
<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={{action "setCurrency"}}
|
||
/>
|
||
</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={{this.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"><span class="red">{{this.stripePlanError}}</span></p>
|
||
{{/if}}
|
||
</GhFormGroup>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
|
||
<div class="modal-footer">
|
||
<button
|
||
class="gh-btn"
|
||
{{action "closeModal"}}
|
||
{{!-- disable mouseDown so it doesn't trigger focus-out validations --}}
|
||
{{action (optional this.noop) on="mouseDown"}}
|
||
data-test-button="cancel-webhook"
|
||
>
|
||
<span>Cancel</span>
|
||
</button>
|
||
<GhTaskButton @buttonText="Save"
|
||
@successText={{this.successText}}
|
||
@task={{this.saveProduct}}
|
||
@idleClass="gh-btn-primary"
|
||
@class="gh-btn gh-btn-black gh-btn-icon"
|
||
data-test-button="save-product" />
|
||
</div> |