Refined offer detail screen

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

- adds unsaved changes modal for navigating away
- adds link url for offer redemption
- updated amount calculation for fixed amount offers (1000 for 10 USD)
- disabled discount info section for existing offers

ghost/admin/app/controllers/offer.js

@@ -1,9 +1,12 @@
 import Controller, {inject as controller} from '@ember/controller';
+import config from 'ghost-admin/config/environment';
+import copyTextToClipboard from 'ghost-admin/utils/copy-text-to-clipboard';
 import {action} from '@ember/object';
 import {getSymbol} from 'ghost-admin/utils/currency';
 import {ghPriceAmount} from '../helpers/gh-price-amount';
 import {inject as service} from '@ember/service';
 import {task} from 'ember-concurrency-decorators';
+import {timeout} from 'ember-concurrency';
 import {tracked} from '@glimmer/tracking';
 
 export default class OffersController extends Controller {
@@ -15,6 +18,8 @@ export default class OffersController extends Controller {
 
     @tracked cadences = [];
     @tracked products = [];
+    @tracked showUnsavedChangesModal = false;
+
     @tracked durations = [
         {
             label: 'Forever',
@@ -26,18 +31,18 @@ export default class OffersController extends Controller {
         },
         {
             label: 'Multiple months',
-            duration: 'multiple-months'
+            duration: 'repeating'
         }
     ];
-    @tracked selectedDuration = 'forever';
-    @tracked displayCurrency = '$';
-    @tracked currencyLength = 1;
 
     leaveScreenTransition = null;
 
     constructor() {
         super(...arguments);
-        this.setup();
+        if (this.isTesting === undefined) {
+            this.isTesting = config.environment === 'test';
+        }
+        // this.setup();
     }
 
     get offer() {
@@ -54,6 +59,13 @@ export default class OffersController extends Controller {
         };
     }
 
+    get discountVal() {
+        if (this.offer?.type === 'fixed' && typeof this.offer?.amount === 'number') {
+            return (this.offer?.amount / 100);
+        }
+        return this.offer?.amount;
+    }
+
     get cadence() {
         if (this.offer.tier && this.offer.cadence) {
             return `${this.offer.tier.id}-${this.offer.cadence}`;
@@ -61,44 +73,49 @@ export default class OffersController extends Controller {
         return '';
     }
 
+    get isDiscountSectionDisabled() {
+        return !this.offer.isNew;
+    }
+
     // Tasks -------------------------------------------------------------------
 
     @task({drop: true})
     *fetchProducts() {
         this.products = yield this.store.query('product', {include: 'monthly_price,yearly_price'});
-        const cadences = [{
+        const cadences = [];
-            label: 'Select',
-            name: ''
-        }];
         this.products.forEach((product) => {
-            var label;
+            let monthlyLabel;
-            let monthlyCurrency = getSymbol(product.monthlyPrice.currency);
+            let yearlyLabel;
-            if (monthlyCurrency.length === 1) {
+            const productCurrency = product.monthlyPrice.currency;
-                label = `${product.name} - Monthly (${monthlyCurrency}${ghPriceAmount(product.monthlyPrice.amount)})`;
+            const productCurrencySymbol = getSymbol(productCurrency);
+            if (productCurrencySymbol.length === 1) {
+                monthlyLabel = `${product.name} - Monthly (${productCurrencySymbol}${ghPriceAmount(product.monthlyPrice.amount)})`;
+                yearlyLabel = `${product.name} - Yearly (${productCurrencySymbol}${ghPriceAmount(product.yearlyPrice.amount)})`;
             } else {
-                label = `${product.name} - Monthly (${ghPriceAmount(product.monthlyPrice.amount)} ${monthlyCurrency})`;
+                monthlyLabel = `${product.name} - Monthly (${ghPriceAmount(product.monthlyPrice.amount)} ${productCurrencySymbol})`;
+                yearlyLabel = `${product.name} - Yearly (${ghPriceAmount(product.yearlyPrice.amount)} ${productCurrencySymbol})`;
             }
+
             cadences.push({
-                label: label,
+                label: monthlyLabel,
-                name: `${product.id}-month`
+                name: `${product.id}-month-${productCurrency}`
             });
 
-            let yearlyCurrency = getSymbol(product.yearlyPrice.currency);
-            if (yearlyCurrency.length === 1) {
-                label = `${product.name} - Yearly (${yearlyCurrency}${ghPriceAmount(product.yearlyPrice.amount)})`;
-            } else {
-                label = `${product.name} - Yearly (${ghPriceAmount(product.yearlyPrice.amount)} ${yearlyCurrency})`;
-            }
             cadences.push({
-                label: label,
+                label: yearlyLabel,
-                name: `${product.id}-year`
+                name: `${product.id}-year-${productCurrency}`
             });
         });
         this.cadences = cadences;
+        if (this.offer && !this.offer.tier) {
+            this.updateCadence(this.cadences[0].name);
+        }
     }
 
-    @task
+    @task({drop: true})
-    copyOfferUrl() {
+    *copyOfferUrl() {
+        copyTextToClipboard(this.offerUrl);
+        yield timeout(this.isTesting ? 50 : 500);
         return true;
     }
 
@@ -185,72 +202,82 @@ export default class OffersController extends Controller {
 
     @action
     setDiscountType(discountType) {
-        this._saveOfferProperty('type', discountType);
+        if (!this.isDiscountSectionDisabled) {
-        // this.offer.discountType = discountType;
+            this._saveOfferProperty('type', discountType);
+            this._saveOfferProperty('amount', '');
+        }
     }
 
     @action
     setDiscountAmount(e) {
-        this._saveOfferProperty('amount', e.target.value);
+        let amount = e.target.value;
-        // this.offer.discountAmount = e.target.value;
+        if (this.offer.type === 'fixed' && amount !== '') {
+            amount = parseInt(amount) * 100;
+        }
+        this._saveOfferProperty('amount', amount);
     }
 
     @action
     setOfferName(e) {
         this._saveOfferProperty('name', e.target.value);
-        // this.offer.name = e.target.value;
     }
 
     @action
     setPortalTitle(e) {
         this._saveOfferProperty('displayTitle', e.target.value);
-        // this.offer.portalTitle = e.target.value;
     }
 
     @action
     setPortalDescription(e) {
         this._saveOfferProperty('displayDescription', e.target.value);
-        // this.offer.portalDescription = e.target.value;
     }
 
     @action
     setOfferCode(e) {
         this._saveOfferProperty('code', e.target.value);
-        // this.offer.code = e.target.value;
     }
 
     @action
     setDurationInMonths(e) {
         this._saveOfferProperty('durationInMonths', e.target.value);
-        // this.offer.durationInMonths = e.target.value;
+    }
+
+    get offerUrl() {
+        const code = this.offer?.code || '';
+        if (code) {
+            const siteUrl = this.config.get('blogUrl');
+            return `${siteUrl}/${code}`;
+        }
+        return '';
+    }
+
+    get displayCurrency() {
+        const tierId = this.offer?.tier?.id;
+        if (!tierId) {
+            return '$';
+        }
+        const product = this.products.findBy('id', tierId);
+        const productCurrency = product?.monthlyPrice?.currency || 'usd';
+        return getSymbol(productCurrency);
+    }
+
+    get currencyLength() {
+        return this.displayCurrency.length;
     }
 
     @action
     updateCadence(cadence) {
-        const [tierId, tierCadence] = cadence.split('-');
+        const [tierId, tierCadence, currency] = cadence.split('-');
         this.offer.tier = {
             id: tierId
         };
         this.offer.cadence = tierCadence;
-        // this._saveOfferProperty('cadence', cadence);
+        this.offer.currency = currency;
-        // this.offer.cadence = cadence;
-
-        let product = this.products.findBy('id', tierId);
-        if (product) {
-            if (tierCadence === 'year') {
-                this.displayCurrency = getSymbol(product.yearlyPrice.currency);
-            } else {
-                this.displayCurrency = getSymbol(product.monthlyPrice.currency);
-            }
-        }
-        this.currencyLength = this.displayCurrency.length;
     }
 
     @action
     updateDuration(duration) {
         this._saveOfferProperty('duration', duration);
-        // this.offer.duration = duration;
-        this.selectedDuration = duration;
     }
 
     // Private -----------------------------------------------------------------

ghost/admin/app/templates/offer.hbs

@@ -1,4 +1,4 @@
-<section class="gh-canvas circle-bg">
+<section class="gh-canvas circle-bg" {{did-insert this.setup}}>
     <GhCanvasHeader class="gh-canvas-header">
         <h2 class="gh-canvas-title" data-test-screen-title>
             <LinkTo @route="offers" data-test-link="offers-back">Offers</LinkTo>
@@ -46,6 +46,7 @@
                                         @optionValuePath="name"
                                         @optionLabelPath="label"
                                         @optionTargetPath="name"
+                                        @disabled={{this.isDiscountSectionDisabled}}
                                         @update={{this.updateCadence}}
                                     />
                                     {{svg-jar "arrow-down-small"}}
@@ -62,7 +63,8 @@
                                             @name="amount"
                                             @placeholder=""
                                             @id="amount"
-                                            @value={{this.offer.amount}}
+                                            @disabled={{this.isDiscountSectionDisabled}}
+                                            @value={{readonly this.offer.amount}}
                                             @input={{this.setDiscountAmount}}
                                             @class="gh-input" />
                                         <GhErrorMessage @errors={{this.errors}} @property="amount" />
@@ -77,7 +79,8 @@
                                             @name="amount"
                                             @type="number"
                                             @placeholder=""
-                                            @value={{this.offer.amount}}
+                                            @disabled={{this.isDiscountSectionDisabled}}
+                                            @value={{readonly this.discountVal}}
                                             @input={{this.setDiscountAmount}}
                                             @id="amount"
                                             @class="gh-input" />
@@ -86,13 +89,15 @@
                                 </GhFormGroup>
                             {{/if}}
                             <div class="gh-offer-type">
-                                <div class="gh-radio {{if (eq this.offer.type "percent") "active"}}" {{on "click" (fn this.setDiscountType "percent")}}>
+                                <div class="gh-radio {{if (eq this.offer.type "percent") "active"}}"
+                                    {{on "click" (fn this.setDiscountType "percent")}}>
                                     <div class="gh-radio-button"></div>
                                     <div class="gh-radio-content">
                                         <div class="gh-radio-label">Percentage discount</div>
                                     </div>
                                 </div>
-                                <div class="gh-radio {{if (eq this.offer.type "fixed") "active"}}" {{on "click" (fn this.setDiscountType "fixed")}}>
+                                <div class="gh-radio {{if (eq this.offer.type "fixed") "active"}}"
+                                    {{on "click" (fn this.setDiscountType "fixed")}}>
                                     <div class="gh-radio-button"></div>
                                     <div class="gh-radio-content">
                                         <div class="gh-radio-label">Fixed amount discount</div>
@@ -107,6 +112,7 @@
                                             @value={{this.offer.duration}}
                                             @options={{this.durations}}
                                             @optionValuePath="duration"
+                                            @disabled={{this.isDiscountSectionDisabled}}
                                             @optionLabelPath="label"
                                             @optionTargetPath="duration"
                                             @update = {{this.updateDuration}}
@@ -115,13 +121,14 @@
                                     </span>
                                     <GhErrorMessage @errors={{this.errors}} @property="duration" />
                                 </GhFormGroup>
-                                {{#if (eq this.selectedDuration "multiple-months")}}
+                                {{#if (eq this.offer.duration "repeating")}}
                                 <GhFormGroup @errors={{this.errors}} @property="duration-months" @class="duration-months">
                                     <label for="duration-months" class="fw6">Number of months</label>
                                     <GhTextInput
                                         @name="duration-months"
                                         @value={{this.offer.durationInMonths}}
                                         @input={{this.setDurationInMonths}}
+                                        @disabled={{this.isDiscountSectionDisabled}}
                                         @id="duration-months"
                                         @class="gh-input" />
                                     <GhErrorMessage @errors={{this.errors}} @property="duration-months" />
@@ -161,7 +168,7 @@
                                 <div class="gh-input-group">
                                     <GhTextInput
                                         @name="url"
-                                        @value="https://example.com/black-friday"
+                                        @value={{this.offerUrl}}
                                         @id="url"
                                         @disabled="disabled"
                                         @class="gh-input" />
@@ -210,3 +217,11 @@
         </div> --}}
     </section>
 </section>
+
+{{#if this.showUnsavedChangesModal}}
+    <GhFullscreenModal
+        @modal="leave-settings"
+        @confirm={{this.leaveScreen}}
+        @close={{this.toggleUnsavedChangesModal}}
+        @modifier="action wide" />
+{{/if}}