@selfcommunity/react-ui 0.8.0-alpha.4 → 0.8.0-alpha.6

package/lib/esm/components/EventForm/EventForm.js

@@ -1,7 +1,7 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { LoadingButton } from '@mui/lab';
-import { Box, Button, FormControl, FormGroup, Icon, IconButton, InputAdornment, InputLabel, MenuItem, Paper, Select, Stack, Switch, TextField, Typography } from '@mui/material';
+import { Box, FormControl, FormGroup, Icon, IconButton, InputAdornment, InputLabel, MenuItem, Paper, Select, Stack, Switch, TextField, Typography } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import { useThemeProps } from '@mui/system';
 import { LocalizationProvider, MobileDatePicker, MobileTimePicker } from '@mui/x-date-pickers';
@@ -14,15 +14,16 @@ import classNames from 'classnames';
 import enLocale from 'date-fns/locale/en-US';
 import itLocale from 'date-fns/locale/it';
 import PubSub from 'pubsub-js';
-import { useMemo, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { SCOPE_SC_UI } from '../../constants/Errors';
 import { EVENT_DESCRIPTION_MAX_LENGTH, EVENT_TITLE_MAX_LENGTH } from '../../constants/Event';
 import { SCGroupEventType, SCTopicType } from '../../constants/PubSub';
 import BaseDialog from '../../shared/BaseDialog';
-import { PREFIX } from './constants';
+import { DAILY_LATER_DAYS, MONTHLY_LATER_DAYS, NEVER_LATER_DAYS, PREFIX, WEEKLY_LATER_DAYS } from './constants';
 import EventAddress from './EventAddress';
 import UploadEventCover from './UploadEventCover';
+import { combineDateAndTime, getLaterDaysDate, getLaterHoursDate, getNewDate } from './utils';
 const messages = defineMessages({
     name: {
         id: 'ui.eventForm.name.placeholder',
@@ -111,7 +112,7 @@ const Root = styled(BaseDialog, {
  * @param inProps
  */
 export default function EventForm(inProps) {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d;
     //PROPS
     const props = useThemeProps({
         props: inProps,
@@ -122,13 +123,15 @@ export default function EventForm(inProps) {
     const scContext = useSCContext();
     // INTL
     const intl = useIntl();
+    const startDateTime = useMemo(() => getNewDate(event === null || event === void 0 ? void 0 : event.start_date), [event]);
+    const endDateTime = useMemo(() => getNewDate(event === null || event === void 0 ? void 0 : event.end_date), [event]);
     const initialFieldState = {
         imageOriginal: (event === null || event === void 0 ? void 0 : event.image_bigger) || '',
         imageOriginalFile: '',
-        startDate: event ? new Date(event.start_date) : null,
-        startTime: event ? new Date(event.start_date) : null,
-        endDate: (event === null || event === void 0 ? void 0 : event.end_date) ? new Date(event.end_date) : null,
-        endTime: (event === null || event === void 0 ? void 0 : event.end_date) ? new Date(event.end_date) : null,
+        startDate: event ? startDateTime : getNewDate(),
+        startTime: event ? startDateTime : getLaterHoursDate(1),
+        endDate: (event === null || event === void 0 ? void 0 : event.end_date) ? endDateTime : getNewDate(),
+        endTime: (event === null || event === void 0 ? void 0 : event.end_date) ? endDateTime : getLaterHoursDate(3),
         location: (event === null || event === void 0 ? void 0 : event.location) || SCEventLocationType.PERSON,
         geolocation: (event === null || event === void 0 ? void 0 : event.geolocation) || '',
         lat: (event === null || event === void 0 ? void 0 : event.geolocation_lat) || null,
@@ -138,8 +141,7 @@ export default function EventForm(inProps) {
         name: (event === null || event === void 0 ? void 0 : event.name) || '',
         description: event ? event.description : '',
         isPublic: (_a = (event === null || event === void 0 ? void 0 : event.privacy) === SCEventPrivacyType.PUBLIC) !== null && _a !== void 0 ? _a : true,
-        isSubmitting: false,
-        showEndDateTime: (_b = !!(event === null || event === void 0 ? void 0 : event.end_date)) !== null && _b !== void 0 ? _b : false
+        isSubmitting: false
     };
     // STATE
     const [field, setField] = useState(initialFieldState);
@@ -148,23 +150,12 @@ export default function EventForm(inProps) {
     const scPreferences = useSCPreferences();
     const privateEnabled = useMemo(() => scPreferences.preferences[SCPreferences.CONFIGURATIONS_EVENTS_PRIVATE_ENABLED].value, [scPreferences.preferences]);
     const visibilityEnabled = useMemo(() => scPreferences.preferences[SCPreferences.CONFIGURATIONS_EVENTS_VISIBILITY_ENABLED].value, [scPreferences.preferences]);
-    const disablePastStartTime = useMemo(() => (field.startDate ? new Date(field.startDate).getDate() === new Date().getDate() : false), [field]);
-    const disablePastEndTime = useMemo(() => (field.endDate ? new Date(field.endDate).getDate() === new Date().getDate() : false), [field]);
+    const disablePastStartTime = useMemo(() => field.startDate.getDate() === getNewDate().getDate(), [field]);
+    const disablePastEndTime = useMemo(() => field.endDate.getDate() === getNewDate().getDate(), [field]);
     const _backgroundCover = Object.assign({}, (field.imageOriginal
         ? { background: `url('${field.imageOriginal}') center / cover` }
         : { background: `url('${scPreferences.preferences[SCPreferences.IMAGES_USER_DEFAULT_COVER].value}') center / cover` }));
-    const combineDateAndTime = (date, time) => {
-        if (date && time) {
-            const combined = new Date(date);
-            combined.setHours(time.getHours());
-            combined.setMinutes(time.getMinutes());
-            combined.setSeconds(time.getSeconds());
-            combined.setMilliseconds(time.getMilliseconds());
-            return combined.toISOString();
-        }
-        return null;
-    };
-    function handleChangeCover(cover) {
+    const handleChangeCover = useCallback((cover) => {
         setField((prev) => (Object.assign(Object.assign({}, prev), { ['imageOriginalFile']: cover })));
         const reader = new FileReader();
         reader.onloadend = () => {
@@ -175,27 +166,25 @@ export default function EventForm(inProps) {
             delete error.imageOriginalError;
             setError(error);
         }
-    }
+    }, [error]);
     /**
      * Notify when a group info changed
      * @param data
      */
-    function notifyChanges(data) {
-        if (data) {
-            if (event) {
-                // Edit group
-                PubSub.publish(`${SCTopicType.EVENT}.${SCGroupEventType.EDIT}`, data);
-            }
-            else {
-                // Create group
-                PubSub.publish(`${SCTopicType.EVENT}.${SCGroupEventType.CREATE}`, data);
-            }
+    const notifyChanges = useCallback((data) => {
+        if (event) {
+            // Edit group
+            PubSub.publish(`${SCTopicType.EVENT}.${SCGroupEventType.EDIT}`, data);
         }
-    }
-    const handleGeoData = (data) => {
+        else {
+            // Create group
+            PubSub.publish(`${SCTopicType.EVENT}.${SCGroupEventType.CREATE}`, data);
+        }
+    }, [event]);
+    const handleGeoData = useCallback((data) => {
         setField((prev) => (Object.assign(Object.assign({}, prev), data)));
-    };
-    const handleSubmit = () => {
+    }, []);
+    const handleSubmit = useCallback(() => {
         setField((prev) => (Object.assign(Object.assign({}, prev), { ['isSubmitting']: true })));
         const formData = new FormData();
         if (field.imageOriginalFile) {
@@ -204,14 +193,12 @@ export default function EventForm(inProps) {
         formData.append('name', field.name);
         formData.append('start_date', combineDateAndTime(field.startDate, field.startTime));
         formData.append('recurring', field.recurring);
-        if (field.endDate) {
-            formData.append('end_date', combineDateAndTime(field.endDate, field.endTime));
-        }
+        formData.append('end_date', combineDateAndTime(field.endDate, field.endTime));
         formData.append('location', field.location);
         if (field.location === SCEventLocationType.ONLINE) {
             formData.append('link', field.link);
         }
-        if (field.location === SCEventLocationType.PERSON) {
+        else if (field.location === SCEventLocationType.PERSON) {
             formData.append('geolocation', field.geolocation);
             formData.append('geolocation_lat', field.lat.toString());
             formData.append('geolocation_lng', field.lng.toString());
@@ -250,28 +237,52 @@ export default function EventForm(inProps) {
             setField((prev) => (Object.assign(Object.assign({}, prev), { ['isSubmitting']: false })));
             Logger.error(SCOPE_SC_UI, e);
         });
-    };
-    const handleChange = (event) => {
+    }, [field, privateEnabled, visibilityEnabled]);
+    const handleChange = useCallback((event) => {
         const { name, value } = event.target;
         setField((prev) => (Object.assign(Object.assign({}, prev), { [name]: value })));
         if (error[`${name}Error`]) {
             delete error[`${name}Error`];
             setError(error);
         }
-    };
-    const handleChangeDateTime = (value, name) => {
+    }, [error]);
+    const handleChangeDateTime = useCallback((value, name) => {
         setField((prev) => (Object.assign(Object.assign({}, prev), { [name]: value })));
         if (error[`${name}Error`]) {
             delete error[`${name}Error`];
             setError(error);
         }
-    };
+    }, [error]);
+    const shouldDisabledDate = useCallback((date) => {
+        let disabled = false;
+        switch (field.recurring) {
+            case SCEventRecurrenceType.DAILY:
+                disabled = date.getTime() > getLaterDaysDate(DAILY_LATER_DAYS).getTime();
+                break;
+            case SCEventRecurrenceType.WEEKLY:
+                disabled = date.getTime() > getLaterDaysDate(WEEKLY_LATER_DAYS).getTime();
+                break;
+            case SCEventRecurrenceType.MONTHLY:
+                disabled = date.getTime() > getLaterDaysDate(MONTHLY_LATER_DAYS).getTime();
+                break;
+            case SCEventRecurrenceType.NEVER:
+            default:
+                disabled = date.getTime() > getLaterDaysDate(NEVER_LATER_DAYS).getTime();
+        }
+        if (field.startDate.getDate() > date.getDate()) {
+            disabled = true;
+        }
+        return disabled;
+    }, [field]);
+    const shouldDisabledTime = useCallback((date, _view) => field.startTime.getTime() > date.getTime(), [field]);
     /**
      * Renders root object
      */
     return (_jsx(Root, Object.assign({ DialogContentProps: { dividers: false }, title: event ? (_jsx(FormattedMessage, { id: "ui.eventForm.title.edit", defaultMessage: "ui.eventForm.title.edit" })) : (_jsx(FormattedMessage, { id: "ui.eventForm.title", defaultMessage: "ui.eventForm.title" })), open: open, onClose: onClose, className: classNames(classes.root, className), actions: _jsx(LoadingButton, Object.assign({ loading: field.isSubmitting, disabled: !field.name ||
                 !field.startDate ||
                 !field.startTime ||
+                !field.endDate ||
+                !field.endTime ||
                 (field.location === SCEventLocationType.ONLINE && !field.link) ||
                 (field.location === SCEventLocationType.PERSON && !field.geolocation) ||
                 (field.recurring !== SCEventRecurrenceType.NEVER && !field.endDate && !field.endTime) ||
@@ -300,11 +311,11 @@ export default function EventForm(inProps) {
                                             return _jsx("em", { children: `${intl.formatMessage(messages.frequencyPlaceholder)}` });
                                         }
                                         return (_jsx(FormattedMessage, { id: `ui.eventForm.frequency.${selected}.placeholder`, defaultMessage: `ui.eventForm.frequency.${selected}.placeholder` }));
-                                    }, startAdornment: _jsx(InputAdornment, Object.assign({ position: "start" }, { children: _jsx(IconButton, { children: _jsx(Icon, { children: "frequency" }) }) })) }, { children: Object.values(SCEventRecurrenceType).map((f) => (_jsx(MenuItem, Object.assign({ value: f }, { children: _jsx(FormattedMessage, { id: `ui.eventForm.frequency.${f}.placeholder`, defaultMessage: `ui.eventForm.frequency.${f}.placeholder` }) }), f))) }))] })), (field.showEndDateTime || field.recurring !== SCEventRecurrenceType.NEVER) && (_jsx(Box, Object.assign({ className: classes.dateTime }, { children: _jsxs(LocalizationProvider, Object.assign({ dateAdapter: AdapterDateFns, adapterLocale: scContext.settings.locale.default === 'it' ? itLocale : enLocale }, { children: [_jsx(MobileDatePicker, { className: classes.picker, disablePast: true, label: field.endDate && _jsx(FormattedMessage, { id: "ui.eventForm.date.end.placeholder", defaultMessage: "ui.eventForm.date.end.placeholder" }), value: field.endDate, slots: {
+                                    }, startAdornment: _jsx(InputAdornment, Object.assign({ position: "start" }, { children: _jsx(IconButton, { children: _jsx(Icon, { children: "frequency" }) }) })) }, { children: Object.values(SCEventRecurrenceType).map((f) => (_jsx(MenuItem, Object.assign({ value: f }, { children: _jsx(FormattedMessage, { id: `ui.eventForm.frequency.${f}.placeholder`, defaultMessage: `ui.eventForm.frequency.${f}.placeholder` }) }), f))) }))] })), _jsx(Box, Object.assign({ className: classes.dateTime }, { children: _jsxs(LocalizationProvider, Object.assign({ dateAdapter: AdapterDateFns, adapterLocale: scContext.settings.locale.default === 'it' ? itLocale : enLocale }, { children: [_jsx(MobileDatePicker, { className: classes.picker, disablePast: true, label: _jsx(FormattedMessage, { id: "ui.eventForm.date.end.placeholder", defaultMessage: "ui.eventForm.date.end.placeholder" }), value: field.endDate, slots: {
                                             textField: (params) => (_jsx(TextField, Object.assign({}, params, { InputProps: Object.assign(Object.assign({}, params.InputProps), { placeholder: `${intl.formatMessage(messages.endDate)}`, startAdornment: (_jsx(InputAdornment, Object.assign({ position: "start" }, { children: _jsx(IconButton, { children: _jsx(Icon, { children: "calendar_off" }) }) }))) }) })))
-                                        }, onChange: (value) => handleChangeDateTime(value, 'endDate') }), _jsx(MobileTimePicker, { className: classes.picker, disablePast: disablePastEndTime, label: field.endTime && _jsx(FormattedMessage, { id: "ui.eventForm.time.end.placeholder", defaultMessage: "ui.eventForm.time.end.placeholder" }), value: field.endTime, slots: {
+                                        }, onChange: (value) => handleChangeDateTime(value, 'endDate'), shouldDisableDate: shouldDisabledDate }), _jsx(MobileTimePicker, { className: classes.picker, disablePast: disablePastEndTime, label: field.endTime && _jsx(FormattedMessage, { id: "ui.eventForm.time.end.placeholder", defaultMessage: "ui.eventForm.time.end.placeholder" }), value: field.endTime, slots: {
                                             textField: (params) => (_jsx(TextField, Object.assign({}, params, { InputProps: Object.assign(Object.assign({}, params.InputProps), { placeholder: `${intl.formatMessage(messages.endTime)}`, startAdornment: (_jsx(InputAdornment, Object.assign({ position: "start" }, { children: _jsx(IconButton, { children: _jsx(Icon, { children: "access_time" }) }) }))) }) })))
-                                        }, onChange: (value) => handleChangeDateTime(value, 'endTime') })] })) }))), _jsx(Button, Object.assign({ variant: "text", color: "secondary", onClick: () => setField((prev) => (Object.assign(Object.assign({}, prev), { ['showEndDateTime']: !field.showEndDateTime }))), disabled: field.showEndDateTime && field.recurring !== SCEventRecurrenceType.NEVER }, { children: _jsx(FormattedMessage, { id: "ui.eventForm.dateTime.placeholder", defaultMessage: "ui.eventForm.dateTime.placeholder", values: { symbol: field.showEndDateTime ? '-' : '+' } }) })), _jsx(EventAddress, { forwardGeolocationData: handleGeoData, event: event !== null && event !== void 0 ? event : null }), privateEnabled && (_jsxs(Box, Object.assign({ className: classes.privacySection }, { children: [_jsxs(Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center", justifyContent: "center" }, { children: [_jsxs(Typography, Object.assign({ className: classNames(classes.switchLabel, { [classes.active]: !field.isPublic }) }, { children: [_jsx(Icon, { children: "private" }), _jsx(FormattedMessage, { id: "ui.eventForm.privacy.private", defaultMessage: "ui.eventForm.privacy.private" })] })), _jsx(Switch, { className: classes.switch, checked: field.isPublic, onChange: () => setField((prev) => (Object.assign(Object.assign({}, prev), { ['isPublic']: !field.isPublic }))) }), _jsxs(Typography, Object.assign({ className: classNames(classes.switchLabel, { [classes.active]: field.isPublic }) }, { children: [_jsx(Icon, { children: "public" }), _jsx(FormattedMessage, { id: "ui.eventForm.privacy.public", defaultMessage: "ui.eventForm.privacy.public" })] }))] })), _jsx(Typography, Object.assign({ variant: "body2", textAlign: "center", className: classes.privacySectionInfo }, { children: field.isPublic ? (_jsx(FormattedMessage, { id: "ui.eventForm.privacy.public.info", defaultMessage: "ui.eventForm.privacy.public.info", values: {
+                                        }, onChange: (value) => handleChangeDateTime(value, 'endTime'), shouldDisableTime: shouldDisabledTime })] })) })), _jsx(EventAddress, { forwardGeolocationData: handleGeoData, event: event !== null && event !== void 0 ? event : null }), privateEnabled && (_jsxs(Box, Object.assign({ className: classes.privacySection }, { children: [_jsxs(Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center", justifyContent: "center" }, { children: [_jsxs(Typography, Object.assign({ className: classNames(classes.switchLabel, { [classes.active]: !field.isPublic }) }, { children: [_jsx(Icon, { children: "private" }), _jsx(FormattedMessage, { id: "ui.eventForm.privacy.private", defaultMessage: "ui.eventForm.privacy.private" })] })), _jsx(Switch, { className: classes.switch, checked: field.isPublic, onChange: () => setField((prev) => (Object.assign(Object.assign({}, prev), { ['isPublic']: !field.isPublic }))) }), _jsxs(Typography, Object.assign({ className: classNames(classes.switchLabel, { [classes.active]: field.isPublic }) }, { children: [_jsx(Icon, { children: "public" }), _jsx(FormattedMessage, { id: "ui.eventForm.privacy.public", defaultMessage: "ui.eventForm.privacy.public" })] }))] })), _jsx(Typography, Object.assign({ variant: "body2", textAlign: "center", className: classes.privacySectionInfo }, { children: field.isPublic ? (_jsx(FormattedMessage, { id: "ui.eventForm.privacy.public.info", defaultMessage: "ui.eventForm.privacy.public.info", values: {
                                             // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
                                             // @ts-ignore
                                             b: (chunks) => _jsx("strong", { children: chunks })
@@ -313,6 +324,6 @@ export default function EventForm(inProps) {
                                             // @ts-ignore
                                             b: (chunks) => _jsx("strong", { children: chunks })
                                         } })) }))] }))), _jsx(TextField, { multiline: true, className: classes.description, placeholder: `${intl.formatMessage(messages.description)}`, margin: "normal", value: field.description, name: "description", onChange: handleChange, InputProps: {
-                                endAdornment: (_jsx(Typography, Object.assign({ variant: "body2" }, { children: ((_c = field.description) === null || _c === void 0 ? void 0 : _c.length) ? EVENT_DESCRIPTION_MAX_LENGTH - field.description.length : EVENT_DESCRIPTION_MAX_LENGTH })))
-                            }, error: Boolean(((_d = field.description) === null || _d === void 0 ? void 0 : _d.length) > EVENT_DESCRIPTION_MAX_LENGTH), helperText: ((_e = field.description) === null || _e === void 0 ? void 0 : _e.length) > EVENT_DESCRIPTION_MAX_LENGTH ? (_jsx(FormattedMessage, { id: "ui.eventForm.description.error.maxLength", defaultMessage: "ui.eventForm.description.error.maxLength" })) : null })] }))] }) })));
+                                endAdornment: (_jsx(Typography, Object.assign({ variant: "body2" }, { children: ((_b = field.description) === null || _b === void 0 ? void 0 : _b.length) ? EVENT_DESCRIPTION_MAX_LENGTH - field.description.length : EVENT_DESCRIPTION_MAX_LENGTH })))
+                            }, error: Boolean(((_c = field.description) === null || _c === void 0 ? void 0 : _c.length) > EVENT_DESCRIPTION_MAX_LENGTH), helperText: ((_d = field.description) === null || _d === void 0 ? void 0 : _d.length) > EVENT_DESCRIPTION_MAX_LENGTH ? (_jsx(FormattedMessage, { id: "ui.eventForm.description.error.maxLength", defaultMessage: "ui.eventForm.description.error.maxLength" })) : null })] }))] }) })));
 }

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

