Wired trial offer UI to data

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

- wires creating new trial offers in the Admin UI

ghost/admin/app/controllers/offer.js

@@ -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;

ghost/admin/app/templates/offer.hbs

@@ -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">
+                                <div class="flex justify-between items-center w-100 mb4">
-                                <label class="fw6">Offer type</label>
+                                    <label class="fw6">Offer type</label>
-                                <div class="gh-btn-group">
+                                    <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 this.isDiscountOffer "gh-btn-group-selected"}}" type="button" {{on "click" (fn this.changeType "discount")}} disabled={{this.isDiscountSectionDisabled}}>
-                                    <button class="gh-btn {{if (eq this.type "internal") "gh-btn-group-selected"}}" type="button" {{action "changeType" "internal"}}><span>Free trial</span></button>
+                                            <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>

ghost/admin/app/validators/offer.js

@@ -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();
         }
     },