@selfcommunity/react-ui 0.11.0-alpha.8 → 0.11.0-alpha.81

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

@@ -2,9 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const styles_1 = require("@mui/material/styles");
 const material_1 = require("@mui/material");
-const Box_1 = tslib_1.__importDefault(require("@mui/material/Box"));
 const system_1 = require("@mui/system");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const react_1 = require("react");
@@ -28,7 +26,7 @@ const classes = {
     animationProgress: `${constants_1.PREFIX}-category-animation-progress`
 };
 function CircledLetter({ letter, statement }) {
-    return ((0, jsx_runtime_1.jsxs)(Box_1.default, Object.assign({ component: "span", sx: { display: 'flex', alignItems: 'center', gap: 1, mb: 1.5 } }, { children: [(0, jsx_runtime_1.jsx)(Box_1.default, Object.assign({ component: "span", sx: {
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ component: "span", sx: { display: 'flex', alignItems: 'center', gap: 1, mb: 1.5 } }, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ component: "span", sx: {
                     width: 22,
                     height: 22,
                     borderRadius: '50%',
@@ -42,7 +40,7 @@ function CircledLetter({ letter, statement }) {
                         fontWeight: 'bold'
                     } }, { children: letter })) })), statement] })));
 }
-const Root = (0, styles_1.styled)(Box_1.default, {
+const Root = (0, material_1.styled)(material_1.Box, {
     name: constants_1.PREFIX,
     slot: 'CategoryRoot'
 })(() => ({}));
@@ -101,6 +99,6 @@ function Category(inProps) {
                                 // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
                                 // @ts-ignore
                                 iconC: (...chunks) => (0, jsx_runtime_1.jsx)(CircledLetter, { letter: "c", statement: chunks })
-                            } }) }), (0, jsx_runtime_1.jsx)(material_1.CardMedia, { className: classes.image, component: "img", src: categoryA_1.default }), (0, jsx_runtime_1.jsx)(material_1.CardMedia, { className: classes.image, component: "img", src: categoryB_1.default })] })), (0, jsx_runtime_1.jsx)(Box_1.default, Object.assign({ component: "span", className: classes.action }, { children: (step === null || step === void 0 ? void 0 : step.status) === types_1.SCOnBoardingStepStatusType.COMPLETED ? ((0, jsx_runtime_1.jsx)(material_1.Alert, Object.assign({ severity: "success" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.categories.success", defaultMessage: "ui.onBoardingWidget.step.categories.success" }) }))) : (step === null || step === void 0 ? void 0 : step.status) === types_1.SCOnBoardingStepStatusType.IN_PROGRESS ? ((0, jsx_runtime_1.jsxs)(Box_1.default, Object.assign({ className: classes.progress }, { children: [(0, jsx_runtime_1.jsx)(react_lottie_player_1.Player, { autoplay: true, loop: true, src: category_progress_json_1.default, className: classes.animationProgress, controls: false }), (0, jsx_runtime_1.jsx)(ProgressBar_1.default, { value: progress, hideBar: true, loadingMessage: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h4" }, { children: getLoadingMessage })) })] }))) : ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: "contained", color: "secondary", onClick: handleCategoriesCreation, endIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: hover ? 'ai_stars' : 'magic_wand' }), onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.onBoardingWidget.step.category.button", id: "ui.onBoardingWidget.step.category.button" }) }))) }))] })));
+                            } }) }), (0, jsx_runtime_1.jsx)(material_1.CardMedia, { className: classes.image, component: "img", src: categoryA_1.default }), (0, jsx_runtime_1.jsx)(material_1.CardMedia, { className: classes.image, component: "img", src: categoryB_1.default })] })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ component: "span", className: classes.action }, { children: (step === null || step === void 0 ? void 0 : step.status) === types_1.SCOnBoardingStepStatusType.COMPLETED ? ((0, jsx_runtime_1.jsx)(material_1.Alert, Object.assign({ severity: "success" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.categories.success", defaultMessage: "ui.onBoardingWidget.step.categories.success" }) }))) : (step === null || step === void 0 ? void 0 : step.status) === types_1.SCOnBoardingStepStatusType.IN_PROGRESS ? ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.progress }, { children: [(0, jsx_runtime_1.jsx)(react_lottie_player_1.Player, { autoplay: true, loop: true, src: category_progress_json_1.default, className: classes.animationProgress, controls: false }), (0, jsx_runtime_1.jsx)(ProgressBar_1.default, { value: progress, hideBar: true, loadingMessage: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h4" }, { children: getLoadingMessage })) })] }))) : ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: "contained", color: "secondary", onClick: handleCategoriesCreation, endIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: hover ? 'ai_stars' : 'magic_wand' }), onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.onBoardingWidget.step.category.button", id: "ui.onBoardingWidget.step.category.button" }) }))) }))] })));
 }
 exports.default = Category;

