@escapenavigator/hooks 1.10.101 → 1.10.104

package/dist/index.d.ts

@@ -1,2 +1,3 @@
-export type LocalstoreSetValue<T> = T | undefined | ((prev: T | undefined) => T | undefined);
-export declare function useLocalstoreState<T>(token: string, defaultValue?: T): [T | undefined, (update: LocalstoreSetValue<T>) => void];
+export * from './use-localstore-state';
+export * from './use-players-and-variation-picker';
+export * from './players-and-variation-picker';

package/dist/index.js

@@ -1,43 +1,19 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useLocalstoreState = void 0;
-const react_1 = require("react");
-function useLocalstoreState(token, defaultValue) {
-    const [value, setValue] = (0, react_1.useState)(() => {
-        if (typeof window === 'undefined') {
-            return defaultValue;
-        }
-        try {
-            const prev = localStorage.getItem(token);
-            if (prev != null) {
-                return JSON.parse(prev);
-            }
-        }
-        catch (_a) {
-            localStorage.removeItem(token);
-        }
-        return defaultValue;
-    });
-    const setStoredValue = (0, react_1.useCallback)((update) => {
-        setValue((prev) => {
-            const next = typeof update === 'function'
-                ? update(prev)
-                : update;
-            if (typeof window === 'undefined') {
-                return next;
-            }
-            if (next === prev) {
-                return prev;
-            }
-            if (next) {
-                localStorage.setItem(token, JSON.stringify(next));
-            }
-            else {
-                localStorage.removeItem(token);
-            }
-            return next;
-        });
-    }, [token]);
-    return [value, setStoredValue];
-}
-exports.useLocalstoreState = useLocalstoreState;
+__exportStar(require("./use-localstore-state"), exports);
+__exportStar(require("./use-players-and-variation-picker"), exports);
+__exportStar(require("./players-and-variation-picker"), exports);

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

