@selfcommunity/react-ui 0.11.0-mui7.22 → 0.11.0-mui7.23

package/lib/esm/components/Notification/Notification.js

@@ -189,7 +189,7 @@ export default function UserNotification(inProps) {
                             to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, messageNotification.message.sender)
                         }), { onClick: messageNotification.message.sender.deleted ? () => setOpenAlert(true) : null, className: classes.username }, { children: messageNotification.message.sender.username })), ' ', intl.formatMessage(messages.receivePrivateMessage, {
                             total: notificationObject.aggregated.length,
-                            b: (...chunks) => _jsx("strong", { children: chunks })
+                            b: (chunks) => _jsx("strong", { children: chunks }, "ui.notification.receivePrivateMessage.b")
                         })] }) }));
         }
         /**
@@ -209,10 +209,10 @@ export default function UserNotification(inProps) {
                             to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, groupNotification.user)
                         }), { onClick: groupNotification.user.deleted ? () => setOpenAlert(true) : null, className: classes.username }, { children: groupNotification.user.username })), ' ', _jsx(FormattedMessage, { id: `ui.notification.${notificationObject.aggregated[0].type}`, defaultMessage: `ui.notification.${notificationObject.aggregated[0].type}`, values: {
                                 group: groupNotification.group.name,
-                                link: (...chunks) => (_jsx(Link, Object.assign({ to: notificationObject.aggregated[0].type === SCNotificationTypologyType.USER_REQUESTED_TO_JOIN_GROUP ||
+                                link: (chunks) => (_jsx(Link, Object.assign({ to: notificationObject.aggregated[0].type === SCNotificationTypologyType.USER_REQUESTED_TO_JOIN_GROUP ||
                                         notificationObject.aggregated[0].type === SCNotificationTypologyType.USER_ACCEPTED_TO_JOIN_GROUP
                                         ? scRoutingContext.url(SCRoutes.GROUP_MEMBERS_ROUTE_NAME, groupNotification.group)
-                                        : scRoutingContext.url(SCRoutes.GROUP_ROUTE_NAME, groupNotification.group) }, { children: chunks })))
+                                        : scRoutingContext.url(SCRoutes.GROUP_ROUTE_NAME, groupNotification.group) }, { children: chunks }), `ui.notification.${notificationObject.aggregated[0].type}.link`))
                             } })] }) }));
         }
         /**
@@ -231,7 +231,7 @@ export default function UserNotification(inProps) {
                         className: classes.title,
                         variant: 'subtitle1'
                     }
-                }, title: _jsx(Link, Object.assign({ to: scRoutingContext.url(getContributionRouteName(contribution), getRouteData(notificationObject[contribution.type])) }, { children: getContributionSnippet(contribution) })), action: contribution && (_jsx(Tooltip, Object.assign({ title: contribution.suspended ? (_jsx(FormattedMessage, { id: 'ui.notification.notificationSuspended', defaultMessage: 'ui.notification.notificationSuspended' })) : (_jsx(FormattedMessage, { id: 'ui.notification.notificationSuspend', defaultMessage: 'ui.notification.notificationSuspend' })) }, { children: _jsx(Button, Object.assign({ variant: "text", size: "small", loading: loadingSuspendNotification, color: "inherit", classes: { root: classes.stopButton }, onClick: () => handleStopContentNotification(contribution) }, { children: contribution.suspended ? _jsx(Icon, Object.assign({ color: 'primary' }, { children: "notifications_off" })) : _jsx(Icon, Object.assign({ color: 'inherit' }, { children: "notifications_active" })) })) }))) }));
+                }, title: _jsx(Link, Object.assign({ to: scRoutingContext.url(getContributionRouteName(contribution), getRouteData(notificationObject[contribution.type])) }, { children: getContributionSnippet(contribution) })), action: contribution && (_jsx(Tooltip, Object.assign({ title: contribution.suspended ? (_jsx(FormattedMessage, { id: "ui.notification.notificationSuspended", defaultMessage: "ui.notification.notificationSuspended" })) : (_jsx(FormattedMessage, { id: "ui.notification.notificationSuspend", defaultMessage: "ui.notification.notificationSuspend" })) }, { children: _jsx(Button, Object.assign({ variant: "text", size: "small", loading: loadingSuspendNotification, color: "inherit", classes: { root: classes.stopButton }, onClick: () => handleStopContentNotification(contribution) }, { children: contribution.suspended ? _jsx(Icon, Object.assign({ color: "primary" }, { children: "notifications_off" })) : _jsx(Icon, Object.assign({ color: "inherit" }, { children: "notifications_active" })) })) }))) }));
         }
         return null;
     }
@@ -329,5 +329,5 @@ export default function UserNotification(inProps) {
     /**
      * Renders root object
      */
-    return (_jsxs(_Fragment, { children: [_jsxs(Root, Object.assign({ id: id, className: classNames(classes.root, className) }, rest, { children: [renderNotificationHeader(), _jsxs(CardContent, Object.assign({ className: classes.content }, { children: [_jsx("div", Object.assign({ className: classes.unCollapsed }, { children: notificationObject.aggregated.slice(0, showMaxAggregated).map((n, i) => renderAggregatedItem(n, i)) })), notificationObject.aggregated.length > showMaxAggregated && (_jsxs(_Fragment, { children: [_jsxs(ListItemButton, Object.assign({ onClick: setStateAggregated, classes: { root: classes.showOtherAggregated } }, { children: [_jsx(ListItemText, { primary: _jsx(FormattedMessage, { id: 'ui.notification.showOthers', defaultMessage: 'ui.notification.showOthers' }) }), openOtherAggregated ? _jsx(Icon, { children: "expand_less" }) : _jsx(Icon, { children: "expand_more" })] })), _jsx(Collapse, Object.assign({ in: openOtherAggregated, timeout: "auto", unmountOnExit: true, classes: { root: classes.collapsed } }, { children: notificationObject.aggregated.slice(showMaxAggregated).map((n, i) => renderAggregatedItem(n, i)) }))] }))] }))] })), openAlert && _jsx(UserDeletedSnackBar, { open: openAlert, handleClose: () => setOpenAlert(false) })] }));
+    return (_jsxs(_Fragment, { children: [_jsxs(Root, Object.assign({ id: id, className: classNames(classes.root, className) }, rest, { children: [renderNotificationHeader(), _jsxs(CardContent, Object.assign({ className: classes.content }, { children: [_jsx("div", Object.assign({ className: classes.unCollapsed }, { children: notificationObject.aggregated.slice(0, showMaxAggregated).map((n, i) => renderAggregatedItem(n, i)) })), notificationObject.aggregated.length > showMaxAggregated && (_jsxs(_Fragment, { children: [_jsxs(ListItemButton, Object.assign({ onClick: setStateAggregated, classes: { root: classes.showOtherAggregated } }, { children: [_jsx(ListItemText, { primary: _jsx(FormattedMessage, { id: "ui.notification.showOthers", defaultMessage: "ui.notification.showOthers" }) }), openOtherAggregated ? _jsx(Icon, { children: "expand_less" }) : _jsx(Icon, { children: "expand_more" })] })), _jsx(Collapse, Object.assign({ in: openOtherAggregated, timeout: "auto", unmountOnExit: true, classes: { root: classes.collapsed } }, { children: notificationObject.aggregated.slice(showMaxAggregated).map((n, i) => renderAggregatedItem(n, i)) }))] }))] }))] })), openAlert && _jsx(UserDeletedSnackBar, { open: openAlert, handleClose: () => setOpenAlert(false) })] }));
 }

package/lib/esm/components/Notification/PrivateMessage/PrivateMessage.js