package/lib/cjs/components/OnBoardingWidget/Steps/Content/Content.js

@@ -2,9 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const styles_1 = require("@mui/material/styles");
 const material_1 = require("@mui/material");
-const Box_1 = tslib_1.__importDefault(require("@mui/material/Box"));
 const system_1 = require("@mui/system");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const react_1 = require("react");
@@ -22,7 +20,7 @@ const classes = {
     progress: `${constants_1.PREFIX}-content-progress`,
     animationProgress: `${constants_1.PREFIX}-content-animation-progress`
 };
-const Root = (0, styles_1.styled)(Box_1.default, {
+const Root = (0, material_1.styled)(material_1.Box, {
     name: constants_1.PREFIX,
     slot: 'ContentRoot'
 })(() => ({}));
@@ -71,6 +69,6 @@ function Content(inProps) {
         }
         return message;
     }, [progress]);
-    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h4", className: classes.title }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.contents", defaultMessage: "ui.onBoardingWidget.contents" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.summary }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.content.summary", defaultMessage: "ui.onBoardingWidget.step.content.summary" }) })), (0, jsx_runtime_1.jsx)(Box_1.default, Object.assign({ component: "span", className: classes.action }, { children: (step === null || step === void 0 ? void 0 : step.status) === types_1.SCOnBoardingStepStatusType.COMPLETED ? ((0, jsx_runtime_1.jsx)(material_1.Alert, Object.assign({ severity: "success" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.contents.success", defaultMessage: "ui.onBoardingWidget.step.contents.success" }) }))) : (step === null || step === void 0 ? void 0 : step.status) === types_1.SCOnBoardingStepStatusType.IN_PROGRESS ? ((0, jsx_runtime_1.jsxs)(Box_1.default, Object.assign({ className: classes.progress }, { children: [(0, jsx_runtime_1.jsx)(react_lottie_player_1.Player, { autoplay: true, loop: true, src: content_progress_json_1.default, className: classes.animationProgress, controls: false }), (0, jsx_runtime_1.jsx)(ProgressBar_1.default, { value: progress, hideBar: true, loadingMessage: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h4" }, { children: getLoadingMessage })) })] }))) : ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: "contained", color: "secondary", onClick: handleContentCreation, endIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: hover ? 'ai_stars' : 'magic_wand' }), onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.onBoardingWidget.step.content.button", id: "ui.onBoardingWidget.step.content.button" }) }))) }))] })));
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h4", className: classes.title }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.contents", defaultMessage: "ui.onBoardingWidget.contents" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.summary }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.content.summary", defaultMessage: "ui.onBoardingWidget.step.content.summary" }) })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ component: "span", className: classes.action }, { children: (step === null || step === void 0 ? void 0 : step.status) === types_1.SCOnBoardingStepStatusType.COMPLETED ? ((0, jsx_runtime_1.jsx)(material_1.Alert, Object.assign({ severity: "success" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.contents.success", defaultMessage: "ui.onBoardingWidget.step.contents.success" }) }))) : (step === null || step === void 0 ? void 0 : step.status) === types_1.SCOnBoardingStepStatusType.IN_PROGRESS ? ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.progress }, { children: [(0, jsx_runtime_1.jsx)(react_lottie_player_1.Player, { autoplay: true, loop: true, src: content_progress_json_1.default, className: classes.animationProgress, controls: false }), (0, jsx_runtime_1.jsx)(ProgressBar_1.default, { value: progress, hideBar: true, loadingMessage: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h4" }, { children: getLoadingMessage })) })] }))) : ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: "contained", color: "secondary", onClick: handleContentCreation, endIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: hover ? 'ai_stars' : 'magic_wand' }), onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.onBoardingWidget.step.content.button", id: "ui.onBoardingWidget.step.content.button" }) }))) }))] })));
 }
 exports.default = Content;

package/lib/cjs/components/OnBoardingWidget/Steps/Invite/Invite.js

@@ -3,8 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const styles_1 = require("@mui/material/styles");
-const Box_1 = tslib_1.__importDefault(require("@mui/material/Box"));
 const system_1 = require("@mui/system");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const constants_1 = require("../../constants");
@@ -25,7 +23,7 @@ const classes = {
     icon: `${constants_1.PREFIX}-invite-social-icon`,
     action: `${constants_1.PREFIX}-invite-action`
 };
-const Root = (0, styles_1.styled)(Box_1.default, {
+const Root = (0, material_1.styled)(material_1.Box, {
     name: constants_1.PREFIX,
     slot: 'InviteRoot'
 })(() => ({}));
@@ -93,6 +91,6 @@ function Invite(inProps) {
         onCompleteAction();
         fetchPlatform('/marketing/invitation');
     };
-    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h4", className: classes.title }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.invite", defaultMessage: "ui.onBoardingWidget.invite" }) })), (0, jsx_runtime_1.jsxs)(Box_1.default, Object.assign({ className: classes.social }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.title, variant: "h4" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.invite.social.title", defaultMessage: "ui.onBoardingWidget.step.invite.social.title" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "subtitle1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.invite.social.subtitle", defaultMessage: "ui.onBoardingWidget.step.invite.social.subtitle" }) })), (0, jsx_runtime_1.jsxs)(Box_1.default, Object.assign({ className: classes.iconContainer }, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: () => handleShare(SocialShare_1.FACEBOOK_SHARE + url, 'facebook'), disabled: !url || isMetaRobotsUpdating }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ classes: { root: classes.icon } }, { children: "facebook" })) })), (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: () => handleShare(SocialShare_1.X_SHARE + url, 'x'), disabled: !url || isMetaRobotsUpdating }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ classes: { root: classes.icon } }, { children: "twitter" })) })), (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: () => handleShare(SocialShare_1.LINKEDIN_SHARE + url, 'linkedin'), disabled: !url || isMetaRobotsUpdating }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ classes: { root: classes.icon } }, { children: "linkedin" })) }))] }))] })), (0, jsx_runtime_1.jsxs)(Box_1.default, Object.assign({ className: classes.email }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.title, variant: "h4" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.invite.email.title", defaultMessage: "ui.onBoardingWidget.step.invite.email.title" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "subtitle1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.invite.email.subtitle", defaultMessage: "ui.onBoardingWidget.step.invite.email.subtitle" }) }))] })), (0, jsx_runtime_1.jsx)(Box_1.default, Object.assign({ component: "span", className: classes.action }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "outlined", size: "small", onClick: handleCompleteAction }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.onBoardingWidget.step.invite.button", id: "ui.onBoardingWidget.step.invite.button" }) })) }))] })));
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h4", className: classes.title }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.invite", defaultMessage: "ui.onBoardingWidget.invite" }) })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.social }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.title, variant: "h4" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.invite.social.title", defaultMessage: "ui.onBoardingWidget.step.invite.social.title" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "subtitle1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.invite.social.subtitle", defaultMessage: "ui.onBoardingWidget.step.invite.social.subtitle" }) })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.iconContainer }, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: () => handleShare(SocialShare_1.FACEBOOK_SHARE + url, 'facebook'), disabled: !url || isMetaRobotsUpdating }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ classes: { root: classes.icon } }, { children: "facebook" })) })), (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: () => handleShare(SocialShare_1.X_SHARE + url, 'x'), disabled: !url || isMetaRobotsUpdating }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ classes: { root: classes.icon } }, { children: "twitter" })) })), (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: () => handleShare(SocialShare_1.LINKEDIN_SHARE + url, 'linkedin'), disabled: !url || isMetaRobotsUpdating }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ classes: { root: classes.icon } }, { children: "linkedin" })) }))] }))] })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.email }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.title, variant: "h4" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.invite.email.title", defaultMessage: "ui.onBoardingWidget.step.invite.email.title" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "subtitle1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.invite.email.subtitle", defaultMessage: "ui.onBoardingWidget.step.invite.email.subtitle" }) }))] })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ component: "span", className: classes.action }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "outlined", size: "small", onClick: handleCompleteAction }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.onBoardingWidget.step.invite.button", id: "ui.onBoardingWidget.step.invite.button" }) })) }))] })));
 }
 exports.default = Invite;

package/lib/cjs/components/OnBoardingWidget/Steps/Profile/Profile.js

@@ -3,8 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const styles_1 = require("@mui/material/styles");
-const Box_1 = tslib_1.__importDefault(require("@mui/material/Box"));
 const system_1 = require("@mui/system");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const constants_1 = require("../../constants");
@@ -16,7 +14,6 @@ const UserAvatar_1 = tslib_1.__importDefault(require("../../../../shared/UserAva
 const ChangePicture_1 = tslib_1.__importDefault(require("../../../ChangePicture"));
 const ChangeCover_1 = tslib_1.__importDefault(require("../../../ChangeCover"));
 const UserProfile_1 = require("../../../../constants/UserProfile");
-const Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
 const classes = {
     root: `${constants_1.PREFIX}-profile-root`,
     title: `${constants_1.PREFIX}-profile-title`,
@@ -27,11 +24,11 @@ const classes = {
     changeCover: `${constants_1.PREFIX}-profile-change-cover`,
     publicInfo: `${constants_1.PREFIX}-profile-public-info`
 };
-const Root = (0, styles_1.styled)(Box_1.default, {
+const Root = (0, material_1.styled)(material_1.Box, {
     name: constants_1.PREFIX,
     slot: 'ProfileRoot'
 })(() => ({}));
-const DrawerRoot = (0, styles_1.styled)(material_1.Drawer, {
+const DrawerRoot = (0, material_1.styled)(material_1.Drawer, {
     name: constants_1.PREFIX,
     slot: 'ProfileDrawerRoot'
 })(() => ({}));
@@ -86,6 +83,6 @@ function Profile(inProps) {
         setSCUser(Object.assign({}, scUser, { cover: cover }));
         onCompleteAction();
     }
-    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h4", className: classes.title, alignSelf: "self-start" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.profile", defaultMessage: "ui.onBoardingWidget.profile" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ alignSelf: "self-start" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.profile.summary", defaultMessage: "ui.onBoardingWidget.step.profile.summary" }) })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "outlined", size: "small", color: "primary", onClick: handleOpen }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.profile.button", defaultMessage: "ui.onBoardingWidget.step.profile.button" }) })), (0, jsx_runtime_1.jsxs)(DrawerRoot, Object.assign({ anchor: "right", open: Boolean(anchorEl), onClose: handleClose }, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: classes.icon, onClick: handleClose }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "close" }) })), (0, jsx_runtime_1.jsxs)(material_1.Paper, Object.assign({ style: _backgroundCover, classes: { root: classes.cover } }, { children: [(0, jsx_runtime_1.jsx)(Box_1.default, Object.assign({ className: classes.avatar }, { children: (0, jsx_runtime_1.jsx)(UserAvatar_1.default, Object.assign({ hide: !hasBadge }, { children: (0, jsx_runtime_1.jsx)("img", { src: (scUser === null || scUser === void 0 ? void 0 : scUser.avatar) ? scUser.avatar : '' }) })) })), (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ChangePicture_1.default, { iconButton: true, onChange: handleChangeAvatar, className: classes.changePicture }), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: classes.changeCover }, { children: (0, jsx_runtime_1.jsx)(ChangeCover_1.default, { onChange: handleChangeCover }) }))] })] })), (0, jsx_runtime_1.jsx)(Box_1.default, Object.assign({ className: classes.publicInfo }, { children: (0, jsx_runtime_1.jsx)(PublicInfo_1.default, { fields: fields, onEditSuccess: onCompleteAction }) }))] }))] })));
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h4", className: classes.title, alignSelf: "self-start" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.profile", defaultMessage: "ui.onBoardingWidget.profile" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ alignSelf: "self-start" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.profile.summary", defaultMessage: "ui.onBoardingWidget.step.profile.summary" }) })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "outlined", size: "small", color: "primary", onClick: handleOpen }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.profile.button", defaultMessage: "ui.onBoardingWidget.step.profile.button" }) })), (0, jsx_runtime_1.jsxs)(DrawerRoot, Object.assign({ anchor: "right", open: Boolean(anchorEl), onClose: handleClose }, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: classes.icon, onClick: handleClose }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) })), (0, jsx_runtime_1.jsxs)(material_1.Paper, Object.assign({ style: _backgroundCover, classes: { root: classes.cover } }, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.avatar }, { children: (0, jsx_runtime_1.jsx)(UserAvatar_1.default, Object.assign({ hide: !hasBadge }, { children: (0, jsx_runtime_1.jsx)("img", { src: (scUser === null || scUser === void 0 ? void 0 : scUser.avatar) ? scUser.avatar : '' }) })) })), (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ChangePicture_1.default, { iconButton: true, onChange: handleChangeAvatar, className: classes.changePicture }), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: classes.changeCover }, { children: (0, jsx_runtime_1.jsx)(ChangeCover_1.default, { onChange: handleChangeCover }) }))] })] })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.publicInfo }, { children: (0, jsx_runtime_1.jsx)(PublicInfo_1.default, { fields: fields, onEditSuccess: onCompleteAction }) }))] }))] })));
 }
 exports.default = Profile;

package/lib/cjs/components/PaymentDetailDialog/PaymentDetailDialog.d.ts

@@ -0,0 +1,6 @@
+import { BaseDialogProps } from '../../shared/BaseDialog';
+export interface PaymentDetailDialogProps extends BaseDialogProps {
+    className?: string;
+    disableInitialTransition?: boolean;
+}
+export default function PaymentDetailDialog(inProps: PaymentDetailDialogProps): JSX.Element;

package/lib/cjs/components/PaymentDetailDialog/PaymentDetailDialog.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = tslib_1.__importDefault(require("react"));
+const material_1 = require("@mui/material");
+const system_1 = require("@mui/system");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const react_core_1 = require("@selfcommunity/react-core");
+const BaseDialog_1 = tslib_1.__importDefault(require("../../shared/BaseDialog"));
+const react_intl_1 = require("react-intl");
+const PREFIX = 'SCPaymentProductsDialog';
+const classes = {
+    root: `${PREFIX}-root`
+};
+const Root = (0, material_1.styled)(BaseDialog_1.default, {
+    slot: 'Root',
+    name: PREFIX
+})(({ theme }) => ({}));
+const Transition = react_1.default.forwardRef(function Transition(props, ref) {
+    return (0, jsx_runtime_1.jsx)(material_1.Slide, Object.assign({ direction: "up", ref: ref }, props));
+});
+const NoTransition = react_1.default.forwardRef(function NoTransition(props, ref) {
+    return (0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [" ", props.children, " "] });
+});
+function PaymentDetailDialog(inProps) {
+    // PROPS
+    const props = (0, system_1.useThemeProps)({
+        props: inProps,
+        name: PREFIX
+    });
+    const { className, disableInitialTransition = false } = props, rest = tslib_1.__rest(props, ["className", "disableInitialTransition"]);
+    // HOOKS
+    const { isPaymentsEnabled } = (0, react_core_1.useSCPaymentsEnabled)();
+    if (!isPaymentsEnabled) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ maxWidth: 'sm', fullWidth: true, title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentDetailDialog.title", defaultMessage: "ui.paymentDetailDialog.title" }), scroll: 'paper', open: true }, (disableInitialTransition ? { TransitionComponent: NoTransition } : { TransitionComponent: Transition }), { className: (0, classnames_1.default)(classes.root, className), TransitionComponent: Transition }, rest, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentDetailDialog.content", defaultMessage: "ui.paymentDetailDialog.content" }) })));
+}
+exports.default = PaymentDetailDialog;

package/lib/cjs/components/PaymentDetailDialog/index.d.ts

@@ -0,0 +1,3 @@
+import PaymentDetailDialog, { PaymentDetailDialogProps } from './PaymentDetailDialog';
+export default PaymentDetailDialog;
+export { PaymentDetailDialogProps };

package/lib/cjs/components/PaymentDetailDialog/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const PaymentDetailDialog_1 = tslib_1.__importDefault(require("./PaymentDetailDialog"));
+exports.default = PaymentDetailDialog_1.default;

package/lib/cjs/components/PaymentOrder/PaymentOrder.d.ts

@@ -0,0 +1,10 @@
+import { SCPaymentOrder } from '@selfcommunity/types';
+import { PaymentOrderPdfButtonProps } from '../PaymentOrderPdfButton';
+export interface PaymentOrderProps {
+    className?: string;
+    paymentOrderId?: number;
+    paymentOrder?: SCPaymentOrder;
+    hidePaymentOrderPdfButton?: boolean;
+    PaymentOrderPdfButtonComponentProps?: PaymentOrderPdfButtonProps;
+}
+export default function PaymentOrder(inProps: PaymentOrderProps): JSX.Element;

package/lib/cjs/components/PaymentOrder/PaymentOrder.js

@@ -0,0 +1,80 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const system_1 = require("@mui/system");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const react_core_1 = require("@selfcommunity/react-core");
+const types_1 = require("@selfcommunity/types");
+const constants_1 = require("./constants");
+const react_intl_1 = require("react-intl");
+const Event_1 = tslib_1.__importDefault(require("../Event"));
+const utils_1 = require("@selfcommunity/utils");
+const Category_1 = tslib_1.__importDefault(require("../Category"));
+const Course_1 = tslib_1.__importDefault(require("../Course"));
+const Group_1 = tslib_1.__importDefault(require("../Group"));
+const PaymentProduct_1 = tslib_1.__importDefault(require("../PaymentProduct"));
+const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
+const PaymentOrderPdfButton_1 = tslib_1.__importDefault(require("../PaymentOrderPdfButton"));
+const payment_1 = require("../../utils/payment");
+const course_1 = require("../../types/course");
+const event_1 = require("../../types/event");
+const classes = {
+    root: `${constants_1.PREFIX}-root`,
+    img: `${constants_1.PREFIX}-img`,
+    contentObject: `${constants_1.PREFIX}-content-object`,
+    object: `${constants_1.PREFIX}-object`,
+    status: `${constants_1.PREFIX}-status`,
+    details: `${constants_1.PREFIX}-details`
+};
+const Root = (0, material_1.styled)(material_1.Box, {
+    slot: 'Root',
+    name: constants_1.PREFIX
+})(({ theme }) => ({}));
+function PaymentOrder(inProps) {
+    // PROPS
+    const props = (0, system_1.useThemeProps)({
+        props: inProps,
+        name: constants_1.PREFIX
+    });
+    const { className, paymentOrderId, paymentOrder, hidePaymentOrderPdfButton = false, PaymentOrderPdfButtonComponentProps = {} } = props, rest = tslib_1.__rest(props, ["className", "paymentOrderId", "paymentOrder", "hidePaymentOrderPdfButton", "PaymentOrderPdfButtonComponentProps"]);
+    // HOOKS
+    const { isPaymentsEnabled } = (0, react_core_1.useSCPaymentsEnabled)();
+    const { scPaymentOrder } = (0, react_core_1.useSCFetchPaymentOrder)({ id: paymentOrderId, paymentOrder });
+    const intl = (0, react_intl_1.useIntl)();
+    if (!isPaymentsEnabled || !scPaymentOrder) {
+        return (0, jsx_runtime_1.jsx)(Skeleton_1.default, {});
+    }
+    const renderContent = () => {
+        var _a, _b;
+        let header;
+        const content = scPaymentOrder[scPaymentOrder.content_type];
+        if (scPaymentOrder.content_type === types_1.SCContentType.EVENT) {
+            header = ((0, jsx_runtime_1.jsx)(Event_1.default, { event: content, cacheStrategy: utils_1.CacheStrategies.NETWORK_ONLY, template: event_1.SCEventTemplateType.PREVIEW, actions: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}), variant: "outlined", className: classes.object }));
+        }
+        else if (scPaymentOrder.content_type === types_1.SCContentType.CATEGORY) {
+            header = ((0, jsx_runtime_1.jsx)(Category_1.default, { category: content, cacheStrategy: utils_1.CacheStrategies.NETWORK_ONLY, actions: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}), variant: "outlined", className: classes.object }));
+        }
+        else if (scPaymentOrder.content_type === types_1.SCContentType.COURSE) {
+            header = ((0, jsx_runtime_1.jsx)(Course_1.default, { course: content, cacheStrategy: utils_1.CacheStrategies.NETWORK_ONLY, template: course_1.SCCourseTemplateType.PREVIEW, actions: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}), hideEventParticipants: true, hideEventPlanner: true, variant: "outlined", className: classes.object }));
+        }
+        else if (scPaymentOrder.content_type === types_1.SCContentType.GROUP) {
+            header = ((0, jsx_runtime_1.jsx)(Group_1.default, { group: content, cacheStrategy: utils_1.CacheStrategies.NETWORK_ONLY, hideActions: true, variant: "outlined", hideEventParticipants: true, hideEventPlanner: true, className: classes.object }));
+        }
+        else if (scPaymentOrder.content_type === types_1.SCContentType.COMMUNITY) {
+            header = ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: ((_a = scPaymentOrder.payment_price) === null || _a === void 0 ? void 0 : _a.payment_product) && ((0, jsx_runtime_1.jsx)(PaymentProduct_1.default, { hidePaymentProductPrices: true, paymentProduct: (_b = scPaymentOrder.payment_price) === null || _b === void 0 ? void 0 : _b.payment_product })) }));
+        }
+        return ((0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ spacing: 2, justifyContent: "center", alignItems: "flex-start" }, { children: (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.contentObject }, { children: header })) })));
+    };
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [renderContent(), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.details }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", color: "textSecondary" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrder.date", defaultMessage: "ui.paymentOrder.date", values: {
+                                date: intl.formatDate(new Date(scPaymentOrder.created_at), {
+                                    year: 'numeric',
+                                    month: 'numeric',
+                                    day: 'numeric',
+                                    hour: 'numeric',
+                                    minute: 'numeric'
+                                })
+                            } }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", color: "textSecondary" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrder.price", defaultMessage: "ui.paymentOrder.price", values: { price: (0, payment_1.getConvertedAmount)(scPaymentOrder.payment_price) } }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", color: "textSecondary", component: "span" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrder.status", defaultMessage: "ui.paymentOrder.status" }) })), (0, jsx_runtime_1.jsx)(material_1.Chip, { className: classes.status, variant: 'outlined', label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrder.status.paid", defaultMessage: "ui.paymentOrder.status.paid" }), color: "success", size: "small" }), (0, jsx_runtime_1.jsx)("br", {}), scPaymentOrder && !hidePaymentOrderPdfButton && ((0, jsx_runtime_1.jsx)(PaymentOrderPdfButton_1.default, Object.assign({ paymentOrder: scPaymentOrder, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrder.ticket.view", defaultMessage: "ui.paymentOrder.ticket.view" }) }, PaymentOrderPdfButtonComponentProps)))] }))] })));
+}
+exports.default = PaymentOrder;

package/lib/cjs/components/PaymentOrder/Skeleton.d.ts

@@ -0,0 +1,30 @@
+import { BoxProps } from '@mui/material';
+export interface PaymentOrderSkeletonProps extends BoxProps {
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default null
+     */
+    className?: string;
+}
+/**
+ * > API documentation for the Community-JS PaymentOrder Skeleton component. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {PaymentOrderSkeleton} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCPaymentOrder-skeleton-root` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCPaymentOrder-skeleton-root|Styles applied to the root element.|
+ |image|.SCPaymentOrder-skeleton-image|Styles applied to the image element.|
+ *
+ */
+export default function PaymentOrderSkeleton(inProps: PaymentOrderSkeletonProps): JSX.Element;

