Updated Portal links to show dynamic prices

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

Currently, the whole setup for choosing plans is built around hardcoded `monthly` / `yearly` which is also exposed in the Portal links/data attributes. Since we now have custom prices, this updates the UI to show links/attributes for all available custom prices and allowing them to function via their price ids.

ghost/admin/app/components/gh-portal-links.hbs

@@ -26,8 +26,8 @@
                                 data-portal
                             {{/if}}
                         </div>
-                        <button type="button" {{action (perform this.copyDefault (if isLink '#/portal' 'data-portal'))}} class="gh-portal-setting-copy">
+                        <button type="button" {{action (perform this.copyStaticLink '')}} class="gh-portal-setting-copy">
-                            {{#if this.copyDefault.isRunning}}
+                            {{#if (and this.copyStaticLink.isRunning (eq this.copiedPrice ""))}}
                                 {{svg-jar "check-circle" class="w3 v-mid mr2 stroke-darkgrey"}} Copied
                             {{else}}
                                 <span data-tooltip="Copy">{{svg-jar "copy" class="w4 v-mid fill-darkgrey"}}</span>
@@ -50,8 +50,8 @@
                                 data-portal="signin"
                             {{/if}}
                         </div>
-                        <button type="button" {{action (perform this.copySignin (if isLink '#/portal/signin' 'data-portal="signin"'))}} class="gh-portal-setting-copy">
+                        <button type="button" {{action (perform this.copyStaticLink "signin")}} class="gh-portal-setting-copy">
-                            {{#if this.copySignin.isRunning}}
+                            {{#if (and this.copyStaticLink.isRunning (eq this.copiedPrice "signin"))}}
                                 {{svg-jar "check-circle" class="w3 v-mid mr2 stroke-darkgrey"}} Copied
                             {{else}}
                                 <span data-tooltip="Copy">{{svg-jar "copy" class="w4 v-mid fill-darkgrey"}}</span>
@@ -71,8 +71,8 @@
                                 data-portal="signup"
                             {{/if}}
                         </div>
-                        <button type="button" {{action (perform this.copySignup (if isLink '#/portal/signup' 'data-portal="signup"'))}} class="gh-portal-setting-copy">
+                        <button type="button" {{action (perform this.copyStaticLink "signup")}} class="gh-portal-setting-copy">
-                            {{#if this.copySignup.isRunning}}
+                            {{#if (and this.copyStaticLink.isRunning (eq this.copiedPrice "signup"))}}
                                 {{svg-jar "check-circle" class="w3 v-mid mr2 stroke-darkgrey"}} Copied
                             {{else}}
                                 <span data-tooltip="Copy">{{svg-jar "copy" class="w4 v-mid fill-darkgrey"}}</span>
@@ -81,6 +81,29 @@
                     </div>
                 </td>
             </tr>
+            {{#each this.filteredPrices as |price|}}
+                <tr>
+                    <td class='pagename'>Sign up/{{price.nickname}}</td>
+                    <td class='page-url'>
+                        <div class="gh-portal-page-url-container">
+                            <div class="page-url-label">
+                                {{#if isLink}}
+                                    <span class="page-url-disabled">{{this.siteUrl}}/</span><span>#/portal/signup/{{price.id}}</span>
+                                {{else}}
+                                    data-portal="signup/{{price.id}}"
+                                {{/if}}
+                            </div>
+                            <button type="button" {{action (perform this.copySignupLink price)}} class="gh-portal-setting-copy">
+                                {{#if (and this.copySignupLink.isRunning (eq this.copiedPrice price.id))}}
+                                    {{svg-jar "check-circle" class="w3 v-mid mr2 stroke-darkgrey"}} Copied
+                                {{else}}
+                                    <span data-tooltip="Copy">{{svg-jar "copy" class="w4 v-mid fill-darkgrey"}}</span>
+                                {{/if}}
+                            </button>
+                        </div>
+                    </td>
+                </tr>
+            {{/each}}
             <tr>
                 <td class='pagename'>Sign up/Free</td>
                 <td class='page-url'>
@@ -92,50 +115,8 @@
                                 data-portal="signup/free"
                             {{/if}}
                         </div>
-                        <button type="button" {{action (perform this.copySignupFree (if isLink '#/portal/signup/free' 'data-portal="signup/free"'))}} class="gh-portal-setting-copy">
+                        <button type="button" {{action (perform this.copyStaticLink "signup/free")}} class="gh-portal-setting-copy">
-                            {{#if this.copySignupFree.isRunning}}
+                            {{#if (and this.copyStaticLink.isRunning (eq this.copiedPrice "signup/free"))}}
-                                {{svg-jar "check-circle" class="w3 v-mid mr2 stroke-darkgrey"}} Copied
-                            {{else}}
-                                <span data-tooltip="Copy">{{svg-jar "copy" class="w4 v-mid fill-darkgrey"}}</span>
-                            {{/if}}
-                        </button>
-                    </div>
-                </td>
-            </tr>
-            <tr>
-                <td class='pagename'>Sign up/Monthly</td>
-                <td class='page-url'>
-                    <div class="gh-portal-page-url-container">
-                        <div class="page-url-label">
-                            {{#if isLink}}
-                                <span class="page-url-disabled">{{this.siteUrl}}/</span><span>#/portal/signup/monthly</span>
-                            {{else}}
-                                data-portal="signup/monthly"
-                            {{/if}}
-                        </div>
-                        <button type="button" {{action (perform this.copySignupMonthly (if isLink '#/portal/signup/monthly' 'data-portal="signup/monthly"'))}} class="gh-portal-setting-copy">
-                            {{#if this.copySignupMonthly.isRunning}}
-                                {{svg-jar "check-circle" class="w3 v-mid mr2 stroke-darkgrey"}} Copied
-                            {{else}}
-                                <span data-tooltip="Copy">{{svg-jar "copy" class="w4 v-mid fill-darkgrey"}}</span>
-                            {{/if}}
-                        </button>
-                    </div>
-                </td>
-            </tr>
-            <tr>
-                <td class='pagename'>Sign up/Yearly</td>
-                <td class='page-url'>
-                    <div class="gh-portal-page-url-container">
-                        <div class="page-url-label">
-                            {{#if isLink}}
-                                <span class="page-url-disabled">{{this.siteUrl}}/</span><span>#/portal/signup/yearly</span>
-                            {{else}}
-                                data-portal="signup/yearly"
-                            {{/if}}
-                        </div>
-                        <button type="button" {{action (perform this.copySignupYearly (if isLink '#/portal/signup/yearly' 'data-portal="signup/yearly"'))}} class="gh-portal-setting-copy">
-                            {{#if this.copySignupYearly.isRunning}}
                                 {{svg-jar "check-circle" class="w3 v-mid mr2 stroke-darkgrey"}} Copied
                             {{else}}
                                 <span data-tooltip="Copy">{{svg-jar "copy" class="w4 v-mid fill-darkgrey"}}</span>
@@ -158,8 +139,8 @@
                                 data-portal="account"
                             {{/if}}
                         </div>
-                        <button type="button" {{action (perform this.copyAccountHome (if isLink '#/portal/account' 'data-portal="account"'))}} class="gh-portal-setting-copy">
+                        <button type="button" {{action (perform this.copyStaticLink "account")}} class="gh-portal-setting-copy">
-                            {{#if this.copyAccountHome.isRunning}}
+                            {{#if (and this.copyStaticLink.isRunning (eq this.copiedPrice "account"))}}
                                 {{svg-jar "check-circle" class="w3 v-mid mr2 stroke-darkgrey"}} Copied
                             {{else}}
                                 <span data-tooltip="Copy">{{svg-jar "copy" class="w4 v-mid fill-darkgrey"}}</span>
@@ -179,8 +160,8 @@
                                 data-portal="account/plans"
                             {{/if}}
                         </div>
-                        <button type="button" {{action (perform this.copyAccountPlans (if isLink '#/portal/account/plans' 'data-portal="account/plans"'))}} class="gh-portal-setting-copy">
+                        <button type="button" {{action (perform this.copyStaticLink "account/plans")}} class="gh-portal-setting-copy">
-                            {{#if this.copyAccountPlans.isRunning}}
+                            {{#if (and this.copyStaticLink.isRunning (eq this.copiedPrice "account/plans"))}}
                                 {{svg-jar "check-circle" class="w3 v-mid mr2 stroke-darkgrey"}} Copied
                             {{else}}
                                 <span data-tooltip="Copy">{{svg-jar "copy" class="w4 v-mid fill-darkgrey"}}</span>
@@ -200,8 +181,8 @@
                                 data-portal="account/profile"
                             {{/if}}
                         </div>
-                        <button type="button" {{action (perform this.copyAccountProfile (if isLink '#/portal/account/profile' 'data-portal="account/profile"'))}} class="gh-portal-setting-copy">
+                        <button type="button" {{action (perform this.copyStaticLink "account/profile")}} class="gh-portal-setting-copy">
-                            {{#if this.copyAccountProfile.isRunning}}
+                            {{#if (and this.copyStaticLink.isRunning (eq this.copiedPrice "account/profile"))}}
                                 {{svg-jar "check-circle" class="w3 v-mid mr2 stroke-darkgrey"}} Copied
                             {{else}}
                                 <span data-tooltip="Copy">{{svg-jar "copy" class="w4 v-mid fill-darkgrey"}}</span>

ghost/admin/app/components/gh-portal-links.js

@@ -6,8 +6,25 @@ import {task, timeout} from 'ember-concurrency';
 
 export default Component.extend({
     config: service(),
+    store: service(),
+    settings: service(),
     tagName: '',
     isLink: true,
+    prices: null,
+    copiedPrice: null,
+
+    filteredPrices: computed('prices', 'settings.portalPlans.[]', function () {
+        const portalPlans = this.get('settings.portalPlans');
+        const prices = this.prices || [];
+        return prices.filter((d) => {
+            return d.amount !== 0 && d.type === 'recurring';
+        }).map((price) => {
+            return {
+                ...price,
+                checked: !!portalPlans.find(d => d === price.id)
+            };
+        });
+    }),
 
     toggleValue: computed('isLink', function () {
         return this.isLink ? 'Data attributes' : 'Links';
@@ -20,6 +37,7 @@ export default Component.extend({
     init() {
         this._super(...arguments);
         this.siteUrl = this.config.get('blogUrl');
+        this.getAvailablePrices.perform();
     },
 
     actions: {
@@ -27,40 +45,35 @@ export default Component.extend({
             this.toggleProperty('isLink');
         }
     },
-    copyDefault: task(function* (data) {
+    copyStaticLink: task(function* (id) {
+        this.set('copiedPrice', id);
+        let data = '';
+        if (this.isLink) {
+            data = id ? `#/portal/${id}` : `#/portal/`;
+        } else {
+            data = id ? `data-portal="${id}"` : `data-portal`;
+        }
         copyTextToClipboard(data);
         yield timeout(this.isTesting ? 50 : 3000);
     }),
-    copySignup: task(function* (data) {
+    copySignupLink: task(function* (price) {
+        this.set('copiedPrice', price.id);
+        let data = '';
+        if (this.isLink) {
+            data = `#/portal/${price.id}`;
+        } else {
+            data = `data-portal="${price.id}"`;
+        }
         copyTextToClipboard(data);
         yield timeout(this.isTesting ? 50 : 3000);
     }),
-    copySignupMonthly: task(function* (data) {
+    getAvailablePrices: task(function* () {
-        copyTextToClipboard(data);
+        const products = yield this.store.query('product', {include: 'stripe_prices'});
-        yield timeout(this.isTesting ? 50 : 3000);
+        const product = products.firstObject;
-    }),
+        const prices = product.get('stripePrices');
-    copySignupYearly: task(function* (data) {
+        const activePrices = prices.filter((d) => {
-        copyTextToClipboard(data);
+            return !!d.active;
-        yield timeout(this.isTesting ? 50 : 3000);
+        });
-    }),
+        this.set('prices', activePrices);
-    copySignupFree: task(function* (data) {
+    }).drop()
-        copyTextToClipboard(data);
-        yield timeout(this.isTesting ? 50 : 3000);
-    }),
-    copySignin: task(function* (data) {
-        copyTextToClipboard(data);
-        yield timeout(this.isTesting ? 50 : 3000);
-    }),
-    copyAccountHome: task(function* (data) {
-        copyTextToClipboard(data);
-        yield timeout(this.isTesting ? 50 : 3000);
-    }),
-    copyAccountPlans: task(function* (data) {
-        copyTextToClipboard(data);
-        yield timeout(this.isTesting ? 50 : 3000);
-    }),
-    copyAccountProfile: task(function* (data) {
-        copyTextToClipboard(data);
-        yield timeout(this.isTesting ? 50 : 3000);
-    })
 });