@@ -80,7 +80,7 @@ export default function PrivateMessageNotification(props) {
                 to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, notificationObject.message.sender)
             }), { onClick: notificationObject.message.sender.deleted ? () => setOpenAlert(true) : null }, { children: _jsx(UserAvatar, Object.assign({ hide: !notificationObject.message.sender.community_badge, smaller: true }, { children: _jsx(Avatar, { alt: notificationObject.message.sender.username, variant: "circular", src: notificationObject.message.sender.avatar, classes: { root: classes.avatar } }) })) })), primary: _jsxs(_Fragment, { children: [isToastTemplate && (_jsxs(Box, { children: [_jsx(Link, Object.assign({}, (!notificationObject.message.sender.deleted && {
                                 to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, notificationObject.message.sender)
-                            }), { onClick: notificationObject.message.sender.deleted ? () => setOpenAlert(true) : null }, { children: notificationObject.message.sender.username })), ' ', _jsx(FormattedMessage, { id: 'ui.userToastNotifications.privateMessage.sentMessage', defaultMessage: 'ui.userToastNotifications.privateMessage.sentMessage' }), ":", _jsx(Box, Object.assign({ className: classes.messageWrap }, { children: _jsx(Link, Object.assign({ to: ((_a = notificationObject.message) === null || _a === void 0 ? void 0 : _a.group)
+                            }), { onClick: notificationObject.message.sender.deleted ? () => setOpenAlert(true) : null }, { children: notificationObject.message.sender.username })), ' ', _jsx(FormattedMessage, { id: "ui.userToastNotifications.privateMessage.sentMessage", defaultMessage: "ui.userToastNotifications.privateMessage.sentMessage" }), ":", _jsx(Box, Object.assign({ className: classes.messageWrap }, { children: _jsx(Link, Object.assign({ to: ((_a = notificationObject.message) === null || _a === void 0 ? void 0 : _a.group)
                                         ? scRoutingContext.url(SCRoutes.GROUP_MESSAGES_ROUTE_NAME, notificationObject.message.group)
                                         : scRoutingContext.url(SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, notificationObject.message.sender), className: classes.message }, { children: _jsx(Typography, { variant: "body2", dangerouslySetInnerHTML: { __html: notificationObject.message.message } }) })) }))] })), isSnippetTemplate && (_jsx(Box, { children: _jsxs(Typography, Object.assign({ component: "div", color: "inherit" }, { children: [_jsx(Link, Object.assign({}, (!notificationObject.message.sender.deleted && {
                                     to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, notificationObject.message.sender)
@@ -88,10 +88,10 @@ export default function PrivateMessageNotification(props) {
                                         ? scRoutingContext.url(SCRoutes.GROUP_MESSAGES_ROUTE_NAME, notificationObject.message.group)
                                         : scRoutingContext.url(SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, notificationObject.message.sender), className: classes.messageLabel }, { children: intl.formatMessage(messages.receivePrivateMessage, {
                                         total: 1,
-                                        b: (...chunks) => _jsx("strong", { children: chunks })
+                                        b: (chunks) => _jsx("strong", { children: chunks }, "ui.notification.receivePrivateMessage.b")
                                     }) }))] })) }))] }), footer: isToastTemplate && (_jsxs(Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 }, { children: [_jsx(DateTimeAgo, { date: notificationObject.active_at }), _jsx(Typography, Object.assign({ color: "primary" }, { children: _jsx(Link, Object.assign({ to: ((_c = notificationObject.message) === null || _c === void 0 ? void 0 : _c.group)
                                 ? scRoutingContext.url(SCRoutes.GROUP_MESSAGES_ROUTE_NAME, notificationObject.message.group)
-                                : scRoutingContext.url(SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, notificationObject.message.sender) }, { children: scUserContext.user && follower ? (_jsx(FormattedMessage, { id: "ui.userToastNotifications.replyMessage", defaultMessage: 'ui.userToastNotifications.replyMessage' })) : (_jsx(FormattedMessage, { id: "ui.userToastNotifications.viewMessage", defaultMessage: 'ui.userToastNotifications.viewMessage' })) })) }))] }))) }, rest)));
+                                : scRoutingContext.url(SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, notificationObject.message.sender) }, { children: scUserContext.user && follower ? (_jsx(FormattedMessage, { id: "ui.userToastNotifications.replyMessage", defaultMessage: "ui.userToastNotifications.replyMessage" })) : (_jsx(FormattedMessage, { id: "ui.userToastNotifications.viewMessage", defaultMessage: "ui.userToastNotifications.viewMessage" })) })) }))] }))) }, rest)));
     }
     return (_jsxs(_Fragment, { children: [_jsx(Root, Object.assign({ id: id, className: classNames(classes.root, className, `${PREFIX}-${template}`), template: template, isNew: notificationObject.is_new, disableTypography: true, actions: _jsxs(Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 }, { children: [_jsx(DateTimeAgo, { date: notificationObject.active_at, className: classes.activeAt }), _jsx(Button, Object.assign({ color: "primary", variant: "outlined", size: "small", classes: { root: classes.replyButton }, component: Link, loading: notificationObject.message.sender.deleted
                                 ? null

package/lib/esm/components/Notification/UndeletedFor/UndeletedFor.js

@@ -38,5 +38,5 @@ export default function UndeletedForNotification(props) {
     /**
      * Renders root object
      */
-    return (_jsx(Root, Object.assign({ id: id, className: classNames(classes.root, className, `${PREFIX}-${template}`), template: template, isNew: notificationObject.is_new, disableTypography: true, image: _jsx(Avatar, Object.assign({ variant: "circular", classes: { root: classes.undeletedIcon } }, { children: _jsx(Icon, { children: "outlined_flag" }) })), primary: _jsx(_Fragment, { children: isSnippetTemplate ? (_jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes[`${contributionType.toUpperCase()}_ROUTE_NAME`], getRouteData(notificationObject[contributionType])) }, { children: _jsx(Typography, Object.assign({ component: "div", color: "inherit", className: classes.undeletedText }, { children: _jsx(FormattedMessage, { id: "ui.notification.undeletedFor.restoredContentSnippet", defaultMessage: "ui.notification.undeletedFor.restoredContentSnippet" }) })) }))) : (_jsx(Typography, Object.assign({ component: "div", color: "inherit", className: classes.undeletedText }, { children: _jsx(FormattedMessage, { id: "ui.notification.undeletedFor.restoredContent", defaultMessage: "ui.notification.undeletedFor.restoredContent" }) }))) }), secondary: (template === SCNotificationObjectTemplateType.DETAIL || template === SCNotificationObjectTemplateType.SNIPPET) && (_jsx(DateTimeAgo, { date: notificationObject.active_at, className: classes.activeAt })), footer: isSnippetTemplate ? null : (_jsxs(_Fragment, { children: [_jsxs(Box, Object.assign({ className: classes.contributionWrap }, { children: [_jsx(Typography, Object.assign({ variant: 'body2', color: 'inherit', component: 'div', classes: { root: classes.contributionYouWroteLabel } }, { children: _jsx(FormattedMessage, { id: "ui.notification.undeletedFor.youWrote", defaultMessage: "ui.notification.undeletedFor.youWrote" }) })), _jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes[`${contributionType.toUpperCase()}_ROUTE_NAME`], getRouteData(notificationObject[contributionType])), className: classes.contributionText }, { children: _jsx(Typography, Object.assign({ component: 'span', variant: "body2" }, { children: getContributionSnippet(notificationObject[contributionType]) })) }))] })), template === SCNotificationObjectTemplateType.TOAST && (_jsxs(Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 }, { children: [_jsx(DateTimeAgo, { date: notificationObject.active_at }), _jsx(Typography, Object.assign({ color: "primary", component: 'div' }, { children: _jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes[`${notificationObject[contributionType]['type'].toUpperCase()}_ROUTE_NAME`], getRouteData(notificationObject[contributionType])) }, { children: _jsx(FormattedMessage, { id: "ui.userToastNotifications.viewContribution", defaultMessage: 'ui.userToastNotifications.viewContribution' }) })) }))] })))] })) }, rest)));
+    return (_jsx(Root, Object.assign({ id: id, className: classNames(classes.root, className, `${PREFIX}-${template}`), template: template, isNew: notificationObject.is_new, disableTypography: true, image: _jsx(Avatar, Object.assign({ variant: "circular", classes: { root: classes.undeletedIcon } }, { children: _jsx(Icon, { children: "outlined_flag" }) })), primary: _jsx(_Fragment, { children: isSnippetTemplate ? (_jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes[`${contributionType.toUpperCase()}_ROUTE_NAME`], getRouteData(notificationObject[contributionType])) }, { children: _jsx(Typography, Object.assign({ component: "div", color: "inherit", className: classes.undeletedText }, { children: _jsx(FormattedMessage, { id: "ui.notification.undeletedFor.restoredContentSnippet", defaultMessage: "ui.notification.undeletedFor.restoredContentSnippet" }) })) }))) : (_jsx(Typography, Object.assign({ component: "div", color: "inherit", className: classes.undeletedText }, { children: _jsx(FormattedMessage, { id: "ui.notification.undeletedFor.restoredContent", defaultMessage: "ui.notification.undeletedFor.restoredContent" }) }))) }), secondary: (template === SCNotificationObjectTemplateType.DETAIL || template === SCNotificationObjectTemplateType.SNIPPET) && (_jsx(DateTimeAgo, { date: notificationObject.active_at, className: classes.activeAt })), footer: isSnippetTemplate ? null : (_jsxs(_Fragment, { children: [_jsxs(Box, Object.assign({ className: classes.contributionWrap }, { children: [_jsx(Typography, Object.assign({ variant: "body2", color: "inherit", component: "div", classes: { root: classes.contributionYouWroteLabel } }, { children: _jsx(FormattedMessage, { id: "ui.notification.undeletedFor.youWrote", defaultMessage: "ui.notification.undeletedFor.youWrote" }) })), _jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes[`${contributionType.toUpperCase()}_ROUTE_NAME`], getRouteData(notificationObject[contributionType])), className: classes.contributionText }, { children: _jsx(Typography, Object.assign({ component: "span", variant: "body2" }, { children: getContributionSnippet(notificationObject[contributionType]) })) }))] })), template === SCNotificationObjectTemplateType.TOAST && (_jsxs(Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 }, { children: [_jsx(DateTimeAgo, { date: notificationObject.active_at }), _jsx(Typography, Object.assign({ color: "primary", component: "div" }, { children: _jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes[`${notificationObject[contributionType]['type'].toUpperCase()}_ROUTE_NAME`], getRouteData(notificationObject[contributionType])) }, { children: _jsx(FormattedMessage, { id: "ui.userToastNotifications.viewContribution", defaultMessage: "ui.userToastNotifications.viewContribution" }) })) }))] })))] })) }, rest)));
 }

package/lib/esm/components/Notification/UserBlocked/UserBlocked.js

@@ -47,6 +47,10 @@ export default function UserBlockedNotification(props) {
                     [classes.blockedIcon]: notificationObject.type === SCNotificationTypologyType.BLOCKED_USER
                 })
             } }, { children: _jsx(Icon, { children: "outlined_flag" }) })), primary: _jsx(Typography, Object.assign({ component: "div", color: "inherit", className: classes.blockedText }, { children: notificationObject.type === SCNotificationTypologyType.BLOCKED_USER
-                ? intl.formatMessage(messages.accountBlocked, { b: (...chunks) => _jsx("strong", { children: chunks }) })
-                : intl.formatMessage(messages.accountReactivated, { b: (...chunks) => _jsx("strong", { children: chunks }) }) })), secondary: (template === SCNotificationObjectTemplateType.DETAIL || template === SCNotificationObjectTemplateType.SNIPPET) && (_jsx(DateTimeAgo, { date: notificationObject.active_at, className: classes.activeAt })), footer: template === SCNotificationObjectTemplateType.TOAST && (_jsx(Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 }, { children: _jsx(DateTimeAgo, { date: notificationObject.active_at }) }))) }, rest)));
+                ? intl.formatMessage(messages.accountBlocked, {
+                    b: (chunks) => _jsx("strong", { children: chunks }, "ui.notification.userBlocked.accountBlocked.b")
+                })
+                : intl.formatMessage(messages.accountReactivated, {
+                    b: (chunks) => _jsx("strong", { children: chunks }, "ui.notification.userBlocked.accountReactivated.b")
+                }) })), secondary: (template === SCNotificationObjectTemplateType.DETAIL || template === SCNotificationObjectTemplateType.SNIPPET) && (_jsx(DateTimeAgo, { date: notificationObject.active_at, className: classes.activeAt })), footer: template === SCNotificationObjectTemplateType.TOAST && (_jsx(Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 }, { children: _jsx(DateTimeAgo, { date: notificationObject.active_at }) }))) }, rest)));
 }

package/lib/esm/components/Notification/UserConnection/UserConnection.js

@@ -53,6 +53,10 @@ export default function UserConnectionNotification(props) {
      * Renders root object
      */
     return (_jsxs(_Fragment, { children: [_jsx(Root, Object.assign({ id: id, className: classNames(classes.root, className, `${PREFIX}-${template}`), template: template, isNew: notificationObject.is_new, disableTypography: true, image: _jsx(Link, Object.assign({}, (!userConnection.deleted && { to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, userConnection) }), { onClick: userConnection.deleted ? () => setOpenAlert(true) : null }, { children: _jsx(UserAvatar, Object.assign({ hide: !userConnection.community_badge, smaller: true }, { children: _jsx(Avatar, { alt: userConnection.username, variant: "circular", src: userConnection.avatar, classes: { root: classes.avatar } }) })) })), primary: _jsxs(Typography, Object.assign({ component: "div", color: "inherit", className: classes.connectionText }, { children: [_jsx(Link, Object.assign({}, (!userConnection.deleted && { to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, userConnection) }), { onClick: userConnection.deleted ? () => setOpenAlert(true) : null, className: classes.username }, { children: userConnection.username })), ' ', notificationObject.type === SCNotificationTypologyType.CONNECTION_REQUEST
-                            ? intl.formatMessage(messages.requestConnection, { b: (...chunks) => _jsx("strong", { children: chunks }) })
-                            : intl.formatMessage(messages.acceptConnection, { b: (...chunks) => _jsx("strong", { children: chunks }) })] })), secondary: (template === SCNotificationObjectTemplateType.DETAIL || template === SCNotificationObjectTemplateType.SNIPPET) && (_jsx(DateTimeAgo, { date: notificationObject.active_at, className: classes.activeAt })), footer: template === SCNotificationObjectTemplateType.TOAST && (_jsxs(Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 }, { children: [_jsx(DateTimeAgo, { date: notificationObject.active_at }), _jsx(Typography, Object.assign({ color: "primary", component: 'div' }, { children: _jsx(Link, Object.assign({}, (!userConnection.deleted && { to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, userConnection) }), { onClick: userConnection.deleted ? () => setOpenAlert(true) : null }, { children: _jsx(FormattedMessage, { id: "ui.userToastNotifications.goToProfile", defaultMessage: 'ui.userToastNotifications.goToProfile' }) })) }))] }))) }, rest)), openAlert && _jsx(UserDeletedSnackBar, { open: openAlert, handleClose: () => setOpenAlert(false) })] }));
+                            ? intl.formatMessage(messages.requestConnection, {
+                                b: (chunks) => _jsx("strong", { children: chunks }, "ui.notification.userConnection.requestConnection.b")
+                            })
+                            : intl.formatMessage(messages.acceptConnection, {
+                                b: (chunks) => _jsx("strong", { children: chunks }, "ui.notification.userConnection.acceptConnection.b")
+                            })] })), secondary: (template === SCNotificationObjectTemplateType.DETAIL || template === SCNotificationObjectTemplateType.SNIPPET) && (_jsx(DateTimeAgo, { date: notificationObject.active_at, className: classes.activeAt })), footer: template === SCNotificationObjectTemplateType.TOAST && (_jsxs(Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 }, { children: [_jsx(DateTimeAgo, { date: notificationObject.active_at }), _jsx(Typography, Object.assign({ color: "primary", component: "div" }, { children: _jsx(Link, Object.assign({}, (!userConnection.deleted && { to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, userConnection) }), { onClick: userConnection.deleted ? () => setOpenAlert(true) : null }, { children: _jsx(FormattedMessage, { id: "ui.userToastNotifications.goToProfile", defaultMessage: "ui.userToastNotifications.goToProfile" }) })) }))] }))) }, rest)), openAlert && _jsx(UserDeletedSnackBar, { open: openAlert, handleClose: () => setOpenAlert(false) })] }));
 }

package/lib/esm/components/Notification/UserFollow/UserFollow.js

