✨ Added new portal links for plan checkout (#1770)

refs TryGhost/Ghost#12365

Portal now allows direct checkout links for monthly/yearly plans via Portal links or data attributes, allowing members to directly signup to a paid plan. This PR adds -

- A new portal signup link for monthly plan - `/signup/monthly`
- A new portal signup link for yearly plan - `/signup/yearly`

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

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

@@ -26,7 +26,7 @@
                                 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.copyDefault (if isLink '#/portal' 'data-portal'))}} class="gh-portal-setting-copy">
                             {{#if this.copyDefault.isRunning}}
                                 {{svg-jar "check-circle" class="w3 v-mid mr2 stroke-darkgrey"}} Copied
                             {{else}}
@@ -39,27 +39,6 @@
             <tr>
                 <td colspan="2"><hr class="gh-portal-links-group-divider" /></td>
             </tr>
-            <tr>
-                <td class='pagename'>Sign up</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</span>
-                            {{else}}
-                                data-portal="signup"
-                            {{/if}}
-                        </div>
-                        <button type="button" {{action (perform this.copySignup (if isLink '/#/portal/signup' 'data-portal="signup"'))}} class="gh-portal-setting-copy">
-                            {{#if this.copySignup.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 in</td>
                 <td class='page-url'>
@@ -71,7 +50,7 @@
                                 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.copySignin (if isLink '#/portal/signin' 'data-portal="signin"'))}} class="gh-portal-setting-copy">
                             {{#if this.copySignin.isRunning}}
                                 {{svg-jar "check-circle" class="w3 v-mid mr2 stroke-darkgrey"}} Copied
                             {{else}}
@@ -81,6 +60,69 @@
                     </div>
                 </td>
             </tr>
+            <tr>
+                <td class='pagename'>Sign up</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</span>
+                            {{else}}
+                                data-portal="signup"
+                            {{/if}}
+                        </div>
+                        <button type="button" {{action (perform this.copySignup (if isLink '#/portal/signup' 'data-portal="signup"'))}} class="gh-portal-setting-copy">
+                            {{#if this.copySignup.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/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>
+                            {{/if}}
+                        </button>
+                    </div>
+                </td>
+            </tr>
             <tr>
                 <td colspan="2"><hr class="gh-portal-links-group-divider" /></td>
             </tr>
@@ -95,7 +137,7 @@
                                 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.copyAccountHome (if isLink '#/portal/account' 'data-portal="account"'))}} class="gh-portal-setting-copy">
                             {{#if this.copyAccountHome.isRunning}}
                                 {{svg-jar "check-circle" class="w3 v-mid mr2 stroke-darkgrey"}} Copied
                             {{else}}
@@ -116,7 +158,7 @@
                                 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.copyAccountPlans (if isLink '#/portal/account/plans' 'data-portal="account/plans"'))}} class="gh-portal-setting-copy">
                             {{#if this.copyAccountPlans.isRunning}}
                                 {{svg-jar "check-circle" class="w3 v-mid mr2 stroke-darkgrey"}} Copied
                             {{else}}
@@ -137,7 +179,7 @@
                                 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.copyAccountProfile (if isLink '#/portal/account/profile' 'data-portal="account/profile"'))}} class="gh-portal-setting-copy">
                             {{#if this.copyAccountProfile.isRunning}}
                                 {{svg-jar "check-circle" class="w3 v-mid mr2 stroke-darkgrey"}} Copied
                             {{else}}

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

@@ -35,6 +35,14 @@ export default Component.extend({
         copyTextToClipboard(data);
         yield timeout(this.isTesting ? 50 : 3000);
     }),
+    copySignupMonthly: task(function* (data) {
+        copyTextToClipboard(data);
+        yield timeout(this.isTesting ? 50 : 3000);
+    }),
+    copySignupYearly: task(function* (data) {
+        copyTextToClipboard(data);
+        yield timeout(this.isTesting ? 50 : 3000);
+    }),
     copySignin: task(function* (data) {
         copyTextToClipboard(data);
         yield timeout(this.isTesting ? 50 : 3000);