@@ -1 +1,5 @@
 export declare const PREFIX = "SCEventForm";
+export declare const NEVER_LATER_DAYS = 14;
+export declare const DAILY_LATER_DAYS = 60;
+export declare const WEEKLY_LATER_DAYS = 360;
+export declare const MONTHLY_LATER_DAYS = 730;

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

@@ -1 +1,5 @@
 export const PREFIX = 'SCEventForm';
+export const NEVER_LATER_DAYS = 14;
+export const DAILY_LATER_DAYS = 60;
+export const WEEKLY_LATER_DAYS = 360;
+export const MONTHLY_LATER_DAYS = 730;

package/lib/esm/components/EventForm/types.d.ts

@@ -22,7 +22,6 @@ export declare type InitialFieldState = Geolocation & {
     description: string;
     isPublic: boolean;
     isSubmitting: boolean;
-    showEndDateTime: boolean;
 };
 export declare type FieldStateKeys = keyof InitialFieldState;
 export declare type FieldStateValues = InitialFieldState[FieldStateKeys];

package/lib/esm/components/EventForm/utils.d.ts

@@ -0,0 +1,4 @@
+export declare function getNewDate(date?: string): Date;
+export declare function getLaterHoursDate(h: number): Date;
+export declare function getLaterDaysDate(d: number): Date;
+export declare const combineDateAndTime: (date: Date, time: Date) => string;

