@shopgate/pwa-common 7.32.1 → 7.32.2-alpha.2

package/actions/app/handleLink.js

@@ -1,8 +1,3 @@
-import "core-js/modules/es.array.includes.js";
-import "core-js/modules/es.string.replace.js";
-import "core-js/modules/web.url.js";
-import "core-js/modules/web.url.to-json.js";
-import "core-js/modules/web.url-search-params.js";
 import { logger } from '@shopgate/pwa-core/helpers';
 import { DEEPLINK_CART_ADD_PRODUCT_PATTERN } from '@shopgate/pwa-common-commerce/cart/constants';
 import fetchProduct from '@shopgate/pwa-common-commerce/product/actions/fetchProduct';

package/collections/AuthRoutes.js

@@ -1,4 +1,3 @@
-import "core-js/modules/es.array.includes.js";
 import pathMatch from 'path-match';
 
 /**

package/collections/PersistedReducers.js

@@ -1,4 +1,3 @@
-import "core-js/modules/es.array.includes.js";
 /**
  * Class to maintain the persisted redux reducers.
  */

package/collections/media-providers/YouTube.js

@@ -1,5 +1,4 @@
 import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
-import "core-js/modules/web.url-search-params.js";
 import MediaProvider from "./MediaProvider";
 
 /* eslint-disable class-methods-use-this */

package/components/I18n/components/Translate/index.js

@@ -1,4 +1,3 @@
-import "core-js/modules/es.array.reduce.js";
 import React from 'react';
 import PropTypes from 'prop-types';
 import { renderToString } from 'react-dom/server';

package/components/Link/index.js

@@ -1,4 +1,3 @@
-import "core-js/modules/es.string.replace.js";
 import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { hasWebBridge } from '@shopgate/engage/core';

package/components/Router/index.js

@@ -1,5 +1,4 @@
 import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
-import "core-js/modules/es.string.replace.js";
 import React from 'react';
 import PropTypes from 'prop-types';
 import { router, stack as routeStack, onDidPush, onDidPop, onDidReplace, onDidReset, onUpdate, ACTION_POP } from '@virtuous/conductor';

package/helpers/config/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../helpers/config/index.js"],"names":[],"mappings":"AAyJA;;;;GAIG;AACH,yCAHW,MAAM,oBACN,mBAAmB,GAAC,IAAI,QAKlC;AA/GD;;GAEG;AACH,yBAFU,MAAM,CAEsB;AAWtC;;;GAGG;AACH,+BAFU,MAAM,CAKd;AASF;;;GAGG;AACH,wBAFU,MAAM,CAEsC;AAEtD;;;GAGG;AACH,0BAFU,WAAW,CAEkC;AAEvD,yBAAyB;AACzB,8BAA8C;AAC9C,0BAA0B;AAC1B,+BAAgD;AAChD,4BAA4B;AAC5B,iCAAoD;AACpD,wBAAwB;AACxB,6BAA4C;AAK5C;;;;;;;;;;GAUG;AACH,2CANU,mBAAmB,CA8B3B;AAWK,gDAPI,MAAM,SACN,GAAC,SACD,GAAC,aACD,MAAM,aACN,MAAM,GACJ,OAAO,CAGK;AAiBzB,6BAAkE;;AA/FlE;;;;GAIG;AACH,6BAA8F"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../helpers/config/index.js"],"names":[],"mappings":"AAwJA;;;;GAIG;AACH,yCAHW,MAAM,oBACN,mBAAmB,GAAC,IAAI,QAKlC;AA/GD;;GAEG;AACH,yBAFU,MAAM,CAEsB;AAWtC;;;GAGG;AACH,+BAFU,MAAM,CAKd;AASF;;;GAGG;AACH,wBAFU,MAAM,CAEsC;AAEtD;;;GAGG;AACH,0BAFU,WAAW,CAEkC;AAEvD,yBAAyB;AACzB,8BAA8C;AAC9C,0BAA0B;AAC1B,+BAAgD;AAChD,4BAA4B;AAC5B,iCAAoD;AACpD,wBAAwB;AACxB,6BAA4C;AAK5C;;;;;;;;;;GAUG;AACH,2CANU,mBAAmB,CA8B3B;AAWK,gDAPI,MAAM,SACN,GAAC,SACD,GAAC,aACD,MAAM,aACN,MAAM,GACJ,OAAO,CAGK;AAiBzB,6BAAkE;;AA/FlE;;;;GAIG;AACH,6BAA8F"}

