thm-p3-configurator 0.0.333 → 0.0.334

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/__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')

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

@@ -9,17 +9,17 @@ var _LocationsSelector = _interopRequireDefault(require("../__components__/Locat
 var _NavigationSteps = _interopRequireDefault(require("../__components__/NavigationSteps"));
 var _constants__ = require("../__constants__");
 var _BottomNavigationBar = _interopRequireDefault(require("../__containers__/BottomNavigationBar"));
-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 LocationPage = () => {
-  const formula = (0, _FormulaContext.useFormula)();
+  const themeClass = (0, _helpers__.getConfiguratorThemeClass)((0, _useBranchTheme.useBranchTheme)());
   return /*#__PURE__*/_react.default.createElement("section", {
-    className: "".concat((0, _helpers__.withStyle)("thm-configurator-wrapper ".concat(formula === _constants__.CONFIGURATOR_FORMULAS.THC ? 'thc' : '')))
+    className: "".concat((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__/ManualSelectionPage.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 _ManualSelectionForm = _interopRequireDefault(require("../__containers__/ManualSelectionForm"));
 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"));
 function _interopRequireDefault(e) {
   return e && e.__esModule ? e : {
@@ -66,10 +69,10 @@ const getSteps = _ref => {
   })];
 };
 const ManualSelectionPage = () => {
-  const [orderSession, dispatch] = (0, _OrderSessionContext.useOrderSession)();
+  const [, dispatch] = (0, _OrderSessionContext.useOrderSession)();
   const [activeStep, setActiveStep] = (0, _react.useState)(0);
   const history = (0, _reactRouter.useHistory)();
-  const formula = (0, _FormulaContext.useFormula)();
+  const themeClass = (0, _helpers__.getConfiguratorThemeClass)((0, _useBranchTheme.useBranchTheme)());
   const [widgetOrEntityId, discountCode, franchiseName] = (0, _useSearchParam.default)(['vestigingRecId', 'discountCode', 'naamKeten']);
   const {
     branchById,
@@ -131,10 +134,10 @@ const ManualSelectionPage = () => {
     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')

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

@@ -10,12 +10,16 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 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 _NavigationButton = _interopRequireDefault(require("../__components__/Buttons/NavigationButton"));
 var _PrimaryButton = _interopRequireDefault(require("../__components__/Buttons/PrimaryButton"));
 var _CardWide = _interopRequireDefault(require("../__components__/Cards/CardWide"));
 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
@@ -49,6 +53,7 @@ function _interopRequireWildcard(e, r) {
 const NoProductsPage = () => {
   const mailLinkRef = (0, _react.useRef)(null);
   const formula = (0, _FormulaContext.useFormula)();
+  const themeClass = (0, _helpers__.getConfiguratorThemeClass)((0, _useBranchTheme.useBranchTheme)());
   const contactDetails = _constants__.NO_PRODUCTS_CONTACT_DETAILS_BY_FORMULA[formula] || _constants__.NO_PRODUCTS_CONTACT_DETAILS_BY_FORMULA[_constants__.CONFIGURATOR_FORMULAS.THM];
   const handleClick = () => {
     if (mailLinkRef.current) {
@@ -56,10 +61,10 @@ const NoProductsPage = () => {
     }
   };
   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'),
-    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: contactDetails.logoAltText
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _helpers__.withStyle)('container')

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

@@ -13,17 +13,17 @@ var _BottomNavigationBar = _interopRequireDefault(require("../__containers__/Bot
 var _ExitIntentModal = _interopRequireDefault(require("../__containers__/ExitIntentModal"));
 var _ProductDiscountCard = _interopRequireDefault(require("../__containers__/ProductDiscountCard"));
 var _ProductsCartOverview = _interopRequireDefault(require("../__containers__/ProductsCartOverview"));
-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 OverviewPage = () => {
-  const formula = (0, _FormulaContext.useFormula)();
+  const themeClass = (0, _helpers__.getConfiguratorThemeClass)((0, _useBranchTheme.useBranchTheme)());
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__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__/ProductsPage.js

@@ -11,19 +11,19 @@ var _constants__ = require("../__constants__");
 var _BottomNavigationBar = _interopRequireDefault(require("../__containers__/BottomNavigationBar"));
 var _ProductsOverview = _interopRequireDefault(require("../__containers__/ProductsOverview"));
 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 ProductsPage = () => {
-  const formula = (0, _FormulaContext.useFormula)();
+  const themeClass = (0, _helpers__.getConfiguratorThemeClass)((0, _useBranchTheme.useBranchTheme)());
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _helpers__.withStyle)('vh-100')
   }, /*#__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", {