@escapenavigator/utils 2.2.6 → 2.2.8

package/dist/apply-background-palette.d.ts

@@ -0,0 +1 @@
+export declare const applyBackgroundPalette: (bgColor: string | undefined, setVar: (key: string, value: string | null) => void) => void;

package/dist/apply-background-palette.js

@@ -0,0 +1,180 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.applyBackgroundPalette = void 0;
+const toRgb = (color) => {
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d');
+    if (!ctx)
+        return null;
+    ctx.fillStyle = '#000000';
+    ctx.fillStyle = color;
+    const normalized = ctx.fillStyle;
+    if (!normalized)
+        return null;
+    if (normalized.startsWith('#')) {
+        let hex = normalized.slice(1);
+        if (hex.length === 3) {
+            hex = hex
+                .split('')
+                .map((c) => c + c)
+                .join('');
+        }
+        if (hex.length !== 6)
+            return null;
+        return {
+            r: parseInt(hex.slice(0, 2), 16),
+            g: parseInt(hex.slice(2, 4), 16),
+            b: parseInt(hex.slice(4, 6), 16),
+        };
+    }
+    const match = normalized.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)/i);
+    if (!match)
+        return null;
+    return {
+        r: Number(match[1]),
+        g: Number(match[2]),
+        b: Number(match[3]),
+    };
+};
+const clamp = (value) => Math.max(0, Math.min(255, Math.round(value)));
+const mixWithWhite = (color, ratio) => ({
+    r: clamp(color.r + (255 - color.r) * ratio),
+    g: clamp(color.g + (255 - color.g) * ratio),
+    b: clamp(color.b + (255 - color.b) * ratio),
+});
+const mixWithBlack = (color, ratio) => ({
+    r: clamp(color.r * (1 - ratio)),
+    g: clamp(color.g * (1 - ratio)),
+    b: clamp(color.b * (1 - ratio)),
+});
+const rgbToHsl = ({ r, g, b }) => {
+    const rn = r / 255;
+    const gn = g / 255;
+    const bn = b / 255;
+    const max = Math.max(rn, gn, bn);
+    const min = Math.min(rn, gn, bn);
+    const l = (max + min) / 2;
+    const d = max - min;
+    let h = 0;
+    let s = 0;
+    if (d !== 0) {
+        s = d / (1 - Math.abs(2 * l - 1));
+        switch (max) {
+            case rn:
+                h = ((gn - bn) / d) % 6;
+                break;
+            case gn:
+                h = (bn - rn) / d + 2;
+                break;
+            default:
+                h = (rn - gn) / d + 4;
+                break;
+        }
+        h *= 60;
+        if (h < 0)
+            h += 360;
+    }
+    return { h, s, l };
+};
+const hslToRgb = ({ h, s, l }) => {
+    const c = (1 - Math.abs(2 * l - 1)) * s;
+    const hp = h / 60;
+    const x = c * (1 - Math.abs((hp % 2) - 1));
+    let r1 = 0;
+    let g1 = 0;
+    let b1 = 0;
+    if (hp >= 0 && hp < 1)
+        [r1, g1, b1] = [c, x, 0];
+    else if (hp < 2)
+        [r1, g1, b1] = [x, c, 0];
+    else if (hp < 3)
+        [r1, g1, b1] = [0, c, x];
+    else if (hp < 4)
+        [r1, g1, b1] = [0, x, c];
+    else if (hp < 5)
+        [r1, g1, b1] = [x, 0, c];
+    else
+        [r1, g1, b1] = [c, 0, x];
+    const m = l - c / 2;
+    return {
+        r: clamp((r1 + m) * 255),
+        g: clamp((g1 + m) * 255),
+        b: clamp((b1 + m) * 255),
+    };
+};
+const boostColorfulness = (color, factor = 1.22, minSaturation = 0.2) => {
+    const { h, s, l } = rgbToHsl(color);
+    const nextS = Math.max(minSaturation, Math.min(1, s * factor));
+    return hslToRgb({ h, s: nextS, l });
+};
+const rgbString = (color) => `rgb(${color.r}, ${color.g}, ${color.b})`;
+const detectThemeByColor = (color) => {
+    const rgb = color ? toRgb(color) : null;
+    if (!rgb)
+        return null;
+    // Relative luminance threshold for light/dark theme split.
+    const luminance = (0.299 * rgb.r + 0.587 * rgb.g + 0.114 * rgb.b) / 255;
+    return luminance >= 0.55 ? 'light' : 'dark';
+};
+const applyBackgroundPalette = (bgColor, setVar) => {
+    const color = (bgColor || '').trim();
+    const keys = [
+        '--color-bg-primary',
+        '--color-bg-secondary',
+        '--color-bg-thirdly',
+        '--color-bg-quaternary',
+        '--color-bg-accent-light',
+        '--color-bg-special-super-light',
+        '--color-bg-secondary-inverted',
+        '--color-bg-special-big-objects',
+        '--color-border-primary',
+        '--color-border-secondary',
+        '--color-border-thirdly',
+        '--color-graphic-secondary',
+        '--color-graphic-thirdly',
+    ];
+    if (!color) {
+        keys.forEach((key) => {
+            setVar(key, null);
+        });
+        return;
+    }
+    const bgBase = toRgb(color);
+    if (!bgBase)
+        return;
+    const isLightBase = detectThemeByColor(color) === 'light';
+    const shift = (ratio) => isLightBase ? mixWithBlack(bgBase, ratio) : mixWithWhite(bgBase, ratio);
+    const shiftBg = (ratio) => isLightBase ? mixWithBlack(bgBase, ratio) : mixWithWhite(bgBase, ratio);
+    // Background colors: adaptive direction (lighter when visible, otherwise darker).
+    const adjustBg = (ratio) => {
+        const next = shiftBg(ratio);
+        return isLightBase ? boostColorfulness(next) : next;
+    };
+    const secondary = adjustBg(0.0581);
+    const thirdly = adjustBg(0.1037);
+    const quaternary = adjustBg(0.1659);
+    const accentLight = adjustBg(0.315);
+    const specialBigObjects = adjustBg(0.0373);
+    const superLight = adjustBg(0.0415);
+    const secondaryInverted = adjustBg(0.95);
+    // Borders/icons: keep existing direction logic.
+    const borderPrimary = shift(0.1659);
+    const borderSecondary = shift(0.1037);
+    const borderThirdly = shift(0.0581);
+    const graphicThirdly = shift(0.1992);
+    const graphicSecondary = shift(0.4938);
+    setVar('--color-bg-primary', rgbString(bgBase));
+    setVar('--color-bg-secondary', rgbString(secondary));
+    setVar('--color-bg-thirdly', rgbString(thirdly));
+    setVar('--color-bg-quaternary', rgbString(quaternary));
+    setVar('--color-bg-accent-light', rgbString(accentLight));
+    setVar('--color-bg-special-big-objects', rgbString(specialBigObjects));
+    setVar('--color-bg-special-super-light', `rgba(${superLight.r}, ${superLight.g}, ${superLight.b}, 0.44)`);
+    setVar('--color-bg-secondary-inverted', rgbString(secondaryInverted));
+    setVar('--color-border-primary', rgbString(borderPrimary));
+    setVar('--color-border-secondary', rgbString(borderSecondary));
+    setVar('--color-border-thirdly', rgbString(borderThirdly));
+    setVar('--color-graphic-thirdly', rgbString(graphicThirdly));
+    setVar('--color-graphic-secondary', rgbString(graphicSecondary));
+};
+exports.applyBackgroundPalette = applyBackgroundPalette;

