thm-p3-configurator 0.0.249 → 0.0.250

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

@@ -7,9 +7,10 @@ exports.default = void 0;
 var _react = _interopRequireDefault(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 _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
@@ -20,7 +21,7 @@ const Header = _ref => {
     title,
     subtitle = ''
   } = _ref;
-  const formula = (0, _FormulaContext.useFormula)();
+  const theme = (0, _useBranchTheme.useBranchTheme)();
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _helpers__.withStyle)("hero hero--offset")
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -30,8 +31,8 @@ const Header = _ref => {
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _helpers__.withStyle)('col hero__logo-container')
   }, /*#__PURE__*/_react.default.createElement("img", {
-    className: (0, _helpers__.withStyle)('hero__logo'),
-    src: formula === _constants__.CONFIGURATOR_FORMULAS.THC ? _logoThcWhite.default : _logoPrimaryIcon.default,
+    className: (0, _helpers__.withStyle)("hero__logo ".concat(theme === _constants__.BRANCH_THEME_BY_FORMULA.TowMotiveGroup ? 'hero__logo--tmg' : '')),
+    src: 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

@@ -6,10 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _logoThcWhite = _interopRequireDefault(require("../../../public/assets/images/logo-thc-white.svg"));
+var _logoTmgPrimary = _interopRequireDefault(require("../../../public/assets/images/logo-tmg-primary.png"));
 var _logoWhite = _interopRequireDefault(require("../../../public/assets/images/logo-white.svg"));
 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
@@ -19,9 +20,9 @@ const Navbar = _ref => {
   let {
     onPhoneClicked
   } = _ref;
-  const formula = (0, _FormulaContext.useFormula)();
+  const theme = (0, _useBranchTheme.useBranchTheme)();
   return /*#__PURE__*/_react.default.createElement("nav", {
-    className: (0, _helpers__.withStyle)("navbar fixed-top ".concat(formula === _constants__.CONFIGURATOR_FORMULAS.THC ? 'thc' : ''))
+    className: (0, _helpers__.withStyle)("navbar fixed-top ".concat(theme === _constants__.BRANCH_THEME_BY_FORMULA.Trekhaakcentrum ? 'thc' : theme === _constants__.BRANCH_THEME_BY_FORMULA.TowMotiveGroup ? 'tmg' : ''))
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _helpers__.withStyle)('container-fluid')
   }, /*#__PURE__*/_react.default.createElement("a", {
@@ -29,7 +30,7 @@ const Navbar = _ref => {
     href: APP_CONFIG.websiteHost
   }, /*#__PURE__*/_react.default.createElement("img", {
     className: (0, _helpers__.withStyle)('img-fluid'),
-    src: formula === _constants__.CONFIGURATOR_FORMULAS.THC ? _logoThcWhite.default : _logoWhite.default,
+    src: 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

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _constants__ = require("../../__constants__");
-var _FormulaContext = require("../../__context__/FormulaContext");
+var _useBranchTheme = require("../../__hooks__/useBranchTheme");
 var _helpers__ = require("../../__helpers__");
 function _interopRequireDefault(e) {
   return e && e.__esModule ? e : {
@@ -19,7 +19,7 @@ const ProductCardCheckbox = _ref => {
     isDisabled,
     id
   } = _ref;
-  const formula = (0, _FormulaContext.useFormula)();
+  const theme = (0, _useBranchTheme.useBranchTheme)();
   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(formula === _constants__.CONFIGURATOR_FORMULAS.THC ? 'btn-outline-custom-primary' : 'btn-outline-primary', " ")),
+    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', " ")),
     htmlFor: "btn-check-".concat(id),
     disabled: isDisabled
   }, defaultChecked ? 'Geselecteerd' : 'Selecteer'));

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

@@ -166,7 +166,8 @@ const ProductCard = _ref => {
   }, isTmg ? "".concat((_stock$quantity2 = stock === null || stock === void 0 ? void 0 : stock.quantity) !== null && _stock$quantity2 !== void 0 ? _stock$quantity2 : 0, " op voorraad") : 'Op voorraad')), hasCheckbox && /*#__PURE__*/_react.default.createElement(_ProductCardCheckbox.default, {
     id: productId,
     isDisabled: isDisabled,
-    defaultChecked: isSelected
+    defaultChecked: isSelected,
+    isTmg: isTmg
   })))))));
 };
 var _default = exports.default = ProductCard;

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