package/lib/cjs/components/PaymentOrder/Skeleton.js

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const system_1 = require("@mui/system");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const constants_1 = require("./constants");
+const Widget_1 = tslib_1.__importDefault(require("../Widget"));
+const classes = {
+    root: `${constants_1.PREFIX}-skeleton-root`,
+    skeletonPreviewRoot: `${constants_1.PREFIX}-skeleton-preview-root`,
+    skeletonPreviewContent: `${constants_1.PREFIX}-skeleton-preview-content`,
+    skeletonPreviewName: `${constants_1.PREFIX}-skeleton-preview-name`,
+    skeletonPreviewActions: `${constants_1.PREFIX}-skeleton-preview-actions`
+};
+const Root = (0, material_1.styled)(material_1.Box, {
+    name: constants_1.PREFIX,
+    slot: 'SkeletonRoot'
+})(() => ({}));
+const SkeletonPreviewRoot = (0, material_1.styled)(Widget_1.default, {
+    name: constants_1.PREFIX,
+    slot: 'SkeletonPreviewRoot'
+})(() => ({}));
+/**
+ * > API documentation for the Community-JS PaymentOrder Skeleton component. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {PaymentOrderSkeleton} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCPaymentOrder-skeleton-root` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCPaymentOrder-skeleton-root|Styles applied to the root element.|
+ |image|.SCPaymentOrder-skeleton-image|Styles applied to the image element.|
+ *
+ */
+function PaymentOrderSkeleton(inProps) {
+    // PROPS
+    const props = (0, system_1.useThemeProps)({
+        props: inProps,
+        name: constants_1.PREFIX
+    });
+    const { className } = props, rest = tslib_1.__rest(props, ["className"]);
+    const theme = (0, material_1.useTheme)();
+    /**
+     * Renders event object
+     */
+    let contentObj;
+    contentObj = ((0, jsx_runtime_1.jsxs)(SkeletonPreviewRoot, Object.assign({ className: classes.skeletonPreviewRoot }, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ position: "relative" }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", width: "100%", height: "80px" }) })), (0, jsx_runtime_1.jsxs)(material_1.CardContent, Object.assign({ className: classes.skeletonPreviewContent }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", alignItems: "center", gap: "8px" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "circular", width: "21px", height: "21px" }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { width: "50%", height: "20px" })] })), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { width: "67%", height: "25px", className: classes.skeletonPreviewName }), (0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ direction: "row", alignItems: "center", gap: "8px", marginBottom: "2px" }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { width: "27%", height: "18px" }) })), (0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ direction: "row", gap: "8px", alignItems: "center" }, { children: (0, jsx_runtime_1.jsxs)(material_1.AvatarGroup, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "circular", width: `${theme.selfcommunity.user.avatar.sizeSmall}px`, height: `${theme.selfcommunity.user.avatar.sizeSmall}px` }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "circular", width: `${theme.selfcommunity.user.avatar.sizeSmall}px`, height: `${theme.selfcommunity.user.avatar.sizeSmall}px` }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "circular", width: `${theme.selfcommunity.user.avatar.sizeSmall}px`, height: `${theme.selfcommunity.user.avatar.sizeSmall}px` })] }) }))] }))] })));
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [contentObj, (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "column", alignItems: "flex-start", gap: "8px", marginTop: "8px" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { width: "50%", height: "18px" }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { width: "35%", height: "18px" }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { width: "20%", height: "18px" })] }))] })));
+}
+exports.default = PaymentOrderSkeleton;

package/lib/cjs/components/PaymentOrder/constants.d.ts

@@ -0,0 +1 @@
+export declare const PREFIX = "SCPaymentOrder";

package/lib/cjs/components/PaymentOrder/constants.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PREFIX = void 0;
+exports.PREFIX = 'SCPaymentOrder';

package/lib/cjs/components/PaymentOrder/index.d.ts

@@ -0,0 +1,3 @@
+import PaymentOrder, { PaymentOrderProps } from './PaymentOrder';
+export default PaymentOrder;
+export { PaymentOrderProps };

package/lib/cjs/components/PaymentOrder/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const PaymentOrder_1 = tslib_1.__importDefault(require("./PaymentOrder"));
+exports.default = PaymentOrder_1.default;

package/lib/cjs/components/PaymentOrderPdfButton/PaymentOrderPdfButton.d.ts

@@ -0,0 +1,52 @@
+import React from 'react';
+import { SCPaymentOrder } from '@selfcommunity/types';
+export interface PaymentOrderPdfButtonProps {
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default null
+     */
+    className?: string;
+    /**
+     * Content id
+     */
+    paymentOrderId?: number | string;
+    /**
+     * Payment Order
+     */
+    paymentOrder?: SCPaymentOrder;
+    /**
+     * Handle click
+     */
+    handleClick?: () => void;
+    /**
+     * Override button label
+     */
+    label?: React.ReactNode;
+    /**
+     * Others properties
+     */
+    [p: string]: any;
+}
+/**
+ * > API documentation for the Community-JS PaymentOrderPdfButton component. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {PaymentOrderPdfButton} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `PaymentOrderPdfButton` can be used when providing style overrides in the theme.
+
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCPaymentOrderPdfButton-root|Styles applied to the root element.|
+
+ * @param inProps
+ */
+export default function PaymentOrderPdfButton(inProps: PaymentOrderPdfButtonProps): JSX.Element;