@@ -45,7 +45,7 @@ export default function UserFollowNotification(props) {
     /**
      * Renders root object
      */
-    return (_jsxs(_Fragment, { children: [_jsx(Root, Object.assign({ id: id, className: classNames(classes.root, className, `${PREFIX}-${template}`), template: template, isNew: notificationObject.is_new, disableTypography: true, image: _jsx(Link, Object.assign({}, (!notificationObject.follower.deleted && { to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, notificationObject.follower) }), { onClick: notificationObject.follower.deleted ? () => setOpenAlert(true) : null }, { children: _jsx(UserAvatar, Object.assign({ hide: !notificationObject.follower.community_badge, smaller: true }, { children: _jsx(Avatar, { alt: notificationObject.follower.username, variant: "circular", src: notificationObject.follower.avatar, classes: { root: classes.avatar } }) })) })), primary: _jsxs(Typography, Object.assign({ component: "div", color: "inherit", className: classes.followText }, { children: [_jsx(Link, Object.assign({}, (!notificationObject.follower.deleted && { to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, notificationObject.follower) }), { onClick: notificationObject.follower.deleted ? () => setOpenAlert(true) : null, className: classes.username }, { children: notificationObject.follower.username })), ' ', intl.formatMessage(messages.followUser, { b: (...chunks) => _jsx("strong", { children: chunks }) })] })), secondary: (template === SCNotificationObjectTemplateType.DETAIL || template === SCNotificationObjectTemplateType.SNIPPET) && (_jsx(DateTimeAgo, { date: notificationObject.active_at, className: classes.activeAt })), footer: template === SCNotificationObjectTemplateType.TOAST && (_jsxs(Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 }, { children: [_jsx(DateTimeAgo, { date: notificationObject.active_at }), _jsx(Typography, Object.assign({ color: "primary", component: 'div' }, { children: _jsx(Link, Object.assign({}, (!notificationObject.follower.deleted && {
+    return (_jsxs(_Fragment, { children: [_jsx(Root, Object.assign({ id: id, className: classNames(classes.root, className, `${PREFIX}-${template}`), template: template, isNew: notificationObject.is_new, disableTypography: true, image: _jsx(Link, Object.assign({}, (!notificationObject.follower.deleted && { to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, notificationObject.follower) }), { onClick: notificationObject.follower.deleted ? () => setOpenAlert(true) : null }, { children: _jsx(UserAvatar, Object.assign({ hide: !notificationObject.follower.community_badge, smaller: true }, { children: _jsx(Avatar, { alt: notificationObject.follower.username, variant: "circular", src: notificationObject.follower.avatar, classes: { root: classes.avatar } }) })) })), primary: _jsxs(Typography, Object.assign({ component: "div", color: "inherit", className: classes.followText }, { children: [_jsx(Link, Object.assign({}, (!notificationObject.follower.deleted && { to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, notificationObject.follower) }), { onClick: notificationObject.follower.deleted ? () => setOpenAlert(true) : null, className: classes.username }, { children: notificationObject.follower.username })), ' ', intl.formatMessage(messages.followUser, { b: (chunks) => _jsx("strong", { children: chunks }, "ui.notification.userFollow.followUser.b") })] })), secondary: (template === SCNotificationObjectTemplateType.DETAIL || template === SCNotificationObjectTemplateType.SNIPPET) && (_jsx(DateTimeAgo, { date: notificationObject.active_at, className: classes.activeAt })), footer: template === SCNotificationObjectTemplateType.TOAST && (_jsxs(Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 }, { children: [_jsx(DateTimeAgo, { date: notificationObject.active_at }), _jsx(Typography, Object.assign({ color: "primary", component: "div" }, { children: _jsx(Link, Object.assign({}, (!notificationObject.follower.deleted && {
                                 to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, notificationObject.follower)
-                            }), { onClick: notificationObject.follower.deleted ? () => setOpenAlert(true) : null }, { children: _jsx(FormattedMessage, { id: "ui.userToastNotifications.goToProfile", defaultMessage: 'ui.userToastNotifications.goToProfile' }) })) }))] }))) }, rest)), openAlert && _jsx(UserDeletedSnackBar, { open: openAlert, handleClose: () => setOpenAlert(false) })] }));
+                            }), { onClick: notificationObject.follower.deleted ? () => setOpenAlert(true) : null }, { children: _jsx(FormattedMessage, { id: "ui.userToastNotifications.goToProfile", defaultMessage: "ui.userToastNotifications.goToProfile" }) })) }))] }))) }, rest)), openAlert && _jsx(UserDeletedSnackBar, { open: openAlert, handleClose: () => setOpenAlert(false) })] }));
 }

package/lib/esm/components/Notification/VoteUp/VoteUp.js

@@ -52,6 +52,6 @@ export default function VoteUpNotification(props) {
      */
     return (_jsxs(_Fragment, { children: [_jsx(Root, Object.assign({ id: id, className: classNames(classes.root, className, `${PREFIX}-${template}`), template: template, isNew: notificationObject.is_new, disableTypography: true, image: _jsx(Link, Object.assign({}, (!notificationObject.user.deleted && { to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, notificationObject.user) }), { onClick: notificationObject.user.deleted ? () => setOpenAlert(true) : null }, { children: _jsx(UserAvatar, Object.assign({ hide: !notificationObject.user.community_badge, smaller: true }, { children: _jsx(Avatar, { alt: notificationObject.user.username, variant: "circular", src: notificationObject.user.avatar, classes: { root: classes.avatar } }) })) })), primary: _jsxs(_Fragment, { children: [_jsx(Link, Object.assign({}, (!notificationObject.user.deleted && { to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, notificationObject.user) }), { onClick: notificationObject.user.deleted ? () => setOpenAlert(true) : null, className: classes.username }, { children: notificationObject.user.username })), ' ', intl.formatMessage(messages.appreciated, {
                             username: notificationObject.user.username,
-                            b: (...chunks) => _jsx("strong", { children: chunks })
-                        })] }), secondary: _jsxs(_Fragment, { children: [_jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes[`${contributionType.toUpperCase()}_ROUTE_NAME`], getRouteData(notificationObject[contributionType])) }, { children: _jsx(Typography, Object.assign({ variant: "body2", className: classes.contributionText, component: 'div' }, { children: getContributionSnippet(notificationObject[contributionType]) })) })), (template === SCNotificationObjectTemplateType.DETAIL || template === SCNotificationObjectTemplateType.SNIPPET) && (_jsx(DateTimeAgo, { date: notificationObject.active_at, className: classes.activeAt }))] }), footer: template === SCNotificationObjectTemplateType.TOAST && (_jsxs(Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 }, { children: [_jsx(DateTimeAgo, { date: notificationObject.active_at }), _jsx(Typography, Object.assign({ color: "primary", component: 'div' }, { children: _jsx(Link, Object.assign({ to: scRoutingContext.url(getContributionRouteName(contribution), getRouteData(contribution)) }, { children: _jsx(FormattedMessage, { id: "ui.userToastNotifications.viewContribution", defaultMessage: 'ui.userToastNotifications.viewContribution' }) })) }))] }))) }, rest)), openAlert && _jsx(UserDeletedSnackBar, { open: openAlert, handleClose: () => setOpenAlert(false) })] }));
+                            b: (chunks) => _jsx("strong", { children: chunks }, "ui.notification.voteUp.appreciated.b")
+                        })] }), secondary: _jsxs(_Fragment, { children: [_jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes[`${contributionType.toUpperCase()}_ROUTE_NAME`], getRouteData(notificationObject[contributionType])) }, { children: _jsx(Typography, Object.assign({ variant: "body2", className: classes.contributionText, component: "div" }, { children: getContributionSnippet(notificationObject[contributionType]) })) })), (template === SCNotificationObjectTemplateType.DETAIL || template === SCNotificationObjectTemplateType.SNIPPET) && (_jsx(DateTimeAgo, { date: notificationObject.active_at, className: classes.activeAt }))] }), footer: template === SCNotificationObjectTemplateType.TOAST && (_jsxs(Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 }, { children: [_jsx(DateTimeAgo, { date: notificationObject.active_at }), _jsx(Typography, Object.assign({ color: "primary", component: "div" }, { children: _jsx(Link, Object.assign({ to: scRoutingContext.url(getContributionRouteName(contribution), getRouteData(contribution)) }, { children: _jsx(FormattedMessage, { id: "ui.userToastNotifications.viewContribution", defaultMessage: "ui.userToastNotifications.viewContribution" }) })) }))] }))) }, rest)), openAlert && _jsx(UserDeletedSnackBar, { open: openAlert, handleClose: () => setOpenAlert(false) })] }));
 }

package/lib/esm/components/OnBoardingWidget/OnBoardingWidget.js

@@ -1,6 +1,6 @@
 import { __awaiter, __rest } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { Accordion, AccordionDetails, AccordionSummary, Box, Button, CardContent, CardMedia, Checkbox, Chip, Fade, Icon, IconButton, List, ListItem, ListItemButton, ListItemIcon, ListItemText, Typography, useMediaQuery, useTheme, styled } from '@mui/material';
 import { FormattedMessage } from 'react-intl';
 import classNames from 'classnames';
@@ -297,23 +297,26 @@ const OnBoardingWidget = (inProps) => {
         }
         return content;
     };
+    const handleAccordionChange = useCallback(() => {
+        setExpanded((prev) => !prev);
+    }, [setExpanded]);
     if (!isAdmin || !showOnBoarding) {
         return _jsx(HiddenPlaceholder, {});
     }
-    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: _jsxs(AccordionRoot, Object.assign({ defaultExpanded: true, className: classes.accordionRoot, expanded: expanded }, { children: [_jsx(AccordionSummary, Object.assign({ expandIcon: _jsx(OnBoardingActionsButton, { isExpanded: expanded, onExpandChange: handleExpand, onHideOnBoarding: handlePreferencesUpdate }), "aria-controls": "accordion", id: "onBoarding-accordion" }, { children: _jsx(_Fragment, { children: expanded ? (_jsxs(_Fragment, { children: [!isMobile ? (_jsx(CardMedia, { className: classes.logo, component: "img", src: HeaderPlaceholder })) : (_jsxs(Typography, Object.assign({ variant: "h4" }, { children: [_jsx(Icon, Object.assign({ color: "secondary", fontSize: "medium" }, { children: "ai_stars" })), _jsx(FormattedMessage, { id: "ui.onBoardingWidget.accordion.expanded.title.mobile", defaultMessage: "ui.onBoardingWidget.accordion.expanded.title.mobile", values: {
-                                                b: (chunks) => _jsx("strong", { children: chunks })
+    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: _jsxs(AccordionRoot, Object.assign({ defaultExpanded: true, className: classes.accordionRoot, expanded: expanded, onChange: handleAccordionChange }, { children: [_jsx(AccordionSummary, Object.assign({ expandIcon: _jsx(OnBoardingActionsButton, { isExpanded: expanded, onExpandChange: handleExpand, onHideOnBoarding: handlePreferencesUpdate }), "aria-controls": "accordion", id: "onBoarding-accordion", component: "div" }, { children: _jsx(_Fragment, { children: expanded ? (_jsxs(_Fragment, { children: [!isMobile ? (_jsx(CardMedia, { className: classes.logo, component: "img", src: HeaderPlaceholder })) : (_jsxs(Typography, Object.assign({ variant: "h4" }, { children: [_jsx(Icon, Object.assign({ color: "secondary", fontSize: "medium" }, { children: "ai_stars" })), _jsx(FormattedMessage, { id: "ui.onBoardingWidget.accordion.expanded.title.mobile", defaultMessage: "ui.onBoardingWidget.accordion.expanded.title.mobile", values: {
+                                                b: (chunks) => _jsx("strong", { children: chunks }, "ui.onBoardingWidget.accordion.expanded.title.mobile.b")
                                             } })] }))), _jsxs(Box, Object.assign({ className: classes.intro }, { children: [!isMobile && (_jsx(Typography, Object.assign({ variant: "h4" }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.accordion.expanded.title", defaultMessage: "ui.onBoardingWidget.accordion.expanded.title" }) }))), _jsx(Typography, Object.assign({ variant: "h5" }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.accordion.expanded.subtitle", defaultMessage: "ui.onBoardingWidget.accordion.expanded.subtitle" }) })), _jsx(Typography, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.accordion.expanded.summary", defaultMessage: "ui.onBoardingWidget.accordion.expanded.summary", values: {
-                                                    b: (chunks) => _jsx("strong", { children: chunks }),
-                                                    icon: (...chunks) => _jsx(Icon, { children: chunks })
+                                                    b: (chunks) => _jsx("strong", { children: chunks }, "ui.onBoardingWidget.accordion.expanded.summary.b"),
+                                                    icon: (chunks) => _jsx(Icon, { children: chunks }, "ui.onBoardingWidget.accordion.expanded.summary.icon")
                                                 } }) })] }))] })) : (_jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.accordion.collapsed", defaultMessage: "ui.onBoardingWidget.accordion.collapsed", values: {
-                                    b: (chunks) => _jsx("strong", { children: chunks }),
-                                    icon: (...chunks) => (_jsx(Icon, Object.assign({ color: "secondary", fontSize: "medium" }, { children: chunks })))
+                                    b: (chunks) => _jsx("strong", { children: chunks }, "ui.onBoardingWidget.accordion.collapsed.b"),
+                                    icon: (chunks) => (_jsx(Icon, Object.assign({ color: "secondary", fontSize: "medium" }, { children: chunks }), "ui.onBoardingWidget.accordion.collapsed.icon"))
                                 } }) }))) }) })), _jsx(AccordionDetails, { children: _jsx(Widget, Object.assign({ className: classes.content, elevation: 0 }, { children: loading ? (_jsx(OnBoardingWidgetSkeleton, {})) : (_jsxs(CardContent, { children: [_jsx(List, Object.assign({ className: isMobile ? classes.stepsMobile : classes.steps }, { children: steps === null || steps === void 0 ? void 0 : steps.map((step) => (_jsx(ListItem, { children: isMobile ? (_jsx(Chip, { size: "small", label: _jsxs(_Fragment, { children: [_jsx(FormattedMessage, { id: `ui.onBoardingWidget.${step.step}`, defaultMessage: `ui.onBoardingWidget.${step.step}` }), ' ', step.status === SCOnBoardingStepStatusType.COMPLETED && (_jsx(Icon, Object.assign({ color: (step === null || step === void 0 ? void 0 : step.status) === SCOnBoardingStepStatusType.COMPLETED && (step === null || step === void 0 ? void 0 : step.step) !== (_step === null || _step === void 0 ? void 0 : _step.step) ? 'success' : 'inherit' }, { children: "check" })))] }), onClick: () => handleChange(step), variant: step.step === (_step === null || _step === void 0 ? void 0 : _step.step) ? 'filled' : 'outlined', color: step.status === SCOnBoardingStepStatusType.COMPLETED ? 'success' : 'default' })) : (_jsxs(ListItemButton, Object.assign({ onClick: () => handleChange(step), selected: (step === null || step === void 0 ? void 0 : step.step) === (_step === null || _step === void 0 ? void 0 : _step.step) }, { children: [_jsx(ListItemIcon, { children: _jsx(Checkbox, { edge: "start", checked: step.status === SCOnBoardingStepStatusType.COMPLETED, tabIndex: -1, disableRipple: true, slotProps: {
                                                             input: {
                                                                 'aria-labelledby': `${step.step}`
                                                             }
                                                         }, size: "small" }) }), _jsx(ListItemText, { primary: _jsx(FormattedMessage, { id: `ui.onBoardingWidget.${step.step}`, defaultMessage: `ui.onBoardingWidget.${step.step}` }) })] }))) }, step.id))) })), _jsxs(Box, Object.assign({ className: classes.stepContent }, { children: [_jsx(Fade, Object.assign({ in: true, timeout: 2400 }, { children: _jsx(Box, { children: getStepContent() }) })), showNoCategoriesModal && (_jsx(BaseDialog, Object.assign({ title: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.ai.no.categories", defaultMessage: "ui.onBoardingWidget.ai.no.categories" }), DialogContentProps: { dividers: false }, open: showNoCategoriesModal, onClose: () => setShowNoCategoriesModal(false), actions: _jsx(Button, Object.assign({ color: "secondary", onClick: () => setShowNoCategoriesModal(false) }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.ai.no.categories.cancel", defaultMessage: "ui.onBoardingWidget.ai.no.categories.cancel" }) })) }, { children: _jsx(Button, Object.assign({ color: "primary", onClick: handleCategoriesClick, startIcon: _jsx(Icon, Object.assign({ fontSize: "small" }, { children: "edit" })) }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.ai.no.categories.link", defaultMessage: "ui.onBoardingWidget.ai.no.categories.link" }) })) }))), showCategoriesWarningModal && (_jsx(DialogRoot, Object.assign({ className: classes.dialogRoot, title: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.ai.categories.warning.title", defaultMessage: "ui.onBoardingWidget.ai.categories.warning.title" }), DialogContentProps: { dividers: false }, open: showCategoriesWarningModal, onClose: () => setShowWarningCategoriesModal(false), actions: _jsxs(_Fragment, { children: [_jsx(Button, Object.assign({ size: "small", variant: "outlined", color: "primary", onClick: () => setShowWarningCategoriesModal(false) }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.ai.categories.warning.button.close", defaultMessage: "ui.onBoardingWidget.ai.categories.warning.button.close" }) })), _jsx(Button, Object.assign({ size: "small", variant: "contained", color: "secondary", onClick: () => startStep(SCOnBoardingStepIdType.CATEGORIES), endIcon: _jsx(Icon, Object.assign({ fontSize: "small" }, { children: "magic_wand" })) }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.ai.categories.warning.button.generate", defaultMessage: "ui.onBoardingWidget.ai.categories.warning.button.generate" }) }))] }) }, { children: _jsxs(Typography, Object.assign({ className: classes.dialogContent }, { children: [_jsx(FormattedMessage, { id: "ui.onBoardingWidget.ai.categories.warning.info", defaultMessage: "ui.onBoardingWidget.ai.categories.warning.info" }), _jsx(FormattedMessage, { id: "ui.onBoardingWidget.ai.categories.warning.confirm", defaultMessage: "ui.onBoardingWidget.ai.categories.warning.confirm", values: {
-                                                            b: (chunks) => _jsx("b", { children: chunks })
+                                                            b: (chunks) => _jsx("b", { children: chunks }, "ui.onBoardingWidget.ai.categories.warning.confirm.b")
                                                         } })] })) })))] }))] })) })) })] })) })));
 };
 export default OnBoardingWidget;

package/lib/esm/components/OnBoardingWidget/Skeleton.js

@@ -14,5 +14,5 @@ export default function OnBoardingWidgetSkeleton() {
     const theme = useTheme();
     const isMobile = useMediaQuery(theme.breakpoints.down('md'));
     const steps = Array(isMobile ? 3 : 5).fill(null);
-    return (_jsxs(Root, Object.assign({ className: classes.root }, { children: [_jsx(Box, Object.assign({ className: classes.menu }, { children: isMobile ? (_jsx(Box, Object.assign({ sx: { display: 'flex', justifyContent: 'space-evenly' } }, { children: steps.map((_, index) => (_jsx(Chip, { label: _jsx(Skeleton, { variant: "text", width: 80 }), variant: "outlined" }, index))) }))) : (_jsx(List, { children: steps.map((_, index) => (_jsx(ListItem, { children: _jsxs(ListItemButton, { children: [_jsx(ListItemIcon, { children: _jsx(Skeleton, { variant: "rectangular", width: 20, height: 20 }) }), _jsx(ListItemText, { primary: _jsx(Skeleton, { variant: "text", width: 100 }) })] }) }, index))) })) })), _jsxs(Box, Object.assign({ className: classes.content }, { children: [_jsx(Skeleton, { variant: "text", width: '20%', height: 40 }), _jsx(Skeleton, { variant: "text", width: '80%', height: 20 }), _jsx(Skeleton, { variant: "text", width: '70%', height: 20 }), _jsx(Skeleton, { variant: "text", width: '60%', height: 20 }), _jsx(Skeleton, { variant: "rectangular", width: 100, height: 36, style: { borderRadius: '20px', alignSelf: 'center', marginTop: 24 } })] }))] })));
+    return (_jsxs(Root, Object.assign({ className: classes.root }, { children: [_jsx(Box, Object.assign({ className: classes.menu }, { children: isMobile ? (_jsx(Box, Object.assign({ sx: { display: 'flex', justifyContent: 'space-evenly' } }, { children: steps.map((_, index) => (_jsx(Chip, { label: _jsx(Skeleton, { variant: "text", width: 80 }), variant: "outlined" }, index))) }))) : (_jsx(List, { children: steps.map((_, index) => (_jsx(ListItem, { children: _jsxs(ListItemButton, { children: [_jsx(ListItemIcon, { children: _jsx(Skeleton, { variant: "rectangular", width: 20, height: 20 }) }), _jsx(ListItemText, { primary: _jsx(Skeleton, { variant: "text", width: 100 }) })] }) }, index))) })) })), _jsxs(Box, Object.assign({ className: classes.content }, { children: [_jsx(Skeleton, { variant: "text", width: "20%", height: 40 }), _jsx(Skeleton, { variant: "text", width: "80%", height: 20 }), _jsx(Skeleton, { variant: "text", width: "70%", height: 20 }), _jsx(Skeleton, { variant: "text", width: "60%", height: 20 }), _jsx(Skeleton, { variant: "rectangular", width: 100, height: 36, style: { borderRadius: '20px', alignSelf: 'center', marginTop: 24 } })] }))] })));
 }

package/lib/esm/components/OnBoardingWidget/Steps/App/App.js

@@ -35,36 +35,20 @@ export default function App(inProps) {
     // STATE
     const [tab, setTab] = useState(0);
     // HANDLERS
-    const handleChange = (event, newValue) => {
+    const handleChange = (_event, newValue) => {
         setTab(newValue);
     };
     return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, { children: [_jsx(Typography, Object.assign({ variant: "h4", className: classes.title }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.app.title", defaultMessage: "ui.onBoardingWidget.step.app.title" }) })), _jsx(Typography, Object.assign({ className: classes.summary }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.app.summary", defaultMessage: "ui.onBoardingWidget.step.app.summary" }) })), _jsxs(Tabs, Object.assign({ className: classes.tabs, value: tab, onChange: handleChange, centered: true, variant: "fullWidth", indicatorColor: "primary" }, { children: [_jsx(Tab, { label: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.app.tab.android", defaultMessage: "ui.onBoardingWidget.step.app.tab.android" }) }), _jsx(Tab, { label: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.app.tab.ios", defaultMessage: "ui.onBoardingWidget.step.app.tab.ios" }) })] })), _jsxs(Box, Object.assign({ className: classes.tabContent }, { children: [tab === 0 && (_jsxs(_Fragment, { children: [_jsx(Typography, Object.assign({ className: classes.summary }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.app.android", defaultMessage: "ui.onBoardingWidget.step.app.android" }) })), _jsx(Typography, Object.assign({ className: classes.step }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.app.android.a", defaultMessage: "ui.onBoardingWidget.step.app.android.a", values: {
-                                        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                                        // @ts-ignore
-                                        icon: (...chunks) => _jsx(Icon, Object.assign({ fontSize: "medium" }, { children: chunks })),
-                                        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                                        // @ts-ignore
-                                        b: (...chunks) => _jsx("strong", { children: chunks })
+                                        icon: (chunks) => (_jsx(Icon, Object.assign({ fontSize: "medium" }, { children: chunks }), "ui.onBoardingWidget.step.app.android.a.icon")),
+                                        b: (chunks) => _jsx("strong", { children: chunks }, "ui.onBoardingWidget.step.app.android.a.b")
                                     } }) })), _jsx(Typography, Object.assign({ className: classes.step }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.app.android.b", defaultMessage: "ui.onBoardingWidget.step.app.android.b", values: {
-                                        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                                        // @ts-ignore
-                                        icon: (...chunks) => _jsx(Icon, Object.assign({ fontSize: "medium" }, { children: chunks })),
-                                        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                                        // @ts-ignore
-                                        b: (...chunks) => _jsx("strong", { children: chunks })
+                                        icon: (chunks) => (_jsx(Icon, Object.assign({ fontSize: "medium" }, { children: chunks }), "ui.onBoardingWidget.step.app.android.b.icon")),
+                                        b: (chunks) => _jsx("strong", { children: chunks }, "ui.onBoardingWidget.step.app.android.b.b")
                                     } }) })), _jsx(CardMedia, { className: classes.imageAndroid, component: "img", src: AndroidPlaceholder })] })), tab === 1 && (_jsxs(_Fragment, { children: [_jsx(Typography, Object.assign({ className: classes.summary }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.app.ios", defaultMessage: "ui.onBoardingWidget.step.app.ios" }) })), _jsx(Typography, Object.assign({ className: classes.step }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.app.ios.a", defaultMessage: "ui.onBoardingWidget.step.app.ios.a", values: {
-                                        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                                        // @ts-ignore
-                                        icon: (...chunks) => _jsx(Icon, Object.assign({ fontSize: "medium" }, { children: chunks })),
-                                        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                                        // @ts-ignore
-                                        b: (...chunks) => _jsx("strong", { children: chunks })
+                                        icon: (chunks) => (_jsx(Icon, Object.assign({ fontSize: "medium" }, { children: chunks }), "ui.onBoardingWidget.step.app.ios.a.icon")),
+                                        b: (chunks) => _jsx("strong", { children: chunks }, "ui.onBoardingWidget.step.app.ios.a.b")
                                     } }) })), _jsx(Typography, Object.assign({ className: classes.step }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.app.ios.b", defaultMessage: "ui.onBoardingWidget.step.app.ios.b", values: {
-                                        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                                        // @ts-ignore
-                                        icon: (...chunks) => _jsx(Icon, Object.assign({ fontSize: "medium" }, { children: chunks })),
-                                        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                                        // @ts-ignore
-                                        b: (...chunks) => _jsx("strong", { children: chunks })
+                                        icon: (chunks) => (_jsx(Icon, Object.assign({ fontSize: "medium" }, { children: chunks }), "ui.onBoardingWidget.step.app.ios.b.icon")),
+                                        b: (chunks) => _jsx("strong", { children: chunks }, "ui.onBoardingWidget.step.app.ios.b.b")
                                     } }) })), _jsx(CardMedia, { className: classes.image, component: "img", src: IosPlaceholder })] })), _jsx(Button, Object.assign({ className: classes.button, size: "small", variant: "outlined", color: "secondary", onClick: onCompleteAction, disabled: (step === null || step === void 0 ? void 0 : step.status) === SCOnBoardingStepStatusType.COMPLETED || (step === null || step === void 0 ? void 0 : step.status) === SCOnBoardingStepStatusType.IN_PROGRESS }, { children: "Ok!" }))] }))] })));
 }

