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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/lib/cjs/components/EventForm/EventForm.js +62 -51
  2. package/lib/cjs/components/EventForm/constants.d.ts +4 -0
  3. package/lib/cjs/components/EventForm/constants.js +5 -1
  4. package/lib/cjs/components/EventForm/types.d.ts +0 -1
  5. package/lib/cjs/components/EventForm/utils.d.ts +4 -0
  6. package/lib/cjs/components/EventForm/utils.js +28 -0
  7. package/lib/cjs/components/OnBoardingWidget/OnBoardingWidget.js +22 -14
  8. package/lib/esm/components/EventForm/EventForm.js +64 -53
  9. package/lib/esm/components/EventForm/constants.d.ts +4 -0
  10. package/lib/esm/components/EventForm/constants.js +4 -0
  11. package/lib/esm/components/EventForm/types.d.ts +0 -1
  12. package/lib/esm/components/EventForm/utils.d.ts +4 -0
  13. package/lib/esm/components/EventForm/utils.js +21 -0
  14. package/lib/esm/components/OnBoardingWidget/OnBoardingWidget.js +23 -15
  15. package/lib/umd/react-ui.js +1 -1
  16. package/package.json +4 -4
package/lib/cjs/components/EventForm/EventForm.js CHANGED
@@ -25,6 +25,7 @@ const BaseDialog_1 = tslib_1.__importDefault(require("../../shared/BaseDialog"))
25
25
  const constants_1 = require("./constants");
26
26
  const EventAddress_1 = tslib_1.__importDefault(require("./EventAddress"));
27
27
  const UploadEventCover_1 = tslib_1.__importDefault(require("./UploadEventCover"));
