Wired free membership settings to API (#1949)

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

With custom products it's possible to change the name and description of any price. This assumes that people would want to change the same properties of a Free membership, and wires up the values for free membership price settings to API


Co-authored-by: Peter Zimon <zimo@ghost.org>

ghost/admin/app/components/modal-free-membership-settings.hbs

@@ -12,8 +12,8 @@
             <GhFormGroup @errors={{this.price.errors}} @hasValidated={{this.price.hasValidated}} @property="name">
                 <label for="name" class="fw6">Portal display name</label>
                 <GhTextInput
-                    @value={{readonly this.price.nickname}}
-                    {{!-- @input={{action (mut this.price.nickname) value="target.value"}} --}}
+                    @value={{readonly this.settings.membersFreePriceName}}
+                    @input={{action "updateName" value="target.value"}}
                     @name="name"
                     @id="name"
                     @class="gh-input" />
@@ -22,7 +22,8 @@
             <GhFormGroup @errors={{this.price.errors}} @hasValidated={{this.price.hasValidated}} @property="description">
                 <label for="description" class="fw6">Description</label>
                 <GhTextInput
-                    @value=''
+                    @value={{readonly this.settings.membersFreePriceDescription}}
+                    @input={{action "updateDescription" value="target.value"}}
                     @name="description"
                     @id="description"
                     @class="gh-input" />
@@ -30,11 +31,17 @@
             </GhFormGroup>
             <GhFormGroup @errors={{this.price.errors}} @hasValidated={{this.price.hasValidated}} @property="welcome-page">
                 <label for="welcome-page" class="fw6">Welcome page</label>
-                <GhTextInput
-                    @value=''
-                    @name="welcome-page"
-                    @id="welcome-page"
-                    @class="gh-input" />
+                <GhUrlInput
+                    @value={{readonly this.settings.membersFreeSignupRedirect}}
+                    @baseUrl={{readonly this.siteUrl}}
+                    @setResult={{action "setFreeSignupRedirect"}}
+                    @validateUrl={{action "validateFreeSignupRedirect"}}
+                    @placeholder={{readonly this.siteUrl}}
+                />
+                <GhErrorMessage
+                    @errors={{settings.errors}}
+                    @property="membersFreeSignupRedirect"
+                />
                 <p>Redirect to this URL after signing up for a free membership</p>
                 <GhErrorMessage @errors={{this.price.errors}} @property="welcome-page" />
             </GhFormGroup>
@@ -55,7 +62,7 @@
     </button>
     <GhTaskButton @buttonText="Save"
         {{!-- @successText={{this.successText}} --}}
-        {{!-- @task={{this.savePrice}} --}}
+        @task={{this.save}}
         @class="gh-btn gh-btn-black gh-btn-icon"
         data-test-button="save-price" />
 </div>

ghost/admin/app/components/modal-free-membership-settings.js

@@ -1,12 +1,21 @@
 import ModalBase from 'ghost-admin/components/modal-base';
 import classic from 'ember-classic-decorator';
 import {action} from '@ember/object';
+import {inject as service} from '@ember/service';
+import {task} from 'ember-concurrency-decorators';
+import {tracked} from '@glimmer/tracking';
 
 // TODO: update modals to work fully with Glimmer components
 @classic
 export default class ModalFreeMembershipSettings extends ModalBase {
+    @service settings;
+    @service config;
+
+    @tracked freeSignupRedirect;
+    @tracked siteUrl;
     init() {
         super.init(...arguments);
+        this.siteUrl = this.config.get('blogUrl');
     }
 
     @action
@@ -19,6 +28,58 @@ export default class ModalFreeMembershipSettings extends ModalBase {
         // needed because ModalBase uses .send() for keyboard events
         closeModal() {
             this.close();
+        },
+        updateName(value) {
+            this.settings.set('membersFreePriceName', value);
+        },
+        updateDescription(value) {
+            this.settings.set('membersFreePriceDescription', value);
+        },
+        setFreeSignupRedirect(url) {
+            this.freeSignupRedirect = url;
+        },
+        validateFreeSignupRedirect() {
+            return this._validateSignupRedirect(this.freeSignupRedirect, 'membersFreeSignupRedirect');
+        }
+    }
+
+    @task({drop: true})
+    *save() {
+        try {
+            this.send('validateFreeSignupRedirect');
+            if (this.settings.get('errors').length !== 0) {
+                return;
+            }
+            yield this.settings.save();
+            this.send('closeModal');
+        } catch (error) {
+            this.notifications.showAPIError(error, {key: 'settings.save'});
+        } finally {
+            this.send('closeModal');
+        }
+    }
+
+    _validateSignupRedirect(url, type) {
+        let errMessage = `Please enter a valid URL`;
+        this.settings.get('errors').remove(type);
+        this.settings.get('hasValidated').removeObject(type);
+
+        if (url === null) {
+            this.settings.get('errors').add(type, errMessage);
+            this.settings.get('hasValidated').pushObject(type);
+            return false;
+        }
+
+        if (url === undefined) {
+            // Not initialised
+            return;
+        }
+
+        if (url.href.startsWith(this.siteUrl)) {
+            const path = url.href.replace(this.siteUrl, '');
+            this.settings.set(type, path);
+        } else {
+            this.settings.set(type, url.href);
         }
     }
 }

ghost/admin/app/controllers/settings/products.js

@@ -5,6 +5,7 @@ import {inject as service} from '@ember/service';
 import {tracked} from '@glimmer/tracking';
 
 export default class ProductsController extends Controller {
+    @service settings;
     @service config;
 
     @tracked iconStyle = '';

ghost/admin/app/models/setting.js

@@ -59,6 +59,8 @@ export default Model.extend(ValidationEngine, {
     membersReplyAddress: attr('string'),
     membersPaidSignupRedirect: attr('string'),
     membersFreeSignupRedirect: attr('string'),
+    membersFreePriceName: attr('string'),
+    membersFreePriceDescription: attr('string'),
     stripeProductName: attr('string'),
     stripeSecretKey: attr('string'),
     stripePublishableKey: attr('string'),

ghost/admin/app/templates/settings/products.hbs

@@ -15,7 +15,7 @@
                     Free membership
                 </h3>
                 <p class="gh-product-card-description">
-                    Product description
+                    {{this.settings.membersFreePriceDescription}}
                 </p>
                 <LinkTo @route="settings.products" class="gh-btn" {{action (toggle "showFreeMembershipModal" this)}}>
                     <span>Customize</span>