package/lib/esm/components/EventForm/utils.js

@@ -0,0 +1,21 @@
+import { addDays, addHours } from 'date-fns';
+export function getNewDate(date) {
+    if (date) {
+        return new Date(date);
+    }
+    return new Date();
+}
+export function getLaterHoursDate(h) {
+    return addHours(getNewDate(), h);
+}
+export function getLaterDaysDate(d) {
+    return addDays(getNewDate(), d);
+}
+export const combineDateAndTime = (date, time) => {
+    const combined = date;
+    combined.setHours(time.getHours());
+    combined.setMinutes(time.getMinutes());
+    combined.setSeconds(time.getSeconds());
+    combined.setMilliseconds(time.getMilliseconds());
+    return combined.toISOString();
+};

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

@@ -8,7 +8,7 @@ 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 { getTheme, usePreviousValue, UserUtils, useSCContext, useSCFetchCategories, useSCPreferences, useSCTheme, useSCUser } from '@selfcommunity/react-core';
 import Appearance from './Steps/Appearance';
 import Profile from './Steps/Profile';
 import Invite from './Steps/Invite';
@@ -24,6 +24,7 @@ import OnBoardingWidgetSkeleton from './Skeleton';
 import { closeSnackbar, useSnackbar } from 'notistack';
 import { CONSOLE_PROD, CONSOLE_STAGE } from '../PlatformWidget/constants';
 import HeaderPlaceholder from '../../assets/onBoarding/header';
