Wired trial offer UI to data

refs https://github.com/TryGhost/Team/issues/1726

- wires creating new trial offers in the Admin UI
This commit is contained in:
Rishabh 2022-08-10 15:47:10 +05:30 committed by Rishabh Garg
parent 530da36a9c
commit b8acc9ef19
3 changed files with 58 additions and 12 deletions

View File

@ -82,6 +82,14 @@ export default class OffersController extends Controller {
};
}
get isTrialOffer() {
return this.offer?.type === 'trial';
}
get isDiscountOffer() {
return this.offer?.type !== 'trial';
}
get cadence() {
if (this.offer.tier && this.offer.cadence) {
const tier = this.tiers.findBy('id', this.offer.tier.id);
@ -312,6 +320,15 @@ export default class OffersController extends Controller {
this._saveOfferProperty('amount', amount);
}
@action
setTrialDuration(e) {
let amount = e.target.value;
if (amount !== '') {
amount = parseInt(amount);
}
this._saveOfferProperty('amount', amount);
}
@action
setOfferName(e) {
this._saveOfferProperty('name', e.target.value);
@ -418,6 +435,19 @@ export default class OffersController extends Controller {
}
}
@action
changeType(type) {
if (type === 'trial') {
this._saveOfferProperty('type', 'trial');
this._saveOfferProperty('amount', 0);
this._saveOfferProperty('duration', 'trial');
} else {
this._saveOfferProperty('type', 'percent');
this._saveOfferProperty('amount', 0);
this._saveOfferProperty('duration', 'once');
}
}
@action
updateCadence(cadence, offerObj) {
offerObj = offerObj || this.offer;

View File

@ -46,13 +46,18 @@
</h4>
<div class="gh-main-section-content grey">
{{#if (feature 'freeTrial')}}
<div class="flex justify-between items-center w-100 mb4">
<label class="fw6">Offer type</label>
<div class="gh-btn-group">
<button class="gh-btn gh-btn-group-selected {{if (eq this.type "public") "gh-btn-group-selected"}}" type="button" {{action "changeType" "public"}}><span>Discount</span></button>
<button class="gh-btn {{if (eq this.type "internal") "gh-btn-group-selected"}}" type="button" {{action "changeType" "internal"}}><span>Free trial</span></button>
<div class="flex justify-between items-center w-100 mb4">
<label class="fw6">Offer type</label>
<div class="gh-btn-group">
<button class="gh-btn {{if this.isDiscountOffer "gh-btn-group-selected"}}" type="button" {{on "click" (fn this.changeType "discount")}} disabled={{this.isDiscountSectionDisabled}}>
<span>Discount</span>
</button>
<button class="gh-btn {{if this.isTrialOffer "gh-btn-group-selected"}}"
type="button" {{on "click" (fn this.changeType "trial")}} disabled={{this.isDiscountSectionDisabled}}>
<span>Free trial</span>
</button>
</div>
</div>
</div>
{{/if}}
<GhFormGroup @errors={{this.errors}} @property="product-cadence">
<label for="product-cadence" class="fw6">Tier cadence</label>
@ -70,22 +75,28 @@
</span>
<GhErrorMessage @errors={{this.errors}} @property="product-cadence" />
</GhFormGroup>
{{!-- <div class="gh-offer-trial-duration">
{{#if this.isTrialOffer}}
<div class="gh-offer-trial-duration">
<GhFormGroup @errors={{this.offer.errors}} @property="trialDuration">
<label for="trial-duration" class="fw6">Trial duration</label>
<div class="trial-duration">
<GhTextInput
@name="trial-duration"
@value={{readonly this.offer.trialDuration}}
@type="number"
@placeholder=""
@disabled={{this.isDiscountSectionDisabled}}
@value={{readonly this.offer.amount}}
@input={{this.setTrialDuration}}
@id="trial-duration"
@class="gh-input" />
@class="gh-input"
/>
</div>
<span class="error">
<GhErrorMessage @errors={{this.offer.errors}} @property="durationInMonths" />
<GhErrorMessage @errors={{this.offer.errors}} @property="amount" />
</span>
</GhFormGroup>
</div> --}}
</div>
{{else}}
<div class="gh-offer-discount">
<label for="amount" class="fw6 mb1">Amount off</label>
<div class="flex items-start">
@ -175,6 +186,7 @@
</GhFormGroup>
{{/if}}
</div>
{{/if}}
</div>
<h4 class="gh-main-section-header small bn">Portal settings</h4>

View File

@ -17,7 +17,11 @@ export default BaseValidator.create({
amount(model) {
if (!model.amount) {
model.errors.add('amount', 'Please enter the amount.');
if (model.type === 'trial') {
model.errors.add('amount', 'Please enter the trial duration.');
} else {
model.errors.add('amount', 'Please enter the amount.');
}
this.invalidate();
}
},