@selfcommunity/react-templates 0.5.0 → 1.0.0-alpha.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (42) hide show
  1. package/lib/cjs/components/CategoryFeed/CategoryFeed.js +1 -1
  2. package/lib/cjs/components/Course/Course.d.ts +1 -1
  3. package/lib/cjs/components/EventFeed/EventFeed.js +1 -1
  4. package/lib/cjs/components/ExploreFeed/ExploreFeed.js +1 -1
  5. package/lib/cjs/components/FeedObjectDetail/FeedObjectDetail.js +1 -1
  6. package/lib/cjs/components/FeedObjectDetail/Skeleton.js +1 -1
  7. package/lib/cjs/components/GroupFeed/GroupFeed.js +1 -1
  8. package/lib/cjs/components/Lesson/Lesson.js +3 -4
  9. package/lib/cjs/components/LoyaltyProgramDetail/LoyaltyProgramDetail.js +2 -2
  10. package/lib/cjs/components/LoyaltyProgramDetail/PointsList.js +2 -2
  11. package/lib/cjs/components/LoyaltyProgramDetail/PrizeItemSkeleton.js +1 -1
  12. package/lib/cjs/components/LoyaltyProgramDetail/Skeleton.js +1 -1
  13. package/lib/cjs/components/MainFeed/MainFeed.js +1 -1
  14. package/lib/cjs/components/UserFeed/UserFeed.js +1 -1
  15. package/lib/cjs/components/UserProfile/UserProfile.js +1 -1
  16. package/lib/esm/components/CategoryFeed/CategoryFeed.js +1 -1
  17. package/lib/esm/components/Course/Course.d.ts +1 -1
  18. package/lib/esm/components/EventFeed/EventFeed.js +1 -1
  19. package/lib/esm/components/ExploreFeed/ExploreFeed.js +1 -1
  20. package/lib/esm/components/FeedObjectDetail/FeedObjectDetail.js +2 -2
  21. package/lib/esm/components/FeedObjectDetail/Skeleton.js +1 -1
  22. package/lib/esm/components/GroupFeed/GroupFeed.js +1 -1
  23. package/lib/esm/components/Lesson/Lesson.js +4 -5
  24. package/lib/esm/components/LoyaltyProgramDetail/LoyaltyProgramDetail.js +2 -2
  25. package/lib/esm/components/LoyaltyProgramDetail/PointsList.js +2 -2
  26. package/lib/esm/components/LoyaltyProgramDetail/PrizeItemSkeleton.js +1 -1
  27. package/lib/esm/components/LoyaltyProgramDetail/Skeleton.js +1 -1
  28. package/lib/esm/components/MainFeed/MainFeed.js +1 -1
  29. package/lib/esm/components/UserFeed/UserFeed.js +1 -1
  30. package/lib/esm/components/UserProfile/UserProfile.js +1 -1
  31. package/lib/umd/234.js +2 -0
  32. package/lib/umd/{519.js.LICENSE.txt → 234.js.LICENSE.txt} +1 -14
  33. package/lib/umd/3ffb7beb33b58142e791.js +2 -0
  34. package/lib/umd/739.js +2 -0
  35. package/lib/umd/react-templates.js +1 -1
  36. package/lib/umd/react-templates.js.LICENSE.txt +1 -1
  37. package/package.json +131 -131
  38. package/lib/umd/519.js +0 -2
  39. package/lib/umd/738.js +0 -2
  40. package/lib/umd/73cbb3dbfaa3ddd4df47.js +0 -2
  41. /package/lib/umd/{738.js.LICENSE.txt → 3ffb7beb33b58142e791.js.LICENSE.txt} +0 -0
  42. /package/lib/umd/{73cbb3dbfaa3ddd4df47.js.LICENSE.txt → 739.js.LICENSE.txt} +0 -0
package/lib/cjs/components/CategoryFeed/CategoryFeed.js CHANGED
@@ -76,7 +76,7 @@ function CategoryFeed(inProps) {
76
76
  const scUserContext = (0, react_core_1.useSCUser)();
77
77
  const { enqueueSnackbar } = (0, notistack_1.useSnackbar)();
78
78
  // REF
79
- const feedRef = (0, react_1.useRef)();
79
+ const feedRef = (0, react_1.useRef)(null);
80
80
  // Hooks
81
81
  const { scCategory } = (0, react_core_1.useSCFetchCategory)({ id: categoryId, category });
82
82
  const isAdvertisingCustomAdvEnabled = (0, react_core_1.useSCPreferenceEnabled)(react_core_1.SCPreferences.ADVERTISING_CUSTOM_ADV_ENABLED);
package/lib/cjs/components/Course/Course.d.ts CHANGED
@@ -23,4 +23,4 @@ export interface CourseProps {
23
23
  courseId?: number;
24
24
  viewDashboard?: boolean;
25
25
  }
26
- export default function Course(inProps: CourseProps): JSX.Element;
26
+ export default function Course(inProps: CourseProps): import("react/jsx-runtime").JSX.Element;
package/lib/cjs/components/EventFeed/EventFeed.js CHANGED
@@ -92,7 +92,7 @@ function EventFeed(inProps) {
92
92
  const { enqueueSnackbar } = (0, notistack_1.useSnackbar)();
93
93
  const { scEvent } = (0, react_core_1.useSCFetchEvent)({ id: eventId, event });
94
94
  // REF
95
- const feedRef = (0, react_1.useRef)();
95
+ const feedRef = (0, react_1.useRef)(null);
96
96
  // CONST
97
97
  const authUserId = scUserContext.user ? scUserContext.user.id : null;
98
98
  (0, react_1.useEffect)(() => {
package/lib/cjs/components/ExploreFeed/ExploreFeed.js CHANGED
@@ -89,7 +89,7 @@ function ExploreFeed(inProps) {
89
89
  const isAdvertisingCustomAdvOnlyForAnonUsersEnabled = (0, react_core_1.useSCPreferenceEnabled)(react_core_1.SCPreferences.ADVERTISING_CUSTOM_ADV_ONLY_FOR_ANONYMOUS_USERS_ENABLED);
90
90
  const { enqueueSnackbar } = (0, notistack_1.useSnackbar)();
91
91
  // REF
92
- const feedRef = (0, react_1.useRef)();
92
+ const feedRef = (0, react_1.useRef)(null);
93
93
  /**
94
94
  * Render advertising above the feed
95
95
  */
package/lib/cjs/components/FeedObjectDetail/FeedObjectDetail.js CHANGED
@@ -98,6 +98,6 @@ function FeedObjectDetail(inProps) {
98
98
  if (!obj) {
99
99
  return (0, jsx_runtime_1.jsx)(Skeleton_1.default, {});
100
100
  }
101
- return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className) }, { children: (0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ container: true, spacing: 2 }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ item: true, xs: 12, md: 7 }, { children: [(0, jsx_runtime_1.jsx)(react_ui_1.FeedObject, Object.assign({}, FeedObjectProps, { feedObject: obj, template: react_ui_1.SCFeedObjectTemplateType.DETAIL, onReply: handleReply })), renderAdvertising(), commentsEnabled && ((0, jsx_runtime_1.jsx)(react_ui_1.CommentsFeedObject, Object.assign({ showTitle: true, feedObject: obj, comments: comments }, CommentsFeedObjectProps), `comments_${obj.id}`))] })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, md: 5 }, { children: (0, jsx_runtime_1.jsx)(material_1.Hidden, Object.assign({ mdDown: true }, { children: (0, jsx_runtime_1.jsx)(react_ui_1.StickyBox, Object.assign({}, FeedSidebarProps, { children: (0, jsx_runtime_1.jsx)(react_ui_1.RelatedFeedObjectsWidget, Object.assign({ feedObject: obj, feedObjectId: obj.id }, RelatedFeedObjectProps), `related_${obj.id}`) })) })) }))] })) })));
101
+ return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className) }, { children: (0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ container: true, width: "100%", spacing: 2 }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ size: { xs: 12, md: 7 } }, { children: [(0, jsx_runtime_1.jsx)(react_ui_1.FeedObject, Object.assign({}, FeedObjectProps, { feedObject: obj, template: react_ui_1.SCFeedObjectTemplateType.DETAIL, onReply: handleReply })), renderAdvertising(), commentsEnabled && ((0, jsx_runtime_1.jsx)(react_ui_1.CommentsFeedObject, Object.assign({ showTitle: true, feedObject: obj, comments: comments }, CommentsFeedObjectProps), `comments_${obj.id}`))] })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: { xs: 12, md: 5 } }, { children: (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ sx: { display: { xs: 'none', md: 'block' } } }, { children: (0, jsx_runtime_1.jsx)(react_ui_1.StickyBox, Object.assign({}, FeedSidebarProps, { children: (0, jsx_runtime_1.jsx)(react_ui_1.RelatedFeedObjectsWidget, Object.assign({ feedObject: obj, feedObjectId: obj.id }, RelatedFeedObjectProps), `related_${obj.id}`) })) })) }))] })) })));
102
102
  }
103
103
  exports.default = FeedObjectDetail;
package/lib/cjs/components/FeedObjectDetail/Skeleton.js CHANGED
@@ -33,6 +33,6 @@ const Root = (0, material_1.styled)(material_1.Box, {
33
33
  */
34
34
  function FeedObjectDetailSkeleton(props) {
35
35
  const { FeedObjectSkeletonProps = {}, CommentsFeedObjectSkeletonProps = {}, RelatedFeedObjectsSkeletonProps = {} } = props;
36
- return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: classes.root }, { children: (0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ container: true, spacing: 2 }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ item: true, xs: 12, md: 7 }, { children: [(0, jsx_runtime_1.jsx)(react_ui_1.FeedObjectSkeleton, Object.assign({ template: react_ui_1.SCFeedObjectTemplateType.DETAIL }, FeedObjectSkeletonProps)), (0, jsx_runtime_1.jsx)(react_ui_1.CommentsFeedObjectSkeleton, Object.assign({ count: 4 }, CommentsFeedObjectSkeletonProps))] })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, md: 5 }, { children: (0, jsx_runtime_1.jsx)(react_ui_1.RelatedFeedObjectsWidgetSkeleton, Object.assign({}, RelatedFeedObjectsSkeletonProps)) }))] })) })));
36
+ return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: classes.root }, { children: (0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ container: true, width: "100%", spacing: 2 }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ size: { xs: 12, md: 7 } }, { children: [(0, jsx_runtime_1.jsx)(react_ui_1.FeedObjectSkeleton, Object.assign({ template: react_ui_1.SCFeedObjectTemplateType.DETAIL }, FeedObjectSkeletonProps)), (0, jsx_runtime_1.jsx)(react_ui_1.CommentsFeedObjectSkeleton, Object.assign({ count: 4 }, CommentsFeedObjectSkeletonProps))] })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: { xs: 12, md: 5 } }, { children: (0, jsx_runtime_1.jsx)(react_ui_1.RelatedFeedObjectsWidgetSkeleton, Object.assign({}, RelatedFeedObjectsSkeletonProps)) }))] })) })));
37
37
  }
