@mistertemp/libs-front-shared 3.0.4 → 4.0.0-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@mistertemp/libs-front-shared",
-    "version": "3.0.4",
+    "version": "4.0.0-alpha.0",
     "main": "index.ts",
     "license": "UNLICENSED",
     "scripts": {
@@ -20,12 +20,17 @@
     "stylelint": {
         "extends": "./.stylelintrc"
     },
+    "dependencies": {
+        "classnames": "^2.5.1"
+    },
     "devDependencies": {
         "@eslint/compat": "2.0.5",
         "@eslint/eslintrc": "3.3.5",
         "@eslint/js": "9.39.4",
         "@mistertemp/design-system": "14.0.0",
+        "@mistertemp/front-core": "19.3.0",
         "@mistertemp/libs-work-environments": "0.8.1",
+        "@mistertemp/types-agency-notification-center": "4.3.0",
         "@mistertemp/types-shared": "2.7.0",
         "@testing-library/dom": "10.4.1",
         "@testing-library/jest-dom": "6.9.0",
@@ -78,7 +83,11 @@
     },
     "peerDependencies": {
         "@mistertemp/design-system": ">=14.0.0",
+        "@mistertemp/front-core": ">=19.3.0",
         "@mistertemp/libs-work-environments": "^0.8.1",
+        "@mistertemp/types-agency-notification-center": ">=4.3.0",
+        "classnames": "^2.5.1",
+        "date-fns": ">=3.6.0",
         "i18next": "^25.4.2",
         "i18next-browser-languagedetector": ">=8.2.0",
         "i18next-http-backend": ">=3.0.2",

package/src/components/Notifications/CustomerNotificationCenterClient.ts

@@ -0,0 +1,195 @@
+import { NotificationTypes, PublishedNotification } from '@mistertemp/types-agency-notification-center';
+
+import { NotificationCenterClientInterface } from './types';
+
+const BASE_URLS: Record<string, string> = {
+    dev: 'https://customer-notification-center-back.development.mistertemp.io',
+    sta: 'https://customer-notification-center-back.staging.mistertemp.io',
+    prod: 'https://customer-notification-center-back.mistertemp.io',
+};
+
+/**
+ * Customer notification center client.
+ * Adapts the customer back-end API to the common NotificationCenterClientInterface.
+ *
+ * The interface uses `agencyId` as param name for compatibility with the shared context,
+ * but it maps to `accountId` when calling the customer API.
+ */
+export class CustomerNotificationCenterClient implements NotificationCenterClientInterface {
+    private baseUrl: string;
+
+    constructor(envOrBaseUrl: 'dev' | 'sta' | 'prod' | string = 'dev') {
+        if (envOrBaseUrl in BASE_URLS) {
+            this.baseUrl = BASE_URLS[envOrBaseUrl as keyof typeof BASE_URLS];
+        } else {
+            // Allow passing a direct base URL
+            this.baseUrl = envOrBaseUrl;
+        }
+    }
+
+    async getNotificationList(params: {
+        userCorrelationId: string;
+        agencyId: string; // maps to accountId
+        token: string;
+        queryString?: Record<string, unknown>;
+    }): Promise<PublishedNotification<NotificationTypes>[]> {
+        const { userCorrelationId, agencyId: accountId, token, queryString } = params;
+
+        const url = new URL(
+            `/customer/v1/users/${userCorrelationId}/notifications`,
+            this.baseUrl,
+        );
+        url.searchParams.set('accountId', accountId);
+
+        if (queryString?.isRead !== undefined && queryString.isRead !== null) {
+            url.searchParams.set('isRead', String(queryString.isRead));
+        }
+        if (queryString?.categories) {
+            url.searchParams.set('categories', String(queryString.categories));
+        }
+        if (queryString?.startDate) {
+            url.searchParams.set('startDate', String(queryString.startDate));
+        }
+        if (queryString?.endDate) {
+            url.searchParams.set('endDate', String(queryString.endDate));
+        }
+
+        const allItems: PublishedNotification<NotificationTypes>[] = [];
+        let nextCursor: string | undefined;
+
+        // Fetch all pages (cursor-based pagination)
+        do {
+            if (nextCursor) {
+                url.searchParams.set('cursor', nextCursor);
+            }
+
+            const response = await fetch(url.toString(), {
+                method: 'GET',
+                headers: {
+                    Authorization: `Bearer ${token}`,
+                    'Content-Type': 'application/json',
+                },
+            });
+
+            if (!response.ok) {
+                throw new Error(`Failed to fetch notifications: ${response.status}`);
+            }
+
+            const data = await response.json();
+            allItems.push(...(data.items || []));
+            nextCursor = data.nextCursor;
+        } while (nextCursor);
+
+        return allItems;
+    }
+
+    async getNotificationStatus(params: {
+        userCorrelationId: string;
+        agencyId: string; // maps to accountId
+        token: string;
+    }): Promise<{ countUnread: number; countUnseen: number }> {
+        const { userCorrelationId, agencyId: accountId, token } = params;
+
+        const url = new URL(
+            `/customer/v1/users/${userCorrelationId}/notifications/status`,
+            this.baseUrl,
+        );
+        url.searchParams.set('accountId', accountId);
+
+        const response = await fetch(url.toString(), {
+            method: 'GET',
+            headers: {
+                Authorization: `Bearer ${token}`,
+                'Content-Type': 'application/json',
+            },
+        });
+
+        if (!response.ok) {
+            throw new Error(`Failed to fetch notification status: ${response.status}`);
+        }
+
+        return response.json();
+    }
+
+    async markNotificationAsRead(params: {
+        userCorrelationId: string;
+        agencyId: string;
+        notificationId: string;
+        token: string;
+    }): Promise<unknown> {
+        const { userCorrelationId, notificationId, token } = params;
+
+        const response = await fetch(
+            `${this.baseUrl}/customer/v1/users/${userCorrelationId}/notifications/${encodeURIComponent(notificationId)}/mark-as-read`,
+            {
+                method: 'PATCH',
+                headers: {
+                    Authorization: `Bearer ${token}`,
+                    'Content-Type': 'application/json',
+                },
+            },
+        );
+
+        if (!response.ok) {
+            throw new Error(`Failed to mark notification as read: ${response.status}`);
+        }
+
+        return {};
+    }
+
+    async markAllNotificationAsRead(params: {
+        userCorrelationId: string;
+        agencyId: string; // maps to accountId
+        token: string;
+    }): Promise<unknown> {
+        const { userCorrelationId, agencyId: accountId, token } = params;
+
+        const url = new URL(
+            `/customer/v1/users/${userCorrelationId}/notifications/mark-all-as-read`,
+            this.baseUrl,
+        );
+        url.searchParams.set('accountId', accountId);
+
+        const response = await fetch(url.toString(), {
+            method: 'PATCH',
+            headers: {
+                Authorization: `Bearer ${token}`,
+                'Content-Type': 'application/json',
+            },
+        });
+
+        if (!response.ok) {
+            throw new Error(`Failed to mark all notifications as read: ${response.status}`);
+        }
+
+        return {};
+    }
+
+    async markAlertAsOpen(params: {
+        userCorrelationId: string;
+        agencyId: string; // maps to accountId
+        token: string;
+    }): Promise<unknown> {
+        const { userCorrelationId, agencyId: accountId, token } = params;
+
+        const url = new URL(
+            `/customer/v1/users/${userCorrelationId}/notifications/mark-alert-as-open`,
+            this.baseUrl,
+        );
+        url.searchParams.set('accountId', accountId);
+
+        const response = await fetch(url.toString(), {
+            method: 'PATCH',
+            headers: {
+                Authorization: `Bearer ${token}`,
+                'Content-Type': 'application/json',
+            },
+        });
+
+        if (!response.ok) {
+            throw new Error(`Failed to mark alert as open: ${response.status}`);
+        }
+
+        return {};
+    }
+}

package/src/components/Notifications/EmptyNotificationsList.tsx

@@ -0,0 +1,33 @@
+import { FeaturedIcon, MagnifyingGlassSvg } from '@mistertemp/design-system';
+import React, { FC } from 'react';
+
+import { useBundledTranslation } from '../../hooks';
+import fr from '../../locales/fr/notification.json';
+import it from '../../locales/it/notification.json';
+import es from '../../locales/es/notification.json';
+import styles from './Notifications.module.scss';
+
+const translationNs = 'notification';
+const translations = { it, fr, es };
+
+export const EmptyNotificationsList: FC = () => {
+    const { t } = useBundledTranslation(translationNs, translations);
+
+    return (
+        <div data-testid="emptyNotificationsList" className={styles.emptyNotificationsList}>
+            <FeaturedIcon
+                className={styles.emptyNotificationsListIcon}
+                icon={MagnifyingGlassSvg}
+                color="gray"
+            />
+            <span className={styles.emptyNotificationsListTitle}>
+                {t('notification:notificationsPopover.noNotifications')}
+            </span>
+            <span className={styles.emptyNotificationsListContent}>
+                {t('notification:notificationsPopover.lastActivityWillDisplayHere')}
+            </span>
+        </div>
+    );
+};
+
+export default EmptyNotificationsList;

package/src/components/Notifications/Notification.tsx

@@ -0,0 +1,105 @@
+import { DotSvg } from '@mistertemp/design-system';
+import {
+    AggregatedNotificationMessage,
+    NotificationTypes,
+} from '@mistertemp/types-agency-notification-center';
+import classNames from 'classnames';
+import React, { FC, useContext, useMemo, useState } from 'react';
+
+import { useBundledTranslation } from '../../hooks';
+import es from '../../locales/es/notification-utils.json';
+import fr from '../../locales/fr/notification-utils.json';
+import it from '../../locales/it/notification-utils.json';
+import { dateISOToString } from './dateISOToString';
+import { NotificationsCenterContext } from './NotificationsCenterContext';
+import NotificationContent from './NotificationContent';
+import styles from './Notifications.module.scss';
+
+const translationNs = 'notification-utils';
+const translations = { it, fr, es };
+
+interface NotificationProps {
+    'data-testid'?: string;
+    id: string;
+    title: string;
+    createdAt: string;
+    content: string;
+    onClose?: () => void;
+    link: string;
+    isUnread: boolean;
+    notificationType: NotificationTypes;
+    rank: number;
+    aggregatedSubtitle?: string;
+    aggregatedNotifications?: AggregatedNotificationMessage[];
+}
+
+export const Notification: FC<NotificationProps> = ({
+    'data-testid': dataTestId,
+    id,
+    title,
+    createdAt,
+    content,
+    onClose,
+    link,
+    isUnread,
+    notificationType,
+    rank,
+    aggregatedSubtitle,
+    aggregatedNotifications,
+}) => {
+    const { t } = useBundledTranslation(translationNs, translations);
+    const { isFullPageMode, markNotificationAsRead } = useContext(NotificationsCenterContext);
+    const formattedDate = useMemo(() => dateISOToString(createdAt), [createdAt]);
+    const [expandedContent, setExpandedContent] = useState(false);
+
+    const date = useMemo(
+        () => t(`notification-utils:dateISOToString.${formattedDate.i18n}`, { value: formattedDate.value }),
+        [t, formattedDate],
+    );
+
+    const toggleExpandContent = () => {
+        setExpandedContent((prev) => !prev);
+    };
+
+    const handleNotificationClick = () => {
+        markNotificationAsRead(id);
+    };
+
+    return (
+        <div
+            data-testid={`${dataTestId ?? ''}notification#${id}`}
+            className={classNames(
+                styles.notification,
+                expandedContent && styles.notificationExpanded,
+            )}>
+            {isUnread ? (
+                <DotSvg
+                    data-testid={`${dataTestId ?? ''}notification#${id}+unreadDot`}
+                    className={styles.notificationUnreadDot}
+                    width={8}
+                    onClick={() => {
+                        markNotificationAsRead(id);
+                    }}
+                />
+            ) : (
+                <div className={styles.notificationReaded} />
+            )}
+            <NotificationContent
+                dataTestId={dataTestId}
+                id={id}
+                title={title}
+                content={content}
+                onClose={onClose}
+                date={date}
+                link={link}
+                handleNotificationClick={handleNotificationClick}
+                expandedContent={expandedContent}
+                toggleExpandContent={toggleExpandContent}
+                aggregatedSubtitle={aggregatedSubtitle}
+                aggregatedNotifications={aggregatedNotifications}
+            />
+        </div>
+    );
+};
+
+export default Notification;

package/src/components/Notifications/NotificationContent.tsx

@@ -0,0 +1,153 @@
+import { CloseSvg } from '@mistertemp/design-system';
+import { AggregatedNotificationMessage } from '@mistertemp/types-agency-notification-center';
+import classNames from 'classnames';
+import React, { FC } from 'react';
+
+import { useBundledTranslation } from '../../hooks';
+import es from '../../locales/es/notification.json';
+import fr from '../../locales/fr/notification.json';
+import it from '../../locales/it/notification.json';
+import styles from './Notifications.module.scss';
+
+const translationNs = 'notification';
+const translations = { it, fr, es };
+
+interface NotificationContentProps {
+    dataTestId?: string;
+    id: string;
+    title: string;
+    content: string;
+    onClose?: () => void;
+    date: string;
+    link: string;
+    handleNotificationClick: () => void;
+    expandedContent: boolean;
+    toggleExpandContent: () => void;
+    aggregatedSubtitle?: string;
+    aggregatedNotifications?: AggregatedNotificationMessage[];
+}
+
+export const NotificationContent: FC<NotificationContentProps> = ({
+    dataTestId = '',
+    id,
+    title,
+    content,
+    onClose,
+    date,
+    link,
+    handleNotificationClick,
+    expandedContent,
+    toggleExpandContent,
+    aggregatedSubtitle,
+    aggregatedNotifications,
+}) => {
+    const isAggregated = aggregatedSubtitle || aggregatedNotifications;
+    const { t } = useBundledTranslation(translationNs, translations);
+
+    const handleExpandContentKeyDown = (e: React.KeyboardEvent<HTMLSpanElement>) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+            toggleExpandContent();
+        }
+    };
+
+    const handleLinkClick = (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
+        const target = e.target as Element;
+        const targetLink = target.getAttribute('href');
+
+        if (targetLink && targetLink.length < 2) {
+            e.preventDefault();
+        }
+
+        handleNotificationClick();
+    };
+
+    const NotificationHeader = (
+        <span
+            data-testid={`${dataTestId}notification#${id}+title`}
+            className={styles.notificationTitle}>
+            <span>
+                {title}
+                <span
+                    data-testid={`${dataTestId}notification#${id}+date`}
+                    className={styles.notificationDate}>
+                    {date}
+                </span>
+            </span>
+            {onClose && (
+                <span>
+                    <CloseSvg className={styles.notificationClose} onClick={onClose} />
+                </span>
+            )}
+        </span>
+    );
+
+    const NotificationDetails = (
+        <>
+            <span
+                data-testid={`${dataTestId}notification#${id}+content`}
+                className={classNames(
+                    styles.notificationContent,
+                    expandedContent && styles.notificationContentExpanded,
+                )}>
+                <span
+                    className={styles.notificationMessage}
+                    dangerouslySetInnerHTML={{ __html: content }}
+                />
+                <div className={styles.notificationAggregatedContent}>
+                    <span>
+                        {aggregatedSubtitle}
+                        {aggregatedNotifications?.map((notif, i) => (
+                            <a
+                                data-testid={`${dataTestId}notification#${id}+aggregatedLink+${i}`}
+                                key={`${dataTestId}notification#${id}+aggregatedLink+${i}`}
+                                href={notif.link}
+                                target="_blank"
+                                rel="noreferrer"
+                                onClick={handleLinkClick}
+                                dangerouslySetInnerHTML={{ __html: notif.message }}
+                            />
+                        ))}
+                    </span>
+                </div>
+            </span>
+            {isAggregated && (
+                <span
+                    data-testid={`${dataTestId}notification#${id}+seeMore`}
+                    className={classNames(
+                        styles.notificationSeeMore,
+                        expandedContent && styles.notificationSeeMoreExpanded,
+                    )}
+                    onClick={toggleExpandContent}
+                    role="button"
+                    tabIndex={0}
+                    onKeyDown={handleExpandContentKeyDown}>
+                    {expandedContent
+                        ? t('notification:notificationsPopover.showLess')
+                        : t('notification:notificationsPopover.showMore')}
+                </span>
+            )}
+        </>
+    );
+
+    return !isAggregated ? (
+        <span>
+            {NotificationHeader}
+            <a
+                data-testid={`${dataTestId}notification#${id}+link`}
+                onClick={handleLinkClick}
+                href={link}
+                target="_blank"
+                className={styles.notificationLink}
+                rel="noreferrer">
+                {NotificationDetails}
+            </a>
+        </span>
+    ) : (
+        <div data-testid={`${dataTestId}notification#${id}+container`}>
+            {NotificationHeader}
+            {NotificationDetails}
+        </div>
+    );
+};
+
+export default NotificationContent;