package/helpers/config/index.js

@@ -1,4 +1,3 @@
-import "core-js/modules/es.string.replace.js";
 import pck from "../../package.json";
 import { buildThemeConfig } from "./theme";
 import { assignObjectDeep } from "../data";
@@ -27,7 +26,6 @@ const defaultAppConfig = {
   shopCNAME: null,
   currency: 'USD',
   showGmdMenuSubHeaders: false,
-  benchmark: false,
   sentry: {},
   theme: {},
   cartShippingHideAnonymousLegacy: null,

package/helpers/data/index.js

@@ -1,6 +1,3 @@
-import "core-js/modules/es.array.includes.js";
-import "core-js/modules/es.array.reduce.js";
-import "core-js/modules/es.string.replace.js";
 import { logger } from '@shopgate/pwa-core/helpers';
 import { isAndroidOs } from '@shopgate/pwa-core';
 import { isObject, isArray } from "../validation";

package/helpers/dom/index.js

@@ -1,4 +1,3 @@
-import "core-js/modules/es.string.replace.js";
 /**
  * Checks if the given child is a descendant of the given parent.
  * @param {Object} parent The parent element.

package/helpers/html/handleDOM.js

@@ -1,6 +1,3 @@
-import "core-js/modules/es.array.includes.js";
-import "core-js/modules/es.array.reduce.js";
-import "core-js/modules/es.string.replace.js";
 import event from '@shopgate/pwa-core/classes/Event/index';
 
 /**

package/helpers/i18n/getTranslator.js

@@ -1,4 +1,3 @@
-import "core-js/modules/es.array.reduce.js";
 import IntlMessageFormat from 'intl-messageformat';
 import curry from 'lodash/curry';
 // eslint-disable-next-line import/no-named-default

package/helpers/i18n/mergeTranslations.js

@@ -1,4 +1,3 @@
-import "core-js/modules/es.array.reduce.js";
 import isPlainObject from 'lodash/isPlainObject';
 import cloneDeep from 'lodash/cloneDeep';
 import merge from 'lodash/merge';

package/helpers/redux/mutable.js

@@ -1,5 +1,3 @@
-import "core-js/modules/es.array.reduce.js";
-import "core-js/modules/es.string.replace.js";
 import noop from 'lodash/noop';
 import { isObject } from "../validation";
 

package/helpers/router/index.js

@@ -1,6 +1,3 @@
-import "core-js/modules/es.array.reduce.js";
-import "core-js/modules/es.string.replace.js";
-import "core-js/modules/web.url-search-params.js";
 import { createBrowserHistory } from 'history';
 import { router } from '@virtuous/conductor';
 import { logger } from '@shopgate/pwa-core/helpers';

package/helpers/style/index.js

@@ -1,4 +1,3 @@
-import "core-js/modules/es.array.includes.js";
 import { logger } from '@shopgate/pwa-core/helpers';
 import { isNumber } from "../validation";
 

package/package.json

@@ -1,10 +1,14 @@
 {
   "name": "@shopgate/pwa-common",
-  "version": "7.32.1",
+  "version": "7.32.2-alpha.2",
   "description": "Common library for the Shopgate Connect PWA.",
   "license": "Apache-2.0",
   "author": "Shopgate <support@shopgate.com>",
-  "repository": "shopgate/pwa",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/shopgate/pwa.git",
+    "directory": "libraries/common"
+  },
   "bugs": "https://github.com/shopgate/pwa/issues",
   "homepage": "https://github.com/shopgate/pwa/tree/master/libraries/common",
   "keywords": [
@@ -16,8 +20,7 @@
   ],
   "dependencies": {
     "@redux-devtools/extension": "^3.3.0",
-    "@sentry/browser": "6.0.1",
-    "@shopgate/pwa-benchmark": "7.32.1",
+    "@sentry/browser": "^7.120.4",
     "@virtuous/conductor": "~2.5.0",
     "@virtuous/react-conductor": "~2.5.0",
     "@virtuous/redux-persister": "1.1.0-beta.7",
@@ -28,6 +31,7 @@
     "history": "^4.9.0",
     "intl-messageformat": "^11.2.9",
     "path-match": "^1.2.4",
+    "react-cookie": "^8.1.2",
     "react-dotdotdot": "~1.3.1",
     "react-helmet": "^6.1.0",
     "react-portal": "^3.1.0",
@@ -40,10 +44,10 @@
     "swiper": "12.2.0"
   },
   "devDependencies": {
-    "@shopgate/pwa-core": "7.32.1",
-    "@types/lodash": "^4.17.24",
+    "@shopgate/pwa-core": "7.32.2-alpha.2",
+    "@types/lodash": "^4.17.25",
     "@types/react-portal": "^3.0.9",
-    "lodash": "^4.17.23",
+    "lodash": "^4.18.1",
     "prop-types": "~15.8.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"

package/reducers/page/index.js

@@ -1,4 +1,3 @@
-import "core-js/modules/es.array.reduce.js";
 import { ENOTFOUND } from '@shopgate/pwa-core/constants/Pipeline';
 import { REQUEST_PAGE_CONFIG, RECEIVE_PAGE_CONFIG, ERROR_PAGE_CONFIG, APP_WILL_START } from "../../constants/ActionTypes";
 

package/selectors/client.js

@@ -1,4 +1,3 @@
-import "core-js/modules/es.array.includes.js";
 import { createSelector } from 'reselect';
 import MobileDetect from 'mobile-detect';
 import { hasSGJavaScriptBridge } from '@shopgate/pwa-core/helpers';

package/store/index.js

@@ -1,13 +1,10 @@
-import "core-js/modules/es.string.replace.js";
 import { createStore, applyMiddleware } from 'redux';
 import { thunk } from 'redux-thunk';
 import { composeWithDevTools } from '@redux-devtools/extension';
 import { persistState } from '@virtuous/redux-persister';
-import benchmarkMiddleware from '@shopgate/pwa-benchmark/profilers/redux';
-import benchmarkController from '@shopgate/pwa-benchmark';
 import persistedReducers from "../collections/PersistedReducers";
 import initSubscribers from "../subscriptions";
-import appConfig, { themeName, shopNumber } from "../helpers/config";
+import { themeName, shopNumber } from "../helpers/config";
 import makeRootReducer from "../reducers";
 import streams from "./middelwares/streams";
 import logger from "./middelwares/logger";
@@ -31,7 +28,7 @@ function getInitialState() {
   if (!storedState) {
     return undefined;
   }
-  const normalizedState = storedState.replace(new RegExp('"isFetching":true', 'g'), '"isFetching":false');
+  const normalizedState = storedState.replace(/"isFetching":true/g, '"isFetching":false');
   return JSON.parse(normalizedState);
 }
 
@@ -42,18 +39,11 @@ function getInitialState() {
  * @return {Object} The redux store.
  */
 export function configureStore(reducers, subscribers) {
-  // Starts benchmark controller BEFORE adding the middleware.
-  if (appConfig.benchmark) {
-    benchmarkController.startup();
-  }
-  const store = createStore(makeRootReducer(reducers), getInitialState(), composeWithDevTools(applyMiddleware.apply(void 0, [thunk].concat(appConfig.benchmark ? [benchmarkMiddleware] : [], [streams, logger])), persistState({
+  const store = createStore(makeRootReducer(reducers), getInitialState(), composeWithDevTools(applyMiddleware.apply(void 0, [thunk, streams, logger]), persistState({
     key: storeKey,
     paths: persistedReducers.getAll()
   })));
   initSubscribers(subscribers);
-  if (window.Cypress) {
-    window.store = store;
-  }
   return store;
 }
 

package/streams/main.js

@@ -23,7 +23,4 @@ import { mainSubject } from "../store/middelwares/streams";
  * Gets triggered on every redux action that is dispatched.
  * @type {Observable}
  */
-export const main$ = Observable.from(mainSubject);
-if (window.Cypress) {
-  window.main$ = main$;
-}
+export const main$ = Observable.from(mainSubject);

package/subscriptions/error.js

@@ -1,6 +1,6 @@
-import "core-js/modules/es.array.includes.js";
 import { isAvailable } from '@shopgate/native-modules';
-import { init, addBreadcrumb, configureScope, captureException, captureMessage, captureEvent, withScope, Severity as SentrySeverity } from '@sentry/browser';
+import { init, addBreadcrumb, setTags, captureException, captureMessage, captureEvent, withScope } from '@sentry/browser';
+import { router } from '@virtuous/conductor';
 import { EBIGAPI, emitter, errorManager, ETIMEOUT, ENETUNREACH, EUNKNOWN, EFAVORITE } from '@shopgate/pwa-core';
 import { hasWebBridge } from '@shopgate/engage/core';
 import { SOURCE_TRACKING, SOURCE_CONSOLE, Severity } from '@shopgate/pwa-core/constants/ErrorManager';
@@ -12,8 +12,6 @@ import { env } from "../helpers/environment";
 import { transformGeneralPipelineError, getDisplayErrorMessage } from "./helpers/pipeline";
 import { historyPop } from "../actions/router";
 import showModal from "../actions/modal/showModal";
-import { getUserData } from "../selectors/user";
-import { userDidUpdate$ } from "../streams/user";
 import { clientInformationDidUpdate$ } from "../streams/client";
 import { appWillInit$, appWillStart$, appDidStart$ } from "../streams/app";
 import { appError$, pipelineError$ } from "../streams/error";
@@ -24,11 +22,34 @@ import ToastProvider from "../providers/toast";
 // Generic, translated fallback shown when a backend error carries no code we can map to a message.
 const GENERIC_ERROR_MESSAGE = 'modal.body_error';
 
+/**
+ * @param {*} error The rejection reason or exception.
+ * @returns {boolean} Whether the error was created by the PipelineManager.
+ */
+const isPipelineError = error => !!error && typeof error.code === 'string' && typeof error.handled === 'boolean';
+
 /**
  * App errors subscriptions.
  * @param {Function} subscribe The subscribe function.
  */
 export default subscribe => {
+  subscribe(appWillInit$, () => {
+    window.addEventListener('unhandledrejection', event => {
+      const {
+        reason
+      } = event;
+      if (!isPipelineError(reason)) {
+        return;
+      }
+      event.preventDefault();
+      if (env === 'development') {
+        const hint = reason.handled ? 'The default error handling already handled it' : 'The request excluded it from the default error handling (blacklisted or suppressed), so the action is expected to handle it';
+        // eslint-disable-next-line no-console
+        console.info(`Pipeline error not handled by the caller: ${reason.code} (${reason.message}). ${hint}; add .catch() if the caller needs to react.`);
+      }
+    });
+  });
+
   /** Set general error transformations */
   subscribe(appWillStart$, () => {
     errorManager.setMessage({
@@ -160,16 +181,30 @@ export default subscribe => {
     return;
   }
   const severityMap = {
-    [Severity.Fatal]: SentrySeverity.Fatal,
-    [Severity.Error]: SentrySeverity.Error,
-    [Severity.Critical]: SentrySeverity.Critical,
-    [Severity.Warning]: SentrySeverity.Warning,
-    [Severity.Info]: SentrySeverity.Info,
-    [Severity.Debug]: SentrySeverity.Debug
+    [Severity.Fatal]: 'fatal',
+    [Severity.Error]: 'error',
+    [Severity.Critical]: 'fatal',
+    [Severity.Warning]: 'warning',
+    [Severity.Info]: 'info',
+    [Severity.Debug]: 'debug'
   };
   const ignoredDefaultBreadcrumbs = ['console', 'fetch', 'xhr', 'ui.click'];
-  let trackedSeverities = Object.getOwnPropertySymbols(severityMap).map(s => severityMap[s]);
-  const minSeverityIndex = trackedSeverities.indexOf(level);
+
+  /**
+   * @param {string} url An absolute or relative URL of the app.
+   * @returns {string} The URL with its route path replaced by the route pattern, e.g.
+   * `/orders/:orderId`, and without query string and hash.
+   */
+  const redactUrl = url => {
+    if (typeof url !== 'string') {
+      return url;
+    }
+    const [path] = url.split(/[?#]/);
+    const [, base, routePath] = /^(.*?index\.html)(.*)$/.exec(path) || /^([a-z][a-z\d+.-]*:\/\/[^/]+)(.*)$/i.exec(path) || [null, '', path];
+    return `${base}${router.findPattern(routePath || '/') || '/(unknown route)'}`;
+  };
+  let trackedSeverities = Object.values(severityMap);
+  const minSeverityIndex = Object.keys(severityMap).indexOf(level);
   if (minSeverityIndex > -1) {
     trackedSeverities = trackedSeverities.slice(0, minSeverityIndex + 1);
   }
@@ -183,39 +218,60 @@ export default subscribe => {
       release: pckVersion,
       attachStacktrace: true,
       sampleRate,
+      ignoreErrors: [/play\(\) failed because the user didn't interact/],
       beforeBreadcrumb(breadcrumb) {
         if (ignoredDefaultBreadcrumbs.includes(breadcrumb.category)) {
           return null;
         }
+        if (breadcrumb.category === 'navigation' && breadcrumb.data) {
+          return {
+            ...breadcrumb,
+            data: {
+              from: redactUrl(breadcrumb.data.from),
+              to: redactUrl(breadcrumb.data.to)
+            }
+          };
+        }
         return breadcrumb;
       },
-      beforeSend(event) {
+      beforeSend(event, hint) {
         if (event.level && !trackedSeverities.includes(event.level)) {
           return null;
         }
-        // eslint-disable-next-line no-param-reassign
-        event.extra = {
-          ...(event.extra || {}),
-          routerStack: getRouterStack(getState()).slice(-5)
+        if (isPipelineError(hint?.originalException)) {
+          return null;
+        }
+        return {
+          ...event,
+          request: event.request && {
+            ...event.request,
+            url: redactUrl(event.request.url),
+            headers: event.request.headers && {
+              ...event.request.headers,
+              Referer: redactUrl(event.request.headers.Referer)
+            }
+          },
+          extra: {
+            ...(event.extra || {}),
+            routerStack: getRouterStack(getState()).slice(-5).map(({
+              pattern
+            }) => ({
+              pattern
+            }))
+          }
         };
-        return event;
       }
     });
-    configureScope(scope => {
-      scope.setTag('marketId', appConfig.marketId);
-      scope.setTag('appId', appConfig.appId);
-      scope.setTag('pwaVersion', pckVersion);
-      scope.setTag('theme', themeName);
-      scope.setTag('language', appConfig.language);
-      scope.setTag('isWebsite', hasWebBridge());
-      scope.setTag('isReactNativeApp', isAvailable());
-      scope.setTag('merchantCode', appConfig.omniMerchantCode);
+    setTags({
+      marketId: appConfig.marketId,
+      appId: appConfig.appId,
+      pwaVersion: pckVersion,
+      theme: themeName,
+      language: appConfig.language,
+      isWebsite: hasWebBridge(),
+      isReactNativeApp: isAvailable(),
+      merchantCode: appConfig.omniMerchantCode
     });
-    if (window) {
-      window.onerror = (message, source, lineno, colno, error) => {
-        captureException(error);
-      };
-    }
     emitter.addListener(SOURCE_TRACKING, error => {
       withScope(scope => {
         if (error.context) {
@@ -226,8 +282,8 @@ export default subscribe => {
     });
     emitter.addListener(SOURCE_CONSOLE, args => {
       withScope(scope => {
-        scope.setLevel(SentrySeverity.Error);
-        scope.setExtra('error', args);
+        scope.setLevel('error');
+        scope.setExtra('error', args.map(arg => arg instanceof Error ? arg.message : String(arg)));
         captureMessage('Console error');
       });
     });
@@ -238,20 +294,7 @@ export default subscribe => {
     addBreadcrumb({
       category: 'redux',
       message: `[Redux] ${action.type}`,
-      level: SentrySeverity.Info,
-      data: {
-        ...action
-      }
-    });
-  });
-  subscribe(userDidUpdate$, ({
-    getState
-  }) => {
-    const {
-      id: userId
-    } = getUserData(getState());
-    configureScope(scope => {
-      scope.setTag('userId', userId);
+      level: 'info'
     });
   });
 
@@ -261,20 +304,18 @@ export default subscribe => {
   }) => {
     const {
       appVersion,
-      libVersion,
-      deviceId
+      libVersion
     } = action.data;
-    configureScope(scope => {
-      scope.setTag('appVersion', appVersion);
-      scope.setTag('libVersion', libVersion);
-      scope.setTag('deviceId', deviceId);
+    setTags({
+      appVersion,
+      libVersion
     });
   });
 
   // Add app start event for debugging
   subscribe(appDidStart$, () => {
     withScope(scope => {
-      scope.setLevel(SentrySeverity.Debug);
+      scope.setLevel('debug');
       captureMessage('App did start');
     });
   });
@@ -299,19 +340,17 @@ export default subscribe => {
       error = {}
     } = action;
     const {
-      code,
-      message,
-      meta: {
-        message: metaMessage
-      } = {}
+      code
     } = error;
     withScope(scope => {
       scope.setTag('error', 'E_USER');
       scope.setTag('errorCode', code);
-      scope.setTag('errorMessage', message);
       captureEvent({
-        message: metaMessage || message,
-        extra: error
+        message: code ? `User error ${code}` : 'User error',
+        extra: {
+          code,
+          pipeline: error.context
+        }
       });
     });
   });

package/subscriptions/helpers/handleLinks.js

@@ -1,7 +1,3 @@
-import "core-js/modules/es.array.includes.js";
-import "core-js/modules/web.url.js";
-import "core-js/modules/web.url.to-json.js";
-import "core-js/modules/web.url-search-params.js";
 import { router, ACTION_REPLACE } from '@virtuous/conductor';
 import flushTab from '@shopgate/pwa-core/commands/flushTab';
 import openPage from '@shopgate/pwa-core/commands/openPage';

package/subscriptions/router.js

@@ -1,8 +1,3 @@
-import "core-js/modules/es.array.includes.js";
-import "core-js/modules/es.string.replace.js";
-import "core-js/modules/web.url.js";
-import "core-js/modules/web.url.to-json.js";
-import "core-js/modules/web.url-search-params.js";
 import queryString from 'query-string';
 import { router, ACTION_POP, ACTION_PUSH, ACTION_REPLACE, ACTION_RESET } from '@virtuous/conductor';
 import Route from '@virtuous/conductor/Route';