@pagopa/selfcare-common-frontend 1.35.0 → 1.36.0

package/README.md

@@ -1,4 +1,4 @@
-# SelfCare's common components & features
+# SelfCare's common components & features 
 This library contains [utilities](#utilities), [components](#components), [decorators](#decorators), [custom hooks](#custom-hooks) and [features](#features) built for the selfcare project.
 
 # Localization
@@ -156,13 +156,21 @@ Selfcare's ending page
 
 | Prop | Type | Mandatory | Description |
 |------|------|-----------|-------------|
-| icon | React.ReactElement | N | The ending page icon |
-| title | string | Y | The ending page title |
+| minHeight | '52vh' \| '100vh' | N | The minHeight of the component, can be 52vh for the pages and 100vh for the blocking page |
+| icon | React.ReactElement<SvgIconProps> \| FunctionComponent<SVGProps<SVGSVGElement>> \| string | N | The ending page icon |
+| title | React.ReactNode | Y | The ending page title |
 | description | React.ReactNode | Y | The ending page description | 
-| buttonLabel | string | N | The ending page button label if any |
-| onButtonClick | () => void | N | if defined it will show a button that will performe this action on click |
-| variantTitle | (| 'button'| 'caption'| 'h1'| 'h2'| 'h3'| 'h4'| 'h5'| 'h6'| 'inherit'| 'subtitle1'| 'subtitle2'| 'body1'| 'body2'| 'overline'| undefined;) | N | Set the variant of the title |
-| variantDescription | (| 'button'| 'caption'| 'h1'| 'h2'| 'h3'| 'h4'| 'h5'| 'h6'| 'inherit'| 'subtitle1'| 'subtitle2'| 'body1'| 'body2'| 'overline'| undefined;) | N | Set the variant of the description |
+| buttonLabel | React.ReactNode | N | The ending page button label if any |
+| secondButtonLabel | React.ReactNode | N | The ending page second button label if any |
+| onButtonClick | () => void | N | if defined performe this action on click of the first button |
+| onSecondButtonClick | () => void | N | if defined performe this action on click of the second button |
+| variantTitle | 'button' \| 'caption' \| 'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6' \| 'inherit' \| 'subtitle1' \| 'subtitle2' \| 'body1' \| 'body2' \| 'overline' \| undefined | N | Set the variant of the title |
+| variantDescription |  'button' \| 'caption' \| 'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6' \| 'inherit' \| 'subtitle1' \| 'subtitle2' \| 'body1' \| 'body2' \| 'overline' \| undefined | N | Set the variant of the description |
+| variantFirstButton | 'contained' \| 'outlined' \| 'text' | N | Set the variant of the first button |
+| variantSecondButton | 'contained' \| 'outlined' \| 'text' | N | Set the variant of the second button |
+| paragraph | React.ReactNode | N | Set the text of paragraph |
+| isParagraphPresent | boolean | N | Show the paragraph |
+| haveTwoButtons | boolean | N | Show the second button and the "secondButtonLabel" as text of this one |
 
 ## NavigationBar
 Selfcare's navigation bar
@@ -243,6 +251,12 @@ An object containing a complete set of operation on the storage regarding the ke
 ### storageUserOps
 An object containing a complete set of operation on the storage regarding the key used to store in the storage the loggedUser in selfcare projects.
 
+## parseJwt
+Decode and then convert the jwt into a JWTUser object
+
+## isExpiredToken
+Determines whether the token has expired
+
 # Decorators
 ## withLogin
 This feature is based on react-redux library and require to register the reducer build in userSlice into the application's redux store.
@@ -420,4 +434,16 @@ The tool used is [OneTrust](#https://www.onetrust.it/), and in order to be able
 
 | Key | Type | Description | DefaultValue |
 |-----|------|-------------|--------------|
-| COOKIE_GROUP_ANALYTICS | string | The cookie group configured for the analytics tool. MixPanel's cookies are configured as default by OneTrust with C0004 group, or as Targeting Cookies | C0004 |
+| COOKIE_GROUP_ANALYTICS | string | The cookie group configured for the analytics tool. MixPanel's cookies are configured as default by OneTrust with C0004 group, or as Targeting Cookies | C0004 |
+
+## CustomAlert
+Reusable component to display information messages using MUI's Alert.
+
+| Prop      | Type  | Mandatory | Description |
+|-----------|-------|-----------|-------------|
+| text      | string  | N         | The message text to display in the alert                    |
+| severity  | 'error' \| 'info' \| 'success' \| 'warning'| N  | The severity level of the alert |
+| variant   | 'filled' \| 'outlined' \| 'standard' | N   | The visual style of the alert        |
+| sx        | object | N         | Additional custom styles for the alert                       |
+| ...rest   | any   | N         | Any additional props passed to MUI's Alert component          |
+

package/examples/locale/en.d.ts

@@ -0,0 +1,20 @@
+declare const _default: {
+    'session modal button': string;
+    labelTitle: string;
+    boldDescriptionText: string;
+    boldDescriptionTwo: string;
+    description: {
+        part1: string;
+        part2: string;
+    };
+    key: string;
+    key2: string;
+    nesting1: string;
+    nesting2: string;
+    nesting3: string;
+    arrayJoinWithInterpolation: string[];
+    arrayOfObjects: {
+        name: string;
+    }[];
+};
+export default _default;

package/examples/locale/en.js

@@ -0,0 +1,18 @@
+const descriptionEn = 'bold description';
+export default {
+    'session modal button': 'Translate Example Session Modal',
+    labelTitle: 'name Title',
+    boldDescriptionText: ' Test Description with bold text',
+    boldDescriptionTwo: `view ${descriptionEn}`,
+    description: {
+        part1: 'eng: description test-part1',
+        part2: 'eng: description test-part2',
+    },
+    key: '{{what}} {{and}} {{how}}!!',
+    key2: 'I am <1>{{author}}</1> not bold',
+    nesting1: '1 $t(nesting2)',
+    nesting2: '2 $t(nesting3)',
+    nesting3: '3',
+    arrayJoinWithInterpolation: ['you', 'can', '{{myVar}}'],
+    arrayOfObjects: [{ name: 'tom' }, { name: 'steve' }],
+};

package/examples/locale/index.js

@@ -0,0 +1,4 @@
+import { configureI18n } from '../../lib/locale/locale-utils';
+import en from './en';
+import it from './it';
+configureI18n({ en, it });

package/examples/locale/it.d.ts

@@ -0,0 +1,20 @@
+declare const _default: {
+    'session modal button': string;
+    labelTitle: string;
+    boldDescriptionText: string;
+    boldDescriptionTwo: string;
+    description: {
+        part1: string;
+        part2: string;
+    };
+    key: string;
+    key2: string;
+    nesting1: string;
+    nesting2: string;
+    nesting3: string;
+    arrayJoinWithInterpolation: string[];
+    arrayOfObjects: {
+        name: string;
+    }[];
+};
+export default _default;

package/examples/locale/it.js

@@ -0,0 +1,19 @@
+const labelTitle = 'nome Titolo';
+const descriptionIt = 'descrizione in grassetto';
+export default {
+    'session modal button': 'Esempio Traduzione SessionModal',
+    labelTitle: `${labelTitle}`,
+    boldDescriptionText: ' testo in grassetto',
+    boldDescriptionTwo: `visualizza la ${descriptionIt}`,
+    description: {
+        part1: 'ita: descrizione test-parte1',
+        part2: 'ita: descrizione test-parte2',
+    },
+    key: '{{what}} {{e}} {{how}}!!',
+    key2: 'sono <1>{{author}}</1> non in grassetto',
+    nesting1: '1 $t(nesting2)',
+    nesting2: '2 $t(nesting3)',
+    nesting3: '3',
+    arrayJoinWithInterpolation: ['tu', 'puoi', '{{myVar}}'],
+    arrayOfObjects: [{ name: 'tom' }, { name: ' steve' }],
+};

package/{common-polyfill.d.ts → lib/common-polyfill.d.ts}

@@ -1,4 +1,3 @@
-import 'react-app-polyfill/ie11';
 import 'core-js/es/object/entries';
 import 'core-js/es/object/from-entries';
 import 'core-js/es/object/values';

package/lib/common-polyfill.js

@@ -0,0 +1,9 @@
+import 'core-js/es/object/entries';
+import 'core-js/es/object/from-entries';
+import 'core-js/es/object/values';
+import 'core-js/es/map';
+import 'core-js/es/promise';
+import 'core-js/es/array';
+import 'core-js/stable/string';
+import 'core-js/stable/number';
+import 'core-js/stable/url-search-params';

package/lib/components/BackComponent.d.ts

@@ -0,0 +1,7 @@
+type Props = {
+    goBack?: () => void;
+    backLabel?: string;
+    color?: string;
+};
+export default function BackComponent({ goBack, backLabel, color }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/BackComponent.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ArrowBack } from '@mui/icons-material';
+import { ButtonNaked } from '@pagopa/mui-italia';
+import { useTranslation } from 'react-i18next';
+export default function BackComponent({ goBack, backLabel, color }) {
+    const { t } = useTranslation();
+    return (_jsx(ButtonNaked, { size: "small", component: "button", onClick: goBack, startIcon: _jsx(ArrowBack, {}), sx: { color: color ?? 'primary.main' }, weight: "default", children: backLabel ?? t('common.backComponent.label') }));
+}

package/lib/components/CustomAlert.d.ts

@@ -0,0 +1,12 @@
+type AlertProps = {
+    /** The text to display in the alert */
+    text?: string;
+    /** The severity level of the alert */
+    severity?: 'error' | 'info' | 'success' | 'warning';
+    /** The visual style of the alert */
+    variant?: 'filled' | 'outlined' | 'standard';
+    /** Additional custom styles */
+    sx?: object;
+};
+export default function CustomAlert({ text, severity, variant, sx, ...rest }: AlertProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/CustomAlert.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Alert } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+export default function CustomAlert({ text, severity = 'info', variant = 'standard', sx, ...rest }) {
+    const { t } = useTranslation();
+    return (_jsx(Alert, { role: "alert", severity: severity, variant: variant, sx: sx, ...rest, children: text || t('common.customAlert.message') }));
+}

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

@@ -1,5 +1,4 @@
-/// <reference types="react" />
-declare type Props = {
+type Props = {
     /** The id attribute added to the element */
     id?: string;
     /** The logo src */
@@ -14,5 +13,5 @@ declare type Props = {
     loading?: boolean;
 };
 /** Avatar to use to load Organization logo */
-export default function CustomAvatar({ customAlt, customSrc, customWidth, customHeight, id, loading, }: Props): JSX.Element;
+export default function CustomAvatar({ customAlt, customSrc, customWidth, customHeight, id, loading, }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/components/CustomAvatar.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { Avatar } from '@mui/material';
+/** Avatar to use to load Organization logo */
+export default function CustomAvatar({ customAlt, customSrc, customWidth, customHeight, id, loading, }) {
+    return (_jsx(React.Fragment, { children: _jsx(Avatar, { id: id, alt: customAlt, src: customSrc, sx: {
+                width: customWidth,
+                height: customHeight,
+                display: !loading ? undefined : 'none',
+                color: 'palette.background.default',
+                backgroundColor: '#CCD4DC',
+            } }) }));
+}

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

@@ -1,14 +1,18 @@
-/// <reference types="react" />
+import React from 'react';
 import { Page } from '../model/Page';
 import { PageRequest } from '../model/PageRequest';
-declare type Props = {
+type Props = {
     /** The actual page */
     page: Page;
     /** The actual sort applied */
     sort?: string;
     /** The function to be invoked if the user change page */
     onPageRequest: (r: PageRequest) => void;
+    /** The variant of the pagination component */
+    variant?: 'outlined' | 'text';
+    /** The component to control the page size */
+    pageSizeControl?: React.ReactNode;
 };
 /** Selfcare custom table available pages component */
-export default function CustomPagination({ page, onPageRequest, sort }: Props): JSX.Element;
+export default function CustomPagination({ page, onPageRequest, sort, variant, pageSizeControl, }: Readonly<Props>): import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/components/CustomPagination.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Grid, Pagination } from '@mui/material';
+import PaginationItem from '@mui/material/PaginationItem';
+function defaultLabelDisplayedRows(from, to, count) {
+    // eslint-disable-next-line sonarjs/no-nested-template-literals
+    return `${from}-${to} di ${count !== -1 ? count : `più di ${to}`}`;
+}
+const getLabelDisplayedRowsTo = (count, page, size) => {
+    if (count === -1) {
+        return (page + 1) * size;
+    }
+    return size === -1 ? count : Math.min(count, (page + 1) * size);
+};
+/** Selfcare custom table available pages component */
+export default function CustomPagination({ page, onPageRequest, sort, variant, pageSizeControl, }) {
+    const count = page.totalElements;
+    const from = count === 0 ? 0 : page.number * page.size + 1;
+    const to = getLabelDisplayedRowsTo(count, page.number, page.size);
+    return (_jsxs(Grid, { container: true, sx: { padding: '0 10px' }, children: [_jsx(Grid, { item: true, xs: 6, display: "flex", justifyContent: "start", alignItems: 'center', children: pageSizeControl ?? defaultLabelDisplayedRows(from, to, count) }), _jsx(Grid, { item: true, xs: 6, display: "flex", justifyContent: "end", alignItems: 'center', children: page.totalElements > page.size && (_jsx(Pagination, { sx: { display: 'flex' }, color: "primary", shape: "rounded", page: page.number + 1, count: page.totalPages, renderItem: (props2) => (_jsx(PaginationItem, { ...props2, sx: { border: 'none' }, variant: variant ?? 'outlined' })), onChange: (_event, value) => (onPageRequest({
+                        page: value - 1,
+                        size: page.size,
+                        sort,
+                    }),
+                        window.scrollTo(0, 0)) })) })] }));
+}

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

@@ -1,6 +1,6 @@
 import { SvgIconProps } from '@mui/material';
 import { FunctionComponent, SVGProps } from 'react';
-declare type Props = {
+type Props = {
     /** The minHeight of the component, can be 52vh for the pages and 100vh for the blocking page */
     minHeight?: '52vh' | '100vh';
     /** The ending page icon */
@@ -11,15 +11,27 @@ declare type Props = {
     description: React.ReactNode;
     /** The ending page button label if any */
     buttonLabel?: React.ReactNode;
-    /** if defined it will show a button that will performe this action on click */
+    /** The ending page second button label if any */
+    secondButtonLabel?: React.ReactNode;
+    /** if defined performe this action on click of the first button */
     onButtonClick?: () => void;
+    /** if defined performe this action on click of the second button */
+    onSecondButtonClick?: () => void;
     /** Set the variant of the title */
     variantTitle?: 'button' | 'caption' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'inherit' | 'subtitle1' | 'subtitle2' | 'body1' | 'body2' | 'overline' | undefined;
     /** Set the variant of the description */
     variantDescription?: 'button' | 'caption' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'inherit' | 'subtitle1' | 'subtitle2' | 'body1' | 'body2' | 'overline' | undefined;
+    /** Set the variant of the first button */
+    variantFirstButton?: 'contained' | 'outlined' | 'text';
+    /** Set the variant of the second button */
+    variantSecondButton?: 'contained' | 'outlined' | 'text';
+    /** Set the text of paragraph */
     paragraph?: React.ReactNode;
+    /** Show the paragraph */
     isParagraphPresent?: boolean;
+    /** Show the second button and the "secondButtonLabel" as text of this one */
+    haveTwoButtons?: boolean;
 };
-declare const _default: ({ minHeight, description, onButtonClick, icon, title, buttonLabel, variantTitle, variantDescription, paragraph, isParagraphPresent, }: Props) => JSX.Element;
 /** Selfcare's Ending Page */
+declare const _default: ({ minHeight, description, onButtonClick, onSecondButtonClick, icon, title, buttonLabel, variantTitle, variantDescription, paragraph, isParagraphPresent, haveTwoButtons, secondButtonLabel, variantFirstButton, variantSecondButton, }: Props) => import("react/jsx-runtime").JSX.Element;
 export default _default;

package/lib/components/EndingPage.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Grid, Typography, Box } from '@mui/material';
+/** Selfcare's Ending Page */
+export default ({ minHeight, description, onButtonClick, onSecondButtonClick, icon, title, buttonLabel, variantTitle, variantDescription, paragraph, isParagraphPresent, haveTwoButtons = false, secondButtonLabel, variantFirstButton = 'contained', variantSecondButton = 'contained', }) => (_jsx(Box, { sx: { minHeight, position: 'static' }, display: "flex", flexGrow: 1, children: _jsxs(Grid, { container: true, direction: "column", style: { textAlign: 'center' }, margin: 'auto', children: [_jsx(Grid, { container: true, item: true, justifyContent: "center", mb: 3, children: _jsx(Grid, { item: true, xs: 6, children: icon }) }), _jsx(Grid, { container: true, item: true, justifyContent: "center", children: _jsx(Grid, { item: true, xs: 6, children: _jsx(Typography, { variant: variantTitle, children: title }) }) }), _jsx(Grid, { container: true, item: true, justifyContent: "center", mb: 4, mt: 1, children: _jsx(Grid, { item: true, xs: 6, children: _jsx(Typography, { variant: variantDescription, children: description }) }) }), buttonLabel && (_jsx(Grid, { container: true, item: true, justifyContent: "center", children: _jsxs(Grid, { item: true, xs: haveTwoButtons ? 12 : 4, children: [_jsx(Button, { variant: variantFirstButton, sx: { alignSelf: 'center', marginRight: haveTwoButtons ? 3 : 0 }, onClick: onButtonClick, children: buttonLabel }), haveTwoButtons && (_jsx(Button, { variant: variantSecondButton, sx: { alignSelf: 'center' }, onClick: onSecondButtonClick, children: secondButtonLabel }))] }) })), isParagraphPresent && (_jsx(Grid, { container: true, item: true, justifyContent: "center", my: 4, children: _jsx(Grid, { item: true, xs: 6, children: _jsx(Typography, { variant: variantDescription, children: paragraph }) }) }))] }, "0") }));

package/lib/components/ErrorBoundary/ErrorBoundary.d.ts

@@ -0,0 +1,11 @@
+import { TFunction } from 'i18next';
+import { ComponentType, ReactNode } from 'react';
+interface Props {
+    children: ReactNode;
+    assistanceEmail?: string;
+    minHeight?: '52vh' | '100vh';
+    t: TFunction<'translation', undefined>;
+    showCloseIcon?: boolean;
+}
+declare const _default: ComponentType<Omit<Props, "t">>;
+export default _default;

package/lib/components/ErrorBoundary/ErrorBoundary.js

@@ -0,0 +1,93 @@
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import ErrorOutlineOutlinedIcon from '@mui/icons-material/ErrorOutlineOutlined';
+import { uniqueId } from 'lodash';
+import { Component, Fragment } from 'react';
+import { withTranslation } from 'react-i18next';
+import { connect } from 'react-redux';
+import { appStateActions, appStateSelectors } from '../../redux/slices/appStateSlice';
+import { handleErrors } from '../../services/errorService';
+import SessionModal from '../SessionModal';
+import Toast from '../Toast';
+import BlockingErrorPage from './components/BlockingErrorPage';
+/** 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 errors in order to display a warning or the error page to the user.
+Errors dispatched will be notified using errorService
+
+To use this feature you have to put ErrorBoundary in your App as a child of a redux Provider component.
+In order to dispatch an error you have to use the custom hook useErrorDispatcher which will return a fuction to be used to dispatch the error. */
+class ErrorBoundary extends Component {
+    constructor(props) {
+        super(props);
+        this.buildNotBlockingError.bind(this);
+        this.buildErrorModal.bind(this);
+        this.buildErrorToast.bind(this);
+        this.handleClose.bind(this);
+        this.popError.bind(this);
+        this.retryError.bind(this);
+    }
+    componentDidCatch(error, errorInfo) {
+        this.props.addError({
+            id: uniqueId('uncaught-'),
+            techDescription: 'Uncaught error',
+            error,
+            errorInfo,
+            blocking: true,
+            toNotify: true,
+        });
+    }
+    render() {
+        const hasError = this.props.errors.length > 0;
+        const blockingErrors = this.props.errors.filter((e) => e.blocking);
+        const hasBlockingError = blockingErrors.length > 0;
+        if (hasError) {
+            handleErrors(this.props.errors);
+        }
+        if (!hasBlockingError) {
+            return (_jsxs(Fragment, { children: [this.props.children, hasError && this.buildNotBlockingError(this.props.errors)] }));
+        }
+        else {
+            return (_jsx(BlockingErrorPage, { description: blockingErrors[0].displayableDescription, assistanceEmail: this.props.assistanceEmail, minHeight: this.props.minHeight }));
+        }
+    }
+    buildNotBlockingError(errors) {
+        const errorModal = errors.find((e) => e.component === 'SessionModal');
+        const errorToast = errors.find((e) => e.component === 'Toast');
+        return (_jsxs(_Fragment, { children: [errorModal && this.buildErrorModal(errorModal), errorToast && this.buildErrorToast(errorToast)] }));
+    }
+    buildErrorToast(error) {
+        if (error.autoclosable === 'timer') {
+            setTimeout(() => this.handleClose(error), error.autocloseMilliseconds);
+        }
+        return (_jsx(Toast, { open: true, title: error.displayableTitle ?? this.props.t('common.errorBoundary.toastError'), message: error.displayableDescription ?? this.props.t('common.errorBoundary.toastMessage'), logo: ErrorOutlineOutlinedIcon, toastColorIcon: "#FE6666", leftBorderColor: "#FE6666", onCloseToast: () => this.handleClose(error), width: error.width, showToastCloseIcon: error.showCloseIcon }));
+    }
+    buildErrorModal(error) {
+        return (_jsx(SessionModal, { open: true, title: error.displayableTitle ?? this.props.t('common.errorBoundary.sessionModalTitle'), message: error.displayableDescription ?? this.props.t('common.errorBoundary.sessionModalMessage'), onConfirm: error.onRetry ? () => this.retryError(error) : undefined, handleClose: () => this.handleClose(error), width: error.width, showCloseIcon: error.showCloseIcon }));
+    }
+    retryError(error) {
+        this.popError(error);
+        if (error.onRetry) {
+            error.onRetry();
+        }
+    }
+    popError(error) {
+        this.props.removeError(error);
+    }
+    handleClose(error) {
+        this.popError(error);
+        if (error.onClose) {
+            error.onClose();
+        }
+    }
+}
+function mapStateToProps(state) {
+    return {
+        errors: appStateSelectors.selectErrors(state)
+    };
+}
+const mapDispatchToProps = (dispatch) => ({
+    addError: (error) => dispatch(appStateActions.addError(error)),
+    removeError: (error) => dispatch(appStateActions.removeError(error)),
+});
+const ErrorBoundaryConnected = connect(mapStateToProps, mapDispatchToProps)(ErrorBoundary);
+const ErrorBoundaryWithTranslation = withTranslation()(ErrorBoundaryConnected);
+export default ErrorBoundaryWithTranslation;

package/{components → lib/components}/ErrorBoundary/components/BlockingErrorPage.d.ts

@@ -1,8 +1,7 @@
-/// <reference types="react" />
-declare type Props = {
+type Props = {
     description?: React.ReactNode;
     assistanceEmail?: string;
     minHeight?: '52vh' | '100vh';
 };
-declare const _default: ({ description, assistanceEmail, minHeight }: Props) => JSX.Element;
+declare const _default: ({ description, assistanceEmail, minHeight }: Props) => import("react/jsx-runtime").JSX.Element;
 export default _default;

package/lib/components/ErrorBoundary/components/BlockingErrorPage.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useTranslation } from 'react-i18next';
+import { buildAssistanceURI } from '../../../services/assistanceService';
+import EndingPage from '../../EndingPage';
+import ErrorIcon from '../../icons/ErrorIcon';
+export default ({ description, assistanceEmail, minHeight = '100vh' }) => {
+    const { t } = useTranslation();
+    return (_jsx(EndingPage, { minHeight: minHeight, icon: _jsx(ErrorIcon, {}), title: t('common.blockingErrorPage.title'), description: description ?? t('common.blockingErrorPage.description'), onButtonClick: assistanceEmail
+            ? () => window.location.assign(buildAssistanceURI(assistanceEmail))
+            : undefined, buttonLabel: t('common.blockingErrorPage.buttonLabel') }));
+};

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-declare type Props = {
+type Props = {
     /** If the popup is to be displayed */
     open: boolean;
     /** The function to be invoked when clicking on exit button or selecting a value */
@@ -13,7 +13,7 @@ declare type Props = {
     /** The popup minHeight */
     minHeight?: string;
 };
-export declare type FilterModalConfig<T, V> = {
+export type FilterModalConfig<T, V> = {
     /** The list of values between to which choose */
     data: Array<T>;
     /** A function that will select the label to show */
@@ -24,5 +24,5 @@ export declare type FilterModalConfig<T, V> = {
     onFilterChange: (v: V) => void;
 };
 /** Modal used to show a list of values from which to choose a single value */
-export default function FilterModal({ open, handleClose, title, filterModalConfig, height, minHeight, }: Props): JSX.Element;
+export default function FilterModal({ open, handleClose, title, filterModalConfig, height, minHeight, }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/components/FilterModal.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Typography, Box, Button, FormControlLabel, Grid, IconButton, Radio, RadioGroup, } from '@mui/material';
+import Dialog from '@mui/material/Dialog';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import { useTheme } from '@mui/material/styles';
+import ClearOutlinedIcon from '@mui/icons-material/ClearOutlined';
+import { useTranslation } from 'react-i18next';
+/** Modal used to show a list of values from which to choose a single value */
+export default function FilterModal({ open, handleClose, title, filterModalConfig, height = '16em', minHeight = '16em', }) {
+    const theme = useTheme();
+    const fullScreen = useMediaQuery(theme.breakpoints.down('xs'));
+    React.useEffect(() => setValueRadio(''), [open]);
+    const [valueRadio, setValueRadio] = React.useState('');
+    const { t } = useTranslation();
+    const handleChange = (_, value) => {
+        setValueRadio(value);
+    };
+    const submitFilter = (event) => {
+        const i = data.filter((value) => value.id === valueRadio).map((x) => x)[0];
+        filterModalConfig?.onFilterChange(i === undefined ? valueRadio : i);
+        handleClose(event);
+    };
+    const data = filterModalConfig?.data !== undefined ? filterModalConfig?.data : [];
+    return (_jsx(Dialog, { fullScreen: fullScreen, open: open, "aria-labelledby": "responsive-dialog-title", children: _jsx(Grid, { container: true, direction: "column", sx: { height, minHeight, width: '21.9em' }, children: _jsxs(Box, { mx: 3, sx: { height: '100%' }, children: [_jsx(Grid, { container: true, item: true, mt: 4, children: _jsxs(Grid, { item: true, xs: 10, children: [_jsx(IconButton, { onClick: (e) => {
+                                        setValueRadio('');
+                                        handleClose(e);
+                                    }, style: { position: 'absolute', top: '20px', right: '16px', zIndex: 100 }, children: _jsx(ClearOutlinedIcon, {}) }), _jsx(Typography, { variant: "h5", sx: { fontSize: '18px', fontWeight: '600' }, children: `${t('common.filterModal.title')} ${title}` })] }) }), _jsx(Grid, { container: true, item: true, children: _jsx(Grid, { item: true, xs: 12, my: 3, children: _jsx(RadioGroup, { "aria-label": "gender", name: "controlled-radio-buttons-group", value: valueRadio, onChange: handleChange, children: data.map((value, index) => (_jsx(FormControlLabel, { value: filterModalConfig?.getValue(value), control: _jsx(Radio, {}), label: filterModalConfig?.getLabel(value) ?? '' }, index))) }) }) }), _jsx(Grid, { item: true, xs: 12, mb: 2, children: _jsx(Button, { sx: { width: '100%', marginBottom: '20px' }, color: "primary", variant: "contained", onClick: submitFilter, children: t('common.filterModal.button') }) })] }) }) }));
+}

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

@@ -1,8 +1,7 @@
-/// <reference types="react" />
-declare type FooterProps = {
+type FooterProps = {
     loggedUser: boolean;
     productsJsonUrl?: string;
     onExit?: (exitAction: () => void) => void;
 };
-export default function Footer({ loggedUser, productsJsonUrl, onExit, }: FooterProps): JSX.Element;
+export default function Footer({ loggedUser, productsJsonUrl, onExit, }: FooterProps): import("react/jsx-runtime").JSX.Element;
 export {};