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

@@ -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),

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>

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}) {

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>
         );
     }
 

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',