Added (un)archive button to offer detail screen

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

- adds option to archive/unarchive an offer
- adds new modals for confirmation of archive or unarchive of offer
- wired (un)archiving of offers to API

ghost/admin/app/components/modals/archive-offer.hbs

@@ -0,0 +1,23 @@
+
+<div class="modal-content" {{on-key "Enter" (perform this.archiveOfferTask)}}>
+    <header class="modal-header">
+        <h1>Archive offer</h1>
+    </header>
+    <button type="button" class="close" title="Close" {{on "click" @close}}>{{svg-jar "close"}}<span class="hidden">Close</span></button>
+
+    <div class="modal-body">
+        <p>
+            Are you sure you want to archive "<strong>{{@data.offer.name}}</strong>" ?
+        </p>
+    </div>
+
+    <div class="modal-footer">
+        <button type="button" class="gh-btn" {{on "click" @close}}><span>Cancel</span></button>
+        <GhTaskButton
+            @buttonText="Archive"
+            @successText="Archived"
+            @task={{this.archiveOfferTask}}
+            @class="gh-btn gh-btn-black gh-btn-icon"
+        />
+    </div>
+</div>

ghost/admin/app/components/modals/archive-offer.js

@@ -0,0 +1,32 @@
+import Component from '@glimmer/component';
+import {inject as service} from '@ember/service';
+import {task} from 'ember-concurrency-decorators';
+
+export default class ArchiveOfferModalComponent extends Component {
+    @service notifications;
+    @service router;
+
+    get isActive() {
+        const {offer} = this.args.data;
+        return offer.status === 'active';
+    }
+
+    @task({drop: true})
+    *archiveOfferTask() {
+        const {offer} = this.args.data;
+        offer.status = 'archived';
+
+        try {
+            yield offer.save();
+            this.router.transitionTo('offers');
+
+            return offer;
+        } catch (error) {
+            if (error) {
+                this.notifications.showAPIError(error, {key: 'offer.save.failed'});
+            }
+        } finally {
+            this.args.close();
+        }
+    }
+}

ghost/admin/app/components/modals/unarchive-offer.hbs

@@ -0,0 +1,23 @@
+
+<div class="modal-content" {{on-key "Enter" (perform this.archiveOfferTask)}}>
+    <header class="modal-header">
+        <h1>Unarchive offer</h1>
+    </header>
+    <button type="button" class="close" title="Close" {{on "click" @close}}>{{svg-jar "close"}}<span class="hidden">Close</span></button>
+
+    <div class="modal-body">
+        <p>
+            Are you sure you want to unarchive "<strong>{{@data.offer.name}}</strong>" ?
+        </p>
+    </div>
+
+    <div class="modal-footer">
+        <button type="button" class="gh-btn" {{on "click" @close}}><span>Cancel</span></button>
+        <GhTaskButton
+            @buttonText="Unarchive"
+            @successText="Unarchived"
+            @task={{this.unarchiveOfferTask}}
+            @class="gh-btn gh-btn-black gh-btn-icon"
+        />
+    </div>
+</div>

ghost/admin/app/components/modals/unarchive-offer.js

@@ -0,0 +1,32 @@
+import Component from '@glimmer/component';
+import {inject as service} from '@ember/service';
+import {task} from 'ember-concurrency-decorators';
+
+export default class ArchiveOfferModalComponent extends Component {
+    @service notifications;
+    @service router;
+
+    get isActive() {
+        const {offer} = this.args.data;
+        return offer.status === 'active';
+    }
+
+    @task({drop: true})
+    *unarchiveOfferTask() {
+        const {offer} = this.args.data;
+        offer.status = 'active';
+
+        try {
+            yield offer.save();
+            this.router.transitionTo('offers');
+
+            return offer;
+        } catch (error) {
+            if (error) {
+                this.notifications.showAPIError(error, {key: 'offer.save.failed'});
+            }
+        } finally {
+            this.args.close();
+        }
+    }
+}

ghost/admin/app/controllers/offer.js

@@ -15,6 +15,7 @@ export default class OffersController extends Controller {
     @service config;
     @service settings;
     @service store;
+    @service modals;
     @service notifications;
 
     @tracked cadences = [];
@@ -254,6 +255,28 @@ export default class OffersController extends Controller {
         this._saveOfferProperty('durationInMonths', e.target.value);
     }
 
+    @action
+    openConfirmArchiveModal() {
+        if (!this.offer.isNew) {
+            this.modals.open('modals/archive-offer', {
+                offer: this.offer
+            }, {
+                className: 'fullscreen-modal fullscreen-modal-action fullscreen-modal-wide'
+            });
+        }
+    }
+
+    @action
+    openConfirmUnarchiveModal() {
+        if (!this.offer.isNew) {
+            this.modals.open('modals/unarchive-offer', {
+                offer: this.offer
+            }, {
+                className: 'fullscreen-modal fullscreen-modal-action fullscreen-modal-wide'
+            });
+        }
+    }
+
     get offerUrl() {
         const code = this.offer?.code || '';
         if (code) {

ghost/admin/app/models/offer.js

@@ -7,6 +7,7 @@ export default Model.extend(ValidationEngine, {
     name: attr('string'),
     code: attr('string'),
     cadence: attr('string'),
+    status: attr('string', {defaultValue: 'active'}),
     tier: attr(),
     stripeCouponId: attr('string'),
     currency: attr('string'),

ghost/admin/app/templates/offer.hbs

@@ -203,16 +203,27 @@
             </div>
         </div>
 
-        {{!-- <div class="gh-main-section">
+        <div class="gh-main-section">
             <div class="gh-main-section-block">
-                <button
-                    type="button"
-                    class="gh-btn gh-btn-red gh-btn-icon"
-                >
-                    <span>Archive offer</span>
-                </button>
+                {{#if (eq this.offer.status "active")}}
+                    <button
+                        type="button"
+                        class="gh-btn gh-btn-red gh-btn-icon"
+                        {{on "click" this.openConfirmArchiveModal}}
+                    >
+                        <span>Archive offer</span>
+                    </button>
+                {{else}}
+                    <button
+                        type="button"
+                        class="gh-btn gh-btn-red gh-btn-icon"
+                        {{on "click" this.openConfirmUnarchiveModal}}
+                    >
+                        <span>Unarchive offer</span>
+                    </button>
+                {{/if}}
             </div>
-        </div> --}}
+        </div>
     </section>
 </section>