@selfcommunity/react-ui 0.11.0-alpha.67 → 0.11.0-alpha.68

package/lib/esm/components/CourseDashboard/Header.js

@@ -1,13 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Button, Icon, Stack, Typography } from '@mui/material';
-import { SCCoursePrivacyType } from '@selfcommunity/types';
+import { SCContentType, SCCourseJoinStatusType, SCCoursePrivacyType } from '@selfcommunity/types';
 import { FormattedMessage, useIntl } from 'react-intl';
 import { PREFIX } from './constants';
 import { memo } from 'react';
-import { Link, SCRoutes, useSCRouting } from '@selfcommunity/react-core';
+import { Link, SCRoutes, useSCPaymentsEnabled, useSCRouting } from '@selfcommunity/react-core';
 import { SCCourseEditTabType } from '../../types';
 import classNames from 'classnames';
 import CourseTypePopover from '../../shared/CourseTypePopover';
+import BuyButton from '../BuyButton';
 const classes = {
     header: `${PREFIX}-header`,
     img: `${PREFIX}-header-img`,
@@ -25,17 +26,23 @@ function getUrlEditDashboard(course) {
     };
 }
 function HeaderCourseDashboard(props) {
+    var _a;
     // PROPS
     const { course, hasAction = false } = props;
     // CONTEXTS
     const scRoutingContext = useSCRouting();
     // INTL
     const intl = useIntl();
+    // PAYMENTS
+    const { isPaymentsEnabled } = useSCPaymentsEnabled();
     return (_jsxs(Box, Object.assign({ className: classes.header }, { children: [_jsx("img", { src: course.image_bigger, alt: course.image_bigger, className: classes.img }), _jsx(Typography, Object.assign({ variant: "h3", className: classes.contrastColor }, { children: course.name })), _jsxs(Stack, Object.assign({ className: classes.outerWrapper }, { children: [_jsxs(Stack, Object.assign({ className: classes.innerWrapper }, { children: [_jsxs(Stack, Object.assign({ className: classNames(classes.iconWrapper, classes.contrastColor) }, { children: [_jsx(Icon, Object.assign({ fontSize: "small" }, { children: "public" })), _jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedMessage, { id: "ui.course.label", defaultMessage: "ui.course.label", values: {
                                                 privacy: intl.formatMessage({
                                                     id: `ui.course.privacy.${course.privacy === SCCoursePrivacyType.DRAFT ? 'draft' : course.privacy}`,
                                                     defaultMessage: `ui.course.privacy.${course.privacy === SCCoursePrivacyType.DRAFT ? 'draft' : course.privacy}`
                                                 })
-                                            } }) }))] })), _jsx(CourseTypePopover, { course: course })] })), hasAction && (_jsx(Button, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.COURSE_EDIT_ROUTE_NAME, getUrlEditDashboard(course)), size: "small", color: "primary", variant: "contained" }, { children: _jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedMessage, { id: "ui.course.dashboard.teacher.btn.label", defaultMessage: "ui.course.dashboard.teacher.btn.label" }) })) })))] }))] })));
+                                            } }) }))] })), _jsx(CourseTypePopover, { course: course }), isPaymentsEnabled &&
+                                ((_a = course.paywalls) === null || _a === void 0 ? void 0 : _a.length) > 0 &&
+                                (course.privacy === SCCoursePrivacyType.OPEN ||
+                                    (course.privacy === SCCoursePrivacyType.PRIVATE && course.join_status && course.join_status !== SCCourseJoinStatusType.REQUESTED)) && (_jsx(BuyButton, { size: "md", variant: "text", startIcon: _jsx(Icon, { children: "dredit-card" }), contentType: SCContentType.COURSE, content: course, label: _jsx(FormattedMessage, { id: "ui.course.paid", defaultMessage: "ui.course.paid" }) }))] })), hasAction && (_jsx(Button, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.COURSE_EDIT_ROUTE_NAME, getUrlEditDashboard(course)), size: "small", color: "primary", variant: "contained" }, { children: _jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedMessage, { id: "ui.course.dashboard.teacher.btn.label", defaultMessage: "ui.course.dashboard.teacher.btn.label" }) })) })))] }))] })));
 }
 export default memo(HeaderCourseDashboard);

package/lib/esm/components/CourseDashboard/Student.d.ts

@@ -1,4 +1,4 @@
-import { HTMLAttributes } from 'react';
+import React, { HTMLAttributes } from 'react';
 import { SCCourseType } from '@selfcommunity/types';
 export interface StudentCourseDashboardProps {
     courseId?: number;
@@ -7,5 +7,5 @@ export interface StudentCourseDashboardProps {
     [p: string]: any;
 }
 declare function Student(inProps: StudentCourseDashboardProps): JSX.Element;
-declare const _default: import("react").MemoExoticComponent<typeof Student>;
+declare const _default: React.MemoExoticComponent<typeof Student>;
 export default _default;

package/lib/esm/components/CourseDashboard/Student.js

@@ -1,15 +1,15 @@
 import { __rest } from "tslib";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment, memo, useCallback, useEffect, useMemo, useState } from 'react';
 import { PREFIX } from './constants';
-import { Avatar, Box, Divider, LinearProgress, Stack, styled, Typography, useThemeProps } from '@mui/material';
+import { Avatar, Box, Divider, LinearProgress, Skeleton, Stack, styled, Typography, useThemeProps } from '@mui/material';
 import classNames from 'classnames';
 import HeaderCourseDashboard from './Header';
