@selfcommunity/react-ui 0.7.50-events.70 → 0.7.50-events.76

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

@@ -0,0 +1,223 @@
+import { __awaiter } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useCallback, useEffect, useReducer, useRef, 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 { Preferences } from '@selfcommunity/react-core';
+import { PREFIX } from '../../constants';
+import { Button, Drawer, IconButton, Tab, Tabs, TextField, Typography } from '@mui/material';
+import { MuiColorInput } from 'mui-color-input';
+import { actionTypes } from './reducer';
+import { getInitialState, reducer } from './reducer';
+import { PreferenceService } from '@selfcommunity/api-services';
+import { formatColorLabel, formatLogoLabel } from '../../../../utils/onBoarding';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+import Icon from '@mui/material/Icon';
+import { SCOPE_SC_UI } from '../../../../constants/Errors';
+import { Logger } from '@selfcommunity/utils';
+import { LoadingButton } from '@mui/lab';
+import ScrollContainer from '../../../../shared/ScrollContainer';
+const messages = defineMessages({
+    titleField: {
+        id: 'ui.onBoardingWidget.step.appearance.titleSlogan.field.title',
+        defaultMessage: 'ui.onBoardingWidget.step.appearance.titleSlogan.field.title'
+    },
+    sloganField: {
+        id: 'ui.onBoardingWidget.step.appearance.titleSlogan.field.slogan',
+        defaultMessage: 'ui.onBoardingWidget.step.appearance.titleSlogan.field.slogan'
+    }
+});
+const classes = {
+    root: `${PREFIX}-appearance-root`,
+    title: `${PREFIX}-appearance-title`,
+    summary: `${PREFIX}-appearance-summary`,
+    color: `${PREFIX}-appearance-color`,
+    logoContainer: `${PREFIX}-appearance-logo-container`,
+    logo: `${PREFIX}-appearance-logo`,
+    uploadButton: `${PREFIX}-appearance-upload-button`,
+    drawerRoot: `${PREFIX}-appearance-drawer-root`,
+    drawerHeader: `${PREFIX}-appearance-drawer-header`,
+    drawerHeaderAction: `${PREFIX}-appearance-drawer-header-action`,
+    drawerContent: `${PREFIX}-appearance-drawer-content`
+};
+const Root = styled(Box, {
+    name: PREFIX,
+    slot: 'AppearanceRoot'
+})(() => ({}));
+const DrawerRoot = styled(Drawer, {
+    name: PREFIX,
+    slot: 'AppearanceDrawerRoot',
+    overridesResolver: (props, styles) => styles.appearanceDrawerRoot
+})(({ theme }) => ({}));
+export default function Appearance(inProps) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    // PROPS
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    const { className, onCompleteAction } = props;
+    // STATE
+    const [state, dispatch] = useReducer(reducer, getInitialState(null));
+    let fileInput = useRef(null);
+    const [loadingLogo, setLoadingLogo] = useState(false);
+    const [anchorEl, setAnchorEl] = useState(null);
+    const [tab, setTab] = useState(0);
+    const [updating, setUpdating] = useState(false);
+    // INTL
+    const intl = useIntl();
+    // HANDLERS
+    const handleTabChange = (event, newValue) => {
+        setTab(newValue);
+    };
+    const handleOpen = useCallback((event) => {
+        setAnchorEl(event.currentTarget);
+    }, []);
+    const handleClose = useCallback(() => {
+        setAnchorEl(null);
+    }, []);
+    const fetchColors = () => {
+        dispatch({ type: actionTypes.LOADING, payload: { loading: true } });
+        PreferenceService.searchPreferences('', '', `${Preferences.COLORS_COLORBACK},${Preferences.COLORS_COLORPRIMARY},${Preferences.COLORS_COLORSECONDARY},${Preferences.COLORS_NAVBARBACK},${Preferences.COLORS_COLORFONT},${Preferences.COLORS_COLORFONTSECONDARY}`)
+            .then((res) => {
+            dispatch({
+                type: actionTypes.SET_COLORS,
+                payload: {
+                    loading: false,
+                    colors: res.results
+                }
+            });
+        })
+            .catch((e) => {
+            Logger.error(SCOPE_SC_UI, e);
+            dispatch({ type: actionTypes.SET_COLORS, payload: { loading: false, colors: [] } });
+        });
+    };
+    const fetchLogos = () => {
+        dispatch({ type: actionTypes.LOADING, payload: { loading: true } });
+        PreferenceService.searchPreferences('', '', `${Preferences.LOGO_NAVBAR_LOGO},${Preferences.LOGO_NAVBAR_LOGO_MOBILE}`)
+            .then((res) => {
+            dispatch({
+                type: actionTypes.SET_LOGOS,
+                payload: {
+                    loading: false,
+                    logos: res.results
+                }
+            });
+        })
+            .catch((e) => {
+            Logger.error(SCOPE_SC_UI, e);
+            dispatch({ type: actionTypes.SET_LOGOS, payload: { loading: false, logos: [] } });
+        });
+    };
+    const fetchSlogans = () => {
+        dispatch({ type: actionTypes.LOADING, payload: { loading: true } });
+        PreferenceService.searchPreferences('', '', `${Preferences.TEXT_APPLICATION_SLOGAN1},${Preferences.TEXT_APPLICATION_SLOGAN2}`)
+            .then((res) => {
+            dispatch({
+                type: actionTypes.SET_SLOGANS,
+                payload: {
+                    loading: false,
+                    slogans: res.results
+                }
+            });
+        })
+            .catch((e) => {
+            Logger.error(SCOPE_SC_UI, e);
+            dispatch({ type: actionTypes.SET_SLOGANS, payload: { loading: false, slogans: [] } });
+        });
+    };
+    const updatePreference = (preference) => __awaiter(this, void 0, void 0, function* () {
+        try {
+            yield PreferenceService.updatePreferences(preference);
+        }
+        catch (e) {
+            Logger.error(SCOPE_SC_UI, e);
+        }
+        finally {
+            setUpdating(false);
+            onCompleteAction();
+        }
+    });
+    const updateSlogans = () => __awaiter(this, void 0, void 0, function* () {
+        setUpdating(true);
+        try {
+            yield Promise.all(state.slogans.map(({ name, value }) => {
+                return updatePreference({ [name]: value });
+            }));
+        }
+        catch (e) {
+            Logger.error(SCOPE_SC_UI, e);
+        }
+        finally {
+            setUpdating(false);
+        }
+    });
+    const updateLogoPreference = (name) => __awaiter(this, void 0, void 0, function* () {
+        setLoadingLogo(true);
+        const formData = new FormData();
+        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+        // @ts-ignore
+        formData.append(name, fileInput);
+        yield PreferenceService.updatePreferences(formData)
+            .then((preference) => {
+            setLoadingLogo(false);
+            dispatch({
+                type: actionTypes.SET_LOGOS,
+                payload: { logos: state.logos.map((l) => (l.name === name ? Object.assign(Object.assign({}, l), { value: preference[name].value }) : l)) }
+            });
+            onCompleteAction();
+        })
+            .catch((e) => {
+            setLoadingLogo(false);
+            Logger.error(SCOPE_SC_UI, e);
+        });
+    });
+    /**
+     * Handles logo upload
+     * @param event
+     * @param name
+     */
+    const handleUpload = (event, name) => {
+        fileInput = event.target.files[0];
+        if (fileInput) {
+            updateLogoPreference(name);
+        }
+    };
+    useEffect(() => {
+        fetchColors();
+        fetchLogos();
+        fetchSlogans();
+    }, []);
+    // HANDLERS
+    const handleColorChange = (color, name) => {
+        const currentColor = state.colors.find((col) => col.name === name);
+        if (currentColor && currentColor.value !== color) {
+            dispatch({
+                type: actionTypes.SET_COLORS,
+                payload: { colors: state.colors.map((col) => (col.name === name ? Object.assign(Object.assign({}, col), { value: color }) : col)) }
+            });
+            setTimeout(() => {
+                updatePreference({ [`${name}`]: color });
+            }, 2000);
+        }
+    };
+    const handleChange = (event) => {
+        const { name, value } = event.target;
+        dispatch({
+            type: actionTypes.SET_SLOGANS,
+            payload: { slogans: state.slogans.map((s) => (s.name === name ? Object.assign(Object.assign({}, s), { value: value }) : s)) }
+        });
+    };
+    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, { children: [_jsx(Typography, Object.assign({ variant: "h4", className: classes.title, alignSelf: "self-start" }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.appearance", defaultMessage: "ui.onBoardingWidget.appearance" }) })), _jsx(Typography, Object.assign({ className: classes.summary }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.summary", defaultMessage: "ui.onBoardingWidget.step.appearance.summary" }) })), _jsx(Button, Object.assign({ variant: "outlined", size: "small", color: "primary", onClick: handleOpen }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.button", defaultMessage: "ui.onBoardingWidget.step.appearance.button" }) })), _jsxs(DrawerRoot, Object.assign({ className: classes.drawerRoot, anchor: "right", open: Boolean(anchorEl), onClose: handleClose }, { children: [_jsxs(Box, Object.assign({ className: classes.drawerHeader }, { children: [_jsx(Typography, Object.assign({ variant: "h4", color: "primary" }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.header.title", defaultMessage: "ui.onBoardingWidget.step.appearance.header.title" }) })), _jsx(IconButton, Object.assign({ className: classes.drawerHeaderAction, onClick: handleClose }, { children: _jsx(Icon, { children: "close" }) }))] })), _jsxs(Tabs, Object.assign({ value: tab, onChange: handleTabChange, variant: "scrollable", scrollButtons: "auto", "aria-label": "scrollable-tabs" }, { children: [_jsx(Tab, { label: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.colors.title", defaultMessage: "ui.onBoardingWidget.step.appearance.colors.title" }) }), _jsx(Tab, { label: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.logo.title", defaultMessage: "ui.onBoardingWidget.step.appearance.logo.title" }) }), _jsx(Tab, { label: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.titleSlogan.title", defaultMessage: "ui.onBoardingWidget.step.appearance.titleSlogan.title" }) })] })), _jsx(ScrollContainer, { children: _jsxs(Box, Object.assign({ className: classes.drawerContent }, { children: [tab === 0 && (_jsx(_Fragment, { children: state.colors.map((color) => (_jsxs(React.Fragment, { children: [_jsx(Typography, Object.assign({ variant: "h6" }, { children: formatColorLabel(color) })), _jsx(MuiColorInput, { className: classes.color, format: "hex", value: color.value, onChange: (newColor) => handleColorChange(newColor, color.name) })] }, color.id))) })), tab === 1 && (_jsx(_Fragment, { children: state.logos.map((logo) => (_jsxs(React.Fragment, { children: [_jsx(Typography, Object.assign({ variant: "h6" }, { children: formatLogoLabel(logo.name) })), _jsxs(Box, Object.assign({ className: classes.logoContainer }, { children: [_jsx("img", { src: logo.value, className: classes.logo }), _jsx("input", { type: "file", onChange: (event) => handleUpload(event, logo.name), ref: fileInput, hidden: true, accept: ".gif,.png,.jpg,.jpeg" }), _jsx(LoadingButton, Object.assign({ className: classes.uploadButton, onClick: () => fileInput.current.click(), loading: loadingLogo, disabled: loadingLogo }, { children: _jsx(Icon, { children: "upload" }) }))] }))] }, logo.id))) })), tab === 2 && (_jsxs(Box, { children: [_jsx(TextField, { multiline: true, fullWidth: true, 
+                                            //className={classes.field}
+                                            label: `${intl.formatMessage(messages.titleField)}`, margin: "normal", value: (_a = state === null || state === void 0 ? void 0 : state.slogans[0]) === null || _a === void 0 ? void 0 : _a.value, name: "application_slogan1", onChange: handleChange, InputProps: {
+                                                endAdornment: _jsx(Typography, Object.assign({ variant: "body2" }, { children: ((_b = state.slogans[0].value) === null || _b === void 0 ? void 0 : _b.length) ? 50 - ((_c = state.slogans[0].value) === null || _c === void 0 ? void 0 : _c.length) : 50 }))
+                                            }, error: Boolean(((_e = (_d = state === null || state === void 0 ? void 0 : state.slogans[0]) === null || _d === void 0 ? void 0 : _d.value) === null || _e === void 0 ? void 0 : _e.length) > 50) }), _jsx(TextField, { multiline: true, fullWidth: true, 
+                                            //className={classes.field}
+                                            label: `${intl.formatMessage(messages.sloganField)}`, margin: "normal", value: (_f = state === null || state === void 0 ? void 0 : state.slogans[1]) === null || _f === void 0 ? void 0 : _f.value, name: "application_slogan2", onChange: handleChange, InputProps: {
+                                                endAdornment: (_jsx(Typography, Object.assign({ variant: "body2" }, { children: ((_g = state.slogans[1].value) === null || _g === void 0 ? void 0 : _g.length) ? 150 - ((_h = state.slogans[1].value) === null || _h === void 0 ? void 0 : _h.length) : 150 })))
+                                            }, error: Boolean(((_k = (_j = state === null || state === void 0 ? void 0 : state.slogans[1]) === null || _j === void 0 ? void 0 : _j.value) === null || _k === void 0 ? void 0 : _k.length) > 150) }), _jsx(LoadingButton, Object.assign({ loading: updating, disabled: updating, variant: "outlined", size: "small", color: "primary", onClick: updateSlogans }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.titleSlogan.button", defaultMessage: "ui.onBoardingWidget.step.appearance.titleSlogan.button" }) }))] }))] })) })] }))] })));
+}

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

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

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

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

package/lib/esm/components/OnBoardingWidget/Steps/Appearance/reducer.d.ts

@@ -0,0 +1,15 @@
+export declare const actionTypes: {
+    LOADING: string;
+    SET_COLORS: string;
+    SET_LOGOS: string;
+    SET_SLOGANS: string;
+};
+export declare const initialState: {
+    loading: boolean;
+    colors: any[];
+    logos: any[];
+    slogans: any[];
+    modified: boolean;
+};
+export declare function getInitialState(data: any): any;
+export declare function reducer(state: any, action: any): any;

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,77 @@
+import { jsx as _jsx, jsxs as _jsxs } 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, useState } from 'react';
+import { FormattedMessage } from 'react-intl';
+import { PREFIX } from '../../constants';
+import CategoryA from '../../../../assets/onBoarding/CategoryA';
+import CategoryB from '../../../../assets/onBoarding/CategoryB';
+import ProgressBar from '../../../../shared/ProgressBar';
+import { SCOnBoardingStepStatusType } from '@selfcommunity/types';
+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`
+};
+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 >= 90) {
+                        clearInterval(intervalId);
+                        return prev;
+                    }
+                    return prev + 1;
+                });
+            }, 1000);
+            return () => clearInterval(intervalId);
+        }
+    }, [step.status]);
+    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" }) })), _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, Object.assign({ className: classes.image, component: "div" }, { children: _jsx(CategoryA, {}) })), _jsx(CardMedia, Object.assign({ className: classes.image, component: "div" }, { children: _jsx(CategoryB, {}) })), _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 ? (_jsx(ProgressBar, { value: progress, loadingMessage: _jsx(Typography, Object.assign({ variant: "h4" }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.categories.loading", defaultMessage: "ui.onBoardingWidget.step.categories.loading" }) })) })) : (_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,47 @@
+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, useState } from 'react';
+import { PREFIX } from '../../constants';
+import { FormattedMessage } from 'react-intl';
+import { SCOnBoardingStepStatusType } from '@selfcommunity/types';
+import ProgressBar from '../../../../shared/ProgressBar';
+const classes = {
+    root: `${PREFIX}-content-root`,
+    title: `${PREFIX}-content-title`,
+    summary: `${PREFIX}-content-summary`,
+    action: `${PREFIX}-content-action`
+};
+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 >= 90) {
+                        clearInterval(intervalId);
+                        return prev;
+                    }
+                    return prev + 1;
+                });
+            }, 1000);
+            return () => clearInterval(intervalId);
+        }
+    }, [step.status]);
+    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 ? (_jsx(ProgressBar, { value: progress, loadingMessage: _jsx(Typography, Object.assign({ variant: "h4" }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.contents.loading", defaultMessage: "ui.onBoardingWidget.step.contents.loading" }) })) })) : (_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;