38
38
  exports.default = FeedObjectDetailSkeleton;
package/lib/cjs/components/GroupFeed/GroupFeed.js CHANGED
@@ -78,7 +78,7 @@ function GroupFeed(inProps) {
78
78
  const { enqueueSnackbar } = (0, notistack_1.useSnackbar)();
79
79
  const { scGroup } = (0, react_core_1.useSCFetchGroup)({ id: groupId, group });
80
80
  // REF
81
- const feedRef = (0, react_1.useRef)();
81
+ const feedRef = (0, react_1.useRef)(null);
82
82
  // CONST
83
83
  const authUserId = scUserContext.user ? scUserContext.user.id : null;
84
84
  (0, react_1.useEffect)(() => {
package/lib/cjs/components/Lesson/Lesson.js CHANGED
@@ -12,7 +12,6 @@ const classnames_1 = tslib_1.__importDefault(require("classnames"));
12
12
  const react_ui_1 = require("@selfcommunity/react-ui");
13
13
  const api_services_1 = require("@selfcommunity/api-services");
14
14
  const react_intl_1 = require("react-intl");
15
- const lab_1 = require("@mui/lab");
16
15
  const notistack_1 = require("notistack");
17
16
  const react_ui_2 = require("@selfcommunity/react-ui");
18
17
  const classes = {
@@ -193,8 +192,8 @@ function Lesson(inProps) {
193
192
  return (0, jsx_runtime_1.jsx)(react_ui_1.HiddenPlaceholder, {});
194
193
  }
195
194
  return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [(0, jsx_runtime_1.jsx)(react_ui_1.LessonAppbar, Object.assign({ showComments: scLesson.comments_enabled, editMode: editMode, activePanel: activePanel, title: scCourse.name, handleOpen: handleOpenDrawer, onSave: handleLessonUpdate, updating: updating }, LessonAppbarProps)), (0, jsx_runtime_1.jsxs)(Container, Object.assign({ open: Boolean(activePanel) || editMode, className: classes.containerRoot }, { children: [previewMode && ((0, jsx_runtime_1.jsx)(material_1.Alert, Object.assign({ severity: "info", className: classes.previewInfo }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "templates.lesson.previewMode", defaultMessage: "templates.lesson.previewMode", values: {
196
- link: (...chunks) => ((0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes.COURSE_LESSON_EDIT_ROUTE_NAME, (0, react_ui_2.getUrlLesson)(scCourse, scLesson)) }, { children: chunks }))),
197
- linkBack: (...chunks) => (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes.COURSE_DASHBOARD_ROUTE_NAME, scCourse) }, { children: chunks }))
198
- } }) })) }))), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.navigation }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", color: "text.secondary" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "templates.lesson.number", defaultMessage: "templates.lesson.number", values: { from: currentLessonIndex + 1, to: availableLessons.length } }) })) })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.navigationTitle }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5" }, { children: scLesson.name })), (0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: handlePrev, disabled: isPrevDisabled }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "arrow_back" }) })), (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: handleNext, disabled: isNextDisabled }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "arrow_next" }) }))] })] })), (0, jsx_runtime_1.jsx)(react_ui_1.LessonObject, { course: scCourse, lesson: scLesson, editMode: editMode, onContentChange: handleLessonContentEdit, onMediaChange: handleLessonMediaEdit }), !isCourseAdmin && !editMode && !previewMode && ((0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ className: classes.button, loading: loading, size: "small", variant: completed ? 'outlined' : 'contained', startIcon: !completed && (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "arrow_next" }), endIcon: completed && (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "circle_checked" }), onClick: toggleLessonCompletion }, { children: completed ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "templates.lesson.button.completed", defaultMessage: "templates.lesson.button.completed" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "templates.lesson.button.complete", defaultMessage: "templates.lesson.button.complete" })) })))] })), (0, jsx_runtime_1.jsx)(react_ui_1.LessonDrawer, Object.assign({ course: scCourse, lesson: scLesson, editMode: isMobile ? activePanel === react_ui_1.SCLessonActionsType.SETTINGS : editMode, previewMode: previewMode, activePanel: activePanel, handleClose: handleCloseDrawer, handleChangeLesson: handleChangeLesson, LessonEditFormProps: { lesson: scLesson, onSave: handleLessonUpdate, updating: updating, onSettingsChange: handleSettingsChange } }, LessonDrawerProps))] })), openDialog && (0, jsx_runtime_1.jsx)(react_ui_1.CourseCompletedDialog, { course: scCourse, onClose: handleCloseDialog })] }));
195
+ link: (chunks) => ((0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes.COURSE_LESSON_EDIT_ROUTE_NAME, (0, react_ui_2.getUrlLesson)(scCourse, scLesson)) }, { children: chunks }), "templates.lesson.previewMode.link")),
196
+ linkBack: (chunks) => ((0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes.COURSE_DASHBOARD_ROUTE_NAME, scCourse) }, { children: chunks }), "templates.lesson.previewMode.linkBack"))
197
+ } }) })) }))), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.navigation }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", color: "text.secondary" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "templates.lesson.number", defaultMessage: "templates.lesson.number", values: { from: currentLessonIndex + 1, to: availableLessons.length } }) })) })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.navigationTitle }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5" }, { children: scLesson.name })), (0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: handlePrev, disabled: isPrevDisabled }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "arrow_back" }) })), (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: handleNext, disabled: isNextDisabled }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "arrow_next" }) }))] })] })), (0, jsx_runtime_1.jsx)(react_ui_1.LessonObject, { course: scCourse, lesson: scLesson, editMode: editMode, onContentChange: handleLessonContentEdit, onMediaChange: handleLessonMediaEdit }), !isCourseAdmin && !editMode && !previewMode && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ className: classes.button, loading: loading, size: "small", variant: completed ? 'outlined' : 'contained', startIcon: !completed && (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "arrow_next" }), endIcon: completed && (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "circle_checked" }), onClick: toggleLessonCompletion }, { children: completed ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "templates.lesson.button.completed", defaultMessage: "templates.lesson.button.completed" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "templates.lesson.button.complete", defaultMessage: "templates.lesson.button.complete" })) })))] })), (0, jsx_runtime_1.jsx)(react_ui_1.LessonDrawer, Object.assign({ course: scCourse, lesson: scLesson, editMode: isMobile ? activePanel === react_ui_1.SCLessonActionsType.SETTINGS : editMode, previewMode: previewMode, activePanel: activePanel, handleClose: handleCloseDrawer, handleChangeLesson: handleChangeLesson, LessonEditFormProps: { lesson: scLesson, onSave: handleLessonUpdate, updating: updating, onSettingsChange: handleSettingsChange } }, LessonDrawerProps))] })), openDialog && (0, jsx_runtime_1.jsx)(react_ui_1.CourseCompletedDialog, { course: scCourse, onClose: handleCloseDialog })] }));
199
198
  }
200
199
  exports.default = Lesson;
package/lib/cjs/components/LoyaltyProgramDetail/LoyaltyProgramDetail.js CHANGED
@@ -117,7 +117,7 @@ function LoyaltyProgramDetail(inProps) {
117
117
  }
118
118
  });
119
119
  })