-import { SCCourseJoinStatusType, SCCourseLessonCompletionStatusType, SCCoursePrivacyType } from '@selfcommunity/types';
+import { SCContentType, SCCourseJoinStatusType, SCCourseLessonCompletionStatusType, SCCoursePrivacyType } from '@selfcommunity/types';
 import { FormattedMessage, useIntl } from 'react-intl';
 import ActionButton from './Student/ActionButton';
 import { CLAPPING } from '../../assets/courses/clapping';
-import { SCRoutes, useSCFetchCourse, useSCRouting, Link, useSCUser, useSCContext } from '@selfcommunity/react-core';
+import { SCRoutes, useSCFetchCourse, useSCRouting, Link, useSCUser, useSCContext, useSCPaymentsEnabled } from '@selfcommunity/react-core';
 import AccordionLessons from '../../shared/AccordionLessons';
 import { CourseService } from '@selfcommunity/api-services';
 import { Logger } from '@selfcommunity/utils';
@@ -17,6 +17,7 @@ import { SCOPE_SC_UI } from '../../constants/Errors';
 import { useSnackbar } from 'notistack';
 import StudentSkeleton from './Student/Skeleton';
 import UserAvatar from '../../shared/UserAvatar';
+import BuyButton from '../BuyButton';
 const BUTTON_MESSAGES = {
     dashboard: 'ui.course.dashboard.student.button.dashboard',
     request: 'ui.course.dashboard.student.button.request',
@@ -109,6 +110,8 @@ function Student(inProps) {
     const { scCourse, setSCCourse } = useSCFetchCourse({ id: courseId, course });
     const intl = useIntl();
     const { enqueueSnackbar } = useSnackbar();
+    // PAYMENTS
+    const { isPaymentsEnabled } = useSCPaymentsEnabled();
     // EFFETCS
     useEffect(() => {
         if (scCourse) {
@@ -163,19 +166,27 @@ function Student(inProps) {
     }, [scContext.settings.handleAnonymousAction]);
     // MEMOS
     const actionButton = useMemo(() => {
+        var _a, _b, _c;
         if (!scCourse) {
-            return _jsx(_Fragment, {});
+            return _jsx(Skeleton, { animation: "wave", variant: "rectangular", width: "130px", height: "20px" });
         }
         return (_jsxs(Stack, Object.assign({ className: classes.actionsWrapper }, { children: [(scCourse.join_status === SCCourseJoinStatusType.CREATOR || scCourse.join_status === SCCourseJoinStatusType.MANAGER) && (_jsx(ActionButton, { labelId: BUTTON_MESSAGES.dashboard, to: scRoutingContext.url(SCRoutes.COURSE_DASHBOARD_ROUTE_NAME, scCourse), color: "inherit", variant: "outlined" })), (((scCourse.privacy === SCCoursePrivacyType.PRIVATE || scCourse.privacy === SCCoursePrivacyType.SECRET) &&
                     (scCourse.join_status === SCCourseJoinStatusType.MANAGER || scCourse.join_status === SCCourseJoinStatusType.JOINED)) ||
-                    (scCourse.privacy === SCCoursePrivacyType.OPEN && scCourse.join_status !== SCCourseJoinStatusType.CREATOR)) && (_jsx(ActionButton, { labelId: scCourse.join_status === null
+                    (scCourse.privacy === SCCoursePrivacyType.OPEN && scCourse.join_status !== SCCourseJoinStatusType.CREATOR)) &&
+                    (!isPaymentsEnabled ||
+                        !((_a = scCourse.paywalls) === null || _a === void 0 ? void 0 : _a.length) ||
+                        (isPaymentsEnabled &&
+                            ((_b = scCourse.paywalls) === null || _b === void 0 ? void 0 : _b.length) > 0 &&
+                            (scCourse.join_status === SCCourseJoinStatusType.JOINED || scCourse.join_status === SCCourseJoinStatusType.MANAGER))) && (_jsx(ActionButton, { labelId: scCourse.join_status === null
                         ? BUTTON_MESSAGES.signUp
                         : scCourse.user_completion_rate === 0
                             ? BUTTON_MESSAGES.start
                             : scCourse.user_completion_rate === 100
                                 ? BUTTON_MESSAGES.review
-                                : BUTTON_MESSAGES.continue, to: scCourse.join_status !== null ? scRoutingContext.url(SCRoutes.COURSE_LESSON_ROUTE_NAME, getUrlNextLesson(scCourse)) : undefined, disabled: getIsNextLessonLocked(scCourse), color: scCourse.user_completion_rate === 100 ? 'inherit' : undefined, variant: scCourse.user_completion_rate === 100 ? 'outlined' : undefined, loading: scCourse.join_status === null ? loadingRequest : undefined, onClick: !scUserContext.user ? handleAnonymousAction : scCourse.join_status === null ? handleRequest : undefined })), scCourse.privacy === SCCoursePrivacyType.PRIVATE &&
-                    (scCourse.join_status === null || scCourse.join_status === SCCourseJoinStatusType.REQUESTED) && (_jsx(ActionButton, { labelId: sentRequest ? BUTTON_MESSAGES.cancel : BUTTON_MESSAGES.request, color: "inherit", variant: "outlined", loading: loadingRequest, onClick: handleRequest }))] })));
+                                : BUTTON_MESSAGES.continue, to: scCourse.join_status !== null ? scRoutingContext.url(SCRoutes.COURSE_LESSON_ROUTE_NAME, getUrlNextLesson(scCourse)) : undefined, disabled: scCourse.join_status !== null ? getIsNextLessonLocked(scCourse) : undefined, color: scCourse.user_completion_rate === 100 ? 'inherit' : undefined, variant: scCourse.user_completion_rate === 100 ? 'outlined' : undefined, loading: scCourse.join_status === null ? loadingRequest : undefined, onClick: !scUserContext.user ? handleAnonymousAction : scCourse.join_status === null ? handleRequest : undefined })), scCourse.privacy === SCCoursePrivacyType.PRIVATE &&
+                    (scCourse.join_status === null || scCourse.join_status === SCCourseJoinStatusType.REQUESTED) ? (_jsx(ActionButton, { labelId: sentRequest ? BUTTON_MESSAGES.cancel : BUTTON_MESSAGES.request, color: "inherit", variant: "outlined", loading: loadingRequest, onClick: handleRequest })) : (isPaymentsEnabled &&
+                    ((_c = scCourse.paywalls) === null || _c === void 0 ? void 0 : _c.length) > 0 &&
+                    !(scCourse.join_status === SCCourseJoinStatusType.CREATOR) && (_jsx(BuyButton, { contentType: SCContentType.COURSE, content: scCourse })))] })));
     }, [scCourse, sentRequest, loadingRequest, handleRequest]);
     if (!scCourse) {
         return _jsx(StudentSkeleton, {});

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

@@ -32,6 +32,11 @@ export interface CourseFormProps extends BoxProps {
      * @default null
      */
     onError?: (error: any) => void;
+    /**
+     * Hide paywalls configuration
+     * @default false
+     */
+    hidePaywalls?: boolean;
     /**
      * Any other properties
      */

package/lib/esm/components/CourseForm/CourseForm.js

@@ -4,8 +4,8 @@ import { LoadingButton } from '@mui/lab';
 import { Box, CardActionArea, Card, CardContent, FormGroup, Paper, TextField, Typography, Chip, styled } from '@mui/material';
 import { useThemeProps } from '@mui/system';
 import { CourseService, formatHttpErrorCode } from '@selfcommunity/api-services';
-import { SCPreferences, useSCPreferences } from '@selfcommunity/react-core';
-import { SCCoursePrivacyType, SCCourseTypologyType } from '@selfcommunity/types';
+import { SCPreferences, UserUtils, useSCPaymentsEnabled, useSCPreferences, useSCUser } from '@selfcommunity/react-core';
+import { SCContentType, SCCoursePrivacyType, SCCourseTypologyType } from '@selfcommunity/types';
 import { Logger } from '@selfcommunity/utils';
 import classNames from 'classnames';
 import PubSub from 'pubsub-js';
@@ -19,6 +19,8 @@ import { COURSE_DESCRIPTION_MAX_LENGTH, COURSE_TITLE_MAX_LENGTH, SCCourseFormSte
 import CategoryAutocomplete from '../CategoryAutocomplete';
 import CourseEdit from './Edit';
 import CoursePublicationDialog from './Dialog';
+import PaywallsConfigurator from '../PaywallsConfigurator';
+import { ContentAccessType } from '../PaywallsConfigurator/constants';
 const messages = defineMessages({
     name: {
         id: 'ui.courseForm.name.placeholder',
@@ -57,7 +59,8 @@ const classes = {
     stepCustomization: `${PREFIX}-step-customization`,
     cardTitle: `${PREFIX}-card-title`,
     title: `${PREFIX}-title`,
-    contrastColor: `${PREFIX}-contrast-color`
+    contrastColor: `${PREFIX}-contrast-color`,
+    paywallsConfiguratorWrap: `${PREFIX}-paywalls-configurator-wrap`
 };
 const Root = styled(Box, {
     name: PREFIX,
@@ -98,13 +101,13 @@ const Root = styled(Box, {
  * @param inProps
  */
 export default function CourseForm(inProps) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e;
     //PROPS
     const props = useThemeProps({
         props: inProps,
         name: PREFIX
     });
-    const { className, onSuccess, onError, course = null, step = SCCourseFormStepType.GENERAL, onStepChange } = props, rest = __rest(props, ["className", "onSuccess", "onError", "course", "step", "onStepChange"]);
+    const { className, onSuccess, onError, course = null, step = SCCourseFormStepType.GENERAL, hidePaywalls = false, onStepChange } = props, rest = __rest(props, ["className", "onSuccess", "onError", "course", "step", "hidePaywalls", "onStepChange"]);
     // INTL
     const intl = useIntl();
     const initialFieldState = {
@@ -115,6 +118,8 @@ export default function CourseForm(inProps) {
         description: course ? course.description : '',
         categories: course ? course.categories : [],
         privacy: course ? course.privacy : '',
+        products: ((_a = course === null || course === void 0 ? void 0 : course.paywalls) === null || _a === void 0 ? void 0 : _a.map((p) => p.id)) || [],
+        contentAccessType: ((_b = course === null || course === void 0 ? void 0 : course.paywalls) === null || _b === void 0 ? void 0 : _b.length) ? ContentAccessType.PAID : ContentAccessType.FREE,
         isSubmitting: false
     };
     // STATE
@@ -122,8 +127,13 @@ export default function CourseForm(inProps) {
     const [_step, setStep] = useState(step);
     const [error, setError] = useState({});
     const [openDialog, setOpenDialog] = useState(false);
+    // CONTEXT
+    const scUserContext = useSCUser();
     // PREFERENCES
     const { preferences } = useSCPreferences();
+    // PAYMENTS
+    const { isPaymentsEnabled } = useSCPaymentsEnabled();
+    const isStaff = useMemo(() => scUserContext.user && UserUtils.isStaff(scUserContext.user), [scUserContext.user]);
     const courseAdvancedEnabled = useMemo(() => preferences[SCPreferences.CONFIGURATIONS_COURSES_ADVANCED_ENABLED].value, [preferences]);
     const _backgroundCover = Object.assign({}, (field.imageOriginal
         ? { background: `url('${field.imageOriginal}') center / cover` }
@@ -184,6 +194,7 @@ export default function CourseForm(inProps) {
      * Handles the form submission for create/update action
      */
     const handleSubmit = useCallback(() => {
+        var _a;
         setField((prev) => (Object.assign(Object.assign({}, prev), { isSubmitting: true })));
         const formData = new FormData();
         if (field.imageOriginalFile) {
@@ -200,6 +211,12 @@ export default function CourseForm(inProps) {
                 formData.append(key, field.categories[key]);
             }
         }
+        if (field.products.length && field.contentAccessType === ContentAccessType.PAID && (isStaff || (course && ((_a = course.paywalls) === null || _a === void 0 ? void 0 : _a.length)))) {
+            formData.append(`products`, JSON.stringify(field.products));
+        }
+        else {
+            formData.append(`products`, '[]');
+        }
         let courseService;
         if (course) {
             courseService = CourseService.patchCourse(course.id, formData, {
@@ -241,6 +258,20 @@ export default function CourseForm(inProps) {
             setError(error);
         }
     }, [setField, error]);
+    /**
+     * Handle change content access tyoe
+     * @param type
+     */
+    const handleChangeContentAccessType = (type) => {
+        setField((prev) => (Object.assign(Object.assign({}, prev), { contentAccessType: type })));
+    };
+    /**
+     * Handle change payment products
+     * @param products
+     */
+    const handleChangePaymentsProducts = (products) => {
+        setField((prev) => (Object.assign(Object.assign({}, prev), { products: products.map((product) => product.id) })));
+    };
     /**
      * Handles for closing confirm dialog
      */
@@ -253,8 +284,8 @@ export default function CourseForm(inProps) {
     return (_jsxs(Fragment, { children: [_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: _jsxs(Box, Object.assign({ className: _step === SCCourseFormStepType.GENERAL ? classes.stepOne : classes.stepTwo }, { children: [_step === SCCourseFormStepType.GENERAL && (_jsx(Fragment, { children: Object.values(SCCourseTypologyType).map((option, index) => (_jsx(Card, Object.assign({ className: classNames(classes.card, { [classes.selected]: option === field.type }, { [classes.disabled]: !courseAdvancedEnabled && option !== SCCourseTypologyType.SELF }) }, { children: _jsx(CardActionArea, Object.assign({ onClick: () => setField((prev) => (Object.assign(Object.assign({}, prev), { ['type']: option }))) }, { children: _jsxs(CardContent, { children: [_jsxs(Typography, Object.assign({ variant: "subtitle2", className: classes.cardTitle }, { children: [_jsx(FormattedMessage, { id: `ui.courseForm.${option}.title`, defaultMessage: `ui.courseForm.${option}.title` }), !courseAdvancedEnabled && option !== SCCourseTypologyType.SELF && (_jsx(Chip, { variant: "outlined", color: "warning", size: "small", label: _jsx(FormattedMessage, { id: "ui.courseForm.comingSoon.chip", defaultMessage: "ui.courseForm.comingSoon.chip" }) }))] })), _jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedMessage, { id: `ui.courseForm.${option}.info`, defaultMessage: `ui.courseForm.${option}.info` }) }))] }) })) }), index))) })), _step === SCCourseFormStepType.CUSTOMIZATION && (_jsxs(Fragment, { children: [course && (_jsx(Typography, Object.assign({ variant: "h5", className: classes.contrastColor }, { children: _jsx(FormattedMessage, { id: "ui.courseForm.edit.title.general", defaultMessage: "ui.courseForm.edit.title.general" }) }))), _jsxs(FormGroup, Object.assign({ className: classNames(classes.form, _step === SCCourseFormStepType.CUSTOMIZATION && course ? classes.stepCustomization : undefined) }, { children: [_jsx(Paper, Object.assign({ style: _backgroundCover, classes: { root: classes.cover } }, { children: _jsx(UploadCourseCover, { isUploading: field.isSubmitting, onChange: handleChangeCover }) })), _jsx(TextField, { required: true, className: classes.name, placeholder: `${intl.formatMessage(messages.name)}`, margin: "normal", value: field.name, name: "name", onChange: handleChange, InputProps: {
                                                 endAdornment: _jsx(Typography, Object.assign({ variant: "body2" }, { children: COURSE_TITLE_MAX_LENGTH - field.name.length }))
                                             }, error: Boolean((!!course && !field.name) || field.name.length > COURSE_TITLE_MAX_LENGTH) || Boolean(error['nameError']), helperText: !!course && !field.name ? (_jsx(FormattedMessage, { id: "ui.courseForm.required", defaultMessage: "ui.courseForm.required" })) : field.name.length > COURSE_TITLE_MAX_LENGTH ? (_jsx(FormattedMessage, { id: "ui.courseForm.name.error.maxLength", defaultMessage: "ui.courseForm.name.error.maxLength" })) : error['nameError'] ? (error['nameError']) : null }), _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: ((_a = field.description) === null || _a === void 0 ? void 0 : _a.length) ? COURSE_DESCRIPTION_MAX_LENGTH - field.description.length : COURSE_DESCRIPTION_MAX_LENGTH })))
-                                            }, error: Boolean((!!field.privacy && !field.description) || ((_b = field.description) === null || _b === void 0 ? void 0 : _b.length) > COURSE_DESCRIPTION_MAX_LENGTH), helperText: !!field.privacy && !field.description ? (_jsx(FormattedMessage, { id: "ui.courseForm.required", defaultMessage: "ui.courseForm.required" })) : (((_c = field.description) === null || _c === void 0 ? void 0 : _c.length) > COURSE_DESCRIPTION_MAX_LENGTH && (_jsx(FormattedMessage, { id: "ui.courseForm.description.error.maxLength", defaultMessage: "ui.courseForm.description.error.maxLength" }))) }), _jsx(CategoryAutocomplete, { defaultValue: field.categories, TextFieldProps: { label: intl.formatMessage(Object.keys(field.categories).length ? messages.category : messages.categoryEmpty) }, multiple: true, onChange: handleOnChangeCategory }), course && _jsx(CourseEdit, { course: course, onPrivacyChange: (privacy) => setField((prev) => (Object.assign(Object.assign({}, prev), { ['privacy']: privacy }))) })] }))] })), _jsx(Box, Object.assign({ className: classNames(classes.actions, _step === SCCourseFormStepType.CUSTOMIZATION && course ? classes.stepCustomization : undefined) }, { children: _jsx(LoadingButton, Object.assign({ size: "small", loading: field.isSubmitting, disabled: _step === SCCourseFormStepType.GENERAL
+                                                endAdornment: (_jsx(Typography, Object.assign({ variant: "body2" }, { children: ((_c = field.description) === null || _c === void 0 ? void 0 : _c.length) ? COURSE_DESCRIPTION_MAX_LENGTH - field.description.length : COURSE_DESCRIPTION_MAX_LENGTH })))
+                                            }, error: Boolean((!!field.privacy && !field.description) || ((_d = field.description) === null || _d === void 0 ? void 0 : _d.length) > COURSE_DESCRIPTION_MAX_LENGTH), helperText: !!field.privacy && !field.description ? (_jsx(FormattedMessage, { id: "ui.courseForm.required", defaultMessage: "ui.courseForm.required" })) : (((_e = field.description) === null || _e === void 0 ? void 0 : _e.length) > COURSE_DESCRIPTION_MAX_LENGTH && (_jsx(FormattedMessage, { id: "ui.courseForm.description.error.maxLength", defaultMessage: "ui.courseForm.description.error.maxLength" }))) }), _jsx(CategoryAutocomplete, { defaultValue: field.categories, TextFieldProps: { label: intl.formatMessage(Object.keys(field.categories).length ? messages.category : messages.categoryEmpty) }, multiple: true, onChange: handleOnChangeCategory }), course && _jsx(CourseEdit, { course: course, onPrivacyChange: (privacy) => setField((prev) => (Object.assign(Object.assign({}, prev), { ['privacy']: privacy }))) }), isPaymentsEnabled && isStaff && !hidePaywalls && (_jsx(Box, Object.assign({ className: classes.paywallsConfiguratorWrap }, { children: _jsx(PaywallsConfigurator, Object.assign({}, (course && { contentId: course.id }), { contentType: SCContentType.COURSE, onChangeContentAccessType: handleChangeContentAccessType, onChangePaymentProducts: handleChangePaymentsProducts })) })))] }))] })), _jsx(Box, Object.assign({ className: classNames(classes.actions, _step === SCCourseFormStepType.CUSTOMIZATION && course ? classes.stepCustomization : undefined) }, { children: _jsx(LoadingButton, Object.assign({ size: "small", loading: field.isSubmitting, disabled: _step === SCCourseFormStepType.GENERAL
                                     ? !field.type || Object.keys(error).length !== 0
                                     : _step === SCCourseFormStepType.CUSTOMIZATION &&
                                         (!field.name ||

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

@@ -1,4 +1,4 @@
-import { SCCourseType, SCUserType } from '@selfcommunity/types';
+import { SCCourseType } from '@selfcommunity/types';
 export interface CourseJoinButtonProps {
     /**
      * Overrides or extends the styles applied to the component.
@@ -15,11 +15,6 @@ export interface CourseJoinButtonProps {
      * @default null
      */
     courseId?: number;
-    /**
-     * The user to be accepted into the course
-     * @default null
-     */
-    user?: SCUserType;
     /**
      * onJoin callback
      * @param user

package/lib/esm/components/CourseJoinButton/CourseJoinButton.js

@@ -49,7 +49,7 @@ export default function CourseJoinButton(inProps) {
         props: inProps,
         name: PREFIX
     });
-    const { className, courseId, course, user, onJoin } = props, rest = __rest(props, ["className", "courseId", "course", "user", "onJoin"]);
+    const { className, courseId, course, onJoin } = props, rest = __rest(props, ["className", "courseId", "course", "onJoin"]);
     // STATE
     const [status, setStatus] = useState(null);
     // CONTEXT
@@ -83,14 +83,16 @@ export default function CourseJoinButton(inProps) {
             PubSub.publish(`${SCTopicType.GROUP}.${SCCourseEventType.ADD_MEMBER}`, { course, user });
         }
     }
-    const join = (user) => {
+    const join = () => {
         scCoursesManager
-            .join(scCourse, user === null || user === void 0 ? void 0 : user.id)
+            .join(scCourse)
             .then(() => {
             const _status = scCourse.privacy === SCCoursePrivacyType.PRIVATE && scCourse.join_status !== SCCourseJoinStatusType.INVITED
                 ? SCCourseJoinStatusType.REQUESTED
                 : SCCourseJoinStatusType.JOINED;
-            notifyChanges(scCourse, user);
+            if (_status === SCCourseJoinStatusType.JOINED) {
+                notifyChanges(scCourse, scUserContext.user);
+            }
             onJoin && onJoin(scCourse, _status);
         })
             .catch((e) => {
@@ -112,7 +114,7 @@ export default function CourseJoinButton(inProps) {
             scContext.settings.handleAnonymousAction();
         }
         else {
-            status === SCCourseJoinStatusType.JOINED && !(user === null || user === void 0 ? void 0 : user.id) ? leave() : (user === null || user === void 0 ? void 0 : user.id) ? join(user) : join();
+            status === SCCourseJoinStatusType.JOINED ? leave() : join();
         }
     };
     /**
@@ -138,8 +140,8 @@ export default function CourseJoinButton(inProps) {
         }
         return _status;
     }, [status, scCourse]);
-    if (!scCourse || (isCourseAdmin && (user === null || user === void 0 ? void 0 : user.id) === scUserContext.user.id) || (isCourseAdmin && !(user === null || user === void 0 ? void 0 : user.id))) {
+    if (!scCourse || isCourseAdmin) {
         return null;
     }
-    return (_jsx(Root, Object.assign({ size: "small", variant: "outlined", onClick: handleClick, loading: scUserContext.user ? scCoursesManager.isLoading(scCourse) : null, disabled: status === SCCourseJoinStatusType.REQUESTED, className: classNames(classes.root, className) }, rest, { children: isCourseAdmin ? _jsx(FormattedMessage, { defaultMessage: "ui.courseJoinButton.accept", id: "ui.courseJoinButton.accept" }) : getStatus })));
+    return (_jsx(Root, Object.assign({ size: "small", variant: "outlined", onClick: handleClick, loading: scUserContext.user ? scCoursesManager.isLoading(scCourse) : null, disabled: status === SCCourseJoinStatusType.REQUESTED, className: classNames(classes.root, className) }, rest, { children: getStatus })));
 }

package/lib/esm/components/CreateCourseButton/CreateCourseButton.js

@@ -43,7 +43,7 @@ export default function CreateCourseButton(inProps) {
         props: inProps,
         name: PREFIX
     });
-    const { className, CourseFormDialogComponentProps = {}, children } = props, rest = __rest(props, ["className", "CourseFormDialogComponentProps", "children"]);
+    const { className, CourseFormDialogComponentProps = { CourseFormComponentProps: { hidePaywalls: true } }, children } = props, rest = __rest(props, ["className", "CourseFormDialogComponentProps", "children"]);
     // CONTEXT
     const scUserContext = useContext(SCUserContext);
     // STATE

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

@@ -0,0 +1,10 @@
+import { BoxProps } from '@mui/material';
+import { SCPaymentProduct } from '@selfcommunity/types';
+export interface CreatePaymentProductFormProps extends BoxProps {
+    className?: string;
+    onCreate?: (p: SCPaymentProduct) => void;
+    onCancel?: () => void;
+    onError?: (e: any) => void;
+    onChange?: (p: any) => void;
+}
+export default function CreatePaymentProductForm(inProps: CreatePaymentProductFormProps): JSX.Element;

package/lib/esm/components/CreatePaymentProductForm/CreatePaymentProductForm.js

@@ -0,0 +1,141 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useCallback, useMemo, useState } from 'react';
+import { Box, Button, InputAdornment, Stack, TextField, Typography, styled } from '@mui/material';
+import { NumericFormat } from 'react-number-format';
+import { useThemeProps } from '@mui/system';
+import classNames from 'classnames';
+import { useSCPaymentsEnabled } from '@selfcommunity/react-core';
+import { PREFIX } from './constants';
+import { LoadingButton } from '@mui/lab';
+import { PaymentApiClient } from '@selfcommunity/api-services';
+import { Logger } from '@selfcommunity/utils';
+import { SCOPE_SC_UI } from '../../constants/Errors';
+import { FormattedMessage, useIntl } from 'react-intl';
+import { DEFAULT_MIN_PRICE } from '../../constants/Payments';
+const classes = {
+    root: `${PREFIX}-root`,
+    error: `${PREFIX}-root`
+};
+const Root = styled(Box, {
+    slot: 'Root',
+    name: PREFIX
+})(({ theme }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'space-evenly',
+    padding: theme.spacing(),
+    '& .MuiFormControl-root': {
+        marginBottom: theme.spacing(2)
+    },
+    '& .MuiButton-root': {
+        maxWidth: 50
+    },
+    [`& .${classes.error}`]: {
+        color: theme.palette.error.main
+    }
+}));
+const NumericFormatCustom = React.forwardRef(function NumericFormatCustom(props, ref) {
+    const { onChange } = props, other = __rest(props, ["onChange"]);
+    return (_jsx(NumericFormat, Object.assign({}, other, { getInputRef: ref, onValueChange: (values) => {
+            onChange({
+                target: {
+                    name: props.name,
+                    value: values.value
+                }
+            });
+        }, thousandSeparator: true, valueIsNumericString: true })));
+});
+/**
+ * Initial Errors
+ */
+const _initialFieldsError = { name: null, description: null, unitAmount: null };
+export default function CreatePaymentProductForm(inProps) {
+    // PROPS
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    const { className, onCreate, onCancel, onError, onChange } = props, rest = __rest(props, ["className", "onCreate", "onCancel", "onError", "onChange"]);
+    // STATE
+    const [loading, setLoading] = useState(false);
+    const [name, setName] = useState('');
+    const [description, setDescription] = useState('');
+    const [unitAmount, setUnitAmount] = useState(0.5);
+    const [fieldsError, setFieldsError] = useState(_initialFieldsError);
+    const [error, setError] = useState(null);
+    // HOOKS
+    const { isPaymentsEnabled } = useSCPaymentsEnabled();
+    const intl = useIntl();
+    /**
+     * Handle change text
+     * @param e
+     */
+    const handleChange = useCallback((field, e) => {
+        switch (field) {
+            case 'name':
+                setName(e.target.value);
+                break;
+            case 'description':
+                setDescription(e.target.value);
+                break;
+            case 'unitAmount':
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-ignore
+                setUnitAmount(e.target.value);
+                break;
+        }
+        onChange === null || onChange === void 0 ? void 0 : onChange({ name, description, unitAmount });
+    }, [setName, setDescription, setUnitAmount, onChange]);
+    const isValid = useMemo(() => () => {
+        setFieldsError(_initialFieldsError);
+        let _invalid = true;
+        if (!name) {
+            setFieldsError(Object.assign(Object.assign({}, fieldsError), { name: intl.formatMessage({
+                    id: 'ui.createPaymentProductForm.error.name.required',
+                    defaultMessage: 'ui.createPaymentProductForm.error.name.required'
+                }) }));
+            _invalid = _invalid && false;
+        }
+        if (!unitAmount || unitAmount < 0.5) {
+            setFieldsError(Object.assign(Object.assign({}, fieldsError), { unitAmount: intl.formatMessage({ id: 'ui.createPaymentProductForm.error.price.required', defaultMessage: 'ui.createPaymentProductForm.error.price.required' }, { min: DEFAULT_MIN_PRICE }) }));
+            _invalid = _invalid && false;
+        }
+        return _invalid;
+    }, [setFieldsError, name, unitAmount]);
+    /**
+     * Handle create product
+     */
+    const handleCreateProduct = useCallback(() => {
+        setLoading(true);
+        setError(null);
+        if (isValid()) {
+            PaymentApiClient.createPaymentProduct(Object.assign({ name, unit_amount: unitAmount * 100 }, (description ? { description } : {})))
+                .then((p) => {
+                setLoading(false);
+                onCreate && onCreate(p);
+            })
+                .catch((error) => {
+                Logger.error(SCOPE_SC_UI, error);
+                setLoading(false);
+                const _e = intl.formatMessage({
+                    id: 'ui.createPaymentProductForm.title',
+                    defaultMessage: 'ui.createPaymentProductForm.title'
+                });
+                onError === null || onError === void 0 ? void 0 : onError(_e);
+                setError(_e);
+            });
+        }
+        else {
+            setLoading(false);
+        }
+    }, [loading, name, description, unitAmount, error]);
+    if (!isPaymentsEnabled) {
+        return null;
+    }
+    console.log(fieldsError);
+    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [_jsx(Typography, Object.assign({ mb: 1 }, { children: _jsx(FormattedMessage, { id: "ui.createPaymentProductForm.title", defaultMessage: "ui.createPaymentProductForm.title" }) })), _jsx(TextField, Object.assign({ size: "small", id: "name", label: _jsx(FormattedMessage, { id: "ui.createPaymentProductForm.name", defaultMessage: "ui.createPaymentProductForm.name" }), variant: "outlined", fullWidth: true, value: name, error: Boolean(fieldsError && fieldsError.name) }, (Boolean(fieldsError && fieldsError.name) && { helperText: fieldsError.name }), { onChange: (e) => handleChange('name', e) })), _jsx(TextField, Object.assign({ size: "small", id: "description", label: _jsx(FormattedMessage, { id: "ui.createPaymentProductForm.description", defaultMessage: "ui.createPaymentProductForm.description" }), variant: "outlined", fullWidth: true, value: description, onChange: (e) => handleChange('description', e), multiline: true, maxRows: 2, error: Boolean(fieldsError && fieldsError.description) }, (Boolean(fieldsError && fieldsError.description) && { helperText: fieldsError.description }))), _jsx(TextField, { label: _jsx(FormattedMessage, { id: "ui.createPaymentProductForm.price", defaultMessage: "ui.createPaymentProductForm.price" }), variant: "outlined", value: unitAmount, onChange: (e) => handleChange('unitAmount', e), name: "unitAmount", id: "unitAmount", helperText: fieldsError && fieldsError.unitAmount ? (_jsx(_Fragment, { children: fieldsError.unitAmount })) : (_jsx(_Fragment, { children: intl.formatMessage({ id: 'ui.createPaymentProductForm.minPrice', defaultMessage: 'ui.createPaymentProductForm.minPrice' }, { min: DEFAULT_MIN_PRICE }) })), InputProps: {
+                    startAdornment: _jsx(InputAdornment, Object.assign({ position: "start" }, { children: "\u20AC" })),
+                    inputComponent: NumericFormatCustom
+                }, fullWidth: true, error: Boolean(fieldsError && fieldsError.unitAmount) }), error && (_jsx(Typography, Object.assign({ component: "div", className: classes.error, variant: "body2" }, { children: error }))), _jsxs(Stack, Object.assign({ direction: "row", justifyContent: "flex-end", alignItems: "flex-end", spacing: 1 }, { children: [onCancel && (_jsx(Button, Object.assign({ variant: "text", size: "small", color: "inherit", onClick: onCancel }, { children: _jsx(FormattedMessage, { id: "ui.createPaymentProductForm.btn.cancel", defaultMessage: "ui.createPaymentProductForm.btn.cancel" }) }))), _jsx(LoadingButton, Object.assign({ loading: loading, variant: "contained", size: "small", color: "error", onClick: handleCreateProduct }, { children: _jsx(FormattedMessage, { id: "ui.createPaymentProductForm.btn.create", defaultMessage: "ui.createPaymentProductForm.btn.create" }) }))] }))] })));
+}

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

@@ -0,0 +1 @@
+export declare const PREFIX = "SCCreatePaymentProductForm";

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

@@ -0,0 +1 @@
+export const PREFIX = 'SCCreatePaymentProductForm';

package/lib/esm/components/CreatePaymentProductForm/index.d.ts

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

package/lib/esm/components/CreatePaymentProductForm/index.js

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

package/lib/esm/components/EditEventButton/EditEventButton.js

@@ -44,6 +44,7 @@ export default function EditEventButton(inProps) {
     const { scEvent, setSCEvent } = useSCFetchEvent({ id: eventId, event });
     const scUserContext = useSCUser();
     const handleSuccess = (data) => {
+        console.log(data);
         setSCEvent(data);
         onEditSuccess && onEditSuccess(data);
     };

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { ToolbarPluginProps } from './plugins/ToolbarPlugin';
 import { MediaPluginProps } from './plugins';
 import { SCMediaType } from '@selfcommunity/types';
-export type EditorRef = {
+export declare type EditorRef = {
     focus: () => void;
 };
 export interface EditorProps {

package/lib/esm/components/Editor/nodes/HashtagNode.d.ts

@@ -1,7 +1,7 @@
 import { DOMExportOutput, EditorConfig, LexicalNode, NodeKey, SerializedTextNode, Spread, TextNode } from 'lexical';
 import { SCCategoryType } from '@selfcommunity/types';
 import { DOMConversionMap } from 'lexical/LexicalNode';
-export type SerializedHashtagNode = Spread<{
+export declare type SerializedHashtagNode = Spread<{
     category: SCCategoryType;
     type: 'hashtag';
     version: 1;

package/lib/esm/components/Editor/nodes/HashtagNode.js

@@ -9,16 +9,16 @@ function convertHashtagElement(domNode) {
     };
 }
 export class HashtagNode extends TextNode {
+    constructor(category, text, key) {
+        super(text !== null && text !== void 0 ? text : `#${category.name}`, key);
+        this.__category = category;
+    }
     static getType() {
         return 'hashtag';
     }
     static clone(node) {
         return new HashtagNode(node.__category, node.__text, node.__key);
     }
-    constructor(category, text, key) {
-        super(text !== null && text !== void 0 ? text : `#${category.name}`, key);
-        this.__category = category;
-    }
     createDOM(config) {
         const tag = 'hashtag';
         const dom = document.createElement(tag);

package/lib/esm/components/Editor/nodes/ImageNode.d.ts

@@ -12,7 +12,7 @@ export interface ImagePayload {
 declare function convertImageElement(domNode: any): {
     node: ImageNode;
 };
-export type SerializedImageNode = Spread<{
+export declare type SerializedImageNode = Spread<{
     altText: string;
     maxWidth: number | string;
     src: string;

package/lib/esm/components/Editor/nodes/ImageNode.js

@@ -104,18 +104,18 @@ function convertImageElement(domNode) {
 // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
 // @ts-ignore
 export class ImageNode extends DecoratorNode {
-    static getType() {
-        return 'image';
-    }
-    static clone(node) {
-        return new ImageNode(node.__src, node.__altText, node.__maxWidth, node.__key);
-    }
     constructor(src, altText, maxWidth, key) {
         super(key);
         this.__src = src;
         this.__altText = altText;
         this.__maxWidth = maxWidth;
     }
+    static getType() {
+        return 'image';
+    }
+    static clone(node) {
+        return new ImageNode(node.__src, node.__altText, node.__maxWidth, node.__key);
+    }
     setWidthAndHeight(width, height) {
         const writable = this.getWritable();
         // eslint-disable-next-line @typescript-eslint/ban-ts-ignore

package/lib/esm/components/Editor/nodes/MentionNode.d.ts

@@ -1,7 +1,7 @@
 import { DOMExportOutput, EditorConfig, LexicalNode, NodeKey, SerializedTextNode, Spread, TextNode } from 'lexical';
 import { SCUserType } from '@selfcommunity/types';
 import { DOMConversionMap } from 'lexical/LexicalNode';
-export type SerializedMentionNode = Spread<{
+export declare type SerializedMentionNode = Spread<{
     user: SCUserType;
     type: 'mention';
     version: 1;