Ghost/ghost/admin/app/components/modal-product-price.hbs
Rishabh d3efc29f08 Added error handling for price modal
refs https://github.com/TryGhost/Team/issues/678

Covers error handling for missing name/amount/billing period for a price modal when adding a new price or editing existing price.
2021-05-10 20:59:05 +05:30

91 lines
4.1 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.price.nickname}}
@input={{action (mut this.price.nickname) 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.price.description}}
@input={{action (mut this.price.description) value="target.value"}}
@name="description"
@id="description"
@class="gh-input" />
<GhErrorMessage @errors={{this.errors}} @property="description" />
</GhFormGroup>
<div class="gh-product-priceform-pricecurrency">
<GhFormGroup @errors={{this.errors}} @property="amount">
<label for="amount" class="fw6">Price</label>
<div class="flex items-center justify-center gh-labs-price-label">
<GhTextInput
@id="amount"
@value={{this.price.amount}}
@type="number"
@disabled={{this.isExistingPrice}}
@input={{action "setAmount" value="target.value"}}
/>
</div>
<GhErrorMessage @errors={{this.errors}} @property="amount" />
</GhFormGroup>
<GhFormGroup @class="for-select">
<label class="fw6 f8"for="currency">Plan currency</label>
<span class="gh-select mt1">
{{one-way-select this.selectedCurrencyObj
id="currency"
name="currency"
options=(readonly this.allCurrencies)
optionValuePath="value"
optionLabelPath="label"
disabled=this.isExistingPrice
update=(action "setCurrency")
}}
{{svg-jar "arrow-down-small"}}
</span>
</GhFormGroup>
</div>
<GhFormGroup @errors={{this.price.errors}} @hasValidated={{this.price.hasValidated}} @property="billing-period">
<label for="billing-period" class="fw6">Billing period</label>
<GhProductsPriceBillingperiod
@updatePeriod={{action "updatePeriod"}}
@triggerId="period-input"
@value={{this.price.interval}} @disabled={{this.isExistingPrice}}
/>
<GhErrorMessage @errors={{this.errors}} @property="interval" />
</GhFormGroup>
</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.savePrice}}
@class="gh-btn gh-btn-black gh-btn-icon"
data-test-button="save-price" />
</div>