28
+ const utils_2 = require("./utils");
28
29
  const messages = (0, react_intl_1.defineMessages)({
29
30
  name: {
30
31
  id: 'ui.eventForm.name.placeholder',
@@ -113,7 +114,7 @@ const Root = (0, styles_1.styled)(BaseDialog_1.default, {
113
114
  * @param inProps
114
115
  */
115
116
  function EventForm(inProps) {
116
- var _a, _b, _c, _d, _e;
117
+ var _a, _b, _c, _d;
117
118
  //PROPS
118
119
  const props = (0, system_1.useThemeProps)({
119
120
  props: inProps,
@@ -124,13 +125,15 @@ function EventForm(inProps) {
124
125
  const scContext = (0, react_core_1.useSCContext)();
125
126
  // INTL
126
127
  const intl = (0, react_intl_1.useIntl)();
128
+ const startDateTime = (0, react_1.useMemo)(() => (0, utils_2.getNewDate)(event === null || event === void 0 ? void 0 : event.start_date), [event]);
129
+ const endDateTime = (0, react_1.useMemo)(() => (0, utils_2.getNewDate)(event === null || event === void 0 ? void 0 : event.end_date), [event]);
127
130
  const initialFieldState = {
128
131
  imageOriginal: (event === null || event === void 0 ? void 0 : event.image_bigger) || '',
129
132
  imageOriginalFile: '',
130
- startDate: event ? new Date(event.start_date) : null,
131
- startTime: event ? new Date(event.start_date) : null,
132
- endDate: (event === null || event === void 0 ? void 0 : event.end_date) ? new Date(event.end_date) : null,
133
- endTime: (event === null || event === void 0 ? void 0 : event.end_date) ? new Date(event.end_date) : null,
133
+ startDate: event ? startDateTime : (0, utils_2.getNewDate)(),
134
+ startTime: event ? startDateTime : (0, utils_2.getLaterHoursDate)(1),
135
+ endDate: (event === null || event === void 0 ? void 0 : event.end_date) ? endDateTime : (0, utils_2.getNewDate)(),
136
+ endTime: (event === null || event === void 0 ? void 0 : event.end_date) ? endDateTime : (0, utils_2.getLaterHoursDate)(3),
134
137
  location: (event === null || event === void 0 ? void 0 : event.location) || types_1.SCEventLocationType.PERSON,
135
138
  geolocation: (event === null || event === void 0 ? void 0 : event.geolocation) || '',
136
139
  lat: (event === null || event === void 0 ? void 0 : event.geolocation_lat) || null,
@@ -140,8 +143,7 @@ function EventForm(inProps) {
140
143
  name: (event === null || event === void 0 ? void 0 : event.name) || '',
141
144
  description: event ? event.description : '',
142
145
  isPublic: (_a = (event === null || event === void 0 ? void 0 : event.privacy) === types_1.SCEventPrivacyType.PUBLIC) !== null && _a !== void 0 ? _a : true,
143
- isSubmitting: false,
144
- showEndDateTime: (_b = !!(event === null || event === void 0 ? void 0 : event.end_date)) !== null && _b !== void 0 ? _b : false
146
+ isSubmitting: false
145
147
  };
146
148
  // STATE
147
149
  const [field, setField] = (0, react_1.useState)(initialFieldState);
@@ -150,23 +152,12 @@ function EventForm(inProps) {
150
152
  const scPreferences = (0, react_core_1.useSCPreferences)();
151
153
  const privateEnabled = (0, react_1.useMemo)(() => scPreferences.preferences[react_core_1.SCPreferences.CONFIGURATIONS_EVENTS_PRIVATE_ENABLED].value, [scPreferences.preferences]);
152
154
  const visibilityEnabled = (0, react_1.useMemo)(() => scPreferences.preferences[react_core_1.SCPreferences.CONFIGURATIONS_EVENTS_VISIBILITY_ENABLED].value, [scPreferences.preferences]);
153
- const disablePastStartTime = (0, react_1.useMemo)(() => (field.startDate ? new Date(field.startDate).getDate() === new Date().getDate() : false), [field]);
154
- const disablePastEndTime = (0, react_1.useMemo)(() => (field.endDate ? new Date(field.endDate).getDate() === new Date().getDate() : false), [field]);
155
+ const disablePastStartTime = (0, react_1.useMemo)(() => field.startDate.getDate() === (0, utils_2.getNewDate)().getDate(), [field]);
156
+ const disablePastEndTime = (0, react_1.useMemo)(() => field.endDate.getDate() === (0, utils_2.getNewDate)().getDate(), [field]);
155
157
  const _backgroundCover = Object.assign({}, (field.imageOriginal
156
158
  ? { background: `url('${field.imageOriginal}') center / cover` }
157
159
  : { background: `url('${scPreferences.preferences[react_core_1.SCPreferences.IMAGES_USER_DEFAULT_COVER].value}') center / cover` }));
158
- const combineDateAndTime = (date, time) => {
159
- if (date && time) {
160
- const combined = new Date(date);
161
- combined.setHours(time.getHours());
162
- combined.setMinutes(time.getMinutes());
163
- combined.setSeconds(time.getSeconds());
164
- combined.setMilliseconds(time.getMilliseconds());
165
- return combined.toISOString();
166
- }
167
- return null;
168
- };
169
- function handleChangeCover(cover) {
160
+ const handleChangeCover = (0, react_1.useCallback)((cover) => {
170
161
  setField((prev) => (Object.assign(Object.assign({}, prev), { ['imageOriginalFile']: cover })));
171
162
  const reader = new FileReader();
172
163
  reader.onloadend = () => {
@@ -177,43 +168,39 @@ function EventForm(inProps) {
177
168
  delete error.imageOriginalError;
178
169
  setError(error);
179
170
  }
180
- }
171
+ }, [error]);
181
172
  /**
182
173
  * Notify when a group info changed
183
174
  * @param data
184
175
  */
185
- function notifyChanges(data) {
186
- if (data) {
187
- if (event) {
188
- // Edit group
189
- pubsub_js_1.default.publish(`${PubSub_1.SCTopicType.EVENT}.${PubSub_1.SCGroupEventType.EDIT}`, data);
190
- }
191
- else {
192
- // Create group
193
- pubsub_js_1.default.publish(`${PubSub_1.SCTopicType.EVENT}.${PubSub_1.SCGroupEventType.CREATE}`, data);
194
- }
176
+ const notifyChanges = (0, react_1.useCallback)((data) => {
177
+ if (event) {
178
+ // Edit group
179
+ pubsub_js_1.default.publish(`${PubSub_1.SCTopicType.EVENT}.${PubSub_1.SCGroupEventType.EDIT}`, data);
195
180
  }
196
- }
197
- const handleGeoData = (data) => {
181
+ else {
182
+ // Create group
183
+ pubsub_js_1.default.publish(`${PubSub_1.SCTopicType.EVENT}.${PubSub_1.SCGroupEventType.CREATE}`, data);
184
+ }
185
+ }, [event]);
186
+ const handleGeoData = (0, react_1.useCallback)((data) => {
198
187
  setField((prev) => (Object.assign(Object.assign({}, prev), data)));
199
- };
200
- const handleSubmit = () => {
188
+ }, []);
189
+ const handleSubmit = (0, react_1.useCallback)(() => {
201
190
  setField((prev) => (Object.assign(Object.assign({}, prev), { ['isSubmitting']: true })));
202
191
  const formData = new FormData();
203
192
  if (field.imageOriginalFile) {
204
193
  formData.append('image_original', field.imageOriginalFile);
205
194
  }
206
195
  formData.append('name', field.name);
207
- formData.append('start_date', combineDateAndTime(field.startDate, field.startTime));
196
+ formData.append('start_date', (0, utils_2.combineDateAndTime)(field.startDate, field.startTime));
208
197
  formData.append('recurring', field.recurring);
209
- if (field.endDate) {
210
- formData.append('end_date', combineDateAndTime(field.endDate, field.endTime));
211
- }
198
+ formData.append('end_date', (0, utils_2.combineDateAndTime)(field.endDate, field.endTime));
212
199
  formData.append('location', field.location);
213
200
  if (field.location === types_1.SCEventLocationType.ONLINE) {
214
201
  formData.append('link', field.link);
215
202
  }
216
- if (field.location === types_1.SCEventLocationType.PERSON) {
203
+ else if (field.location === types_1.SCEventLocationType.PERSON) {
217
204
  formData.append('geolocation', field.geolocation);
218
205
  formData.append('geolocation_lat', field.lat.toString());
219
206
  formData.append('geolocation_lng', field.lng.toString());
@@ -252,28 +239,52 @@ function EventForm(inProps) {
252
239
  setField((prev) => (Object.assign(Object.assign({}, prev), { ['isSubmitting']: false })));
253
240
  utils_1.Logger.error(Errors_1.SCOPE_SC_UI, e);
254
241
  });
255
- };
256
- const handleChange = (event) => {
242
+ }, [field, privateEnabled, visibilityEnabled]);
243
+ const handleChange = (0, react_1.useCallback)((event) => {
257
244
  const { name, value } = event.target;
258
245
  setField((prev) => (Object.assign(Object.assign({}, prev), { [name]: value })));
259
246
  if (error[`${name}Error`]) {
260
247
  delete error[`${name}Error`];
261
248
  setError(error);
262
249
  }
263
- };
264
- const handleChangeDateTime = (value, name) => {
250
+ }, [error]);
251
+ const handleChangeDateTime = (0, react_1.useCallback)((value, name) => {
265
252
  setField((prev) => (Object.assign(Object.assign({}, prev), { [name]: value })));
266
253
  if (error[`${name}Error`]) {
267
254
  delete error[`${name}Error`];
268
255
  setError(error);
269
256
  }
270
- };
257
+ }, [error]);
258
+ const shouldDisabledDate = (0, react_1.useCallback)((date) => {
259
+ let disabled = false;
260
+ switch (field.recurring) {
261
+ case types_1.SCEventRecurrenceType.DAILY:
262
+ disabled = date.getTime() > (0, utils_2.getLaterDaysDate)(constants_1.DAILY_LATER_DAYS).getTime();
263
+ break;
264
+ case types_1.SCEventRecurrenceType.WEEKLY:
265
+ disabled = date.getTime() > (0, utils_2.getLaterDaysDate)(constants_1.WEEKLY_LATER_DAYS).getTime();
266
+ break;
267
+ case types_1.SCEventRecurrenceType.MONTHLY:
268
+ disabled = date.getTime() > (0, utils_2.getLaterDaysDate)(constants_1.MONTHLY_LATER_DAYS).getTime();
269
+ break;
270
+ case types_1.SCEventRecurrenceType.NEVER:
271
+ default:
272
+ disabled = date.getTime() > (0, utils_2.getLaterDaysDate)(constants_1.NEVER_LATER_DAYS).getTime();
273
+ }
274
+ if (field.startDate.getDate() > date.getDate()) {
275
+ disabled = true;
276
+ }
277
+ return disabled;
278
+ }, [field]);
279
+ const shouldDisabledTime = (0, react_1.useCallback)((date, _view) => field.startTime.getTime() > date.getTime(), [field]);
271
280
  /**
272
281
  * Renders root object
273
282
  */
274
283
  return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ DialogContentProps: { dividers: false }, title: event ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.title.edit", defaultMessage: "ui.eventForm.title.edit" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.title", defaultMessage: "ui.eventForm.title" })), open: open, onClose: onClose, className: (0, classnames_1.default)(classes.root, className), actions: (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ loading: field.isSubmitting, disabled: !field.name ||
275
284
  !field.startDate ||
276
285
  !field.startTime ||
286
+ !field.endDate ||
287
+ !field.endTime ||
277
288
  (field.location === types_1.SCEventLocationType.ONLINE && !field.link) ||
278
289
  (field.location === types_1.SCEventLocationType.PERSON && !field.geolocation) ||
279
290
  (field.recurring !== types_1.SCEventRecurrenceType.NEVER && !field.endDate && !field.endTime) ||
@@ -302,11 +313,11 @@ function EventForm(inProps) {
302
313
  return (0, jsx_runtime_1.jsx)("em", { children: `${intl.formatMessage(messages.frequencyPlaceholder)}` });
303
314
  }
304
315
  return ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.eventForm.frequency.${selected}.placeholder`, defaultMessage: `ui.eventForm.frequency.${selected}.placeholder` }));
305
- }, startAdornment: (0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "start" }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "frequency" }) }) })) }, { children: Object.values(types_1.SCEventRecurrenceType).map((f) => ((0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ value: f }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.eventForm.frequency.${f}.placeholder`, defaultMessage: `ui.eventForm.frequency.${f}.placeholder` }) }), f))) }))] })), (field.showEndDateTime || field.recurring !== types_1.SCEventRecurrenceType.NEVER) && ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.dateTime }, { children: (0, jsx_runtime_1.jsxs)(x_date_pickers_1.LocalizationProvider, Object.assign({ dateAdapter: AdapterDateFns_1.AdapterDateFns, adapterLocale: scContext.settings.locale.default === 'it' ? it_1.default : en_US_1.default }, { children: [(0, jsx_runtime_1.jsx)(x_date_pickers_1.MobileDatePicker, { className: classes.picker, disablePast: true, label: field.endDate && (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.date.end.placeholder", defaultMessage: "ui.eventForm.date.end.placeholder" }), value: field.endDate, slots: {
316
+ }, startAdornment: (0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "start" }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "frequency" }) }) })) }, { children: Object.values(types_1.SCEventRecurrenceType).map((f) => ((0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ value: f }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.eventForm.frequency.${f}.placeholder`, defaultMessage: `ui.eventForm.frequency.${f}.placeholder` }) }), f))) }))] })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.dateTime }, { children: (0, jsx_runtime_1.jsxs)(x_date_pickers_1.LocalizationProvider, Object.assign({ dateAdapter: AdapterDateFns_1.AdapterDateFns, adapterLocale: scContext.settings.locale.default === 'it' ? it_1.default : en_US_1.default }, { children: [(0, jsx_runtime_1.jsx)(x_date_pickers_1.MobileDatePicker, { className: classes.picker, disablePast: true, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.date.end.placeholder", defaultMessage: "ui.eventForm.date.end.placeholder" }), value: field.endDate, slots: {
306
317
  textField: (params) => ((0, jsx_runtime_1.jsx)(material_1.TextField, Object.assign({}, params, { InputProps: Object.assign(Object.assign({}, params.InputProps), { placeholder: `${intl.formatMessage(messages.endDate)}`, startAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "start" }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "calendar_off" }) }) }))) }) })))
307
- }, onChange: (value) => handleChangeDateTime(value, 'endDate') }), (0, jsx_runtime_1.jsx)(x_date_pickers_1.MobileTimePicker, { className: classes.picker, disablePast: disablePastEndTime, label: field.endTime && (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.time.end.placeholder", defaultMessage: "ui.eventForm.time.end.placeholder" }), value: field.endTime, slots: {
318
+ }, onChange: (value) => handleChangeDateTime(value, 'endDate'), shouldDisableDate: shouldDisabledDate }), (0, jsx_runtime_1.jsx)(x_date_pickers_1.MobileTimePicker, { className: classes.picker, disablePast: disablePastEndTime, label: field.endTime && (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.time.end.placeholder", defaultMessage: "ui.eventForm.time.end.placeholder" }), value: field.endTime, slots: {
308
319
  textField: (params) => ((0, jsx_runtime_1.jsx)(material_1.TextField, Object.assign({}, params, { InputProps: Object.assign(Object.assign({}, params.InputProps), { placeholder: `${intl.formatMessage(messages.endTime)}`, startAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "start" }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "access_time" }) }) }))) }) })))
309
- }, onChange: (value) => handleChangeDateTime(value, 'endTime') })] })) }))), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "text", color: "secondary", onClick: () => setField((prev) => (Object.assign(Object.assign({}, prev), { ['showEndDateTime']: !field.showEndDateTime }))), disabled: field.showEndDateTime && field.recurring !== types_1.SCEventRecurrenceType.NEVER }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.dateTime.placeholder", defaultMessage: "ui.eventForm.dateTime.placeholder", values: { symbol: field.showEndDateTime ? '-' : '+' } }) })), (0, jsx_runtime_1.jsx)(EventAddress_1.default, { forwardGeolocationData: handleGeoData, event: event !== null && event !== void 0 ? event : null }), privateEnabled && ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.privacySection }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center", justifyContent: "center" }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: (0, classnames_1.default)(classes.switchLabel, { [classes.active]: !field.isPublic }) }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, { children: "private" }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.privacy.private", defaultMessage: "ui.eventForm.privacy.private" })] })), (0, jsx_runtime_1.jsx)(material_1.Switch, { className: classes.switch, checked: field.isPublic, onChange: () => setField((prev) => (Object.assign(Object.assign({}, prev), { ['isPublic']: !field.isPublic }))) }), (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: (0, classnames_1.default)(classes.switchLabel, { [classes.active]: field.isPublic }) }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, { children: "public" }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.privacy.public", defaultMessage: "ui.eventForm.privacy.public" })] }))] })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", textAlign: "center", className: classes.privacySectionInfo }, { children: field.isPublic ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.privacy.public.info", defaultMessage: "ui.eventForm.privacy.public.info", values: {
320
+ }, onChange: (value) => handleChangeDateTime(value, 'endTime'), shouldDisableTime: shouldDisabledTime })] })) })), (0, jsx_runtime_1.jsx)(EventAddress_1.default, { forwardGeolocationData: handleGeoData, event: event !== null && event !== void 0 ? event : null }), privateEnabled && ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.privacySection }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center", justifyContent: "center" }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: (0, classnames_1.default)(classes.switchLabel, { [classes.active]: !field.isPublic }) }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, { children: "private" }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.privacy.private", defaultMessage: "ui.eventForm.privacy.private" })] })), (0, jsx_runtime_1.jsx)(material_1.Switch, { className: classes.switch, checked: field.isPublic, onChange: () => setField((prev) => (Object.assign(Object.assign({}, prev), { ['isPublic']: !field.isPublic }))) }), (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: (0, classnames_1.default)(classes.switchLabel, { [classes.active]: field.isPublic }) }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, { children: "public" }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.privacy.public", defaultMessage: "ui.eventForm.privacy.public" })] }))] })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", textAlign: "center", className: classes.privacySectionInfo }, { children: field.isPublic ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.privacy.public.info", defaultMessage: "ui.eventForm.privacy.public.info", values: {
310
321
  // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
311
322
  // @ts-ignore
312
323
  b: (chunks) => (0, jsx_runtime_1.jsx)("strong", { children: chunks })
@@ -315,7 +326,7 @@ function EventForm(inProps) {
315
326
  // @ts-ignore
316
327
  b: (chunks) => (0, jsx_runtime_1.jsx)("strong", { children: chunks })
317
328
  } })) }))] }))), (0, jsx_runtime_1.jsx)(material_1.TextField, { multiline: true, className: classes.description, placeholder: `${intl.formatMessage(messages.description)}`, margin: "normal", value: field.description, name: "description", onChange: handleChange, InputProps: {
318
- endAdornment: ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: ((_c = field.description) === null || _c === void 0 ? void 0 : _c.length) ? Event_1.EVENT_DESCRIPTION_MAX_LENGTH - field.description.length : Event_1.EVENT_DESCRIPTION_MAX_LENGTH })))
319
- }, error: Boolean(((_d = field.description) === null || _d === void 0 ? void 0 : _d.length) > Event_1.EVENT_DESCRIPTION_MAX_LENGTH), helperText: ((_e = field.description) === null || _e === void 0 ? void 0 : _e.length) > Event_1.EVENT_DESCRIPTION_MAX_LENGTH ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.description.error.maxLength", defaultMessage: "ui.eventForm.description.error.maxLength" })) : null })] }))] }) })));
329
+ endAdornment: ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: ((_b = field.description) === null || _b === void 0 ? void 0 : _b.length) ? Event_1.EVENT_DESCRIPTION_MAX_LENGTH - field.description.length : Event_1.EVENT_DESCRIPTION_MAX_LENGTH })))
330
+ }, error: Boolean(((_c = field.description) === null || _c === void 0 ? void 0 : _c.length) > Event_1.EVENT_DESCRIPTION_MAX_LENGTH), helperText: ((_d = field.description) === null || _d === void 0 ? void 0 : _d.length) > Event_1.EVENT_DESCRIPTION_MAX_LENGTH ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.description.error.maxLength", defaultMessage: "ui.eventForm.description.error.maxLength" })) : null })] }))] }) })));
320
331
  }
321
332
  exports.default = EventForm;
package/lib/cjs/components/EventForm/constants.d.ts CHANGED
@@ -1 +1,5 @@
1
1
  export declare const PREFIX = "SCEventForm";
2
+ export declare const NEVER_LATER_DAYS = 14;
3
+ export declare const DAILY_LATER_DAYS = 60;
4
+ export declare const WEEKLY_LATER_DAYS = 360;
5
+ export declare const MONTHLY_LATER_DAYS = 730;
package/lib/cjs/components/EventForm/constants.js CHANGED
@@ -1,4 +1,8 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.PREFIX = void 0;
3
+ exports.MONTHLY_LATER_DAYS = exports.WEEKLY_LATER_DAYS = exports.DAILY_LATER_DAYS = exports.NEVER_LATER_DAYS = exports.PREFIX = void 0;
4
4
  exports.PREFIX = 'SCEventForm';
5
+ exports.NEVER_LATER_DAYS = 14;
6
+ exports.DAILY_LATER_DAYS = 60;
7
+ exports.WEEKLY_LATER_DAYS = 360;
8
+ exports.MONTHLY_LATER_DAYS = 730;
package/lib/cjs/components/EventForm/types.d.ts CHANGED
@@ -22,7 +22,6 @@ export declare type InitialFieldState = Geolocation & {
22
22
  description: string;
23
23
  isPublic: boolean;
24
24
  isSubmitting: boolean;
25
- showEndDateTime: boolean;
26
25
  };
27
26
  export declare type FieldStateKeys = keyof InitialFieldState;
28
27
  export declare type FieldStateValues = InitialFieldState[FieldStateKeys];
package/lib/cjs/components/EventForm/utils.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ export declare function getNewDate(date?: string): Date;
2
+ export declare function getLaterHoursDate(h: number): Date;
3
+ export declare function getLaterDaysDate(d: number): Date;
4
+ export declare const combineDateAndTime: (date: Date, time: Date) => string;
package/lib/cjs/components/EventForm/utils.js ADDED
@@ -0,0 +1,28 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.combineDateAndTime = exports.getLaterDaysDate = exports.getLaterHoursDate = exports.getNewDate = void 0;
4
+ const date_fns_1 = require("date-fns");
5
+ function getNewDate(date) {
6
+ if (date) {
7
+ return new Date(date);
8
+ }
9
+ return new Date();
10
+ }
11
+ exports.getNewDate = getNewDate;
12
+ function getLaterHoursDate(h) {
13
+ return (0, date_fns_1.addHours)(getNewDate(), h);
14
+ }
15
+ exports.getLaterHoursDate = getLaterHoursDate;
16
+ function getLaterDaysDate(d) {
17
+ return (0, date_fns_1.addDays)(getNewDate(), d);
18
+ }
19
+ exports.getLaterDaysDate = getLaterDaysDate;
20
+ const combineDateAndTime = (date, time) => {
21
+ const combined = date;
22
+ combined.setHours(time.getHours());
23
+ combined.setMinutes(time.getMinutes());
24
+ combined.setSeconds(time.getSeconds());
25
+ combined.setMilliseconds(time.getMilliseconds());
26
+ return combined.toISOString();
27
+ };
28
+ exports.combineDateAndTime = combineDateAndTime;
package/lib/cjs/components/OnBoardingWidget/OnBoardingWidget.js CHANGED
@@ -26,6 +26,7 @@ const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
26
26
  const notistack_1 = require("notistack");
27
27
  const constants_2 = require("../PlatformWidget/constants");
28
28
  const header_1 = tslib_1.__importDefault(require("../../assets/onBoarding/header"));
29
+ const BaseDialog_1 = tslib_1.__importDefault(require("../../shared/BaseDialog"));
29
30
  const classes = {
30
31
  root: `${constants_1.PREFIX}-root`,
31
32
  content: `${constants_1.PREFIX}-content`,
@@ -54,7 +55,7 @@ const OnBoardingWidget = (inProps) => {
54
55
  });
55
56
  const { className, GenerateContentsParams = {}, onGeneratedContent = null, onHeightChange } = props, rest = tslib_1.__rest(props, ["className", "GenerateContentsParams", "onGeneratedContent", "onHeightChange"]);
56
57
  // STATE
57
- const [isLoading, setIsLoading] = (0, react_1.useState)(true);
58
+ const [loading, setLoading] = (0, react_1.useState)(true);
58
59
  const [initialized, setInitialized] = (0, react_1.useState)(false);
59
60
  const [steps, setSteps] = (0, react_1.useState)([]);
60
61
  const nextStep = (0, react_1.useMemo)(() => {
@@ -70,6 +71,7 @@ const OnBoardingWidget = (inProps) => {
70
71
  const prevContentsStep = (0, react_core_1.usePreviousValue)(currentContentsStep);
71
72
  const currentCategoriesStep = steps === null || steps === void 0 ? void 0 : steps.find((s) => s.step === types_1.SCOnBoardingStepType.CATEGORIES);
72
73
  const prevCategoriesStep = (0, react_core_1.usePreviousValue)(currentCategoriesStep);
74
+ const [showCategoriesModal, setShowCategoriesModal] = (0, react_1.useState)(false);
73
75
  // CONTEXT
74
76
  const scUserContext = (0, react_core_1.useSCUser)();
75
77
  const isAdmin = (0, react_1.useMemo)(() => react_core_1.UserUtils.isCommunityCreator(scUserContext.user), [scUserContext.user]);
@@ -82,6 +84,7 @@ const OnBoardingWidget = (inProps) => {
82
84
  // HOOKS
83
85
  const theme = (0, material_1.useTheme)();
84
86
  const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
87
+ const { categories, isLoading } = (0, react_core_1.useSCFetchCategories)();
85
88
  // HANDLERS
86
89
  const completeStep = (s) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
87
90
  if (s.status !== types_1.SCOnBoardingStepStatusType.COMPLETED) {
@@ -114,14 +117,14 @@ const OnBoardingWidget = (inProps) => {
114
117
  const contentStep = res.results.find((step) => step.step === types_1.SCOnBoardingStepType.CONTENTS);
115
118
  setIsGenerating(res.results.some((step) => step.status === 'in_progress'));
116
119
  setSteps(res.results);
117
- setIsLoading(false);
120
+ setLoading(false);
118
121
  if (contentStep.status === types_1.SCOnBoardingStepStatusType.IN_PROGRESS && contentStep.results.length !== 0 && onGeneratedContent) {
119
122
  onGeneratedContent(contentStep.results);
120
123
  }
121
124
  })
122
125
  .catch((error) => {
123
126
  utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
124
- setIsLoading(false);
127
+ setLoading(false);
125
128
  });
126
129
  });
127
130
  const handleChange = (newStep) => {
@@ -132,17 +135,22 @@ const OnBoardingWidget = (inProps) => {
132
135
  onHeightChange && onHeightChange();
133
136
  };
134
137
  const generateContent = (stepId) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
135
- yield api_services_1.OnBoardingService.startAStep(stepId, GenerateContentsParams)
136
- .then(() => {
137
- setIsGenerating(true);
138
- })
139
- .catch((error) => {
140
- utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
141
- enqueueSnackbar((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.common.error.action", defaultMessage: "ui.common.error.action" }), {
142
- variant: 'error',
143
- autoHideDuration: 3000
138
+ if (!isLoading && !categories.length) {
139
+ setShowCategoriesModal(true);
140
+ }
141
+ else {
142
+ yield api_services_1.OnBoardingService.startAStep(stepId, GenerateContentsParams)
143
+ .then(() => {
144
+ setIsGenerating(true);
145
+ })
146
+ .catch((error) => {
147
+ utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
148
+ enqueueSnackbar((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.common.error.action", defaultMessage: "ui.common.error.action" }), {
149
+ variant: 'error',
150
+ autoHideDuration: 3000
151
+ });
144
152
  });
145
- });
153
+ }
146
154
  });
147
155
  const handlePreferencesUpdate = () => {
148
156
  api_services_1.PreferenceService.getAllPreferences().then((preferences) => {
@@ -235,6 +243,6 @@ const OnBoardingWidget = (inProps) => {
235
243
  // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
236
244
  // @ts-ignore
237
245
  icon: (...chunks) => ((0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ color: "secondary", fontSize: "medium" }, { children: chunks })))
238
- } }) }))) }) })), (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: isLoading ? ((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.jsx)(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() }) })) }))] })) })) })] })) })));
246
+ } }) }))) }) })), (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" }) })) })))] }))] })) })) })] })) })));
239
247
  };
240
248
  exports.default = OnBoardingWidget;