@selfcommunity/react-ui 0.7.55 → 0.8.0-alpha.0

package/lib/esm/components/OnBoardingWidget/Steps/Appearance/reducer.js

@@ -0,0 +1,37 @@
+export const actionTypes = {
+    LOADING: '_loading',
+    SET_COLORS: '_set_colors',
+    SET_LOGOS: '_set_logos',
+    SET_SLOGANS: '_set_slogans'
+};
+export const initialState = {
+    loading: false,
+    colors: [],
+    logos: [],
+    slogans: [],
+    modified: false
+};
+export function getInitialState(data) {
+    if (data) {
+        return Object.assign(Object.assign({}, initialState), data);
+    }
+    return initialState;
+}
+export function reducer(state, action) {
+    let _state = Object.assign({}, state);
+    switch (action.type) {
+        case actionTypes.LOADING:
+            _state = Object.assign(Object.assign({}, state), { loading: action.payload.loading });
+            break;
+        case actionTypes.SET_COLORS:
+            _state = Object.assign(Object.assign(Object.assign(Object.assign({}, state), { colors: action.payload.colors, logos: state.logos }), (action.payload.loading !== undefined && { loading: action.payload.loading })), { modified: true });
+            break;
+        case actionTypes.SET_LOGOS:
+            _state = Object.assign(Object.assign(Object.assign(Object.assign({}, state), { logos: action.payload.logos, colors: state.colors }), (action.payload.loading !== undefined && { loading: action.payload.loading })), { modified: true });
+            break;
+        case actionTypes.SET_SLOGANS:
+            _state = Object.assign(Object.assign(Object.assign(Object.assign({}, state), { slogans: action.payload.slogans, logos: state.logos, colors: state.colors }), (action.payload.loading !== undefined && { loading: action.payload.loading })), { modified: true });
+            break;
+    }
+    return _state;
+}

package/lib/esm/components/OnBoardingWidget/Steps/Category/Category.d.ts

@@ -0,0 +1,18 @@
+import { SCStepType } from '@selfcommunity/types';
+export interface CategoryProps {
+    /**
+     * The category step
+     */
+    step: SCStepType;
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default null
+     */
+    className?: string;
+    /**
+     * Callback triggered on success category content generation
+     * @default null
+     */
+    handleCategoriesCreation?: () => void;
+}
+export default function Category(inProps: CategoryProps): JSX.Element;

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

