From c48ca09ff2440faa1305d08157d989897a8e671c Mon Sep 17 00:00:00 2001
From: Sanne de Vries <sannedv@protonmail.com>
Date: Fri, 7 Apr 2023 11:50:55 +0200
Subject: [PATCH] Moved signup terms above plan selection for non-free plans in
 Portal

Refs https://github.com/TryGhost/Team/issues/2878
- The free-only version of Portal will show the signup terms just above the signup button, whereas the non-free Portal version will show the signup terms above the plan selection
- The signup terms settings have been moved to the "Signup options" section
---
 .../app/components/modal-portal-settings.hbs  | 68 +++++++++----------
 .../portal/src/components/pages/SignupPage.js | 28 ++++++--
 2 files changed, 55 insertions(+), 41 deletions(-)

diff --git a/ghost/admin/app/components/modal-portal-settings.hbs b/ghost/admin/app/components/modal-portal-settings.hbs
index 62816e02e5..4bd85deb4b 100644
--- a/ghost/admin/app/components/modal-portal-settings.hbs
+++ b/ghost/admin/app/components/modal-portal-settings.hbs
@@ -138,6 +138,40 @@
                                             {{/if}}
                                         {{/if}}
                                     </div>
+
+                                    {{#if (feature "makingItRain")}}
+                                        <GhFormGroup class="gh-stack-item mt5 mb5">
+                                            <label class="modal-fullsettings-title">Notice on signup</label>
+                                            <KoenigBasicHtmlInput
+                                                @name="footer"
+                                                @html={{this.settings.portalSignupTermsHtml}}
+                                                @class="miw-100 form-text gh-members-emailsettings-footer-input"
+                                                @onChange={{action "setTermsHtml"}}
+                                            />
+                                            <p>Select any text to add a link</p>
+                                        </GhFormGroup>
+
+                                        <GhFormGroup class="gh-members-subscribed-checkbox gh-portal-setting-first mb0 b--whitegrey space-l">
+                                            <div class="flex justify-between items-center">
+                                                <h4 class="gh-portal-setting-title">Require agreement</h4>
+                                                <div class="for-switch small">
+                                                    <label
+                                                        class="switch"
+                                                        for="portal-signup-checkbox-required-checkbox"
+                                                    >
+                                                        <input
+                                                            type="checkbox"
+                                                            checked={{this.settings.portalSignupCheckboxRequired}}
+                                                            id="portal-signup-checkbox-required-checkbox"
+                                                            name="portal-signup-checkbox-required-checkbox"
+                                                            onclick={{action "toggleSignupCheckboxRequired" value="target.checked"}}
+                                                        >
+                                                        <span class="input-toggle-component"></span>
+                                                    </label>
+                                                </div>
+                                            </div>
+                                        </GhFormGroup>
+                                    {{/if}}
                                 </div>
                             {{/liquid-if}}
                         {{/let}}
@@ -260,40 +294,6 @@
                                         </GhFormGroup>
                                         {{/if}}
                                     {{/if}}
-
-                                    {{#if (feature "makingItRain")}}
-                                        <GhFormGroup class="gh-stack-item">
-                                            <label class="modal-fullsettings-title">Notice on signup</label>
-                                            <KoenigBasicHtmlInput
-                                                @name="footer"
-                                                @html={{this.settings.portalSignupTermsHtml}}
-                                                @class="miw-100 form-text gh-members-emailsettings-footer-input"
-                                                @onChange={{action "setTermsHtml"}}
-                                            />
-                                            <p>Select any text to add a link</p>
-                                        </GhFormGroup>
-
-                                        <GhFormGroup class="gh-members-subscribed-checkbox gh-portal-setting-first mb0 b--whitegrey space-l">
-                                            <div class="flex justify-between items-center">
-                                                <h4 class="gh-portal-setting-title">Require agreement</h4>
-                                                <div class="for-switch small">
-                                                    <label
-                                                        class="switch"
-                                                        for="portal-signup-checkbox-required-checkbox"
-                                                    >
-                                                        <input
-                                                            type="checkbox"
-                                                            checked={{this.settings.portalSignupCheckboxRequired}}
-                                                            id="portal-signup-checkbox-required-checkbox"
-                                                            name="portal-signup-checkbox-required-checkbox"
-                                                            onclick={{action "toggleSignupCheckboxRequired" value="target.checked"}}
-                                                        >
-                                                        <span class="input-toggle-component"></span>
-                                                    </label>
-                                                </div>
-                                            </div>
-                                        </GhFormGroup>
-                                    {{/if}}
                                 </div>
                             {{/liquid-if}}
                         {{/let}}
diff --git a/ghost/portal/src/components/pages/SignupPage.js b/ghost/portal/src/components/pages/SignupPage.js
index 3698075c11..0ecadaf94c 100644
--- a/ghost/portal/src/components/pages/SignupPage.js
+++ b/ghost/portal/src/components/pages/SignupPage.js
@@ -199,9 +199,13 @@ footer.gh-portal-signup-footer.invite-only .gh-portal-signup-message {
     color: var(--grey4);
 }
 
-.gh-portal-signup-terms {
+.gh-portal-signup-terms-wrapper {
     width: 100%;
     max-width: 420px;
+    margin: -16px auto 36px;
+}
+
+.gh-portal-signup-terms-wrapper.free-only {
     margin: 16px auto -8px;
 }
 
@@ -228,9 +232,9 @@ footer.gh-portal-signup-footer.invite-only .gh-portal-signup-message {
     float: left;
     width: 18px;
     height: 18px;
-    margin: 4px 0 0;
-    background: var(--grey11);
-    border: 1px solid var(--grey11);
+    margin: 1px 0 0;
+    background: var(--white);
+    border: 1px solid var(--grey10);
     border-radius: 4px;
     transition: background 0.15s ease-in-out, border-color 0.15s ease-in-out;
 }
@@ -266,7 +270,6 @@ footer.gh-portal-signup-footer.invite-only .gh-portal-signup-message {
 .gh-portal-signup-terms.gh-portal-error .checkbox,
 .gh-portal-signup-terms.gh-portal-error label:hover input:not(:checked) + .checkbox {
     border: 1px solid var(--red);
-    background: var(--white);
     box-shadow: 0 0 0 3px rgb(240, 37, 37, .15);
 }
 
@@ -671,8 +674,19 @@ class SignupPage extends React.Component {
                         />
                     </div>
                     <div>
-                        {this.renderProducts()}
-                        {this.renderSignupTerms()}
+                        {(hasOnlyFree ?
+                            <>
+                                {this.renderProducts()}
+                                <div className='gh-portal-signup-terms-wrapper free-only'>
+                                    {this.renderSignupTerms()}
+                                </div>
+                            </> :
+                            <>
+                                <div className='gh-portal-signup-terms-wrapper'>
+                                    {this.renderSignupTerms()}
+                                </div>
+                                {this.renderProducts()}
+                            </>)}
 
                         {(hasOnlyFree ?
                             <div className={'gh-portal-btn-container' + (sticky ? ' sticky m24' : '')}>