Fixed tier modal when free trial not enabled

refs https://github.com/TryGhost/Team/issues/1791
This commit is contained in:
Djordje Vlaisavljevic 2022-08-14 13:59:32 +02:00
parent 5250dd9a12
commit 713635b49f
2 changed files with 115 additions and 52 deletions

View File

@ -54,58 +54,59 @@
</GhFormGroup>
{{#unless this.isFreeTier}}
<div class="gh-settings-members-pricetrialcont">
<GhFormGroup @errors={{this.settings.errors}} @hasValidated={{this.settings.hasValidated}} @property="prices" data-test-formgroup="prices">
<div class="gh-settings-members-pricelabelcont">
<label for="monthlyPrice" class="fw6">Prices</label>
<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={{this.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 (feature 'freeTrial')}}
<div class="gh-settings-members-pricetrialcont">
<GhFormGroup @errors={{this.settings.errors}} @hasValidated={{this.settings.hasValidated}} @property="prices" data-test-formgroup="prices">
<div class="gh-settings-members-pricelabelcont free-trial-enabled">
<label for="monthlyPrice" class="fw6">Prices</label>
<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 free-trial-enabled">
<div class="gh-input-group">
<GhTextInput
@id="monthlyPrice"
@value={{readonly this.stripeMonthlyAmount}}
@type="number"
@input={{action (mut this.stripeMonthlyAmount) value="target.value"}}
@focus-out={{this.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>
<GhFormGroup @errors={{this.errors}} @property="trialDays" data-test-formgroup="trialDays">
<div class="flex justify-between items-center mb2">
<div>
@ -142,8 +143,60 @@
<p class="response w-100"><span class="red">Free trial must be at least 1 day</span></p>
{{/if}}
</GhFormGroup>
{{/if}}
</div>
{{else}}
<GhFormGroup @errors={{this.settings.errors}} @hasValidated={{this.settings.hasValidated}} @property="prices" data-test-formgroup="prices">
<div class="gh-settings-members-pricelabelcont">
<label for="monthlyPrice" class="fw6">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={{this.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}}
<GhFormGroup>
<label for="welcomePage" class="fw6">Welcome page</label>
<GhUrlInput

View File

@ -2415,6 +2415,9 @@ p.theme-validation-details {
.gh-settings-members-pricelabelcont {
display: flex;
align-items: baseline;
}
.gh-settings-members-pricelabelcont.free-trial-enabled {
justify-content: space-between;
margin-bottom: 3px;
}
@ -2452,8 +2455,15 @@ p.theme-validation-details {
}
.gh-setting-members-prices {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 20px;
}
.gh-setting-members-prices.free-trial-enabled {
display: grid;
grid-template-rows: 1fr 1fr;
grid-template-columns: none !important;
grid-gap: 6px;
}