@escapenavigator/hooks 2.0.50 → 2.1.0

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

@@ -195,7 +195,7 @@ const PlayersAndVariationPicker = ({ slot, currentTariffId, currentDuration, loa
         minPlayers,
         maxPlayersLimit,
     }), [tariff, categories, _composition, minPlayers, maxPlayersLimit]);
-    const { capacityMax, pricingMax, effectiveMin, pricingHeads, totalHeads, levelUnavailable, belowMin, capacityReached, pricingFull, maxByCategory, baseLevelOptions, } = limits;
+    const { capacityMax, pricingMax, effectiveMin, pricingHeads, totalHeads, levelUnavailable, belowMin, capacityReached, maxByCategory, baseLevelOptions, } = limits;
     const baseCategory = categories.find((category) => category.mode === tariff_category_mode_enum_1.TariffCategoryModeEnum.BASE);
     const baseCategoryKey = baseCategory === null || baseCategory === void 0 ? void 0 : baseCategory.key;
     const applyComposition = (next) => {
@@ -284,13 +284,12 @@ const PlayersAndVariationPicker = ({ slot, currentTariffId, currentDuration, loa
     const floorReached = minAmount > 0 && teamPriceBase <= minAmount && priceWithoutDiscounts > minAmount;
     const minAmountLabel = (0, format_amount_1.formatAmount)(minAmount, currency);
     /**
-     * Есть ли в тарифе льготные строки — категории, которые занимают место в
-     * цене, но платят не полную долю. Только ради них состав рисуется
-     * степперами: гость должен разложить группу по строкам. Без них
-     * раскладывать нечего, и работает прежний выбор числа тегами — он
-     * компактнее и привычнее.
+     * Есть ли в тарифе строки кроме базовых взрослых — льготные места или
+     * надбавка сверх группы. Только тогда состав рисуется степперами: гость
+     * должен разложить группу по строкам. Без них раскладывать нечего, и
+     * работает прежний выбор числа тегами — он компактнее и привычнее.
      */
-    const hasReducedCategories = categories.some((category) => category.countsInPrice && category.mode !== tariff_category_mode_enum_1.TariffCategoryModeEnum.BASE);
+    const hasExtraRows = (0, composition_price_1.hasExtraCategories)(categories);
     /** Категории сверх групповой цены — они всегда строка со степпером. */
     const addOnCategories = categories.filter((category) => !category.countsInPrice);
     const handleSelectLevel = (level) => {
@@ -352,10 +351,15 @@ const PlayersAndVariationPicker = ({ slot, currentTariffId, currentDuration, loa
     const priceSummary = (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(flex_1.Flex, { justify: 'start', gap: 'xs' },
             react_1.default.createElement(InfoMarkS_1.default, { style: { fill: 'var(--color-text-secondary)' } }),
-            react_1.default.createElement(typography_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),
-            }))),
+            react_1.default.createElement(typography_1.Typography.Text, { view: 'caps', color: 'secondary' }, hasExtraRows
+                ? t('prices:totalPriceTeam', {
+                    teamPrice: (0, format_amount_1.formatAmount)(teamPrice, currency),
+                    defaultValue: 'Стоимость за команду {{teamPrice}}',
+                })
+                : t('prices:totalPriceDescription', {
+                    teamPrice: (0, format_amount_1.formatAmount)(teamPrice, currency),
+                    personPrice: (0, format_amount_1.formatAmount)(personPrice, currency),
+                }))),
         minAmount > 0 && (react_1.default.createElement(typography_1.Typography.Text, { view: 'caps', color: 'secondary' }, floorReached
             ? t('prices:floorReached', {
                 minAmount: minAmountLabel,
@@ -391,30 +395,33 @@ const PlayersAndVariationPicker = ({ slot, currentTariffId, currentDuration, loa
             !!variationDescription && (react_1.default.createElement(typography_1.Typography.Text, { view: 'caps', color: 'secondary' }, variationDescription)))),
         react_1.default.createElement(flex_columns_1.FlexColumns, { columns: 1, gr: 8 },
             react_1.default.createElement(flex_1.Flex, { gap: 'sm', align: 'center', justify: 'between' },
-                react_1.default.createElement(typography_1.Typography.Text, { view: 'title', color: 'secondary' }, !hasReducedCategories && addOnCategories.length && baseCategory
+                react_1.default.createElement(typography_1.Typography.Text, { view: 'title', color: 'secondary' }, !hasExtraRows && addOnCategories.length && baseCategory
                     ? categoryTitle(baseCategory)
                     : t('prices:choosePlayersAmount')),
-                !hasReducedCategories && !flexSelected && !!tariff[pricingHeads] && (react_1.default.createElement(typography_1.Typography.Text, { view: 'title', color: 'secondary' }, (0, format_amount_1.formatAmount)(tariff[pricingHeads], currency)))),
+                !hasExtraRows && !flexSelected && !!tariff[pricingHeads] && (react_1.default.createElement(typography_1.Typography.Text, { view: 'title', color: 'secondary' }, (0, format_amount_1.formatAmount)(tariff[pricingHeads], currency)))),
             !!flexPlayersOption && (react_1.default.createElement(flex_1.Flex, { gap: 'xs', wrap: true, justify: 'start' },
                 react_1.default.createElement(tag_1.Tag, { key: 'flex-players', text: flexPlayersOption.label, onClick: handleSelectFlex, view: flexSelected ? 'primary-inverted' : 'primary' }))),
-            !flexSelected && !hasReducedCategories && (react_1.default.createElement(flex_1.Flex, { gap: 'xs', wrap: true, justify: 'start' }, baseLevelOptions.map((level) => (react_1.default.createElement(tag_1.Tag, { key: `level-${level}`, text: `${level}`, onClick: () => handleSelectLevel(level), view: pricingHeads === level ? 'primary-inverted' : 'primary' }))))),
+            !flexSelected && !hasExtraRows && (react_1.default.createElement(flex_1.Flex, { gap: 'xs', wrap: true, justify: 'start' }, baseLevelOptions.map((level) => (react_1.default.createElement(tag_1.Tag, { key: `level-${level}`, text: `${level}`, onClick: () => handleSelectLevel(level), view: pricingHeads === level ? 'primary-inverted' : 'primary' }))))),
             !flexSelected &&
-                (hasReducedCategories ? categories : addOnCategories).map((category) => {
+                (hasExtraRows ? categories : addOnCategories).map((category) => {
                     var _a, _b;
                     const value = Math.max(0, _composition[category.key] || 0);
+                    const rowMax = (_a = maxByCategory[category.key]) !== null && _a !== void 0 ? _a : value;
+                    const plusLimitHint = value >= rowMax
+                        ? capacityReached
+                            ? t('prices:capacityReached', {
+                                count: capacityMax,
+                                defaultValue: 'Максимум {{count}} участников',
+                            })
+                            : t('prices:pricingMaxReached', {
+                                count: pricingMax,
+                                defaultValue: 'Максимум {{count}} участников по этому тарифу',
+                            })
+                        : undefined;
                     return (react_1.default.createElement(ticket_row_1.TicketRow, { key: category.key, title: categoryTitle(category), priceHint: categoryPriceHint(category), description: !hidePriceHints
-                            ? ((_a = category.description) === null || _a === void 0 ? void 0 : _a.trim()) || undefined
-                            : undefined, value: value, min: 0, max: (_b = maxByCategory[category.key]) !== null && _b !== void 0 ? _b : value, minusLabel: t('prices:minus', { defaultValue: 'На одного меньше' }), plusLabel: t('prices:plus', { defaultValue: 'На одного больше' }), onChange: (next) => handleChangeCategory(category.key, next) }));
-                }),
-            !flexSelected && (capacityReached || pricingFull) && (react_1.default.createElement(typography_1.Typography.Text, { view: 'caps', color: 'attention', weight: 'medium' }, capacityReached
-                ? t('prices:capacityReached', {
-                    count: capacityMax,
-                    defaultValue: 'Максимум {{count}} участников',
-                })
-                : t('prices:pricingMaxReached', {
-                    count: pricingMax,
-                    defaultValue: 'Максимум {{count}} участников по этому тарифу',
-                })))),
+                            ? ((_b = category.description) === null || _b === void 0 ? void 0 : _b.trim()) || undefined
+                            : undefined, value: value, min: 0, max: rowMax, minusLabel: t('prices:minus', { defaultValue: 'На одного меньше' }), plusLabel: t('prices:plus', { defaultValue: 'На одного больше' }), plusDisabledHint: plusLimitHint, onChange: (next) => handleChangeCategory(category.key, next) }));
+                })),
         !hidePriceHints && !flexSelected && bookable && (react_1.default.createElement(flex_columns_1.FlexColumns, { columns: 1, gr: 4, gc: 0 }, priceSummary)),
         hidePriceHints && !flexSelected && bookable && (react_1.default.createElement("div", { style: {
                 display: 'flex',

package/dist/players-and-variation-picker/ticket-row.d.ts

@@ -8,6 +8,8 @@ type Props = {
     max: number;
     minusLabel: string;
     plusLabel: string;
+    /** Почему «плюс» больше не нажимается — показывается по клику на задисейбленную кнопку. */
+    plusDisabledHint?: string;
     onChange: (value: number) => void;
 };
 /**

package/dist/players-and-variation-picker/ticket-row.js

@@ -1,4 +1,37 @@
 "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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -6,15 +39,21 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TicketRow = void 0;
 const MinusM_1 = __importDefault(require("@alphakits/icons/dist/MinusM"));
 const PlusM_1 = __importDefault(require("@alphakits/icons/dist/PlusM"));
+const dist_1 = require("@alphakits/ui/dist");
 const typography_1 = require("@alphakits/ui/dist/typography");
-const react_1 = __importDefault(require("react"));
+const functional_popover_panel_style_1 = require("@escapenavigator/utils/dist/functional-popover-panel-style");
+const react_1 = __importStar(require("react"));
 const index_module_css_1 = __importDefault(require("./index.module.css"));
 /**
  * Строка спеццены: слева что это за места и сколько они снимают
  * с группового тарифа, справа сколько таких мест в брони.
  */
-const TicketRow = ({ title, priceHint, description, value, min, max, minusLabel, plusLabel, onChange, }) => {
+const TicketRow = ({ title, priceHint, description, value, min, max, minusLabel, plusLabel, plusDisabledHint, onChange, }) => {
     const active = value > min;
+    const plusLocked = value >= max;
+    const plusWrapRef = (0, react_1.useRef)(null);
+    const [plusHintOpen, setPlusHintOpen] = (0, react_1.useState)(false);
+    (0, dist_1.useClickOutside)(plusWrapRef, () => setPlusHintOpen(false));
     return (react_1.default.createElement("div", { className: active ? `${index_module_css_1.default.ticket} ${index_module_css_1.default.ticketActive}` : index_module_css_1.default.ticket },
         react_1.default.createElement("div", { className: index_module_css_1.default.body },
             react_1.default.createElement(typography_1.Typography.Text, { view: 'primary-small', weight: 'medium' }, title),
@@ -24,7 +63,19 @@ const TicketRow = ({ title, priceHint, description, value, min, max, minusLabel,
             react_1.default.createElement("button", { type: 'button', className: index_module_css_1.default.stepperButton, "aria-label": minusLabel, disabled: value <= min, onClick: () => onChange(Math.max(min, value - 1)) },
                 react_1.default.createElement(MinusM_1.default, null)),
             react_1.default.createElement("span", { className: index_module_css_1.default.stepperValue }, value),
-            react_1.default.createElement("button", { type: 'button', className: index_module_css_1.default.stepperButton, "aria-label": plusLabel, disabled: value >= max, onClick: () => onChange(Math.min(max, value + 1)) },
-                react_1.default.createElement(PlusM_1.default, null)))));
+            react_1.default.createElement("div", { ref: plusWrapRef, className: plusLocked
+                    ? `${index_module_css_1.default.plusWrap} ${index_module_css_1.default.plusWrapLocked}`
+                    : index_module_css_1.default.plusWrap, onClick: () => {
+                    if (plusLocked && plusDisabledHint)
+                        setPlusHintOpen((open) => !open);
+                } },
+                react_1.default.createElement("button", { type: 'button', className: index_module_css_1.default.stepperButton, "aria-label": plusLabel, disabled: plusLocked, onClick: (event) => {
+                        event.stopPropagation();
+                        onChange(Math.min(max, value + 1));
+                    } },
+                    react_1.default.createElement(PlusM_1.default, null)),
+                !!plusDisabledHint && (react_1.default.createElement(dist_1.Popover, { open: plusHintOpen, anchorElement: plusWrapRef.current, position: 'top', offset: [0, 8], withTransition: true },
+                    react_1.default.createElement("div", { style: (0, functional_popover_panel_style_1.functionalPopoverPanel)({ padding: 8, maxWidth: 260 }) },
+                        react_1.default.createElement(typography_1.Typography.Text, { view: 'caps' }, plusDisabledHint))))))));
 };
 exports.TicketRow = TicketRow;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@escapenavigator/hooks",
-  "version": "2.0.50",
+  "version": "2.1.0",
   "publishConfig": {
     "access": "public"
   },
@@ -14,9 +14,9 @@
     "test": "jest"
   },
   "dependencies": {
-    "@escapenavigator/services": "^2.0.50",
-    "@escapenavigator/types": "^2.0.48",
-    "@escapenavigator/utils": "^2.0.50",
+    "@escapenavigator/services": "^2.1.0",
+    "@escapenavigator/types": "^2.1.0",
+    "@escapenavigator/utils": "^2.1.0",
     "libphonenumber-js": "^1.12.24",
     "react": "19.2.6",
     "react-phone-input-2": "^2.15.1"
@@ -32,5 +32,5 @@
     "ts-jest": "^29.1.1",
     "typescript": "^5.6"
   },
-  "gitHead": "480174116c4a107d2db7e0a4ae92fd0b4e0c63e5"
+  "gitHead": "6566478707369811402ca08e2193bf0ead7a1172"
 }