@selfcommunity/react-ui 0.11.0-alpha.9 → 0.11.0-alpha.90

package/lib/cjs/components/CreateLiveStreamDialog/CreateLiveStreamDialog.js

@@ -3,7 +3,6 @@ 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 styles_1 = require("@mui/material/styles");
 const system_1 = require("@mui/system");
 const react_core_1 = require("@selfcommunity/react-core");
 const types_1 = require("@selfcommunity/types");
@@ -15,27 +14,27 @@ const EventForm_1 = tslib_1.__importDefault(require("../EventForm"));
 const LiveStreamSelector_1 = tslib_1.__importDefault(require("./LiveStreamSelector/LiveStreamSelector"));
 const types_2 = require("./types");
 const LiveStreamForm_1 = tslib_1.__importDefault(require("../LiveStreamForm"));
-const Slide_1 = tslib_1.__importDefault(require("@mui/material/Slide"));
 const material_1 = require("@mui/material");
 const classes = {
     root: `${constants_1.PREFIX}-root`,
     title: `${constants_1.PREFIX}-title`,
     content: `${constants_1.PREFIX}-content`
 };
-const Root = (0, styles_1.styled)(BaseDialog_1.default, {
+const Root = (0, material_1.styled)(BaseDialog_1.default, {
     name: constants_1.PREFIX,
     slot: 'Root'
-})(({ theme }) => ({
+})(() => ({
     paddingBottom: '0px !important',
     [`& .${classes.title}`]: {
-        display: 'flex'
+        display: 'flex',
+        alignItems: 'center'
     },
     [`& .${classes.content}`]: {
         paddingBottom: 0
     }
 }));
 const Transition = react_1.default.forwardRef(function Transition(props, ref) {
-    return (0, jsx_runtime_1.jsx)(Slide_1.default, Object.assign({ direction: "up", ref: ref }, props));
+    return (0, jsx_runtime_1.jsx)(material_1.Slide, Object.assign({ direction: "up", ref: ref }, props));
 });
 /**
  *> API documentation for the Community-JS CreateLiveStreamDialog component. Learn about the available props and the CSS API.
@@ -58,20 +57,21 @@ const Transition = react_1.default.forwardRef(function Transition(props, ref) {
  * @param inProps
  */
 function CreateLiveStreamDialog(inProps) {
-    var _a, _b;
+    var _a;
     //PROPS
     const props = (0, system_1.useThemeProps)({
         props: inProps,
         name: constants_1.PREFIX
     });
-    const { className, open = true, onClose, onSuccess } = props, rest = tslib_1.__rest(props, ["className", "open", "onClose", "onSuccess"]);
+    const { className, open = true, onClose, EventFormComponentProps = {}, LiveStreamFormComponentProps = {} } = props, rest = tslib_1.__rest(props, ["className", "open", "onClose", "EventFormComponentProps", "LiveStreamFormComponentProps"]);
     // CONTEXT
     const scUserContext = (0, react_core_1.useSCUser)();
-    const canCreateLiveStream = (0, react_1.useMemo)(() => { var _a, _b; return (_b = (_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission) === null || _b === void 0 ? void 0 : _b.create_live_stream; }, [(_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission]);
-    const canCreateEvent = (0, react_1.useMemo)(() => { var _a, _b; return (_b = (_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission) === null || _b === void 0 ? void 0 : _b.create_event; }, [(_b = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _b === void 0 ? void 0 : _b.permission]);
+    // PERMISSION
+    const canCreateEvent = (0, react_1.useMemo)(() => { var _a, _b; return (_b = (_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission) === null || _b === void 0 ? void 0 : _b.create_event; }, [(_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission]);
     // STATE
     const [step, setStep] = (0, react_1.useState)(canCreateEvent ? types_2.CreateLiveStreamStep.SELECT_TYPE : types_2.CreateLiveStreamStep.CREATE_LIVE);
     const [liveType, setLiveType] = (0, react_1.useState)(canCreateEvent ? null : types_2.LiveStreamType.DIRECT_LIVE);
+    const canShowBackButton = (0, react_1.useMemo)(() => step === types_2.CreateLiveStreamStep.CREATE_LIVE && canCreateEvent, [step, canCreateEvent]);
     // HANDLER
     const handleLiveTypeSelected = (0, react_1.useCallback)((l) => {
         setLiveType(l);
@@ -80,24 +80,28 @@ function CreateLiveStreamDialog(inProps) {
         setLiveType(l);
         setStep(types_2.CreateLiveStreamStep.CREATE_LIVE);
     }, []);
-    const handleBack = (0, react_1.useCallback)((l) => {
+    const handleBack = (0, react_1.useCallback)(() => {
         setStep(types_2.CreateLiveStreamStep.SELECT_TYPE);
     }, []);
     const handleSubmit = (0, react_1.useCallback)((e) => {
-        onSuccess && onSuccess(e);
-    }, []);
+        var _a, _b;
+        liveType === types_2.LiveStreamType.EVENT_LIVE
+            ? (_a = EventFormComponentProps.onSuccess) === null || _a === void 0 ? void 0 : _a.call(EventFormComponentProps, e)
+            : (_b = LiveStreamFormComponentProps.onSuccess) === null || _b === void 0 ? void 0 : _b.call(LiveStreamFormComponentProps, e);
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+    }, [liveType, onClose, EventFormComponentProps, LiveStreamFormComponentProps]);
     (0, react_1.useEffect)(() => {
         if (!canCreateEvent) {
             setLiveType(types_2.LiveStreamType.DIRECT_LIVE);
         }
     }, [canCreateEvent]);
     // user must be logged
-    if (!scUserContext.user || !canCreateLiveStream) {
+    if (!scUserContext.user) {
         return null;
     }
     /**
      * Renders root object
      */
-    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ DialogContentProps: { dividers: false }, maxWidth: 'md', title: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.title, component: 'span' }, { children: [Boolean(step === types_2.CreateLiveStreamStep.CREATE_LIVE && canCreateEvent) && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "text", onClick: handleBack, startIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "arrow_back" }) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.createLivestreamDialog.button.back", defaultMessage: "ui.createLivestreamDialog.button.back" }) }))), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ component: 'span' }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.createLivestreamDialog.title", defaultMessage: "ui.createLivestreamDialog.title" }) }))] })), fullWidth: true, open: open, scroll: "body", onClose: onClose, className: (0, classnames_1.default)(classes.root, className), TransitionComponent: Transition, PaperProps: { elevation: 0 } }, rest, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.content }, { children: [step === types_2.CreateLiveStreamStep.SELECT_TYPE && ((0, jsx_runtime_1.jsx)(LiveStreamSelector_1.default, { liveSelected: liveType, onLiveSelected: handleLiveTypeSelected, onNext: handleLiveTypeSelectedNext })), step === types_2.CreateLiveStreamStep.CREATE_LIVE && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: liveType === types_2.LiveStreamType.EVENT_LIVE ? ((0, jsx_runtime_1.jsx)(EventForm_1.default, { EventAddressComponentProps: { locations: [types_1.SCEventLocationType.LIVESTREAM] }, onSuccess: handleSubmit })) : ((0, jsx_runtime_1.jsx)(LiveStreamForm_1.default, { onSuccess: handleSubmit })) }))] })) })));
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ DialogContentProps: { dividers: false }, maxWidth: "md", title: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.title, component: "span" }, { children: [canShowBackButton && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "text", onClick: handleBack, startIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "arrow_back" }) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.createLivestreamDialog.button.back", defaultMessage: "ui.createLivestreamDialog.button.back" }) }))), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ component: "span" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.createLivestreamDialog.title", defaultMessage: "ui.createLivestreamDialog.title" }) }))] })), fullWidth: true, open: open, scroll: "body", onClose: !canShowBackButton ? onClose : undefined, className: (0, classnames_1.default)(classes.root, className), TransitionComponent: Transition, PaperProps: { elevation: 0 } }, rest, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.content }, { children: [step === types_2.CreateLiveStreamStep.SELECT_TYPE && ((0, jsx_runtime_1.jsx)(LiveStreamSelector_1.default, { liveSelected: liveType, onLiveSelected: handleLiveTypeSelected, onNext: handleLiveTypeSelectedNext })), step === types_2.CreateLiveStreamStep.CREATE_LIVE && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: liveType === types_2.LiveStreamType.EVENT_LIVE ? ((0, jsx_runtime_1.jsx)(EventForm_1.default, Object.assign({}, EventFormComponentProps, { EventAddressComponentProps: { locations: [types_1.SCEventLocationType.LIVESTREAM] }, onSuccess: handleSubmit }))) : ((0, jsx_runtime_1.jsx)(LiveStreamForm_1.default, Object.assign({}, LiveStreamFormComponentProps, { onSuccess: handleSubmit }))) }))] })) })));
 }
 exports.default = CreateLiveStreamDialog;

