thm-p3-configurator 0.0.331 → 0.0.334

package/dist/index.js

@@ -9,6 +9,12 @@ Object.defineProperty(exports, "ActiveMarkerProvider", {
     return _ActiveMarkerContext.ActiveMarkerProvider;
   }
 });
+Object.defineProperty(exports, "AuthSessionProvider", {
+  enumerable: true,
+  get: function get() {
+    return _AuthSessionContext.AuthSessionProvider;
+  }
+});
 Object.defineProperty(exports, "BRANCH_THEME_BY_FORMULA", {
   enumerable: true,
   get: function get() {
@@ -141,6 +147,12 @@ Object.defineProperty(exports, "useActiveMarker", {
     return _ActiveMarkerContext.useActiveMarker;
   }
 });
+Object.defineProperty(exports, "useAuthSession", {
+  enumerable: true,
+  get: function get() {
+    return _AuthSessionContext.useAuthSession;
+  }
+});
 Object.defineProperty(exports, "useCountry", {
   enumerable: true,
   get: function get() {
@@ -181,6 +193,7 @@ 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 _AuthSessionContext = require("./src/shared/__context__/AuthSessionContext.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");

package/dist/src/shared/App.js

@@ -22,7 +22,6 @@ var _TEST_ONLY_INTERNAL_ROUTES = _interopRequireDefault(require("./__pages__/int
 var _StyleWrapper = _interopRequireDefault(require("./__containers__/StyleWrapper"));
 var _InternalBranchSelectorModal = _interopRequireDefault(require("./__containers__/internal/InternalBranchSelectorModal"));
 var _ActiveMarkerContext = require("./__context__/ActiveMarkerContext");
-var _AuthSessionContext = require("./__context__/AuthSessionContext");
 var _CountryContext = require("./__context__/CountryContext");
 var _FormulaContext = require("./__context__/FormulaContext");
 var _OrderSessionContext = require("./__context__/OrderSessionContext");
@@ -74,8 +73,8 @@ const App = () => {
     defaultFormula: _constants__.CONFIGURATOR_FORMULAS.THM
   }, /*#__PURE__*/_react.default.createElement(_CountryContext.CountryController, {
     defaultCountry: APP_CONFIG.country
-  }, /*#__PURE__*/_react.default.createElement(_OrderSessionContext.OrderSessionController, null, /*#__PURE__*/_react.default.createElement(_AuthSessionContext.AuthSessionProvider, null, /*#__PURE__*/_react.default.createElement(_reactQuery.QueryClientProvider, {
+  }, /*#__PURE__*/_react.default.createElement(_OrderSessionContext.OrderSessionController, null, /*#__PURE__*/_react.default.createElement(_reactQuery.QueryClientProvider, {
     client: _queryClient.default
-  }, /*#__PURE__*/_react.default.createElement(_reactRouterDom.BrowserRouter, null, /*#__PURE__*/_react.default.createElement(_reactHotLoader.AppContainer, null, /*#__PURE__*/_react.default.createElement(_ActiveMarkerContext.ActiveMarkerProvider, null, /*#__PURE__*/_react.default.createElement(_StyleWrapper.default, null, !APP_CONFIG.internal && /*#__PURE__*/_react.default.createElement(_Navbar.default, null), APP_CONFIG.internal && /*#__PURE__*/_react.default.createElement(_InternalBranchSelectorModal.default, null), /*#__PURE__*/_react.default.createElement(_pages__.default, null)))))))))));
+  }, /*#__PURE__*/_react.default.createElement(_reactRouterDom.BrowserRouter, null, /*#__PURE__*/_react.default.createElement(_reactHotLoader.AppContainer, null, /*#__PURE__*/_react.default.createElement(_ActiveMarkerContext.ActiveMarkerProvider, null, /*#__PURE__*/_react.default.createElement(_StyleWrapper.default, null, !APP_CONFIG.internal && /*#__PURE__*/_react.default.createElement(_Navbar.default, null), APP_CONFIG.internal && /*#__PURE__*/_react.default.createElement(_InternalBranchSelectorModal.default, null), /*#__PURE__*/_react.default.createElement(_pages__.default, null))))))))));
 };
 var _default = exports.default = App;

package/dist/src/shared/__api__/queries.js

@@ -475,10 +475,13 @@ const useOrderDataQuery = exports.useOrderDataQuery = function useOrderDataQuery
     licensePlate,
     model
   } = normalizedOrderParams;
