mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-02-24 23:48:13 -05:00
Updated the placeholders and headings for edit free membership modal
refs https://github.com/TryGhost/Team/issues/1029
This commit is contained in:
Djordje Vlaisavljevic
parent
0fd16d504d
commit
19b232640e
2 changed files with 177 additions and 152 deletions
|
|
@ -8,26 +8,27 @@
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<form>
|
<form>
|
||||||
<div class="modal-body gh-form-edit-product">
|
<div class="modal-body gh-form-edit-product">
|
||||||
<div class="gh-main-section columns-3">
|
<div class="gh-main-section columns-3">
|
||||||
<div class="gh-main-section-block span-2">
|
<div class="gh-main-section-block span-2">
|
||||||
<h4 class="gh-main-section-header small bn">Basic</h4>
|
<h4 class="gh-main-section-header small bn">Basic</h4>
|
||||||
<div class="gh-main-section-content grey gh-product-priceform-block">
|
<div class="gh-main-section-content grey gh-product-priceform-block">
|
||||||
|
{{#if (not this.isFreeProduct)}}
|
||||||
|
<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"
|
||||||
|
@placeholder="Bronze"
|
||||||
|
@id="name"
|
||||||
|
@class="gh-input" />
|
||||||
|
<GhErrorMessage @errors={{this.errors}} @property="name" />
|
||||||
|
</GhFormGroup>
|
||||||
|
{{/if}}
|
||||||
|
<GhFormGroup @errors={{this.errors}} @property="description">
|
||||||
|
<label for="description" class="fw6">Description</label>
|
||||||
{{#if (not this.isFreeProduct)}}
|
{{#if (not this.isFreeProduct)}}
|
||||||
<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"
|
|
||||||
@placeholder="Bronze"
|
|
||||||
@id="name"
|
|
||||||
@class="gh-input" />
|
|
||||||
<GhErrorMessage @errors={{this.errors}} @property="name" />
|
|
||||||
</GhFormGroup>
|
|
||||||
{{/if}}
|
|
||||||
<GhFormGroup @errors={{this.errors}} @property="description">
|
|
||||||
<label for="description" class="fw6">Description</label>
|
|
||||||
<GhTextInput
|
<GhTextInput
|
||||||
@value={{readonly this.product.description}}
|
@value={{readonly this.product.description}}
|
||||||
@input={{action (mut this.product.description) value="target.value"}}
|
@input={{action (mut this.product.description) value="target.value"}}
|
||||||
|
|
@ -35,157 +36,178 @@
|
||||||
@placeholder="Full access to premium content"
|
@placeholder="Full access to premium content"
|
||||||
@id="description"
|
@id="description"
|
||||||
@class="gh-input" />
|
@class="gh-input" />
|
||||||
<GhErrorMessage @errors={{this.errors}} @property="description" />
|
{{else}}
|
||||||
</GhFormGroup>
|
<GhTextInput
|
||||||
{{#if (not this.isFreeProduct)}}
|
@value={{readonly this.product.description}}
|
||||||
<GhFormGroup @errors={{this.settings.errors}} @hasValidated={{this.settings.hasValidated}} @property="prices">
|
@input={{action (mut this.product.description) value="target.value"}}
|
||||||
<div class="gh-settings-members-pricelabelcont">
|
@name="description"
|
||||||
<label for="monthlyPrice">Prices</label>
|
@placeholder="Free preview of content"
|
||||||
<span>–</span>
|
@id="description"
|
||||||
<div>
|
@class="gh-input" />
|
||||||
<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>
|
|
||||||
{{/if}}
|
{{/if}}
|
||||||
</div>
|
<GhErrorMessage @errors={{this.errors}} @property="description" />
|
||||||
|
</GhFormGroup>
|
||||||
|
{{#if (not this.isFreeProduct)}}
|
||||||
|
<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">
|
||||||
|
|
||||||
<h4 class="gh-main-section-header small bn">Benefits</h4>
|
<div class="gh-input-group">
|
||||||
<div class="gh-main-section-content grey gh-product-form-benefits">
|
<GhTextInput
|
||||||
<div class="gh-product-benefits">
|
@id="monthlyPrice"
|
||||||
<form id="product-benefits" class="gh-blognav" novalidate="novalidate">
|
@value={{readonly this.stripeMonthlyAmount}}
|
||||||
<SortableObjects
|
@type="number"
|
||||||
@sortableObjectList={{this.benefits}}
|
@input={{action (mut this.stripeMonthlyAmount) value="target.value"}}
|
||||||
@useSwap={{false}}
|
@focus-out={{action "validateStripePlans"}}
|
||||||
@sortEndAction={{action "reorderItems"}}
|
/>
|
||||||
>
|
<span class="gh-input-append"><span class="ttu">{{this.currency}}</span>/month</span>
|
||||||
{{#each this.benefits as |benefitItem index|}}
|
</div>
|
||||||
<DraggableObject @content={{benefitItem}} @dragHandle=".gh-blognav-grab" @isSortable={{true}}>
|
<div class="gh-input-group">
|
||||||
<GhBenefitItem
|
<GhTextInput
|
||||||
@benefitItem={{benefitItem}}
|
@id="yearlyPrice"
|
||||||
@id={{index}}
|
@value={{readonly this.stripeYearlyAmount}}
|
||||||
@addItem={{action "addBenefit"}}
|
@type="number"
|
||||||
@focusItem={{action "focusItem"}}
|
@input={{action (mut this.stripeYearlyAmount) value="target.value"}}
|
||||||
@deleteItem={{action "deleteBenefit"}}
|
@focus-out={{this.validateStripePlans}}
|
||||||
@updateLabel={{action "updateLabel"}}
|
@placeholder=''
|
||||||
data-test-navitem={{index}} />
|
data-test-title-input={{true}}
|
||||||
</DraggableObject>
|
/>
|
||||||
{{/each}}
|
<span class="gh-input-append"><span class="ttu">{{this.currency}}</span>/year</span>
|
||||||
</SortableObjects>
|
</div>
|
||||||
<GhBenefitItem
|
</div>
|
||||||
@benefitItem={{this.newBenefit}}
|
{{#if this.stripePlanError}}
|
||||||
@addItem={{action "addBenefit"}}
|
<p class="response w-100"><span class="red">{{this.stripePlanError}}</span></p>
|
||||||
@deleteItem={{action "deleteBenefit"}}
|
{{/if}}
|
||||||
@updateLabel={{action "updateLabel"}}
|
</GhFormGroup>
|
||||||
data-test-navitem="new" />
|
{{/if}}
|
||||||
</form>
|
</div>
|
||||||
</div>
|
|
||||||
|
<h4 class="gh-main-section-header small bn">Benefits</h4>
|
||||||
|
<div class="gh-main-section-content grey gh-product-form-benefits">
|
||||||
|
<div class="gh-product-benefits">
|
||||||
|
<form id="product-benefits" class="gh-blognav" novalidate="novalidate">
|
||||||
|
<SortableObjects
|
||||||
|
@sortableObjectList={{this.benefits}}
|
||||||
|
@useSwap={{false}}
|
||||||
|
@sortEndAction={{action "reorderItems"}}
|
||||||
|
>
|
||||||
|
{{#each this.benefits as |benefitItem index|}}
|
||||||
|
<DraggableObject @content={{benefitItem}} @dragHandle=".gh-blognav-grab" @isSortable={{true}}>
|
||||||
|
<GhBenefitItem
|
||||||
|
@benefitItem={{benefitItem}}
|
||||||
|
@id={{index}}
|
||||||
|
@addItem={{action "addBenefit"}}
|
||||||
|
@focusItem={{action "focusItem"}}
|
||||||
|
@deleteItem={{action "deleteBenefit"}}
|
||||||
|
@updateLabel={{action "updateLabel"}}
|
||||||
|
data-test-navitem={{index}} />
|
||||||
|
</DraggableObject>
|
||||||
|
{{/each}}
|
||||||
|
</SortableObjects>
|
||||||
|
<GhBenefitItem
|
||||||
|
@benefitItem={{this.newBenefit}}
|
||||||
|
@addItem={{action "addBenefit"}}
|
||||||
|
@deleteItem={{action "deleteBenefit"}}
|
||||||
|
@updateLabel={{action "updateLabel"}}
|
||||||
|
data-test-navitem="new" />
|
||||||
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="gh-main-section-block gh-product-form-tierpreview">
|
</div>
|
||||||
<div class="gh-product-form-tierpreview-content">
|
<div class="gh-main-section-block gh-product-form-tierpreview">
|
||||||
|
<div class="gh-product-form-tierpreview-content">
|
||||||
|
{{#if (not this.isFreeProduct)}}
|
||||||
<h4 class="gh-main-section-header small bn">Tier Preview</h4>
|
<h4 class="gh-main-section-header small bn">Tier Preview</h4>
|
||||||
<div class="gh-main-section-content" style="border-color: {{this.settings.accentColor}}">
|
{{else}}
|
||||||
<span class="checkmark" style="background-color: {{this.settings.accentColor}}"></span>
|
<h4 class="gh-main-section-header small bn">Free Membership Preview</h4>
|
||||||
|
{{/if}}
|
||||||
|
<div class="gh-main-section-content" style="border-color: {{this.settings.accentColor}}">
|
||||||
|
<span class="checkmark" style="background-color: {{this.settings.accentColor}}"></span>
|
||||||
|
|
||||||
{{#if this.product.name}}
|
{{#if this.product.name}}
|
||||||
<h4>{{this.product.name}}</h4>
|
<h4>{{this.product.name}}</h4>
|
||||||
{{else}}
|
{{else}}
|
||||||
<h4 class="placeholder">Bronze</h4>
|
<h4 class="placeholder">Bronze</h4>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
|
|
||||||
{{#if this.product.description}}
|
{{#if this.product.description}}
|
||||||
<p>{{this.product.description}}</p>
|
<p>{{this.product.description}}</p>
|
||||||
{{else}}
|
{{else}}
|
||||||
|
{{#if (not this.isFreeProduct)}}
|
||||||
<p class="placeholder">Full access to premium content</p>
|
<p class="placeholder">Full access to premium content</p>
|
||||||
{{/if}}
|
|
||||||
|
|
||||||
{{#if this.benefits}}
|
|
||||||
<ul>
|
|
||||||
{{#each this.benefits as |benefitItem index|}}
|
|
||||||
<li>{{svg-jar "check-2"}} <span>{{benefitItem.name}}</span></li>
|
|
||||||
{{/each}}
|
|
||||||
</ul>
|
|
||||||
{{else}}
|
{{else}}
|
||||||
<ul class="placeholder">
|
<p class="placeholder">Free preview of content</p>
|
||||||
<li>{{svg-jar "check-2"}} <span>Expert analysis</span></li>
|
|
||||||
</ul>
|
|
||||||
{{/if}}
|
{{/if}}
|
||||||
<div class="price">
|
{{/if}}
|
||||||
{{#if (not this.isFreeProduct)}}
|
|
||||||
{{#if this.stripeMonthlyAmount}}
|
|
||||||
<span class="monthly-price">
|
|
||||||
<span class="currency">{{currency-symbol this.currency}}</span>
|
|
||||||
{{format-number this.stripeMonthlyAmount}}
|
|
||||||
<span class="period">/month</span>
|
|
||||||
</span>
|
|
||||||
{{else}}
|
|
||||||
<span class="monthly-price placeholder">
|
|
||||||
<span class="currency">{{currency-symbol this.currency}}</span>
|
|
||||||
0
|
|
||||||
<span class="period">/month</span>
|
|
||||||
</span>
|
|
||||||
{{/if}}
|
|
||||||
|
|
||||||
{{#if this.stripeYearlyAmount}}
|
{{#if this.benefits}}
|
||||||
<span class="yearly-price">{{currency-symbol this.currency}}{{format-number this.stripeYearlyAmount}}/year</span>
|
<ul>
|
||||||
{{else}}
|
{{#each this.benefits as |benefitItem index|}}
|
||||||
<span class="yearly-price placeholder">0<span class="currency">{{this.currency}}</span>/year</span>
|
<li>{{svg-jar "check-2"}} <span>{{benefitItem.name}}</span></li>
|
||||||
{{/if}}
|
{{/each}}
|
||||||
|
</ul>
|
||||||
|
{{else}}
|
||||||
|
<ul class="placeholder">
|
||||||
|
{{#if (not this.isFreeProduct)}}
|
||||||
|
<li>{{svg-jar "check-2"}} <span>Expert analysis</span></li>
|
||||||
{{else}}
|
{{else}}
|
||||||
<span class="monthly-price">
|
<li>{{svg-jar "check-2"}} <span>Access to all public posts</span></li>
|
||||||
<span class="currency">{{currency-symbol this.currency}}</span>
|
|
||||||
0
|
|
||||||
</span>
|
|
||||||
{{/if}}
|
{{/if}}
|
||||||
</div>
|
</ul>
|
||||||
|
{{/if}}
|
||||||
|
<div class="price">
|
||||||
|
{{#if (not this.isFreeProduct)}}
|
||||||
|
{{#if this.stripeMonthlyAmount}}
|
||||||
|
<span class="monthly-price">
|
||||||
|
<span class="currency">{{currency-symbol this.currency}}</span>
|
||||||
|
{{format-number this.stripeMonthlyAmount}}
|
||||||
|
<span class="period">/month</span>
|
||||||
|
</span>
|
||||||
|
{{else}}
|
||||||
|
<span class="monthly-price placeholder">
|
||||||
|
<span class="currency">{{currency-symbol this.currency}}</span>
|
||||||
|
0
|
||||||
|
<span class="period">/month</span>
|
||||||
|
</span>
|
||||||
|
{{/if}}
|
||||||
|
|
||||||
|
{{#if this.stripeYearlyAmount}}
|
||||||
|
<span class="yearly-price">{{currency-symbol this.currency}}{{format-number this.stripeYearlyAmount}}/year</span>
|
||||||
|
{{else}}
|
||||||
|
<span class="yearly-price placeholder">0<span class="currency">{{this.currency}}</span>/year</span>
|
||||||
|
{{/if}}
|
||||||
|
{{else}}
|
||||||
|
<span class="monthly-price">
|
||||||
|
<span class="currency">{{currency-symbol this.currency}}</span>
|
||||||
|
0
|
||||||
|
</span>
|
||||||
|
{{/if}}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -67,6 +67,9 @@ export default class ModalProductPrice extends ModalBase {
|
||||||
|
|
||||||
get title() {
|
get title() {
|
||||||
if (this.isExistingProduct) {
|
if (this.isExistingProduct) {
|
||||||
|
if (this.isFreeProduct) {
|
||||||
|
return `Edit free membership`;
|
||||||
|
}
|
||||||
return `Edit tier`;
|
return `Edit tier`;
|
||||||
}
|
}
|
||||||
return 'New tier';
|
return 'New tier';
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue