@evo/notification-widget

Віджет Центру сповіщень (overlay). Споживається в catalog-ui та cms-ui.

Структура

| Шлях | Призначення | | --- | --- | | src/ | Основний пакет — те, що потрапляє в білд і публікується | | dev/ | Playground для локальної розробки UI/інтеграції з API |

Usage

import {
    OverlayNotificationWidget,
    useCounterUpdate,
    type NotificationOverlayCallbacks,
} from '@evo/notification-widget';

const callbacks: NotificationOverlayCallbacks = {
    onOrdersSectionShow: ({ isEmpty }) => {},
    onPromoSectionShow: ({ isEmpty }) => {},
    onOrdersMessageShow: (payload) => {},
    onOrdersMessageClick: (payload) => {},
    onPromoMessageShow: (payload) => {},
    onPromoMessageClick: (payload) => {},
};

<OverlayNotificationWidget
    isOpen={isOpen}
    onClose={onClose}
    notificationWidgetUrl="/app-notifications" // тут буде урла ЦС з конфігу каталогу чи cms-ui
    callbacks={callbacks}
    lang="uk"
    langUrlPrefix="/ua"
    defaultOrigin="https://prom.ua"
    isDarkMode={false}
    // mockedUserId — лише для локальної розробки (див. нижче)
/>;

Props OverlayNotificationWidget:

| Prop | Опис | | --- | --- | | isOpen | Чи відкритий overlay | | onClose | Закриття overlay | | notificationWidgetUrl | Базовий URL API сповіщень | | callbacks | Аналітика / кліки (NotificationOverlayCallbacks) | | lang | Мова | | langUrlPrefix | Префікс локалі в URL | | defaultOrigin | Origin для абсолютних посилань | | isDarkMode | Темна тема | | mockedUserId | Опційний. У import.meta.env.DEV додає заголовок X-MOCK-CONCIERGE-AUTH з цим значенням до API-запитів. У production ігнорується. |

useCounterUpdate(skipUpdate, skipIntervalUpdate, notificationWidgetUrl, lang) — лічильник/бейдж поза оверлеєм.

Локальна розробка

Playground проксує /app-notifications → https://trunk.prom.stg.evo.dev/app-notifications. У UI задай USER_ID юзера з транку → Apply — значення передається в prop mockedUserId віджета. У dev-режимі всі API-запити отримують заголовок X-MOCK-CONCIERGE-AUTH: <mockedUserId> (див. getHeaders у src/utils.ts).

Запуск playground

cd packages/notification-widget
npm install
npm run dev

Відкриється http://localhost:5173.

Команди

З packages/notification-widget:

npm run dev             # playground (задати USER_ID у UI)
npm run lint            # eslint (src + dev)
npm run ts-check        # typecheck
npm run build           # бандли пакета
npm run format          # prettier --write
npm run format:check
npm run update-locale   # uk + kk (ttag)