120
- .catch((error) => {
120
+ .catch(() => {
121
121
  setOpen(false);
122
122
  let _snackBar = enqueueSnackbar((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "templates.loyaltyProgramDetail.prize.request.error", defaultMessage: "templates.loyaltyProgramDetail.prize.request.error" }), {
123
123
  variant: 'error',
@@ -184,6 +184,6 @@ function LoyaltyProgramDetail(inProps) {
184
184
  if (loading) {
185
185
  return (0, jsx_runtime_1.jsx)(Skeleton_1.default, {});
186
186
  }
187
- return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [points !== 0 && ((0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: classes.title, variant: "h5" }, { children: [!isMobile && (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.loyaltyProgramWidget.title", defaultMessage: "ui.loyaltyProgramWidget.title" }), (0, jsx_runtime_1.jsx)(material_1.Chip, { className: classes.userPoints, component: "span", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "templates.loyaltyProgramDetail.userPoints", defaultMessage: "templates.loyaltyProgramDetail.userPoints", values: { total: points } }) })] }))), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.sectionTitle }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "templates.loyaltyProgramDetail.community", defaultMessage: "templates.loyaltyProgramDetail.community" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.sectionInfo }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "templates.loyaltyProgramDetail.description", defaultMessage: "templates.loyaltyProgramDetail.description" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.sectionTitle }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "templates.loyaltyProgramDetail.listTitle", defaultMessage: "templates.loyaltyProgramDetail.listTitle" }) })), (0, jsx_runtime_1.jsx)(PointsList_1.default, { className: classes.pointsSection }), prizes.length !== 0 && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.sectionTitle }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "templates.loyaltyProgramDetail.prizes", defaultMessage: "templates.loyaltyProgramDetail.prizes" }) }))), (0, jsx_runtime_1.jsx)(react_ui_1.InfiniteScroll, Object.assign({ dataLength: prizes.length, next: handleNext, hasMoreNext: Boolean(next), loaderNext: (0, jsx_runtime_1.jsx)(PrizeItemSkeleton_1.default, {}), endMessage: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: prizes.length !== 0 ? ((0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: classes.endMessage }, { children: [(0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "templates.loyaltyProgramDetail.content.end.message", defaultMessage: "templates.loyaltyProgramDetail.content.end.message" }), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ color: 'secondary', onClick: handleScrollUp }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "templates.loyaltyProgramDetail.content.end.button", defaultMessage: "templates.loyaltyProgramDetail.content.end.button" }) }))] }))) : null }) }, { children: (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ container: true, spacing: !isMobile ? 3 : 0, direction: isMobile ? 'column' : 'row', className: classes.prizeSection }, { children: prizes.map((prize) => ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, sm: 12, md: 6, lg: 4, xl: 3 }, { children: (0, jsx_runtime_1.jsxs)(material_1.Card, Object.assign({ className: classes.card }, { children: [(0, jsx_runtime_1.jsx)(material_1.CardMedia, { component: "img", image: prize.image }), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.prizePoints }, { children: (0, jsx_runtime_1.jsx)(material_1.Chip, { className: points <= prize.points ? classes.notRequestable : null, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "templates.loyaltyProgramDetail.prize.points", defaultMessage: "templates.loyaltyProgramDetail.prize.points", values: { total: prize.points } }) }) })), (0, jsx_runtime_1.jsxs)(material_1.CardContent, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", className: classes.cardTitle }, { children: prize.title })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", className: classes.cardContent }, { children: prize.description }))] }), (0, jsx_runtime_1.jsxs)(material_1.CardActions, { children: [prize.link && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "medium", color: "secondary", href: prize.link, target: "_blank", className: classes.actionButton }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "templates.loyaltyProgramDetail.button.more", defaultMessage: "templates.loyaltyProgramDetail.button.more" }) }))), ((!prize.link && prize.active && points >= prize.points) || (prize.active && points >= prize.points)) && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: "outlined", className: classes.actionButton, disabled: points < prize.points, onClick: () => handleOpenAlert(prize.id) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "templates.loyaltyProgramDetail.button.request", defaultMessage: "templates.loyaltyProgramDetail.button.request" }) })))] })] })) }), prize.id))) })) })), open && ((0, jsx_runtime_1.jsx)(react_ui_1.ConfirmDialog, { open: open, title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "templates.loyaltyProgramDetail.dialog.msg", defaultMessage: "templates.loyaltyProgramDetail.dialog.msg" }), btnConfirm: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "templates.loyaltyProgramDetail.dialog.confirm", defaultMessage: "templates.loyaltyProgramDetail.dialog.confirm" }), onConfirm: () => requestPrize(prizeRequested), onClose: () => setOpen(false) }))] })));
187
+ return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [points !== 0 && ((0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: classes.title, variant: "h5" }, { children: [!isMobile && (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.loyaltyProgramWidget.title", defaultMessage: "ui.loyaltyProgramWidget.title" }), (0, jsx_runtime_1.jsx)(material_1.Chip, { className: classes.userPoints, component: "span", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "templates.loyaltyProgramDetail.userPoints", defaultMessage: "templates.loyaltyProgramDetail.userPoints", values: { total: points } }) })] }))), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.sectionTitle }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "templates.loyaltyProgramDetail.community", defaultMessage: "templates.loyaltyProgramDetail.community" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.sectionInfo }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "templates.loyaltyProgramDetail.description", defaultMessage: "templates.loyaltyProgramDetail.description" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.sectionTitle }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "templates.loyaltyProgramDetail.listTitle", defaultMessage: "templates.loyaltyProgramDetail.listTitle" }) })), (0, jsx_runtime_1.jsx)(PointsList_1.default, { className: classes.pointsSection }), prizes.length !== 0 && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.sectionTitle }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "templates.loyaltyProgramDetail.prizes", defaultMessage: "templates.loyaltyProgramDetail.prizes" }) }))), (0, jsx_runtime_1.jsx)(react_ui_1.InfiniteScroll, Object.assign({ dataLength: prizes.length, next: handleNext, hasMoreNext: Boolean(next), loaderNext: (0, jsx_runtime_1.jsx)(PrizeItemSkeleton_1.default, {}), endMessage: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: prizes.length !== 0 ? ((0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: classes.endMessage }, { children: [(0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "templates.loyaltyProgramDetail.content.end.message", defaultMessage: "templates.loyaltyProgramDetail.content.end.message" }), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ color: "secondary", onClick: handleScrollUp }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "templates.loyaltyProgramDetail.content.end.button", defaultMessage: "templates.loyaltyProgramDetail.content.end.button" }) }))] }))) : null }) }, { children: (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ container: true, width: "100%", spacing: !isMobile ? 3 : 0, direction: isMobile ? 'column' : 'row', className: classes.prizeSection }, { children: prizes.map((prize) => ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: { xs: 12, md: 6, lg: 4, xl: 3 } }, { children: (0, jsx_runtime_1.jsxs)(material_1.Card, Object.assign({ className: classes.card }, { children: [(0, jsx_runtime_1.jsx)(material_1.CardMedia, { component: "img", image: prize.image }), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.prizePoints }, { children: (0, jsx_runtime_1.jsx)(material_1.Chip, { className: points <= prize.points ? classes.notRequestable : null, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "templates.loyaltyProgramDetail.prize.points", defaultMessage: "templates.loyaltyProgramDetail.prize.points", values: { total: prize.points } }) }) })), (0, jsx_runtime_1.jsxs)(material_1.CardContent, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", className: classes.cardTitle }, { children: prize.title })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", className: classes.cardContent }, { children: prize.description }))] }), (0, jsx_runtime_1.jsxs)(material_1.CardActions, { children: [prize.link && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "medium", color: "secondary", href: prize.link, target: "_blank", className: classes.actionButton }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "templates.loyaltyProgramDetail.button.more", defaultMessage: "templates.loyaltyProgramDetail.button.more" }) }))), ((!prize.link && prize.active && points >= prize.points) || (prize.active && points >= prize.points)) && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: "outlined", className: classes.actionButton, disabled: points < prize.points, onClick: () => handleOpenAlert(prize.id) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "templates.loyaltyProgramDetail.button.request", defaultMessage: "templates.loyaltyProgramDetail.button.request" }) })))] })] })) }), prize.id))) })) })), open && ((0, jsx_runtime_1.jsx)(react_ui_1.ConfirmDialog, { open: open, title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "templates.loyaltyProgramDetail.dialog.msg", defaultMessage: "templates.loyaltyProgramDetail.dialog.msg" }), btnConfirm: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "templates.loyaltyProgramDetail.dialog.confirm", defaultMessage: "templates.loyaltyProgramDetail.dialog.confirm" }), onConfirm: () => requestPrize(prizeRequested), onClose: () => setOpen(false) }))] })));
188
188
  }
189
189
  exports.default = LoyaltyProgramDetail;
package/lib/cjs/components/LoyaltyProgramDetail/PointsList.js CHANGED
@@ -25,7 +25,7 @@ const classes = {
25
25
  };
26
26
  function PointElement({ message, points }) {
27
27
  if (points > 0) {
28
- return ((0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ item: true, xs: 12, sm: 12, md: 6 }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ component: "div", className: classes.element }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: message }), (0, jsx_runtime_1.jsxs)(material_1.Typography, { children: ["+", (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "templates.loyaltyProgramDetail.points", defaultMessage: "templates.loyaltyProgramDetail.points", values: { total: points } })] })] })), (0, jsx_runtime_1.jsx)(material_1.Divider, {})] })));
28
+ return ((0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ size: { xs: 12, md: 6 } }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ component: "div", className: classes.element }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: message }), (0, jsx_runtime_1.jsxs)(material_1.Typography, { children: ["+", (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "templates.loyaltyProgramDetail.points", defaultMessage: "templates.loyaltyProgramDetail.points", values: { total: points } })] })] })), (0, jsx_runtime_1.jsx)(material_1.Divider, {})] })));
29
29
  }
30
30
  }
31
31
  exports.PointElement = PointElement;
