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

package/lib/cjs/components/PdfPreviewDialog/PdfPreviewDialog.js

@@ -0,0 +1,63 @@
+"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.__importDefault(require("react"));
+const material_1 = require("@mui/material");
+const system_1 = require("@mui/system");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const react_core_1 = require("@selfcommunity/react-core");
+const BaseDialog_1 = tslib_1.__importDefault(require("../../shared/BaseDialog"));
+const PdfPreview_1 = tslib_1.__importDefault(require("../PdfPreview"));
+const api_services_1 = require("@selfcommunity/api-services");
+const utils_1 = require("@selfcommunity/utils");
+const Errors_1 = require("../../constants/Errors");
+const PREFIX = 'SCPdfPreviewDialog';
+const classes = {
+    root: `${PREFIX}-root`,
+    content: `${PREFIX}-content`
+};
+const Root = (0, material_1.styled)(BaseDialog_1.default, {
+    slot: 'Root',
+    name: PREFIX
+})(({ theme }) => ({}));
+const Transition = react_1.default.forwardRef(function Transition(props, ref) {
+    return (0, jsx_runtime_1.jsx)(material_1.Slide, Object.assign({ direction: "up", ref: ref }, props));
+});
+const NoTransition = react_1.default.forwardRef(function NoTransition(props, ref) {
+    return (0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [" ", props.children, " "] });
+});
+function PdfPreviewDialog(inProps) {
+    // PROPS
+    const props = (0, system_1.useThemeProps)({
+        props: inProps,
+        name: PREFIX
+    });
+    const { className, title, pdfUrl, disableInitialTransition = false, onClose, PdfPreviewComponentProps = {} } = props, rest = tslib_1.__rest(props, ["className", "title", "pdfUrl", "disableInitialTransition", "onClose", "PdfPreviewComponentProps"]);
+    // HOOKS
+    const { isPaymentsEnabled } = (0, react_core_1.useSCPaymentsEnabled)();
+    /**
+     * handle download pdf
+     */
+    const handleDownload = () => tslib_1.__awaiter(this, void 0, void 0, function* () {
+        try {
+            const response = yield api_services_1.http.request({ url: pdfUrl, responseType: 'blob' });
+            const blob = new Blob([response.data], { type: 'application/pdf' });
+            const url = window.URL.createObjectURL(blob);
+            const link = document.createElement('a');
+            link.href = url;
+            link.download = 'order.pdf';
+            link.click();
+            // Cleanup
+            window.URL.revokeObjectURL(url);
+        }
+        catch (error) {
+            utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
+        }
+    });
+    if (!isPaymentsEnabled) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ fullScreen: true, scroll: 'paper', open: true, maxWidth: 'md' }, (disableInitialTransition ? { TransitionComponent: NoTransition } : { TransitionComponent: Transition }), { className: (0, classnames_1.default)(classes.root, className), TransitionComponent: Transition }, rest, { children: [(0, jsx_runtime_1.jsx)(material_1.AppBar, Object.assign({ sx: { position: 'fixed', top: 0 } }, { children: (0, jsx_runtime_1.jsxs)(material_1.Toolbar, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h6", component: "div", sx: { flexGrow: 1 } }, { children: title })), pdfUrl && ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ edge: "end", color: "inherit", onClick: handleDownload, "aria-label": "close" }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "download" }) }))), (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ edge: "end", color: "inherit", onClick: onClose, "aria-label": "close", sx: { ml: 2 } }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) }))] }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ container: true, className: classes.content }, { children: (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, justifyContent: 'center', alignContent: 'center' }, { children: (0, jsx_runtime_1.jsx)(PdfPreview_1.default, Object.assign({}, PdfPreviewComponentProps, { pdfUrl: pdfUrl })) })) }))] })));
+}
+exports.default = PdfPreviewDialog;

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

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

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

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

package/lib/cjs/components/PrivateMessageComponent/PrivateMessageComponent.js

@@ -80,7 +80,8 @@ function PrivateMessageComponent(inProps) {
         return ((_a = item === null || item === void 0 ? void 0 : item.receiver) === null || _a === void 0 ? void 0 : _a.id) !== loggedUserId ? (_b = item === null || item === void 0 ? void 0 : item.receiver) === null || _b === void 0 ? void 0 : _b.id : (_c = item === null || item === void 0 ? void 0 : item.sender) === null || _c === void 0 ? void 0 : _c.id;
     };
     // MEMO
-    const privateMessagingEnabled = (0, react_1.useMemo)(() => scPreferences.features.includes(types_1.SCFeatureName.PRIVATE_MESSAGING), [scPreferences.features]);
+    const privateMessagingEnabled = (0, react_1.useMemo)(() => react_core_1.SCPreferences.ADDONS_PRIVATE_MESSAGES_ENABLED in scPreferences.preferences &&
+        scPreferences.preferences[react_core_1.SCPreferences.ADDONS_PRIVATE_MESSAGES_ENABLED].value, [scPreferences.preferences]);
     const authUserId = (0, react_1.useMemo)(() => (scUserContext.user ? scUserContext.user.id : null), [scUserContext.user]);
     (0, react_1.useEffect)(() => {
         setObj(id !== null && id !== void 0 ? id : null);

package/lib/cjs/components/PrivateMessageComponent/Skeleton.d.ts

@@ -6,7 +6,7 @@ interface PrivateMessageComponentSkeletonMap {
      */
     className?: string;
 }
-export type PrivateMessageComponentProps = React.PropsWithChildren<PrivateMessageComponentSkeletonMap>;
+export declare type PrivateMessageComponentProps = React.PropsWithChildren<PrivateMessageComponentSkeletonMap>;
 /**
  * > API documentation for the Community-JS Private Messages Skeleton Template. Learn about the available props and the CSS API.
 

package/lib/cjs/components/PrivateMessageThreadItem/PrivateMessageThreadItem.js

@@ -129,18 +129,18 @@ function PrivateMessageThreadItem(inProps) {
             let type = m.file.mimetype;
             switch (true) {
                 case type.startsWith(types_1.SCMessageFileType.IMAGE):
-                    section = ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.img }, { children: (0, jsx_runtime_1.jsx)("img", { src: m.file.thumbnail, loading: "lazy", alt: 'img', onClick: () => setOpenDialog(true) }) })));
+                    section = ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.img }, { children: (0, jsx_runtime_1.jsx)("img", { src: m.file.thumbnail, loading: "lazy", alt: "img", onClick: () => setOpenDialog(true) }) })));
                     break;
                 case type.startsWith(types_1.SCMessageFileType.VIDEO):
                     if (!(0, thumbnailCoverter_1.isSupportedVideoFormat)(m.file.filename)) {
                         section = defaultSection;
                     }
                     else {
-                        section = ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: (0, classnames_1.default)(classes.img, classes.video) }, { children: [(0, jsx_runtime_1.jsx)("img", { src: m.file.thumbnail, loading: "lazy", alt: 'img' }), (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: () => setOpenDialog(true) }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "play_circle_outline" }) }))] })));
+                        section = ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: (0, classnames_1.default)(classes.img, classes.video) }, { children: [(0, jsx_runtime_1.jsx)("img", { src: m.file.thumbnail, loading: "lazy", alt: "img" }), (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: () => setOpenDialog(true) }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "play_circle_outline" }) }))] })));
                     }
                     break;
                 case type.startsWith(types_1.SCMessageFileType.DOCUMENT):
-                    section = ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: m.file.filename.endsWith('.pdf') ? classes.document : classes.other }, { children: [m.file.filename.endsWith('.pdf') && (0, jsx_runtime_1.jsx)("img", { src: m.file.thumbnail, loading: "lazy", alt: 'img' }), (0, jsx_runtime_1.jsxs)(material_1.Button, Object.assign({ onClick: () => handleDownload(m.file), startIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "download" }) }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: m.file.filename }), (0, jsx_runtime_1.jsx)(material_1.Typography, { children: (0, sizeCoverter_1.bytesToSize)(m.file.filesize) })] }))] })));
+                    section = ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: m.file.filename.endsWith('.pdf') ? classes.document : classes.other }, { children: [m.file.filename.endsWith('.pdf') && (0, jsx_runtime_1.jsx)("img", { src: m.file.thumbnail, loading: "lazy", alt: "img" }), (0, jsx_runtime_1.jsxs)(material_1.Button, Object.assign({ onClick: () => handleDownload(m.file), startIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "download" }) }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: m.file.filename }), (0, jsx_runtime_1.jsx)(material_1.Typography, { children: (0, sizeCoverter_1.bytesToSize)(m.file.filesize) })] }))] })));
                     break;
                 default:
                     // section = <Icon>hide_image</Icon>;
@@ -161,6 +161,6 @@ function PrivateMessageThreadItem(inProps) {
             message.status !== types_1.SCPrivateMessageStatusType.HIDDEN && (0, jsx_runtime_1.jsx)(PrivateMessageSettingsIconButton_1.default, { onMenuItemDeleteClick: handleMenuItemClick }) }, { children: [message.group && ((_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.username) !== message.sender.username && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ color: "secondary", variant: "h4", className: classes.username }, { children: message.sender.username }))), (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [hasFile && message.status !== types_1.SCPrivateMessageStatusType.HIDDEN ? (renderMessageFile(message)) : ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.text }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, { component: "span", dangerouslySetInnerHTML: { __html: message.message } }) }))), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.messageTime, color: "text.secondary" }, { children: `${intl.formatDate(message.created_at, {
                             hour: 'numeric',
                             minute: 'numeric'
-                        })}` }))] }), openDialog && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (message === null || message === void 0 ? void 0 : message.file.mimetype.startsWith(types_1.SCMessageFileType.VIDEO)) ? ((0, jsx_runtime_1.jsx)(DialogRoot, Object.assign({ open: openDialog, onClose: () => setOpenDialog(false), className: classes.dialogRoot }, { children: (0, jsx_runtime_1.jsx)(AutoPlayer_1.default, { url: message === null || message === void 0 ? void 0 : message.file.url, width: '100%', enableAutoplay: false }) }))) : ((0, jsx_runtime_1.jsx)(Lightbox_1.default, { images: [{ src: message === null || message === void 0 ? void 0 : message.file.url, key: message.file.uuid }], onClose: () => setOpenDialog(false), toolbarButtons: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: () => handleDownload(message === null || message === void 0 ? void 0 : message.file), className: classes.downloadButton }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "download" }) }), 'download') })) }))] })));
+                        })}` }))] }), openDialog && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (message === null || message === void 0 ? void 0 : message.file.mimetype.startsWith(types_1.SCMessageFileType.VIDEO)) ? ((0, jsx_runtime_1.jsx)(DialogRoot, Object.assign({ open: openDialog, onClose: () => setOpenDialog(false), className: classes.dialogRoot }, { children: (0, jsx_runtime_1.jsx)(AutoPlayer_1.default, { url: message === null || message === void 0 ? void 0 : message.file.url, width: "100%" }) }))) : ((0, jsx_runtime_1.jsx)(Lightbox_1.default, { images: [{ src: message === null || message === void 0 ? void 0 : message.file.url, key: message.file.uuid }], onClose: () => setOpenDialog(false), toolbarButtons: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: () => handleDownload(message === null || message === void 0 ? void 0 : message.file), className: classes.downloadButton }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "download" }) }), "download") })) }))] })));
 }
 exports.default = PrivateMessageThreadItem;

package/lib/cjs/components/ToastNotifications/ToastNotifications.js

@@ -168,17 +168,9 @@ function UserToastNotifications(inProps) {
              * - the enqueue message is persistent (it remains on the screen while the others replace each other) if type notification_banner
              */
             const messageKey = data.data.feed_serialization_id ? data.data.feed_serialization_id : data.data.id;
-            enqueueSnackbar(getContent(data.data), {
-                preventDuplicate: true,
-                key: messageKey,
-                variant: 'notification',
-                persist: data.data.activity_type === types_1.SCNotificationTypologyType.NOTIFICATION_BANNER ? true : false,
-                anchorOrigin: { horizontal: 'left', vertical: 'bottom' },
-                action: null,
-                SnackbarProps: {
+            enqueueSnackbar(getContent(data.data), Object.assign(Object.assign({ preventDuplicate: true, key: messageKey, variant: 'notification', persist: data.data.activity_type === types_1.SCNotificationTypologyType.NOTIFICATION_BANNER }, (data.data.activity_type !== types_1.SCNotificationTypologyType.NOTIFICATION_BANNER && { autoHideDuration: 10000 })), { anchorOrigin: { horizontal: 'left', vertical: 'bottom' }, action: null, SnackbarProps: {
                     id: messageKey
-                }
-            });
+                } }));
         }
     };
     /**

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;

package/lib/cjs/components/UserBillingInfo/Skeleton.d.ts

@@ -0,0 +1,25 @@
+import { UserBillingInfoMode } from '../../constants/Billing';
+/**
+ * > API documentation for the Community-JS User Billing Info Skeleton component. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {UserBillingInfoSkeleton} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCUserBillingInfoSkeleton-skeleton-root` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCUserBillingInfoSkeleton-skeleton-root|Styles applied to the root element.|
+ *
+ */
+export interface UserSkeletonBillingInfoProps {
+    mode?: UserBillingInfoMode;
+}
+export default function UserBillingInfoSkeleton(props: UserSkeletonBillingInfoProps): JSX.Element | null;

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

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const Billing_1 = require("../../constants/Billing");
+function UserBillingInfoSkeleton(props) {
+    if (props.mode === Billing_1.UserBillingInfoMode.READ) {
+        return ((0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", height: 15, width: 200, sx: { mb: 2 } }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", height: 15, width: 250, sx: { mb: 2 } }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", height: 15, width: 220, sx: { mb: 2 } }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", height: 15, width: 190, sx: { mb: 2 } })] }));
+    }
+    return ((0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ container: true, spacing: 3 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, sm: 6 }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", height: 50 }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, sm: 6 }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", height: 50 }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, sm: 6 }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", height: 50 }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, sm: 6 }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", height: 50 }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, sm: 6 }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", height: 50 }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, sm: 6 }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", height: 50 }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, sm: 6, justifyContent: 'center' }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rounded", height: 30, width: 100 }) }))] })));
+}
+exports.default = UserBillingInfoSkeleton;

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