@@ -0,0 +1,94 @@
+import React from 'react';
+import { ProfileCurrencyEnum } from '@escapenavigator/types/dist/profile/enum/profile-currency';
+import { usePlayersAndVariationPicker } from '../use-players-and-variation-picker';
+import { PickerSlotDetails, PickerSlotInfo, PickerSlotVariation, PickerVariationChange } from '../use-players-and-variation-picker/types';
+type LoadSlotDetailsApi = Parameters<typeof usePlayersAndVariationPicker>[0]['loadSlotDetails'];
+export type PlayersAndVariationPickerProps = {
+    /**
+     * Minimal slot identity used to fetch enriched details. Pass
+     * `null`/`undefined` to disable the variation row entirely.
+     */
+    slot: PickerSlotInfo | null | undefined;
+    /** Currently selected tariff id (typically `order.slot.tariffId`). */
+    currentTariffId?: number;
+    /** Currently selected duration in minutes (flex slots only). */
+    currentDuration?: number;
+    /** Slot details api method (`slots.slotDetails` or `openapiWidget.slotDetails`). */
+    loadSlotDetails: LoadSlotDetailsApi;
+    /**
+     * Called when the user picks a different variation. Receives the
+     * coordinate-based change payload that can be forwarded to the backend
+     * without a local cache lookup.
+     */
+    onVariationChange?: (change: PickerVariationChange) => void;
+    /**
+     * Notifies the host whenever the embedded picker resolves the currently
+     * highlighted variation (initial load or user click). Useful when the
+     * host needs the variation's tariff/duration outside of the picker UI
+     * (e.g. to render a price list or seed Formik initial values).
+     */
+    onVariationResolved?: (variation: PickerSlotVariation | undefined) => void;
+    /**
+     * Notifies the host once `/slots/details` resolves. Exposes the slot
+     * coordinates and `isFlex` flag so callers can decide whether to send a
+     * persisted `slotId` (fix) or rely on coordinate-based booking (flex).
+     */
+    onDetailsLoaded?: (details: PickerSlotDetails | null | undefined) => void;
+    /** Players form field value. */
+    players: number;
+    /** Children form field value (defaults to 0). */
+    child?: number;
+    /**
+     * Override for the price map used to render player buttons. Defaults to
+     * the selected variation's tariff; pass an explicit value when the host
+     * already maintains its own tariff state (e.g. legacy flows).
+     */
+    tariff?: Record<string, number>;
+    currency: ProfileCurrencyEnum;
+    /** Minimum players for save validation. */
+    minPlayers?: number;
+    /**
+     * Capacity cap (questroom max, ticket-system `numSeatsAvailable`, etc.).
+     * Player/children buttons exceeding `min(maxFromTariff, maxPlayersLimit)`
+     * are filtered out (not just disabled).
+     */
+    maxPlayersLimit?: number;
+    /**
+     * Slot discount in basis points (1% = 100). Applied to the team price
+     * shown in the hint, mirroring the widget behaviour.
+     */
+    slotDiscount?: number;
+    /** External validation error label (controlled by the host form). */
+    error?: string;
+    /**
+     * Translator. Required for the embedded `usePlayersAndVariationPicker`
+     * (it composes the default flex duration label).
+     */
+    t: (key: string, options?: Record<string, unknown>) => string;
+    /** Fires on every player/children change. */
+    onChange?: (field: 'players' | 'children', value: number) => void;
+    /**
+     * When provided, renders a Save button inside the picker. The default
+     * `players`/`children` state is buffered locally until the user saves.
+     */
+    onSave?: (data: {
+        players: number;
+        children: number;
+    }) => void;
+    /**
+     * When editing an existing order, pass the order id here so the backend
+     * excludes the current booking from occupancy calculations.
+     */
+    orderId?: number;
+};
+/**
+ * Single shared component that renders the "Variation + Players" picker used
+ * by the admin order modals, the widget order flow and the orders package.
+ *
+ * Rationale: the variation-picker logic lives behind
+ * `usePlayersAndVariationPicker`, but the surrounding UI (Tag row, player
+ * buttons, kids row, price hint, save button) was reimplemented in three
+ * places with subtle drift. This component is the single source of truth.
+ */
+export declare const PlayersAndVariationPicker: React.FC<PlayersAndVariationPickerProps>;
+export {};

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

