mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-02-24 23:48:13 -05:00
Updated set pricing wizard if custom price exists
no refs If a custom price is already set before completing the wizard, the set pricing wizard hides the UI to create default custom prices as it doesn't make sense and instead shows a custom message.
This commit is contained in:
Rishabh
parent
67d0c94c40
commit
d3ac517056
2 changed files with 126 additions and 116 deletions
|
|
@ -1,125 +1,129 @@
|
|||
<div class="gh-launch-wizard-settings-container">
|
||||
<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={{this.currencies}}
|
||||
@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>
|
||||
{{#if this.isHidden}}
|
||||
<p> Price already set</p>
|
||||
{{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={{this.currencies}}
|
||||
@optionValuePath="value"
|
||||
@optionLabelPath="label"
|
||||
@update={{this.setStripePlansCurrency}}
|
||||
/>
|
||||
{{svg-jar "arrow-down-small"}}
|
||||
</span>
|
||||
</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 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>
|
||||
</GhFormGroup>
|
||||
<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>
|
||||
<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" @backStep}}><span>{{svg-jar "arrow-left-tail"}}</span></button>
|
||||
|
|
|
|||
|
|
@ -41,6 +41,13 @@ export default class GhLaunchWizardSetPricingComponent extends Component {
|
|||
return true;
|
||||
}
|
||||
|
||||
get isHidden() {
|
||||
if (this.product) {
|
||||
return this.product.get('stripePrices') && this.product.get('stripePrices').length > 0;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
get isPaidPriceDisabled() {
|
||||
return this.disabled || !this.membersUtils.isStripeEnabled;
|
||||
}
|
||||
|
|
@ -194,7 +201,6 @@ export default class GhLaunchWizardSetPricingComponent extends Component {
|
|||
...data,
|
||||
product: null
|
||||
});
|
||||
this.args.nextStep();
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue