@selfcommunity/react-ui 0.8.0-alpha.14 → 0.8.0-alpha.16

package/lib/cjs/components/OnBoardingWidget/OnBoardingWidget.d.ts

@@ -1,5 +1,5 @@
 import { StartStepParams } from '@selfcommunity/api-services';
-import { SCFeedObjectType } from '@selfcommunity/types';
+import { SCFeedObjectType, SCOnBoardingStepType } from '@selfcommunity/types';
 import { VirtualScrollerItemProps } from '../../types/virtualScroller';
 export interface OnBoardingWidgetProps extends VirtualScrollerItemProps {
     /**
@@ -18,6 +18,15 @@ export interface OnBoardingWidgetProps extends VirtualScrollerItemProps {
      * @default null
      */
     onGeneratedContent?: (feedObjs: SCFeedObjectType[]) => void;
+    /**
+     * Force widget expanded
+     * @default false
+     */
+    forceExpanded?: boolean;
+    /**
+     * The initial step to display
+     */
+    initialStep?: SCOnBoardingStepType;
 }
 declare const OnBoardingWidget: (inProps: OnBoardingWidgetProps) => JSX.Element;
 export default OnBoardingWidget;

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

@@ -27,6 +27,7 @@ const notistack_1 = require("notistack");
 const constants_2 = require("../PlatformWidget/constants");
 const header_1 = tslib_1.__importDefault(require("../../assets/onBoarding/header"));
 const BaseDialog_1 = tslib_1.__importDefault(require("../../shared/BaseDialog"));
+const onBoarding_1 = require("../../utils/onBoarding");
 const classes = {
     root: `${constants_1.PREFIX}-root`,
     content: `${constants_1.PREFIX}-content`,
@@ -53,7 +54,7 @@ const OnBoardingWidget = (inProps) => {
         props: inProps,
         name: constants_1.PREFIX
     });
-    const { className, GenerateContentsParams = {}, onGeneratedContent = null, onHeightChange } = props, rest = tslib_1.__rest(props, ["className", "GenerateContentsParams", "onGeneratedContent", "onHeightChange"]);
+    const { className, GenerateContentsParams = {}, onGeneratedContent = null, onHeightChange, onStateChange, forceExpanded = false, initialStep } = props, rest = tslib_1.__rest(props, ["className", "GenerateContentsParams", "onGeneratedContent", "onHeightChange", "onStateChange", "forceExpanded", "initialStep"]);
     // STATE
     const [loading, setLoading] = (0, react_1.useState)(true);
     const [initialized, setInitialized] = (0, react_1.useState)(false);
@@ -65,7 +66,7 @@ const OnBoardingWidget = (inProps) => {
     const allStepsDone = (0, react_1.useMemo)(() => {
         return steps === null || steps === void 0 ? void 0 : steps.every((step) => step.status === types_1.SCOnBoardingStepStatusType.COMPLETED);
     }, [steps]);
-    const [expanded, setExpanded] = (0, react_1.useState)(!allStepsDone);
+    const [expanded, setExpanded] = (0, react_1.useState)(!allStepsDone || forceExpanded);
     const [_step, setStep] = (0, react_1.useState)(nextStep);
     const currentContentsStep = steps === null || steps === void 0 ? void 0 : steps.find((s) => s.step === types_1.SCOnBoardingStepType.CONTENTS);
     const prevContentsStep = (0, react_core_1.usePreviousValue)(currentContentsStep);
@@ -86,6 +87,15 @@ const OnBoardingWidget = (inProps) => {
     const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
     const { categories, isLoading } = (0, react_core_1.useSCFetchCategories)();
     // HANDLERS
+    /**
+     * Notify changes to Feed if the Widget is contained
+     */
+    const notifyLayoutChanges = (0, react_1.useMemo)(() => (state) => {
+        if (onStateChange && state) {
+            onStateChange(state);
+        }
+        onHeightChange && onHeightChange();
+    }, [onStateChange, onHeightChange]);
     const completeStep = (s) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
         if (s.status !== types_1.SCOnBoardingStepStatusType.COMPLETED) {
             yield api_services_1.OnBoardingService.completeAStep(s.id)
@@ -116,7 +126,7 @@ const OnBoardingWidget = (inProps) => {
             .then((res) => {
             const contentStep = res.results.find((step) => step.step === types_1.SCOnBoardingStepType.CONTENTS);
             setIsGenerating(res.results.some((step) => step.status === 'in_progress'));
-            setSteps(res.results);
+            setSteps((0, onBoarding_1.forceStepPosition)(res.results, initialStep));
             setLoading(false);
             if (contentStep.status === types_1.SCOnBoardingStepStatusType.IN_PROGRESS && contentStep.results.length !== 0 && onGeneratedContent) {
                 onGeneratedContent(contentStep.results);
@@ -131,8 +141,9 @@ const OnBoardingWidget = (inProps) => {
         setStep(newStep);
     };
     const handleExpand = () => {
-        setExpanded(!expanded);
-        onHeightChange && onHeightChange();
+        const _expanded = !expanded;
+        setExpanded(_expanded);
+        notifyLayoutChanges({ forceExpanded: _expanded });
     };
     const generateContent = (stepId) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
         if (!isLoading && !categories.length) {
@@ -178,11 +189,13 @@ const OnBoardingWidget = (inProps) => {
         if (!initialized && nextStep) {
             setStep(nextStep);
             setInitialized(true);
+            notifyLayoutChanges({ forceExpanded: expanded });
         }
     }, [initialized, nextStep]);
     (0, react_1.useEffect)(() => {
-        setExpanded(!allStepsDone);
-        onHeightChange && onHeightChange();
+        const _expanded = !allStepsDone;
+        setExpanded(_expanded);
+        notifyLayoutChanges({ forceExpanded: _expanded });
     }, [allStepsDone]);
     (0, react_1.useEffect)(() => {
         if (isAdmin) {
@@ -242,6 +255,7 @@ const OnBoardingWidget = (inProps) => {
                                     b: (chunks) => (0, jsx_runtime_1.jsx)("strong", { children: chunks }),
                                     // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
                                     // @ts-ignore
+                                    // eslint-disable-next-line prettier/prettier
                                     icon: (...chunks) => (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ color: "secondary", fontSize: "medium" }, { children: chunks }))
                                 } }) }))) }) })), (0, jsx_runtime_1.jsx)(material_1.AccordionDetails, { children: (0, jsx_runtime_1.jsx)(Widget_1.default, Object.assign({ className: classes.content, elevation: 0 }, { children: loading ? ((0, jsx_runtime_1.jsx)(Skeleton_1.default, {})) : ((0, jsx_runtime_1.jsxs)(material_1.CardContent, { children: [(0, jsx_runtime_1.jsx)(material_1.List, Object.assign({ className: isMobile ? classes.stepsMobile : classes.steps }, { children: steps === null || steps === void 0 ? void 0 : steps.map((step) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: isMobile ? ((0, jsx_runtime_1.jsx)(material_1.Chip, { size: "small", label: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.onBoardingWidget.${step.step}`, defaultMessage: `ui.onBoardingWidget.${step.step}` }), ' ', step.status === types_1.SCOnBoardingStepStatusType.COMPLETED && ((0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ color: (step === null || step === void 0 ? void 0 : step.status) === types_1.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 === types_1.SCOnBoardingStepStatusType.COMPLETED ? 'success' : 'default' })) : ((0, jsx_runtime_1.jsxs)(material_1.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: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(material_1.Checkbox, { edge: "start", checked: step.status === types_1.SCOnBoardingStepStatusType.COMPLETED, tabIndex: -1, disableRipple: true, inputProps: { 'aria-labelledby': step.step }, size: 'small' }) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.onBoardingWidget.${step.step}`, defaultMessage: `ui.onBoardingWidget.${step.step}` }) })] }))) }, step.id))) })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.stepContent }, { children: [(0, jsx_runtime_1.jsx)(material_1.Fade, Object.assign({ in: true, timeout: 2400 }, { children: (0, jsx_runtime_1.jsx)(material_1.Box, { children: getStepContent() }) })), showCategoriesModal && ((0, jsx_runtime_1.jsx)(BaseDialog_1.default, Object.assign({ title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.ai.no.categories", defaultMessage: "ui.onBoardingWidget.ai.no.categories" }), DialogContentProps: { dividers: false }, open: showCategoriesModal, onClose: () => setShowCategoriesModal(false), actions: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ color: "secondary", onClick: () => setShowCategoriesModal(false) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.ai.no.categories.cancel", defaultMessage: "ui.onBoardingWidget.ai.no.categories.cancel" }) })) }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ color: "primary", href: isStage ? constants_2.CONSOLE_STAGE : constants_2.CONSOLE_PROD, onClick: () => setShowCategoriesModal(false), target: "_blank", startIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ fontSize: "small" }, { children: "edit" })) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.ai.no.categories.link", defaultMessage: "ui.onBoardingWidget.ai.no.categories.link" }) })) })))] }))] })) })) })] })) })));
 };

package/lib/cjs/utils/onBoarding.d.ts

@@ -1,2 +1,3 @@
 export declare function formatColorLabel(obj: any): any;
 export declare function formatLogoLabel(obj: any): any;
+export declare function forceStepPosition(steps: any, initialStep: any): any;

package/lib/cjs/utils/onBoarding.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.formatLogoLabel = exports.formatColorLabel = void 0;
+exports.forceStepPosition = exports.formatLogoLabel = exports.formatColorLabel = void 0;
 function formatColorLabel(obj) {
     let { name } = obj;
     const colorIndex = name.toLowerCase().indexOf('color');
@@ -18,3 +18,12 @@ function formatLogoLabel(obj) {
         .join(' ');
 }
 exports.formatLogoLabel = formatLogoLabel;
+function forceStepPosition(steps, initialStep) {
+    const index = steps.findIndex((el) => el.step === initialStep);
+    if (index !== -1) {
+        const [element] = steps.splice(index, 1);
+        steps.unshift(element);
+    }
+    return steps;
+}
+exports.forceStepPosition = forceStepPosition;

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

@@ -1,5 +1,5 @@
 import { StartStepParams } from '@selfcommunity/api-services';
-import { SCFeedObjectType } from '@selfcommunity/types';
+import { SCFeedObjectType, SCOnBoardingStepType } from '@selfcommunity/types';
 import { VirtualScrollerItemProps } from '../../types/virtualScroller';
 export interface OnBoardingWidgetProps extends VirtualScrollerItemProps {
     /**
@@ -18,6 +18,15 @@ export interface OnBoardingWidgetProps extends VirtualScrollerItemProps {
      * @default null
      */
     onGeneratedContent?: (feedObjs: SCFeedObjectType[]) => void;
+    /**
+     * Force widget expanded
+     * @default false
+     */
+    forceExpanded?: boolean;
+    /**
+     * The initial step to display
+     */
+    initialStep?: SCOnBoardingStepType;
 }
 declare const OnBoardingWidget: (inProps: OnBoardingWidgetProps) => JSX.Element;
 export default OnBoardingWidget;

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

@@ -25,6 +25,7 @@ import { closeSnackbar, useSnackbar } from 'notistack';
 import { CONSOLE_PROD, CONSOLE_STAGE } from '../PlatformWidget/constants';
 import HeaderPlaceholder from '../../assets/onBoarding/header';
 import BaseDialog from '../../shared/BaseDialog';
+import { forceStepPosition } from '../../utils/onBoarding';
 const classes = {
     root: `${PREFIX}-root`,
     content: `${PREFIX}-content`,
@@ -51,7 +52,7 @@ const OnBoardingWidget = (inProps) => {
         props: inProps,
         name: PREFIX
     });
-    const { className, GenerateContentsParams = {}, onGeneratedContent = null, onHeightChange } = props, rest = __rest(props, ["className", "GenerateContentsParams", "onGeneratedContent", "onHeightChange"]);
+    const { className, GenerateContentsParams = {}, onGeneratedContent = null, onHeightChange, onStateChange, forceExpanded = false, initialStep } = props, rest = __rest(props, ["className", "GenerateContentsParams", "onGeneratedContent", "onHeightChange", "onStateChange", "forceExpanded", "initialStep"]);
     // STATE
     const [loading, setLoading] = useState(true);
     const [initialized, setInitialized] = useState(false);
@@ -63,7 +64,7 @@ const OnBoardingWidget = (inProps) => {
     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 [expanded, setExpanded] = useState(!allStepsDone || forceExpanded);
     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);
@@ -84,6 +85,15 @@ const OnBoardingWidget = (inProps) => {
     const isMobile = useMediaQuery(theme.breakpoints.down('md'));
     const { categories, isLoading } = useSCFetchCategories();
     // HANDLERS
+    /**
+     * Notify changes to Feed if the Widget is contained
+     */
+    const notifyLayoutChanges = useMemo(() => (state) => {
+        if (onStateChange && state) {
+            onStateChange(state);
+        }
+        onHeightChange && onHeightChange();
+    }, [onStateChange, onHeightChange]);
     const completeStep = (s) => __awaiter(void 0, void 0, void 0, function* () {
         if (s.status !== SCOnBoardingStepStatusType.COMPLETED) {
             yield OnBoardingService.completeAStep(s.id)
@@ -114,7 +124,7 @@ const OnBoardingWidget = (inProps) => {
             .then((res) => {
             const contentStep = res.results.find((step) => step.step === SCOnBoardingStepType.CONTENTS);
             setIsGenerating(res.results.some((step) => step.status === 'in_progress'));
-            setSteps(res.results);
+            setSteps(forceStepPosition(res.results, initialStep));
             setLoading(false);
             if (contentStep.status === SCOnBoardingStepStatusType.IN_PROGRESS && contentStep.results.length !== 0 && onGeneratedContent) {
                 onGeneratedContent(contentStep.results);
@@ -129,8 +139,9 @@ const OnBoardingWidget = (inProps) => {
         setStep(newStep);
     };
     const handleExpand = () => {
-        setExpanded(!expanded);
-        onHeightChange && onHeightChange();
+        const _expanded = !expanded;
+        setExpanded(_expanded);
+        notifyLayoutChanges({ forceExpanded: _expanded });
     };
     const generateContent = (stepId) => __awaiter(void 0, void 0, void 0, function* () {
         if (!isLoading && !categories.length) {
@@ -176,11 +187,13 @@ const OnBoardingWidget = (inProps) => {
         if (!initialized && nextStep) {
             setStep(nextStep);
             setInitialized(true);
+            notifyLayoutChanges({ forceExpanded: expanded });
         }
     }, [initialized, nextStep]);
     useEffect(() => {
-        setExpanded(!allStepsDone);
-        onHeightChange && onHeightChange();
+        const _expanded = !allStepsDone;
+        setExpanded(_expanded);
+        notifyLayoutChanges({ forceExpanded: _expanded });
     }, [allStepsDone]);
     useEffect(() => {
         if (isAdmin) {
@@ -240,6 +253,7 @@ const OnBoardingWidget = (inProps) => {
                                     b: (chunks) => _jsx("strong", { children: chunks }),
                                     // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
                                     // @ts-ignore
+                                    // eslint-disable-next-line prettier/prettier
                                     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: loading ? (_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))) })), _jsxs(Box, Object.assign({ className: classes.stepContent }, { children: [_jsx(Fade, Object.assign({ in: true, timeout: 2400 }, { children: _jsx(Box, { children: getStepContent() }) })), showCategoriesModal && (_jsx(BaseDialog, Object.assign({ title: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.ai.no.categories", defaultMessage: "ui.onBoardingWidget.ai.no.categories" }), DialogContentProps: { dividers: false }, open: showCategoriesModal, onClose: () => setShowCategoriesModal(false), actions: _jsx(Button, Object.assign({ color: "secondary", onClick: () => setShowCategoriesModal(false) }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.ai.no.categories.cancel", defaultMessage: "ui.onBoardingWidget.ai.no.categories.cancel" }) })) }, { children: _jsx(Button, Object.assign({ color: "primary", href: isStage ? CONSOLE_STAGE : CONSOLE_PROD, onClick: () => setShowCategoriesModal(false), target: "_blank", startIcon: _jsx(Icon, Object.assign({ fontSize: "small" }, { children: "edit" })) }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.ai.no.categories.link", defaultMessage: "ui.onBoardingWidget.ai.no.categories.link" }) })) })))] }))] })) })) })] })) })));
 };

package/lib/esm/utils/onBoarding.d.ts

@@ -1,2 +1,3 @@
 export declare function formatColorLabel(obj: any): any;
 export declare function formatLogoLabel(obj: any): any;
+export declare function forceStepPosition(steps: any, initialStep: any): any;

package/lib/esm/utils/onBoarding.js

@@ -13,3 +13,11 @@ export function formatLogoLabel(obj) {
         .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
         .join(' ');
 }
+export function forceStepPosition(steps, initialStep) {
+    const index = steps.findIndex((el) => el.step === initialStep);
+    if (index !== -1) {
+        const [element] = steps.splice(index, 1);
+        steps.unshift(element);
+    }
+    return steps;
+}