Added multiple product option to Portal links

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

With multiple products, it's possible to link to any products from themes.

- updates links area in Portal to be able to handle multiple products
- the new product selector for links is behind the alpha flag

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

@@ -1,4 +1,4 @@
-<div class="gh-portal-links-container">
+<div class="gh-portal-links-container" {{did-insert (perform this.fetchProducts)}}>
     <div class="gh-portal-links-main">
         <h2>Links</h2>
         <p>Use these {{if isLink "links" "data attributes"}} in your theme to show pages of Portal.</p>
@@ -81,6 +81,95 @@
                     </div>
                 </td>
             </tr>
+            {{#if (and (feature "multipleProducts") (gt this.products.length 1))}}
+                <tr>
+                    <td colspan="2"><hr class="gh-portal-links-group-divider" /></td>
+                </tr>
+                <tr>
+                    <td class='pagename bold'>Product</td>
+                    <td class='page-url'>
+                         <span
+                                class="gh-select mt2"
+                                data-select-text="test"
+                                tabindex="0"
+                            >
+                                <OneWaySelect
+                                    @id="portal-product-link"
+                                    @name="portal[product-link]"
+                                    @options={{this.productOptions}}
+                                    @optionValuePath="name"
+                                    @optionLabelPath="label"
+                                    @value={{this.selectedProduct}}
+                                    @update={{action "setSelectedProduct"}}
+                                />
+                                {{svg-jar "arrow-down-small"}}
+                            </span>
+                    </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{{this.selectedProductIdPath}}/monthly</span>
+                                {{else}}
+                                    data-portal="signup{{this.selectedProductIdPath}}/monthly"
+                                {{/if}}
+                            </div>
+                            <button type="button" {{action (perform this.copyProductSignupLink "monthly")}} class="gh-portal-setting-copy">
+                                {{#if (and this.copyProductSignupLink.isRunning (eq this.copiedSignupInterval "monthly"))}}
+                                    {{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{{this.selectedProductIdPath}}yearly</span>
+                                {{else}}
+                                    data-portal="signup{{this.selectedProductIdPath}}/yearly"
+                                {{/if}}
+                            </div>
+                            <button type="button" {{action (perform this.copyProductSignupLink "yearly")}} class="gh-portal-setting-copy">
+                                {{#if (and this.copyProductSignupLink.isRunning (eq this.copiedSignupInterval "yearly"))}}
+                                    {{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/Free</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/free</span>
+                                {{else}}
+                                    data-portal="signup/free"
+                                {{/if}}
+                            </div>
+                            <button type="button" {{action (perform this.copyStaticLink "signup/free")}} class="gh-portal-setting-copy">
+                                {{#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>
+            {{else}}
                 <tr>
                     <td class='pagename'>Sign up/Monthly</td>
                     <td class='page-url'>
@@ -144,6 +233,7 @@
                         </div>
                     </td>
                 </tr>
+            {{/if}}
             <tr>
                 <td colspan="2"><hr class="gh-portal-links-group-divider" /></td>
             </tr>

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

@@ -12,6 +12,9 @@ export default Component.extend({
     isLink: true,
     prices: null,
     copiedPrice: null,
+    copiedSignupInterval: null,
+    selectedProduct: null,
+    products: null,
 
     toggleValue: computed('isLink', function () {
         return this.isLink ? 'Data attributes' : 'Links';
@@ -20,6 +23,25 @@ export default Component.extend({
     sectionHeaderLabel: computed('isLink', function () {
         return this.isLink ? 'Link' : 'Data attribute';
     }),
+    selectedProductIdPath: computed('selectedProduct', function () {
+        const selectedProduct = this.get('selectedProduct');
+        if (selectedProduct) {
+            return `/${selectedProduct.name}`;
+        }
+        return '';
+    }),
+
+    productOptions: computed('products.[]', function () {
+        if (this.get('products')) {
+            return this.get('products').map((product) => {
+                return {
+                    label: product.name,
+                    name: product.id
+                };
+            });
+        }
+        return [];
+    }),
 
     init() {
         this._super(...arguments);
@@ -29,8 +51,21 @@ export default Component.extend({
     actions: {
         toggleShowLinks() {
             this.toggleProperty('isLink');
+        },
+        setSelectedProduct(product) {
+            this.set('selectedProduct', product);
         }
     },
+    fetchProducts: task(function* () {
+        const products = yield this.store.query('product', {include: 'monthly_price,yearly_price'}) || [];
+        this.set('products', products);
+        if (products.length > 0) {
+            this.set('selectedProduct', {
+                name: products.firstObject.id,
+                label: products.firstObject.name
+            });
+        }
+    }),
     copyStaticLink: task(function* (id) {
         this.set('copiedPrice', id);
         let data = '';
@@ -42,13 +77,13 @@ export default Component.extend({
         copyTextToClipboard(data);
         yield timeout(this.isTesting ? 50 : 3000);
     }),
-    copySignupLink: task(function* (price) {
+    copyProductSignupLink: task(function* (interval) {
-        this.set('copiedPrice', price.id);
+        this.set('copiedSignupInterval', interval);
         let data = '';
         if (this.isLink) {
-            data = `#/portal/signup/${price.id}`;
+            data = `#/portal/signup${this.selectedProductIdPath}/${interval}`;
         } else {
-            data = `data-portal="signup/${price.id}"`;
+            data = `data-portal="signup${this.selectedProductIdPath}/${interval}"`;
         }
         copyTextToClipboard(data);
         yield timeout(this.isTesting ? 50 : 3000);

ghost/admin/app/styles/layouts/portal-settings.css

@@ -499,6 +499,10 @@
     width: 130px;
 }
 
+.gh-portal-links-table tr td.pagename.bold {
+    font-weight: bold;
+}
+
 .gh-portal-page-url-container {
     position: relative;
     display: flex;