@@ -0,0 +1,164 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PlayersAndVariationPicker = void 0;
+/* eslint-disable complexity */
+/* eslint-disable no-underscore-dangle */
+/* eslint-disable @typescript-eslint/naming-convention */
+const react_1 = __importStar(require("react"));
+const icons_1 = require("@alphakits/icons");
+const dist_1 = require("@alphakits/ui/dist");
+const format_amount_1 = require("@escapenavigator/utils/dist/format-amount");
+const get_players_price_1 = require("@escapenavigator/utils/dist/get-players-price");
+const get_prices_1 = require("@escapenavigator/utils/dist/get-prices");
+const use_players_and_variation_picker_1 = require("../use-players-and-variation-picker");
+/**
+ * Single shared component that renders the "Variation + Players" picker used
+ * by the admin order modals, the widget order flow and the orders package.
+ *
+ * Rationale: the variation-picker logic lives behind
+ * `usePlayersAndVariationPicker`, but the surrounding UI (Tag row, player
+ * 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, }) => {
+    var _a, _b;
+    const { loading, options: pickerOptions, selectedOptionId, selectedVariation, buildVariationChange, selectVariation, details, } = (0, use_players_and_variation_picker_1.usePlayersAndVariationPicker)({
+        slot,
+        currentTariffId,
+        currentDuration,
+        loadSlotDetails,
+        t: t,
+        orderId,
+    });
+    (0, react_1.useEffect)(() => {
+        onDetailsLoaded === null || onDetailsLoaded === void 0 ? void 0 : onDetailsLoaded(details);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [details === null || details === void 0 ? void 0 : details.slotId, details === null || details === void 0 ? void 0 : details.isFlex, (_a = details === null || details === void 0 ? void 0 : details.variations) === null || _a === void 0 ? void 0 : _a.length]);
+    const tariff = (0, react_1.useMemo)(() => (tariffOverride || (selectedVariation === null || selectedVariation === void 0 ? void 0 : selectedVariation.tariff) || {}), [tariffOverride, selectedVariation === null || selectedVariation === void 0 ? void 0 : selectedVariation.tariff]);
+    (0, react_1.useEffect)(() => {
+        onVariationResolved === null || onVariationResolved === void 0 ? void 0 : onVariationResolved(selectedVariation);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [selectedVariation === null || selectedVariation === void 0 ? void 0 : selectedVariation.id, selectedVariation === null || selectedVariation === void 0 ? void 0 : selectedVariation.tariffId, selectedVariation === null || selectedVariation === void 0 ? void 0 : selectedVariation.duration]);
+    const [_players, setPlayers] = (0, react_1.useState)(players);
+    const [_children, setChildren] = (0, react_1.useState)(child);
+    (0, react_1.useEffect)(() => {
+        setPlayers(players);
+    }, [players]);
+    (0, react_1.useEffect)(() => {
+        setChildren(child);
+    }, [child]);
+    const handleChangePlayers = (value) => {
+        setPlayers(value);
+        onChange === null || onChange === void 0 ? void 0 : onChange('players', value);
+    };
+    const handleChangeChildren = (value) => {
+        setChildren(value);
+        onChange === null || onChange === void 0 ? void 0 : onChange('children', value);
+    };
+    const playersOptions = (0, react_1.useMemo)(() => Object.entries(tariff)
+        .filter(([key]) => key !== 'children' && !Number.isNaN(+key))
+        .map(([key, price]) => ({
+        key: +key,
+        price,
+    })), [tariff]);
+    const playersArray = (0, get_prices_1.getPricesPlayersArray)(tariff);
+    const maxFromTariff = playersArray.length ? +playersArray[playersArray.length - 1] : 0;
+    const effectiveMax = typeof maxPlayersLimit === 'number' && Number.isFinite(maxPlayersLimit)
+        ? Math.min(maxFromTariff, maxPlayersLimit)
+        : maxFromTariff;
+    const childrenOptions = (0, react_1.useMemo)(() => {
+        if (!tariff.child || !maxFromTariff)
+            return [];
+        const maxChildren = maxFromTariff + 1;
+        return Array.from({ length: maxChildren }, (_, i) => i);
+    }, [tariff, maxFromTariff]);
+    const teamPriceBase = (0, get_players_price_1.getPlayersPrice)({
+        players: _players,
+        children: _children,
+        price: tariff,
+    });
+    const teamPrice = slotDiscount
+        ? teamPriceBase - Math.floor((teamPriceBase / 10000) * slotDiscount)
+        : teamPriceBase;
+    const totalHeads = _players + (_children || 0);
+    const personPrice = totalHeads > 0 ? Math.floor(teamPrice / totalHeads) : 0;
+    const showVariations = pickerOptions.length > 1;
+    const variationDescription = (_b = selectedVariation === null || selectedVariation === void 0 ? void 0 : selectedVariation.description) !== null && _b !== void 0 ? _b : null;
+    const handleVariationClick = (optionId, isFree) => {
+        if (!isFree)
+            return;
+        selectVariation(optionId);
+        const change = buildVariationChange(optionId);
+        if (!change)
+            return;
+        onVariationChange === null || onVariationChange === void 0 ? void 0 : onVariationChange(change);
+    };
+    if (loading && !details) {
+        return (react_1.default.createElement(dist_1.FlexColumns, { columns: 1, gr: 16 },
+            react_1.default.createElement(dist_1.Skeleton, { visible: true, animate: true },
+                react_1.default.createElement("div", { style: { height: 80 } })),
+            react_1.default.createElement(dist_1.Skeleton, { visible: true, animate: true },
+                react_1.default.createElement("div", { style: { height: 60 } }))));
+    }
+    return (react_1.default.createElement(dist_1.FlexColumns, { columns: 1, gr: 16 },
+        showVariations && (react_1.default.createElement(dist_1.FlexColumns, { columns: 1, gr: 8 },
+            react_1.default.createElement(dist_1.Typography.Text, { view: "title", color: "secondary" }, t('prices:variation')),
+            react_1.default.createElement(dist_1.Flex, { gap: "xs", wrap: true, justify: "start" }, pickerOptions.map((option) => (react_1.default.createElement("div", { key: option.id, style: option.isFree
+                    ? undefined
+                    : { opacity: 0.4, pointerEvents: 'none' } },
+                react_1.default.createElement(dist_1.Tag, { view: selectedOptionId === option.id
+                        ? 'primary-inverted'
+                        : 'primary', text: option.label, onClick: () => handleVariationClick(option.id, option.isFree) }))))),
+            !!variationDescription && (react_1.default.createElement(dist_1.Typography.Text, { view: "caps", color: "secondary" }, variationDescription)))),
+        react_1.default.createElement(dist_1.FlexColumns, { columns: 1, gr: 8 },
+            react_1.default.createElement(dist_1.Typography.Text, { view: "title", color: "secondary" },
+                tariff.child ? t('prices:adults') : t('prices:choosePlayersAmount'),
+                ' ',
+                !!_players && tariff[_players] != null && (`(${(0, format_amount_1.formatAmount)(tariff[_players], currency)})`)),
+            react_1.default.createElement(dist_1.Flex, { gap: "xs", wrap: true, justify: "start" }, playersOptions
+                .filter((p) => p.key + (_children || 0) <= effectiveMax)
+                .map((p) => (react_1.default.createElement(dist_1.Button, { key: `adult-${p.key}`, size: "xs", style: { width: 40, minWidth: 40 }, onClick: () => handleChangePlayers(p.key), view: _players === p.key ? 'primary' : 'outlined' }, p.key))))),
+        !!childrenOptions.length && (react_1.default.createElement(dist_1.FlexColumns, { columns: 1, gr: 8 },
+            react_1.default.createElement(dist_1.Typography.Text, { view: "title", color: "secondary" },
+                t('prices:kids'),
+                ' ',
+                !!_children && tariff.child != null && (`(${(0, format_amount_1.formatAmount)(_children * tariff.child, currency)})`)),
+            react_1.default.createElement(dist_1.Flex, { gap: "xs", wrap: true, justify: "start" }, childrenOptions
+                .filter((count) => _players + count <= effectiveMax)
+                .map((count) => {
+                const isActive = _children === count;
+                return (react_1.default.createElement(dist_1.Button, { key: `child-${count}`, size: "xs", style: { width: 40, minWidth: 40 }, onClick: () => handleChangeChildren(isActive ? 0 : count), view: isActive ? 'primary' : 'outlined' }, count));
+            })))),
+        !!totalHeads && (react_1.default.createElement(dist_1.Flex, { justify: "start", gap: "xs" },
+            react_1.default.createElement(icons_1.InfoMarkS, { style: { fill: 'var(--color-text-secondary)' } }),
+            react_1.default.createElement(dist_1.Typography.Text, { view: "caps", color: "secondary" }, t('prices:totalPriceDescription', {
+                teamPrice: (0, format_amount_1.formatAmount)(teamPrice, currency),
+                personPrice: (0, format_amount_1.formatAmount)(personPrice, currency),
+            })))),
+        !!error && (react_1.default.createElement(dist_1.ToastPlate, { view: "negative" }, error || t('prices:playersError', { minPlayers, maxPlayers: effectiveMax }))),
+        !!onSave && (react_1.default.createElement(dist_1.Button, { onClick: () => onSave({ players: _players, children: _children }), view: "primary", size: "xs" }, t('common:save')))));
+};
+exports.PlayersAndVariationPicker = PlayersAndVariationPicker;

package/dist/use-localstore-state/index.d.ts

@@ -0,0 +1,2 @@
+export type LocalstoreSetValue<T> = T | undefined | ((prev: T | undefined) => T | undefined);
+export declare function useLocalstoreState<T>(token: string, defaultValue?: T): [T | undefined, (update: LocalstoreSetValue<T>) => void];

package/dist/use-localstore-state/index.js

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLocalstoreState = void 0;
+const react_1 = require("react");
+function readFromLocalstore(token, defaultValue) {
+    if (typeof window === 'undefined') {
+        return defaultValue;
+    }
+    try {
+        const prev = localStorage.getItem(token);
+        if (prev != null) {
+            return JSON.parse(prev);
+        }
+    }
+    catch (_a) {
+        localStorage.removeItem(token);
+    }
+    return defaultValue;
+}
+function useLocalstoreState(token, defaultValue) {
+    // We track defaultValue via ref so token changes don't pull in stale closures
+    // while also avoiding extra effect runs when consumers pass an inline default.
+    const defaultValueRef = (0, react_1.useRef)(defaultValue);
+    defaultValueRef.current = defaultValue;
+    const [value, setValue] = (0, react_1.useState)(() => readFromLocalstore(token, defaultValue));
+    const prevTokenRef = (0, react_1.useRef)(token);
+    (0, react_1.useEffect)(() => {
+        if (prevTokenRef.current === token)
+            return;
+        prevTokenRef.current = token;
+        setValue(readFromLocalstore(token, defaultValueRef.current));
+    }, [token]);
+    const setStoredValue = (0, react_1.useCallback)((update) => {
+        setValue((prev) => {
+            const next = typeof update === 'function'
+                ? update(prev)
+                : update;
+            if (typeof window === 'undefined') {
+                return next;
+            }
+            if (next === prev) {
+                return prev;
+            }
+            if (next) {
+                localStorage.setItem(token, JSON.stringify(next));
+            }
+            else {
+                localStorage.removeItem(token);
+            }
+            return next;
+        });
+    }, [token]);
+    return [value, setStoredValue];
+}
+exports.useLocalstoreState = useLocalstoreState;

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

@@ -0,0 +1,92 @@
+import { PickerOption, PickerSlotDetails, PickerSlotInfo, PickerSlotVariation, PickerVariationChange } from './types';
+export * from './types';
+type LoadSlotDetailsApi = {
+    (params: {
+        slotId?: number;
+        questroomId: number;
+        date: string;
+        start: string;
+        orderId?: number;
+    }, transportConfig?: any): Promise<{
+        data: PickerSlotDetails;
+    }>;
+    displayName: string;
+};
+type Params = {
+    /**
+     * Top-level slot record fetched from the listing. Used to identify the
+     * slot for the `/details` request and to seed the booking payload.
+     */
+    slot: PickerSlotInfo | null | undefined;
+    /**
+     * Currently selected tariff id (typically `order.slot.tariffId`). Used to
+     * highlight the active variation. For flex slots also pass
+     * `currentDuration` so the picker can disambiguate between options that
+     * share a tariff.
+     */
+    currentTariffId?: number;
+    /**
+     * Currently selected game duration in minutes. Optional, only relevant
+     * for flex slots; ignored for fix slots.
+     */
+    currentDuration?: number;
+    /**
+     * Service-layer API method that returns enriched slot details.
+     * Pass `slots.slotDetails` (admin) or `openapiWidget.slotDetails` (widget).
+     */
+    loadSlotDetails: LoadSlotDetailsApi;
+    /**
+     * Translator. Only used for the default flex duration label suffix.
+     */
+    t: (key: string) => string;
+    /**
+     * When editing an existing order, pass the order id here so the backend
+     * excludes the current booking from occupancy calculations.
+     * This prevents the edited order from blocking its own slot/duration.
+     */
+    orderId?: number;
+};
+type Result = {
+    loading: boolean;
+    isFlex: boolean;
+    options: PickerOption[];
+    selectedVariation: PickerSlotVariation | undefined;
+    /**
+     * Stable id of the highlighted picker option. Use this (and not
+     * `tariffId`) when comparing against `option.id` in the UI — flex
+     * variations may share a tariff across durations.
+     */
+    selectedOptionId: string | undefined;
+    /**
+     * Variation hint text. For fix slots returns the selected non-default
+     * variation title; for flex returns null (caller may compose its own
+     * duration label from `selectedVariation`).
+     */
+    hint: string | null;
+    /**
+     * Translate a clicked picker option into a coordinate-based booking
+     * payload that can be forwarded to the create-order / update-slot
+     * endpoints without any local cache lookup.
+     */
+    buildVariationChange: (optionId: string) => PickerVariationChange | null;
+    /**
+     * Force-update the internal selected option (used by the picker UI on
+     * click, before the host has had a chance to push back updated
+     * `currentTariffId`/`currentDuration` props).
+     */
+    selectVariation: (optionId: string) => void;
+    details: PickerSlotDetails | null | undefined;
+};
+/**
+ * Single source of truth for the variation picker shared between admin order
+ * modals, widget order flow and the orders package.
+ *
+ * Internally fetches `/slots/details` via the supplied api method and exposes
+ * a normalised contract over the unified `variations[]` payload:
+ *  - `options` and `selectedOptionId` for rendering tag/button rows
+ *  - `selectedVariation` for callers that need the underlying variation
+ *    (e.g. to compute prices)
+ *  - `buildVariationChange(id)` for translating a tap to a coordinate-based
+ *    booking payload `{ questroomId, date, start, tariffId, duration, slotId? }`
+ */
+export declare const usePlayersAndVariationPicker: ({ slot, currentTariffId, currentDuration, loadSlotDetails, t, orderId, }: Params) => Result;

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

