@shopgate/pwa-common 7.31.5-beta.1 → 7.31.5-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopgate/pwa-common",
-  "version": "7.31.5-beta.1",
+  "version": "7.31.5-beta.2",
   "description": "Common library for the Shopgate Connect PWA.",
   "license": "Apache-2.0",
   "author": "Shopgate <support@shopgate.com>",
@@ -17,7 +17,7 @@
   "dependencies": {
     "@redux-devtools/extension": "^3.3.0",
     "@sentry/browser": "6.0.1",
-    "@shopgate/pwa-benchmark": "7.31.5-beta.1",
+    "@shopgate/pwa-benchmark": "7.31.5-beta.2",
     "@virtuous/conductor": "~2.5.0",
     "@virtuous/react-conductor": "~2.5.0",
     "@virtuous/redux-persister": "1.1.0-beta.7",
@@ -40,7 +40,7 @@
     "swiper": "12.1.0"
   },
   "devDependencies": {
-    "@shopgate/pwa-core": "7.31.5-beta.1",
+    "@shopgate/pwa-core": "7.31.5-beta.2",
     "@types/lodash": "^4.17.24",
     "@types/react-portal": "^3.0.9",
     "lodash": "^4.17.23",

package/providers/toast/index.js

@@ -32,41 +32,47 @@ let ToastProvider = /*#__PURE__*/function (_Component) {
       if (!toast.message) {
         return;
       }
-      const nextToast = {
-        id: toast.id,
-        action: toast.action,
-        actionLabel: toast.actionLabel,
-        onLongPress: toast.onLongPress,
-        message: toast.message,
-        messageParams: toast.messageParams,
-        duration: toast.duration || duration
-      };
+      const {
+        toasts
+      } = _this.state;
 
-      // Update the queue immutably: consumers rely on the array reference changing to re-render
-      // (e.g. the SnackBar memoizes the currently shown toast on this reference). A toast whose id
-      // is already queued replaces that entry with the new data; otherwise it is appended.
-      _this.setState(({
+      // Check if the toast id already is present.
+      const found = toasts.find(({
+        id
+      }) => toast.id === id);
+
+      // If found, update the toast with the new data.
+      if (found) {
+        found.action = toast.action;
+        found.actionLabel = toast.actionLabel;
+        found.message = toast.message;
+        found.messageParams = toast.messageParams;
+        found.duration = toast.duration || duration;
+      } else {
+        toasts.push({
+          id: toast.id,
+          action: toast.action,
+          actionLabel: toast.actionLabel,
+          message: toast.message,
+          messageParams: toast.messageParams,
+          duration: toast.duration || duration
+        });
+      }
+      _this.setState({
         toasts
-      }) => {
-        const exists = toasts.some(({
-          id
-        }) => id === toast.id);
-        return {
-          toasts: exists ? toasts.map(item => item.id === toast.id ? nextToast : item) : [].concat(toasts, [nextToast])
-        };
       });
     };
     /**
      * Removes the first toast from the list.
      */
     _this.removeToast = () => {
-      // Drop the first toast immutably so the array reference changes and the SnackBar advances to
-      // the next queued toast (rather than re-rendering the same, now-stale, memoized toast).
-      _this.setState(({
+      const {
+        toasts
+      } = _this.state;
+      toasts.shift();
+      _this.setState({
         toasts
-      }) => ({
-        toasts: toasts.slice(1)
-      }));
+      });
     };
     _this.flushToasts = () => {
       if (_this.state.toasts.length) {
@@ -84,21 +90,11 @@ let ToastProvider = /*#__PURE__*/function (_Component) {
   }
 
   /**
-   * Removes the UIEvents listeners registered in the constructor.
+   * Returns the context value to be passed to consumers.
+   * @returns {Object}
    */
   _inheritsLoose(ToastProvider, _Component);
   var _proto = ToastProvider.prototype;
-  _proto.componentWillUnmount = function componentWillUnmount() {
-    UIEvents.removeListener(this.constructor.ADD, this.addToast);
-    UIEvents.removeListener(this.constructor.FLUSH, this.flushToasts);
-  }
-
-  /**
-   * Returns the context value to be passed to consumers. The object reference is cached and only
-   * rebuilt when `toasts` changes, so consumers (Toaster → SnackBarContainer → SnackBar) don't
-   * re-render on every unrelated ToastProvider render.
-   * @returns {Object}
-   */;
   /**
    * @returns {JSX}
    */
@@ -111,14 +107,11 @@ let ToastProvider = /*#__PURE__*/function (_Component) {
   return _createClass(ToastProvider, [{
     key: "provided",
     get: function () {
-      if (!this.providedCache || this.providedCache.toasts !== this.state.toasts) {
-        this.providedCache = {
-          addToast: this.addToast,
-          removeToast: this.removeToast,
-          toasts: this.state.toasts
-        };
-      }
-      return this.providedCache;
+      return {
+        addToast: this.addToast,
+        removeToast: this.removeToast,
+        toasts: this.state.toasts
+      };
     }
   }]);
 }(Component);

package/subscriptions/error.js

@@ -1,4 +1,7 @@
 import "core-js/modules/es.array.includes.js";
+import after from 'lodash/after';
+import before from 'lodash/before';
+import over from 'lodash/over';
 import { isAvailable } from '@shopgate/native-modules';
 import { init, addBreadcrumb, configureScope, captureException, captureMessage, captureEvent, withScope, Severity as SentrySeverity } from '@sentry/browser';
 import { EBIGAPI, emitter, errorManager, ETIMEOUT, ENETUNREACH, EUNKNOWN, EFAVORITE } from '@shopgate/pwa-core';
@@ -9,7 +12,7 @@ import {
 // eslint-disable-next-line import/no-named-default
 default as appConfig, themeName, pckVersion } from "../helpers/config";
 import { env } from "../helpers/environment";
-import { transformGeneralPipelineError, getDisplayErrorMessage } from "./helpers/pipeline";
+import { transformGeneralPipelineError } from "./helpers/pipeline";
 import { historyPop } from "../actions/router";
 import showModal from "../actions/modal/showModal";
 import { getUserData } from "../selectors/user";
@@ -21,9 +24,6 @@ import { getRouterStack } from "../selectors/router";
 import { MODAL_PIPELINE_ERROR } from "../constants/ModalTypes";
 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';
-
 /**
  * App errors subscriptions.
  * @param {Function} subscribe The subscribe function.
@@ -60,34 +60,15 @@ export default subscribe => {
       error
     } = action;
     const {
+      message,
       code,
       context,
       meta = {}
     } = error;
     const {
-      behavior,
-      message: originalMessage
+      behavior
     } = meta;
-
-    // Never surface a raw backend message to the user: show the extension's own translated
-    // message, a code-mapped translated message, or a generic fallback. The resolver is the single
-    // source of truth for both the text and whether it is ready-to-display (`displayTranslated`) or
-    // a locale key that must still go through I18n.Text.
-    const {
-      message: displayMessage,
-      translated: displayTranslated
-    } = getDisplayErrorMessage(error, GENERIC_ERROR_MESSAGE);
-
-    // Unknown/generic and connection-style backend errors are treated as general platform issues.
-    // They have no meaningful, mappable message and are always surfaced as a toast (see below).
-    const isConnectionError = displayMessage === 'error.general' || [ETIMEOUT, ENETUNREACH].includes(code);
-    const isGeneralError = isConnectionError || displayMessage === GENERIC_ERROR_MESSAGE;
-
-    // Some pipeline actions (e.g. fetchCategory) register an error behavior for *every* error via
-    // `setResponseBehavior`. Those behaviors are only meaningful for the specific errors they
-    // expect; when the platform fails with an unexpected/unmappable message we skip the behavior
-    // and fall through to the generic toast handling instead of, for example, showing a modal.
-    if (behavior && !isGeneralError) {
+    if (behavior) {
       behavior({
         dispatch,
         getState,
@@ -97,41 +78,38 @@ export default subscribe => {
       return;
     }
 
-    /**
-     * Shows the pipeline error modal. When openWithDetails is set, the modal opens directly on the
-     * developer detail view (pipeline, code, raw message, params) — used for the toast long-press.
-     * @param {boolean} [openWithDetails=false] Whether to open the modal in developer detail mode.
-     */
-    const showModalError = (openWithDetails = false) => {
+    /** Show modal thunk */
+    const showModalError = () => {
       dispatch(showModal({
         confirm: 'modal.ok',
         dismiss: null,
         title: null,
-        message: displayMessage,
+        message,
         type: MODAL_PIPELINE_ERROR,
         params: {
           pipeline: context,
           request: meta.input,
-          message: originalMessage,
-          code,
-          translated: displayTranslated,
-          messageParams: meta.additionalParams,
-          openWithDetails
+          message: meta.message,
+          code
         }
       }));
     };
-
-    // General platform errors surface as a toast instead of a modal.
-    // Long-pressing the toast opens the error modal in developer detail mode.
-    if (isGeneralError) {
-      // Connection-style errors show the generic connection message, but never override a message
-      // an extension already translated for us.
-      const useGenericConnectionText = isConnectionError && !displayTranslated;
-      events.emit(ToastProvider.ADD, {
-        id: 'pipeline.error',
-        message: useGenericConnectionText ? 'error.general' : displayMessage,
-        onLongPress: () => showModalError(true)
+    let shouldShowToast = message === 'error.general';
+    if ([ETIMEOUT, ENETUNREACH].includes(code) && message === 'modal.body_error') {
+      shouldShowToast = true;
+    }
+    // It was transformed general error. let it popup after 10 toast clicks
+    if (shouldShowToast) {
+      const showToastAfter = after(9, showModalError);
+      // Recursively show same toast message until clicked 10 times
+      const showToast = before(10, () => {
+        events.emit(ToastProvider.ADD, {
+          id: 'pipeline.error',
+          message: 'error.general',
+          action: over([showToast, showToastAfter])
+        });
       });
+      showToast();
       return;
     }
     showModalError();

package/subscriptions/helpers/pipeline.js

@@ -1,5 +1,3 @@
-import { i18n } from '@shopgate/engage/core/helpers';
-
 /**
  * @param {Object} error error
  * @returns {string|*}
@@ -14,70 +12,4 @@ export function transformGeneralPipelineError(error) {
     return 'error.general';
   }
   return message;
-}
-
-/**
- * @typedef {Object} DisplayErrorMessage
- * @property {string} message The text to display — an already-translated string or a locale key.
- * @property {boolean} translated Whether `message` is ready-to-display text (`true`) or a locale
- *   key that still needs to go through I18n.Text (`false`).
- */
-
-/**
- * Resolves the message to display for a pipeline error, without ever surfacing raw backend text.
- * Also reports whether the result is ready-to-display text or a locale key
- * Precedence:
- * 1. An extension's own message when it is explicitly flagged as already translated.
- * 2. A resolvable i18n key — safe to surface even when errorManager did not remap it, because a
- *    translation key (e.g. `cart.error_out_of_stock`) is not raw backend text. `i18n.has` confirms
- *    the key actually resolves in the loaded locales, rather than merely looking like a key.
- * 3. The code-mapped message. When errorManager maps the error code it resolves a message that
- *    differs from the raw backend text (`error.meta.message`).
- * 4. A generic, translated fallback otherwise — including when nothing mapped and errorManager fell
- *    back to the raw backend message (`error.message === error.meta.message`).
- * @param {Object} error The queued pipeline error.
- * @param {string} error.message The message resolved by errorManager (code-mapped or raw fallback).
- * @param {Object} [error.meta] The error meta data.
- * @param {boolean} [error.meta.translated] Whether the backend message is already translated.
- * @param {string} [error.meta.message] The original, raw backend message.
- * @param {string} genericMessage The generic fallback message key.
- * @returns {DisplayErrorMessage}
- */
-export function getDisplayErrorMessage(error, genericMessage) {
-  const {
-    message,
-    meta = {}
-  } = error;
-  const {
-    translated,
-    message: originalMessage
-  } = meta;
-  if (translated && originalMessage) {
-    return {
-      message: originalMessage,
-      translated: true
-    };
-  }
-
-  // A translation key is never raw backend text, so surface it even when errorManager left it
-  // untouched (`message === originalMessage`).
-  if (typeof message === 'string' && i18n.has(message)) {
-    return {
-      message,
-      translated: false
-    };
-  }
-
-  // Only trust `message` when we have the raw backend message to compare against and a mapping
-  // actually replaced it. Without the raw message we cannot rule out that `message` is raw text.
-  if (originalMessage !== undefined && message !== originalMessage) {
-    return {
-      message,
-      translated: false
-    };
-  }
-  return {
-    message: genericMessage,
-    translated: false
-  };
 }

package/providers/toast/spec.js

@@ -1,105 +0,0 @@
-import React, { useContext } from 'react';
-import { render, act } from '@testing-library/react';
-import ToastProvider from "./index";
-import ToastContext from "./context";
-import { jsx as _jsx } from "react/jsx-runtime";
-jest.mock('@shopgate/pwa-core', () => ({
-  UIEvents: {
-    addListener: jest.fn(),
-    removeListener: jest.fn(),
-    emit: jest.fn()
-  }
-}));
-jest.mock('@shopgate/pwa-common/helpers/config', () => ({
-  themeConfig: {
-    variables: {
-      toast: {
-        duration: 5000
-      }
-    }
-  }
-}));
-let ctx;
-const Capture = () => {
-  ctx = useContext(ToastContext);
-  return null;
-};
-const renderProvider = () => render(/*#__PURE__*/_jsx(ToastProvider, {
-  children: /*#__PURE__*/_jsx(Capture, {})
-}));
-const toast = (id, message) => ({
-  id,
-  message
-});
-describe('ToastProvider', () => {
-  beforeEach(() => {
-    ctx = undefined;
-  });
-  it('appends a toast and applies the default duration', () => {
-    renderProvider();
-    act(() => {
-      ctx.addToast(toast('a', 'A'));
-    });
-    expect(ctx.toasts).toHaveLength(1);
-    expect(ctx.toasts[0]).toMatchObject({
-      id: 'a',
-      message: 'A',
-      duration: 5000
-    });
-  });
-  it('ignores a toast without a message', () => {
-    renderProvider();
-    act(() => {
-      ctx.addToast({
-        id: 'x'
-      });
-    });
-    expect(ctx.toasts).toHaveLength(0);
-  });
-  it('replaces a same-id toast in place, keeping its length and position', () => {
-    renderProvider();
-    act(() => {
-      ctx.addToast(toast('a', 'A'));
-    });
-    act(() => {
-      ctx.addToast(toast('b', 'B'));
-    });
-    const before = ctx.toasts;
-    act(() => {
-      ctx.addToast(toast('a', 'A2'));
-    });
-    expect(ctx.toasts).toHaveLength(2);
-    expect(ctx.toasts[0]).toMatchObject(toast('a', 'A2')); // content updated
-    expect(ctx.toasts[1]).toMatchObject(toast('b', 'B')); // sibling untouched
-    expect(ctx.toasts).not.toBe(before); // new array reference (immutable update)
-    expect(ctx.toasts[0]).not.toBe(before[0]); // new head object
-  });
-  it('removes the first toast (FIFO) on removeToast', () => {
-    renderProvider();
-    act(() => {
-      ctx.addToast(toast('a', 'A'));
-    });
-    act(() => {
-      ctx.addToast(toast('b', 'B'));
-    });
-    act(() => {
-      ctx.removeToast();
-    });
-    expect(ctx.toasts).toHaveLength(1);
-    expect(ctx.toasts[0]).toMatchObject(toast('b', 'B'));
-  });
-  it('keeps the context value referentially stable when toasts do not change', () => {
-    const {
-      rerender
-    } = renderProvider();
-    act(() => {
-      ctx.addToast(toast('a', 'A'));
-    });
-    const provided = ctx;
-    // Re-render the provider without changing the queue.
-    rerender(/*#__PURE__*/_jsx(ToastProvider, {
-      children: /*#__PURE__*/_jsx(Capture, {})
-    }));
-    expect(ctx).toBe(provided); // same context object → consumers don't needlessly re-render
-  });
-});