@@ -51,6 +51,6 @@ function PointsList(props) {
51
51
  /**
52
52
  * Renders the component (if not hidden by autoHide prop)
53
53
  */
54
- return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), container: true, spacing: 2 }, rest, { children: [preferences[react_core_1.SCPreferences.CONFIGURATIONS_POST_TYPE_ENABLED].value && ((0, jsx_runtime_1.jsx)(PointElement, { message: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "templates.loyaltyProgramDetail.points.post", defaultMessage: "templates.loyaltyProgramDetail.points.post" }), points: _preferences[react_core_1.SCPreferences.POINTS_MAKE_POST] })), preferences[react_core_1.SCPreferences.CONFIGURATIONS_DISCUSSION_TYPE_ENABLED].value && ((0, jsx_runtime_1.jsx)(PointElement, { message: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "templates.loyaltyProgramDetail.points.discussion", defaultMessage: "templates.loyaltyProgramDetail.points.discussion" }), points: _preferences[react_core_1.SCPreferences.POINTS_MAKE_DISCUSSION] })), (0, jsx_runtime_1.jsx)(PointElement, { message: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "templates.loyaltyProgramDetail.points.comment", defaultMessage: "templates.loyaltyProgramDetail.points.comment" }), points: _preferences[react_core_1.SCPreferences.POINTS_MAKE_COMMENT] }), (0, jsx_runtime_1.jsx)(PointElement, { message: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "templates.loyaltyProgramDetail.points.appreciation", defaultMessage: "templates.loyaltyProgramDetail.points.appreciation" }), points: _preferences[react_core_1.SCPreferences.POINTS_RECEIVE_VOTE] }), (0, jsx_runtime_1.jsx)(PointElement, { message: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "templates.loyaltyProgramDetail.points.follower", defaultMessage: "templates.loyaltyProgramDetail.points.follower" }), points: _preferences[react_core_1.SCPreferences.POINTS_CONNECTION_OR_FOLLOWER] }), (0, jsx_runtime_1.jsx)(PointElement, { message: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "templates.loyaltyProgramDetail.points.share", defaultMessage: "templates.loyaltyProgramDetail.points.share" }), points: _preferences[react_core_1.SCPreferences.POINTS_SOCIAL_SHARE] }), (0, jsx_runtime_1.jsx)(PointElement, { message: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "templates.loyaltyProgramDetail.points.app", defaultMessage: "templates.loyaltyProgramDetail.points.app" }), points: _preferences[react_core_1.SCPreferences.POINTS_APP_USED] }), (0, jsx_runtime_1.jsx)(PointElement, { message: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "templates.loyaltyProgramDetail.points.visit", defaultMessage: "templates.loyaltyProgramDetail.points.visit" }), points: _preferences[react_core_1.SCPreferences.POINTS_DAILY_VISIT] })] })));
54
+ return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), container: true, width: "100%", spacing: 2 }, rest, { children: [preferences[react_core_1.SCPreferences.CONFIGURATIONS_POST_TYPE_ENABLED].value && ((0, jsx_runtime_1.jsx)(PointElement, { message: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "templates.loyaltyProgramDetail.points.post", defaultMessage: "templates.loyaltyProgramDetail.points.post" }), points: _preferences[react_core_1.SCPreferences.POINTS_MAKE_POST] })), preferences[react_core_1.SCPreferences.CONFIGURATIONS_DISCUSSION_TYPE_ENABLED].value && ((0, jsx_runtime_1.jsx)(PointElement, { message: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "templates.loyaltyProgramDetail.points.discussion", defaultMessage: "templates.loyaltyProgramDetail.points.discussion" }), points: _preferences[react_core_1.SCPreferences.POINTS_MAKE_DISCUSSION] })), (0, jsx_runtime_1.jsx)(PointElement, { message: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "templates.loyaltyProgramDetail.points.comment", defaultMessage: "templates.loyaltyProgramDetail.points.comment" }), points: _preferences[react_core_1.SCPreferences.POINTS_MAKE_COMMENT] }), (0, jsx_runtime_1.jsx)(PointElement, { message: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "templates.loyaltyProgramDetail.points.appreciation", defaultMessage: "templates.loyaltyProgramDetail.points.appreciation" }), points: _preferences[react_core_1.SCPreferences.POINTS_RECEIVE_VOTE] }), (0, jsx_runtime_1.jsx)(PointElement, { message: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "templates.loyaltyProgramDetail.points.follower", defaultMessage: "templates.loyaltyProgramDetail.points.follower" }), points: _preferences[react_core_1.SCPreferences.POINTS_CONNECTION_OR_FOLLOWER] }), (0, jsx_runtime_1.jsx)(PointElement, { message: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "templates.loyaltyProgramDetail.points.share", defaultMessage: "templates.loyaltyProgramDetail.points.share" }), points: _preferences[react_core_1.SCPreferences.POINTS_SOCIAL_SHARE] }), (0, jsx_runtime_1.jsx)(PointElement, { message: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "templates.loyaltyProgramDetail.points.app", defaultMessage: "templates.loyaltyProgramDetail.points.app" }), points: _preferences[react_core_1.SCPreferences.POINTS_APP_USED] }), (0, jsx_runtime_1.jsx)(PointElement, { message: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "templates.loyaltyProgramDetail.points.visit", defaultMessage: "templates.loyaltyProgramDetail.points.visit" }), points: _preferences[react_core_1.SCPreferences.POINTS_DAILY_VISIT] })] })));
55
55
  }
56
56
  exports.default = PointsList;
package/lib/cjs/components/LoyaltyProgramDetail/PrizeItemSkeleton.js CHANGED
@@ -30,6 +30,6 @@ const Root = (0, material_1.styled)(react_ui_1.Widget, {
30
30
  *
31
31
  */
32
32
  function PrizeItemSkeleton() {
33
- return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: classes.root }, { children: [(0, jsx_runtime_1.jsx)(material_1.CardMedia, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "rectangular", width: "100%", height: 137 }) }), (0, jsx_runtime_1.jsx)(material_1.CardContent, { children: (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: classes.content }, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 20, width: "80%", variant: "text" }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 10, width: "70%", variant: "text", style: { marginTop: 8 } })] })) }), (0, jsx_runtime_1.jsxs)(material_1.CardActions, Object.assign({ className: classes.actions }, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ disabled: true, variant: 'outlined', size: 'small' }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 10, width: 50, variant: "text" }) })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ disabled: true, variant: 'text', size: 'small' }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 20, width: 70, variant: "text" }) }))] }))] })));
33
+ return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: classes.root }, { children: [(0, jsx_runtime_1.jsx)(material_1.CardMedia, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "rectangular", width: "100%", height: 137 }) }), (0, jsx_runtime_1.jsx)(material_1.CardContent, { children: (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: classes.content }, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 20, width: "80%", variant: "text" }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 10, width: "70%", variant: "text", style: { marginTop: 8 } })] })) }), (0, jsx_runtime_1.jsxs)(material_1.CardActions, Object.assign({ className: classes.actions }, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ disabled: true, variant: "outlined", size: "small" }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 10, width: 50, variant: "text" }) })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ disabled: true, variant: "text", size: "small" }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 20, width: 70, variant: "text" }) }))] }))] })));
34
34
  }
35
35
  exports.default = PrizeItemSkeleton;
package/lib/cjs/components/LoyaltyProgramDetail/Skeleton.js CHANGED
@@ -45,6 +45,6 @@ const Root = (0, material_1.styled)(material_1.Box, {
45
45
  function LoyaltyProgramDetailSkeleton() {
46
46
  const theme = (0, material_1.useTheme)();
47
47
  const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
48
- return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: classes.root }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: classes.title, component: 'div' }, { children: [!isMobile && (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 30, width: 140, variant: "text" }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "circular", width: 172, height: 30, className: classes.chip })] })), (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: classes.sectionTitle }, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 20, width: '50%', variant: "text" }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 17, width: '80%', variant: "text", className: classes.subTitle })] })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.sectionTitle }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 20, width: 146 }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ container: true, spacing: 2, className: classes.pointsList }, { children: [...Array(8)].map((prize, index) => ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, sm: 12, md: 6 }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 15, width: "100%" }) }), index))) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.sectionTitle }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 20, width: 140, variant: "text" }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ container: true, spacing: isMobile ? 3 : 6 }, { children: [...Array(6)].map((prize, index) => ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, sm: 12, md: 6, lg: 4 }, { children: (0, jsx_runtime_1.jsx)(PrizeItemSkeleton_1.default, {}) }), index))) }))] })));
48
+ return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: classes.root }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: classes.title, component: "div" }, { children: [!isMobile && (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 30, width: 140, variant: "text" }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "circular", width: 172, height: 30, className: classes.chip })] })), (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: classes.sectionTitle }, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 20, width: "50%", variant: "text" }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 17, width: "80%", variant: "text", className: classes.subTitle })] })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.sectionTitle }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 20, width: 146 }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ container: true, width: "100%", spacing: 2, className: classes.pointsList }, { children: [...Array(8)].map((_prize, index) => ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: { xs: 12, md: 6 } }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 15, width: "100%" }) }), index))) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.sectionTitle }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 20, width: 140, variant: "text" }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ container: true, width: "100%", spacing: isMobile ? 3 : 6 }, { children: [...Array(6)].map((_prize, index) => ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: { xs: 12, md: 6, lg: 4 } }, { children: (0, jsx_runtime_1.jsx)(PrizeItemSkeleton_1.default, {}) }), index))) }))] })));
49
49
  }
50
50
  exports.default = LoyaltyProgramDetailSkeleton;
package/lib/cjs/components/MainFeed/MainFeed.js CHANGED
@@ -89,7 +89,7 @@ function MainFeed(inProps) {
89
89
  const isAdvertisingCustomAdvOnlyForAnonUsersEnabled = (0, react_core_1.useSCPreferenceEnabled)(react_core_1.SCPreferences.ADVERTISING_CUSTOM_ADV_ONLY_FOR_ANONYMOUS_USERS_ENABLED);
90
90
  const { enqueueSnackbar } = (0, notistack_1.useSnackbar)();
91
91
  // REF
92
- const feedRef = (0, react_1.useRef)();
92
+ const feedRef = (0, react_1.useRef)(null);
93
93
  /**
94
94
  * Render advertising above the feed
95
95
  */
package/lib/cjs/components/UserFeed/UserFeed.js CHANGED
@@ -89,7 +89,7 @@ function UserFeed(inProps) {
89
89
  // Hooks
90
90
  const { scUser } = (0, react_core_1.useSCFetchUser)({ id: userId, user });
91
91
  // REF
92
- const feedRef = (0, react_1.useRef)();
92
+ const feedRef = (0, react_1.useRef)(null);
93
93
  // HANDLERS
94
94
  const handleComposerSuccess = (feedObject) => {
95
95
  const messageId = feedObject.scheduled_at ? 'ui.composer.scheduled.success' : 'ui.inlineComposerWidget.success';
package/lib/cjs/components/UserProfile/UserProfile.js CHANGED
@@ -254,7 +254,7 @@ function UserProfile(inProps) {
254
254
  year: 'numeric',
255
255
  month: 'long'
256
256
  })
257
- } }) }))), scUser.location && ((0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: classes.info }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, { children: "add_location_alt" }), " ", scUser.location] }))), taggingEnabled && ((0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ direction: "row", spacing: 2, className: classes.tags }, { children: scUser.tags
257
+ } }) }))), scUser.location && ((0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: classes.info }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, { children: "add_location_alt" }), " ", scUser.location] }))), taggingEnabled && ((0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ direction: "row", className: classes.tags }, { children: scUser.tags
258
258
  .filter((t) => t.visible)
259
259
  .map((tag) => ((0, jsx_runtime_1.jsx)(react_ui_1.TagChip, { tag: tag, clickable: false, disposable: false, showDescription: true }, tag.id))) }), `tags_${scUser.id}`)), (0, jsx_runtime_1.jsx)(UserFeed_1.default, Object.assign({ className: classes.feed, user: scUser, widgets: _widgets, FeedObjectProps: FeedObjectProps, FeedSidebarProps: FeedSidebarProps }, UserFeedProps), `feed_${scUser.id}`)] })) })) }))] })));
260
260
  }
