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

package/lib/cjs/components/ConnectionUserButton/ConnectionUserButton.js

@@ -8,6 +8,7 @@ const material_1 = require("@mui/material");
 const FollowUserButton_1 = tslib_1.__importDefault(require("../FollowUserButton"));
 const FriendshipUserButton_1 = tslib_1.__importDefault(require("../FriendshipUserButton"));
 const system_1 = require("@mui/system");
+const HiddenPlaceholder_1 = tslib_1.__importDefault(require("../../shared/HiddenPlaceholder"));
 const PREFIX = 'SCConnectionUserButton';
 const classes = {
     root: `${PREFIX}-root`
@@ -48,6 +49,11 @@ function ConnectionUserButton(inProps) {
     const scPreferencesContext = (0, react_1.useContext)(react_core_1.SCPreferencesContext);
     const followEnabled = react_core_1.SCPreferences.CONFIGURATIONS_FOLLOW_ENABLED in scPreferencesContext.preferences &&
         scPreferencesContext.preferences[react_core_1.SCPreferences.CONFIGURATIONS_FOLLOW_ENABLED].value;
+    const connectionEnabled = react_core_1.SCPreferences.CONFIGURATIONS_CONNECTION_ENABLED in scPreferencesContext.preferences &&
+        scPreferencesContext.preferences[react_core_1.SCPreferences.CONFIGURATIONS_CONNECTION_ENABLED].value;
+    if (!followEnabled && !connectionEnabled) {
+        return (0, jsx_runtime_1.jsx)(HiddenPlaceholder_1.default, {});
+    }
     return ((0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: followEnabled ? ((0, jsx_runtime_1.jsx)(FollowUserButton_1.default, Object.assign({ user: user }, followConnectUserButtonProps, rest))) : ((0, jsx_runtime_1.jsx)(FriendshipUserButton_1.default, Object.assign({ user: user }, followConnectUserButtonProps, rest))) }));
 }
 exports.default = ConnectionUserButton;

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

@@ -4,6 +4,7 @@ import { SCCourseTemplateType } from '../../types/course';
 import { CourseParticipantsButtonProps } from '../CourseParticipantsButton';
 import { WidgetProps } from '../Widget';
 import { CourseSkeletonProps } from './Skeleton';
+import { CacheStrategies } from '@selfcommunity/utils';
 export interface CourseProps extends WidgetProps {
     /**
      * Course Object
@@ -39,6 +40,10 @@ export interface CourseProps extends WidgetProps {
      * @default {}
      */
     CourseSkeletonComponentProps?: CourseSkeletonProps;
+    /**
+     * Override default cache strategy on fetch element
+     */
+    cacheStrategy?: CacheStrategies;
     /**
      * Any other properties
      */

package/lib/cjs/components/Course/Course.js

@@ -106,9 +106,9 @@ function Course(inProps) {
         props: inProps,
         name: constants_1.PREFIX
     });
-    const { id = `course_object_${props.courseId ? props.courseId : props.course ? props.course.id : ''}`, courseId = null, course = null, className = null, template = course_1.SCCourseTemplateType.PREVIEW, actions, CourseParticipantsButtonComponentProps = {}, CourseSkeletonComponentProps = {}, userProfileSnippet } = props, rest = tslib_1.__rest(props, ["id", "courseId", "course", "className", "template", "actions", "CourseParticipantsButtonComponentProps", "CourseSkeletonComponentProps", "userProfileSnippet"]);
+    const { id = `course_object_${props.courseId ? props.courseId : props.course ? props.course.id : ''}`, courseId = null, course = null, className = null, template = course_1.SCCourseTemplateType.PREVIEW, actions, CourseParticipantsButtonComponentProps = {}, CourseSkeletonComponentProps = {}, cacheStrategy, userProfileSnippet } = props, rest = tslib_1.__rest(props, ["id", "courseId", "course", "className", "template", "actions", "CourseParticipantsButtonComponentProps", "CourseSkeletonComponentProps", "cacheStrategy", "userProfileSnippet"]);
     // STATE
-    const { scCourse } = (0, react_core_1.useSCFetchCourse)({ id: courseId, course });
+    const { scCourse } = (0, react_core_1.useSCFetchCourse)(Object.assign({ id: courseId, course }, (cacheStrategy && { cacheStrategy })));
     const theme = (0, material_1.useTheme)();
     const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.between('xs', 'md'));
     const MAX_VISIBLE_CATEGORIES = isMobile ? 3 : 1;