package/lib/esm/components/OnBoardingWidget/Steps/Category/Category.js

@@ -87,14 +87,8 @@ export default function Category(inProps) {
         return message;
     }, [progress]);
     return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, { children: [_jsx(Typography, Object.assign({ variant: "h4", className: classes.title }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.categories", defaultMessage: "ui.onBoardingWidget.categories" }) })), _jsx(Typography, Object.assign({ className: classes.summary }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.category.summary", defaultMessage: "ui.onBoardingWidget.step.category.summary" }) })), (step === null || step === void 0 ? void 0 : step.status) !== SCOnBoardingStepStatusType.IN_PROGRESS && (_jsxs(_Fragment, { children: [_jsx(Typography, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.category.generation.steps", defaultMessage: "ui.onBoardingWidget.step.category.generation.steps", values: {
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                                // @ts-ignore
-                                iconA: (...chunks) => _jsx(CircledLetter, { letter: "a", statement: chunks }),
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                                // @ts-ignore
-                                iconB: (...chunks) => _jsx(CircledLetter, { letter: "b", statement: chunks }),
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                                // @ts-ignore
-                                iconC: (...chunks) => _jsx(CircledLetter, { letter: "c", statement: chunks })
+                                iconA: (chunks) => _jsx(CircledLetter, { letter: "a", statement: chunks }, "ui.onBoardingWidget.step.category.generation.steps.iconA"),
+                                iconB: (chunks) => _jsx(CircledLetter, { letter: "b", statement: chunks }, "ui.onBoardingWidget.step.category.generation.steps.iconB"),
+                                iconC: (chunks) => _jsx(CircledLetter, { letter: "c", statement: chunks }, "ui.onBoardingWidget.step.category.generation.steps.iconC")
                             } }) }), _jsx(CardMedia, { className: classes.image, component: "img", src: CategoryAPlaceholder }), _jsx(CardMedia, { className: classes.image, component: "img", src: CategoryBPlaceholder })] })), _jsx(Box, Object.assign({ component: "span", className: classes.action }, { children: (step === null || step === void 0 ? void 0 : step.status) === SCOnBoardingStepStatusType.COMPLETED ? (_jsx(Alert, Object.assign({ severity: "success" }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.categories.success", defaultMessage: "ui.onBoardingWidget.step.categories.success" }) }))) : (step === null || step === void 0 ? void 0 : step.status) === SCOnBoardingStepStatusType.IN_PROGRESS ? (_jsxs(Box, Object.assign({ className: classes.progress }, { children: [_jsx(Player, { autoplay: true, loop: true, src: animatedProgress, className: classes.animationProgress, controls: false }), _jsx(ProgressBar, { value: progress, hideBar: true, loadingMessage: _jsx(Typography, Object.assign({ variant: "h4" }, { children: getLoadingMessage })) })] }))) : (_jsx(Button, Object.assign({ size: "small", variant: "contained", color: "secondary", onClick: handleCategoriesCreation, endIcon: _jsx(Icon, { children: hover ? 'ai_stars' : 'magic_wand' }), onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false) }, { children: _jsx(FormattedMessage, { defaultMessage: "ui.onBoardingWidget.step.category.button", id: "ui.onBoardingWidget.step.category.button" }) }))) }))] })));
 }

package/lib/esm/components/PaymentOrder/PaymentOrder.js

@@ -73,5 +73,5 @@ export default function PaymentOrder(inProps) {
                                     hour: 'numeric',
                                     minute: 'numeric'
                                 })
-                            } }) })), _jsx(Typography, Object.assign({ variant: "body2", color: "textSecondary" }, { children: _jsx(FormattedMessage, { id: "ui.paymentOrder.price", defaultMessage: "ui.paymentOrder.price", values: { price: getConvertedAmount(scPaymentOrder.payment_price) } }) })), _jsx(Typography, Object.assign({ variant: "body2", color: "textSecondary", component: "span" }, { children: _jsx(FormattedMessage, { id: "ui.paymentOrder.status", defaultMessage: "ui.paymentOrder.status" }) })), _jsx(Chip, { className: classes.status, variant: 'outlined', label: _jsx(FormattedMessage, { id: "ui.paymentOrder.status.paid", defaultMessage: "ui.paymentOrder.status.paid" }), color: "success", size: "small" }), _jsx("br", {}), scPaymentOrder && !hidePaymentOrderPdfButton && (_jsx(PaymentOrderPdfButton, Object.assign({ paymentOrder: scPaymentOrder, label: _jsx(FormattedMessage, { id: "ui.paymentOrder.ticket.view", defaultMessage: "ui.paymentOrder.ticket.view" }) }, PaymentOrderPdfButtonComponentProps)))] }))] })));
+                            } }) })), _jsx(Typography, Object.assign({ variant: "body2", color: "textSecondary" }, { children: _jsx(FormattedMessage, { id: "ui.paymentOrder.price", defaultMessage: "ui.paymentOrder.price", values: { price: getConvertedAmount(scPaymentOrder.payment_price) } }) })), _jsx(Typography, Object.assign({ variant: "body2", color: "textSecondary", component: "span" }, { children: _jsx(FormattedMessage, { id: "ui.paymentOrder.status", defaultMessage: "ui.paymentOrder.status" }) })), _jsx(Chip, { className: classes.status, variant: "outlined", label: _jsx(FormattedMessage, { id: "ui.paymentOrder.status.paid", defaultMessage: "ui.paymentOrder.status.paid" }), color: "success", size: "small" }), _jsx("br", {}), scPaymentOrder && !hidePaymentOrderPdfButton && (_jsx(PaymentOrderPdfButton, Object.assign({ paymentOrder: scPaymentOrder, label: _jsx(FormattedMessage, { id: "ui.paymentOrder.ticket.view", defaultMessage: "ui.paymentOrder.ticket.view" }) }, PaymentOrderPdfButtonComponentProps)))] }))] })));
 }

package/lib/esm/components/PaymentOrders/PaymentOrders.js

@@ -268,5 +268,5 @@ export default function PaymentOrders(inProps) {
                                                         hour: 'numeric',
                                                         minute: 'numeric'
                                                     })
-                                                    : '-' })), _jsx(TableCell, Object.assign({ scope: "row" }, { children: _jsx(Chip, { variant: 'outlined', label: _jsx(FormattedMessage, { id: "ui.paymentOrders.status.paid", defaultMessage: "ui.paymentOrders.status.paid" }), color: "success", size: "small" }) })), _jsx(TableCell, Object.assign({ scope: "row" }, { children: _jsxs(Stack, Object.assign({ direction: "row", justifyContent: "left", alignItems: "center", spacing: 2 }, { children: [order.content_type === SCContentType.EVENT && _jsx(PaymentOrderPdfButton, { paymentOrder: order }), Boolean(!order.paid && order.billing_reason === 'subscription_create') && (_jsx(Button, Object.assign({ size: "small", variant: "contained", disabled: true }, { children: _jsx(FormattedMessage, { id: "ui.paymentOrders.pay", defaultMessage: "ui.paymentOrders.pay" }) })))] })) }))] }, index))), orders.length < 1 && (_jsx(TableRow, { children: _jsx(TableCell, Object.assign({ align: "left", colSpan: 6 }, { children: _jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedMessage, { id: "ui.paymentOrders.noOrders", defaultMessage: "ui.paymentOrders.noOrders" }) })) })) })), hasMore && _jsx(_Fragment, { children: skeleton() })] })] })) }))) : (_jsx(CircularProgress, {})) }))] })));
+                                                    : '-' })), _jsx(TableCell, Object.assign({ scope: "row" }, { children: _jsx(Chip, { variant: "outlined", label: _jsx(FormattedMessage, { id: "ui.paymentOrders.status.paid", defaultMessage: "ui.paymentOrders.status.paid" }), color: "success", size: "small" }) })), _jsx(TableCell, Object.assign({ scope: "row" }, { children: _jsxs(Stack, Object.assign({ direction: "row", justifyContent: "left", alignItems: "center", spacing: 2 }, { children: [order.content_type === SCContentType.EVENT && _jsx(PaymentOrderPdfButton, { paymentOrder: order }), Boolean(!order.paid && order.billing_reason === 'subscription_create') && (_jsx(Button, Object.assign({ size: "small", variant: "contained", disabled: true }, { children: _jsx(FormattedMessage, { id: "ui.paymentOrders.pay", defaultMessage: "ui.paymentOrders.pay" }) })))] })) }))] }, index))), orders.length < 1 && (_jsx(TableRow, { children: _jsx(TableCell, Object.assign({ align: "left", colSpan: 6 }, { children: _jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedMessage, { id: "ui.paymentOrders.noOrders", defaultMessage: "ui.paymentOrders.noOrders" }) })) })) })), hasMore && _jsx(_Fragment, { children: skeleton() })] })] })) }))) : (_jsx(CircularProgress, {})) }))] })));
 }

package/lib/esm/components/PaywallsDialog/PaywallsDialog.js

@@ -36,7 +36,7 @@ export default function PaywallsDialog(inProps) {
         return null;
     }
     return (_jsx(Root, Object.assign({ maxWidth: "sm", fullWidth: true, title: (PaywallsComponentProps && ((_a = PaywallsComponentProps.prefetchedPaymentContentStatus) === null || _a === void 0 ? void 0 : _a.payment_order)) ||
-            (PaywallsComponentProps.content && PaywallsComponentProps.content.payment_order) ? (_jsx(FormattedMessage, { id: "ui.paywallsDialog.title.purchased", defaultMessage: "ui.paywallsDialog.title.purchased" })) : (_jsx(FormattedMessage, { id: "ui.paywallsDialog.title", defaultMessage: "ui.paywallsDialog.title" })), scroll: 'paper', open: true }, (disableInitialTransition ? { TransitionComponent: NoTransition } : { TransitionComponent: Transition }), { className: classNames(classes.root, className), slots: {
+            (PaywallsComponentProps.content && PaywallsComponentProps.content.payment_order) ? (_jsx(FormattedMessage, { id: "ui.paywallsDialog.title.purchased", defaultMessage: "ui.paywallsDialog.title.purchased" })) : (_jsx(FormattedMessage, { id: "ui.paywallsDialog.title", defaultMessage: "ui.paywallsDialog.title" })), scroll: "paper", open: true }, (disableInitialTransition ? { TransitionComponent: NoTransition } : { TransitionComponent: Transition }), { className: classNames(classes.root, className), slots: {
             transition: Transition
         }, DialogContentProps: { dividers: false } }, rest, { children: _jsx(Paywalls, Object.assign({}, PaywallsComponentProps)) })));
 }

package/lib/esm/components/PlatformWidget/PlatformWidget.js

