Updated dev mode check with custom site url

no refs

- takes advantage of new dev script by loading Portal in dev mode on ghost site with full features
- restricts some dev mode features only if no custom site url is passed, which is expected with fixture development

ghost/portal/src/App.js

@@ -37,7 +37,8 @@ export default class App extends React.Component {
             showPopup: false,
             action: 'init:running',
             initStatus: 'running',
-            lastPage: null
+            lastPage: null,
+            customSiteUrl: props.customSiteUrl
         };
     }
 
@@ -193,7 +194,7 @@ export default class App extends React.Component {
     /** Fetch state for Dev mode */
     fetchDevData() {
         // Setup custom dev mode data from fixtures
-        if (hasMode(['dev'])) {
+        if (hasMode(['dev']) && !this.state.customSiteUrl) {
             return DEV_MODE_DATA;
         }
         return {};
@@ -565,7 +566,7 @@ export default class App extends React.Component {
 
     /**Get final App level context from App state*/
     getContextFromState() {
-        const {site, member, action, page, lastPage, showPopup, pageQuery, popupNotification} = this.state;
+        const {site, member, action, page, lastPage, showPopup, pageQuery, popupNotification, customSiteUrl} = this.state;
         const contextPage = this.getContextPage({site, page, member});
         const contextMember = this.getContextMember({page: contextPage, member});
         return {
@@ -578,6 +579,7 @@ export default class App extends React.Component {
             lastPage,
             showPopup,
             popupNotification,
+            customSiteUrl,
             onAction: (_action, data) => this.dispatchAction(_action, data)
         };
     }

ghost/portal/src/components/PopupModal.js

@@ -122,7 +122,7 @@ class PopupContent extends React.Component {
     }
 
     render() {
-        const {page, site, pageQuery} = this.context;
+        const {page, site, pageQuery, customSiteUrl} = this.context;
         const {is_stripe_configured: isStripeConfigured} = site;
 
         getActivePage({page});
@@ -165,7 +165,7 @@ class PopupContent extends React.Component {
             pageClass = page;
             break;
         }
-        const className = (hasMode(['preview', 'dev']) && !site.disableBackground) ? 'gh-portal-popup-container preview' : 'gh-portal-popup-container';
+        const className = (hasMode(['preview', 'dev'], {customSiteUrl}) && !site.disableBackground) ? 'gh-portal-popup-container preview' : 'gh-portal-popup-container';
         const containerClassName = `${className} ${popupWidthStyle} ${pageClass}`;
         return (
             <div className={'gh-portal-popup-wrapper ' + pageClass} onClick={e => this.handlePopupClose(e)}>
@@ -227,7 +227,7 @@ export default class PopupModal extends React.Component {
     }
 
     renderFrameContainer() {
-        const {member, site} = this.context;
+        const {member, site, customSiteUrl} = this.context;
         const Styles = StylesWrapper({member});
 
         const frameStyle = {
@@ -236,7 +236,7 @@ export default class PopupModal extends React.Component {
         if (hasMode(['preview'])) {
             Styles.modalContainer.zIndex = '3999997';
         }
-        const className = (hasMode(['preview', 'dev']) && !site.disableBackground) ? 'gh-portal-popup-background preview' : 'gh-portal-popup-background';
+        const className = (hasMode(['preview', 'dev'], {customSiteUrl}) && !site.disableBackground) ? 'gh-portal-popup-background preview' : 'gh-portal-popup-background';
 
         return (
             <div style={Styles.modalContainer}>

ghost/portal/src/index.js

@@ -36,11 +36,12 @@ function setup() {
 }
 
 function init() {
-    const siteUrl = getSiteUrl() || window.location.origin;
+    const customSiteUrl = getSiteUrl();
+    const siteUrl = customSiteUrl || window.location.origin;
     setup();
     ReactDOM.render(
         <React.StrictMode>
-            <App siteUrl={siteUrl} />
+            <App siteUrl={siteUrl} customSiteUrl={customSiteUrl} />
         </React.StrictMode>,
         document.getElementById(ROOT_DIV_ID)
     );

ghost/portal/src/utils/check-mode.js

@@ -3,7 +3,10 @@ export const isPreviewMode = function () {
     return (path === '/portal/preview') || (path === '/portal' && qs);
 };
 
-export const isDevMode = function () {
+export const isDevMode = function ({customSiteUrl = ''} = {}) {
+    if (customSiteUrl && process.env.NODE_ENV === 'development') {
+        return false;
+    }
     return (process.env.NODE_ENV === 'development');
 };
 
@@ -17,9 +20,9 @@ const modeFns = {
     test: isTestMode
 };
 
-export const hasMode = (modes = []) => {
+export const hasMode = (modes = [], options = {}) => {
     return modes.some((mode) => {
         const modeFn = modeFns[mode];
-        return !!(modeFn && modeFn());
+        return !!(modeFn && modeFn(options));
     });
-};
+};