@@ -0,0 +1,169 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePlayersAndVariationPicker = void 0;
+/* eslint-disable no-nested-ternary */
+const react_1 = require("react");
+const use_api_method_1 = require("@escapenavigator/services/dist/hooks/use-api-method");
+__exportStar(require("./types"), exports);
+const variationKey = (variation) => { var _a; return (_a = variation.id) !== null && _a !== void 0 ? _a : `${variation.tariffId}-${variation.duration}`; };
+/**
+ * Single source of truth for the variation picker shared between admin order
+ * modals, widget order flow and the orders package.
+ *
+ * Internally fetches `/slots/details` via the supplied api method and exposes
+ * a normalised contract over the unified `variations[]` payload:
+ *  - `options` and `selectedOptionId` for rendering tag/button rows
+ *  - `selectedVariation` for callers that need the underlying variation
+ *    (e.g. to compute prices)
+ *  - `buildVariationChange(id)` for translating a tap to a coordinate-based
+ *    booking payload `{ questroomId, date, start, tariffId, duration, slotId? }`
+ */
+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 fetch = api[`${loadSlotDetails.displayName}Fetch`];
+    (0, react_1.useEffect)(() => {
+        if (!slot)
+            return;
+        fetch({
+            slotId: slot.id,
+            questroomId: slot.questroomId,
+            date: slot.date,
+            start: slot.start,
+            orderId,
+        });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [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]);
+    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) => {
+        if (!rows.length)
+            return undefined;
+        if (isFlex) {
+            // Match by (tariffId, duration) when both are known; fall back to
+            // duration-only or tariff-only when one is missing.
+            if (currentTariffId != null && currentDuration != null) {
+                const exact = rows.find((row) => row.tariffId === currentTariffId
+                    && row.duration === currentDuration);
+                if (exact)
+                    return exact;
+            }
+            if (currentDuration != null) {
+                const byDuration = rows.find((row) => row.duration === currentDuration);
+                if (byDuration)
+                    return byDuration;
+            }
+            if (currentTariffId != null) {
+                const byTariff = rows.find((row) => row.tariffId === currentTariffId);
+                if (byTariff)
+                    return byTariff;
+            }
+            return rows.find((row) => row.isDefault) || rows[0];
+        }
+        if (currentTariffId != null) {
+            const byTariff = rows.find((row) => row.tariffId === currentTariffId);
+            if (byTariff)
+                return byTariff;
+        }
+        return rows.find((row) => row.isDefault) || rows[0];
+    };
+    const propsSelectedVariation = (0, react_1.useMemo)(() => findCurrentVariation(variations), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [variations, isFlex, currentTariffId, currentDuration]);
+    const propsSelectedOptionId = propsSelectedVariation
+        ? variationKey(propsSelectedVariation)
+        : undefined;
+    // Internal click state — lets the picker switch its highlighted option
+    // immediately, even if the host doesn't push back updated
+    // `currentTariffId`/`currentDuration` props. We re-seed it whenever the
+    // prop-derived option changes (initial load, host explicitly changing
+    // the order's tariff, etc.).
+    const [clickedOptionId, setClickedOptionId] = (0, react_1.useState)(undefined);
+    (0, react_1.useEffect)(() => {
+        setClickedOptionId(undefined);
+    }, [propsSelectedOptionId, data === null || data === void 0 ? void 0 : data.slotId]);
+    const selectedOptionId = clickedOptionId !== null && clickedOptionId !== void 0 ? clickedOptionId : propsSelectedOptionId;
+    const selectedVariation = (0, react_1.useMemo)(() => {
+        var _a;
+        return (_a = variations.find((variation) => variationKey(variation) === selectedOptionId)) !== null && _a !== void 0 ? _a : propsSelectedVariation;
+    }, [variations, selectedOptionId, propsSelectedVariation]);
+    const options = (0, react_1.useMemo)(() => {
+        if (variations.length < 2)
+            return [];
+        return variations.map((variation) => {
+            var _a;
+            const id = variationKey(variation);
+            const isCurrent = id === selectedOptionId;
+            const label = isFlex
+                ? `${variation.duration} ${t('common:минут')}`
+                : (variation.isDefault
+                    ? 'Default'
+                    : variation.title || `Tariff ${variation.tariffId}`);
+            return {
+                id,
+                tariffId: variation.tariffId,
+                duration: variation.duration,
+                label,
+                description: !isFlex ? (_a = variation.description) !== null && _a !== void 0 ? _a : null : null,
+                isCurrent,
+                isFree: !!variation.isFree,
+            };
+        });
+    }, [variations, isFlex, selectedOptionId, t]);
+    const hint = (0, react_1.useMemo)(() => {
+        if (!isFlex && selectedVariation && !selectedVariation.isDefault) {
+            return selectedVariation.title || null;
+        }
+        return null;
+    }, [isFlex, selectedVariation]);
+    const buildVariationChange = (optionId) => {
+        if (!data)
+            return null;
+        const variation = variations.find((row) => variationKey(row) === optionId);
+        if (!variation)
+            return null;
+        return {
+            questroomId: data.questroomId,
+            date: data.date,
+            start: data.start,
+            slotId: data.slotId,
+            tariffId: variation.tariffId,
+            duration: variation.duration,
+        };
+    };
+    /**
+     * Update internal click state. Call from the UI before notifying the
+     * host so the highlighted Tag updates without round-tripping through
+     * controlled props.
+     */
+    const selectVariation = (optionId) => {
+        setClickedOptionId(optionId);
+    };
+    return {
+        loading,
+        isFlex,
+        options,
+        selectedVariation,
+        selectedOptionId,
+        hint,
+        buildVariationChange,
+        selectVariation,
+        details: data,
+    };
+};
+exports.usePlayersAndVariationPicker = usePlayersAndVariationPicker;