package/lib/cjs/components/PaymentOrderPdfButton/PaymentOrderPdfButton.js

@@ -0,0 +1,74 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const material_1 = require("@mui/material");
+const system_1 = require("@mui/system");
+const react_core_1 = require("@selfcommunity/react-core");
+const react_intl_1 = require("react-intl");
+const PdfPreviewDialog_1 = tslib_1.__importDefault(require("../PdfPreviewDialog"));
+const api_services_1 = require("@selfcommunity/api-services");
+const PREFIX = 'SCPaymentOrderPdfButton';
+const classes = {
+    root: `${PREFIX}-root`
+};
+const Root = (0, material_1.styled)(material_1.Button, {
+    name: PREFIX,
+    slot: 'root'
+})(() => ({}));
+/**
+ * > API documentation for the Community-JS PaymentOrderPdfButton component. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {PaymentOrderPdfButton} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `PaymentOrderPdfButton` can be used when providing style overrides in the theme.
+
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCPaymentOrderPdfButton-root|Styles applied to the root element.|
+
+ * @param inProps
+ */
+function PaymentOrderPdfButton(inProps) {
+    // PROPS
+    const props = (0, system_1.useThemeProps)({
+        props: inProps,
+        name: PREFIX
+    });
+    const { className, paymentOrderId, paymentOrder, handleClick, PdfPreviewDialogComponentProps = {}, label } = props, rest = tslib_1.__rest(props, ["className", "paymentOrderId", "paymentOrder", "handleClick", "PdfPreviewDialogComponentProps", "label"]);
+    // STATE
+    const [open, setOpen] = (0, react_1.useState)(false);
+    // CONTEXT
+    const scContext = (0, react_core_1.useSCContext)();
+    const scUserContext = (0, react_core_1.useSCUser)();
+    const { isPaymentsEnabled } = (0, react_core_1.useSCPaymentsEnabled)();
+    const { scPaymentOrder } = (0, react_core_1.useSCFetchPaymentOrder)({ id: paymentOrderId, paymentOrder });
+    // HANDLERS
+    const handleClose = (0, react_1.useCallback)(() => {
+        setOpen(false);
+    }, [open]);
+    const handlePaymentOrderPdf = (0, react_1.useCallback)((e) => {
+        if (handleClick) {
+            handleClick();
+        }
+        else if (!open) {
+            setOpen(true);
+        }
+    }, [open, handleClick]);
+    if (!scUserContext.user || !isPaymentsEnabled || !scPaymentOrder) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: !scPaymentOrder ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrderPdfButton.disabled", defaultMessage: "ui.paymentOrderPdfButton.disabled" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrder.ticket.view", defaultMessage: "ui.paymentOrder.ticket.view" })) }, { children: (0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), variant: "contained", onClick: handlePaymentOrderPdf }, rest, { children: label ? label : (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "picture_as_pdf" }) })) })), open && ((0, jsx_runtime_1.jsx)(PdfPreviewDialog_1.default, Object.assign({ open: true, onClose: handleClose }, PdfPreviewDialogComponentProps, { pdfUrl: `${new URL(scContext.settings.portal)}${api_services_1.Endpoints.GetPaymentOrderPdf.url({ id: scPaymentOrder.id })}` })))] }));
+}
+exports.default = PaymentOrderPdfButton;

package/lib/cjs/components/PaymentOrderPdfButton/index.d.ts

@@ -0,0 +1,3 @@
+import PaymentOrderPdfButton, { PaymentOrderPdfButtonProps } from './PaymentOrderPdfButton';
+export default PaymentOrderPdfButton;
+export { PaymentOrderPdfButtonProps };

package/lib/cjs/components/PaymentOrderPdfButton/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const PaymentOrderPdfButton_1 = tslib_1.__importDefault(require("./PaymentOrderPdfButton"));
+exports.default = PaymentOrderPdfButton_1.default;

package/lib/cjs/components/PaymentOrders/PaymentOrders.d.ts

@@ -0,0 +1,17 @@
+import { SCContentType } from '@selfcommunity/types';
+export interface PaymentOrdersProps {
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default null
+     */
+    className?: string;
+    /**
+     * The content name used to prefilter the results shown
+     */
+    contentName?: string;
+    /**
+     * The content type used to prefilter the results shown
+     */
+    contentType?: SCContentType;
+}
+export default function PaymentOrders(inProps: PaymentOrdersProps): JSX.Element;