thm-p3-configurator 0.0.250 → 0.0.252

package/dist/index.js

@@ -9,6 +9,12 @@ Object.defineProperty(exports, "ActiveMarkerProvider", {
     return _ActiveMarkerContext.ActiveMarkerProvider;
   }
 });
+Object.defineProperty(exports, "BRANCH_THEME_BY_FORMULA", {
+  enumerable: true,
+  get: function get() {
+    return _index.BRANCH_THEME_BY_FORMULA;
+  }
+});
 Object.defineProperty(exports, "CountryController", {
   enumerable: true,
   get: function get() {
@@ -24,7 +30,7 @@ Object.defineProperty(exports, "FormulaController", {
 Object.defineProperty(exports, "InternalAppointmentPage", {
   enumerable: true,
   get: function get() {
-    return _index.InternalAppointmentPage;
+    return _index2.InternalAppointmentPage;
   }
 });
 Object.defineProperty(exports, "InternalBranchSelectorModal", {
@@ -36,67 +42,67 @@ Object.defineProperty(exports, "InternalBranchSelectorModal", {
 Object.defineProperty(exports, "InternalExtraProductsPage", {
   enumerable: true,
   get: function get() {
-    return _index.InternalExtraProductsPage;
+    return _index2.InternalExtraProductsPage;
   }
 });
 Object.defineProperty(exports, "InternalLicensePlatePage", {
   enumerable: true,
   get: function get() {
-    return _index.InternalLicensePlatePage;
+    return _index2.InternalLicensePlatePage;
   }
 });
 Object.defineProperty(exports, "InternalLocationsPage", {
   enumerable: true,
   get: function get() {
-    return _index.InternalLocationsPage;
+    return _index2.InternalLocationsPage;
   }
 });
 Object.defineProperty(exports, "InternalManualSelectionPage", {
   enumerable: true,
   get: function get() {
-    return _index.InternalManualSelectionPage;
+    return _index2.InternalManualSelectionPage;
   }
 });
 Object.defineProperty(exports, "InternalNoDossierPage", {
   enumerable: true,
   get: function get() {
-    return _index.InternalNoDossierPage;
+    return _index2.InternalNoDossierPage;
   }
 });
 Object.defineProperty(exports, "InternalNoProductsPage", {
   enumerable: true,
   get: function get() {
-    return _index.InternalNoProductsPage;
+    return _index2.InternalNoProductsPage;
   }
 });
 Object.defineProperty(exports, "InternalOverviewPage", {
   enumerable: true,
   get: function get() {
-    return _index.InternalOverviewPage;
+    return _index2.InternalOverviewPage;
   }
 });
 Object.defineProperty(exports, "InternalProductsPage", {
   enumerable: true,
   get: function get() {
-    return _index.InternalProductsPage;
+    return _index2.InternalProductsPage;
   }
 });
 Object.defineProperty(exports, "InternalQuotationPage", {
   enumerable: true,
   get: function get() {
-    return _index.InternalQuotationPage;
+    return _index2.InternalQuotationPage;
   }
 });
 Object.defineProperty(exports, "InternalSessionEditPage", {
   enumerable: true,
   get: function get() {
-    return _index.InternalSessionEditPage;
+    return _index2.InternalSessionEditPage;
   }
 });
 Object.defineProperty(exports, "InternalSingleOrderPage", {
   enumerable: true,
   get: function get() {
-    return _index.InternalSingleOrderPage;
+    return _index2.InternalSingleOrderPage;
   }
 });
 Object.defineProperty(exports, "OrderSessionController", {
@@ -111,6 +117,12 @@ Object.defineProperty(exports, "StyleWrapper", {
     return _StyleWrapper.default;
   }
 });
+Object.defineProperty(exports, "ThemeProvider", {
+  enumerable: true,
+  get: function get() {
+    return _ThemeContext.ThemeProvider;
+  }
+});
 Object.defineProperty(exports, "orderSessionActions", {
   enumerable: true,
   get: function get() {
@@ -159,12 +171,20 @@ Object.defineProperty(exports, "useOrderSession", {
     return _OrderSessionContext.useOrderSession;
   }
 });
+Object.defineProperty(exports, "useThemeContext", {
+  enumerable: true,
+  get: function get() {
+    return _ThemeContext.useThemeContext;
+  }
+});
+var _index = require("./src/shared/__constants__/index.js");
 var _InternalBranchSelectorModal = _interopRequireDefault(require("./src/shared/__containers__/internal/InternalBranchSelectorModal.js"));
 var _StyleWrapper = _interopRequireDefault(require("./src/shared/__containers__/StyleWrapper.js"));
 var _ActiveMarkerContext = require("./src/shared/__context__/ActiveMarkerContext.js");
 var _CountryContext = require("./src/shared/__context__/CountryContext.js");
 var _FormulaContext = require("./src/shared/__context__/FormulaContext.js");
 var _OrderSessionContext = require("./src/shared/__context__/OrderSessionContext.js");
-var _index = require("./src/shared/__pages__/internal/index.js");
+var _ThemeContext = require("./src/shared/__context__/ThemeContext.js");
+var _index2 = require("./src/shared/__pages__/internal/index.js");
 var _mainModule = _interopRequireDefault(require("./src/shared/__style__/main.module.scss"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/dist/src/shared/App.js

@@ -70,7 +70,7 @@ const App = () => {
     (0, _Experiments.default)();
   });
   return /*#__PURE__*/_react.default.createElement(_SentryWrapper.default, null, /*#__PURE__*/_react.default.createElement(_FormulaContext.FormulaController, {
-    defaultFormula: _constants__.CONFIGURATOR_FORMULAS.THM
+    defaultFormula: _constants__.CONFIGURATOR_FORMULAS.TMG
   }, /*#__PURE__*/_react.default.createElement(_CountryContext.CountryController, {
     defaultCountry: APP_CONFIG.country
   }, /*#__PURE__*/_react.default.createElement(_OrderSessionContext.OrderSessionController, null, /*#__PURE__*/_react.default.createElement(_reactQuery.QueryClientProvider, {

package/dist/src/shared/__containers__/StyleWrapper.js

@@ -11,6 +11,7 @@ require("core-js/modules/web.dom-collections.iterator.js");
 var _react = _interopRequireWildcard(require("react"));
 var _reactRouter = require("react-router");
 var _constants__ = require("../__constants__");
+var _ThemeContext = require("../__context__/ThemeContext");
 var _helpers__ = require("../__helpers__");
 var _useBranchTheme = require("../__hooks__/useBranchTheme");
 function _getRequireWildcardCache(e) {
@@ -40,10 +41,13 @@ function _interopRequireWildcard(e, r) {
 }
 const StyleWrapper = _ref => {
   let {
-    children
+    children,
+    theme: themeProp
   } = _ref;
   const [height, setHeight] = _react.default.useState({});
-  const theme = (0, _useBranchTheme.useBranchTheme)();
+  const themeFromHook = (0, _useBranchTheme.useBranchTheme)();
+  // Allow parent to override theme via prop (needed when used as npm package)
+  const theme = themeProp || themeFromHook;
   (0, _react.useLayoutEffect)(() => {
     window.addEventListener('resize', handleResize);
     handleResize();
@@ -67,9 +71,11 @@ const StyleWrapper = _ref => {
       });
     }
   };
-  return /*#__PURE__*/_react.default.createElement("main", {
+  return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeProvider, {
+    theme: theme
+  }, /*#__PURE__*/_react.default.createElement("main", {
     className: (0, _helpers__.withStyle)("thm-configurator ".concat(APP_CONFIG.internal ? 'thm-configurator--offset' : '', " ").concat(theme === _constants__.BRANCH_THEME_BY_FORMULA.Trekhaakcentrum ? 'thc' : theme === _constants__.BRANCH_THEME_BY_FORMULA.TowMotiveGroup ? 'tmg' : '')),
     style: height
-  }, children);
+  }, children));
 };
 var _default = exports.default = StyleWrapper;

package/dist/src/shared/__context__/ThemeContext.js

@@ -0,0 +1,57 @@
+"use strict";
+
+require("core-js/modules/es.weak-map.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+require("core-js/modules/es.weak-map.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useThemeContext = exports.ThemeProvider = void 0;
+var _react = _interopRequireWildcard(require("react"));
+function _getRequireWildcardCache(e) {
+  if ("function" != typeof WeakMap) return null;
+  var r = new WeakMap(),
+    t = new WeakMap();
+  return (_getRequireWildcardCache = function _getRequireWildcardCache(e) {
+    return e ? t : r;
+  })(e);
+}
+function _interopRequireWildcard(e, r) {
+  if (!r && e && e.__esModule) return e;
+  if (null === e || "object" != typeof e && "function" != typeof e) return {
+    default: e
+  };
+  var t = _getRequireWildcardCache(r);
+  if (t && t.has(e)) return t.get(e);
+  var n = {
+      __proto__: null
+    },
+    a = Object.defineProperty && Object.getOwnPropertyDescriptor;
+  for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) {
+    var i = a ? Object.getOwnPropertyDescriptor(e, u) : null;
+    i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u];
+  }
+  return n.default = e, t && t.set(e, n), n;
+}
+const ThemeContext = /*#__PURE__*/_react.default.createContext(null);
+ThemeContext.displayName = 'ThemeContext';
+const ThemeProvider = _ref => {
+  let {
+    children,
+    theme
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(ThemeContext.Provider, {
+    value: theme
+  }, children);
+};
+
+/**
+ * @description Returns the theme from ThemeContext if available
+ * This allows parent applications to override the theme when using the configurator as an npm package
+ */
+exports.ThemeProvider = ThemeProvider;
+const useThemeContext = () => {
+  return (0, _react.useContext)(ThemeContext);
+};
+exports.useThemeContext = useThemeContext;

package/dist/src/shared/__hooks__/useBranchTheme.js

@@ -6,18 +6,34 @@ Object.defineProperty(exports, "__esModule", {
 exports.useBranchTheme = void 0;
 var _react = require("react");
 var _constants__ = require("../__constants__");
-var _LocalStorageWorker = require("../__services__/LocalStorageWorker");
 var _FormulaContext = require("../__context__/FormulaContext");
+var _ThemeContext = require("../__context__/ThemeContext");
+const LAST_USED_THEME_KEY = '__lastUsedTheme';
+
 /**
  * @description Returns the theme of the partner portal based on the currently selected branch
+ * - First checks if a theme was provided via ThemeContext (from StyleWrapper prop)
  * - If the branch type is TowMotive group: return tmg theme
  * - Otherwise, check the branch formula and return the corresponding theme
  * - Caches the last used theme in localstorage and updates it when the current branch theme changes  (to persist themes even when the user is logged out)
  */
 const useBranchTheme = () => {
+  // Check if theme was provided via ThemeContext (from StyleWrapper prop)
+  const themeFromContext = (0, _ThemeContext.useThemeContext)();
   const formula = (0, _FormulaContext.useFormula)();
-  const cachedTheme = _LocalStorageWorker.lsw.get(_constants__.LAST_USED_THEME_KEY);
+
+  // Try to get cached theme from localStorage
+  let cachedTheme = null;
+  try {
+    cachedTheme = localStorage.getItem(LAST_USED_THEME_KEY);
+  } catch (e) {
+    // localStorage not available
+  }
   const currentTheme = (0, _react.useMemo)(() => {
+    // If theme was provided via context (from parent app), use that
+    if (themeFromContext) {
+      return themeFromContext;
+    }
     if (!formula) {
       return cachedTheme || _constants__.BRANCH_THEME_BY_FORMULA.Trekhaakmontage;
     }
@@ -44,14 +60,18 @@ const useBranchTheme = () => {
           return cachedTheme;
         }
     }
-  }, [cachedTheme, formula]);
+  }, [themeFromContext, cachedTheme, formula]);
 
   /**
    * @description Updates the last used theme value in LS with the current theme
    */
   (0, _react.useEffect)(() => {
     if (currentTheme) {
-      _LocalStorageWorker.lsw.set(_constants__.LAST_USED_THEME_KEY, currentTheme);
+      try {
+        localStorage.setItem(LAST_USED_THEME_KEY, currentTheme);
+      } catch (e) {
+        // localStorage not available
+      }
     }
   }, [currentTheme]);
   return currentTheme;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "thm-p3-configurator",
-  "version": "0.0.250",
+  "version": "0.0.252",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "author": "EnoRm.",