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

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

@@ -0,0 +1,226 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = tslib_1.__importStar(require("react"));
+const styles_1 = require("@mui/material/styles");
+const Box_1 = tslib_1.__importDefault(require("@mui/material/Box"));
+const system_1 = require("@mui/system");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const react_core_1 = require("@selfcommunity/react-core");
+const constants_1 = require("../../constants");
+const material_1 = require("@mui/material");
+const mui_color_input_1 = require("mui-color-input");
+const reducer_1 = require("./reducer");
+const reducer_2 = require("./reducer");
+const api_services_1 = require("@selfcommunity/api-services");
+const onBoarding_1 = require("../../../../utils/onBoarding");
+const react_intl_1 = require("react-intl");
+const Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
+const Errors_1 = require("../../../../constants/Errors");
+const utils_1 = require("@selfcommunity/utils");
+const lab_1 = require("@mui/lab");
+const ScrollContainer_1 = tslib_1.__importDefault(require("../../../../shared/ScrollContainer"));
+const messages = (0, react_intl_1.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: `${constants_1.PREFIX}-appearance-root`,
+    title: `${constants_1.PREFIX}-appearance-title`,
+    summary: `${constants_1.PREFIX}-appearance-summary`,
+    color: `${constants_1.PREFIX}-appearance-color`,
+    logoContainer: `${constants_1.PREFIX}-appearance-logo-container`,
+    logo: `${constants_1.PREFIX}-appearance-logo`,
+    uploadButton: `${constants_1.PREFIX}-appearance-upload-button`,
+    drawerRoot: `${constants_1.PREFIX}-appearance-drawer-root`,
+    drawerHeader: `${constants_1.PREFIX}-appearance-drawer-header`,
+    drawerHeaderAction: `${constants_1.PREFIX}-appearance-drawer-header-action`,
+    drawerContent: `${constants_1.PREFIX}-appearance-drawer-content`
+};
+const Root = (0, styles_1.styled)(Box_1.default, {
+    name: constants_1.PREFIX,
+    slot: 'AppearanceRoot'
+})(() => ({}));
+const DrawerRoot = (0, styles_1.styled)(material_1.Drawer, {
+    name: constants_1.PREFIX,
+    slot: 'AppearanceDrawerRoot',
+    overridesResolver: (props, styles) => styles.appearanceDrawerRoot
+})(({ theme }) => ({}));
+function Appearance(inProps) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    // PROPS
+    const props = (0, system_1.useThemeProps)({
+        props: inProps,
+        name: constants_1.PREFIX
+    });
+    const { className, onCompleteAction } = props;
+    // STATE
+    const [state, dispatch] = (0, react_1.useReducer)(reducer_2.reducer, (0, reducer_2.getInitialState)(null));
+    let fileInput = (0, react_1.useRef)(null);
+    const [loadingLogo, setLoadingLogo] = (0, react_1.useState)(false);
+    const [anchorEl, setAnchorEl] = (0, react_1.useState)(null);
+    const [tab, setTab] = (0, react_1.useState)(0);
+    const [updating, setUpdating] = (0, react_1.useState)(false);
+    // INTL
+    const intl = (0, react_intl_1.useIntl)();
+    // HANDLERS
+    const handleTabChange = (event, newValue) => {
+        setTab(newValue);
+    };
+    const handleOpen = (0, react_1.useCallback)((event) => {
+        setAnchorEl(event.currentTarget);
+    }, []);
+    const handleClose = (0, react_1.useCallback)(() => {
+        setAnchorEl(null);
+    }, []);
+    const fetchColors = () => {
+        dispatch({ type: reducer_1.actionTypes.LOADING, payload: { loading: true } });
+        api_services_1.PreferenceService.searchPreferences('', '', `${react_core_1.Preferences.COLORS_COLORBACK},${react_core_1.Preferences.COLORS_COLORPRIMARY},${react_core_1.Preferences.COLORS_COLORSECONDARY},${react_core_1.Preferences.COLORS_NAVBARBACK},${react_core_1.Preferences.COLORS_COLORFONT},${react_core_1.Preferences.COLORS_COLORFONTSECONDARY}`)
+            .then((res) => {
+            dispatch({
+                type: reducer_1.actionTypes.SET_COLORS,
+                payload: {
+                    loading: false,
+                    colors: res.results
+                }
+            });
+        })
+            .catch((e) => {
+            utils_1.Logger.error(Errors_1.SCOPE_SC_UI, e);
+            dispatch({ type: reducer_1.actionTypes.SET_COLORS, payload: { loading: false, colors: [] } });
+        });
+    };
+    const fetchLogos = () => {
+        dispatch({ type: reducer_1.actionTypes.LOADING, payload: { loading: true } });
+        api_services_1.PreferenceService.searchPreferences('', '', `${react_core_1.Preferences.LOGO_NAVBAR_LOGO},${react_core_1.Preferences.LOGO_NAVBAR_LOGO_MOBILE}`)
+            .then((res) => {
+            dispatch({
+                type: reducer_1.actionTypes.SET_LOGOS,
+                payload: {
+                    loading: false,
+                    logos: res.results
+                }
+            });
+        })
+            .catch((e) => {
+            utils_1.Logger.error(Errors_1.SCOPE_SC_UI, e);
+            dispatch({ type: reducer_1.actionTypes.SET_LOGOS, payload: { loading: false, logos: [] } });
+        });
+    };
+    const fetchSlogans = () => {
+        dispatch({ type: reducer_1.actionTypes.LOADING, payload: { loading: true } });
+        api_services_1.PreferenceService.searchPreferences('', '', `${react_core_1.Preferences.TEXT_APPLICATION_SLOGAN1},${react_core_1.Preferences.TEXT_APPLICATION_SLOGAN2}`)
+            .then((res) => {
+            dispatch({
+                type: reducer_1.actionTypes.SET_SLOGANS,
+                payload: {
+                    loading: false,
+                    slogans: res.results
+                }
+            });
+        })
+            .catch((e) => {
+            utils_1.Logger.error(Errors_1.SCOPE_SC_UI, e);
+            dispatch({ type: reducer_1.actionTypes.SET_SLOGANS, payload: { loading: false, slogans: [] } });
+        });
+    };
+    const updatePreference = (preference) => tslib_1.__awaiter(this, void 0, void 0, function* () {
+        try {
+            yield api_services_1.PreferenceService.updatePreferences(preference);
+        }
+        catch (e) {
+            utils_1.Logger.error(Errors_1.SCOPE_SC_UI, e);
+        }
+        finally {
+            setUpdating(false);
+            onCompleteAction();
+        }
+    });
+    const updateSlogans = () => tslib_1.__awaiter(this, void 0, void 0, function* () {
+        setUpdating(true);
+        try {
+            yield Promise.all(state.slogans.map(({ name, value }) => {
+                return updatePreference({ [name]: value });
+            }));
+        }
+        catch (e) {
+            utils_1.Logger.error(Errors_1.SCOPE_SC_UI, e);
+        }
+        finally {
+            setUpdating(false);
+        }
+    });
+    const updateLogoPreference = (name) => tslib_1.__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 api_services_1.PreferenceService.updatePreferences(formData)
+            .then((preference) => {
+            setLoadingLogo(false);
+            dispatch({
+                type: reducer_1.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);
+            utils_1.Logger.error(Errors_1.SCOPE_SC_UI, e);
+        });
+    });
+    /**
+     * Handles logo upload
+     * @param event
+     * @param name
+     */
+    const handleUpload = (event, name) => {
+        fileInput = event.target.files[0];
+        if (fileInput) {
+            updateLogoPreference(name);
+        }
+    };
+    (0, react_1.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: reducer_1.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: reducer_1.actionTypes.SET_SLOGANS,
+            payload: { slogans: state.slogans.map((s) => (s.name === name ? Object.assign(Object.assign({}, s), { value: value }) : s)) }
+        });
+    };
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h4", className: classes.title, alignSelf: "self-start" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.appearance", defaultMessage: "ui.onBoardingWidget.appearance" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.summary }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.summary", defaultMessage: "ui.onBoardingWidget.step.appearance.summary" }) })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "outlined", size: "small", color: "primary", onClick: handleOpen }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.button", defaultMessage: "ui.onBoardingWidget.step.appearance.button" }) })), (0, jsx_runtime_1.jsxs)(DrawerRoot, Object.assign({ className: classes.drawerRoot, anchor: "right", open: Boolean(anchorEl), onClose: handleClose }, { children: [(0, jsx_runtime_1.jsxs)(Box_1.default, Object.assign({ className: classes.drawerHeader }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h4", color: "primary" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.header.title", defaultMessage: "ui.onBoardingWidget.step.appearance.header.title" }) })), (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: classes.drawerHeaderAction, onClick: handleClose }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "close" }) }))] })), (0, jsx_runtime_1.jsxs)(material_1.Tabs, Object.assign({ value: tab, onChange: handleTabChange, variant: "scrollable", scrollButtons: "auto", "aria-label": "scrollable-tabs" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Tab, { label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.colors.title", defaultMessage: "ui.onBoardingWidget.step.appearance.colors.title" }) }), (0, jsx_runtime_1.jsx)(material_1.Tab, { label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.logo.title", defaultMessage: "ui.onBoardingWidget.step.appearance.logo.title" }) }), (0, jsx_runtime_1.jsx)(material_1.Tab, { label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.titleSlogan.title", defaultMessage: "ui.onBoardingWidget.step.appearance.titleSlogan.title" }) })] })), (0, jsx_runtime_1.jsx)(ScrollContainer_1.default, { children: (0, jsx_runtime_1.jsxs)(Box_1.default, Object.assign({ className: classes.drawerContent }, { children: [tab === 0 && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: state.colors.map((color) => ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h6" }, { children: (0, onBoarding_1.formatColorLabel)(color) })), (0, jsx_runtime_1.jsx)(mui_color_input_1.MuiColorInput, { className: classes.color, format: "hex", value: color.value, onChange: (newColor) => handleColorChange(newColor, color.name) })] }, color.id))) })), tab === 1 && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: state.logos.map((logo) => ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h6" }, { children: (0, onBoarding_1.formatLogoLabel)(logo.name) })), (0, jsx_runtime_1.jsxs)(Box_1.default, Object.assign({ className: classes.logoContainer }, { children: [(0, jsx_runtime_1.jsx)("img", { src: logo.value, className: classes.logo }), (0, jsx_runtime_1.jsx)("input", { type: "file", onChange: (event) => handleUpload(event, logo.name), ref: fileInput, hidden: true, accept: ".gif,.png,.jpg,.jpeg" }), (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ className: classes.uploadButton, onClick: () => fileInput.current.click(), loading: loadingLogo, disabled: loadingLogo }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "upload" }) }))] }))] }, logo.id))) })), tab === 2 && ((0, jsx_runtime_1.jsxs)(Box_1.default, { children: [(0, jsx_runtime_1.jsx)(material_1.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: (0, jsx_runtime_1.jsx)(material_1.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) }), (0, jsx_runtime_1.jsx)(material_1.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: ((0, jsx_runtime_1.jsx)(material_1.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) }), (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ loading: updating, disabled: updating, variant: "outlined", size: "small", color: "primary", onClick: updateSlogans }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.titleSlogan.button", defaultMessage: "ui.onBoardingWidget.step.appearance.titleSlogan.button" }) }))] }))] })) })] }))] })));
+}
+exports.default = Appearance;

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

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

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

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const Appearance_1 = tslib_1.__importDefault(require("./Appearance"));
+exports.default = Appearance_1.default;

