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

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

@@ -0,0 +1,345 @@
+.notificationsBell {
+    width: 3.2rem;
+    height: 3.2rem;
+}
+
+.notificationsBellButton {
+    color: var(--gray-700);
+}
+
+.notificationsBellHasUnreadDot {
+    position: relative;
+    top: -3.2rem;
+    right: -1.6rem;
+    color: var(--error-500);
+}
+
+.notificationsListLoader {
+    display: flex;
+    min-height: 20rem;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin: auto;
+
+    > svg {
+        width: 5rem;
+        height: 5rem;
+    }
+}
+
+.notificationsListBody {
+    display: flex;
+    overflow: hidden;
+    width: 100%;
+    height: 100%;
+    flex-flow: row wrap;
+    align-items: end;
+    gap: 1rem;
+
+    /* width */
+    ::-webkit-scrollbar {
+        width: 0.8rem;
+    }
+
+    /* Track */
+    ::-webkit-scrollbar-track {
+        background: transparent;
+    }
+
+    /* Handle */
+    ::-webkit-scrollbar-thumb {
+        border-radius: 0.8rem;
+        background: var(--gray-200);
+    }
+
+    /* Handle on hover */
+    ::-webkit-scrollbar-thumb:hover {
+        background: var(--gray-300);
+    }
+}
+
+.notificationsListUnreadBadge {
+    @include text-caption-1;
+
+    margin-top: 0.2rem;
+    margin-bottom: 1rem;
+    margin-left: 0.4rem;
+}
+
+.emptyNotificationsList {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+.emptyNotificationsListIcon {
+    margin-top: 0.2rem;
+}
+
+.emptyNotificationsListTitle {
+    @include text-body-1-bold;
+
+    margin-top: 1.6rem;
+    margin-bottom: 0.4rem;
+    text-align: center;
+}
+
+.emptyNotificationsListContent {
+    @include text-body-2;
+
+    width: 29.5rem;
+    margin-bottom: 0.8rem;
+    text-align: center;
+}
+
+.notification {
+    display: grid;
+    padding-top: 1.6rem;
+    padding-bottom: 1.6rem;
+    margin-right: 0.8rem;
+    grid-template-columns: 2.4rem auto;
+    transition: padding 0.35s ease-in-out;
+
+    > :first-child {
+        margin-top: 0.2rem;
+        margin-right: 0.8rem;
+        margin-left: 0.8rem;
+    }
+
+    > a,
+    > div {
+        all: unset;
+        display: flex;
+        overflow: hidden;
+        max-height: 38.4rem;
+        flex-direction: column;
+        overflow-wrap: break-word;
+    }
+
+    > svg:hover,
+    a:hover {
+        cursor: pointer;
+    }
+}
+
+.notificationLink {
+    all: unset;
+    display: flex;
+    overflow: hidden;
+    max-height: 38.4rem;
+    flex-direction: column;
+    overflow-wrap: break-word;
+
+    &:hover {
+        background-color: var(--gray-50);
+    }
+}
+
+.notificationsList {
+    width: 100%;
+    max-height: 42.8rem;
+    margin-top: 0.8rem;
+    overflow-y: auto;
+
+    > div {
+        > div:first-child {
+            padding-top: 0.8rem;
+        }
+
+        > div:not(:last-child) {
+            border-bottom: 0.1rem solid var(--gray-200);
+        }
+    }
+}
+
+.notiticationsListFilters {
+    display: flex;
+    gap: 1rem;
+}
+
+.notificationsListFullPageMode {
+    overflow: scroll;
+    width: 100%;
+    height: 100%;
+
+    > div {
+        > div:first-child {
+            padding-top: 1.6rem;
+        }
+
+        > div:not(:last-child) {
+            border-bottom: 0.1rem solid var(--gray-200);
+        }
+    }
+}
+
+.notificationsListFooter {
+    padding-top: 0.4rem;
+    padding-bottom: 0.4rem;
+    margin: auto;
+
+    > button {
+        @include text-sm-bold;
+    }
+
+    > button:disabled {
+        color: var(--gray-300);
+        cursor: default;
+    }
+}
+
+.notificationExpanded {
+    padding-bottom: 0;
+}
+
+.notificationUnreadDot {
+    color: var(--primary-600);
+}
+
+.notificationsBellDotCounter {
+    position: relative;
+    top: -3.7rem;
+    left: 0.7rem;
+    color: white;
+    font-size: 0.9rem;
+}
+
+.notificationsBellDotCounterPlus {
+    left: 0.5rem;
+}
+
+.notificationTitle {
+    display: flex;
+    flex: 0 0 auto;
+    justify-content: space-between;
+    padding-right: 1.6rem;
+    color: var(--gray-900);
+
+    @include text-sm-bold;
+}
+
+.notificationDate {
+    margin-left: 0.4rem;
+
+    @include text-caption-1;
+
+    color: var(--gray-400);
+}
+
+.notificationClose {
+    cursor: pointer;
+}
+
+.notificationContent {
+    overflow: auto;
+    flex: 1 1 auto;
+    padding-right: 1.6rem;
+    color: var(--gray-600);
+
+    @include text-body-2;
+
+    .notificationMessage {
+        b {
+            @include text-sm-bold;
+
+            color: var(--gray-600);
+        }
+    }
+
+    .notificationAggregatedContent {
+        display: grid;
+        grid-template-rows: 0fr;
+        transition:
+            grid-template-rows 0.35s ease-in-out,
+            margin 0.35s ease-in-out;
+
+        > span {
+            overflow: hidden;
+
+            > a {
+                display: block;
+                margin-top: 0.7rem;
+                color: var(--gray-600);
+                line-height: inherit;
+                text-decoration: none;
+
+                > b {
+                    @include text-sm-bold;
+
+                    color: var(--gray-600);
+                }
+            }
+
+            > a:last-child {
+                margin-bottom: 0.7rem;
+            }
+
+            > a:hover {
+                color: var(--gray-700);
+
+                > b {
+                    text-decoration: underline;
+                }
+            }
+        }
+    }
+}
+
+.notificationContentExpanded {
+    .notificationAggregatedContent {
+        margin-top: 0.7rem;
+        grid-template-rows: 1fr;
+    }
+}
+
+.notificationSeeMore {
+    @include text-sm-bold;
+
+    flex: 0 0 auto;
+    color: var(--primary-600);
+    cursor: pointer;
+    transition: padding 0.35s ease-in-out;
+}
+
+.notificationSeeMoreExpanded {
+    padding: 0.4rem 0;
+}
+
+.notificationsBtnMarkAllRead {
+    height: 3.4rem;
+}
+
+.notificationsDropDownDate {
+    > div:nth-child(2) > div {
+        min-width: 31rem;
+        max-height: 45rem;
+        margin-top: 0.4rem;
+    }
+
+    > div:first-child > div {
+        height: 3.2rem;
+    }
+}
+
+.notificationListRoundedContainer {
+    padding: 0.8rem 1.6rem;
+    border: 0.1rem solid var(--gray-200);
+    border-radius: 1rem;
+
+    > div.notification {
+        margin-right: 0;
+    }
+}
+
+.emptyNotificationsListTab {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+.tabs {
+    height: 3.2rem;
+}

package/src/components/Notifications/NotificationsBell.tsx

@@ -0,0 +1,242 @@
+import {
+    Button,
+    CloseSvg,
+    DotSvg,
+    NotificationBellSvg,
+    OpenInNewSvg,
+    Popover,
+} from '@mistertemp/design-system';
+import { IOTContext, IOTProvider } from '@mistertemp/front-core';
+import classnames from 'classnames';
+import React, { FC, useContext, useMemo, VFC } 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 {
+    NotificationsCenterContext,
+    NotificationsCenterProvider,
+} from './NotificationsCenterContext';
+import styles from './Notifications.module.scss';
+import NotificationsList from './NotificationsList';
+import PopupNotifications from './PopupNotifications';
+import { NotificationCenterClientInterface } from './types';
+import { useLiveNotifications } from './useLiveNotifications';
+
+const translationNs = 'notification';
+const translations = { it, fr, es };
+
+export type NotificationBellProps = {
+    className?: string;
+    /**
+     * The agency/account ID to scope notifications.
+     */
+    agencyId: string | null | undefined;
+    /**
+     * The notification center client instance.
+     * Pass `new NotificationCenterClient()` for match (agency),
+     * or `new CustomerNotificationCenterClient(env)` for customer.
+     */
+    client: NotificationCenterClientInterface;
+    /**
+     * The path to the full-page notifications page.
+     * Used for the "open in new window" button and to prevent showing popups on that page.
+     * Example: `/a/123/notifications` for match, `/c/notifications` for customer
+     */
+    notificationsPagePath?: string;
+    /**
+     * Name of the BroadcastChannel for cross-tab sync.
+     * @default 'shared_notifs'
+     */
+    broadcastChannelName?: string;
+    /**
+     * Whether to show the "open in new window" button in the popover header.
+     * @default false
+     */
+    showOpenInNewButton?: boolean;
+    /**
+     * Environment for IOT provider ('dev' | 'sta' | 'prod').
+     */
+    env?: 'dev' | 'sta' | 'prod';
+    /**
+     * Locale string for date formatting (e.g. 'fr-FR', 'it-IT').
+     */
+    locale?: string;
+};
+
+type NotificationBellInternalProps = {
+    className?: string;
+    notificationsPagePath?: string;
+    showOpenInNewButton?: boolean;
+    locale?: string;
+};
+
+const NotificationsBellInternal: VFC<NotificationBellInternalProps> = ({
+    className,
+    notificationsPagePath,
+    showOpenInNewButton = false,
+    locale,
+}) => {
+    const headerActions = useMemo(() => {
+        const actions = [
+            {
+                name: 'close',
+                icon: CloseSvg,
+            },
+        ];
+
+        if (showOpenInNewButton && notificationsPagePath) {
+            actions.unshift({
+                name: 'open_in_new',
+                icon: OpenInNewSvg,
+            });
+        }
+
+        return actions;
+    }, [showOpenInNewButton, notificationsPagePath]);
+
+    const { t } = useBundledTranslation(translationNs, translations);
+    const {
+        unseenNotifications,
+        unreadNotifications,
+        markAllAsRead,
+        notifications,
+        isPopoverOpen,
+        setIsPopoverOpen,
+    } = useContext(NotificationsCenterContext);
+
+    useLiveNotifications({ notificationsPagePath });
+
+    const handleClosePopover = () => {
+        setIsPopoverOpen(false);
+    };
+
+    const handleAllMarkAsRead = () => {
+        markAllAsRead();
+    };
+
+    const handlePopOverAction = (name: string) => {
+        if (name === 'close') {
+            handleClosePopover();
+        } else if (name === 'open_in_new' && notificationsPagePath) {
+            window.open(notificationsPagePath, '_blank');
+        }
+    };
+
+    return (
+        <Popover
+            data-testid="notificationsPopover"
+            size="medium"
+            isOpen={isPopoverOpen}
+            supportingText=""
+            footer={
+                notifications.length > 0 && (
+                    <div className={styles.notificationsListFooter}>
+                        <Button
+                            data-testid="notificationsPopover+markAllAsReadButton"
+                            color="link"
+                            size="medium"
+                            text={t('notification:notificationsPopover.markAllAsRead')}
+                            onClick={handleAllMarkAsRead}
+                            disabled={unreadNotifications === 0}
+                        />
+                    </div>
+                )
+            }
+            onClose={handleClosePopover}
+            canClose={true}
+            openMode="click"
+            placement="bottom-end"
+            setOpen={(isOpen) => setIsPopoverOpen(isOpen)}
+            title={t('notification:notificationsPopover.title')}
+            trigger={
+                <div className={classnames(styles.notificationsBell, className)}>
+                    <Button
+                        data-testid="notificationsPopover+notificationsBell"
+                        className={styles.notificationsBellButton}
+                        size="small"
+                        color="tertiary-gray"
+                        leftIcon={NotificationBellSvg}></Button>
+                    {unseenNotifications > 0 && (
+                        <>
+                            <DotSvg
+                                data-testid="notificationsPopover+notificationsBellUnreadDot"
+                                className={styles.notificationsBellHasUnreadDot}
+                                width={12}
+                            />
+                            {unseenNotifications > 9 ? (
+                                <span
+                                    className={classnames(
+                                        styles.notificationsBellDotCounter,
+                                        styles.notificationsBellDotCounterPlus,
+                                    )}>
+                                    9+
+                                </span>
+                            ) : (
+                                <span className={styles.notificationsBellDotCounter}>
+                                    {unseenNotifications}
+                                </span>
+                            )}
+                        </>
+                    )}
+                </div>
+            }
+            headerActions={headerActions}
+            onHeaderAction={handlePopOverAction}>
+            <NotificationsList locale={locale} />
+        </Popover>
+    );
+};
+
+/**
+ * Shared NotificationsBell component that can be used in both match and customer contexts.
+ *
+ * Required contexts from the consuming application:
+ * - OAuthContext (from @mistertemp/front-core)
+ * - NotificationsContext (from @mistertemp/design-system)
+ */
+export const NotificationsBell: FC<NotificationBellProps> = ({
+    className,
+    agencyId,
+    client,
+    notificationsPagePath,
+    broadcastChannelName,
+    showOpenInNewButton = false,
+    env = 'dev',
+    locale,
+}) => {
+    const { isMounted } = useContext(IOTContext);
+
+    return (
+        <NotificationsCenterProvider
+            isFullPageMode={false}
+            agencyId={agencyId}
+            client={client}
+            broadcastChannelName={broadcastChannelName}>
+            {isMounted ? (
+                <>
+                    <NotificationsBellInternal
+                        className={className}
+                        notificationsPagePath={notificationsPagePath}
+                        showOpenInNewButton={showOpenInNewButton}
+                        locale={locale}
+                    />
+                    <PopupNotifications />
+                </>
+            ) : (
+                <IOTProvider env={env}>
+                    <>
+                        <NotificationsBellInternal
+                            className={className}
+                            notificationsPagePath={notificationsPagePath}
+                            showOpenInNewButton={showOpenInNewButton}
+                            locale={locale}
+                        />
+                        <PopupNotifications />
+                    </>
+                </IOTProvider>
+            )}
+        </NotificationsCenterProvider>
+    );
+};