thm-p3-configurator 0.0.341 → 0.0.342

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

@@ -48,6 +48,8 @@ const TextInput = _ref => {
     value,
     name,
     onClick = () => {},
+    onBlur = () => {},
+    onKeyDown = () => {},
     isDisabled = false,
     onChange = () => {},
     isRequired = true,
@@ -82,6 +84,8 @@ const TextInput = _ref => {
     value: displayValue,
     disabled: isDisabled,
     onChange: e => handleChange(e.target.value),
+    onBlur: onBlur,
+    onKeyDown: onKeyDown,
     required: isRequired,
     className: "".concat((0, _helpers__.withStyle)('form-control'), " ").concat(errorMessage ? (0, _helpers__.withStyle)('is-invalid') : '')
   }), errorMessage && /*#__PURE__*/_react.default.createElement(_ErrorMessage.default, {

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

@@ -142,6 +142,66 @@ function _toPrimitive(t, r) {
   }
   return ("string" === r ? String : Number)(t);
 }
+// ============================================================================
+// INPUT HELPERS
+// ============================================================================
+
+const sanitizeDiscountDraft = value => {
+  var _value$toString$repla;
+  return (_value$toString$repla = value === null || value === void 0 ? void 0 : value.toString().replace(/[^0-9]/g, '')) !== null && _value$toString$repla !== void 0 ? _value$toString$repla : '';
+};
+const parseDiscountValue = value => {
+  const sanitized = sanitizeDiscountDraft(value);
+  if (sanitized === '') {
+    return null;
+  }
+  return Math.min(100, Math.max(0, parseInt(sanitized, 10)));
+};
+const formatDiscountDraft = value => value === null || value === undefined ? '' : value.toString();
+const DeferredDiscountInput = _ref => {
+  let {
+    articleNumber,
+    value,
+    onCommit
+  } = _ref;
+  const [draftValue, setDraftValue] = (0, _react.useState)(formatDiscountDraft(value));
+  const isEditingRef = (0, _react.useRef)(false);
+  (0, _react.useEffect)(() => {
+    if (!isEditingRef.current) {
+      setDraftValue(formatDiscountDraft(value));
+    }
+  }, [value]);
+  const handleBlur = () => {
+    isEditingRef.current = false;
+    const nextValue = parseDiscountValue(draftValue);
+    const currentValue = value !== null && value !== void 0 ? value : null;
+    setDraftValue(formatDiscountDraft(nextValue));
+    if (nextValue === currentValue) {
+      return;
+    }
+    onCommit(nextValue);
+  };
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _helpers__.withStyle)('d-flex align-items-center justify-content-end')
+  }, /*#__PURE__*/_react.default.createElement(_TextInput.default, {
+    className: "mb-0",
+    name: "consumer-discount-".concat(articleNumber),
+    placeholder: "0-100",
+    value: draftValue,
+    isRequired: false,
+    onChange: nextValue => {
+      isEditingRef.current = true;
+      setDraftValue(sanitizeDiscountDraft(nextValue));
+    },
+    onBlur: handleBlur,
+    onKeyDown: event => {
+      if (event.key === 'Enter') {
+        event.currentTarget.blur();
+      }
+    }
+  }));
+};
+
 // ============================================================================
 // MAIN COMPONENT
 // ============================================================================
