@pagopa/selfcare-common-frontend 1.35.0 → 1.35.1

package/lib/components/Footer/Footer.js

@@ -0,0 +1,179 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Footer as MuiItaliaFooter, } from '@pagopa/mui-italia';
+import { useEffect } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+import { CONFIG } from '../../config/env';
+import i18n from '../../locale/locale-utils';
+import { LANGUAGES, pagoPALink } from './FooterConfig';
+// eslint-disable-next-line sonarjs/cognitive-complexity
+export default function Footer({ loggedUser, productsJsonUrl, onExit = (exitAction) => exitAction(), }) {
+    const { t } = useTranslation();
+    const currentLangByUrl = new URLSearchParams(window.location.search).get('lang');
+    const lang = (currentLangByUrl ? currentLangByUrl : i18n.language);
+    useEffect(() => {
+        if (lang) {
+            void i18n.changeLanguage(lang);
+        }
+    }, [lang]);
+    const preLoginLinks = {
+        // First column
+        aboutUs: {
+            title: undefined,
+            links: [
+                // TODO
+                // {
+                //   label: 'PNRR',
+                //   href: 'CONFIG.FOOTER.LINK.PNRR',
+                //   ariaLabel: 'Vai al link: PNRR',
+                //   linkType: 'internal',
+                // },
+                {
+                    label: t('common.footer.preLoginLinks.aboutUs.links.aboutUs'),
+                    href: CONFIG.FOOTER.LINK.ABOUTUS,
+                    ariaLabel: `${t('common.footer.preLoginLinks.aboutUs.links.aboutUs')}: vai al link`,
+                    linkType: 'internal',
+                },
+                {
+                    label: t('common.footer.preLoginLinks.aboutUs.links.media'),
+                    href: CONFIG.FOOTER.LINK.MEDIA,
+                    ariaLabel: `${t('common.footer.preLoginLinks.aboutUs.links.media')}: vai al link`,
+                    linkType: 'internal',
+                },
+                {
+                    label: t('common.footer.preLoginLinks.aboutUs.links.workwithud'),
+                    href: CONFIG.FOOTER.LINK.WORKWITHUS,
+                    ariaLabel: `${t('common.footer.preLoginLinks.aboutUs.links.workwithud')}: vai al link`,
+                    linkType: 'internal',
+                },
+            ],
+        },
+        // Third column
+        resources: {
+            title: t('common.footer.preLoginLinks.resources.title'),
+            links: [
+                {
+                    label: t('common.footer.preLoginLinks.resources.links.privacyPolicy'),
+                    href: CONFIG.FOOTER.LINK.PRIVACYPOLICY,
+                    ariaLabel: `${t('common.footer.preLoginLinks.resources.links.privacyPolicy')}: vai al link`,
+                    linkType: 'internal',
+                },
+                {
+                    label: t('common.footer.preLoginLinks.resources.links.certifications'),
+                    href: CONFIG.FOOTER.LINK.CERTIFICATIONS,
+                    ariaLabel: `${t('common.footer.preLoginLinks.resources.links.certifications')}: vai al link`,
+                    linkType: 'internal',
+                },
+                {
+                    label: t('common.footer.preLoginLinks.resources.links.informationsecurity'),
+                    href: CONFIG.FOOTER.LINK.INFORMATIONSECURITY,
+                    ariaLabel: `${t('common.footer.preLoginLinks.resources.links.informationsecurity')}: vai al link`,
+                    linkType: 'internal',
+                },
+                {
+                    label: t('common.footer.preLoginLinks.resources.links.protectionofpersonaldata'),
+                    href: CONFIG.FOOTER.LINK.PROTECTIONOFPERSONALDATA,
+                    ariaLabel: `${t('common.footer.preLoginLinks.resources.links.protectionofpersonaldata')}: vai al link`,
+                    linkType: 'internal',
+                },
+                {
+                    label: t('common.footer.preLoginLinks.resources.links.cookies'),
+                    onClick: () => window.OneTrust.ToggleInfoDisplay(),
+                    ariaLabel: `${t('common.footer.preLoginLinks.resources.links.cookies')}: vai al link`,
+                    linkType: 'internal',
+                },
+                {
+                    label: t('common.footer.preLoginLinks.resources.links.termsandconditions'),
+                    href: CONFIG.FOOTER.LINK.TERMSANDCONDITIONS,
+                    ariaLabel: `${t('common.footer.preLoginLinks.resources.links.termsandconditions')}: vai al link`,
+                    linkType: 'internal',
+                },
+                {
+                    label: t('common.footer.preLoginLinks.resources.links.transparentcompany'),
+                    href: CONFIG.FOOTER.LINK.TRANSPARENTCOMPANY,
+                    ariaLabel: `${t('common.footer.preLoginLinks.resources.links.transparentcompany')}: vai al link`,
+                    linkType: 'internal',
+                },
+                {
+                    label: t('common.footer.preLoginLinks.resources.links.disclosurePolicy'),
+                    href: CONFIG.FOOTER.LINK.DISCLOSUREPOLICY,
+                    ariaLabel: `${t('common.footer.preLoginLinks.resources.links.disclosurePolicy')}: vai al link`,
+                    linkType: 'internal',
+                },
+                {
+                    label: t('common.footer.preLoginLinks.resources.links.model231'),
+                    href: CONFIG.FOOTER.LINK.MODEL231,
+                    ariaLabel: `${t('common.footer.preLoginLinks.resources.links.model231')}: vai al link`,
+                    linkType: 'internal',
+                },
+            ],
+        },
+        // Fourth column
+        followUs: {
+            title: t('common.footer.preLoginLinks.followUs.title'),
+            socialLinks: [
+                {
+                    icon: 'linkedin',
+                    title: 'LinkedIn',
+                    href: CONFIG.FOOTER.LINK.LINKEDIN,
+                    ariaLabel: 'Link: vai al sito LinkedIn di PagoPA S.p.A.',
+                },
+                {
+                    title: 'Twitter',
+                    icon: 'twitter',
+                    href: CONFIG.FOOTER.LINK.TWITTER,
+                    ariaLabel: 'Link: vai al sito Twitter di PagoPA S.p.A.',
+                },
+                {
+                    icon: 'instagram',
+                    title: 'Instagram',
+                    href: CONFIG.FOOTER.LINK.INSTAGRAM,
+                    ariaLabel: 'Link: vai al sito Instagram di PagoPA S.p.A.',
+                },
+                {
+                    icon: 'medium',
+                    title: 'Medium',
+                    href: CONFIG.FOOTER.LINK.MEDIUM,
+                    ariaLabel: 'Link: vai al sito Medium di PagoPA S.p.A.',
+                },
+            ],
+            links: [
+                {
+                    label: t('common.footer.preLoginLinks.accessibility'),
+                    href: CONFIG.FOOTER.LINK.ACCESSIBILITY,
+                    ariaLabel: `${t('common.footer.preLoginLinks.accessibility')}: vai al link`,
+                    linkType: 'internal',
+                },
+            ],
+        },
+    };
+    const postLoginLinks = [
+        {
+            label: t('common.footer.postLoginLinks.privacyPolicy'),
+            href: CONFIG.FOOTER.LINK.PRIVACYPOLICY,
+            ariaLabel: `${t('common.footer.postLoginLinks.privacyPolicy')}: vai al link`,
+            linkType: 'internal',
+        },
+        {
+            label: t('common.footer.postLoginLinks.protectionofpersonaldata'),
+            href: CONFIG.FOOTER.LINK.PROTECTIONOFPERSONALDATA,
+            ariaLabel: `${t('common.footer.postLoginLinks.protectionofpersonaldata')}: vai al link`,
+            linkType: 'internal',
+        },
+        {
+            label: t('common.footer.postLoginLinks.termsandconditions'),
+            href: CONFIG.FOOTER.LINK.TERMSANDCONDITIONS,
+            ariaLabel: `${t('common.footer.postLoginLinks.termsandconditions')}: vai al link`,
+            linkType: 'internal',
+        },
+        {
+            label: t('common.footer.postLoginLinks.accessibility'),
+            href: CONFIG.FOOTER.LINK.ACCESSIBILITY,
+            ariaLabel: `${t('common.footer.postLoginLinks.accessibility')}: vai al link`,
+            linkType: 'internal',
+        },
+    ];
+    const companyLegalInfo = (_jsxs(Trans, { i18nKey: "common.footer.legalInfoText", children: [_jsx("strong", { children: "PagoPA S.p.A." }), " - Societ\u00E0 per azioni con socio unico - Capitale sociale di euro 1,000,000 interamente versato - Sede legale in Roma, Piazza Colonna 370, ", _jsx("br", {}), "CAP 00187 - N. di iscrizione a Registro Imprese di Roma, CF e P.IVA 15376371009"] }));
+    return (_jsx(MuiItaliaFooter, { companyLink: pagoPALink, postLoginLinks: postLoginLinks, preLoginLinks: preLoginLinks, legalInfo: companyLegalInfo, loggedUser: loggedUser, onExit: onExit, languages: LANGUAGES, onLanguageChanged: async (language) => {
+            await i18n.changeLanguage(language);
+        }, currentLangCode: lang, productsJsonUrl: productsJsonUrl }));
+}

package/{components → lib/components}/Footer/FooterConfig.js

@@ -1,12 +1,9 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.LANGUAGES = exports.pagoPALink = void 0;
-const env_1 = require("../../config/env");
-exports.pagoPALink = {
-    href: env_1.CONFIG.FOOTER.LINK.PAGOPALINK,
-    ariaLabel: 'Link: vai al sito di PagoPA S.p.A.',
+import { CONFIG } from '../../config/env';
+export const pagoPALink = {
+    href: CONFIG.FOOTER.LINK.PAGOPALINK,
+    ariaLabel: 'PagoPA S.p.A.: vai al sito',
 };
-exports.LANGUAGES = {
+export const LANGUAGES = {
     it: {
         it: 'Italiano',
         en: 'Inglese',
@@ -43,4 +40,3 @@ exports.LANGUAGES = {
         sl: 'Slovenski',
     },
 };
-//# sourceMappingURL=FooterConfig.js.map

package/{components → lib/components}/Header/Header.d.ts

@@ -1,8 +1,7 @@
-/// <reference types="react" />
-import { JwtUser, UserAction, ProductSwitchItem, ProductEntity } from '@pagopa/mui-italia';
-import { PartySwitchItem } from '@pagopa/mui-italia/dist/components/PartySwitch';
-declare type PartyEntity = PartySwitchItem;
-declare type HeaderProps = {
+import { JwtUser, ProductEntity, ProductSwitchItem, UserAction } from '@pagopa/mui-italia';
+import { PartySwitchItem } from '@pagopa/mui-italia/components/PartySwitch';
+type PartyEntity = PartySwitchItem;
+type HeaderProps = {
     /** If true, it will render an other toolbar under the Header */
     withSecondHeader: boolean;
     /** The list of products in header */
@@ -35,7 +34,13 @@ declare type HeaderProps = {
     maxCharactersNumberMultiLineItem?: number;
     /** If false hides assistance button */
     enableAssistanceButton?: boolean;
+    /** A callback function that controls the visibility of the documentation button and handles user clicks on the documentation button. */
+    onDocumentationClick?: () => void;
+    /** A callback function that handles user clicks on the logout button. */
+    onLogoutClick?: () => void;
+    /** An optional fixed list of parties to be shown in the party switcher */
+    fixedParty?: PartyEntity;
 };
 /** SelfCare Header component */
-declare const Header: ({ withSecondHeader, productsList, selectedPartyId, selectedProductId, partyList, loggedUser, assistanceEmail, enableLogin, userActions, enableDropdown, addSelfcareProduct, onExit, onSelectedProduct, onSelectedParty, maxCharactersNumberMultiLineButton, maxCharactersNumberMultiLineItem, enableAssistanceButton, }: HeaderProps) => JSX.Element;
+declare const Header: ({ withSecondHeader, productsList, selectedPartyId, selectedProductId, partyList, loggedUser, assistanceEmail, enableLogin, userActions, enableDropdown, addSelfcareProduct, onExit, onSelectedProduct, onSelectedParty, maxCharactersNumberMultiLineButton, maxCharactersNumberMultiLineItem, enableAssistanceButton, onDocumentationClick, onLogoutClick, fixedParty, }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
 export default Header;

package/lib/components/Header/Header.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { HeaderAccount, HeaderProduct, } from '@pagopa/mui-italia';
+import { Fragment, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useLocation } from 'react-router-dom';
+import { CONFIG } from '../../config/env';
+import { buildAssistanceURI } from '../../services/assistanceService';
+import { isPagoPaUser } from '../../utils/storage';
+const SELFCARE_PRODUCT = {
+    id: 'prod-selfcare',
+    title: 'Area Riservata',
+    productUrl: CONFIG.HEADER.LINK.PRODUCTURL,
+    linkType: 'internal',
+};
+const BACKSTAGE_PRODUCT = {
+    id: 'prod-selfcare-backstage',
+    title: 'Area Riservata Backstage',
+    productUrl: CONFIG.HEADER.LINK.PRODUCTURL,
+    linkType: 'internal',
+};
+const ROOT_LINK = {
+    label: 'PagoPA S.p.A.',
+    href: CONFIG.HEADER.LINK.ROOTLINK,
+    ariaLabel: 'Link: vai al sito di PagoPA S.p.A.',
+    title: 'Sito di PagoPA S.p.A.',
+};
+/** SelfCare Header component */
+const Header = ({ withSecondHeader, productsList = [], selectedPartyId, selectedProductId, partyList = [], loggedUser, assistanceEmail, enableLogin = true, userActions = [], enableDropdown = false, addSelfcareProduct = true, onExit = (exitAction) => exitAction(), onSelectedProduct, onSelectedParty, maxCharactersNumberMultiLineButton, maxCharactersNumberMultiLineItem, enableAssistanceButton = true, onDocumentationClick, onLogoutClick, fixedParty, }) => {
+    const { t } = useTranslation();
+    const { pathname } = useLocation();
+    // Logic Derivation
+    const isAdminPage = pathname.includes('/admin');
+    const productToRender = isAdminPage ? BACKSTAGE_PRODUCT : SELFCARE_PRODUCT;
+    const renderedPartyList = fixedParty ? [fixedParty] : partyList;
+    const renderedPartyId = fixedParty ? fixedParty.id : selectedPartyId;
+    // Memoize the product list
+    const fullProductList = useMemo(() => (addSelfcareProduct ? [productToRender, ...productsList] : productsList), [addSelfcareProduct, productToRender, productsList]);
+    return (_jsxs(Fragment, { children: [_jsx("header", { children: _jsx(HeaderAccount, { rootLink: ROOT_LINK, loggedUser: loggedUser, onAssistanceClick: () => onExit(() => window.location.assign(buildAssistanceURI(assistanceEmail))), onLogin: () => onExit(() => window.location.assign(CONFIG.URL_FE.LOGIN)), onLogout: onLogoutClick ?? (() => onExit(() => window.location.assign(CONFIG.URL_FE.LOGOUT))), enableLogin: enableLogin, userActions: userActions, enableDropdown: enableDropdown, enableAssistanceButton: enableAssistanceButton, onDocumentationClick: onDocumentationClick }) }), withSecondHeader === true ? (_jsx("nav", { children: _jsx(HeaderProduct, { productId: selectedProductId || productToRender.id, productsList: fullProductList, partyId: renderedPartyId, partyList: renderedPartyList, onSelectedProduct: onSelectedProduct, onSelectedParty: onSelectedParty, maxCharactersNumberMultiLineButton: maxCharactersNumberMultiLineButton, maxCharactersNumberMultiLineItem: maxCharactersNumberMultiLineItem, ...(isPagoPaUser() &&
+                        !isAdminPage && {
+                        chipLabel: t('common.header.chipLabel'),
+                        chipColor: 'primary',
+                        chipSize: 'medium',
+                    }) }) })) : ('')] }));
+};
+export default Header;

package/{components → lib/components}/Loading/LoadingOverlay.d.ts

@@ -1,7 +1,6 @@
-/// <reference types="react" />
 /** This feature is based on react-redux library and require to register the reducer build in appStateSlice into the application's redux store.
 It allows to draw a loader when an async task to wait is running.
 
 To use this feature you have to put LoadingOverlay in your App as a child of a redux Provider component.
 In order to register the start of an async task you have to use the custom hook useLoading passing the id of the task to await, which will return a setter function used to start and end the loading behavior. */
-export default function LoadingOverlay(): JSX.Element;
+export default function LoadingOverlay(): import("react/jsx-runtime").JSX.Element;

package/lib/components/Loading/LoadingOverlay.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useSelector } from 'react-redux';
+import { appStateSelectors } from '../../redux/slices/appStateSlice';
+import LoadingOverlayComponent from '../LoadingOverlayComponent';
+/** This feature is based on react-redux library and require to register the reducer build in appStateSlice into the application's redux store.
+It allows to draw a loader when an async task to wait is running.
+
+To use this feature you have to put LoadingOverlay in your App as a child of a redux Provider component.
+In order to register the start of an async task you have to use the custom hook useLoading passing the id of the task to await, which will return a setter function used to start and end the loading behavior. */
+export default function LoadingOverlay() {
+    const loading = useSelector(appStateSelectors.selectLoading);
+    return _jsx(LoadingOverlayComponent, { open: loading });
+}

package/lib/components/LoadingOverlayComponent.d.ts

@@ -0,0 +1,7 @@
+type Props = {
+    open: boolean;
+    loadingMessage?: string;
+};
+/** A component which render an overlay loading */
+export default function LoadingOverlayComponent({ open, loadingMessage }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/LoadingOverlayComponent.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Modal, useTheme } from '@mui/material';
+import { Box } from '@mui/system';
+import MDSpinner from 'react-md-spinner';
+/** A component which render an overlay loading */
+export default function LoadingOverlayComponent({ open, loadingMessage = 'Caricamento in corso' }) {
+    const theme = useTheme();
+    return (_jsx(Modal, { open: open, sx: { outline: 0, zIndex: 1500 }, "aria-labelledby": "loading-modal-title", children: _jsxs(Box, { sx: {
+                position: 'absolute',
+                top: '50%',
+                left: '50%',
+                width: '100px',
+                outline: 0,
+            }, role: "status", "aria-live": "assertive", "aria-atomic": "true", "aria-busy": "true", children: [_jsx("span", { id: "loading-modal-title", style: {
+                        position: 'absolute',
+                        width: '1px',
+                        height: '1px',
+                        padding: '0',
+                        margin: '-1px',
+                        overflow: 'hidden',
+                        clip: 'rect(0,0,0,0)',
+                        whiteSpace: 'nowrap',
+                        border: '0'
+                    }, children: loadingMessage }), _jsx(MDSpinner, { singleColor: theme.palette.primary.main, role: "loadingSpinner" })] }) }));
+}

package/{components → lib/components}/NavigationBar.d.ts

@@ -1,17 +1,18 @@
-/// <reference types="react" />
 import { SvgIconComponent } from '@mui/icons-material';
-declare type Props = {
+type Props = {
     paths: Array<NavigationPath>;
     goBack?: () => void;
+    backLabel?: string;
     backLinkTextDecoration?: string;
     backLinkFontWeight?: string;
     backLinkFontSize?: string;
     showBackComponent?: boolean;
+    color?: string;
 };
-export declare type NavigationPath = {
+export type NavigationPath = {
     description: string;
     onClick?: () => void;
     icon?: SvgIconComponent;
 };
-export default function NavigationBar({ paths, goBack, showBackComponent }: Props): JSX.Element;
+export default function NavigationBar({ paths, goBack, showBackComponent, backLabel, color, }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/components/NavigationBar.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
+import { Box, Breadcrumbs, Icon, Typography } from '@mui/material';
+import { ButtonNaked } from '@pagopa/mui-italia';
+import { useUnloadEventOnExit } from '../hooks/useUnloadEventInterceptor';
+import BackComponent from './BackComponent';
+export default function NavigationBar({ paths, goBack, showBackComponent, backLabel, color, }) {
+    const onExit = useUnloadEventOnExit();
+    const truncatedText = {
+        display: 'inline-block',
+        maxWidth: '50ch',
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+    };
+    return (_jsxs(Box, { display: "flex", children: [showBackComponent && (_jsx(Box, { mr: 2, display: "flex", alignItems: 'center', children: _jsx(BackComponent, { goBack: goBack, backLabel: backLabel, color: color }) })), !showBackComponent && (_jsx(Box, { display: "flex", alignItems: 'center', children: _jsx(Breadcrumbs, { "aria-label": "breadcrumb", separator: _jsx(ArrowForwardIosIcon, { style: { height: '8px', width: '8px' } }), children: paths.map((p) => p.onClick ? (_jsx(Box, { display: "flex", alignItems: "center", justifyContent: "center", children: _jsx(ButtonNaked, { component: "button", onClick: () => onExit(p.onClick), startIcon: p.icon && _jsx(Icon, { component: p.icon }), sx: { color: 'colorTextPrimary' }, children: _jsx(Typography, { variant: "body2", sx: { ...truncatedText, fontWeight: 'fontWeightMedium' }, children: p.description }) }) }, p.description)) : (_jsxs(Box, { display: "flex", children: [p.icon && (_jsx(Box, { mr: 1, display: "flex", alignItems: "center", children: _jsx(Icon, { component: p.icon }) })), _jsx(Box, { display: "flex", alignItems: "center", children: _jsx(Typography, { variant: "body2", sx: { ...truncatedText, fontSize: 'fontSize' }, children: p.description }, p.description) })] }, p.description))) }) }))] }));
+}

package/{components → lib/components}/SessionModal.d.ts

@@ -1,6 +1,6 @@
+import { TFunction } from 'i18next';
 import * as React from 'react';
-import { TFunction } from 'react-i18next';
-declare type Props = {
+type Props = {
     /** If this component should be displayed or not */
     open: boolean;
     /** The title to show in the popup */
@@ -36,5 +36,5 @@ declare type Props = {
     /** If false not show the close button, default true */
     showCloseButton?: boolean;
 };
-declare const _default: React.ComponentType<Omit<import("react-i18next").Subtract<Props, import("react-i18next").WithTranslationProps>, keyof import("react-i18next").WithTranslation<N>> & import("react-i18next").WithTranslationProps>;
+declare const _default: React.ComponentType<Omit<Props, "t">>;
 export default _default;

package/lib/components/SessionModal.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import ClearOutlinedIcon from '@mui/icons-material/ClearOutlined';
+import { Box, Button, Grid, IconButton, Typography } from '@mui/material';
+import Dialog from '@mui/material/Dialog';
+import { useTheme } from '@mui/material/styles';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import { withTranslation } from 'react-i18next';
+/** Selfcare's popup */
+function SessionModal({ t, open, title, message, onConfirm, onConfirmEnabled = true, onConfirmLabel = t('common.sessionModal.confirmButton'), productEnvironments, handleClose, handleExit = handleClose, onCloseLabel = t('common.sessionModal.closeButton'), height, minHeight, width = '100%', showCloseIcon = false, showCloseButton = true, }) {
+    const theme = useTheme();
+    const fullScreen = useMediaQuery(theme.breakpoints.down('xs'));
+    return (_jsx(Dialog, { fullScreen: fullScreen, open: open, onClose: handleClose, "aria-labelledby": "session-modal-title", "aria-describedby": "session-modal-description", children: _jsxs(Grid, { container: true, sx: { height, minHeight, width, maxWidth: '100%' }, px: 4, children: [_jsxs(Grid, { item: true, xs: 12, mt: 4, children: [showCloseIcon && (_jsx(IconButton, { onClick: handleExit, style: { position: 'absolute', top: '20px', right: '16px', zIndex: 100 }, children: _jsx(ClearOutlinedIcon, {}) })), _jsx(Typography, { id: "session-modal-title", variant: "h6", sx: { fontSize: '24px', fontWeight: '700', wordBreak: 'break-word' }, children: title })] }), _jsxs(Box, { width: "100%", children: [_jsx(Grid, { item: true, xs: 12, mt: 2, mb: 3, children: _jsx(Typography, { id: "session-modal-description", variant: "body1", children: message }) }), _jsxs(Grid, { item: true, xs: 12, display: "flex", justifyContent: productEnvironments ? 'space-between' : 'flex-end', flexWrap: 'wrap-reverse', children: [showCloseButton && (_jsx(Box, { mb: 3, mt: 0, children: _jsx(Button, { onClick: handleClose, color: "primary", variant: "outlined", children: onCloseLabel }) })), onConfirm && (_jsxs(Box, { mb: 3, display: "flex", flexDirection: "row-reverse", children: [_jsx(Button, { sx: { marginLeft: 2 }, color: "primary", variant: "contained", onClick: onConfirm, disabled: !onConfirmEnabled, children: onConfirmLabel }), productEnvironments?.map((p) => (_jsx(Box, { ml: 2, children: _jsx(Button, { value: p.environment, color: "primary", variant: "contained", onClick: onConfirm, children: p.environment
+                                                    .toLowerCase()
+                                                    .replace(/\b[a-z]/g, p.environment.charAt(0).toUpperCase()) }) }, p.environment)))] }))] })] })] }) }));
+}
+const SessionModalWithTranslation = withTranslation()(SessionModal);
+export default SessionModalWithTranslation;

package/{components → lib/components}/TitleBox.d.ts

@@ -1,10 +1,10 @@
-/// <reference types="react" />
 import { Variant } from '@mui/material/styles/createTypography';
-declare type Props = {
-    /** The title to show */
-    title: string;
-    /** The subtitle to show */
-    subTitle?: string;
+import { ReactNode } from 'react';
+type Props = {
+    /** The title to show (can be a string or JSX) */
+    title: ReactNode;
+    /** The subtitle to show (can be a string or JSX) */
+    subTitle?: ReactNode;
     /** The margin top of the title */
     mtTitle?: number;
     /** The margin bottom of the title */
@@ -21,5 +21,5 @@ declare type Props = {
     subTitleFontSize?: string;
 };
 /** Selfcare's page title */
-export default function TitleBox({ title, subTitle, mbTitle, mtTitle, mbSubTitle, variantTitle, variantSubTitle, titleFontSize, subTitleFontSize, }: Props): JSX.Element;
+export default function TitleBox({ title, subTitle, mbTitle, mtTitle, mbSubTitle, variantTitle, variantSubTitle, titleFontSize, subTitleFontSize, }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/components/TitleBox.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// import React from 'react'
+// import { Box } from '@mui/material';
+import { Typography } from '@mui/material';
+import { Grid } from '@mui/material';
+/** Selfcare's page title */
+export default function TitleBox({ title, subTitle, mbTitle = 2, mtTitle, mbSubTitle, variantTitle = 'h1', variantSubTitle = 'h5', titleFontSize, subTitleFontSize = '18px', }) {
+    return (_jsxs(Grid, { container: true, mt: mtTitle, children: [_jsx(Grid, { item: true, xs: 12, mb: mbTitle, children: _jsx(Typography, { variant: variantTitle, sx: { fontSize: titleFontSize }, children: title }) }), subTitle && (_jsx(Grid, { item: true, xs: 12, mb: mbSubTitle, children: _jsx(Typography, { variant: variantSubTitle, sx: { fontSize: subTitleFontSize }, children: subTitle }) }))] }));
+}

package/{components → lib/components}/Toast.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-declare type Props = {
+type Props = {
     /** If this component should be displayed or not */
     open: boolean;
     /** The logo to be rendered. As default a confirm logo will be used */
@@ -13,7 +13,7 @@ declare type Props = {
     /** The function to be invoked when closing the toast */
     onCloseToast: () => void;
     /** The toast width */
-    width?: string | undefined;
+    width?: string;
     /** If true, it will not position itself as fixed */
     wrapped?: boolean;
     /** If not wrapped, the pixel from the bottom of the viewport where to place the toast. Default "64px" */
@@ -26,5 +26,5 @@ declare type Props = {
     toastColorIcon?: string;
 };
 /** Selfcare's toast */
-export default function Toast({ open, title, message, onCloseToast, logo, leftBorderColor, width, wrapped, bottom, right, showToastCloseIcon, toastColorIcon, }: Props): JSX.Element;
+export default function Toast({ open, title, message, onCloseToast, logo, leftBorderColor, width, wrapped, bottom, right, showToastCloseIcon, toastColorIcon, }: Readonly<Props>): import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/components/Toast.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from 'react';
+import { Alert, Grid, Typography, IconButton, SvgIcon } from '@mui/material';
+import { styled } from '@mui/system';
+import CloseIcon from '@mui/icons-material/Close';
+import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
+const CustomAlert = styled(Alert)({
+    '.MuiAlert-icon': { display: 'none' },
+});
+/** Selfcare's toast */
+export default function Toast({ open, title, message, onCloseToast, logo = CheckCircleOutlineIcon, leftBorderColor = '#6CC66A', width = '376px', wrapped = false, bottom = '64px', right = '64px', showToastCloseIcon = false, toastColorIcon = '#6CC66A', }) {
+    const positionStyle = !wrapped
+        ? { position: 'fixed', bottom, right, zIndex: 500 }
+        : { marginTop: 2 };
+    return (_jsx(Fragment, { children: open && (_jsx(CustomAlert, { className: "userToast", variant: "outlined", sx: {
+                ...positionStyle,
+                width: { width },
+                backgroundColor: 'white',
+                borderLeft: `4px solid ${leftBorderColor} !important`,
+                borderRadius: '5px',
+                boxShadow: '0px 0px 45px rgba(0, 0, 0, 0.1) ',
+                border: 'none',
+                padding: '16px',
+            }, children: _jsxs(Grid, { container: true, children: [_jsx(Grid, { item: true, xs: 1, display: "flex", alignItems: "center", justifyContent: "center", mr: 2, children: _jsx(SvgIcon, { fontSize: "small", component: logo, sx: { color: toastColorIcon, width: '140px' } }) }), _jsxs(Grid, { container: true, item: true, xs: showToastCloseIcon ? 9 : 10, display: "flex", justifyContent: "center", direction: "column", children: [_jsx(Typography, { sx: { fontSize: 'fontSize', fontWeight: 'fontWeightMedium' }, children: title }), message && _jsx(Typography, { sx: { fontSize: 'fontSize' }, children: message })] }), showToastCloseIcon && (_jsx(Grid, { item: true, xs: 1, children: _jsx(IconButton, { onClick: onCloseToast, children: _jsx(CloseIcon, { sx: { fontSize: 'big' } }) }) }))] }) })) }));
+}

package/{components → lib/components}/ToastWrapper.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-declare type Props = {
+type Props = {
     children: Array<ReactNode>;
     /** The pixel from the bottom of the viewport where to place the toast. Default "64px" */
     bottom?: string;
@@ -7,5 +7,5 @@ declare type Props = {
     right?: string;
 };
 /** To stack multiple Toast component. Each Toast should have the prop wrapped setted to true */
-export default function ToastWrapper({ children, bottom, right }: Props): JSX.Element;
+export default function ToastWrapper({ children, bottom, right }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/components/ToastWrapper.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment } from 'react';
+import { Box } from '@mui/material';
+/** To stack multiple Toast component. Each Toast should have the prop wrapped setted to true */
+export default function ToastWrapper({ children, bottom = '64px', right = '64px' }) {
+    return (_jsx(Fragment, { children: _jsx(Box, { sx: {
+                position: 'fixed',
+                bottom: { bottom },
+                right: { right },
+                zIndex: 500,
+            }, children: children.slice().reverse() }) }));
+}

package/{components → lib/components}/UnloadEventHandler.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 /** This feature is based on react-redux library and require to register the reducer build in appStateSlice into the application's redux store.
 It allows to intercept when the user try to exit from the current page and ask him if he wants to continue or not.
 
@@ -6,4 +5,4 @@ To use this feature you have to put UnloadEventHandler in your App as a child of
 In order to use this feature you have to use the custom hook useUnloadEventInterceptor.
 @see {@link useUnloadEventInterceptor}
 */
-export default function UnloadEventHandler(): JSX.Element;
+export default function UnloadEventHandler(): import("react/jsx-runtime").JSX.Element;

package/lib/components/UnloadEventHandler.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useTranslation } from 'react-i18next';
+import { useSelector, useDispatch } from 'react-redux';
+import { useUnloadEventInterceptor } from '../hooks/useUnloadEventInterceptor';
+import { appStateSelectors, appStateActions } from '../redux/slices/appStateSlice';
+import SessionModal from './SessionModal';
+/** This feature is based on react-redux library and require to register the reducer build in appStateSlice into the application's redux store.
+It allows to intercept when the user try to exit from the current page and ask him if he wants to continue or not.
+
+To use this feature you have to put UnloadEventHandler in your App as a child of a redux Provider component.
+In order to use this feature you have to use the custom hook useUnloadEventInterceptor.
+@see {@link useUnloadEventInterceptor}
+*/
+export default function UnloadEventHandler() {
+    const dispatch = useDispatch();
+    const unloadEventconfiguration = useSelector(appStateSelectors.selectUnloadEventConfiguration);
+    const { unregisterUnloadEvent } = useUnloadEventInterceptor();
+    const onClose = () => {
+        dispatch(appStateActions.closeUnloadEventNotify());
+    };
+    const onConfirm = () => {
+        unregisterUnloadEvent();
+        if (unloadEventconfiguration.exitAction) {
+            unloadEventconfiguration.exitAction();
+        }
+    };
+    const { t } = useTranslation();
+    return (_jsx(SessionModal, { open: unloadEventconfiguration.enabled && unloadEventconfiguration.open, title: unloadEventconfiguration.title ?? t('common.unloadEventHandler.title'), message: unloadEventconfiguration.description ?? t('common.unloadEventHandler.message'), onConfirm: onConfirm, onConfirmLabel: t('common.unloadEventHandler.confirmLabel'), handleClose: onClose }));
+}

package/{components → lib/components}/UserNotifyHandle.d.ts

@@ -1,8 +1,7 @@
-/// <reference types="react" />
 /** This feature is based on react-redux library and require to register the reducer build in appStateSlice into the application's redux store.
 It allows to dispatch User Notifies in order to display a pop up or a toast notification.
 
 To use this feature you have to put UserNotifyHandle in your App as a child of a redux Provider component.
 In order to dispatch a User Notify, you have to use the custom hook useUserNotify which will return a fuction to be used to dispatch the User Notify. */
-declare function UserNotifyHandle(): JSX.Element;
+declare function UserNotifyHandle(): import("react/jsx-runtime").JSX.Element;
 export default UserNotifyHandle;