@@ -0,0 +1,35 @@
+import React from 'react';
+import { UserBillingInfoMode } from '../../constants/Billing';
+import { SCCustomerBillingInfo } from '@selfcommunity/types/src/types';
+export interface UserBillingInfoProps {
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default null
+     */
+    className?: string;
+    id?: string;
+    inlineDisplay?: boolean;
+    buttonLabel?: JSX.Element;
+    mode?: UserBillingInfoMode;
+    onLoad?: (account: SCCustomerBillingInfo, isCustomerCompleted: boolean) => void;
+    onChange?: (account: SCCustomerBillingInfo) => void;
+    onSave?: (account: SCCustomerBillingInfo) => void;
+    onError?: (error: any) => void;
+    onBack?: () => void;
+    onChangeViewMode?: (mode: UserBillingInfoMode) => void;
+    disableButtons?: boolean;
+    /**
+     * Any other properties
+     */
+    [p: string]: any;
+}
+/**
+ * BillingInfo component interface reference
+ */
+export declare type UserBillingInfoRef = {
+    isBillingInfoCompleted: () => boolean;
+    showError: (e: string) => void;
+    billingMode: () => UserBillingInfoMode;
+};
+declare const _default: React.ForwardRefExoticComponent<Pick<UserBillingInfoProps, keyof UserBillingInfoProps> & React.RefAttributes<UserBillingInfoRef>>;
+export default _default;