thm-p3-configurator 0.0.160 → 0.0.162

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

@@ -82,6 +82,18 @@ const authenticatedProxyApi = exports.authenticatedProxyApi = {
   getBranchTypes: () => authenticateClient("api/v1/branch-types", {
     method: 'GET'
   }),
+  getBranchesByType: _ref => {
+    let {
+      formula,
+      ownershipType,
+      organisationType,
+      searchTerm,
+      isTmg = false
+    } = _ref;
+    return authenticateClient("api/v1/branches/by-type?searchTerm=".concat(searchTerm, "&formula=").concat(formula, "&ownershipType=").concat(ownershipType, "&organisationType=").concat(organisationType, "&isTmg=").concat(isTmg, "  "), {
+      method: 'GET'
+    });
+  },
   getMyBranchesByFormula: formula => authenticateClient("api/v1/profile/".concat(formula, "/branches"), {
     method: 'GET'
   }),
@@ -131,11 +143,11 @@ const authenticatedProxyApi = exports.authenticatedProxyApi = {
       'Content-Type': 'application/json'
     }
   }),
-  putQuotationById: _ref => {
+  putQuotationById: _ref2 => {
     let {
       payload,
       id
-    } = _ref;
+    } = _ref2;
     return authenticateClient("api/v1/quotations/".concat(id), {
       method: 'PUT',
       data: payload,
@@ -144,11 +156,11 @@ const authenticatedProxyApi = exports.authenticatedProxyApi = {
       }
     });
   },
-  putAppointmentById: _ref2 => {
+  putAppointmentById: _ref3 => {
     let {
       payload,
       id
-    } = _ref2;
+    } = _ref3;
     return authenticateClient("api/v1/appointments/".concat(id), {
       method: 'PUT',
       data: payload,
@@ -157,11 +169,11 @@ const authenticatedProxyApi = exports.authenticatedProxyApi = {
       }
     });
   },
-  putAppointmentRequestById: _ref3 => {
+  putAppointmentRequestById: _ref4 => {
     let {
       payload,
       id
-    } = _ref3;
+    } = _ref4;
     return authenticateClient("api/v1/appointment-requests/".concat(id), {
       method: 'PUT',
       data: payload,
@@ -170,12 +182,12 @@ const authenticatedProxyApi = exports.authenticatedProxyApi = {
       }
     });
   },