package/dist/format-amount/index.js

@@ -38,6 +38,7 @@ const getCurrency = (currency) => {
         [profile_currency_1.ProfileCurrencyEnum.MXN]: '$',
         [profile_currency_1.ProfileCurrencyEnum.JPY]: '¥',
         [profile_currency_1.ProfileCurrencyEnum.SGD]: '$',
+        [profile_currency_1.ProfileCurrencyEnum.AED]: 'AED',
     };
     return res[currency] || currency;
 };
@@ -71,20 +72,16 @@ const roundDisplayAmount = (amount) => {
 exports.roundDisplayAmount = roundDisplayAmount;
 const formatAmount = (amount, currency) => {
     const [major, minor] = ((+amount || 0) / 100).toFixed(2).split('.');
-    const value = +minor;
+    const hasMinor = Number(minor) !== 0;
     const majorFormatted = major.replace(/\B(?=(\d{3})+(?!\d))/g, THINSP);
     const c = getCurrency(currency);
     if (currencyFirst(currency)) {
-        if (!value)
+        if (!hasMinor)
             return c + THINSP + majorFormatted;
-        if (value < 10)
-            return `${c}${THINSP}${majorFormatted},${value}0`;
-        return `${c}${THINSP}${majorFormatted},${value}`;
+        return `${c}${THINSP}${majorFormatted},${minor}`;
     }
-    if (!value)
+    if (!hasMinor)
         return majorFormatted + THINSP + c;
-    if (value < 10)
-        return `${majorFormatted},${value}0${THINSP}${c}`;
-    return `${majorFormatted},${value}${THINSP}${c}`;
+    return `${majorFormatted},${minor}${THINSP}${c}`;
 };
 exports.formatAmount = formatAmount;

package/dist/format-amount/index.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/format-amount/index.test.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const index_1 = require("./index");
+describe('formatAmount', () => {
+    it.each([
+        [17603, 'EUR', '176,03 €'],
+        [17603, 'USD', '$ 176,03'],
+        [10001, 'RUB', '100,01 руб.'],
+        [10009, 'EUR', '100,09 €'],
+        [-17603, 'EUR', '-176,03 €'],
+        [3, 'EUR', '0,03 €'],
+        [17630, 'EUR', '176,30 €'],
+        [17600, 'EUR', '176 €'],
+        [0, 'USD', '$ 0'],
+    ])('formats minor units without changing their value: %s %s', (amount, currency, expected) => {
+        expect((0, index_1.formatAmount)(amount, currency)).toBe(expected);
+    });
+});

package/dist/resolve-widget-theme.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Whether a color reads as a light surface.
+ * `null` if the color cannot be parsed.
+ */
+export declare const isLightSurfaceColor: (color?: string) => boolean | null;
+/** Near-black brand color that would disappear on a dark widget surface. */
+export declare const isMainColorTooDarkForDarkTheme: (color?: string) => boolean;
+type ResolveWidgetThemeArgs = {
+    /** Value from `data-theme` (orders booking page hardcodes `dark`). */
+    requestedTheme?: string | null;
+    bgColor?: string;
+    mainColor?: string;
+};
+/**
+ * Picks widget UI theme after customization is loaded.
+ *
+ * Priority:
+ * 1. Custom `bgColor` → light/dark by luminance
+ * 2. Requested dark + near-black `mainColor` → light
+ *    (brand accents would vanish — typical for orders `/booking/:id`
+ *    which always asks for dark)
+ * 3. Otherwise honor `data-theme` (default dark)
+ */
+export declare const resolveWidgetTheme: ({ requestedTheme, bgColor, mainColor, }: ResolveWidgetThemeArgs) => "light" | "dark";
+export {};

package/dist/resolve-widget-theme.js

@@ -0,0 +1,85 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolveWidgetTheme = exports.isMainColorTooDarkForDarkTheme = exports.isLightSurfaceColor = void 0;
+/** Same threshold as background theme detection in WidgetProvider. */
+const LIGHT_SURFACE_LUMINANCE = 0.55;
+/**
+ * Brand accents below this luminance vanish on a dark surface
+ * (near-black mainColor + data-theme=dark). Kept well below typical
+ * brand blues (~0.5) so `#4A90E2` still keeps dark theme.
+ */
+const MAIN_COLOR_TOO_DARK_FOR_DARK_THEME = 0.28;
+const parseCssColor = (color) => {
+    if (!color)
+        return null;
+    const trimmed = color.trim();
+    if (trimmed.startsWith('#')) {
+        let hex = trimmed.slice(1);
+        // #RGB / #RGBA → #RRGGBB(AA)
+        if (hex.length === 3 || hex.length === 4) {
+            hex = hex
+                .split('')
+                .map((c) => c + c)
+                .join('');
+        }
+        // Accept #RRGGBB and #RRGGBBAA (API stores mainColor with alpha).
+        if ((hex.length !== 6 && hex.length !== 8) || !/^[0-9a-fA-F]+$/.test(hex)) {
+            return null;
+        }
+        return {
+            r: parseInt(hex.slice(0, 2), 16),
+            g: parseInt(hex.slice(2, 4), 16),
+            b: parseInt(hex.slice(4, 6), 16),
+        };
+    }
+    const match = trimmed.match(/^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/i);
+    if (!match)
+        return null;
+    return {
+        r: Number(match[1]),
+        g: Number(match[2]),
+        b: Number(match[3]),
+    };
+};
+const relativeLuminance = ({ r, g, b }) => (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+/**
+ * Whether a color reads as a light surface.
+ * `null` if the color cannot be parsed.
+ */
+const isLightSurfaceColor = (color) => {
+    const rgb = parseCssColor(color);
+    if (!rgb)
+        return null;
+    return relativeLuminance(rgb) >= LIGHT_SURFACE_LUMINANCE;
+};
+exports.isLightSurfaceColor = isLightSurfaceColor;
+/** Near-black brand color that would disappear on a dark widget surface. */
+const isMainColorTooDarkForDarkTheme = (color) => {
+    const rgb = parseCssColor(color);
+    if (!rgb)
+        return false;
+    return relativeLuminance(rgb) < MAIN_COLOR_TOO_DARK_FOR_DARK_THEME;
+};
+exports.isMainColorTooDarkForDarkTheme = isMainColorTooDarkForDarkTheme;
+/**
+ * Picks widget UI theme after customization is loaded.
+ *
+ * Priority:
+ * 1. Custom `bgColor` → light/dark by luminance
+ * 2. Requested dark + near-black `mainColor` → light
+ *    (brand accents would vanish — typical for orders `/booking/:id`
+ *    which always asks for dark)
+ * 3. Otherwise honor `data-theme` (default dark)
+ */
+const resolveWidgetTheme = ({ requestedTheme, bgColor, mainColor, }) => {
+    const fromBg = (0, exports.isLightSurfaceColor)(bgColor);
+    if (fromBg !== null) {
+        return fromBg ? 'light' : 'dark';
+    }
+    const requested = requestedTheme === 'light' ? 'light' : 'dark';
+    if (requested === 'dark' && (0, exports.isMainColorTooDarkForDarkTheme)(mainColor)) {
+        return 'light';
+    }
+    return requested;
+};
+exports.resolveWidgetTheme = resolveWidgetTheme;

package/dist/serialize-slot.js

@@ -38,6 +38,8 @@ const serializeSlotOrderData = (order) => order && {
     certificateTotal: order.certificateTotal,
     upsellingsTotal: order.upsellingsTotal,
     upsellingIcons: order.upsellingIcons ?? [],
+    mode: order.mode,
+    modeIcon: order.modeIcon ?? null,
     emailTrouble: order.emailTrouble,
     noShow: order.noShow,
     // Иконка «есть комментарии»: денорм-флаг заметок сотрудников ИЛИ

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@escapenavigator/utils",
-  "version": "2.2.6",
+  "version": "2.2.8",
   "publishConfig": {
     "access": "public"
   },
@@ -14,7 +14,7 @@
     "test": "jest"
   },
   "dependencies": {
-    "@escapenavigator/types": "^2.2.6",
+    "@escapenavigator/types": "^2.2.8",
     "axios": "^0.21.4",
     "class-transformer": "^0.5.1",
     "class-validator": "^0.13.2",
@@ -29,5 +29,5 @@
     "ts-jest": "^29.1.1",
     "typescript": "^5.6"
   },
-  "gitHead": "f218bc4b0618e6bb3f0fa12e17887290690916f9"
+  "gitHead": "30230db507f7483ba425b0811f31d980d3b0a684"
 }