@@ -165,7 +165,7 @@ function Course(inProps) {
                         }), { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: (_e = scCourse.created_by) === null || _e === void 0 ? void 0 : _e.username })) })), (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes.COURSE_ROUTE_NAME, scCourse), className: classes.previewNameWrapper }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h6", className: classes.previewName }, { children: scCourse.name })) })), (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: classes.previewInfo }, { children: [(0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: scCourse.privacy ? `ui.course.privacy.${scCourse.privacy}` : 'ui.course.privacy.draft', defaultMessage: scCourse.privacy ? `ui.course.privacy.${scCourse.privacy}` : 'ui.course.privacy.draft' }), ' - ', (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.course.type.${scCourse.type}`, defaultMessage: `ui.course.type.${scCourse.type}` })] })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.previewCategory }, { children: [scCourse.categories.slice(0, MAX_VISIBLE_CATEGORIES).map((category) => ((0, jsx_runtime_1.jsx)(material_1.Chip, { size: "small", label: category.name }, category.id))), scCourse.categories.length > MAX_VISIBLE_CATEGORIES && ((0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: scCourse.categories.slice(MAX_VISIBLE_CATEGORIES).map((cat) => ((0, jsx_runtime_1.jsx)(material_1.Box, { children: cat.name }, cat.id))) }) }, { children: (0, jsx_runtime_1.jsx)(material_1.Chip, { size: "small", label: `+${scCourse.categories.length - MAX_VISIBLE_CATEGORIES}`, sx: { cursor: 'pointer' } }) })))] })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.previewProgress }, { children: renderProgress() }))] })), actions !== null && actions !== void 0 ? actions : ((0, jsx_runtime_1.jsx)(material_1.CardActions, Object.assign({ className: classes.previewActions }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "outlined", size: "small", component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.COURSE_ROUTE_NAME, scCourse) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.course.see", id: "ui.course.see" }) })) })))] })));
     }
     else {
-        contentObj = ((0, jsx_runtime_1.jsx)(SnippetRoot, { ButtonBaseProps: { component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.COURSE_ROUTE_NAME, scCourse) }, elevation: 0, className: classes.snippetRoot, image: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.snippetImage }, { children: [(0, jsx_runtime_1.jsx)(material_1.Avatar, { variant: "square", alt: scCourse.name, src: scCourse.image_medium, className: userProfileSnippet ? classes.snippetAvatarUserProfile : classes.snippetAvatar }), !userProfileSnippet &&
+        contentObj = ((0, jsx_runtime_1.jsx)(SnippetRoot, { elevation: 0, className: classes.snippetRoot, image: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.snippetImage }, { children: [(0, jsx_runtime_1.jsx)(material_1.Avatar, { variant: "square", alt: scCourse.name, src: scCourse.image_medium, className: userProfileSnippet ? classes.snippetAvatarUserProfile : classes.snippetAvatar }), !userProfileSnippet &&
                         (isCourseAdmin || (0, course_2.isCourseCompleted)(scCourse) || (0, course_2.isCourseNew)(scCourse) || scCourse.join_status === types_1.SCCourseJoinStatusType.JOINED) && ((0, jsx_runtime_1.jsx)(material_1.Chip, { size: "small", component: "div", color: (0, course_2.isCourseCompleted)(scCourse) || (isCourseAdmin && scCourse.privacy)
                             ? 'primary'
                             : isCourseAdmin && !scCourse.privacy

package/lib/cjs/components/CourseDashboard/Header.d.ts

@@ -1,9 +1,9 @@
-/// <reference types="react" />
 import { SCCourseType } from '@selfcommunity/types';
+import React from 'react';
 interface HeaderCourseDashboardProps {
     course: SCCourseType;
     hasAction?: boolean;
 }
 declare function HeaderCourseDashboard(props: HeaderCourseDashboardProps): JSX.Element;
-declare const _default: import("react").MemoExoticComponent<typeof HeaderCourseDashboard>;
+declare const _default: React.MemoExoticComponent<typeof HeaderCourseDashboard>;
 export default _default;

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

@@ -11,6 +11,7 @@ const react_core_1 = require("@selfcommunity/react-core");
 const types_2 = require("../../types");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const CourseTypePopover_1 = tslib_1.__importDefault(require("../../shared/CourseTypePopover"));
+const BuyButton_1 = tslib_1.__importDefault(require("../BuyButton"));
 const classes = {
     header: `${constants_1.PREFIX}-header`,
     img: `${constants_1.PREFIX}-header-img`,
@@ -28,17 +29,23 @@ function getUrlEditDashboard(course) {
     };
 }
 function HeaderCourseDashboard(props) {
+    var _a;
     // PROPS
     const { course, hasAction = false } = props;
     // CONTEXTS
     const scRoutingContext = (0, react_core_1.useSCRouting)();
     // INTL
     const intl = (0, react_intl_1.useIntl)();
+    // PAYMENTS
+    const { isPaymentsEnabled } = (0, react_core_1.useSCPaymentsEnabled)();
     return ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.header }, { children: [(0, jsx_runtime_1.jsx)("img", { src: course.image_bigger, alt: course.image_bigger, className: classes.img }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h3", className: classes.contrastColor }, { children: course.name })), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.outerWrapper }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.innerWrapper }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: (0, classnames_1.default)(classes.iconWrapper, classes.contrastColor) }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ fontSize: "small" }, { children: "public" })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.label", defaultMessage: "ui.course.label", values: {
                                                 privacy: intl.formatMessage({
                                                     id: `ui.course.privacy.${course.privacy === types_1.SCCoursePrivacyType.DRAFT ? 'draft' : course.privacy}`,
                                                     defaultMessage: `ui.course.privacy.${course.privacy === types_1.SCCoursePrivacyType.DRAFT ? 'draft' : course.privacy}`
                                                 })
-                                            } }) }))] })), (0, jsx_runtime_1.jsx)(CourseTypePopover_1.default, { course: course })] })), hasAction && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.COURSE_EDIT_ROUTE_NAME, getUrlEditDashboard(course)), size: "small", color: "primary", variant: "contained" }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.dashboard.teacher.btn.label", defaultMessage: "ui.course.dashboard.teacher.btn.label" }) })) })))] }))] })));
+                                            } }) }))] })), (0, jsx_runtime_1.jsx)(CourseTypePopover_1.default, { course: course }), isPaymentsEnabled &&
+                                ((_a = course.paywalls) === null || _a === void 0 ? void 0 : _a.length) > 0 &&
+                                (course.privacy === types_1.SCCoursePrivacyType.OPEN ||
+                                    (course.privacy === types_1.SCCoursePrivacyType.PRIVATE && course.join_status && course.join_status !== types_1.SCCourseJoinStatusType.REQUESTED)) && ((0, jsx_runtime_1.jsx)(BuyButton_1.default, { size: "md", variant: "text", startIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "dredit-card" }), contentType: types_1.SCContentType.COURSE, content: course, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.paid", defaultMessage: "ui.course.paid" }) }))] })), hasAction && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.COURSE_EDIT_ROUTE_NAME, getUrlEditDashboard(course)), size: "small", color: "primary", variant: "contained" }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.dashboard.teacher.btn.label", defaultMessage: "ui.course.dashboard.teacher.btn.label" }) })) })))] }))] })));
 }
 exports.default = (0, react_1.memo)(HeaderCourseDashboard);