@@ -153,8 +213,6 @@ const ProductCartTable = () => {
   const isTmg = (0, _useIsTmg.useIsTmg)();
   const isTowmotive = (0, _useIsTowmotive.useIsTowmotive)();
   const [isToggled, setIsToggled] = (0, _react.useState)(false);
-  const [localDiscounts, setLocalDiscounts] = (0, _react.useState)({});
-  const discountTimersRef = (0, _react.useRef)({});
   const [{
     licensePlate,
     model,
@@ -184,72 +242,26 @@ const ProductCartTable = () => {
   const canEditDiscounts = isTowmotive || isTowFormula;
   const useTmgDisplayMode = isTmg && !isTowFormula || isThc && !canEditDiscounts;
   const displayMode = (0, _cartTable2.getCartTableDisplayMode)(isToggled, useTmgDisplayMode);
-  const DISCOUNT_DEBOUNCE_MS = 600;
-  const handleVehicleCodingDiscountChange = function handleVehicleCodingDiscountChange(value) {
-    let articleNumber = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
-    const sanitized = value === null || value === void 0 ? void 0 : value.toString().replace(/[^0-9]/g, '');
-    const parsed = sanitized === '' ? null : Math.min(100, Math.max(0, parseInt(sanitized, 10)));
-    const key = articleNumber || '__vehicleCoding';
-    setLocalDiscounts(prev => _objectSpread(_objectSpread({}, prev), {}, {
-      [key]: parsed
-    }));
-    clearTimeout(discountTimersRef.current[key]);
-    discountTimersRef.current[key] = setTimeout(() => {
-      dispatch({
-        type: _OrderSessionContext.orderSessionActions.SET_VEHICLE_CODING_DISCOUNT_PERCENTAGE,
-        payload: {
-          percentage: parsed
-        }
-      });
-      if (articleNumber) {
-        dispatch({
-          type: _OrderSessionContext.orderSessionActions.SET_CONSUMER_DISCOUNT_PERCENTAGE,
-          payload: {
-            articleNumber,
-            percentage: parsed
-          }
-        });
-      }
-      setLocalDiscounts(prev => {
-        const next = _objectSpread({}, prev);
-        delete next[key];
-        return next;
-      });
-    }, DISCOUNT_DEBOUNCE_MS);
-  };
-  const handleLineDiscountChange = function handleLineDiscountChange(articleNumber, value) {
+  const handleLineDiscountCommit = function handleLineDiscountCommit(articleNumber, percentage) {
     let {
       isVehicleCoding = false
     } = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-    const sanitized = value === null || value === void 0 ? void 0 : value.toString().replace(/[^0-9]/g, '');
-    const parsed = sanitized === '' ? null : Math.min(100, Math.max(0, parseInt(sanitized, 10)));
-    setLocalDiscounts(prev => _objectSpread(_objectSpread({}, prev), {}, {
-      [articleNumber]: parsed
-    }));
-    clearTimeout(discountTimersRef.current[articleNumber]);
-    discountTimersRef.current[articleNumber] = setTimeout(() => {
+    dispatch({
+      type: _OrderSessionContext.orderSessionActions.SET_CONSUMER_DISCOUNT_PERCENTAGE,
+      payload: {
+        articleNumber,
+        percentage,
+        userModified: true
+      }
+    });
+    if (isVehicleCoding) {
       dispatch({
-        type: _OrderSessionContext.orderSessionActions.SET_CONSUMER_DISCOUNT_PERCENTAGE,
+        type: _OrderSessionContext.orderSessionActions.SET_VEHICLE_CODING_DISCOUNT_PERCENTAGE,
         payload: {
-          articleNumber,
-          percentage: parsed,
-          userModified: true
+          percentage
         }
       });
-      if (isVehicleCoding) {
-        dispatch({
-          type: _OrderSessionContext.orderSessionActions.SET_VEHICLE_CODING_DISCOUNT_PERCENTAGE,
-          payload: {
-            percentage: parsed
-          }
-        });
-      }
-      setLocalDiscounts(prev => {
-        const next = _objectSpread({}, prev);
-        delete next[articleNumber];
-        return next;
-      });
-    }, DISCOUNT_DEBOUNCE_MS);
+    }
   };
   const handleMontageRateChange = value => {
     if (value === null || value === undefined) {
@@ -593,16 +605,11 @@ const ProductCartTable = () => {
   // RENDER HELPERS
   // ============================================================================
 
-  const renderDiscountInput = (articleNumber, value, onChange) => /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _helpers__.withStyle)('d-flex align-items-center justify-content-end')
-  }, /*#__PURE__*/_react.default.createElement(_TextInput.default, {
-    className: "mb-0",
-    name: "consumer-discount-".concat(articleNumber),
-    placeholder: "0-100",
-    value: value === null || value === undefined ? '' : value.toString(),
-    isRequired: false,
-    onChange: onChange
-  }));
+  const renderDiscountInput = (articleNumber, value, onCommit) => /*#__PURE__*/_react.default.createElement(DeferredDiscountInput, {
+    articleNumber: articleNumber,
+    value: value,
+    onCommit: onCommit
+  });
   const renderVehicleCodingInput = articleNumber => /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _helpers__.withStyle)('text-end')
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -663,10 +670,10 @@ const ProductCartTable = () => {
     const isVehicleCodingProduct = (product === null || product === void 0 ? void 0 : product.subgroupName) === _constants__.VEHICLE_CODING_SUBGROUP_NAME || (product === null || product === void 0 ? void 0 : product.groupName) === _constants__.VEHICLE_CODING_SUBGROUP_NAME;
     const isBoardComputerProduct = selectedBoardComputer && String(product.articleNumber) === String(selectedBoardComputer);
     const stateDiscountValue = (_product$consumerDisc = product === null || product === void 0 ? void 0 : product.consumerDiscountPercentage) !== null && _product$consumerDisc !== void 0 ? _product$consumerDisc : isVehicleCodingProduct ? vehicleCodingDiscountPercentage || null : null;
-    const lineDiscountValue = localDiscounts[product.articleNumber] !== undefined ? localDiscounts[product.articleNumber] : stateDiscountValue;
+    const lineDiscountValue = stateDiscountValue;
     const allowLineDiscountMain = displayMode === _cartTable.CART_TABLE_DISPLAY_MODES.TOGGLED_STANDARD && (isTowmotive || isTowFormula);
     const discountInputCellMain = allowLineDiscountMain ? {
-      text: renderDiscountInput(product.articleNumber, lineDiscountValue, v => handleLineDiscountChange(product.articleNumber, v, {
+      text: renderDiscountInput(product.articleNumber, lineDiscountValue, percentage => handleLineDiscountCommit(product.articleNumber, percentage, {
         isVehicleCoding: isVehicleCodingProduct
       })),
       className: _cartTable.CART_TABLE_PRICE_CELL_CLASS
@@ -717,10 +724,10 @@ const ProductCartTable = () => {
     heading: "Toebehoren"
   }, accessoireProducts.map(product => {
     var _product$consumerDisc2, _product$images3, _product$images4;
-    const lineDiscountValue = localDiscounts[product.articleNumber] !== undefined ? localDiscounts[product.articleNumber] : (_product$consumerDisc2 = product === null || product === void 0 ? void 0 : product.consumerDiscountPercentage) !== null && _product$consumerDisc2 !== void 0 ? _product$consumerDisc2 : null;
+    const lineDiscountValue = (_product$consumerDisc2 = product === null || product === void 0 ? void 0 : product.consumerDiscountPercentage) !== null && _product$consumerDisc2 !== void 0 ? _product$consumerDisc2 : null;
     const allowLineDiscountAccessory = displayMode === _cartTable.CART_TABLE_DISPLAY_MODES.TOGGLED_STANDARD && (isTowmotive || isTowFormula);
     const discountInputCellAccessory = allowLineDiscountAccessory ? {
-      text: renderDiscountInput(product.articleNumber, lineDiscountValue, v => handleLineDiscountChange(product.articleNumber, v)),
+      text: renderDiscountInput(product.articleNumber, lineDiscountValue, percentage => handleLineDiscountCommit(product.articleNumber, percentage)),
       className: _cartTable.CART_TABLE_PRICE_CELL_CLASS
     } : {};
     let canProductBeAltered = canAlterQuantity;

package/package.json

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