package/dist/use-players-and-variation-picker/types.d.ts

@@ -0,0 +1,85 @@
+/**
+ * Shared shapes used by `usePlayersAndVariationPicker`.
+ *
+ * They intentionally mirror both admin (`SlotRO`/`SlotEnrichedRO`) and widget
+ * (`OpenapiSlotRO`/`OpenapiSlotEnrichedRO`) contracts so a single picker can
+ * be plugged into either context.
+ */
+export type PickerSlotVariation = {
+    /**
+     * Stable picker key returned by the backend (`${tariffId}-${duration}`).
+     * Optional only for backwards compatibility while older hosts roll out
+     * the new field; once everyone is on the new contract this becomes the
+     * authoritative picker option id.
+     */
+    id?: string;
+    tariffId: number;
+    duration: number;
+    title: string;
+    description?: string;
+    isDefault: boolean;
+    isFree: boolean;
+    tariff: {
+        [k: string]: number;
+    };
+    minPlayers: number;
+    maxPlayers: number;
+    numSeatsAvailable: number;
+};
+export type PickerSlotDetails = {
+    questroomId: number;
+    date: string;
+    start: string;
+    /** Persisted parent slot id; absent for flex slots. */
+    slotId?: number;
+    isFlex: boolean;
+    variations: PickerSlotVariation[];
+    numSeatsAvailable: number;
+    minPlayers: number;
+};
+/**
+ * Minimal slot identity needed to fetch enriched details. Everything else
+ * (tariff, ruleId, discount, ...) lives in the host's order/slot record;
+ * the picker reads its own copy from `/slots/details`.
+ */
+export type PickerSlotInfo = {
+    id: number;
+    questroomId: number;
+    date: string;
+    start: string;
+};
+export type PickerOption = {
+    /**
+     * Stable picker option key. Mirrors `PickerSlotVariation.id`
+     * (`${tariffId}-${duration}`) so that flex variations sharing a tariff
+     * across durations stay distinguishable.
+     */
+    id: string;
+    tariffId: number;
+    duration: number;
+    label: string;
+    description?: string | null;
+    isCurrent: boolean;
+    /**
+     * True when the variation is currently bookable. Unbookable variations
+     * are still rendered (greyed out) so the user sees the full duration
+     * list returned by `/slots/details`.
+     */
+    isFree: boolean;
+};
+/**
+ * Coordinate-based booking payload produced by the picker on user change.
+ *
+ * Frontend forwards these fields to the backend without any local cache
+ * lookup. Backend resolves the actual slot via `(slotId)` for fix slots or
+ * via `(questroomId, date, start, duration, tariffId)` for flex slots.
+ */
+export type PickerVariationChange = {
+    questroomId: number;
+    date: string;
+    start: string;
+    tariffId: number;
+    duration: number;
+    /** Persisted parent slot id; only set for fix slots. */
+    slotId?: number;
+};

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