@@ -291,7 +291,7 @@ export default function PlatformWidget(inProps) {
     /**
      * Render tutorial
      */
-    const tutorial = (_jsxs(Grid, Object.assign({ container: true, width: "100%", spacing: isAdmin ? 1 : 3, justifyContent: "center", className: classes.tutorial }, { children: [!isTutorialOpen && (_jsx(Grid, Object.assign({ size: "auto", alignItems: "center", justifyContent: "center" }, { children: _jsx(IconButton, Object.assign({ size: "medium", onClick: handleOpenTutorial }, { children: _jsx(Icon, { children: "info" }) })) }))), _jsx(Collapse, Object.assign({ in: isTutorialOpen, className: classes.tutorialContent }, { children: isTutorialOpen && (_jsxs(Grid, Object.assign({ size: "auto" }, { children: [_jsxs(Typography, Object.assign({ variant: 'body2', className: classes.tutorialTitle, component: 'div' }, { children: [_jsx(Grow, Object.assign({ in: true, timeout: 1000 }, { children: _jsx("span", { children: actions[tutorialIndex].title }) })), _jsx(IconButton, Object.assign({ size: 'small', className: classes.tutorialTitleClose, onClick: handleCloseTutorial }, { children: _jsx(Icon, { children: "close" }) }))] })), _jsx(Grow, Object.assign({ in: true, timeout: 1200 }, { children: _jsx(Typography, Object.assign({ variant: 'body2', className: classes.tutorialDesc }, { children: actions[tutorialIndex].content })) })), _jsx(Divider, { className: classes.divider }), _jsxs(Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2, className: classes.tutorialControls }, { children: [_jsx(Button, Object.assign({ variant: "text", size: "small", onClick: handlePrevious, className: classNames(classes.btnStep, classes.btnPreviousStep) }, { children: tutorialIndex === 0 ? (_jsx(FormattedMessage, { id: "ui.platformWidget.tutorial.skip", defaultMessage: "ui.platformWidget.tutorial.skip" })) : (_jsx(FormattedMessage, { id: "ui.platformWidget.tutorial.previous", defaultMessage: "ui.platformWidget.tutorial.previous" })) })), _jsxs(Typography, Object.assign({ component: 'div' }, { children: [tutorialIndex + 1, "/", actions.length] })), _jsx(Button, Object.assign({ variant: "contained", size: "small", color: "primary", onClick: handleNext, className: classNames(classes.btnStep, classes.btnNextStep) }, { children: tutorialIndex === actions.length - 1 ? (_jsx(FormattedMessage, { id: "ui.platformWidget.tutorial.close", defaultMessage: "ui.platformWidget.tutorial.close" })) : (_jsx(FormattedMessage, { id: "ui.platformWidget.tutorial.next", defaultMessage: "ui.platformWidget.tutorial.next" })) }))] }))] }))) }))] })));
+    const tutorial = (_jsxs(Grid, Object.assign({ container: true, width: "100%", spacing: isAdmin ? 1 : 3, justifyContent: "center", className: classes.tutorial }, { children: [!isTutorialOpen && (_jsx(Grid, Object.assign({ size: "auto", alignItems: "center", justifyContent: "center" }, { children: _jsx(IconButton, Object.assign({ size: "medium", onClick: handleOpenTutorial }, { children: _jsx(Icon, { children: "info" }) })) }))), _jsx(Collapse, Object.assign({ in: isTutorialOpen, className: classes.tutorialContent }, { children: isTutorialOpen && (_jsxs(Grid, Object.assign({ size: "auto" }, { children: [_jsxs(Typography, Object.assign({ variant: "body2", className: classes.tutorialTitle, component: "div" }, { children: [_jsx(Grow, Object.assign({ in: true, timeout: 1000 }, { children: _jsx("span", { children: actions[tutorialIndex].title }) })), _jsx(IconButton, Object.assign({ size: "small", className: classes.tutorialTitleClose, onClick: handleCloseTutorial }, { children: _jsx(Icon, { children: "close" }) }))] })), _jsx(Grow, Object.assign({ in: true, timeout: 1200 }, { children: _jsx(Typography, Object.assign({ variant: "body2", className: classes.tutorialDesc }, { children: actions[tutorialIndex].content })) })), _jsx(Divider, { className: classes.divider }), _jsxs(Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2, className: classes.tutorialControls }, { children: [_jsx(Button, Object.assign({ variant: "text", size: "small", onClick: handlePrevious, className: classNames(classes.btnStep, classes.btnPreviousStep) }, { children: tutorialIndex === 0 ? (_jsx(FormattedMessage, { id: "ui.platformWidget.tutorial.skip", defaultMessage: "ui.platformWidget.tutorial.skip" })) : (_jsx(FormattedMessage, { id: "ui.platformWidget.tutorial.previous", defaultMessage: "ui.platformWidget.tutorial.previous" })) })), _jsxs(Typography, Object.assign({ component: "div" }, { children: [tutorialIndex + 1, "/", actions.length] })), _jsx(Button, Object.assign({ variant: "contained", size: "small", color: "primary", onClick: handleNext, className: classNames(classes.btnStep, classes.btnNextStep) }, { children: tutorialIndex === actions.length - 1 ? (_jsx(FormattedMessage, { id: "ui.platformWidget.tutorial.close", defaultMessage: "ui.platformWidget.tutorial.close" })) : (_jsx(FormattedMessage, { id: "ui.platformWidget.tutorial.next", defaultMessage: "ui.platformWidget.tutorial.next" })) }))] }))] }))) }))] })));
     /**
      * Renders platform card
      */

package/lib/esm/components/PrivateMessageEditor/MessageMediaUploader/index.js

@@ -106,7 +106,7 @@ export default function MessageMediaUploader(props) {
                         url: `${scContext.settings.portal}${Endpoints.PrivateMessageUploadMediaInChunks.url()}`,
                         headers: { Authorization: `Bearer ${scContext.settings.session.authToken.accessToken}` },
                         method: Endpoints.PrivateMessageUploadMediaInChunks.method
-                    }, chunkSize: 204800, multiple: true, chunked: true, maxConcurrent: 2, fileFilter: filterBySizeAndType }, { children: [_jsx(MessageChunkUploader, { onSuccess: handleSuccess, onProgress: handleProgress, onError: handleError }), !files.length && Object.keys(uploading).length === 0 && Object.keys(errors).length === 0 && (_jsxs(UploadDropZone, Object.assign({ className: classes.uploadSection }, { children: [_jsx(UploadButton, { inputFieldName: "file", className: classes.uploadButton }), _jsx(Typography, Object.assign({ textAlign: 'center', fontWeight: 'medium' }, { children: _jsx(FormattedMessage, { id: "ui.privateMessage.editor.media.uploader.msg", defaultMessage: "ui.privateMessage.editor.media.uploader.msg" }) }))] }))), _jsxs(List, Object.assign({ className: classes.previewContent }, { children: [previews.length !== 0 &&
+                    }, chunkSize: 204800, multiple: true, chunked: true, maxConcurrent: 2, fileFilter: filterBySizeAndType }, { children: [_jsx(MessageChunkUploader, { onSuccess: handleSuccess, onProgress: handleProgress, onError: handleError }), !files.length && Object.keys(uploading).length === 0 && Object.keys(errors).length === 0 && (_jsxs(UploadDropZone, Object.assign({ className: classes.uploadSection }, { children: [_jsx(UploadButton, { inputFieldName: "file", className: classes.uploadButton }), _jsx(Typography, Object.assign({ textAlign: "center", fontWeight: "medium" }, { children: _jsx(FormattedMessage, { id: "ui.privateMessage.editor.media.uploader.msg", defaultMessage: "ui.privateMessage.editor.media.uploader.msg" }) }))] }))), _jsxs(List, Object.assign({ className: classes.previewContent }, { children: [previews.length !== 0 &&
                                     previews.map((item, index) => {
                                         var _a;
                                         return (_jsx(React.Fragment, { children: 'file' in item && (_jsxs(ListItem, Object.assign({ className: classes.previewItem }, getMouseEvents(() => handleMouseEnter(item.file_uuid), () => handleMouseLeave(item.file_uuid)), { children: ['video_url' in item ? (_jsx("video", { src: item.video_url })) : (_jsx("img", { src: item.file.type.startsWith(SCMessageFileType.PDF) && !item.file_url
@@ -114,6 +114,6 @@ export default function MessageMediaUploader(props) {
                                                             : !item.file_url
                                                                 ? documentPlaceholder
                                                                 : item.file_url })), _jsx(ImageListItemBar, { className: classNames(classes.previewActions, { [classes.progress]: item.completed }), title: typeof item.completed !== 'undefined' &&
-                                                            item.completed !== 0 && _jsx(Typography, Object.assign({ textAlign: "center" }, { children: `${Math.round(item.completed)}%` })), actionIcon: _jsx(_Fragment, { children: isHovered[item.file_uuid] && Object.keys(uploading).length === 0 && (_jsx(IconButton, Object.assign({ onClick: () => handleClear(item.file_uuid), size: "small" }, { children: _jsx(Icon, { children: "delete" }) }))) }) }), isHovered[item.file_uuid] && (_jsxs(Box, Object.assign({ component: 'span', className: classes.previewInfo }, { children: [_jsx(Typography, Object.assign({ noWrap: true, textAlign: 'center' }, { children: item.file.name })), _jsx(Typography, Object.assign({ textAlign: 'center', fontWeight: 'light' }, { children: bytesToSize(item.file.size) }))] })))] }), (_a = item.id) !== null && _a !== void 0 ? _a : item.file_uuid)) }, index));
+                                                            item.completed !== 0 && _jsx(Typography, Object.assign({ textAlign: "center" }, { children: `${Math.round(item.completed)}%` })), actionIcon: _jsx(_Fragment, { children: isHovered[item.file_uuid] && Object.keys(uploading).length === 0 && (_jsx(IconButton, Object.assign({ onClick: () => handleClear(item.file_uuid), size: "small" }, { children: _jsx(Icon, { children: "delete" }) }))) }) }), isHovered[item.file_uuid] && (_jsxs(Box, Object.assign({ component: "span", className: classes.previewInfo }, { children: [_jsx(Typography, Object.assign({ noWrap: true, textAlign: "center" }, { children: item.file.name })), _jsx(Typography, Object.assign({ textAlign: "center", fontWeight: "light" }, { children: bytesToSize(item.file.size) }))] })))] }), (_a = item.id) !== null && _a !== void 0 ? _a : item.file_uuid)) }, index));
                                     }), previews.length !== 0 && action] }))] })) })] })));
 }

package/lib/esm/components/PrivateMessageSnippets/Skeleton.js