+  const {
+    initialized
+  } = (0, _AuthSessionContext.useAuthSession)();
   const orderQueryKey = (0, _queryKeyFactory.getOrderQueryKey)(normalizedOrderParams);
   const serializedOrderParams = (0, _queryKeyFactory.serializeOrderParams)(normalizedOrderParams);
   const orderQuery = (0, _reactQuery.useQuery)(orderQueryKey, {
-    enabled: (licensePlate === null || licensePlate === void 0 ? void 0 : licensePlate.length) > 5 || !!(model !== null && model !== void 0 && model.length),
+    enabled: ((licensePlate === null || licensePlate === void 0 ? void 0 : licensePlate.length) > 5 || !!(model !== null && model !== void 0 && model.length)) && (!APP_CONFIG.internal || initialized),
     keepPreviousData: true,
     queryFn: async () => {
       var _response$data;

package/dist/src/shared/__components__/Cards/Card.js

@@ -5,9 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _constants__ = require("../../__constants__");
-var _FormulaContext = require("../../__context__/FormulaContext");
 var _helpers__ = require("../../__helpers__");
+var _useBranchTheme = require("../../__hooks__/useBranchTheme");
 function _interopRequireDefault(e) {
   return e && e.__esModule ? e : {
     default: e
@@ -22,9 +21,10 @@ const Card = _ref => {
     isWide = false,
     isNarrow = false
   } = _ref;
-  const formula = (0, _FormulaContext.useFormula)();
+  const theme = (0, _useBranchTheme.useBranchTheme)();
+  const themeClass = (0, _helpers__.getConfiguratorThemeClass)(theme);
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _helpers__.withStyle)("".concat(isCentered ? 'modal-dialog-centered' : '', "  ").concat(isScrollable ? 'modal-dialog-scrollable' : '', " ").concat(isWide ? 'modal-dialog__questions' : 'modal-dialog', " ").concat(isNarrow ? 'modal--narrow' : '', " ").concat(formula === _constants__.CONFIGURATOR_FORMULAS.THC ? 'thc' : ''))
+    className: (0, _helpers__.withStyle)("".concat(isCentered ? 'modal-dialog-centered' : '', "  ").concat(isScrollable ? 'modal-dialog-scrollable' : '', " ").concat(isWide ? 'modal-dialog__questions' : 'modal-dialog', " ").concat(isNarrow ? 'modal--narrow' : '', " ").concat(themeClass))
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _helpers__.withStyle)('modal-content')
   }, title && /*#__PURE__*/_react.default.createElement("div", {

package/dist/src/shared/__components__/Error.js

@@ -7,9 +7,8 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactLottie = _interopRequireDefault(require("react-lottie"));
 var _animation = _interopRequireDefault(require("../../../public/assets/lottie/animation"));
-var _constants__ = require("../__constants__");
-var _FormulaContext = require("../__context__/FormulaContext");
 var _helpers__ = require("../__helpers__");
+var _useBranchTheme = require("../__hooks__/useBranchTheme");
 var _NavigationButton = _interopRequireDefault(require("./Buttons/NavigationButton"));
 function _interopRequireDefault(e) {
   return e && e.__esModule ? e : {
@@ -28,7 +27,9 @@ const Error = () => {
   const handleRedirectToWebsite = () => {
     window.location.href = APP_CONFIG.websiteHost;
   };
-  const formula = (0, _FormulaContext.useFormula)();
+  const theme = (0, _useBranchTheme.useBranchTheme)();
+  const primaryVariant = (0, _helpers__.getConfiguratorButtonVariant)(theme);
+  const outlineVariant = (0, _helpers__.getConfiguratorButtonVariant)(theme, true);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat((0, _helpers__.withStyle)('d-flex flex-column'))
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -52,14 +53,14 @@ const Error = () => {
   }, "Indien de error zich blijft voordoen, gelieve contact op te nemen met de administrator"), /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _helpers__.withStyle)('d-flex align-items-center gap-2 w-100 justify-content-center')
   }, /*#__PURE__*/_react.default.createElement(_NavigationButton.default, {
-    variant: formula === _constants__.CONFIGURATOR_FORMULAS.THC ? 'custom-primary' : 'primary',
+    variant: primaryVariant,
     to: "/configurator",
     label: "Start de configurator opnieuw"
   }), /*#__PURE__*/_react.default.createElement(_NavigationButton.default, {
     to: "#",
     onClick: handleRedirectToWebsite,
     label: "Ga naar de homepage",
-    variant: formula === _constants__.CONFIGURATOR_FORMULAS.THC ? 'outline-custom-primary' : 'outline-primary'
+    variant: outlineVariant
   }))))))));
 };
 var _default = exports.default = Error;

package/dist/src/shared/__components__/Form/RadioButtons.js

@@ -11,9 +11,8 @@ exports.default = void 0;
 require("core-js/modules/esnext.iterator.map.js");
 require("core-js/modules/web.dom-collections.iterator.js");
 var _react = _interopRequireWildcard(require("react"));
-var _constants__ = require("../../__constants__");
-var _FormulaContext = require("../../__context__/FormulaContext");
 var _helpers__ = require("../../__helpers__");