package/lib/cjs/components/CreateLiveStreamDialog/LiveStreamSelector/LiveStreamSelector.js

@@ -4,7 +4,6 @@ exports.PREFIX = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const styles_1 = require("@mui/material/styles");
 const material_1 = require("@mui/material");
 const system_1 = require("@mui/system");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
@@ -25,12 +24,12 @@ const classes = {
     options: `${exports.PREFIX}-options`,
     actions: `${exports.PREFIX}-actions`
 };
-const Root = (0, styles_1.styled)(material_1.Container, {
+const Root = (0, material_1.styled)(material_1.Container, {
     name: exports.PREFIX,
     slot: 'Root'
 })(({ theme }) => ({}));
 // Styled components
-const OptionCard = (0, styles_1.styled)(material_1.Paper, {
+const OptionCard = (0, material_1.styled)(material_1.Paper, {
     name: exports.PREFIX,
     slot: 'optionCardRoot',
     shouldForwardProp: (prop) => prop !== 'selected'
@@ -40,7 +39,7 @@ const OptionCard = (0, styles_1.styled)(material_1.Paper, {
         textTransform: 'uppercase'
     }
 }));
-const FeatureItem = (0, styles_1.styled)(material_1.Box, {
+const FeatureItem = (0, material_1.styled)(material_1.Box, {
     name: exports.PREFIX,
     slot: 'featureItemRoot'
 })(({ theme }) => ({}));
@@ -84,6 +83,14 @@ function LiveStreamSelector(inProps) {
         react_core_1.SCPreferences.CONFIGURATIONS_SUBSCRIPTION_TIER in preferences &&
         preferences[react_core_1.SCPreferences.CONFIGURATIONS_SUBSCRIPTION_TIER].value &&
         preferences[react_core_1.SCPreferences.CONFIGURATIONS_SUBSCRIPTION_TIER].value === types_2.SCCommunitySubscriptionTier.FREE_TRIAL, [preferences]);
+    const isEnterpriseTier = (0, react_1.useMemo)(() => preferences &&
+        react_core_1.SCPreferences.CONFIGURATIONS_SUBSCRIPTION_TIER in preferences &&
+        preferences[react_core_1.SCPreferences.CONFIGURATIONS_SUBSCRIPTION_TIER].value &&
+        preferences[react_core_1.SCPreferences.CONFIGURATIONS_SUBSCRIPTION_TIER].value === types_2.SCCommunitySubscriptionTier.ENTERPRISE, [preferences]);
+    const isStage = (0, react_1.useMemo)(() => preferences &&
+        react_core_1.SCPreferences.STATIC_ENVIRONMENT in preferences &&
+        preferences[react_core_1.SCPreferences.STATIC_ENVIRONMENT].value === types_2.SCCommunityEnvironment.STAGE, [preferences]);
+    const communityStackId = (0, react_1.useMemo)(() => preferences && react_core_1.SCPreferences.STATIC_ENVIRONMENT in preferences && preferences[react_core_1.SCPreferences.STATIC_STACKID].value, [preferences]);
     const intl = (0, react_intl_1.useIntl)();
     const options = [
         {
@@ -157,11 +164,11 @@ function LiveStreamSelector(inProps) {
     }, []);
     const warning = (0, react_1.useMemo)(() => {
         let _message;
-        if (isFreeTrialTier && isCommunityOwner) {
+        if (isFreeTrialTier && isCommunityOwner && !isEnterpriseTier) {
             _message = ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamForm.selector.warningSubscriptionRequired", defaultMessage: "ui.liveStreamForm.selector.warningSubscriptionRequired", values: {
                     // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
                     // @ts-ignore
-                    link: (...chunks) => (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: constants_2.SELFCOMMUNITY_PRICING[scContext.settings.locale.default] }, { children: chunks }))
+                    link: (...chunks) => ((0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ target: "_blank", to: `${isStage ? constants_2.HUB_STAGE : constants_2.HUB_PROD}dashboard/community/${communityStackId}/subscription` }, { children: chunks })))
                 } }));
         }
         else if (timeRemaining !== null && timeRemaining <= constants_1.WARNING_THRESHOLD_EXPIRING_SOON) {

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/CustomAdv/CustomAdv.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const styles_1 = require("@mui/material/styles");
 const material_1 = require("@mui/material");
 const react_core_1 = require("@selfcommunity/react-core");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
@@ -19,7 +18,7 @@ const classes = {
     embedCode: `${constants_1.PREFIX}-embed-code`,
     prefixedHeight: `${constants_1.PREFIX}-prefixed-height`
 };
-const Root = (0, styles_1.styled)(material_1.Box, {
+const Root = (0, material_1.styled)(material_1.Box, {
     name: constants_1.PREFIX,
     slot: 'Root'
 })(() => ({}));
@@ -134,6 +133,6 @@ function CustomAdv(inProps) {
         return (0, jsx_runtime_1.jsx)(HiddenPlaceholder_1.default, {});
     }
     const adv = ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.wrap }, { children: [scCustomAdv.image && ((0, jsx_runtime_1.jsx)("img", { src: scCustomAdv.image, alt: scCustomAdv.title, className: (0, classnames_1.default)(classes.image, { [classes.prefixedHeight]: Boolean(prefixedHeight) }) })), scCustomAdv.embed_code && ((0, jsx_runtime_1.jsx)(material_1.Box, { ref: embedRef, className: (0, classnames_1.default)(classes.embedCode, { [classes.prefixedHeight]: Boolean(prefixedHeight) }), dangerouslySetInnerHTML: { __html: scCustomAdv.embed_code } }))] })));
-    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className), ref: ref, style: Object.assign({}, (prefixedHeight ? { paddingBottom: prefixedHeight } : { width: '100%' })) }, { children: scCustomAdv.link ? ((0, jsx_runtime_1.jsx)("a", Object.assign({ href: scCustomAdv.link, title: scCustomAdv.title }, { children: adv }))) : (adv) })));
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className), ref: ref, style: Object.assign({}, (prefixedHeight ? { paddingBottom: prefixedHeight } : { width: '100%' })) }, { children: scCustomAdv.link ? ((0, jsx_runtime_1.jsx)("a", Object.assign({ href: scCustomAdv.link, title: scCustomAdv.title, target: "_blank" }, { children: adv }))) : (adv) })));
 }
 exports.default = CustomAdv;