+import BaseDialog from '../../shared/BaseDialog';
 const classes = {
     root: `${PREFIX}-root`,
     content: `${PREFIX}-content`,
@@ -52,7 +53,7 @@ const OnBoardingWidget = (inProps) => {
     });
     const { className, GenerateContentsParams = {}, onGeneratedContent = null, onHeightChange } = props, rest = __rest(props, ["className", "GenerateContentsParams", "onGeneratedContent", "onHeightChange"]);
     // STATE
-    const [isLoading, setIsLoading] = useState(true);
+    const [loading, setLoading] = useState(true);
     const [initialized, setInitialized] = useState(false);
     const [steps, setSteps] = useState([]);
     const nextStep = useMemo(() => {
@@ -68,6 +69,7 @@ const OnBoardingWidget = (inProps) => {
     const prevContentsStep = usePreviousValue(currentContentsStep);
     const currentCategoriesStep = steps === null || steps === void 0 ? void 0 : steps.find((s) => s.step === SCOnBoardingStepType.CATEGORIES);
     const prevCategoriesStep = usePreviousValue(currentCategoriesStep);
+    const [showCategoriesModal, setShowCategoriesModal] = useState(false);
     // CONTEXT
     const scUserContext = useSCUser();
     const isAdmin = useMemo(() => UserUtils.isCommunityCreator(scUserContext.user), [scUserContext.user]);
@@ -80,6 +82,7 @@ const OnBoardingWidget = (inProps) => {
     // HOOKS
     const theme = useTheme();
     const isMobile = useMediaQuery(theme.breakpoints.down('md'));
+    const { categories, isLoading } = useSCFetchCategories();
     // HANDLERS
     const completeStep = (s) => __awaiter(void 0, void 0, void 0, function* () {
         if (s.status !== SCOnBoardingStepStatusType.COMPLETED) {
@@ -112,14 +115,14 @@ const OnBoardingWidget = (inProps) => {
             const contentStep = res.results.find((step) => step.step === SCOnBoardingStepType.CONTENTS);
             setIsGenerating(res.results.some((step) => step.status === 'in_progress'));
             setSteps(res.results);
-            setIsLoading(false);
+            setLoading(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);
+            setLoading(false);
         });
     });
     const handleChange = (newStep) => {
@@ -130,17 +133,22 @@ const OnBoardingWidget = (inProps) => {
         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
+        if (!isLoading && !categories.length) {
+            setShowCategoriesModal(true);
+        }
+        else {
+            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) => {
@@ -152,7 +160,7 @@ const OnBoardingWidget = (inProps) => {
     // EFFECTS
     useEffect(() => {
         if (prevContentsStep &&
-            prevCategoriesStep.status === SCOnBoardingStepStatusType.IN_PROGRESS &&
+            prevContentsStep.status === SCOnBoardingStepStatusType.IN_PROGRESS &&
             (currentContentsStep === null || currentContentsStep === void 0 ? void 0 : currentContentsStep.status) === SCOnBoardingStepStatusType.COMPLETED) {
             showSuccessAlert(currentContentsStep);
         }
@@ -233,6 +241,6 @@ const OnBoardingWidget = (inProps) => {
                                     // 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() }) })) }))] })) })) })] })) })));
+                                } }) }))) }) })), _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" }) })) })))] }))] })) })) })] })) })));
 };
 export default OnBoardingWidget;