thm-p3-configurator 0.0.273 → 0.0.274

package/dist/src/shared/App.js

@@ -75,6 +75,6 @@ const App = () => {
     defaultCountry: APP_CONFIG.country
   }, /*#__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), APP_CONFIG.nodeEnv === 'development' && APP_CONFIG.internal === true && /*#__PURE__*/_react.default.createElement(_TEST_ONLY_INTERNAL_ROUTES.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/__components__/Spinners/InlineSpinner.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _helpers__ = require("../../__helpers__");
+function _interopRequireDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+const InlineSpinner = _ref => {
+  let {
+    size = '1rem',
+    color = 'primary'
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("i", {
+    className: "fas fa-cog fa-spin ".concat((0, _helpers__.withStyle)("text-".concat(color))),
+    style: {
+      fontSize: size
+    }
+  });
+};
+var _default = exports.default = InlineSpinner;

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

@@ -19,7 +19,7 @@ var _reactRouter = require("react-router");
 var _logoPrimary = _interopRequireDefault(require("../../../public/assets/images/logo-primary.png"));
 var _queries = require("../__api__/queries");
 var _ProductCard = _interopRequireDefault(require("../__components__/ProductCard"));
-var _FullPageSpinner = _interopRequireDefault(require("../__components__/Spinners/FullPageSpinner"));
+var _InlineSpinner = _interopRequireDefault(require("../__components__/Spinners/InlineSpinner"));
 var _constants__ = require("../__constants__");
 var _FormulaContext = require("../__context__/FormulaContext");
 var _OrderSessionContext = require("../__context__/OrderSessionContext");
@@ -60,7 +60,6 @@ function _interopRequireWildcard(e, r) {
 }
 const ExtraProductsOverview = () => {
   var _products$Extras;
-  const isProductsInitialLoad = (0, _react.useRef)(true);
   const formula = (0, _FormulaContext.useFormula)();
   const isTmg = (0, _useIsTmg.useIsTmg)();
   const [skipFilters, setSkipFilters] = (0, _react.useState)(false);
@@ -104,10 +103,6 @@ const ExtraProductsOverview = () => {
     discountCode,
     skipFilters
   });
-  if (isLoadingProducts && isProductsInitialLoad.current === true) {
-    isProductsInitialLoad.current = false;
-    return /*#__PURE__*/_react.default.createElement(_FullPageSpinner.default, null);
-  }
   if (isProductsError || !isLoadingProducts && !(products !== null && products !== void 0 && (_products$Extras = products.Extras) !== null && _products$Extras !== void 0 && _products$Extras.length)) {
     return /*#__PURE__*/_react.default.createElement(_reactRouter.Redirect, {
       to: "/configurator/geen-producten"
@@ -142,7 +137,13 @@ const ExtraProductsOverview = () => {
   delete products[_constants__.PRODUCT_CATEGORIES.CABLESET];
   delete products[_constants__.PRODUCT_CATEGORIES.COMBISET];
   delete products[_constants__.PRODUCT_CATEGORIES.BOARD_COMPUTER];
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, Object.entries(products).map((_ref2, index) => {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isLoadingProducts ? /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _helpers__.withStyle)('d-flex justify-content-center align-items-center py-5')
+  }, /*#__PURE__*/_react.default.createElement(_InlineSpinner.default, {
+    size: "2rem"
+  }), /*#__PURE__*/_react.default.createElement("span", {
+    className: (0, _helpers__.withStyle)('ms-3')
+  }, "Extra producten laden...")) : Object.entries(products).map((_ref2, index) => {
     let [productCategory, productsPerCategory] = _ref2;
     if (!productsPerCategory.length || productCategory !== _constants__.PRODUCT_CATEGORIES.EXTRAS) {
       return null;

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

@@ -37,7 +37,7 @@ var _ProductTableSection = _interopRequireDefault(require("../__components__/Pro
 var _ProductTableSectionTotal = _interopRequireDefault(require("../__components__/ProductTable/ProductTableSectionTotal"));
 var _ProductTableStaticRow = _interopRequireDefault(require("../__components__/ProductTable/ProductTableStaticRow"));
 var _ProductTableTotal = _interopRequireDefault(require("../__components__/ProductTable/ProductTableTotal"));
-var _FullPageSpinner = _interopRequireDefault(require("../__components__/Spinners/FullPageSpinner"));
+var _InlineSpinner = _interopRequireDefault(require("../__components__/Spinners/InlineSpinner"));
 var _FormulaContext = require("../__context__/FormulaContext");
 var _OrderSessionContext = require("../__context__/OrderSessionContext");
 var _helpers__ = require("../__helpers__");
@@ -141,9 +141,6 @@ const ProductCartSide = () => {
     mainProducts = [towbar, combiset, cableset, boardComputer].filter(Boolean);
     accessoireProducts = extras.length > 0 && ((_products$Extras = products.Extras) === null || _products$Extras === void 0 ? void 0 : _products$Extras.filter(product => extras.includes(product.articleNumber.toString()))) || [];
   }
-  if (isLoadingProducts) {
-    return /*#__PURE__*/_react.default.createElement(_FullPageSpinner.default, null);
-  }
 
   /**
    * Calculate item prices from a cart item
@@ -181,7 +178,13 @@ const ProductCartSide = () => {
   const montageInclVat = parseFloat(totals === null || totals === void 0 ? void 0 : totals.montagePricePlusMarketCorrectionInclVat) || 0;
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _helpers__.withStyle)("col-lg mt-3")
-  }, /*#__PURE__*/_react.default.createElement(_TogglableCard.default, {
+  }, isLoadingProducts ? /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _helpers__.withStyle)('d-flex justify-content-center align-items-center py-5')
+  }, /*#__PURE__*/_react.default.createElement(_InlineSpinner.default, {
+    size: "2rem"
+  }), /*#__PURE__*/_react.default.createElement("span", {
+    className: (0, _helpers__.withStyle)('ms-3')
+  }, "Overzicht laden...")) : /*#__PURE__*/_react.default.createElement(_TogglableCard.default, {
     title: 'Overzicht',
     untoggleButton: selectedBranch ? 'Verberg inkoopprijzen' : undefined,
     toggleButton: selectedBranch ? 'Toon inkoopprijzen' : undefined,

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

@@ -53,7 +53,7 @@ var _ProductTableSection = _interopRequireDefault(require("../__components__/Pro
 var _ProductTableSectionTotal = _interopRequireDefault(require("../__components__/ProductTable/ProductTableSectionTotal"));
 var _ProductTableStaticRow = _interopRequireDefault(require("../__components__/ProductTable/ProductTableStaticRow"));
 var _ProductTableTotal = _interopRequireDefault(require("../__components__/ProductTable/ProductTableTotal"));
-var _FullPageSpinner = _interopRequireDefault(require("../__components__/Spinners/FullPageSpinner"));
+var _InlineSpinner = _interopRequireDefault(require("../__components__/Spinners/InlineSpinner"));
 var _constants__ = require("../__constants__");
 var _cartTable = require("../__constants__/cartTable");
 var _FormulaContext = require("../__context__/FormulaContext");
@@ -569,9 +569,6 @@ const ProductCartTable = () => {
   // RENDER
   // ============================================================================
 
-  if (isLoadingProducts) {
-    return /*#__PURE__*/_react.default.createElement(_FullPageSpinner.default, null);
-  }
   const showCatalogPrice = !isThc;
   const headerColumns = (0, _cartTable2.getCartTableHeaderColumns)(displayMode, showCatalogPrice);
   const montageRateInputCell = isThc ? {} : {
@@ -587,7 +584,13 @@ const ProductCartTable = () => {
   } : {} : {};
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _helpers__.withStyle)('content col-lg')
-  }, /*#__PURE__*/_react.default.createElement(_TogglableCard.default, {
+  }, isLoadingProducts ? /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _helpers__.withStyle)('d-flex justify-content-center align-items-center py-5')
+  }, /*#__PURE__*/_react.default.createElement(_InlineSpinner.default, {
+    size: "2rem"
+  }), /*#__PURE__*/_react.default.createElement("span", {
+    className: (0, _helpers__.withStyle)('ms-3')
+  }, "Overzicht laden...")) : /*#__PURE__*/_react.default.createElement(_TogglableCard.default, {
     title: "Overzicht",
     untoggleButton: selectedBranch || isTmg ? 'Verberg inkoopprijzen' : undefined,
     toggleButton: selectedBranch || isTmg ? 'Toon inkoopprijzen' : undefined,

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

@@ -26,7 +26,7 @@ var _logoPrimary = _interopRequireDefault(require("../../../public/assets/images
 var _queries = require("../__api__/queries");
 var _CheckboxInput = _interopRequireDefault(require("../__components__/Form/CheckboxInput"));
 var _ProductCard = _interopRequireDefault(require("../__components__/ProductCard"));
-var _FullPageSpinner = _interopRequireDefault(require("../__components__/Spinners/FullPageSpinner"));
+var _InlineSpinner = _interopRequireDefault(require("../__components__/Spinners/InlineSpinner"));
 var _constants__ = require("../__constants__");
 var _FormulaContext = require("../__context__/FormulaContext");
 var _OrderSessionContext = require("../__context__/OrderSessionContext");
@@ -181,10 +181,6 @@ const ProductsOverview = () => {
       });
     }
   }, [isLoadingProducts, products, selectedTowbar, selectedCableset, selectedBoardComputer, isBoardComputerDeselected, dispatch]);
-  if (isLoadingProducts && isProductsInitialLoad.current === true) {
-    isProductsInitialLoad.current = false;
-    return /*#__PURE__*/_react.default.createElement(_FullPageSpinner.default, null);
-  }
   if (isProductsError || !isLoadingProducts && (!(products !== null && products !== void 0 && (_products$Trekhaak3 = products.Trekhaak) !== null && _products$Trekhaak3 !== void 0 && _products$Trekhaak3.length) || !(products !== null && products !== void 0 && (_products$Kabelset = products.Kabelset) !== null && _products$Kabelset !== void 0 && _products$Kabelset.length)) && !(products !== null && products !== void 0 && (_products$Combiset = products.Combiset) !== null && _products$Combiset !== void 0 && _products$Combiset.length)) {
     return /*#__PURE__*/_react.default.createElement(_reactRouter.Redirect, {
       to: "/configurator/geen-producten"
@@ -305,7 +301,13 @@ const ProductsOverview = () => {
       setSkipFilters(value);
     },
     label: "Toon alle artikelen"
-  }), Object.entries(products).map((_ref2, index) => {
+  }), isLoadingProducts && isProductsInitialLoad.current === true ? /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _helpers__.withStyle)('d-flex justify-content-center align-items-center py-5')
+  }, /*#__PURE__*/_react.default.createElement(_InlineSpinner.default, {
+    size: "2rem"
+  }), /*#__PURE__*/_react.default.createElement("span", {
+    className: (0, _helpers__.withStyle)('ms-3')
+  }, "Producten laden...")) : Object.entries(products).map((_ref2, index) => {
     let [productCategory, productsPerCategory] = _ref2;
     if (!productsPerCategory.length) {
       return null;

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

@@ -19,6 +19,7 @@ var _queries = require("../__api__/queries");
 var _LinkButton = _interopRequireDefault(require("../__components__/Buttons/LinkButton"));
 var _ExpandableCard = _interopRequireDefault(require("../__components__/Cards/ExpandableCard"));
 var _LicensePlateInput = _interopRequireDefault(require("../__components__/Form/LicensePlateInput"));
+var _InlineSpinner = _interopRequireDefault(require("../__components__/Spinners/InlineSpinner"));
 var _FormulaContext = require("../__context__/FormulaContext");
 var _OrderSessionContext = require("../__context__/OrderSessionContext");
 var _helpers__ = require("../__helpers__");
@@ -51,7 +52,8 @@ const VehicleData = _ref => {
   }
   const {
     vehicleDetails,
-    vehicleLogo
+    vehicleLogo,
+    isLoadingProducts
   } = (0, _queries.useProductsQuery)({
     licensePlate,
     model,
@@ -90,7 +92,13 @@ const VehicleData = _ref => {
       className: (0, _helpers__.withStyle)('license-plate__edit link-primary col-12'),
       type: "button"
     })),
-    expandedBody: Object.entries(vehicleDetails).filter(_ref2 => {
+    expandedBody: isLoadingProducts ? /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _helpers__.withStyle)('d-flex justify-content-center align-items-center py-3')
+    }, /*#__PURE__*/_react.default.createElement(_InlineSpinner.default, {
+      size: "1.5rem"
+    }), /*#__PURE__*/_react.default.createElement("span", {
+      className: (0, _helpers__.withStyle)('ms-2')
+    }, "Gegevens laden...")) : Object.entries(vehicleDetails).filter(_ref2 => {
       let [key] = _ref2;
       return isTmg || key !== 'kType' && key !== 'kMod';
     }).map(_ref3 => {

package/dist/src/shared/__containers__/internal/InternalBranchSelectorModal.js

@@ -72,6 +72,10 @@ const NormalPageModalContent = _ref => {
   } = _ref;
   const [_selectedBranchId, _setSelectedBranchId] = (0, _react.useState)();
   const [_branches, _setBranches] = (0, _react.useState)([]);
+  const [{
+    licensePlate,
+    model
+  }] = (0, _OrderSessionContext.useOrderSession)();
   const {
     myBranches,
     isLoadingMyBranches
@@ -97,6 +101,7 @@ const NormalPageModalContent = _ref => {
     if (!(_branches !== null && _branches !== void 0 && _branches.length)) return;
     if (selectedBranch) return;
     const shouldAutoSelect = !existingDossierId && !isTMGOrganization && _branches.length === 1;
+    console.log(existingDossierId, isTMGOrganization, _branches.length);
     if (!shouldAutoSelect) return;
     const branchToSelect = (_branches$ = _branches[0]) === null || _branches$ === void 0 ? void 0 : _branches$.entityId;
     if (branchToSelect) {
@@ -249,7 +254,9 @@ const InternalBranchSelectorModal = () => {
   const [{
     selectedBranch,
     existingDossierId,
-    orderType
+    orderType,
+    licensePlate,
+    model
   }, dispatch] = (0, _OrderSessionContext.useOrderSession)();
   const {
     myBranches,
@@ -281,15 +288,20 @@ const InternalBranchSelectorModal = () => {
   };
   const shouldShowModalForSingleOrder = APP_CONFIG.internal && !selectedBranch && !existingDossierId && isSingleOrderPage && !shouldAutoSelect;
   const shouldShowModalForOtherPages = APP_CONFIG.internal && !selectedBranch && !existingDossierId && !isSingleOrderPage && !isTMGOrganization && !shouldAutoSelect && !isLoadingMyBranches;
-  if (isLoadingBranchTypes || isLoadingMyBranches) {
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: "thm-configurator-wrapper--offset"
-    }, /*#__PURE__*/_react.default.createElement(_FullPageSpinner.default, null));
-  }
 
-  // Skip modal entirely when auto-selecting the single available branch
-  if (shouldAutoSelect) {
-    return null;
+  // Show loading state only when we actually need to show the modal
+  const shouldShowModal = shouldShowModalForSingleOrder || shouldShowModalForOtherPages;
+  if (shouldShowModal && (isLoadingBranchTypes || isLoadingMyBranches)) {
+    if (licensePlate || model) {
+      return null;
+    }
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "thm-configurator-wrapper--offset d-flex justify-content-center align-items-center py-5"
+    }, /*#__PURE__*/_react.default.createElement(_FullPageSpinner.default, {
+      size: "2rem"
+    }), /*#__PURE__*/_react.default.createElement("span", {
+      className: "ms-3"
+    }, "Vestigingen laden..."));
   }
   if ((shouldShowModalForSingleOrder || shouldShowModalForOtherPages) && isTMGOrganization && formula === _constants__.CONFIGURATOR_FORMULAS.TMG && !orderType) {
     return /*#__PURE__*/_react.default.createElement(_OrderTypeSelectorModal.default, {

package/package.json

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