@@ -0,0 +1,102 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { styled } from '@mui/material/styles';
+import { Alert, Button, CardMedia, Icon, Typography } from '@mui/material';
+import Box from '@mui/material/Box';
+import { useThemeProps } from '@mui/system';
+import classNames from 'classnames';
+import { useEffect, useMemo, useState } from 'react';
+import { FormattedMessage } from 'react-intl';
+import { PREFIX } from '../../constants';
+import ProgressBar from '../../../../shared/ProgressBar';
+import { SCOnBoardingStepStatusType } from '@selfcommunity/types';
+import { Player } from '@lottiefiles/react-lottie-player';
+import CategoryAPlaceholder from '../../../../assets/onBoarding/categoryA';
+import CategoryBPlaceholder from '../../../../assets/onBoarding/categoryB';
+import animatedProgress from '../../../../assets/onBoarding/progress/category_progress.json';
+const classes = {
+    root: `${PREFIX}-category-root`,
+    title: `${PREFIX}-category-title`,
+    summary: `${PREFIX}-category-summary`,
+    image: `${PREFIX}-category-image`,
+    action: `${PREFIX}-category-action`,
+    button: `${PREFIX}-category-button`,
+    success: `${PREFIX}-success`,
+    progress: `${PREFIX}-category-progress`,
+    animationProgress: `${PREFIX}-category-animation-progress`
+};
+function CircledLetter({ letter, statement }) {
+    return (_jsxs(Box, Object.assign({ component: "span", sx: { display: 'flex', alignItems: 'center', gap: 1, mb: 1.5 } }, { children: [_jsx(Box, Object.assign({ component: "span", sx: {
+                    width: 22,
+                    height: 22,
+                    borderRadius: '50%',
+                    backgroundColor: 'black',
+                    display: 'flex',
+                    justifyContent: 'center',
+                    alignItems: 'center'
+                } }, { children: _jsx(Typography, Object.assign({ component: "span", sx: {
+                        color: 'white',
+                        textTransform: 'uppercase',
+                        fontWeight: 'bold'
+                    } }, { children: letter })) })), statement] })));
+}
+const Root = styled(Box, {
+    name: PREFIX,
+    slot: 'CategoryRoot'
+})(() => ({}));
+export default function Category(inProps) {
+    // PROPS
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    const { className, step, handleCategoriesCreation } = props;
+    // STATE
+    const [hover, setHover] = useState(false);
+    const [progress, setProgress] = useState(step.completion_percentage);
+    useEffect(() => {
+        if (step.status === SCOnBoardingStepStatusType.IN_PROGRESS) {
+            const intervalId = setInterval(() => {
+                setProgress((prev) => {
+                    if (prev < step.completion_percentage) {
+                        return prev + 1;
+                    }
+                    else {
+                        clearInterval(intervalId);
+                        return prev;
+                    }
+                });
+            }, 1000);
+            return () => clearInterval(intervalId);
+        }
+    }, [step.status, step.completion_percentage]);
+    const getLoadingMessage = useMemo(() => {
+        let message;
+        if (progress <= 10) {
+            message = (_jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.categories.loading.a", defaultMessage: "ui.onBoardingWidget.step.categories.loading.a" }));
+        }
+        else if (progress <= 20) {
+            message = (_jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.categories.loading.b", defaultMessage: "ui.onBoardingWidget.step.categories.loading.b" }));
+        }
+        else if (progress <= 40) {
+            message = (_jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.categories.loading.c", defaultMessage: "ui.onBoardingWidget.step.categories.loading.c" }));
+        }
+        else if (progress <= 60) {
+            message = (_jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.categories.loading.d", defaultMessage: "ui.onBoardingWidget.step.categories.loading.d" }));
+        }
+        else {
+            message = (_jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.categories.loading.e", defaultMessage: "ui.onBoardingWidget.step.categories.loading.e" }));
+        }
+        return message;
+    }, [progress]);
+    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.categories", defaultMessage: "ui.onBoardingWidget.categories" }) })), _jsx(Typography, Object.assign({ className: classes.summary }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.category.summary", defaultMessage: "ui.onBoardingWidget.step.category.summary" }) })), (step === null || step === void 0 ? void 0 : step.status) !== SCOnBoardingStepStatusType.IN_PROGRESS && (_jsxs(_Fragment, { children: [_jsx(Typography, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.category.generation.steps", defaultMessage: "ui.onBoardingWidget.step.category.generation.steps", values: {
+                                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                                // @ts-ignore
+                                iconA: (...chunks) => _jsx(CircledLetter, { letter: "a", statement: chunks }),
+                                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                                // @ts-ignore
+                                iconB: (...chunks) => _jsx(CircledLetter, { letter: "b", statement: chunks }),
+                                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                                // @ts-ignore
+                                iconC: (...chunks) => _jsx(CircledLetter, { letter: "c", statement: chunks })
+                            } }) }), _jsx(CardMedia, { className: classes.image, component: "img", src: CategoryAPlaceholder }), _jsx(CardMedia, { className: classes.image, component: "img", src: CategoryBPlaceholder })] })), _jsx(Box, Object.assign({ component: "span", className: classes.action }, { children: (step === null || step === void 0 ? void 0 : step.status) === SCOnBoardingStepStatusType.COMPLETED ? (_jsx(Alert, Object.assign({ severity: "success" }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.categories.success", defaultMessage: "ui.onBoardingWidget.step.categories.success" }) }))) : (step === null || step === void 0 ? void 0 : step.status) === SCOnBoardingStepStatusType.IN_PROGRESS ? (_jsxs(Box, Object.assign({ className: classes.progress }, { children: [_jsx(Player, { autoplay: true, loop: true, src: animatedProgress, className: classes.animationProgress, controls: false }), _jsx(ProgressBar, { value: progress, hideBar: true, loadingMessage: _jsx(Typography, Object.assign({ variant: "h4" }, { children: getLoadingMessage })) })] }))) : (_jsx(Button, Object.assign({ size: "small", variant: "contained", color: "secondary", onClick: handleCategoriesCreation, endIcon: _jsx(Icon, { children: hover ? 'ai_stars' : 'magic_wand' }), onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false) }, { children: _jsx(FormattedMessage, { defaultMessage: "ui.onBoardingWidget.step.category.button", id: "ui.onBoardingWidget.step.category.button" }) }))) }))] })));
+}

package/lib/esm/components/OnBoardingWidget/Steps/Category/index.d.ts

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

package/lib/esm/components/OnBoardingWidget/Steps/Category/index.js

@@ -0,0 +1,2 @@
+import Category from './Category';
+export default Category;

package/lib/esm/components/OnBoardingWidget/Steps/Content/Content.d.ts

@@ -0,0 +1,18 @@
+import { SCStepType } from '@selfcommunity/types';
+export interface ContentProps {
+    /**
+     * The content step
+     */
+    step: SCStepType;
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default null
+     */
+    className?: string;
+    /**
+     * Callback triggered on success category content generation
+     * @default null
+     */
+    handleContentCreation?: () => void;
+}
+export default function Content(inProps: ContentProps): JSX.Element;

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

@@ -0,0 +1,72 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { styled } from '@mui/material/styles';
+import { Alert, Button, Icon, Typography } from '@mui/material';
+import Box from '@mui/material/Box';
+import { useThemeProps } from '@mui/system';
+import classNames from 'classnames';
+import { useEffect, useMemo, useState } from 'react';
+import { PREFIX } from '../../constants';
+import { FormattedMessage } from 'react-intl';
+import { SCOnBoardingStepStatusType } from '@selfcommunity/types';
+import ProgressBar from '../../../../shared/ProgressBar';
+import { Player } from '@lottiefiles/react-lottie-player';
+import animatedProgress from '../../../../assets/onBoarding/progress/content_progress.json';
+const classes = {
+    root: `${PREFIX}-content-root`,
+    title: `${PREFIX}-content-title`,
+    summary: `${PREFIX}-content-summary`,
+    action: `${PREFIX}-content-action`,
+    progress: `${PREFIX}-content-progress`,
+    animationProgress: `${PREFIX}-content-animation-progress`
+};
+const Root = styled(Box, {
+    name: PREFIX,
+    slot: 'ContentRoot'
+})(() => ({}));
+export default function Content(inProps) {
+    // PROPS
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    const { className, step, handleContentCreation } = props;
+    // STATE
+    const [hover, setHover] = useState(false);
+    const [progress, setProgress] = useState(step.completion_percentage);
+    useEffect(() => {
+        if (step.status === SCOnBoardingStepStatusType.IN_PROGRESS) {
+            const intervalId = setInterval(() => {
+                setProgress((prev) => {
+                    if (prev < step.completion_percentage) {
+                        return prev + 1;
+                    }
+                    else {
+                        clearInterval(intervalId);
+                        return prev;
+                    }
+                });
+            }, 1000);
+            return () => clearInterval(intervalId);
+        }
+    }, [step.status, step.completion_percentage]);
+    const getLoadingMessage = useMemo(() => {
+        let message;
+        if (progress <= 10) {
+            message = _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.contents.loading.a", defaultMessage: "ui.onBoardingWidget.step.contents.loading.a" });
+        }
+        else if (progress <= 20) {
+            message = _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.contents.loading.b", defaultMessage: "ui.onBoardingWidget.step.contents.loading.b" });
+        }
+        else if (progress <= 40) {
+            message = _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.contents.loading.c", defaultMessage: "ui.onBoardingWidget.step.contents.loading.c" });
+        }
+        else if (progress <= 60) {
+            message = _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.contents.loading.d", defaultMessage: "ui.onBoardingWidget.step.contents.loading.d" });
+        }
+        else {
+            message = _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.contents.loading.e", defaultMessage: "ui.onBoardingWidget.step.contents.loading.e" });
+        }
+        return message;
+    }, [progress]);
+    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.contents", defaultMessage: "ui.onBoardingWidget.contents" }) })), _jsx(Typography, Object.assign({ className: classes.summary }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.content.summary", defaultMessage: "ui.onBoardingWidget.step.content.summary" }) })), _jsx(Box, Object.assign({ component: "span", className: classes.action }, { children: (step === null || step === void 0 ? void 0 : step.status) === SCOnBoardingStepStatusType.COMPLETED ? (_jsx(Alert, Object.assign({ severity: "success" }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.contents.success", defaultMessage: "ui.onBoardingWidget.step.contents.success" }) }))) : (step === null || step === void 0 ? void 0 : step.status) === SCOnBoardingStepStatusType.IN_PROGRESS ? (_jsxs(Box, Object.assign({ className: classes.progress }, { children: [_jsx(Player, { autoplay: true, loop: true, src: animatedProgress, className: classes.animationProgress, controls: false }), _jsx(ProgressBar, { value: progress, hideBar: true, loadingMessage: _jsx(Typography, Object.assign({ variant: "h4" }, { children: getLoadingMessage })) })] }))) : (_jsx(Button, Object.assign({ size: "small", variant: "contained", color: "secondary", onClick: handleContentCreation, endIcon: _jsx(Icon, { children: hover ? 'ai_stars' : 'magic_wand' }), onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false) }, { children: _jsx(FormattedMessage, { defaultMessage: "ui.onBoardingWidget.step.content.button", id: "ui.onBoardingWidget.step.content.button" }) }))) }))] })));
+}

package/lib/esm/components/OnBoardingWidget/Steps/Content/index.d.ts

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

package/lib/esm/components/OnBoardingWidget/Steps/Content/index.js

@@ -0,0 +1,2 @@
+import Content from './Content';
+export default Content;

package/lib/esm/components/OnBoardingWidget/Steps/Invite/Invite.d.ts

@@ -0,0 +1,13 @@
+export interface InviteProps {
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default null
+     */
+    className?: string;
+    /**
+     * Callback triggered on complete action click
+     * @default null
+     */
+    onCompleteAction: () => void;
+}
+export default function Invite(inProps: InviteProps): JSX.Element;

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

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext } 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 { Link, SCPreferences, SCPreferencesContext, useSCContext } from '@selfcommunity/react-core';
+import { FACEBOOK_SHARE, LINKEDIN_SHARE, X_SHARE } from '../../../../constants/SocialShare';
+import { MAKE_MARKETING_PROD, MAKE_MARKETING_STAGE } from '../../../PlatformWidget/constants';
+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'
+})(() => ({}));
+export default function Invite(inProps) {
+    // PROPS
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    const { className, onCompleteAction = null } = props;
+    // CONTEXT
+    const scContext = useSCContext();
+    const scPreferencesContext = useContext(SCPreferencesContext);
+    const facebookShareEnabled = SCPreferences.ADDONS_SHARE_POST_ON_FACEBOOK_ENABLED in scPreferencesContext.preferences &&
+        scPreferencesContext.preferences[SCPreferences.ADDONS_SHARE_POST_ON_FACEBOOK_ENABLED].value;
+    const xShareEnabled = SCPreferences.ADDONS_SHARE_POST_ON_TWITTER_ENABLED in scPreferencesContext.preferences &&
+        scPreferencesContext.preferences[SCPreferences.ADDONS_SHARE_POST_ON_TWITTER_ENABLED].value;
+    const linkedinShareEnabled = SCPreferences.ADDONS_SHARE_POST_ON_LINKEDIN_ENABLED in scPreferencesContext.preferences &&
+        scPreferencesContext.preferences[SCPreferences.ADDONS_SHARE_POST_ON_LINKEDIN_ENABLED].value;
+    const url = scContext.settings.portal;
+    const isStage = scContext.settings.portal.includes('stage');
+    // HANDLERS
+    const handleShare = (shareUrl, shareType) => {
+        window.open(shareUrl, `${shareType}-share-dialog`, 'width=626,height=436');
+        onCompleteAction();
+    };
+    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: [facebookShareEnabled && (_jsx(IconButton, Object.assign({ onClick: () => handleShare(FACEBOOK_SHARE + url, 'facebook') }, { children: _jsx(Icon, Object.assign({ classes: { root: classes.icon } }, { children: "facebook" })) }))), xShareEnabled && (_jsx(IconButton, Object.assign({ onClick: () => handleShare(X_SHARE + url, 'x') }, { children: _jsx(Icon, Object.assign({ classes: { root: classes.icon } }, { children: "twitter" })) }))), linkedinShareEnabled && (_jsx(IconButton, Object.assign({ onClick: () => handleShare(LINKEDIN_SHARE + url, 'linkedin') }, { 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", component: Link, to: isStage ? MAKE_MARKETING_STAGE : MAKE_MARKETING_PROD, target: "_blank", onClick: onCompleteAction }, { children: _jsx(FormattedMessage, { defaultMessage: "ui.onBoardingWidget.step.invite.button", id: "ui.onBoardingWidget.step.invite.button" }) })) }))] })));
+}

package/lib/esm/components/OnBoardingWidget/Steps/Invite/index.d.ts

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

package/lib/esm/components/OnBoardingWidget/Steps/Invite/index.js

@@ -0,0 +1,2 @@
+import Invite from './Invite';
+export default Invite;

package/lib/esm/components/OnBoardingWidget/Steps/Profile/Profile.d.ts

@@ -0,0 +1,25 @@
+import { SCUserType } from '@selfcommunity/types';
+import { SCUserProfileFields } from '../../../../types/user';
+export interface ProfileProps {
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default null
+     */
+    className?: string;
+    /**
+     * User fields to display in the profile
+     * @default [real_name, date_joined, date_of_birth, website, description, bio]
+     */
+    fields?: SCUserProfileFields[];
+    /**
+     * User Object
+     * @default null
+     */
+    user?: SCUserType;
+    /**
+     * Callback triggered on complete action click
+     * @default null
+     */
+    onCompleteAction: () => void;
+}
+export default function Profile(inProps: ProfileProps): JSX.Element;

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

@@ -0,0 +1,88 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, 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, Drawer, IconButton, Paper, Typography } from '@mui/material';
+import { FormattedMessage } from 'react-intl';
+import PublicInfo from '../../../UserProfileEdit/Section/PublicInfo';
+import { SCPreferences, useSCContext, useSCFetchUser, useSCPreferences, useSCUser } from '@selfcommunity/react-core';
+import UserAvatar from '../../../../shared/UserAvatar';
+import ChangePicture from '../../../ChangePicture';
+import ChangeCover from '../../../ChangeCover';
+import { DEFAULT_FIELDS } from '../../../../constants/UserProfile';
+import Icon from '@mui/material/Icon';
+const classes = {
+    root: `${PREFIX}-profile-root`,
+    title: `${PREFIX}-profile-title`,
+    icon: `${PREFIX}-profile-icon`,
+    cover: `${PREFIX}-profile-cover`,
+    avatar: `${PREFIX}-profile-avatar`,
+    changePicture: `${PREFIX}-profile-change-picture`,
+    changeCover: `${PREFIX}-profile-change-cover`,
+    publicInfo: `${PREFIX}-profile-public-info`
+};
+const Root = styled(Box, {
+    name: PREFIX,
+    slot: 'ProfileRoot'
+})(() => ({}));
+const DrawerRoot = styled(Drawer, {
+    name: PREFIX,
+    slot: 'ProfileDrawerRoot'
+})(() => ({}));
+export default function Profile(inProps) {
+    var _a;
+    // PROPS
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    const { className, fields = [...DEFAULT_FIELDS], user = null, onCompleteAction } = props, rest = __rest(props, ["className", "fields", "user", "onCompleteAction"]);
+    // STATE
+    const [anchorEl, setAnchorEl] = useState(null);
+    // PREFERENCES
+    const scPreferences = useSCPreferences();
+    // CONTEXT
+    const scContext = useSCContext();
+    const scUserContext = useSCUser();
+    // HOOKS
+    const { scUser, setSCUser } = useSCFetchUser({ id: (_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.id, user });
+    const hasBadge = scUser && scUser.community_badge;
+    // HANDLERS
+    const handleOpen = useCallback((event) => {
+        setAnchorEl(event.currentTarget);
+    }, []);
+    const handleClose = useCallback(() => {
+        setAnchorEl(null);
+    }, []);
+    /**
+     * Handles Change Avatar
+     * If avatar === null reset the avatar with auto-generated image
+     * @param avatar
+     */
+    function handleChangeAvatar(avatar) {
+        if (avatar) {
+            setSCUser(Object.assign({}, scUser, { avatar: avatar.avatar }));
+        }
+        else {
+            setSCUser(Object.assign({}, scUser, { avatar: `${scContext.settings.portal}/api/v2/avatar/${scUser.id}` }));
+        }
+        onCompleteAction();
+    }
+    const _backgroundCover = Object.assign({}, ((scUser === null || scUser === void 0 ? void 0 : scUser.cover)
+        ? { background: `url('${scUser.cover}') center / cover` }
+        : { background: `url('${scPreferences.preferences[SCPreferences.IMAGES_USER_DEFAULT_COVER].value}') center / cover` }));
+    /**
+     * Handles Change Cover
+     * Only if scUser.id === scUserContext.user.id
+     * @param cover
+     */
+    function handleChangeCover(cover) {
+        setSCUser(Object.assign({}, scUser, { cover: cover }));
+        onCompleteAction();
+    }
+    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [_jsx(Typography, Object.assign({ variant: "h4", className: classes.title, alignSelf: "self-start" }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.profile", defaultMessage: "ui.onBoardingWidget.profile" }) })), _jsx(Typography, Object.assign({ alignSelf: "self-start" }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.profile.summary", defaultMessage: "ui.onBoardingWidget.step.profile.summary" }) })), _jsx(Button, Object.assign({ variant: "outlined", size: "small", color: "primary", onClick: handleOpen }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.profile.button", defaultMessage: "ui.onBoardingWidget.step.profile.button" }) })), _jsxs(DrawerRoot, Object.assign({ anchor: "right", open: Boolean(anchorEl), onClose: handleClose }, { children: [_jsx(IconButton, Object.assign({ className: classes.icon, onClick: handleClose }, { children: _jsx(Icon, { children: "close" }) })), _jsxs(Paper, Object.assign({ style: _backgroundCover, classes: { root: classes.cover } }, { children: [_jsx(Box, Object.assign({ className: classes.avatar }, { children: _jsx(UserAvatar, Object.assign({ hide: !hasBadge }, { children: _jsx("img", { src: (scUser === null || scUser === void 0 ? void 0 : scUser.avatar) ? scUser.avatar : '' }) })) })), _jsxs(_Fragment, { children: [_jsx(ChangePicture, { iconButton: true, onChange: handleChangeAvatar, className: classes.changePicture }), _jsx("div", Object.assign({ className: classes.changeCover }, { children: _jsx(ChangeCover, { onChange: handleChangeCover }) }))] })] })), _jsx(Box, Object.assign({ className: classes.publicInfo }, { children: _jsx(PublicInfo, { fields: fields, onEditSuccess: onCompleteAction }) }))] }))] })));
+}

package/lib/esm/components/OnBoardingWidget/Steps/Profile/index.d.ts

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

package/lib/esm/components/OnBoardingWidget/Steps/Profile/index.js

@@ -0,0 +1,2 @@
+import Profile from './Profile';
+export default Profile;

package/lib/esm/components/OnBoardingWidget/constants.d.ts

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

package/lib/esm/components/OnBoardingWidget/constants.js

@@ -0,0 +1 @@
+export const PREFIX = 'SCOnBoardingWidget';

package/lib/esm/components/OnBoardingWidget/index.d.ts

@@ -0,0 +1,4 @@
+import OnBoardingWidget, { OnBoardingWidgetProps } from './OnBoardingWidget';
+import OnBoardingWidgetSkeleton from './Skeleton';
+export default OnBoardingWidget;
+export { OnBoardingWidgetProps, OnBoardingWidgetSkeleton };

package/lib/esm/components/OnBoardingWidget/index.js

@@ -0,0 +1,4 @@
+import OnBoardingWidget from './OnBoardingWidget';
+import OnBoardingWidgetSkeleton from './Skeleton';
+export default OnBoardingWidget;
+export { OnBoardingWidgetSkeleton };

package/lib/esm/components/PlatformWidget/PlatformWidget.js

@@ -1,5 +1,6 @@
 import { __rest } from "tslib";
-import React, { useCallback, useContext, useMemo, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useContext, useMemo, useState } from 'react';
 import { styled } from '@mui/material/styles';
 import { Backdrop, Box, Button, Collapse, Divider, Grid, Icon, IconButton, Stack, Tooltip, Typography } from '@mui/material';
 import { http, Endpoints } from '@selfcommunity/api-services';
@@ -195,40 +196,36 @@ export default function PlatformWidget(inProps) {
         ...((isAdmin || isEditor) && !hideConsoleAction
             ? [
                 {
-                    render: (React.createElement(Button, { variant: "outlined", size: "small", onClick: () => fetchPlatform('') },
-                        React.createElement(FormattedMessage, { id: "ui.platformWidget.adm", defaultMessage: "ui.platformWidget.adm" }))),
-                    title: React.createElement(FormattedMessage, { id: "ui.platformWidget.adm", defaultMessage: "ui.platformWidget.adm" }),
-                    content: React.createElement(FormattedMessage, { id: "ui.platformWidget.adm.desc", defaultMessage: "ui.platformWidget.adm.desc" })
+                    render: (_jsx(Button, Object.assign({ variant: "outlined", size: "small", onClick: () => fetchPlatform('') }, { children: _jsx(FormattedMessage, { id: "ui.platformWidget.adm", defaultMessage: "ui.platformWidget.adm" }) }))),
+                    title: _jsx(FormattedMessage, { id: "ui.platformWidget.adm", defaultMessage: "ui.platformWidget.adm" }),
+                    content: _jsx(FormattedMessage, { id: "ui.platformWidget.adm.desc", defaultMessage: "ui.platformWidget.adm.desc" })
                 }
             ]
             : []),
         ...((isAdmin || isModerator) && !hideModerationAction
             ? [
                 {
-                    render: (React.createElement(Button, { variant: "outlined", size: "small", onClick: () => fetchPlatform('/moderation/flags/') },
-                        React.createElement(FormattedMessage, { id: "ui.platformWidget.mod", defaultMessage: "ui.platformWidget.mod" }))),
-                    title: React.createElement(FormattedMessage, { id: "ui.platformWidget.mod", defaultMessage: "ui.platformWidget.mod" }),
-                    content: React.createElement(FormattedMessage, { id: "ui.platformWidget.mod.desc", defaultMessage: "ui.platformWidget.mod.desc" })
+                    render: (_jsx(Button, Object.assign({ variant: "outlined", size: "small", onClick: () => fetchPlatform('/moderation/flags/') }, { children: _jsx(FormattedMessage, { id: "ui.platformWidget.mod", defaultMessage: "ui.platformWidget.mod" }) }))),
+                    title: _jsx(FormattedMessage, { id: "ui.platformWidget.mod", defaultMessage: "ui.platformWidget.mod" }),
+                    content: _jsx(FormattedMessage, { id: "ui.platformWidget.mod.desc", defaultMessage: "ui.platformWidget.mod.desc" })
                 }
             ]
             : []),
         ...(isAdmin && isCommunityOwner && !hideHubAction
             ? [
                 {
-                    render: (React.createElement(Button, { variant: "outlined", size: "small", component: Link, to: isStage ? HUB_STAGE : HUB_PROD, target: "_blank" },
-                        React.createElement(FormattedMessage, { id: "ui.platformWidget.hub", defaultMessage: "ui.platformWidget.hub" }))),
-                    title: React.createElement(FormattedMessage, { id: "ui.platformWidget.hub", defaultMessage: "ui.platformWidget.hub" }),
-                    content: React.createElement(FormattedMessage, { id: "ui.platformWidget.hub.desc", defaultMessage: "ui.platformWidget.hub.desc" })
+                    render: (_jsx(Button, Object.assign({ variant: "outlined", size: "small", component: Link, to: isStage ? HUB_STAGE : HUB_PROD, target: "_blank" }, { children: _jsx(FormattedMessage, { id: "ui.platformWidget.hub", defaultMessage: "ui.platformWidget.hub" }) }))),
+                    title: _jsx(FormattedMessage, { id: "ui.platformWidget.hub", defaultMessage: "ui.platformWidget.hub" }),
+                    content: _jsx(FormattedMessage, { id: "ui.platformWidget.hub.desc", defaultMessage: "ui.platformWidget.hub.desc" })
                 }
             ]
             : []),
         ...(isCommunityOwner && !hideContactUsAction
             ? [
                 {
-                    render: (React.createElement(Button, { variant: "outlined", size: "small", component: Link, to: isStage ? CONTACT_STAGE : CONTACT_PROD, target: "_blank" },
-                        React.createElement(FormattedMessage, { id: "ui.platformWidget.contactUs", defaultMessage: "ui.platformWidget.contactUs" }))),
-                    title: React.createElement(FormattedMessage, { id: "ui.platformWidget.contactUs", defaultMessage: "ui.platformWidget.contactUs" }),
-                    content: React.createElement(FormattedMessage, { id: "ui.platformWidget.contactUs.desc", defaultMessage: "ui.platformWidget.contactUs.desc" })
+                    render: (_jsx(Button, Object.assign({ variant: "outlined", size: "small", component: Link, to: isStage ? CONTACT_STAGE : CONTACT_PROD, target: "_blank" }, { children: _jsx(FormattedMessage, { id: "ui.platformWidget.contactUs", defaultMessage: "ui.platformWidget.contactUs" }) }))),
+                    title: _jsx(FormattedMessage, { id: "ui.platformWidget.contactUs", defaultMessage: "ui.platformWidget.contactUs" }),
+                    content: _jsx(FormattedMessage, { id: "ui.platformWidget.contactUs.desc", defaultMessage: "ui.platformWidget.contactUs.desc" })
                 }
             ]
             : []),
@@ -297,48 +294,18 @@ export default function PlatformWidget(inProps) {
     /**
      * Render tutorial
      */
-    const tutorial = (React.createElement(Grid, { container: true, spacing: isAdmin ? 1 : 3, justifyContent: "center", className: classes.tutorial },
-        !isTutorialOpen && (React.createElement(Grid, { item: true, xs: "auto", alignItems: "center", justifyContent: "center" },
-            React.createElement(IconButton, { size: "medium", onClick: handleOpenTutorial },
-                React.createElement(Icon, null, "info")))),
-        React.createElement(Collapse, { in: isTutorialOpen, className: classes.tutorialContent }, isTutorialOpen && (React.createElement(Grid, { item: true, xs: "auto" },
-            React.createElement(Typography, { variant: 'body2', className: classes.tutorialTitle, component: 'div' },
-                React.createElement(Grow, { in: true, timeout: 1000 },
-                    React.createElement("span", null, actions[tutorialIndex].title)),
-                React.createElement(IconButton, { size: 'small', className: classes.tutorialTitleClose, onClick: handleCloseTutorial },
-                    React.createElement(Icon, null, "close"))),
-            React.createElement(Grow, { in: true, timeout: 1200 },
-                React.createElement(Typography, { variant: 'body2', className: classes.tutorialDesc }, actions[tutorialIndex].content)),
-            React.createElement(Divider, { className: classes.divider }),
-            React.createElement(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2, className: classes.tutorialControls },
-                React.createElement(Button, { variant: "text", size: "small", onClick: handlePrevious, className: classNames(classes.btnStep, classes.btnPreviousStep) }, tutorialIndex === 0 ? (React.createElement(FormattedMessage, { id: "ui.platformWidget.tutorial.skip", defaultMessage: "ui.platformWidget.tutorial.skip" })) : (React.createElement(FormattedMessage, { id: "ui.platformWidget.tutorial.previous", defaultMessage: "ui.platformWidget.tutorial.previous" }))),
-                React.createElement(Typography, { component: 'div' },
-                    tutorialIndex + 1,
-                    "/",
-                    actions.length),
-                React.createElement(Button, { variant: "contained", size: "small", color: "primary", onClick: handleNext, className: classNames(classes.btnStep, classes.btnNextStep) }, tutorialIndex === actions.length - 1 ? (React.createElement(FormattedMessage, { id: "ui.platformWidget.tutorial.close", defaultMessage: "ui.platformWidget.tutorial.close" })) : (React.createElement(FormattedMessage, { id: "ui.platformWidget.tutorial.next", defaultMessage: "ui.platformWidget.tutorial.next" })))))))));
+    const tutorial = (_jsxs(Grid, Object.assign({ container: true, spacing: isAdmin ? 1 : 3, justifyContent: "center", className: classes.tutorial }, { children: [!isTutorialOpen && (_jsx(Grid, Object.assign({ item: true, xs: "auto", alignItems: "center", justifyContent: "center" }, { children: _jsx(IconButton, Object.assign({ size: "medium", onClick: handleOpenTutorial }, { children: _jsx(Icon, { children: "info" }) })) }))), _jsx(Collapse, Object.assign({ in: isTutorialOpen, className: classes.tutorialContent }, { children: isTutorialOpen && (_jsxs(Grid, Object.assign({ item: true, xs: "auto" }, { children: [_jsxs(Typography, Object.assign({ variant: 'body2', className: classes.tutorialTitle, component: 'div' }, { children: [_jsx(Grow, Object.assign({ in: true, timeout: 1000 }, { children: _jsx("span", { children: actions[tutorialIndex].title }) })), _jsx(IconButton, Object.assign({ size: 'small', className: classes.tutorialTitleClose, onClick: handleCloseTutorial }, { children: _jsx(Icon, { children: "close" }) }))] })), _jsx(Grow, Object.assign({ in: true, timeout: 1200 }, { children: _jsx(Typography, Object.assign({ variant: 'body2', className: classes.tutorialDesc }, { children: actions[tutorialIndex].content })) })), _jsx(Divider, { className: classes.divider }), _jsxs(Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2, className: classes.tutorialControls }, { children: [_jsx(Button, Object.assign({ variant: "text", size: "small", onClick: handlePrevious, className: classNames(classes.btnStep, classes.btnPreviousStep) }, { children: tutorialIndex === 0 ? (_jsx(FormattedMessage, { id: "ui.platformWidget.tutorial.skip", defaultMessage: "ui.platformWidget.tutorial.skip" })) : (_jsx(FormattedMessage, { id: "ui.platformWidget.tutorial.previous", defaultMessage: "ui.platformWidget.tutorial.previous" })) })), _jsxs(Typography, Object.assign({ component: 'div' }, { children: [tutorialIndex + 1, "/", actions.length] })), _jsx(Button, Object.assign({ variant: "contained", size: "small", color: "primary", onClick: handleNext, className: classNames(classes.btnStep, classes.btnNextStep) }, { children: tutorialIndex === actions.length - 1 ? (_jsx(FormattedMessage, { id: "ui.platformWidget.tutorial.close", defaultMessage: "ui.platformWidget.tutorial.close" })) : (_jsx(FormattedMessage, { id: "ui.platformWidget.tutorial.next", defaultMessage: "ui.platformWidget.tutorial.next" })) }))] }))] }))) }))] })));
     /**
      * Renders platform card
      */
-    const content = (React.createElement(Grid, { container: true, spacing: isAdmin ? 1 : 3, justifyContent: "center", className: classes.content },
-        React.createElement(Grid, { item: true, xs: 12 }, title ? (title) : (React.createElement(Box, { className: classes.title },
-            React.createElement(Tooltip, { title: React.createElement(FormattedMessage, { id: "ui.platformWidget.title.tooltip", defaultMessage: "ui.platformWidget.title.tooltip" }), placement: "top" },
-                React.createElement("img", { src: LogoPlaceholder, alt: "logo" }))))),
-        React.createElement(Grid, { item: true, xs: 12, className: classes.actions },
-            React.createElement(Grid, { item: true, xs: 1, className: classes.action }),
-            actions.map((a, i) => {
-                return (React.createElement(Grid, { key: i, item: true, xs: "auto", className: classNames(classes.action, { [classes.actionHighlighted]: tutorialIndex === i && isTutorialOpen }) }, a.render));
-            }),
-            React.createElement(Grid, { item: true, xs: 1, className: classes.action }))));
+    const content = (_jsxs(Grid, Object.assign({ container: true, spacing: isAdmin ? 1 : 3, justifyContent: "center", className: classes.content }, { children: [_jsx(Grid, Object.assign({ item: true, xs: 12 }, { children: title ? (title) : (_jsx(Box, Object.assign({ className: classes.title }, { children: _jsx(Tooltip, Object.assign({ title: _jsx(FormattedMessage, { id: "ui.platformWidget.title.tooltip", defaultMessage: "ui.platformWidget.title.tooltip" }), placement: "top" }, { children: _jsx("img", { src: LogoPlaceholder, alt: "logo" }) })) }))) })), _jsxs(Grid, Object.assign({ item: true, xs: 12, className: classes.actions }, { children: [_jsx(Grid, { item: true, xs: 1, className: classes.action }), actions.map((a, i) => {
+                        return (_jsx(Grid, Object.assign({ item: true, xs: "auto", className: classNames(classes.action, { [classes.actionHighlighted]: tutorialIndex === i && isTutorialOpen }) }, { children: a.render }), i));
+                    }), _jsx(Grid, { item: true, xs: 1, className: classes.action })] }))] })));
     /**
      * Renders root object (if not hidden by autoHide prop)
      */
     if (!autoHide && ((_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.role)) {
-        return (React.createElement(React.Fragment, null,
-            React.createElement(Root, Object.assign({ className: classNames(classes.root, className, { [classes.tutorialOpen]: isTutorialOpen }) }, rest),
-                content,
-                tutorial),
-            React.createElement(Backdrop, { sx: { color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }, open: isTutorialOpen, onClick: handleCloseTutorial })));
+        return (_jsxs(_Fragment, { children: [_jsxs(Root, Object.assign({ className: classNames(classes.root, className, { [classes.tutorialOpen]: isTutorialOpen }) }, rest, { children: [content, tutorial] })), _jsx(Backdrop, { sx: { color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }, open: isTutorialOpen, onClick: handleCloseTutorial })] }));
     }
-    return React.createElement(HiddenPlaceholder, null);
+    return _jsx(HiddenPlaceholder, {});
 }