Added currency and pricing preview params

no issue

As part of launch wizard in Ghost-Admin, we allow site owner/admins to try different pricing and currency in Admin preview. This change allows Portal popup to consume and update pricing/currency/background on the preview screen using `monthlyPrice`, `yearlyPrice`, `currency` and `disableBackground` params.

- `monthlyPrice`- Allows updating monthly price value via preview
- `yearlyPrice`- Allows updating yearly price value via preview
- `currency`- Allows updating currency value via preview
- `disableBackground`- Allows disabling preview background for Portal UI

ghost/portal/src/App.js

@@ -9,7 +9,7 @@ import * as Fixtures from './utils/fixtures';
 import ActionHandler from './actions';
 import './App.css';
 import NotificationParser from './utils/notifications';
-import {capitalize, createPopupNotification, getFirstpromoterId, getSiteDomain, hasPlan, isComplimentaryMember, removePortalLinkFromUrl} from './utils/helpers';
+import {capitalize, createPopupNotification, getCurrencySymbol, getFirstpromoterId, getSiteDomain, hasPlan, isComplimentaryMember, removePortalLinkFromUrl} from './utils/helpers';
 const React = require('react');
 
 const DEV_MODE_DATA = {
@@ -178,8 +178,11 @@ export default class App extends React.Component {
     fetchQueryStrData(qs = '') {
         const qsParams = new URLSearchParams(qs);
         const data = {
-            site: {}
+            site: {
+                plans: {}
+            }
         };
+
         const allowedPlans = [];
 
         // Handle the query params key/value pairs
@@ -208,6 +211,16 @@ export default class App extends React.Component {
                 data.site.portal_button_signup_text = value || '';
             } else if (key === 'buttonStyle' && value) {
                 data.site.portal_button_style = value;
+            } else if (key === 'monthlyPrice' && !isNaN(Number(value))) {
+                data.site.plans.monthly = Number(value);
+            } else if (key === 'yearlyPrice' && !isNaN(Number(value))) {
+                data.site.plans.yearly = Number(value);
+            } else if (key === 'currency' && value) {
+                const currencyValue = value.toUpperCase();
+                data.site.plans.currency = currencyValue;
+                data.site.plans.currency_symbol = getCurrencySymbol(currencyValue);
+            } else if (key === 'disableBackground' && JSON.parse(value)) {
+                data.site.disableBackground = JSON.parse(value);
             }
         }
         data.site.portal_plans = allowedPlans;
@@ -357,7 +370,12 @@ export default class App extends React.Component {
             site: {
                 ...this.state.site,
                 ...(linkSite || {}),
-                ...(previewSite || {})
+                ...(previewSite || {}),
+                plans: {
+                    ...(this.state.site && this.state.site.plans),
+                    ...(linkSite || {}).plans,
+                    ...(previewSite || {}).plans
+                }
             },
             ...restLinkData,
             ...restPreviewData

ghost/portal/src/components/PopupModal.js

@@ -144,10 +144,10 @@ class PopupContent extends React.Component {
             pageClass = page;
             break;
         }
-
+        const className = (hasMode(['preview', 'dev']) && !site.disableBackground) ? 'gh-portal-popup-container preview' : 'gh-portal-popup-container';
         return (
             <div className={'gh-portal-popup-wrapper ' + pageClass} onClick={e => this.handlePopupClose(e)}>
-                <div className={(hasMode(['preview', 'dev']) ? 'gh-portal-popup-container preview' : 'gh-portal-popup-container') + ' ' + popupWidthStyle + ' ' + pageClass} style={pageStyle} ref={node => (this.node = node)} tabIndex="-1">
+                <div className={className + ' ' + popupWidthStyle + ' ' + pageClass} style={pageStyle} ref={node => (this.node = node)} tabIndex={-1}>
                     <CookieDisabledBanner message={cookieBannerText} />
                     {this.renderPopupNotification()}
                     {this.renderActivePage()}
@@ -205,18 +205,21 @@ export default class PopupModal extends React.Component {
     }
 
     renderFrameContainer() {
-        const {member} = this.context;
+        const {member, site} = this.context;
         const Styles = StylesWrapper({member});
+
         const frameStyle = {
             ...Styles.frame.common
         };
         if (hasMode(['preview'])) {
             Styles.modalContainer.zIndex = '3999997';
         }
+        const className = (hasMode(['preview', 'dev']) && !site.disableBackground) ? 'gh-portal-popup-background preview' : 'gh-portal-popup-background';
+
         return (
             <div style={Styles.modalContainer}>
                 <Frame style={frameStyle} title="membersjs-popup" head={this.renderFrameStyles()}>
-                    <div className={hasMode(['preview', 'dev']) ? 'gh-portal-popup-background preview' : 'gh-portal-popup-background'} onClick = {e => this.handlePopupClose(e)}></div>
+                    <div className={className} onClick = {e => this.handlePopupClose(e)}></div>
                     <PopupContent />
                 </Frame>
             </div>

ghost/portal/src/utils/helpers.js

@@ -187,6 +187,18 @@ export const getSiteDomain = ({site}) => {
     }
 };
 
+export const getCurrencySymbol = (currency) => {
+    const CURRENCY_SYMBOLS = {
+        USD: '$',
+        AUD: '$',
+        CAD: '$',
+        GBP: '£',
+        EUR: '€',
+        INR: '₹'
+    };
+    return CURRENCY_SYMBOLS[currency] || '';
+};
+
 export const createPopupNotification = ({type, status, autoHide, duration, closeable, state, message, meta = {}}) => {
     let count = 0;
     if (state && state.popupNotification) {