Added static duration to Offers edit

ghost/admin/app/controllers/offer.js

@@ -11,6 +11,21 @@ export default class MembersController extends Controller {
     @tracked cadences = [];
     @tracked products = [];
     @tracked selectedDiscountType = 'percentage';
+    @tracked durations = [
+        {
+            label: 'Forever',
+            duration: 'forever'
+        },
+        {
+            label: 'Once',
+            duration: 'once'
+        },
+        {
+            label: 'Multiple months',
+            duration: 'multiple-months'
+        }
+    ];
+    @tracked selectedDuration = 'forever';
 
     constructor() {
         super(...arguments);
@@ -44,6 +59,11 @@ export default class MembersController extends Controller {
         this.selectedDiscountType = discountType;
     }
 
+    @action
+    setDuration(duration) {
+        this.selectedDuration = duration;
+    }
+
     @action
     updateVisibility(tab) {
         this.tab = tab;

ghost/admin/app/styles/layouts/offers.css

@@ -73,6 +73,7 @@
     grid-gap: 24px;
     white-space: nowrap;
     margin-top: -8px;
+    margin-bottom: 24px;
 }
 
 .gh-offer-type .gh-radio {
@@ -114,6 +115,10 @@
     padding-right: 28px;
 }
 
+.gh-offer-form {
+    max-width: 680px;
+}
+
 .gh-offer-form textarea {
     max-width: unset;
 }
@@ -122,6 +127,28 @@
     max-width: unset;
 }
 
+.gh-offer-duration {
+    display: flex;
+}
+
+.gh-offer-duration .form-group {
+    position: relative;
+    margin-bottom: 0;
+}
+
+.gh-offer-duration .form-group:not(:first-of-type) {
+    margin-left: 24px;
+}
+
+.gh-offer-duration .duration-months::before {
+    position: absolute;
+    content: "months";
+    bottom: 7px;
+    right: 12px;
+    color: var(--midgrey);
+    font-size: 1.5rem;
+}
+
 /* Offers – Portal preview */
 .gh-offer-portal-preview {
     display: flex;

ghost/admin/app/templates/offer.hbs

@@ -88,6 +88,32 @@
                                     </div>
                                 </div>
                             </div>
+                            <div class="gh-offer-duration">
+                                <GhFormGroup @errors={{this.errors}} @property="duration">
+                                    <label for="product-cadence" class="fw6">Duration</label>
+                                    <span class="gh-select">
+                                        <OneWaySelect @value=''
+                                            @options={{this.durations}}
+                                            @optionValuePath="duration"
+                                            @optionLabelPath="label"
+                                            @optionTargetPath="duration"
+                                            @update = {{this.setDuration}}
+                                        />
+                                        {{svg-jar "arrow-down-small"}}
+                                    </span>
+                                    <GhErrorMessage @errors={{this.errors}} @property="duration" />
+                                </GhFormGroup>
+                                {{#if (eq this.selectedDuration "multiple-months")}}
+                                <GhFormGroup @errors={{this.errors}} @property="duration-months" @class="duration-months">
+                                    <label for="name" class="fw6">Number of months</label>
+                                    <GhTextInput
+                                        @name="duration-months"
+                                        @id="duration-months"
+                                        @class="gh-input" />
+                                    <GhErrorMessage @errors={{this.errors}} @property="duration-months" />
+                                </GhFormGroup>
+                                {{/if}}
+                            </div>
                         </div>
 
                         <h4 class="gh-main-section-header small bn">Portal settings</h4>

ghost/admin/app/templates/offers.hbs

@@ -14,7 +14,6 @@
                     <th class="gh-list-header">2 offers</th>
                     <th class="gh-list-header">Tier</th>
                     <th class="gh-list-header">Terms</th>
-                    <th class="gh-list-header">Price</th>
                     <th class="gh-list-header">Redemptions</th>
                     <th class="gh-list-header gh-list-cellwidth-10"></th>
                 </tr>
@@ -28,9 +27,6 @@
                     <LinkTo @route="offer" class="gh-list-data">
                         <span class="green fw6">20% OFF</span> <span class="midgrey"> – Once</span>
                     </LinkTo>
-                    <LinkTo @route="offer" class="gh-list-data">
-                        <span class="midgrey strike mr2">$32</span> <span>$25.6</span>
-                    </LinkTo>
                     <LinkTo @route="offer" class="gh-list-data">
                         <span class="midgrey">155</span>
                     </LinkTo>
@@ -50,9 +46,6 @@
                     <LinkTo @route="offer" class="gh-list-data">
                         <span class="green fw6">30% OFF</span> <span class="midgrey"> – For 3 months</span>
                     </LinkTo>
-                    <LinkTo @route="offer" class="gh-list-data">
-                        <span class="midgrey strike mr2">$89</span> <span>$62.3</span>
-                    </LinkTo>
                     <LinkTo @route="offer" class="gh-list-data">
                         <span class="midgrey">94</span>
                     </LinkTo>