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

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

@@ -0,0 +1,238 @@
+import { __awaiter, __rest } from "tslib";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from 'react';
+import { Accordion, AccordionDetails, AccordionSummary, Box, Button, CardContent, CardMedia, Checkbox, Chip, Fade, Icon, IconButton, List, ListItem, ListItemButton, ListItemIcon, ListItemText, Typography, useMediaQuery, useTheme } from '@mui/material';
+import { FormattedMessage } from 'react-intl';
+import { styled } from '@mui/material/styles';
+import classNames from 'classnames';
+import { useThemeProps } from '@mui/system';
+import Category from './Steps/Category';
+import { PREFIX } from './constants';
+import { getTheme, usePreviousValue, UserUtils, useSCContext, useSCPreferences, useSCTheme, useSCUser } from '@selfcommunity/react-core';
+import Appearance from './Steps/Appearance';
+import Profile from './Steps/Profile';
+import Invite from './Steps/Invite';
+import App from './Steps/App';
+import HiddenPlaceholder from '../../shared/HiddenPlaceholder';
+import Widget from '../Widget';
+import Content from './Steps/Content';
+import { SCOPE_SC_UI } from '../../constants/Errors';
+import { OnBoardingService, PreferenceService } from '@selfcommunity/api-services';
+import { Logger } from '@selfcommunity/utils';
+import { SCOnBoardingStepStatusType, SCOnBoardingStepType } from '@selfcommunity/types';
+import OnBoardingWidgetSkeleton from './Skeleton';
+import { closeSnackbar, useSnackbar } from 'notistack';
+import { CONSOLE_PROD, CONSOLE_STAGE } from '../PlatformWidget/constants';
+import HeaderPlaceholder from '../../assets/onBoarding/header';
+const classes = {
+    root: `${PREFIX}-root`,
+    content: `${PREFIX}-content`,
+    accordionRoot: `${PREFIX}-accordion-root`,
+    logo: `${PREFIX}-logo`,
+    intro: `${PREFIX}-intro`,
+    steps: `${PREFIX}-steps`,
+    stepsMobile: `${PREFIX}-steps-mobile`,
+    stepContent: `${PREFIX}-step-content`
+};
+const Root = styled(Widget, {
+    name: PREFIX,
+    slot: 'Root',
+    overridesResolver: (props, styles) => styles.root
+})(() => ({}));
+const AccordionRoot = styled(Accordion, {
+    name: PREFIX,
+    slot: 'AccordionRoot',
+    overridesResolver: (props, styles) => styles.accordionRoot
+})(() => ({}));
+const OnBoardingWidget = (inProps) => {
+    // PROPS
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    const { className, GenerateContentsParams = {}, onGeneratedContent = null, onHeightChange } = props, rest = __rest(props, ["className", "GenerateContentsParams", "onGeneratedContent", "onHeightChange"]);
+    // STATE
+    const [isLoading, setIsLoading] = useState(true);
+    const [initialized, setInitialized] = useState(false);
+    const [steps, setSteps] = useState([]);
+    const nextStep = useMemo(() => {
+        const step = steps === null || steps === void 0 ? void 0 : steps.find((step) => step.status === 'in_progress' || step.status === 'not_started');
+        return step || (steps === null || steps === void 0 ? void 0 : steps[0]);
+    }, [steps]);
+    const allStepsDone = useMemo(() => {
+        return steps === null || steps === void 0 ? void 0 : steps.every((step) => step.status === SCOnBoardingStepStatusType.COMPLETED);
+    }, [steps]);
+    const [expanded, setExpanded] = useState(!allStepsDone);
+    const [_step, setStep] = useState(nextStep);
+    const currentContentsStep = steps === null || steps === void 0 ? void 0 : steps.find((s) => s.step === SCOnBoardingStepType.CONTENTS);
+    const prevContentsStep = usePreviousValue(currentContentsStep);
+    const currentCategoriesStep = steps === null || steps === void 0 ? void 0 : steps.find((s) => s.step === SCOnBoardingStepType.CATEGORIES);
+    const prevCategoriesStep = usePreviousValue(currentCategoriesStep);
+    // CONTEXT
+    const scUserContext = useSCUser();
+    const isAdmin = useMemo(() => UserUtils.isCommunityCreator(scUserContext.user), [scUserContext.user]);
+    const scContext = useSCContext();
+    const scPreferencesContext = useSCPreferences();
+    const scThemeContext = useSCTheme();
+    const { enqueueSnackbar } = useSnackbar();
+    const isStage = scContext.settings.portal.includes('stage');
+    const [isGenerating, setIsGenerating] = useState(false);
+    // HOOKS
+    const theme = useTheme();
+    const isMobile = useMediaQuery(theme.breakpoints.down('md'));
+    // HANDLERS
+    const completeStep = (s) => __awaiter(void 0, void 0, void 0, function* () {
+        if (s.status !== SCOnBoardingStepStatusType.COMPLETED) {
+            yield OnBoardingService.completeAStep(s.id)
+                .then(() => {
+                setSteps((prev) => prev.map((item) => {
+                    if (item.id === s.id) {
+                        return Object.assign(Object.assign({}, item), { status: SCOnBoardingStepStatusType.COMPLETED, completion_percentage: 100 });
+                    }
+                    return item;
+                }));
+            })
+                .catch((error) => {
+                Logger.error(SCOPE_SC_UI, error);
+            });
+        }
+        s.step === SCOnBoardingStepType.APPEARANCE && handlePreferencesUpdate();
+    });
+    const showSuccessAlert = (step) => {
+        setIsGenerating(false);
+        enqueueSnackbar(_jsx(FormattedMessage, { id: `ui.onBoardingWidget.step.${step.step}.success`, defaultMessage: `ui.onBoardingWidget.step.${step.step}.success` }), {
+            action: (snackbarId) => (_jsxs(_Fragment, { children: [step.step === SCOnBoardingStepType.CATEGORIES && (_jsx(Button, Object.assign({ sx: { textTransform: 'uppercase', color: 'white' }, size: "small", variant: "text", href: isStage ? CONSOLE_STAGE : CONSOLE_PROD, target: "_blank" }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.categories.success.link", defaultMessage: "ui.onBoardingWidget.step.categories.success.link" }) }))), _jsx(IconButton, Object.assign({ sx: { color: 'white' }, onClick: () => closeSnackbar(snackbarId) }, { children: _jsx(Icon, { children: "close" }) }))] })),
+            variant: 'success',
+            autoHideDuration: 7000
+        });
+    };
+    const getSteps = () => __awaiter(void 0, void 0, void 0, function* () {
+        yield OnBoardingService.getAllSteps()
+            .then((res) => {
+            const contentStep = res.results.find((step) => step.step === SCOnBoardingStepType.CONTENTS);
+            setIsGenerating(res.results.some((step) => step.status === 'in_progress'));
+            setSteps(res.results);
+            setIsLoading(false);
+            if (contentStep.status === SCOnBoardingStepStatusType.IN_PROGRESS && contentStep.results.length !== 0 && onGeneratedContent) {
+                onGeneratedContent(contentStep.results);
+            }
+        })
+            .catch((error) => {
+            Logger.error(SCOPE_SC_UI, error);
+            setIsLoading(false);
+        });
+    });
+    const handleChange = (newStep) => {
+        setStep(newStep);
+    };
+    const handleExpand = () => {
+        setExpanded(!expanded);
+        onHeightChange && onHeightChange();
+    };
+    const generateContent = (stepId) => __awaiter(void 0, void 0, void 0, function* () {
+        yield OnBoardingService.startAStep(stepId, GenerateContentsParams)
+            .then(() => {
+            setIsGenerating(true);
+        })
+            .catch((error) => {
+            Logger.error(SCOPE_SC_UI, error);
+            enqueueSnackbar(_jsx(FormattedMessage, { id: "ui.common.error.action", defaultMessage: "ui.common.error.action" }), {
+                variant: 'error',
+                autoHideDuration: 3000
+            });
+        });
+    });
+    const handlePreferencesUpdate = () => {
+        PreferenceService.getAllPreferences().then((preferences) => {
+            const prefs = preferences['results'].reduce((obj, p) => (Object.assign(Object.assign({}, obj), { [`${p.section}.${p.name}`]: p })), {});
+            scPreferencesContext.setPreferences(prefs);
+            scThemeContext.setTheme(getTheme(scContext.settings.theme, prefs));
+        });
+    };
+    // EFFECTS
+    useEffect(() => {
+        if (prevContentsStep &&
+            prevCategoriesStep.status === SCOnBoardingStepStatusType.IN_PROGRESS &&
+            (currentContentsStep === null || currentContentsStep === void 0 ? void 0 : currentContentsStep.status) === SCOnBoardingStepStatusType.COMPLETED) {
+            showSuccessAlert(currentContentsStep);
+        }
+    }, [currentContentsStep, prevContentsStep]);
+    useEffect(() => {
+        if (prevCategoriesStep &&
+            prevCategoriesStep.status === SCOnBoardingStepStatusType.IN_PROGRESS &&
+            (currentCategoriesStep === null || currentCategoriesStep === void 0 ? void 0 : currentCategoriesStep.status) === SCOnBoardingStepStatusType.COMPLETED) {
+            showSuccessAlert(currentCategoriesStep);
+        }
+    }, [currentCategoriesStep, prevCategoriesStep]);
+    useEffect(() => {
+        if (!initialized && nextStep) {
+            setStep(nextStep);
+            setInitialized(true);
+        }
+    }, [initialized, nextStep]);
+    useEffect(() => {
+        setExpanded(!allStepsDone);
+        onHeightChange && onHeightChange();
+    }, [allStepsDone]);
+    useEffect(() => {
+        if (isAdmin) {
+            getSteps();
+            // eslint-disable-next-line @typescript-eslint/no-misused-promises
+            const intervalId = setInterval(getSteps, isGenerating ? 6000 : 3 * 60 * 1000);
+            return () => clearInterval(intervalId);
+        }
+    }, [scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user, isGenerating, isAdmin]);
+    /**
+     * Render _step content section
+     */
+    const getStepContent = () => {
+        const stepObj = steps === null || steps === void 0 ? void 0 : steps.find((obj) => obj.step === (_step === null || _step === void 0 ? void 0 : _step.step));
+        let content;
+        switch (stepObj === null || stepObj === void 0 ? void 0 : stepObj.step) {
+            case SCOnBoardingStepType.CONTENTS:
+                content = _jsx(Content, { step: stepObj, handleContentCreation: () => generateContent(stepObj.id) });
+                break;
+            case SCOnBoardingStepType.CATEGORIES:
+                content = _jsx(Category, { step: stepObj, handleCategoriesCreation: () => generateContent(stepObj.id) });
+                break;
+            case SCOnBoardingStepType.APPEARANCE:
+                content = _jsx(Appearance, { onCompleteAction: () => completeStep(stepObj) });
+                break;
+            case SCOnBoardingStepType.PROFILE:
+                content = _jsx(Profile, { onCompleteAction: () => completeStep(stepObj) });
+                break;
+            case SCOnBoardingStepType.INVITE:
+                content = _jsx(Invite, { onCompleteAction: () => completeStep(stepObj) });
+                break;
+            case SCOnBoardingStepType.APP:
+                content = _jsx(App, { step: stepObj, onCompleteAction: () => completeStep(stepObj) });
+                break;
+            default:
+                break;
+        }
+        return content;
+    };
+    if (!isAdmin) {
+        return _jsx(HiddenPlaceholder, {});
+    }
+    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: _jsxs(AccordionRoot, Object.assign({ defaultExpanded: true, onChange: handleExpand, className: classes.accordionRoot, expanded: expanded }, { children: [_jsx(AccordionSummary, Object.assign({ expandIcon: _jsx(Icon, Object.assign({ fontSize: "medium" }, { children: "expand_more" })), "aria-controls": "accordion", id: "onBoarding-accordion" }, { children: _jsx(_Fragment, { children: expanded ? (_jsxs(_Fragment, { children: [!isMobile ? (_jsx(CardMedia, { className: classes.logo, component: "img", src: HeaderPlaceholder })) : (_jsxs(Typography, Object.assign({ variant: "h4" }, { children: [_jsx(Icon, Object.assign({ color: "secondary", fontSize: "medium" }, { children: "ai_stars" })), _jsx(FormattedMessage, { id: "ui.onBoardingWidget.accordion.expanded.title.mobile", defaultMessage: "ui.onBoardingWidget.accordion.expanded.title.mobile", values: {
+                                                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                                                // @ts-ignore
+                                                b: (chunks) => _jsx("strong", { children: chunks })
+                                            } })] }))), _jsxs(Box, Object.assign({ className: classes.intro }, { children: [!isMobile && (_jsx(Typography, Object.assign({ variant: "h4" }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.accordion.expanded.title", defaultMessage: "ui.onBoardingWidget.accordion.expanded.title" }) }))), _jsx(Typography, Object.assign({ variant: "h5" }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.accordion.expanded.subtitle", defaultMessage: "ui.onBoardingWidget.accordion.expanded.subtitle" }) })), _jsx(Typography, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.accordion.expanded.summary", defaultMessage: "ui.onBoardingWidget.accordion.expanded.summary", values: {
+                                                    // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                                                    // @ts-ignore
+                                                    b: (chunks) => _jsx("strong", { children: chunks }),
+                                                    // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                                                    // @ts-ignore
+                                                    icon: (...chunks) => _jsx(Icon, { children: chunks })
+                                                } }) })] }))] })) : (_jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.accordion.collapsed", defaultMessage: "ui.onBoardingWidget.accordion.collapsed", values: {
+                                    // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                                    // @ts-ignore
+                                    b: (chunks) => _jsx("strong", { children: chunks }),
+                                    // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                                    // @ts-ignore
+                                    icon: (...chunks) => (_jsx(Icon, Object.assign({ color: "secondary", fontSize: "medium" }, { children: chunks })))
+                                } }) }))) }) })), _jsx(AccordionDetails, { children: _jsx(Widget, Object.assign({ className: classes.content, elevation: 0 }, { children: isLoading ? (_jsx(OnBoardingWidgetSkeleton, {})) : (_jsxs(CardContent, { children: [_jsx(List, Object.assign({ className: isMobile ? classes.stepsMobile : classes.steps }, { children: steps === null || steps === void 0 ? void 0 : steps.map((step) => (_jsx(ListItem, { children: isMobile ? (_jsx(Chip, { size: "small", label: _jsxs(_Fragment, { children: [_jsx(FormattedMessage, { id: `ui.onBoardingWidget.${step.step}`, defaultMessage: `ui.onBoardingWidget.${step.step}` }), ' ', step.status === SCOnBoardingStepStatusType.COMPLETED && (_jsx(Icon, Object.assign({ color: (step === null || step === void 0 ? void 0 : step.status) === SCOnBoardingStepStatusType.COMPLETED && (step === null || step === void 0 ? void 0 : step.step) !== (_step === null || _step === void 0 ? void 0 : _step.step) ? 'success' : 'inherit' }, { children: "check" })))] }), onClick: () => handleChange(step), variant: step.step === (_step === null || _step === void 0 ? void 0 : _step.step) ? 'filled' : 'outlined', color: step.status === SCOnBoardingStepStatusType.COMPLETED ? 'success' : 'default' })) : (_jsxs(ListItemButton, Object.assign({ onClick: () => handleChange(step), selected: (step === null || step === void 0 ? void 0 : step.step) === (_step === null || _step === void 0 ? void 0 : _step.step) }, { children: [_jsx(ListItemIcon, { children: _jsx(Checkbox, { edge: "start", checked: step.status === SCOnBoardingStepStatusType.COMPLETED, tabIndex: -1, disableRipple: true, inputProps: { 'aria-labelledby': step.step }, size: 'small' }) }), _jsx(ListItemText, { primary: _jsx(FormattedMessage, { id: `ui.onBoardingWidget.${step.step}`, defaultMessage: `ui.onBoardingWidget.${step.step}` }) })] }))) }, step.id))) })), _jsx(Box, Object.assign({ className: classes.stepContent }, { children: _jsx(Fade, Object.assign({ in: true, timeout: 2400 }, { children: _jsx(Box, { children: getStepContent() }) })) }))] })) })) })] })) })));
+};
+export default OnBoardingWidget;

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

