ADD History service

package.json

@@ -60,6 +60,7 @@
     "file-loader": "1.1.11",
     "helmet": "3.21.3",
     "hiddie": "^1.0.0",
+    "history": "^5.3.0",
     "husky": "^3.1.0",
     "identity-obj-proxy": "3.0.0",
     "intersection-observer": "0.7.0",

src/render.js

@@ -23,6 +23,7 @@ const render = async (req, res) => {
     .split('/')
     .filter(part => part);
   const componentPath = `/${pathParts.join('/')}`;
+  const isPreviewValue = isPreview(req.query);
 
   const routeInfo = matchUrlInRouteConfigs(componentPath);
 
@@ -38,7 +39,8 @@ const render = async (req, res) => {
         .replace('//', '/'),
       userAgent: Buffer.from(req.headers['user-agent'] || [], 'utf-8').toString('base64'),
       headers: JSON.parse(xss(JSON.stringify(req.headers))),
-      isWithoutState: isWithoutStateValue
+      isWithoutState: isWithoutStateValue,
+      isPreview: isPreviewValue
     };
 
     const component = new Component(routeInfo.path);

src/universal/partials/Welcome/partials.js

@@ -10,7 +10,7 @@ Object.keys(components).forEach(path => {
     partials.push({
       name: info.fragmentName,
       url: path,
-      status: info.status
+      status: info?.fragment?.previewStatus || info.status
     });
   }
 });

src/universal/partials/withBaseComponent.js

@@ -5,6 +5,7 @@ import ClientApp from '../components/ClientApp';
 import { WINDOW_GLOBAL_PARAMS } from '../utils/constants';
 import { createComponentName } from '../utils/helper';
 import voltranConfig from '../../../voltran.config';
+import HistoryService from '../service/HistoryService';
 
 const getStaticProps = () => {
   const staticProps = {};
@@ -24,7 +25,12 @@ const withBaseComponent = (PageComponent, pathName) => {
 
   if (process.env.BROWSER && window[prefix] && window[prefix][componentName.toUpperCase()]) {
     const fragments = window[prefix][componentName.toUpperCase()];
-    const history = window[WINDOW_GLOBAL_PARAMS.HISTORY];
+
+    window[WINDOW_GLOBAL_PARAMS.VOLTRAN_HISTORY] =
+      window[WINDOW_GLOBAL_PARAMS.VOLTRAN_HISTORY] ||
+      new HistoryService(WINDOW_GLOBAL_PARAMS.VOLTRAN_HISTORY);
+    const history = window[WINDOW_GLOBAL_PARAMS.VOLTRAN_HISTORY].getHistory();
+
     const staticProps = getStaticProps();
 
     Object.keys(fragments).forEach(id => {
@@ -37,7 +43,11 @@ const withBaseComponent = (PageComponent, pathName) => {
 
       ReactDOM.hydrate(
         <ClientApp>
-          <PageComponent {...staticProps} initialState={initialState} history={history} />
+          <PageComponent
+            {...staticProps}
+            initialState={initialState}
+            history={history}
+          />
         </ClientApp>,
         componentEl,
         () => {

src/universal/service/HistoryService.js

@@ -0,0 +1,60 @@
+import { createBrowserHistory } from 'history';
+import { WINDOW_GLOBAL_PARAMS } from '../utils/constants';
+
+let instance;
+
+const setReferrer = referrer => {
+  if (process.env.BROWSER) {
+    window.ref = referrer;
+  }
+};
+
+export default class HistoryService {
+  constructor(historyKey) {
+    if (instance) {
+      return instance;
+    }
+
+    this.current = '';
+    this.previous = '';
+    this.history = null;
+    this.historyKey = historyKey;
+    this._listenCallback = this._listenCallback.bind(this);
+
+    this._selectHistoryKey();
+
+    if (process.env.BROWSER) {
+      this.current = window.location.href;
+      this.history = window[this.historyKey];
+
+      if (this.historyKey === historyKey) {
+        this.history.listen(this._listenCallback);
+      }
+    }
+
+    instance = this;
+  }
+
+  _listenCallback(location) {
+    if (!process.env.BROWSER) return;
+
+    this.previous = this.current;
+    this.current = `${window.location.origin}${location.pathname}${location.search}${location.hash}`;
+    setReferrer(this.previous);
+  }
+
+  _selectHistoryKey() {
+    if (!process.env.BROWSER) return;
+
+    // eslint-disable-next-line no-prototype-builtins
+    if (!window.hasOwnProperty(WINDOW_GLOBAL_PARAMS.HISTORY)) {
+      window[this.historyKey] = createBrowserHistory();
+    } else {
+      this.historyKey = WINDOW_GLOBAL_PARAMS.HISTORY;
+    }
+  }
+
+  getHistory() {
+    return this.history;
+  }
+}

src/universal/utils/constants.js

@@ -1,7 +1,9 @@
 const appConfig = require('__APP_CONFIG__');
+const voltranConfig = require('../../../voltran.config');
 
 const WINDOW_GLOBAL_PARAMS = {
-  HISTORY: 'storefront.pwa.mobile.global.history'
+  HISTORY: 'storefront.pwa.mobile.global.history',
+  VOLTRAN_HISTORY: voltranConfig.historyKey || 'voltran.global.history'
 };
 
 const HTTP_STATUS_CODES = {