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

package/src/components/Notifications/NotificationsList.tsx

@@ -0,0 +1,293 @@
+import {
+    Badge,
+    Button,
+    ChevronDownSvg,
+    ChevronUpSvg,
+    DatePicker,
+    Dropdown,
+    Loader,
+    Tabs,
+    Tag,
+} from '@mistertemp/design-system';
+import { MixedDatePickerSelection } from '@mistertemp/design-system/src/components/design-system/DatePicker/DatePicker';
+import classNames from 'classnames';
+import { fr, it } from 'date-fns/locale';
+import { TFunction } from 'i18next';
+import React, { FC, useContext, useMemo, useState } from 'react';
+import { DateRange } from 'react-day-picker';
+
+import { useBundledTranslation } from '../../hooks';
+import datePickerEs from '../../locales/es/date-picker.json';
+import datePickerFr from '../../locales/fr/date-picker.json';
+import datePickerIt from '../../locales/it/date-picker.json';
+import notificationEs from '../../locales/es/notification.json';
+import notificationFr from '../../locales/fr/notification.json';
+import notificationIt from '../../locales/it/notification.json';
+import EmptyNotificationsList from './EmptyNotificationsList';
+import { Notification } from './Notification';
+import { NotificationsCenterContext } from './NotificationsCenterContext';
+import styles from './Notifications.module.scss';
+
+const dataTestId = 'notificationsList';
+const translationNs = 'notification';
+const notificationTranslations = { fr: notificationFr, it: notificationIt, es: notificationEs };
+
+interface NotificationsListProps {
+    /**
+     * Locale used for the date picker component.
+     * @default fr (French)
+     */
+    locale?: string;
+}
+
+export const NotificationsList: FC<NotificationsListProps> = ({ locale: localeStr }) => {
+    const { t } = useBundledTranslation(translationNs, notificationTranslations);
+    const { t: tDate } = useBundledTranslation('date-picker', {
+        fr: datePickerFr,
+        it: datePickerIt,
+        es: datePickerEs,
+    });
+
+    const {
+        unreadNotifications,
+        notifications,
+        isFullPageMode,
+        startDate,
+        setStartDate,
+        endDate,
+        setEndDate,
+        setIsDisplayReadNotification,
+        markAllAsRead,
+        setCategories,
+        categories,
+        notificationsHasBeenLoaded,
+    } = useContext(NotificationsCenterContext);
+
+    const [isDatePickerOpen, setIsDatePickerOpen] = useState(false);
+
+    const dateLocale = useMemo(
+        () => (localeStr === 'it-IT' ? it : fr),
+        [localeStr],
+    );
+
+    const tabs = useMemo(() => {
+        const tabs = [
+            {
+                label: t('notification:notificationsPopover.all'),
+                path: 'tab_all',
+            },
+            {
+                label: t('notification:notificationsPopover.unread'),
+                path: 'tab_unread',
+            },
+        ];
+
+        if (isFullPageMode) {
+            tabs.push({
+                label: t('notification:notificationsPopover.read'),
+                path: 'tab_read',
+            });
+        }
+
+        return tabs;
+    }, [isFullPageMode, t]);
+
+    const [selectedDate, setSelectedDate] = useState<MixedDatePickerSelection>([new Date()]);
+
+    const handleOnChangeTab = (value: string) => {
+        switch (value) {
+            case 'tab_all':
+                setIsDisplayReadNotification(undefined);
+                break;
+            case 'tab_read':
+                setIsDisplayReadNotification(true);
+                break;
+            case 'tab_unread':
+                setIsDisplayReadNotification(false);
+                break;
+            default:
+                setIsDisplayReadNotification(undefined);
+                break;
+        }
+    };
+
+    const handleAllMarkAsRead = () => {
+        markAllAsRead();
+    };
+
+    const handleReinitFilters = () => {
+        setStartDate(undefined);
+        setEndDate(undefined);
+        setCategories([]);
+        setSelectedDate(new Date());
+    };
+
+    const handleOpenChange = (isDatePickerOpen: boolean) => {
+        setIsDatePickerOpen(isDatePickerOpen);
+    };
+
+    const handleOnCancel = () => {
+        setIsDatePickerOpen(false);
+    };
+
+    const handleOnSelect = (date: Date | Date[] | DateRange | undefined) => {
+        setSelectedDate(date);
+    };
+
+    const handleOnSubmit = (value: Date | Array<Date> | DateRange) => {
+        if (value && typeof value === 'object' && 'from' in value && 'to' in value) {
+            if (value.from) {
+                const startDate = new Date(
+                    Date.UTC(
+                        value.from.getFullYear(),
+                        value.from.getMonth(),
+                        value.from.getDate(),
+                        0,
+                        0,
+                        0,
+                        0,
+                    ),
+                );
+
+                setStartDate(startDate);
+            }
+
+            if (value.to) {
+                const endDate = new Date(
+                    Date.UTC(
+                        value.to.getFullYear(),
+                        value.to.getMonth(),
+                        value.to.getDate(),
+                        23,
+                        59,
+                        59,
+                        999,
+                    ),
+                );
+
+                setEndDate(endDate);
+            }
+        }
+        setIsDatePickerOpen(false);
+    };
+
+    const iconName = isDatePickerOpen ? ChevronUpSvg : ChevronDownSvg;
+
+    return (
+        <div data-testid={`${dataTestId}`} className={styles.notificationsListBody}>
+            <div className={styles.notiticationsListFilters}>
+                <Tabs
+                    data-testid={`${dataTestId}+tabs`}
+                    onChange={handleOnChangeTab}
+                    size="sm"
+                    tabs={tabs}
+                    value={
+                        isFullPageMode ? 'tab_all' : 'tab_unread'
+                    }
+                    variant={isFullPageMode ? 'buttons' : 'underline'}
+                    className={styles.tabs}
+                />
+                {unreadNotifications > 0 && !isFullPageMode && (
+                    <Badge
+                        data-testid={`${dataTestId}+unreadBadge`}
+                        className={styles.notificationsListUnreadBadge}
+                        text={unreadNotifications}
+                        color="primary"
+                        size="sm"
+                    />
+                )}
+                {isFullPageMode && (
+                    <Button
+                        data-testid={`${dataTestId}+markAllAsReadButton`}
+                        color="secondary-gray"
+                        size="small"
+                        text={t('notification:notificationsPopover.markAllAsRead')}
+                        onClick={handleAllMarkAsRead}
+                        disabled={unreadNotifications === 0}
+                        className={styles.notificationsBtnMarkAllRead}
+                    />
+                )}
+                {isFullPageMode && (
+                    <Dropdown
+                        isOpen={isDatePickerOpen}
+                        onOpenChange={handleOpenChange}
+                        onDropdownCTAClick={() => {}}
+                        data-testid={`${dataTestId}+dropDownDate`}
+                        trigger={
+                            <Tag
+                                data-testid={`${dataTestId}+dropDownDate-Tag`}
+                                label={t('notification:notificationsExtended.date')}
+                                rightIcon={iconName}
+                                size="lg"
+                            />
+                        }
+                        className={styles.notificationsDropDownDate}>
+                        <DatePicker
+                            t={tDate as TFunction}
+                            locale={dateLocale}
+                            selected={selectedDate}
+                            data-testid={`${dataTestId}+date-picker`}
+                            mode={'range'}
+                            onSelect={handleOnSelect}
+                            onSubmit={handleOnSubmit}
+                            onCancel={handleOnCancel}
+                        />
+                    </Dropdown>
+                )}
+                {isFullPageMode && (
+                    <Button
+                        data-testid={`${dataTestId}+ReinitFilterButton`}
+                        color="tertiary-color"
+                        size="small"
+                        text={t('notification:notificationsExtended.reinitFilters')}
+                        onClick={handleReinitFilters}
+                        disabled={
+                            startDate == undefined && endDate == undefined && categories.length == 0
+                        }
+                    />
+                )}
+            </div>
+            <div
+                className={classNames(
+                    isFullPageMode
+                        ? styles.notificationsListFullPageMode
+                        : styles.notificationsList,
+                )}
+                data-testid={`${dataTestId}+list-container`}>
+                <div
+                    className={classNames(
+                        isFullPageMode && styles.notificationListRoundedContainer,
+                    )}>
+                    {!notificationsHasBeenLoaded ? (
+                        <div
+                            data-testid="notificationsList+Loader"
+                            className={styles.notificationsListLoader}>
+                            <Loader />
+                        </div>
+                    ) : notifications.length > 0 ? (
+                        notifications.map((notification, rank) => (
+                            <Notification
+                                data-testid={`${dataTestId}+`}
+                                key={notification.notificationId}
+                                id={notification.notificationId}
+                                title={notification.title}
+                                createdAt={notification.createdAt}
+                                content={notification.message}
+                                link={notification.link}
+                                isUnread={notification.readAt === undefined}
+                                notificationType={notification.notificationType}
+                                rank={rank}
+                                aggregatedSubtitle={notification.aggregatedSubtitle}
+                                aggregatedNotifications={notification.aggregatedNotifications}
+                            />
+                        ))
+                    ) : (
+                        <EmptyNotificationsList />
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default NotificationsList;

package/src/components/Notifications/PopupNotifications.module.scss

@@ -0,0 +1,73 @@
+.popupNotificationsContainer {
+    position: fixed;
+    top: 6.4rem;
+    right: -84rem;
+    display: flex;
+    width: 80rem;
+    height: 1000px;
+    flex-direction: column;
+    padding-right: 0.5rem;
+    padding-left: 0.5rem;
+    margin-top: 0.8rem;
+}
+
+.popupNotifications {
+    width: 36rem;
+    padding-left: 0.8rem;
+    border-radius: 0.8rem;
+    margin-top: 0.5rem;
+    margin-left: 40rem;
+    animation: bounce-in-left 1.1s both;
+    background-color: white;
+    box-shadow: 0 4px 8px -2px #1018281a;
+}
+
+.displayed {
+    margin-left: 0;
+    opacity: 1;
+}
+
+.hidden {
+    animation: bounce-out-left 1.1s both;
+}
+
+@keyframes bounce-in-left {
+    0% {
+        animation-timing-function: ease-in;
+        opacity: 0;
+        transform: translateX(0);
+    }
+
+    60% {
+        animation-timing-function: ease-out;
+        opacity: 1;
+        transform: translateX(-44rem);
+    }
+
+    80% {
+        animation-timing-function: ease-in;
+        transform: translateX(-40.4rem);
+    }
+
+    100% {
+        animation-timing-function: ease-out;
+        transform: translateX(-44rem);
+    }
+}
+
+@keyframes bounce-out-left {
+    0% {
+        animation-timing-function: ease-in;
+        transform: translateX(-44rem);
+    }
+
+    60% {
+        animation-timing-function: ease-in;
+        transform: translateX(0);
+    }
+
+    100% {
+        animation-timing-function: ease-in;
+        transform: translateX(0);
+    }
+}

package/src/components/Notifications/PopupNotifications.tsx

@@ -0,0 +1,42 @@
+import classnames from 'classnames';
+import React, { FC, useContext } from 'react';
+
+import { NotificationsCenterContext } from './NotificationsCenterContext';
+import { Notification } from './Notification';
+import styles from './PopupNotifications.module.scss';
+
+export const PopupNotifications: FC = () => {
+    const { popupNotifications, closePopupNotification } = useContext(NotificationsCenterContext);
+
+    return (
+        <div className={styles.popupNotificationsContainer}>
+            {[...popupNotifications].map((notification, rank) => (
+                <div
+                    key={notification.notificationId}
+                    className={classnames(
+                        styles.popupNotifications,
+                        notification.displayed ? styles.displayed : '',
+                        notification.hidden ? styles.hidden : '',
+                    )}>
+                    <Notification
+                        data-testid={`popupNotifications+${notification.notificationId}`}
+                        key={notification.notificationId}
+                        id={notification.notificationId}
+                        title={notification.title}
+                        createdAt={notification.createdAt}
+                        content={notification.message}
+                        onClose={() => closePopupNotification(notification)}
+                        link={notification.link}
+                        isUnread={false}
+                        notificationType={notification.notificationType}
+                        rank={rank}
+                        aggregatedSubtitle={notification.aggregatedSubtitle}
+                        aggregatedNotifications={notification.aggregatedNotifications}
+                    />
+                </div>
+            ))}
+        </div>
+    );
+};
+
+export default PopupNotifications;

package/src/components/Notifications/dateISOToString.ts

@@ -0,0 +1,32 @@
+export const dateISOToString = (
+    isoDate: string,
+): {
+    value: string;
+    i18n: 'minutesAgo' | 'hoursAgo' | 'onDate';
+} => {
+    const date = new Date(isoDate);
+    const time = Date.now() - date.getTime();
+
+    if (time < 1000 * 60 * 60) {
+        // Between one minute and one hour
+        return { value: `${Math.floor(time / (1000 * 60))}`, i18n: 'minutesAgo' };
+    } else if (time < 1000 * 60 * 60 * 24) {
+        // Between one hour and one day
+        return { value: `${Math.floor(time / (1000 * 60 * 60))}`, i18n: 'hoursAgo' };
+    } else {
+        // More than one day
+        let day = date.getDate().toString();
+        let month = (date.getMonth() + 1).toString();
+        const year = date.getFullYear().toString();
+
+        if (day.length < 2) {
+            day = '0' + day;
+        }
+
+        if (month.length < 2) {
+            month = '0' + month;
+        }
+
+        return { value: `${day}/${month}/${year}`, i18n: 'onDate' };
+    }
+};

package/src/components/Notifications/index.ts

@@ -0,0 +1,7 @@
+export * from './NotificationsBell';
+export * from './NotificationsList';
+export * from './PopupNotifications';
+export * from './NotificationsCenterContext';
+export * from './useLiveNotifications';
+export * from './CustomerNotificationCenterClient';
+export type { NotificationCenterClientInterface } from './types';

package/src/components/Notifications/types.ts

@@ -0,0 +1,39 @@
+import { NotificationTypes, PublishedNotification } from '@mistertemp/types-agency-notification-center';
+
+/**
+ * Common interface for notification center clients.
+ * Both the agency client (match) and customer client implement this contract.
+ */
+export interface NotificationCenterClientInterface {
+    getNotificationList(params: {
+        userCorrelationId: string;
+        agencyId: string;
+        token: string;
+        queryString?: Record<string, unknown>;
+    }): Promise<PublishedNotification<NotificationTypes>[]>;
+
+    getNotificationStatus(params: {
+        userCorrelationId: string;
+        agencyId: string;
+        token: string;
+    }): Promise<{ countUnread: number; countUnseen: number }>;
+
+    markNotificationAsRead(params: {
+        userCorrelationId: string;
+        agencyId: string;
+        notificationId: string;
+        token: string;
+    }): Promise<unknown>;
+
+    markAllNotificationAsRead(params: {
+        userCorrelationId: string;
+        agencyId: string;
+        token: string;
+    }): Promise<unknown>;
+
+    markAlertAsOpen(params: {
+        userCorrelationId: string;
+        agencyId: string;
+        token: string;
+    }): Promise<unknown>;
+}

package/src/components/Notifications/useLiveNotifications.ts

@@ -0,0 +1,122 @@
+import { IOTMessageHandler, OAuthContext, useIOTSubscriptions } from '@mistertemp/front-core';
+import {
+    NotificationTypes,
+    PublishedNotification,
+} from '@mistertemp/types-agency-notification-center';
+import { useCallback, useContext } from 'react';
+
+import { NotificationsCenterContext } from './NotificationsCenterContext';
+
+interface UseLiveNotificationsOptions {
+    /**
+     * The path to the notifications page.
+     * When the user is on this page, popup notifications are not shown.
+     */
+    notificationsPagePath?: string;
+}
+
+/**
+ * Hook that subscribes to real-time notifications via IOT.
+ *
+ * This hook handles:
+ * - Subscribing to user-specific notification topics
+ * - Processing incoming notifications
+ * - Updating notification counters (unread, unseen)
+ * - Adding new notifications to the notification center
+ * - Showing popup notifications for urgent ones
+ */
+export function useLiveNotifications(options: UseLiveNotificationsOptions = {}) {
+    const { notificationsPagePath } = options;
+
+    const {
+        addNotification,
+        addPopupNotification,
+        isPopoverOpen,
+        setUnseenNotifications,
+        setUnreadNotifications,
+        notificationsHasBeenLoaded,
+        agencyId,
+        notifications,
+    } = useContext(NotificationsCenterContext);
+
+    const { decodedIdToken } = useContext(OAuthContext);
+
+    /**
+     * Counts notifications that match a specific condition
+     */
+    function countNotifications(
+        notifications: PublishedNotification<NotificationTypes>[],
+        condition: (notification: PublishedNotification<NotificationTypes>) => boolean,
+    ): number {
+        return notifications.reduce(
+            (acc, notification) => (condition(notification) ? acc + 1 : acc),
+            0,
+        );
+    }
+
+    /**
+     * Handler for incoming notifications
+     */
+    const onNotificationReceived: IOTMessageHandler<PublishedNotification<NotificationTypes>> =
+        useCallback(
+            ({ detail: { new: notification } }) => {
+                if (notification.agencyId !== agencyId) {
+                    return;
+                }
+
+                // Show popup for urgent notifications when not on the notifications page
+                if (notification.isUrgent) {
+                    const isOnNotificationsPage =
+                        notificationsPagePath &&
+                        window.location.pathname === notificationsPagePath;
+
+                    if (!isOnNotificationsPage) {
+                        addPopupNotification(notification);
+                    }
+                }
+
+                const newNotifications = [
+                    notification,
+                    ...notifications.filter(
+                        (n) => n.notificationId !== notification.notificationId,
+                    ),
+                ];
+
+                // Append notifications only when the initial load is done
+                if (notificationsHasBeenLoaded) {
+                    addNotification(notification);
+                }
+
+                // Increment unread notifications
+                setUnreadNotifications(
+                    countNotifications(newNotifications, (notif) => !notif.readAt),
+                );
+
+                // Increment unseen notifications if the popover is closed
+                if (!isPopoverOpen) {
+                    setUnseenNotifications(
+                        countNotifications(newNotifications, (notif) => !notif.seenAt),
+                    );
+                }
+            },
+            [
+                addNotification,
+                addPopupNotification,
+                agencyId,
+                isPopoverOpen,
+                notificationsHasBeenLoaded,
+                setUnreadNotifications,
+                setUnseenNotifications,
+                notifications,
+                notificationsPagePath,
+            ],
+        );
+
+    // Create topic string for user-specific notifications
+    const topic = `userCorrelationId/${decodedIdToken?.['custom:userCorrelationId']}/notifications`;
+
+    // Subscribe to the notification topic
+    useIOTSubscriptions({
+        [topic]: onNotificationReceived,
+    });
+}

package/src/components/TextFilter/TextFilter.tsx

@@ -43,14 +43,7 @@ export type TextFilterProps = Omit<
     >;
     inputProps?: Omit<
         InputTextProps,
-        | 'placeholder'
-        | 'data-testid'
-        | 'value'
-        | 'size'
-        | 'type'
-        | 'onSubmit'
-        | 'onChange'
-        | 'inputType'
+        'data-testid' | 'value' | 'size' | 'type' | 'onSubmit' | 'onChange' | 'inputType'
     >;
 };
 

package/src/components/index.ts

@@ -10,5 +10,6 @@ export * from './CopyToClipboard';
 export * from './DateFilter';
 export * from './EnvironmentFilter';
 export * from './Filter';
+export * from './Notifications';
 export * from './ProfessionFilter';
 export * from './TextFilter';

package/src/locales/es/date-picker.json

@@ -0,0 +1,11 @@
+{
+    "modes": {
+        "single": "Día",
+        "multiple": "Días",
+        "range": "Periodo"
+    },
+    "actions": {
+        "validate": "Aceptar",
+        "cancel": "Cancelar"
+    }
+}

package/src/locales/es/notification-error.json

@@ -0,0 +1,12 @@
+{
+    "common": {
+        "userNotAuthenticated": "No has iniciado sesión."
+    },
+    "notifications": {
+        "markNotificationAsRead": "Se ha producido un error al marcar tu notificación como leída.",
+        "markAllNotificationAsRead": "Se ha producido un error al marcar tus notificaciones como leídas.",
+        "getNotificationList": "Se ha producido un error al recuperar tus notificaciones.",
+        "getNotificationStatus": "Se ha producido un error al recuperar el estado de tus notificaciones.",
+        "markAlertAsOpen": "Se ha producido un error al marcar tus notificaciones como abiertas."
+    }
+}

package/src/locales/es/notification-utils.json

@@ -0,0 +1,7 @@
+{
+    "dateISOToString": {
+        "minutesAgo": "Hace {{ value }} min",
+        "hoursAgo": "Hace {{ value }} h",
+        "onDate": "El {{ value }}"
+    }
+}

package/src/locales/es/notification.json

@@ -0,0 +1,17 @@
+{
+    "notificationsPopover": {
+        "title": "Notificaciones",
+        "all": "Todas",
+        "unread": "No leídas",
+        "read": "Leídas",
+        "markAllAsRead": "Marcar todo como leído",
+        "noNotifications": "No hay notificaciones disponibles.",
+        "lastActivityWillDisplayHere": "Las últimas actividades de tus candidatos y clientes aparecerán aquí.",
+        "showMore": "Ver más",
+        "showLess": "Ver menos"
+    },
+    "notificationsExtended": {
+        "date": "Fecha",
+        "reinitFilters": "Restablecer"
+    }
+}