+var _useBranchTheme = require("../../__hooks__/useBranchTheme");
 var _ErrorMessage = _interopRequireDefault(require("./ErrorMessage"));
 function _interopRequireDefault(e) {
   return e && e.__esModule ? e : {
@@ -57,7 +56,8 @@ const RadioButtons = _ref => {
     errorMessage
   } = _ref;
   const [value, setValue] = (0, _react.useState)(initialValue);
-  const formula = (0, _FormulaContext.useFormula)();
+  const theme = (0, _useBranchTheme.useBranchTheme)();
+  const buttonVariant = (0, _helpers__.getConfiguratorButtonVariant)(theme, true);
   const handleChange = event => {
     const {
       value
@@ -76,7 +76,7 @@ const RadioButtons = _ref => {
     "aria-label": label
   }, options.map((optionName, key) => /*#__PURE__*/_react.default.createElement("label", {
     key: key,
-    className: (0, _helpers__.withStyle)("form__radio-item form__radio-item--flexible btn btn-sm ".concat(formula === _constants__.CONFIGURATOR_FORMULAS.THC ? 'btn-outline-custom-primary' : 'btn-outline-primary', " ").concat(value === optionName ? 'active' : '')),
+    className: (0, _helpers__.withStyle)("form__radio-item form__radio-item--flexible btn btn-sm btn-".concat(buttonVariant, " ").concat(value === optionName ? 'active' : '')),
     htmlFor: "".concat(name, "[").concat(key, "]")
   }, /*#__PURE__*/_react.default.createElement("input", {
     type: "radio",

package/dist/src/shared/__components__/Header.js

@@ -10,7 +10,6 @@ var _logoThcWhite = _interopRequireDefault(require("../../../public/assets/image
 var _logoTmgPrimary = _interopRequireDefault(require("../../../public/assets/images/logo-tmg-primary.png"));
 var _tmLogo = _interopRequireDefault(require("../../../public/assets/images/tm-logo.png"));
 var _constants__ = require("../__constants__");
-var _FormulaContext = require("../__context__/FormulaContext");
 var _helpers__ = require("../__helpers__");
 var _useBranchTheme = require("../__hooks__/useBranchTheme");
 function _interopRequireDefault(e) {
@@ -24,7 +23,6 @@ const Header = _ref => {
     subtitle = ''
   } = _ref;
   const theme = (0, _useBranchTheme.useBranchTheme)();
-  const formula = (0, _FormulaContext.useFormula)();
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _helpers__.withStyle)("hero hero--offset")
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -35,7 +33,7 @@ const Header = _ref => {
     className: (0, _helpers__.withStyle)('col hero__logo-container')
   }, /*#__PURE__*/_react.default.createElement("img", {
     className: (0, _helpers__.withStyle)("hero__logo ".concat(theme === _constants__.BRANCH_THEME_BY_FORMULA.TowMotiveGroup ? 'hero__logo--tmg' : '')),
-    src: formula === _constants__.CONFIGURATOR_FORMULAS.TM ? _tmLogo.default : theme === _constants__.BRANCH_THEME_BY_FORMULA.Trekhaakcentrum ? _logoThcWhite.default : theme === _constants__.BRANCH_THEME_BY_FORMULA.TowMotiveGroup ? _logoTmgPrimary.default : _logoPrimaryIcon.default,
+    src: theme === _constants__.BRANCH_THEME_BY_FORMULA.TowMotive ? _tmLogo.default : theme === _constants__.BRANCH_THEME_BY_FORMULA.Trekhaakcentrum ? _logoThcWhite.default : theme === _constants__.BRANCH_THEME_BY_FORMULA.TowMotiveGroup ? _logoTmgPrimary.default : _logoPrimaryIcon.default,
     alt: "Trekhaak Montage"
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _helpers__.withStyle)('hero__inner d-none d-lg-block')

package/dist/src/shared/__components__/Navbar.js

@@ -10,7 +10,6 @@ var _logoTmgPrimary = _interopRequireDefault(require("../../../public/assets/ima
 var _logoWhite = _interopRequireDefault(require("../../../public/assets/images/logo-white.svg"));
 var _tmLogo = _interopRequireDefault(require("../../../public/assets/images/tm-logo.png"));
 var _constants__ = require("../__constants__");
-var _FormulaContext = require("../__context__/FormulaContext");
 var _helpers__ = require("../__helpers__");
 var _useBranchTheme = require("../__hooks__/useBranchTheme");
 function _interopRequireDefault(e) {
@@ -23,9 +22,9 @@ const Navbar = _ref => {
     onPhoneClicked
   } = _ref;
   const theme = (0, _useBranchTheme.useBranchTheme)();
-  const formula = (0, _FormulaContext.useFormula)();
+  const themeClass = (0, _helpers__.getConfiguratorThemeClass)(theme);
   return /*#__PURE__*/_react.default.createElement("nav", {
-    className: (0, _helpers__.withStyle)("navbar fixed-top ".concat(theme === _constants__.BRANCH_THEME_BY_FORMULA.Trekhaakcentrum ? 'thc' : theme === _constants__.BRANCH_THEME_BY_FORMULA.TowMotiveGroup ? 'tmg' : ''))
+    className: (0, _helpers__.withStyle)("navbar fixed-top ".concat(themeClass))
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _helpers__.withStyle)('container-fluid')
   }, /*#__PURE__*/_react.default.createElement("a", {
@@ -33,7 +32,7 @@ const Navbar = _ref => {
     href: APP_CONFIG.websiteHost
   }, /*#__PURE__*/_react.default.createElement("img", {
     className: (0, _helpers__.withStyle)('img-fluid'),
-    src: formula === _constants__.CONFIGURATOR_FORMULAS.TM ? _tmLogo.default : theme === _constants__.BRANCH_THEME_BY_FORMULA.Trekhaakcentrum ? _logoThcWhite.default : theme === _constants__.BRANCH_THEME_BY_FORMULA.TowMotiveGroup ? _logoTmgPrimary.default : _logoWhite.default,
+    src: theme === _constants__.BRANCH_THEME_BY_FORMULA.TowMotive ? _tmLogo.default : theme === _constants__.BRANCH_THEME_BY_FORMULA.Trekhaakcentrum ? _logoThcWhite.default : theme === _constants__.BRANCH_THEME_BY_FORMULA.TowMotiveGroup ? _logoTmgPrimary.default : _logoWhite.default,
     alt: "Trekhaakmontage"
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _helpers__.withStyle)('navbar__phone ms-10 d-none d-sm-flex')

package/dist/src/shared/__components__/ProductCard/ProductCardCheckbox.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _constants__ = require("../../__constants__");
 var _useBranchTheme = require("../../__hooks__/useBranchTheme");
 var _helpers__ = require("../../__helpers__");
 function _interopRequireDefault(e) {
@@ -20,6 +19,7 @@ const ProductCardCheckbox = _ref => {
     id
   } = _ref;
   const theme = (0, _useBranchTheme.useBranchTheme)();
+  const buttonVariant = (0, _helpers__.getConfiguratorButtonVariant)(theme, true);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _helpers__.withStyle)('align-items-center d-flex position-relative')
   }, /*#__PURE__*/_react.default.createElement("input", {
@@ -30,7 +30,7 @@ const ProductCardCheckbox = _ref => {
     readOnly: true,
     checked: defaultChecked
   }), /*#__PURE__*/_react.default.createElement("label", {
-    className: (0, _helpers__.withStyle)("btn ".concat(theme === _constants__.BRANCH_THEME_BY_FORMULA.Trekhaakcentrum ? 'btn-outline-custom-primary' : theme === _constants__.BRANCH_THEME_BY_FORMULA.TowMotiveGroup ? 'btn-outline-tmg-primary' : 'btn-outline-primary', " ")),
+    className: (0, _helpers__.withStyle)("btn btn-".concat(buttonVariant)),
     htmlFor: "btn-check-".concat(id),
     disabled: isDisabled
   }, defaultChecked ? 'Geselecteerd' : 'Selecteer'));

package/dist/src/shared/__components__/Spinners/FullPageSpinner.js

@@ -16,7 +16,6 @@ var _logoWhite = _interopRequireDefault(require("../../../../public/assets/image
 var _constants__ = require("../../__constants__");
 var _helpers__ = require("../../__helpers__");
 var _useBranchTheme = require("../../__hooks__/useBranchTheme");
-var _FormulaContext = require("../../__context__/FormulaContext");
 function _interopRequireDefault(e) {
   return e && e.__esModule ? e : {
     default: e
@@ -53,12 +52,12 @@ const FullPageSpinner = _ref => {
   } = _ref;
   const [hasRendered, setHasRendered] = (0, _react.useState)();
   const theme = (0, _useBranchTheme.useBranchTheme)();
-  const formula = (0, _FormulaContext.useFormula)();
+  const themeClass = (0, _helpers__.getConfiguratorThemeClass)(theme);
   (0, _react.useEffect)(() => {
     setHasRendered(true);
   }, []);
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _helpers__.withStyle)("loader ".concat(theme === _constants__.BRANCH_THEME_BY_FORMULA.Trekhaakcentrum ? 'thc' : theme === _constants__.BRANCH_THEME_BY_FORMULA.TowMotiveGroup ? 'tmg' : ''))
+    className: (0, _helpers__.withStyle)("loader ".concat(themeClass))
   }, hasRendered !== true ? /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement("i", {
     className: (0, _helpers__.withStyle)('loader__icon')
   })) : /*#__PURE__*/_react.default.createElement("span", {
@@ -67,7 +66,7 @@ const FullPageSpinner = _ref => {
     className: "fas fa-cog fa-spin"
   }), ' '), children ? children : /*#__PURE__*/_react.default.createElement("img", {
     className: (0, _helpers__.withStyle)('loader__logo'),
-    src: formula === _constants__.CONFIGURATOR_FORMULAS.TM ? _tmLogo.default : theme === _constants__.BRANCH_THEME_BY_FORMULA.Trekhaakcentrum ? _logoThcWhite.default : theme === _constants__.BRANCH_THEME_BY_FORMULA.TowMotiveGroup ? _logoTmgPrimary.default : _logoWhite.default,
+    src: theme === _constants__.BRANCH_THEME_BY_FORMULA.TowMotive ? _tmLogo.default : theme === _constants__.BRANCH_THEME_BY_FORMULA.Trekhaakcentrum ? _logoThcWhite.default : theme === _constants__.BRANCH_THEME_BY_FORMULA.TowMotiveGroup ? _logoTmgPrimary.default : _logoWhite.default,
     alt: "Trekhaak Montage - Configurator"
   }));
 };

package/dist/src/shared/__constants__/index.js

@@ -31,12 +31,13 @@ const BRANCH_THEME_BY_FORMULA = exports.BRANCH_THEME_BY_FORMULA = {
   Trekhaakcentrum: 'thc',
   Trekhaakmontage: 'thm',
   TowMotiveGroup: 'tmg',
-  TowMotive: 'tmg'
+  TowMotive: 'tm'
 };
 const PARTNER_PORTAL_PAGE_TITLES_BY_THEME = exports.PARTNER_PORTAL_PAGE_TITLES_BY_THEME = {
   [BRANCH_THEME_BY_FORMULA.Trekhaakmontage]: 'Trekhaakmontage - Partner Portal',
   [BRANCH_THEME_BY_FORMULA.Trekhaakcentrum]: 'Trekhaakcentrum - Partner Portal',
-  [BRANCH_THEME_BY_FORMULA.TowMotiveGroup]: 'TowMotive Group - Partner Portal'
+  [BRANCH_THEME_BY_FORMULA.TowMotiveGroup]: 'TowMotive Group - Partner Portal',
+  [BRANCH_THEME_BY_FORMULA.TowMotive]: 'TowMotive - Partner Portal'
 };
 const DAY_NAMES = exports.DAY_NAMES = {
   monday: 'Maandag',

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

@@ -10,7 +10,6 @@ exports.default = void 0;
 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");
@@ -48,6 +47,7 @@ const StyleWrapper = _ref => {
   const themeFromHook = (0, _useBranchTheme.useBranchTheme)();
   // Allow parent to override theme via prop (needed when used as npm package)
   const theme = themeProp || themeFromHook;
+  const themeClass = (0, _helpers__.getConfiguratorThemeClass)(theme);
   (0, _react.useLayoutEffect)(() => {
     window.addEventListener('resize', handleResize);
     handleResize();
@@ -74,7 +74,7 @@ const StyleWrapper = _ref => {
   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' : '')),
+    className: (0, _helpers__.withStyle)("thm-configurator ".concat(APP_CONFIG.internal ? 'thm-configurator--offset' : '', " ").concat(themeClass)),
     style: height
   }, children));
 };

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

@@ -24,7 +24,11 @@ require("core-js/modules/esnext.iterator.some.js");
 require("core-js/modules/web.dom-collections.iterator.js");
 var _react = _interopRequireWildcard(require("react"));
 var _constants__ = require("../__constants__");
+var _authenticatedProxyApi = require("../__api__/authenticatedProxyApi");
+var _AuthSessionContext = require("./AuthSessionContext");
+var _FormulaContext = require("./FormulaContext");
 var _helpers__ = require("../__helpers__");
+var _AuthRuntime = require("../__services__/AuthRuntime");
 var _useIsSingleOrder = _interopRequireDefault(require("../__hooks__/useIsSingleOrder"));
 function _interopRequireDefault(e) {
   return e && e.__esModule ? e : {
@@ -1352,10 +1356,66 @@ const initializeOrderSession = function initializeOrderSession() {
   }
   return cachedSession;
 };
-const OrderSessionController = _ref => {
+const AuthSessionRuntimeSync = () => {
+  const {
+    authenticated,
+    initialized,
+    branch,
+    module
+  } = (0, _AuthSessionContext.useAuthSession)();
+  const [{
+    selectedBranch
+  }] = useOrderSession();
+  const formula = (0, _FormulaContext.useFormula)();
+  const lastSyncedContextRef = (0, _react.useRef)(null);
+  (0, _react.useLayoutEffect)(() => {
+    var _ref;
+    if (!APP_CONFIG.internal || !initialized) {
+      return;
+    }
+    _AuthRuntime.authRuntime.setActiveBranchId((_ref = selectedBranch !== null && selectedBranch !== void 0 ? selectedBranch : branch === null || branch === void 0 ? void 0 : branch.entityId) !== null && _ref !== void 0 ? _ref : null);
+  }, [initialized, selectedBranch, branch]);
+  (0, _react.useEffect)(() => {
+    var _ref2;
+    if (!APP_CONFIG.internal || !initialized) {
+      return;
+    }
+    const branchId = (_ref2 = selectedBranch !== null && selectedBranch !== void 0 ? selectedBranch : branch === null || branch === void 0 ? void 0 : branch.entityId) !== null && _ref2 !== void 0 ? _ref2 : null;
+    if (!authenticated || !branchId || !formula) {
+      lastSyncedContextRef.current = null;
+      return;
+    }
+    const normalizedFormula = formula === _constants__.CONFIGURATOR_FORMULAS.THM ? _constants__.CONFIGURATOR_FORMULAS.TM : formula;
+    const nextContextKey = JSON.stringify({
+      branchId,
+      formula: normalizedFormula,
+      module: module !== null && module !== void 0 ? module : null
+    });
+    if (lastSyncedContextRef.current === nextContextKey) {
+      return;
+    }
+    let isCancelled = false;
+    _authenticatedProxyApi.authenticatedProxyApi.putSessionContext({
+      branchEntityId: branchId,
+      formula: normalizedFormula,
+      module: module !== null && module !== void 0 ? module : undefined
+    }).then(() => {
+      if (!isCancelled) {
+        lastSyncedContextRef.current = nextContextKey;
+      }
+    }).catch(error => {
+      console.warn('Failed to sync authenticated session context', error);
+    });
+    return () => {
+      isCancelled = true;
+    };
+  }, [authenticated, initialized, selectedBranch, branch, formula, module]);
+  return null;
+};
+const OrderSessionController = _ref3 => {
   let {
     children
-  } = _ref;
+  } = _ref3;
   const isSingleOrderPage = (0, _useIsSingleOrder.default)();
   const [order, dispatch] = (0, _react.useReducer)(orderSessionReducer, initializeOrderSession(isSingleOrderPage));
   (0, _react.useEffect)(() => {
@@ -1367,7 +1427,7 @@ const OrderSessionController = _ref => {
   }, [order, isSingleOrderPage]);
   return /*#__PURE__*/_react.default.createElement(OrderSessionContext.Provider, {
     value: [order, dispatch]
-  }, children);
+  }, /*#__PURE__*/_react.default.createElement(_AuthSessionContext.AuthSessionProvider, null, /*#__PURE__*/_react.default.createElement(AuthSessionRuntimeSync, null), children));
 };
 exports.OrderSessionController = OrderSessionController;
 const useOrderSession = () => {

package/dist/src/shared/__helpers__/index.js

@@ -16,7 +16,7 @@ require("core-js/modules/web.dom-collections.iterator.js");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.withStyle = exports.truncateAtPipe = exports.removeNullishProps = exports.reduceYupErrorsToObject = exports.pushToDataLayer = exports.parseJson = exports.parseDateAndTimeToTimestamp = exports.parseArrayToInputOptions = exports.normalizeArray = exports.groupByKey = exports.getProxyApiErrorMessage = exports.formatPrice = exports.formatMontageTime = exports.createSlug = void 0;
+exports.withStyle = exports.truncateAtPipe = exports.removeNullishProps = exports.reduceYupErrorsToObject = exports.pushToDataLayer = exports.parseJson = exports.parseDateAndTimeToTimestamp = exports.parseArrayToInputOptions = exports.normalizeArray = exports.groupByKey = exports.getProxyApiErrorMessage = exports.getConfiguratorThemeClassByFormula = exports.getConfiguratorThemeClass = exports.getConfiguratorButtonVariant = exports.formatPrice = exports.formatMontageTime = exports.createSlug = void 0;
 require("core-js/modules/es.array.reduce.js");
 require("core-js/modules/es.json.stringify.js");
 require("core-js/modules/es.object.from-entries.js");
@@ -31,6 +31,7 @@ require("core-js/modules/esnext.iterator.map.js");
 require("core-js/modules/esnext.iterator.reduce.js");
 require("core-js/modules/web.dom-collections.iterator.js");
 var _slugify = _interopRequireDefault(require("slugify"));
+var _constants__ = require("../__constants__");
 function _interopRequireDefault(e) {
   return e && e.__esModule ? e : {
     default: e
@@ -89,11 +90,52 @@ const withStyle = classes => {
     return (_window$styles = window.styles) === null || _window$styles === void 0 ? void 0 : _window$styles[className];
   }).join(' ');
 };
+exports.withStyle = withStyle;
+const getConfiguratorThemeClass = theme => {
+  switch (theme) {
+    case _constants__.BRANCH_THEME_BY_FORMULA.Trekhaakcentrum:
+      return 'thc';
+    case _constants__.BRANCH_THEME_BY_FORMULA.TowMotive:
+      return 'tm';
+    case _constants__.BRANCH_THEME_BY_FORMULA.TowMotiveGroup:
+      return 'tmg';
+    default:
+      return '';
+  }
+};
+exports.getConfiguratorThemeClass = getConfiguratorThemeClass;
+const getConfiguratorThemeClassByFormula = formula => {
+  switch (formula) {
+    case 'THC':
+      return 'thc';
+    case 'TMG':
+      return 'tmg';
+    case 'TOW':
+    case 'TH':
+    case 'TowMotive':
+      return 'tm';
+    default:
+      return '';
+  }
+};
+exports.getConfiguratorThemeClassByFormula = getConfiguratorThemeClassByFormula;
+const getConfiguratorButtonVariant = exports.getConfiguratorButtonVariant = function getConfiguratorButtonVariant(theme) {
+  let outline = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  switch (theme) {
+    case _constants__.BRANCH_THEME_BY_FORMULA.Trekhaakcentrum:
+      return outline ? 'outline-custom-primary' : 'custom-primary';
+    case _constants__.BRANCH_THEME_BY_FORMULA.TowMotive:
+      return outline ? 'outline-tm-primary' : 'tm-primary';
+    case _constants__.BRANCH_THEME_BY_FORMULA.TowMotiveGroup:
+      return outline ? 'outline-tmg-primary' : 'tmg-primary';
+    default:
+      return outline ? 'outline-primary' : 'primary';
+  }
+};
 
 /**
  * @description Formats a given number to a price string
  */
-exports.withStyle = withStyle;
 const formatPrice = price => {
   return price == null || Number.isNaN(price) || price === 'N.v.t' ? 'N.v.t' : new Intl.NumberFormat('nl-NL', {
     style: 'currency',

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

@@ -50,11 +50,15 @@ const useBranchTheme = () => {
         }
       case _constants__.BRANCH_FORMULAS.TowMotiveGroup:
       case _constants__.CONFIGURATOR_FORMULAS.TMG:
+        {
+          return _constants__.BRANCH_THEME_BY_FORMULA.TowMotiveGroup;
+        }
+      case _constants__.BRANCH_FORMULAS.TowMotive:
       case _constants__.CONFIGURATOR_FORMULAS.TOW:
       case _constants__.CONFIGURATOR_FORMULAS.TH:
       case _constants__.CONFIGURATOR_FORMULAS.TowMotive:
         {
-          return _constants__.BRANCH_THEME_BY_FORMULA.TowMotiveGroup;
+          return _constants__.BRANCH_THEME_BY_FORMULA.TowMotive;
         }
       default:
         {

package/dist/src/shared/__pages__/AppointmentPage.js

@@ -11,19 +11,19 @@ var _NavigationSteps = _interopRequireDefault(require("../__components__/Navigat
 var _UspsList = _interopRequireDefault(require("../__components__/UspsList"));
 var _constants__ = require("../__constants__");
 var _AppointmentForm = _interopRequireDefault(require("../__containers__/AppointmentForm"));
-var _FormulaContext = require("../__context__/FormulaContext");
 var _helpers__ = require("../__helpers__");
+var _useBranchTheme = require("../__hooks__/useBranchTheme");
 function _interopRequireDefault(e) {
   return e && e.__esModule ? e : {
     default: e
   };
 }
 const AppointmentPage = () => {
-  const formula = (0, _FormulaContext.useFormula)();
+  const themeClass = (0, _helpers__.getConfiguratorThemeClass)((0, _useBranchTheme.useBranchTheme)());
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, ' ', APP_CONFIG.internal && /*#__PURE__*/_react.default.createElement(_Header.default, {
     title: 'Plan een afspraak in'
   }), /*#__PURE__*/_react.default.createElement("section", {
-    className: "".concat((0, _helpers__.withStyle)("thm-configurator-wrapper ".concat(APP_CONFIG.internal ? 'thm-configurator-wrapper--offset' : '', " ").concat(formula === _constants__.CONFIGURATOR_FORMULAS.THC ? 'thc' : '')))
+    className: "".concat((0, _helpers__.withStyle)("thm-configurator-wrapper ".concat(APP_CONFIG.internal ? 'thm-configurator-wrapper--offset' : '', " ").concat(themeClass)))
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _helpers__.withStyle)('container page-content')
   }, /*#__PURE__*/_react.default.createElement("div", {

package/dist/src/shared/__pages__/AppointmentThanksPage.js

@@ -7,11 +7,14 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactRouter = require("react-router");
 var _logoPrimaryIcon = _interopRequireDefault(require("../../../public/assets/images/logo-primary-icon.svg"));
+var _logoThcWhite = _interopRequireDefault(require("../../../public/assets/images/logo-thc-white.svg"));
+var _logoTmgPrimary = _interopRequireDefault(require("../../../public/assets/images/logo-tmg-primary.png"));
+var _tmLogo = _interopRequireDefault(require("../../../public/assets/images/tm-logo.png"));
 var _PrimaryButton = _interopRequireDefault(require("../__components__/Buttons/PrimaryButton"));
 var _Card = _interopRequireDefault(require("../__components__/Cards/Card"));
 var _constants__ = require("../__constants__");
-var _FormulaContext = require("../__context__/FormulaContext");
 var _helpers__ = require("../__helpers__");
+var _useBranchTheme = require("../__hooks__/useBranchTheme");
 function _interopRequireDefault(e) {
   return e && e.__esModule ? e : {
     default: e
@@ -23,12 +26,12 @@ const AppointmentThanksPage = () => {
   const handleClick = () => {
     window.location.href = APP_CONFIG.websiteHost;
   };
-  const formula = (0, _FormulaContext.useFormula)();
+  const themeClass = (0, _helpers__.getConfiguratorThemeClass)((0, _useBranchTheme.useBranchTheme)());
   return /*#__PURE__*/_react.default.createElement("section", {
-    className: (0, _helpers__.withStyle)("thm-configurator-wrapper thm-configurator-home ".concat(formula === _constants__.CONFIGURATOR_FORMULAS.THC ? 'thc' : ''), APP_CONFIG.internal ? 'thm-configurator-wrapper--offset' : '')
+    className: (0, _helpers__.withStyle)("thm-configurator-wrapper thm-configurator-home ".concat(themeClass), APP_CONFIG.internal ? 'thm-configurator-wrapper--offset' : '')
   }, !APP_CONFIG.internal && /*#__PURE__*/_react.default.createElement("img", {
     className: (0, _helpers__.withStyle)('thm-configurator-home__logo img-fluid'),
-    src: _logoPrimaryIcon.default,
+    src: themeClass === _constants__.BRANCH_THEME_BY_FORMULA.TowMotive ? _tmLogo.default : themeClass === _constants__.BRANCH_THEME_BY_FORMULA.Trekhaakcentrum ? _logoThcWhite.default : themeClass === _constants__.BRANCH_THEME_BY_FORMULA.TowMotiveGroup ? _logoTmgPrimary.default : _logoPrimaryIcon.default,
     alt: "Trekhaakmontage"
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _helpers__.withStyle)('container')

package/dist/src/shared/__pages__/ExtraProductsPage.js

@@ -10,17 +10,17 @@ var _constants__ = require("../__constants__");
 var _BottomNavigationBar = _interopRequireDefault(require("../__containers__/BottomNavigationBar"));
 var _ExtraProductsOverview = _interopRequireDefault(require("../__containers__/ExtraProductsOverview"));
 var _VehicleData = _interopRequireDefault(require("../__containers__/VehicleData"));
-var _FormulaContext = require("../__context__/FormulaContext");
 var _helpers__ = require("../__helpers__");
+var _useBranchTheme = require("../__hooks__/useBranchTheme");
 function _interopRequireDefault(e) {
   return e && e.__esModule ? e : {
     default: e
   };
 }
 const ExtraProductsPage = () => {
-  const formula = (0, _FormulaContext.useFormula)();
+  const themeClass = (0, _helpers__.getConfiguratorThemeClass)((0, _useBranchTheme.useBranchTheme)());
   return /*#__PURE__*/_react.default.createElement("section", {
-    className: (0, _helpers__.withStyle)("thm-configurator-wrapper ".concat(formula === _constants__.CONFIGURATOR_FORMULAS.THC ? 'thc' : ''))
+    className: (0, _helpers__.withStyle)("thm-configurator-wrapper ".concat(themeClass))
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _helpers__.withStyle)('container page-content')
   }, /*#__PURE__*/_react.default.createElement("div", {

package/dist/src/shared/__pages__/LicensePlatePage.js

@@ -11,6 +11,9 @@ require("core-js/modules/web.dom-collections.iterator.js");
 var _react = _interopRequireWildcard(require("react"));
 var _reactRouter = require("react-router");
 var _logoPrimaryIcon = _interopRequireDefault(require("../../../public/assets/images/logo-primary-icon.svg"));
+var _logoThcWhite = _interopRequireDefault(require("../../../public/assets/images/logo-thc-white.svg"));
+var _logoTmgPrimary = _interopRequireDefault(require("../../../public/assets/images/logo-tmg-primary.png"));
+var _tmLogo = _interopRequireDefault(require("../../../public/assets/images/tm-logo.png"));
 var _queries = require("../__api__/queries");
 var _Card = _interopRequireDefault(require("../__components__/Cards/Card"));
 var _FormSteps = _interopRequireDefault(require("../__components__/Form/FormSteps"));
@@ -18,9 +21,9 @@ var _TextSpinner = _interopRequireDefault(require("../__components__/Spinners/Te
 var _constants__ = require("../__constants__");
 var _LicensePlateForm = _interopRequireDefault(require("../__containers__/LicensePlateForm"));
 var _QuestionsForm = _interopRequireDefault(require("../__containers__/QuestionsForm"));
-var _FormulaContext = require("../__context__/FormulaContext");
 var _OrderSessionContext = require("../__context__/OrderSessionContext");
 var _helpers__ = require("../__helpers__");
+var _useBranchTheme = require("../__hooks__/useBranchTheme");
 var _useSearchParam = _interopRequireDefault(require("../__hooks__/useSearchParam"));
 var _LicensePlateValidator = _interopRequireDefault(require("../__services__/LicensePlateValidator"));
 function _interopRequireDefault(e) {
@@ -71,8 +74,8 @@ const getSteps = _ref => {
 const licensePlateValidator = new _LicensePlateValidator.default();
 const LicensePlatePage = () => {
   const [activeStep, setActiveStep] = (0, _react.useState)(0);
-  const [orderSession, dispatch] = (0, _OrderSessionContext.useOrderSession)();
-  const formula = (0, _FormulaContext.useFormula)();
+  const [, dispatch] = (0, _OrderSessionContext.useOrderSession)();
+  const themeClass = (0, _helpers__.getConfiguratorThemeClass)((0, _useBranchTheme.useBranchTheme)());
   const [licensePlateURL, widgetOrEntityId, discountCode, franchiseName, notFound, vestigingRecId] = (0, _useSearchParam.default)(['licensePlate', 'branch', 'discountCode', 'naamKeten', 'notFound', 'vestigingRecId']);
   const branchIdOrVestigingRecId = widgetOrEntityId || vestigingRecId;
   const {
@@ -147,10 +150,10 @@ const LicensePlatePage = () => {
     onSubmit: handleSubmit
   }), []);
   return /*#__PURE__*/_react.default.createElement("section", {
-    className: (0, _helpers__.withStyle)("thm-configurator-wrapper thm-configurator-home ".concat(formula === _constants__.CONFIGURATOR_FORMULAS.THC ? 'thc' : ''))
+    className: (0, _helpers__.withStyle)("thm-configurator-wrapper thm-configurator-home ".concat(themeClass))
   }, /*#__PURE__*/_react.default.createElement("img", {
     className: (0, _helpers__.withStyle)("thm-configurator-home__logo img-fluid d-block"),
-    src: _logoPrimaryIcon.default,
+    src: themeClass === _constants__.BRANCH_THEME_BY_FORMULA.TowMotive ? _tmLogo.default : themeClass === _constants__.BRANCH_THEME_BY_FORMULA.Trekhaakcentrum ? _logoThcWhite.default : themeClass === _constants__.BRANCH_THEME_BY_FORMULA.TowMotiveGroup ? _logoTmgPrimary.default : _logoPrimaryIcon.default,
     alt: "Trekhaakmontage"
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _helpers__.withStyle)('container')