-  getActiveDiscounts: _ref4 => {
+  getActiveDiscounts: _ref5 => {
     let {
       formulaCode,
       limit,
       offset
-    } = _ref4;
+    } = _ref5;
     return authenticateClient("api/v1/discounts?limit=".concat(limit, "&offset=").concat(offset, "&formulaCode=").concat(formulaCode), {
       method: 'GET',
       headers: {

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

@@ -15,7 +15,7 @@ require("core-js/modules/esnext.iterator.filter.js");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useSingleOrderCart = exports.useSingleOrderBranchesQuery = exports.useSingleOrderBranchTypes = exports.useSingleOrderArticles = exports.useQuestionsQuery = exports.useProductsQuery = exports.useProductFieldLabels = exports.usePrivateDossierByTypeAndIdQuery = exports.useMyBranches = exports.useModelsQuery = exports.useMarketingChannels = exports.useCountriesQuery = exports.useBuildYearsQuery = exports.useBrandsQuery = exports.useBranchesQuery = exports.useBranchTypes = exports.useBranchByIdOrWidgetId = exports.useArticleTypes = exports.useArticleSubGroups = exports.useArticleGroups = exports.useActiveDiscounts = void 0;
+exports.useSingleOrderCart = exports.useSingleOrderBranchesQuery = exports.useSingleOrderBranchTypes = exports.useSingleOrderArticles = exports.useQuestionsQuery = exports.useProductsQuery = exports.useProductFieldLabels = exports.usePrivateDossierByTypeAndIdQuery = exports.useMyBranches = exports.useModelsQuery = exports.useMarketingChannels = exports.useCountriesQuery = exports.useBuildYearsQuery = exports.useBrandsQuery = exports.useBranchesQuery = exports.useBranchesByType = exports.useBranchTypes = exports.useBranchByIdOrWidgetId = exports.useArticleTypes = exports.useArticleSubGroups = exports.useArticleGroups = exports.useActiveDiscounts = void 0;
 require("core-js/modules/es.symbol.description.js");
 require("core-js/modules/es.json.stringify.js");
 require("core-js/modules/es.object.from-entries.js");
@@ -567,9 +567,45 @@ const useBranchesQuery = branchesParams => {
 };
 
 /**
- * @description finds a branch either by its Id, or its widget id
+ * @description Retrieves available branches by type
+ * @param {String} type - The type of branches to retrieve
  */
 exports.useBranchesQuery = useBranchesQuery;
+const useBranchesByType = _ref3 => {
+  let {
+    formula,
+    ownershipType,
+    organisationType,
+    searchTerm,
+    isTmg = false
+  } = _ref3;
+  const branchesByTypeQuery = (0, _reactQuery.useQuery)(['branchesByType', formula, ownershipType, organisationType, searchTerm, isTmg], {
+    queryFn: async () => {
+      const response = await _authenticatedProxyApi.authenticatedProxyApi.getBranchesByType({
+        formula,
+        ownershipType,
+        organisationType,
+        searchTerm,
+        isTmg
+      });
+      if (response.data.length === 0) {
+        return null;
+      }
+      return response.data;
+    },
+    enabled: !!searchTerm && searchTerm.length >= 3
+  });
+  return {
+    isLoadingBranchesByType: branchesByTypeQuery.isLoading,
+    branchesByTypeError: branchesByTypeQuery.isError,
+    branchesByType: branchesByTypeQuery === null || branchesByTypeQuery === void 0 ? void 0 : branchesByTypeQuery.data
+  };
+};
+
+/**
+ * @description finds a branch either by its Id, or its widget id
+ */
+exports.useBranchesByType = useBranchesByType;
 const useBranchByIdOrWidgetId = exports.useBranchByIdOrWidgetId = function useBranchByIdOrWidgetId() {
   let id = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
   const branchByIdQuery = (0, _reactQuery.useQuery)(['branchById', id], {
@@ -648,11 +684,11 @@ const useBranchTypes = () => {
  * Available types: Quotation, appointment request and planned appointment.
  */
 exports.useBranchTypes = useBranchTypes;
-const usePrivateDossierByTypeAndIdQuery = _ref3 => {
+const usePrivateDossierByTypeAndIdQuery = _ref4 => {
   let {
     dossierId,
     dossierType
-  } = _ref3;
+  } = _ref4;
   const dossierByIdQuery = (0, _reactQuery.useQuery)([dossierType, dossierId], {
     enabled: !!dossierId && !!dossierType,
     queryFn: () => {
@@ -695,14 +731,14 @@ const usePrivateDossierByTypeAndIdQuery = _ref3 => {
  * @description Query the discounts from Hyper, allows for pagination and filtering with formula
  */
 exports.usePrivateDossierByTypeAndIdQuery = usePrivateDossierByTypeAndIdQuery;
-const useActiveDiscounts = _ref4 => {
+const useActiveDiscounts = _ref5 => {
   var _discountsQuery$data;
   let {
     formulaCode,
     offset,
     limit,
     authSession
-  } = _ref4;
+  } = _ref5;
   const discountsQuery = (0, _reactQuery.useQuery)({
     queryKey: ['discounts', formulaCode, offset, limit, authSession],
     queryFn: () => _authenticatedProxyApi.authenticatedProxyApi.getActiveDiscounts({

package/dist/src/shared/__components__/Buttons/LinkButton.js

@@ -41,14 +41,16 @@ const LinkButton = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     isDisabled,
     onClick,
     label,
-    className = ''
+    className = '',
+    style = {}
   } = _ref;
   return /*#__PURE__*/_react.default.createElement("button", {
     className: (0, _helpers__.withStyle)("btn btn-link p-0 ".concat(className)),
     type: type,
     ref: ref,
     disabled: isDisabled,
-    onClick: onClick
+    onClick: onClick,
+    style: style
   }, label);
 });
 var _default = exports.default = LinkButton;

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

@@ -0,0 +1,227 @@
+"use strict";
+
+require("core-js/modules/es.weak-map.js");
+require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.iterator.filter.js");
+require("core-js/modules/esnext.iterator.for-each.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+require("core-js/modules/es.weak-map.js");
+require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.iterator.filter.js");
+require("core-js/modules/esnext.iterator.for-each.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/web.dom-collections.iterator.js");
+var _react = _interopRequireWildcard(require("react"));
+var _reactSelect = _interopRequireDefault(require("react-select"));
+var _constants__ = require("../../__constants__");
+var _ErrorMessage = _interopRequireDefault(require("./ErrorMessage"));
+function _interopRequireDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+function _getRequireWildcardCache(e) {
+  if ("function" != typeof WeakMap) return null;
+  var r = new WeakMap(),
+    t = new WeakMap();
+  return (_getRequireWildcardCache = function _getRequireWildcardCache(e) {
+    return e ? t : r;
+  })(e);
+}
+function _interopRequireWildcard(e, r) {
+  if (!r && e && e.__esModule) return e;
+  if (null === e || "object" != typeof e && "function" != typeof e) return {
+    default: e
+  };
+  var t = _getRequireWildcardCache(r);
+  if (t && t.has(e)) return t.get(e);
+  var n = {
+      __proto__: null
+    },
+    a = Object.defineProperty && Object.getOwnPropertyDescriptor;
+  for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) {
+    var i = a ? Object.getOwnPropertyDescriptor(e, u) : null;
+    i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u];
+  }
+  return n.default = e, t && t.set(e, n), n;
+}
+function ownKeys(e, r) {
+  var t = Object.keys(e);
+  if (Object.getOwnPropertySymbols) {
+    var o = Object.getOwnPropertySymbols(e);
+    r && (o = o.filter(function (r) {
+      return Object.getOwnPropertyDescriptor(e, r).enumerable;
+    })), t.push.apply(t, o);
+  }
+  return t;
+}
+function _objectSpread(e) {
+  for (var r = 1; r < arguments.length; r++) {
+    var t = null != arguments[r] ? arguments[r] : {};
+    r % 2 ? ownKeys(Object(t), !0).forEach(function (r) {
+      _defineProperty(e, r, t[r]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
+      Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
+    });
+  }
+  return e;
+}
+function _defineProperty(e, r, t) {
+  return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
+    value: t,
+    enumerable: !0,
+    configurable: !0,
+    writable: !0
+  }) : e[r] = t, e;
+}
+function _toPropertyKey(t) {
+  var i = _toPrimitive(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+function _toPrimitive(t, r) {
+  if ("object" != typeof t || !t) return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r || "default");
+    if ("object" != typeof i) return i;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return ("string" === r ? String : Number)(t);
+}
+const SearchableDropdownInput = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+  let {
+    searchHook,
+    name,
+    label,
+    isRequired,
+    placeholder = 'Zoeken...',
+    onChange,
+    onInputChange = () => {},
+    form,
+    initialValue,
+    debounceMs = 500,
+    errorMessage,
+    extraHookFilters = [],
+    preserveInput = false,
+    allowCustomValue = false
+  } = _ref;
+  const [isTouched, setIsTouched] = (0, _react.useState)(false);
+  const [value, setValue] = (0, _react.useState)(initialValue || '');
+  const [internalError, setInternalError] = (0, _react.useState)();
+  const [searchTerm, setSearchTerm] = (0, _react.useState)('');
+  const [debouncedSearchTerm, setDebouncedSearchTerm] = (0, _react.useState)('');
+  const [typedValue, setTypedValue] = (0, _react.useState)('');
+
+  // Only search when we have at least 3 characters to avoid excessive API calls
+  const minSearchLength = 3;
+  const effectiveSearchTerm = debouncedSearchTerm.length >= minSearchLength ? debouncedSearchTerm : '';
+  const {
+    data: options = [],
+    isLoading
+  } = searchHook(effectiveSearchTerm, extraHookFilters);
+  const lgSize = window.matchMedia('(min-width: 960px)');
+  const xxlSize = window.matchMedia('(min-width: 1440px)');
+  (0, _react.useEffect)(() => {
+    setValue(initialValue || '');
+
+    // Set initial typed value from initialValue if it's a string or has label
+    if (initialValue) {
+      if (typeof initialValue === 'object' && initialValue.label) {
+        setTypedValue(initialValue.label);
+      } else if (typeof initialValue === 'string') {
+        setTypedValue(initialValue);
+      }
+    }
+  }, [initialValue]);
+  (0, _react.useEffect)(() => {
+    const timer = setTimeout(() => {
+      setDebouncedSearchTerm(searchTerm);
+    }, debounceMs);
+    return () => clearTimeout(timer);
+  }, [searchTerm, debounceMs]);
+  const handleFocus = () => {
+    setIsTouched(true);
+  };
+  const handleBlur = () => {
+    if (!value && isRequired && isTouched) {
+      setInternalError(_constants__.FORM_ERROR_MESSAGES.required);
+    }
+
+    // On blur, if we have typed text but no selection and preserveInput is true
+    if (preserveInput && typedValue && !value) {
+      onChange(typedValue);
+    }
+  };
+  const handleChange = selectedOption => {
+    setInternalError('');
+    setValue(selectedOption);
+    if (selectedOption) {
+      // Normal selection behavior
+      onChange(selectedOption);
+    } else {
+      // Handle clearing the field
+      if (preserveInput && typedValue) {
+        // If we're preserving input and there's text, use that
+        onChange(typedValue);
+      } else {
+        // Otherwise just clear normally
+        onChange(null);
+        setTypedValue('');
+      }
+    }
+  };
+  const handleInputChange = inputText => {
+    setTypedValue(inputText);
+    setSearchTerm(inputText);
+    onInputChange(inputText);
+  };
+  const displayError = errorMessage || internalError;
+
+  // Determine the appropriate no-options message based on search term length
+  const getNoOptionsMessage = () => {
+    if (searchTerm.length > 0 && searchTerm.length < minSearchLength) {
+      return "Typ minimaal ".concat(minSearchLength, " karakters om te zoeken");
+    }
+    return 'Geen resultaten gevonden';
+  };
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "form-group form-select__group ".concat(displayError ? 'is-invalid' : '')
+  }, /*#__PURE__*/_react.default.createElement("label", {
+    htmlFor: name,
+    className: 'form-label'
+  }, label, isRequired && /*#__PURE__*/_react.default.createElement("span", null, "*")), /*#__PURE__*/_react.default.createElement(_reactSelect.default, {
+    ref: ref,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    id: name,
+    name: name,
+    form: form,
+    value: value,
+    options: options,
+    placeholder: placeholder,
+    noOptionsMessage: getNoOptionsMessage,
+    classNamePrefix: 'form-select',
+    onChange: handleChange,
+    onInputChange: handleInputChange,
+    isLoading: isLoading,
+    isSearchable: true,
+    isClearable: true,
+    styles: {
+      menuList: base => _objectSpread(_objectSpread({}, base), {}, {
+        maxHeight: lgSize ? '20vh' : xxlSize ? '10vh' : '18vh'
+      }),
+      control: base => _objectSpread(_objectSpread({}, base), {}, {
+        borderColor: displayError ? '#dc3545' : base.borderColor,
+        '&:hover': {
+          borderColor: displayError ? '#dc3545' : base.borderColor
+        }
+      })
+    }
+  }), displayError && /*#__PURE__*/_react.default.createElement(_ErrorMessage.default, {
+    message: displayError
+  }));
+});
+var _default = exports.default = SearchableDropdownInput;

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.VESTIGING_TYPE_ID = exports.VEHICLE_SINGLE_ORDER_OWNERSHIP_TYPE = exports.VEHICLE_OWNERSHIP_TYPE = exports.VEHICLE_CODING_SUBGROUP_NAME = exports.USER_GEOLOCATION_KEY = exports.TMG_ORGANIZATION_TYPE = exports.StockStatus = exports.PRODUCT_CATEGORIES = exports.PRIVATE_SINGLE_ORDER_SESSION_KEY = exports.ORDER_SESSION_KEY = exports.NAVIGATION_STEPS_INTERNAL = exports.NAVIGATION_STEPS_EXTERNAL = exports.NAVIGATION_BUTTONS = exports.MOUSE_EXIT_INTENT_THROTTLE = exports.MOUSE_EXIT_INTENT_OFFSET = exports.LOCATION_TYPE = exports.LOCATION_CHANGE_BUTTON_LABEL = exports.LOCALE = exports.FORM_ERROR_MESSAGES = exports.DOSSIER_TYPES = exports.DISCOUNT_TYPES = exports.DEFAULT_MAP_LONGITUDE = exports.DEFAULT_MAP_LATITUDE = exports.DEFAULT_ARTICLE_BRAND = exports.DAY_NAMES = exports.CONFIGURATOR_FORMULAS = exports.BOARD_COMPUTER_DISABLED_KEY = exports.AUTH_SESSION_KEY = exports.ARTICLE_SPECS_TRANSLATIONS = exports.ARTICLES_SYSTEM_FIELDS = exports.API_ERROR_CODES = exports.ANWB_DISCOUNT_CODE = exports.ALL_EXPERIMENTS = exports.ACTIVE_VARIANTS = void 0;
+exports.VESTIGING_TYPE_ID = exports.VEHICLE_SINGLE_ORDER_OWNERSHIP_TYPE = exports.VEHICLE_OWNERSHIP_TYPE = exports.VEHICLE_CODING_SUBGROUP_NAME = exports.USER_GEOLOCATION_KEY = exports.TMG_ORGANIZATION_TYPE = exports.StockStatus = exports.PRODUCT_CATEGORIES = exports.PRIVATE_SINGLE_ORDER_SESSION_KEY = exports.ORDER_SESSION_KEY = exports.NAVIGATION_STEPS_INTERNAL = exports.NAVIGATION_STEPS_EXTERNAL = exports.NAVIGATION_BUTTONS = exports.MOUSE_EXIT_INTENT_THROTTLE = exports.MOUSE_EXIT_INTENT_OFFSET = exports.LOCATION_TYPE = exports.LOCATION_CHANGE_BUTTON_LABEL = exports.LOCALE = exports.LEASE_TYPE_ID = exports.FORM_ERROR_MESSAGES = exports.DOSSIER_TYPES = exports.DISCOUNT_TYPES = exports.DEFAULT_MAP_LONGITUDE = exports.DEFAULT_MAP_LATITUDE = exports.DEFAULT_ARTICLE_BRAND = exports.DAY_NAMES = exports.CONFIGURATOR_FORMULAS = exports.BOARD_COMPUTER_DISABLED_KEY = exports.AUTH_SESSION_KEY = exports.ARTICLE_SPECS_TRANSLATIONS = exports.ARTICLES_SYSTEM_FIELDS = exports.API_ERROR_CODES = exports.ANWB_DISCOUNT_CODE = exports.ALL_EXPERIMENTS = exports.ACTIVE_VARIANTS = void 0;
 const DOSSIER_TYPES = exports.DOSSIER_TYPES = {
   Quotation: 'quotation',
   AppointmentRequest: 'appointment-request',
@@ -29,6 +29,7 @@ const DAY_NAMES = exports.DAY_NAMES = {
 };
 const VEHICLE_CODING_SUBGROUP_NAME = exports.VEHICLE_CODING_SUBGROUP_NAME = 'Voertuigcodering trekhaak';
 const VESTIGING_TYPE_ID = exports.VESTIGING_TYPE_ID = 'kyDouClQsfmXWWloLdwzG';
+const LEASE_TYPE_ID = exports.LEASE_TYPE_ID = 'SJvJbwMGBoXvOsatNStxr';
 const NAVIGATION_STEPS_INTERNAL = exports.NAVIGATION_STEPS_INTERNAL = [{
   to: '/configurator/trekhaakpakket',
   title: '1. Trekhaakpakket',