@selfcommunity/react-templates
Version:
React Templates Components to integrate a Community created with SelfCommunity.
190 lines (182 loc) • 13.5 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const api_services_1 = require("@selfcommunity/api-services");
const react_core_1 = require("@selfcommunity/react-core");
const material_1 = require("@mui/material");
const react_intl_1 = require("react-intl");
const classnames_1 = tslib_1.__importDefault(require("classnames"));
const system_1 = require("@mui/system");
const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
const PrizeItemSkeleton_1 = tslib_1.__importDefault(require("./PrizeItemSkeleton"));
const PointsList_1 = tslib_1.__importDefault(require("./PointsList"));
const notistack_1 = require("notistack");
const react_ui_1 = require("@selfcommunity/react-ui");
const constants_1 = require("./constants");
const classes = {
root: `${constants_1.PREFIX}-root`,
userPoints: `${constants_1.PREFIX}-user-points`,
title: `${constants_1.PREFIX}-title`,
sectionTitle: `${constants_1.PREFIX}-section-title`,
sectionInfo: `${constants_1.PREFIX}-section-info`,
pointsSection: `${constants_1.PREFIX}-points-section`,
prizeSection: `${constants_1.PREFIX}-prize-section`,
card: `${constants_1.PREFIX}-card`,
cardTitle: `${constants_1.PREFIX}-card-title`,
cardContent: `${constants_1.PREFIX}-card-content`,
prizePoints: `${constants_1.PREFIX}-prize-points`,
actionButton: `${constants_1.PREFIX}-card-action-button`,
notRequestable: `${constants_1.PREFIX}-not-requestable`,
endMessage: `${constants_1.PREFIX}-end-message`
};
const Root = (0, material_1.styled)(material_1.Box, {
name: constants_1.PREFIX,
slot: 'Root'
})(() => ({}));
/**
* > API documentation for the Community-JS Loyalty Program Detail Template. Learn about the available props and the CSS API.
*
*
* This component renders the loyalty program detail template.
* Take a look at our <strong>demo</strong> component [here](/docs/sdk/community-js/react-templates/Components/LoyaltyProgramDetail)
#### Import
```jsx
import {LoyaltyProgramDetail} from '@selfcommunity/react-templates';
```
#### Component Name
The name `SCLoyaltyProgramDetailTemplate` can be used when providing style overrides in the theme.
#### CSS
|Rule Name|Global class|Description|
|---|---|---|
|root|.SCLoyaltyProgramDetailTemplate-root|Styles applied to the root element.|
|userPoints|.SCLoyaltyProgramDetailTemplate-user-points|Styles applied to the chip element.|
|title|.SCLoyaltyProgramDetailTemplate-title|Styles applied to the title element.|
|sectionTitle|.SCLoyaltyProgramDetailTemplate-section-title|Styles applied to the section title element.|
|sectionInfo|.SCLoyaltyProgramDetailTemplate-section-info|Styles applied to the section info element.|
|pointsSection|.SCLoyaltyProgramDetailTemplate-points-section|Styles applied to the points section.|
|prizeSection|.SCLoyaltyProgramDetailTemplate-prize-section|Styles applied to the prize section.|
|card|.SCLoyaltyProgramDetailTemplate-card|Styles applied to the card elements.|
|cardTitle|.SCLoyaltyProgramDetailTemplate-card-title|Styles applied to the card title element.|
|cardContent|.SCLoyaltyProgramDetailTemplate-card-content|Styles applied to the card content section.|
|prizePoints|.SCLoyaltyProgramDetailTemplate-prize-points|Styles applied to the prize points element.|
|actionButton|.SCLoyaltyProgramDetailTemplate-action-button|Styles applied to the action button element.|
|notRequestable|.SCLoyaltyProgramDetailTemplate-not-requestable|Styles applied to elements that are not requestable.|
|endMessage|.SCLoyaltyProgramDetailTemplate-end-message|Styles applied to the infinity scroll final section.|
/**
*
* @param inProps
* @constructor
*/
function LoyaltyProgramDetail(inProps) {
// PROPS
const props = (0, system_1.useThemeProps)({
props: inProps,
name: constants_1.PREFIX
});
const { className } = props, rest = tslib_1.__rest(props, ["className"]);
// STATE
const theme = (0, material_1.useTheme)();
const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
// STATE
const [loading, setLoading] = (0, react_1.useState)(true);
const [next, setNext] = (0, react_1.useState)(null);
const [prizes, setPrizes] = (0, react_1.useState)([]);
const [points, setPoints] = (0, react_1.useState)(0);
const [open, setOpen] = (0, react_1.useState)(false);
const [prizeRequested, setPrizeRequested] = (0, react_1.useState)(null);
const { enqueueSnackbar, closeSnackbar } = (0, notistack_1.useSnackbar)();
// CONTEXT
const scUserContext = (0, react_1.useContext)(react_core_1.SCUserContext);
// CONST
const authUserId = scUserContext.user ? scUserContext.user.id : null;
// HANDLERS
const handleScrollUp = () => {
window.scrollTo({ left: 0, top: 0, behavior: 'smooth' });
};
const requestPrize = (id) => {
return api_services_1.LoyaltyService.createPrizeRequest(id)
.then((data) => {
setPoints((prev) => prev - data.prize_points);
setOpen(false);
let _snackBar = enqueueSnackbar((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "templates.loyaltyProgramDetail.prize.request.success", defaultMessage: "templates.loyaltyProgramDetail.prize.request.success" }), {
variant: 'success',
autoHideDuration: 3000,
SnackbarProps: {
onClick: () => {
closeSnackbar(_snackBar);
}
}
});
})
.catch((error) => {
setOpen(false);
let _snackBar = enqueueSnackbar((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "templates.loyaltyProgramDetail.prize.request.error", defaultMessage: "templates.loyaltyProgramDetail.prize.request.error" }), {
variant: 'error',
autoHideDuration: 3000,
SnackbarProps: {
onClick: () => {
closeSnackbar(_snackBar);
}
}
});
});
};
const handleOpenAlert = (id) => {
setPrizeRequested(id);
setOpen(true);
};
const handleNext = (0, react_1.useMemo)(() => () => {
if (!next) {
return;
}
return api_services_1.http
.request({
url: next,
method: api_services_1.Endpoints.GetPrizes.method
})
.then((res) => {
setPrizes([...prizes, ...res.data.results]);
setNext(res.data.next);
})
.catch((error) => console.log(error))
.then(() => setLoading(false));
}, [next]);
const fetchUserPoints = () => {
api_services_1.UserService.getUserLoyaltyPoints(authUserId)
.then((data) => {
setPoints(data.points);
})
.catch((error) => {
console.log(error);
});
};
const fetchPrizes = () => {
api_services_1.LoyaltyService.getPrizes({ limit: 8 }).then((res) => {
setPrizes(res.results);
setNext(res.next);
setLoading(false);
});
};
/**
* On mount, fetches loyalty prizes and user points
*/
(0, react_1.useEffect)(() => {
if (authUserId) {
fetchUserPoints();
fetchPrizes();
}
}, [authUserId]);
/**
* Renders the component (if not hidden by autoHide prop)
*/
if (!authUserId) {
return null;
}
if (loading) {
return (0, jsx_runtime_1.jsx)(Skeleton_1.default, {});
}
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) }))] })));
}
exports.default = LoyaltyProgramDetail;