@@ -10,10 +10,11 @@ exports.default = void 0;
 require("core-js/modules/web.dom-collections.iterator.js");
 var _react = _interopRequireWildcard(require("react"));
 var _logoThcWhite = _interopRequireDefault(require("../../../../public/assets/images/logo-thc-white.svg"));
+var _logoTmgPrimary = _interopRequireDefault(require("../../../../public/assets/images/logo-tmg-primary.png"));
 var _logoWhite = _interopRequireDefault(require("../../../../public/assets/images/logo-white.png"));
 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,12 +50,12 @@ const FullPageSpinner = _ref => {
     children
   } = _ref;
   const [hasRendered, setHasRendered] = (0, _react.useState)();
-  const formula = (0, _FormulaContext.useFormula)();
+  const theme = (0, _useBranchTheme.useBranchTheme)();
   (0, _react.useEffect)(() => {
     setHasRendered(true);
   }, []);
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _helpers__.withStyle)("loader ".concat(formula === _constants__.CONFIGURATOR_FORMULAS.THC ? 'thc' : ''))
+    className: (0, _helpers__.withStyle)("loader ".concat(theme === _constants__.BRANCH_THEME_BY_FORMULA.Trekhaakcentrum ? 'thc' : theme === _constants__.BRANCH_THEME_BY_FORMULA.TowMotiveGroup ? 'tmg' : ''))
   }, hasRendered !== true ? /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement("i", {
     className: (0, _helpers__.withStyle)('loader__icon')
   })) : /*#__PURE__*/_react.default.createElement("span", {
@@ -63,7 +64,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.THC ? _logoThcWhite.default : _logoWhite.default,
+    src: 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/__containers__/StyleWrapper.js

@@ -11,8 +11,8 @@ require("core-js/modules/web.dom-collections.iterator.js");
 var _react = _interopRequireWildcard(require("react"));
 var _reactRouter = require("react-router");
 var _constants__ = require("../__constants__");
-var _FormulaContext = require("../__context__/FormulaContext");
 var _helpers__ = require("../__helpers__");
+var _useBranchTheme = require("../__hooks__/useBranchTheme");
 function _getRequireWildcardCache(e) {
   if ("function" != typeof WeakMap) return null;
   var r = new WeakMap(),
@@ -43,7 +43,7 @@ const StyleWrapper = _ref => {
     children
   } = _ref;
   const [height, setHeight] = _react.default.useState({});
-  const formula = (0, _FormulaContext.useFormula)();
+  const theme = (0, _useBranchTheme.useBranchTheme)();
   (0, _react.useLayoutEffect)(() => {
     window.addEventListener('resize', handleResize);
     handleResize();
@@ -68,7 +68,7 @@ const StyleWrapper = _ref => {
     }
   };
   return /*#__PURE__*/_react.default.createElement("main", {
-    className: (0, _helpers__.withStyle)("thm-configurator ".concat(APP_CONFIG.internal ? 'thm-configurator--offset' : '', " ").concat(formula === _constants__.CONFIGURATOR_FORMULAS.THC ? 'thc' : '')),
+    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);
 };

package/dist/src/shared/__pages__/internal/InternalLicensePlatePage.js

@@ -20,6 +20,7 @@ var _QuestionsForm = _interopRequireDefault(require("../../__containers__/Questi
 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) {
@@ -73,6 +74,7 @@ const InternalLicensePlatePage = () => {
   const [session, dispatch] = (0, _OrderSessionContext.useOrderSession)();
   const originalLicensePlate = (0, _react.useRef)();
   const formula = (0, _FormulaContext.useFormula)();
+  const theme = (0, _useBranchTheme.useBranchTheme)();
   const [licensePlateURL, discountCode, persistSession, notFound] = (0, _useSearchParam.default)(['licensePlate', 'discountCode', 'persistSession', 'notFound']);
   const history = (0, _reactRouter.useHistory)();
   (0, _queries.useProductFieldLabels)(); // Prefetch
@@ -124,7 +126,7 @@ const InternalLicensePlatePage = () => {
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _helpers__.withStyle)('vh-100')
   }, /*#__PURE__*/_react.default.createElement(_internal.InternalCancelDossierEdit, null), /*#__PURE__*/_react.default.createElement("section", {
-    className: (0, _helpers__.withStyle)("thm-configurator-wrapper thm-configurator-home thm-configurator-wrapper--offset ".concat(formula === _constants__.CONFIGURATOR_FORMULAS.THC ? 'thc' : ''))
+    className: (0, _helpers__.withStyle)("thm-configurator-wrapper thm-configurator-home thm-configurator-wrapper--offset ".concat(theme === _constants__.BRANCH_THEME_BY_FORMULA.Trekhaakcentrum ? 'thc' : theme === _constants__.BRANCH_THEME_BY_FORMULA.TowMotiveGroup ? 'tmg' : ''))
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _helpers__.withStyle)('container')
   }, /*#__PURE__*/_react.default.createElement("div", {

package/dist/src/shared/__pages__/internal/InternalManualSelectionPage.js

@@ -18,6 +18,7 @@ var _internal = require("../../__containers__/internal");
 var _ManualSelectionForm = _interopRequireDefault(require("../../__containers__/ManualSelectionForm"));
 var _QuestionsForm = _interopRequireDefault(require("../../__containers__/QuestionsForm"));
 var _FormulaContext = require("../../__context__/FormulaContext");
+var _useBranchTheme = require("../../__hooks__/useBranchTheme");
 var _OrderSessionContext = require("../../__context__/OrderSessionContext");
 var _helpers__ = require("../../__helpers__");
 var _useSearchParam = _interopRequireDefault(require("../../__hooks__/useSearchParam"));
@@ -81,6 +82,7 @@ const InternalManualSelectionPage = _ref2 => {
   const originalVehicle = (0, _react.useRef)();
   const history = (0, _reactRouter.useHistory)();
   const formula = (0, _FormulaContext.useFormula)();
+  const theme = (0, _useBranchTheme.useBranchTheme)();
   const [discountCode, persistSession] = (0, _useSearchParam.default)(['discountCode', 'persistSession']);
   (0, _queries.useProductFieldLabels)(); // Prefetch
 
@@ -135,7 +137,7 @@ const InternalManualSelectionPage = _ref2 => {
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _helpers__.withStyle)('vh-100')
   }, /*#__PURE__*/_react.default.createElement(_internal.InternalCancelDossierEdit, null), /*#__PURE__*/_react.default.createElement("section", {
-    className: (0, _helpers__.withStyle)("thm-configurator-wrapper thm-configurator-home thm-configurator-wrapper--offset ".concat(formula === _constants__.CONFIGURATOR_FORMULAS.THC ? 'thc' : '', " "))
+    className: (0, _helpers__.withStyle)("thm-configurator-wrapper thm-configurator-home thm-configurator-wrapper--offset ".concat(theme === _constants__.BRANCH_THEME_BY_FORMULA.Trekhaakcentrum ? 'thc' : theme === _constants__.BRANCH_THEME_BY_FORMULA.TowMotiveGroup ? 'tmg' : '', " "))
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _helpers__.withStyle)('container')
   }, /*#__PURE__*/_react.default.createElement("div", {

package/dist/src/shared/__pages__/internal/InternalNoProductsPage.js

@@ -16,6 +16,7 @@ var _constants__ = require("../../__constants__");
 var _internal = require("../../__containers__/internal");
 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 +50,7 @@ function _interopRequireWildcard(e, r) {
 const InternalNoProductsPage = () => {
   const mailLinkRef = (0, _react.useRef)(null);
   const formula = (0, _FormulaContext.useFormula)();
+  const theme = (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) {
@@ -58,7 +60,7 @@ const InternalNoProductsPage = () => {
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _helpers__.withStyle)('vh-100')
   }, /*#__PURE__*/_react.default.createElement(_internal.InternalCancelDossierEdit, null), /*#__PURE__*/_react.default.createElement("section", {
-    className: (0, _helpers__.withStyle)("thm-configurator-wrapper thm-configurator-home thm-configurator-wrapper--offset ".concat(formula === _constants__.CONFIGURATOR_FORMULAS.THC ? 'thc' : ''))
+    className: (0, _helpers__.withStyle)("thm-configurator-wrapper thm-configurator-home thm-configurator-wrapper--offset ".concat(theme === _constants__.BRANCH_THEME_BY_FORMULA.Trekhaakcentrum ? 'thc' : theme === _constants__.BRANCH_THEME_BY_FORMULA.TowMotiveGroup ? 'tmg' : ''))
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _helpers__.withStyle)('container')
   }, /*#__PURE__*/_react.default.createElement("div", {

package/dist/src/shared/__pages__/internal/__TEST_ONLY_INTERNAL_ROUTES.js

@@ -10,7 +10,6 @@ var _react = _interopRequireDefault(require("react"));
 var _reactRouterDom = require("react-router-dom");
 var _ = require(".");
 var _internal = require("../../__containers__/internal");
-var _NoProductsPage = _interopRequireDefault(require("../NoProductsPage"));
 var _NotFoundPage = _interopRequireDefault(require("../NotFoundPage"));
 var _QuotationThanksPage = _interopRequireDefault(require("../QuotationThanksPage"));
 function _interopRequireDefault(e) {
@@ -39,7 +38,7 @@ const TEST_ONLY_INTERNAL_ROUTES = () => {
   }), /*#__PURE__*/_react.default.createElement(_reactRouterDom.Route, {
     exact: true,
     path: "/configurator/geen-producten",
-    render: props => /*#__PURE__*/_react.default.createElement(_NoProductsPage.default, props)
+    render: props => /*#__PURE__*/_react.default.createElement(_.InternalNoProductsPage, props)
   }), /*#__PURE__*/_react.default.createElement(_reactRouterDom.Route, {
     exact: true,
     path: "/configurator/montagelocatie",

package/dist/src/shared/__style__/_variables-external.scss

@@ -17,6 +17,9 @@ $primary: #213a7a;
 $secondary: #0f1223;
 $custom-secondary: #f8be2c87;
 $custom-primary: #f8bd2c;
+// TMG theme colors
+$tmg-primary: #000;
+$tmg-secondary: #41bbca;
 $success: $green;
 $info: $cyan;
 $warning: $yellow;
@@ -36,6 +39,8 @@ $theme-colors: (
   'primary-light': $primary-light,
   'custom-primary': $custom-primary,
   'custom-secondary': $custom-secondary,
+  'tmg-primary': $tmg-primary,
+  'tmg-secondary': $tmg-secondary,
   'secondary': $secondary,
   'success': $success,
   'info': $info,

package/dist/src/shared/__style__/_variables.scss

@@ -17,6 +17,9 @@ $primary: #213a7a;
 $secondary: #0f1223;
 $custom-secondary: #f8be2c87;
 $custom-primary: #f8bd2c;
+// TMG theme colors
+$tmg-primary: #41bbca;
+$tmg-secondary: #0d282c;
 $success: $green;
 $info: $cyan;
 $warning: $yellow;
@@ -36,6 +39,8 @@ $theme-colors: (
   'primary-light': $primary-light,
   'custom-primary': $custom-primary,
   'custom-secondary': $custom-secondary,
+  'tmg-primary': $tmg-primary,
+  'tmg-secondary': $tmg-secondary,
   'secondary': $secondary,
   'success': $success,
   'info': $info,

package/dist/src/shared/__style__/components/_loader.scss

@@ -22,3 +22,8 @@ Loader
 .loader__logo {
   @extend .mt-2;
 }
+
+.tmg .loader__logo {
+  max-width: 150px;
+  max-height: 150px;
+}

package/dist/src/shared/__style__/components/_navbar.scss

@@ -7,6 +7,10 @@ Navbar
   &.thc {
     @extend .bg-custom-primary;
   }
+
+  &.tmg {
+    @extend .bg-tmg-secondary;
+  }
   height: $navbar-height;
   z-index: $zindex-fixed;
 }
@@ -20,6 +24,14 @@ Navbar Brand
   }
 }
 
+.navbar.tmg .navbar-brand {
+  img {
+    max-width: 120px;
+    max-height: 40px;
+    width: auto;
+  }
+}
+
 /* ==========================================================================
 Navbar Phone
 ========================================================================== */

package/dist/src/shared/__style__/components/hero/_hero.scss

@@ -34,6 +34,17 @@ Hero Logo
   @include media-breakpoint-up(lg) {
     max-height: none;
   }
+
+  &--tmg {
+    height: auto;
+    max-height: 60px;
+    top: 50%;
+    transform: translateY(-50%);
+
+    @include media-breakpoint-up(lg) {
+      max-height: 80px;
+    }
+  }
 }
 
 /* ==========================================================================

package/dist/src/shared/__style__/configurator/_configurator.scss

@@ -21,6 +21,16 @@ Configurator
       @extend .bg-custom-primary;
     }
   }
+
+  &.tmg {
+    .loader {
+      @extend .bg-tmg-primary;
+    }
+
+    .hero {
+      @extend .bg-tmg-primary;
+    }
+  }
 }
 
 /* ==========================================================================
@@ -36,6 +46,111 @@ Configurator Wrapper
       border-color: $custom-primary !important;
     }
   }
+
+  &.tmg {
+    .btn-primary {
+      @extend .bg-tmg-primary;
+
+      border-color: $tmg-primary !important;
+    }
+  }
+}
+
+/* ==========================================================================
+Configurator TMG theme
+========================================================================== */
+.thm-configurator {
+  &.tmg {
+    .btn-primary {
+      @extend .bg-tmg-primary;
+
+      border-color: $tmg-primary !important;
+    }
+
+    .btn-outline-theme-primary {
+      border-color: $tmg-primary;
+      color: $tmg-primary;
+
+      &:hover {
+        background-color: $tmg-primary;
+        color: white;
+      }
+    }
+
+    .form-dots__item {
+      &.active {
+        background-color: $tmg-primary;
+      }
+    }
+
+    .card-footer {
+      .btn-check {
+        border-color: $tmg-primary;
+      }
+    }
+
+    .form__radio-item {
+      &:hover {
+        @extend .bg-tmg-secondary;
+      }
+    }
+
+    .list-check {
+      li {
+        &.info {
+          &::before {
+            background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='17.733' height='17.092' viewBox='0 0 17.733 17.092'><g id='i' transform='translate(-0.002 0.001)'><path id='Path_202' data-name='Path 202' d='M17.735,10.316l-.026-.076a1.689,1.689,0,0,0-.052-.357L15.393,2.772A1.41,1.41,0,0,0,14.326,1.8L6.936.044A1.485,1.485,0,0,0,5.505.452L.405,5.779A1.439,1.439,0,0,0,.067,7.206l2.264,7.112a1.41,1.41,0,0,0,1.067.969l7.39,1.759a1.485,1.485,0,0,0,1.431-.408l5.1-5.327a1.623,1.623,0,0,0,.416-.994Z' fill='#{$tmg-primary}'/><line id='Line_1' data-name='Line 1' y2='5' transform='translate(8.868 7.045)' fill='none' stroke='#fff' stroke-linecap='round' stroke-width='1.5'/><line id='Line_3' data-name='Line 3' transform='translate(8.868 5.045)' fill='none' stroke='#fff' stroke-linecap='round' stroke-width='1.5'/></g></svg>") !important;
+          }
+        }
+      }
+    }
+
+    .form-check--sm {
+      @extend .text-tmg-primary;
+
+      @include font-size($font-size-sm);
+    }
+
+    .form-check {
+      @include font-size($font-size-base);
+      color: $tmg-primary;
+    }
+
+    .dealer-item {
+      &.active {
+        border: 1px solid $tmg-primary;
+      }
+    }
+
+    .form__radio-default-item {
+      span {
+        &::after {
+          background-color: $tmg-primary;
+        }
+
+        &::before {
+          border: 1px solid $tmg-primary;
+        }
+      }
+    }
+
+    .steps {
+      .btn {
+        &.active {
+          @extend .bg-tmg-primary;
+        }
+      }
+    }
+
+    .card__link {
+      cursor: pointer;
+
+      &.card__horizontal.active,
+      &.card__horizontal:hover {
+        border-color: $tmg-primary !important;
+      }
+    }
+  }
 }
 
 /* ==========================================================================
@@ -53,6 +168,14 @@ Configurator Home
       .justify-content-center,
       .pb-0;
   }
+
+  &.tmg {
+    @extend .bg-tmg-primary,
+      .d-flex,
+      .flex-column,
+      .justify-content-center,
+      .pb-0;
+  }
 }
 
 /* ==========================================================================

package/package.json

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