@@ -0,0 +1,9 @@
+"use strict";
+/**
+ * Shared shapes used by `usePlayersAndVariationPicker`.
+ *
+ * They intentionally mirror both admin (`SlotRO`/`SlotEnrichedRO`) and widget
+ * (`OpenapiSlotRO`/`OpenapiSlotEnrichedRO`) contracts so a single picker can
+ * be plugged into either context.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@escapenavigator/hooks",
-  "version": "1.10.101",
+  "version": "1.10.104",
   "publishConfig": {
     "access": "public"
   },
@@ -14,9 +14,16 @@
     "test": "jest"
   },
   "dependencies": {
-    "@escapenavigator/types": "^1.10.101",
+    "@escapenavigator/services": "^1.10.112",
+    "@escapenavigator/types": "^1.10.103",
+    "@escapenavigator/utils": "^1.10.107",
     "react": "^18.3.1"
   },
+  "peerDependencies": {
+    "@alphakits/icons": "*",
+    "@alphakits/ui": "*",
+    "react-i18next": "*"
+  },
   "devDependencies": {
     "@rollup/plugin-node-resolve": "^13.0.0",
     "@rollup/plugin-replace": "^2.4.2",
@@ -41,5 +48,5 @@
     "react": "^18.3.1",
     "axios": "^0.21.1"
   },
-  "gitHead": "ed7be71b51074fef0f397a620a7b06edee3f5d54"
+  "gitHead": "0e41f6e541edd14685f9dd242e17207d1b8f6660"
 }