package/lib/esm/components/CategoryFeed/CategoryFeed.js CHANGED
@@ -73,7 +73,7 @@ export default function CategoryFeed(inProps) {
73
73
  const scUserContext = useSCUser();
74
74
  const { enqueueSnackbar } = useSnackbar();
75
75
  // REF
76
- const feedRef = useRef();
76
+ const feedRef = useRef(null);
77
77
  // Hooks
78
78
  const { scCategory } = useSCFetchCategory({ id: categoryId, category });
79
79
  const isAdvertisingCustomAdvEnabled = useSCPreferenceEnabled(SCPreferences.ADVERTISING_CUSTOM_ADV_ENABLED);
package/lib/esm/components/Course/Course.d.ts CHANGED
@@ -23,4 +23,4 @@ export interface CourseProps {
23
23
  courseId?: number;
24
24
  viewDashboard?: boolean;
25
25
  }
26
- export default function Course(inProps: CourseProps): JSX.Element;
26
+ export default function Course(inProps: CourseProps): import("react/jsx-runtime").JSX.Element;
package/lib/esm/components/EventFeed/EventFeed.js CHANGED
@@ -89,7 +89,7 @@ export default function EventFeed(inProps) {
89
89
  const { enqueueSnackbar } = useSnackbar();
90
90
  const { scEvent } = useSCFetchEvent({ id: eventId, event });
91
91
  // REF
92
- const feedRef = useRef();
92
+ const feedRef = useRef(null);
93
93
  // CONST
94
94
  const authUserId = scUserContext.user ? scUserContext.user.id : null;
95
95
  useEffect(() => {
package/lib/esm/components/ExploreFeed/ExploreFeed.js CHANGED
@@ -86,7 +86,7 @@ export default function ExploreFeed(inProps) {
86
86
  const isAdvertisingCustomAdvOnlyForAnonUsersEnabled = useSCPreferenceEnabled(SCPreferences.ADVERTISING_CUSTOM_ADV_ONLY_FOR_ANONYMOUS_USERS_ENABLED);
87
87
  const { enqueueSnackbar } = useSnackbar();
88
88
  // REF
89
- const feedRef = useRef();
89
+ const feedRef = useRef(null);
90
90
  /**
91
91
  * Render advertising above the feed
92
92
  */
package/lib/esm/components/FeedObjectDetail/FeedObjectDetail.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { useMemo, useState } from 'react';
3
- import { Box, Grid, Hidden, styled } from '@mui/material';
3
+ import { Box, Grid, styled } from '@mui/material';
4
4
  import { CommentsFeedObject, CustomAdv, FeedObject, RelatedFeedObjectsWidget, SCFeedObjectTemplateType, StickyBox } from '@selfcommunity/react-ui';
5
5
  import FeedObjectDetailSkeleton from './Skeleton';
6
6
  import { useThemeProps } from '@mui/system';
@@ -95,5 +95,5 @@ export default function FeedObjectDetail(inProps) {
95
95
  if (!obj) {
96
96
  return _jsx(FeedObjectDetailSkeleton, {});
97
97
  }
98
- return (_jsx(Root, Object.assign({ id: id, className: classNames(classes.root, className) }, { children: _jsxs(Grid, Object.assign({ container: true, spacing: 2 }, { children: [_jsxs(Grid, Object.assign({ item: true, xs: 12, md: 7 }, { children: [_jsx(FeedObject, Object.assign({}, FeedObjectProps, { feedObject: obj, template: SCFeedObjectTemplateType.DETAIL, onReply: handleReply })), renderAdvertising(), commentsEnabled && (_jsx(CommentsFeedObject, Object.assign({ showTitle: true, feedObject: obj, comments: comments }, CommentsFeedObjectProps), `comments_${obj.id}`))] })), _jsx(Grid, Object.assign({ item: true, xs: 12, md: 5 }, { children: _jsx(Hidden, Object.assign({ mdDown: true }, { children: _jsx(StickyBox, Object.assign({}, FeedSidebarProps, { children: _jsx(RelatedFeedObjectsWidget, Object.assign({ feedObject: obj, feedObjectId: obj.id }, RelatedFeedObjectProps), `related_${obj.id}`) })) })) }))] })) })));
98
+ return (_jsx(Root, Object.assign({ id: id, className: classNames(classes.root, className) }, { children: _jsxs(Grid, Object.assign({ container: true, width: "100%", spacing: 2 }, { children: [_jsxs(Grid, Object.assign({ size: { xs: 12, md: 7 } }, { children: [_jsx(FeedObject, Object.assign({}, FeedObjectProps, { feedObject: obj, template: SCFeedObjectTemplateType.DETAIL, onReply: handleReply })), renderAdvertising(), commentsEnabled && (_jsx(CommentsFeedObject, Object.assign({ showTitle: true, feedObject: obj, comments: comments }, CommentsFeedObjectProps), `comments_${obj.id}`))] })), _jsx(Grid, Object.assign({ size: { xs: 12, md: 5 } }, { children: _jsx(Box, Object.assign({ sx: { display: { xs: 'none', md: 'block' } } }, { children: _jsx(StickyBox, Object.assign({}, FeedSidebarProps, { children: _jsx(RelatedFeedObjectsWidget, Object.assign({ feedObject: obj, feedObjectId: obj.id }, RelatedFeedObjectProps), `related_${obj.id}`) })) })) }))] })) })));
99
99
  }
package/lib/esm/components/FeedObjectDetail/Skeleton.js CHANGED
@@ -31,5 +31,5 @@ const Root = styled(Box, {
31
31
  */
32
32
  export default function FeedObjectDetailSkeleton(props) {
33
33
  const { FeedObjectSkeletonProps = {}, CommentsFeedObjectSkeletonProps = {}, RelatedFeedObjectsSkeletonProps = {} } = props;
34
- return (_jsx(Root, Object.assign({ className: classes.root }, { children: _jsxs(Grid, Object.assign({ container: true, spacing: 2 }, { children: [_jsxs(Grid, Object.assign({ item: true, xs: 12, md: 7 }, { children: [_jsx(FeedObjectSkeleton, Object.assign({ template: SCFeedObjectTemplateType.DETAIL }, FeedObjectSkeletonProps)), _jsx(CommentsFeedObjectSkeleton, Object.assign({ count: 4 }, CommentsFeedObjectSkeletonProps))] })), _jsx(Grid, Object.assign({ item: true, xs: 12, md: 5 }, { children: _jsx(RelatedFeedObjectsWidgetSkeleton, Object.assign({}, RelatedFeedObjectsSkeletonProps)) }))] })) })));
34
+ return (_jsx(Root, Object.assign({ className: classes.root }, { children: _jsxs(Grid, Object.assign({ container: true, width: "100%", spacing: 2 }, { children: [_jsxs(Grid, Object.assign({ size: { xs: 12, md: 7 } }, { children: [_jsx(FeedObjectSkeleton, Object.assign({ template: SCFeedObjectTemplateType.DETAIL }, FeedObjectSkeletonProps)), _jsx(CommentsFeedObjectSkeleton, Object.assign({ count: 4 }, CommentsFeedObjectSkeletonProps))] })), _jsx(Grid, Object.assign({ size: { xs: 12, md: 5 } }, { children: _jsx(RelatedFeedObjectsWidgetSkeleton, Object.assign({}, RelatedFeedObjectsSkeletonProps)) }))] })) })));
35
35
  }
package/lib/esm/components/GroupFeed/GroupFeed.js CHANGED
@@ -75,7 +75,7 @@ export default function GroupFeed(inProps) {
75
75
  const { enqueueSnackbar } = useSnackbar();
76
76
  const { scGroup } = useSCFetchGroup({ id: groupId, group });
77
77
  // REF
78
- const feedRef = useRef();
78
+ const feedRef = useRef(null);
79
79
  // CONST
80
80
  const authUserId = scUserContext.user ? scUserContext.user.id : null;
81
81
  useEffect(() => {
package/lib/esm/components/Lesson/Lesson.js CHANGED
@@ -2,7 +2,7 @@ import { __rest } from "tslib";
2
2
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
3
  import { Fragment, useCallback, useEffect, useMemo, useState } from 'react';
4
4
  import { useThemeProps } from '@mui/system';
5
- import { Box, Icon, IconButton, Typography, useMediaQuery, useTheme, Alert, styled } from '@mui/material';
5
+ import { Box, Icon, IconButton, Typography, useMediaQuery, useTheme, Alert, styled, Button } from '@mui/material';
6
6
  import { PREFIX } from './constants';
7
7
  import { SCCourseJoinStatusType, SCCourseLessonCompletionStatusType } from '@selfcommunity/types';
8
8
  import { SCRoutes, useSCFetchCourse, useSCFetchLesson, useSCRouting, Link } from '@selfcommunity/react-core';
@@ -10,7 +10,6 @@ import classNames from 'classnames';
10
10
  import { CourseCompletedDialog, HiddenPlaceholder, LessonAppbar, LessonDrawer, LessonObject, SCLessonActionsType } from '@selfcommunity/react-ui';
11
11
  import { CourseInfoViewType, CourseService } from '@selfcommunity/api-services';
12
12
  import { FormattedMessage } from 'react-intl';
13
- import { LoadingButton } from '@mui/lab';
14
13
  import { useSnackbar } from 'notistack';
15
14
  import { getUrlLesson } from '@selfcommunity/react-ui';
16
15
  const classes = {
@@ -191,7 +190,7 @@ export default function Lesson(inProps) {
191
190
  return _jsx(HiddenPlaceholder, {});
192
191
  }
193
192
  return (_jsxs(Fragment, { children: [_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [_jsx(LessonAppbar, Object.assign({ showComments: scLesson.comments_enabled, editMode: editMode, activePanel: activePanel, title: scCourse.name, handleOpen: handleOpenDrawer, onSave: handleLessonUpdate, updating: updating }, LessonAppbarProps)), _jsxs(Container, Object.assign({ open: Boolean(activePanel) || editMode, className: classes.containerRoot }, { children: [previewMode && (_jsx(Alert, Object.assign({ severity: "info", className: classes.previewInfo }, { children: _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "templates.lesson.previewMode", defaultMessage: "templates.lesson.previewMode", values: {
194
- link: (...chunks) => (_jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.COURSE_LESSON_EDIT_ROUTE_NAME, getUrlLesson(scCourse, scLesson)) }, { children: chunks }))),
195
- linkBack: (...chunks) => _jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.COURSE_DASHBOARD_ROUTE_NAME, scCourse) }, { children: chunks }))
196
- } }) })) }))), _jsx(Box, Object.assign({ className: classes.navigation }, { children: _jsx(Typography, Object.assign({ variant: "body2", color: "text.secondary" }, { children: _jsx(FormattedMessage, { id: "templates.lesson.number", defaultMessage: "templates.lesson.number", values: { from: currentLessonIndex + 1, to: availableLessons.length } }) })) })), _jsxs(Box, Object.assign({ className: classes.navigationTitle }, { children: [_jsx(Typography, Object.assign({ variant: "h5" }, { children: scLesson.name })), _jsxs(Box, { children: [_jsx(IconButton, Object.assign({ onClick: handlePrev, disabled: isPrevDisabled }, { children: _jsx(Icon, { children: "arrow_back" }) })), _jsx(IconButton, Object.assign({ onClick: handleNext, disabled: isNextDisabled }, { children: _jsx(Icon, { children: "arrow_next" }) }))] })] })), _jsx(LessonObject, { course: scCourse, lesson: scLesson, editMode: editMode, onContentChange: handleLessonContentEdit, onMediaChange: handleLessonMediaEdit }), !isCourseAdmin && !editMode && !previewMode && (_jsx(LoadingButton, Object.assign({ className: classes.button, loading: loading, size: "small", variant: completed ? 'outlined' : 'contained', startIcon: !completed && _jsx(Icon, { children: "arrow_next" }), endIcon: completed && _jsx(Icon, { children: "circle_checked" }), onClick: toggleLessonCompletion }, { children: completed ? (_jsx(FormattedMessage, { id: "templates.lesson.button.completed", defaultMessage: "templates.lesson.button.completed" })) : (_jsx(FormattedMessage, { id: "templates.lesson.button.complete", defaultMessage: "templates.lesson.button.complete" })) })))] })), _jsx(LessonDrawer, Object.assign({ course: scCourse, lesson: scLesson, editMode: isMobile ? activePanel === SCLessonActionsType.SETTINGS : editMode, previewMode: previewMode, activePanel: activePanel, handleClose: handleCloseDrawer, handleChangeLesson: handleChangeLesson, LessonEditFormProps: { lesson: scLesson, onSave: handleLessonUpdate, updating: updating, onSettingsChange: handleSettingsChange } }, LessonDrawerProps))] })), openDialog && _jsx(CourseCompletedDialog, { course: scCourse, onClose: handleCloseDialog })] }));
193
+ link: (chunks) => (_jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.COURSE_LESSON_EDIT_ROUTE_NAME, getUrlLesson(scCourse, scLesson)) }, { children: chunks }), "templates.lesson.previewMode.link")),
194
+ linkBack: (chunks) => (_jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.COURSE_DASHBOARD_ROUTE_NAME, scCourse) }, { children: chunks }), "templates.lesson.previewMode.linkBack"))
195
+ } }) })) }))), _jsx(Box, Object.assign({ className: classes.navigation }, { children: _jsx(Typography, Object.assign({ variant: "body2", color: "text.secondary" }, { children: _jsx(FormattedMessage, { id: "templates.lesson.number", defaultMessage: "templates.lesson.number", values: { from: currentLessonIndex + 1, to: availableLessons.length } }) })) })), _jsxs(Box, Object.assign({ className: classes.navigationTitle }, { children: [_jsx(Typography, Object.assign({ variant: "h5" }, { children: scLesson.name })), _jsxs(Box, { children: [_jsx(IconButton, Object.assign({ onClick: handlePrev, disabled: isPrevDisabled }, { children: _jsx(Icon, { children: "arrow_back" }) })), _jsx(IconButton, Object.assign({ onClick: handleNext, disabled: isNextDisabled }, { children: _jsx(Icon, { children: "arrow_next" }) }))] })] })), _jsx(LessonObject, { course: scCourse, lesson: scLesson, editMode: editMode, onContentChange: handleLessonContentEdit, onMediaChange: handleLessonMediaEdit }), !isCourseAdmin && !editMode && !previewMode && (_jsx(Button, Object.assign({ className: classes.button, loading: loading, size: "small", variant: completed ? 'outlined' : 'contained', startIcon: !completed && _jsx(Icon, { children: "arrow_next" }), endIcon: completed && _jsx(Icon, { children: "circle_checked" }), onClick: toggleLessonCompletion }, { children: completed ? (_jsx(FormattedMessage, { id: "templates.lesson.button.completed", defaultMessage: "templates.lesson.button.completed" })) : (_jsx(FormattedMessage, { id: "templates.lesson.button.complete", defaultMessage: "templates.lesson.button.complete" })) })))] })), _jsx(LessonDrawer, Object.assign({ course: scCourse, lesson: scLesson, editMode: isMobile ? activePanel === SCLessonActionsType.SETTINGS : editMode, previewMode: previewMode, activePanel: activePanel, handleClose: handleCloseDrawer, handleChangeLesson: handleChangeLesson, LessonEditFormProps: { lesson: scLesson, onSave: handleLessonUpdate, updating: updating, onSettingsChange: handleSettingsChange } }, LessonDrawerProps))] })), openDialog && _jsx(CourseCompletedDialog, { course: scCourse, onClose: handleCloseDialog })] }));
197
196
  }