package/lib/cjs/components/CustomAdv/Skeleton.js

@@ -2,12 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const Skeleton_1 = require("../Skeleton");
-const styles_1 = require("@mui/material/styles");
+const material_1 = require("@mui/material");
 const constants_1 = require("./constants");
 const classes = {
     root: `${constants_1.PREFIX}-skeleton-root`
 };
-const Root = (0, styles_1.styled)(Skeleton_1.GenericSkeleton, {
+const Root = (0, material_1.styled)(Skeleton_1.GenericSkeleton, {
     name: constants_1.PREFIX,
     slot: 'SkeletonRoot'
 })(({ theme }) => ({}));

package/lib/cjs/components/EditCourse/Customize.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { SCCourseType } from '@selfcommunity/types';
+interface CustomizeProps {
+    course: SCCourseType;
+    setCourse: (course: SCCourseType) => void;
+}
+declare function Customize(props: CustomizeProps): JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof Customize>;
+export default _default;

package/lib/cjs/components/EditCourse/Customize.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const CourseForm_1 = tslib_1.__importDefault(require("../CourseForm"));
+const react_1 = require("react");
+const notistack_1 = require("notistack");
+const react_intl_1 = require("react-intl");
+const Course_1 = require("../../constants/Course");
+function Customize(props) {
+    // PROPS
+    const { course, setCourse } = props;
+    // HOOKS
+    const { enqueueSnackbar } = (0, notistack_1.useSnackbar)();
+    // HANDLERS
+    const handleSuccess = (0, react_1.useCallback)((data) => {
+        setCourse(Object.assign(Object.assign({}, course), data));
+        enqueueSnackbar((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.editCourse.tab.customize.snackbar.save", defaultMessage: "ui.editCourse.tab.customize.snackbar.save" }), {
+            variant: 'success',
+            autoHideDuration: 3000
+        });
+    }, [course]);
+    const handleError = (0, react_1.useCallback)(() => {
+        enqueueSnackbar((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.common.error.action", defaultMessage: "ui.common.error.action" }), {
+            variant: 'error',
+            autoHideDuration: 3000
+        });
+    }, []);
+    return (0, jsx_runtime_1.jsx)(CourseForm_1.default, { course: course, step: Course_1.SCCourseFormStepType.CUSTOMIZATION, onSuccess: handleSuccess, onError: handleError });
+}
+exports.default = (0, react_1.memo)(Customize);

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

@@ -0,0 +1,13 @@
+import { HTMLAttributes } from 'react';
+import { SCCourseType } from '@selfcommunity/types';
+import { SCCourseEditTabType } from '../../types/course';
+export interface EditCourseProps {
+    courseId?: number;
+    course?: SCCourseType;
+    tab?: SCCourseEditTabType;
+    onTabChange?: (tab: SCCourseEditTabType) => void;
+    onTabSelect?: (tab: SCCourseEditTabType) => void;
+    className?: HTMLAttributes<HTMLDivElement>['className'];
+    [p: string]: any;
+}
+export default function EditCourse(inProps: EditCourseProps): JSX.Element;

package/lib/cjs/components/EditCourse/EditCourse.js

@@ -0,0 +1,110 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const constants_1 = require("./constants");
+const react_1 = require("react");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const lab_1 = require("@mui/lab");
+const react_intl_1 = require("react-intl");
+const Lessons_1 = tslib_1.__importDefault(require("./Lessons"));
+const Customize_1 = tslib_1.__importDefault(require("./Customize"));
+const Users_1 = tslib_1.__importDefault(require("./Users"));
+const Options_1 = tslib_1.__importDefault(require("./Options"));
+const react_core_1 = require("@selfcommunity/react-core");
+const api_services_1 = require("@selfcommunity/api-services");
+const Requests_1 = tslib_1.__importDefault(require("./Requests"));
+const course_1 = require("../../types/course");
+const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
+const classes = {
+    root: `${constants_1.PREFIX}-root`,
+    header: `${constants_1.PREFIX}-header`,
+    tabList: `${constants_1.PREFIX}-tab-list`,
+    tab: `${constants_1.PREFIX}-tab`,
+    tabPanel: `${constants_1.PREFIX}-tab-panel`,
+    contrastColor: `${constants_1.PREFIX}-contrast-color`
+};
+const TAB_DATA = [
+    {
+        label: 'ui.editCourse.tab.lessons',
+        value: course_1.SCCourseEditTabType.LESSONS
+    },
+    {
+        label: 'ui.editCourse.tab.customize',
+        value: course_1.SCCourseEditTabType.CUSTOMIZE
+    },
+    {
+        label: 'ui.editCourse.tab.users',
+        value: course_1.SCCourseEditTabType.USERS
+    },
+    {
+        label: 'ui.editCourse.tab.requests',
+        value: course_1.SCCourseEditTabType.REQUESTS
+    },
+    {
+        label: 'ui.editCourse.tab.options',
+        value: course_1.SCCourseEditTabType.OPTIONS
+    }
+];
+const Root = (0, material_1.styled)(material_1.Box, {
+    name: constants_1.PREFIX,
+    slot: 'Root',
+    overridesResolver: (_props, styles) => styles.root
+})(() => ({}));
+function EditCourse(inProps) {
+    // PROPS
+    const props = (0, material_1.useThemeProps)({
+        props: inProps,
+        name: constants_1.PREFIX
+    });
+    const { courseId, course, tab = course_1.SCCourseEditTabType.LESSONS, onTabChange, onTabSelect, className } = props, rest = tslib_1.__rest(props, ["courseId", "course", "tab", "onTabChange", "onTabSelect", "className"]);
+    // STATES
+    const [tabValue, setTabValue] = (0, react_1.useState)(tab);
+    // CONTEXTS
+    const scRoutingContext = (0, react_core_1.useSCRouting)();
+    // HOOKS
+    const { scCourse, setSCCourse } = (0, react_core_1.useSCFetchCourse)({ id: courseId, course, params: { view: api_services_1.CourseInfoViewType.EDIT } });
+    const theme = (0, material_1.useTheme)();
+    const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
+    // HANDLERS
+    const handleTabChange = (0, react_1.useCallback)((_e, newTabValue) => {
+        if (onTabSelect) {
+            onTabSelect(newTabValue);
+        }
+        else {
+            setTabValue(newTabValue);
+            onTabChange === null || onTabChange === void 0 ? void 0 : onTabChange(newTabValue);
+        }
+    }, [setTabValue, onTabChange, onTabSelect]);
+    // MEMOS
+    const panelData = (0, react_1.useMemo)(() => {
+        return [
+            {
+                value: course_1.SCCourseEditTabType.LESSONS,
+                children: (0, jsx_runtime_1.jsx)(Lessons_1.default, { course: scCourse, setCourse: setSCCourse, handleTabChange: handleTabChange })
+            },
+            {
+                value: course_1.SCCourseEditTabType.CUSTOMIZE,
+                children: (0, jsx_runtime_1.jsx)(Customize_1.default, { course: scCourse, setCourse: setSCCourse })
+            },
+            {
+                value: course_1.SCCourseEditTabType.USERS,
+                children: (0, jsx_runtime_1.jsx)(Users_1.default, { course: scCourse, handleTabChange: handleTabChange })
+            },
+            {
+                value: course_1.SCCourseEditTabType.REQUESTS,
+                children: (0, jsx_runtime_1.jsx)(Requests_1.default, { course: scCourse, handleTabChange: handleTabChange })
+            },
+            {
+                value: course_1.SCCourseEditTabType.OPTIONS,
+                children: (0, jsx_runtime_1.jsx)(Options_1.default, { course: scCourse, setCourse: setSCCourse })
+            }
+        ];
+    }, [scCourse, handleTabChange]);
+    if (!scCourse) {
+        return (0, jsx_runtime_1.jsx)(Skeleton_1.default, { tab: tab });
+    }
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.header }, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ href: scRoutingContext.url(react_core_1.SCRoutes.COURSE_DASHBOARD_ROUTE_NAME, scCourse), size: "small" }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ className: classes.contrastColor }, { children: "arrow_back" })) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5", className: classes.contrastColor }, { children: scCourse.name }))] })), (0, jsx_runtime_1.jsxs)(lab_1.TabContext, Object.assign({ value: tabValue }, { children: [(0, jsx_runtime_1.jsx)(lab_1.TabList, Object.assign({ className: classes.tabList, onChange: handleTabChange, textColor: "primary", indicatorColor: "primary", variant: isMobile ? 'scrollable' : 'standard', scrollButtons: isMobile, centered: !isMobile }, { children: TAB_DATA.map((data, i) => ((0, jsx_runtime_1.jsx)(material_1.Tab, { label: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h6" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: data.label, defaultMessage: data.label }) })), value: data.value, className: (0, classnames_1.default)(classes.tab, classes.contrastColor) }, i))) })), panelData.map((data, i) => ((0, jsx_runtime_1.jsx)(lab_1.TabPanel, Object.assign({ className: classes.tabPanel, value: data.value }, { children: data.children }), i)))] }))] })));
+}
+exports.default = EditCourse;

