@selfcommunity/react-templates 0.5.0-mui7.21 → 0.5.0-mui7.23
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.
- package/lib/cjs/components/Lesson/Lesson.js +2 -2
- package/lib/cjs/components/LoyaltyProgramDetail/LoyaltyProgramDetail.js +1 -1
- package/lib/cjs/components/LoyaltyProgramDetail/PrizeItemSkeleton.js +1 -1
- package/lib/esm/components/Lesson/Lesson.js +2 -2
- package/lib/esm/components/LoyaltyProgramDetail/LoyaltyProgramDetail.js +1 -1
- package/lib/esm/components/LoyaltyProgramDetail/PrizeItemSkeleton.js +1 -1
- package/lib/umd/234.js +1 -1
- package/lib/umd/234.js.LICENSE.txt +1 -1
- package/lib/umd/react-templates.js +1 -1
- package/package.json +7 -7
|
@@ -192,8 +192,8 @@ function Lesson(inProps) {
|
|
|
192
192
|
return (0, jsx_runtime_1.jsx)(react_ui_1.HiddenPlaceholder, {});
|
|
193
193
|
}
|
|
194
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: {
|
|
195
|
-
link: (
|
|
196
|
-
linkBack: (
|
|
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
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 })] }));
|
|
198
198
|
}
|
|
199
199
|
exports.default = Lesson;
|
|
@@ -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:
|
|
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;
|
|
@@ -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:
|
|
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;
|
|
@@ -190,7 +190,7 @@ export default function Lesson(inProps) {
|
|
|
190
190
|
return _jsx(HiddenPlaceholder, {});
|
|
191
191
|
}
|
|
192
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: {
|
|
193
|
-
link: (
|
|
194
|
-
linkBack: (
|
|
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
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 })] }));
|
|
196
196
|
}
|
|
@@ -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:
|
|
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
|
}
|
|
@@ -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:
|
|
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
|
}
|