@@ -36,5 +36,5 @@ const Root = styled(Card, {
  *
  */
 export default function PrivateMessageSnippetsSkeleton(props) {
-    return (_jsx(Root, Object.assign({ className: classes.root }, props, { children: _jsxs(CardContent, { children: [_jsxs(Stack, Object.assign({ direction: "column", justifyContent: "center", spacing: 1, alignItems: "center" }, { children: [_jsx(Button, Object.assign({ variant: "outlined", size: "medium", disabled: true, className: classes.button }, { children: _jsx(Skeleton, { height: 20, width: 100, variant: 'rectangular' }) })), _jsx(Skeleton, { height: 25, width: '100%', variant: 'rounded', className: classes.searchBar })] })), _jsx(List, Object.assign({ className: classes.list }, { children: [...Array(6)].map((category, index) => (_jsx(PrivateMessageSnippetItemSkeleton, { elevation: 0 }, index))) }))] }) })));
+    return (_jsx(Root, Object.assign({ className: classes.root }, props, { children: _jsxs(CardContent, { children: [_jsxs(Stack, Object.assign({ direction: "column", justifyContent: "center", spacing: 1, alignItems: "center" }, { children: [_jsx(Button, Object.assign({ variant: "outlined", size: "medium", disabled: true, className: classes.button }, { children: _jsx(Skeleton, { height: 20, width: 100, variant: "rectangular" }) })), _jsx(Skeleton, { height: 25, width: "100%", variant: "rounded", className: classes.searchBar })] })), _jsx(List, Object.assign({ className: classes.list }, { children: [...Array(6)].map((category, index) => (_jsx(PrivateMessageSnippetItemSkeleton, { elevation: 0 }, index))) }))] }) })));
 }

package/lib/esm/components/PrivateMessageThread/PrivateMessageThread.js

@@ -458,7 +458,7 @@ export default function PrivateMessageThread(inProps) {
         if (loadingMessageObjs) {
             return _jsx(PrivateMessageThreadSkeleton, {});
         }
-        return (_jsxs(CardContent, { children: [_jsx(InfiniteScroll, Object.assign({ height: '100%', dataLength: messageObjs.length, previous: handlePrevious, inverse: true, hasMorePrevious: Boolean(previous), loaderPrevious: _jsx(PrivateMessageThreadItemSkeleton, {}) }, { children: _jsx(List, Object.assign({ ref: messagesEndRef }, { children: Object.keys(formattedMessages).map((key) => (_jsx("li", Object.assign({ className: classes.section }, { children: _jsxs("ul", { children: [_jsx(ListSubheader, { children: _jsx(Typography, Object.assign({ align: "center", className: classes.subHeader }, { children: key })) }), formattedMessages[key].map((msg) => {
+        return (_jsxs(CardContent, { children: [_jsx(InfiniteScroll, Object.assign({ height: "100%", dataLength: messageObjs.length, previous: handlePrevious, inverse: true, hasMorePrevious: Boolean(previous), loaderPrevious: _jsx(PrivateMessageThreadItemSkeleton, {}) }, { children: _jsx(List, Object.assign({ ref: messagesEndRef }, { children: Object.keys(formattedMessages).map((key) => (_jsx("li", Object.assign({ className: classes.section }, { children: _jsxs("ul", { children: [_jsx(ListSubheader, { children: _jsx(Typography, Object.assign({ align: "center", className: classes.subHeader }, { children: key })) }), formattedMessages[key].map((msg) => {
                                         var _a;
                                         return (_jsxs(Box, Object.assign({ className: classes.item }, { children: [msg.group && ((_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.username) !== msg.sender.username && (_jsx(ListItemAvatar, { children: _jsx(Avatar, { alt: msg.sender.username, src: msg.sender.avatar, className: classes.avatar }) })), _jsx(PrivateMessageThreadItem, { className: authUserId === msg.sender.id ? classes.sender : classes.receiver, message: msg, mouseEvents: {
                                                         onMouseEnter: () => handleMouseEnter(msg.id),

package/lib/esm/components/PrivateMessageThread/Skeleton.js

@@ -35,5 +35,5 @@ const Root = styled(Card, {
 export default function PrivateMessageThreadSkeleton(props) {
     const theme = useTheme();
     const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
-    return (_jsx(Root, Object.assign({ className: classes.root }, props, { children: _jsxs(CardContent, { children: [_jsxs(List, Object.assign({ className: classes.list }, { children: [_jsx(ListSubheader, Object.assign({ sx: { display: 'flex', justifyContent: 'center' } }, { children: _jsx(Skeleton, { animation: "wave", height: 30, width: 120, style: { borderRadius: 20 } }) })), [...Array(isMobile ? 6 : 8)].map((item, index) => (_jsx(PrivateMessageThreadItemSkeleton, { index: index }, index)))] })), _jsx(Box, Object.assign({ className: classes.editor }, { children: _jsx(Skeleton, { animation: "wave", height: 55, width: '100%', variant: 'rectangular' }) }))] }) })));
+    return (_jsx(Root, Object.assign({ className: classes.root }, props, { children: _jsxs(CardContent, { children: [_jsxs(List, Object.assign({ className: classes.list }, { children: [_jsx(ListSubheader, Object.assign({ sx: { display: 'flex', justifyContent: 'center' } }, { children: _jsx(Skeleton, { animation: "wave", height: 30, width: 120, style: { borderRadius: 20 } }) })), [...Array(isMobile ? 6 : 8)].map((item, index) => (_jsx(PrivateMessageThreadItemSkeleton, { index: index }, index)))] })), _jsx(Box, Object.assign({ className: classes.editor }, { children: _jsx(Skeleton, { animation: "wave", height: 55, width: "100%", variant: "rectangular" }) }))] }) })));
 }

package/lib/esm/components/SnippetNotifications/SnippetNotifications.js

@@ -154,10 +154,10 @@ export default function SnippetNotifications(inProps) {
     }, [scUserContext.user, initialized]);
     /**
      * Notification subscriber
-     * @param msg
+     * @param _msg
      * @param data
      */
-    const notificationSubscriber = (msg, data) => {
+    const notificationSubscriber = (_msg, data) => {
         /**
          * Ignore notifications of type: notification_banner
          * (data.data.activity_type === SCNotificationTypologyType.NOTIFICATION_BANNER)
@@ -288,9 +288,9 @@ export default function SnippetNotifications(inProps) {
     /**
      * Renders root object
      */
-    return (_jsx(Root, Object.assign({ id: id, className: classNames(classes.root, className) }, rest, { children: _jsx(Box, Object.assign({ className: classes.notificationsWrap }, { children: !initialized || loading ? (_jsx(Skeleton, { elevation: 0 })) : (_jsx(ScrollContainer, Object.assign({}, ScrollContainerProps, { children: _jsxs(MenuList, Object.assign({ className: classes.list, disabledItemsFocusable: true, disableListWrap: true }, { children: [scUserContext.user.unseen_notification_banners_counter ? (_jsx(MenuItem, Object.assign({ className: classNames(classes.item, classes.broadcastMessagesBanner), component: Link, to: scRoutingContext.url(SCRoutes.USER_NOTIFICATIONS_ROUTE_NAME, {}) }, { children: _jsx(NotificationItem, { template: SCNotificationObjectTemplateType.SNIPPET, isNew: true, disableTypography: true, image: _jsx(Avatar, { alt: preferences[SCPreferences.TEXT_APPLICATION_NAME], src: preferences[SCPreferences.LOGO_NAVBAR_LOGO_MOBILE] }), primary: _jsx(Typography, Object.assign({ component: 'div' }, { children: intl.formatMessage({ id: 'ui.snippetNotifications.broadcastMessages', defaultMessage: 'ui.snippetNotifications.broadcastMessages' }, {
+    return (_jsx(Root, Object.assign({ id: id, className: classNames(classes.root, className) }, rest, { children: _jsx(Box, Object.assign({ className: classes.notificationsWrap }, { children: !initialized || loading ? (_jsx(Skeleton, { elevation: 0 })) : (_jsx(ScrollContainer, Object.assign({}, ScrollContainerProps, { children: _jsxs(MenuList, Object.assign({ className: classes.list, disabledItemsFocusable: true, disableListWrap: true }, { children: [scUserContext.user.unseen_notification_banners_counter ? (_jsx(MenuItem, Object.assign({ className: classNames(classes.item, classes.broadcastMessagesBanner), component: Link, to: scRoutingContext.url(SCRoutes.USER_NOTIFICATIONS_ROUTE_NAME, {}) }, { children: _jsx(NotificationItem, { template: SCNotificationObjectTemplateType.SNIPPET, isNew: true, disableTypography: true, image: _jsx(Avatar, { alt: preferences[SCPreferences.TEXT_APPLICATION_NAME], src: preferences[SCPreferences.LOGO_NAVBAR_LOGO_MOBILE] }), primary: _jsx(Typography, Object.assign({ component: "div" }, { children: intl.formatMessage({ id: 'ui.snippetNotifications.broadcastMessages', defaultMessage: 'ui.snippetNotifications.broadcastMessages' }, {
                                         count: scUserContext.user.unseen_notification_banners_counter,
-                                        b: (...chunks) => _jsx("strong", { children: chunks }),
-                                        link: (...chunks) => _jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.USER_NOTIFICATIONS_ROUTE_NAME, {}) }, { children: chunks }))
+                                        b: (chunks) => _jsx("strong", { children: chunks }, "ui.snippetNotifications.broadcastMessages.b"),
+                                        link: (chunks) => (_jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.USER_NOTIFICATIONS_ROUTE_NAME, {}) }, { children: chunks }), "ui.snippetNotifications.broadcastMessages.link"))
                                     }) })) }) }), "banner")) : null, notifications.length === 0 ? (_jsx(MenuItem, Object.assign({ className: classes.emptyBoxNotifications }, { children: _jsx(FormattedMessage, { id: "ui.snippetNotifications.noNotifications", defaultMessage: "ui.snippetNotifications.noNotifications" }) }))) : (notifications.slice(0, showMax).map((notificationObject, i) => notificationObject.aggregated.map((n, k) => (_jsx(MenuItem, Object.assign({ className: classes.item, onClick: (e) => handleSingleNotificationClick(e, n), disableRipple: true, disableTouchRipple: true }, { children: renderAggregatedItem(n, i) }), k)))))] })) }))) })) })));
 }

package/lib/esm/components/UserAddPaymentMethodForm/UserAddPaymentMethodForm.js

@@ -1,4 +1,4 @@
-import { __awaiter, __rest } from "tslib";
+import { __awaiter } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { useState } from 'react';
 import { useSCPaymentsEnabled, useSCUser } from '@selfcommunity/react-core';
@@ -53,7 +53,7 @@ export default function UserAddPaymentMethodForm(inProps) {
         props: inProps,
         name: PREFIX
     });
-    const { className = null, customer, collectBillingAddress = false, handleSuccess, handleClose } = props, rest = __rest(props, ["className", "customer", "collectBillingAddress", "handleSuccess", "handleClose"]);
+    const { className = null, customer, collectBillingAddress = false, handleSuccess, handleClose } = props;
     // CONTEXT
     const scUserContext = useSCUser();
     // STATE
@@ -129,10 +129,10 @@ export default function UserAddPaymentMethodForm(inProps) {
     if (!isPaymentsEnabled || !scUserContext.user) {
         return null;
     }
-    return (_jsx(Root, Object.assign({ className: classes.root }, { children: _jsxs("form", Object.assign({ onSubmit: handleSubmit }, { children: [_jsx(PaymentElement, { id: "payment-element", options: paymentElementOptions, onReady: () => setReady(true) }), collectBillingAddress && (_jsx(Paper, Object.assign({ variant: "outlined", className: classes.address }, { children: Object.keys(addressState).length && !isEditingBillingAddress ? (_jsxs(_Fragment, { children: [_jsx(Typography, Object.assign({ variant: 'body1' }, { children: addressState.name })), _jsxs(Typography, Object.assign({ variant: 'body1' }, { children: [addressState.address.line1, _jsx("br", {}), addressState.address.line2] })), _jsxs(Typography, Object.assign({ variant: 'body1' }, { children: [addressState.address.postal_code, " - ", addressState.address.city, " - ", addressState.address.country] })), _jsx(Button, Object.assign({ sx: { mt: 1 }, variant: 'contained', disabled: !elements, onClick: () => setIsEditingBillingAddress(!isEditingBillingAddress) }, { children: "Change" }))] })) : (_jsxs(_Fragment, { children: [_jsx(AddressElement, { onChange: (event) => {
+    return (_jsx(Root, Object.assign({ className: classes.root }, { children: _jsxs("form", Object.assign({ onSubmit: handleSubmit }, { children: [_jsx(PaymentElement, { id: "payment-element", options: paymentElementOptions, onReady: () => setReady(true) }), collectBillingAddress && (_jsx(Paper, Object.assign({ variant: "outlined", className: classes.address }, { children: Object.keys(addressState).length && !isEditingBillingAddress ? (_jsxs(_Fragment, { children: [_jsx(Typography, Object.assign({ variant: "body1" }, { children: addressState.name })), _jsxs(Typography, Object.assign({ variant: "body1" }, { children: [addressState.address.line1, _jsx("br", {}), addressState.address.line2] })), _jsxs(Typography, Object.assign({ variant: "body1" }, { children: [addressState.address.postal_code, " - ", addressState.address.city, " - ", addressState.address.country] })), _jsx(Button, Object.assign({ sx: { mt: 1 }, variant: "contained", disabled: !elements, onClick: () => setIsEditingBillingAddress(!isEditingBillingAddress) }, { children: "Change" }))] })) : (_jsxs(_Fragment, { children: [_jsx(AddressElement, { onChange: (event) => {
                                     setAddressState(event.value);
                                 }, options: {
                                     mode: 'billing',
                                     defaultValues: addressState
-                                } }), _jsx(Button, Object.assign({ sx: { mt: 1 }, variant: 'contained', disabled: !elements || loading || !ready, onClick: () => setIsEditingBillingAddress(!isEditingBillingAddress) }, { children: _jsx(FormattedMessage, { id: 'ui.userAddPaymentMethodForm.useDefaultMethod', defaultMessage: 'ui.userAddPaymentMethodForm.useDefaultMethod' }) }))] })) }))), _jsxs(Stack, Object.assign({ direction: "row", justifyContent: "flex-end", alignItems: "center", spacing: 2, mt: 3 }, { children: [_jsx(Button, Object.assign({ onClick: onHandleClose, variant: "outlined" }, { children: _jsx(FormattedMessage, { id: "ui.userAddPaymentMethodForm.cancelButton", defaultMessage: "ui.userAddPaymentMethodForm.cancelButton" }) })), _jsx(Button, Object.assign({ disabled: !ready, loading: loading, type: "submit", variant: "contained" }, { children: _jsx(FormattedMessage, { id: "ui.userAddPaymentMethodForm.addButton", defaultMessage: "ui.userAddPaymentMethodForm.addButton" }) }))] })), errorMessage && _jsx("div", { children: errorMessage })] })) })));
+                                } }), _jsx(Button, Object.assign({ sx: { mt: 1 }, variant: "contained", disabled: !elements || loading || !ready, onClick: () => setIsEditingBillingAddress(!isEditingBillingAddress) }, { children: _jsx(FormattedMessage, { id: "ui.userAddPaymentMethodForm.useDefaultMethod", defaultMessage: "ui.userAddPaymentMethodForm.useDefaultMethod" }) }))] })) }))), _jsxs(Stack, Object.assign({ direction: "row", justifyContent: "flex-end", alignItems: "center", spacing: 2, mt: 3 }, { children: [_jsx(Button, Object.assign({ onClick: onHandleClose, variant: "outlined" }, { children: _jsx(FormattedMessage, { id: "ui.userAddPaymentMethodForm.cancelButton", defaultMessage: "ui.userAddPaymentMethodForm.cancelButton" }) })), _jsx(Button, Object.assign({ disabled: !ready, loading: loading, type: "submit", variant: "contained" }, { children: _jsx(FormattedMessage, { id: "ui.userAddPaymentMethodForm.addButton", defaultMessage: "ui.userAddPaymentMethodForm.addButton" }) }))] })), errorMessage && _jsx("div", { children: errorMessage })] })) })));
 }

package/lib/esm/components/UserAutocomplete/UserAutocomplete.js

@@ -109,7 +109,7 @@ const UserAutocomplete = (inProps) => {
                 }, renderInput: (params) => (_jsx(TextField, Object.assign({}, params, TextFieldProps, { margin: "dense", slotProps: {
                         input: Object.assign(Object.assign({}, params.InputProps), { autoComplete: 'off', endAdornment: filteredUsers.length > 0 ? (_jsxs(_Fragment, { children: [isLoading && _jsx(CircularProgress, { color: "inherit", size: 20 }), params.InputProps.endAdornment] })) : null })
                     } }))) }, rest)), _jsx(Typography, Object.assign({ variant: "body2", color: "primary", className: classes.info }, { children: _jsx(FormattedMessage, { id: "ui.userAutocomplete.textarea.info", defaultMessage: "ui.userAutocomplete.textarea.info", values: {
-                        icon: (...chunks) => _jsx(Icon, { children: chunks })
+                        icon: (chunks) => _jsx(Icon, { children: chunks }, "ui.userAutocomplete.textarea.info.icon")
                     } }) })), _jsx(TextField, { label: _jsx(FormattedMessage, { id: "ui.userAutocomplete.textarea.label", defaultMessage: "ui.userAutocomplete.textarea.label" }), multiline: true, minRows: 4, fullWidth: true, margin: "normal", value: textAreaValue, onChange: handleTextAreaChange })] })));
 };
 export default UserAutocomplete;

package/lib/esm/components/UserBillingInfo/UserBillingInfo.js

@@ -443,7 +443,7 @@ const UserBillingInfo = (inProps, ref) => {
     if (!isPaymentsEnabled || !scUserContext.user) {
         return null;
     }
-    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className), id: id }, rest, { ref: componentRef }, { children: _jsx(Fragment, { children: state.isLoading ? (_jsx(UserBillingInfoSkeleton, { mode: mode })) : (_jsx(Fragment, { children: state.mode === UserBillingInfoMode.READ ? (_jsxs(_Fragment, { children: [state.name ? (_jsxs(_Fragment, { children: [_jsx(Typography, Object.assign({ variant: 'body1' }, { children: state.name })), _jsxs(Typography, Object.assign({ variant: 'body1' }, { children: [state.address_line1, _jsx("br", {}), state.address_line2] })), _jsxs(Typography, Object.assign({ variant: 'body1' }, { children: [state.address_postal_code, " - ", state.address_city, " - ", state.address_country && state.address_country.label] })), Boolean(state.tax_code && !state.isBusiness) && _jsx(Typography, Object.assign({ variant: 'body1' }, { children: state.tax_code })), state.isBusiness && (_jsxs(_Fragment, { children: [state.tax_id_data && _jsxs(Typography, Object.assign({ variant: 'body1' }, { children: ["VAT: ", state.tax_id_data.value] })), state.sdi && _jsxs(Typography, Object.assign({ variant: 'body1' }, { children: ["SDI: ", state.sdi] })), state.pec && _jsxs(Typography, Object.assign({ variant: 'body1' }, { children: ["PEC: ", state.pec] }))] }))] })) : (_jsx(Typography, Object.assign({ variant: 'body1' }, { children: _jsx(FormattedMessage, { id: "ui.userBillingInfo.noInfo", defaultMessage: "ui.userBillingInfo.noInfo" }) }))), state.initialDataCompleted && (_jsx(Button, Object.assign({ sx: { mt: 1 }, variant: 'contained', size: 'small', disabled: Boolean(disableButtons), onClick: handleChangeViewMode }, { children: _jsx(FormattedMessage, { id: "component.CheckoutForm.billingInfoChangeButton", defaultMessage: "component.CheckoutForm.billingInfoChangeButton" }) })))] })) : (_jsx(Box, { children: _jsxs(Grid, Object.assign({ container: true, width: "100%", spacing: 3 }, { children: [_jsx(Grid, Object.assign({ size: { xs: 12, sm: inlineDisplay ? 12 : 6 } }, { children: _jsx(TextField, { variant: "outlined", id: "name", name: "name", label: _jsx(FormattedMessage, { id: "ui.userBillingInfo.name", defaultMessage: "ui.userBillingInfo.name" }), onChange: handleChange('name'), value: state.name, error: Boolean(state.nameError), helperText: state.nameError, fullWidth: true }) })), _jsx(Grid, Object.assign({ size: { xs: 12, sm: inlineDisplay ? 12 : 6 } }, { children: _jsx(TextField, { variant: "outlined", id: "address_line1", name: "address_line1", label: _jsx(FormattedMessage, { id: "ui.userBillingInfo.address1", defaultMessage: "ui.userBillingInfo.address1" }), onChange: handleChange('address_line1'), value: state.address_line1, error: Boolean(state.addressLine1Error), helperText: state.addressLine1Error, fullWidth: true }) })), _jsx(Grid, Object.assign({ size: { xs: 12, sm: inlineDisplay ? 12 : 6 } }, { children: _jsx(TextField, { variant: "outlined", id: "address_line2", name: "address_line2", label: _jsx(FormattedMessage, { id: "ui.userBillingInfo.address2", defaultMessage: "ui.userBillingInfo.address2" }), onChange: handleChange('address_line2'), value: state.address_line2, error: Boolean(state.addressLine2Error), helperText: state.addressLine2Error, fullWidth: true }) })), _jsx(Grid, Object.assign({ size: { xs: 12, sm: inlineDisplay ? 12 : 6 } }, { children: _jsx(Autocomplete, { id: "country-select-demo", options: countries, value: state.address_country, fullWidth: true, onChange: handleChange('address_country'), getOptionLabel: (option) => option.label, renderOption: (props, option) => {
+    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className), id: id }, rest, { ref: componentRef }, { children: _jsx(Fragment, { children: state.isLoading ? (_jsx(UserBillingInfoSkeleton, { mode: mode })) : (_jsx(Fragment, { children: state.mode === UserBillingInfoMode.READ ? (_jsxs(_Fragment, { children: [state.name ? (_jsxs(_Fragment, { children: [_jsx(Typography, Object.assign({ variant: "body1" }, { children: state.name })), _jsxs(Typography, Object.assign({ variant: "body1" }, { children: [state.address_line1, _jsx("br", {}), state.address_line2] })), _jsxs(Typography, Object.assign({ variant: "body1" }, { children: [state.address_postal_code, " - ", state.address_city, " - ", state.address_country && state.address_country.label] })), Boolean(state.tax_code && !state.isBusiness) && _jsx(Typography, Object.assign({ variant: "body1" }, { children: state.tax_code })), state.isBusiness && (_jsxs(_Fragment, { children: [state.tax_id_data && _jsxs(Typography, Object.assign({ variant: "body1" }, { children: ["VAT: ", state.tax_id_data.value] })), state.sdi && _jsxs(Typography, Object.assign({ variant: "body1" }, { children: ["SDI: ", state.sdi] })), state.pec && _jsxs(Typography, Object.assign({ variant: "body1" }, { children: ["PEC: ", state.pec] }))] }))] })) : (_jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.userBillingInfo.noInfo", defaultMessage: "ui.userBillingInfo.noInfo" }) }))), state.initialDataCompleted && (_jsx(Button, Object.assign({ sx: { mt: 1 }, variant: "contained", size: "small", disabled: Boolean(disableButtons), onClick: handleChangeViewMode }, { children: _jsx(FormattedMessage, { id: "component.CheckoutForm.billingInfoChangeButton", defaultMessage: "component.CheckoutForm.billingInfoChangeButton" }) })))] })) : (_jsx(Box, { children: _jsxs(Grid, Object.assign({ container: true, width: "100%", spacing: 3 }, { children: [_jsx(Grid, Object.assign({ size: { xs: 12, sm: inlineDisplay ? 12 : 6 } }, { children: _jsx(TextField, { variant: "outlined", id: "name", name: "name", label: _jsx(FormattedMessage, { id: "ui.userBillingInfo.name", defaultMessage: "ui.userBillingInfo.name" }), onChange: handleChange('name'), value: state.name, error: Boolean(state.nameError), helperText: state.nameError, fullWidth: true }) })), _jsx(Grid, Object.assign({ size: { xs: 12, sm: inlineDisplay ? 12 : 6 } }, { children: _jsx(TextField, { variant: "outlined", id: "address_line1", name: "address_line1", label: _jsx(FormattedMessage, { id: "ui.userBillingInfo.address1", defaultMessage: "ui.userBillingInfo.address1" }), onChange: handleChange('address_line1'), value: state.address_line1, error: Boolean(state.addressLine1Error), helperText: state.addressLine1Error, fullWidth: true }) })), _jsx(Grid, Object.assign({ size: { xs: 12, sm: inlineDisplay ? 12 : 6 } }, { children: _jsx(TextField, { variant: "outlined", id: "address_line2", name: "address_line2", label: _jsx(FormattedMessage, { id: "ui.userBillingInfo.address2", defaultMessage: "ui.userBillingInfo.address2" }), onChange: handleChange('address_line2'), value: state.address_line2, error: Boolean(state.addressLine2Error), helperText: state.addressLine2Error, fullWidth: true }) })), _jsx(Grid, Object.assign({ size: { xs: 12, sm: inlineDisplay ? 12 : 6 } }, { children: _jsx(Autocomplete, { id: "country-select-demo", options: countries, value: state.address_country, fullWidth: true, onChange: handleChange('address_country'), getOptionLabel: (option) => option.label, renderOption: (props, option) => {
                                         const { key } = props, rest = __rest(props, ["key"]);
                                         return (_jsxs(Box, Object.assign({ component: "li", sx: { '& > img': { mr: 2, flexShrink: 0 } } }, rest, { children: [_jsx("img", { loading: "lazy", width: "20", srcSet: `https://flagcdn.com/w40/${option.code.toLowerCase()}.png 2x`, src: `https://flagcdn.com/w20/${option.code.toLowerCase()}.png`, alt: "" }), option.label, " (", option.code, ")"] }), key));
                                     }, renderInput: (params) => (_jsx(TextField, Object.assign({}, params, { label: _jsx(FormattedMessage, { id: "ui.userBillingInfo.country", defaultMessage: "ui.userBillingInfo.country" }), fullWidth: true, id: "address_country", name: "address_country", error: Boolean(state.addressCountryError), slotProps: {