package/lib/esm/components/LoyaltyProgramDetail/LoyaltyProgramDetail.js CHANGED
@@ -115,7 +115,7 @@ export default function LoyaltyProgramDetail(inProps) {
115
115
  }
116
116
  });
117
117
  })
118
- .catch((error) => {
118
+ .catch(() => {
119
119
  setOpen(false);
120
120
  let _snackBar = enqueueSnackbar(_jsx(FormattedMessage, { id: "templates.loyaltyProgramDetail.prize.request.error", defaultMessage: "templates.loyaltyProgramDetail.prize.request.error" }), {
121
121
  variant: 'error',
@@ -182,5 +182,5 @@ export default function LoyaltyProgramDetail(inProps) {
182
182
  if (loading) {
183
183
  return _jsx(Skeleton, {});
184
184
  }
185
- return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [points !== 0 && (_jsxs(Typography, Object.assign({ className: classes.title, variant: "h5" }, { children: [!isMobile && _jsx(FormattedMessage, { id: "ui.loyaltyProgramWidget.title", defaultMessage: "ui.loyaltyProgramWidget.title" }), _jsx(Chip, { className: classes.userPoints, component: "span", label: _jsx(FormattedMessage, { id: "templates.loyaltyProgramDetail.userPoints", defaultMessage: "templates.loyaltyProgramDetail.userPoints", values: { total: points } }) })] }))), _jsx(Typography, Object.assign({ className: classes.sectionTitle }, { children: _jsx(FormattedMessage, { id: "templates.loyaltyProgramDetail.community", defaultMessage: "templates.loyaltyProgramDetail.community" }) })), _jsx(Typography, Object.assign({ className: classes.sectionInfo }, { children: _jsx(FormattedMessage, { id: "templates.loyaltyProgramDetail.description", defaultMessage: "templates.loyaltyProgramDetail.description" }) })), _jsx(Typography, Object.assign({ className: classes.sectionTitle }, { children: _jsx(FormattedMessage, { id: "templates.loyaltyProgramDetail.listTitle", defaultMessage: "templates.loyaltyProgramDetail.listTitle" }) })), _jsx(PointsList, { className: classes.pointsSection }), prizes.length !== 0 && (_jsx(Typography, Object.assign({ className: classes.sectionTitle }, { children: _jsx(FormattedMessage, { id: "templates.loyaltyProgramDetail.prizes", defaultMessage: "templates.loyaltyProgramDetail.prizes" }) }))), _jsx(InfiniteScroll, Object.assign({ dataLength: prizes.length, next: handleNext, hasMoreNext: Boolean(next), loaderNext: _jsx(PrizeItemSkeleton, {}), endMessage: _jsx(_Fragment, { children: prizes.length !== 0 ? (_jsxs(Typography, Object.assign({ className: classes.endMessage }, { children: [_jsx(FormattedMessage, { id: "templates.loyaltyProgramDetail.content.end.message", defaultMessage: "templates.loyaltyProgramDetail.content.end.message" }), _jsx(Button, Object.assign({ color: 'secondary', onClick: handleScrollUp }, { children: _jsx(FormattedMessage, { id: "templates.loyaltyProgramDetail.content.end.button", defaultMessage: "templates.loyaltyProgramDetail.content.end.button" }) }))] }))) : null }) }, { children: _jsx(Grid, Object.assign({ container: true, spacing: !isMobile ? 3 : 0, direction: isMobile ? 'column' : 'row', className: classes.prizeSection }, { children: prizes.map((prize) => (_jsx(Grid, Object.assign({ item: true, xs: 12, sm: 12, md: 6, lg: 4, xl: 3 }, { children: _jsxs(Card, Object.assign({ className: classes.card }, { children: [_jsx(CardMedia, { component: "img", image: prize.image }), _jsx(Box, Object.assign({ className: classes.prizePoints }, { children: _jsx(Chip, { className: points <= prize.points ? classes.notRequestable : null, label: _jsx(FormattedMessage, { id: "templates.loyaltyProgramDetail.prize.points", defaultMessage: "templates.loyaltyProgramDetail.prize.points", values: { total: prize.points } }) }) })), _jsxs(CardContent, { children: [_jsx(Typography, Object.assign({ variant: "body1", className: classes.cardTitle }, { children: prize.title })), _jsx(Typography, Object.assign({ variant: "body2", className: classes.cardContent }, { children: prize.description }))] }), _jsxs(CardActions, { children: [prize.link && (_jsx(Button, Object.assign({ size: "medium", color: "secondary", href: prize.link, target: "_blank", className: classes.actionButton }, { children: _jsx(FormattedMessage, { id: "templates.loyaltyProgramDetail.button.more", defaultMessage: "templates.loyaltyProgramDetail.button.more" }) }))), ((!prize.link && prize.active && points >= prize.points) || (prize.active && points >= prize.points)) && (_jsx(Button, Object.assign({ size: "small", variant: "outlined", className: classes.actionButton, disabled: points < prize.points, onClick: () => handleOpenAlert(prize.id) }, { children: _jsx(FormattedMessage, { id: "templates.loyaltyProgramDetail.button.request", defaultMessage: "templates.loyaltyProgramDetail.button.request" }) })))] })] })) }), prize.id))) })) })), open && (_jsx(ConfirmDialog, { open: open, title: _jsx(FormattedMessage, { id: "templates.loyaltyProgramDetail.dialog.msg", defaultMessage: "templates.loyaltyProgramDetail.dialog.msg" }), btnConfirm: _jsx(FormattedMessage, { id: "templates.loyaltyProgramDetail.dialog.confirm", defaultMessage: "templates.loyaltyProgramDetail.dialog.confirm" }), onConfirm: () => requestPrize(prizeRequested), onClose: () => setOpen(false) }))] })));
185
+ return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [points !== 0 && (_jsxs(Typography, Object.assign({ className: classes.title, variant: "h5" }, { children: [!isMobile && _jsx(FormattedMessage, { id: "ui.loyaltyProgramWidget.title", defaultMessage: "ui.loyaltyProgramWidget.title" }), _jsx(Chip, { className: classes.userPoints, component: "span", label: _jsx(FormattedMessage, { id: "templates.loyaltyProgramDetail.userPoints", defaultMessage: "templates.loyaltyProgramDetail.userPoints", values: { total: points } }) })] }))), _jsx(Typography, Object.assign({ className: classes.sectionTitle }, { children: _jsx(FormattedMessage, { id: "templates.loyaltyProgramDetail.community", defaultMessage: "templates.loyaltyProgramDetail.community" }) })), _jsx(Typography, Object.assign({ className: classes.sectionInfo }, { children: _jsx(FormattedMessage, { id: "templates.loyaltyProgramDetail.description", defaultMessage: "templates.loyaltyProgramDetail.description" }) })), _jsx(Typography, Object.assign({ className: classes.sectionTitle }, { children: _jsx(FormattedMessage, { id: "templates.loyaltyProgramDetail.listTitle", defaultMessage: "templates.loyaltyProgramDetail.listTitle" }) })), _jsx(PointsList, { className: classes.pointsSection }), prizes.length !== 0 && (_jsx(Typography, Object.assign({ className: classes.sectionTitle }, { children: _jsx(FormattedMessage, { id: "templates.loyaltyProgramDetail.prizes", defaultMessage: "templates.loyaltyProgramDetail.prizes" }) }))), _jsx(InfiniteScroll, Object.assign({ dataLength: prizes.length, next: handleNext, hasMoreNext: Boolean(next), loaderNext: _jsx(PrizeItemSkeleton, {}), endMessage: _jsx(_Fragment, { children: prizes.length !== 0 ? (_jsxs(Typography, Object.assign({ className: classes.endMessage }, { children: [_jsx(FormattedMessage, { id: "templates.loyaltyProgramDetail.content.end.message", defaultMessage: "templates.loyaltyProgramDetail.content.end.message" }), _jsx(Button, Object.assign({ color: "secondary", onClick: handleScrollUp }, { children: _jsx(FormattedMessage, { id: "templates.loyaltyProgramDetail.content.end.button", defaultMessage: "templates.loyaltyProgramDetail.content.end.button" }) }))] }))) : null }) }, { children: _jsx(Grid, Object.assign({ container: true, width: "100%", spacing: !isMobile ? 3 : 0, direction: isMobile ? 'column' : 'row', className: classes.prizeSection }, { children: prizes.map((prize) => (_jsx(Grid, Object.assign({ size: { xs: 12, md: 6, lg: 4, xl: 3 } }, { children: _jsxs(Card, Object.assign({ className: classes.card }, { children: [_jsx(CardMedia, { component: "img", image: prize.image }), _jsx(Box, Object.assign({ className: classes.prizePoints }, { children: _jsx(Chip, { className: points <= prize.points ? classes.notRequestable : null, label: _jsx(FormattedMessage, { id: "templates.loyaltyProgramDetail.prize.points", defaultMessage: "templates.loyaltyProgramDetail.prize.points", values: { total: prize.points } }) }) })), _jsxs(CardContent, { children: [_jsx(Typography, Object.assign({ variant: "body1", className: classes.cardTitle }, { children: prize.title })), _jsx(Typography, Object.assign({ variant: "body2", className: classes.cardContent }, { children: prize.description }))] }), _jsxs(CardActions, { children: [prize.link && (_jsx(Button, Object.assign({ size: "medium", color: "secondary", href: prize.link, target: "_blank", className: classes.actionButton }, { children: _jsx(FormattedMessage, { id: "templates.loyaltyProgramDetail.button.more", defaultMessage: "templates.loyaltyProgramDetail.button.more" }) }))), ((!prize.link && prize.active && points >= prize.points) || (prize.active && points >= prize.points)) && (_jsx(Button, Object.assign({ size: "small", variant: "outlined", className: classes.actionButton, disabled: points < prize.points, onClick: () => handleOpenAlert(prize.id) }, { children: _jsx(FormattedMessage, { id: "templates.loyaltyProgramDetail.button.request", defaultMessage: "templates.loyaltyProgramDetail.button.request" }) })))] })] })) }), prize.id))) })) })), open && (_jsx(ConfirmDialog, { open: open, title: _jsx(FormattedMessage, { id: "templates.loyaltyProgramDetail.dialog.msg", defaultMessage: "templates.loyaltyProgramDetail.dialog.msg" }), btnConfirm: _jsx(FormattedMessage, { id: "templates.loyaltyProgramDetail.dialog.confirm", defaultMessage: "templates.loyaltyProgramDetail.dialog.confirm" }), onConfirm: () => requestPrize(prizeRequested), onClose: () => setOpen(false) }))] })));
186
186
  }