package/lib/cjs/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/cjs/components/OnBoardingWidget/Steps/Appearance/reducer.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.reducer = exports.getInitialState = exports.initialState = exports.actionTypes = void 0;
+exports.actionTypes = {
+    LOADING: '_loading',
+    SET_COLORS: '_set_colors',
+    SET_LOGOS: '_set_logos',
+    SET_SLOGANS: '_set_slogans'
+};
+exports.initialState = {
+    loading: false,
+    colors: [],
+    logos: [],
+    slogans: [],
+    modified: false
+};
+function getInitialState(data) {
+    if (data) {
+        return Object.assign(Object.assign({}, exports.initialState), data);
+    }
+    return exports.initialState;
+}
+exports.getInitialState = getInitialState;
+function reducer(state, action) {
+    let _state = Object.assign({}, state);
+    switch (action.type) {
+        case exports.actionTypes.LOADING:
+            _state = Object.assign(Object.assign({}, state), { loading: action.payload.loading });
+            break;
+        case exports.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 exports.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 exports.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;
+}
+exports.reducer = reducer;

package/lib/cjs/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/cjs/components/OnBoardingWidget/Steps/Category/Category.js

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

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

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

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

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const Category_1 = tslib_1.__importDefault(require("./Category"));
+exports.default = Category_1.default;

package/lib/cjs/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/cjs/components/OnBoardingWidget/Steps/Content/Content.js

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

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

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

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

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const Content_1 = tslib_1.__importDefault(require("./Content"));
+exports.default = Content_1.default;

package/lib/cjs/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/cjs/components/OnBoardingWidget/Steps/Invite/Invite.js

@@ -0,0 +1,54 @@
+"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 styles_1 = require("@mui/material/styles");
+const Box_1 = tslib_1.__importDefault(require("@mui/material/Box"));
+const system_1 = require("@mui/system");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const constants_1 = require("../../constants");
+const material_1 = require("@mui/material");
+const react_intl_1 = require("react-intl");
+const react_core_1 = require("@selfcommunity/react-core");
+const SocialShare_1 = require("../../../../constants/SocialShare");
+const constants_2 = require("../../../PlatformWidget/constants");
+const classes = {
+    root: `${constants_1.PREFIX}-invite-root`,
+    title: `${constants_1.PREFIX}-invite-title`,
+    social: `${constants_1.PREFIX}-invite-social`,
+    email: `${constants_1.PREFIX}-invite-email`,
+    iconContainer: `${constants_1.PREFIX}-invite-social-icon-container`,
+    icon: `${constants_1.PREFIX}-invite-social-icon`,
+    action: `${constants_1.PREFIX}-invite-action`
+};
+const Root = (0, styles_1.styled)(Box_1.default, {
+    name: constants_1.PREFIX,
+    slot: 'InviteRoot'
+})(() => ({}));
+function Invite(inProps) {
+    // PROPS
+    const props = (0, system_1.useThemeProps)({
+        props: inProps,
+        name: constants_1.PREFIX
+    });
+    const { className, onCompleteAction = null } = props;
+    // CONTEXT
+    const scContext = (0, react_core_1.useSCContext)();
+    const scPreferencesContext = (0, react_1.useContext)(react_core_1.SCPreferencesContext);
+    const facebookShareEnabled = react_core_1.SCPreferences.ADDONS_SHARE_POST_ON_FACEBOOK_ENABLED in scPreferencesContext.preferences &&
+        scPreferencesContext.preferences[react_core_1.SCPreferences.ADDONS_SHARE_POST_ON_FACEBOOK_ENABLED].value;
+    const xShareEnabled = react_core_1.SCPreferences.ADDONS_SHARE_POST_ON_TWITTER_ENABLED in scPreferencesContext.preferences &&
+        scPreferencesContext.preferences[react_core_1.SCPreferences.ADDONS_SHARE_POST_ON_TWITTER_ENABLED].value;
+    const linkedinShareEnabled = react_core_1.SCPreferences.ADDONS_SHARE_POST_ON_LINKEDIN_ENABLED in scPreferencesContext.preferences &&
+        scPreferencesContext.preferences[react_core_1.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 ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h4", className: classes.title }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.invite", defaultMessage: "ui.onBoardingWidget.invite" }) })), (0, jsx_runtime_1.jsxs)(Box_1.default, Object.assign({ className: classes.social }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.title, variant: "h4" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.invite.social.title", defaultMessage: "ui.onBoardingWidget.step.invite.social.title" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "subtitle1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.invite.social.subtitle", defaultMessage: "ui.onBoardingWidget.step.invite.social.subtitle" }) })), (0, jsx_runtime_1.jsxs)(Box_1.default, Object.assign({ className: classes.iconContainer }, { children: [facebookShareEnabled && ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: () => handleShare(SocialShare_1.FACEBOOK_SHARE + url, 'facebook') }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ classes: { root: classes.icon } }, { children: "facebook" })) }))), xShareEnabled && ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: () => handleShare(SocialShare_1.X_SHARE + url, 'x') }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ classes: { root: classes.icon } }, { children: "twitter" })) }))), linkedinShareEnabled && ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: () => handleShare(SocialShare_1.LINKEDIN_SHARE + url, 'linkedin') }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ classes: { root: classes.icon } }, { children: "linkedin" })) })))] }))] })), (0, jsx_runtime_1.jsxs)(Box_1.default, Object.assign({ className: classes.email }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.title, variant: "h4" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.invite.email.title", defaultMessage: "ui.onBoardingWidget.step.invite.email.title" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "subtitle1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.invite.email.subtitle", defaultMessage: "ui.onBoardingWidget.step.invite.email.subtitle" }) }))] })), (0, jsx_runtime_1.jsx)(Box_1.default, Object.assign({ component: "span", className: classes.action }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "outlined", size: "small", component: react_core_1.Link, to: isStage ? constants_2.MAKE_MARKETING_STAGE : constants_2.MAKE_MARKETING_PROD, target: "_blank", onClick: onCompleteAction }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.onBoardingWidget.step.invite.button", id: "ui.onBoardingWidget.step.invite.button" }) })) }))] })));
+}
+exports.default = Invite;

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

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

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

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const Invite_1 = tslib_1.__importDefault(require("./Invite"));
+exports.default = Invite_1.default;