@@ -0,0 +1 @@
+export default function OnBoardingWidgetSkeleton(): JSX.Element;

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

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Chip, List, ListItem, ListItemButton, ListItemIcon, ListItemText, useMediaQuery, useTheme } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import Skeleton from '@mui/material/Skeleton';
+import { PREFIX } from './constants';
+const classes = {
+    root: `${PREFIX}-skeleton-root`,
+    menu: `${PREFIX}-skeleton-menu`,
+    content: `${PREFIX}-skeleton-content`
+};
+const Root = styled(Box, {
+    name: PREFIX,
+    slot: 'SkeletonRoot'
+})(() => ({}));
+export default function OnBoardingWidgetSkeleton() {
+    const theme = useTheme();
+    const isMobile = useMediaQuery(theme.breakpoints.down('md'));
+    const steps = Array(isMobile ? 3 : 5).fill(null);
+    return (_jsxs(Root, Object.assign({ className: classes.root }, { children: [_jsx(Box, Object.assign({ className: classes.menu }, { children: isMobile ? (_jsx(Box, Object.assign({ sx: { display: 'flex', justifyContent: 'space-evenly' } }, { children: steps.map((_, index) => (_jsx(Chip, { label: _jsx(Skeleton, { variant: "text", width: 80 }), variant: "outlined" }, index))) }))) : (_jsx(List, { children: steps.map((_, index) => (_jsx(ListItem, { children: _jsxs(ListItemButton, { children: [_jsx(ListItemIcon, { children: _jsx(Skeleton, { variant: "rectangular", width: 20, height: 20 }) }), _jsx(ListItemText, { primary: _jsx(Skeleton, { variant: "text", width: 100 }) })] }) }, index))) })) })), _jsxs(Box, Object.assign({ className: classes.content }, { children: [_jsx(Skeleton, { variant: "text", width: '20%', height: 40 }), _jsx(Skeleton, { variant: "text", width: '80%', height: 20 }), _jsx(Skeleton, { variant: "text", width: '70%', height: 20 }), _jsx(Skeleton, { variant: "text", width: '60%', height: 20 }), _jsx(Skeleton, { variant: "rectangular", width: 100, height: 36, style: { borderRadius: '20px', alignSelf: 'center', marginTop: 24 } })] }))] })));
+}

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