package/lib/esm/components/LoyaltyProgramDetail/PointsList.js CHANGED
@@ -22,7 +22,7 @@ const classes = {
22
22
  };
23
23
  export function PointElement({ message, points }) {
24
24
  if (points > 0) {
25
- return (_jsxs(Grid, Object.assign({ item: true, xs: 12, sm: 12, md: 6 }, { children: [_jsxs(Typography, Object.assign({ component: "div", className: classes.element }, { children: [_jsx(Typography, { children: message }), _jsxs(Typography, { children: ["+", _jsx(FormattedMessage, { id: "templates.loyaltyProgramDetail.points", defaultMessage: "templates.loyaltyProgramDetail.points", values: { total: points } })] })] })), _jsx(Divider, {})] })));
25
+ return (_jsxs(Grid, Object.assign({ size: { xs: 12, md: 6 } }, { children: [_jsxs(Typography, Object.assign({ component: "div", className: classes.element }, { children: [_jsx(Typography, { children: message }), _jsxs(Typography, { children: ["+", _jsx(FormattedMessage, { id: "templates.loyaltyProgramDetail.points", defaultMessage: "templates.loyaltyProgramDetail.points", values: { total: points } })] })] })), _jsx(Divider, {})] })));
26
26
  }
27
27
  }
28
28
  const Root = styled(Grid, {
@@ -47,5 +47,5 @@ export default function PointsList(props) {
47
47
  /**
48
48
  * Renders the component (if not hidden by autoHide prop)
49
49
  */
50
- return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className), container: true, spacing: 2 }, rest, { children: [preferences[SCPreferences.CONFIGURATIONS_POST_TYPE_ENABLED].value && (_jsx(PointElement, { message: _jsx(FormattedMessage, { id: "templates.loyaltyProgramDetail.points.post", defaultMessage: "templates.loyaltyProgramDetail.points.post" }), points: _preferences[SCPreferences.POINTS_MAKE_POST] })), preferences[SCPreferences.CONFIGURATIONS_DISCUSSION_TYPE_ENABLED].value && (_jsx(PointElement, { message: _jsx(FormattedMessage, { id: "templates.loyaltyProgramDetail.points.discussion", defaultMessage: "templates.loyaltyProgramDetail.points.discussion" }), points: _preferences[SCPreferences.POINTS_MAKE_DISCUSSION] })), _jsx(PointElement, { message: _jsx(FormattedMessage, { id: "templates.loyaltyProgramDetail.points.comment", defaultMessage: "templates.loyaltyProgramDetail.points.comment" }), points: _preferences[SCPreferences.POINTS_MAKE_COMMENT] }), _jsx(PointElement, { message: _jsx(FormattedMessage, { id: "templates.loyaltyProgramDetail.points.appreciation", defaultMessage: "templates.loyaltyProgramDetail.points.appreciation" }), points: _preferences[SCPreferences.POINTS_RECEIVE_VOTE] }), _jsx(PointElement, { message: _jsx(FormattedMessage, { id: "templates.loyaltyProgramDetail.points.follower", defaultMessage: "templates.loyaltyProgramDetail.points.follower" }), points: _preferences[SCPreferences.POINTS_CONNECTION_OR_FOLLOWER] }), _jsx(PointElement, { message: _jsx(FormattedMessage, { id: "templates.loyaltyProgramDetail.points.share", defaultMessage: "templates.loyaltyProgramDetail.points.share" }), points: _preferences[SCPreferences.POINTS_SOCIAL_SHARE] }), _jsx(PointElement, { message: _jsx(FormattedMessage, { id: "templates.loyaltyProgramDetail.points.app", defaultMessage: "templates.loyaltyProgramDetail.points.app" }), points: _preferences[SCPreferences.POINTS_APP_USED] }), _jsx(PointElement, { message: _jsx(FormattedMessage, { id: "templates.loyaltyProgramDetail.points.visit", defaultMessage: "templates.loyaltyProgramDetail.points.visit" }), points: _preferences[SCPreferences.POINTS_DAILY_VISIT] })] })));
50
+ return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className), container: true, width: "100%", spacing: 2 }, rest, { children: [preferences[SCPreferences.CONFIGURATIONS_POST_TYPE_ENABLED].value && (_jsx(PointElement, { message: _jsx(FormattedMessage, { id: "templates.loyaltyProgramDetail.points.post", defaultMessage: "templates.loyaltyProgramDetail.points.post" }), points: _preferences[SCPreferences.POINTS_MAKE_POST] })), preferences[SCPreferences.CONFIGURATIONS_DISCUSSION_TYPE_ENABLED].value && (_jsx(PointElement, { message: _jsx(FormattedMessage, { id: "templates.loyaltyProgramDetail.points.discussion", defaultMessage: "templates.loyaltyProgramDetail.points.discussion" }), points: _preferences[SCPreferences.POINTS_MAKE_DISCUSSION] })), _jsx(PointElement, { message: _jsx(FormattedMessage, { id: "templates.loyaltyProgramDetail.points.comment", defaultMessage: "templates.loyaltyProgramDetail.points.comment" }), points: _preferences[SCPreferences.POINTS_MAKE_COMMENT] }), _jsx(PointElement, { message: _jsx(FormattedMessage, { id: "templates.loyaltyProgramDetail.points.appreciation", defaultMessage: "templates.loyaltyProgramDetail.points.appreciation" }), points: _preferences[SCPreferences.POINTS_RECEIVE_VOTE] }), _jsx(PointElement, { message: _jsx(FormattedMessage, { id: "templates.loyaltyProgramDetail.points.follower", defaultMessage: "templates.loyaltyProgramDetail.points.follower" }), points: _preferences[SCPreferences.POINTS_CONNECTION_OR_FOLLOWER] }), _jsx(PointElement, { message: _jsx(FormattedMessage, { id: "templates.loyaltyProgramDetail.points.share", defaultMessage: "templates.loyaltyProgramDetail.points.share" }), points: _preferences[SCPreferences.POINTS_SOCIAL_SHARE] }), _jsx(PointElement, { message: _jsx(FormattedMessage, { id: "templates.loyaltyProgramDetail.points.app", defaultMessage: "templates.loyaltyProgramDetail.points.app" }), points: _preferences[SCPreferences.POINTS_APP_USED] }), _jsx(PointElement, { message: _jsx(FormattedMessage, { id: "templates.loyaltyProgramDetail.points.visit", defaultMessage: "templates.loyaltyProgramDetail.points.visit" }), points: _preferences[SCPreferences.POINTS_DAILY_VISIT] })] })));
51
51
  }
