@selfcommunity/react-ui
Version:
React UI Components to integrate a Community created with SelfCommunity Platform.
96 lines (95 loc) • 6.21 kB
JavaScript
import { __awaiter } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useContext, useMemo, useState } from 'react';
import { styled } from '@mui/material/styles';
import Box from '@mui/material/Box';
import { useThemeProps } from '@mui/system';
import classNames from 'classnames';
import { PREFIX } from '../../constants';
import { Button, Icon, IconButton, Typography } from '@mui/material';
import { FormattedMessage } from 'react-intl';
import { SCPreferences, SCPreferencesContext } from '@selfcommunity/react-core';
import { FACEBOOK_SHARE, LINKEDIN_SHARE, X_SHARE } from '../../../../constants/SocialShare';
import { Endpoints, http, PreferenceService } from '@selfcommunity/api-services';
import { Logger } from '@selfcommunity/utils';
import { SCOPE_SC_UI } from '../../../../constants/Errors';
import { SCPreferenceName } from '@selfcommunity/types';
const classes = {
root: `${PREFIX}-invite-root`,
title: `${PREFIX}-invite-title`,
social: `${PREFIX}-invite-social`,
email: `${PREFIX}-invite-email`,
iconContainer: `${PREFIX}-invite-social-icon-container`,
icon: `${PREFIX}-invite-social-icon`,
action: `${PREFIX}-invite-action`
};
const Root = styled(Box, {
name: PREFIX,
slot: 'InviteRoot'
})(() => ({}));
const META_ROBOTS_ENABLE_DEFAULT = 'index,follow';
export default function Invite(inProps) {
// PROPS
const props = useThemeProps({
props: inProps,
name: PREFIX
});
const { className, onCompleteAction = null } = props;
// STATUS
const [isMetaRobotsUpdating, setMetaRobotsUpdating] = useState(false);
// CONTEXT
const scPreferencesContext = useContext(SCPreferencesContext);
const metaRobots = useMemo(() => {
return scPreferencesContext.preferences && SCPreferences.WEBMASTER_META_ROBOTS in scPreferencesContext.preferences
? scPreferencesContext.preferences[SCPreferences.WEBMASTER_META_ROBOTS].value
: null;
}, [scPreferencesContext.preferences]);
const url = useMemo(() => scPreferencesContext.preferences &&
SCPreferences.CONFIGURATIONS_GROUPS_ENABLED in scPreferencesContext.preferences &&
scPreferencesContext.preferences[SCPreferences.CONFIGURATIONS_APP_URL].value, [scPreferencesContext.preferences]);
// HANDLERS
const handleShare = (shareUrl, shareType) => __awaiter(this, void 0, void 0, function* () {
if (metaRobots.toLowerCase().replace(/\s+/g, '') !== META_ROBOTS_ENABLE_DEFAULT) {
yield enableSeo();
}
window.open(shareUrl, `${shareType}-share-dialog`, 'width=626,height=436');
onCompleteAction();
});
const enableSeo = () => __awaiter(this, void 0, void 0, function* () {
try {
setMetaRobotsUpdating(true);
yield PreferenceService.updatePreferences({ [SCPreferenceName.META_ROBOTS]: 'index, follow' });
}
catch (e) {
Logger.error(SCOPE_SC_UI, e);
}
finally {
setMetaRobotsUpdating(false);
}
});
/**
* Fetches platform url
*/
function fetchPlatform(query) {
http
.request({
url: Endpoints.Platform.url(),
method: Endpoints.Platform.method,
params: {
next: query
}
})
.then((res) => {
const platformUrl = res.data.platform_url;
window.open(platformUrl, '_blank').focus();
})
.catch((error) => {
console.log(error);
});
}
const handleCompleteAction = () => {
onCompleteAction();
fetchPlatform('/marketing/invitation');
};
return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, { children: [_jsx(Typography, Object.assign({ variant: "h4", className: classes.title }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.invite", defaultMessage: "ui.onBoardingWidget.invite" }) })), _jsxs(Box, Object.assign({ className: classes.social }, { children: [_jsx(Typography, Object.assign({ className: classes.title, variant: "h4" }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.invite.social.title", defaultMessage: "ui.onBoardingWidget.step.invite.social.title" }) })), _jsx(Typography, Object.assign({ variant: "subtitle1" }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.invite.social.subtitle", defaultMessage: "ui.onBoardingWidget.step.invite.social.subtitle" }) })), _jsxs(Box, Object.assign({ className: classes.iconContainer }, { children: [_jsx(IconButton, Object.assign({ onClick: () => handleShare(FACEBOOK_SHARE + url, 'facebook'), disabled: !url || isMetaRobotsUpdating }, { children: _jsx(Icon, Object.assign({ classes: { root: classes.icon } }, { children: "facebook" })) })), _jsx(IconButton, Object.assign({ onClick: () => handleShare(X_SHARE + url, 'x'), disabled: !url || isMetaRobotsUpdating }, { children: _jsx(Icon, Object.assign({ classes: { root: classes.icon } }, { children: "twitter" })) })), _jsx(IconButton, Object.assign({ onClick: () => handleShare(LINKEDIN_SHARE + url, 'linkedin'), disabled: !url || isMetaRobotsUpdating }, { children: _jsx(Icon, Object.assign({ classes: { root: classes.icon } }, { children: "linkedin" })) }))] }))] })), _jsxs(Box, Object.assign({ className: classes.email }, { children: [_jsx(Typography, Object.assign({ className: classes.title, variant: "h4" }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.invite.email.title", defaultMessage: "ui.onBoardingWidget.step.invite.email.title" }) })), _jsx(Typography, Object.assign({ variant: "subtitle1" }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.invite.email.subtitle", defaultMessage: "ui.onBoardingWidget.step.invite.email.subtitle" }) }))] })), _jsx(Box, Object.assign({ component: "span", className: classes.action }, { children: _jsx(Button, Object.assign({ variant: "outlined", size: "small", onClick: handleCompleteAction }, { children: _jsx(FormattedMessage, { defaultMessage: "ui.onBoardingWidget.step.invite.button", id: "ui.onBoardingWidget.step.invite.button" }) })) }))] })));
}