From 47ceb55c5e9ba9f30fa4ab07880c0c0147904638 Mon Sep 17 00:00:00 2001
From: Peter Zimon <zimo@ghost.org>
Date: Thu, 10 Sep 2020 14:47:13 +0200
Subject: [PATCH] Updated signup page for single plan case

no refs.

For when a signle plan is enabled in Portal settings:
- removed selected style from the plan on the signup page
- updated the width of the popup
---
 ghost/portal/src/components/Frame.styles.js        |  4 ++++
 ghost/portal/src/components/PopupModal.js          |  6 ++++--
 ghost/portal/src/components/common/PlansSection.js | 13 +++++++++++++
 ghost/portal/src/components/pages/SignupPage.js    | 13 ++++++++-----
 ghost/portal/src/utils/fixtures.js                 |  2 +-
 5 files changed, 30 insertions(+), 8 deletions(-)

diff --git a/ghost/portal/src/components/Frame.styles.js b/ghost/portal/src/components/Frame.styles.js
index 1e0478d44d..95b7e12fdb 100644
--- a/ghost/portal/src/components/Frame.styles.js
+++ b/ghost/portal/src/components/Frame.styles.js
@@ -275,6 +275,10 @@ const GlobalStyles = `
         animation: popup 0.25s;
     }
 
+    .gh-portal-container-singleplan {
+        width: 390px;
+    }
+
     .gh-portal-popup-container.preview {
         box-shadow:
             0 0 0 1px rgba(0,0,0,0.02),
diff --git a/ghost/portal/src/components/PopupModal.js b/ghost/portal/src/components/PopupModal.js
index 50e33137b1..f3ce9557af 100644
--- a/ghost/portal/src/components/PopupModal.js
+++ b/ghost/portal/src/components/PopupModal.js
@@ -4,6 +4,7 @@ import {hasMode} from '../utils/check-mode';
 import AppContext from '../AppContext';
 import FrameStyle from './Frame.styles';
 import Pages, {getActivePage} from '../pages';
+import {getSitePlans} from '../utils/helpers';
 
 const React = require('react');
 
@@ -81,14 +82,15 @@ class PopupContent extends React.Component {
     }
 
     render() {
-        const {page} = this.context;
+        const {page, site} = this.context;
+        const {portal_plans: portalPlans} = site;
         getActivePage({page});
         const Styles = StylesWrapper({page});
         const pageStyle = {
             ...Styles.page[page]
         };
         return (
-            <div className={hasMode(['preview', 'dev']) ? 'gh-portal-popup-container preview' : 'gh-portal-popup-container'} style={pageStyle} ref={node => (this.node = node)} tabIndex="-1">
+            <div className={(hasMode(['preview', 'dev']) ? 'gh-portal-popup-container preview' : 'gh-portal-popup-container') + (portalPlans.length <= 1 ? ' gh-portal-container-singleplan' : '')} style={pageStyle} ref={node => (this.node = node)} tabIndex="-1">
                 {this.renderPopupClose()}
                 {this.renderActivePage()}
             </div>
diff --git a/ghost/portal/src/components/common/PlansSection.js b/ghost/portal/src/components/common/PlansSection.js
index e7d90e2327..bbdef9bce0 100644
--- a/ghost/portal/src/components/common/PlansSection.js
+++ b/ghost/portal/src/components/common/PlansSection.js
@@ -145,6 +145,19 @@ export const PlanSectionStyles = `
         -ms-transform: rotate(45deg);
         transform: rotate(45deg);
     }
+
+    .gh-portal-signup-singleplan .gh-portal-plan-section {
+        cursor: auto;
+    }
+
+    .gh-portal-signup-singleplan .gh-portal-plan-checkbox,
+    .gh-portal-signup-singleplan .gh-portal-plan-section.checked::before {
+        display: none;
+    }
+
+    .gh-portal-signup-singleplan .gh-portal-plan-name {
+        margin-top: 0;
+    }
 `;
 
 function Checkbox({name, onPlanSelect, isChecked}) {
diff --git a/ghost/portal/src/components/pages/SignupPage.js b/ghost/portal/src/components/pages/SignupPage.js
index b8cb9dd957..863ea86f39 100644
--- a/ghost/portal/src/components/pages/SignupPage.js
+++ b/ghost/portal/src/components/pages/SignupPage.js
@@ -279,13 +279,16 @@ class SignupPage extends React.Component {
 
     renderPlans() {
         const plansData = this.getPlans();
+        const plansContainerClass = plansData.length <= 1 ? 'gh-portal-signup-singleplan' : 'gh-portal-signup-multiplan';
 
         return (
-            <PlansSection
-                plans={plansData}
-                selectedPlan={this.state.plan}
-                onPlanSelect={(e, name) => this.handleSelectPlan(e, name)}
-            />
+            <div className={plansContainerClass}>
+                <PlansSection
+                    plans={plansData}
+                    selectedPlan={this.state.plan}
+                    onPlanSelect={(e, name) => this.handleSelectPlan(e, name)}
+                />
+            </div>
         );
     }
 
diff --git a/ghost/portal/src/utils/fixtures.js b/ghost/portal/src/utils/fixtures.js
index 4e251f88f2..0f1d43b933 100644
--- a/ghost/portal/src/utils/fixtures.js
+++ b/ghost/portal/src/utils/fixtures.js
@@ -15,7 +15,7 @@ export const site = {
     is_stripe_configured: true,
     portal_button: true,
     portal_name: true,
-    portal_plans: ['free', 'monthly', 'yearly'],
+    portal_plans: ['yearly'],
     portal_button_icon: 'icon-1',
     portal_button_signup_text: 'Subscribe now',
     portal_button_style: 'icon-and-text',