@escapenavigator/hooks 1.10.131 → 1.10.132

package/dist/players-and-variation-picker/index.d.ts

@@ -80,6 +80,17 @@ export type PlayersAndVariationPickerProps = {
      * excludes the current booking from occupancy calculations.
      */
     orderId?: number;
+    /**
+     * Fires whenever the internal `usePlayersAndVariationPicker` loading
+     * flag changes. Hosts can use it to show a full-screen busy overlay
+     * over their form (the player section + dependent UI like upsellings)
+     * while `/slots/details` is in flight on initial mount — without
+     * having to duplicate the hook call themselves.
+     *
+     * Starts `true` and flips to `false` once the first `/slots/details`
+     * resolves (success or error).
+     */
+    onLoadingChange?: (loading: boolean) => void;
 };
 /**
  * Single shared component that renders the "Variation + Players" picker used

package/dist/players-and-variation-picker/index.js

@@ -62,9 +62,9 @@ const use_players_and_variation_picker_1 = require("../use-players-and-variation
  * buttons, kids row, price hint, save button) was reimplemented in three
  * places with subtle drift. This component is the single source of truth.
  */
-const PlayersAndVariationPicker = ({ slot, currentTariffId, currentDuration, loadSlotDetails, onVariationChange, onVariationResolved, onDetailsLoaded, players = 0, child = 0, tariff: tariffOverride, currency, minPlayers, maxPlayersLimit, slotDiscount, error, t, onChange, onSave, orderId, }) => {
+const PlayersAndVariationPicker = ({ slot, currentTariffId, currentDuration, loadSlotDetails, onVariationChange, onVariationResolved, onDetailsLoaded, players = 0, child = 0, tariff: tariffOverride, currency, minPlayers, maxPlayersLimit, slotDiscount, error, t, onChange, onSave, orderId, onLoadingChange, }) => {
     var _a, _b;
-    const { options: pickerOptions, selectedOptionId, selectedVariation, buildVariationChange, selectVariation, details, } = (0, use_players_and_variation_picker_1.usePlayersAndVariationPicker)({
+    const { loading: pickerLoading, options: pickerOptions, selectedOptionId, selectedVariation, buildVariationChange, selectVariation, details, } = (0, use_players_and_variation_picker_1.usePlayersAndVariationPicker)({
         slot,
         currentTariffId,
         currentDuration,
@@ -72,6 +72,17 @@ const PlayersAndVariationPicker = ({ slot, currentTariffId, currentDuration, loa
         t: t,
         orderId,
     });
+    /**
+     * Прокидываем loading-сигнал наверх через ref'нутый колбэк, чтобы
+     * не зависеть от референциальной стабильности `onLoadingChange`
+     * со стороны хоста.
+     */
+    const onLoadingChangeRef = (0, react_1.useRef)(onLoadingChange);
+    onLoadingChangeRef.current = onLoadingChange;
+    (0, react_1.useEffect)(() => {
+        var _a;
+        (_a = onLoadingChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onLoadingChangeRef, pickerLoading);
+    }, [pickerLoading]);
     const onDetailsLoadedRef = (0, react_1.useRef)(onDetailsLoaded);
     const onVariationResolvedRef = (0, react_1.useRef)(onVariationResolved);
     onDetailsLoadedRef.current = onDetailsLoaded;

package/dist/use-players-and-variation-picker/index.js

@@ -17,6 +17,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.usePlayersAndVariationPicker = void 0;
 const use_api_method_1 = require("@escapenavigator/services/dist/hooks/use-api-method");
+const format_flex_duration_label_1 = require("@escapenavigator/utils/dist/format-flex-duration-label");
 const react_1 = require("react");
 __exportStar(require("./types"), exports);
 const variationKey = (variation) => { var _a; return (_a = variation.id) !== null && _a !== void 0 ? _a : `${variation.tariffId}-${variation.duration}`; };
@@ -35,8 +36,23 @@ const variationKey = (variation) => { var _a; return (_a = variation.id) !== nul
 const usePlayersAndVariationPicker = ({ slot, currentTariffId, currentDuration, loadSlotDetails, t, orderId, }) => {
     const api = (0, use_api_method_1.useApiMethod)({ api: loadSlotDetails });
     const data = api[`${loadSlotDetails.displayName}Data`];
-    const loading = !!api[`${loadSlotDetails.displayName}Loading`];
+    const apiLoading = !!api[`${loadSlotDetails.displayName}Loading`];
     const fetch = api[`${loadSlotDetails.displayName}Fetch`];
+    /**
+     * Guard against the one-frame visual flicker when the picker first
+     * mounts: `useApiMethod` initialises `loading` to `false`, so the
+     * very first render returns `loading=false` with empty `variations`
+     * — the host then briefly paints a "no options" / default-price
+     * row before our useEffect below fires the `/slots/details` request
+     * and `loading` flips to `true`.
+     *
+     * `firstFetchSettled` starts as `false` and only becomes `true` once
+     * the first `/slots/details` request actually resolves. Until then
+     * we report `loading=true` to the caller — the picker can render a
+     * skeleton/spinner for that entire window, with no empty-state
+     * flash.
+     */
+    const [firstFetchSettled, setFirstFetchSettled] = (0, react_1.useState)(false);
     (0, react_1.useEffect)(() => {
         if (!(slot === null || slot === void 0 ? void 0 : slot.id) || !slot.questroomId || !slot.date || !slot.start)
             return;
@@ -46,11 +62,16 @@ const usePlayersAndVariationPicker = ({ slot, currentTariffId, currentDuration,
             date: slot.date,
             start: slot.start,
             orderId,
-        });
+        })
+            .then(() => setFirstFetchSettled(true))
+            .catch(() => setFirstFetchSettled(true));
         // Only primitive slot fields — callers often pass inline `{ id, date, ... }`
         // objects that get a new reference every render; including `slot` here
         // re-triggers `/slots/details` on every parent render (ERR_INSUFFICIENT_RESOURCES).
     }, [slot === null || slot === void 0 ? void 0 : slot.id, slot === null || slot === void 0 ? void 0 : slot.questroomId, slot === null || slot === void 0 ? void 0 : slot.date, slot === null || slot === void 0 ? void 0 : slot.start, orderId, fetch]);
+    // До первого resolved-фетча — считаем `loading=true`, иначе host
+    // отрисует пустой picker в первый кадр.
+    const loading = !firstFetchSettled || apiLoading;
     const variations = (0, react_1.useMemo)(() => (data === null || data === void 0 ? void 0 : data.variations) || [], [data === null || data === void 0 ? void 0 : data.variations]);
     const isFlex = !!(data === null || data === void 0 ? void 0 : data.isFlex);
     const findCurrentVariation = (rows) => {
@@ -111,7 +132,7 @@ const usePlayersAndVariationPicker = ({ slot, currentTariffId, currentDuration,
             const id = variationKey(variation);
             const isCurrent = id === selectedOptionId;
             const label = isFlex
-                ? `${variation.duration} ${t('common:минут')}`
+                ? (0, format_flex_duration_label_1.formatFlexDurationLabel)(variation.duration, t)
                 : variation.isDefault
                     ? 'Default'
                     : variation.title || `Tariff ${variation.tariffId}`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@escapenavigator/hooks",
-  "version": "1.10.131",
+  "version": "1.10.132",
   "publishConfig": {
     "access": "public"
   },
@@ -14,9 +14,9 @@
     "test": "jest"
   },
   "dependencies": {
-    "@escapenavigator/services": "^1.10.139",
-    "@escapenavigator/types": "^1.10.130",
-    "@escapenavigator/utils": "^1.10.134",
+    "@escapenavigator/services": "^1.10.140",
+    "@escapenavigator/types": "^1.10.131",
+    "@escapenavigator/utils": "^1.10.135",
     "react": "19.2.6"
   },
   "peerDependencies": {
@@ -30,5 +30,5 @@
     "ts-jest": "^29.1.1",
     "typescript": "^5.6"
   },
-  "gitHead": "1b34f498be3d6fb27dccdd2a3663cef5169bbc91"
+  "gitHead": "cb2f3ab38ef5b8b2a38ab5b2c485e484a0cf9414"
 }