package/lib/esm/components/LoyaltyProgramDetail/PrizeItemSkeleton.js CHANGED
@@ -28,5 +28,5 @@ const Root = styled(Widget, {
28
28
  *
29
29
  */
30
30
  export default function PrizeItemSkeleton() {
31
- return (_jsxs(Root, Object.assign({ className: classes.root }, { children: [_jsx(CardMedia, { children: _jsx(Skeleton, { animation: "wave", variant: "rectangular", width: "100%", height: 137 }) }), _jsx(CardContent, { children: _jsxs(Typography, Object.assign({ className: classes.content }, { children: [_jsx(Skeleton, { animation: "wave", height: 20, width: "80%", variant: "text" }), _jsx(Skeleton, { animation: "wave", height: 10, width: "70%", variant: "text", style: { marginTop: 8 } })] })) }), _jsxs(CardActions, Object.assign({ className: classes.actions }, { children: [_jsx(Button, Object.assign({ disabled: true, variant: 'outlined', size: 'small' }, { children: _jsx(Skeleton, { animation: "wave", height: 10, width: 50, variant: "text" }) })), _jsx(Button, Object.assign({ disabled: true, variant: 'text', size: 'small' }, { children: _jsx(Skeleton, { animation: "wave", height: 20, width: 70, variant: "text" }) }))] }))] })));
31
+ return (_jsxs(Root, Object.assign({ className: classes.root }, { children: [_jsx(CardMedia, { children: _jsx(Skeleton, { animation: "wave", variant: "rectangular", width: "100%", height: 137 }) }), _jsx(CardContent, { children: _jsxs(Typography, Object.assign({ className: classes.content }, { children: [_jsx(Skeleton, { animation: "wave", height: 20, width: "80%", variant: "text" }), _jsx(Skeleton, { animation: "wave", height: 10, width: "70%", variant: "text", style: { marginTop: 8 } })] })) }), _jsxs(CardActions, Object.assign({ className: classes.actions }, { children: [_jsx(Button, Object.assign({ disabled: true, variant: "outlined", size: "small" }, { children: _jsx(Skeleton, { animation: "wave", height: 10, width: 50, variant: "text" }) })), _jsx(Button, Object.assign({ disabled: true, variant: "text", size: "small" }, { children: _jsx(Skeleton, { animation: "wave", height: 20, width: 70, variant: "text" }) }))] }))] })));
32
32
  }
package/lib/esm/components/LoyaltyProgramDetail/Skeleton.js CHANGED
@@ -42,5 +42,5 @@ const Root = styled(Box, {
42
42
  export default function LoyaltyProgramDetailSkeleton() {
43
43
  const theme = useTheme();
44
44
  const isMobile = useMediaQuery(theme.breakpoints.down('md'));
45
- return (_jsxs(Root, Object.assign({ className: classes.root }, { children: [_jsxs(Typography, Object.assign({ className: classes.title, component: 'div' }, { children: [!isMobile && _jsx(Skeleton, { animation: "wave", height: 30, width: 140, variant: "text" }), _jsx(Skeleton, { animation: "wave", variant: "circular", width: 172, height: 30, className: classes.chip })] })), _jsxs(Typography, Object.assign({ className: classes.sectionTitle }, { children: [_jsx(Skeleton, { animation: "wave", height: 20, width: '50%', variant: "text" }), _jsx(Skeleton, { animation: "wave", height: 17, width: '80%', variant: "text", className: classes.subTitle })] })), _jsx(Typography, Object.assign({ className: classes.sectionTitle }, { children: _jsx(Skeleton, { animation: "wave", height: 20, width: 146 }) })), _jsx(Grid, Object.assign({ container: true, spacing: 2, className: classes.pointsList }, { children: [...Array(8)].map((prize, index) => (_jsx(Grid, Object.assign({ item: true, xs: 12, sm: 12, md: 6 }, { children: _jsx(Skeleton, { animation: "wave", height: 15, width: "100%" }) }), index))) })), _jsx(Typography, Object.assign({ className: classes.sectionTitle }, { children: _jsx(Skeleton, { animation: "wave", height: 20, width: 140, variant: "text" }) })), _jsx(Grid, Object.assign({ container: true, spacing: isMobile ? 3 : 6 }, { children: [...Array(6)].map((prize, index) => (_jsx(Grid, Object.assign({ item: true, xs: 12, sm: 12, md: 6, lg: 4 }, { children: _jsx(PrizeItemSkeleton, {}) }), index))) }))] })));
45
+ return (_jsxs(Root, Object.assign({ className: classes.root }, { children: [_jsxs(Typography, Object.assign({ className: classes.title, component: "div" }, { children: [!isMobile && _jsx(Skeleton, { animation: "wave", height: 30, width: 140, variant: "text" }), _jsx(Skeleton, { animation: "wave", variant: "circular", width: 172, height: 30, className: classes.chip })] })), _jsxs(Typography, Object.assign({ className: classes.sectionTitle }, { children: [_jsx(Skeleton, { animation: "wave", height: 20, width: "50%", variant: "text" }), _jsx(Skeleton, { animation: "wave", height: 17, width: "80%", variant: "text", className: classes.subTitle })] })), _jsx(Typography, Object.assign({ className: classes.sectionTitle }, { children: _jsx(Skeleton, { animation: "wave", height: 20, width: 146 }) })), _jsx(Grid, Object.assign({ container: true, width: "100%", spacing: 2, className: classes.pointsList }, { children: [...Array(8)].map((_prize, index) => (_jsx(Grid, Object.assign({ size: { xs: 12, md: 6 } }, { children: _jsx(Skeleton, { animation: "wave", height: 15, width: "100%" }) }), index))) })), _jsx(Typography, Object.assign({ className: classes.sectionTitle }, { children: _jsx(Skeleton, { animation: "wave", height: 20, width: 140, variant: "text" }) })), _jsx(Grid, Object.assign({ container: true, width: "100%", spacing: isMobile ? 3 : 6 }, { children: [...Array(6)].map((_prize, index) => (_jsx(Grid, Object.assign({ size: { xs: 12, md: 6, lg: 4 } }, { children: _jsx(PrizeItemSkeleton, {}) }), index))) }))] })));
46
46
  }
package/lib/esm/components/MainFeed/MainFeed.js CHANGED
@@ -86,7 +86,7 @@ export default function MainFeed(inProps) {
86
86
  const isAdvertisingCustomAdvOnlyForAnonUsersEnabled = useSCPreferenceEnabled(SCPreferences.ADVERTISING_CUSTOM_ADV_ONLY_FOR_ANONYMOUS_USERS_ENABLED);
87
87
  const { enqueueSnackbar } = useSnackbar();
88
88
  // REF
89
- const feedRef = useRef();
89
+ const feedRef = useRef(null);
90
90
  /**
91
91
  * Render advertising above the feed
92
92
  */
package/lib/esm/components/UserFeed/UserFeed.js CHANGED
@@ -86,7 +86,7 @@ export default function UserFeed(inProps) {
86
86
  // Hooks
87
87
  const { scUser } = useSCFetchUser({ id: userId, user });
88
88
  // REF
89
- const feedRef = useRef();
89
+ const feedRef = useRef(null);
90
90
  // HANDLERS
91
91
  const handleComposerSuccess = (feedObject) => {
92
92
  const messageId = feedObject.scheduled_at ? 'ui.composer.scheduled.success' : 'ui.inlineComposerWidget.success';
package/lib/esm/components/UserProfile/UserProfile.js CHANGED
@@ -251,7 +251,7 @@ export default function UserProfile(inProps) {
251
251
  year: 'numeric',
252
252
  month: 'long'
253
253
  })
254
- } }) }))), scUser.location && (_jsxs(Typography, Object.assign({ className: classes.info }, { children: [_jsx(Icon, { children: "add_location_alt" }), " ", scUser.location] }))), taggingEnabled && (_jsx(Stack, Object.assign({ direction: "row", spacing: 2, className: classes.tags }, { children: scUser.tags
254
+ } }) }))), scUser.location && (_jsxs(Typography, Object.assign({ className: classes.info }, { children: [_jsx(Icon, { children: "add_location_alt" }), " ", scUser.location] }))), taggingEnabled && (_jsx(Stack, Object.assign({ direction: "row", className: classes.tags }, { children: scUser.tags
255
255
  .filter((t) => t.visible)
256
256
  .map((tag) => (_jsx(TagChip, { tag: tag, clickable: false, disposable: false, showDescription: true }, tag.id))) }), `tags_${scUser.id}`)), _jsx(UserFeed, Object.assign({ className: classes.feed, user: scUser, widgets: _widgets, FeedObjectProps: FeedObjectProps, FeedSidebarProps: FeedSidebarProps }, UserFeedProps), `feed_${scUser.id}`)] })) })) }))] })));
257
257
  }