package/lib/cjs/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/cjs/components/CourseDashboard/Student.js

@@ -19,6 +19,7 @@ const Errors_1 = require("../../constants/Errors");
 const notistack_1 = require("notistack");
 const Skeleton_1 = tslib_1.__importDefault(require("./Student/Skeleton"));
 const UserAvatar_1 = tslib_1.__importDefault(require("../../shared/UserAvatar"));
+const BuyButton_1 = tslib_1.__importDefault(require("../BuyButton"));
 const BUTTON_MESSAGES = {
     dashboard: 'ui.course.dashboard.student.button.dashboard',
     request: 'ui.course.dashboard.student.button.request',
@@ -111,6 +112,8 @@ function Student(inProps) {
     const { scCourse, setSCCourse } = (0, react_core_1.useSCFetchCourse)({ id: courseId, course });
     const intl = (0, react_intl_1.useIntl)();
     const { enqueueSnackbar } = (0, notistack_1.useSnackbar)();
+    // PAYMENTS
+    const { isPaymentsEnabled } = (0, react_core_1.useSCPaymentsEnabled)();
     // EFFETCS
     (0, react_1.useEffect)(() => {
         if (scCourse) {
@@ -165,19 +168,27 @@ function Student(inProps) {
     }, [scContext.settings.handleAnonymousAction]);
     // MEMOS
     const actionButton = (0, react_1.useMemo)(() => {
+        var _a, _b, _c;
         if (!scCourse) {
-            return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
+            return (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "rectangular", width: "130px", height: "20px" });
         }
         return ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.actionsWrapper }, { children: [(scCourse.join_status === types_1.SCCourseJoinStatusType.CREATOR || scCourse.join_status === types_1.SCCourseJoinStatusType.MANAGER) && ((0, jsx_runtime_1.jsx)(ActionButton_1.default, { labelId: BUTTON_MESSAGES.dashboard, to: scRoutingContext.url(react_core_1.SCRoutes.COURSE_DASHBOARD_ROUTE_NAME, scCourse), color: "inherit", variant: "outlined" })), (((scCourse.privacy === types_1.SCCoursePrivacyType.PRIVATE || scCourse.privacy === types_1.SCCoursePrivacyType.SECRET) &&
                     (scCourse.join_status === types_1.SCCourseJoinStatusType.MANAGER || scCourse.join_status === types_1.SCCourseJoinStatusType.JOINED)) ||
-                    (scCourse.privacy === types_1.SCCoursePrivacyType.OPEN && scCourse.join_status !== types_1.SCCourseJoinStatusType.CREATOR)) && ((0, jsx_runtime_1.jsx)(ActionButton_1.default, { labelId: scCourse.join_status === null
+                    (scCourse.privacy === types_1.SCCoursePrivacyType.OPEN && scCourse.join_status !== types_1.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 === types_1.SCCourseJoinStatusType.JOINED || scCourse.join_status === types_1.SCCourseJoinStatusType.MANAGER))) && ((0, jsx_runtime_1.jsx)(ActionButton_1.default, { 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(react_core_1.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 === types_1.SCCoursePrivacyType.PRIVATE &&
-                    (scCourse.join_status === null || scCourse.join_status === types_1.SCCourseJoinStatusType.REQUESTED) && ((0, jsx_runtime_1.jsx)(ActionButton_1.default, { 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(react_core_1.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 === types_1.SCCoursePrivacyType.PRIVATE &&
+                    (scCourse.join_status === null || scCourse.join_status === types_1.SCCourseJoinStatusType.REQUESTED) ? ((0, jsx_runtime_1.jsx)(ActionButton_1.default, { 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 === types_1.SCCourseJoinStatusType.CREATOR) && ((0, jsx_runtime_1.jsx)(BuyButton_1.default, { contentType: types_1.SCContentType.COURSE, content: scCourse })))] })));
     }, [scCourse, sentRequest, loadingRequest, handleRequest]);
     if (!scCourse) {
         return (0, jsx_runtime_1.jsx)(Skeleton_1.default, {});

package/lib/cjs/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/cjs/components/CourseForm/CourseForm.js

@@ -21,6 +21,8 @@ const Course_1 = require("../../constants/Course");
 const CategoryAutocomplete_1 = tslib_1.__importDefault(require("../CategoryAutocomplete"));
 const Edit_1 = tslib_1.__importDefault(require("./Edit"));
 const Dialog_1 = tslib_1.__importDefault(require("./Dialog"));
+const PaywallsConfigurator_1 = tslib_1.__importDefault(require("../PaywallsConfigurator"));
+const constants_2 = require("../PaywallsConfigurator/constants");
 const messages = (0, react_intl_1.defineMessages)({
     name: {
         id: 'ui.courseForm.name.placeholder',
@@ -59,7 +61,8 @@ const classes = {
     stepCustomization: `${constants_1.PREFIX}-step-customization`,
     cardTitle: `${constants_1.PREFIX}-card-title`,
     title: `${constants_1.PREFIX}-title`,
-    contrastColor: `${constants_1.PREFIX}-contrast-color`
+    contrastColor: `${constants_1.PREFIX}-contrast-color`,
+    paywallsConfiguratorWrap: `${constants_1.PREFIX}-paywalls-configurator-wrap`
 };
 const Root = (0, material_1.styled)(material_1.Box, {
     name: constants_1.PREFIX,
@@ -100,13 +103,13 @@ const Root = (0, material_1.styled)(material_1.Box, {
  * @param inProps
  */
 function CourseForm(inProps) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e;
     //PROPS
     const props = (0, system_1.useThemeProps)({
         props: inProps,
         name: constants_1.PREFIX
     });
-    const { className, onSuccess, onError, course = null, step = Course_1.SCCourseFormStepType.GENERAL, onStepChange } = props, rest = tslib_1.__rest(props, ["className", "onSuccess", "onError", "course", "step", "onStepChange"]);
+    const { className, onSuccess, onError, course = null, step = Course_1.SCCourseFormStepType.GENERAL, hidePaywalls = false, onStepChange } = props, rest = tslib_1.__rest(props, ["className", "onSuccess", "onError", "course", "step", "hidePaywalls", "onStepChange"]);
     // INTL
     const intl = (0, react_intl_1.useIntl)();
     const initialFieldState = {
@@ -117,6 +120,8 @@ 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) ? constants_2.ContentAccessType.PAID : constants_2.ContentAccessType.FREE,
         isSubmitting: false
     };
     // STATE
@@ -124,8 +129,13 @@ function CourseForm(inProps) {
     const [_step, setStep] = (0, react_1.useState)(step);
     const [error, setError] = (0, react_1.useState)({});
     const [openDialog, setOpenDialog] = (0, react_1.useState)(false);
+    // CONTEXT
+    const scUserContext = (0, react_core_1.useSCUser)();
     // PREFERENCES
     const { preferences } = (0, react_core_1.useSCPreferences)();
+    // PAYMENTS
+    const { isPaymentsEnabled } = (0, react_core_1.useSCPaymentsEnabled)();
+    const isStaff = (0, react_1.useMemo)(() => scUserContext.user && react_core_1.UserUtils.isStaff(scUserContext.user), [scUserContext.user]);
     const courseAdvancedEnabled = (0, react_1.useMemo)(() => preferences[react_core_1.SCPreferences.CONFIGURATIONS_COURSES_ADVANCED_ENABLED].value, [preferences]);
     const _backgroundCover = Object.assign({}, (field.imageOriginal
         ? { background: `url('${field.imageOriginal}') center / cover` }
@@ -186,6 +196,7 @@ function CourseForm(inProps) {
      * Handles the form submission for create/update action
      */
     const handleSubmit = (0, react_1.useCallback)(() => {
+        var _a;
         setField((prev) => (Object.assign(Object.assign({}, prev), { isSubmitting: true })));
         const formData = new FormData();
         if (field.imageOriginalFile) {
@@ -202,6 +213,12 @@ function CourseForm(inProps) {
                 formData.append(key, field.categories[key]);
             }
         }
+        if (field.products.length && field.contentAccessType === constants_2.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 = api_services_1.CourseService.patchCourse(course.id, formData, {
@@ -243,6 +260,20 @@ 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
      */
@@ -255,8 +286,8 @@ function CourseForm(inProps) {
     return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: _step === Course_1.SCCourseFormStepType.GENERAL ? classes.stepOne : classes.stepTwo }, { children: [_step === Course_1.SCCourseFormStepType.GENERAL && ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: Object.values(types_1.SCCourseTypologyType).map((option, index) => ((0, jsx_runtime_1.jsx)(material_1.Card, Object.assign({ className: (0, classnames_1.default)(classes.card, { [classes.selected]: option === field.type }, { [classes.disabled]: !courseAdvancedEnabled && option !== types_1.SCCourseTypologyType.SELF }) }, { children: (0, jsx_runtime_1.jsx)(material_1.CardActionArea, Object.assign({ onClick: () => setField((prev) => (Object.assign(Object.assign({}, prev), { ['type']: option }))) }, { children: (0, jsx_runtime_1.jsxs)(material_1.CardContent, { children: [(0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ variant: "subtitle2", className: classes.cardTitle }, { children: [(0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.courseForm.${option}.title`, defaultMessage: `ui.courseForm.${option}.title` }), !courseAdvancedEnabled && option !== types_1.SCCourseTypologyType.SELF && ((0, jsx_runtime_1.jsx)(material_1.Chip, { variant: "outlined", color: "warning", size: "small", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courseForm.comingSoon.chip", defaultMessage: "ui.courseForm.comingSoon.chip" }) }))] })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.courseForm.${option}.info`, defaultMessage: `ui.courseForm.${option}.info` }) }))] }) })) }), index))) })), _step === Course_1.SCCourseFormStepType.CUSTOMIZATION && ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [course && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5", className: classes.contrastColor }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courseForm.edit.title.general", defaultMessage: "ui.courseForm.edit.title.general" }) }))), (0, jsx_runtime_1.jsxs)(material_1.FormGroup, Object.assign({ className: (0, classnames_1.default)(classes.form, _step === Course_1.SCCourseFormStepType.CUSTOMIZATION && course ? classes.stepCustomization : undefined) }, { children: [(0, jsx_runtime_1.jsx)(material_1.Paper, Object.assign({ style: _backgroundCover, classes: { root: classes.cover } }, { children: (0, jsx_runtime_1.jsx)(UploadCourseCover_1.default, { isUploading: field.isSubmitting, onChange: handleChangeCover }) })), (0, jsx_runtime_1.jsx)(material_1.TextField, { required: true, className: classes.name, placeholder: `${intl.formatMessage(messages.name)}`, margin: "normal", value: field.name, name: "name", onChange: handleChange, InputProps: {
                                                 endAdornment: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: Course_1.COURSE_TITLE_MAX_LENGTH - field.name.length }))
                                             }, error: Boolean((!!course && !field.name) || field.name.length > Course_1.COURSE_TITLE_MAX_LENGTH) || Boolean(error['nameError']), helperText: !!course && !field.name ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courseForm.required", defaultMessage: "ui.courseForm.required" })) : field.name.length > Course_1.COURSE_TITLE_MAX_LENGTH ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courseForm.name.error.maxLength", defaultMessage: "ui.courseForm.name.error.maxLength" })) : error['nameError'] ? (error['nameError']) : null }), (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: {
-                                                endAdornment: ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: ((_a = field.description) === null || _a === void 0 ? void 0 : _a.length) ? Course_1.COURSE_DESCRIPTION_MAX_LENGTH - field.description.length : Course_1.COURSE_DESCRIPTION_MAX_LENGTH })))
-                                            }, error: Boolean((!!field.privacy && !field.description) || ((_b = field.description) === null || _b === void 0 ? void 0 : _b.length) > Course_1.COURSE_DESCRIPTION_MAX_LENGTH), helperText: !!field.privacy && !field.description ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courseForm.required", defaultMessage: "ui.courseForm.required" })) : (((_c = field.description) === null || _c === void 0 ? void 0 : _c.length) > Course_1.COURSE_DESCRIPTION_MAX_LENGTH && ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courseForm.description.error.maxLength", defaultMessage: "ui.courseForm.description.error.maxLength" }))) }), (0, jsx_runtime_1.jsx)(CategoryAutocomplete_1.default, { defaultValue: field.categories, TextFieldProps: { label: intl.formatMessage(Object.keys(field.categories).length ? messages.category : messages.categoryEmpty) }, multiple: true, onChange: handleOnChangeCategory }), course && (0, jsx_runtime_1.jsx)(Edit_1.default, { course: course, onPrivacyChange: (privacy) => setField((prev) => (Object.assign(Object.assign({}, prev), { ['privacy']: privacy }))) })] }))] })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: (0, classnames_1.default)(classes.actions, _step === Course_1.SCCourseFormStepType.CUSTOMIZATION && course ? classes.stepCustomization : undefined) }, { children: (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ size: "small", loading: field.isSubmitting, disabled: _step === Course_1.SCCourseFormStepType.GENERAL
+                                                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) ? Course_1.COURSE_DESCRIPTION_MAX_LENGTH - field.description.length : Course_1.COURSE_DESCRIPTION_MAX_LENGTH })))
+                                            }, error: Boolean((!!field.privacy && !field.description) || ((_d = field.description) === null || _d === void 0 ? void 0 : _d.length) > Course_1.COURSE_DESCRIPTION_MAX_LENGTH), helperText: !!field.privacy && !field.description ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courseForm.required", defaultMessage: "ui.courseForm.required" })) : (((_e = field.description) === null || _e === void 0 ? void 0 : _e.length) > Course_1.COURSE_DESCRIPTION_MAX_LENGTH && ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courseForm.description.error.maxLength", defaultMessage: "ui.courseForm.description.error.maxLength" }))) }), (0, jsx_runtime_1.jsx)(CategoryAutocomplete_1.default, { defaultValue: field.categories, TextFieldProps: { label: intl.formatMessage(Object.keys(field.categories).length ? messages.category : messages.categoryEmpty) }, multiple: true, onChange: handleOnChangeCategory }), course && (0, jsx_runtime_1.jsx)(Edit_1.default, { course: course, onPrivacyChange: (privacy) => setField((prev) => (Object.assign(Object.assign({}, prev), { ['privacy']: privacy }))) }), isPaymentsEnabled && isStaff && !hidePaywalls && ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.paywallsConfiguratorWrap }, { children: (0, jsx_runtime_1.jsx)(PaywallsConfigurator_1.default, Object.assign({}, (course && { contentId: course.id }), { contentType: types_1.SCContentType.COURSE, onChangeContentAccessType: handleChangeContentAccessType, onChangePaymentProducts: handleChangePaymentsProducts })) })))] }))] })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: (0, classnames_1.default)(classes.actions, _step === Course_1.SCCourseFormStepType.CUSTOMIZATION && course ? classes.stepCustomization : undefined) }, { children: (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ size: "small", loading: field.isSubmitting, disabled: _step === Course_1.SCCourseFormStepType.GENERAL
                                     ? !field.type || Object.keys(error).length !== 0
                                     : _step === Course_1.SCCourseFormStepType.CUSTOMIZATION &&
                                         (!field.name ||

package/lib/cjs/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/cjs/components/CourseJoinButton/CourseJoinButton.js

@@ -51,7 +51,7 @@ function CourseJoinButton(inProps) {
         props: inProps,
         name: PREFIX
     });
-    const { className, courseId, course, user, onJoin } = props, rest = tslib_1.__rest(props, ["className", "courseId", "course", "user", "onJoin"]);
+    const { className, courseId, course, onJoin } = props, rest = tslib_1.__rest(props, ["className", "courseId", "course", "onJoin"]);
     // STATE
     const [status, setStatus] = (0, react_1.useState)(null);
     // CONTEXT
@@ -85,14 +85,16 @@ function CourseJoinButton(inProps) {
             pubsub_js_1.default.publish(`${PubSub_1.SCTopicType.GROUP}.${PubSub_1.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 === types_1.SCCoursePrivacyType.PRIVATE && scCourse.join_status !== types_1.SCCourseJoinStatusType.INVITED
                 ? types_1.SCCourseJoinStatusType.REQUESTED
                 : types_1.SCCourseJoinStatusType.JOINED;
-            notifyChanges(scCourse, user);
+            if (_status === types_1.SCCourseJoinStatusType.JOINED) {
+                notifyChanges(scCourse, scUserContext.user);
+            }
             onJoin && onJoin(scCourse, _status);
         })
             .catch((e) => {
@@ -114,7 +116,7 @@ function CourseJoinButton(inProps) {
             scContext.settings.handleAnonymousAction();
         }
         else {
-            status === types_1.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 === types_1.SCCourseJoinStatusType.JOINED ? leave() : join();
         }
     };
     /**
@@ -140,9 +142,9 @@ 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 ((0, jsx_runtime_1.jsx)(Root, Object.assign({ size: "small", variant: "outlined", onClick: handleClick, loading: scUserContext.user ? scCoursesManager.isLoading(scCourse) : null, disabled: status === types_1.SCCourseJoinStatusType.REQUESTED, className: (0, classnames_1.default)(classes.root, className) }, rest, { children: isCourseAdmin ? (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.courseJoinButton.accept", id: "ui.courseJoinButton.accept" }) : getStatus })));
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ size: "small", variant: "outlined", onClick: handleClick, loading: scUserContext.user ? scCoursesManager.isLoading(scCourse) : null, disabled: status === types_1.SCCourseJoinStatusType.REQUESTED, className: (0, classnames_1.default)(classes.root, className) }, rest, { children: getStatus })));
 }
 exports.default = CourseJoinButton;

package/lib/cjs/components/CreateCourseButton/CreateCourseButton.js

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

package/lib/cjs/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/cjs/components/CreatePaymentProductForm/CreatePaymentProductForm.js

@@ -0,0 +1,144 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = tslib_1.__importStar(require("react"));
+const material_1 = require("@mui/material");
+const react_number_format_1 = require("react-number-format");
+const system_1 = require("@mui/system");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const react_core_1 = require("@selfcommunity/react-core");
+const constants_1 = require("./constants");
+const lab_1 = require("@mui/lab");
+const api_services_1 = require("@selfcommunity/api-services");
+const utils_1 = require("@selfcommunity/utils");
+const Errors_1 = require("../../constants/Errors");
+const react_intl_1 = require("react-intl");
+const Payments_1 = require("../../constants/Payments");
+const classes = {
+    root: `${constants_1.PREFIX}-root`,
+    error: `${constants_1.PREFIX}-root`
+};
+const Root = (0, material_1.styled)(material_1.Box, {
+    slot: 'Root',
+    name: constants_1.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_1.default.forwardRef(function NumericFormatCustom(props, ref) {
+    const { onChange } = props, other = tslib_1.__rest(props, ["onChange"]);
+    return ((0, jsx_runtime_1.jsx)(react_number_format_1.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 };
+function CreatePaymentProductForm(inProps) {
+    // PROPS
+    const props = (0, system_1.useThemeProps)({
+        props: inProps,
+        name: constants_1.PREFIX
+    });
+    const { className, onCreate, onCancel, onError, onChange } = props, rest = tslib_1.__rest(props, ["className", "onCreate", "onCancel", "onError", "onChange"]);
+    // STATE
+    const [loading, setLoading] = (0, react_1.useState)(false);
+    const [name, setName] = (0, react_1.useState)('');
+    const [description, setDescription] = (0, react_1.useState)('');
+    const [unitAmount, setUnitAmount] = (0, react_1.useState)(0.5);
+    const [fieldsError, setFieldsError] = (0, react_1.useState)(_initialFieldsError);
+    const [error, setError] = (0, react_1.useState)(null);
+    // HOOKS
+    const { isPaymentsEnabled } = (0, react_core_1.useSCPaymentsEnabled)();
+    const intl = (0, react_intl_1.useIntl)();
+    /**
+     * Handle change text
+     * @param e
+     */
+    const handleChange = (0, react_1.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 = (0, react_1.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: Payments_1.DEFAULT_MIN_PRICE }) }));
+            _invalid = _invalid && false;
+        }
+        return _invalid;
+    }, [setFieldsError, name, unitAmount]);
+    /**
+     * Handle create product
+     */
+    const handleCreateProduct = (0, react_1.useCallback)(() => {
+        setLoading(true);
+        setError(null);
+        if (isValid()) {
+            api_services_1.PaymentApiClient.createPaymentProduct(Object.assign({ name, unit_amount: unitAmount * 100 }, (description ? { description } : {})))
+                .then((p) => {
+                setLoading(false);
+                onCreate && onCreate(p);
+            })
+                .catch((error) => {
+                utils_1.Logger.error(Errors_1.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 ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ mb: 1 }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.createPaymentProductForm.title", defaultMessage: "ui.createPaymentProductForm.title" }) })), (0, jsx_runtime_1.jsx)(material_1.TextField, Object.assign({ size: "small", id: "name", label: (0, jsx_runtime_1.jsx)(react_intl_1.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) })), (0, jsx_runtime_1.jsx)(material_1.TextField, Object.assign({ size: "small", id: "description", label: (0, jsx_runtime_1.jsx)(react_intl_1.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 }))), (0, jsx_runtime_1.jsx)(material_1.TextField, { label: (0, jsx_runtime_1.jsx)(react_intl_1.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 ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: fieldsError.unitAmount })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: intl.formatMessage({ id: 'ui.createPaymentProductForm.minPrice', defaultMessage: 'ui.createPaymentProductForm.minPrice' }, { min: Payments_1.DEFAULT_MIN_PRICE }) })), InputProps: {
+                    startAdornment: (0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "start" }, { children: "\u20AC" })),
+                    inputComponent: NumericFormatCustom
+                }, fullWidth: true, error: Boolean(fieldsError && fieldsError.unitAmount) }), error && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "div", className: classes.error, variant: "body2" }, { children: error }))), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", justifyContent: "flex-end", alignItems: "flex-end", spacing: 1 }, { children: [onCancel && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "text", size: "small", color: "inherit", onClick: onCancel }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.createPaymentProductForm.btn.cancel", defaultMessage: "ui.createPaymentProductForm.btn.cancel" }) }))), (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ loading: loading, variant: "contained", size: "small", color: "error", onClick: handleCreateProduct }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.createPaymentProductForm.btn.create", defaultMessage: "ui.createPaymentProductForm.btn.create" }) }))] }))] })));
+}
+exports.default = CreatePaymentProductForm;

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

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

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

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PREFIX = void 0;
+exports.PREFIX = 'SCCreatePaymentProductForm';

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

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

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

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const CreatePaymentProductForm_1 = tslib_1.__importDefault(require("./CreatePaymentProductForm"));
+exports.default = CreatePaymentProductForm_1.default;

package/lib/cjs/components/EditEventButton/EditEventButton.js

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

package/lib/cjs/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/cjs/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;