@selfcommunity/react-ui 0.10.5-payments.169 → 0.10.5-payments.175

package/lib/cjs/components/CourseForm/CourseForm.js

@@ -22,6 +22,7 @@ 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 messages = (0, react_intl_1.defineMessages)({
     name: {
         id: 'ui.courseForm.name.placeholder',
@@ -60,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, styles_1.styled)(material_1.Box, {
     name: constants_1.PREFIX,
@@ -101,7 +103,7 @@ const Root = (0, styles_1.styled)(material_1.Box, {
  * @param inProps
  */
 function CourseForm(inProps) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     //PROPS
     const props = (0, system_1.useThemeProps)({
         props: inProps,
@@ -118,6 +120,7 @@ function CourseForm(inProps) {
         description: course ? course.description : '',
         categories: course ? course.categories : [],
         privacy: course ? course.privacy : '',
+        product_ids: ((_a = course === null || course === void 0 ? void 0 : course.paywalls) === null || _a === void 0 ? void 0 : _a.map((p) => p.id)) || [],
         isSubmitting: false
     };
     // STATE
@@ -125,8 +128,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` }
@@ -187,6 +195,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) {
@@ -203,6 +212,11 @@ function CourseForm(inProps) {
                 formData.append(key, field.categories[key]);
             }
         }
+        if (field.product_ids && (isStaff || ((_a = course.paywalls) === null || _a === void 0 ? void 0 : _a.length))) {
+            field.product_ids.forEach((p, i) => {
+                formData.append(`product_ids[${i}]`, p.toString());
+            });
+        }
         let courseService;
         if (course) {
             courseService = api_services_1.CourseService.patchCourse(course.id, formData, {
@@ -244,6 +258,13 @@ function CourseForm(inProps) {
             setError(error);
         }
     }, [setField, error]);
+    /**
+     * Handle change payment products
+     * @param products
+     */
+    const handleChangePaymentsProducts = (products) => {
+        setField((prev) => (Object.assign(Object.assign({}, prev), { product_ids: products.map((product) => product.id) })));
+    };
     /**
      * Handles for closing confirm dialog
      */
@@ -256,8 +277,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(field.name.length > Course_1.COURSE_TITLE_MAX_LENGTH) || Boolean(error['nameError']), helperText: 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(((_b = field.description) === null || _b === void 0 ? void 0 : _b.length) > Course_1.COURSE_DESCRIPTION_MAX_LENGTH), helperText: ((_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" })) : null }), (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: ((_b = field.description) === null || _b === void 0 ? void 0 : _b.length) ? Course_1.COURSE_DESCRIPTION_MAX_LENGTH - field.description.length : Course_1.COURSE_DESCRIPTION_MAX_LENGTH })))
+                                            }, error: Boolean(((_c = field.description) === null || _c === void 0 ? void 0 : _c.length) > Course_1.COURSE_DESCRIPTION_MAX_LENGTH), helperText: ((_d = field.description) === null || _d === void 0 ? void 0 : _d.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" })) : null }), (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 && ((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, onChange: 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/EventForm/EventForm.js

@@ -123,7 +123,7 @@ const Root = (0, styles_1.styled)(material_1.Box, {
  * @param inProps
  */
 function EventForm(inProps) {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e, _f, _g;
     //PROPS
     const props = (0, system_1.useThemeProps)({
         props: inProps,
@@ -165,7 +165,7 @@ function EventForm(inProps) {
         liveStreamSettings: (event === null || event === void 0 ? void 0 : event.live_stream) ? event === null || event === void 0 ? void 0 : event.live_stream.settings : null,
         recurring: (event === null || event === void 0 ? void 0 : event.recurring) || types_1.SCEventRecurrenceType.NEVER,
         isPublic: (event === null || event === void 0 ? void 0 : event.privacy) === types_1.SCEventPrivacyType.PUBLIC || true,
-        product_ids: (event === null || event === void 0 ? void 0 : event.paywalls.map((p) => p.id)) || [],
+        product_ids: ((_b = event === null || event === void 0 ? void 0 : event.paywalls) === null || _b === void 0 ? void 0 : _b.map((p) => p.id)) || [],
         isSubmitting: false
     };
     // STATE
@@ -179,7 +179,7 @@ function EventForm(inProps) {
         scPreferences.features.includes(types_1.SCFeatureName.LIVE_STREAM) &&
         react_core_1.SCPreferences.CONFIGURATIONS_LIVE_STREAM_ENABLED in scPreferences.preferences &&
         scPreferences.preferences[react_core_1.SCPreferences.CONFIGURATIONS_LIVE_STREAM_ENABLED].value, [scPreferences.preferences, scPreferences.features]);
-    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; }, [(_b = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _b === void 0 ? void 0 : _b.permission]);
+    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; }, [(_c = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _c === void 0 ? void 0 : _c.permission]);
     const privateEnabled = (0, react_1.useMemo)(() => scPreferences.preferences[react_core_1.SCPreferences.CONFIGURATIONS_EVENTS_PRIVATE_ENABLED].value, [scPreferences.preferences]);
     const visibilityEnabled = (0, react_1.useMemo)(() => scPreferences.preferences[react_core_1.SCPreferences.CONFIGURATIONS_EVENTS_VISIBILITY_ENABLED].value, [scPreferences.preferences]);
     const disablePastStartTime = (0, react_1.useMemo)(() => field.startDate.getDate() === (0, utils_2.getNewDate)().getDate(), [field]);
@@ -332,6 +332,10 @@ function EventForm(inProps) {
         }
         setGenericError(null);
     }, [error, setField, setGenericError]);
+    /**
+     * Handle change payment products
+     * @param products
+     */
     const handleChangePaymentsProducts = (products) => {
         setField((prev) => (Object.assign(Object.assign({}, prev), { product_ids: products.map((product) => product.id) })));
     };
@@ -408,7 +412,7 @@ function EventForm(inProps) {
                             start_date: field.startDate,
                             location: field.location,
                             geolocation: field.geolocation,
-                            live_stream: Object.assign(Object.assign({ title: field.name || `${intl.formatMessage(messages.name)}` }, (event && ((_c = event.live_stream) === null || _c === void 0 ? void 0 : _c.created_at) && { created_at: field.startDate })), { settings: field.liveStreamSettings })
+                            live_stream: Object.assign(Object.assign({ title: field.name || `${intl.formatMessage(messages.name)}` }, (event && ((_d = event.live_stream) === null || _d === void 0 ? void 0 : _d.created_at) && { created_at: field.startDate })), { settings: field.liveStreamSettings })
                         }) }, EventAddressComponentProps)), privateEnabled && ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.privacySection }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center", justifyContent: "center" }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: (0, classnames_1.default)(classes.switchLabel, { [classes.active]: !field.isPublic }) }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, { children: "private" }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.privacy.private", defaultMessage: "ui.eventForm.privacy.private" })] })), (0, jsx_runtime_1.jsx)(material_1.Switch, { className: classes.switch, checked: field.isPublic, onChange: () => setField((prev) => (Object.assign(Object.assign({}, prev), { ['isPublic']: !field.isPublic }))), disabled: event && !field.isPublic }), (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: (0, classnames_1.default)(classes.switchLabel, { [classes.active]: field.isPublic }) }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, { children: "public" }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.privacy.public", defaultMessage: "ui.eventForm.privacy.public" })] }))] })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", textAlign: "center", className: classes.privacySectionInfo }, { children: field.isPublic ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.privacy.public.info", defaultMessage: "ui.eventForm.privacy.public.info", values: {
                                         // eslint-disable-next-line @typescript-eslint/ban-ts-ignore,@typescript-eslint/ban-ts-comment
                                         // @ts-ignores
@@ -418,8 +422,8 @@ function EventForm(inProps) {
                                         // @ts-ignore
                                         b: (chunks) => (0, jsx_runtime_1.jsx)("strong", { children: chunks })
                                     } })) }))] }))), (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: ((_d = field.description) === null || _d === void 0 ? void 0 : _d.length) ? Event_1.EVENT_DESCRIPTION_MAX_LENGTH - field.description.length : Event_1.EVENT_DESCRIPTION_MAX_LENGTH })))
-                        }, error: Boolean(((_e = field.description) === null || _e === void 0 ? void 0 : _e.length) > Event_1.EVENT_DESCRIPTION_MAX_LENGTH), helperText: ((_f = field.description) === null || _f === void 0 ? void 0 : _f.length) > Event_1.EVENT_DESCRIPTION_MAX_LENGTH ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.description.error.maxLength", defaultMessage: "ui.eventForm.description.error.maxLength" })) : null }), isPaymentsEnabled && isStaff && ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.paywallsConfiguratorWrap }, { children: (0, jsx_runtime_1.jsx)(PaywallsConfigurator_1.default, Object.assign({}, (event && { contentId: event.id }), { contentType: types_1.SCContentType.EVENT, onChange: handleChangePaymentsProducts })) }))), genericError && ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.genericError }, { children: (0, jsx_runtime_1.jsx)(material_1.Alert, Object.assign({ variant: "filled", severity: "error" }, { children: genericError })) }))), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.actions }, { children: (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ loading: field.isSubmitting, disabled: !field.name ||
+                            endAdornment: ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: ((_e = field.description) === null || _e === void 0 ? void 0 : _e.length) ? Event_1.EVENT_DESCRIPTION_MAX_LENGTH - field.description.length : Event_1.EVENT_DESCRIPTION_MAX_LENGTH })))
+                        }, error: Boolean(((_f = field.description) === null || _f === void 0 ? void 0 : _f.length) > Event_1.EVENT_DESCRIPTION_MAX_LENGTH), helperText: ((_g = field.description) === null || _g === void 0 ? void 0 : _g.length) > Event_1.EVENT_DESCRIPTION_MAX_LENGTH ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.description.error.maxLength", defaultMessage: "ui.eventForm.description.error.maxLength" })) : null }), isPaymentsEnabled && isStaff && ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.paywallsConfiguratorWrap }, { children: (0, jsx_runtime_1.jsx)(PaywallsConfigurator_1.default, Object.assign({}, (event && { contentId: event.id }), { contentType: types_1.SCContentType.EVENT, onChange: handleChangePaymentsProducts })) }))), genericError && ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.genericError }, { children: (0, jsx_runtime_1.jsx)(material_1.Alert, Object.assign({ variant: "filled", severity: "error" }, { children: genericError })) }))), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.actions }, { children: (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ loading: field.isSubmitting, disabled: !field.name ||
                                 !field.startDate ||
                                 !field.startTime ||
                                 !field.endDate ||

package/lib/cjs/components/EventFormDialog/EventFormDialog.js

@@ -48,9 +48,15 @@ function EventFormDialog(inProps) {
         (_a = EventFormComponentProps.onSuccess) === null || _a === void 0 ? void 0 : _a.call(EventFormComponentProps, event);
         onClose === null || onClose === void 0 ? void 0 : onClose();
     }, [onClose, EventFormComponentProps]);
+    const handleClose = (_event, reason) => {
+        if (reason === 'backdropClick' || reason === 'escapeKeyDown') {
+            return;
+        }
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+    };
     /**
      * Renders root object
      */
-    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ DialogContentProps: { dividers: false }, title: (EventFormComponentProps === null || EventFormComponentProps === void 0 ? void 0 : EventFormComponentProps.event) ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.title.edit", defaultMessage: "ui.eventForm.title.edit" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.title", defaultMessage: "ui.eventForm.title" })), open: open, onClose: onClose, className: (0, classnames_1.default)(classes.root, className) }, rest, { children: (0, jsx_runtime_1.jsx)(EventForm_1.default, Object.assign({}, EventFormComponentProps, { onSuccess: handleSuccess })) })));
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ DialogContentProps: { dividers: false }, disableEscapeKeyDown: true, title: (EventFormComponentProps === null || EventFormComponentProps === void 0 ? void 0 : EventFormComponentProps.event) ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.title.edit", defaultMessage: "ui.eventForm.title.edit" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.title", defaultMessage: "ui.eventForm.title" })), open: open, onClose: handleClose, className: (0, classnames_1.default)(classes.root, className) }, rest, { children: (0, jsx_runtime_1.jsx)(EventForm_1.default, Object.assign({}, EventFormComponentProps, { onSuccess: handleSuccess })) })));
 }
 exports.default = EventFormDialog;

package/lib/cjs/components/GroupForm/GroupForm.js

@@ -95,7 +95,7 @@ const Root = (0, styles_1.styled)(BaseDialog_1.default, {
  * @param inProps
  */
 function GroupForm(inProps) {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f;
     //PROPS
     const props = (0, system_1.useThemeProps)({
         props: inProps,
@@ -113,7 +113,7 @@ function GroupForm(inProps) {
         isVisible: group ? group.visible : true,
         invitedUsers: null,
         isSubmitting: false,
-        product_ids: (group === null || group === void 0 ? void 0 : group.paywalls.map((p) => p.id)) || []
+        product_ids: ((_a = group === null || group === void 0 ? void 0 : group.paywalls) === null || _a === void 0 ? void 0 : _a.map((p) => p.id)) || []
     };
     // CONTEXT
     const scUserContext = (0, react_core_1.useSCUser)();
@@ -235,17 +235,23 @@ function GroupForm(inProps) {
     const handleChangePaymentsProducts = (products) => {
         setField((prev) => (Object.assign(Object.assign({}, prev), { product_ids: products.map((product) => product.id) })));
     };
+    const handleClose = (_event, reason) => {
+        if (reason === 'backdropClick' || reason === 'escapeKeyDown') {
+            return;
+        }
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+    };
     /**
      * Renders root object
      */
-    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ DialogContentProps: { dividers: false }, title: group ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupForm.title.edit", defaultMessage: "ui.groupForm.title.edit" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupForm.title", defaultMessage: "ui.groupForm.title" })), open: open, onClose: onClose, className: (0, classnames_1.default)(classes.root, className), actions: (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ loading: field.isSubmitting, disabled: !field.name ||
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ DialogContentProps: { dividers: false }, title: group ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupForm.title.edit", defaultMessage: "ui.groupForm.title.edit" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupForm.title", defaultMessage: "ui.groupForm.title" })), open: open, disableEscapeKeyDown: true, onClose: handleClose, className: (0, classnames_1.default)(classes.root, className), actions: (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ loading: field.isSubmitting, disabled: !field.name ||
                 Object.keys(error).length !== 0 ||
                 field.name.length > Group_1.GROUP_TITLE_MAX_LENGTH ||
                 field.name.description > Group_1.GROUP_DESCRIPTION_MAX_LENGTH, variant: "contained", onClick: handleSubmit, color: "secondary" }, { children: group ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupForm.button.edit", defaultMessage: "ui.groupForm.button.edit" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupForm.button.create", defaultMessage: "ui.groupForm.button.create" })) })) }, rest, { children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.Paper, Object.assign({ style: _backgroundCover, classes: { root: classes.cover } }, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.avatar }, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { children: field.imageOriginal ? (0, jsx_runtime_1.jsx)("img", { src: field.imageOriginal, alt: "avatar" }) : (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "icon_image" }) }) })), (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ChangeGroupPicture_1.default, { isCreationMode: true, onChange: handleChangeAvatar }), (0, jsx_runtime_1.jsx)(ChangeGroupCover_1.default, { isCreationMode: true, onChange: handleChangeCover })] })] })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: (0, classnames_1.default)(classes.header, { [classes.error]: error.emotionalImageOriginalError || error.imageOriginalError }), align: "center" }, { children: error.emotionalImageOriginalError || error.imageOriginalError ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupForm.header.error", defaultMessage: "ui.groupForm.header.error" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupForm.header", defaultMessage: "ui.groupForm.header" })) }))] }), (0, jsx_runtime_1.jsxs)(material_1.FormGroup, Object.assign({ className: classes.form }, { children: [(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: Group_1.GROUP_TITLE_MAX_LENGTH - field.name.length }))
-                            }, error: Boolean(((_a = field === null || field === void 0 ? void 0 : field.name) === null || _a === void 0 ? void 0 : _a.length) > Group_1.GROUP_TITLE_MAX_LENGTH), helperText: ((_b = field === null || field === void 0 ? void 0 : field.name) === null || _b === void 0 ? void 0 : _b.length) > Group_1.GROUP_TITLE_MAX_LENGTH ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupForm.name.error.maxLength", defaultMessage: "ui.groupForm.name.error.maxLength" })) : 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: ((_c = field.description) === null || _c === void 0 ? void 0 : _c.length) ? Group_1.GROUP_DESCRIPTION_MAX_LENGTH - field.description.length : Group_1.GROUP_DESCRIPTION_MAX_LENGTH })))
-                            }, error: Boolean(((_d = field.description) === null || _d === void 0 ? void 0 : _d.length) > Group_1.GROUP_DESCRIPTION_MAX_LENGTH), helperText: ((_e = field.description) === null || _e === void 0 ? void 0 : _e.length) > Group_1.GROUP_DESCRIPTION_MAX_LENGTH ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupForm.description.error.maxLength", defaultMessage: "ui.groupForm.description.error.maxLength" })) : null }), privateEnabled && ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.privacySection }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h4" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupForm.privacy.title", defaultMessage: "ui.groupForm.privacy.title", values: {
+                            }, error: Boolean(((_b = field === null || field === void 0 ? void 0 : field.name) === null || _b === void 0 ? void 0 : _b.length) > Group_1.GROUP_TITLE_MAX_LENGTH), helperText: ((_c = field === null || field === void 0 ? void 0 : field.name) === null || _c === void 0 ? void 0 : _c.length) > Group_1.GROUP_TITLE_MAX_LENGTH ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupForm.name.error.maxLength", defaultMessage: "ui.groupForm.name.error.maxLength" })) : 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: ((_d = field.description) === null || _d === void 0 ? void 0 : _d.length) ? Group_1.GROUP_DESCRIPTION_MAX_LENGTH - field.description.length : Group_1.GROUP_DESCRIPTION_MAX_LENGTH })))
+                            }, error: Boolean(((_e = field.description) === null || _e === void 0 ? void 0 : _e.length) > Group_1.GROUP_DESCRIPTION_MAX_LENGTH), helperText: ((_f = field.description) === null || _f === void 0 ? void 0 : _f.length) > Group_1.GROUP_DESCRIPTION_MAX_LENGTH ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupForm.description.error.maxLength", defaultMessage: "ui.groupForm.description.error.maxLength" })) : null }), privateEnabled && ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.privacySection }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h4" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupForm.privacy.title", defaultMessage: "ui.groupForm.privacy.title", values: {
                                             // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
                                             // @ts-ignore
                                             b: (chunks) => (0, jsx_runtime_1.jsx)("strong", { children: chunks })

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

@@ -0,0 +1,41 @@
+import { BaseDialogProps } from '../../shared/BaseDialog';
+import { PaymentMethod as StripePaymentMethod } from '@stripe/stripe-js';
+export interface UserAddPaymentMethodDialogProps extends BaseDialogProps {
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default null
+     */
+    className?: string;
+    /**
+     * Callback handle address
+     * @param address
+     */
+    handlePaymentMethod?: (paymentMethod: StripePaymentMethod) => void;
+    /**
+     * Any other properties
+     */
+    [p: string]: any;
+}
+/**
+ * > API documentation for the Community-JS User Add Payment Method Dialog. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {UserAddPaymentMethodDialog} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCUserAddPaymentMethodDialog` can be used when providing style overrides in the theme.
+
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCUserAddPaymentMethodDialog-root|Styles applied to the root element.|
+
+ * @param inProps
+ */
+export default function UserAddPaymentMethodDialog(inProps: UserAddPaymentMethodDialogProps): JSX.Element;

package/lib/cjs/components/UserAddPaymentMethodDialog/UserAddPaymentMethodDialog.js

@@ -0,0 +1,94 @@
+"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 styles_1 = require("@mui/material/styles");
+const react_core_1 = require("@selfcommunity/react-core");
+const system_1 = require("@mui/system");
+const constants_1 = require("./constants");
+const BaseDialog_1 = tslib_1.__importDefault(require("../../shared/BaseDialog"));
+const react_intl_1 = require("react-intl");
+const stripe_js_1 = require("@stripe/stripe-js");
+const payment_1 = require("../../types/payment");
+const material_1 = require("@mui/material");
+const react_stripe_js_1 = require("@stripe/react-stripe-js");
+const payment_2 = require("../../utils/payment");
+const UserAddPaymentMethodForm_1 = tslib_1.__importDefault(require("../UserAddPaymentMethodForm"));
+const classes = {
+    root: `${constants_1.PREFIX}-root`,
+    loading: `${constants_1.PREFIX}-loading`
+};
+const Root = (0, styles_1.styled)(BaseDialog_1.default, {
+    name: constants_1.PREFIX,
+    slot: 'Root'
+})(() => ({
+    [`& .MuiDialogContent-root`]: {
+        overflowX: 'hidden'
+    },
+    [`& .${classes.loading}`]: {
+        marginTop: '200px'
+    }
+}));
+/**
+ * > API documentation for the Community-JS User Add Payment Method Dialog. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {UserAddPaymentMethodDialog} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCUserAddPaymentMethodDialog` can be used when providing style overrides in the theme.
+
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCUserAddPaymentMethodDialog-root|Styles applied to the root element.|
+
+ * @param inProps
+ */
+function UserAddPaymentMethodDialog(inProps) {
+    // PROPS
+    const props = (0, system_1.useThemeProps)({
+        props: inProps,
+        name: constants_1.PREFIX
+    });
+    const { className = null, handlePaymentMethod, open = false } = props, rest = tslib_1.__rest(props, ["className", "handlePaymentMethod", "open"]);
+    // CONTEXT
+    const scUserContext = (0, react_core_1.useSCUser)();
+    // STATE
+    const [isLoadingInit, setIsLoadingInit] = react_1.default.useState(true);
+    const [customer, setCustomer] = (0, react_1.useState)(null);
+    // HOOKS
+    const { isPaymentsEnabled, stripePublicKey, stripeConnectedAccountId } = (0, react_core_1.useSCPaymentsEnabled)();
+    const intl = (0, react_intl_1.useIntl)();
+    const stripePromise = isPaymentsEnabled && stripePublicKey && stripeConnectedAccountId && stripe_js_1.loadStripe
+        ? (0, stripe_js_1.loadStripe)(stripePublicKey, { stripeAccount: stripeConnectedAccountId, locale: (0, payment_2.getDefaultLocale)(intl).locale })
+        : null;
+    const theme = (0, styles_1.useTheme)();
+    const elementsOptions = Object.assign(Object.assign({ mode: 'setup', currency: payment_1.StripeCurrency.EUR, paymentMethodCreation: 'manual', loader: 'always' }, (0, payment_2.getDefaultAppearanceStyle)(theme)), (0, payment_2.getDefaultLocale)(intl));
+    const handleClose = () => {
+        handlePaymentMethod === null || handlePaymentMethod === void 0 ? void 0 : handlePaymentMethod(null);
+    };
+    const handleSuccess = (paymentMethod) => {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        handlePaymentMethod === null || handlePaymentMethod === void 0 ? void 0 : handlePaymentMethod(paymentMethod);
+    };
+    (0, react_1.useEffect)(() => {
+        /* getAccountCustomer().then((customer) => {
+                setCustomer(customer);
+                setIsLoadingInit(false);
+            }); */
+    }, []);
+    if (!isPaymentsEnabled || !scUserContext.user) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.userAddPaymentMethodDialog.title", id: "ui.userAddPaymentMethodDialog.title" }), open: open }, { children: isLoadingInit ? ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.loading }, { children: (0, jsx_runtime_1.jsx)(material_1.CircularProgress, {}) }))) : ((0, jsx_runtime_1.jsx)(react_stripe_js_1.Elements, Object.assign({ stripe: stripePromise, options: elementsOptions }, { children: (0, jsx_runtime_1.jsx)(UserAddPaymentMethodForm_1.default, { customer: customer, handleSuccess: handleSuccess, handleClose: handleClose }) }))) })));
+}
+exports.default = UserAddPaymentMethodDialog;

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,40 @@
+import { BaseDialogProps } from '../../shared/BaseDialog';
+import { PaymentMethod as StripePaymentMethod } from '@stripe/stripe-js';
+export interface UserAddPaymentMethodFormProps extends BaseDialogProps {
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default null
+     */
+    className?: string;
+    customer: any;
+    collectBillingAddress?: boolean;
+    handleSuccess?: (paymentMethod: StripePaymentMethod) => void;
+    handleClose?: () => void;
+    /**
+     * Any other properties
+     */
+    [p: string]: any;
+}
+/**
+ * > API documentation for the Community-JS User Add Payment Method Form. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {UserAddPaymentMethodForm} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCUserAddPaymentMethodForm` can be used when providing style overrides in the theme.
+
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCUserAddPaymentMethodForm-root|Styles applied to the root element.|
+
+ * @param inProps
+ */
+export default function UserAddPaymentMethodForm(inProps: UserAddPaymentMethodFormProps): JSX.Element;

package/lib/cjs/components/UserAddPaymentMethodForm/UserAddPaymentMethodForm.js

@@ -0,0 +1,143 @@
+"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 styles_1 = require("@mui/material/styles");
+const react_core_1 = require("@selfcommunity/react-core");
+const system_1 = require("@mui/system");
+const constants_1 = require("./constants");
+const BaseDialog_1 = tslib_1.__importDefault(require("../../shared/BaseDialog"));
+const react_intl_1 = require("react-intl");
+const stripe_js_1 = require("@stripe/stripe-js");
+const material_1 = require("@mui/material");
+const react_stripe_js_1 = require("@stripe/react-stripe-js");
+const payment_1 = require("../../utils/payment");
+const lab_1 = require("@mui/lab");
+const notistack_1 = require("notistack");
+const classes = {
+    root: `${constants_1.PREFIX}-root`,
+    address: `${constants_1.PREFIX}-loading`
+};
+const Root = (0, styles_1.styled)(BaseDialog_1.default, {
+    name: constants_1.PREFIX,
+    slot: 'Root'
+})(() => ({
+    [`& .${classes.address}`]: {
+        padding: 10,
+        borderRadius: 5,
+        margin: '20px 0px'
+    }
+}));
+/**
+ * > API documentation for the Community-JS User Add Payment Method Form. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {UserAddPaymentMethodForm} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCUserAddPaymentMethodForm` can be used when providing style overrides in the theme.
+
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCUserAddPaymentMethodForm-root|Styles applied to the root element.|
+
+ * @param inProps
+ */
+function UserAddPaymentMethodForm(inProps) {
+    // PROPS
+    const props = (0, system_1.useThemeProps)({
+        props: inProps,
+        name: constants_1.PREFIX
+    });
+    const { className = null, customer, collectBillingAddress = false, handleSuccess, handleClose } = props, rest = tslib_1.__rest(props, ["className", "customer", "collectBillingAddress", "handleSuccess", "handleClose"]);
+    // CONTEXT
+    const scUserContext = (0, react_core_1.useSCUser)();
+    // STATE
+    const [errorMessage, setErrorMessage] = (0, react_1.useState)(null);
+    const [ready, setReady] = (0, react_1.useState)(false);
+    const [loading, setLoading] = (0, react_1.useState)(false);
+    const [addressState, setAddressState] = (0, react_1.useState)({ name: customer.name, address: customer.address });
+    const [isEditingBillingAddress, setIsEditingBillingAddress] = react_1.default.useState(false);
+    const { enqueueSnackbar } = (0, notistack_1.useSnackbar)();
+    // HOOKS
+    const { isPaymentsEnabled, stripePublicKey, stripeConnectedAccountId } = (0, react_core_1.useSCPaymentsEnabled)();
+    const intl = (0, react_intl_1.useIntl)();
+    const stripePromise = isPaymentsEnabled && stripePublicKey && stripeConnectedAccountId && stripe_js_1.loadStripe
+        ? (0, stripe_js_1.loadStripe)(stripePublicKey, { stripeAccount: stripeConnectedAccountId, locale: (0, payment_1.getDefaultLocale)(intl).locale })
+        : null;
+    const elements = (0, react_stripe_js_1.useElements)();
+    const handleError = (error) => {
+        setLoading(false);
+        enqueueSnackbar((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.common.error", defaultMessage: "ui.common.error" }), {
+            variant: 'error',
+            autoHideDuration: 3000
+        });
+    };
+    const handleSubmit = (event) => tslib_1.__awaiter(this, void 0, void 0, function* () {
+        /*
+    
+            // We don't want to let default form submission happen here,
+            // which would refresh the page.
+            event.preventDefault();
+    
+            if (!stripePromise || !elements) {
+                // Stripe.js hasn't yet loaded.
+                // Make sure to disable form submission until Stripe.js has loaded.
+                return null;
+            }
+    
+            setLoading(true);
+    
+            // Trigger form validation and wallet collection
+            const {error: submitError} = await elements.submit();
+            if (submitError) {
+                handleError(submitError);
+                return;
+            }
+    
+            // Create the PaymentMethod using the details collected by the Payment Element
+            const {error, paymentMethod} = await stripe.createPaymentMethod({
+                elements,
+                params: {billing_details: addressState}
+            });
+    
+            if (error) {
+                // This point is only reached if there's an immediate error when
+                // creating the PaymentMethod. Show the error to your customer (for example, payment details incomplete)
+                handleError(error);
+                return;
+            }
+    
+            const res = await attachPaymentMethodToCustomer(paymentMethod.id);
+            if (res.error) {
+                handleError(res.error);
+                return;
+            }
+    
+            handleSuccess?.(paymentMethod as StripePaymentMethod); */
+    });
+    const onHandleClose = () => {
+        handleClose === null || handleClose === void 0 ? void 0 : handleClose();
+    };
+    const paymentElementOptions = {
+        defaultValues: Object.assign({}, (collectBillingAddress && { billingDetails: addressState }))
+    };
+    if (!isPaymentsEnabled || !scUserContext.user) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: classes.root }, { children: (0, jsx_runtime_1.jsxs)("form", Object.assign({ onSubmit: handleSubmit }, { children: [(0, jsx_runtime_1.jsx)(react_stripe_js_1.PaymentElement, { id: "payment-element", options: paymentElementOptions, onReady: () => setReady(true) }), collectBillingAddress && ((0, jsx_runtime_1.jsx)(material_1.Paper, Object.assign({ variant: "outlined", className: classes.address }, { children: Object.keys(addressState).length && !isEditingBillingAddress ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: 'body1' }, { children: addressState.name })), (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ variant: 'body1' }, { children: [addressState.address.line1, (0, jsx_runtime_1.jsx)("br", {}), addressState.address.line2] })), (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ variant: 'body1' }, { children: [addressState.address.postal_code, " - ", addressState.address.city, " - ", addressState.address.country] })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ sx: { mt: 1 }, variant: 'contained', disabled: !elements, onClick: () => setIsEditingBillingAddress(!isEditingBillingAddress) }, { children: "Change" }))] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_stripe_js_1.AddressElement, { onChange: (event) => {
+                                    setAddressState(event.value);
+                                }, options: {
+                                    mode: 'billing',
+                                    defaultValues: addressState
+                                } }), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ sx: { mt: 1 }, variant: 'contained', disabled: !elements || loading || !ready, onClick: () => setIsEditingBillingAddress(!isEditingBillingAddress) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: 'ui.userAddPaymentMethodForm.useDefaultMethod', defaultMessage: 'ui.userAddPaymentMethodForm.useDefaultMethod' }) }))] })) }))), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", justifyContent: "flex-end", alignItems: "center", spacing: 2, mt: 3 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ onClick: onHandleClose, variant: "outlined" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userAddPaymentMethodForm.cancelButton", defaultMessage: "ui.userAddPaymentMethodForm.cancelButton" }) })), (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ disabled: !ready, loading: loading, type: "submit", variant: "contained" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userAddPaymentMethodForm.addButton", defaultMessage: "ui.userAddPaymentMethodForm.addButton" }) }))] })), errorMessage && (0, jsx_runtime_1.jsx)("div", { children: errorMessage })] })) })));
+}
+exports.default = UserAddPaymentMethodForm;

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

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

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

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

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

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

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

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