@@ -0,0 +1,18 @@
+import { SCStepType } from '@selfcommunity/types';
+export interface AppProps {
+    /**
+     * The content step
+     */
+    step: SCStepType;
+    /**
+     * 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 App(inProps: AppProps): JSX.Element;

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

@@ -0,0 +1,71 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { 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, CardMedia, Icon, Tab, Tabs, Typography } from '@mui/material';
+import { FormattedMessage } from 'react-intl';
+import { SCOnBoardingStepStatusType } from '@selfcommunity/types';
+import AndroidPlaceholder from '../../../../assets/onBoarding/android';
+import IosPlaceholder from '../../../../assets/onBoarding/ios';
+const classes = {
+    root: `${PREFIX}-app-root`,
+    title: `${PREFIX}-app-title`,
+    tabs: `${PREFIX}-app-tabs`,
+    tabContent: `${PREFIX}-app-tab-content`,
+    summary: `${PREFIX}-app-summary`,
+    step: `${PREFIX}-app-step`,
+    image: `${PREFIX}-app-image`,
+    action: `${PREFIX}-app-action`,
+    button: `${PREFIX}-app-button`
+};
+const Root = styled(Box, {
+    name: PREFIX,
+    slot: 'AppRoot'
+})(() => ({}));
+export default function App(inProps) {
+    // PROPS
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    //PROPS
+    const { className, step, onCompleteAction } = props;
+    // STATE
+    const [tab, setTab] = useState(0);
+    // HANDLERS
+    const handleChange = (event, newValue) => {
+        setTab(newValue);
+    };
+    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.step.app.title", defaultMessage: "ui.onBoardingWidget.step.app.title" }) })), _jsx(Typography, Object.assign({ className: classes.summary }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.app.summary", defaultMessage: "ui.onBoardingWidget.step.app.summary" }) })), _jsxs(Tabs, Object.assign({ className: classes.tabs, value: tab, onChange: handleChange, centered: true, variant: "fullWidth", indicatorColor: "primary" }, { children: [_jsx(Tab, { label: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.app.tab.android", defaultMessage: "ui.onBoardingWidget.step.app.tab.android" }) }), _jsx(Tab, { label: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.app.tab.ios", defaultMessage: "ui.onBoardingWidget.step.app.tab.ios" }) })] })), _jsxs(Box, Object.assign({ className: classes.tabContent }, { children: [tab === 0 && (_jsxs(_Fragment, { children: [_jsx(Typography, Object.assign({ className: classes.summary }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.app.android", defaultMessage: "ui.onBoardingWidget.step.app.android" }) })), _jsx(Typography, Object.assign({ className: classes.step }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.app.android.a", defaultMessage: "ui.onBoardingWidget.step.app.android.a", values: {
+                                        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                                        // @ts-ignore
+                                        icon: (...chunks) => _jsx(Icon, Object.assign({ fontSize: "medium" }, { children: chunks })),
+                                        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                                        // @ts-ignore
+                                        b: (...chunks) => _jsx("strong", { children: chunks })
+                                    } }) })), _jsx(Typography, Object.assign({ className: classes.step }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.app.android.b", defaultMessage: "ui.onBoardingWidget.step.app.android.b", values: {
+                                        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                                        // @ts-ignore
+                                        icon: (...chunks) => _jsx(Icon, Object.assign({ fontSize: "medium" }, { children: chunks })),
+                                        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                                        // @ts-ignore
+                                        b: (...chunks) => _jsx("strong", { children: chunks })
+                                    } }) })), _jsx(CardMedia, { className: classes.image, component: "img", src: AndroidPlaceholder })] })), tab === 1 && (_jsxs(_Fragment, { children: [_jsx(Typography, Object.assign({ className: classes.summary }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.app.ios", defaultMessage: "ui.onBoardingWidget.step.app.ios" }) })), _jsx(Typography, Object.assign({ className: classes.step }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.app.ios.a", defaultMessage: "ui.onBoardingWidget.step.app.ios.a", values: {
+                                        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                                        // @ts-ignore
+                                        icon: (...chunks) => _jsx(Icon, Object.assign({ fontSize: "medium" }, { children: chunks })),
+                                        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                                        // @ts-ignore
+                                        b: (...chunks) => _jsx("strong", { children: chunks })
+                                    } }) })), _jsx(Typography, Object.assign({ className: classes.step }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.app.ios.b", defaultMessage: "ui.onBoardingWidget.step.app.ios.b", values: {
+                                        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                                        // @ts-ignore
+                                        icon: (...chunks) => _jsx(Icon, Object.assign({ fontSize: "medium" }, { children: chunks })),
+                                        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                                        // @ts-ignore
+                                        b: (...chunks) => _jsx("strong", { children: chunks })
+                                    } }) })), _jsx(CardMedia, { className: classes.image, component: "img", src: IosPlaceholder })] })), _jsx(Button, Object.assign({ className: classes.button, size: "small", variant: "outlined", color: "secondary", onClick: onCompleteAction, disabled: (step === null || step === void 0 ? void 0 : step.status) === SCOnBoardingStepStatusType.COMPLETED || (step === null || step === void 0 ? void 0 : step.status) === SCOnBoardingStepStatusType.IN_PROGRESS }, { children: "Ok!" }))] }))] })));
+}

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

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

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

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

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

@@ -0,0 +1,13 @@
+export interface AppearanceProps {
+    /**
+     * 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 Appearance(inProps: AppearanceProps): JSX.Element;

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;