package/lib/cjs/components/EditCourse/Lessons/AddButton.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { ButtonProps } from '@mui/material';
+interface AddButtonProps extends ButtonProps {
+    label: string;
+    handleAddRow: () => void;
+}
+declare function AddButton(props: AddButtonProps): JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof AddButton>;
+export default _default;

package/lib/cjs/components/EditCourse/Lessons/AddButton.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const react_intl_1 = require("react-intl");
+const constants_1 = require("../constants");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const pubsub_js_1 = tslib_1.__importDefault(require("pubsub-js"));
+const PubSub_1 = require("../../../constants/PubSub");
+const react_1 = require("react");
+const classes = {
+    sectionButton: `${constants_1.PREFIX}-section-button`,
+    sectionButtonTypography: `${constants_1.PREFIX}-section-button-typography`
+};
+function AddButton(props) {
+    // PROPS
+    const { label, handleAddRow, className } = props, rest = tslib_1.__rest(props, ["label", "handleAddRow", "className"]);
+    // HOOKS
+    const theme = (0, material_1.useTheme)();
+    const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
+    // HANDLERS
+    const handleClick = (0, react_1.useCallback)(() => {
+        handleAddRow();
+        pubsub_js_1.default.publish(`${PubSub_1.SCTopicType.COURSE}.${PubSub_1.SCGroupEventType.UPDATE}`, true);
+    }, [handleAddRow]);
+    return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: isMobile ? ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: handleClick }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "add_circle_outline" }) }))) : ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ className: (0, classnames_1.default)(classes.sectionButton, className), size: "small", startIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "add_circle_outline" }), onClick: handleClick }, rest, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.sectionButtonTypography, variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: label, defaultMessage: label }) })) }))) }));
+}
+exports.default = (0, react_1.memo)(AddButton);

package/lib/cjs/components/EditCourse/Lessons/ChangeLessonStatus.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { SCCourseLessonType, SCCourseSectionType, SCCourseType } from '@selfcommunity/types';
+import { ActionLessonType } from '../types';
+interface ChangeLessonStatusProps {
+    course: SCCourseType;
+    section: SCCourseSectionType;
+    lesson: SCCourseLessonType;
+    onChange: (lesson: SCCourseLessonType, type: ActionLessonType) => void;
+    disabled?: boolean;
+}
+declare function ChangeLessonStatus(props: ChangeLessonStatusProps): JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof ChangeLessonStatus>;
+export default _default;