Updated site initialisation to use content api

closes https://github.com/TryGhost/Team/issues/1599

- portal uses content API to fetch data now instead of old members site endpoint

ghost/portal/src/App.js

@@ -458,10 +458,10 @@ export default class App extends React.Component {
 
     /** Fetch site and member session data with Ghost Apis  */
     async fetchApiData() {
-        const {siteUrl, customSiteUrl} = this.props;
+        const {siteUrl, customSiteUrl, apiUrl, apiKey} = this.props;
 
         try {
-            this.GhostApi = this.props.api || setupGhostApi({siteUrl});
+            this.GhostApi = this.props.api || setupGhostApi({siteUrl, apiUrl, apiKey});
             const {site, member} = await this.GhostApi.init();
 
             const colorOverride = this.getColorOverride();

ghost/portal/src/index.js

@@ -23,6 +23,20 @@ function getSiteUrl() {
     return '';
 }
 
+function getSiteData() {
+    /**
+     * @type {HTMLElement}
+     */
+    const scriptTag = document.querySelector('script[data-ghost]');
+    if (scriptTag) {
+        const siteUrl = scriptTag.dataset.ghost;
+        const apiKey = scriptTag.dataset.key;
+        const apiUrl = scriptTag.dataset.api;
+        return {siteUrl, apiKey, apiUrl};
+    }
+    return {};
+}
+
 function handleTokenUrl() {
     const url = new URL(window.location.href);
     if (url.searchParams.get('token')) {
@@ -46,12 +60,13 @@ function setup({siteUrl}) {
 }
 
 function init() {
-    const customSiteUrl = getSiteUrl();
+    // const customSiteUrl = getSiteUrl();
+    const {siteUrl: customSiteUrl, apiKey, apiUrl} = getSiteData();
     const siteUrl = customSiteUrl || window.location.origin;
     setup({siteUrl});
     ReactDOM.render(
         <React.StrictMode>
-            <App siteUrl={siteUrl} customSiteUrl={customSiteUrl} />
+            <App siteUrl={siteUrl} customSiteUrl={customSiteUrl} apiKey={apiKey} apiUrl={apiUrl} />
         </React.StrictMode>,
         document.getElementById(ROOT_DIV_ID)
     );

ghost/portal/src/utils/api.js

@@ -12,7 +12,7 @@ function getAnalyticsMetadata() {
     return null;
 }
 
-function setupGhostApi({siteUrl = window.location.origin}) {
+function setupGhostApi({siteUrl = window.location.origin, apiUrl, apiKey}) {
     const apiPath = 'members/api';
 
     function endpointFor({type, resource}) {
@@ -21,6 +21,13 @@ function setupGhostApi({siteUrl = window.location.origin}) {
         }
     }
 
+    function contentEndpointFor({resource, params = ''}) {
+        if (apiUrl && apiKey) {
+            return `${apiUrl.replace(/\/$/, '')}/${resource}/?key=${apiKey}&limit=all${params}`;
+        }
+        return '';
+    }
+
     function makeRequest({url, method = 'GET', headers = {}, credentials = undefined, body = undefined}) {
         const options = {
             method,
@@ -74,6 +81,57 @@ function setupGhostApi({siteUrl = window.location.origin}) {
             });
         },
 
+        newsletters() {
+            const url = contentEndpointFor({resource: 'newsletters'});
+            return makeRequest({
+                url,
+                method: 'GET',
+                headers: {
+                    'Content-Type': 'application/json'
+                }
+            }).then(function (res) {
+                if (res.ok) {
+                    return res.json();
+                } else {
+                    throw new Error('Failed to fetch site data');
+                }
+            });
+        },
+
+        tiers() {
+            const url = contentEndpointFor({resource: 'tiers', params: '&include=monthly_price,yearly_price,benefits'});
+            return makeRequest({
+                url,
+                method: 'GET',
+                headers: {
+                    'Content-Type': 'application/json'
+                }
+            }).then(function (res) {
+                if (res.ok) {
+                    return res.json();
+                } else {
+                    throw new Error('Failed to fetch site data');
+                }
+            });
+        },
+
+        settings() {
+            const url = contentEndpointFor({resource: 'settings'});
+            return makeRequest({
+                url,
+                method: 'GET',
+                headers: {
+                    'Content-Type': 'application/json'
+                }
+            }).then(function (res) {
+                if (res.ok) {
+                    return res.json();
+                } else {
+                    throw new Error('Failed to fetch site data');
+                }
+            });
+        },
+
         offer({offerId}) {
             const url = endpointFor({type: 'members', resource: 'offers'}) + offerId + '/';
             return makeRequest({
@@ -385,8 +443,26 @@ function setupGhostApi({siteUrl = window.location.origin}) {
             api.site.read(),
             api.member.sessionData()
         ]);
-        site = transformApiSiteData({site});
-        return {site, member};
+        let newsletters = [];
+        let tiers = [];
+        let settings = {};
+
+        try {
+            [{settings}, {tiers}, {newsletters}] = await Promise.all([
+                api.site.settings(),
+                api.site.tiers(),
+                api.site.newsletters()
+            ]);
+            site = {
+                ...settings,
+                newsletters,
+                products: tiers
+            };
+            site = transformApiSiteData({site});
+        } catch (e) {
+            // Ignore
+        }
+        return {site, member, newsletters, tiers};
     };
 
     return api;